/* Stats band — Figma 10100:8540 (1728×771): headline + three stat rows left, salon photo right. */
.stats { padding: clamp(56px, calc(100 / 1728 * 100vw), 100px) 0 0; }
.stats-inner {
  width: 100%; max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(32px, calc(262 / 1728 * 100vw), 262px);
}

/* Left: headline, then rows (Figma: headline has an empty 3rd line + 27px gap ≈ 73px to the rows). */
.stats-intro { flex: 0 1 600px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(40px, calc(73 / 1728 * 100vw), 73px); }
.stats-title { font-size: clamp(28px, calc(38.02 / 1728 * 100vw), 38.02px); line-height: normal; color: var(--text-primary); }
.stats-accent { display: block; color: var(--text-success); }
.stats-br { display: none; }
/* Subtitle under the headline (Figma 10121:1776): 22px Inter, 16px under the headline (13.3px on phones, Shane).
   On tablet it cancels the intro's gap to sit 16px under the headline. */
.stats-sub {
  max-width: 600px; margin-top: calc(16px - clamp(40px, calc(73 / 1728 * 100vw), 73px));
  font-size: clamp(17px, calc(22 / 1728 * 100vw), 22px); line-height: normal; color: var(--text-primary);
}

/* Rows separated by 1px lines, 48px gap either side. */
.stats-rows { width: 100%; max-width: 489.948px; list-style: none; display: flex; flex-direction: column; }
.stats-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.stats-row + .stats-row { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border-default); }
.stats-figure { flex: 0 1 286.323px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.stats-label { font-size: 17.944px; line-height: 24.674px; color: var(--text-secondary); }
.stats-value {
  height: 51.366px; font-size: 56.43px; line-height: normal; color: var(--text-primary); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.stats-value span { display: inline-block; }
.stats-pill {
  flex: none; display: inline-flex; align-items: center; gap: 4.368px; padding: 8px 12px; border-radius: 1000px;
  font-size: 17.944px; line-height: 24.674px; white-space: nowrap;
}
.stats-pill img { width: 20.257px; height: 20.257px; }
.stats-pill--growth { background: var(--bg-brand); color: var(--text-success); }
.stats-pill--receptionist { background: var(--cc-purple); color: #613492; }
.stats-note { /* source note under the stats (Shane: on desktop too). 24px under the last row, cancelling the intro's gap. */
  margin-top: calc(24px - clamp(40px, calc(73 / 1728 * 100vw), 73px));
  font-size: clamp(13px, calc(15 / 1728 * 100vw), 15px); line-height: normal; color: var(--text-secondary);
}
.stats-pill--manager { background: var(--cal-violet); color: #2e4ba0; }

/* Right: rounded photo, 578×671 at 1728. */
.stats-photo { flex: 0 1 578px; min-width: 0; aspect-ratio: 578 / 671; border-radius: 18px; overflow: hidden; }
.stats-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Desktop — Figma 10119:5710 (1728×903): 100px top/bottom; left column 6px left of the gutter (x=138); headline →
   subtitle 16px → rows 56px; rows 24px either side of each line, including a line under the last row; the source
   note 16px under that line (16px type); photo 606×703.
   The photo and the left column are always the same height (Shane): both stretch to the taller of the two, and the
   note is pinned to the bottom, so it sits flush with the photo's bottom edge at any width. */
@media (min-width: 1200px) {
  .stats { padding-bottom: clamp(56px, calc(100 / 1728 * 100vw), 100px); }
  .stats-inner { gap: clamp(32px, calc(234 / 1728 * 100vw), 234px); align-items: stretch; } /* 600 + 234 + 606 = 1440 */
  .stats-intro { gap: 0; margin-left: -6px; }
  .stats-title { margin-bottom: 16px; }
  .stats-sub { margin: 0 0 56px; font-size: 22px; }
  .stats-row + .stats-row { margin-top: 24px; padding-top: 24px; }
  .stats-rows { padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
  .stats-note { margin-top: auto; padding-top: 16px; font-size: 16px; }
  .stats-photo { flex-basis: 606px; aspect-ratio: 606 / 703; }
}

/* Tablet: both columns shrink; slightly smaller numbers and rows. */
@media (max-width: 1199px) {
  .stats-inner { gap: 40px; }
  .stats-intro { flex: 1 1 0; }
  .stats-photo { flex: 0 1 44%; }
  .stats-row + .stats-row { margin-top: 32px; padding-top: 32px; }
  .stats-figure { gap: 16px; }
  .stats-value { height: auto; font-size: 50px; }
}

/* Mobile — Figma 10108:3638 (402 wide): left-aligned headline, wide photo crop, then rows of
   label + number with the pill on the right, separated by lines. */
@media (max-width: 899px) {
  .stats { padding: 51px 0 28px; } /* +28px: stats → "Meet your new team" gap 56 → 84 (+50%, Shane) */
  .stats-inner { flex-direction: column; align-items: stretch; gap: 24px; max-width: calc(560px + 2 * var(--gutter)); }
  .stats-intro { display: contents; }
  .stats-title { order: 0; font-size: 27.58px; line-height: normal; }
  .stats-br { display: inline; }
  .stats-photo { order: 1; flex: none; width: 100%; aspect-ratio: 578 / 375; }
  .stats-rows { order: 2; max-width: none; }
  .stats-row + .stats-row { margin-top: 24px; padding-top: 24px; }
  .stats-figure { flex: 0 1 auto; gap: 24px; }
  .stats-label { font-size: 13.3px; line-height: 24.674px; }
  .stats-value { height: auto; font-size: 27.58px; } /* Shane: numbers 27.58px on phones */
  .stats-pill { font-size: 13.3px; }
  .stats-pill img { width: 18px; height: 18px; }
  /* Line under the last stat + source note, to separate the numbers from the next section (Figma 10108:3638) */
  .stats-rows { padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
  .stats-note { order: 3; margin-top: -8px; font-size: 11.08px; }
  .stats-sub { order: 0; max-width: none; margin-top: -8px; font-size: 13.3px; } /* 16px under the headline, phone body size (Shane) */
}