/* Relay — built on tokens.css. Spine values override the starter tokens here. */

:root,[data-theme="dark"]{
  /* colour */
  --paper:#0A0B0C; --paper-2:#0F1012; --surface:#131416; --surface-2:#17181B;
  --ink-rgb:242 243 240;
  --ink:rgb(var(--ink-rgb));
  --ink-2:rgb(var(--ink-rgb) / .62);
  --ink-3:rgb(var(--ink-rgb) / .5);
  --ink-4:rgb(var(--ink-rgb) / .3);           /* decorative only (line numbers, UI replica) */
  --hairline:rgb(var(--ink-rgb) / .08);
  --hairline-2:rgb(var(--ink-rgb) / .13);
  --fill:rgb(var(--ink-rgb) / .04);
  --accent:#F2A93B;                            /* amber: review marker + primary CTA only */
  --accent-rgb:242 169 59;
  --accent-ink:#1A1205;
  --focus:var(--accent);
  /* semantic diff tints — used only inside role="img" product replicas */
  --add:rgb(84 170 120 / .13); --add-ink:rgb(150 210 170 / .9);
  --del:rgb(220 100 90 / .12);  --del-ink:rgb(235 160 150 / .9);

  /* type */
  --font-display:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-text:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --display:clamp(2.5rem, 1.3rem + 3.2vw, 4.5rem);
  --display-wt:510; --display-lh:1.0; --display-ls:-0.028em;
  --h2:clamp(1.875rem, 1.25rem + 1.8vw, 3rem);
  --h2-wt:510; --h2-lh:1.06; --h2-ls:-0.022em;
  --h3:clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --h3-wt:510; --h3-lh:1.22; --h3-ls:-0.014em;
  --sub:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --price:clamp(3rem, 2rem + 3vw, 4rem);
  --body:1rem; --ui:.8125rem; --small:.8125rem; --label:.6875rem; --code:.75rem; --micro:.6875rem;
  --label-ls:.08em;

  /* shape */
  --r-btn:9999px; --r-card:12px; --r-media:12px; --r-chip:4px;
  --btn-h:44px; --btn-h-sm:34px; --btn-fs:.875rem;

  /* layout */
  --container:1280px;
  --nav-h:60px;
  --side:240px; --sum:260px;
  --row:22px;
  --rail-off:24px;

  /* motion */
  --t-fast:160ms; --t-ui:220ms; --t-reveal:850ms;
  --t-shimmer:1.8s; --t-caret:1.1s; --t-pulse:2.4s;
}

body{font-feature-settings:"cv01","ss03";background:var(--paper)}
::selection{background:rgb(var(--accent-rgb) / .35);color:var(--ink)}
code,pre,.app,.card-ui{font-variant-ligatures:none}
code{font-family:var(--font-mono);font-size:.92em}

/* ---------------------------------------------------------- layout rails (fixed, behind content) */
body::before{content:"";position:fixed;inset:0;margin-inline:auto;width:calc(min(100% - 2 * var(--margin), var(--container)) + 2 * var(--rail-off));
  border-inline:1px solid var(--hairline);pointer-events:none;z-index:0}
@media (max-width:900px){body::before{display:none}}
main,footer,.nav{position:relative;z-index:1}

/* ---------------------------------------------------------- gutter line numbers (the motif) */
.container{position:relative}
.ln{position:absolute;top:.35em;right:calc(100% + var(--rail-off) + var(--s-3));font:400 var(--label)/1 var(--font-mono);
  color:var(--ink-4);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ln.is-flag::after{content:"";position:absolute;top:-.3em;right:calc(-1 * var(--s-3) - 1px);width:2px;height:1.6em;background:var(--accent)}
@media (max-width:1180px){.ln{display:none}}

/* ---------------------------------------------------------- buttons */
.btn{font-size:var(--btn-fs);padding:0 var(--s-5) 1px;transition-timing-function:var(--ease)}
.btn--sm{padding:0 var(--s-4) 1px;font-size:var(--small)}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{background:rgb(var(--accent-rgb) / .88)}
.btn--primary{background:var(--ink);color:var(--paper)}

/* ---------------------------------------------------------- nav */
.nav{position:sticky;top:0;height:var(--nav-h);z-index:50;transition:background-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.nav.is-scrolled{background:rgb(10 11 12 / .82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--hairline)}
.nav-in{display:flex;align-items:center;height:100%;gap:var(--s-6)}
.wordmark{display:inline-flex;min-height:44px;align-items:center;gap:var(--s-2);text-decoration:none;font:510 1.0625rem/1 var(--font-display);letter-spacing:-.02em}
.mark{width:20px;height:20px;fill:var(--ink)}
.mark .mark-bar{fill:var(--accent)}
.nav-links{display:flex;gap:var(--s-5);margin-left:var(--s-4)}
.nav-links a,.nav-signin{color:var(--ink-2);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.nav-links a:hover,.nav-signin:hover{color:var(--ink)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:var(--s-5)}

/* ---------------------------------------------------------- hero */
.hero{padding-top:clamp(4rem, 2rem + 8vw, 9.5rem);overflow:hidden}
.hero-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-6)}
.hero-copy{max-width:56rem}
.hero h1{max-width:13.5em}
.hero-sub{margin-top:var(--s-5);font:400 var(--sub)/1.5 var(--font-text);color:var(--ink-2);max-width:36em;letter-spacing:0}
.hero-ctas{display:flex;gap:var(--s-3);margin-top:var(--s-6);flex-wrap:wrap}
.changelog{color:var(--ink-2);text-decoration:none;padding-block:var(--s-3);white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.changelog:hover{color:var(--ink)}
.hero-stage{margin-top:var(--s-8);height:clamp(420px, 40vw, 600px)}
.hero-stage .codefield{position:absolute;top:-140px;left:calc(50% - 50vw);width:100vw;height:calc(100% + 140px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 60%,transparent)}
.hero-stage .app{z-index:1;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}

/* ---------------------------------------------------------- product UI replica */
.app,.card-ui{position:relative;margin:0;background:var(--surface);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 0 0 1px rgb(0 0 0 / .4), inset 0 0 0 1px var(--hairline), 0 2px 32px rgb(0 0 0 / .35);
  font:400 var(--ui)/1.45 var(--font-text);color:var(--ink);letter-spacing:0;user-select:none}
/* top-edge glow line (Resend), in the house amber at low alpha */
.app::before,.card-ui::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .55),transparent)}
.app-bar{display:flex;align-items:center;gap:var(--s-4);height:42px;padding:0 var(--s-4);border-bottom:1px solid var(--hairline);background:var(--paper-2);font-size:var(--small)}
.lights{display:flex;gap:6px}.lights i{width:10px;height:10px;border-radius:50%;background:var(--hairline-2)}
.crumb{color:var(--ink-3)}
.pr-title b{font-weight:510;color:var(--ink-3);margin-right:var(--s-1)}
.status{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);color:var(--ink-2)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse var(--t-pulse) var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.shimmer{background:linear-gradient(90deg,var(--ink-3) 0 35%,var(--ink) 50%,var(--ink-3) 65% 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer var(--t-shimmer) linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}

.app-body{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--sum);height:calc(100% - 42px)}
.app{height:100%}
.app-side,.app-sum{padding:var(--s-4) var(--s-3);opacity:.5}
.app-side{border-right:1px solid var(--hairline)}
.app-sum{border-left:1px solid var(--hairline)}
.side-h{font:500 var(--label)/1.2 var(--font-mono);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--ink-3);margin:var(--s-2) var(--s-2) var(--s-3);display:flex;justify-content:space-between}
.tree{list-style:none;margin:0;padding:0}
.tree li{display:flex;justify-content:space-between;gap:var(--s-2);padding:5px var(--s-2) 5px var(--s-5);border-radius:6px;color:var(--ink-2)}
.tree li.dir{padding-left:var(--s-2);color:var(--ink-3)}
.tree li.on{background:var(--fill);color:var(--ink)}
.tree em,.file-h em{font:400 var(--micro)/1.6 var(--font-mono);font-style:normal;color:var(--ink-3)}

.app-main{overflow:hidden;padding-bottom:var(--s-6)}
.file-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline);font:500 var(--code)/1.4 var(--font-mono)}
.viewed{margin-left:auto;font:400 var(--small)/1 var(--font-text);color:var(--ink-3)}
.hunk{padding:6px var(--s-4);font:400 var(--code)/1.4 var(--font-mono);color:var(--ink-3);background:var(--fill)}
.diff .row,.suggest .row{display:grid;grid-template-columns:40px 40px 20px minmax(0,1fr);align-items:center;min-height:var(--row);
  font:400 var(--code)/var(--row) var(--font-mono);white-space:pre;position:relative}
.card-ui .diff .row{grid-template-columns:44px 20px minmax(0,1fr)}
.suggest .row{grid-template-columns:24px minmax(0,1fr)}
.row b{font-weight:400;color:var(--ink-4);text-align:right;padding-right:10px}
.row i{font-style:normal;color:var(--ink-4);text-align:center}
.row code{font-size:inherit;overflow:hidden;text-overflow:clip;color:var(--ink-2)}
.row.add{background:var(--add)}.row.add i,.row.add code{color:var(--add-ink)}
.row.del{background:var(--del)}.row.del i,.row.del code{color:var(--del-ink)}
.row.flag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}

.thread{margin:var(--s-2) var(--s-4) var(--s-3) 100px;padding:var(--s-3) var(--s-4) var(--s-4);border-radius:8px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--hairline-2);position:relative}
.card-ui .thread{margin-left:64px}
.thread::before{content:"";position:absolute;left:-1px;top:var(--s-3);width:2px;height:22px;background:var(--accent);border-radius:1px}
.c-head{display:flex;align-items:center;gap:var(--s-2);font-size:var(--small)}
.c-head b{font-weight:510}
.av{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--accent);color:var(--accent-ink);font:600 var(--micro)/1 var(--font-mono)}
.bot{padding:1px 6px;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px var(--hairline-2);color:var(--ink-3);font-size:var(--micro)}
.when{color:var(--ink-3)}
.kind{margin-left:auto;font:500 var(--micro)/1 var(--font-mono);text-transform:uppercase;letter-spacing:var(--label-ls);color:var(--ink-2);padding:4px 6px;border-radius:var(--r-chip);background:var(--fill)}
.c-body{margin:var(--s-2) 0 var(--s-3);color:var(--ink-2);max-width:60ch}
.c-body code{color:var(--ink);background:var(--fill);padding:1px 4px;border-radius:3px}
.suggest{border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hairline)}
.s-h{padding:6px var(--s-3);font-size:var(--micro);color:var(--ink-3);border-bottom:1px solid var(--hairline)}
.c-actions{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.b{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:var(--micro);font-weight:510}
.b.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hairline-2)}
.typing{background:transparent;box-shadow:none;padding:var(--s-2) var(--s-4)}
.typing .when{font-style:normal}
.caret{width:7px;height:14px;background:var(--ink-2);animation:caret var(--t-caret) steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.spec{margin:0}
.spec>div{display:flex;justify-content:space-between;gap:var(--s-3);padding:7px var(--s-2);border-bottom:1px solid var(--hairline)}
.spec dt{color:var(--ink-2)}.spec dd{margin:0;font-variant-numeric:tabular-nums}
.app-sum .side-h:not(:first-child){margin-top:var(--s-6)}
.conv-mini{list-style:none;margin:0;padding:0}
.conv-mini li{padding:7px var(--s-2);border-bottom:1px solid var(--hairline);color:var(--ink-2)}

/* ---------------------------------------------------------- manifesto */
.manifesto{padding-block:var(--s-10) var(--s-9)}
.manifesto-h{max-width:20em;font-size:clamp(1.875rem, 1.1rem + 2.4vw, 3.25rem)}

/* ---------------------------------------------------------- chapters (scroll-spy) */
.chapters{padding-bottom:var(--s-9)}
.spy{display:grid;grid-template-columns:3fr 9fr;gap:var(--gap)}
.ch-rail{position:sticky;top:calc(var(--nav-h) + var(--s-7));align-self:start}
.ch-list{list-style:none;margin:var(--s-4) 0 0;padding:0;border-left:1px solid var(--hairline)}
.ch-list a{display:flex;gap:var(--s-3);align-items:baseline;padding:var(--s-2) var(--s-4);text-decoration:none;color:var(--ink-3);
  font:450 var(--btn-fs)/1.4 var(--font-text);position:relative;transition:color var(--t-ui) var(--ease)}
.ch-list a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transition:transform var(--t-ui) var(--ease)}
.ch-list li.is-active a{color:var(--ink)}
.ch-list li.is-active a::before{transform:none}
.ch-list a:hover{color:var(--ink-2)}
.ch-panels{display:grid;gap:var(--s-10)}
.ch{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.fig{margin-bottom:var(--s-4)}
.stage{position:relative;border-radius:var(--r-media);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hairline);
  padding:clamp(1.5rem, 1rem + 3vw, 4rem) 0 clamp(1.5rem, 1rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem);overflow:hidden}
.stage .codefield{position:absolute;inset:0;width:100%;height:100%}
.stage .card-ui{max-width:760px;border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}
.stage .card-ui{margin-left:auto}
.ch h3{margin-top:var(--s-6);max-width:34em}
.ch-p{margin-top:var(--s-4);max-width:38em;color:var(--ink-2)}
.plus{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);max-width:46em}
.plus li{padding:var(--s-3) 0 var(--s-3) var(--s-5);border-top:1px solid var(--hairline);position:relative;font-size:var(--btn-fs);color:var(--ink-2)}
.plus li::before{content:"+";position:absolute;left:0;color:var(--ink-3);font-family:var(--font-mono)}

/* check run + conventions scenes */
.check-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--hairline)}
.check-h b{font-weight:510}
.dim2{color:var(--ink-3)}
.x{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--del-ink);color:var(--del-ink);font-size:var(--micro)}
.blocked{padding:var(--s-2) var(--s-4);background:var(--del);color:var(--del-ink);font-size:var(--small)}
.findings{list-style:none;margin:0;padding:0}
.findings li{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline)}
.findings li:not(.open){opacity:.55}
.findings li.open{position:relative}
.findings li.open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.f-top{display:flex;align-items:baseline;gap:var(--s-3)}
.f-top b{font-weight:510}
.f-top code{margin-left:auto;color:var(--ink-3);font-size:var(--code)}
.sev{font:500 var(--micro)/1 var(--font-mono);text-transform:uppercase;letter-spacing:var(--label-ls);color:var(--del-ink);flex:none;width:96px}
.sev.s2{color:var(--ink-3)}
.findings p{margin-top:var(--s-3);color:var(--ink-2);padding-left:calc(96px + var(--s-3))}
.lanes{margin:var(--s-3) 0 0 calc(96px + var(--s-3));display:grid;gap:6px}
.lane{position:relative;height:26px;border-radius:5px;background:var(--fill);font:400 var(--micro)/26px var(--font-mono);color:var(--ink-3)}
.lane span{padding-left:var(--s-2)}
.lane i{position:absolute;left:calc(80px + var(--x) * .75);top:4px;height:18px;line-height:18px;padding:0 6px;border-radius:3px;font-style:normal;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline-2);color:var(--ink-2);white-space:nowrap}
.conv{list-style:none;margin:0;padding:0}
.conv li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline)}
.conv li div{display:grid;gap:2px}
.conv li b{font-weight:450}
.conv li span:not(.b):not(.tog):not(.acts){color:var(--ink-3);font:400 var(--micro)/1.4 var(--font-mono)}
.conv li.new{background:rgb(var(--accent-rgb) / .06);position:relative}
.conv li.new::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.acts{display:flex;gap:var(--s-2)}
.tog{width:28px;height:16px;border-radius:9999px;background:var(--hairline-2);position:relative;flex:none}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ink-3)}
.tog.on{background:rgb(var(--ink-rgb) / .3)}.tog.on::after{left:14px;background:var(--ink)}

/* ---------------------------------------------------------- review log (dense band) */
.log{padding-block:var(--s-8) var(--s-9);background:var(--paper-2);border-block:1px solid var(--hairline)}
.log-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-6);margin-bottom:var(--s-7)}
.log-head h2{max-width:22em}
.log-head .fig{margin:0;white-space:nowrap}
.table-wrap{overflow-x:auto}
.log-t{width:100%;border-collapse:collapse;font-size:var(--btn-fs)}
.log-t th{text-align:left;font:500 var(--label)/1.2 var(--font-mono);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--ink-3);padding:0 var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--hairline-2)}
.log-t td{padding:var(--s-4) var(--s-4) var(--s-4) 0;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink-2)}
.log-t td:first-child{white-space:nowrap;color:var(--ink);position:relative}
.log-t td:first-child code{font-size:var(--code)}
.log-t td:nth-child(3){font:400 var(--code)/1.6 var(--font-mono);color:var(--ink-3)}
.log-t td:last-child{white-space:nowrap}
.log-t tr.is-flag td:first-child::before{content:"";position:absolute;left:calc(-1 * var(--rail-off) - 1px);top:var(--s-4);height:1.4em;width:2px;background:var(--accent)}
.log-t code{color:inherit}

/* ---------------------------------------------------------- setup */
.setup{padding-block:var(--s-9) var(--s-9)}
.setup-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem, 1rem + 4vw, 6rem);align-items:start}
.steps{list-style:none;margin:var(--s-8) 0 0;padding:0}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:var(--s-4);padding:var(--s-5) 0;border-top:1px solid var(--hairline)}
.steps li .t-label{color:var(--ink-3);padding-top:4px}
.steps b{font-weight:510}
.steps p{margin-top:var(--s-1);color:var(--ink-2);max-width:34em}
.config{margin:var(--s-2) 0 0;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline-2);overflow:hidden;position:sticky;top:calc(var(--nav-h) + var(--s-7))}
.config figcaption{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline)}
.config pre{margin:0;padding:var(--s-5) var(--s-4);font:400 var(--code)/1.75 var(--font-mono);color:var(--ink-2);overflow-x:auto}
.config code{font-size:inherit}
.config .k{color:var(--ink)}.config .s{color:var(--ink-2)}.config .c{color:var(--ink-3)}

/* ---------------------------------------------------------- pricing */
.pricing{padding-block:var(--s-7) var(--s-9)}
.pricing-h{max-width:18em;margin-bottom:var(--s-8)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);box-shadow:0 0 0 1px var(--hairline);max-width:62rem}
.plan{background:var(--paper);padding:var(--s-7) var(--s-6) var(--s-6);display:flex;flex-direction:column;align-items:flex-start;position:relative}
.plan--team{background:var(--surface)}
.plan--team::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--ink)}
.price{margin-top:var(--s-4);display:flex;align-items:baseline;gap:var(--s-3)}
.amt{font:400 var(--price)/1 var(--font-display);letter-spacing:-.04em}
.per{color:var(--ink-2);font-size:var(--btn-fs)}
.plan-note{margin:var(--s-3) 0 var(--s-6);color:var(--ink-2);max-width:26em;min-height:3.1em}
.plan .spec{margin-top:var(--s-7);width:100%;font-size:var(--btn-fs)}
.plan .spec>div{padding:var(--s-3) 0}
.fine{margin-top:var(--s-5);max-width:62rem}

/* ---------------------------------------------------------- faq */
.faq{padding-block:var(--s-9) var(--s-8);border-top:1px solid var(--hairline)}
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap)}
.faq-h{position:sticky;top:calc(var(--nav-h) + var(--s-7));align-self:start;max-width:10em}
.qa details{border-bottom:1px solid var(--hairline)}
.qa details:first-child{border-top:1px solid var(--hairline)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) 0;font:450 var(--sub)/1.4 var(--font-text)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--font-mono);color:var(--ink-3);transition:transform var(--t-ui) var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{padding-bottom:var(--s-5);color:var(--ink-2);max-width:40em}

/* ---------------------------------------------------------- finale */
.finale{padding-block:var(--s-10)}
.finale-h{max-width:14em;text-wrap:balance}
.finale-sub{margin-top:var(--s-5);color:var(--ink-2);font-size:var(--sub);max-width:32em}

/* ---------------------------------------------------------- footer */
.foot{border-top:1px solid var(--hairline);padding-top:var(--s-8);background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:var(--gap)}
.foot-brand p{margin-top:var(--s-4);max-width:22em}
.foot nav{display:flex;flex-direction:column;gap:var(--s-1)}
.foot nav .t-label{margin-bottom:var(--s-3)}
.foot nav a{color:var(--ink-2);text-decoration:none;font-size:var(--small);padding-block:3px;transition:color var(--t-fast) var(--ease)}
.foot nav a:hover{color:var(--ink)}
.eof{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-9);padding-block:var(--s-5);border-top:1px solid var(--hairline);color:var(--ink-2)}
.eof-mark{display:inline-flex;align-items:center;gap:var(--s-3)}
.eof-mark i{width:2px;height:14px;background:var(--accent)}
.ok{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-2);margin-right:var(--s-2);vertical-align:1px}
[data-clock]{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- responsive */
@media (max-width:1100px){
  :root{--sum:0px}
  .app-sum{display:none}
}
@media (max-width:900px){
  .nav-links,.nav-signin{display:none}
  .hero-head{grid-template-columns:1fr}
  .changelog{order:-1;padding-block:var(--s-3)}
  .spy{grid-template-columns:1fr}
  .ch-rail{display:none}
  .setup-grid,.faq-grid{grid-template-columns:1fr}
  .config,.faq-h{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .hero{padding-top:var(--s-7)}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{justify-content:center;height:48px}
  /* mobile crop: drop the file tree, keep the diff and the comment */
  :root{--side:0px}
  .app-side{display:none}
  .app-body{grid-template-columns:minmax(0,1fr)}
  .app-bar .crumb,.app-bar .lights{display:none}
  .app-bar .pr-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .app-bar .status{display:none}
  .diff .row{grid-template-columns:0 30px 16px minmax(0,1fr)}
  .diff .row b:first-child{visibility:hidden}
  .thread,.card-ui .thread{margin-left:var(--s-3);margin-right:var(--s-3)}
  .hero-stage{height:520px;margin-top:var(--s-7)}
  .hero-stage .codefield{top:-24px;height:calc(100% + 24px)}
  .stage{padding:var(--s-5) 0 var(--s-5) var(--s-4)}
  .plus{grid-template-columns:1fr}
  .log-head{flex-direction:column;align-items:start}
  .log-t thead{display:none}
  .log-t,.log-t tbody,.log-t tr,.log-t td{display:block}
  .log-t tr{padding:var(--s-4) 0;border-bottom:1px solid var(--hairline)}
  .log-t td{border:0;padding:2px 0}
  .log-t td:first-child,.log-t td:last-child{white-space:normal}
  .log-t td:nth-child(3){display:inline-block;margin-right:var(--s-3)}
  .log-t td:last-child{display:inline-block}
  .log-t tr.is-flag td:first-child::before{left:calc(-1 * var(--margin) + 2px);top:3px}
  .plans{grid-template-columns:1fr}
  .plan{padding:var(--s-6) var(--s-5)}
  .plan .btn{width:100%;justify-content:center}
  .findings p,.lanes{padding-left:0;margin-left:0}
  .f-top{flex-wrap:wrap}
  .sev{width:auto}
  .lane{display:flex;align-items:center;gap:6px}
  .lane span{width:64px;flex:none}
  .lane i{position:static}
  .eof{flex-direction:column}
}