/* ============================================================================
   ASSESSMENT V2 — report_v2 design ported into the template sandbox.
   Sheet order: reset → fonts → palette → color schemes → base → components →
   sections → reveal → print → responsive.

   COLOR RULES (enforced by tests/assessment-v2-template.test.mjs):
   - Hex colors are forbidden. The palette stores bare RGB channel triplets so
     any token can take an alpha: rgb(var(--rgb-cyan) / 0.35).
   - Sections never hardcode their own colors. Each carries a `.color-scheme`
     class plus a modifier (--light / --grey / --dark / --navy) which sets
     --color-background and --color-foreground; everything inside derives from
     those two, so a section changes theme by swapping one class.
   ============================================================================ */

/* ---- reset — Jake Lazaroff's modern CSS reset ----------------------------
   https://jakelazaroff.com/words/my-modern-css-reset/ (verbatim, layered so
   every unlayered component rule below wins), plus a cross-browser fallback
   for margin-trim, which only Safari supports today. ---------------------- */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  :root {
    interpolate-size: allow-keywords;
  }

  body {
    line-height: 1.5;
  }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
  }

  :where(input, button, textarea, select) {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
  }

  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  :where(ol, ul) {
    list-style: none;
  }

  :not([class]) {
    &:where(h1, h2, h3, h4, h5, h6) {
      margin-block: 0.75em;
      margin-trim: block;
      line-height: 1.25;
      text-wrap: balance;
      letter-spacing: -0.05ch;
    }

    &:where(p, ol, ul) {
      margin-block: 1em;
      margin-trim: block;
    }

    &:where(ol, ul) {
      padding-inline-start: 1.5em;
      list-style: revert;
    }

    &:where(li) {
      margin-block: 0.5em;
      margin-trim: block;
    }
  }

  /* margin-trim fallback: trim leading/trailing block margins manually so
     gap-based layouts stay exact in browsers without margin-trim */
  :not([class]):where(h1, h2, h3, h4, h5, h6, p, ol, ul, li):where(:first-child) { margin-block: 0; }
  :not([class]):where(h1, h2, h3, h4, h5, h6, p, ol, ul, li):where(:last-child) { margin-block: 0; }
}

/* ---- fonts: PP Neue Montreal (deliberate licensed exception, see README) -- */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/ppneuemontreal-thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;  
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/ppneuemontreal-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/ppneuemontreal-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/ppneuemontreal-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- palette: bare RGB channels, never wrapped ---------------------------
   Stored as "R G B" so every consumer can add an alpha at the point of use.
   Nothing outside the color-scheme block below should reference these
   directly unless the color is genuinely scheme-independent (brand blues). */

:root {
  --rgb-white: 255 255 255;
  --rgb-black: 0 0 0;

  --rgb-ink: 23 37 48;           /* body text on light surfaces */
  --rgb-paper: 250 250 250;      /* off-white section fill */
  --rgb-surface: 247 247 247;    /* soft card fill on light */

  --rgb-navy-deep: 2 10 25;      /* hero / compare / CTA bookends */
  --rgb-navy: 15 22 34;          /* lineup + featured card */
  --rgb-navy-raised: 36 41 53;   /* timeline node fill */
  --rgb-navy-lift: 22 40 63;     /* render-frame gradient top */

  --rgb-cyan: 0 194 255;         /* brand accent line + gradient start */
  --rgb-blue: 14 81 182;         /* brand gradient end */
  --rgb-blue-deep: 13 89 187;    /* accent text on light surfaces */
  --rgb-blue-light: 99 167 255;  /* accent text on dark surfaces */
  --rgb-glow: 228 236 255;       /* hero halo */
  --rgb-whatsapp: 37 211 102;    /* WhatsApp brand green, fixed in every scheme */

  --grad-brand: linear-gradient(90deg, rgb(var(--rgb-cyan)) 0%, rgb(var(--rgb-blue)) 100%);

  --font-body: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --page-margin: 16px;
  --page-px: var(--page-margin);
  --header-h: 68px;          /* fixed topbar height, reserved by the hero */
  --report-max: 1420px;
  --animation-values: 0.25s ease;

  /* type scale — UI ramp */
  --text-2xs: 0.625rem;   /* 10 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-md:  1rem;       /* 16 — body */
  --text-btn: 0.9375rem;  /* 15 — button label */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.25rem;    /* 20 */

  /* display ramp — fluid between 375px and 1440px viewports */
  --text-h6: var(--text-xl);
  --text-h5: 1.6875rem;                                     /* 27 */
  --text-h4: clamp(1.75rem,  1.574rem + 0.75vw, 2.25rem);   /* 28 → 36 */
  --text-h3: clamp(2rem,     1.648rem + 1.50vw, 3rem);      /* 32 → 48 */
  --text-h2: clamp(2.125rem, 1.465rem + 2.82vw, 4rem);      /* 34 → 64 */
  --text-h1: clamp(2.5rem,   1.532rem + 4.13vw, 5.25rem);   /* 40 → 84 */

  --lh-none: 1;
  --lh-display: 1;
  --lh-tight: 1.2;
  --lh-body: 1.4;
  --ls-tight: -0.01em;
  --ls-caps-sm: 0.08em;
  --ls-caps: 0.18em;
  --ls-overline: 0.35em;
}

@media (min-width: 900px) {
  :root { --page-margin: 40px; }
}

/* ---- color schemes -------------------------------------------------------
   A scheme sets only two channel pairs. Hairlines, muted copy and every
   translucent surface derive from --color-foreground, so contrast stays
   correct on any background automatically. --------------------------------- */

.color-scheme {
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));

  --color-hairline: rgb(var(--color-foreground) / 0.12);
  --color-muted: rgb(var(--color-foreground) / 0.6);
}

/* default (also the page background before any section paints) */
:root,
.color-scheme--light {
  --color-background: var(--rgb-white);
  --color-foreground: var(--rgb-ink);
  --color-accent: var(--rgb-blue-deep);
  --color-surface: var(--rgb-surface);
}

.color-scheme--grey {
  --color-background: var(--rgb-paper);
  --color-foreground: var(--rgb-ink);
  --color-accent: var(--rgb-blue-deep);
  --color-surface: var(--rgb-white);
}

.color-scheme--dark {
  --color-background: var(--rgb-navy-deep);
  --color-foreground: var(--rgb-white);
  --color-accent: var(--rgb-blue-light);
  --color-surface: var(--rgb-navy);
}

.color-scheme--navy {
  --color-background: var(--rgb-navy);
  --color-foreground: var(--rgb-white);
  --color-accent: var(--rgb-blue-light);
  --color-surface: var(--rgb-navy-raised);
}

/* ---- base ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  cursor: pointer;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-values), color var(--animation-values);
}
a:visited { color: inherit; }

/* ---- shared helpers ------------------------------------------------------ */

.wrap {
  max-width: var(--report-max);
  margin-inline: auto;
  padding-inline: var(--page-px);
}

/* ---- typography ---------------------------------------------------------- */

:where(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block: 0;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.h1 { font-size: var(--text-h1); line-height: var(--lh-display); }
.h2 { font-size: var(--text-h2); line-height: var(--lh-display); }
.h3 { font-size: var(--text-h3); line-height: var(--lh-tight); }
.h4 { font-size: var(--text-h4); line-height: var(--lh-tight); }
.h5 { font-size: var(--text-h5); line-height: var(--lh-tight); }
.h6 { font-size: var(--text-h6); line-height: var(--lh-tight); }

.h2 .grad-line { display: block; }

:where(.eyebrow) + :where(.h1, .h2, .h3, .h4) { margin-top: 0.625rem; }
:where(.h1, .h2) + :where(p, .lead) { margin-top: 1rem; }
:where(.h3, .h4) + p { margin-top: 0.9375rem; }
:where(.h5, .h6) + p { margin-top: 0.625rem; }

.lead {
  font-size: var(--text-xl);
  line-height: var(--lh-body);
}

.eyebrow {
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.eyebrow--center { margin-inline: auto; }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* blue outline chip — accent follows the scheme, brand line stays constant */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.2px solid rgb(var(--rgb-cyan));
  background: rgb(var(--rgb-cyan) / 0.05);
  backdrop-filter: blur(2.4px);
  border-radius: 120px;
  padding: 8px 19px;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: rgb(var(--color-accent));
  white-space: nowrap;
}
.chip.is-muted {
  border-color: transparent;
  background: rgb(var(--color-foreground) / 0.05);
  color: rgb(var(--color-foreground) / 0.4);
}
.chip.is-small { font-size: var(--text-xs); padding: 7.5px 15px; }
.chip img { width: 20px; height: 20px; }

/* pill buttons — primary inverts the scheme, secondary borrows currentColor */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 205px;
  padding: 16px 1.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-btn);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transition: background var(--animation-values), color var(--animation-values), border-color var(--animation-values);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-pill.is-primary {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}
.btn-pill.is-secondary {
  background: transparent;
  color: rgb(var(--color-foreground));
  border-color: rgb(var(--color-foreground));
}
.btn-pill.is-secondary:hover { background: rgb(var(--color-foreground) / 0.1); }
/* always-white pill, whatever the section behind it */
.btn-pill.is-light {
  background: rgb(var(--rgb-white));
  color: rgb(var(--rgb-ink));
  border-color: rgb(var(--rgb-ink));
}

/* Solid pills sweep to the brand gradient + white text on hover.
   background-image can't transition, so a ::before overlay fades in. */
.btn-pill.is-light,
.btn-pill.is-primary {
  position: relative;
  isolation: isolate;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.btn-pill.is-light::before,
.btn-pill.is-primary::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: -1;
}
.btn-pill.is-light:hover { background: rgb(var(--rgb-white)); }
.btn-pill.is-primary:hover { background: rgb(var(--color-foreground)); }
.btn-pill.is-light:hover,
.btn-pill.is-primary:hover {
  color: rgb(var(--rgb-white));
  border-color: transparent;
}
.btn-pill.is-light:hover::before,
.btn-pill.is-primary:hover::before { opacity: 1; }

/* gradient CTA pill */
.btn-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand);
  border-radius: 50px;
  padding: 16px 35px;
  font-weight: 500;
  font-size: var(--text-btn);
  line-height: var(--lh-body);
  color: rgb(var(--rgb-white));
  letter-spacing: 0;
  white-space: nowrap;
}
.btn-grad:hover { opacity: 0.9; }
a.btn-grad,
a.btn-grad:visited,
a.btn-grad:hover { color: rgb(var(--rgb-white)); }

/* WhatsApp CTA. Brand green and a white label in every scheme, never recolored
   by the section it sits in, same rule as the header CTA. Sized to sit level
   beside .btn-grad and .btn-pill. */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 500;
  font-size: var(--text-btn);
  line-height: var(--lh-body);
  letter-spacing: 0;
  white-space: nowrap;
  background: rgb(var(--rgb-whatsapp));
  color: rgb(var(--rgb-white));
  transition: background var(--animation-values);
}
.btn-whatsapp img { width: 20px; height: 20px; }
.btn-whatsapp:hover { background: rgb(var(--rgb-whatsapp) / 0.85); }
a.btn-whatsapp,
a.btn-whatsapp:visited,
a.btn-whatsapp:hover { color: rgb(var(--rgb-white)); }

/* a CTA and its WhatsApp twin travel together as one unit */
.cta-pair { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.cta-pair--center { justify-content: center; }

/* section-bottom CTA strip (econ + fit) */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-hairline);
  padding-top: 25px;
  margin-top: 50px;
}
.cta-strip p { font-size: var(--text-xl); line-height: var(--lh-tight); color: rgb(var(--color-foreground)); }
.cta-strip a.inline-link {
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- card component ------------------------------------------------------ */

.card {
  border-radius: 16px;
  padding: 25px 20px;
}
/* soft card is a light island: it pins its own foreground so nested muted
   copy stays readable even if the surrounding section is dark */
.card--soft {
  --color-foreground: var(--rgb-ink);
  background: rgb(var(--color-surface));
  color: rgb(var(--color-foreground));
}
/* accent card marks a finding that already favours the pitch: brand outline,
   blue wash, and the number picks up the brand gradient */
.card--accent {
  background: rgb(var(--rgb-blue-deep) / 0.09);
  border: 1px solid rgb(var(--rgb-cyan));
}
.card--accent .card__title { color: rgb(var(--color-accent)); }
.card--accent .card__body { color: rgb(var(--rgb-blue) / 0.7); }
.card--accent .card__num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card--glass {
  background: rgb(var(--color-foreground) / 0.06);
  border: 1px solid rgb(var(--color-foreground) / 0.12);
  color: rgb(var(--color-foreground));
  padding: 30px;
  backdrop-filter: blur(10px);
}

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card__head + * { margin-top: 20px; }

.card__icon { width: 28px; height: 28px; margin-bottom: 5px; }
.card__icon-tile {
  background: rgb(var(--rgb-white));
  border: 1px solid var(--color-hairline);
  border-radius: 9px;
  padding: 8px;
  display: grid;
  place-items: center;
}
.card__icon-tile img { width: 26px; height: 26px; }

/* a headline figure never breaks across lines */
.card__value { font-size: var(--text-h3); line-height: var(--lh-tight); font-weight: 500; margin-bottom: 0.4em; white-space: nowrap; }
.card__title { font-size: var(--text-h6); line-height: var(--lh-tight); font-weight: 500; }

.card__body { font-size: var(--text-md); line-height: var(--lh-body); color: rgb(var(--color-foreground) / 0.7); }
.card__body b { font-weight: 500; color: rgb(var(--color-foreground)); }
.card--glass .card__body { line-height: var(--lh-tight); }
:where(.card__value, .card__title) + .card__body { margin-top: 6px; }

/* ---- sticky header ------------------------------------------------------- */

html { scroll-padding-top: calc(var(--header-h) + 14px); }

/* The header floats over the page rather than sitting above it: fixed, no
   border, no shadow, no fill. All it lays down is a soft top-to-bottom wash of
   whatever section is currently under it. behavior.js mirrors that section's
   color-scheme modifier onto the header, so both the wash and the topbar text
   flip between light and dark on their own.

   The swap is a single class change at one scroll line, so every piece that
   reads the scheme (wash, stamp, logo paint) cross-fades on the same
   --animation-values beat. Miss one and that piece pops while the rest glide. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border: 0;
  transition: color var(--animation-values);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* The wash overruns the header box so it dissolves instead of ending on a line.

   Fade shape and fade color are split on purpose. No browser interpolates a
   gradient image, so painting the wash as a scheme-colored gradient made it
   snap on every scheme change. Here the gradient is a fixed mask that only
   carries the shape, and the color is a plain background-color, which does
   transition. Same picture, and it cross-fades. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 32px);
  background-color: rgb(var(--color-background));
  --wash-shape: linear-gradient(180deg,
    rgb(var(--rgb-black) / 0.95) 0%,
    rgb(var(--rgb-black) / 0.45) 52%,
    rgb(var(--rgb-black) / 0) 100%);
  -webkit-mask-image: var(--wash-shape);
  mask-image: var(--wash-shape);
  transition: background-color var(--animation-values);
  pointer-events: none;
  z-index: -1;
}

.report-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.report-topbar .logo { flex-shrink: 0; display: block; }
/* the logo is inlined so its paths can take the header's foreground token and
   invert with the section underneath. It has no intrinsic size
   (preserveAspectRatio="none") — pin its viewBox ratio explicitly or the
   browser falls back to a stretched 300px box */
.report-topbar .logo svg {
  height: 45px;
  width: auto;
  aspect-ratio: 252.465 / 50;
  display: block;
  /* one paint in every scheme. Swapping the fill itself (solid ink ↔ gradient)
     is a paint-server change, which cannot interpolate, so the logo would snap
     while the wash around it eased. Instead the fill never changes and the
     gradient's own stops carry the scheme, so the logo cross-fades. The mark's
     shading paths carry baked-in dark gradients, so they take the same paint. */
  --fill-0: url(#logo-brand);
  --fill-1: url(#logo-brand);
}
.report-topbar .logo svg [fill^="url(#paint"] { fill: url(#logo-brand); }

/* white over a dark section, brand gradient over a light one */
.site-header { --logo-from: rgb(var(--color-foreground)); --logo-to: rgb(var(--color-foreground)); }
.site-header:is(.color-scheme--light, .color-scheme--grey) {
  --logo-from: rgb(var(--rgb-cyan));
  --logo-to: rgb(var(--rgb-blue));
}
#logo-brand stop { transition: stop-color var(--animation-values); }
#logo-brand stop:first-child { stop-color: var(--logo-from); }
#logo-brand stop:last-child { stop-color: var(--logo-to); }
.report-topbar .stamp {
  font-size: var(--text-xs);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  /* sets its own color, so it needs its own transition: the header's does not
     inherit down to it */
  color: rgb(var(--color-foreground) / 0.78);
  transition: color var(--animation-values);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
}

/* header CTA: brand gradient and white label, fixed. Never restyle its color
   on hover, focus, or scheme change. */
.topbar-cta {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgb(var(--rgb-white));
  white-space: nowrap;
  text-decoration: none;
}
.topbar-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-brand);
  z-index: -1;
}
/* the label is white in every state and under every section scheme */
.topbar-cta:is(:link, :visited, :hover, :focus, :active) { color: rgb(var(--rgb-white)); }

/* brand-gradient reading-progress line along the header's top edge */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---- hero ---------------------------------------------------------------- */

/* the hero runs under the fixed header, so it reserves the header's height as
   padding and holds a tall stage for the backdrop */
.report-hero {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* about 20% shorter than the original clamp(660px, 92vh, 1000px). Phones keep
     the full-height stage, restored in the 860px block. */
  min-height: clamp(531px, 73.6vh, 805px);
  padding-top: var(--header-h);
}


.report-hero__shadow-slider {
	z-index: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 70vw;
	height: 100%;
	/* background: linear-gradient(90deg, rgb(var(--color-background)) 6.57%, rgb(var(--color-background) / 0) 77.54%); */
}

.report-hero__shadow-slider::after {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgb(var(--color-background)) 6.57%, rgb(var(--color-background) / 0) 77.54%);
	z-index: 1;
	display: block;
	top: 0;
	position: absolute;
	left: 0;
	bottom: 0;
}

/* Slides stack in the same box. Only the first one shows until behavior.js
   opts in to the crossfade, so a no-JS or reduced-motion render still gets a
   still backdrop instead of an empty hero. */
.report-hero__slide {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 0;
	opacity: 0;
}

.report-hero__slide:first-child { opacity: 1; }

.report-hero__shadow-slider.is-cycling .report-hero__slide {
	opacity: 0;
	transition: opacity 1.4s ease-in-out;
}

.report-hero__shadow-slider.is-cycling .report-hero__slide.is-active { opacity: 1; }

.report-hero__shadow-slider img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.6;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 3rem);
}

.hero-copy .h1 { color: rgb(var(--color-foreground)); }
.hero-copy .lead { color: rgb(var(--color-foreground) / 0.85); max-width: 50rem; }

/* right visual: rings + glow + chamber render fading into the bg */
.hero-visual {
  position: relative;
  min-height: clamp(420px, 44vw, 620px);
  align-self: stretch;
}
.hero-visual .rings {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 190%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.hero-visual .glow {
  position: absolute;
  inset: -25% -35% -35%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background: radial-gradient(55% 48% at 51% 40%,
    rgb(var(--rgb-glow) / 0.32) 0%,
    rgb(var(--rgb-glow) / 0.13) 45%,
    rgb(var(--rgb-glow) / 0.05) 68%,
    transparent 90%);
}
.hero-visual .chamber {
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translateX(-50%);
  width: min(743px, 104%);
  max-width: none;
  height: auto;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, rgb(var(--rgb-black)) 58%, transparent 92%);
  mask-image: linear-gradient(to bottom, rgb(var(--rgb-black)) 58%, transparent 92%);
}

/* rotating dossier badge — behind the chamber, peeking past its top-right */
.dossier-badge {
  position: absolute;
  top: 44px;
  right: clamp(12px, 2.5vw, 48px);
  width: 124px;
  height: 124px;
  transform: rotate(-11.8deg);
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 0;
}
/* min-width:0 keeps the hero's flex column from widening to the stat scroller's
   full track once the cards stop stacking */
.report-hero > .wrap[data-reveal] { position: relative; z-index: 1; width: 100%; min-width: 0; }
.dossier-badge .ring { position: absolute; inset: 0; }
.dossier-badge .ring.inner { inset: 13.33%; }
.dossier-badge b {
  display: block;
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-caps-sm);
  color: rgb(var(--color-foreground));
  font-weight: 700;
  line-height: 1.35;
}
.dossier-badge small {
  display: block;
  margin-top: 3px;
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-caps);
  color: rgb(var(--color-foreground) / 0.62);
  text-transform: uppercase;
}

/* hero stat cards */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding-bottom: 2rem;
  position: relative;
  z-index: 2;
}

/* ---- signals ------------------------------------------------------------- */

.section-signals { padding-block: clamp(65px, 8vw, 100px) 80px; }

.signals-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: start;
  margin-top: 40px;
}
.standout .h6,
.menu-block .h6 { color: rgb(var(--color-foreground) / 0.7); }
.menu-list,
.standout-list { margin-top: 20px; }

/* menu row: mark, service, category. Hairline between rows, none on top */
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 15px;
}
.menu-row + .menu-row { border-top: 1px solid var(--color-hairline); }
.menu-row .mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(var(--color-accent));
}
.menu-row .mark img { width: 11px; height: 11px; }
.menu-row .label {
  flex: 1;                        /* holds the tag against the right edge */
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-tight);
}
.menu-row .tag {
  flex: none;
  max-width: 40%;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
  text-align: right;
  color: rgb(var(--color-accent));
}
/* not on the floor today: no check, dimmed label and tag */
.menu-row.is-muted .mark { background: rgb(var(--color-foreground) / 0.08); }
.menu-row.is-muted .label,
.menu-row.is-muted .tag { color: rgb(var(--color-foreground) / 0.3); }

.standout-list { display: grid; gap: 10px; }
.standout-list .card { display: flex; gap: 12px; }
.standout-list .card__title { font-size: var(--text-lg); }
.standout-list .card__body { font-size: var(--text-sm); }
.finding-source {
  display: inline-block;
  margin-top: 10px;
  color: rgb(var(--rgb-blue));
  font-size: var(--text-xs);
  font-weight: 500;
  text-underline-offset: 3px;
}
.finding-source + .finding-source { margin-left: 12px; }
.finding-source:hover { color: rgb(var(--rgb-cyan)); }
/* fixed lead column so every card's copy starts on the same line, sized in em
   so it tracks the fluid display ramp instead of one breakpoint's pixel value */
.card__num {
  flex: none;
  width: 1.4em;
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 0.9;
  white-space: nowrap;
  color: rgb(var(--color-foreground) / 0.3);
}

/* ---- market -------------------------------------------------------------- */

.section-market { padding-block: clamp(65px, 8vw, 100px); }
.market-grid {
  display: grid;
  grid-template-columns: minmax(0, 623px) minmax(0, 678px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.market-copy .caveat { font-size: var(--text-xs); line-height: 1.5; margin-top: 20px; color: rgb(var(--color-foreground) / 0.55); }
.provider-count-note {
  margin-top: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgb(var(--color-accent));
}
.market-interpretation {
  margin-top: 26px;
  padding: 22px 24px 23px;
  border-left: 3px solid rgb(var(--color-accent));
  border-radius: 0 20px 20px 0;
  background:
    linear-gradient(115deg, rgb(var(--rgb-cyan) / 0.1), rgb(var(--rgb-blue) / 0.035) 72%),
    rgb(var(--color-surface));
}
.market-interpretation__body {
  max-width: 56ch;
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: rgb(var(--color-foreground) / 0.76);
}
.provider-list { margin-top: 25px; }
.provider-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1.2fr) minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-hairline);
  transition: background var(--animation-values);
}
.provider-row:first-child { border-top: 1px solid var(--color-hairline); }
.provider-row .idx {
  font-size: var(--text-xs);
  line-height: var(--lh-none);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgb(var(--color-accent));
  align-self: start;
  padding-top: 3px;
}
.provider-row .who,
.provider-row .where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.provider-row .name {
  font-size: var(--text-sm);
  line-height: 1.3;
  font-weight: 500;
  color: rgb(var(--color-foreground));
  overflow-wrap: anywhere;
}
.provider-row .blurb {
  font-size: var(--text-xs);
  line-height: var(--lh-body);
  color: rgb(var(--color-foreground) / 0.55);
}
.provider-row .status {
  font-size: var(--text-sm);
  line-height: 1.3;
  font-weight: 500;
  color: rgb(var(--color-foreground));
}
.provider-row .meta {
  font-size: var(--text-xs);
  line-height: var(--lh-body);
  color: rgb(var(--color-foreground) / 0.55);
}
.provider-row .src {
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: 500;
  color: rgb(var(--color-accent));
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  white-space: nowrap;
  justify-self: end;
}
.provider-row .src:visited { color: rgb(var(--color-accent)); }
.provider-row.is-hot { background: rgb(var(--rgb-cyan) / 0.06); }
.provider-row:focus-visible { outline: 2px solid rgb(var(--rgb-cyan)); outline-offset: 2px; }

/* empty-market branch (zero providers) */
.empty-market {
  border: 1px dashed rgb(var(--rgb-cyan) / 0.55);
  background: rgb(var(--rgb-cyan) / 0.04);
  border-radius: 20px;
  padding: 30px 25px;
}
.empty-market__title { font-size: var(--text-xl); line-height: var(--lh-tight); font-weight: 500; }
.empty-market__body { font-size: var(--text-md); line-height: var(--lh-body); color: rgb(var(--color-foreground) / 0.75); margin-top: 10px; }

/* ---- radius map (self-contained SVG, replaces the geo schematic) --------- */

.map-card {
  position: relative;
  border-radius: 34px;
  border: 1px solid rgb(var(--color-foreground) / 0.15);
  overflow: hidden;
  aspect-ratio: 678 / 467;
}
.map-card--radius {
  background:
    radial-gradient(90% 90% at 50% 45%,
      rgb(var(--rgb-cyan) / 0.09) 0%,
      rgb(var(--rgb-blue) / 0.05) 55%,
      rgb(var(--rgb-navy-deep) / 0.02) 100%),
    rgb(var(--color-surface));
}
.radius-map {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 90%;
  width: auto;
  aspect-ratio: 1;
  overflow: visible;
}
.radius-map .ring-fill { fill: rgb(var(--rgb-cyan) / 0.035); stroke: none; }
.radius-map .ring {
  fill: none;
  stroke: rgb(var(--color-foreground) / 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}
/* SVG text below uses px in viewBox units, not CSS rem tokens */
.radius-map .ring-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  fill: rgb(var(--color-foreground) / 0.45);
  text-anchor: middle;
}
.radius-map .you-dot { fill: rgb(var(--color-foreground)); }
.radius-map .you-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  fill: rgb(var(--color-foreground));
  text-anchor: middle;
}
.radius-map .map-dot { cursor: pointer; }
.radius-map .map-dot .dot {
  fill: rgb(var(--rgb-cyan));
  stroke: rgb(var(--color-surface));
  stroke-width: 2.5;
  transition: fill var(--animation-values);
}
.radius-map .map-dot .dot-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  fill: rgb(var(--rgb-white));
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.radius-map .map-dot .dot-pulse {
  fill: rgb(var(--rgb-cyan) / 0.35);
  transform-origin: center;
  transform-box: fill-box;
}
.radius-map .map-dot.is-hot .dot,
.radius-map .map-dot:focus-visible .dot { fill: rgb(var(--rgb-blue)); }
.radius-map .map-dot:focus-visible { outline: none; }
.radius-map .open-note {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  fill: rgb(var(--color-foreground) / 0.5);
  text-anchor: middle;
}
.map-card .map-chip {
  position: absolute;
  left: 21px;
  bottom: 21px;
  background: rgb(var(--color-surface) / 0.7);
  backdrop-filter: blur(2px);
  border-radius: 7px;
  padding: 15px 21px;
  font-size: var(--text-md);
  line-height: var(--lh-body);
  font-weight: 500;
}

/* ---- economics ----------------------------------------------------------- */

.section-econ { padding-block: clamp(65px, 8vw, 100px); }
.econ-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.econ-head .note { font-size: var(--text-lg); line-height: var(--lh-body); text-align: right; }
.econ-head .note b { font-weight: 500; }

.scenario-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.scenario-card {
  border: 1px solid var(--color-hairline);
  border-radius: 20px;
}
/* the featured card carries its own scheme — border matches its own fill */
.scenario-card.color-scheme { border-color: rgb(var(--color-background)); }
.scenario-card .inner {
  border-radius: 16px;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  height: 100%;
}
.scenario-card .value { font-size: var(--text-h3); line-height: var(--lh-tight); font-weight: 500; white-space: nowrap; }
.scenario-card .sub { font-size: var(--text-sm); line-height: var(--lh-tight); opacity: 0.5; margin-top: 4px; }

.seg-bar { display: flex; gap: 8px; height: 26px; }
.seg-bar span { flex: 1; border-radius: 5px; background: rgb(var(--color-foreground) / 0.07); }
/* One brand gradient spans the whole bar, masked by the cells:
   each cell paints its own 10%-wide slice via interpolated color-mix stops. */
.seg-bar span.on { background: linear-gradient(90deg, var(--seg0), var(--seg1)); }
.seg-bar span:nth-child(1)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 100%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 90%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(2)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 90%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 80%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(3)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 80%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 70%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(4)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 70%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 60%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(5)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 60%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 50%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(6)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 50%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 40%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(7)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 40%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 30%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(8)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 30%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 20%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(9)  { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 20%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 10%, rgb(var(--rgb-blue))); }
.seg-bar span:nth-child(10) { --seg0: color-mix(in srgb, rgb(var(--rgb-cyan)) 10%, rgb(var(--rgb-blue))); --seg1: color-mix(in srgb, rgb(var(--rgb-cyan)) 0%, rgb(var(--rgb-blue))); }
.bar-caption {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  opacity: 0.5;
  margin-top: 10px;
}
.scenario-card .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-hairline);
  padding-top: 15px;
  margin-top: auto;
}
.scenario-card .foot .label { font-size: var(--text-xl); font-weight: 500; }

.assumptions {
  border: 1px solid var(--color-hairline);
  border-radius: 30px;
  overflow: hidden;
  margin-top: 50px;
}
.assumptions .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: rgb(var(--color-surface));
  border-bottom: 1px solid var(--color-hairline);
  padding: 25px;
}
.assumptions .head .h5 { margin-bottom: 0; }
.assumptions .head .src { font-size: var(--text-sm); font-weight: 500; opacity: 0.6; }
.assumptions .cols { display: grid; grid-template-columns: repeat(2, 1fr); }
.assumptions .col { padding: 35px 25px; }
.econ-caveat {
  max-width: 850px;
  margin: 18px auto 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: center;
  color: rgb(var(--color-foreground) / 0.58);
}
.assumptions .col + .col { border-left: 1px solid var(--color-hairline); }
.assumptions .col .value { font-size: var(--text-h3); line-height: var(--lh-tight); font-weight: 500; margin-block: 5px; }
.assumptions .col .sub { font-size: var(--text-md); line-height: var(--lh-body); opacity: 0.5; margin-top: 2px; }

/* ---- why superhuman ------------------------------------------------------ */

/* Shares the navy scheme with the lineup directly below, so nothing marks the
   boundary and the two paddings would otherwise stack into dead space. Both
   sides of that seam run at half their usual value. */
.section-why { padding-block: clamp(65px, 8vw, 100px) clamp(33px, 4vw, 50px); }

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 562px) minmax(0, 623px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(2rem, 5vw, 5.625rem);
}
.why-photo {
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 562 / 821;
  /* stands in for the photo while it loads, so the column never collapses */
  background: rgb(var(--color-surface));
}
.why-photo img { width: 100%; height: 100%; object-fit: cover; }

.why-copy { display: flex; flex-direction: column; gap: 35px; }
.why-copy .lead { color: rgb(var(--color-foreground) / 0.8); }

/* each stat is as wide as its own label, not a fixed third. Equal columns cut
   the widest figure in half while leaving the narrow ones swimming in space. */
.why-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 30px;
}
.why-stats .value {
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: var(--lh-display);
  white-space: nowrap;
}
.why-stats .label {
  margin-top: 8px;
  font-size: var(--text-md);
  line-height: var(--lh-tight);
  color: rgb(var(--color-foreground) / 0.8);
}

/* spec row: term on the left, two-line answer right, hairline between rows */
.spec-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
}
.spec-row + .spec-row { border-top: 1px solid var(--color-hairline); }
.spec-row .label { font-weight: 500; font-size: var(--text-xl); line-height: var(--lh-tight); }
.spec-row .value {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  text-align: right;
  color: rgb(var(--color-foreground) / 0.8);
}
.spec-row .value b { font-weight: 500; color: rgb(var(--color-foreground)); }

/* ---- lineup -------------------------------------------------------------- */

/* top padding halved: the why section above shares this scheme, see above */
.section-lineup { padding-block: 40px clamp(80px, 8vw, 120px); }
.lineup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.375rem);
  flex-wrap: wrap;
}
.lineup-head .desc { max-width: 456px; font-size: var(--text-xl); line-height: var(--lh-body); color: rgb(var(--color-foreground) / 0.85); }

.lineup-disclosure {
  margin-top: 42px;
  text-align: center;
}
.lineup-disclosure > summary {
  list-style: none;
  margin-inline: auto;
}
.lineup-disclosure > summary::-webkit-details-marker { display: none; }
.lineup-disclosure > summary:focus-visible {
  outline: 2px solid rgb(var(--rgb-cyan));
  outline-offset: 5px;
}
.lineup-disclosure__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}
.lineup-disclosure__icon::before,
.lineup-disclosure__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--animation-values);
}
.lineup-disclosure__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.lineup-disclosure[open] .lineup-disclosure__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.lineup-disclosure__content { text-align: left; }
.lineup-disclosure[open] .lineup-disclosure__content {
  animation: lineup-reveal 0.35s ease-out both;
}
@keyframes lineup-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 50px;
}
.product-card { display: flex; flex-direction: column; gap: 25px; padding: 10px; min-width: 0; }
.product-card .head {
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 20px;
}
.product-card .head .img-box {
  position: relative;
  height: 246px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* the chambers dissolve into the section instead of ending on their bases */
.product-card .head .img-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(180deg,
    rgb(var(--color-background) / 0) 0%,
    rgb(var(--color-background) / 0.25) 50%,
    rgb(var(--color-background) / 0.7) 80%,
    rgb(var(--color-background)) 100%);
  pointer-events: none;
}
.product-card .head img { max-height: 100%; max-width: 100%; object-fit: contain; }
.product-card .head .h4 { margin-top: 15px; }
.product-card .head .type { font-size: var(--text-sm); line-height: var(--lh-tight); color: rgb(var(--color-foreground) / 0.6); }
.product-card dl { display: flex; flex-direction: column; gap: 25px; margin: 0; }
.product-card dt {
  font-size: var(--text-2xs);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--color-foreground) / 0.56);
}
.product-card dd { font-size: var(--text-xl); line-height: var(--lh-none); font-weight: 500; margin: 5px 0 0 0; }
.product-card :is(h3, p, dt, dd) { overflow-wrap: anywhere; }
.product-card .price { border-top: 1px solid rgb(var(--color-foreground) / 0.1); padding-top: 30px; }
.product-card .btn-pill { width: 100%; min-width: 0; margin-top: 25px; }

.lineup-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  border-top: 1px solid var(--color-hairline);
  padding-top: 35px;
  margin-top: 50px;
  flex-wrap: wrap;
}

/* ---- fit ----------------------------------------------------------------- */

.section-fit { padding-block: clamp(65px, 8vw, 100px); }
.fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 743px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.fit-copy .lead { color: rgb(var(--color-foreground) / 0.7); max-width: 610px; }
.fit-copy .lead b { font-weight: 500; color: rgb(var(--color-foreground)); }
.fit-pills { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 35px; }

.fit-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* portrait session photos, cropped to fill; the ratio matches the source files
   so the cover crop takes almost nothing off the frame */
.fit-photos figure { border-radius: 26px; overflow: hidden; position: relative; aspect-ratio: 361 / 543; }
.fit-photos figure:last-of-type { transform: translateY(57px); }
.fit-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fit-photos figcaption.note {
  position: absolute;
  left: 0;
  top: 100%;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: rgb(var(--color-foreground) / 0.5);
  margin-top: 1em;
}

.upgrade-block { margin-top: clamp(4rem, 7vw, 6.5rem); }
.upgrade-title { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.upgrade-title p { font-size: var(--text-lg); line-height: var(--lh-tight); margin-top: 0; }
.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(209px, auto);
  gap: 20px;
  margin-top: 20px;
}

/* ---- compare / bring-the-quote (timeline design) ------------------------- */

.section-compare {
  position: relative;
  padding-block: clamp(65px, 8vw, 100px);
  overflow: hidden;
}
.section-compare .wrap { position: relative; z-index: 1; }
/* oversized brand mark bleeding off the right edge (opacity baked into the SVG) */
.compare-mark {
  position: absolute;
  right: -4%;
  top: -10%;
  height: 120%;
  width: auto;
  aspect-ratio: 887 / 889;
  max-width: none;
  pointer-events: none;
}
/* the mark's baked-in blue reads as a light tint on a pale section, so on the
   light schemes it is flattened to black and dialed back until it sits a step
   darker than the background */
.section-compare:is(.color-scheme--light, .color-scheme--grey) .compare-mark {
  filter: grayscale(1) brightness(0);
  opacity: 0.3;
}
.compare-head { max-width: 620px; }
.compare-head .lead { color: rgb(var(--color-foreground) / 0.8); }

.compare-timeline {
  position: relative;
  display: flex;
  gap: 40px;
  margin-top: 60px;
}
.timeline-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 3px;
  background: rgb(var(--color-foreground) / 0.16);
}
.timeline-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 88%;
  background: var(--grad-brand);
}
/* the circle riding the leading edge of the line */
.timeline-fill::after {
  content: "";
  position: absolute;
  right: -5.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(var(--rgb-blue));
  box-shadow: 0 0 12px rgb(var(--rgb-blue) / 0.55);
}
.timeline-step { flex: 1 0 0; min-width: 0; position: relative; }
.step-node {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-foreground) / 0.4);
  font-size: var(--text-xl);
  font-weight: 500;
  color: rgb(var(--color-foreground));
  position: relative;
  z-index: 1;
}
.timeline-step .h6 {
  margin-top: 15px;
  color: rgb(var(--color-foreground));
}
.timeline-step p {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: rgb(var(--color-foreground) / 0.7);
}

/* ---- CTA + footer -------------------------------------------------------- */

.section-cta { overflow: hidden; }
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 35px;
  padding-block: 70px 50px;
}
.cta-inner .h1 { color: rgb(var(--color-foreground)); }
.cta-inner .lead { color: rgb(var(--color-foreground) / 0.7); max-width: 610px; }
.cta-inner .lead b { font-weight: 500; color: rgb(var(--color-foreground)); }
.cta-inner .micro { font-size: var(--text-xs); line-height: var(--lh-body); color: rgb(var(--color-foreground) / 0.7); margin-top: 8px; }

/* named rep under the CTA: avatar with an availability dot, then the line and
   two contact links */
.rep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 24px;
  text-align: left;
}
.rep__avatar {
  position: relative;
  flex: none;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid rgb(var(--color-foreground));
  background: rgb(var(--rgb-surface));
}
.rep__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* availability dot: the ring pulses, the dot itself stays put so it reads as a
   status light rather than a moving object */
.rep__dot {
  position: absolute;
  right: 0;
  top: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--rgb-whatsapp));
  box-shadow: 0 0 0 2px rgb(var(--color-background));
}
.rep__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(var(--rgb-whatsapp));
  animation: rep-pulse 2s ease-out infinite;
}
@keyframes rep-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rep__dot::after { animation: none; }
}

.rep__name { font-weight: 500; font-size: var(--text-md); line-height: var(--lh-body); }
.rep__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 15px;
  font-size: var(--text-xs);
  line-height: var(--lh-body);
}
.rep__links a {
  color: rgb(var(--color-foreground) / 0.7);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
.rep__links a:hover { color: rgb(var(--color-foreground)); }

.footer-strip {
  position: relative;
  height: 0;
  padding-top: 25%;
}
.footer-strip .render-collage {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
}
.footer-strip .fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(var(--color-background) / 0) 55%, rgb(var(--color-background)) 100%);
}
.footer-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  width: min(var(--report-max), calc(100% - 2 * var(--page-px)));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bar .left { display: flex; align-items: center; gap: 24px; }
.footer-bar .left img { height: 40px; width: auto; aspect-ratio: 252.465 / 50; display: block; }
.footer-bar a.mail {
  font-size: var(--text-xs);
  line-height: var(--lh-body);
  color: rgb(var(--color-foreground) / 0.6);
  text-decoration: underline;
}
.footer-bar .fineprint {
  font-size: var(--text-xs);
  line-height: var(--lh-body);
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-foreground) / 0.6);
}

/* ---- reveal-on-enter (progressive enhancement) ---------------------------
   The VISIBLE state is the default. The hidden start state only applies once
   behavior.js adds `.reveal-on` to <html>, so no-JS, older browsers, and
   PDF/screenshot capture always render a complete page. Gated behind
   reduced-motion and forced off in print. -------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal-on [data-reveal].is-in > * { opacity: 1; transform: none; }
  .reveal-on [data-reveal].is-in > *:nth-child(2) { transition-delay: 0.09s; }
  .reveal-on [data-reveal].is-in > *:nth-child(3) { transition-delay: 0.18s; }
  .reveal-on [data-reveal].is-in > *:nth-child(4) { transition-delay: 0.27s; }
  .reveal-on [data-reveal].is-in > *:nth-child(5) { transition-delay: 0.36s; }
  .reveal-on [data-reveal].is-in > *:nth-child(6) { transition-delay: 0.45s; }

  /* HERO — copy, chamber and stat cards resolve from soft-focus into sharp. */
  .reveal-on .report-hero [data-reveal] > * { opacity: 1; transform: none; }

  .reveal-on .report-hero [data-reveal] .hero-copy > *,
  .reveal-on .report-hero [data-reveal] .hero-visual,
  .reveal-on .report-hero [data-reveal] .stat-row .card {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(14px) scale(1.03);
    transition: opacity 0.95s ease,
                filter 0.95s ease,
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal-on .report-hero [data-reveal].is-in .hero-copy > *,
  .reveal-on .report-hero [data-reveal].is-in .hero-visual,
  .reveal-on .report-hero [data-reveal].is-in .stat-row .card {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  .reveal-on .report-hero [data-reveal].is-in .hero-copy > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-on .report-hero [data-reveal].is-in .hero-copy > *:nth-child(2) { transition-delay: 0.16s; }
  .reveal-on .report-hero [data-reveal].is-in .hero-copy > *:nth-child(3) { transition-delay: 0.30s; }
  .reveal-on .report-hero [data-reveal].is-in .hero-visual { transition-delay: 0.12s; transition-duration: 1.25s; }
  .reveal-on .report-hero [data-reveal].is-in .stat-row .card:nth-child(1) { transition-delay: 0.46s; }
  .reveal-on .report-hero [data-reveal].is-in .stat-row .card:nth-child(2) { transition-delay: 0.54s; }
  .reveal-on .report-hero [data-reveal].is-in .stat-row .card:nth-child(3) { transition-delay: 0.62s; }

  /* compare timeline: the white run draws across once the section reveals,
     its end circle riding the leading edge */
  .reveal-on .section-compare [data-reveal] .timeline-fill {
    width: 0;
    transition: width 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s;
  }
  .reveal-on .section-compare [data-reveal].is-in .timeline-fill { width: 88%; }

  /* map dots breathe gently */
  @keyframes dot-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    70% { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
  }
  .radius-map .map-dot .dot-pulse { animation: dot-pulse 2.6s ease-out infinite; }
  .radius-map .map-dot:nth-of-type(2) .dot-pulse { animation-delay: 0.9s; }
  .radius-map .map-dot:nth-of-type(3) .dot-pulse { animation-delay: 1.8s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .radius-map .map-dot .dot-pulse { display: none; }
  .lineup-disclosure[open] .lineup-disclosure__content { animation: none; }
  .lineup-disclosure__icon::before,
  .lineup-disclosure__icon::after { transition: none; }
}

/* ---- print --------------------------------------------------------------- */

@media print {
  .site-header { position: static; }
  .scroll-progress { display: none; }
  .reveal-on [data-reveal] > * { opacity: 1 !important; transform: none !important; }
  .reveal-on .report-hero [data-reveal] .hero-copy > *,
  .reveal-on .report-hero [data-reveal] .hero-visual,
  .reveal-on .report-hero [data-reveal] .stat-row .card {
    opacity: 1 !important; filter: none !important; transform: none !important;
  }
  .radius-map .map-dot .dot-pulse { display: none; }
  .reveal-on .section-compare .timeline-fill { width: 88% !important; }
  .color-scheme { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lineup-disclosure > summary { display: none; }
  .lineup-disclosure > .lineup-disclosure__content { display: block; }
  section { break-inside: avoid; }
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  /* 4 cols get cramped below this — horizontal scroller with snap + bleed */
  .lineup-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--page-px));
    padding-inline: var(--page-px);
    scroll-padding-inline: var(--page-px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .product-card {
    flex: 0 0 clamp(240px, 68vw, 300px);
    scroll-snap-align: start;
  }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 340px; }
  .dossier-badge { display: none; }

  /* the hero copy sits on top of the backdrop once the grid stacks, so the
     slider spans the full width and the fade runs from the bottom up instead
     of from the left, with a light top wash so the image never butts against
     the header */
  .report-hero__shadow-slider { width: 100%; }
  .report-hero__shadow-slider::after {
    background:
      linear-gradient(0deg,
        rgb(var(--color-background)) 6.57%,
        rgb(var(--color-background) / 0) 77.54%),
      linear-gradient(180deg,
        rgb(var(--color-background) / 0.5) 0%,
        rgb(var(--color-background) / 0) 26%);
  }
}

@media (max-width: 860px) {
  .signals-row,
  .market-grid,
  .why-grid,
  .fit-grid { grid-template-columns: 1fr; }
  /* the desktop portrait towers over a phone once it spans the full width */
  .why-photo { aspect-ratio: 3 / 4; }
  .scenario-row,
  .upgrade-grid { grid-template-columns: 1fr; }

  /* hero content drops to the bottom of the stage so the backdrop reads above
     it, and the stat cards turn into a snap scroller sized to show one card
     plus half of the next. The stage keeps its full height here: the desktop
     trim would leave the backdrop no room to read on a phone. */
  .report-hero {
    justify-content: flex-end;
    min-height: clamp(660px, 92vh, 1000px);
  }
  .stat-row {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--page-px));
    padding-inline: var(--page-px);
    scroll-padding-inline: var(--page-px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stat-row::-webkit-scrollbar { display: none; }
  .stat-row .card {
    flex: 0 0 calc(62vw - 12px);
    scroll-snap-align: start;
    padding: 20px;
  }
  .assumptions .cols { grid-template-columns: 1fr; }
  .assumptions .col + .col { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .fit-photos figcaption.note { position: static; margin-top: 70px; text-align: left; }
  .econ-head .note { text-align: left; }

  /* timeline stacks: node beside text, and the track turns vertical so the
     path still runs behind the step numbers */
  .compare-timeline { flex-direction: column; gap: 28px; margin-top: 40px; }
  .timeline-track {
    left: 19.5px;   /* 3px rule centred in the 42px node column */
    right: auto;
    top: 21px;
    bottom: 21px;
    width: 3px;
    height: auto;
  }
  .timeline-fill { display: none; }
  .timeline-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
  }
  .step-node { width: 42px; height: 42px; font-size: var(--text-md); grid-row: 1 / span 2; }
  .timeline-step .h6 { margin-top: 8px; }
  .timeline-step p { grid-column: 2; }

  /* the mark drops to half size and tucks into the bottom-left corner */
  .compare-mark {
    height: 60%;
    left: -14%;
    right: auto;
    top: auto;
    bottom: -6%;
  }
}

/* required sandbox breakpoint: mid-collapse pass between 860 and 640 */
@media (max-width: 760px) {
  .stat-row { margin-top: 0; }
  .hero-visual { min-height: 300px; }
  .hero-visual .chamber { width: min(560px, 118%); }
  .map-card--radius { aspect-ratio: 1 / 1; }
}

/* provider rows: the four desktop columns stack under the name at this width */
@media (max-width: 640px) {
  .provider-row {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "idx  who"
      ".    where"
      ".    src";
    row-gap: 6px;
    column-gap: 12px;
  }
  .provider-row .idx { grid-area: idx; }
  .provider-row .who { grid-area: who; }
  .provider-row .where { grid-area: where; }
  .provider-row .src { grid-area: src; justify-self: start; }
  .provider-row .name { white-space: normal; }

  .cta-strip .btn-grad { width: 100%; }
  .lineup-footer { flex-direction: column; align-items: stretch; }
  .lineup-footer .btn-pill,
  .lineup-footer .btn-whatsapp { width: 100%; min-width: 0; }
  /* the pair stacks too, so neither button ends up half width beside the other */
  .cta-pair { width: 100%; flex-direction: column; align-items: stretch; }

  /* the rep line centres under the stacked buttons and the two contact links
     drop onto their own rows, since they will not sit side by side at this
     width without truncating the address */
  /* the buttons are full width here, so the 15px that reads as a gap on desktop
     reads as a collision under a stacked pill */
  .rep { flex-direction: column; text-align: center; gap: 12px; margin-top: 32px; }
  .rep__links { flex-direction: column; justify-content: center; align-items: center; gap: 6px; }

  .fit-photos figcaption.note { display: none; }

  .footer-strip { height: auto; padding-top: 30px; }
  .footer-strip .render-collage { position: static; display: block; }
  .footer-strip .fade { display: none; }

  .footer-bar {
    position: static;
    transform: none;
    width: auto;
    margin: 18px var(--page-px) 0;
    padding-bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-bar .left { flex-wrap: wrap; gap: 14px; }
  .footer-bar .left img { height: 32px; }

  :root { --header-h: 61px; }
  .report-topbar .stamp { display: none; }
  .report-topbar .logo svg { height: 39px; }
  .topbar-cta { padding: 10px 18px; font-size: var(--text-xs); }
}

@media (max-width: 560px) {
  /* right-aligning the answer against the term leaves it no room at this
     width, so the row stacks and both sides read from the left edge */
  .spec-row { flex-direction: column; gap: 6px; }
  .spec-row .value { text-align: left; }

  .menu-row .mark { width: 16px; height: 16px; }
  .menu-row .mark img { width: 9px; height: 9px; }
  .menu-row .label { font-size: var(--text-md); }
  .menu-row .tag { font-size: var(--text-xs); }

  /* the pair stays two-up and staggered here — full-width stacking turns them
     into two oversized blocks and loses the asymmetry */
  .fit-photos { gap: 12px; }
  .fit-photos figure:last-of-type { transform: translateY(28px); }
}

/* phone widths: 1.2 hero cards in view so the next one peeks past the edge
   (viewport minus the gutter, split across card + gap) */
@media (max-width: 480px) {
  .stat-row .card { flex: 0 0 calc(83.3vw - 16px); }
}

/* ---- signals, single column (copy pack v9) ------------------------------- */
/* The ranked section replaces the two-column grid. Only .closer and .landing
   are genuinely new; the ranked cards reuse .standout-list styling above. */
.signals-single { max-width: 48rem; margin-top: 40px; }
.signals-single .standout-list { margin-top: 0; }
.signals-single .lead-in {
  margin: 0 0 22px;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--lh-tight);
}
.signals-single .tail-line {
  margin: 18px 0 0;
  font-size: var(--text-sm);
  color: rgb(var(--color-foreground) / 0.65);
}
.signals-single .closer {
  margin: 30px 0 0;
  padding: 24px 26px;
  border-radius: 14px;
  background: rgb(var(--color-foreground) / 0.04);
}
.signals-single .closer__line { margin: 0 0 14px; font-size: var(--text-sm); }
.signals-single .closer__line:last-child { margin-bottom: 0; }
.signals-single .landing {
  margin: 26px 0 0;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--lh-tight);
}

/* Production-only Leaflet binding. The synthetic radius SVG remains unchanged
   in the editable gallery and is never copied into production output. */
.map-card--radius .market-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  background: #e7edf2;
}
.market-map .leaflet-control-attribution {
  color: #566675;
  font-family: var(--font-body);
  font-size: 9px;
}
.market-map .leaflet-control-attribution a { color: #304e70; }
.map-loading,
.map-noscript {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #e7edf2;
  color: #34495c;
  font-size: 13px;
  text-align: center;
}
.market-map-marker { border: 0; background: transparent; }
.origin-map-pin,
.provider-map-pin {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 8px;
  box-shadow: 0 5px 18px rgb(8 15 26 / 34%);
  transform: rotate(-45deg);
}
.origin-map-pin { background: rgb(var(--rgb-blue)); }
.origin-map-pin::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  content: "";
}
.provider-map-pin {
  background: rgb(var(--rgb-cyan));
  color: #07121c;
  font-size: 13px;
  font-weight: 700;
}
.provider-map-pin b { transform: rotate(45deg); line-height: 1; }
.map-card .map-chip { z-index: 5; }