/* BannerBye · design system — see design.md
 * Hallmark · genre: modern-minimal · macrostructure: Split Studio
 * theme: BannerBye brand (preserved) · nav: N9 · footer: Ft5
 * Locked 2026-10-02. One system, every page.
 */

:root{
  --color-paper:        oklch(97.2% 0.011 86);
  --color-paper-2:      oklch(94.3% 0.013 86);
  --color-paper-3:      oklch(99.3% 0.004 86);
  --color-ink:          oklch(16.8% 0.009 258);
  --color-ink-2:        oklch(51.9% 0.011 253);
  --color-ink-3:        oklch(68% 0.009 253);
  --color-rule:         oklch(88.5% 0.008 86);
  --color-rule-strong:  oklch(78% 0.010 86);
  --color-accent:       oklch(62.8% 0.176 38.5);
  --color-accent-deep:  oklch(52% 0.155 38.5);
  --color-accent-soft:  oklch(95.2% 0.030 45);
  --color-accent-ink:   oklch(99.3% 0.004 86);
  --color-focus:        oklch(48% 0.14 255);
  --color-paper-inv:    oklch(14.5% 0.010 258);
  --color-paper-inv-2:  oklch(21% 0.011 258);
  --color-ink-inv:      oklch(96.5% 0.008 86);
  --color-ink-inv-2:    oklch(72% 0.010 253);
  --color-rule-inv:     oklch(29% 0.011 258);

  --font-display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem;
  --space-sm:1rem;    --space-md:1.5rem; --space-lg:2rem;
  --space-xl:3rem;    --space-2xl:4.5rem;--space-3xl:7rem; --space-4xl:10rem;

  --text-2xs:.6875rem; --text-xs:.8125rem; --text-sm:.9375rem;
  --text-md:1.0625rem; --text-lg:1.3125rem; --text-xl:1.75rem;
  --text-2xl:2.25rem;  --text-3xl:3rem;
  --text-display-s: clamp(1.9rem, 3.4vw + .45rem, 3.05rem);
  --text-display:   clamp(2.4rem, 4.9vw + .35rem, 4.3rem);
  --text-numeral:   clamp(3.6rem, 9vw, 7.5rem);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-short:200ms; --dur-mid:420ms;

  --rule-hair:1px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;

  --measure:62ch;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --maxw: 76rem;
}

*,*::before,*::after{box-sizing:border-box;}
/* a display rule on a class otherwise beats the UA's [hidden] rule */
[hidden]{display:none!important;}
html,body{overflow-x:clip;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--text-md); line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,table{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;}
img,svg{max-width:100%;height:auto;display:block;}
strong,b{font-weight:600;}

h1,h2,h3,h4,.display{
  font-family:var(--font-display); font-style:normal; font-weight:600;
  letter-spacing:-.028em; line-height:1.02;
  overflow-wrap:anywhere; min-width:0; text-wrap:balance;
}

:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px;}
::selection{background:var(--color-accent);color:var(--color-accent-ink);}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.rule{border:0;border-top:var(--rule-hair) solid var(--color-rule);margin:0;}
.mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.01em;}
.nums{font-variant-numeric:tabular-nums;}

.skip{position:absolute;left:-9999px;top:0;background:var(--color-ink);color:var(--color-ink-inv);
      padding:.6rem 1rem;z-index:50;border-radius:0 0 var(--radius-md) 0;font-size:var(--text-sm);}
.skip:focus{left:0;}

/* ── N9 · edge-aligned minimal ─────────────────────────────── */
.nav{padding-block:var(--space-md);}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.03em;white-space:nowrap;}
.brand__mark{width:19px;height:19px;flex:none;}
.brand em{font-style:normal;color:var(--color-accent);}
.nav__links{display:none;gap:var(--space-md);font-size:var(--text-sm);color:var(--color-ink-2);}
@media (min-width:52rem){.nav__links{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:var(--space-md);}}
.nav__links a{text-decoration:none;white-space:nowrap;transition:color var(--dur-short) var(--ease-out);}
.nav__links a:hover{color:var(--color-accent);}

.btn{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;
  letter-spacing:-.005em;text-decoration:none;border-radius:var(--radius-md);
  padding:.6rem 1rem;border:var(--rule-hair) solid transparent;
  transition:background-color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out),
             color var(--dur-short) var(--ease-out),
             transform 120ms var(--ease-out);
}
.btn--fill{background:var(--color-ink);color:var(--color-ink-inv);}
.btn--fill:hover{background:var(--color-accent-deep);}
.btn--fill:active{transform:translateY(1px);}
.btn--line{border-color:var(--color-rule-strong);color:var(--color-ink);background:transparent;}
.btn--line:hover{border-color:var(--color-ink);background:var(--color-paper-3);}
.btn--line:active{transform:translateY(1px);}

/* ── H2 · split diptych hero ───────────────────────────────── */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6.5rem);}
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr);}
@media (min-width:62rem){.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;}}

.hero h1{font-size:var(--text-display);font-weight:700;}
.hero h1 .off{display:block;color:var(--color-accent);}
.hero__lede{margin-top:var(--space-md);max-width:38ch;color:var(--color-ink-2);font-size:var(--text-lg);line-height:1.45;}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-lg);}
.hero__fine{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--color-ink-3);}

/* the refusal ledger — Tier-A pure CSS, no re-drawn chrome */
.ledger{border-top:var(--rule-hair) solid var(--color-rule);}
.ledger__cap{
  display:flex;justify-content:space-between;gap:var(--space-sm);
  padding-block:.7rem;font-family:var(--font-mono);font-weight:500;
  font-size:var(--text-2xs);letter-spacing:.11em;text-transform:uppercase;color:var(--color-ink-3);
  border-bottom:var(--rule-hair) solid var(--color-rule);
}
.ledger__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding-block:.85rem;border-bottom:var(--rule-hair) solid var(--color-rule);
}
.ledger__said{color:var(--color-ink-2);font-size:var(--text-sm);min-width:0;}
.ledger__ans{
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-sm);
  color:var(--color-accent);white-space:nowrap;flex:none;
}
.ledger__out{padding-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-ink-2);}
.ledger__out b{font-weight:600;color:var(--color-ink);}

@media (prefers-reduced-motion:no-preference){
  .ledger__row{opacity:0;animation:settle var(--dur-mid) var(--ease-out) forwards;}
  .ledger__row:nth-child(2){animation-delay:.10s}
  .ledger__row:nth-child(3){animation-delay:.19s}
  .ledger__row:nth-child(4){animation-delay:.28s}
  .ledger__row:nth-child(5){animation-delay:.37s}
  .ledger__row:nth-child(6){animation-delay:.46s}
  .ledger__out{opacity:0;animation:settle var(--dur-mid) var(--ease-out) .62s forwards;}
}
@keyframes settle{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

/* ── the number — asymmetric split, tight band ─────────────── */
.band{background:var(--color-paper-2);border-block:var(--rule-hair) solid var(--color-rule);}
.count{padding-block:clamp(2.5rem,5vw,3.75rem);}
.count__grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr);align-items:end;}
@media (min-width:52rem){.count__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}}
.count__big{font-family:var(--font-display);font-weight:700;font-size:var(--text-numeral);line-height:.86;letter-spacing:-.045em;}
.count__big span{color:var(--color-accent);}
.count__say{margin-top:.55rem;max-width:30ch;color:var(--color-ink-2);font-size:var(--text-sm);}
.count__pair{display:grid;gap:var(--space-md) var(--space-lg);grid-template-columns:minmax(0,1fr);}
@media (min-width:34rem){.count__pair{grid-template-columns:repeat(2,minmax(0,1fr));}}
.count__n{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);letter-spacing:-.03em;line-height:1;}
.count__t{margin-top:.4rem;color:var(--color-ink-2);font-size:var(--text-sm);}
.count__src{grid-column:1/-1;font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);color:var(--color-ink-3);letter-spacing:.02em;}

/* ── section heads — diptych, no eyebrows ──────────────────── */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem);}
.sec--tight{padding-block:clamp(3rem,6vw,4.5rem);}
.sec--tall{padding-block:clamp(4.5rem,10vw,8rem);}
.head{display:grid;gap:var(--space-sm) clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);align-items:baseline;}
@media (min-width:62rem){.head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}}
.head h2{font-size:var(--text-display-s);font-weight:600;max-width:17ch;}
.head p{color:var(--color-ink-2);max-width:48ch;font-size:var(--text-sm);line-height:1.62;}
.head--solo{grid-template-columns:minmax(0,1fr);}
.head--solo h2{max-width:22ch;}
.lede-wide{margin-top:var(--space-md);color:var(--color-ink-2);font-size:var(--text-md);line-height:1.62;max-width:72ch;}

/* ── F3 · tabular spec sheet (the comparison) ──────────────── */
.cmp{margin-top:clamp(2rem,4vw,3rem);overflow-x:auto;}
.cmp table{width:100%;border-collapse:collapse;min-width:44rem;}
.cmp th,.cmp td{text-align:left;padding:.9rem .85rem;font-size:var(--text-sm);vertical-align:top;}
.cmp thead th{
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-3);
  border-bottom:var(--rule-hair) solid var(--color-rule-strong);padding-bottom:.7rem;
}
.cmp tbody tr{border-bottom:var(--rule-hair) solid var(--color-rule);}
.cmp tbody th{font-weight:500;color:var(--color-ink-2);width:26%;}
.cmp .is-us{background:var(--color-accent-soft);}
.cmp thead .is-us{color:var(--color-ink);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:-.02em;text-transform:none;}
.cmp thead .is-us em{font-style:normal;color:var(--color-accent);}
.cmp .yes{color:var(--color-accent);font-weight:600;}
.cmp .no{color:var(--color-ink-3);}
.cmp__note{margin-top:var(--space-md);font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.02em;color:var(--color-ink-3);}
.cmp__more{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);margin-top:var(--space-md);font-size:var(--text-sm);}
.cmp__more a{color:var(--color-accent);text-decoration:none;white-space:nowrap;transition:color var(--dur-short) var(--ease-out);}
.cmp__more a:hover{color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:3px;}

/* ── ruled step list + inverted panel diptych ──────────────── */
.how__grid{display:grid;gap:clamp(2rem,4.5vw,4rem);grid-template-columns:minmax(0,1fr);margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:62rem){.how__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);}}
.steps3{border-top:var(--rule-hair) solid var(--color-rule);}
.steps3 li{padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule);}
.steps3 h3{font-size:var(--text-xl);font-weight:600;}
.steps3 p{margin-top:.4rem;color:var(--color-ink-2);font-size:var(--text-sm);max-width:46ch;}

.machine{background:var(--color-paper-inv);color:var(--color-ink-inv);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.25rem);align-self:start;}
.machine h3{font-size:var(--text-md);font-weight:600;color:var(--color-ink-inv);letter-spacing:-.015em;}
.machine p{margin-top:.5rem;font-size:var(--text-sm);color:var(--color-ink-inv-2);max-width:44ch;}
.machine ol{margin-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule-inv);}
.machine li{display:flex;gap:.9rem;padding-block:.7rem;border-bottom:var(--rule-hair) solid var(--color-rule-inv);font-size:var(--text-sm);}
.machine li b{font-family:var(--font-mono);font-weight:500;color:var(--color-accent);flex:none;font-size:var(--text-xs);padding-top:.15rem;}
.machine li span{color:var(--color-ink-inv-2);min-width:0;}
.machine li span i{font-style:normal;color:var(--color-ink-inv);}
.machine li span a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.machine li span a:hover{color:var(--color-ink-inv);}

/* ── F4 · step sequence (the only numerals besides the stats) ─ */
.loop{display:grid;gap:var(--space-lg);grid-template-columns:minmax(0,1fr);margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:52rem){.loop{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}}
.loop li{position:relative;padding-top:var(--space-md);border-top:2px solid var(--color-rule-strong);}
@media (min-width:52rem){.loop li{padding-right:var(--space-lg);}}
.loop li.is-vetted{border-top-color:var(--color-accent);}
.loop b{display:block;font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.11em;color:var(--color-ink-3);}
.loop li.is-vetted b{color:var(--color-accent);}
.loop h3{margin-top:.5rem;font-size:var(--text-lg);font-weight:600;}
.loop p{margin-top:.45rem;color:var(--color-ink-2);font-size:var(--text-sm);max-width:40ch;}
.loop__out{margin-top:clamp(2rem,4vw,3rem);font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);letter-spacing:-.028em;line-height:1.14;max-width:30ch;}

/* ── two-column ruled propositions ────────────────────────── */
.props{display:grid;gap:0 clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);margin-top:clamp(2rem,4vw,3rem);border-top:var(--rule-hair) solid var(--color-rule);}
@media (min-width:52rem){.props{grid-template-columns:repeat(2,minmax(0,1fr));}}
.props li{padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule);}
.props h3{font-size:var(--text-lg);font-weight:600;}
.props h3::before{content:'→ ';color:var(--color-accent);}
.props p{margin-top:.4rem;color:var(--color-ink-2);font-size:var(--text-sm);max-width:44ch;}

/* ── FAQ — hairline, typographic ───────────────────────────── */
.faq{margin-top:clamp(1.5rem,3vw,2.5rem);border-top:var(--rule-hair) solid var(--color-rule);max-width:58rem;}
.faq details{border-bottom:var(--rule-hair) solid var(--color-rule);}
.faq summary{
  list-style:none;cursor:pointer;padding-block:var(--space-sm);
  display:flex;gap:var(--space-sm);align-items:baseline;justify-content:space-between;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-md);letter-spacing:-.018em;
  transition:color var(--dur-short) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--color-accent);}
.faq summary::after{content:'+';font-family:var(--font-mono);color:var(--color-accent);flex:none;font-size:var(--text-sm);}
.faq details[open] summary::after{content:'–';}
.faq__a{padding-bottom:var(--space-md);max-width:66ch;}
.faq__a p{color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.68;}
.faq__a p + p{margin-top:.7rem;}
.faq__a ul{margin-top:.7rem;display:grid;gap:.45rem;}
.faq__a li{color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.6;padding-left:1.1rem;position:relative;}
.faq__a li::before{content:'·';position:absolute;left:.3rem;color:var(--color-accent);}
.faq__a a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;}
.faq__a a:hover{color:var(--color-accent-deep);}
.faq__a em{font-style:italic;}
.faq__after{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-ink-2);}
.faq__after a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;}

/* ── closing CTA — inverted diptych ────────────────────────── */
.close{background:var(--color-paper-inv);color:var(--color-ink-inv);}
.close__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);align-items:center;}
@media (min-width:62rem){.close__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}}
.close h2{font-size:var(--text-display-s);font-weight:700;color:var(--color-ink-inv);}
.close h2 span{color:var(--color-accent);display:block;}
.close__say{margin-top:var(--space-sm);color:var(--color-ink-inv-2);font-size:var(--text-sm);max-width:36ch;}
.close__fine{margin-top:var(--space-md);font-size:var(--text-xs);color:var(--color-ink-inv-2);opacity:.75;}
.get{border-top:var(--rule-hair) solid var(--color-rule-inv);}
.get a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule-inv);
  text-decoration:none;transition:padding-left var(--dur-short) var(--ease-out),
                                   background-color var(--dur-short) var(--ease-out);
  padding-inline:.5rem;margin-inline:-.5rem;border-radius:var(--radius-sm);
}
.get a:hover{padding-left:1.1rem;background:var(--color-paper-inv-2);}
.get strong{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--color-ink-inv);letter-spacing:-.02em;white-space:nowrap;}
.get em{font-style:normal;color:var(--color-ink-inv-2);font-size:var(--text-sm);min-width:0;}
.get i{font-style:normal;color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-sm);flex:none;}

/* ── Ft5 · statement footer ────────────────────────────────── */
.foot{padding-block:clamp(3rem,6vw,5rem) var(--space-xl);}
.foot__say{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,5.4vw,3.4rem);letter-spacing:-.035em;line-height:1.02;max-width:16ch;}
.foot__say span{color:var(--color-accent);}
.foot__meta{
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center;
  justify-content:space-between;margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule);
  font-size:var(--text-xs);color:var(--color-ink-3);
}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--space-md);}
.foot__links a{text-decoration:none;white-space:nowrap;transition:color var(--dur-short) var(--ease-out);}
.foot__links a:hover{color:var(--color-accent);}

/* ── document pages — prose column (privacy, fixed) ────────── */
.doc{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem);}
.doc__head{max-width:40rem;}
.doc__head h1{font-size:var(--text-display-s);font-weight:700;}
.doc__meta{margin-top:var(--space-sm);font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-3);}
.doc__lede{margin-top:var(--space-md);font-size:var(--text-lg);line-height:1.45;color:var(--color-ink-2);max-width:40ch;}
.prose{max-width:66ch;margin-top:clamp(2rem,5vw,3.5rem);}
.prose h2{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule);font-size:var(--text-xl);font-weight:600;}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0;}
.prose h3{margin-top:var(--space-lg);font-size:var(--text-md);font-weight:600;}
.prose p{margin-top:.8rem;color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.72;}
.prose ul,.prose ol{margin-top:.8rem;display:grid;gap:.5rem;}
.prose li{color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.66;padding-left:1.15rem;position:relative;}
.prose li::before{content:'·';position:absolute;left:.3rem;color:var(--color-accent);}
.prose ol{counter-reset:p;}
.prose ol > li{counter-increment:p;}
.prose ol > li::before{content:counter(p) '.';font-family:var(--font-mono);font-size:var(--text-xs);left:0;color:var(--color-accent);}
.prose a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--color-accent-deep);}
.prose strong{color:var(--color-ink);}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--color-paper-2);padding:.1rem .3rem;border-radius:var(--radius-sm);}
.prose table{width:100%;border-collapse:collapse;margin-top:var(--space-md);font-size:var(--text-sm);}
.prose th,.prose td{text-align:left;padding:.7rem .6rem;border-bottom:var(--rule-hair) solid var(--color-rule);vertical-align:top;}
.prose th{font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.07em;text-transform:uppercase;color:var(--color-ink-3);}
.prose td{color:var(--color-ink-2);}
.prose blockquote{margin-top:var(--space-md);padding-left:var(--space-md);border-left:2px solid var(--color-accent);color:var(--color-ink-2);font-size:var(--text-sm);}
.prose hr{border:0;border-top:var(--rule-hair) solid var(--color-rule);margin-block:var(--space-lg);}

/* ── the fixed list (live data) ────────────────────────────── */
.feed{margin-top:clamp(2rem,5vw,3rem);border-top:var(--rule-hair) solid var(--color-rule);}
.feed__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
           padding-block:.85rem;border-bottom:var(--rule-hair) solid var(--color-rule);}
.feed__site{font-family:var(--font-mono);font-weight:500;font-size:var(--text-sm);min-width:0;overflow-wrap:anywhere;}
.feed__when{font-size:var(--text-xs);color:var(--color-ink-3);flex:none;white-space:nowrap;}
.feed__state{padding-block:var(--space-md);font-size:var(--text-sm);color:var(--color-ink-3);}
.stat2{display:grid;gap:var(--space-md) var(--space-lg);grid-template-columns:minmax(0,1fr);margin-top:clamp(2rem,4vw,2.5rem);}
@media (min-width:40rem){.stat2{grid-template-columns:repeat(3,minmax(0,1fr));}}
.stat2 div{border-top:2px solid var(--color-rule-strong);padding-top:var(--space-xs);}
.stat2 div:first-child{border-top-color:var(--color-accent);}
.stat2 dt{font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-3);}
.stat2 dd{margin-top:.3rem;font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}

/* ── breadcrumb (vs pages) ─────────────────────────────────── */
.crumb{font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.09em;
       text-transform:uppercase;color:var(--color-ink-3);display:flex;flex-wrap:wrap;gap:.5rem;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--color-accent);}
.crumb span{color:var(--color-rule-strong);}

/* ── verdict panel (vs pages) ─────────────────────────────── */
.verdict{margin-top:clamp(2rem,4vw,3rem);background:var(--color-paper-inv);color:var(--color-ink-inv);
         border-radius:var(--radius-lg);padding:clamp(1.5rem,3.5vw,2.5rem);}
.verdict h2{font-size:var(--text-xl);font-weight:600;color:var(--color-ink-inv);max-width:24ch;}
.verdict p{margin-top:.7rem;font-size:var(--text-sm);line-height:1.68;color:var(--color-ink-inv-2);max-width:62ch;}
.verdict strong{color:var(--color-ink-inv);}
.verdict .btn--fill{background:var(--color-accent);color:var(--color-accent-ink);margin-top:var(--space-md);}
.verdict .btn--fill:hover{background:var(--color-accent-deep);}

/* ── 404 ──────────────────────────────────────────────────── */
.lost{min-height:68vh;display:grid;align-content:center;padding-block:var(--space-3xl);}
.lost p.code{font-family:var(--font-mono);font-weight:500;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3);}
.lost h1{margin-top:var(--space-sm);font-size:var(--text-display-s);font-weight:700;max-width:18ch;}
.lost h1 span{color:var(--color-accent);}
.lost__say{margin-top:var(--space-md);color:var(--color-ink-2);font-size:var(--text-sm);max-width:44ch;}
.lost__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-lg);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;}
  html{scroll-behavior:auto;}
}

/* ── Explainer film · eigen band onder de hero ───────────────── */
.film{padding-block:var(--space-xl) var(--space-2xl);}
.film__figure{margin:var(--space-lg) 0 0;max-width:68rem;}
.film__v{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--color-paper-2);
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-lg);}
.film__cap{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-ink-3);}