/* ============================================================
   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.
   ============================================================ */
/* ============================================================
   GLP-1 Tirzepatide Rank — 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.
   ============================================================ */
/* ============================================================
   GLP-1 Tirzepatide Rank — a comparison instrument
   Left rail navigation, matrix-first content, forest and emerald.
   Shares no colour, face or structure with any sibling site.
   ============================================================ */
/* ============================================================
   GLP-1 Tirzepatide Rank — a ranking board
   Fixed left rail, white ground, raspberry signal, big rank numerals.
   Shares no colour, face or structure with any sibling site.
   ============================================================ */
/* ============================================================
   glp1tirzepatiderank.com
   Product-editorial: banner, sticky header, price strip, quick
   answer, byline card, dark CTA, sticky top-picks bar.
   ============================================================ */
/* ============================================================
   glp1tirzepatiderank.com — the clinical chart
   Graphite ground, lime signal, fixed left rail. Every sibling
   puts navigation across the top; this one puts it down the
   side. Shares no colour or face with any of them.
   ============================================================ */
/* ============================================================
   glp1tirzepatiderank.com — the clinical chart, on cream
   Cream ground, deep-olive signal, fixed left rail. The rail is
   the structural signature: every sibling runs navigation across
   the top. Lime reads at 1.44:1 on cream, so the signal is the
   same hue family taken down to a readable value.
   ============================================================ */
:root{
  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:var(--sans);
  --body:var(--sans);
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* ground — cream, with white cards above it */
  --ground:#FCFAF3;
  --paper:#FFFFFF;
  --paper-2:#F4F1E6;
  --paper-3:#E7E2D2;

  --ink:#161A12;
  --ink-2:#333A2B;
  --gray-70:#535B49;
  --gray-55:#636C58;
  --gray-40:#5F6853;

  /* signal — deep olive. Same family as the lime it replaces, readable on cream. */
  --brand:#3F6212;
  --brand-dk:#33500E;
  --brand-lt:#EEF4E0;

  --accent:#7A5607; --accent-lt:#FAF3E0;

  --ok:#3F6212;    --ok-lt:#EEF4E0;
  --warn:#7A5607;  --warn-lt:#FAF3E0;
  --stop:#9F1D2C;  --stop-lt:#FBEEEF;

  --navy:#161A12; --teal:#3F6212; --teal-dk:#33500E; --teal-lt:#EEF4E0;
  --gold:#7A5607; --gold-lt:#FAF3E0; --rust:#9F1D2C;
  --rule:#E4E0D0; --rule-2:#D2CCB8; --rule-soft:#F0EDE1;

  --wrap:1180px; --maxw:1180px; --measure:70ch;
  --gap:clamp(1.1rem,.7rem + 1.2vw,2rem);
  --rail-w:270px;
  --side:246px;
  --step--1:.86rem; --step-0:1.02rem; --step-1:1.2rem;
  --step-2:1.48rem; --step-3:1.9rem; --step-4:2.5rem;
  --radius:10px; --radius-sm:6px;
  --w:100%;
  --shadow:0 1px 2px rgba(22,26,18,.05);
  --shadow-lg:0 8px 28px rgba(22,26,18,.12);
  --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;
}

*, *::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 clinical chart
   Fixed left rail at desktop. No sibling does this.
   ============================================================ */
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:var(--brand);color:#FFFFFF;font-size:.86rem;font-weight:500}
.ai-banner .wrap{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.55rem var(--gap)}
.ai-banner .ai-btn{background:#FFFFFF;color:var(--brand);font-weight:700;font-size:.8rem;
  padding:.32rem .8rem;border-radius:var(--radius-sm);text-decoration:none;white-space:nowrap}
.ai-banner a.ai-alt{color:#EEF4E0;text-decoration:underline;font-size:.83rem}
.ai-banner .x{margin-left:auto;background:none;border:0;color:#FFFFFF;opacity:.75;cursor:pointer;
  font-size:1.05rem}

/* ---------- the left rail ---------- */

/* ---------- masthead at narrower widths: a normal bar ---------- */
.masthead{background:var(--paper);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}
.wordmark,.masthead .brand{flex:0 0 auto;white-space:nowrap;font-family:var(--display);font-weight:700;
  font-size:1.06rem;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:.5rem}
.wordmark b{color:var(--brand)}
.wordmark::before{content:"";width:8px;height:20px;border-radius:2px;background:var(--brand)}
.mast-stamp{background:transparent;color:var(--gray-55);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.04em;text-transform:uppercase;padding:.3rem 0}
.mast-stamp b{color:var(--brand);font-weight:400}
.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(--sans);font-weight:500;font-size:.85rem;
  color:var(--gray-70);padding:.42rem .62rem;border:0;border-radius:var(--radius-sm)}
.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:.5rem}
.mast-search{display:none}
.nav-toggle{display:none;border:1px solid var(--rule-2);color:var(--ink);background:var(--paper-2);
  border-radius:var(--radius-sm)}
.btn-cta{background:var(--brand);color:#FFFFFF;border:0;border-radius:var(--radius-sm);
  font-family:var(--sans);font-weight:700;font-size:.86rem;padding:.55rem 1.05rem;min-height:44px;
  white-space:nowrap;display:inline-flex;align-items:center}
.btn-cta:hover{background:var(--brand-dk)}

/* ---------- captured-price strip ---------- */
.pricestrip{background:var(--ink);border-bottom:0;overflow:hidden;
  font-family:var(--mono);font-size:.7rem;color:#9FAF92}
.pricestrip .rail-in{display:flex;align-items:center;white-space:nowrap;animation:ticker 54s linear infinite}
.pricestrip .lead{background:var(--brand);color:#FFFFFF;padding:.36rem .8rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto}
.pricestrip .cell{padding:.36rem 1.05rem;border-right:1px solid rgba(255,255,255,.12);flex:0 0 auto}
.pricestrip .cell b{color:#FFFFFF;font-weight:400}
.pricestrip .cell .amt{color:#C3E88D;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.7rem 0 3rem}
.eyebrow,.kicker{display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;color:var(--brand);background:var(--brand-lt);
  padding:.28rem .65rem;border-radius:var(--radius-sm);margin:0 0 1rem;border:0;width:auto}
h1{font-family:var(--display);font-weight:700;font-size:clamp(1.95rem,4.2vw,2.85rem);line-height:1.07;
  letter-spacing:-.028em;margin:.1rem 0 .55rem;max-width:21ch}
main h2{font-family:var(--display);font-weight:600;font-size:var(--step-2);line-height:1.24;
  letter-spacing:-.02em;color:var(--ink);border:0;padding:0;display:block}
main h2::before,main h2::after{display:none}
h3{font-family:var(--display);font-weight:600;font-size:var(--step-1);padding:0}
.standfirst{font-family:var(--sans);font-size:1.08rem;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:var(--brand-dk)}

/* ---------- byline, answer ---------- */
.byline{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  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:.72rem;color:var(--gray-55);
  text-transform:none;letter-spacing:.02em}
.byline b{color:var(--brand);font-weight:400}
.answer{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--brand);
  border-radius:var(--radius)}
.answer .lab{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.66rem;
  font-weight:400;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:.7rem;color:var(--gray-55)}

/* ---------- tables ---------- */
.tablewrap,.tw{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  overflow-x:auto;padding:0}
table{font-size:.91rem;font-family:var(--sans);border-collapse:collapse;width:100%}
caption{font-family:var(--display);font-size:.98rem;font-weight:600;letter-spacing:-.016em;color:var(--ink);
  text-align:left;border:0}
thead th{background:var(--paper-2);color:var(--gray-70);font-family:var(--mono);font-weight:400;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;border:0;
  border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
tbody th,tbody td{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:400;
  text-align:right;letter-spacing:-.02em;color:var(--brand)}
tbody th[scope=row],.firstcol,.sticky-col{font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- rank, score, meters ---------- */
.rank{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;
  border-radius:var(--radius-sm);background:var(--paper-2);color:var(--gray-70);font-family:var(--mono);
  font-weight:400;font-size:.78rem;margin-right:.6rem}
.rank::before,.rank::after{content:none}
.rank-1{background:var(--brand);color:#FFFFFF}
.rank-2,.rank-3{background:var(--brand-lt);color:var(--brand)}
.score{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--brand);letter-spacing:-.03em}
.score small{font-family:var(--mono);font-weight:400;font-size:.7rem;color:var(--gray-55)}
.meter{height:4px;border-radius:2px;background:var(--paper-3);margin:.35rem 0 0;overflow:hidden}
.meter > i{height:100%;border-radius:2px;background:var(--brand)}
.board-row{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:.72rem .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:.64rem;font-weight:400;text-transform:uppercase;
  letter-spacing:.06em;border-radius:var(--radius-sm);padding:.16rem .5rem;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);
  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.02rem;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)}
.note,.note-box{border:1px solid var(--rule);border-left:3px solid var(--gray-40);
  border-radius:var(--radius);background:var(--paper)}
.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:.66rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.1em;color:var(--brand);display:block;margin:0 0 .35rem}
.btn{background:var(--brand);color:#FFFFFF;border:0;border-radius:var(--radius-sm);font-family:var(--sans);
  font-weight:700;font-size:.88rem;padding:.66rem 1.15rem;min-height:44px;display:inline-flex;
  align-items:center;gap:.4rem}
.btn:hover{background:var(--brand-dk)}
.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:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--brand);
  border-radius:var(--radius);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:.96rem}
.signup .btn-ghost{background:var(--paper-2);color:var(--ink);border:1px solid var(--rule-2)}
.rail > *{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius)}
.rail h2{font-family:var(--mono);font-size:.66rem;font-weight:400;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:var(--ink);color:#B9C2AE;border-top:0}
.site-footer a,footer.site a{color:#B9C2AE}
.site-footer a:hover,footer.site a:hover{color:#D7E8B8}
.foot-grid h3,.foot-grid .card-h{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.1em;color:#FFFFFF}
.foot-legal{font-family:var(--mono);font-size:.7rem}
.disclosure-strip{background:transparent;border-top:1px solid rgba(255,255,255,.14);font-size:.8rem;
  color:#B9C2AE}
.disclosure-strip b{color:#FFFFFF}
.disclosure-strip a{color:#FFFFFF;text-decoration:underline}
.disclosure-strip code{background:rgba(255,255,255,.1);color:#B9C2AE;padding:.05rem .3rem}
.toppicks{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--paper);
  border-top:1px solid var(--rule);box-shadow:0 -2px 14px rgba(22,26,18,.07)}
.toppicks .wrap{display:flex;align-items:center;gap:.9rem;padding:.55rem var(--gap);overflow-x:auto}
.tp-lab b{display:block;font-family:var(--mono);font-size:.64rem;font-weight:400;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:.42rem .72rem;text-decoration:none;color:var(--ink)}
.tp-item:hover{border-color:var(--brand)}
.tp-n{font-family:var(--mono);font-size:.68rem;font-weight:400;color:#FFFFFF;background:var(--brand);
  border-radius:3px;padding:.12rem .38rem}
.tp-item .nm{font-weight:600;font-size:.86rem;line-height:1.2;display:block}
.tp-item .mt{font-family:var(--mono);font-size:.68rem;color:var(--gray-55)}
.toppicks .x{margin-left:auto;background:none;border:0;color:var(--gray-55);cursor:pointer;font-size:1.1rem}
body.has-picks{padding-bottom:74px}

.epick{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--brand);
  border-radius:var(--radius)}
.epick-num{font-family:var(--display);color:var(--brand);font-weight:700}
.epick-btn{background:var(--brand);color:#FFFFFF;border-radius:var(--radius-sm)}
.toolbox fieldset{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.toolbox input,.toolbox select,.state-search{border-radius:var(--radius-sm);border:1px solid var(--rule-2);
  background:var(--paper-2);color:var(--ink);font-family:var(--mono)}
.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:#FFFFFF;border-radius:var(--radius-sm)}
.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:var(--brand)}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,var(--paper-3) 37%,var(--paper-2) 63%);
  background-size:400% 100%}
::selection{background:var(--brand);color:#FFFFFF}

@media (max-width:1079px){
  .nav-inner a:nth-child(n+6){display:none}
  .nav-toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;padding:.45rem .8rem;
    min-height:40px}
}
@media (max-width:860px){
  .navbar{flex:0 0 100%;order:3;overflow:visible;display:none}
  .navbar.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:var(--shadow-lg);max-height:70vh;overflow-y:auto;
    z-index:71;padding:.3rem 0 .6rem}
  .navbar.open .nav-inner{flex-direction:column;flex-wrap:wrap;overflow:visible}
  .navbar.open .nav-inner a{width:100%;padding:.58rem .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}
  .masthead{position:sticky;top:0}
}
@media (max-width:760px){
  .ai-banner{font-size:.78rem;line-height:1.3;position:static}
  .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:.24rem .58rem;flex:0 0 auto}
  .pricestrip,.mast-stamp,.subnav,.mast-search{display:none}
  main{padding-top:1.1rem}
  :target{scroll-margin-top:72px}
  :root{--s-7:2rem;--s-8:2.5rem}
}
@media (max-width:420px){
  .ai-banner .wrap > span b{display:none}
  h1{font-size:clamp(1.55rem,7vw,1.95rem)}
}
@media (prefers-reduced-motion:reduce){.pricestrip .rail-in{animation:none}}

/* ---------- spacing scale, applied ---------- */
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}
.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)}
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)}
.tablewrap + .tablewrap,.note + .note,figure.ledger + figure.ledger,
.tablewrap + .note,.note + .tablewrap{margin-top:var(--s-4)}
.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)}
main > *:last-child,.card > *:last-child,.note > *:last-child,.answer > *:last-child{margin-bottom:0}
.card-grid{gap:var(--s-4)}.cols{gap:var(--s-6)}.board{gap:var(--s-2)}.foot-grid{gap:var(--s-5)}
.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);margin-top:var(--s-1)}
@media (max-width:760px){
  .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)}
}

/* ---------- 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.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:110px}
.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}
}


/* below the rail breakpoint the subnav is a horizontal bar, which is correct
   there because the masthead is horizontal too */
@media (max-width:1079px){
  .subnav{border-bottom:1px solid var(--rule);background:var(--paper-2)}
  .subnav a{font-size:.8rem;color:var(--gray-55);padding:.4rem .6rem;white-space:nowrap}
  .subnav a:hover{color:var(--ink)}
}


/* ---- reveal safety ----------------------------------------------------
   Elements are visible by default. The animation only ever REMOVES the
   final state, never the content, and a failsafe restores everything if
   the observer has not run within a second. */

/* ============================================================
   TOP MASTHEAD — replaces the fixed left rail
   The rail produced five defects in three rounds: article text
   rendering underneath it, the price ticker and stats block
   trapped inside it, the rail overflowing past the viewport, a
   nav with no closed state, and a blank main. Each fix moved the
   problem rather than removing it, because a fixed left column
   requires every element on the page to be offset by exactly its
   width, and any full-bleed or negatively-margined element
   escapes that offset and slides underneath.

   A top masthead needs no offset at all. The identity of this
   site lives in its palette and its three typefaces, which is
   where it should have lived in the first place.
   ============================================================ */
body{padding-left:0}
.masthead{position:sticky;top:0;left:auto;bottom:auto;width:auto;height:auto;
  background:var(--paper);border-right:0;border-bottom:1px solid var(--rule);
  z-index:70;overflow:visible;display:block;padding:0}
.masthead .wrap{max-width:var(--wrap);padding:0 var(--gap)}
.mast-top{display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap;padding:.7rem 0;
  min-height:60px}
.wordmark,.masthead .brand{flex:0 0 auto;white-space:nowrap;font-size:1.04rem}
.navbar{flex:1 1 auto;min-width:0;overflow:hidden;border-top:0;padding-top:0;margin-top:0}
.nav-inner{flex-direction:row;align-items:center;justify-content:center;gap:.1rem;
  flex-wrap:nowrap;overflow:hidden;padding:0}
.nav-inner a{display:inline-block;width:auto;padding:.42rem .6rem;font-size:.84rem;
  text-align:center}
.nav-inner a.sec{display:none}
.mast-actions{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;margin:0}
.btn-cta{width:auto;min-height:40px;font-size:.84rem;padding:.5rem 1rem}

/* the secondary row sits under the primary one, horizontal, as a bar */
.subnav{position:static;background:var(--paper-2);border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule);padding:0}
.subnav .wrap{max-width:var(--wrap);padding:0 var(--gap)}
.subnav .sub-inner,.subnav .nav-inner,.subnav ul{display:flex;flex-direction:row;
  align-items:center;gap:.1rem;overflow-x:auto;padding:0;scrollbar-width:none}
.subnav .sub-inner::-webkit-scrollbar,.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:inline-block;width:auto;padding:.38rem .62rem;font-size:.79rem;
  color:var(--gray-55);white-space:nowrap;border-radius:0}
.subnav a:hover{color:var(--ink);background:transparent}
.subnav a[aria-current="page"]{color:var(--brand);background:transparent;
  box-shadow:inset 0 -2px 0 var(--brand)}

/* ticker and stamp: full-width rows in the flow, not columns in a rail */
.pricestrip{position:static;left:auto;right:auto;top:auto;z-index:auto;
  border-bottom:1px solid var(--rule);border-top:0}
.mast-stamp{display:block;background:var(--paper);border-bottom:1px solid var(--rule);
  padding:.4rem 0}
.mast-stamp .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;max-width:var(--wrap);
  padding:0 var(--gap)}
main{padding-top:var(--s-6)}
.toppicks{left:0}

@media (max-width:1079px){
  .nav-inner a:nth-child(n+7){display:none}
}
@media (max-width:860px){
  .navbar{flex:0 0 100%;order:3;display:none}
  .navbar.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:var(--shadow-lg);max-height:70vh;
    overflow-y:auto;z-index:71;padding:.3rem 0}
  .navbar.open .nav-inner{flex-direction:column;flex-wrap:wrap;overflow:visible}
  .navbar.open .nav-inner a{width:100%;padding:.58rem .2rem;font-size:.92rem;border-radius:0;
    border-bottom:1px solid var(--rule-soft);text-align:left}
  .navbar.open .nav-inner a:nth-child(n+7),.navbar.open .nav-inner a.sec{display:block}
  .mast-top{flex-wrap:wrap;position:relative}
  .nav-toggle{display:inline-flex}
}

/* ---- reveal: transform only, never opacity -------------------------------
   Script adds .reveal to ~38 elements per page. When that class carried
   opacity:0, any failure between hiding and revealing left a blank article,
   and that is exactly what shipped. A transform-only animation cannot hide
   anything, so the worst case is a missing slide rather than a missing page. */
html.motion .reveal{opacity:1;transform:translateY(10px)}
html.motion .reveal.in{transform:none}
html.motion .board-row{opacity:1;transform:translateX(-6px)}
html.motion .board-row.in{transform:none}