/*
 * Penthera site :: Poster, in System 1-bit (penthera ui after #63).
 *
 * Ink, paper and #0000ed. No flat greys: shades are dither patterns. One
 * window on the page, the browser check, drawn as a penthera ui window on its
 * dotted desktop; everything else is poster: one assertion per screen.
 *
 * Type, three roles:
 *   --display  Helvetica Neue, tight. A system font: nothing is downloaded,
 *              Arial where it is missing.
 *   --px       Departure Mono (OFL, self-hosted) :: commands, labels, buttons
 *   --sans     the same grotesk at reading sizes
 *
 * One theming system: [data-theme] on <html>, set before paint by /theme.js.
 *
 * Contrast, measured as in src/ui/static/app.css (WCAG 2.x, on the ground):
 *   dark  #000: text-1 21.0 · text-2 (ink .72) 10.3 · text-3 (ink .6) 7.2 · accent-ink #7a7aff 6.06
 *               white on #0000ed 9.45
 *   light #fdfdfa: text-1 19.4 · text-2 (ink .72) 8.0 · text-3 (ink .6) 5.24 · #0000ed 9.27
 * #0000ed is 2.22:1 on black, so in the dark theme it is only ever a fill.
 */

@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * Palettes. Each sets raw values only; the derived tokens below are declared
 * on :root and on every .band, so a section that swaps the raw values gets
 * its own text, rules and dither patterns. Three palettes:
 *   ink     black ground, white ink (the dark theme; the inverted band in light)
 *   paper   #fdfdfa ground, near-black ink (the light theme; inverted in dark)
 *   blue    #0000ed ground, white ink, in both themes: one band, the call to act
 *   grey    black ground under a 2 px checker of white at .34, white ink, in
 *           both themes: the limits band. A dithered grey, never a flat one.
 * Blue band, measured: white 9.45 · text-2 (white .85) 6.9 · text-3 (white .72) 5.1
 * Grey band, measured on its lighter pixel (#575757): white 7.2 · text-2
 *   (white .85) 5.8 · text-3 (white .78) 5.2. Links are white, underlined.
 */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] .band-invert,
:root[data-theme="light"] .bar[data-over="invert"] {
  color-scheme: dark;
  --ground: #000000;
  --sheen: 0.12; --lit: 0.07; --shade: 0.35;
  --ground-rgb: 0, 0, 0;
  --ink-rgb: 255, 255, 255;
  --t2: 0.72;
  --t3: 0.6;
  --desk-a: 0.42;
  --accent: #0000ed;
  --accent-hover: #2a2aff;
  --accent-ink: #7a7aff;
  --on-accent: #ffffff;
  --focus: #7a7aff;
  --field-filter: none;              /* field.png is white ink */
}

:root[data-theme="light"],
:root:not([data-theme="light"]) .band-invert,
:root:not([data-theme="light"]) .bar[data-over="invert"] {
  color-scheme: light;
  --ground: #fdfdfa;
  --sheen: 0.95; --lit: 0.7; --shade: 0.07;
  --ground-rgb: 253, 253, 250;
  --ink-rgb: 10, 10, 10;
  --t2: 0.72;
  --t3: 0.6;
  --desk-a: 0.5;
  --accent: #0000ed;
  --accent-hover: #2a2aff;
  --accent-ink: #0000ed;
  --on-accent: #ffffff;
  --focus: #0000ed;
  --field-filter: invert(1);
}

:root .band-blue,
:root .bar[data-over="blue"] {
  color-scheme: dark;
  --ground: #0000ed;
  --sheen: 0.2; --lit: 0.1; --shade: 0.3;
  --ground-rgb: 0, 0, 237;
  --ink-rgb: 255, 255, 255;
  --t2: 0.85;
  --t3: 0.72;
  --desk-a: 0.5;
  --accent: #ffffff;
  --accent-hover: #dcdcff;
  --accent-ink: #ffffff;
  --on-accent: #0000ed;
  --focus: #ffffff;
}

:root .band-grey,
:root .bar[data-over="grey"] {
  color-scheme: dark;
  --ground: #000000;
  --sheen: 0.12; --lit: 0.07; --shade: 0.35;
  --ground-rgb: 0, 0, 0;
  --ink-rgb: 255, 255, 255;
  --t2: 0.85;
  --t3: 0.78;
  --desk-a: 0.42;
  --accent: #0000ed;
  --accent-hover: #2a2aff;
  --accent-ink: #ffffff;
  --on-accent: #ffffff;
  --focus: #ffffff;
}

/* Derived: recomputed wherever a palette changes. The bar takes the palette
 * of the band under it (data-over, set by the page script), because it has
 * no background of its own. */
:root, .band, .bar {
  --text-1: rgb(var(--ink-rgb));
  --text-2: rgba(var(--ink-rgb), var(--t2));
  --text-3: rgba(var(--ink-rgb), var(--t3));
  --hair: rgba(var(--ink-rgb), 0.2);
  --frame: rgb(var(--ink-rgb));
  --desk: rgba(var(--ink-rgb), var(--desk-a));

  /* Dither patterns: the only greys. They invert with the palette. */
  --pt-solid: linear-gradient(var(--frame), var(--frame));
  --pt-hatch: repeating-linear-gradient(45deg, var(--frame) 0 1.5px, transparent 1.5px 3px);
  --pt-half: conic-gradient(from 90deg at 1px 1px, transparent 50%, var(--frame) 0 75%, transparent 0) 0 0 / 2px 2px, conic-gradient(var(--frame) 25%, transparent 0) 0 0 / 2px 2px;
  --pt-sparse: conic-gradient(from 90deg at 1px 1px, transparent 75%, var(--frame) 0) 0 0 / 3px 3px;
  --pt-desk: conic-gradient(from 90deg at 1px 1px, transparent 75%, var(--desk) 0) 0 0 / 4px 4px;
}
.band { background: var(--ground); color: var(--text-2); }
.band-grey {
  --grey-dot: rgba(255, 255, 255, 0.34);
  background: conic-gradient(var(--grey-dot) 25%, transparent 0 50%, var(--grey-dot) 0 75%, transparent 0) 0 0 / 4px 4px, #000;
}

:root {
  --display: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif;
  --px: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
  --measure: 1240px;
  --section: clamp(80px, 10vw, 144px);  /* poster spacing, tightened 2026-10-23 */
  --target: 44px;
  --veil-h: 224px;                      /* the bottom blur; check/ui.js reads it too */
  --ticker-h: 30px;
  --bar-gap: 12px;                      /* air between the ticker and the bar */
  --press: 100ms;
  --out: cubic-bezier(0, 0, .2, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ── Base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html:not(.js) [data-js] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text-2);
  font: 17px / 1.5 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, pre, kbd { font-family: var(--px); font-size: 0.82em; }
code { color: var(--text-1); overflow-wrap: anywhere; }
h1, h2, h3, h4 { color: var(--text-1); margin: 0; font-weight: 500; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: var(--target); background: var(--accent); color: var(--on-accent); padding: 0 12px; font-family: var(--px); font-size: 13px; }
.skip:focus { top: 8px; }

/* Labels: Departure Mono, the dashboard's chrome voice. */
.pills, .label, .status, .title, .sev, .drop-sub, figcaption, .note, .foot, .commands dd, .theme, .btn {
  font-family: var(--px);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ── Icons ──────────────────────────────────────────────────────────── */
/* The lock: a 12 × 14 pixel drawing with a dithered body, drawn from one
 * <symbol> (#i-lock). Integer scales only, so the pixels stay square. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lock { flex: none; width: 12px; height: 14px; fill: currentColor; shape-rendering: crispEdges; vertical-align: -2px; margin-right: 8px; }
h3 > .lock { width: 24px; height: 28px; vertical-align: -4px; margin-right: 12px; }

/* ── Ticker ───────────────────────────────────────────────────────────── */
/* Sourced security news (site/news.json), inverted, in Departure Mono. It
 * scrolls; hover or focus pauses it; with reduced motion it stands still and
 * scrolls by hand. */
.ticker {
  position: absolute; inset: 0 0 auto; z-index: 11;
  height: var(--ticker-h);
  overflow-x: clip; overflow-y: visible;  /* hit areas reach past the strip */
  background: rgb(var(--ink-rgb)); color: rgb(var(--ground-rgb));
  font-family: var(--px); font-size: 12px; letter-spacing: 0.02em;
}
.ticker-track { display: flex; width: max-content; height: 100%; animation: ticker 90s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker-list li { display: inline-flex; align-items: center; height: var(--ticker-h); padding: 0 28px 0 0; white-space: nowrap; }
.ticker time { opacity: 1; margin-right: 10px; text-transform: uppercase; }
.ticker a { position: relative; color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--ticker-h); }
.ticker a::after { content: ""; position: absolute; inset: -7px 0; }
.ticker a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.ticker a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ticker .lock { width: 9px; height: 11px; margin-right: 8px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; overflow-y: hidden; }
  .ticker-track { animation: none; }
  .ticker-list[aria-hidden] { display: none; }
}

/* ── Bar ──────────────────────────────────────────────────────────────── */

/* The header is static: it scrolls away with the page. It sits on a solid
 * box in the ground colour with a hard bottom edge, so the field below starts
 * on a sharp line. */
.bar {
  position: absolute; inset: calc(var(--ticker-h) + var(--bar-gap)) 0 auto; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  height: 60px;                         /* the mark hangs below it */
  padding: 0 var(--gutter);
}
.bar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* A solid box with a hard edge just below the mark: no fade, no blur. */
  top: calc(-1 * var(--bar-gap)); left: 0; right: 0;
  height: calc(var(--bar-gap) + 14px + max(var(--target), var(--logo-h)) + 18px);
  background: rgb(var(--ground-rgb));
}
/* The mark, four times its old size, hanging below the bar. On phones it
 * takes what the bar leaves. */
.brand {
  align-self: flex-start; margin: 14px auto 0 0;
  display: inline-flex; align-items: center;
  min-height: var(--target);
  color: var(--text-1);
  transition: color 160ms var(--out);
}
.brand:hover { background: none; color: var(--accent-ink); }
.brand:active { transform: translateY(1px); }
/* Up to 288 px, but never more than the controls leave (about 360 px of
 * bar is theirs), down to 112 px on the smallest phones. */
.bar { --logo-w: clamp(112px, calc(100vw - 360px), 288px); --logo-h: calc(var(--logo-w) * 63 / 279); }
@media (max-width: 480px) { .brand { margin-top: 12px; } }
.logotype {
  display: block; width: var(--logo-w, 72px); height: var(--logo-h, 16px); background: currentColor;
  -webkit-mask: url("/logo.svg") center / contain no-repeat;
  mask: url("/logo.svg") center / contain no-repeat;
}

/* The bar's three controls: one height (34 px), heavy-blur glass, each its
 * own kind of glass so they read as different things.
 *   theme     frosted ink: a milky tint, the switch inside
 *   star      clear glass: barely tinted, a hairline and a divided count
 *   download  blue glass: the accent, the one primary action
 * Hit areas reach 44 px through ::after; the optics stay 34. */
.glass {
  position: relative;
  display: inline-flex; align-items: stretch; justify-content: center;
  height: 34px; min-width: var(--target);
  color: var(--text-1); text-decoration: none;
  font-family: var(--px); font-size: 13px; letter-spacing: 0.02em;
  border: 1px solid rgba(var(--ink-rgb), 0.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  transition: background-color 160ms var(--out), border-color 160ms var(--out), color 160ms var(--out), transform var(--press) var(--out);
}
.glass { flex: none; }
.glass::after { content: ""; position: absolute; inset: -6px -2px; }
.glass:active { transform: translateY(1px); }
.glass > * { display: inline-flex; align-items: center; }

.star { background: rgba(var(--ground-rgb), 0.55); box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), 0.18); }
.star-glyph { width: 11px; height: 11px; margin-left: 10px; fill: currentColor; align-self: center; }
.star-word { padding: 0 10px 0 7px; }
.star-count { padding: 0 10px; border-left: 1px solid rgba(var(--ink-rgb), 0.45); }
.star-count:empty { display: none; }
.star:hover { background: var(--frame); color: var(--ground); border-color: var(--frame); }
.star:hover .star-count { border-color: var(--ground); }

.download {
  gap: 8px; padding: 0 12px;
  color: #ffffff;
  background: rgba(0, 0, 237, 0.82);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -6px rgba(0, 0, 237, 0.6);
}
.download-glyph { width: 10px; height: 11px; fill: currentColor; align-self: center; }
.download:hover { background: rgba(42, 42, 255, 0.92); color: #ffffff; }
/* Over the blue band the blue glass would vanish: it turns white. */
.bar[data-over="blue"] .download { color: #0000ed; background: rgba(255, 255, 255, 0.92); border-color: #ffffff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); }
.bar[data-over="blue"] .download:hover { background: #ffffff; }
@media (max-width: 480px) {
  .star-word { display: none; }
  .bar { gap: 6px; padding: 0 12px; }
  .theme { padding: 0 6px; }
  .download-glyph { display: none; }
  .star-glyph { margin-right: 8px; }
}
/* The theme: a switch, no words, in frosted-ink glass. On (dark): the knob
 * sits right on a dithered track. Off (light): left, on an empty one. */
.theme {
  align-items: center; justify-content: center;
  padding: 0 9px; cursor: pointer;
  background: rgba(var(--ink-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), 0.25);
}
.theme:hover { background: rgba(var(--ink-rgb), 0.22); }
.theme-track {
  position: relative; display: block;
  width: 34px; height: 18px;
  border: 1px solid var(--frame);
  background: transparent;
}
.theme[aria-checked="true"] .theme-track { background: var(--pt-sparse); }
.theme-knob {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--frame);
  transition: transform 160ms var(--out), background-color 160ms var(--out);
}
.theme[aria-checked="true"] .theme-knob { transform: translateX(16px); }
.theme:hover .theme-knob { background: var(--accent-ink); }
.theme:active .theme-knob { width: 14px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Variants set tokens, never properties. */

.btn {
  --btn-bg: var(--ground); --btn-fg: var(--text-1); --btn-bd: var(--frame); --btn-ring: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--btn-ring);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--press) var(--out);
}
.btn::after { content: ""; position: absolute; inset: -5px -2px; }   /* 44px hit area, same look */
.btn:hover { --btn-bg: var(--frame); --btn-fg: var(--ground); }
.btn:active { transform: translateY(1px); }
.btn:disabled { --btn-fg: var(--text-3); --btn-bd: var(--hair); cursor: not-allowed; transform: none; }
.btn:disabled:hover { --btn-bg: var(--ground); --btn-fg: var(--text-3); }
.btn[data-variant="default"] { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); --btn-ring: var(--frame); }
.btn[data-variant="default"]:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); --btn-fg: var(--on-accent); }
.btn[data-variant="default"]:disabled { --btn-bg: var(--ground); --btn-fg: var(--text-3); --btn-bd: var(--hair); --btn-ring: transparent; }
.btn-sm { min-height: 28px; padding: 0 10px; }
.btn-sm::after { inset: -9px -2px; }
@media (pointer: coarse) { .btn { min-height: var(--target); } .btn::after { inset: 0; } }

/* ── Commands ─────────────────────────────────────────────────────────── */

/* One component for every install command: the whole thing is the copy
 * button. Quiet at rest (a hairline, the command in ink); hover firms the
 * frame and inverts the action; press sinks a pixel; copied fills the action
 * with the accent for 1.6 s. Variants set tokens, never properties. */
.cmd {
  --cmd-bd: var(--hair); --cmd-act-bg: transparent; --cmd-act-fg: var(--text-3); --cmd-act-bd: var(--hair);
  position: relative;
  display: inline-flex; align-items: stretch;
  max-width: 100%; min-height: var(--target);
  padding: 0;
  font: 15px / 1 var(--px); letter-spacing: 0.02em;
  color: var(--text-1); background: transparent;
  border: 1px solid var(--cmd-bd); border-radius: 0;
  cursor: pointer; text-align: left;
  transition: border-color 160ms var(--out), transform var(--press) var(--out);
}
.cmd > * { display: inline-flex; align-items: center; }
.cmd-prompt { padding-left: 14px; color: var(--text-3); }
.cmd code { padding: 0 16px 0 10px; font-size: inherit; color: inherit; white-space: nowrap; }
.cmd-act {
  padding: 0 12px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cmd-act-fg); background: var(--cmd-act-bg);
  border-left: 1px solid var(--cmd-act-bd);
  transition: background-color 160ms var(--out), color 160ms var(--out);
}
.cmd-done { display: none; }
.cmd:hover { --cmd-bd: var(--frame); --cmd-act-bg: var(--frame); --cmd-act-fg: var(--ground); --cmd-act-bd: var(--frame); }
.cmd:active { transform: translateY(1px); --cmd-act-bg: var(--pt-half); }
.cmd[data-state="copied"] { --cmd-bd: var(--frame); --cmd-act-bg: var(--accent); --cmd-act-fg: var(--on-accent); --cmd-act-bd: var(--frame); }
.cmd[data-state="copied"] .cmd-copy { display: none; }
.cmd[data-state="copied"] .cmd-done { display: inline; }
html:not(.js) .cmd { cursor: text; pointer-events: none; }

/* ── Sections ─────────────────────────────────────────────────────────── */

/* Sections run full width; content keeps the measure through the padding,
 * so a band's colour reaches the edges. */
main > section { padding: var(--section) max(var(--gutter), calc((100% - var(--measure)) / 2)) 0; }
main > .band { margin-top: var(--section); padding-bottom: var(--section); }
main > .band + .band { margin-top: 0; }
h2 {
  font-family: var(--display);
  font-size: clamp(36px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 14ch;
  text-wrap: balance;
}
h3 { font-family: var(--display); font-size: 21px; letter-spacing: -0.01em; line-height: 1.2; }
.note { color: var(--text-3); margin-top: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; font-family: var(--px); font-size: 15px; }
.links a { display: inline-flex; align-items: center; min-height: var(--target); }

/* 1 · Hero: the dithered field, then the one assertion. */
main > .hero { position: relative; max-width: none; padding: 0 var(--gutter); }
/* The field runs to the very top, behind the ticker and the mark. */
.hero { --field-top: 0px; }
.field {
  position: absolute; inset: var(--field-top) 0 auto; z-index: 0;
  width: 100%; height: calc(min(100vh, 1000px) - var(--field-top));
  object-fit: cover; object-position: 50% 0;
  image-rendering: pixelated;
  filter: var(--field-filter);
  pointer-events: none;
  user-select: none;
}
/* The live field (check/field.js) draws in the palette's own colours, so it
 * skips the light theme's invert; the static PNG stays until its first frame. */
.field-live { filter: none; }
.hero.live img.field { visibility: hidden; }
.hero-text {
  position: relative; z-index: 1;
  max-width: var(--measure); margin: 0 auto;
  /* The first screen is at least 90vh; the headline sits in the lower half
   * of the cloud, over the dots, with the text block at the bottom. */
  min-height: 90vh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding-top: clamp(240px, 42vh, 440px);
}
/* A long gradient behind the text, full width: the cloud stays visible at
 * the top and fades to the ground under the headline, so it reads. */
.hero-text::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 22%; bottom: -12%;
  left: calc(50% - 50vw); width: 100vw;
  background: linear-gradient(rgba(var(--ground-rgb), 0), rgba(var(--ground-rgb), 0.8) 32%, rgba(var(--ground-rgb), 0.94) 50%, rgb(var(--ground-rgb)) 85%);
}
/* The problem, said before the answer: one line in display type, on a
 * ground-coloured strip so it reads over the field. */
/* Marked line by line: each line gets its own stroke of ground, as long as
 * its words, with the field showing between the lines. */
.problem {
  margin: 0 0 24px; max-width: 30ch;
  font-family: var(--display); font-size: clamp(22px, 3vw, 36px); font-weight: 500;
  line-height: 1.62; letter-spacing: -0.02em; color: var(--text-1);
  text-wrap: balance;
}
.problem span {
  padding: 2px 10px 4px; margin-left: -10px; background: var(--ground);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Three separate labels in blue highlighter: a solid #0000ed stroke with
 * stepped, pixel-cut ends and a slight tilt each, so they read as marked by
 * hand. White on #0000ed is 9.45:1 in both themes. */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 0 0 0 4px; list-style: none; }
.pills li {
  padding: 5px 12px 4px; color: #fff; background: #0000ed;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, 100% 2px, 100% calc(100% - 4px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) 100%, 5px 100%, 5px calc(100% - 2px), 0 calc(100% - 2px));
  transform: rotate(-1.2deg);
}
.pills li:nth-child(2) { transform: rotate(0.8deg) translateY(1px); }
.pills li:nth-child(3) { transform: rotate(-0.4deg); }
h1 {
  font-family: var(--display);
  font-size: clamp(42px, 8.2vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 16ch;
  text-wrap: balance;
}
.lede { margin-top: 28px; max-width: 34ch; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35; color: var(--text-1); letter-spacing: -0.01em; }
/* The two ways in, side by side: the command, or a prompt for your agent. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 36px; }
.btn-prompt { min-height: var(--target); max-width: 100%; gap: 10px; padding: 8px 16px; white-space: normal; text-align: left; }
.btn-prompt .tool-icon { width: 14px; height: 14px; margin: 0; }
.loop { position: relative; z-index: 1; max-width: var(--measure); margin: clamp(64px, 10vw, 128px) auto 0; }
.loop video, .walk video { display: block; width: 100%; height: auto; border: 1px solid var(--frame); background: var(--ground); }
figcaption { margin-top: 10px; color: var(--text-3); }
/* A link in a caption gets a 44 px hit area without moving the text. */
figcaption a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* 2 · The check: one dashboard window on its dotted desktop. */
main > .desk { max-width: none; padding-left: 0; padding-right: 0; }
.desk-head { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.desk-head p { margin-top: 24px; max-width: 62ch; }
.window {
  position: relative;
  max-width: calc(880px + 2 * var(--gutter));
  margin: 48px auto 0;
  padding: clamp(16px, 4vw, 48px) var(--gutter);
  background: var(--pt-desk);
  border-block: 1px solid var(--frame);
}
@media (min-width: 960px) { .window { border-inline: 1px solid var(--frame); } }
.titlebar, .window-body { max-width: 880px; margin: 0 auto; border: 1px solid var(--frame); background: var(--ground); }
.titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 30px; padding: 0 10px;
  background: var(--frame); color: var(--ground);
  border-bottom: 0;
}
.titlebar .title { color: var(--ground); }
.titlebar .status { color: var(--ground); opacity: 1; }
.window-body { padding: 16px; box-shadow: 4px 4px 0 var(--frame); }
@media (min-width: 720px) { .window-body { padding: 24px; } }

.drop {
  position: relative;
  display: grid; place-items: center; gap: 6px; text-align: center;
  min-height: 168px; padding: 24px 16px;
  border: 1px dashed var(--frame);
  cursor: pointer;
}
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop-title { font-family: var(--display); font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.02em; color: var(--text-1); }
.drop-sub { color: var(--text-3); }
.drop:hover, .drop.over { background: var(--pt-sparse); }
.drop:hover .drop-title, .drop.over .drop-title { background: var(--ground); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.paste { margin-top: 16px; }
.paste summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--target);
  font-family: var(--px); font-size: 13px; color: var(--text-1); cursor: pointer; list-style: none;
}
.paste summary::-webkit-details-marker { display: none; }
.paste summary::before { content: "▸"; }
.paste[open] summary::before { content: "▾"; }
/* minmax(0, 1fr): the track follows the card, not the widest nowrap command. */
.paste-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 4px; }
.paste + .paste { margin-top: 4px; }
.paste-note { max-width: 62ch; font-size: 15px; color: var(--text-2); }
.paste-body > .cmd { justify-self: start; margin: 4px 0 8px; }
.paste-body > .cmd code { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; padding-block: 8px; }
.f-note { padding-left: 12px; border-left: 4px solid var(--frame); color: var(--text-1); }
.label { color: var(--text-3); display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); }
textarea, select {
  width: 100%; font: 13px / 1.5 var(--px); color: var(--text-1);
  background: var(--ground); border: 1px solid var(--frame); border-radius: 0; padding: 10px;
}
select { min-height: 40px; padding: 0 10px; appearance: none; background: var(--ground) linear-gradient(var(--frame), var(--frame)) right 14px center / 7px 1px no-repeat; }
textarea:focus-visible, select:focus-visible { outline-offset: 0; }
.row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.row .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 620px) { .row { grid-template-columns: auto 1fr auto; } .row .btn { grid-column: auto; } }

.staged { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.staged:empty { display: none; }
.staged li { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; border: 1px solid var(--frame); background: var(--pt-sparse); }
.staged code { background: var(--ground); padding: 0 4px; }
.notice { margin-top: 8px; font-family: var(--px); font-size: 13px; color: var(--text-3); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.output { margin-top: 20px; border-top: 1px solid var(--frame); padding-top: 16px; }
.empty { color: var(--text-3); }
.error { color: var(--text-1); padding-left: 12px; border-left: 4px solid var(--frame); }
.summary p { color: var(--text-1); }
.tally { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-family: var(--px); font-size: 13px; color: var(--text-1); }

/* Severity: a swatch and a word, as in penthera ui. */
.sev { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.06em; }
.sev::before { content: ""; flex: none; width: 11px; height: 11px; border: 1px solid var(--frame); }
.sev-critical::before { background: var(--pt-solid); }
.sev-high::before { background: var(--pt-hatch); }
.sev-medium::before { background: var(--pt-half); }
.sev-low::before { background: var(--pt-sparse); }

.findings { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--frame); }
.findings li { border-bottom: 1px solid var(--hair); }
.findings summary {
  display: grid; grid-template-columns: 1fr; gap: 4px 16px; align-items: baseline;
  padding: 12px 4px; min-height: var(--target); cursor: pointer; list-style: none;
}
.findings summary::-webkit-details-marker { display: none; }
.findings summary:hover { background: var(--frame); }
.findings summary:hover > * { color: var(--ground); }
.findings summary:hover .sev::before { border-color: var(--ground); }
.findings details[open] summary { background: var(--accent); }
.findings details[open] summary > * { color: var(--on-accent); }
.findings details[open] summary .sev::before { border-color: var(--on-accent); }
.f-title { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--text-1); overflow-wrap: anywhere; }
.f-file { font-family: var(--px); font-size: 13px; color: var(--text-3); overflow-wrap: anywhere; }
@media (min-width: 720px) { .findings summary { grid-template-columns: 116px 1fr auto; } }
.f-body { padding: 12px 4px 20px; display: grid; gap: 12px; }
.f-body p { color: var(--text-2); overflow-wrap: anywhere; white-space: pre-line; }
.f-body dl { margin: 0; display: grid; gap: 4px; font-family: var(--px); font-size: 13px; }
.f-body dl div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.f-body dt { color: var(--text-3); }
.f-body dd { margin: 0; color: var(--text-1); overflow-wrap: anywhere; }

.facts { max-width: var(--measure); margin: 56px auto 0; padding: 0 var(--gutter); display: grid; gap: 40px; }
@media (min-width: 860px) { .facts { grid-template-columns: 1fr 1fr; gap: 64px; } }
.facts p, .facts ul { margin-top: 12px; max-width: 54ch; }
.facts ul { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.facts li { padding-left: 20px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border: 1px solid var(--frame); background: var(--pt-sparse); }

/* Each chapter opens with a numbered eyebrow, then one assertion. */
.eyebrow { margin-bottom: 20px; font-family: var(--px); font-size: 13px; letter-spacing: 0.04em; color: var(--text-3); }

/* 01 · The answer: the question in display type, the answer as terminal
 * output, then the spec: four rows, a mono label and a bold lead-in. */
.ba-grid { margin-top: 56px; display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .ba-grid { grid-template-columns: 5fr 7fr; gap: 56px; } }
.ba-before, .ba-after { margin: 0; }
.ba-label { margin-bottom: 16px; font-family: var(--px); font-size: 13px; letter-spacing: 0.04em; color: var(--text-3); }
.bubble {
  display: inline-block; max-width: 11ch; padding: 0.22em 0.4em 0.3em;
  font-family: var(--display); font-size: clamp(44px, 7vw, 96px); font-weight: 500; line-height: 0.98; letter-spacing: -0.04em;
  color: var(--text-1); border: 1px solid var(--frame); border-radius: 0.36em 0.36em 0.36em 0;
}
.ba-out { padding: 24px; border: 1px solid var(--frame); box-shadow: 6px 6px 0 var(--frame); font-family: var(--px); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ba-cmd { color: var(--text-1); overflow-wrap: anywhere; }
.ba-sum { margin-top: 20px; font-family: var(--display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-1); }
.ba-meta { margin-top: 8px; color: var(--text-3); }
.ba-finding { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.ba-title { color: var(--text-1); }
.ba-sev { display: inline-block; padding: 0 6px; margin-right: 6px; background: var(--accent); color: var(--on-accent); }
.ba-conf { margin-left: 6px; padding: 0 6px; border: 1px solid var(--hair); color: var(--text-3); }
.ba-ev code { overflow-wrap: anywhere; color: var(--text-1); }
.ba-cap { margin-top: 32px; max-width: 70ch; font-family: var(--px); font-size: 13px; color: var(--text-3); }

.spec { margin: 48px 0 0; display: grid; border-top: 1px solid var(--frame); }
.spec > div { display: grid; gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 720px) { .spec > div { grid-template-columns: 180px 1fr; align-items: baseline; } }
.spec dt { font-family: var(--px); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.spec dd { margin: 0; max-width: 60ch; font-size: clamp(17px, 1.6vw, 20px); }
.spec strong { font-weight: 500; color: var(--text-1); }
.spec-big { display: block; margin-bottom: 4px; font-family: var(--display); font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.04em; }

/* 02 · What it checks: one window, four panes. Each pane has its own dither
 * swatch (the dashboard's severity patterns), a count read from the rules,
 * bold lead-ins and the command that runs it. */
.map-lede { margin-top: 24px; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-1); }
.map { margin: 48px 0 0; border: 1px solid var(--frame); box-shadow: 6px 6px 0 var(--frame); }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; padding: 0 10px; background: var(--frame); color: var(--ground); font-family: var(--px); font-size: 13px; }
.map-bar .title, .map-bar .status { color: var(--ground); }
.map-grid { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 800px) { .map-grid { grid-template-columns: 1fr 1fr; } }
.map-cell { display: grid; align-content: start; gap: 16px; padding: 24px var(--gutter) 28px; border-top: 1px solid var(--frame); }
.map-cell:first-child { border-top: 0; }
@media (min-width: 800px) {
  .map-cell { padding: 28px 32px 32px; }
  .map-cell:nth-child(2) { border-top: 0; }
  .map-cell:nth-child(even) { border-left: 1px solid var(--frame); }
}
.map-k { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.02em; color: var(--text-1); }
.swatch { flex: none; width: 18px; height: 18px; border: 1px solid var(--frame); }
.swatch-solid { background: var(--pt-solid); }
.swatch-hatch { background: var(--pt-hatch); }
.swatch-half { background: var(--pt-half); }
.swatch-sparse { background: var(--pt-sparse); }
.map-n { font-family: var(--display); font-size: clamp(44px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.map-n span { display: block; margin-top: 8px; font-family: var(--px); font-size: 13px; letter-spacing: 0.02em; color: var(--text-3); }
.leads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.leads li { position: relative; padding-left: 20px; }
.leads li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border: 1px solid var(--frame); background: var(--pt-sparse); }
.leads strong { font-weight: 500; color: var(--text-1); }
.map-cmd code { display: inline-block; padding: 4px 8px; border: 1px solid var(--hair); font-size: 13px; }
.map figcaption { margin: 0; padding: 14px var(--gutter); border-top: 1px solid var(--frame); max-width: none; font-family: var(--px); font-size: 13px; }
@media (min-width: 800px) { .map figcaption { padding: 14px 32px; } }
/* The check follows the map as its second half: a smaller heading, less air. */
main > .desk { padding-top: clamp(64px, 8vw, 120px); }
.desk-title { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.025em; max-width: 26ch; }

/* 06 · Get started: three ways in, side by side on wide screens; each
 * starts with its command. */
.ways { list-style: none; margin: 48px 0 0; padding: 0; display: grid; border-top: 1px solid var(--frame); }
@media (min-width: 1000px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ways > li { display: grid; align-content: start; gap: 14px; padding: 24px 0 32px; border-bottom: 1px solid var(--hair); min-width: 0; }
@media (min-width: 1000px) { .ways > li { padding: 24px 24px 32px 0; border-bottom: 0; } .ways > li + li { padding-left: 24px; border-left: 1px solid var(--hair); } }
.ways h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; }
.ways .cmd { justify-self: start; }
.ways .cmd code { display: block; align-self: center; min-width: 0; white-space: normal; overflow-wrap: normal; line-height: 1.4; padding-block: 10px; }
.commands { margin: 24px 0 0; display: grid; border-top: 1px solid var(--frame); }
.commands div { display: grid; gap: 4px 32px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 720px) { .commands div { grid-template-columns: minmax(280px, auto) 1fr; align-items: baseline; } }
.commands dt code { font-size: 16px; }
.commands dd { margin: 0; color: var(--text-3); }
.prompts-title { margin-top: 72px; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -0.02em; }
.prompts { margin-top: 20px; display: grid; gap: 16px; }
@media (min-width: 900px) { .prompts { grid-template-columns: repeat(3, 1fr); } }
.prompt-card { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 16px; border: 1px solid var(--frame); }
.prompt-card h4 { display: flex; align-items: center; font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
/* The tools as 9 × 9 pixel glyphs in the site's own style, not their logos. */
.tool-icon { flex: none; width: 18px; height: 18px; margin-right: 12px; fill: currentColor; shape-rendering: crispEdges; }
/* The prompt reads as text someone ran a marker over. */
.prompt-card pre { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.9; color: var(--text-1); }
.prompt-card mark {
  padding: 2px 4px; color: var(--on-accent); background: var(--accent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* The copy button appears on hover or focus; on touch screens it stays. */
.prompt-card .btn { justify-self: start; opacity: 0; transition: opacity 160ms var(--out), transform var(--press) var(--out); }
.prompt-card:hover .btn, .prompt-card:focus-within .btn, .prompt-card .btn[data-state="copied"] { opacity: 1; }
@media (hover: none) { .prompt-card .btn { opacity: 1; } }

/* The MCP configs: they keep their indentation and scroll sideways on a phone. */
.agent .prompts { margin-top: 20px; }
/* Collapsed by default: Claude Code's one-liner is already in the three ways. */
.agent > summary { display: flex; align-items: center; gap: 12px; min-height: var(--target); cursor: pointer; list-style: none; font-family: var(--display); font-weight: 500; color: var(--text-1); }
.agent > summary::-webkit-details-marker { display: none; }
.agent > summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--px); font-size: 18px; border: 1px solid var(--frame); }
.agent[open] > summary::after { content: "\2212"; background: var(--frame); color: var(--ground); }
.agent > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.agent .prompt-card { min-width: 0; }
.agent .prompt-card pre { overflow-wrap: anywhere; }
.agent .prompt-card pre.cfg { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.prompt-card h4 small { margin-left: 10px; font-family: var(--px); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--text-3); }

/* 03 · How to trust it: three principles with bold lead-ins, then the
 * benchmark (the caveats as a framed box before the numbers). */
.pillars { list-style: none; margin: 40px 0 0; padding: 0; display: grid; border-top: 1px solid var(--frame); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars li { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) { .pillars li { border-bottom: 0; } .pillars li + li { padding-left: 24px; border-left: 1px solid var(--hair); } }
.pillars h3 { margin-bottom: 12px; font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.02em; }
.pillars a { display: inline-block; font-family: var(--px); font-size: 13px; }
.bench { margin-top: clamp(80px, 10vw, 140px); }
.bench-title { font-size: clamp(30px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.035em; max-width: 16ch; }
.bench-lede { margin-top: 24px; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-1); }
.bench-caveats { margin-top: 40px; max-width: 760px; padding: 24px; border: 1px solid var(--frame); box-shadow: 6px 6px 0 var(--frame); }
.bench-caveats ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bench-caveats li { position: relative; padding-left: 22px; color: var(--text-1); }
.bench-caveats li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--accent-ink); }
.bench-stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; border-top: 1px solid var(--frame); }
@media (min-width: 600px) { .bench-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bench-stats { grid-template-columns: repeat(4, 1fr); } }
.bench-stats li { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 600px) { .bench-stats li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--hair); } }
@media (min-width: 1000px) { .bench-stats li + li { padding-left: 24px; border-left: 1px solid var(--hair); } }
.bench-stats h4 { font-family: var(--display); font-size: 17px; font-weight: 500; }
.bench-caveats h4 { margin-bottom: 12px; font-family: var(--display); font-size: 21px; font-weight: 500; }
.stat-num { margin-top: 16px; font-family: var(--display); font-size: clamp(56px, 7vw, 88px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.stat-pooled .stat-num { color: var(--accent-ink); }
.stat-was { margin-top: 8px; font-family: var(--px); font-size: 15px; color: var(--text-2); }
.stat-ci { margin-top: 12px; font-family: var(--px); font-size: 13px; color: var(--text-3); }
.bench-fig { margin: 48px 0 0; max-width: 900px; display: grid; gap: 16px; }
.e10-legend { display: flex; gap: 24px; font-family: var(--px); font-size: 13px; color: var(--text-2); }
.e10-legend span::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 8px; vertical-align: -1px; border: 1px solid var(--frame); }
.e10-legend .key-after::before { background: var(--accent-ink); border-color: var(--accent-ink); }
.e10-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.e10-name { grid-column: 1 / -1; font-size: 15px; color: var(--text-1); }
.e10-bar { display: block; width: 100%; height: 34px; overflow: visible; }
.e10-nums { font-family: var(--px); font-size: 13px; color: var(--text-2); white-space: nowrap; }
@media (min-width: 720px) {
  .e10-row { grid-template-columns: 160px 1fr 96px; }
  .e10-name { grid-column: auto; }
}
.e10-before { fill: none; stroke: var(--frame); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.e10-after { fill: var(--accent-ink); }
.e10-ci { fill: none; stroke: var(--text-1); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.bench-fig figcaption { max-width: 70ch; font-family: var(--px); font-size: 13px; color: var(--text-3); }
.bench-prec { margin-top: 32px; max-width: 64ch; font-size: clamp(17px, 1.6vw, 20px); }

/* 04 · Current limitations: its own band, a dithered grey between the black
 * and white ones. Each limit, what is planned for it, and its state. */
.limits-body { margin-top: 32px; display: grid; gap: 20px; max-width: 64ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-1); }
.road-title { margin-top: clamp(56px, 7vw, 96px); font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.03em; }
.road-lede { margin-top: 12px; font-family: var(--px); font-size: 13px; color: var(--text-3); }
.road { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--frame); max-width: 1040px; }
.road li { display: grid; gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 860px) { .road li { grid-template-columns: 280px 1fr 200px; align-items: baseline; } }
.road-k { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--text-1); }
.road-s { justify-self: start; padding: 2px 8px; white-space: nowrap; font-family: var(--px); font-size: 13px; color: var(--text-1); border: 1px solid var(--frame); background: #000; }
@media (min-width: 860px) { .road-s { justify-self: end; } }

/* 04 · The tour: four numbered steps, text beside media on wide screens,
 * the media side alternating. */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: clamp(48px, 6vw, 80px); }
.step { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) {
  .step { grid-template-columns: 5fr 7fr; gap: 56px; }
  .step:nth-child(even) .step-text { order: 2; }
}
.step-text { display: grid; gap: 16px; align-content: start; }
.step-text h3 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.035em; }
.step-text .commands { margin-top: 8px; }
.step-n { font-family: var(--px); font-size: 13px; letter-spacing: 0.04em; color: var(--text-3); }
.step-n span { color: var(--text-1); }
.step-media { margin: 0; min-width: 0; }
.step-media video, .step-media img { display: block; width: 100%; height: auto; border: 1px solid var(--frame); background: var(--ground); box-shadow: 6px 6px 0 var(--frame); }
/* The dashboard shot follows the page's theme. */
:root[data-theme="light"] .shot-dark, :root:not([data-theme="light"]) .shot-light { display: none; }
.tools { border: 1px solid var(--frame); box-shadow: 6px 6px 0 var(--frame); background: var(--ground); }
.tools-bar { display: flex; justify-content: space-between; gap: 12px; min-height: 30px; align-items: center; padding: 0 10px; background: var(--frame); color: var(--ground); font-family: var(--px); font-size: 13px; }
.tools ul { list-style: none; margin: 0; padding: 0; }
.tools li { display: grid; gap: 4px 20px; padding: 14px 16px; border-top: 1px solid var(--hair); }
.tools li:first-child { border-top: 0; }
@media (min-width: 600px) { .tools li { grid-template-columns: 190px 1fr; align-items: baseline; } }
.tools code { font-size: 14px; }
.tools li span { font-size: 15px; color: var(--text-2); }

/* 05 · How it compares: one table that scrolls inside its own box, with
 * the question column pinned, so the page never scrolls sideways. */
.compare-lede { margin-top: 24px; margin-bottom: 24px; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-1); }
/* position: relative keeps the cells' visually hidden labels (.sr, absolute)
 * inside the scroll box; without it they widened a 375 px phone's layout to
 * 731 px. */
.cmp-scroll { position: relative; margin-top: 16px; overflow-x: auto; border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame); overscroll-behavior-x: contain; }
.cmp-scroll:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cmp { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.cmp th, .cmp td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); border-bottom-color: var(--frame); }
.cmp thead th { position: relative; }
.cmp thead a { color: inherit; }
/* The whole header cell opens the tool's compare page. */
.cmp thead a::after { content: ""; position: absolute; inset: 0; }
.cmp-date { display: block; margin-top: 4px; font-family: var(--px); font-size: 11px; font-weight: 400; letter-spacing: 0.02em; color: var(--text-3); }
.cmp td { color: var(--text-2); }
.cmp tbody th { font-family: var(--px); font-size: 13px; font-weight: 400; color: var(--text-1); }
.cmp th:first-child { position: sticky; left: 0; z-index: 1; width: 132px; background: var(--ground); box-shadow: 1px 0 0 var(--hair); }
@media (max-width: 599px) { .cmp th:first-child { width: 96px; padding-left: 0; } .cmp tbody th { font-size: 12px; } }
.cmp-hint { margin-top: 12px; font-family: var(--px); font-size: 13px; color: var(--text-3); }
@media (min-width: 1180px) { .cmp-hint { display: none; } }
.cmp td:nth-child(2) { color: var(--text-1); }
.cmp-src { display: block; margin-top: 6px; font-family: var(--px); font-size: 11px; color: var(--text-3); }
.cmp-src a { overflow-wrap: anywhere; }
.cmp-none { color: var(--text-3); }
.compare-note { margin-top: 24px; max-width: 70ch; font-family: var(--px); font-size: 13px; color: var(--text-3); }
/* The short version: each tool and where it goes further. The full table
 * folds out below it, in a native <details>. */
.cmp-sum { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--frame); max-width: 1040px; }
.cmp-sum li { display: grid; gap: 2px 32px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 760px) { .cmp-sum li { grid-template-columns: 280px 1fr; align-items: baseline; } }
.cmp-sum a { justify-self: start; font-family: var(--display); font-weight: 500; color: var(--text-1); }
.cmp-sum li:first-child a { color: var(--accent-ink); }
.cmp-more { margin-top: 32px; }
.cmp-more > summary { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); cursor: pointer; list-style: none; font-family: var(--px); font-size: 15px; color: var(--text-1); }
.cmp-more > summary::-webkit-details-marker { display: none; }
.cmp-more > summary::before { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-size: 18px; border: 1px solid var(--frame); }
.cmp-more[open] > summary::before { content: "\2212"; background: var(--frame); color: var(--ground); }
.cmp-more > summary:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 08 · For agents: each entry point, its path in mono and one line. */
.agents-lede { margin-top: 24px; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-1); }
.entry { list-style: none; margin: 40px 0 0; padding: 0; display: grid; border-top: 1px solid var(--frame); }
.entry li { display: grid; gap: 2px 32px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 720px) { .entry li { grid-template-columns: minmax(300px, auto) 1fr; align-items: baseline; } }
.entry a { justify-self: start; display: inline-flex; align-items: center; min-height: var(--target); }
.entry a code { font-size: 15px; color: inherit; }
.entry span { color: var(--text-2); }
.for-agents > .cmd { margin-top: 40px; }
.for-agents > .cmd code { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; padding-block: 10px; }

/* 07 · Questions: native <details>, no script. A + turns into a − when open. */
.faq-list { margin-top: 40px; border-top: 1px solid var(--frame); max-width: 900px; }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 20px 48px 20px 0; min-height: var(--target);
  font-family: var(--display); font-size: clamp(19px, 2vw, 24px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25;
  color: var(--text-1);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  font-family: var(--px); font-size: 18px; border: 1px solid var(--frame);
}
.faq-list details[open] summary::after { content: "\2212"; background: var(--frame); color: var(--ground); }
.faq-list summary:hover { color: var(--accent-ink); }
.faq-a { display: grid; gap: 14px; padding: 0 48px 28px 0; max-width: 68ch; }
@media (max-width: 480px) { .faq-a { padding-right: 0; } }
.faq-a p { color: var(--text-2); }
.faq-a a { overflow-wrap: anywhere; }

/* ── Footer ───────────────────────────────────────────────────────────── */

/* The footer: one quiet strip. The veil switches off over it (check/ui.js). */
.foot {
  padding: 16px var(--gutter) 20px;
  border-top: 1px solid var(--frame);
  color: var(--text-3);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px;
  font-size: 12px;
}
.foot-main { display: grid; gap: 6px; flex: 1 1 420px; }
.nowrap { white-space: nowrap; }
/* The mark again, on the right, closing the page; it links back to the top. */
.foot-mark {
  --logo-w: clamp(120px, 18vw, 220px); --logo-h: calc(var(--logo-w) * 63 / 279);
  display: inline-flex; align-items: center; min-height: var(--target); margin-left: auto;
  color: var(--text-1); text-decoration: none;
}
.foot-mark:hover { background: none; color: var(--accent-ink); }
.foot p a { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* The bar's three controls again, so the end of the page has the same ways out. */
.foot-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* The maker, at the end of Open R&D. */
.by {
  justify-self: start;
  display: inline-grid; gap: 12px;
  margin-top: 72px; padding: 8px 8px 8px 0;
  color: var(--text-1); text-decoration: none;
}
.by-word { font-family: var(--px); font-size: 13px; color: var(--text-3); }
/* A signature, not a headline. A traced SVG, so it stays sharp. */
.dvdz {
  display: block; width: clamp(140px, 18vw, 200px); aspect-ratio: 2738 / 476; background: currentColor;
  -webkit-mask: url("/media/dvdzwaag.svg") left center / contain no-repeat;
  mask: url("/media/dvdzwaag.svg") left center / contain no-repeat;
}
.by:hover { background: none; color: var(--accent-ink); }
.by:hover .by-word { color: var(--accent-ink); }

/* The bottom veil: the same blur, rising from the bottom edge of the screen. */
/* A progressive blur, 0 at the top edge to 32 px at the bottom: six stacked
 * layers, each blurring twice as much as the last over a band nearer the
 * bottom, masked so neighbouring bands overlap. One blurred layer under a
 * fading mask reads as a frosted rectangle; this has no edge. */
.veil {
  position: fixed; inset: auto 0 0; z-index: 9;
  height: var(--veil-h);
  pointer-events: none;
  transition: opacity 240ms var(--out);
}
.veil > i {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(to top, #000 var(--solid), transparent var(--clear));
  mask-image: linear-gradient(to top, #000 var(--solid), transparent var(--clear));
}
.veil > i:nth-child(1) { --b: 1px;  --solid: 66%; --clear: 100%; }
.veil > i:nth-child(2) { --b: 2px;  --solid: 50%; --clear: 83%; }
.veil > i:nth-child(3) { --b: 4px;  --solid: 34%; --clear: 66%; }
.veil > i:nth-child(4) { --b: 8px;  --solid: 18%; --clear: 50%; }
.veil > i:nth-child(5) { --b: 16px; --solid: 6%;  --clear: 34%; }
.veil > i:nth-child(6) { --b: 32px; --solid: 0%;  --clear: 18%; }

/* Off while the hero headline is inside the veil's zone, so the first screen
 * reads clean; it fades in once the headline has scrolled above it. */
.veil[data-off] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Metal, glow and gradient (2026-10-23) ─────────────────────────────
 * Futuristic, still brutalist: square corners, hard type, and a few
 * surfaces that catch light. The plates are brushed aluminium in the old
 * Apple manner, lit from one source: a still light above the page, which
 * follows the pointer on devices with a mouse (ui.js sets --lx and --ly on
 * every plate from the same pointer, so they all agree where it is). The
 * base tone is mixed from each palette's ground and ink: black steel on the
 * dark ground, silver on the light one, blue steel on the blue band. */
.pillars li, .bench-stats li, .road li, .ways > li, .prompt-card, .btn-prompt {
  --plate: color-mix(in srgb, rgb(var(--ink-rgb)) 9%, var(--ground));
  --metal:
    radial-gradient(400px circle at var(--lx, 50%) var(--ly, -220px), rgba(255, 255, 255, var(--sheen)), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, var(--lit)), transparent 48%, rgba(0, 0, 0, var(--shade))),
    var(--plate);
  --metal-edge: inset 0 1px 0 rgba(255, 255, 255, calc(var(--lit) * 4)), inset 0 -1px 0 rgba(0, 0, 0, calc(var(--shade) * 0.8));
}
.pillars li, .bench-stats li, .road li, .ways > li, .prompt-card {
  position: relative; isolation: isolate;
  background: var(--metal);
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  box-shadow: var(--metal-edge);
}
/* Brushing: hairlines along the plate, faint enough to read as grain. */
.pillars li::before, .bench-stats li::before, .road li::before, .ways > li::before, .prompt-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(var(--ink-rgb), 0.045) 0 1px, transparent 1px 3px);
}

/* Plates sit in a gapped grid instead of ruled columns. */
.pillars, .bench-stats, .ways { gap: 12px; border-top: 0; }
.pillars li, .pillars li + li, .bench-stats li, .bench-stats li + li, .bench-stats li:nth-child(even),
.ways > li, .ways > li + li { padding: 24px; border-left-width: 1px; }
.road { display: grid; gap: 8px; border-top: 0; }
.road li { padding: 18px 20px; }
.road-s { background: rgba(0, 0, 0, 0.6); }

/* Numbers in polished type, lit from the same light above. */
.spec-big, .stat-num {
  background: linear-gradient(180deg,
    rgb(var(--ink-rgb)) 35%,
    color-mix(in srgb, rgb(var(--ink-rgb)) 55%, var(--ground)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-pooled .stat-num { background: none; color: var(--accent-ink); }

/* Get started: the blue band becomes light falling on blue. */
.band-blue {
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(120% 90% at 0% 100%, #000060, transparent 70%),
    #0000ed;
}

/* Soft gradient buttons for the primary actions; corners stay square. */
.download, .btn[data-variant="default"] {
  background: linear-gradient(180deg, #5a5aff 0%, #0000ed 55%, #0000b8 100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px -8px rgba(0, 0, 237, 0.75);
}
.download:hover, .btn[data-variant="default"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #7676ff 0%, #2a2aff 55%, #0000d0 100%);
}
.btn-prompt {
  background: var(--metal); border-color: rgba(var(--ink-rgb), 0.5);
  box-shadow: var(--metal-edge), 0 10px 28px -12px rgba(var(--ink-rgb), 0.35);
}
.btn-prompt:hover { --btn-bg: var(--frame); background: var(--frame); }
.bench-more { margin-top: 32px; }

/* ── The live check (2026-10-23) ─────────────────────────────────────────
 * The first thing to do on the page: a field, a button, and a report that
 * opens in place. The score is a 10 × 10 grid of pixels, one per point. */
.scan { margin: 8px 0 36px; max-width: 640px; display: grid; gap: 10px; }
.report + .pills, .report[hidden] + .pills { margin-top: 0; }
.report:not([hidden]) { margin-bottom: 48px; }
.scan-label, .scan-note { justify-self: start; padding: 2px 8px; margin-left: -8px; background: var(--ground); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.scan-label { font-family: var(--display); font-size: clamp(19px, 2vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); }
.scan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.scan-row input {
  min-height: 52px; min-width: 0; padding: 0 16px;
  font: 17px / 1 var(--px); letter-spacing: 0.02em; color: var(--text-1);
  background: var(--ground); border: 1px solid var(--frame); border-radius: 0;
}
.scan-row input::placeholder { color: var(--text-3); }
.scan-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.scan-go { min-height: 52px; padding: 0 28px; font-size: 15px; }
.scan-note { font-family: var(--px); font-size: 13px; color: var(--text-3); }

.report {
  position: relative; z-index: 1; margin-top: 28px; max-width: 980px;
  padding: clamp(20px, 3vw, 32px); border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.report-busy, .report-error { font-family: var(--px); font-size: 15px; color: var(--text-1); }
.report-busy::after { content: "▌"; margin-left: 4px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .report-busy::after { animation: none; } }
.report-head { display: grid; gap: 24px 40px; align-items: start; }
@media (min-width: 760px) { .report-head { grid-template-columns: 1fr minmax(260px, 340px); } }
.report-host { font-family: var(--px); font-size: 14px; color: var(--text-3); }
.report-verdict { margin-top: 6px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.03em; }
.report-score { display: flex; align-items: center; gap: 20px; }
.meter { display: grid; grid-template-columns: repeat(10, 9px); gap: 2px; }
.meter i { width: 9px; height: 9px; background: var(--pt-sparse); outline: 1px solid var(--hair); outline-offset: -1px; }
.meter i.on { background: var(--frame); outline: 0; }
.score-n { font-family: var(--display); font-size: clamp(56px, 7vw, 88px); line-height: 0.9; letter-spacing: -0.05em; color: var(--text-1); }
.score-n span { font-family: var(--px); font-size: 15px; letter-spacing: 0; color: var(--text-3); margin-left: 6px; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.report-prompt { width: 100%; min-height: 56px; padding: 0 24px; font-size: 16px; }
.report-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--px); font-size: 13px; color: var(--text-3); }
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.report-cats { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0 32px; border-top: 1px solid var(--frame); }
@media (min-width: 760px) { .report-cats { grid-template-columns: 1fr 1fr; } }
.report-cats li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--text-1); }
.cat-n { font-family: var(--px); font-size: 13px; color: var(--text-3); }
.report-cats li:not(.ok) .cat-n { color: var(--text-1); }
.report-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; }
.finding details { border: 1px solid var(--hair); }
.finding summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; color: var(--text-1); }
.finding summary::-webkit-details-marker { display: none; }
.finding-mark { flex: none; min-width: 64px; padding: 1px 6px; text-align: center; font-family: var(--px); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--frame); }
.sev-high .finding-mark { background: var(--frame); color: var(--ground); }
.sev-medium .finding-mark { background: var(--pt-half); color: var(--text-1); text-shadow: 0 0 3px var(--ground), 0 0 3px var(--ground); }
.finding.ok .finding-mark { border-color: var(--hair); background: none; color: var(--text-3); text-shadow: none; }
.finding.ok .finding-title { color: var(--text-2); }
.finding-body { display: grid; gap: 8px; padding: 0 14px 14px 90px; }
@media (max-width: 600px) { .finding-body { padding-left: 14px; } }
.finding-ev { font-family: var(--px); font-size: 13px; color: var(--text-3); overflow-wrap: anywhere; }
.finding-verify { margin: 0; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--hair); color: var(--text-1); }
.report-passed { margin-top: 12px; }
.report-passed > summary { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); cursor: pointer; list-style: none; font-family: var(--px); font-size: 14px; color: var(--text-1); }
.report-passed > summary::-webkit-details-marker { display: none; }
.report-passed > summary::before { content: "+"; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--frame); }
.report-passed[open] > summary::before { content: "\2212"; }
.report-scope { margin-top: 16px; font-family: var(--px); font-size: 13px; color: var(--text-3); }
.report-deep { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--frame); display: grid; gap: 10px; justify-items: start; }
.report-deep h3 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -0.02em; }
.report-deep p { max-width: 62ch; }
.deep-steps { display: grid; gap: 8px; justify-items: start; }
.deep-steps pre { margin: 0; padding: 8px 10px; border: 1px solid var(--hair); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-1); }

.prompt-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 24px;
  color: var(--text-2); background: var(--ground); border: 1px solid var(--frame); box-shadow: 8px 8px 0 var(--frame);
}
.prompt-dialog::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.prompt-dialog h3 { font-size: 24px; letter-spacing: -0.02em; }
.prompt-count { margin-top: 4px; font-family: var(--px); font-size: 13px; color: var(--text-3); }
.prompt-presets { display: flex; gap: 8px; margin-top: 14px; }
.prompt-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; max-height: 46vh; overflow: auto; }
.prompt-list label { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 8px; cursor: pointer; }
.prompt-list label:hover { background: rgba(var(--ink-rgb), 0.06); }
.prompt-list input { grid-row: span 2; margin-top: 3px; accent-color: var(--accent); }
.prompt-t { color: var(--text-1); }
.prompt-s { font-family: var(--px); font-size: 12px; color: var(--text-3); }
.prompt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Chapters after the 2026-10-23 restructure. */
.map-one { margin-top: 12px; max-width: 40ch; }
.map-one strong { color: var(--text-1); font-weight: 500; }
.limits { margin-top: clamp(56px, 7vw, 96px); }
.limits .road-title { margin-top: 0; }
.limits-one { margin-top: 16px; max-width: 64ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-1); }
.limits .road + .limits-one { margin-top: 20px; font-size: 17px; color: var(--text-2); }
.tour-video { margin: 40px 0 0; }
.tour-video video { display: block; width: 100%; height: auto; border: 1px solid var(--frame); background: var(--ground); box-shadow: 6px 6px 0 var(--frame); }
.tour-video figcaption, .tour-shots figcaption { margin-top: 10px; }
.tour-shots { margin-top: 32px; display: grid; gap: 24px; }
@media (min-width: 860px) { .tour-shots { grid-template-columns: 1fr 1fr; } }
.tour-shots figure { margin: 0; }
.tour-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--frame); }
.about-text + .about-text { margin-top: 20px; }
.about { padding-bottom: clamp(96px, 12vw, 160px); }
.about-text { margin-top: 28px; max-width: 60ch; font-family: var(--display); font-size: clamp(21px, 2.3vw, 28px); line-height: 1.35; letter-spacing: -0.01em; color: var(--text-1); }
.about-contact { margin-top: 20px; max-width: 64ch; }
.about .by { margin-top: 48px; }

/* /terms: the live check's terms, a plain reading page. */
.terms { max-width: 720px; margin: 0 auto; padding: 64px var(--gutter) 120px; }
.terms h1 { margin-top: 12px; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -0.035em; }
.terms h2 { max-width: none; margin-top: 48px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; }
.terms p, .terms ul, .terms ol, .terms pre { margin-top: 14px; }
.terms li + li { margin-top: 6px; }
.terms pre { padding: 12px 14px; border: 1px solid var(--hair); overflow-x: auto; }
.terms-for { font-family: var(--px); font-size: 13px; color: var(--text-3); }
/* Landing pages (site/pages/): the terms frame, plus the live check as the one call to action. */
.land-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 28px 0 8px; }
.land-cta .btn { text-decoration: none; }
.land-cta span { font-family: var(--px); font-size: 13px; color: var(--text-3); }
.land-foot { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--hair); font-family: var(--px); font-size: 13px; color: var(--text-3); }

/* Consent before a check: a heavy blur over the page, the terms in plain
 * words, and slide to scan, after the first iPhone's slide to unlock. The
 * track is a brushed plate; the thumb a square key; the label shimmers. */
.consent {
  width: min(560px, calc(100vw - 32px)); padding: 28px; color: var(--text-2);
  background: var(--ground); border: 1px solid var(--frame); box-shadow: 10px 10px 0 var(--frame);
}
.consent::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(28px) saturate(0.6); backdrop-filter: blur(28px) saturate(0.6); }
.consent-eyebrow { font-family: var(--px); font-size: 13px; color: var(--text-3); }
.consent h3 { margin-top: 4px; font-size: clamp(26px, 4vw, 36px); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.consent-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.consent-list li { position: relative; padding-left: 22px; color: var(--text-1); }
.consent-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--frame); }
.consent-terms { margin-top: 16px; font-size: 15px; }
.consent-cancel { margin-top: 14px; }

.slide {
  --p: 0%;
  position: relative; margin-top: 22px; height: 64px;
  background:
    linear-gradient(90deg, rgba(0, 0, 237, 0.55) 0 var(--p), transparent var(--p)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 50%, rgba(0, 0, 0, 0.35)),
    color-mix(in srgb, rgb(var(--ink-rgb)) 10%, var(--ground));
  border: 1px solid rgba(var(--ink-rgb), 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.slide.back { transition: --p 240ms var(--out); }
.slide-label {
  position: absolute; inset: 0; display: grid; place-items: center; padding-left: 56px; pointer-events: none;
  font-family: var(--display); font-size: 21px; letter-spacing: 0.01em;
  color: transparent;
  background: linear-gradient(100deg, rgba(var(--ink-rgb), 0.35) 40%, rgb(var(--ink-rgb)) 50%, rgba(var(--ink-rgb), 0.35) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .slide-label { animation: none; color: rgba(var(--ink-rgb), 0.7); background: none; } }
.slide input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.slide input[type="range"]:active { cursor: grabbing; }
.slide input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slide input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.slide input[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.slide input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 56px; height: 56px; margin-top: 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, 0.5);
  /* The arrow: a pixel chevron, /media/slide-arrow.svg (the CSP allows no data: images). */
  background-image: url("/media/slide-arrow.svg"), linear-gradient(180deg, #ffffff, #c9c9c6 55%, #a9a9a6);
  background-size: 22px 22px, auto; background-position: center; background-repeat: no-repeat;
}
.slide input[type="range"]::-moz-range-thumb {
  width: 56px; height: 56px; border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.5);
  background-image: url("/media/slide-arrow.svg"), linear-gradient(180deg, #ffffff, #c9c9c6 55%, #a9a9a6);
  background-size: 22px 22px, auto; background-position: center; background-repeat: no-repeat;
}

/* Fix mode (ui.js): once a check starts, the hero steps aside and the report
 * takes the top of the screen. One blue button, Prompt to fix, on the right;
 * every other control is white (the ink colour, so black in the light
 * theme), so the eye lands on blue. */
/* --fix-top: where the header ends, measured by ui.js (the logotype scales with the viewport). */
.hero[data-mode="fix"] .hero-text { min-height: 0; justify-content: flex-start; padding-top: var(--fix-top, calc(var(--ticker-h) + 140px)); }
.hero[data-mode="fix"] .hero-text::before { top: 0; background: rgba(var(--ground-rgb), 0.82); }
.hero[data-mode="fix"] :is(.problem, .scan, .pills, h1, .lede, .hero-actions, .note),
.hero[data-mode="fix"] .loop { display: none; }
.hero[data-mode="fix"] .report { margin-top: 0; max-width: none; width: 100%; }
.report-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 20px; }
.report-back {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 14px 0 10px;
  font: 14px / 1 var(--px); color: var(--text-1); background: none; border: 1px solid var(--hair); cursor: pointer;
}
.report-back::before { content: ""; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.report-back:hover { border-color: var(--frame); }
.report-mode { font-family: var(--px); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.report-side { display: grid; gap: 14px; }
.report-score { justify-content: flex-end; }
@media (max-width: 759px) { .report-score { justify-content: flex-start; } }
.report-clean { color: var(--text-1); }
.btn-white { --btn-bg: var(--frame); --btn-fg: var(--ground); --btn-bd: var(--frame); }
.btn-white:hover { --btn-bg: rgba(var(--ink-rgb), 0.82); --btn-fg: var(--ground); --btn-bd: transparent; }
.cmd-white { --cmd-bd: var(--frame); --cmd-act-fg: var(--ground); --cmd-act-bg: var(--frame); --cmd-act-bd: var(--frame); background: var(--frame); color: var(--ground); }
.cmd-white code, .cmd-white .cmd-prompt { color: var(--ground); }
.report-deep .cmd { max-width: 100%; }