/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   Shared homepage section patterns
   Import in any section component that uses the sticky badge rail.

   Provides: .hp-section shell, .hp-rail sticky rail,
   .hp-badge pill, .hp-heading, .hp-body
   ============================================================ */


/* ---- Section shell ----------------------------------------
   Background-color is intentionally omitted — each section
   sets its own via a single-rule override. */

.hp-section {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4rem;      /* 64px */
  padding:        8rem 0;   /* 128px top + bottom */
  font-family:    var(--font-family-default);
  width:          100%;
  box-sizing:     border-box;

}

/* Tablet (≤991px) */
@media (max-width: 991px) {
  .hp-section {
    padding: 6rem 0;
    gap:     3rem;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .hp-section {
    padding: 4rem 0;
    gap:     2rem;
  }
}

/* ---- Tight modifier -----------------------------------------
   Used by the AIR product page, where the default 128px rhythm reads
   as too loose. Same 0.75 / 0.5 tablet/mobile scaling as .hp-section
   above, just off a 96px desktop baseline instead of 128px. Add
   alongside .hp-section (e.g. className="hp-section hp-section--tight
   air-cta"); a section can still override further for anything that
   doesn't fit (see AirHowItWorksSection's mobile padding). */
.hp-section--tight {
  padding-block: 6rem;   /* 96px */
}

@media (max-width: 991px) {
  .hp-section--tight {
    padding-block: 4.5rem;   /* 72px */
  }
}

@media (max-width: 767px) {
  .hp-section--tight {
    padding-block: 3rem;   /* 48px */
  }
}


/* ---- Sticky badge rail ------------------------------------
   Absolutely positioned inside the first .container, pushed
   left via right: calc(100% - 80px).  The offset skips the
   container's left padding so the rail anchors to the content
   edge rather than the padding edge.  .container has
   position: relative so the rail is bounded to the container's
   height — badge stops when the container ends.
   Width = gutter between container (1024px) and container-wide
   (1384px): (1384 − 1024) / 2 = 180px.
   Shown only at ≥1480px — when container-wide is at max-width
   and the gutter is a fixed, predictable size. */

.hp-rail {
  display:        none;
  position:       absolute;
  right:          calc(100% - 80px);   /* 80px = container left padding */
  top:            0;
  bottom:         0;
  width:          calc((1384px - 1024px) / 2);   /* 180px */
  pointer-events: none;
}

.hp-rail__sticky {
  position:        sticky;
  top:             var(--nav-section-offset, 8rem);
  display:         flex;
  justify-content: flex-end;
  align-items:     flex-start;
  padding-right:   12px;   /* 12px gap from the container's left edge */
}

@media (min-width: 1480px) {
  .hp-rail {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-start;
  }

  .container[data-hp-rail-overflow] > .hp-rail {
    visibility: hidden;
  }
}


/* ---- Badge pill -------------------------------------------
   Base pill used in the sticky rail and as the inline badge.
   .hp-badge--inline controls visibility relative to breakpoint. */

.hp-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  height:          26px;
  padding:         0 var(--spacing-3);
  background:      var(--card);
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
  white-space:     nowrap;
}

/* Inline variant — shown below 1480px, hidden at and above (matches the rail
   breakpoint so there's never a gap where neither badge shows).

   It carries NO margin: `.section-header` owns badge→heading spacing via its
   24px `gap`. The one exception is a header that deliberately wants margin-
   driven spacing (DemoSection, `gap: 0`), which adds its own
   `.x .hp-badge--inline { margin-bottom }`. */
@media (min-width: 1480px) {
  .hp-badge--inline {
    display: none;
  }

  .container[data-hp-rail-overflow] .hp-badge--inline {
    display: inline-flex;
  }
}

/* Live indicator dot (DemoSection "Live demo" badge) */
.hp-badge__dot {
  display:          block;
  width:            6px;
  height:           6px;
  border-radius:    var(--radius-full);
  background-color: var(--primary);
  flex-shrink:      0;
}

/* ---- Chip variant -----------------------------------------
   A badge with a leading highlight chip + label, e.g.
   "New · Quality Studio". Put .hp-badge--chip on the badge and
   .hp-badge__chip on the leading element. Works in both the
   sticky rail (via <SectionRail className="hp-badge--chip">) and
   the inline position. */

.hp-badge--chip {
  gap:     4px;
  padding: 4px 12px 4px 4px;   /* py-4, pr-12, tight pl-4 so the chip hugs the edge */
}

.hp-badge__chip {
  display:       inline-flex;
  align-items:   center;
  height:        100%;
  padding:       0 8px;
  border-radius: var(--radius-full);
  background:    var(--opacity-primary-20);
  color:         var(--primary);
}


/* ---- Section header --------------------------------------
   Sitewide convention for the badge + heading + body block at
   the top of a section. Use directly (do not clone into a
   per-section class). The inline badge is the first child; the
   heading+body live in `__text`. Spacing is owned here so it is
   identical across every section:
     badge → 24px → text → 36px (heading→body) → 24px → actions

   align-items: flex-start is what keeps the inline badge from
   stretching full-width on small screens. */

.section-header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-6);   /* 24px — owns badge→heading spacing */
}

.section-header__text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;         /* don't stretch children — buttons keep their
                                         natural width (paragraphs still wrap at max-width) */
  gap:            var(--spacing-9);   /* 36px */
  max-width:      50rem;              /* 800px readable measure (heading + body) */
}

/* The body keeps the readable measure even when the block is widened (--wide),
   so a wide heading never drags the body to full width. This is the universal
   cap — sections should NOT add their own `.x .hp-body { max-width }`. */
.section-header__text .hp-body {
  max-width: 50rem;
}

/* Modifiers */
.section-header--center {
  align-items: center;
  text-align:  center;
}
/* Heading uses the full width; the body stays capped by the rule above. */
.section-header__text--wide {
  max-width: none;
}

.section-header__text--gap-36 {
  gap: var(--spacing-9);
}

@media (max-width: 767px) {
  .section-header       { gap: var(--spacing-4); }   /* 16px */
  .section-header__text { gap: var(--spacing-6); }   /* 24px */
  .section-header__text--gap-36 { gap: var(--spacing-9); }   /* 36px */
}


/* ---- Section intro row ------------------------------------
   Full-width text-left / action-right row. The copy slot expands to push
   actions to the far edge; text inside keeps the standard 50rem measure. */

.section-intro-row {
  display:     flex;
  align-items: center;
  gap:         2.25rem;   /* 36px */
  width:       100%;
}

.section-intro-row__copy {
  flex:      1;
  min-width: 0;
}

.section-intro-row__copy > .hp-body {
  max-width: 50rem;
}

.section-intro-row__actions {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .section-intro-row {
    flex-direction: column;
    align-items:    flex-start;
    gap:            2.25rem;   /* 36px */
  }
}


/* ---- Section heading --------------------------------------
   36px regular weight; .fw-bold inside uses bold. */

.hp-heading {
  margin:      0;
  font-size:   2.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 2.5rem;
  color:       var(--foreground);
}

.hp-heading.fw-bold {
  font-weight: var(--font-weight-bold);
}



/* ---- Section subheading -----------------------------------
   24px — used beneath headings as a secondary label. */

.hp-subheading {
  margin:      0;
  font-size:   1.5rem;
  line-height: 2rem;
  color:       var(--foreground);
}


/* ---- Section body text ------------------------------------
   20px regular — used in header intro blocks. */

.hp-body {
  margin:      0;
  font-size:   1.25rem;
  line-height: 1.75rem;
  color:       var(--foreground);
}

@media (max-width: 767px) {
  .hp-heading {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  .hp-subheading {
    font-size:   1.25rem;   /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .hp-body {
    font-size:   1.125rem;  /* 18px */
    line-height: 1.75rem;   /* 28px */
  }
}


/* ---- Shared card shell ------------------------------------
   Secondary background + hairline border + 12px radius.
   Use alongside component class for layout-specific rules. */

.card-secondary {
  background:    var(--secondary);
  border:        0.5px solid var(--border);
  border-radius: 12px;
  box-sizing:    border-box;
}


/* ---- 26px number pill -------------------------------------
   Circular badge used for step numbers.
   Color (background) set per-component. */

.num-pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  color:           var(--foreground);
}


/* ---- Card typography --------------------------------------
   Base/bold title and base/regular muted body.
   Color overrides applied per-component as needed. */

.card-title {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.card-body {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


/* ---- Page H1 — shared display heading --------------------- */

.page-h1 {
  margin:      0;
  font-size:   3rem;    /* 48px */
  line-height: 1.15;
  font-weight: var(--font-weight-light);
  color:       var(--foreground);
}

.page-h1__line {
  display: block;
}

@media (max-width: 767px) {
  .page-h1 { font-size: 2.25rem; }
}

@media (max-width: 479px) {
  .page-h1 { font-size: 2rem; }

  /* Opt-out of the portrait-mobile shrink: holds the ≤767 size (36px) below
     480px. Add alongside `.page-h1` when a mobile Figma frame keeps the larger
     headline (e.g. AirHeroSection). Replicate the pattern for other heading
     classes if/when the same need arises. */
  .page-h1--no-portrait-shrink { font-size: 2.25rem; }
}


/* ---- Button pair — wrap row + content-driven equal width ---
   A two-(or-more)-button CTA row that never clips or overflows: flex-wrap
   means it stacks instead of clipping when space runs out. Pair with the
   `buttonPairStyle()` helper (src/utils/buttonPair.ts), which sets
   --btn-pair-min-w from the longest label's own character count (a `ch`
   value — scales with the font) — NOT a guessed pixel breakpoint. min-width
   only ever WIDENS a button toward the longest one; it can never shrink a
   button below its own text, so there's no clipping risk either way.

   Applies the equal-ish-width treatment at every size by default. To scope
   it to one breakpoint only (e.g. mobile-only, like AirCtaSection), add a
   local override in the consuming component's CSS:
     .my-actions .btn { min-width: 0; }                          // reset
     @media (max-width: 767px) {
       .my-actions .btn { min-width: var(--btn-pair-min-w, 0); } // re-enable
     }
   Full writeup: docs/shared-css-classes.md → "Button pair". */

.btn-pair {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;   /* 12px */
}

.btn-pair .btn {
  min-width: var(--btn-pair-min-w, 0);
}

/* ============================================================
   VrCustomizeSection — "Every practice handles intake differently."

   The card shell, alternating rows, text column and framed visual
   column all come from the shared SplitCard primitive (see
   SplitCard.css). This file only carries the section background,
   the bare-icon eyebrow override, the muted "Example:" line, and the
   node-flow diagram panels (shared TAB_BG + per-row diagram svg).
   ============================================================ */

.vr-customize {
  background: var(--background);
}

/* Header uses the shared .section-header convention (section.css);
   .hp-section supplies the 128px padding + 64px header → card gap. */


/* ---- Eyebrow: bare icon + muted label --------------------
   SplitCard renders the eyebrow as <IconBadge variant="bg"> — a filled
   circle. The VR design shows a BARE 16px glyph, so strip the badge box
   for this section only (transparent bg, no fixed circle size). */

.vr-customize .split-card__step .icon-badge {
  width:      auto;
  height:     auto;
  background: transparent;
  color:      var(--foreground);
}


/* ---- Muted "Example:" line -------------------------------- */

.vr-customize__example {
  margin:      0;
  font-size:   var(--font-size-sm);      /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}


/* ---- Node-flow diagram panel ------------------------------
   The panel background (Bg1/2/3, one per row) is applied to the SplitCard
   frame itself via `visualClassName` — same treatment as homepage
   WorkforceSection's `workforce-visual--*` classes, just reused here as-is.
   `.vr-customize__viz` is the transparent cqmin-sizing layer on top: the
   diagram <img> is centered and capped in cqmin off this container's smaller
   dimension (see the Viz component note in VrCustomizeSection.tsx). */

.vr-customize__viz--intake {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f333f1d87297c9f9f_Bg1.svg');
  background-size:     cover;
  background-position: center;
}

.vr-customize__viz--scripts {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f2f8ec4852a3caea8_Bg2.svg');
  background-size:     cover;
  background-position: center;
}

.vr-customize__viz--synced {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3fe9e7fc07e2201748_Bg3.svg');
  background-size:     cover;
  background-position: center;
}

.vr-customize__viz {
  width:          100%;
  height:         100%;
  container-type: size;
  display:        flex;
  align-items:    center;
  justify-content: center;
}

/* The diagram <img> itself. `--viz-max-h` (the per-row cqmin value, e.g.
   "53.26cqmin") is set inline per instance — see Viz in
   VrCustomizeSection.tsx. Kept as a custom property rather than a plain
   inline `max-height` so the ≤991px override below can bump every row by a
   flat amount via `calc()`, regardless of each row's own base percentage. */
.vr-customize__viz-img {
  display:   block;
  width:     auto;
  height:    auto;
  max-width: 92%;
  max-height: var(--viz-max-h);
}


/* ============================================================
   Tablet (≤991px) / Mobile (≤767px) — panel height, matching how
   AirCustomizeSection's TabbedCard sizes its own stacked-mode frame
   (`.tabbed-card__stack .tabbed-card__frame`: fixed height, not a
   min-height — 360px tablet, 297px mobile) rather than SplitCard's own
   defaults here (400px min-height tablet, then `min-height: auto` i.e.
   content-sized on mobile):
   - SplitCard's 400px tablet min-height left a lot of empty space around
     the (much shorter, wide-aspect) node-flow diagrams — a fixed, shorter
     360px reads tighter, same as AIR's tablet frame.
   - SplitCard's mobile `min-height: auto` collapses `.vr-customize__viz`
     to 0: it's a `container-type: size` box, so it needs a *definite*
     height to size cqmin against — it can't fall back to its own content
     the way a normal box would (that's also why the panel vanished to a
     1px border before this fix). A fixed 297px, matching AIR's mobile
     frame, fixes that and keeps proportions consistent with tablet.

   Both media queries target `.split-card__visual` directly (not the inner
   `.vr-customize__viz`) so the fixed height applies to the *whole* panel —
   frame + viz both inherit it via their existing height:100% chain, same
   as at desktop. (`.vr-customize .split-card__visual` beats SplitCard's own
   same-breakpoint rules on specificity, so this cleanly overrides both.)

   The diagram itself no longer has hit-the-edges risk at these tighter
   heights: `maxHeight`/`maxWidth` on the <img> (see Viz in
   VrCustomizeSection.tsx) means it's capped by whichever dimension is
   tighter, so it shrinks to fit width instead of overflowing when the
   panel gets this short and comparatively narrow.
   ============================================================ */

@media (max-width: 991px) {
  .vr-customize .split-card__visual {
    height: 360px;
  }

  /* The shorter tablet/mobile panel has room to spare — the diagram's own
     cqmin cap (sized off the 800px desktop-height panel's proportions)
     reads a little small/hard-to-read at these panel heights, so bump
     every row's cap by a flat 10cqmin on top of its own base value. */
  .vr-customize__viz-img {
    max-height: calc(var(--viz-max-h) + 15cqmin);
  }
}

@media (max-width: 767px) {
  .vr-customize .split-card__visual {
    height: 297px;
  }
}

/* ============================================================
   SplitCard — alternating text / visual rows. See SplitCard.tsx.
   ============================================================ */

.split-card {
  background:    var(--card);
  border-radius: var(--radius-lg);
  padding:       0.5rem 0;
  width:         100%;
  box-sizing:    border-box;
  overflow:      hidden;
}


/* ---- Row: text(1fr) | visual(2fr); reverse → 2fr | 1fr ---- */

.split-card__row {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  align-items:           stretch;
}

.split-card__row--reverse {
  grid-template-columns: 2fr 1fr;
}
.split-card__row--reverse .split-card__text   { grid-column: 2; grid-row: 1; }
.split-card__row--reverse .split-card__visual { grid-column: 1; grid-row: 1; }


/* ---- Text column ------------------------------------------ */

.split-card__text {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;   /* don't stretch children — buttons keep natural width */
  gap:             2.25rem;      /* 36px */
  padding:         2rem 2rem 2rem 4rem;
  min-width:       0;
  box-sizing:      border-box;
}
.split-card__row--reverse .split-card__text {
  padding: 2rem 4rem 2rem 2rem;
}

/* Step indicator: number circle + muted label */
.split-card__step {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.split-card__step-label {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
  white-space: nowrap;
}

.split-card__copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);   /* 12px */
}
.split-card__title {
  margin:      0;
  font-size:   var(--font-size-2xl);     /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-2xl);   /* 32px */
  color:       var(--foreground);
}
.split-card__body {
  margin:      0;
  font-size:   var(--font-size-xl);      /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);    /* 28px */
  color:       var(--foreground);
}


/* ---- Visual column + frame -------------------------------- */

.split-card__visual {
  padding:    0.5rem 1rem;
  min-height: 800px;
  min-width:  0;
  box-sizing: border-box;
}
.split-card__visual-frame {
  height:        100%;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  border-radius: 12px;
  overflow:      hidden;
  box-sizing:    border-box;
}
/* The frame defines the visual's box — the visual fills it. Block visuals
   (grids, tables, placeholders) that want to center shorter content wrap it
   in their own flex container. */
.split-card__visual-frame > * {
  height:     100%;
  box-sizing: border-box;
}
/* An image visual also covers the frame by default. */
.split-card__visual-frame > img {
  display:    block;
  width:      100%;
  object-fit: cover;
}


/* ---- Footer (e.g. bottom CTA) ----------------------------- */

.split-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4rem;
}


/* ============================================================
   Tablet (≤991px) — stack: visual above text
   ============================================================ */

@media (max-width: 991px) {
  .split-card__row,
  .split-card__row--reverse {
    grid-template-columns: 1fr;
  }

  .split-card__visual { order: 1; }
  .split-card__text   { order: 2; }

  .split-card__row--reverse .split-card__text,
  .split-card__row--reverse .split-card__visual { grid-column: unset; grid-row: unset; }

  .split-card__text {
    padding: 1.5rem 2rem 3rem;
  }

  .split-card__visual {
    min-height: 400px;
  }

  .split-card__footer {
    padding: 2rem;
  }
}


/* ============================================================
   Mobile (≤767px) — smaller heading/body; visual sizes to content
   ============================================================ */

@media (max-width: 767px) {
  .split-card__title {
    font-size:   var(--font-size-xl);   /* 20px */
    line-height: var(--line-height-xl); /* 28px */
  }
  .split-card__body {
    font-size:   var(--font-size-lg);   /* 18px */
    line-height: var(--line-height-lg); /* 28px */
  }
  .split-card__visual {
    min-height: auto;   /* the visual content provides its own mobile height */
  }
}

/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }