/* ============================================================================
   getcuria.ai — landing-page stylesheet
   ============================================================================
   Cyberpunk × Editorial hybrid, per /opt/curia/design/finish-book/index-v2.
   Hero + brain stage = full cyberpunk (the wedge artifact must scream).
   Body sections = editorial (warm paper, serif voice, ink hairlines).
   The hybrid is the entire visual thesis: same palette, two voices, one
   site. PRISM color_class hues come along for cross-page coherence with
   the portal at app.getoryn.ai.
   ============================================================================ */

/* ============================================================================
   1. TOKENS — PRISM color_classes, surfaces, type
   ============================================================================ */
:root {
  /* Editorial surfaces (body sections) — Carbon Atelier reconciled to the
     2026-06-02 founder ruling: Cinnabar accent on Mist warm-grey paper.
     Retires the 2026-05-29 Iron Plum experiment, restoring Curia's
     "never purple" palette rule. Mist replaces Cream as the light field.
     Canonical token reference: docs/ui/carbon-atelier-tokens.md. */
  --book-bg: #EDECE8;                /* Mist (was Cream #F4EFE6) */
  --book-paper: #fffdf8;
  --book-paper-warm: #faf7f0;
  --book-ink: #0E0F11;               /* Graphite */
  --book-ink-2: #1C1D21;             /* Ink */
  --book-muted: #6B6F73;             /* Stone */
  --book-rule: #d6d2c8;
  --book-rule-strong: #1a1a1a;
  --book-accent: #C2410C;            /* Cinnabar — brand-locked accent (2026-06-02 founder ruling, supersedes the Iron Plum #5A4A6E experiment) */
  --book-accent-muted: #D97B4A;      /* hover / decorative — softer/lighter */
  --book-accent-peak: #E35D1F;       /* flash bloom on decision moments */
  --book-cream: var(--book-bg);      /* deprecated alias — do not use in new code */

  /* Cyber surfaces (hero + brain stage). Magenta retained as a brain-stage
     accent token only — landing chrome no longer uses it (v3 tweak #7). */
  --cyber-bg-0: #050813;
  --cyber-bg-1: #070b1a;
  --cyber-bg-2: #0e1a3d;
  --cyber-ink: #e6f7ff;
  --cyber-ink-2: #a8c4e0;
  --cyber-muted: #6c80a8;
  --cyber-grid: rgba(0, 240, 255, 0.06);
  --cyber-line: rgba(0, 240, 255, 0.14);
  --cyber-line-strong: rgba(0, 240, 255, 0.28);
  --cyber-cyan: #00f0ff;
  --cyber-magenta: #ff2bd6;          /* brain-stage node-place only */

  /* PRISM color_class palette — ported verbatim from the portal skin. */
  --warm-glow: #ff6a3d;   --warm-ink: #8a3a25;   --warm-soft: #ffd4b3;
  --cool-glow: #3b9eff;   --cool-ink: #1f3a6a;   --cool-soft: #bfe2ff;
  --neutral-glow: #c0c0c0; --neutral-ink: #2a2722; --neutral-soft: #ececec;
  --urgent-glow: #ff2b5e; --urgent-ink: #a01030; --urgent-soft: #ffd0dc;
  --joyous-glow: #ffb547; --joyous-glow-2: #ff7ad9; --joyous-ink: #8a5a14;
  --somber-glow: #52677a; --somber-ink: #3a4a58; --somber-soft: #cfdae2;

  /* Node palette for the live brain stage */
  --node-people: var(--warm-glow);
  --node-projects: var(--cool-glow);
  --node-companies: var(--joyous-glow);
  --node-tasks: #46c08a;
  --node-places: var(--joyous-glow-2);
  --node-events: var(--urgent-glow);
  --node-concepts: #5ab0ff;

  /* Type — locked v3 free-tier picks (positioning-v3/_visuals-brief.md font
     table). Carbon Atelier intent preserved via the closest free analogs:
     Fraunces (display, wedge-serif, free analog of GT Sectra Display),
     Hanken Grotesk (humanist grotesque body, distinctive enough to read
     as "not Inter," free analog of Söhne),
     IBM Plex Mono (engineered + neutral, no coder-y ligatures, free
     analog of Berkeley Mono). All Google Fonts. Zero license risk. */
  --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
  --font-voice: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Rhythm */
  --container: 1280px;
  --container-narrow: 760px;
  --pad-section: 96px;
  --pad-section-tight: 64px;
  --pad-x: 32px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--book-bg);
  color: var(--book-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}
button { font: inherit; }

/* ============================================================================
   2. COMMON BLOCKS — container, eyebrow, headlines, buttons
   ============================================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container-narrow {
  max-width: var(--container-narrow);
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--book-muted);
  font-weight: 500;
}
.eyebrow-center { text-align: center; display: block; }

.display {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 12px 0 24px;
  color: var(--cyber-ink);
}
.display-em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--cyber-cyan);
  text-shadow: 0 0 24px rgba(0, 240, 255, 0.35);
}
.display-center { text-align: center; }

.section-h {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 12px 0 48px;
  text-align: center;
  color: var(--book-ink);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.muted-h {
  display: block;
  color: var(--book-muted);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  margin-top: 6px;
}
.serif-h {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 16px 0 36px;
  color: var(--book-ink);
}
.serif-h-italic {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--book-accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
  text-align: center;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--cyber-cyan);
  color: var(--cyber-bg-0);
  box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 24px -4px rgba(0, 240, 255, 0.5);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 32px -2px rgba(0, 240, 255, 0.75);
}
.btn-ghost {
  background: transparent;
  color: var(--cyber-ink);
  border-color: var(--cyber-line-strong);
}
.btn-ghost:hover {
  background: rgba(0, 240, 255, 0.06);
  border-color: var(--cyber-cyan);
}
.btn-block { width: 100%; }

/* In editorial sections, primary buttons render in ink */
.editorial-section .btn-primary,
.pricing .btn-primary,
.waitlist .btn-primary {
  background: var(--book-ink);
  color: var(--book-paper);
  box-shadow: 0 0 0 1px var(--book-ink);
}
.editorial-section .btn-primary:hover,
.pricing .btn-primary:hover,
.waitlist .btn-primary:hover {
  background: var(--book-accent);
  box-shadow: 0 0 0 1px var(--book-accent);
}
.editorial-section .btn-ghost,
.pricing .btn-ghost,
.waitlist .btn-ghost {
  color: var(--book-ink);
  border-color: var(--book-rule-strong);
}
.editorial-section .btn-ghost:hover,
.pricing .btn-ghost:hover,
.waitlist .btn-ghost:hover {
  background: var(--book-paper-warm);
  border-color: var(--book-accent);
  color: var(--book-accent);
}

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

/* Visually-hidden but kept in the accessibility tree for screen readers.
   Standard pattern — clip + 1px + overflow: hidden. */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — hidden by default, slides into view at the top-left when
   it gets keyboard focus. Outranks the mast in z-index so it sits above
   the sticky nav. Cyber-cyan accent matches the site's CTA language. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--cyber-cyan);
  color: var(--cyber-bg-0);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 24px rgba(0, 240, 255, 0.6);
  text-decoration: none;
  transition: top 200ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: none;
}
/* Make sure the hero doesn't render a focus ring when programmatically
   focused via the skip link (the visible cue is the page scroll itself). */
#main:focus { outline: none; }

/* ============================================================================
   3. MAST — top nav. Sits on cyber chrome of the hero.
   ============================================================================ */
.mast {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 19, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cyber-line);
  padding: 14px var(--pad-x);
}
.mast-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyber-ink);
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.wm-glyph .wm-core { fill: var(--cyber-cyan); filter: drop-shadow(0 0 6px var(--cyber-cyan)); }
.wm-glyph .wm-sat { fill: var(--cyber-magenta); filter: drop-shadow(0 0 4px var(--cyber-magenta)); }
.wm-glyph .wm-edge { stroke: var(--cyber-cyan); stroke-width: 0.8; opacity: 0.5; }
.wm-text { color: var(--cyber-ink); }

.mast-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mast-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mast-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyber-ink-2);
  padding: 10px 14px;
  border-radius: 3px;
  transition: color 160ms ease, background 160ms ease;
}
.mast-nav a:hover { color: var(--cyber-cyan); }
.mast-nav .nav-cta {
  color: var(--cyber-bg-0);
  background: var(--cyber-cyan);
  margin-left: 8px;
  box-shadow: 0 0 16px -4px rgba(0, 240, 255, 0.5);
}
.mast-nav .nav-cta:hover { color: var(--cyber-bg-0); background: #5af3ff; }

/* Hamburger button — hidden on desktop, visible at mobile.
   Three CSS-drawn lines that morph into an X when open. */
.menu-button {
  display: none;
  background: transparent;
  border: 1px solid var(--cyber-line-strong);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 160ms ease;
}
.menu-button:hover { border-color: var(--cyber-cyan); }
.menu-icon { display: inline-flex; flex-direction: column; gap: 3px; width: 18px; }
.menu-icon span {
  display: block;
  height: 1.5px;
  background: var(--cyber-ink);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.menu-button[aria-expanded='true'] .menu-icon span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-button[aria-expanded='true'] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded='true'] .menu-icon span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ============================================================================
   4. HERO — cyberpunk surface with live brain stage on the right
   ============================================================================ */
.hero {
  background:
    linear-gradient(var(--cyber-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 25% 30%, #0e1a3d 0%, #050813 70%);
  color: var(--cyber-ink);
  position: relative;
  overflow: hidden;
  padding: 80px var(--pad-x) 120px;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.hero::before {
  content: "";
  position: absolute;
  right: -10%; top: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse, rgba(255, 43, 214, 0.12), transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.hero-grid {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.hero-copy .eyebrow {
  color: var(--cyber-cyan);
  letter-spacing: 0.22em;
}
.hero-copy .display {
  color: var(--cyber-ink);
}
.lede {
  font-family: var(--font-voice);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--cyber-ink-2);
  max-width: 48ch;
  margin: 0 0 36px;
}
.lede em {
  font-style: italic;
  color: var(--cyber-ink);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}
.hero-meta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--cyber-ink-2);
  font-family: var(--font-ui);
  max-width: 46ch;
  padding-top: 24px;
  border-top: 1px solid var(--cyber-line);
}
.meta-text strong { color: var(--cyber-ink); font-weight: 600; }
.meta-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--cyber-cyan);
  box-shadow: 0 0 8px var(--cyber-cyan);
}
.meta-dot-live { animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* The stage — the screenshot-worthy artifact.
   Redrawn 2026-07-17 to match the LIVE brain (BrainMap3D / "the oort
   cloud"): a sparse field of mostly-dim, mostly-grey spheres with no
   central hub, floating against a slow-breathing cinnabar aurora on
   graphite — not the old tidy cyan hub-and-spoke star. Node color now
   encodes recency (fresh cinnabar-hot / recently-touched dim-amber /
   dormant grey), matching the live component's actual palette
   (portal/app/src/lib/components/brainmap3d-utils.ts getNodeEmissiveColor)
   rather than a per-category rainbow the live map doesn't render. */
.hero-stage {
  position: relative;
}
.stage-frame {
  background: rgba(14, 15, 17, 0.88);
  border: 1px solid rgba(194, 65, 12, 0.30);
  border-radius: 6px;
  box-shadow:
    0 24px 80px -32px rgba(194, 65, 12, 0.45),
    0 8px 32px -8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(194, 65, 12, 0.07);
  overflow: hidden;
}
.stage-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(194, 65, 12, 0.18);
  background: rgba(0, 0, 0, 0.32);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8a8a8c;
}
.chrome-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(194, 65, 12, 0.30);
}
.dot-a { background: rgba(255, 43, 94, 0.5); }
.dot-b { background: rgba(255, 181, 71, 0.5); }
.dot-c { background: rgba(70, 192, 138, 0.5); }
.chrome-label {
  margin-left: 10px;
  letter-spacing: 0.04em;
  color: rgba(244, 239, 230, 0.68);
}
.chrome-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--book-accent-muted);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--book-accent-peak);
  box-shadow: 0 0 6px var(--book-accent-peak);
  animation: live-pulse 1.4s ease-in-out infinite;
}

.stage-canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 60% at 54% 42%, rgba(194, 65, 12, 0.14) 0%, rgba(14, 15, 17, 0) 70%),
    radial-gradient(ellipse 90% 70% at 50% 60%, #121315 0%, #0E0F11 100%);
  overflow: hidden;
}
/* Borealis stand-in — the live component runs a GLSL aurora shader
   (portal BrainMap3D.svelte FRAG_SRC); a marketing hero can't ship WebGL,
   so this is a blurred, slowly-breathing gradient in the same two hues
   (cinnabar + muted cinnabar) on the same ~6s cycle as the real shader. */
.stage-canvas::before {
  content: "";
  position: absolute; inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 38% at 28% 72%, rgba(194, 65, 12, 0.30) 0%, transparent 62%),
    radial-gradient(ellipse 48% 34% at 74% 26%, rgba(217, 123, 74, 0.22) 0%, transparent 60%);
  filter: blur(18px);
  animation: aurora-breathe 6.2s ease-in-out infinite;
}
@keyframes aurora-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1) translateY(0); }
  50%      { opacity: 1;    transform: scale(1.06) translateY(-2%); }
}
.stage-canvas::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.brain-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* brain-stage.js still boots against these three groups (it drives the
   corner cue + caption narration off its own internal dataset) — they're
   kept in the markup so that machinery runs without error, but hidden:
   the VISIBLE graph is the hand-authored, CSS-only `.cloud` below, which
   is what actually needed to change to stop misrepresenting the product. */
#edges, #nodes, #labels { display: none; }

.cloud {
  transform-box: view-box;
  transform-origin: 300px 200px;
  animation: cloud-breathe 5.7s ease-in-out infinite;
}
@keyframes cloud-breathe {
  0%, 100% { transform: scale(0.985); }
  50%      { transform: scale(1.015); }
}

/* Dim star-field twinkle — echoes the shader's `star` term. */
.tw {
  fill: #ffd9b8;
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.55; }
}

/* Connective tissue — short local links only. Never a hub: each node
   carries at most two of these (see the generator in the hero comment). */
.ce {
  stroke: rgba(194, 65, 12, 0.28);
  stroke-width: 0.6;
  fill: none;
}

.cn {
  transform-box: fill-box;
  transform-origin: center;
}
.cn-dormant {
  fill: #86868a;
  filter: drop-shadow(0 0 1.5px rgba(26, 18, 8, 0.6));
}
.cn-recent {
  fill: #b3743f;
  filter: drop-shadow(0 0 3px rgba(92, 32, 8, 0.65));
}
.cn-breathe {
  animation-name: cn-breathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes cn-breathe {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.22); filter: brightness(1.35); }
}
/* Fresh-memory bloom — hot cinnabar flash + scale pop, then a slow cool
   to an ember rest, looping on a long, staggered, per-node cycle so
   blooms read as scattered events over time, not a synchronized pulse.
   Mirrors BrainMap3D.svelte's applyLifeEventBloom() cool-down curve. */
.cn-bloom {
  fill: #86868a;
  filter: drop-shadow(0 0 1.5px rgba(26, 18, 8, 0.6));
  animation-name: cn-bloom;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
@keyframes cn-bloom {
  0%   { transform: scale(1);    fill: #86868a; filter: drop-shadow(0 0 1.5px rgba(26, 18, 8, 0.6)); }
  3%   { transform: scale(2.4);  fill: #E35D1F; filter: drop-shadow(0 0 10px #E35D1F); }
  22%  { transform: scale(1.15); fill: #C2410C; filter: drop-shadow(0 0 5px rgba(194, 65, 12, 0.7)); }
  60%  { transform: scale(1);    fill: #b3743f; filter: drop-shadow(0 0 3px rgba(92, 32, 8, 0.6)); }
  100% { transform: scale(1);    fill: #86868a; filter: drop-shadow(0 0 1.5px rgba(26, 18, 8, 0.6)); }
}

/* Cue overlay — what recipe just fired */
.stage-cue {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  color: var(--book-accent-muted);
  background: rgba(14, 15, 17, 0.82);
  border-left: 2px solid var(--book-accent-muted);
  padding: 9px 14px;
  max-width: 64%;
  transition: border-color 600ms ease, color 600ms ease;
}
.cue-human {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.15;
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.cue-target {
  color: rgba(244, 239, 230, 0.62);
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 12px;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.cue-recipe {
  font-size: 9px;
  margin-top: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a8c;
}
.cue-recipe code {
  font-family: var(--font-mono);
  color: rgba(244, 239, 230, 0.72);
  background: rgba(194, 65, 12, 0.10);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0;
}
.stage-cue.warm { border-left-color: var(--warm-glow); color: var(--warm-glow); }
.stage-cue.cool { border-left-color: var(--cool-glow); color: var(--cool-glow); }
.stage-cue.urgent { border-left-color: var(--urgent-glow); color: var(--urgent-glow); }
.stage-cue.joyous { border-left-color: var(--joyous-glow); color: var(--joyous-glow); }
.stage-cue.somber { border-left-color: var(--somber-glow); color: var(--somber-glow); }
.stage-cue.neutral { border-left-color: var(--neutral-glow); color: var(--neutral-glow); }

/* Bottom strip — legend + the human-readable caption */
.stage-bottom {
  padding: 14px 16px;
  border-top: 1px solid rgba(194, 65, 12, 0.16);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a8c;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg-swatch {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.lg-fresh .lg-swatch { background: #C2410C; box-shadow: 0 0 5px #E35D1F; }
.lg-recent .lg-swatch { background: #b3743f; box-shadow: 0 0 4px rgba(179, 116, 63, 0.7); }
.lg-dormant .lg-swatch { background: #86868a; box-shadow: none; }

.stage-caption {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 14px;
  color: rgba(244, 239, 230, 0.92);
  line-height: 1.45;
  min-height: 1.45em;
}

.stage-footnote {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8c;
  text-align: right;
}

/* Subtle scroll cue at the bottom of the hero — invites the reader past
   the fold without screaming. Animated draw on the hairline. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyber-muted);
  transition: color 200ms ease;
}
.hero-scroll:hover { color: var(--cyber-cyan); }
.hero-scroll .scroll-line {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--cyber-cyan));
  position: relative;
  overflow: hidden;
}
.hero-scroll .scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: -44px;
  width: 1px; height: 22px;
  background: linear-gradient(to bottom, transparent, #fff);
  animation: scroll-drip 2.2s ease-in-out infinite;
}
@keyframes scroll-drip {
  0%   { transform: translateY(0);   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}
.hero-scroll .scroll-word { display: block; }
@media (max-width: 1024px) {
  .hero-scroll { display: none; }
}

/* ============================================================================
   5. SECTIONS — all editorial body sections share a paper feel
   ============================================================================ */
.wedge, .burn, .manifesto, .flower, .mechanism, .compare, .substrate, .oryn, .cast, .pricing, .open, .waitlist, .saves {
  padding: var(--pad-section) var(--pad-x);
  background: var(--book-bg);
  position: relative;
}
.saves { background: var(--book-paper); border-top: 1px solid var(--book-rule); }
.wedge { background: var(--book-paper); }
.burn { background: var(--book-bg); }
.manifesto {
  background: var(--book-paper);
  border-top: 1px solid var(--book-rule);
  border-bottom: 1px solid var(--book-rule);
}
.flower { background: var(--book-bg); }
.substrate {
  background: var(--book-paper-warm);
  border-top: 1px solid var(--book-rule);
  border-bottom: 1px solid var(--book-rule);
}

/* --- Margin Mark — 1px Cinnabar rule, 24px from left edge, 80px tall.
   Bridge element across landing + every app surface (brief tweak #6 + #15).
   Idle state baseline; slow-breath used selectively below. --- */
.manifesto::before,
.flower::before,
.substrate::before,
.disk::before,
.oryn::before,
.open::before,
.faq::before,
.saves::before,
.waitlist::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 64px;
  width: 1px;
  height: 80px;
  background: var(--book-accent);
  opacity: 0.55;
  pointer-events: none;
}
.flower::before,
.substrate::before {
  animation: margin-mark-breath 3600ms ease-in-out infinite;
}
.waitlist::before {
  background: var(--cyber-cyan);
  opacity: 0.6;
}
@keyframes margin-mark-breath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .flower::before,
  .substrate::before { animation: none; opacity: 0.6; }
}
@media (max-width: 720px) {
  /* Pull the Margin Mark inboard a bit on tiny viewports so it doesn't
     fight the section edge. */
  .manifesto::before,
  .flower::before,
  .substrate::before,
  .disk::before,
  .oryn::before,
  .open::before,
  .faq::before,
  .waitlist::before { left: 12px; height: 56px; top: 48px; }
}
.mechanism { background: var(--book-paper-warm); border-top: 1px solid var(--book-rule); border-bottom: 1px solid var(--book-rule); }
.compare { background: var(--book-paper); }
.oryn { background: var(--book-bg); border-top: 1px solid var(--book-rule); }
.cast {
  background:
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(0, 240, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse at 50% 50%, #0e1a3d 0%, #050813 80%);
  color: var(--cyber-ink);
  border-top: 1px solid #0e1a3d;
  border-bottom: 1px solid #0e1a3d;
  position: relative;
}
.cast::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.pricing { background: var(--book-paper); }
.open { background: var(--book-paper-warm); border-top: 1px solid var(--book-rule); }
.waitlist {
  background: linear-gradient(180deg, var(--cyber-bg-1), var(--cyber-bg-0));
  color: var(--cyber-ink);
  position: relative;
  overflow: hidden;
}
.waitlist::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
  opacity: 0.6;
}

/* ============================================================================
   6. WEDGE SECTION
   ============================================================================ */
.wedge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.wedge-card {
  background: var(--book-paper-warm);
  border: 1px solid var(--book-rule);
  padding: 40px 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.wedge-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--book-accent);
  margin-bottom: 16px;
  font-weight: 700;
}
.wedge-title {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--book-ink);
  letter-spacing: -0.01em;
}
.wedge-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--book-ink-2);
  max-width: 38ch;
  margin: 0 0 28px;
}
.wedge-mech {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--book-rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.mech-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-muted);
}
.mech-value {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 16px;
  color: var(--book-accent);
}
.wedge-fineprint {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  color: var(--book-muted);
  max-width: 60ch;
  margin: 0 auto;
}
.wedge-fineprint strong {
  font-style: normal;
  color: var(--book-ink);
  font-weight: 500;
}

/* ============================================================================
   7. BURN SECTION — the most-important paragraph
   ============================================================================ */
.burn-body {
  font-family: var(--font-voice);
  font-size: 19px;
  line-height: 1.65;
  color: var(--book-ink-2);
}
.burn-body p { margin: 0 0 22px; }
.burn-body em { font-style: italic; color: var(--book-ink); }
.burn-pull {
  font-size: 26px !important;
  line-height: 1.3 !important;
  font-style: italic;
  color: var(--book-accent) !important;
  margin-top: 36px !important;
  padding-top: 24px;
  border-top: 1px solid var(--book-rule-strong);
}

/* ============================================================================
   8. MECHANISM SECTION — three pillars
   ============================================================================ */
.mech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 24px;
}
.mech-card {
  padding: 0 0 0 24px;
  border-left: 1px solid var(--book-rule-strong);
}
.mech-num {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 24px;
  color: var(--book-accent);
  margin-bottom: 16px;
}
.mech-title {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--book-ink);
  letter-spacing: -0.01em;
}
.mech-pitch {
  font-size: 16px;
  line-height: 1.6;
  color: var(--book-ink-2);
  margin: 0 0 22px;
}
.mech-pitch em { font-style: italic; color: var(--book-ink); }
.mech-outcome {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--book-ink);
  margin: 0;
  padding-top: 18px;
  border-top: 1px dotted var(--book-rule-strong);
}
.outcome-label {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-muted);
  margin-bottom: 6px;
}

/* ============================================================================
   8b. DAY-IN-LIFE — concrete narrative timeline
   ============================================================================ */
.day {
  padding: var(--pad-section) var(--pad-x);
  background: var(--book-bg);
  border-top: 1px solid var(--book-rule);
}
.day-h { text-align: center; margin-bottom: 12px; }
.day-lede {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--book-muted);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 48px;
}

.day-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--book-rule-strong);
}
.day-beat {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 160px;
  gap: 28px;
  padding: 24px 0 24px;
  border-bottom: 1px solid var(--book-rule);
  position: relative;
}
.day-beat::before {
  /* a hairline pip on the left timeline */
  content: "";
  position: absolute;
  left: 84px; top: 33px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--book-accent);
  box-shadow: 0 0 0 2px var(--book-paper);
}
.beat-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--book-accent);
  padding-top: 28px;
}
.beat-body p { margin: 0; }
.beat-act {
  font-family: var(--font-voice);
  font-size: 19px;
  line-height: 1.4;
  color: var(--book-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 10px !important;
}
.beat-act em { font-style: italic; color: var(--book-accent); font-weight: 400; }
.beat-oryn {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--book-ink-2);
  padding-left: 18px;
  position: relative;
}
.beat-dot {
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyber-cyan);
  box-shadow: 0 0 8px var(--cyber-cyan);
}
.beat-cue {
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  border-left: 1px dotted var(--book-rule-strong);
  padding-left: 18px;
  font-family: var(--font-mono);
}
.beat-cue .cue-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-muted);
  margin-bottom: 4px;
}
.beat-cue .cue-val {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 14px;
  color: var(--book-accent);
  letter-spacing: 0;
}

.day-foot {
  font-family: var(--font-voice);
  font-size: 17px;
  line-height: 1.55;
  color: var(--book-muted);
  text-align: center;
  margin: 40px auto 0;
  max-width: 56ch;
}
.day-foot em { font-style: italic; color: var(--book-ink); }

/* Mobile day-timeline: collapse the 3-column grid */
@media (max-width: 720px) {
  .day-beat {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "time body"
      "cue  cue";
    gap: 16px;
    padding: 22px 0;
  }
  .day-beat::before { display: none; }
  .beat-time { grid-area: time; padding-top: 22px; }
  .beat-body { grid-area: body; }
  .beat-act { font-size: 17px; }
  .beat-oryn { font-size: 14.5px; }
  .beat-cue {
    grid-area: cue;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 0;
    margin-left: 76px;
    border-left: none;
    border-top: 1px dotted var(--book-rule);
  }
  .beat-cue .cue-label { margin-bottom: 0; }
}

/* ============================================================================
   9. COMPARE SECTION — honest table
   ============================================================================ */
.compare-wrap { overflow-x: auto; margin: 24px 0; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--book-paper-warm);
  border: 1px solid var(--book-rule);
  font-size: 15px;
}
.compare-table th, .compare-table td {
  padding: 18px 22px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--book-rule);
}
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--book-muted);
  background: var(--book-bg);
  border-bottom: 2px solid var(--book-rule-strong);
  font-weight: 500;
}
.compare-table .th-us {
  color: var(--book-accent);
}
.compare-table tbody th {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 500;
  color: var(--book-ink);
  font-size: 16px;
  width: 22%;
}
.compare-table tbody td {
  color: var(--book-ink-2);
  font-family: var(--font-ui);
}
.compare-table tbody td:last-child {
  background: rgba(179, 74, 44, 0.04);
}
.compare-table tbody td:last-child strong {
  color: var(--book-ink);
  font-weight: 600;
}
.compare-note {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--book-muted);
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}
.compare-note em { color: var(--book-ink); font-style: italic; }

/* ============================================================================
   9b. ON DISK — markdown-file evidence card
   ============================================================================ */
.disk {
  padding: var(--pad-section) var(--pad-x);
  background: var(--book-bg);
  border-top: 1px solid var(--book-rule);
}
.disk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}
.disk-body .serif-h { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 18px; }
.disk-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--book-ink-2);
  margin: 0 0 28px;
}
.disk-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.disk-points li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--book-ink-2);
  padding-left: 18px;
  position: relative;
}
.disk-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1px;
  background: var(--book-accent);
}
.point-h {
  display: block;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  color: var(--book-ink);
  margin-bottom: 2px;
}

/* The file card itself — paper tone, mono body, restrained ink syntax */
.disk-file {
  background: var(--book-paper);
  border: 1px solid var(--book-rule-strong);
  box-shadow:
    0 18px 36px -24px rgba(20, 18, 15, 0.3),
    0 1px 2px rgba(20, 18, 15, 0.04);
  display: flex;
  flex-direction: column;
}
.file-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--book-rule);
  background: var(--book-paper-warm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--book-muted);
}
.file-icon { color: var(--book-accent); font-weight: 700; }
.file-path { color: var(--book-ink); font-weight: 500; }
.file-dir { color: var(--book-muted); }
.file-name { color: var(--book-ink); }
.file-meta { margin-left: auto; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.file-body {
  margin: 0;
  padding: 20px 22px 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--book-ink-2);
  white-space: pre;
  overflow-x: auto;
  background: var(--book-paper);
  -webkit-font-smoothing: subpixel-antialiased;
}
.md-fm { color: var(--book-muted); font-style: italic; }
.md-h1 { color: var(--book-accent); font-weight: 700; font-size: 14px; }
.md-h2 { color: var(--book-ink); font-weight: 600; font-size: 13px; }
.md-em { color: var(--book-accent); font-weight: 600; }
.file-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--book-rule);
  background: var(--book-paper-warm);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--book-muted);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.file-foot-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9px;
}
.file-foot-em { color: var(--book-accent); font-style: italic; }

@media (max-width: 900px) {
  .disk-grid { grid-template-columns: 1fr; gap: 36px; }
  .file-body { font-size: 11.5px; padding: 16px 18px 20px; }
  .file-chrome { font-size: 11px; padding: 10px 14px; }
}

/* ============================================================================
   10. ORYN INTRO
   ============================================================================ */
.oryn-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
  gap: 64px;
  align-items: center;
}
.oryn-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--book-ink-2);
  margin: 0 0 18px;
}
.oryn-quietrule {
  margin-top: 24px !important;
  padding-top: 24px;
  border-top: 1px dotted var(--book-rule-strong);
  font-family: var(--font-voice);
  font-style: italic;
  color: var(--book-ink) !important;
}

.portrait-frame {
  background: var(--book-paper);
  border: 1px solid var(--book-rule-strong);
  padding: 32px 28px;
  position: relative;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--book-rule);
  pointer-events: none;
}
.portrait-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--book-muted);
  margin-bottom: 12px;
}
.portrait-name {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--book-ink);
  letter-spacing: -0.02em;
}
.portrait-tag {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 16px;
  color: var(--book-accent);
  margin-top: 8px;
}
.portrait-divider {
  height: 1px;
  background: var(--book-rule-strong);
  margin: 20px 0;
}
.portrait-traits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-voice);
  font-size: 16px;
  color: var(--book-ink-2);
}
.portrait-traits li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trait-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--book-accent);
  flex-shrink: 0;
}

/* ============================================================================
   11. CAST SECTION — on dark cyber surface
   ============================================================================ */
.cast .container { position: relative; z-index: 2; }
.cast .eyebrow { color: var(--cyber-cyan); letter-spacing: 0.22em; }
.cast .section-h { color: var(--cyber-ink); }
.cast-lede {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--cyber-ink-2);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 48px;
}

.cast-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--cyber-line);
}
.cast-item {
  display: grid;
  grid-template-columns: 110px 140px 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--cyber-line);
}
.cast-item:nth-child(odd) { border-right: 1px solid var(--cyber-line); }
.cast-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyber-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}
.cast-role {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 16px;
  color: var(--cyber-ink);
}
.cast-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--cyber-ink-2);
}
.cast-item-hero {
  background: rgba(0, 240, 255, 0.04);
}
.cast-item-hero .cast-name { color: var(--cyber-magenta); text-shadow: 0 0 10px rgba(255, 43, 214, 0.5); }

/* The "future" closer — spans both columns so the seven-item list
   doesn't leave an orphan cell, and earns slightly more visual
   weight as the aspirational role that ends the cast manifesto. */
.cast-item-future {
  grid-column: 1 / -1;
  grid-template-columns: 110px 140px 1fr;
  position: relative;
  background: linear-gradient(90deg, rgba(255, 43, 214, 0.06), transparent 70%);
  padding-top: 38px;
}
.cast-future-label {
  position: absolute;
  top: 14px; left: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyber-magenta);
  text-shadow: 0 0 6px rgba(255, 43, 214, 0.45);
  font-weight: 600;
}
.cast-item-future .cast-name { color: var(--cyber-magenta); text-shadow: 0 0 8px rgba(255, 43, 214, 0.5); }
.cast-item-future .cast-desc { max-width: 64ch; }
.cast-foot {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  text-align: center;
  color: var(--cyber-ink-2);
  margin-top: 36px;
}

/* ============================================================================
   12. PRICING — three cards, hero middle
   ============================================================================ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--book-rule-strong);
  background: var(--book-paper-warm);
}
.price-card {
  padding: 40px 32px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--book-rule-strong);
}
.price-card:last-child { border-right: none; }
.price-card-hero {
  background: var(--book-ink);
  color: var(--book-paper);
  position: relative;
}
.price-card-hero .price-tier,
.price-card-hero .price-line,
.price-card-hero .price-features li {
  color: var(--book-paper);
}
.price-card-hero .price-features li::before {
  background: var(--cyber-cyan);
  box-shadow: 0 0 6px var(--cyber-cyan);
}
.price-card-hero .btn-primary {
  background: var(--cyber-cyan);
  color: var(--cyber-bg-0);
  box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 18px -4px rgba(0, 240, 255, 0.6);
}
.price-card-hero .btn-primary:hover {
  background: #5af3ff;
}
.price-card-hero .price-fineprint {
  color: rgba(255, 253, 248, 0.65);
  border-top-color: rgba(255, 253, 248, 0.2);
}
.price-card-quiet { background: var(--book-bg); }

.price-badge {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--cyber-cyan);
  color: var(--cyber-bg-0);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
}
.price-tier {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-accent);
  margin-bottom: 12px;
  font-weight: 600;
}
.price-card-hero .price-tier { color: var(--cyber-cyan); }
.price-value {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
  margin-bottom: 6px;
}
.price-unit {
  font-size: 18px;
  font-style: italic;
  color: var(--book-muted);
  margin-left: 4px;
}
.price-card-hero .price-unit { color: rgba(255, 253, 248, 0.55); }
.price-line {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  color: var(--book-ink-2);
  margin-bottom: 28px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.price-features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--book-ink-2);
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 1px;
  background: var(--book-accent);
}
.feat-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-right: 6px;
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyber-cyan);
  border: 1px solid var(--cyber-cyan);
  border-radius: 2px;
  vertical-align: 0.1em;
  font-weight: 600;
}
.price-card-hero .feat-soon {
  background: rgba(0, 240, 255, 0.18);
  color: var(--cyber-cyan);
  border-color: var(--cyber-cyan);
}
.price-fineprint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--book-muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dotted var(--book-rule);
  font-style: italic;
}

/* ============================================================================
   13. OPEN / BUILDING-IN-PUBLIC
   ============================================================================ */
.open-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--book-ink-2);
  margin: 0 0 22px;
}
.open-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0 8px;
}
.open-status-col {
  padding: 20px 22px;
  background: var(--book-paper);
  border: 1px solid var(--book-rule);
  border-radius: 4px;
}
.open-status-live {
  border-color: var(--book-accent);
  box-shadow: inset 3px 0 0 var(--book-accent);
}
.open-status-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.open-status-live .open-status-h { color: var(--book-accent); }
.open-status-live .open-status-h::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--book-accent);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
.open-status-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.open-status-col li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--book-ink-2);
  padding: 7px 0 7px 18px;
  position: relative;
  border-top: 1px solid var(--book-rule);
}
.open-status-col li:first-child { border-top: none; }
.open-status-col li::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--book-muted);
}
.open-status-live li::before { color: var(--book-accent); }

.open-pulls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 36px 0;
  padding: 28px 0;
  border-top: 1px solid var(--book-rule-strong);
  border-bottom: 1px solid var(--book-rule-strong);
}
.pull {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pull-num {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--book-ink);
  letter-spacing: -0.02em;
}
.pull-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-accent);
}
.pull-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--book-muted);
  margin-top: 6px;
}
.open-quietrule {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--book-ink) !important;
  text-align: center;
  margin-top: 28px !important;
}

/* Live link to app.getoryn.ai — the "Build in the Open" section's
   click-through proof. Makes the "this is the founder's actual brain"
   claim actionable instead of declarative. */
.open-live {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 0 0;
  padding: 18px 22px;
  background: var(--book-ink);
  color: var(--book-paper);
  border-radius: 4px;
  text-decoration: none;
  transition: background 200ms ease, transform 160ms ease;
  position: relative;
  overflow: hidden;
}
.open-live:hover {
  background: var(--book-accent);
  transform: translateY(-1px);
}
.open-live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.06) 50%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.open-live:hover::after { opacity: 1; }
.live-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.live-dot {
  width: 10px; height: 10px;
  background: var(--cyber-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyber-cyan);
  position: relative;
  z-index: 2;
}
.live-pulse {
  position: absolute;
  inset: 0;
  background: var(--cyber-cyan);
  border-radius: 50%;
  opacity: 0.4;
  animation: live-pulse-ring 1.8s ease-out infinite;
}
@keyframes live-pulse-ring {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
.live-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.live-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--cyber-cyan);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}
.live-text {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  color: var(--book-paper);
}
.live-url {
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--cyber-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}
.live-arrow {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--cyber-cyan);
  transition: transform 200ms ease;
}
.open-live:hover .live-arrow { transform: translateX(4px); }

@media (max-width: 720px) {
  .open-live { padding: 16px 18px; gap: 14px; }
  .live-text { font-size: 15px; line-height: 1.35; }
  .live-arrow { font-size: 18px; }
}

/* Reduced motion: kill the pulsing ring */
@media (prefers-reduced-motion: reduce) {
  .live-pulse { animation: none; opacity: 0; }
}

/* ============================================================================
   13b. FAQ — pre-conversion objection answers
   ============================================================================ */
.faq {
  padding: var(--pad-section) var(--pad-x);
  background: var(--book-paper);
  border-top: 1px solid var(--book-rule);
}
.faq-lede {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--book-muted);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 48px;
}
.faq-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--book-rule-strong);
}
.faq-item {
  padding: 26px 0 24px;
  border-bottom: 1px solid var(--book-rule);
}
.faq-q {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--book-ink);
  letter-spacing: -0.008em;
  margin: 0 0 12px;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.faq-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-accent);
  font-weight: 700;
  flex-shrink: 0;
  padding-top: 2px;
}
.faq-a {
  margin: 0 0 0 36px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--book-ink-2);
  max-width: 64ch;
}
.faq-a em { font-style: italic; color: var(--book-ink); }
.faq-soon-inline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1px 6px;
  background: rgba(0, 240, 255, 0.1);
  color: var(--cool-ink);
  border: 1px solid var(--cool-ink);
  border-radius: 2px;
  vertical-align: 0.1em;
  font-weight: 600;
}

@media (max-width: 720px) {
  .faq-q { font-size: 19px; gap: 10px; }
  .faq-mark { font-size: 10px; }
  .faq-a { margin-left: 0; font-size: 15px; }
}

/* ============================================================================
   14. WAITLIST
   ============================================================================ */
.waitlist .eyebrow { color: var(--cyber-cyan); }
.waitlist .display { color: var(--cyber-ink); }
.waitlist .display-em { color: var(--cyber-cyan); }

.wl-form {
  margin-top: 48px;
  padding: 36px;
  background: rgba(7, 11, 26, 0.6);
  border: 1px solid var(--cyber-line-strong);
  border-radius: 4px;
  position: relative;
}
.wl-form::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.5), transparent 40%, rgba(255, 43, 214, 0.5));
  border-radius: 5px;
  z-index: -1;
  opacity: 0.4;
}
.wl-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
.wl-field { display: flex; flex-direction: column; gap: 6px; }
.wl-field-wide { grid-column: 1 / -1; }
.wl-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyber-cyan);
}
.wl-field input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--cyber-line);
  color: var(--cyber-ink);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  border-radius: 3px;
  transition: border-color 160ms ease, background 160ms ease;
}
.wl-field input:focus {
  outline: none;
  border-color: var(--cyber-cyan);
  background: rgba(0, 240, 255, 0.04);
}
.wl-field input::placeholder { color: var(--cyber-muted); }

/* Honeypot field — visually hidden but kept in the DOM so bots fill it.
   Not using `display:none` since smart bots skip those. The off-screen
   absolute + tabindex=-1 keeps real users from ever encountering it. */
.wl-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Inline error message when the form fails to submit. */
.wl-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: rgba(255, 43, 94, 0.08);
  border-left: 2px solid var(--urgent-glow);
  color: var(--urgent-soft);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
}

.btn-wl {
  background: var(--cyber-cyan);
  color: var(--cyber-bg-0);
  font-size: 16px;
  padding: 16px 24px;
  box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 32px -2px rgba(0, 240, 255, 0.6);
}
.btn-wl:hover {
  background: #5af3ff;
  transform: translateY(-1px);
}
.wl-fineprint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--cyber-muted);
  margin: 16px 0 0;
  text-align: center;
}
.wl-fineprint strong { color: var(--cyber-ink-2); font-weight: 500; }
.wl-fineprint a { color: var(--cyber-cyan); text-decoration: underline; text-underline-offset: 2px; }

.wl-success {
  margin-top: 48px;
  padding: 56px 36px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid var(--cyber-cyan);
  text-align: center;
  border-radius: 4px;
}
.wl-success h3 {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 36px;
  color: var(--cyber-ink);
  margin: 0 0 12px;
}
.wl-success p { color: var(--cyber-ink-2); margin: 0; font-size: 16px; }

/* ============================================================================
   15. FOOTER
   ============================================================================ */
.foot {
  background: var(--cyber-bg-0);
  color: var(--cyber-ink-2);
  padding: 56px var(--pad-x) 36px;
  border-top: 1px solid var(--cyber-line);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: 64px;
  margin-bottom: 48px;
}
.foot-mark {
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 28px;
  color: var(--cyber-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.foot-line {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 15px;
  color: var(--cyber-ink-2);
  margin: 0;
  max-width: 32ch;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyber-cyan);
  margin-bottom: 6px;
  font-weight: 600;
}
.foot-col a {
  font-size: 13px;
  color: var(--cyber-ink-2);
  padding: 2px 0;
  transition: color 160ms ease;
}
.foot-col a:hover { color: var(--cyber-cyan); }
.foot-soon {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyber-muted);
  background: rgba(108, 128, 168, 0.08);
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: 0.05em;
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--cyber-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyber-muted);
}
.foot-bottom .foot-rule { color: var(--cyber-ink-2); }

/* ============================================================================
   16. RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-stage { order: -1; }
  .oryn-grid { grid-template-columns: 1fr; gap: 36px; }
  .mech-grid { grid-template-columns: 1fr; gap: 36px; }
  .wedge-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .price-card { border-right: none; border-bottom: 1px solid var(--book-rule-strong); }
  .price-card:last-child { border-bottom: none; }
  .cast-list { grid-template-columns: 1fr; }
  .cast-item:nth-child(odd) { border-right: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 1024px) {
  /* On tablet+ the brain stage stacks on top of the headline; cap its
     height so the hero copy stays close to the top of the next scroll. */
  .stage-canvas { aspect-ratio: 5 / 3; }
  .hero { padding: 56px var(--pad-x) 88px; }
  .hero-grid { gap: 40px; }
}

@media (max-width: 720px) {
  :root { --pad-section: 64px; --pad-x: 20px; }
  .mast { padding: 12px 20px; }
  .mast-nav { gap: 8px; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; }
  /* Dropdown panel: positioned absolutely below the mast, hidden by
     default, slides into view when the button is aria-expanded. */
  .mast-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: rgba(5, 8, 19, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cyber-line-strong);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 200ms ease, opacity 200ms ease, visibility 200ms;
  }
  .mast-nav:has(.menu-button[aria-expanded='true']) .mast-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .mast-menu a {
    padding: 14px 12px;
    border-bottom: 1px solid var(--cyber-line);
    text-align: left;
  }
  .mast-menu a:last-child { border-bottom: none; }
  .hero { padding: 56px 20px 72px; }
  .display { font-size: clamp(36px, 9vw, 52px); }
  .lede { font-size: 17px; }
  .section-h { font-size: clamp(28px, 6vw, 38px); }
  .serif-h { font-size: clamp(28px, 7vw, 40px); }
  .stage-canvas { aspect-ratio: 4 / 3; }

  .open-pulls { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Cast: collapse the three-column grid into stacked rows. Name + role
     on one line, description below at full width — no negative padding. */
  .cast-list { grid-template-columns: 1fr; border-top: none; }
  .cast-item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "name role"
      "desc desc";
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px 0;
    border-right: none !important;
  }
  .cast-item .cast-name { grid-area: name; }
  .cast-item .cast-role { grid-area: role; }
  .cast-item .cast-desc { grid-area: desc; padding-left: 0; font-size: 13.5px; }

  .wl-fields { grid-template-columns: 1fr; }
  .wl-form { padding: 24px; }
  .foot-cols { grid-template-columns: 1fr; }
  /* Compare on mobile: drop the table altogether and render as stacked
     cards. CSS-only via display-mode override on the existing markup. */
  .compare-table, .compare-table thead, .compare-table tbody,
  .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table thead { display: none; }
  .compare-table { border: none; background: transparent; }
  .compare-table tr {
    background: var(--book-paper-warm);
    border: 1px solid var(--book-rule);
    margin-bottom: 14px;
    padding: 18px 18px 12px;
  }
  .compare-table tbody th {
    width: auto !important;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--book-rule);
    margin-bottom: 12px;
    font-size: 18px;
  }
  .compare-table tbody td {
    padding: 8px 0 4px;
    font-size: 14px;
    border-bottom: none;
    background: transparent !important;
  }
  .compare-table tbody td::before {
    content: attr(data-row);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--book-muted);
    margin-bottom: 4px;
  }
  .compare-table tbody td.cell-us {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dotted var(--book-rule-strong);
  }
  .compare-table tbody td.cell-us::before { color: var(--book-accent); }
  .price-value { font-size: 44px; }
  .portrait-name { font-size: 48px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .meta-dot-live, .status-dot { animation: none; }
  .stage-canvas::before,
  .cloud,
  .tw,
  .cn-breathe,
  .cn-bloom { animation: none; }
  .cn-bloom { fill: #86868a; filter: drop-shadow(0 0 1.5px rgba(26, 18, 8, 0.6)); }
  .flw-hex-spin { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================================================================
   17. POSITIONING-V2 REFRESH — manifesto, flower mission, chat-bubble day,
       3-col compare, value math, guarantee, cast status markers, waitlist
       instant-start. Appended 2026-05-28 per positioning-v2/07-landing-page-brief.
   ============================================================================ */

/* --- Manifesto block -------------------------------------------------- */
.manifesto-h {
  text-align: center;
  margin-bottom: 32px;
}
.manifesto-body {
  font-family: var(--font-voice);
  font-size: 20px;
  line-height: 1.55;
  color: var(--book-ink-2);
  max-width: 60ch;
  margin: 0 auto;
}
.manifesto-body p { margin: 0 0 22px; }
.manifesto-body em { font-style: italic; color: var(--book-ink); }
.manifesto-p-em {
  font-size: 22px !important;
  color: var(--book-ink) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 28px auto !important;
  padding: 16px 0;
  border-top: 1px solid var(--book-rule-strong);
  border-bottom: 1px solid var(--book-rule-strong);
  text-align: center;
  max-width: 40ch;
}
.manifesto-line {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 40px) !important;
  line-height: 1.15 !important;
  color: var(--book-muted) !important;
  text-align: center;
  margin: 48px auto 32px !important;
  max-width: 22ch;
}
.manifesto-line-em {
  display: block;
  font-style: normal;
  color: var(--book-accent);
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  margin-top: 6px;
}
.manifesto-line-em::after {
  content: "";
  display: block;
  margin: 18px auto 0;
  width: 72px;
  height: 1px;
  background: var(--book-accent);
  opacity: 0.5;
  transition: opacity 220ms ease, width 320ms ease;
}
.manifesto-line:hover .manifesto-line-em::after {
  opacity: 0.9;
  width: 128px;
}
.manifesto-status {
  text-align: center;
  font-family: var(--font-voice);
  font-size: clamp(19px, 2.4vw, 24px) !important;
  line-height: 1.42 !important;
  color: var(--book-ink) !important;
  margin: 0 auto 28px !important;
  max-width: 30ch;
}
.manifesto-status-em {
  display: block;
  margin-top: 4px;
  font-style: italic;
  font-weight: 500;
  color: var(--book-accent);
}
.manifesto-sub {
  text-align: center;
  font-size: 18px !important;
  color: var(--book-muted) !important;
  margin: 8px auto 0 !important;
}
.manifesto-coda {
  text-align: center;
  font-family: var(--font-voice);
  font-size: 19px !important;
  line-height: 1.4 !important;
  color: var(--book-ink) !important;
  margin: 32px auto 16px !important;
  max-width: 36ch;
}
.manifesto-coda em {
  font-style: italic;
  color: var(--book-ink);
}
.manifesto-coda-em {
  display: block;
  margin-top: 4px;
  color: var(--book-accent);
  font-weight: 500;
  font-style: italic;
}

/* --- Flower Mission section ------------------------------------------ */
.flower-stage {
  margin: 28px auto 24px;
  padding: 0;
  background: #050813;
  border: 1px solid #0e1a3d;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.flower-stage::before {
  /* faint cyber grid behind the SVG */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
}
.flower-svg {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  position: relative;
  z-index: 1;
}
.flower-svg text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--cyber-ink-2);
  letter-spacing: 0.02em;
}
.flw-edge {
  stroke: rgba(255, 180, 106, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  animation: flw-edge-pulse 2.6s ease-in-out infinite;
}
.flw-bridge {
  fill: none;
  stroke: rgba(0, 240, 255, 0.32);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: flw-edge-pulse 2.6s ease-in-out infinite;
  animation-delay: 0.6s;
}
.flw-node {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
}
.flw-vase    { fill: var(--node-tasks); }
.flw-place   { fill: var(--node-places); }
.flw-context { fill: var(--node-concepts); }
.flw-people  { fill: var(--node-people); }
.flw-mom {
  fill: var(--warm-glow);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(255, 106, 61, 0.55));
}
.flw-mom-glow {
  animation: flw-glow-pulse 2.6s ease-in-out infinite;
  transform-origin: 280px 190px;
}
.flw-mom-label {
  font-family: var(--font-voice) !important;
  font-style: italic;
  font-size: 16px !important;
  fill: var(--cyber-ink) !important;
  letter-spacing: 0;
}
.flw-hex {
  fill: rgba(108, 128, 168, 0.18);
  stroke: var(--cyber-cyan);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.45));
}
.flw-hex-spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: flw-hex-spin 4.2s linear infinite;
}
.flw-hex-spin-2 { animation-delay: -1.4s; }
.flw-hex-spin-3 { animation-delay: -2.8s; }
.flower-mcp text {
  fill: var(--cyber-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes flw-edge-pulse {
  0%, 100% { opacity: 0.35; stroke-dashoffset: 0; }
  50%      { opacity: 1;    stroke-dashoffset: 14; }
}
@keyframes flw-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes flw-hex-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.flower-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyber-muted);
  padding: 10px 18px 12px;
  border-top: 1px solid #0e1a3d;
  margin: 0;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}

.flower-body {
  font-family: var(--font-voice);
  font-size: 19px;
  line-height: 1.65;
  color: var(--book-ink-2);
  margin-top: 32px;
}
.flower-body p { margin: 0 0 22px; }
.flower-body em { font-style: italic; color: var(--book-ink); }
.flower-body .mono { font-family: var(--font-mono); font-style: normal; font-size: 0.9em; color: var(--book-accent); }
.flower-pull {
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-family: var(--font-voice);
  font-style: italic;
  text-align: center;
  color: var(--book-accent) !important;
  margin-top: 40px !important;
  padding-top: 28px;
  border-top: 1px solid var(--book-rule-strong);
  max-width: 24ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- A Tuesday — chat-bubble layout ----------------------------------- */
.day-chat {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.day-chat .day-beat {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 150px;
  gap: 28px;
  align-items: start;
  padding: 0;
  border-bottom: none;
}
.day-chat .day-beat::before { display: none; }
.day-chat .beat-time {
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--book-muted);
  text-transform: uppercase;
}
.beat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bubble {
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
}
.bubble p { margin: 0; }
.bubble-you {
  align-self: flex-end;
  background: var(--cool-glow);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble-oryn {
  align-self: flex-start;
  background: var(--book-paper-warm);
  color: var(--book-ink);
  border: 1px solid var(--book-rule);
  border-bottom-left-radius: 4px;
}
.beat-aside {
  align-self: stretch;
  padding: 10px 4px 0;
  font-family: var(--font-voice);
  font-size: 15px;
  line-height: 1.55;
  color: var(--book-muted);
  text-align: center;
}
.beat-aside em { font-style: italic; color: var(--book-ink); }
.day-chat .beat-cue {
  padding-top: 18px;
  border-left: 1px dotted var(--book-rule-strong);
  padding-left: 18px;
  font-family: var(--font-mono);
}
.day-closer {
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: var(--book-accent) !important;
  font-family: var(--font-voice);
  font-style: italic;
  margin-top: 56px !important;
}

@media (max-width: 720px) {
  .day-chat .day-beat {
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "thread"
      "cue";
    gap: 10px;
  }
  .day-chat .beat-time { grid-area: time; padding-top: 0; }
  .beat-thread { grid-area: thread; }
  .day-chat .beat-cue {
    grid-area: cue;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 0;
    border-left: none;
    border-top: 1px dotted var(--book-rule);
  }
  .day-chat .beat-cue .cue-label { margin-bottom: 0; }
  .bubble { max-width: 92%; font-size: 14.5px; }
}

/* --- 3-column comparison table --------------------------------------- */
.compare-table-3col tbody td:last-child {
  background: rgba(179, 74, 44, 0.06);
}
.compare-table-3col tbody td:not(:last-child) {
  background: transparent;
}
.compare-table-3col tbody th {
  width: 24%;
}
.compare-table-3col .th-us {
  background: rgba(179, 74, 44, 0.05);
  border-bottom-color: var(--book-accent);
}
.compare-pull {
  font-family: var(--font-voice);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  text-align: center;
  color: var(--book-muted);
  margin: 56px auto 0;
  max-width: 30ch;
  font-style: italic;
}
.compare-pull-em {
  display: block;
  margin-top: 4px;
  color: var(--book-accent);
  font-style: normal;
  font-weight: 500;
}
.compare-closer {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  text-align: center;
  color: var(--book-muted);
  margin: 28px auto 0;
  max-width: 56ch;
}
.compare-closer em {
  font-family: var(--font-voice);
  font-style: italic;
}
.compare-mission {
  font-family: var(--font-voice);
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.18;
  text-align: center;
  color: var(--book-ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin: 48px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--book-rule-strong);
}
.compare-mission-em {
  display: block;
  margin-top: 6px;
  color: var(--book-accent);
  font-style: italic;
}

@media (max-width: 720px) {
  /* In the mobile stacked-cards view inherited from the original .compare-table,
     the 3-column variant collapses each <tr> into a card containing all three
     options. The original mobile rules already handle <tr>, <th>, <td> as
     block — we just need to make sure the middle column (power-user tools)
     also gets its data-row label and visual separator. */
  .compare-table-3col tbody td:not(:last-child)::before {
    color: var(--book-muted);
  }
  .compare-table-3col tbody td:not(:last-child) {
    border-top: 1px dotted var(--book-rule);
    padding-top: 10px;
    margin-top: 6px;
  }
}

/* --- On-disk caption -------------------------------------------------- */
.disk-cap {
  margin-top: 24px;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--book-muted);
  padding-top: 18px;
  border-top: 1px dotted var(--book-rule-strong);
}

/* --- Meet Oryn — sub + persona swap ---------------------------------- */
.oryn-sub {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--book-ink);
  margin: 0 0 22px;
}
.oryn-persona-swap {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--book-accent);
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px dotted var(--book-rule-strong);
}

/* --- Cast status markers (Watson / Roz / House / Alfred coming) ------ */
.cast-state {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyber-cyan);
  border: 1px solid var(--cyber-line-strong);
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 500;
}
.cast-item-soon .cast-name,
.cast-item-future .cast-name {
  opacity: 0.78;
}

/* --- Pricing v2 — stacked layout, value math, guarantee --------------- */
.price-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
}
.price-card-free,
.price-card-personal {
  border-right: none;
  border-bottom: 1px solid var(--book-rule);
}
.price-card-free {
  background: var(--book-paper-warm);
  padding: 28px 32px;
}
.price-card-personal {
  background: var(--book-paper);
  padding: 36px 36px 32px;
  border: 2px solid var(--book-accent);
  position: relative;
}
.price-card-personal .price-badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--book-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.price-blurb {
  font-size: 16px;
  line-height: 1.55;
  color: var(--book-ink-2);
  margin: 12px 0 24px;
  max-width: 50ch;
}
.guarantee {
  margin: 28px 0 20px;
  padding: 22px 24px 20px;
  background: rgba(179, 74, 44, 0.07);
  border: 1px solid var(--book-accent);
  border-left-width: 4px;
  border-radius: 2px;
}
.guarantee-head {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  color: var(--book-accent);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.guarantee p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--book-ink-2);
}

.value-math {
  margin-top: 20px;
  padding: 28px 32px 24px;
  background: var(--book-paper-warm);
  border: 1px solid var(--book-rule);
  border-radius: 2px;
}
.value-math-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--book-muted);
  margin-bottom: 14px;
}
.value-math-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 18px;
}
.value-math-table th,
.value-math-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--book-rule);
}
.value-math-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--book-muted);
  font-weight: 500;
  border-bottom: 2px solid var(--book-rule-strong);
}
.value-math-table tbody tr:last-child th,
.value-math-table tbody tr:last-child td {
  border-bottom: none;
}
.value-math-table tbody td:last-child {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--book-accent);
  text-align: right;
  white-space: nowrap;
}
.value-math-totals {
  font-family: var(--font-voice);
  font-size: 18px;
  line-height: 1.55;
  margin: 16px 0 6px;
  color: var(--book-ink);
}
.value-math-totals strong {
  color: var(--book-accent);
  font-weight: 600;
  font-style: italic;
}
.value-math-foot {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 15px;
  color: var(--book-muted);
  margin: 0;
}

@media (max-width: 720px) {
  .price-card-personal { padding: 28px 22px 24px; }
  .price-card-personal .price-badge { left: 22px; }
  .value-math { padding: 22px 18px 18px; }
  .value-math-table { font-size: 13px; }
  .value-math-table th, .value-math-table td { padding: 8px 8px; }
}

/* --- Building-in-public new sub (founder-voice pull-quote callout) ---- */
.open-sub {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  color: var(--book-ink);
  margin: 0 0 28px;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--book-accent);
}
.open-sub::after {
  content: "— the founder";
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--book-muted);
}

/* --- Waitlist sub + microcopy ---------------------------------------- */
.wl-sub {
  text-align: center;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cyber-ink-2);
  max-width: 50ch;
  margin: 16px auto 28px;
}
.wl-fields-tight {
  grid-template-columns: 1fr 1fr;
}
.wl-micro {
  text-align: center;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cyber-cyan);
  margin: 16px auto 8px;
  max-width: 48ch;
}

/* --- Cleanups: legacy nav-cta wording isn't waitlist-flavored anymore;
       keep the .feat-soon chip rules for the cast status markers above. */

/* ============================================================================
   18. POSITIONING-V3 REFRESH — substrate section, comparison substrate row,
       pricing substrate bonus, value-math substrate row, manifesto-coda
       removal. Appended 2026-05-28 per positioning-v3/_landing-page-brief-v3.md.
   ============================================================================ */

/* --- Cognition Substrate section -------------------------------------- */
.substrate-stage {
  margin: 32px auto 28px;
  padding: 24px 24px 16px;
  background: var(--book-paper);
  border: 1px solid var(--book-rule);
  border-radius: 2px;
  max-width: 720px;
}
.substrate-svg {
  width: 100%;
  height: auto;
  max-height: 360px;
  display: block;
}

.sub-folder-rect {
  fill: none;
  stroke: var(--book-accent);
  stroke-width: 1.5;
}
.sub-folder-label {
  font-family: var(--font-voice);
  font-size: 22px;
  font-style: italic;
  fill: var(--book-ink);
}
.sub-folder-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: var(--book-muted);
}
.sub-arrow {
  fill: none;
  stroke: var(--book-accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.6;
}
.sub-emb-rect {
  fill: var(--book-paper-warm);
  stroke: var(--book-muted);
  stroke-width: 1;
}
.sub-emb-label {
  font-family: var(--font-voice);
  font-size: 13px;
  fill: var(--book-ink);
  letter-spacing: -0.005em;
}
.sub-emb-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--book-muted);
}
.sub-legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--book-muted);
}
.substrate-cap {
  margin: 12px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--book-muted);
  text-align: center;
}

.substrate-body {
  font-family: var(--font-voice);
  font-size: 19px;
  line-height: 1.65;
  color: var(--book-ink-2);
  margin-top: 28px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.substrate-body p { margin: 0 0 22px; }
.substrate-body em { font-style: italic; color: var(--book-ink); }

.substrate-pivot {
  font-size: 20px !important;
  color: var(--book-ink) !important;
  font-weight: 500;
  padding: 16px 0 !important;
  border-top: 1px solid var(--book-rule);
  border-bottom: 1px solid var(--book-rule);
  margin: 24px 0 !important;
}

/* --- Saves band: three honest "small save" scenes below the Tuesday --- */
.saves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.save-card {
  margin: 0;
  padding: 24px 24px 22px;
  background: var(--book-paper-warm);
  border: 1px solid var(--book-rule);
  border-top: 2px solid var(--book-accent);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.save-when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--book-muted);
}
.save-line {
  font-family: var(--font-voice);
  font-size: 19px;
  line-height: 1.4;
  color: var(--book-ink);
  margin: 0;
}
.save-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--book-muted);
  font-style: italic;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--book-rule);
  margin-top: auto;
}
.save-note em { color: var(--book-accent); font-style: italic; }

@media (max-width: 860px) {
  .saves-grid { grid-template-columns: 1fr; }
  .open-status { grid-template-columns: 1fr; }
}

.substrate-icloud {
  padding: 18px 22px !important;
  margin: 24px 0 !important;
  background: var(--book-paper);
  border: 1px solid var(--book-rule);
  border-left: 3px solid var(--book-accent);
  border-radius: 4px;
  font-size: 17px !important;
}
.substrate-icloud-em {
  color: var(--book-accent);
  font-weight: 600;
}

.substrate-pull {
  font-size: clamp(28px, 4.2vw, 40px) !important;
  line-height: 1.15 !important;
  color: var(--book-accent) !important;
  font-family: var(--font-voice);
  font-style: italic;
  text-align: center;
  margin: 40px auto 0 !important;
  max-width: 24ch;
}
.substrate-pull em { font-style: italic; color: var(--book-accent); }
.substrate-pull::after {
  content: "";
  display: block;
  margin: 18px auto 0;
  width: 72px;
  height: 1px;
  background: var(--book-accent);
  opacity: 0.5;
}

@media (max-width: 720px) {
  .substrate-stage { padding: 18px 12px 10px; }
  .substrate-body { font-size: 17px; line-height: 1.6; }
  .substrate-pivot { font-size: 18px !important; }
}

/* --- Comparison substrate row (the 8th row) --------------------------- */
.row-substrate th {
  color: var(--book-accent) !important;
}
.row-substrate td:not(:last-child) {
  color: var(--book-muted);
}

/* --- Pricing: feat-substrate (the NEW substrate bonus row) ------------ */
.feat-substrate {
  margin-top: 4px;
  padding-top: 14px !important;
  border-top: 1px dotted var(--book-rule-strong);
}
.feat-substrate strong {
  color: var(--book-accent);
  font-weight: 600;
}
.feat-substrate::before {
  background: var(--book-accent) !important;
  width: 12px !important;
}

/* --- Value-math: substrate row + 'priceless' aside -------------------- */
.value-math-substrate td {
  background: rgba(194, 65, 12, 0.06);
}
.value-math-substrate td:last-child {
  font-family: var(--font-voice) !important;
  font-style: italic !important;
  color: var(--book-accent) !important;
  font-size: 14px !important;
}
.value-math-aside {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 0.85em;
  color: var(--book-muted);
}

/* --- Wordmark satellites — Cinnabar, not magenta (v3 tweak #7) -------- */
.wm-glyph .wm-sat {
  fill: var(--book-accent) !important;
  filter: drop-shadow(0 0 4px var(--book-accent)) !important;
}

/* --- Cast hero / future glyphs — Cinnabar, not magenta (v3 tweak #13) - */
.cast-item-hero .cast-name {
  color: var(--book-accent) !important;
  text-shadow: 0 0 10px rgba(194, 65, 12, 0.4) !important;
}
.cast-item-future .cast-name {
  color: var(--book-accent) !important;
  text-shadow: 0 0 8px rgba(194, 65, 12, 0.4) !important;
}
.cast-future-label {
  color: var(--book-accent) !important;
}

/* --- Border-radius audit cleanups (max 4px per v3 tweak #8) ----------- */
.btn { border-radius: 2px; }                  /* was 6px */
.feat-soon, .cast-state {
  border-radius: 2px;                         /* was 999px pill */
}
.guarantee { border-radius: 2px; }            /* was 4px */
.price-badge { border-radius: 2px; }
/* Chat bubbles keep their 18px radius — SMS-style is a conscious exception
   for legibility (brief allows: max 4px on cards/buttons/inputs;
   chat bubbles are a non-UI typographic asset). */