/* Cyrano landing + legal pages. A restrained, editorial system: no tracking,
   no scripts, no external fonts. Light/dark follows the OS. */

:root {
  --paper: #f5f2eb;
  --paper-deep: #ebe6dc;
  --surface: #fbfaf7;
  --ink: #1d1b1a;
  --muted: #6f6861;
  --faint: #979087;
  --line: rgba(29, 27, 26, 0.16);
  --accent: #5c3d82;
  --accent-soft: #e7dfed;
  --accent-contrast: #ffffff;
  --draft-bg: #fff3cd;
  --draft-border: #d39d00;
  --draft-text: #654a00;
  --error: #ac2b1e;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ring: 0 0 0 .5px rgba(29, 27, 26, .14);
  --shadow-sm: 0 6px 14px -3px rgba(29, 27, 26, .04), 0 18px 34px -10px rgba(29, 27, 26, .03), var(--ring);
  --shadow-md: 0 14px 30px -8px rgba(29, 27, 26, .055), 0 34px 64px -22px rgba(29, 27, 26, .04), var(--ring);
  --shadow-accent: 0 8px 18px -4px rgba(92, 61, 130, .16), 0 24px 46px -14px rgba(92, 61, 130, .14), 0 0 0 .5px rgba(92, 61, 130, .34);
  --cat-task: #3f8f63;
  --cat-ask: #bd7726;
  --cat-next: #2c8888;
}

/* Dark follows the OS, or the visitor's choice on <html>: /home relays the promo's toggle as
   data-theme (home.js), the way kinetic.css and data-flow.css already read it. The same tokens
   twice, since a media query and an attribute cannot share one block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171514;
    --paper-deep: #211e1c;
    --surface: #1d1a19;
    --ink: #f3eee6;
    --muted: #c1b9ae;
    --faint: #958e86;
    --line: rgba(243, 238, 230, 0.16);
    --accent: #c4a7e7;
    --accent-soft: #30253a;
    --accent-contrast: #21182b;
    --draft-bg: #3a2e0c;
    --draft-border: #bb8e00;
    --draft-text: #f1d17b;
    --error: #ff8a7a;
    --ring: 0 0 0 .5px rgba(243, 238, 230, .13);
    --shadow-sm: 0 6px 14px -3px rgba(0, 0, 0, .3), 0 18px 34px -10px rgba(0, 0, 0, .22), var(--ring);
    --shadow-md: 0 14px 30px -8px rgba(0, 0, 0, .38), 0 34px 64px -22px rgba(0, 0, 0, .3), var(--ring);
    --shadow-accent: 0 8px 18px -4px rgba(0, 0, 0, .34), 0 24px 46px -14px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(196, 167, 231, .36);
    --cat-task: #6fc294;
    --cat-ask: #e2a55f;
    --cat-next: #5fbdbd;
  }
}
:root[data-theme="dark"] {
  --paper: #171514;
  --paper-deep: #211e1c;
  --surface: #1d1a19;
  --ink: #f3eee6;
  --muted: #c1b9ae;
  --faint: #958e86;
  --line: rgba(243, 238, 230, 0.16);
  --accent: #c4a7e7;
  --accent-soft: #30253a;
  --accent-contrast: #21182b;
  --draft-bg: #3a2e0c;
  --draft-border: #bb8e00;
  --draft-text: #f1d17b;
  --error: #ff8a7a;
  --ring: 0 0 0 .5px rgba(243, 238, 230, .13);
  --shadow-sm: 0 6px 14px -3px rgba(0, 0, 0, .3), 0 18px 34px -10px rgba(0, 0, 0, .22), var(--ring);
  --shadow-md: 0 14px 30px -8px rgba(0, 0, 0, .38), 0 34px 64px -22px rgba(0, 0, 0, .3), var(--ring);
  --shadow-accent: 0 8px 18px -4px rgba(0, 0, 0, .34), 0 24px 46px -14px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(196, 167, 231, .36);
  --cat-task: #6fc294;
  --cat-ask: #e2a55f;
  --cat-next: #5fbdbd;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
code, .mono { font-family: var(--mono); font-size: .88em; }
.container { width: min(100% - 48px, 1120px); margin: 0 auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .container {
  min-height: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  text-decoration: none;
}
.wordmark-mark { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 25px; }
.site-nav a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }

/* Landing */
.hero { padding: clamp(74px, 12vw, 152px) 0 clamp(72px, 10vw, 128px); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(44px, 8vw, 120px); }
.hero-copy { max-width: 730px; }
.eyebrow {
  margin: 0 0 17px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
}
/* Hero eyebrow word cycler. The verb sits last on the line so only the closing
   quote and caret move as it types; nothing else reflows. */
.cycle-word { white-space: pre; }
.cycle-caret {
  display: inline-block;
  width: 1px;
  height: .95em;
  margin-left: 2px;
  vertical-align: -.1em;
  background: currentColor;
  animation: cycle-blink 1.05s steps(1, end) infinite;
}
@keyframes cycle-blink { 0%, 50% { opacity: .85; } 50.01%, 100% { opacity: 0; } }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero h1,
.section-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .97;
  text-wrap: balance;
}
.hero h1 { max-width: 760px; font-size: clamp(51px, 7.3vw, 96px); }
.hero h1 em { color: var(--accent); font-weight: 400; }
.lede {
  max-width: 58ch;
  margin: 34px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.53;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 35px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 49px;
  padding: 12px 21px 12px 23px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.text-link {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration-thickness: 1px;
}
.text-link:hover { color: var(--ink); }
.meta { margin: 21px 0 0; color: var(--faint); font-size: 12px; }
.margin-note {
  align-self: end;
  padding: 28px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 30px 30px 10px 30px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.38;
}
.note-rule { display: block; width: 42px; height: 1px; margin-bottom: 16px; background: var(--accent); border-radius: 999px; }
.margin-note p { margin: 0 0 14px; }
.margin-note .note-label { color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.margin-note .note-detail { color: var(--faint); font-size: 15px; }
/* The split-flap board in the note: nine cells across the column, the sentence under it. */
.note-flap .k-flap { display: flex; margin: 2px 0 12px; }

/* Prominent route into the concept sequence. */
.reading-path { border-top: 1px solid var(--line); padding: clamp(58px, 8vw, 94px) 0; background: var(--paper-deep); }
.reading-path .container { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: clamp(42px, 8vw, 120px); align-items: start; }
.reading-path-intro h2 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 4.2vw, 58px); font-weight: 400; letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.reading-path-intro > p:last-child { max-width: 34ch; margin: 25px 0 0; color: var(--muted); font-size: 16px; }
.reading-path-grid { border-top: 1px solid var(--line); }
.reading-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 23px 0 25px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.reading-number { padding-top: 4px; color: var(--accent); font-family: var(--mono); font-size: 11px; }
.reading-card strong { display: block; font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.reading-card small { display: block; max-width: 48ch; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.reading-arrow { padding-top: 1px; color: var(--accent); font-size: 22px; transition: transform .18s ease; }
.reading-card:hover strong { color: var(--accent); }
.reading-card:hover .reading-arrow { transform: translateX(4px); }

/* Principles */
.principles { border-top: 1px solid var(--line); background: var(--surface); padding: clamp(66px, 9vw, 116px) 0; }
.principles .container { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.05fr); gap: 0 clamp(44px, 6vw, 96px); }
.principles .section-intro h2 { font-size: clamp(34px, 3.9vw, 54px); }
.section-intro h2 { font-size: clamp(40px, 4.4vw, 65px); }
.section-intro > p:last-child { max-width: 31ch; margin: 29px 0 0; color: var(--muted); font-size: 17px; }
/* Intro and odometer share the left column as one cell, so the reels sit right under the
   sub-line whatever height the list on the right runs to. */
.principle-odometer { margin-top: clamp(32px, 4.5vw, 52px); }
.principle-odometer .k-kicker { margin-bottom: 14px; }
.principle-odometer .k-odometer { --k-row: clamp(48px, 6.2vw, 76px); }
.principle-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.principle-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 27px 0 29px; border-bottom: 1px solid var(--line); }
.principle-number { padding-top: 4px; color: var(--accent); font-family: var(--mono); font-size: 11px; }
.principle-list h3 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.principle-list p { max-width: 52ch; margin: 9px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.quiet-close { padding: clamp(64px, 9vw, 112px) 0; background: var(--paper-deep); }
.quiet-close-inner { max-width: 1120px; }
.close-wordmark { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(72px, 12vw, 168px); font-weight: 600; letter-spacing: -.05em; line-height: .92; color: var(--ink); }
.close-dot { color: var(--accent); }
.closing-line { max-width: 620px; margin: 0 0 26px; font-family: var(--serif); font-size: clamp(36px, 4.5vw, 60px); letter-spacing: -.047em; line-height: 1.02; }

/* Pricing */
.pricing { padding: clamp(64px, 9vw, 108px) 0; border-top: 1px solid var(--line); }
.pricing .section-intro { margin-bottom: 44px; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.price-card {
  display: flex;
  flex-direction: column;
  padding: 34px 34px 36px;
  border: 1px solid var(--line);
  border-radius: 30px 30px 12px 30px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.price-card.featured {
  border-color: var(--accent);
  border-radius: 12px 30px 30px 30px;
  box-shadow: 0 1px 0 var(--accent) inset, var(--shadow-accent);
}
.price-eyebrow { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.price-amount { margin: 12px 0 4px; font-family: var(--serif); font-size: clamp(36px, 4vw, 46px); letter-spacing: -.04em; line-height: 1; }
.price-unit { font-family: var(--sans); font-size: 15px; letter-spacing: normal; color: var(--muted); }
.price-list { margin: 20px 0 26px; padding: 0; list-style: none; border-top: 1px solid var(--line); flex: 1 1 auto; }
.price-list li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
/* CTA footer: the list above grows to absorb differing content lengths, pushing
   this to the bottom. The reserved min-height keeps every card's button top on
   the same line even though the trailing note below it varies (or is absent). */
.price-cta { display: flex; flex-direction: column; align-items: flex-start; }
.price-card .btn { margin-top: 0; align-self: flex-start; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--ink); color: var(--accent-contrast); border-color: var(--ink); }
.price-alt { margin-top: 13px; font-size: 14px; }
.price-fineprint { max-width: 68ch; margin: 26px 0 0; color: var(--faint); font-size: 13px; line-height: 1.55; }
/* Assistants reel beside the sentence about them. */
.price-choice {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(26px, 3.6vw, 40px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.price-choice-reel .k-kicker { margin-bottom: 8px; }
.price-choice .k-roulette { --k-row: clamp(40px, 5vw, 64px); }
.price-choice-copy { max-width: 52ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.price-choice-copy em { color: var(--ink); font-style: italic; }

/* Three-up pricing + the Pro trial ribbon. */
.price-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-grid-3 .price-card { padding: 30px 28px 32px; }
.price-grid-3 .price-cta { min-height: 112px; }
.price-ribbon {
  align-self: flex-start;
  margin: 0 0 15px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
span.price-alt { display: block; margin-top: 13px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Capabilities — a quiet editorial feature grid between principles and price. */
.capabilities { border-top: 1px solid var(--line); padding: clamp(64px, 9vw, 108px) 0; }
.capabilities .section-intro { max-width: 620px; margin-bottom: 0; }
/* Intro on the left, the five verbs on the right, bottoms aligned so the stack's last word sits
   on the sub-line's baseline. */
.capabilities-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px clamp(32px, 6vw, 96px);
  margin-bottom: 46px;
}
.capabilities-head .k-stack { --k-stack-size: clamp(34px, 4.6vw, 64px); }
/* Screenshots — real app UI, framed with the same soft-card language as
   .margin-note / .price-card rather than a new visual system. */
.shot {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 30px 30px 10px 30px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.shot img { display: block; width: 100%; height: auto; }
/* The session demo (index), under the relay: a working Sessions window with a finished call,
   drawn by /session-demo/app.js with /session-demo.css (loaded by /session-demo.js). The stage
   holds its height whether the demo or the fallback screenshot is showing, so nothing shifts
   when it mounts; the caption carries both texts and shows the one that is true. */
.session-demo { padding: 0 0 clamp(64px, 9vw, 108px); }
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.demo-head .eyebrow { margin: 0; }
.demo-lede { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.8vw, 38px); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.demo-stage {
  position: relative;
  display: grid;
  height: clamp(560px, 58vw, 780px);
  padding: clamp(12px, 1.6vw, 20px);
  border: 1px solid var(--line);
  border-radius: 30px 30px 12px 30px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.demo-fallback, .demo-host { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.demo-fallback picture { display: contents; }
.demo-fallback img { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-host { display: flex; visibility: hidden; opacity: 0; }
.demo-host > .sd-mount { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
.demo-host[data-session-demo="live"] { visibility: visible; opacity: 1; transition: opacity .45s cubic-bezier(.16, 1, .3, 1); }
.demo-stage:has(.demo-host[data-session-demo="live"]) .demo-fallback { visibility: hidden; }
.demo-caption { max-width: 78ch; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.demo-caption .demo-on { display: none; }
.session-demo:has(.demo-host[data-session-demo="live"]) .demo-caption .demo-on { display: inline; }
.session-demo:has(.demo-host[data-session-demo="live"]) .demo-caption .demo-off { display: none; }
@media (max-width: 860px) {
  .demo-stage { height: clamp(620px, 175vw, 820px); padding: 10px; border-radius: 22px 22px 10px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-host[data-session-demo="live"] { transition: none; }
}
/* Relay diagram (index) — session → Cyrano → assistant on one 15s loop.
   A pulse crosses each connector, then that stage's card lifts and fills in.
   The three cards sit in one grid row so they share a height; the connectors
   are separate grid items centred against that row, which keeps them on the
   panels' midline no matter how the headings or notes wrap. Below 900px the
   whole thing stacks, the connectors turn vertical, and the sequencing is
   dropped — a scroller arrives mid-cycle and should never meet an empty card. */
.relay { border-top: 1px solid var(--line); padding: clamp(64px, 9vw, 108px) 0; }
.relay .section-intro { max-width: 620px; margin-bottom: clamp(38px, 5vw, 58px); }
.relay-flow {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) clamp(78px, 9vw, 132px)
    minmax(0, 1fr) clamp(78px, 9vw, 132px)
    minmax(0, 1fr);
  row-gap: 17px;
}
.relay-head-1 { grid-area: 1 / 1; }
.relay-card-1 { grid-area: 2 / 1; }
.relay-note-1 { grid-area: 3 / 1; }
.relay-link-a { grid-area: 2 / 2; }
.relay-head-2 { grid-area: 1 / 3; }
.relay-card-2 { grid-area: 2 / 3; }
.relay-note-2 { grid-area: 3 / 3; }
.relay-link-b { grid-area: 2 / 4; }
.relay-head-3 { grid-area: 1 / 5; }
.relay-card-3 { grid-area: 2 / 5; }
.relay-note-3 { grid-area: 3 / 5; }

/* Headings bottom-align to the row so the cards start on one line even when
   one title wraps and another does not. */
.relay-head { display: flex; flex-direction: column; justify-content: flex-end; }
.relay-kicker { margin: 0 0 9px; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.relay-head h3 { margin: 0; font-family: var(--serif); font-size: clamp(21px, 2.2vw, 27px); font-weight: 400; letter-spacing: -.03em; line-height: 1.12; }
.relay-note { margin: 0; max-width: 44ch; color: var(--muted); font-size: 14px; line-height: 1.55; }

.relay-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 244px;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 10px 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  opacity: .66;
  animation: 15s ease-in-out infinite;
}
.relay-card-1 { animation-name: relay-focus-1; }
.relay-card-2 { animation-name: relay-focus-2; }
.relay-card-3 { animation-name: relay-focus-3; }
@keyframes relay-focus-1 {
  0%, 4%, 32%, 100% { opacity: .66; transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
  9%, 26% { opacity: 1; transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-accent); }
}
@keyframes relay-focus-2 {
  0%, 30%, 64%, 100% { opacity: .66; transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
  36%, 58% { opacity: 1; transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-accent); }
}
@keyframes relay-focus-3 {
  0%, 62%, 97%, 100% { opacity: .66; transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
  68%, 92% { opacity: 1; transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-accent); }
}

.relay-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.relay-badge i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.relay-badge-live i { background: #35a66f; animation: relay-blink 2.1s ease-in-out infinite; }
@keyframes relay-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Waveform. Each bar carries its own resting scaleY so that freezing the
   animation leaves a waveform rather than a flat row. */
.relay-wave { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.relay-wave i {
  flex: 0 0 5px;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  opacity: .5;
  animation: relay-wave 1s ease-in-out infinite alternate;
}
@keyframes relay-wave { from { transform: scaleY(.16); } to { transform: scaleY(1); } }
.relay-wave i:nth-child(1) { transform: scaleY(.34); animation-duration: .86s; animation-delay: -.55s; }
.relay-wave i:nth-child(2) { transform: scaleY(.62); animation-duration: 1.04s; animation-delay: -.19s; }
.relay-wave i:nth-child(3) { transform: scaleY(.95); animation-duration: .74s; animation-delay: -.72s; }
.relay-wave i:nth-child(4) { transform: scaleY(.48); animation-duration: .96s; animation-delay: -.34s; }
.relay-wave i:nth-child(5) { transform: scaleY(.80); animation-duration: 1.18s; animation-delay: -.88s; }
.relay-wave i:nth-child(6) { transform: scaleY(.28); animation-duration: .82s; animation-delay: -.41s; }
.relay-wave i:nth-child(7) { transform: scaleY(.68); animation-duration: 1.1s; animation-delay: -.66s; }
.relay-wave i:nth-child(8) { transform: scaleY(.42); animation-duration: .9s; animation-delay: -.12s; }
.relay-wave i:nth-child(9) { transform: scaleY(.86); animation-duration: 1.26s; animation-delay: -.79s; }
.relay-wave i:nth-child(10) { transform: scaleY(.55); animation-duration: .88s; animation-delay: -.27s; }
.relay-wave i:nth-child(11) { transform: scaleY(.31); animation-duration: 1.14s; animation-delay: -.94s; }
.relay-wave i:nth-child(12) { transform: scaleY(.74); animation-duration: .78s; animation-delay: -.48s; }
.relay-wave i:nth-child(13) { transform: scaleY(.45); animation-duration: 1.0s; animation-delay: -.07s; }

.relay-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.relay-sources em {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.relay-transcript { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.relay-transcript li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  animation: 15s ease-in-out infinite;
}
.relay-transcript b { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
/* Qualified by the li so these outrank the animation shorthand above, which
   would otherwise reset animation-name back to none. */
.relay-transcript li.relay-t1 { animation-name: relay-in-1; }
.relay-transcript li.relay-t2 { animation-name: relay-in-2; }
.relay-transcript li.relay-t3 { animation-name: relay-in-3; }
.relay-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  animation: relay-in-4 15s ease-in-out infinite;
}
.relay-chip i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.relay-chat { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.relay-ask, .relay-reply { margin: 0; padding: 9px 13px; font-size: 13px; line-height: 1.45; opacity: 0; animation: 15s ease-in-out infinite; }
.relay-ask { align-self: flex-end; max-width: 90%; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--accent-contrast); font-weight: 600; animation-name: relay-in-5; }
.relay-reply { align-self: flex-start; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--paper); animation-name: relay-in-6; }

@keyframes relay-in-1 { 0%, 38% { opacity: 0; transform: translateY(6px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes relay-in-2 { 0%, 43% { opacity: 0; transform: translateY(6px); } 47%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes relay-in-3 { 0%, 48% { opacity: 0; transform: translateY(6px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes relay-in-4 { 0%, 53% { opacity: 0; transform: translateY(6px); } 57%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes relay-in-5 { 0%, 70% { opacity: 0; transform: translateY(6px); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes relay-in-6 { 0%, 78% { opacity: 0; transform: translateY(6px); } 82%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* Connectors. The chevron is static so direction reads at rest; the pulse is
   the only part that moves, and it is timed to land just before the next card
   lights up. */
.relay-link { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 11px; padding: 0 clamp(8px, 1.2vw, 18px); }
.relay-tag { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; line-height: 1.45; text-align: center; text-transform: uppercase; animation: 15s ease-in-out infinite; }
.relay-tag-a { animation-name: relay-tag-a; }
.relay-tag-b { animation-name: relay-tag-b; }
@keyframes relay-tag-a { 0%, 25%, 37%, 100% { color: var(--faint); } 29%, 33% { color: var(--accent); } }
@keyframes relay-tag-b { 0%, 58%, 70%, 100% { color: var(--faint); } 62%, 66% { color: var(--accent); } }
.relay-track { position: relative; width: 100%; height: 1px; background: var(--line); }
.relay-track::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transform: rotate(45deg);
}
.relay-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  opacity: 0;
  animation: 15s linear infinite;
}
.relay-pulse-a { animation-name: relay-pulse-a-x; }
.relay-pulse-b { animation-name: relay-pulse-b-x; }
@keyframes relay-pulse-a-x { 0%, 26% { left: 0; opacity: 0; } 29%, 32% { opacity: 1; } 35%, 100% { left: 100%; opacity: 0; } }
@keyframes relay-pulse-b-x { 0%, 59% { left: 0; opacity: 0; } 62%, 65% { opacity: 1; } 68%, 100% { left: 100%; opacity: 0; } }

/* Held at 0% until the section is actually on screen, so the sequence starts
   at the session rather than wherever the page-load clock happened to be. The
   attribute is only ever set by script — with JS off the loop simply runs. */
.relay-flow[data-relay="wait"] .relay-card,
.relay-flow[data-relay="wait"] .relay-transcript li,
.relay-flow[data-relay="wait"] .relay-chip,
.relay-flow[data-relay="wait"] .relay-ask,
.relay-flow[data-relay="wait"] .relay-reply,
.relay-flow[data-relay="wait"] .relay-tag,
.relay-flow[data-relay="wait"] .relay-pulse { animation-play-state: paused; }

@media (max-width: 900px) {
  .relay-flow { grid-template-columns: minmax(0, 1fr); row-gap: 13px; }
  .relay-flow > * { grid-area: auto; }
  .relay-head { justify-content: flex-start; padding-top: 8px; }
  .relay-note { max-width: none; }
  /* Stacked, only one card is in view at a time, so the sequenced reveal would
     read as a broken card rather than a story. Everything shows at once. */
  .relay-card,
  .relay-transcript li,
  .relay-chip,
  .relay-ask,
  .relay-reply,
  .relay-tag { animation: none; opacity: 1; transform: none; }
  .relay-card { min-height: 0; }
  .relay-link { flex-direction: column-reverse; padding: 12px 0 6px; }
  .relay-track { width: 1px; height: 46px; }
  .relay-track::after { top: auto; right: auto; bottom: 0; left: 50%; margin: 0 0 0 -3px; transform: rotate(135deg); }
  .relay-pulse { top: 0; left: 50%; }
  .relay-pulse-a { animation-name: relay-pulse-a-y; }
  .relay-pulse-b { animation-name: relay-pulse-b-y; }
}
@keyframes relay-pulse-a-y { 0%, 26% { top: 0; opacity: 0; } 29%, 32% { opacity: 1; } 35%, 100% { top: 100%; opacity: 0; } }
@keyframes relay-pulse-b-y { 0%, 59% { top: 0; opacity: 0; } 62%, 65% { opacity: 1; } 68%, 100% { top: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Frozen in the finished state: every card lit, every line present. */
  .relay-card,
  .relay-transcript li,
  .relay-chip,
  .relay-ask,
  .relay-reply,
  .relay-tag,
  .relay-wave i,
  .relay-badge-live i,
  .relay-pulse { animation: none; }
  .relay-card,
  .relay-transcript li,
  .relay-chip,
  .relay-ask,
  .relay-reply { opacity: 1; transform: none; }
  .relay-pulse { display: none; }
}

/* iPhone TestFlight interest signup — a single card in the same soft-card
   language as .price-card, sitting between pricing and the closing line. */
.beta { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
.beta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  padding: 36px 38px;
  border: 1px solid var(--line);
  border-radius: 30px 30px 12px 30px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.beta-copy { max-width: 460px; }
.beta-copy .eyebrow { margin-bottom: 10px; }
.beta-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; line-height: 1.12; }
.beta-copy p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.beta-form { display: flex; align-items: stretch; gap: 10px; flex: 1 1 auto; max-width: 420px; }
.beta-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 49px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
}
.beta-input::placeholder { color: var(--faint); }
.beta-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.beta-form .btn { flex: 0 0 auto; }
/* Honeypot: same off-screen technique as .sr-only, but never announced to
   assistive tech and never reachable by keyboard. */
.beta-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.beta-status { flex-basis: 100%; margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); }
.beta-status[data-state="ok"] { color: var(--accent); font-weight: 600; }
.beta-status[data-state="error"] { color: var(--error); font-weight: 600; }

@media (max-width: 900px) {
  .price-grid-3 { grid-template-columns: 1fr; }
  .price-grid-3 .price-cta { min-height: 0; }
  .beta-card { flex-direction: column; align-items: stretch; text-align: left; }
  .beta-form { max-width: none; }
}

@media (max-width: 520px) {
  .beta-form { flex-direction: column; }
  .beta-form .btn { align-self: flex-start; }
}

/* Two-tone section headings: the second line drops to --muted so a two-clause
   heading reads as statement + consequence without a size change. */
.line-soft { color: var(--muted); }

/* Hero platform strip. Geometric marks rather than borrowed vendor logos. */
.platforms { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 27px 0 0; padding: 0; list-style: none; }
.platforms li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.platform-mark { flex: 0 0 auto; width: 7px; height: 7px; background: var(--accent); opacity: .55; }
.platform-mark-mac { border-radius: 2px; }
.platform-mark-ios { border-radius: 999px; }
.platform-mark-mcp { transform: rotate(45deg); }
.platforms + .meta { margin-top: 15px; }

/* Capability bento. Every cell carries a small drawing of the surface the claim
   comes from, so the section is looked at rather than only read. The art is
   aria-hidden; heading and body carry the whole meaning on their own. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.bento-cell {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  border: 1px solid var(--line);
  border-radius: 26px 26px 8px 26px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1);
}
.bento-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bento-wide { grid-column: span 3; }
.bento-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  gap: 13px;
  height: 190px;
  padding: 24px 24px 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
}
.bento-copy { flex: 1 1 auto; padding: 21px 24px 25px; }
.bento-copy h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.028em; line-height: 1.15; }
.bento-copy p { max-width: 44ch; margin: 9px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* Posture pill: where the work happens, stated on the feature itself rather
   than deferred to the privacy section. */
.posture {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.posture i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--cat-task); }
.posture-local i { background: var(--cat-task); }
.posture-pro { color: var(--accent); }
.posture-pro i { background: var(--accent); }

.mini-transcript { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mini-transcript li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.4;
}
.mini-transcript b { color: var(--accent); font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }

.mini-map { display: block; width: 100%; height: auto; }
.mini-map-edges path { fill: none; stroke: var(--line); stroke-width: 1.4; }
.mini-map .n-topic { fill: var(--accent); }
.mini-map .n-task { fill: var(--cat-task); }
.mini-map .n-ask { fill: var(--cat-ask); }
.mini-map .n-next { fill: var(--cat-next); }
.mini-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mini-legend em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mini-legend em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.mini-legend .k-task::before { background: var(--cat-task); }
.mini-legend .k-ask::before { background: var(--cat-ask); }
.mini-legend .k-next::before { background: var(--cat-next); }

.mini-chat { display: flex; flex-direction: column; gap: 8px; }
.mini-ask, .mini-reply { margin: 0; padding: 9px 13px; font-size: 12.5px; line-height: 1.45; }
.mini-ask { align-self: flex-end; max-width: 88%; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.mini-reply { align-self: flex-start; max-width: 94%; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface); }
.mini-clients { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-clients em {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mini-hud {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 11px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
}
.mini-hud-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #35a66f; }
.mini-hud-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.mini-hud-wave i { width: 2px; border-radius: 999px; background: var(--paper); opacity: .8; }
.mini-hud-wave i:nth-child(1) { height: 5px; }
.mini-hud-wave i:nth-child(2) { height: 10px; }
.mini-hud-wave i:nth-child(3) { height: 16px; }
.mini-hud-wave i:nth-child(4) { height: 7px; }
.mini-hud-wave i:nth-child(5) { height: 13px; }
.mini-hud-wave i:nth-child(6) { height: 4px; }
.mini-hud-wave i:nth-child(7) { height: 11px; }
.mini-hud-wave i:nth-child(8) { height: 15px; }
.mini-hud-wave i:nth-child(9) { height: 6px; }
.mini-hud-wave i:nth-child(10) { height: 9px; }
.mini-hud-wave i:nth-child(11) { height: 4px; }
.mini-hud-key { color: var(--paper); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; opacity: .6; text-transform: uppercase; }
.mini-caption { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 15px; font-style: italic; line-height: 1.4; }

.mini-window {
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: 10px 10px 4px 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.mini-window-bar { display: flex; gap: 5px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.mini-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mini-window-body {
  display: block;
  height: 51px;
  margin: 12px 14px;
  border-radius: 2px;
  opacity: .8;
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / 72% 6px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 15px / 92% 6px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 30px / 84% 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 45px / 46% 6px no-repeat;
}
.mini-shortcut { display: flex; align-items: center; gap: 5px; color: var(--faint); font-size: 11.5px; }
.mini-shortcut kbd {
  min-width: 19px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  text-align: center;
}
.mini-shortcut kbd:last-of-type { margin-right: 5px; }

.mini-deliver { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.mini-deliver li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: 13px;
}
.mini-deliver em { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 9.5px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.mini-deliver .tile { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; opacity: .85; }
.tile-agent { background: var(--accent); }
.tile-vault { background: var(--cat-next); }
.tile-hook { background: var(--cat-ask); }

.mini-retention { display: flex; flex-wrap: wrap; gap: 7px; }
.mini-retention em {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
}
.mini-retention .on { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.mini-expiry { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--faint); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.mini-expiry i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }

/* Surfaces tour. CSS-only radio tabs: no script to go wrong, and the group stays
   keyboard-operable as an ordinary radio group rather than ARIA tabs we would
   have no JS to keep honest. */
.surfaces { border-top: 1px solid var(--line); background: var(--paper-deep); padding: clamp(64px, 9vw, 108px) 0; }
.surfaces .section-intro { max-width: 620px; margin-bottom: clamp(30px, 4vw, 42px); }
/* The rendered loop, with block letters over it that sweep in from either side. */
.surface-reel { margin-bottom: clamp(34px, 5vw, 56px); }
.surface-reel-head { margin-bottom: clamp(18px, 2.6vw, 28px); }
.surface-reel-title { font-size: clamp(36px, 6.4vw, 92px); text-wrap: balance; }
.surface-reel-sub { margin-top: .12em; font-size: clamp(16px, 2.2vw, 28px); font-weight: 700; letter-spacing: .01em; color: var(--muted); }
.surface-tour { min-width: 0; margin: 0; padding: 0; border: 0; }
.surface-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.surface-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.surface-tabs label {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.surface-tabs label:hover { color: var(--ink); border-color: var(--faint); }
.surface-num { margin-right: 9px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--accent); }
#surface-1:checked ~ .surface-tabs label[for="surface-1"] .surface-num,
#surface-2:checked ~ .surface-tabs label[for="surface-2"] .surface-num,
#surface-3:checked ~ .surface-tabs label[for="surface-3"] .surface-num,
#surface-4:checked ~ .surface-tabs label[for="surface-4"] .surface-num,
#surface-5:checked ~ .surface-tabs label[for="surface-5"] .surface-num { color: var(--paper); opacity: .6; }
#surface-1:checked ~ .surface-tabs label[for="surface-1"],
#surface-2:checked ~ .surface-tabs label[for="surface-2"],
#surface-3:checked ~ .surface-tabs label[for="surface-3"],
#surface-4:checked ~ .surface-tabs label[for="surface-4"],
#surface-5:checked ~ .surface-tabs label[for="surface-5"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#surface-1:focus-visible ~ .surface-tabs label[for="surface-1"],
#surface-2:focus-visible ~ .surface-tabs label[for="surface-2"],
#surface-3:focus-visible ~ .surface-tabs label[for="surface-3"],
#surface-4:focus-visible ~ .surface-tabs label[for="surface-4"],
#surface-5:focus-visible ~ .surface-tabs label[for="surface-5"] { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The stage keeps one height whichever surface is showing, so switching tabs
   never shifts the page. Layout, though, follows the shape of the shot: the two
   tall, narrow surfaces (popover, settings) put the caption in the space beside
   them, and the three window shots take the full width with the caption under. */
.surface-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 20px;
  height: clamp(400px, 50vw, 680px);
  padding: 32px 34px;
  border: 1px solid var(--line);
  border-radius: 30px 30px 12px 30px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.surface-figure { position: relative; grid-area: 1 / 1; min-height: 0; }
.surface-notes { display: grid; grid-row: 2; min-height: 0; }
.surface-note {
  grid-area: 1 / 1;
  max-width: 74ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  opacity: 0;
  transition: opacity .3s ease;
}
#surface-1:checked ~ .surface-stage .note-1,
#surface-2:checked ~ .surface-stage .note-2,
#surface-3:checked ~ .surface-stage .note-3,
#surface-4:checked ~ .surface-stage .note-4,
#surface-5:checked ~ .surface-stage .note-5 { opacity: 1; }

#surface-1:checked ~ .surface-stage,
#surface-5:checked ~ .surface-stage {
  grid-template-columns: minmax(0, 27ch) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 54px);
}
#surface-1:checked ~ .surface-stage .surface-notes,
#surface-5:checked ~ .surface-stage .surface-notes { grid-area: 1 / 1; align-content: center; }
#surface-1:checked ~ .surface-stage .surface-figure,
#surface-5:checked ~ .surface-stage .surface-figure { grid-area: 1 / 2; }

/* object-fit sizes reliably where a percentage max-height cannot: the figure
   takes its height from grid stretch, which percentages do not resolve against. */
.surface-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
}
#surface-1:checked ~ .surface-stage .panel-1,
#surface-2:checked ~ .surface-stage .panel-2,
#surface-3:checked ~ .surface-stage .panel-3,
#surface-4:checked ~ .surface-stage .panel-4,
#surface-5:checked ~ .surface-stage .panel-5 { opacity: 1; transform: none; }

/* Screenshot zoom (the script at the foot of index.html). A zoom target — the hero shot,
   the tour's figure — gets a small Zoom pill in its corner and the zoom-in cursor once the
   script is on; a click opens the frame showing in the box below, fitted to the viewport.
   Nothing here shows without the script: the pill is its, and .is-zoomable is its. */
.zoomable { position: relative; }
.is-zoomable { cursor: zoom-in; }
.zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  cursor: zoom-in;
  transition: color .15s ease, background-color .15s ease;
}
.zoom-hint svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.is-zoomable:hover .zoom-hint, .zoom-hint:hover { color: var(--ink); background: var(--paper-deep); }
.zoom-hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; color: var(--ink); }

/* The box: the whole viewport, the page's paper as the scrim, the picture centred and
   fitted. Actual size (.is-actual) lets the picture be its own width and the box scroll;
   auto margins centre it while it fits and align it to the start once it overflows, so
   no edge is out of reach. The scrim and its blur are the ::backdrop's, not the box's:
   a backdrop-filter (like a transform) would make the box the containing block of the
   fixed × below, which then scrolled away with the picture at actual size. The backdrop
   cannot read the page's tokens in every engine, so its paper is written out, keyed on
   the OS and on data-theme the way styles.css's own tokens are. Opacity alone animates
   on the box, for the same reason. */
.zoom-box {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(18px, 4vw, 44px);
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
  cursor: zoom-out;
}
.zoom-box::backdrop {
  background: rgba(245, 242, 235, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zoom-box::backdrop { background: rgba(23, 21, 20, .93); }
}
:root[data-theme="dark"] .zoom-box::backdrop { background: rgba(23, 21, 20, .93); }
:root[data-theme="light"] .zoom-box::backdrop { background: rgba(245, 242, 235, .93); }
.zoom-box[open] { display: flex; animation: zoom-box-in .18s ease both; }
.zoom-box.is-actual { cursor: zoom-out; }
.zoom-pic {
  display: block;
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  cursor: zoom-out;
  animation: zoom-pic-in .22s cubic-bezier(.16, 1, .3, 1) both;
}
.zoom-pic:not([src]) { display: none; }
.zoom-box.can-grow .zoom-pic { cursor: zoom-in; }
.zoom-box.is-actual .zoom-pic { max-width: none; max-height: none; border-radius: 0; animation: none; }
.zoom-close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font: 400 24px/1 var(--sans);
  cursor: pointer;
}
.zoom-close:hover { background: var(--paper-deep); }
.zoom-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.zoom-open { overflow: hidden; }
@keyframes zoom-box-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoom-pic-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* What goes in and what reads it, as two opposed rails. Each row holds the list
   twice; the copy is aria-hidden so it is announced once. */
.carries { border-top: 1px solid var(--line); padding: clamp(60px, 8vw, 96px) 0 clamp(54px, 7vw, 84px); overflow: hidden; }
.carries-intro { max-width: 640px; margin-bottom: clamp(30px, 4vw, 44px); }
.carry-rail { display: flex; flex-direction: column; gap: 11px; }
.carry-label {
  width: min(100% - 48px, 1120px);
  margin: 9px auto 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.carry-label:first-child { margin-top: 0; }
.carry-rail .carry-row + .carry-label { margin-top: 26px; }
.carry-row {
  display: flex;
  gap: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.carry-track { display: flex; flex: 0 0 auto; gap: 10px; margin: 0; padding: 0; list-style: none; animation: carry-scroll 48s linear infinite; }
.carry-track-back { animation-direction: reverse; animation-duration: 61s; }
.carry-track li {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* The extra 10px matches the row gap, so the seam between the two copies is the
   same width as the gaps inside them and the loop has no visible stitch. */
@keyframes carry-scroll { to { transform: translateX(calc(-100% - 10px)); } }
.carry-note { max-width: 62ch; margin: clamp(28px, 4vw, 40px) 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Technical posture, stated once, where the privacy argument lands. */
.trust-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; margin: clamp(34px, 4vw, 46px) 0 0; padding: 0; list-style: none; }
.trust-row li {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Below this the note column starves the screenshot, so the two stack. */
/* Below this the note column starves the screenshot, so every surface stacks. */
@media (max-width: 860px) {
  .surface-stage,
  #surface-1:checked ~ .surface-stage,
  #surface-5:checked ~ .surface-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    height: clamp(360px, 82vw, 560px);
    padding: 24px;
  }
  #surface-1:checked ~ .surface-stage .surface-notes,
  #surface-5:checked ~ .surface-stage .surface-notes { grid-area: 2 / 1; align-content: start; }
  #surface-1:checked ~ .surface-stage .surface-figure,
  #surface-5:checked ~ .surface-stage .surface-figure { grid-area: 1 / 1; }
}

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-cell, .bento-wide { grid-column: span 1; }
  .bento-cell:last-child { grid-column: span 2; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell, .bento-wide, .bento-cell:last-child { grid-column: span 1; }
  .bento-art { min-height: 152px; }
  .surface-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .surface-stage,
  #surface-1:checked ~ .surface-stage,
  #surface-5:checked ~ .surface-stage { padding: 20px; height: clamp(330px, 96vw, 480px); }
  .zoom-hint { right: 8px; bottom: 8px; }
  .carry-track li { padding: 9px 16px; font-size: 13px; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: clamp(46px, 6vw, 72px) 0 34px; color: var(--muted); font-size: 13px; }
.site-footer .container {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr);
  gap: 40px clamp(40px, 7vw, 100px);
}
.footer-brand .wordmark { display: inline-block; font-size: 23px; }
.footer-brand p { max-width: 34ch; margin: 14px 0 0; color: var(--faint); font-size: 13px; line-height: 1.55; }
.footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; }
.footer-links h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.footer-links a { display: block; margin-bottom: 9px; color: var(--muted); text-decoration: none; line-height: 1.4; }
.footer-links a:hover { color: var(--ink); }
.footer-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer-consent { max-width: 68ch; margin: 0; color: var(--faint); font-size: 12px; }
.footer-copy { margin: 0; color: var(--faint); font-size: 12px; }
.site-footer a:hover { color: var(--ink); }

/* Legal pages */
.draft-banner { margin: 32px 0 0; padding: 12px 16px; border: 1px solid var(--draft-border); background: var(--draft-bg); color: var(--draft-text); font-size: 15px; font-weight: 600; }
.legal-page { padding: 34px 0 96px; }
.legal { max-width: 68ch; }
.legal h1 { margin: 30px 0 8px; font-family: var(--serif); font-size: clamp(39px, 5vw, 58px); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.legal .updated { margin: 0 0 38px; color: var(--muted); font-size: 14px; }
.legal h2 { margin: 43px 0 14px; padding-top: 25px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: -.025em; line-height: 1.15; }
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p { margin: 0 0 15px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 1.25em; }
.legal li { margin-bottom: 8px; }
.legal strong { font-weight: 700; }
.legal .lead { color: var(--muted); font-size: 19px; }
.legal .callout { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); }
.legal .table-scroll { margin: 0 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal thead th { text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--line); color: var(--ink); font-weight: 700; white-space: nowrap; }
.legal tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.legal tbody td:first-child { color: var(--ink); }
.legal tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  .container { width: min(100% - 40px, 1120px); }
  .site-header .container { gap: 16px; }
  .site-nav { gap: 18px; }
  .site-nav a:nth-child(2),
  .site-nav a:nth-child(3),
  .site-nav a:nth-child(4),
  .site-nav a:nth-child(6),
  .site-nav a:nth-child(7) { display: none; }
  .hero { padding-top: 77px; }
  .hero-layout, .reading-path .container, .principles .container { grid-template-columns: 1fr; }
  .margin-note { max-width: 390px; padding-top: 0; }
  .reading-path .container { gap: 40px; }
  .principles .container { gap: 47px; }
  /* One column here; the link would otherwise open an implicit second one off the right edge. */
  .principles .principle-more { grid-column: 1; }
  .price-grid { grid-template-columns: 1fr; }
  .capabilities-head { grid-template-columns: 1fr; align-items: start; }
  .price-choice { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr; gap: 9px; }
}

@media (max-width: 520px) {
  .site-header .container { min-height: 64px; }
  .site-nav { gap: 15px; }
  .site-nav a { font-size: 12px; }
  .hero h1 { font-size: clamp(46px, 14vw, 66px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .principle-list li { grid-template-columns: 35px minmax(0, 1fr); gap: 8px; }
  .principle-list h3 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bento-cell { transition: none; }
  .surface-panel, .surface-note { transition: none; }
  .zoom-hint { transition: none; }
  .zoom-box[open], .zoom-pic { animation: none; }
  /* The rails stop and simply wrap; the duplicate copy is dropped so nothing
     is read out twice. */
  /* Static rows align to the container instead of bleeding off the edge. */
  .carry-row { width: min(100% - 48px, 1120px); margin-inline: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .carry-track { animation: none; flex-wrap: wrap; }
  .carry-track[aria-hidden="true"] { display: none; }
  .btn { transition: none; }
  /* The script bails out under reduced motion, so no caret is ever inserted;
     this is belt-and-braces for a mid-session preference change. */
  .cycle-caret { display: none; }
}

/* Route from the principles into the full traffic map on /data-flow. */
.principle-more { grid-column: 2; margin: 22px 0 0; }