/* ============================================================
   fromSpec live landing — page styles
   Tokens come from /tokens/* (synced from the fromSpec Design System).
   This file is layout + components only.
   ============================================================ */

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

/* explicit transition presets — replaces blanket `transition: all` so only the
   properties that actually change are watched (paint = no layout thrash). */
:root {
  --transition-paint: color var(--duration-normal) var(--ease-standard),
                      background-color var(--duration-normal) var(--ease-standard),
                      border-color var(--duration-normal) var(--ease-standard);
  --transition-press: transform var(--duration-fast) var(--ease-standard);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

/* controls, icons & media descriptors inherit the brand font — no UA font leak (page stays at two families) */
button, input, select, textarea, svg, source { font-family: inherit; }

::selection { background: var(--signal-tint); color: var(--text-primary); }

/* keyboard focus ring — a solid, offset azure ring so it reads unmistakably as focus,
   clearly distinct from the decorative inset corner-bracket motif on buttons/cards. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px;
}
/* skip-to-content — off-screen until focused, so keyboard/SR users can jump the nav */
.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 200;
  transform: translateY(calc(-100% - var(--space-6)));
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--signal); border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-4); font: var(--type-label); text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- site background: 3D azure grid-floor + glow + static fallback ---------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* always-on azure depth glow — origin above the viewport, large + soft so it
   has no perceptible edge */
.bg-glow {
  position: absolute; inset: 0;
  background: radial-gradient(150% 120% at 50% -15%, color-mix(in oklab, var(--signal) 14%, transparent), transparent 58%);
}

/* static drafting grid — the fallback (reduced-motion / mobile / no-WebGL) */
.bg-grid {
  position: absolute; inset: 0;
  background-image: var(--grid-bg);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(125% 95% at 50% 30%, #000 38%, transparent 92%);
          mask-image: radial-gradient(125% 95% at 50% 30%, #000 38%, transparent 92%);
}

/* three.js floor canvas — shown only once the 3D background activates.
   The vertical mask feathers the horizon so it dissolves into the glow
   (no hard line between the dark upper half and the grid floor). */
#bg3d {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, #000 82%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 24%, #000 82%, #000 100%);
}
html.has-3d .bg-grid { display: none; }
html.has-3d #bg3d   { display: block; }

/* ---------- site header: floating sharp glass bar ---------- */
.site-nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: calc(100% - 48px); max-width: var(--container-max);  /* match the section content width (spine-aligned) */
  background: color-mix(in srgb, var(--surface-page) 62%, transparent);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);  /* sharp / architectural corners */
  box-shadow: var(--shadow-lg);
}
.nav-inner {
  height: 66px; padding: 0 var(--space-4) 0 var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}

.brand {
  display: inline-flex; align-items: baseline; gap: 0.06em;
  font-family: var(--font-display); font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight); white-space: nowrap;
}
.brand-mark { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: .82em; margin-right: .14em; }
.brand-mark .bm-f { color: var(--wm-base); }
.brand-mark .bm-s, .brand-mark .bm-cursor { color: var(--wm-accent); }
.brand-from { font-weight: var(--weight-medium); color: var(--wm-base); }
.brand-spec { font-weight: var(--weight-bold); color: var(--wm-accent); }
/* blinking underscore in the fs_ mark (terminal caret) */
.bm-cursor { animation: caret-blink 1.25s var(--ease-standard) infinite; }
@keyframes caret-blink { 0%, 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bm-cursor { opacity: 1; animation: none; } }
/* slow terminal caret for the "start specifying_" refrain (hero kicker + CTA closer) */
.kc-cursor { color: var(--signal); font-weight: var(--weight-bold); animation: caret-blink-slow 2.4s var(--ease-standard) infinite; }
@keyframes caret-blink-slow { 0%, 55% { opacity: 1; } 78% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kc-cursor { opacity: 1; animation: none; } }

/* all small header text → JetBrains Mono, heavier */
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a, .nav-signin {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-primary); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-links a:hover, .nav-signin:hover { color: var(--signal); }

.nav-actions { display: flex; align-items: center; gap: var(--space-5); }
.btn-cta {
  display: inline-flex; align-items: center; height: 32px;
  padding: 0 var(--space-4); border-radius: var(--radius-xs);
  background-color: var(--signal); background-image: var(--gloss); /* brand azure + DS sheen */
  color: var(--signal-contrast);
  font: var(--type-label); font-weight: var(--weight-bold); white-space: nowrap;
  box-shadow: var(--gloss-edge);
  transition: background-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn-cta:hover { background: var(--signal-hover); }
.btn-cta:active { transform: translateY(1px); }
/* tactile press feedback on the other real buttons (CTA already sinks above) */
.bstep:active, .mr-node:active, .btn-ghost:active { transform: scale(0.97); }

/* theme toggle (light/dark) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); border: none; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); cursor: pointer; transition: var(--transition-paint), var(--transition-press); }
.theme-toggle:hover { color: var(--signal); }
.theme-toggle:active { transform: scale(0.97); }
/* sun shown in dark mode, moon shown in light mode */
.theme-toggle .tt-sun  { display: block; }
.theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun  { display: none; }
html[data-theme="light"] .theme-toggle .tt-moon { display: block; }
/* touch devices: bump the icon-only controls to a ≥44px tap target (WCAG 2.5.5) */
@media (pointer: coarse) { .theme-toggle, .nav-burger { width: 44px; height: 44px; } }

/* hamburger (mobile/tablet) — same icon-button chrome as the theme toggle */
.nav-burger { display: none; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); cursor: pointer; transition: var(--transition-paint), var(--transition-press); }
.nav-burger:hover { color: var(--signal); background: var(--surface-hover); }
.nav-burger:active { transform: scale(0.97); }
.nav-burger .ic { width: 20px; height: 20px; }
.nav-burger .ic-close { display: none; }
.site-nav.menu-open .nav-burger .ic-burger { display: none; }
.site-nav.menu-open .nav-burger .ic-close { display: block; }

/* dropdown menu panel — collapsed inside the bar, expands on open */
.nav-drop { display: none; }
/* 3D azure floor runs in BOTH themes (re-toned per theme in initBg3D); the
   static token grid stays the no-3D fallback (mobile / reduced-motion / no-WebGL) */

/* ── corner ticks (bracket corners) on buttons — theme-aware, no extra DOM ── */
.btn-cta, .btn-ghost { position: relative; }
.btn-cta::before, .btn-ghost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --brk-len: 6px; --brk-w: 1.5px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--btn-tick), var(--btn-tick)), linear-gradient(var(--btn-tick), var(--btn-tick)),
    linear-gradient(var(--btn-tick), var(--btn-tick)), linear-gradient(var(--btn-tick), var(--btn-tick)),
    linear-gradient(var(--btn-tick), var(--btn-tick)), linear-gradient(var(--btn-tick), var(--btn-tick)),
    linear-gradient(var(--btn-tick), var(--btn-tick)), linear-gradient(var(--btn-tick), var(--btn-tick));
  background-size:
    var(--brk-len) var(--brk-w), var(--brk-w) var(--brk-len),
    var(--brk-len) var(--brk-w), var(--brk-w) var(--brk-len),
    var(--brk-len) var(--brk-w), var(--brk-w) var(--brk-len),
    var(--brk-len) var(--brk-w), var(--brk-w) var(--brk-len);
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
}
/* tick colour per button × theme (:root = light) */
.btn-cta   { --btn-tick: rgba(255,255,255,0.5); }   /* white ink on the azure solid */
.btn-ghost { --btn-tick: rgba(20,22,27,0.30); }     /* dark ink over light page */
html[data-theme="dark"] .btn-cta   { --btn-tick: rgba(12,14,18,0.42); } /* dark ink on azure */
html[data-theme="dark"] .btn-ghost { --btn-tick: rgba(255,255,255,0.28); }

/* ── corner brackets on cards + spec/code windows (inset, theme-aware) ── */
.diff-card, .spec-card.cmp-spec, .own-sec .tile, .pricing-sec .ptier, .pricing-sec .free-hero, .cmp-bento .bento-key, .bstep { position: relative; }
.own-sec .tile::before, .pricing-sec .ptier::before, .pricing-sec .free-hero::before, .cmp-bento .bento-key::before, .bstep.on::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  --l: 10px; --w: 1.5px; --brk-tick: rgba(20,22,27,0.26);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--brk-tick),var(--brk-tick)), linear-gradient(var(--brk-tick),var(--brk-tick)),
    linear-gradient(var(--brk-tick),var(--brk-tick)), linear-gradient(var(--brk-tick),var(--brk-tick)),
    linear-gradient(var(--brk-tick),var(--brk-tick)), linear-gradient(var(--brk-tick),var(--brk-tick)),
    linear-gradient(var(--brk-tick),var(--brk-tick)), linear-gradient(var(--brk-tick),var(--brk-tick));
  background-size:
    var(--l) var(--w), var(--w) var(--l), var(--l) var(--w), var(--w) var(--l),
    var(--l) var(--w), var(--w) var(--l), var(--l) var(--w), var(--w) var(--l);
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
}
html[data-theme="dark"] .own-sec .tile::before, html[data-theme="dark"] .pricing-sec .ptier::before,
html[data-theme="dark"] .pricing-sec .free-hero::before, html[data-theme="dark"] .cmp-bento .bento-key::before { --brk-tick: rgba(255,255,255,0.20); }

/* keep anchored sections clear of the floating header */
html { scroll-padding-top: 100px; }

/* tablet (≤900): the full inline link row no longer fits → fold it into the
   hamburger dropdown (the bar needs ~890px for brand+links+actions). */
@media (max-width: 900px) {
  .nav-inner > .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-drop {
    display: flex; flex-direction: column; gap: 0;
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 var(--space-5);
    transition: max-height var(--duration-slow) var(--ease-standard),
                opacity var(--duration-normal) var(--ease-standard),
                padding var(--duration-slow) var(--ease-standard);
  }
  .nav-drop a:not(.btn-cta) { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; color: var(--text-primary); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); transition: color var(--duration-fast) var(--ease-standard); }
  .nav-drop a:not(.btn-cta):hover { color: var(--signal); }
  .nav-drop .nd-signin, .nav-drop .nd-cta { display: none; }   /* tablet keeps inline sign-in + CTA */
  .site-nav.menu-open .nav-drop { max-height: 76vh; opacity: 1; padding-block: var(--space-2) var(--space-4); overflow-y: auto; }
}

/* phone (≤760): fold sign-in + CTA into the dropdown too → bar = brand · toggle · burger */
@media (max-width: 760px) {
  .site-nav { width: calc(100% - 24px); }
  .nav-actions .nav-signin, .nav-actions .btn-cta { display: none; }
  .nav-drop .nd-signin { display: block; }
  .nav-drop .nd-cta { display: inline-flex; width: 100%; justify-content: center; border-bottom: 0; margin-top: var(--space-3); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--titlebar-h) + var(--space-16)) var(--space-6) var(--space-16);
  text-align: center;
}
.hero-inner {
  width: 100%; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.hero-title {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(2.75rem, 7vw, var(--text-5xl));
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}
.sig { color: var(--signal); }
.v0 { color: var(--text-muted); }
/* version tokens (v0 / v1) as mono chips — matches the version rail, spec badge & diff ver */
.vtok { font-family: var(--font-mono); font-weight: 700; font-size: 0.84em; letter-spacing: -0.01em; }
/* square full stop — the single signature terminal mark, used on the hero thesis only */
.fstop { display: inline-block; width: 0.2em; height: 0.2em; background: var(--signal); margin-left: 0.06em; vertical-align: 0.04em; border-radius: 1px; }
.hero-sub { margin: 0; max-width: 56ch; font: var(--type-deck); color: var(--text-secondary); text-wrap: balance; }
/* longer v0→v1 headline: cap smaller than the old 2-word hero so it fits one line per clause */
.hero-title--xl { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
/* hero kicker — the "stop prompting. start specifying_" eyebrow (bookends the final CTA) */
.hero-kicker { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); color: var(--text-secondary); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* pipeline line + fixed-width rotating word (no re-center jitter) */
.hero-pipeline {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
}
.hero-pipeline .arr { color: var(--text-faint); margin: 0 0.35em; }
.hero-pipeline .rot {
  /* 13ch covers the longest word (13 chars); +0.4em absorbs the line's
     letter-spacing (0.02em/char), which `ch` doesn't count — without it the
     two 13-char words ("time-off tool", "analytics app") expand the slot ~4px
     and the centered line jitters. */
  display: inline-block; min-width: calc(13ch + 0.4em); text-align: left;
  color: var(--signal); will-change: transform, opacity;
}
/* phones: shrink the pipeline and drop the fixed rotating-slot width so the line
   wraps cleanly instead of being pushed past the viewport edge (was clipped). */
@media (max-width: 560px) {
  .hero-pipeline { font-size: var(--text-2xs); }
  .hero-pipeline .arr { margin: 0 0.2em; }
  .hero-pipeline .rot { min-width: 0; }
}

/* ============================================================
   Section scaffolding + The spec (compile → bento, scan-on-hover)
   ============================================================ */
.section { position: relative; z-index: 1; padding: var(--space-24) var(--space-6); }
.section-inner { max-width: var(--container-max); margin: 0 auto; }
.sec-head { max-width: 640px; margin: 0 0 var(--space-12); }
.sec-kicker { margin: 0 0 var(--space-3); font: var(--type-kicker); font-weight: var(--weight-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted); }
.sec-title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.sec-sub { margin: 0; font: var(--type-deck); color: var(--text-secondary); max-width: 60ch; text-wrap: balance; }

/* spec.json card static variant (overrides the absolute hero variant) */
.spec-card.static { position: static; transform: none; width: auto; margin: 0; }

/* bento key cells */
.bento-cell { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.bento-key .bk-name { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--signal); letter-spacing: var(--tracking-mono); }
.bento-key p { margin: var(--space-2) 0 0; font: var(--type-body-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }

/* compile → bento */
.compile-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
/* prompt gallery overlays the bento region (no reserved band → no empty space pre-compile) */
.cmp-prompts { position: absolute; top: 0; left: 0; right: 0; height: 320px; pointer-events: none; }
.cmp-card {
  position: absolute; left: 50%; top: 50%; width: 200px; min-height: 204px;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
  /* a fixed white "paper note" (raw prompt) in both themes — so its ink + azure
     are the fixed paper tokens, not theme-aware --signal (which washes out on
     white in dark theme). Hairline keeps the white edge legible on light paper. */
  background: #fff; color: var(--fs-ink); text-align: left;
  border: 1px solid color-mix(in srgb, var(--fs-ink) 8%, transparent);
  box-shadow: var(--shadow-lg); will-change: transform, opacity; user-select: none;
}
.cmp-card .cc-tag { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--fs-azure); }
.cmp-card .cc-text { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: 1.28; letter-spacing: -.01em; }
.cmp-card b { color: var(--fs-azure); font-weight: var(--weight-bold); }
/* below the arc's min width, cards stack vertically (clean gaps, readable) */
@media (max-width: 1199px) { .compile-stage { padding-top: 580px; } .cmp-prompts { height: 568px; } .cmp-card { width: min(360px, 84vw); min-height: 96px; } .cmp-card .cc-text { font-size: var(--text-base); } }
.cmp-bento { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: var(--space-5); align-items: center; width: 100%; max-width: var(--content-max); margin: 0 auto; }
.cmp-col { display: flex; flex-direction: column; gap: var(--space-4); }
.cmp-spec { align-self: stretch; order: 1; }   /* flip: spec.json sits on the right; bento keys on the left */
.cmp-spec .ln { transition: opacity 0.2s var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.cmp-spec.scanning .ln:not(.hl) { opacity: 0.35; }
/* selecting a key highlights its whole row in the file — a full-width azure bar that
   bleeds to the card edges (negative inline margin against .spec-code's padding). */
.cmp-spec .ln.hl { opacity: 1; background: color-mix(in srgb, var(--signal) 15%, transparent); box-shadow: inset 2px 0 0 var(--signal); margin-inline: calc(-1 * var(--space-5)); padding-inline: var(--space-5); }
.cmp-spec .ln.hl .k { color: var(--signal-bright); }
.cmp-bento .bento-key { transition: var(--transition-paint); }
.cmp-bento .bento-key:hover, .cmp-bento .bento-key.hot { border-color: var(--signal-line); background: color-mix(in srgb, var(--signal) 7%, var(--surface-card)); }
.cmp-bento .bento-key:hover .bk-name, .cmp-bento .bento-key.hot .bk-name { color: var(--signal-bright); }

/* hidden until the compile plays on scroll-into-view (motion only) */
html.js-motion .cmp-card,
html.js-motion #specFile,
html.js-motion .cmp-bento .bento-key { opacity: 0; }

@media (max-width: 860px) { .cmp-bento { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .compile-stage { padding-top: 0; gap: var(--space-6); }
  .cmp-prompts { position: static; margin-bottom: var(--space-4); }
}

/* ============================================================
   The problem — prompting (drift, chat log) vs specifying (a file you approve)
   ============================================================ */
.problem-sec .pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: var(--content-max); align-items: stretch; }
.pp-card { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pp-specifying { border-color: var(--signal-line); }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pp-tag { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-mono); padding: 2px var(--space-2); border-radius: var(--radius-xs); }
.pp-tag--warn { color: var(--status-blocked); background: var(--fs-del-tint); border: 1px solid color-mix(in srgb, var(--status-blocked) 30%, transparent); }
.pp-tag--ok { color: var(--signal-bright); background: var(--signal-tint); border: 1px solid var(--signal-line); }
.pp-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.pp-log { display: flex; flex-direction: column; gap: var(--space-2); }
.pp-msg { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.5; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.pp-you { background: var(--surface-band); color: var(--text-primary); }
.pp-warn { background: var(--fs-del-tint); color: var(--status-blocked); font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid color-mix(in srgb, var(--status-blocked) 26%, transparent); }
.pp-spec { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.85; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); overflow-x: auto; }
.pp-spec .ln { display: block; white-space: pre; }
.pp-spec .k { color: var(--signal); }
.pp-spec .s { color: var(--status-approved); }
.pp-spec .p { color: var(--text-faint); }
.pp-foot { margin: auto 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.pp-specifying .pp-foot { color: var(--text-primary); }
@media (max-width: 760px) { .problem-sec .pp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   See it build · How it works (step explorer + product frame)
   ============================================================ */
.frame { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-lg); }
.frame .chrome { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--surface-band); }
.frame .chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.frame .chrome .url { margin-left: var(--space-3); font: var(--type-label); color: var(--text-muted); }
.frame video, .frame img { display: block; width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; background: #0a0c10; }
.stack-area { position: relative; }
.stack-area .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s var(--ease-standard); }
.stack-area .slide.on { position: relative; opacity: 1; }

/* consistent with the page system: container-max width, a numbered step rail
   (left) + the product player (right). Each rail step carries number · title ·
   one-line caption; clicking a step switches the player + the browser-chrome URL,
   and the reel auto-advances through the steps. */
.build-sec { padding-block: var(--space-24); }
.build-sec .section-inner { max-width: var(--container-max); }
.build-sec .sec-title { font-size: var(--text-3xl); }
/* Rail on the page spine, player in the remaining column — both stay inside the
   1180 container (no gutter breakout), so the player sits centred and symmetric. */
.build-grid { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: var(--space-8); align-items: center; }

.build-rail { display: flex; flex-direction: column; gap: var(--space-1); }
.bstep { display: flex; gap: var(--space-4); align-items: flex-start; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; background: transparent; border: 1px solid transparent; border-left: 2px solid var(--border-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3) var(--space-4); transition: var(--transition-paint), var(--transition-press); }
.bstep:hover { background: var(--surface-hover); }
.bstep.on { border-left-color: var(--signal); }   /* no fill box — corner ticks mark the active step */
.bstep.on::before { --brk-tick: var(--signal); }  /* azure corner ticks for the selected step */
.bs-num { flex: none; padding-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-mono); color: var(--text-muted); }
.bstep.on .bs-num { color: var(--signal-bright); }
.bs-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bs-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bs-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-secondary); }
.bstep.on .bs-title { color: var(--text-primary); }
.bs-gate { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--signal-bright); background: var(--signal-tint); border: 1px solid var(--signal-line); border-radius: var(--radius-xs); padding: 1px var(--space-2); white-space: nowrap; }
.bs-desc { font-size: var(--text-sm); line-height: 1.4; color: var(--text-muted); }
.bstep.on .bs-desc { color: var(--text-secondary); }
/* player fills its column (~924px in the 1180 spine) — large enough to read, but
   short of the full-blown breakout. The section is allowed to grow taller than one
   screen rather than shrinking the player to fit; capped so it never gets oversized. */
.build-frame { width: 100%; max-width: 1040px; justify-self: center; }
.build-frame .url { transition: color var(--duration-fast) var(--ease-standard); }

@media (max-width: 860px) {
  .build-grid { grid-template-columns: 1fr; gap: var(--space-5); margin-right: 0; align-items: start; }
  .build-frame { max-width: none; }
  .build-rail { flex-direction: row; flex-wrap: wrap; }
  .bstep { width: auto; flex: 1 1 auto; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
  .bstep.on { border-color: var(--signal); }
  .bs-desc { display: none; }
}

/* ═══ Iteration: spec.json recompiles in place along a version timeline (scroll-morph) ═══ */
.iteration-sec { position: relative; z-index: 1; }
/* timeline is click-driven (no scroll-scrub): the scene is a normal-height section,
   not a 320vh pinned scrubber. Click a version node to recompile the spec in place. */
.iteration-sec .scene-track { position: relative; height: auto; }
.iteration-sec .scene-pin { position: static; min-height: 0; display: block; padding: var(--space-24) var(--space-6); }
.iteration-sec .scene-pin .section-inner { width: 100%; }   /* gutter moved to .scene-pin so the centered inner aligns to the page spine */
.iteration-sec .sec-head { max-width: 680px; margin: 0 0 var(--space-10); }
.iter-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-16); align-items: center; }

/* the spec.json card */
.morph-spec { min-width: 0; }
.diff-card { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-lg); max-width: 720px; }
.diff-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--surface-band); }
.diff-file { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-primary); }
.diff-file svg { width: 15px; height: 15px; color: var(--text-muted); }
.diff-tag { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-xs); background: var(--signal-tint); color: var(--signal-bright); border: 1px solid var(--signal-tint); }
.diff-ver { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--signal-bright); font-variant-numeric: tabular-nums; }

.spec-lines { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.85; padding: var(--space-4) var(--space-5); font-variant-numeric: tabular-nums; }
.specln { display: block; white-space: pre; border-radius: var(--radius-xs); padding: 0 6px; margin: 0 -6px; }
.specln.flash { animation: lnflash 0.85s var(--ease-standard); }
@keyframes lnflash { from { background: var(--signal-tint); } to { background: transparent; } }
.dk { color: var(--signal-bright); }
.ds { color: var(--text-primary); }
.dp { color: var(--text-muted); }
.ins { background: var(--fs-add-line); color: var(--fs-add); border-radius: 3px; padding: 0 3px; }

/* the version timeline rail */
.morph-rail { position: relative; align-self: center; padding: var(--space-2) 0; }
.morph-rail .rail-line { position: absolute; left: 7px; top: 28px; bottom: 28px; width: 2px; background: var(--border-strong); }
.morph-rail .rail-fill { position: absolute; left: 0; top: 0; width: 2px; background: var(--signal); height: 0; transition: height 0.45s var(--ease-standard); }
.mr-node { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; width: 100%; padding: var(--space-5) 0 var(--space-5) var(--space-8); background: transparent; border: 0; cursor: pointer; text-align: left; transition: var(--transition-paint), var(--transition-press); font: inherit; }
.mr-node::before { content: ""; position: absolute; left: 1px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-page); border: 2px solid var(--border-strong); transition: var(--transition-paint), box-shadow var(--duration-normal) var(--ease-standard); z-index: 1; }
.mr-node.active::before { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 4px var(--signal-tint); }
.mr-node .v { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-muted); }
.mr-node.active .v { color: var(--signal-bright); }
.mr-node .t { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.3; }
.mr-node.active .t { color: var(--text-primary); font-weight: var(--weight-semibold); }
/* every step shows its one-line description (constant height → the pinned, flex-centred
   block never re-centres as the active step changes, so the header can't bounce); the
   selected step is marked by colour + corner ticks, not by expand/collapse. */
.mr-node .d { font-size: var(--text-xs); line-height: 1.45; color: var(--text-muted); max-width: 32ch; margin-top: 4px; transition: color var(--duration-normal) var(--ease-standard); }
.mr-node.active .d { color: var(--text-secondary); }
/* selected step: azure corner ticks framing the text (matches the build rail + bento motif) */
.mr-node::after {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  top: 0; bottom: 0; left: 24px; right: 0;
  --l: 9px; --w: 1.5px; --brk: var(--signal);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--brk),var(--brk)), linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)), linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)), linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)), linear-gradient(var(--brk),var(--brk));
  background-size:
    var(--l) var(--w), var(--w) var(--l), var(--l) var(--w), var(--w) var(--l),
    var(--l) var(--w), var(--w) var(--l), var(--l) var(--w), var(--w) var(--l);
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  opacity: 0; transition: opacity var(--duration-normal) var(--ease-standard);
}
.mr-node.active::after { opacity: 1; }

/* tablet + mobile: stack to 1-col with horizontal version chips (tap to switch) — at ≤860px
   (matching the build section) so 768px tablets don't get a cramped 2-col + clipped diff. */
@media (max-width: 860px) {
  .iteration-sec .scene-track { height: auto; }
  .iteration-sec .scene-pin { position: static; min-height: 0; padding-block: var(--space-20); }
  .iter-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .morph-rail { order: -1; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); padding: 0; }
  .morph-rail .rail-line { display: none; }
  .mr-node { width: auto; flex-direction: row; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
  .mr-node::before, .mr-node::after { display: none; }
  .mr-node.active { border-color: var(--signal); background: var(--surface-card); }
  .mr-node .t, .mr-node .d { display: none; }
  .diff-card { max-width: none; }
}

/* ═══ Compare: fromSpec vs prompt-to-code tools (dimension table) ═══ */
/* phones can't fit a 3-col table; scroll it horizontally inside this wrapper rather
   than clipping the third column (body has overflow-x:clip, which would hide it). */
.compare-sec .tbl-scroll { max-width: var(--content-max); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-sec .cmp-tbl { width: 100%; max-width: var(--content-max); margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); }
.cmp-tbl th, .cmp-tbl td { text-align: left; padding: var(--space-4) var(--space-5); vertical-align: top; border-top: 1px solid var(--border-subtle); }
.cmp-tbl thead th { border-top: 0; background: var(--surface-band); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-secondary); }
.cmp-tbl .dim { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted); width: 26%; }
.cmp-tbl .v { font-size: var(--text-sm); color: var(--text-secondary); width: 37%; line-height: 1.45; }
.cmp-tbl .col-fs { background: var(--signal-tint); }
.cmp-tbl thead th.col-fs { color: var(--signal-bright); }
.cmp-tbl td.col-fs { color: var(--text-primary); }
.cmp-tbl td.col-fs::before { content: "\2713"; color: var(--fs-add); font-weight: var(--weight-bold); margin-right: var(--space-2); }
@media (max-width: 760px) { .cmp-tbl { font-size: var(--text-xs); } .cmp-tbl th, .cmp-tbl td { padding: var(--space-3); } }
@media (max-width: 560px) { .compare-sec .cmp-tbl { min-width: 520px; } }

/* ═══ What you get / own it: bento (BYOK · own the code · control · billing · output) ═══ */
.own-sec .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: var(--content-max); margin: 0; }
.own-sec .tile { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-6); display: flex; flex-direction: column; }
.own-sec .tile.feature { border-color: var(--signal-line); }
.own-sec .tile .tk { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted); margin: 0 0 var(--space-3); }
.own-sec .tile h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.own-sec .tile p { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.55; color: var(--text-secondary); }
.own-sec .t-byo { grid-column: 1; grid-row: 1 / span 2; }
.own-sec .t-repo { grid-column: 2 / span 2; grid-row: 1; }
.own-sec .t-deploy { grid-column: 2; grid-row: 2; }
.own-sec .t-billing { grid-column: 3; grid-row: 2; }
.own-sec .t-output { grid-column: 1 / span 3; grid-row: 3; }
.own-sec .model-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.own-sec .model { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-page); }
.own-sec .model.on { border-color: var(--signal-line); color: var(--text-primary); background: var(--signal-tint); }
.own-sec .model .lbl { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--signal-bright); }
.own-sec .model.onprem .lbl { color: var(--text-muted); }
.own-sec .stack-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-4); }
.own-sec .chip { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.own-sec .chip-sep  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); user-select: none; padding: 0 2px; }
.own-sec .chip-plus { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); user-select: none; padding: 0 1px; }
.own-sec .own-bullets { margin: var(--space-3) 0 0; padding: 0 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.own-sec .own-bullets li { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
@media (max-width: 860px) {
  .own-sec .bento { grid-template-columns: 1fr; }
  .own-sec .t-byo, .own-sec .t-repo, .own-sec .t-deploy, .own-sec .t-billing, .own-sec .t-output { grid-column: 1; grid-row: auto; }
}

/* ═══ Pricing: free-forward (Free hero + Pro/Team) — prices TBD, no annual ═══ */
.pricing-sec .free-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; border: 1px solid var(--signal-line); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-lg); padding: var(--space-8); margin-bottom: var(--space-5); max-width: var(--content-max); }
.pricing-sec .free-hero h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.pricing-sec .free-hero .fh-lead { margin: 0 0 var(--space-5); font-size: var(--text-base); color: var(--text-secondary); }
.pricing-sec .free-hero ul { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pricing-sec .free-hero li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.pricing-sec .free-hero li .ic { color: var(--fs-add); font-weight: var(--weight-bold); }
.pricing-sec .fh-amt { text-align: right; }
.pricing-sec .fh-amt .big { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.pricing-sec .fh-amt .sub { margin: var(--space-2) 0 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.pricing-sec .paid-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: var(--content-max); }
.pricing-sec .ptier { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-6); display: flex; flex-direction: column; }
.pricing-sec .ptier.pop { border-color: var(--signal-line); box-shadow: var(--shadow-lg); }
.pricing-sec .ptier .badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--signal-contrast); background: var(--signal); padding: 3px var(--space-3); border-radius: var(--radius-xs); }
.pricing-sec .ptier .pname { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.pricing-sec .ptier .ptag { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.pricing-sec .ptier .price-tbd { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.pricing-sec .ptier .pcta { width: 100%; justify-content: center; margin-bottom: var(--space-4); }
.pricing-sec .ptier ul { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-sec .ptier li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); line-height: 1.45; }
.pricing-sec .ptier li .ic { flex: none; color: var(--fs-add); font-weight: var(--weight-bold); }
.pricing-sec .all-plans { max-width: var(--content-max); margin-top: var(--space-6); font: var(--type-label); color: var(--text-muted); }
@media (max-width: 860px) { .pricing-sec .free-hero, .pricing-sec .free-hero ul, .pricing-sec .paid-row { grid-template-columns: 1fr; } .pricing-sec .fh-amt { text-align: left; } }

/* ═══ FAQ: single-column accordion (native <details>) ═══ */
.faq-sec .faq-list { max-width: 780px; }
.faq-sec .faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-sec .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); transition: var(--transition-paint); }
.faq-sec .faq-item summary::-webkit-details-marker { display: none; }
.faq-sec .faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--signal); flex: none; transition: transform var(--duration-normal) var(--ease-standard); transform-origin: center; }
/* no-JS / reduced-motion: marker driven by [open] (+ rotated 45deg reads as ×) */
.faq-sec .faq-item[open] summary::after { transform: rotate(45deg); }
/* JS-enhanced: marker driven by .is-open so it rotates back in sync with the close */
html.faq-anim .faq-sec .faq-item[open] summary::after { transform: none; }
html.faq-anim .faq-sec .faq-item.is-open summary::after { transform: rotate(45deg); }
.faq-sec .faq-item summary:hover { color: var(--signal-bright); }
/* animated panel: padding lives on the <p> so the box can collapse to height:0
   (border-box + padding would otherwise floor the height and break the close) */
.faq-sec .faq-a { overflow: hidden; transition: height 280ms var(--ease-standard), opacity 200ms var(--ease-standard); }
.faq-sec .faq-a p { margin: 0; padding: 0 var(--space-8) var(--space-5) 0; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.6; color: var(--text-secondary); }
.faq-sec .faq-a code { font-family: var(--font-mono); font-size: 0.92em; color: var(--signal-bright); }

/* ═══ Trust band: distilled ownership/keys promise — one cohesive band (lead + 4
   hairline-divided signals), not another card grid, so it reads as a trust statement ═══ */
.trust-sec { padding-block: var(--space-16); }
.trust-band { max-width: var(--content-max); margin: 0; border: 1px solid var(--signal-line); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-md); overflow: hidden; }
.trust-lead { padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.tb-kicker { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted); }
.tb-line { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: var(--space-6); border-left: 1px solid var(--border-subtle); }
.trust-item:first-child { border-left: 0; }
.ti-ic { display: inline-flex; color: var(--signal); margin-bottom: var(--space-3); }
.ti-ic svg { width: 22px; height: 22px; }
.trust-item h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.trust-item p { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .trust-item:first-child { border-top: 0; }
}

/* ═══ Final CTA: waitlist closer (thesis echo) ═══ */
.cta-sec .cta-echo { max-width: 660px; margin: 0 auto; text-align: center; }
.cta-sec .echo-line { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-mono); color: var(--signal); margin: 0 0 var(--space-5); }
.cta-sec .echo-line .arr { color: var(--text-muted); margin: 0 var(--space-2); }
/* the hero's bookend echo — match the hero title's weight + tracking; left-align the two
   lines (as a centred inline-block) so their starts line up instead of ragged-centred. */
.cta-sec .cta-title { display: inline-block; text-align: left; font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); margin: 0 0 var(--space-4); color: var(--text-primary); text-wrap: balance; }
.cta-sec .cta-sub { font-size: var(--text-lg); line-height: 1.5; color: var(--text-secondary); margin: 0; }
/* keep the sub on one line where the viewport can hold it; it wraps below for small screens */
@media (min-width: 760px) { .cta-sec .cta-sub { white-space: nowrap; } }
.cta-sec .cta-form { display: flex; gap: var(--space-3); margin: var(--space-6) auto 0; max-width: 480px; }
.cta-sec .cta-input { flex: 1; min-width: 0; height: var(--control-lg); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface-card); padding: 0 var(--space-4); color: var(--text-primary); font: var(--type-body); }
.cta-sec .cta-input::placeholder { color: var(--text-muted); }
.cta-sec .cta-input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint); }
.cta-sec .cta-micro {
  margin: var(--space-4) 0 0; font: var(--type-label); color: var(--text-muted);
  transition: color var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              filter var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}
.cta-sec .cta-micro.done { color: var(--fs-add); }
@media (max-width: 560px) { .cta-sec .cta-form { flex-direction: column; } .cta-sec .cta-form .btn-cta { width: 100%; justify-content: center; } }

/* ═══ Footer ═══ */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-subtle); padding: var(--space-8) var(--space-6); }
.site-footer .foot-inner { max-width: var(--container-max); margin: 0 auto; }
.site-footer .foot-brand { display: inline-flex; align-items: baseline; gap: .06em; font-family: var(--font-display); font-size: var(--text-base); }
.site-footer .foot-brand .mk { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: .85em; margin-right: .14em; }
.site-footer .foot-brand .mk .mk-f { color: var(--wm-base); }
.site-footer .foot-brand .mk .mk-s { color: var(--wm-accent); }
.site-footer .foot-brand .fr { font-weight: var(--weight-regular); color: var(--wm-base); }
.site-footer .foot-brand .sp { font-weight: var(--weight-bold); color: var(--wm-accent); }
.site-footer .foot-tag { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.site-footer .foot-copy { font: var(--type-label); color: var(--text-muted); }
/* multi-column footer: brand + Product / Resources / Legal */
.site-footer .foot-main { display: grid; grid-template-columns: 1.4fr 2.6fr; gap: var(--space-10) var(--space-8); padding-bottom: var(--space-8); }
.site-footer .foot-brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.site-footer .foot-brand-col .foot-tag { margin: 0; }
.site-footer .foot-cta { margin-top: var(--space-2); }
.site-footer .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.site-footer .foot-col { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.site-footer .foot-h { margin: 0 0 var(--space-1); font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted); }
.site-footer .foot-col a { font-size: var(--text-sm); color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.site-footer .foot-col a:hover { color: var(--signal); }
.site-footer .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--border-subtle); padding-top: var(--space-6); }
.site-footer .foot-status { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--signal); }
@media (max-width: 760px) {
  .site-footer .foot-main { grid-template-columns: 1fr; gap: var(--space-8); }
  .site-footer .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .site-footer .foot-cols { grid-template-columns: 1fr; }
}

/* ghost / secondary button + large size (sharp, matches header) */
.btn-ghost {
  display: inline-flex; align-items: center; height: 32px;
  padding: 0 var(--space-4); border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  color: var(--text-primary); font: var(--type-label); font-weight: var(--weight-bold); white-space: nowrap;
  transition: var(--transition-paint), var(--transition-press);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--text-primary) 12%, transparent); border-color: var(--text-secondary); }
.btn-lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: var(--text-sm); }

/* ---------- the Convergence ---------- */
.conv { position: relative; width: 100%; max-width: 760px; height: 280px; margin: var(--space-10) auto 0; }
.conv-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.wire { fill: none; stroke: var(--signal); stroke-width: 1.6; opacity: .6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(91,141,239,.45)); }
.wire-merge { fill: var(--signal-bright); filter: drop-shadow(0 0 6px rgba(91,141,239,.6)); }
.wire-dot { fill: var(--signal-bright); filter: drop-shadow(0 0 7px rgba(91,141,239,.9)); }

.frags { position: absolute; inset: 0; z-index: 2; }
.frag {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-secondary); white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface-card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
}
.frag b { color: var(--status-blocked); font-weight: var(--weight-bold); }  /* warn = the drift signal */

.spec-card {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(400px, 94%); text-align: left; z-index: 2; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.spec-card.stamped { box-shadow: 0 0 0 1px var(--signal-line), var(--shadow-lg); }
.spec-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.spec-ji { width: 14px; height: 14px; color: var(--signal); flex: none; }
.spec-name { color: var(--text-primary); }
.spec-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-mono);
  color: var(--status-approved); padding: 2px var(--space-2); border-radius: var(--radius-xs);
  background: var(--fs-add-tint); border: 1px solid var(--fs-add-line);
}
.spec-code {
  margin: 0; padding: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.85;
  color: var(--text-secondary); white-space: normal; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.spec-code .ln { display: block; white-space: pre; }
.spec-code .k { color: var(--signal); }
.spec-code .s { color: var(--status-approved); }
.spec-code .n { color: var(--status-blocked); }
.spec-code .p { color: var(--text-faint); }

/* entrance motion guard — hide convergence pieces only when motion will play
   (html.js-motion is set inline in <head> when reduced-motion is OFF) */
html.js-motion .conv .frag,
html.js-motion .conv .spec-card,
html.js-motion .conv .spec-badge,
html.js-motion .conv .wire,
html.js-motion .conv .wire-merge { opacity: 0; }

@media (max-width: 640px) {
  .conv { height: 330px; max-width: 420px; }
}

/* theme swap: brief unified crossfade so bg/text/border/shadow all ease together
   instead of some snapping while transition:color elements animate. Added by
   initTheme() only when reduced-motion is OFF, removed after it completes. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color 150ms var(--ease-standard),
              border-color 150ms var(--ease-standard),
              color 150ms var(--ease-standard),
              fill 150ms var(--ease-standard),
              box-shadow 150ms var(--ease-standard) !important;
}

/* ── mobile density + spec-code legibility (≤600px) ── */
@media (max-width: 600px) {
  .section { padding: var(--space-16) var(--space-5); }
  .build-sec { padding-block: var(--space-16); }
  .sec-head { margin-bottom: var(--space-8); }
  .iteration-sec .scene-pin { padding-block: var(--space-16); }
  /* spec.json windows: shrink the mono and let long pre lines scroll within the
     card instead of clipping at its right edge */
  .spec-lines, .spec-code { font-size: var(--text-2xs); overflow-x: auto; }
}

/* ── global reduced-motion safety net ──
   JS motion is already gated, but this neutralizes the remaining CSS-only
   transitions (video cross-fade, rail fill, line flash, hover tints) too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* merged "Own everything" — two EQUAL-HEIGHT proof tiles + a tight assurance row (de-dup of #own + #trust) */
.own-merged-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; max-width: var(--content-max); margin: 0 0 var(--space-6); }
/* pin the visual to the card bottom (margin auto) AND keep a guaranteed gap above it —
   padding-top survives even when the auto-margin collapses to 0 in a content-full tile,
   so the description text never jams against the model rows / chips. */
.own-merged-grid .model-list, .own-merged-grid .stack-chips { margin-top: auto; padding-top: var(--space-5); }
.assure-row { max-width: var(--content-max); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }
.assure-row .trust-item:first-child { padding-left: 0; }
@media (max-width: 860px) { .own-merged-grid { grid-template-columns: 1fr; } }