/* =============================================================================
 * kivi — heykivi.ai
 * One page, the launch deck's language: cream paper, one green accent, gold as
 * invitation, lowercase everything, mono for data only. Hand-written; no build
 * step.
 *
 * Laws carried over from the app's design system (KIVI-DESIGN-SPEC v2):
 *   · one accent per surface, <=8% coverage. accent is ink; washes are lighter.
 *   · lowercase product copy. no ALL-CAPS, no title case, no exclamation marks.
 *   · no pills/badges for state or category — text, underline, hairline, dot.
 *   · mono is DATA only: counts, versions, sizes, timestamps, handles.
 *   · one radius system: 4 micro / 8 controls+cards / 12 sheets.
 *   · flat layering: raised = surface + 1px hairline, no shadow.
 *   · nothing moves without user cause; motion is transform/opacity only.
 *
 * Type roles, one per job — the page never uses a face for two things:
 *   Season Mix  — section marques, and the hero statement. nothing else.
 *   Space Grotesk — sub-headings inside a section (steps, rows, legal h2).
 *   Plus Jakarta Sans — all body copy, and text shown as if inside an app.
 *   Petrona italic — words a human said out loud, and the footer sign-off.
 *   Matter SemiMono — data only: versions, counts, addresses, step numbers.
 *
 * Structure grammar (v5, the pinned-beat story): four acts each own a pinned
 * screen, so the "one layout family per page" law is re-scoped to "no two
 * adjacent acts share a composition" — see the note above the story block.
 * privacy = heading beside statements · plans = the one card pair, because a
 * boxed side-by-side comparison is the actual affordance.
 *
 * Type and space both come from named scales in :root. No off-ladder values.
 * ========================================================================== */

/* ------------------------------------------------------------------ fonts
   woff2 only. Five families, one weight range each, zero unused weights.
   Petrona ships italic-only on purpose: no upright Petrona is used anywhere in
   this stylesheet, so the roman file was dead weight and is gone. If you ever
   set --font-serif upright, add the roman face back with it. */
@font-face {
  font-family: "Season Mix";
  src: url("../fonts/SeasonMix-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Petrona";
  src: url("../fonts/Petrona-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Matter SemiMono";
  src: url("../fonts/MatterSemiMonoRegular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --------------------------------------------------- metric-tuned fallbacks
   One face per real font, built from the real tables (fontTools) so the swap
   from fallback to webfont does not move a single line. size-adjust equalises
   x-height against the named system font; the ascent/descent overrides are
   divided by that same factor because they are read relative to the adjusted em.
   Generated values, not guesses: see the note in README. */
@font-face {
  font-family: "Season Mix fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 107.8%;
  ascent-override: 90.4%;
  descent-override: 23.6%;
  line-gap-override: 0.0%;
}
@font-face {
  font-family: "Petrona fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 92.0%;
  ascent-override: 93.2%;
  descent-override: 29.3%;
  line-gap-override: 0.0%;
}
@font-face {
  font-family: "Plus Jakarta Sans fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 102.5%;
  ascent-override: 101.3%;
  descent-override: 21.7%;
  line-gap-override: 0.0%;
}
@font-face {
  font-family: "Space Grotesk fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 92.9%;
  ascent-override: 105.9%;
  descent-override: 31.4%;
  line-gap-override: 0.0%;
}
@font-face {
  font-family: "Matter SemiMono fallback";
  src: local("Menlo"), local("Consolas"), local("Courier New");
  size-adjust: 92.2%;
  ascent-override: 103.1%;
  descent-override: 26.0%;
  line-gap-override: 0.0%;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* canvas & surfaces — cream paper */
  --canvas: #F6F3EA;
  --surface1: #FCFAF3;
  --surface2: #FFFFFF;

  /* ink ramp. STORYBOARD v3 grammar 8: muted labels move up a contrast step, and
     ink2 is the FLOOR for anything meant to be read. Both muted steps were
     darkened when the flat cream slabs became per-scene backdrop washes: the
     ratios below are measured against the lightest scene sky WITH its glow at
     full strength, not against the old flat canvas.
       ink2 on the brightest wash  5.1:1     ink3 on the brightest wash  4.7:1 */
  --ink1: #20241F;
  --ink2: #545C4C;
  --ink3: #5A6154;

  /* the single accent + its wash. The wash is the green Pranav kept: it marks a
     spoken address fusing, a term being preserved, and a learned name. */
  --accent: #177423;
  --accent-decor: #4D8D0D;
  --accent-wash: rgba(144, 196, 106, 0.32);

  /* structure */
  --hairline: rgba(32, 36, 31, 0.14);
  --hairline-strong: rgba(32, 36, 31, 0.26);

  /* gold — a quiet invitation, never a warning.
     Darkened from #B98A2E, which measured 2.98:1 against surface1 and so missed
     the 3:1 floor for a non-text boundary by a rounding error. */
  --annotation: #B08225;

  /* forest — the dark bands */
  --forest: #0C0E0C;
  --forest-ink1: #E9E7DD;
  --forest-ink2: #A7A99E;
  --forest-ink3: #84887D;
  --forest-accent: var(--brand-green);
  --forest-hairline: rgba(255, 255, 255, 0.10);

  /* brand constants — the locked palette. --forest-accent above is the same
     green; it points here so there is one source for it. */
  --brand-green: #90C46A;
  --keycap-ink: #F6F3EA;

  /* faces, each followed by its metric-tuned fallback */
  --font-marque: "Season Mix", "Season Mix fallback", Georgia, serif;
  --font-title: "Space Grotesk", "Space Grotesk fallback", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Plus Jakarta Sans fallback", system-ui, -apple-system, sans-serif;
  --font-serif: "Petrona", "Petrona fallback", Georgia, serif;
  --font-mono: "Matter SemiMono", "Matter SemiMono fallback", ui-monospace, SFMono-Regular, monospace;

  /* TYPE SCALE — six roles, and every piece of text on the page is one of them.
     rem throughout, so a reader's own font-size setting still scales the page.
     A seventh style needs a role name and a line in this block before it needs
     any CSS. Ratios: marque 2.4x title, title 1.23x lead, lead 1.29x body.
       monument act one's three words: hold fn, talk, done      48 -> 88px
       marque  section display, Season Mix                     38 -> 64px
       title   h3 inside a section, Space Grotesk              22 -> 27px
       lead    the subhead under a marque, and the priv lines  19 -> 22px
       body    every paragraph, chip and list item             17px
       small   labels, metadata, fine print                    15px */
  /* the seventh role, and the only one the story page added: act one's three
     beats. One or two words each, no descenders, which is why they run this
     large and why nothing else on the page is allowed to use it. */
  --t-monument: clamp(3rem, 8vw, 5.5rem);
  --t-marque: clamp(2.375rem, 6vw, 4rem);
  --t-title: clamp(1.375rem, 2.4vw, 1.6875rem);
  --t-lead: clamp(1.1875rem, 2.1vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  /* control labels are sized by the control, not by the text hierarchy */
  --t-control: 1.0625rem;
  --t-control-lg: 1.25rem;

  /* SPACING SCALE — 4px base, no value off this ladder. Rhythm comes from
     picking tight steps inside a group and generous ones between groups. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* geometry */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --col: 1180px;
  --nav-h: 72px;

  /* MOTION — one curve, four durations, and exits are always the fast one.
     Entrances get --dur-fast/standard/settle by weight of the change; anything
     leaving uses --dur-exit, which is deliberately shorter than all of them. */
  --dur-exit: 90ms;
  --dur-fast: 120ms;
  --dur-standard: 200ms;
  --dur-settle: 300ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
/* auto, and important on purpose: CSS smooth scrolling fights ScrollTrigger's
   refresh measurement and the snap engine. Anchor jumps land instantly. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 4px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent-wash); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
/* On the dark grounds the accent green ring only reaches 3.28:1. The light
   brand green clears 9.4:1 there, and the 3px offset keeps a band of background
   between the ring and the green button fill so the two never merge. */
.hero :focus-visible,
.band :focus-visible,
.foot :focus-visible { outline-color: var(--forest-accent); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* every in-page anchor target clears the sticky header when jumped to */
:target, [id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }

/* skip link — keyboard first thing on the page */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink1); color: var(--canvas);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--t-small);
}
.skip:focus { left: 0; text-decoration: none; }

/* ------------------------------------------------------------- primitives */
.wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 clamp(var(--sp-4), 5vw, var(--sp-7)); }

/* the one lowercase marque. no wash, no sweep — the face carries it. */
.marque {
  display: inline-block;
  /* inline-block is blockified inside a column flex parent, and the default
     align-items:stretch then makes it full width. flex-start keeps it hugging
     its own text, which matters for the underline on focus. */
  align-self: flex-start;
  font-family: var(--font-marque);
  font-weight: 500;
  font-size: var(--t-marque);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  text-wrap: balance;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ink2);
  max-width: 62ch;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--ink3);
}
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* a physical key, for the one key this product has */
.key {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.84em;
  padding: 1px 9px 2px;   /* optical, not spacing: a keycap's own proportions */
  background: var(--surface2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xs);
  color: var(--ink1);
  vertical-align: 0.06em;
}

/* sections — generous, quiet rhythm */
.section { padding: clamp(var(--sp-8), 11vh, var(--sp-10)) 0; }
.section--tight { padding: clamp(var(--sp-7), 8vh, var(--sp-9)) 0; }
/* tight between a heading and its own subhead, generous before the content */
.section-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: clamp(var(--sp-6), 6vw, var(--sp-8)); }

/* the one action control — the accent keycap recipe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--accent);
  color: var(--keycap-ink);
  border: 0; border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--t-control); font-weight: 600;
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  /* transform is the only animated property: compositor-only, no paint work.
     The brightness step is not transitioned at all, so it lands instantly the
     way a real control should. Base duration is the exit; :hover lengthens it. */
  transition: transform var(--dur-exit) var(--ease);
}
.btn:hover { text-decoration: none; color: var(--keycap-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(0.93); transform: translateY(-1px); transition-duration: var(--dur-fast); }
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-exit); }
.btn--lg { font-size: var(--t-control-lg); padding: var(--sp-5) var(--sp-7); }
.btn--ghost {
  background: none;
  color: var(--ink1);
  border: 1px solid var(--hairline-strong);
}
.btn--ghost:hover { filter: none; color: var(--ink1); border-color: var(--ink1); }
.btn--ghost { transition: transform var(--dur-exit) var(--ease); }
.btn--cream { background: var(--forest-accent); color: #0B2131; }
.btn--cream:hover { color: #0B2131; }

/* the apple mark inside the download button */
.btn svg { flex: none; }

/* raised card — fill + hairline, never a shadow */
.card {
  background: var(--surface1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 243, 234, 0.86);
  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
}
/* the hairline fades in on its own layer: opacity is compositor-only, where a
   border-color transition would repaint the whole sticky bar every frame */
.nav::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity var(--dur-exit) var(--ease);
  pointer-events: none;
}
.nav.is-scrolled::after { opacity: 1; transition-duration: var(--dur-standard); }
.nav-in {
  display: flex; align-items: center; gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  height: var(--nav-h);
}
.nav-mark { display: flex; align-items: center; }
.nav-mark img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(var(--sp-4), 2.6vw, var(--sp-6)); margin-left: auto; }
/* :not(.btn) — a bare `.nav-links a` rule out-specifies .btn and would
   repaint the download button's cream label in body ink */
.nav-links a:not(.btn) {
  /* ink1 at 68% reads as ink2 on cream, and lets hover animate opacity rather
     than colour, which keeps it off the paint path */
  color: var(--ink1);
  opacity: .68;
  font-size: var(--t-body);
  transition: opacity var(--dur-exit) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.btn):hover { opacity: 1; transition-duration: var(--dur-fast); }
}
.nav-links a:not(.btn):hover { text-decoration: none; }
.nav .btn { padding: var(--sp-3) var(--sp-5); font-size: var(--t-body); }
@media (max-width: 780px) {
  .nav-links a:not(.btn) { display: none; }
  .nav-links { margin-left: auto; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  /* header + hero = exactly one viewport at common sizes. svh, not vh, so a
     mobile browser's collapsing toolbar cannot push the CTA out of frame. */
  min-height: min(88vh, 860px);
  min-height: min(calc(100svh - var(--nav-h)), 860px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--forest);
}
.hero-art { position: absolute; inset: 0; }
.hero-art img, .hero-art video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hero-video { display: none; }
.hero-still { display: block; height: 100%; }
.hero-motion {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 3;
  min-height: 2.75rem;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .65rem;
  background: rgba(8,12,9,.68);
  color: #f6f3ea;
  font: 600 .72rem/1 var(--font-body);
  backdrop-filter: blur(10px);
}
.hero-motion-icon { width: .95rem; font-family: var(--font-mono); font-size: .65rem; text-align: center; }
.hero-motion:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 3px; }
@media (min-width: 720px) {
  .js .hero-video { display: block; }
  .js .hero-still { display: none; }
  .js .hero-motion { display: inline-flex; }
}
/* The portrait still is cropped hard on a phone, and centring it parks the bird
   exactly where the wordmark sits. Anchoring the crop left slides the bird to
   the right of the frame, which is the desktop composition: mark left, bird
   right, neither one crossing the other. */
@media (max-width: 719px) {
  .hero-art img { object-position: left 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
  .hero-still { display: block !important; }
  .hero-motion { display: none !important; }
}
/* The scrim sits low and stays light: the wordmark should read as titling
   inside the world, not cream pasted onto a black wash. It only has to earn
   contrast down where the button and the meta line actually are. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(0deg, rgba(6,7,13,.84), rgba(6,7,13,.46) 42%, rgba(6,7,13,0));
  pointer-events: none;
}
.hero-in {
  position: relative; z-index: 1;
  width: 100%;
  padding-top: clamp(var(--sp-7), 8vh, var(--sp-9));
  padding-bottom: clamp(var(--sp-7), 9vh, var(--sp-9));
}
/* the wordmark IS the hero: the only thing in the frame besides the invitation.
   Sized as a share of the column, so it can never outgrow its own gutter. */
.hero-mark { margin-bottom: clamp(var(--sp-5), 3.6vw, var(--sp-7)); }
.hero-mark img { width: min(492px, 68%); height: auto; }
/* on a phone the bird is right beside the mark, so give the beak its clearance.
   Must sit after the rule above — same specificity, later wins. */
@media (max-width: 719px) { .hero-mark img { width: 58%; } }
.hero-actions {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
/* .86, not .66: the softer hero scrim means this line now sits on real grass,
   and at 15px mono it needs the weight to stay readable there */
.hero-meta { font-family: var(--font-mono); font-size: var(--t-small); color: rgba(233,231,221,.86); font-variant-numeric: tabular-nums; }

/* =============================================================================
 * THE SCROLL STORY — v6: THE GESTURE-STEPPED STATE MACHINE
 * =============================================================================
 * ACT-SPEC-V6.md is the binding contract. The relation between scroll and the
 * story, in full:
 *
 *   · an ACT is ONE pinned stage (GSAP ScrollTrigger, in kivi.js) whose range
 *     is quantized into SEGMENTS — stable composed stills. No scrub, no snap:
 *     the engine captures gestures while pinned and one forward gesture is one
 *     STEP (scroll tweens to the next boundary while the segment's sequence
 *     plays); backward restores the previous still quietly. NOTHING in this
 *     stylesheet is scrubbed, clocked or hidden behind an engine class: layout
 *     and paint live here, timing lives in the engine, as inline styles it
 *     also reverts.
 *   · THE PERFORMANCE MANDATE: everything the engine animates is transform /
 *     opacity / color on pre-laid boxes. Focus rings and washes are baked
 *     child layers the engine only fades; the act backdrops carry
 *     contain: paint so a step never repaints the world.
 *   · DEGRADED PAGE FIRST: the base layout below is a plain, complete, static
 *     document — segments flow inline in story order and every element shows
 *     its authored END state. html.story-on (added by the engine only on
 *     desktop, JS alive, motion not reduced) buys the stage compositions and
 *     nothing else. Mobile and reduced motion keep this document layout;
 *     mobile adds at most one IO-fired play per act.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * THE PLAIN DOCUMENT — base layout everywhere; the whole layout on phones,
 * under reduced motion, and with JS off. .act-copy and .act-floor dissolve
 * (display: contents) so their children interleave in story order via the
 * order each block carries in its markup.
 * -------------------------------------------------------------------------- */
.act { position: relative; }
/* the backdrop wash never repaints during a step (perf mandate) */
.act-stage { contain: paint; }
.act-stage { padding-block: clamp(var(--sp-8), 11vh, var(--sp-10)); }
.act-grid {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
}
.act-copy, .act-floor { display: contents; }
.beat-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.beat-copy .lead { max-width: 48ch; }
/* the demoted line: the multilingual note, and memory */
.aside { font-size: var(--t-small); color: var(--ink2); max-width: 48ch; }

/* the monument type: act one's three words, and nothing else on the page */
.monument {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-marque); font-weight: 500;
  font-size: var(--t-monument);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-transform: lowercase;
}

/* measured destinations for the FLIP glides — stage furniture, story-on only */
.rail-slot, .pair-slot { display: none; }

/* the breathing sections between acts: the page scrolling normally */
.breath { height: clamp(2.5rem, 9vh, 6rem); }

/* inline prop widths */
.zoomwrap, .say-main { width: 100%; max-width: 46rem; }
.fixwrap { position: relative; width: 100%; max-width: 34rem; display: flex; flex-direction: column; gap: var(--sp-4); }
.cap-anchor { display: inline-block; }
.cap-anchor .keycap { --cap: clamp(7rem, 20vw, 10rem); }

/* -----------------------------------------------------------------------------
 * THE STAGE (story-on): one grid per act — copy row on a fixed height so the
 * heading baseline never jogs between acts, floor row filling the rest. Beat
 * copies stack in one cell (the master timeline crossfades them); the floor
 * centres its prop and hangs the rail/corner slots.
 * -------------------------------------------------------------------------- */
.story-on .act { height: 100svh; scroll-margin-top: 0; --copy-h: clamp(9rem, 20vh, 11.5rem); }
.story-on .act-stage {
  height: 100%;
  display: flex; align-items: stretch;
  padding-top: calc(var(--nav-h) + clamp(var(--sp-4), 3vh, var(--sp-6)));
  padding-bottom: clamp(var(--sp-5), 5vh, var(--sp-7));
  /* clip, not hidden: a wide prop must never lengthen the page sideways, and
     clip does not make a scroll container out of the stage */
  overflow: clip;
}
.story-on .act-grid {
  display: grid; width: 100%;
  grid-template-columns: 100%;
  grid-template-rows: var(--copy-h) minmax(0, 1fr);
  row-gap: 0;
  /* the base document's flex-start must not collapse the floor row */
  align-items: stretch;
}
.story-on .act-copy { display: grid; grid-row: 1; grid-column: 1; align-content: start; }
.story-on .beat-copy { grid-area: 1 / 1; }
.story-on .act-floor { grid-row: 2; grid-column: 1; position: relative; min-height: 0; }
.story-on .breath { height: 24vh; }

/* ---- act one: rail column · zoom column */
.story-on .act--one { --rail-w: clamp(4.25rem, 6.5vw, 5.5rem); }
.story-on .act--one .act-floor {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  column-gap: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  align-items: center;
}
.story-on .act--one .rail-slot {
  display: block; grid-column: 1; grid-row: 1;
  width: var(--rail-w); height: var(--rail-w);
  align-self: center;
}
/* the zoom cell: chrome and stage stacked in one centred cell, so the FLIP
   is pure transform between two already-centred layouts */
.story-on .act--one .zoomwrap {
  grid-column: 2; grid-row: 1; justify-self: center;
  display: grid; place-items: center;
  width: 100%; max-width: none;
  min-height: 0;
}
.story-on .act--one .chrome,
.story-on .act--one .stage-box { grid-area: 1 / 1; }
.story-on .act--one .chrome {
  display: block;
  width: min(42rem, 100%);
  opacity: 0; visibility: hidden;
}
/* beat one's floor: the monument key, centre-right, above everything */
.story-on .cap-home {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding-left: 9%;
  pointer-events: none;
}
.story-on .act--one .cap-anchor .keycap { --cap: clamp(8.5rem, 15vw, 11.25rem); }

/* ---- act two: one centred prop */
.story-on .act--two .act-floor { display: flex; align-items: center; justify-content: center; }

/* ---- act three: the style board and the custom stage share one centred
   cell — the boxes exit and the instructions arrive without a reflow */
.story-on .act--three .act-floor { display: grid; place-items: center; }
.story-on .act--three .styleboard,
.story-on .act--three .customstage { grid-area: 1 / 1; }
.story-on .act--three .customstage { opacity: 0; visibility: hidden; }

/* ---- act four: pair centre stage (beat one), corner slot, message centred */
.story-on .act--four .act-floor { display: flex; align-items: center; justify-content: center; }
.story-on .act--four .pair-slot {
  display: block; position: absolute; left: 0; top: 8%;
  width: clamp(6rem, 10vw, 7.5rem); aspect-ratio: 2.05 / 1;
}
.story-on .act--four .say-main { max-width: 36rem; }
.story-on .act--four .pair-home {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* =============================================================================
 * THE ANIMATION VOCABULARY died with the CSS clock. The engine owns every
 * pre-state and every tween, as inline styles it also reverts; the stylesheet
 * keeps only what the elements ARE.
 * ========================================================================== */
/* a real caret, walked by the clocks; blinks only when the typing pauses */
.caret {
  position: absolute; left: 0; top: 0;
  width: 2px; height: 1.15em;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
/* the resting caret at the end of a line mid-composition (act two S0). The
   engine shows it and gives it .blink; its END state is gone — the fix
   happened — so the base hides it and reduced motion never sees it move. */
.caret-end {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--accent);
  opacity: 0; visibility: hidden;
}
/* a focus ring as a baked child layer: the engine fades it, never a
   box-shadow tween (perf mandate) */
.field-ring,
.stage-ring {
  position: absolute; inset: -1px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 3px var(--accent-wash), inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
  opacity: 0;
  pointer-events: none;
}
.stage-ring { border-radius: var(--r-md); }

/* =============================================================================
 * THE KEYCAP — one object, three sizes (act one's monument key IS act one's
 * rail key, glided and scaled by the engine; act four's pair is the same
 * object twice; the inline kbd in the privacy lines is its flat cousin). Six
 * layers, because a real keycap is that many things: the cast shadow (its own
 * element, so a press can compress it without dragging the body along), the
 * skirt, the ring (its own child, so nothing re-rasterizes when the body
 * scales or travels), the top face, the legends, and the dim — a darkening
 * veil over the face that is the pressed state's colour change. Apple's own
 * layout on the fn key: the globe bottom-left, the word top-right. The
 * control cap carries one centred ⌃ and never a caret.
 *
 * The monument key renders at its LARGEST size natively and the engine scales
 * it DOWN to the rail, so the held key on the rail stays retina-crisp.
 * ========================================================================== */
.keycap {
  --cap: clamp(7rem, 20vw, 10rem);
  position: relative; display: block;
  width: var(--cap); height: var(--cap);
  flex: none;
}
.keycap-shadow {
  position: absolute; inset: 7% 3% -7% 3%;
  border-radius: calc(var(--cap) * 0.14);
  background: rgba(32, 36, 31, 0.22);
  filter: blur(calc(var(--cap) * 0.06));   /* bounded: one small region */
  transform-origin: 50% 100%;
}
.keycap-body {
  position: absolute; inset: 0;
  border-radius: calc(var(--cap) * 0.115);
  /* the skirt: the wall of the cap, lit from above */
  background: linear-gradient(178deg, #2E332B 0%, #22271F 52%, #171A15 100%);
  box-shadow: inset 0 0 0 1px rgba(12, 14, 12, 0.45);
  padding: calc(var(--cap) * 0.026) calc(var(--cap) * 0.03) calc(var(--cap) * 0.068);
}
.keycap-face {
  display: block; position: relative; height: 100%;
  border-radius: calc(var(--cap) * 0.082);
  /* the top face, two shades lighter than the wall and falling off downward. If
     the face and the skirt are close in value the cap stops being an object. */
  background: linear-gradient(176deg, #5A6353 0%, #414937 46%, #333A2E 100%);
  overflow: hidden;
}
/* the edge catch: the one specular line where the face meets the air */
.keycap-face::before {
  content: "";
  position: absolute; left: 7%; right: 7%; top: 0; z-index: 1;
  height: max(1px, calc(var(--cap) * 0.008));
  background: linear-gradient(90deg, rgba(246,243,234,0), rgba(246,243,234,.40) 18%, rgba(246,243,234,.52) 50%, rgba(246,243,234,.40) 82%, rgba(246,243,234,0));
}
/* and the occlusion pooling at the bottom of the dish */
.keycap-face::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 88% at 50% 8%, rgba(246,243,234,.07), rgba(246,243,234,0) 62%),
    linear-gradient(0deg, rgba(12,14,12,.36), rgba(12,14,12,0) 34%);
}
/* the dim: the face's darker step while the key is down */
.keycap-dim {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(12, 14, 12, 0.30);
  opacity: 0;
}
.keycap-word, .keycap-globe, .keycap-glyph {
  position: absolute; z-index: 3;
  color: var(--keycap-ink);
  line-height: 1;
  font-family: var(--font-mono);
}
.keycap-word {
  top: calc(var(--cap) * 0.10); right: calc(var(--cap) * 0.105);
  font-size: calc(var(--cap) * 0.115);
  letter-spacing: 0.01em;
  opacity: .90;
}
.keycap-globe {
  bottom: calc(var(--cap) * 0.095); left: calc(var(--cap) * 0.105);
  width: calc(var(--cap) * 0.155); height: calc(var(--cap) * 0.155);
  opacity: .88;
}
.keycap-globe svg { width: 100%; height: 100%; display: block; }
.keycap-glyph {
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  font-size: calc(var(--cap) * 0.34);
  opacity: .92;
}

/* ------------------------------------------------------- the pressed state
   The held key is a contract: travel on the body + the face a step darker +
   the accent ring, identical wherever it appears. The STATIC form below is
   authored on every key whose resting END state is held (with JS off it just
   is); the ANIMATED form is the same three properties moved by the clocks. */
.keycap-ring {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  /* baked into a child that rides the body: pressing never re-rasterizes it */
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--accent) 62%, transparent),
    0 0 0 7px var(--accent-wash);
  opacity: 0;
}
.keycap--held .keycap-body { transform: translateY(calc(var(--cap) * 0.026)); }
.keycap--held .keycap-ring { opacity: 1; }
.keycap--held .keycap-dim { opacity: 1; }
.keycap--held .keycap-shadow { opacity: .5; transform: scaleY(.62); }

/* the keycap pair (act four): the same object at the same optical weight, twice */
.pair { display: inline-flex; align-items: flex-end; gap: var(--sp-2); }
.pair-anchor { display: inline-block; }
.pair .keycap { --cap: clamp(3.6rem, 8vw, 4.6rem); }
.story-on .act--four .pair .keycap { --cap: clamp(4.2rem, 7vw, 5.25rem); }


/* =============================================================================
 * THE APP FRAME — the archetype, not a screenshot and not a labelled diagram.
 * A hint of a sidebar, a header bar suggestion, two soft bubbles, and ONE real
 * compose box, all in kivi's palette. No logos, no traffic lights, and no label
 * naming the app: kivi lands text in every app, and naming one would be a claim.
 * ========================================================================== */
.app {
  display: grid;
  grid-template-columns: clamp(3rem, 6vw, 4.5rem) minmax(0, 1fr);
  background: var(--surface2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 42rem;
}
.app-side {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  background: color-mix(in oklab, var(--canvas) 82%, var(--surface2));
  border-right: 1px solid var(--hairline);
}
.app-row { display: block; height: 6px; border-radius: 3px; background: var(--hairline); }
.app-side .app-row:nth-child(1) { width: 92%; }
.app-side .app-row:nth-child(2) { width: 68%; }
.app-side .app-row:nth-child(3) { width: 84%; }
.app-side .app-row:nth-child(4) { width: 56%; }
.app-side .app-row:nth-child(5) { width: 76%; }
.app-row--on { background: var(--accent-decor); opacity: .5; }
.app-body { display: flex; flex-direction: column; min-width: 0; }
.app-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) clamp(var(--sp-4), 2.4vw, var(--sp-5));
  border-bottom: 1px solid var(--hairline);
}
.app-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  /* an avatar hint, deliberately neutral: the green dot is dead (ACT-SPEC-V5) */
  background: color-mix(in oklab, var(--ink1) 12%, var(--canvas));
}
.app-row--head { width: 38%; height: 7px; }
.app-thread {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(var(--sp-4), 2.4vw, var(--sp-5)) clamp(var(--sp-4), 2.4vw, var(--sp-5)) 0;
}
.app-bub {
  height: 26px; border-radius: 9px; width: 44%;
  background: color-mix(in oklab, var(--canvas) 58%, var(--surface2));
}
.app-bub--me {
  align-self: flex-end; width: 32%;
  background: color-mix(in oklab, var(--brand-green) 16%, var(--surface2));
}
/* the one real control on the frame */
.app-compose {
  position: relative;
  margin: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: clamp(var(--sp-3), 1.8vw, var(--sp-4)) clamp(var(--sp-3), 2vw, var(--sp-4));
}
/* the DOCK variant (act one's chrome): the compose box is an empty slot —
   the zoom stage, scaled down, IS the compose box, so the slot draws no
   border of its own and only holds the space the stage will occupy */
.app--dock .app-compose { border-color: transparent; padding: 0; }
.chrome-slot { min-height: clamp(9rem, 24vh, 12rem); }
/* the chrome exists only on the pinned stage */
.chrome { display: none; }
.send {
  display: block; width: 18px; height: 18px;
  margin-left: auto;
  color: var(--accent);
}
.send svg { width: 100%; height: 100%; }

/* =============================================================================
 * THE ZOOM STAGE (ACT-SPEC-V6 act one). Authored at END size: the big compose
 * field, polished output standing, ledger settled. The engine scales the whole
 * stage DOWN into the chrome's slot for S1 (inverted FLIP: rest is identity,
 * so resting text is always crisp) and the S2 edits crossfade the five
 * pre-laid take versions stacked in .stage-cell — a removal is a dissolve
 * between stills, never a collapsing box (perf mandate).
 * ========================================================================== */
.stage-box {
  width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.stage {
  position: relative;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.stage-cell { display: grid; }
.stage-cell > .tv { grid-area: 1 / 1; }
/* every version pre-laid; only the finished one shows without the engine */
.tv { position: relative; opacity: 0; visibility: hidden; }
.tv[data-v="4"] { opacity: 1; visibility: visible; }
.tv--out { display: flex; flex-direction: column; gap: var(--sp-2); }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
/* the edit's name, small Petrona italic beside the edit it fires on; its END
   state is gone — the ledger carries the names at rest */
.src, .res { position: relative; }
.edit-tag {
  position: absolute; left: 0; top: -1.5em;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 0.85rem; line-height: 1;
  color: var(--annotation);
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
.out-list .edit-tag { left: calc(100% + 12px); top: 0.3em; }
/* the quiet ledger: what the transformation did, settled under the box */
.ledger {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--sp-2);
  padding-left: var(--sp-2);
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 0.9rem; line-height: 1.5;
  color: var(--ink3);
}
.ledger-item:not(:first-child)::before { content: "· "; }

/* the raw take, and the message that survives it */
.take {
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink1);
}
.take .mut { color: var(--ink2); }
.out-line { font-size: var(--t-body); line-height: 1.7; }
.out-list { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding-left: 1.1em; }
.out-list li { position: relative; }
/* a hyphen, because a hyphen is what the formatter emits into a text box, and
   because a page with zero en dashes on it has zero en dashes on it */
.out-list li::before { content: "-"; position: absolute; left: -1.1em; color: var(--ink3); }

/* inline-block so a word can be transformed at all; the spaces stay outside the
   spans, which keeps every line-break opportunity intact */
.tw { display: inline-block; position: relative; }

/* the waveform: the product's honest listening signal (ACT-SPEC-V5 element
   vocabulary 1). On the compose rim while speech streams, inside the voice
   chip while a command is heard. The engine breathes the bars — bounded,
   never infinite — and its END state is gone with the last word. */
.wave { display: flex; align-items: flex-end; gap: 3px; height: 16px; opacity: 0; visibility: hidden; }
.wave i { display: block; width: 4px; border-radius: 2px; background: var(--accent-decor); transform-origin: center bottom; }
.wave i:nth-child(8n+1) { height: 44%; }
.wave i:nth-child(8n+2) { height: 72%; }
.wave i:nth-child(8n+3) { height: 100%; }
.wave i:nth-child(8n+4) { height: 62%; }
.wave i:nth-child(8n+5) { height: 86%; }
.wave i:nth-child(8n+6) { height: 52%; }
.wave i:nth-child(8n+7) { height: 78%; }
.wave i:nth-child(8n+8) { height: 40%; }
.wave--chip { height: 12px; gap: 2.5px; }
.wave--chip i { width: 3px; }

/* =============================================================================
 * TEXT BOXES THAT READ AS TEXT BOXES (ACT-SPEC-V5 element vocabulary 4): a
 * rounded field with a visible border on a slightly recessed ground; the
 * engine adds the focus ring while a field is active and walks a real caret
 * while it types. Any mac user reads these as text inputs, not cards.
 * ========================================================================== */
.field {
  position: relative;
  width: 100%;
  background: color-mix(in oklab, var(--canvas) 38%, var(--surface2));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(32, 36, 31, 0.05);
  padding: clamp(var(--sp-3), 1.8vw, var(--sp-4)) clamp(var(--sp-4), 2vw, var(--sp-5));
}
.field--fix .fix-row { display: flex; align-items: center; gap: var(--sp-4); }
.field--fix .field-line {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}
.send--fix { flex: none; margin-left: 0; }
/* ACT TWO · the fix. The corrected spelling is the one in the flow, so the
   line's width is settled from the first frame and the retype cannot move
   anything. The wrong spelling sits on top of it while the clock runs; its
   END state is gone, which is why the base hides it. */
.fix { position: relative; display: inline-block; }
.fix-old {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
}
/* the selection, shaped exactly to the glyph run it selects */
.fix-sel {
  position: absolute; inset: -2px -3px; z-index: -1;
  background: var(--accent-wash);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* the corrected word, mid-flight between the box and the memory row
   (ACT-SPEC-V5 element vocabulary 3: the word physically becoming a memory
   entry IS the feature) */
.memchip {
  position: absolute; left: 0; top: 0; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 3px 10px 4px;
  font-size: var(--t-small); line-height: 1.4;
  color: var(--accent);
  background: var(--surface2);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--r-xs);
  box-shadow: 0 6px 16px rgba(32, 36, 31, 0.10);
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
/* the abstracted memory row: hairline row grammar, no dots */
.memrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-3) var(--sp-1);
}
.memrow-term { font-weight: 600; }
.memrow-note { font-size: var(--t-small); color: var(--ink3); }

/* =============================================================================
 * ACT THREE · THE STYLE BOARD (ACT-SPEC-V6, founder's redesign). Three big
 * style boxes, mostly empty at rest: label, one quiet descriptor, and a
 * before -> after cell the engine plays. Then one compact custom-instructions
 * stage where the app's own example rules cycle. The dark rendering block is
 * the personas UI's own preview grammar. Nothing here is send-able; kivi's
 * own surfaces never share the app frame's box.
 * ========================================================================== */
.styleboard {
  width: 100%; max-width: 64rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-5));
}
.stylebig {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-4), 2vw, var(--sp-5));
  min-height: clamp(15rem, 32vh, 20rem);
}
.stylebig-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.stylebig-name { font-family: var(--font-title); font-size: var(--t-body); color: var(--ink1); }
.stylecard-check {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--brand-green) 26%, var(--surface2));
  color: var(--accent);
  opacity: 0;
}
.stylecard-check svg { width: 11px; height: 11px; }
.stylebig-desc { font-size: var(--t-small); line-height: 1.45; color: var(--ink3); }

/* the before -> after cell: both faces stacked in one cell so the box never
   changes size; the wash sweeps left to right as the rendering lands */
.mini { position: relative; display: grid; margin-top: auto; }
.mini > * { grid-area: 1 / 1; }
.mini-before {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--t-small); line-height: 1.55;
  color: var(--ink2);
  align-self: center;
  opacity: 0; visibility: hidden;
}
.mini-after {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--forest);
  border-radius: var(--r-xs);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.78rem; line-height: 1.55;
  color: var(--forest-ink1);
  overflow-wrap: anywhere;
  align-self: center;
  opacity: 0; visibility: hidden;
}
.pv-line { display: block; }
.pv-k { color: var(--brand-green); }
.mini-wash {
  position: absolute; inset: -2px;
  background: var(--accent-wash);
  border-radius: var(--r-xs);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
/* the authored end states: clear and structured have played */
.stylebig--on {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--brand-green) 10%, var(--surface2));
}
.stylebig--on .stylecard-check { opacity: 1; }
.stylebig--on .mini-after { opacity: 1; visibility: visible; }

/* the custom-instructions stage: instructions share one cell and cycle; the
   last one's result is the authored end state */
.customstage {
  width: 100%; max-width: 44rem;
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-4), 2vw, var(--sp-5));
}
.cy-cell { display: grid; }
.cy {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: var(--sp-3);
  opacity: 0; visibility: hidden;
}
.cy-rule {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--t-body); line-height: 1.5;
  color: var(--ink1);
}
.mini--cy { margin-top: 0; }
.mini--cy .mini-before { font-size: var(--t-body); }
.cy:last-child { opacity: 1; visibility: visible; }
.cy:last-child .mini-after { opacity: 1; visibility: visible; }

/* =============================================================================
 * ACT FOUR — the voice chip carries the waveform (its honest listening
 * signal, never a dot) and the command in the said-out-loud face; the message
 * field is a real text box whose line turns in place. There is no wake word,
 * so nothing here depicts kivi hearing its name: the keys started it.
 * ========================================================================== */
.say-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.voice-chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: var(--surface1);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 6px 14px 7px;
  max-width: 100%;
}
.voice-cmd {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--t-body); line-height: 1.5;
  color: var(--ink1);
  padding-bottom: 2px;
}
.field--msg { max-width: 34rem; }
.msg-cell { position: relative; display: grid; }
.msg-cell > p { grid-area: 1 / 1; }
.msg-before, .msg-after { font-size: var(--t-body); line-height: 1.65; }
/* the before line's END state is gone: the change has happened */
.msg-before { opacity: 0; visibility: hidden; }
.cmds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cmd {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--t-small);
  color: var(--ink2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-3) 4px;
}

/* =============================================================================
 * ATMOSPHERE (grammar 7) — quiet per-scene washes taken from the hero art's own
 * palette and walked through the page like times of day: first light over the
 * headland, dawn, morning, midday's flat cool, a green haze, late gold, then
 * dusk into the closing band's golden hour. One flat sky and one soft glow per
 * scene, never more, and every wash returns to cream at both ends so two
 * adjacent scenes always meet in the same colour — a seam is never a hard edge
 * and never a crossfade. Measured against the ink ramp: see the note on --ink2.
 * ========================================================================== */
.sky { position: relative; isolation: isolate; background: var(--sky, var(--canvas)); }
.sky::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* the scene's light POOLS in the middle of its own stage and returns to cream
     at both ends. Without this, every scene boundary is a hard horizontal edge
     sweeping up the screen, which is the slab look this treatment kills. */
  background:
    var(--glow, transparent),
    linear-gradient(180deg,
      var(--canvas) 0%, rgba(246, 243, 234, 0) 15%,
      rgba(246, 243, 234, 0) 85%, var(--canvas) 100%);
  pointer-events: none;
}
.sky--first   { --sky: #F5EBD9; --glow: radial-gradient(76% 62% at 84% 4%, rgba(232,198,135,.30), rgba(232,198,135,0) 68%); }
.sky--midday  { --sky: #E8EEF0; --glow: radial-gradient(92% 52% at 50% -8%, rgba(196,214,220,.55), rgba(196,214,220,0) 74%); }
.sky--haze    { --sky: #EDEDE3; --glow: radial-gradient(84% 54% at 60% -6%, rgba(196,206,182,.34), rgba(196,206,182,0) 72%); }
.sky--gold    { --sky: #F3E8D3; --glow: radial-gradient(70% 58% at 90% 88%, rgba(228,190,132,.34), rgba(228,190,132,0) 70%); }
.sky--late    { --sky: #F0E8DA; --glow: radial-gradient(68% 58% at 4% 6%, rgba(224,201,162,.30), rgba(224,201,162,0) 72%); }
.sky--dusk    { --sky: #E9E7DE; --glow: radial-gradient(80% 60% at 94% 96%, rgba(186,183,170,.34), rgba(186,183,170,0) 70%); }

/* short viewports never pin: the engine's desktop condition requires 560px of
   height, so squat windows and landscape phones keep the document layout */

/* --------------------------------------------------------- story, on a phone */
@media (max-width: 719px) {
  .act-stage { padding-block: clamp(var(--sp-7), 8vh, var(--sp-9)); }
  .cap-anchor .keycap { --cap: clamp(6.5rem, 30vw, 8.5rem); }
  .pair .keycap { --cap: clamp(3rem, 14vw, 3.8rem); }
  .app { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .app-thread { display: none; }
  .styleboard { grid-template-columns: 1fr; }
  .stylebig { min-height: 0; }
  .stage { padding: var(--sp-4); }
}


/* =============================================== private by design (split)
   Layout family: heading beside its statements. Two statements need proximity,
   not rules; the hairlines that used to be here were doing a gap's job. */
.priv {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(var(--sp-5), 3.4vw, var(--sp-7));
  align-items: start;
}
@media (min-width: 860px) { .priv { grid-template-columns: 0.9fr 1.1fr; } }
.priv-lines { display: flex; flex-direction: column; gap: var(--sp-4); }
.priv-lines p {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink2);
  max-width: 46ch;
}
.priv-more { font-size: var(--t-body); margin-top: var(--sp-2); }

/* ------------------------------------------------------------ dark band */
.band {
  position: relative;
  background: var(--forest);
  color: var(--forest-ink1);
  overflow: hidden;
}
.band .marque { color: #FCFAF3; }
.band .lead { color: var(--forest-ink2); }
.band .meta { color: var(--forest-ink3); }
/* :not(.btn) — same trap as the nav: a bare `.band a` repaints the closing
   download button's navy label in accent green, on an accent-green fill */
.band a:not(.btn) { color: var(--forest-accent); }
.band-art { position: absolute; inset: 0; }
.band-art picture { display: block; height: 100%; }
.band-art img { width: 100%; height: 100%; object-fit: cover; }
.band-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,7,13,.92), rgba(6,7,13,.74) 52%, rgba(6,7,13,.46));
}
.band-in { position: relative; z-index: 1; }

/* --------------------------------------------------------------- plans */
/* Layout family: the one card pair on the page. Cards are allowed here because
   the boxed side-by-side comparison IS the affordance. */
.plans { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); max-width: 780px; }
@media (min-width: 560px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { padding: clamp(var(--sp-5), 3vw, var(--sp-6)); display: flex; flex-direction: column; }
.plan--pro { border: 1.5px solid var(--annotation); }
.plan h3 {
  font-family: var(--font-marque); font-weight: 500;
  font-size: var(--t-title);
  text-transform: lowercase; letter-spacing: -0.01em;
  margin-bottom: var(--sp-1);
  text-wrap: balance;
}
.plan .price { font-family: var(--font-mono); font-size: var(--t-small); color: var(--ink3); margin-bottom: var(--sp-4); }
/* spaced, not ruled: three items are a group, and the card already frames them */
.plan ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan ul li { font-size: var(--t-body); line-height: 1.45; }
.plan .fine { font-size: var(--t-small); color: var(--ink3); margin-top: auto; padding-top: var(--sp-4); }
.plans-note { margin-top: clamp(var(--sp-5), 3.4vw, var(--sp-6)); font-size: var(--t-body); color: var(--ink3); }

/* --------------------------------------------------------- closing band */
.close-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.close-note { font-size: var(--t-body); color: var(--forest-ink3); }

/* -------------------------------------------------------------- footer */
.foot {
  background: var(--forest);
  color: var(--forest-ink2);
  padding: clamp(var(--sp-7), 8vh, var(--sp-9)) 0 clamp(var(--sp-6), 5vh, var(--sp-7));
}
.foot a { color: var(--forest-ink1); opacity: .74; transition: opacity var(--dur-exit) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { opacity: 1; transition-duration: var(--dur-fast); }
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-7));
  padding-bottom: clamp(var(--sp-6), 5vw, var(--sp-7));
}
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-mark img { height: 34px; width: auto; margin-bottom: var(--sp-4); }
.foot-tag {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--t-lead); color: var(--forest-ink2);
}
.foot h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-small); letter-spacing: .01em;
  color: var(--forest-ink1);
  margin-bottom: var(--sp-3);
}
.foot ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.foot li { font-size: var(--t-body); }
.foot .mono { font-family: var(--font-mono); font-size: var(--t-small); }
.foot-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  border-top: 1px solid var(--forest-hairline);
  padding-top: var(--sp-5);
  font-size: var(--t-small); color: var(--forest-ink3);
}
.foot-base .legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* ------------------------------------------------- scroll reveal (PE only)
   Scoped to html.js, which an inline script in <head> sets. With JS off the
   class never lands, so nothing is ever hidden — the page is complete. */
@media (prefers-reduced-motion: no-preference) {
  .js .r { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-settle) var(--ease), transform var(--dur-settle) var(--ease); }
  .js .r.in { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ legal page */
.legal-page { max-width: 68ch; }   /* measure law: body copy stays under 75ch */
.legal-page h2 {
  font-family: var(--font-title); font-weight: 500;
  font-size: var(--t-title);
  letter-spacing: -0.01em; text-transform: lowercase;
  margin: var(--sp-7) 0 var(--sp-3);
  text-wrap: balance;
}
.legal-page p { margin-bottom: var(--sp-4); color: var(--ink2); font-size: var(--t-body); line-height: 1.65; }
.legal-page p em { color: var(--ink3); }
.legal-page h2:first-of-type { margin-top: var(--sp-5); }
/* the lead paragraph(s) directly under the title read a touch larger */
.legal-page > p.lead { font-size: var(--t-lead); color: var(--ink2); }
/* clause lists (user conduct, reverse-engineering) — the global reset strips
   markers, so re-enable them just here */
.legal-page ul { margin: 0 0 var(--sp-4); padding-left: 1.3em; list-style: disc; }
.legal-page li { color: var(--ink2); font-size: var(--t-body); line-height: 1.6; margin-bottom: var(--sp-2); }
.legal-page li::marker { color: var(--accent-decor); }
/* the ALL-CAPS statutory disclaimers (as-is/liability) — keep them readable */
.legal-page p.caps { font-size: var(--t-small); letter-spacing: 0.01em; color: var(--ink2); }
.notice {
  background: var(--surface1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--sp-5) var(--sp-5);
  margin: var(--sp-5) 0;
}
.notice p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ print/misc */
@media print {
  .nav, .hero-art, .band-art { display: none; }
  body { background: #fff; }
}

/* =============================================================================
 * V7 PRODUCT STORY
 * Native scroll is the input surface. Each tall act owns one sticky viewport;
 * GSAP only maps document progress to reversible, pre-laid visual states.
 * These rules intentionally supersede the v6 stepped/pinned composition above.
 * ========================================================================== */

html.story-on { scroll-behavior: auto; }

.chapter {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .2rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chapter::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

/* A single product-window material, with restrained depth and one green signal. */
.app,
.memory-shell,
.persona-shell,
.say-main {
  border: 1px solid rgba(25, 38, 27, .15);
  border-radius: 1.25rem;
  background: rgba(255, 255, 252, .94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 5px rgba(27, 39, 27, .06),
    0 26px 72px rgba(27, 39, 27, .13);
  overflow: hidden;
}

.product-bar,
.app-bar,
.edit-bar {
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  background: rgba(249, 249, 245, .86);
  border-bottom: 1px solid rgba(25, 38, 27, .1);
}
.product-id { display: inline-flex; align-items: center; gap: .65rem; }
.product-id img { width: 1.75rem; height: 1.75rem; border-radius: .48rem; }
.product-id strong,
.app-bar-title { font-size: .82rem; font-weight: 700; letter-spacing: -.01em; }
.product-location,
.app-bar-state,
.edit-bar { color: var(--ink3); font-size: .72rem; }

/* ---------------------------------------------------------------- app frame */
.app { display: flex; flex-direction: column; max-width: 48rem; }
.app-bar-mark {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 .3rem rgba(144, 196, 106, .15);
}
.app-bar-title { margin-right: auto; }
.app-main { display: grid; grid-template-columns: minmax(8rem, .28fr) minmax(0, 1fr); min-height: 20rem; }
.app-side {
  padding: 1.1rem .85rem;
  gap: .28rem;
  background: #f4f4ee;
  border-right: 1px solid rgba(25, 38, 27, .08);
}
.app-side-label,
.kivi-side-label {
  margin: 0 .55rem .6rem;
  color: var(--ink3);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-nav-item,
.kivi-side-item {
  padding: .48rem .58rem;
  border-radius: .5rem;
  color: var(--ink2);
  font-size: .74rem;
}
.app-nav-item--on,
.kivi-side-item--on { color: var(--ink1); background: rgba(144, 196, 106, .17); font-weight: 650; }
.app-body { min-height: 0; }
.app-head { padding: .85rem 1.1rem; }
.app-dot {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: #e7e5dc;
  color: var(--ink2);
  font-size: .7rem;
  font-weight: 750;
}
.app-head-copy { display: flex; flex-direction: column; gap: .05rem; }
.app-head-copy strong { font-size: .77rem; }
.app-head-copy small { color: var(--ink3); font-size: .64rem; }
.app-thread { flex: 1; padding: 1rem 1.1rem 0; }
.app-bub { height: auto; min-height: 3rem; padding: .65rem .72rem; display: flex; flex-direction: column; gap: .2rem; }
.app-bub small { color: var(--ink3); font-size: .57rem; }
.app-bub > span { color: var(--ink2); font-size: .67rem; line-height: 1.4; }
.app-compose { margin: 1rem 1.1rem 1.1rem; }
.app--dock .app-compose { margin-top: .55rem; }
.chrome-slot { min-height: clamp(8rem, 20vh, 10.5rem); }

/* --------------------------------------------------------------- act one */
.stage-box { position: relative; }
.stage {
  min-height: clamp(16rem, 35vh, 21rem);
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 1rem;
  border-color: rgba(25, 38, 27, .16);
  background: rgba(255,255,252,.96);
  box-shadow: 0 18px 56px rgba(27, 39, 27, .12);
  overflow: hidden;
}
.stage-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(25, 38, 27, .09);
  color: var(--ink3);
  font-size: .72rem;
}
.stage-context span:first-child { color: var(--ink1); font-weight: 680; }
.stage-cell { flex: 1; padding: clamp(1.25rem, 3vw, 2rem); }
.stage-bar { margin: 0 1rem 1rem; }
.kivi-orb {
  position: absolute;
  right: 1.25rem;
  top: -2.15rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .48rem .78rem .48rem .48rem;
  border: 1px solid rgba(25,38,27,.14);
  border-radius: 1rem;
  background: rgba(255,255,252,.95);
  box-shadow: 0 10px 32px rgba(25,38,27,.14);
}
.kivi-orb-mark { position: relative; display: grid; place-items: center; }
.kivi-orb-mark::after {
  content: "";
  position: absolute;
  inset: -.18rem;
  border: 1px solid rgba(23,116,35,.5);
  border-radius: .85rem;
}
.kivi-orb img { width: 2.55rem; height: 2.55rem; border-radius: .72rem; display: block; }
.kivi-orb-copy { display: flex; flex-direction: column; gap: .08rem; }
.kivi-orb-copy strong { font-size: .74rem; }
.kivi-orb-copy small { color: var(--ink3); font-size: .62rem; white-space: nowrap; }
.ledger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  min-height: 2.25rem;
  padding-inline: .2rem;
}
.ledger-label { margin-right: .3rem; color: var(--ink3); font-size: .68rem; }
.ledger-item {
  padding: .22rem .52rem;
  border: 1px solid rgba(23,116,35,.15);
  border-radius: .45rem;
  background: rgba(144,196,106,.11);
  color: #2f5b29;
  font-size: .68rem;
}
.act--one .take,
.act--one .out-line { font-size: clamp(1.05rem, 1.55vw, 1.24rem); }

/* ---------------------------------------------------------------- memory */
.fixwrap { max-width: 59rem; }
.memory-shell { width: 100%; }
.memory-layout { display: grid; grid-template-columns: 9.25rem minmax(0, 1fr); }
.kivi-side {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: 1rem .72rem;
  background: #f3f4ed;
  border-right: 1px solid rgba(25,38,27,.09);
}
.history-pane { padding: clamp(1rem, 2.2vw, 1.45rem); }
.surface-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.surface-heading > span { color: var(--ink1); font-size: .78rem; font-weight: 680; }
.surface-heading small { color: var(--ink3); font-size: .65rem; }
.field--fix {
  min-height: 7.5rem;
  display: flex;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: .8rem;
  background: #fbfbf7;
}
.field--fix .fix-row { width: 100%; }
.field--fix .field-line { font-size: clamp(1rem, 1.7vw, 1.2rem); }
.history-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; color: var(--ink3); font-size: .65rem; }
.saved-receipt { display: inline-flex; align-items: center; gap: .34rem; color: #35672f; }
.saved-receipt i,
.updated-receipt i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .24rem rgba(144,196,106,.16); }
.memory-proof { padding: 1rem 1.45rem 1.35rem; border-top: 1px solid rgba(25,38,27,.09); }
.memory-proof-cell { display: grid; min-height: 4.6rem; }
.memory-proof-cell > * { grid-area: 1 / 1; }
.memory-empty { align-self: center; display: flex; align-items: center; gap: .65rem; padding: .8rem; color: var(--ink3); font-size: .7rem; opacity: 0; visibility: hidden; }
.memory-empty span { color: var(--accent); }
.memrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .7rem;
  min-height: 4.6rem;
  padding: .75rem .8rem;
  border: 1px solid rgba(25,38,27,.11);
  border-radius: .72rem;
  background: #fbfbf7;
}
.memory-spark { color: var(--accent); }
.memrow-note { padding: .16rem .42rem; border-radius: .34rem; background: rgba(176,130,37,.12); color: #6f541b; font-size: .63rem; }
.memory-decision { display: inline-flex; gap: .35rem; }
.memory-decision span { padding: .3rem .5rem; border: 1px solid rgba(25,38,27,.12); border-radius: .42rem; color: var(--ink2); font-size: .63rem; }
.memory-decision span:first-child { border-color: rgba(23,116,35,.24); color: var(--accent); background: rgba(144,196,106,.1); }

/* --------------------------------------------------------------- personas */
.persona-shell { width: 100%; max-width: 65rem; }
.persona-context {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .7rem;
  padding: .82rem 1rem;
  border-bottom: 1px solid rgba(25,38,27,.09);
  background: #fafaf6;
}
.persona-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .6rem; background: #172019; color: #edf4e7; font-size: .72rem; }
.persona-context > span:nth-child(2) { display: flex; flex-direction: column; }
.persona-context small { color: var(--ink3); font-size: .6rem; }
.persona-context strong { font-size: .76rem; }
.persona-apps { justify-self: end; color: var(--ink3); font-size: .67rem; }
.persona-stage { position: relative; display: grid; min-height: 28rem; padding: clamp(1rem, 2vw, 1.4rem); }
.persona-stage > * { grid-area: 1 / 1; }
.styleboard { max-width: none; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1rem; }
.style-list { display: flex; flex-direction: column; gap: .42rem; }
.style-list-label { margin: 0 .2rem .35rem; color: var(--ink3); font-size: .64rem; }
.style-choice {
  display: flex;
  flex-direction: column;
  gap: .38rem;
  padding: .78rem .82rem;
  border: 1px solid rgba(25,38,27,.11);
  border-radius: .68rem;
  background: #fff;
}
.stylebig-name { text-transform: lowercase; }
.stylebig-desc { font-size: .68rem; line-height: 1.4; }
.style-choice--on { border-color: rgba(23,116,35,.44); background: rgba(144,196,106,.09); }
.style-choice--on .stylecard-check { opacity: 1; }
.persona-preview {
  min-height: 23.5rem;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid rgba(25,38,27,.11);
  border-radius: .85rem;
  background: #f7f7f2;
}
.preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.preview-head span { font-size: .73rem; font-weight: 680; }
.preview-head small { color: var(--ink3); font-size: .62rem; }
.preview-source { padding: 1rem; border-radius: .65rem; background: #fff; color: var(--ink2); font-family: var(--font-serif); font-size: .82rem; line-height: 1.55; }
.preview-source > span { display: block; margin-bottom: .4rem; color: var(--ink3); font-family: var(--font-body); font-size: .6rem; font-style: normal; }
.preview-output { display: grid; flex: 1; margin-top: .7rem; }
.preview-output > * { grid-area: 1 / 1; }
.mini--persona { min-height: 8.4rem; margin: 0; align-self: stretch; }
.mini--persona .mini-after { min-height: 100%; align-self: stretch; justify-content: center; border-radius: .58rem; padding: 1rem; font-size: .83rem; }
.mini--persona .mini-before { padding: 1rem; }
.mini-after { border-radius: .58rem; padding: .78rem; }
.customstage { max-width: none; min-height: 100%; padding: 0; border: 0; background: transparent; }
.custom-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.custom-head > span:first-child { display: flex; flex-direction: column; }
.custom-head small { color: var(--ink3); font-size: .63rem; }
.custom-head strong { font-size: .9rem; }
.custom-state { color: var(--accent); font-size: .66rem; }
.custom-rule-field { display: flex; flex-direction: column; gap: .5rem; padding: .85rem 1rem; border: 1px solid rgba(23,116,35,.22); border-radius: .72rem; background: rgba(144,196,106,.07); }
.custom-rule-field span { color: var(--ink3); font-size: .64rem; }
.custom-rule-field em { color: var(--ink1); font-family: var(--font-body); font-size: .78rem; font-style: normal; line-height: 1.55; }
.custom-rule-field em span { display: inline; padding: .08rem .12rem; border-radius: .25rem; color: inherit; font-size: inherit; }
.cy-cell { flex: 1; }
.cy { min-height: 15rem; padding: 1rem; border-radius: .85rem; background: #f5f5ef; }
.mini--cy {
  display: grid;
  grid-template-columns: 5.25rem minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: .75rem 1rem;
  min-height: 12rem;
  margin: 0;
}
.mini--cy > * { grid-area: auto; }
.mini--cy .compare-label { align-self: center; color: var(--ink3); font-size: .63rem; }
.mini--cy .compare-label--before { grid-column: 1; grid-row: 1; }
.mini--cy .compare-label--after { grid-column: 1; grid-row: 2; color: var(--accent); }
.mini--cy .mini-before { grid-column: 2; grid-row: 1; align-self: stretch; padding: .75rem .85rem; border-radius: .58rem; background: #fff; }
.mini--cy .mini-after { grid-column: 2; grid-row: 2; align-self: stretch; min-height: 4.2rem; justify-content: center; }
.mini--cy .mini-wash { grid-column: 2; grid-row: 2; }
.cy:last-child .mini--cy .mini-before { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- voice edit */
.say-main { width: 100%; max-width: 43rem; gap: 0; align-items: stretch; }
.edit-bar span:first-child { color: var(--ink1); font-weight: 680; }
.voice-chip {
  align-self: flex-start;
  margin: 1rem 1.1rem .4rem;
  padding: .38rem .8rem .38rem .38rem;
  background: #f7f7f2;
}
.voice-chip img { width: 2rem; height: 2rem; border-radius: .55rem; }
.field--msg {
  max-width: none;
  min-height: 9rem;
  margin: .6rem 1.1rem 0;
  padding: 1.2rem;
  border-radius: .82rem;
  background: #fbfbf7;
}
.msg-before,
.msg-after { font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.selected-text { background: rgba(91,150,255,.24); box-shadow: 0 0 0 2px rgba(91,150,255,.24); border-radius: .15rem; }
.updated-receipt { display: flex; align-items: center; gap: .55rem; margin: .75rem 1.1rem .35rem; padding: .48rem .65rem; border-radius: .55rem; background: rgba(144,196,106,.1); color: #35672f; font-size: .76rem; font-weight: 650; }
.cmds { margin: .6rem 1.1rem 1.1rem; }

/* Host applications are cool and utilitarian; Kivi's own surfaces remain
   warm and paper-like, making product provenance visible at a glance. */
.act--one .app,
.act--four .say-main { border-radius: .9rem; background: #f9fbfc; box-shadow: 0 24px 72px rgba(39,52,58,.14); }
.act--one .app-bar,
.act--four .edit-bar { background: #f1f4f5; }
.memory-shell,
.persona-shell { background: #fffef9; box-shadow: 0 26px 72px rgba(54,61,42,.14); }

/* --------------------------------------------- native sticky story, desktop */
@media (min-width: 960px) and (min-height: 560px) {
  .story-on .act { min-height: 100svh; height: auto; }
  .story-on .act--one { height: 560svh; }
  .story-on .act--two { height: 260svh; }
  .story-on .act--three { height: 600svh; }
  .story-on .act--four { height: 300svh; }
  .story-on .act-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: calc(var(--nav-h) + clamp(1.2rem, 3vh, 2rem)) 0 clamp(1.2rem, 3vh, 2rem);
  }
  .story-on .act-grid {
    grid-template-columns: minmax(14rem, .68fr) minmax(34rem, 1.72fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5.5rem);
  }
  .story-on .act-copy { grid-column: 1; grid-row: 1; align-content: center; }
  .story-on .act-floor { grid-column: 2; grid-row: 1; width: 100%; }
  .story-on .breath { display: none; }
  .story-on .beat-copy .lead { max-width: 28ch; }
  .story-on .act--one .act-floor { grid-template-columns: clamp(3.6rem, 5vw, 4.7rem) minmax(0, 1fr); }
  .story-on .act--one .cap-anchor .keycap { --cap: clamp(8rem, 12vw, 10rem); }
  .story-on .act--three .act-floor { display: block; }
  .story-on .act--four .pair-slot { left: auto; right: 1.1rem; top: 4.2rem; }
  .story-on .act--four .say-main { max-width: 43rem; }
  .story-on .act--one .app-bar-state { visibility: hidden; }
}

@media (min-width: 960px) and (max-width: 1099.98px) and (min-height: 560px) {
  .story-on .kivi-orb { right: .7rem; top: -1.65rem; padding: .4rem; }
  .story-on .kivi-orb-copy { display: none; }
}

/* Mobile is an authored linear cut, not a shrunken pinned desktop stage. */
@media (max-width: 959.98px), (max-height: 559.98px) {
  .act-stage { padding-block: clamp(4.5rem, 11vh, 7rem); }
  .act-grid { gap: 2.25rem; }
  .chapter { margin-bottom: -.15rem; }
  .app-main { grid-template-columns: 5.6rem minmax(0, 1fr); min-height: 17rem; }
  .app-nav-item { padding-inline: .35rem; font-size: .66rem; }
  .app-thread { display: none; }
  .stage { min-height: 15rem; }
  .kivi-orb { right: .75rem; }
  .memory-layout { grid-template-columns: 1fr; }
  .kivi-side { display: none; }
  .history-pane { padding: 1rem; }
  .memory-proof { padding: .9rem 1rem 1rem; }
  .memrow { grid-template-columns: auto minmax(0,1fr) auto; }
  .memory-decision { grid-column: 2 / -1; }
  .persona-context { grid-template-columns: auto 1fr; }
  .persona-apps { grid-column: 1 / -1; justify-self: start; padding-left: 2.7rem; }
  .persona-stage { min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
  .persona-shell { order: 2; }
  .styleboard { grid-template-columns: 1fr; }
  .persona-preview { min-height: 20rem; }
  .customstage { min-height: 23rem; }
  .pair-home { align-self: center; }
  .say-main { margin-top: 1rem; }
}

@media (max-width: 430px) {
  .btn--lg { padding-inline: 1.15rem; }
  .app-main { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .stage-cell { padding-inline: 1rem; }
  .kivi-orb-copy small { display: none; }
  .kivi-orb { top: -1.8rem; }
  .memory-shell,
  .persona-shell,
  .say-main,
  .app { border-radius: .95rem; }
  .memory-decision { width: 100%; }
  .memory-decision span { flex: 1; text-align: center; }
  .persona-apps { padding-left: 0; }
  .voice-chip { margin-inline: .75rem; }
  .field--msg { margin-inline: .75rem; }
  .cmds { margin-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kivi-orb-mark::after { animation: none; }
}

/* =============================================================================
 * V8 PROOF STORY
 *
 * One artifact, one action, one response, one receipt. These scenes deliberately
 * reject the old split-screen admin-window grammar. The words themselves are
 * the interface; the only framed surfaces are actual text workspaces.
 * ========================================================================== */
:root {
  --proof-ink: oklch(0.18 0.025 145);
  --proof-paper: oklch(0.975 0.014 105);
  --proof-paper-2: oklch(0.94 0.025 112);
  --proof-lime: oklch(0.89 0.19 126);
  --proof-leaf: oklch(0.58 0.18 133);
  --proof-gold: oklch(0.85 0.16 88);
  --proof-blue: oklch(0.71 0.16 252);
  --proof-select: oklch(0.76 0.14 248 / 0.52);
  --proof-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.proof {
  position: relative;
  overflow: clip;
  padding: clamp(6.5rem, 12vw, 10rem) 0;
  color: var(--proof-ink);
}
.proof-stage { position: relative; width: 100%; }
.proof-shell {
  width: min(100%, 92rem);
  min-height: min(52rem, 82svh);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
}
.proof-copy { position: relative; z-index: 2; }
.proof-title {
  max-width: 12ch;
  color: currentColor;
  font-family: var(--font-title);
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.9;
}
.proof-title span { color: color-mix(in oklab, currentColor 52%, transparent); }
.proof-copy > p {
  max-width: 38ch;
  margin-top: clamp(1.25rem, 2.5vw, 2.25rem);
  color: color-mix(in oklab, currentColor 73%, transparent);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 520;
  line-height: 1.45;
}
.proof-copy strong { color: currentColor; font-weight: 760; }

/* ---------------------------------------------------------------- dictate */
.proof--dictate {
  background: var(--proof-ink);
  color: var(--proof-paper);
}
.proof-shell--dictate {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(29rem, 1.45fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
}
.proof-copy--dictate { align-self: start; padding-top: clamp(2rem, 8vh, 6rem); }
.proof-copy--dictate .proof-title { font-size: clamp(3.25rem, 6.2vw, 6.7rem); }
.proof-copy--dictate .proof-title span { color: var(--proof-lime); }

.dictate-demo {
  position: relative;
  isolation: isolate;
  min-height: clamp(29rem, 64vh, 43rem);
  display: grid;
  align-content: center;
}
.dictate-demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -6% 2% 5%;
  background: var(--proof-lime);
  border-radius: 48% 52% 44% 56% / 46% 42% 58% 54%;
  transform: rotate(-2deg);
}
.dictate-field {
  position: relative;
  min-height: clamp(17rem, 32vh, 23rem);
  display: grid;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid oklch(0.18 0.025 145 / 0.2);
  border-radius: 1.65rem;
  background: var(--proof-paper);
  box-shadow: 0 2rem 5rem oklch(0.09 0.02 145 / 0.24);
  color: var(--proof-ink);
}
.dictate-field p {
  grid-area: 1 / 1;
  max-width: 25ch;
  font-size: clamp(1.55rem, 3vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.12;
}
.dictate-raw { opacity: 0; transform: translateY(-0.5rem); }
.dictate-raw .rough {
  color: oklch(0.48 0.035 145);
  text-decoration: underline;
  text-decoration-color: oklch(0.72 0.15 126 / 0.72);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
}
.dictate-final { opacity: 1; }
.dictate-caret {
  position: absolute;
  left: clamp(2rem, 5vw, 4.5rem);
  top: 52%;
  width: 2px;
  height: 1.15em;
  background: var(--proof-leaf);
  opacity: 0;
}
.dictate-gesture {
  position: absolute;
  z-index: 3;
  top: 2%;
  right: 4%;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}
.dictate-key { display: block; }
.dictate-key .keycap { --cap: clamp(4.4rem, 7vw, 6.25rem); }
.dictate-orb {
  width: clamp(3rem, 5vw, 4.4rem);
  aspect-ratio: 1;
  padding: 0.32rem;
  border-radius: 1rem;
  background: var(--proof-ink);
  box-shadow: 0 0.8rem 2rem oklch(0.09 0.02 145 / 0.26);
}
.dictate-orb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.72rem; }
.dictate-foot {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.75rem 0.4rem 0;
  color: var(--proof-ink);
  font-size: 0.82rem;
  font-weight: 690;
  letter-spacing: 0.01em;
}
.dictate-listening { opacity: 0; }
.dictate-wave { width: 2.5rem; height: 1rem; margin-left: 0.75rem; color: var(--proof-lime); opacity: 0; }
.dictate-wave { color: var(--proof-ink); }
.dictate-wave i,
.edit-wave i { background: currentColor; }
.dictate-ready { margin-left: auto; color: var(--proof-ink); opacity: 1; }

/* ----------------------------------------------------------------- memory */
.proof--memory {
  background: var(--proof-lime);
  color: var(--proof-ink);
}
.proof-shell--memory {
  display: grid;
  grid-template-columns: minmax(32rem, 1.35fr) minmax(17rem, 0.7fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}
.proof-copy--memory { grid-column: 2; }
.proof-copy--memory .proof-title { font-size: clamp(3rem, 5.8vw, 6.1rem); }
.proof-copy--memory .proof-title span { color: oklch(0.36 0.08 139); }
.memory-demo {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-height: clamp(31rem, 68vh, 45rem);
  display: grid;
  align-content: center;
  gap: 1.5rem;
}
.memory-field {
  position: relative;
  min-height: 13.5rem;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 1.6rem 1.6rem 0.5rem 1.6rem;
  background: var(--proof-paper);
  box-shadow: 0 1.8rem 4.5rem oklch(0.30 0.08 130 / 0.18);
}
.memory-field-mark {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.62rem;
}
.memory-field > p {
  position: relative;
  font-size: clamp(1.55rem, 3vw, 3rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 1.18;
}
.memory-name { position: relative; display: inline-grid; isolation: isolate; }
.memory-old,
.memory-new { grid-area: 1 / 1; white-space: nowrap; }
.memory-old { opacity: 0; }
.memory-new { position: relative; z-index: 2; opacity: 1; }
.memory-sweep {
  position: absolute;
  z-index: 1;
  inset: -0.08em -0.08em -0.02em;
  border-radius: 0.18em;
  background: var(--proof-select);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}
.memory-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.08em;
  transform: translateY(0.12em);
  background: currentColor;
  opacity: 0;
}
.memory-pocket {
  position: absolute;
  z-index: 3;
  right: -1.5rem;
  top: 52%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 13rem;
  padding: 1rem 1.15rem;
  border-radius: 0.45rem 1.2rem 1.2rem 1.2rem;
  background: var(--proof-ink);
  color: var(--proof-paper);
  box-shadow: 0 1.2rem 2.8rem oklch(0.21 0.06 140 / 0.26);
  opacity: 1;
}
.memory-pocket img { border-radius: 0.75rem; }
.memory-pocket span { display: grid; line-height: 1.1; }
.memory-pocket strong { font-size: 1rem; font-weight: 760; }
.memory-pocket small { margin-top: 0.35rem; color: var(--proof-lime); font-size: 0.7rem; }
.memory-later {
  width: calc(100% - 4rem);
  margin-left: 4rem;
  padding: 1.2rem 1.5rem;
  border-top: 1px solid oklch(0.18 0.025 145 / 0.25);
  opacity: 1;
}
.memory-later > span {
  display: block;
  margin-bottom: 0.35rem;
  color: oklch(0.36 0.08 139);
  font-size: 0.72rem;
  font-weight: 760;
}
.memory-later p { font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 620; }
.memory-later strong { text-decoration: underline; text-decoration-thickness: 0.16em; text-underline-offset: 0.1em; }

/* ---------------------------------------------------------------- persona */
.proof--persona {
  background: var(--proof-paper);
  color: var(--proof-ink);
}
.proof--persona::before {
  content: "";
  position: absolute;
  width: min(46rem, 66vw);
  aspect-ratio: 1;
  right: -12rem;
  bottom: -24rem;
  border-radius: 50%;
  background: var(--proof-blue);
  opacity: 0.22;
}
.proof-shell--persona {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: clamp(2.5rem, 6vh, 5rem);
}
.proof-copy--persona {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: 3rem;
}
.proof-copy--persona .proof-title { max-width: 10ch; }
.proof-copy--persona .proof-title span { color: var(--proof-blue); }
.proof-copy--persona > p { justify-self: end; margin-bottom: 0.65rem; }
.persona-demo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(28rem, 1.35fr);
  min-height: clamp(24rem, 44vh, 34rem);
  overflow: hidden;
  border: 1px solid oklch(0.18 0.025 145 / 0.16);
  border-radius: 1.6rem;
  background: oklch(0.94 0.02 112);
  box-shadow: 0 1.5rem 4rem oklch(0.18 0.025 145 / 0.10);
}
.persona-identity {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--proof-ink);
  color: var(--proof-paper);
}
.persona-identity > strong {
  max-width: 7ch;
  font-size: clamp(2.25rem, 4.2vw, 4.5rem);
  font-weight: 680;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
.persona-apps {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.65rem, 1.4vw, 1rem);
  padding: 0;
}
.app-glyph {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  color: var(--proof-paper);
}
.app-glyph svg {
  width: clamp(2.7rem, 4vw, 3.5rem);
  height: auto;
  padding: 0.55rem;
  overflow: visible;
  border-radius: 0.8rem;
  background: oklch(0.25 0.025 145);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-glyph small { color: oklch(0.78 0.02 120); font-size: 0.6rem; }
.app-glyph--slack svg { stroke: none; }
.slack-a { fill: #36c5f0; }
.slack-b { fill: #2eb67d; }
.slack-c { fill: #ecb22e; }
.slack-d { fill: #e01e5a; }
.app-glyph--linear svg { stroke-width: 1.7; }
.persona-message {
  position: relative;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 6vw, 5.5rem);
  overflow: hidden;
}
.persona-message::before {
  content: "";
  position: absolute;
  width: 22rem;
  aspect-ratio: 1;
  right: -8rem;
  top: -10rem;
  border-radius: 50%;
  background: var(--proof-blue);
  opacity: 0.18;
}
.persona-message p { position: relative; z-index: 1; }
.persona-raw,
.persona-final {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 25ch;
  font-size: clamp(1.45rem, 2.7vw, 2.8rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.persona-raw { color: oklch(0.44 0.03 145); opacity: 0; transform: translateY(-0.4rem); }
.persona-final { opacity: 1; }
.persona-final strong {
  color: oklch(0.47 0.18 254);
  font-weight: 760;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
}
.persona-rule {
  grid-area: 2 / 1;
  align-self: end;
  justify-self: end;
  margin-top: auto;
  padding-top: 1rem;
  color: oklch(0.43 0.12 253);
  font-size: 0.75rem;
  font-weight: 720;
  opacity: 1;
}

/* -------------------------------------------------------------------- edit */
.proof--edit {
  background: var(--proof-gold);
  color: var(--proof-ink);
}
.proof-shell--edit {
  display: grid;
  grid-template-columns: minmax(15rem, 0.62fr) minmax(32rem, 1.4fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
}
.proof-copy--edit .proof-title { font-size: clamp(3rem, 5.8vw, 6.2rem); }
.proof-copy--edit .proof-title span { color: oklch(0.42 0.1 75); }
.edit-demo {
  position: relative;
  min-height: clamp(29rem, 62vh, 43rem);
  display: grid;
  align-content: center;
  isolation: isolate;
}
.edit-demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11% -4% 4% 4%;
  border-radius: 55% 45% 52% 48% / 42% 51% 49% 58%;
  background: oklch(0.93 0.08 92);
  transform: rotate(1.5deg);
}
.edit-page {
  min-height: clamp(17rem, 32vh, 23rem);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid oklch(0.18 0.025 145 / 0.18);
  border-radius: 1.5rem;
  background: var(--proof-paper);
  box-shadow: 0 1.8rem 4rem oklch(0.42 0.10 75 / 0.18);
}
.edit-line {
  display: grid;
  width: 100%;
  font-size: clamp(1.75rem, 3.4vw, 3.65rem);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1.12;
}
.edit-before,
.edit-after { grid-area: 1 / 1; }
.edit-before {
  width: fit-content;
  padding: 0 0.08em 0.06em;
  border-radius: 0.16em;
  background: var(--proof-select);
  opacity: 0;
}
.edit-after { opacity: 1; }
.edit-command {
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 7%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100% - 5rem);
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border-radius: 1.05rem;
  background: var(--proof-ink);
  color: var(--proof-paper);
  box-shadow: 0 1rem 2.5rem oklch(0.28 0.06 80 / 0.24);
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-style: italic;
}
.edit-command img { flex: none; border-radius: 0.7rem; }
.edit-command > span:last-child { display: flex; gap: 0.28em; }
.edit-wave { width: 2.3rem; height: 0.95rem; flex: none; color: var(--proof-lime); opacity: 0; }
.edit-keys {
  position: absolute;
  right: 7%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: oklch(0.38 0.07 76);
  font-size: 0.72rem;
}
.edit-keys kbd {
  min-width: 2.4rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid oklch(0.18 0.025 145 / 0.25);
  border-bottom-width: 3px;
  border-radius: 0.5rem;
  background: var(--proof-paper);
  color: var(--proof-ink);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 720;
  text-align: center;
}
.edit-receipt {
  position: absolute;
  left: 8%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--proof-ink);
  font-size: 0.8rem;
  font-weight: 760;
  opacity: 1;
}
.edit-receipt svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Desktop scroll only controls the short semantic action. The entire scene is
   readable before sticky mode begins and remains still for the final quarter. */
@media (min-width: 960px) and (min-height: 560px) {
  .story-v8 .proof { height: 165svh; padding: 0; }
  .story-v8 .proof--dictate { height: 180svh; }
  .story-v8 .proof--persona { height: 170svh; }
  .story-v8 .proof-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-items: center;
    padding: calc(var(--nav-h) + 1.5rem) 0 1.5rem;
  }
  .story-v8 .proof-shell { min-height: min(46rem, calc(100svh - var(--nav-h) - 3rem)); }
}

/* Mobile is a deliberately authored cut. It shows complete proofs in ordinary
   document flow, never sticky desktop scenes squeezed into a phone. */
@media (max-width: 959.98px) {
  .proof { padding: clamp(5.5rem, 13vw, 8rem) 0; }
  .proof-shell { min-height: 0; }
  .proof-title { font-size: clamp(2.9rem, 12vw, 5.4rem); }
  .proof-copy > p { font-size: 1rem; }
  .proof-shell--dictate,
  .proof-shell--memory,
  .proof-shell--edit { grid-template-columns: 1fr; gap: 3.5rem; }
  .proof-copy--dictate { padding-top: 0; }
  .proof-copy--memory { grid-column: 1; grid-row: 1; }
  .memory-demo { grid-column: 1; grid-row: 2; }
  .dictate-demo,
  .memory-demo,
  .edit-demo { min-height: 29rem; }
  .dictate-demo::before { inset: 7% -12% 1% 3%; }
  .dictate-field,
  .edit-page { min-height: 18rem; padding: 2rem; }
  .dictate-field p,
  .memory-field > p,
  .edit-line { font-size: clamp(1.55rem, 7vw, 2.45rem); }
  .dictate-key .keycap { --cap: 4.4rem; }
  .dictate-gesture { right: 2%; }
  .memory-field { min-height: 13rem; padding: 2rem; }
  .memory-pocket { right: 0; top: 54%; }
  .memory-later { width: calc(100% - 1.5rem); margin-left: 1.5rem; }
  .proof-shell--persona { gap: 3rem; }
  .proof-copy--persona { grid-template-columns: 1fr; gap: 0; }
  .proof-copy--persona > p { justify-self: start; }
  .persona-demo { grid-template-columns: 1fr; }
  .persona-identity { min-height: 13rem; padding: 1.5rem; }
  .persona-identity > strong { max-width: none; font-size: 2.8rem; }
  .persona-apps { margin-top: 2rem; padding: 0; }
  .persona-message { min-height: 22rem; padding: 2rem; }
  .persona-raw,
  .persona-final { font-size: clamp(1.45rem, 6.5vw, 2.3rem); }
  .proof-copy--edit { grid-column: 1; grid-row: 1; }
  .edit-demo { grid-column: 1; grid-row: 2; }
  .edit-command { left: 3%; top: 4%; }
  .edit-keys { right: 3%; bottom: 4%; }
  .edit-receipt { left: 3%; bottom: 4%; }
}

/* A short laptop remains a wide composition. Motion becomes time-based rather
   than sticky below 560px, but the product proof never drops below the fold. */
@media (min-width: 960px) and (max-height: 700px) {
  .proof-shell {
    min-height: 0;
    padding-inline: clamp(2rem, 4vw, 4rem);
  }
  .proof-title,
  .proof-copy--dictate .proof-title,
  .proof-copy--memory .proof-title,
  .proof-copy--edit .proof-title { font-size: clamp(2.7rem, 8.5vh, 4.2rem); }
  .proof-copy > p { margin-top: 0.85rem; font-size: 0.92rem; }
  .proof-shell--dictate,
  .proof-shell--memory,
  .proof-shell--edit { gap: clamp(2rem, 4vw, 4rem); }
  .proof-copy--dictate { padding-top: 1rem; }
  .dictate-demo,
  .edit-demo { min-height: min(26rem, calc(100svh - var(--nav-h) - 2rem)); }
  .dictate-field,
  .edit-page { min-height: clamp(14rem, 42vh, 18rem); padding: 2rem; }
  .dictate-field p,
  .edit-line { font-size: clamp(1.45rem, 4.5vh, 2.35rem); }
  .memory-demo { min-height: min(27rem, calc(100svh - var(--nav-h) - 2rem)); gap: 0.8rem; }
  .memory-field { min-height: clamp(10rem, 34vh, 12rem); padding: 2rem; }
  .memory-field > p { font-size: clamp(1.4rem, 4.3vh, 2.25rem); }
  .memory-pocket { top: 47%; }
  .memory-later { padding-block: 0.8rem; }
  .proof-shell--persona { gap: clamp(1rem, 3vh, 1.6rem); }
  .proof-copy--persona { align-items: center; }
  .persona-demo { min-height: min(21rem, calc(100svh - var(--nav-h) - 8rem)); }
  .persona-identity,
  .persona-message { padding: 1.5rem; }
  .persona-identity > strong { font-size: clamp(2.1rem, 6vh, 3.2rem); }
  .persona-raw,
  .persona-final { font-size: clamp(1.35rem, 3.7vh, 2rem); }
}

@media (min-width: 960px) and (max-height: 559.98px) {
  .proof {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: calc(var(--nav-h) + 0.75rem) 0 0.75rem;
  }
  .proof-shell--dictate,
  .proof-shell--memory,
  .proof-shell--edit {
    grid-template-columns: minmax(13rem, 0.68fr) minmax(28rem, 1.45fr);
  }
  .proof-shell--memory { grid-template-columns: minmax(28rem, 1.45fr) minmax(13rem, 0.68fr); }
  .proof-copy--memory { grid-column: 2; }
  .memory-demo { grid-column: 1; grid-row: 1; }
}

@media (max-width: 520px) {
  .proof-shell { padding-inline: 1rem; }
  .proof-title { font-size: clamp(2.65rem, 13.5vw, 4.25rem); }
  .dictate-demo,
  .memory-demo,
  .edit-demo { min-height: 26rem; }
  .dictate-field,
  .edit-page { border-radius: 1.1rem; }
  .dictate-orb { display: none; }
  .memory-pocket { min-width: 11.5rem; padding: 0.8rem; }
  .memory-pocket img { width: 2.25rem; height: 2.25rem; }
  .memory-later { margin-left: 0; width: 100%; }
  .persona-demo { border-radius: 1.1rem; }
  .persona-identity { min-height: 11.5rem; }
  .app-glyph small { display: none; }
  .edit-command { max-width: calc(100% - 2rem); }
  .edit-command .edit-wave { display: none; }
  .edit-keys { bottom: 2%; }
  .edit-receipt { bottom: 9%; }
}

@media (prefers-reduced-motion: reduce) {
  .proof { height: auto !important; }
  .proof-stage { position: relative !important; height: auto !important; }
}

/* =============================================================================
 * V10 product chapters
 *
 * These four scenes deliberately ignore the old proof-card grammar above. A
 * chapter is ordinary document flow; the artifact exists in its finished state
 * before JavaScript adds a bounded arrival play. Host chrome is atmosphere at
 * low contrast. The changed words are the sharpest thing in every frame.
 * ========================================================================== */

.v9-chapter {
  --v9-ink: #171a1d;
  --v9-muted: #667078;
  --v9-blue: #3178f6;
  --v9-blue-wash: rgba(49, 120, 246, 0.16);
  --v9-line: rgba(19, 24, 29, 0.11);
  --v9-world-image: none;
  --v9-world-position: center;
  --v9-world-grade: linear-gradient(rgba(246, 243, 234, 0.1), rgba(246, 243, 234, 0.1));
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  padding: calc(var(--nav-h) + clamp(2rem, 5vh, 4.5rem)) 0 clamp(3.5rem, 8vh, 7rem);
  color: var(--v9-ink);
  font-family: var(--font-body);
  scroll-margin-top: 0;
}

.v9-chapter::before,
.v9-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.v9-chapter::before {
  background-color: var(--canvas);
  background-image: var(--v9-world-image);
  background-position: var(--v9-world-position);
  background-repeat: no-repeat;
  background-size: cover;
}

.v9-chapter::after {
  background:
    linear-gradient(
      to bottom,
      var(--canvas) 0,
      rgba(246, 243, 234, 0) 11%,
      rgba(246, 243, 234, 0) 89%,
      var(--canvas) 100%
    ),
    var(--v9-world-grade);
}

.v9-chapter--dictate {
  --v9-world-image: url("../art/p2-sunrise.jpg");
  --v9-world-position: center;
  --v9-world-grade: linear-gradient(
    90deg,
    rgba(247, 240, 217, 0.94) 0,
    rgba(247, 240, 217, 0.79) 27%,
    rgba(247, 240, 217, 0.31) 54%,
    rgba(247, 240, 217, 0.08) 100%
  );
}

.v9-chapter--memory {
  --v9-world-image: url("../art/p3-morning.jpg");
  --v9-world-position: center;
  --v9-world-grade: linear-gradient(
    90deg,
    rgba(241, 245, 236, 0.2) 0,
    rgba(241, 245, 236, 0.2) 52%,
    rgba(246, 241, 220, 0.84) 77%,
    rgba(246, 241, 220, 0.95) 100%
  );
}

.v9-chapter--persona {
  --v9-world-image: none;
  --v9-world-position: center;
  --v9-world-grade: linear-gradient(
    90deg,
    rgba(247, 239, 216, 0.92) 0,
    rgba(247, 239, 216, 0.76) 28%,
    rgba(247, 239, 216, 0.22) 53%,
    rgba(247, 239, 216, 0.04) 100%
  );
}

.v9-chapter--edit {
  --v9-ink: #f2ecdc;
  --v9-muted: rgba(236, 231, 217, 0.76);
  --v9-world-image: none;
  --v9-world-position: center;
  --v9-world-grade: linear-gradient(
    90deg,
    rgba(7, 13, 28, 0.16) 0,
    rgba(7, 13, 28, 0.2) 48%,
    rgba(7, 13, 28, 0.74) 76%,
    rgba(7, 13, 28, 0.9) 100%
  );
}

.v9-frame {
  position: relative;
  z-index: 2;
  width: min(90rem, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5.2vw, 4.75rem);
}

.v10-world-kivi {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(7.5rem, 10vw, 10.5rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  filter:
    drop-shadow(1px 0 0 #f0ecd4)
    drop-shadow(-1px 0 0 #f0ecd4)
    drop-shadow(0 1px 0 #f0ecd4)
    drop-shadow(0 -1px 0 #f0ecd4)
    drop-shadow(0.2rem 0.35rem 0 rgba(9, 15, 10, 0.2));
}

.v10-world-kivi--rio {
  left: 26%;
  bottom: clamp(0.85rem, 3.5vh, 2.5rem);
}

.v10-world-kivi--blossom {
  right: 1.5%;
  bottom: clamp(4.5rem, 8vh, 6.5rem);
}

.v9-frame--split,
.v9-frame--memory {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(35rem, 1.48fr);
  align-items: center;
  gap: clamp(3.5rem, 7vw, 7.5rem);
}

.v9-frame--memory {
  grid-template-columns: minmax(35rem, 1.48fr) minmax(18rem, 0.76fr);
}

.v9-frame--persona {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(35rem, 1.48fr);
  align-items: center;
  gap: clamp(3.5rem, 7vw, 7.5rem);
}

.v9-copy {
  max-width: 32rem;
  position: relative;
  z-index: 3;
}

.v9-copy h2 {
  margin: 0;
  max-width: 12ch;
  color: var(--v9-ink);
  font-family: var(--font-marque);
  font-size: clamp(3rem, 5.2vw, 5.2rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.044em;
  text-wrap: balance;
}

.v9-frame--persona .v9-copy {
  max-width: 32rem;
  display: block;
}

.v9-frame--persona .v9-copy h2 { max-width: 15ch; }

.v9-copy p {
  margin: clamp(1.4rem, 3vh, 2rem) 0 0;
  max-width: 29rem;
  color: var(--v9-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 470;
  line-height: 1.58;
  letter-spacing: -0.018em;
}

.v9-frame--persona .v9-copy p { margin-top: clamp(1.4rem, 3vh, 2rem); }
.v9-copy strong { color: var(--v9-ink); font-weight: 650; }
.v9-word,
.v9-rough-word,
.v9-persona-word { display: inline-block; }

.v9-replay {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 9;
  width: 2.35rem;
  height: 2.35rem;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(20, 26, 30, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(20, 26, 30, 0.54);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(27, 34, 39, 0.08);
  backdrop-filter: blur(14px);
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.js .v9-replay { display: grid; }
.v9-replay:hover { background: rgba(255, 255, 255, 0.86); color: #171b1f; transform: rotate(-18deg); }
.v9-replay:focus-visible { outline: 2px solid var(--v9-blue); outline-offset: 3px; }
.v9-replay svg { width: 1rem; height: 1rem; }
.v9-replay path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v9-replay--dark {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(240, 245, 252, 0.52);
}
.v9-replay--dark:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.v9-chapter.is-playing .v9-replay { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------- dictation */
.v9-desk {
  position: relative;
  min-height: clamp(30rem, 56vw, 41rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background:
    linear-gradient(145deg, rgba(205, 219, 226, 0.22), rgba(225, 219, 209, 0.3)),
    url("../art/v9-optical-dawn.webp") center / cover no-repeat,
    #dfe3e2;
  box-shadow:
    0 2px 1px rgba(20, 25, 30, 0.05),
    0 22px 48px rgba(42, 48, 52, 0.16),
    0 65px 120px rgba(42, 48, 52, 0.11),
    inset 0 1px rgba(255, 255, 255, 0.86);
}

.v9-desk,
.v9-memory,
.v9-edit {
  border-radius: var(--r-md);
}

.v9-desk::before,
.v9-desk::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.v9-desk::before {
  inset: 2.7rem 0 0;
  background:
    linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.16) 42.2%, transparent 42.7%),
    radial-gradient(ellipse at 77% 82%, rgba(255, 237, 204, 0.58), transparent 18rem);
}

.v9-desk::after {
  width: 12rem;
  height: 12rem;
  right: -5rem;
  bottom: -4rem;
  border-radius: 50%;
  background: rgba(39, 54, 60, 0.13);
  filter: blur(20px);
}

.v9-desk__menubar {
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(28, 35, 40, 0.1);
  background: rgba(247, 249, 248, 0.46);
  color: rgba(22, 28, 31, 0.54);
  font-size: 0.73rem;
  font-weight: 610;
  letter-spacing: 0.01em;
  backdrop-filter: blur(18px) saturate(1.15);
}

.v9-menubar-word { color: rgba(17, 22, 25, 0.78); }

.v9-paper {
  position: absolute;
  inset: clamp(4.8rem, 9%, 6.2rem) clamp(2.5rem, 8%, 5.8rem) clamp(3.5rem, 8%, 5.2rem);
  overflow: hidden;
  border: 1px solid rgba(27, 31, 34, 0.09);
  border-radius: 1.15rem;
  background: rgba(253, 253, 251, 0.94);
  box-shadow:
    0 1px 1px rgba(21, 27, 31, 0.06),
    0 17px 35px rgba(29, 37, 41, 0.12),
    0 48px 70px rgba(29, 37, 41, 0.08);
  backdrop-filter: blur(20px);
}

.v9-paper__bar,
.v9-edit__bar {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.35rem;
  border-bottom: 1px solid var(--v9-line);
  color: rgba(25, 29, 32, 0.47);
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.v9-paper__body { padding: clamp(2rem, 5vw, 4rem); }
.v9-paper__label {
  margin: 0 0 1rem;
  color: rgba(24, 28, 31, 0.4);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.v9-landed {
  margin: 0;
  max-width: 17ch;
  color: #16191c;
  font-size: clamp(2rem, 3.6vw, 3.55rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.046em;
}

.v9-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.12em;
  border-radius: 2px;
  background: var(--v9-blue);
  vertical-align: -0.06em;
}

.v9-capture {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(1.25rem, 3vw, 2rem);
  width: 3.55rem;
  min-height: 3.55rem;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  padding: 0.36rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 18% 10%, rgba(84, 123, 255, 0.22), transparent 7rem),
    rgba(9, 12, 16, 0.95);
  color: #f4f7fb;
  box-shadow:
    0 1px rgba(255, 255, 255, 0.1) inset,
    0 12px 24px rgba(5, 8, 12, 0.22),
    0 30px 70px rgba(5, 8, 12, 0.18);
  transform: translateX(-50%);
  backdrop-filter: blur(28px) saturate(1.3);
}

.v9-capture > img {
  width: 2.8rem;
  height: 2.8rem;
  display: block;
  border-radius: 0.9rem;
}

.v9-capture__rough {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(247, 249, 252, 0.88);
  font-size: clamp(0.9rem, 1.25vw, 1.08rem);
  font-weight: 470;
  line-height: 1.45;
  letter-spacing: -0.02em;
  opacity: 0;
  display: -webkit-box;
  max-height: 3.35rem;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v9-capture__key {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.v9-capture .keycap { --cap: 2.85rem; }

/* -------------------------------------------------------------- memory */
.v9-memory {
  position: relative;
  isolation: isolate;
  min-height: clamp(31rem, 52vw, 39rem);
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.92), transparent 18rem),
    linear-gradient(145deg, rgba(216, 229, 237, 0.84), rgba(241, 239, 232, 0.92) 66%, rgba(226, 217, 202, 0.9));
  box-shadow:
    0 2px 1px rgba(35, 41, 45, 0.04),
    0 28px 65px rgba(46, 54, 60, 0.13),
    0 70px 120px rgba(46, 54, 60, 0.08);
}

.v9-take {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(25, 31, 36, 0.1);
  border-radius: 1.35rem;
  background: rgba(255, 255, 253, 0.96);
  box-shadow: 0 18px 50px rgba(38, 47, 53, 0.12), 0 2px 2px rgba(38, 47, 53, 0.05);
}

.v9-take__head {
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--v9-line);
  color: rgba(28, 34, 38, 0.52);
  font-size: 0.78rem;
  font-weight: 600;
}

.v9-take__head > span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(24, 30, 34, 0.72);
}

.v9-take__head img { width: 1.75rem; height: 1.75rem; border-radius: 0.55rem; }
.v9-take__text {
  min-height: clamp(10.5rem, 19vw, 14rem);
  display: block;
  margin: 0;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: #171a1d;
  font-size: clamp(1.7rem, 2.7vw, 2.75rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.045em;
}

.v9-name {
  position: relative;
  display: inline-grid;
  margin-right: 0.24em;
}
.v9-name__old,
.v9-name__new { grid-area: 1 / 1; }
.v9-name__old { visibility: hidden; }
.v9-name__new {
  margin: -0.08em -0.12em;
  padding: 0.08em 0.12em;
  border-radius: 0.18em;
  background: linear-gradient(180deg, transparent 8%, rgba(119, 167, 255, 0.32) 8%, rgba(93, 149, 255, 0.32) 92%, transparent 92%);
}

.v9-memory__thread {
  position: relative;
  z-index: 1;
  height: 3rem;
  margin-left: clamp(2rem, 5vw, 4rem);
}
.v9-memory__thread::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(rgba(53, 105, 219, 0.44), rgba(53, 105, 219, 0.1));
}
.v9-memory__thread span {
  position: absolute;
  left: -0.22rem;
  bottom: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid #6c9bf6;
  border-radius: 50%;
  background: #f4f3ef;
}

.v9-next {
  position: relative;
  z-index: 2;
  margin-left: clamp(1.25rem, 5vw, 4rem);
  padding: 1.35rem 1.5rem 1.5rem;
  border: 1px solid rgba(25, 31, 36, 0.1);
  border-radius: 1.05rem;
  background: rgba(255, 255, 253, 0.8);
  box-shadow: 0 14px 38px rgba(42, 50, 56, 0.09);
  backdrop-filter: blur(18px);
}
.v9-next__label {
  display: block;
  margin-bottom: 0.55rem;
  color: #4f79cc;
  font-size: 0.72rem;
  font-weight: 670;
  letter-spacing: 0.02em;
}
.v9-next p {
  margin: 0;
  color: #181c20;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 540;
  line-height: 1.42;
  letter-spacing: -0.025em;
}

/* -------------------------------------------------------------- persona */
.v9-persona-play {
  position: relative;
  min-height: clamp(31rem, 43vw, 37rem);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.9rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgba(240, 236, 220, 0.18);
  border-radius: var(--r-md);
  background: rgba(12, 16, 13, 0.94);
  color: var(--forest-ink1);
  box-shadow:
    0 1px rgba(255, 255, 255, 0.07) inset,
    0 24px 60px rgba(12, 18, 13, 0.24),
    0 70px 110px rgba(12, 18, 13, 0.14);
}

.v9-persona-source {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(240, 236, 220, 0.13);
}

.v9-persona-source > span,
.v9-persona-result > div > span {
  color: var(--brand-green);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.v9-persona-source p {
  margin: 0;
  color: rgba(233, 231, 221, 0.68);
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  font-weight: 470;
  line-height: 1.5;
  letter-spacing: -0.018em;
}

.v9-persona-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.v9-persona-rooms button {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgba(240, 236, 220, 0.11);
  border-radius: var(--r-sm);
  background: rgba(240, 236, 220, 0.035);
  color: rgba(233, 231, 221, 0.58);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 180ms var(--proof-ease), border-color 180ms var(--proof-ease), color 180ms var(--proof-ease), transform 180ms var(--proof-ease);
}

.v9-persona-rooms button:hover {
  border-color: rgba(144, 196, 106, 0.34);
  color: rgba(240, 237, 225, 0.9);
}

.v9-persona-rooms button:disabled,
.v9-persona-custom button:disabled { cursor: default; }

.v9-persona-rooms button:focus-visible,
.v9-persona-custom button:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.v9-persona-rooms button.is-active {
  border-color: rgba(144, 196, 106, 0.58);
  background: rgba(144, 196, 106, 0.13);
  color: var(--forest-ink1);
  transform: translateY(-2px);
}

.v9-persona-rooms button span {
  overflow: hidden;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.v9-persona-rooms button small {
  overflow: hidden;
  color: rgba(233, 231, 221, 0.42);
  font-size: 0.62rem;
  font-weight: 520;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v9-persona-rooms button.is-active small { color: rgba(206, 224, 190, 0.66); }

.v9-persona-result {
  min-height: clamp(12rem, 19vw, 15rem);
  display: grid;
  align-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-sm);
  background: var(--canvas);
  color: var(--ink1);
  box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset;
}

.v9-persona-result > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.v9-persona-result > div > small {
  color: var(--ink3);
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.v9-persona-result > p {
  max-width: 22ch;
  margin: 0;
  color: var(--ink1);
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  font-weight: 520;
  line-height: 1.14;
  letter-spacing: -0.048em;
}

.v9-persona-custom {
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.45fr) minmax(0, 1.55fr);
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.15rem 0;
  border-top: 1px solid rgba(240, 236, 220, 0.13);
}

.v9-persona-custom button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--forest-ink1);
  font: 640 0.72rem/1.2 var(--font-body);
  cursor: pointer;
}

.v9-persona-custom button i {
  position: relative;
  width: 1.9rem;
  height: 1.05rem;
  flex: none;
  border: 1px solid rgba(240, 236, 220, 0.22);
  border-radius: 999px;
  background: rgba(240, 236, 220, 0.08);
}

.v9-persona-custom button i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgba(240, 236, 220, 0.56);
  transition: transform 180ms var(--proof-ease), background 180ms var(--proof-ease);
}

.v9-persona-custom.is-on button i {
  border-color: rgba(144, 196, 106, 0.58);
  background: rgba(144, 196, 106, 0.19);
}

.v9-persona-custom.is-on button i::after {
  background: var(--brand-green);
  transform: translateX(0.82rem);
}

.v9-persona-custom > p {
  margin: 0;
  color: rgba(233, 231, 221, 0.64);
  font-size: clamp(0.68rem, 0.9vw, 0.78rem);
  font-weight: 500;
  line-height: 1.45;
  transition: opacity 180ms var(--proof-ease);
}

.v9-persona-custom:not(.is-on) > p { opacity: 0.34; }
.v9-persona-custom:not(.is-available) { opacity: 0.46; }
.v9-persona-custom:not(.is-available) button { cursor: default; }

@media (min-width: 1060px) {
  .v9-chapter--edit .v9-frame--split {
    grid-template-columns: minmax(35rem, 1.48fr) minmax(16rem, 0.72fr);
  }

  .v9-chapter--edit .v9-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .v9-chapter--edit .v9-edit {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ------------------------------------------------------------ voice edit */
.v9-edit {
  position: relative;
  min-height: clamp(29rem, 49vw, 37rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(253, 253, 252, 0.88);
  box-shadow:
    0 2px 1px rgba(26, 31, 35, 0.05),
    0 25px 58px rgba(37, 44, 49, 0.14),
    0 70px 120px rgba(37, 44, 49, 0.08);
  backdrop-filter: blur(22px);
}
.v9-edit::before {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  right: -12rem;
  top: -12rem;
  z-index: -1;
  border-radius: 50%;
  background: rgba(133, 178, 238, 0.16);
  filter: blur(30px);
}
.v9-edit__bar { min-height: 4rem; padding-inline: 1.75rem; }
.v9-edit__bar span:last-child { color: #3776d9; font-weight: 650; }
.v9-edit__body {
  max-width: 43rem;
  padding: clamp(2.4rem, 6vw, 5.5rem) clamp(2rem, 6vw, 5.5rem);
}
.v9-edit__body p {
  margin: 0 0 1.1rem;
  color: rgba(21, 25, 28, 0.75);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 470;
  line-height: 1.58;
  letter-spacing: -0.025em;
}
.v9-selection {
  position: relative;
  display: grid;
  margin-block: 1.65rem !important;
}
.v9-selection__before,
.v9-selection__after {
  grid-area: 1 / 1;
  width: fit-content;
  margin: -0.16em -0.22em;
  padding: 0.16em 0.22em;
  border-radius: 0.25em;
}
.v9-selection__before { visibility: hidden; }
.v9-selection__after {
  color: #0f274e;
  background: rgba(94, 153, 247, 0.3);
  box-shadow: 0 0 0 1px rgba(74, 137, 235, 0.08) inset;
}

.v9-command {
  position: absolute;
  z-index: 4;
  left: clamp(2rem, 6vw, 5.5rem);
  top: 42%;
  max-width: calc(100% - 4rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 1.05rem 0.45rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.05rem;
  background: rgba(8, 12, 18, 0.94);
  color: #f4f7fb;
  box-shadow: 0 15px 35px rgba(8, 12, 18, 0.23), 0 35px 75px rgba(8, 12, 18, 0.14);
  opacity: 0;
  transform: translateY(-125%) scale(0.92);
  backdrop-filter: blur(24px);
}
.v9-command img { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; }
.v9-command > span { display: flex; gap: 0.32em; font-size: 0.95rem; font-weight: 530; }
.v9-chord {
  position: absolute;
  right: 1.35rem;
  bottom: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(20, 26, 30, 0.48);
  opacity: 0;
}
.v9-chord kbd {
  min-width: 2.35rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(18, 24, 28, 0.14);
  border-bottom-width: 3px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(18, 24, 28, 0.67);
  font: 600 0.7rem/1 var(--font-body);
  text-align: center;
}
.v9-edit__receipt {
  position: absolute;
  right: 0;
  top: calc(100% + 0.55rem);
  margin: 0;
  color: #416fae;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.v9-edit__receipt::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin-right: 0.55rem;
  background: currentColor;
  vertical-align: 0.25em;
}

/* JavaScript only changes visibility and geometry between these authored end
   states. It never creates layout that the no-JS page depends on. */
.js .v9-chapter.is-primed .v9-landed,
.js .v9-chapter.is-primed .v9-next,
.js .v9-chapter.is-primed .v9-selection__after,
.js .v9-chapter.is-primed .v9-edit__receipt { visibility: hidden; }

.js .v9-chapter.is-primed .v9-name__old,
.js .v9-chapter.is-primed .v9-selection__before { visibility: visible; }

.js .v9-chapter.is-primed .v9-name__old,
.js .v9-chapter.is-primed .v9-selection__before {
  margin: -0.08em -0.12em;
  padding: 0.08em 0.12em;
  border-radius: 0.18em;
  background: rgba(93, 149, 255, 0.32);
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1059.98px) {
  .v9-chapter {
    min-height: auto;
    padding-block: calc(var(--nav-h) + 3.5rem) 6rem;
  }
  .v9-chapter::before {
    background-position: center bottom;
  }
  .v9-chapter::after {
    background:
      linear-gradient(
        to bottom,
        var(--canvas) 0,
        rgba(246, 243, 234, 0.9) 11%,
        rgba(246, 243, 234, 0.2) 36%,
        rgba(246, 243, 234, 0.08) 86%,
        var(--canvas) 100%
      ),
      var(--v9-world-grade);
  }
  .v9-chapter--dictate {
    --v9-world-image: url("../art/light-dawn-terraces.jpg");
    --v9-world-grade: linear-gradient(rgba(246, 243, 234, 0.32), rgba(246, 243, 234, 0.06));
  }
  .v9-chapter--memory {
    --v9-world-image: url("../art/light-blossom-hill.jpg");
    --v9-world-grade: linear-gradient(rgba(246, 243, 234, 0.38), rgba(246, 243, 234, 0.08));
  }
  .v9-chapter--persona {
    --v9-world-image: none;
    --v9-world-grade: linear-gradient(rgba(246, 239, 216, 0.36), rgba(246, 239, 216, 0.06));
  }
  .v9-chapter--edit {
    --v9-world-image: none;
    --v9-world-grade: linear-gradient(rgba(7, 13, 28, 0.38), rgba(7, 13, 28, 0.12));
  }

  .v9-chapter--edit::after {
    background:
      linear-gradient(
        to bottom,
        var(--canvas) 0,
        rgba(7, 13, 28, 0.68) 12%,
        rgba(7, 13, 28, 0.28) 82%,
        var(--canvas) 100%
      ),
      var(--v9-world-grade);
  }

  .v10-world-kivi { display: none; }
  .v9-frame--split,
  .v9-frame--memory,
  .v9-frame--persona {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .v9-frame--memory .v9-copy { grid-row: 1; }
  .v9-frame--memory .v9-memory { grid-row: 2; }
  .v9-frame--persona { gap: 2.75rem; }
  .v9-frame--persona .v9-copy p { margin-top: 1.35rem; }
  .v9-copy h2 { max-width: 15ch; font-size: clamp(3.15rem, 9vw, 5.25rem); }
  .v9-copy p { max-width: 36rem; }
  .v9-desk,
  .v9-memory,
  .v9-edit { min-height: clamp(29rem, 75vw, 38rem); }
  .v9-persona-play { min-height: clamp(31rem, 70vw, 37rem); }
}

@media (max-width: 560px) {
  .v9-chapter { padding-block: calc(var(--nav-h) + 1.25rem) 4rem; }
  .v9-frame { padding-inline: 1rem; }
  .v9-frame--split,
  .v9-frame--memory { gap: 2rem; }
  .v9-copy { padding-inline: 0.3rem; }
  .v9-copy h2 {
    font-size: clamp(2.5rem, 10.8vw, 2.9rem);
    line-height: 0.96;
    letter-spacing: -0.064em;
  }
  .v9-copy p { margin-top: 1.15rem; font-size: 1rem; line-height: 1.55; }

  .v9-desk {
    min-height: 31rem;
    border-radius: 1.5rem;
  }
  .v9-desk__menubar { height: 2.5rem; }
  .v9-paper { inset: 4.1rem 0.9rem 3.2rem; }
  .v9-paper__bar { min-height: 3rem; padding-inline: 1rem; }
  .v9-paper__body { padding: 2rem 1.4rem; }
  .v9-landed { font-size: clamp(1.85rem, 8.5vw, 2.55rem); }
  .v9-capture { bottom: 1rem; }

  .v9-memory { min-height: 29rem; padding: 0.8rem; border-radius: 1.5rem; }
  .v9-take { border-radius: 1.1rem; }
  .v9-take__head { min-height: 3.3rem; padding-inline: 1rem; }
  .v9-take__text {
    min-height: 10.5rem;
    align-items: flex-start;
    padding: 2rem 1.2rem;
    font-size: clamp(1.65rem, 7.9vw, 2.35rem);
  }
  .v9-memory__thread { height: 2rem; margin-left: 1.7rem; }
  .v9-next { margin-left: 0.75rem; padding: 1.15rem; }
  .v9-next p { font-size: 1.05rem; }

  .v9-frame--persona { gap: 2rem; }
  .v9-persona-play { min-height: 33rem; padding: 0.75rem; }
  .v9-persona-source { grid-template-columns: 1fr; gap: 0.35rem; padding: 0.7rem 0.55rem; }
  .v9-persona-rooms { gap: 0.35rem; }
  .v9-persona-rooms button { min-height: 4.6rem; padding: 0.62rem 0.5rem; }
  .v9-persona-rooms button span { font-size: 0.72rem; }
  .v9-persona-rooms button small { font-size: 0.54rem; }
  .v9-persona-result { min-height: 14.5rem; padding: 1.15rem; }
  .v9-persona-result > div { align-items: flex-start; }
  .v9-persona-result > div > small { max-width: 9rem; text-align: right; }
  .v9-persona-result > p { font-size: clamp(1.75rem, 8.6vw, 2.4rem); }
  .v9-persona-custom { grid-template-columns: 1fr; gap: 0.45rem; }
  .v9-persona-custom button { max-width: 12rem; }
  .v9-persona-custom > p { padding-inline: 0.25rem; }

  .v9-edit { min-height: 31rem; border-radius: 1.5rem; }
  .v9-edit__bar { min-height: 3.3rem; padding-inline: 1.15rem; }
  .v9-edit__body { padding: 2.1rem 1.25rem; }
  .v9-edit__body p { font-size: 1.08rem; line-height: 1.52; }
  .v9-selection { margin-block: 1.45rem !important; }
  .v9-command { left: 1.05rem; max-width: calc(100% - 2.1rem); }
  .v9-chord { right: 0.9rem; bottom: 0.9rem; }
  .v9-edit__receipt { right: 0; top: calc(100% + 0.45rem); }
}

@media (min-width: 960px) and (max-height: 700px) {
  .v9-chapter {
    min-height: auto;
    overflow: visible;
    padding-block: calc(var(--nav-h) + 1.25rem) 2.5rem;
  }
  .v9-copy h2 { font-size: clamp(2.65rem, 8.5vh, 4.4rem); }
  .v9-copy p { margin-top: 1rem; font-size: 0.98rem; }
  .v9-desk,
  .v9-memory,
  .v9-edit { min-height: min(30rem, calc(100svh - var(--nav-h) - 3rem)); }
  .v9-persona-play { min-height: 27rem; }
  .v9-frame--persona { gap: 1.5rem; }
}

@media (min-width: 1060px) and (max-height: 600px) {
  .v9-chapter { padding-block: calc(var(--nav-h) + 0.5rem) 1.25rem; }
  .v9-chapter--edit { --v9-world-position: center bottom; }
  .v10-world-kivi--rio {
    bottom: -0.4rem;
    width: 5.5rem;
  }
  .v10-world-kivi--blossom {
    bottom: 5rem;
    width: 6.75rem;
  }
  .v9-frame--persona { gap: 0.75rem; }
  .v9-frame--persona .v9-copy h2 {
    max-width: 13ch;
    font-size: clamp(2.35rem, 7.8vh, 3rem);
    line-height: 0.94;
  }
  .v9-frame--persona .v9-copy p { font-size: 0.88rem; line-height: 1.45; }
  .v9-persona-play {
    min-height: 17rem;
    grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto 1fr auto;
    gap: 0.55rem;
    padding: 0.65rem;
  }
  .v9-persona-source { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 0.2rem; padding: 0.45rem; }
  .v9-persona-source p { font-size: 0.72rem; line-height: 1.35; }
  .v9-persona-rooms { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
  .v9-persona-rooms button { min-height: 0; padding: 0.42rem 0.5rem; }
  .v9-persona-rooms button small { display: none; }
  .v9-persona-result { grid-column: 2; grid-row: 1 / span 2; min-height: 0; padding: 0.8rem; }
  .v9-persona-result > p { font-size: clamp(1.3rem, 4.9vh, 1.85rem); }
  .v9-persona-custom { grid-column: 1 / -1; grid-row: 3; grid-template-columns: auto 1fr; padding-top: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .v9-chapter * { animation: none !important; transition: none !important; }
  .js .v9-replay { display: none; }
  .js .v9-chapter.is-primed .v9-landed,
  .js .v9-chapter.is-primed .v9-next,
  .js .v9-chapter.is-primed .v9-selection__after,
  .js .v9-chapter.is-primed .v9-edit__receipt { visibility: visible; }
  .js .v9-chapter.is-primed .v9-name__old,
  .js .v9-chapter.is-primed .v9-selection__before { visibility: hidden; }
}

/* =============================================================================
 * Product-first homepage
 *
 * The page now follows one proven software-site grammar: a 1248px content
 * ceiling, short alternating chapters, one neo-grotesk type hierarchy and one
 * light product material. Scenery is intentionally absent. The product action
 * is the only illustration.
 * ========================================================================== */

:root {
  --canvas: oklch(0.975 0.004 110);
  --surface1: oklch(0.993 0.002 110);
  --surface2: oklch(0.985 0.003 110);
  --ink1: oklch(0.18 0.012 135);
  --ink2: oklch(0.42 0.012 135);
  --ink3: oklch(0.52 0.01 135);
  --accent: oklch(0.46 0.15 145);
  --hairline: oklch(0.18 0.012 135 / 0.1);
  --hairline-strong: oklch(0.18 0.012 135 / 0.18);
  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-title: var(--font-body);
  --font-marque: var(--font-body);
  --col: 1248px;
}

body {
  background: var(--canvas);
  font-family: var(--font-body);
  font-weight: 450;
  line-height: 1.55;
}

.nav {
  background: oklch(0.975 0.004 110 / 0.9);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.nav-in { max-width: 1248px; }
.nav-links a:not(.btn) { font-size: 0.95rem; font-weight: 520; }
.nav .btn { border-radius: 0.7rem; font-size: 0.95rem; }

.v9-chapter {
  --v9-ink: var(--ink1);
  --v9-muted: var(--ink2);
  --v9-blue: var(--accent);
  --v9-blue-wash: oklch(0.72 0.13 145 / 0.22);
  --v9-line: var(--hairline);
  min-height: 0;
  display: block;
  overflow: clip;
  padding: 0;
  color: var(--ink1);
  background: var(--canvas);
}

.v9-chapter::before,
.v9-chapter::after { display: none; }

.story-shell {
  width: min(calc(100% - clamp(2rem, 13.34vw, 12rem)), 1248px);
  margin-inline: auto;
}

.product-hero {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
  padding-block: clamp(5rem, 10vh, 7.5rem) clamp(6rem, 13vh, 9rem);
}

.product-hero-grid,
.story-split {
  display: grid;
  grid-template-columns: minmax(17.5rem, 0.72fr) minmax(35rem, 1.48fr);
  align-items: center;
  gap: clamp(3.5rem, 6.67vw, 6rem);
}

.story-split--reverse {
  grid-template-columns: minmax(35rem, 1.48fr) minmax(17.5rem, 0.72fr);
}

.story-split--reverse > .story-copy {
  grid-column: 2;
  grid-row: 1;
}

.story-split--reverse > .product-demo {
  grid-column: 1;
  grid-row: 1;
}

.story-copy { max-width: 31rem; }

.product-kicker {
  margin-bottom: 1.5rem;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.product-hero-copy h1,
.story-copy h2,
.story-closing h2 {
  margin: 0;
  color: var(--ink1);
  font-family: var(--font-body);
  font-weight: 560;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.product-hero-copy h1 {
  max-width: 8.5ch;
  font-size: clamp(4rem, 6.67vw, 6rem);
  line-height: 0.95;
}

.story-copy h2 {
  max-width: 12ch;
  font-size: clamp(2.75rem, 3.9vw, 3.5rem);
  line-height: 1;
}

.product-hero-copy > p:not(.product-kicker),
.story-copy > p {
  margin-top: 1.65rem;
  max-width: 27rem;
  color: var(--ink2);
  font-size: clamp(1.125rem, 1.39vw, 1.25rem);
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.story-copy strong { color: var(--ink1); font-weight: 650; }

.product-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}

.product-actions .btn { border-radius: 0.75rem; padding: 1rem 1.4rem; font-size: 1rem; }
.product-actions > span { color: var(--ink3); font-size: 0.9rem; font-weight: 520; }

.story-section {
  padding-block: clamp(6.5rem, 11vw, 9rem);
  border-top: 1px solid var(--hairline);
}

.product-demo,
.v9-desk,
.v9-memory,
.v9-persona-play,
.v9-edit {
  border: 1px solid var(--hairline-strong);
  border-radius: 1.5rem;
  background: oklch(0.945 0.005 120);
  box-shadow: 0 24px 70px oklch(0.18 0.012 135 / 0.08);
}

.v9-desk {
  min-height: clamp(32rem, 45vw, 38rem);
  background: oklch(0.94 0.008 220);
}

.v9-desk::before {
  inset: 2.7rem 0 0;
  background: oklch(0.94 0.008 220);
}

.v9-desk::after,
.v9-edit::before { display: none; }

.v9-desk__menubar {
  background: oklch(0.965 0.004 220);
  backdrop-filter: none;
}

.v9-paper {
  border-color: var(--hairline);
  background: var(--surface1);
  box-shadow: 0 18px 48px oklch(0.18 0.012 135 / 0.08);
  backdrop-filter: none;
}

.v9-landed { color: var(--ink1); }
.v9-caret { background: var(--accent); }

.v9-memory {
  min-height: clamp(32rem, 44vw, 38rem);
  background: oklch(0.95 0.005 120);
  box-shadow: 0 24px 70px oklch(0.18 0.012 135 / 0.08);
}

.v9-take,
.v9-next {
  border-color: var(--hairline);
  background: var(--surface1);
  box-shadow: 0 16px 42px oklch(0.18 0.012 135 / 0.07);
  backdrop-filter: none;
}

.v9-name__new,
.js .v9-chapter.is-primed .v9-name__old {
  background: oklch(0.72 0.13 145 / 0.24);
}

.v9-memory__thread::before { background: var(--accent); opacity: 0.34; }
.v9-memory__thread span { border-color: var(--accent); background: var(--surface2); }
.v9-next__label { color: var(--accent); }

.v9-persona-play {
  min-height: clamp(32rem, 43vw, 37rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-color: var(--hairline-strong);
  background: oklch(0.95 0.005 120);
  color: var(--ink1);
  box-shadow: 0 24px 70px oklch(0.18 0.012 135 / 0.08);
}

.v9-persona-source {
  border-bottom-color: var(--hairline);
}

.v9-persona-source > span,
.v9-persona-result > div > span { color: var(--accent); }

.v9-persona-source p { color: var(--ink2); }

.v9-persona-rooms button {
  border-color: var(--hairline);
  background: oklch(0.985 0.003 110);
  color: var(--ink2);
}

.v9-persona-rooms button:hover {
  border-color: oklch(0.46 0.15 145 / 0.42);
  color: var(--ink1);
}

.v9-persona-rooms button.is-active {
  border-color: oklch(0.46 0.15 145 / 0.5);
  background: oklch(0.88 0.07 145 / 0.34);
  color: var(--ink1);
  transform: none;
}

.v9-persona-rooms button small,
.v9-persona-rooms button.is-active small { color: var(--ink3); }

.v9-persona-result {
  border: 1px solid var(--hairline);
  background: var(--surface1);
  color: var(--ink1);
  box-shadow: none;
}

.v9-persona-custom {
  border-top-color: var(--hairline);
}

.v9-persona-custom button { color: var(--ink1); }
.v9-persona-custom button i { border-color: var(--hairline-strong); background: var(--surface1); }
.v9-persona-custom button i::after { background: var(--ink3); }
.v9-persona-custom.is-on button i { border-color: oklch(0.46 0.15 145 / 0.48); background: oklch(0.88 0.07 145 / 0.34); }
.v9-persona-custom.is-on button i::after { background: var(--accent); }
.v9-persona-custom > p { color: var(--ink2); }

.v9-edit {
  min-height: clamp(31rem, 42vw, 36rem);
  background: oklch(0.95 0.005 120);
  box-shadow: 0 24px 70px oklch(0.18 0.012 135 / 0.08);
  backdrop-filter: none;
}

.v9-edit__body { max-width: 44rem; }
.v9-selection__after {
  color: var(--ink1);
  background: oklch(0.72 0.13 145 / 0.24);
  box-shadow: 0 0 0 1px oklch(0.46 0.15 145 / 0.08) inset;
}

.v9-edit__receipt { color: var(--accent); }

.v9-command {
  max-width: calc(100% - 3rem);
  grid-template-columns: auto 1fr auto;
  border-radius: 0.8rem;
  background: oklch(0.19 0.012 135);
  box-shadow: 0 16px 38px oklch(0.18 0.012 135 / 0.18);
  backdrop-filter: none;
}

.v9-command small {
  margin-left: 0.4rem;
  color: oklch(0.78 0.01 110);
  font-size: 0.68rem;
  font-weight: 580;
  white-space: nowrap;
}

.v9-replay {
  border-color: var(--hairline);
  background: var(--surface1);
  box-shadow: none;
  backdrop-filter: none;
}

.story-closing {
  padding-block: clamp(6rem, 10vw, 8rem);
  background: oklch(0.17 0.012 135);
  color: oklch(0.94 0.006 110);
}

.story-closing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4rem, 8vw, 8rem);
}

.story-closing-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.story-closing-grid > div + div {
  padding-left: clamp(2rem, 5vw, 5rem);
  border-left: 1px solid oklch(0.94 0.006 110 / 0.14);
}

.story-closing h2 {
  max-width: 13ch;
  color: oklch(0.94 0.006 110);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
}

.story-closing p { color: oklch(0.72 0.01 110); font-size: 0.95rem; }
.story-text-link { color: var(--brand-green); font-weight: 600; }

.foot { border-top: 1px solid oklch(0.94 0.006 110 / 0.1); }

@media (max-width: 960px) {
  .story-shell { width: calc(100% - 3rem); }

  .product-hero {
    min-height: 0;
    padding-block: 5.5rem 6rem;
  }

  .product-hero-grid,
  .story-split,
  .story-split--reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .story-split--reverse > .story-copy,
  .story-split--reverse > .product-demo {
    grid-column: 1;
  }

  .story-split--reverse > .story-copy { grid-row: 1; }
  .story-split--reverse > .product-demo { grid-row: 2; }

  .story-copy { max-width: 38rem; }
  .product-hero-copy h1 { font-size: clamp(3.5rem, 10vw, 5.25rem); }
  .story-copy h2 { max-width: 14ch; font-size: clamp(2.6rem, 7vw, 3.5rem); }
  .story-section { padding-block: 6rem; }

  .product-demo {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .story-closing-grid { grid-template-columns: 1fr; gap: 4rem; }
  .story-closing-grid > div + div { padding: 3.5rem 0 0; border-top: 1px solid oklch(0.94 0.006 110 / 0.14); border-left: 0; }
}

@media (max-width: 560px) {
  .story-shell { width: calc(100% - 2rem); }
  .product-hero { padding-block: 4rem 5rem; }
  .product-kicker { margin-bottom: 1.1rem; font-size: 0.85rem; }
  .product-hero-copy h1 { max-width: 8ch; font-size: 3.25rem; line-height: 0.96; }
  .story-copy h2 { font-size: 2.55rem; line-height: 1.02; }
  .product-hero-copy > p:not(.product-kicker),
  .story-copy > p { margin-top: 1.2rem; font-size: 1.08rem; line-height: 1.45; }
  .product-actions { margin-top: 1.7rem; gap: 0.9rem; }
  .product-actions .btn { width: 100%; }
  .story-section { padding-block: 5rem; }
  .product-demo { width: calc(100% + 2rem); margin-left: -1rem; }
  .v9-command { left: 1rem; max-width: calc(100% - 2rem); }
  .v9-command small { margin-left: auto; font-size: 0.62rem; }
  .v9-persona-rooms button small { display: none; }
  .story-closing { padding-block: 5rem; }
  .story-closing h2 { font-size: 2.5rem; }
  .nav .btn { padding: 0.65rem 0.85rem; font-size: 0.84rem; }
}

@media (min-width: 961px) and (max-height: 650px) {
  .product-hero { min-height: 0; padding-block: 2rem 3rem; }
  .product-hero-copy h1 { font-size: clamp(3.1rem, 11vh, 3.75rem); }
  .product-hero-copy > p:not(.product-kicker),
  .story-copy > p { margin-top: 1rem; font-size: 1rem; }
  .product-kicker { margin-bottom: 0.9rem; }
  .product-actions { margin-top: 1.25rem; }
  .product-actions .btn { padding: 0.8rem 1.1rem; }
  .story-section { padding-block: 4rem; }
  .story-copy h2 { font-size: 2.5rem; }
  .v9-desk,
  .v9-memory,
  .v9-edit { min-height: 24rem; }
  .v9-persona-play { min-height: 17rem; }
}