/* ═══════════════════════════════════════════════════════════
   Active Recovery Center
   Tokens follow design/DIRECTION.md. Change them there first.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Type — 1.25 (major third) from an 18px base.
     Base is large on purpose: the audience is 50+. */
  --step--2: 0.711rem;
  --step--1: 0.8rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.563rem;
  --step-3:  1.953rem;
  --step-4:  clamp(1.85rem, 1.4rem + 2.6vw, 3.052rem);
  --step-5:  clamp(2.6rem, 1.6rem + 4.4vw, 4.7rem);
  --reading: clamp(2.8rem, 1.8rem + 4.2vw, 4.5rem);

  /* Space — 8px base */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:2.5rem; --s8:3.5rem;
  --s9:5rem;   --s10:7rem;  --s11:9rem;  --s12:11rem;

  /* Section rhythm — three distinct values, never uniform */
  --band-tight: clamp(3.5rem, 7vw, 6rem);
  --band-base:  clamp(4.5rem, 9vw, 8rem);
  --band-wide:  clamp(5.5rem, 12vw, 11rem);

  /* Color — deep blue-black ground, one signal blue.
     Contrast verified against --ground: ink 17.0:1 · ink-2 10.0:1 ·
     ink-3 5.8:1 · accent 5.7:1 · ground on accent 5.7:1 (CTA text). */
  --ground:   #0A1017;
  --ground-2: #121C26;
  --ink:      #EDF2F7;
  --ink-2:    #AEBECC;
  --ink-3:    #7E8FA0;
  --rule:     #1F2E3C;
  --ink-rgb:    237 242 247;
  --accent-rgb: 59 143 224;
  --accent:   rgb(var(--accent-rgb));
  --accent-hover: #63A9EA;

  /* Chart series. Validated with the dataviz palette checker on the dark
     surface — lightness band, chroma floor, CVD separation (protan ΔE 15.2),
     normal-vision floor (ΔE 15.3) and 3:1 contrast all pass. Do not
     substitute by eye; re-run the validator. */
  --series-1: #2F6FD0;   /* treated */
  --series-2: #1E9CAA;   /* comparison */
  --grid:     #17222D;

  /* Motion */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-state:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-micro: 140ms;
  --t-small: 220ms;
  --t-enter: 520ms;
  --t-media: 720ms;   /* photographs settling into their frame */
  --t-draw:  900ms;   /* section rules extending */
  --t-bar:   700ms;   /* bars and figure rules drawing their own length */

  --wrap: 75rem;
  --measure: 66ch;
}

/* ── Base ─────────────────────────────────────────────── */

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

html {
  font-size: 112.5%;               /* 18px base for 50+ legibility */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 700;
  text-wrap: balance;
}

/* The accent line. This italic serif against the sans is where the
   reference's whole premium register comes from — it carries the
   personality so the sans can stay quiet. */
h1 em, h2 em, .serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

h1 {
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.03em;
  /* Each sentence sits on its own line via <br>, and text-wrap:balance
     balances them independently — too narrow a cap orphans single words. */
  max-width: 17ch;
}
h1 em, .close h2 em { color: var(--ink); }

h2 {
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.024em;
  max-width: 18ch;
}

h3 {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.014em;
  font-weight: 600;
}

p { margin: 0; text-wrap: pretty; max-width: var(--measure); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}
.label--accent { color: var(--accent); }

.tnum { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s5); top: var(--s4); z-index: 200;
  background: var(--accent); color: var(--ground);
  padding: var(--s3) var(--s5); text-decoration: none; font-weight: 600;
  transform: translateY(-160%);            /* composited; `top` was not */
  transition: transform var(--t-small) var(--ease-state);
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Buttons and links ────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--s3) var(--s6);
  background: var(--accent); color: var(--ground);
  border-radius: 2px; font-weight: 600; font-size: var(--step-0);
  text-align: center; line-height: 1.25; white-space: normal;
  text-decoration: none;
  transition: background-color var(--t-micro) var(--ease-state),
              transform var(--t-micro) var(--ease-state);
}
.btn:hover  { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 58px; padding-inline: var(--s7); font-size: var(--step-1); }
.btn--invert { background: var(--ground); color: var(--ink); }
.btn--invert:hover { background: #16222E; }

.tel {
  display: inline-flex; align-items: center; min-height: 52px;
  font-weight: 600; text-decoration: none; color: var(--ink-2);
  transition: color var(--t-micro) var(--ease-state);
}
.tel:hover { color: var(--ink); }
.tel--invert { color: #4A5766; }
.tel--invert:hover { color: var(--ground); }

.link {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: var(--rule);
  transition: text-decoration-color var(--t-micro) var(--ease-state);
}
.link:hover { text-decoration-color: var(--accent); }

.cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s5); margin-top: var(--s8);
}

/* ── Page top: promo + nav overlaid on the hero image ─────── */

.page-top { position: absolute; inset-inline: 0; top: 0; z-index: 30; }
.site-head { background: transparent; border-bottom: 0; }

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 60px;
}
.nav--left { justify-self: start; }
.wordmark { justify-self: center; }
.head-actions { justify-self: end; display: flex; align-items: center; gap: var(--s4); }

.nav-link {
  display: none; align-items: center; min-height: 44px;
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  color: var(--ink-2);
  transition: color var(--t-micro) var(--ease-state);
}
.nav-link:hover { color: var(--ink); }

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  padding-block: 6.5rem var(--s7);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { position: absolute; inset: 0; }
.hero__media img,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
}

/* From 60rem up the hero shows the ENTIRE frame rather than a crop of it.
   `cover` fills the box by throwing pixels away — at a 1920x860 hero that was
   20% of the footage, and the composition was being cut by the viewport rather
   than by anyone's choice. `contain` keeps all of it.

   Below this the hero is portrait or near-square and `contain` would leave more
   surround than picture: a phone running the 9:16 cut would shrink it to a band
   about a fifth of the hero, and an 820px tablet gave up half its height to
   fill. Those keep `cover`, which is what their crops are framed for. */
@media (min-width: 60rem) {
  /* `.hero:not(.hero--device)` on purpose. The treatment pages reuse
     `.hero__media`, so an unscoped rule would contain their modality clip
     inside a wider hero and fill the exposed bands with the home page's
     cryotherapy poster — a laser page showing blurred cryo imagery beside its
     own footage. They keep `cover`, which their 736x400 media is framed for. */
  .hero:not(.hero--device) .hero__media img,
  .hero:not(.hero--device) .hero__video { object-fit: contain; object-position: 50% 50%; }

  /* The surround. A blurred, over-scaled copy of the same frame, so the hero
     stays edge to edge and the letterbox reads as depth of field rather than
     two black bars. It is the poster, not a second video: one decode, and it
     is already loaded as the LCP element. */
  .hero:not(.hero--device) .hero__media::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: url('img/hero-loop-poster.webp') center / cover no-repeat;
    filter: blur(48px) saturate(.8) brightness(.45);
    transform: scale(1.15);
  }
}

/* The background loop sits ON the still, never instead of it. The still is the
   LCP element and stays the floor: it is what remains under reduced motion, on
   a narrow screen, on save-data, and if the video never decodes. The video only
   fades up once it has actually started playing, so a failure is invisible. */
.hero__video {
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-media) var(--ease-entrance);
}
.hero__video.is-playing { opacity: 1; }

/* Two scrims: a vertical one so the type sits on near-solid ground, and a
   horizontal one so the left column stays readable over the bright plume. */
/* The scrim must sit ABOVE the img inside .hero__media's stacking context.
   A negative z-index here puts it behind the photo — the whole group is
   already pushed back by .hero__media's own z-index. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      rgba(10,16,23,.97) 0%, rgba(10,16,23,.94) 30%,
      rgba(10,16,23,.66) 55%, rgba(10,16,23,.30) 100%),
    linear-gradient(to top,
      var(--ground) 0%, rgba(10,16,23,.58) 30%,
      rgba(10,16,23,.34) 68%, rgba(10,16,23,.82) 100%);
}

/* Portrait: the horizontal ramp above is tuned for the 16:9 frame, where the
   copy sits left and the plume right. On a phone the copy spans the full width,
   so that ramp only crushes the video against the left edge and shows nothing.
   A flat veil plus a vertical anchor keeps the type on solid ground while the
   chamber actually reads behind it. Re-measured, not assumed — see below. */
@media (orientation: portrait) {
  .hero__scrim {
    background:
      linear-gradient(rgba(10,16,23,.50), rgba(10,16,23,.50)),
      linear-gradient(to top,
        var(--ground) 0%,
        rgba(10,16,23,.70) 26%,
        rgba(10,16,23,.28) 55%,   /* the window the chamber reads through */
        rgba(10,16,23,.82) 72%,
        rgba(10,16,23,.94) 100%); /* the accent eyebrow sits up here and it has
                                     the least contrast headroom on the page:
                                     #3B8FE0 is only 5.7:1 on flat ground, so a
                                     lighter top costs the floor before it costs
                                     anything else */
  }
}

.hero__inner { display: grid; gap: var(--s6); align-items: end; }
.hero .label--accent { margin-bottom: var(--s4); }

.hero h1 {
  font-size: clamp(2.35rem, 1.5rem + 5.4vw, 5.4rem);
  line-height: .98;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.hero h1 em {
  display: inline-block;
  font-size: 1.08em;          /* the serif runs optically small beside the sans */
  letter-spacing: -0.01em;
}

.hero .lead {
  margin-top: var(--s5);
  font-size: var(--step-0); line-height: 1.5;
  color: var(--ink-2); max-width: 40ch;
}

/* Glass cards. Opacity is high enough that text contrast is against a known
   colour rather than whatever pixels sit behind it. */
.hero__cards { display: grid; gap: var(--s4); align-content: end; }
.glass {
  padding: var(--s5);
  border: 1px solid rgb(var(--ink-rgb) / .14);
  border-radius: 3px;
  background: rgba(10,16,23,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass__title {
  font-weight: 700; font-size: var(--step-0);
  margin-bottom: var(--s2); color: var(--ink);
}
.glass__body { font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); }

/* ── Strip under the hero ─────────────────────────────────── */

.strip { border-block: 1px solid var(--rule); background: var(--ground-2); }
.strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s5);
  padding-block: var(--s5);
}
.strip__proof {
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: var(--step--1); color: var(--ink-2); max-width: none;
}
.strip__score {
  font-size: var(--step-3); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.pills li {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--rule); border-radius: 100px;
  font-size: var(--step--2); color: var(--ink-2);
  letter-spacing: .04em; text-transform: uppercase;
}

.btn--light { background: var(--ink); color: var(--ground); }
.btn--light:hover { background: #FFFFFE; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgb(var(--ink-rgb) / .34);
}
.btn--ghost:hover { background: rgb(var(--ink-rgb) / .08); border-color: var(--ink-2); }

/* ── Promo (solid bar above the overlaid nav) ─────────── */

.promo {
  background: var(--accent); color: var(--ground);
  font-size: var(--step--1); font-weight: 500;
}
.promo__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 var(--s3); padding-block: 0; text-align: center;
  font-size: var(--step--2); line-height: 1.35;
}
.promo p { max-width: none; }
.promo__detail { display: none; }
.promo__link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ground); font-weight: 600;
  text-decoration: underline; text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--t-micro) var(--ease-state),
              opacity var(--t-micro) var(--ease-state);
}
.promo__link:hover { text-decoration-thickness: 2px; opacity: .84; }

/* .site-head and .head-inner are defined with the overlaid nav above. */

.wordmark {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; min-height: 44px;
  transition: opacity var(--t-micro) var(--ease-state);
}
.wordmark:hover { opacity: .74; }
.wordmark__mark { width: 34px; height: 34px; object-fit: contain; }
.wordmark__text {
  font-family: "Public Sans", sans-serif; font-weight: 700;
  font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.15;
}
.wordmark__text span { display: block; color: var(--ink-3); }

.nav { display: none; gap: var(--s6); }
.nav a {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-micro) var(--ease-state),
              border-color var(--t-micro) var(--ease-state);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.head-cta { display: none; min-height: 44px; padding-inline: var(--s4); font-size: var(--step--1); }
.head-actions .nav-link--tel { display: inline-flex; }   /* the mobile action */

/* ── Readout — the signature device ───────────────────── */

.readout { display: grid; gap: var(--s6); margin: 0; }
.readout--row { margin-top: var(--s9); }
/* The hairline is a pseudo-element rather than a border so it can draw itself
   as the figure enters (see .reveal--figure). Defaults to scaleX(1), so it is
   a plain rule with JS off. */
.reading { position: relative; padding-top: var(--s3); }
.reading::before {
  content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 1px; background: var(--rule);
}
.reading dt { margin-bottom: var(--s2); }
.reading__fig {
  margin: 0;
  font-family: "Public Sans", sans-serif;
  font-size: var(--step-3); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent);
}
.reading__fig span { font-size: var(--step-1); color: var(--ink-2); }
.reading__fig--text { color: var(--ink); font-size: var(--step-2); }

.readout--band {
  margin-top: var(--s9); padding-top: var(--s7);
  border-top: 1px solid var(--rule);
}
.readout--band .reading { padding-top: 0; }
.readout--band .reading::before { display: none; }   /* the band carries one rule for all three */
.readout--band .reading__fig { font-size: var(--reading); }

/* Shared lead paragraph (the hero overrides size/measure itself). */
.lead {
  margin-top: var(--s6); font-size: var(--step-1);
  line-height: 1.5; color: var(--ink-2); max-width: 42ch;
}

/* ── Section heads ────────────────────────────────────── */

.sec-head { margin-bottom: var(--s9); }
.sec-head .label { margin-bottom: var(--s4); }
.sec-lead {
  margin-top: var(--s5); font-size: var(--step-1);
  line-height: 1.55; color: var(--ink-2); max-width: 46ch;
}
.sec-head--wide h2 { max-width: 22ch; }

/* ── Compare ──────────────────────────────────────────── */

.compare { padding-block: var(--band-wide); border-top: 1px solid var(--rule); }
.compare__cols { display: grid; gap: var(--s8); }
.col .label { padding-bottom: var(--s3); border-bottom: 1px solid var(--ink-3); }
.col--arc .label { border-bottom-color: var(--accent); }

.rule-list { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.rule-list li {
  padding-block: var(--s4); border-bottom: 1px solid var(--rule);
  color: var(--ink-2); position: relative; padding-left: var(--s6);
}
.rule-list li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: 12px; height: 1px; background: var(--ink-3);
}
.rule-list--arc li { color: var(--ink); }
.rule-list--arc li::before { background: var(--accent); }

/* ── Beliefs ──────────────────────────────────────────── */

.beliefs { padding-block: var(--band-tight) var(--band-base); }
.beliefs__grid { display: grid; gap: var(--s8); }
.beliefs__list { list-style: none; margin: 0; padding: 0; }
.belief {
  display: grid; gap: var(--s4);
  padding-block: var(--s7); border-top: 1px solid var(--rule);
}
.belief:last-child { border-bottom: 1px solid var(--rule); }
.belief__num {
  font-family: "Public Sans", sans-serif;
  font-size: var(--step-4); font-weight: 700; line-height: .85;
  letter-spacing: -0.04em; color: var(--accent);
}
.belief h3 { margin-bottom: var(--s4); max-width: 24ch; }
.belief p { color: var(--ink-2); }

/* ── Protocol ─────────────────────────────────────────── */

.protocol { padding-block: var(--band-wide); background: var(--ground-2); }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl {
  position: relative;
  display: grid; gap: var(--s3);
  padding-block: var(--s6);
}
/* The one signature moment on the page: each protocol rule draws itself
   left to right as the section arrives, staggered, once. Transform only. */
.tl::before {
  content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 1px; background: var(--rule);
  transform: scaleX(1); transform-origin: left center;
}
/* The draw itself is `.reveal--line` — see the Reveal block. */
.tl:last-child::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 1px; background: var(--rule);
}
.tl__when { color: var(--accent); }
.tl__body h3 { margin-bottom: var(--s3); }
.tl__body p { color: var(--ink-2); }

/* ── Tools ────────────────────────────────────────────── */

.tools { padding-block: var(--band-base); }
.tool {
  display: grid; gap: var(--s6);
  padding-block: var(--s8); border-top: 1px solid var(--rule);
}
.tool:last-of-type { border-bottom: 1px solid var(--rule); }
/* The clip is what makes the hover scale read as the photo settling inside a
   frame rather than the whole block growing. */
.tool__media { margin: 0; overflow: hidden; border-radius: 2px; }
.tool__media img {
  width: 100%; border-radius: 2px; border: 1px solid var(--rule);
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-media) var(--ease-entrance);
}
.tool:hover .tool__media img { transform: scale(1.03); }

/* Tool motion layers. Same contract as the hero loop: the photograph is the
   floor, the clip layers over it and only fades up once it has actually
   started playing, so every bail-out is invisible rather than a blank frame.
   The clip inherits the hover scale from its own rule so a row still reads as
   one object under the cursor. */
.tool__media { position: relative; }
.tool__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--rule);
  opacity: 0;
  transition: opacity 900ms ease, transform var(--t-media) var(--ease-entrance);
}
.tool__video.is-playing { opacity: 1; }
.tool:hover .tool__video { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .tool__video { transition: none; }
}
.tool__idx { color: var(--accent); }
.tool__body h3 { margin: var(--s3) 0 var(--s4); }
.tool__body p { color: var(--ink-2); }
.tool__out {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink); font-weight: 500;
}

/* ── Evidence charts ──────────────────────────────────────
   Single series throughout, so no legend box is needed — each
   figure's heading names what is plotted. Values are direct-labelled
   rather than inferred from the bar, and every figure carries its
   source. Marks are thin with a recessive track; grid stays quiet.
   ─────────────────────────────────────────────────────── */

.evidence { padding-block: var(--band-wide); background: var(--ground-2); }
.evidence__grid { display: grid; gap: var(--s9); margin-top: var(--s9); }
/* Grid items default to min-width:auto and refuse to shrink below their
   content, which pushes long labels past the viewport. */
.evidence__grid > *, .bar-row, .chart { min-width: 0; }
.bar-row__label, .bar-row__meta, .chart h3 { overflow-wrap: break-word; }

.chart { margin: 0; }
.chart figcaption { margin-bottom: var(--s6); }
.chart h3 { margin-bottom: var(--s3); }
.chart__note { color: var(--ink-2); font-size: var(--step--1); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.bar-row { display: grid; gap: var(--s2); }
.bar-row__label { font-weight: 600; }
.bar-row__meta { font-size: var(--step--1); color: var(--ink-3); }

.bar-track {
  display: block; height: 10px; border-radius: 2px;
  background: var(--grid);
}
.bar {
  display: block; height: 100%; width: var(--pct, 0%);
  background: var(--series-1);
  border-radius: 2px;                 /* 2px rounded data-end */
}
.bar--none { background: repeating-linear-gradient(
    135deg, var(--rule) 0 6px, transparent 6px 12px); width: 100%; }

.bar-row__val {
  font-family: "Public Sans", sans-serif;
  font-weight: 700; font-size: var(--step-1); line-height: 1;
  color: var(--ink);
}
.bar-row__val--muted { color: var(--ink-3); font-size: var(--step-0); }

.chart__src {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2); color: var(--ink-3); max-width: none;
}
.chart__src .label { margin-bottom: var(--s2); }
.srcs { list-style: none; margin: 0; padding: 0; }
.srcs li { border-bottom: 1px solid var(--rule); }
.srcs li:last-child { border-bottom: 0; }
/* Citation links are tap targets — block-level so the hit area is the full row. */
.srcs a {
  display: flex; align-items: center; min-height: 44px;
  padding-block: var(--s2); color: var(--ink-2);
  font-size: var(--step--1); line-height: 1.4;
}
.srcs a:hover { color: var(--ink); }

.caveat {
  margin-top: var(--s8); padding: var(--s6);
  border-left: 2px solid var(--accent); background: var(--ground);
  color: var(--ink-2); max-width: 60ch;
}
.caveat strong { color: var(--ink); }

/* Accessible table view of the same numbers. */
.chart__table { margin-top: var(--s5); }
.chart__table summary {
  cursor: pointer; font-size: var(--step--1); color: var(--ink-3);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--t-micro) var(--ease-state);
}
.chart__table summary:hover { color: var(--ink); }
.chart__table table { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.chart__table th, .chart__table td {
  text-align: left; padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule); font-size: var(--step--1);
}
.chart__table th { color: var(--ink-3); font-weight: 600; }
.chart__table td { color: var(--ink-2); }

/* Hero figure — ARC's own outcomes. Visually dominant over the published
   findings below it, but carries its own disclaimer so the two kinds of
   claim can never be read as one. */
.chart--hero {
  margin-top: var(--s9); padding: var(--s7);
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--ground);
}
.chart--hero figcaption { margin-bottom: var(--s7); }
.chart--hero .label { margin-bottom: var(--s3); }
.bars--hero { gap: var(--s7); }
.bar--tall { height: 100%; }
/* Second validated series, used only where two things are compared.
   Each bar is direct-labelled, so no legend box is needed. */
.bar--alt { background: var(--series-2); }
.pair { display: grid; gap: var(--s3); }
.pair__row { display: grid; gap: var(--s2); min-width: 0; }
.pair__key { font-size: var(--step--1); color: var(--ink-2); }
.bars--hero .bar-track { height: 14px; }
.bar-row__val--big {
  font-size: var(--reading); line-height: 1; letter-spacing: -0.035em;
  color: var(--accent);
}
.bar-row__val--big span {
  font-size: var(--step-1); letter-spacing: 0; color: var(--ink-2);
  font-family: "Public Sans", sans-serif; font-weight: 500;
}
.chart__disclaimer {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-3); max-width: 62ch;
}
/* Prose-length readings stack; the band grid is for short figures only. */
.readout--stack { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
.readout--stack .reading { border-top: 1px solid var(--rule); padding-top: var(--s3); min-width: 0; }
.readout--stack .reading__fig--text {
  font-size: var(--step-1); line-height: 1.3; color: var(--ink);
  overflow-wrap: break-word;
}

.chart__note--foot {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* ── Oversized wordmark ───────────────────────────────────
   The reference closes on the brand at extreme scale. Clipped to the
   viewport so it reads as a mark rather than a heading.
   ─────────────────────────────────────────────────────── */

.bigmark {
  overflow: hidden; padding-top: var(--s8); padding-bottom: var(--s2);
  border-top: 1px solid var(--rule);
  line-height: .78;
}
.bigmark__text {
  display: block; text-align: center; white-space: nowrap;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(3.5rem, 15.5vw, 15rem);
  letter-spacing: -0.03em;
  background: linear-gradient(102deg,
    var(--series-1) 0%, #4F9BE8 22%, var(--series-2) 44%, #7FC4F0 66%, var(--series-1) 88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Instrument Serif italic has deep descenders; clipping the 'y' reads
     as a rendering bug rather than a crop. */
  padding-bottom: .19em;
}

.legal { border-top: 1px solid var(--rule); }
.legal__inner {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; padding-block: var(--s5);
}
.legal p { font-size: var(--step--2); color: var(--ink-3); max-width: none; }

/* ── Results ──────────────────────────────────────────── */

.results { padding-block: var(--band-base); border-top: 1px solid var(--rule); }
.story {
  padding: var(--s7); border: 1px solid var(--rule);
  background: var(--ground-2); border-radius: 2px;
}
.story__cols { display: grid; gap: var(--s7); margin-top: var(--s6); }
.story__note {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-3);
  max-width: 74ch;              /* was unbounded and ran to 122ch */
}

.quotes { display: grid; gap: var(--s6); margin-top: var(--s8); }
.quote {
  margin: 0; padding-top: var(--s5); border-top: 1px solid var(--rule);
}
.quote p { color: var(--ink-2); }
.quote--lead p {
  font-family: "Public Sans", sans-serif;
  font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink); font-weight: 600; max-width: 24ch;
}
.quote footer { margin-top: var(--s4); }
.quote cite {
  font-style: normal; font-weight: 600; color: var(--ink);
}
.quote footer span {
  display: inline-block; margin-left: var(--s3);
  font-size: var(--step--1); color: var(--ink-3);
}

/* ── Team ─────────────────────────────────────────────── */

.team { padding-block: var(--band-tight) var(--band-base); }
.team__grid { display: grid; gap: var(--s7); }
.team__names {
  font-family: "Public Sans", sans-serif;
  font-weight: 700; font-size: var(--step-2); color: var(--ink);
  margin-bottom: var(--s5); letter-spacing: -0.015em;
}
.team__body p + p { margin-top: var(--s5); }
.team__body p { color: var(--ink-2); }

/* ── FAQ ──────────────────────────────────────────────── */

.faq { padding-block: var(--band-base); border-top: 1px solid var(--rule); }
.faq__grid { display: grid; gap: var(--s7); }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-block: var(--s5); min-height: 44px;
  font-family: "Public Sans", sans-serif;
  font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em;
  transition: color var(--t-micro) var(--ease-state);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "+"; color: var(--accent); font-size: var(--step-2);
  line-height: 1; flex: none;
  transition: transform var(--t-small) var(--ease-state);
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover { color: var(--accent); }
.faq__list details p {
  padding-bottom: var(--s6); color: var(--ink-2);
}

/* ── Closing band — the one palette inversion ─────────── */

.close {
  padding-block: var(--band-wide);
  background: var(--ink); color: var(--ground);
}
.close h2 { color: var(--ground); max-width: 16ch; }
.close h2 em { color: #1F6FC4; }
.close p {
  margin-top: var(--s6); font-size: var(--step-1);
  line-height: 1.55; color: #4A5766; max-width: 48ch;
}

/* ── Footer ───────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--rule); padding-block: var(--s9); }
.foot-inner { display: grid; gap: var(--s8); }
.foot__logo { width: 168px; height: auto; margin-bottom: var(--s5); }
.foot__addr { color: var(--ink-2); line-height: 1.7; }
.foot__list { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.foot__list li { color: var(--ink-2); }
/* Footer links are tap targets too — enforced by selector so a new one
   can't ship short. */
.foot__list li a, .foot__addr a {
  display: inline-flex; align-items: center; justify-content: flex-start;
  min-height: 44px; min-width: 44px;   /* short labels like "FAQ" need the width too */
}
.foot__list li:not(:has(a)) { padding-block: var(--s3); }

/* ── Reveal ───────────────────────────────────────────────
   Five entrance types, assigned by what the element IS. A single uniform
   fade-and-rise on all 47 targets is what made the page read as generic.
   Every mechanic here composites (transform + opacity only).
   The hidden state is gated on .js so a script failure can never blank
   the page — see script.js. */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--t-enter) var(--ease-entrance),
              transform var(--t-enter) var(--ease-entrance);
}

/* Rules extend rather than fade. Applies to any reveal target whose ::before is
   a hairline — the protocol timeline rows and the reading figures both are, so
   the mechanic is defined once here rather than three times down the file. */
.js .reveal--line::before,
.js .reveal--figure::before { transform: scaleX(0); transform-origin: left center; }
.js .reveal--line.is-visible::before {
  transform: scaleX(1);
  transition: transform var(--t-draw) var(--ease-entrance);
}

/* Readout figures are heavy, so they travel less and their rule draws under
   them — the reading motif assembling itself rather than arriving whole. */
.js .reveal--figure { opacity: 0; transform: translateY(10px); }
.js .reveal--figure.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--t-enter) var(--ease-entrance),
              transform var(--t-enter) var(--ease-entrance);
}
.js .reveal--figure.is-visible::before {
  transform: scaleX(1);
  transition: transform var(--t-bar) var(--ease-entrance) 120ms;
}

/* Photographs settle into their frame instead of sliding. Driven by the
   parent block's entrance, not their own observer target, so the photo and
   the copy beside it are guaranteed to arrive together. */
.js .reveal--media img { transform: scale(1.04); }
.js .reveal--media.is-visible img {
  transform: none;
  transition: transform var(--t-media) var(--ease-entrance);
}

/* ── Bars draw their own value ────────────────────────────
   A bar whose length IS the datum should draw that length rather than
   appear at it. --i is set per row by script.js for the stagger. */

.js .chart .bar { transform: scaleX(0); transform-origin: left center; }
.js .chart.is-visible .bar {
  transform: scaleX(1);
  transition: transform var(--t-bar) var(--ease-entrance);
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* The dashed "no data" bar has no value to draw — it just appears. */
.js .chart .bar--none { transform: none; }

/* Reading a row should single it out. Only the bars recede — dimming the
   whole row would drop its label and value below the contrast floor, and
   this audience is the reason that floor is set where it is. */
.bar { transition: opacity var(--t-small) var(--ease-state); }
.bars:hover .bar-row:not(:hover) .bar { opacity: .4; }
.bar-track {
  transform-origin: center;
  transition: transform var(--t-small) var(--ease-state);
}
.bar-row:hover .bar-track { transform: scaleY(1.4); }

/* ── Hero load sequence ───────────────────────────────────
   The hero does not wait for scroll. Six steps at 90ms, settled by ~1.0s,
   headline legible at 200ms. Runs on load, once. */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* The headline rises WITHOUT fading, deliberately. It is the LCP element, and
   an element at opacity 0 has not been painted — fading it in would push LCP
   from 148ms out past the end of the sequence. A translated element is painted,
   so this keeps the metric and still reads as arriving. */
@keyframes hero-rise-opaque {
  from { transform: translateY(18px); }
  to   { transform: none; }
}

/* The scrim is NOT animated. It is load-bearing for contrast — see the Hero
   composition note in DIRECTION.md — so fading it in would leave the type on a
   bright photograph for the first half-second. Measured: at 180ms the eyebrow
   and nav were illegible. It renders at full strength from the first paint. */

.js .hero__body > *,
.js .hero__cards > * {
  animation: hero-rise var(--t-enter) var(--ease-entrance) both;
}
.js .hero__body > h1 { animation-name: hero-rise-opaque; }

.js .hero__body > :nth-child(1) { animation-delay:  60ms; }
.js .hero__body > :nth-child(2) { animation-delay: 120ms; }
.js .hero__body > :nth-child(3) { animation-delay: 220ms; }
.js .hero__body > :nth-child(4) { animation-delay: 310ms; }
.js .hero__cards > :nth-child(1) { animation-delay: 400ms; }
.js .hero__cards > :nth-child(2) { animation-delay: 480ms; }

/* ── Scroll-linked, progressive enhancement ───────────────
   animation-timeline runs these on the compositor with no scroll handler.
   Unsupported means they simply don't run; nothing depends on them.
   Duration stays `auto` — a scroll timeline supplies its own progress. */

/* Fixed to the viewport, not to .page-top — the header is absolutely
   positioned so it can overlay the hero photo, which means it scrolls away
   and could not carry a progress indicator. z-index sits under .skip (200). */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  z-index: 50; pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hero-depth    { from { transform: scale(1); }  to { transform: scale(1.06); } }

  .js .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  /* Scale, not translate: a divergent translate reads as sliding, a slow
     scale reads as depth. Clipped by .hero's overflow: hidden. */
  .js .hero__media img,
  .js .hero__video {
    animation: hero-depth linear both;
    animation-timeline: view(block);
    animation-range: contain 0% exit 100%;
  }
}

/* ═══ Breakpoints — derived from where content breaks ═══ */

@media (min-width: 40rem) {
  .readout--row { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s8); }
  .readout--band { grid-template-columns: auto auto 1fr; gap: var(--s9); align-items: end; }
  .compare__cols { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .story__cols { grid-template-columns: 1fr 1fr; }
  .belief { grid-template-columns: 4.5rem 1fr; gap: var(--s6); }
  .tl { grid-template-columns: 9rem 1fr; gap: var(--s6); align-items: baseline; }
  .foot-inner { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s7); }
}

@media (min-width: 60rem) {
  .nav { display: flex; }
  .nav-link--tel { display: inline-flex; }
  .head-inner { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 78px; }
  .head-cta { display: inline-flex; }
  /* Tracks the footage's own 16:9 so the whole frame fits with as little
     surround as possible. Capped at 92vh so a wide monitor does not push the
     CTAs below the fold, floored so a short window keeps room for the copy. */
  .hero { padding-block: 9rem var(--s9); min-height: clamp(30rem, 56.25vw, 92vh); }

  /* The scrim has to be re-tuned wherever the framing changed. `contain` puts
     the chamber's brighter upper region behind the eyebrow label, where `cover`
     had zoomed a darker part of the frame into that spot. Measured on this
     page: the label read 4.27:1 before this change and 3.88:1 after `contain`,
     both under the 4.5:1 body threshold. Darkening the blurred surround does
     nothing, because the label sits over the picture and not over the fill.
     Declared here, after the base rule, so it wins at equal specificity —
     placed earlier it silently does nothing. */
  .hero:not(.hero--device) .hero__scrim {
    background:
      linear-gradient(to right,
        rgba(10,16,23,.98) 0%, rgba(10,16,23,.96) 35%,
        rgba(10,16,23,.74) 58%, rgba(10,16,23,.38) 100%),
      linear-gradient(to top,
        var(--ground) 0%, rgba(10,16,23,.66) 30%,
        rgba(10,16,23,.58) 68%, rgba(10,16,23,.94) 100%);
  }
  .hero__inner { gap: var(--s8); }
  .hero .lead { font-size: var(--step-1); }
  .promo__detail { display: inline; }
  .head-inner { flex-wrap: nowrap; }
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 20rem); gap: var(--s10); }
  /* Was .8/1.2 with a 7rem gap, which squeezed the lead to 33ch — below
     the ~45ch floor where the eye starts jumping lines. */
  .beliefs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s9); }
  .beliefs .sec-head { margin-bottom: 0; position: sticky; top: var(--s8); align-self: start; }
  .team__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s9); }
  .team .sec-head { margin-bottom: 0; }
  .faq__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: var(--s9); }
  .faq .sec-head { margin-bottom: 0; position: sticky; top: var(--s8); align-self: start; }
  .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s9); align-items: center; }
  .tool--flip .tool__media { order: 2; }
  .quotes { grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s9); }
  /* Two figures side by side — a full-width 1300px bar is too long to read. */
  .evidence__grid { grid-template-columns: 1fr 1fr; gap: var(--s10); }
  .quote--lead { grid-column: 1 / -1; }
  .story { padding: var(--s9); }
}

/* ── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Every entrance lands on its final state. The bars matter most: a
     collapsed scaleX(0) would erase the data rather than merely still it. */
  .js .reveal,
  .js .reveal--figure,
  .js .reveal--media { opacity: 1; transform: none; }
  .js .reveal--line,
  .js .reveal--figure::before,
  .js .chart .bar,
  .js .reveal--media img { transform: none; }

  /* Scroll-linked pair off outright — `animation: none` zeroes the computed
     duration, which `animation-duration: .01ms` alone would not do for a
     scroll timeline (its duration is `auto`). */
  .js .progress,
  .js .hero__media img,
  .js .hero__video,
  .js .hero__body > *,
  .js .hero__cards > * { animation: none !important; }
  /* An autoplaying loop is the exact thing this setting is asking us not to do. */
  .hero__video { display: none; }
  .progress { display: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Treatment pages (cryotherapy.html and its five siblings)

   Generated by scripts/build-device-pages.mjs — edit that, re-run, commit.
   Everything here leans on the classes the home page already defines; this
   block only adds what a single-treatment page needs that the home page has
   no use for.
   ═══════════════════════════════════════════════════════════════════════ */

/* The home page hero carries two glass cards on the right, so its inner grid
   is built for a pair. A treatment hero is one column and can breathe. */
.hero--device { padding-block: 7.5rem var(--s8); min-height: min(82vh, 720px); }
.hero--device .hero__inner { max-width: 46rem; }
.hero--device h1 { max-width: 13ch; }

.crumb {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
  font-size: var(--step--1); color: var(--ink-2);
}
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-hidden] { color: var(--ink-3); }

/* Section rhythm here is deliberately varied, same principle as the home page:
   no two adjacent treatment sections share a padding value. */
.dev-sec { padding-block: var(--s8); }
.dev-sec--lead { padding-block: var(--s9) var(--s7); }
.dev-sec--siblings { padding-block: var(--s9); border-top: 1px solid var(--rule); }
.dev-narrow { max-width: 46rem; }
.dev-note { margin-top: var(--s6); color: var(--ink-2); max-width: 62ch; }

/* ── What an hour costs: the timings clients ask for at the desk ── */
.visit { padding-block: var(--s9); border-top: 1px solid var(--rule); }
.visit .sec-head { max-width: 46rem; }
.visit__list { margin-top: var(--s8); max-width: 46rem; }
.visit__list--apart { margin-top: var(--s7); }
.visit__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
}
.visit__row dt { color: var(--ink); }
.visit__row dt span {
  display: block; margin-top: var(--s2);
  font-size: var(--step--1); color: var(--ink-3);
}
.visit__row dd { color: var(--accent); font-weight: 600; white-space: nowrap; }
/* the sum is the number people actually plan their day around */
.visit__row--sum { border-bottom: 0; padding-top: var(--s5); }
.visit__row--sum dt { color: var(--ink-2); }
.visit__row--sum dd { font-size: var(--step-2); }
.visit__note { margin-top: var(--s6); max-width: 62ch; color: var(--ink-2); font-size: var(--step--1); }

/* ── The unit: what is actually on the floor ───────────────────── */
.dev-sec--unit { border-top: 1px solid var(--rule); }
.dev-unit__body { margin-top: var(--s6); display: grid; gap: var(--s5); max-width: 62ch; }
.dev-unit__body p { color: var(--ink-2); }
/* the first paragraph carries the weight; the rest are the detail behind it */
.dev-unit__body p:first-child { color: var(--ink); font-size: var(--step-1); }
.dev-unit__body em { color: var(--ink); font-style: normal; font-weight: 600; }
/* Two-by-two, at every width. Four readings in a row would orphan the fourth
   under the first, and four across does not fit .dev-narrow (46rem) once the
   labels are as long as "Deepest reach, 1064nm". */
.dev-unit__specs { margin-top: var(--s8); grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s7); }
.dev-unit__src { margin-top: var(--s7); color: var(--ink-3); font-size: var(--step--1); max-width: 62ch; }

.dev-note + .cta-row { margin-top: var(--s7); }

.dev-shot {
  margin: var(--s7) 0 0;
  overflow: hidden; border-radius: 2px;
}
.dev-shot img {
  width: 100%; border-radius: 2px; border: 1px solid var(--rule);
  aspect-ratio: 16 / 10; object-fit: cover;
}

/* The one grid on these pages, and it earns it: six sibling treatments are a
   genuine set, and a visitor who lands here from search needs a way into the
   other five. */
.dev-siblings {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.dev-siblings a {
  display: grid; gap: var(--s3);
  text-decoration: none; color: inherit;
}
.dev-siblings img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--rule); border-radius: 2px;
  transition: transform var(--t-media) var(--ease-entrance);
}
.dev-siblings a:hover img { transform: scale(1.03); }
.dev-siblings__name { font-weight: 600; }
.dev-siblings__spec { color: var(--ink-3); }
.dev-siblings li { overflow: hidden; }

.reading__unit { font-size: .42em; font-weight: 500; letter-spacing: 0; }

/* The route from the home page's tools section into each treatment page. */
.tool__more { margin-top: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  .dev-siblings img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   The evidence instrument — a forest plot, drawn.

   Rendered by evidence.js from evidence-data.js. The reason it is a forest
   plot rather than a bar chart: a bar asserts a result, a forest plot shows
   the result AND the uncertainty around it. On a page asking a sceptic for
   cash, the second is the more persuasive object, and it is the only one that
   can honestly carry a non-significant row.
   ═══════════════════════════════════════════════════════════════════════ */

.ev { margin: 0; }
.ev__cap { max-width: 60ch; }
.ev__cap h2 { margin: var(--s3) 0 var(--s4); }

.ev__key {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin-top: var(--s7); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-3);
}
.ev__key-item { display: inline-flex; align-items: center; gap: var(--s3); }
.ev__key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ev__key-bar { width: 30px; height: 2px; background: var(--ink-3); }
.ev__key-null { width: 1px; height: 14px; background: var(--ink-2); }

.ev__rows { list-style: none; margin: 0; padding: 0; }

.ev-row { border-bottom: 1px solid var(--rule); }
.ev-row__hit {
  display: grid; align-items: center; gap: var(--s4);
  grid-template-columns: minmax(11rem, 1.1fr) minmax(8rem, 1.6fr) minmax(6.5rem, auto);
  width: 100%; padding: var(--s5) 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: opacity var(--t-small) var(--ease-state);
}
.ev-row__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ev__rows:hover .ev-row:not(:hover) .ev-row__hit { opacity: .45; }

.ev-row__measure { font-size: var(--step--1); line-height: 1.4; color: var(--ink); }
.ev-row--ns .ev-row__measure { color: var(--ink-2); }

/* the track */
.ev-row__plot { position: relative; height: 26px; }
.ev-row__null {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--ink-2);
}
/* the interval: scales out from the null line rather than sliding in */
.ev-row__ci {
  position: absolute; top: 50%; left: var(--left); width: var(--w);
  height: 2px; margin-top: -1px; background: var(--ink-3);
  transform: scaleX(0);
  transform-origin: calc((var(--mid) - var(--left)) / var(--w) * 100%) 50%;
}
.ev-row__ci::before,
.ev-row__ci::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 10px;
  background: var(--ink-3);
}
.ev-row__ci::before { left: 0; }
.ev-row__ci::after { right: 0; }
/* the estimate */
.ev-row__dot {
  position: absolute; top: 50%; left: var(--mid);
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent);
  transform: scale(0);
}
.ev-row--ns .ev-row__ci,
.ev-row--ns .ev-row__ci::before,
.ev-row--ns .ev-row__ci::after { background: var(--ink-3); opacity: .6; }
.ev-row--ns .ev-row__dot { background: var(--ink-2); }

.ev-row__val {
  font-weight: 600; font-size: var(--step--1); text-align: right;
  display: grid; gap: 2px;
}
.ev-row--ns .ev-row__val { color: var(--ink-2); font-weight: 500; }
.ev-row__ci-text {
  font-weight: 400; font-size: var(--step--2); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* the draw */
.ev__rows.is-drawn .ev-row__ci {
  transform: scaleX(1);
  transition: transform 760ms var(--ease-entrance);
  transition-delay: calc(var(--i) * 110ms + 60ms);
}
.ev__rows.is-drawn .ev-row__dot {
  transform: scale(1);
  transition: transform 420ms var(--ease-entrance);
  transition-delay: calc(var(--i) * 110ms + 620ms);
}

/* a dot with no whisker: the estimate exists, the interval was never published */
.ev-row--noci .ev-row__dot { box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .16); }

.ev-row__detail {
  padding: 0 0 var(--s5);
  max-width: 62ch; color: var(--ink-2); font-size: var(--step--1);
}
.ev-row__detail p + p { margin-top: var(--s3); }
.ev-row__design { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.ev-row__dir { color: var(--ink-3); }
.ev-flag {
  color: var(--ink); background: var(--ground-2);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 2px 8px; font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .1em;
}

.ev__scale-note,
.ev__also,
.ev__disclaimer { max-width: 66ch; color: var(--ink-2); font-size: var(--step--1); }
.ev__scale-note { margin-top: var(--s5); color: var(--ink-3); }
.ev__also { margin-top: var(--s6); }
.ev__disclaimer {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--rule); color: var(--ink-3);
}
.ev__src { margin-top: var(--s7); }
.ev__src-meta { color: var(--ink-3); font-size: var(--step--2); display: block; margin-top: 2px; }
.ev__src .srcs li + li { margin-top: var(--s4); }

.ev-table { margin-top: var(--s6); }
.ev-table summary { cursor: pointer; color: var(--ink-2); font-size: var(--step--1); }
.ev-table summary:hover { color: var(--ink); }
.ev-table table { width: 100%; border-collapse: collapse; margin-top: var(--s5); font-size: var(--step--2); }
.ev-table th, .ev-table td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ev-table thead th { color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 40rem) {
  .ev-row__hit { grid-template-columns: 1fr auto; gap: var(--s3) var(--s4); }
  .ev-row__measure { grid-column: 1 / -1; }
  .ev-row__plot { grid-column: 1; }
  .ev-row__val { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-row__ci { transform: scaleX(1); }
  .ev-row__dot { transform: scale(1); }
  .ev__rows.is-drawn .ev-row__ci,
  .ev__rows.is-drawn .ev-row__dot { transition: none; }
  .ev-row__hit { transition: none; }
  .ev__rows:hover .ev-row:not(:hover) .ev-row__hit { opacity: 1; }
}

/* ── Offer rewrite: who, prices, matrix, blank score ─────────── */

.who { padding-block: var(--band-wide); border-top: 1px solid var(--rule); }
.who__grid { display: grid; gap: var(--s7); }
.who__card { padding-top: var(--s5); border-top: 1px solid var(--rule); }
.who__card h3 { margin-bottom: var(--s3); max-width: 22ch; }
.who__card p { color: var(--ink-2); }
.who__more { margin-top: var(--s7); color: var(--ink-2); max-width: 58ch; }

.offer { padding-block: var(--band-wide); background: var(--ground-2); }
.price-grid { display: grid; gap: var(--s7); margin-top: var(--s8); }
.price { padding-top: var(--s6); border-top: 1px solid var(--rule); }
.price__amt {
  margin: var(--s3) 0 0;
  font-family: "Public Sans", sans-serif;
  font-size: var(--reading); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent);
}
.price__amt span { font-size: 0.42em; font-weight: 500; color: var(--ink-2); }
.price__note { margin-top: var(--s4); color: var(--ink-2); max-width: 52ch; }
.price--side .price__amt { font-size: var(--step-3); }

.matrix { margin-top: var(--s8); }
.matrix__row {
  display: grid; gap: var(--s3);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule);
}
.matrix__goal { font-weight: 600; }
.matrix__lead { color: var(--ink-2); }


.close__addr { margin-top: var(--s5); color: #4A5766; }

.article { padding-block: var(--band-base) var(--band-wide); }
.article__meta {
  color: var(--ink-3); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase;
}
.article__body { max-width: 62ch; }
.article__body p { margin-top: var(--s5); color: var(--ink-2); }
.article__body h2 { margin-top: var(--s8); }
.article__body ul { margin: var(--s5) 0 0; padding-left: 1.2em; color: var(--ink-2); }
.article__body li + li { margin-top: var(--s3); }
.article-list { list-style: none; margin: 0; padding: 0; }
.article-list li { padding: var(--s6) 0; border-bottom: 1px solid var(--rule); }
.article-list h2 { margin-bottom: var(--s3); }

@media (min-width: 40rem) {
  .who__grid { grid-template-columns: repeat(3, 1fr); }
  .price-grid { grid-template-columns: 1.15fr 1fr; }
  .matrix__row { grid-template-columns: 14rem 1fr; align-items: baseline; }
}