:root {
  --blue: #1F4A38;            /* hero — deep forest green */
  --blue-deep: #14322A;       /* deeper forest for footer */
  --paper: #F8F2E7;           /* sheets — warm cream */
  --ink: #0E2218;             /* text & dark panel — near-black forest */
  --panel: #14322A;           /* console surface */
  --panel-2: #1E4536;         /* panel highlight */
  --seal: #D8945A;            /* CTA — warm amber */
  --seal-deep: #B57640;       /* CTA hover */
  --lilac: #C8D2BB;           /* subtle text on dark — mossy cream */
  --muted: #5C6960;           /* subtle text on cream — sage */
  --ok: #8FCB7C;              /* success green — warm */
  --line: rgba(14, 34, 24, .12);            /* divider on cream */
  --line-warm: rgba(14, 34, 24, .10);

  /* v4 — stranger-chat semantics. Teal for matches, rose for offline, soft amber wash for moderator bubbles */
  --match: #5BA8A0;           /* "matched!" / connecting */
  --match-deep: #3F8580;
  --offline: #B8546E;         /* "nobody online" rose */
  --moderator: rgba(216,148,90,.14);  /* moderator bubble wash */
  --moderator-border: rgba(216,148,90,.42);

  --radius: 14px;
  --gutter: clamp(20px, 5vw, 72px);
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


/* Hide anything carrying the HTML [hidden] attribute - its default
   display:none is otherwise overridden by .demo-board{ display:grid } etc. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blue); color: var(--paper); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); }
button { font: inherit; }

/* ---------- stage / hero ---------- */
.stage { position: relative; overflow: hidden; background: var(--blue); }
.fluid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.stage > *:not(.fluid) { position: relative; z-index: 1; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--gutter); }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; text-decoration: none; font-variation-settings: "wdth" 85; color: var(--paper); }
.wordmark b { color: var(--seal); font-weight: 800; }
.topnav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); font-size: .95rem; font-weight: 600; }
.topnav a { text-decoration: none; color: #DCE3D5; }
.topnav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.status { display: inline-flex; align-items: center; gap: 9px; color: var(--lilac); font-weight: 500; }
.status i, .live i { width: 9px; height: 9px; border-radius: 50%; background: var(--seal); animation: simmer 1.8s ease-in-out infinite; display: inline-block; }
@keyframes simmer { 50% { transform: scale(1.7); opacity: .45; } }

.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 90px); align-items: center; padding: clamp(20px, 5vh, 60px) var(--gutter) clamp(56px, 9vh, 110px); max-width: 1400px; margin: 0 auto; }
h1 { margin: 0 0 26px; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .93; letter-spacing: -0.012em; font-weight: 800; font-variation-settings: "wdth" 84, "opsz" 48; }
.lede { max-width: 31em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #D9E2D2; margin: 0 0 34px; }
.hero-link { margin: 18px 6px 0; font-size: .98rem; }
.hero-link a { color: var(--lilac); font-weight: 600; text-underline-offset: 4px; }
.hero-link a:hover { color: #fff; }

form.signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 34em; }
.signup input { flex: 1 1 15em; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid transparent; border-radius: 999px; padding: 15px 22px; }
.signup input::placeholder { color: #9BA89B; }
.signup button { font-weight: 700; cursor: pointer; color: var(--ink); background: var(--seal); border: 0; border-radius: 999px; padding: 15px 28px; transition: background .2s ease; touch-action: manipulation; }
.signup button:hover { background: var(--seal-deep); }
.signup button:disabled { opacity: .6; cursor: wait; }
.form-note { flex-basis: 100%; margin: 4px 6px 0; min-height: 1.5em; font-size: .95rem; color: var(--lilac); }
.form-note.ok { color: #fff; font-weight: 600; }
.form-note.err { color: #F5D7B8; }

/* v4 — hero chips (interest picker) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; max-width: 34em; }
.chips button {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #DCE3D5;
  background: rgba(20, 50, 38, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  touch-action: manipulation;
}
.chips button:hover { border-color: var(--seal); color: #fff; }
.chips button.on {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--ink);
}
.chips-hint { margin: 0 0 20px; font-size: .9rem; color: var(--lilac); max-width: 34em; }

/* v4 — connecting card (replaces the agent trace pulse card) */
.connect { background: rgba(20, 50, 38, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px 20px 18px; box-shadow: 0 30px 60px -24px rgba(0, 14, 8, .6); max-width: 480px; width: 100%; justify-self: center; }
.connect-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-weight: 700; font-size: .92rem; }
.connect-head .live { color: var(--match); }
.connect-head .live i { background: var(--match); }
.connect-status { color: var(--lilac); font-weight: 600; font-family: var(--mono); font-size: .82rem; }

.connect-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 16px; }
.party {
  display: grid; gap: 6px; justify-items: center;
  padding: 16px 6px;
  border-radius: 12px;
  background: rgba(248, 242, 231, .04);
}
.party.connected { background: rgba(91, 168, 160, .12); }
.party .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--lilac); box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); }
.party.you .dot { background: var(--seal); }
.party .name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: #fff; }
.party .label { font-size: .78rem; color: var(--lilac); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.connector {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(248, 242, 231, .15);
  border-radius: 1px;
  overflow: hidden;
  min-width: 60px;
}
.connector .pulse {
  position: absolute;
  top: -1px; left: -8%;
  width: 24%;
  height: 4px;
  background: var(--seal);
  border-radius: 2px;
  opacity: 0;
}
.connector[data-state="looking"] .pulse { animation: connector-pulse 1.4s linear infinite; opacity: .8; }
.connector[data-state="broadening"] .pulse { animation: connector-pulse 1.1s linear infinite; opacity: .8; background: #E8B07C; }
.connector[data-state="matched"] { background: var(--match); }
.connector[data-state="matched"] .pulse { display: none; }
@keyframes connector-pulse {
  from { left: -24%; }
  to   { left: 100%; }
}

.connect-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.connect-stats div { display: grid; gap: 2px; }
.connect-stats b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; font-weight: 800; }
.connect-stats span { font-size: .76rem; color: var(--lilac); font-weight: 600; }
.connect-stats .matched-count { color: var(--match); }

/* ---------- shared section ---------- */
.inner { max-width: 1400px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); }
h2.section { margin: 0 0 18px; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: .98; letter-spacing: -0.02em; font-weight: 800; font-variation-settings: "wdth" 84, "opsz" 64; max-width: 15em; }
.lead { margin: 0 0 clamp(28px, 4vw, 48px); max-width: 38em; font-size: 1.15rem; }
.sheet { background: var(--paper); color: var(--ink); }
.sheet .lead { color: var(--muted); }
.sub { margin: clamp(40px, 6vw, 72px) 0 18px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }

/* ---------- demo ---------- */
.agent { background: var(--ink); color: var(--paper); }
.agent .lead { color: #C8D2BB; }

/* v4 — 3-stage demo uses stages nav rather than brief/run */
.stages-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.stage-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--lilac); background: rgba(248, 242, 231, .04);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 14px;
}
.stage-pill[data-state="on"] { background: var(--seal); border-color: var(--seal); color: var(--ink); }
.stage-pill[data-state="done"] { background: rgba(91, 168, 160, .15); border-color: var(--match); color: var(--match); }
.stage-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.stage-pill[data-state="on"] i { animation: pulse-dot 1.2s ease-in-out infinite; }

.demo-board {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
}
.demo-board .col { display: grid; gap: 14px; min-width: 0; }

/* Stage A: onboard chat */
.onboard { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px; min-height: 420px; display: grid; gap: 12px; align-content: start; }
.onboard .transcript { display: grid; gap: 8px; min-height: 260px; align-content: start; }
.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .98rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  animation: trace-rise .42s cubic-bezier(.2, .85, .3, 1) forwards;
}
.bubble.ai {
  justify-self: start;
  background: rgba(248, 242, 231, .08);
  color: var(--paper);
  border-bottom-left-radius: 6px;
}
.bubble.you {
  justify-self: end;
  background: var(--seal);
  color: var(--ink);
  border-bottom-right-radius: 6px;
  font-weight: 600;
}
.onboard-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.onboard-form input {
  font: inherit; color: var(--paper);
  background: rgba(248, 242, 231, .06);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 16px;
}
.onboard-form input::placeholder { color: rgba(220, 227, 213, .4); }
.onboard-form input:focus-visible { outline: none; border-color: var(--seal); }
.onboard-form button {
  font-weight: 700; cursor: pointer; border-radius: 999px; padding: 9px 18px; border: 0; touch-action: manipulation;
}
.onboard-form .send { color: var(--ink); background: var(--seal); }
.onboard-form .skip { color: var(--lilac); background: transparent; border: 1.5px solid var(--line); }
.onboard-form .skip:hover { color: #fff; border-color: var(--seal); }

.taste-note {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.taste-note h4 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.005em; color: #fff; }
.taste-note .biorow { display: flex; flex-wrap: wrap; gap: 6px; }
.taste-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--ink); background: var(--seal);
  padding: 4px 10px; border-radius: 999px;
  opacity: 0; transform: translateY(4px);
  animation: trace-rise .35s cubic-bezier(.2, .85, .3, 1) forwards;
}
.taste-bio {
  margin: 0; padding: 10px 12px;
  background: rgba(248, 242, 231, .04);
  border-radius: 10px;
  font-size: .92rem; line-height: 1.45; color: #DCE3D5;
  font-family: var(--serif);
  opacity: 0; transform: translateY(4px);
  animation: trace-rise .4s cubic-bezier(.2, .85, .3, 1) forwards;
}

/* Stage B: matching status */
.matching {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 420px;
}
.matching h4 { margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: #fff; display: flex; align-items: center; gap: 9px; }
.matching h4 i { width: 9px; height: 9px; border-radius: 50%; background: var(--match); animation: pulse-dot 1.4s ease-in-out infinite; display: inline-block; }
.matching-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.matching-list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline;
  font-size: .94rem; line-height: 1.5; color: #DCE3D5;
  padding: 9px 12px;
  background: rgba(248, 242, 231, .04); border-radius: 9px;
  opacity: 0; transform: translateY(6px);
  animation: trace-rise .38s cubic-bezier(.2, .85, .3, 1) forwards;
}
.matching-list li::before { content: "›"; color: var(--seal); font-weight: 800; }
.matching-list li.matched { background: rgba(91, 168, 160, .15); border: 1px solid var(--match); color: #fff; font-weight: 600; }
.matching-list li.matched::before { content: "✓"; color: var(--match); }
.matching-list li small { display: block; color: var(--lilac); font-weight: 500; font-size: .82rem; margin-top: 2px; }

/* Stage C: chat pane + moderator */
.chat-pane {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.chat-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.chat-col h5 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: .92rem; color: #fff; display: flex; align-items: center; gap: 8px; }
.chat-col h5 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lilac); }
.chat-col.you h5 .dot { background: var(--seal); }
.chat-col.them h5 .dot { background: var(--match); }
.chat-col .meta { margin-left: auto; font-size: .72rem; color: var(--lilac); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.chat-msg {
  max-width: 88%;
  padding: 8px 12px;
  background: rgba(248, 242, 231, .07);
  border-radius: 11px;
  font-size: .92rem; line-height: 1.4; color: #DCE3D5;
  opacity: 0; transform: translateY(6px);
  animation: trace-rise .38s cubic-bezier(.2, .85, .3, 1) forwards;
}
.chat-col.you .chat-msg { justify-self: end; background: var(--seal); color: var(--ink); border-bottom-right-radius: 4px; }
.chat-col.them .chat-msg { justify-self: start; background: rgba(91, 168, 160, .18); color: #fff; border-bottom-left-radius: 4px; }
.dots-typing { align-self: start; display: inline-flex; gap: 4px; padding: 8px 12px; background: rgba(248, 242, 231, .07); border-radius: 11px; }
.dots-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); animation: simmer 1.4s ease-in-out infinite; }
.dots-typing i:nth-child(2) { animation-delay: .2s; }
.dots-typing i:nth-child(3) { animation-delay: .4s; }

.moderator-bubble {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 92%;
  padding: 10px 14px;
  background: var(--moderator);
  border: 1px solid var(--moderator-border);
  border-radius: 12px;
  font-size: .9rem; line-height: 1.45; color: #fff;
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
  opacity: 0; transform: translateY(6px);
  animation: trace-rise .42s cubic-bezier(.2, .85, .3, 1) forwards;
}
.moderator-bubble .lbl { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--seal); }

.demo-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ghost { color: var(--lilac); background: transparent; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease; touch-action: manipulation; }
.ghost:hover { background: rgba(216, 148, 90, .14); color: #fff; }
.fine { color: var(--lilac); font-size: .85rem; margin: 14px 0 0; max-width: 60em; }

/* ---------- how ---------- */
.loop { margin-bottom: clamp(36px, 5vw, 56px); }
.loop-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.node { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-warm); border-radius: 12px; padding: 14px; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .15s ease; font: inherit; }
.node:hover { border-color: var(--ink); }
.node.on { border-color: var(--ink); background: #fff; box-shadow: 0 8px 18px -10px rgba(14,34,24,.18); }
.node b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.node span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.node.ask b { color: var(--seal); }
.loop-text { background: #fff; border: 1.5px solid var(--line-warm); border-radius: 12px; padding: 16px 20px; margin: 14px 0 0; min-height: 4.2em; color: var(--ink); font-size: 1rem; line-height: 1.55; }

/* ---------- control ---------- */
.dial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.dial button { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-warm); border-radius: 14px; padding: 22px 22px 20px; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease; font: inherit; }
.dial button:hover { border-color: var(--ink); }
.dial button[aria-checked="true"] { border-color: var(--ink); background: #fff; box-shadow: 0 14px 30px -16px rgba(14,34,24,.18); }
.dial button b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.dial button span { display: block; color: var(--muted); font-size: .92rem; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink); font-size: .98rem; }
.rules li { padding: 10px 16px; background: #fff; border: 1.5px solid var(--line-warm); border-radius: 10px; display: flex; align-items: baseline; gap: 12px; }
.rules li::before { content: "•"; color: var(--seal); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.rules li b { font-family: var(--mono); color: var(--ink); background: rgba(31, 74, 56, .08); padding: 1px 6px; border-radius: 4px; font-size: .92em; }

/* ---------- tones / moderator examples ---------- */
.tone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tone { background: var(--paper); border: 1.5px solid var(--line-warm); border-radius: 14px; padding: 22px; }
.tone .tag { display: inline-block; font-family: var(--mono); font-size: .78rem; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; font-weight: 700; letter-spacing: .03em; }
.tone.playful .tag { background: #F5E5D2; color: #8B5E2E; }
.tone.formal .tag { background: #DCE5DD; color: #2A4534; }
.tone.minimal .tag { background: #EEE7D4; color: #5C5638; }
.tone h3 { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.35; letter-spacing: -0.005em; }
.tone p { margin: 0; color: var(--muted); font-size: .92rem; }
.kbd { font-family: var(--mono); font-size: .8rem; background: rgba(14, 34, 24, .08); color: var(--ink); padding: 2px 7px; border-radius: 4px; }
.kbd.inline { font-size: .82em; padding: 1px 6px; }
.caption { margin-top: 16px; color: var(--muted); font-size: .95rem; }

/* v4 — matching ladder (#ladder) */
.ladder { display: grid; gap: 14px; margin: 18px 0 32px; }
.ladder-tier {
  background: #fff;
  border: 1.5px solid var(--line-warm);
  border-radius: 14px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px 20px;
  align-items: center;
}
.ladder-tier .tier {
  font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(31, 74, 56, .08); color: var(--ink);
}
.ladder-tier.solid { border-color: var(--match); background: linear-gradient(0deg, #fff, #fff), rgba(91, 168, 160, .05); background-blend-mode: multiply; }
.ladder-tier.solid .tier { background: var(--match); color: #fff; }
.ladder-tier .name { font-family: var(--display); font-weight: 800; font-size: 1.18rem; color: var(--ink); letter-spacing: -.005em; }
.ladder-tier .name small { display: block; font-family: var(--sans); font-weight: 500; font-size: .92rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.ladder-tier .demo { font-size: .92rem; color: var(--muted); }

/* v4 — privacy section */
.privacy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.privacy-card { background: #fff; border: 1.5px solid var(--line-warm); border-radius: 14px; padding: 18px; }
.privacy-card h4 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--ink); letter-spacing: -.005em; }
.privacy-card p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }

/* ---------- roadmap ---------- */
.phases {
  list-style: none;
  margin: 8px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: phase;
}
.phase {
  background: #fff;
  border: 1.5px solid var(--line-warm);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.phase-1 {
  border-color: var(--ink);
  box-shadow: 0 14px 30px -16px rgba(14, 34, 24, .25);
  background: #fff;
}
.phase-3 {
  border-style: dashed;
  background: rgba(255, 255, 255, .55);
}
.phase-head { margin-bottom: 14px; }
.phase-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31, 74, 56, .08);
  color: var(--ink);
  margin-bottom: 10px;
}
.phase-1 .phase-num {
  background: var(--seal);
  color: var(--ink);
}
.phase-status {
  display: inline-block;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 4px;
}
.phase-1 .phase-status { color: var(--seal-deep); }
.phase-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.15;
}
.phase-sub {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.5;
}
.phase-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.phase-list li {
  padding: 10px 13px;
  background: rgba(31, 74, 56, .04);
  border-radius: 9px;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--ink);
}
.phase-3 .phase-list li {
  background: transparent;
  border: 1px dashed rgba(31, 74, 56, .18);
}
.phase-list li b {
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.phase-list li:has(b) { font-size: .92rem; }
.roadmap .caption { font-style: italic; }

/* ---------- compare ---------- */
.cmp { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: .98rem; }
.cmp thead th { text-align: left; padding: 14px 16px; font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--ink); background: rgba(31, 74, 56, .07); border-bottom: 1.5px solid var(--line-warm); }
.cmp thead th.empty { background: transparent; border: 0; padding-right: 4px; }
.cmp thead th.adjak { background: var(--ink); color: #fff; }
.cmp tbody th { text-align: left; padding: 16px; font-weight: 700; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line-warm); width: 22%; }
.cmp tbody td { padding: 16px; color: var(--muted); border-bottom: 1px solid var(--line-warm); vertical-align: top; line-height: 1.5; }
.cmp tbody td.adjak { background: rgba(31, 74, 56, .07); color: var(--ink); font-weight: 600; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
.cmp tbody tr:last-child td.adjak { border-bottom: 1.5px solid var(--ink); }
.cmp-foot { color: var(--muted); font-size: .9rem; max-width: 50em; }

/* ---------- faq ---------- */
.faq-list { display: grid; gap: 8px; }
.faq-list details { background: #fff; border: 1.5px solid var(--line-warm); border-radius: 12px; padding: 16px 20px; }
.faq-list details[open] { border-color: var(--ink); }
.faq-list summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--mono); font-size: 1.4rem; color: var(--seal); font-weight: 700; transition: transform .2s ease; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin: 12px 0 0; color: var(--muted); line-height: 1.6; }

/* ---------- final CTA ---------- */
.final { background: var(--blue); color: var(--paper); padding: clamp(64px, 9vw, 120px) var(--gutter); }
.final .inner { padding: 0; max-width: 800px; text-align: center; }
.final h2 { margin: 0 0 18px; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 84, "opsz" 64; }
.final p { color: var(--lilac); margin: 0 0 28px; }
.final .signup { margin: 0 auto; justify-content: center; }

footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 26px var(--gutter); background: var(--blue-deep); color: var(--lilac); font-size: .9rem; }
footer span { display: inline-block; }
.foot-link { text-decoration: none; color: var(--paper); font-weight: 600; border-bottom: 1.5px solid var(--seal); padding-bottom: 1px; }
.foot-link:hover { color: #fff; }

/* v4 — accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .topnav a { display: none; }
  .topnav .status { display: inline-flex; }
  .hero { grid-template-columns: 1fr; }
  .demo-board { grid-template-columns: 1fr; }
  .chat-pane { grid-template-columns: 1fr; }
  .ladder-tier { grid-template-columns: 1fr; }
  .loop-nodes { grid-template-columns: repeat(2, 1fr); }
  .tools { grid-template-columns: 1fr; }
  .dial { grid-template-columns: 1fr; }
  .tone-grid { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr; }
  .privacy { grid-template-columns: 1fr; }
  .cmp { font-size: .92rem; }
  .cmp thead th, .cmp tbody th, .cmp tbody td { padding: 12px; }
}
@media (max-width: 560px) {
  h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .loop-nodes { grid-template-columns: 1fr; }
  .connect-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .connect { padding: 16px; }
  .onboard, .matching, .chat-pane { min-height: 320px; }
  .onboard-form { grid-template-columns: 1fr; }
  .signup input, .signup button { width: 100%; }
  footer { flex-direction: column; align-items: flex-start; padding: 22px; }
}