/*
 * awo.so — the one stylesheet.
 *
 * Replaces three stacked sheets (a datasheet theme, a "warmth pass" over it,
 * and a dark glass-and-glow layer over that). The site shares the Studio's
 * tokens so the product and its website are one thing: paper, ink, one
 * orange, IBM Plex, and Archivo for the display line.
 *
 * Structure comes from spacing, rules and type — not from boxes. The few
 * bordered panels left are ones with a job: the worked example in the hero,
 * a tab's detail pane, a terminal transcript, the closing band.
 */

/* ── Type, self-hosted ─────────────────────────────────────────────── */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/marketing/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/marketing/fonts/plex-sans-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/marketing/fonts/plex-sans-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/marketing/fonts/plex-sans-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/marketing/fonts/plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/marketing/fonts/plex-mono-500-latin.woff2") format("woff2");
}

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --paper: #f5f5f3;
  --surface: #ffffff;
  --surface-hover: #ebebe8;
  --surface-active: #dfdfdb;

  --ink: #14181f;
  --line-faint: #e6e6e2;
  --line: #cfd0cb;
  --line-strong: var(--ink);

  --text: var(--ink);
  --text-secondary: #4a515c;
  --text-tertiary: #6f7681;
  --text-on-accent: var(--ink);

  --accent: #e8541a;
  --accent-hover: #cf4712;
  --accent-soft: rgb(232 84 26 / 10%);

  --ok: #1a7f4b;
  --warn: #9a5b00;
  --err: #c22a1b;

  --invert-bg: var(--ink);
  --invert-text: #e4e7ec;
  --invert-muted: #9aa3b0;
  --invert-line: #2e3642;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One scale. h1 and h2 are the only things above body size. */
  --text-xs: 0.6875rem; /* 11 */
  --text-sm: 0.8125rem; /* 13 */
  --text-md: 0.9375rem; /* 15 */
  --text-base: 1rem; /* 16 */
  --text-lede: 1.1875rem; /* 19 */
  --text-h3: 1.0625rem; /* 17 */
  --text-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-h1: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
  --text-figure: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);

  --leading: 1.55;
  --leading-tight: 1.15;

  --measure: 62ch;

  /* 8px rhythm; half-step for chrome. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --radius: 3px;
  --wrap: 1080px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, var(--s9));
  --control: 38px;
  --control-lg: 44px;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── Base ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
figure,
pre,
table {
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 28ch;
  text-wrap: balance;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 120ms var(--ease);
}
a:hover {
  text-decoration-color: var(--accent);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--surface-hover);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

strong {
  font-weight: 600;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Shared vocabulary ─────────────────────────────────────────────── */

/* The small label: a part number, set in mono. Used above a group, never as
   decoration on its own. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mono {
  font-family: var(--font-mono);
}

.muted {
  color: var(--text-secondary);
}

.lead,
.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* Body copy under a heading. */
.measure {
  max-width: var(--measure);
}

/* The onward link at the foot of a block. No arrow glyph: the accent
   underline is the site's mark for "this goes somewhere", resting here
   where other links only earn it on hover. */
.more {
  display: inline-block;
  margin-top: var(--s4);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration-color: var(--accent);
}
.more:hover {
  text-decoration-color: var(--accent-hover);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--control);
  padding: 0 var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 120ms var(--ease),
    border-color 120ms var(--ease);
}
.btn:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-lg {
  height: var(--control-lg);
  padding: 0 var(--s5);
  font-size: var(--text-base);
}

/* ── Header ────────────────────────────────────────────────────────── */
.skip {
  position: absolute;
  left: var(--s4);
  top: -60px;
  z-index: 100;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  color: var(--invert-text);
  border-radius: var(--radius);
}
.skip:focus {
  top: var(--s3);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease);
}
.topbar.is-scrolled {
  border-bottom-color: var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 60px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s3);
  text-decoration: none;
  font-weight: 600;
}
.wordmark-block {
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.wordmark-name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.wordmark-full {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .wordmark-full {
    display: none;
  }
}

.badge-beta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-left: var(--s3);
  border-left: 1px solid var(--line);
}

.topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.topnav a {
  white-space: nowrap;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.topnav a:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.topnav a[aria-current="page"] {
  color: var(--text);
}
.topnav .nav-cta {
  margin-left: var(--s3);
}
.topnav .nav-cta:hover {
  color: var(--text-on-accent);
  background: var(--accent-hover);
}

/* Mobile menu: a checkbox, so it needs no script. */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.nav-button {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  padding: var(--s3);
}
.nav-button span {
  display: block;
  height: 1.5px;
  width: 20px;
  background: var(--ink);
  transition:
    transform 160ms var(--ease),
    opacity 160ms var(--ease);
}
.nav-toggle:checked + .nav-button span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle:checked + .nav-button span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked + .nav-button span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.nav-toggle:focus-visible + .nav-button {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

@media (max-width: 880px) {
  .wordmark-full,
  .badge-beta {
    display: none;
  }
  .nav-button {
    display: flex;
  }
  .topnav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) var(--gutter) var(--s4);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle:checked ~ .topnav {
    display: flex;
  }
  .topnav a {
    padding: var(--s3) var(--s2);
    border-radius: 0;
    border-bottom: 1px solid var(--line-faint);
  }
  .topnav .nav-cta {
    margin: var(--s3) 0 0;
    border-bottom: 0;
  }
}

/* ── Page rhythm ───────────────────────────────────────────────────── */
main {
  padding-bottom: var(--section);
}

/* A section opens with a rule and its heading. Grouping by rules and space,
   not by boxes: every major chapter on a page has the same head. */
section,
.section {
  margin-top: var(--section);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
section > .eyebrow:first-child,
.section > .eyebrow:first-child {
  margin-bottom: var(--s2);
}
section > h2 + p,
.section > h2 + p,
h2 + .lead,
h2 + .measure {
  margin-top: var(--s3);
}
h2 + .measure {
  color: var(--text-secondary);
}

/* The first thing on a page has no rule above it. */
.page-head,
.hero {
  margin-top: 0;
  padding-top: var(--s8);
  border-top: 0;
}
.page-head .eyebrow {
  margin-bottom: var(--s3);
}
.page-head .lead {
  margin-top: var(--s4);
}

/* Standalone heading blocks that are not sections. */
main > h2 {
  margin-top: var(--section);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
main > h2 + p {
  margin-top: var(--s3);
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s8);
  align-items: center;
}
.hero .eyebrow {
  margin-bottom: var(--s4);
}
.hero .lede {
  margin-top: var(--s5);
}
.hero-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s6);
}
.reassure {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s5);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.reassure li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--s2);
  border: 1.5px solid var(--accent);
  vertical-align: 1px;
}

/* The worked example. The one panel the home page has: it is the product,
   shown, and the offset ink shadow is the Studio's own. */
.recipe {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  padding: var(--s5);
}
.recipe-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.recipe-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
}
.recipe-step + .recipe-step {
  border-top: 1px solid var(--line-faint);
}
.recipe-kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 5px 0;
  text-align: center;
  border: 1px solid var(--kind, var(--line));
  color: var(--kind, var(--text-tertiary));
  border-radius: var(--radius);
}
.kind-in {
  --kind: #6b3fc4;
}
.kind-ai {
  --kind: #9a5b00;
}
.kind-gate {
  --kind: #1a7f4b;
}
.kind-send {
  --kind: #b02a6e;
}
.recipe-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.recipe-text {
  font-weight: 500;
}
.recipe-foot {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

@media (max-width: 820px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .page-head,
  .hero {
    padding-top: var(--s6);
  }
}

/* ── Columns of points ─────────────────────────────────────────────── */
/* Three equal columns, each opened by a rule. Used for steps, cases, the
   Autopilot summary — one shape, learned once. */
.steps,
.cases,
.trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6) var(--s6);
  margin-top: var(--s6);
}
.trust {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.step,
.case,
.trust > div {
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}
.step h3,
.case h3 {
  margin-bottom: var(--s2);
}
.step p,
.case p,
.trust p {
  color: var(--text-secondary);
  font-size: var(--text-md);
}
.trust .eyebrow {
  display: block;
  margin-bottom: var(--s2);
  color: var(--text);
}

/* Numbered steps get their number from the grid, not from the copy. */
.steps {
  counter-reset: step;
}
.step h3::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--s2);
}

/* A case's wiring, read as a path. */
.case-wire {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
}
.case-wire em {
  font-style: normal;
  color: var(--line);
}

@media (max-width: 820px) {
  .steps,
  .cases,
  .trust {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

/* ── Building blocks ───────────────────────────────────────────────── */
.kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4) var(--s6);
  margin-top: var(--s6);
}
.kind {
  padding: var(--s1) 0 var(--s1) var(--s3);
  border-left: 3px solid var(--seam, var(--line));
}
.kind-name {
  font-weight: 600;
  font-size: var(--text-md);
}
.kind-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
@media (max-width: 820px) {
  .kinds {
    grid-template-columns: 1fr;
  }
}

/* ── Live graph ────────────────────────────────────────────────────── */
.graph-demo {
  margin-top: var(--section);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.graph-blurb {
  margin-top: var(--s2);
  max-width: var(--measure);
}
.graph-controls {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}
.graph-pick {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  height: auto;
  padding: var(--s2) var(--s3);
}
.graph-pick-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-tertiary);
}
.graph-pick.btn-primary .graph-pick-note {
  color: var(--text-on-accent);
}
.graph-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.graph-note {
  margin-top: var(--s3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── Batching calculator ───────────────────────────────────────────── */
.calc {
  margin-top: var(--s6);
}
.calc-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}
.calc-controls label {
  display: block;
}
.calc-controls .eyebrow {
  display: block;
  margin-bottom: var(--s2);
}
.calc-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.calc-out {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.calc-figure {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: var(--s2);
  font-variant-numeric: tabular-nums;
}
.calc-figure.accent {
  color: var(--accent-hover);
}
.calc-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.calc-foot {
  margin-top: var(--s3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
@media (max-width: 820px) {
  .calc-controls,
  .calc-out {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── A finished run ────────────────────────────────────────────────── */
.run {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s5);
  margin-top: var(--s6);
}
.run-steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.run-steps button {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s2);
  border: 0;
  border-bottom: 1px solid var(--line-faint);
  background: none;
  font: inherit;
  font-size: var(--text-md);
  text-align: left;
  color: var(--text-secondary);
  cursor: pointer;
}
.run-steps button:hover {
  color: var(--text);
}
.run-steps button.is-open {
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--accent);
}
.run-mark {
  font-family: var(--font-mono);
  width: 1em;
  text-align: center;
}
.run-mark.ok {
  color: var(--ok);
}
.run-mark.skip {
  color: var(--text-tertiary);
}

/* The detail pane is a real panel: it is the content of the tab beside it. */
.run-detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  min-height: 200px;
}
.run-detail h3 {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-faint);
}
.run-io {
  margin-top: var(--s4);
}
.run-io .eyebrow {
  display: block;
  margin-bottom: var(--s2);
}
.run-io pre {
  white-space: pre-wrap;
  word-break: break-word;
}
.run-io + .run-io {
  margin-top: var(--s4);
}
@media (max-width: 820px) {
  .run {
    grid-template-columns: 1fr;
  }
}

/* ── Errors, two ways ──────────────────────────────────────────────── */
.switch {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s5);
}
.switch + div {
  margin-top: var(--s4);
}
.switch + div > p,
[data-error-pane] > p {
  margin-top: var(--s3);
  max-width: var(--measure);
}

/* The machine's voice: ink on paper, reversed. */
pre.term {
  background: var(--invert-bg);
  color: var(--invert-text);
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-x: auto;
}

/* A note set off by a rule, not a box. */
.callout {
  margin-top: var(--s5);
  padding-left: var(--s4);
  border-left: 2px solid var(--accent);
  max-width: var(--measure);
}
.callout p + p {
  margin-top: var(--s2);
}

/* ── Screenshot ────────────────────────────────────────────────────── */
.shot {
  margin-top: var(--s6);
}
.shot-frame {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.shot figcaption {
  margin-top: var(--s3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ── Tables ────────────────────────────────────────────────────────── */
.compare-wrap {
  margin-top: var(--s5);
  overflow-x: auto;
}
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
table.grid th,
table.grid td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-faint);
}
table.grid th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--ink);
}
table.grid td:first-child {
  color: var(--text-secondary);
  width: 30%;
}
table.grid td.num {
  font-family: var(--font-mono);
  text-align: right;
}
.compare td:nth-child(2) {
  font-weight: 500;
}

/* ── Lists of reasons ──────────────────────────────────────────────── */
.reasons {
  list-style: none;
  padding: 0;
  margin-top: var(--s4);
  max-width: var(--measure);
}
.reasons li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s2);
}
.reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--accent);
}

/* ── Pricing ───────────────────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s6);
  border-top: 2px solid var(--ink);
}
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s5) 0;
}
.tier + .tier {
  padding-left: var(--s6);
  border-left: 1px solid var(--line);
}
.tier-featured .eyebrow {
  color: var(--accent-hover);
}
.tier-price {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--s2);
}
.tier-price small {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.tier-blurb {
  margin-top: var(--s2);
}
.tier ul {
  list-style: none;
  padding: 0;
  flex: 1;
  font-size: var(--text-md);
}
.tier li {
  padding: var(--s2) 0 var(--s2) var(--s5);
  position: relative;
  border-top: 1px solid var(--line-faint);
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--ok);
}
.tier li.off {
  color: var(--text-tertiary);
}
.tier li.off::before {
  border-color: var(--line);
}
.tier .btn {
  align-self: flex-start;
}
@media (max-width: 820px) {
  .tiers {
    grid-template-columns: 1fr;
  }
  .tier + .tier {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ── FAQ / log (disclosures) ───────────────────────────────────────── */
.faq,
.log {
  margin-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: 76ch;
}
.faq details,
.log details {
  border-bottom: 1px solid var(--line-faint);
}
.faq summary,
.log summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-weight: 500;
}
.faq summary::-webkit-details-marker,
.log summary::-webkit-details-marker {
  display: none;
}
.faq summary::after,
.log summary::after {
  content: "+";
  position: absolute;
  right: var(--s2);
  top: var(--s4);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}
.faq details[open] summary::after,
.log details[open] summary::after {
  content: "−";
}
.faq summary:hover,
.log summary:hover {
  color: var(--accent-hover);
}
.faq-body,
.log-body {
  padding: 0 0 var(--s4);
  color: var(--text-secondary);
  font-size: var(--text-md);
}
.faq-body p + p,
.log-body p + p {
  margin-top: var(--s3);
}

/* ── Feature blocks ────────────────────────────────────────────────── */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s6) var(--s8);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.page-head + .feature {
  margin-top: var(--section);
  border-top: 2px solid var(--ink);
}
.feature h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.feature-why {
  margin-top: var(--s3);
  color: var(--text-secondary);
}
.feature dl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  font-size: var(--text-md);
}
.feature dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: 3px;
}
.feature dd {
  margin: 0;
  color: var(--text-secondary);
}
@media (max-width: 820px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .feature dl {
    grid-template-columns: 1fr;
    gap: var(--s1) 0;
  }
  .feature dd {
    margin-bottom: var(--s3);
  }
}

/* ── Downloads ─────────────────────────────────────────────────────── */
.invite {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
  max-width: 60ch;
}
.invite-label {
  font-weight: 600;
}
.invite-row,
.waitlist-row {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
  flex-wrap: wrap;
}
.invite-row input,
.waitlist-row input,
.invite-input,
.waitlist-input {
  flex: 1 1 240px;
  height: var(--control-lg);
  padding: 0 var(--s3);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.invite-note,
.waitlist-note {
  margin-top: var(--s3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.invite-note.is-error,
.invite-message.is-error,
.waitlist-message.is-error {
  color: var(--err);
}
.invite-messages,
.waitlist-messages {
  margin-top: var(--s4);
  font-size: var(--text-md);
}

.downloads {
  margin-top: var(--s6);
  border-top: 2px solid var(--ink);
}
.downloads-rest-head {
  display: block;
  margin-top: var(--s5);
  padding-bottom: var(--s2);
}
.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s5);
  align-items: center;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line-faint);
}
.download-card.is-mine {
  padding-left: var(--s4);
  border-left: 3px solid var(--accent);
}
.download-mine-tag {
  color: var(--accent-hover);
}
.download-os {
  font-weight: 600;
}
.download-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.download-go {
  grid-row: 1 / span 2;
  grid-column: 2;
}
.download-note {
  margin-top: var(--s4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: var(--measure);
}
.download-note-strong {
  color: var(--text);
  font-weight: 500;
}

/* ── Documents (privacy, terms, docs) ──────────────────────────────── */
.doc {
  max-width: 72ch;
}
.doc h2 {
  margin-top: var(--s7);
  font-size: 1.25rem;
}
.doc h3 {
  margin-top: var(--s5);
}
.doc p,
.doc ul,
.doc ol {
  margin-top: var(--s3);
  color: var(--text-secondary);
}
.doc li + li {
  margin-top: var(--s1);
}
.doc pre.term {
  margin-top: var(--s3);
}

/* ── Insights (staff) ──────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.stat-figure {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 500;
  line-height: 1.1;
}
.stat-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.bars {
  margin-top: var(--s4);
  display: grid;
  gap: var(--s2);
}
.bar-slot {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 48px;
  gap: var(--s3);
  align-items: center;
  font-size: var(--text-sm);
}
.bar {
  height: 10px;
  background: var(--accent);
}
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}
.note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.badge-gate,
.badge-ro {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--line);
  padding: 1px var(--s2);
  border-radius: var(--radius);
  vertical-align: middle;
}

/* Licence dashboard. */
.dl {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  font-size: var(--text-md);
}
.dl dt {
  color: var(--text-tertiary);
}
.dl dd {
  margin: 0;
  font-family: var(--font-mono);
  word-break: break-all;
}

/* ── Closing band ──────────────────────────────────────────────────── */
/* The one dark moment on a page, and the last. Ink, like the Studio's
   transcript blocks — a full stop rather than another panel. */
.cta-band {
  margin-top: var(--section);
  padding: var(--s6);
  background: var(--invert-bg);
  color: var(--invert-text);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}
.cta-band h2 {
  color: #fff;
  font-size: 1.5rem;
}
.cta-band p {
  margin-top: var(--s2);
  color: var(--invert-muted);
  max-width: 52ch;
}
.cta-band .btn {
  background: transparent;
  border-color: var(--invert-line);
  color: var(--invert-text);
}
.cta-band .btn:hover {
  background: rgb(255 255 255 / 8%);
}
.cta-band .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.cta-band .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.cta-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
.cta-band .waitlist {
  flex: 1 1 320px;
}
.cta-band input {
  border-color: var(--invert-line);
  background: transparent;
  color: var(--invert-text);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s7) 0 var(--s6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6);
}
.footer-cols ul {
  list-style: none;
  padding: 0;
  margin-top: var(--s3);
}
.footer-cols li + li {
  margin-top: var(--s2);
}
.footer-cols a {
  text-decoration: none;
}
.footer-cols a:hover {
  text-decoration: underline;
}
.footer-note {
  margin-top: var(--s3);
  max-width: 28ch;
}
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-faint);
  color: var(--text-tertiary);
}
.footer-legal-links {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
}
.footer-legal-links a {
  text-decoration: none;
}
@media (max-width: 820px) {
  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ── Forms (sign in) ───────────────────────────────────────────────── */
.form {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
  max-width: 38ch;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.field input {
  height: var(--control);
  padding: 0 var(--s3);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.form .btn {
  align-self: flex-start;
}
.note.is-error {
  color: var(--err);
}

/* A licence on the account page: the key is the content, set as a transcript. */
.licence h2 {
  margin-top: var(--s2);
  font-size: 1.25rem;
}
.licence .key {
  margin-top: var(--s4);
  white-space: pre-wrap;
  word-break: break-all;
}
.licence .note {
  margin-top: var(--s3);
}

/* The access panel's action row. */
.access-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.access-actions select {
  height: var(--control);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  padding: 0 var(--s2);
}

/* ── Utility pages ──────────────────────────────────────────────────
   Account, download, sign-in, the panels: working screens, not chapters.
   The marketing rhythm — display-scale headings, 96px section air — read
   as filler here. Same system, tighter dial. */
.tight {
  --section: 40px;
}

.tight .page-head,
.tight .hero {
  padding-top: var(--s6);
}

.tight .page-head h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.tight section,
.tight .section,
.tight main > h2 {
  padding-top: var(--s4);
}

.tight h2 {
  font-size: 1.125rem;
}

/* Tables on working screens: dates and decisions hold one line. */
.access-table td:nth-child(2),
.access-table td:nth-child(3) {
  white-space: nowrap;
}

/* The account page's parting actions, in one quiet row. */
.signout {
  display: inline-block;
  margin-top: var(--s3);
}