/* ============================================================================
   CAIRN · editorial-clinical on fine paper
   Ink on warm ivory · a single deep slate-blue accent · characterful system serif.
   Pure CSS, no web fonts, no images · the grain is generated inline.
   ========================================================================== */

/* the hidden attribute always wins over any display rule (gates stay off-screen) */
[hidden]{display:none!important}

/* Body sans is the platform UI face (SF Pro on Apple, Segoe UI on Windows, Roboto on
   Android/Linux): tighter and more neutral than a loaded webfont, renders instantly, and
   fetches nothing so no user IP leaks to a font host. Serif headlines stay Palatino/Iowan. */

:root{
  --paper:      #f1ede4;   /* warm ivory, cooled · no rose */
  --paper-2:    #eae5d9;   /* recessed panels */
  --paper-3:    #e4ddcc;   /* deeper wells */
  --edge:       #d6cdba;   /* hairline rules */
  --edge-soft:  #e1d9c8;

  --ink:        #22201b;
  --ink-soft:   #4a453c;
  --ink-faint:  #736b5c;

  --accent:     #1f6f5c;   /* deep slate-teal-blue · trust, clinical */
  --accent-2:   #315f76;
  --accent-deep:#154c3c;   /* richer forest-emerald for filled survey surfaces (legends, selected) */
  --brass:      #8a7643;   /* muted archival brass · the one warm, NOT pink */

  /* ONE dark-emerald surface scale — every dark surface (nav, hero, mastheads,
     gates, panels) draws from these three stops, so the greens stay a family. */
  --em-1: #1b6151;   /* surface top · seamless with the nav */
  --em-2: #154c3c;   /* mid */
  --em-3: #0e3a2d;   /* deepest */
  --em-mint:  #9ad9c2; /* light accent text + links on emerald */
  --em-ivory: #f4f0e7; /* body text on emerald */

  --t-urgent:   #8c2b22;
  --t-escalate: #9a6320;   /* amber-bronze */
  --t-watch:    #7c6a2a;   /* ochre */
  --t-low:      #566571;   /* stone slate · NEVER green, never an all-clear */

  /* Impact choropleth · a refined sequential cost-burden ramp (low→high) with crisp paper separators */
  --tier-min:   #e2d2ac;   /* soft sand · low burden (reads clearly on the paper panel) */
  --tier-mod:   #d1973a;   /* warm amber · moderate */
  --tier-elev:  #a62c22;   /* deep brick red · elevated */
  --tier-line:  rgba(48,40,28,.42);  /* fine dark hairline · defines every state edge + the coastline */

  --serif: "Iowan Old Style","Hoefler Text","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:  "SFMono-Regular",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;

  --measure: 40rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --shadow: 0 1px 0 var(--edge-soft), 0 18px 40px -28px rgba(35,32,26,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
/* overflow-x guard lives on html (the viewport scroll container) NOT body — on body it makes body a
   scroll container and silently breaks position:sticky, so the top nav would scroll away instead of
   staying pinned. On html, horizontal overflow is still clipped and the sticky nav stays put. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; overflow-x:hidden; overflow-y:scroll }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}

body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #f6f2e8 0%, var(--paper) 48%, #ece6d6 100%);
  line-height:1.55; font-size:clamp(.94rem,.9rem + .26vw,1.04rem);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}

/* paper grain + vignette --------------------------------------------------- */
.grain-def{position:absolute;width:0;height:0}
.paper-grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999; mix-blend-mode:multiply; opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.32'/></svg>");
}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(130% 100% at 50% 30%, transparent 60%, rgba(84,72,48,.10) 100%)}

/* skip link ---------------------------------------------------------------- */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10000;border-radius:0 0 .4rem 0}
.skip:focus{left:0}

/* masthead ----------------------------------------------------------------- */
.masthead{ position:relative; text-align:center; padding:clamp(2.5rem,7vw,5rem) var(--gutter) clamp(1rem,3vw,2rem); }
/* top-right share · quiet pill, collapses to icon-only on small screens */
.masthead-share{
  position:absolute; top:clamp(.9rem,2.4vw,1.5rem); right:clamp(.9rem,2.4vw,1.6rem); z-index:3;
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--paper-2) 82%, transparent);
  border:1.5px solid var(--edge); border-radius:2rem; padding:.5rem .95rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
  animation:rise .8s var(--ease) .2s both;
}
.masthead-share:hover{ border-color:var(--accent); background:var(--paper-3); transform:translateY(-1px) }
.masthead-share:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.masthead-share-ic{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round }
.masthead-share-ic circle{ fill:currentColor; stroke:none }
@media (max-width:34rem){
  .masthead-share{ padding:.55rem; gap:0 }
  .masthead-share-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }}
/* top-left trust badge · mirrors the share button on the right */
.masthead-badge{ position:absolute; top:clamp(.9rem,2.4vw,1.5rem); left:clamp(.9rem,2.4vw,1.6rem); z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--paper-2) 82%, transparent);
  border:1.5px solid var(--edge); border-radius:2rem; padding:.5rem .9rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:default;
  animation:rise .8s var(--ease) .2s both; }
.masthead-badge-ic{ width:15px; height:15px; flex:0 0 auto; }
@media (max-width:34rem){
  .masthead-badge{ padding:.55rem; gap:0 }
  .masthead-badge-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }}
.masthead-inner{max-width:var(--measure);margin-inline:auto}

/* ---- TOPx vote ribbon · a restrained editorial masthead bar, very top, non-sticky (scrolls away,
   then the nav sticks). Deep forest green, one fine brass hairline, a serif line with the date set
   in italic brass, and a quietly letter-spaced CTA. No icon, no glow, no animation. ---- */
.vote-ribbon{ position:relative; z-index:60; display:flex; align-items:center; justify-content:flex-start; gap:1.1rem;
  background:linear-gradient(90deg, #0a2e26 0%, #0f3b33 60%, #0b352c 100%);
  color:#ede7da; padding:.34rem 2.3rem .36rem 1.6rem;
  border-bottom:1px solid rgba(201,168,106,.32); min-height:1.85rem; }
.vote-ribbon-link{ display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
.vote-ribbon-cta{ display:inline-flex; align-items:center; gap:.42rem; font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:#e3d7bf; padding-bottom:1px; border-bottom:1px solid rgba(220,189,121,.45); white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.vote-arr{ transition:transform .2s var(--ease); }
.vote-ribbon-link:hover .vote-ribbon-cta, .vote-ribbon-link:focus-visible .vote-ribbon-cta{ color:#fff; border-color:#e4c784; }
.vote-ribbon-link:hover .vote-arr, .vote-ribbon-link:focus-visible .vote-arr{ transform:translateX(3px); }
.vote-ribbon-link:focus-visible{ outline:2px solid #e4c784; outline-offset:4px; border-radius:.2rem; }
.vote-ribbon-x{ position:absolute; top:50%; right:.72rem; transform:translateY(-50%); z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border:0; border-radius:50%; background:transparent; color:rgba(242,236,224,.48); font-size:1.1rem; line-height:1; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.vote-ribbon-x:hover, .vote-ribbon-x:focus-visible{ background:rgba(255,255,255,.08); color:#f2ece0; outline:none; }
@media (max-width:560px){
  .vote-ribbon{ padding:.44rem 2rem .46rem 1.1rem; min-height:1.75rem; }
  .vote-ribbon-cta{ font-size:.64rem; letter-spacing:.13em; }
}

/* ---- site nav · teal bar pinned to the very top · badge left, routes right ---- */
.sitenav{ position:sticky; top:0; z-index:50; background:var(--em-1); border-bottom:1px solid rgba(0,0,0,.2); box-shadow:0 2px 12px -6px rgba(0,0,0,.35); }
.sitenav-inner{ position:relative; max-width:66rem; margin-inline:auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.9rem; }
.sitenav-links{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(.4rem,1.8vw,1.5rem); margin:0; padding:0; }
.sitenav-links a{ position:relative; display:block; padding:.55rem .2rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:color-mix(in srgb, #fff 76%, var(--accent)); text-decoration:none; transition:color .15s; }
.sitenav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:.28rem; height:2px; background:#fff; border-radius:2px; opacity:0; transform:scaleX(.5); transition:opacity .16s,transform .16s; }
.sitenav-links a:hover{ color:#fff; }
.sitenav-links a:hover::after{ opacity:.5; transform:scaleX(1); }
.sitenav-links a.is-active{ color:#fff; font-weight:600; }
.sitenav-links a.is-active::after{ opacity:1; transform:scaleX(1); }
.sitenav-cta{ margin-left:.5rem; color:var(--accent)!important; background:#fff; border-radius:2rem; padding:.45rem .95rem!important; border-bottom:0!important; }
.sitenav-cta:hover{ background:color-mix(in srgb, #fff 86%, var(--accent)); }
.sitenav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0; padding:.6rem .3rem; cursor:pointer; }
.sitenav-toggle span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; }
/* the trust badge lives in the nav now · literally top-left of the page, light on teal */
.sitenav .masthead-badge{ position:static; flex:0 0 auto; background:color-mix(in srgb, #fff 14%, transparent); border:1px solid color-mix(in srgb, #fff 32%, transparent); color:#fff; padding:.35rem .7rem; border-radius:2rem; backdrop-filter:none; animation:none; }
.sitenav .masthead-badge-ic{ color:#fff; }
.sitenav-links{ flex-wrap:nowrap; }
@media (max-width:900px){
  .sitenav-toggle{ display:flex; order:2; }
  .sitenav-share{ padding:0; width:2.2rem; height:2.2rem; justify-content:center; gap:0; border-radius:50%; }
  .sitenav-share-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .sitenav-links{ display:none; flex-wrap:nowrap; position:absolute; left:0; right:0; top:100%; flex-direction:column; background:var(--accent); padding:.2rem 0 .5rem; box-shadow:0 14px 26px -14px rgba(0,0,0,.55); }
  .sitenav-links.is-open{ display:flex; }
  .sitenav-links a{ padding:.85rem var(--gutter); border-bottom:1px solid color-mix(in srgb, #fff 16%, transparent); }
  .sitenav-links a.is-active{ border-bottom-color:#fff; }
  .sitenav-cta{ margin:.5rem var(--gutter); text-align:center; }}
@media (max-width:400px){ .sitenav .masthead-badge-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }}
/* Compact CAIRN wordmark that lives IN the sticky nav bar once the hero scrolls away (mobile). It stays
   hidden at the top of the page and on desktop (where the full nav fills the bar). */
.sitenav-brand{ display:none; font-family:var(--mono); font-weight:700; letter-spacing:.16em; font-size:.92rem; color:#fff; text-decoration:none; }
@media (max-width:900px){
  body.is-scrolled .sitenav-brand{ display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  /* inner pages on mobile: the full-phrase header stops being a second sticky bar. It scrolls away and the
     nav keeps the CAIRN identity, so there is one clean bar instead of two stacked ones. */
  body:not(.v-home) .masthead{ position:static; top:auto; box-shadow:none; }
}

/* masthead · large hero on the landing page, compact and tasteful once you enter */
/* inner pages: pin the CAIRN header under the nav so both stay put while content scrolls */
body:not(.v-home) .masthead{ padding-top:1rem; padding-bottom:.55rem; position:sticky; top:2.9rem; z-index:40; background:var(--paper); box-shadow:0 10px 18px -16px rgba(35,32,26,.55); }
body:not(.v-home) .masthead .folio,
body:not(.v-home) .masthead .rule,
body:not(.v-home) .masthead .standfirst,
body:not(.v-home) .wordmark{ display:none; }   /* inner pages: drop the CAIRN wordmark, promote the full phrase */
/* inner pages · the full phrase IS the header: larger italic, C·A·I·R·N read as bold italics */
body:not(.v-home) .lede{ font-style:italic; font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.22; letter-spacing:.005em; margin:.1rem 0 .45rem; color:var(--ink); }
body:not(.v-home) .lede-tail{ display:block; }   /* inner pages: exactly two rows, "Risk Navigation" on the second */
body:not(.v-home) .lede b{ font-weight:700; }
/* inner pages: small "CAIRN by GREENBOX Labs" under the phrase (mixed case, not uppercased) */
.byline-cairn{ display:none; }
body:not(.v-home) .byline{ display:block; margin:0; text-transform:none; font-size:.72rem; letter-spacing:.04em; }
body:not(.v-home) .byline-cairn{ display:inline; }
/* inner-page masthead fades transparent -> opaque on each transition (re-triggered by the router) */
/* inner masthead holds still across pages (no per-page re-animate) */

/* trust badge anchors left; links + share ride to the right of the teal bar */
.sitenav .masthead-badge{ margin-right:auto; }
/* Web: a proper labeled Share pill that reads as part of the nav. Collapses to a clean
   icon-only circle at <=860px (where the nav becomes a hamburger), the strong mobile touch target. */
.sitenav-share{ display:inline-flex; align-items:center; gap:.42rem; margin-left:.7rem; flex:0 0 auto;
  padding:.42rem .85rem; font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  background:color-mix(in srgb, #fff 12%, transparent); border:1px solid color-mix(in srgb, #fff 32%, transparent); border-radius:2rem;
  color:color-mix(in srgb, #fff 86%, var(--accent)); cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s; }
.sitenav-share svg{ flex:0 0 auto; }
.sitenav-share:hover{ background:color-mix(in srgb, #fff 20%, transparent); border-color:var(--em-mint); color:#fff; transform:translateY(-1px); }
.sitenav-share:focus-visible{ outline:2px solid var(--em-mint); outline-offset:2px; }
/* branded share menu (desktop): a light card anchored under the Share pill */
.sitenav-share-wrap{ position:relative; display:inline-flex; }
.share-pop{ position:absolute; top:calc(100% + .55rem); right:0; z-index:300; min-width:12.5rem;
  background:var(--paper); border:1px solid var(--edge); border-radius:.85rem; padding:.4rem;
  display:flex; flex-direction:column; gap:.06rem; box-shadow:0 20px 46px -22px rgba(20,28,22,.6), 0 1px 0 var(--edge-soft);
  animation:rise .16s var(--ease) both; }
.share-pop[hidden]{ display:none; }
.share-pop::before{ content:""; position:absolute; top:-5px; right:1.1rem; width:10px; height:10px; background:var(--paper);
  border-left:1px solid var(--edge); border-top:1px solid var(--edge); transform:rotate(45deg); }
.share-pop-item{ display:flex; align-items:center; width:100%; text-align:left; font-family:var(--sans); font-size:.85rem; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-soft); background:none; border:0; border-radius:.55rem; padding:.56rem .72rem;
  cursor:pointer; text-decoration:none; transition:background .12s, color .12s; }
.share-pop-item:hover{ background:var(--paper-2); color:var(--ink); }
.share-pop-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* bottom bar · mirrors the top teal bar · copyright, version, privacy, feedback, url */
.sitebar-foot{ background:var(--accent); border-top:1px solid color-mix(in srgb, var(--accent) 65%, #000); }
.sitebar-foot-inner{ max-width:66rem; margin-inline:auto; padding:.75rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:.5rem 1.1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; color:color-mix(in srgb, #fff 80%, var(--accent)); }
.sbf-links{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.sitebar-foot a, .sbf-btn{ color:inherit; font:inherit; text-decoration:none; background:none; border:0; border-bottom:1px solid color-mix(in srgb, #fff 30%, transparent); padding:0; cursor:pointer; }
.sitebar-foot a:hover, .sbf-btn:hover{ color:#fff; border-bottom-color:#fff; }
.sbf-ver{ opacity:.75; }
.sbf-url-m{ display:none; }
@media (max-width:560px){
  .sitebar-foot-inner{ justify-content:center; text-align:center; gap:.1rem .5rem; padding:.7rem .5rem; font-family:var(--sans); font-size:.66rem; }
  .sbf-url-m{ display:inline; margin-left:.3rem; }   /* url rides on the copyright line on mobile */
  .sbf-url{ display:none; }                           /* drop the separate url line to save a row */
  .sbf-inc{ display:none; }                           /* drop ", Inc." on mobile to save width */
}

/* ---- content pages (Federal Data, About, Privacy, Verify) · calm, right-sized, tasteful ---- */
.page{ max-width:54rem; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) var(--gutter) 2rem; animation:rise .6s var(--ease) both; }
/* one canonical reading column for every routed content page (data · about · privacy · model card) */
.page-inner, .about-inner{ max-width:46rem; margin-inline:auto; }
.page--verify .page-inner{ max-width:40rem; margin-inline:auto; }
.page .step-kicker{ margin:0 0 .5rem; }
.page-h{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.12; color:var(--ink); margin:.15rem 0 .55rem; letter-spacing:.005em; }
.page-lede{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.65; margin:0 0 2.2rem; }
/* content-page reading copy · serif and justified, the way the site reads */
.page-lede, .standard-lede, .standard-offer, .standard-list li, .data-card p, .about-block p, .page--privacy p{ font-family:var(--serif); }
.standard-lede, .standard-offer, .about-block p, .page--privacy p{ text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; word-break:normal; overflow-wrap:break-word; }

.data-flip-hint{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-faint); margin:0 0 .9rem; }
.data-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
/* flip cards · teal front shows the source, click flips to the description */
.data-card{ appearance:none; border:0; background:none; padding:0; cursor:pointer; perspective:900px; min-height:12.5rem; text-align:left; font:inherit; }
.data-card--wide{ grid-column:1 / -1; min-height:9.5rem; }
.dc-inner{ position:relative; display:block; width:100%; height:100%; min-height:inherit; transform-style:preserve-3d; transition:transform .55s var(--ease); }
.data-card.is-flipped .dc-inner{ transform:rotateY(180deg); }
.dc-front, .dc-back{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:1rem; display:flex; box-sizing:border-box; overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.data-card:not(.is-flipped):hover .dc-front{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(0,0,0,.55); }
/* deeper, less on-the-nose teal · source + what it is, so the acronym has context */
.dc-front{ background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 86%, #0b2620) 0%, color-mix(in srgb, var(--accent) 60%, #0a2f3a) 100%); color:#fff; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.55rem; padding:1.2rem 1.1rem; box-shadow:0 10px 26px -18px rgba(0,0,0,.5); }
.dc-src{ font-family:var(--serif); font-weight:600; font-size:clamp(1.18rem,2.4vw,1.42rem); line-height:1.18; text-wrap:balance; max-width:8.5rem; min-height:2.5em; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.dc-full{ font-family:var(--sans); font-weight:400; font-size:.78rem; letter-spacing:.02em; line-height:1.4; color:color-mix(in srgb, #fff 80%, transparent); margin-top:.35rem; padding-top:.55rem; border-top:1px solid color-mix(in srgb,#fff 22%, transparent); width:min(8.5rem,78%); }
/* data-type icon medallion on the green front · white line art in a faint disc (screenshot-classy) */
.dc-ic{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0 0 .2rem; border-radius:50%; color:#fff;
  background:color-mix(in srgb, #fff 12%, transparent); border:1px solid color-mix(in srgb, #fff 24%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent), 0 6px 16px -10px rgba(0,0,0,.5); }
.dc-ic{ flex:0 0 auto; aspect-ratio:1; }
.dc-ic svg{ width:26px; height:26px; }
/* accurate source + year on the back of each data card */
.dc-cite{ margin-top:.7rem; padding-top:.55rem; border-top:1px solid var(--edge); font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; line-height:1.4; color:color-mix(in srgb, var(--accent) 60%, var(--ink-faint)); }
.data-card--wide .dc-front{ justify-content:center; padding:1.25rem 1.4rem; gap:.6rem; }
.data-card--wide .dc-ic{ width:44px; height:44px; flex:0 0 auto; aspect-ratio:1; margin-bottom:.3rem; }
.data-card--wide .dc-src{ max-width:none; min-height:0; }
.data-card--wide .dc-full{ width:auto; border-top:0; padding-top:0; margin-top:.15rem; }
.dc-back{ background:var(--paper-2); border:1px solid var(--edge); transform:rotateY(180deg); flex-direction:column; justify-content:center; gap:.35rem; padding:1.1rem 1.25rem; }
.data-card--wide .dc-back{ gap:.45rem; padding:1.3rem 1.5rem; }
.dc-back .dc-topic{ font-family:var(--serif); font-weight:600; font-size:.96rem; line-height:1.2; color:var(--ink); }
.dc-desc{ font-size:.82rem; line-height:1.52; color:var(--ink-soft); }
.data-card--wide .dc-back{ text-align:center; }
.data-note{ margin:1.3rem 0 0; font-size:.95rem; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
/* plain "short version" takeaways · readable at a glance */
.take-h{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin:1.8rem 0 .5rem; }
.take-scroll{ overflow-x:auto; border:1px solid var(--edge); border-radius:.7rem; }
.take-table{ width:100%; border-collapse:collapse; font-size:.9rem; table-layout:fixed; }
.take-table th, .take-table td{ word-break:normal; overflow-wrap:break-word; text-wrap:pretty; border-left:1px solid var(--edge); }
.take-table th:first-child, .take-table td:first-child{ border-left:0; }
/* col 1 = short label (Medical/Environment/People): bold, one line, never orphaned */
.take-table th:nth-child(1), .take-table td:nth-child(1){ width:18%; white-space:nowrap; }
.take-table td:nth-child(1){ font-weight:700; color:var(--ink); }
/* col 2 = "what it is for": larger + darker so it reads as the point */
.take-table th:nth-child(2), .take-table td:nth-child(2){ width:26%; }
.take-table td:nth-child(2){ color:var(--ink); }
/* col 3 = "why it matters": justified body */
.take-table td:nth-child(3){ text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; color:var(--ink-soft); }
.take-table th{ text-align:left; font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper-2); padding:.65rem .8rem; border-bottom:1px solid var(--edge); }
.take-table td{ padding:.6rem .8rem; border-bottom:1px solid var(--edge); color:var(--ink-soft); vertical-align:top; font-family:var(--serif); font-size:.88rem; }
.take-table td:first-child{ font-weight:600; color:var(--ink); white-space:nowrap; }
.take-table tr:last-child td{ border-bottom:0; }
.data-open{ margin:1.2rem 0 0; font-size:.95rem; line-height:1.6; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
/* Mobile: the 3-column "Data types informing CAIRN" table crowds and side-scrolls on a phone.
   Stack each row into a labelled card using the td data-label attributes, so nothing is cramped. */
@media (max-width:34rem){
  .take-scroll{ overflow-x:visible; border:0; border-radius:0; }
  .take-table{ table-layout:auto; }
  .take-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .take-table tr{ display:block; border:1px solid var(--edge); border-radius:.7rem; background:var(--paper-2); padding:.35rem .25rem; margin:0 0 .7rem; }
  .take-table tr:last-child{ margin-bottom:0; }
  .take-table td, .take-table td:first-child, .take-table td:nth-child(1), .take-table td:nth-child(2){ display:block; width:auto; border:0; padding:.4rem .95rem; white-space:normal; }
  .take-table td:nth-child(3){ text-align:left; }
  .take-table td:nth-child(1){ font-size:1.02rem; }
  .take-table td::before{ content:attr(data-label); display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .1rem; }
}
/* provenance table · the rigor judges + public see, rendered from the layer registry */
.data-prov{ margin:1.8rem 0 0; }
.dp-h{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin:0 0 .3rem; }
.dp-lede{ font-size:.86rem; color:var(--ink-soft); margin:0 0 .8rem; }
.dp-scroll{ overflow-x:auto; border:1px solid var(--edge); border-radius:.6rem; }
.dp-table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.dp-table th{ text-align:left; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper-2); padding:.5rem .7rem; border-bottom:1px solid var(--edge); white-space:nowrap; }
.dp-table td{ padding:.5rem .7rem; border-bottom:1px solid var(--edge); color:var(--ink-soft); vertical-align:top; }
.dp-table tr:last-child td{ border-bottom:0; }
.dp-src{ font-weight:600; color:var(--ink); white-space:nowrap; }
.dp-mono{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; }
.dp-role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.dp-seal{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.dp-seal--none{ color:var(--ink-faint); }
.dp-standards{ margin:.9rem 0 0; font-size:.78rem; line-height:1.6; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.dp-wl{ margin:.7rem 0 0; font-size:.8rem; color:var(--ink-soft); }
.dp-wl summary{ cursor:pointer; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.dp-wl ul{ margin:.5rem 0 0; padding-left:1.1rem; line-height:1.55; }

/* the proposed standard · a visual "what a record holds" card + three feature cards */
.std-showcase{ margin:1.6rem 0 1.4rem; }
.std-card{ max-width:26rem; margin:0 auto 1.4rem; border:1px solid var(--edge); border-radius:1rem; background:var(--paper); box-shadow:0 16px 38px -22px rgba(0,0,0,.4); overflow:visible; }
.std-card-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1.1rem; background:var(--accent); color:#fff; border-radius:1rem 1rem 0 0; }
.std-card-head span:first-child{ font-family:var(--serif); font-weight:600; font-size:1rem; }
.std-card-code{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; opacity:.92; }
.std-card-rows{ margin:0; padding:.2rem 1.1rem .7rem; }
.std-card-rows > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.6rem 0; border-top:1px solid var(--edge-soft); }
.std-card-rows > div:first-child{ border-top:0; }
.std-card-rows dt{ margin:0; font-family:var(--serif); font-weight:600; font-size:.94rem; color:var(--ink); }
.std-card-rows dd{ margin:0; font-family:var(--mono); font-size:.7rem; letter-spacing:.02em; color:var(--ink-soft); text-align:right; }
.std-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.std-feat{ text-align:center; padding:1.15rem 1rem; border:1px solid var(--edge-soft); border-radius:.9rem; background:var(--paper-2); }
.std-ic{ display:inline-flex; color:var(--accent); margin:0 0 .5rem; }
.std-ic svg{ width:26px; height:26px; }
.std-feat h4{ font-family:var(--serif); font-size:1rem; margin:0 0 .3rem; color:var(--ink); }
.std-feat p{ margin:0; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }
@media (max-width:640px){ .data-grid{ grid-template-columns:1fr 1fr; } .std-feats{ grid-template-columns:1fr; }}
@media (max-width:420px){ .data-grid{ grid-template-columns:1fr; }}

.data-standard{ margin:2.6rem 0 0; padding:1.5rem 1.6rem; border-radius:1rem; background:color-mix(in srgb, var(--accent) 6%, var(--paper-2)); border:1px solid color-mix(in srgb, var(--accent) 18%, var(--edge)); }
.data-standard h3{ font-family:var(--serif); font-size:1.3rem; margin:0 0 .55rem; color:var(--ink); }
.data-standard p{ margin:0 0 .7rem; line-height:1.65; color:var(--ink-soft); }
.data-standard p:last-child{ margin-bottom:0; }
.data-silos{ color:var(--ink-soft); }
.data-thanks{ margin:2.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--edge-soft); font-size:.86rem; font-style:italic; color:var(--ink-faint); }

/* the proposed open standard · TESR · welcome-to-regulation, tasteful */
.standard{ margin:2.9rem 0 0; }
.standard-kicker{ font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:0 0 .5rem; }
.standard-h{ font-family:var(--serif); font-weight:600; font-size:clamp(1.45rem,3.6vw,1.9rem); line-height:1.18; color:var(--ink); margin:0 0 .7rem; }
.standard-lede{ color:var(--ink-soft); font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.68; margin:0 0 1.2rem; max-width:40rem; }
.standard-list{ list-style:none; margin:0 0 1.3rem; padding:0; max-width:40rem; }
.standard-list li{ padding:.65rem 0; font-size:1rem; line-height:1.55; color:var(--ink-soft); border-top:1px solid var(--edge-soft); }
.standard-list li:first-child{ border-top:0; }
.standard-offer{ font-size:.95rem; line-height:1.65; color:var(--ink-soft); margin:0 0 .8rem; }
.standard-align{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.1rem; }
.std-chip{ display:inline-block; padding:.22rem .55rem; border:1px solid var(--edge); border-radius:1rem; background:var(--paper-2); color:var(--ink-soft); letter-spacing:.06em; }
/* on Check a Report the record block leads · give it clear air + a hairline before "Report check" */
.page--verify .standard{ margin:.4rem 0 clamp(2.6rem,7vw,3.8rem); padding-bottom:clamp(1.8rem,5vw,2.6rem); border-bottom:1px solid var(--edge); }
@media (max-width:600px){ .data-grid{ grid-template-columns:1fr; }}
/* mobile review fixes (2026-08-23) */
@media (max-width:600px){
  /* #3 the wide "medical rules" card matches the other cards on mobile (no centered/oversized treatment).
     Keep the full card height so the longer flip-back copy ("How the read is decided") is not truncated. */
  .data-card--wide{ grid-column:auto; min-height:12.5rem; }
  .data-card--wide .dc-front{ justify-content:flex-start; padding:1rem 1.1rem; gap:.5rem; text-align:left; }
  .data-card--wide .dc-ic{ width:28px; height:28px; margin-bottom:0; }
  .data-card--wide .dc-back{ text-align:left; }
}
@media (max-width:34rem){
  /* #2 "Why we built CAIRN." stays on one row on mobile */
  #page-about .page-h{ font-size:min(1.7rem, 7.2vw); white-space:nowrap; }
  /* #9 the Listen control is centered on mobile for every section */
  #cairn-listen{ display:block; text-align:center; }
  #cairn-listen .cl-btn{ margin-left:auto; margin-right:auto; }}
/* About · story + a photo slot for the inspiration */
.about-inner{ max-width:46rem; }
.about-photo{ margin:0 auto 2rem; text-align:center; }
.about-photo img{ width:100%; max-width:22rem; border-radius:1rem; border:1px solid var(--edge); box-shadow:0 14px 34px -18px rgba(0,0,0,.42); }
.about-photo figcaption{ font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--ink-faint); margin:.65rem 0 0; max-width:22rem; margin-inline:auto; line-height:1.4; }
/* Global link color · no default browser blue anywhere. Buttons (.btn*) and nav set their own color and
   are more specific, so they override this. Any unclassed prose link picks up the brand accent. */
a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ color:var(--accent-2); }
.about-block a, .inline-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
/* About hero · big photo, then her full quote + name/titles, all on the front */
.about-hero{ margin:0 auto .4rem; text-align:center; }
/* GREENBOX seal · divides her intro from the sections below */
.about-divider{ display:flex; align-items:center; gap:1rem; margin:1.4rem auto 1.8rem; }
.about-divider::before, .about-divider::after{ content:""; flex:1; height:1px; background:var(--edge); }
.about-divider-seal{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 7px 20px -8px rgba(31,111,92,.7); }
.about-divider-seal img{ width:88%; height:88%; object-fit:contain; }
.about-hero .about-photo{ margin:0 auto 1.1rem; }
.about-hero .about-photo img{ width:100%; max-width:21rem; border-radius:1rem; border:1px solid var(--edge); box-shadow:0 16px 38px -20px rgba(0,0,0,.45); }
.about-quote{ margin:0 auto; padding:1.15rem 1.5rem; border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 9%, var(--paper)); border-radius:.2rem .7rem .7rem .2rem; text-align:left; }
.about-quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(.98rem,.92rem + .4vw,1.1rem); line-height:1.45; color:var(--ink); margin:0 0 .7rem; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.about-by{ display:block; font-style:normal; line-height:1.35; }
.about-by-name{ display:block; font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--ink); }
.about-by-role{ display:block; font-family:var(--serif); font-size:.82rem; line-height:1.35; color:var(--ink-soft); margin-top:.1rem; }
.about-by-place{ display:block; font-family:var(--serif); font-size:.82rem; line-height:1.45; color:var(--ink-soft); margin-top:.15rem; }
.about-quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(.95rem,.9rem + .35vw,1.06rem); line-height:1.65; color:var(--ink); margin:0 0 1rem; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.about-by{ display:block; font-style:normal; }
.about-by-name{ display:block; font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--ink); }
.about-by-role{ display:block; font-family:var(--serif); font-size:.8rem; line-height:1.45; color:var(--ink-soft); margin-top:.15rem; }
.about-by-place{ display:block; font-family:var(--serif); font-size:.8rem; line-height:1.45; color:var(--ink-soft); margin-top:.2rem; }
.about-photo.is-empty img{ display:none; }
.about-photo.is-empty::before{ content:"Photo coming soon"; display:flex; align-items:center; justify-content:center; height:13rem; max-width:22rem; margin:0 auto; border:1px dashed var(--edge); border-radius:1rem; background:var(--paper-2); color:var(--ink-faint); font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; }
.about-block{ margin:0 0 1.6rem; padding-left:1.1rem; border-left:2px solid color-mix(in srgb, var(--accent) 28%, var(--edge)); }
/* On the About page, the blocks read as proper cards so the page matches the rest of the site. */
#page-about .about-body{ margin-top:1.8rem; display:grid; gap:1rem; }
#page-about .about-block{ margin:0; padding:1.35rem 1.45rem; border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:1rem; background:var(--paper-2); box-shadow:0 1px 0 var(--edge-soft), 0 16px 34px -30px rgba(35,32,26,.5); }
.about-k{ display:block; font-family:var(--serif); font-weight:600; font-size:1.2rem; line-height:1.2; color:var(--ink); margin:0 0 .45rem; }
.about-block p{ margin:0; font-size:.95rem; line-height:1.65; color:var(--ink-soft); }
.about-block p + p{ margin-top:.7rem; }
/* GREENBOX link row under "With special thanks." · LinkedIn (company), website, and the GREENBOX mark. */
.about-social{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:1.1rem 0 .2rem; }
.about-soc{ display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid var(--edge); background:var(--paper); color:var(--ink-soft); text-decoration:none;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); }
.about-soc:hover, .about-soc:focus-visible{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--edge)); background:color-mix(in srgb,var(--accent) 6%,var(--paper)); transform:translateY(-1px); outline:none; }
.about-soc--brand{ border:0; color:var(--accent); background:transparent; }
.about-soc--brand:hover, .about-soc--brand:focus-visible{ color:var(--accent-2); background:transparent; }

/* Share-your-read chooser · a small sheet (bottom on phones, centered on desktop): full read vs card. */
.sheet-overlay{ position:fixed; inset:0; z-index:9992; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(20,18,14,.44); opacity:0; transition:opacity .18s var(--ease); }
.sheet-overlay.show{ opacity:1; }
.sheet{ width:min(26rem,100%); background:var(--paper); border:1px solid var(--edge); border-bottom:0; border-radius:1.1rem 1.1rem 0 0;
  padding:1.1rem 1.1rem 1.5rem; box-shadow:0 -12px 44px -18px rgba(0,0,0,.5); transform:translateY(14px); transition:transform .18s var(--ease); }
.sheet-overlay.show .sheet{ transform:none; }
.sheet-h{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:.2rem 0 .85rem; text-align:center; }
.sheet-opt{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; margin:0 0 .6rem; padding:.9rem 1rem;
  border:1px solid var(--edge); border-radius:.85rem; background:var(--paper-2); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease); }
.sheet-opt:hover, .sheet-opt:focus-visible{ border-color:color-mix(in srgb,var(--accent) 45%,var(--edge)); background:color-mix(in srgb,var(--accent) 5%,var(--paper-2)); outline:none; }
.sheet-opt-ic{ flex:0 0 auto; width:2.3rem; height:2.3rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.6rem; background:color-mix(in srgb,var(--accent) 12%,var(--paper)); color:var(--accent); }
.sheet-opt-ic svg{ width:1.25rem; height:1.25rem; }
.sheet-opt-tx{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.sheet-opt-t{ font-family:var(--serif); font-size:1.04rem; font-weight:600; color:var(--ink); }
.sheet-opt-s{ font-size:.82rem; color:var(--ink-soft); line-height:1.35; }
.sheet-cancel{ display:block; width:100%; margin:.3rem 0 0; padding:.7rem; border:0; background:none; cursor:pointer; font-family:var(--sans); font-size:.9rem; color:var(--ink-faint); }
.sheet-cancel:hover, .sheet-cancel:focus-visible{ color:var(--ink); outline:none; }
@media (min-width:560px){ .sheet-overlay{ align-items:center; } .sheet{ border-radius:1.1rem; border-bottom:1px solid var(--edge); transform:translateY(0) scale(.98); } .sheet-overlay.show .sheet{ transform:none; } }
.about-affil{ margin:2.2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--edge); text-align:center; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--ink-faint); }
.about-sign{ margin:1.9rem 0 0; font-style:italic; color:var(--ink-faint); }

/* Privacy & Data · routed page */
.page--privacy .page-inner{ max-width:46rem; }
.page--privacy h4{ font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink); margin:1.7rem 0 .4rem; }
.page--privacy p{ font-size:.95rem; line-height:1.66; color:var(--ink-soft); margin:0 0 .65rem; }
/* the privacy hero is a dark card: keep its kicker + sub light, like every other page hero
   (the .page--privacy p rule above would otherwise paint them dark and unreadable). */
.page--privacy .mc-hero-k{ color:var(--em-mint); }
.page--privacy .mc-hero-sub{ font-size:clamp(1rem,1.8vw,1.12rem); color:color-mix(in srgb,var(--em-ivory) 90%,transparent); }
.page--privacy .policy-eff{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.4rem; }
.page--privacy .policy-meta{ margin-top:1.8rem; padding-top:1.1rem; border-top:1px solid var(--edge-soft); font-size:.82rem; color:var(--ink-faint); }
.colophon-thanks{ font-size:.78rem; color:var(--ink-faint); margin:.4rem auto .6rem; letter-spacing:.01em; max-width:36rem; }
.folio{ display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, var(--paper)); border:1px solid color-mix(in srgb, var(--accent) 24%, var(--edge));
  border-radius:2rem; padding:.32rem .95rem; margin:0 0 1.3rem; animation:rise .8s var(--ease) both; transition:background .15s, border-color .15s }
.folio:hover{ background:color-mix(in srgb, var(--accent) 16%, var(--paper)); border-color:var(--accent); }
.wordmark{
  font-family:var(--serif); font-weight:600; font-size:clamp(3.4rem,14vw,6.6rem); line-height:.92;
  letter-spacing:.14em; margin:0 0 .3rem; padding-left:.14em; color:var(--ink);
  animation:rise .8s var(--ease) .05s both;
}
/* very narrow screens: trim tracking + drop the left pad so the wordmark can never clip its final letter */
@media (max-width:380px){ .wordmark{ letter-spacing:.08em; padding-left:0; } }
.lede{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,1.9vw,1.45rem);
  color:var(--ink-soft); margin:.1rem 0 .5rem; animation:rise .8s var(--ease) .1s both }
.lede-tail{ display:inline; }   /* home: phrase flows naturally */
.lede b{ font-weight:inherit; font-style:inherit; color:inherit; }   /* home: plain tagline, initials not emphasized */
.byline{ font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.6rem; animation:rise .8s var(--ease) .15s both }
.byline span{color:var(--accent)}
.standfirst{ max-width:34rem; margin:1.6rem auto 0; font-size:1.06rem; color:var(--ink-soft);
  animation:rise .8s var(--ease) .25s both }
.standfirst strong{color:var(--ink); font-weight:600}
.standfirst--sub{max-width:42rem;margin-top:.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
/* mobile-only line break inside standfirst: "An early-Lyme read" / "that avoids a false all-clear." */
.standfirst-br{ display:none; }
@media(max-width:520px){ .standfirst-br{ display:inline; } }

/* HOME HERO · deep-green immersive masthead (home only · inner pages keep the
   sticky paper bar via body:not(.v-home) .masthead). Flows seamlessly out of
   the #1f6f5c nav, deepens gently, clean shadowed edge into the paper. */
.v-home .masthead{
  position:relative;
  margin-top:0;
  padding-top:clamp(2.6rem,5.5vw,4rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  background:
    radial-gradient(62% 120% at 50% 0%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, var(--em-1) 0%, var(--em-2) 56%, var(--em-3) 100%);
  box-shadow:0 24px 50px -30px rgba(3,20,15,.6);
  border-bottom:1px solid rgba(0,0,0,.18);
}
.v-home .masthead-inner{ position:relative; z-index:1; }
/* darken the home nav bar to match the hero top so the two read as one seamless block */
/* nav color is unified to --em-1 for all routes */
.v-home .masthead .wordmark{ color:#f6f2e8; }
.v-home .masthead .lede{ color:rgba(247,243,234,.92); }
.v-home .masthead .lede b{ color:#eef6f1; }
.v-home .masthead .byline{ color:rgba(247,243,234,.66); }
.v-home .masthead .byline span{ color:#d9ede4; }
.v-home .masthead .standfirst{ color:rgba(247,243,234,.66); }
.v-home .masthead .standfirst strong{ color:#f6f2e8; }
.v-home .masthead .folio{
  color:#eaf4ef;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.26);
}
.v-home .masthead .folio:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.v-home .masthead .rule{ border-color:rgba(255,255,255,.22); }

/* ===== DEPTH PASS (home) — recessed warm ground, raised reading sheet ===== */
body.v-home{
  background:
    radial-gradient(135% 90% at 50% 0%, #e9e2d2 0%, #e3dbc9 54%, #dbd2bd 100%) !important;
}
/* the reading content lifts onto an ivory sheet tucked under the green hero */
.v-home .intro{
  position:relative; z-index:2;
  width:min(40rem, calc(100% - 1.4rem));
  margin:-1.9rem auto 2.6rem;
  padding:clamp(1.9rem,4vw,3rem) clamp(1.4rem,4vw,2.8rem) clamp(1.75rem,3.5vw,2.4rem);
  background:linear-gradient(180deg,#f8f4ec 0%,#f1ede4 100%);
  border:1px solid var(--edge-soft);
  border-radius:1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 1px 2px rgba(35,32,26,.05),
    0 34px 64px -34px rgba(35,32,26,.42),
    0 12px 26px -16px rgba(35,32,26,.26);
}
@media (max-width:620px){
  /* phones: give the green room below the standfirst, and lighten the overlap so the intro box is not
     jammed right up against the "an honest early-Lyme read" line. */
  body.v-home .masthead{ padding-bottom:3.2rem; }
  .v-home .intro{ margin-top:-1rem; }
  /* the home Listen pill rides top-right of the intro box (aligned with "Welcome to CAIRN"), not a
     lonely centered row that wastes space. */
  .v-home .intro{ position:relative; }
  .v-home .intro #cairn-listen{ position:absolute; width:auto; top:clamp(1.6rem,4vw,2.6rem); right:clamp(1.2rem,4vw,2.4rem); left:auto; margin:0; text-align:right; z-index:4; }
}
@media (min-width:52rem){ .v-home .intro{ width:min(60rem, calc(100% - 3rem)); } }
@media (min-width:64rem){ .v-home .intro{ width:min(66rem, calc(100% - 3rem)); } }
/* the state-map becomes a softly raised widget inside the sheet */
.v-home .intro-choose{
  background:#fbf8f2;
  border:1px solid var(--edge-soft);
  border-radius:1.1rem;
  padding:1.15rem 1.05rem 1rem;
  box-shadow:0 1px 2px rgba(35,32,26,.05), 0 16px 30px -22px rgba(35,32,26,.34);
}
/* quiet divider + lifted primary action */
.v-home .intro-actions{ margin-top:1.9rem; padding-top:1.6rem; border-top:1px solid var(--edge-soft); }
.v-home .btn--primary{ box-shadow:0 14px 30px -14px rgba(31,111,92,.75), 0 4px 10px -6px rgba(31,111,92,.5); }
/* carry the elevation to the ivory cards used across the other views */
.std-card, .mc-step, .area-back{
  box-shadow:0 1px 2px rgba(35,32,26,.05), 0 24px 46px -28px rgba(35,32,26,.42);
}

/* dark-emerald gate inversion lives at the END of this file so the base
   heading/kicker rules are matched first by the intent_fv regex checks. */

/* public-good contribution note (step 4) */
.contrib-note{display:flex;gap:.9rem;align-items:flex-start;background:var(--paper-2);border:1px solid var(--edge);border-left:3px solid var(--accent);border-radius:.7rem;padding:1.1rem 1.2rem;margin:0 0 1.4rem;font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.contrib-note img{flex:0 0 auto;width:24px;height:24px;object-fit:contain;background:var(--accent);border-radius:50%;padding:5px;margin-top:.1rem}
.contrib-note strong{color:var(--ink);font-weight:600}

/* certified check badge (doctor's page) */
.cert-badge{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.3rem}
.cert-badge img{width:26px;height:26px;object-fit:contain;background:var(--accent);border-radius:50%;padding:5px;box-shadow:0 3px 10px -4px rgba(39,74,92,.7)}
.cert-badge span{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.rule{border:0;height:0;margin:1.2rem auto;width:min(20rem,60%)}
.rule--double{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);height:4px;opacity:.65}

/* flow + progress ---------------------------------------------------------- */
.flow{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter) 3rem}
.progress{margin:1.5rem 0 2.5rem}
.progress ol{display:flex;justify-content:space-between;gap:.4rem;list-style:none;margin:0;padding:0;
  counter-reset:none;position:relative}
.progress li{flex:1;text-align:center;position:relative;color:var(--ink-faint);
  padding-top:1.9rem;font-size:.7rem;letter-spacing:.04em}
.progress li::before{ /* the node */
  content:"";position:absolute;top:.15rem;left:50%;transform:translateX(-50%);
  width:.62rem;height:.62rem;border-radius:50%;border:1.5px solid var(--edge);background:var(--paper) }
.progress li::after{ /* connector */
  content:"";position:absolute;top:.42rem;left:calc(50% + .5rem);width:calc(100% - 1rem);height:1.5px;background:var(--edge) }
.progress li:last-child::after{display:none}
.progress .pnum{display:block;font-family:var(--serif);font-size:.9rem;color:var(--ink-faint);position:absolute;top:.05rem;left:0;right:0;opacity:0;height:0}
.progress .plabel{display:block;font-family:var(--mono);text-transform:uppercase}
.progress li.is-active{color:var(--accent)}
.progress li.is-active::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(39,67,90,.12)}
.progress li.is-done::before{background:var(--ink);border-color:var(--ink)}
.progress li.is-done::after,.progress li.is-active::after{background:var(--ink)}

/* steps -------------------------------------------------------------------- */
.step{animation:stepIn .5s var(--ease) both}
.step[hidden]{display:none}
.step-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 .5rem}
/* We focus this heading on step entry so screen readers announce the step. It is tabindex="-1"
   (programmatic focus only, never Tab-reachable), so a visible focus ring is misleading noise, and
   Safari SELECTS a focused heading's text, which looks like the title is highlighted/"selected".
   outline:none + user-select:none kill both, across browsers, without touching the a11y announce. */
.step-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,5.5vw,2.7rem);line-height:1.08;margin:0 0 .7rem;letter-spacing:.005em;outline:none;-webkit-user-select:none;user-select:none}
.step-note{color:var(--ink-soft);margin:0 0 1.3rem;max-width:none;text-align:left;-webkit-hyphens:none;hyphens:none}

/* fields ------------------------------------------------------------------- */
.field-row{display:flex;gap:1rem;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:12rem;margin-bottom:.7rem}
.field--inline{min-width:10rem}
.field-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.field-label .unit{color:var(--accent);font-weight:700}
.control{
  appearance:none;-webkit-appearance:none;font:inherit;font-size:.92rem;color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--edge);border-radius:.55rem;
  padding:.5rem .8rem;box-shadow:inset 0 1px 2px rgba(84,72,48,.06);transition:border-color .2s,box-shadow .2s;
  width:100%;min-height:2.3rem;
}
select.control{background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.0rem,calc(100% - .7rem) 1.0rem;background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;padding-right:2.3rem}
.control--num{max-width:9rem}
.control:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(39,67,90,.14)}

/* County field · the select + "Use my location" sit on one row on wide screens, but STACK full-width on
   a phone so the county box lines up with the ZIP and State fields above it (same width, no stray narrow
   column) and the location button is a full tap target instead of a cramped half. */
.county-row{display:flex;gap:.5rem;align-items:center}
.county-row .county-select{flex:1 1 auto;min-width:0}
.county-row .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:620px){
  .county-row{flex-direction:column;align-items:stretch;gap:.45rem}
  .county-row .btn{width:100%}
}

/* fieldsets / groups ------------------------------------------------------- */
.group{border:1.5px solid var(--edge);border-radius:.9rem;background:#f6f1e6;margin:0 0 .95rem;padding:1.05rem 1.15rem .95rem;box-shadow:0 1px 0 var(--edge-soft)}
/* Question labels are LIGHT (tinted bar, dark-green text), so the user's SELECTED answers
   (solid dark-green fill) are the only strong green on the page and clearly stand out. */
.group legend{display:block;width:100%;box-sizing:border-box;font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--accent-deep);background:color-mix(in srgb, var(--accent) 9%, var(--paper-2));border:1px solid color-mix(in srgb, var(--accent) 26%, var(--edge));border-radius:.5rem;padding:.5rem .85rem;margin:0 0 .35rem;float:none}
.group--flag legend{background:color-mix(in srgb, var(--t-urgent) 9%, var(--paper-2));color:var(--t-urgent);border-color:color-mix(in srgb, var(--t-urgent) 32%, var(--edge))}
.flag-mark{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-urgent);
  border:1px solid currentColor;border-radius:2rem;padding:.2rem .5rem;margin-left:.5rem;vertical-align:middle}
.group--quiet legend{background:var(--paper-3);color:var(--ink-soft);border-color:var(--edge)}
.group--quiet{padding-top:2.6rem}
.opt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px dashed color-mix(in srgb,var(--ink-soft) 34%,var(--edge));border-radius:2rem;padding:.15rem .5rem;margin-left:.4rem}
.micro{font-size:.85rem;color:var(--ink-faint);margin:-.4rem 0 1rem}
.micro strong{color:var(--ink-soft)}

/* segmented ---------------------------------------------------------------- */
.segmented{display:flex;width:100%;border:1.5px solid var(--edge);border-radius:.6rem;overflow:hidden;background:var(--paper-2)}
.segmented label{position:relative;flex:1 1 0;min-width:0}
.segmented input{position:absolute;opacity:0;inset:0;cursor:pointer}
.segmented span{display:block;padding:.58rem .6rem;font-size:.95rem;text-align:center;cursor:pointer;border-right:1.5px solid var(--edge);transition:background .18s,color .18s}
.segmented label:last-child span{border-right:0}
.segmented input:checked+span{background:var(--accent-deep);color:#fbf7ee;font-weight:700}
/* selection is not signalled by color alone · a leading check + bolder label mark the chosen option */
.segmented input:checked+span::before{content:"\2713\00a0";font-weight:700}
.segmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.segmented--quiet input:checked+span{background:var(--ink-soft)}
.subfields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.1rem;margin-top:1rem}
.subfields .field{margin-bottom:0;min-width:0}
.subfields .control--num{max-width:100%}

/* chips -------------------------------------------------------------------- */
/* full-width option buttons that span the survey, big tap targets, never left-justified pills */
.chips{display:flex;flex-direction:column;gap:.45rem}
.chips--grouped{row-gap:.55rem}
/* a fixed 2-across grid for small option sets (e.g. the early-test question) so no single
   option (like "No") dangles alone on its own row */
.chips--grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.chips--grid2 .chip span{width:100%}
/* Two clearly-distinct sub-questions inside the urgent-signs group. Prominent headers plus a
   divider before the second so "Heart or breathing" and "Nerves or brain" never blur together. */
.chip-group-label{flex-basis:100%;margin:1.15rem 0 .35rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--t-urgent);font-weight:700;padding-top:.95rem;border-top:1.5px solid color-mix(in srgb, var(--t-urgent) 30%, var(--edge))}
.chip-group-label:first-child{margin-top:0;padding-top:0;border-top:0}
.chip{position:relative;width:100%}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:flex;width:100%;align-items:center;justify-content:center;min-height:42px;padding:.5rem 1.1rem;border:1.5px solid var(--edge);border-radius:.85rem;background:var(--paper-2);
  font-size:1rem;cursor:pointer;transition:all .16s;user-select:none}
.chip input:checked+span{background:var(--accent-deep);border-color:var(--accent-deep);color:#fbf7ee;font-weight:700}
/* not color alone · a leading check marks a chosen chip */
.chip input:checked+span::before{content:"\2713\00a0";font-weight:700}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chip--flag input:checked+span{background:var(--t-urgent);border-color:var(--t-urgent)}
.chip--flag span:hover{border-color:var(--t-urgent)}

/* wide checkbox rows ------------------------------------------------------- */
.check{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;padding:.5rem 0}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{flex:0 0 auto;width:1.25rem;height:1.25rem;border:1.5px solid var(--edge);border-radius:.35rem;background:var(--paper-2);margin-top:.1rem;position:relative;transition:all .16s}
.check input:checked+.box{background:var(--accent-deep);border-color:var(--accent-deep)}
.check input:checked+.box::after{content:"";position:absolute;left:.38rem;top:.13rem;width:.32rem;height:.62rem;border:solid #fbf7ee;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
.check-body{display:flex;flex-direction:column;gap:.1rem}
.check-body strong{font-weight:600;font-size:.9rem}
.check-body em{font-style:normal;font-size:.78rem;color:var(--ink-faint)}
.check--wide{border-top:1px solid var(--edge-soft)}
.check--wide:first-of-type{border-top:0}

/* buttons ------------------------------------------------------------------ */
.step-actions{display:flex;margin-top:1.6rem}
.step-actions--split{justify-content:space-between;gap:1rem}
/* flow buttons (landing Begin · steps · review · consent) all share one tasteful size */
.step-actions .btn,.consent .btn,.review .btn,#skipIntro{padding:.55rem 1.25rem;min-height:2.6rem;font-size:.92rem;border-radius:.6rem}
/* ONE button height across the whole site (parity). btn--sm is the only smaller variant (inline). */
.btn{font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;border:1.5px solid transparent;border-radius:.6rem;
  padding:.55rem 1.25rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;transition:all .18s var(--ease);min-height:2.6rem}
.btn--primary{background:var(--accent-deep);color:#fbf7ee;box-shadow:0 10px 24px -14px rgba(21,76,60,.6)}
.btn--primary:hover{background:color-mix(in srgb, var(--accent-deep) 86%, var(--accent));transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(21,76,60,.72)}
.btn--ghost{background:transparent;color:var(--ink-soft);border-color:transparent}
.btn--ghost:hover{color:var(--ink);background:var(--paper-2)}
.btn--outline{background:transparent;color:var(--accent);border-color:var(--edge)}
.btn--outline:hover{border-color:var(--accent);background:var(--paper-2)}
.btn:focus-visible{outline:3px solid rgba(39,67,90,.35);outline-offset:2px}
.btn-arrow{transition:transform .2s}
.btn--primary:hover .btn-arrow{transform:translateX(3px)}
.btn--ghost:hover .btn-arrow--back{transform:translateX(-3px)}

/* ============================ THE READ (result) ========================== */
.result{margin-top:.5rem}
.verdict{border:1.5px solid var(--edge);border-radius:1rem;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow);animation:rise .6s var(--ease) both}
.verdict-band{padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fbf7ee;font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.16)}
.verdict-band span:last-child{font-weight:700}
.verdict-body{padding:1.7rem clamp(1.2rem,4vw,2.2rem) 1.9rem}
.tier-stamp{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  border:1.5px solid currentColor;border-radius:.4rem;padding:.4rem .8rem;transform:rotate(-1.5deg);margin-bottom:1.1rem}
.verdict-statement{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.12;font-weight:600;margin:0 0 .6rem;color:var(--ink)}
.verdict-sub{color:var(--ink-soft);margin:0}
/* Plain, body-size (not fine print) reminder right under the verdict headline. Neutral, never an alert color. */
.verdict-not-test{margin:0 0 .6rem;font-size:1rem;line-height:1.5;font-weight:600;color:var(--ink-soft)}
.verdict-mini-legal{margin:.5rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-faint);font-style:italic}
/* "Where this advice comes from" · a closed drawer so the care next-step is not pushed off-screen */
.cert-where{margin:1.4rem clamp(1.2rem,4vw,2.2rem);border:1px solid var(--edge);border-radius:.7rem;background:var(--paper-2);overflow:hidden}
.cert-where>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.05rem;font-size:.92rem;font-weight:600;color:var(--accent)}
.cert-where>summary::-webkit-details-marker{display:none}
.cert-where>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cert-where[open]>summary{border-bottom:1px solid var(--edge)}
.cert-where[open] .disclose-caret{transform:rotate(180deg)}
.cert-where-body{padding:.4rem 1.05rem 1rem}
/* County context · quiet, neutral, collapsed, BELOW the verdict card. Never the verdict's alert palette. */
.area-panel{margin:1.2rem 0 0;border:1px solid var(--edge);border-radius:.7rem;background:var(--paper-2);overflow:hidden;color:var(--ink-soft)}
.area-panel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.05rem;color:var(--ink-soft)}
.area-panel>summary::-webkit-details-marker{display:none}
.area-panel>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.area-panel[open]>summary{border-bottom:1px solid var(--edge)}
.area-panel[open] .disclose-caret{transform:rotate(180deg)}
.area-panel-title{font-size:.98rem;font-weight:600}
.area-panel-note{margin:.6rem 1.05rem 0;font-size:.85rem;line-height:1.5;color:var(--ink-faint)}
.area-panel .cert-exposure{background:transparent;border:0}

/* tier accents */
.t-urgent .verdict-band{background:var(--t-urgent)} .t-urgent .tier-stamp{color:var(--t-urgent)}
.t-escalate .verdict-band{background:var(--t-escalate)} .t-escalate .tier-stamp{color:var(--t-escalate)}
.t-elevated_watch .verdict-band{background:var(--t-watch)} .t-elevated_watch .tier-stamp{color:var(--t-watch)}
.t-not_elevated .verdict-band{background:var(--t-low)} .t-not_elevated .tier-stamp{color:var(--t-low)}

/* Mobile: the verdict band's long uppercase label (e.g. "NOT CURRENTLY ELEVATED") forced the card
   wider than the viewport (right-edge clipping + the "resizes narrow / have to zoom out" report).
   Ease the letter-spacing + side padding so the label fits one row, and shrink the headline floor
   so a short verdict fits on one line. */
@media (max-width:34rem){
  /* let the band wrap + shrink instead of forcing the card wider than the phone screen;
     a touch more side padding so the tier label doesn't jut against the band's edge on mobile */
  .verdict-band{padding:.6rem 1.05rem;letter-spacing:.1em;font-size:.6rem;gap:.35rem .7rem;flex-wrap:wrap}
  .verdict-band span{min-width:0}
  .verdict-band span:last-child{text-align:right}
  .verdict-statement{font-size:clamp(1.35rem,6vw,1.9rem)}
  /* the report footer (verification code + by-line) reads better centered on a narrow screen */
  .cert-foot{justify-content:center;text-align:center}
  .cert-verify{justify-content:center}
}

/* findings (cited drivers) */
.findings{margin:1.8rem 0 0}
.findings h3,.panel h3,.note h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem;font-weight:500}
.finding{padding:1rem 0;border-top:1px solid var(--edge-soft)}
.finding:first-of-type{border-top:0;padding-top:.3rem}
.finding-why{margin:0 0 .5rem;color:var(--ink)}
.finding-basis{display:flex;gap:.6rem;font-size:.82rem;color:var(--ink-faint);font-family:var(--mono);line-height:1.5}
.finding-basis::before{content:"§";color:var(--brass);flex:0 0 auto}

/* local context data panel */
.panel{margin:1.8rem 0 0;background:var(--paper-3);border:1px solid var(--edge);border-radius:.8rem;padding:1.4rem}
.datagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:1.1rem;margin:0 0 1rem}
.datum{border-left:2px solid var(--accent);padding-left:.8rem}
.datum-n{font-family:var(--serif);font-size:1.7rem;font-weight:600;line-height:1;color:var(--ink);display:block}
.datum-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:.35rem;display:block}
.panel-context{font-size:.9rem;color:var(--ink-soft);margin:.4rem 0 0}

/* caveat note */
.note{margin:1.6rem 0 0;border:1.5px solid var(--edge);border-left:3px solid var(--brass);border-radius:.6rem;padding:1.3rem 1.4rem;background:var(--paper-2)}
.note h3{color:var(--brass)}
.note p{margin:.2rem 0 0;color:var(--ink)}
.note p+p{margin-top:.7rem;color:var(--ink-soft);font-size:.92rem}
.sources{margin:1.4rem 0 0;font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);line-height:1.6}
.sources b{color:var(--ink-soft);letter-spacing:.1em}

/* ============================ doctor's page =============================== */
.summary{border:0;background:transparent;padding:0;box-shadow:none}
.summary h3{font-family:var(--serif);font-size:1.5rem;margin:0 0 .2rem}
.summary .sum-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.2rem}
.summary .sum-verdict{font-family:var(--serif);font-size:1.2rem;font-weight:600;border-left:3px solid var(--accent);padding-left:.9rem;margin:1.2rem 0}
.summary h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:1.4rem 0 .6rem}
.summary ul{margin:0;padding-left:1.1rem}
.summary li{margin:.4rem 0}
.summary .cite{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint)}
.summary .sum-fine{font-size:.8rem;color:var(--ink-faint);border-top:1px solid var(--edge);margin-top:1.4rem;padding-top:1rem}

.handoff{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 1.4rem}
.consent{display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;background:var(--paper-2);border:1px dashed var(--edge);border-radius:.7rem;padding:1.1rem 1.2rem}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent .box{flex:0 0 auto;width:1.4rem;height:1.4rem;border:1.5px solid var(--edge);border-radius:.35rem;background:var(--paper);margin-top:.1rem;position:relative;transition:all .16s}
.consent input:checked+.box{background:var(--accent);border-color:var(--accent)}
.consent input:checked+.box::after{content:"";position:absolute;left:.42rem;top:.16rem;width:.35rem;height:.7rem;border:solid #fbf7ee;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
.consent-body{display:flex;flex-direction:column;gap:.2rem}
.consent-body em{font-style:normal;font-size:.83rem;color:var(--ink-faint)}
.toast{margin:.6rem 0 0;font-size:.85rem;color:var(--accent);font-family:var(--mono)}

/* ============================ colophon + seal ============================ */
.colophon{max-width:72rem;margin:2rem auto 0;padding:2.5rem var(--gutter) 2.4rem;border-top:1px solid var(--edge);text-align:center}
.seal{position:relative;width:118px;height:118px;margin:0 auto 1.6rem;display:flex;align-items:center;justify-content:center}
.seal-rings{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
@media (prefers-reduced-motion: reduce){.seal-rings{animation:none}}
.seal-ring{fill:none;stroke:var(--accent);stroke-width:1.5}
.seal-ring--thin{stroke:var(--brass);stroke-width:.7}
.seal-text{font-family:var(--mono);font-size:8.1px;letter-spacing:2.4px;fill:var(--accent);text-transform:uppercase}
.seal-core{position:relative;width:66px;height:66px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -6px rgba(39,74,92,.7)}
.seal-core img{width:88%;height:88%;object-fit:contain;display:block}
.assurances{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.fineprint{font-size:.8rem;color:var(--ink-faint);max-width:34rem;margin:.6rem auto 0}
.fineprint strong{color:var(--ink-soft)}
.fineprint--quiet{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;margin-top:1.4rem}

/* links */
.byline-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.byline-link:hover span,.byline-link:focus-visible span{color:var(--accent-2)}
.byline-link:hover{border-bottom-color:var(--accent)}
.foot-link{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(39,74,92,.32);white-space:nowrap;transition:border-color .2s,color .2s}
.foot-link:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)}
.fineprint--quiet{line-height:2}

/* privacy & data panel (standard-site policy, toggled from the footer line) */
.policy-panel{max-width:34rem;margin:1.4rem auto 0;text-align:left;border-top:1px solid var(--edge);padding-top:1.2rem;font-size:.87rem;color:var(--ink-soft);line-height:1.58;animation:rise .4s var(--ease) both}
.policy-panel[hidden]{display:none}
.policy-panel h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);margin:0 0 .35rem}
.policy-panel h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:1.5rem 0 .5rem}
.policy-eff{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 .4rem!important}
.policy-panel p{margin:0 0 .8rem;text-align:left;-webkit-hyphens:none;hyphens:none}
.policy-panel strong{color:var(--ink);font-weight:600}
.policy-panel em{font-style:italic;color:var(--ink)}
/* footer Privacy toggle · caret shows open/close */
.foot-toggle{display:inline-flex;align-items:center;gap:.3rem;border-bottom:0}
.foot-caret{font-size:.6rem;color:var(--brass);transition:transform .2s ease}
.foot-toggle[aria-expanded="true"] .foot-caret{transform:rotate(180deg)}
.policy-meta{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);letter-spacing:.03em;border-top:1px solid var(--edge-soft);padding-top:.8rem;margin-top:1rem}

/* first-party cookie consent · tasteful floating card that slides up */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:9997;max-width:31rem;margin:0 auto;
  background:var(--paper);border:1px solid var(--edge);border-radius:.85rem;
  box-shadow:0 16px 40px -24px rgba(34,32,27,.5),0 2px 0 var(--edge-soft);
  padding:.8rem 1rem;animation:cookieUp .5s var(--ease) both}
.cookie-banner[hidden]{display:none}
.cookie-inner{display:flex;gap:.5rem .9rem;align-items:center;flex-wrap:wrap}
.cookie-text{flex:1 1 14rem;min-width:0}
.cookie-title{font-family:var(--serif);font-size:.92rem;font-weight:600;color:var(--ink);margin:0 0 .12rem}
.cookie-copy{font-size:.78rem;line-height:1.45;color:var(--ink-soft);margin:0}
.cookie-actions{display:flex;gap:.5rem;flex:0 0 auto;margin-left:auto}
.cookie-actions .btn{padding:.46rem 1.1rem;min-height:2.6rem;font-size:.83rem}
@keyframes cookieUp{from{transform:translateY(1.4rem);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .cookie-banner{animation:none}}
@media (max-width:34rem){
  /* Mobile: a compact bottom sheet, never a slab that buries the page on first load. Cap the height and
     scroll inside, so the content above (the hero) stays visible and the page never reads as "not loaded". */
  .cookie-banner{ left:.5rem; right:.5rem; bottom:.5rem; padding:.95rem 1.05rem; max-height:72vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .cookie-inner{ gap:.7rem .9rem; }
  .cookie-title{ font-size:.98rem; }
  .cookie-copy{ font-size:.8rem; line-height:1.45; }
  .cookie-actions{ width:100%; margin-left:0; }
  .cookie-actions .btn{ flex:1; justify-content:center; }}

/* ============================ motion ===================================== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ print (doctor's page) ====================== */
@media print{
  @page{ size:letter; margin:0.55in }
  .paper-grain,.vignette,.masthead,.progress,.step-actions,.handoff,.cert-actions,.share,.fhir-link,.cookie-banner,.contrib-note,.colophon,.policy-panel,#intro,#consent,.skip,.toast,.map,.learn,.timeline-cta,.learn-cta,.learn-cta-btn,.page-next,.trust-banner{display:none!important}
  html,body{background:#fff;color:#000}
  body{font-size:10pt}
  .flow{max-width:100%;padding:0;margin:0}
  .step[hidden]{display:none}
  #step-3{display:block!important}
  .step-kicker,.step-title{display:none}
  .result{margin:0}
  .cert{border:1px solid #999;box-shadow:none;background:#fff;padding:.5rem .8rem}
  .cert-head{margin:0 0 .5rem}
  .cert-seal{width:40px;height:40px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cert-title{font-size:15pt}
  .cert .sum-meta{font-size:8pt;margin:.1rem 0 0}
  .verdict-band{-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:.35rem .8rem;font-size:8pt}
  .cert .verdict-band{margin:.2rem 0 .5rem}
  .cert .verdict-statement{font-size:15pt;margin:0 0 .25rem}
  .cert .verdict-sub{font-size:9pt;margin:0 0 .6rem}
  .cert-disclaimer{font-size:7.5pt;line-height:1.35;padding:.4rem 0;margin:0 0 .5rem}
  .cert-note{padding:.45rem .7rem;margin:0 0 .6rem}
  .cert h4{font-size:7pt;margin:.5rem 0 .2rem}
  .cert ul{padding-left:1rem}
  .cert li{font-size:8.5pt;margin:.12rem 0}
  .cert .cite{font-size:7.5pt}
  .cert-line{font-size:8.5pt}
  .cert-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
  .cert-cols>section,.cert>section{border-top:0;margin-top:.4rem;padding-top:0}
  .cert-foot{margin-top:.5rem;padding-top:.4rem;font-size:7.5pt}
  .cert-verify img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cert-prov{font-size:6.5pt;margin-top:.35rem}
}

/* ============================ small screens ============================== */
@media (max-width:34rem){
  .progress .plabel{font-size:.56rem;letter-spacing:0}
  .field-row{flex-direction:column;gap:0}
  .field{min-width:0}
  .subfields{grid-template-columns:1fr;gap:1rem}
  .segmented span{padding:.8rem .4rem;font-size:.9rem}
  .chips{flex-direction:column;gap:.5rem}                                  /* one option per row, full-width */
  .chips--grid2{display:flex;flex-direction:column;gap:.5rem}              /* stack the 2-col grid on phones too */
  .chip{width:100%}
  .chip span{display:block;padding:.8rem 1rem;font-size:.95rem;text-align:center}   /* uniform, centered buttons */
  .step-actions--split{flex-direction:column-reverse;gap:.6rem}
  .step-actions--split .btn{width:100%;justify-content:center}
  .step-actions--center{flex-direction:column;gap:.6rem}
  .step-actions--center .btn{width:100%;min-width:0}
  .datagrid{grid-template-columns:1fr 1fr}
  .handoff .btn{width:100%;justify-content:center}
}

/* ============================ risk map (tile cartogram) ================== */
.map{margin:1.4rem 0 0;position:relative}
.map-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:.28rem;max-width:32rem}
/* fixed readout in the map's empty top-center (between AK and ME) · the hover detail always shows here,
   one spot, one format, justified, never floating over the tiles */
/* Fixed-size bar (never reflows the content below when the hover text changes), full map width. */
.map-readout{max-width:32rem;width:100%;margin:.85rem auto 0;height:2.8rem;box-sizing:border-box;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;-webkit-hyphens:none;hyphens:none;
  padding:.4rem .9rem;font-size:.82rem;line-height:1.35;color:var(--ink-soft);
  background:transparent;border:none;border-radius:.6rem;
  transition:color .15s,border-color .15s,background .15s;}
.map-readout.is-active{color:var(--ink);font-weight:500;border-color:color-mix(in srgb,var(--accent) 34%,var(--edge));background:color-mix(in srgb,var(--accent) 8%,var(--paper));}
.intro-map .map-readout{max-width:34rem;}
@media (max-width:34rem){ .map-readout{margin-top:.7rem;font-size:.78rem;height:4.4rem} }
.tile{position:relative;aspect-ratio:1;border-radius:.28rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.02em;color:#fbf7ee;background:var(--paper-3);
  border:1px solid transparent;transition:transform .12s}
.tile[data-b="low"]{background:#c9bfa6;color:var(--ink-soft)}
.tile[data-b="moderate"]{background:#8a9aa0;color:#fbf7ee}
.tile[data-b="high"]{background:var(--accent);color:#fbf7ee}
/* no reported cases · empty tile, paper fill with a tan outline (distinct from solid Minimal tan) */
.tile[data-b="none"]{background:var(--paper);color:color-mix(in srgb,var(--ink-faint) 72%,transparent);box-shadow:inset 0 0 0 1.6px #c2b79c}
.tile.is-you{outline:2.5px solid var(--brass);outline-offset:1px;z-index:2;transform:scale(1.06);box-shadow:0 4px 12px -4px rgba(34,32,27,.5)}
.tile.is-you::after{content:"";position:absolute;inset:-6px;border:1px solid var(--brass);border-radius:.4rem;opacity:.5}
.map-legend{display:flex;flex-wrap:nowrap;justify-content:center;gap:.3rem .7rem;margin:1rem 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.map-legend b{display:inline-flex;align-items:center;gap:.3rem;font-weight:400;white-space:nowrap}
.map-legend i{width:.72rem;height:.72rem;border-radius:.2rem;display:inline-block;box-shadow:inset 0 0 0 1px rgba(35,32,26,.12);flex:0 0 auto}
@media(max-width:400px){.map-legend{font-size:.52rem;gap:.25rem .45rem}.map-legend i{width:.6rem;height:.6rem}}
.map-cap{font-size:.8rem;color:var(--ink-soft);margin:.9rem 0 0;text-align:left;text-align-last:left;-webkit-hyphens:none;hyphens:none}
@media (max-width:34rem){ .map-grid{gap:.22rem} .tile{font-size:.5rem;border-radius:.2rem}}

/* ============================ intro / landing =========================== */
.intro{max-width:var(--measure);margin:0 auto;padding:1rem var(--gutter) 2rem;animation:rise .8s var(--ease) .3s both}
.intro-h{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.12;letter-spacing:.005em;margin:.3rem 0 1.2rem}
.intro-copy{max-width:34rem}
.intro-copy p{font-size:.95rem;color:var(--ink-soft);margin:0 0 1.1rem}
.intro-copy em{font-style:italic;color:var(--ink)}
.intro-copy strong{color:var(--ink);font-weight:600}
.intro-prompt{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:.3rem 0 1rem;text-align:center}
.intro-prompt span{color:var(--ink-faint);letter-spacing:.06em;text-transform:none;font-size:.72rem}
.intro-map{display:flex;flex-direction:column;align-items:center}
.intro-map .map{margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.intro-map .map-grid{max-width:36rem;width:100%;gap:.34rem}
.intro-map .map-legend{justify-content:center;text-align:center;width:100%;max-width:36rem}
.intro-map .map-cap{width:100%;max-width:36rem}   /* caption justifies (inherits .map-cap), legend stays centered */
.map-loading{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--ink-faint);text-align:center;padding:3rem 0}
/* button loading spinner · shown while the on-device read is warming up so a slow phone isn't blank */
.btn-spinner{display:inline-block;width:1em;height:1em;margin-right:.5em;vertical-align:-0.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn[aria-busy="true"]{opacity:.85;cursor:progress}
.clear-phone-note{font-size:.9rem;line-height:1.5;color:var(--ink-faint);text-align:center;max-width:34rem;margin:.6rem auto 0}
.intro-actions{display:flex;justify-content:center;margin-top:1.8rem}

/* interactive picker tiles */
.tile--btn{font-family:var(--mono);appearance:none;cursor:pointer;border:1px solid rgba(34,32,27,.06);padding:0}
.map-grid--pick .tile{font-size:.62rem}
.tile--btn:hover{transform:scale(1.12);z-index:3;box-shadow:0 6px 16px -6px rgba(34,32,27,.55);border-color:var(--ink)}
.tile--btn:focus-visible{outline:2.5px solid var(--brass);outline-offset:2px;z-index:3}
@media (max-width:34rem){ .map-grid--pick .tile{font-size:.52rem} .intro-map .map-grid{gap:.26rem}}
/* mobile map: KEEP the cartogram tiles SQUARE (aspect-ratio:1). An 11-column grid can't be 44px
   wide on a phone, and forcing min-height distorted every tile into a tall rectangle (the broken
   map). We keep tiles square + legible; state selection also has the dropdown as the primary path,
   so a small tile is fine and a mis-tap just pre-fills a state you can change on the next screen. */
@media (max-width:560px){
  .map-grid--pick .tile,.tile--btn{min-height:0;font-size:.6rem;padding:0}
  /* consent checkbox meets the 44px touch target so an anxious/shaky tap lands */
  .consent-ack .box{width:1.75rem;height:1.75rem}
  .consent-ack{min-height:44px;align-items:flex-start}
}

/* ---- mobile polish · orphans, popup, overflow, nav top-right ---- */
.wordmark,.lede,.intro-h,.standfirst,.step-kicker,.consent-h,.page-h,h2,h3{ text-wrap:balance; }
/* GREEDY wrap for ALL body prose (web + mobile): every line fills to the edge, so each paragraph has the
   same left AND right column boundary as the one above it. text-wrap:pretty/balance was shrinking some
   blocks narrower than others (e.g. the homepage 'CAIRN is free' paragraph vs the one above it), which
   read as mismatched, non-equidistant columns. Headings keep balance (they're short and centered). */
.intro-copy p,.page-lede,.about-block p,.standfirst--sub,.cookie-copy{ text-wrap:wrap; }
.page p, .page li, .mc-block p, .mc-hero-sub, .mc-perf-n, .mc-callout p, .mc-define p, .mc-step p,
.algo-sub, .algo-body p, .learn-panel, .learn-intro p, .learn-tip p, .learn-callout p, .learn-testing p,
.policy-panel p, .cert-sources-lede, .exp-explain, .exp-care, .asm-what, .data-open, .cov-sub, .mc-tbl-sub,
.impact-equity p, .community-close-lead, .about-quote p{ text-wrap:wrap; }
/* IN A BOX/CARD, body text uses GREEDY wrap (fills each line to the edge) so the text column sits
   equidistant from both box walls. text-wrap:pretty/balance was shrinking some blocks narrower than
   their box, which read as uneven column widths. Applies on web and mobile. */
.mc-perf-n, .mc-perf-k, .mc-stat-k, .mc-stat-t, .isd-note, .isd-spend-k, .sig-t, .dc-desc,
.cov-stat .cov-n, .cov-stat .cov-k, .cov-fall .fn, .cov-fall .ft, .mc-flow-card .s, .mc-flow-card .t,
.eq-finding-stat, .eq-finding-cite, .asm-what, .learn-tip p, .cert-reasons li, .verdict-care .verdict-quote,
.cert .verdict-statement{ text-wrap:wrap; }
@media (max-width:560px){
  .field,.field--inline{ min-width:0; }              /* survey fields never force horizontal overflow */
  .sitenav-share{ width:2.4rem; height:2.4rem; }     /* clean touch target, clear of the menu button */
  .sitenav-toggle{ padding:.6rem .4rem; }}
@media (max-width:34rem){
  /* the consent popup read as a big card; make it a slim, calm bottom sheet */
  .cookie-banner{ left:.6rem; right:.6rem; bottom:.6rem; padding:.8rem .9rem; border-radius:.8rem; }
  .cookie-inner{ gap:.55rem .8rem; }
  .cookie-seal{ width:30px; height:30px; } .cookie-seal img{ width:16px; height:16px; }
  .cookie-title{ font-size:.95rem; }
  .cookie-copy{ font-size:.78rem; line-height:1.45; }
  .cookie-actions .btn{ min-height:2.6rem; padding:.5rem .9rem; font-size:.85rem; }}

.intro-body{display:block}
.btn--sm{padding:.5rem 1rem;min-height:2.6rem;font-size:.85rem}

/* ============================ desktop / wide browser ==================== */
@media (min-width:48rem){
  :root{ --measure:42rem }
  body{font-size:clamp(1.03rem,.98rem + .25vw,1.16rem)}
  .masthead{padding-top:clamp(3.5rem,7vw,6rem)}
  .step-actions{margin-top:1.8rem}
}
@media (min-width:56rem){
  .intro{max-width:60rem}
  .intro-h{font-size:clamp(1.9rem,5vw,2.6rem);max-width:18ch}
  /* stretch both columns to one shared height so the map card is flush with the text
     top AND bottom (no gap under the copy or above the map); center the map inside the
     card so the state grid sits balanced rather than jammed to the top. */
  .intro-body{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.2rem;align-items:stretch}
  .intro-copy{max-width:none;display:flex;flex-direction:column;justify-content:center}
  .intro-copy p{font-size:.95rem}
  .intro-choose{display:flex;flex-direction:column;justify-content:center}
  .intro-prompt{text-align:left;margin:0 0 1.1rem}
  .intro-map,.intro-map .map{align-items:stretch}
  .intro-map .map-grid,.intro-map .map-legend,.intro-map .map-cap{margin-inline:0;max-width:none;text-align:left;justify-content:flex-start}
  .intro-actions{justify-content:center}}
@media (min-width:70rem){
  .intro{max-width:66rem}}


/* togglable +/- steppers */
.stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--edge);border-radius:.55rem;overflow:hidden;background:var(--paper-2);max-width:10rem}
.step-btn{font:inherit;font-size:1.05rem;line-height:1;border:0;background:transparent;color:var(--accent);width:2.1rem;min-width:30px;min-height:2.3rem;cursor:pointer;transition:background .15s;padding:0}
.step-btn:hover{background:var(--paper-3)}
.step-btn:active{background:var(--edge)}
.step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.stepper-val{font:inherit;font-size:.92rem;text-align:center;color:var(--ink);border:0;border-left:1.5px solid var(--edge);border-right:1.5px solid var(--edge);background:transparent;width:4.4rem;padding:.4rem .2rem;-moz-appearance:textfield;min-width:0}
.stepper-val::-webkit-outer-spin-button,.stepper-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-val:focus-visible{outline:none;background:var(--paper-3)}
.stepper-val::placeholder{color:var(--ink-faint);font-style:normal;font-size:.8rem;letter-spacing:.02em}
.stepper{max-width:9.5rem}
.tick-hint{font-size:.8rem;color:var(--ink-faint);margin:.7rem 0 0}
.tick-hint b{color:var(--accent);font-weight:600}

/* review / confirm step */
.review{animation:rise .4s var(--ease) both}
.review-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 1rem}
.rev-list{margin:0 0 1.1rem;border:1.5px solid var(--edge);border-radius:.8rem;overflow:hidden;background:var(--paper-2)}
.rev-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1rem;border-top:1px solid var(--edge-soft)}
.rev-row:first-child{border-top:0}
.rev-row dt{color:var(--ink-soft);font-size:.9rem}
.rev-row dd{margin:0;font-weight:600;text-align:right}
.rev-blank{color:var(--ink-faint);font-weight:400}
.review-note{font-size:.85rem;color:var(--ink-faint);margin:0 0 1.4rem}
.btn--full{width:100%;justify-content:center}


/* ============================ wordmark home + cards ===================== */
.wordmark{cursor:pointer}
.wordmark:hover{color:var(--accent-2)}
.wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:.3rem}
.group--flag{border-color:#e3cbc4}
.btn--wide{min-width:14rem;justify-content:center}
.intro-actions{display:flex;justify-content:center}

/* ============================ certificate =============================== */
.cert{border:1.5px solid var(--edge);border-radius:1rem;background:#fbf7ee;box-shadow:var(--shadow);padding:clamp(1.5rem,4vw,2.5rem);position:relative}
.cert-head{display:block;margin:0 0 1.1rem}
.cert-head-main{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0 0 .55rem}
.cert-seal{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -6px rgba(39,74,92,.7)}
.cert-seal img{width:88%;height:88%;object-fit:contain}
.cert-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 .3rem;opacity:.9}
.cert-title{font-family:var(--serif);font-size:1.7rem;font-weight:600;margin:0;letter-spacing:.01em;line-height:1.1;color:var(--ink)}
/* one-line meta strip: date · period · code — no stacking, no "Read date:" labels */
.cert-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .55rem;margin-top:.48rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;color:var(--ink-faint);line-height:1.5}
.cert-meta-sep{display:inline-flex;width:3px;height:3px;border-radius:50%;
  background:color-mix(in srgb,var(--edge) 90%,var(--ink-faint));margin:0;flex:0 0 auto;align-self:center}
.cert-meta-date{color:var(--ink-soft);font-weight:600;letter-spacing:.04em}
.cert-meta-period{color:var(--ink-faint);letter-spacing:.04em}
.cert-meta-code{letter-spacing:.1em;color:color-mix(in srgb,var(--ink-faint) 65%,var(--edge));font-size:.6rem}
/* legacy classes — keep so old saved HTML doesn't break if reloaded */
.cert .sum-meta{margin:.7rem 0 0;font-weight:600;color:var(--ink)}
.cert .sum-date,.cert .sum-period,.cert .sum-code{display:none}
.cert-disclaimer{font-family:var(--serif);font-style:italic;font-size:.9rem;line-height:1.6;color:var(--ink-soft);border-top:1px solid var(--edge);padding:1.2rem 0 0;margin:1.4rem 0 0}
.cert .sum-verdict{font-family:var(--serif);font-size:1.35rem;font-weight:600;border-left:3px solid var(--accent);padding-left:.9rem;margin:0 0 1.5rem;color:var(--ink)}
.cert .sum-verdict span{font-weight:400;color:var(--ink-soft);font-size:1rem}
.cert-cols{display:block;margin-top:2.1rem}
.cert h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:1.3rem 0 .55rem}
.cert-cols>section>h4{margin-top:0}
.cert ul{margin:0;padding-left:1.1rem}
.cert li{margin:.35rem 0}
.cert .cite{font-family:var(--mono);font-size:.76rem;color:var(--ink-faint)}
.cert-line{margin:0;color:var(--ink-soft)}
.cert-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;align-items:center;border-top:1px solid var(--edge);margin-top:1.4rem;padding-top:1.2rem}
.cert-by{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ============================ footer legal note ========================= */
.legal-note{max-width:70rem;margin:.6rem auto 0;text-align:center;opacity:.7;font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.62;color:var(--ink-soft)}
/* AI-photo colophon sits under the footer disclaimer, but ONLY on the Prevention page (the only page with AI photos) */
.legal-note-ai{display:none;max-width:70rem;margin:.6rem auto .4rem;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
body[data-view="prevention"] .legal-note-ai{display:block}
.legal-note span{display:block}   /* two centered rows on web, one statement each */
.legal-note strong{font-style:normal;color:var(--ink);font-weight:600}

/* ============================ share ===================================== */
.share{margin:1.8rem 0 0;text-align:center}
.share-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.share-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.85rem 0 .5rem}
.share-btn{font:inherit;font-size:.9rem;cursor:pointer;border:1.5px solid var(--edge);background:var(--paper-2);color:var(--accent);border-radius:2rem;padding:.55rem 1.25rem;text-decoration:none;transition:all .15s}
.share-btn:hover{border-color:var(--accent);background:var(--paper-3)}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share-note{font-size:.8rem;color:var(--ink-faint);margin:.5rem 0 0}
.fhir-link{text-align:center;font-size:.82rem;margin:1.3rem 0 0;color:var(--ink-faint)}

/* justified body text */
.intro-copy p,.policy-panel p,.cert-disclaimer,.disclose-body p,.consent-points li span:last-child,.consent-lede,.cert-note p,.cert-line,.verdict-sub{text-align:left;-webkit-hyphens:none;hyphens:none}

/* legend pills visible on the solid bars + optional demographics */
.group--flag legend .flag-mark{color:#fbf7ee;border-color:rgba(251,247,238,.55)}
.group legend .opt{color:#fbf7ee;border-color:rgba(251,247,238,.5)}
.demo-grid{display:grid;gap:1.15rem}
.demo-grid .field{margin-bottom:0;min-width:0}
.micro-quiet{font-size:.82rem;color:var(--ink-faint);font-style:italic;margin:1rem 0 0;text-align:left;text-align-last:left}
.micro-link{ color:var(--accent); text-decoration:underline; font-weight:600; font-style:normal; }
/* short callouts read left-aligned (justify stretches a 2-line note into gappy word-spaces) */
.when-context, .tick-hint{ text-align:left; -webkit-hyphens:none; hyphens:none; }
/* the not-sure line: site serif, small, one row (was inheriting a large sans) */
.tick-status{ width:100%; font-family:var(--serif); font-size:.92rem; line-height:1.5; color:var(--ink-soft); margin:.55rem 0 .2rem; }
.tick-hint{ font-family:var(--serif); font-size:.85rem; color:var(--ink-soft); }
/* inline link inside quiet microcopy · underlined, same color, not bold */
.inline-link{ color:inherit; text-decoration:underline; font-weight:inherit; }
/* About-you Age dropdown matches the Female/Male/Skip segmented boxes (height + font) */
.demo-grid select.control{ min-height:2.3rem; font-size:.95rem; padding:.5rem 2.3rem .5rem .6rem; background-position:calc(100% - 1.1rem) 1.0rem,calc(100% - .7rem) 1.0rem; }
/* assembly reveal · state-fallback invite row (no ✓ check, muted) */
.asm-row--invite{ opacity:.85; }
.asm-check-add{ color:var(--accent); font-weight:700; }
@media (min-width:36rem){ .demo-grid{grid-template-columns:1fr 12rem;align-items:end}}

/* cert spacing + dividers */
.cert .verdict-band{border-radius:0;margin:0}
.cert .verdict-statement{margin:0 0 1rem}

/* Listen control: the SAME pill on EVERY page, centered directly under the page header. Hero pages center
   it under the hero; the read centers it right under the CAIRN Summary. Consistent, never disjoint. */
.cert-listen-host:empty{display:none}
/* Listen pill sits top-right, vertically centered across from the CAIRN Read title (web + mobile). */
.cert-headtext{min-width:0}
.cert-head-main > .cert-listen-host{flex:0 0 auto}
.cert-head-main > .cert-listen-host #cairn-listen{display:inline-flex;width:auto;margin:0}
/* Read page · one clean link out to the full Model Card (replaces the inline collapsibles). */
.cert-model-link{display:flex;justify-content:center;align-items:center;gap:.3rem;width:fit-content;margin:.7rem auto 1.4rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;font-weight:600}
.cert-model-link:hover,.cert-model-link:focus-visible{color:var(--accent-2);outline:none}
.cert-model-link .btn-arrow{transition:transform .15s ease}
.cert-model-link:hover .btn-arrow{transform:translateX(3px)}

/* "Your read" is its own section in a tan box, matching the "Your area" box so the two read as distinct
   sections. The verdict band is the flush colored header; the read content is padded below. */
.cert-read{margin:1.3rem 0 0;border:1px solid var(--edge);border-radius:.7rem;background:var(--paper-2);overflow:hidden}
.cert-read .verdict-band{border-radius:0;margin:0}
.cert-read-body{padding:1.15rem 1.15rem 1.2rem}

/* The nudge: a clean, tasteful read sentence, left-aligned with the rest of the read content (not a
   giant serif headline, not oddly aligned). */
.cert .verdict-statement{font-family:var(--sans);font-size:1rem;line-height:1.55;font-weight:500;color:var(--ink);text-align:left;text-align-last:left}
/* CDC guidance: a calm bordered callout, not loose paragraphs (content unchanged, seal untouched). */
.verdict-care{margin:0 0 1.1rem;padding:.95rem 1.1rem .9rem;border:1px solid var(--edge);border-left:3px solid var(--accent);
  border-radius:.25rem .7rem .7rem .25rem;background:color-mix(in srgb,var(--accent) 4%,var(--paper))}
.verdict-care .verdict-lead{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.verdict-care .verdict-quote{font-family:var(--serif);font-size:1.04rem;line-height:1.42;color:var(--ink);margin:0;font-style:normal}
.verdict-care .verdict-nd{font-size:.8rem;line-height:1.45;color:var(--ink-soft);margin:.7rem 0 0}

/* "From your answers": pretty pill-rows with an accent tick, not raw bullets. */
.cert-reasons{margin:1rem 0 0}
.cert-reasons ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.cert-reasons li{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.42rem .8rem .42rem .62rem;
  font-size:.9rem;line-height:1.25;color:var(--ink);background:var(--paper);border:1px solid var(--edge);border-radius:2rem}
.cert-reasons li::before{content:"";flex:0 0 auto;width:.95rem;height:.95rem;border-radius:50%;
  background:var(--accent);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--accent)}
.cert .verdict-sub{margin:0 0 1.5rem}

/* The full medical disclaimer is in the footer on every page, so it is redundant in the LIVE read view.
   Keep it on the saved/printed report, which travels without the footer (mirrors the find-cairn rule). */
#result .cert-disclaimer{display:none}
@media print{#result .cert-disclaimer{display:block}}
.cert>section,.cert-cols>section{border-top:0;padding-top:0;margin-top:1.6rem}
.cert>section:first-of-type,.cert-cols>section:first-child{border-top:0;padding-top:0;margin-top:0}
.cert .cert-note{border-top:0;margin:2.1rem 0 0;padding-top:0}
.cert h4{margin:0 0 .55rem}

.result-top{margin:0 0 1rem}
.cert-prov{margin:.9rem 0 0;font-size:.72rem;line-height:1.5;color:var(--ink-faint);text-align:center}
/* "Find CAIRN at cairn.greenboxlabs.ai" is redundant on the live app (you're already here), but useful
   on the saved/printed takeaway that travels. Hide it only in the live #result view; the saved copy
   serializes .cert outside #result so it still shows there, and print re-shows it. */
#result .cert-prov .find-cairn{ display:none }
@media print{ #result .cert-prov .find-cairn{ display:inline }}
/* result actions · Save · Print · Email (centered) */
.cert-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin:1.5rem 0 0}
@media(max-width:560px){.cert-actions{grid-template-columns:1fr}.cert-actions>*{grid-column:auto!important}}  /* single full-width column · no 2-row "Send to my care team" */
.cert-share-note{max-width:34rem;margin:.85rem auto 0;text-align:center;font-size:.82rem;line-height:1.55;color:var(--ink-faint)}
.cert-actions .btn{width:100%;min-width:0;justify-content:center}
/* ===== streamlined read page ===== */
.sum-code{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-faint);margin:.25rem 0 0}
.cert-actions--top{margin:1.1rem 0 .3rem}
.verdict-exposure{margin:0;padding:1.05rem 1.5rem 1.25rem}
.vx-main{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);margin:0;line-height:1.45}
.vx-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0 0}
.vx-chip{font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--edge);border-radius:999px;padding:.32rem .75rem;line-height:1.3}
.cert-actions--foot{margin:1.8rem 0 .4rem;padding-top:1.4rem;border-top:1px solid var(--edge)}
@media(max-width:560px){ .verdict-exposure{padding:.9rem 1.1rem 1.1rem} }
.cert-signs{margin:1.6rem 0 0}
/* guidance + matched guidance share one box treatment: a full-width colored title bar, then padded body */
.cert-box{margin:1.6rem 0 0;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--edge));border-radius:.7rem;overflow:hidden;background:color-mix(in srgb,var(--accent) 4%,var(--paper))}
.cert > .cert-box > h4{margin:0;border-radius:0;padding:.65rem 1.1rem;background:var(--accent);color:#fbf7ee}
.cert-box-body{padding:1rem 1.1rem}
.cert-guidance>h4,.signs-head h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 .7rem;font-weight:600}
.cg-quote{margin:.7rem 0;padding:0;font-family:var(--serif);font-size:.98rem;line-height:1.5;color:var(--ink)}
.cg-nd{font-size:.85rem;color:var(--ink-soft);font-style:italic;margin:.75rem 0 0}
/* static "not a diagnosis" bar, stacked directly under the colored verdict band inside the read box */
.verdict-nd-bar{margin:0;padding:.55rem 1rem;background:color-mix(in srgb,var(--accent) 10%,var(--paper));border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,var(--edge));font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);text-align:center;line-height:1.5;white-space:nowrap}
/* tint the bar to match the colored verdict band directly above it */
.t-urgent .verdict-nd-bar{background:color-mix(in srgb,var(--t-urgent) 12%,var(--paper));color:var(--t-urgent);border-bottom-color:color-mix(in srgb,var(--t-urgent) 26%,var(--edge))}
.t-escalate .verdict-nd-bar{background:color-mix(in srgb,var(--t-escalate) 13%,var(--paper));color:var(--t-escalate);border-bottom-color:color-mix(in srgb,var(--t-escalate) 28%,var(--edge))}
.t-elevated_watch .verdict-nd-bar{background:color-mix(in srgb,var(--t-watch) 13%,var(--paper));color:var(--t-watch);border-bottom-color:color-mix(in srgb,var(--t-watch) 28%,var(--edge))}
.t-not_elevated .verdict-nd-bar{background:color-mix(in srgb,var(--t-low) 13%,var(--paper));color:var(--t-low);border-bottom-color:color-mix(in srgb,var(--t-low) 28%,var(--edge))}
@media(max-width:560px){.verdict-nd-bar{white-space:normal;letter-spacing:.03em;font-size:.6rem;padding:.5rem .8rem}}
.sign-clin--none{color:var(--ink-faint);font-style:italic}
/* brass reference chip: compound findings with possible SNOMED correlates (reference, not asserted) */
.sign-clin--ref{color:var(--brass);font-style:italic;cursor:help}
.signs-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .5rem}
.signs-head h4{margin:0}
.signs-toggle{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:.2rem .1rem}
.signs-toggle:hover,.signs-toggle:focus-visible{color:var(--accent-deep);text-decoration:underline;outline:none}
.cert-signs .signs-list{list-style:none;margin:0;padding:0}
.sign-row{display:block;text-align:left;padding:.55rem 0;border-bottom:1px dotted var(--edge)}
.sign-row:last-child{border-bottom:0}
.sign-name{display:block;font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.sign-clin{display:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--accent-deep);margin-top:.22rem}
.cert-signs.codes-on .sign-clin{display:block}
/* reference chips follow the same codes-on toggle as all other sign-clin items */
.signs-list--plain li{font-size:.92rem;color:var(--ink-soft);margin:.3rem 0;padding-left:1rem;position:relative}
.signs-list--plain li::before{content:"";position:absolute;left:.1rem;top:.65em;width:.3rem;height:.3rem;border-radius:50%;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.signs-note{font-size:.8rem;line-height:1.5;color:var(--ink-faint);margin:.75rem 0 0}
.cert-foot{margin:1.7rem 0 0;padding-top:1.1rem;border-top:1px solid var(--edge)}
.cert-actions .act-wide{grid-column:1/-1}   /* Share (primary) and Send to my care team each get their own full row, never cramped */
.step-actions--center{justify-content:center;gap:1rem;flex-wrap:wrap}
.step-actions--center .btn{min-width:11rem}

/* ── result redesign (2026-09-09): one next step, hero list, everything else in a drawer ── */
/* One clear action per tier, right under the read. Calm accent; urgent/escalate borrow the tier ink. */
.verdict-next{margin:.15rem 0 1.3rem;font-family:var(--sans);font-size:1.05rem;line-height:1.5;font-weight:600;color:var(--accent)}
.t-urgent .verdict-next{color:var(--t-urgent)}
.t-escalate .verdict-next{color:var(--t-escalate)}
.cert .verdict-sub{margin:0 0 .55rem}

/* Hero · the take-to-clinic observations. The artifact the reviews said to surface. */
.cert-mentions{margin:1.6rem 0;padding:1.15rem 1.3rem 1.25rem;background:var(--paper-2);border:1px solid var(--edge);border-left:3px solid var(--accent);border-radius:.7rem}
.cert-mentions h4{margin:0 0 .75rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.cert-mentions ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.cert-mentions li{margin:0;line-height:1.45;color:var(--ink)}
.cert-mentions-note{margin:.9rem 0 0;font-size:.82rem;line-height:1.55;color:var(--ink-faint);font-style:italic}
/* ── clickable citation chip · "CDC ↗" / "IDSA ↗" · opens the public source to verify ── */
.cite-link{display:inline-flex;align-items:center;gap:.1em;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;
  color:var(--accent);text-decoration:none;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--edge));
  border-radius:2rem;padding:.08rem .5rem;line-height:1.4;white-space:nowrap;vertical-align:baseline;transition:background .15s,border-color .15s,color .15s}
.cite-link:hover,.cite-link:focus-visible{background:color-mix(in srgb,var(--accent) 10%,var(--paper));border-color:var(--accent);color:var(--accent-2);outline:none}

/* ══ ALGORITHM CARD ══ beautiful, mirrors the data-page reveal but richer. The drawer summary is an
   inviting card; inside, icon rows + honest stat chips + live source links. ══ */
/* Model Card drawer matches the other read drawers exactly (solid tan summary, paper body, edge line);
   only the "Model Card" pill differentiates it. No gradient bleed. */
.cert-more--algo{border:1px solid var(--edge);border-radius:.7rem;background:var(--paper-2);overflow:hidden}
.cert-more--algo>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem}
.cert-more--algo>summary::-webkit-details-marker{display:none}
.cert-more--algo>summary:hover{background:color-mix(in srgb,var(--accent) 6%,var(--paper-2))}
.cert-more--algo>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cert-more-lead{display:flex;flex-direction:column;gap:.35rem;text-align:left}
.cert-more-tag{align-self:flex-start;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fbf7ee;background:var(--accent);border-radius:2rem;padding:.22rem .7rem}
.cert-more-cap{font-family:var(--serif);font-size:1.02rem;line-height:1.35;color:var(--ink);font-weight:600}
.cert-more--algo[open]>summary .disclose-caret{transform:rotate(180deg)}
.cert-more--algo .cert-more-body{padding:.3rem 1.1rem 1.15rem}

.algo-card{margin:0}
.algo-head{padding:.4rem 0 1.1rem;border-bottom:1px solid var(--edge)}
.algo-kicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 .3rem}
.algo-title{font-family:var(--serif);font-size:1.4rem;line-height:1.12;margin:0 0 .4rem;color:var(--ink)}
.algo-sub{font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:0;text-align:left;text-align-last:left;-webkit-hyphens:none;hyphens:none}
.algo-rows{display:flex;flex-direction:column}
.algo-row{display:grid;grid-template-columns:2.5rem 1fr;gap:.95rem;align-items:start;padding:1.15rem 0;border-top:1px solid var(--edge)}
.algo-row:first-child{border-top:0}
.algo-ic{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.7rem;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,var(--paper-2));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--edge))}
.algo-ic svg{width:1.35rem;height:1.35rem}
.algo-body{min-width:0}
.algo-body h5{margin:.15rem 0 .4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.algo-body p{margin:0 0 .6rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft);text-align:left;text-align-last:left;-webkit-hyphens:none;hyphens:none}
.algo-body p:last-child{margin-bottom:0}
/* compact, minimal source chips · tight wrapped pills, small footprint */
.cite-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0}
.cite-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.02em;color:var(--accent);text-decoration:none;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--edge));border-radius:2rem;padding:.14rem .5rem;line-height:1.35;white-space:nowrap;transition:background .15s,border-color .15s}
.cite-chip:hover,.cite-chip:focus-visible{background:color-mix(in srgb,var(--accent) 9%,var(--paper));border-color:var(--accent);outline:none}
.algo-fine{font-family:var(--mono)!important;font-size:.66rem!important;letter-spacing:.02em;color:var(--ink-faint)!important;line-height:1.5!important;text-align:left!important}
/* honest stat chips · the numbers, made beautiful and legible */
.algo-stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.4rem 0 .7rem}
.algo-stat{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem;border-radius:.7rem;background:var(--paper-2);border:1px solid var(--edge)}
.algo-stat-v{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--accent);font-weight:600}
.algo-stat-k{font-size:.72rem;line-height:1.35;color:var(--ink-faint)}
@media (max-width:520px){ .algo-stats{grid-template-columns:1fr 1fr} .algo-stat-v{font-size:1.3rem} }

/* ══ ONE CONSISTENT BODY SIZE across the whole result. Running copy in the drawers, the Algorithm
   Card, the detail columns, and the area/context notes is all .9rem / 1.6, justified. Only the hero
   read, section labels, stat numbers, and alert boxes carry their own deliberate emphasis. ══ */
.cert-more-body p, .cert-more-body li,
.algo-sub, .algo-body p,
.cert-cols li, .exp-explain, .area-panel-note, .ctx-nudge,
.cert-note p, .cert-mentions li{
  font-size:.9rem; line-height:1.6;
}
.cert-more-body p, .algo-sub, .algo-body p,
.cert-cols li, .exp-explain, .cert-note p, .cert-mentions li{
  text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none;
}
.algo-fine{ font-size:.78rem!important; }   /* methodology footnote: clearly secondary, not jarringly tiny */
.cert-mentions-note{ font-size:.82rem; }    /* the one intentional small caption under "bring these up" */
/* fine captions inside the drawers stay small (the .9rem body rule must not blow them up) */
.cert-more-body .cert-sources-checked{ font-size:.7rem; color:var(--ink-faint); }
.cert-more-body .source-note, .cert-more-body .src-note{ font-size:.78rem; }
.cert-more-body .area-sum-vint{ font-size:.7rem; }

/* ══ Data-freshness panel (data page) · shows our source-recency attestation as visible rigor ══ */
.fresh-panel{ margin:1.8rem 0 0; padding:1.3rem 1.4rem; border:1px solid var(--edge); border-radius:1rem; background:var(--paper-2); }
.fresh-kicker{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 .3rem; }
.fresh-h{ font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--ink); margin:0 0 .4rem; }
.fresh-sub{ font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin:0 0 1rem; }
.fresh-list{ list-style:none; margin:0 0 .95rem; padding:0; display:flex; flex-direction:column; }
.fresh-row{ display:grid; grid-template-columns:1fr auto auto; gap:.5rem 1rem; align-items:center; padding:.75rem 0; border-top:1px solid var(--edge); }
.fresh-row:first-child{ border-top:0; }
.fresh-src{ display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.fresh-name{ font-size:.95rem; color:var(--ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent); align-self:flex-start; }
.fresh-name:hover{ border-bottom-color:var(--accent); color:var(--accent); }
.fresh-agency{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.fresh-years{ display:flex; flex-direction:column; gap:.1rem; text-align:right; font-family:var(--mono); font-size:.72rem; white-space:nowrap; }
.fresh-you{ color:var(--ink); }
.fresh-latest{ color:var(--ink-faint); }
.fresh-status{ font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .55rem; border-radius:2rem; white-space:nowrap; }
.fresh-status--ok{ color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--paper)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--edge)); }
.fresh-status--behind{ color:#7c5a12; background:color-mix(in srgb,var(--t-watch) 15%,var(--paper)); border:1px solid color-mix(in srgb,var(--t-watch) 40%,var(--edge)); }
.fresh-status--newer{ color:var(--brass); background:color-mix(in srgb,var(--brass) 10%,var(--paper)); border:1px solid color-mix(in srgb,var(--brass) 32%,var(--edge)); }
.fresh-note{ display:flex; gap:.7rem; align-items:flex-start; margin:0; padding-top:.95rem; border-top:1px solid var(--edge); }
.fresh-note-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:.55rem; margin-top:.05rem; background:color-mix(in srgb,var(--accent) 9%,var(--paper)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--edge)); color:var(--accent); }
.fresh-note-ic svg{ width:1.05rem; height:1.05rem; }
.fresh-note p{ margin:0; font-size:.82rem; line-height:1.55; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.fresh-note p strong{ color:var(--ink); }
@media (max-width:560px){ .fresh-row{ grid-template-columns:1fr auto; } .fresh-status{ grid-column:2; justify-self:end; } .fresh-years{ grid-column:1 / -1; flex-direction:row; gap:.9rem; text-align:left; } }

/* ══════════ federal-data · deck restraint: thin serif headers + hairline rule, emerald-square signals,
   hairline provenance table, quiet mono status text (NO pills, NO gradient block) ══════════ */
.sec-h{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,3.2vw,1.58rem); color:var(--ink); margin:2.6rem 0 .12rem; letter-spacing:.005em; }
.sec-sub{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); font-size:.95rem; line-height:1.5; margin:0 0 .75rem; }
.sec-rule{ height:1px; background:var(--edge); border:0; margin:0 0 1.2rem; }
/* signals — emerald square bullet + name + mono source caps (deck §03) */
/* The signals · four horizontal emerald gradient tiles, no icons. Each tile is its own left-to-right
   gradient (shifted per tile for rhythm), with a quiet index numeral, the signal in serif, and the
   federal source as a mono tag pinned to the foot. */
.sig-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:stretch; }
@media (max-width:900px){ .sig-list{ grid-template-columns:1fr 1fr; } }
.sig{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem;
  min-height:9.5rem; padding:1.2rem 1.25rem 1.2rem; border-radius:1rem; color:var(--em-ivory);
  background:linear-gradient(105deg, var(--em-1) 0%, var(--em-2) 100%);
  border:1px solid color-mix(in srgb, var(--em-2) 55%, #000);
  box-shadow:0 10px 26px -18px rgba(3,20,15,.65); transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.sig:nth-child(2){ background:linear-gradient(105deg, #1c5f54 0%, #123f36 100%); }
.sig:nth-child(3){ background:linear-gradient(105deg, #1d6a52 0%, #114635 100%); }
.sig:nth-child(4){ background:linear-gradient(105deg, #22705a 0%, #15493a 100%); }
.sig::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.08), transparent 60%); pointer-events:none; }
.sig:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(3,20,15,.75); }
.sig-n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; font-weight:600; color:color-mix(in srgb, var(--em-mint) 85%, transparent); }
.sig-t{ display:flex; flex-direction:column; flex:1 1 auto; font-family:var(--serif); font-size:1.02rem; line-height:1.32; color:var(--em-ivory); }
.sig-src{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; color:color-mix(in srgb, var(--em-mint) 78%, transparent); margin-top:auto; padding-top:.9rem; }
.sig-gloss{ margin:1.1rem 0 0; font-size:.82rem; line-height:1.45; color:var(--ink-faint); font-style:italic; }
.sig-attr{ margin:1.3rem 0 0; font-size:.82rem; line-height:1.5; color:var(--ink-faint); }   /* plain source line under the signals, not an italic subheader */
/* provenance table — hairline, mono-caps header, quiet text status */
.prov-wrap{ margin:.1rem 0 0; overflow-x:auto; }
.prov{ width:100%; border-collapse:collapse; font-size:.9rem; }
.prov thead th{ font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); text-align:left; font-weight:700; padding:.5rem .85rem .55rem; border-bottom:1px solid var(--edge); white-space:nowrap; }
.prov tbody td{ padding:.62rem .85rem; border-bottom:1px solid var(--edge-soft); vertical-align:baseline; color:var(--ink-soft); }
.prov tbody tr:last-child td{ border-bottom:0; }
.prov-name{ font-family:var(--serif); font-size:.98rem; color:var(--ink); }
.prov-agency{ font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); white-space:nowrap; }
.prov-role, .prov-year{ font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); white-space:nowrap; }
.prov-link{ font-family:var(--mono); font-size:.74rem; color:var(--accent); text-decoration:none; white-space:nowrap; border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,transparent); }
.prov-link:hover{ border-bottom-color:var(--accent); }

/* "Where the data comes from" · two function groups (READ first, then AREA), color-distinguished,
   premium card rows (replaces the old flat provenance table). */
.dgrp{ margin:1.2rem 0 0; }
.dgrp + .dgrp{ margin-top:1.7rem; }
.dgrp-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem; margin:0 0 .2rem; }
.dgrp-tag{ display:inline-block; font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:.26rem .62rem; border-radius:2rem; white-space:nowrap; }
.dgrp--read .dgrp-tag{ color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 36%,transparent); }
.dgrp--area .dgrp-tag{ color:#7c5a16; background:color-mix(in srgb,var(--brass) 15%,transparent); border:1px solid color-mix(in srgb,var(--brass) 42%,transparent); }
.dgrp-d{ font-size:.85rem; line-height:1.5; color:var(--ink-soft); flex:1 1 16rem; min-width:0; }
.dsrcl{ list-style:none; margin:.75rem 0 0; padding:0; display:grid; gap:.5rem; }
.dsrc{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.72rem .95rem; border-radius:.8rem;
  background:linear-gradient(158deg,#faf5ea,#efe5d1); border:1px solid color-mix(in srgb,var(--brass) 20%,var(--edge)); box-shadow:0 1px 0 var(--edge-soft); transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.dgrp--read .dsrc{ border-left:3px solid color-mix(in srgb,var(--accent) 72%,var(--edge)); }
.dgrp--area .dsrc{ border-left:3px solid color-mix(in srgb,var(--brass) 72%,var(--edge)); }
.dsrc:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -16px rgba(35,32,26,.5); }
.dsrc-main{ min-width:0; display:flex; flex-direction:column; gap:.16rem; }
.dsrc-name{ font-size:.9rem; font-weight:500; line-height:1.35; color:var(--ink); }
.dsrc-meta{ font-family:var(--mono); font-size:.57rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.dsrc-right{ display:inline-flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.dsrc-yr{ font-family:var(--mono); font-size:.6rem; font-weight:700; color:var(--ink-faint); background:var(--paper-3); border-radius:.4rem; padding:.14rem .44rem; white-space:nowrap; }
.dsrc-link{ font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; color:var(--accent); white-space:nowrap; text-decoration:none;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--edge)); border-radius:2rem; padding:.3rem .62rem; transition:background .14s,color .14s,border-color .14s; }
.dsrc-link:hover{ background:var(--accent); color:var(--em-ivory); border-color:var(--accent); }
@media (max-width:560px){
  .dsrc{ flex-direction:column; align-items:flex-start; gap:.55rem; }
  .dsrc-right{ flex-wrap:wrap; }
}
/* quiet status — a small mono tag in the status color, no pill chrome */
.prov-st{ font-family:var(--mono); font-size:.56rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  padding:.22rem .52rem; border-radius:2rem; border:1px solid color-mix(in srgb, currentColor 45%, transparent); background:color-mix(in srgb, currentColor 9%, transparent); }
.prov-st--latest{ color:var(--accent-deep); }
.prov-st--snapshot{ color:#5a7d6f; }
.prov-st--period{ color:var(--accent-2); }
.prov-st--update{ color:#8a6318; }
.prov-checked{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:-.75rem 0 0; }
.prov-note{ display:flex; gap:.7rem; align-items:flex-start; margin:1.15rem 0 0; padding-bottom:1.15rem; border-bottom:1px solid var(--edge); }
.prov-note-ic{ flex:0 0 auto; color:var(--accent); margin-top:.12rem; }
.prov-note-ic svg{ width:1.15rem; height:1.15rem; }
.prov-note p{ margin:0; font-size:.82rem; line-height:1.55; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.prov-note p strong{ color:var(--ink); }
@media (max-width:620px){
  .sig-list{ grid-template-columns:1fr; gap:.7rem; }
  /* phones: the tiles were 9.5rem tall with the source pinned to the bottom, leaving big empty gaps.
     Compact them to content height and sit the source right under the text, so all four stay tight. */
  .sig{ min-height:0; padding:.9rem 1.1rem; gap:.5rem; }
  .sig-src{ margin-top:.6rem; padding-top:0; }
  .prov thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .prov, .prov tbody, .prov tr, .prov td{ display:block; width:auto; }
  .prov tbody tr{ padding:.5rem 0 .6rem; border-bottom:1px solid var(--edge); }
  .prov tbody tr:last-child{ border-bottom:0; }
  .prov tbody td{ border:0; padding:.1rem 0; }
  .prov td[data-l]:not([data-l="Source"])::before{ content:attr(data-l) "   "; font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
}
/* model-card data-source rows: vintage + quiet status text (no pill) */
.mc-srcyr{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); margin-left:.35rem; }
.mc-srcmeta{ display:inline-flex; align-items:center; gap:.75rem; flex:0 0 auto; }
/* prevention · About Lyme testing (moved here from the federal-data page, since it is not a model input) */
.learn-testing{ margin:2rem auto 0; max-width:46rem; padding:1.5rem 1.65rem 1.4rem; border:1px solid var(--edge); border-radius:1rem; background:var(--paper-2); box-shadow:0 1px 0 var(--edge-soft); text-align:left; }
.learn-testing-h{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--ink); margin:0 0 .5rem; }
.learn-testing p{ font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0 0 .6rem; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.learn-testing-cite{ font-size:.82rem; color:var(--ink-faint); }

/* ══════════ vintage-alignment timeline (deck page 4) · how each source's YEAR lines up to the
   2022-2023 case window — the companion to the provenance table (which sources vs which vintages) ══════════ */
.vint{ --lblw:14.5rem; margin:2.6rem 0 0; padding:1.5rem 1.6rem 1.7rem; border:1px solid var(--edge); border-radius:1rem; background:#fffdf8; box-shadow:0 1px 0 var(--edge-soft); }
.vint .sec-h{ margin-top:0; }   /* boxed section: title sits flush at the top of the card */
.vint-k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:.2rem 0 0; }
.vint-plot{ position:relative; display:grid; grid-template-columns:var(--lblw) 1fr; align-items:center; row-gap:0; margin-top:1.5rem;
  border-top:1px solid var(--edge-soft); }
.vint-overlay{ position:absolute; left:var(--lblw); right:0; top:0; bottom:0; pointer-events:none; z-index:0; }
.vint-gl{ position:absolute; top:0; bottom:0; left:calc(var(--x)*1%); width:1px; background:var(--edge-soft); }
.vint-band{ position:absolute; top:0; bottom:0; left:calc(var(--a)*1%); width:calc((var(--b) - var(--a))*1%);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-left:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-right:1px solid color-mix(in srgb,var(--accent) 24%,transparent); }
.vint-band-l{ position:absolute; top:-1.2rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.54rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
/* mobile: keep the terms/consent card off the screen edges */
@media(max-width:620px){ .consent-inner{ width:auto; margin-left:1rem; margin-right:1rem; } }
/* every row the same height with a hairline rule under it — a balanced, equidistant ledger */
.vint-lbl{ font-family:var(--serif); font-size:.86rem; line-height:1.2; color:var(--ink); display:flex; align-items:center; min-height:2.5rem; padding:0 .85rem 0 0; z-index:1; border-bottom:1px solid var(--edge-soft); white-space:nowrap; }
.vint-tr{ position:relative; min-height:2.5rem; z-index:1; border-bottom:1px solid var(--edge-soft); }
.vint-dot{ position:absolute; top:50%; left:calc(var(--x)*1%); width:.95rem; height:.95rem; border-radius:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 0 .32rem color-mix(in srgb,currentColor 15%,transparent); }
/* soft line joining the two range dots (2022-2023 case window) — sits behind the dots */
.vint-rangeline{ position:absolute; top:50%; left:calc(var(--a)*1%); width:calc((var(--b) - var(--a))*1%); height:.28rem; border-radius:2rem; transform:translateY(-50%);
  background:color-mix(in srgb,currentColor 34%,transparent); }
.vint-bar{ position:absolute; top:50%; left:calc(var(--a)*1%); width:calc((var(--b) - var(--a))*1%); height:.4rem; border-radius:2rem; transform:translateY(-50%); }
.vint-cap-dot{ position:absolute; top:50%; left:calc(var(--x)*1%); width:.5rem; height:.5rem; border-radius:50%; transform:translate(-50%,-50%); }
.vint--lock{ background:var(--accent-deep); color:var(--accent-deep); }
.vint--new{ background:#2e8b74; color:#2e8b74; }
.vint--snap{ background:#7c9e8f; color:#7c9e8f; }
.vint-axis{ display:grid; grid-template-columns:var(--lblw) 1fr; margin:.45rem 0 0; }
.vint-axtr{ position:relative; height:1.1rem; }
.vint-axtr::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--edge); }
.vint-yr{ position:absolute; top:.28rem; left:calc(var(--x)*1%); transform:translateX(-50%); font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); }
.vint-legend{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:1.25rem 0 0; }
.vint-leg{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-soft); }
.vint-sw{ flex:0 0 auto; width:.7rem; height:.7rem; border-radius:50%; box-shadow:0 0 0 .22rem color-mix(in srgb,currentColor 15%,transparent); }
.vint-cap{ margin:1rem 0 0; font-size:.82rem; line-height:1.6; color:var(--ink-faint); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
@media (max-width:620px){
  .vint{ --lblw:8.2rem; }
  .vint-lbl{ font-size:.72rem; padding-right:.5rem; white-space:normal; line-height:1.15; }
  .vint-dot{ width:.8rem; height:.8rem; }
}

/* ══════════ MODEL CARD design system (mc-) · matches the data-page flip cards + external site ══════════ */
/* ── "Federal brief" dark hero: forest medallion field, cairn seal, ivory serif ── */
.mc-hero{ position:relative; overflow:hidden; border-radius:1.3rem; margin:0 0 1.5rem; display:flex; flex-direction:column; justify-content:center; min-height:clamp(10.5rem,22vw,15rem);
  padding:clamp(2rem,5.2vw,3.1rem) clamp(1.4rem,4.5vw,2.6rem) clamp(1.8rem,4.5vw,2.5rem);
  background:radial-gradient(130% 130% at 50% -14%, #1d6956 0%, #124a37 54%, #0c3327 100%);
  color:var(--em-ivory); box-shadow:0 28px 64px -32px rgba(7,28,22,.72), inset 0 0 0 1px rgba(154,217,194,.12); }
.mc-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 40%, transparent 0 20px, rgba(154,217,194,.06) 20px 21px); }
.mc-hero-glow{ position:absolute; left:50%; top:-26%; width:76%; height:70%; transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(95,211,160,.22), transparent 70%); }
.mc-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 150px 26px rgba(5,20,15,.5);
  background:radial-gradient(70% 80% at 50% 42%, transparent 46%, rgba(6,22,17,.42) 100%); }
.mc-hero-in{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
.mc-hero-seal{ width:84px; height:84px; margin:0 0 1.05rem; filter:drop-shadow(0 16px 32px rgba(0,0,0,.55)); }
.mc-hero-k{ font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--em-mint); margin:0 0 .7rem; }
/* line-height 1.04 clipped glyph descenders (y, g, p) against the hero's overflow:hidden; give the
   line box room + a hair of padding so descenders are never cut. */
.mc-hero-h{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,5.4vw,2.65rem); line-height:1.16; letter-spacing:-.012em; margin:0 0 .7rem; padding-bottom:.08em;
  background:linear-gradient(180deg,#ffffff 0%,#e2f4ea 60%,#b6e6cf 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mc-hero-sub{ font-family:var(--serif); font-size:clamp(1rem,1.8vw,1.12rem); line-height:1.55; color:color-mix(in srgb,var(--em-ivory) 90%,transparent); margin:0 auto; max-width:36rem; text-align:center; text-align-last:center; text-wrap:balance; }
/* Center every green-hero subtitle, with balanced line breaks. Scoped to the hero so it wins over
   page-level `p` left-align rules (e.g. .page--privacy p). */
.mc-hero-in .mc-hero-sub{ text-align:center; text-align-last:center; text-wrap:balance; }

/* ── Scoreboard: the two headline numbers + the lift local tick data earns ── */
.mc-perf{ margin:0 0 1.7rem; }
.mc-perf-eyebrow{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 .8rem; }
.mc-perf-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin:0 0 1rem; }
.mc-perf-stat{ padding:1.35rem 1.25rem; border-radius:1rem; background:color-mix(in srgb,var(--accent) 4%,var(--paper));
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--edge)); box-shadow:0 1px 0 var(--edge-soft), 0 18px 36px -30px rgba(35,32,26,.55); }
.mc-perf-v{ font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,8.5vw,3.6rem); line-height:.88; letter-spacing:-.02em; color:var(--accent-deep); }
.mc-perf-k{ display:block; font-family:var(--serif); font-weight:600; font-size:1rem; line-height:1.25; color:var(--ink); margin:.5rem 0 .4rem; }
#page-impact .mc-perf-k{ min-height:2.5em; } /* 2 lines reserved so all three cards' descriptions align (visual parity) */
.mc-perf-n{ display:block; font-size:.95rem; line-height:1.5; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
/* the Impact page has THREE stats — put them on one row (not 2 + a lonely orphan) */
#page-impact .mc-perf-stats{ grid-template-columns:repeat(3,1fr); }
@media (max-width:520px){ .mc-perf-stats, #page-impact .mc-perf-stats{ grid-template-columns:1fr; } }
#page-impact .mc-perf-v{ font-size:clamp(2rem,5.2vw,2.7rem); }   /* smaller so $163M / $2,227 don't feel cluttered in the 3-up boxes */
#page-impact .mc-perf-n{ font-size:.82rem; line-height:1.5; }   /* quieter than the serif subtitle above it, so it reads as supporting detail */
.mc-lift{ padding:1.25rem; border-radius:1rem; background:color-mix(in srgb,var(--accent) 5%,var(--paper-2));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--edge)); }
/* readable headline (was a tiny .64rem mono micro-label you could not read) */
.mc-lift-cap{ font-family:var(--serif); font-size:1.05rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 .9rem; }
.mc-lift-row{ margin:0 0 .65rem; }
.mc-lift-row:last-child{ margin:0; }
.mc-lift-lbl{ font-size:.95rem; color:var(--ink-soft); margin:0 0 .32rem; }
.mc-lift-track{ height:1.55rem; border-radius:.78rem; background:color-mix(in srgb,var(--accent) 8%,#e7e0d0); overflow:hidden; }
.mc-lift-fill{ height:100%; border-radius:.78rem; display:flex; align-items:center; justify-content:flex-end; min-width:2.6rem; }
.mc-lift-fill.dim{ background:color-mix(in srgb,var(--accent) 38%,#b7c7bf); }
.mc-lift-fill.lit{ background:linear-gradient(90deg,var(--accent),var(--accent-deep)); }
.mc-lift-v{ font-family:var(--serif); font-weight:600; font-size:.98rem; color:#fff; padding-right:.75rem; }

/* ── System flow: a few answers → the read + the estimate → your read, a range, a record ── */
.mc-flow{ display:grid; grid-template-columns:.6fr auto 3.3fr auto .6fr; align-items:center; gap:.6rem; margin:0 0 1.7rem; }   /* narrow the io boxes so the engine column is wide enough for the one-row sublabel */
.mc-flow-io{ background:var(--paper); border:1.5px solid color-mix(in srgb,var(--accent) 58%,var(--edge)); border-radius:.9rem; padding:.85rem .7rem; text-align:center;
  font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); line-height:1.55; }
.mc-flow-eng{ display:flex; flex-direction:column; gap:.5rem; }
/* Each card: the 1/2 badge is a flex item on the left (vertically centered), the title + sublabel stack
   to its right. No absolute overlap, no cramped centering. */
.mc-flow-card{ display:flex; align-items:center; gap:.8rem; text-align:left; background:linear-gradient(165deg,#1d7b63,#124a37); color:#fff; border-radius:.9rem; padding:.85rem 1.05rem; box-shadow:0 14px 26px -18px rgba(11,38,32,.7); }
.mc-flow-txt{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.mc-flow-card .t{ display:block; font-family:var(--serif); font-weight:600; font-size:1rem; line-height:1.2; }
.mc-flow-n{ flex:0 0 auto; display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%;
  background:rgba(255,255,255,.22); color:#fff; font-family:var(--sans); font-weight:700; font-size:.85rem; }
.mc-flow-card .s{ display:block; font-family:var(--mono); font-size:clamp(.55rem,1.05vw,.66rem); font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:rgba(234,255,246,.85); line-height:1.4; white-space:normal; }
.mc-flow-arrow{ height:2px; min-width:14px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 48%,var(--edge))); position:relative; }
.mc-flow-arrow::after{ content:""; position:absolute; right:0; top:-3px; border-left:6px solid color-mix(in srgb,var(--accent) 48%,var(--edge)); border-top:4px solid transparent; border-bottom:4px solid transparent; }
@media (max-width:560px){
  .mc-flow{ grid-template-columns:1fr; gap:.55rem; }
  .mc-flow-card .s{ white-space:normal; font-size:.66rem; }   /* stacked flow: let the sublabel wrap */
  .mc-flow-arrow{ width:2px; height:16px; min-width:0; justify-self:center; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 48%,var(--edge))); }
  .mc-flow-arrow::after{ right:auto; top:auto; bottom:0; left:-3px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid color-mix(in srgb,var(--accent) 48%,var(--edge)); border-bottom:0; }
}

/* ── Medical-records interop table (reported finding → SNOMED CT) ── */
.mc-tbl-sub{ font-size:.95rem; line-height:1.55; color:var(--ink-soft); margin:0 0 .95rem; max-width:44rem; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.mc-table{ width:100%; border-collapse:collapse; margin:0 0 .4rem; }
.mc-table thead th{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:0 .2rem .6rem; border-bottom:1.5px solid var(--edge); }
.mc-table thead th:last-child{ text-align:right; }
.mc-table tbody td{ padding:.62rem .2rem; border-bottom:1px solid var(--edge-soft); font-family:var(--serif); font-size:.96rem; color:var(--ink); vertical-align:middle; }
.mc-table tbody tr:last-child td{ border-bottom:0; }
.mc-code{ font-family:var(--mono); font-weight:600; font-size:.88rem; color:var(--accent-deep); text-align:right; white-space:nowrap; }
.mc-pill{ display:inline-block; font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:color-mix(in srgb,var(--accent) 12%,var(--paper-2)); color:var(--accent-deep); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--edge)); border-radius:.5rem; padding:.12rem .42rem; margin-left:.35rem; vertical-align:middle; }

/* multi-paragraph "define" bodies stack in the text column beside the icon */
.mc-def-body{ flex:1; }
.mc-def-body p{ margin:0 0 .7rem; }
.mc-def-body p:last-child{ margin-bottom:0; }
/* the model's inputs as scannable chips (aligned under the define text column) */
.mc-factors-lbl, .mc-block > .mc-factors-lbl{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .5rem; } /* higher specificity so it beats .mc-block>p (.95rem) and matches the .mc-perf-eyebrow size */
/* 2 x 2 balanced grid (was a weird 3 + 1 wrap); each pill fills its cell */
.mc-factors{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:0 0 1.2rem; }
/* identical-size tiles (grid cells are equal + min-height makes heights equal) with a soft emerald gradient */
.mc-factor{ display:flex; width:100%; align-items:center; justify-content:center; text-align:center; min-height:2.9rem;
  font-family:var(--sans); font-size:.88rem; font-weight:500; color:var(--accent-deep);
  background:linear-gradient(135deg,#ffffff 0%, color-mix(in srgb,var(--accent) 14%, #f2f8f4) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--edge)); border-radius:.9rem; padding:.55rem 1rem;
  box-shadow:0 2px 8px -4px rgba(21,76,60,.3), inset 0 1px 0 rgba(255,255,255,.75); }
@media (max-width:520px){ .mc-factors{ grid-template-columns:1fr; } .mc-factors, .mc-factors-lbl{ padding-left:0; } }

/* ── Coverage block (data page): where the data reaches, and the county→state→left-out fallback ── */
.cov-block{ margin:0 0 2rem; padding:1.7rem 1.8rem 1.9rem; border-radius:1.4rem; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--edge));
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%,var(--paper)) 0%, color-mix(in srgb,var(--accent) 2.5%,var(--paper)) 100%); }
@media (max-width:520px){ .cov-block{ padding:1.3rem 1.2rem 1.5rem; border-radius:1.1rem; } }
.cov-h{ font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink); margin:0 0 .35rem; }
.cov-sub{ font-size:.95rem; line-height:1.55; color:var(--ink-soft); margin:0 0 1.1rem; max-width:44rem; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.cov-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin:0 0 1rem; }
@media (max-width:520px){ .cov-stats{ grid-template-columns:1fr; } }
.cov-stat{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:1.3rem 1.4rem; border-radius:1rem; background:var(--paper); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--edge)); }
.cov-stat--gap{ border-color:color-mix(in srgb,var(--brass) 36%,var(--edge)); background:var(--paper-2); }
.cov-v{ display:flex; align-items:baseline; gap:.42rem; font-family:var(--serif); font-weight:600; font-size:2.6rem; line-height:1; color:var(--accent-deep); }
.cov-stat--gap .cov-v{ color:var(--brass); }
.cov-u{ font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.cov-k{ font-family:var(--serif); font-size:1.04rem; font-weight:600; line-height:1.3; color:var(--ink); margin:.5rem 0 0; }
.cov-n{ font-size:.84rem; line-height:1.45; color:var(--ink-soft); margin:.2rem 0 0; }

/* coverage proportion bar (35 of 51 read directly) */
.cov-bar{ display:flex; height:.55rem; border-radius:2rem; overflow:hidden; margin:.1rem 0 .55rem; background:var(--paper-3); }
.cov-bar-a{ background:var(--accent); }
.cov-bar-b{ background:color-mix(in srgb,var(--brass) 62%,var(--paper-2)); }
.cov-barlbl{ display:flex; justify-content:space-between; gap:1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.2rem; }
.cov-barlbl b{ color:var(--ink-soft); font-weight:700; }

/* gap states as chips, spread evenly across the box (not a sentence, so no trailing period) */
.cov-gap{ margin:0 0 1.2rem; }
.cov-gap-k{ display:block; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .55rem; }
.cov-gap-chips{ display:grid; grid-template-columns:repeat(8,1fr); gap:.4rem; }
.cov-gap-chips span{ position:relative; text-align:center; font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.04em; color:color-mix(in srgb,var(--brass) 62%,var(--ink)); background:var(--paper-2); border:1px solid color-mix(in srgb,var(--brass) 36%,var(--edge)); border-radius:.45rem; padding:.34rem .2rem; cursor:default; transition:border-color .14s, background .14s, color .14s; } /* brass shading to match the 16-gap "do not report" card */
.cov-gap-chips span:hover{ border-color:color-mix(in srgb,var(--brass) 60%,var(--edge)); background:var(--paper-2); color:var(--ink); }
/* classy instant tooltip with the full state name (from the title attribute) */
.cov-gap-chips span:hover::after{ content:attr(title); position:absolute; bottom:calc(100% + .42rem); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); font-family:var(--serif); font-size:.72rem; font-weight:500; letter-spacing:.01em; text-transform:none; padding:.26rem .55rem; border-radius:.4rem; white-space:nowrap; z-index:6; pointer-events:none; box-shadow:0 8px 20px -10px rgba(35,32,26,.5); }
.cov-gap-chips span:hover::before{ content:""; position:absolute; bottom:calc(100% + .18rem); left:50%; transform:translateX(-50%); border:.26rem solid transparent; border-top-color:var(--ink); z-index:6; pointer-events:none; }
@media (max-width:520px){ .cov-gap-chips{ grid-template-columns:repeat(4,1fr); } }
.cov-fall{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:.45rem; }
@media (max-width:560px){ .cov-fall{ grid-template-columns:1fr; } .cov-fall .fx{ justify-self:center; transform:rotate(90deg); } }
.cov-fall .fcard{ border-radius:.8rem; padding:.85rem 1rem; }
.cov-fall .fcard.a{ background:var(--accent); color:#fff; }
.cov-fall .fcard.b{ background:color-mix(in srgb,var(--accent) 10%,var(--paper)); border:1px solid color-mix(in srgb,var(--accent) 26%,var(--edge)); }
.cov-fall .fcard.c{ background:var(--paper-2); border:1px solid var(--edge); }
.cov-fall .ft{ display:block; font-family:var(--serif); font-weight:600; font-size:1rem; }
.cov-fall .fcard.a .ft{ color:#fff; } .cov-fall .fcard.b .ft{ color:var(--accent-deep); } .cov-fall .fcard.c .ft{ color:var(--ink-soft); }
.cov-fall .fn{ display:block; font-size:.79rem; line-height:1.38; margin-top:.28rem; }
.cov-fall .fcard.a .fn{ color:rgba(244,240,231,.92); } .cov-fall .fcard.b .fn, .cov-fall .fcard.c .fn{ color:var(--ink-soft); }
.cov-fall .fx{ align-self:center; font-family:var(--mono); color:color-mix(in srgb,var(--accent) 50%,var(--edge)); font-size:1.05rem; }

.mc-steps{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin:0 0 1.5rem; }
.mc-step{ position:relative; padding:1.25rem; border-radius:1rem; background:var(--paper); border:1px solid var(--edge);
  box-shadow:0 1px 0 var(--edge-soft), 0 16px 32px -28px rgba(35,32,26,.5); }
.mc-step-n{ position:absolute; top:.95rem; right:1.15rem; font-family:var(--serif); font-size:1.5rem; font-weight:600; color:color-mix(in srgb,var(--accent) 26%,var(--edge)); line-height:1; }
.mc-step-ic{ display:inline-flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem; border-radius:.85rem; margin:0 0 .75rem; color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 88%,#0b2620),color-mix(in srgb,var(--accent-2) 70%,#0a2f3a)); box-shadow:0 10px 20px -12px rgba(11,38,32,.6); }
.mc-step-ic svg{ width:1.4rem; height:1.4rem; }
.mc-step-h{ font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink); margin:0 0 .35rem; }
.mc-step p{ font-size:.95rem; line-height:1.55; color:var(--ink-soft); margin:0; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }

/* Three full-width cards, stacked, same color. Big number on the left, a clear title and a plain-English
   explanation on the right, so a technical reader gets it without guessing. */
.mc-stats{ display:flex; flex-direction:column; gap:.7rem; margin:1.15rem 0 .3rem; }
.mc-stat{ display:flex; align-items:center; gap:1.1rem; padding:1.25rem; border-radius:1rem; background:color-mix(in srgb,var(--accent) 5%,var(--paper-2)); border:1px solid color-mix(in srgb,var(--accent) 18%,var(--edge)); }
.mc-stat-v{ flex:0 0 5.75rem; font-family:var(--serif); font-size:1.7rem; line-height:1.1; color:var(--accent); font-weight:600; white-space:nowrap; }
.mc-stat-body{ display:block; }
.mc-stat-t{ display:block; font-family:var(--serif); font-weight:600; font-size:1.02rem; line-height:1.25; color:var(--ink); margin:0 0 .25rem; }
.mc-stat-k{ display:block; font-size:.95rem; line-height:1.5; color:var(--ink-soft); }
.mc-term{ color:color-mix(in srgb,var(--ink-faint) 78%,transparent); font-style:italic; }
@media (max-width:560px){
  .mc-stat{ flex-direction:column; gap:.4rem; align-items:flex-start; }
  .mc-stat-v{ flex:0 0 auto; font-size:1.85rem; }
  .mc-srcrow{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .mc-srcrow a, .mc-srcref{ white-space:normal; overflow-wrap:anywhere; max-width:100%; }
  .mc-stat-k{ text-align:left; }
}
/* justified body prose across the model card + page ledes (headings/tiles/labels stay as set) */
.mc-block > p, .mc-tech-body p, .mc-fine, .page-lede, .area-sum-lead{ text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
/* box body text that was still left-ragged (stat cards, data cards, freshness sub, the read quote) —
   justify to match the rest of the site, whole words only (no hyphenated cutoffs). */
.mc-stat-k, .dc-desc, .fresh-sub, .verdict-quote, .area-note{ text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }

.mc-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 0; }
.mc-chip{ display:inline-flex; align-items:center; gap:.25rem; font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.02em;
  color:var(--accent); text-decoration:none; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--edge)); border-radius:2rem; padding:.22rem .6rem; transition:background .15s,border-color .15s; }
.mc-chip:hover,.mc-chip:focus-visible{ background:color-mix(in srgb,var(--accent) 9%,var(--paper)); border-color:var(--accent); outline:none; }

.mc-tech{ margin:1.25rem 0 0; border-top:1px solid color-mix(in srgb,var(--accent) 16%,var(--edge)); }
.mc-tech>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 0 .15rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.mc-tech>summary::-webkit-details-marker{ display:none; }
.mc-tech>summary::after{ content:"\25BE"; color:var(--brass); transition:transform .2s var(--ease); }
.mc-tech[open]>summary::after{ transform:rotate(180deg); }
.mc-tech-body{ padding:.55rem 0 0; }
.mc-tech-body p{ font-size:.84rem; line-height:1.55; color:var(--ink-soft); margin:0 0 .6rem; }
.mc-tech-body p:last-child{ margin-bottom:0; }
.mc-more{ margin:.9rem 0 0; }
.mc-more a{ display:inline-flex; align-items:center; gap:.25rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--accent); text-decoration:none; }
.mc-more a:hover,.mc-more a:focus-visible{ color:var(--accent-2); outline:none; }

.mc-block{ margin:0 0 1.7rem; }
.mc-block h3{ font-family:var(--serif); font-size:1.22rem; font-weight:600; color:var(--ink); margin:0 0 .55rem; }
/* Parts 1 and 2 · numbered so the two halves of a read (the rules, the area model) are unmistakable,
   matching the numbered steps at the top of the page. */
/* Part 1 / Part 2 master panels — two obviously distinct colored sections */
/* extra left padding holds the hanging Part number so the heading text lines up with the tag + body */
.mc-part{ margin:0 0 1.8rem; padding:1.7rem 1.8rem 1.9rem 2.7rem; border-radius:1.4rem; border:1px solid var(--edge); }
.mc-part--read{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%,var(--paper)) 0%, color-mix(in srgb,var(--accent) 3.5%,var(--paper)) 100%); border-color:color-mix(in srgb,var(--accent) 22%,var(--edge)); }
.mc-part--area{ background:linear-gradient(180deg, color-mix(in srgb,var(--brass) 10%,var(--paper-2)) 0%, color-mix(in srgb,var(--brass) 3%,var(--paper-2)) 100%); border-color:color-mix(in srgb,var(--brass) 26%,var(--edge)); }
@media (max-width:520px){ .mc-part{ padding:1.3rem 1.2rem 1.5rem 2.2rem; border-radius:1.1rem; } }
.mc-part .mc-part-tag{ display:inline-block; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#fbf7ee; border-radius:2rem; padding:.32rem .9rem; margin:0 0 .85rem; }
.mc-part--read .mc-part-tag{ background:var(--accent); }
.mc-part--area .mc-part-tag{ background:var(--brass); }
.mc-part--area .mc-block-n{ background:var(--brass); }
.mc-part--area .mc-define{ border-left-color:var(--brass); }
.mc-part--area .mc-define--tech{ border-left-color:var(--edge); }
/* The Part number hangs in the card's left gutter (not inline), so the heading TEXT shares one left
   edge with the "Part N of your read" tag above it and the prose below — titles line up down the card. */
.mc-block-h{ display:block; position:relative; }
.mc-block-n{ position:absolute; top:0; right:100%; margin-right:.6rem; display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--accent); color:#fbf7ee; font-family:var(--serif); font-size:1.02rem; font-weight:600; line-height:1; }
.mc-block > p{ font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0 0 .7rem; }
/* definition callouts: a clean left-accent inset (icons removed), read-group emerald / area-group brass */
/* definition callouts: a crisp WHITE card with a colored left accent, so they pop against the part's
   tinted block background (emerald for Part 1, brass for Part 2) instead of blending into it. */
.mc-define{ margin:0 0 1.15rem; padding:.95rem 1.15rem; border-radius:.75rem; background:#fffdf8;
  border:1px solid var(--edge); border-left:3px solid var(--accent); box-shadow:0 1px 0 var(--edge-soft); }
.mc-define p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
/* fill the box edge-to-edge: text-wrap:pretty was balancing some paragraphs narrower than the one above them */
.mc-define p, .mc-def-body p{ text-wrap:wrap; }
/* the technical block reads at the SAME normal size as the define boxes around it (was tiny fine print) */
.mc-define--tech{ margin-top:1.15rem; background:#fffdf8; border-left-color:var(--brass); }
.mc-define--tech p{ font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0; }
.mc-define--tech p strong{ color:var(--ink); }
.mc-srclist{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.5rem; }
/* premium source-list rows: a crisp white card, a status-colored left accent, a year chip, a
   status pill, and a pill "view" link. Shared by the Model Card guidance + data lists. */
.mc-srcrow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.82rem 1rem .82rem 1.05rem;
  border-radius:.85rem; background:#fffdf8; border:1px solid var(--edge); border-left:3px solid var(--accent);
  box-shadow:0 1px 0 var(--edge-soft); transition:transform .14s var(--ease), box-shadow .14s var(--ease), border-left-color .14s var(--ease); }
.mc-srcrow:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -16px rgba(35,32,26,.55); border-left-color:var(--accent-deep); }
.mc-srcname{ font-size:.92rem; font-weight:500; line-height:1.4; color:var(--ink); min-width:0; }
.mc-srcyr{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.03em; color:var(--ink-faint);
  background:var(--paper-3); border-radius:.4rem; padding:.12rem .42rem; margin-left:.5rem; white-space:nowrap; }
.mc-srcmeta{ display:inline-flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.mc-srcrow a{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--accent); white-space:nowrap; text-decoration:none;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--edge)); border-radius:2rem; padding:.3rem .62rem; transition:background .14s, color .14s, border-color .14s; }
.mc-srcrow a:hover{ background:var(--accent); color:var(--em-ivory); border-color:var(--accent); }
.mc-srcref{ font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); white-space:nowrap; flex:0 0 auto; }
.mc-callout{ display:flex; gap:.85rem; align-items:flex-start; padding:1.05rem 1.2rem; border-radius:.9rem; margin:1rem 0 0;
  background:color-mix(in srgb,var(--accent) 5%,var(--paper-2)); border:1px solid color-mix(in srgb,var(--accent) 18%,var(--edge)); }
.mc-callout .mc-cic{ flex:0 0 auto; color:var(--accent); margin-top:.1rem; }
.mc-callout p{ margin:0; font-size:.95rem; line-height:1.55; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.mc-callout--noicon{ justify-content:center; text-align:center; }
.mc-callout--noicon p{ text-align:center; text-align-last:center; }
.mc-fine{ font-family:var(--sans); font-size:.82rem; line-height:1.6; color:var(--ink-soft); margin:1.1rem 0 0; text-wrap:pretty; }
/* one consistent content column for the whole Model Card page (hero, steps, blocks, sources all align) */
.page--algocard .page-inner{ max-width:46rem; margin-inline:auto; }
@media (max-width:520px){ .mc-steps{ grid-template-columns:1fr; } }

/* standalone Model Card page (#/algorithm-card) · reachable by judges/clinicians outside the flow */
.algocard-lede{ font-size:1.05rem; line-height:1.55; color:var(--ink-soft); margin:0 0 1.6rem; max-width:44rem; }
.algocard-sec{ margin:0 0 1.7rem; }
.algocard-sec h3{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--ink); margin:0 0 .5rem; }
.algocard-sec p{ font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0 0 .6rem; max-width:44rem; }
.algocard-list{ margin:.3rem 0 0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem; max-width:44rem; }
.algocard-list li{ font-size:.92rem; line-height:1.5; color:var(--ink-soft); }
.algocard-metrics{ width:100%; max-width:44rem; border-collapse:collapse; margin:.4rem 0 .6rem; }
.algocard-metrics td{ padding:.5rem .2rem; border-bottom:1px solid var(--edge); font-size:.92rem; line-height:1.4; color:var(--ink); vertical-align:top; }
.algocard-metrics td:last-child{ text-align:right; color:var(--ink-soft); font-family:var(--mono); font-size:.82rem; }
.algocard-fine{ font-size:.82rem!important; color:var(--ink-faint)!important; font-style:italic; }
/* primary read = a prominent VERBATIM CDC quote (with citation chip), then the reasons from answers */
.verdict-statement{ font-family:var(--serif); font-size:clamp(1rem,2vw,1.12rem); line-height:1.45; color:var(--ink); margin:.55rem 0 .2rem; }
.verdict-lead{ font-family:var(--mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); margin:.9rem 0 .35rem; }
.verdict-quote{ font-family:var(--serif); font-size:clamp(1.15rem,2.8vw,1.5rem); line-height:1.4; font-weight:600; color:var(--ink); margin:.1rem 0 .6rem; }
.verdict-quote .cite-link{ vertical-align:middle; margin-left:.15rem; }
.cert-reasons{ margin:1rem 0 1.4rem; }
.cert-reasons h4{ margin:0 0 .5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.cert-reasons ul{ margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.4rem; }
.cert-reasons li{ font-size:.95rem; line-height:1.5; color:var(--ink); }
/* Retrieval feature · the exact published CDC/IDSA passages that the fired rules matched */
.cert-matched{ margin-bottom:1.4rem; }
/* header + quote match the "Your care team leads from here" box above it */
.cert-matched h4{ margin:0 0 .7rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; }
.mg-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.mg-row{ padding:0; }
.mg-quote{ margin:0; font-family:var(--serif); font-size:.98rem; font-style:normal; line-height:1.5; color:var(--ink); }
.mg-cite{ margin:.45rem 0 0; }
/* citation reads as a pill, matching the inline .cite-link pills elsewhere on the read */
.mg-src{ display:inline-flex; align-items:center; gap:.1em; font-family:var(--mono); font-size:.64rem; font-weight:700; letter-spacing:.06em;
  color:var(--accent); text-decoration:none; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--edge));
  border-radius:2rem; padding:.1rem .6rem; line-height:1.4; transition:background .15s,border-color .15s,color .15s; }
.mg-src:hover,.mg-src:focus-visible{ background:color-mix(in srgb,var(--accent) 10%,var(--paper)); border-color:var(--accent); color:var(--accent-2); outline:none; }
/* v2 read · single not-a-diagnosis caption, do-this-next, one emergency line, bulleted area */
.verdict-nd{ margin:-.2rem 0 1rem; font-size:.82rem; color:var(--ink-faint); font-style:italic; }
.verdict-next strong{ color:inherit; }
.emergency-line{ margin:1.1rem 0 1.5rem; padding:.85rem 1rem; border-radius:.6rem; line-height:1.55; font-size:.92rem;
  background:color-mix(in srgb, var(--t-urgent) 6%, var(--paper-2)); border:1px solid color-mix(in srgb, var(--t-urgent) 28%, var(--edge)); color:var(--ink); }
.emergency-line strong{ color:var(--t-urgent); }
/* calm-grade emergency line: quiet, not a red alert box, so a "keep watching" read stays calm */
.emergency-line--calm{ background:var(--paper-2); border-color:var(--edge); color:var(--ink-soft); font-size:.86rem; }
/* nested technical evidence inside "How this works" (reachable for clinicians/judges, off the main view) */
.algo-tech{ margin:1rem 0 0; border-top:1px solid var(--edge); padding-top:.8rem; }
.algo-tech>summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.algo-tech>summary::-webkit-details-marker{ display:none; }
.algo-tech-body{ margin-top:.7rem; }
.algo-tech-body p{ font-size:.82rem; line-height:1.55; color:var(--ink-soft); margin:0 0 .6rem; }
.algo-tech-body ul{ margin:0 0 .6rem; padding-left:1.15rem; display:flex; flex-direction:column; gap:.3rem; }
.algo-tech-body li{ font-size:.82rem; line-height:1.45; color:var(--ink-soft); }
/* test-result status bar, placed right under the read box */
.cert-testnote{ margin:.7rem 0 0; padding:.75rem 1.1rem; background:color-mix(in srgb,var(--accent) 7%,var(--paper)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--edge)); border-left:4px solid var(--accent); border-radius:.6rem; text-align:left; }
.ctn-title{ margin:0 0 .25rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.ctn-body{ margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); }
/* already-diagnosed / in-treatment care-team note · soft panel with a forest-green edge, carrying
   the CDC's own recovery line (quoted + cited). Prominent, sits just under the verdict. */
.cert-carenote{ margin:.1rem 0 1.2rem; padding:.85rem 1rem; background:var(--paper-2); border:1px solid var(--edge);
  border-left:3px solid var(--accent-deep); border-radius:.6rem; }
.cert-carenote > p{ margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); }
.cert-carenote .carenote-quote{ margin:.5rem 0 0; font-family:var(--serif); font-size:.95rem; font-weight:600; color:var(--ink); }
.cert-carenote .carenote-quote .cite-link{ vertical-align:middle; margin-left:.15rem; }
/* "Your area" FLIP card · front forest green (data-page aesthetic), back paper with small citations */
/* Both faces live in ONE grid cell, so the card's footprint is the TALLER face and never jumps on
   flip. The hidden face stays in layout (visibility, not display) so the size is always identical. */
.area-flip{ perspective:none; min-height:12rem; display:grid; }
/* turn-the-card control + top row, shared by both faces */
.area-face-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; width:100%; margin-bottom:.15rem; }
.area-flipbtn{ width:2.15rem; height:2.15rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:color-mix(in srgb,#fff 12%,transparent); border:1px solid color-mix(in srgb,#fff 26%,transparent); color:#fff; cursor:pointer;
  transition:background .15s, border-color .15s, transform .35s var(--ease); }
.area-flipbtn svg{ width:1.05rem; height:1.05rem; }
.area-front:hover .area-flipbtn{ background:color-mix(in srgb,#fff 20%,transparent); transform:rotate(-180deg); }
.area-flipbtn--btn:hover, .area-flipbtn--btn:focus-visible{ background:color-mix(in srgb,#fff 22%,transparent); border-color:color-mix(in srgb,#fff 40%,transparent); transform:rotate(180deg); outline:none; }
.area-front-invite-wrap{ margin-top:.55rem; }
.area-front-invite{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:999px; background:color-mix(in srgb,#fff 12%,transparent); border:1px solid color-mix(in srgb,#fff 26%,transparent); font-family:var(--sans); font-size:.82rem; font-weight:500; color:#fff; }
.area-back-h-k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,#fff 72%,transparent); font-weight:700; line-height:2.15rem; }
.area-front, .area-back{ grid-area:1 / 1; }
.area-back{ visibility:hidden; opacity:0; pointer-events:none; transition:opacity .16s var(--ease); }
.area-flip.is-flipped .area-front{ visibility:hidden; opacity:0; pointer-events:none; }
.area-flip.is-flipped .area-back{ visibility:visible; opacity:1; pointer-events:auto; }
.area-front{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; width:100%; min-height:inherit; text-align:left; cursor:pointer;
  border:0; border-radius:1rem; padding:1.3rem 1.4rem; color:#fff; font:inherit;
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 88%, #0b2620) 0%, color-mix(in srgb, var(--accent-2) 72%, #0a2f3a) 100%);
  box-shadow:0 14px 32px -20px rgba(11,38,32,.6), inset 0 1px 0 rgba(255,255,255,.1); transition:transform .15s var(--ease); }
.area-front:hover{ transform:translateY(-2px); }
.area-front-k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,#fff 78%,transparent); line-height:2.15rem; }
.area-front-aware{ display:none; }   /* removed: redundant + awkward; eyebrow + flip button communicate the intent */
.area-front-place{ font-family:var(--serif); font-size:1.7rem; font-weight:600; line-height:1.08; margin-top:.2rem; }
.area-front-headline{ font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb,var(--em-mint) 90%,transparent); margin:.35rem 0 .75rem; padding-bottom:.75rem; border-bottom:1px solid color-mix(in srgb,#fff 14%,transparent); }
.area-front-sub{ font-size:.86rem; color:color-mix(in srgb,#fff 85%,transparent); }
.area-front-facts{ list-style:none; margin:.2rem 0 .3rem; padding:0; display:flex; flex-direction:column; gap:0; width:100%; }
.aff-row{ display:grid; grid-template-columns:1.85rem 1fr; gap:.65rem; align-items:flex-start; padding:.65rem 0; border-top:1px solid color-mix(in srgb,#fff 14%,transparent); }
.aff-row:first-child{ border-top:0; padding-top:.2rem; }
.aff-ic{ display:flex; align-items:center; justify-content:center; width:1.85rem; height:1.85rem; border-radius:.55rem; color:var(--em-mint); margin-top:.1rem;
  background:color-mix(in srgb,var(--em-mint) 16%,transparent); border:1px solid color-mix(in srgb,var(--em-mint) 34%,transparent); }
.aff-ic svg{ width:1rem; height:1rem; }
.aff-t{ font-size:.86rem; line-height:1.45; color:color-mix(in srgb,#fff 92%,transparent); }
.aff-k{ font-weight:700; display:block; margin-bottom:.18rem; }   /* label on own line above description */
/* back · the flip side of the SAME card: same green, same footprint, one light-on-green type scale */
.area-back{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; min-height:inherit; cursor:pointer;
  border:0; border-radius:1rem; padding:1.3rem 1.4rem; color:#fff;
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 88%, #0b2620) 0%, color-mix(in srgb, var(--accent-2) 72%, #0a2f3a) 100%);
  box-shadow:0 14px 32px -20px rgba(11,38,32,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.area-back a, .area-back button{ cursor:pointer; }
.area-back-nat{ font-family:var(--sans); font-size:.88rem; line-height:1.55; color:color-mix(in srgb,#fff 90%,transparent); margin:.2rem 0 1rem; }
/* Source cites: a two-column block, centered to the overall card (middle-balanced), at every
   width. minmax(0,…) lets the two columns shrink rather than collapse to one on a narrow phone. */
.area-cites{ list-style:none; margin:0 0 1rem; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 13rem)); gap:.6rem; width:100%; max-width:28rem; align-self:center; justify-content:center; }
.area-cites li{ background:color-mix(in srgb,#fff 13%,transparent); border:1px solid color-mix(in srgb,#fff 26%,transparent); border-radius:.6rem; padding:.6rem .7rem; }
.area-cites .ac-k{ display:block; font-family:var(--sans); font-size:.82rem; font-weight:600; line-height:1.3; color:color-mix(in srgb,#fff 92%,transparent); }
.area-cites .ac-s{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; line-height:1.3; color:color-mix(in srgb,#fff 60%,transparent); margin-top:.15rem; }
.area-model-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:auto; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:color-mix(in srgb,#fff 85%,transparent); text-decoration:none; }
.area-model-link:hover,.area-model-link:focus-visible{ color:#fff; outline:none; }
.area-note{ font-family:var(--sans); font-size:.82rem; line-height:1.5; color:color-mix(in srgb,#fff 78%,transparent); margin:.2rem 0 .9rem; }
@media(max-width:400px){ .area-cites{ gap:.5rem; } }

/* "How this was made, and other notes" · same drawer language as .cert-where, aligned to content edge */
.cert-more{margin:1.5rem 0 0;border:1px solid var(--edge);border-radius:.7rem;background:var(--paper-2);overflow:hidden}
.cert-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;font-size:.92rem;font-weight:600;color:var(--accent)}
.cert-more>summary::-webkit-details-marker{display:none}
.cert-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cert-more[open]>summary{border-bottom:1px solid var(--edge)}
.cert-more[open] .disclose-caret{transform:rotate(180deg)}
.cert-more-body{padding:.3rem 1.1rem 1.15rem;background:var(--paper)}
.cert-more-body>*{margin-top:1.1rem}
.cert-more-body>*:first-child{margin-top:.7rem}
.cert-more-body .cert-cols{margin-top:1.1rem}
.area-inner{margin-top:1.1rem}
/* recovery safety-net (proven unreachable by journey_fv, styled so it can never be a dead-end) */
.cert-error{max-width:34rem;margin:1.5rem auto 0;text-align:center}
.cert-error h3{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin:0 0 .5rem}
.cert-error p{color:var(--ink-soft);line-height:1.6;margin:0 auto 1.4rem;max-width:28rem}
.cert-error .step-actions{margin-top:0}.verify-drop.is-over{border-color:var(--accent);background:var(--paper-3)}   /* flush-left with the other column values */
/* result · balanced state header (map removed; it lives on the landing) */
.cert-state .state-head{display:flex;align-items:baseline;justify-content:center;gap:.6rem;flex-wrap:wrap;text-align:center;margin:.2rem 0 1rem}
.state-name{font-family:var(--serif);font-size:clamp(1.9rem,6vw,2.7rem);font-weight:600;line-height:1;color:var(--ink);letter-spacing:-.01em}
.state-when{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.state-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 1.1rem;text-align:center}
.state-figs>div{display:flex;flex-direction:column;gap:.2rem;padding:0 .4rem}
.state-figs>div+div{border-left:1px solid var(--edge-soft)}
.state-figs b{font-family:var(--serif);font-size:clamp(1.15rem,3.4vw,1.55rem);font-weight:600;color:var(--accent);line-height:1.05}
.state-figs span{font-size:.72rem;line-height:1.3;color:var(--ink-soft)}

/* acknowledgment gate · its own designed page */
.consent{display:flex;justify-content:center;align-items:flex-start;padding:clamp(1.5rem,6vh,4rem) 0;animation:rise .42s var(--ease) both}
/* the gate shares the ".consent" class with the doctor-handoff block, which sets a pointer cursor +
   dashed panel. Scope those OFF the full-page gate so the hand cursor doesn't show across dead space. */
#consent.consent{cursor:default;background:none;border:0}
.consent-inner{width:100%;max-width:33rem;background:var(--paper-2);border:1px solid var(--edge);border-radius:1.1rem;padding:clamp(1.8rem,5vw,2.8rem) clamp(1.4rem,4vw,2.4rem) clamp(1.6rem,4vw,2.2rem);box-shadow:0 24px 60px -34px rgba(34,32,27,.5),0 2px 0 var(--edge-soft);text-align:center}
.consent-seal{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--accent);border-radius:50%;box-shadow:0 6px 18px -8px rgba(39,74,92,.7);margin-bottom:1.1rem;color:#fff}
.consent-seal svg{width:30px;height:30px}
.consent-seal img{width:32px;height:32px;object-fit:contain}
.consent-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 .5rem}
.consent-h{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.12;letter-spacing:.005em;margin:0 0 .9rem;color:var(--ink)}
.consent-lede{font-family:var(--serif);font-size:.95rem;line-height:1.66;color:var(--ink-soft);margin:0 0 1.6rem;text-align:left}
.consent-points{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.05rem;text-align:left}
.consent-points li{display:flex;gap:.8rem;align-items:flex-start;font-family:var(--serif);font-size:.95rem;line-height:1.66;color:var(--ink-soft)}
.consent-points strong{color:var(--ink);font-weight:600}
.consent-ic{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);margin-top:.15rem}
.consent-ic svg{width:20px;height:20px}
.consent-ic img{width:15px;height:15px;object-fit:contain}
.consent-safety{margin:0 0 1.5rem;font-size:.86rem;line-height:1.5;color:var(--ink-soft);text-align:left}
/* collapsible disclosure · looks like a real dropdown, caret rotates on open */
.disclose{text-align:left;border:1.5px solid var(--edge);border-radius:.7rem;background:var(--paper);margin:0 0 1.6rem;overflow:hidden}
.disclose summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.05rem;font-size:.92rem;font-weight:600;color:var(--accent);background:var(--paper-3);transition:background .15s,color .15s}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary:hover{background:var(--edge-soft);color:var(--ink)}
.disclose summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.disclose[open] summary{border-bottom:1.5px solid var(--edge)}
.disclose-caret{flex:0 0 auto;font-size:.75rem;color:var(--brass);transition:transform .2s ease}
.disclose[open] .disclose-caret{transform:rotate(180deg)}
.disclose-body{padding:1.05rem 1.1rem;max-height:15rem;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.disclose-eff{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .7rem}
.disclose-body p{margin:0 0 .75rem;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.disclose-body p:last-child{margin-bottom:0}
.disclose-body strong{color:var(--ink);font-weight:600}
/* the agree tick is locked until the terms are scrolled to the end · no assuming they read it */
.disclose-more{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--brass);text-align:center;margin:.55rem 0 0}
.consent-ack.is-locked{opacity:.5;cursor:not-allowed}
.consent-ack.is-locked .box{border-color:var(--edge)}
.linkish{font:inherit;font-size:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkish:hover{color:var(--ink)}
/* acknowledgment checkbox */
.consent-ack{display:inline-flex;align-items:flex-start;gap:.7rem;margin:0 0 1.7rem;cursor:pointer;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.45}
.consent-ack>span:last-child{padding-top:.05rem}
.consent-ack input{position:absolute;opacity:0;width:0;height:0}
.consent-ack .box{flex:0 0 auto;width:1.45rem;height:1.45rem;border:1.5px solid var(--t-urgent);border-radius:.42rem;background:var(--t-urgent);display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.consent-ack input:checked+.box{background:var(--accent);border-color:var(--accent)}

.consent-ack input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
/* nudge when they try to continue without acknowledging */
@keyframes ack-nudge{0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-6px)}30%,60%,90%{transform:translateX(6px)}}
.consent-ack.nudge{animation:ack-nudge .5s ease}
.consent-ack.nudge .box{border-color:var(--accent);box-shadow:0 0 0 3px rgba(39,74,92,.2)}
.ack-hint{margin:-.9rem 0 1.5rem;font-size:.86rem;color:var(--t-urgent);font-weight:600}
.ack-hint strong{font-weight:700}
@media (prefers-reduced-motion:reduce){ .consent-ack.nudge{animation:none}}
.consent .step-actions{margin-top:0}
.consent-summary{margin:.2rem 0 .9rem;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.zip-msg{margin:.35rem 0 1rem;color:var(--ink-soft);font-weight:500;font-size:.85rem;line-height:1.45}

/* Location-off · its own clean, self-contained settings callout (no ugly inline toast).
   Carries its own "Turn on location" button; the county list sits above it. */
.loc-settings{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  margin:.4rem 0 1rem;padding:.6rem .75rem;background:var(--paper-2);
  border:1px solid var(--edge);border-radius:.55rem}
.loc-settings-msg{flex:1 1 100%;color:var(--ink-faint);font-weight:400;
  font-size:.9rem;line-height:1.45}
.loc-settings .btn{flex:0 0 auto}
.loc-settings-hint{flex:1 1 100%;color:var(--ink-faint);font-size:.85rem}
@media(max-width:620px){
  .loc-settings{padding:.55rem .65rem;gap:.45rem .6rem}
  .loc-settings-msg{font-size:.86rem;line-height:1.4}
}

/* --- Erythema migrans (bull's-eye) rash figure · options left, graphic right ---
   Palette-native (warm rust + paper) with the mid ring tied to var(--accent), so the figure
   re-tints itself per portal version. Lives in the shared chassis -> flows to every version. */
.rash-split{ display:flex; gap:clamp(1rem,3vw,2rem); align-items:flex-start; }
.rash-options{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.rash-figure{ flex:0 0 auto; width:clamp(104px,22vw,136px); margin:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.em-svg{ width:100%; height:auto; display:block; --em-rust:#b0553c; --em-rust-deep:#8f3f2b;
  filter:saturate(.72) opacity(.72); transition:filter .35s ease; }
.em-erythema{ fill:var(--em-rust); }
.em-clearing{ fill:var(--paper); }
.em-ring{ fill:var(--accent); }
.em-inner{ fill:var(--paper); }
.em-bite{ fill:var(--em-rust-deep); }
.em-lesion--b, .em-lesion--c{ opacity:0; transform:scale(.2); transform-origin:center;
  transform-box:fill-box; transition:opacity .4s ease, transform .4s cubic-bezier(.2,.9,.3,1.2); }
/* active = user indicated a rash: full saturation + a gentle spreading pulse */
.rash-figure.is-active .em-svg{ filter:saturate(1) opacity(1); }
.rash-figure.is-active .em-erythema{ animation:emSpread 3.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes emSpread{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
/* multi = "more than one" checked: reveal the two satellite lesions, ease the main one smaller */
.rash-figure.is-multi .em-lesion--b, .rash-figure.is-multi .em-lesion--c{ opacity:1; transform:scale(1); }
.rash-figure.is-multi .em-lesion--main{ transform:scale(.82) translate(4px,6px); transform-origin:center; transform-box:fill-box; transition:transform .4s ease; }
.rash-cap{ font-size:.74rem; line-height:1.3; color:var(--ink-faint); font-style:italic; max-width:16ch; }
.rash-cap-multi{ display:none; }
.rash-figure.is-multi .rash-cap-one{ display:none; }
.rash-figure.is-multi .rash-cap-multi{ display:inline; color:var(--accent-2); font-weight:600; font-style:normal; }
@media (max-width:560px){ .rash-split{ flex-direction:column-reverse; align-items:stretch; }
  .rash-figure{ width:132px; align-self:center; }}
@media (prefers-reduced-motion:reduce){ .rash-figure.is-active .em-erythema{ animation:none; }
  .em-lesion--b,.em-lesion--c{ transition:opacity .2s ease; }}

/* 3x100 fixes · emergency CTA */
.emergency-cta{ margin:.8rem 0; padding:.85rem 1rem; border-radius:.6rem; line-height:1.5;
  background:color-mix(in srgb, var(--t-urgent) 9%, var(--paper-2));
  border:1px solid color-mix(in srgb, var(--t-urgent) 30%, var(--edge));
  border-left:4px solid var(--t-urgent); color:var(--ink-soft); font-size:.95rem; }
.emergency-cta strong{ color:var(--t-urgent); }
.emergency-cta a{ color:var(--t-urgent); font-weight:700; text-decoration:underline; }
/* escalate · same-day doctor, NOT an emergency room · escalate accent, not urgent red */
.seek-care{ margin:.8rem 0; padding:.85rem 1rem; border-radius:.6rem; line-height:1.5; text-align:left;
  background:color-mix(in srgb, var(--t-escalate) 9%, var(--paper-2));
  border:1px solid color-mix(in srgb, var(--t-escalate) 30%, var(--edge));
  border-left:4px solid var(--t-escalate); color:var(--ink-soft); font-size:.95rem; }
.seek-care strong{ color:var(--t-escalate); }
.seek-care a{ color:var(--t-escalate); font-weight:700; text-decoration:underline; }
/* not_elevated caution */
.verdict-caution{ margin:.5rem 0 1.6rem; padding:.6rem .8rem; border-radius:.5rem;
  background:color-mix(in srgb, var(--t-watch) 10%, var(--paper-2));
  border-left:3px solid var(--t-watch); color:var(--ink-soft); font-size:.9rem; line-height:1.45; }
.verdict-caution span{ color:var(--t-watch); font-weight:700; margin-right:.15rem; }
/* on-device voice · Listen pill */
.voice-btn{ display:inline-flex; align-items:center; gap:.5rem; margin:.6rem 0 .2rem;
  padding:.5rem .95rem; border:1.5px solid var(--edge); border-radius:2rem; background:var(--paper-2);
  color:var(--accent); font:600 .88rem/1 var(--sans); cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.voice-btn:hover{ border-color:var(--accent); background:var(--paper-3); transform:translateY(-1px); }
.voice-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.voice-btn .voice-ico{ width:1.05rem; height:1.05rem; display:block; flex:0 0 auto; }
.voice-btn.is-playing{ background:var(--accent); border-color:var(--accent); color:#fbf7ee; }
.voice-btn.is-playing .voice-ico{ animation:voicePulse 1s var(--ease) infinite; }
@keyframes voicePulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
@media (prefers-reduced-motion:reduce){ .voice-btn.is-playing .voice-ico{ animation:none }}

/* Layer-assembly reveal · honest "gathering sealed federal layers" moment */
.asm-overlay{ position:fixed; inset:0; z-index:9990; display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:clamp(1rem,4vh,2.5rem) 1.2rem;
  padding-top:max(1rem, env(safe-area-inset-top)); padding-bottom:max(1.2rem, env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s var(--ease); }
.asm-overlay.show{ opacity:1; } .asm-overlay.out{ opacity:0; }
.asm-card{ width:min(34rem,100%); margin-block:auto; flex:0 0 auto; background:var(--paper); border:1px solid var(--edge); border-radius:1rem;
  box-shadow:var(--shadow); padding:1.4rem 1.4rem 1.1rem; }
.asm-kicker{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 .3rem; }
.asm-title{ font-family:var(--serif); font-size:1.35rem; line-height:1.1; margin:0 0 .3rem; color:var(--ink); padding-right:5.4rem; }
/* listen pill sits top-right, vertically centered across from the title */
.asm-card{ position:relative; }
.asm-card > .cl-mini{ position:absolute; top:2.7rem; right:1.4rem; transform:translateY(-50%); margin:0; z-index:2; }
.asm-sub{ font-size:.98rem; color:var(--ink-soft); margin:0 0 1rem; line-height:1.5; }
.asm-list{ list-style:none; margin:0; padding:0; }
.asm-row{ display:grid; grid-template-columns:1.5rem 1.6rem 1fr 6.5rem; grid-template-areas:"check ic body agency";
  gap:.1rem .6rem; align-items:center; padding:.7rem 0; border-top:1px solid var(--edge-soft);
  opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.asm-row:first-child{ border-top:0; } .asm-row.in{ opacity:1; transform:none; }
.asm-check-ok{ grid-area:check; color:#2e7d5b; font-weight:800; font-size:1.05rem; opacity:0; transform:scale(.6); transition:opacity .3s var(--ease) .1s, transform .3s var(--ease) .1s; }
.asm-row.in .asm-check-ok{ opacity:1; transform:none; }
.asm-ic{ grid-area:ic; font-size:1.15rem; }
.asm-body{ grid-area:body; display:flex; flex-direction:column; }
.asm-name{ font-weight:600; color:var(--ink); font-size:1rem; }
.asm-what{ font-size:.9rem; color:var(--ink-soft); line-height:1.4; text-align:left; text-align-last:left; }
.asm-na{ font-style:normal; color:var(--t-watch); }
/* a layer with no federal data for the county: muted dash, not a green success check */
.asm-row--limited{ opacity:.9; }
.asm-check-limited{ color:var(--t-watch); font-weight:800; }
.asm-row--limited .asm-what{ color:var(--t-watch); }
.asm-agency{ grid-area:agency; justify-self:end; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--ink-soft); }
.asm-foot{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--accent); margin:.9rem 0 .2rem;
  opacity:0; transition:opacity .35s var(--ease); } .asm-foot.in{ opacity:1; }
.asm-skip{ display:block; margin:.4rem auto 0; background:none; border:0; color:var(--ink-faint);
  font-size:.75rem; text-decoration:underline; cursor:pointer; }
/* acknowledge-to-proceed button · unlocks only after every sealed layer has shown. Full-width so the
   Listen bar above the layers and this "See my read" button read as a matched pair. */
.asm-continue{ display:flex; width:100%; box-sizing:border-box; min-width:0; margin:1.1rem 0 0; justify-content:center; }
.asm-continue:disabled{ opacity:.55; cursor:progress; }
/* Place the per-section Listen bar UNDER the intro (kicker/title/sub) and ABOVE the layer list
   ("Reported Lyme cases" is the first layer), and span it full-width to match the "See my read" button.
   voice.js appends .cl-mini as the card's last child; flex order repositions it without touching the DOM. */
.asm-card{ display:flex; flex-direction:column; }
.asm-card > .asm-kicker{ order:1; }
.asm-card > .asm-title{ order:2; }
.asm-card > .asm-sub{ order:3; }
.asm-card > .cl-mini{ order:4; margin:.1rem auto 1rem; }
.asm-card > .asm-list{ order:5; }
.asm-card > .asm-foot{ order:6; }
.asm-card > .asm-continue{ order:7; }
.asm-card > .asm-skip{ order:8; }
@media (max-width:520px){ .asm-row{ grid-template-columns:1.5rem 1.6rem 1fr 4.6rem; } .asm-agency{ font-size:.6rem; } .asm-seal{ font-size:.58rem; }}

/* ---- step 2 required-answer gate + review cards + result section headers ---- */
.req-mark{ float:right; font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fbf7ee; border:1px solid rgba(251,247,238,.55); border-radius:.35rem; padding:.12rem .4rem; margin-top:.05rem; }
.group--needs{ border-color:var(--t-urgent); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-urgent) 16%, transparent); }
.group--needs > legend{ background:var(--t-urgent); }
.step-hint{ margin:.2rem 0 1rem; color:var(--t-urgent); font-weight:600; font-size:.9rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }

.review-h{ position:relative; padding-right:5.2rem; font-family:var(--serif); font-size:clamp(1.3rem,4.2vw,2rem); font-weight:600; margin:.1rem 0 .4rem; color:var(--ink); line-height:1.18; }
.review-h #cairn-listen{ position:absolute; top:50%; right:0; left:auto; width:auto; display:inline-flex; transform:translateY(-50%); margin:0; text-align:left; }
.review-h .cl-btn,.review-h .cl-mini{ margin:0; }
.review-lede{ color:var(--ink-soft); margin:0 0 .95rem; line-height:1.5; }
.rev-group{ margin:0 0 .7rem; }
.rev-group > h4{ font-family:var(--serif); font-size:.95rem; font-weight:600; color:var(--accent-deep); background:color-mix(in srgb, var(--accent) 9%, var(--paper-2));
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--edge)); border-bottom:0; border-radius:.5rem .5rem 0 0; padding:.45rem .85rem; margin:0; }
.rev-group .rev-list{ margin:0; border-radius:0 0 .8rem .8rem; border-top:0; }

/* result page · filled header bars (survey vibes) so the readout is clearly differentiated */
.cert > section > h4, .cert-cols > section > h4, .cert-note > h4, .cert-sources > h4{
  font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:0; text-transform:none;
  color:#fbf7ee; background:var(--accent); border-radius:.5rem; padding:.5rem .85rem; margin:0 0 .9rem; border-left:0; }
.cert-note{ background:none; border:0; border-radius:0; padding:0; }
.cert-note p{ margin:.15rem 0 0; font-size:.95rem; line-height:1.55; }
.cert-county > h4{ border-left:4px solid var(--accent); padding-left:.7rem; text-transform:none; letter-spacing:0; }

/* verify page · how-it-works + paste fallback */
/* up-front visual of what to expect · simple, private{ list-style:none; display:flex; gap:.7rem; margin:1.3rem auto 1.4rem; padding:0; max-width:38rem; counter-reset:vs; }
.vstep{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:1rem .7rem;
  background:var(--paper-2); border:1px solid var(--edge); border-radius:.8rem; position:relative; counter-increment:vs; }
.vstep::before{ content:counter(vs); position:absolute; top:.5rem; left:.6rem; font-family:var(--mono); font-size:.6rem; color:var(--ink-faint); }
.vstep-ic{ color:var(--accent); display:flex; } .vstep-ic svg{ width:26px; height:26px; }
.vstep-t{ font-family:var(--serif); font-weight:600; font-size:.98rem; color:var(--ink); }
.vstep-d{ font-size:.8rem; color:var(--ink-soft); line-height:1.4; }
@media (max-width:520px){ .vstep{ flex-direction:row; text-align:left; align-items:flex-start; gap:.7rem; } .vstep-ic svg{ width:22px; height:22px; }}
.vp-label{ display:block; font-size:.82rem; color:var(--ink-soft); margin:0 0 .5rem; }
.vp-opt{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.vp-btns{ display:flex; gap:.5rem; flex-wrap:wrap; }
.vp-btn{ flex:1 1 auto; cursor:pointer; border:1.5px solid var(--edge); background:var(--paper-2); border-radius:2rem;
  padding:.5rem .8rem; font-family:var(--serif); font-size:.9rem; color:var(--ink-soft); transition:border-color .15s, background .15s, color .15s; }
.vp-btn:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--edge)); }
.vp-btn.is-on{ background:var(--accent); border-color:var(--accent); color:#fbf7ee; }
/* two-audience benefit · what the check gives the maker vs a checker */
/* two-audience chooser · the benefit per person{ max-width:38rem; margin:0 auto 1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.vwho{ text-align:left; cursor:pointer; border:1.5px solid var(--edge); border-radius:.8rem; background:var(--paper-2);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.3rem; transition:border-color .15s, background .15s, box-shadow .15s; }
.vwho:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--edge)); }
.vwho.is-on{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent) inset; background:var(--paper); }
.vwho-h{ font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--ink); }
.vwho-d{ font-size:.86rem; line-height:1.45; color:var(--ink-soft); }
.vwho-go{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-top:.15rem; }
/* the chosen path's input gets a soft emphasis ring */
.verify-code.is-suggested, .verify-drop.is-suggested{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); border-radius:.7rem; }
.vcode-label{ display:block; font-size:.82rem; color:var(--ink-soft); margin:0 0 .5rem; }
.vcode-row{ display:flex; gap:.5rem; }
#vcode{ flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--edge); background:var(--paper); border-radius:.6rem; padding:.6rem .8rem; color:var(--ink); }
#vcode:focus-visible{ outline:none; border-color:var(--accent); }
#vcode::placeholder{ color:var(--ink-faint); letter-spacing:.08em; }
#vcodeGo{ flex:0 0 auto; }
.vcode-hint{ margin:.5rem 0 0; font-size:.76rem; line-height:1.5; color:var(--ink-faint); }
/* dummyproof "here's your file · here's where it is" visual */
.vfind{ max-width:34rem; margin:1.1rem auto .2rem; text-align:center; }
.vfind-track{ display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--ink-soft); }
.vfind-doc,.vfind-folder{ display:flex; flex-direction:column; align-items:center; gap:.35rem; flex:0 0 auto; }
.vfind-doc svg{ width:52px; height:auto; }
.vfind-folder svg{ width:60px; height:auto; }
.vfind-brand{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; fill:var(--ink); }
.vfind-arrow{ width:52px; height:20px; color:var(--accent); flex:0 0 auto; }
.vfind-cap{ font-size:.68rem; line-height:1.3; color:var(--ink-soft); }
.vfind-cap code{ font-size:.66rem; }
.vfind figcaption{ margin:.55rem 0 0; font-size:.76rem; color:var(--ink-faint); }
.cookie-state{ font-size:.9rem; color:var(--ink-soft); margin:.5rem 0 0; }

/* Persistent county card on the certificate · the sealed federal county stack */
.cert-county{ margin:2.1rem 0 0; padding:1rem 1.1rem; background:var(--paper-2);
  border:1px solid var(--edge); border-left:3px solid var(--accent); border-radius:.7rem; }
.cert-county h4{ margin:0 0 .5rem; font-size:.95rem; color:var(--ink); }
.cert-county p{ font-size:.9rem; color:var(--ink-soft); line-height:1.5; margin:.3rem 0; }
.cert-county-sub{ font-size:.85rem; }
.cert-county-src{ font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); margin-top:.6rem; }

/* plain-language glossary affordance · a term carrying a title="" tooltip a layperson can hover or long-press */
.term{ border-bottom:1px dotted currentColor; cursor:help; text-decoration:none; }
.cert-county .term,.asm-what .term{ color:var(--ink); }

/* ---- readable typography on review + result (match the rest of the site, not tiny) ---- */
.rev-row dt{ font-size:.92rem; color:var(--ink-soft); }
.rev-row dd{ font-size:.92rem; }
.cert li{ font-size:1rem; line-height:1.5; margin:.45rem 0; }
.cert .cite{ font-size:.86rem; }
.cert .verdict-sub{ font-size:1.05rem; line-height:1.55; }
.when-context{ margin:1.3rem 0 0; padding:.7rem .9rem; background:var(--paper-2); border:1px solid var(--edge);
  border-left:3px solid var(--accent); border-radius:.6rem; font-size:.85rem; color:var(--ink-soft); line-height:1.5; }
.when-context b{ color:var(--ink); }

/* ---- "What went into your read" · the federal stack, in plain language ---- */
.cert-sources{ margin:2.1rem 0 0; }
.cert-sources-lede{ font-size:1.02rem; color:var(--ink-soft); line-height:1.55; margin:0 0 1rem; text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.source-list{ list-style:none; margin:0; padding:0; }
.source-item{ display:grid; grid-template-columns:1.5rem 1fr; gap:.2rem .7rem; align-items:start;
  padding:.85rem 0; border-top:1px solid var(--edge-soft); }
.source-item:first-child{ border-top:0; padding-top:.2rem; }
.src-check{ color:#2e7d5b; font-weight:800; font-size:1.1rem; line-height:1.4; }
.src-body{ min-width:0; }
.src-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .7rem; margin:0 0 .15rem; }
.src-head b{ font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--ink); }
.src-agency{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#fbf7ee;
  background:var(--accent); border-radius:.35rem; padding:.14rem .45rem; }
.src-body p{ margin:0; font-size:1rem; line-height:1.5; color:var(--ink-soft); }
.src-body p b{ color:var(--ink); }
.src-invite{ margin:.9rem 0 0; font-size:.95rem; color:var(--ink-soft); font-style:italic; text-align:center; }
.src-invite p{ margin:0; }
.src-invite-btn{ margin-top:.65rem; font-style:normal; }
.src-year{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-faint); }
.src-tag{ margin-top:.55rem; }   /* agency chip on its own row under the body, not crowding the heading */

/* agency education · a tappable tag that teaches who the agency is + what the data is */
.agency-tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:none; border:0; border-bottom:1px dotted var(--accent); padding:0 0 .06rem; cursor:help; white-space:nowrap; }
.agency-tag:hover,.agency-tag:focus-visible{ color:var(--accent-2); border-bottom-style:solid; outline:none; }
.asm-row .agency-tag{ grid-area:agency; justify-self:end; align-self:center; }
.agency-info{ margin:.5rem 0 .1rem; padding:.6rem .75rem; background:var(--ink); border-radius:.5rem;
  animation:rise .18s var(--ease) both; }
.agency-info b{ display:block; font-family:var(--sans); font-size:.84rem; margin:0 0 .22rem; color:#fff; }
.agency-info p{ margin:0; font-family:var(--sans); font-size:.82rem; line-height:1.5; color:rgba(251,247,238,.86); text-align:left; }

/* end-of-flow handoff to prevention + learning */
/* one beautiful full-width button to the prevention/learning page (was a 3-row card) */
.learn-cta-btn{ display:flex; width:100%; margin:1.4rem 0 0; justify-content:center; align-items:center; gap:.5rem; min-height:2.6rem; font-size:.92rem; }
/* Shared "continue to the next section" button. Fixed width + height so every page's button is identical. */
.page-next{ display:flex; width:17rem; max-width:calc(100% - 1.6rem); margin:2.2rem auto .2rem; justify-content:center; align-items:center; gap:.45rem; min-height:2.5rem; padding:.55rem 1.2rem; font-size:.86rem; text-align:center; line-height:1.3; box-sizing:border-box; }
/* Tasteful outline pill for an external reference (e.g. the CDC), instead of a standalone link sentence. */
.cdc-pill{ display:inline-flex; align-items:center; gap:.35rem; margin:.7rem 0 0; padding:.45rem .9rem; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--edge)); background:color-mix(in srgb,var(--accent) 6%,transparent);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); text-decoration:none; font-weight:600; transition:background .15s ease; }
.cdc-pill:hover,.cdc-pill:focus-visible{ background:color-mix(in srgb,var(--accent) 13%,transparent); outline:none; }

/* visual lineage · a horizontal track of mini report-cards, connected{ display:flex; align-items:center; justify-content:flex-start; gap:0; overflow-x:auto; padding:.5rem .2rem 1rem;
  margin:0 0 .3rem; scrollbar-width:thin; }
.tl-node.t-urgent .tl-node-dot{ background:var(--t-urgent); box-shadow:0 0 0 3px color-mix(in srgb,var(--t-urgent) 16%,transparent); }
.tl-node.t-escalate .tl-node-dot{ background:var(--t-escalate); box-shadow:0 0 0 3px color-mix(in srgb,var(--t-escalate) 16%,transparent); }
.tl-node.t-not_elevated .tl-node-dot{ background:var(--t-low); box-shadow:0 0 0 3px color-mix(in srgb,var(--t-low) 16%,transparent); }
@keyframes tlPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 30%,transparent); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent); } }

/* rash question help + timeline reset */
.field-help{ margin:.45rem 0 .2rem; font-size:.84rem; line-height:1.45; color:var(--ink-soft); font-family:var(--serif); }

/* trust banner · small, top-left, subtle · same tasteful weight as the share button */
.trust-banner{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-start; margin:0 0 1.2rem;
  background:none; border:0; padding:0; }
.trust-banner-ic{ flex:0 0 auto; display:flex; color:var(--accent); }
.trust-banner-ic svg{ width:18px; height:18px; }
.trust-banner-text{ margin:0; font-size:.76rem; line-height:1.4; color:var(--ink-faint); }
.trust-banner-text strong{ color:var(--ink-soft); font-weight:600; }
.trust-chip{ flex:0 0 auto; font-family:var(--mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:none; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--edge)); border-radius:2rem; padding:.22rem .55rem; white-space:nowrap; }

/* transparent local-exposure index · the judge-facing score */
.cert-exposure{ margin:2.1rem 0 0; }
/* Diagnosed-Lyme guidance card (the wildcard fork) + its optional question · calm, on-brand, no risk score */
/* the diagnosed/treated question is a normal boxed question, matching every other .group
   (bordered card + accent legend bar) so it does not read as an odd, unstyled outlier */
.dx-gate{ margin:.4rem 0 1.7rem; }
.guidance-card{ background:#fbf7ee; border:1.5px solid var(--edge); border-radius:1rem; box-shadow:var(--shadow); padding:clamp(1.4rem,4vw,2.2rem); }
.guidance-kicker{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 .45rem; }
.guidance-h{ font-family:var(--serif); font-size:clamp(1.4rem,4.5vw,1.85rem); font-weight:600; color:var(--ink); margin:0 0 .6rem; line-height:1.2; }
.guidance-lead{ font-family:var(--serif); font-size:1.12rem; line-height:1.5; color:var(--ink); margin:0 0 1rem; }
.guidance-points{ margin:0 0 1.3rem; padding-left:1.15rem; }
.guidance-points li{ font-family:var(--serif); font-size:1.02rem; line-height:1.5; color:var(--ink-soft); margin:.5rem 0; }
.guidance-legal{ font-size:.82rem; line-height:1.45; color:var(--ink-faint); margin:1.1rem 0 0; }
.exp-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.1rem; }
/* exposure section header · same filled bar as the other result sections (one voice) */
.exp-kicker{ display:block; width:100%; font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:0; text-transform:none; color:#fbf7ee; background:var(--accent); border-radius:.5rem; padding:.5rem .85rem; margin:0 0 .9rem; }
.exp-score{ display:flex; align-items:baseline; gap:.4rem; }
.exp-num{ font-family:var(--serif); font-size:clamp(2.8rem,9vw,3.6rem); font-weight:600; color:var(--accent); line-height:1; }
.exp-den{ font-family:var(--serif); font-size:1.25rem; color:var(--ink-faint); }
/* Geo-Read badge · compact, right-aligned, makes clear this is a read of the AREA not the person */
.exp-geo{ display:flex; flex-direction:column; align-items:center; gap:.15rem; flex:0 0 auto; width:58px; color:var(--accent); }
.exp-geo-pin{ width:22px; height:22px; }
.exp-geo-state{ font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--accent); line-height:1; }
.exp-geo-label{ font-family:var(--mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.exp-lead{ flex:1; margin:0; font-family:var(--serif); font-size:1.18rem; font-weight:600; line-height:1.35; color:var(--ink); }
/* data freshness line under the building blocks */
.cert-sources-checked{ margin:.9rem 0 0; font-family:var(--mono); font-size:.66rem; letter-spacing:.03em; color:var(--ink-faint); }
/* factor rows · each a clean two-line item with a contained bar (never overflows) */
/* 100%-stacked bar: one bar, one colored segment per factor, widths = each factor's share */
.exp-stack{ display:flex; width:100%; height:2.4rem; border-radius:.5rem; overflow:hidden; margin:.2rem 0 1.2rem; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.exp-seg{ display:flex; align-items:center; justify-content:center; min-width:0; box-shadow:inset -1px 0 0 rgba(255,255,255,.35); }
.exp-seg:last-child{ box-shadow:none; }
.exp-seg-lab{ font-family:var(--mono); font-size:.66rem; letter-spacing:.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:clip; padding:0 .35rem; text-shadow:0 1px 1px rgba(0,0,0,.18); }
.exp-list{ list-style:none; margin:0; padding:0; }
.ef{ padding:.55rem 0; border-top:1px solid var(--edge-soft); }
.ef:first-child{ border-top:0; padding-top:0; }
.ef-top{ display:flex; align-items:baseline; gap:.5rem; }
.ef-dot{ flex:none; width:.62rem; height:.62rem; border-radius:.18rem; transform:translateY(.06rem); }
.ef-name{ font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink); }
.ef-share{ margin-left:auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; color:var(--ink-soft); white-space:nowrap; }
.ef-pts{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; }
.ef-pts b{ color:var(--accent); font-size:.9rem; }
.ef-bot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-top:.15rem; }
.ef-val{ font-size:.9rem; color:var(--ink-soft); }
.ef-meta{ font-family:var(--mono); font-size:.62rem; letter-spacing:.02em; color:var(--ink-faint); }
.exp-grain{ font-family:var(--mono); font-size:.52rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  border:1px solid var(--edge); border-radius:.3rem; padding:.05rem .3rem; }
/* tap-to-reveal weight rationale · the "% weight" is a quiet button, the reason drops below the row */
.ef-weight{ font:inherit; font-family:var(--mono); font-size:.62rem; letter-spacing:.02em; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; border-bottom:1px dotted color-mix(in srgb, var(--accent) 45%, transparent); }
.ef-weight:hover,.ef-weight:focus-visible{ color:var(--accent-2); outline:none; }
.ef-why{ margin:.4rem 0 0; font-size:.82rem; line-height:1.5; color:var(--ink-soft); background:var(--paper-2); border-left:2px solid color-mix(in srgb, var(--accent) 40%, var(--edge)); padding:.4rem .6rem; border-radius:.3rem; }
.exp-care{ margin:.85rem 0 0; font-size:.85rem; line-height:1.5; color:var(--ink-soft); text-align:left; }
.exp-care .care-ic{ color:var(--brass); margin-right:.3rem; }
.exp-explain{ margin:1rem 0 1.15rem; font-size:.9rem; line-height:1.6; color:var(--ink-soft); text-align:left; }
.exp-method{ margin:.9rem 0 0; font-size:.78rem; line-height:1.5; color:var(--ink-faint); text-align:left; }
.exp-note{ margin:.7rem 0 0; font-family:var(--serif); font-style:italic; font-size:.86rem; line-height:1.55; color:var(--ink-faint); text-align:left; }

/* evergreen education · plain-terms prevention + co-infections, collapsible, at the page's end */
.learn{ max-width:50rem; margin:0 auto; padding:3rem 1.2rem 1rem; animation:rise .42s var(--ease) both; }
.learn-inner{ text-align:center; max-width:46rem; margin-inline:auto; }
.learn-h{ font-family:var(--serif); font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.12; letter-spacing:.005em; font-weight:600; color:var(--ink); margin:.2rem 0 .3rem; }
.learn-lede{ font-family:var(--serif); font-style:italic; font-size:clamp(1.02rem,1.5vw,1.14rem); color:var(--ink-soft); margin:0 0 1.6rem; }
/* tabbed panel · one topic shown at a time, swapped in place (no cascading page-push) */
/* The whole interactive section (nav + listen + images) lives in one bounded card so it clearly reads
   as a single unit tied to its images. */
.learn-box{ position:relative; max-width:46rem; margin:0 auto; padding:1.1rem 1.15rem 1.3rem; border:1px solid var(--edge); border-radius:1.1rem;
  background:color-mix(in srgb,var(--accent) 3%,var(--paper-2)); box-shadow:0 1px 2px rgba(35,32,26,.03); }
/* Shaded segmented nav bar: a track with the active category filled in. */
.learn-tabs{ display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap; width:-moz-fit-content; width:fit-content; max-width:100%;
  margin:0 auto 1.1rem; padding:.35rem; background:var(--paper); border:1px solid var(--edge); border-radius:.8rem; }
.learn-tab{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; border:0; background:none; border-radius:.55rem;
  padding:.45rem .85rem; font-family:var(--serif); font-size:.95rem; font-weight:600;
  color:var(--ink-soft); transition:background .15s, color .15s; }
.learn-tab:hover{ color:var(--ink); }
.learn-tab.is-on{ background:var(--accent); color:#fbf7ee; box-shadow:0 2px 6px -3px rgba(21,76,60,.5); }
.learn-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.learn-tab .learn-ic{ display:flex; } .learn-tab .learn-ic svg{ width:18px; height:18px; }
.learn-panels{ text-align:left; max-width:46rem; margin-inline:auto; border:1px solid var(--edge); border-radius:.8rem; background:var(--paper-2); padding:1.1rem 1.3rem; min-height:9.5rem; }
.learn-panel{ font-family:var(--serif); color:var(--ink-soft); line-height:1.6; font-size:.95rem; text-align:left; -webkit-hyphens:none; hyphens:none; }
.learn-panel[hidden]{ display:none; }
.learn-panel ul{ margin:0; padding-left:1.1rem; } .learn-panel li{ margin:.45rem 0; }
.learn-panel p{ margin:0 0 .7rem; } .learn-panel p:last-child{ margin:0; } .learn-panel strong{ color:var(--ink); }
/* prevention points · a small icon per point so each reads as an illustrated tip, not a wall of text */
.learn-panel ul.learn-tips{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.learn-panel li.learn-tip{ margin:0; display:flex; gap:.85rem; align-items:center; text-align:left; }
.tip-ic{ flex:0 0 auto; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 14%, var(--paper)); color:var(--accent); box-shadow:0 1px 0 var(--edge-soft); }
.tip-ic svg{ width:22px; height:22px; }
.learn-tip p, .learn-callout p{ margin:0; font-family:var(--serif); font-size:.95rem; line-height:1.55; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.learn-callout{ display:flex; gap:.85rem; align-items:center; text-align:left; }
.learn-callout .tip-ic{ color:var(--t-watch); background:color-mix(in srgb, var(--t-watch) 14%, var(--paper)); }
@media (max-width:560px){ .learn-box{ padding:.9rem .7rem 1rem; } .learn-tabs{ gap:.2rem; padding:.3rem; } .learn-tab{ font-size:.82rem; padding:.4rem .55rem; } .learn-panels{ min-height:12rem; } .tip-ic{ width:34px; height:34px; }}

/* tasteful line icons in the reveal */
.asm-ic{ display:flex; align-items:center; justify-content:center; color:var(--accent); }
.asm-ic svg{ width:22px; height:22px; }

/* warmer editorial fonts · descriptions in serif, citations in the footer's serif italic */
.asm-what{ font-family:var(--serif); }
.src-body p{ font-family:var(--serif); text-align:left; -webkit-hyphens:none; hyphens:none; }
.cert-sources-lede{ font-family:var(--serif); }
.cert-cols li{ font-family:var(--serif); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.cert .cite{ font-family:var(--serif); font-style:italic; font-size:.92rem; letter-spacing:0; text-transform:none; color:var(--ink-soft); }

/* verify timeline · per-report code + controls{ font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; color:var(--ink-faint); }

/* Check a Report · green what-to-expect cards, question + answer both on the front (answer in Work Sans) */
/* Q&A · accordion, LAST on the page · question shown{ display:block; max-width:34rem; margin:2rem auto 0; padding-top:1.4rem; border-top:1px solid var(--edge); }
.vqa{ border:1px solid var(--edge); border-radius:.7rem; margin:0 0 .5rem; background:var(--paper-2); overflow:hidden; }
.vqa summary{ cursor:pointer; list-style:none; padding:.75rem 1rem; font-family:var(--serif); font-weight:600; font-size:.95rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.vqa summary::-webkit-details-marker{ display:none; }
.vqa summary::after{ content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.15rem; line-height:1; }
.vqa[open] summary::after{ content:"\2013"; }
.vqa p{ margin:0; padding:0 1rem .85rem; font-size:.86rem; line-height:1.55; color:var(--ink-soft); }
.vqa code{ font-family:var(--mono); font-size:.9em; background:color-mix(in srgb,var(--accent) 8%, var(--paper)); padding:.02rem .3rem; border-radius:.25rem; }
.vqa a{ color:var(--accent); text-decoration:underline; font-weight:600; }
/* inline code feedback · sits right under the Check-code button, not down in the results */
.vcode-err{ margin:.55rem 0 0; font-size:.82rem; line-height:1.45; color:#8a3323; background:color-mix(in srgb,#8a3323 7%, var(--paper)); border:1px solid color-mix(in srgb,#8a3323 24%, var(--edge)); border-radius:.5rem; padding:.5rem .7rem; }
.vcode-err code{ font-family:var(--mono); background:transparent; }
.verify-pick.is-suggested .verify-pick-btn{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent), 0 10px 26px -14px rgba(31,111,92,.7); }
/* the quiet delight · the button reveals itself as a drop target only once a file is actually dragged over */
.verify-pick.is-over{ outline-color:color-mix(in srgb,var(--accent) 60%, var(--edge)); transform:scale(1.01); }
.verify-pick.is-over .verify-pick-btn::after{ content:" · drop to check"; font-weight:400; opacity:.9; }

/* plain-language hover/tap definition (e.g. PII) · opens downward so the card's clip never cuts it */
.hint{ position:relative; cursor:help; border-bottom:1px dotted currentColor; text-transform:none; }
.hint:focus{ outline:none; }
.hint-pop{ position:absolute; right:0; left:auto; top:calc(100% + .5rem); z-index:30; width:min(15rem,72vw);
  background:var(--ink); color:var(--paper); font-family:var(--sans); font-weight:400; font-size:.72rem; line-height:1.45; letter-spacing:0; text-transform:none; text-align:left;
  padding:.55rem .7rem; border-radius:.5rem; box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s var(--ease), transform .15s var(--ease); pointer-events:none; }
/* touch + keyboard: focus or an explicit tap-toggle (.is-open) shows it, and a tap elsewhere
   closes it (verify.js). Hover only applies on hover-capable devices, so a phone's sticky
   :hover can't leave the tooltip stuck open after a tap. */
.hint:focus .hint-pop, .hint:focus-within .hint-pop, .hint.is-open .hint-pop{ opacity:1; visibility:visible; transform:none; }
@media (hover:hover){ .hint:hover .hint-pop{ opacity:1; visibility:visible; transform:none; }}
.hint-pop::after{ content:""; position:absolute; right:.9rem; bottom:100%; border:6px solid transparent; border-bottom-color:var(--ink); }

/* illustrative timeline under the drop area · clearly an example{ margin:1.3rem auto 0; max-width:38rem; padding:1rem 1.1rem 1.1rem; border:1px solid var(--edge); border-radius:.9rem; background:color-mix(in srgb, #fff 45%, var(--paper)); box-shadow:0 12px 30px -22px rgba(35,32,26,.5); text-align:left; }
.tl-sample-dot.d-low{ background:var(--t-low); } .tl-sample-dot.d-watch{ background:var(--t-watch); } .tl-sample-dot.d-esc{ background:var(--t-escalate); }

@media print{
  .sitenav, .masthead, .sitebar-foot,
  .page--verify .standard, #cairn-fb, .paper-grain, .vignette,
  .page--verify .step-kicker, .page--verify .page-h, .page--verify .page-lede{ display:none !important; }
  body{ background:#fff !important; } #out{ display:block !important; }}

/* Trustworthy AI badge · lives in the About "Where AI comes in" block */
.ai-badge{ display:inline-flex; align-items:center; gap:.5rem; margin:.8rem 0 0; padding:.42rem .9rem; border-radius:2rem; background:color-mix(in srgb, var(--accent) 10%, var(--paper)); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--edge)); color:var(--accent); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.ai-badge svg{ width:15px; height:15px; flex:0 0 auto; }

/* verify result · lead with the read + date, confirmation is a subline */
.vr-kicker{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .3rem; }
.vr-tier{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.15; color:var(--ink); margin:0 0 .2rem; }
.vr-when{ font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--ink-soft); margin:0 0 .85rem; }
.vr-confirm{ font-size:.88rem; line-height:1.55; color:var(--ink-soft); margin:0; }
.vr-ok{ color:#2e7d5b; font-weight:700; margin-right:.15rem; }
.vr-confirm--bad{ color:var(--t-watch); }

/* verify status · hover reveals the "unchanged" explanation, keeps the card tidy */
.vstatus{ font-weight:600; }
.vstatus--ok{ color:#2e7d5b; }
.vstatus--bad{ color:var(--t-watch); }

/* justify the verify page body copy (parity with the rest of the site) */
.page--verify .page-lede, .page--verify .vwho-d{ text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }

/* ── Three-pillar context band (where you are · what's around you) ─────────────
   Symptoms lead; this band carries the capped where+when + environment context
   and the honest next-step nudge. Never green (no all-clear). Logic: read_model.js */
.context-band{ margin:1.8rem 0 0; padding:1rem 1.15rem 1.05rem; border-radius:.85rem;
  background:var(--paper-2); border:1px solid var(--edge); border-left:4px solid var(--t-low); }
.context-band.ctx-high{ border-left-color:var(--t-watch); background:color-mix(in srgb, var(--t-watch) 7%, var(--paper-2)); }
.context-band.ctx-moderate{ border-left-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 5%, var(--paper-2)); }
.context-band.ctx-low{ border-left-color:var(--t-low); background:color-mix(in srgb, var(--t-low) 5%, var(--paper-2)); }
/* context-band header · same filled bar as the other result sections */
.ctx-head{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; background:var(--accent); border-radius:.5rem; padding:.5rem .85rem; margin:0 0 .8rem; }
.ctx-kicker{ font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:0; text-transform:none; color:#fbf7ee; }
.ctx-level{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, #fff 82%, var(--accent)); }
.ctx-pillars{ display:flex; gap:.6rem; margin:.7rem 0 .2rem; flex-wrap:wrap; }
.ctx-pill{ flex:1 1 12rem; display:flex; flex-direction:column; gap:.18rem; padding:.55rem .7rem;
  background:var(--paper); border:1px solid var(--edge-soft); border-radius:.55rem; }
.ctx-pill-k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.ctx-pill-v{ font-size:.86rem; line-height:1.35; color:var(--ink-soft); }
.ctx-nudge{ margin:.6rem 0 0; line-height:1.6; color:var(--ink); }

/* citation line under the "how CAIRN works / what we tested" disclosure */
.cert-cite{ margin:.5rem 0 0; font-size:.76rem; line-height:1.5; color:var(--ink-faint); font-style:italic; }

/* light reference line inside the About "who gets looked over" block */
.about-cite{ margin:.9rem 0 .55rem; font-size:.53rem; line-height:1.4; color:var(--ink-faint); font-style:italic; opacity:.55; }

/* Learn/Prevention · plain-English "what Lyme is" summary above the tabs */
.learn-intro{ max-width:46rem; margin:0 auto 1.6rem; padding:1.4rem 1.5rem 1.3rem; border:1px solid var(--edge); border-radius:.9rem; background:color-mix(in srgb, var(--accent) 5%, var(--paper-2)); text-align:left; }
.learn-intro-head{ display:flex; align-items:center; gap:.7rem; margin:0 0 .85rem; }
.learn-intro-ic{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--accent); color:#fff; }
.learn-intro-ic svg{ width:22px; height:22px; }
.learn-intro-k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.learn-intro p{ margin:0 0 .8rem; font-family:var(--serif); font-size:.95rem; line-height:1.65; color:var(--ink-soft); text-align:left; text-align-last:left; -webkit-hyphens:none; hyphens:none; }
.learn-intro p:last-child{ margin-bottom:0; }
.learn-cite{ font-size:.92rem !important; font-style:italic; color:var(--ink-faint) !important; }
/* standards trademark footnote: small serif italic, same quiet register as the 'go deeper' cite */
.mc-trademark{ font-family:var(--serif); font-style:italic; font-size:.8rem; line-height:1.5; color:var(--ink-faint); margin:.9rem 0 0;
  background:color-mix(in srgb,var(--accent) 5%,transparent); border:1px solid color-mix(in srgb,var(--accent) 13%,var(--edge)); border-radius:.6rem; padding:.7rem .9rem; }
.learn-cite a{ color:var(--accent); }

/* care-access note · separate from the risk read (HRSA shortage-area) */
.care-note{ margin:1.4rem 0 0; padding:.7rem .9rem; background:var(--paper-2); border:1px solid var(--edge); border-left:3px solid var(--accent-2); border-radius:.6rem; font-size:.9rem; line-height:1.5; color:var(--ink-soft); display:flex; gap:.55rem; align-items:flex-start; }
.care-ic{ color:var(--accent-2); flex:0 0 auto; }

/* direct dataset citation links under the Federal Data tiles */
.data-links{ margin:1.6rem 0 0; padding:1.15rem 1.3rem; border:1px solid var(--edge); border-radius:.85rem; background:var(--paper-2); }
.data-links-h{ font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .6rem; }
.data-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.data-links li{ font-size:.88rem; line-height:1.4; }
.data-links a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* clinician-voice quote · finished (permission granted). A calm accent-tinted card, not a placeholder. */
.about-voice{ margin:1.1rem 0 0; padding:1rem 1.15rem; border:1px solid var(--edge); border-left:3px solid color-mix(in srgb, var(--accent) 55%, var(--edge)); border-radius:.7rem; background:color-mix(in srgb, var(--accent) 4%, var(--paper-2)); }
/* placeholder variant · dashed + amber until permission is granted (reusable for future voices) */
.about-voice[data-placeholder]{ border:1px dashed color-mix(in srgb, var(--t-watch) 45%, var(--edge)); border-left:1px dashed color-mix(in srgb, var(--t-watch) 45%, var(--edge)); background:color-mix(in srgb, var(--t-watch) 5%, var(--paper-2)); }
.about-voice-tag{ display:inline-block; font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t-watch); border:1px solid color-mix(in srgb, var(--t-watch) 45%, var(--edge)); border-radius:2rem; padding:.12rem .55rem; margin:0 0 .55rem; }
.about-voice figcaption a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.about-voice blockquote{ margin:0; font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.5; color:var(--ink); }
.about-voice figcaption{ margin:.55rem 0 0; font-size:.78rem; color:var(--ink-faint); }

/* Listen · on-device read-aloud (voice.js). A small round mark (echoes the CAIRN seal) that sits
   inline right after each page's headline. */
.cl-host{ }
/* Listen · a calm, labelled outline pill that sits by the headline — NOT a heavy solid
   dark circle (that read as an ugly black blob popping up on the page). Matches .cl-mini. */
#cairn-listen{ display:inline-flex; vertical-align:middle; margin:0 0 0 .55rem; line-height:0;
  font-family:var(--sans,-apple-system,Segoe UI,Roboto,Arial,sans-serif); }
/* when the Listen pill drops BELOW the headline/sub (hero bands, the consent gate), give it air so it
   is not jammed against the text above it. */
.mc-hero #cairn-listen{ margin-top:1.05rem; }
.consent-h #cairn-listen, .consent #cairn-listen{ margin-top:.4rem; }
.cl-btn{ display:inline-flex; align-items:center; gap:.42rem; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--edge)); background:color-mix(in srgb, var(--accent) 6%, var(--paper));
  color:var(--accent); border-radius:999px; padding:.38rem .9rem .38rem .78rem; min-height:1.9rem; vertical-align:middle;
  font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 1px 0 var(--edge-soft);
  transition:transform .15s var(--ease,ease), box-shadow .15s, background .15s, border-color .15s, color .15s; }
.cl-btn:hover{ background:color-mix(in srgb, var(--accent) 12%, var(--paper)); border-color:var(--accent); transform:translateY(-1px); box-shadow:0 5px 14px -7px rgba(31,111,92,.45); }
.cl-btn .cl-ic{ width:.85rem; height:.85rem; display:block; flex:0 0 auto; }
#cairn-listen .cl-lab{ display:inline; }
.cl-btn.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* on the dark forest hero: ivory-on-forest so it reads cleanly instead of a clashing light pill */
.mc-hero .cl-btn{ background:rgba(255,255,255,.08); border-color:rgba(154,217,194,.42); color:var(--em-mint); box-shadow:none; }
.mc-hero .cl-btn:hover{ background:rgba(255,255,255,.16); border-color:var(--em-mint); box-shadow:none; }
.mc-hero .cl-btn.is-on{ background:var(--em-mint); color:var(--em-2); border-color:var(--em-mint); }
/* Mobile: the Listen control drops to its own centered line under the headline (never jammed inline at
   the edge where it clips, e.g. the Model Card hero). This rule lives AFTER the base #cairn-listen rule
   so it wins the cascade — the earlier copy up top was being overridden by source order and never applied. */
@media (max-width:34rem){
  #cairn-listen{ display:block; width:100%; margin:.55rem 0 0; text-align:center; line-height:1.2; }
  #cairn-listen .cl-btn{ margin-left:auto; margin-right:auto; }
  .mc-hero #cairn-listen{ margin-top:.8rem; }
}
/* per-section Listen (data-listen) · a full-width bar that sits at the FOOT of its box and spans it,
   so it reads as part of the section instead of a stray pill jammed on top. Only the active panel's
   bar shows, so it travels with the section you're reading. */
/* per-section Listen (data-listen) · the SAME pill as the page-level control, centered at the section
   foot, so every Listen button on the site shares one size and shape. */
.cl-mini{ display:flex; width:-moz-fit-content; width:fit-content; max-width:100%; box-sizing:border-box; margin:1rem auto 0; align-items:center; justify-content:center; gap:.42rem; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--edge)); background:color-mix(in srgb, var(--accent) 6%, var(--paper));
  color:var(--accent); border-radius:999px; padding:.38rem .9rem; min-height:1.9rem;
  font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 1px 0 var(--edge-soft); transition:background .15s, border-color .15s, color .15s, transform .15s; }
.cl-mini:hover{ transform:translateY(-1px); }
.cl-mini:hover{ background:color-mix(in srgb, var(--accent) 11%, var(--paper)); border-color:var(--accent); }
.cl-mini .cl-ic{ width:1rem; height:1rem; flex:0 0 auto; }
.cl-mini.is-on{ background:var(--accent); color:#fff; border-color:var(--accent); }
@media print{ #cairn-listen, .cl-mini{ display:none !important; }}

/* floating confirmation chip (Share 'Link copied', etc.) — on-brand warm card, NOT a black box */
#cairn-toast{ position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); z-index:9999;
  max-width:min(30rem, calc(100vw - 2rem)); text-align:left; line-height:1.4;
  background:var(--paper); color:var(--ink); border:1px solid var(--edge); border-left:4px solid var(--accent);
  font-family:var(--sans,-apple-system,Segoe UI,Roboto,Arial,sans-serif);
  font-size:.9rem; font-weight:600; letter-spacing:.01em; padding:.7rem 1.05rem; border-radius:.7rem;
  box-shadow:0 18px 44px -20px rgba(35,32,26,.5), 0 1px 0 var(--edge-soft); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease,ease), transform .2s var(--ease,ease); }
#cairn-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media print{ #cairn-toast{ display:none !important; }}

/* hero small-screen guard · guarantee the wordmark + lede fit narrow phones (no clip) */
@media (max-width:400px){
  .wordmark{ font-size:clamp(2.1rem,10.5vw,2.7rem); letter-spacing:.08em; padding-left:0; }
  .masthead{ padding-left:1rem; padding-right:1rem; }
  .lede{ font-size:1rem; }
}
/* smaller, more tasteful hero on phones: less top space and a trimmer wordmark + phrase */
@media (max-width:560px){
  .v-home .masthead{ padding-top:1.5rem; padding-bottom:.6rem; }
  .v-home .wordmark{ font-size:clamp(2.3rem,11vw,3rem); margin-bottom:.15rem; }
  body:not(.v-home) .masthead{ padding-top:.7rem; padding-bottom:.4rem; }
  body:not(.v-home) .lede{ font-size:clamp(1.12rem,4.6vw,1.5rem); margin:.05rem 0 .3rem; }
}
.verify-more .standard{ padding:1.1rem 1.15rem; margin:0; }

/* guided FHIR hand-off modal (handoff.js) */
.ho-overlay{ position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; padding:1.2rem; background:rgba(12,30,24,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.ho-card{ position:relative; width:min(33rem,100%); max-height:88vh; overflow:auto; background:var(--paper); border:1px solid var(--edge); border-top:3px solid var(--accent); border-radius:1.2rem; padding:1.9rem 1.7rem 1.5rem; box-shadow:0 40px 90px -36px rgba(12,30,24,.65); }
.ho-x{ position:absolute; top:.65rem; right:.8rem; width:1.9rem; height:1.9rem; display:grid; place-items:center; border:0; background:none; font-size:1.45rem; line-height:1; color:var(--ink-faint); cursor:pointer; border-radius:50%; transition:background .15s, color .15s; }
.ho-x:hover{ background:var(--paper-3); color:var(--ink); }
.ho-kicker{ font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem; }
.ho-dots{ display:flex; gap:.4rem; margin:0 0 1.15rem; }
.ho-dots i{ width:.5rem; height:.5rem; border-radius:50%; background:var(--edge); transition:background .2s, transform .2s; }
.ho-dots i.on{ background:var(--accent); transform:scale(1.18); }
.ho-step h3{ font-family:var(--serif); font-size:1.3rem; font-weight:600; letter-spacing:-.005em; margin:0 0 .65rem; color:var(--ink); }
.ho-step p{ font-size:.92rem; line-height:1.6; color:var(--ink-soft); margin:0 0 .85rem; text-align:left; -webkit-hyphens:none; hyphens:none; }
.ho-note{ font-size:.82rem !important; color:var(--ink-faint) !important; }
.ho-list{ list-style:none; margin:0 0 .9rem; padding:0; }
.ho-list li{ position:relative; padding-left:1.5rem; margin:.5rem 0; font-size:.92rem; line-height:1.5; color:var(--ink-soft); }
.ho-list li::before{ content:""; position:absolute; left:.1rem; top:.52rem; width:.5rem; height:.5rem; border-radius:50%; background:color-mix(in srgb,var(--accent) 55%,var(--edge)); }
.ho-rawtoggle{ width:100%; justify-content:center; margin:.3rem 0 0; }
.ho-pre-wrap{ margin:.75rem 0 0; border:1px solid var(--edge); border-radius:.7rem; overflow:hidden; }
.ho-pre-lbl{ display:block; font-family:var(--mono); font-size:.56rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper-3); padding:.42rem .75rem; border-bottom:1px solid var(--edge); }
.ho-pre{ max-height:12rem; overflow:auto; margin:0; background:#0f2a22; padding:.7rem .85rem; font-family:var(--mono); font-size:.68rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; color:#cfe9de; }
.ho-actions{ display:flex; flex-direction:column; gap:.55rem; margin:.4rem 0 0; }
.ho-actions .btn{ width:100%; justify-content:center; margin:0; }
.ho-step > .btn{ width:100%; justify-content:center; margin:.45rem 0 0; }
.ho-nav{ display:flex; gap:.6rem; align-items:center; justify-content:space-between; margin-top:1.3rem; }
.ho-nav .btn{ width:auto; margin:0; }
.ho-nav span{ flex:1; }
@media print{ .ho-overlay{ display:none !important; }}
/* on-screen-only affordance hints (e.g. "Tap any agency…") vanish when the page is printed */
@media print{ .screen-only{ display:none !important; } }

/* ============================================================================
   Feedback-driven mobile fixes (portal telemetry · 2026-08-22)
   ========================================================================== */

/* About · the two AI-standards badges ride in one wrapping row so the second
   never sits offset when it wraps to its own line on a phone. */
.ai-badges{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.8rem 0 0; }
.ai-badges .ai-badge{ margin:0; }
/* GREENBOX social links sit inline with the membership pills, vertically centered, sized to the pill height.
   Wrapped in .about-socs so the pair stays together (never orphaned) when the row wraps on mobile. */
.ai-badges .about-socs{ display:inline-flex; align-items:center; gap:.45rem; margin-left:.4rem; }
.ai-badges .about-soc{ width:1.9rem; height:1.9rem; margin:0; }

/* Federal Data · the "Data types" table was cramped on phones. Below 560px it
   stacks into uniform, equal-weight cards (each row a card, labels inline). */
@media (max-width:560px){
  .take-scroll{ overflow-x:visible; border:0; border-radius:0; }
  .take-table, .take-table tbody, .take-table tr, .take-table td{ display:block; width:100%; }
  .take-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .take-table tr{ border:1px solid var(--edge); border-radius:.8rem; background:var(--paper-2);
    margin:0 0 .85rem; padding:1rem 1.1rem; }
  .take-table tr:last-child{ margin-bottom:0; }
  .take-table td{ border:0; padding:.1rem 0; font-size:.95rem; white-space:normal; text-align:left; }
  .take-table td:first-child{ width:auto; font-family:var(--serif); font-weight:700; font-size:1.1rem;
    color:var(--ink); white-space:normal; margin:0 0 .35rem; }
  .take-table td[data-label]:not(:first-child)::before{ content:attr(data-label) ":\00a0"; display:inline;
    font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-faint); }
  .take-table td[data-label]:not(:first-child){ margin:.3rem 0 0; }
}

/* About · more breathing room between story sections on small screens */
@media (max-width:560px){
  .about-block{ margin-bottom:2.5rem; }
  .about-divider{ margin:2rem auto 2.2rem; }
}

/* Prevention/Learn · guard against any child forcing the layout wider than the
   viewport (which made the phone zoom out to fit). Nothing exceeds 100%, and
   long words/URLs wrap instead of pushing the page wide. */
.learn, .learn-inner, .learn-panels, .learn-panel, .learn-intro, .learn-tips, .learn-tip{ min-width:0; }
.learn-panel, .learn-tip p, .learn-callout p, .learn-intro p{ overflow-wrap:anywhere; }
.learn *{ max-width:100%; }

/* #1 (2026-08-23) Verify printout · report serif aesthetic{
  .tl-controls, #cairn-listen, .cl-mini, .sitenav, .sitebar, #cairn-fb, .cookie-banner, .masthead-share, .tl-link{ display:none !important; }
  @page{ size:letter; margin:0.55in; }
  body{ background:#fff !important; }
  .tl-headline{ font-family:var(--serif) !important; font-size:13pt; color:#20303a; margin:0 0 .12rem; }
  .verify-card{ font-family:var(--serif) !important; font-size:9pt; color:#20303a; border:0 !important; box-shadow:none !important; background:none !important; padding:0 0 .12rem !important; margin:0 0 .16rem !important; border-radius:0 !important; }
  .verify-card p{ margin:.08rem 0 0 !important; }
  .tl-view{ display:block !important; padding-left:0 !important; }
  .tl-view::before{ display:none !important; }
  .tl-node{ display:block !important; flex:none !important; min-width:0 !important; align-items:stretch !important; text-align:left !important;
    break-inside:avoid; border:0 !important; border-bottom:0.5pt solid #d8d2c4 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
    padding:.2rem 0 !important; margin:0 !important; font-family:var(--serif) !important; color:#20303a !important; }
  .tl-node::before{ display:none !important; }
  .tl-view .tl-node:last-child{ border-bottom:0 !important; }
  .tl-node-dot{ display:none !important; }
  .tl-node-top{ display:flex !important; flex-direction:row !important; justify-content:space-between !important; align-items:baseline !important; gap:.6rem !important; }
  .tl-when{ font-family:"SF Mono","IBM Plex Mono",monospace !important; font-size:8pt !important; color:#3a4a53 !important; }
  .tl-badge{ font-family:"SF Mono",monospace !important; font-size:7pt !important; letter-spacing:.03em; padding:0 !important; background:none !important; border:0 !important; color:#20303a !important; }
  .tl-tier{ font-size:10.5pt !important; font-weight:600 !important; margin:.02rem 0 !important; text-align:left !important; }
  .tl-where{ font-size:8.5pt !important; color:#4a5a63 !important; text-align:left !important; }
  .tl-code{ font-family:"SF Mono",monospace !important; font-size:7.5pt !important; color:#3a4a53 !important; letter-spacing:.02em; }
}

/* ===== DARK-EMERALD GATES (placed last, so overrides win by order and the base
   heading/kicker rules stay the first match for the intent_fv size checks) =====
   Invert the terms gate + cookie banner to deep-green surfaces against the warm
   reading content, with every sub-element recolored for legibility. */
.cookie-banner.cookie-banner,
#consent .consent-inner{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(165deg, var(--em-1) 0%, var(--em-3) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -30px rgba(3,20,15,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
/* cookie banner */
.cookie-banner .cookie-title{ color:var(--em-ivory); }
.cookie-banner .cookie-copy{ color:rgba(244,240,231,.82); }
.cookie-banner .cookie-copy .foot-link{ color:var(--em-mint); }
.cookie-banner .cookie-seal{ background:rgba(255,255,255,.12); }
/* consent / terms gate */
#consent .consent-kicker{ color:var(--em-mint); }
#consent .consent-h{ color:#f6f2e8; }
#consent .consent-lede,
#consent .consent-safety{ color:rgba(246,242,232,.82); }
#consent .consent-points li{ color:rgba(246,242,232,.82); }
#consent .consent-points strong{ color:#f6f2e8; }
#consent .consent-ic{ color:var(--em-mint); }
#consent .consent-seal{ background:rgba(255,255,255,.12); color:#f3efe6; box-shadow:none; }
#consent .ack-hint{ color:#f3b4a8; }
#consent .consent-ack{ color:#f6f2e8; }
#consent .consent-ack.is-locked .box{ border-color:rgba(255,255,255,.3); }
#consent .consent-ack .box{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }
#consent .consent-ack input:checked + .box{ background:var(--accent); border-color:var(--accent); }
/* the terms drawer, inverted */
#consent .disclose{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
#consent .disclose summary{ background:rgba(255,255,255,.08); color:var(--em-mint); }
#consent .disclose summary:hover{ background:rgba(255,255,255,.14); color:#f6f2e8; }
#consent .disclose[open] summary{ border-bottom-color:rgba(255,255,255,.14); }
#consent .disclose-caret{ color:var(--em-mint); }
#consent .disclose-eff{ color:rgba(246,242,232,.6); }
#consent .disclose-body p{ color:rgba(246,242,232,.82); }
#consent .disclose-body strong{ color:#f6f2e8; }
#consent .disclose-body a,
#consent .foot-link,
#consent .linkish{ color:var(--em-mint); }
/* buttons on the dark surfaces: ivory primary, light-outline ghost */
.cookie-banner .btn--primary,
#consent .btn--primary{ background:var(--em-ivory); color:var(--em-3); box-shadow:0 12px 26px -14px rgba(0,0,0,.6); }
.cookie-banner .btn--primary:hover,
#consent .btn--primary:hover{ background:#ffffff; }
.cookie-banner .btn--ghost,
#consent .btn--ghost{ color:#f3efe6; border-color:rgba(255,255,255,.28); }
.cookie-banner .btn--ghost:hover,
#consent .btn--ghost:hover{ color:#ffffff; background:rgba(255,255,255,.1); }

/* ===== INNER-PAGE MASTHEADS in emerald (placed last so it wins by order over
   the base body:not(.v-home) .masthead paper rule, no !important). The slim
   sticky bar + the emerald nav read as one header band on every route; the home
   hero stays the signature full-size moment. ===== */
body:not(.v-home) .masthead{
  background:linear-gradient(180deg,var(--em-1) 0%,var(--em-2) 100%);
  box-shadow:0 16px 28px -18px rgba(3,20,15,.6);
  border-bottom:1px solid rgba(0,0,0,.18);
}
body:not(.v-home) .lede{ color:var(--em-ivory); }
body:not(.v-home) .lede b{ color:#eef6f1; }
body:not(.v-home) .byline{ color:rgba(244,240,231,.72); }
body:not(.v-home) .byline span{ color:#cfe7dc; }

/* MOBILE: the inner-page masthead was position:sticky under the already-sticky nav, so a ~140px
   header band froze on top of every route and ate a quarter of the phone screen. On phones let the
   masthead scroll away normally (the compact emerald nav, 47px, stays as the persistent header). */
@media (max-width:680px){
  body:not(.v-home) .masthead{ position:static; top:auto; box-shadow:0 8px 16px -14px rgba(3,20,15,.5); padding-top:1.25rem; padding-bottom:.85rem; }
}

/* ===== PREVENTION PAGE UPLEVEL (placed last; wins by order over base .learn-*).
   Emerald intro panel anchors the top (matches the Model Card pattern), the tip
   lists become a responsive grid of elevated icon-cards, and the co-infection
   warning becomes an accent card. ===== */
.learn{ max-width:56rem; }
/* intro: dark-emerald anchor panel */
.learn-intro{
  max-width:46rem; margin:0 auto 1.9rem; padding:1.6rem 1.7rem 1.45rem;
  border:1px solid rgba(255,255,255,.12); border-radius:1.2rem;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(165deg,var(--em-1) 0%,var(--em-3) 100%);
  box-shadow:0 30px 64px -34px rgba(3,20,15,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.learn-intro-ic{ background:rgba(255,255,255,.14); color:#f3efe6; }
.learn-intro-k{ color:var(--em-mint); }
/* 'The short story on Lyme' is a section title (same serif + size as 'About Lyme testing'), ivory on the dark panel */
.learn-intro-h{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:#f6f2e8; margin:0; }
.learn-intro p{ color:rgba(246,242,232,.86); }
.learn-intro p a{ color:#bfe6d6; }
.learn-cite{ color:rgba(246,242,232,.66) !important; }
.learn-cite a{ color:#bfe6d6; }
/* tabs: shaded segmented nav bar (base styles above hold) */
.learn-tabs{ margin:0 auto 1.1rem; }
/* panels: drop the heavy box, let the card grid breathe */
.learn-panels{ max-width:none; border:0; background:none; padding:0; min-height:0; display:grid; grid-template-columns:1fr; }
/* STATIC SIZE across tabs: all three tab panels share one grid cell, so the box is always as tall as the
   tallest panel and never resizes when you switch tabs. Inactive panels keep their space but stay invisible. */
.learn-panels > .learn-panel{ grid-area:1 / 1; }
.learn-panels > .learn-panel[hidden]{ display:block !important; visibility:hidden; pointer-events:none; }
.learn-panels > .learn-panel.is-on{ visibility:visible; pointer-events:auto; z-index:1; }
.learn-panel ul.learn-tips{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
/* the per-section Listen control: a centered pill, not a full-width bar
   (it was full-width when the panel was a bordered box, now removed) */
/* Listen lives in the nav row, pinned to the top-right of the box, so it reads as part of the mini nav. */
.learn-panel .cl-mini{ margin:1.3rem auto .2rem; }   /* centered, at the bottom of the panel under the images (web + mobile) */
/* mobile: the nav wraps to two rows, so drop the pill back into the flow (centered, under the nav) */
/* each tip is an elevated card: icon on top, text below */
.learn-panel li.learn-tip{
  flex:1 1 14rem; max-width:16.5rem;
  flex-direction:column; align-items:flex-start; gap:.75rem; margin:0;
  background:linear-gradient(180deg,#f8f4ec 0%,#f1ede4 100%);
  border:1px solid var(--edge-soft); border-radius:1rem; padding:1.2rem 1.25rem;
  box-shadow:0 1px 2px rgba(35,32,26,.05), 0 18px 34px -24px rgba(35,32,26,.4);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.learn-panel li.learn-tip:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(35,32,26,.06), 0 26px 46px -22px rgba(35,32,26,.5);
}
.learn-tip .tip-ic{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.learn-tip p{ text-align:left !important; }
/* co-infection warning: an accent card */
.learn-callout{
  flex-direction:column; align-items:flex-start; gap:.85rem;
  background:color-mix(in srgb, var(--t-watch) 8%, var(--paper));
  border:1px solid color-mix(in srgb, var(--t-watch) 28%, var(--edge));
  border-left:4px solid var(--t-watch);
  border-radius:1rem; padding:1.35rem 1.45rem;
  box-shadow:0 18px 34px -24px rgba(35,32,26,.4);
}
.learn-callout p{ text-align:left !important; }
/* ===== MODEL CARD · mobile polish (keep content off the screen edges and
   left-align the prose; justified text on a narrow column reads as clipped) ===== */
@media (max-width:560px){
  #page-algocard{ padding-left:1.05rem; padding-right:1.05rem; }
  #page-algocard .mc-part{ padding-left:2.2rem; padding-right:1.15rem; }
  #page-algocard .mc-block-n{ width:1.5rem; height:1.5rem; font-size:.92rem; margin-right:.55rem; }
  #page-algocard .mc-block > p,
  #page-algocard .mc-part > p,
  #page-algocard .mc-define p,
  #page-algocard .mc-stat-k,
  #page-algocard .mc-stat-t,
}
/* the guidance/data source rows must wrap on mobile (this wins over the later
   base .mc-srcrow a nowrap rule by #id specificity + file order) */
@media (max-width:560px){
  #page-algocard .mc-srclist{ min-width:0; }
  #page-algocard .mc-srcrow{ flex-direction:column; align-items:flex-start; gap:.3rem; min-width:0; }
  #page-algocard .mc-srcname{ min-width:0; overflow-wrap:anywhere; }
  #page-algocard .mc-srcrow a,
  #page-algocard .mc-srcref{ white-space:normal; overflow-wrap:anywhere; max-width:100%; flex:0 1 auto; }
}
/* mobile overflow containment for the model card: single safe grid column +
   flex paragraphs that can shrink below their content width */
@media (max-width:560px){
  #page-algocard .mc-srclist{ grid-template-columns:minmax(0,1fr); }
  #page-algocard .mc-define{ min-width:0; }
  #page-algocard .mc-define > p{ min-width:0; }
  #page-algocard .mc-stat-body{ min-width:0; }
}

/* ===== MODEL CARD · magical polish ===== */
/* hero: layered emerald depth + a faint concentric-ring motif echoing the CAIRN seal */
.mc-hero{
  overflow:hidden;
  background:
    radial-gradient(120% 130% at 88% -15%, rgba(255,255,255,.10), rgba(255,255,255,0) 46%),
    repeating-radial-gradient(circle at 90% 18%, rgba(255,255,255,.05) 0 1.5px, rgba(255,255,255,0) 1.5px 19px),
    linear-gradient(150deg, var(--em-1) 0%, var(--em-2) 56%, var(--em-3) 100%);
  box-shadow:0 30px 62px -30px rgba(3,20,15,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
.mc-hero-k{ color:var(--em-mint); }
.mc-hero-h{ letter-spacing:-.005em; }
/* the two summary cards lift on hover */
.mc-step{ transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.mc-step:hover{ transform:translateY(-2px); box-shadow:0 1px 0 var(--edge-soft), 0 24px 44px -26px rgba(35,32,26,.5); }
/* proof stats: big elegant figures + real depth */
.mc-stat{
  background:linear-gradient(180deg,#f8f4ec 0%,#f1ede4 100%);
  box-shadow:0 1px 2px rgba(35,32,26,.05), 0 16px 30px -24px rgba(35,32,26,.34);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.mc-stat:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(35,32,26,.06), 0 24px 42px -22px rgba(35,32,26,.46); }
.mc-stat-v{ flex-basis:7.5rem; font-size:2.5rem; line-height:1; letter-spacing:-.01em; color:var(--em-2); }
@media (max-width:560px){ .mc-stat-v{ font-size:2.4rem; flex-basis:auto; } }

/* ===== "More than Lyme" · reuses the Federal Data emerald flip-cards ===== */
.coinf-intro{ width:min(44rem,100%); margin:0 auto 1.3rem; font-family:var(--serif); font-size:.9rem; line-height:1.5; color:var(--ink-soft); text-align:left; }
.coinf-grid{ max-width:44rem; margin:0 auto; }
.coinf-grid .data-card{ min-height:11rem; }
.coinf-do{ width:min(44rem,100%); margin:1.3rem auto 0; font-size:.9rem; line-height:1.5; color:var(--ink); padding:.9rem 1.1rem; border-radius:.75rem; background:var(--paper); border:1px solid color-mix(in srgb,var(--accent) 26%,var(--edge)); border-left:4px solid var(--accent); box-shadow:0 1px 2px rgba(35,32,26,.05); text-align:left; }
.coinf-do-k{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .3rem; }
/* win over `.learn-panel p` + `:last-child` (both zero the margins), so these two
   blocks keep their auto-centering and top gap instead of left-aligning full-bleed */
.learn-panel p.coinf-intro{ margin:0 auto 1.3rem; }
.learn-panel p.coinf-do{ margin:1.3rem auto 0; }
/* normalize the "More than Lyme" flip-card text to the other prevention tabs' cards */
.coinf-grid .dc-src{ font-size:clamp(1.25rem,2.4vw,1.4rem); }
.coinf-grid .dc-full{ font-size:.9rem; }
.coinf-grid .dc-topic{ font-size:.96rem; }
.coinf-grid .dc-desc{ font-size:.82rem; line-height:1.52; }
/* left-align text inside the small cards on Prevention + Federal Data (justified
   text reads badly in a narrow card; model-card stats are untouched) */
.dc-desc, .learn-tip p, .learn-callout p, .coinf-do, .coinf-intro{ text-align:left; text-align-last:left; }

/* ── Prevention/Learn column parity: hard-cap to the 46rem column every other page uses.
   Wins by ID specificity + source order over the .learn / prevention-uplevel blocks. ── */
#learnSection .learn-inner{ max-width:62rem; margin-inline:auto; }   /* wider so the prevention photo panels have room; the text panels keep their own 46rem caps */
#learnSection > .learn-inner > .mc-hero{ max-width:46rem; margin-inline:auto; }
#learnSection .learn-intro, #learnSection .learn-testing, #learnSection .learn-box{ max-width:46rem; margin-inline:auto; }

/* ══════════ IMPACT page · the cost-burden GREENBOX Clone · big clickable US map ══════════ */
.impact-stats{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto auto; gap:1.1rem; row-gap:0; margin:0 0 1.7rem; }
/* subgrid: the number / key / description rows line up ACROSS all three cards, so the descriptions
   stay in parity no matter how the key wraps at a given width. */
.impact-stats .mc-perf-stat{ display:grid; grid-template-rows:subgrid; grid-row:span 3; }
@media (max-width:620px){
  /* stacked: restore the vertical gap (base row-gap:0 is for the desktop subgrid) so the three cards
     are clearly separated, and drop the 2-line reserved height that left a big gap under the subtitle. */
  .impact-stats{ grid-template-columns:1fr; grid-template-rows:none; gap:1rem; row-gap:1rem; }
  .impact-stats .mc-perf-stat{ display:block; }
  #page-impact .mc-perf-k{ min-height:0; }
}

.impact-map-wrap{ margin:0 0 1.8rem; padding:1.4rem 1.5rem 1.5rem; border-radius:1.4rem; border:1px solid var(--edge);
  background:var(--paper-2); box-shadow:0 1px 0 var(--edge-soft), 0 20px 44px -34px rgba(35,32,26,.5); }
.impact-map-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:.7rem .9rem; margin:0 0 .8rem; }
.impact-map-title{ min-width:0; }
.impact-h{ font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--ink); margin:0; }
.impact-map-sub{ font-size:.82rem; color:var(--ink-soft); margin:.2rem 0 0; }
.impact-select-wrap{ display:inline-flex; flex-direction:column; gap:.34rem; flex-shrink:0; }
.impact-select-lab{ font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; }
.impact-select{ font-family:var(--sans); font-size:.92rem; font-weight:500; color:var(--ink); background-color:#fffdf8; border:1.5px solid var(--edge);
  border-radius:.7rem; padding:.62rem 2.3rem .62rem .9rem; min-width:14rem; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23154c3c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center;
  box-shadow:0 1px 0 #fff inset, 0 6px 16px -12px rgba(35,32,26,.5); transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.impact-select:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 1px 0 #fff inset, 0 10px 22px -12px rgba(31,111,92,.4); }
.impact-select:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,94,74,.2), 0 6px 16px -12px rgba(31,111,92,.4); }
.impact-legend{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin:0 0 1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); }
.ilg{ display:inline-flex; align-items:center; gap:.35rem; }
.ilg-sw{ width:.7rem; height:.7rem; border-radius:.22rem; display:inline-block; border:1px solid rgba(0,0,0,.1); }
.ilg-min .ilg-sw{ background:var(--tier-min); } .ilg-mod .ilg-sw{ background:var(--tier-mod); } .ilg-elev .ilg-sw{ background:var(--tier-elev); }
.ilg-nodata .ilg-sw{ background:color-mix(in srgb,var(--ink) 16%, var(--paper)); }
.nw{ white-space:nowrap; }   /* keep a short phrase (e.g. a year range) from breaking mid-token */

.impact-map-stage{ position:relative; }
.impact-map{ width:100%; aspect-ratio:720 / 392; }   /* reserve the US-map space so the SVG does not pop in and jump the page on load */
.imap-svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 14px 26px -18px rgba(20,40,32,.55)); }
.ist{ cursor:pointer; stroke:var(--tier-line); stroke-width:1; stroke-linejoin:round; transition:filter .16s var(--ease), stroke-width .16s var(--ease), stroke .16s, opacity .16s; outline:none; }
.ist.imin{ fill:var(--tier-min); } .ist.imod{ fill:var(--tier-mod); } .ist.ielev{ fill:var(--tier-elev); }
.ist.ist-nodata{ fill:color-mix(in srgb,var(--ink) 15%, var(--paper)); }
.ist:hover{ filter:brightness(1.05) saturate(1.06); stroke:var(--ink); stroke-width:1.5; }
.ist:focus-visible{ stroke:var(--accent); stroke-width:1.8; }
.ist.is-sel{ stroke:var(--ink); stroke-width:1.8; filter:brightness(1.03) drop-shadow(0 3px 8px rgba(20,40,32,.42)); }
/* when a state is picked, gently recede the rest so the selection reads */
.impact-map[data-selected]:not([data-selected=""]) .ist:not(.is-sel){ opacity:.72; }
/* On touch, a tap fires the hover tooltip which floats over the map. Suppress it there — the state
   detail card below the map is the touch affordance, so a tap just updates that, no overlay. */
@media (hover:none){ .impact-tip{ display:none !important; } }

.impact-tip{ position:absolute; z-index:5; pointer-events:none; left:0; top:0; max-width:15rem;
  background:var(--ink); color:#f4efe4; border-radius:.6rem; padding:.55rem .7rem; box-shadow:0 10px 26px -12px rgba(15,28,22,.6);
  display:flex; flex-direction:column; gap:.18rem; }
.impact-tip[hidden]{ display:none; }
.itip-name{ font-family:var(--serif); font-size:.98rem; font-weight:600; line-height:1.1; }
.itip-burden{ font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; color:#cde4d6; }
.itip-tiers{ display:flex; flex-wrap:wrap; gap:.1rem .55rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.02em; margin-top:.15rem; }
.itip-tiers b{ font-weight:600; }
.itip-e{ color:#f0a38f; } .itip-m{ color:#e6c879; } .itip-n{ color:#c9c2b2; }

.impact-detail{ margin:1.15rem 0 0; min-height:5rem; }
.impact-detail-hint{ font-size:.92rem; color:var(--ink-faint); font-style:italic; margin:0; text-align:center; padding:.9rem 0; }
/* the SPEND is the headline: a full-width emerald band spanning the three tier cards below it */
.isd-spend-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.08rem; margin:0 0 .75rem; padding:1.25rem 1rem 1.15rem; border-radius:1.1rem;
  background:linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%); color:#fff;
  box-shadow:0 1px 2px rgba(11,38,32,.12), 0 16px 32px -20px rgba(21,76,60,.65); }
.isd-spend-card .isd-name{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,#fff 80%, var(--accent)); margin:0 0 .3rem; }
.isd-spend{ font-family:var(--serif); font-weight:700; font-size:clamp(2.3rem,9vw,3.1rem); line-height:.95; color:#fff; letter-spacing:-.01em; }
.isd-per{ font-family:var(--sans); font-size:.3em; font-weight:600; letter-spacing:.01em; opacity:.85; margin-left:.4em; vertical-align:.12em; }
.isd-spend-k{ font-family:var(--sans); font-size:.86rem; color:color-mix(in srgb,#fff 88%, var(--accent)); margin-top:.35rem; }
.isd-tiers{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7rem; }
/* each tier is its own tinted gradient card, matching its map colour */
.isd-tier{ text-align:center; padding:1rem .5rem .85rem; border-radius:1rem; border:1px solid var(--edge); background:var(--paper);
  box-shadow:0 1px 2px rgba(35,32,26,.04), 0 12px 24px -18px rgba(35,32,26,.35); }
.isd-elev{ background:linear-gradient(160deg,#fff 0%, color-mix(in srgb,var(--tier-elev) 15%, #fff) 100%); border-color:color-mix(in srgb,var(--tier-elev) 42%,var(--edge)); }
.isd-mod{  background:linear-gradient(160deg,#fff 0%, color-mix(in srgb,var(--tier-mod) 17%, #fff) 100%);  border-color:color-mix(in srgb,var(--tier-mod) 44%,var(--edge)); }
.isd-min{  background:linear-gradient(160deg,#fff 0%, color-mix(in srgb,var(--tier-min) 28%, #fff) 100%);  border-color:color-mix(in srgb,var(--tier-min) 58%,var(--edge)); }
.isd-n{ display:block; font-family:var(--serif); font-size:1.95rem; font-weight:700; line-height:1; }
.isd-l{ display:block; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:.5rem; }
/* unit label under a big stat number so it is not a bare number */
.mc-stat-u{ display:block; font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:.3rem; }
.isd-elev .isd-n{ color:var(--tier-elev); } .isd-mod .isd-n{ color:var(--tier-mod); } .isd-min .isd-n{ color:color-mix(in srgb,var(--tier-min) 60%, var(--ink-soft)); }
.isd-note{ font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:.65rem 0 0; text-align:center; }
.isd-nodata-line{ font-family:var(--sans); font-size:.82rem; line-height:1.45; color:var(--ink-soft); text-align:center; margin:.5rem auto 0; max-width:34rem; }
/* A state CDC does not report at the county level: a plain honest panel, no $0, no tier chips. */
.isd-nodata-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.45rem;
  padding:1.6rem 1.3rem; border-radius:1.1rem; background:color-mix(in srgb,var(--ink) 6%, var(--paper)); border:1px solid var(--edge); }
.isd-nodata-card .isd-name{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0; }
.isd-nodata-h{ font-family:var(--serif); font-size:1.3rem; font-weight:600; margin:.05rem 0 0; color:var(--ink); }
.isd-nodata-sub{ font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin:0; max-width:34rem; }

/* source rows inside the GREENBOX Clone callout */
.impact-inner .mc-srclist li{ display:block; padding:.72rem 1rem .72rem 1.05rem; border:1px solid var(--edge); border-left:3px solid var(--accent); border-radius:.85rem; background:#fffdf8; box-shadow:0 1px 0 var(--edge-soft); }
.mc-src-k{ font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; }
.mc-src-v{ font-size:.86rem; color:var(--ink-soft); display:block; margin-top:.12rem; }
/* Impact cost sources cited the same way as the Data tab (dsrc rows + link pills), emerald accent */
.impact-src-lbl{ font-family:var(--serif); font-size:1.3rem; font-weight:600; letter-spacing:.005em; text-transform:none; color:var(--ink); margin:1.8rem 0 .7rem; }
.impact-srcl{ margin:0; }
.impact-srcl .dsrc{ border-left:3px solid color-mix(in srgb,var(--accent) 62%,var(--edge)); }

/* Impact · "Who gets looked over" equity block (the human dimension under the map) */
.impact-equity{ }
.impact-equity .eq-k{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 .5rem; }
.impact-equity-h{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); margin:0 0 .7rem; letter-spacing:-.01em; }
.impact-equity .eq-lead{ font-size:.95rem; color:var(--ink); }   /* parity with the section body (.impact-equity p), not an oversized lead */
/* ONE accent (emerald) and ONE frame language across the whole block, so it reads as a single
   cohesive panel, not five stacked treatments. The Johns Hopkins finding is the single boxed hero. */
/* ONE card frame, used by BOTH the finding and the clinician quote (visual cohesion). No icons: the
   left accent bar carries the eye, the text fills the full width, and it reads clean on mobile. */
.impact-equity .eq-finding{ display:block; margin:1.3rem 0; padding:1.1rem 1.25rem 1.05rem;
  background:color-mix(in srgb,var(--accent) 4%,var(--paper)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--edge)); border-left:3px solid var(--accent-deep); border-radius:.3rem .8rem .8rem .3rem;
  box-shadow:0 1px 2px rgba(35,32,26,.04), 0 14px 28px -24px rgba(21,76,60,.38); }
.impact-equity .eq-finding figcaption{ margin:0; min-width:0; }   /* full text column (and let the long DOI wrap) */
/* the clinician quote gets a quiet oversized serif quote mark instead of a boxed icon, so it reads as a
   pull-quote, not 'a quote icon next to a quote'. */
.impact-equity .eq-quote{ position:relative; }
.impact-equity .eq-quote .eq-quote-text{ position:relative; padding-left:1.9rem; }
.impact-equity .eq-quote .eq-quote-text::before{ content:"\201C"; position:absolute; left:-.1rem; top:-.35rem; font-family:Georgia,serif; font-size:2.6rem; line-height:1; color:color-mix(in srgb,var(--accent) 38%,transparent); }
.impact-equity .eq-finding-stat{ font-family:var(--serif); font-size:1.02rem; line-height:1.5; font-weight:500; color:var(--ink); margin:0; }
/* the finding's own source: an elegant serif-italic citation that spans the full column width */
.impact-equity .eq-finding-cite{ font-family:var(--serif); font-style:italic; font-size:.82rem; line-height:1.5; color:var(--ink-faint); margin:.6rem 0 0; overflow-wrap:anywhere; }
.impact-equity .eq-finding-cite a{ color:var(--accent); font-style:italic; overflow-wrap:anywhere; }
.impact-equity p{ font-family:var(--serif); font-size:.95rem; line-height:1.65; color:var(--ink-soft); margin:0 0 .7rem; }
/* the clinician quote, in the SAME card frame as the finding */
/* Quote text + byline sized to match Mrs. Yang's quote (.community-hero .about-quote). */
.impact-equity .eq-quote-text{ font-family:var(--serif); font-size:clamp(.96rem,.9rem + .3vw,1.06rem); line-height:1.5; font-style:italic; color:var(--ink); margin:0; }
/* Byline aligns to the quote TEXT (same 1.9rem indent), not the hanging quote glyph. */
.impact-equity .eq-quote-by{ font-family:var(--serif); color:var(--ink-soft); margin:.65rem 0 0; padding-left:1.9rem; }
.impact-equity .eq-quote-by a{ color:var(--accent-deep); font-weight:400; }
.impact-equity .eq-quote-by .eq-by-name,
.impact-equity .eq-quote-by .eq-by-role{ display:block; }
.impact-equity .eq-quote-by .eq-by-name{ font-size:1rem; font-weight:600; line-height:1.35; color:var(--ink); }
.impact-equity .eq-quote-by .eq-by-role{ font-size:.8rem; line-height:1.4; margin-top:.15rem; }
@media (max-width:620px){ .impact-equity p{ font-size:.98rem; } }

/* ============================================================================
   COMMUNITY · the human heart of CAIRN (the family story + who a test looks past)
   Reuses the About editorial pieces (.about-hero / .about-quote / .about-photo)
   and the Impact equity block, elevated into a two-column hero + a closing call.
   ============================================================================ */
.community-inner{ max-width:46rem; }
.community-hero-band{ margin:0 0 2.2rem; }
/* photo + quote are the SAME height with aligned top and bottom edges (stretch the row; the photo
   fills its cell with object-fit so it matches whichever side is taller, the quote centers inside). */
/* The PHOTO shows in full (natural aspect, never cropped) and sets the row height. The quote box is
   normalized DOWN to that same height: its content is sized to fit, then vertically centered. */
.community-hero{ display:grid; grid-template-columns:minmax(0,19rem) 1fr; gap:2rem; align-items:stretch; text-align:left; margin:0 0 .4rem; }
.community-hero .about-photo{ margin:0; }
.community-hero .about-photo img{ width:100%; height:auto; border-radius:1.1rem; border:1px solid var(--edge); box-shadow:0 24px 52px -24px rgba(20,40,32,.55); display:block; }
.community-hero .about-quote{ margin:0; padding:1.1rem 1.35rem; height:100%; display:flex; flex-direction:column; justify-content:center; }
.community-hero .about-quote p{ font-size:clamp(.96rem,.9rem + .3vw,1.06rem); line-height:1.5; margin:0 0 .65rem; }
.community-hero .about-by-name{ font-size:1rem; }
.community-hero .about-by-role, .community-hero .about-by-place{ font-size:.8rem; line-height:1.4; }   /* match the Ahmad byline (.eq-quote-by .8rem) */
@media (max-width:640px){
  .community-hero{ grid-template-columns:1fr; gap:1.25rem; text-align:center; align-items:center; }
  .community-hero .about-photo{ height:auto; }
  .community-hero .about-photo img{ height:auto; aspect-ratio:1 / 1; max-width:20rem; margin-inline:auto; }
  .community-hero .about-quote{ text-align:left; height:auto; }
}

.community-body{ margin:0; }
/* the whole equity block is ONE panel, so its parts read as a single unit */
.community-equity{ margin:2.3rem 0 0; padding:1.9rem 1.85rem 1.7rem; background:var(--paper-2); border:1px solid var(--edge); border-radius:1.3rem;
  box-shadow:0 1px 2px rgba(35,32,26,.04), 0 24px 46px -34px rgba(35,32,26,.3); }
@media (max-width:620px){ .community-equity{ padding:1.5rem 1.25rem 1.3rem; } }

.community-close{ margin:2.2rem 0 .4rem; padding:2rem 1.7rem; border-radius:1.3rem; text-align:center; border:1px solid var(--edge);
  background:linear-gradient(162deg, color-mix(in srgb, var(--accent) 13%, var(--paper-2)), var(--paper-2) 70%); }
.community-close-lead{ font-family:var(--serif); font-size:clamp(1.04rem,.98rem + .4vw,1.18rem); line-height:1.62; color:var(--ink); max-width:38rem; margin:0 auto 1.3rem; }
/* Community close CTA uses the shared .btn .btn--primary .btn--wide (one button style site-wide). */

/* ============================================================
   PREVENTION PANELS · photographic cards (redesign 2026-10-19)
   Overrides the flex-wrap icon-card grid above with photo tiles.
   "Lowering your risk" = ONE hiking panorama sliced across 5 cards in a
   single row (reads as one picture). "If you find a tick" = one photo per
   step. "More than Lyme" = tick photos behind the flip-card fronts.
   Line-icons killed in the cards AND the tabs.
   ============================================================ */
.learn{ max-width:60rem; }
.learn-tab .learn-ic,
.learn-panel .tip-ic,
.coinf-grid .dc-ic{ display:none !important; }

/* "If you find a tick" photo cards keep their scrim text (prevent is redesigned below) */
.learn-panel[data-panel="remove"] li.learn-tip p{ position:relative; z-index:1; margin:0; color:#fff; font-size:.82rem; line-height:1.42; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 1px 12px rgba(0,0,0,.6); }
.learn-panel[data-panel="remove"]  li.learn-tip p strong{ display:block; color:#fff; font-size:1.04rem; margin:0 0 .26rem; }

/* Lowering your risk · ONE family photo in the center, text boxes around it:
   two stacked left, two stacked right, one wide box on the bottom. No overlay/squish. */
.learn-panel[data-panel="prevent"] ul.learn-tips{
  display:grid; gap:.7rem; grid-template-columns:1fr 1.5fr 1fr; grid-template-rows:1fr 1fr auto; }
.learn-panel[data-panel="prevent"] li.learn-tip{
  margin:0; min-height:0; max-width:none; flex:none; overflow:visible; box-shadow:none; background:var(--paper); border:1px solid var(--edge);
  border-radius:.75rem; padding:.85rem .95rem; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.learn-panel[data-panel="prevent"] li.learn-tip:hover{ transform:none; box-shadow:none; }
.learn-panel[data-panel="prevent"] li.learn-tip:nth-child(1){ grid-column:1; grid-row:1; }   /* Cover up, top left */
.learn-panel[data-panel="prevent"] li.learn-tip:nth-child(2){ grid-column:1; grid-row:2; }   /* Repel, bottom left */
.learn-panel[data-panel="prevent"] li.learn-tip:nth-child(3){ grid-column:3; grid-row:1; }   /* Stay clear, top right */
.learn-panel[data-panel="prevent"] li.learn-tip:nth-child(4){ grid-column:3; grid-row:2; }   /* Inspect, bottom right */
.learn-panel[data-panel="prevent"] li.learn-tip:nth-child(5){ grid-column:1 / 4; grid-row:3; }   /* Wash and dry, wide bottom */
.learn-panel[data-panel="prevent"] li.learn-tip p{ position:static; margin:0; color:var(--ink-soft); font-size:.86rem; line-height:1.45; min-height:0; background:none; border:0; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none; display:block; }
.learn-panel[data-panel="prevent"] li.learn-tip p strong{ display:block; color:var(--ink); font-size:.98rem; margin:0 0 .18rem; }
.learn-fam{ grid-column:2; grid-row:1 / 3; list-style:none; margin:0; min-height:15rem; border-radius:.85rem;
  background:url(assets/prev/hiking.jpg) center 42%/cover; box-shadow:0 14px 26px -18px rgba(11,38,32,.5); }
@media (max-width:760px){
  .learn-panel[data-panel="prevent"] ul.learn-tips{ grid-template-columns:1fr; grid-template-rows:none; gap:.55rem; }
  .learn-panel[data-panel="prevent"] li.learn-tip:nth-child(1),
  .learn-panel[data-panel="prevent"] li.learn-tip:nth-child(2),
  .learn-panel[data-panel="prevent"] li.learn-tip:nth-child(3),
  .learn-panel[data-panel="prevent"] li.learn-tip:nth-child(4),
  .learn-panel[data-panel="prevent"] li.learn-tip:nth-child(5){ grid-column:auto; grid-row:auto; }
  /* slightly tighter text boxes so there is breathing room above the Listen pill */
  .learn-panel[data-panel="prevent"] li.learn-tip{ padding:.6rem .9rem; }
  .learn-fam{ grid-column:auto; grid-row:auto; order:-1; min-height:10rem; }
}

/* If you find a tick · one photo per step */
.learn-panel[data-panel="remove"] ul.learn-tips{ display:grid; grid-template-columns:repeat(3,1fr); flex-wrap:nowrap; gap:.8rem; }
/* The card base is a solid dark block; the photo lives in the TOP region (::before) and fades into the dark
   caption band below it, so the image is never covered -- it "extends down" into the dark area that holds the
   text. All three cards are the same height. */
.learn-panel[data-panel="remove"] li.learn-tip{
  flex:none; max-width:none; min-height:19rem; margin:0; border:0; border-radius:1rem; box-shadow:0 14px 26px -18px rgba(11,38,32,.6);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1rem .95rem 1.1rem; position:relative; overflow:hidden;
  background:#0a1f16; }
.learn-panel[data-panel="remove"] li.learn-tip:hover{ transform:translateY(-2px); }
.learn-panel[data-panel="remove"] li.learn-tip::before{ content:""; position:absolute; left:0; right:0; top:0; height:60%; z-index:0;
  background-size:cover; background-repeat:no-repeat; background-position:center;
  -webkit-mask-image:linear-gradient(to bottom, #000 66%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom, #000 66%, rgba(0,0,0,0) 100%); }
.learn-panel[data-panel="remove"] li.learn-tip:nth-child(1)::before{ background-image:url(assets/prev/tweeze.jpg); background-position:22% center; }
.learn-panel[data-panel="remove"] li.learn-tip:nth-child(2)::before{ background-image:url(assets/prev/clean.jpg); }
.learn-panel[data-panel="remove"] li.learn-tip:nth-child(3)::before{ background-image:url(assets/prev/monitor.jpg); background-position:64% center; }

/* More than Lyme · tick photos behind the flip-card fronts */
.coinf-grid .data-card:nth-child(1) .dc-front{ background:linear-gradient(rgba(8,24,18,.5),rgba(8,24,18,.68)), url(assets/prev/coinf1.jpg) center/cover; }
.coinf-grid .data-card:nth-child(2) .dc-front{ background:linear-gradient(rgba(8,24,18,.5),rgba(8,24,18,.68)), url(assets/prev/coinf2.jpg) center/cover; }
.coinf-grid .data-card:nth-child(3) .dc-front{ background:linear-gradient(rgba(8,24,18,.5),rgba(8,24,18,.68)), url(assets/prev/coinf3.jpg) center/cover; }
/* card font parity: coinf fronts use the same serif family + sizes as the other prevention cards */
.coinf-grid .dc-src{ font-family:var(--serif); font-size:1.08rem; }
.coinf-grid .dc-full{ font-family:var(--serif); font-size:.82rem; }

/* ---- 'If you find a tick' cards: clean FULL photo with a bottom scrim (uplevel of the muddy top-fade
   into a dark block). The photo now fills the card and reads crisp; text sits on a legible bottom gradient. ---- */
.learn-panel[data-panel="remove"] li.learn-tip::before{ top:0; height:100%; -webkit-mask-image:none !important; mask-image:none !important; }
.learn-panel[data-panel="remove"] li.learn-tip::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(7,20,15,.94) 0%, rgba(7,20,15,.58) 32%, rgba(7,20,15,.1) 58%, transparent 74%); }
.learn-panel[data-panel="remove"] li.learn-tip .tip-ic{ display:none; }
.learn-panel[data-panel="remove"] li.learn-tip p{ text-shadow:0 1px 3px rgba(0,0,0,.65); }

/* ---- Prevention · mobile swipe carousel: 3 pages you swipe across, each with its title + Listen pill ---- */
.lp-title{ display:none; }   /* desktop uses the tab row as the title */
@media (max-width:760px){
  .learn-box{ padding:.8rem .4rem 1rem; }
  .learn-tabs{ display:none; }                        /* mobile: panels swipe + carry their own lp-title, so the tab row is redundant */
  .learn-panels{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:.8rem; -webkit-overflow-scrolling:touch; padding:.2rem .4rem 1.1rem; margin:0 -.4rem; scroll-padding-inline:.4rem; }
  .learn-panels::-webkit-scrollbar{ display:none; }
  .learn-panels > .learn-panel{ grid-area:auto !important; flex:0 0 89%; scroll-snap-align:center; min-width:0;
    display:flex; flex-direction:column;        /* column so the Listen pill can pin to the bottom */
    background:var(--paper-2); border:1px solid var(--edge); border-radius:1.1rem; padding:1.15rem 1.15rem 1.35rem; }
  .learn-panels > .learn-panel[hidden]{ display:flex !important; visibility:visible !important; pointer-events:auto !important; }
  .lp-title{ display:block; font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin:0 0 .8rem; font-weight:600; }
  /* all three boxes are equal height (flex stretch); pin Listen to the bottom so it sits at the same spot across every swipe */
  .learn-panel .cl-mini{ margin:1.2rem auto .1rem; margin-top:auto; }
  /* box 3 photo cards: three rows that GROW to fill the box, so the images are tall. A bottom margin on the
     list reserves breathing room above the Listen pill (the cards fill the rest; Listen stays pinned to bottom). */
  .learn-panel[data-panel="remove"] ul.learn-tips{ grid-template-columns:1fr !important; grid-auto-rows:1fr; gap:.8rem; flex:1 1 auto; margin-bottom:1.5rem; }
  .learn-panel[data-panel="remove"] li.learn-tip{ min-height:8rem; height:auto; }
  /* box 2 flip cards: shorter image on mobile to match */
  .coinf-grid .data-card{ min-height:8.5rem; }
  /* box 2: reserve breathing room above the Listen pill so the 'what to do' line never touches it */
  .learn-panel[data-panel="coinf"] .coinf-do{ margin-bottom:1.5rem; }
  /* the panel is now a flex column (to pin Listen); coinf-grid/paras use margin:auto which would shrink them
     to content width in flex. force full width so the flip cards stay horizontal. */
  .learn-panel[data-panel="coinf"] .coinf-grid{ width:100%; max-width:none; }
  .learn-panel[data-panel="coinf"] .coinf-intro,
  .learn-panel[data-panel="coinf"] .coinf-do{ width:100%; }
}

@media (max-width:760px){
  .learn-panel[data-panel="remove"]  ul.learn-tips{ grid-template-columns:1fr; }
}

/* ============================================================
   SURVEY FLOW · step headers reuse the .mc-hero title card (so
   steps 1 and 2 match the hero cards on every other page). The
   card is a touch shorter than a full page hero because the
   I/II/III progress nav sits above it. Kicker + title only; the
   "seasonal baseline / exposure window" line lives below as the
   .when-context note. 2026-10-19
   ============================================================ */
.mc-hero--step{ min-height:clamp(9rem,17vw,12rem); margin:0 0 1.4rem; padding:clamp(1.7rem,4vw,2.4rem) clamp(1.4rem,4.5vw,2.4rem); }
.mc-hero .step-kicker{ font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--em-mint); margin:0 0 .5rem; }
.mc-hero .step-title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,4.8vw,2.5rem); line-height:1.14; letter-spacing:-.012em; margin:0; padding-bottom:.08em; text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#e2f4ea 60%,#b6e6cf 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* the exposure-window timeline lives INSIDE the emerald hero, below the title (not a separate box) */
.mc-hero .step-when{ font-family:var(--serif); font-size:clamp(.88rem,1.4vw,.98rem); line-height:1.5; color:color-mix(in srgb,var(--em-ivory) 85%,transparent); margin:.75rem auto 0; max-width:34rem; text-align:center; }
.mc-hero .step-when b{ color:#fff; font-weight:600; }
/* Listen button sits on its own centered row at the bottom of the hero */
.mc-hero-in #cairn-listen{ margin:1rem 0 0; }

/* About page: normal (greedy) wrapping so every paragraph fills the same column width
   edge-to-edge. text-wrap:pretty was balancing each one to a slightly different visual
   width, which read as "different column widths". 2026-10-19 */
#page-about .about-block p{ text-wrap:wrap; }
/* Community boxes: greedy wrap so every line fills the box width (text-wrap:balance was leaving each
   box a slightly different column width, which read as misaligned). */
#page-community .eq-finding-stat, #page-community .eq-quote-text, #page-community .eq-finding-cite,
#page-community .about-quote p, #page-community .impact-equity p, #page-community .about-block p{ text-wrap:wrap; }

/* AI-image disclosure in the colophon (illustrative prevention/co-infection photos) */
.colophon-ai{ margin:.5rem auto 0; max-width:70rem; text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }