:root {
  --bg: #0c0e0d;
  --raised: #131614;
  --sunk: #1b201c;
  --ink: #eceee9;
  --muted: #8d958e;
  --rule: #252a26;
  --rule-strong: #333b35;
  --graph-line: #1d231f;
  --accent: #b8f04a;
  --accent-hover: #d3ff6e;
  --accent-wash: rgba(184, 240, 74, 0.12);
  --accent-wash-strong: rgba(184, 240, 74, 0.24);
  --danger: #ff9a85;
  --strike: currentColor;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 450ms;
  --dur-hero: 900ms;

  --page: min(1180px, calc(100% - 2.5rem));
  --section-gap: clamp(4.5rem, 10vw, 8rem);
  color-scheme: dark;
}

@property --wipe {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #2c332e var(--bg); }
body {
  margin: 0;
  overflow-x: clip;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr-only, .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: 30;
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.bar, .hero, .problem, .steps, .outcomes, .faq, .close, .foot { width: var(--page); margin-inline: auto; }

.bar { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; position: relative; z-index: 2; }
.mark { display: inline-flex; align-items: center; gap: 0.6rem; font: 700 1.15rem var(--display); text-decoration: none; letter-spacing: -0.02em; }
.mark rect { fill: var(--accent); }
.mark path { stroke: var(--bg); }

.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--bg);
  padding: 0.85rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn[aria-disabled="true"] { background: #94bf3e; cursor: progress; transform: none; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.95rem; }

h2 {
  font: 700 clamp(1.9rem, 4.2vw, 3rem)/1.05 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Hero */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: min(780px, calc(100svh - 4.5rem));
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(4rem, 7vw, 5.5rem);
}
.copy, .demo { position: relative; z-index: 1; }

.graph {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 240px;
  pointer-events: none;
}
.graph-path {
  fill: none;
  stroke: var(--graph-line);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s var(--ease-in-out) calc(200ms + var(--d) * 110ms);
}
.graph-commits circle { fill: var(--graph-line); }
.graph-commits, .graph-nodes { transition: opacity 700ms var(--ease-out) 1.4s; }
.node-dot { fill: #2a312c; transition: fill 400ms var(--ease-out); }
.graph-node.is-in .node-dot { fill: rgba(184, 240, 74, 0.75); }
.node-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.motion .graph:not(.is-drawn) .graph-path { stroke-dashoffset: 1; }
.motion .graph:not(.is-drawn) :is(.graph-commits, .graph-nodes) { opacity: 0; }
.motion .graph:not(.is-settled) .graph-node:not(.is-lit) .node-dot { fill: #2a312c; }

.headline {
  font: 700 clamp(2.4rem, 4.6vw, 3.9rem)/1.02 var(--display);
  letter-spacing: -0.04em;
}
.line { display: block; }
.w { display: inline-block; overflow: clip; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; vertical-align: top; }
.wi { display: inline-block; }
.motion .wi { animation: word-rise var(--dur-hero) var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 70ms); }
.motion .line + .line .wi { animation-delay: calc(200ms + var(--i) * 70ms); }

.key { position: relative; display: inline-block; }
.key::after {
  content: attr(data-key);
  content: attr(data-key) / "";
  position: absolute;
  inset: 0;
  color: var(--accent);
  clip-path: inset(0 0 0 0);
  transition: clip-path 760ms var(--ease-in-out);
}
.motion .key:not(.is-lit)::after { clip-path: inset(0 100% 0 0); }

.lede { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 30rem; }

/* Signup */

.signup-slot { margin-top: 2rem; max-width: 31rem; min-height: 5.4rem; }
.signup-label { display: block; margin-bottom: 0.45rem; font-size: 0.95rem; font-weight: 500; }
.signup-row { display: flex; gap: 0.5rem; }
.signup-input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--raised);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.signup-input::placeholder { color: var(--muted); }
.signup-input:hover { border-color: #46504a; }
.signup-input:focus-visible { outline-offset: 1px; border-color: transparent; background: #161a17; }
.signup-input[aria-invalid="true"] { border-color: var(--danger); }
.signup-input:read-only { color: var(--muted); }
.signup-msg { margin-top: 0.55rem; color: var(--danger); font-size: 0.93rem; }
.signup-msg:empty { margin: 0; }
.signup-msg a { color: var(--ink); font-weight: 600; }

.assurance { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; }
.proof { margin-top: 0.3rem; color: var(--muted); font-size: 0.95rem; }
.proof [aria-hidden] { color: var(--ink); }
.count { display: inline-block; min-width: 3ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.motion .count:not(.is-counting) { opacity: 0; }

.done {
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--raised);
}
.done:focus-visible { outline-offset: 2px; }
.done.is-calm { padding: 0; border: 0; background: none; }
.done.is-calm .done-title { font-size: 1.15rem; }
.done.is-calm [data-change-email] { margin-top: 0.2rem; }
.done-title { display: flex; align-items: center; gap: 0.5rem; font: 700 1.3rem/1.2 var(--display); letter-spacing: -0.02em; }
.done-title .icon { color: var(--accent); width: 1.2em; height: 1.2em; stroke-width: 2; }
.done-text { margin-top: 0.3rem; color: var(--muted); overflow-wrap: anywhere; }
.done-text b { color: var(--ink); font-weight: 600; }
.prioritise { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.prioritise-title { font-weight: 600; }
.prioritise-title span { color: var(--muted); font-weight: 400; }
.prioritise fieldset { border: 0; padding: 0; margin-top: 0.75rem; min-width: 0; }
.prioritise legend { padding: 0; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-option { position: relative; }
.chip-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-option span {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip-option:hover span { border-color: #4f5952; }
.chip-option input:checked + span { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.chip-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.prioritise-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; min-height: 1.6rem; }
.prioritise-status { color: var(--muted); font-size: 0.88rem; }
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-btn:hover { color: var(--ink); }
[data-change-email] { margin-top: 0.8rem; }

/* Sample run */

.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; margin-bottom: 0.6rem; }
.demo-label { color: var(--muted); font-size: 0.88rem; }
.replay {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  animation: fade-in var(--dur-slow) var(--ease-out);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.replay:hover { color: var(--ink); border-color: #4f5952; }
.replay:hover .icon { transform: rotate(-200deg); }
.replay .icon { transition: transform 600ms var(--ease-out); }

.sheet { position: relative; border: 1px solid var(--rule); border-radius: 14px; background: var(--raised); overflow: hidden; }
.pane { padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1rem, 2.2vw, 1.5rem); }
.pane-in { position: relative; overflow: clip; border-bottom: 1px solid var(--rule); }
.pane-title { display: flex; justify-content: space-between; margin-bottom: 0.4rem; color: var(--muted); font: 600 0.75rem var(--body); letter-spacing: 0.07em; text-transform: uppercase; }
.pane-count { font-variant-numeric: tabular-nums; }

.scan {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(184, 240, 74, 0), rgba(184, 240, 74, 0.08));
  border-bottom: 1px solid rgba(184, 240, 74, 0.75);
}

.pr {
  position: relative;
  display: grid;
  grid-template-columns: 3.3rem 1fr auto;
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  padding-block: 0.45rem;
  border-top: 1px solid var(--rule);
  font: 400 0.8rem/1.45 var(--mono);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.pr:first-child { border-top: 0; }
.pr::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  background: var(--accent-wash);
  opacity: 0;
  pointer-events: none;
}
.num { color: var(--muted); font-variant-numeric: tabular-nums; }
.title { transform-origin: left center; transition: color 420ms var(--ease-out), transform 420ms var(--ease-out); }
.title-text {
  background: linear-gradient(var(--strike), var(--strike)) no-repeat 0 58% / 0% 1.5px;
  transition: background-size 420ms var(--ease-out);
}
.pr.out .title { color: var(--muted); transform: scale(0.97); }
.pr.out .title-text { background-size: 100% 1.5px; }
.tag { justify-self: start; font: 500 0.7rem var(--body); padding: 0.1rem 0.55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.pr.in .tag { background: var(--accent-wash); color: var(--accent); }
.pr.out .tag { background: var(--sunk); color: var(--muted); }

.motion .demo:not([data-run="done"]) .pr:not(.is-shown) { opacity: 0; transform: translateY(10px); }
.motion .demo:not([data-run="done"]) .pr:not(.is-judged) .tag { opacity: 0; }
.motion .demo:not([data-run="done"]) .pr.out:not(.is-judged) .title { color: var(--ink); transform: none; }
.motion .demo:not([data-run="done"]) .pr.out:not(.is-judged) .title-text { background-size: 0% 1.5px; }

.tabs { position: relative; display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.tabs button {
  padding: 0.45rem 0.85rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabs button:hover, .tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button:focus-visible { outline-offset: -2px; }
.tab-ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100px;
  height: 2px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: translateX(var(--x, 0)) scaleX(var(--w, 0.98));
  transition: transform var(--dur-slow) var(--ease-out);
}

.panels { display: grid; }
.draft-panel {
  grid-area: 1 / 1;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-base);
}
.draft-panel:not(.is-active) { opacity: 0; visibility: hidden; translate: 0 6px; }
.draft-panel.is-active { transition-delay: 80ms, 80ms, 0s; }
.out-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 1rem; font: 700 1.2rem/1.2 var(--display); letter-spacing: -0.02em; }
.out-date { color: var(--muted); font: 400 0.85rem var(--body); letter-spacing: 0; }

.notes { margin-top: 0.6rem; }
.note {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  padding-block: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.97rem;
  line-height: 1.5;
}
.note-kind { justify-self: start; padding-top: 0.15rem; color: var(--accent); font: 600 0.7rem var(--body); letter-spacing: 0.07em; text-transform: uppercase; }
.motion .demo:not([data-run="done"]) .note:not(.is-arrived) .note-kind { opacity: 0; }
.motion .demo:not([data-run="done"]) .tok:not(.on) { opacity: 0; }
.tok.on { animation: ink-settle 900ms var(--ease-out); }

.mail-meta { padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); font-size: 0.95rem; font-weight: 500; }
.mail-label { margin-right: 0.4rem; color: var(--muted); font-weight: 400; }
.mail-body { display: grid; gap: 0.6rem; padding-top: 0.8rem; font-size: 0.95rem; line-height: 1.5; }

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-right: -2px;
  vertical-align: -0.18em;
  border-radius: 1px;
  background: var(--accent);
}
.caret.is-idle { animation: blink 1s steps(1) infinite; }

.flow { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-trail { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.packet {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(184, 240, 74, 0), var(--accent) 70%, #f4ffd9);
  offset-rotate: auto;
  offset-anchor: 100% 50%;
}

.demo figcaption { margin-top: 0.8rem; color: var(--muted); font-size: 0.9rem; max-width: 38rem; }

/* Ticker */

.ticker { position: relative; border-block: 1px solid var(--rule); }
.ticker-window { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; }
.ticker-list { display: flex; gap: 3.5rem; padding: 1.1rem 3.5rem 1.1rem 0; }
.ticker-list li { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; font-size: 0.95rem; }
.ticker-list code { color: var(--muted); font-size: 0.82rem; }
.ticker-list .icon { color: var(--accent); }
.ticker.is-running .ticker-track { animation: ticker-slide var(--ticker-duration, 60s) linear infinite; }
.ticker:is(:hover, :focus-within, .is-paused, .is-offscreen) .ticker-track,
.is-tab-hidden .ticker-track { animation-play-state: paused; }
.ticker-toggle {
  position: absolute;
  top: 50%;
  right: max(0.75rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  translate: 0 -50%;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ticker-toggle:hover { color: var(--ink); border-color: #4f5952; }
.ticker-toggle .icon-play, .ticker-toggle[aria-pressed="true"] .icon-pause { display: none; }
.ticker-toggle[aria-pressed="true"] .icon-play { display: block; }
.ticker-window[tabindex] { overflow-x: auto; scrollbar-width: thin; }

/* Problem: before and after */

.problem {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: var(--section-gap);
}
.problem-copy p { margin-top: 1.1rem; max-width: 30rem; color: var(--muted); font-size: 1.1rem; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border: 1px solid var(--rule); border-radius: 14px; background: var(--raised); overflow: hidden; }
.compare-col { padding: 1.4rem 1.5rem 1.6rem; }
.compare-before { border-right: 1px solid var(--rule); background: var(--bg); }
.compare-label { color: var(--muted); font: 500 0.9rem var(--body); }
.compare-date { margin-top: 0.7rem; font: 700 1.15rem/1.2 var(--display); letter-spacing: -0.02em; }
.vague { margin-top: 0.6rem; }
.vague li { padding-block: 0.5rem; border-top: 1px solid var(--rule); font-size: 0.97rem; line-height: 1.5; }
.compare-before .vague li { color: var(--muted); }
.wipe { position: relative; display: grid; margin-top: 0.6rem; }
.wipe > ul { grid-area: 1 / 1; margin-top: 0; }
.wipe-to { clip-path: inset(0 calc((1 - var(--wipe)) * 100%) 0 0); }
.wipe-from { clip-path: inset(0 0 0 calc(var(--wipe) * 100%)); }
.wipe-edge {
  position: absolute;
  inset: -0.25rem 0;
  border-left: 1.5px solid var(--accent);
  pointer-events: none;
  transform: translateX(calc(var(--wipe) * 100%));
  opacity: min(calc(var(--wipe) * 12), calc((1 - var(--wipe)) * 12));
}
.motion .wipe { --wipe: 0; }
.motion .wipe.is-revealed { --wipe: 1; transition: --wipe 1.8s var(--ease-in-out) 150ms; }

/* Steps */

.steps { padding-top: var(--section-gap); }
.step-list { position: relative; display: grid; gap: clamp(3rem, 7vw, 5rem); margin-top: 3rem; }
.step-list::before, .step-list::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  left: calc(1.1rem - 0.5px);
  width: 1px;
  background: var(--rule);
}
.step-list::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--rail, 1)); }
.motion .step-list { --rail: 0; }
.step { display: grid; grid-template-columns: 2.2rem minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(1.25rem, 4vw, 3.5rem); align-items: start; }
.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}
.motion .step:not(.is-reached) .step-num { border-color: var(--rule-strong); color: var(--muted); }
.step-copy { padding-top: 0.2rem; }
.step-copy h3 { font: 600 1.4rem/1.2 var(--display); letter-spacing: -0.02em; }
.step-copy p { margin-top: 0.5rem; max-width: 30rem; color: var(--muted); }

.stage { position: relative; min-height: 12rem; padding: 1.25rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--raised); }

.stage-connect { display: grid; gap: 0.7rem; align-content: start; }
.slot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.55rem 0.5rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: 10px; }
.motion .stage-connect .slot:not(.is-filled) { border-style: dashed; }
.slot-label { color: var(--muted); font-size: 0.88rem; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--sunk); font: 500 0.82rem var(--mono); }
.chip .icon { color: var(--accent); }
.stage-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; color: var(--muted); font-size: 0.9rem; }
.stage-status .icon { color: var(--accent); stroke-width: 2; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .stage-connect:not(.is-played) :is(.chip, .stage-status) { opacity: 0; }

.draft-head { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.85rem; }
.draft-head span + span { padding: 0.05rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 0.78rem; }
.draft-line { display: grid; grid-template-columns: 4.2rem 1fr; margin-top: 0.9rem; padding-block: 0.75rem; border-block: 1px solid var(--rule); line-height: 1.5; }
.draft-text { min-height: 3em; }
.edit-old {
  display: none;
  border-radius: 3px;
  background: linear-gradient(var(--accent-wash-strong), var(--accent-wash-strong)) no-repeat 0 0 / 0% 100%;
}
.ch.is-deleted { display: none; }
.draft-foot { margin-top: 0.8rem; color: var(--muted); font-size: 0.85rem; }
.motion .stage-review:not(.is-done):not(.is-typing) .edit-old { display: inline; }
.motion .stage-review:not(.is-done):not(.is-typing) .edit-new { display: none; }
.motion .stage-review:not(.is-done) .tok:not(.on) { opacity: 0; }
.motion .stage-review:not(.is-done) .draft-foot { opacity: 0; }
.stage-review .draft-foot { transition: opacity var(--dur-slow) var(--ease-out); }

.stage-publish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: center; }
.pub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pub-lines path { fill: none; stroke: rgba(184, 240, 74, 0.45); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .stage-publish:not(.is-played) .pub-lines path { stroke-dashoffset: 1; }
.pub-draft { position: relative; z-index: 1; display: grid; gap: 0.2rem; padding: 0.9rem 1rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--bg); }
.pub-ghost { position: absolute; z-index: 2; margin: 0; pointer-events: none; transform-origin: center; }
.pub-draft-title { font: 700 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.pub-draft-meta { color: var(--muted); font-size: 0.82rem; }
.pub-button { justify-self: start; margin-top: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 8px; background: var(--accent); color: var(--bg); font-size: 0.85rem; font-weight: 600; }
.pub-dests { position: relative; z-index: 1; display: grid; gap: 0.6rem; }
.dest { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--bg); font-size: 0.92rem; }
.dest .icon { color: var(--muted); }
.dest .dest-check { margin-left: auto; color: var(--accent); stroke-width: 2; }
.motion .stage-publish:not(.is-played) .dest-check { opacity: 0; }

/* Outcomes */

.outcomes { padding-top: var(--section-gap); }
.outcome-list { margin-top: 2.25rem; border-top: 1px solid var(--rule); }
.outcome-list li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0.6rem clamp(2rem, 5vw, 4.5rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.outcome-list h3 { font: 700 clamp(1.45rem, 2.7vw, 2.1rem)/1.12 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.outcome-list p { max-width: 34rem; color: var(--muted); font-size: 1.05rem; }

/* FAQ */

.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); padding-top: var(--section-gap); }
.faq-list { border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.1rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa-icon { width: 1.3rem; height: 1.3rem; color: var(--accent); transition: transform var(--dur-slow) var(--ease-out); }
.qa[open] .qa-icon { transform: rotate(45deg); }
.qa-body { display: grid; grid-template-rows: 1fr; }
.qa-inner { min-height: 0; overflow: hidden; }
.qa-inner p { max-width: 36rem; padding-bottom: 1.2rem; color: var(--muted); }
.motion .qa-body { grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.motion .qa-inner { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.motion .qa.is-open .qa-body { grid-template-rows: 1fr; }
.motion .qa.is-open .qa-inner { opacity: 1; transition-delay: 80ms; }
.motion .qa .qa-icon { transform: none; }
.motion .qa.is-open .qa-icon { transform: rotate(45deg); }

/* Close */

.close {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: var(--section-gap);
}
.close h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; }
.close .signup-slot { margin-top: 0; }
.sw { display: inline-block; }
.settle .sw { transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out), filter 800ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
.motion .settle:not(.is-in) .sw { opacity: 0; transform: translateY(0.45em) rotate(3deg); filter: blur(8px); }

/* Footer and dock */

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.75rem 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.92rem; }
.foot-links { display: flex; gap: 1.5rem; }
.foot a:hover { color: var(--ink); }

.dock { display: none; }

/* Keyframes */

@keyframes word-rise { from { transform: translateY(108%) rotate(4deg); } }
@keyframes ink-settle { from { color: var(--accent); opacity: 0; } 12% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes ticker-slide { to { transform: translateX(-50%); } }

.is-resetting, .is-resetting *, .is-resetting *::before, .is-resetting *::after { transition: none !important; }

/* Responsive */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 3rem; }
  .problem, .faq, .close { grid-template-columns: 1fr; }
  .step { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .stage { grid-column: 2; margin-top: 1.25rem; }
  .outcome-list li { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .compare { grid-template-columns: 1fr; }
  .compare-before { border-right: 0; border-bottom: 1px solid var(--rule); }
  .dock {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem max(1rem, env(safe-area-inset-right)) max(0.7rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    border-top: 1px solid var(--rule);
    background: var(--bg);
    visibility: hidden;
    transform: translateY(110%);
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .dock.is-shown { visibility: visible; transform: none; transition-delay: 0s; }
  .dock-text { color: var(--muted); font-size: 0.88rem; line-height: 1.35; }
  .btn-dock { padding: 0.7rem 1.1rem; }
}

@media (max-width: 520px) {
  .stage-publish { grid-template-columns: 1fr; gap: 1.25rem; }
  .pub-dests { margin-left: 2.25rem; }
}

@media (max-width: 480px) {
  .signup-row { flex-direction: column; }
  .signup-row .btn { width: 100%; }
  .signup-slot { min-height: 9.2rem; }
  .pr { grid-template-columns: 3rem 1fr; }
  .tag { grid-column: 2; }
  .step-list { gap: 3rem; }
  .step { gap: 0 1rem; }
}

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

/* Privacy page */

.policy { width: min(42rem, calc(100% - 2.5rem)); margin-inline: auto; padding-block: clamp(2rem, 6vw, 4rem) clamp(4rem, 8vw, 6rem); }
.policy h1 { font: 700 clamp(2.4rem, 6vw, 3.6rem)/1.05 var(--display); letter-spacing: -0.04em; }
.policy-date { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; }
.policy h2 { margin-top: 2.5rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.policy p { margin-top: 0.75rem; color: #c3c8c2; }
.policy a { color: var(--ink); }
.policy-back { margin-top: 3rem; }