html { color-scheme:light; }
:root {
  --sh:#e3e9ee; --bg:#f3f5f7; --surface:#ffffff; --ink:#051c2c; --muted:#4a5a68; --line:#d9e0e6;
  --red:#051c2c; --blue:#2251ff; --accent:#2251ff; --accent-soft:#e8edff; --tag:#00a9f4; --tag-ink:#051c2c;
  --nav-bg:#ffffff; --hero-bg:#051c2c; --hero-ink:#ffffff; --hero-muted:#b8c7d4;
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { overflow-x:clip; background:var(--bg); color:var(--ink); font:17px/1.6 var(--font-body); }
.wrap { width:100%; max-width:1120px; margin-inline:auto; padding-inline:16px; }
h1,h2,h3 { font-family:var(--font-display); text-wrap:balance; line-height:1.02; letter-spacing:-.02em; }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--tag); outline-offset:2px; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:12px; top:12px; background:var(--tag); color:var(--tag-ink); padding:8px 12px; z-index:50; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* hero */
.hero { background:var(--hero-bg); color:var(--hero-ink); overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; padding-block:56px 72px; }
.hero .eyebrow { color:var(--tag); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hero .eyebrow::before { content:""; width:28px; height:3px; background:var(--tag); }
.hero h1 { font-weight:800; margin-top:22px; line-height:.92; letter-spacing:-.045em; }
.hero h1 mark { display:inline-block; background:var(--tag); color:var(--tag-ink); font-size:clamp(3.6rem,12vw,8.4rem); padding:0 .12em; margin-inline:-.04em; transform:rotate(-1.6deg); }
.hero h1 .sub { display:block; margin-top:22px; font-size:clamp(1.5rem,3.6vw,2.6rem); letter-spacing:-.03em; line-height:1.05; }
.lead { margin-top:28px; font-size:1.2rem; max-width:34em; color:var(--hero-muted); }
.lead strong { color:var(--hero-ink); font-weight:600; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn { font:600 1rem var(--font-body); padding:14px 22px; border:2px solid transparent; text-decoration:none; cursor:pointer; display:inline-block; }
.btn-tag { background:var(--tag); color:var(--tag-ink); }
.btn-tag:hover { background:#fff; }
.btn-line { border-color:var(--hero-muted); color:var(--hero-ink); }
.btn-line:hover { border-color:#fff; }

.journal { background:var(--surface); color:var(--ink); padding:22px 22px 20px; position:relative; transform:rotate(1.4deg); box-shadow:10px 10px 0 rgba(0,0,0,.28); min-width:0; }
.journal-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:10px; }
.journal-head .eyebrow { color:var(--muted); }
.journal-price { margin-top:14px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.journal-price .big { font-family:var(--font-display); font-weight:800; font-size:2rem; letter-spacing:-.03em; }
.journal-price s { color:var(--muted); font-size:.95rem; text-decoration:none; }
.journal ol { list-style:none; margin:14px 0 0; padding:0; font-size:.92rem; }
.journal li { display:grid; grid-template-columns:3.6em minmax(0,1fr) auto; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); align-items:baseline; }
.journal li .t { color:var(--muted); font-size:.8rem; }
.journal li .v { font-weight:500; }
.journal li.live { background:var(--accent-soft); margin-inline:-8px; padding-inline:8px; }
.journal li.won { border-bottom:0; font-weight:600; }
.stamp { position:absolute; right:-14px; top:-22px; background:var(--tag); color:var(--tag-ink); font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1; padding:12px 14px; transform:rotate(8deg); letter-spacing:-.02em; text-align:center; }
.stamp small { display:block; font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.08em; margin-top:4px; }
.journal-foot { margin-top:12px; font-size:.78rem; color:var(--muted); }

/* nav */
.nav { position:sticky; top:0; z-index:20; background:var(--nav-bg); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:24px; overflow-x:auto; scrollbar-width:none; }
.nav .wrap::-webkit-scrollbar { display:none; }
.brand { font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.03em; padding-block:14px; white-space:nowrap; text-decoration:none; color:var(--ink); }
.brand span { background:var(--tag); color:var(--tag-ink); padding:0 5px; margin-left:2px; }
.nav a.l { color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:500; padding-block:14px; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px; }
.nav a.l:hover { color:var(--ink); border-bottom-color:var(--accent); }

/* tldr */
.tldr { background:var(--tag); color:var(--tag-ink); padding-block:56px; }
.tldr .eyebrow { display:inline-block; background:var(--tag-ink); color:var(--tag); padding:4px 10px; }
.oneliner { font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,4.2vw,3.1rem); line-height:1.08; letter-spacing:-.03em; margin-top:18px; max-width:24em; text-wrap:balance; }
.oneliner mark { background:var(--tag-ink); color:var(--tag); padding:0 .15em; }
.updated { margin-top:22px; font-size:.8rem; }

/* rules strip */
.rules { border-bottom:1px solid var(--line); background:var(--surface); }
.rules .wrap { padding-block:28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.rule { padding:4px 22px; border-left:1px solid var(--line); }
.rule:first-child { border-left:0; padding-left:0; }
.rule b { display:block; font-family:var(--font-display); font-weight:800; font-size:2.4rem; letter-spacing:-.04em; line-height:1; color:var(--accent); }
.rule span { display:block; margin-top:8px; font-size:.9rem; color:var(--muted); line-height:1.4; }

/* sections */
.block { padding-block:88px; }
.block.alt { background:var(--surface); border-block:1px solid var(--line); }
.sec-head { max-width:40em; margin-bottom:48px; }
.sec-head .eyebrow { color:var(--accent); }
.sec-head h2 { font-weight:800; font-size:clamp(2.2rem,5.5vw,4rem); margin-top:14px; }
.sec-head p:not(.eyebrow) { margin-top:18px; color:var(--muted); font-size:1.1rem; }
.sub-h { font-weight:800; font-size:1.6rem; margin:56px 0 18px; }

.cards { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.cards.three { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card { padding:24px; border:2px solid var(--ink); background:var(--surface); box-shadow:5px 5px 0 var(--sh); transition:transform .15s,box-shadow .15s; }
.card:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--tag); }
.card h4 { font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; margin-bottom:8px; }
.card p { color:var(--muted); font-size:.98rem; }
.alt .card { background:var(--bg); }
.bid-grid.two { display:block; max-width:40em; }

.bid-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 24px; }
.bid { border-top:6px solid var(--accent); padding-top:18px; }
.bid:nth-child(3n+2) { border-top-color:var(--tag); }
.bid:nth-child(3n) { border-top-color:var(--ink); }
.bid h3 { font-size:1.6rem; font-weight:800; margin-bottom:6px; }
.bid p { margin-top:12px; color:var(--muted); }
.plain { list-style:none; padding:0; display:grid; gap:12px; margin-top:12px; font-size:.97rem; color:var(--muted); }
.plain strong { color:var(--ink); font-weight:600; }
.links-wrap { background:var(--hero-bg); color:var(--hero-ink); }
.links-wrap .eyebrow { color:var(--tag); }
.links-wrap .plain { color:var(--hero-muted); }
.links-wrap a { color:#fff; }
.links-wrap .bid:nth-child(3n) { border-top-color:#fff; }

/* steps */
.steps { display:grid; }
.step { display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,.8fr); gap:32px; padding-block:36px; border-top:2px solid var(--ink); }
.step:last-child { border-bottom:2px solid var(--ink); }
.step .n { font-family:var(--font-display); font-weight:800; font-size:5.5rem; line-height:.8; letter-spacing:-.06em; color:var(--accent); }
.step h3 { font-size:1.9rem; font-weight:800; }
.step .body { margin-top:12px; color:var(--muted); max-width:36em; }
.do { background:var(--accent-soft); padding:16px 18px; align-self:start; min-width:0; }
.do .eyebrow { color:var(--accent); }
.do ul { margin:10px 0 0; padding-left:1.1em; font-size:.95rem; }
.do li + li { margin-top:6px; }

/* picker */
.scanner { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:start; }
.picks { border:0; padding:0; min-width:0; }
.sig { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px 16px; border:1px solid var(--line); margin-bottom:-1px; cursor:pointer; background:var(--bg); }
.sig:hover { border-color:var(--accent); position:relative; z-index:1; }
.sig input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent); cursor:pointer; }
.sig .txt b { display:block; font-weight:600; line-height:1.35; }
.sig .txt span { font-size:.85rem; color:var(--muted); display:block; margin-top:2px; }
.sig .w { font-size:.85rem; color:var(--accent); font-weight:500; }
.sig:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); position:relative; z-index:1; }
.verdict { position:sticky; top:84px; background:var(--ink); color:var(--bg); padding:26px; min-width:0; }
.verdict .eyebrow { color:var(--tag); }
.verdict .score { font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,7vw,5rem); line-height:.95; letter-spacing:-.05em; margin-top:12px; }
.verdict .msg { margin:12px 0 20px; font-size:.97rem; opacity:.88; }
.formats { margin-top:40px; max-width:46em; }

/* naps */
.naps { display:grid; border-top:2px solid var(--ink); }
.naps a { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 4px; border-bottom:2px solid var(--ink); text-decoration:none; color:var(--ink); transition:padding .15s,background .15s; }
.naps a:hover { background:var(--tag); color:var(--tag-ink); padding-inline:16px; }
.naps b { font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:-.03em; }
.naps span { font-family:var(--font-mono); font-size:.85rem; }
.note { margin-top:20px; color:var(--muted); font-size:.95rem; }

/* timeline */
.tl { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.tl li { position:relative; padding:18px 18px 0 0; border-top:3px solid var(--line); font-size:.93rem; color:var(--muted); }
.tl li::before { content:""; position:absolute; top:-9px; left:0; width:15px; height:15px; background:var(--accent); }
.tl li:last-child::before { background:var(--tag); outline:2px solid var(--ink); }
.tl li b { display:block; color:var(--ink); font-weight:600; font-size:1.05rem; margin-bottom:4px; }
.tl li .mono { display:block; color:var(--accent); font-size:.8rem; margin-bottom:4px; }

/* faq */
.faq { max-width:46em; }
details { border-top:2px solid var(--ink); padding:18px 0; }
details:last-child { border-bottom:2px solid var(--ink); }
summary { cursor:pointer; font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-family:var(--font-mono); color:var(--accent); }
details[open] summary::after { content:"−"; }
details p { margin-top:10px; color:var(--muted); max-width:38em; }
dl { max-width:46em; }
dt { font-weight:600; margin-top:14px; }
dd { margin:2px 0 0; color:var(--muted); }

.foot { border-top:1px solid var(--line); padding:32px 0 48px; color:var(--muted); font-size:.9rem; }
.foot p + p { margin-top:6px; }

@media (max-width:860px) {
  .hero .wrap { grid-template-columns:minmax(0,1fr); gap:40px; padding-block:40px 56px; }
  .journal { transform:rotate(.8deg); margin-right:10px; }
  .rules .wrap { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; }
  .rule:nth-child(3) { border-left:0; padding-left:0; }
  .block { padding-block:56px; }
  .bid-grid, .scanner, .tl { grid-template-columns:minmax(0,1fr); }
  .step { grid-template-columns:70px minmax(0,1fr); gap:16px; }
  .step .do { grid-column:2; }
  .step .n { font-size:3.5rem; }
  .tl { gap:24px; }
  .verdict { position:static; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* tactile buttons and ticket */
.btn { transition:transform .12s,box-shadow .12s,background .15s; box-shadow:4px 4px 0 rgba(0,0,0,.35); }
.btn:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.35); }
.btn:active { transform:translate(4px,4px); box-shadow:none; }
.verdict { box-shadow:10px 10px 0 var(--accent); }

/* ticker */
.ticker { overflow:hidden; background:var(--ink); color:var(--bg); border-block:2px solid var(--ink); }
.ticker .track { display:flex; width:max-content; animation:ticker 28s linear infinite; }
.ticker span { font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; padding:12px 28px; white-space:nowrap; }
.ticker span::after { content:"✦"; color:var(--tag); margin-left:56px; }
.ticker:hover .track { animation-play-state:paused; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* entrance animations */
@keyframes hero-rise { from { opacity:0; translate:0 28px; } }
@keyframes mark-pop { from { transform:rotate(-6deg) scale(.85); opacity:0; } }
@keyframes stamp-in { from { transform:rotate(-12deg) scale(1.8); opacity:0; } }
.hero .eyebrow, .hero h1 .sub, .hero .lead, .hero .cta-row, .hero .journal { animation:hero-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 .sub { animation-delay:.9s; }
.hero .lead { animation-delay:.2s; }
.hero .cta-row { animation-delay:.3s; }
.hero .journal { animation-delay:.4s; }
.hero h1 mark { animation:mark-pop .6s .2s cubic-bezier(.3,1.6,.5,1) both; }
.stamp { animation:stamp-in .5s 1s cubic-bezier(.3,1.6,.5,1) both; }
.journal li.cur { background:var(--accent-soft); margin-inline:-8px; padding-inline:8px; transition:background .3s; }
.journal li { transition:background .3s; }

/* scroll reveal (class added by JS) */
.js-reveal .reveal { opacity:0; translate:0 32px; transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay,0ms); }
.js-reveal .reveal.in { opacity:1; translate:0 0; }

/* parallax blobs */
.hero { position:relative; isolation:isolate; }
.hero::before, .hero::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; will-change:transform; }
.hero::before { width:38rem; height:38rem; right:-10rem; top:-14rem; background:radial-gradient(circle,rgba(0,169,244,.24),transparent 65%); transform:translateY(calc(var(--scroll-y,0)*.35px)); }
.hero::after { width:28rem; height:28rem; left:-8rem; bottom:-12rem; background:radial-gradient(circle,rgba(34,81,255,.28),transparent 65%); transform:translateY(calc(var(--scroll-y,0)*-.2px)); }
.step .n { transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
.step:hover .n { transform:translateX(8px) rotate(-4deg); }

@media (prefers-reduced-motion:reduce) {
  .ticker .track, .hero .eyebrow, .hero h1 .sub, .hero .lead, .hero .cta-row, .hero .journal, .hero h1 mark, .stamp { animation:none; }
  .js-reveal .reveal { opacity:1; translate:none; transition:none; }
  .hero::before, .hero::after { transform:none; }
}

.hero .wrap > *, .step > * { min-width:0; }
.oneliner, .hero .lead { overflow-wrap:break-word; }

/* more motion */
.progress { position:fixed; inset:0 0 auto; height:4px; background:var(--tag); transform-origin:left; transform:scaleX(var(--prog,0)); z-index:60; }
.route { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.route path { fill:none; stroke:var(--tag); stroke-opacity:.28; stroke-width:4; stroke-linecap:round; stroke-dasharray:10 14; animation:dash 2.4s linear infinite; }
.route .stop { fill:var(--hero-bg); stroke:var(--tag); stroke-width:4; stroke-opacity:.7; }
.route .rider { fill:var(--tag); offset-path:path("M-20 520 C 160 520, 200 380, 380 380 S 560 520, 720 440 S 900 200, 1060 240 S 1180 120, 1240 60"); offset-rotate:0deg; animation:ride 9s ease-in-out infinite; }
@keyframes dash { to { stroke-dashoffset:-48; } }
@keyframes ride { from { offset-distance:0%; } to { offset-distance:100%; } }

.par { min-width:0; }
.hero h1 mark { transition:transform .25s cubic-bezier(.3,1.6,.5,1); }
.hero h1 mark:hover { transform:rotate(1deg) scale(1.04); }
@media (hover:hover) and (min-width:861px) {
  .journal { transform:perspective(900px) rotate(1.4deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .12s ease-out; }
}

.tldr, .links-wrap { position:relative; overflow:hidden; }
.tldr .wrap, .links-wrap .wrap { position:relative; z-index:1; }
.shape { position:absolute; display:block; pointer-events:none; z-index:0; }
.shape.sq { width:90px; height:90px; background:var(--tag-ink); opacity:.1; right:8%; top:14%; animation:spin 22s linear infinite; }
.shape.ring { width:150px; height:150px; border:14px solid var(--tag-ink); border-radius:50%; opacity:.12; right:22%; bottom:-40px; animation:bob 7s ease-in-out infinite; }
.shape.dot { width:34px; height:34px; border-radius:50%; background:var(--tag-ink); opacity:.18; right:4%; bottom:22%; animation:bob 5s ease-in-out infinite reverse; }
.links-wrap .shape { background:#fff; border-color:#fff; }
.links-wrap .shape.sq { left:6%; right:auto; top:10%; }
.links-wrap .shape.ring { right:6%; top:8%; bottom:auto; }
@keyframes spin { to { rotate:360deg; } }
@keyframes bob { 50% { margin-top:-22px; } }

.js-reveal .oneliner mark { background:linear-gradient(var(--tag-ink),var(--tag-ink)) left/0% 100% no-repeat; color:var(--tag-ink); transition:background-size .9s .5s cubic-bezier(.2,.7,.2,1),color .3s .8s; }
.js-reveal .oneliner.in mark { background-size:100% 100%; color:var(--tag); }
.js-reveal .tl li::before { scale:0; transition:scale .45s .3s cubic-bezier(.3,1.6,.5,1); }
.js-reveal .tl li.in::before { scale:1; }
.js-reveal .step .n { clip-path:inset(0 0 100% 0); transition:clip-path .7s .15s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.3,1.6,.5,1); }
.js-reveal .step.in .n { clip-path:inset(0 0 0 0); }
.naps a b { transition:transform .2s; }
.naps a:hover b { transform:translateX(6px); }
.rule b { display:inline-block; }

@media (prefers-reduced-motion:reduce) {
  .route path, .route .rider, .shape, .progress { animation:none; }
  .js-reveal .oneliner mark { background-size:100% 100%; color:var(--tag); transition:none; }
  .js-reveal .tl li::before { scale:1; transition:none; }
  .js-reveal .step .n { clip-path:none; transition:none; }
}

/* dictionary */
.dq { font:500 1rem var(--font-mono); width:100%; max-width:420px; padding:12px 14px; background:var(--surface); color:var(--ink); border:2px solid var(--ink); border-radius:0; margin-bottom:28px; }
.dq:focus { outline:3px solid var(--tag); outline-offset:0; }
.dict { max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.entry { border-top:2px solid var(--ink); padding:16px 0 18px; }
.entry[hidden] { display:none; }
.entry dt { margin:0; font-family:var(--font-display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; scroll-margin-top:80px; }
.entry dt a { color:var(--ink); text-decoration-color:var(--tag); text-decoration-thickness:3px; }
.entry dt a:hover { color:var(--accent); }
.entry dd { margin:4px 0 0; color:var(--muted); font-size:.97rem; }
.entry dt:target { background:var(--tag); color:var(--tag-ink); display:inline-block; padding:0 6px; }
@media (max-width:860px) { .dict { grid-template-columns:minmax(0,1fr); } }

/* primary colour accents */
.links-wrap { background-color:var(--blue); --hero-ink:#f7f3ea; --hero-muted:#c3cde0; }
.links-wrap .bid { border-top-color:var(--red); }
.links-wrap .bid:nth-child(3n+2) { border-top-color:var(--tag); }
.links-wrap .bid:nth-child(3n) { border-top-color:#fff; }
.bid:nth-child(3n) { border-top-color:var(--red); }
.step:nth-child(2) .n { color:var(--red); }
.step:nth-child(3) .n { color:#4cc9a0; }
.step:nth-child(4) .n { color:#ffb347; }
.brand span { box-shadow:2px 2px 0 var(--ink); }
.card { border-radius:6px; }
.card:nth-child(4n+1) { border-top:4px solid var(--red); }
.card:nth-child(4n+2) { border-top:4px solid var(--tag); }
.card:nth-child(4n+3) { border-top:4px solid var(--blue); }
.card:nth-child(4n+4) { border-top:4px solid #9be8c4; }
.btn { border-radius:6px; }

/* calm, washi-paper feel */
.hero h1 mark { transform:none; }
.hero h1 mark:hover { transform:scale(1.02); }
.journal { transform:rotate(.6deg); box-shadow:8px 8px 0 rgba(0,0,0,.30); }
@media (hover:hover) and (min-width:861px) { .journal { transform:perspective(900px) rotate(.6deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); } }
.stamp { background:var(--red); color:#fbf8f1; border-radius:4px; }
.btn { box-shadow:none; }
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.15); }
.btn:active { transform:none; box-shadow:none; }
.btn-tag:hover { background:#fbf8f1; }
.card { border-width:1px; border-color:var(--line); box-shadow:0 1px 0 var(--line); }
.card:hover { box-shadow:0 10px 24px rgba(34,37,43,.10); border-color:var(--line); }
.verdict { box-shadow:none; }
.oneliner mark { background:var(--ink); color:var(--tag); }

/* no horizontal scroll: wrap everything */
html { max-width:100%; }
body { overflow-wrap:break-word; }
img, svg, video { max-width:100%; }
.journal li { grid-template-columns:3.4em minmax(0,1fr) minmax(0,auto); }
.journal li .t:last-child { text-align:right; }
.indep { color:var(--ink); max-width:46em; }
.foot p + p { margin-top:8px; }
@media (max-width:860px) {
  .nav { position:static; }
  .nav .wrap { flex-wrap:wrap; overflow-x:visible; gap:0 16px; padding-block:8px; }
  .brand { width:100%; padding-block:6px; }
  .nav a.l { padding-block:6px; }
}
@media (max-width:480px) {
  .journal { padding:18px 16px 16px; margin-right:0; }
  .naps a { flex-wrap:wrap; }
  .stamp { right:-6px; }
}

/* softer, light hero */
.hero .eyebrow { color:var(--accent); }
.hero .eyebrow::before { background:var(--accent); }
.hero .btn-line:hover { border-color:var(--ink); }
.btn-line { border-color:var(--hero-muted); }
.route path { stroke:var(--accent); stroke-opacity:.25; }
.route .stop { stroke:var(--accent); stroke-opacity:.5; }
.route .rider { fill:var(--accent); }
.ticker { background:#38443e; border-color:#38443e; }
.hero .btn-tag:hover { background:#fff; }
.hero h1 .sub { color:var(--ink); }

/* navy hero with amber accents */
.hero .eyebrow { color:var(--tag); }
.hero .eyebrow::before { background:var(--tag); }
.hero .btn-line:hover { border-color:#fff; }
.hero h1 .sub { color:var(--hero-ink); }
.route path { stroke:var(--tag); stroke-opacity:.35; }
.route .stop { stroke:var(--tag); stroke-opacity:.75; }
.route .rider { fill:var(--tag); }
.ticker { background:#0e1730; border-color:#0e1730; }
.btn-tag:hover { background:#ffd27a; }
.hero .btn-tag:hover { background:#ffd27a; }
.oneliner mark { background:var(--ink); color:var(--tag); }

/* bright pastel palette: blue, mint, pink, coral, orange */
.hero .eyebrow { color:var(--ink); }
.hero .eyebrow::before { background:var(--ink); }
.hero .btn-line { border-color:var(--ink); color:var(--ink); }
.hero .btn-line:hover { background:rgba(34,81,255,.28); border-color:var(--ink); }
.hero .btn-tag:hover, .btn-tag:hover { background:#fff; }
.route path { stroke:#fff; stroke-opacity:.6; }
.route .stop { stroke:#fff; stroke-opacity:.9; }
.route .rider { fill:var(--tag); }
.stamp { background:var(--red); color:var(--ink); }
.ticker { background:var(--ink); border-color:var(--ink); }
.tldr { background:#FF96C5; }
.oneliner mark { background:var(--ink); color:#FF96C5; }
.tldr .eyebrow { color:#FF96C5; }
.links-wrap { background-color:#8DD7BF; --hero-ink:#10202e; --hero-muted:#1b4a43; color:#10202e; }
.links-wrap a { color:#10202e; text-decoration-color:#10202e; }
.links-wrap .eyebrow { color:#10202e; }
.links-wrap .plain { color:#1b4a43; }
.links-wrap .bid { border-top-color:#10202e; }
.links-wrap .bid:nth-child(3n+2) { border-top-color:#FF96C5; }
.links-wrap .bid:nth-child(3n) { border-top-color:var(--red); }
.links-wrap .shape { background:#fff; border-color:#fff; opacity:.35; }
.verdict .btn-tag { color:var(--ink); }
.links-wrap .shape.sq { top:auto; bottom:8%; left:auto; right:30%; }

/* slate, terracotta, sage and sand */
.hero .eyebrow { color:var(--tag); }
.hero .eyebrow::before { background:var(--tag); }
.hero .btn-line { border-color:var(--hero-muted); color:var(--hero-ink); }
.hero .btn-line:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.route path { stroke:var(--tag); stroke-opacity:.35; }
.route .stop { stroke:var(--tag); stroke-opacity:.75; }
.route .rider { fill:var(--tag); }
.stamp { background:var(--red); color:var(--ink); }
.tldr { background:#f2cc8f; }
.oneliner mark { background:var(--ink); color:#f2cc8f; }
.tldr .eyebrow { color:#f2cc8f; }
.links-wrap { background-color:#81b29a; --hero-ink:#2b2d42; --hero-muted:#243b33; color:#2b2d42; }
.links-wrap a { color:#2b2d42; text-decoration-color:#2b2d42; }
.links-wrap .eyebrow { color:#2b2d42; }
.links-wrap .plain { color:#243b33; }
.links-wrap .bid { border-top-color:#2b2d42; }
.links-wrap .bid:nth-child(3n+2) { border-top-color:#f2cc8f; }
.links-wrap .bid:nth-child(3n) { border-top-color:#e07a5f; }
.links-wrap .shape { opacity:.25; }
.links-wrap .shape.sq { right:auto; left:2%; bottom:4%; width:60px; height:60px; }

/* bright pastels: lavender, butter, peach, mint, pink, sky */
.hero .eyebrow { color:var(--ink); }
.hero .eyebrow::before { background:var(--ink); }
.hero .btn-line { border-color:var(--ink); color:var(--ink); }
.hero .btn-line:hover { background:rgba(255,255,255,.4); border-color:var(--ink); }
.route path { stroke:#fff; stroke-opacity:.75; }
.route .stop { stroke:#fff; stroke-opacity:1; }
.route .rider { fill:var(--tag); }
.stamp { background:var(--red); color:var(--ink); }
.tldr { background:#ffcfb0; }
.oneliner mark { background:var(--ink); color:#ffcfb0; }
.tldr .eyebrow { color:#ffcfb0; }
.step:nth-child(1) .n { color:#7a5cf0; }
.step:nth-child(2) .n { color:#ff8fa3; }
.links-wrap { background-color:#b4f0d1; --hero-ink:#1f1b3a; --hero-muted:#1f4d3d; color:#1f1b3a; }
.links-wrap a { color:#1f1b3a; text-decoration-color:#1f1b3a; }
.links-wrap .eyebrow { color:#1f1b3a; }
.links-wrap .plain { color:#1f4d3d; }
.links-wrap .bid { border-top-color:#1f1b3a; }
.links-wrap .bid:nth-child(3n+2) { border-top-color:#ffe66d; }
.links-wrap .bid:nth-child(3n) { border-top-color:#ff8fa3; }
.links-wrap .shape { opacity:.5; }
.ticker { background:var(--ink); border-color:var(--ink); }

/* serious: navy, steel and brass with serif headings */
h1,h2,h3 { line-height:1.1; letter-spacing:-.01em; }
.hero h1 { line-height:1; letter-spacing:-.02em; }
.hero h1 mark { font-weight:700; }
.oneliner { letter-spacing:-.01em; line-height:1.2; font-weight:700; }
.hero .eyebrow { color:var(--tag); }
.hero .eyebrow::before { background:var(--tag); }
.hero .btn-line { border-color:var(--hero-muted); color:var(--hero-ink); }
.hero .btn-line:hover { background:rgba(255,255,255,.08); border-color:#fff; }
.route path { stroke:var(--tag); stroke-opacity:.30; }
.route .stop { stroke:var(--tag); stroke-opacity:.7; }
.route .rider { fill:var(--tag); }
.journal, .stamp { transform:none; }
@media (hover:hover) and (min-width:861px) { .journal { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); } }
.stamp { background:var(--tag); color:var(--ink); border-radius:2px; }
.tldr { background:#e3e9f1; }
.oneliner mark { background:var(--ink); color:#e3e9f1; }
.tldr .eyebrow { color:var(--tag); }
.tldr .shape { opacity:.06; }
.step:nth-child(1) .n { color:#1f4e8c; }
.step:nth-child(2) .n { color:#3b6ea5; }
.step:nth-child(3) .n { color:#6b86ab; }
.step:nth-child(4) .n { color:#b08d3c; }
.card:nth-child(4n+1) { border-top-color:#0a2342; }
.card:nth-child(4n+2) { border-top-color:#c9a54a; }
.card:nth-child(4n+3) { border-top-color:#3b6ea5; }
.card:nth-child(4n+4) { border-top-color:#8497b0; }
.links-wrap { background-color:#12305a; --hero-ink:#f4f6f9; --hero-muted:#c3cfe0; color:#f4f6f9; }
.links-wrap a { color:#fff; text-decoration-color:#c9a54a; }
.links-wrap .eyebrow { color:var(--tag); }
.links-wrap .plain { color:#c3cfe0; }
.links-wrap .bid { border-top-color:#c9a54a; }
.links-wrap .bid:nth-child(3n+2) { border-top-color:#8497b0; }
.links-wrap .bid:nth-child(3n) { border-top-color:#fff; }
.links-wrap .shape { background:#fff; border-color:#fff; opacity:.08; }
.ticker { background:var(--ink); border-color:var(--ink); }

/* sans-serif, deep blue with electric blue and cyan */
h1,h2,h3 { line-height:1.08; letter-spacing:-.025em; }
.hero h1 { line-height:1; letter-spacing:-.035em; }
.hero h1 mark { font-weight:800; letter-spacing:-.04em; }
.hero h1 .sub { font-weight:600; letter-spacing:-.02em; }
.oneliner { font-weight:600; letter-spacing:-.02em; line-height:1.25; }
body { font-size:17px; line-height:1.65; }
.tldr { background:#2251ff; color:#fff; }
.oneliner mark { background:#fff; color:#2251ff; padding:0 .15em; }
.tldr .eyebrow { background:#fff; color:#2251ff; }
.tldr .updated { color:#dfe6ff; }
.tldr .shape { background:#fff; border-color:#fff; opacity:.10; }
.stamp { background:var(--tag); color:var(--ink); }
.step:nth-child(1) .n { color:#2251ff; }
.step:nth-child(2) .n { color:#00a9f4; }
.step:nth-child(3) .n { color:#051c2c; }
.step:nth-child(4) .n { color:#6f8aa3; }
.card:nth-child(4n+1) { border-top-color:#051c2c; }
.card:nth-child(4n+2) { border-top-color:#00a9f4; }
.card:nth-child(4n+3) { border-top-color:#2251ff; }
.card:nth-child(4n+4) { border-top-color:#8ea3b5; }
.links-wrap { background-color:#051c2c; --hero-ink:#fff; --hero-muted:#b8c7d4; color:#fff; }
.links-wrap a { color:#fff; text-decoration-color:#00a9f4; }
.links-wrap .eyebrow { color:#00a9f4; }
.links-wrap .plain { color:#b8c7d4; }
.links-wrap .bid { border-top-color:#2251ff; }
.links-wrap .bid:nth-child(3n+2) { border-top-color:#00a9f4; }
.links-wrap .bid:nth-child(3n) { border-top-color:#fff; }
.links-wrap .shape { opacity:.07; }
.ticker { background:#051c2c; border-color:#051c2c; }
.btn-tag:hover, .hero .btn-tag:hover { background:#fff; }

/* guide pages */
.nav a.l.on { color:var(--ink); border-bottom-color:var(--accent); }
.page-hero { background:var(--hero-bg); color:var(--hero-ink); padding:56px 0 64px; position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; width:34rem; height:34rem; right:-10rem; top:-16rem; border-radius:50%; background:radial-gradient(circle,rgba(0,169,244,.24),transparent 65%); pointer-events:none; }
.page-hero .wrap { position:relative; }
.page-hero .eyebrow { color:var(--tag); display:flex; gap:10px; align-items:center; margin-top:22px; }
.page-hero .eyebrow::before { content:""; width:28px; height:3px; background:var(--tag); }
.page-hero h1 { font-size:clamp(2.2rem,5.5vw,3.8rem); font-weight:800; margin-top:14px; max-width:20em; }
.page-hero .lede { margin-top:18px; max-width:38em; font-size:1.2rem; color:var(--hero-muted); }
.crumbs { font-size:.9rem; color:var(--hero-muted); }
.crumbs a { color:var(--hero-ink); }
.article { max-width:780px; padding-block:48px 24px; }
.article section { margin-bottom:8px; }
.article h2 { font-size:clamp(1.4rem,3vw,1.9rem); font-weight:700; margin:40px 0 12px; }
.article p { color:var(--ink); margin:0 0 14px; max-width:42em; }
.article ul, .article ol { margin:0 0 16px; padding-left:1.3em; max-width:42em; }
.article li { margin-bottom:8px; }
.article .faq { margin-top:4px; }
.article .related { margin-top:56px; }
.article .cards { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.foot-links { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.foot-links a { color:var(--muted); font-size:.9rem; }
a.card { text-decoration:none; color:var(--ink); display:block; }
a.card h4 { color:var(--ink); }
a.card p { color:var(--muted); }
a.card:hover h4 { color:var(--accent); }
.article .cards { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.tbl-wrap { margin:0 0 18px; }
.tbl-wrap table { width:100%; border-collapse:collapse; font-size:.95rem; table-layout:fixed; }
.tbl-wrap th, .tbl-wrap td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.tbl-wrap thead th { border-bottom:2px solid var(--ink); font-family:var(--font-display); }
.tbl-wrap tbody th { font-weight:600; width:26%; }
@media (max-width:560px) { .tbl-wrap table { font-size:.85rem; } .tbl-wrap th, .tbl-wrap td { padding:8px 6px; } }