/* ==========================================================================
   Weave — the FLOAT system
   --------------------------------------------------------------------------
   Soft-brutalist fintech, applied to a memory system. A pale lavender canvas,
   no pure black or white anywhere, one confident violet "signal" accent, hard
   un-blurred offset shadows on bordered elements, tactile press-in / lift-up
   interactions, a film-grain overlay, and restrained motion.

   Two adaptations of the source system, both deliberate:

   1. Tailwind v4's `@theme` becomes a plain `:root` token block. The page is
      served straight from the API process with no build step, so there is no
      Tailwind compiler — but the discipline that matters (tokens declared
      once, consumed everywhere) is unchanged.

   2. The categorical pastels encode Weave's three memory layers. In the source
      each "mode" owns one colour; here each *layer* does, and that mapping
      holds in the cards, the chips, the graph and the legend. Status is
      carried without new hues: a superseded fact goes muted and struck
      through, and `signal` is spent on the one thing that must be noticed —
      an abstention.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — narrow weight sets on purpose, self-hosted so the page has no
   external dependencies at runtime.
   -------------------------------------------------------------------------- */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* surfaces — no pure white */
  --color-page:    #f3effa;
  --color-surface: #fdfbfe;
  --color-void:    #1c1726;   /* near-black violet: borders, dark text, dark fills */
  --color-void-3:  #efe9f7;

  /* the one accent */
  --color-signal:       #7c6cf5;
  --color-signal-dim:   rgba(124, 108, 245, 0.35);
  --color-signal-faint: rgba(124, 108, 245, 0.12);
  --color-signal-deep:  #6b5ce0;

  /* text */
  --color-text:    #1c1726;
  --color-muted:   #6b6478;
  --color-muted-2: #948da3;

  /* lines */
  --color-border:        rgba(28, 23, 38, 0.10);
  --color-border-strong: rgba(28, 23, 38, 0.20);
  --color-brut-line:     rgba(28, 23, 38, 0.88);

  /* categorical pastels — one per memory layer, never decorative */
  --color-coral: #f2a683;   /* SEMANTIC   */
  --color-mint:  #b8e6a8;   /* PROCEDURAL */
  --color-lav:   #c9bfea;   /* EPISODIC   */
  --color-pledge: #ddd4fb;

  /* radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --shell: 1180px;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font: 400 15px/1.55 var(--font-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--color-signal-faint); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-page), 0 0 0 4px var(--color-signal);
}

/* --------------------------------------------------------------------------
   Typography — three faces, three jobs
   -------------------------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.01em;
}

.signoff {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 15vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.2;
}

.card-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; }

.lead {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text);
}

.body-sm { font-size: 13px; line-height: 1.55; color: var(--color-muted); }

/* Mono: labels and data. Tracking is the signal — eyebrows widest, data tighter. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
}

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}

.data {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted-2);
  letter-spacing: 0;
}

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

.section { padding: 70px 0 90px; }
.section-tight { padding: 60px 0 70px; }

/* Anchor targets must clear the fixed nav. */
section[id], main[id] { scroll-margin-top: 100px; }

.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 22px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.section-head { display: grid; gap: 16px; max-width: 720px; margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   THE SIGNATURE — offset shadows and two interaction physics
   Buttons press IN (translate by exactly the shadow offset, shadow collapses).
   Cards lift UP (translate up, shadow grows).
   -------------------------------------------------------------------------- */

.brut { border: 2px solid var(--color-void); box-shadow: 6px 6px 0 0 var(--color-brut-line); }
.brut-3 { box-shadow: 3px 3px 0 0 var(--color-brut-line); }
.brut-5 { box-shadow: 5px 5px 0 0 var(--color-brut-line); }
.brut-7 { box-shadow: 7px 7px 0 0 var(--color-brut-line); }

/* PRESS IN */
.press {
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.press:hover, .press:focus-visible {
  transform: translate(5px, 5px) scale(0.98);
  box-shadow: 0 0 0 0 var(--color-brut-line);
}
.press-3 { transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s; }
.press-3:hover, .press-3:focus-visible {
  transform: translate(3px, 3px) scale(0.98);
  box-shadow: 0 0 0 0 var(--color-brut-line);
}

/* LIFT UP */
.lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, rotate 0.2s ease-out;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 9px 9px 0 0 var(--color-brut-line);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 2px solid var(--color-void);
  border-radius: 999px;
  padding: 13px 30px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-void);
  background: var(--color-surface);
  cursor: pointer;
  box-shadow: 5px 5px 0 0 var(--color-brut-line);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn:hover:not(:disabled), .btn:focus-visible:not(:disabled) {
  transform: translate(5px, 5px) scale(0.98);
  box-shadow: 0 0 0 0 var(--color-brut-line);
}

.btn-primary { background: var(--color-signal); color: var(--color-void); }
.btn-primary:hover:not(:disabled) { background: var(--color-signal-deep); }

.btn-ghost { background: transparent; box-shadow: 5px 5px 0 0 var(--color-signal-dim); }
.btn-ghost:hover:not(:disabled) { box-shadow: 0 0 0 0 var(--color-signal-dim); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm {
  padding: 9px 18px;
  font-size: 13px;
  box-shadow: 3px 3px 0 0 var(--color-brut-line);
}
.btn-sm:hover:not(:disabled), .btn-sm:focus-visible:not(:disabled) {
  transform: translate(3px, 3px) scale(0.98);
  box-shadow: 0 0 0 0 var(--color-brut-line);
}

/* --------------------------------------------------------------------------
   Swipe — the highlighter. Wraps the last beat of a tagline.
   -------------------------------------------------------------------------- */

.swipe {
  display: inline-block;
  border: 2px solid var(--color-void);
  border-radius: 6px;
  background: var(--color-signal);
  padding: 2px 12px;
  color: var(--color-void);
  box-shadow: 3px 3px 0 0 var(--color-void);
  transform: rotate(-1deg);
}

/* --------------------------------------------------------------------------
   Glassmorphic floating nav
   -------------------------------------------------------------------------- */

.nav-wrap {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  border-radius: 999px;
  /* Taller bar: the pill needs enough vertical room to hold a real button
     without it touching the edges. */
  padding: 14px 14px 14px 26px;
  min-height: 62px;
  background: rgba(250, 247, 253, 0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid var(--color-border-strong);
}

.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;

  /* Lockup: mark and wordmark on one optical baseline. The mark is set in ems
     so it tracks the wordmark if the nav type ever changes size. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The mark. Strokes are tokenised rather than hard-coded so the logo cannot
   drift out of the palette: warp is the signal violet, weft the void. The
   break in the warp is the interlace -- it passes *behind* the weft, and is
   the one detail that must survive every resize. */
.brand-mark {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-mark .warp { stroke: var(--color-signal); }
.brand-mark .weft { stroke: var(--color-void); }

.nav-links { display: flex; align-items: center; gap: 20px; }

/* The nav's call to action. Same recipe as the hero button -- press-in on
   click -- at a size that sits inside the pill. */
.nav-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-void);
  background: var(--color-signal);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--color-void);
  transition: transform 0.12s, box-shadow 0.12s;
}

.nav-cta:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--color-void); }
.nav-cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--color-void); }

@media (max-width: 720px) {
  .nav-cta { padding: 8px 12px; font-size: 10px; }
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  transition: color 0.15s;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-text); }

.nav-badges { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   Chips and badges
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--color-void);
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-void);
  box-shadow: 3px 3px 0 0 var(--color-brut-line);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.chip:hover, .chip:focus-visible {
  transform: translate(3px, 3px) scale(0.98);
  box-shadow: 0 0 0 0 var(--color-brut-line);
}

.chip-lav   { background: var(--color-lav); }
.chip-coral { background: var(--color-coral); }
.chip-mint  { background: var(--color-mint); }

/* Static state badges — no shadow, no interaction. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--color-void);
  border-radius: 999px;
  padding: 4px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-surface);
}

.tag-lav   { background: var(--color-lav); }
.tag-coral { background: var(--color-coral); }
.tag-mint  { background: var(--color-mint); }
/* The violet fill is too dark for ink at 10px; white is the legible pairing. */
.tag-signal { background: var(--color-signal); color: #fff; border-color: var(--color-void); }
.tag-quiet {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-muted-2);
}

.dot { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--color-void); }
.dot-lav { background: var(--color-lav); }
.dot-coral { background: var(--color-coral); }
.dot-mint { background: var(--color-mint); }
.dot-signal { background: var(--color-signal); }
.dot-quiet { background: var(--color-surface); }

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 130px 0 60px;
  overflow: hidden;
}

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

.hero-inner { position: relative; z-index: 2; display: grid; gap: 48px; }

.hero-copy { display: grid; gap: 24px; justify-items: start; max-width: 620px; }

.hero-ctas { display: grid; gap: 14px; width: 100%; }

/* Ambient handle chips — dropped entirely below 900px, not repositioned. */
.float-chip {
  position: absolute;
  z-index: 1;
  display: none;
  border: 2px solid var(--color-void);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-void);
  box-shadow: 3px 3px 0 0 var(--color-brut-line);
  pointer-events: none;
  animation: bob 3s ease-in-out infinite alternate;
}

@keyframes bob { from { transform: translateY(0); } to { transform: translateY(11px); } }

/* --------------------------------------------------------------------------
   Trust strip — hairline borders, mono caps, dot separated
   -------------------------------------------------------------------------- */

.trust {
  border-top: 0.5px solid var(--color-border-strong);
  border-bottom: 0.5px solid var(--color-border-strong);
  padding: 18px 0;
}

.trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Layer cards — categorical pastels, resting tilt relaxing on hover
   -------------------------------------------------------------------------- */

.card-grid { display: grid; gap: 28px; }

.layer-card {
  position: relative;
  border: 2px solid var(--color-void);
  border-radius: var(--radius-xl);
  padding: 34px 32px 30px;
  box-shadow: 6px 6px 0 0 var(--color-brut-line);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  overflow: hidden;
}

.layer-card:hover { box-shadow: 9px 9px 0 0 var(--color-brut-line); }

/* The tilt alternates so the grid looks hand-placed, and relaxes toward 0 on
   hover as the card lifts. */
.layer-card:nth-child(odd)  { transform: rotate(-1.6deg); }
.layer-card:nth-child(even) { transform: rotate(1.3deg); }
.layer-card:nth-child(odd):hover  { transform: translateY(-6px) rotate(-0.7deg); }
.layer-card:nth-child(even):hover { transform: translateY(-6px) rotate(0.6deg); }

.card-episodic   { background: var(--color-lav); }
.card-semantic   { background: var(--color-coral); }
.card-procedural { background: var(--color-mint); }
.card-abstention { background: var(--color-pledge); }

.layer-card .eyebrow { color: var(--color-signal-deep); }
.layer-card .card-sub { margin: 10px 0 0; font-size: 14px; color: rgba(28, 23, 38, 0.75); }

.card-glyph { position: absolute; top: 22px; right: 22px; opacity: 0.85; }

.card-meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1.5px solid rgba(28, 23, 38, 0.18);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Surface card — the workhorse (confirmation-card treatment)
   -------------------------------------------------------------------------- */

.surface {
  border: 2px solid var(--color-void);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: 7px 7px 0 0 var(--color-brut-line);
}

.surface-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 26px;
  border-bottom: 2px solid var(--color-void);
  flex-wrap: wrap;
}

.surface-body { padding: 26px; }

.surface-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; }

.panel {
  border: 2px solid var(--color-void);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 5px 5px 0 0 var(--color-brut-line);
}

.quiet-card {
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 16px 18px;
}

/* --------------------------------------------------------------------------
   Console
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 9px; }

.text-input, .select-input {
  width: 100%;
  border: 2px solid var(--color-void);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 14px 16px;
  font: 400 16px/1.4 var(--font-body);
  color: var(--color-text);
  transition: box-shadow 0.15s;
}

.text-input::placeholder { color: var(--color-muted-2); }

.text-input:focus-visible, .select-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-signal-dim);
}

.select-input {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-void) 50%),
                    linear-gradient(135deg, var(--color-void) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.console-row { display: grid; gap: 14px; }

/* --------------------------------------------------------------------------
   Verdict — signal is spent here, on the one thing that must be noticed
   -------------------------------------------------------------------------- */

.verdict {
  border: 2px solid var(--color-void);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  background: var(--color-surface);
  box-shadow: 5px 5px 0 0 var(--color-brut-line);
}

.verdict-answered  { background: var(--color-surface); }
.verdict-abstained { background: var(--color-signal); }
.verdict-conflict  { background: var(--color-pledge); }
.verdict-idle      { background: var(--color-void-3); }

.verdict-answer {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  color: var(--color-void);
}

.verdict-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1.5px solid rgba(28, 23, 38, 0.18);
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* On a filled verdict the muted text token has nowhere near enough contrast,
   so labels inside one drop back to ink. */
.verdict-abstained .label,
.verdict-conflict .label { color: rgba(28, 23, 38, 0.72); }
.verdict-abstained .mono,
.verdict-conflict .mono { color: var(--color-void); }

/* Coverage signals — mono micro-label above the value */
.signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5px; background: var(--color-border-strong);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; }
.signal-grid > div { background: var(--color-surface); padding: 13px 15px; }
.signal-value { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--color-text); }

.reason {
  border: 2px solid var(--color-void);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 12px 15px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Evidence
   -------------------------------------------------------------------------- */

.evidence-list { display: grid; gap: 12px; }

.evidence {
  border: 2px solid var(--color-void);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 15px 17px;
  box-shadow: 3px 3px 0 0 var(--color-brut-line);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.evidence:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 0 var(--color-brut-line); }

/* A superseded fact reads as retired through weight and strike, not a new hue. */
.evidence-superseded { border-color: var(--color-border-strong); box-shadow: 3px 3px 0 0 var(--color-border-strong); }
.evidence-superseded .evidence-text { color: var(--color-muted); }

.evidence-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.evidence-text { font-size: 15px; line-height: 1.45; color: var(--color-text); }
.evidence-meta { margin-top: 10px; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.evidence-score { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--color-muted-2); }

.empty {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 34px 22px;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Fact timeline
   -------------------------------------------------------------------------- */

.timeline { display: grid; gap: 10px; }

.tl-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 14px 18px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s;
}

.tl-row:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 0 var(--color-brut-line); border-color: var(--color-void); }

.tl-current { border-color: var(--color-void); box-shadow: 3px 3px 0 0 var(--color-brut-line); }

.tl-fact { font-size: 15px; }
.tl-fact .predicate { color: var(--color-muted); }
.tl-fact .object { font-weight: 600; }
.tl-fact .object.struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--color-muted-2); font-weight: 400; }

/* --------------------------------------------------------------------------
   Routing table
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.routing { width: 100%; border-collapse: collapse; min-width: 620px; }

table.routing th {
  text-align: left;
  padding: 0 16px 12px;
  border-bottom: 2px solid var(--color-void);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}

table.routing td {
  padding: 15px 16px;
  border-bottom: 1.5px solid var(--color-border);
  font-size: 14px;
  vertical-align: middle;
}

table.routing tr:last-child td { border-bottom: 0; }
table.routing .num { font-family: var(--font-mono); font-size: 13px; text-align: right; }

.meter { height: 8px; min-width: 70px; border: 1.5px solid var(--color-void); border-radius: 999px; background: var(--color-surface); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--color-signal); }

/* --------------------------------------------------------------------------
   Graph
   -------------------------------------------------------------------------- */

.graph-frame { border: 2px solid var(--color-void); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: 6px 6px 0 0 var(--color-brut-line); overflow: hidden; }
.graph-frame svg { display: block; width: 100%; height: auto; }
.graph-legend { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center; padding: 16px 22px; border-top: 2px solid var(--color-void); background: var(--color-void-3); }

/* --------------------------------------------------------------------------
   Thesis diagram — scroll-drawn
   -------------------------------------------------------------------------- */

.thesis { text-align: center; }
.thesis-svg { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; }
.thesis-svg .draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1.1s ease-out; }
.is-drawn .thesis-svg .draw { stroke-dashoffset: 0; }
.thesis-svg .node-pop { transform: scale(0); transform-origin: center; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.is-drawn .thesis-svg .node-pop { transform: scale(1); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq details {
  border: 2px solid var(--color-void);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 4px 22px;
  margin-bottom: 14px;
  box-shadow: 3px 3px 0 0 var(--color-brut-line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

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

.faq summary .cross { position: relative; margin-left: auto; width: 14px; height: 14px; flex: 0 0 14px; transition: transform 0.2s; }
.faq summary .cross::before, .faq summary .cross::after { content: ""; position: absolute; background: var(--color-void); }
.faq summary .cross::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq summary .cross::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq details[open] summary .cross { transform: rotate(45deg); }
.faq p { margin: 0 0 20px; color: var(--color-muted); font-size: 15px; max-width: 66ch; }

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

.footer { border-top: 2px solid var(--color-void); padding: 30px 0 40px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  border: 2px solid var(--color-void);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 3px 3px 0 0 var(--color-brut-line);
  padding: 11px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.toast[hidden] { display: none; }

.spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(28, 23, 38, 0.25);
  border-top-color: var(--color-void);
  border-radius: 999px;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Motion — entrances only. Interaction is CSS (above).
   -------------------------------------------------------------------------- */

/* Scoped to `.js` so the page is fully visible if the script never runs —
   content must never depend on an observer firing. */
.js [data-reveal]:not(.layer-card) { opacity: 0; transform: translateY(20px); }
.js [data-reveal]:not(.layer-card).is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* A card's tilt is its resting state, so it fades in without a transform —
   otherwise the reveal would flatten the hand-placed angle. */
.js .layer-card[data-reveal] { opacity: 0; }
.js .layer-card[data-reveal].is-in { opacity: 1; transition: opacity 0.6s ease-out; }

/* --------------------------------------------------------------------------
   Film grain — what keeps the flat pastels from looking sterile
   -------------------------------------------------------------------------- */

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Responsive — one custom breakpoint for the marketing arc
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
  .hero-ctas { display: flex; gap: 14px; }
}

@media (min-width: 900px) {
  .shell { padding: 0 48px; }
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 56px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .console-row { grid-template-columns: 1fr 1fr; }
  .float-chip { display: inline-flex; }
  .signal-grid { grid-template-columns: repeat(3, 1fr); }
  .workspace-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 28px; align-items: start; }
}

@media (max-width: 899px) {
  .hero { min-height: auto; padding-top: 110px; }
  .hero-copy { justify-items: center; text-align: center; margin: 0 auto; }
  .nav-links { display: none; }
  .tl-row { grid-template-columns: 1fr; gap: 10px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — every animated element has a defined static end state,
   not merely "no animation".
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; }
  .js [data-reveal]:not(.layer-card) { transform: none !important; }
  .thesis-svg .draw { stroke-dashoffset: 0 !important; }
  .thesis-svg .node-pop { transform: scale(1) !important; }
  .float-chip { animation: none !important; }
}