/* Paper, ink and one pencil-blue accent. Serif for writing, sans for interface. */
:root {
  --paper: oklch(97.5% 0.012 85);
  --sheet: oklch(99.3% 0.006 85);
  --wash: oklch(94.5% 0.014 85);
  --rule: oklch(88% 0.012 85);
  --rule-soft: oklch(91.5% 0.01 85);
  --ink: oklch(22% 0.01 70);
  --ink-body: oklch(32% 0.01 70);
  --ink-muted: oklch(47% 0.01 70);
  --ink-faint: oklch(60% 0.01 70);
  --accent: oklch(50% 0.13 255);
  --accent-ink: oklch(99% 0 0);
  --accent-tint: oklch(50% 0.13 255 / 0.1);
  --mark: oklch(88% 0.09 95 / 0.55);
  --ins: oklch(50% 0.11 150);
  --ins-tint: oklch(60% 0.11 150 / 0.14);
  --del: oklch(52% 0.13 25);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(17% 0.008 70);
    --sheet: oklch(20.5% 0.008 70);
    --wash: oklch(23% 0.009 70);
    --rule: oklch(30% 0.009 70);
    --rule-soft: oklch(26% 0.008 70);
    --ink: oklch(94% 0.008 85);
    --ink-body: oklch(85% 0.008 85);
    --ink-muted: oklch(70% 0.008 85);
    --ink-faint: oklch(58% 0.008 85);
    --accent: oklch(74% 0.11 255);
    --accent-ink: oklch(17% 0.008 70);
    --accent-tint: oklch(74% 0.11 255 / 0.14);
    --mark: oklch(70% 0.1 95 / 0.25);
    --ins: oklch(76% 0.11 150);
    --ins-tint: oklch(76% 0.11 150 / 0.14);
    --del: oklch(72% 0.12 25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.wrap { max-width: 720px; margin: 0 auto; padding-inline: 24px; }
.wrap-wide { max-width: 1000px; margin: 0 auto; padding-inline: 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header */
.top {
  max-width: 1000px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-block: 28px;
}
.wordmark {
  font: 600 22px/1 var(--serif); color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.top nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14.5px; }
.top nav a { color: var(--ink-muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
.top nav a.nav-cta { color: var(--accent); font-weight: 500; }

/* Hero */
.hero { padding-block: 72px 56px; }
.eyebrow { font-size: 14px; color: var(--ink-faint); margin: 0 0 18px; }
h1 {
  font: 500 clamp(44px, 8vw, 76px)/1.02 var(--serif);
  letter-spacing: -0.025em; color: var(--ink);
  margin: 0 0 24px; text-wrap: balance;
}
.lead {
  font: 400 21px/1.5 var(--serif); color: var(--ink-body);
  margin: 0 0 36px; text-wrap: pretty; max-width: 620px;
}

/* Waitlist form */
.waitlist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; }
.waitlist input, .waitlist select, .waitlist button {
  font: inherit; font-size: 15.5px; height: 48px; border-radius: 8px;
}
.waitlist input[type="email"] {
  flex: 1 1 200px; min-width: 0; padding: 0 16px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule);
}
.waitlist select {
  flex: 0 1 190px; padding: 0 12px;
  background: var(--sheet); color: var(--ink-muted); border: 1px solid var(--rule);
}
.waitlist input:focus, .waitlist select:focus, .waitlist button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.waitlist button {
  flex: 0 0 auto; padding: 0 22px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper); font-weight: 600;
}
.waitlist button:hover { background: var(--accent); color: var(--accent-ink); }
.waitlist button:disabled { opacity: 0.6; cursor: default; }
.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-status { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; min-height: 1.4em; color: var(--ink-muted); }
.form-status.ok { color: var(--ins); }
.form-status.err { color: var(--del); }

/* Manuscript */
.manuscript-wrap { padding-bottom: 24px; }
.manuscript {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 12px; padding: 36px 40px 40px;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--rule-soft);
}
.sheet-title { font: italic 500 22px var(--serif); color: var(--ink); }
.sheet-stage { font: 12.5px var(--mono); color: var(--ink-faint); }

.mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px;
  align-items: start; padding-block: 6px;
}
.mrow + .mrow { margin-top: 18px; }
.prose { font: 400 20px/1.65 var(--serif); color: var(--ink); margin: 0; }
.prose.faded { color: var(--ink-muted); }
.prose mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 2px; }
.prose del { color: var(--del); text-decoration-thickness: 1px; opacity: 0.75; }
.prose ins { text-decoration: none; background: var(--ins-tint); padding: 1px 3px; border-radius: 3px; }

.note {
  border-left: 2px solid var(--accent); padding: 2px 0 2px 16px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-body);
}
.note p { margin: 0; }
.note .note-kind {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.note-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.chip { font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-muted); }
.chip.ok { border-color: var(--ins); color: var(--ins); }

.caption { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 0; }

/* Content blocks */
.block { padding-top: 96px; }
h2 {
  font: 500 clamp(28px, 4.4vw, 36px)/1.15 var(--serif);
  letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 14px; text-wrap: balance;
}
.block-lead { font: 400 19px/1.55 var(--serif); margin: 0 0 32px; color: var(--ink-body); text-wrap: pretty; }

/* Versus */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.convo { border-radius: 12px; padding: 22px; border: 1px solid var(--rule-soft); background: var(--wash); }
.convo.studio { background: var(--sheet); border-color: var(--accent); }
.convo-label { font-size: 13px; font-weight: 600; color: var(--ink-muted); margin: 0 0 14px; }
.convo.studio .convo-label { color: var(--accent); }
.bubble { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.bubble.you { background: var(--paper); border: 1px solid var(--rule-soft); margin-left: 24px; }
.bubble.ai { background: transparent; padding-inline: 0; }
.convo.other .bubble.ai { color: var(--ink-muted); }
.convo.studio .bubble.ai { font: 400 17px/1.5 var(--serif); color: var(--ink); }

/* Learning */
.learning { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.step { background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 20px 22px; }
.when { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin: 0 0 10px; }
.sugg { font: italic 400 19px/1.45 var(--serif); color: var(--ink); margin: 0 0 12px; }
.verdict { font-size: 14px; margin: 0; }
.verdict.no { color: var(--del); }
.verdict.yes { color: var(--ins); }
.arrow { font: 28px var(--serif); color: var(--ink-faint); }

/* Promises */
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.promises li { font-size: 16px; padding-left: 20px; position: relative; }
.promises li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.promises strong { color: var(--ink); font-weight: 600; }

/* Founder */
.founder blockquote { margin: 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--rule); }
.founder blockquote p { font: 400 20px/1.6 var(--serif); color: var(--ink); margin: 0 0 16px; }
.founder blockquote footer { font-size: 14.5px; color: var(--ink-muted); }

/* FAQ */
.faq { margin: 0; }
.faq dt { font: 500 19px/1.4 var(--serif); color: var(--ink); padding-top: 20px; border-top: 1px solid var(--rule-soft); }
.faq dd { margin: 6px 0 20px; font-size: 16px; }

.closing { padding-bottom: 24px; }

.foot {
  max-width: 1000px; margin-top: 96px; padding-block: 24px 40px;
  border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-faint);
}
.foot a { color: var(--ink-muted); }

@media (max-width: 760px) {
  .hero { padding-block: 40px 40px; }
  .lead { font-size: 19px; }
  .manuscript { padding: 24px 20px 28px; }
  .mrow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .note { margin-left: 4px; }
  .prose { font-size: 18.5px; }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .learning { grid-template-columns: minmax(0, 1fr); }
  .arrow { transform: rotate(90deg); justify-self: center; }
  .block { padding-top: 72px; }
  .waitlist select, .waitlist button { flex: 1 1 100%; }
}

/* Walkthrough player */
.wrap-inner { max-width: 672px; margin: 0 auto; }
.player { margin-top: 8px; outline: none; }
.steps {
  list-style: none; margin: 0 0 12px; padding: 0 0 4px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.steps button {
  font: 500 13.5px var(--sans); white-space: nowrap; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--ink-faint);
}
.steps button.done { color: var(--ink-muted); }
.steps button[aria-selected="true"] { background: var(--sheet); border-color: var(--rule); color: var(--ink); }
.steps button:focus-visible, .ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.screen {
  display: grid; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 12px; overflow: hidden;
}
.slide {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s;
}
.slide.active { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.bar {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--rule-soft); background: var(--wash);
  font: 12.5px var(--mono); color: var(--ink-faint);
}
.bar-stage { color: var(--accent); }
.pane { display: grid; grid-template-columns: minmax(0, 1fr) 280px; flex: 1; min-height: 340px; }
.pane.single { grid-template-columns: minmax(0, 1fr); }
.main { padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.side {
  padding: 28px 24px; border-left: 1px solid var(--rule-soft); background: var(--paper);
  font-size: 14.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px;
}
.side p { margin: 0; }
.side-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.side.warn .side-kind { color: var(--del); }
.side.quiet .side-kind { color: var(--ink-faint); }
.side .count { font: 12.5px var(--mono); color: var(--ink-faint); margin-top: auto; }
.act { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.pill {
  font: 500 12.5px/1.4 var(--sans); padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-muted); background: var(--sheet);
}
.pill.primary { border-color: var(--accent); color: var(--accent); }
.pill.ok { border-color: var(--ins); color: var(--ins); }
.pill.no { border-color: var(--del); color: var(--del); }
kbd { font: 12px var(--mono); padding: 1px 6px; border: 1px solid var(--rule); border-radius: 4px; }

.main p { margin: 0; }
.page p, .chat .msg, .angle, .idea-text, .outline li, .choices li, .field, .post { font-family: var(--serif); }
.page { font-size: 18.5px; line-height: 1.6; color: var(--ink); }
.page .faded { color: var(--ink-muted); }
.page del { color: var(--del); opacity: 0.75; text-decoration-thickness: 1px; }
.page ins { text-decoration: none; background: var(--ins-tint); padding: 1px 3px; border-radius: 3px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }

.idea { padding: 14px 16px; border: 1px solid var(--rule-soft); border-radius: 10px; background: var(--paper); }
.idea:first-child { border-color: var(--accent); }
.idea-text { font-size: 18px; color: var(--ink); }
.idea-meta { font-size: 13px; color: var(--ink-faint); margin-top: 2px !important; }

.chat { max-width: 620px; }
.msg { font-size: 17px; line-height: 1.5; padding: 10px 14px; border-radius: 12px; max-width: 85%; }
.msg.ai { color: var(--ink); padding-inline: 0; }
.msg.you { align-self: flex-end; background: var(--wash); color: var(--ink-body); }
.angle {
  font: italic 500 22px/1.4 var(--serif); color: var(--ink);
  border-left: 2px solid var(--accent); padding: 4px 0 4px 16px;
}

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sources li { padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 10px; font-size: 15px; color: var(--ink); }
.src-kind { display: block; font-size: 12px; color: var(--ink-faint); margin-bottom: 2px; }

.outline { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 18px; color: var(--ink); }
.outline .flagged { text-decoration: underline wavy var(--accent); text-underline-offset: 5px; text-decoration-thickness: 1px; }

.choices { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.choices li { font-size: 17px; padding: 8px 14px; border: 1px solid var(--rule-soft); border-radius: 10px; color: var(--ink-muted); }
.choices li.picked { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.field { font-size: 17px; color: var(--ink); padding: 10px 14px; border: 1px solid var(--rule-soft); border-radius: 10px; }
.post { font-size: 16px; color: var(--ink); }

.fm { margin: 0; font: 13.5px/1.7 var(--mono); color: var(--ink-muted); background: var(--wash); padding: 16px 18px; border-radius: 10px; overflow-x: auto; }
.pr-title { font-weight: 600; color: var(--ink); }
.pr-meta { font: 12.5px var(--mono); color: var(--ink-faint); }
.pr-state { font-size: 13.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ins); color: var(--ins); align-self: flex-start; }
.pr-state.merged { background: var(--ins-tint); }

/* Staged reveal: each .rv appears in turn when its slide becomes active. */
.slide .rv { opacity: 0; transform: translateY(6px); }
.slide.active .rv { animation: reveal 0.5s ease forwards; animation-delay: calc(var(--d, 0) * 0.55s + 0.2s); }
@keyframes reveal { to { opacity: 1; transform: none; } }
.slide.active .pressed { animation: press 0.6s ease 2.6s both; }
@keyframes press { 50% { transform: scale(0.94); } }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Revise: the third paragraph moves to the top. */
.reorder { position: relative; }
.para { padding: 6px 10px; border-radius: 6px; }
.slide.active .p-c { animation: lift 1s ease 3s forwards; background: var(--mark); }
.slide.active .p-a, .slide.active .p-b { animation: drop 1s ease 3s forwards; }
@keyframes lift { to { transform: translateY(calc(-200% - 24px)); } }
@keyframes drop { to { transform: translateY(calc(100% + 12px)); } }

.controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ctl {
  font: 500 13.5px var(--sans); min-width: 40px; height: 34px; padding: 0 12px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
}
.counter { font: 12.5px var(--mono); color: var(--ink-faint); margin-left: auto; }
.wt-caption { font: 400 18px/1.5 var(--serif); color: var(--ink-body); margin: 14px 0 0; min-height: 3em; max-width: 720px; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.active { transition: none; }
  .slide .rv, .slide.active .rv { opacity: 1; transform: none; animation: none; }
  .slide.active .p-a, .slide.active .p-b, .slide.active .p-c, .slide.active .pressed, .caret { animation: none; }
}

@media (max-width: 760px) {
  .pane { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .side { border-left: 0; border-top: 1px solid var(--rule-soft); padding: 20px; }
  .main { padding: 22px 20px; }
  .page { font-size: 17px; }
  .slide.active .p-c, .slide.active .p-a, .slide.active .p-b { animation: none; }
}