/* Fine Print Nutrition: Lab Bench. Rules: brand/CONVENTIONS.md */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); }
:root {
  --stone: #E8E6E2; --taupe: #D3CCC2; --rule: #C9C4BC;
  --ink: #151514; --ink2: #2E2D2B; --muted: #6B6863;
  --signal: #D7264F; --signal-text: #B81D42;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--stone); color: var(--ink2); font: 400 17px/1.55 "Schibsted Grotesk", system-ui, sans-serif; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s2); }
.read { max-width: 66ch; }

/* header */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: 18px; padding-bottom: 18px; }
.logo { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.logo sup { color: var(--signal); font-size: 13px; margin-left: 1px; }
.nav { display: flex; gap: var(--s3); font-size: 15px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }

/* type */
h1 { font-weight: 800; font-size: 40px; line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); }
h2 { font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--s2); }
h3 { font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
p + p { margin-top: var(--s2); }
.small { font-size: 15px; }
.muted { color: var(--muted); }
sup.fn { font-size: 12px; line-height: 0; margin-left: 1px; }
sup.fn a { color: var(--signal-text); text-decoration: none; font-weight: 600; }
sup.fn a:hover { text-decoration: underline; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s4); align-items: center; padding: var(--s5) 0 var(--s4); }
.answer { margin-top: var(--s3); font-size: 21px; line-height: 1.45; color: var(--ink2); max-width: 34ch; }
.verdict { margin-top: var(--s3); border-top: 2px solid var(--ink); padding-top: var(--s2); max-width: 46ch; }
.verdict p { font-size: 17px; }
.verdict b { color: var(--ink); }
.byline { margin-top: var(--s3); font-size: 15px; color: var(--muted); }

.photo { position: relative; background: var(--taupe); border-radius: 4px; aspect-ratio: 4 / 4.2; overflow: hidden; }
.photo .slot { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s2); font-size: 13px; color: var(--muted); }
.photo .jar { position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -46%); }
.call { position: absolute; font-size: 15px; line-height: 1.25; color: var(--ink2); max-width: 15ch; }
.call b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.call.bad b { color: var(--signal-text); }
.call i { position: absolute; top: 14px; height: 1px; background: var(--ink); width: 48px; opacity: .6; }
.call i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.call.l i { left: calc(100% + 8px); } .call.l i::after { right: -3px; }
.call.r { text-align: right; } .call.r i { right: calc(100% + 8px); } .call.r i::after { left: -3px; }

/* sections */
section.block { padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.lede { font-size: 19px; color: var(--ink2); max-width: 60ch; margin-bottom: var(--s3); }

/* result bar */
.split { display: flex; height: 44px; border-radius: 0; overflow: hidden; margin: var(--s3) 0 var(--s1); }
.split div { display: flex; align-items: center; padding: 0 12px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.split .none { background: var(--signal); color: #fff; }
.split .short { background: var(--rule); color: var(--ink); }
.split .ok { background: var(--ink); color: var(--stone); }
.key { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 15px; color: var(--muted); }
.key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.key .k1::before { background: var(--signal); } .key .k2::before { background: var(--rule); } .key .k3::before { background: var(--ink); }

/* ledger tables */
table.ledger { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); margin-top: var(--s2); }
.ledger th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.ledger td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 16px; }
.ledger td.p { font-weight: 600; color: var(--ink); }
.ledger td.p span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ledger .num { white-space: nowrap; }
.ledger .bad { color: var(--signal-text); font-weight: 700; }
.ledger .good { color: var(--ink); font-weight: 700; }
.ledger tr.group td { padding-top: var(--s3); font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--rule); }
.btn { display: inline-block; background: var(--ink); color: var(--stone); text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 3px; white-space: nowrap; }
.btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* picks */
.pick { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.pick:first-of-type { border-top: 2px solid var(--ink); }
.pick .role { font-size: 15px; color: var(--muted); }
.pick h3 { margin-top: 4px; }
.pick p { margin-top: var(--s1); max-width: 62ch; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s2); font-size: 15px; }
.facts b { color: var(--ink); }

/* lists */
ol.checks { list-style: none; counter-reset: c; border-top: 2px solid var(--ink); }
ol.checks li { counter-increment: c; display: grid; grid-template-columns: 32px 1fr; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
ol.checks li::before { content: counter(c); font-weight: 800; color: var(--ink); font-size: 21px; line-height: 1.2; }
ol.checks b { color: var(--ink); }
.names { columns: 3 220px; column-gap: var(--s4); border-top: 2px solid var(--ink); padding-top: var(--s2); font-size: 15px; }
.names li { list-style: none; break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.names li span { color: var(--muted); }

.faq dt { font-weight: 700; color: var(--ink); font-size: 19px; margin-top: var(--s3); }
.faq dd { margin-top: var(--s1); max-width: 66ch; }

.method { background: var(--taupe); border-radius: 4px; padding: var(--s3); max-width: 760px; }
.method h2 { font-size: 21px; }
.method ul { margin-top: var(--s1); padding-left: 20px; }
.method li + li { margin-top: 6px; }

ol.sources { padding-left: 24px; font-size: 15px; color: var(--ink2); }
ol.sources li { padding: 6px 0; }
ol.sources li:target { background: var(--taupe); }

footer { border-top: 1px solid var(--rule); margin-top: var(--s4); padding: var(--s4) 0 var(--s5); font-size: 13px; color: var(--muted); }
footer p + p { margin-top: var(--s1); }

@media (min-width: 900px) { h1 { font-size: 56px; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--s4); gap: var(--s3); }
  .nav { display: none; }
}
@media (max-width: 700px) {
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .ledger tr.group { padding: 0; }
  .ledger td { border: 0; padding: 3px 0; }
  .ledger td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 13px; }
  .ledger td.buy { padding-top: 10px; }
  .pick { grid-template-columns: 1fr; }
  .call b { font-size: 20px; }
  .call { font-size: 13px; }
  .call i { display: none; }
  .split div { font-size: 13px; padding: 0 8px; }
  .ledger.tests td[data-l] { display: inline-block; width: auto; margin-right: 14px; font-size: 15px; }
  .photo .jar { width: 30%; }
  .call.r { top: 30% !important; max-width: 12ch; }
  .call.l { max-width: 14ch; }
}

.disclose { margin-top: 6px; font-size: 13px; color: var(--muted); }
.crumbs { font-size: 13px; color: var(--muted); padding-top: var(--s3); }
.crumbs a { color: var(--muted); }
.data-dl { margin-top: 12px; font-size: 15px; }

/* pick card (one definitive pick, flat) */
.pickcard { margin-top: var(--s3); border-top: 2px solid var(--ink); padding-top: var(--s2); max-width: 520px; }
.pickcard .role { font-size: 15px; color: var(--muted); }
.pc-main { display: grid; grid-template-columns: 96px 1fr; gap: var(--s2); align-items: center; margin: 10px 0 var(--s2); }
.pc-img { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 4px; }
.pc-name { font-size: 24px; margin: 0 0 6px; }
.pc-facts { list-style: none; font-size: 15px; }
.pc-facts li { padding: 2px 0; }
.pc-facts b { color: var(--ink); }
.pc-alt { margin-top: 12px; font-size: 15px; color: var(--ink2); }

/* stage photo */
.stage { background: var(--taupe); }
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage .call { background: rgba(232,230,226,.92); padding: 8px 10px; border-radius: 3px; }
.stage .call i { display: none; }

/* reference-photo tag (mockup only) */
.mocktag { font-size: 12px; line-height: 1.35; color: var(--ink2); background: #fff7d6; border: 1px dashed #b89a2a; padding: 6px 8px; border-radius: 3px; }
.stage .mocktag { position: absolute; left: 10px; right: 10px; bottom: 10px; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover; }
.shot .mocktag { margin-top: 6px; }
.shot.sm { max-width: 320px; }
.shots { display: grid; gap: var(--s2); }

/* why section */
.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s4); align-items: start; }
.why h3 { margin: 0 0 var(--s1); }
.why h3 + ul { margin-bottom: var(--s3); }
ul.ticks { list-style: none; border-top: 1px solid var(--rule); }
ul.ticks li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--rule); position: relative; }
ul.ticks li::before { content: "+"; position: absolute; left: 4px; top: 9px; font-weight: 800; color: var(--ink); }
ul.ticks.minus li::before { content: "–"; color: var(--signal-text); }
ul.ticks b { color: var(--ink); }

/* other picks rows */
.opt { display: grid; grid-template-columns: 320px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); align-items: start; }
.opt:first-of-type { border-top: 2px solid var(--ink); }
.opt h3 { margin-bottom: var(--s1); }
.opt-link { margin-top: var(--s1); font-weight: 600; }
.thumb { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 4px; flex: none; }
.thumb.lg { width: 120px; height: 120px; }

/* product cell with thumbnail */
.prod { display: flex; gap: 12px; align-items: flex-start; }
.prod a { font-weight: 600; color: var(--ink); }
.prod span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ourpick { display: inline-block !important; margin: 0 0 0 6px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--stone) !important; background: var(--ink); padding: 1px 6px; border-radius: 3px; vertical-align: 2px; }
tr.pickrow td { background: rgba(255,255,255,.35); }
ol.checks .shot { margin-top: 12px; }

@media (max-width: 860px) {
  .why, .opt { grid-template-columns: 1fr; }
  .opt .shot.sm, ol.checks .shot.sm { max-width: none; }
}
@media (max-width: 700px) {
  .stage .call { font-size: 12px; padding: 6px 8px; }
  .stage .call b { font-size: 17px; }
}

/* v3 */
.pc-tile { display: block; width: 96px; height: 96px; background: var(--taupe); border-radius: 4px; overflow: hidden; }
.pc-tile .pc-img { mix-blend-mode: multiply; background: transparent; width: 96px; height: 96px; object-fit: contain; padding: 6px; }
.stage .call { background: none; padding: 0; max-width: 16ch; }
.shot img { aspect-ratio: auto; }
.cap { margin-top: 8px; font-size: 15px; color: var(--muted); }
.why { grid-template-columns: 1fr 1fr; }
.prod .pname { display: inline; font-weight: 600; font-size: inherit; color: var(--ink); margin: 0; }
.ledger td.p span.pname { display: inline; font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

/* v4 */
.pc-why { font-size: 16px; color: var(--ink2); margin: 0 0 6px; }
.pc-price { font-size: 15px; color: var(--muted); }
.pc-price b { color: var(--ink); font-size: 17px; }
.pc-main { align-items: start; }
.why > div > p:first-child { margin-bottom: var(--s2); font-size: 19px; color: var(--ink2); }
.why h3 { margin-top: var(--s3); }
.alt { margin-top: var(--s4); border-top: 2px solid var(--ink); padding-top: var(--s2); }
.alt h3 { margin-top: 0; }
.alt p { margin-top: var(--s1); }
.ledger.results td.num { font-weight: 700; }
.ledger.results tr.compact td { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 700px) { .ledger.results tr.compact { padding: 6px 0; } .ledger.results tr.compact td[data-l]::before { content: none; } .ledger.results tr.compact td { display: inline-block; width: auto; margin-right: 10px; } }

/* v5: integrated recommendation, direct-labeled bar */
.rec { display: grid; grid-template-columns: 96px 1fr; gap: var(--s2); align-items: start; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); max-width: 560px; }
.rec p { font-size: 17px; color: var(--ink2); margin-bottom: 12px; }
.rec p b { color: var(--ink); }
.split { height: 56px; }
.split div { font-size: 16px; font-weight: 500; gap: 6px; }
.split div b { font-size: 22px; font-weight: 800; }
.barnote { font-size: 13px; color: var(--muted); margin-top: 6px; }
@media (max-width: 700px) { .rec { grid-template-columns: 72px 1fr; } .rec .pc-tile, .rec .pc-img { width: 72px; height: 72px; } .split div b { font-size: 18px; } }

/* v6 */
.bigstat { margin-top: var(--s3); font-size: 24px; line-height: 1.3; color: var(--ink); font-weight: 600; max-width: 22ch; }
.bigstat b { display: block; font-size: 88px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--signal-text); }
.hero .answer { margin-top: var(--s2); font-size: 19px; max-width: 40ch; }
.hero .answer a { font-weight: 700; }
.picksec { border-top: 2px solid var(--ink); }
.pick-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--s4); align-items: start; }
.pick-tile { display: block; background: var(--taupe); border-radius: 4px; aspect-ratio: 1; overflow: hidden; }
.pick-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 28px; }
.pick-nums { margin: var(--s2) 0; border-top: 1px solid var(--rule); }
.pick-nums div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.pick-nums dt { color: var(--muted); }
.pick-nums dd { font-weight: 700; color: var(--ink); }
.pick-buy .btn { width: 100%; text-align: center; padding: 12px 14px; font-size: 16px; }
.pick-lede { font-size: 21px; line-height: 1.4; color: var(--ink); font-weight: 600; margin-bottom: var(--s2); max-width: 36ch; }
.pick-why ul.ticks + ul.ticks { margin-top: var(--s3); }
.ledger td.rank { width: 32px; font-weight: 800; font-size: 19px; color: var(--ink); }
.ledger.rank td.p span:not(.ourpick):not(.pname), .ledger.fails td.p span:not(.pname) { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.also { margin-top: 12px; font-size: 15px; color: var(--ink2); max-width: 70ch; }
.ledger.fails td.num { width: 180px; }
.notes .notelist { list-style: none; border-top: 1px solid var(--rule); margin-bottom: var(--s3); font-size: 15px; max-width: 80ch; }
.notes .notelist li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 860px) { .pick-grid { grid-template-columns: 1fr; } .pick-tile { max-width: 280px; } }
@media (max-width: 700px) { .bigstat b { font-size: 64px; } .ledger td.rank { display: inline-block; width: auto; margin-right: 8px; } .ledger.rank tr td.p { display: inline-block; width: auto; } }
.ledger.fails { max-width: 760px; }
.ledger.fails td.num { width: 140px; text-align: right; }
.ledger.fails th:last-child { text-align: right; }
.bigstat { max-width: 26ch; }
@media (max-width: 700px) {
  .ledger.fails tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .ledger.fails td.p { flex: 1; }
  .ledger.fails td.num { width: auto; flex: none; }
  .ledger.fails td[data-l]::before { content: none; }
  tr.pickrow { background: rgba(255,255,255,.35); }
  tr.pickrow td { background: none; }
}
.pick-why ul.ticks.minus { border-top: 2px solid var(--rule); }

/* v7 */
#our-pick .rec { border-top: 0; padding-top: 0; margin-top: 0; max-width: 680px; }
.headstat { font-size: 24px; line-height: 1.3; color: var(--ink); font-weight: 700; max-width: 30ch; margin-bottom: var(--s1); }
.headstat b { font-size: 40px; font-weight: 800; color: var(--signal-text); letter-spacing: -0.02em; margin-right: 4px; }

/* v8: waffle graphic, two tables, deep dive */
.waffle-wrap { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; margin: var(--s3) 0 var(--s1); }
.waffle { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; }
.waffle i, .waffle-key i { display: block; width: 36px; height: 36px; border-radius: 3px; }
.waffle i.f, .waffle-key i.f { background: var(--signal); }
.waffle i.p, .waffle-key i.p { background: var(--ink); }
.waffle-key { list-style: none; display: grid; gap: var(--s2); }
.waffle-key li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; font-size: 16px; color: var(--ink2); }
.waffle-key li i { grid-row: span 2; width: 24px; height: 24px; }
.waffle-key b { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.waffle-note { font-size: 13px; color: var(--muted); margin-bottom: var(--s2); }
.tbl-h { margin-top: var(--s4); font-size: 23px; }
.tbl-h.fail { color: var(--signal-text); }
.tbl-sub { font-size: 16px; color: var(--ink2); margin-top: 6px; max-width: 70ch; }
.ledger td.strong { font-weight: 700; }
.dd-top { display: grid; grid-template-columns: 320px 1fr; gap: var(--s4); align-items: center; }
.dd-tile { display: block; background: var(--taupe); border-radius: 4px; aspect-ratio: 1; overflow: hidden; }
.dd-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 24px; }
.dd-lede { font-size: 21px; line-height: 1.4; color: var(--ink); font-weight: 600; max-width: 38ch; }
.dd-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s3); border-top: 2px solid var(--ink); padding-top: var(--s2); }
.dd-nums dt { font-size: 13px; color: var(--muted); }
.dd-nums dd { font-size: 22px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.dd-cols h3 { margin-bottom: var(--s1); }
.dd-alt { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--rule); max-width: 80ch; }
@media (max-width: 860px) { .dd-top, .dd-cols { grid-template-columns: 1fr; } .dd-tile { max-width: 280px; } .dd-nums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .waffle { grid-template-columns: repeat(5, 28px); } .waffle i { width: 28px; height: 28px; } .ledger.fails2 td[data-l="Result"] { font-size: 14px; } }
.ledger td.strong { white-space: nowrap; }

/* v9: one stacked bar, labels inside */
.labfound .headstat { margin-bottom: var(--s3); }
.bar2 { display: flex; height: 72px; border-radius: 4px; overflow: hidden; max-width: 900px; }
.bar2 .seg { display: flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 18px; font-weight: 600; white-space: nowrap; }
.bar2 .seg b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.bar2 .seg span { font-weight: 400; font-size: 15px; opacity: .85; }
.bar2 .fail { background: var(--signal); color: #fff; }
.bar2 .pass { background: var(--ink); color: var(--stone); }
.bar2-src { font-size: 13px; color: var(--muted); margin: 8px 0 var(--s3); }
@media (max-width: 700px) { .bar2 { height: 64px; } .bar2 .seg { padding: 0 10px; font-size: 14px; gap: 5px; } .bar2 .seg b { font-size: 22px; } .bar2 .seg span { display: none; } }

/* v10: photos */
.dd-photo { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 1; }
.dd-photo img { width: 100%; height: 100%; object-fit: cover; }
.withimg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.withimg .side { margin: 0; }
.withimg .side img { width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 860px) { .withimg { grid-template-columns: 1fr; } }
/* ===== v11 (Erin punchlist 10-18) ===== */
/* footnotes: muted, small, regular (item 20) */
sup.fn { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }
sup.fn a { color: var(--muted) !important; font-weight: 400 !important; text-decoration: none; }
sup.fn a:hover { color: var(--ink) !important; text-decoration: underline; }
/* sources: underline on hover only (item 23) */
ol.sources a { text-decoration: none; color: var(--ink); }
ol.sources a:hover { text-decoration: underline; }
/* hero (items 7, 12) */
.hero { grid-template-columns: 1fr 1fr; }
.hero .stage { order: 2; }
.hero-text { order: 1; }
@media (max-width: 860px) {
  .hero .stage { order: 0; aspect-ratio: 4 / 3; }
  .hero .stage-img { object-position: 60% 55%; }
  .hero { padding-top: var(--s3); }
}
/* one layout system: content column + sticky rail (items 8, 11) */
.layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 64px; justify-content: space-between; }
.read, .lede, .tbl-sub { max-width: 100%; }
.bar2 { max-width: 100%; }
.rail { padding-top: var(--s4); }
.rail-in { position: sticky; top: 24px; }
.rail-pick { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; padding: var(--s2); background: var(--taupe); border-radius: 4px; }
.rail-pick .btn { grid-column: 1 / -1; }
.rail-tile img { width: 88px; height: 88px; object-fit: contain; mix-blend-mode: multiply; }
.rail-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.rail-price { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.rail-price b { font-size: 18px; color: var(--ink); }
.toc { margin-top: var(--s3); border-top: 2px solid var(--ink); padding-top: 12px; display: grid; }
.toc p { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.toc a { font-size: 15px; color: var(--ink2); text-decoration: none; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.btn.wide { display: block; width: 100%; text-align: center; padding: 12px 14px; font-size: 16px; }
@media (max-width: 1060px) { .layout { grid-template-columns: 1fr; } .rail { display: none; } }
/* verdict block (item 9) */
.kicker { font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.verdict2 { display: grid; grid-template-columns: 200px 1fr; gap: var(--s3); align-items: start; }
.v-tile { display: block; background: var(--taupe); border-radius: 4px; aspect-ratio: 1; overflow: hidden; }
.v-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 16px; }
.v-name { font-size: 26px; margin-bottom: 12px; }
.v-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); margin-bottom: var(--s2); }
.v-table th { text-align: left; font-weight: 400; color: var(--muted); font-size: 15px; padding: 9px 0; border-bottom: 1px solid var(--rule); width: 46%; }
.v-table td { font-weight: 700; color: var(--ink); padding: 9px 0; border-bottom: 1px solid var(--rule); }
.v-table td .muted { font-weight: 400; }
@media (max-width: 560px) { .verdict2 { grid-template-columns: 1fr; } .v-tile { max-width: 220px; } }
/* tables (items 13-18) */
.ledger.results { table-layout: fixed; }
.ledger th { white-space: nowrap; }
.ledger td.found .pct { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger td.found.good .pct { color: var(--ink); }
.ledger td.found.bad .pct { color: var(--signal-text); }
.mbar { display: block; position: relative; height: 6px; background: var(--rule); border-radius: 3px; margin-top: 6px; max-width: 120px; }
.mbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink); }
.mbar.bad i { background: var(--signal); min-width: 2px; }
.mbar b { position: absolute; left: 76.9%; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink); opacity: .55; }
.ledger td.tested { font-size: 15px; }
.tbl-h.fail { color: var(--ink); }
@media (max-width: 700px) {
  .ledger.results tr { display: grid; grid-template-columns: 1fr 112px; column-gap: 12px; row-gap: 2px; padding: 12px 0; }
  .ledger.results td { padding: 0 !important; }
  .ledger.results td[data-l]::before { content: none; }
  .ledger.results td.p { grid-column: 1; grid-row: 1; }
  .ledger.results td.found { grid-column: 2; grid-row: 1; text-align: right; }
  .ledger.results td.found .mbar { margin-left: auto; max-width: 112px; }
  .ledger.results td.price { grid-column: 1; grid-row: 2; font-size: 14px; }
  .ledger.results td.price::before { content: "Per real 5 g: "; color: var(--muted); font-weight: 400; }
  .ledger.results td.tested { grid-column: 1 / -1; grid-row: 3; font-size: 12px; color: var(--muted); }
  .ledger.fails2 td.tested { grid-row: 2; }
}
/* deep dive facts panel with callout lines (items 3, 22) */
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); margin: var(--s3) 0; overflow: hidden; }
.facts-img { position: relative; background: #fff; border-radius: 4px; }
.facts-img img { display: block; width: 100%; height: auto; }
.co { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(255,255,255,.9); z-index: 1; }
.co::after { content: ""; position: absolute; left: 9px; top: 4px; height: 1px; width: 900px; background: var(--ink); opacity: .55; }
.facts-notes { list-style: none; position: relative; margin: 0; }
.facts-notes li { position: absolute; left: 16px; right: 0; transform: translateY(-50%); font-size: 15px; line-height: 1.35; color: var(--ink2); background: var(--stone); padding: 2px 0 2px 10px; z-index: 2; }
.facts-notes li b { color: var(--ink); }
.facts .cap { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .facts { grid-template-columns: 1fr; }
  .co::after { display: none; }
  .facts-notes { position: static; padding-top: var(--s2); }
  .facts-notes li { position: static; transform: none; padding: 6px 0; border-bottom: 1px solid var(--rule); background: none; }
}
/* site footer (item 26) */
.site-foot { margin-top: var(--s5); border-top: 2px solid var(--ink); padding: var(--s4) 0 var(--s5); }
.foot-grid { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.foot-grid p { font-size: 15px; color: var(--ink2); margin-top: 8px; max-width: 46ch; }
.foot-links { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: 15px; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-legal { font-size: 13px; color: var(--muted); margin-top: var(--s2); max-width: 80ch; }
.stub p, .stub li { margin-top: var(--s2); }
.stub ul { padding-left: 20px; }
/* v11b: numbered markers instead of lines (lines would cross the label text and NSF badges) */
.ledger td.found .pct { font-variant-numeric: normal; }
.co { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--ink); color: var(--stone); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.co::after { content: none; display: none; }
.facts { align-items: center; gap: var(--s3); }
.facts-notes { display: grid; gap: var(--s2); }
.facts-notes li { position: static; transform: none; background: none; padding: 0; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.co-n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--stone); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
@media (max-width: 700px) { .facts-notes li { border-bottom: 1px solid var(--rule); padding-bottom: 8px; } }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: var(--s3); } .hero .stage { max-height: 320px; aspect-ratio: auto; height: 300px; } }

/* ===== v12 ===== */
/* infographic hero */
.hero-fig { position: relative; margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1434 / 1071; background: var(--taupe); }
.hero-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-lines polyline { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: .75; }
.hf-lines circle { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.hf-lines .bad { stroke: var(--signal); }
.hf-lines circle.bad { fill: var(--signal); stroke: #fff; }
.hf-call { position: absolute; left: 4%; width: 28%; font-size: 14px; line-height: 1.3; color: var(--ink2); }
.hf-call span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.hf-call b { display: block; font-size: 20px; line-height: 1.1; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.hf-call.bad b { color: var(--signal-text); }
.hero .hero-fig { order: 2; }
@media (max-width: 860px) { .hero .hero-fig { order: 0; } }
@media (max-width: 560px) { .hf-call { width: 33%; font-size: 11px; } .hf-call b { font-size: 15px; } .hf-call span { font-size: 10px; } }
/* plain tables */
.ledger.results td.p span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; font-weight: 400; }
sup.tn { font-size: 11px; margin-left: 2px; }
sup.tn a { color: var(--muted); text-decoration: none; font-weight: 600; }
.tnotes { list-style: none; margin-top: var(--s2); font-size: 13px; color: var(--muted); }
.tnotes li { padding: 3px 0; }
.tnotes b { color: var(--ink2); margin-right: 4px; }
@media (max-width: 700px) {
  .ledger.results tr { grid-template-columns: 1fr 112px; }
  .ledger.results td.price { grid-column: 1 / -1; grid-row: 2; }
}
.ledger.results td.p span.pname, .ledger.results td.p a { display: inline; font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.ledger.results td.p span.ourpick { display: inline-block; margin-left: 6px; }
/* hero callouts: two type levels only (label, statement) */
.hf-call { font-size: 0; width: 27%; }
.hf-call span { font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 3px; letter-spacing: 0; }
.hf-call b { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.hf-call.bad b { color: var(--signal-text); }
@media (max-width: 560px) { .hf-call { width: 31%; } .hf-call span { font-size: 10px; } .hf-call b { font-size: 13px; } }
.hf-call { width: 30%; } .hf-call span { white-space: nowrap; }
.hf-call { width: 26%; }

/* ===== V0.2 ===== */
.rule { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink2); }
.rule p + p { margin-top: 10px; }
.rule b, .change b { color: var(--ink); }
.change { margin-top: var(--s3); padding: var(--s2); background: var(--taupe); border-radius: 4px; font-size: 15px; }
.change p + p { margin-top: 6px; }
.swarm { display: block; width: 100%; height: auto; margin: var(--s2) 0 0; }
.swarm circle.ok { fill: var(--ink); }
.swarm circle.bad { fill: var(--signal); }
.swarm .axis { stroke: var(--ink); stroke-width: 1.5; }
.swarm .g90 { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.swarm .g100 { stroke: var(--ink); stroke-width: 1.5; }
.swarm text { font-family: "Schibsted Grotesk", sans-serif; font-size: 12px; fill: var(--muted); }
.swarm .gl { font-size: 12px; fill: var(--ink2); }
.swarm .ann { font-size: 15px; font-weight: 700; fill: var(--ink); }
.swarm .ann.bad { fill: var(--signal-text); }
.ledger.srcs td { font-size: 15px; vertical-align: top; }
.ledger.srcs td.p span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.ledger td.month { color: var(--ink2); }
@media (max-width: 700px) {
  .ledger.results:not(.fails2) tr { grid-template-columns: 1fr 112px; }
  .ledger.results td.price { grid-column: 1; grid-row: 2; }
  .ledger.results td.month { grid-column: 2; grid-row: 2; text-align: right; font-size: 14px; }
  .ledger.results td.month::after { content: " /mo"; color: var(--muted); font-weight: 400; }
  .ledger.srcs thead { display: none; }
  .ledger.srcs tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ledger.srcs td { display: block; border: 0; padding: 3px 0; }
  .swarm text { font-size: 16px; } .swarm .ann { font-size: 20px; }
}
@media (max-width: 700px) {
  .swarm text { font-size: 20px; } .swarm .gl { font-size: 18px; } .swarm .ann { font-size: 24px; }
  .ledger.results tr { grid-template-columns: 1fr 132px !important; }
  .ledger.results td.found .pct { white-space: nowrap; }
  .ledger.results td.found .mbar { max-width: 132px; }
}
.swarm { overflow: visible; }

/* trust pages */
.trust h2 { margin-top: var(--s4); }
.trust p + p { margin-top: var(--s2); }
.trust-lede { font-size: 21px; line-height: 1.45; color: var(--ink2); }
.trust-list { list-style: none; border-top: 1px solid var(--rule); margin-top: var(--s1); }
.trust-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.trust-list b { color: var(--ink); }
.person { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.person h3 { font-size: 21px; }
.person p { margin-top: 8px; }
.trust-updated { margin-top: var(--s4); font-size: 13px; color: var(--muted); }

/* vs-powder hero (2026-10-18): two-line callout values, red only on the short result */
.hf-call.wide { width: 43%; }
.hf-call.wide b { font-size: 17px; }
.hf-call b em.sig { font-style: normal; color: var(--signal-text); }
@media (max-width: 560px) { .hf-call.wide { width: 46%; } .hf-call.wide b { font-size: 12.5px; line-height: 1.25; } }

/* ===== vs-powder V1 (2026-10-18): answer list, matched photo pair, problem fixes, range charts ===== */
.vs-hero { padding: var(--s4) 0 var(--s3); max-width: 760px; }
.vs-hero h1 { margin-bottom: var(--s2); }
.vs-hero .answer { font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.why-list { list-style: none; border-top: 1px solid var(--rule); margin-bottom: var(--s2); }
.why-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 18px; }
.why-list li b { color: var(--ink); }
.answer-sub { font-size: 18px; margin-bottom: var(--s2); max-width: 62ch; }
.answer-sub a { font-weight: 700; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s2) 0 var(--s4); }
.pair-card { background: var(--taupe); border-radius: 4px; overflow: hidden; }
.pair-card img { width: 100%; height: auto; }
.pair-body { padding: var(--s2) var(--s3) var(--s3); }
.pair-k { font-size: 13px; font-weight: 600; color: var(--muted); }
.pair-t { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 10px; }
.pair dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(21,21,20,.14); font-size: 15px; }
.pair dt { color: var(--ink2); }
.pair dd { font-weight: 700; color: var(--ink); text-align: right; }
.pair dd span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.pair dd.bad { color: var(--signal-text); }
.pair .cap { grid-column: 1 / -1; margin-top: 0; }
.fix { border-top: 1px solid var(--rule); padding: var(--s3) 0; max-width: 72ch; }
.fix h3 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 8px; }
.fix-n { font-size: 15px; font-weight: 800; color: var(--muted); min-width: 16px; }
.fix p { margin-top: 10px; }
.fix .fix-a { font-size: 18px; }
.fix .fix-a b { color: var(--ink); }
.hchart { display: block; width: 100%; height: auto; margin-top: var(--s2); }
.hchart text { font-family: "Schibsted Grotesk", sans-serif; font-size: 13px; fill: var(--muted); }
.hchart .lbl { font-size: 15px; font-weight: 700; fill: var(--ink); }
.hchart .sub { font-size: 12px; fill: var(--muted); }
.hchart .v { font-size: 14px; font-weight: 700; fill: var(--ink2); }
.hchart .grid { stroke: var(--rule); stroke-width: 1; }
.hchart .rng { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.hchart .rng.bad { stroke: var(--muted); }
.hchart .end { fill: var(--ink); }
.hchart .pk { fill: var(--stone); stroke: var(--ink); stroke-width: 3; }
.hchart .pkl { font-size: 12px; font-weight: 700; fill: var(--ink); }
.hchart rect.ok { fill: var(--ink); }
.hchart rect.short { fill: var(--muted); }
.hchart .dose { stroke: var(--signal); stroke-width: 2; stroke-dasharray: 4 3; }
.hchart .dl { font-size: 12px; font-weight: 700; fill: var(--signal-text); }
.mini-pick { display: grid; grid-template-columns: 160px 1fr; gap: var(--s3); align-items: start; max-width: 760px; }
.mini-pick h3 { font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.mini-pick p { margin-top: 8px; }
@media (max-width: 700px) {
  .pair { grid-template-columns: 1fr; gap: var(--s2); }
  .vs-hero .answer { font-size: 21px; }
  .why-list li, .answer-sub, .fix .fix-a { font-size: 16px; }
  .mini-pick { grid-template-columns: 96px 1fr; gap: var(--s2); }
  .hchart text { font-size: 18px; } .hchart .lbl { font-size: 20px; } .hchart .sub { font-size: 16px; } .hchart .v { font-size: 19px; } .hchart .pkl, .hchart .dl { font-size: 16px; }
}
.pair-t span { display: block; font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.hchart .lbl .sub { font-weight: 400; }
@media (max-width: 700px) {
  .hchart text { font-size: 20px; } .hchart .lbl { font-size: 22px; } .hchart .sub { font-size: 18px; } .hchart .v { font-size: 21px; } .hchart .pkl, .hchart .dl { font-size: 18px; }
}
/* HTML bar charts (vs-powder): readable at any width */
.rbars { margin-top: var(--s2); max-width: 640px; }
.rb-row { padding: 8px 0; }
.rb-head { font-size: 15px; color: var(--ink); }
.rb-head span { font-size: 13px; color: var(--muted); }
.rb-track { position: relative; height: 22px; margin: 6px 0 4px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.rb-rng { position: absolute; top: 7px; height: 8px; border-radius: 4px; background: var(--ink); }
.rb-rng.grey { background: var(--muted); }
.rb-track .pin { position: absolute; top: 2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--stone); border: 3px solid var(--ink); }
.rb-fill { position: absolute; left: 0; top: 0; height: 22px; background: var(--muted); }
.rb-fill.full { background: var(--ink); }
.rb-track .dose { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--signal); }
.rb-val { font-size: 14px; font-weight: 700; color: var(--ink2); }
.rb-pick { font-weight: 400; color: var(--muted); }
.rb-axis { position: relative; height: 18px; margin-top: 4px; border-top: 1px solid var(--ink); font-size: 12px; color: var(--muted); }
.rb-axis span { position: absolute; top: 2px; transform: translateX(-50%); }
.rb-axis span:first-child { transform: none; }
.rb-key { font-size: 13px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.rb-key .dose { display: inline-block; height: 14px; border-left: 2px dashed var(--signal); }

/* ===== vs-powder V2 (2026-10-18): one column, one block style ===== */
.vs > .block, .vs > .vs-hero, .vs > .pair2 { max-width: 760px; }
.vs .reasons { margin: 0 0 var(--s3) 1.1em; }
.vs .reasons li { font-size: 18px; margin-bottom: 6px; }
.vs .reasons li b { color: var(--ink); }
.pick-line { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: var(--s2); }
.pick-line p { flex: 1; font-size: 16px; }
.pick-line .btn { white-space: nowrap; }
.pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 0 0 var(--s4); }
.pair2 img { border-radius: 4px; width: 100%; height: auto; }
.pair2 p { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pair2 .cap { grid-column: 1 / -1; margin-top: 0; }
.qa { padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.qa h3 { font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.qa p + p { margin-top: 10px; }
.qa p b { color: var(--ink); }
@media (max-width: 700px) {
  .pick-line { flex-direction: column; align-items: stretch; }
  .vs .reasons li { font-size: 16px; }
}

/* ===== vs-powder V3 (2026-10-18): answer hero, 3 reasons + one fix, cost bars, cards ===== */
.vs3 > .block { max-width: 820px; }
.reason3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s3) 0; }
.reason3 li { background: var(--taupe); border-radius: 4px; padding: var(--s2) var(--s2) var(--s3); }
.reason3 .r-n { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.reason3 .r-u { display: block; font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.reason3 b { display: block; font-size: 17px; line-height: 1.3; color: var(--ink); }
.solve { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s3); align-items: start; border: 2px solid var(--ink); border-radius: 6px; padding: var(--s3); margin-top: var(--s2); }
.solve-img img { width: 100%; height: auto; border-radius: 4px; }
.solve-k { font-size: 13px; font-weight: 700; color: var(--signal-text); text-transform: none; }
.solve h3 { font-size: 23px; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; margin: 4px 0 var(--s2); }
.solve .ticks li { margin-bottom: 8px; }
.solve-pick { display: grid; grid-template-columns: 88px 1fr; gap: var(--s2); align-items: start; border-top: 1px solid var(--rule); padding-top: var(--s2); margin-top: var(--s2); }
.solve-pick .v-tile img { padding: 8px; }
.sp-k { font-size: 12px; color: var(--muted); }
.sp-n { font-weight: 700; color: var(--ink); font-size: 16px; }
.sp-d { font-size: 14px; margin: 2px 0 10px; }
.tbars { margin-top: var(--s2); }
.tb-row { display: grid; grid-template-columns: 170px 1fr 120px; gap: var(--s2); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tb-name b { display: block; color: var(--ink); font-size: 16px; }
.tb-name span { font-size: 13px; color: var(--muted); }
.tb-bar { display: flex; align-items: center; gap: 10px; }
.tb-bar i { display: block; height: 26px; background: var(--rule); border-radius: 3px; }
.tb-bar i.p { background: var(--ink); }
.tb-bar i.g { background: var(--muted); }
.tb-bar b { font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.tb-rng { font-size: 13px; color: var(--muted); text-align: right; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.card { background: var(--taupe); border-radius: 4px; padding: var(--s2) var(--s2) var(--s3); font-size: 15px; }
.card .c-k { font-weight: 700; color: var(--ink); font-size: 15px; }
.card .c-big { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 6px 0 8px; }
.card .c-big span { color: var(--muted); font-weight: 400; }
.stat2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s2) 0; }
.stat2 div { border-top: 3px solid var(--ink); padding-top: 8px; }
.stat2 b { display: block; font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.stat2 b.bad { color: var(--signal-text); }
.stat2 span { font-size: 15px; }
.ledger td.win { font-weight: 700; color: var(--ink); }
@media (max-width: 760px) {
  .reason3, .cards3 { grid-template-columns: 1fr; }
  .reason3 li { display: grid; grid-template-columns: 64px 1fr; align-items: center; padding: var(--s2); }
  .reason3 .r-u { display: none; }
  .reason3 .r-n { font-size: 34px; }
  .solve { grid-template-columns: 1fr; padding: var(--s2); }
  .tb-row { grid-template-columns: 1fr; gap: 4px; }
  .tb-rng { text-align: left; }
  .stat2 b { font-size: 28px; }
}
.v-why { font-size: 16px; margin: 6px 0 var(--s2); max-width: 52ch; }
.vs3 #pick { border-top: 0; }
.paid-line { font-size: 14px; color: var(--ink2); margin-top: var(--s2); padding: 12px 14px; background: var(--taupe); border-radius: 4px; }

/* ===== vs-powder V0.2 (2026-10-18): stat strip, decision box, steps, evidence cards, ledger box ===== */
.hero-fig.plain img { border-radius: 4px; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.stat3 div { border-top: 3px solid var(--ink); padding-top: 8px; }
.stat3 b { display: block; font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.stat3 b.bad { color: var(--signal-text); }
.stat3 span { display: block; font-size: 13px; line-height: 1.35; margin-top: 4px; }
.decide { max-width: 820px; background: var(--taupe); border-radius: 6px; padding: var(--s3); margin: var(--s2) 0 var(--s4); }
.decide h2 { font-size: 20px; margin-bottom: 10px; }
.decide ul { list-style: none; }
.decide li { padding: 8px 0; border-top: 1px solid rgba(21,21,20,.14); font-size: 16px; }
.decide li:first-child { border-top: 0; }
.decide li b { color: var(--ink); }
.decide li a { white-space: nowrap; font-weight: 700; margin-left: 4px; }
.steps { list-style: none; margin: var(--s2) 0; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.st-n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--stone); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.steps b { color: var(--ink); }
.steps em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--signal-text); margin-top: 4px; }
.ecard { display: grid; grid-template-columns: 220px 1fr; gap: var(--s3); align-items: start; }
.ec-body .v-name { margin-bottom: var(--s2); }
.proof { list-style: none; border-top: 2px solid var(--ink); }
.proof li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.proof li b { color: var(--ink); }
.proof li a { font-weight: 700; margin-left: 4px; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s2) 0; font-size: 15px; }
.fit p { background: var(--taupe); border-radius: 4px; padding: 10px 12px; }
.fit b { color: var(--ink); }
.ec-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.ec-links { font-weight: 700; margin-top: 4px; }
.money2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.money2 div { background: var(--taupe); border-radius: 4px; padding: var(--s2); }
.money2 span { display: block; font-size: 13px; color: var(--ink2); }
.money2 b { display: block; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
.money2 b.dim { color: var(--muted); }
.ledger-box { max-width: 820px; border: 2px solid var(--ink); border-radius: 6px; padding: var(--s3); margin: var(--s4) 0; }
.lb-k { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); }
.lb-k::before { content: "*"; color: var(--signal); margin-right: 3px; }
.ledger-box h2 { font-size: 22px; margin: 2px 0 var(--s2); }
.ledger-box dl div { display: grid; grid-template-columns: 160px 1fr; gap: var(--s2); padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.ledger-box dt { font-weight: 700; color: var(--ink); }
.worked { background: var(--taupe); border-radius: 4px; padding: var(--s2); margin-top: var(--s2); font-size: 15px; }
.wk-k { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 760px) {
  .stat3 { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .stat3 b { font-size: 21px; } .stat3 span { font-size: 12px; }
  .ecard { grid-template-columns: 1fr; } .ecard .v-tile { max-width: 200px; }
  .fit, .money2 { grid-template-columns: 1fr; }
  .ledger-box dl div { grid-template-columns: 1fr; gap: 2px; }
  .decide, .ledger-box { padding: var(--s2); }
}
.decide li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.decide li a { margin-left: 0; flex-shrink: 0; }
@media (max-width: 760px) { .decide li { display: block; } .decide li a { display: inline-block; margin-top: 2px; } }
@media (max-width: 860px) { .hero-fig.plain img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 78% 60%; } }
/* vs-powder cost bars: same palette as the lab dot chart */
.costbars rect.ok { fill: var(--ink); } .costbars rect.gum { fill: var(--muted); } .costbars rect.mid { fill: var(--rule); }
/* vs-powder polish (2026-10-18): brand asterisk on pick kickers, red underline on headline findings, share bars */
.kicker.star::before { content: "*"; color: var(--signal); font-weight: 800; margin-right: 4px; }
.hl { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
.mbar.share { max-width: 140px; }
.v-links { margin-top: 14px; font-weight: 700; }

/* =====================================================================================================================
   DESIGN SYSTEM STEP 1 (2026-10-22). Source: design/DESIGN-REVIEW-1022.md moves 1, 2, 4, 5, 10, 11, 12 and PRINCIPLES Part 2.
   Grid: 12 columns, 1088px content, 24px gutters. Text = 7 columns (624px). Figures = 12 columns. Hero = 5 / 7.
   Baseline: 8px (4px half step for 13px text). No new colors, fonts or component types; this block only re-proportions what exists.
   ===================================================================================================================== */
:root { --c7: calc((100% - 264px) * 7 / 12 + 144px); --gut: 24px; }
@media (max-width: 960px) { :root { --c7: 100%; } }

/* type: baseline rhythm, tracking by size, figures */
body { line-height: 28px; font-kerning: normal; }
h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.03em; }
h2 { line-height: 32px; margin-bottom: 16px; }
h3 { line-height: 28px; }
h1, h2, h3 { text-wrap: balance; font-variant-numeric: proportional-nums; }
.lede, .answer, .trust-lede, .tbl-sub { text-wrap: pretty; }
@media (min-width: 900px) { h1 { font-size: 56px; line-height: 56px; letter-spacing: -0.035em; margin-left: -0.04em; } }  /* optical left offset */
.lede { line-height: 28px; }
.hero .answer, .trust-lede { line-height: 28px; }
.trust-lede { line-height: 32px; }
.crumbs, .cap, .bar2-src, .figsrc, .tnotes li, .barnote, .foot-legal, .disclose, .ledger th, .ledger td.p span, .data-dl, .hf-l { line-height: 20px; letter-spacing: 0.01em; }
.byline, .small, .nav, .rule, .kicker, .btn, .v-table, .names, ol.sources, .notelist, .foot-grid p, .foot-links, .facts-notes li, .qa p, .tbl-sub { line-height: 24px; }
.ledger td { line-height: 24px; }
/* Tabular figures are NOT used: Schibsted Grotesk's tnum also widens '.' and ',' to a full digit ('$0 . 14'), so decimals break. Proportional everywhere. */

/* spacing: one rhythm. Space above a heading is twice the space below it. */
section.block { padding: 32px 0 40px; }
.tbl-h { margin-top: 32px; margin-bottom: 0; line-height: 28px; }
.tbl-sub { margin-top: 8px; }
.ledger + .small.muted, .tnotes + .small.muted { margin-top: 16px; }

/* ---- the 12-column grid: prose = 7 columns, figures = 12 ---- */
.layout { display: block; max-width: none; }
.layout .block > * { max-width: var(--c7); }
.layout .block > :is(table.ledger:not(.fails2), .figsrc, svg.swarm, svg.hchart, .rbars, .tbars, .bar2, .withimg, .why, .dd-cols) { max-width: none; }
.withimg { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.withimg > :first-child { grid-column: 1 / 8; }
.withimg > .side { grid-column: 8 / 13; }
@media (max-width: 960px) { .withimg > :first-child, .withimg > .side { grid-column: 1 / -1; } }
.swarm { max-width: none; }
/* Bar charts drawn on a narrow viewBox (480/560: women, monohydrate, third-party) would double in size at 12 columns, so they keep the 7-column text measure.
   Charts drawn on the 720 viewBox (dot charts, vs cost bars) span 12. */
.layout .block > svg.swarm[viewBox^="0 0 4"], .layout .block > svg.swarm[viewBox^="0 0 5"] { max-width: var(--c7); }

/* ---- hero: 5 / 7 on desktop; H1, answer, byline, image on phones ---- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; padding: 64px 0 40px; }
.hero .hero-text { grid-column: 1 / 6; grid-row: 1; order: 0; }
.hero .hero-fig { grid-column: 6 / 13; grid-row: 1; order: 0; }
.hero .answer { max-width: none; }
.hero .hero-text { min-width: 0; }
.hf-img { display: contents; }  /* desktop: callouts and lines are positioned on the figure itself */
.hero-fig .hf-n { display: none; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 24px 0 8px; }
  .hero .hero-text, .hero .hero-fig { grid-column: 1; grid-row: auto; }
  .hero .hero-text { order: 1; }
  .hero .hero-fig { order: 2; max-height: none; height: auto; }
  .hero .answer { max-width: 62ch; }
}
/* callout line weights: 1.5px line, 6px dot */
.hf-lines polyline { stroke-width: 1.5; opacity: .85; }
.hf-lines circle { r: 6px; stroke-width: 2; }
@media (min-width: 900px) { .hf-lines circle { r: 7px; } }
/* phones: callout text would render under 13px, so numbered markers go on the photo and the same callouts become a 3-line list under it */
@media (max-width: 560px) {
  .hero .hero-fig { display: flex; flex-direction: column; aspect-ratio: auto !important; height: auto; overflow: visible; background: none; border-radius: 0; counter-reset: hf; }
  .hf-img { display: block; position: relative; overflow: hidden; border-radius: 4px; background: var(--taupe); }
  .hero-fig .hf-lines { display: none; }
  .hero-fig .hf-n { display: block; }
  .hero-fig .hf-n { width: 20px; height: 20px; margin: -10px 0 0 -10px; line-height: 20px; font-size: 13px; }
  .hero-fig .hf-n.bad { background: var(--signal); }
  .hero-fig .hf-call { position: static; width: auto !important; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--rule); counter-increment: hf; font-size: 0; }
  .hero-fig .hf-img + .hf-call { margin-top: 16px; border-top: 2px solid var(--ink); }
  .hero-fig .hf-call::before { content: counter(hf); grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--stone); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; margin-top: 1px; }
  .hero-fig .hf-call.bad::before { background: var(--signal); }
  .hero-fig .hf-call:last-child { border-bottom: 0; }
  .hero-fig .hf-call span { grid-column: 2; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--muted); white-space: normal; margin: 0; }
  .hero-fig .hf-call b { grid-column: 2; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
  .hero-fig .hf-call.bad b { color: var(--signal-text); }
}

/* ---- verdict block: compact on phones (96px tile beside the name, then the evidence table and the button) ---- */
.v-tile img, .pick-tile img, .dd-tile img, .rail-tile img, .pc-tile .pc-img { padding: 12%; }
@media (max-width: 560px) {
  .verdict2 { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 16px; align-items: start; }
  .verdict2 > div { display: contents; }
  .verdict2 .v-tile { width: 96px; max-width: none; grid-column: 1; grid-row: 1; }
  .verdict2 .v-name { grid-column: 2; grid-row: 1; font-size: 21px; line-height: 24px; margin: 0; }
  .verdict2 .v-table, .verdict2 .btn, .verdict2 .v-links { grid-column: 1 / -1; }
  .verdict2 .v-table { margin-bottom: 0; }
  .verdict2 .v-links { margin-top: 0; }
}

/* ---- figure grammar: finding title (H2), the figure, then one source line ---- */
.bar2-src { margin: 8px 0 0; }
.figsrc { margin: 8px 0 24px; font-size: 13px; color: var(--muted); }
.bar2-src + .figsrc { margin-top: 4px; }
.block > .bar2-src:last-child, .block > .figsrc:last-child { margin-bottom: 0; }

/* ---- links in tables: product and brand names are bold Ink, underlined on hover/focus only. Body links keep their underline. ---- */
.ledger td.p a, .ledger td b > a, .ledger td .pname a, .ledger td a.pname, .prod a { color: var(--ink); text-decoration: none; }
.ledger td.p a:hover, .ledger td b > a:hover, .ledger td .pname a:hover, .ledger td a.pname:hover, .prod a:hover,
.ledger td.p a:focus-visible, .ledger td b > a:focus-visible, .ledger td .pname a:focus-visible, .ledger td a.pname:focus-visible, .prod a:focus-visible {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- charts: annotation lines share the callout weight (1.5px) at any chart width ---- */
.swarm .axis, .swarm .g90, .swarm .g100 { vector-effect: non-scaling-stroke; }
.swarm .g90, .swarm .g100 { stroke-width: 1.5; }
.swarm .axis { stroke-width: 1; }

/* ---- trust pages and stubs: the same top spacing and heading rhythm as articles ---- */
article.trust { max-width: var(--c7); padding-bottom: 40px; }
article.trust h1 { margin: 64px 0 16px; }
article.trust h2 { margin-top: 32px; }
.stub { max-width: var(--c7); padding: 108px 0 64px; }  /* 108 = breadcrumb row (44) + the article H1 offset (64) */
.stub h1 { margin-bottom: 16px; }
.stub h2 { margin-top: 32px; }
.stub .home-links { margin-top: 24px; }
.stub ul.trust-list { padding-left: 0; }
.stub .trust-list li { margin-top: 0; }
@media (max-width: 900px) { article.trust h1 { margin-top: 24px; } .stub { padding-top: 68px; } }
@media (max-width: 560px) { .trust-lede { font-size: 19px; line-height: 28px; } }

/* ===== Step 3 (2026-10-22): chart text stays on the type scale at every width ===== */
/* --k = viewBox width / rendered width, set by the small script in common.finish(). A user unit of text is then k px wide,
   so font-size: calc(13px * k) renders at exactly 13px. 13px axis and labels, 15px annotations, 17px for the headline label. */
.swarm text { font-size: calc(13px * var(--k, 1)); }
.swarm .gl { font-size: calc(13px * var(--k, 1)); }
.swarm .ann { font-size: calc(15px * var(--k, 1)); }
.swarm:not(.costbars) .ann.hd { font-size: calc(17px * var(--k, 1)); }

/* long titles (over 50 characters, flagged by common.long_h1): 48/48 on desktop. The optical offset stays. */
@media (min-width: 900px) { h1[data-long] { font-size: 48px; line-height: 48px; } }

/* ===== forms-compared page (2026-10-22) ===== */
.hero.textonly .hero-text { grid-column: 1 / 10; }
#other .read h3 { font-size: 21px; line-height: 24px; font-weight: 700; margin-top: 32px; margin-bottom: 8px; letter-spacing: -0.01em; }
#other .read h3:first-child { margin-top: 0; }
/* the cost chart is drawn twice (1088 wide for desktop, 720 wide for phones); only one shows */
.swarm[viewBox^="0 0 1088"] + .swarm[viewBox^="0 0 720"] { display: none; }
@media (max-width: 700px) { .swarm[viewBox^="0 0 1088"] { display: none; } .swarm[viewBox^="0 0 1088"] + .swarm[viewBox^="0 0 720"] { display: block; } }

/* ===== explainer page (2026-10-22): /creatine/how-it-works/ ===== */
/* The energy-cycle diagram is the page's one display moment. It reuses the chart system (class swarm, text sized by --k: 13 / 15 / 17 px) and the callout
   line weights: Ink lines 1.5px, 6px dots, Taupe ground. Two drawings: the wide one carries the arrow labels, the phone one carries numbered markers and a list. */
.hero .dia { grid-column: 6 / 13; grid-row: 1; margin: 0; min-width: 0; }
.dia .swarm { margin: 0; }
.swarm rect.gr { fill: var(--taupe); }
.swarm rect.bx { fill: var(--stone); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.swarm rect.ol { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.swarm .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.swarm .hd-fill { fill: var(--ink); }
.swarm circle.hol { fill: var(--stone); stroke: var(--ink); stroke-width: 2.5; }
.swarm text.mk { fill: var(--stone); font-weight: 700; font-size: calc(13px * var(--k, 1)); }
.dia-p, .dia-list { display: none; }
.dia-cap { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--muted); letter-spacing: 0.01em; }
@media (max-width: 900px) { .hero .dia { grid-column: 1; grid-row: auto; order: 2; max-width: 640px; } }
/* The wide drawing needs about 580px. Narrower than that (phones, and the 901 to 1043px two-column range) the tall drawing shows, with its numbered steps in a list. */
@media (max-width: 611px), (min-width: 901px) and (max-width: 1043px) {
  .dia-d { display: none; }
  .dia-p { display: block; }
  .dia-list { display: block; list-style: none; counter-reset: dl; margin-top: 16px; border-top: 2px solid var(--ink); }
  .dia-list li { counter-increment: dl; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .dia-list li::before { content: counter(dl); grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--stone); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; margin-top: 1px; }
  .dia-list span { grid-column: 2; font-size: 13px; line-height: 20px; color: var(--muted); }
  .dia-list b { grid-column: 2; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); }
}
/* the muscle chart: wide drawing at 7 columns, phone drawing under 700px; it sits on the page's one full-width Taupe band */
.mc-p { display: none; }
@media (max-width: 700px) { .mc-d { display: none; } .mc-p { display: block; } }
.layout section.block > svg.swarm.mc-d, .layout section.block > svg.swarm.mc-p { max-width: var(--c7); }
section.block.band { background: var(--taupe); border-top: 0; margin: 40px 0 8px; position: relative; box-shadow: 0 0 0 100vmax var(--taupe); clip-path: inset(0 -100vmax); }
section.block.band + section.block { border-top: 0; }
.band .bar2-src, .band .figsrc { color: var(--ink2); }
.band sup.fn a { color: var(--ink2) !important; }
.band .swarm circle.hol { fill: var(--taupe); }
ol.checks + p.small { margin-top: 24px; }
[data-page="explainer"] sup.fn { white-space: nowrap; }

/* inline figure with callouts outside the hero (steak and scoop): same phone treatment as the hero figure */
@media (max-width: 560px) { .layout .hero-fig { display: flex; flex-direction: column; aspect-ratio: auto !important; height: auto; overflow: visible; background: none; border-radius: 0; counter-reset: hf; } }
.layout .block > figure.hero-fig { max-width: var(--c7); margin: 24px 0 0; }
.layout .block > figure.hero-fig + .cap { margin-bottom: 16px; }
.band .lede + .bar2-src.legend { margin: 0 0 8px; color: var(--ink2); }

/* ===== benefits page (2026-10-22): /creatine/benefits/ ===== */
/* The evidence ladder reuses the explainer diagram frame (.dia, class swarm). Row names sit on the 15px step; guides and row rules are hairlines in Ink at low strength. */
.swarm .rl { font-size: calc(15px * var(--k, 1)); fill: var(--ink); font-weight: 400; }
.swarm .guide { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 4; opacity: .35; vector-effect: non-scaling-stroke; }
.swarm .hl { stroke: var(--ink); stroke-width: 1; opacity: .14; vector-effect: non-scaling-stroke; }
/* evidence ledgers: grade in bold, qualifier and caveat in the muted 13px line */
.ledger.evid td { font-size: 15px; line-height: 22px; }
.ledger.evid td.gcell b { display: block; font-size: 16px; color: var(--ink); }
.ledger.evid td.gcell span, .ledger.evid td span.cav { display: block; font-size: 13px; line-height: 20px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.ledger.evid td.src { font-size: 13px; line-height: 20px; color: var(--ink2); }
.ledger.camps td { font-size: 15px; line-height: 22px; }
.ledger.glance td { font-size: 15px; line-height: 22px; }
section.pickline { border-top: 1px solid var(--rule); padding-top: 24px; }
.ledger.evid td.src .s { display: block; }
table.ledger + .read { margin-top: 24px; }
@media (max-width: 700px) {
  .ledger.evid td.p { font-size: 17px; font-weight: 700; }
  .ledger.evid td[data-l="Grade"] b { display: inline; }
  .ledger.evid td[data-l="Grade"] span { display: inline; margin-left: 6px; }
  .ledger.evid td[data-l]::before, .ledger.camps td[data-l]::before, .ledger.glance td[data-l]::before { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
  .ledger.evid td[data-l="Grade"]::before { display: inline; margin-top: 0; }
  .ledger.evid td[data-l="Trials and people"], .ledger.evid td[data-l="Typical dose"], .ledger.evid td.src { font-size: 13px; line-height: 20px; color: var(--ink2); padding: 0; }
  .ledger.evid td[data-l="Trials and people"]::before, .ledger.evid td[data-l="Typical dose"]::before, .ledger.evid td.src::before { display: inline; margin: 0; }
  .ledger.evid td[data-l="Trials and people"] { margin-top: 8px; }
  .ledger.evid td.src .s { display: inline; }
  .ledger.evid td.src .s:not(:last-child)::after { content: ", "; }
}

/* ===== front pages (2026-10-22): homepage and /creatine/ (build_front.py) ===== */
/* Homepage hero: text 5 columns, the gummies dot chart 7 columns (data as the hero image). The chart follows the figure grammar:
   finding title (the H3 step), the drawing, the caption line, the source line. */
.front-fig .fig-t { font-size: 21px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; text-wrap: balance; }
.front-fig .bar2-src { margin-top: 8px; }
.front-fig .figsrc { margin-top: 4px; }
/* question index: the question is the link (Ink, bold, underline on hover, like product names in tables); the answer is plain 15px */
.ledger.front td.p a { font-weight: 700; }
.ledger.front td.p { font-size: 17px; line-height: 24px; }
p.more { margin-top: 16px; font-size: 15px; line-height: 24px; }
.band p.go { margin-top: 16px; font-weight: 700; font-size: 17px; }
.band p.go a::after { content: " \2192"; }
#how ol.checks { max-width: var(--c7); }
/* chart labels that sit on a guide line (the "10 met the label" label crosses the 100% line on phones): a halo in the ground color breaks the line behind the text */
/* only the lab-result dot charts (the ones that draw the 100% label line: gummies, gummies vs powder, homepage hero), all on Stone */
.swarm:has(line.g100) text:is(.ann, .gl) { paint-order: stroke; stroke: var(--stone); stroke-width: 5px; stroke-linejoin: round; }
/* question index on phones: the question is the row's heading, so the "Short answer" label is not needed */
@media (max-width: 700px) { .ledger.front td[data-l]::before { display: none; } .ledger.front td[data-l] { margin-top: 4px; } }
/* the group heading names the table, so the column labels are dropped; the 2px Ink ledger rule moves to the first row */
.ledger.front thead { display: none; }
@media (min-width: 701px) { .ledger.front tbody tr:first-child td { border-top: 2px solid var(--ink); } }
.ledger.front tbody tr:last-child td { border-bottom: 0; }
/* front pages: on touch screens (no hover to reveal it) the question links keep the body-link underline; with a mouse they follow the quiet table-link rule (move 10) */
@media (hover: none) { .ledger.front td.p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
/* /creatine/: the pick block sits inside the "which should I buy" group, then that group's other questions */
#buy .kicker { margin-top: 8px; }
#buy .rule + table.ledger { margin-top: 32px; }

/* ---- dot charts: a desktop drawing (720 wide) and a phone drawing (360 wide) ship together; one shows. 2026-10-22 ----
   Labels get a halo in the page color so a guide line never cuts through the words. */
.swarm.sw-phone { display: none; }
@media (max-width: 700px) { .swarm.sw-desk { display: none; } .swarm.sw-phone { display: block; } }
.swarm:is(.sw-desk, .sw-phone) text { paint-order: stroke; stroke: var(--stone); stroke-width: 4px; stroke-linejoin: round; }

/* ---- phones keep the site menu: it drops to its own row under the logo (2026-10-22; was hidden below 860px) ---- */
@media (max-width: 860px) {
  .top .wrap { flex-wrap: wrap; row-gap: 6px; padding-bottom: 12px; }
  .nav { display: flex; width: 100%; gap: 20px; font-size: 15px; }
}

/* ===== monohydrate cost dot chart (2026-10-22): wide drawing on desktop, a vertical drawing on phones (same data, same 2-cent rows) ===== */
.costdots-p { display: none; }
@media (max-width: 700px) { .costdots-d { display: none; } .costdots-p { display: block; max-width: 360px; } }

/* ===== product thumbnails in tables (design review move 9) ===== */
.ledger td.p.wt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.tt { display: block; width: 40px; height: 40px; background: var(--taupe); border-radius: 4px; overflow: hidden; }
.tt img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; padding: 12%; }
span.tt:empty { background: none; }
@media (max-width: 700px) { .ledger td.p.wt { display: grid; } }
/* third-party-tested: the NSF listing capture is read, not glanced at, so it runs wider than a label panel (text in the capture ~15px at 560px) */
.layout .block > figure.facts.nsfcap { max-width: none; grid-template-columns: minmax(0, 560px) minmax(0, 360px); justify-content: start; }
@media (max-width: 700px) { .layout .block > figure.facts.nsfcap { grid-template-columns: 1fr; } }
/* dosage "5 g by form" drawing: shown at its drawn size (440px) so the shapes stay in proportion to the 13/15px labels */
.layout .block > svg.swarm.units { max-width: 440px; margin: 24px 0 0; }