/* Layout: paper page with two ink "stages" where olli acts (the hero demo and "It asks first"),
   a sticky-phone story of real footage between them. Black and white throughout; amber is only a
   hint, on olli's waiting dot and the caret. */
:root {
  --bg: #F5F5F2;
  --card: #FFFFFF;
  --ink: #0B0B0C;
  --ink-2: #3A3936;
  --muted: #6E6C67;
  --line: #E3E2DD;
  --line-2: #D1CFC9;
  --amber: #F4C06A;
  --focus: #0B0B0C;
  --error: #B42318;

  --stage: #0E0E10;
  --stage-edge: #0E0E10;
  --stage-2: #18181B;
  --stage-fg: #F5F5F2;
  --stage-muted: #A3A19B;
  --stage-soft: #76746F;
  --stage-line: #2A2A2E;

  --thread-bg: #FFFFFF;
  --thread-edge: #FFFFFF;
  --thread-fg: #0B0B0C;
  --thread-muted: #6E6C67;
  --thread-line: #EAE9E4;
  --thread-line-2: #D6D4CE;
  --thread-card: #FAFAF8;
  --you-bg: #0B0B0C;
  --you-fg: #F5F5F2;
  --olli-bg: #EFEEEA;
  --olli-fg: #0B0B0C;

  --bezel: #0B0B0C;
  --bezel-ring: #0B0B0C;
  --stage-bezel: #1E1E21;
  --stage-ring: #3A3A3F;
  --screen: #FFFFFF;
  --phone-shadow: 0 1px 2px rgb(11 11 12 / 0.08), 0 32px 64px -32px rgb(11 11 12 / 0.38);
  --scrim: rgb(11 11 12 / 0.72);
  --scrim-fg: #F5F5F2;

  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(3rem, 1.5rem + 4.4vw, 5.75rem);
  --fs-h2: clamp(2.5rem, 1.4rem + 3.8vw, 4.75rem);
  --fs-h3: clamp(1.875rem, 1.35rem + 1.6vw, 3rem);
  --fs-title: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  --gutter: clamp(16px, 3.4vw, 40px);
  --max: 1200px;
  --sec: clamp(88px, 11vw, 168px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C;
    --card: #141416;
    --ink: #F5F5F2;
    --ink-2: #D2D0CA;
    --muted: #9C9A94;
    --line: #242427;
    --line-2: #34343A;
    --amber: #F4C06A;
    --focus: #F5F5F2;
    --error: #F87171;
    --stage: #141416;
    --stage-edge: #26262A;
    --stage-2: #1C1C1F;
    --stage-fg: #F5F5F2;
    --stage-muted: #A3A19B;
    --stage-soft: #77756F;
    --stage-line: #2C2C30;
    --thread-bg: #1B1B1E;
    --thread-edge: #2C2C30;
    --thread-fg: #F5F5F2;
    --thread-muted: #A3A19B;
    --thread-line: #2A2A2E;
    --thread-line-2: #3A3A3F;
    --thread-card: #222225;
    --you-bg: #F5F5F2;
    --you-fg: #0B0B0C;
    --olli-bg: #2C2C30;
    --olli-fg: #F5F5F2;
    --bezel: #000000;
    --bezel-ring: #3A3A40;
    --stage-bezel: #222226;
    --stage-ring: #46464D;
    --screen: #FFFFFF;
    --phone-shadow: 0 32px 64px -32px rgb(0 0 0 / 0.9);
    --scrim: rgb(0 0 0 / 0.72);
    --scrim-fg: #F5F5F2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0B0C;
  --card: #141416;
  --ink: #F5F5F2;
  --ink-2: #D2D0CA;
  --muted: #9C9A94;
  --line: #242427;
  --line-2: #34343A;
  --amber: #F4C06A;
  --focus: #F5F5F2;
  --error: #F87171;
  --stage: #141416;
  --stage-edge: #26262A;
  --stage-2: #1C1C1F;
  --stage-fg: #F5F5F2;
  --stage-muted: #A3A19B;
  --stage-soft: #77756F;
  --stage-line: #2C2C30;
  --thread-bg: #1B1B1E;
  --thread-edge: #2C2C30;
  --thread-fg: #F5F5F2;
  --thread-muted: #A3A19B;
  --thread-line: #2A2A2E;
  --thread-line-2: #3A3A3F;
  --thread-card: #222225;
  --you-bg: #F5F5F2;
  --you-fg: #0B0B0C;
  --olli-bg: #2C2C30;
  --olli-fg: #F5F5F2;
  --bezel: #000000;
  --bezel-ring: #3A3A40;
  --stage-bezel: #222226;
  --stage-ring: #46464D;
  --screen: #FFFFFF;
  --phone-shadow: 0 32px 64px -32px rgb(0 0 0 / 0.9);
  --scrim: rgb(0 0 0 / 0.72);
  --scrim-fg: #F5F5F2;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.site { padding-inline: var(--gutter); padding-block: 0; overflow-x: clip; }
.wrap { max-width: var(--max); margin-inline: auto; }

.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; }
.serif em { font-style: italic; letter-spacing: -0.02em; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* The tagline's two phrases are set in italic. */
.mark-hl { font-style: italic; letter-spacing: -0.02em; }
.caret {
  display: inline-block; width: 0.055em; height: 0.8em; margin-left: 0.12em;
  background: var(--amber); vertical-align: -0.06em;
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity .15s ease, transform .1s ease;
}
.btn:hover { opacity: .86; }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 36px; padding: 0 14px; font-size: var(--fs-xs); border-radius: 9px; }

.signup { display: grid; gap: 10px; }
.signup .btn { justify-self: start; }
.form-note { font-size: var(--fs-xs); color: var(--muted); }

/* Stages: where olli acts */
.stage {
  background: var(--stage); color: var(--stage-fg);
  border: 1px solid var(--stage-edge);
  border-radius: clamp(22px, 3vw, 36px);
  padding: clamp(22px, 5vw, 72px);
  --focus: var(--stage-fg);
  --bezel: var(--stage-bezel);
  --bezel-ring: var(--stage-ring);
  --phone-shadow: none;
}
.stage ::selection { background: var(--stage-fg); color: var(--stage); }
.stage .btn { background: var(--stage-fg); border-color: var(--stage-fg); color: var(--stage); }
.stage .eyebrow { color: var(--stage-muted); }
.stage .form-note { color: var(--stage-muted); }

/* Phone: drawn bezel, real footage inside (the footage includes the status bar). */
.phone { --w: 300px; position: relative; width: var(--w); max-width: 100%; container-type: inline-size; }
.bezel { padding: 3.3cqw; border-radius: 17cqw; background: var(--bezel); box-shadow: 0 0 0 1px var(--bezel-ring), var(--phone-shadow); }
.screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: 13.8cqw; overflow: hidden; isolation: isolate; background: var(--screen); }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen video.layer { opacity: 0; transition: opacity .35s ease; }
.screen video.layer.on { opacity: 1; }
.vt {
  position: absolute; right: 7cqw; bottom: 7cqw; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: 0; padding: 0;
  background: var(--scrim); color: var(--scrim-fg);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity .2s ease;
}
.vt svg { width: 14px; height: 14px; fill: currentColor; }
.vt .i-play { display: none; }
.phone[data-state="paused"] .vt .i-play { display: block; }
.phone[data-state="paused"] .vt .i-pause { display: none; }
.phone:hover .vt, .vt:focus-visible, .phone[data-user="1"] .vt, .rm .vt { opacity: 1; }

/* Chat vernacular */
.bubble { display: inline-block; max-width: 100%; padding: 8px 13px; border-radius: 18px; font-size: var(--fs-small); line-height: 1.35; }
.bubble.you { background: var(--you-bg); color: var(--you-fg); border-bottom-right-radius: 6px; }
.bubble.olli { background: var(--olli-bg); color: var(--olli-fg); border-bottom-left-radius: 6px; }
.waiting { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; animation: wait 2.4s ease-in-out infinite; }
@keyframes wait { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.pill { font-size: var(--fs-label); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; opacity: .7; white-space: nowrap; }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 8px; }
.mark { width: 28px; height: 28px; flex: none; }
.mark .m-disc { fill: var(--ink); }
.mark .m-o { fill: var(--bg); }
.wordmark { height: 17px; width: auto; fill: currentColor; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-meta { font-size: var(--fs-xs); color: var(--muted); }

/* Hero */

.hero-grid { display: grid; gap: 40px 64px; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }
.hero-copy { display: grid; gap: 28px; min-width: 0; }
.hero h1 { font-size: var(--fs-hero); line-height: 1; }
.hero h1 > span:last-child, .band-head h2 > span:last-child { margin-top: 0.1em; }
.hero h1 > span { display: block; }
.hero .h1-a { color: var(--stage-soft); }
.lede { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.5; color: var(--stage-muted); max-width: 44ch; }

/* Demo thread */
.demo-wrap { display: grid; gap: 12px; min-width: 0; }
.demo {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 700px; border-radius: 28px; overflow: hidden;
  background: var(--thread-bg); color: var(--thread-fg);
  box-shadow: 0 0 0 1px var(--thread-edge);
  --focus: var(--thread-fg);
}
.demo-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--thread-line); }
.demo-head .mark { width: 30px; height: 30px; }
.demo-head .mark .m-disc { fill: var(--thread-fg); }
.demo-head .mark .m-o { fill: var(--thread-bg); }
.demo-name { display: grid; line-height: 1.2; }
.demo-name b { font-weight: 600; font-size: var(--fs-small); }
.demo-name span { font-size: var(--fs-label); color: var(--thread-muted); }
.demo-head .pill { margin-left: auto; color: var(--thread-muted); font-family: var(--font-mono); letter-spacing: .02em; opacity: 1; border-color: var(--thread-line-2); }
.thread { overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 5px; }
.thread > * { flex: none; }
.msg { max-width: 84%; padding: 9px 14px; border-radius: 19px; font-size: var(--fs-small); line-height: 1.38; }
.msg.you { align-self: flex-end; background: var(--you-bg); color: var(--you-fg); border-bottom-right-radius: 6px; }
.msg.olli { align-self: flex-start; background: var(--olli-bg); color: var(--olli-fg); border-bottom-left-radius: 6px; }
.thread .turn { margin-top: 12px; }
.thread .turn:first-child { margin-top: auto; }
.tcard {
  align-self: flex-start; width: min(100%, 360px);
  border: 1px solid var(--thread-line); border-radius: 18px; background: var(--thread-card);
  padding: 12px 14px; display: grid; gap: 8px; font-size: var(--fs-small);
}
.tcard .meta { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--thread-muted); display: flex; justify-content: space-between; gap: 10px; }
.tcard .ttl { font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.tcard .sub { color: var(--thread-muted); font-size: var(--fs-xs); }
.tcard .live { display: inline-flex; align-items: center; gap: 6px; }
.tcard .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--thread-fg); opacity: .5; }
.route { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.route i { flex: 1; height: 1px; background: var(--thread-line-2); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 16px; font-size: var(--fs-xs); }
.facts dt { color: var(--thread-muted); }
.facts.two { grid-template-columns: auto minmax(0, max-content) auto minmax(0, max-content); column-gap: 14px; justify-content: start; }
.facts.two dd { margin-right: 10px; }
.facts dd { font-variant-numeric: tabular-nums; }
.ok[data-state="waiting"] { border-color: var(--thread-line-2); }
.ok-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--thread-muted); }
.ok-head .pill { opacity: 1; border-color: var(--thread-line-2); }
.ok-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ok-btn {
  height: 40px; border-radius: 11px; cursor: pointer; font-size: var(--fs-small); font-weight: 500;
  border: 1px solid var(--thread-line-2); background: transparent; color: var(--thread-fg);
  transition: background-color .15s ease, filter .15s ease, transform .1s ease;
}
.ok-btn:hover { background: var(--thread-line); }
.ok-btn:active { transform: translateY(1px); }
.ok-btn.allow { background: var(--thread-fg); border-color: var(--thread-fg); color: var(--thread-bg); }
.ok-btn.allow:hover { background: var(--thread-fg); opacity: .86; }
.ok-done { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 500; }
.ok-done svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ok-fine { font-size: var(--fs-label); color: var(--thread-muted); }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 19px; border-bottom-left-radius: 6px; background: var(--olli-bg); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--olli-fg); opacity: .35; animation: typing 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: .8; transform: translateY(-2px); } }
.enter { animation: enter .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.demo-foot { border-top: 1px solid var(--thread-line); padding: 12px 14px 14px; display: grid; gap: 8px; }
.demo-foot p { font-size: var(--fs-label); color: var(--thread-muted); font-family: var(--font-mono); letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--thread-line-2); background: transparent; color: var(--thread-fg);
  border-radius: 999px; padding: 7px 13px; font-size: var(--fs-xs); line-height: 1.3; cursor: pointer; text-align: left;
  transition: background-color .15s ease, border-color .15s ease;
}
.chip:hover { background: var(--thread-line); }
.chip[aria-pressed="true"] { background: var(--thread-fg); border-color: var(--thread-fg); color: var(--thread-bg); }
.demo-note { font-size: var(--fs-xs); color: var(--stage-muted); }

/* Story: sticky phone, real footage */
.story { padding-block: var(--sec) 0; }
.sec-head { display: grid; gap: 16px; max-width: 760px; }
.sec-head h2 { font-size: var(--fs-h2); line-height: 1; }
.sec-head p { color: var(--ink-2); max-width: 54ch; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 0 64px; margin-top: clamp(24px, 4vw, 48px); }
.sstep { min-height: 64vh; display: grid; align-content: center; gap: 14px; padding-block: 40px; min-width: 0; }
.sstep:first-child { min-height: 60vh; }
.chapter { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sstep h3 { font-size: var(--fs-h3); line-height: 1.04; color: var(--muted); transition: color .3s ease; max-width: 16ch; }
.sstep > p { color: var(--muted); max-width: 44ch; transition: color .3s ease; }
.sstep .bubble, .sstep .credit { justify-self: start; }
.sstep .credit { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); letter-spacing: .02em; }
.sstep.on h3 { color: var(--ink); }
.sstep.on > p { color: var(--ink-2); }
.sstep-phone { display: none; }
.story-side { position: relative; }
.story-phone {
  --pw: min(300px, calc((100vh - 170px) / 2.24));
  position: sticky; top: calc(50vh - (var(--pw) * 2.24 + 56px) / 2);
  display: grid; justify-items: center; gap: 22px; padding-block: 8vh;
}
.story-phone .phone { --w: var(--pw); }
.ticks { display: flex; gap: 2px; }
.tick { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.tick::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background-color .2s ease, width .2s ease; }
.tick:hover::before { background: var(--muted); }
.tick[aria-current="true"]::before { background: var(--ink); width: 22px; }

/* It asks first */
.band { margin-top: var(--sec); }
.band-head { display: grid; gap: 22px; }
.band-head h2 { font-size: clamp(3rem, 1.3rem + 6vw, 7rem); line-height: 1; }
.band-head h2 > span { display: block; }
.band-head .q { color: var(--stage-soft); }
.band-head p { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); color: var(--stage-muted); max-width: 48ch; }
.approve, .handoff, .promise-row { display: grid; gap: 48px 80px; align-items: center; }
.approve { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); margin-top: clamp(56px, 7vw, 104px); }
.handoff { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); margin-top: clamp(88px, 10vw, 144px); }
.promise-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-top: clamp(88px, 10vw, 144px); }
.approve .phone, .handoff .phone { --w: 310px; justify-self: center; }
.band-copy { display: grid; gap: 18px; min-width: 0; }
.band-copy h3 { font-size: var(--fs-h3); line-height: 1.05; }
.band-copy > p { color: var(--stage-muted); max-width: 46ch; }
.anatomy { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--stage-line); }
.anatomy > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; padding-block: 16px; border-bottom: 1px solid var(--stage-line); }
.anatomy dt { color: var(--stage-muted); font-size: var(--fs-small); }
.anatomy dd { font-size: var(--fs-small); }
.anatomy .waiting { color: var(--stage-fg); }
.key { display: inline-block; padding: 1px 9px; border-radius: 7px; background: var(--stage-fg); color: var(--stage); font-weight: 500; font-size: .92em; }
.key.ghost { background: transparent; color: var(--stage-fg); border: 1px solid var(--stage-line); }

/* Memory demo */
.mem { border: 1px solid var(--stage-line); border-radius: 22px; background: var(--stage-2); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.mem-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mem-head h4 { font-size: var(--fs-title); font-weight: 500; letter-spacing: -0.015em; }
.mem-head .pill { color: var(--stage-muted); font-family: var(--font-mono); letter-spacing: .02em; opacity: 1; border-color: var(--stage-line); }
.mem-sub { font-size: var(--fs-xs); color: var(--stage-muted); }
.mem-list { display: grid; border-top: 1px solid var(--stage-line); }
.mem-row { position: relative; border-bottom: 1px solid var(--stage-line); overflow: hidden; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease, opacity .25s ease; }
.mem-row > .mem-inner { min-height: 0; }
.mem-row.gone { grid-template-rows: 0fr; opacity: 0; border-bottom-color: transparent; }
.mem-line { display: flex; align-items: center; gap: 12px; padding-block: 12px; touch-action: pan-y; transition: transform .2s ease; }
.mem-line.dragging { transition: none; }
.mem-main { display: grid; gap: 5px; min-width: 0; flex: 1; }
.mem-t { font-size: var(--fs-small); }
.tag { justify-self: start; font-size: var(--fs-label); color: var(--stage-muted); border: 1px solid var(--stage-line); border-radius: 6px; padding: 1px 7px; }
.mem-forget {
  flex: none; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--stage-line); background: transparent; color: var(--stage-fg); font-size: var(--fs-xs);
  transition: border-color .15s ease, background-color .15s ease;
}
.mem-forget:hover { border-color: var(--stage-muted); }
.mem-confirm { display: grid; gap: 10px; padding: 0 0 14px; }
.mem-confirm p { font-size: var(--fs-xs); color: var(--stage-muted); }
.mem-confirm div { display: flex; gap: 8px; }
.mem-confirm button { height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer; font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--stage-line); background: transparent; color: var(--stage-fg); }
.mem-confirm .del { background: var(--stage-fg); border-color: var(--stage-fg); color: var(--stage); }
.mem-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--stage-muted); min-height: 32px; }
.mem-reset { border: 0; background: none; padding: 6px 0; color: var(--stage-fg); text-decoration: underline; text-decoration-color: var(--stage-muted); text-underline-offset: 4px; cursor: pointer; font-size: var(--fs-xs); }
.promises { display: grid; gap: 0; margin-top: 6px; }
.promises li { display: grid; gap: 6px; align-content: start; padding-block: 18px; border-top: 1px solid var(--stage-line); }
.promises b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); line-height: 1.1; letter-spacing: -0.01em; }
.promises span { font-size: var(--fs-small); color: var(--stage-muted); }

/* Film */
.film-sec { padding-block: var(--sec) 0; }
.film-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.film-top p { font-size: var(--fs-small); color: var(--muted); }
.film { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 24px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: var(--card); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play {
  position: absolute; left: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px);
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 20px 0 8px; border: 0; border-radius: 999px;
  background: var(--stage); color: var(--stage-fg); cursor: pointer;
  font-size: var(--fs-small); font-weight: 500; transition: transform .1s ease;
  --focus: var(--ink);
}
.film-play:active { transform: translateY(1px); }
.film-play .tri { width: 32px; height: 32px; border-radius: 50%; background: var(--stage-fg); display: grid; place-items: center; transition: transform .2s ease; }
.film-play:hover .tri { transform: scale(1.06); }
.film-play .tri svg { width: 12px; height: 12px; fill: var(--stage); margin-left: 2px; }
.film-play .dur { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .6; font-weight: 400; }
.film[data-playing="1"] .film-play { display: none; }

/* Early access */
.cta { padding-block: var(--sec); }
.cta-grid { display: grid; gap: 28px; max-width: 540px; }
.cta-head { display: grid; gap: 22px; justify-items: start; }
.cta-head img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 1px var(--line); }
.cta-head h2 { font-size: var(--fs-h2); line-height: 1; }
.cta-head p { color: var(--ink-2); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 36px 48px; display: grid; gap: 24px 48px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.foot-brand { display: grid; gap: 14px; justify-items: start; }
.foot-brand p { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; }
.foot-meta a { color: var(--muted); text-underline-offset: 3px; }
.foot-meta a:hover { color: var(--ink); }
.foot-meta { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--muted); text-align: right; }

/* Responsive */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-wrap { max-width: 560px; }
}
@media (max-width: 899px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-side { display: none; }
  .sstep, .sstep:first-child { min-height: 0; padding-block: 36px; gap: 14px; }
  .sstep h3, .sstep > p { color: var(--ink); }
  .sstep > p { color: var(--ink-2); }
  .sstep-phone { display: block; margin-top: 12px; }
  .sstep-phone .phone { --w: 250px; }
  .approve, .handoff, .promise-row { grid-template-columns: minmax(0, 1fr); }
  .handoff .phone { order: 2; }
}
@media (max-width: 639px) {
  .nav-meta { display: none; }
  .demo { height: 640px; border-radius: 22px; }
  .facts.two { grid-template-columns: auto minmax(0, 1fr); }
  .facts.two dd { margin-right: 0; }
  .signup .btn { width: 100%; justify-self: stretch; }
  .anatomy > div { grid-template-columns: minmax(0, 1fr); }
  .film-play { height: 40px; padding: 0 14px 0 5px; gap: 8px; }
  .film-play .tri { width: 30px; height: 30px; }
  .film-play .lbl { display: none; }
  .film-play .dur { opacity: .8; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot-meta { text-align: left; }
  .mem { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .caret, .typing i { animation: none; }
  .enter { animation: none; }
  .screen video.layer, .mem-row, .mem-line, .sstep h3, .sstep > p { transition: none; }
}