/* Clario, rebuilt on the Anubhuti case study's system (user, 2026-10-26).
   Same rules, Clario's own colours:
     1. one content box -- 1600px, centred on the page gutter -- instead of
        the narrow Ritam column, so text, figures and stats share edges;
     2. every section head the same: the numbered label row across the top,
        the title in the left column, its paragraph in the right column,
        bottom-aligned, figures spanning both;
     3. the intro as title left, lead right, then the four numbers on one
        rule with the outer ones touching its ends;
     4. toy buttons in the product bar, in Clario blue. */

.asset-clearance-case { --cl-edge: max(clamp(24px, 3.8vw, 72px), calc((100% - 1600px) / 2)); --cl-blue: #5a8fc0; }   /* the same edge as Anubhuti */

/* 1. the content box */
@media (min-width: 1024px) {
  .cs-ritam.narrow-8 > .wrap:not(.nx-hero) { padding-inline: var(--cl-edge); }
}
.clario-banner-inner { padding-inline: var(--cl-edge) !important; max-width: none !important; margin: 0 !important; }

/* 4. the product bar: Figma and the app as toy buttons */
.clario-nav-actions { display: flex; align-items: center; gap: 8px; }
.clario-nav-actions .tbtn { height: 40px; font-size: 14px; padding: 0 7px 0 16px; gap: 10px; }
.clario-nav-actions .tbtn .tbtn-chip { width: 26px; height: 26px; }
.clario-nav-actions .tbtn:not(.is-solid) { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); --chip-bg: rgba(255,255,255,.12); --chip-ink: #fff; --chip-line: transparent; }
.clario-nav-actions .tbtn.is-solid { background: #fff; color: #0a0d13; --chip-bg: var(--cl-blue); --chip-ink: #fff; box-shadow: none; }
@media (hover: hover) {
  .clario-nav-actions .tbtn:not(.is-solid):hover { background: rgba(255,255,255,.08); --chip-bg: #fff; --chip-ink: #0a0d13; }
  .clario-nav-actions .tbtn.is-solid:hover { --chip-bg: #0a0d13; --chip-ink: #fff; }
}

/* 3. the intro */
.cs-ritam .clario-intro-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; }
.cs-ritam .clario-intro-grid .clario-intro-title {
  margin: 0; max-width: none; font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance;
}
.cs-ritam .clario-intro-grid > .lead { margin: 0; max-width: none; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--ink-70); }
.cs-ritam .cs-stats {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px;
  margin: clamp(40px, 6vw, 72px) 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule); list-style: none;
}
.cs-ritam .cs-stats > li { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: 30ch; }
.cs-ritam .cs-stats .cs-card-title { font: var(--display-w, 600) clamp(1.35rem, 2vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.cs-ritam .cs-stats li > p:not(.cs-card-title) { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-70); }
.cs-ritam .clario-project-intro .cs-note,
.cs-ritam .clario-project-intro .cs-cards { margin-top: clamp(32px, 4vw, 48px); }

/* 2. section heads: title left, its words right */
.cs-ritam > section.section-tight { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; }
.cs-ritam > section.section-tight > * { grid-column: 1 / -1; min-width: 0; }
.cs-ritam > section.section-tight > h2 {
  grid-column: 1; margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance;
}
.cs-ritam > section.section-tight > h2 + .clario-short-grid,
.cs-ritam > section.section-tight > h2 + p {
  grid-column: 2; margin: 0 0 clamp(32px, 4vw, 48px); max-width: none !important;
}
.cs-ritam > section.section-tight > h2 + .clario-short-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }   /* only the two-paragraph blocks: a plain <p> stays inline text */
.cs-ritam > section.section-tight > h2 + .clario-short-grid > p,
.cs-ritam > section.section-tight > h2 + p { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; max-width: none; }
/* sections without a title keep their content across the full box */
.cs-ritam > section.section-tight > .clario-short-grid:not(h2 + *) { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .cs-ritam .clario-intro-grid,
  .cs-ritam > section.section-tight { grid-template-columns: 1fr; }
  .cs-ritam > section.section-tight > h2,
  .cs-ritam > section.section-tight > h2 + .clario-short-grid,
  .cs-ritam > section.section-tight > h2 + p { grid-column: 1; }
  .cs-ritam > section.section-tight > h2 { margin-bottom: 16px; }
  .cs-ritam .cs-stats { grid-template-columns: 1fr 1fr; justify-content: stretch; row-gap: 28px; }
  .clario-nav-actions .tbtn:not(.is-solid) { display: none; }
}

/* The product bar matches Anubhuti's (user, 2026-10-26): logo on the left
   content edge, links centred, the buttons ending on the right content
   edge, same height, a bigger wordmark, link size the same. */
.clario-sticky-nav-shell .clario-product-nav {
  width: 100%; box-sizing: border-box; margin: 0; padding-inline: var(--cl-edge);
  grid-template-columns: auto 1fr auto; height: 72px;
}
.clario-product-brand { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.clario-product-links { justify-self: center; }
.clario-product-links a { font-size: 14px; }
.clario-nav-actions { justify-self: end; }
@media (max-width: 760px) {
  /* links hide on a phone, so the bar is logo | button, button on the right edge */
  .clario-sticky-nav-shell .clario-product-nav { grid-template-columns: 1fr auto; height: 64px; }
}

/* Banner: one height for both case studies (user video, 2026-10-26). */
.clario-banner { height: clamp(200px, 17vw, 300px) !important; }
/* With the back-link row gone, the intro starts where Anubhuti's does. */
.cs-ritam .clario-project-intro { padding-top: clamp(40px, 6vw, 72px) !important; }
.cs-ritam .clario-project-intro > .clario-intro-grid { margin-top: 0 !important; }