/* ─────────────────────────────────────────────────────────────────
   Sensavera · direction G "Instrument"
   Page-scoped stylesheet for the redesigned homepage.

   Loaded ONLY by index.html. The rest of the site still runs on
   styles.css, whose class names and two custom properties (--paper,
   --rule) would collide with the ones below. As each page is rebuilt
   in this direction it moves onto this sheet, and styles.css shrinks.

   Built verbatim from the approved mockup, _mockup-home-final.html,
   which is in this branch's history at commit 652dc60 and is deliberately
   not in the tree: Vercel serves the repo root. Change the design here
   only with sign-off.
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   VARIANT A · INSTRUMENT
   Premise: delete every icon. The voice waveform is the only
   recurring graphic, used at four scales as the page's structure.
   Teal has exactly one referent on this page: the human voice.
   Everything else is graphite. The primary button is therefore navy.

   TYPE SCALE (8 steps, nothing else is permitted)
     --t1 12   --t2 14   --t3 16   --t4 19
     --t5 24   --t6 33   --t7 46   --t8 clamp(40,6vw,72)
   SPACE SCALE (4px base)
     --s1 4  --s2 8  --s3 12 --s4 16 --s5 24
     --s6 32 --s7 48 --s8 64 --s9 96 --s10 128
   FACES  Newsreader (statements) · IBM Plex Sans (prose)
          IBM Plex Mono (every number and label on the page)
   ───────────────────────────────────────────────────────────────── */
:root{
  --t1:12px; --t2:14px; --t3:16px; --t4:19px;
  --t5:24px; --t6:33px; --t7:46px; --t8:clamp(40px,6vw,72px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --ink:#141b26;          /* all structural type */
  --ink-2:#55606e;        /* secondary prose */
  /* Was #8a94a1, which is 3.07:1 on the card and 2.79:1 on --paper-2 at
     12px, below AA. Every meta label, timestamp and caption on the site
     takes this token, so the fix belongs here rather than on 21 rules.
     #67707c clears 4.5:1 on every ground the site uses and stays a
     visible step lighter than --ink-2, which the hierarchy needs.
     This restyles the homepage's meta text too, which is the point. */
  --ink-3:#67707c;        /* meta */
  --paper:#fcfcfa;
  --paper-2:#f4f4f0;
  --voice:#1f8080;        /* RESERVED: the human voice, nothing else */
  --voice-wash:rgba(31,128,128,.15);
  --warm:#b2560d;         /* the one other theme colour, used as a 2px rule */
  --voice-lift:#3f9f9f;   /* the same teal, lifted for dark grounds */
  /* The same teal, one step deeper, for small text on --paper-2. --voice
     measures 4.27:1 there, under the 4.5:1 AA needs at 14px; this clears
     it at 4.63:1. --voice itself is untouched, so the waveform, wordmark
     and evidence card keep the brand colour exactly.
     Which teal a rule takes is a threshold, not a preference. AA counts
     text as large at 24px, or 18.66px when bold, and large text needs only
     3:1. So .aud-list a:hover .an takes --voice-deep (19px/400 is normal
     text) while .aud-part:hover .an correctly keeps --voice (24px/500 is
     large, and 4.27 clears 3:1). The two look inconsistent side by side
     and are not. Do not "fix" the second one.
     Note also that a contrast sweep over the resting DOM sees neither of
     them: the .aud-list failure survived a clean 143-node audit because it
     only exists on hover. Walk :hover colours explicitly. */
  --voice-deep:#1d7a7a;
  --paper-warm:#f8f2ec;   /* the loop block, warmed toward its own rule */
  --rule:rgba(20,27,38,.14);
  --rule-soft:rgba(20,27,38,.07);
  --measure:64ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t3)/1.65 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
/* text-wrap:balance evens the lines of any heading that wraps, and does
   nothing to one that fits on a single line, so the approved desktop
   rendering does not move. It lives on the element selector rather than on
   .stmt because the defect was never confined to the statements: of the 20
   headings on this page the statement classes are 6, and four of the strands
   found were in plain h3s (two rail steps at 825-900px, the fork column head,
   and .ec-claim at 450-520px). One declaration in one place; .read-h opts out
   below, carrying a hand-placed <br> that balance fights. */
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.018em;text-wrap:balance}
p{margin:0}
/* Bind a run of words that must never break, where an &nbsp; cannot help:
   &nbsp; closes the gap BETWEEN two words and does nothing about a break
   INSIDE a hyphenated one, so a bound "smart follow-ups" still drops "ups"
   onto a line of its own. Measured on the homepage across 257 widths from
   320 to 1600: &nbsp; alone left 6 offending widths, a non-breaking hyphen
   7, no binding at all 28, and this 0.

   Chosen over U+2011, and that is now measured rather than assumed. At 100px
   the character renders 33.3125 wide in Newsreader, in IBM Plex Sans, in
   serif, in sans-serif and under a family that does not exist: identical to
   the no-font fallback every time, and different from each face's own hyphen
   (Newsreader 32.75, Plex 39.91). Neither face carries the glyph, so a
   U+2011 falls back to a third face in the middle of a word. The control is
   the part that makes the result readable: a probe where every family agrees
   has measured nothing, and 32.75 against 33.3125 is what proves the face
   was actually loaded.

   It is the stronger tool and not the default: nowrap cannot be overridden
   by the balancer, so where the measure gets tight it overflows instead of
   stranding, which .fchip below is a live case of. Reach for &nbsp; first
   and for this only when the break is inside a word.

   Typesetting rather than styling, so every use carries a comment beside
   the copy it binds, saying which widths it protects.

   (This branch and the base each added this rule independently, in the same
   hour, and the merge took both because they sit in different places. Two
   identical declarations do not conflict and the duplicate-rule check reads
   a committed ref rather than the working tree, so nothing would have caught
   it. Merged by hand into this one.) */
.nb{white-space:nowrap}
.wrap{width:min(1180px,calc(100% - var(--s8)));margin-inline:auto}
@media(max-width:640px){.wrap{width:calc(100% - var(--s5))}}

/* every number and label on this page is monospaced. that is the
   difference between a brochure and an instrument. */
/* --ink-3, taking the approved homepage's value rather than this branch's
   --ink-2. Both clear AA (--ink-3 on --paper is 4.88:1, on --paper-2 4.55:1),
   so this was never a contrast fix, only a reading of how loud a section
   eyebrow should be, and the homepage rendering is the one Ashwin signed off.
   Carrying a silent divergence into a merge is worse than losing the argument.
   Every dark-ground use of .mono (.read .sec-label, .close) sets its own
   colour, so nothing there is affected either way. */
.mono{font:500 var(--t1)/1.2 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
/* No text-wrap:balance here, and no component-heading rule either. Both were
   on this branch and both are superseded by the balance on h1,h2,h3 above,
   which reaches every heading the shell's components use (.board-name,
   .ec-claim, .fork-grid h3, .qs-grid h3, .deliver-row h3) and every one this
   branch measured stranding on /health-plans. One declaration beats two. */
.stmt{font-family:"Newsreader",Georgia,serif;font-weight:300;line-height:1.14}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:9;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4)}


/* ── header */
header{position:sticky;top:0;z-index:8;background:rgba(252,252,250,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-soft)}
.nav{display:flex;align-items:center;gap:var(--s6);height:var(--s8)}
.mark{font:700 var(--t4)/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-1px;text-decoration:none}
.mark i{font-style:normal;color:var(--voice)}
.nav ul{display:flex;gap:var(--s5);list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font-size:var(--t2);text-decoration:none;color:var(--ink-2)}
.nav ul a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:var(--s3) var(--s5);font:500 var(--t2)/1.4 "IBM Plex Sans",sans-serif;border-radius:2px}
.btn:hover{background:#000}
.btn-lg{padding:var(--s4) var(--s6);font-size:var(--t3)}

/* ── mobile menu (restored from the live site) ──────────────────────────
   Below 820px the nav list becomes a drawer. The markup, the class names,
   the aria handling and the open/close behaviour are the live site's, so
   /script.js drives this unchanged; only the drawing is redone in this
   page's tokens. The toggle reads MENU / CLOSE rather than a hamburger,
   because this direction draws no icons.

   The drawer is absolute, not fixed. The header sets backdrop-filter,
   which makes it the containing block for fixed descendants, so a fixed
   drawer would measure its inset from the header instead of the viewport. */
.nav-cta-li{display:none}
.mobile-toggle{display:none;align-items:center;min-height:44px;min-width:44px;
  padding:0 var(--s2);border:0;background:none;cursor:pointer;
  font:500 var(--t1)/1 "IBM Plex Mono",monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.mobile-toggle:hover{color:var(--ink)}
.mobile-toggle .mt-b{display:none}
body.menu-open .mobile-toggle .mt-a{display:none}
body.menu-open .mobile-toggle .mt-b{display:inline}
body.menu-open{overflow:hidden}
@media(max-width:820px){
  /* the nav list is out of flow as a drawer, and the header CTA is hidden,
     so nothing is left to push the toggle to the edge the live site puts it on */
  .mobile-toggle{display:inline-flex;margin-left:auto}
  .nav ul{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100dvh - var(--s8));overflow-y:auto;
    flex-direction:column;gap:0;margin:0;
    padding:var(--s2) var(--s5) var(--s6);
    background:var(--paper);border-bottom:1px solid var(--rule)}
  .nav ul.open{display:flex}
  .nav ul li{border-bottom:1px solid var(--rule-soft)}
  .nav ul a{display:flex;align-items:center;min-height:44px;
    font-size:var(--t4);color:var(--ink)}
  /* The toggle costs the row 77px, which wrapped "Request a walkthrough"
     onto two lines below about 430px. The CTA moves into the drawer, as it
     does on the live site, so the header reads wordmark and MENU at every
     touch width. The hero CTA is still on screen at first paint, so this
     does not bury the ask. */
  .nav>.btn{display:none}
  .nav-cta-li{display:block;border-bottom:0}
  /* one step past `.nav ul a`, which would otherwise take the button's
     colour and size back to the plain drawer-row treatment */
  .nav ul a.nav-cta-drawer{justify-content:center;width:100%;margin-top:var(--s5);
    padding:var(--s3) var(--s5);background:var(--ink);color:var(--paper);
    font:500 var(--t2)/1.4 "IBM Plex Sans",sans-serif}
}

/* ── waveform: the one graphic. four scales, one component. */
.wave{display:flex;align-items:center;gap:2px;width:100%;overflow:hidden}
.wave b{display:block;flex:1 1 2px;min-width:1px;max-width:3px;border-radius:2px;
  background:var(--voice);opacity:.30}
.wave b.on{opacity:.85}
.wave--xl{height:132px;gap:3px}
.wave--xl b{max-width:4px}
.wave--rail{height:var(--s7)}
.wave--spine{height:var(--s8)}
.wave--hair{height:var(--s5);gap:2px}
.wave--hair b{opacity:.22}

/* ── hero */
.hero{padding:var(--s9) 0 0}
.hero .mono{margin-bottom:var(--s5)}
.hero h1{font-size:var(--t8);max-width:17ch}
.hero .lead{margin:var(--s6) 0 0;max-width:52ch;font-size:var(--t4);line-height:1.6;color:var(--ink-2)}
.hero .act{margin-top:var(--s7);display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.hero .act .mono{margin:0;text-transform:none;letter-spacing:.02em}
.hero-wave{margin-top:var(--s8);padding-bottom:var(--s9);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* ── specimen: the word, as a measured entry */
.specimen{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);padding:var(--s7) 0}
.spec-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.spec-word{font:300 var(--t6)/1 "Newsreader",serif}
.spec-phon{font:400 var(--t2)/1 "IBM Plex Mono",monospace;color:var(--ink-3);margin-top:var(--s3)}
.spec-roots{margin-top:var(--s5);font:400 var(--t2)/1.9 "IBM Plex Mono",monospace;color:var(--ink-2)}
.spec-roots em{font-style:normal;color:var(--voice-deep)}   /* 14px on --paper-2: see --voice-deep */
.spec-def{font:300 var(--t5)/1.4 "Newsreader",serif;max-width:34ch}
.spec-note{margin-top:var(--s4);font-size:var(--t2);color:var(--ink-2);max-width:46ch}
@media(max-width:820px){.spec-grid{grid-template-columns:1fr;gap:var(--s6)}}

/* ── the rail: four steps read along one signal. no icons. */
.rail-sec{padding:var(--s9) 0}
.sec-label{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s7)}
.sec-label hr{flex:1;border:0;border-top:1px solid var(--rule);margin:0}
.rail-h{font-size:var(--t6);font-weight:300;max-width:22ch;margin-bottom:var(--s7)}
.rail-h em{font-style:normal;font-weight:500}
.rail{display:grid;grid-template-columns:repeat(4,1fr)}
.rail>li{list-style:none;padding-right:var(--s6)}
.rail .n{font:400 var(--t2)/1 "IBM Plex Mono",monospace;color:var(--voice);letter-spacing:.06em}
.rail .tick{margin:var(--s3) 0 var(--s5);height:var(--s4);border-left:1px solid var(--rule);
  border-top:1px solid var(--rule)}
.rail h3{font-size:var(--t4);font-family:"Newsreader",serif;font-weight:400;margin-bottom:var(--s3)}
.rail p{font-size:var(--t2);color:var(--ink-2);line-height:1.6}
.rail-foot{margin-top:var(--s6);font-size:var(--t2);color:var(--ink-3);max-width:var(--measure)}
@media(max-width:820px){
  .rail{grid-template-columns:1fr 1fr;gap:var(--s6) 0}
}
@media(max-width:520px){.rail{grid-template-columns:1fr}}

/* ── the reading: one finding, with its evidence, at full scale */
.read{background:var(--ink);color:var(--paper);padding:var(--s9) 0}
/* Scoped to the section's own eyebrow. Unscoped, this also caught every
   .mono inside the white card and painted it near-white on white. */
.read .sec-label .mono{color:rgba(252,252,250,.5)}
.read .sec-label hr{border-color:rgba(252,252,250,.18)}
/* the <br> sets the break; 20ch re-wrapped the second line into two */
.read-h{font-size:var(--t6);font-weight:300;max-width:none;margin-bottom:var(--s8);color:#fff;
  text-wrap:wrap}   /* the <br> sets the break, not the balancer */
.read-h em{font-style:normal;font-weight:500}
/* The finding is a white card on the dark band: an object you could hand
   someone, rather than type laid on the page. The two marks in the
   quotation are the two themes the chips name. */
.ecard{background:#fff;border-radius:2px;padding:var(--s6);color:var(--ink)}
@media(max-width:640px){.ecard{padding:var(--s5) var(--s4)}}
.ec-eyebrow{color:var(--voice);margin-bottom:var(--s4)}
.ec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3) var(--s5);flex-wrap:wrap}
/* no measure cap: the claim is 54 characters and holds one line wherever
   the card is wide enough for it, dropping a step at 860px */
.ec-claim{flex:1 1 auto;font:300 var(--t5)/1.3 "Newsreader",Georgia,serif}
.ec-kick{display:inline;margin-right:var(--s2);color:var(--ink-3);vertical-align:.16em}
.ec-pill{flex:0 0 auto;padding:5px 12px;border:1px solid var(--rule);border-radius:100px;
  color:var(--ink-2);text-transform:none;letter-spacing:.04em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:860px){.ec-claim{font-size:var(--t4)}}

/* Only the excerpt is drawn dark, and it starts where the caret points, so
   the run reads as the passage you are about to read rather than as
   elapsed time. */
.spine{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule-soft)}
.spine .wave b{opacity:.22;background:var(--voice)}
.spine .wave b.on{opacity:1;background:var(--voice)}
.spine-key{position:relative;margin-top:var(--s3);height:1.2em;
  font:400 var(--t1)/1.2 "IBM Plex Mono",monospace;letter-spacing:.06em;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.spine-key .k-a{position:absolute;left:0}
.spine-key .k-b{position:absolute;right:0}
/* the caret sits ON the first bar of the excerpt; the label runs right from it.
   Its left is set in script.js from the bar's measured position, because the
   bars are a fixed pitch and need not fill the container. */
.spine-key .k-mark{position:absolute;white-space:nowrap;transform:translateX(-4px);
  color:var(--voice);font-weight:500}
@media(max-width:600px){.spine-key .k-mark .k-long{display:none}}

.ec-who{margin-top:var(--s5);color:var(--voice)}
.ec-who i{font-style:normal;color:var(--ink-3)}

/* the context either side stays, dimmed, so the excerpt reads as an excerpt */
.ec-quote{margin:var(--s4) 0 0;padding-left:var(--s5);max-width:82ch;
  border-left:2px solid var(--voice);
  font:300 var(--t4)/1.68 "Newsreader",Georgia,serif;color:var(--ink)}
.ec-quote .faint{color:var(--ink-3)}
.ec-quote mark{background:none;color:var(--ink)}
/* One of each: the finding's own theme washed, the second theme ruled.
   Scoped to .ec-quote so these outweigh the `.ec-quote mark` reset above,
   which is one step more specific than a bare class and silently won. */
.ec-quote .mk-b{background:var(--voice-wash);padding:1px 3px;border-radius:2px}
.ec-quote .mk-a{box-shadow:inset 0 -2px 0 var(--warm)}

/* the follow-up. The question that earned the next answer is the one worth
   showing; the opening question is not. */
.turn{margin-top:var(--s5);padding-left:var(--s5);border-left:1px solid var(--rule)}
.turn .who{font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.turn p{margin-top:var(--s2);font-size:var(--t2);color:var(--ink-2);line-height:1.6}

.ec-themes{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s6);
  margin-top:var(--s5)}
.chip{font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink)}
.chip-b{padding:5px 12px;border-radius:100px;background:var(--voice-wash)}
.chip-a{box-shadow:inset 0 -2px 0 var(--warm)}


/* ── two ways in: a fork in a rule, not two icon cards */
.fork{padding:var(--s9) 0}
/* No text-wrap:balance here. The h1,h2,h3 element rule near the top of
   this file carries it, and .fork-h is an <h2> on both pages that use
   it, so a copy on this rule would be dead weight reading like a
   separate decision. (This comment used to credit .stmt, which carried
   balance for a while and no longer does; the conclusion did not move,
   only the rule doing the work.)
   Removed after measuring: with it gone, / and /health-plans both show
   no orphaned statement heading at the nine widths measured. That is a
   narrower claim than the one this comment used to make. The sweep
   behind it only ever looked at .stmt and its siblings, so "clean" meant
   clean among statement headings; every h3 on both pages was outside it,
   and six of /health-plans' were stranding. See the component-heading
   balance rule near .stmt for what that missed and what fixed it.

   Where balance does and does not reach, since it is not obvious:
   .read-h sets text-wrap:wrap to protect its hand-placed <br>, so it is
   the one statement heading the balancer never touches, and its orphan is
   bound in the page's copy with &nbsp; instead. Below 380px it strands
   anyway; the homepage thread measured that and accepted it, because the
   approved two-line desktop break is worth more than the phone edge.
   .rail-h and .qs-h are .stmt too and are now covered, having previously
   orphaned on real copy: .rail-h at all nine widths on
   /academic-researchers, whose six-word heading does not fit its 22ch cap
   with company on the last line, and .qs-h at 390px on the homepage. */
.fork-h{font-size:var(--t6);max-width:none;margin-bottom:var(--s7)}
.fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);
  border-top:1px solid var(--ink)}
.fork-grid>div{padding-top:var(--s5)}
.fork-grid>div+div{border-left:1px solid var(--rule);padding-left:var(--s8)}
/* Scoped to the grid, not the section. .fork-grid.is-3 is reusable on a
   bare .band, and while these hung off .fork such a section rendered its
   columns in Plex Sans with no teal rules and nothing to signal it. */
.fork-grid h3{font:400 var(--t5)/1.25 "Newsreader",serif;margin:var(--s4) 0 var(--s4)}
.fork-grid ul{margin:var(--s5) 0 0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.fork-grid li{font-size:var(--t2);color:var(--ink-2);padding-left:var(--s5);position:relative}
.fork-grid li::before{content:"";position:absolute;left:0;top:.7em;width:var(--s3);height:1px;background:var(--voice)}
/* The loop closes the fork, so it is a block the two columns sit above
   rather than a third row beside them. Warm is the one other theme
   colour, already used as a 2px rule on the evidence card. */
.loop{margin-top:var(--s7);padding:var(--s6);background:var(--paper-warm);
  border-top:2px solid var(--warm);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s8)}
.loop p{font-size:var(--t2);color:var(--ink-2);max-width:56ch}
@media(max-width:640px){.loop{padding:var(--s5) var(--s4)}}
@media(max-width:820px){
  .fork-grid{grid-template-columns:1fr;gap:var(--s6)}
  .fork-grid>div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:var(--s6)}
  .loop{grid-template-columns:1fr;gap:var(--s4)}
}

/* ── audiences: a typographic list. no icons, no tiles. */
.aud{padding:var(--s9) 0;border-top:1px solid var(--rule);background:var(--paper-2)}
.aud-h{font-size:var(--t6);font-weight:300;margin-bottom:var(--s7)}
.aud-h em{font-style:normal;font-weight:500}
.aud-h b{font-weight:400;font-variant:small-caps;letter-spacing:.04em} /* device: small caps */
.aud-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s8)}
.aud-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s5);
  padding:var(--s5) 0;border-top:1px solid var(--rule);text-decoration:none;align-items:baseline}
.aud-list a:hover .an{color:var(--voice-deep)}   /* 19px on --paper-2 */
.an{font:400 var(--t4)/1.3 "Newsreader",serif}
.ad{font-size:var(--t2);color:var(--ink-2);line-height:1.55}
/* Not a seventh audience. Its own label names it as a partner channel,
   and the name runs a step above the six so the difference reads before
   the words do. Full width, so it does not sit on their columns. */
.aud-part{display:grid;grid-template-columns:1fr;
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:2px solid var(--ink);text-decoration:none}
.ap-lab{margin:0 0 var(--s4);color:var(--warm)}
.ap-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--s5);align-items:baseline}
.aud-part .an{font-size:var(--t5);font-weight:500}
.aud-part:hover .an{color:var(--voice)}   /* .aud-part .an is --t5/500 = 24px, large text, so 3:1 applies and --voice's 4.27 clears it. Not a missed --voice-deep. */
@media(max-width:820px){.aud-list{grid-template-columns:1fr}
  .aud-list a,.aud-part,.ap-row{grid-template-columns:1fr;gap:var(--s2)}}

/* ── questions: a grid, not an accordion of six */
.qs{padding:var(--s9) 0}
.qs-h{font-size:var(--t6);font-weight:300;margin-bottom:var(--s7)}
.qs-h em{font-style:normal;font-weight:500}
.qs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s7) var(--s8)}
.qs-grid>div{border-top:1px solid var(--rule);padding-top:var(--s4)}
.qs-grid h3{font:500 var(--t3)/1.45 "IBM Plex Sans",sans-serif;letter-spacing:0;margin-bottom:var(--s3)}
.qs-grid p{font-size:var(--t2);color:var(--ink-2)}
@media(max-width:900px){.qs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.qs-grid{grid-template-columns:1fr;gap:var(--s5)}}

/* ── close: founder line and the ask, one band (the live site has two) */
.close{background:var(--ink);color:#fff;padding:var(--s9) 0 var(--s8)}
.close-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s8);align-items:end}
/* The ramp holds --t7 down to the 390px phone and only gives way below it.
   .close h2 was a flat 46px at every width while .sub-hero h1 already rode a
   clamp, so at 320px the headline had 296px of content box and any run bound
   with an &nbsp; wider than that pushed the page sideways. The academia page
   hit it: a two-word nbsp run measured 336px and took scrollWidth to 360
   against a 320 client. No page overflows today, so this closes a trap rather
   than fixing a live break, which is why it is NOT the sub-hero's 6vw: that
   ramp would drop every close headline from 46px to 36px at 390 and restyle
   four signed-off pages to fix something none of them has. 11.8vw is 46px at
   exactly 390, so the rendering is unchanged at and above the phone and only
   shrinks into the 320-390 band (37.8px at 320), which is enough headroom to
   clear the academia case with room over. */
.close h2{font-size:clamp(36px,11.8vw,var(--t7));max-width:16ch;color:#fff}
.close h2 s{text-decoration:none;opacity:.42}   /* device: struck-back weight */
.close p{margin-top:var(--s5);font-size:var(--t3);color:rgba(252,252,250,.66);max-width:44ch}
.close .btn{background:var(--paper);color:var(--ink)}
.close .btn:hover{background:#fff}
.close .mono{color:rgba(252,252,250,.45);margin-bottom:var(--s4)}
/* The bars sat at .22 (.wave--hair) times .55 here, about 12% teal on the
   ink ground, which measures near 1.2:1 and reads as nothing. Teal still
   means the voice on this band, so the fix is a lighter step of the same
   hue rather than a different colour. */
.close-wave{margin-top:var(--s8)}
.close-wave .wave b{background:var(--voice-lift);opacity:1}
@media(max-width:820px){.close-grid{grid-template-columns:1fr;gap:var(--s6);align-items:start}}

/* ── footer */
footer{background:var(--ink);color:rgba(252,252,250,.55);padding:0 0 var(--s7)}
.trust{display:flex;gap:var(--s7);flex-wrap:wrap;padding:var(--s5) 0;
  border-top:1px solid rgba(252,252,250,.14);border-bottom:1px solid rgba(252,252,250,.14);
  font:400 var(--t1)/1.6 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.fgrid{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding-top:var(--s5);font-size:var(--t2)}
.fgrid a{color:rgba(252,252,250,.55);text-decoration:none;margin-left:var(--s5)}
.fgrid a:hover{color:#fff}
footer .mark{color:rgba(252,252,250,.85)}

/* ═══════════════════════════════════════════════════════════════════
   G · SCREENS
   A, unchanged, plus the product itself.

   The rule that makes these different from ordinary product shots:
   every screen is drawn in the page's own language. Mono for each
   numeral. Newsreader for any finding statement. Teal only where a
   human voice is actually present. 1px hairlines, 2px corners, no
   browser chrome, no traffic lights, no gradients, no soft shadows.
   A screen here should look like the same hand drew it as drew the
   page, because that is the claim the page is making.
   Type and space come from the same 8-step and 4px scales. Nothing
   here introduces a ninth size.
   ═══════════════════════════════════════════════════════════════════ */

/* a screen: paper, one hairline, a square-ish corner */
.scr{background:#fff;border:1px solid var(--rule);border-radius:2px}
.scr-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);
  flex-wrap:wrap;padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule-soft);
  font:500 var(--t1)/1.5 "IBM Plex Mono",monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.scr-b{padding:var(--s3)}
.scr-ft{padding:var(--s2) var(--s3);border-top:1px solid var(--rule-soft);
  font:400 var(--t1)/1.5 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink-3)}

/* waveform, two smaller scales. same component, same script. */
.wave--mini{height:var(--s5)}
.wave--chip{height:var(--s4)}
.wave--chip b,.wave--mini b{max-width:2px}

/* ── the participant's phone, in the hero's dead right-hand space ── */
.phone{width:100%;max-width:316px;background:#fff;border:1px solid var(--ink);
  border-radius:12px;padding:var(--s2)}
.ph-scr{border:1px solid var(--rule-soft);border-radius:4px;overflow:hidden}
.ph-top{display:flex;justify-content:space-between;padding:var(--s2) var(--s3);
  font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink-3);
  border-bottom:1px solid var(--rule-soft)}
.ph-b{padding:var(--s4) var(--s3)}
.ph-q{font:300 var(--t4)/1.32 "Newsreader",serif;color:var(--ink)}
.ph-rec{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule-soft)}
.ph-meta{display:flex;justify-content:space-between;margin-top:var(--s3);
  font:500 var(--t1)/1 "IBM Plex Mono",monospace;letter-spacing:.07em;color:var(--ink-3)}
.ph-meta b{color:var(--voice);font-weight:500}
.ph-said{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule-soft);
  font-size:var(--t2);line-height:1.55;color:var(--ink-3)}
.ph-cap{margin-top:var(--s3);font:500 var(--t1)/1.5 "IBM Plex Mono",monospace;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);text-align:center}

/* Wide: one grid, text left, device right. The h1 keeps its 17ch
   measure so it breaks on exactly the same words as before. */
/* The device sits beside the text from 900px up. It used to require 1120px,
   which dropped the phone below the hero on a ~1080px window with plenty of
   room left. Between 900 and 1120 the column flexes instead of holding a
   fixed 316px, so the text measure never gets squeezed. */
@media(min-width:900px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(228px,24vw,316px);
    column-gap:var(--s7);align-items:start}
  .hero .wrap>p,.hero .wrap>h1,.hero .wrap>div.act{grid-column:1}
  /* scoped to the homepage's own grid. Unscoped, this also caught the
     specimen column in .sub-hero-grid, where grid-row:1/span 4 opened
     three empty 64px rows under a two-item grid and pushed the specimen
     to the bottom. Found by /public-health, the first page to use that
     column; .hero-dev is a direct child of .hero .wrap, so the homepage
     device is unmoved. */
  .hero .wrap>.hero-dev{grid-column:2;grid-row:1/span 4;align-self:end;justify-self:end}
}
@media(min-width:1120px){
  .hero .wrap{column-gap:var(--s8)}
}
@media(max-width:899px){
  /* scoped for the same reason as the rule above: inside .sub-hero-grid
     this margin stacked on the grid's own 64px gap, giving 128px between
     the text and the specimen on a phone. */
  .hero .wrap>.hero-dev{margin-top:var(--s8);display:flex;justify-content:flex-start}
}

/* ── four step screens along the rail ── */
/* Subgrid: the four columns share row lines, so the numerals, ticks and
   headings sit on one baseline no matter how tall each screen is. The
   live site staggered an equivalent strip by 20px; that is the bug this
   avoids. */
.rail{grid-template-rows:auto auto auto auto auto}
.rail>li{grid-row:span 5;display:grid;grid-template-rows:subgrid}
.rail .scr{margin-bottom:var(--s5);align-self:start;width:100%}
.step-q{font:300 var(--t3)/1.34 "Newsreader",serif;color:var(--ink)}
.step-sms{font-size:var(--t2);line-height:1.5;color:var(--ink-2)}
.step-sms u{text-decoration:none;color:var(--voice);border-bottom:1px solid var(--voice)}
.step-lbl{font:500 var(--t1)/1.5 "IBM Plex Mono",monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s2)}
.step-echo{font-size:var(--t2);line-height:1.5;color:var(--ink-3);
  border-left:2px solid var(--voice);padding-left:var(--s3);margin-bottom:var(--s3)}
.step-row{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:var(--s2) 0;border-top:1px solid var(--rule-soft);font-size:var(--t2);color:var(--ink-2)}
.step-row:first-of-type{border-top:0}
.step-row b{font:500 var(--t2)/1 "IBM Plex Mono",monospace;color:var(--ink)}
.step-row{border-left:2px solid transparent;padding-left:var(--s3)}
.step-row.is-on{color:var(--ink);border-left-color:var(--voice);background:var(--voice-wash)}
.step-tl{display:flex;justify-content:space-between;margin-top:var(--s2);
  font:500 var(--t1)/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink-3)}
.step-tl b{color:var(--voice);font-weight:500}

/* ── the console: what the team sees ── */
.con{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:var(--s9) 0}
/* emphasis device, used once and nowhere else on this page: weight */
.con-h{font-size:var(--t6);max-width:24ch;margin-bottom:var(--s7)}
.con-h b{font-weight:500}
.con-scr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr)}
.con-l{border-right:1px solid var(--rule-soft);padding:var(--s4) 0}
.con-l h4,.con-r h4{margin:0 var(--s4) var(--s3);font:500 var(--t1)/1 "IBM Plex Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.th{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:var(--s3) var(--s4);border-top:1px solid var(--rule-soft);
  font-size:var(--t2);color:var(--ink-2);border-left:2px solid transparent}
.th b{font:500 var(--t2)/1 "IBM Plex Mono",monospace;color:var(--ink)}
.th.is-on{border-left-color:var(--voice);background:var(--voice-wash);color:var(--ink)}
.con-r{padding:var(--s4) 0}
.con-r .claim{margin:0 var(--s4);font:300 var(--t5)/1.3 "Newsreader",serif;max-width:30ch}
.con-count{margin:var(--s3) var(--s4) 0;font:400 var(--t1)/1.6 "IBM Plex Mono",monospace;
  letter-spacing:.06em;color:var(--ink-3)}
.con-r h4{margin-top:var(--s6)}
.vb{padding:var(--s4);border-top:1px solid var(--rule-soft)}
.vb-hd{display:flex;justify-content:space-between;gap:var(--s3);
  font:500 var(--t1)/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink-3)}
.vb-hd b{color:var(--voice);font-weight:500}
.vb-wave{margin:var(--s3) 0}
.vb p{font-size:var(--t2);line-height:1.6;color:var(--ink);max-width:72ch}
.con-more{padding:var(--s3) var(--s4);border-top:1px solid var(--rule-soft);font-size:var(--t2)}
.con-more a{color:var(--voice)}
.con-note{margin-top:var(--s5);font-size:var(--t2);color:var(--ink-3);max-width:var(--measure)}
@media(max-width:900px){
  .con-scr{grid-template-columns:1fr}
  .con-l{border-right:0;border-bottom:1px solid var(--rule-soft)}
}


/* ── G layout, live copy: rules for sections G had cut or reshaped ── */
.depth{padding:var(--s9) 0;border-top:1px solid var(--rule)}
.depth h2{font-size:var(--t7);max-width:18ch}
.depth h2 em{font-style:italic}                         /* device: italic, used once */
.depth .mono{margin-top:var(--s5)}
/* 8px below, which is what the <hr> above the statement gives it. */
.fork-lede{margin:calc(var(--s5) * -1) 0 var(--s2);font-size:var(--t3);color:var(--ink-2)}
.fork-h em{font-style:normal;font-weight:500}           /* device: weight contrast */
.fork-tag{margin:0;font-size:var(--t2);font-weight:500;color:var(--ink)}
.loop h3{font:400 var(--t4)/1.3 "Newsreader",serif;margin-top:var(--s3);max-width:22ch}
.loop .pt{margin-top:var(--s3);padding-left:var(--s5);position:relative}
.loop .pt::before{content:"";position:absolute;left:0;top:.7em;width:var(--s3);height:1px;background:var(--voice)}
.loop a{display:inline-block;margin-top:var(--s4);font-size:var(--t2)}
.founder{padding:var(--s9) 0;border-top:1px solid var(--rule)}
.founder-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s8);align-items:end}
.founder h2{font-size:var(--t7);max-width:14ch}
.founder h2 em{font-style:normal;font-variant:small-caps;letter-spacing:.04em}  /* device: small caps */
.founder .mono{margin-bottom:var(--s4)}
@media(max-width:820px){.founder-grid{grid-template-columns:1fr;gap:var(--s6);align-items:start}}
.qs-grid p strong{font-weight:500;color:var(--ink)}
.close h2 em{font-style:normal;font-weight:500}          /* device: weight contrast */
.fcopy{font-size:var(--t2)}

/* ── assembled page: rules the two sources did not need ── */
.rail-sec .rail-h{margin-bottom:var(--s7)}
/* the console hands off to the finding it contains */
.flow{background:var(--paper);padding:var(--s7) 0 0}
.flow .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.flow-line{width:1px;height:var(--s6);background:var(--rule)}
.flow-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid var(--ink-3);margin-top:calc(var(--s1) * -1)}
/* the trust row now spans the footer's full width, so its first and last items
   sit on the same edges as the wordmark and the links in the row beneath it.
   It was left-clustered with fixed gaps, which read as unaligned. */
.trust{justify-content:space-between;gap:var(--s5) var(--s6)}
.trust span:last-child{text-align:right}
/* .fgrid a{margin-left} was written for the link list but also caught the
   wordmark, indenting it 24px off the container edge. */
.fgrid .mark{margin-left:0}
@media(max-width:820px){
  .trust{flex-direction:column;gap:var(--s3)}
  .trust span:last-child{text-align:left}
}
/* numeral, screen, heading, copy */
.rail{grid-template-rows:auto auto auto auto}
.rail>li{grid-row:span 4}
.rail .n{display:block;margin-bottom:var(--s3)}
/* the hero device sits inside a column wider than itself, so it has room on
   both sides instead of being pinned to the container's right edge.
   Carries .hero .wrap> only to match the specificity of the justify-self
   it is overriding, above. When that rule was a bare .hero-dev this was
   too, and source order decided. Scoping that one without scoping this
   one silently pins the homepage device to the right edge: measured, the
   right edge moves from 1253 to 1310 at 1440, which is the arrangement
   the first sentence of this comment exists to prevent. */
@media(min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,430px)}
  .hero .wrap>.hero-dev{justify-self:center}
}


/* ── legal + utility pages ──────────────────────────────────────────
   One template serving /privacy, /terms and /responsible-ai, plus the
   404. The copy on all four is unchanged from the old design; only its
   setting moves onto this system's type scale, so nothing here is a
   content decision.

   Teal is not used anywhere below. It has one referent in this system,
   the human voice, and no legal page carries one, so section numbers
   and links are set in ink rather than borrowing the accent. */
.legal-hero{padding:var(--s9) 0 var(--s7);border-bottom:1px solid var(--rule)}
.legal-hero h1{font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:var(--t7);line-height:1.14;max-width:22ch}
.legal-updated{margin-top:var(--s5);
  font:500 var(--t1)/1.6 "IBM Plex Mono",monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);font-style:normal}

.legal{max-width:68ch;padding:var(--s8) 0 var(--s10)}
/* each clause gets its own ground: a hairline above the heading rather
   than a heavier weight inside it, so the page reads as a document */
.legal h2{font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:var(--t5);line-height:1.25;letter-spacing:-.012em;
  margin:var(--s8) 0 var(--s4);padding-top:var(--s5);
  border-top:1px solid var(--rule-soft)}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h2 .secnum{display:inline-block;min-width:2.4ch;margin-right:var(--s3);
  font:500 var(--t1)/1 "IBM Plex Mono",monospace;letter-spacing:.09em;
  color:var(--ink-2);vertical-align:.3em}
/* The legal template's headings needed balance too, and now get it from the
   h1,h2,h3 rule above rather than from a rule of their own: eleven stranded
   last words across privacy, terms and responsible-ai, all between 320 and
   460px, of which nine clear. Safe here because no legal page carries a
   hand-placed <br> for balance to fight (grep -c '<br' is 0 on all three);
   that is the condition that keeps it off .read-h.

   The two that do not clear are deliberately left alone: "Terms of Service"
   at 320-325, and "Responsible AI and Transparency Policy" at 320-395, which
   does include the 390px phone. Binding the last two words with &nbsp; is the
   usual next move and is wrong here, measured rather than assumed: it
   overflows the column by 75px at 320, 35px at 360 and 5px at 390, because
   the bound pair is wider than the measure. An overflowing heading is a worse
   defect than a stranded word, and the only remaining fix is shorter copy on
   a versioned policy title. Leave it. */
.legal h3{font:600 var(--t3)/1.4 "IBM Plex Sans",sans-serif;
  letter-spacing:0;margin:var(--s6) 0 var(--s3)}
.legal p,.legal ul,.legal ol{margin:0 0 var(--s4);color:var(--ink-2);
  font-size:var(--t3);line-height:1.7}
.legal ul,.legal ol{padding-left:var(--s5)}
.legal li{margin-bottom:var(--s2)}
.legal li::marker{color:var(--ink-3)}
.legal a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--ink)}
.legal strong{color:var(--ink);font-weight:600}
@media(max-width:640px){
  .legal-hero{padding:var(--s7) 0 var(--s6)}
  .legal{padding:var(--s7) 0 var(--s8)}
  .legal h2{margin-top:var(--s7)}
}

/* ── 404 */
.nf{display:grid;place-items:center;min-height:100dvh;padding:var(--s9) var(--s5);text-align:center}
.nf h1{font-size:var(--t7);margin:var(--s4) 0 var(--s4)}
.nf p{color:var(--ink-2);font-size:var(--t4);max-width:38ch;margin-inline:auto}
.nf-actions{display:flex;gap:var(--s5);justify-content:center;align-items:center;
  flex-wrap:wrap;margin-top:var(--s7)}
.nf-alt{font-size:var(--t2);color:var(--ink-2);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:3px}
.nf-alt:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* the contact block that closes each policy. The old design marked it with
   a teal rule and a drop shadow; both are out of this system, so it is set
   on the secondary ground with a hairline instead. */
.legal-contact{margin-top:var(--s7);padding:var(--s5) var(--s6);
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:2px}
.legal-contact h3{margin-top:0}
.legal-contact p{margin-bottom:0}

/* ── "Who we serve" dropdown ────────────────────────────────────────
   The homepage points its nav at #where-next, an in-page anchor that
   resolves nowhere on any other page. This is the live site's dropdown,
   redrawn in this system's tokens: same markup, class names and aria
   handling, so /script.js drives it unchanged, including Escape.

   It lists only the audiences the site links to. /health-systems,
   /pharma and /patient-foundations stay published and reachable by
   direct link, and are deliberately absent from every nav and grid.

   The chevron is geometry, not an icon: two borders on a rotated box,
   the same drawing language as the hairline rules. */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-trigger{display:flex;align-items:center;gap:var(--s2);
  border:0;padding:0;background:none;cursor:pointer;
  font:400 var(--t2)/1.4 "IBM Plex Sans",sans-serif;color:var(--ink-2)}
.nav-trigger:hover{color:var(--ink)}
.chevron{width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s}
@media(prefers-reduced-motion:reduce){.chevron{transition:none}}
.nav-dropdown.open .chevron{transform:translateY(1px) rotate(225deg)}

.dropdown-panel{position:absolute;top:calc(100% + var(--s4));left:50%;
  transform:translate(-50%,-4px);width:300px;
  display:grid;padding:var(--s3) var(--s4);
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  box-shadow:0 12px 32px rgba(20,27,38,.10);
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s}
@media(prefers-reduced-motion:reduce){.dropdown-panel{transition:none}}
.nav-dropdown.open .dropdown-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dropdown-panel a{padding:var(--s3) 0;font-size:var(--t2);text-decoration:none;
  color:var(--ink-2);border-bottom:1px solid var(--rule-soft)}
.dropdown-panel a:last-child{border-bottom:0}
.dropdown-panel a:hover{color:var(--ink)}
.dropdown-panel a[aria-current="page"]{color:var(--ink);font-weight:500}

@media(max-width:820px){
  /* inside the drawer the panel is a plain indented list, not an overlay */
  .nav-dropdown{display:block}
  .nav-trigger{width:100%;justify-content:space-between;
    padding:var(--s4) 0;min-height:44px;border-bottom:1px solid var(--rule-soft)}
  .dropdown-panel{position:static;width:auto;transform:none;
    display:none;opacity:1;visibility:hidden;
    padding:0 0 var(--s3) var(--s5);
    background:none;border:0;border-radius:0;box-shadow:none}
  .nav-dropdown.open .dropdown-panel{display:grid;visibility:visible;transform:none}
  .dropdown-panel a{min-height:44px;display:flex;align-items:center;border-bottom:0}
}

/* ── /book-a-demo ───────────────────────────────────────────────────
   The form's class names are load-bearing: /script.js finds .cta-form,
   .cta-input, .cta-message and toggles .loading on the button and
   .input-error on a field. None of them are renamed here, only redrawn.

   The three assurances above the form were an icon each in the old
   design. This direction draws no icons, so they are a mono row. */
.tte{padding:var(--s9) 0 var(--s10);border-bottom:1px solid var(--rule)}
.tte-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s9)}
.tte-left h1{font-size:var(--t7);max-width:15ch;margin-top:var(--s4)}
.tte-left h1 em{font-style:normal;font-weight:500}   /* device: weight contrast */
.tte-sub{margin-top:var(--s5);color:var(--ink-2);font-size:var(--t4);max-width:46ch}
.tte-sub + .tte-sub{font-size:var(--t3)}

.tte-card{background:var(--paper);border:1px solid var(--rule);
  border-radius:2px;padding:var(--s7) var(--s6)}
.tte-card h2{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t5)}
.walk-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--rule-soft)}
.walk-meta span{font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}

.cta-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s6)}
.fld{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.fld label{font:600 var(--t2)/1.3 "IBM Plex Sans",sans-serif;color:var(--ink)}
.fld label .opt{font-weight:400;color:var(--ink-2)}
.fld-wide,.cta-form .btn{grid-column:1 / -1}
.cta-input{width:100%;min-height:46px;padding:var(--s3) var(--s4);
  border:1px solid var(--rule);border-radius:2px;background:var(--paper);
  color:var(--ink);font:400 var(--t3)/1.5 "IBM Plex Sans",sans-serif}
textarea.cta-input{min-height:88px;resize:vertical}
.cta-input:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.cta-input.input-error{border-color:var(--warm);border-width:2px}
.cta-form .btn{justify-self:start;border:0;cursor:pointer;
  font:500 var(--t3)/1.4 "IBM Plex Sans",sans-serif;padding:var(--s4) var(--s6)}
.cta-form .btn-loading,.cta-form .loading .btn-text{display:none}
.cta-form .loading .btn-loading{display:inline}
.cta-fine{margin-top:var(--s4);font-size:var(--t2);color:var(--ink-2)}
.cta-message{display:none;margin-top:var(--s4);font-size:var(--t2)}
.cta-message.visible{display:block}
.cta-message.success{color:var(--ink);font-weight:500}  /* not teal: that is the voice */
.cta-message.error{color:var(--warm)}

@media(max-width:900px){
  .tte-grid{grid-template-columns:1fr;gap:var(--s7)}
  .tte-left h1{max-width:20ch}
}
@media(max-width:560px){
  .tte{padding:var(--s7) 0 var(--s8)}
  .cta-form{grid-template-columns:1fr}
  .tte-card{padding:var(--s6) var(--s5)}
}

/* ── /team: the letter ──────────────────────────────────────────────
   The copy is approved and unchanged. The marking is not the old
   design's: the highlighter came off every run but three.

   Emphasis through the letter is weight alone. The amber is kept for
   the three mission clauses at the close, and nowhere else on the site.
   Spending it once, on the sentence the letter is written toward, is
   what makes it read as a mark rather than as decoration. */
.letter-stage{padding:var(--s9) 0;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.letter-sheet{max-width:980px;margin-inline:auto;background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;
  padding:clamp(40px,6vw,68px) clamp(24px,7vw,88px) clamp(36px,5vw,56px)}
/* no drop shadow and no gradient rule across the top: neither is in this system */
.letterhead{padding-bottom:var(--s5);margin-bottom:var(--s7);border-bottom:1px solid var(--rule)}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:0 var(--s7)}

.letter-subject{font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:var(--t6);line-height:1.14;letter-spacing:-.018em;margin:var(--s3) 0 var(--s6)}
.letter-subject i{font-style:normal;font-weight:500}  /* device: weight, as every other statement on the site */
.letter-body p{margin-bottom:var(--s5);font-size:var(--t4);line-height:1.8;
  color:var(--ink-2);text-wrap:pretty}
.letter-body b{font-weight:600;color:var(--ink)}
.letter-body u{text-decoration:none}   /* the underlines were part of the old marking */

/* the one amber on the site. #f5e08c at half strength over paper reads
   5.49:1 against --ink-2 and 14.9:1 against the --ink of the bold runs. */
.hl{background:rgba(245,224,140,.5);border-radius:4px;padding:.06em .2em;margin:0 -.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.letter-signoff{margin-top:var(--s7)}
.warmly{font-size:var(--t4);color:var(--ink-2);text-wrap:pretty}
.letter-signature{display:block;width:190px;height:auto;margin:var(--s2) 0 var(--s2)}
/* the file is RGBA and already carries its own transparency, so it needs no blend mode */
.letter-signed{font:600 var(--t2)/1.5 "IBM Plex Sans",sans-serif;color:var(--ink)}
.letter-title{font:500 var(--t1)/1.6 "IBM Plex Mono",monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);margin-top:var(--s1)}

.bio-rail{border-left:1px solid var(--rule);padding-left:var(--s6);align-self:start}
.rail-label{font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s5)}
.bio-card + .bio-card{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule-soft)}
.bio-card b{display:block;font:400 var(--t4)/1.3 "Newsreader",Georgia,serif;
  letter-spacing:-.018em;color:var(--ink)}
.bio-card i{display:block;margin:var(--s1) 0 var(--s2);font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;
  font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.bio-card p{font-size:var(--t2);line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.cta-mini{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule-soft)}
.cta-line{font:400 var(--t5)/1.2 "Newsreader",Georgia,serif;letter-spacing:-.018em;color:var(--ink)}
.cta-line i{font-style:normal;font-weight:500}

@media(max-width:820px){
  .letter-stage{padding:var(--s7) 0}
  .sheet-grid{grid-template-columns:1fr}
  .bio-rail{border-left:0;padding-left:0;margin-top:var(--s6);
    padding-top:var(--s5);border-top:1px solid var(--rule)}
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIENCE PAGE SHELL
   Shared by /health-plans, /public-health, /academic-researchers,
   /patient-foundations and /partners. Drawn once here so the five
   pages differ in argument and evidence, never in drawing.

   Reuse first. These already exist above and are not re-invented:
     .sec-label   eyebrow + hairline, above every section statement
     .read/.ecard the dark band and the white finding card on it
     .fork/.loop  two ways in, closed by a tinted block
     .qs/.qs-grid the questions grid (three columns, hairline tops)
     .close       the dark closing band and its CTA
     .scr/.phone  a device screen, for a hero's right-hand column
   The audience pages should add nothing that one of those can do.

   .tte-grid is NOT renamed into this shell. It is /book-a-demo's form
   layout, sized around a card with a fixed-width form in it, and that
   page is converted and signed off. Renaming it would edit a finished
   page to save one class here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the hero. Text alone, or text with a specimen beside it. */
.sub-hero{padding:var(--s9) 0 var(--s8)}
/* The clamp is the same 6vw ramp the homepage .hero h1 rides on --t8.
   Flat --t7 rendered the audience h1 at 46px on a 390px screen while
   the homepage hero clamped itself down to 40px, so the subordinate
   heading came out larger than the one it sits under, and the third
   line it forced stranded "experience." on its own. Measured, not
   assumed: 46px in a 366px box gave "Know what / members actually /
   experience."
   No text-wrap:balance here. The h1,h2,h3 element rule near the top of
   this file carries it, and every audience sub-hero heading is an <h1>,
   so a copy of it on this rule would be dead weight that reads like a
   separate decision. Re-measured with this rule's own copy removed:
   /health-plans is clean 320-1600 in 5px steps, over every heading in
   <main> rather than the statement classes alone. */
.sub-hero h1{font-size:clamp(36px,6vw,var(--t7));max-width:16ch}
.sub-hero h1 em{font-style:normal;font-weight:500}   /* device: weight contrast */
.sub-hero .lead{margin:var(--s6) 0 0;max-width:54ch;font-size:var(--t4);
  line-height:1.6;color:var(--ink-2)}
/* .hero sets this and .sub-hero did not, so the eyebrow sat straight on
   the h1. Same 24px as the homepage. */
.sub-hero .mono{margin-bottom:var(--s5)}
.sub-hero .act{margin-top:var(--s7);display:flex;gap:var(--s5);
  align-items:center;flex-wrap:wrap}
/* the reassurance beside the button is a sentence, not a label, and it is
   in a flex row, so it takes none of that margin */
.sub-hero .act .mono{margin:0;text-transform:none;letter-spacing:.02em}
/* .sub-hero .mono above is the eyebrow's rule, but it catches every mono
   in the hero, so each of the others has to say what it wants at the same
   specificity -- a bare .spec-cap (0,1,0) loses to .sub-hero .mono (0,2,0).
   The caption under a specimen card is the second of those. Measured on a
   third mono injected into this hero: it inherits 24px where a caption
   wants 12px, and this brings it back. No page defines .spec-cap yet;
   /partners is the first, and .sub-hero-grid exists for exactly that
   column, so the caption is the normal case for the layout. */
.sub-hero .spec-cap{margin-bottom:var(--s3)}
/* optional: a specimen card to the right. Same breakpoint and the same
   column sizing as the homepage hero, so the two heroes agree. */
.sub-hero-grid{display:grid;gap:var(--s8)}
@media(min-width:900px){
  .sub-hero-grid{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,430px);
    align-items:center}
  /* narrower than .sub-hero's own 16ch on purpose, so the heading does
     not crowd the specimen card in the second column. Raising it to
     16ch does not add 2ch, it deletes this override. An emphasised run
     is weight 500 against the h1's 300, so it measures wider than the
     ch unit this cap is sized in; emphasise a word rather than a
     phrase. Raised by academia and declined on one occurrence. */
  .sub-hero-grid h1{max-width:14ch}
  /* a specimen narrower than its column sits at the wrap's right edge,
     the way the homepage device does, rather than floating mid-column */
  .sub-hero-grid>.hero-dev,.sub-hero-grid>.hero-card{justify-self:end}
}
/* The quiet card beside the headline. Ashwin chose this over an empty
   half and over the full phone device, and left open whether the five
   heroes should be one template or diverge per page.

   So this rule is a FRAME and nothing else: ground, hairline, radius,
   padding, and the width it may occupy. It states nothing about what
   goes inside. A page fills it with its own strongest material and adds
   its own classes in there; two pages diverge by holding different
   things, not by forking this rule or shadowing it page-local. That is
   the cheapest kind of divergence to maintain and the only kind that
   keeps the five heroes recognisably one family.

   It deliberately matches .board rather than .ecard: white on a hairline
   at 2px, because a hero card and the board are both objects the reader
   is meant to read as data. .ecard is the white-on-dark treatment inside
   the .read band and does not belong out here.

   Named .hero-card, parallel to .hero-dev, which is the other thing that
   can occupy this column. NOT .spec: index.html already owns .specimen,
   .spec-grid, .spec-word, .spec-def, .spec-phon, .spec-roots and
   .spec-note, all meaning the Sensagram word specimen. A .spec meaning
   "hero card" beside seven spec-* meaning something else is a cascade
   collision waiting to happen, and this file has produced several.
   (.spec-cap, the caption, keeps its name because /partners already
   writes it and it is scoped under .sub-hero.)

   The caution worth keeping: a card whose contents are generic is worse
   than no card, because five near-identical cards read as a template
   being filled in. If a page has nothing of its own to put here, it
   should use .sub-hero without the grid. */
.hero-card{background:#fff;border:1px solid var(--rule);border-radius:2px;
  padding:var(--s6);width:100%;max-width:430px}
@media(max-width:640px){.hero-card{padding:var(--s5) var(--s4)}}

/* ── the hero figure: the page's own subject, standing above the headline.

   Shape B, which Ashwin picked on 2026-09-21, opens /health-plans on the
   CAHPS composite itself rather than on a claim about composites, so the
   number is the first object on the page and the headline is what the
   number means.

   Deliberately NOT .hero-card in .sub-hero-grid. That card is the other
   approved way to fill this hero and stays the right frame for a page
   whose strongest material sits BESIDE its headline. Here the number is
   the headline's subject, so it leads the reading order, which is what
   the approved mockup showed. Both remain available and a page picks one;
   neither forks the other.

   148px is outside the eight-step scale on purpose and is the second
   sanctioned exception to it, after --t8. The scale governs type that
   sets prose and headings; this is a single display numeral per page,
   sized to the mockup, and the clamp keeps it inside the 320px viewport
   (88px there) where a flat 148 would not fit. Do not add a third
   exception without the same kind of reason. */
.hero-fig{display:flex;align-items:flex-end;gap:var(--s7);flex-wrap:wrap;
  margin-bottom:var(--s7)}
.hf-num{font:200 clamp(88px,15vw,148px)/.86 "Newsreader",Georgia,serif;
  letter-spacing:-.03em}
/* the padding only exists to sit the name's baseline off the numeral's
   foot while the two are side by side. Once .hero-fig wraps to a stack it
   is a stray gap under the caption, so it is scoped to the row case. */
@media(min-width:640px){.hf-t{padding-bottom:var(--s4)}}
.hf-name{font-size:var(--t4);line-height:1.4}
/* 42ch, not 34: at 34 the composite's one-line description broke after
   "Nothing in it" and left "says why." alone on a second line at desktop,
   which reads as a stranded phrase directly under the page's largest
   object. Measured at 1280. */
.hf-sub{margin-top:var(--s2);font-size:var(--t3);color:var(--ink-3);max-width:42ch}
/* .sub-hero .mono is the eyebrow's rule and catches every mono inside the
   hero, so a caption has to restate its margin at the same specificity or
   inherit 24px where it wants 12. Third occurrence of the trap the
   .spec-cap rule above documents; if a fourth appears, the eyebrow should
   take a class of its own instead. */
.sub-hero .hf-cap,.sub-hero .reasons-cap{margin:var(--s3) 0 0;
  text-transform:none;letter-spacing:.02em}
/* The reasons the composite averages, written as short paraphrases and
   NOT as quotation marks. They are illustrative, and a polished sentence
   inside quote marks reads as something a real member really said; a
   moderator at a large CRO made exactly that point about demo verbatims.
   The .reasons-cap bound to this block says it is illustrative, and it is
   a sibling rather than a page-level note because a label only covers the
   subtree it sits in. */
.hero-reasons{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-reasons span{padding:var(--s3) var(--s4);background:var(--voice-wash);
  border-radius:2px;font-size:var(--t2);line-height:1.4}

/* ── a section band. --alt is the tinted ground, for alternating. */
.band{padding:var(--s9) 0;border-top:1px solid var(--rule)}
.band--alt{background:var(--paper-2)}
/* the 26ch cap strands a short last word by construction, not by bad
   luck, so every audience page meets it eventually. The cap is the part
   that has to match across the five pages; balance moves where lines
   break, never how wide they are.
   No text-wrap:balance here, for the same reason .stmt and the component
   list above no longer carry one: every .band-h in the tree is an <h2>,
   so h1,h2,h3 already balances it and a second declaration would only
   restate the inherited value. .fork-h and .qs-h are <h2> in all five of
   their uses too, which is why neither has one either. Anything that ever
   needs to opt OUT does so the way .read-h does, with text-wrap:wrap. */
.band-h{font-size:var(--t6);font-weight:300;max-width:26ch;
  margin-bottom:var(--s7)}
.band-h em{font-style:normal;font-weight:500}        /* device: weight contrast */
/* a lede sits between the statement and the section's contents, so the
   statement's own bottom margin closes up */
.band-h + .band-lede{margin-top:calc(var(--s7) * -1 + var(--s4))}
.band-lede{font-size:var(--t3);color:var(--ink-2);max-width:var(--measure);
  margin-bottom:var(--s7)}
.band-note{margin-top:var(--s5);font-size:var(--t2);color:var(--ink-2);
  max-width:var(--measure)}

/* ── the board ──────────────────────────────────────────────────────
   An indicator the reader's team already watches, and underneath it
   the causes people named, each with the team that owns it. That is
   the shape of every audience page's argument: a number they have,
   and the why they do not. A plan reads a CAHPS composite here; a
   health department reads a CHNA priority; a researcher reads a
   construct. Only the labels change.

   Teal keys the rows that came out of a person's voice, which is its
   one referent on this system. The trend gets no colour: it is a fact
   the reader already has, not something we heard. */
.board{background:#fff;border:1px solid var(--rule);border-radius:2px}
/* the label sits inside the object it covers. A section eyebrow two
   levels up reads as belonging to the headline, not to the data. */
.board-flag{padding:var(--s3) var(--s6);background:var(--paper);
  border-bottom:1px solid var(--rule-soft)}
.board-head{padding:var(--s6) var(--s6) var(--s5)}
.board-name{font:300 var(--t6)/1.1 "Newsreader",Georgia,serif;margin-top:var(--s3)}
.board-trend{display:inline-block;margin-top:var(--s5);padding:5px 12px;
  border:1px solid var(--rule);border-radius:100px}
.board-fold{display:flex;justify-content:space-between;gap:var(--s2) var(--s5);
  flex-wrap:wrap;padding:var(--s3) var(--s6);background:var(--paper);
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
/* .f1 is in the markup beside .f2 and deliberately has no rule: it is the
   first fold line and takes .mono's own colour, so a declaration here would
   restate the inherited value. The pair is named so the markup says which
   line is which; do not delete .f1 from the HTML as an unused class. */
.board-fold .f2{color:var(--ink-2)}
.cause{padding:var(--s5) var(--s6);border-bottom:1px solid var(--rule-soft)}
.cause .cq{display:block;padding-left:var(--s4);border-left:2px solid var(--voice);
  font:400 var(--t4)/1.4 "Newsreader",Georgia,serif;color:var(--ink);max-width:56ch}
.cause-meta{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s4);padding-left:var(--s4)}
.cause-own{color:var(--ink);white-space:nowrap}
.cause-own i{font-style:normal;color:var(--ink-2)}
.board-foot{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:var(--s2) var(--s5);padding:var(--s4) var(--s6);
  font-size:var(--t2);color:var(--ink-2)}
.board-foot a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:3px}
.board-foot a:hover{text-decoration-color:var(--ink)}

/* ── what comes back ────────────────────────────────────────────────
   The old design drew a green check beside each row. This direction
   draws no icons, so the rows are numbered in mono and ruled apart. */
.deliver-list{margin-top:var(--s7);border-top:1px solid var(--rule)}
.deliver-row{display:grid;grid-template-columns:var(--s7) minmax(0,1fr) minmax(0,1.5fr);
  gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--rule-soft)}
.deliver-row .dn{color:var(--ink-2)}
.deliver-row h3{font:400 var(--t4)/1.3 "Newsreader",Georgia,serif}
.deliver-row p{font-size:var(--t2);color:var(--ink-2);line-height:1.6}

@media(max-width:820px){
  .sub-hero{padding:var(--s8) 0 var(--s7)}
  .sub-hero h1{max-width:none}
  .band{padding:var(--s8) 0}
  .board-flag,.board-head,.board-fold,.cause,.board-foot{padding-left:var(--s5);padding-right:var(--s5)}
  .deliver-row{grid-template-columns:1fr;gap:var(--s3)}
}
/* the sources under a band. Underlined in ink: links are not teal here
   either, and a footnote that reads as a link is the point. */
.band-note a{color:var(--ink-2);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:3px}
.band-note a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* ── adopted into the shell from /public-health ──────────────────────
   Built page-local on that branch and lifted here so all five audience
   pages draw them the same way. Its fifth block, .guard, is not taken:
   .band--alt above already puts any section on the tinted ground, so a
   named one-off for "the questions grid on --paper-2" is a class the
   shell does not need.

   .figs / .figs-h / .figs-lede are not taken either, for the same
   reason: .band, .band-h and .band-lede already are that section. Only
   the grid inside it comes across.
   ───────────────────────────────────────────────────────────────── */

/* the fork grid at three columns. Subgrid, the device .rail uses, so the
   foot of each column lands on one line whatever the copy length.
   The list sits in the 1fr row and stretches to fill it, so a column with
   fewer items spreads visibly against its neighbours. Give the three
   columns the same number of items; that is a copy constraint, not a bug
   to debug later. */
.fork-grid.is-3{grid-template-columns:repeat(3,1fr);row-gap:0;
  grid-template-rows:auto auto auto 1fr auto}
.fork-grid.is-3>div{display:grid;grid-row:1/-1;grid-template-rows:subgrid}
.fork-grid.is-3>div+div{padding-left:var(--s6)}
/* the other two columns give 32px to the rule between them, so the first
   gives the same on its right and all three measure alike */
.fork-grid.is-3>div:first-child{padding-right:var(--s6)}
@media(max-width:980px){
  .fork-grid.is-3{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s6)}
  .fork-grid.is-3>div{display:block;grid-row:auto}
  .fork-grid.is-3>div+div{border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:var(--s6)}
}

/* filed as evidence: the tags a block earns in the reader's own world.
   Outlined graphite, not teal: these are not the voice. */
.filed{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule-soft)}
.filed-lab{margin-bottom:var(--s3);color:var(--warm)}
.filed-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.fchip{font:400 var(--t1)/1.4 "IBM Plex Mono",monospace;letter-spacing:.04em;
  color:var(--ink-2);border:1px solid var(--rule);border-radius:100px;
  padding:5px 10px;white-space:nowrap}
/* A chip names one thing, so it holds together on one line. But a row's
   flex-wrap cannot help a chip that is itself wider than the row: nowrap
   overflows where a wrap would only have looked untidy. /public-health
   hit it, where the PHAB domain "Community partnership and engagement"
   measured 298px inside a 264px row and scrolled the page by 6px at 320.
   The chip text is a domain name, so shortening it would be a factual
   change rather than a styling one.
   Below 400px the pill gives up the one-line promise instead of the page
   giving up its left edge. The radius comes down with it because a
   100px radius on a two-line pill bows its sides. Clean from 320 up. */
@media(max-width:399px){
  .fchip{white-space:normal;border-radius:10px}
}
.ecard .filed{border-top-color:var(--rule)}

/* figures: three numbers, each carrying its own source. Subgrid again,
   so the source lines align however long the labels run. */
.fig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);
  border-top:1px solid var(--ink);grid-template-rows:auto 1fr auto;row-gap:0}
.fig-grid>div{padding-top:var(--s5);display:grid;grid-row:1/-1;grid-template-rows:subgrid}
.fig-grid>div:first-child{padding-right:var(--s8)}
.fig-grid>div+div{border-left:1px solid var(--rule);padding-left:var(--s8)}
.fig-n{font:300 var(--t7)/1 "Newsreader",Georgia,serif;letter-spacing:-.02em}
.fig-t{margin-top:var(--s4);font-size:var(--t2);color:var(--ink-2);line-height:1.6}
.fig-src{padding-top:var(--s4);font:400 var(--t1)/1.5 "IBM Plex Mono",monospace;
  letter-spacing:.04em;color:var(--ink-3)}
.fig-src a{color:var(--ink-3)}
.fig-src a:hover{color:var(--ink)}
@media(max-width:900px){
  .fig-grid{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s6)}
  .fig-grid>div{display:block;grid-row:auto}
  .fig-grid>div+div{border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:var(--s6)}
}

/* one borrowed sentence, at reading scale. The attribution sits under the
   quote rather than beside it: set in a second column it floated against
   nothing, halfway down an empty half of the page. */
/* <blockquote> carries a 40px inline margin by default, which inset the
   rule from the section's own edge. */
.pull{margin:var(--s8) 0 0;padding-top:var(--s7);border-top:1px solid var(--rule)}
.pull-q{font:300 var(--t6)/1.3 "Newsreader",Georgia,serif;letter-spacing:-.018em;
  max-width:30ch;margin:0}
.pull-q em{font-style:normal;font-weight:500}
.pull-cite{display:block;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--rule);max-width:30ch;
  font:500 var(--t1)/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-style:normal}

/* Ported from the page-conversion branch with the legal pages it belongs to:
   the shell never carried it because the shell never shipped those pages.
   Below 400px the legal h1 steps down a size so it does not strand a word. */
@media(max-width:400px){
  .legal-hero h1{font-size:var(--t6)}
}