/* ============================================================================
   PERSON HEALTH · MyBloodQ preview site
   Shared stylesheet for the clinician page (Lane 1) and the consumer
   "Learn more & stay updated" page (Lane 3).

   Built 2 Oct 2026 to bring both pages onto the design system established by
   the 25 Sep sales sheets and recorded in PersonHealth_Design_Rules_by_Audience
   v0.1. What changed from the previous site CSS:

     1. Fraunces is gone. Type is not a lane variable: Sora SemiBold/Bold for
        display, DM Sans Light for body, every audience. Weight, scale and
        measure change per lane; the faces never do.
     2. The palette is the brand palette. Plum #28104E / #2A1240 is ink, not
        "a purple". MyBloodQ red #8C0A22 is the product voice. One job per
        color.
     3. The two pages no longer share one look. Lane 1 is a cool near-white
        field divided by hairline rules with white panels and rationed accent.
        Lane 3 is a warm field divided into bands of color, larger type on a
        narrower measure.

   Single light theme on purpose. These pages get printed and screenshotted,
   and brand collateral has to render the same for everyone.
   ============================================================================ */

:root{
  color-scheme: light;

  /* --- brand palette, verbatim from the mini brand guide --- */
  --plum:#28104E;        /* the darkest. ink, not color */
  --violet:#6237A0;      /* Person Health. the corporate accent */
  --lav:#D7CFE6;
  --sky:#CCE7FF;         /* the only non-purple in the kit */
  --sky-ink:#1B4A73;     /* readable cousin of the pale blue. data */
  --red:#8C0A22;         /* MyBloodQ. the product voice */
  --red-2:#B02838;

  /* --- pending / unresolved --- */
  --flag:#8A5A00;
  --flag-field:#FDF7E8;
  --flag-rule:#E8D6A8;

  /* --- draft marker --- */
  --mark:#33343C;

  /* --- type --- */
  --f-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --maxw:960px;
  --navh:72px;
}

/* ============================================================================
   LANE GROUNDS
   The lane sets the ground, the measure, the body size and how much accent
   gets spent. Everything below reads these.
   ============================================================================ */

/* Lane 1 · clinicians & health systems.
   Near-white cool field, white panels, hairline rules. Red for structure,
   blue for data, violet once. Warmth here reads as marketing and costs
   credibility, so there is none. */
body.lane-clin{
  --ink:#28104E;
  --ink-2:#4A4458;
  --ink-3:#645D72;          /* darkened from the sheet's #6B6577 for AA on #FAFBFC */
  --ground:#FAFBFC;
  --paper:#FFFFFF;
  --panel:#F4F6F8;
  --rule:#E2E5EA;
  --accent:var(--red);
  --data:var(--sky-ink);
  --data-field:#F3F8FD;
  --data-rule:#DBE9F6;
  --data-track:#DCEAF7;
  --measure:100%;              /* fills the column, see note below */
  --fs:16px;
  --lh:1.62;
  --radius:4px;
  --shadow:0 1px 2px rgba(20,25,35,.04), 0 10px 30px -20px rgba(20,25,35,.18);
}

/* Lane 3 · consumer & public.
   Warm ground, bands of color instead of rules, larger type on a narrower
   measure. Blush is a tint of the product red, so the lane needs no new hue. */
body.lane-cons{
  --ink:#2A1240;
  --ink-2:#564764;
  --ink-3:#6E6480;          /* darkened from the sheet's #7C7288 for AA on #F7F2F7 */
  --ground:#F7F2F7;
  --paper:#FFFFFF;
  --panel:#FFFFFF;
  --blush:#FBEAE9;
  --blush-2:#F6DAD8;
  --violet-field:#F1ECF8;
  --rule:rgba(42,18,64,.13);
  --accent:var(--red);
  --data:var(--red);
  --measure:100%;              /* fills the column, see note below */
  --fs:17px;
  --lh:1.64;
  --radius:16px;
  --shadow:0 1px 2px rgba(42,18,64,.05), 0 18px 40px -28px rgba(42,18,64,.35);
}

/* ----------------------------------------------------------------------------
   One note on --measure, because it caused a real bug.

   It used to be written in `ch`, which resolves against the element's OWN
   font-size — so a 24px lede capped at "62ch" got a box about 1.4x wider than a
   17px paragraph capped at the same "62ch", and the lede was the only thing
   running the full width while everything under it stopped short.

   Capping everything at one absolute width fixed the ragged edges but left a
   third of the column empty on the right of every block. So the measure is now
   simply 100%: text fills the column, and the COLUMN is what controls line
   length. --maxw came in from 1120 to 960, which puts a filled line at about
   75 characters on the consumer page and 80 on the clinician page — long, but
   inside the readable range, and every block now reaches the same right edge
   because they all reach the edge of the column.

   Change line length by changing --maxw, never by capping individual blocks.
   ---------------------------------------------------------------------------- */

/* ============================================================================
   RESET + BASE
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink-2);
  font-family:var(--f-body);
  font-weight:300;
  font-size:var(--fs);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
img{height:auto}

/* The sticky nav would otherwise swallow the top of every anchor target. */
[id]{scroll-margin-top:calc(var(--navh) + 18px)}
/* ...except the document top itself, which the masthead logo points at. */
#top{scroll-margin-top:0}

h1,h2,h3,h4{font-family:var(--f-display); color:var(--ink); margin:0; text-wrap:pretty;
  max-width:var(--measure)}
h1,h2{text-wrap:balance}
p,ul,ol,dl{margin:0}

a{color:var(--accent); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}

/* Visible focus on everything reachable by keyboard. The previous site CSS had
   `outline:none` on form fields and nothing in its place. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,4vw,40px)}
.narrow{max-width:var(--measure)}
.tnum{font-variant-numeric:tabular-nums}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--accent); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:13px; padding:11px 18px;
  border-radius:0 0 6px 6px; transition:top .18s}
.skip:focus{top:0; text-decoration:none}

/* ============================================================================
   TYPE SCALE, PER LANE
   Same two faces. The clinician lane is tighter and more even; the consumer
   lane is larger and more expressive.
   ============================================================================ */

.lane-clin h1{font-weight:700; font-size:clamp(34px,4.8vw,54px); line-height:1.04; letter-spacing:-.026em}
.lane-clin h2{font-weight:600; font-size:clamp(23px,2.9vw,31px); line-height:1.16; letter-spacing:-.018em}
.lane-clin h3{font-weight:600; font-size:18px; line-height:1.32; letter-spacing:-.008em}
.lane-clin h4{font-weight:600; font-size:15px; line-height:1.35}
.lane-clin .lede{font-size:clamp(18px,2vw,21px); line-height:1.5; color:var(--ink-2); font-weight:300}
.lane-clin .eyebrow{font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent)}

.lane-cons h1{font-weight:700; font-size:clamp(36px,6.2vw,60px); line-height:1.01; letter-spacing:-.030em}
.lane-cons h2{font-weight:600; font-size:clamp(25px,3.7vw,34px); line-height:1.14; letter-spacing:-.022em}
.lane-cons h3{font-weight:600; font-size:20px; line-height:1.3; letter-spacing:-.01em}
.lane-cons h4{font-weight:600; font-size:16px; line-height:1.35}
.lane-cons .lede{font-size:clamp(19px,2.6vw,24px); line-height:1.45; color:var(--ink-2); font-weight:300}
/* Lane 3 takes the brand guide literally: subheads are DM Sans Medium caps. */
.lane-cons .eyebrow{font-family:var(--f-body); font-weight:500; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent)}

.body{color:var(--ink-2); max-width:var(--measure)}
.lede{max-width:var(--measure)}
.small{font-size:13.5px; line-height:1.55; color:var(--ink-3); max-width:var(--measure)}
.bigline{font-family:var(--f-display); font-weight:600; color:var(--accent); letter-spacing:-.02em}
.lane-clin .bigline{font-size:clamp(23px,3vw,31px); line-height:1.2}
.lane-cons .bigline{font-weight:700; font-size:clamp(22px,3.2vw,29px); line-height:1.16}
.tm{font-family:var(--f-body); font-size:.34em; font-weight:400; vertical-align:super; letter-spacing:0}
.hero-rule{height:4px; width:76px; background:var(--accent); border-radius:2px}

.stack{display:flex; flex-direction:column; align-items:stretch}
.lane-clin .stack{gap:14px}
.lane-cons .stack{gap:16px}
.stack-sm{display:flex; flex-direction:column; gap:8px; align-items:stretch}

/* ============================================================================
   NAV
   The masthead is where a web page names its audience at a glance, which is the
   standing requirement on every piece in the series.
   ============================================================================ */

/* position is declared with the id-free but higher-specificity :where() trick off:
   the consumer header also carried .band, whose position:relative sits later in this
   sheet and silently un-pinned the whole nav. Doubling the class is the cheapest way
   to make the nav's own position authoritative no matter what else is on the element. */
.nav.nav{position:sticky; top:0; z-index:50; background:var(--ground);
  border-bottom:1px solid var(--rule); overflow:visible}
@supports (backdrop-filter:blur(1px)){
  .nav{background:color-mix(in srgb,var(--ground) 88%,transparent);
    backdrop-filter:saturate(150%) blur(10px)}
}
/* Three tracks, not a flex row: the lockup is pinned left, the toggle sits on the
   page's true centre line, and the call to action is pinned right. A flex row with
   auto margins would centre the toggle in whatever space the other two left over,
   which drifts as the lockup and the button change width between the two pages. */
.nav .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px 24px; min-height:var(--navh); padding-block:10px}
.nav .lockup{justify-self:start}
.nav .lanetoggle{justify-self:center}
.nav .right{justify-self:end}
.lockup{display:flex; align-items:center; gap:13px; flex:none}
.lockup .mbq{height:31px; width:auto; display:block}
.lockup .div{width:1px; align-self:stretch; background:var(--rule); margin-block:4px}
.lockup .by{font-family:var(--f-body); font-weight:500; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.5; max-width:14ch}
.nav .right{display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap}

/* ---- the audience toggle ------------------------------------------------
   A segmented control on the centre line of the header, with the co-brand lockup
   pinned to its left. It does two jobs at once: the active segment IS the audience
   tag that every piece in the series has to carry at a glance, and the inactive
   segment tells a reader who landed on the wrong page that a version exists for
   them, one click away.
   That is better than the static pill it replaces, which named the audience but
   hid the other door behind a text link further down the page.

   Plum, not red. The audience is document structure, so it takes the ink
   color; red stays the product voice under one-job-per-color. The active
   state is carried by fill versus no fill, which is a value difference rather
   than a hue difference, so it survives grayscale and color blindness, and
   aria-current carries it for a screen reader.
   ------------------------------------------------------------------------- */
.lanetoggle{display:inline-flex; flex:none; border:1.5px solid var(--plum); border-radius:999px;
  padding:3px; gap:3px; background:var(--paper)}
.lanetoggle a{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.06em;
  color:var(--plum); text-decoration:none; white-space:nowrap; border-radius:999px;
  padding:8px 15px; min-height:34px; transition:background .16s, color .16s}
.lanetoggle a:hover{background:rgba(40,16,78,.08); text-decoration:none}
.lanetoggle a[aria-current="page"]{background:var(--plum); color:#fff; font-weight:700}
.lanetoggle a[aria-current="page"]:hover{background:var(--plum)}
.lanetoggle a:focus-visible{outline-offset:1px}

/* Below the point where three tracks stop fitting, the lockup keeps the top-left
   corner and the toggle drops to its own full-width row underneath it. */
@media (max-width:900px){
  .nav .wrap{grid-template-columns:auto 1fr; row-gap:11px; padding-block:9px}
  .nav .lockup{grid-area:1/1}
  .nav .right{grid-area:1/2}
  .nav .lanetoggle{grid-column:1/-1; grid-row:2; justify-self:stretch; width:100%}
  .lanetoggle a{flex:1 1 0}
}
@media (max-width:520px){
  .lockup .div,.lockup .by{display:none}
  .lanetoggle a{font-size:11.5px; padding:8px 10px; letter-spacing:.04em}
}
/* On the narrowest phones the nav button would otherwise wrap to two lines and
   push the lockup off its corner. Keep it on one line and let it get smaller. */
.nav .right .btn{white-space:nowrap}
@media (max-width:430px){
  .nav .right .btn{font-size:13px; padding:10px 15px; min-height:42px}
  .lockup .mbq{height:27px}
}

/* ---- the crossover block, end of page ----------------------------------
   The other door again, stated in full, where a reader who has read to the
   bottom of the wrong page is most likely to want it.
   ------------------------------------------------------------------------ */
.crossover{border-top:1px solid var(--rule); background:var(--paper)}
.lane-cons .crossover{background:var(--ground); border-top:none}
.crossover .wrap{padding-block:clamp(26px,3.4vw,40px); display:grid;
  grid-template-columns:1fr auto; gap:18px 32px; align-items:center}
@media (max-width:760px){ .crossover .wrap{grid-template-columns:1fr} }
.crossover .k{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}
.crossover h2{font-size:clamp(20px,2.4vw,25px) !important; line-height:1.2; max-width:none}
.crossover p{font-size:15px; line-height:1.58; color:var(--ink-2); max-width:min(56ch,100%); margin-top:7px}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:600; font-size:14.5px; line-height:1.2;
  min-height:46px; padding:12px 21px; border:1.5px solid transparent; cursor:pointer;
  text-align:center; transition:background .18s, border-color .18s, color .18s}
.lane-clin .btn{border-radius:3px}
.lane-cons .btn{border-radius:999px}
.btn:hover{text-decoration:none}
.btn-solid{background:var(--red); color:#fff}
.btn-solid:hover{background:#6E0619}
.btn-ghost{background:transparent; color:var(--red); border-color:rgba(140,10,34,.34)}
.btn-ghost:hover{border-color:var(--red); background:rgba(140,10,34,.05)}
.btn-white{background:#fff; color:var(--red)}
.btn-white:hover{background:#FCEDEF}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btnrow + .small{margin-top:6px}

/* ============================================================================
   PENDING CHIP
   Warns a reader off a claim they might rely on. Everything that is merely
   waiting on an internal owner goes to the register instead, not here.
   ============================================================================ */

.pending{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-body);
  font-weight:500; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--flag); background:var(--flag-field); border:1px solid var(--flag-rule);
  border-radius:3px; padding:2px 7px; white-space:nowrap; line-height:1.6;
  vertical-align:middle; margin-inline:3px; max-width:100%}
/* Some of these chips name four departments. On a phone they have to be allowed to
   wrap, or they hold the whole card open past the edge of the screen. */
@media (max-width:620px){ .pending{white-space:normal} }
.pending::before{content:""; width:5px; height:5px; background:var(--flag); border-radius:50%; flex:none}

/* ============================================================================
   SURVIVAL BARS · shared component, lane-colored
   Third-party epidemiology, so it is explicitly not a MyBloodQ claim. Lane 1
   draws it in the data blue; Lane 3 draws it in the product red because the
   consumer lane spends color more freely.
   ============================================================================ */

.bars{display:flex; flex-direction:column; gap:16px; width:100%; max-width:var(--measure)}
.brow{display:flex; flex-direction:column; gap:7px}
.blab{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.blab .l{font-size:14.5px; color:var(--ink-2); max-width:min(34ch,100%)}
.blab .v{font-family:var(--f-display); font-weight:700; line-height:.94;
  letter-spacing:-.028em; color:var(--data); font-variant-numeric:tabular-nums}
.lane-clin .blab .v{font-size:clamp(30px,4.2vw,44px)}
.lane-cons .blab .v{font-size:clamp(36px,6vw,56px)}
.btrack{height:15px; border-radius:8px; overflow:hidden}
.lane-clin .btrack{background:var(--data-track); border-radius:2px}
.lane-cons .btrack{background:var(--blush-2)}
.bfill{height:100%; width:var(--w); background:var(--data); border-radius:inherit}
.brow.far .blab .v{color:var(--ink-3)}
.lane-clin .brow.far .bfill{background:var(--ink-3)}
.lane-cons .brow.far .bfill{background:var(--red-2); opacity:.42}
.baxis{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; max-width:var(--measure); width:100%}

/* ============================================================================
   FIGURES AND IMAGE SLOTS
   Every image slot reserves its ratio. Photos decoding into an unreserved box
   was a real bug on the consumer sheet, not a theoretical one.
   ============================================================================ */

.fig{margin:0; width:100%; display:flex; flex-direction:column; gap:10px}
.fig img{width:100%; display:block; border-radius:var(--radius)}
.fig figcaption{font-size:12.5px; line-height:1.55; color:var(--ink-3); max-width:min(68ch,100%)}
.ratio-32{aspect-ratio:3/2; object-fit:cover}
.ratio-45{aspect-ratio:4/5; object-fit:cover}
.ratio-11{aspect-ratio:1/1; object-fit:cover}

.slot{width:100%; aspect-ratio:3/2; border:1.5px dashed var(--flag-rule); background:var(--flag-field);
  border-radius:var(--radius); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; text-align:center; padding:26px}
.slot .lbl{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--flag)}
.slot .spec{font-size:13.2px; line-height:1.55; color:var(--ink-2); max-width:min(46ch,100%)}

/* ============================================================================
   REFERENCES · cite, never borrow a logo
   For a clinician a numbered citation reads as evidence; a third-party logo
   reads as sponsorship.
   ============================================================================ */

sup.ref{font-size:.62em; font-weight:600; line-height:0; vertical-align:super; margin-left:1px;
  font-variant-numeric:tabular-nums}
sup.ref a{color:var(--accent)}
.srcline{font-size:12.5px; line-height:1.55; color:var(--ink-3); border-left:2px solid var(--rule);
  padding-left:13px; max-width:min(72ch,100%)}
.refs ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.refs li{font-size:12.5px; line-height:1.55; color:var(--ink-3)}
.refs li:target{color:var(--ink)}
.refs a{color:var(--ink-3); text-decoration:underline}

/* ============================================================================
   FORMS
   16px minimum on inputs so iOS does not zoom on focus. Labels are real
   labels. Errors are announced, not just colored.
   ============================================================================ */

form{width:100%}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--ink);
  padding:0; margin-bottom:4px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
@media (max-width:620px){ .fgrid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px}
.field.wide{grid-column:1/-1}
.field label{font-family:var(--f-body); font-weight:500; font-size:12px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3)}
.field .hint{font-size:12.5px; line-height:1.5; color:var(--ink-3)}
input,select,textarea{width:100%; font-family:var(--f-body); font-weight:300; font-size:16px;
  line-height:1.5; color:var(--ink); background:var(--paper); border:1px solid var(--rule);
  padding:12px 14px; min-height:46px}
.lane-clin input,.lane-clin select,.lane-clin textarea{border-radius:3px}
.lane-cons input,.lane-cons select,.lane-cons textarea{border-radius:10px}
input::placeholder,textarea::placeholder{color:var(--ink-3); opacity:.8}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px}
.check{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  font-size:14px; line-height:1.55; color:var(--ink-2)}
.check input[type=checkbox]{width:19px; height:19px; min-height:0; margin-top:2px; accent-color:var(--red)}
.formnote{font-size:12.5px; line-height:1.55; color:var(--ink-3); max-width:min(72ch,100%)}

/* ============================================================================
   FAQ
   ============================================================================ */

.faq{display:flex; flex-direction:column; width:100%; max-width:min(880px,100%)}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  font-family:var(--f-display); font-weight:600; color:var(--ink); cursor:pointer;
  padding-block:17px; list-style:none; min-height:46px}
.lane-clin .faq summary{font-size:16.5px}
.lane-cons .faq summary{font-size:17.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:400; font-size:1.35em; line-height:1; color:var(--accent);
  flex:none; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding-bottom:20px; display:flex; flex-direction:column; gap:10px}
.faq .a p{color:var(--ink-2); max-width:var(--measure)}

/* ============================================================================
   FOOTER
   ============================================================================ */

footer{background:var(--plum); color:#E5DCEF; margin-top:0}
footer .wrap{padding-block:clamp(36px,4.5vw,52px) 30px; display:flex; flex-direction:column; gap:22px}
footer .top{display:flex; gap:26px 44px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
footer .mbq{height:30px; width:auto; display:block}
footer .ph{height:27px; width:auto; display:block}
/* align-items must not be the default stretch here. A column flex container
   stretches its children to the width of the widest one, and a stretched item
   resolves width:auto to that width rather than to its own aspect ratio, so the
   MyBloodQ mark was being pulled out to the width of the Person Health lockup. */
footer .cobrand{display:flex; flex-direction:column; align-items:flex-start; gap:11px}
footer .cobrand .by{font-family:var(--f-body); font-weight:500; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:#A897BE}
footer .blurb{font-size:14.5px; line-height:1.6; max-width:min(50ch,100%); color:#CFC1DE}
footer .links{display:flex; gap:10px 24px; flex-wrap:wrap; font-family:var(--f-body); font-weight:500;
  font-size:13.5px}
footer a{color:#E5DCEF; text-decoration:none}
footer a:hover{text-decoration:underline}
footer .gov{font-size:12.5px; line-height:1.62; color:#B3A3C6; max-width:min(88ch,100%);
  border-top:1px solid rgba(255,255,255,.14); padding-top:20px}
footer .refs li,footer .refs a{color:#B3A3C6}
footer .meta{display:flex; gap:9px 24px; flex-wrap:wrap; font-family:var(--f-display); font-weight:600;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:#A897BE}
footer :focus-visible{outline-color:#fff}

/* ============================================================================
   SIGN-OFF REGISTER · internal only, comes off before publication
   Routes a fact to its internal owner. Distinct from the inline chip, which
   warns a reader. Two flags, two jobs.
   ============================================================================ */

.register{background:var(--flag-field); border-top:3px solid var(--flag-rule)}
.register .wrap{padding-block:clamp(30px,4vw,42px); display:flex; flex-direction:column; gap:16px}
.register h2{color:var(--flag); max-width:none}
.register .small{color:#6E5420}
.tablewrap{overflow-x:auto; width:100%; border:1px solid var(--flag-rule); background:#fff;
  border-radius:3px}
.register table{border-collapse:collapse; width:100%; min-width:560px}
.register th,.register td{text-align:left; padding:10px 15px; border-bottom:1px solid var(--flag-rule);
  font-size:13.2px; line-height:1.55; color:var(--ink-2); vertical-align:top}
.register th{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--flag)}
.register tbody tr:last-child td{border-bottom:none}
.register td.own{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--flag); white-space:nowrap}
.register td.st{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap}
.register td.st.open{color:var(--red)}
.register td.st.closed{color:#2F6B3C}

/* ============================================================================
   ────────────────── LANE 1 · CLINICIANS & HEALTH SYSTEMS ──────────────────
   One field, divided by hairline rules. White panels carry anything that has
   to be read as a record. Accent is rationed: red for structure, blue for
   data, violet once.
   ============================================================================ */

.lane-clin main > section{padding-block:clamp(34px,4.4vw,56px); border-bottom:1px solid var(--rule)}
.lane-clin main > section:last-of-type{border-bottom:none}
.lane-clin .hero{padding-block:clamp(34px,4.4vw,54px) clamp(26px,3vw,38px); border-bottom:1px solid var(--rule)}
.lane-clin .herogrid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,54px);
  align-items:center}
@media (max-width:900px){ .lane-clin .herogrid{grid-template-columns:1fr; gap:30px} }

/* trust strip */
.trust{border-bottom:1px solid var(--rule); background:var(--paper)}
.trust .wrap{display:flex; flex-wrap:wrap; gap:10px 34px; padding-block:15px}
.trust span{font-family:var(--f-display); font-weight:600; font-size:12.5px; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px}
.trust svg{width:15px; height:15px; color:var(--accent); flex:none}

/* status panel: the only place the page states where things stand */
.status{background:var(--paper); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--shadow); display:grid;
  grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; width:100%}
.status > div{background:var(--paper); padding:21px 23px; display:flex; flex-direction:column; gap:7px}
.status > div + div{border-left:1px solid var(--rule)}
.status .k{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent)}
.status h3{font-size:16.5px; max-width:none}
.status p{font-size:14.2px; line-height:1.55; color:var(--ink-2)}
@media (max-width:820px){
  .status{grid-template-columns:1fr}
  .status > div + div{border-left:none; border-top:1px solid var(--rule)}
}

.pull{font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2.4vw,25px); line-height:1.26;
  letter-spacing:-.017em; color:var(--ink); border-left:3px solid var(--data); padding-left:22px;
  max-width:var(--measure)}
.pull.why{border-left-color:var(--violet)}

/* two-up and three-up grids */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); width:100%;
  align-items:start}
@media (max-width:820px){ .split{grid-template-columns:1fr} }
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; width:100%}
.grid3 > div{background:var(--paper); padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.grid3 .e{font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--data)}
.grid3 .t{font-family:var(--f-display); font-weight:600; font-size:15.5px; line-height:1.3; color:var(--ink)}
.grid3 .d{font-size:14px; line-height:1.55; color:var(--ink-2)}

.feat{display:flex; flex-direction:column; gap:6px; padding-top:13px; border-top:2px solid var(--sky)}
.feat .t{font-family:var(--f-display); font-weight:600; font-size:15.5px; color:var(--ink)}
.feat .d{font-size:14.2px; line-height:1.55; color:var(--ink-2)}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 32px; width:100%}
@media (max-width:620px){ .grid2{grid-template-columns:1fr} }

/* the evidence block gets the color budget */
.evidence{background:var(--data-field); border:1px solid var(--data-rule); border-radius:var(--radius);
  padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:20px; width:100%}
.evidence .eyebrow{color:var(--data)}
.bigstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr)); gap:16px; width:100%}
.bigstat{background:#fff; border:1px solid var(--data-rule); border-radius:3px; padding:21px 23px;
  display:flex; flex-direction:column; gap:5px}
.bigstat .n{font-family:var(--f-display); font-weight:700; font-size:clamp(30px,4.2vw,42px);
  line-height:.95; letter-spacing:-.03em; color:var(--data); font-variant-numeric:tabular-nums}
.bigstat .l{font-family:var(--f-display); font-weight:600; font-size:13.5px; color:var(--ink)}
.bigstat .s{font-size:12.5px; line-height:1.5; color:var(--ink-3)}
.ci{margin-top:12px; display:flex; flex-direction:column; gap:5px}
.ci-track{position:relative; height:9px; background:var(--data-track); border-radius:2px}
.ci-range{position:absolute; top:0; bottom:0; left:43%; width:47%; background:var(--data);
  opacity:.34; border-radius:2px}
.ci-point{position:absolute; top:-3px; height:15px; width:3px; left:73%; background:var(--data);
  border-radius:1px}
.ci-lab{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}

/* evidence sequence: the order the work happened in */
.seq{list-style:none; margin:0; padding:0; width:100%; counter-reset:ev;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 26px}
@media (max-width:700px){ .seq{grid-template-columns:1fr} }
.seq li{display:grid; grid-template-columns:26px 1fr; gap:12px; counter-increment:ev}
.seq li::before{content:"0" counter(ev); font-family:var(--f-display); font-weight:700;
  font-size:10.5px; letter-spacing:.04em; color:var(--data); padding-top:4px}
.seq .figure{font-family:var(--f-display); font-weight:700; font-size:16.5px; letter-spacing:-.015em;
  color:var(--ink); font-variant-numeric:tabular-nums}
.seq .what{font-size:14.5px; line-height:1.55; color:var(--ink-2)}

/* observed sensitivity by stage */
.chart{width:100%; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--data-rule); border-radius:3px; padding:20px 22px}
.chart .ttl{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:12px}
.cgroup{border-left:2px solid var(--accent); padding-left:15px}
.cgl{font-family:var(--f-display); font-weight:700; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); display:block; padding-bottom:3px}
.crow{display:grid; grid-template-columns:118px 1fr 54px; gap:12px; align-items:center;
  padding:7px 0; border-bottom:1px solid #EAF2FA}
.crow.plain{padding-left:17px}
.crow:last-child{border-bottom:none}
.cs{font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--ink)}
.cn{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ctrack{display:block; height:17px; background:var(--data-track); border-radius:2px; overflow:hidden}
.cfill{display:block; height:100%; width:var(--w); background:var(--data); border-radius:0 3px 3px 0}
.cgroup .cfill{background:#123A5C}
.cval{font-family:var(--f-display); font-weight:700; font-size:18px; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums}
.caxis{display:grid; grid-template-columns:130px 1fr 58px; gap:14px; padding-top:9px; padding-left:17px}
.caxis .ax{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
@media (max-width:560px){ .crow,.caxis{grid-template-columns:94px 1fr 50px; gap:10px} }

/* what the findings do and do not support */
.boundary{background:#fff; border:1px solid var(--data-rule); border-radius:3px; padding:18px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; width:100%; align-items:start}
@media (max-width:700px){ .boundary{grid-template-columns:1fr} }
.k{font-family:var(--f-display); font-weight:600; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3)}

/* the study, in one table */
.factwrap{overflow-x:auto; width:100%; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper)}
table.fact{border-collapse:collapse; width:100%; min-width:520px}
table.fact th,table.fact td{text-align:left; padding:13px 20px; border-bottom:1px solid var(--rule);
  font-size:14.5px; line-height:1.6; color:var(--ink-2); vertical-align:top}
table.fact th{font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap; width:1%}
table.fact tbody tr:last-child th,table.fact tbody tr:last-child td{border-bottom:none}

/* the intended workflow */
.flow{list-style:none; margin:0; padding:0; counter-reset:step; width:100%;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden}
.flow li{counter-increment:step; display:grid; grid-template-columns:30px 1fr; column-gap:15px;
  row-gap:3px; padding:12px 18px; border-bottom:1px solid var(--rule)}
.flow li:last-child{border-bottom:none}
.flow li::before{content:counter(step,decimal-leading-zero); grid-column:1; grid-row:1;
  font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:.04em;
  color:var(--accent); background:#FAEDEF; border-radius:2px; text-align:center; padding:4px 0;
  line-height:1.15; align-self:start}
.flow .t{grid-column:2; grid-row:1; font-family:var(--f-display); font-weight:600; font-size:15.5px;
  line-height:1.35; color:var(--ink)}
.flow .d{grid-column:2; grid-row:2; font-size:14px; line-height:1.55; color:var(--ink-2)}

/* the two tracks */
.card{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow)}
.card h3{max-width:none}
.card .tag{font-family:var(--f-display); font-weight:600; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--data)}
ul.plain{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px}
ul.plain li{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.integrity{border-left:3px solid var(--ink-3); padding-left:22px; display:flex; flex-direction:column;
  gap:9px; width:calc(100% + 25px); margin-left:-25px}

/* mission: the one place violet leads */
.lane-clin .mission{background:var(--plum); color:#E5DCEF; border-bottom:none}
.lane-clin .mission h2,.lane-clin .mission h3{color:#fff}
.lane-clin .mission .eyebrow{color:#C4A8E8}
.lane-clin .mission .lede,.lane-clin .mission .body{color:#D6C9E6}
.lane-clin .mission .small{color:#B3A3C6}
.lane-clin .mission .pull{border-left-color:var(--lav); color:#fff}
blockquote{margin:0; display:flex; flex-direction:column; gap:12px; max-width:var(--measure)}
blockquote p{font-family:var(--f-display); font-weight:400; font-size:clamp(19px,2.5vw,25px);
  line-height:1.38; letter-spacing:-.013em; color:inherit}
blockquote cite{font-style:normal; font-size:13.5px; opacity:.8}

/* the ask */
.cta{background:var(--red); border-radius:var(--radius); padding:clamp(28px,4vw,46px);
  display:flex; flex-direction:column; gap:14px; width:100%}
.cta h2,.cta h3{color:#fff; max-width:none}
.cta p{color:#F2DADE}
.cta .eyebrow{color:#F0BDC5}
.cta :focus-visible{outline-color:#fff}

/* ============================================================================
   ────────────────── LANE 3 · CONSUMER & PUBLIC ──────────────────
   Bands of color on one warm field, which is the structural difference from
   the clinician lane. Larger type, narrower measure, human-led imagery.
   ============================================================================ */

.band{position:relative; overflow:hidden}
.band > .wrap{position:relative; z-index:1; padding-block:clamp(36px,5vw,62px)}
.band.paper{background:var(--paper)}
.band.blush{background:var(--blush)}
.band.ground{background:var(--ground)}
.band.plum{background:var(--plum); color:#EFE7F6}
.band.red{background:var(--red); color:#FCEDEF}
.band.sky{background:linear-gradient(180deg,#EAF4FF,#DCEDFF)}
.band.plum h2,.band.plum h3,.band.red h2,.band.red h3{color:#fff}
.band.plum .eyebrow{color:#C4A8E8}
.band.red .eyebrow{color:#F5C6CD}
.band.sky .eyebrow{color:var(--sky-ink)}
.band.plum .lede,.band.plum .body,.band.red .lede,.band.red .body{color:inherit; opacity:.9}
.band.plum .small,.band.red .small{color:inherit; opacity:.74}
.band.plum a,.band.red a{color:#fff; text-decoration:underline}
.band.plum :focus-visible,.band.red :focus-visible{outline-color:#fff}
.lane-cons .herogrid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,52px);
  align-items:center}
@media (max-width:900px){ .lane-cons .herogrid{grid-template-columns:1fr; gap:30px} }

/* the three-word promise */
.triad{display:flex; flex-wrap:wrap; gap:10px}
.triad span{white-space:nowrap; font-family:var(--f-display); font-weight:600;
  font-size:clamp(15px,2vw,17.5px); letter-spacing:-.012em; color:var(--ink);
  background:var(--blush); border-radius:999px; padding:9px 18px}

/* true today */
.phases{display:flex; flex-direction:column; gap:14px; width:100%}
.phase{background:var(--paper); border-radius:var(--radius); padding:22px 25px;
  display:flex; flex-direction:column; gap:8px; border-left:5px solid var(--rule)}
.band.blush .phase{box-shadow:var(--shadow)}
.phase.now{border-left-color:var(--red)}
.phase.next{border-left-color:var(--violet)}
.phase.far{border-left-color:var(--sky-ink)}
.phase .k{font-family:var(--f-body); font-weight:500; font-size:11.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3)}
.phase.now .k{color:var(--red)}
.phase.next .k{color:var(--violet)}
.phase.far .k{color:var(--sky-ink)}
.phase h3{font-size:21px; max-width:none}
.phase p{font-size:16px; line-height:1.58; color:var(--ink-2); max-width:none}

/* the comparison: the one bold moment */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%}
@media (max-width:660px){ .compare{grid-template-columns:1fr} }
.panel{background:var(--paper); border-radius:var(--radius); padding:20px; display:flex;
  flex-direction:column; gap:12px; box-shadow:var(--shadow)}
.panel .cap{font-family:var(--f-body); font-weight:500; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.panel h3{font-size:18px; max-width:none}
.panel svg{display:block; width:100%; height:auto; border-radius:9px; aspect-ratio:300/190}
.panel p{font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:none}

/* the research, four steps, in the order they happened */
.fsteps{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; width:100%}
.fstep{background:var(--paper); border:1px solid var(--blush-2); border-radius:14px;
  padding:18px 16px 16px; position:relative; display:flex; flex-direction:column; gap:7px}
.fstep .fn{font-family:var(--f-body); font-weight:500; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3)}
.fstep .fv{font-family:var(--f-display); font-weight:700; font-size:clamp(16px,2vw,19px);
  line-height:1.16; letter-spacing:-.018em; color:var(--ink)}
.fstep p{font-size:13.5px; line-height:1.52; color:var(--ink-2); max-width:none}
.fstep::after{content:""; position:absolute; right:-13px; top:50%; width:13px; height:1.5px;
  background:var(--blush-2)}
.fstep:last-child::after{display:none}
@media (max-width:880px){
  .fsteps{grid-template-columns:1fr 1fr}
  .fstep:nth-child(2)::after{display:none}
}
@media (max-width:470px){
  .fsteps{grid-template-columns:1fr}
  .fstep::after{display:none}
}

/* the three-word promise, expanded */
.three{display:flex; flex-direction:column; width:100%}
.three .row{display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr; gap:6px 28px;
  padding-block:20px; border-top:1px solid var(--rule); align-items:baseline}
.three .row:first-child{border-top:none; padding-top:4px}
.three .w{font-family:var(--f-display); font-weight:700; font-size:clamp(21px,3vw,27px);
  color:var(--red); line-height:1.08; letter-spacing:-.022em}
.three p{font-size:16px; line-height:1.58; color:var(--ink-2); max-width:none}
@media (max-width:620px){ .three .row{grid-template-columns:1fr; gap:8px} }

/* the scientist behind it */
.founder{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; width:100%;
  background:var(--paper); border:1px solid var(--blush-2); border-radius:18px; padding:24px 26px}
.founder .fimg{width:118px; aspect-ratio:4/5; border-radius:12px; background:var(--blush-2);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; flex:none}
.founder .fimg span{font-family:var(--f-body); font-weight:500; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.6}
.founder .fbody{display:flex; flex-direction:column; gap:10px}
.founder h3{font-size:21px; max-width:none}
.founder p{font-size:15.5px; line-height:1.58; color:var(--ink-2); max-width:none}
@media (max-width:560px){
  .founder{grid-template-columns:1fr; padding:22px}
  .founder .fimg{width:100%; aspect-ratio:16/9}
}

/* the CEO band.
   Portrait and attribution anchor a narrow left column; the quote and the mission
   paragraph share a wider right one. Before this the quote and the paragraph were
   stacked at their own measures down the left edge, which left most of the band
   empty on the right. */
.whygrid{display:grid; grid-template-columns:minmax(140px,.34fr) 1fr;
  gap:clamp(22px,3.4vw,48px); width:100%; align-items:start}
.whyfig{margin:0; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.portrait{width:100%; max-width:172px; aspect-ratio:1/1; border-radius:50%; object-fit:cover;
  background:rgba(255,255,255,.08)}
.whycol{display:flex; flex-direction:column; gap:18px; min-width:0}
.whycol blockquote,.whycol .body,.whycol .small,.whycol h3{max-width:none}
.whyattrib{font-size:13.5px; line-height:1.6}
@media (max-width:760px){
  .whygrid{grid-template-columns:1fr; gap:24px}
  .portrait{max-width:132px}
}

/* the founder block carries a real portrait now, circular like Ping's */
.founder .fphoto{width:132px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; flex:none;
  background:var(--blush-2)}
@media (max-width:560px){ .founder .fphoto{width:120px} }

/* the CTA band carries Minnesota, because the copy says we are beginning here */
.cta-band > .wrap{position:relative}
.mnmark{position:absolute; right:-40px; top:50%; transform:translateY(-50%); height:86%;
  width:auto; pointer-events:none; z-index:0}
@media (max-width:980px){ .mnmark{right:-18%; height:92%; opacity:.6} }
@media (max-width:640px){ .mnmark{display:none} }
.ctabox{display:flex; flex-direction:column; gap:11px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); padding:20px 22px;
  max-width:var(--measure)}
.ctabox .k{color:#F5C6CD}
.ctabox ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;
  font-size:15px; line-height:1.55}
.band.red input,.band.red select,.band.red textarea{background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.4)}
.band.red .field label{color:#F5C6CD}
.band.red .check,.band.red .formnote,.band.red .field .hint{color:#FBE0E3}
.band.red .check input[type=checkbox]{accent-color:#fff}
.formcard{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius); padding:clamp(20px,3vw,28px); width:100%; max-width:var(--measure);
  display:flex; flex-direction:column; gap:16px}

/* ============================================================================
   MOTION
   Three moments in Lane 1, more expressive in Lane 3, and nothing is gated
   behind an animation: every reveal ends visible even if the script never runs.
   ============================================================================ */

.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  body[data-anim="on"] .reveal{opacity:0; transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
  body[data-anim="on"] .reveal.in{opacity:1; transform:none}
  body[data-anim="on"] .bfill,body[data-anim="on"] .cfill{width:0;
    transition:width .95s cubic-bezier(.22,.75,.3,1) .1s}
  body[data-anim="on"] .in .bfill,body[data-anim="on"] .in .cfill{width:var(--w)}
  body[data-anim="on"] .ci-range{width:0; transition:width .9s cubic-bezier(.22,.75,.3,1)}
  body[data-anim="on"] .ci-point{opacity:0; transition:opacity .4s ease-out .55s}
  body[data-anim="on"] .in .ci-range{width:47%}
  body[data-anim="on"] .in .ci-point{opacity:1}
}

/* ============================================================================
   PRINT
   These pages get printed. Drop the chrome, keep the marker and the
   boundaries, and let the color go where ink can follow it.
   ============================================================================ */

@media print{
  /* A reveal that has not fired must never cost the reader the content. */
  .reveal{opacity:1 !important; transform:none !important}
  .bfill,.cfill{width:var(--w) !important}
  .ci-range{width:47% !important} .ci-point{opacity:1 !important}
  .nav,.skip,.btnrow,.btn,.mnmark{display:none !important}
  body{background:#fff; font-size:11pt}
  .band,.band.plum,.band.red,footer{background:#fff !important; color:#000 !important}
  .band.plum h2,.band.plum h3,.band.red h2,.band.red h3,footer a{color:#000 !important}
  section,.band{break-inside:avoid-page}
  .faq details{break-inside:avoid}
  .faq .a{display:block !important}
  footer .gov,.register{border-color:#999}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}