/*
Theme Name: Zyntropio
Theme URI: https://doweb123.duckdns.org/
Description: Marketing site for Zyntropio — a single front-page theme. Source lives
  in the app repo (website/theme/), mounted into the WordPress container as a bind
  mount; see ARCHITECTURE.md §2.2 and docs/prd/PRD_Marketing_Website_v1.0.md. The
  theme *directory* is still `otm-website` and internal ids still say `otm_` — the
  2026-08-04 rename was user-facing strings only (see CLAUDE.md), and renaming the
  directory would break the bind mount and orphan the stored waitlist posts.
Author: Zyntropio
Version: 1.2
*/

/* ── Design tokens ───────────────────────────────────────────────────────────
   Palette is deliberately the product's own (ink/clay) — this is a marketing site
   FOR that product, so borrowing its real visual identity is the grounded choice,
   not a generic one. Chaos/order narrative gets two supporting hues (graphite for
   "unresolved", sage for "tracked/done") that the product's own status dots also use.
*/
:root {
  --paper: #F7F7F5;
  --paper-dim: #EFEFEC;
  --ink: #1F2733;
  --ink-soft: #5B6472;
  --clay: #E8202A;
  --clay-soft: #FBF0EB;
  --graphite: #9AA3AE;
  --sage: #22C55E;
  --sage-soft: #EAFBF1;
  --amber: #FBBF24;
  --line: #E2E4E8;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --max: 1180px;
  --gap: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2.5px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; white-space: nowrap;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gap); }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 14px;
  display: block;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gap);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.wordmark { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 16.5px; text-decoration: none; color: var(--ink); }
.wordmark .node-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); flex: 0 0 auto; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 600; font-size: 14.5px;
  padding: 11px 20px; border-radius: 11px; border: none; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--clay); color: #fff; box-shadow: 0 6px 18px -6px rgba(232,32,42,.55); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(232,32,42,.6); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-sm { padding: 8px 15px; font-size: 13.5px; border-radius: 9px; }

/* ── Sections shell ──────────────────────────────────────────────────────── */
section { padding: clamp(64px, 10vw, 120px) 0; }
.band-dim { background: var(--paper-dim); }
.band-ink { background: var(--ink); color: #fff; }
.band-ink h2 { color: #fff; }
.band-ink .eyebrow { color: var(--amber); }
.band-ink p { color: rgba(255,255,255,.72); }

h2.section-title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; max-width: 720px; }
.section-lede { font-size: 17.5px; color: var(--ink-soft); max-width: 560px; margin-top: 16px; }
.band-ink .section-lede { color: rgba(255,255,255,.72); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(48px, 8vw, 84px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: 1.05fr 1fr; } }

.hero-scrawl {
  font-family: var(--hand); font-size: 22px; color: var(--graphite);
  transform: rotate(-2deg); display: inline-block; margin-bottom: 6px;
}
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--clay); }
.hero-sub { font-size: 18px; color: var(--ink-soft); max-width: 480px; margin-top: 22px; line-height: 1.6; }
.hero-cta { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-microcopy { font-size: 13px; color: var(--graphite); }

/* Signature diagram: chaos scraps behind, structured view revealed on top, cycling
   through four topics/views (assets/hero-cycle.js drives the timing; see
   PRD_Marketing_Website §6 "Hero"). One animation budget for the whole page — spent
   here. */
.diagram {
  position: relative; aspect-ratio: 1 / 0.92; min-height: 340px;
  border-radius: 22px;
}

/* One scene per topic, stacked and crossfaded; only one is-active at a time. */
.hero-scene {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.hero-scene.is-active { opacity: 1; pointer-events: auto; }

.chaos-layer { position: absolute; inset: 0; opacity: 1; transition: opacity 1s ease; }
.chaos-title {
  position: absolute; top: 50%; left: 50%; width: 74%; text-align: center;
  transform: translate(-50%,-50%) rotate(-1.5deg);
  font-family: var(--hand); font-size: 26px; line-height: 1.15; color: var(--ink);
}
.scrap {
  position: absolute; font-family: var(--hand); font-size: 19px; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: 7px 12px; box-shadow: 0 8px 18px -10px rgba(31,39,51,.25);
}
.scrap:nth-child(1) { top: 4%;  left: 6%;  transform: rotate(-6deg); }
.scrap:nth-child(2) { top: 2%;  right: 8%; transform: rotate(4deg); }
.scrap:nth-child(3) { top: 38%; left: 0%;  transform: rotate(3deg); }
.scrap:nth-child(4) { top: 46%; right: 2%; transform: rotate(-4deg); }
.scrap:nth-child(5) { bottom: 8%; left: 18%; transform: rotate(-2deg); }
.scrap:nth-child(6) { bottom: 2%; right: 16%; transform: rotate(5deg); }

.map-layer {
  position: absolute; inset: 0; opacity: 0; transform: scale(.88);
  transition: opacity .7s ease, transform 1s cubic-bezier(.34,1.56,.64,1);
}
.hero-scene.is-revealed .chaos-layer { opacity: 0; }
.hero-scene.is-revealed .map-layer { opacity: 1; transform: scale(1); }

.map-svg-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-svg-lines path { fill: none; stroke: var(--line); stroke-width: 1.6; }

.node {
  position: absolute; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(31,39,51,.28); white-space: nowrap;
}
.node.root { background: var(--ink); color: #fff; border-color: var(--ink); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dot-sage { background: var(--sage); }
.dot-amber { background: var(--amber); }
.dot-graphite { background: var(--graphite); }

.node-root  { top: 42%; left: 0%; }
.node-a     { top: 6%;  left: 32%; }
.node-b     { top: 42%; left: 40%; }
.node-c     { top: 78%; left: 30%; }
.node-a1    { top: 2%;  left: 66%; }
.node-b1    { top: 40%; left: 74%; }
.node-b2    { top: 60%; left: 78%; }
.node-c1    { top: 82%; left: 64%; }

/* Simplified table/radial/kanban mocks for hero scenes 2–4 — deliberately not exact
   replicas of the app's real views (see PRD §8: hand-built, idealized mockups). */
.mock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(31,39,51,.28);
}
.mock-row .label { display: flex; align-items: center; gap: 8px; }
.mock-row-root { background: var(--ink); color: #fff; border-color: var(--ink); font-size: 14px; }
.mock-tag { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); flex: 0 0 auto; }

.view-table .mock-table { position: absolute; inset: 8% 4%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }

.view-radial .radial-mock { position: absolute; inset: 0; }
.r-ring { position: absolute; border: 1.5px solid var(--line); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.r-ring1 { width: 76px; height: 76px; }
.r-ring2 { width: 140px; height: 140px; }
.r-ring3 { width: 204px; height: 204px; }
.r-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 90px; height: 90px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 10px 22px -12px rgba(31,39,51,.35);
}
.r-pt {
  position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(31,39,51,.25);
}

.view-kanban .kanban-heading { position: absolute; top: 4%; left: 4%; right: 4%; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.view-kanban .kanban-mock { position: absolute; inset: 14% 4% 4%; display: flex; gap: 10px; }
.kanban-col { flex: 1; display: flex; flex-direction: column; gap: 8px; background: var(--paper-dim); border-radius: 12px; padding: 9px; }
.kanban-col-title { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.k-card {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px;
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 16px -10px rgba(31,39,51,.22);
}

/* ── The twist (panels) ──────────────────────────────────────────────────── */
/* Cycles through the same four topics as the hero (assets/cycle.js). Height is
   variable across breakpoints (2-col desktop vs stacked mobile), so scenes swap
   sequentially (fade out → swap → fade in) rather than crossfade-overlapped like the
   hero's fixed-aspect diagram; min-height keeps the section from collapsing mid-swap. */
.twist-diagram { position: relative; min-height: 300px; }
.twist-scene { display: none; opacity: 0; transition: opacity .5s ease; }
.twist-scene.is-active { display: block; opacity: 1; }

.twist-panels { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 48px; }
@media (min-width: 860px) { .twist-panels { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.panel {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 26px 24px; min-height: 220px; position: relative;
}
.panel-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 18px; display: block; }
.panel .node { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: none; position: static; margin-bottom: 10px; width: fit-content; max-width: 100%; white-space: normal; }
.panel .node.root { background: #fff; color: var(--ink); }
.panel-arrow { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-size: 26px; }
.progress-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; width: 100%; margin-top: 4px; }
.progress-bar > span { display: block; height: 100%; background: var(--sage); border-radius: 6px; }
.twist-caption { margin-top: 26px; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.55); }

/* Right panel: bare (matches Day-one) morphs into the status-carrying version.
   .morph-body's height comes from .twist-bare's normal flow; .twist-done overlays it. */
.morph-body { position: relative; }
.twist-bare, .twist-done { transition: opacity 1s ease; }
.twist-done { position: absolute; inset: 0; opacity: 0; }
.twist-scene.is-revealed .twist-bare { opacity: 0; }
.twist-scene.is-revealed .twist-done { opacity: 1; }

/* ── Angela section (chat bubbles + before/after photo) ──────────────────── */
.partner-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) { .partner-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.partner-image { display: flex; justify-content: center; }
.partner-image img {
  width: 100%; max-width: 360px; height: auto; border-radius: 20px;
  box-shadow: 0 24px 48px -20px rgba(31,39,51,.35);
}
.chatlist { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin-top: 40px; }
.bubble-row { display: flex; gap: 12px; align-items: flex-start; }
.bubble-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--clay-soft); border: 1.5px solid var(--clay); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.bubble {
  background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 13px 16px; font-size: 14.5px; max-width: 480px;
}
.bubble .ask { color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; display: block; margin-bottom: 5px; }
.bubble strong { color: var(--ink); }

/* ── See it your way (mini views) ────────────────────────────────────────── */
.view-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
@media (min-width: 640px) { .view-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .view-grid { grid-template-columns: repeat(4, 1fr); } }
.view-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.view-card h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.view-card p { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
.mini-canvas { height: 120px; border-radius: 10px; background: var(--paper-dim); position: relative; margin-bottom: 16px; overflow: hidden; }

/* Real product screenshots (not the hand-built mockups above) */
.screenshot-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
@media (min-width: 640px) { .screenshot-grid { grid-template-columns: repeat(2, 1fr); } }
.screenshot-card {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: 0 18px 44px -28px rgba(31,27,20,.35);
}
.screenshot-card img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.screenshot-card figcaption { padding: 14px 18px; font-size: 13.5px; color: var(--ink-soft); }
.screenshot-card figcaption strong { color: var(--ink); font-weight: 600; }

/* The whole image is the click target (assets/lightbox.js). A real <button>, not a
   div — keyboard and screen readers get it for free — so it needs the browser's
   button chrome stripped back off. */
.screenshot-card .shot-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; font: inherit; color: inherit; position: relative;
}
.screenshot-card .shot-zoom img { transition: transform .35s ease; }
.screenshot-card .shot-zoom:hover img { transform: scale(1.02); }
.screenshot-card .shot-zoom:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
/* Hover affordance: this is a static image, so say the click does something. */
.screenshot-card .shot-zoom::after {
  content: "Click to enlarge";
  position: absolute; right: 12px; bottom: 12px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(31,39,51,.82); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.screenshot-card .shot-zoom:hover::after,
.screenshot-card .shot-zoom:focus-visible::after { opacity: 1; }

/* Lightbox */
body.has-lightbox { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(15,19,26,.88);
}
.lightbox.is-open { display: flex; animation: lb-in .18s ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-figure { margin: 0; max-width: 1280px; width: 100%; }
.lightbox-figure img {
  display: block; width: 100%; height: auto;
  max-height: 82vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.lightbox-figure figcaption {
  margin-top: 14px; text-align: center;
  font-size: 14px; color: rgba(255,255,255,.72);
}
.lightbox-figure figcaption strong { color: #fff; font-weight: 600; }
.lightbox-close {
  position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }
.lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* On a phone, "fit the screenshot to the screen" is not a zoom — it lands within a
   few px of the inline card, so tapping would appear to do nothing. Below 700px the
   image is instead rendered wider than the viewport and the figure pans, so the app's
   own UI text is actually readable. Vertical size is safe: 900px wide at the capture's
   1280x800 ratio is ~562px tall. */
@media (max-width: 700px) {
  .lightbox { padding: 0; }
  .lightbox-figure {
    overflow: auto; -webkit-overflow-scrolling: touch;
    max-height: 100vh; padding: 64px 0 20px;
  }
  .lightbox-figure img {
    width: auto; max-width: none; min-width: 900px;
    max-height: none; border-radius: 0;
  }
  .lightbox-figure figcaption { position: sticky; left: 0; width: 100vw; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open { animation: none; }
  .screenshot-card .shot-zoom img,
  .screenshot-card .shot-zoom::after { transition: none; }
  .screenshot-card .shot-zoom:hover img { transform: none; }
}

/* radial mini */
.mini-radial .ring { position: absolute; border: 1.5px solid var(--line); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.mini-radial .ring1 { width: 44px; height: 44px; }
.mini-radial .ring2 { width: 78px; height: 78px; }
.mini-radial .ring3 { width: 112px; height: 112px; }
.mini-radial .core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--clay); }
.mini-radial .pt { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }

/* tree mini */
.mini-tree .col { position: absolute; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.mini-tree .blk { position: absolute; width: 30px; height: 8px; border-radius: 3px; background: var(--ink-soft); }

/* table mini */
.mini-table .row { position: absolute; left: 14px; right: 14px; height: 9px; border-radius: 3px; background: var(--line); }
.mini-table .row span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--sage); }

/* kanban mini */
.mini-kanban .kcol { position: absolute; top: 14px; bottom: 14px; width: 26%; background: #fff; border-radius: 5px; }
.mini-kanban .kcard { position: absolute; left: 4px; right: 4px; height: 8px; border-radius: 3px; background: var(--ink-soft); }
.mini-kanban .kcol span:nth-child(1) { top: 8px; }
.mini-kanban .kcol span:nth-child(2) { top: 22px; }
.mini-kanban .kcol span:nth-child(3) { top: 36px; }

/* ── Capture strip ────────────────────────────────────────────────────────── */
.capture-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 36px; }
.capture-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; color: var(--ink-soft);
}
.capture-pill .blink { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.cta-final { text-align: center; }
.cta-final .wrap { display: flex; flex-direction: column; align-items: center; }
.cta-final h2 { max-width: 520px; }
.cta-final .section-lede { margin-left: auto; margin-right: auto; }
.waitlist-form { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; align-items: center; width: 100%; max-width: 440px; }
.waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.waitlist-form input[type=email] {
  flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 11px;
  border: 1.5px solid var(--line); font-family: var(--body); font-size: 14.5px; background: #fff; color: var(--ink);
}
.waitlist-form input[type=email]:focus { border-color: var(--clay); outline: none; }
.waitlist-extra { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.waitlist-extra input[type=text], .waitlist-extra textarea {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line);
  font-family: var(--body); font-size: 13.5px; background: #fff; color: var(--ink); resize: vertical;
}
.waitlist-extra input[type=text]:focus, .waitlist-extra textarea:focus { border-color: var(--clay); outline: none; }
.waitlist-note { font-size: 12.5px; color: var(--graphite); margin-top: 14px; }
.waitlist-success { font-size: 15px; color: var(--sage); font-weight: 600; margin-top: 22px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { padding: 36px var(--gap); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; font-size: 13px; color: var(--graphite); }
footer a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }

/* ── Scroll-reveal (generic) ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .node { font-size: 12px; padding: 7px 11px; }
  .diagram { min-height: 300px; }
}