/* PaperAudio holding site, v4 (29 Oct 2026). Warm paper, real waveforms, characterful hosts, and a clear path to sign up.
   Colours come from packages/brand/tokens.css. The few scene colours with no token are named once, below. */
@font-face { font-family: "Comfortaa"; src: url("fonts/comfortaa-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Scene colours with no brand token (night sky and road). */
  --night: #0E1020;
  --night-road: #1B1D3A;
  --night-sky: #1A1838;
  --night-hill-far: #1A1A36;
  --night-hill-near: #14152C;
  --day-hill-far: #C7D6F6;
  --day-hill-near: #D8CDF3;
  --day-ground: #E2DAF5;
  --sun: #FFF0B5;
  --night-glass: rgba(20, 22, 44, 0.62);
  --ink-soft: rgba(31, 41, 55, 0.08);
  --lift: 0 2px 4px rgba(31, 41, 55, 0.05), 0 24px 48px -20px rgba(91, 63, 196, 0.28);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Site surfaces. Light by default; [data-theme="dark"] (set before first paint from the system setting) swaps
     them for the brand's dark tokens in packages/brand/tokens.css. */
  --s-bg: var(--pa-bg);
  --s-surface: var(--pa-soft-stone);
  --s-paper: var(--pa-warm-white);
  --s-muted: var(--pa-text-muted);
  --s-accent: var(--pa-violet);
  --s-inv: var(--pa-charcoal);
  --s-inv-ink: var(--pa-warm-white);
  --s-glass-strong: var(--pa-glass-strong);
  --s-glass-faint: var(--pa-glass-faint);
  --s-unread: color-mix(in srgb, var(--pa-charcoal) 52%, var(--pa-warm-white));
  --s-wave-off: color-mix(in srgb, var(--pa-charcoal) 20%, transparent);
  --s-hl-peach: var(--pa-peach); --s-hl-blue: var(--pa-mist-blue); --s-hl-lav: var(--pa-lavender);
  color-scheme: light;
}
[data-theme="dark"] {
  --s-bg: var(--pa-bg);
  --s-surface: var(--pa-surface);
  --s-paper: var(--pa-surface-raised);
  --s-muted: var(--pa-text-muted);
  --s-accent: var(--pa-link);
  --s-inv: var(--pa-lavender);
  --s-inv-ink: var(--pa-charcoal);
  --s-glass-strong: color-mix(in srgb, var(--pa-surface-raised) 90%, transparent);
  --s-glass-faint: color-mix(in srgb, var(--pa-surface-raised) 60%, transparent);
  --s-unread: color-mix(in srgb, var(--pa-text) 50%, var(--pa-bg));
  --s-wave-off: color-mix(in srgb, var(--pa-text) 22%, transparent);
  --s-hl-peach: color-mix(in srgb, var(--pa-lavender-deep) 42%, transparent);
  --s-hl-blue: color-mix(in srgb, var(--pa-mist-blue) 34%, transparent);
  --s-hl-lav: color-mix(in srgb, var(--pa-lavender) 40%, transparent);
  --lift: 0 2px 4px rgba(0, 0, 0, 0.2), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--pa-bg); color: var(--pa-text);
  font-family: var(--pa-font-body); font-size: var(--pa-text-body); line-height: var(--pa-leading-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { flex: 1; }
a { color: var(--pa-link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pa-focus); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--pa-font-display); font-weight: 700; line-height: var(--pa-leading-tight); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
.wrap { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.narrow { max-width: 46rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; border-radius: 99px; background: var(--s-inv); color: var(--s-inv-ink); font-weight: 600; }
.skip:focus { top: 1rem; }

/* Paper grain over everything, very faint */
.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Reading progress, linked to scroll where the browser supports it */
@supports (animation-timeline: scroll()) {
  body.home::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 45; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--pa-lavender-deep), var(--pa-sky-deep), var(--pa-peach));
    animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Header */
header.site { position: sticky; top: 0; z-index: 30; padding-block: .85rem; transition: background .3s, box-shadow .3s; }
header.site.stuck { background: color-mix(in srgb, var(--s-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--pa-border); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lockup { display: inline-flex; align-items: center; gap: .55em; color: var(--pa-text); text-decoration: none; font-family: var(--pa-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.lockup img { width: 1.75em; height: 1.75em; }
.mark { display: inline-flex; align-items: center; gap: .11em; height: 1.6em; width: 1.6em; justify-content: center; }
.mark i { width: .24em; border-radius: 99px; height: var(--h); transition: height .25s var(--spring); }
.mark i:nth-child(1) { --h: 46%; background: linear-gradient(180deg, var(--pa-lavender), var(--pa-lavender-deep)); }
.mark i:nth-child(2) { --h: 84%; background: linear-gradient(180deg, var(--pa-mist-blue), var(--pa-sky-deep)); }
.mark i:nth-child(3) { --h: 70%; background: linear-gradient(180deg, var(--pa-peach), var(--pa-pink)); }
.mark i:nth-child(4) { --h: 34%; background: linear-gradient(180deg, var(--pa-pink), var(--pa-lavender)); }
.mark.live i { animation: eq .5s ease-in-out infinite alternate; }
.mark.live i:nth-child(2) { animation-delay: -.2s; } .mark.live i:nth-child(3) { animation-delay: -.35s; } .mark.live i:nth-child(4) { animation-delay: -.1s; }
@keyframes eq { from { height: 22%; } to { height: 92%; } }
nav.top { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.6rem); font-weight: 600; font-size: .95rem; }
nav.top a:not(.btn) { color: var(--pa-text); text-decoration: none; }
nav.top a:not(.btn):hover { color: var(--s-accent); }
@media (max-width: 640px) { nav.top a:not(.btn) { display: none; } }

/* Buttons */
.btn { --tx: 0px; --ty: 0px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.5rem; border: 0; border-radius: var(--pa-radius-pill); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transform: translate(var(--tx), var(--ty)); transition: transform .35s var(--ease), box-shadow .3s, background .2s; }
.btn-primary { background: var(--pa-primary); color: var(--pa-on-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -10px var(--pa-lavender-deep); }
.btn-primary:hover { background: var(--pa-lavender-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -10px var(--pa-lavender-deep); }
.btn-dark { background: var(--s-inv); color: var(--s-inv-ink); }
.btn-dark:hover { background: var(--pa-violet); }
.btn-small { padding: .6rem 1.05rem; font-size: .9rem; }
.btn:active { transform: translate(var(--tx), var(--ty)) scale(.97); }

/* Highlighter marks that sweep in */
.hl { background-image: linear-gradient(transparent 58%, var(--hl, var(--s-hl-peach)) 58%, var(--hl, var(--s-hl-peach)) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .9s var(--ease); color: inherit; }
.hl { background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .06em; }
.js .hl { background-size: 0% 100%; }
.js .in .hl, .js .hl.in { background-size: 100% 100%; }
.hl.b { --hl: var(--s-hl-blue); }
.hl.p { --hl: var(--s-hl-lav); }

/* Reveal */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* Shared section heading */
section { position: relative; }
.big { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.06; max-width: 18ch; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--pa-font-body); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-accent); }
.kicker::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: currentColor; }

/* ---------- Hero ---------- */
.hero { overflow: hidden; margin-top: -4.2rem; padding: clamp(6rem, 12vh, 8rem) 0 clamp(4rem, 8vh, 5.5rem); min-height: min(100svh, 60rem); display: flex; align-items: center; isolation: isolate; }
.spot { --mx: 50%; --my: 34%; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(34rem 26rem at var(--mx) var(--my), color-mix(in srgb, var(--pa-lavender) 62%, transparent), transparent 70%); transition: opacity .6s; }
.blobs { position: absolute; inset: 0; z-index: -2; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.blobs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7; animation: drift 22s ease-in-out infinite alternate; }
.blobs i:nth-child(1) { width: 34rem; height: 26rem; right: -10rem; bottom: -8rem; background: var(--pa-peach); }
.blobs i:nth-child(2) { width: 26rem; height: 22rem; left: -10rem; top: 30%; background: var(--pa-mist-blue); animation-delay: -8s; }
.blobs i:nth-child(3) { width: 18rem; height: 16rem; right: 18%; top: 8%; background: var(--pa-pink); opacity: .45; animation-delay: -14s; }
@keyframes drift { to { transform: translate(-4rem, -3rem) scale(1.12); } }

.i-pause { display: none; }
[aria-pressed="true"] .i-pause { display: block; } [aria-pressed="true"] .i-play { display: none; }

.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); color: var(--pa-text-muted); max-width: 36rem; text-wrap: balance; }
.lede strong { color: var(--pa-text); font-weight: 600; }
.lede .plus { color: var(--pa-text); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.formnote { margin-top: .85rem; font-size: .85rem; color: var(--pa-text-muted); min-height: 1.4em; }
.formnote.ok { color: var(--pa-mint-ink); font-weight: 600; }
.formnote.err { color: var(--pa-rose-ink); font-weight: 600; }
[data-theme="dark"] .formnote.ok { color: var(--pa-mint); }
[data-theme="dark"] .formnote.err { color: var(--pa-rose); }
[data-theme="dark"] .signup:has(input[aria-invalid="true"]) { border-color: var(--pa-rose); }

/* Sign-up */
.signup { display: flex; gap: .35rem; padding: .35rem; border-radius: 99px; background: var(--s-glass-strong); border: 1px solid var(--pa-border); box-shadow: var(--lift); width: min(100%, 28rem); transition: border-color .2s, box-shadow .2s; }
.signup:focus-within { border-color: var(--s-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-lavender) 55%, transparent), var(--lift); }
.signup input[type="email"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 .9rem; font: inherit; font-size: 1rem; color: var(--pa-text); }
.signup input::placeholder { color: var(--pa-text-muted); opacity: .8; }
.signup input:focus { outline: none; }
.signup .btn { padding: .85rem 1.25rem; }
@media (max-width: 420px) { .signup { flex-direction: column; border-radius: 26px; padding: .5rem; } .signup input[type="email"] { padding: .8rem .9rem; } }
.signup[aria-busy="true"] .btn { opacity: .75; cursor: progress; }
.signup:has(input[aria-invalid="true"]) { border-color: var(--pa-rose-ink); }
.signup.done { opacity: .6; }
/* Honeypot: off screen for people and assistive tech; naive bots fill it in. */
.hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }
.fineprint { margin-top: .35rem; font-size: .78rem; color: var(--pa-text-muted); }
.fineprint a { color: var(--s-accent); }
.formnote a { color: var(--s-accent); }

/* Optional "I'm…" chips under the closing form */
.segment[hidden] { display: none; }
.segment { border: 0; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; max-width: 30rem; }
.segment legend { float: left; margin-right: .35rem; font-size: .85rem; color: var(--pa-text-muted); font-weight: 600; }
.segment legend span { font-weight: 400; }
.segment label { position: relative; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment label span { display: inline-block; padding: .35rem .8rem; border-radius: 99px; border: 1px solid var(--pa-border); background: var(--s-glass-strong); font-size: .85rem; color: var(--pa-text); transition: background .2s, border-color .2s; }
.segment input:checked + span { background: color-mix(in srgb, var(--pa-lavender) 70%, transparent); border-color: var(--s-accent); font-weight: 600; }
.segment input:focus-visible + span { outline: 3px solid var(--s-accent); outline-offset: 2px; }

/* Store placeholders: not links, not official badges */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.store { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem .55rem .8rem; border-radius: 16px; background: var(--s-inv); color: var(--s-inv-ink); font-weight: 600; font-size: 1rem; line-height: 1.1; cursor: default; position: relative; overflow: hidden; opacity: .92; }
.store small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pa-lavender); }
.store svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.scrollcue { position: absolute; left: 50%; bottom: 1.4rem; width: 1.6rem; height: 2.5rem; margin-left: -.8rem; border-radius: 99px; border: 2px solid color-mix(in srgb, var(--pa-text) 35%, transparent); }
.scrollcue span { position: absolute; left: 50%; top: .45rem; width: 4px; height: .5rem; margin-left: -2px; border-radius: 4px; background: var(--pa-text); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(.9rem); } }
@media (max-height: 700px), (max-width: 640px) { .scrollcue { display: none; } }

/* ---------- Waveforms (drawn by site.js from a speech-like envelope) ---------- */
.wave { --p: 0; display: block; position: relative; height: 2.6rem; color: var(--pa-text); }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wave line { stroke-linecap: round; }
.wave .off line { stroke: var(--wave-off, var(--s-wave-off)); }
.wave .on { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.wave .on line { stroke: var(--wave-on, var(--s-accent)); }

.sentence { margin-top: 1.25rem; font-family: var(--pa-font-display); font-weight: 700; font-size: clamp(1.45rem, .9rem + 2.4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.5; max-width: 30ch; text-wrap: balance; }
.pick { display: inline-block; position: relative; vertical-align: baseline; }
.pick select { font: inherit; letter-spacing: inherit; color: var(--pa-charcoal); border: 0; cursor: pointer; border-radius: 16px; padding: .05em 1.25em .1em .45em; margin: .08em 0;
  background: var(--pk) no-repeat; box-shadow: inset 0 -3px 0 rgba(31,41,55,.12), 0 8px 20px -12px var(--pa-lavender-deep);
  -webkit-appearance: none; appearance: none; field-sizing: content; max-width: 100%; transition: transform .25s var(--spring), box-shadow .2s; }
.pick::after { content: ""; position: absolute; right: .5em; top: 50%; width: .32em; height: .32em; border: solid var(--pa-charcoal); border-width: 0 .09em .09em 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: transform .25s; }
.pick:hover select { transform: translateY(-2px); }
.p1 { --pk: var(--pa-lavender); } .p2 { --pk: var(--pa-mist-blue); }
.pick select:focus-visible { outline: 3px solid var(--pa-violet); outline-offset: 3px; }
/* Customisable select where the browser supports it (Chromium, 2025+) */
@supports (appearance: base-select) {
  .pick select, .pick select::picker(select) { appearance: base-select; }
  .pick select::picker-icon { display: none; }
  .pick select::picker(select) { border: 1px solid var(--pa-border); border-radius: 20px; padding: .4rem; margin-top: .4rem; max-height: min(24rem, 60vh); background: var(--s-glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--lift);
    font-family: var(--pa-font-body); font-size: 1rem; letter-spacing: 0; opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .2s, transform .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete; }
  .pick select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { .pick select:open::picker(select) { opacity: 0; transform: translateY(-6px) scale(.98); } }
  .pick option { padding: .55rem .8rem; border-radius: 12px; font-weight: 600; color: var(--pa-text); }
  .pick option:hover, .pick option:focus-visible { background: var(--s-surface); outline: none; }
  .pick option:checked { background: var(--pk); }
  .pick option::checkmark { display: none; }
  .pick optgroup { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pa-text-muted); padding: .5rem .8rem .2rem; }
  .pick legend { padding: .6rem .8rem .2rem; }
}

.episode { position: relative; margin-top: clamp(2rem, 5vw, 3rem); width: min(100%, 58rem); display: grid; text-align: left; border-radius: var(--pa-v2-radius-hero); background: var(--s-glass-strong); border: 1px solid var(--pa-border); box-shadow: var(--lift); overflow: hidden; }
@media (min-width: 820px) { .episode { grid-template-columns: .95fr 1.05fr; } }
.tilt { --rx: 0deg; --ry: 0deg; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); will-change: transform; }
.ep-stage { position: relative; display: grid; place-items: center; padding: clamp(2rem, 5vw, 3rem) 1rem; min-height: 15rem;
  background: radial-gradient(80% 90% at 30% 20%, color-mix(in srgb, var(--pa-peach) 85%, transparent), transparent 70%), radial-gradient(70% 80% at 80% 90%, color-mix(in srgb, var(--pa-mist-blue) 90%, transparent), transparent 70%), var(--s-surface); }
.ep-stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 18%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,41,55,.12), transparent); }
.ep-body { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: .7rem; }
.ep-meta { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--s-accent); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--pa-mint-ink); box-shadow: 0 0 0 4px var(--pa-mint); flex: none; }
.ep-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.025em; }
.ep-src { font-size: .9rem; color: var(--pa-text-muted); margin-top: -.3rem; }
.transcript { display: grid; gap: .55rem; margin: .4rem 0 .2rem; }
.line { display: grid; grid-template-columns: 3.2rem 1fr; gap: .5rem; font-size: 1.05rem; line-height: 1.45; padding: .55rem .7rem; border-radius: 14px; transition: background .3s; }
.line b { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding-top: .2rem; }
.line[data-who="nell"] b { color: var(--pa-amber-ink); }
.line[data-who="arlo"] b { color: var(--pa-mint-ink); }
.line.speaking { background: var(--s-surface); }
.js .line .w { color: var(--pa-text-muted); transition: color .2s; }
.js .line .w.on { color: var(--pa-text); }
.js .line .w.cur { color: var(--s-accent); }
.player { display: flex; align-items: center; gap: .9rem; margin-top: .2rem; }
.pp-big { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--s-inv); color: var(--s-inv-ink); box-shadow: var(--lift); transition: transform .3s var(--spring), background .2s; }
.pp-big:hover { transform: scale(1.06); background: var(--pa-violet); }
.player .wave { flex: 1; height: 2.8rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.tags li { font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 99px; background: var(--s-surface); color: var(--pa-text); }
.aside { margin-top: 1rem; font-size: .85rem; color: var(--pa-text-muted); }
/* Swap animation when the picker changes */
.episode.swap .ep-title, .episode.swap .ep-src, .episode.swap .transcript, .episode.swap .tags, .episode.swap .ep-meta { animation: swapin .6s var(--ease); }
@keyframes swapin { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* ---------- Hosts: characters with eyes that follow you, blinks and a mouth that talks ---------- */
.hosts { position: relative; z-index: 1; display: flex; gap: clamp(1rem, 4vw, 2.2rem); align-items: flex-end; }
.host { --s: clamp(92px, 11vw, 138px); --m: 0; --fx: 0px; --fy: 0px; position: relative; display: grid; justify-items: center; gap: .6rem; cursor: pointer; }
.host .bod { position: relative; width: var(--s); height: var(--s); background: linear-gradient(140deg, var(--hue)); border-radius: 50%;
  box-shadow: inset calc(var(--s) * -.08) calc(var(--s) * -.1) calc(var(--s) * .18) rgba(31,41,55,.12), inset calc(var(--s) * .06) calc(var(--s) * .08) calc(var(--s) * .14) rgba(255,255,255,.55), 0 calc(var(--s) * .14) calc(var(--s) * .24) calc(var(--s) * -.12) rgba(31,41,55,.35);
  animation: breathe 3.6s ease-in-out infinite; scale: calc(1 + var(--m) * .035) calc(1 - var(--m) * .025); transform-origin: 50% 100%; transition: scale .08s; }
.host.arlo .bod { border-radius: 54% 46% 44% 56% / 58% 52% 48% 42%; animation-duration: 4.4s; animation-delay: -1.2s; }
.nell { --hue: var(--pa-host-apricot); --ring: var(--pa-amber-ink); }
.arlo { --hue: var(--pa-host-teal); --ring: var(--pa-mint-ink); }
.arlo { margin-bottom: calc(var(--s) * .06); }
@keyframes breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--s) * -.035); } }
.host .bod > span { position: absolute; translate: var(--fx) var(--fy); transition: translate .35s var(--ease); }
.host .eye { top: 36%; width: 11%; height: 16%; border-radius: 50%; background: var(--pa-charcoal); transition: translate .35s var(--ease), scale .09s; }
.host .eye.l { left: 30%; } .host .eye.r { right: 30%; }
.host .eye b { position: absolute; top: 18%; left: 22%; width: 36%; height: 30%; border-radius: 50%; background: var(--s-paper); }
.host.blink .eye { scale: 1 .1; }
.arlo .eye { height: 13%; top: 38%; }
.host .brow { top: 25%; width: 14%; height: 7%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: calc(var(--s) * .028) solid var(--pa-charcoal); opacity: .7; transition: translate .35s var(--ease), rotate .3s; }
.host .brow.l { left: 28%; } .host .brow.r { right: 28%; }
.host.ask .brow { translate: var(--fx) calc(var(--fy) - var(--s) * .05); }
.arlo .brow { top: 29%; height: 4%; border-radius: 40% 40% 0 0 / 100% 100% 0 0; } .arlo .brow.l { rotate: -4deg; } .arlo .brow.r { rotate: 4deg; }
.host .cheek { top: 55%; width: 15%; height: 8%; border-radius: 50%; background: var(--pa-pink); opacity: .75; filter: blur(1px); }
.host .cheek.l { left: 15%; } .host .cheek.r { right: 15%; }
.host .mouth { left: 50%; top: 58%; width: calc(var(--s) * (.17 + var(--m) * .06)); height: calc(var(--s) * (.05 + var(--m) * .12)); margin-left: calc(var(--s) * (.17 + var(--m) * .06) / -2);
  background: var(--pa-charcoal); border-radius: 12% 12% 999px 999px / 20% 20% 100% 100%; overflow: hidden; transition: translate .35s var(--ease), width .07s, height .07s, margin .07s; }
.host .mouth::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -30%; height: 70%; border-radius: 50%; background: var(--pa-pink); }
.nell .tuft { top: -9%; left: 50%; width: 20%; height: 22%; margin-left: -4%; background: linear-gradient(140deg, var(--hue)); border-radius: 100% 0 100% 0; rotate: -20deg; translate: 0 0; box-shadow: inset -3px -3px 6px rgba(31,41,55,.1); animation: tuft 3.6s ease-in-out infinite; transform-origin: 0 100%; }
@keyframes tuft { 50% { rotate: -6deg; } }
.arlo .phones { top: -6%; left: 4%; right: 4%; height: 60%; border: calc(var(--s) * .045) solid var(--pa-charcoal); border-bottom: 0; border-radius: 999px 999px 0 0; translate: 0 0; }
.arlo .phones::before, .arlo .phones::after { content: ""; position: absolute; bottom: -24%; width: 18%; height: 44%; border-radius: 40%; background: var(--pa-charcoal); }
.arlo .phones::before { left: -14%; } .arlo .phones::after { right: -14%; }
.host .ring { position: absolute; top: 0; left: 50%; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); border-radius: 50%; border: 3px solid var(--ring); opacity: 0; pointer-events: none; }
.host.speaking .ring { animation: ring 1.3s ease-out infinite; }
@keyframes ring { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.host .name { font-weight: 600; font-size: .85rem; padding: .15rem .65rem; border-radius: 99px; background: var(--s-glass-strong); }
.host.boop .bod { animation: boop .6s var(--spring); }
@keyframes boop { 30% { scale: 1.12 .86; } 60% { scale: .94 1.08; translate: 0 calc(var(--s) * -.18); } }

/* Mini hosts used in the phone and tiles */
.mh { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; }
.mh i { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(140deg, var(--hue)); box-shadow: inset -4px -5px 8px rgba(31,41,55,.12); }
.mh.arlo i { border-radius: 54% 46% 44% 56% / 58% 52% 48% 42%; }
.mh i::before { content: ""; position: absolute; top: 36%; left: 30%; width: 12%; height: 17%; border-radius: 50%; background: var(--pa-charcoal); box-shadow: calc(2.6rem * .28) 0 0 var(--pa-charcoal); animation: miniblink 4.5s infinite; }
.mh i::after { content: ""; position: absolute; left: 41%; top: 60%; width: 18%; height: 8%; border-radius: 0 0 99px 99px; background: var(--pa-charcoal); }
.mh.arlo i::before { animation-delay: -2s; }
@keyframes miniblink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }

/* ---------- How it works: phone ---------- */
.how { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.how-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1.05fr .95fr; } }
.steps { margin-top: 2rem; display: grid; gap: .4rem; counter-reset: s; }
.steps button { position: relative; width: 100%; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; text-align: left; padding: .95rem 1rem; border: 0; border-radius: 20px; background: transparent; cursor: pointer; transition: background .3s; overflow: hidden; }
.steps button:hover { background: var(--s-surface); }
.steps .n { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--s-surface); transition: background .3s, color .3s; }
.steps b { font-family: var(--pa-font-display); font-size: 1.2rem; letter-spacing: -0.015em; }
.steps .d { color: var(--pa-text-muted); font-size: .98rem; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.steps li.on .d { max-height: 4rem; }
.steps li.on button { background: var(--s-glass-strong); box-shadow: var(--pa-shadow-soft); }
.steps li.on .n { background: var(--s-inv); color: var(--s-inv-ink); }
.steps .prog { position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 3px; border-radius: 3px; background: transparent; overflow: hidden; }
.steps li.on .prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--pa-lavender-deep), var(--pa-sky-deep)); animation: fillw var(--dur, 4s) linear forwards; }
.steps.paused li.on .prog i { animation-play-state: paused; }
@keyframes fillw { to { width: 100%; } }

.phone-wrap { display: grid; place-items: center; position: relative; }
.phone-wrap::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 90deg, var(--pa-lavender), var(--pa-mist-blue), var(--pa-peach), var(--pa-pink), var(--pa-lavender)); filter: blur(50px); opacity: .55; animation: spin 24s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }
.phone { position: relative; width: min(18.5rem, 78vw); aspect-ratio: 9 / 18.6; border-radius: 3rem; padding: .6rem; background: var(--pa-charcoal); box-shadow: 0 50px 80px -40px rgba(31,41,55,.6), inset 0 0 0 2px rgba(255,255,255,.08); }
.screen { position: relative; height: 100%; border-radius: 2.5rem; overflow: hidden; background: var(--s-paper); }
.island { position: absolute; top: .6rem; left: 50%; width: 5.5rem; height: 1.5rem; margin-left: -2.75rem; border-radius: 99px; background: var(--pa-charcoal); z-index: 2; }
.view { position: absolute; inset: 0; padding: 3rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; opacity: 0; transform: translateX(30px); transition: opacity .5s, transform .6s var(--ease); font-size: .85rem; }
.view.on { opacity: 1; transform: none; }
.view.off { transform: translateX(-30px); }
.v-title { font-family: var(--pa-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: .3rem; }
.v-meta { color: var(--pa-text-muted); font-size: .78rem; }
.v-foot { margin-top: auto; font-size: .72rem; color: var(--pa-text-muted); text-align: center; }
@keyframes tap { 0%, 60%, 100% { transform: none; } 70% { transform: scale(.96); } }
.chk { display: flex; gap: .55rem; align-items: center; padding: .55rem .7rem; border-radius: 14px; background: var(--s-surface); font-weight: 600; font-size: .8rem; }
.chk span { width: 1.3rem; height: 1.3rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pa-mint); color: var(--pa-mint-ink); font-size: .7rem; }
.view.on .chk { animation: pop .5s var(--spring) both; }
.view.on .chk:nth-of-type(2) { animation-delay: .35s; } .view.on .chk:nth-of-type(3) { animation-delay: .7s; }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(6px); } }
.banner { margin-top: auto; padding: .7rem; border-radius: 14px; text-align: center; font-weight: 600; background: var(--pa-mint); color: var(--pa-mint-ink); }
.redact { position: relative; display: inline-block; padding: .55rem .7rem; border-radius: 14px; background: var(--pa-amber); color: var(--pa-amber-ink); font-weight: 600; font-size: .8rem; }
.redact s { text-decoration: none; display: inline-block; animation: redact-out 4s var(--ease) infinite; }
.redact em { font-style: normal; display: inline-block; background: var(--pa-mint); color: var(--pa-mint-ink); border-radius: 6px; padding: 0 .3em; margin-left: -6.4em; opacity: 0; animation: redact-in 4s var(--ease) infinite; }
@keyframes redact-out { 0%, 35% { opacity: 1; filter: none; } 50%, 100% { opacity: 0; filter: blur(4px); } }
@keyframes redact-in { 0%, 45% { opacity: 0; transform: scale(.8); } 60%, 100% { opacity: 1; transform: none; } }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips span { padding: .35rem .7rem; border-radius: 99px; background: var(--s-surface); font-weight: 600; font-size: .75rem; }
.chips span.sel { background: var(--s-inv); color: var(--s-inv-ink); }
.mini-hosts { display: flex; gap: 1rem; justify-content: center; padding: .4rem 0; }
.make { margin-top: auto; padding: .8rem; border-radius: 99px; text-align: center; font-weight: 600; background: var(--pa-lavender); }
.cover { height: 9rem; border-radius: 22px; display: grid; place-items: center; padding: 0 1rem; background: linear-gradient(140deg, var(--pa-lavender), var(--pa-mist-blue) 55%, var(--pa-peach)); }
.cover .wave { width: 100%; height: 3.2rem; --wave-off: rgba(31,41,55,.25); --wave-on: var(--pa-charcoal); }
.view.on .cover .wave { animation: playp 8s linear infinite; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes playp { from { --p: 0; } to { --p: 1; } }
.ptitle { font-family: var(--pa-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin-top: .3rem; }
.ra { font-size: .85rem; padding: .55rem .7rem; border-radius: 14px; background: var(--s-surface); color: var(--pa-text-muted); }
.ra .on { color: var(--pa-text); background: linear-gradient(transparent 60%, var(--pa-lavender) 60%); }
.note-pop { align-self: center; font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: 99px; background: var(--s-inv); color: var(--s-inv-ink); }
.view.on .note-pop { animation: pop .5s var(--spring) 3.3s both; }
.ctrl { margin-top: auto; display: flex; justify-content: space-around; align-items: center; font-weight: 600; color: var(--pa-text-muted); }
.ctrl .big { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--s-inv); color: var(--s-inv-ink); }
.ctrl svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }

/* ---------- Drive scene, night and day ---------- */
.drive { --sky-a: var(--night); --sky-b: var(--night-sky); --glow: rgba(165,139,255,.35); --tar: var(--night-road); --edge-l: rgba(184,214,255,.4); --edge-r: rgba(255,214,194,.4); --lane: var(--pa-lavender); --hill1: var(--night-hill-far); --hill2: var(--night-hill-near); --ground: var(--night-hill-near); --ink: var(--pa-warm-white); --muted: var(--pa-on-dark-muted); --card: var(--night-glass); --cardline: rgba(255,255,255,.12);
  color: var(--ink); overflow: hidden; isolation: isolate; min-height: min(100svh, 52rem); display: flex; align-items: flex-start; padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b)); transition: color .8s; }
.drive[data-mode="day"] { --sky-a: var(--pa-mist-blue); --sky-b: var(--pa-peach); --glow: rgba(255,240,181,.7); --tar: var(--pa-soft-stone); --edge-l: rgba(91,63,196,.25); --edge-r: rgba(91,63,196,.25); --lane: var(--pa-violet); --hill1: var(--day-hill-far); --hill2: var(--day-hill-near); --ground: var(--day-ground); --ink: var(--pa-charcoal); --muted: var(--pa-slate); --card: var(--pa-glass-strong); --cardline: var(--pa-border); }
.drive::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, var(--pa-mist-blue), var(--pa-peach)); opacity: 0; transition: opacity 1.2s var(--ease); }
.drive[data-mode="day"]::before { opacity: 1; }
.sky { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60rem 26rem at 50% 64%, var(--glow), transparent 62%); transition: background 1.2s; }
.stars { position: absolute; inset: 0 0 45% 0; transition: opacity 1s;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff9, transparent), radial-gradient(1px 1px at 30% 60%, #fff7, transparent), radial-gradient(1.5px 1.5px at 55% 25%, #fffa, transparent), radial-gradient(1px 1px at 75% 50%, #fff7, transparent), radial-gradient(1px 1px at 88% 15%, #fff9, transparent), radial-gradient(1px 1px at 42% 8%, #fff6, transparent), radial-gradient(1.2px 1.2px at 64% 40%, #fff8, transparent), radial-gradient(1px 1px at 20% 42%, #fff6, transparent), radial-gradient(1px 1px at 94% 38%, #fff7, transparent);
  animation: tw 5s ease-in-out infinite alternate; }
@keyframes tw { to { opacity: .45; } }
.drive[data-mode="day"] .stars { opacity: 0; animation: none; }
.orb { position: absolute; width: 5.5rem; height: 5.5rem; border-radius: 50%; right: 14%; top: 14%; background: radial-gradient(circle at 35% 35%, var(--pa-warm-white), var(--pa-soft-stone)); box-shadow: inset -1.1rem -.6rem 0 0 rgba(201,184,255,.55), 0 0 60px 10px rgba(201,184,255,.25); transition: top 1.4s var(--ease), right 1.4s var(--ease), background 1.2s, box-shadow 1.2s; }
.drive[data-mode="day"] .orb { top: 9%; right: 20%; background: radial-gradient(circle, var(--pa-warm-white), var(--sun)); box-shadow: 0 0 0 14px rgba(255,240,181,.45), 0 0 90px 30px rgba(255,214,194,.8); }
.cloud { position: absolute; height: 2.4rem; border-radius: 99px; background: var(--pa-glass); opacity: 0; transition: opacity 1s; animation: cloud 40s linear infinite; }
.cloud::before { content: ""; position: absolute; width: 45%; height: 160%; left: 18%; bottom: 30%; border-radius: 50%; background: inherit; }
.cloud.c1 { width: 10rem; top: 9%; left: 6%; } .cloud.c2 { width: 7rem; top: 22%; left: 62%; animation-duration: 55s; animation-delay: -20s; }
.drive[data-mode="day"] .cloud { opacity: 1; }
@keyframes cloud { from { translate: -20vw 0; } to { translate: 40vw 0; } }
.hills { position: absolute; left: 0; right: 0; bottom: calc(53% - 2px); width: 100%; height: 9rem; z-index: -1; }
.hills .h1 { fill: var(--hill1); transition: fill 1.2s; } .hills .h2 { fill: var(--hill2); transition: fill 1.2s; }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 53%; width: 100%; z-index: -1; }
.road .ground { fill: var(--ground); transition: fill 1.2s; }
.road .tar { fill: var(--tar); transition: fill 1.2s; }
.road .edge { stroke-width: 3; transition: stroke 1.2s; } .road .edge.l { stroke: var(--edge-l); } .road .edge.r { stroke: var(--edge-r); }
.road .lane { fill: none; stroke: var(--lane); stroke-linecap: round; stroke-dasharray: 18 30; transition: stroke 1.2s; }
.road .lane.c { stroke-width: 7; } .road .lane.l, .road .lane.r { stroke-width: 3.5; opacity: .5; }
.drive-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.switch { display: inline-flex; padding: .3rem; gap: .2rem; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid var(--cardline); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; }
.drive[data-mode="day"] .switch { background: var(--pa-glass); }
.switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.05rem; border: 0; border-radius: 99px; background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; transition: color .4s; }
.switch button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.switch button[aria-pressed="true"] { color: var(--pa-charcoal); }
.switch::before { content: ""; position: absolute; top: .3rem; bottom: .3rem; left: var(--kx, .3rem); width: var(--kw, 50%); border-radius: 99px; background: var(--pa-lavender); transition: left .5s var(--spring), width .5s var(--spring), background .6s; box-shadow: 0 6px 16px -6px var(--pa-lavender-deep); }
.drive[data-mode="day"] .switch::before { background: var(--pa-warm-white); }
.drive-h { font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.6rem); letter-spacing: -0.04em; line-height: 1.04; max-width: 13ch; margin: 1.6rem auto 0; }
.drive-h em { font-style: normal; background: linear-gradient(90deg, var(--pa-lavender), var(--pa-mist-blue), var(--pa-peach)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.drive[data-mode="day"] .drive-h em { background: linear-gradient(90deg, var(--pa-violet), var(--pa-lavender-deep)); -webkit-background-clip: text; background-clip: text; }
.car { margin-top: clamp(2.5rem, 8vw, 5rem); width: min(100%, 27rem); padding: 1.25rem 1.4rem 1.4rem; border-radius: 28px; text-align: left; background: var(--card); border: 1px solid var(--cardline); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); transition: background 1s, border-color 1s; }
.car-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.queue { display: flex; gap: 6px; margin: .85rem 0 1rem; }
.queue i { flex: 1; height: 5px; border-radius: 4px; background: var(--cardline); overflow: hidden; }
.queue i:first-child::after { content: ""; display: block; height: 100%; width: 35%; background: var(--pa-lavender); }
.car-t { font-family: var(--pa-font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
.car-m { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.car .wave { margin-top: 1rem; height: 2.2rem; --wave-off: color-mix(in srgb, var(--ink) 22%, transparent); --wave-on: var(--ink); color: var(--ink); }
.ctl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-top: 1rem; }
.ctl span { height: 3.6rem; border-radius: 18px; display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ctl span.p { background: var(--pa-lavender); color: var(--pa-charcoal); }
.ctl svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ---------- Origin ---------- */
.origin { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; background: radial-gradient(60rem 30rem at 50% 0%, color-mix(in srgb, var(--pa-peach) 70%, transparent), transparent 70%), var(--s-bg); }
.origin blockquote { margin: 0 auto; max-width: 20ch; font-family: var(--pa-font-display); font-weight: 700; font-size: clamp(1.9rem, 1rem + 3.6vw, 4rem); letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.origin blockquote::before { content: "“"; display: block; font-size: 2.2em; line-height: .6; color: var(--pa-lavender-deep); margin-bottom: .1em; }
.origin mark { color: inherit; background: linear-gradient(transparent 55%, var(--s-hl-peach) 55%, var(--s-hl-peach) 92%, transparent 92%) no-repeat; background-size: 100% 100%; }
.js .origin mark { background-size: 0 100%; transition: background-size 1.1s var(--ease) .3s; }
.js .origin .in mark, .js .origin.in mark { background-size: 100% 100%; }
.origin .sub { margin: 1.6rem auto 0; max-width: 30rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--pa-text-muted); }

/* ---------- USPs ---------- */
.usp { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.honest { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; font-weight: 600; color: var(--pa-text-muted); }
.honest .dot { background: var(--pa-amber-ink); box-shadow: 0 0 0 4px var(--pa-amber); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px var(--pa-amber); } }
.tiles { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { --x: 50%; --y: 50%; position: relative; padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--pa-v2-radius-card); background: var(--s-surface); overflow: hidden; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--lift); }
.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(16rem 16rem at var(--x) var(--y), color-mix(in srgb, var(--pa-lavender) 60%, transparent), transparent 70%); }
.glow:hover::before { opacity: 1; }
.tile .art { height: 7.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1rem; border-radius: 18px; background: var(--s-glass-faint); position: relative; overflow: hidden; }
.tile h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.tile p { margin-top: .3rem; color: var(--pa-text-muted); font-size: .98rem; line-height: 1.45; }
.t-own .art { flex-wrap: wrap; align-content: center; padding: 0 1rem; }
.file { font-size: .75rem; font-weight: 600; padding: .45rem .7rem; border-radius: 10px; background: var(--s-paper); box-shadow: var(--pa-shadow-soft); animation: float 4s ease-in-out infinite; }
.file:nth-child(2) { animation-delay: -1s; background: var(--pa-mist-blue); } .file:nth-child(3) { animation-delay: -2s; background: var(--pa-peach); } .file:nth-child(4) { animation-delay: -3s; background: var(--pa-lavender); }
@keyframes float { 50% { transform: translateY(-6px) rotate(-2deg); } }
.t-hosts .art { gap: .8rem; flex-wrap: wrap; align-content: center; }
.t-hosts .wave { width: 75%; height: 1.6rem; flex-basis: 75%; }
.t-hosts .wave, .car .wave { animation: playp 9s linear infinite; }
.t-check .redact { font-size: .9rem; }
.t-private .art svg { width: 3.2rem; height: 3.2rem; fill: none; stroke: var(--s-accent); stroke-width: 2; stroke-linecap: round; animation: lock 3.5s var(--ease) infinite; }
.t-private .art svg path { transform-origin: 16px 11px; animation: shackle 3.5s var(--ease) infinite; }
@keyframes shackle { 0%, 20% { transform: translateY(-3px); } 35%, 100% { transform: none; } }
@keyframes lock { 30% { transform: scale(1); } 38% { transform: scale(1.12); } 46% { transform: scale(1); } }
.ra-demo { font-family: var(--pa-font-display); font-weight: 700; font-size: 1.1rem; padding: 0 1rem; text-align: center; line-height: 1.5; }
.ra-demo span { opacity: .3; animation: raw 4.2s infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes raw { 0% { opacity: .3; } 8%, 70% { opacity: 1; background: linear-gradient(transparent 60%, var(--pa-lavender) 60%); } 90%, 100% { opacity: .3; } }
.t-notes .art { flex-direction: column; gap: .55rem; }
.nt { font-size: .8rem; font-weight: 600; padding: .5rem .75rem; border-radius: 12px; background: var(--s-paper); box-shadow: var(--pa-shadow-soft); }
.nt small { color: var(--s-accent); margin-left: .3rem; }
.ex { font-size: .75rem; font-weight: 600; padding: .35rem .75rem; border-radius: 99px; background: var(--s-inv); color: var(--s-inv-ink); }
.fmt { font-family: var(--pa-font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; padding: .3rem 1rem; border-radius: 16px; background: var(--pa-peach); transition: transform .4s var(--spring), opacity .3s; }
.fmt.flip { transform: translateY(12px) scale(.9); opacity: 0; }
.ring { width: 6.5rem; height: 6.5rem; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ring .bg { stroke: var(--pa-track); }
.ring .seg { stroke-dasharray: 0 302; animation: seg 5s var(--ease) infinite; }
.ring .s1 { stroke: var(--pa-lavender-deep); --l: 110; --o: 0; }
.ring .s2 { stroke: var(--pa-sky-deep); --l: 90; --o: -118; animation-delay: .3s; }
.ring .s3 { stroke: var(--pa-peach); --l: 70; --o: -216; animation-delay: .6s; }
@keyframes seg { 0% { stroke-dasharray: 0 302; stroke-dashoffset: var(--o); } 40%, 85% { stroke-dasharray: var(--l) 302; stroke-dashoffset: var(--o); } 100% { stroke-dasharray: 0 302; stroke-dashoffset: var(--o); } }
.rl { position: absolute; font-family: var(--pa-font-display); font-weight: 700; font-size: 1.5rem; text-align: center; line-height: 1; }
.rl small { display: block; font-family: var(--pa-font-body); font-size: .7rem; color: var(--pa-text-muted); margin-top: .2rem; }

/* ---------- Who ---------- */
.who { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.marquee { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: .8rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.row { overflow: hidden; }
.track { display: flex; gap: .7rem; width: max-content; animation: marq 70s linear infinite; }
.r2 .track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.track span { flex: none; font-family: var(--pa-font-display); font-weight: 700; font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); letter-spacing: -0.02em; padding: .55rem 1.2rem; border-radius: 99px; background: var(--c, var(--s-surface)); }
.track span:nth-child(5n+1) { --c: var(--pa-lavender); } .track span:nth-child(5n+2) { --c: var(--s-surface); } .track span:nth-child(5n+3) { --c: var(--pa-peach); } .track span:nth-child(5n+4) { --c: var(--pa-mist-blue); } .track span:nth-child(5n) { --c: var(--pa-mint); }
.r2 .track span { background: transparent; border: 2px solid var(--pa-border); }

/* ---------- Trust ---------- */
.trust { padding: 1.4rem 0; background: var(--s-inv); color: var(--s-inv-ink); }
.trust ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.4rem; font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: .55rem; }
.trust svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--pa-lavender); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- FAQ ---------- */
.faq { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.faq .big { margin-bottom: 1.6rem; }
details { border-bottom: 1px solid var(--pa-border); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem .2rem; font-family: var(--pa-font-display); font-weight: 700; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); letter-spacing: -0.015em; border-radius: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--s-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 1rem no-repeat; transition: transform .35s var(--spring), background-color .2s; }
details[open] summary::after { transform: rotate(135deg); background-color: var(--pa-lavender); }
summary:hover { color: var(--s-accent); }
details p { padding: 0 .2rem 1.3rem; color: var(--pa-text-muted); max-width: 40rem; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- Join ---------- */
.join { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient(50rem 30rem at 50% 100%, color-mix(in srgb, var(--pa-lavender) 60%, transparent), transparent 70%); }
.join .narrow { display: flex; flex-direction: column; align-items: center; }
.join .big { margin-bottom: 2rem; }
.join .stores { margin-top: 1.6rem; }
.join .spot { --my: 60%; }

/* Footer */
footer.site { padding-block: 1.6rem 2.4rem; font-size: var(--pa-text-small); color: var(--pa-text-muted); border-top: 1px solid var(--pa-border); }
footer.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pa-space-2) var(--pa-space-6); }
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--pa-space-6); }

/* Privacy page */
.prose { max-width: 44rem; padding-block: var(--pa-space-8) var(--pa-space-16); }
.prose h1 { font-size: var(--pa-text-h2); margin-bottom: var(--pa-space-4); }
.prose h2 { font-size: var(--pa-text-h3); margin: var(--pa-space-8) 0 var(--pa-space-2); }
.prose p { margin: 0 0 var(--pa-space-4); }
.card { padding: var(--pa-space-6); border-radius: var(--pa-radius-card); background: var(--pa-surface); border: 1px solid var(--pa-border); margin: var(--pa-space-6) 0; }

/* Screenshot mode (?shot): no transitions, so captures show the settled page */
.shot *, .shot *::before, .shot *::after { transition: none !important; }

/* Reduced motion: everything rests in its final, readable state */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.home::before { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
  .redact s { display: none; } .redact em { opacity: 1; margin-left: 0; }
  .ra-demo span { opacity: 1; }
  .ring .s1 { stroke-dasharray: 110 302; } .ring .s2 { stroke-dasharray: 90 302; stroke-dashoffset: -118; } .ring .s3 { stroke-dasharray: 70 302; stroke-dashoffset: -216; }
  .track { flex-wrap: wrap; width: auto; justify-content: center; padding: 0 1rem; }
  .track span[aria-hidden="true"], .track .dup { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .tilt { transform: none !important; }
  .wave { --p: .4; }
}

/* Phones: a smaller moon out of the headline's way, and compact side-by-side USP tiles */
@media (max-width: 640px) {
  .orb { width: 2.8rem; height: 2.8rem; top: 1rem; right: 1rem; box-shadow: inset -.6rem -.3rem 0 0 rgba(201,184,255,.55), 0 0 40px 6px rgba(201,184,255,.25); }
  .drive[data-mode="day"] .orb { top: 1rem; right: 1.4rem; }
}
@media (max-width: 619px) {
  .tiles { gap: .7rem; }
  .tile { display: grid; grid-template-columns: 6.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; align-items: start; padding: .8rem; }
  .tile .art { grid-row: span 2; height: 6.5rem; margin: 0; }
  .tile .art > * { zoom: .68; }
  .tile h3 { font-size: 1.05rem; padding-top: .35rem; }
  .tile p { font-size: .92rem; }
  .sentence { font-size: clamp(1.3rem, .9rem + 2.4vw, 2.6rem); }
}
@media (max-width: 619px) { .t-own .art { padding: 0 .4rem; gap: .3rem; } }
@media (max-width: 380px) {
  .lockup { font-size: 1.1rem; }
  nav.top .btn { padding: .55rem .85rem; font-size: .82rem; }
}

/* ======================================================================
   v4 additions (29 Oct 2026): proof under the CTA, three steps, who it is for,
   safety as a selling point, repeated CTAs, a sticky phone CTA, dark mode.
   ====================================================================== */
.pill { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem; border-radius: 99px; font-size: .88rem; font-weight: 600; color: var(--pa-text); background: var(--s-glass-strong); border: 1px solid var(--pa-border); }
.hero .formnote { text-align: center; }
.proof { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.4rem; margin-top: clamp(1.4rem, 3.5vh, 2.2rem); font-size: .92rem; font-weight: 600; color: var(--pa-text); }
.proof li { display: inline-flex; align-items: center; gap: .45rem; }
.proof svg, .promises .ico svg, .person .ico svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--s-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.formnote a { font-weight: 600; }

/* How it works: pause control for the auto-advancing walkthrough */
.playctl { margin-top: 1rem; padding: .5rem 1rem; border-radius: 99px; border: 1px solid var(--pa-border); background: transparent; color: var(--pa-text-muted); font-size: .88rem; font-weight: 600; cursor: pointer; }
.playctl:hover { color: var(--pa-text); border-color: var(--s-accent); }
.how .kicker, .who .kicker, .safe .kicker { margin-bottom: .8rem; }

/* Sample: the preview is labelled as one */
.badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .25rem .7rem; border-radius: 99px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--pa-warm-white); color: var(--pa-charcoal); }
.aside strong { color: var(--pa-text); }

/* Repeated CTA */
.midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; margin-top: clamp(2rem, 5vw, 3rem); color: var(--pa-text-muted); font-size: .95rem; text-align: center; }
.faq .midcta { justify-content: flex-start; text-align: left; }

/* Who it is for */
.people { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 860px) { .people { grid-template-columns: repeat(3, 1fr); } }
.person { position: relative; padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--pa-v2-radius-card); background: var(--s-surface); border: 1px solid var(--pa-border); overflow: hidden; isolation: isolate; }
.person::before { content: ""; position: absolute; width: 12rem; height: 12rem; right: -4rem; top: -5rem; z-index: -1; border-radius: 50%; filter: blur(30px); opacity: .55; background: var(--c); }
.person.c1 { --c: var(--pa-lavender); } .person.c2 { --c: var(--pa-mist-blue); } .person.c3 { --c: var(--pa-peach); }
.person .ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 14px; background: var(--s-paper); box-shadow: var(--pa-shadow-soft); margin-bottom: 1rem; }
.person .ico svg { width: 1.4rem; height: 1.4rem; }
.person h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.person p { margin-top: .45rem; color: var(--pa-text-muted); line-height: 1.5; }
.drive-sub { margin: 1rem auto 0; max-width: 32rem; color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }

/* Safety and privacy */
.safe { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: linear-gradient(180deg, transparent, var(--s-surface) 14%, var(--s-surface) 86%, transparent); }
.safe-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .safe-grid { grid-template-columns: 1.15fr .85fr; } }
.safe-lede { margin-top: 1.2rem; max-width: 36rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--pa-text-muted); }
.promises { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
@media (min-width: 620px) { .promises { grid-template-columns: 1fr 1fr; } }
.promises li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: start; }
.promises .ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--s-paper); box-shadow: var(--pa-shadow-soft); }
.promises h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.promises p { margin-top: .25rem; font-size: .95rem; color: var(--pa-text-muted); line-height: 1.5; }
.safe-more { margin-top: 1.6rem; font-weight: 600; }
.checkcard { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: var(--pa-v2-radius-hero); background: var(--s-paper); border: 1px solid var(--pa-border); box-shadow: var(--lift); max-width: 26rem; justify-self: center; width: 100%; }
.cc-title { font-family: var(--pa-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.cc-meta { color: var(--pa-text-muted); font-size: .88rem; margin-bottom: .3rem; }
.checkcard .chk { font-size: .92rem; }
.chk.warn span { background: var(--pa-amber); color: var(--pa-amber-ink); }
.checkcard .redact { font-size: .92rem; align-self: flex-start; }
.checkcard .banner { margin-top: .4rem; font-size: .92rem; }

/* Join: the promise */
.promise { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin: -1rem 0 1.6rem; font-weight: 600; color: var(--pa-text); }
.promise li { display: inline-flex; align-items: center; gap: .45rem; }
.promise li::before { content: "✓"; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .72rem; background: var(--pa-mint); color: var(--pa-mint-ink); }

/* Sticky CTA on phones */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--s-bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 -1px 0 var(--pa-border); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.dock .btn { width: 100%; }
.dock.on { transform: none; visibility: visible; transition: transform .35s var(--ease); }
@media (max-width: 760px) { .dock { display: block; } footer.site { padding-bottom: 6rem; } }

/* Dark mode details: pastel fills keep charcoal ink; softer glows */
[data-theme="dark"] .grain { opacity: .25; }
[data-theme="dark"] .blobs i { opacity: .22; }
[data-theme="dark"] .spot { opacity: .35; }
[data-theme="dark"] .track span, [data-theme="dark"] .file, [data-theme="dark"] .fmt, [data-theme="dark"] .make,
[data-theme="dark"] .pick option:checked, [data-theme="dark"] .tags li, [data-theme="dark"] .ra .on { color: var(--pa-charcoal); }
[data-theme="dark"] .tags li { background: var(--pa-lavender); }
[data-theme="dark"] .track span:nth-child(5n+2) { --c: var(--pa-warm-white); }
[data-theme="dark"] .file:first-child { background: var(--pa-warm-white); }
[data-theme="dark"] .ep-stage { background: radial-gradient(80% 90% at 30% 20%, color-mix(in srgb, var(--pa-peach) 30%, transparent), transparent 70%), radial-gradient(70% 80% at 80% 90%, color-mix(in srgb, var(--pa-mist-blue) 30%, transparent), transparent 70%), var(--s-surface); }
[data-theme="dark"] .line[data-who="nell"] b { color: var(--pa-peach); }
[data-theme="dark"] .line[data-who="arlo"] b { color: var(--pa-mint); }
[data-theme="dark"] .origin { background: radial-gradient(60rem 30rem at 50% 0%, color-mix(in srgb, var(--pa-lavender) 16%, transparent), transparent 70%), var(--s-bg); }
[data-theme="dark"] .join { background: radial-gradient(50rem 30rem at 50% 100%, color-mix(in srgb, var(--pa-lavender) 22%, transparent), transparent 70%); }
[data-theme="dark"] .store { background: var(--pa-surface-raised); color: var(--pa-text); border: 1px solid var(--pa-border); }
[data-theme="dark"] .phone { box-shadow: 0 50px 80px -40px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.12); }
[data-theme="dark"] .person::before { opacity: .18; }
[data-theme="dark"] summary::after { background-color: var(--pa-lavender); }

/* Terms and other plain pages */
.prose ul { margin: 0 0 var(--pa-space-4); padding-left: 1.2rem; list-style: disc; }

/* Phones: less always-on motion */
@media (max-width: 640px) {
  .blobs i { animation: none; }
  .proof { font-size: .85rem; gap: .45rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .dock, .dock.on { transition: none; } }
@media (max-width: 420px) {
  .pill { font-size: .8rem; padding: .35rem .8rem; }
}
@media (max-width: 360px) { nav.top .btn { display: none; } }
.steps li.on .d { max-height: 7rem; }
.switch button { white-space: nowrap; }
/* In the safety card the redaction is shown settled: the name struck through, the replacement beside it */
.checkcard .redact s { animation: none; text-decoration: line-through; opacity: .55; }
.checkcard .redact em { animation: none; opacity: 1; margin-left: .35em; }
.midcta.start { justify-content: flex-start; text-align: left; margin-top: 1.8rem; }
.midcta a:not(.btn) { font-weight: 600; }
.drive-sub { padding: .45rem 1rem; border-radius: 18px; background: var(--card); border: 1px solid var(--cardline); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- Hero (v4.1): the promise on the left; the picker and a live example on the right ---------- */
.hero { flex-direction: column; justify-content: center; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; max-width: 84rem; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 1000px) {
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero-copy .cta-row { justify-content: flex-start; }
  .hero .hero-copy .formnote { text-align: left; }
}
.headline { font-size: clamp(2.5rem, 1rem + 4.2vw, 4.8rem); letter-spacing: -0.045em; line-height: 1.02; margin: 1.25rem 0 1.1rem; max-width: 12ch; }
mark.hl { background-color: transparent; color: inherit; --hl: var(--s-hl-lav); }
.rollline { display: block; margin-top: .25em; font-size: .56em; letter-spacing: -0.03em; white-space: nowrap; color: var(--s-accent); }
.roll { display: inline-block; transition: opacity .3s, transform .4s var(--ease), filter .3s; }
.roll.out { opacity: 0; transform: translateY(.3em); filter: blur(4px); }
.roll.pre { opacity: 0; transform: translateY(-.3em); filter: blur(4px); transition: none; }

.hero-demo { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.hero .sentence { margin-top: 0; font-size: clamp(1.2rem, .85rem + 1vw, 1.65rem); max-width: 34ch; line-height: 1.6; }
.flow { display: grid; gap: 1rem; align-items: center; width: 100%; margin-top: 1.4rem; text-align: left; }
@media (min-width: 640px) { .flow { grid-template-columns: 9.5rem auto minmax(0, 1fr); } }
.flow-tag { display: inline-block; margin-bottom: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-text-muted); }
.episode .flow-tag.hear { position: absolute; top: .9rem; left: 1rem; z-index: 2; margin: 0; padding: .2rem .65rem; border-radius: 99px; background: var(--s-glass-strong); color: var(--s-accent); }
.doc-page { display: grid; gap: .35rem; padding: .9rem .85rem 1rem; border-radius: 14px; background: var(--s-paper); border: 1px solid var(--pa-border); box-shadow: var(--lift); transform: rotate(-3deg); }
.doc-type { justify-self: start; padding: .12rem .45rem; border-radius: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .08em; background: var(--pa-peach); color: var(--pa-charcoal); }
.doc-name { font-weight: 700; font-size: .85rem; line-height: 1.2; }
.doc-pages { margin-top: -.2rem; font-size: .72rem; color: var(--pa-text-muted); }
.doc-page i { display: block; height: .32rem; border-radius: 4px; background: color-mix(in srgb, var(--pa-text) 14%, transparent); }
.doc-page i.s { width: 68%; }
.doc-page i.h { background: color-mix(in srgb, var(--pa-peach) 90%, transparent); }
.flow-arrow { display: flex; gap: .3rem; justify-self: center; }
.flow-arrow i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--s-accent); opacity: .25; animation: flowdot 1.4s var(--ease) infinite; }
.flow-arrow i:nth-child(2) { animation-delay: .2s; } .flow-arrow i:nth-child(3) { animation-delay: .4s; }
@keyframes flowdot { 40% { opacity: 1; transform: translateX(3px) scale(1.25); } }
@media (max-width: 639px) { .doc { justify-self: center; width: min(100%, 15rem); } .flow-arrow { transform: rotate(90deg); } }
.doc.swap .doc-page { animation: docin .6s var(--ease); }
@keyframes docin { from { opacity: 0; transform: rotate(-9deg) translateY(-12px); } }
.hero .episode { margin-top: 0; width: 100%; grid-template-columns: 1fr; }
.hero .ep-stage { min-height: 0; padding: 2.6rem 1rem 1.2rem; }
.hero .host { --s: clamp(72px, 7vw, 100px); }
.hero .ep-body { padding: 1.1rem 1.3rem 1.3rem; gap: .55rem; }
.hero .ep-title { font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); }
.hero .line { font-size: .98rem; padding: .45rem .6rem; }
.hero .aside { margin-top: .9rem; }
.hero .proof { margin-top: clamp(2rem, 5vh, 3rem); }

/* ---------- Reviews (placeholders; preview builds only) ---------- */
.reviews { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.quotes { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; border-radius: 22px; background: var(--s-glass-strong); border: 1px solid var(--pa-border); border-top: 4px solid var(--c); box-shadow: var(--lift); }
.q1 { --c: var(--pa-peach); } .q2 { --c: var(--pa-lavender); } .q3 { --c: var(--pa-mist-blue); }
.quote blockquote p { font-size: 1.1rem; line-height: 1.45; }
.stars { color: var(--pa-amber-ink); letter-spacing: .15em; }
.by { margin-top: auto; font-size: .85rem; color: var(--pa-text-muted); }
.by b { color: var(--pa-text); }
.ph { position: absolute; top: .9rem; right: .9rem; padding: .2rem .5rem; border-radius: 99px; border: 1px dashed var(--pa-border); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pa-text-muted); }
[data-theme="dark"] .stars { color: var(--pa-peach); }

/* ======================================================================
   How it works, v5 (30 Oct 2026): the visitor's own example from the hero picker, acted out on the phone.
   Each view plays a short scene when it comes on; reduced motion shows every scene settled.
   ====================================================================== */
.recipe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: 1.3rem; font-weight: 600; font-size: .95rem; }
.rc { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 99px; background: var(--s-glass-strong); border: 1px solid var(--pa-border); }
.rc-doc::before { content: ""; width: .65rem; height: .85rem; border-radius: 3px; background: var(--pa-peach); }
.rc-ep { background: var(--pa-lavender); color: var(--pa-charcoal); border-color: transparent; }
.rc-ep::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pa-violet); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { transform: scale(.6); opacity: .5; } }
.rc-go { position: relative; width: 2.4rem; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--pa-text) 18%, transparent); }
.rc-go i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent); animation: travel 1.8s var(--ease) infinite; }
@keyframes travel { 0% { left: 0; opacity: 0; } 20%, 75% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.recipe.swap .rc { animation: swapin .6s var(--ease); }
.steps { margin-top: 1.6rem; }

/* 1. Add: the document drops in, is scanned, and is cleared */
.drop { display: grid; padding: .9rem .8rem; border-radius: 20px; border: 2px dashed var(--pa-border); }
.view.on .drop { animation: droplit .5s var(--ease) .75s both; }
@keyframes droplit { from { border-color: var(--pa-border); background: transparent; } to { border-color: var(--pa-lavender-deep); background: color-mix(in srgb, var(--pa-lavender) 22%, transparent); } }
.fcard { position: relative; display: grid; gap: .3rem; padding: .8rem; border-radius: 14px; background: var(--s-paper); border: 1px solid var(--pa-border); box-shadow: var(--lift); overflow: hidden; }
.fcard b { font-family: var(--pa-font-display); font-size: .95rem; line-height: 1.2; letter-spacing: -0.01em; }
.fcard small { margin-top: -.15rem; font-size: .7rem; color: var(--pa-text-muted); }
.fcard i { display: block; height: .28rem; border-radius: 4px; background: color-mix(in srgb, var(--pa-text) 14%, transparent); }
.fcard i.s { width: 64%; }
.scan { position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.4rem; opacity: 0; border-bottom: 2px solid var(--pa-mint); background: linear-gradient(transparent, color-mix(in srgb, var(--pa-mint) 50%, transparent)); }
.view.on .fcard { animation: fdrop .8s var(--spring) .1s both; }
@keyframes fdrop { from { opacity: 0; transform: translateY(-120%) rotate(-7deg) scale(.92); } }
.view.on .scan { animation: scan 1.1s ease-in-out 1s both; }
@keyframes scan { 0% { top: -2.4rem; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.view.v-add.on .chk.k1 { animation: pop .5s var(--spring) 2.1s both; }
.view.v-add.on .chk.k2 { animation: pop .5s var(--spring) 2.45s both; }

/* 2. Shape: the length slides to the visitor's minutes, the format is picked, the button is pressed */
.v-shape { --to: .37; }
.len { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-weight: 600; }
.len b { font-family: var(--pa-font-display); font-size: 1.6rem; letter-spacing: -0.02em; white-space: nowrap; }
.len .count { font-variant-numeric: tabular-nums; }
.slider { position: relative; height: .5rem; margin: .15rem .65rem .5rem; border-radius: 99px; background: var(--s-surface); }
.slider .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--to) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--pa-lavender-deep), var(--pa-sky-deep)); }
.slider .thumb { position: absolute; top: 50%; left: calc(var(--to) * 100%); width: 1.3rem; height: 1.3rem; margin: -.65rem 0 0 -.65rem; border-radius: 50%; background: var(--pa-warm-white); box-shadow: 0 0 0 3px var(--pa-violet), var(--pa-shadow-soft); }
.view.on .slider .fill { animation: grow 1.3s var(--ease) .35s both; }
.view.on .slider .thumb { animation: slide 1.3s var(--ease) .35s both; }
@keyframes grow { from { width: 0; } }
@keyframes slide { from { left: 0; } }
.view.on .fmts .sel { animation: choose .7s var(--spring) 1.8s both; }
@keyframes choose { 0% { background: var(--s-surface); color: var(--pa-text); } 50% { transform: scale(.9); } }
.view.on .make { animation: press .7s var(--ease) 2.8s both; }
@keyframes press { 40% { transform: scale(.95); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pa-lavender) 55%, transparent); } }

/* 3. Listen: the question reads along word by word (site.js), then a thought is kept */
.vtags { display: flex; flex-wrap: wrap; gap: .3rem; }
.vtags li { padding: .2rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 600; background: var(--s-surface); }
.view.on .note-btn { animation: press .6s var(--ease) 2.9s; border-radius: 99px; }
.ra .w { transition: color .2s, background .2s; }
.v-add .drop { padding: 1.4rem 1rem; margin-bottom: .3rem; }
.v-shape .mini-hosts { padding: 1rem 0 .8rem; }
.make { position: relative; overflow: hidden; }
.make span { position: relative; }
.make::before { content: ""; position: absolute; inset: 0; width: 0; background: color-mix(in srgb, var(--pa-lavender-deep) 45%, transparent); }
.view.on .make::before { animation: making 1.1s var(--ease) 3.3s both; }
@keyframes making { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .make::before { display: none; } }
/* Phones and small tablets: the steps become a three-up row right above the phone, so both stay in view */
@media (max-width: 899px) {
  .how-grid { gap: 1.4rem; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .steps button { grid-template-columns: 1fr; justify-items: center; row-gap: .35rem; padding: .7rem .3rem .95rem; text-align: center; }
  .steps .n { grid-row: auto; width: 2.1rem; height: 2.1rem; }
  .steps b { font-size: 1rem; }
  .steps .d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .steps .prog { left: .7rem; right: .7rem; }
  .playctl { margin-top: .7rem; }
}
.rc-to { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; }
@media (max-width: 420px) { .recipe { font-size: .88rem; } .rc-go { width: 1.6rem; } }
[data-theme="dark"] .ra .w.on { color: var(--pa-text); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--pa-lavender) 45%, transparent) 60%); }