/* ==========================================================================
   heyquill.ai
   Colour is not decoration here: Quill encodes its mode as hue, and these are
   the same OKLCH values the app ships in HexCore/Models/QuillDesign.swift.
   Change them here only if they change there.
   ========================================================================== */

:root {
  /* --- Brand ramp, built on the app's brand hue (OKLCH H 292, the Auto hue) */
  --brand-50:  oklch(0.97 0.020 292);
  --brand-100: oklch(0.94 0.045 292);
  --brand-200: oklch(0.87 0.085 292);
  --brand-300: oklch(0.78 0.130 292);
  --brand-400: oklch(0.68 0.170 292);
  --brand-500: oklch(0.60 0.190 292);   /* QuillDesign.brand */
  --brand-600: oklch(0.53 0.185 292);
  --brand-700: oklch(0.45 0.165 292);

  /* --- Mode palette — QuillDesign.ModePalette, verbatim */
  --mode-auto:     oklch(0.72 0.15 292);
  --mode-dictate:  oklch(0.74 0.16 248);
  --mode-edit:     oklch(0.80 0.15  70);
  --mode-act:      oklch(0.78 0.13 188);
  --mode-resolved: oklch(0.80 0.15 150);

  /* Darkened for text/icons on a light surface (the mode hues are too light
     to read as type at their display lightness) */
  --mode-auto-ink:    oklch(0.52 0.17 292);
  --mode-dictate-ink: oklch(0.52 0.16 248);
  --mode-edit-ink:    oklch(0.55 0.13  70);
  --mode-act-ink:     oklch(0.52 0.11 188);

  /* Washes for card backgrounds */
  --mode-auto-wash:    oklch(0.965 0.030 292);
  --mode-dictate-wash: oklch(0.965 0.030 248);
  --mode-edit-wash:    oklch(0.965 0.035  70);
  --mode-act-wash:     oklch(0.965 0.030 188);

  /* --- Surfaces */
  --bg:          #ffffff;
  --bg-elev:     oklch(0.985 0.008 292);
  --bg-card:     #ffffff;
  --ink:         #1c1c1e;
  --ink-soft:    #4b4951;
  --ink-mute:    #807d86;
  --line:        rgba(28, 28, 30, 0.10);
  --line-strong: rgba(28, 28, 30, 0.18);
  --dark:        #1c1c1e;

  /* The owl's own chrome, from the avatar handoff. Kept dark on the light page
     the same way the app's HUD is dark over any wallpaper. */
  --owl-surface: rgba(20, 17, 27, 0.94);
  --owl-line:    #322b40;
  --owl-line-2:  #362e46;
  --owl-text:    #e6dfd2;
  --owl-muted:   #9d94a9;

  --serif: "Source Serif 4", Georgia, ui-serif, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, monospace;
  --pixel: "Silkscreen", "SF Mono", ui-monospace, Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(28,28,30,0.04), 0 0 0 0.5px rgba(28,28,30,0.06);
  --shadow-md: 0 8px 24px rgba(28,28,30,0.08), 0 0 0 0.5px rgba(28,28,30,0.06);
  --shadow-lg: 0 24px 60px rgba(28,28,30,0.14), 0 0 0 0.5px rgba(28,28,30,0.06);
  --shadow-brand: 0 18px 44px oklch(0.60 0.19 292 / 0.28);

  --icon-accent: var(--brand-500);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 85% 12%, oklch(0.72 0.15 292 / 0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 58%, oklch(0.74 0.16 248 / 0.12), transparent 60%),
    radial-gradient(ellipse 800px 600px at 62% 96%, oklch(0.78 0.13 188 / 0.10), transparent 60%);
  pointer-events: none;
  z-index: -2;
}

/* padding-inline, not shorthand: .col is combined with .hero and section.s,
   which set their own vertical padding. A `padding: 0 32px` here (or in a
   media query further down the file) silently zeroes theirs. */
.col { max-width: 1200px; padding-inline: 32px; margin-inline: auto; }

a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Pixel icons — the owl's grid, applied to everything else
   ========================================================================== */

[data-pixel] { display: inline-grid; place-items: center; line-height: 0; }
[data-pixel] svg { display: block; }

.pixel-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  flex-shrink: 0;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav-wrap {
  position: sticky; top: 16px; z-index: 50;
  display: flex; justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}

.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 0;
  text-decoration: none; color: var(--ink);
  border-right: 1px solid var(--line);
  margin-right: 6px;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(180deg, oklch(0.30 0.05 292), oklch(0.20 0.04 292));
  box-shadow: 0 3px 10px oklch(0.60 0.19 292 / 0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  display: grid; place-items: center;
  overflow: hidden;
}
.brand-mark canvas { display: block; image-rendering: pixelated; }
.brand-word {
  font-family: var(--serif); font-style: italic;
  font-size: 19px; font-weight: 500; letter-spacing: -0.01em;
}

.nav a.lnk {
  padding: 8px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.nav a.lnk:hover { background: rgba(28,28,30,0.05); color: var(--ink); }

.nav .cta {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  color: white; padding: 9px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 12px oklch(0.60 0.19 292 / 0.30), inset 0 1px 0 rgba(255,255,255,0.20);
  margin-left: 6px;
  transition: transform 0.12s;
}
.nav .cta:hover { transform: translateY(-1px); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: 52px 72px; text-align: center; position: relative; }
.hero::before {
  content: ""; position: absolute; left: 50%; top: 80px;
  width: 1100px; height: 700px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 30% 40%, oklch(0.72 0.15 292 / 0.28), transparent 60%),
    radial-gradient(closest-side at 70% 60%, oklch(0.60 0.19 292 / 0.16), transparent 60%);
  pointer-events: none; z-index: -1;
  filter: blur(20px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 28px;
  text-decoration: none;
}
.eyebrow .pip {
  background: var(--brand-500); color: white;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; letter-spacing: 0.06em;
}
.eyebrow .arrow { color: var(--brand-500); }

h1.head {
  font-family: var(--serif);
  font-size: clamp(56px, 7.6vw, 112px);
  line-height: 0.94; letter-spacing: -0.025em; font-weight: 500;
  margin: 0 auto 22px; max-width: 16ch;
}
h1.head em { font-style: italic; color: var(--brand-600); font-weight: 400; }
h1.head .stop { color: var(--mode-auto); }

.sub { font-size: 20px; color: var(--ink-soft); max-width: 58ch; margin: 0 auto 30px; line-height: 1.45; }

.cta-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  font-family: var(--sans);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  color: white;
  box-shadow: 0 8px 22px oklch(0.60 0.19 292 / 0.32), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px oklch(0.60 0.19 292 / 0.40); }
.btn-secondary {
  background: var(--bg-card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: white; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink-soft); padding: 14px 14px; }
.btn-ghost:hover { color: var(--ink); }

.meta { font-size: 13px; color: var(--ink-mute); }

/* ==========================================================================
   The owl stage
   The layout is the avatar handoff's overlay, one-to-one: bubble on the left,
   avatar on the right, mode pill beneath. It is the same thing the user sees
   on their desktop ten minutes after downloading, which is the whole point of
   putting it here instead of a screenshot.
   ========================================================================== */

.stage {
  margin: 44px auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
  text-align: left;
}

.stage-bubble-slot { min-height: 116px; display: flex; align-items: flex-end; justify-content: flex-end; }

/* The avatar and bubble keep the handoff's dark chrome but drop its
   backdrop-filter: on a white page a 94%-opaque surface has nothing to blur,
   and the blur only costs a compositing layer. It earns its keep in the app,
   where the panel floats over whatever wallpaper you have. */
.stage-bubble {
  width: 100%; max-width: 430px;
  margin-bottom: 26px;
  padding: 14px 18px;
  background: var(--owl-surface);
  border: 1px solid var(--owl-line-2);
  /* the small corner points at the owl */
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  display: flex; align-items: flex-start; gap: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.stage-bubble.is-visible { opacity: 1; transform: none; }

.stage-wave { display: flex; align-items: flex-end; gap: 3px; height: 20px; flex-shrink: 0; padding-top: 3px; }
.stage-wave span {
  display: block; width: 2px; height: 18px; border-radius: 1px;
  background: var(--stage-accent, var(--mode-auto));
  transform-origin: center;
  transform: scaleY(0.22);
  transition: transform 0.09s linear;
}

.stage-line {
  font-size: 14.5px; line-height: 1.45;
  color: var(--owl-text);
  min-width: 0; flex: 1;
  text-wrap: pretty;
}
.stage-caret {
  display: inline-block; width: 7px; height: 2px;
  background: var(--stage-accent, var(--mode-auto));
  vertical-align: baseline; margin-left: 3px;
  animation: caret-blink 1s steps(2) infinite;
}
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.stage-owl-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.stage-avatar {
  padding: 6px;
  border-radius: 16px;
  background: var(--owl-surface);
  border: 1px solid var(--owl-line);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  line-height: 0;
}
.stage-avatar canvas {
  display: block;
  image-rendering: pixelated;
  width: 96px; height: 96px;
}

.stage-pill {
  font-family: var(--pixel);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stage-accent, var(--owl-muted));
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--owl-surface);
  border: 1px solid #2c2539;
  transition: color 0.3s ease;
}

/* The destination card — what the app's confirmation panel is, in miniature */
.stage-result {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 18px;
  min-height: 62px;
  width: 100%; max-width: 420px;
}
.stage-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-card.is-visible { opacity: 1; transform: none; }
.stage-card .tile {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in oklab, var(--stage-accent, var(--mode-auto)) 18%, white);
}
.stage-card .lines { flex: 1; min-width: 0; }
.stage-card .a { font-size: 13.5px; font-weight: 600; }
.stage-card .b { font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
.stage-card .ok {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--mode-resolved);
  display: grid; place-items: center; flex-shrink: 0;
}

.stage-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12.5px; color: var(--ink-mute);
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ==========================================================================
   Sections
   ========================================================================== */

section.s { padding-block: 104px; }

.sec-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-600); font-weight: 700; margin-bottom: 14px; text-align: center;
}
h2.sec-title {
  font-family: var(--serif); font-size: clamp(38px, 5vw, 58px);
  line-height: 1.04; letter-spacing: -0.02em; font-weight: 500;
  margin: 0 auto 18px; max-width: 20ch; text-align: center;
}
h2.sec-title em { font-style: italic; color: var(--brand-600); }
.sec-sub {
  font-size: 18px; color: var(--ink-soft); max-width: 60ch;
  margin: 0 auto 60px; line-height: 1.5; text-align: center;
}

.band {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   Mode cards
   ========================================================================== */

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.mode-card {
  --accent: var(--brand-500);
  --accent-ink: var(--brand-600);
  --accent-wash: var(--brand-50);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 13px;
  position: relative; overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.mode-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent);
}
.mode-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.mode-card[data-mode="auto"]    { --accent: var(--mode-auto);    --accent-ink: var(--mode-auto-ink);    --accent-wash: var(--mode-auto-wash); }
.mode-card[data-mode="dictate"] { --accent: var(--mode-dictate); --accent-ink: var(--mode-dictate-ink); --accent-wash: var(--mode-dictate-wash); }
.mode-card[data-mode="edit"]    { --accent: var(--mode-edit);    --accent-ink: var(--mode-edit-ink);    --accent-wash: var(--mode-edit-wash); }
.mode-card[data-mode="act"]     { --accent: var(--mode-act);     --accent-ink: var(--mode-act-ink);     --accent-wash: var(--mode-act-wash); }

.mode-card .pixel-tile {
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
.mode-card h3 {
  font-family: var(--serif); font-size: 34px; font-weight: 500;
  letter-spacing: -0.015em; margin: 0; color: var(--accent-ink);
}
.mode-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.mode-card .said {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink); background: var(--accent-wash);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
  padding: 10px 13px; border-radius: 10px;
}
.mode-card .foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-mute); font-family: var(--mono);
}

.mode-card.is-lead { grid-column: span 3; flex-direction: row; align-items: center; gap: 32px; padding: 34px; }
.mode-card.is-lead .lead-copy { flex: 1; display: flex; flex-direction: column; gap: 13px; }
.mode-card.is-lead h3 { font-size: 44px; }
.mode-card.is-lead .lead-flow { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; width: 260px; }
.flow-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-soft);
  padding: 9px 12px; border-radius: 10px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-left: 3px solid var(--row-accent, var(--brand-500));
}
.flow-row[data-mode="dictate"] { --row-accent: var(--mode-dictate); }
.flow-row[data-mode="edit"]    { --row-accent: var(--mode-edit); }
.flow-row[data-mode="act"]     { --row-accent: var(--mode-act); }
.flow-row .k { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-left: auto; }

/* ==========================================================================
   Feature cards (agent, notes)
   ========================================================================== */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 13px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 {
  font-family: var(--serif); font-size: 25px; font-weight: 500;
  letter-spacing: -0.015em; margin: 0; line-height: 1.15;
}
.card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.card .said {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--ink-soft); border-left: 2px solid var(--brand-200);
  padding-left: 12px; margin-top: auto;
}
.card .pip {
  align-self: flex-start;
  background: var(--brand-50); color: var(--brand-700);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}

.chain { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.chain .step {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-left: 3px solid var(--mode-act);
  padding: 8px 10px; border-radius: 6px; color: var(--ink-soft);
}
.chain .step em { font-style: normal; color: var(--mode-act-ink); font-weight: 600; }

/* ==========================================================================
   Try it
   ========================================================================== */

.try-frame {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-md); max-width: 1000px; margin: 0 auto;
}
.try-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.try-bar .dots { display: flex; gap: 6px; }
.try-bar .dots span { width: 11px; height: 11px; border-radius: 50%; }
.try-bar .dots span:nth-child(1) { background: #ff5f57; }
.try-bar .dots span:nth-child(2) { background: #febc2e; }
.try-bar .dots span:nth-child(3) { background: #28c840; }
.try-bar .ttl { font-size: 12.5px; color: var(--ink-mute); margin-left: auto; font-family: var(--mono); }

.try-body { display: grid; grid-template-columns: 340px 1fr; min-height: 400px; }
.try-prompts {
  padding: 22px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; background: var(--bg-elev);
}
.try-prompts .lbl {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; padding: 0 4px 8px;
}
.pr {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--pr-accent, var(--brand-300));
  border-radius: 10px; padding: 10px 13px;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--ink-soft); cursor: pointer; text-align: left;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  font-weight: 400;
}
.pr[data-mode="auto"]    { --pr-accent: var(--mode-auto); }
.pr[data-mode="dictate"] { --pr-accent: var(--mode-dictate); }
.pr[data-mode="edit"]    { --pr-accent: var(--mode-edit); }
.pr[data-mode="act"]     { --pr-accent: var(--mode-act); }
.pr:hover { background: white; color: var(--ink); box-shadow: var(--shadow-sm); }
.pr.active {
  background: white; color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--pr-accent) 18%, transparent);
}
.pr .tag {
  margin-left: auto; font-family: var(--sans); font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pr-accent);
}

.try-stage {
  padding: 28px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 500px 320px at 50% 40%, oklch(0.72 0.15 292 / 0.10), transparent 70%);
}
.try-stage .stage { margin: 0; max-width: 100%; }
.try-stage .stage-bubble { max-width: 340px; }
.try-stage .stage-avatar canvas { width: 72px; height: 72px; }

/* ==========================================================================
   Demo video
   ========================================================================== */

.video-frame {
  max-width: 1000px; margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.video-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.video-chrome .dots { display: flex; gap: 6px; }
.video-chrome .dots span { width: 11px; height: 11px; border-radius: 50%; }
.video-chrome .dots span:nth-child(1) { background: #ff5f57; }
.video-chrome .dots span:nth-child(2) { background: #febc2e; }
.video-chrome .dots span:nth-child(3) { background: #28c840; }
.video-chrome .url { margin: 0 auto; font-size: 12.5px; color: var(--ink-mute); font-family: var(--mono); }
.video-frame video { display: block; width: 100%; height: auto; background: #000; }
.video-mute {
  position: absolute; right: 18px; bottom: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(28,28,30,0.65); color: white; border: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s, transform 0.12s;
}
.video-mute:hover { background: rgba(28,28,30,0.85); transform: scale(1.05); }

/* ==========================================================================
   Compare
   ========================================================================== */

.compare-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 16px;
}
table.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 500; }
.cmp thead th {
  background: var(--bg-elev); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft);
}
.cmp thead th a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); }
.cmp thead th a:hover { color: var(--brand-500); }
.cmp .col-quill {
  background: var(--brand-50);
  border-left: 2px solid var(--brand-200); border-right: 2px solid var(--brand-200);
}
.cmp thead .col-quill { color: var(--brand-600); font-weight: 700; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp-no { color: var(--ink-mute); }
.cmp-partial { color: var(--ink-soft); font-style: italic; font-size: 13px; }
.cmp-yes { color: var(--mode-resolved); font-weight: 700; }
.cmp-foot { text-align: center; font-size: 12px; color: var(--ink-mute); max-width: 640px; margin: 14px auto 0; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 880px; margin: 0 auto; }
.plan {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 22px; padding: 34px 30px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.plan.featured {
  border: 1px solid var(--brand-200);
  background: linear-gradient(180deg, white 0%, var(--brand-50) 100%);
  box-shadow: 0 18px 40px oklch(0.60 0.19 292 / 0.16), 0 0 0 0.5px var(--brand-200);
}
.plan-pip {
  align-self: flex-start;
  background: var(--bg-elev); color: var(--ink-soft);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
  margin-bottom: 14px; border: 1px solid var(--line);
}
.plan.featured .plan-pip { background: var(--brand-500); color: white; border-color: transparent; }
.plan h3 { font-family: var(--serif); font-size: 29px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 8px; }
.plan-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.plan-feats li b { color: var(--ink); font-weight: 600; }
.plan-feats li [data-pixel] { margin-top: 1px; flex-shrink: 0; }
.plan-feats li.off { color: var(--ink-mute); }
.plan-feats li.off .dash {
  width: 14px; text-align: center; color: var(--ink-mute); flex-shrink: 0;
}
.plan-cta { justify-content: center; width: 100%; margin-top: auto; }
.plan-foot { margin-top: 12px; font-size: 12px; color: var(--ink-mute); text-align: center; }

.pricing-note {
  max-width: 640px; margin: 28px auto 0;
  padding: 16px 20px; border-radius: 14px;
  background: var(--bg-card); border: 1px dashed var(--brand-200);
  font-size: 13.5px; color: var(--ink-soft); text-align: center; line-height: 1.55;
}

/* ==========================================================================
   Privacy strip
   ========================================================================== */

.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.privacy-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 18px;
  background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.privacy-item h3 { font-size: 15px; font-weight: 600; margin: 0; }
.privacy-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */

.final {
  margin: 40px 0 72px;
  background: var(--dark); color: white;
  border-radius: 28px; padding: 72px 56px;
  position: relative; overflow: hidden; text-align: center;
}
.final::before {
  content: ""; position: absolute; left: 50%; top: -220px;
  width: 820px; height: 820px; transform: translateX(-50%);
  background: radial-gradient(closest-side, oklch(0.72 0.15 292 / 0.42), transparent 70%);
  pointer-events: none;
}
.final > * { position: relative; }
.final .final-owl { margin: 0 auto 22px; width: 72px; height: 72px; }
.final .final-owl canvas { display: block; image-rendering: pixelated; width: 72px; height: 72px; }
.final h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 auto 14px; max-width: 16ch;
}
.final h2 em { font-style: italic; color: var(--mode-auto); }
.final p { color: rgba(255,255,255,0.72); font-size: 18px; margin: 0 auto 30px; max-width: 52ch; }
.final .btn-secondary { background: rgba(255,255,255,0.08); color: white; border-color: rgba(255,255,255,0.14); }
.final .btn-secondary:hover { background: rgba(255,255,255,0.14); }
.final .meta { color: rgba(255,255,255,0.55); margin-top: 18px; }

footer {
  padding: 28px 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink-mute); font-size: 13px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap; gap: 16px;
}
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--ink-mute); text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ==========================================================================
   Legal pages (privacy.html)
   ========================================================================== */

.doc { max-width: 760px; margin: 0 auto; padding: 60px 32px 80px; }
.doc h1 { font-family: var(--serif); font-size: 46px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 10px; }
.doc .doc-meta { color: var(--ink-mute); font-size: 13.5px; margin: 0 0 40px; }
.doc h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  letter-spacing: -0.015em; margin: 44px 0 12px;
}
.doc h3 { font-size: 15.5px; font-weight: 600; margin: 26px 0 8px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--brand-600); }
.doc .lede {
  font-size: 17px; color: var(--ink); line-height: 1.6;
  padding: 20px 22px; border-radius: 14px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
}
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.doc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}
.doc-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
}
.doc-back:hover { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .modes { grid-template-columns: 1fr 1fr; }
  .mode-card.is-lead { grid-column: span 2; }
}

@media (max-width: 900px) {
  .nav a.lnk { display: none; }
  .stage { grid-template-columns: 1fr; justify-items: center; }
  .stage-bubble-slot { justify-content: center; min-height: 0; }
  .stage-bubble { margin-bottom: 12px; max-width: 100%; border-radius: 16px 16px 16px 4px; }
  .stage-owl-col { order: -1; }
  .cards, .privacy-grid { grid-template-columns: 1fr; }
  .try-body { grid-template-columns: 1fr; }
  .try-prompts { border-right: none; border-bottom: 1px solid var(--line); }
  .final { padding: 52px 26px; }
}

@media (max-width: 720px) {
  .col { padding-inline: 20px; }
  section.s { padding-block: 76px; }
  .modes { grid-template-columns: 1fr; }
  .mode-card.is-lead { grid-column: span 1; flex-direction: column; align-items: stretch; }
  .mode-card.is-lead .lead-flow { width: 100%; }
  .plan-grid { grid-template-columns: 1fr; }
  footer { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Dark mode

   Keyed off [data-theme] rather than a prefers-color-scheme media query,
   because the app ships an Appearance control (Auto/Light/Dark) and the site
   matches it — a media query alone can't express "system is dark but I chose
   light". An inline script in <head> resolves the stored preference against
   the system setting and stamps the result before first paint, so there's no
   flash. The tokens live here exactly once; nothing is duplicated per theme.

   Trade-off: with JavaScript disabled the attribute is never stamped and the
   page renders light. Acceptable — the owl needs JS anyway — and the content
   is fully readable either way.
   ========================================================================== */

:root { color-scheme: light; }

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:          oklch(0.16 0.012 292);
    --bg-elev:     oklch(0.20 0.016 292);
    --bg-card:     oklch(0.21 0.016 292);
    --ink:         oklch(0.96 0.006 292);
    --ink-soft:    oklch(0.80 0.010 292);
    --ink-mute:    oklch(0.64 0.012 292);
    --line:        rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);
    --dark:        oklch(0.13 0.012 292);

    --brand-50:  oklch(0.26 0.045 292);
    --brand-100: oklch(0.32 0.070 292);
    --brand-200: oklch(0.42 0.110 292);
    --brand-600: oklch(0.78 0.140 292);
    --brand-700: oklch(0.86 0.100 292);

    --mode-auto-ink:    oklch(0.80 0.14 292);
    --mode-dictate-ink: oklch(0.80 0.14 248);
    --mode-edit-ink:    oklch(0.85 0.13  70);
    --mode-act-ink:     oklch(0.83 0.11 188);

    --mode-auto-wash:    oklch(0.26 0.045 292);
    --mode-dictate-wash: oklch(0.26 0.045 248);
    --mode-edit-wash:    oklch(0.27 0.045  70);
    --mode-act-wash:     oklch(0.26 0.040 188);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 0.5px rgba(255,255,255,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.42), 0 0 0 0.5px rgba(255,255,255,0.07);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.07);
}

[data-theme="dark"] .nav { background: oklch(0.21 0.016 292 / 0.82); }
[data-theme="dark"] .btn-secondary:hover { background: var(--bg-elev); }
[data-theme="dark"] .pr:hover,
[data-theme="dark"] .pr.active { background: var(--bg-card); }
[data-theme="dark"] .plan.featured { background: linear-gradient(180deg, var(--bg-card) 0%, var(--brand-50) 100%); }
[data-theme="dark"] .cmp .col-quill { background: var(--brand-50); }
[data-theme="dark"] .stage-card .tile { background: color-mix(in oklab, var(--stage-accent, var(--mode-auto)) 26%, var(--bg-card)); }

[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 900px 600px at 85% 12%, oklch(0.60 0.19 292 / 0.20), transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 58%, oklch(0.55 0.16 248 / 0.14), transparent 60%),
    radial-gradient(ellipse 800px 600px at 62% 96%, oklch(0.60 0.13 188 / 0.10), transparent 60%);
}

/* ==========================================================================
   Theme toggle — cycles Auto → Light → Dark, mirroring the app's Appearance
   control. Sized to the nav's other controls so it doesn't read as a button
   that does something to your data.
   ========================================================================== */

.theme-toggle {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  margin-left: 2px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(128, 125, 134, 0.14); color: var(--ink); }
.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 26%, transparent);
}
.theme-toggle [data-pixel] { line-height: 0; }

/* ==========================================================================
   Reduced motion — the app freezes the owl rather than hiding it
   (TimelineView(.animation(paused:))); the site does the same.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .stage-bubble, .stage-card { opacity: 1; transform: none; }
  .stage-caret { animation: none; opacity: 1; }
}