/* FONTS:start — GENERATED by _round2/self-host-fonts.mjs. Do not edit here.
   Archivo and Manrope, latin subset, served from this origin. They used to come
   from fonts.googleapis.com, a render-blocking request to a third party that
   cost about a second of first paint on a phone. Both are SIL OFL. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/manrope-600.woff2') format('woff2')}
/* FONTS:end */
/* Smart Scan v9 — "Aperture Readout" · v10 card revision
   A's calcium world carrying D's specimen readout, told as a deck of cards.
   See the direction contract at the top of index.html. Motion lives in
   assets/js/main.js; every animated property here has a visible default so the
   page is complete without JS.

   NOTE for whoever edits this next: math inside clamp()/calc() REQUIRES
   whitespace around + and -. clamp(2.6rem,1.6rem+3.9vw,5.2rem) is invalid and
   the whole declaration is dropped silently. It has already cost this project a
   full round. Measure computed font sizes; never eyeball rendered type. */

/* Measured, not guessed: at 100px Archivo sets 99.1% of Arial's advance and
   Manrope 101.9%. Small, but it is the difference between type settling and
   type jumping when the webfont lands. These stand in until it does. */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Helvetica Neue");
  size-adjust:99.1%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica Neue");
  size-adjust:101.9%;ascent-override:104%;descent-override:28%;line-gap-override:0%}

/* THE VIEWPORT LOCK, 2026-10-03 (Anthony + Greg, seen on a real iPhone).
   Safari's address bar slides away going down and back going up, and the
   card stack (the cards and the hold between them) resized each time, so the
   page lurched on every change of direction. boot.js measures the screen ONCE,
   before first paint, with the address bar SHOWING (the smallest screen — their
   pick), and writes 1% of it in px to --vhl. Only the card stack is sized in
   --vhl ("lock it only where the cards are"); the rest of the page keeps
   ordinary vh/svh. Re-measures on rotation only. Without JS: svh.
   Sized to the SMALL screen so a dark card never sits under Safari's
   translucent bottom toolbar (iOS 26) — that read as a black band. */
:root{--vhl:1svh}
@supports not (height:1svh){:root{--vhl:1vh}}
:root{
  /* ground — the near-black of a CT background, not pure #000 */
  --bg:#F6F7F9; --bg-2:#EDF0F3; --bg-3:#FFFFFF;
  /* ink — bone, the colour calcium renders on a scan */
  --bone:#0D1117; --bone-2:#4A5560; --bone-3:#5A6470;
  /* the measured thing: bone blowing warm at the densest point */
  --heat:#E8232C; --heat-hi:#B4141C; --heat-deep:#A8151C;
  --line:#DCE1E7; --line-2:#C3CBD4; --line-3:#A9B3BE;
  --ok:#1E7A46;

  /* the ground as raw channels, so one scrim rule works in every world */
  --scrim:246,247,249;
  --accent:232,35,44;   /* the accent as channels, for washes */
  --on-dark:#FF8A90;
  /* the deck ground, and the accent ramp the button is built from */
  --deck:#0B0D10; --deck-rgb:11,13,16;
  --heat-lift:#D2333B; --heat-mid:#C11F27; --heat-dark:#A4151D;
  --heat-pale:#F0B7BA;   /* the accent at the cold ends of the drawn arc */
  /* ink on the dark ground. The tertiary step is deliberately brighter than
     its light-ground twin: on a band it sits over a photograph, and a
     photograph has highlights that paper does not. */
  --ink-deck:#F2F5F8; --ink-deck-2:#C7D0DA; --ink-deck-3:#B4BEC9;
  --heat-lift-h:#DC3D45; --heat-mid-h:#CB262F; --heat-dark-h:#AC1720;      /* the accent, lifted enough to read on a dark card */
  --plane:.96;   /* how solid the copy plane is over the art */
  --edge:13,17,23;

  --measure:66ch;
  --rail-h:74px;
  --r-card:20px;          /* the card radius, measured off the reference pattern */
  --r-panel:16px;
  /* the navy ground of the calcium card (Greg r8 #3) */
  --navy-hi:#16325A;--navy-mid:#0F2444;--navy-lo:#091A31;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--rail-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--bone);
  font:400 18px/1.6 Manrope,"Manrope Fallback",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

h1,h2,h3{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.5rem + 3.8vw,5rem);line-height:.99;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,1.3rem + 2.1vw,3rem);line-height:1.06;letter-spacing:-.028em}
h3{font-size:1.2rem;line-height:1.28;letter-spacing:-.015em}
p{margin:0;max-width:var(--measure)}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);color:var(--bone-2);line-height:1.55}
.small{font-size:.9375rem;color:var(--bone-3)}
.num{font-variant-numeric:tabular-nums}
.em{color:var(--bone);font-weight:500}
/* Manrope ships 400/500/600 here. Left at the browser default, <strong> asks
   for 700 and gets a synthesised smear of 600 instead of a drawn weight. */
strong{font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The chapter marker. Small, tabular, always the same shape. */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;
         font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
         color:var(--bone-3)}
a:focus-visible,button:focus-visible{outline:2px solid var(--heat);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;padding:12px 18px;background:var(--bone);
      color:var(--bg);border-radius:999px}
.skip:focus{left:12px}

/* ── Rail ────────────────────────────────────────────────────────── */
/* The rail rides away on the way down and comes straight back on the way up.
   It is worth 74px, and on a phone 74px is the difference between seeing the
   foot of a deck card and not. The state lives on <html> so the deck can read
   it too; the guards (near the top, menu open, keyboard focus inside) are in
   main.js. Reduced motion keeps the behaviour and drops the slide. */
.rail{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;
      transition:background .4s var(--ease),border-color .4s var(--ease),
                 transform .34s var(--ease)}
/* r9 #1: the header stays visible. The rule that slid it away is gone; the
   .rail-up hooks below are harmless with nothing setting the class. */
@media(prefers-reduced-motion:reduce){
  .rail{transition:background .4s var(--ease),border-color .4s var(--ease)}
}
.rail.is-scrolled{backdrop-filter:blur(16px);
                  -webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.rail .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--rail-h);gap:24px}
/* Greg r5 #1: larger, and the no-byline cut (make-logo.mjs) — the strapline
   had "no hope" of being read at rail size — nor at footer size, so it is gone
   from both; the footer tagline says the same words in type. Under 400px the wordmark and the
   booking button cannot both fit, so a <source> swaps in the heart alone. */
.mark img{display:block;height:clamp(30px,2.7vw,40px);width:auto}
/* Greg r8 #28: the phone rail keeps the full lockup and shortens the button
   instead. The name is what identifies the site; the button can say less. */
.lbl-tight{display:none}
@media(max-width:520px){
  .rail .btn .lbl-wide{display:none}
  .rail .btn .lbl-tight{display:inline}
  .rail .btn{padding:0 22px}
}
@media(max-width:400px){.mark img{height:28px}.mark{min-width:44px;justify-content:flex-start}}
.footer .mark img{height:clamp(34px,3vw,40px)}
.mark{display:inline-flex;align-items:center;min-height:44px;
      font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.035em;
      color:var(--bone);text-decoration:none}

.rail-nav{display:flex;gap:clamp(18px,2.4vw,34px);font-size:.9375rem}
.rail-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
            color:var(--bone-2);text-decoration:none;
            transition:color .25s var(--ease)}
.rail-nav a::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;
                   background:var(--heat);transform:scaleX(0);transform-origin:left;
                   transition:transform .35s var(--ease)}
.rail-nav a:hover{color:var(--bone)}
.rail-nav a.is-here{color:var(--bone)}
.rail-nav a.is-here::after{transform:scaleX(1)}
.rail-end{display:flex;align-items:center;gap:14px}
.rail-phone{display:inline-flex;align-items:center;min-height:44px;
            color:var(--bone-2);text-decoration:none;font-size:.9375rem}
.rail-phone:hover{color:var(--bone)}
@media(max-width:900px){.rail-nav,.rail-phone{display:none}}
.rail-nav,.rail-phone{white-space:nowrap;flex-shrink:0}
.rail.is-compact .rail-nav,.rail.is-compact .rail-phone{display:none}
.rail.is-compact .menu-btn{display:inline-flex}

/* ── Buttons — the pill, carried from the register deliberately ──── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     min-height:56px;padding:0 30px;border-radius:999px;border:1px solid transparent;
     font:500 1rem/1 Manrope,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;
     transition:background .28s var(--ease),border-color .28s var(--ease),
                transform .28s var(--ease),box-shadow .28s var(--ease)}
/* The press is feedback, not decoration, so it has to land under the finger.
   .28s is right for hover and for settling back to rest, but as press timing
   it arrives a beat late — the response band for a press is 100–160 ms. This
   shortens the way IN to the pressed state only; the release still takes the
   .28s above, which reads as the button settling. */
.btn:active{transition-duration:.12s}
/* The secondary is the same object with the light turned down: a surface, not
   an outline, so the two read as siblings rather than as button and link. */
.btn--sm{min-height:44px;padding:0 20px;font-size:.9375rem}

/* The arrow is the one shared micro-motion: it steps forward on hover. */
.arw{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
/* Hover that MOVES something is gated on a real pointer. A touch screen fires
   :hover on tap and then leaves it stuck: tap "Book your scan" on a phone and
   the button stayed lifted until you tapped somewhere else. Pure colour hovers
   below are left ungated — a brief flash under a finger is harmless. */
@media(hover:hover) and (pointer:fine){
.btn:hover .arw,.card--tile:hover .arw,.more:hover .arw{transform:translateX(4px)}
}

/* "Learn more" — the handoff into a real page, one shape everywhere. */
.more{display:inline-flex;align-items:center;gap:9px;margin-top:18px;min-height:44px;
      font-size:.9375rem;font-weight:500;text-decoration:none;
      transition:color .25s var(--ease)}
/* ── Hero: the readout sits in the ring's aperture ───────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(30px,5vw,64px) 0 clamp(64px,9vw,124px)}
/* WIDTH. `min(1420px,152vw)` held a flat 1420px from 934px all the way up, so
   between roughly 934 and 1160 the drawn circle (78.4% of the box = 1113px) was
   WIDER than the viewport and the arc sat just outside the frame — the band the
   client described as "barely visible". A continuous ramp keeps the arc inside
   the frame at every width, with a slight bleed only on the narrowest phones.

   POSITION. Centring on the hero box put the aperture 15–30px BELOW the
   headline, because the hero's padding is deliberately asymmetric (more below
   than above). The offset is exactly half that difference, so it is subtracted
   with the same clamps rather than a magic number: change the padding and the
   ring follows it. Measured against the render at 11 widths — the formula and
   the observed offset agree to the pixel. */
.ring{position:absolute;left:50%;
      top:calc(50% - (clamp(64px,9vw,124px) - clamp(30px,5vw,64px)) / 2);
      translate:-50% -50%;
      width:clamp(520px,118vw,1420px);aspect-ratio:1;pointer-events:none;z-index:0}
.ring svg{width:100%;height:100%;display:block}
.ring-arc{stroke-dasharray:2463;stroke-dashoffset:0}
/* The ring passes behind the copy column; this keeps type on ground rather
   than on a lit arc. Radial so it has no visible edge. */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;inset:-22% -30%;z-index:-1;
  pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:flex;justify-content:center;text-align:center}

.hero-copy{max-width:min(760px,100%)}
.hero h1{max-width:18ch;margin-inline:auto}
.hero .lede{margin-top:24px;max-width:52ch;margin-inline:auto}
.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;justify-content:center}
/* Greg's #3-#5 collapsed the label/value split into one phrase per fact, so
   this is a list of phrases now. The figure inside keeps the display face —
   losing it entirely would flatten the row into three lines of grey text. */
.facts{margin-top:36px;padding:0;border-top:1px solid var(--line);list-style:none;
       display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
.facts li{padding-top:16px;display:flex;align-items:flex-start;justify-content:center;
          gap:8px;font-size:.9375rem;line-height:1.4;color:var(--bone-2);text-align:center}
/* Greg r8 #1: the first two items carry a 17px <b> and the third does not, so
   their 15px words sat a few pixels lower than his. Aligning the row on the
   TEXT BASELINE rather than the top of each box puts all three on one line and
   brings the icons with them. (A zero-width strut does nothing here: inside a
   flex row a ::before becomes a flex item, not part of the text's line box.) */
.facts{align-items:baseline}
.facts li{align-items:baseline}
.facts .ico{flex:none;font-size:1.0625rem;color:var(--line-3);margin-top:1px}
.facts b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
         font-size:1.0625rem;letter-spacing:-.022em;font-variant-numeric:tabular-nums;
         color:var(--bone)}
@media(max-width:559px){
  .facts{grid-template-columns:1fr;gap:0}
  .facts li{justify-content:flex-start;text-align:left;padding-top:12px}
}


/* the specimen — a real readout panel, floating in the aperture */
.specimen{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
          backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.specimen-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
             padding:15px 20px;border-bottom:1px solid var(--line)}
/* Panel chrome, not document structure: these label a widget sitting beside
   an h1, so as headings they skipped a level for anyone navigating by
   heading. They keep the look and stop pretending to be sections. */
.specimen-t,.tline-t{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
  line-height:1.28;letter-spacing:-.015em;color:var(--bone);margin:0}
.specimen-hd .specimen-t{font-size:.9375rem;letter-spacing:-.005em}
.specimen-hd span{font-size:.8125rem;color:var(--bone-2)}
.specimen-body{padding:24px 20px 22px}
.readout{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.readout b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:clamp(4.2rem,2.4rem + 6.4vw,6.2rem);
           line-height:.84;letter-spacing:-.052em;font-variant-numeric:tabular-nums}
.readout-side{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
              padding-bottom:6px}
.readout em{font-style:normal;font-size:.9375rem;color:var(--bone-2);max-width:24ch;line-height:1.45}
/* Scoped so a palette override cannot win on equal specificity. Only the edge takes
   the accent — gold as text on white is the one thing the light worlds forbid. */
.readout .tag--band{border-color:var(--heat);font-weight:600;letter-spacing:.02em}
.scale{margin-top:24px}
.scale-track{display:grid;grid-template-columns:1fr 2fr 3fr 3fr;gap:4px;height:9px}
.scale-track i{border-radius:2px;transition:background .5s var(--ease)}
/* Same reason as the note below it: tertiary at 12px does not clear AA on the
   panel in any palette. */
.scale-lab{display:flex;justify-content:space-between;margin-top:10px;font-size:.8125rem;
           color:var(--bone-2);font-variant-numeric:tabular-nums}
.spec-rows{margin-top:24px;border-top:1px solid var(--line)}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
          border-bottom:1px solid var(--line);font-size:.9375rem}
.spec-row:last-child{border-bottom:none}
.spec-row span:first-child{color:var(--bone-2)}
.spec-row span:last-child{color:var(--bone);font-weight:500}
/* Legal small print for a 40–70 audience: the tertiary tint at 13px measured
   between 3.4 and 4.1:1 across the palettes. It takes the secondary tint and
   a size step, which it should have had from the start. */
.spec-note{margin-top:15px;font-size:.875rem;color:var(--bone-2);line-height:1.5}

/* ── Sections ────────────────────────────────────────────────────── */
.section{padding:clamp(64px,9vw,132px) 0;border-top:1px solid var(--line);position:relative}
.section--tight{padding:clamp(56px,7vw,96px) 0}
.head{max-width:var(--measure)}
.head h2+p{margin-top:20px}
.after{margin-top:28px}

/* ── The card ─────────────────────────────────────────────────────
   One object, two jobs: a deck card that advances with the scroll, and a
   tile that states a headline and hands off. 20px radius, opaque ground so
   the deck can stack over itself. */
.card{border:1px solid var(--line-2);border-radius:var(--r-card)}

/* Deck: each card sticks under the rail, and the next one rides up over it.
   Pure CSS — the JS only adds the recede. Without JS this still stacks. */
.deck{list-style:none;margin:clamp(38px,5vw,66px) 0 0;padding:0;
      display:flex;flex-direction:column;gap:clamp(22px,3vw,38px)}
.card--deck{position:sticky;
            /* No rail height in the offset. The card slides UNDER the frosted
               bar rather than starting below it, so when the rail rides away the
               freed 74px goes to the card instead of leaving a gap behind it —
               and the offset never changes mid-scroll, which a sticky element
               cannot do without jumping. The caption sits at the foot, so the
               only thing the bar ever covers is picture. */
            top:calc(clamp(14px,2vw,26px) + var(--i) * 16px);
            padding:0;overflow:hidden;
            display:flex;flex-direction:column;justify-content:flex-end;
            min-height:min(560px,78vh)}
/* On a phone the card is a poster: nearly the whole screen, the photograph
   owning it, and the copy landing as a band across the foot. The band is sized
   by its own content — if the copy box is given the card's full height its
   plane covers the entire face and the image may as well not be there. */
@media(max-width:899px){
  /* Measured with pixel-contrast.mjs at 390px, not chosen by eye: the copy
     runs down over the subject's head and shoulders, not just the open sky,
     so .78 fails in three palettes and .84 still fails in red. */
  :root{--plane:.90}
  /* A stacked deck always reveals the TOP of a card — the next card covers it
     from the bottom up. So the copy goes at the top: with it at the foot you
     scroll through a run of image-tops while every headline slides out of view
     underneath the card arriving over it, which is what made the section read
     as broken. The image still fills the card and the type still sits on it. */
  /* Short of the viewport on purpose: the card has to finish above the fold so
     its caption is read before the next card starts climbing over it.

     The height also decides how hard the photograph is cropped, which is what
     the client saw as "photo crops are a bit zoomed in". A 390x560 card is
     aspect 0.70 against a 1.78 source, so cover keeps only 39% of the original
     width. At 480 it keeps 46% — the same card, a noticeably wider picture. */
  .card--deck{min-height:min(calc(var(--vhl) * 66),480px)}
  /* The copy plane has to end before the subject's face. These photographs
     carry roughly a fifth of open sky above the head, so on a phone the lede
     runs to its first sentence and the rest waits for a wider screen or the
     deep page. Clamping mid-sentence would be worse than choosing a stop. */
  .lede-rest{display:none}
  /* The readout card FLOWS to its content while the photo cards are capped at
     66svh, so it alone came out 706px tall — 150px past the bottom of an
     iPhone's Safari viewport, which is why its foot could not be seen. The
     document is compacted here rather than capped: a clipped report would be
     worse than a smaller one. */
  .card--panel .card-art--panel{padding:clamp(14px,3.5vw,20px)}
  .card--panel .specimen-body{padding:18px 16px 16px}
  /* the readout figure at the size already declared for a constrained box —
     the same role `.against .readout b` fills, so no new step is invented */
  .card--panel .readout b{font-size:clamp(3.2rem,2rem + 3.4vw,4.4rem)}
  .card--panel .readout{gap:10px}
  .card--panel .scale{margin-top:16px}
  .card--panel .spec-note{margin-top:11px}
  .card--panel .card-copy{padding-bottom:clamp(20px,3vw,26px)}
  /* The readout is a document, so it flows rather than sitting behind the copy;
     column-reverse keeps the copy above it for the same reason as the rest. */
}
/* Copy at the foot at every size: you read the card while it is the top of
   the stack, and the card behind it is already read. */

/* Card art. The image IS the card face. No scrim on the photograph itself —
   the copy sits on a flat plane with a hard edge instead of a long fade, because
   a fade over a photograph reads as a smear and never resolves into an
   intention, where an edge is obviously deliberate. */
.card-art{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--bg-2)}
.card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              object-position:26% 50%;transform:scale(1.06);display:block}

/* ── The deck runs dark ──────────────────────────────────────────
   Measured off Prenuvo, whose slides are full-bleed photographs with white type
   laid straight on them. The reason that works, and the reason every attempt at
   the inverse failed here: white type over a DARKENED photograph is forgiving,
   because you can always take the picture further down. Dark type over a
   photograph is a fight lost on every highlight — and it is why the pale cards
   read as empty and unlit on a phone.

   So the deck is the page's dark moment, whatever the palette around it. Light
   page, dark deck, light page: the rhythm is also what gives the section punch. */
/* .card.card--deck, not .card--deck: every palette override sets a light
   `.card` background at equal specificity and loads afterwards, so a single
   class here loses and the deck comes out white with white type on it.
   The light ink is scoped to the copy, never to the card — set on the card it
   is inherited by the white readout panel and blanks its heading. */
.card.card--deck{
  /* 🔴 THE iOS 26 TOOLBAR RULE (2026-10-03, bisected on a real iPhone, tests
     A–V). iOS 26 Safari tints its see-through toolbar from the background-COLOR
     of any fixed/sticky element within 3px of the screen edge and at least 80%
     of its width. These cards are sticky and dark, so the bar went black the
     moment the first one came up the screen. The colour is therefore the LIGHT
     page colour, and the dark fill is a background-IMAGE, which Safari ignores.
     It looks identical. Never give a pinned element a dark background-color. */
  background-color:var(--bg);background-image:linear-gradient(var(--deck),var(--deck));
  border-color:rgba(255,255,255,.14);
                 box-shadow:0 30px 70px -34px rgba(var(--edge),.55)}
/* These carry an extra class each on purpose. Every palette override was
   written for a light card and sits at equal specificity later in the cascade,
   so a single-class rule here loses and the deck ends up with dark slate type
   on a near-black ground. */
.card--deck .card-copy{color:var(--ink-deck)}
.card--deck .card-copy h3{color:#FFFFFF}
.card--deck.card--heat .card-copy h3{color:#FFFFFF}
.card--deck .card-copy .card-lede{color:var(--ink-deck-2)}
/* Light type on a dark ground blooms: the same setting reads tighter than it
   does as ink on paper. A little more leading and a hair of tracking buy the
   letterforms their air back. */
.card--deck .card-copy .card-lede{line-height:1.62;letter-spacing:.004em}
.card--deck .card-copy .eyebrow{color:var(--ink-deck-2)}
.card--deck .card-copy .eyebrow .num{color:var(--on-dark)}
.card--deck .card-copy .more{color:#FFFFFF}
.card--deck .card-copy .more:hover{color:var(--on-dark)}
.card--deck .card-copy .finds li{border-bottom-color:rgba(255,255,255,.14)}

/* THE CARD IS THE PICTURE. The words lie on it the way a caption lies on a
   social post — so the scrim is bottom-weighted and nothing more: the top of
   the frame is left alone, and the darkening arrives only where the type does.
   The previous version blacked out 92% of the right-hand half and put the copy
   on that, which read as a panel bolted to a photo rather than as one image. */
.card-art{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--deck)}
/* GHOST CORNERS, 2026-10-03 (Anthony, on his phone). The card rounds its
   corners with overflow:hidden + border-radius. Safari — every iPhone browser —
   does not always honour that rounded clip for a child it has promoted to its
   own layer (a blend mode, a moving image, the recede filter on the card), so
   the picture's SQUARE corners leaked past the curve. Only the calcium card
   showed it, because only its picture ground (navy) differs from the card's
   near-black. clip-path is a hard mask Safari respects on every layer; it sits
   on the picture, not the card, so the card's drop shadow is not clipped.
   Radius is one less than the card's because the picture sits inside its
   1px border. */
.card--deck .card-art{clip-path:inset(0 round calc(var(--r-card) - 1px))}
.card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              object-position:50% 46%;transform:scale(1.02);display:block}
.card-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--deck-rgb),.06) 0%,
    rgba(var(--deck-rgb),.10) 46%,
    rgba(var(--deck-rgb),.22) 100%)}
@media(min-width:900px){.card-art img{object-position:50% 40%}}

/* The caption lies across the foot of the picture, and carries its own
   darkening: the box itself is washed, and a band above it fades that wash out
   to nothing over a fixed 130px. Tying the scrim to the CAPTION rather than to
   a percentage of the frame is the whole trick — copy height changes from card
   to card, and a percentage gradient leaves the eyebrow sitting in clear sky on
   the tall ones. Measured, not guessed: see pixel-contrast.mjs. */
.card-copy{position:relative;z-index:4;padding:clamp(26px,3vw,44px);
           display:flex;flex-direction:column;min-height:0;
           margin-top:auto;width:100%;
           background:linear-gradient(180deg,
             rgba(var(--deck-rgb),.74) 0%,
             rgba(var(--deck-rgb),.93) 100%)}
.card-copy::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:230px;z-index:-1;pointer-events:none;display:block;
  background:linear-gradient(180deg,
    rgba(var(--deck-rgb),0) 0%,
    rgba(var(--deck-rgb),.08) 30%,
    rgba(var(--deck-rgb),.26) 56%,
    rgba(var(--deck-rgb),.52) 78%,
    rgba(var(--deck-rgb),.74) 100%)}
.card-copy h3,.card-copy .card-lede{max-width:34ch}
@media(min-width:900px){
  .card-copy{padding:clamp(34px,3.4vw,52px)}
  .card-copy h3{max-width:22ch}
  .card-copy .card-lede{max-width:56ch}
}
/* The bullet list is detail. On a phone it is what forces the band tall enough
   to swallow the picture, so it stands down and "Learn more" carries it. */
@media(max-width:899px){.card-copy .finds{display:none}}
.card-copy .eyebrow{color:var(--bone-2)}
.card-copy h3{font-size:clamp(1.5rem,1.05rem + 1.35vw,2.15rem);line-height:1.08;
              letter-spacing:-.028em;max-width:20ch}
.card-lede{margin-top:16px;color:var(--bone-2);font-size:1.0625rem;line-height:1.55}
.card--heat .eyebrow .num{color:var(--heat)}
.card--heat .card-copy h3{color:var(--heat-hi)}

.finds{list-style:none;margin:22px 0 0;padding:0;font-size:.9375rem;color:var(--bone-2)}
.finds li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:baseline}
.finds li:last-child{border-bottom:none}
.d{width:5px;height:5px;border-radius:50%;flex:none;translate:0 -2px;background:var(--bone-3)}

.steps{list-style:none;margin:22px 0 0;padding:0}
.steps li{display:flex;gap:14px;align-items:baseline;padding:11px 0;
          border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--bone-2)}
.steps li:last-child{border-bottom:none}
.steps .num{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);
            display:inline-flex;align-items:center;justify-content:center;
            font-size:.6875rem;color:var(--heat-deep);translate:0 3px}

/* ── Regions: the whole-field argument, demoted to a strip ───────
   It is why one exam beats one test — worth keeping, not worth a third of the
   homepage. */
.regions{margin-top:clamp(38px,5vw,62px);display:grid;gap:clamp(20px,3vw,34px)}
@media(min-width:760px){.regions{grid-template-columns:repeat(3,1fr)}}
/* The whole region is the target, not the four words of its heading: on a
   404 these three links are the only way out of the page. */
.region{display:block;padding-top:18px;border-top:1px solid var(--line-2)}
/* Only the link form is interactive — a plain div must not answer the cursor. */
a.region{padding-bottom:20px;color:inherit;text-decoration:none;
         transition:border-color .3s var(--ease)}
a.region:hover{border-top-color:var(--heat)}
.region h3{margin:0 0 8px;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
           font-size:1.0625rem;letter-spacing:-.015em;color:var(--bone)}
.region .more{margin-top:12px}
.region p{font-size:.9375rem;color:var(--bone-2);line-height:1.55}

/* ── The process, as a quadrant ───────────────────────────────────
   Four steps drawn as one square split in four. The rules that cross the
   middle are the diagram: they carry the counting, so the numerals can sit
   quiet in the corners rather than competing with the headings. Falls to a
   single column on phones, where a 2x2 of this much text is unreadable. */
.quad{list-style:none;margin:clamp(34px,4.5vw,56px) 0 0;padding:0;
      display:grid;grid-template-columns:1fr 1fr;
      border:1px solid var(--line);border-radius:var(--r-card);
      overflow:hidden;background:var(--bg-3)}
.quad-step{display:flex;gap:clamp(14px,1.7vw,22px);align-items:flex-start;
           padding:clamp(24px,2.9vw,40px)}
.quad-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
.quad-step:nth-child(odd){border-right:1px solid var(--line)}
.quad-n{flex:none;margin:0;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;
        font-weight:500;font-size:clamp(2.1rem,1.4rem + 2.2vw,3.1rem);line-height:.9;
        letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--line-2)}
.quad-body{min-width:0}
.quad-body .eyebrow{margin:0 0 8px}
.quad-body h3{margin:0 0 10px;font-size:1.32rem;letter-spacing:-.02em;color:var(--bone)}
.quad-body p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--bone-2)}
.quad-body .more{margin-top:14px}
/* The accent belongs to the step you are reading, not to all four at once. */
.quad-step:hover .quad-n{color:var(--heat)}
.quad-n{transition:color .3s var(--ease)}

@media(max-width:759px){
  .quad{grid-template-columns:1fr}
  .quad-step:nth-child(odd){border-right:0}
  .quad-step:nth-child(3){border-bottom:1px solid var(--line)}
  .quad-step:last-child{border-bottom:0}
}

/* ── The design-system page ───────────────────────────────────────────
   Presentation for the reference page only. Deliberately thin: the page's
   job is to render real components with real classes, so anything styled
   here is scaffolding around them, never a restatement of them. */
.ds-h3{margin:clamp(30px,3.6vw,48px) 0 16px;font-size:1.32rem;letter-spacing:-.02em;color:var(--bone)}
.ds-swatches{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;display:grid;gap:10px;
             grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.ds-sw{display:grid;grid-template-columns:38px 1fr;gap:4px 12px;align-items:center;
       padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg-3)}
.ds-chip{grid-row:span 2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--edge),.12)}
.ds-sw code{font-size:.8125rem;color:var(--bone)}
.ds-sw b{font-size:.8125rem;font-weight:500;color:var(--bone-3);font-variant-numeric:tabular-nums}
.ds-sw em{grid-column:1/-1;font-style:normal;font-size:.75rem;line-height:1.45;color:var(--bone-3)}
/* The identity is a wordmark, so the specimen is type, not artwork. */
.ds-wordmark{margin:clamp(28px,3.4vw,44px) 0 0;padding:clamp(30px,4vw,52px);
             border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-3);
             text-align:center;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;
             font-weight:600;font-size:clamp(1.9rem,1.3rem + 2.1vw,3rem);
             letter-spacing:-.035em;color:var(--bone)}
.ds-table{width:100%;margin-top:14px;border-collapse:collapse;font-size:.875rem}
.ds-table th{text-align:left;padding:0 14px 10px 0;font-weight:500;font-size:.75rem;
             letter-spacing:.09em;text-transform:uppercase;color:var(--bone-3);
             border-bottom:1px solid var(--line)}
.ds-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.ds-table td:first-child,.ds-table td:nth-child(2){white-space:nowrap;width:1%}
.ds-table code{font-size:.8125rem;color:var(--bone-2)}
.ds-icons{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;
          grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.ds-icons li{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);
             border-radius:var(--r-panel);background:var(--bg-3);font-size:.8125rem;color:var(--bone-3)}
.ds-icons .ico{font-size:1.25rem;color:var(--heat)}
@media(max-width:559px){.ds-table td:nth-child(3){display:none}}


/* A single-line disclaimer under a stat band. Smaller and centred on purpose:
   it qualifies the figures above it without arguing with them. */
.micro-note{max-width:62ch;margin:clamp(26px,3vw,38px) auto 0;text-align:center;
            font-size:.8125rem;line-height:1.5;color:var(--ink-deck-3)}



/* ── A photographic hero on the light ground ─────────────────────────
   The inverse of --film: bright photo, bone ink, and a scrim that runs from
   solid page-ground on the left (where the copy sits) to nearly clear on the
   right (where the scanner is). The photo is the argument — an open ring, not
   a tunnel — so the scrim gets out of its way. */
.page-hero--photo{position:relative;isolation:isolate;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:0;margin:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--scrim),.97) 0%,rgba(var(--scrim),.92) 40%,rgba(var(--scrim),.55) 68%,rgba(var(--scrim),.12) 100%)}
.page-hero--photo .wrap{position:relative;z-index:2}
.page-hero--photo .page-arc{opacity:.55}
@media(max-width:759px){
  .hero-photo img{object-position:50% 40%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(var(--scrim),.96) 0%,rgba(var(--scrim),.90) 55%,rgba(var(--scrim),.45) 100%)}
}
/* the scan animation as a band ground: same object-fit as the still it replaced */
.dark--film .dark-art video{width:100%;height:100%;object-fit:cover;display:block;opacity:.6}

/* ── The scan animation as a hero ground ──────────────────────────────
   Pure black source, so it sits under the copy without a scrim doing the
   work — but the copy still needs a floor, hence the gradient. The film is
   decorative: it carries no information the text does not, which is why it
   is aria-hidden and why nothing is lost when it does not play. */
.page-hero--film{position:relative;isolation:isolate;background:var(--deck)}
.hero-film{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.hero-film-v{width:100%;height:100%;object-fit:cover;display:block}
.hero-film::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--deck-rgb),.94) 0%,rgba(var(--deck-rgb),.86) 46%,rgba(var(--deck-rgb),.55) 100%)}
.page-hero--film .wrap{position:relative;z-index:2}
.page-hero--film .page-head h1,
.page-hero--film .page-head .lede{color:var(--ink-deck)}
.page-hero--film .crumbs,.page-hero--film .crumbs a{color:var(--ink-deck-3)}
.page-hero--film .page-note{color:var(--ink-deck-3);border-top-color:rgba(255,255,255,.14)}
.page-hero--film .btn--ghost{color:var(--ink-deck);border-color:rgba(255,255,255,.34);background:transparent}
.page-hero--film .page-arc{opacity:.5}
@media(max-width:759px){
  .hero-film::after{background:linear-gradient(180deg,rgba(var(--deck-rgb),.72) 0%,rgba(var(--deck-rgb),.92) 62%)}
}



/* Greg #43: the state, with every centre on it. Decorative — the list below
   says the same thing in text — so it is aria-hidden and sized to sit above
   the list without competing with it. */
.loc-map{margin:0 0 clamp(28px,3.4vw,44px);display:flex;flex-direction:column;
         align-items:center;gap:12px}
.loc-map img{width:100%;max-width:520px;height:auto;display:block}
.loc-map figcaption{color:var(--bone-3);text-align:center}
@media(min-width:900px){
  .loc-map{float:right;width:min(42%,440px);margin:0 0 24px 40px}
}

/* ── The centre list ──────────────────────────────────────────────────
   Greg #18: one page, grouped by metro, every centre one click from here.
   A list, not cards — thirteen cards would be a wall, and the thing a visitor
   is scanning for is their own town, which reads fastest as a plain column. */
.loc-groups{margin-top:clamp(30px,3.6vw,48px);display:grid;gap:clamp(30px,3.6vw,46px)}
.loc-group-t{font-size:1.32rem;letter-spacing:-.02em;color:var(--bone);
             padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.loc-list{list-style:none;margin:0;padding:0}
.loc{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
     padding:16px 0;border-bottom:1px solid var(--line)}
.loc:last-child{border-bottom:0}
.loc-who{min-width:0;flex:1 1 260px}
.loc-who h3{font-size:1.0625rem;letter-spacing:-.015em;color:var(--bone)}
.loc-addr{margin-top:4px;font-size:.9375rem;line-height:1.5;color:var(--bone-2)}
.loc-addr--pending{color:var(--bone-3);font-style:italic}
.loc-do{display:flex;align-items:center;gap:18px;flex:none}
.btn--sm{padding:10px 18px;font-size:.875rem}
@media(max-width:559px){
  .loc{align-items:flex-start}
  .loc-do{width:100%;justify-content:space-between}
}


/* ── What the exam covers ─────────────────────────────────────────────
   Greg #16/#17: prenuvo and hims both present coverage as one dense field —
   the length IS the argument, and columning it into tidy groups makes it look
   shorter than it is. So: a count, then everything, wrapping. */
.covers{margin-top:clamp(28px,3.4vw,44px);padding:clamp(24px,3vw,38px);
        border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-3)}
.covers-n{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
          padding-bottom:18px;border-bottom:1px solid var(--line)}
.covers-n b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:600;
            font-size:clamp(2.1rem,1.4rem + 2.2vw,3.1rem);line-height:1;letter-spacing:-.03em;
            color:var(--heat);font-variant-numeric:tabular-nums}
.covers-n span{font-size:.9375rem;color:var(--bone-2)}
.covers-list{list-style:none;margin:18px 0 0;padding:0;
             display:flex;flex-wrap:wrap;gap:8px}
.covers-list li{padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;
                font-size:.875rem;line-height:1.2;color:var(--bone-2);background:var(--bg)}

/* ── Bands: the scale, condensed. Carousel on phones. ───────────── */
.bands{margin-top:clamp(32px,4vw,52px)}
.band-card{border:1px solid var(--line);border-radius:var(--r-card);padding:24px 22px;
           background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,0));
           display:flex;flex-direction:column;gap:12px}
.band-n{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.62rem;line-height:1;
        letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.band-t{font-size:.9375rem;color:var(--bone-2);line-height:1.5;flex:1}
.band-card:nth-child(1) .band-n{color:var(--bone-3)}
.band-card:nth-child(3) .band-n{color:var(--heat)}
.tag{align-self:flex-start;display:inline-block;padding:4px 11px;border-radius:999px;
     font-size:.75rem;font-weight:500;border:1px solid var(--line-2);color:var(--bone-2);
     white-space:nowrap}
.tag--ok{color:var(--ok)}
@media(min-width:900px){.bands{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}}

/* The way onward, placed where the thumb already is: the last card you swipe
   to in the scale carousel. On desktop the row is a fixed four columns and the
   ghost button below does the same job, so exactly one of the two ever shows. */
.band-card--link{display:none;text-decoration:none;color:inherit;
                 justify-content:space-between;
                 border-style:dashed;border-color:var(--line-2)}
.band-card--link .band-t{color:var(--bone-2)}
.band-card--link .more{margin-top:0}
@media(max-width:899px){
  .band-card--link{display:flex}
  .after--cta{display:none}
}

/* ── Tiles: headline, a sentence, Learn more ─────────────────────
   The photograph sits ABOVE the copy, never behind it. Text on an image always
   ends in a compromise — the scrim mutes the picture and the type still fights
   for the ground — and it is also the one thing an automated contrast check
   cannot verify. Beside or above, never behind, is the same law the deck cards
   follow, so the two rows read as one system. */
.tiles{margin-top:clamp(32px,4vw,52px)}
.card--tile{display:flex;flex-direction:column;overflow:hidden;padding:0;
            text-decoration:none;color:inherit;
            transition:transform .35s var(--ease),border-color .35s var(--ease),
                       box-shadow .35s var(--ease)}
@media(hover:hover) and (pointer:fine){
.card--tile:hover{transform:translateY(-4px);border-color:var(--line-3);
                  box-shadow:0 36px 80px -34px rgba(var(--edge),.95)}
}
.tile-art{position:relative;margin:0;aspect-ratio:16 / 9;overflow:hidden;
          background:var(--bg-2);border-bottom:1px solid var(--line)}
.tile-art img{display:block;width:100%;height:100%;object-fit:cover;
              transition:transform .7s var(--ease)}
@media(hover:hover) and (pointer:fine){
.card--tile:hover .tile-art img{transform:scale(1.05)}
}
.tile-body{display:flex;flex-direction:column;flex:1;
           padding:clamp(22px,2.2vw,28px)}
.card--tile h3{font-size:1.32rem;letter-spacing:-.022em}
.card--tile p{margin-top:12px;font-size:.9375rem;color:var(--bone-2);line-height:1.55}
.card--tile .more{margin-top:auto;padding-top:20px}
@media(min-width:900px){.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}}

/* Phones: the snap carousel, in CSS, no library. */
@media(max-width:899px){
  .bands,.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:83%;gap:14px;
           overflow-x:auto;scroll-snap-type:x mandatory;
           scroll-padding-left:clamp(20px,4vw,44px);
           margin-inline:calc(-1 * clamp(20px,4vw,44px));
           padding-inline:clamp(20px,4vw,44px);padding-bottom:16px;scrollbar-width:none}
  .bands::-webkit-scrollbar,.tiles::-webkit-scrollbar{display:none}
  .band-card,.card--tile{scroll-snap-align:start}
  .swipe-hint{display:flex}
}
.swipe-hint{display:none;align-items:center;gap:8px;margin-top:14px;font-size:.8125rem;color:var(--bone-3)}

/* ── Close ───────────────────────────────────────────────────────── */
.close{padding:clamp(74px,10vw,144px) 0 clamp(64px,8vw,110px);border-top:1px solid var(--line);
       text-align:center}
.close h2{margin-top:22px}
.close .lede{margin:20px auto 0}
.close .actions{justify-content:center;position:relative;padding:34px 0 6px}
/* Something for the action to stand on: a pool of the accent on the ground,
   wide and very faint, so the button reads as lit rather than as decorated. */
.close .actions::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,96%);height:230px;
}
.close-note{margin:26px auto 0}
.price-big{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:clamp(4rem,2rem + 9vw,8rem);
           line-height:.88;letter-spacing:-.05em;margin:0 auto;font-variant-numeric:tabular-nums}
.price-big sup{font-size:.3em;vertical-align:.95em;color:var(--heat);margin-right:.05em}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,76px) 0 clamp(36px,4vw,54px);
        font-size:.9375rem;color:var(--bone-3)}
.footer-top{display:grid;gap:clamp(34px,5vw,64px)}
@media(min-width:900px){.footer-top{grid-template-columns:1fr 1.15fr}}
.footer-brand .mark{display:inline-block}
.footer-brand p{margin:14px 0 22px;max-width:34ch}
.footer-cols{display:grid;gap:28px 24px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* h2 since 2026-10-03: a page whose main has only an h1 jumped h1→h3 here. */
.footer-cols h2,.footer-cols h3{font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
                color:var(--bone-3);margin-bottom:14px}
.footer-cols a{display:flex;align-items:center;min-height:44px;color:var(--bone-2);
               text-decoration:none;transition:color .25s var(--ease)}
.footer-cols a:hover{color:var(--bone)}
.footer-cols p{margin-top:6px}
/* #6, David: "might look better centered". Centred as a column, with the
   text itself still ranged left — centring 90ch of small print would make
   every line start in a different place and read worse, not better. */
.footer-legal{margin-top:clamp(38px,5vw,60px);padding-top:24px;border-top:1px solid var(--line);
              font-size:.8125rem;line-height:1.55;max-width:84ch;margin-inline:auto}
.footer-legal p+p{margin-top:12px}


/* ── Motion: visible defaults, JS opts in ────────────────────────── */
.js-anims .reveal{opacity:0}
.js-anims .hero-line{opacity:0}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
  .js-anims .reveal,.js-anims .hero-line{opacity:1!important;transform:none!important}
  /* Stacking is motion too. Under reduce, the deck is simply a list of cards. */
  .card--deck{position:static}
  .card-art img{transform:none}
}

/* The calcium card carries the readout itself rather than a photograph: the
   panel IS the subject of that card, and the client asked for it to move out of
   the hero into a section below. */
/* The art layer spans the whole card, but only part of it is visible — the copy
   plane covers the rest. The panel has to centre inside the VISIBLE region, or
   half of it ends up buried under the plane. */
/* The readout is a document on its own light ground, not a photograph, so
   the darkening scrim must not run over it — it drops the panel to mid-grey
   and takes its dark type down with it. */
.card-art--panel::after{display:none}
/* The readout card is the exception to the caption rule, and has to be: there
   is no photograph under it to darken. The document FLOWS at every width — copy
   above, readout below — instead of the copy lying over it, and the caption
   scrim is switched off because the card ground is already dark. */
.card--panel{min-height:0;flex-direction:column-reverse}
.card--panel .card-art{position:relative;inset:auto}
.card--panel .card-copy{background:none;margin-top:0}
.card--panel .card-copy::before{display:none}
.card-art--panel{display:flex;align-items:center;justify-content:center;
                 padding:clamp(22px,5vw,34px);background:var(--bg-2)}
.card-art--panel .specimen{width:100%;max-width:400px}
@media(min-width:900px){
  .card-art--panel{padding:clamp(28px,3vw,44px)}
  .card-art--panel .specimen{max-width:520px}
}

/* The process, as numbered steps rather than cards. */
.steps--big{margin-top:clamp(32px,4vw,52px);display:grid;gap:clamp(22px,3vw,34px)}
@media(min-width:860px){.steps--big{grid-template-columns:repeat(3,1fr)}}
.steps--big li{display:block;padding:22px 0 0;border-top:1px solid var(--line-2);border-bottom:0}
.steps--big .num{width:30px;height:30px;font-size:.8125rem;translate:0 0;margin-bottom:16px}
.steps--big h3{font-size:1.2rem;letter-spacing:-.018em;margin-bottom:10px}
.steps--big p{font-size:.9375rem;color:var(--bone-2);line-height:1.55}

/* The social-proof scaffold. Deliberately looks unfinished, because it is. */
.proof-note{margin-top:clamp(26px,3vw,40px);padding:clamp(22px,2.6vw,32px);
            border:1px dashed var(--line-2);border-radius:var(--r-card);
            max-width:var(--measure);color:var(--bone-2);font-size:.9375rem;line-height:1.6}
.proof-note p+p{margin-top:10px}
.proof-note strong{color:var(--bone)}

/* ══ PALETTE · Clinical Red ══════════════════════════════════════
   Folded in 2026-08-29 when the client chose this world. These were overrides
   in a separate stylesheet while four palettes were live; they are the base
   now. Kept as a labelled block rather than flattened into the rules above,
   because flattening blind is how a working page acquires a silent
   regression — a flattening pass belongs with the DESIGN.md write-up. */

.skip{background:var(--bone);color:#fff}
.rail.is-scrolled{background:rgba(246,247,249,.86)}
@media(min-width:901px){
  .rail:not(.is-scrolled){background:transparent;border-bottom-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .rail:not(.is-scrolled):hover,.rail:not(.is-scrolled):focus-within{
    background:rgba(246,247,249,.86);border-bottom-color:var(--line);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}

/* ── The action ──────────────────────────────────────────────────
   The gradient's TOP stop is the one that decides legibility: white type sits
   across the whole face, so the lightest red in the ramp still has to clear
   4.5:1 on its own. */
.btn--heat{
  background:linear-gradient(180deg,var(--heat-lift) 0%,var(--heat-mid) 54%,var(--heat-dark) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(74,4,8,.42),
    0 1px 0 rgba(13,17,23,.12),
    0 10px 22px -12px rgba(232,35,44,.50),
    0 20px 40px -24px rgba(13,17,23,.45)}
@media(hover:hover) and (pointer:fine){
.btn--heat:hover{
  background:linear-gradient(180deg,var(--heat-lift-h) 0%,var(--heat-mid-h) 54%,var(--heat-dark-h) 100%);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(74,4,8,.38),
    0 1px 0 rgba(13,17,23,.12),
    0 16px 30px -12px rgba(232,35,44,.52),
    0 28px 52px -26px rgba(13,17,23,.48)}
}
.btn--heat:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(74,4,8,.45),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 10px -8px rgba(232,35,44,.45)}

.btn--ghost{border-color:var(--line-2);color:var(--bone);
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F4F7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px -18px rgba(13,17,23,.35)}
@media(hover:hover) and (pointer:fine){
.btn--ghost:hover{border-color:var(--line-3);transform:translateY(-2px);
  background:linear-gradient(180deg,#FFFFFF 0%,#EBEEF2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 30px -20px rgba(13,17,23,.4)}
}
.btn--ghost:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(13,17,23,.16)}
.close .actions::before{background:radial-gradient(52% 58% at 50% 50%,rgba(232,35,44,.10) 0%,rgba(232,35,44,.03) 45%,rgba(232,35,44,0) 74%)}

/* Links read as ink and warm to the deep red on hover; the bright red stays in
   the fills, where it cannot be asked to be legible. */
.more{color:var(--bone)}
.more:hover{color:var(--heat-deep)}
.eyebrow .num{color:var(--heat-deep)}
.card--heat .eyebrow .num{color:var(--heat-deep)}

/* ── The ring ──────────────────────────────────────────────────── */
#arc stop:nth-child(1){stop-color:var(--heat-pale)}
#arc stop:nth-child(2){stop-color:var(--heat)}
#arc stop:nth-child(3){stop-color:var(--heat-dark)}
#arc stop:nth-child(4){stop-color:var(--heat-pale)}
/* 🔴 The radii in a radial-gradient are RADII, not diameters: over 50% and the
   ellipse is wider than its own box, so the gradient is still opaque where the
   box ends and clips into a visible rectangle — the "odd square artifact" the
   client caught in the hero. These are over 50% and safe only because the box
   is inset -22%/-30%, well outside the copy, so the hard edge lands off-stage.
   Shrink that inset and this needs shrinking with it. */
/* A radial-gradient is sized by RADII, not diameters — the trap DESIGN.md
   already records, biting here on the other axis. `60% at 38%` put the ellipse's
   left edge at 38 − 60 = −22% of the box, so the wash was still at alpha 0.57
   where the box ended and stopped dead: the "semi transparent white overlay on
   the left edge which cuts off abruptly". Centred, with radii inside the box,
   it reaches zero on its own before any edge. */
.hero-copy::before{background:radial-gradient(48% 50% at 50% 50%,rgba(246,247,249,.96) 0%,rgba(246,247,249,.84) 44%,rgba(246,247,249,0) 100%)}

/* ── Panels ────────────────────────────────────────────────────── */
.specimen{background:#fff;border-color:var(--line);
          box-shadow:0 24px 54px -32px rgba(13,17,23,.24)}
.readout b{color:var(--heat-hi)}
.scale-track i{background:#DDE3EA}
.scale-track i.on{background:var(--heat);box-shadow:0 0 12px 0 rgba(232,35,44,.32)}

.card{background:#fff;border-color:var(--line);
      box-shadow:0 24px 60px -36px rgba(13,17,23,.22)}
.card--heat{border-color:rgba(232,35,44,.34)}
.card--heat .card-copy h3{color:var(--heat-hi)}
.d.hot{background:var(--heat);box-shadow:0 0 8px 1px rgba(232,35,44,.32)}
.steps .num{border-color:var(--line-2);color:var(--heat-deep)}

.band-card{background:#fff;border-color:var(--line)}
.band-card:nth-child(2) .band-n{color:#C4666B}
.band-card:nth-child(3) .band-n{color:var(--heat-hi)}
.band-card:nth-child(4) .band-n{color:#8C1018}
.tag{border-color:var(--line-2)}
.tag--ok{border-color:rgba(30,122,70,.42)}
.price-big sup{color:var(--heat-hi)}

.card--tile::before{background:radial-gradient(78% 62% at 82% 108%,rgba(232,35,44,.09) 0%,rgba(232,35,44,.03) 42%,rgba(232,35,44,0) 72%)}
.card--tile:nth-child(2)::before{background:radial-gradient(78% 62% at 18% 108%,rgba(232,35,44,.08) 0%,rgba(232,35,44,.025) 42%,rgba(232,35,44,0) 72%)}
@media(hover:hover) and (pointer:fine){
.card--tile:hover{border-color:var(--line-2);box-shadow:0 34px 74px -36px rgba(13,17,23,.32)}
}

.review-switch{background:rgba(255,255,255,.92);border-color:var(--line-2);
               box-shadow:0 14px 38px -18px rgba(13,17,23,.35)}
/* The bright red is a fill, and white type on it measures 4.46:1 — under the
   bar. The active pill takes the mid red instead. */
.review-switch a[aria-current]{background:var(--heat-mid);color:#fff}

/* The readout is white; without a distinctly tinted ground behind it the
   card is three flat greys and the panel disappears into them. */
.card-art--panel{background:linear-gradient(155deg,#F4E8E9 0%,#E7D8DA 100%)}

/* ── Quotes ──────────────────────────────────────────────────────
   Three across on a desktop, a snap carousel on a phone — the same pattern the
   tiles use, so the page has one way of handling a row of cards. */
.quotes{margin-top:clamp(32px,4vw,52px)}
@media(min-width:900px){.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}}
.quote{margin:0;padding:clamp(24px,2.4vw,30px);border:1px solid var(--line);
       border-radius:var(--r-card);background:var(--bg-3);
       display:flex;flex-direction:column;gap:18px;
       box-shadow:0 20px 50px -34px rgba(13,17,23,.22)}
.quote blockquote{margin:0}
.quote p{font-size:1rem;line-height:1.6;color:var(--bone-2)}
.quote p::before{content:"“";color:var(--heat);font-size:1.6em;line-height:0;
                 vertical-align:-.28em;margin-right:.08em}
.quote figcaption{margin-top:auto;font-weight:500;color:var(--bone);font-size:.9375rem}
@media(max-width:899px){
  .quotes{display:grid;grid-auto-flow:column;grid-auto-columns:83%;gap:14px;
          overflow-x:auto;scroll-snap-type:x mandatory;
          scroll-padding-left:clamp(20px,4vw,44px);
          margin-inline:calc(-1 * clamp(20px,4vw,44px));
          padding-inline:clamp(20px,4vw,44px);padding-bottom:16px;scrollbar-width:none}
  .quotes::-webkit-scrollbar{display:none}
  .quote{scroll-snap-align:start}
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERIOR PAGES
   The homepage is an index of arguments; these are the arguments. It keeps the
   centred, one-object-per-viewport rhythm — they take an editorial spine
   instead: a sticky section head on the left, the substance on the right, so a
   long page stays navigable without a sidebar.

   Everything here is built from the tokens at the top of this file. The
   homepage owns the largest type on the site; a page h1 sits a step below its.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the page header ─────────────────────────────────────────────────────── */
.page-hero{position:relative;overflow:hidden;
  padding:clamp(26px,3.4vw,44px) 0 clamp(46px,6vw,84px)}
.crumbs{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--bone-3);
  letter-spacing:.02em;margin:0 0 clamp(22px,3vw,38px)}
.crumbs a{color:var(--bone-3);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--bone)}
.crumbs i{font-style:normal;opacity:.5}

/* The aperture, cropped. The homepage draws the whole ring; every page below it
   catches one quadrant of the same object bleeding off the top-right corner. */
.page-arc{position:absolute;pointer-events:none;z-index:0;
  right:clamp(-260px,-11vw,-60px);top:clamp(-300px,-19vw,-96px);
  width:clamp(560px,62vw,940px);aspect-ratio:1}
.page-arc svg{width:100%;height:100%;display:block}
.page-arc{-webkit-mask-image:linear-gradient(202deg,rgba(var(--edge),1) 30%,rgba(var(--edge),.42) 62%,transparent 86%);
  mask-image:linear-gradient(202deg,rgba(var(--edge),1) 30%,rgba(var(--edge),.42) 62%,transparent 86%)}
.page-arc circle{fill:none}
@media(max-width:899px){.page-arc{opacity:.62}}

.page-hero .wrap{position:relative;z-index:2}
.page-head{max-width:min(760px,100%)}
.page-head h1{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.9rem);line-height:1.02;
  letter-spacing:-.03em;max-width:19ch}
.page-head .lede{margin-top:20px;max-width:56ch}
.page-head .actions{justify-content:flex-start;margin-top:30px}
.page-note{margin-top:clamp(30px,3.6vw,46px);padding-top:16px;border-top:1px solid var(--line);
  font-size:.9375rem;color:var(--bone-3);max-width:64ch;line-height:1.55}

/* When a page leads with an object rather than a claim, it sits beside the copy. */
@media(min-width:1000px){
  .page-hero--obj .page-head{max-width:none}
  .page-hero--obj .page-grid{display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(38px,5vw,74px);align-items:center}
  .page-hero--obj .page-head h1{max-width:15ch}
  .page-hero--obj .page-obj{margin-top:0}
}
.page-obj{margin-top:38px}

/* ── the editorial spine ─────────────────────────────────────────────────── */
.split{display:grid;gap:clamp(26px,3.4vw,44px)}
@media(min-width:1000px){
  .split{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:clamp(44px,5vw,88px);align-items:start}
  .split-head{position:sticky;top:calc(var(--rail-h) + 34px)}
}
.split-head h2{max-width:15ch}
.split-head .lede{margin-top:18px;max-width:44ch;font-size:1.0625rem}
.split-body>*+*{margin-top:clamp(18px,2vw,26px)}
.split-body p{color:var(--bone-2);line-height:1.62}
.split-body p.small{color:var(--bone-3)}

/* ── definition rows: a labelled step, or a term and its answer ──────────── */
.rows{margin:0;padding:0}
.rows>div{padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--line-2);
  display:grid;gap:8px}
@media(min-width:760px){
  .rows>div{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    gap:clamp(20px,3vw,42px)}
}
.rows dt{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.2rem;
  line-height:1.24;letter-spacing:-.018em;color:var(--bone)}
.rows dd{margin:0;color:var(--bone-2);line-height:1.62;max-width:var(--measure)}
.rows dd .more{margin-top:12px}
@media(min-width:1000px){
  .split-body .rows>div{grid-template-columns:1fr;gap:10px}
  .split-body .rows dd{max-width:60ch}
}
/* Numbered variant: the step index sits in the gutter, not in the sentence. */
.rows--num dt{display:flex;gap:12px;align-items:baseline}
.rows--num dt .n{flex:none;font-size:.8125rem;color:var(--heat-deep);
  font-variant-numeric:tabular-nums;translate:0 -1px}

/* ── three (or four) measured facts ──────────────────────────────────────── */
.stats{display:grid;gap:clamp(20px,2.6vw,30px);margin-top:clamp(30px,3.6vw,46px)}
@media(min-width:820px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{padding-top:20px;border-top:1px solid var(--line-2)}
.stat b{display:block;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
  font-size:clamp(2.1rem,1.4rem + 2.2vw,3.1rem);line-height:1;letter-spacing:-.03em;
  color:var(--heat-hi);font-variant-numeric:tabular-nums}
.stat h3,.stat .stat-t{margin-top:14px;font-size:1.0625rem;
  font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;line-height:1.28;
  letter-spacing:-.015em;color:var(--bone)}
.dark .stat .stat-t{color:#FFFFFF}
.stat p{margin-top:9px;font-size:.9375rem;color:var(--bone-2);line-height:1.55}

/* ── the dark band: one per page, carrying its least hedged sentence ─────── */
.dark{position:relative;overflow:hidden;background:var(--deck);color:var(--ink-deck);
  padding:clamp(58px,7.4vw,116px) 0;border-top:1px solid var(--line)}
.dark h2,.dark h3{color:#FFFFFF}
.dark .lede,.dark p{color:var(--ink-deck-2)}
/* Reading sizes only. `.dark-say` is a 46px display line and an eyebrow is a
   12px label; neither wants body leading, and a blanket `.dark p` caught
   both — the statement line came out at 1.66 and fell apart. */
.dark .lede,.dark .small,.dark .rows dd,.dark .stat p,.dark .faq-a p,
.dark .split-body p:not(.dark-say){line-height:1.66;letter-spacing:.004em}
.dark .small{color:var(--ink-deck-3)}
.dark .eyebrow{color:var(--ink-deck-2)}
.dark .eyebrow .num{color:var(--on-dark)}
/* An inline link on the dark band (the CDC source, Greg r7 note 19). The ink
   colour `.link` carries on paper is invisible here — measured 1.03:1. */
/* Greg r8 #26: a cited statistic carries a superscript and a small grey
   footnote at the foot of its section, instead of a link that sends the reader
   to a third-party page to check it. */
.fnref{font-size:.62em;font-weight:500;line-height:0;vertical-align:super;margin-left:1px}
.fnote{margin-top:clamp(22px,3vw,34px);font-size:.8125rem;line-height:1.5;color:var(--bone-3);max-width:62ch}
.dark .fnote{color:var(--ink-deck-3)}
.dark .fnote sup{margin-right:3px}
.dark .link{color:var(--on-dark);text-decoration-color:rgba(255,255,255,.55)}
@media(hover:hover) and (pointer:fine){
  .dark .link:hover{color:#FFFFFF;text-decoration-color:currentColor}
}
.dark .more{color:#FFFFFF}
.dark .more:hover{color:var(--on-dark)}
.dark .stat{border-top-color:rgba(255,255,255,.18)}
.dark .stat b{color:var(--on-dark)}
.dark .rows>div{border-top-color:rgba(255,255,255,.16)}
.dark .rows dt{color:#FFFFFF}
.dark .rows dd{color:var(--ink-deck-2)}
.dark .rows--num dt .n{color:var(--on-dark)}
.dark .btn--ghost{border-color:rgba(255,255,255,.34);color:#FFFFFF;background:transparent;
  box-shadow:none}
@media(hover:hover) and (pointer:fine){
.dark .btn--ghost:hover{border-color:#FFFFFF;background:rgba(255,255,255,.06);
  box-shadow:none}
}
.dark .btn--ghost:active{box-shadow:inset 0 2px 6px rgba(var(--edge),.4)}
.dark-art{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.dark-art img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;display:block;opacity:.55}
.dark-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--deck-rgb),.92) 0%,rgba(var(--deck-rgb),.84) 44%,rgba(var(--deck-rgb),.48) 100%)}
.dark .wrap{position:relative;z-index:2}
.dark-say{max-width:26ch;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.7rem,1.15rem + 2.1vw,2.9rem);line-height:1.1;letter-spacing:-.028em;
  color:#FFFFFF}
.dark-say + .lede{margin-top:22px;max-width:52ch}

/* ── the price panel ─────────────────────────────────────────────────────── */
.price-panel{margin-top:clamp(30px,3.6vw,46px);border:1px solid var(--line-2);
  border-radius:var(--r-card);background:var(--bg-3);overflow:hidden;
  box-shadow:0 30px 70px -44px rgba(13,17,23,.30)}
@media(min-width:900px){.price-panel{display:grid;grid-template-columns:1fr 1fr}}
.price-face{padding:clamp(28px,3.2vw,44px);position:relative;overflow:hidden}
.price-face::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(64% 58% at 22% 8%,rgba(var(--accent),.09) 0%,rgba(var(--accent),.02) 48%,rgba(var(--accent),0) 76%)}
.price-face>*{position:relative;z-index:1}
.price-fig{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
  font-size:clamp(3.2rem,1.9rem + 5.4vw,5.4rem);line-height:.92;letter-spacing:-.04em;
  color:var(--bone);font-variant-numeric:tabular-nums}
.price-fig sup{font-size:.3em;vertical-align:.95em;color:var(--heat-hi);margin-right:.05em}
.price-face .lede{margin-top:20px;max-width:38ch;font-size:1.0625rem}
.price-face .actions{justify-content:flex-start;margin-top:26px}
.price-face .small{margin-top:18px}
.price-list{padding:clamp(28px,3.2vw,44px);background:var(--bg-2);
  border-top:1px solid var(--line)}
@media(min-width:900px){.price-list{border-top:0;border-left:1px solid var(--line)}}
.price-list h3{font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bone-3);margin-bottom:6px}
.price-list .finds{margin-top:14px}
.price-list .finds li{border-bottom-color:var(--line-2)}

/* ── the visit, drawn to scale ───────────────────────────────────────────
   Twelve seconds of scanning inside a fifteen-minute visit is 1.3% of it, and
   the honest way to show that is at true scale: the lit band really is that
   narrow. It carries a min-width so it cannot vanish on a phone, and the
   caption says the bar is to scale so the floor is not read as the figure. */
.tline{margin-top:clamp(28px,3.2vw,40px);border:1px solid var(--line);
  border-radius:var(--r-panel);background:var(--bg-3);padding:clamp(22px,2.6vw,30px);
  box-shadow:0 24px 56px -40px rgba(13,17,23,.28)}
.tline-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.tline-hd .tline-t{font-size:.9375rem}
.tline-hd span{font-size:.8125rem;color:var(--bone-3)}
.tline-bar{position:relative;margin-top:26px;height:14px;border-radius:4px;
  background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden}
.tline-bar i{position:absolute;top:-1px;bottom:-1px;left:34%;width:1.33%;min-width:4px;
  border-radius:2px;background:var(--heat);box-shadow:0 0 18px 3px rgba(var(--accent),.55)}
.tline-scale{display:flex;justify-content:space-between;margin-top:10px;
  font-size:.8125rem;color:var(--bone-3);font-variant-numeric:tabular-nums}
.tline-key{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:grid;gap:16px}
@media(min-width:520px){.tline-key{grid-template-columns:1fr 1fr}}
.tline-key b{display:block;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
  font-size:1.32rem;line-height:1;letter-spacing:-.025em;color:var(--bone);
  font-variant-numeric:tabular-nums}
/* the unit that trails a figure, everywhere one does */
.u{font-size:.6em;letter-spacing:0;color:var(--bone-3);margin-left:.25em}
.dark .u{color:var(--ink-deck-3)}
.tline-key > div > span{display:block;margin-top:7px;font-size:.8125rem;color:var(--bone-3);
  line-height:1.45}
.tline-key div:first-child b{color:var(--heat-hi)}
/* When the card carries no bar, the key is the first thing under the head. */
.tline-key--lead{border-top:0;padding-top:0;margin-top:26px}
.tline-note{margin-top:18px;font-size:.8125rem;color:var(--bone-3);line-height:1.5}

/* ── two readouts read against each other (the same score, two ages) ─────── */
.against{margin-top:clamp(30px,3.6vw,46px);display:grid;gap:clamp(18px,2.2vw,26px)}
@media(min-width:820px){.against{grid-template-columns:1fr 1fr}}
.against .specimen{height:100%;display:flex;flex-direction:column}
.against .specimen-body{flex:1;display:flex;flex-direction:column}
.against .readout b{font-size:clamp(3.2rem,2rem + 3.4vw,4.4rem)}
.against .spec-note{margin-top:auto;padding-top:18px}

/* ── the centers ─────────────────────────────────────────────────────────── */
.centers{margin-top:clamp(26px,3vw,38px)}
.center{padding:clamp(18px,2.2vw,24px) 0;border-top:1px solid var(--line-2);
  display:grid;gap:6px}
@media(min-width:720px){
  .center{grid-template-columns:minmax(0,.5fr) minmax(0,1fr) auto;
    gap:clamp(16px,2.4vw,32px);align-items:baseline}
}
.center h3{font-size:1.2rem;letter-spacing:-.018em}
.center address{font-style:normal;font-size:.9375rem;color:var(--bone-2);line-height:1.55}
.center-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.9375rem;color:var(--bone);text-decoration:none;font-weight:500;
  white-space:nowrap}
.center-go:hover{color:var(--heat-deep)}
.center-acts{display:flex;align-items:center;gap:20px;margin:0}
.center-go--quiet{color:var(--bone-3);font-weight:400}

/* ── the people ──────────────────────────────────────────────────────────── */
.people{margin-top:clamp(26px,3vw,38px);display:grid;gap:clamp(22px,2.6vw,32px)}
@media(min-width:900px){.people{grid-template-columns:1fr 1fr}}
.person{padding-top:20px;border-top:1px solid var(--line-2)}
.person h3{font-size:1.2rem;letter-spacing:-.02em}
.person .role{margin-top:7px;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--heat-deep)}
.person p{margin-top:14px;font-size:.9375rem;color:var(--bone-2);line-height:1.6}
.person--memoriam{border-top-color:var(--line)}
.person--memoriam .role{color:var(--bone-3)}

/* ── questions ───────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.0625rem;
  line-height:1.35;letter-spacing:-.015em;color:var(--bone);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;
  margin-top:6px;border-right:1.5px solid var(--bone-3);border-bottom:1.5px solid var(--bone-3);
  rotate:45deg;transition:rotate .3s var(--ease),border-color .3s var(--ease)}
.faq summary:hover::after{border-color:var(--heat-deep)}
.faq details[open] summary::after{rotate:-135deg;margin-top:11px}
.faq details[open] summary{color:var(--heat-hi)}
.faq-a{padding:0 0 24px}
.faq-a p{color:var(--bone-2);line-height:1.62}
.faq-a p+p{margin-top:12px}

/* ── forms ───────────────────────────────────────────────────────────────── */
.form{margin-top:clamp(26px,3vw,38px)}
.form-grid{display:grid;gap:18px}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--bone-3)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--bone);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;min-height:52px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);appearance:none}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--bone-3) 50%),linear-gradient(135deg,var(--bone-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--heat);box-shadow:0 0 0 3px rgba(var(--accent),.16)}
.form-note{margin-top:18px;font-size:.875rem;color:var(--bone-3);line-height:1.55}
.form-note a{color:var(--bone-2)}
.dark .field label{color:var(--ink-deck-3)}
/* background-COLOR, not the shorthand: the shorthand resets background-size and
   -position, which blew the select's two 5px arrow gradients up to fill the
   box — the light-grey field with white text Anthony reported. */
.dark .field input,.dark .field select,.dark .field textarea{
  background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:#FFFFFF}
.dark .field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-deck-3) 50%),linear-gradient(135deg,var(--ink-deck-3) 50%,transparent 50%)}
.dark .form-note{color:var(--ink-deck-3)}
.dark .form-note a{color:var(--ink-deck-2)}

/* ── the scheduler ───────────────────────────────────────────────────────── */
.scheduler{margin-top:clamp(22px,2.6vw,32px);border:1px solid var(--line-2);
  border-radius:var(--r-card);overflow:hidden;background:var(--bg-3);
  box-shadow:0 30px 70px -44px rgba(13,17,23,.30)}
.scheduler iframe{display:block;width:100%;min-height:900px;border:0}
.scheduler-open{margin-bottom:14px}
a.link{color:var(--bone);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-3)}
a.link:hover{color:var(--heat-deep);text-decoration-color:currentColor}

/* ── a figure that carries a caption ─────────────────────────────────────── */
.shot{margin:clamp(30px,3.6vw,46px) 0 0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg-2)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.shot figcaption{padding:15px clamp(16px,2vw,22px);font-size:.875rem;color:var(--bone-3);
  line-height:1.5;border-top:1px solid var(--line)}

/* ── the mobile menu ─────────────────────────────────────────────────────── */
.menu-btn{display:none;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;cursor:pointer;
  font:inherit;color:var(--bone)}
.menu-btn i{position:relative;display:block;width:20px;height:1.5px;background:currentColor;
  transition:background .2s var(--ease)}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:20px;
  height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn i::before{top:-6px}
.menu-btn i::after{top:6px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){.menu-btn{display:inline-flex}}

.sheet{position:fixed;inset:0;z-index:39;background:var(--bg);
  padding:calc(var(--rail-h) + 24px) 0 40px;overflow-y:auto;
  visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
.sheet[data-open]{visibility:visible;opacity:1}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{display:flex;align-items:center;min-height:60px;
  border-bottom:1px solid var(--line);font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;
  font-weight:500;font-size:1.32rem;letter-spacing:-.02em;color:var(--bone);
  text-decoration:none}
.sheet nav a[aria-current]{color:var(--heat-hi)}
.sheet-end{margin-top:30px;display:flex;flex-direction:column;gap:13px;align-items:stretch}
.sheet-note{margin-top:20px;font-size:.875rem;color:var(--bone-3)}
@media(min-width:901px){.sheet{display:none}}
body.is-locked{overflow:hidden}

/* ── the footer, carrying real contact detail now there is a site ────────── */
.footer-cols address{font-style:normal;margin-top:6px;font-size:.9375rem;
  color:var(--bone-3);line-height:1.55;max-width:26ch}

/* The cropped aperture. Its gradient stops are set here, not on the SVG: a
   stop-color presentation attribute is overridden by CSS, so putting the
   palette in the markup would be a value that silently never applies. */
#pa stop:nth-child(1){stop-color:var(--heat-pale)}
#pa stop:nth-child(2){stop-color:var(--heat)}
#pa stop:nth-child(3){stop-color:var(--heat-dark)}
#pa stop:nth-child(4){stop-color:var(--heat-pale)}
.page-arc circle:nth-of-type(2){stroke:rgba(var(--edge),.11)}
.page-arc circle:nth-of-type(3){stroke:rgba(var(--edge),.06)}
.dark .page-arc circle:nth-of-type(1){stroke:rgba(255,255,255,.15)}
.dark .page-arc circle:nth-of-type(2){stroke:rgba(255,255,255,.10)}
.dark .page-arc circle:nth-of-type(3){stroke:rgba(255,255,255,.06)}

/* ── A grid of tiles rather than a carousel ───────────────────────────────
   Three tiles swipe well. Thirteen do not — a reader looking for their own
   city should see the whole state at once, not scrub sideways through it. */
.tiles--grid{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tiles--grid .card--tile h3{font-size:1.2rem}
.tiles--grid .card--tile p{margin-top:9px;font-size:.875rem}
.tiles--grid .tile-body{padding:clamp(16px,1.8vw,20px)}
.tiles--grid .card--tile .more{padding-top:14px;font-size:.875rem}
@media(max-width:899px){
  /* undo the carousel the base .tiles rules impose at this width */
  .tiles--grid{grid-auto-flow:row;grid-template-columns:1fr 1fr;
    grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;
    margin-inline:0;padding-inline:0;padding-bottom:0}
  .tiles--grid + .swipe-hint{display:none}
}
@media(max-width:420px){.tiles--grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   THE SCORE LOOKUP
   The site's one genuinely interactive object. Someone arriving with a number
   from another provider — the commonest way this page is reached — can put it
   on the same scale a radiologist reads, and be handed straight back to their
   own physician. It states which published range the number falls in. It does
   not interpret, and the note under it says so.

   Progressive enhancement: hidden until boot.js sets `.js`, because an input
   that silently does nothing is worse than no input.
   ══════════════════════════════════════════════════════════════════════════ */
.lookup{display:none}
.js .lookup{display:block;margin-top:clamp(30px,3.6vw,46px);
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:var(--bg-3);
  padding:clamp(22px,2.6vw,32px);
  box-shadow:0 24px 56px -40px rgba(var(--edge),.28)}
.lookup-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.lookup-hd .tline-t{font-size:.9375rem}
.lookup-hd span{font-size:.8125rem;color:var(--bone-3)}
.lookup-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,28px);
  align-items:flex-end}
.lookup-field{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.lookup-field label{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bone-3)}
.lookup-field input{font:inherit;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;
  font-size:1.62rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  width:7ch;color:var(--bone);background:var(--bg);text-align:center;
  border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;min-height:64px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.lookup-field input:focus{outline:none;border-color:var(--heat);
  box-shadow:0 0 0 3px rgba(var(--accent),.16)}
/* the browser's spinners fight a 4-digit measurement */
.lookup-field input::-webkit-outer-spin-button,
.lookup-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lookup-field input[type=number]{-moz-appearance:textfield;appearance:textfield}

.lookup-out{flex:1 1 16rem;min-width:0}
.lookup-band{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.32rem;
  line-height:1.2;letter-spacing:-.022em;color:var(--bone-3);
  transition:color .3s var(--ease)}
.lookup-out[data-state="found"] .lookup-band{color:var(--heat-hi)}
.lookup-out[data-state="zero"] .lookup-band{color:var(--ok)}
.lookup-say{margin-top:9px;font-size:.9375rem;color:var(--bone-2);line-height:1.55;
  max-width:44ch}
.lookup .scale{margin-top:26px}
.lookup-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--bone-3);line-height:1.55;max-width:62ch}

/* ── Considered details ──────────────────────────────────────────────────
   Selection in the accent, because the accent IS the measurement here. */
::selection{background:rgba(var(--accent),.22);color:var(--bone)}
.dark ::selection,.card--deck ::selection{background:rgba(var(--accent),.42);color:#FFFFFF}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT
   This audience prints. A city page goes to the fridge or into a bag on the way
   to an appointment; the calcium ranges go to a physician. So the printed page
   drops the furniture, keeps the facts, and spells out the links it can no
   longer offer as links.
   ══════════════════════════════════════════════════════════════════════════ */
@media print{
  .rail,.sheet,.menu-btn,.skip,.page-arc,.swipe-hint,.close .actions,
  .actions,.dark-art,.card-art,.footer-cols,.footer-brand .btn{display:none !important}
  html,body{background:#FFFFFF;color:#000000}
  .section,.close,.page-hero,.dark{padding:14pt 0;border-top:1px solid #CCCCCC;
    background:#FFFFFF !important;color:#000000 !important}
  .dark *,.card--deck *{color:#000000 !important}
  .card--deck{position:static;min-height:0;border:1px solid #CCCCCC;
    box-shadow:none;filter:none !important;transform:none !important;
    background:#FFFFFF !important;break-inside:avoid}
  .card-copy{background:none !important;margin-top:0}
  .card-copy::before{display:none}
  .deck{gap:12pt}
  h1{font-size:20pt}
  h2{font-size:15pt}
  h3,.card-copy h3{font-size:12pt}
  body,p,li,dd{font-size:10pt;line-height:1.4}
  .lede{font-size:11pt}
  /* a printed link is only useful if it says where it goes */
  main a[href^="http"]::after,main a[href^="/"]::after{content:" (" attr(href) ")";
    font-size:8pt;color:#555555;word-break:break-all}
  main a[href^="tel:"]::after,main a[href^="mailto:"]::after{content:""}
  /* A map URL printed in full is a wall of percent-encoding that nobody can
     type. The address is right above it, so the link annotation comes off and
     the row stacks rather than running off the sheet. */
  main .center-go--quiet::after{content:"" !important}
  .center-acts{display:block}
  .center-acts a{display:block}
  .faq details{break-inside:avoid}
  .faq details .faq-a{display:block !important}
  .footer-legal{font-size:8pt;color:#333333}
  @page{margin:16mm}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MARKS
   Authored on one 24 grid at one stroke weight, so they sit in the same
   register as the aperture ring, the scale bars and the hairlines. They never
   replace a word — they arrive beside it and carry the meaning faster, which
   for an audience in its fifties and sixties is the only version worth having.
   ══════════════════════════════════════════════════════════════════════════ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* 🔴 Every drawing property sits on the REFERENCING element, never on the
   sprite. A <use> clone lands in a shadow tree that ordinary selectors cannot
   reach — `.sprite g` and `.ico .ico-hot` both missed it, and the marks
   rendered as solid black silhouettes. Only INHERITED properties cross that
   boundary, which is why the two-tone parts read custom properties. */
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.12em;
  color:var(--bone-3);fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  --ico-hot:var(--heat);--ico-arc:var(--heat);
  transition:color .3s var(--ease)}
.dark .ico,.card--deck .ico{color:var(--ink-deck-3);
  --ico-hot:var(--on-dark);--ico-arc:var(--on-dark)}

/* the hero facts, and every .stat: a mark above the figure */
.fact-ico,.stat-ico{font-size:1.32rem;display:block;margin-bottom:10px;color:var(--line-3)}
.dark .stat-ico{color:var(--ink-deck-3)}

/* the readout header carries the heart, so the label is not doing it alone */
.specimen-hd{gap:10px}
.specimen-t{display:flex;align-items:center;gap:9px}
.specimen-t .ico{font-size:1.0625rem;color:var(--heat-hi)}

/* the visit key: a clock and a stopwatch beside the two figures */
.tline-key b{display:flex;align-items:baseline;gap:8px}
.tline-key b .ico{font-size:.82em;color:var(--line-3);align-self:center}

/* an inclusion list reads as ticks, not bullets */
.finds li .ico{font-size:1.0625rem;color:var(--line-3);align-self:center}
.finds li.is-hot .ico{color:var(--heat)}

/* directions gets a pin */
.center-go--quiet .ico{font-size:1rem;margin-right:2px}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH · 2026-09-05 · Greg's round 5 (Pastel 3qjq1mv4), all 43 recovered
   Appended to site.css by the polish pass; kept as one labelled block so the
   additions can be read as one decision. Every animated property has a
   visible default; the choreography is gated on .js-anims and on the .is-on
   class main.js adds when an element enters, so with no JS, or under reduced
   motion, every drawing is simply finished.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The ring (Greg #2) ────────────────────────────────────────────────────
   "glowing, slow moving, appearing/disappearing particle effects, and slow
   redrawing of the rings over themselves… a bit more alive and glossy…
   hypnotizing… it should not scroll with the user." Four layers: the gradient
   arc turns once in 72s inside a group; a conic-gradient glow in an HTML
   element turns with it and breathes; a hairline redraws the ring over itself
   every 16s; twelve motes surface and sink. Nothing is tied to the scroll.
   Transforms and opacity only, so it composites; the SVG filter blur is gone. */
.ring-base{stroke:rgba(13,17,23,.07);stroke-width:1.5}
.ring-in{stroke:rgba(13,17,23,.10);stroke-width:1}
.ring-out{stroke:rgba(13,17,23,.06);stroke-width:1}
.ring-ticks{stroke:rgba(13,17,23,.13);stroke-width:9}
.ring-spin,.ring-ticks-g,.ring-dust{transform-box:view-box;transform-origin:50% 50%}
.js-anims .ring-spin{animation:ring-turn 72s linear infinite}
.js-anims .ring-ticks-g{animation:ring-turn 260s linear infinite reverse}
.js-anims .ring-dust{animation:ring-turn 200s linear infinite}
@keyframes ring-turn{to{transform:rotate(360deg)}}
/* the hairline that redraws the ring: hidden at rest, so it is pure motion */
.ring-redraw{stroke:rgba(232,35,44,.5);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:100 100;opacity:0}
.js-anims .ring-redraw{animation:ring-redraw 16s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes ring-redraw{
  0%{stroke-dasharray:0 100;opacity:0}
  5%{opacity:.85}
  64%{stroke-dasharray:100 100;opacity:.85}
  80%{opacity:0}
  100%{stroke-dasharray:100 100;opacity:0}}
/* the motes: each has its own period, delay and drift, set inline */
.dust{opacity:0;transform-box:fill-box;transform-origin:center}
.dust-core{fill:var(--heat)}
.dust-halo{fill:rgba(232,35,44,.20)}
.js-anims .dust{animation:dust var(--d,7s) ease-in-out var(--dl,0s) infinite}
@keyframes dust{
  0%,100%{opacity:0;transform:translate(0,0) scale(.5)}
  42%{opacity:1}
  50%{transform:translate(var(--dx,0),var(--dy,0)) scale(1)}
  58%{opacity:.9}}
/* The glow. A conic gradient with two lobes where the arc's gradient is
   brightest (the arc is rotated −90°, which puts them at 45° and 225°), masked
   to a ring around the arc's radius — 39.2% of the box, which is 78.4% of a
   closest-side ray — with soft edges doing the blurring. It turns with the arc
   and breathes. */
.ring-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.34;
  background:conic-gradient(from -25deg,rgba(232,35,44,0) 0deg,rgba(232,35,44,.55) 70deg,rgba(232,35,44,0) 140deg,
    rgba(232,35,44,0) 180deg,rgba(232,35,44,.55) 250deg,rgba(232,35,44,0) 320deg,rgba(232,35,44,0) 360deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 70%,#000 76.5%,#000 80.5%,transparent 88%);
  mask:radial-gradient(circle closest-side,transparent 70%,#000 76.5%,#000 80.5%,transparent 88%)}
.js-anims .ring-glow{animation:ring-turn 72s linear infinite,ring-breathe 6.5s ease-in-out infinite}
@keyframes ring-breathe{0%,100%{opacity:.26}50%{opacity:.46}}
/* the interior pages' quadrant turns the same way, slower */
.page-arc svg{transform-origin:50% 50%}
.js-anims .page-arc svg{animation:ring-turn 140s linear infinite}

/* ── The percentile chart (Greg #3) ──────────────────────────────────────
   Generated by _round2/chart.mjs. On the deck card it is white and
   translucent over a faint photograph ("à la prenuvo"); on the calcium page's
   Agatston card it is ink on the panel. Axes draw, curves draw from the
   origin in turn, labels fade, the score lands last. */
/* Greg r7 note 3: "too darkened because of the shadow overlaying the card."
   It was: the photograph sat at .30 over the near-black deck AND took a scrim
   that reached .58 at the foot, so neither the image nor the drawn chart read
   as anything. The photograph is up to .42 and the scrim eased off — but only
   at the top, where the chart lives. The foot keeps its weight because the
   card copy sits there and is measured against it. */
/* Greg r8 #3: "this card is pretty dark — could we try a navy blue gradient
   background? navy and red pair well." Anthony agreed to a bluish ground. The
   deck's near-black is replaced on this card by a navy ramp, and the scrim
   over the photograph is navy too so the whole card reads as one colour rather
   than a blue panel behind a black wash. The drawn chart and the copy are
   measured against it (_chart-card-check.mjs). */
.card--chart .card-art{background:linear-gradient(168deg,var(--navy-hi) 0%,var(--navy-mid) 46%,var(--navy-lo) 100%)}
/* Anthony, 2026-10-03: keep the navy, give the heart its colour back. It was
   blended by luminosity, which throws away the image's own hue and paints the
   heart navy. Lighten keeps whichever is brighter per channel: the render's
   dark-grey studio backdrop loses to the navy (the ground stays navy) and the
   pink heart wins over it (the heart stays pink). */
.card-art--chart img{opacity:.85;filter:saturate(1.35) brightness(1.1);object-position:82% 50%;mix-blend-mode:lighten}
@media(max-width:899px){.card-art--chart img{object-position:56% 30%}}
.card-art--chart::after{background:linear-gradient(180deg,rgba(9,26,49,.10) 0%,rgba(9,26,49,.24) 50%,rgba(9,26,49,.58) 100%)}
.pct{position:absolute;z-index:3;left:6%;right:6%;top:7%}
@media(min-width:900px){.pct{left:auto;right:4.5%;top:50%;translate:0 -50%;width:52%}}
.pct svg{display:block;width:100%;height:auto;overflow:visible}
.pct text{font:500 11px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:rgba(255,255,255,.74)}
.pct .pct-axl{fill:rgba(255,255,255,.5)}
.pct-grid path{stroke:rgba(255,255,255,.11);stroke-width:1}
.pct-ax{stroke:rgba(255,255,255,.64);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:100;
  transition:stroke-dashoffset 1.1s var(--ease-out) .1s}
.pct-c{stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset 1.6s var(--ease-out)}
.pct-c1{stroke:rgba(255,255,255,.40);transition-delay:.6s}
.pct-c2{stroke:rgba(255,255,255,.56);transition-delay:.85s}
.pct-c3{stroke:rgba(255,255,255,.74);transition-delay:1.1s}
.pct-c4{stroke:rgba(255,255,255,.94);transition-delay:1.35s}
.pct-lab{transition:opacity .7s ease 2.2s}
.pct-grid{transition:opacity .9s ease .5s}
.pct-pt{transform-box:fill-box;transform-origin:center;
  transition:transform .8s var(--ease-out) 2.5s,opacity .3s ease 2.5s}
.pct-dot{fill:var(--heat)}
.pct-halo{fill:none;stroke:rgba(232,35,44,.7);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.js-anims .pct.is-on .pct-halo{animation:pct-pulse 2.6s ease-out 3.3s infinite}
@keyframes pct-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.pct-tag{position:absolute;right:0;top:-1.5em;font-size:.8125rem;color:var(--ink-deck-3)}
.js-anims .pct:not(.is-on) .pct-ax,.js-anims .pct:not(.is-on) .pct-c{stroke-dashoffset:100}
.js-anims .pct:not(.is-on) .pct-lab,.js-anims .pct:not(.is-on) .pct-grid{opacity:0}
.js-anims .pct:not(.is-on) .pct-pt{transform:scale(0);opacity:0}
/* ink, on a light panel */
.pct--ink text{fill:var(--bone-3)}
.pct--ink .pct-axl{fill:var(--bone-3)}
.pct--ink .pct-grid path{stroke:var(--line)}
.pct--ink .pct-ax{stroke:var(--line-3)}
.pct--ink .pct-c1{stroke:rgba(13,17,23,.16)}
.pct--ink .pct-c2{stroke:rgba(13,17,23,.28)}
.pct--ink .pct-c3{stroke:rgba(13,17,23,.42)}
.pct--ink .pct-c4{stroke:rgba(13,17,23,.6)}
.pct--ink .pct-tag{color:var(--bone-3)}
.vis-art .pct{left:6%;right:6%;top:52%;translate:0 -50%;width:auto}

/* ── Drawn cards: the three steps (Greg #4/#5/#6/#22) and the Agatston
   items (#33) ──────────────────────────────────────────────────────────────
   A light panel with a hairline drawing on it, then the words. The drawings
   use four strokes — ink, faint, hot, and a soft bar for "text" — and two
   verbs: .draw (a stroke that draws itself) and .grow (a bar that types
   itself). Delays are set inline per element, so the sequence reads in the
   markup. */
.steps-vis,.agat{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:860px){.steps-vis,.agat{grid-template-columns:repeat(3,1fr)}}
.vis-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.vis-art{position:relative;margin:0;aspect-ratio:16 / 10;background:var(--bg-2);border-bottom:1px solid var(--line);overflow:hidden}
@media(min-width:860px){.vis-art{aspect-ratio:4 / 3}}
.vis-art > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vis-body{padding:clamp(22px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.step-n{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;
  align-items:center;justify-content:center;font-size:.8125rem;color:var(--heat-deep);
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.vis-body h3{font-size:1.2rem;letter-spacing:-.018em}
.vis-body p{font-size:.9375rem;color:var(--bone-2);line-height:1.55}
/* Greg r7 note 25: on a phone the number sat on its own line above the
   headline, which cost every step card a whole row. The two share a row now
   and the paragraph runs the full width beneath them. The headline is nudged
   3px so its first line sits against the middle of the 30px disc rather than
   its top — the disc is taller than a line of type. */
@media(max-width:899px){
  .vis-body{display:grid;grid-template-columns:auto 1fr;align-items:start;
            column-gap:12px;row-gap:8px}
  .vis-body .step-n{margin-bottom:0;grid-column:1;grid-row:1}
  .vis-body h3{grid-column:2;grid-row:1;margin-top:3px}
  .vis-body p{grid-column:1 / -1;grid-row:2}
}
/* strokes */
.sk{fill:none;stroke:var(--bone-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sk-faint{stroke:var(--line-2)}
.sk-fill{fill:var(--bg-3)}
.sk-hot{stroke:var(--heat)}
.sk-bar{fill:none;stroke:var(--line-2);stroke-width:5;stroke-linecap:round}
.sk-bar--ink{stroke:var(--bone-3)}
.sk-text{font:500 11px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:var(--bone-3)}
.sk-text--name{fill:var(--bone-2)}
/* verbs — the finished picture is the default */
.draw{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease-out) var(--d,0s)}
.grow{transform-box:fill-box;transform-origin:left center;transition:transform .6s var(--ease-out) var(--d,0s)}
.js-anims [data-enter]:not(.is-on) .draw{stroke-dashoffset:100}
.js-anims [data-enter]:not(.is-on) .grow{transform:scaleX(0)}
/* step 2: the clock counts twelve seconds, on a loop; the gantry plane breathes */
.s2-glow{stroke:rgba(232,35,44,.32);stroke-width:6;stroke-linecap:round}
.s2-arc{stroke-dasharray:100;stroke-dashoffset:0}
.s2-hand{transform-box:view-box;transform-origin:var(--ox,64px) var(--oy,60px);transform:rotate(72deg)}
.js-anims [data-enter]:not(.is-on) .s2-arc{stroke-dashoffset:100}
.js-anims [data-enter]:not(.is-on) .s2-hand{transform:rotate(0deg)}
.js-anims [data-enter].is-on .s2-arc{animation:s2-arc 7s var(--ease-out) infinite}
.js-anims [data-enter].is-on .s2-hand{animation:s2-hand 7s var(--ease-out) infinite}
.js-anims [data-enter].is-on .s2-glow{animation:breathe 4s ease-in-out infinite}
@keyframes s2-arc{0%{stroke-dashoffset:100;opacity:1}46%{stroke-dashoffset:0}84%{stroke-dashoffset:0;opacity:1}94%{opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@keyframes s2-hand{0%{transform:rotate(0deg);opacity:1}46%{transform:rotate(72deg)}84%{transform:rotate(72deg);opacity:1}94%{opacity:0}100%{transform:rotate(0deg);opacity:0}}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
/* step 3: the front report arrives over the copy that went to the physician */
.s3-front{transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease-out),opacity .6s ease}
.js-anims [data-enter]:not(.is-on) .s3-front{transform:translateY(14px);opacity:0}
/* the Agatston drawings */
.sc-band{fill:var(--line-2)}
.sc-band--on{fill:var(--heat)}
.sc-val{font:500 24px Archivo,"Archivo Fallback",system-ui,sans-serif;fill:var(--heat-hi);letter-spacing:-.02em}
.sc-glow{fill:rgba(232,35,44,.20)}
.sc-dot{fill:var(--heat)}
.js-anims .vis-art--ct.is-on .sc-glow{animation:breathe 3.2s ease-in-out infinite}

/* ── The film, right of the words (Greg #12) ─────────────────────────────
   Dark because it is the video. Wide: copy left, film right. Phone: headline,
   film, body — the wrapper becomes display:contents so its children can be
   ordered among the grid items. */
.film{position:relative;overflow:hidden;background:var(--deck);color:var(--ink-deck);
  padding:clamp(58px,7.4vw,116px) 0;border-top:1px solid var(--line)}
.film .wrap{display:grid;gap:clamp(24px,3vw,40px)}
@media(min-width:900px){.film .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(44px,5.5vw,88px)}}
.film h2{color:#FFFFFF;max-width:16ch}
.film-body{margin-top:22px}
.film-body p{color:var(--ink-deck-2);line-height:1.66;letter-spacing:.004em;font-size:1.0625rem;max-width:48ch}
.film-body p+p{margin-top:16px}
.film-frame{position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:1;background:#000;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 80px -40px rgba(0,0,0,.8)}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:899px){
  .film-copy{display:contents}
  .film h2{order:1}
  .film-frame{order:2}
  .film-body{order:3;margin-top:0}
}

/* ── A clear photograph behind a dark band (Greg #21) ────────────────────
   The heart is meant to be seen, so the scrim only covers the words' side and
   the band is tall enough to hold the picture. */
.dark--clear{min-height:clamp(420px,44vw,600px);display:flex;align-items:center}
.dark--clear .wrap{width:100%}
.dark--clear .dark-art img{opacity:.96;object-position:76% 50%}
.dark--clear .dark-art::after{background:linear-gradient(90deg,rgba(var(--deck-rgb),.94) 0%,rgba(var(--deck-rgb),.84) 34%,rgba(var(--deck-rgb),.3) 58%,rgba(var(--deck-rgb),0) 100%)}
@media(max-width:759px){
  .dark--clear .dark-art img{object-position:50% 84%}
  .dark--clear .dark-art::after{background:linear-gradient(180deg,rgba(var(--deck-rgb),.94) 0%,rgba(var(--deck-rgb),.82) 46%,rgba(var(--deck-rgb),.28) 100%)}
}

/* ── The plaque map (Greg #29) ───────────────────────────────────────────
   A drawn heart with each plaque marked and reported the way the Harrison
   Unified score reports it. Markers pop in turn; each rings continuously. */
.hmap{display:grid;gap:18px;align-items:center}
@media(min-width:560px){.hmap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.hmap-fig{position:relative;margin:0}
.hmap-fig img{display:block;width:100%;height:auto}
.pq-dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--heat);color:#FFFFFF;
  font:600 .6875rem/1 Manrope,"Manrope Fallback",system-ui,sans-serif;font-style:normal;
  box-shadow:0 0 0 4px rgba(232,35,44,.16),0 6px 14px -6px rgba(232,35,44,.6);
  transition:opacity .5s var(--ease-out) var(--dl,0s),transform .6s var(--ease-out) var(--dl,0s)}
.pq-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(232,35,44,.55)}
.js-anims .hmap.is-on .pq-dot::after{animation:pq-pulse 2.8s ease-out var(--dl,0s) infinite}
@keyframes pq-pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.pq-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pq-list li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  font-size:.875rem;line-height:1.45;color:var(--bone-2);
  transition:opacity .5s ease var(--dl,0s),transform .5s var(--ease-out) var(--dl,0s)}
.pq-list b{display:flex;gap:8px;align-items:center;color:var(--bone);font-weight:600;margin-bottom:4px}
.pq-n{width:20px;height:20px;border-radius:50%;background:var(--heat);color:#FFFFFF;font-size:.6875rem;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.js-anims .hmap:not(.is-on) .pq-dot{opacity:0;transform:scale(.4)}
.js-anims .hmap:not(.is-on) .pq-list li{opacity:0;transform:translateY(8px)}
.specimen--map .specimen-body{padding:20px 20px 22px}
.specimen--map .spec-note{margin-top:16px}
@media(min-width:1000px){.page-hero--obj .page-obj .specimen--map{max-width:560px;margin-left:auto}}

/* ── The Harrison band's checklist ──────────────────────────────────────── */
.finds--dark{margin-top:26px}
.finds--dark li{border-bottom-color:rgba(255,255,255,.14);color:var(--ink-deck-2)}
.dark .finds li.is-hot .ico{color:var(--on-dark)}

/* ── Affordable, with a picture (Greg #23) ───────────────────────────────── */
.afford{display:grid;gap:clamp(28px,3.4vw,48px);align-items:start}
@media(min-width:900px){.afford{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.afford-copy .rows{margin-top:clamp(22px,2.6vw,34px)}
.afford-pic{max-width:520px}
@media(min-width:900px){.afford-pic{position:sticky;top:calc(var(--rail-h) + 34px)}}

/* ── Affirm, inline (Greg #25) ───────────────────────────────────────────
   🔴 The word stands in for Affirm's licensed wordmark until the asset is in;
   the rates sentence follows their standard merchant disclosure pattern and
   must be checked against their current required wording. */
.pay{margin-top:18px;font-size:.9375rem;color:var(--bone-2)}
.pay b{color:var(--bone);font-weight:600}
.affirm{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;color:var(--bone);font-size:1.05em}
/* The financing line on a dark band (/book-your-scan/): the figure and the
   Affirm name kept their ink colour and rendered black on black — measured
   1.03:1, and invisible to the eye. The line itself steps up to the deck's
   secondary ink so the three parts read as one sentence. */
.dark .pay{color:var(--ink-deck-2)}
.dark .pay b,.dark .affirm{color:#FFFFFF}
.close .pay{margin:24px auto 0}
.close .pay+.close-note{margin-top:12px}
.price-face .pay{margin-top:16px}

/* ── Social, in the footer (Greg #8) ─────────────────────────────────────── */
.social{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:8px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--bone-2);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
@media(hover:hover) and (pointer:fine){
.social a:hover{color:var(--heat-deep);border-color:var(--line-3);transform:translateY(-2px)}
}
.social .ico{font-size:1.25rem;color:inherit}

/* ── #42, the deck ───────────────────────────────────────────────────────
   "The second card starts moving up early, before it's covered." A sticky
   card is released when its container ends, and the container ends 16px
   below the LAST card's foot — so any card taller than the one after it is
   pushed up before it is covered. The readout card flowed to its content and
   was ~150px taller than the photo cards. Every deck card now shares one
   height, which is the whole fix. */
.card--chart{min-height:min(560px,78vh)}
@media(max-width:899px){.card--chart{min-height:min(calc(var(--vhl) * 66),480px)}}

/* ── The three steps as photo tiles (Anthony, 2026-09-05: "imagery the way
   Prenuvo did") ──────────────────────────────────────────────────────────
   Prenuvo's tile: a full-bleed picture, copy at the foot, and thin white
   translucent data graphics laid over the picture. Ours: a portrait card on
   the deck ground, the plate darkened to the same floor the deck cards use, the
   step's drawing in light ink over the upper half, and the step's figures set
   as small readouts above the headline. Step two's picture is the scan film. */
.steps-pv{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:900px){.steps-pv{grid-template-columns:repeat(3,1fr)}}
.card.pv-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:3 / 4;background:var(--deck);border-color:rgba(255,255,255,.14);color:var(--ink-deck);
  box-shadow:0 30px 70px -34px rgba(var(--edge),.55)}
@media(max-width:899px){.card.pv-card{aspect-ratio:auto;min-height:min(78svh,560px)}}
.pv-media{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--deck)}
.pv-media img,.pv-media video{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block;
  filter:brightness(.72) saturate(.94)}
.pv-card--s2 .pv-media video{object-position:50% 50%;filter:none}
.pv-card--s2 .pv-media img{object-position:50% 46%}
/* the person on the table: the ring fills the top-left, so this tile's clock sits top-right over the wall */
.pv-card--s2 .pv-viz{left:auto;right:7%}
/* the wash: darker where the drawing sits and where the copy sits, the picture
   left alone between them */
.pv-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--deck-rgb),.6) 0%,rgba(var(--deck-rgb),.34) 34%,rgba(var(--deck-rgb),.26) 50%,rgba(var(--deck-rgb),.7) 70%,rgba(var(--deck-rgb),.94) 100%)}
.pv-viz{position:absolute;left:7%;top:6%;width:54%;aspect-ratio:4 / 3;z-index:2;pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.pv-viz svg{width:100%;height:100%;display:block;overflow:visible}
/* light ink over a picture */
.pv-viz .sk{stroke:rgba(255,255,255,.9)}
.pv-viz .sk-faint{stroke:rgba(255,255,255,.42)}
.pv-viz .sk-fill{fill:rgba(11,13,16,.34)}
.pv-viz .sk-bar{stroke:rgba(255,255,255,.42)}
.pv-viz .sk-bar--ink{stroke:rgba(255,255,255,.82)}
.pv-viz .sk-text{fill:rgba(255,255,255,.8)}
.pv-viz .sk-text--lg{font-size:14px;font-weight:500}
.pv-viz .sk-hot{stroke:var(--on-dark)}
.pv-viz .sk-dot{fill:rgba(255,255,255,.9)}
.pv-copy{position:relative;z-index:3;padding:clamp(22px,2.4vw,30px)}
.pv-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px;font-size:.8125rem;color:var(--ink-deck-3)}
.pv-stats span{display:inline-flex;align-items:baseline;gap:6px}
.pv-stats b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.32rem;line-height:1;
  letter-spacing:-.02em;color:#FFFFFF;font-variant-numeric:tabular-nums}
.pv-copy h3{display:flex;gap:12px;align-items:flex-start;color:#FFFFFF;font-size:1.32rem;letter-spacing:-.02em;max-width:24ch}
.pv-copy .step-n{flex:none;margin:1px 0 0;border-color:rgba(255,255,255,.3);color:var(--on-dark);font-size:.75rem;width:26px;height:26px}
.pv-copy p{margin-top:10px;font-size:.9375rem;line-height:1.55;color:var(--ink-deck-2);letter-spacing:.004em}
.pv-copy .more{color:#FFFFFF;margin-top:14px}
.pv-copy .more:hover{color:var(--on-dark)}
.pv-copy ::selection{background:rgba(var(--accent),.42);color:#FFFFFF}

/* ── The field of findings (Anthony, 2026-09-05: Prenuvo's "red one that
   lists the things") ──────────────────────────────────────────────────────
   One dark card: a red macro behind, the words on the left over the darkest
   part, and on the right a constellation of labelled nodes (_round2/field.mjs).
   The strand draws itself, the nodes pop in in turn and then each breathes on
   its own period, the whole strand drifts. Labels carry a dark stroke under the
   letters (paint-order) so they read over any part of the picture. */
.card.field{position:relative;overflow:hidden;display:grid;margin-top:clamp(28px,3.4vw,44px);
  background:var(--deck);border-color:rgba(255,255,255,.14);color:var(--ink-deck);min-height:min(680px,88vh);
  box-shadow:0 30px 70px -34px rgba(var(--edge),.55)}
@media(min-width:900px){.card.field{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.field-media{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--deck)}
.field-media img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;display:block}
.field-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--deck-rgb),.9) 0%,rgba(var(--deck-rgb),.74) 38%,rgba(var(--deck-rgb),.36) 62%,rgba(var(--deck-rgb),.24) 100%)}
.field-copy{position:relative;z-index:2;padding:clamp(26px,3.6vw,56px);align-self:center}
.field-copy h2{color:#FFFFFF;max-width:14ch}
.field-copy .lede{margin-top:18px;color:var(--ink-deck-2);max-width:40ch}
.field-copy .pv-stats{margin:24px 0 0}
.field-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;max-width:46ch}
.field-list li{display:flex;gap:10px;align-items:baseline;font-size:.9375rem;line-height:1.5;color:var(--ink-deck-2)}
.field-list b{color:#FFFFFF;font-weight:600}
.field-list .ico{flex:none;font-size:1rem;color:var(--on-dark);align-self:center}
/* The same list on paper (Greg r8 #9's section sits on a light ground). The
   dark-band colours above are white-on-deck and disappear here. */
.field-list--ink li{color:var(--bone-2)}
.field-list--ink b{color:var(--bone)}
.field-list--ink .ico{color:var(--heat)}
.field-list--ink{max-width:60ch;gap:13px}

.field-viz{position:relative;z-index:2;min-height:460px}
.field-viz svg{position:absolute;left:6%;top:4%;width:88%;height:92%;display:block;overflow:visible}
.js-anims .field-viz svg{animation:field-drift 16s ease-in-out infinite alternate}
@keyframes field-drift{to{transform:translateY(-10px)}}
.strand{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 2.6s var(--ease-out) .2s}
.xlink{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--ease-out) 1.4s}
.node{transform-box:fill-box;transform-origin:center;
  transition:opacity .6s ease var(--d,0s),transform .7s var(--ease-out) var(--d,0s)}
.node-lead{stroke:rgba(255,255,255,.36);stroke-width:1}
.node-dot{fill:#FFFFFF}
.node--hot .node-dot{fill:var(--on-dark)}
.node-halo{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1;transform-box:fill-box;transform-origin:center}
.node--hot .node-halo{stroke:rgba(255,138,144,.7)}
.node text{font:500 14px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:rgba(255,255,255,.92);
  paint-order:stroke;stroke:rgba(11,13,16,.6);stroke-width:3px;stroke-linejoin:round}
.js-anims .field:not(.is-on) .strand,.js-anims .field:not(.is-on) .xlink{stroke-dashoffset:100}
.js-anims .field:not(.is-on) .node{opacity:0;transform:scale(.3)}
.js-anims .field.is-on .node{animation:node-breathe var(--p,7s) ease-in-out calc(var(--d,0s) + 1.2s) infinite}
@keyframes node-breathe{0%,100%{opacity:1}50%{opacity:.5}}
.js-anims .field.is-on .node--hot .node-halo{animation:pq-pulse 3.4s ease-out calc(var(--d,0s) + 1.4s) infinite}
@media(max-width:899px){
  .card.field{min-height:0}
  .field-viz{order:-1;min-height:500px}
  /* the SVG scales to about half here, so the labels are set larger in user
     units to land near 10px on screen */
  .node text{font-size:20px}
  .node-dot{r:5}
  .node-halo{r:12}
  .field-media img{object-position:50% 28%}
  .field-media::after{background:linear-gradient(180deg,rgba(var(--deck-rgb),.3) 0%,rgba(var(--deck-rgb),.52) 52%,rgba(var(--deck-rgb),.94) 100%)}
  .field-copy{padding-top:6px}
}


/* ── The aperture as a gauge (Anthony, 2026-09-05) ─────────────────────────
   The calcium score read on the site's own ring, laid over a human picture the
   way Prenuvo rings the surfer. Generated by _round2/gauge.mjs. The outer ring
   draws, the lit band draws, the marker lands, the number counts up (main.js). */
.field--gauge .field-media img{object-position:78% 50%}
.field--gauge .field-viz{min-height:480px}
.field--gauge .field-viz svg{left:8%;top:6%;width:84%;height:88%}
/* Greg r7 note 11, the whole sequence he asked for:
     0.0s  the outer ring draws
     0.35s the four bands draw one at a time, clockwise, 0.42s apart
     +0.2s each band's own figure appears once that band has drawn
     2.6s  the marker leaves zero and travels round to the score, and the
           number counts with it — both LINEAR, so they correspond exactly
           (main.js honours data-count-delay / -dur / -linear)
     4.2s  the marker lands: its band warms to red, the pulse starts, the
           word for the band appears.
   Everything is expressed as a transition from the .is-on state, as the rest
   of this file does, so with no JS the dial is simply finished and correct. */
/* Greg r8 #8: the outer ring arrives whole rather than drawing itself. */
.gauge-ring{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2;
  transition:opacity .4s ease .05s}
.gauge-in{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
/* Butt caps, for two reasons Greg gave: a round cap on a zero-length stroke
   draws a dot at the end of every section before it is drawn, and the caps ate
   into the gaps. Each band's draw time is proportional to its own length and
   starts exactly where the previous one finished, so the four read as one
   continuous sweep with no stutter between them. */
.gauge-seg{fill:none;stroke:rgba(255,255,255,.24);stroke-width:10;stroke-linecap:butt;
  stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset var(--seg-dur,.4s) linear var(--seg-at,.3s)}
.gauge-seg:nth-of-type(1){--seg-at:.30s;--seg-dur:.20s}
.gauge-seg:nth-of-type(2){--seg-at:.50s;--seg-dur:.40s}
.gauge-seg:nth-of-type(3){--seg-at:.90s;--seg-dur:.60s}
.gauge-seg:nth-of-type(4){--seg-at:1.50s;--seg-dur:.60s}
/* the reading band holds the neutral stroke until the marker arrives on it */
.gauge-seg--on{stroke:var(--heat);
  transition:stroke-dashoffset .52s var(--ease-out) calc(.35s + var(--i,0) * .42s),
             stroke .45s ease 4.2s}
.gauge-tick{font:500 11px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:rgba(255,255,255,.62);
  transition:opacity .34s ease calc(.52s + var(--i,0) * .40s)}
.gauge-arm{transform-box:view-box;transform-origin:200px 200px;
  transition:rotate 1.6s linear 2.6s}
.gauge-mark{fill:#FFFFFF;transform-box:fill-box;transform-origin:center;
  transition:transform .4s var(--ease-out) 2.45s,opacity .3s ease 2.45s}
/* r8 #8: no static red ring sitting around the marker before the pulse — the
   halo only exists while it is pulsing. */
.gauge-halo{fill:none;stroke:rgba(255,138,144,.75);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.gauge-num{font:500 88px Archivo,"Archivo Fallback",system-ui,sans-serif;fill:#FFFFFF;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.gauge-lab{font:500 13px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:rgba(255,255,255,.78)}
.gauge-tag{font:600 12px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:var(--on-dark);
  transition:opacity .45s ease 4.3s}
/* the state before it runs */
.js-anims .field:not(.is-on) .gauge-ring{opacity:0}
.js-anims .field:not(.is-on) .gauge-seg{stroke-dashoffset:100}
.js-anims .field:not(.is-on) .gauge-seg--on{stroke:rgba(255,255,255,.24)}
.js-anims .field:not(.is-on) .gauge-tick,
.js-anims .field:not(.is-on) .gauge-tag{opacity:0}
.js-anims .field:not(.is-on) .gauge-arm{rotate:var(--travel,0deg)}
.js-anims .field:not(.is-on) .gauge-mark{transform:scale(0);opacity:0}
/* the pulse only starts once the marker has landed */
.js-anims .field.is-on .gauge-halo{animation:pq-pulse 3s ease-out 4.4s infinite}
@media(max-width:899px){
  .gauge-lab{font-size:15px}.gauge-tag{font-size:14px}.gauge-tick{font-size:13px}
  /* Anthony, 2026-10-03: on a phone this card "takes up more than the full
     screen and doesn't show the woman at all". Two causes: the phone crop
     (shore-p.jpg) had been cut from the empty left of the beach, and the gauge
     had a fixed 400px block over 350px of copy — 760px of card. Now: a new
     crop framed on her (shore-p2.jpg, from the 2752px source, mirrored), the
     gauge at 58% in the open sky beside her rather than over her, a tighter
     headline, and a scrim that only darkens under the copy. 570px. */
  .field--gauge .field-media img{object-position:74% 0%}
  .field--gauge .field-media::after{background:linear-gradient(180deg,rgba(var(--deck-rgb),.10) 0%,rgba(var(--deck-rgb),.18) 38%,rgba(var(--deck-rgb),.78) 62%,rgba(var(--deck-rgb),.94) 100%)}
  .field--gauge .field-viz{min-height:0;aspect-ratio:1 / .78}
  .field--gauge .field-viz svg{left:3%;top:6%;width:58%;height:auto}
  .field--gauge .field-copy{padding-top:0}
  .field--gauge .field-copy h2{font-size:1.55rem;line-height:1.15;max-width:15ch}
  .field--gauge .field-copy .lede{margin-top:12px;font-size:1rem}
}

/* ── The calcium page (Anthony, 2026-09-05: "more of the same") ──────────── */
/* the gauge alone, in ink, beside the headline */
.gauge-solo{position:relative;width:min(100%,520px);aspect-ratio:1;margin-inline:auto}
.gauge-solo svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.gauge-solo .gauge-ring{stroke:rgba(13,17,23,.16)}
.gauge-solo .gauge-in{stroke:rgba(13,17,23,.08)}
.gauge-solo .gauge-seg{stroke:var(--line-2)}
.gauge-solo .gauge-seg--on{stroke:var(--heat)}
.gauge-solo .gauge-mark{fill:var(--bone)}
.gauge-solo .gauge-halo{stroke:rgba(232,35,44,.55)}
.gauge-solo .gauge-num{fill:var(--bone)}
.gauge-solo .gauge-lab{fill:var(--bone-2)}
.gauge-solo .gauge-tag{fill:var(--heat-deep)}
.gauge-solo .gauge-tick{fill:var(--bone-3)}
.js-anims .gauge-solo:not(.is-on) .gauge-ring{opacity:0}
.js-anims .gauge-solo:not(.is-on) .gauge-seg{stroke-dashoffset:100}
.js-anims .gauge-solo:not(.is-on) .gauge-seg--on{stroke:var(--line-2)}
.js-anims .gauge-solo:not(.is-on) .gauge-tick,
.js-anims .gauge-solo:not(.is-on) .gauge-tag{opacity:0}
.js-anims .gauge-solo:not(.is-on) .gauge-arm{rotate:var(--travel,0deg)}
.js-anims .gauge-solo:not(.is-on) .gauge-mark{transform:scale(0);opacity:0}
.js-anims .gauge-solo.is-on .gauge-halo{animation:pq-pulse 3s ease-out 4.4s infinite}
@media(min-width:1000px){.page-hero--obj .page-obj .gauge-solo{margin-left:auto;margin-right:0}}
/* The couples hero picture (Greg r7 note 28). Portrait beside the headline on a
   wide screen, landscape under it on a phone; both crops keep the two faces,
   which sit a little right of centre in the upper half of the frame. */
/* The city picture in a location hero (Greg r8 #20), with the address under it
   — the picture replaced the card that used to carry it. */
.city-photo{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4 / 3;
  background:var(--bg-2);box-shadow:0 30px 70px -44px rgba(13,17,23,.34)}
.city-photo img{display:block;width:100%;height:100%;object-fit:cover}
.city-addr{margin-top:16px;font-size:.9375rem;line-height:1.55;color:var(--bone-2)}
.city-addr .em{color:var(--bone);font-weight:500}
.city-addr .center-acts{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
@media(min-width:1000px){
  .page-hero--obj .page-obj .city-photo{max-width:520px;margin-left:auto}
  .page-hero--obj .page-obj .city-addr{max-width:520px;margin-left:auto}
}
.couple-photo{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4 / 5;
  max-width:520px;background:var(--bg-2);box-shadow:0 34px 80px -44px rgba(13,17,23,.38)}
.couple-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
@media(min-width:1000px){.page-hero--obj .page-obj .couple-photo{margin-left:auto}}
@media(max-width:999px){.couple-photo{aspect-ratio:4 / 3;max-width:none}
  .couple-photo img{object-position:60% 22%}}
/* readouts on the light ground */
.pv-stats--ink{color:var(--bone-3);margin-top:18px}
.pv-stats--ink b{color:var(--bone)}
/* two tiles side by side */
.duo{margin-top:clamp(32px,4vw,52px);display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:860px){.duo{grid-template-columns:1fr 1fr}}
.card.pv-card--sq{aspect-ratio:1}
@media(max-width:859px){.card.pv-card--sq{aspect-ratio:auto;min-height:min(78svh,560px)}}
/* r9 #6: "larger graphic". The whole SVG scales with the box, so widening
   it is what makes the number, the bands and their names bigger. It stays
   clear of the copy block at the foot of the square card. */
.pv-viz--wide{width:82%;left:9%;aspect-ratio:400 / 234;top:6%}
.pv-viz--wide .sk-text{fill:rgba(255,255,255,.8)}
.pv-viz--wide .sk-text--name{fill:#FFFFFF}
.pv-viz--wide .sc-band{fill:rgba(255,255,255,.32)}
.pv-viz--wide .sc-band--on{fill:var(--heat)}
.pv-viz--wide .sc-val{fill:#FFFFFF}
/* r9 #8: "larger graphic, label axis". Wider box, and the axis words are
   set larger and brighter below — at 66% they rendered near 10px. */
.pv-viz--chart{left:6%;width:86%;aspect-ratio:600 / 380;top:6%;filter:none}
.pv-viz--chart .pct text{font-size:12px}
.pv-viz--chart .pct .pct-axl{font-size:13px;font-weight:600;fill:rgba(255,255,255,.82)}
.pv-viz--chart .pct{position:absolute;inset:0;left:0;right:0;top:0;width:100%;translate:none}
.pv-viz--chart .pct svg{overflow:visible}
/* the per-plaque report over the red macro */
.field--plaque .field-media img{object-position:70% 50%}
.field--plaque .field-viz{min-height:520px}
.pq-mark{fill:var(--heat)}
.pq-num{font:600 12px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:#FFFFFF}
.pq-where{font:600 15px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:#FFFFFF;paint-order:stroke;stroke:rgba(11,13,16,.55);stroke-width:3px;stroke-linejoin:round}
.pq-size,.pq-risk{font:500 13px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:rgba(255,255,255,.82);paint-order:stroke;stroke:rgba(11,13,16,.55);stroke-width:3px;stroke-linejoin:round}
.pq-risk{fill:var(--on-dark)}
.field--plaque .node--hot .node-halo{stroke:rgba(255,138,144,.6)}
@media(max-width:899px){
  .field--plaque .field-viz{min-height:460px}
  .pq-where{font-size:19px}.pq-size,.pq-risk{font-size:16px}.pq-num{font-size:15px}
  .field--plaque .pq-mark{r:14}.field--plaque .node-halo{r:21}
}
/* Dr. Harrison: a portrait beside the words */
.md{display:grid;gap:clamp(24px,3.4vw,48px);align-items:start}
@media(min-width:760px){.md{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}}
.md-portrait{margin:0;max-width:300px}
.md-portrait img{display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:var(--r-panel);
  border:1px solid var(--line-2);box-shadow:0 24px 56px -40px rgba(var(--edge),.35)}
.md-portrait figcaption{margin-top:12px;color:var(--bone-3)}
.md-body h2{max-width:18ch}
.md-body p+p{margin-top:16px}
.md-body p{color:var(--bone-2);line-height:1.62;max-width:60ch}
.md-body h2+p{margin-top:20px}

/* ── /for-employers/ (Anthony, 2026-09-05) ────────────────────────────────── */
/* who it fits: six short items in a grid, the same words as the old list */
.fit{margin-top:clamp(30px,3.6vw,48px);display:grid;gap:clamp(18px,2.4vw,30px) clamp(24px,3vw,40px)}
@media(min-width:700px){.fit{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.fit{grid-template-columns:1fr 1fr 1fr}}
.fit-item{padding-top:18px;border-top:1px solid var(--line-2)}
.fit-item h3{font-size:1.0625rem;letter-spacing:-.015em;color:var(--bone)}
.fit-item p{margin-top:8px;font-size:.9375rem;line-height:1.55;color:var(--bone-2)}
/* the hero's readouts sit under the actions */
.page-head .pv-stats--ink{margin-top:26px}
/* 🔴 The option list of a <select> is painted by the browser with the page's
   text colour, not the field's: on the dark form the options came out white on
   white. Give the list its own ink and ground. */
.field select option{color:var(--bone);background:var(--bg-3)}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH · 2026-09-12 · Greg's round 6 (Pastel o6jxjq04), all 58 recovered
   One labelled block, as before. Every animated property has a visible
   default; the choreography is gated on .js-anims and the .is-on class
   main.js adds when an element enters, so with no JS, or under reduced
   motion, every drawing sits at its finished state.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── #3 · the hero fills the first screen on desktop; the circle unbroken ──
   "Other sites have it full screen… a taller hero lets the circle look
   unbroken." The drawn circle is 78.4% of the ring box, so a box 1.2× the
   hero's height keeps the whole circle inside the frame with a little air at
   every height, and the copy sits at its centre. Phones keep the compact hero. */
@media(min-width:900px){
  .hero{min-height:calc(100svh - var(--rail-h));display:flex;align-items:center;
    padding:clamp(30px,5vw,64px) 0}
  .hero .wrap{width:100%}
  .ring{top:50%;width:clamp(520px,min(118vw,calc((100svh - var(--rail-h)) * 1.2)),1420px)}
}
@media(min-width:560px){
  /* Keep the first-screen layout continuous across desktop and tablet widths. */
  .hero--lens{margin-top:calc(-1 * (var(--rail-h) + 1px));min-height:100svh;
    display:flex;align-items:center;padding-bottom:clamp(30px,5vw,64px);
    padding-top:calc(clamp(30px,5vw,64px) + var(--rail-h) + 1px)}
  .hero--lens .wrap{width:100%}
}
@media(min-width:560px){
  /* Viewport units keep the visible diameter stable through page zoom, even
     when zoomed text makes the hero taller. The outer circle fills 84% of it. */
  .hero--lens .ring{top:50%;height:calc(84svh / .872);width:auto}
}

/* ── #4 · the ring, with more life ────────────────────────────────────────
   "a stronger, more diffuse glow (especially inward); more varied, less
   predictable particle speed and direction; oscillating acceleration cycles
   on the ring rotations, like someone has a throttle." So: the outer glow is
   wider and brighter and breathes further; a second, inward glow sits inside
   the arc and breathes on its own period; the arc, its glow and the ticks turn
   on a throttle — the same 72s per turn, but in surges and lulls (ease-in-out
   between uneven keyframes); and every other mote follows a second path on a
   different rhythm, with the periods spread from 4.5s to 14s in the markup. */
.ring-glow{opacity:.46;
  -webkit-mask:radial-gradient(circle closest-side,transparent 62%,#000 75%,#000 82%,transparent 95%);
  mask:radial-gradient(circle closest-side,transparent 62%,#000 75%,#000 82%,transparent 95%)}
@keyframes ring-breathe{0%,100%{opacity:.34}50%{opacity:.6}}
.ring-glow--in{opacity:.7;
  background:radial-gradient(circle closest-side,rgba(232,35,44,0) 0%,rgba(232,35,44,0) 52%,rgba(232,35,44,.05) 64%,rgba(232,35,44,.16) 72%,rgba(232,35,44,.30) 76.5%,rgba(232,35,44,.10) 79%,rgba(232,35,44,0) 82%);
  -webkit-mask:none;mask:none}
.js-anims .ring-glow--in{animation:ring-breathe-in 9s ease-in-out .8s infinite}
@keyframes ring-breathe-in{0%,100%{opacity:.5;transform:scale(.985)}50%{opacity:.95;transform:scale(1.01)}}
.js-anims .ring-spin{animation:ring-throttle 72s ease-in-out infinite}
.js-anims .ring-glow:not(.ring-glow--in){animation:ring-throttle 72s ease-in-out infinite,ring-breathe 6.5s ease-in-out infinite}
.js-anims .ring-ticks-g{animation:ring-throttle 260s ease-in-out infinite reverse}
@keyframes ring-throttle{
  0%{transform:rotate(0deg)}
  22%{transform:rotate(112deg)}
  38%{transform:rotate(146deg)}
  64%{transform:rotate(292deg)}
  82%{transform:rotate(322deg)}
  100%{transform:rotate(360deg)}}
.js-anims .dust--b{animation-name:dust-b;animation-direction:alternate;animation-timing-function:cubic-bezier(.45,0,.35,1)}
@keyframes dust-b{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  30%{opacity:.95}
  55%{transform:translate(calc(var(--dx,0px) * -1.6),calc(var(--dy,0px) * .6)) scale(1.2)}
  72%{opacity:.6}
  100%{opacity:0;transform:translate(calc(var(--dx,0px) * .4),calc(var(--dy,0px) * 1.8)) scale(.7)}}

/* ── #5 · the deck's title stays ───────────────────────────────────────────
   "keep this title and subtitle on screen until the last card covers
   everything." The head is sticky at the top of the viewport and the cards
   stick BELOW it — main.js measures the head into --deck-head — so the title
   is read over every card and released with the last one. It sits below the
   rail's height so the returning rail never covers it; the cards' height is
   capped against the viewport so a stuck card's caption is always on screen. */
#exam{--deck-head:172px}
/* Greg r8 #29: the title and the cards must travel together. Both offsets now
   come from one variable, so when the title rides up with the rail the stack
   comes with it and the gap between the paragraph and the first card never
   changes. (Before this, only the title moved and the gap opened by 74px.) */
#exam{--stick-top:calc(var(--rail-h) + 12px)}
#exam .head--stick{position:sticky;top:var(--stick-top);z-index:6;
  background:var(--bg);padding-bottom:14px}

/* Greg r7 note 2: on a phone the title held its place under a rail that was no
   longer there, leaving a band of paper above it. It now follows the rail up
   while the reader is going down, and drops back to clear the rail the moment
   they turn round — which is when the rail returns, and he was explicit that
   the rail must not cover it. Phones only: that is where he saw it.

   The deck's own --deck-tail is still measured against the rail-visible
   position. That errs the safe way: while the head is riding high the last
   card covers it sooner, so the extra tail is hold the reader cannot see,
   never a gap. */
@media(max-width:899px){
  #exam .head--stick,#exam .card--deck{transition:top .24s var(--ease)}
  .rail-up #exam{--stick-top:12px}
}
/* The title releases WITH the packed stack, not after it (Greg r6 #5, "scroll
   the page up once they are packed in"). A sticky element lets go when its
   margin box meets the end of its container; the cards let go when the deck
   ends, which is a whole card-height earlier than the title would. So the
   title carries a bottom margin exactly as tall as the stack below it
   (--deck-tail, measured in main.js) and the deck pulls itself back up by the
   same amount. The margins collapse, so the layout does not move; only the
   moment of release does. Without the measurement the tail is 0 and the old
   behaviour stands. */
#exam .head--stick{margin-bottom:var(--deck-tail,0px)}
#exam .head--stick + .deck{margin-top:calc(clamp(38px,5vw,66px) - var(--deck-tail,0px))}
#exam .head--stick::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(246,247,249,0) 100%);pointer-events:none}
/* 2026-10-03, iPhone: the cards ride ABOVE the sticky title (z 7 over its 6).
   Safari let the stack go before the title, and the last card slid up UNDER
   the title's paper background. On top, any mismatch in the release just reads
   as the card scrolling over the title — ordinary scrolling, never a band. */
#exam .card--deck{z-index:7;top:calc(var(--stick-top) + var(--deck-head) + var(--i) * 16px);
  min-height:min(560px,calc(calc(var(--vhl) * 100) - var(--rail-h) - var(--deck-head) - 64px))}
#exam .card--chart{min-height:min(560px,calc(calc(var(--vhl) * 100) - var(--rail-h) - var(--deck-head) - 64px))}
@media(max-width:899px){
  #exam{--deck-head:196px}
  #exam .card--deck,#exam .card--chart{min-height:min(480px,calc(calc(var(--vhl) * 100) - var(--rail-h) - var(--deck-head) - 48px))}
  /* THE HOLD, 2026-10-03. Anthony: on a phone the cards go by before anyone
     can read one — "it stops on that card long enough for them to get a
     blink". The cause: a card sticks with its foot near the bottom of the
     screen, and the next card was only 22px behind it, so it started climbing
     over the card the instant it landed.
     The gap between cards IS the hold. For that many pixels of scrolling, the
     card that just landed sits still and whole while the next one travels up
     from off-screen. No JS, no timer, no snap: it costs nothing to load and
     the reader's thumb stays in charge — a hard flick still goes straight
     through, a normal scroll pauses on each card. */
  #exam .deck{gap:var(--deck-hold,calc(var(--vhl) * 42))}
}

/* ── #6/#8/#9 · the three steps, drawn and looping ─────────────────────────
   No photographs, no readout rows, one call to action at the end. Each card
   is a light panel with an ink drawing that plays on a loop while the card is
   on screen (.is-on). The drawing verbs (.lp-*) share one period, --loop, set
   on the card — 8s for booking and reports, 16s for the scan, which keeps the
   twelve seconds honest. Each element is phased by its own --d, held at its
   first frame until its turn (fill: backwards), drawn in, held, faded, and
   redrawn — so the picture assembles as a cascade and dissolves the same way. */
.steps-ink{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:860px){.steps-ink{grid-template-columns:repeat(3,1fr)}}
.steps-ink .vis-card{background:var(--bg-3);box-shadow:0 24px 56px -44px rgba(var(--edge),.28)}
.steps-ink .vis-art{background:var(--bg-2)}
.steps-ink .vis-body{gap:8px}
.steps-ink .vis-body h3{margin-top:2px}
.actions--start{justify-content:flex-start}
.actions.after{margin-top:clamp(28px,3.4vw,40px)}
.js-anims [data-enter].is-on .lp-draw{animation:lp-draw var(--loop,8s) var(--ease-out) var(--d,0s) infinite backwards}
.js-anims [data-enter].is-on .lp-grow{animation:lp-grow var(--loop,8s) var(--ease-out) var(--d,0s) infinite backwards}
.js-anims [data-enter].is-on .lp-fade{animation:lp-fade var(--loop,8s) ease var(--d,0s) infinite backwards}
.js-anims [data-enter].is-on .lp-rise{animation:lp-rise var(--loop,8s) var(--ease-out) var(--d,0s) infinite backwards}
.js-anims [data-enter].is-on .lp-pip{animation:lp-pip var(--loop,8s) var(--ease-out) var(--d,0s) infinite backwards}
.js-anims [data-enter]:not(.is-on) .lp-draw{stroke-dashoffset:100}
.js-anims [data-enter]:not(.is-on) .lp-grow{transform:scaleX(0)}
.js-anims [data-enter]:not(.is-on) .lp-fade,.js-anims [data-enter]:not(.is-on) .lp-rise,.js-anims [data-enter]:not(.is-on) .lp-pip{opacity:0}
.lp-draw{stroke-dasharray:100;stroke-dashoffset:0}
.lp-grow{transform-box:fill-box;transform-origin:left center}
.lp-rise,.lp-pip{transform-box:fill-box;transform-origin:center}
.lp-pip{fill:var(--heat)}
@keyframes lp-draw{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}16%{stroke-dashoffset:0}84%{stroke-dashoffset:0;opacity:1}92%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lp-grow{0%{transform:scaleX(0);opacity:1}12%{transform:scaleX(1)}84%{transform:scaleX(1);opacity:1}92%{opacity:0}100%{transform:scaleX(1);opacity:0}}
@keyframes lp-fade{0%{opacity:0}8%{opacity:1}84%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes lp-rise{0%{opacity:0;transform:translateY(14px)}10%{opacity:1;transform:translateY(0)}84%{opacity:1;transform:translateY(0)}92%{opacity:0}100%{opacity:0;transform:translateY(0)}}
@keyframes lp-pip{0%{opacity:0;transform:scale(.2)}6%{opacity:1;transform:scale(1.4)}11%{transform:scale(1)}84%{opacity:1;transform:scale(1)}92%{opacity:0}100%{opacity:0;transform:scale(1)}}
/* STEPS-LOOP:start — GENERATED by _round2/steps.mjs. Do not edit here.
   Staggered entrances, no exit: each plays once and holds (Greg r8 #4). */
@keyframes lp-draw-10{0%,10%{stroke-dashoffset:100;opacity:0}12%{opacity:1}26%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-10{animation:lp-draw-10 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-draw-15{0%,15%{stroke-dashoffset:100;opacity:0}17%{opacity:1}31%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-15{animation:lp-draw-15 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-draw-19{0%,19%{stroke-dashoffset:100;opacity:0}21%{opacity:1}35%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-19{animation:lp-draw-19 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-draw-31{0%,31%{stroke-dashoffset:100;opacity:0}33%{opacity:1}47%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-31{animation:lp-draw-31 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-draw-38{0%,38%{stroke-dashoffset:100;opacity:0}40%{opacity:1}54%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-38{animation:lp-draw-38 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-draw-45{0%,45%{stroke-dashoffset:100;opacity:0}47%{opacity:1}61%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-45{animation:lp-draw-45 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-draw-53{0%,53%{stroke-dashoffset:100;opacity:0}55%{opacity:1}69%,100%{stroke-dashoffset:0;opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-draw.lp-at-53{animation:lp-draw-53 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-0{0%{opacity:0}8%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-0{animation:lp-fade-0 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-10{0%,10%{opacity:0}18%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-10{animation:lp-fade-10 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-11{0%,11%{opacity:0}19%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-11{animation:lp-fade-11 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-12{0%,12%{opacity:0}20%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-12{animation:lp-fade-12 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-13{0%,13%{opacity:0}21%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-13{animation:lp-fade-13 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-14{0%,14%{opacity:0}22%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-14{animation:lp-fade-14 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-28{0%,28%{opacity:0}36%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-28{animation:lp-fade-28 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-3{0%,3%{opacity:0}11%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-3{animation:lp-fade-3 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-34{0%,34%{opacity:0}42%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-34{animation:lp-fade-34 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-4{0%,4%{opacity:0}12%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-4{animation:lp-fade-4 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-40{0%,40%{opacity:0}48%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-40{animation:lp-fade-40 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-5{0%,5%{opacity:0}13%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-5{animation:lp-fade-5 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-6{0%,6%{opacity:0}14%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-6{animation:lp-fade-6 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-7{0%,7%{opacity:0}15%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-7{animation:lp-fade-7 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-8{0%,8%{opacity:0}16%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-8{animation:lp-fade-8 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-fade-9{0%,9%{opacity:0}17%,100%{opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-fade.lp-at-9{animation:lp-fade-9 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-21{0%,21%{transform:scaleX(0);opacity:1}33%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-21{animation:lp-grow-21 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-24{0%,24%{transform:scaleX(0);opacity:1}36%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-24{animation:lp-grow-24 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-26{0%,26%{transform:scaleX(0);opacity:1}38%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-26{animation:lp-grow-26 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-30{0%,30%{transform:scaleX(0);opacity:1}42%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-30{animation:lp-grow-30 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-36{0%,36%{transform:scaleX(0);opacity:1}48%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-36{animation:lp-grow-36 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-43{0%,43%{transform:scaleX(0);opacity:1}55%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-43{animation:lp-grow-43 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-5{0%,5%{transform:scaleX(0);opacity:1}17%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-5{animation:lp-grow-5 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-grow-8{0%,8%{transform:scaleX(0);opacity:1}20%,100%{transform:scaleX(1);opacity:1}}
.js-anims .steps-ink [data-enter].is-on .lp-grow.lp-at-8{animation:lp-grow-8 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-pip-20{0%,20%{opacity:0;transform:scale(.2)}26%{opacity:1;transform:scale(1.4)}31%,100%{opacity:1;transform:scale(1)}}
.js-anims .steps-ink [data-enter].is-on .lp-pip.lp-at-20{animation:lp-pip-20 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-rise-23{0%,23%{opacity:0;transform:translateY(14px)}33%,100%{opacity:1;transform:translateY(0)}}
.js-anims .steps-ink [data-enter].is-on .lp-rise.lp-at-23{animation:lp-rise-23 var(--loop,8s) var(--ease-out) 0s 1 both}
@keyframes lp-rise-30{0%,30%{opacity:0;transform:translateY(14px)}40%,100%{opacity:1;transform:translateY(0)}}
.js-anims .steps-ink [data-enter].is-on .lp-rise.lp-at-30{animation:lp-rise-30 var(--loop,8s) var(--ease-out) 0s 1 both}
/* the chosen day: it arrives grey with the rest of the month, then the tick
   draws over it and the cell warms to red (Greg r7 note 4) */
.steps-ink .s1-day{fill:rgba(232,35,44,0);stroke:var(--line-2)}
.js-anims .vis-card--s1[data-enter].is-on .s1-day{animation:s1-day var(--loop,8s) linear 1 both}
.js-anims .vis-card--s1[data-enter]:not(.is-on) .s1-date{opacity:0}
.js-anims .vis-card--s1[data-enter].is-on .s1-date{animation:s1-date-in 1.28s var(--ease-out) var(--d,0s) 1 both}
@keyframes s1-date-in{from{opacity:0}to{opacity:1}}
@keyframes s1-day{0%{opacity:0;stroke:var(--line-2);fill:rgba(232,35,44,0)}
  8%,17%{opacity:1;stroke:var(--line-2);fill:rgba(232,35,44,0)}
  26%,100%{opacity:1;stroke:var(--heat);fill:rgba(232,35,44,.12)}}
/* STEPS-LOOP:end */
/* Step two, to Greg r8 #5: the table carries the patient IN for 5.5s, stopping
   just before their feet reach the right edge of the ring — the legs are never
   in the bore — holds for 1s while the scan runs, then travels back OUT for
   5.5s. Twelve seconds in all, played once per viewing (r8 #4). The clock's arc
   and hand keep the same 5.5s and then hold, so the drawing and the count agree.
   Coordinates are the group's own: the head leads at x≈101, the feet end at 274,
   and the ring's right edge is x=178. */
.s2-body{transform-box:view-box;transform:translateX(90px)}
.s2-sweep{stroke-width:2.6;stroke-dasharray:14 86;stroke-dashoffset:0;opacity:.9;stroke-linecap:round}
.js-anims .vis-card--s2[data-enter].is-on .s2-body{animation:s2-pass var(--loop,12s) cubic-bezier(.45,.02,.35,1) 1 both}
.js-anims .vis-card--s2[data-enter].is-on .s2-arc{animation:s2-arc var(--loop,12s) linear 1 both}
.js-anims .vis-card--s2[data-enter].is-on .s2-hand{animation:s2-hand var(--loop,12s) linear 1 both}
.js-anims .vis-card--s2[data-enter].is-on .s2-sweep{animation:s2-sweep var(--loop,12s) linear 1 both}
.js-anims .vis-card--s2[data-enter]:not(.is-on) .s2-body{opacity:0}
.js-anims .vis-card--s2[data-enter]:not(.is-on) .s2-sweep{opacity:0}
@keyframes s2-pass{0%{transform:translateX(90px);opacity:1}
  45.8%,54.2%{transform:translateX(-88px);opacity:1}
  100%{transform:translateX(90px);opacity:1}}
@keyframes s2-arc{0%{stroke-dashoffset:100;opacity:1}45.8%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes s2-hand{0%{transform:rotate(0deg);opacity:1}45.8%,100%{transform:rotate(72deg);opacity:1}}
@keyframes s2-sweep{0%{stroke-dashoffset:0;opacity:.95}100%{stroke-dashoffset:-300;opacity:.95}}

/* ── #10 · /how-it-works/ hero: the scanner flipped ───────────────────────
   "flipped horizontally so the ring graphic doesn't cut it off." The photo is
   mirrored, so the scanner now stands on the left; the scrim and the copy
   mirror with it (copy on the right, scrim solid on the right) and the page
   arc moves to the top-left corner, off the machine. */
.page-hero--flip .hero-photo img{transform:scaleX(-1);object-position:28% 50%}
.page-hero--flip .hero-photo::after{background:linear-gradient(270deg,rgba(var(--scrim),.97) 0%,rgba(var(--scrim),.92) 40%,rgba(var(--scrim),.55) 68%,rgba(var(--scrim),.12) 100%)}
.page-hero--flip .page-arc{right:auto;left:clamp(-260px,-11vw,-60px);transform:scaleX(-1)}
@media(min-width:900px){
  .page-hero--flip .page-head{margin-left:auto}
}
@media(max-width:759px){
  .page-hero--flip .hero-photo img{object-position:50% 40%}
  .page-hero--flip .hero-photo::after{background:linear-gradient(180deg,rgba(var(--scrim),.96) 0%,rgba(var(--scrim),.90) 55%,rgba(var(--scrim),.45) 100%)}
}

/* ── #11 · the film blends into the ground ─────────────────────────────────
   "Ideally this graphic blends right into the background, rather than being
   clearly framed." No border, no radius, no shadow; the edges feather into
   the band with a radial mask, and the black of the film meets the deck ground. */
.film-frame{border:0;border-radius:0;box-shadow:none;background:transparent;
  -webkit-mask:radial-gradient(ellipse 66% 66% at 50% 50%,#000 52%,rgba(0,0,0,.6) 70%,transparent 86%);
  mask:radial-gradient(ellipse 66% 66% at 50% 50%,#000 52%,rgba(0,0,0,.6) 70%,transparent 86%)}
.film-frame video{opacity:.94}

/* ── #14 · the field card's call to action was invisible ─────────────────── */
.field-copy .more{color:#FFFFFF}
.field-copy .more:hover{color:var(--on-dark)}

/* ── #15 · the Harrison Unified score as the hero object ──────────────────
   The ring with three plaques marked on a branching hairline, and beside it
   the per-plaque readout as a list. Generated by _round2/harrison.mjs. The
   ring draws, the hairline draws, markers pop in turn, rows rise in turn and
   the figures count up (main.js). Ink on the light ground. */
.hu{display:grid;gap:clamp(18px,2.4vw,28px);align-items:center}
@media(min-width:560px){.hu{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.hu-ring{position:relative;width:100%;max-width:340px;aspect-ratio:1;margin-inline:auto}
.hu-ring svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.hu-outer{stroke:rgba(13,17,23,.18);stroke-width:1.4;stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 2s var(--ease-out) .1s}
.hu-inner{stroke:rgba(13,17,23,.08);stroke-width:1}
.hu-ticks{stroke:rgba(13,17,23,.14);stroke-width:8}
.hu-strand{stroke:rgba(13,17,23,.36);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 2.4s var(--ease-out) .5s}
.hu-branch{stroke:rgba(13,17,23,.18);stroke-width:1;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--ease-out) 1.5s}
.hu-mark{transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.hu-halo{fill:none;stroke:rgba(232,35,44,.55);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.hu-dot{fill:var(--heat)}
.hu-num{font:600 12px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:#FFFFFF}
.js-anims .hu:not(.is-on) .hu-outer,.js-anims .hu:not(.is-on) .hu-strand,.js-anims .hu:not(.is-on) .hu-branch{stroke-dashoffset:100}
.js-anims .hu:not(.is-on) .hu-mark{opacity:0;transform:scale(.3)}
.js-anims .hu.is-on .hu-halo{animation:pq-pulse 3.2s ease-out calc(var(--d,0s) + 1s) infinite}
.hu-t{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.0625rem;
  line-height:1.28;letter-spacing:-.015em;color:var(--bone)}
.hu-tag{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;background:var(--heat-mid);color:#FFFFFF;
  font:600 .6875rem/1 Manrope,"Manrope Fallback",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hu-rows{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.hu-rows li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-3);font-size:.875rem;line-height:1.45;color:var(--bone-2);
  box-shadow:0 14px 30px -26px rgba(var(--edge),.3);
  transition:opacity .5s ease var(--d,0s),transform .5s var(--ease-out) var(--d,0s)}
.hu-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--heat);color:#FFFFFF;
  font:600 .6875rem/1 Manrope,"Manrope Fallback",system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.hu-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.hu-where{font-weight:600;color:var(--bone)}
.hu-ms{display:flex;flex-wrap:wrap;gap:2px 14px}
.hu-m{white-space:nowrap}
.hu-m b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums}
.hu-m--risk b{color:var(--heat-deep)}
/* r10 #18: the hero object is an example, and says so. */
.hu-eg{margin:10px 0 0;font-size:.8125rem;color:var(--bone-3);letter-spacing:.01em}
.hu-total{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.875rem;color:var(--bone-3);
  transition:opacity .5s ease var(--d,0s),transform .5s var(--ease-out) var(--d,0s)}
.hu-total b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums}
.js-anims .hu:not(.is-on) .hu-rows li,.js-anims .hu:not(.is-on) .hu-total{opacity:0;transform:translateY(8px)}
@media(min-width:1000px){
  .page-hero--hu .page-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .page-hero--hu .page-obj .hu{margin-left:auto}
}

/* ── #25 · the Harrison band, edge to edge ─────────────────────────────────
   "reserve full-width cards for micro-ctas where it looks like a portal to
   another page. Edge-to-edge sections for content-only sections." The band
   is the section: the red macro behind, the words on the left over the
   darkest part, the plaque map on the right. Same choreography as .field. */
.field-bleed{position:relative;overflow:hidden;background:var(--deck);color:var(--ink-deck);
  padding:clamp(58px,7.4vw,116px) 0;border-top:1px solid var(--line)}
.field-bleed .field-media{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--deck)}
.field-bleed .field-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
.field-bleed .field-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--deck-rgb),.92) 0%,rgba(var(--deck-rgb),.78) 40%,rgba(var(--deck-rgb),.4) 64%,rgba(var(--deck-rgb),.26) 100%)}
.field-bleed .wrap{position:relative;z-index:2;display:grid;gap:clamp(28px,3.4vw,48px);align-items:center}
@media(min-width:900px){.field-bleed .wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.field-bleed .field-copy{padding:0}
.field-bleed .field-copy h2{max-width:16ch}
.field-bleed .field-copy .lede em{font-style:italic;color:#FFFFFF}
.field-bleed .field-viz{min-height:540px}
.js-anims .field-bleed:not(.is-on) .strand,.js-anims .field-bleed:not(.is-on) .xlink,.js-anims .field-bleed:not(.is-on) .pq-heart{stroke-dashoffset:100}
.js-anims .field-bleed:not(.is-on) .node{opacity:0;transform:scale(.3)}
.js-anims .field-bleed.is-on .node{animation:node-breathe var(--p,7s) ease-in-out calc(var(--d,0s) + 1.2s) infinite}
.js-anims .field-bleed.is-on .node--hot .node-halo{animation:pq-pulse 3.4s ease-out calc(var(--d,0s) + 1.4s) infinite}
/* #30: the heart, drawn in the site's own hairline behind the vessels */
.pq-heart{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 3s var(--ease-out) 0s}
.pq-heart--v{stroke:rgba(255,255,255,.18);transition-delay:1.6s}
@media(max-width:899px){
  .field-bleed .field-viz{order:-1;min-height:460px}
  .field-bleed .field-media img{object-position:50% 28%}
  .field-bleed .field-media::after{background:linear-gradient(180deg,rgba(var(--deck-rgb),.3) 0%,rgba(var(--deck-rgb),.52) 52%,rgba(var(--deck-rgb),.94) 100%)}
}

/* ── #31–#35 · Dr. Harrison; #57 · the founder ───────────────────────────── */
.md-body .eyebrow{margin-bottom:14px}
.md-role{margin:6px 0 14px;font-size:1.0625rem;color:var(--bone-2)}
.md-dates{display:block;margin-top:2px;color:var(--bone-3);font-variant-numeric:tabular-nums}
.md-portrait--pending{aspect-ratio:3 / 4;width:100%;max-width:300px;border:1px dashed var(--line-2);border-radius:var(--r-panel);
  background:var(--bg-2);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  color:var(--bone-3);font-size:.875rem;line-height:1.4}
.md--founder{margin-top:clamp(26px,3vw,38px)}
.md-quote{margin:0}
.md-quote p{font-size:1.0625rem;line-height:1.62;color:var(--bone-2)}
.md-sign{margin-top:22px;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;color:var(--bone);letter-spacing:-.015em}
.md-sign span{display:block;margin-top:3px;font-family:Manrope,"Manrope Fallback",system-ui,sans-serif;font-weight:400;font-size:.875rem;color:var(--bone-3);letter-spacing:0}

/* ── #37 · /locations/: the map beside the headline ──────────────────────── */
.hero-map{margin:0;width:100%}
.hero-map img{width:100%;max-width:520px;height:auto;display:block;margin-inline:auto}
@media(min-width:1000px){.page-hero--map .hero-map img{margin-right:0}}

/* ── #40 · the centre's name is the link; the whole row is clickable ────────
   The name carries the link and stretches it over the row (::after); "Book
   here" sits on the right and stays its own link above the stretched one. */
.loc{position:relative;padding:16px 14px;margin:0 -14px;border-radius:12px;transition:background .25s var(--ease)}
.loc:last-child{border-bottom:0}
.loc-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.loc-link::after{content:"";position:absolute;inset:0;border-radius:12px}
.loc-link .arw{color:var(--bone-3);font-size:.9em}
@media(hover:hover) and (pointer:fine){
.loc:has(.loc-link:hover){background:var(--bg-2)}
.loc:has(.loc-link:hover) .arw{transform:translateX(4px);color:var(--heat-deep)}
}
.loc:has(.loc-link:focus-visible){outline:2px solid var(--heat);outline-offset:2px}
.loc-link:focus-visible{outline:none}
.loc-do{position:relative;z-index:1;margin-left:auto}
@media(max-width:559px){.loc-do{width:auto;justify-content:flex-end}}

/* ── #58 · the hand-off cards on /about/ ─────────────────────────────────── */
.card--tile .tile-art picture{display:block;width:100%;height:100%}

/* ══════════════════════════════════════════════════════════════════════════
   THE HEART · 2026-09-14 · Anthony: "resembles a heart, yet doesn't look too
   graphic… looks better on mobile." Generated by _round2/heart.mjs. One
   frosted form, three coronary arteries, plaques on the artery each readout
   names. No text in the drawing; labels are HTML. Two tones: ink on the light
   ground (the hero), light on the dark band.
   ══════════════════════════════════════════════════════════════════════════ */
.ht{display:block;width:100%;height:auto;overflow:visible}
/* the form */
.ht-form{transform-box:fill-box;transform-origin:50% 60%;transition:opacity 1s ease .1s,transform 1.2s var(--ease-out) .1s}
.ht-body,.ht-vessel{stroke-width:1.4;stroke-linejoin:round}
.ht-sheen{stroke:none;opacity:.7}
.ht-vessel{opacity:.92}
.ht--ink .ht-stop-a{stop-color:#FFFFFF}
.ht--ink .ht-stop-b{stop-color:#F3F5F8}
.ht--ink .ht-stop-c{stop-color:#E4E8EE}
.ht--ink .ht-body,.ht--ink .ht-vessel{stroke:rgba(13,17,23,.20)}
.ht--light .ht-stop-a{stop-color:rgba(255,255,255,.22)}
.ht--light .ht-stop-b{stop-color:rgba(255,255,255,.10)}
.ht--light .ht-stop-c{stop-color:rgba(255,255,255,.05)}
.ht--light .ht-body,.ht--light .ht-vessel{stroke:rgba(255,255,255,.42)}
.ht--light .ht-sheen{opacity:.28}
.ht--light .ht-glow{opacity:1.6}
/* the arteries */
.ht-art{fill:none;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--ease-out) var(--d,0s)}
.ht--ink .ht-art{stroke:rgba(13,17,23,.46);stroke-width:2.4}
.ht--light .ht-art{stroke:rgba(255,255,255,.78);stroke-width:2.4}
.ht-art--diag,.ht-art--marg{stroke-width:1.5 !important;opacity:.7}
.ht-art--lm{stroke-width:2.8 !important}
/* the pulse: a short bright segment that runs down each main artery in turn */
.ht-pulse{fill:none;stroke:var(--on-dark);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:9;opacity:0}
.ht--ink .ht-pulse{stroke:#E8232C}
/* the markers */
.ht-mark{transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.ht-dot{fill:#E8232C;stroke:#FFFFFF;stroke-width:2}
.ht--light .ht-dot{stroke:rgba(11,13,16,.8)}
.ht-halo{fill:none;stroke:rgba(232,35,44,.55);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.ht-num{font:700 12px Manrope,"Manrope Fallback",system-ui,sans-serif;fill:#FFFFFF}
/* choreography: enter, then loop */
.js-anims [data-enter]:not(.is-on) .ht-form{opacity:0;transform:scale(.96)}
.js-anims [data-enter]:not(.is-on) .ht-art{stroke-dashoffset:100}
.js-anims [data-enter]:not(.is-on) .ht-mark{opacity:0;transform:scale(.3)}
.js-anims [data-enter].is-on .ht-form{animation:ht-breathe 5.5s ease-in-out 2.4s infinite}
.js-anims [data-enter].is-on .ht-pulse{animation:ht-pulse 4.2s cubic-bezier(.45,0,.3,1) calc(2.6s + var(--pd,0s)) infinite}
.js-anims [data-enter].is-on .ht-halo{animation:pq-pulse 3.2s ease-out calc(var(--d,0s) + 1s) infinite}
@keyframes ht-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes ht-pulse{0%{stroke-dashoffset:9;opacity:0}8%{opacity:1}62%{stroke-dashoffset:-91;opacity:1}70%{opacity:0}100%{stroke-dashoffset:-91;opacity:0}}
/* the great vessels as tubes */
.ht-tube-edge,.ht-tube{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ht--ink .ht-tube-edge{stroke:rgba(13,17,23,.20)}
.ht--ink .ht-tube{stroke:#F1F3F7}
.ht--light .ht-tube-edge{stroke:rgba(255,255,255,.34)}
.ht--light .ht-tube{stroke:#1A1D22}
/* the pulse, softer: a short glow rather than a scratch */
.ht-pulse{stroke-width:4.5;stroke-dasharray:12 88;stroke-dashoffset:12}
.ht--ink .ht-pulse{stroke:rgba(232,35,44,.62)}

/* ── the heart in the hero readout (/calcium-score/) ─────────────────────── */
.hu-heart{width:100%;max-width:360px;margin-inline:auto}
@media(max-width:559px){
  .hu{gap:6px}
  .hu-heart{max-width:300px}
}

/* ── the heart in the Harrison band: one plaque, reported ─────────────────
   Phone: heart above, the card below at full width. Wide: the card overlaps
   the heart's lower right. Labels are HTML throughout. */
.field-bleed .field-viz{min-height:0}
.hx{position:relative;display:grid;gap:14px;justify-items:center}
.hx-heart{width:100%;max-width:440px}
.hx-card{width:100%;max-width:360px;padding:18px 20px;border-radius:16px;
  background:rgba(11,13,16,.72);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
  transition:opacity .6s ease 2.4s,transform .6s var(--ease-out) 2.4s}
.js-anims .field-bleed:not(.is-on) .hx-card{opacity:0;transform:translateY(10px)}
.hx-k{margin:0 0 12px;display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-deck-2)}
.hx-dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.hx-dl div{padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
.hx-dl dt{font-size:.8125rem;color:var(--ink-deck-3)}
.hx-dl dd{margin:3px 0 0;font-size:1rem;font-weight:600;color:#FFFFFF;line-height:1.3}
.hx-dl dd b{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;font-weight:500;font-size:1.32rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hx-dl .hx-risk{color:var(--on-dark)}
@media(min-width:900px){
  .hx{display:block;max-width:520px;margin-left:auto}
  .hx-heart{max-width:460px;margin-left:auto;margin-right:40px}
  .hx-card{position:absolute;right:0;bottom:-6px;max-width:300px}
}
@media(max-width:899px){
  .field-bleed .field-viz{order:-1;min-height:0}
}
/* the band's older plaque-map rules (.field-viz svg: absolute, drifting) must
   not reach the heart: it sizes from its own box */
.field-viz .hx .ht{position:static;inset:auto;width:100%;height:auto;animation:none}
/* desktop hero: give the heart the room to read as the object it is */
@media(min-width:1000px){
  .page-hero--hu .hu{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.6vw,24px)}
  .page-hero--hu .hu-heart{max-width:none}
}
/* the heart on the dark band: a solid dark-glass body, so the photograph
   behind it does not show through, and vessels in the same glass rather than
   black tubes */
.ht--light .ht-stop-a{stop-color:#2A2E35}
.ht--light .ht-stop-b{stop-color:#1A1D22}
.ht--light .ht-stop-c{stop-color:#121418}
.ht--light .ht-body{stroke:rgba(255,255,255,.36)}
.ht--light .ht-sheen{opacity:.16}
.ht--light .ht-tube{stroke:#1E2126}
.ht--light .ht-tube-edge{stroke:rgba(255,255,255,.26)}
/* the band's picture steps back behind the heart on the right */
.field-bleed .field-media::after{
  background:linear-gradient(90deg,rgba(var(--deck-rgb),.92) 0%,rgba(var(--deck-rgb),.8) 40%,rgba(var(--deck-rgb),.62) 64%,rgba(var(--deck-rgb),.56) 100%)}
@media(max-width:899px){
  .field-bleed .field-media::after{background:linear-gradient(180deg,rgba(var(--deck-rgb),.62) 0%,rgba(var(--deck-rgb),.74) 50%,rgba(var(--deck-rgb),.94) 100%)}
}
@media(min-width:900px){
  .hx{max-width:560px}
  .hx-heart{max-width:400px;margin-right:130px}
  .hx-card{right:-8px;bottom:-28px;max-width:290px}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HEART, RENDERED · 2026-09-14 · Anthony: "use the Arcads integration…
   it'll look better that way." Generated by _round2/heart-image.mjs. The
   picture is the heart; the plaque markers are HTML over it, in percent of the
   image box. The dark render sits on the band with a screen blend so its black
   ground disappears; the light render's ground is the page colour already.
   ══════════════════════════════════════════════════════════════════════════ */
.hi{position:relative;margin:0;width:100%;aspect-ratio:1;
  transition:opacity 1s ease .1s,transform 1.2s var(--ease-out) .1s}
.hi picture,.hi img{display:block;width:100%;height:100%}
.hi img{object-fit:contain}
/* the light render is lit from above with a soft shadow; feather its square
   edge so no seam can show against the ground on any screen */
.hi--light img{-webkit-mask:radial-gradient(closest-side,#000 82%,transparent 100%);
  mask:radial-gradient(closest-side,#000 82%,transparent 100%)}
.hi-dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--heat);color:#FFFFFF;
  font:700 .75rem/1 Manrope,"Manrope Fallback",system-ui,sans-serif;
  box-shadow:0 0 0 2px #FFFFFF,0 6px 16px -6px rgba(232,35,44,.7);
  transition:opacity .5s ease var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.hi--dark .hi-dot{box-shadow:0 0 0 2px rgba(11,13,16,.85),0 0 18px rgba(232,35,44,.55)}
.hi-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(232,35,44,.6)}
/* choreography: the heart settles in, markers pop in turn, then each pulses */
.js-anims [data-enter]:not(.is-on) .hi{opacity:0;transform:scale(.97)}
.js-anims [data-enter]:not(.is-on) .hi-dot{opacity:0;transform:scale(.3)}
.js-anims [data-enter].is-on .hi-dot::after{animation:pq-pulse 3s ease-out calc(var(--d,0s) + .8s) infinite}
.js-anims [data-enter].is-on .hi{animation:hi-breathe 6s ease-in-out 1.8s infinite}
@keyframes hi-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@media(max-width:559px){.hi-dot{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:.6875rem}}

/* sizes */
.hu-heart{max-width:380px}
@media(max-width:559px){.hu-heart{max-width:320px}}
.hx-heart{max-width:460px}
@media(min-width:900px){.hx-heart{max-width:440px;margin-right:110px}}

/* desktop hero: the heart takes the larger share */
@media(min-width:1000px){
  .page-hero--hu .hu{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .page-hero--hu .hu-heart{max-width:none}
}
@media(min-width:900px){
  /* the card sits below marker 3, never over it */
  .hx-card{bottom:-84px;right:-12px}
  .field-bleed .hx{margin-bottom:84px}
}
@media(min-width:1000px){
  /* the render carries air around the heart; let the figure bleed past its
     column so the heart itself reads at the size of the object it is */
  .page-hero--hu .hu-heart{width:calc(100% + 120px);max-width:none;margin:-56px -40px -56px -80px}
}

/* ── /how-it-works/ hero: the real scanner photograph (2026-09-14) ─────────
   A cutout on transparency, standing beside the headline on the page ground.
   A soft contact shadow seats it; on a wide screen it bleeds a little past
   the column toward the edge, the way a product shot does. */
.hero-scanner{margin:0}
.hero-scanner img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 28px 34px rgba(13,17,23,.14))}
@media(min-width:1000px){
  .page-hero--scanner .page-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .page-hero--scanner .hero-scanner{margin-right:clamp(-120px,-6vw,-40px)}
}
@media(max-width:999px){
  .page-hero--scanner .hero-scanner{margin:34px -8px 0;max-width:640px}
}

/* LENS:start — the homepage hero, the comp Anthony chose (2026-09-15).

   The one he picked is the LIGHT hero: the aperture ring on the page's own
   paper, with coloured light moving inside it and the headline in dark
   ink over a white wash. (My comp sheet labelled it "B · Lens"; counted as
   panels it reads third — that mislabel is what sent V16/V17 out as the white
   scanner with the dark bore. Describe these by look, never by letter.)

   SOURCE: _round2/lens.css, written into site.css by
   _round2/apply-hero-lens.mjs. Edit here, then re-run the script.

   Built with the performance lessons from the scanner build, all measured:
     · every moving part is its own HTML layer, animated on transform/opacity
       only — no repaints (perf-hero.mjs);
     · the coloured light is radial-gradient discs, NOT filter:blur — the comp
       blurred five solid circles, and filters cost ~1 s of GPU raster on a
       cold load (_raster-cost.mjs). The stops below trace the blurred disc's
       profile, so it looks the same;
     · the motes use literal keyframes: a keyframe that reads a custom
       property cannot run on the compositor (_perf-diagnose.mjs);
     · nothing animates until .g-live, which main.js adds when the page has
       loaded and gone idle — starting everything at first paint froze the
       first second of a cold visit (_cold-frames.mjs);
     · it holds still while the hero is off screen and while the reader
       scrolls (perf-jank.mjs).

   RED ONLY since 2026-09-17 (Greg round 7 note 8: "Not sure I like the blue.
   I would just keep it red for now" — Anthony's call to action it). The second
   tone is no longer a second hue but a deeper value of the same red, so the
   light still has depth to it: #E8232C bright, #CB262F mid, #AC1720 deep,
   #FF8A90 rose, #F0B7BA pale. Every one of those is already in DESIGN.md's
   heat ramp; nothing new was invented to replace the blue. The classes that
   read `--deep` were `--blue`. */

/* the ring: the live page's own size and placement, unchanged */
.hero--lens .ring-glow,.hero--lens .ring-redraw{display:none}

/* ── the lens: the light inside the aperture ─────────────────────────────── */
.g-lens{position:absolute;inset:15%;border-radius:50%;overflow:hidden;pointer-events:none;
  -webkit-mask:radial-gradient(circle closest-side,#000 70%,transparent 100%);
          mask:radial-gradient(circle closest-side,#000 70%,transparent 100%)}
/* each disc is the comp's 62% circle plus the spread of its 46 px blur, with
   the blur's profile written into the stops: flat, then half at the disc's
   own edge, then out. */
.g-bl{position:absolute;width:95%;height:95%;border-radius:50%}
.g-bl--1{left:-24%;top:-12%;background:radial-gradient(closest-side,rgba(232,35,44,.55) 0%,rgba(232,35,44,.55) 31%,rgba(232,35,44,.462) 48%,rgba(232,35,44,.275) 65%,rgba(232,35,44,.088) 83%,rgba(232,35,44,0) 100%)}
.g-bl--2{left:31%;top:-22%;background:radial-gradient(closest-side,rgba(172,23,32,.4) 0%,rgba(172,23,32,.4) 31%,rgba(172,23,32,.336) 48%,rgba(172,23,32,.2) 65%,rgba(172,23,32,.064) 83%,rgba(172,23,32,0) 100%)}
.g-bl--3{left:2%;top:36%;background:radial-gradient(closest-side,rgba(203,38,47,.34) 0%,rgba(203,38,47,.34) 31%,rgba(203,38,47,.286) 48%,rgba(203,38,47,.17) 65%,rgba(203,38,47,.054) 83%,rgba(203,38,47,0) 100%)}
.g-bl--4{left:19%;top:22%;background:radial-gradient(closest-side,rgba(255,138,144,.42) 0%,rgba(255,138,144,.42) 31%,rgba(255,138,144,.353) 48%,rgba(255,138,144,.21) 65%,rgba(255,138,144,.067) 83%,rgba(255,138,144,0) 100%)}
.g-bl--5{left:12%;top:12%;width:73%;height:73%;background:radial-gradient(closest-side,rgba(240,183,186,.52) 0%,rgba(240,183,186,.52) 27%,rgba(240,183,186,.437) 45%,rgba(240,183,186,.26) 64%,rgba(240,183,186,.083) 82%,rgba(240,183,186,0) 100%)}

/* ── the ring's own drawing: two arcs turning against each other ─────────── */
.g-layer{position:absolute;inset:0;pointer-events:none}
.g-layer svg{display:block;width:100%;height:100%;overflow:visible}
.g-arc circle{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:34 66}
.g-arc--deep circle{stroke-width:2.6;stroke-dasharray:26 74}
/* the glow that rides with each arc, masked to the ring's band */
.g-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  -webkit-mask:radial-gradient(circle closest-side,transparent 60%,#000 74%,#000 83%,transparent 97%);
          mask:radial-gradient(circle closest-side,transparent 60%,#000 74%,#000 83%,transparent 97%)}
.g-glow--red{opacity:.5;background:conic-gradient(from 0deg,rgba(232,35,44,0) 0deg,rgba(232,35,44,.6) 60deg,rgba(232,35,44,0) 130deg,rgba(232,35,44,0) 360deg)}
.g-glow--deep{opacity:.4;background:conic-gradient(from 180deg,rgba(172,23,32,0) 0deg,rgba(172,23,32,.5) 55deg,rgba(172,23,32,0) 120deg,rgba(172,23,32,0) 360deg)}
/* the static engraving: the ring lines, the detector segments, the ticks.
   One SVG, never animated, so it is painted once and never promoted. */
.g-still circle{fill:none}
.g-still .s-base{stroke:rgba(13,17,23,.05);stroke-width:1.5}
.g-still .s-in{stroke:rgba(13,17,23,.08);stroke-width:1}
.g-still .s-out{stroke:rgba(13,17,23,.06);stroke-width:1}
.g-still .s-det{stroke:rgba(13,17,23,.16);stroke-width:12}
.g-still .s-ticks{stroke:rgba(13,17,23,.13);stroke-width:9}

/* ── the motes ──────────────────────────────────────────────────────────── */
.g-motes{position:absolute;inset:0;pointer-events:none}
/* Greg r8 #2: the glow around each mote was a flat disc of one colour with a
   hard edge. It now falls off in steps to nothing, so the core reads as a point
   of light with a soft halo rather than a sticker. */
.g-mote{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(232,35,44,.95) 0 1.7px,rgba(232,35,44,.6) 2.8px,rgba(232,35,44,.3) 4.4px,rgba(232,35,44,.14) 6.4px,rgba(232,35,44,.05) 8.6px,rgba(232,35,44,0) 11px)}
.g-mote--rose{background:radial-gradient(circle,rgba(255,138,144,.95) 0 1.7px,rgba(255,138,144,.6) 2.8px,rgba(255,138,144,.32) 4.4px,rgba(255,138,144,.15) 6.4px,rgba(255,138,144,.05) 8.6px,rgba(255,138,144,0) 11px)}

/* ── the copy: dark ink over a white wash, as in the comp ────────────────── */
/* The comp's wash, widened from 46%/.94 to 52%/.96 — measured, not chosen:
   over the strongest light the comp's own wash left the lede at
   3.53:1 and the fact row at 1.91:1 (contrast-hero.mjs, six moments of the
   animation). This is the lightest wash that carries them, so the colour
   around the copy still reads. */
.hero--lens .hero-copy::before{background:radial-gradient(52% 50% at 50% 50%,rgba(246,247,249,.96) 0%,rgba(246,247,249,.84) 48%,rgba(246,247,249,0) 100%)}
/* the fact row sits at the edge of that wash, on the brightest part of the
   light; it gets its own soft paper backing rather than a stronger wash over
   the whole block */
.hero--lens .facts{position:relative;border-top:0}
/* Greg r7 note 9: the facts "sit too low" in the band. They did. The band is
   drawn on the <ul>, whose box opens with a 1px rule and the li's own
   padding-top — 17px of furniture above the first glyph — so an even inset
   put 23px above the ink and 10px below (_facts-center.mjs). The top inset is
   now the li padding minus the 10px the bottom has: 16 − 10 desktop,
   12 − 10 at phone width, where that padding is smaller. */
.hero--lens .facts::before{content:"";position:absolute;inset:6px -18px -10px;z-index:-1;border-radius:12px;
  background:radial-gradient(70% 140% at 50% 50%,rgba(246,247,249,.96) 0%,rgba(246,247,249,.9) 55%,rgba(246,247,249,0) 100%);
  /* Fade the backing before its box edges so it blends into the red glow. */
  -webkit-mask-image:linear-gradient(transparent,black 25%,black 75%,transparent),linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,black 25%,black 75%,transparent),linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  mask-composite:intersect}
@media(max-width:899px){
  /* the wash was eating the colour at phone size */
  .hero--lens .hero-copy::before{background:radial-gradient(52% 48% at 50% 50%,rgba(246,247,249,.86) 0%,rgba(246,247,249,.6) 50%,rgba(246,247,249,0) 100%)}
  .hero--lens .facts::before{inset:2px -18px -10px}
  /* Greg r8 #27: on a phone the fact row sat close under the buttons and the
     ring's lower arc had nowhere to show, so the first screen read as a band
     of empty paper. The row drops far enough to let the bottom of the ring
     through above it; the hero's own tail tightens by the same amount so the
     section does not grow. */
  .hero--lens .facts{margin-top:clamp(62px,15vw,104px)}
  .hero--lens{padding-bottom:clamp(34px,6vw,64px)}
}
@media(max-width:559px){
  /* Anchor the facts at the foot of the screen; center the message above them.
     Keep the existing bottom padding and list margin as the shared edge gap. */
  .hero--lens{--hero-edge:clamp(34px,6vw,64px);padding-top:0;
    min-height:calc(100svh - var(--rail-h) - 1px);display:flex}
  .hero--lens .wrap{align-items:stretch}
  .hero--lens .hero-copy{padding-top:0;width:100%;display:flex;flex-direction:column;
    min-height:calc(100svh - var(--rail-h) - 1px - var(--hero-edge))}
  .hero--lens .hero-message{flex:1;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(20px,3svh,28px);padding-top:24px;padding-bottom:12px}
  .hero--lens .lede,.hero--lens .actions{margin-top:0}
  .hero--lens .actions{flex-direction:column;align-items:center;gap:13px}
  .hero--lens .facts{margin-top:0}
  .hero--lens .ring{top:var(--hero-graphic-center,40%);translate:-50% -50%;
    width:clamp(520px,118vw,1420px)}
}

/* ── motion ─────────────────────────────────────────────────────────────── */
/* Three waves, ~320 ms apart, set by main.js: .g-live, then .g-live-2, then
   .g-live-3. Each wave promotes and rasterises only its own layers, so a cold
   load spends three shorter frames on this rather than one ~720 ms one
   (_stall-share.mjs, measured on a real GPU — headless rasterises on the CPU
   and overstates the cost of every gradient here). Three beat both one wave
   and five: each wave carries its own promote-and-commit overhead. Invisible,
   because each animation's first frame is exactly the state the art already
   sits in — nothing jumps when its wave arrives. */
.js-anims .g-live .g-bl{will-change:transform}
.js-anims .g-live-2 .g-arc,.js-anims .g-live-2 .g-glow{will-change:transform}
.js-anims .g-live .g-bl--1{animation:g-bl-1 13s ease-in-out infinite alternate}
.js-anims .g-live .g-bl--2{animation:g-bl-2 17s ease-in-out infinite alternate}
.js-anims .g-live .g-bl--3{animation:g-bl-3 11s ease-in-out infinite alternate}
.js-anims .g-live .g-bl--4{animation:g-bl-4 15s ease-in-out infinite alternate}
.js-anims .g-live .g-bl--5{animation:g-bl-5 9s ease-in-out infinite alternate}
.js-anims .g-live-2 .g-arc--red,.js-anims .g-live-2 .g-glow--red{animation:g-throttle 22s cubic-bezier(.45,0,.3,1) infinite}
.js-anims .g-live-2 .g-arc--deep,.js-anims .g-live-2 .g-glow--deep{animation:g-throttle-rev 27s cubic-bezier(.45,0,.3,1) infinite}
.js-anims .g-live-3 .g-mote{animation:g-mote-1 var(--d,7s) ease-in-out var(--dl,0s) infinite}
.js-anims .g-live-3 .g-mote:nth-child(4n+2){animation-name:g-mote-2}
.js-anims .g-live-3 .g-mote:nth-child(4n+3){animation-name:g-mote-3;animation-direction:alternate}
.js-anims .g-live-3 .g-mote:nth-child(4n+4){animation-name:g-mote-4;animation-direction:alternate}
/* the comp's drift, scaled to the larger discs (62/95) so the travel matches */
@keyframes g-bl-1{to{transform:translate(25%,14%) scale(1.15)}}
@keyframes g-bl-2{to{transform:translate(-26%,20%) scale(.9)}}
@keyframes g-bl-3{to{transform:translate(13%,-29%) scale(1.2)}}
@keyframes g-bl-4{to{transform:translate(-20%,-18%) scale(1.1)}}
@keyframes g-bl-5{to{transform:translate(-14%,11%) scale(1.3)}}
@keyframes g-mote-1{0%,100%{opacity:0;transform:translate(0,0) scale(.5)}42%{opacity:1}50%{transform:translate(7px,-6px) scale(1)}58%{opacity:.9}}
@keyframes g-mote-2{0%,100%{opacity:0;transform:translate(0,0) scale(.5)}42%{opacity:1}50%{transform:translate(-8px,5px) scale(1)}58%{opacity:.9}}
@keyframes g-mote-3{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:.95}55%{transform:translate(-10px,4px) scale(1.2)}72%{opacity:.6}100%{opacity:0;transform:translate(3px,12px) scale(.7)}}
@keyframes g-mote-4{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:.95}55%{transform:translate(9px,-7px) scale(1.15)}72%{opacity:.6}100%{opacity:0;transform:translate(-4px,-11px) scale(.7)}}
@keyframes g-throttle{0%{transform:rotate(0)}28%{transform:rotate(150deg)}45%{transform:rotate(190deg)}78%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}
@keyframes g-throttle-rev{0%{transform:rotate(0)}32%{transform:rotate(-170deg)}50%{transform:rotate(-205deg)}82%{transform:rotate(-335deg)}100%{transform:rotate(-360deg)}}

/* the arrival: hidden from the first paint so the ring cannot show at full
   strength and then vanish when main.js starts its fade. The 4 s net covers a
   page whose scripts never arrive; .motion-on retires it. */
.js-anims .hero--lens .ring{opacity:0}
.js-anims:not(.motion-on) .hero--lens .ring,
.js-anims:not(.motion-on) .hero--lens .hero-line,
.js-anims:not(.motion-on) .hero--lens .reveal{animation:g-show 0s 4s forwards}
@keyframes g-show{to{opacity:1}}
/* off screen, or mid-scroll: hold everything */
.hero--lens.is-offscreen .ring *,.hero--lens.is-scrolling .ring *{animation-play-state:paused !important}
@media(prefers-reduced-motion:reduce){.hero--lens .ring *{animation:none !important}}
/* LENS:end */

/* ── The paid landing page (/lp/scan/) ─────────────────────────────────────
   Built for one action. The rail carries no navigation, a thumb-height bar
   follows phone readers down the page, and the price sits in a panel beside
   the list of what it buys rather than being buried in prose. Everything here
   reuses the site's own components; only the layout is new. */
.rail--lp .wrap{justify-content:space-between}
.rail--lp .rail-end{gap:18px}
.footer--lp{border-top:1px solid var(--line);padding:clamp(28px,4vw,40px) 0}
.footer--lp .small{margin:0 0 8px;color:var(--bone-3);max-width:80ch}
.lp-more{margin:0 0 18px}
.lp-more a{color:var(--bone);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.lp-more .arw{font-style:normal;transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.lp-more a:hover .arw{transform:translateX(4px)}}
.footer--lp a{color:var(--bone-2)}

.lp-hero{padding:clamp(34px,6vw,72px) 0 clamp(26px,4vw,44px)}
.lp-head{max-width:46ch}
.lp-hero h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);letter-spacing:-.03em;line-height:1.04}
.lp-hero .lede{margin-top:18px;max-width:52ch}
.lp-hero .actions{margin-top:26px}
.lp-chips{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lp-chips li{font-size:.875rem;color:var(--bone-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px}

/* The offer sits beside the headline, not below the fold: the price, the four
   facts that decide it and the button, all in the first screen. */
.lp-grid{display:grid;gap:clamp(26px,4vw,48px);align-items:start}
@media(min-width:980px){.lp-grid{grid-template-columns:1.1fr .9fr}
  .lp-grid .lp-aside{position:sticky;top:calc(var(--rail-h) + 22px);max-width:420px;margin-left:auto}}
.lp-list{max-width:74ch}
.lp-aside{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,2.6vw,30px)}
.lp-aside .btn{width:100%;margin-top:18px}
.lp-aside .small{margin-top:12px;color:var(--bone-3)}
.lp-price{margin:0;display:flex;align-items:baseline;gap:10px}
.lp-price b{font:500 clamp(2.4rem,1.6rem + 2.2vw,3.2rem)/1 Archivo,"Archivo Fallback",system-ui,sans-serif;
  letter-spacing:-.035em;color:var(--bone)}
.lp-price span{font-size:.9375rem;color:var(--bone-2)}
.lp-facts{margin:20px 0 0;display:grid;gap:0}
.lp-facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.9375rem}
.lp-facts div:last-child{border-bottom:0}
.lp-facts dt{color:var(--bone-2)}
.lp-facts dd{margin:0;color:var(--bone);font-weight:500}

.lp-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px;max-width:70ch}
.lp-steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.lp-steps h3{font-size:1.12rem;letter-spacing:-.015em}
.lp-steps p{margin-top:6px;color:var(--bone-2);font-size:.9375rem;line-height:1.55}

/* The action bar. Phones only, and it never covers the last thing on the page:
   the close section carries padding for it. */
.cta-bar{display:none}
@media(max-width:899px){
  .cta-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(246,247,249,.94);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .cta-bar .btn{flex:1;min-height:52px;padding:0 14px}
  .cta-bar .btn--ghost{flex:0 0 32%}
  body:has(.cta-bar) .footer--lp{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .lp-hero{padding-top:clamp(22px,5vw,34px)}
}
@media(prefers-reduced-motion:reduce){.cta-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE VESSEL · 2026-09-21 · round 9 #22, the founder: "heart graphic is
   repeated." The Harrison band no longer repeats the hero's heart; it shows
   the three arteries in cross-section, each with its own calcium on the wall.
   Drawn by _round2/vessel.mjs. Motion is transform/opacity only. */
.vs{position:relative;margin:0;width:100%;aspect-ratio:520 / 420}
.vs svg{display:block;width:100%;height:100%;overflow:visible}
.vs-rim{stroke:rgba(255,255,255,.46);stroke-width:1.2}
.vs-wall{stroke:rgba(255,255,255,.16)}
.vs-lumen{fill:url(#vs-in)}
.vs-cal{opacity:var(--o,.8)}
.vs-cal-body{stroke:url(#vs-cal-g);stroke-linecap:round}
.vs-cal-rim{stroke:#FFE7E8;opacity:.7;stroke-linecap:round}
.vs-sec--1 .vs-cal{filter:drop-shadow(0 0 16px rgba(232,35,44,.5))}
.vs-dot{position:absolute;margin:-13px 0 0 -13px}

/* entrance: each section arrives in turn, then its numeral */
.js-anims .vs-sec{opacity:0;transform:scale(.88);transform-box:fill-box;transform-origin:center}
.js-anims .vs-halo{opacity:0}
.js-anims .vs-dot{opacity:0;transform:scale(.6)}
.js-anims .field-bleed.is-on .vs-sec{opacity:1;transform:none;
  transition:opacity .6s ease var(--d),transform .8s var(--ease-out) var(--d)}
.js-anims .field-bleed.is-on .vs-halo{opacity:1;transition:opacity 1s ease .9s}
.js-anims .field-bleed.is-on .vs-dot{opacity:1;transform:none;
  transition:opacity .4s ease var(--d),transform .5s var(--ease-out) var(--d)}
@media(prefers-reduced-motion:reduce){
  .js-anims .vs-sec,.js-anims .vs-dot,.js-anims .vs-halo{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CENTRE BAND ON THE HOMEPAGE · 2026-09-28 · Anthony: "Can we please have
   a locations page or something? That's kind of like the key component."
   Four columns of metros, the cities as links. Generated by
   _round2/home-locations.mjs from the same source as /locations/. */
.hl{display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.hl-t{margin:0 0 14px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-3)}
.hl-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hl-list li{font-size:1.0625rem;line-height:1.35}
.hl-list a{color:var(--ink);text-decoration:none;position:relative;
  transition:color .2s ease}
.hl-list a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out)}
.hl-list a:hover{color:var(--heat)}
.hl-list a:hover::after{transform:scaleX(1)}
/* the four with no page yet: named, not linked */
.hl-list--plain li{color:var(--bone-2)}
@media(hover:none){.hl-list a::after{display:none}}

/* The map, 2026-10-03 · Anthony: "Lets look at a map. instead of a list."
   Desktop: the labelled map, and the list is hidden — the labels are the same
   links. Phone: labels would be ~6px, so a plain map with the list under it.
   Drawn by _round2/home-map.mjs. */
.hm{padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--line)}
.hm-svg{width:100%;height:auto;display:block;overflow:visible}
.hm-svg--labelled{max-width:1000px;margin-inline:auto}
.hm-mob{display:none}
.hm-core{fill:var(--heat)}
.hm-halo{fill:var(--heat);opacity:.16;transform-box:fill-box;transform-origin:center;
  animation:hm-pulse 2.8s ease-out infinite}
@keyframes hm-pulse{0%{transform:scale(.6);opacity:.35}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hm-halo{animation:none}}
.hm-lead{fill:none;stroke:var(--line-3);stroke-width:1}
.hm-lbl text{font-size:17px;font-weight:500;fill:var(--ink);transition:fill .2s ease}
a.hm-lbl:hover text,a.hm-lbl:focus-visible text{fill:var(--heat)}


/* ═══════════════════════════════════════════════════════════════════════════
   THE COMPARISON TABLE · 2026-10-02 · /compare/. A real <table>, because it
   is real tabular data: screen readers announce the row and column, and search
   engines and AI answers read it as a comparison rather than as a picture.
   Scrolls sideways on a phone rather than shrinking to nothing. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(20px,2.6vw,32px);
  border:1px solid var(--line);border-radius:20px;background:#FFFFFF}
.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:.9375rem}
.cmp caption{caption-side:bottom;padding:16px clamp(16px,2vw,24px) 20px;text-align:left;
  color:var(--bone-3);max-width:var(--measure)}
.cmp th,.cmp td{padding:14px clamp(10px,1.3vw,18px);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{border-bottom:1px solid var(--line-2);font-size:.8125rem;font-weight:600;
  line-height:1.3;color:var(--bone-2);white-space:nowrap}
/* Anthony, 2026-10-03: the real lockup in our column header. Sized to sit at
   about the weight the bold name had — present, not shouting. The other three
   columns stay as plain text on purpose: they are categories, not brands, and
   this page never names a competitor. */
.cmp-logo{display:block;width:158px;height:auto;margin-bottom:3px}
@media(max-width:700px){.cmp-logo{width:132px}}
.cmp thead th b{display:block;font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;
  font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink)}
.cmp thead th span{display:block;margin-top:2px;font-weight:400;color:var(--bone-3)}
/* our column carries a tint so the eye can hold its place across nine rows */
.cmp thead th:nth-child(2),.cmp tbody td:nth-child(2){background:rgba(232,35,44,.035)}
.cmp tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.cmp td{color:var(--bone-2)}
/* Anthony, 2026-10-03: checkmarks instead of dots. The tick is the site's own
   #i-check sprite, so it matches every other list on the site rather than
   introducing a second vocabulary.
   The mark appears ONLY where the answer is yes or partly. A tick beside the
   word "No" would read as a contradiction — the same trap the dots fell into
   on the radiation row. A "no" cell is the word alone, set quieter.
   The WORD still carries the meaning, so this reads correctly in greyscale and
   to a colour-blind reader; the tick only speeds up the scan. */
.cmp td.y{color:var(--ink)}
.cmp td.n{color:var(--bone-3)}
.cmp td .ico{color:var(--heat);margin-right:8px;width:1.05em;height:1.05em;vertical-align:-.16em}
.cmp td.p .ico{color:var(--line-3)}
@media(max-width:700px){
  .cmp{font-size:.875rem}
  .cmp-wrap{border-radius:16px}
}
/* Anthony, 2026-10-03: on a phone the table must fit the screen. main.js adds
   .is-one and a row of tabs, and the table shows Smart Scan against one other
   exam at a time. Without JS there is no .is-one, so it scrolls as above. */
.cmp-switch{display:none}
@media(max-width:700px){
  .cmp-switch{display:flex;gap:6px;margin:clamp(20px,2.6vw,32px) 0 -8px;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .cmp-switch button{flex:none;appearance:none;min-height:44px;border:1px solid var(--line-2);background:#FFFFFF;
    color:var(--bone-2);font:inherit;font-size:.8125rem;padding:8px 13px;border-radius:999px;
    cursor:pointer}
  .cmp-switch button[aria-pressed="true"]{border-color:var(--heat);color:var(--heat);
    box-shadow:inset 0 0 0 1px var(--heat)}
  .cmp.is-one{min-width:0}
  .cmp.is-one th,.cmp.is-one td{padding:12px 8px}
  .cmp.is-one th:first-child{padding-left:12px}
  .cmp.is-one thead th{font-size:.75rem;white-space:normal}
  .cmp.is-one .cmp-logo{width:96px}
  .cmp.is-one tbody th{white-space:normal;width:38%;font-size:.8125rem;line-height:1.3}
  .cmp.is-one [data-col]{display:none}
  .cmp.is-one [data-col="0"],.cmp.is-one [data-col].is-shown{display:table-cell}
}

/* the founder's price-match promise, on the dark band */
.field--say .field-copy{max-width:52ch}
.field--say .md-quote{margin:14px 0 0;border:0;padding:0}
.field--say .md-quote p{font-family:Archivo,"Archivo Fallback",system-ui,sans-serif;
  font-weight:500;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.34;
  letter-spacing:-.018em;color:#FFFFFF}
.field--say .md-sign{margin-top:18px;color:var(--ink-deck-2)}
.field--say .md-sign span{display:block;color:var(--ink-deck-3);font-size:.9375rem}
.field--say .eyebrow{color:var(--on-dark)}

/* ══════════════════════════════════════════════════════════════════════════
   THE CALLBACK REQUEST · 2026-10-03 · _round2/lead-form.mjs. Secondary to
   booking, so it is set quieter than the close band above it: no dark field,
   no photograph, the one red button. */
.lead{border-top:1px solid var(--line)}
.lead-row{display:grid;gap:clamp(22px,3vw,48px);align-items:start}
@media(min-width:960px){.lead-row{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
/* on the type ramp: the card-heading step (DESIGN.md cardH3) */
.lead-say h2{font-size:clamp(1.5rem,1.05rem + 1.35vw,2.15rem);letter-spacing:-.02em}
.lead-say p{margin-top:10px;color:var(--bone-2);max-width:38ch;line-height:1.6}
.lead-form{display:grid;gap:16px;min-width:0}
.lead-grid{display:grid;gap:12px}
@media(min-width:620px){.lead-grid{grid-template-columns:1fr 1fr}}
.lead-f{display:grid;gap:6px;min-width:0}
.lead-f--wide{grid-column:1 / -1}
.lead-f span{font-size:.8125rem;font-weight:600;color:var(--bone-2);letter-spacing:.01em}
.lead-f input{appearance:none;width:100%;padding:13px 15px;border:1px solid var(--line-2);
  border-radius:12px;background:#FFFFFF;color:var(--bone);font:inherit;font-size:1rem;
  transition:border-color .2s ease,box-shadow .2s ease}
.lead-f input:focus-visible{outline:none;border-color:var(--heat);box-shadow:0 0 0 3px rgba(232,35,44,.14)}
.lead-f input:user-invalid{border-color:var(--heat)}
/* the honeypot: off the page for a person, still in the HTML for a bot */
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-consent{margin:0;font-size:.8125rem;color:var(--bone-3);line-height:1.55;max-width:62ch}
.lead-consent a{color:var(--bone-2);text-underline-offset:2px}
.lead-form .btn{justify-self:start}
@media(max-width:619px){.lead-form .btn{justify-self:stretch;justify-content:center}}
/* on /request-a-call/ the page head asks the question; the form sits under it */
.lead--page{border-top:0;margin-top:clamp(24px,3vw,36px);max-width:640px}

/* ══════════════════════════════════════════════════════════════════════════
   THE STACK · Greg's border removal and phone gutter (V42). "See what's inside"
   is an ordinary heading above the cards — not pinned (Anthony, 2026-10-03:
   "It doesn't need to stay pinned"). Only the cards pin, so there is no head to
   clear and the phone cards get the screen. */
#exam{--deck-head:0px}
@media(max-width:899px){
  #exam .card--deck,#exam .card--chart{min-height:min(620px,calc(calc(var(--vhl) * 100) - var(--rail-h) - 40px))}
}
@media screen{#exam .card--deck{border:0}}
@media(max-width:899px){
  /* Keep a small strip of the page visible beside the cards. */
  #exam .deck{margin-inline:calc(-1 * clamp(20px,4vw,44px) + 8px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   V40 · THE CENTRES CARD (home-locations.mjs). A light Florida beach behind
   Florida in frosted glass. Desktop: copy left, labelled map right, the city
   names are the links. Phone: no names, no list — the whole card is one tap. */
.loccard{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);
  display:grid;gap:clamp(16px,2.4vw,32px);padding:clamp(26px,4vw,56px);color:var(--bone)}
@media(min-width:900px){.loccard{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;min-height:540px}}
.loccard-bg{position:absolute;inset:0;z-index:-2;margin:0}
.loccard-bg picture{display:block;height:100%}
.loccard-bg img{width:100%;height:100%;object-fit:cover;object-position:0% 50%;display:block}
/* desktop: a light wash from the left keeps the copy readable over the palms;
   it is gone by the middle, so the water and the state stay clear */
@media(min-width:900px){.loccard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,247,249,.86) 0%,rgba(246,247,249,.62) 30%,rgba(246,247,249,0) 52%)}}
/* Anthony: "the CTA is topheavy". The heading, the line and the link are one
   group, centred against the map, and the link is the same light pill the
   phone uses — so it carries weight instead of floating at the foot. */
.loccard-copy{display:grid;gap:14px;justify-items:start}
.loccard-copy h2{color:var(--bone);max-width:16ch}
.loccard-copy .lede{color:#33404C;max-width:34ch}
.loccard-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:13px 20px;border-radius:999px;
  background:rgba(255,255,255,.9);color:var(--bone);font-weight:600;text-decoration:none;
  box-shadow:0 10px 24px -16px rgba(13,40,70,.45);transition:background .2s ease,color .2s ease}
.loccard-link:hover{background:#FFFFFF;color:var(--heat)}
.loccard-map{min-width:0}
.loccard .hm{border:0;padding:0}
.loccard .hm-svg--labelled{max-width:none}
.loccard .hm-mob{display:none}
.loccard .hm-lead{stroke:rgba(13,17,23,.4)}
.loccard .hm-lbl text{fill:#0D1117;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:5px;stroke-linejoin:round}
/* Florida as frosted glass (home-map.mjs, frosted()) */
.fl-wrap{position:relative}
.fl-wrap > .hm-svg{position:relative;z-index:1}
.fl-frost{position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.loccard .hm-svg > path{fill:rgba(255,255,255,.18);stroke:#FFFFFF;stroke-width:2;filter:none}
@media(max-width:899px){
  .loccard{display:flex;flex-direction:column;padding:24px 22px 26px;min-height:calc(var(--vhl) * 78)}
  .loccard-bg img{object-position:50% 100%}
  .loccard-copy{display:contents}
  .loccard-map{order:2}
  .loccard-link{order:3;margin-top:auto;align-self:flex-start}
  .loccard .hm-svg--labelled,.loccard .fl-wrap:has(> .hm-svg--labelled){display:none}
  .loccard .hm-mob{display:block;max-width:320px;margin:4px auto 0;width:100%}
  /* on a phone the whole card is the link */
  .loccard-link::after{content:"";position:absolute;inset:0;z-index:5}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE iOS / macOS 26 TOOLBAR RULE, TOP EDGE (2026-10-03). Safari 26 tints its
   Liquid Glass toolbar from the background-COLOR and backdrop-filter of a
   pinned element at the screen edge — the rail is sticky, full width, at the
   top, so its frosted panel turned Safari's bar solid ("pinned white"). The
   rail itself now carries NO background or backdrop-filter; the same frosted
   panel is drawn on ::before, which Safari does not sample, so its toolbar
   stays glass over the page. Looks identical. Same rule as the deck cards. */
.rail,.rail.is-scrolled,.rail:not(.is-scrolled):hover,.rail:not(.is-scrolled):focus-within{
  background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.rail::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:transparent;transition:background .4s var(--ease)}
.rail.is-scrolled::before{background:rgba(246,247,249,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media(min-width:901px){
  .rail:not(.is-scrolled):hover::before,.rail:not(.is-scrolled):focus-within::before{
    background:rgba(246,247,249,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}

/* 2026-10-03 (Anthony, ~900px screenshot): the labelled map only where its
   labels are readable — 1100px and up. Between 900 and 1099 the card keeps two
   columns but shows the plain map, and the whole card is the link, as on a
   phone. The CTA is one span, so the inline-flex never splits it into columns. */
.loccard-link span{white-space:nowrap}
@media(min-width:900px) and (max-width:1099px){
  .loccard .hm-svg--labelled,.loccard .fl-wrap:has(> .hm-svg--labelled){display:none}
  .loccard .hm-mob{display:block;max-width:400px;margin-inline:auto;width:100%}
  .loccard-link::after{content:"";position:absolute;inset:0;z-index:5}
}
/* 2026-10-03: at 1100–1180px the desktop photo drift (scale 1.10) pushed the
   deck pictures ~9px past the viewport and the page scrolled sideways. `clip`,
   not `hidden`: it creates no scroll container, so the sticky cards still pin. */
#exam{overflow-x:clip}
/* the footer email is one unbreakable word; at ~1100px its column is narrower
   than it and the page scrolled sideways. Let it break if it must. */
.footer-cols a{overflow-wrap:anywhere;min-width:0}

/* a city name on the desktop map is a link; its hit area is a 30px-tall band
   (home-map.mjs, .hm-hit), not the 14px of the glyphs (audit 2026-10-03) */
.hm-hit{fill:transparent}