/* Obscure: explainer site. Ink, paper, one signal green. Same tokens as the app (web/app.html). */
:root {
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(16px,5vw,64px); --max:1180px; --r:14px;
  --signal:#36c27a; --alert:#e2564a;
  /* light */
  --page:#f7f7f7; --card:#ffffff; --line:#e7e7e7; --line-strong:#d4d4d4;
  --ink:#0a0a0a; --body:#3f3f46; --muted:#71717a; --faint:#a1a1aa; --soft:#f0f0f1;
  --on-ink:#ffffff; --header-bg:rgba(247,247,247,.85);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
  --ok-bg:#effbf4; --ok-fg:#166534; --bad-bg:#fdf1f0; --bad-fg:#991b1b;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --page:#0b0b0c; --card:#151517; --line:#27272a; --line-strong:#3a3a3f;
  --ink:#fafafa; --body:#d4d4d8; --muted:#a1a1aa; --faint:#71717a; --soft:#1c1c20;
  --on-ink:#0a0a0a; --header-bg:rgba(11,11,12,.8);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.25);
  --ok-bg:#082a17; --ok-fg:#86efac; --bad-bg:#3a0d0b; --bad-fg:#fca5a5;
  color-scheme:dark;
}
@media (min-width:1500px) { :root { --max:min(1380px, calc(100vw - 2 * var(--gutter))); } }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--page); color:var(--ink); font:17px/1.6 var(--sans); overflow-wrap:anywhere; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:3px; }
.mono { font-family:var(--mono); }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:16px; top:-60px; z-index:10; background:var(--card); color:var(--ink); padding:10px 14px; border-radius:8px; }
.skip:focus { top:12px; }
#main:focus { outline:none; }

/* Header */
.site-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px var(--gutter); background:var(--header-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); }
.brand svg { height:22px; width:auto; }
.site-header nav { display:flex; gap:clamp(12px,2.4vw,28px); flex-wrap:wrap; margin-left:auto; font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.site-header nav a { text-decoration:none; color:var(--muted); min-height:44px; display:inline-flex; align-items:center; }
.site-header nav a:hover { color:var(--ink); }
.header-actions { display:flex; align-items:center; gap:10px; }
.theme { width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.theme svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="dark"] .theme .moon, :root:not([data-theme="dark"]) .theme .sun { display:none; }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--ink); color:var(--on-ink);
  font:600 15px/1 var(--sans); text-decoration:none; border:1px solid var(--ink); transition:transform .15s ease, opacity .15s ease; }
.button:hover { opacity:.88; }
.button:active { transform:translateY(1px); }
.button.small { min-height:44px; padding:0 16px; font-size:14px; }
.button.ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }

/* Section rhythm */
main > section { padding:clamp(72px,10vw,128px) var(--gutter); }
main > section + section { border-top:1px solid var(--line); }
.section-head { max-width:var(--max); margin:0 auto clamp(32px,5vw,56px); }
.kicker { font:500 12px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
h1,h2,h3 { font-weight:650; letter-spacing:-.03em; line-height:1.04; margin:0; }
h2 { font-size:clamp(32px,5.2vw,64px); max-width:18ch; text-wrap:balance; }
h3 { font-size:19px; line-height:1.25; letter-spacing:-.015em; }
.section-lede { max-width:60ch; color:var(--body); font-size:19px; margin:20px 0 0; }
.caption { max-width:var(--max); margin:20px auto 0; color:var(--muted); font-size:14px; }

/* Hero */
.hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,5vw,72px); align-items:center;
  max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; min-height:min(calc(100vh - 69px),860px); }
.eyebrow { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { border:1px solid var(--line-strong); color:var(--muted); border-radius:999px; padding:8px 12px; }
.hero h1 { font-size:clamp(40px,4.2vw,64px); text-wrap:balance; line-height:.96; letter-spacing:-.045em; }
.hero h1 em { font-style:normal; color:var(--faint); }
.lede { font-size:clamp(18px,1.6vw,21px); color:var(--body); max-width:52ch; margin:28px 0 36px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-mark { margin:0; justify-self:center; width:min(100%,500px); color:var(--ink); }
.hero-svg { width:100%; height:auto; }
.hero-mark figcaption { text-align:center; color:var(--muted); font-size:14px; margin-top:6px; }
.drift { animation:drift 14s linear infinite; }
@keyframes drift { to { transform:translateY(calc(-1 * var(--span))); } }

/* Problem */
.compare { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.msg-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; }
.msg-label { margin:0; font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bubble { margin:0; background:var(--soft); border-radius:18px 18px 18px 4px; padding:14px 16px; font-size:16px; line-height:1.45; flex:1; }
.bubble.mono { font-size:14px; word-break:break-all; }
.verdict { margin:0; align-self:flex-start; font:600 13px/1 var(--sans); padding:8px 12px; border-radius:999px; }
.bad .verdict { background:var(--bad-bg); color:var(--bad-fg); }
.ok { border-color:color-mix(in srgb,var(--signal) 45%,var(--line)); }
.ok .verdict { background:var(--ok-bg); color:var(--ok-fg); }

/* Poll */
.poll-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.poll-option { text-align:left; font:inherit; font-size:17px; line-height:1.45; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; cursor:pointer; box-shadow:var(--shadow); min-height:44px; transition:border-color .2s ease, transform .2s ease; }
.poll-option:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.poll-option .who { display:block; font:600 13px/1 var(--sans); color:var(--muted); margin-bottom:10px; }
.poll-option[aria-pressed="true"] { border-color:var(--ink); }
.poll-grid.revealed .poll-option { border-color:color-mix(in srgb,var(--signal) 55%,var(--line)); cursor:default; transform:none; }
.poll-reveal { max-width:var(--max); margin:24px auto 0; font-size:19px; min-height:1.6em; }
.poll-reveal b { color:var(--signal); }

/* Steps + pipeline */
.steps { list-style:none; padding:0; margin:0 auto; max-width:var(--max); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.steps li { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); }
.num { display:block; font:500 12px/1 var(--mono); color:var(--muted); letter-spacing:.14em; margin-bottom:28px; }
.steps p, .features p { color:var(--body); margin:10px 0 0; font-size:16px; }
.pipeline { max-width:var(--max); margin:32px auto 0; display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.pipe-node { flex:1 1 160px; border:1px dashed var(--line-strong); border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.pipe-node span { font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pipe-node b { font-weight:600; font-size:15px; }
.pipe-node.ok { border-style:solid; border-color:var(--signal); }
.pipe-arrow { flex:0 0 32px; align-self:center; height:1px; background:var(--line-strong); position:relative; }
.pipe-arrow::after { content:""; position:absolute; right:0; top:-4px; border:4px solid transparent; border-left-color:var(--line-strong); border-right:0; }

/* Doors */
.door-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.door { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow); }
.door img, .door-icon svg { width:56px; height:56px; border-radius:13px; margin-bottom:22px; }
.door h3 { font-size:24px; }
.door p { color:var(--body); }
.door a { font-weight:600; }

/* Field */
.features { list-style:none; padding:0; margin:0 auto; max-width:var(--max); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.features li { background:var(--card); padding:26px; }

/* Limits */
.limit-list { list-style:none; padding:0; margin:0 auto; max-width:var(--max); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 40px; }
.limit-list li { padding:16px 0; border-top:1px solid var(--line); color:var(--body); }
.limit-list b { color:var(--ink); display:block; margin-bottom:4px; }

/* Team */
.team-card { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start; }
.team-card > div > p { color:var(--body); font-size:18px; max-width:52ch; }
.people { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.people li { border:1px solid var(--line-strong); border-radius:999px; padding:8px 14px; font-weight:600; font-size:15px; }
.creator { display:flex; gap:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); }
.creator p { color:var(--body); margin:8px 0 0; font-size:16px; }
.monogram { flex:0 0 64px; height:64px; border-radius:16px; background:var(--ink); color:var(--on-ink); display:grid; place-items:center; font:700 22px/1 var(--sans); letter-spacing:-.04em; }
.creator-links { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:15px; }
.creator-links a { display:inline-flex; min-height:44px; align-items:center; }

/* CTA + footer */
.cta { text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.cta h2 { max-width:none; }
.cta > a:last-child { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); }
.site-footer { border-top:1px solid var(--line); padding:36px var(--gutter) 48px; display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:space-between; color:var(--muted); font-size:14px; }
.site-footer p { margin:0; max-width:70ch; }
.site-footer .brand svg { height:18px; }

/* Brand guide page */
.guide-hero { max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; }
.guide-hero h1 { font-size:clamp(44px,7vw,96px); letter-spacing:-.045em; line-height:.98; max-width:14ch; }
.tiles { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.tile { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card); display:flex; flex-direction:column; }
.tile .stage { aspect-ratio:4/3; display:grid; place-items:center; padding:28px; }
.tile .stage.ink { background:#0a0a0a; color:#f7f7f7; }
.tile .stage.paper { background:#f7f7f7; color:#0a0a0a; }
.tile .stage.signal { background:#36c27a; color:#0a0a0a; }
.tile .stage svg { max-height:100%; width:auto; max-width:100%; }
.tile .stage.wide { aspect-ratio:auto; padding:clamp(36px,6vw,72px) clamp(28px,5vw,64px); }
.tile .stage.wide svg { width:100%; height:auto; max-height:none; }
.tile figcaption, .tile .meta { padding:14px 18px; border-top:1px solid var(--line); font-size:14px; color:var(--body); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.tile figcaption b { color:var(--ink); }
.tile { margin:0; }
.span-2 { grid-column:span 2; }
.swatches { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:12px; }
.swatch { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card); }
.swatch i { display:block; height:110px; }
.swatch p { margin:0; padding:12px 14px; font-size:14px; }
.swatch code { font-family:var(--mono); color:var(--muted); font-size:13px; }
.rules { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.rules ul { margin:0; padding-left:0; list-style:none; }
.rules li { padding:12px 0; border-top:1px solid var(--line); color:var(--body); }
.rules h3 { margin-bottom:10px; }
.downloads { max-width:var(--max); margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; }
.downloads a { border:1px solid var(--line-strong); border-radius:999px; padding:0 16px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font:500 13px/1 var(--mono); }
.type-specimen { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.type-specimen .tile .stage { aspect-ratio:auto; min-height:200px; place-items:start; align-content:center; text-align:left; }
.spec-sans { font:650 clamp(36px,5vw,60px)/1 var(--sans); letter-spacing:-.045em; }
.spec-mono { font:500 clamp(18px,2vw,22px)/1.5 var(--mono); }

@media (max-width:980px) {
  .hero, .team-card { grid-template-columns:minmax(0,1fr); }
  .hero { min-height:0; }
  .hero-mark { width:min(78%,380px); }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compare, .poll-grid { grid-template-columns:minmax(0,1fr); }
  .site-header nav { display:none; }
  .header-actions { margin-left:auto; }
}
@media (max-width:640px) {
  .steps, .features, .door-grid, .limit-list, .rules, .type-specimen { grid-template-columns:minmax(0,1fr); }
  .site-header { gap:12px; }
  .header-actions .button.small { padding:0 14px; }
  .span-2 { grid-column:auto; }
  .pipe-arrow { flex-basis:100%; height:18px; width:1px; background:none; }
  .pipe-arrow::after { left:50%; right:auto; top:2px; border:5px solid transparent; border-top-color:var(--line-strong); border-bottom:0; }
  .creator { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .drift { animation:none; }
  .button, .poll-option { transition:none; }
}

/* ---- Chess cover + corruption reveal (site/reveal.js; JS-only) ---- */
html.covered body { overflow:hidden; }
html.cover-pending body > :not(.cover) { visibility:hidden; }
.cover { position:fixed; inset:0; z-index:50; overflow:auto; background:#f4f6f3; color:#1d2b22; font-family:var(--sans); color-scheme:light;
  display:flex; flex-direction:column; transition:opacity .45s ease, background .3s ease; }
.cover[hidden] { display:none; }
.cv-top { display:flex; align-items:center; gap:24px; padding:14px var(--gutter); background:#2f7d4f; color:#fff; }
.cv-logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px; letter-spacing:-.02em; }
.cv-logo img { border-radius:6px; }
.cv-nav { display:flex; gap:20px; font-weight:600; font-size:15px; opacity:.9; }
.cv-cta { margin-left:auto; background:#fff; color:#255f3d; font-weight:700; font-size:14px; padding:9px 16px; border-radius:8px; }
.cv-main { flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:center;
  max-width:1180px; width:100%; margin:0 auto; padding:clamp(24px,5vw,64px) var(--gutter); }
.cv-board { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1; width:min(100%,560px); justify-self:end;
  border-radius:6px; overflow:hidden; box-shadow:0 18px 40px rgba(20,40,28,.18); }
.cv-board i { font-style:normal; display:grid; place-items:center; font-size:clamp(18px,3.6vw,40px); line-height:1; color:#1d1d1d; }
.cv-board i.l { background:#ebecd0; } .cv-board i.d { background:#779556; }
.cv-kicker { margin:0 0 12px; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#2f7d4f; }
.cv-title { margin:0; font-size:clamp(38px,5.4vw,68px); letter-spacing:-.04em; line-height:1; margin:0; font-weight:800; color:#14211a; }
.cv-copy { font-size:18px; color:#3d4d43; max-width:40ch; margin:18px 0 26px; }
.cv-play { display:inline-flex; align-items:center; min-height:52px; padding:0 26px; border-radius:10px; background:#2f7d4f; color:#fff; font-weight:800; font-size:18px;
  box-shadow:0 4px 0 #255f3d; }
.reveal-switch { display:flex; align-items:center; gap:12px; margin-top:34px; cursor:pointer; min-height:44px; width:max-content; font-weight:600; color:#3d4d43; }
.reveal-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.reveal-switch .track { width:52px; height:30px; border-radius:999px; background:#c9d2cb; position:relative; transition:background .2s ease; flex:none; }
.reveal-switch .track::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease; }
.reveal-switch input:checked + .track { background:#0a0a0a; }
.reveal-switch input:checked + .track::after { transform:translateX(22px); }
.reveal-switch input:focus-visible + .track { outline:2px solid #2f7d4f; outline-offset:3px; }
.cv-hint { margin:10px 0 0; font-size:13px; color:#7a887f; }
.cv-scan { position:fixed; inset:0; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; }
.cv-mark { position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; color:#fafafa; }
.cv-mark svg { width:min(60vw,360px); height:auto; transform:scale(.92); transition:transform 1s cubic-bezier(.2,.7,.2,1); }

/* corruption: the chess site glitches, holds on a dim torn frame, hard-cuts to black, and the wordmark surfaces */
.cover.corrupt { animation:corrupt var(--glitch,.95s) steps(14) both; }
.cover.corrupt .cv-scan { opacity:.7; animation:roll .18s linear infinite; }
.cover.corrupt .cv-board i { animation:sq-rot .55s var(--d) steps(5) forwards; }
.cover.corrupt .cv-board i:nth-child(3n) { --dx:7px; } .cover.corrupt .cv-board i:nth-child(5n) { --dx:-9px; } .cover.corrupt .cv-board i:nth-child(7n) { --dy:6px; }
.cover.corrupt .cv-top { animation:bar-glitch var(--glitch,.95s) steps(10) both; }
.cover.corrupt .cv-title { text-shadow:3px 0 rgba(226,86,74,.85), -3px 0 rgba(54,194,122,.85); }
@keyframes corrupt {
  0% { transform:none; filter:none; clip-path:inset(0); }
  15% { transform:translate(-5px,2px) skewX(-1.5deg); filter:hue-rotate(40deg) contrast(1.3); }
  30% { transform:translate(9px,-2px); filter:saturate(3) contrast(1.6); clip-path:inset(8% 0 22% 0); }
  42% { transform:translate(-14px,0); clip-path:inset(0 0 0 0); }
  55% { filter:invert(.15) contrast(1.8); transform:skewX(3deg); clip-path:inset(30% 0 40% 0); }
  64% { clip-path:inset(0); transform:translate(4px,-4px); }
  80% { filter:invert(1) contrast(2.2); }
  100% { filter:brightness(.15) contrast(2.4) grayscale(1); transform:none; }
}
@keyframes sq-rot { to { background:#0b0b0c; color:#36c27a; transform:translate(var(--dx,0),var(--dy,0)); } }
@keyframes bar-glitch { 0% { background:#2f7d4f; } 40% { background:#e2564a; transform:translateX(-10px); } 60% { background:#0a0a0a; transform:translateX(12px); } 100% { background:#0a0a0a; transform:none; } }
@keyframes roll { to { background-position:0 3px; } }
/* hold: the frame sits still, with a few sharp horizontal tears (--hold is set from HOLD_MS in reveal.js) */
.cover.hold { animation:flicker var(--hold,.95s) linear both; }
.cover.hold .cv-main { animation:tear var(--hold,.95s) linear both; }
@keyframes flicker {
  0% { filter:grayscale(1) brightness(.15) contrast(2.4); }   /* where the glitch left off */
  8% { filter:grayscale(.9) brightness(.55) contrast(1.5); }     /* the signal comes back, dim */
  33% { filter:grayscale(.9) brightness(.42) contrast(1.6); }
  34% { filter:grayscale(.9) brightness(.7) contrast(1.4); }
  36% { filter:grayscale(.9) brightness(.45) contrast(1.6); }
  72% { filter:grayscale(1) brightness(.35) contrast(1.8); }
  73% { filter:grayscale(1) brightness(.6) contrast(1.5); }
  100% { filter:grayscale(1) brightness(.18) contrast(2); }
}
@keyframes tear {
  0%, 21%, 24%, 55%, 59%, 81%, 83%, 100% { transform:none; clip-path:inset(0); }
  22% { transform:translateX(-10px); clip-path:inset(38% 0 44% 0); }
  57% { transform:translateX(6px) skewX(-2deg); clip-path:inset(12% 0 70% 0); }
  82% { transform:translateX(-4px); }
}
.cover.blackout { background:#0b0b0c; animation:none; filter:none; transition:none; }
.cover.blackout > :not(.cv-mark) { opacity:0; transition:none; }   /* hard cut */
.cover.blackout .cv-mark { opacity:1; transition:opacity .25s steps(4) .12s; }
.cover.blackout .cv-mark svg { transform:scale(1); }
.cover.out { opacity:0; }
.cover.fade { opacity:0; transition:opacity .2s ease; }
.back-cover img { border-radius:5px; }
@media (max-width:820px) {
  .cv-main { grid-template-columns:minmax(0,1fr); }
  .cv-board { justify-self:center; width:min(100%,420px); }
  .cv-nav { display:none; }
}
@media (prefers-reduced-motion:reduce) { .cover.corrupt, .cover.corrupt * { animation:none !important; } }

/* Use it */
.use-steps { list-style:none; padding:0; margin:0 auto; max-width:var(--max); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; counter-reset:use; }
.use-steps li { counter-increment:use; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); position:relative; }
.use-steps li::before { content:counter(use); position:absolute; top:18px; right:20px; font:600 34px/1 var(--sans); letter-spacing:-.04em; color:var(--line-strong); }
.use-steps p { color:var(--body); font-size:15.5px; margin:10px 0 0; }
.use-steps b { color:var(--ink); font-weight:600; }
.who-tag { display:inline-block; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-strong); border-radius:999px; padding:6px 10px; margin-bottom:18px; }
.use-cta { max-width:var(--max); margin:28px auto 0; }
@media (max-width:1100px) { .use-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .use-steps { grid-template-columns:minmax(0,1fr); } }
.team-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); }
.team-panel .people { margin-top:0; }
.partner { margin:0; font-weight:600; }