/* Bikoosh site v2: tokens, base and components (run 273, BLOCK 2026-11-02-EDEN).
   Linked only by pages that opt in (v2_page in the template context; today the
   home page). Those pages do NOT inline the older style.css, so the global
   element styles below never reach an older product page. The header and
   footer live in site-v2-chrome.css, which every page inlines. */

/* self-hosted faces (variable fonts, latin subset) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/static/fonts/v2-bricolage.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/static/fonts/albert-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/static/fonts/v2-jetbrains-mono.woff2") format("woff2")}
/* metric-matched local fallbacks, so the swap moves nothing (CLS): size-adjust
   from the faces' average widths, ascent/descent from their tables / size-adjust */
@font-face{font-family:"Bricolage-fb";src:local("Arial Bold"),local("Liberation Sans Bold"),local("Arial"),local("Liberation Sans");
  size-adjust:110%;ascent-override:84.5%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:"Albert-fb";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Roboto");
  size-adjust:104.3%;ascent-override:91.1%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Mono-fb";src:local("Courier New"),local("Liberation Mono"),local("Courier");
  size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}

/* ===== tokens (dark, single theme by design) ===== */
:root{
  color-scheme: dark;
  --ink: oklch(14% 0.03 286);
  --ink-1: oklch(18% 0.036 287);
  --ink-2: oklch(22% 0.042 288);
  --ink-3: oklch(28% 0.05 289);
  --paper: oklch(95% 0.014 85);
  --muted: oklch(80% 0.02 85);
  --faint: oklch(64% 0.025 286);
  --line: oklch(95% 0.014 85 / 0.10);
  --line-2: oklch(95% 0.014 85 / 0.18);
  --beam: oklch(84% 0.145 80);
  --beam-deep: oklch(72% 0.16 62);
  --glint: oklch(80% 0.10 205);
  --stamp: oklch(68% 0.19 27);
  --verified: oklch(78% 0.15 152);
  --violet: oklch(70% 0.15 295);
  --rose: oklch(74% 0.14 350);
  --radius: 22px;
  --radius-s: 14px;
  --font-display: "Bricolage Grotesque", "Bricolage-fb", "Albert Sans", system-ui, sans-serif;
  --font-body: "Albert Sans", "Albert-fb", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Mono-fb", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--ink);z-index:60}
main{display:block}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1200px;margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--beam);margin:0 0 18px;display:flex;align-items:center;gap:10px}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);line-height:1.02;font-weight:800}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--muted);max-width:56ch;margin:18px 0 0}
section{position:relative}
.band{padding-block:clamp(72px,9vw,140px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:1rem;line-height:1;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-beam{background:var(--beam);color:oklch(18% 0.04 60);box-shadow:0 0 0 0 oklch(84% 0.145 80 / .5),0 10px 40px -10px oklch(84% 0.145 80 / .7)}
.btn-beam:hover{box-shadow:0 0 0 6px oklch(84% 0.145 80 / .16),0 14px 50px -10px oklch(84% 0.145 80 / .9)}
.btn-ghost{border:1px solid var(--line-2);color:var(--paper)}
.btn-ghost:hover{background:var(--ink-2)}
.btn-s{padding:10px 16px;font-size:.92rem}

/* ===== hero: the searchlight ===== */
.hero{min-height:min(92vh,880px);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-block:60px 90px}
/* the sky is a photo-illustration (lighthouse above a city); the beam starts at its lamp.
   --px/--py = object-position of the photo, --lamp-x/--lamp-y = lamp position inside the photo (0..1),
   --c/--amp = centre and amplitude of the sweep in degrees (0 = up, -90 = left). JS sets --lx/--ly in px. */
.sky{position:absolute;inset:0;z-index:-1;background:oklch(12% 0.03 286);--px:.72;--py:.42;--c:-95;--amp:58}
.sky-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--px) * 100%) calc(var(--py) * 100%)}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,oklch(12% 0.03 286 / .9) 0%,oklch(12% 0.03 286 / .66) 34%,oklch(12% 0.03 286 / 0) 60%),linear-gradient(0deg,var(--ink) 0%,oklch(14% 0.03 286 / 0) 24%)}
.beam{position:absolute;left:var(--lx,80%);top:var(--ly,30%);width:2400px;height:2400px;transform:translate(-50%,-50%) rotate(var(--a,0deg));pointer-events:none;
  background:
   conic-gradient(from -7deg, transparent 0deg, oklch(92% 0.12 85 / .62) 7deg, transparent 14deg, transparent 360deg),
   conic-gradient(from -2deg, transparent 0deg, oklch(97% 0.06 90 / .7) 2deg, transparent 4deg, transparent 360deg),
   conic-gradient(from -24deg, transparent 0deg, oklch(84% 0.145 80 / .2) 24deg, transparent 48deg, transparent 360deg);
  mask-image:radial-gradient(circle at 50% 50%, #000 0, #000 14%, transparent 56%);-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0, #000 14%, transparent 56%);mix-blend-mode:screen;filter:blur(1.5px)}
.horizon{position:absolute;left:var(--lx,80%);top:var(--ly,30%);width:560px;height:560px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,oklch(84% 0.145 80 / .26),transparent);pointer-events:none;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
.lamp{position:absolute;left:var(--lx,80%);top:var(--ly,30%);width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:oklch(97% 0.06 90);box-shadow:0 0 18px 8px oklch(84% 0.145 80 / .7),0 0 70px 26px oklch(84% 0.145 80 / .3)}
.ping{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.ping i{display:block;width:10px;height:10px;border-radius:50%;background:var(--paper);opacity:.35;transition:opacity .4s,transform .4s,background .4s;box-shadow:0 0 0 0 transparent}
.ping .tag{position:absolute;left:16px;top:50%;transform:translate(0,-50%) translateX(-6px);opacity:0;white-space:nowrap;padding:8px 12px;border-radius:12px;background:oklch(20% 0.04 287 / .82);border:1px solid var(--line-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.84rem;transition:opacity .5s,transform .5s;display:flex;gap:8px;align-items:center;pointer-events:none}
.ping .tag time{font-family:var(--font-mono);font-size:.72rem;color:var(--faint)}
.ping.left .tag{left:auto;right:16px;transform:translate(0,-50%) translateX(6px)}
.ping.lit i{opacity:1;background:var(--beam);transform:scale(1.4);box-shadow:0 0 22px 6px oklch(84% 0.145 80 / .7)}
.ping.lit .tag{opacity:1;transform:translate(0,-50%)}
.ping.off{display:none}
.hero-inner{width:100%}
.hero-copy{max-width:640px}
.hero h1{font-size:clamp(3rem,1.8rem + 6vw,6.6rem);line-height:.92;font-weight:800;letter-spacing:-.045em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--beam),oklch(90% 0.1 95) 45%,var(--glint));-webkit-background-clip:text;background-clip:text;color:transparent}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--verified);box-shadow:0 0 0 0 oklch(78% 0.15 152 / .7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(78% 0.15 152 / .6)}70%{box-shadow:0 0 0 10px oklch(78% 0.15 152 / 0)}100%{box-shadow:0 0 0 0 oklch(78% 0.15 152 / 0)}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-stats{display:flex;gap:clamp(18px,4vw,44px);margin:48px 0 0;flex-wrap:wrap}
.hero-stats div{display:grid;gap:2px}
.hero-stats dt{font-size:.8rem;color:var(--faint);order:2;max-width:19ch;line-height:1.35;margin-top:4px}
.hero-stats dd{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-stats dd small{font-size:.55em;color:var(--muted);font-weight:500;margin-left:2px}
@media (max-width:860px){
  .hero{min-height:0;padding-block:36px 300px;align-items:flex-start}
  .sky{inset:auto 0 0 0;height:340px;background:transparent;--px:.86;--py:.4;--c:-62;--amp:36}
  .scrim{background:linear-gradient(180deg,var(--ink) 0%,oklch(14% 0.03 286 / 0) 38%),linear-gradient(0deg,var(--ink) 0%,oklch(14% 0.03 286 / 0) 22%)}
  #pings{display:none}
  .hide-m{display:none}
  .cta-row{margin-top:26px;gap:10px}
  .cta-row .btn{padding:13px 16px;font-size:.95rem}
  .cta-row .btn span{display:none}
  .hero h1{font-size:clamp(3.1rem,13vw,4.4rem)}
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:36px}
  .hero-stats dt{font-size:.72rem;line-height:1.3}
}

/* ===== ticker ===== */
.ticker{border-block:1px solid var(--line);background:var(--ink-1);overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-1),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--ink-1),transparent)}
.ticker-track{display:flex;gap:10px;width:max-content;padding:14px 0;min-height:68px;align-items:center}
.js .ticker-track.dup{animation:marquee 70s linear infinite}
html:not(.js) .ticker{overflow-x:auto}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);font-size:.92rem;white-space:nowrap;transition:border-color .2s}
.tick:hover{border-color:var(--line-2)}
.tick time{font-family:var(--font-mono);font-size:.72rem;color:var(--faint)}
.tick .d{color:var(--muted)}
.st{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;line-height:1}
.st.open{background:oklch(78% 0.15 152 / .16);color:var(--verified)}
.st.closed{background:oklch(68% 0.19 27 / .16);color:var(--stamp)}
.st.not-yet,.st.soon{background:oklch(84% 0.145 80 / .16);color:var(--beam)}
.st.changed{background:oklch(80% 0.10 205 / .16);color:var(--glint)}

/* ===== trackers bento ===== */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 30px}
.filters button{font:inherit;font-size:.9rem;font-weight:500;color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:9px 15px;cursor:pointer;transition:all .2s}
.filters button:hover{color:var(--paper);border-color:var(--paper)}
.filters button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.card{--accent:var(--beam);grid-column:span 4;position:relative;border-radius:var(--radius);background:linear-gradient(180deg,var(--ink-1),oklch(15% 0.032 286));border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,opacity .35s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%), color-mix(in oklch, var(--accent) 20%, transparent), transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:1}
.card:hover::before,.card:focus-visible::before{opacity:1}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:color-mix(in oklch,var(--accent) 45%,transparent)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card.is-hidden{display:none}
.art{position:relative;aspect-ratio:16/9;background:radial-gradient(90% 90% at 70% 0%, color-mix(in oklch,var(--accent) 26%,transparent), transparent 70%),radial-gradient(70% 80% at 0% 100%, oklch(26% 0.07 290 / .6), transparent 70%);border-bottom:1px solid var(--line);overflow:hidden}
.art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card:hover .art img{transform:scale(1.045)}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(15% 0.032 286 / 0) 55%,oklch(15% 0.032 286 / .72));pointer-events:none}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;position:relative;z-index:2}
.kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);line-height:1.08;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.5}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.stat{font-family:var(--font-mono);font-size:.78rem;color:var(--paper);display:flex;align-items:center;gap:8px}
.stat b{color:var(--accent);font-weight:600}
.go{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);transition:all .3s;flex:none}
.card:hover .go{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:rotate(-45deg)}
.card.feature{grid-column:span 7;grid-row:span 2}
.card.feature .art{aspect-ratio:auto;flex:1;min-height:300px}
.card.feature h3{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem)}
.card.span-5{grid-column:span 5}
.card.span-6{grid-column:span 6}
.badge-focus{position:absolute;top:16px;left:16px;z-index:3;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:var(--beam);color:oklch(18% 0.04 60);padding:5px 9px;border-radius:999px}
@media (max-width:980px){.card,.card.feature,.card.span-5,.card.span-6{grid-column:span 6}.card.feature{grid-row:auto}.card.feature .art{aspect-ratio:16/9;min-height:0;flex:none}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr);gap:12px}.card,.card.feature,.card.span-5,.card.span-6{grid-column:auto}.art{aspect-ratio:16/9}.card .body{padding:16px 18px 18px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--gutter-l));margin-right:calc(-1 * var(--gutter-r));padding-left:var(--gutter-l);padding-right:var(--gutter-r);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none}}

/* svg art primitives */
.art .ln{fill:none;stroke:var(--paper);stroke-opacity:.32;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art .ln2{fill:none;stroke:var(--paper);stroke-opacity:.14;stroke-width:1.2;stroke-linecap:round}
.art .dash{fill:none;stroke:var(--paper);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:5 5}
.art .ac{fill:var(--accent)}
.art .acs{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art .pp{fill:var(--paper);fill-opacity:.07}
.art .pp2{fill:var(--paper);fill-opacity:.9}
.art .tx{font-family:var(--font-mono);font-size:10px;fill:var(--paper);fill-opacity:.55;letter-spacing:.08em}
.art .blink{animation:blink 3.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.18}45%,60%{opacity:1}}
.art .float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.art .spin{transform-origin:center;transform-box:fill-box;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== ask: the answer card ===== */
.ask{background:linear-gradient(180deg,var(--ink),oklch(17% 0.04 290) 60%,var(--ink));overflow:hidden}
.ask-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.ask-grid{grid-template-columns:minmax(0,1fr)}}
.search{display:flex;align-items:center;gap:12px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:18px;padding:6px 8px 6px 18px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--beam);box-shadow:0 0 0 5px oklch(84% 0.145 80 / .14)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--paper);font:inherit;font-size:1.08rem;padding:12px 0}
.search input::placeholder{color:var(--faint)}
.search button{font:inherit;font-weight:600;border:0;border-radius:12px;background:var(--beam);color:oklch(18% 0.04 60);padding:11px 16px;cursor:pointer}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.qchips a,.qchips button{font:inherit;font-size:.86rem;color:var(--muted);background:var(--ink-1);border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer;text-align:left;transition:all .2s}
.qchips a:hover,.qchips a[aria-pressed="true"],.qchips button:hover,.qchips button[aria-pressed="true"]{color:var(--paper);border-color:var(--beam)}
.answer{position:relative;border-radius:var(--radius);background:linear-gradient(180deg,oklch(21% 0.045 288),oklch(17% 0.038 287));border:1px solid var(--line-2);padding:clamp(20px,3vw,30px);box-shadow:0 30px 80px -30px oklch(5% 0.02 286 / .9);overflow:hidden}
.answer::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,oklch(84% 0.145 80 / .16),transparent 70%);pointer-events:none}
.answer .ah{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.big-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:10px}
.big-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.big-badge.open{background:oklch(78% 0.15 152 / .14);color:var(--verified)}
.big-badge.closed{background:oklch(68% 0.19 27 / .14);color:var(--stamp)}
.big-badge.not-yet,.big-badge.soon{background:oklch(84% 0.145 80 / .14);color:var(--beam)}
.big-badge.changed{background:oklch(80% 0.10 205 / .14);color:var(--glint)}
.conf{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.answer h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.15;margin-bottom:10px}
.verdict{font-size:1.08rem;margin:0 0 18px;line-height:1.55}
.verdict strong{color:var(--paper)}
.proof{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--faint);padding-top:16px;border-top:1px dashed var(--line-2)}
.proof a{color:var(--glint);text-decoration:underline;text-underline-offset:3px;text-decoration-color:oklch(80% 0.10 205 / .4)}
.tl{margin:20px 0 6px}
.tl-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.tl-bar{position:relative;height:44px;border-radius:12px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/4));border:1px solid var(--line)}
.tl-win{position:absolute;top:10px;bottom:10px;border-radius:8px;background:linear-gradient(90deg,oklch(84% 0.145 80 / .35),oklch(84% 0.145 80 / .7));box-shadow:0 0 24px -4px oklch(84% 0.145 80 / .6)}
.tl-mark{position:absolute;top:4px;bottom:4px;width:2px;background:var(--glint)}
.tl-mark::after{content:attr(data-l);position:absolute;top:-2px;left:6px;font-family:var(--font-mono);font-size:.66rem;color:var(--glint);white-space:nowrap}
.tl-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-left:4px;font-family:var(--font-mono);font-size:.66rem;color:var(--faint);margin-top:6px}
.answer .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;color:var(--beam)}
.answer .more:hover{gap:12px}
.answer-enter{animation:enter .45s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== how ===== */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{border-radius:var(--radius);border:1px solid var(--line);padding:26px;background:var(--ink-1);position:relative;overflow:hidden}
.step svg{width:64px;height:64px;margin-bottom:18px}
.step h3{font-size:1.4rem;margin-bottom:8px}
.step p{margin:0;color:var(--muted)}
.step::after{counter-increment:s;content:"0" counter(s);position:absolute;right:20px;top:14px;font-family:var(--font-display);font-weight:800;font-size:4.2rem;color:var(--paper);opacity:.05;line-height:1}
.scan{animation:scan 2.8s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
.ring{transform-origin:32px 26px;animation:ring 3s ease-in-out infinite}
@keyframes ring{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(12deg)}75%{transform:rotate(-10deg)}85%{transform:rotate(6deg)}}

/* ===== principles ===== */
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px}
@media (max-width:900px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.principles{grid-template-columns:minmax(0,1fr)}}
.pr{background:var(--ink);padding:28px 24px}
.pr .glyph{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--beam);margin-bottom:14px}
.pr h3{font-size:1.2rem;margin-bottom:6px}
.pr p{margin:0;color:var(--muted);font-size:.95rem}

/* ===== closing ===== */
.closing{text-align:center;overflow:hidden}
.closing .glow{position:absolute;left:50%;bottom:-260px;width:900px;height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,oklch(84% 0.145 80 / .28),transparent);pointer-events:none}
.closing h2{font-size:clamp(2.4rem,1.6rem + 4vw,5rem)}
.closing .lede{margin-inline:auto}
.closing .cta-row{justify-content:center}
/* the hidden state exists only when the script runs (html.js), so without
   JavaScript every section is visible */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
html:not(.js) .needs-js{display:none}
@media (max-width:860px){.beam{opacity:.78}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}
/* reduced motion: the ticker stands still and can be scrolled sideways instead */
@media (prefers-reduced-motion: reduce){.ticker{overflow-x:auto}}
.pr a{color:inherit}