:root{--navy:#0b1220;--navy2:#122a5c;--ink:#1a2333;--muted:#8a94a6;--gray:#5b6577;--bg:#f5f7fa;--light:#f5f7fa;--card:#fff;--chip:#f5f7fa;--line:#e5e9f0;--border:#e5e9f0;--accent:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#eff4ff;--green:#16a34a;--red:#b91c1c;--amber:#b45309;--gold:#f59e0b;--gold-ink:#8a6a12;--purple:#7c3aed;--radius:12px;--max-w:1180px;--shadow:0 4px 24px rgba(11, 18, 32, 0.08);--shadow-lg:0 12px 40px rgba(11, 18, 32, 0.14)}
*{box-sizing:border-box}body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:#1c5fb0;text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,rgba(255,255,255,0.97),rgba(247,250,255,0.95));backdrop-filter:blur(12px);border-bottom:1px solid #e5e9f0}
.site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2563eb 0%,#7fb5d5 55%,#e8503a 100%)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;max-width:1180px;margin:0 auto;padding:8px 24px}
.logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none}
.logo::before{content:"";display:inline-block;width:56px;height:56px;background:url("/assets/coach-hexmark.svg") no-repeat center center;background-size:contain;flex-shrink:0}
.logo-txt{display:inline-flex;flex-direction:column;line-height:1}
.logo-name{font-family:'Poppins','Inter',system-ui,sans-serif;font-weight:800;font-size:1.5rem;color:#0b1220;letter-spacing:-0.03em}
.logo-name span{background:linear-gradient(115deg,#2563eb,#4f46e5 48%,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.logo-tag{font-family:'Poppins','Inter',system-ui,sans-serif;font-weight:700;font-size:0.58rem;text-transform:uppercase;letter-spacing:0.19em;color:#6b7280;margin-top:5px}
.nav-panel{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.nav-links{display:flex;align-items:center;gap:clamp(13px,1.5vw,26px);list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav-links li{white-space:nowrap}
.nav-links a{color:#12233f;font-weight:600;font-size:0.97rem;text-decoration:none;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#2563eb}
.nav-links a:has(.nav-badge){display:inline-flex;align-items:center;gap:7px}
.nav-badge{order:2;font-style:normal;font-size:0.66rem;font-weight:800;letter-spacing:.04em;background:#12233f;color:#fff;border-radius:999px;padding:2px 8px;white-space:nowrap}
.nav-sub{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1.1vw,18px);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-sub li{white-space:nowrap}
.nav-sub a{color:#5c6a80;font-weight:500;font-size:0.8rem;text-decoration:none}
.nav-sub a:hover,.nav-sub a.active{color:#2563eb}
.nav-offer{display:none}
.nav-offer-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;background:linear-gradient(135deg,#fbf3de,#f7ecd2);border:1px solid #e4d3a0;border-radius:12px;padding:13px 15px;margin-top:14px}
.nav-offer-card b{font-size:1rem;color:#12233f;display:flex;align-items:center;gap:9px}
.nav-offer-card em{font-style:normal;font-size:0.72rem;font-weight:800;letter-spacing:.05em;background:#12233f;color:#fff;border-radius:999px;padding:3px 9px}
.nav-offer-card span{order:2;display:block;width:100%;font-size:0.85rem;color:#5c6a80}
.nav-offer-card::after{order:1;content:"\00a0\2192";color:#8a6d16;font-weight:800;margin-left:auto}
.nav-offer-why{font-size:0.83rem;line-height:1.55;color:#5c6a80;margin:10px 2px 0}
.nav-offer-why b{color:#12233f}
.nav-offer-go{display:block;text-align:center;text-decoration:none;background:#12233f;color:#fff;font-weight:700;font-size:0.95rem;border-radius:10px;padding:13px 18px;margin-top:12px}
.nav-cta{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff !important;padding:9px 18px;border-radius:10px;font-weight:700;box-shadow:0 2px 10px rgba(37,99,235,0.30)}
.nav-cta::after{content:"\00a0\2192"}
.nav-toggle{display:none;background:none;border:0;font-size:1.7rem;line-height:1;color:#0b1220;cursor:pointer;padding:4px 10px;min-height:44px;min-width:44px;border-radius:10px}
.nav-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(max-width:1080px){
.nav-wrap{min-height:64px;padding:6px 18px}
.logo::before{width:46px;height:46px}
.logo-name{font-size:1.25rem}
.logo-tag{font-size:0.52rem}
.nav-toggle{display:block}
.nav-panel{display:none;position:absolute;top:100%;left:0;right:0;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid #e5e9f0;box-shadow:0 14px 34px rgba(11,18,32,0.13);padding:6px 18px 18px;max-height:calc(100vh - 64px);overflow-y:auto}
.nav-offer{display:block}
.nav-panel.open{display:flex}
.nav-links{flex-direction:column;align-items:stretch;gap:0;flex-wrap:wrap}
.nav-links li{width:100%}
.nav-links a{display:block;padding:14px 4px;font-size:1.05rem;border-bottom:1px solid #eef1f6}
.nav-links a.nav-cta{border-bottom:0;text-align:center;margin-top:14px;padding:14px 18px;font-size:1rem}
.nav-links .nav-badge{display:none}
.nav-sub{justify-content:flex-start;gap:4px 16px;padding-top:14px}
.nav-sub a{display:inline-block;padding:7px 0;font-size:0.92rem}
}

.crumb{font-size:13px;color:var(--muted);padding:16px 0 0}
h1{font-size:32px;line-height:1.15;margin:10px 0 4px}
.aka{color:var(--muted);font-size:16px;margin:0 0 12px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;background:#eaf0fb;color:#1c5fb0}
.badge.gold{background:#fbf1d9;color:#8a6414}
.lead{font-size:18px;color:#22344f}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin:18px 0}
h2{font-size:21px;margin:26px 0 8px}
table.facts{width:100%;border-collapse:collapse;font-size:15px}
table.facts td{padding:9px 0;border-top:1px solid var(--line);vertical-align:top}
table.facts td:first-child{color:var(--muted);width:42%}
table.facts td:last-child{font-weight:600;text-align:right}
.calc{background:var(--navy2);border-radius:12px;padding:18px;color:#fff}
.calc h3{margin:0 0 4px;color:var(--gold);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.calc .hint{font-size:12px;color:#9fb2d4;margin-bottom:12px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calc label{font-size:11px;color:#9fb2d4;display:block;margin-bottom:4px}
.calc input{width:100%;height:40px;border:1px solid #23345c;background:#0b1a34;color:#fff;border-radius:8px;padding:0 10px;font-size:15px}
.calc .out{margin-top:14px;background:#0b1a34;border-radius:8px;padding:14px;text-align:center}
.calc .out .big{font-size:26px;font-weight:900;color:var(--gold)}
.calc .out .sub{font-size:12px;color:#9fb2d4;margin-top:6px}
/* The diluent line under the reconstitution maths. Container only — the
   link inside is plain prose, not a CTA, because the gold button on this
   page is the compound. Mirrors .calc-supply in build_vault_data.py. */
.calc .supply{margin-top:14px;border-top:1px solid #23345c;padding-top:12px}
.calc .supply p{font-size:12px;color:#9fb2d4;line-height:1.55;margin:0}
.calc .supply .supply-buy{margin-top:8px;font-weight:600;color:#cdd9ef}
.calc .supply a{color:var(--gold);font-weight:700}
/* Mirrors .btn/.btn-gold from ui_buttons.py so a card in the app and the
   deep page it opens look like the same product. The 524 /vault/<slug> pages
   are static and do not share the app's <style>, so the metrics are repeated
   here rather than imported — audit_buttons.py checks the two stay in step. */
.cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:12px 22px;background:var(--gold);color:#1a1205;font-family:'Poppins',sans-serif;
  font-size:14.5px;font-weight:800;line-height:1.3;letter-spacing:-.005em;
  border:1.5px solid transparent;border-radius:12px;text-align:center;text-decoration:none;
  white-space:normal;text-wrap:balance;overflow-wrap:anywhere;
  box-shadow:0 2px 10px rgba(245,158,11,.28);
  transition:transform .14s ease,box-shadow .18s ease,background .18s ease,filter .18s ease}
.cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 6px 20px rgba(245,158,11,.36)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.38)}
.cta.blue{background:var(--accent,#2563eb);color:#fff;box-shadow:0 2px 10px rgba(37,99,235,.26)}
.cta.blue:hover{background:#1d4ed8;box-shadow:0 6px 20px rgba(37,99,235,.34)}
.codebox{text-align:center;font-size:13px;color:var(--muted);margin-top:8px}
.members{background:linear-gradient(0deg,#0d1b34,#0d1b34);color:#fff;border-radius:14px;padding:22px;margin:22px 0;text-align:center}
.members h2{margin:0 0 6px;color:#fff}.members p{color:#cdd9ef;margin:0 0 14px}
.related{display:flex;flex-wrap:wrap;gap:8px}
.goalx-lede{font-size:14.5px;color:#5b6577;line-height:1.65;margin:0 0 12px}
.goalx-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px}
.goalx{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;text-decoration:none;transition:border-color .12s,box-shadow .12s}
.goalx:hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(37,99,235,.09)}
.goalx b{display:block;font-size:13.8px;color:var(--navy);line-height:1.3}
.goalx span{display:block;font-size:12.2px;color:#8a94a6;margin-top:3px;line-height:1.45}

/* Jump nav. Not sticky on purpose — see add_jump_nav(). scroll-margin-top on
   the headings is the part everyone forgets: the site header is fixed, so
   without it every anchor lands with its own title hidden underneath. */
.jump{margin:0 0 26px;scroll-margin-top:86px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px}
.jump b{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.jump-row{display:flex;flex-wrap:wrap;gap:6px}
.jump-row a{display:inline-block;font-size:13px;line-height:1.25;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .12s,background .12s}
.jump-row a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
main h2{scroll-margin-top:86px}
.totop{display:inline-block;margin-top:10px;font-size:13px;color:var(--muted);text-decoration:none}
.totop:hover{color:var(--accent)}
@media(max-width:560px){
.jump{padding:12px}
.jump-row a{font-size:12.4px;padding:5px 9px}
/* Measured on a phone: a 16-chip map is 578px tall, which is 68% of an 844px
   screen — the map stops being a map and becomes the page. Capped and scrolled
   so every section is still one tap away without the reader having to scroll
   past the index to reach the article. No JS: a <details> cannot be open on
   desktop and closed on phones without it, and this nav has to work when the
   script never lands. */
.jump-row{max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-right:2px;scrollbar-width:thin}
}


.handoff{margin:44px 0 8px;padding:22px;background:linear-gradient(180deg,#f7f9fd,#f2f5fa);
border:1px solid #e2e8f2;border-radius:16px}
.ho-head{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:#5c6a80;margin:0 0 14px}
.ho-grid{display:grid;gap:10px;margin-bottom:12px}
@media(min-width:620px){.ho-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.ho-grid>*{min-width:0}
.ho-step{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:#fff;
border:1px solid #e2e8f2;border-radius:12px;padding:14px 16px;min-height:44px;
transition:border-color .15s,transform .15s}
.ho-step:hover{border-color:#2563eb;transform:translateY(-1px)}
.ho-k{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2563eb}
.ho-step .ho-t{font-size:1rem;font-weight:700;color:#12233f;line-height:1.3}
.ho-d{font-size:.86rem;color:#5c6a80;line-height:1.5;overflow-wrap:anywhere}
.ho-offer{background:linear-gradient(135deg,#fbf3de,#f7ecd2);border:1px solid #e4d3a0;
border-radius:12px;padding:16px 18px}
.ho-offer .ho-k{color:#8a6d16;display:flex;align-items:center;gap:9px}
.ho-offer .ho-k b{font-size:.66rem;font-weight:800;letter-spacing:.05em;background:#12233f;
color:#fff;border-radius:999px;padding:3px 9px}
.ho-offer .ho-d{margin:7px 0 0}
.ho-gos{display:grid;gap:8px;margin-top:12px}
.ho-go{display:flex;align-items:center;gap:9px;flex-wrap:wrap;text-decoration:none;
background:#12233f;color:#fff;font-weight:700;font-size:.95rem;line-height:1.3;
border-radius:10px;padding:13px 16px;min-height:44px}
.ho-go em{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:999px;padding:2px 8px}
.ho-go::after{content:"\2192";margin-left:auto;font-weight:800;color:#e4d3a0}
.ho-go:hover{background:#1b3559}

.bpx-lede{font-size:14.5px;color:#5b6577;line-height:1.65;margin:0 0 12px}
.bpx-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:8px}
.bpx{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:11px;padding:11px 13px;text-decoration:none;transition:border-color .12s,box-shadow .12s}
.bpx:hover{border-color:var(--accent);border-left-color:var(--gold);box-shadow:0 3px 10px rgba(37,99,235,.09)}
.bpx b{display:block;font-size:13.8px;color:var(--navy);line-height:1.3}
.bpx span{display:block;font-size:12.2px;color:#8a94a6;margin-top:3px;line-height:1.45}
.bpx em{font-style:normal;color:var(--ink)}
.related a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:14px}
/* Cosmetic breakdown pages. `.related a span` lets a product chip carry its
   vendor without a second element — a reader scanning 57 products needs to see
   WHO sells it, since the same active is stocked by four partners. */
.related a span{color:#8a94a6;font-weight:400}
ul.tight{margin:8px 0 14px;padding-left:20px}
ul.tight li{margin:0 0 7px;line-height:1.6}
.lay{display:inline-block;background:#f4f8ff;border:1px solid #d7e5ff;border-radius:999px;
     padding:5px 13px;font-size:13px;color:var(--navy);margin:0 0 10px}
.fine{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:10px}
.take{background:#f4f8ff;border-left:4px solid var(--accent,#2563eb);border-radius:0 12px 12px 0;
  padding:16px 18px;margin:20px 0}
.take b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,#2563eb);margin-bottom:7px}
.take p{margin:0;font-size:15.5px;line-height:1.65;color:#26334d}

.evlegend{background:#f7f9fd;border:1px solid #dfe6f2;border-radius:14px;
  padding:18px 20px;margin:22px 0}
.evlegend>b{display:block;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#5a6b86;margin-bottom:10px}
.evlegend p{margin:0 0 11px;font-size:14.5px;line-height:1.65;color:#33445f}
.evlegend ul{margin:0 0 11px;padding-left:19px}
.evlegend li{font-size:14px;line-height:1.6;color:#33445f;margin-bottom:7px}
.evlegend li b{color:#1a2740}
.evlegend .evfoot{margin:0;font-size:13.5px;color:#5a6b86;font-style:italic}

.evkey{background:var(--accent-soft,#f5f8fd);border-left:3px solid #c3d4ee;
  border-radius:0 9px 9px 0;padding:11px 15px;margin:14px 0 0;
  font-size:13.5px;line-height:1.6;color:#4a5a75}
.evkey b{color:#1a2740}
.evkey a{color:#2563eb;font-weight:600;white-space:nowrap}

.nolink{background:#fff5f5;border:1px solid #f3c7c7;border-radius:12px;padding:16px 18px;margin:14px 0}
/* The vendor-form disclosure. Deliberately ABOVE the buy button, not below:
   below it, the reader has already clicked. */
.formnote{background:#fffdf5;border:1px solid #f0dfae;border-left:4px solid #f59e0b;
  border-radius:10px;padding:13px 16px;margin:14px 0 12px;font-size:14.5px;color:#5b6577;line-height:1.6}
.nolink b{display:block;color:#7f2d2d;font-size:15px;margin-bottom:6px}
/* The prescription second offer (buyKind "rx_direct"). Cool navy, NOT the red
   of .nolink or the amber of .formnote — this is not a warning, it is the next
   thing to buy. Cam removed a gate on 9 Sep; styling this as an alarm would
   rebuild that gate in CSS. */
.rxdisc{background:#f4f7fc;border:1px solid #dbe5f2;border-radius:12px;padding:16px 18px;margin:14px 0}
.rxdisc b{display:block;color:var(--navy,#12233f);font-size:15px;margin-bottom:8px}
.rxdisc p{margin:0 0 9px;font-size:14.5px;line-height:1.65;color:#5b6577}
.rxtests{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.rxtest{font-size:13px;font-weight:700;text-decoration:none;color:var(--navy,#12233f);
  background:#fff;border:1px solid #cddbec;border-radius:999px;padding:6px 13px;display:inline-block}
.rxtest:hover{background:var(--navy,#12233f);color:#fff;border-color:var(--navy,#12233f)}
.rxpanel{display:block;text-align:center;font-size:14px;font-weight:700;text-decoration:none;
  color:var(--navy,#12233f);background:#fff;border:1px solid #d4af37;border-radius:10px;padding:11px 14px}
.rxpanel:hover{background:#d4af37}
.nolink p{margin:0;color:#6b3535;font-size:14.5px;line-height:1.6}
/* Safety sits between the amber `note` and the red `note.danger` deliberately:
   it is not an alarm — most entries are "well tolerated, here is the one
   thing" — but it must read as heavier than body prose so it is not skimmed. */
.safety{background:#fffaf3;border:1px solid #f0dcc0;border-left:4px solid #d97706;
  border-radius:0 12px 12px 0;padding:16px 20px;margin:18px 0}
.safety ul{margin:0;padding-left:20px}
.safety li{font-size:15px;line-height:1.68;color:#4a3a22;margin-bottom:10px}
.safety li:last-child{margin-bottom:0}
.safety li strong{color:#8a4b08}
.safety .safety-note{margin:14px 0 0;padding-top:12px;border-top:1px solid #f0dcc0;
  font-size:13.2px;line-height:1.55;color:#8a7a5e}
.standing{margin:15px 0 0;padding:13px 15px 3px;background:#fffdf8;
  border:1px dashed #e0cba4;border-radius:10px}
.standing>b{display:block;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#8a6d2f}
.standing .standing-note{margin:4px 0 9px;font-size:12.4px;line-height:1.5;
  color:#9a8a6e;font-style:italic}
.standing ul{margin:0;padding-left:19px}
.standing li{font-size:14.2px;line-height:1.62;color:#5d4e33;margin-bottom:9px}
.whenbox{background:#f2f7ff;border:1px solid #cddcf7;border-left:4px solid #2563eb;border-radius:0 10px 10px 0;padding:15px 18px;margin:18px 0}
.whenbox>b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:6px}
.whenhead{margin:0 0 8px;font-size:17px;font-weight:800;color:#0b1220}
.whenwhy{font-size:14.5px;line-height:1.65;color:#1a2333}
.whenwhy p{margin:0 0 8px}
.whenfine{margin:10px 0 0;font-size:12.5px;color:#5b6577;font-style:italic}
.note{background:#fff7e6;border:1px solid #f0d9a8;border-radius:10px;padding:14px;font-size:14px;color:#6b4e12}
.note.danger{background:#fdeeee;border-color:#f0c2c2;border-left:4px solid #c0392b;color:#6b1d1d}
.note.danger b{color:#a32d2d}
details.faq{background:#fff;border:1px solid var(--line);border-radius:10px;padding:2px 16px;margin:10px 0}
details.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:'+';color:var(--gold);font-weight:800;margin-right:10px}
details.faq[open] summary::before{content:'–'}
details.faq p{margin:0 0 14px;color:#33465f}
main p{font-size:16.5px;color:#22344f}
main ul li{margin:6px 0}
.refs-list{font-size:14px;color:#41506a;padding-left:20px}
.refs-list li{margin:8px 0}
.author{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin:24px 0}
.author .au-ava{flex:none;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:800;display:flex;align-items:center;justify-content:center}
.author b{font-size:15px}.author p{font-size:14px;color:var(--muted);margin:6px 0 0}
.ruo{background:#fff7e6;border:1px solid #f0d9a8;border-radius:10px;padding:12px 16px;margin:16px 0 4px;font-size:13.5px;color:#6b4e12}
.gate{display:flex;gap:16px;align-items:flex-start;background:var(--navy2);color:#fff;border-radius:14px;padding:22px;margin:18px 0}
.gate .lock{font-size:28px;line-height:1}
.gate b{color:#fff;font-size:16px}.gate p{color:#9fb2d4;font-size:14px;margin:6px 0 14px}
.gate .cta{display:inline-flex;width:auto}
/* .refs is the CHIP ROW. The source list below a page had the
   same class name and was declared 10 lines earlier, so this rule
   won and every "Sources read for this page" list rendered as a
   flex row of run-together <li>s instead of a list. The list is
   .refs-list now; both are declared once. */
.refs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-4px 0 18px}
.refl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.refchip{display:inline-flex;align-items:center;gap:5px;font-size:13px;text-decoration:none;color:var(--accent);background:var(--accent-soft);border:1px solid #d9e5ff;padding:3px 10px;border-radius:999px}
.refchip:before{content:"📄";font-size:11px}
.refchip:hover{background:#e2ecff}
/* Reading list, styled like the source list and deliberately NOT
   class="refs" -- see the note where it is built. */
.further{padding-left:20px;font-size:14px;color:#33465f}
.further li{margin:4px 0}
/* A company announcement is not a paper. Different color, different
   icon, and the word "announcement" is printed in the chip itself, so
   a reader skimming the page can see which claims rest on a press
   release without opening a single link. */
.refchip-announce{color:#8a5a00;background:#fff6e3;border-color:#f0dcb0}
.refchip-announce:before{content:"📢"}
.refchip-announce:hover{background:#ffefd0}
.gatelist{list-style:none;padding:0;margin:10px 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
/* Grouped lock. One box, two labeled sets — see gate_block(). The label is
   what stops the merged list reading as one undifferentiated wall of eleven
   bullets. */
/* Per-form buy rows. One button per form, because a compound sold as
   injectable AND oral AND nasal was offering one link — see the buy block. */
.vbuy-lede{font-size:14px;color:var(--gray);line-height:1.6;margin:0 0 12px;max-width:62ch}
.vbuy{display:flex;flex-direction:column;gap:9px;margin:0 0 6px}
.vbuy-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.vbuy-row .cta{margin:0}
.vbuy-code{font-size:12.5px;color:var(--gray);background:var(--accent-soft);
           border:1px solid var(--line);border-radius:7px;padding:5px 10px;white-space:nowrap}
.vbuy-code b{color:var(--navy);letter-spacing:.03em}
@media(max-width:520px){.vbuy-row .cta{width:100%;text-align:center}}
.evlede{font-size:14px;color:var(--gray);line-height:1.6;margin:0 0 14px;max-width:64ch}
.evmore{font-size:13.5px;line-height:1.6;margin:12px 0 0}
.evmore a{color:#2563eb;font-weight:600}
.evtier{font-size:15.5px;margin:18px 0 6px;color:var(--navy);letter-spacing:-.005em}
.gategrp{margin:12px 0 0}
.gategrp .gatelist{margin:6px 0 0}
.gatelbl{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
         font-weight:800;color:var(--gold);opacity:.95}
.gatelist li{color:#cfe0ff;font-size:13.5px;line-height:1.5;padding-left:16px;position:relative}
.gatelist li:before{content:"✓";position:absolute;left:0;color:var(--gold)}
@media(max-width:560px){.gatelist{grid-template-columns:1fr}}
footer.site{background:var(--navy);color:#9fb2d4;font-size:13px;margin-top:34px}
footer.site .wrap{padding:26px 20px}
footer.site a{color:#cdd9ef}
.disc{font-size:12px;color:#7f8aa0;margin-top:10px}
@media(max-width:640px){h1{font-size:26px}nav.top a:not(.cta){display:none}}

.bw-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
 border-radius:10px;overflow:hidden;margin:12px 0}
.bw-table th{background:#f5f7fa;text-align:left;font-size:13px;letter-spacing:.04em;
 text-transform:uppercase;color:#5b6577;padding:10px 14px}
.bw-table td{padding:11px 14px;border-top:1px solid var(--line);font-size:15px;vertical-align:top}
.bw-table td:first-child{white-space:nowrap;width:1%}
.bw-cta{background:#eff4ff;border:1px solid #c7d8ff;border-radius:10px;padding:12px 15px;
 font-size:15px;margin:12px 0}
.bw-foot{font-size:14px;color:#5b6577;margin:8px 0 4px}
.lead-sm{color:#33465f;font-size:15px;margin:4px 0 10px}
@media(max-width:640px){.bw-table td:first-child{white-space:normal}}