/* site.css — the landing page, and the whole of its design system in one file.
 *
 * Tokens, type scale and component geometry are the app's (docs/design/DESIGN.md, and the
 * stylesheet at assets/app.css). The one addition is the schematic panel, which is the only
 * place on this page where pixel art, phosphor glow and scanlines are permitted to exist.
 *
 * Sections: 1 fonts and tokens · 2 base · 3 chrome · 4 hero · 5 bands and prose · 6 the
 * schematic panel · 7 buttons, fields and chips · 8 the approval card · 9 tools and deploy ·
 * 10 closing and colophon · 11 small screens, print and motion.
 */

/* ---------------------------------------------------------------------------------------- */
/* 1. Fonts and tokens                                                                       */
/* ---------------------------------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/space-grotesk.woff2) format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format("woff2");
}

/* The pixel face. Chrome on a schematic frame only, and only at whole multiples of 11px. */
@font-face {
  font-family: "Departure Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/departure-mono.woff2) format("woff2");
}

:root {
  color-scheme: dark;

  --surface: #111317;
  --surface-lowest: #0c0e12;
  --surface-low: #1a1c20;
  --surface-container: #1e2024;
  --surface-high: #282a2e;
  --inset: #0a0b0e;

  --on-surface: #e2e2e8;
  --on-surface-variant: #bec8d2;
  --outline: #88929b;
  --outline-variant: #3e4850;
  --hairline: #2e3642;
  --hairline-faint: #1a1f28;

  --cyan: #89ceff;
  --cyan-strong: #0ea5e9;
  --emerald: #4edea3;
  --amber: #ffb95f;
  --crimson: #ffb4ab;
  --crimson-strong: #f43f5e;

  --primary-bg: #f8fafc;
  --primary-fg: #0f1115;

  --untrusted-bg: rgba(255, 185, 95, 0.06);
  --untrusted-line: rgba(255, 185, 95, 0.45);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.5rem;
  --s-7: 4rem;
  --section: 7.5rem;

  --content-max: 880px;
  --wide-max: 1200px;
  --measure: 68ch;

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font: "Geist", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pixel: "Departure Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------------------- */
/* 2. Base                                                                                   */
/* ---------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

code,
pre,
kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--cyan-strong);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--primary-bg);
  color: var(--primary-fg);
  padding: var(--s-2) var(--s-4);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.skip:focus {
  left: 0;
}

.link {
  color: var(--cyan);
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------------------- */
/* 3. Chrome                                                                                 */
/* ---------------------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}

.masthead-inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  height: 56px;
  padding: 0 var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.wordmark {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.wordmark:hover {
  text-decoration: none;
  color: var(--cyan);
}

.masthead-nav {
  display: flex;
  gap: var(--s-5);
  margin-left: auto;
}

.masthead-nav + .masthead-cta {
  margin-left: 0;
}

.masthead-nav a {
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.masthead-nav a:hover {
  color: var(--on-surface);
  text-decoration: none;
}

.masthead-cta {
  flex: none;
  margin-left: auto;
}

/* ---------------------------------------------------------------------------------------- */
/* 4. Hero                                                                                   */
/* ---------------------------------------------------------------------------------------- */

.hero {
  padding: var(--s-7) var(--s-5) var(--section);
  border-bottom: 1px solid var(--hairline);
}

.hero-inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--s-7);
  align-items: start;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
  margin-bottom: var(--s-5);
}

.hero-title {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.lede {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--on-surface-variant);
}

.hero-alt {
  margin-top: var(--s-4);
}

.hero-art {
  padding-top: var(--s-3);
}

/* ---------------------------------------------------------------------------------------- */
/* 5. Bands and prose                                                                        */
/* ---------------------------------------------------------------------------------------- */

.band {
  padding: var(--section) var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.band-wide > .panel,
.band-wide > .card-wrap {
  max-width: var(--wide-max);
  margin: 0 auto;
}

.prose {
  max-width: var(--content-max);
  margin: 0 auto;
}

.prose-tight {
  margin-top: var(--s-7);
}

.prose h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
}

.prose p {
  max-width: var(--measure);
  color: var(--on-surface-variant);
  margin-bottom: var(--s-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose code {
  font-size: 0.875em;
  color: var(--on-surface);
}

.footnote {
  max-width: var(--content-max);
  margin: var(--s-6) auto 0;
  font-size: 0.8125rem;
  color: var(--outline);
}

/* A wire transcript. Machine output, so mono, inset, and hairline-bounded. */
.wire {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--inset);
  border: 1px solid var(--hairline);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.w-actor { color: var(--outline); }
.w-key { color: var(--cyan); }
.w-str { color: var(--on-surface); }
.w-note { color: var(--amber); }

/* ---------------------------------------------------------------------------------------- */
/* 6. The schematic panel                                                                    */
/* ---------------------------------------------------------------------------------------- */

/* The one component the app forbids itself. Everything retro is inside this rectangle: the
 * pixel art, the phosphor, the scanlines and the vignette. Nothing bleeds past the border. */
.panel {
  margin: 0;
  border: 1px solid var(--hairline);
  background: var(--surface-lowest);
}

.panel-bar {
  height: 32px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-low);
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

.panel-title {
  margin-right: auto;
  color: var(--on-surface-variant);
}

.panel-step {
  color: var(--outline);
}

.panel-replay {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--outline);
  font: inherit;
  padding: 0 var(--s-2);
  height: 18px;
  line-height: 16px;
  cursor: pointer;
}

.panel-replay:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.panel-art {
  position: relative;
  padding: var(--s-5);
  background:
    linear-gradient(180deg, rgba(137, 206, 255, 0.03), transparent 42%),
    var(--inset);
}

.panel-art .art {
  display: block;
  width: 100%;
  height: auto;
}

/* Two static overlays. Neither animates; the art does. */
.panel-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(226, 226, 232, 0.06) 0 1px,
    transparent 1px 3px
  );
}

.panel-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 45%,
    transparent 52%,
    rgba(10, 11, 14, 0.55) 100%
  );
}

.panel-caption {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-low);
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.caption-measure {
  display: block;
  max-width: 96ch;
}

.panel-caption code {
  font-size: 0.875em;
  color: var(--on-surface);
}

/* The phosphor edge. The app's glow rule: a 1px stroke and a 2px blur, and no further. */
.art .lit {
  filter: drop-shadow(0 0 2px currentColor);
}

/* ---------------------------------------------------------------------------------------- */
/* 7. Buttons, fields and chips                                                              */
/* ---------------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: none;
  color: inherit;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border-color: var(--primary-bg);
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--cyan-strong);
  border-color: var(--cyan-strong);
  color: #00151f;
}

.btn-ghost {
  border-color: var(--hairline);
  color: var(--on-surface-variant);
}

.btn-ghost:hover {
  border-color: var(--on-surface);
  color: var(--on-surface);
}

.btn-ghost:hover::after {
  content: "";
  width: 3px;
  height: 3px;
  margin-left: var(--s-2);
  background: var(--cyan);
}

/* The waiting-list pair: one field and one button inside one hairline rectangle. */
.waitlist {
  margin-top: var(--s-6);
  max-width: 34rem;
}

.waitlist-row {
  display: flex;
  border: 1px solid var(--hairline);
  background: var(--inset);
}

.waitlist-row:focus-within {
  border-color: var(--cyan-strong);
}

.waitlist-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--s-4);
  background: transparent;
  border: 0;
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 0.9375rem;
}

.waitlist-input::placeholder {
  color: var(--outline);
}

.waitlist-input:focus {
  outline: none;
}

.waitlist .btn-primary {
  height: 44px;
  flex: none;
}

/* The consent box. A 14px square with the page's own hairline, filled cyan when it is ticked,
 * because the design system has no rounded control and no tick mark of its own. */
.waitlist-optin {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--outline);
  cursor: pointer;
}

.waitlist-optin input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 3px 0 0;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--inset);
  cursor: pointer;
}

.waitlist-optin input:checked {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 3px var(--inset);
}

.waitlist-optin input:focus-visible {
  outline: 1px solid var(--cyan-strong);
  outline-offset: 2px;
}

.waitlist-optin a {
  color: var(--cyan);
}

/* Brevo's honeypot. No person is ever shown it, so anything in it came from a script. */
.waitlist-trap {
  display: none;
}

.waitlist-note {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--outline);
  max-width: 52ch;
}

.waitlist-result {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--emerald);
}

.waitlist[data-invalid] .waitlist-row,
.waitlist[data-invalid] .waitlist-optin input {
  border-color: var(--crimson-strong);
}

.waitlist button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.waitlist[data-invalid] .waitlist-result {
  color: var(--crimson);
}

/* Chips. 8% tint, 20% border, a 4px square pip, one word. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 20px;
  padding: 0 var(--s-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pip {
  width: 4px;
  height: 4px;
  background: currentColor;
  display: block;
}

.chip-amber {
  color: var(--amber);
  background: rgba(255, 185, 95, 0.08);
  border: 1px solid rgba(255, 185, 95, 0.2);
}

.chip-emerald {
  color: var(--emerald);
  background: rgba(78, 222, 163, 0.08);
  border: 1px solid rgba(78, 222, 163, 0.2);
}

.chip-crimson {
  color: var(--crimson);
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.2);
}

.chip-cyan {
  color: var(--cyan);
  background: rgba(137, 206, 255, 0.08);
  border: 1px solid rgba(137, 206, 255, 0.2);
}

.chip-neutral {
  color: var(--outline);
  border: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------------------------------- */
/* 8. The approval card                                                                      */
/* ---------------------------------------------------------------------------------------- */

.card-wrap {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
}

.card {
  width: 100%;
  max-width: var(--content-max);
  border: 1px solid var(--hairline);
  background: var(--surface-container);
  padding: var(--s-5);
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

.card-expiry {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--amber);
}

.approval-sentence {
  margin-top: var(--s-5);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--on-surface);
}

.approval-sentence strong {
  font-weight: 600;
}

.approval-who {
  margin-top: var(--s-2);
  font-size: 0.8125rem;
  color: var(--outline);
}

.approval-who code {
  font-size: 0.875em;
}

.untrusted {
  margin-top: var(--s-5);
  border-left: 1px solid var(--untrusted-line);
  background: var(--untrusted-bg);
  padding: var(--s-3) var(--s-4);
}

.untrusted-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}

.untrusted-body {
  margin: var(--s-2) 0 0;
  font-size: 0.9375rem;
  color: var(--on-surface-variant);
}

.facts {
  margin: var(--s-5) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.facts div {
  border-top: 1px solid var(--hairline-faint);
  padding-top: var(--s-2);
}

.facts dt {
  color: var(--outline);
  letter-spacing: 0.06em;
}

.facts dd {
  margin: var(--s-1) 0 0;
  color: var(--on-surface);
}

.disclosure {
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline-faint);
}

.disclosure summary {
  padding: var(--s-3) 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::before {
  content: "› ";
  display: inline-block;
  width: 1em;
}

.disclosure[open] summary::before {
  content: "⌄ ";
}

.raw {
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  background: var(--surface-lowest);
  border: 1px solid var(--hairline-faint);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--on-surface-variant);
  overflow-x: auto;
  white-space: pre-wrap;
}

.card-form {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.note-input {
  height: 36px;
  padding: 0 var(--s-3);
  background: var(--inset);
  border: 1px solid var(--hairline);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 0.875rem;
}

.note-input:focus {
  outline: none;
  border-color: var(--cyan-strong);
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* The in-place undo. The button keeps its exact size and position and becomes the window. */
.btn-commit {
  position: relative;
  overflow: hidden;
  min-width: 15.5rem;
}

.commit-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--amber);
}

.commit-label {
  position: relative;
}

.card[data-state="undo"] .btn-commit {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
}

.card[data-state="undo"] .btn-commit:hover {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
}

.card[data-state="undo"] .commit-fill {
  background: rgba(255, 185, 95, 0.28);
}

.card[data-state="undo"][data-late] .btn-commit {
  border-color: var(--emerald);
  color: var(--emerald);
}

.card[data-state="undo"][data-late] .commit-fill {
  background: rgba(78, 222, 163, 0.28);
}

.card[data-state="undo"] [data-deny] {
  opacity: 0.3;
  pointer-events: none;
}

.card[data-state="executed"] .card-form,
.card[data-state="denied"] .card-form {
  display: none;
}

.card-notice {
  margin-top: var(--s-4);
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.card-notice button {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--outline);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 2px var(--s-2);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------- */
/* 9. Tools and deploy                                                                       */
/* ---------------------------------------------------------------------------------------- */

.tool-grid {
  max-width: var(--wide-max);
  margin: var(--s-7) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
}

.tool-group-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}

.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name chip" "scope chip";
  align-items: center;
  gap: 0 var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline-faint);
}

.tool-row:hover {
  box-shadow: inset 2px 0 0 var(--cyan);
}

.tool-name {
  grid-area: name;
  font-size: 0.875rem;
  color: var(--on-surface);
}

.tool-scope {
  grid-area: scope;
  font-size: 0.6875rem;
  color: var(--outline);
}

.tool-row .chip {
  grid-area: chip;
}

.spec-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.spec-list li {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline-faint);
}

.spec-k {
  width: 6rem;
  flex: none;
  color: var(--outline);
  letter-spacing: 0.06em;
}

.spec-v {
  color: var(--on-surface-variant);
}

/* ---------------------------------------------------------------------------------------- */
/* 10. Closing and colophon                                                                  */
/* ---------------------------------------------------------------------------------------- */

.closing {
  border-bottom: 0;
}

.closing-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

.closing-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.closing .waitlist-closing {
  margin: var(--s-6) auto 0;
}

.closing .waitlist-note,
.closing .waitlist-result,
.closing .hero-alt {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* The consent box is a flex row, so centring it is a justify, not a text-align. It is held to
 * the width of the field above it, or the box hangs off the side of a narrower paragraph. */
.closing .waitlist-optin {
  justify-content: center;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.colophon {
  border-top: 1px solid var(--hairline);
  padding: var(--s-6) var(--s-5);
}

.colophon-inner {
  max-width: var(--wide-max);
  margin: 0 auto;
}

.colophon-line {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--outline);
}

.colophon-fine {
  margin-top: var(--s-3);
  max-width: 80ch;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--outline-variant);
}

.colophon-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-4);
}

.colophon-nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}

.colophon-nav a:hover {
  color: var(--on-surface);
  border-bottom-color: var(--cyan);
}

/* ---------------------------------------------------------------------------------------- */
/* 10b. The legal pages                                                                      */
/* ---------------------------------------------------------------------------------------- */

/* A document, not a landing page: no schematic, no motion, no script. The measure is held at
 * 72 characters, which is where a clause stops being comfortable to read, and the table of
 * contents parks in the margin on a wide screen and above the text on a narrow one. */
.legal {
  padding: var(--s-7) var(--s-5) calc(var(--s-7) * 1.5);
}

.legal-inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: var(--s-6);
  border-left: 1px solid var(--hairline);
  padding-left: var(--s-4);
}

.legal-toc-title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline-variant);
  margin-bottom: var(--s-3);
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.legal-toc li {
  margin-bottom: var(--s-2);
  line-height: 1.35;
}

.legal-toc a {
  font-size: 0.8125rem;
  color: var(--outline);
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--cyan);
}

.legal-body {
  max-width: 72ch;
}

.legal-body h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
}

.legal-body h2 {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

/* An h2 draws its own rule. The first heading of a document needs none above it, and neither
 * does one that a horizontal rule in the source already separated. */
.legal-body h1 + h2,
.legal-body h2:first-of-type,
.legal-body hr + h2 {
  border-top: 0;
  padding-top: 0;
}

.legal-body h1 + h2,
.legal-body h2:first-of-type {
  margin-top: var(--s-6);
}

.legal-body hr + h2 {
  margin-top: 0;
}

.legal-body h3 {
  font-family: var(--display);
  font-size: 1.0625rem;
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--on-surface);
}

.legal-body p {
  margin-bottom: var(--s-4);
  line-height: 1.65;
  color: var(--on-surface-variant);
}

.legal-body strong {
  color: var(--on-surface);
  font-weight: 600;
}

.legal-body a {
  color: var(--cyan);
}

.legal-body code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--inset);
  border: 1px solid var(--hairline);
  padding: 1px 4px;
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
  color: var(--on-surface-variant);
}

.legal-body li {
  margin-bottom: var(--s-2);
  line-height: 1.6;
}

.legal-body hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s-7) 0;
}

/* A wide table on a narrow screen scrolls in its own box rather than pushing the page sideways. */
.legal-table {
  overflow-x: auto;
  margin: 0 0 var(--s-5);
  border: 1px solid var(--hairline);
}

.legal-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  font-size: 0.875rem;
}

.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.legal-table th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
  background: var(--inset);
}

/* ---------------------------------------------------------------------------------------- */
/* 11. Small screens, print and motion                                                       */
/* ---------------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --section: 4rem;
    --s-7: 2.5rem;
  }

  .masthead-nav {
    display: none;
  }

  .hero,
  .band {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }

  .panel-art {
    padding: var(--s-3);
  }

  .waitlist-row {
    flex-direction: column;
  }

  .legal-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .legal-toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: var(--s-4);
  }

  .waitlist .btn-primary {
    width: 100%;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .btn-commit {
    min-width: 0;
  }
}

@media print {
  .masthead,
  .panel-scan,
  .panel-vignette,
  .panel-replay {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* A reader who asked for less motion gets the settled frame and nothing that moves. The
 * timelines are also never built in site.js, so this is belt and braces, not the only guard. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .panel-scan {
    display: none;
  }

  .art .lit {
    filter: none;
  }

  .panel-replay {
    display: none;
  }
}