/* ============================================================
   AZNA microsite v2 — Sound in. Heat out.
   One instrument strip. One traveling playhead. One easing.
   Tokens: Ember II Predawn (ios/Cadence/Theme.swift).
   ============================================================ */

@font-face { font-family:"Unbounded"; src:url("../assets/fonts/unbounded-300.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Unbounded"; src:url("../assets/fonts/unbounded-400.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root {
  --void:#070504; --bg:#0F0C0A; --surface:#181210; --surface2:#221A14;
  --ink:#F3EDE6; --muted:#9C9088; --faint:#8C8075;
  --line:rgba(243,237,230,.09); --line2:rgba(243,237,230,.16);
  --coral:#FF6A3D; --deep:#C24A1C; --peach:#F0C9A8;
  --zwarm:#F0C9A8; --zbuild:#D97845; --zpeak:#FF6A3D; --zcool:#6E5F55;
  --disp:"Unbounded", system-ui, sans-serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --e:cubic-bezier(.2,1,.3,1);
  color-scheme:dark;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--void); color:var(--ink); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.eyebrow.hot { color:var(--coral); }
.disp { font-family:var(--disp); font-weight:300; letter-spacing:.005em; }
.disp em { font-style:normal; color:var(--coral); }

/* ---------- A0 gate ---------- */
#gate { position:fixed; inset:0; z-index:300; background:var(--void); display:grid; place-items:center; transition:opacity .7s var(--e), visibility .7s; }
#gate.off { opacity:0; visibility:hidden; }
#gate .g { display:flex; flex-direction:column; align-items:center; gap:26px; }
.gbpm { font-size:clamp(3rem,9vw,5.5rem); font-weight:400; letter-spacing:-.04em; color:var(--peach); }
.gticks { display:flex; gap:14px; }
.gticks i { width:2px; height:22px; background:var(--line2); }
.gticks i.on { background:var(--coral); box-shadow:0 0 12px var(--coral); }
.gmark { width:120px; opacity:0; transition:opacity .5s var(--e);
  filter:brightness(0) invert(93%) sepia(6%) saturate(310%) hue-rotate(346deg) brightness(103%); }
#gate.marked .gmark { opacity:1; }

/* ---------- the one instrument strip ---------- */
.strip {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px clamp(16px,3.2vw,40px) 15px;
  background:linear-gradient(rgba(7,5,4,.88), rgba(7,5,4,.55));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.smark { height:15px; width:auto;
  filter:brightness(0) invert(93%) sepia(6%) saturate(310%) hue-rotate(346deg) brightness(103%); }
.gauge { font-size:10.5px; letter-spacing:.1em; color:var(--muted); display:flex; gap:10px; align-items:baseline; }
.gauge b { color:var(--faint); font-weight:400; }
/* real BPM badge recipe (DesignKit.swift:472): capsule, hue at 12% fill, bold mono digits */
.gauge #gBpm { color:var(--coral); background:rgba(255,106,61,.12); font-weight:700; padding:3px 9px; border-radius:999px; }
.gauge #gTemp { color:var(--peach); }
@media (max-width:640px){ .gauge{ display:none; } }
/* real selected-chip gradient (DesignKit.swift:651) */
.scta { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,#B04518,var(--deep)); text-decoration:none; padding:9px 16px; border-radius:999px; transition:filter .3s var(--e); }
.scta:hover { filter:brightness(1.25); }
.ssurvey { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-decoration:none; padding:9px 4px; transition:color .3s var(--e); }
.ssurvey:hover { color:var(--ink); }
.sright { display:flex; align-items:center; gap:10px; }
.snd { font-family:var(--mono); font-size:12px; line-height:1; width:30px; height:30px;
  border-radius:999px; border:1px solid var(--line); background:none; color:var(--faint);
  cursor:pointer; padding:0; transition:color .3s var(--e), border-color .3s var(--e); }
.snd:hover { color:var(--ink); }
.snd.on { color:var(--coral); border-color:var(--coral); }
.rail { display:none; }   /* progress line retired, added nothing */
.rail i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--zwarm),var(--zbuild) 38%,var(--zpeak) 72%,var(--zcool)); box-shadow:0 0 12px rgba(255,106,61,.5); }
.rail.flash i { box-shadow:0 0 22px rgba(255,106,61,.95); }

.hint { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:90;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--peach);
  display:inline-flex; gap:8px; transition:opacity .6s var(--e); }
.hint b { animation:bob 1.8s ease-in-out infinite; font-weight:400; }
@keyframes bob { 0%,100%{transform:translateY(-1px)} 50%{transform:translateY(2px)} }

/* ---------- the playhead ---------- */
.ph { position:fixed; z-index:80; pointer-events:none; transform:translate(-50%,-50%); }
.ph .line { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:64px; background:var(--ink); border-radius:2px; box-shadow:0 0 10px rgba(243,237,230,.35); }
.ph .dot { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 14px var(--coral); }

/* ---------- track/stage ---------- */
.track { height:1250vh; position:relative; }
.stage { position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
#room { position:absolute; inset:0; width:100%; height:100%; }
#threads, #threadsF { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#threadsF { z-index:7; }   /* front canvas rides above the blackout: threads in A2, embers in A3 */

.act { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; }

/* ---------- A1 rail scene ---------- */
.a1 { justify-content:flex-start; padding-top:16vh; }
.a1copy { position:absolute; left:0; right:0; bottom:5vh; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.a1copy .disp { font-size:clamp(24px,3.2vw,42px); line-height:1.25; }
.a1copy .small { font-size:12.5px; color:var(--muted); line-height:1.65; }
.a1copy .eyebrow { margin-bottom:14px; }
.a2copy { position:absolute; left:clamp(20px,6vw,90px); top:15vh; display:flex; flex-direction:column; gap:13px; max-width:420px; }
.a2copy .disp { font-size:clamp(22px,3vw,40px); line-height:1.22; }
@media (max-width:900px){ .a2copy { display:none; } }

.railscene { position:absolute; left:0; right:0; top:13vh; height:56vh; padding:0 clamp(16px,4vw,56px); }
.bars { position:absolute; left:clamp(16px,4vw,56px); right:clamp(16px,4vw,56px); top:8%; bottom:8%; display:flex; align-items:center; gap:2px; }
.bars i { flex:1; height:100%; border-radius:2px; background:var(--surface2); transform-origin:center; will-change:transform; }
/* the wordmark: outline only, floating over the wave. The #barsB twin stays
   in the DOM because site.js drives it, but its layer never renders. */
.heromark { display:none; }
.heroline { position:absolute; left:50%; top:44%; transform:translate(-50%,-44%);
  width:min(66vw,860px); pointer-events:none; opacity:.92; }
.tickrow { position:absolute; left:clamp(16px,4vw,56px); right:clamp(16px,4vw,56px); height:14%; }
.tickrow.top { top:0; } .tickrow.bot { bottom:0; }
.tickrow s { position:absolute; top:0; bottom:0; width:2px; background:var(--faint); text-decoration:none; will-change:transform; }
.tickrow.bot s { background:var(--deep); }
.tickrow s::after { content:attr(data-l); position:absolute; top:-2px; left:7px; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; color:var(--faint); white-space:nowrap; display:none; }
.tickrow s.lbl::after { display:block; }
.tickrow.bot s::after { top:auto; bottom:-2px; color:var(--deep); }
.tickrow s.lock { background:var(--coral); box-shadow:0 0 10px rgba(255,106,61,.7); }
.tickrow s.lock::after { color:var(--peach); }

/* ---------- A2 phone ---------- */
.phonewrap { position:relative; display:grid; place-items:center; perspective:1300px; }
/* device frame: titanium ring, glass inset, dynamic island, side keys */
.phone {
  width:min(276px,68vw); aspect-ratio:9/19.4; position:relative; border-radius:52px;
  padding:3px; transform-origin:50% 92%; transform-style:preserve-3d;
  background:conic-gradient(from 210deg,#4a4038,#141010 22%,#5c5148 39%,#181310 58%,#655a4f 76%,#141010 92%,#4a4038);
  box-shadow:0 46px 100px rgba(0,0,0,.8), 0 0 130px -24px rgba(255,106,61,.32);
}
.phone::before { /* black glass bezel between metal and screen */
  content:""; position:absolute; inset:3px; border-radius:49px; background:#060404;
  box-shadow:inset 0 0 0 7px #0B0807, inset 0 0 22px rgba(0,0,0,.9);
  transform:translateZ(.6px); backface-visibility:hidden;
}
/* device body: stacked slabs give the spin real thickness */
.phone .slab { position:absolute; inset:0; border-radius:52px; background:#1D1613;
  box-shadow:inset 0 0 0 2.5px #35291F; }
.phone .back { position:absolute; inset:0; border-radius:52px;
  background:conic-gradient(from 30deg,#332a23,#100C0A 30%,#413830 55%,#14100D 80%,#332a23),
             radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.05), transparent 60%);
  transform:translateZ(-28px) rotateY(180deg); backface-visibility:hidden;
  display:grid; place-items:center; }
.phone .back img { width:38%; opacity:.22;
  filter:brightness(0) invert(93%) sepia(6%) saturate(310%) hue-rotate(346deg) brightness(103%); }
.phone i.key, .mini i.key { position:absolute; right:-2.5px; width:2.5px; border-radius:2px;
  background:linear-gradient(90deg,#3a322b,#171310); }
.phone i.key, .mini i.key.pwr { top:27%; height:9%; }
.phone i.key, .mini i.key.vup { left:-2.5px; right:auto; top:22%; height:6%; }
.phone i.key, .mini i.key.vdn { left:-2.5px; right:auto; top:29.5%; height:6%; }
.phone i.key, .mini i.key.mute { left:-2.5px; right:auto; top:16.5%; height:3.4%; }
.notch { position:absolute; top:13px; left:50%; transform:translateX(-50%); width:70px; height:19px;
  background:#000; border-radius:99px; z-index:3;
  box-shadow:inset 0 0 4px rgba(255,255,255,.06), 0 0 0 1.5px rgba(0,0,0,.85); }
.screen { position:absolute; inset:10px; border-radius:42px; overflow:hidden; background:var(--bg);
  padding:14px 16px 14px; display:flex; flex-direction:column; gap:8px;
  transform:translateZ(1px); backface-visibility:hidden; }
.pstatus { display:flex; justify-content:space-between; font-size:8px; color:var(--faint); padding:10px 4px 0; }
.chat { display:flex; flex-direction:column; gap:6px; min-height:74px; }
/* real app recipe (BuilderApp.tsx): user = surface2 bubble rounded-2xl/br-sm, azna = no bubble */
.bubble { max-width:88%; font-size:10.5px; line-height:1.5; }
.bubble.user { align-self:flex-end; background:var(--surface2); border-radius:16px; border-bottom-right-radius:3px; padding:8px 11px; }
.bubble.azna { align-self:flex-start; max-width:95%; color:var(--ink); opacity:0; }
.caret { display:inline-block; width:1px; height:10px; background:var(--peach); margin-left:2px; animation:blink 1s steps(1) infinite; vertical-align:-1px; }
@keyframes blink { 50%{opacity:0} }
.ptitle { font-size:15px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:7px; }
.pdot { width:8px; height:8px; border-radius:50%; background:var(--coral); box-shadow:0 0 10px var(--coral); opacity:0; }
/* teach mode: faithful to the real iOS screen (docs/ios-teach-mode.png) */
.teach { font-family:var(--mono); }
.thead { display:flex; justify-content:space-between; font-size:8.5px; color:var(--muted); padding:6px 2px 0; }
.thead #tSec { text-transform:uppercase; letter-spacing:.08em; }
.tclock { display:flex; align-items:baseline; justify-content:center; gap:7px; padding-top:2px; }
.tclock b { font-size:34px; font-weight:400; color:var(--ink); letter-spacing:.02em; }
.tclock .ttot { font-size:13px; color:var(--muted); }
.tbar { position:relative; height:2px; background:var(--line2); border-radius:99px; margin:4px 2px 0; }
.tbar i { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--coral); border-radius:99px; }
.tbar .pdot { position:absolute; top:-3px; margin-left:-4px; }
.tmove { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; font-family:Georgia,'Iowan Old Style',serif; padding:0 6px; }
.tmove h3 { font-size:23px; font-weight:400; color:var(--ink); line-height:1.15; }
.tmove p { font-family:-apple-system,system-ui,sans-serif; font-size:10px; line-height:1.5; color:var(--ink); opacity:.85; }
.tmove .ttheme { font-family:Georgia,'Iowan Old Style',serif; font-style:italic; color:var(--muted); opacity:1; }
.tfoot { display:flex; flex-direction:column; gap:7px; text-align:center; font-size:8.5px; color:var(--muted); padding-bottom:2px; }
.tfoot .tsong { color:var(--faint); }
.tctl { display:flex; align-items:center; justify-content:center; gap:7px; padding-top:3px; }
.tctl span { border:1px solid var(--line2); border-radius:10px; padding:7px 9px; font-size:9px; color:var(--ink); }
.tctl b { border:1.5px solid var(--deep); color:var(--coral); border-radius:12px; padding:7px 12px; font-size:8.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.tnav { display:flex; justify-content:space-between; font-size:8px; color:var(--faint); padding:2px 2px 0; }
/* Build screen: replicated from the real app running on the sim
   (scratchpad sim-conv*.png captures, 2026-07-28). The phone speaks the
   APP's language: warm near-black, cream pills, plain assistant text. */
.build { --p-bg:#191310; --p-ink:#f4ead9; --p-txt:#c9bcac; --p-fnt:rgba(244,234,217,.45);
  --p-cream:#f8efe2; --p-dark:#26190f; --p-coral:#e4592b; --p-send:#c94f1f;
  --p-card:#221a15; --p-line:rgba(244,234,217,.09); background:var(--p-bg);
  font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif; }
.bhead { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 8px; }
.bht { font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--p-ink); }
.bhs { color:var(--p-fnt); display:grid; place-items:center; }
.bhs svg { width:12px; height:12px; }
.bchat { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.bmsg { opacity:0; will-change:transform,opacity; }
p.az { font-size:9.5px; line-height:1.5; color:var(--p-txt); max-width:94%; margin:0; }
.us { align-self:flex-end; max-width:82%; background:var(--p-cream); color:var(--p-dark);
  font-weight:600; font-size:9.5px; line-height:1.4; border-radius:999px; padding:8px 13px; }
.bcard { background:var(--p-card); border:1px solid var(--p-line); border-radius:13px;
  padding:10px 11px; display:flex; flex-direction:column; gap:7px; }
.bcs b { display:block; font-size:9.5px; font-weight:700; color:var(--p-ink); letter-spacing:-.01em; }
.bcs em { font-style:normal; font-size:7.8px; line-height:1.45; color:var(--p-fnt); display:block; margin-top:1px; }
.bthink { display:flex; flex-direction:column; gap:3px; }
.bthink i { width:26px; height:20px; border-radius:7px; background:var(--p-card); color:var(--p-fnt);
  display:grid; place-items:center; font-style:normal; font-size:9px; letter-spacing:.1em; }
.bthink em { font-style:normal; font-size:7.5px; color:var(--p-fnt); }
.bview { background:var(--p-cream); color:var(--p-dark); border-radius:999px; text-align:center;
  font-weight:700; font-size:9.5px; padding:9px 0; }
.binput { flex:none; display:flex; align-items:center; justify-content:space-between; gap:6px;
  background:var(--p-cream); border-radius:999px; padding:5px 5px 5px 12px; margin-top:7px; }
.binput span { font-size:9.5px; color:#6f6357; }
.binput i { width:22px; height:22px; border-radius:50%; background:var(--p-send); color:#fff;
  display:grid; place-items:center; font-style:normal; flex:none; }
.bbuilt { display:flex; justify-content:space-between; align-items:center; padding:7px 3px 5px; }
.bbuilt span { font-size:9.5px; font-weight:700; color:var(--p-ink); }
.bbuilt b { font-size:9.5px; font-weight:600; color:var(--p-coral); }
.btabs { display:flex; justify-content:space-around; border-top:1px solid var(--p-line); padding:7px 0 1px; }
.btabs span { display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:6.5px; font-weight:500; color:var(--p-fnt); }
.btabs svg { width:14px; height:14px; }
.btabs .on { color:var(--p-coral); }
.bflow { display:flex; flex-direction:column; gap:8px; will-change:transform; }
.prail { display:flex; height:6px; border-radius:99px; overflow:hidden; gap:1px; }
.prail i { height:100%; border-radius:1px; }
.plist { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:6px; mask-image:linear-gradient(#000 82%,transparent); }
.prow { display:flex; justify-content:space-between; gap:8px; flex:none; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:9.5px; line-height:1.4; opacity:0; transform:translateY(10px); }
.prow em { font-style:normal; color:var(--faint); font-size:8.5px; display:block; }
.prow .tm { color:var(--peach); font-family:var(--mono); font-size:8.5px; white-space:nowrap; }
.prow.on { background:linear-gradient(90deg,#35150A,var(--surface)); border-color:rgba(255,106,61,.4); }
.pbtn { flex:none; text-align:center; background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; border-radius:999px; padding:11px; }

.cuecard { position:absolute; left:50%; top:50%; width:230px; display:flex; flex-direction:column; gap:7px; opacity:0; will-change:transform,opacity; }
.a2copy .small { font-size:13px; color:var(--muted); line-height:1.6; }

/* ---------- A3 · one phone, whole story ---------- */
/* the screen is a REAL capture from the app on the simulator; the frame only
   supplies metal. No CSS notch: the capture brings its own island. */
.a3 { z-index:6; perspective:1400px; }
.oneph { position:absolute; left:50%; top:50%; width:300px; margin-left:-150px;
  will-change:transform,opacity; opacity:0; }
.mini { width:300px; aspect-ratio:762/1657; position:relative; border-radius:52px; padding:3px; flex:none;
  background:conic-gradient(from 210deg,#4a4038,#141010 22%,#5c5148 39%,#181310 58%,#655a4f 76%,#141010 92%,#4a4038);
  box-shadow:0 40px 100px rgba(0,0,0,.8), 0 0 100px -28px rgba(255,106,61,.4); }
.mini::before { content:""; position:absolute; inset:3px; border-radius:49px; background:#060404;
  box-shadow:inset 0 0 0 7px #0B0807, inset 0 0 22px rgba(0,0,0,.9); }
.mini.big { transform:translateZ(0); }
.mscreen { position:absolute; inset:10px; border-radius:42px; overflow:hidden; background:#0B0705; }
.mshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:opacity; }
/* live overlays: the captures keep time. Each one sits over its screenshot
   on a patch matched to the local background, and fades with its station. */
.tlive { position:absolute; inset:0; opacity:0; pointer-events:none; }
.tpatch { position:absolute; left:19%; top:16.4%; width:62%; aspect-ratio:1; border-radius:50%;
  font-style:normal;
  background:radial-gradient(62% 62% at 50% 32%, rgb(252,186,157), rgb(249,202,172) 52%, rgb(244,208,180) 80%, rgb(243,208,180) 93%, rgba(242,208,181,0) 100%); }
.tlive svg { position:absolute; left:20.5%; top:17.1%; width:59%; }
.tlive > b { position:absolute; left:0; right:0; top:27.4%; text-align:center;
  font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  font-weight:300; font-size:30px; letter-spacing:.02em; color:#8a7566; }
.tlive em { position:absolute; left:0; right:0; top:43%; text-align:center;
  font-style:normal; font-size:8.5px; color:#8d7a67; }
.tlive em b { display:inline-block; font-size:8.5px; font-weight:400; padding:0 8px; background:rgb(242,207,180);
  box-shadow:0 0 6px 4px rgb(242,207,180); border-radius:6px; }
.llive { position:absolute; left:8%; right:8.5%; top:30.2%; height:5.5%; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, rgb(250,233,216), rgb(246,215,185) 50%, rgb(241,195,155)); }
.llive svg { width:100%; height:100%; display:block; }
.feedwrap { overflow:hidden; opacity:0; background:#100B09; }
.feedpan { position:absolute; left:0; top:0; width:100%; height:auto; will-change:transform;
  clip-path:inset(0 0 6.6% 0); }
.feedbar { position:absolute; left:0; bottom:0; width:100%; height:auto; clip-path:inset(93.4% 0 0 0); }
/* the watch keeps real time over its baked face */
.wlive { position:absolute; left:7%; right:7%; top:21%; height:15%; background:#0D0B0A;
  display:flex; align-items:baseline; justify-content:center; gap:7px; z-index:3; }
.wlive b { font-size:20px; font-weight:700; color:#EFE7D8; }
.wlive em { font-style:normal; font-size:10px; color:#8A8178; }
/* the watch keeps the beat beside station one: real case, crown, band */
.wcase { position:absolute; left:-200px; top:50%; width:150px; z-index:2; padding:5px;
  border-radius:28px; opacity:0; will-change:transform,opacity;
  background:conic-gradient(from 210deg,#4a4038,#141010 22%,#5c5148 39%,#181310 58%,#655a4f 76%,#141010 92%,#4a4038);
  box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 50px -16px rgba(255,106,61,.3); }
.wcase::before { content:""; position:absolute; inset:5px; border-radius:24px; background:#060404;
  box-shadow:inset 0 0 0 3px #0B0807; }
.mwatch { position:relative; display:block; width:100%; border-radius:22px; }
.wcrown { position:absolute; right:-3.5px; top:24%; width:4px; height:18px; border-radius:2.5px;
  background:linear-gradient(90deg,#5c5148,#141010); font-style:normal; }
.wbtn { position:absolute; right:-2.5px; top:50%; width:2.5px; height:26px; border-radius:2px;
  background:#2c241d; font-style:normal; }
.wband { position:absolute; left:50%; width:54%; height:15px; transform:translateX(-50%);
  background:linear-gradient(#221a14,#0d0906); font-style:normal; }
.wband.t { top:-12px; border-radius:9px 9px 3px 3px; }
.wband.b { bottom:-12px; border-radius:3px 3px 9px 9px; }
/* one claim per station, opposite the phone */
.claim { position:absolute; top:50%; width:min(36vw,520px); transform:translateY(-50%);
  opacity:0; will-change:transform,opacity; }
.claim h2 { font-family:var(--disp); font-weight:300; font-size:clamp(26px,3.4vw,48px);
  line-height:1.2; letter-spacing:.005em; text-wrap:balance; }
.claim h2 em { font-style:normal; color:var(--coral); }
.claim p { margin-top:14px; font-size:14.5px; line-height:1.65; color:var(--muted); max-width:380px; }
.claim .k { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); display:block; margin-bottom:12px; }
/* claims hug the phone: anchored off center, not the viewport edge */
.cR { left:calc(50% + 150px); text-align:left; }
.cL { right:calc(50% + 150px); text-align:right; }
.cL p { margin-left:auto; }


/* ---------- blackout + the lit View class pill ---------- */
#dim { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(120% 100% at 50% 45%, #070302 0%, #030101 100%); }
/* the one thing the dark can't touch: a live copy of the phone's View class
   button. It fades in over the real one as the room dims, then glides to the
   top of the stage while the devices rise beneath it. */
#vtravel { position:fixed; z-index:106; pointer-events:none; opacity:0;
  display:grid; place-items:center; background:#f8efe2; color:#26190f;
  border-radius:999px; font-weight:700; will-change:transform,opacity;
  font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  box-shadow:0 10px 40px rgba(0,0,0,.55); }
/* three comets chase each other around the pill's capsule outline */
#edge { position:fixed; inset:0; width:100vw; height:100vh;
  z-index:107; pointer-events:none; opacity:0; overflow:visible; }
/* the pill's border IS the app's timeline: three thin strands, interwoven */
#edge path { fill:none; stroke-width:1.2; stroke-linecap:round; }
#edge .e0 { stroke:#E9C9A4; }
#edge .e1 { stroke:#D9622B; filter:drop-shadow(0 0 3px rgba(217,98,43,.65)); }
#edge .e2 { stroke:#8F3D14; }

/* ---------- finale: the beta ---------- */
.finale { position:absolute; top:8vh; left:0; right:0; text-align:center; opacity:0;
  display:flex; flex-direction:column; gap:18px; align-items:center; will-change:opacity; }
.finale .disp { font-size:clamp(36px,5.2vw,72px); line-height:1.12; }
.legal { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.flegal { position:absolute; bottom:3.5vh; left:clamp(24px,3vw,44px); right:auto; text-align:left; opacity:0; }
/* the invite: the app's real opening screen underneath, the site's own
   copy and CTA riding the aura's center */
.oinv { position:absolute; inset:0; opacity:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding-top:191px; gap:22px;
  text-align:center; font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  will-change:opacity; }
.oinv p { font-size:16px; line-height:1.55; color:#e6d9c8; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.minvb { pointer-events:auto; background:#f8efe2; color:#26190f; text-decoration:none;
  border-radius:999px; font-weight:700; font-size:15.5px; padding:15px 46px;
  box-shadow:0 0 0 1px rgba(255,176,138,.25), 0 6px 34px rgba(255,106,61,.22);
  transition:transform .3s var(--e), box-shadow .3s var(--e); }
.minvb:hover { transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,176,138,.4), 0 12px 44px rgba(255,106,61,.38); }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- small screens: the phone is the stage ----------
   Lives at the END of the file so these rules win the cascade. */
@media (max-width:720px){
  .strip { padding:11px 14px 13px; gap:8px; }
  .scta { font-size:9px; padding:8px 11px; letter-spacing:.08em; }
  .ssurvey { font-size:9px; letter-spacing:.08em; padding:8px 2px; }
  .snd { width:26px; height:26px; font-size:10px; }
  .smark { height:13px; }
  .claim { left:8vw; right:8vw; top:13vh; width:auto; text-align:center; }
  .claim h2 { font-size:clamp(22px,6.4vw,30px); }
  .claim p { display:none; }
  .wcase { display:none; }
  .finale { top:9vh; gap:12px; }
  .finale .disp { font-size:clamp(19px,6vw,28px); padding:0 4vw; text-wrap:balance; }
  .finale .eyebrow { padding:0 8vw; line-height:1.8; }
  .flegal { left:0; right:0; text-align:center; bottom:2vh; }
  .a1copy .small br { display:none; }
  .a1copy .small { padding:0 7vw; }
  .a1copy .disp { padding:0 5vw; }
  /* shorter rail: at 56vh the wave and the playhead needle run into the copy */
  .railscene { top:15vh; height:42vh; }
  .tickrow s::after { font-size:8px; }
  /* labels centered under their ticks and pushed fully below the tick row:
     at this width the lines otherwise run through the song names */
  .tickrow.bot s::after { left:50%; transform:translateX(-50%); bottom:-15px; }
  /* the centered opening capture (scr-opening-c) carries its wordmark 264
     image-px lower; the overlay copy rides down with it (264 * .3816) */
  .oinv { padding-top:292px; }
}