/* ============================================================
   NerveStax — launch site
   Data-native / terminal direction: mono display type, hairline
   rules as the structural device, dark "artifact" panels that stay
   dark in both themes so they read as real engineering output.

   COLOUR IS NOT AUTHORED HERE. Every value below is transcribed from
   the brand system: docs/design/ux/Nervestax - Brand.html (§03 Palette),
   vendored from the claude.ai/design "Nervestax SaaS" project.
   If the brand changes, re-sync that file and re-copy — don't tune by eye.

   One deliberate deviation, for accessibility: the brand's `text-3`
   (0.62 light / 0.56 dark) measures 3.5–4.1:1, under WCAG AA for text
   below 24px. Small text therefore uses `text-2`; `text-3` is kept for
   large or decorative type only. Every text node passes AA in both themes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Brand accent — violet, hue 274, chroma 0.17 held constant across themes.
     Only lightness moves. Source: docs/design/ux/Nervestax - Brand.html §03 */
  --violet-300: oklch(0.74 0.17 274);
  --violet-400: oklch(0.68 0.17 274);   /* dark theme accent */
  --violet:     oklch(0.62 0.17 274);
  --violet-500: oklch(0.56 0.17 274);   /* light theme accent */
  /* the one gradient — 288° → 250°. Identity only: the mark, nothing else. */
  --brand-gradient: linear-gradient(135deg, oklch(0.66 0.19 288), oklch(0.66 0.16 250));

  --ok:   oklch(0.62 0.13 155);
  --warn: oklch(0.72 0.13 75);
  --err:  oklch(0.60 0.18 25);
  --info: oklch(0.62 0.12 240);

  --maxw: 1240px;
  --gutter: 28px;

  /* artifact panels — brand dark surfaces, identical in both themes on purpose */
  --panel: oklch(0.165 0.006 274);
  --panel-2: oklch(0.215 0.008 274);
  --panel-rule: oklch(0.29 0.01 274);
  --panel-ink: oklch(0.95 0.004 274);
  --panel-ink-2: oklch(0.72 0.01 274);
  --panel-ink-3: oklch(0.56 0.012 274);
}

/* ---------- LIGHT — brand light surfaces ---------- */
[data-theme="light"] {
  --bg: oklch(0.985 0.002 270);
  --surface: oklch(1 0 0);
  --bg-2: oklch(0.975 0.003 270);
  --ink: oklch(0.24 0.012 270);
  --ink-2: oklch(0.46 0.012 270);
  --ink-3: oklch(0.62 0.01 270);
  --rule: oklch(0.91 0.004 270);
  --rule-soft: oklch(0.955 0.004 270);
  --rule-strong: oklch(0.85 0.006 270);
  --accent: var(--violet-500);
  --accent-hover: oklch(0.50 0.17 274);
  --accent-soft: oklch(0.56 0.17 274 / 0.10);
  --field: oklch(1 0 0);
}

/* ---------- DARK — brand dark surfaces ---------- */
[data-theme="dark"] {
  --bg: oklch(0.165 0.006 274);
  --surface: oklch(0.195 0.007 274);
  --bg-2: oklch(0.215 0.008 274);
  --ink: oklch(0.95 0.004 274);
  --ink-2: oklch(0.72 0.01 274);
  --ink-3: oklch(0.56 0.012 274);
  --rule: oklch(0.29 0.01 274);
  --rule-soft: oklch(0.235 0.009 274);
  --rule-strong: oklch(0.36 0.012 274);
  --accent: var(--violet-400);
  --accent-hover: var(--violet-300);
  --accent-soft: oklch(0.68 0.17 274 / 0.16);
  --field: oklch(0.195 0.007 274);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

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

/* ============================================================
   TYPE
   ============================================================ */
.display {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.96;
  margin: 0;
  font-size: clamp(32px, 5.4vw, 68px);
}
.display-sm { font-size: clamp(26px, 3.6vw, 44px); }
/* second headline sentence: same face, muted, so the two-liner reads as one idea */
.display-2 { display: block; margin-top: .38em; color: var(--ink-3); }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.tag em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 54ch; margin: 0; }
p { margin: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
/* "Restraint earns color — color signals action and identity, nothing else."
   So the primary action is the one violet thing on the screen. Calm, not loud:
   no offset slabs, no transforms. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 15px 22px; border: 1px solid transparent; border-radius: 6px;
  background: var(--violet-500); color: #fff;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { background: oklch(0.50 0.17 274); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 3px; background: none; border-width: 0 0 1px; cursor: pointer;
}
.btn-link:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.topbar {
  background: var(--panel); color: var(--panel-ink-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 8px 16px;
}
.topbar b { color: var(--panel-ink); font-weight: 500; }
.topbar a { color: inherit; }
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.stuck { border-bottom-color: var(--rule); }
.nav-in { display: flex; align-items: center; gap: 26px; height: 62px; }
/* Wordmark lockup per brand §02: mark + IBM Plex Sans 600, tight tracking,
   "Stax" in the secondary ink. Clearspace = mark height. */
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em;
}
.brand .mark { width: 22px; height: 22px; flex: none; display: block; color: var(--ink); }
.brand .tile {
  width: 26px; height: 26px; flex: none; border-radius: 28%;
  background: var(--brand-gradient); display: grid; place-items: center;
}
.brand .tile svg { width: 15px; height: 15px; display: block; color: #fff; }
.brand .sfx { color: var(--ink-2); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-side { display: flex; align-items: center; gap: 12px; }
.nav .btn { padding: 10px 15px; font-size: 11.5px; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule); background: none; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-side { margin-left: auto; } }
/* very narrow phones: brand + toggle + CTA overflowed 320px */
@media (max-width: 380px) {
  .nav-in { gap: 10px; }
  .nav .btn { padding: 10px 12px; font-size: 10.5px; letter-spacing: 0.04em; }
  .icon-btn { display: none; }
  .brand { font-size: 15px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(30px, 4.4vw, 58px) 0 0; position: relative; }
/* Full-bleed-within-grid rule: it divides the whole hero, so it spans the whole
   measure rather than stopping under one column. */
.hero .rule-under { height: 1px; background: var(--ink); margin: 20px 0 26px; opacity: .85; }
/* top-align the lede so it fills the space beside the headline's first lines,
   instead of sinking to the bottom of a tall headline and leaving the top-right empty */
.hero-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); gap: clamp(32px, 4vw, 60px); align-items: start; }
/* wider measure → each sentence sets in ~2 lines (4 total), not 6; balance evens them */
.hero .display { font-size: clamp(28px, 4.4vw, 54px); }
.hero h1 { max-width: 24ch; }
.hero-aside { padding-top: 4px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.hero-note { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.04em; }
/* The two-column hero only has room for the headline above ~1200px, where the
   explicit line breaks give a clean 4 lines. Below that, stack it: the headline
   becomes a full-width block and the lede sits beneath — and the breaks are dropped
   so it wraps naturally. */
@media (max-width: 1200px) {
  .hero-head { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .hero h1 br { display: none; }
  .hero h1 { max-width: 26ch; }
  .hero-aside { max-width: 60ch; }
}

/* spec sheet — honest facts, not invented metrics */
.spec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); margin-top: 36px; }
/* rule on the LEFT with symmetric padding, so text sits the same distance from the
   divider on both sides (border-right + one-sided padding made columns look misaligned) */
.spec > div { padding: 16px 24px 18px; border-left: 1px solid var(--rule); }
.spec > div:first-child { border-left: 0; padding-left: 0; }
.spec > div:last-child { padding-right: 0; }
.spec dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.spec dd { margin: 8px 0 0; font-size: 14.5px; font-weight: 450; color: var(--ink); }
@media (max-width: 760px) {
  .spec { grid-template-columns: repeat(2, 1fr); }
  .spec > div { padding: 16px 18px; }
  .spec > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .spec > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ============================================================
   ARTIFACT PANELS (terminal / product frames) — dark in both themes
   ============================================================ */
.panel {
  background: var(--panel); color: var(--panel-ink);
  border: 1px solid var(--panel-rule);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  box-shadow: 0 24px 60px oklch(0.15 0.02 274 / 0.28);
}
.panel-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--panel-rule); color: var(--panel-ink-2); font-size: 11px; letter-spacing: 0.05em;
}
.panel-bar .dots { display: flex; gap: 5px; margin-right: 6px; }
.panel-bar .dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--panel-rule); display: block; }
.panel-bar .right { margin-left: auto; }
.panel-body { padding: 16px 18px 18px; }

.hero-panel { margin-top: 34px; }
/* Reserve the streaming output's final height so the panel never jumps mid-run. */
#out { min-height: 146px; }  /* 6 lines: seeded command + 5 streamed */

/* prompt line + caret */
.p-prompt { color: var(--panel-ink); }
.p-prompt .chev { color: var(--violet-300); margin-right: 8px; }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--accent); vertical-align: -2px; animation: blink 1.05s steps(1) infinite; }
/* hidden, not removed — display:none drops a wrapped line and shrinks the panel */
.caret.done { visibility: hidden; }
@keyframes blink { 50% { opacity: 0; } }

.p-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.p-steps li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--panel-ink-2); opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s; }
.p-steps li.on { opacity: 1; transform: none; }
.p-steps .m { color: var(--panel-ink-2); }
.st { width: 13px; height: 13px; margin-top: 4px; border: 1px solid var(--panel-ink-3); border-radius: 99px; display: block; position: relative; }
li.done .st { border-color: var(--ok); background: var(--ok); }
li.done .st::after { content: ''; position: absolute; inset: 0; background: var(--panel); clip-path: polygon(20% 48%, 42% 70%, 82% 26%, 88% 34%, 42% 84%, 14% 56%); }
li.run .st { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Terminal output never wraps — it scrolls, like a real terminal. Wrapping
   reflows the panel mid-stream and makes the height jump on narrow screens. */
.p-out { margin: 16px 0 0; padding: 12px 14px; background: oklch(0.13 0.006 274); border-left: 2px solid var(--panel-rule); color: var(--panel-ink-2); white-space: pre; overflow-x: auto; font-size: 11.5px; line-height: 1.75; min-height: 1px; }
.p-out .ok { color: var(--ok); }
.p-out .dim { color: var(--panel-ink-2); }
.p-out b { color: var(--panel-ink); font-weight: 600; }
.p-out .cmd { color: var(--panel-ink); }

.p-gate {
  margin-top: 16px; border: 1px dashed var(--accent); background: oklch(0.72 0.17 274 / 0.10);
  padding: 13px 15px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
}
.p-gate.on { opacity: 1; transform: none; }
.p-gate .lbl { color: var(--panel-ink); }
.p-gate .acts { margin-left: auto; display: flex; gap: 8px; }
.p-gate button { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--panel-rule); background: transparent; color: var(--panel-ink); cursor: default; }
.p-gate button.primary { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }

/* The bridge between the two audiences: the terminal proves it to an engineer,
   this one line tells everyone else what they just watched. */
.caption {
  margin: 16px 0 0; max-width: 74ch;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
  border-left: 2px solid var(--accent); padding-left: 16px;
}
.caption b { color: var(--ink); font-weight: 600; }

.replay { display: flex; justify-content: flex-end; margin-top: 12px; }

/* who it's for — two audiences, side by side */
.personas { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); margin-top: 44px; }
.persona { padding: 28px 32px 32px; border-left: 1px solid var(--rule); min-width: 0; }
.persona:first-child { border-left: 0; padding-left: 0; }
.persona:last-child { padding-right: 0; }
.persona h3 { margin: 0 0 18px; font-size: 18px; letter-spacing: -0.01em; }
.persona ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.persona li {
  position: relative; padding-left: 22px;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
}
.persona li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; background: var(--accent);
}
@media (max-width: 820px) {
  .personas { grid-template-columns: 1fr; }
  .persona { border-left: 0; border-bottom: 1px solid var(--rule); padding: 24px 0 26px; }
  .persona:last-child { border-bottom: 0; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 15px 0; overflow: hidden; margin-top: 64px; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: slide 34s linear infinite; }
.marquee span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.marquee span::after { content: '/'; margin-left: 48px; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: clamp(64px, 9vw, 116px) 0; }
.sec-head { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: start; }
.sec-head .lede { margin-top: 18px; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; gap: 14px; } }

/* problem: two-column ledger */
.ledger { border-top: 1px solid var(--ink); margin-top: 44px; }
.ledger-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.ledger-row .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2); }
.ledger-row h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ledger-row p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 820px) { .ledger-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } }

/* four-stage spine overview */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink);
          margin: 44px 0 0; padding: 0; list-style: none; }
.stage-card { padding: 24px 24px 30px; border-left: 1px solid var(--rule); min-width: 0; }
.stage-card:first-child { border-left: 0; padding-left: 0; }
.stage-card:last-child { padding-right: 0; }
.stage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.stage-card .s-n { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); letter-spacing: .1em; }
.s-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
            padding: 3px 8px; border: 1px solid var(--rule-strong); }
.s-status.live { color: oklch(0.44 0.13 155); background: oklch(0.62 0.13 155 / 0.14); border-color: transparent; }
.s-status.next { color: var(--accent-hover); background: var(--accent-soft); border-color: transparent; }
[data-theme="dark"] .s-status.live { color: oklch(0.78 0.13 155); }
[data-theme="dark"] .s-status.next { color: var(--violet-300); }
.stage-card h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.stage-card .s-q { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin: 8px 0 12px; }
.stage-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 860px) {
  .stages { grid-template-columns: 1fr 1fr; }
  .stage-card { border-left: 0; border-top: 1px solid var(--rule); padding: 22px 0 24px; }
  .stage-card:first-child, .stage-card:nth-child(2) { border-top: 0; }
}
@media (max-width: 520px) { .stages { grid-template-columns: 1fr; } .stage-card:nth-child(2) { border-top: 1px solid var(--rule); } }

/* "next" roadmap band — visually quieter than the live ones */
.band-next .band-copy .idx { color: var(--accent); }
.next-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
            padding: 2px 7px; margin-left: 8px; vertical-align: 2px; }

/* feature bands */
.band { border-top: 1px solid var(--rule); padding: clamp(56px, 7vw, 92px) 0; }
.band-in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* grid items default to min-width:auto, which lets the non-wrapping terminal
   output widen its column and push the page sideways */
.band-in > * { min-width: 0; }
.panel-body, .panel { min-width: 0; }
.band.flip .band-in > .band-copy { order: 2; }
.band-copy .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.band-copy h2 { margin: 14px 0 0; }
.band-copy p { color: var(--ink-2); font-size: 16.5px; margin-top: 18px; max-width: 48ch; }
.band-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 5px 10px; color: var(--ink-2);
}
@media (max-width: 900px) {
  .band-in { grid-template-columns: 1fr; gap: 32px; }
  .band.flip .band-in > .band-copy { order: 0; }
}

/* lineage artifact */
.graph { background: var(--panel); border: 1px solid var(--panel-rule); padding: 20px; box-shadow: 0 24px 60px oklch(0.15 0.02 274 / 0.24); }
.graph-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--panel-ink-2); margin-bottom: 14px; }
.graph-head b { color: var(--panel-ink); font-size: 13px; font-weight: 600; }
.graph-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.lg { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--panel-rule); color: var(--panel-ink-2); }
.lg.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.lg.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }

/* usage bars artifact */
.bars { display: grid; gap: 12px; margin-top: 4px; }
.bar-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 62px; gap: 14px; align-items: center; font-size: 11.5px; color: var(--panel-ink-2); }
.bar { height: 9px; background: oklch(0.13 0.006 274); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: var(--w, 40%); display: block; }
.bar-row .v { text-align: right; color: var(--panel-ink); }
.bar-row.total { border-top: 1px solid var(--panel-rule); padding-top: 12px; margin-top: 4px; color: var(--panel-ink); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 44px; }
/* Rule on the left, not the right: with border-right the following column's text
   sat flush against the divider while the preceding one had 26px of air. */
.step { padding: 26px 26px 30px; border-left: 1px solid var(--rule); }
.step:first-child { border-left: 0; padding-left: 0; }
.step:last-child { padding-right: 0; }
.step .n { font-family: var(--font-mono); font-size: 40px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink-3); line-height: 1; }
.step h3 { margin: 16px 0 0; font-size: 18px; letter-spacing: -0.01em; }
.step p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
/* No background chip in prose: its padding visually detaches trailing punctuation
   ("stg_orders ." instead of "stg_orders."). Mono against sans is already a strong
   enough signal, and full-strength ink separates it from the body colour. */
code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step { border-left: 0; border-bottom: 1px solid var(--rule); padding: 22px 0 24px; } .step:last-child { border-bottom: 0; } }

/* security manifest */
.manifest { border-top: 1px solid var(--ink); margin-top: 44px; font-family: var(--font-mono); }
.manifest-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.manifest-row dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.manifest-row dd { margin: 0; font-family: var(--font-sans); font-size: 15.5px; color: var(--ink-2); }
.manifest-row dd b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .manifest-row { grid-template-columns: 1fr; gap: 8px; } }

/* FAQ */
.faq { border-top: 1px solid var(--ink); margin-top: 44px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 60px minmax(0, 1fr) 24px;
  gap: 16px; padding: 22px 0; align-items: baseline; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.08em; }
.faq summary .sign { font-family: var(--font-mono); font-size: 17px; color: var(--ink-2); text-align: right; }
.faq details[open] summary .sign { color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 24px 24px 76px; color: var(--ink-2); font-size: 15.5px; max-width: 76ch; }
.faq .a + .a { padding-top: 0; margin-top: -10px; }
@media (max-width: 700px) {
  .faq summary { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px; font-size: 16px; }
  .faq .a { padding-left: 44px; }
}

/* ============================================================
   CLOSER + FORM
   ============================================================ */
/* Always the brand dark surface, in both themes — the same "artifact" logic as
   the terminal panels, so the closing band reads as part of the product. */
.closer { background: var(--panel); color: var(--panel-ink); padding: clamp(64px, 8vw, 104px) 0; }
.closer .display { color: var(--panel-ink); }
.closer .tag { color: var(--panel-ink-2); }
.closer .brand .sfx { color: var(--panel-ink-3); }
.closer-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: start; }
.closer-aside p { color: var(--panel-ink-2); font-size: 16.5px; margin-top: 22px; max-width: 42ch; }
.closer-aside .direct { margin-top: 26px; font-family: var(--font-mono); font-size: 13px; }
.closer-aside .direct a { color: var(--violet-300); }
@media (max-width: 900px) { .closer-in { grid-template-columns: 1fr; gap: 36px; } }

/* the form lives on the dark closer; fields invert */
.form { display: grid; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-2 { grid-template-columns: 1fr; } }
.f label, .seg-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-ink-2); margin-bottom: 7px; }
.f input, .f textarea {
  width: 100%; padding: 12px 14px; border-radius: 6px;
  background: var(--panel-2); color: var(--panel-ink);
  border: 1px solid var(--panel-rule); font-size: 15px;
}
.f input::placeholder, .f textarea::placeholder { color: var(--panel-ink-3); }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 3px oklch(0.68 0.17 274 / 0.25); }
.f textarea { min-height: 116px; resize: vertical; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--panel-rule); border-radius: 6px; overflow: hidden; }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span {
  display: block; text-align: center; padding: 11px 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--panel-ink-2); border-right: 1px solid var(--panel-rule);
}
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--violet-500); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--panel-ink); outline-offset: -3px; }
.consent { display: flex; gap: 10px; align-items: start; font-size: 13px; color: var(--panel-ink-2); }
.consent input { margin-top: 3px; accent-color: var(--violet-400); }
.closer .btn { background: var(--violet-500); color: #fff; justify-content: center; }
.closer .btn:hover { background: oklch(0.50 0.17 274); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; min-height: 18px; margin-top: 10px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }
.closer .form-msg.ok { color: oklch(0.78 0.14 155); }
.closer .form-msg.err { color: oklch(0.75 0.16 25); }

/* ============================================================
   MANIFESTO PAGE
   ============================================================ */
.rules-sec { padding-top: 0; }
.rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rule { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--rule); }
.rule .r-n { font-family: var(--font-mono); font-size: 40px; font-weight: 600; letter-spacing: -.04em; color: var(--ink-3); line-height: 1; }
.rule .r-body { max-width: 72ch; }
.rule h2 { margin: 0; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.01em; line-height: 1.18; }
.rule p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.rule p b { color: var(--ink); font-weight: 600; }
.rule .r-out { margin-top: 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
               color: var(--ink-2); border-left: 2px solid var(--rule-strong); padding-left: 14px; }
.rule .r-out.r-none { color: var(--accent); border-left-color: var(--accent); }
@media (max-width: 640px) { .rule { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; } .rule .r-n { font-size: 30px; } }

/* ============================================================
   COMPARE PAGE
   ============================================================ */
.cmp-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; border-top: 1px solid var(--ink); padding-top: 34px; }
.cmp-line { min-width: 0; }
.cmp-line .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cmp-line p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.cmp-line b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .cmp-lines { grid-template-columns: 1fr; gap: 24px; } }

.cmp-table-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--rule); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--rule); }
.cmp-table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
                      color: var(--ink-2); vertical-align: bottom; border-bottom: 1px solid var(--ink); }
.cmp-table tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); max-width: 320px; }
.cmp-table th.us, .cmp-table td.us { background: var(--accent-soft); }
.cmp-table thead th.us { color: var(--accent-hover); }
.cmp-table td.y { color: var(--ink); font-weight: 500; }
.cmp-table td.p { color: var(--ink-2); }
.cmp-table td.n { color: var(--ink-2); }
.cmp-table td.us.y { color: var(--accent-hover); font-weight: 600; }
.cmp-foot { margin-top: 14px; font-size: 11.5px; color: var(--ink-2); letter-spacing: .02em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 34px 0; border-top: 1px solid var(--rule); }
.footer-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--ink-2); }
.footer-in a { text-decoration: none; }
.footer-in a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }