/* v4a to v4e: the old moving site, led by sound. Loaded after fx.css, the page's own styles and audio.css.
   --lvl (0 to 1) is the live loudness from sound.js; html.is-live is set while a clip plays. */

/* ---------- live bars: sound.js scales each <i> every frame ---------- */
.live{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:clamp(54px,8vw,104px)}
.live i{flex:1;max-width:7px;height:100%;border-radius:4px;background:linear-gradient(180deg,var(--amber),var(--ember));transform:scaleY(.08);transition:transform .07s linear}

/* ---------- hero: promise + email on the left, the sound in the arch ---------- */
.hero-left{justify-self:stretch;max-width:540px}
.hero .label,.label{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hero-h{margin:0;font-weight:700;font-size:clamp(34px,3.7vw,66px);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.hero-sub{margin:16px 0 22px;max-width:30em;color:var(--dim);font-size:clamp(15px,1.15vw,18px);line-height:1.45}
.hero-form{display:grid;gap:8px;max-width:460px}
.hero-row{display:flex;gap:8px}
.hero-form input[type=email]{flex:1;min-width:0;min-height:48px;padding:0 1.1em;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font:500 16px/1 var(--display);letter-spacing:0;color:var(--fg)}
.hero-form input[type=email]:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,179,107,.22)}
.hero-form .pill{min-height:48px;font-size:12px}
.hero-form .err{margin:0;min-height:1.2em}
.hint{margin:0;font-size:14px;color:var(--amber)}
.hero-done{max-width:460px;padding:16px 18px;border:1px solid var(--line);border-radius:18px}
.hero-done p{margin:0}
.hero-done a{color:var(--amber);text-decoration:underline}
.arch-cap{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.readout{font:600 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.readout b{font:italic 400 30px/1 var(--serif);letter-spacing:-.02em;text-transform:none;color:#fff;margin-inline:6px}

/* the page answers the voice */
.arch{box-shadow:0 40px 120px -40px rgba(255,90,47,calc(.45 + var(--lvl,0)*.55))}
.is-live .arch-play{animation:none;box-shadow:0 0 0 calc(var(--lvl,0)*26px) rgba(255,90,47,.3)}
.is-live .orb{animation:none;transform:scale(calc(.86 + var(--lvl,0)*.45));transition:transform .08s linear}
.orb{position:relative;display:grid;place-items:center}
.orb .arch-play{background:rgba(14,12,11,.35);backdrop-filter:blur(6px)}
.wordmark .sun{animation:none;transform:scale(calc(1 + var(--lvl,0)*.16));transition:transform .08s linear}
html:not(.is-live) .wordmark .sun::before,html:not(.is-live) .wordmark .sun::after{animation:none;opacity:0}
.idcard .idart i{height:100%;transform:scaleY(.15);transition:transform .07s linear}

/* ---------- player buttons (samples, phone screen, radio) ---------- */
.play{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"btn bars dur";align-items:center;column-gap:12px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.play-btn{grid-area:btn;position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ember)}
.play-btn::before{content:"";box-sizing:content-box;width:0;height:0;margin-left:3px;border-left:12px solid #fff;border-block:8px solid transparent}
.is-playing .play-btn::before{width:4px;height:14px;margin:0;border-block:0;border-left:4px solid #fff;border-right:4px solid #fff}
.play .bars{grid-area:bars;display:flex;align-items:center;gap:2px;height:26px}
.play .bars i{flex:1;height:calc(var(--h)*100%);border-radius:3px;background:rgba(255,255,255,.28);transition:background .15s}
.play .bars i.on{background:var(--ember)}
.play small{grid-area:dur;font-size:12px;color:var(--dim)}
.scr{pointer-events:none}
.scr.on{pointer-events:auto}
.scr .play .bars i{background:#E0D2C0}
.scr .play .bars i.on,.scr .play-btn{background:#A8522E}

/* ---------- the problem, in her words ---------- */
.problem{padding-block:var(--section-y);text-align:center}
.days{list-style:none;margin:5vh auto;padding:0;max-width:720px;border-top:1px solid var(--line);text-align:left}
.days li{display:flex;align-items:baseline;gap:22px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:clamp(22px,2.6vw,36px);font-weight:600;letter-spacing:-.04em}
.days span{flex:none;width:5em;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.close{margin:0 auto;max-width:24em;font:italic 400 clamp(24px,2.6vw,36px)/1.12 var(--serif);letter-spacing:-.02em}

/* ---------- samples ---------- */
.samples-sec{padding-block:var(--section-y)}
.samples{display:grid;gap:14px;margin-top:5vh}
.sample{display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03)}
.sample h3{margin:0;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.04em}
.sample p{margin:-8px 0 0;color:var(--dim);font-size:14px}
.credit{margin:18px 0 0;font-size:12px;color:var(--dim)}

/* ---------- how it works, without photos ---------- */
.how-q{padding-block:var(--section-y)}
.steps{display:grid;gap:14px;margin-top:5vh}
.hstep{padding:24px;border:1px solid var(--line);border-radius:22px}
.hstep svg{width:44px;height:44px;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hstep .n{display:block;margin:16px 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hstep h3{margin:0;font-size:22px;letter-spacing:-.04em}
.hstep p{margin:8px 0 0;color:var(--dim)}

/* ---------- faq as questions you open ---------- */
.faq{display:block;max-width:860px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.03em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px;color:var(--dim);font-size:15px}

/* ---------- v4e: the quiet hero, one long waveform ---------- */
.hero-q{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:center;gap:22px}
.hero-q .hero-left{justify-self:center;max-width:820px;display:flex;flex-direction:column;align-items:center}
.hero-q .hero-h{font-size:clamp(40px,6.4vw,104px)}
.hero-q .hero-sub{margin-inline:auto}
.hero-q .live{height:clamp(70px,11vw,150px);gap:4px}
.hero-q .live i{max-width:9px}
.hero-q .viz-q{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,980px)}

/* ---------- v4d: a radio that tunes as you scroll ---------- */
.radio{position:relative;width:min(84vw,430px);padding:22px 22px 18px;border-radius:30px;background:linear-gradient(160deg,#2a211c,#120e0c 70%);box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px #3a302a inset,0 0 80px -20px rgba(255,90,47,calc(.15 + var(--lvl,0)*.6));display:grid;gap:16px}
.radio-grille{height:86px;border-radius:16px;background:radial-gradient(circle,#4a3d35 1.4px,transparent 1.6px) 0 0/9px 9px,#1a1411}
.radio-dial{position:relative;height:54px;border-radius:12px;background:#f1e6d4;overflow:hidden}
.radio-dial .freqs{position:absolute;inset:auto 6% 6px;display:flex;justify-content:space-between;font:600 10px/1 var(--display);color:#6f6258}
.radio-dial .ticks{position:absolute;inset:8px 6% auto;height:16px;background:repeating-linear-gradient(90deg,#6f6258 0 1px,transparent 1px 10px)}
.radio-dial .needle{position:absolute;top:4px;bottom:4px;left:calc(6% + var(--p,0)*88%);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ember);box-shadow:0 0 12px rgba(255,90,47,.7)}
.radio-screen{position:relative;height:150px;border-radius:14px;background:#0c0a09;overflow:hidden}
.radio .scr{padding:18px 18px 16px;gap:8px;color:#f6efe6}
.radio .scr small{color:var(--amber)}
.radio .scr .q{font:italic 400 26px/1.05 var(--serif);letter-spacing:-.02em;margin:0}
.radio .scr .play{margin-top:auto}
.radio .scr .play .bars i{background:rgba(255,255,255,.22)}
.radio .scr .play .bars i.on,.radio .scr .play-btn{background:var(--ember)}
.radio .live{height:40px}
.radio .live i{max-width:5px}

/* ---------- v4c: dawn, the light theme from v2 ---------- */
[data-theme=dawn]{--bg:#F4EDE3;--fg:#2B231D;--dim:#6F6258;--faint:#eadfcf;--line:#E0D2C0;--ember:#A8522E;--ember-hover:#8a3f20;--amber:#C26A3A;--plum:#E9B48A;
  --display:"Fraunces",Georgia,serif;--serif:"Fraunces",Georgia,serif;--hand:"Caveat","Segoe Print",cursive;
  --fx-fg:var(--fg);--fx-dim:var(--dim);--fx-line:#d6c3ab;--fx-accent:#A8522E;--fx-display:var(--display);--fx-serif:var(--display);
  --bird:#A8522E;--bird-wing:#E9B48A;--bird-beak:#E9B48A;--bird-eye:#1E1813;color-scheme:light}
[data-theme=dawn] body{background:var(--bg);color:var(--fg)}
[data-theme=dawn] .hero-h,[data-theme=dawn] .huge{font-weight:500;letter-spacing:-.04em}
[data-theme=dawn] .hero::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,45%),rgba(233,180,138,.35),transparent 70%)}
[data-theme=dawn] .arch{background:radial-gradient(120% 70% at 50% 62%,rgba(233,180,138,.35),transparent 62%),#2B231D;box-shadow:12px 14px 0 #1E1813}
[data-theme=dawn] .arch{color:#F4EDE3}
[data-theme=dawn] .pill-light{background:var(--fg);color:var(--bg)}
[data-theme=dawn] .pill-ember{color:#FFF8F0}
[data-theme=dawn] .hero-form input[type=email]{background:#FFFBF5}
[data-theme=dawn] input[type=email]::placeholder{color:#b8a48e}
[data-theme=dawn] .chips input:checked+span{background:var(--fg);color:var(--bg)}
[data-theme=dawn] .swarm-head h2,[data-theme=dawn] .swarm-head .sub{mix-blend-mode:normal;color:var(--fg)}
[data-theme=dawn] .sw-bubble .sw-in{background:#FFFBF5;border:0;border-radius:3px;box-shadow:0 14px 30px -14px rgba(43,35,29,.45)}
[data-theme=dawn] .sw-bubble .sw-in::before{content:"";position:absolute;left:50%;top:-9px;width:54px;height:18px;margin-left:-27px;background:rgba(233,180,138,.75);transform:rotate(-3deg)}
[data-theme=dawn] .sw-bubble q{font:400 21px/1.05 var(--hand);color:var(--fg)}
[data-theme=dawn] .nb-wave i{background:var(--ember)}
[data-theme=dawn] .card{background:linear-gradient(140deg,#3b2a22 0%,#1E1813 45%,#5d2814 100%);color:#FFF8F0}
[data-theme=dawn] footer{background:linear-gradient(180deg,var(--bg) 0%,#f0d9c2 30%,#E9B48A 60%,#A8522E 100%)}
[data-theme=dawn] .wordmark{color:#FFF8F0}
[data-theme=dawn] .wordmark .sun{background:#FFF8F0}
[data-theme=dawn] .legal{color:#3b2a22}
[data-theme=dawn] .lanyard{--fx-strap:#2B231D}
[data-theme=dawn] .apps,[data-theme=dawn] .next-no{color:var(--fg)}
[data-theme=dawn] .bar.scrolled{background:transparent}

/* nb avatar: a small face in each voice note, never the focus */
.sw .nb-ava{flex:none;width:22px;height:22px;aspect-ratio:auto;border-radius:50%;object-fit:cover}

@media (min-width:900px){
  .samples,.steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:899px){
  .arch{width:min(60vw,250px)}
  .viz{top:33%;bottom:27%}
  .hero-left{display:flex;flex-direction:column;align-items:center;max-width:none}
  .hero-sub{text-align:center}
  .hero-form{width:100%}
  .days li{gap:14px}
  .radio{width:min(86vw,360px)}
}
@media (max-width:420px){.hero-row{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.live i,.wordmark .sun,.orb{transition:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.viz .orb{height:74%}

/* ---------- v5: a muted loop of a real moment behind the hero; the sound still comes from the player ---------- */
.has-vid{isolation:isolate;color:#f6efe6}
.hero>.hero-vid,.hero>.hero-shade{position:absolute;inset:0;width:100%;height:100%;transform:none}
.hero-vid{object-fit:cover;z-index:-2}
.hero-shade{z-index:-1;background:radial-gradient(80% 60% at 50% 45%,rgba(14,12,11,.35),rgba(14,12,11,.75)),linear-gradient(180deg,rgba(14,12,11,.2) 60%,var(--bg) 100%)}
.has-vid .hero-h{color:#f6efe6}
.has-vid .hero-sub{color:rgba(246,239,230,.82)}
.has-vid .label{color:var(--amber)}
.has-vid .hero-form input[type=email]{background:rgba(14,12,11,.55);border-color:rgba(246,239,230,.3);color:#f6efe6}
.has-vid .hint{color:#ffb36b}
/* home: warm the blue-purple room into lamplight */
[data-theme=dawn] .hero-vid{filter:sepia(.5) saturate(1.2) hue-rotate(-12deg) brightness(.95)}
[data-theme=dawn] .hero-shade{background:radial-gradient(80% 60% at 50% 45%,rgba(43,35,29,.3),rgba(43,35,29,.72)),linear-gradient(180deg,rgba(43,35,29,.1) 55%,var(--bg) 100%)}
[data-theme=dawn] .has-vid .arch-cap{color:rgba(255,248,240,.75)}
.moment{position:relative;isolation:isolate;overflow:hidden;min-height:78vh;display:grid;align-items:end;padding-block:var(--section-y)}
.moment-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.moment-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(14,12,11,.1) 30%,rgba(14,12,11,.25) 60%,rgba(14,12,11,.85) 100%)}
.moment-cap{color:#f6efe6}
.moment-cap .huge{color:#f6efe6}
[data-theme=dawn] .bar:not(.scrolled) .mark{color:#FFF8F0}

/* ---------- night: the app's own dark palette (Golden Hour, night), Fraunces + DM Sans ---------- */
[data-theme=night]{--bg:#1E1813;--fg:#FFF8F0;--dim:#D9C2A7;--faint:#2B231D;--line:#4A3F36;--ember:#C2643C;--ember-hover:#9E4C29;--amber:#E9B48A;
  --display:"DM Sans","Helvetica Neue",Arial,sans-serif;--serif:"Fraunces",Georgia,serif;
  --fx-fg:var(--fg);--fx-dim:var(--dim);--fx-line:#4A3F36;--fx-accent:#E9B48A;--fx-display:"Fraunces",Georgia,serif;--fx-serif:"Fraunces",Georgia,serif;
  --bird:#E9B48A;--bird-wing:#C2643C;--bird-beak:#E9B48A;color-scheme:dark}
[data-theme=night] body{background:var(--bg);color:var(--fg)}
[data-theme=night] .huge,[data-theme=night] .hero-h,[data-theme=night] .days li,[data-theme=night] .scene-copy h3,[data-theme=night] .hstep h3,[data-theme=night] .wordmark,[data-theme=night] .mark{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.035em}
[data-theme=night] .days span{color:var(--dim)}
[data-theme=night] .pill-ember{color:#FFF8F0}
[data-theme=night] .card{border-color:#4A3F36;background:linear-gradient(140deg,#4A3F36 0%,#1E1813 50%,#5d2814 100%)}
[data-theme=night] footer{background:linear-gradient(180deg,var(--bg) 0%,#2B231D 35%,#5d2814 72%,#9E4C29 100%)}
[data-theme=night] .legal{color:#F6E1D3}
[data-theme=night] .wordmark{font-size:21vw;color:#FFF8F0}
[data-theme=night] .wordmark .sun{background:#FFF8F0}
[data-theme=night] .lanyard{--fx-strap:#FFF8F0}
/* home: warm the blue-purple room into lamplight */
[data-variant=v5-home] .hero-vid{filter:sepia(.5) saturate(1.2) hue-rotate(-12deg) brightness(.92)}
.swarm.swarm-half{height:190vh}
@media (max-width:899px){.swarm.swarm-half{height:160vh}}

/* ---------- captions: the line she is saying, then "your turn" while you say it back ---------- */
.cap{min-height:2.7em;margin:6px auto 0;max-width:30em;text-align:center;font:italic 400 clamp(22px,2.4vw,34px)/1.15 var(--serif);letter-spacing:-.02em;color:var(--fg)}
.cap:not(.is-on)::before{content:attr(data-idle);font:600 11px/1 var(--display);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cap .cap-line{display:inline-block;animation:capIn .55s ease both}
.cap.is-turn .cap-line{opacity:.6;transition:opacity .4s}
.cap.is-turn::after{content:"your turn";display:block;margin-top:12px;font:600 11px/1 var(--display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);animation:capIn .55s ease both}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cap-radio{min-height:2.6em;margin:0;font-size:18px;color:#f6efe6}
.cap-radio.is-turn::after{margin-top:8px}
.is-paused .arch-play{animation:none}
@media (prefers-reduced-motion:reduce){.cap .cap-line,.cap.is-turn::after{animation:none}}
.arch-play[aria-pressed=true]::before{content:"\275A\275A";padding:0;font-size:13px;letter-spacing:1px}

/* ---------- readability over the video ---------- */
/* logo: bigger, with the glowing o, on a faint fade so any frame behind it stays readable */
[data-theme=night] .bar .mark{font-size:26px;letter-spacing:-.03em;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.mark-o{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:#FFF8F0;margin:0 .04em;vertical-align:-.01em;box-shadow:0 0 14px rgba(233,180,138,.85)}
[data-theme=night] .bar::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(20,15,12,.7),rgba(20,15,12,0))}
/* tap hint: quiet, until her voice starts */
.hero .cap:not(.is-on)::before{animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.45}}

/* 1 · frosted caption bar */
[data-cap=frosted] .hero .cap.is-on{padding:14px 24px 16px;border-radius:20px;background:rgba(30,24,19,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,248,240,.12);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
/* 2 · darker centre: a vignette behind the text column, edges of the video stay alive */
[data-cap=vignette] .hero-shade{background:radial-gradient(55% 60% at 50% 52%,rgba(18,13,10,.86),rgba(18,13,10,.55) 65%,rgba(18,13,10,.3) 100%),linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
[data-variant^=v6home2] .hero-vid{filter:sepia(.5) saturate(1.1) hue-rotate(-12deg) brightness(.8)}
/* 3 · bigger, glowing captions; "your turn" breathes */
[data-cap=glow] .hero .cap{font-size:clamp(28px,3.4vw,48px);text-shadow:0 2px 28px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7)}
[data-cap=glow] .hero .cap.is-turn::after{font-size:13px;animation:capIn .55s ease both,turnPulse 1.8s ease-in-out .6s infinite}
@keyframes turnPulse{50%{opacity:.4}}
/* 4 · word by word */
[data-cap=words] .cap .w{opacity:.25;transition:opacity .25s,text-shadow .25s}
[data-cap=words] .cap .w.lit{opacity:1;text-shadow:0 0 18px rgba(233,180,138,.35)}
[data-cap=words] .hero .cap{text-shadow:0 2px 20px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){.hero .cap:not(.is-on)::before,[data-cap=glow] .hero .cap.is-turn::after{animation:none}}
/* paused: the caption area says nothing at all */
.is-paused .cap{visibility:hidden}
/* "press to listen": the one tap browsers require before sound */
.sound-pill{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;border:1px solid rgba(255,248,240,.28);background:rgba(30,24,19,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#FFF8F0;font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);animation:capIn .6s ease both;transition:background .2s,border-color .2s}
.sound-pill:hover{background:rgba(194,100,60,.45);border-color:rgba(233,180,138,.6)}
.sound-pill svg{width:17px;height:17px;fill:#FFF8F0;stroke:#FFF8F0;stroke-width:1.6;stroke-linecap:round}
.sound-pill[hidden]{display:none}
.cap[data-idle=""]:not(.is-on)::before{content:none}
/* keep the email on the first screen of a laptop, even with the "press to listen" pill */
.has-vid.hero-q{gap:16px}
.has-vid .live{height:clamp(52px,6.5vw,104px)}
.has-vid .viz-q{gap:12px}
.has-vid .hero-h{font-size:clamp(40px,5.8vw,96px)}

/* ================= v5/v6 polish: tighter rhythm, frosted header, richer cards, a footer that ends in water ================= */
[data-theme=night]{--section-y:clamp(40px,5.5vh,72px)}
[data-theme=night] .swarm{height:240vh}
[data-theme=night] .swarm.swarm-half{height:160vh}
[data-theme=night] .scene{height:300vh}
@media (max-width:899px){[data-theme=night] .swarm{height:200vh}[data-theme=night] .swarm.swarm-half{height:140vh}[data-theme=night] .scene{height:260vh}}
/* header: once you scroll, the logo sits on frosted glass, never on top of text */
[data-theme=night] .bar.scrolled::before{inset:0;background:rgba(30,24,19,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,248,240,.06)}

/* how it works: each card shows the moment it describes */
[data-theme=night] .hstep{position:relative;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,248,240,.05),rgba(255,248,240,.012));transition:border-color .3s,transform .3s}
[data-theme=night] .hstep:hover{border-color:rgba(233,180,138,.45);transform:translateY(-3px)}
.hs-demo{margin-top:auto;padding-top:22px}
.hs-wave{display:flex;align-items:center;gap:3px;height:58px}
.hs-wave i{flex:1;height:var(--h);border-radius:3px;background:linear-gradient(180deg,var(--amber),var(--ember));opacity:.85;animation:hsWave 1.4s ease-in-out infinite alternate}
.hs-wave i:nth-child(3n){animation-delay:-.4s}.hs-wave i:nth-child(4n+1){animation-delay:-.9s}
@keyframes hsWave{to{transform:scaleY(.35)}}
.hs-cap{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hs-cap em{font:italic 400 26px/1.1 var(--serif);color:var(--fg)}
.hs-cap span{font:600 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);animation:turnPulse 1.8s ease-in-out infinite}
.hs-check{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--fg)}
.hs-check b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ember);position:relative}
.hs-check b::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #FFF8F0;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* founding list: the form in a softly lit glass card, a warm glow behind the heading */
[data-theme=night] .join{position:relative;isolation:isolate;border-top:0}
[data-theme=night] .join::before{content:"";position:absolute;left:-10%;top:5%;width:60%;height:80%;z-index:-1;background:radial-gradient(closest-side,rgba(194,100,60,.22),transparent);pointer-events:none}
[data-theme=night] .join .panel{padding:clamp(24px,3vw,40px);border-radius:28px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,248,240,.06),rgba(255,248,240,.015));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
[data-theme=night] .join .panel input[type=email]{font-size:clamp(20px,1.8vw,28px)}
[data-theme=night] .perks i{color:var(--amber)}

/* footer: the wordmark on the horizon, its reflection in dark water, the o beating out rings */
[data-theme=night] footer{min-height:auto;padding-bottom:0;background:linear-gradient(180deg,var(--bg) 0%,#2B231D 30%,#5d2814 75%,#9E4C29 100%);overflow:hidden}
[data-theme=night] footer .lanyard{bottom:auto;height:62vh}
[data-theme=night] .foot-links{margin-bottom:clamp(120px,22vh,260px)}
[data-theme=night] .wordmark{position:relative;z-index:2;margin:0;line-height:.86;padding:0;font-size:20vw;color:#FFF8F0;text-shadow:0 0 60px rgba(233,180,138,.25)}
[data-theme=night] .wordmark:not(.mirror) .sun{animation:beat 1.6s ease-in-out infinite;transform-origin:center;box-shadow:0 0 calc(30px + var(--lvl,0) * 60px) rgba(255,248,240,.55)}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(.98)}36%{transform:scale(1.04)}}
[data-theme=night] .wordmark:not(.mirror) .sun::before,[data-theme=night] .wordmark:not(.mirror) .sun::after{animation:ring 3.2s ease-out infinite!important;opacity:1;border-color:rgba(255,248,240,.7)}
[data-theme=night] .wordmark:not(.mirror) .sun::after{animation-delay:1.6s!important}
.water{position:relative;height:13vw;margin-top:-.4vw;overflow:hidden;background:linear-gradient(180deg,#7a3a1d 0%,#3a1d12 35%,#1E1813 100%)}
.water::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,248,240,.05) 0 1px,transparent 1px 7px);animation:shimmer 6s linear infinite;opacity:.6}
@keyframes shimmer{to{background-position:0 70px}}
.wordmark.mirror{position:absolute;left:0;right:0;top:0;color:#FFF8F0;opacity:.28;transform:scaleY(-1);transform-origin:top;filter:url(#ripple) blur(1px);text-shadow:none;
  -webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 80%);mask-image:linear-gradient(0deg,#000 20%,transparent 80%)}
.wordmark.mirror .sun{animation:none;box-shadow:none}
.wordmark.mirror .sun::before,.wordmark.mirror .sun::after{display:none}
.ripples{position:absolute;left:var(--ox,30%);top:1.2vw;z-index:3;pointer-events:none}
.ripples i{position:absolute;left:0;top:0;width:18vw;height:2.4vw;margin:-1.2vw 0 0 -9vw;border-radius:50%;border:1px solid rgba(255,248,240,.45);opacity:0;animation:ripple 6.4s ease-out infinite}
.ripples i:nth-child(2){animation-delay:1.6s}.ripples i:nth-child(3){animation-delay:3.2s}.ripples i:nth-child(4){animation-delay:4.8s}
@keyframes ripple{0%{transform:scale(.15);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.is-live .ripples i{border-color:rgba(255,248,240,.75)}
.fx-defs{position:absolute;width:0;height:0}
[data-theme=night] .legal{position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;z-index:4;color:rgba(255,248,240,.55)}
@media (prefers-reduced-motion:reduce){.water::before,.ripples i,.hs-wave i,.hs-cap span,[data-theme=night] .wordmark .sun{animation:none!important}.wordmark.mirror{filter:blur(1px)}}
@media (max-width:899px){
  [data-theme=night] .foot-links{margin-bottom:330px}
  [data-theme=night] footer .lanyard{height:420px}
  .water{height:26vw}
  .ripples i{width:30vw;height:4vw;margin:-2vw 0 0 -15vw}
  [data-theme=night] .legal{position:relative;left:auto;right:auto;padding-inline:0}
}
/* v6: no form in the hero; a quiet link appears once her first track ends, and the header button is always there */
.hero-join{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:12px 22px;border-radius:999px;border:1px solid rgba(255,248,240,.3);color:#FFF8F0;font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .8s,transform .8s,background .2s}
.hero-join.is-shown{opacity:1;transform:none;pointer-events:auto}
.hero-join:hover{background:rgba(194,100,60,.4)}
[data-cap] .bar .pill{opacity:1;transform:none}
/* v6 footer without water: the wordmark sits on the bottom edge, fully visible (descender included) */
[data-cap] footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
[data-cap] .wordmark{padding-bottom:.18em}
[data-cap] .legal{position:relative;left:auto;right:auto;padding:0}

/* ================= v6: the real app on the phone (night mode) ================= */
[data-cap] .sphone{background:#0c0a09;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px #4A3F36 inset}
[data-cap] .sphone-screen{background:#1E1813;color:#FFF8F0;font-family:"DM Sans",Arial,sans-serif}
.scr.app{padding:40px 14px 0;gap:9px;font-size:12px}
.app .a-date{margin:0;font:600 9px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#D9C2A7}
.app .a-h{margin:0;font:500 21px/1.1 "Fraunces",serif;letter-spacing:-.03em}
.app .a-sub{margin:-4px 0 0;color:#D9C2A7;font-size:11px}
.app .a-card{display:grid;gap:6px;padding:11px 12px;border-radius:14px;background:#2B231D}
.app .a-card small{font:600 8.5px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E9B48A}
.app .a-card b{font:500 14px/1.2 "Fraunces",serif;font-weight:500}
.app .a-btn{justify-self:start;margin-top:2px;padding:7px 12px;border-radius:999px;background:#C2643C;font-size:10.5px;font-weight:700}
.app .a-btn.ghost{background:transparent;border:1px solid #4A3F36;color:#E9B48A}
.app .a-row{display:flex;align-items:center;gap:9px;font-size:11.5px}
.app .a-play{flex:none;width:24px;height:24px;border-radius:50%;background:#C2643C;position:relative}
.app .a-play::before{content:"";position:absolute;left:9px;top:7px;border-left:8px solid #FFF8F0;border-block:5px solid transparent}
.app .a-play.big{width:40px;height:40px}.app .a-play.big::before{left:15px;top:12px;border-left-width:12px;border-block-width:8px}
.app .a-tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #E9B48A}
.app .a-bubble{max-width:82%;padding:9px 11px;border-radius:14px 14px 14px 4px;background:#2B231D;font:500 13px/1.25 "Fraunces",serif}
.app .a-bubble.u{align-self:flex-end;display:flex;align-items:center;gap:8px;border-radius:14px 14px 4px 14px;background:#C2643C}
.app .a-bubble.u small{font-size:9.5px}
.app .a-wave{display:flex;align-items:center;gap:2px;width:96px;height:18px}
.app .a-wave i{flex:1;height:var(--h);border-radius:2px;background:#FFF8F0;opacity:.85}
.app .a-tx{margin:-3px 0 0;align-self:flex-end;max-width:84%;font:italic 400 12px/1.3 "Fraunces",serif;color:#D9C2A7;text-align:right}
.app .a-thinking{margin:0;font-size:10.5px;color:#D9C2A7;animation:pulse 1.8s ease-in-out infinite}
.app .a-pack span{font-size:10.5px;color:#D9C2A7}
.app .a-player{display:grid;gap:10px;padding:16px 14px;border-radius:16px;background:linear-gradient(160deg,#4A3F36,#2B231D);text-align:center}
.app .a-player small{font:600 8.5px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E9B48A}
.app .a-big{margin:0;font:italic 400 18px/1.15 "Fraunces",serif}
.app .a-prog{height:3px;border-radius:2px;background:#4A3F36;overflow:hidden}.app .a-prog i{display:block;width:38%;height:100%;background:#E9B48A}
.app .a-ctrl{display:flex;justify-content:center;align-items:center;gap:22px;font-size:10px;color:#D9C2A7}
.app .a-keep{font-size:10.5px;color:#E9B48A}
.app .a-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.app .a-list li{display:grid;gap:4px;padding:11px 12px;border-radius:14px;background:#2B231D}
.app .a-list small{font:600 8.5px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#D9C2A7}
.app .a-list b{font:500 14px/1.2 "Fraunces",serif;font-weight:500}
.app .a-tabs{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:10px 4px calc(12px + 4px);border-top:1px solid #2B231D;font-size:9.5px;color:#8E7C69}
.app .a-tabs .on{color:#FFF8F0}
.app .a-mic{width:34px;height:34px;border-radius:50%;background:#2B231D;border:1px solid #4A3F36}
.app .a-mic.on{background:#C2643C;border-color:#C2643C;box-shadow:0 0 0 6px rgba(194,100,60,.18)}
@media (max-width:899px){.scr.app{padding:30px 10px 0;gap:7px}.app .a-h{font-size:16px}.app .a-card b,.app .a-list b{font-size:12px}.app .a-big{font-size:14px}.app .a-card:nth-of-type(3),.app .a-list li:nth-child(3){display:none}}

/* ================= v6: notifications from the apps you quit ================= */
.nags{padding-block:var(--section-y);text-align:center}
.nag-stack{display:grid;gap:10px;max-width:440px;margin:4vh auto 5vh}
.nag{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:20px;text-align:left;
  background:rgba(255,248,240,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,248,240,.1);
  opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.nag i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#4A3F36;color:#FFF8F0;font:600 15px/1 "DM Sans",sans-serif;font-style:normal}
.nag b{display:block;font:600 13px/1.2 "DM Sans",sans-serif}
.nag span{display:block;margin-top:2px;font-size:13px;color:var(--dim);position:relative}
.nag time{align-self:start;font-size:11px;color:var(--dim)}
.nags.in .nag{opacity:1;transform:none}
.nags.in .nag:nth-child(2){transition-delay:.45s}.nags.in .nag:nth-child(3){transition-delay:.9s}
/* then they fade and get crossed out */
.nag span::after{content:"";position:absolute;left:0;top:52%;height:1.5px;width:0;background:var(--accent);transition:width .7s ease}
.nags.in .nag span::after{width:100%;transition-delay:2.4s}
.nags.in .nag:nth-child(2) span::after{transition-delay:2.7s}.nags.in .nag:nth-child(3) span::after{transition-delay:3s}
.nags.in .nag{animation:nagDim .9s ease 3.3s forwards}
@keyframes nagDim{to{opacity:.38}}
.nags h2{opacity:0;transform:translateY(10px);transition:opacity .8s 3.4s,transform .8s 3.4s}
.nags.in h2{opacity:1;transform:none}

/* ================= v6: founding list, full screen, with the form in a dialog ================= */
.join.join-full{min-height:100svh;display:grid;grid-template-columns:1fr;place-items:center;text-align:center}
.join-in{display:flex;flex-direction:column;align-items:center;max-width:980px}
.perks-row{list-style:none;margin:5vh 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);text-align:center}
.perks-row b{display:block;font:500 clamp(18px,1.6vw,24px)/1.2 var(--serif);letter-spacing:-.02em}
.perks-row span{display:block;margin-top:6px;color:var(--dim);font-size:14px}
.join .claim{margin-top:5vh;min-height:58px;padding:0 2.4em;font-size:14px}
.join-in .left-line{margin-top:18px}
.claim-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:28px;background:transparent;color:var(--fg);overflow:visible}
.claim-dialog::backdrop{background:rgba(12,9,7,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.claim-dialog[open]{animation:dlgIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes dlgIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.claim-panel{position:relative;max-height:calc(100svh - 32px);overflow:auto;padding:clamp(24px,4vw,40px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,#2B231D,#1E1813);box-shadow:0 50px 120px -30px rgba(0,0,0,.8)}
.claim-panel h3{margin:0 0 20px;font:500 clamp(28px,3vw,40px)/1 var(--serif);letter-spacing:-.035em}
.claim-panel form{display:grid;gap:20px}
.claim-panel input[type=email]{width:100%;font-size:clamp(20px,2vw,26px)}
.claim-panel .pill{justify-self:start;min-height:52px;padding:0 2em}
.dlg-x{position:absolute;right:16px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:22px;line-height:1;cursor:pointer}
.dlg-x:hover{border-color:var(--accent)}
@media (max-width:699px){.perks-row{grid-template-columns:1fr;gap:18px}}
@media (prefers-reduced-motion:reduce){.nag,.nags h2{opacity:1;transform:none;transition:none;animation:none}.nag span::after{transition:none}}
.perks-row span span{display:inline;margin:0;font-size:inherit}
/* "somedayy" is one letter longer: keep the footer wordmark inside the screen */
[data-theme=night] .wordmark.yy{font-size:17.5vw}
/* v6 audit fixes: full-screen hero on phones, the phone-section title clear of the header, no stray list styling inside the app */
@media (max-width:899px){
  [data-cap] .hero.has-vid{min-height:100svh;justify-content:center}
  [data-cap] .scene-title{top:84px}
  [data-cap] .scene-word{padding-top:120px}
}
.app .a-list li{display:grid;gap:4px;padding:11px 12px;border:0;border-radius:14px;background:#2B231D;color:#FFF8F0;font-size:inherit;text-decoration:none}
.app .a-list li::before{content:none}
/* v6people3: a fuller swarm (31 voices) and "how it works" as just the three cards */
[data-variant^=v6people3] .swarm{height:300vh}
@media (max-width:899px){[data-variant^=v6people3] .swarm{height:240vh}}
[data-variant^=v6people3] .how-q .steps{margin-top:0}
[data-variant^=v6people3] .how-q{padding-block:clamp(48px,8vh,96px)}