/* ============================================================
   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;
  }
}


/* ============================================================
   LegalHubPracticeAreasSection — Figma Z4nd44TYu5d8ttn7Y73Djs, node 865:6590.
   Spec: LegalHubPracticeAreasSection.figma.md.
   ============================================================ */

.legal-hub-practice-areas {
  background: var(--background);
}

.legal-hub-practice-areas__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px */
  width:          100%;
}

/* Figma: nav bar, 16px, then the card — both inside the wide container. */
.legal-hub-practice-areas__panel {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);   /* 16px */
  width:          100%;
}


/* ============================================================
   Nav bar (865:6599) — a white pill holding a label + the tabs
   ============================================================ */

.legal-hub-practice-areas__nav {
  display:       inline-flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--spacing-4);   /* 16px */
  align-self:    flex-start;
  padding:       var(--spacing-1-5) var(--spacing-1-5) var(--spacing-1-5) var(--spacing-5);
  background:    var(--card);
  border-radius: 32px;
  box-shadow:    0 6px 9px rgb(40 40 37 / 0.1), 0 0 3px rgb(40 40 37 / 0.06);
  box-sizing:    border-box;
}

.legal-hub-practice-areas__nav-label {
  margin:      0;
  font-size:   var(--font-size-sm);     /* 14px */
  line-height: var(--line-height-sm);   /* 20px */
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

/* Figma nests TWO surfaces here, and an earlier pass collapsed them into one:
   a white outer bar (`__nav`) holding a cream inner track, with the active tab
   a WHITE pill on that track. Sampling the 1:1 render proves it — a vertical
   slice through the bar reads white at y364-369, cream #F5F0E7 from y370-406,
   white again to y414, and the active pill is #FFF where the track is cream.
   Dropping the track inverted the whole control: our bar went white end to end
   and the active pill came through as the primitive's cream `--background`.

   The track is `--background`, not the primitive's default `--muted` (#E5DFD5) —
   that one really would be too dark against the white bar.

   Scoped under `__nav` for specificity: a bare `.legal-hub-practice-areas__tabs`
   ties with `.seg-tabs` and loses on stylesheet order. */
.legal-hub-practice-areas__nav .seg-tabs {
  background: var(--background);
  padding:    0;
}

.legal-hub-practice-areas__nav .seg-tabs--active .seg-tabs__tab.is-active,
.legal-hub-practice-areas__nav .seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
}

/* ---- Tabs above 1024, the shared Dropdown below ----
   Measured: the bar's six labels need 920px (141 label + 16 + 737 tabs + 26
   padding) and the panel is `min(1384, vw - 96)`, so the last width that holds
   them on one row is 1024 (928px of panel, 8px to spare). Below that the row
   used to wrap to two lines, and under 768 it overflowed the panel outright.
   Re-derive this number if the practice-area labels change. */
/* Doubled class throughout: Dropdown.css is imported after this file, so a bare
   `.legal-hub-practice-areas__nav-drop` ties with `.pill-drop` and loses on
   order — the same trap this file already documents for `.seg-tabs`. */
.legal-hub-practice-areas__nav-drop.pill-drop {
  display: none;
}

@media (max-width: 1023px) {
  .legal-hub-practice-areas__nav .seg-tabs {
    display: none;
  }

  .legal-hub-practice-areas__nav-drop.pill-drop {
    display: block;
  }
}


/* ============================================================
   Card (865:6612) — media 922.67 | copy 461.33 inside 1384 = exactly 2:1
   ============================================================ */

.legal-hub-practice-areas__card {
  display:               grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items:           stretch;
  width:                 100%;
  background:            var(--card);
  border-radius:         var(--radius-lg);   /* 24px */
  overflow:              hidden;
  box-sizing:            border-box;
}

/* Figma insets the wash 16px from the card's left/top/bottom but leaves 32px
   before the copy column (874.67 wide inside a 922.67 column). That asymmetry
   is what makes the card exactly 800px tall and puts 56px of air between the
   blue panel and the copy — filling the column instead inflates the card by
   16px and drags the vertically-centred copy down with it. */
.legal-hub-practice-areas__media {
  padding:   1rem 2rem 1rem 1rem;
  min-width: 0;
}

.legal-hub-practice-areas__wash {
  /* Same grained wash as the flow diagram's Bg — one sheet over the whole
     illustration, card included, the way Figma's last-child noise layer works.
     0.27 rather than the utility's 0.45 default, matching the flow diagram:
     these washes are pale blue, and the sheet also crosses the chat card. */
  --noise-opacity: 0.27;

  display:         flex;
  align-items:     center;
  justify-content: center;
  /* Figma's img is 874.67x768 — held as a ratio so the panel scales rather
     than hard-coding a height that breaks the moment the column narrows.
     `height: 100%` alongside it makes the ratio a FLOOR, not a cap: it sets the
     row's minimum while the column is the taller side, and the panel stretches
     to the row once the copy column is. Without it the copy drove the card to
     797px at a 1200px viewport while the blue stayed 604 — 161px of white under
     the illustration. */
  aspect-ratio:    875 / 768;
  /* Both explicit, and both needed. `height: 100%` alone lets the ratio compute
     the WIDTH from that height, which overflowed the column by 127px at 1200px
     and spilled blue over the copy; `width: 100%` pins it. With both definite
     the ratio no longer sizes the box — it only survives where it matters, in
     the intrinsic contribution that sets the row's minimum height. */
  width:           100%;
  height:          100%;
  padding:         var(--spacing-8);
  background:      linear-gradient(160deg,
                     var(--color-brand-blue-200) 0%,
                     var(--color-brand-blue-100) 50%,
                     var(--color-brand-blue-200) 100%);
  border-radius:   var(--radius-md);
  box-sizing:      border-box;
}


/* ---- Sample-exchange card (865:6615) — 493x601, 24px 28px padding ---- */

.legal-hub-practice-areas__chat-card {
  display:        flex;
  flex-direction: column;
  /* Figma drops the thread 42px below the head — measured head bottom 573 →
     first bubble top 615. No spacing token reaches past 36px. */
  gap:            2.625rem;   /* 42px */
  width:          100%;
  max-width:      493px;
  padding:        var(--spacing-6) var(--spacing-7);   /* 24px 28px */
  /* #EDE8DF is off the palette — it sits exactly between `--background`
     (#F5F0E7) and `--muted` (#E5DFD5), 8 levels from each — so it is a scoped
     raw value. What matters is the relationship the frame draws: the card is a
     step below the `--secondary` bubbles and badge sitting on it. */
  background:     #EDE8DF;
  border-radius:  2rem;   /* 32px — measured off the frame's corner arc */
  box-sizing:     border-box;

  /* The card stays UNDER the wash's grain sheet — `.noise-grain` paints an
     ::after over its own children, and the whole illustration is meant to carry
     that texture. Only the type is lifted out of it; see "Grain, and what sits
     above it" below. Note the fill therefore renders a few levels dark of the
     #EDE8DF it is set to, which is the same thing that happens to every other
     surface under this sheet. */
}


/* ---- Grain, and what sits above it ----------------------------------------
   The wash's sheet covers everything inside it, fills and words alike, which
   left the type looking muddy. Every text run in the card is lifted above the
   sheet with `z-index: 1` (the sheet's own ::after is `z-index: auto`, and
   nothing between here and the wash opens a stacking context, so 1 is enough).

   The fills — card, bubbles, badge pill, progress rail — stay under it. That is
   why the badge label and the bubble copy are wrapped in their own spans: each
   shares a box with a fill that must stay grained. */

.legal-hub-practice-areas__chat-title,
.legal-hub-practice-areas__chat-badge-icon,
.legal-hub-practice-areas__chat-badge-label,
.legal-hub-practice-areas__bubble-text,
.legal-hub-practice-areas__progress-labels {
  position: relative;
  z-index:  1;
}

.legal-hub-practice-areas__chat-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-3);
}

.legal-hub-practice-areas__chat-title {
  margin:      0;
  font-size:   var(--font-size-xl);     /* 20px */
  line-height: var(--line-height-xl);   /* 28px */
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

.legal-hub-practice-areas__chat-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--spacing-2);
  padding:       var(--spacing-2) var(--spacing-4);   /* 8px 16px */
  background:    var(--secondary);   /* #FAF6F0 — not `--card`'s white */
  border-radius: var(--radius-full);
  /* 14/20 with a 20px glyph — the badge is a step up from the chip scale used
     in the copy column, which makes it 36x152 (Figma 584→735 x 536→571). */
  font-size:     var(--font-size-sm);     /* 14px */
  line-height:   var(--line-height-sm);   /* 20px */
  font-weight:   var(--font-weight-medium);
  color:         var(--muted-foreground);
  white-space:   nowrap;
}

.legal-hub-practice-areas__chat-badge-icon {
  display: inline-flex;
  color:   var(--muted-foreground);
}

.legal-hub-practice-areas__chat-badge-icon svg {
  width:  20px;
  height: 20px;
}

.legal-hub-practice-areas__chat {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-8);   /* 32px — bubbles → progress */
}

.legal-hub-practice-areas__bubbles {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);   /* 16px */
}

/* Figma: one-line bubble 52px tall, two-line 72 → 16px vertical padding and a
   20px line; the caller's widest turn measures 359 inside a 437 thread, so 85%
   is the cap that keeps it on one line. */
.legal-hub-practice-areas__bubble {
  max-width:     85%;
  margin:        0;
  padding:       var(--spacing-4) var(--spacing-5);   /* 16px 20px */
  /* Figma 865:6652 rounds three corners and squares the fourth — the one that
     points back at whoever is speaking (set per side below). 12px is off the
     radius scale (`--radius-sm` 8 / `--radius-md` 16), so it stays a scoped raw
     value rather than becoming a global token; measured off the 1:1 frame, the
     corner arc fits r=12 and neither 8 nor 16. */
  border-radius: 12px;
  font-size:     var(--font-size-sm);     /* 14px */
  line-height:   var(--line-height-sm);   /* 20px */
  font-weight:   var(--font-weight-regular);
  /* Both speakers are written in blue ink, not `--foreground` — sampled off the
     1:1 frame, the two turns land on `--color-brand-blue-700` (#186581) and
     `--color-brand-blue-800` (#0F4457) exactly. Set per speaker below. */
}

/* Smith.ai's side is the blue one and hangs right; the caller's is neutral.
   Figma caps the agent's turns tighter than the caller's — all three measure
   ~321 of the 437 thread (73.5%), which is what wraps the opening turn after
   "doctor". Deliberately narrower than the shared 85% above. */
.legal-hub-practice-areas__bubble[data-from="agent"] {
  align-self:                 flex-end;
  max-width:                  73.5%;
  background:                 var(--color-brand-blue-200);
  color:                      var(--color-brand-blue-700);   /* #186581 */
  border-bottom-right-radius: 0;
}

/* Only Smith.ai's side is written in blue ink; the caller's is the neutral
   `--muted-foreground`. (The frame renders this turn in #0F4457, but the
   owner's call is `--muted-foreground` — see watch-items.) */
.legal-hub-practice-areas__bubble[data-from="caller"] {
  align-self:                flex-start;
  background:                var(--secondary);   /* #FAF6F0 — not white */
  color:                     var(--muted-foreground);
  border-bottom-left-radius: 0;
}

.legal-hub-practice-areas__progress {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-2);
  padding-top:    var(--spacing-7);   /* 28px — Figma rule 1030 → track 1058 */
  border-top:     0.75px solid var(--opacity-neutral-20);
}

/* Figma draws a 12px rail, not the 6px this was built at — the dots ride
   inside it rather than straddling it. */
.legal-hub-practice-areas__progress-track {
  position:      relative;
  display:       block;
  height:        12px;
  border-radius: var(--radius-full);
  background:    var(--secondary);   /* same #FAF6F0 as the bubbles */
}

/* Figma fills 299→671 of a 299→735 track = 85%, i.e. just past the Convert dot's
   approach rather than the midpoint. */
.legal-hub-practice-areas__progress-fill {
  position:      absolute;
  inset:         0 15% 0 0;
  border-radius: inherit;
  /* #59B7D9 — sampled exactly off the frame. `-300` (#7ECBE7) was a shade too
     pale, which is what made the rail read as washed out. */
  background:    var(--color-brand-blue-400);
}

/* 8px of solid white inside the rail, with a 2px shoulder of blue showing at
   each end. No ring: the outline this used to carry is what made the dots look
   like knobs sitting on top of the track instead of stops punched into it. */
.legal-hub-practice-areas__progress-dot {
  position:      absolute;
  top:           50%;
  width:         8px;
  height:        8px;
  margin-top:    -4px;
  border-radius: var(--radius-full);
  background:    var(--card);
}

.legal-hub-practice-areas__progress-dot[data-at="start"] { left: 2px; }
.legal-hub-practice-areas__progress-dot[data-at="mid"]   { left: calc(50% - 4px); }

/* The last stop is not reached yet: it sits on the unfilled rail, is 10px
   rather than 8, and is filled `--muted` (#E5DFD5) instead of white. */
.legal-hub-practice-areas__progress-dot[data-at="end"] {
  right:      2px;
  width:      10px;
  height:     10px;
  margin-top: -5px;
  background: var(--muted);
}

.legal-hub-practice-areas__progress-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--font-size-xs);     /* 12px */
  line-height:     var(--line-height-xs);   /* 16px */
  color:           var(--muted-foreground);
}


/* ============================================================
   Copy column (865:6690)
   ============================================================ */

.legal-hub-practice-areas__copy {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  min-width:       0;
  padding:         var(--spacing-6) 3.5rem var(--spacing-6) var(--spacing-6);   /* Figma pl 24 / pr 56 */
  box-sizing:      border-box;
}

.legal-hub-practice-areas__copy-inner {
  display:        flex;
  flex-direction: column;
  /* Figma's block rhythm is 34, not the 32 the token scale offers: rule→Qualify
     35, Qualify→Capture 35, Capture→Convert 34 (box edges, not ink). */
  gap:            2.125rem;   /* 34px */
  align-items:    flex-start;
}

.legal-hub-practice-areas__area-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-1-5);   /* 6px */
  width:          100%;
}

.legal-hub-practice-areas__area-title {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-3);   /* 12px */
}

.legal-hub-practice-areas__area-icon {
  display: inline-flex;
  color:   var(--foreground);
}

.legal-hub-practice-areas__area-name,
.legal-hub-practice-areas__area-tagline {
  margin:      0;
  font-size:   var(--font-size-lg);     /* 18px */
  line-height: var(--line-height-lg);   /* 28px */
}

.legal-hub-practice-areas__area-name    { font-weight: var(--font-weight-bold); color: var(--foreground); }
.legal-hub-practice-areas__area-tagline { font-weight: var(--font-weight-regular); color: var(--muted-foreground); }

.legal-hub-practice-areas__rule {
  width:      100%;
  height:     0;
  /* 18px here + the head's own 6px gap = Figma's 24 under the tagline box. */
  margin:     1.125rem 0 0;
  border:     0;
  border-top: 0.75px solid var(--opacity-neutral-20);
}

.legal-hub-practice-areas__group {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);   /* 16px — Qualify / Convert */
  width:          100%;
}

/* Figma tightens the chip group's label→content gap to 8px. */
.legal-hub-practice-areas__group[data-group="capture"],
.legal-hub-practice-areas__group[data-group="convert"] {
  gap: var(--spacing-2);
}

.legal-hub-practice-areas__group-label {
  margin:      0;
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

.legal-hub-practice-areas__list {
  display:        flex;
  flex-direction: column;
  /* 16px + the 26px marker = Figma's 42px item pitch, in both lists (measured
     off the assembled column `865:6690`: markers at y=234/276/318 and
     538/580). It was 18px against a 24px-tall marker for the same 42; the
     marker is now a true 26px circle, so the gap gives back the 2. */
  gap:            1rem;   /* 16px */
  margin:         0;
  padding:        0;
  list-style:     none;
}

.legal-hub-practice-areas__list-item {
  display:     flex;
  gap:         var(--spacing-3);   /* 12px */
  align-items: flex-start;
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  color:       var(--foreground);
}

/* A 26px circle, measured off `865:8299`. It was `min-width` + horizontal
   padding, which made a pill wherever the glyph was wider than it was tall —
   the numbered Qualify steps as well as the Convert checks. */
.legal-hub-practice-areas__marker {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           26px;
  height:          26px;
  padding:         0;
  background:      var(--popover);
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);     /* 12px */
  line-height:     var(--line-height-xs);   /* 16px */
  font-weight:     var(--font-weight-medium);
  color:           var(--muted-foreground);
}

.legal-hub-practice-areas__chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--spacing-2);   /* 8px */
  margin:     0;
  padding:    0;
  list-style: none;
}

.legal-hub-practice-areas__chip {
  padding:       var(--spacing-1-5) var(--spacing-3);   /* 6px 12px */
  background:    var(--background);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);     /* 12px */
  line-height:   var(--line-height-xs);   /* 16px */
  font-weight:   var(--font-weight-medium);
  color:         var(--muted-foreground);
}

/* Figma leaves 82px between the last Convert item and the button where every
   other block is separated by ~34 — so 48 on top of the stack's own gap. It
   reads as a bottom-anchored button, but the column is genuinely centred
   (653 of content in a 752 padding-box, 48/48 either side), so an explicit
   margin is what reproduces it; `margin-top: auto` would need the inner stack
   stretched and would then top-align everything above it. Re-derive this
   against `__copy-inner`'s gap if that ever moves: the pair must total 82. */
.legal-hub-practice-areas__cta {
  margin-top: 3rem;   /* 48px */
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1199px) {
  /* Below this the copy column can no longer hold the chip rows on one line
     each, and the 2:1 split starves it. Stack instead. */
  .legal-hub-practice-areas__card {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, there is no copy column to clear — the wash goes back to an even
     16px inset. */
  .legal-hub-practice-areas__media {
    padding: 1rem;
  }

  /* Figma's 875/768 is a framing ratio for the desktop two-column card. Stacked
     it only adds height — 780x685 of blue around a 493x607 chat card at 900px —
     so the ratio goes and the panel takes the height of the card it holds. It
     keeps the full width of the column, as it does on mobile. */
  .legal-hub-practice-areas__wash {
    aspect-ratio: auto;
    height:       auto;
  }

  .legal-hub-practice-areas__copy {
    padding: var(--spacing-6);
  }

  /* The column is no longer centred against a tall media panel, so the CTA's
     Figma-only 50px lead-in just leaves a hole. */
  .legal-hub-practice-areas__cta {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .legal-hub-practice-areas__nav {
    width:          100%;
    flex-direction: column;
    align-items:    flex-start;
    padding:        var(--spacing-4);
    border-radius:  var(--radius-md);
  }

  /* The tab row is already a dropdown at this width (see the 1023 query
     above); it just needs to fill the stacked bar. */
  .legal-hub-practice-areas__nav-drop.pill-drop {
    width: 100%;
  }

  .legal-hub-practice-areas__wash {
    aspect-ratio: auto;
    padding:      var(--spacing-4);
  }

  .legal-hub-practice-areas__chat-card {
    gap:           var(--spacing-5);   /* 42px is desktop breathing room it can't afford here */
    padding:       var(--spacing-4);
    /* 32px is drawn against a 493px card; at phone width it reads as a blob. */
    border-radius: 1rem;   /* 16px */
  }

  .legal-hub-practice-areas__bubble {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .legal-hub-practice-areas__progress {
    padding-top: var(--spacing-4);
  }

  .legal-hub-practice-areas__chat-head {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--spacing-2);
  }

  /* The desktop caps are read off a 437px-wide thread; at this width they leave
     the turns hanging in a column too narrow to read. The agent override needs
     repeating — its attribute selector outranks the class rule above. */
  .legal-hub-practice-areas__bubble,
  .legal-hub-practice-areas__bubble[data-from="agent"] {
    max-width: 95%;
  }
}

/* ============================================================
   Tabs — Segmented pill tab bar
   Design tokens from src/styles/tokens.css.
   ============================================================ */

.seg-tabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        40px;
  background:    var(--muted);
  border-radius: var(--radius-full);
  column-gap:    1px;
}

/* Individual tab — button or anchor */
.seg-tabs__tab {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-1-5);
  height:          100%;
  padding:         var(--spacing-2) var(--spacing-4); /* 8px 16px */
  border:          1px solid transparent; /* size-stable when active border appears */
  border-radius:   var(--radius-full);
  background:      transparent;
  color:           var(--foreground);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  cursor:          pointer;
  text-decoration: none;  /* reset <a> default */
  white-space:     nowrap;
  transition:      background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.seg-tabs__tab:hover {
  background: var(--opacity-background-50);
}

.seg-tabs__tab:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Active tab — only visible in playing state (.seg-tabs--active) */
.seg-tabs--active .seg-tabs__tab.is-active {
  background: var(--background);
  border:     1px solid var(--border);
}

.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--background);
}

/* Icon slot */
.seg-tabs__tab-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.seg-tabs__tab-icon svg {
  display: block;
  width:   1rem;
  height:  1rem;
}

/* Trailing badge slot — e.g. a small discount pill after the label.
   Color/background is supplied by the consumer; this only handles layout. */
.seg-tabs__tab-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}


/* ============================================================
   Compact size — content-sized segmented control
   ============================================================ */

.seg-tabs--compact {
  height:  auto;
  padding: var(--spacing-px);
}

.seg-tabs--compact .seg-tabs__tab {
  height:  auto;
  padding: var(--spacing-1-5) var(--spacing-5);
}


/* ============================================================
   Light scheme — warm secondary track, card active pill
   Matches the light DemoPlayer variant.
   ============================================================ */

.seg-tabs--light {
  background: var(--secondary);
}

.seg-tabs--light .seg-tabs__tab:hover {
  background: var(--popover);
}

.seg-tabs--light.seg-tabs--active .seg-tabs__tab.is-active,
.seg-tabs--light.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
}


/* ============================================================
   Light-alt scheme — muted track, background active pill + shadow
   Used in the Demo section on the accent background.
   ============================================================ */

.seg-tabs--light-alt {
  background: var(--muted);
}

.seg-tabs--light-alt .seg-tabs__tab {
  font-weight: var(--font-weight-medium);
}

.seg-tabs--light-alt .seg-tabs__tab:hover {
  background: var(--opacity-background-50);
}


/* ============================================================
   Card scheme — muted track, card active pill
   Matches Figma "Advance Tabs" (node 4374:9779) — e.g. the AIR
   pricing-page switch (AI-first / Human-first).
   ============================================================ */

.seg-tabs--card {
  background: var(--muted);
}

.seg-tabs--card .seg-tabs__tab:hover {
  background: var(--accent);
}

.seg-tabs--card.seg-tabs--active .seg-tabs__tab.is-active {
  background: var(--card);
  border:     1px solid var(--input);
  box-shadow:
    0 1px 3px rgba(26, 26, 24, 0.05),
    0 1px 2px -1px rgba(26, 26, 24, 0.05);
  font-weight: var(--font-weight-regular);
}

.seg-tabs--card.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
  box-shadow:
    0 2px 6px rgba(26, 26, 24, 0.08),
    0 1px 2px -1px rgba(26, 26, 24, 0.08);
}


/* ============================================================
   Card-alt scheme — same card active-pill treatment as "card",
   but on a `--background` track instead of `--muted`. Used for
   controls that sit on a white/near-white card (e.g. the plan
   card's call-volume selector) where the muted track would read
   too dark against the surrounding chrome.
   ============================================================ */

.seg-tabs--card-alt {
  background: var(--background);
}

.seg-tabs--card-alt .seg-tabs__tab:hover {
  background: var(--muted);
}

.seg-tabs--card-alt.seg-tabs--active .seg-tabs__tab.is-active {
  background: var(--card);
  border:     1px solid var(--input);
  box-shadow:
    0 1px 3px rgba(26, 26, 24, 0.05),
    0 1px 2px -1px rgba(26, 26, 24, 0.05);
  font-weight: var(--font-weight-regular);
}

.seg-tabs--card-alt.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
  box-shadow:
    0 2px 6px rgba(26, 26, 24, 0.08),
    0 1px 2px -1px rgba(26, 26, 24, 0.08);
}

/* ============================================================
   Dropdown — Pill dropdown with floating menu
   Design tokens from src/styles/tokens.css.
   ============================================================ */

.pill-drop {
  position:      relative;
  display:       block;
  background:    transparent;
  border-radius: var(--radius-full);
}

/* ---- Trigger button ---- */

.pill-drop__trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-1-5); /* 6px */
  width:           100%;
  height:          40px;
  padding:         var(--spacing-2) var(--spacing-4);
  background:      var(--background);
  border:          1px solid var(--border);
  border-radius:   var(--radius-full);
  cursor:          pointer;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px — same as seg-tabs__tab */
  font-weight:     var(--font-weight-medium);
  line-height:     1rem;
  color:           var(--foreground);
  white-space:     nowrap;
  transition:      background 0.2s;
}

.pill-drop__trigger:hover {
  background: var(--accent);
}

/* ---- Chevron ---- */

.pill-drop__chevron {
  flex-shrink: 0;
  color:       var(--muted-foreground);
  transition:  transform 0.2s ease;
}

.pill-drop__chevron.is-open {
  transform: rotate(180deg);
}

/* ---- Backdrop (click-away layer) ---- */
/* position:fixed covers the full viewport and is never clipped by overflow:hidden
   on a parent. Clicking it fires a React synthetic onClick that closes the dropdown
   reliably (unlike document.mousedown which fires before li onClick and can close
   the dropdown before onSelect is called — especially in Webflow's shadow-DOM /
   event-retargeting environment). */

.pill-drop__backdrop {
  position: fixed;
  inset:    0;
  z-index:  199; /* below .pill-drop__menu so items remain clickable */
}

/* ---- Floating menu ---- */

.pill-drop__menu {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       200;
  list-style:    none;
  margin:        0;
  padding:       var(--spacing-1); /* 4px all sides */
  background:    var(--inv-popover);
  border:        1px solid rgba(128, 128, 128, 0.15);
  border-radius: var(--radius-sm);  /* 8px */
  min-width:     max(160px, 100%);
  box-shadow:    0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Portrait mobile — left-align menu to trigger */
@media (max-width: 479px) {
  .pill-drop__menu {
    left:      0;
    transform: none;
  }
}

/* ---- Menu item ---- */

.pill-drop__item {
  padding:       6px var(--spacing-2); /* 6px vertical, 8px horizontal */
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);   /* 14px */
  line-height:   var(--line-height-sm);
  color:         var(--inv-popover-foreground);
  border-radius: 6px;
  cursor:        pointer;
  transition:    background 0.2s;
  white-space:   nowrap;
}

.pill-drop__item:hover {
  background: var(--opacity-inv-accent-50);
}

.pill-drop__item.is-selected {
  background: var(--inv-accent);
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}