:root {
  /* Brand palette. */
  --black: #0b0b0b;
  --paper: #efeee9;
  --acid: #c8f224;
  --display: "Archivo Black", Impact, Haettenschweiler, sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;

  /* Theme tokens. Dark is the default for everyone, whatever the OS setting;
     data-theme="light" on <html> (set by the visitor's choice) swaps them below.
     --accent is lime as a fill (buttons, highlights, frames); --accent-text is
     lime as text or a thin line on the page, which light mode darkens to pass AA. */
  color-scheme: dark;
  --bg: var(--black);
  --fg: var(--paper);
  --fg-soft: #b8b7b0;
  --fg-docs: #c4c3bb;
  --fg-label: #b4b3aa;
  --muted: #85847c;
  --line: rgba(239, 238, 233, 0.18);
  --accent: var(--acid);
  --accent-text: var(--acid);
  --on-accent: var(--black);
  --control-edge: var(--acid);
  /* Cards (the install card, the team form, the thank-you card) are opaque with a
     softer copy of the grain, so the lime slab offset behind them (--frame-fill,
     edged in --frame) shows only past their edges. In dark this is the old 60%
     black card over the page, flattened: the same colour, the grain at 40%. */
  --surface: var(--black);
  --surface-grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3CfeColorMatrix values=%220 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.016 0%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  --frame: var(--acid);
  --frame-fill: var(--acid);
  /* How far the highlighter band in the card titles runs past the words. On the
     dark card the band's end is the only edge a closing period has, so it runs a
     little past; on paper the ink shows either way and light keeps its band. */
  --highlight-reach: .08em;
  --focus: var(--acid);
  --focus-on-accent: var(--paper);
  /* The install prompt and code blocks stay dark in both themes. */
  --code-bg: #171915;
  --code-fg: #f3f4ea;
  --grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3CfeColorMatrix values=%220 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

/* Light theme: paper background with visible dark grain, near-black text, lime
   kept as a fill (highlights, buttons, frames) with dark text on it. */
:root[data-theme="light"] {
  color-scheme: light;
  /* Under the grain this paper averages #ecebe7 (the browser chrome color); its
     darkest 1% of grain specks is about #d7d6d1. Text colors pass AA on both. */
  --bg: #fbfaf5;
  --fg: #0b0b0b;
  --fg-soft: #3a3934;
  --fg-docs: #34332f;
  --fg-label: #4a4943;
  --muted: #57564f;
  --line: rgba(11, 11, 11, .2);
  --accent-text: #4a5c05;
  --control-edge: var(--black);
  --surface: #fefdfa;
  --frame: var(--black);
  --highlight-reach: 0em;
  --focus: var(--black);
  --focus-on-accent: var(--black);
  --grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 -0.12%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  --surface-grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 -0.07%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  /* Grain: a tiled SVG noise tile behind everything, drawn once by the browser. */
  background-image: var(--grain);
  font-family: var(--mono);
  overflow-x: hidden;
}

a { color: inherit; }
a:hover { color: var(--accent-text); }

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

.site-shell {
  display: flex;
  flex-direction: column;
  width: min(1440px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  /* The top was up to 48 px; the two-row top bar (September 28) starts a little
     higher so the home page's Copy prompt stays on a laptop's first screen. */
  padding: clamp(22px, 3vw, 40px) clamp(20px, 5vw, 76px) 28px;
}
/* Column flex items default to min-width:auto, so a long display word would widen the
   whole shell past the viewport instead of staying inside its section. */
.site-shell > * { min-width: 0; }

.topbar, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

/* Top bar, the same on every page (Sterling's sketch, September 28): the wordmark
   on the left and a small sun/moon theme button on the right, then a row of
   buttons under them: Docs, and the Discord (flag discord). No logo, status line,
   year or sound control up here; the home page's sound button is in its footer. */
.topbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.04em;
  text-decoration: none;
}
.wordmark:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.wordmark-dot, .footer-x { color: var(--accent-text); }

/* Logo option 03 (the cracked circle), in the light theme's footer only (Sterling
   took it out of the top bar on September 28). It is loading="lazy", so a
   dark-theme visit never downloads it. Its size is fixed at 64 px and matches the
   files in each srcset at 1x, 2x and 3x, so the browser draws the grain pixel for
   pixel instead of resampling it. Change the size here only together with the
   pages' width/height/srcset and scripts/build-sannr-mark.py. */
.brand-mark { display: none; flex: none; }
:root[data-theme="light"] .brand-mark { display: block; }
.footer .brand-mark, .guide-footer .brand-mark { width: 64px; height: 64px; }
.guide-footer-brand { display: inline-flex; align-items: center; }
.guide-footer .brand-mark { margin-right: 14px; }
:root[data-theme="light"] .guide-footer { align-items: center; }

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sound-toggle:hover, .sound-toggle:focus-visible { border-color: var(--accent-text); color: var(--accent-text); }
.sound-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* On the home page the sound button closes the footer row, on the right. */
.footer .sound-toggle { margin-left: auto; }
.sound-toggle.is-on { border-color: var(--accent-text); color: var(--accent-text); }
.sound-icon { display: grid; place-items: center; width: 14px; height: 14px; }
.sound-icon svg { display: block; grid-area: 1 / 1; }
/* One icon per state: the pair is stacked in a single grid cell so the
   button never changes width when the label flips. */
.sound-toggle .icon-on, .sound-toggle.is-on .icon-off { display: none; }
.sound-toggle.is-on .icon-on { display: block; }
.sound-label { min-width: 62px; text-align: left; }

/* Theme toggle: dark by default, light on request. A square icon button: a sun in
   dark (it offers light), a filled moon in light (pressed; it goes back to dark).
   Its accessible name is "Light theme" with aria-pressed. Hidden without
   JavaScript (the page is dark and complete without it); the head script adds
   .js. The icon and the pressed look follow the root attribute, so they are right
   from the first paint. */
.theme-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--fg-soft);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent-text); color: var(--accent-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-icon { display: block; flex: none; fill: none; }
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; fill: currentColor; }
:root[data-theme="light"] .theme-toggle { border-color: var(--fg); color: var(--fg); }

/* Light theme: the lime dot of the wordmark (and the footer x) keeps its lime,
   outlined in ink so it still reads on paper. */
:root[data-theme="light"] .wordmark-dot,
:root[data-theme="light"] .footer-x,
:root[data-theme="light"] .guide h1 span {
  color: var(--acid);
  -webkit-text-stroke: 2px var(--black);
  paint-order: stroke fill;
}

/* Site navigation, the top bar's second row on every page: Docs (the one docs page)
   and the Discord (flag discord), as outlined buttons. Plain links, so it needs
   no script and works from the keyboard; on /docs, Docs carries
   aria-current="page", a border and a bar along its bottom in the accent (lime in
   dark, olive in light). */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px 7px;
  border: 1px solid var(--line);
  color: var(--fg-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.site-nav a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.site-nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent-text); color: var(--accent-text); }
.site-nav a[aria-current="page"] { border-color: var(--accent-text); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent-text); }
.site-nav-out { margin-left: 6px; }

.hero { padding: clamp(44px, 4.4vw, 64px) 0 clamp(60px, 8vw, 110px); }

h1, h2, p { margin-top: 0; }
.eyebrow { margin: 0 0 28px; color: var(--accent-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow span { margin-right: 8px; color: var(--fg); }

.hero-title {
  margin: 0 0 40px;
  font-family: var(--display);
  font-size: clamp(38px, 12.8vw, 96px);
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.hero-title span { display: inline-block; color: var(--accent); transform: rotate(-1.5deg); }
/* The hero's "remembers." sits on the lime highlighter in both themes (Sterling,
   September 28). Near-black on lime is 15.2:1; the light rule below sets the same look. */
.hero-title span { color: var(--on-accent); background: var(--acid); box-shadow: 0 0 0 .05em var(--acid); }

/* The hero is one column at every width (Sterling, September 28): the headline and
   the line under it, then the install card directly beneath, then the rest. The
   card grows with the page up to 860 px, which keeps the prompt near 90 characters
   a line; with the headline capped at 96 px and the top padding at 64 px, the
   card and the prompt start on the first screen at 1440x900 and 375x812. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.hero-grid > .install-card { max-width: 860px; }

/* The line under the headline: plain paper text, one step below the display face.
   One line on wide screens; it wraps where the column is narrower. */
.hero-sub { margin: 0 0 28px; color: var(--fg); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: .01em; text-wrap: pretty; }

.lede { max-width: 560px; margin: 0; color: var(--fg-soft); font-size: 16px; line-height: 1.65; letter-spacing: .02em; }
.motto { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.motto span { color: var(--accent); }
.side-notes { display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.side-notes a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.side-notes a:hover, .side-notes a:focus-visible { color: var(--accent-text); }

/* Invite form. The offset frame is a pseudo-element so the card itself stays a normal box.
   In both themes that frame is a lime slab, and it has to sit under the card's own
   opaque, grained surface. So the card, like the install card, the thank-you card and
   the video slot, does not isolate its stacking context: the slab (z-index -1) then
   paints just above the page background and below the card. */
.invite {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 14px 14px 0;
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  background: var(--surface) var(--surface-grain);
}
.invite::before { position: absolute; z-index: -1; inset: 14px -14px -14px 14px; content: ""; border: 1px solid var(--frame); background: var(--frame-fill); transform: rotate(2.2deg); pointer-events: none; }
.invite .eyebrow { margin: 0; }
.invite-title { margin: 0; font-size: clamp(36px, 3.2vw, 44px); line-height: .9; letter-spacing: -.05em; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.field .req { color: var(--accent-text); }
.field .opt { letter-spacing: .08em; }
.field input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .02em;
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent-text); }
.field input.is-invalid { border-color: var(--accent-text); }
.field-error, .invite-error { margin: 0; color: var(--accent-text); font-size: 12px; line-height: 1.6; letter-spacing: .04em; }
.invite-error a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.invite-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 16px 14px 19px;
  border: 1px solid var(--control-edge);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.invite-submit:hover, .invite-submit:focus-visible { transform: translate(3px, -3px); }
.invite-submit:focus-visible { outline: 2px solid var(--focus-on-accent); outline-offset: 2px; }
.invite-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.invite-submit .arrow { margin-left: 0; }
.invite-fine { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; letter-spacing: .04em; }

/* Launch banner (decision 41e, SITE_FLAGS=announced). */
.launch-banner { display: block; padding: 11px clamp(20px, 5vw, 76px); background: var(--accent); color: var(--on-accent); font-size: 12px; letter-spacing: .12em; text-align: center; text-transform: uppercase; text-decoration: none; }
.launch-banner:hover, .launch-banner:focus-visible { color: var(--on-accent); text-decoration: underline; text-underline-offset: 4px; }

/* Install card: the full prompt in the hero slot the invite form used to hold
   (INSTALL-03), and the same prompt panel on the thank-you pages. The docs pages
   use .prompt-box from docs/setup.css. Both copy through copy-prompt.js. */
.install-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 14px 14px 0;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  background: var(--surface) var(--surface-grain);
}
.install-card::before { position: absolute; z-index: -1; inset: 14px -14px -14px 14px; content: ""; border: 1px solid var(--frame); background: var(--frame-fill); transform: rotate(2.2deg); pointer-events: none; }
.install-card .eyebrow { margin: 0; }
.install-title { margin: 0; font-size: clamp(32px, 3vw, 42px); line-height: .9; letter-spacing: -.05em; }
/* The lime words in the card titles ("one prompt.", the thank-you card's "speed.")
   are near-black on a lime highlighter band in both themes: the band light gives
   every H2's second line, a marker band per line so a wrap stays clean. */
.install-title span,
.wait-card .motto span {
  margin: 0 calc(-1 * var(--highlight-reach));
  padding: 0 var(--highlight-reach);
  color: var(--on-accent);
  background: linear-gradient(to bottom, transparent 12%, var(--acid) 12%, var(--acid) 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.install-lede { margin: 0; color: var(--fg-soft); font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
/* Home card: the line that introduces the prompt, with Copy prompt at its right,
   above the prompt, so the button is on the first screen (Sterling, September 28).
   "Copied." appears to the left of the button, so the button does not move. Where
   the two do not fit on one line the button wraps under the line, on the left. */
.install-lede-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.install-lede-row .install-lede { flex: 1 1 300px; }
.install-lede-row .install-actions { gap: 0; }
.install-lede-row .copy-status { order: -1; }
.install-lede-row .copy-status:not(:empty) { margin-right: 14px; }
.install-prompt { border: 1px solid var(--acid); background: var(--code-bg); }
.install-prompt pre {
  margin: 0;
  padding: 16px 18px;
  color: var(--code-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.install-prompt pre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.install-actions .copy-button {
  padding: 13px 18px 12px;
  border: 1px solid var(--control-edge);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease;
}
.install-actions .copy-button:hover, .install-actions .copy-button:focus-visible { transform: translate(3px, -3px); }
.install-actions .copy-button:focus-visible { outline: 2px solid var(--focus-on-accent); outline-offset: 2px; }
.install-actions .copy-status { color: var(--accent-text); font-size: 12px; letter-spacing: .06em; }
.install-more { align-self: flex-start; color: var(--fg); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.install-more:hover, .install-more:focus-visible { color: var(--accent-text); }
/* Where to ask questions (flag discord): the last line of the install card. */
.install-help { margin: 0; color: var(--fg-soft); font-size: 13px; line-height: 1.5; letter-spacing: .02em; }
.install-help a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.install-help a:hover, .install-help a:focus-visible { color: var(--accent-text); }

.install-panel { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 640px; }

/* Team interest form, below "Teams that ship with agents". */
.team-form { display: flex; flex-direction: column; gap: 26px; max-width: 560px; }
.team-intro { margin: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.7; letter-spacing: .01em; }
.footer a { text-decoration: underline; text-underline-offset: 3px; }

.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 205px;
  padding: 15px 16px 14px 19px;
  border: 1px solid var(--accent-text);
  color: var(--accent-text);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.primary-link:hover, .primary-link:focus-visible { border-color: var(--control-edge); color: var(--on-accent); background: var(--accent); transform: translate(3px, -3px); }
.arrow { margin-left: 30px; font-size: 20px; line-height: .5; }
.scribble { display: inline-block; margin-right: 8px; color: var(--accent-text); font-size: 18px; transform: rotate(12deg); }

/* What's coming */
.coming { padding: 44px 0 70px; border-top: 1px solid var(--line); }
.coming-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: end; margin-bottom: 44px; }
.coming-intro { max-width: 480px; margin: 0; color: var(--fg-soft); font-size: 14px; line-height: 1.65; letter-spacing: .01em; }
/* The line under the cards for teams with no OpenAPI spec yet: the intro's voice, a little wider. */
.coming-note { max-width: 640px; margin: 36px 0 0; color: var(--fg-soft); font-size: 14px; line-height: 1.65; letter-spacing: .01em; }
.coming-note strong { color: var(--fg); font-weight: normal; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; gap: 18px; padding: 24px 22px 26px; border: 1px solid var(--line); }
.card:nth-child(1) { transform: rotate(-.6deg); }
.card:nth-child(2) { transform: rotate(.8deg); }
.card:nth-child(3) { transform: rotate(-.9deg); }
.card-n { color: var(--accent-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.card h3 { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.card p { margin: 0; color: var(--fg-soft); font-size: 14px; line-height: 1.65; }
.card em { color: var(--accent-text); font-style: normal; }

/* Depth sections: the explanatory blocks between the hero and the follow row.
   Same eyebrow / display heading / card vocabulary as "what's coming". */
.about { padding: 44px 0 48px; border-top: 1px solid var(--line); }
/* The about section opens with the three examples that used to sit in the hero:
   quieter than the display headings, a step above the paragraph under them. */
.about-lead { max-width: 780px; margin: 0 0 22px; color: var(--fg); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; letter-spacing: .01em; text-wrap: pretty; }
.about-text { max-width: 780px; margin: 0; color: var(--fg-soft); font-size: 16px; line-height: 1.7; letter-spacing: .01em; }
.block { padding: 44px 0 70px; border-top: 1px solid var(--line); }
.block-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: end; margin-bottom: 44px; }
.block-head.is-prose { align-items: start; margin-bottom: 0; }
.block-head .primary-link { justify-self: start; align-self: end; }
.block-intro { max-width: 480px; margin: 0; color: var(--fg-soft); font-size: 14px; line-height: 1.65; letter-spacing: .01em; }
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose p { max-width: 560px; margin: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.7; letter-spacing: .01em; }
.prose strong { color: var(--fg); font-weight: normal; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
/* File paths and commands in running copy read in the accent, like <em> in the cards. */
.about-text code, .block-intro code, .prose code, .card code, .faq-a code { font-family: inherit; color: var(--accent-text); }
.cards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.is-four .card:nth-child(4) { transform: rotate(.7deg); }
.terms { width: 100%; margin: 0; border-collapse: collapse; }
.terms th, .terms td { padding: 18px 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.terms th { width: 30%; padding-right: 30px; font-family: var(--display); font-size: clamp(16px, 1.6vw, 19px); font-weight: normal; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.terms td { max-width: 640px; color: var(--fg-soft); font-size: 14px; line-height: 1.65; letter-spacing: .01em; }

.follow {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: end;
  gap: 40px;
  padding: 44px 0 70px;
  border-top: 1px solid var(--line);
}
h2 { margin-bottom: 0; font-family: var(--display); font-size: clamp(40px, 5vw, 72px); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; }
h2 span { color: var(--accent); }

/* Six cards: one row of six, or two rows of three, or two columns, never an orphan. */
.socials { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.socials.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.socials a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  min-height: 116px;
  padding: 17px 14px;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.socials a:nth-child(2) { transform: rotate(1deg); }
.socials a:nth-child(3) { transform: rotate(-1deg); }
.socials a:nth-child(4) { transform: rotate(1.5deg); }
.socials a:nth-child(5) { transform: rotate(-1.5deg); }
.socials a:nth-child(6) { transform: rotate(1deg); }
.socials a.is-featured { border-color: var(--accent-text); }
.socials a:hover, .socials a:focus-visible { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-5px) rotate(0deg); }
.social-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; }
.social-icon svg { display: block; }

.signal-log { padding: 0 0 70px; border-top: 1px solid var(--line); }
.signal-log .eyebrow { margin: 44px 0 28px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; margin: 0; }
.faq-item { padding-top: 18px; border-top: 1px solid var(--line); }
.faq-q { margin: 0 0 8px; font-family: var(--display); font-size: clamp(16px, 1.6vw, 19px); letter-spacing: -.02em; text-transform: uppercase; }
.faq-a { margin: 0; max-width: 440px; color: var(--fg-soft); font-size: 14px; line-height: 1.65; letter-spacing: .01em; }
.faq-a em { color: var(--accent-text); font-style: normal; }

.footer { justify-content: flex-start; gap: 14px; color: var(--muted); }
.footer-x { font-size: 18px; }

/* Thank-you pages (/alpha/thanks, /alpha/already) */
.thanks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; padding: clamp(48px, 8vw, 100px) 0 clamp(60px, 7vw, 90px); }
.thanks.is-returning { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; }
.thanks.is-single { grid-template-columns: minmax(0, 1fr); }
.video-slot[hidden] { display: none; }
.thanks-copy { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.thanks-copy .eyebrow { margin: 0; }
.thanks-title { margin: 0; font-family: var(--display); font-size: clamp(36px, 6.2vw, 90px); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.thanks-title span { display: inline-block; color: var(--accent); transform: rotate(-1.5deg); }
.thanks-copy .lede { max-width: 520px; }
.thanks-copy .primary-link { min-width: 240px; padding: 17px 18px 16px 22px; font-size: 13px; }
.thanks-copy .arrow { font-size: 22px; }
.video-slot { position: relative; margin: 62px 18px 18px 0; }
.video-slot::before { position: absolute; z-index: -1; inset: 18px -18px -18px 18px; content: ""; border: 1px solid var(--frame); background: var(--frame-fill); transform: rotate(2.2deg); }
.video-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; aspect-ratio: 16 / 9; max-width: 100%; padding: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: 18px 18px 0 rgba(200, 242, 36, .92); text-align: center; }
.video-play { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--accent-text); border-radius: 50%; color: var(--accent-text); }
.video-label { color: var(--accent-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.video-note { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.wait-card { position: relative; display: flex; flex-direction: column; gap: 16px; margin: 0 14px 14px 0; padding: 30px 28px; border: 1px solid var(--line); background: var(--surface) var(--surface-grain); }
.wait-card::before { position: absolute; z-index: -1; inset: 14px -14px -14px 14px; content: ""; border: 1px solid var(--frame); background: var(--frame-fill); transform: rotate(-1.2deg); }
.wait-card .eyebrow { margin: 0; }
.wait-card .motto { font-size: 26px; letter-spacing: -.03em; }
.wait-card p:last-child { margin: 0; color: var(--fg-soft); font-size: 14px; line-height: 1.65; }
.follow.is-after { padding-bottom: 60px; }
.follow.is-after h2 { font-size: clamp(40px, 4vw, 56px); }

/* Light theme: lime text would fail contrast on paper, so the lime words in
   display type become near-black on a lime highlight. The rotated words
   ("remembers.", the thank-you titles) get a solid strip; words that can wrap
   get a marker band per line. box-shadow and gradients only, so nothing moves. */
:root[data-theme="light"] .hero-title span,
:root[data-theme="light"] .thanks-title span {
  color: var(--fg);
  background: var(--acid);
  box-shadow: 0 0 0 .05em var(--acid);
}
:root[data-theme="light"] h2 span:not(.step-number),
:root[data-theme="light"] .motto span {
  color: var(--fg);
  background: linear-gradient(to bottom, transparent 12%, var(--acid) 12%, var(--acid) 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Below this the two-up follow section squeezes the social row too tight, so stack it. */
@media (max-width: 1200px) {
  .follow { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 34px; }
  .socials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .coming-head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .block-head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .cards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thanks, .thanks.is-returning { grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
  .video-slot { margin-top: 0; }
}

@media (max-width: 720px) {
  .site-shell { padding: 18px 18px 24px; }
  .topbar { gap: 12px; padding-bottom: 16px; }
  .site-nav { gap: 8px; font-size: 11px; letter-spacing: .1em; }
  .site-nav a { min-height: 32px; padding: 7px 12px 6px; }
  .install-lede-row .copy-status { order: 0; }
  .install-lede-row .copy-status:not(:empty) { margin: 0 0 0 14px; }
  .hero { padding: 44px 0 70px; }
  .eyebrow { margin-bottom: 18px; font-size: 11px; }
  .hero-title { margin-bottom: 30px; line-height: .86; }
  .hero-sub { font-size: 15px; }
  .lede { max-width: 330px; font-size: 14px; }
  .motto { font-size: 24px; }
  .side-notes { gap: 10px; font-size: 11px; }
  .invite { gap: 16px; margin-right: 10px; margin-bottom: 10px; padding: 22px 18px 20px; }
  .invite::before { inset: 10px -10px -10px 10px; transform: rotate(-1.2deg); }
  .invite-title { font-size: 40px; }
  .install-card { gap: 14px; margin-right: 10px; margin-bottom: 10px; padding: 22px 16px 20px; }
  .install-card::before { inset: 10px -10px -10px 10px; transform: rotate(-1.2deg); }
  .install-title { font-size: 28px; }
  .install-lede { font-size: 13px; }
  .install-prompt pre { padding: 14px; font-size: 12px; }
  .launch-banner { padding: 10px 18px; font-size: 11px; }
  .field label, .invite-fine { font-size: 11px; }
  .coming { padding: 38px 0 60px; }
  .coming-head { margin-bottom: 28px; }
  .coming-note { margin-top: 26px; }
  .coming h2, .block h2 { margin-bottom: 0; font-size: 44px; }
  .about { padding: 34px 0 38px; }
  .about-lead { margin-bottom: 18px; font-size: 16px; }
  .about-text { font-size: 14px; }
  .block { padding: 38px 0 60px; }
  .block-head { margin-bottom: 28px; }
  .prose p { font-size: 14px; }
  .cards.is-four { grid-template-columns: minmax(0, 1fr); }
  .terms, .terms tbody, .terms tr, .terms th, .terms td { display: block; }
  .terms th { width: auto; padding: 18px 0 6px; }
  .terms td { padding-top: 0; border-top: 0; }
  .card { gap: 14px; padding: 20px 18px 22px; }
  .card h3 { font-size: 20px; }
  .thanks-title { font-size: clamp(36px, 11vw, 66px); }
  .video-slot { margin: 0 12px 12px 0; }
  .video-slot::before { inset: 12px -12px -12px 12px; }
  .video-frame { box-shadow: 11px 11px 0 rgba(200, 242, 36, .92); }
  .wait-card { padding: 22px 18px; }
  .follow { display: block; padding: 38px 0 66px; }
  h2 { margin-bottom: 30px; font-size: clamp(42px, 13vw, 68px); }
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .socials a { min-height: 108px; padding: 14px 12px; font-size: 9px; }
  .signal-log { padding-bottom: 60px; }
  .signal-log .eyebrow { margin: 38px 0 20px; }
  .faq-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .footer { flex-wrap: wrap; gap: 8px 14px; font-size: 9px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}