/* ============================================================
   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:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Landscape mobile (≤767px): 2rem × 2 = 4rem */
@media (max-width: 767px) {
  .container {
    max-width: calc(100% - 4rem);
  }
}



/* ============================================================
   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(1360px + 96px);   /* 1360px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }

  .container-wide > * {
    margin-left:  -1rem;
    width:        calc(100% + 2rem) !important;
  }
}


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


/* ---- Sticky badge rail ------------------------------------
   Absolutely positioned inside the first .container, pushed
   left via right: 100%.  .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
   (1360px): (1360 − 1024) / 2 = 168px.
   Shown only at ≥1488px — when the gutter is a fixed, predictable size. */

.hp-rail {
  display:        none;
  position:       absolute;
  right:          100%;
  top:            0;
  bottom:         0;
  width:          calc((1360px - 1024px) / 2);   /* 168px */
  pointer-events: none;
}

.hp-rail__sticky {
  position:        sticky;
  top:             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: 1488px) {
  .hp-rail {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-start;
  }
}


/* ---- 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 1488px, hidden at and above
   (matches the rail breakpoint so there is never a gap where
   neither badge is shown) */
.hp-badge--inline {
  margin-bottom: var(--spacing-6);
}

@media (min-width: 1488px) {
  .hp-badge--inline {
    display: none;
  }
}

@media (max-width: 767px) {
  .hp-badge--inline {
    margin-bottom: 1rem;
  }
}

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


/* ---- Section heading --------------------------------------
   36px regular weight; <strong> 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 strong {
  font-weight: var(--font-weight-bold);
}


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

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

.hp-body strong {
  font-weight: var(--font-weight-bold);
}

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

  .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);
}

/* ============================================================
   WorkforceSection — Homepage "Built to last" section
   Shared section shell, rail, badge, heading → src/section.css
   ============================================================ */

.workforce-section { background-color: var(--background); }

@media (max-width: 767px) {
  .workforce-section { gap: 4rem; }
}


/* ============================================================
   Section header
   ============================================================ */

.workforce-section__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

.workforce-section__heading {
  max-width: 800px;
}


/* ============================================================
   Big white card
   ============================================================ */

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


/* ============================================================
   Slot — each row inside the card (no dividers)
   ============================================================ */

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

/* Partner slot: visual left (2fr), text right (1fr) */
.workforce-slot--partner {
  grid-template-columns: 2fr 1fr;
}
.workforce-slot--partner .workforce-text    { grid-column: 2; grid-row: 1; }
.workforce-slot--partner .workforce-visual  { grid-column: 1; grid-row: 1; }


/* ============================================================
   Text panel (1/3 width)
   ============================================================ */

.workforce-text {
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items: flex-start;
  gap:             2.25rem;
  padding:         2rem 2rem 2rem 4rem;
}

.workforce-slot--partner .workforce-text {
  padding: 2rem 4rem 2rem 2rem;   /* right-heavy: text is on the right side */
}

.workforce-text__copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);
}

.workforce-text__title {
  margin:      0;
  font-size:   1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 2rem;
  color:       var(--foreground);
}

.workforce-text__body {
  margin:      0;
  font-size:   1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.workforce-text__body strong { font-weight: var(--font-weight-bold); }


/* ============================================================
   Visual panel (2/3 width) — shared shell
   ============================================================ */

.workforce-visual {
  min-width:  0;
  padding:    0.5rem 1rem;
  box-sizing: border-box;
  min-height: 800px;
}

.workforce-visual > * {
  height:        100%;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  border-radius: var(--radius-md, 12px);
  overflow:      hidden;
  box-sizing:    border-box;
}

.workforce-visual--phases > * {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f333f1d87297c9f9f_Bg1.svg');
  background-size:     cover;
  background-position: center;
}

.workforce-visual--teams > * {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f2f8ec4852a3caea8_Bg2.svg');
  background-size:     cover;
  background-position: center;
}

.workforce-visual--table > * {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3fe9e7fc07e2201748_Bg3.svg');
  background-size:     cover;
  background-position: center;
}


/* ============================================================
   Row 1: Staggered phase cards
   ============================================================ */

.phases-grid {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             0;       /* connector rows provide the vertical spacing */
  padding:         4rem 0;
  height:          100%;
  box-sizing:      border-box;
}

/* Card rows and connector rows share the same 5-column grid */
.phases-grid__row {
  display:               grid;
  grid-template-columns: repeat(10, 1fr);
  column-gap:            0rem;   /* 16px — Figma gap-x-4 */
}

/* Connector rows sit between card rows; height = the original gap (64px) */
.phases-connector-row {
  display:               grid;
  grid-template-columns: repeat(10, 1fr);
  column-gap:            0rem;
  height:                4rem;   /* 64px */
  align-items: center;
}

/* Horizontal S-connector — tc2 rotated 90°: cols become rows, rows become cols */
.phase-connector {
  display:               grid;
  grid-template-columns: 24px 1fr 24px;
  grid-template-rows:    1fr 1px 1fr;
  width:                 100%;
  height:                100%;
  pointer-events:        none;
}

/* Connector 1→2: card 1 center (col 2) → card 2 center (col 3) */
.phase-connector--1 { grid-column: 4 / span 2; }

/* Connector 2→3: card 2 center (col 3) → card 3 center (col 4) */
.phase-connector--2 { grid-column: 6 / span 2; }

/* Entry arm: col 1 (24px), rows 1-2 — spans into the 1px spine row */
.pc-arm-entry {
  grid-column:               1;
  grid-row:                  1 / span 2;
  border-left:               1px solid rgba(40, 40, 37, 0.2);
  border-bottom:             1px solid rgba(40, 40, 37, 0.2);
  border-bottom-left-radius: 24px;
}

/* Spine: col 2 (1fr), middle row — 1px horizontal background */
.pc-spine {
  grid-column: 2;
  grid-row:    2;
  background:  rgba(40, 40, 37, 0.2);
}

/* Exit arm: col 3 (24px), rows 2-3 — spans from the 1px spine row */
.pc-arm-exit {
  grid-column:             3;
  grid-row:                2 / span 2;
  border-right:            1px solid rgba(40, 40, 37, 0.2);
  border-top:              1px solid rgba(40, 40, 37, 0.2);
  border-top-right-radius: 24px;
}

.phases-grid__row--1 .phases-grid__inner { grid-column: 1 / span 6; }
.phases-grid__row--2 .phases-grid__inner { grid-column: 3 / span 6; }
.phases-grid__row--3 .phases-grid__inner { grid-column: 5 / span 6; }

.phase-card {
  background:     var(--card);
  border:         0.5px solid rgba(40, 40, 37, 0.2);
  padding:        1.5rem 1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.phase-card--flush-left  { border-left:  none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.phase-card--center      { border-radius: var(--radius-lg); }
.phase-card--flush-right { border-right: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

.phase-card__header {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-3);
}

.phase-card__num {
  background: var(--accent);
}

.phase-card__title {
  font-size:   var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg, 1.75rem);
  color:       var(--foreground);
}

.phase-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);
}


/* ============================================================
   Row 2: Team cascade — 6-row × 18-col grid
   rows 3 & 4 are fixed at 57px; all other rows size to content
   card 1: rows 1-2, cols 5-10
   card 2: rows 2-5, cols 13-18
   card 3: rows 5-6, cols 1-6
   ============================================================ */

.teams-grid {
  display:               grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows:    auto auto 57px 57px auto auto;
  gap:                   0;
  height:                100%;
  box-sizing:            border-box;
  padding:               4rem;
}

.teams-grid__card {
  position: relative;
}

.teams-grid__card--1 {
  grid-row:    1 / span 2;
  grid-column: 5 / span 6;
  z-index:     3;
  align-self:  start;
}

.teams-grid__card--2 {
  grid-row:    2 / span 4;
  grid-column: 13 / span 6;
  z-index:     2;
  align-self:  start;
}

.teams-grid__card--3 {
  grid-row:    5 / span 2;
  grid-column: 1 / span 6;
  z-index:     1;
  align-self:  start;
}

.teams-connector {
  pointer-events: none;
}

/* L-shape: top border → left border, top-left corner */
.teams-connector--1 {
  grid-row:               2 / span 3;
  grid-column:            4;
  border-top:             1px solid rgba(40, 40, 37, 0.2);
  border-left:            1px solid rgba(40, 40, 37, 0.2);
  border-top-left-radius: 24px;
}

/* S-shape: 1fr | 1px | 1fr × 1fr | 1fr */
.teams-connector--2 {
  grid-row:              4 / span 2;
  grid-column:           7 / span 6;
  display:               grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows:    24px 1fr 24px;
}

/* Right arm + top-left corner: cols 2-3, top row (24px) — border-left sits on left edge of col 2 */
.tc2-arm-right {
  grid-column:            2 / span 2;
  grid-row:               1;
  border-top:             1px solid rgba(40, 40, 37, 0.2);
  border-left:            1px solid rgba(40, 40, 37, 0.2);
  border-top-left-radius: 24px;
}

/* Vertical: col 2 only, middle row — background bridges the 1px gap between arm borders */
.tc2-vert {
  grid-column: 2;
  grid-row:    2;
  background:  rgba(40, 40, 37, 0.2);
}

/* Left arm + bottom-right corner: cols 1-2, bottom row (24px) — border-right sits on right edge of col 2 */
.tc2-arm-left {
  grid-column:                1 / span 2;
  grid-row:                   3;
  border-bottom:              1px solid rgba(40, 40, 37, 0.2);
  border-right:               1px solid rgba(40, 40, 37, 0.2);
  border-bottom-right-radius: 24px;
}

/* Inverted S-shape (tc2 mirrored horizontally): top-left → bottom-right */
.teams-connector--3 {
  grid-row:              2 / span 2;
  grid-column:           11 / span 2;
  display:               grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows:    24px 1fr 24px;
}

/* Top-left arm: cols 1-2, top row — border-right sits on right edge of col 2 */
.tc3-arm-top {
  grid-column:             1 / span 2;
  grid-row:                1;
  border-top:              1px solid rgba(40, 40, 37, 0.2);
  border-right:            1px solid rgba(40, 40, 37, 0.2);
  border-top-right-radius: 24px;
}

/* Vertical: col 2, middle row */
.tc3-vert {
  grid-column: 2;
  grid-row:    2;
  background:  rgba(40, 40, 37, 0.2);
}

/* Bottom-right arm: cols 2-3, bottom row — border-left sits on left edge of col 2 */
.tc3-arm-bot {
  grid-column:                2 / span 2;
  grid-row:                   3;
  border-bottom:              1px solid rgba(40, 40, 37, 0.2);
  border-left:                1px solid rgba(40, 40, 37, 0.2);
  border-bottom-left-radius:  24px;
}

.team-card {
  background:     var(--card);
  border:         0.5px solid rgba(40, 40, 37, 0.2);
  border-radius:  var(--radius-lg);
  padding:        1.5rem 1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  text-align:     center;
}

.team-card__icon {
  display:     flex;
  align-items: center;
  color:       var(--foreground);
  flex-shrink: 0;
}

.team-card__title {
  margin:      0;
  font-size:   var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg, 1.75rem);
  color:       var(--foreground);
}

.team-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);
}


/* ============================================================
   Row 3: Comparison table
   ============================================================ */

.workforce-visual--table > .compare-table-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4rem;
}

/* Single flat grid — all cells are direct children so CSS grid
   enforces equal row heights across all three columns. */
.compare-table {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap:               var(--spacing-3);   /* 12px — Figma gap */
  background:            var(--card);
  border:                0.5px solid rgba(40, 40, 37, 0.2);
  border-radius:         var(--radius-xl, 24px);
  overflow:              hidden;
  padding:               var(--spacing-9) var(--spacing-3);
  width:                 100%;
}

/* Header cells */
.compare-table__col-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);
}

.compare-table__col-icon {
  display:     flex;
  align-items: center;
  padding:     0 1rem;     /* px-16px */
}

.compare-table__col-name {
  font-size:   var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg, 1.75rem);
  padding:     4px var(--spacing-3);
}

.compare-table__col-name--muted   { color: var(--muted-foreground); }
.compare-table__col-name--primary { color: var(--primary); }

/* Data cells — flex so content is vertically centered within shared row height */
.compare-table__label {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);
  padding:     0.25rem 0.75rem 0.25rem 1.25rem;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}

.compare-table__row-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--muted-foreground);
}

.compare-table__cell {
  display:     flex;
  align-items: center;
  padding:     0.25rem 1rem;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.compare-table__cell--stripe { background: var(--secondary); }

.compare-table__cell--traditional.compare-table__cell--stripe {
  border-radius: var(--radius-full) 0 0 var(--radius-full);   /* left pill cap */
}

.compare-table__cell--smith { color: var(--foreground); }

.compare-table__cell--smith.compare-table__cell--stripe {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;   /* right pill cap */
}

.compare-table__cell--traditional { color: var(--muted-foreground); }


/* ============================================================
   Smaller desktop (≤1280px) — reduce inner visual frame padding
   ============================================================ */

@media (max-width: 1280px) {
  .teams-grid {
    padding: 2rem;
  }

  .phases-grid {
    padding: 2rem 0;
  }

  .workforce-visual--table > .compare-table-wrap {
    padding: 2rem;
  }
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

/* Mobile tab switcher — hidden on desktop */
.workforce-visual--table .compare-table-tabs { display: none; }

/* Mobile-only connector — hidden on desktop */
.teams-connector--m { display: none; }


@media (max-width: 991px) {
  .workforce-slot,
  .workforce-slot--partner {
    grid-template-columns: 1fr;
  }

  /* All slots: visual above text */
  .workforce-visual { order: 1; }
  .workforce-text   { order: 2; }

  /* Partner: reset explicit column/row placements */
  .workforce-slot--partner .workforce-visual { grid-column: unset; grid-row: unset; }
  .workforce-slot--partner .workforce-text   { grid-column: unset; grid-row: unset; }

  .workforce-text {
    flex:    none;
    padding: 1.5rem 2rem 3rem;
  }

  .workforce-slot--partner .workforce-text {
    padding: 1.5rem 2rem 3rem;
  }

  .workforce-visual {
    flex:       none;
    min-height: 400px;
  }

  .phases-grid {
    padding: 2rem 0;
  }

  .phases-connector-row {
    height: 2rem;
  }

  .phase-connector {
    height: 2rem;
  }

  .teams-grid {
    padding-bottom: 2rem;
    padding-top:    2rem;
  }
}


/* ============================================================
   Mobile (≤767px) — simplified visuals, table tab switcher
   ============================================================ */

@media (max-width: 767px) {
  .workforce-text__title {
    font-size:   var(--font-size-xl);   /* 20px */
    line-height: var(--line-height-xl); /* 28px */
  }

  .workforce-text__body {
    font-size:   var(--font-size-lg);   /* 18px */
    line-height: var(--line-height-lg); /* 28px */
  }

  .phase-card__title {
    font-size:   var(--font-size-base); /* 16px */
    line-height: var(--line-height-base); /* 24px */
  }

  /* Phase visual: padding 48px top/bottom, 24px sides */
  .phases-grid {
    padding: 3rem 1.5rem;
  }

  /* Connector rows: straight vertical spine only — hide S-curve arms */
  .pc-arm-entry,
  .pc-arm-exit { display: none; }

  .phases-connector-row {
    height: 2rem;   /* 32px — matches Figma gap-8 between phase cards */
  }

  /* Full-width, centred flex so spine sits at horizontal midpoint */
  .phase-connector {
    grid-column:     1 / -1;
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .pc-spine {
    width:      1px;
    height:     100%;
    background: rgba(40, 40, 37, 0.2);
  }

  .phases-grid__row--1 .phases-grid__inner,
  .phases-grid__row--2 .phases-grid__inner,
  .phases-grid__row--3 .phases-grid__inner {
    grid-column: 1 / -1;
    max-width:   340px;
    margin:      0 auto;
    width:       100%;
  }

  /* All cards: restore full border (flush variants removed sides on desktop),
     0.5px weight and 12px radius to match Figma mobile spec */
  .phase-card,
  .phase-card--flush-left,
  .phase-card--flush-right,
  .phase-card--center {
    border:        0.5px solid rgba(40, 40, 37, 0.2);
    border-radius: 12px;
    padding:       1rem;
  }

  .phase-card__body { display: none; }

  /* Let visual height size to content on mobile */
  .workforce-visual { min-height: auto; }

  /* Teams: cascade layout — card-left / connector / card-right / connector / card-center */
  .teams-connector--1 { display: none; }

  /* Mobile-only 3-corner connector box — subgrid rows align with outer grid */
  .teams-connector--m {
    display:               grid;
    grid-column:           3 / 13;
    grid-row:              2 / 8;
    grid-template-rows:    subgrid;
    grid-template-columns: 1fr 1fr;
  }

  /* ── tcm-* elements: path = down → left → down → right ── */

  /* Entry vertical line: col 2, row 1 */
  .tcm-v1 {
    grid-column:  2;
    grid-row:     1;
    border-right: 1px solid rgba(40, 40, 37, 0.2);
  }

  /* Vertical approach to first corner: col 2, rows 2-3 — spans into junction so border aligns */
  .tcm-v2 {
    grid-column:   2;
    grid-row:      2 / span 2;
    border-right:  1px solid rgba(40, 40, 37, 0.2);
    margin-bottom: 24px;
  }

  /* First corner (down→left): 24×24 at bottom-right, spans rows 2-3 so bottom aligns with junction */
  .tcm-c1 {
    grid-column:                2;
    grid-row:                   2 / span 2;
    width:                      24px;
    height:                     24px;
    align-self:                 end;
    justify-self:               end;
    border-right:               1px solid rgba(40, 40, 37, 0.2);
    border-bottom:              1px solid rgba(40, 40, 37, 0.2);
    border-bottom-right-radius: 24px;
  }

  /* Horizontal line leftward: col 2, spans auto+junction rows 2-3 — border-bottom lands at junction bottom */
  .tcm-h1 {
    grid-column:   2;
    grid-row:      2 / span 2;
    border-bottom: 1px solid rgba(40, 40, 37, 0.2);
    margin-right:  24px;
  }

  /* Second corner (left→down): 24×24 at top-left of col 1, rows 3-4 — border-top meets junction bottom */
  .tcm-c2 {
    grid-column:            1;
    grid-row:               3 / span 2;
    width:                  24px;
    height:                 24px;
    align-self:             start;
    justify-self:           start;
    border-top:             1px solid rgba(40, 40, 37, 0.2);
    border-left:            1px solid rgba(40, 40, 37, 0.2);
    border-top-left-radius: 24px;
  }

  /* Horizontal exit from second corner: col 1, rows 3-4 — border-top meets junction bottom */
  .tcm-h2 {
    grid-column: 1;
    grid-row:    3 / span 2;
    border-top:  1px solid rgba(40, 40, 37, 0.2);
    margin-left: 24px;
  }

  /* Vertical line down: col 1, rows 4-6 — clears 24px for both corners */
  .tcm-vert {
    grid-column:   1;
    grid-row:      4 / 7;
    border-left:   1px solid rgba(40, 40, 37, 0.2);
    margin-top:    24px;
    margin-bottom: 24px;
  }

  /* Third corner (down→right): 24×24 at bottom-left of col 1, row 6 */
  .tcm-c3 {
    grid-column:               1;
    grid-row:                  6;
    width:                     24px;
    height:                    24px;
    align-self:                end;
    justify-self:              start;
    border-left:               1px solid rgba(40, 40, 37, 0.2);
    border-bottom:             1px solid rgba(40, 40, 37, 0.2);
    border-bottom-left-radius: 24px;
  }

  /* Horizontal exit rightward: cols 1-2, row 6 — starts 24px after left edge */
  .tcm-h3 {
    grid-column:   1 / 3;
    grid-row:      6;
    border-bottom: 1px solid rgba(40, 40, 37, 0.2);
    margin-left:   24px;
  }

  .teams-grid {
    grid-template-columns: repeat(36, 1fr);
    grid-template-rows:    auto 2rem auto 1px auto 2rem 1fr 1fr;
    padding:               1.5rem;
    gap:                   0;
  }

  /* Pills: stretch to fill column spans */
  .teams-grid__card--1 { grid-column: 1 / 25;       grid-row: 1;          align-self: start; justify-self: stretch; }
  .teams-grid__card--2 { grid-column: 19 / 37;      grid-row: 3 / span 3; align-self: start; justify-self: stretch; }
  .teams-grid__card--3 { grid-column: 6 / 32;       grid-row: 7 / span 2; align-self: start; justify-self: stretch; }

  /* team-card: fills wrapper width */
  .teams-grid__card--1 .team-card,
  .teams-grid__card--2 .team-card,
  .teams-grid__card--3 .team-card { width: 100%; }

  /* Allow titles to reflow to one line when space permits */
  .team-card__title br { display: none; }

  /* S-curve connectors */
  /* --2: top-right→bottom-left, row 6 — card 2 center → card 3 center */
  .teams-connector--2 { display: grid; grid-column: 19 / 28; grid-row: 6; }
  /* --3: horizontal S (card 1 top-left → card 2 bottom-right), row 2 */
  .teams-connector--3 {
    display:               grid;
    grid-column:           13 / 28;
    grid-row:              2;
    grid-template-columns: 24px 1fr 24px;
    grid-template-rows:    1fr 1px 1fr;
  }

  /* Entry arm: top-left corner — left + bottom borders, bottom-left radius */
  .teams-connector--3 .tc3-arm-top {
    grid-column:              1;
    grid-row:                 1 / span 2;
    border-top:               none;
    border-right:             none;
    border-top-right-radius:  0;
    border-left:              1px solid rgba(40, 40, 37, 0.2);
    border-bottom:            1px solid rgba(40, 40, 37, 0.2);
    border-bottom-left-radius: 24px;
  }

  /* Spine: horizontal — grid position unchanged */

  /* Exit arm: bottom-right corner — right + top borders, top-right radius */
  .teams-connector--3 .tc3-arm-bot {
    grid-column:               3;
    grid-row:                  2 / span 2;
    border-bottom:             none;
    border-left:               none;
    border-bottom-left-radius: 0;
    border-right:              1px solid rgba(40, 40, 37, 0.2);
    border-top:                1px solid rgba(40, 40, 37, 0.2);
    border-top-right-radius:   24px;
  }

  /* ── Connector --2: upside-down horizontal S (card 2 top-right → card 3 bottom-left) ── */
  .teams-connector--2 {
    grid-template-columns: 24px 1fr 24px;
    grid-template-rows:    1fr 1px 1fr;
  }

  /* Entry arm: top-right corner — right + bottom borders, bottom-right radius */
  .teams-connector--2 .tc2-arm-right {
    grid-column:                3;
    grid-row:                   1 / span 2;
    border-top:                 none;
    border-left:                none;
    border-top-left-radius:     0;
    border-right:               1px solid rgba(40, 40, 37, 0.2);
    border-bottom:              1px solid rgba(40, 40, 37, 0.2);
    border-bottom-right-radius: 24px;
  }

  /* Spine: horizontal — grid position unchanged from desktop */

  /* Exit arm: bottom-left corner — left + top borders, top-left radius */
  .teams-connector--2 .tc2-arm-left {
    grid-column:                1;
    grid-row:                   2 / span 2;
    border-bottom:              none;
    border-right:               none;
    border-bottom-right-radius: 0;
    border-left:                1px solid rgba(40, 40, 37, 0.2);
    border-top:                 1px solid rgba(40, 40, 37, 0.2);
    border-top-left-radius:     24px;
  }

  .team-card {
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    text-align:      left;
    gap:            0.75rem;
    padding:        1rem;
    border:         0.5px solid rgba(40, 40, 37, 0.2);
    border-radius:  12px;
  }

  .team-card__title {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .team-card__body  { display: none; }

  /* Compare table wrap: stack tab + table vertically */
  .workforce-visual--table > .compare-table-wrap {
    flex-direction:  column;
    align-items:     stretch;
    justify-content: flex-start;
    padding:         1.5rem;
    gap:             2rem;
  }

  /* Tab switcher: show + stretch to fill wrap width */
  .workforce-visual--table .compare-table-tabs {
    display:    flex;
    width:      100%;
    background: rgba(40, 40, 37, 0.1);
  }

  /* Equal-width tabs */
  .workforce-visual--table .compare-table-tabs .seg-tabs__tab { flex: 1; }

  /* Smith active: primary text color */
  .workforce-visual--table .compare-table-tabs .seg-tabs__tab:nth-child(2).is-active {
    color: var(--primary);
  }

  /* Hide column headers and label-col spacer — tab switcher replaces them */
  .compare-table__col-head,
  .compare-table__label-col { display: none; }

  /* Hide row icons; reset label padding */
  .compare-table__row-icon { display: none; }
  .compare-table__label    { padding: 0.25rem 0.75rem 0.25rem 0; }

  /* Table card: 2-col, adjust radius + padding for mobile */
  .compare-table {
    grid-template-columns: 1fr 1fr;
    border-radius:         12px;
    padding:               2.25rem 0.75rem 2.25rem 1rem;
  }

  /* Hide the inactive cells */
  [data-mobile-col="traditional"] .compare-table__cell--smith { display: none; }
  [data-mobile-col="smith"]       .compare-table__cell--traditional { display: none; }

  /* Both data columns use full foreground on mobile regardless of desktop muted override */
  .compare-table__cell--traditional,
  .compare-table__cell--smith { color: var(--foreground); }

  /* Fix stripe pill shapes for 2-col */
  [data-mobile-col="traditional"] .compare-table__cell--traditional.compare-table__cell--stripe,
  [data-mobile-col="smith"]       .compare-table__cell--smith.compare-table__cell--stripe {
    border-radius: var(--radius-full);
  }
}



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

  /* 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[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[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[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 */
}


/* ============================================================
   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"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

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


.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
   ============================================================ */

/* Hover — default (card, info, success, warning, destructive) */
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.88;
}

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"]: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%);
  color:            var(--card);
  opacity:          1;
}

/* Secondary hover — darker border + foreground text, no fill */
.btn[data-variant="secondary"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--muted-foreground);
  color:        var(--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 { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon,
.btn[data-size="md"] .btn__icon,
.btn[data-size="lg"] .btn__icon { height: 1rem;    width: 1rem;    } /* 16px */

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


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

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

.seg-tabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        38px;
  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-sizing: border-box;
}

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

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


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

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

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

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