/* ============================================================
   GLP-1 Tirzepatide Reviews — design system
   Identity: medical journal + data newsroom.
   Signature: provenance stamps. No figure without a source.
   ============================================================ */

/* ============================================================
   GLP-1 Tirzepatide Reviews — visual system
   Warm charcoal / bone / oxblood. Fraunces + Archivo + JetBrains Mono.
   ============================================================ */
/* ============================================================
   GLP-1 Tirzepatide Review — visual system
   Sans display / serif body. Ink-violet, cool limestone, plum signal.
   Body copy is serif because this publication is 785,000 words of
   long-form: serif at a 68ch measure reads better than sans at length.
   ============================================================ */
/* ============================================================
   Semaglutide Ranked — ranking product interface
   Cards on a grey field, rank badges, score meters. All sans.
   Deliberately not editorial: no masthead, no bylines, no rules,
   no serif, no columns. This is an instrument, not a publication.
   ============================================================ */
/* ============================================================
   Semaglutide Ranked — a comparison instrument
   Left rail navigation, matrix-first content, forest and emerald.
   Shares no colour, face or structure with any sibling site.
   ============================================================ */
/* ============================================================
   Semaglutide Ranked — a ranking board
   Fixed left rail, white ground, raspberry signal, big rank numerals.
   Shares no colour, face or structure with any sibling site.
   ============================================================ */
/* ============================================================
   semaglutideranked.com
   Product-editorial: banner, sticky header, price strip, quick
   answer, byline card, dark CTA, sticky top-picks bar.
   ============================================================ */
/* ============================================================
   semaglutideranked.com — the scoreboard
   Dark console ground, cobalt signal, amber scores. Every prior
   build in this family is light with a top masthead; this one
   inverts both. Shares no colour or face with any of them.
   ============================================================ */
:root{
  /* type — three faces unused across every prior build */
  --display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:var(--sans);
  --body:var(--sans);
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* dark ground. No sibling is dark. */
  --ground:#0B1120;
  --paper:#131C31;
  --paper-2:#1B2540;
  --paper-3:#26314F;

  /* ink is light on dark */
  --ink:#EEF3FB;
  --ink-2:#C8D3E6;
  --gray-70:#9FAECA;
  --gray-55:#8494B2;
  --gray-40:#8492AE;

  /* signal — cobalt, unused anywhere in this family */
  --brand:#38BDF8;
  --brand-dk:#0EA5E9;
  --brand-lt:#12283C;

  /* scores read amber, so a score never reads as a status */
  --accent:#FBBF24; --accent-lt:#2A2213;

  --ok:#34D399;    --ok-lt:#0F2A22;
  --warn:#FBBF24;  --warn-lt:#2A2213;
  --stop:#FB7185;  --stop-lt:#2E1620;

  --navy:#0B1120; --teal:#38BDF8; --teal-dk:#0EA5E9; --teal-lt:#12283C;
  --gold:#FBBF24; --gold-lt:#2A2213; --rust:#FB7185;
  --rule:#26314F; --rule-2:#33415F; --rule-soft:#1B2540;

  --wrap:1240px; --maxw:1240px; --measure:70ch;
  --gap:clamp(1.1rem,.7rem + 1.2vw,2rem);
  --rail-w:280px;
  --step--1:.86rem; --step-0:1.02rem; --step-1:1.22rem;
  --step-2:1.5rem; --step-3:1.95rem; --step-4:2.6rem;
  --radius:14px; --radius-sm:9px;
  --w:100%;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-lg:0 8px 32px rgba(0,0,0,.45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
}

/* ---------- skip link + focus ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- masthead ---------- */
.masthead { background: var(--ink); color: var(--paper-2); }
.masthead a { color: inherit; }
.mast-top {
  max-width: var(--wrap); margin: 0 auto; padding: .9rem var(--gap);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display); font-weight: 500; font-size: var(--step-1);
  letter-spacing: -.015em; text-decoration: none; line-height: 1.15;
}
.wordmark b { font-weight: 600; }
.wordmark span {
  display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); font-weight: 400; margin-top: .2rem;
}
.mast-search { margin-left: auto; display: flex; gap: .4rem; }
.mast-search input {
  font: inherit; font-size: var(--step--1); padding: .45rem .7rem; min-width: 200px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06);
  color: var(--paper-2); border-radius: 2px;
}
.mast-search input::placeholder { color: rgba(255,255,255,.55); }
.mast-search button {
  font: inherit; font-size: var(--step--1); padding: .45rem .8rem; cursor: pointer;
  border: 1px solid var(--gold); background: transparent; color: var(--gold); border-radius: 2px;
}
.mast-search button:hover { background: var(--gold); color: var(--ink); }


.nav-inner a {
  text-decoration: none; padding: .7rem 0; font-size: var(--step--1);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.nav-inner a:hover, .nav-inner a[aria-current="page"] { border-bottom-color: var(--gold); }
.nav-inner .sec { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.72); }

.mast-stamp {
  background: var(--ink-2); font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; color: rgba(255,255,255,.8);
}
.mast-stamp div {
  max-width: var(--wrap); margin: 0 auto; padding: .4rem var(--gap);
  display: flex; gap: 1.2rem; flex-wrap: wrap;
}
.mast-stamp b { color: var(--gold); font-weight: 500; }

@media (max-width: 760px) { .nav-toggle-legacy { display:none }
  .mast-search { order: 3; width: 100%; margin-left: 0; }
  .mast-search input { flex: 1; min-width: 0; }
  .nav-inner { flex-direction: column; align-items: stretch; gap: 0; display: none; }
  
  .nav-inner a { border-bottom: 1px solid rgba(255,255,255,.1); border-left: 3px solid transparent; padding-left: .5rem; }
  .nav-inner a:hover { border-left-color: var(--gold); border-bottom-color: rgba(255,255,255,.1); }
}

/* ---------- build banner ---------- */
.build-banner {
  background: repeating-linear-gradient(45deg, var(--gold-lt), var(--gold-lt) 10px, #EFE2C4 10px, #EFE2C4 20px);
  border-bottom: 1px solid var(--gold);
  font-family: var(--mono); font-size: .72rem; color: #5A4310;
}
.build-banner div { max-width: var(--wrap); margin: 0 auto; padding: .5rem var(--gap); }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
main { display: block; padding-bottom: 4rem; }

.crumbs {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  padding: .9rem 0 0; color: var(--gray-70);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: .35rem; color: var(--rule-2); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--teal); }

.pagehead { padding: 1.2rem 0 1.4rem; border-bottom: 1px solid var(--rule); }
.eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 .6rem;
}
h1 {
  font-family: var(--display); font-weight: 500; font-size: var(--step-4);
  line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .7rem; max-width: 22ch;
  text-wrap: balance;
}
.pagehead .standfirst { font-size: var(--step-1); color: var(--gray-70); max-width: var(--measure); margin: 0; line-height: 1.45; }

.cols { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: 1.8rem; }
@media (max-width: 940px) { .cols { grid-template-columns: 1fr; } }

article > * { max-width: var(--measure); }
article > .full, article > figure, article > .ledger, article > .tablewrap, article > .grid, article > table { max-width: none; }

h2 {
  font-family: var(--display); font-weight: 500; font-size: var(--step-2);
  line-height: 1.2; letter-spacing: -.015em; margin: 2.6rem 0 .8rem;
  padding-top: .9rem; border-top: 1px solid var(--rule);
}
h3 { font-size: var(--step-1); font-weight: 650; margin: 1.8rem 0 .5rem; letter-spacing: -.01em; }
h4 { font-size: var(--step-0); font-weight: 700; margin: 1.3rem 0 .4rem; }
p { margin: 0 0 1.05rem; }
a { color: var(--teal-dk); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rust); }
ul, ol { padding-left: 1.15rem; margin: 0 0 1.1rem; }
li { margin-bottom: .42rem; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* ---------- direct answer card ---------- */
.answer {
  background: var(--paper-2); border: 1px solid var(--rule-2); border-left: 5px solid var(--teal);
  padding: 1.15rem 1.3rem; margin: 0 0 1.6rem; max-width: none;
}
.answer .lbl {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .5rem;
}
.answer p { font-size: var(--step-1); line-height: 1.5; margin: 0 0 .8rem; max-width: 62ch; }
.answer p:last-of-type { margin-bottom: 0; }
.answer .meta {
  font-family: var(--mono); font-size: .68rem; color: var(--gray-70);
  display: flex; gap: 1rem; flex-wrap: wrap; border-top: 1px dotted var(--rule-2);
  padding-top: .6rem; margin-top: .8rem;
}

/* ---------- evidence badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .32rem; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .16rem .45rem; border: 1px solid currentColor; border-radius: 2px;
  white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.badge-verified   { color: var(--teal-dk); background: var(--teal-lt); }
.badge-reported   { color: #7A5C13; background: var(--gold-lt); }
.badge-pending    { color: var(--gray-70); background: #ECE7DC; }
.badge-pending::before { border-radius: 0; transform: rotate(45deg); }
.badge-outdated   { color: var(--rust); background: #F6E4DD; }
.badge-sample     { color: #6B3F8C; background: #EFE6F6; }

/* ---------- provenance stamp: the signature ---------- */
.stamp {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
  color: var(--gray-70); background: none; border: 0; padding: 0 0 0 .25rem;
  cursor: pointer; vertical-align: super; text-decoration: none;
  border-bottom: 1px dotted var(--gray-40);
}
.stamp:hover { color: var(--rust); border-bottom-color: var(--rust); }
.stamp[data-status="verified"] { color: var(--teal-dk); }
.stamp[data-status="reported"] { color: #7A5C13; }
.stamp[data-status="outdated"] { color: var(--rust); }

/* unverified value: hatched, loud, never blank */
.unverified {
  display: inline-block; min-width: 5.5rem; padding: .1rem .4rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .05em;
  color: var(--gray-70); border: 1px dashed var(--rule-2);
  background: repeating-linear-gradient(135deg, transparent, transparent 5px, #E8E1D2 5px, #E8E1D2 6px);
}

.num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.num-lg { font-size: var(--step-1); }

/* ---------- ledger frame (data blocks) ---------- */
.ledger { border: 1px solid var(--rule-2); background: var(--paper-2); margin: 1.8rem 0; }
.ledger > figcaption, .ledger-head {
  background: var(--teal-lt); border-bottom: 1px solid var(--rule-2);
  padding: .6rem .9rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .05em; color: var(--teal-dk);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.ledger-body { padding: 1rem .9rem; }
.ledger-foot {
  border-top: 1px dotted var(--rule-2); padding: .55rem .9rem;
  font-family: var(--mono); font-size: .66rem; color: var(--gray-70);
  display: flex; gap: 1rem; flex-wrap: wrap;
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule-2); background: var(--paper-2); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
caption { text-align: left; padding: .7rem .8rem; font-family: var(--mono); font-size: .7rem; color: var(--gray-70); border-bottom: 1px solid var(--rule); }
th, td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--ink); color: var(--paper-2);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
thead th button {
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0;
  display: inline-flex; gap: .3rem; align-items: center;
}
thead th button::after { content: "↕"; opacity: .5; }
thead th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--gold); }
thead th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--gold); }
tbody tr:nth-child(even) { background: rgba(46,110,107,.035); }
tbody tr:hover { background: var(--teal-lt); }
td.numeric, th.numeric { text-align: right; font-family: var(--mono); }
.sticky-col { position: sticky; left: 0; background: var(--paper-2); border-right: 1px solid var(--rule-2); font-weight: 600; }
tbody tr:nth-child(even) .sticky-col { background: #F2EFE6; }

.row-sample td { background: #FAF6FD; }
.row-sample .sticky-col { background: #F5EEFA; }

/* ---------- filters ---------- */
.filters {
  display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end;
  padding: .9rem; border: 1px solid var(--rule-2); border-bottom: 0; background: #F1EDE2;
}
.filters label { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-70); display: block; margin-bottom: .25rem; }
.filters select, .filters input {
  font: inherit; font-size: var(--step--1); padding: .4rem .5rem; border: 1px solid var(--rule-2);
  background: var(--paper-2); color: var(--ink); border-radius: 2px;
}
.btn {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem .9rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-2);
  border-radius: 2px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--teal-dk); border-color: var(--teal-dk); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper-2); }
.active-filters { font-family: var(--mono); font-size: .68rem; color: var(--gray-70); padding: .5rem .9rem; border: 1px solid var(--rule-2); border-bottom: 0; background: var(--paper-2); }

/* ---------- coverage meter (homepage honesty bar) ---------- */
.coverage { margin: 1.2rem 0; }
.coverage-bar { display: flex; height: 22px; border: 1px solid var(--ink); overflow: hidden; }
.coverage-bar span { display: block; }
.cv-verified { background: var(--teal); }
.cv-reported { background: var(--gold); }
.cv-pending  { background: repeating-linear-gradient(135deg, #E8E1D2, #E8E1D2 5px, #D5CCBA 5px, #D5CCBA 10px); }
.cv-outdated { background: var(--rust); }
.coverage-key { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; font-family: var(--mono); font-size: .66rem; color: var(--gray-70); }
.coverage-key i { width: .7rem; height: .7rem; display: inline-block; margin-right: .3rem; vertical-align: -1px; }

/* ---------- grids / cards ---------- */
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }

.card {
  background: var(--paper-2); border: 1px solid var(--rule-2); padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.card h3 { margin: 0; font-size: var(--step-0); line-height: 1.3; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0; font-size: var(--step--1); color: var(--gray-70); }
.card .kicker { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }

.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { border-bottom: 1px solid var(--rule); padding: .55rem 0; margin: 0; display: flex; gap: .6rem; justify-content: space-between; align-items: baseline; }
.linklist a { text-decoration: none; font-weight: 550; }
.linklist a:hover { text-decoration: underline; }
.linklist .note { font-family: var(--mono); font-size: .64rem; color: var(--gray-70); white-space: nowrap; }

/* ---------- section head ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: .6rem; margin-top: 3rem; }
.sec-head h2 { border: 0; padding: 0; margin: 0; }
.sec-head a { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- rail ---------- */
.rail { font-size: var(--step--1); }
.rail > section { border-top: 2px solid var(--ink); padding: .7rem 0 1.4rem; margin-bottom: .6rem; }
.rail h2 { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; border: 0; padding: 0; margin: 0 0 .7rem; color: var(--teal-dk); }
.rail ul { list-style: none; padding: 0; margin: 0; }
.rail li { margin-bottom: .5rem; line-height: 1.4; }
.rail .dt { font-family: var(--mono); font-size: .64rem; color: var(--gray-70); display: block; }
@media (max-width: 940px) { .rail { border-top: 1px solid var(--rule); padding-top: 1rem; } }

/* ---------- byline ---------- */
.byline { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .8rem 0; margin: 1.4rem 0; font-size: var(--step--1); max-width: none; }
.byline .who { margin-bottom: .5rem; }
.byline .dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .5rem 1.2rem; font-family: var(--mono); font-size: .66rem; color: var(--gray-70); }
.byline .dates b { display: block; color: var(--ink); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; font-size: .6rem; }

/* ---------- callouts ---------- */
.note-box { border: 1px solid var(--rule-2); border-left: 5px solid var(--gold); background: var(--gold-lt); padding: .9rem 1.1rem; margin: 1.6rem 0; font-size: var(--step--1); max-width: none; }
.note-box.warn { border-left-color: var(--rust); background: #F8EAE4; }
.note-box.independence { border-left-color: var(--teal); background: var(--teal-lt); }
.note-box h3 { margin-top: 0; font-size: var(--step-0); }
.note-box > :last-child { margin-bottom: 0; }

.todo {
  border: 1px dashed var(--rule-2); background: repeating-linear-gradient(135deg, #FDFBF6, #FDFBF6 8px, #F2EDE1 8px, #F2EDE1 16px);
  padding: .9rem 1.1rem; margin: 1.4rem 0; font-family: var(--mono); font-size: .72rem; color: #4A4136; max-width: none;
}
.todo b { color: var(--rust); letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; }
.todo ul { margin: .5rem 0 0; }
.todo li { margin-bottom: .3rem; }

/* ---------- pros / limits ---------- */
.proslim { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 1rem; margin: 1.4rem 0; max-width: none; }
.proslim > div { border: 1px solid var(--rule-2); padding: .9rem 1rem; background: var(--paper-2); }
.proslim h3 { margin: 0 0 .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.proslim .pros h3 { color: var(--teal-dk); }
.proslim .lims h3 { color: var(--rust); }
.proslim ul { margin: 0; padding-left: 1.1rem; font-size: var(--step--1); }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 1.4rem 0; border-left: 2px solid var(--rule-2); max-width: none; }
.timeline li { padding: 0 0 1.1rem 1.1rem; position: relative; margin: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .45rem; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; }
.timeline .dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--gray-70); display: block; }

/* ---------- scorecard ---------- */
.score-hero { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.score-hero .val { font-family: var(--mono); font-size: var(--step-4); font-weight: 600; line-height: 1; }
.score-bars { margin: 1rem 0 0; }
.score-bars .row { display: grid; grid-template-columns: minmax(140px, 1.4fr) 1fr auto; gap: .7rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); }
.score-bars .track { height: 10px; background: #E8E1D2; }
.score-bars .fill { height: 10px; background: var(--teal); }
.score-bars .fill.empty { background: repeating-linear-gradient(135deg, #E8E1D2, #E8E1D2 4px, #D5CCBA 4px, #D5CCBA 8px); }
.score-bars .pt { font-family: var(--mono); font-size: .7rem; }

/* ---------- chart ---------- */
.chart { width: 100%; height: auto; display: block; background: var(--paper-2); }
.chart .grid-line { stroke: var(--rule); stroke-width: 1; }
.chart .axis { stroke: var(--gray-70); stroke-width: 1; }
.chart .lbl { font-family: var(--mono); font-size: 9px; fill: var(--gray-70); }
details.datatable { margin-top: .6rem; }
details.datatable summary { font-family: var(--mono); font-size: .68rem; cursor: pointer; color: var(--teal-dk); padding: .3rem 0; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--rule); padding: .2rem 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: .7rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--teal); }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding-bottom: .6rem; margin: 0; }

/* ---------- drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(430px, 100%);
  background: var(--paper-2); border-left: 3px solid var(--ink); box-shadow: -8px 0 30px rgba(14,36,56,.18);
  transform: translateX(102%); transition: transform .22s ease; z-index: 120;
  display: flex; flex-direction: column;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer-head { background: var(--ink); color: var(--paper-2); padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.drawer-head h2 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 0; border: 0; padding: 0; color: var(--paper-2); }
.drawer-head button { background: none; border: 1px solid rgba(255,255,255,.35); color: var(--paper-2); font: inherit; cursor: pointer; padding: .2rem .55rem; border-radius: 2px; }
.drawer-body { padding: 1rem; overflow-y: auto; font-size: var(--step--1); }
.drawer-body dl { margin: 0; }
.drawer-body dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-70); margin-top: .8rem; }
.drawer-body dd { margin: .15rem 0 0; word-break: break-word; }
@media (max-width: 560px) { .drawer { width: 100%; } }

/* ---------- compare tray ---------- */
.tray {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--paper-2);
  padding: .7rem var(--gap); z-index: 110; display: none; gap: 1rem; align-items: center; flex-wrap: wrap;
  border-top: 3px solid var(--gold);
}
.tray[data-active="true"] { display: flex; }
.tray .slots { display: flex; gap: .5rem; flex-wrap: wrap; font-family: var(--mono); font-size: .7rem; }
.tray .slot { border: 1px dashed rgba(255,255,255,.4); padding: .25rem .5rem; }
.tray .slot.filled { border-style: solid; border-color: var(--gold); }
.tray .slot button { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; margin-left: .35rem; }
.tray .btn { margin-left: auto; }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.5rem; margin: 1.5rem 0; max-width: none; }
.calc fieldset { border: 1px solid var(--rule-2); background: var(--paper-2); padding: 1rem; margin: 0; }
.calc legend { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dk); padding: 0 .4rem; }
.calc .field { margin-bottom: .8rem; }
.calc label { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: .25rem; }
.calc input, .calc select { width: 100%; font: inherit; font-size: var(--step--1); padding: .45rem .55rem; border: 1px solid var(--rule-2); border-radius: 2px; background: #fff; }
.calc .hint { font-family: var(--mono); font-size: .64rem; color: var(--gray-70); margin-top: .2rem; }
.result-panel { border: 1px solid var(--ink); background: var(--paper-2); }
.result-panel .top { background: var(--ink); color: var(--paper-2); padding: .8rem 1rem; }
.result-panel .top .num { font-size: var(--step-3); display: block; }
.result-panel .top .lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.result-panel .body { padding: 1rem; }
.result-panel table { font-size: var(--step--1); }

/* ---------- state finder ---------- */
.statefinder { margin: 1.4rem 0; max-width: none; }
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px,1fr)); gap: .35rem; margin-top: .8rem; }
.state-grid a {
  display: block; padding: .45rem .55rem; border: 1px solid var(--rule-2); background: var(--paper-2);
  text-decoration: none; font-size: var(--step--1); color: var(--ink);
}
.state-grid a:hover { background: var(--teal-lt); border-color: var(--teal); }
.state-grid a[hidden] { display: none; }
.state-grid .ab { font-family: var(--mono); font-size: .62rem; color: var(--gray-70); display: block; }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: rgba(255,255,255,.85); margin-top: 3rem; padding: 2.5rem 0 1.5rem; font-size: var(--step--1); }
footer.site a { color: rgba(255,255,255,.85); text-decoration: none; }
footer.site a:hover { color: var(--gold); text-decoration: underline; }
footer.site h2 { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 0; padding: 0; margin: 0 0 .7rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: .35rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1.6rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.18); margin-top: 2rem; padding-top: 1.2rem; font-size: .8rem; color: rgba(255,255,255,.62); }
.foot-legal p { max-width: 80ch; }

/* ---------- print ---------- */
@media print {
  .masthead, footer.site, .tray, .drawer, .build-banner, .filters, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .cols { grid-template-columns: 1fr; }
  a::after { content: " (" attr(href) ")"; font-size: .7em; color: #555; }
}

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- table of contents ---------- */
.toc { border-top: 2px solid var(--ink); padding: .7rem 0 1.2rem; margin-bottom: .6rem; }
.toc h2 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  border: 0; padding: 0; margin: 0 0 .6rem; color: var(--teal-dk);
}
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; font-size: var(--step--1); }
.toc li { counter-increment: toc; margin-bottom: .4rem; line-height: 1.35; display: flex; gap: .5rem; }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: .62rem; color: var(--gray-40); padding-top: .15rem;
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- page tools ---------- */
.pagetools {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: 2.5rem 0 0;
  padding-top: 1.2rem; border-top: 1px solid var(--rule); max-width: none;
}

/* ---------- regulatory status banner ---------- */
.regstatus {
  border: 1px solid var(--rust); border-left: 5px solid var(--rust); background: #F9EDE7;
  padding: 1rem 1.2rem; margin: 1.6rem 0; max-width: none;
}
.regstatus .lbl {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust); margin-bottom: .45rem;
}
.regstatus p { margin: 0 0 .6rem; }
.regstatus p:last-child { margin-bottom: 0; }
.regstatus .deadline { font-family: var(--mono); font-size: .72rem; color: #6A2F1A; }

/* ---------- outbound provider links ---------- */
a.outbound { white-space: nowrap; }
a.outbound::after {
  content: "↗"; font-size: .72em; margin-left: .12em; color: var(--gray-40);
  vertical-align: super; text-decoration: none;
}
.protocol-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); margin: 1rem 0; }
.protocol-grid a {
  display: block; padding: .7rem .85rem; border: 1px solid var(--rule-2); background: var(--paper-2);
  text-decoration: none; color: var(--ink); white-space: normal;
}
.protocol-grid a:hover { border-color: var(--teal); background: var(--teal-lt); }
.protocol-grid .p { font-weight: 650; display: block; }
.protocol-grid .m {
  font-family: var(--mono); font-size: .66rem; color: var(--gray-70); display: block; margin-top: .2rem;
}


/* ---------- mobile navigation ---------- */
.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.bars span{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.bars span{transition:none}}

@media (max-width:860px){
    .navbar{display:none}
  .navbar.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    box-shadow:0 12px 28px rgba(11,31,51,.10);z-index:60;max-height:70vh;overflow-y:auto}
  .navbar.open .nav-inner{flex-direction:column;align-items:stretch;gap:0;padding:.2rem 1rem}
  .navbar.open .nav-inner a{display:block;padding:.85rem .25rem;min-height:44px;font-size:.95rem;
    border-bottom:1px solid var(--rule-soft)}
  .navbar.open .nav-inner a:last-child{border-bottom:0}
  .masthead{position:relative}
}

/* ---------- editor's pick ---------- */
.pick{border:1px solid var(--rule);border-left:3px solid var(--teal);border-radius:8px;
  padding:1rem 1.1rem;margin:1.6rem 0;background:var(--paper-2)}
.pick .kicker{color:var(--teal)}
.pick h3{margin:.3rem 0 .5rem;font-size:var(--step-1)}
.pick .row{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:.6rem 0 0;
  font:500 .8rem/1.4 var(--sans);color:var(--gray-70)}
.pick .row b{color:var(--ink);font-weight:700}
.pick .cta{margin-top:.8rem}

.toolbox fieldset{border:1px solid var(--rule);border-radius:8px;padding:.9rem 1rem;margin:0 0 1rem}
.toolbox legend{font:700 .78rem/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--gray-70);padding:0 .4rem}
.toolbox label{display:block;margin:.55rem 0;font-size:.92rem;line-height:1.45}
.toolbox input[type=text],.toolbox select{display:block;width:100%;margin-top:.25rem;padding:.55rem .6rem;
  border:1px solid var(--rule);border-radius:6px;font:inherit;font-size:.92rem;min-height:44px}
.toolbox input[type=checkbox]{margin-right:.5rem;width:18px;height:18px;vertical-align:-3px}
.toolout{margin-top:1.1rem;padding:1rem;border:1px solid var(--rule);border-left:3px solid var(--teal);
  border-radius:8px;background:var(--paper-2)}
.toolout:empty{display:none}
.toolout ul,.toolout ol{margin:.4rem 0 .8rem 1.1rem}
.toolout li{margin:.25rem 0;font-size:.93rem}
.fineprint{font-size:.8rem;color:var(--gray-70);margin-top:.7rem}

.ptype{display:inline-block;font:600 .68rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.04em;
  padding:.18rem .42rem;border:1px solid var(--rule);border-radius:4px;color:var(--gray-70);white-space:nowrap}

.signup{border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:8px;
  padding:1.1rem 1.2rem;margin:2rem 0;background:var(--paper-2)}
.signup h2{margin:0 0 .4rem;font-size:var(--step-1)}
.signup p{margin:.3rem 0}
.signup-form{margin-top:.8rem}
.signup-form label{display:block;font:600 .78rem/1 var(--sans);text-transform:uppercase;
  letter-spacing:.05em;color:var(--gray-70);margin-bottom:.35rem}
.signup-form .row{display:flex;gap:.5rem;flex-wrap:wrap}
.signup-form input{flex:1 1 240px;padding:.6rem .7rem;border:1px solid var(--rule);border-radius:6px;
  font:inherit;font-size:.95rem;min-height:44px}
.signup-form button{min-height:44px}
@media (max-width:520px){.signup-form .row{flex-direction:column}.signup-form button{width:100%}}


/* ---------- editor's pick card ---------- */
.epick{
  position:fixed; z-index:70; right:1.25rem; bottom:1.25rem; width:min(330px, calc(100vw - 2.5rem));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); border-top:3px solid var(--gold); border-radius:10px;
  padding:1.05rem 1.15rem 1.1rem;
  box-shadow:0 2px 6px rgba(11,31,51,.06), 0 18px 44px rgba(11,31,51,.16);
  opacity:0; transform:translateY(14px);
  transition:opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1);
}
.epick.in{opacity:1; transform:translateY(0)}
.epick[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.epick{transition:none;transform:none}}

.epick-x{
  position:absolute; top:.5rem; right:.5rem; width:26px; height:26px;
  display:grid; place-items:center; background:transparent; border:0; border-radius:5px;
  color:var(--gray-55); cursor:pointer; padding:0;
}
.epick-x:hover{background:var(--paper-2); color:var(--ink)}
.epick-x:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

.epick-eyebrow{
  margin:0 0 .18rem; font:700 .625rem/1 var(--sans); text-transform:uppercase;
  letter-spacing:.13em; color:var(--teal);
}
.epick-name{margin:0; font:600 1.42rem/1.1 var(--serif); letter-spacing:-.01em}
.epick-name a{color:var(--ink); text-decoration:none}
.epick-name a:hover{color:var(--teal)}
.epick-why{margin:.28rem 0 0; font:400 .8rem/1.45 var(--sans); color:var(--gray-70)}

.epick-price{
  display:flex; align-items:baseline; gap:.5rem;
  margin:.8rem 0 0; padding:.7rem 0 .75rem;
  border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
}
.epick-num{font:600 2.1rem/1 var(--serif); color:var(--ink); letter-spacing:-.02em}
.epick-unit{font:500 .7rem/1.32 var(--sans); color:var(--gray-70); text-transform:uppercase; letter-spacing:.05em}

.epick-facts{margin:.7rem 0 0; padding:0; list-style:none}
.epick-facts li{
  position:relative; padding-left:1.05rem; margin:.26rem 0;
  font:400 .81rem/1.4 var(--sans); color:var(--ink);
}
.epick-facts li::before{
  content:""; position:absolute; left:0; top:.46em; width:6px; height:6px;
  border-radius:50%; background:var(--teal);
}

.epick-stamp{
  display:flex; align-items:flex-start; gap:.4rem; margin:.75rem 0 0;
  font:500 .655rem/1.4 var(--mono); color:var(--gray-55); letter-spacing:.01em;
}
.epick-stamp .dot{
  flex:0 0 auto; width:6px; height:6px; margin-top:.34em; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 3px rgba(45,106,110,.14);
}

.epick-cta{display:flex; align-items:center; gap:.85rem; margin-top:.9rem}
.epick-btn{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 1rem; border-radius:7px;
  background:var(--navy); color:#fff; text-decoration:none;
  font:600 .875rem/1 var(--sans); letter-spacing:.01em;
  transition:background .18s ease;
}
.epick-btn:hover{background:var(--teal)}
.epick-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.epick-link{
  flex:0 0 auto; font:600 .8rem/1 var(--sans); color:var(--gray-70);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}
.epick-link:hover{color:var(--ink)}

@media (max-width:720px){
  .epick{
    right:0; left:0; bottom:0; width:100%; border-radius:12px 12px 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding:.9rem 1rem 1rem; transform:translateY(100%);
  }
  .epick.in{transform:translateY(0)}
  .epick-name{font-size:1.28rem}
  .epick-price{margin-top:.6rem; padding:.55rem 0 .6rem}
  .epick-num{font-size:1.85rem}
  .epick-facts{display:flex; gap:1rem; margin-top:.55rem}
  .epick-facts li{margin:0; font-size:.76rem}
  .epick-stamp{margin-top:.6rem; font-size:.62rem}
  .epick-cta{margin-top:.75rem}
}
@media print{.epick{display:none}}









/* ============================================================
   IDENTITY LAYER — the scoreboard
   ============================================================ */
html{background:var(--ground)}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);
  line-height:1.66;-webkit-font-smoothing:antialiased}

/* ---------- banner ---------- */
.ai-banner{background:linear-gradient(90deg,var(--brand-dk),#1D4ED8);color:#fff;font-size:.88rem}
.ai-banner .wrap{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.62rem var(--gap)}
.ai-banner .ai-btn{background:#fff;color:#0C4A6E;font-weight:700;font-size:.82rem;padding:.36rem .82rem;
  border-radius:100px;text-decoration:none;white-space:nowrap}
.ai-banner a.ai-alt{color:#DBEAFE;text-decoration:underline;font-size:.85rem}
.ai-banner .x{margin-left:auto;background:none;border:0;color:#fff;opacity:.7;cursor:pointer;font-size:1.1rem}

/* ---------- header: dark, bordered, mono nav ---------- */
.masthead{background:rgba(11,17,32,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:70}
.masthead::after{display:none}
.masthead a{color:var(--ink);text-decoration:none}
.mast-top{padding:.8rem 0;display:flex;align-items:center;gap:1.4rem;flex-wrap:nowrap}
.wordmark,.masthead .brand{flex:0 0 auto;white-space:nowrap;font-family:var(--display);font-weight:700;
  font-size:1.14rem;letter-spacing:-.028em;display:inline-flex;align-items:center;gap:.55rem}
.wordmark b{font-weight:700;color:var(--brand)}
.wordmark::before{content:"";width:10px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,var(--brand),#1D4ED8)}
.mast-stamp{background:transparent;border-top:1px solid var(--rule);color:var(--gray-55);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;padding:.32rem 0}
.mast-stamp b{color:var(--brand);font-weight:500}
.navbar{background:transparent;border:0;flex:1 1 auto;min-width:0;overflow:hidden}
.nav-inner{display:flex;gap:.1rem;flex-wrap:nowrap;justify-content:center;overflow:hidden}
.nav-inner a{white-space:nowrap;font-family:var(--mono);font-weight:400;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gray-70);padding:.45rem .62rem;
  border:0;border-radius:100px}
.nav-inner a:hover{color:var(--ink);background:var(--paper-2)}
.nav-inner a[aria-current="page"]{color:var(--brand);background:var(--brand-lt)}
.nav-inner a.sec{display:none}
.mast-actions{flex:0 0 auto;display:flex;align-items:center;gap:.55rem}
.mast-search{display:none}
.nav-toggle{display:none;border:1px solid var(--rule-2);color:var(--ink);background:var(--paper);
  border-radius:100px}
.btn-cta{background:var(--brand);color:#08131F;border:0;border-radius:100px;font-family:var(--sans);
  font-weight:700;font-size:.88rem;padding:.6rem 1.15rem;min-height:44px;white-space:nowrap}
.btn-cta:hover{background:#7DD3FC}

/* ---------- captured-price strip ---------- */
.pricestrip{background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden;
  font-family:var(--mono);font-size:.72rem;color:var(--gray-70)}
.pricestrip .rail-in{display:flex;align-items:center;white-space:nowrap;animation:ticker 52s linear infinite}
.pricestrip .lead{background:var(--brand);color:#08131F;padding:.4rem .8rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto}
.pricestrip .cell{padding:.4rem 1.1rem;border-right:1px solid var(--rule);flex:0 0 auto}
.pricestrip .cell b{color:var(--ink);font-weight:500}
.pricestrip .cell .amt{color:var(--accent);font-weight:500;margin:0 .45rem}
.pricestrip .cell i{font-style:normal;color:var(--gray-40);margin-left:.4rem}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- type ---------- */
main{padding:1.8rem 0 3rem}
.eyebrow,.kicker{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--brand);background:var(--brand-lt);
  padding:.3rem .7rem;border-radius:100px;margin:0 0 1rem;border:0;width:auto}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,3rem);line-height:1.06;
  letter-spacing:-.032em;margin:.1rem 0 .55rem;max-width:20ch}
main h2{font-family:var(--display);font-weight:600;font-size:var(--step-2);line-height:1.22;
  letter-spacing:-.022em;margin:2.5rem 0 .75rem;padding:0;border:0;display:block;color:var(--ink)}
main h2::before,main h2::after{display:none}
h3{font-family:var(--display);font-weight:600;font-size:var(--step-1);margin:1.6rem 0 .35rem;padding:0}
.standfirst{font-family:var(--sans);font-size:1.09rem;line-height:1.62;color:var(--gray-70);
  max-width:var(--measure);margin:.4rem 0 1.3rem}
p{max-width:var(--measure)}
a{color:var(--brand);text-underline-offset:2px}
a:hover{color:#7DD3FC}

/* ---------- byline ---------- */
.byline{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.9rem 1.15rem;margin:1.1rem 0 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center}
.byline .who{font-size:.92rem;font-weight:700;color:var(--ink);font-family:var(--sans);
  text-transform:none;letter-spacing:0}
.byline .who span{font-weight:400;color:var(--gray-55)}
.byline .dates,.byline span{font-family:var(--mono);font-size:.74rem;color:var(--gray-55);
  text-transform:none;letter-spacing:.02em}
.byline b{color:var(--brand);font-weight:500}

/* ---------- answer ---------- */
.answer{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:1.1rem 1.3rem 1.2rem;margin:1.4rem 0 1.9rem}
.answer .lab{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.68rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);background:transparent;
  padding:0}
.answer p{font-family:var(--sans);font-size:1.03rem;line-height:1.62;color:var(--ink);max-width:none;
  margin:.5rem 0 0}
.readtime{float:right;font-family:var(--mono);font-size:.72rem;color:var(--gray-55)}

/* ---------- tables ---------- */
.tablewrap,.tw{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  overflow-x:auto;padding:0;margin:1.3rem 0 1.7rem}
table{font-size:.92rem;font-family:var(--sans);border-collapse:collapse;width:100%}
caption{font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:-.018em;color:var(--ink);
  text-align:left;padding:.95rem 1.1rem .6rem;border:0}
thead th{background:var(--paper-2);color:var(--gray-70);font-family:var(--mono);font-weight:400;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:.55rem 1.1rem;border:0;
  border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
tbody th,tbody td{padding:.72rem 1.1rem;border:0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper-2)}
td.num,th.num,.numeric{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  text-align:right;letter-spacing:-.02em;color:var(--accent)}
tbody th[scope=row],.firstcol,.sticky-col{font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- the scoreboard: rank and score are the identity ---------- */
.rank{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;
  border-radius:7px;background:var(--paper-2);color:var(--gray-70);font-family:var(--mono);
  font-weight:500;font-size:.8rem;margin-right:.6rem}
.rank::before,.rank::after{content:none}
.rank-1{background:var(--accent);color:#1A1405}
.rank-2,.rank-3{background:var(--brand);color:#08131F}
.score{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--accent);
  letter-spacing:-.03em}
.score small{font-family:var(--mono);font-weight:400;font-size:.7rem;color:var(--gray-55)}
.meter{height:5px;border-radius:100px;background:var(--paper-3);margin:.35rem 0 0;overflow:hidden}
.meter > i{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.board-row{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:.75rem .9rem}
.board-row:hover{background:var(--paper-2);border-color:var(--brand);transform:none}
.board-name{font-family:var(--display);font-weight:600}
.board-sub{font-family:var(--mono);font-size:.68rem;color:var(--gray-55)}

/* ---------- chips ---------- */
.chip,.badge,.stamp{font-family:var(--mono);font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;border-radius:100px;padding:.18rem .58rem;border:0;display:inline-block;line-height:1.6}
.chip.v,.badge-verified,.cv-verified{background:var(--ok-lt);color:var(--ok)}
.chip.r,.badge-reported,.cv-reported{background:var(--warn-lt);color:var(--warn)}
.badge-pending,.cv-pending,.badge-not_covered,.cv-not_covered{background:var(--paper-2);color:var(--gray-55)}
.badge-outdated,.cv-outdated{background:var(--stop-lt);color:var(--stop)}
.nodata,.unverified{font-family:var(--mono);font-size:.8rem;color:var(--gray-40)}

/* ---------- cards, notes, buttons ---------- */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.1rem 1.2rem;transition:border-color .14s,transform .12s}
.card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card-h{font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:-.018em;
  margin:.5rem 0 .35rem;line-height:1.3}
.card-h a{color:var(--ink);text-decoration:none}
.card-h a:hover{color:var(--brand)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.note,.note-box{border:1px solid var(--rule);border-left:3px solid var(--gray-40);
  border-radius:var(--radius);background:var(--paper);padding:1rem 1.2rem;margin:1.3rem 0}
.note.warn,.note.reg{border-left-color:var(--brand);background:var(--brand-lt);border-color:var(--rule)}
.note.safe,.note.med{border-left-color:var(--accent);background:var(--accent-lt);border-color:var(--rule)}
.note-h,.note .lab,.note-box .lab{font-family:var(--mono);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--brand);display:block;margin:0 0 .35rem}
.btn{background:var(--brand);color:#08131F;border:0;border-radius:100px;font-family:var(--sans);
  font-weight:700;font-size:.9rem;padding:.68rem 1.2rem;min-height:44px;display:inline-flex;
  align-items:center;gap:.4rem}
.btn:hover{background:#7DD3FC}
.btn-ghost{background:var(--paper-2);color:var(--ink);border:1px solid var(--rule-2)}
.btn-ghost:hover{background:var(--paper-3);color:var(--ink)}

/* ---------- CTA, rail, footer, picks ---------- */
.signup{background:linear-gradient(135deg,var(--paper-2),var(--paper));border:1px solid var(--rule);
  border-radius:var(--radius);padding:1.7rem 1.8rem;color:var(--ink)}
.signup h2{color:var(--ink);margin:0 0 .4rem}
.signup p{color:var(--gray-70);max-width:none;margin:0 0 1.1rem}
.signup .btn{width:100%;justify-content:center;margin-bottom:.6rem;font-size:.98rem;padding:.85rem 1.2rem}
.signup .btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);border:0}
.rail > *{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1rem 1.1rem;margin-bottom:1rem}
.rail h2{font-family:var(--mono);font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;color:var(--gray-55);margin:0 0 .5rem}
.linklist li{border-bottom:1px solid var(--rule-soft)}
.linklist li:last-child{border-bottom:0}
.site-footer,footer.site{background:#070C17;color:var(--gray-55);border-top:1px solid var(--rule);
  margin-top:2.5rem}
.site-footer a,footer.site a{color:var(--gray-55)}
.site-footer a:hover,footer.site a:hover{color:var(--brand)}
.foot-grid h3,.foot-grid .card-h{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink)}
.foot-legal{font-family:var(--mono);font-size:.7rem}
.disclosure-strip{background:transparent;border-top:1px solid var(--rule);font-size:.8rem;
  color:var(--gray-55);padding:.9rem 0 .2rem}
.disclosure-strip b{color:var(--ink)}
.disclosure-strip a{color:var(--brand);text-decoration:underline}
.disclosure-strip code{background:var(--paper-2);color:var(--gray-70);padding:.05rem .3rem}
.toppicks{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(19,28,49,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--rule)}
.toppicks .wrap{display:flex;align-items:center;gap:.9rem;padding:.6rem var(--gap);overflow-x:auto}
.tp-lab b{display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;color:var(--brand)}
.tp-lab span{font-size:.76rem;color:var(--gray-55)}
.tp-item{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:.45rem .75rem;text-decoration:none;color:var(--ink)}
.tp-item:hover{border-color:var(--brand)}
.tp-n{font-family:var(--mono);font-size:.7rem;font-weight:500;color:#08131F;background:var(--brand);
  border-radius:5px;padding:.14rem .4rem}
.tp-item .nm{font-weight:600;font-size:.88rem;line-height:1.2;display:block}
.tp-item .mt{font-family:var(--mono);font-size:.7rem;color:var(--gray-55)}
.toppicks .x{margin-left:auto;background:none;border:0;color:var(--gray-55);cursor:pointer;font-size:1.15rem}
body.has-picks{padding-bottom:76px}
.epick{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--accent);
  border-radius:var(--radius)}
.epick-num{font-family:var(--display);color:var(--accent);font-weight:700}
.epick-btn{background:var(--brand);color:#08131F;border-radius:100px}
.toolbox fieldset{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.toolbox input,.toolbox select{border-radius:var(--radius-sm);border:1px solid var(--rule-2);
  background:var(--paper-2);color:var(--ink);font-family:var(--mono);padding:.5rem .7rem}
.opts label{border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:var(--paper)}
.opts label:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
.step-n{background:var(--brand);color:#08131F;border-radius:50%}
.quiz{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius)}
.quiz-bar{background:var(--paper-3)}
.quiz-bar > i{background:var(--brand)}
#loadbar{background:linear-gradient(90deg,var(--brand),var(--accent))}
.skel{background:linear-gradient(90deg,var(--paper) 25%,var(--paper-2) 37%,var(--paper) 63%);
  background-size:400% 100%}
::selection{background:var(--brand);color:#08131F}

@media (max-width:980px){
  .nav-inner{justify-content:flex-start}
  .nav-inner a:nth-child(n+6){display:none}
  .nav-toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;padding:.5rem .85rem;
    min-height:40px}
}
@media (max-width:860px){
  .navbar{flex:0 0 100%;order:3;overflow:visible;display:none}
  .navbar.open{display:block;border-top:1px solid var(--rule);padding:.3rem 0 .6rem}
  .navbar.open .nav-inner{flex-direction:column;flex-wrap:wrap;overflow:visible}
  .navbar.open .nav-inner a{width:100%;padding:.6rem .2rem;font-size:.92rem;border-radius:0;
    border-bottom:1px solid var(--rule-soft)}
  .navbar.open .nav-inner a:nth-child(n+6),.navbar.open .nav-inner a.sec{display:block}
  .mast-top{flex-wrap:wrap}
}
@media (max-width:640px){
  p{max-width:none}
  thead th,tbody th,tbody td{padding:.55rem .75rem}
}
@media (prefers-reduced-motion:reduce){.pricestrip .rail-in{animation:none}}

/* ---------- motion ---------- */
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;
  transition:width .22s ease-out,opacity .3s ease .18s;pointer-events:none}
#loadbar.go{width:82%}
#loadbar.done{width:100%;opacity:0}
main{opacity:1;transition:opacity .3s ease}
html.motion .reveal{opacity:0;transform:translateY(12px);
  transition:opacity .48s cubic-bezier(.22,.61,.36,1),transform .48s cubic-bezier(.22,.61,.36,1)}
html.motion .reveal.in{opacity:1;transform:none}
html.motion .reveal:nth-child(2){transition-delay:.05s}
html.motion .reveal:nth-child(3){transition-delay:.1s}
html.motion .board-row{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease}
html.motion .board-row.in{opacity:1;transform:none}
html.motion .board-row:nth-child(2){transition-delay:.05s}
html.motion .board-row:nth-child(3){transition-delay:.09s}
html.motion .board-row:nth-child(n+4){transition-delay:.13s}
html.motion .meter > i{width:0 !important;transition:width .66s cubic-bezier(.22,.61,.36,1) .1s}
html.motion .meter.in > i{width:var(--w,100%) !important}
html{scroll-behavior:smooth}
:target{scroll-margin-top:120px}
.quiz.js .q{display:none}
.quiz.js .q.on{display:block}
.skel{background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite;min-height:14px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #loadbar{display:none}
  html.motion .reveal,html.motion .board-row{opacity:1;transform:none;transition:none}
  html.motion .meter > i{transition:none}
  .skel{animation:none}
}

/* ============================================================
   SPACING SCALE
   Vertical rhythm was set ad hoc — .2 through 2.6rem with no
   relationship between values, so section gaps read unevenly and
   adjacent blocks of different types collided or drifted apart.
   One scale, applied to the block elements that set rhythm.
   ============================================================ */
:root{
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.75rem; --s-8:3.5rem;
}

/* section rhythm: one value above a heading, one below */
main h2{margin:var(--s-7) 0 var(--s-3)}
main h2:first-child{margin-top:var(--s-2)}
main h3{margin:var(--s-5) 0 var(--s-2)}
main p{margin:0 0 var(--s-4)}
main ul,main ol{margin:0 0 var(--s-4);padding-left:1.35rem}
main li{margin:0 0 var(--s-2)}
main li:last-child{margin-bottom:0}

/* block elements share one outer rhythm so mixed sequences stay even */
.tablewrap,.tw,.note,.note-box,.answer,.byline,.card-grid,figure.ledger,
.epick,.signup,.quiz,.toolbox,.board{margin-top:var(--s-5);margin-bottom:var(--s-5)}
/* a block immediately after a heading sits closer to it than to the previous section */
main h2 + .tablewrap,main h2 + .note,main h2 + .card-grid,main h2 + figure.ledger,
main h3 + .tablewrap,main h3 + .note,main h3 + .card-grid{margin-top:var(--s-3)}
/* consecutive blocks never double their gap */
.tablewrap + .tablewrap,.note + .note,figure.ledger + figure.ledger,
.tablewrap + .note,.note + .tablewrap{margin-top:var(--s-4)}
/* the caption under a table belongs to it, not to the next section */
.tablewrap + p.fineprint,figure.ledger + p.fineprint{margin-top:calc(var(--s-4) * -1 + .35rem)}

/* internal padding on one scale */
.card,.note,.note-box,.rail > *{padding:var(--s-4) var(--s-5)}
.answer{padding:var(--s-4) var(--s-5) var(--s-5)}
.byline{padding:var(--s-3) var(--s-5)}
caption{padding:var(--s-4) var(--s-5) var(--s-3)}
thead th{padding:var(--s-2) var(--s-5)}
tbody th,tbody td{padding:var(--s-3) var(--s-5)}
.signup{padding:var(--s-6) var(--s-6)}

/* the last block in a section should not add to the next section's top margin */
main > *:last-child,.card > *:last-child,.note > *:last-child,.answer > *:last-child{margin-bottom:0}

/* grid gaps on the same scale */
.card-grid{gap:var(--s-4)}
.cols{gap:var(--s-6)}
.board{gap:var(--s-2)}
.foot-grid{gap:var(--s-5)}

@media (max-width:640px){
  :root{--s-7:2rem; --s-8:2.5rem}
  .card,.note,.note-box,.answer,.rail > *{padding:var(--s-4)}
  thead th,tbody th,tbody td{padding:var(--s-2) var(--s-4)}
  caption{padding:var(--s-3) var(--s-4) var(--s-2)}
}

/* utility classes replacing inline margins, so the scale governs everything */
.stamp-line{font-family:var(--mono);font-size:.72rem;color:var(--gray-70);
  margin:calc(var(--s-4) * -0.4) 0 var(--s-4)}
.stamp-flush{margin:0;font-family:var(--mono);font-size:.72rem;line-height:1.6}
.note-under{margin:var(--s-2) 0 0;font-size:.86em;color:var(--gray-70)}
.flush{margin:0}
.sec-gap{margin-top:var(--s-7)}
.blk-gap{margin-top:var(--s-5)}
.state-search{width:100%;max-width:320px;font:inherit;padding:var(--s-2);
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:var(--paper-2);
  color:var(--ink);margin-top:var(--s-1)}

/* ============================================================
   MOBILE HEADER
   Six elements stacked before the content — banner, brand row,
   sub-nav, price strip and stamp — taking roughly 275px of a
   667px viewport. Collapse to a single 56px bar plus a one-line
   banner, and make only the bar sticky so scrolling reclaims
   the rest.
   ============================================================ */
@media (max-width:760px){

  /* banner: one line, no wrap, no secondary link */
  .ai-banner{font-size:.78rem;line-height:1.3}
  .ai-banner .wrap{padding:.42rem var(--gap);gap:.5rem;flex-wrap:nowrap;
    align-items:center;overflow:hidden}
  .ai-banner > .wrap > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .ai-banner .ai-alt{display:none}
  .ai-banner .ai-btn{font-size:.74rem;padding:.26rem .6rem;flex:0 0 auto}
  .ai-banner .x{padding:.1rem .25rem;font-size:1rem;flex:0 0 auto}

  /* brand row: one line only. Wordmark, then CTA, then menu. */
  .mast-top{padding:.5rem 0;gap:.6rem;flex-wrap:nowrap;min-height:56px}
  .wordmark,.masthead .brand{font-size:.98rem;gap:.45rem;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .wordmark::before{width:7px;height:18px}
  .mast-actions{gap:.4rem;flex:0 0 auto}
  .btn-cta{font-size:.8rem;padding:.42rem .8rem;min-height:38px}
  .nav-toggle{min-height:38px;padding:.4rem .7rem;font-size:.8rem}

  /* everything decorative comes off the first screen */
  .pricestrip{display:none}
  .mast-stamp{display:none}
  .subnav{display:none}
  .mast-search{display:none}

  /* only the compact bar stays pinned; the banner scrolls away */
  .ai-banner{position:static}
  .masthead{position:sticky;top:0}
  main{padding-top:1.1rem}
  :target{scroll-margin-top:72px}
}

@media (max-width:420px){
  .ai-banner .wrap > span b{display:none}          /* keep the ask, drop the label */
  .btn-cta{font-size:.76rem;padding:.4rem .7rem}
  .wordmark,.masthead .brand{font-size:.92rem}
  h1{font-size:clamp(1.6rem,7vw,2rem)}
}

/* the drawer opens over the page rather than pushing the content down */
@media (max-width:860px){
  .navbar.open{position:absolute;left:0;right:0;top:100%;background:var(--ground);
    border-bottom:1px solid var(--rule);box-shadow:var(--shadow-lg);max-height:70vh;
    overflow-y:auto;z-index:71}
  .masthead{position:sticky;top:0}
}