/* ==========================================================================
   Agent Middleware API — "ledger & seal" design system
   Ground: deep ledger ink. Light surfaces are reserved for paper artifacts
   (the pilot ticket and the live receipt). Brass marks authority; green is
   spent only on verification status.
   ========================================================================== */

:root {
  --ink: #0b1120;
  --panel: #111a2e;
  --rule: #243252;
  --rule-soft: #1a2540;
  --paper: #f8f5ec;
  --paper-shade: #efe9da;
  --paper-ink: #141925;
  --paper-dim: #4d5468;
  --text: #dee4f2;
  --text-dim: #93a0bc;
  --brass: #d8a03e;
  --brass-bright: #ebb958;
  --verify: #3fbf87;
  --danger: #e2694f;

  --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --measure: 62ch;
  --page-max: 1120px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --focus-ring: 2px solid var(--brass);
}

/* Accessibility panel overrides ------------------------------------------ */

html {
  font-size: calc(100% * var(--a11y-scale, 1));
  /* keep in-page anchor targets clear of the sticky nav */
  scroll-padding-top: 5.5rem;
}

html[data-a11y-contrast="high"] {
  --ink: #000000;
  --panel: #0b0b0d;
  --rule: #6b7690;
  --rule-soft: #444d63;
  --paper: #ffffff;
  --paper-shade: #f1f1f1;
  --paper-ink: #000000;
  --paper-dim: #26292f;
  --text: #ffffff;
  --text-dim: #d4dae8;
  --brass: #ffc94d;
  --brass-bright: #ffd97a;
  --verify: #5ce0a4;
}

html[data-a11y-spacing="wide"] body {
  line-height: 1.85;
  letter-spacing: 0.015em;
  word-spacing: 0.06em;
}

html[data-a11y-underline="on"] a {
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Base --------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--brass);
  color: var(--ink);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

a {
  color: var(--brass);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brass-bright);
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* brass fails 3:1 against the paper cards; use a darker ring there */
.pilot-card :focus-visible,
.proof-col:not(.replay) :focus-visible {
  outline-color: #8a6414;
}

html[data-a11y-contrast="high"] .pilot-card :focus-visible,
html[data-a11y-contrast="high"] .proof-col:not(.replay) :focus-visible {
  outline-color: #000000;
}

/* links inside running text must not rely on color alone */
p a {
  text-decoration: underline;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.75rem 1.25rem;
}

.skip-link:focus {
  left: 0;
}

/* Navigation ---------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad-x);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.nav-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}

.nav-brand::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--brass);
  border-radius: 2px;
  transform: rotate(45deg);
  flex: none;
}

.nav-brand:hover {
  text-decoration: none;
  color: var(--brass-bright);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.nav-links a {
  color: var(--text-dim);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

.nav-links .nav-agent {
  color: var(--ink);
  background: var(--brass);
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-weight: 600;
}

.nav-links .nav-agent:hover {
  background: var(--brass-bright);
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 720px) {
  /* Wrap the section links rather than hiding them: with no hamburger to fall
     back on, display:none removed the only way to reach Pilot, Proof, and
     Machine discovery on a phone. */
  .nav-links {
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 560px) {
  html {
    /* the wrapped nav is taller at narrow widths */
    scroll-padding-top: 8.5rem;
  }

  .site-nav {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .nav-brand {
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  .nav-links .nav-agent {
    white-space: nowrap;
    padding: 0.45rem 0.7rem;
  }

  .site-footer {
    padding-bottom: 7rem;
  }
}

/* Shared section scaffolding ------------------------------------------------ */

.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad-x);
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin: 0 0 2rem;
  max-width: none;
}

.section-kicker-inverse {
  border-top-color: var(--rule-soft);
}

/* The particle field --------------------------------------------------------
   One persistent full-page layer painted by /wave.js: fixed behind all
   content, its state directed by the sections' data-wave presets and its
   ground color lerping from pure black (hero) into the ledger ink of the
   sections. The canvas is enhancement: .wave-fallback is a static glow
   horizon for no-JS/no-WebGL/context-loss, over the body's ink ground. */

.wave-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 90% 24% at 50% 68%,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(to bottom, #000000 0%, #000000 52%, #0a0a09 68%, #000000 100%);
}

.wave-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.wave-dead .wave-canvas {
  display: none;
}

html[data-a11y-contrast="high"] .wave-canvas,
html[data-a11y-contrast="high"] .wave-fallback {
  display: none;
}

/* Everything readable rides above the field. */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Hero ----------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100dvh - 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) var(--pad-x) clamp(5rem, 10vw, 8rem);
}

/* Soft scrims behind the copy — one for the headline block, one under the
   email/constraint lines where the wave's crest band is brightest. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 64% 46% at 50% 40%,
      rgba(0, 0, 0, 0.38),
      rgba(0, 0, 0, 0) 74%
    ),
    radial-gradient(
      ellipse 46% 26% at 50% 78%,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0) 72%
    );
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* These two lines ride over the brightest crest band; the scrim carries
   most of the load and the shadow guarantees the rest. */
.hero .email-fallback,
.hero .constraint-line {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

.hero h1 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 22ch;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 60px rgba(255, 255, 255, 0.12);
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.75rem;
}

.eyebrow-mark {
  width: 22px;
  height: 1px;
  background: var(--brass);
  flex: none;
}

.hero-body {
  color: var(--text-dim);
  font-size: 1.1rem;
}

.hero-body-lead {
  color: var(--text);
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  font-weight: 500;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 2rem 0 1.25rem;
}

.email-fallback {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.email-fallback a {
  overflow-wrap: anywhere;
}

.constraint-line {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  border-top: 1px dashed var(--rule);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* Buttons --------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.85rem 1.4rem;
  min-height: 48px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.button:hover {
  text-decoration: none;
}

.button-primary {
  background: var(--brass);
  color: var(--ink);
}

.button-primary:hover {
  background: var(--brass-bright);
  color: var(--ink);
  transform: translateY(-1px);
}

.button-secondary {
  border-color: var(--rule);
  color: var(--text);
}

.button-secondary:hover {
  border-color: var(--brass);
  color: var(--brass-bright);
}

/* Hero booking CTA: chamfered gold. The clip-path lives on the inner face —
   clipping the link itself would clip away its focus outline — while the
   glow is a drop-shadow on the link so it follows the cut silhouette. */
.button-wave {
  display: inline-flex;
  filter: drop-shadow(0 0 18px rgba(216, 160, 62, 0.4));
  transition: filter 180ms ease, transform 180ms ease;
}

.button-wave-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.85rem 1.7rem;
  min-height: 48px;
  color: #0b1120;
  background: var(--brass);
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  transition: background 180ms ease;
}

.button-wave:hover {
  filter: drop-shadow(0 0 28px rgba(216, 160, 62, 0.6));
  transform: translateY(-1px);
  text-decoration: none;
}

.button-wave:hover .button-wave-face {
  background: var(--brass-bright);
}

.button-wave:focus-visible {
  outline-color: #ffffff;
}

/* Offer band: boundary copy beside the pilot ticket, first thing under the
   wave hero. ------------------------------------------------------------- */

.offer-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 920px) {
  .offer-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

.offer-copy .hero-body {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text);
}

/* Paper artifacts: pilot ticket + receipts ------------------------------------ */

.pilot-card,
.proof-col {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 6px 6px 0 0;
  padding: 1.75rem 1.75rem 2.25rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

/* The torn edge is a receipt metaphor, so it belongs on receipts only. On the
   pilot card it read as a clipped element rather than a deliberate texture. */
.pilot-card {
  border-radius: 6px;
}

/* torn / scalloped receipt bottom edge */
.proof-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 8px;
  background: radial-gradient(circle at 7px -2px, transparent 7px, var(--paper) 8px);
  background-size: 15px 8px;
  background-repeat: repeat-x;
}

.pilot-card p,
.proof-col p {
  color: var(--paper-dim);
}

.pilot-card a:not(.button),
.proof-col a:not(.button) {
  color: #8a6414;
}

.pilot-card a:not(.button):hover,
.proof-col a:not(.button):hover {
  color: #6e4f0e;
}

.panel-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 0.4rem;
}

.agent-entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  border-bottom: 1px dashed var(--paper-shade);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.agent-entry-head h2 {
  font-size: 1.45rem;
  margin: 0;
}

.public-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-ink);
  border: 1px solid var(--paper-ink);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.public-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verify);
}

.agent-entry-copy {
  font-size: 0.98rem;
}

.pilot-steps {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pilot-steps li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 0.98rem;
  border-bottom: 1px dashed var(--paper-shade);
  padding-bottom: 0.6rem;
}

.pilot-steps li span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: #8a6414;
  flex: none;
}

.agent-entry-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--paper-dim);
  font-family: var(--font-mono);
}

.agent-entry-foot a {
  font-weight: 600;
  white-space: nowrap;
}

/* Thesis ------------------------------------------------------------------------ */

.thesis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: 3rem;
}

@media (max-width: 820px) {
  .thesis-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.thesis-copy p {
  color: var(--text-dim);
}

.thesis-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

@media (max-width: 820px) {
  .thesis-signals {
    grid-template-columns: minmax(0, 1fr);
  }
}

.thesis-signals li {
  background: var(--panel);
  padding: 1.5rem;
}

.thesis-signals span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 0.75rem;
}

.thesis-signals strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

.thesis-signals p {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin: 0;
}

/* Governed loop ------------------------------------------------------------------ */

.protocol-section {
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 119px,
      var(--rule-soft) 119px,
      var(--rule-soft) 120px
    );
}

.protocol-heading {
  padding-bottom: 1.5rem;
}

.protocol-heading p:not(.section-kicker) {
  color: var(--text-dim);
}

.loop-track {
  list-style: none;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(3.5rem, 8vw, 5rem);
  display: grid;
  /* Four columns, not eight: each step carries a sentence of explanation, and
     eight tracks at page width squeezed single words into mid-word breaks. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  counter-reset: loop;
}

@media (max-width: 820px) {
  .loop-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .loop-track {
    grid-template-columns: minmax(0, 1fr);
  }
}

.loop-track li {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  margin-left: -1px;
  margin-top: -1px;
  padding: 1.1rem 1.1rem 1.25rem;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.loop-track li span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brass);
}

.loop-track li strong {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Never break a step name mid-word; hyphenate properly if space runs out. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: auto;
}

.loop-track li p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.loop-track li:nth-child(5) strong,
.loop-track li:nth-child(6) strong {
  color: var(--brass-bright);
}

/* Proof section -------------------------------------------------------------------- */

.proof-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: 2.5rem;
}

@media (max-width: 820px) {
  .proof-heading {
    grid-template-columns: minmax(0, 1fr);
  }
}

.proof-heading p:not(.section-kicker) {
  color: var(--text-dim);
  font-size: 0.98rem;
}

.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 820px) {
  .proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.proof-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border-bottom: 1px dashed var(--paper-shade);
  padding-bottom: 0.9rem;
  margin-bottom: 0.5rem;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-shade);
  color: var(--paper-ink);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.proof-col dl {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.proof-col dl .row {
  display: grid;
  grid-template-columns: minmax(9ch, max-content) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--paper-shade);
}

.proof-col dt {
  color: var(--paper-dim);
}

.proof-col dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.proof-foot {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  margin: 1rem 0 0;
}

.receipt-seal {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  transform: rotate(2deg);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  max-width: calc(100% - 2rem);
}

/* dark info card variant (right column of proof, downloads, etc.) */
.proof-col.replay {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  box-shadow: none;
}

.proof-col.replay::after {
  display: none;
}

.proof-col.replay p {
  color: var(--text-dim);
}

.proof-col.replay .proof-label {
  color: var(--text-dim);
  border-bottom-color: var(--rule-soft);
}

.proof-col.replay .badge {
  background: var(--rule-soft);
  color: var(--text);
}

.proof-col.replay a:not(.button) {
  color: var(--brass);
}

.proof-col.replay a:not(.button):hover {
  color: var(--brass-bright);
}

.text-link {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Pilot & machine sections ------------------------------------------------------------ */

.pilot-copy p {
  color: var(--text-dim);
  font-size: 1.05rem;
}

.pilot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.machine-heading p:not(.section-kicker) {
  color: var(--text-dim);
}

.machine-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-top: 2rem;
}

@media (max-width: 720px) {
  .machine-links {
    grid-template-columns: minmax(0, 1fr);
  }
}

.machine-links a {
  background: var(--panel);
  color: var(--text);
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 0.4rem;
}

.machine-links a:hover {
  background: var(--rule-soft);
  text-decoration: none;
}

.machine-links a > span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}

/* Marks the raw-JSON endpoints, which leave the site for the API origin. */
.machine-links .ext {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--brass);
}

.machine-note {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 1rem 0 0;
  max-width: none;
}

.machine-links code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Honest limitations ------------------------------------------------------------------- */

.boundary-section {
  border-top: 1px solid var(--rule-soft);
}

.boundary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

@media (max-width: 820px) {
  .boundary-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.boundary-layout ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
  color: var(--text-dim);
}

.boundary-layout li {
  border-bottom: 1px dashed var(--rule);
  padding: 0.8rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.boundary-layout li::before {
  content: "✕" / "";
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--danger);
  flex: none;
}

/* Who's behind this + closing call to action ---------------------------------------------- */

.provenance-section {
  border-top: 1px solid var(--rule-soft);
}

.provenance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 820px) {
  .provenance-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.provenance-copy p {
  color: var(--text-dim);
}

.closing-cta {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.closing-cta h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0;
}

.closing-cta p {
  color: var(--text-dim);
  margin: 0;
}

.closing-cta .pilot-links {
  margin-top: 0.25rem;
}

/* Footer ---------------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule-soft);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1000px) {
  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.footer-branding p {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.footer-directory {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  font-size: 0.95rem;
}

.footer-directory p {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 0.5rem;
}

.footer-directory a {
  color: var(--text);
  width: fit-content;
}

.footer-directory a:hover {
  color: var(--brass-bright);
}

.footer-directory .button-primary,
.footer-directory .button-primary:hover {
  color: var(--ink);
}

.footer-directory span {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.footer-note {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--rule);
  padding-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  max-width: none;
  margin: 0;
}

/* Waiting-room launcher ---------------------------------------------------------------------

   The overlay itself is styled in arcade.css; these are the page-side pieces:
   the footer control that opens it, and what the page does while it is open. */

.footer-arcade {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  border-top: 1px dashed var(--rule);
  padding-top: 1.25rem;
}

.footer-arcade[hidden] {
  display: none;
}

.arcade-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.75rem 1.2rem;
  min-height: 48px;
  background: none;
  border: 1px solid var(--brass);
  color: var(--brass-bright);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.arcade-launch:hover {
  background: var(--brass);
  color: var(--ink);
}

.footer-arcade-note {
  margin: 0;
  max-width: 60ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* While the waiting room is open the page recedes rather than unmounts, so
   closing it restores scroll position and focus exactly. Hiding the canvas is
   also what pauses the particle field: /wave.js unschedules its frame loop
   when an IntersectionObserver reports the canvas out of view. */
html.arcade-open,
html.arcade-open body {
  overflow: hidden;
}

html.arcade-open .wave-canvas,
html.arcade-open .wave-fallback {
  display: none;
}

/* The waiting room is a modal dialog, so the page's own floating controls go
   with the page. Leaving the accessibility widget on top would put a
   focusable, clickable control outside the dialog's focus trap — and it
   overlaps the cabinets. Escape closes the arcade and brings it straight
   back. */
html.arcade-open .amw-a11y-toggle,
html.arcade-open .amw-a11y-panel {
  display: none;
}

html.arcade-open .site-nav,
html.arcade-open main,
html.arcade-open .site-footer {
  opacity: 0.07;
  filter: blur(3px);
  pointer-events: none;
  transition: opacity 420ms ease, filter 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.arcade-open .site-nav,
  html.arcade-open main,
  html.arcade-open .site-footer {
    transition: none;
  }

  .arcade-launch {
    transition: none;
  }
}

html[data-a11y-motion="reduce"].arcade-open .site-nav,
html[data-a11y-motion="reduce"].arcade-open main,
html[data-a11y-motion="reduce"].arcade-open .site-footer {
  transition: none;
}

/* Proof page ------------------------------------------------------------------------------- */

.proof-page-header h1 {
  margin-top: 0.5rem;
}

.proof-page-lead {
  color: var(--text-dim);
  font-size: 1.08rem;
}

.artifact-downloads .button {
  width: 100%;
  margin-top: 0.75rem;
}

.verify-section pre {
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.5rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 100%;
}

.verify-section pre:focus-visible {
  outline: var(--focus-ring);
}

.verify-section code {
  background: none;
  border: none;
  padding: 0;
}

/* Comparison page ------------------------------------------------------------------------- */

/* The matrix is wider than a phone. It scrolls inside its own region rather
   than making the whole page scroll sideways; the region is focusable so the
   scroll is reachable by keyboard. */
.compare-scroll {
  overflow-x: auto;
  margin-top: 2rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.compare-scroll:focus-visible {
  outline: var(--focus-ring);
}

.compare-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: 0.92rem;
}

.compare-table caption {
  caption-side: bottom;
  padding: 1rem 1.25rem;
  text-align: left;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.6;
}

.compare-table th,
.compare-table td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.85rem 1.25rem;
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare-table tbody th {
  color: var(--text);
  font-weight: 600;
  width: 30%;
}

.compare-table tbody td {
  color: var(--text-dim);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table strong {
  color: var(--text);
}

.fit-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.7rem;
}

.fit-list li {
  color: var(--text-dim);
  line-height: 1.65;
}

.faq-list {
  margin-top: 2rem;
  display: grid;
  gap: 1.75rem;
}

.faq-list dt {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.faq-list dd {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.75;
  max-width: 62ch;
}

/* Hero entrance (motion is opt-out via media query + a11y panel) --------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy > * {
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.19s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.26s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.33s; }
.hero-copy > *:nth-child(6) { animation-delay: 0.4s; }
.hero-copy > *:nth-child(7) { animation-delay: 0.47s; }

.pilot-card {
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards;
}

/* Accessibility widget ----------------------------------------------------------------------- */

.amw-a11y-toggle {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.amw-a11y-toggle:hover {
  border-color: var(--brass);
  color: var(--brass-bright);
}

.amw-a11y-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 5.4rem;
  z-index: 91;
  width: min(320px, calc(100vw - 2.2rem));
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  padding: 1.1rem 1.1rem 0.9rem;
  font-size: 0.92rem;
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
}

.amw-a11y-panel[hidden] {
  display: none;
}

.amw-a11y-panel h2 {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 0.9rem;
}

.amw-a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px dashed var(--rule-soft);
}

.amw-a11y-row > span:first-child {
  color: var(--text);
}

.amw-a11y-size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.amw-a11y-size output {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  min-width: 4ch;
  text-align: center;
}

.amw-a11y-size button,
.amw-a11y-switch {
  min-width: 44px;
  min-height: 44px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
}

.amw-a11y-size button:hover,
.amw-a11y-switch:hover {
  border-color: var(--brass);
}

.amw-a11y-switch[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  font-weight: 600;
}

.amw-a11y-reset {
  margin-top: 0.75rem;
  width: 100%;
  min-height: 40px;
  border-radius: 5px;
  border: 1px dashed var(--rule);
  background: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
}

.amw-a11y-reset:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

@media (max-width: 560px) {
  .amw-a11y-panel {
    bottom: 5.2rem;
  }
}

/* Print --------------------------------------------------------------------------------------- */

@media print {
  :root {
    --ink: #ffffff;
    --panel: #ffffff;
    --rule: #999999;
    --rule-soft: #bbbbbb;
    --text: #000000;
    --text-dim: #333333;
    --brass: #000000;
    --brass-bright: #000000;
    --verify: #000000;
    --paper: #ffffff;
    --paper-shade: #dddddd;
    --paper-ink: #000000;
    --paper-dim: #333333;
  }

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

  .site-nav,
  .wave-canvas,
  .wave-fallback,
  .footer-arcade,
  .amw-a11y-toggle,
  .amw-a11y-panel {
    display: none;
  }

  .hero {
    background: #fff;
    min-height: 0;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero h1 {
    text-shadow: none;
  }

  .pilot-card,
  .proof-col {
    border: 1px solid #999;
    box-shadow: none;
  }
}