/* ════════════════════════════════════════════════════════════════════
   CREATORS — design system  (dark, ElevenLabs-inspired, blue accent)

   Principles: near-black surfaces over a subtle blue-black gradient,
   ONE bright element at a time (the white primary button), a restrained
   periwinkle accent for selection & focus, hairline borders, generous
   whitespace, motion that eases — never bounces.
   ════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────── */
:root {
  --bg:        #0A0A0F;   /* page base (gradient painted on body) */
  --bg-soft:   #101018;   /* raised panels */
  --surface:   #15151F;   /* cards, inputs */
  --surface-2: #1B1B27;   /* hover state */
  --line:      rgba(160,175,255,.08);
  --line-2:    rgba(160,175,255,.16);
  --text:      #FAFAF9;
  --text-2:    #B7BAC9;   /* secondary copy — kept readable */
  --text-3:    #8B8FA3;   /* labels & hints — brighter than before */
  --accent:    #7C9BFF;   /* periwinkle — selection, focus, progress */
  --accent-2:  #9DB4FF;   /* lighter accent for small text/icons */
  --accent-soft: rgba(124,155,255,.13);
  --ok:        #4ADE80;
  --warn:      #FBBF24;
  --err:       #F87171;
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;
  --pad-x: clamp(18px, 5vw, 56px);          /* shared wizard gutter */
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* NOTE: no `scroll-behavior: smooth` here — programmatic scrolling is
   GSAP-tweened, and CSS smooth-scrolling would fight those tweens
   (every scrollTo would start its own slow glide). */
html { -webkit-text-size-adjust: 100%; }
body {
  color: var(--text);
  /* the blue lives up around the hero and is gone by mid-page */
  background: linear-gradient(180deg, #0A0C18 0%, #0B0F1E 14%, #0A0B12 44%, #09090C 100%);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; min-height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }   /* wins over any display rule below */
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
::selection { background: rgba(124,155,255,.28); }

/* ── ambient backdrop: soft blue light sources ─────────────────── */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 34% at 50% -6%, rgba(124,155,255,.13), transparent 66%),
    radial-gradient(40% 22% at 80% 12%, rgba(124,155,255,.05), transparent 70%);
}

/* ── top bar ────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 44px);
  background: rgba(10,10,15,.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none;
}
.logo-mark {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, #FAFAF9 0%, #7C9BFF 130%);
}
.top-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.top-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 10px var(--ok); }

/* ── page shell + hero ─────────────────────────────────────────── */
.shell { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }
.hero { text-align: center; padding: clamp(20px, 4vw, 40px) 0 clamp(30px, 4vw, 52px); }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-2);
  border: 1px solid rgba(124,155,255,.32); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 26px;
  background: rgba(124,155,255,.06);
}
.hero h1 {
  font-size: clamp(38px, 6.4vw, 66px); font-weight: 650;
  letter-spacing: -.035em; line-height: 1.07; text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, #CBD8FF 0%, #7C9BFF 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  max-width: 580px; margin: 22px auto 0; color: #A9B2D0;
  font-size: clamp(15px, 2vw, 17px); text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════════
   WIZARD
   ════════════════════════════════════════════════════════════════ */
.wizard {
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: 0 1px 0 rgba(160,175,255,.06) inset, 0 40px 90px -40px rgba(0,0,10,.85);
}

/* ── timeline nav: left-aligned orbs + filling connectors.
      Gutter matches the panels (--pad-x) so orb 1 sits exactly on
      the content edge. ─────────────────────────────────────────── */
.wtl {
  display: flex; align-items: center; gap: 12px;
  padding: 26px var(--pad-x) 20px;
}
.wtl-step {
  display: flex; align-items: center; gap: 9px;
  color: var(--text-3); transition: color .3s var(--ease);
  flex: 0 0 auto;
}
.wtl-step:disabled { cursor: default; }
.wtl-orb {
  display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  border: 2px solid var(--line-2);
  font-size: 11px; font-weight: 600;
  transition: all .35s var(--ease);
}
.wtl-orb .wtl-check { width: 11px; display: none; color: var(--bg); }
.wtl-label { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.wtl-step.active { color: var(--text); }
.wtl-step.active .wtl-orb {
  border-color: var(--text); background: var(--text); color: var(--bg);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.wtl-step.done { color: var(--text-2); }
.wtl-step.done .wtl-orb { border-color: var(--accent); background: var(--accent); }
.wtl-step.done .wtl-orb i { display: none; }
.wtl-step.done .wtl-orb .wtl-check { display: block; }
.wtl-step:not(:disabled):hover { color: var(--text); }
.wtl-conn {
  flex: 1 1 14px; min-width: 10px; height: 2px; border-radius: 2px;
  background: var(--line-2); position: relative; overflow: hidden;
}
.wtl-conn::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.wtl-conn.filled::after { transform: scaleX(1); }

/* ── step viewport: horizontal slide; the viewport height is LOCKED
      during the slide (no vertical movement while sliding) and only
      adjusts to the new panel after the horizontal motion lands ──── */
.wviewport { overflow: hidden; position: relative; }
.wtrack { display: flex; align-items: flex-start; }
.wpanel {
  flex: 0 0 100%; min-width: 0;
  padding: clamp(20px, 3.5vw, 38px) var(--pad-x) clamp(24px, 4.5vw, 48px);
  visibility: hidden;
}
.wpanel.active { visibility: visible; }

.tiles, .voice-list { position: relative; }

/* Water ripple emitted by breathe() (injected by JS). The ring grows
   via box-shadow SPREAD, not transform:scale — scaling a pill stretches
   it into an oval and thickens the stroke; spread expands evenly on
   every side and keeps the shape true. */
.ripple {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
}

/* per-element light sweep used to guide the eye (injected by JS) */
.shine {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.shine i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(100deg, transparent 0%,
              rgba(190,210,255,.17) 50%, transparent 100%);
}
.wpanel-head { margin-bottom: 28px; }
.wpanel-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: -.02em; }
.wpanel-head p { color: var(--text-2); margin-top: 6px; font-size: 15px; }
.wpanel-head.sub { margin-bottom: 18px; }
.wpanel-head.sub h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.wpanel-head.sub p { margin-top: 3px; font-size: 14px; }

/* AI style picker (revealed inside step 2) */
.ai-styles { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ── choice tiles ───────────────────────────────────────────────── */
.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tile {
  position: relative; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  perspective: 520px;                    /* 3D room for the thumbnail tilt */
}
.tiles.tilt .tile-art { will-change: transform; }
/* cursor-following sheen (position driven by --mx/--my from JS) */
.tiles.tilt .tile::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(160,185,255,.10), transparent 65%);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.tiles.tilt .tile:hover::before { opacity: 1; }
.tile:hover { background: var(--surface-2); border-color: var(--line-2); }
.tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(124,155,255,.35);
}
/* selection badge — injected by JS (tileBadge) so the ✓ can animate */
.tile-badge {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 12px -2px rgba(124,155,255,.5);
}
.tile-badge svg { width: 11px; }
.tile.selected .tile-badge { display: grid; }
.tile-ico { color: var(--text-2); margin-bottom: 10px; }
.tile-ico svg { width: 26px; height: 26px; }
.tile.selected .tile-ico { color: var(--accent-2); }
.tile-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.tile-sub { font-size: 13.5px; color: var(--text-3); }

/* media tiles (background & mood): artwork on top */
.tiles.media { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tiles.media .tile { padding: 10px 12px 14px; }
.tile-art {
  height: 92px; border-radius: var(--r-sm); margin-bottom: 10px;
  background-size: cover; background-position: center;
  filter: saturate(.82);
  transition: filter .3s var(--ease);
}
.tile:hover .tile-art, .tile.selected .tile-art { filter: saturate(1); }
.tile-art.ph { display: grid; place-items: center; background: var(--surface-2); }

/* play / stop badge centred on a mood tile's artwork */
.tile-play {
  position: absolute; top: 10px; left: 12px; right: 12px; height: 92px;
  display: grid; place-items: center; pointer-events: none;
  opacity: 0; transition: opacity .22s var(--ease);
}
.tile-play::before {
  content: ''; position: absolute; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(10,10,15,.62); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.28);
}
.tile-play svg { position: relative; width: 22px; height: 22px; color: #fff; }
.tile-play .ico-stop { display: none; }
.tile:hover .tile-play { opacity: 1; }
.tile.playing .tile-play { opacity: 1; }
.tile.playing .tile-play .ico-play { display: none; }
.tile.playing .tile-play .ico-stop { display: block; }
.tile-art.ph-gameplay {
  background: repeating-linear-gradient(45deg, #161620 0 14px, #1B1B27 14px 28px);
}

/* mood artwork: quiet duotone gradients + waveform */
.tile-art.mood { display: grid; place-items: center; }
.tile-art.mood svg { width: 84%; height: 46%; overflow: visible; }
.tile-art.mood .wv1 { stroke: rgba(255,255,255,.85); }
.tile-art.mood .wv2 { stroke: rgba(255,255,255,.35); }
.mood-calm      { background: linear-gradient(140deg, #24443E, #0F1D1B); }
.mood-dreamy    { background: linear-gradient(140deg, #35304F, #14121F); }
.mood-lofi      { background: linear-gradient(140deg, #4A3828, #1D1610); }
.mood-cinematic { background: linear-gradient(140deg, #2B3A4E, #10161E); }
.mood-epic      { background: linear-gradient(140deg, #4E2B28, #1E100F); }
.mood-upbeat    { background: linear-gradient(140deg, #4E4526, #1E1A0E); }
.mood-phonk     { background: linear-gradient(140deg, #43273A, #180E15); }
.mood-dark      { background: linear-gradient(140deg, #23252E, #0C0D12); }
.mood-none      { background: var(--surface-2); color: var(--text-3); }
.mood-none svg  { width: 26px !important; height: 26px !important; }

/* ── "more options" link + media browser ────────────────────────── */
.linklike {
  margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
  transition: color .25s var(--ease);
}
.linklike:hover { color: var(--accent-2); }
.browse-btn { margin-top: 18px; }
.media-browser { margin-top: 20px; }
.mb-section { margin-bottom: 22px; }
.mb-title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px; }
/* one horizontal, snap-scrolling row per section — capped height, a
   soft fade hints there's more to the right */
.mb-grid {
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 10px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent);
  scrollbar-width: thin; scrollbar-color: rgba(139,143,163,.55) transparent;
}
.mb-grid::-webkit-scrollbar { height: 7px; }
.mb-grid::-webkit-scrollbar-track { background: rgba(139,143,163,.12); border-radius: 4px; }
.mb-grid::-webkit-scrollbar-thumb { background: rgba(139,143,163,.55); border-radius: 4px; }
.mb-grid::-webkit-scrollbar-thumb:hover { background: rgba(139,143,163,.75); }
.mb-grid .mb-item { flex: 0 0 112px; scroll-snap-align: start; }
.mb-item {
  position: relative; aspect-ratio: 9/14; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.mb-item img { width: 100%; height: 100%; object-fit: cover; }
.mb-item:hover { transform: scale(1.03); border-color: var(--line-2); z-index: 1; }
.mb-item.selected { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.mb-item .mb-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,10,.28); color: #fff; font-size: 18px;
  opacity: 0; transition: opacity .2s;
}
.mb-item:hover .mb-play { opacity: 1; }
.mb-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* track list (music browser) */
.track-list { display: flex; flex-direction: column; gap: 6px; }
.track {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.track:hover { background: var(--surface-2); }
.track.selected { border-color: var(--accent); }
.track b { font-weight: 500; font-size: 14px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track.pickme .voice-play { border-style: dashed; }
.track.pickme .magic-ico { font-size: 14px; }
.track .voice-play { flex: 0 0 32px; height: 32px; }
.track .voice-play svg { width: 17px; height: 17px; }
.track .ico-stop { display: none; }
.track.playing .ico-play { display: none; }
.track.playing .ico-stop { display: block; }
.track.playing .voice-play { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ── step 1: script section (revealed after a story is chosen) ──── */
.script-section { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.script-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.grow { flex: 1; min-width: 220px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: .02em; }
select, input[type="text"], input[type="email"], textarea {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 14px; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  color: var(--text); font-size: 15px;
}
select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B7BAC9' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
select:focus, input:focus, textarea:focus {
  border-color: rgba(124,155,255,.5); box-shadow: 0 0 0 3px var(--accent-soft); }
::placeholder { color: var(--text-3); }

.script-box { display: flex; flex-direction: column; gap: 12px; }
.title-row { position: relative; }
.title-row input { width: 100%; font-weight: 600; }
.title-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.twarn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--warn);
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
  border-radius: 999px; padding: 4px 11px;
}
textarea#storyText {
  width: 100%; min-height: 210px; max-height: 360px; resize: vertical; line-height: 1.75;
  scrollbar-width: thin; scrollbar-color: rgba(139,143,163,.5) transparent;
}
textarea#storyText::-webkit-scrollbar { width: 8px; }
textarea#storyText::-webkit-scrollbar-thumb {
  background: rgba(139,143,163,.5); border-radius: 4px;
  border: 2px solid var(--surface);
}
.script-stats { display: flex; gap: 10px; }
.stat {
  flex: 1; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 8px;
}
.stat b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--text-3); }
.stat.subtle b { color: var(--text-2); }

/* ── step 5: voices ─────────────────────────────────────────────── */
.voice-list { display: flex; flex-direction: column; gap: 6px; }
.voice-row {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.voice-row:hover { background: var(--surface-2); }
.voice-row.selected { border-color: var(--accent); }
.voice-play {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--text-2);
  transition: all .2s var(--ease);
}
.voice-play svg { width: 14px; height: 14px; }
.voice-row:hover .voice-play { color: var(--accent-2); border-color: var(--accent); }
.voice-row.playing .voice-play { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.voice-meta { flex: 1; display: flex; flex-direction: column; }
.voice-meta b { font-weight: 600; font-size: 15px; }
.voice-meta span { font-size: 13px; color: var(--text-3); }
.vselect { pointer-events: none; }                /* row click handles it */
/* the Select chip lights up with the row, like a real button */
.voice-row:hover .vselect, .track:hover .vselect {
  color: var(--text); border-color: rgba(183,190,215,.65);
}
.voice-row.selected .vselect, .track.selected .vselect { display: none; }
.voice-check { width: 18px; color: var(--accent); display: none; }
.voice-check svg { width: 100%; }
.voice-row.selected .voice-check, .track.selected .voice-check { display: block; }

/* "Use your own voice" — the final row of the voice list */
.upload-row {
  flex-wrap: wrap; cursor: default;
  border-style: dashed;
}
.upload-row:hover { background: var(--surface); border-color: rgba(183,190,215,.45); }
.upload-row .voice-play.mic { pointer-events: none; }
.upload-row .voice-play.mic svg { width: 16px; height: 16px; }
.upload-row.selected { border-style: solid; border-color: var(--accent); }
.upload-row.selected #voiceFileName { color: var(--ok); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2);
  cursor: pointer; width: 100%; margin-top: 4px; padding-left: 50px; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ── step 6 views ───────────────────────────────────────────────── */
.wview { position: relative; }
.recap {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 20px;
  font-size: 14px;
}
.recap dt { color: var(--text-3); }
.recap dd { font-weight: 500; }
.email-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }

/* the email field: a soft light segment rolls clockwise around the
   border (conic gradient on a 1.5px wrapper) until it's focused */
@property --ewa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.email-wrap {
  display: block; position: relative; border-radius: var(--r-sm); padding: 1.5px;
  background: conic-gradient(from var(--ewa),
    rgba(124,155,255,.16) 0deg, rgba(124,155,255,.16) 250deg,
    rgba(160,185,255,.85) 305deg, rgba(124,155,255,.16) 360deg);
  animation: emailSpin 3.6s linear infinite;
}
@keyframes emailSpin { to { --ewa: 360deg; } }
.email-wrap input { width: 100%; border-color: transparent; background: #14141D; }
.email-wrap:focus-within {
  animation: none;
  background: rgba(124,155,255,.55);
}
.email-wrap:focus-within input { box-shadow: 0 0 0 3px var(--accent-soft); }
.fineprint { font-size: 13px; color: var(--text-3); margin-top: 14px; }

.sent-inner { text-align: center; padding: 34px 8px; position: relative; }
/* confetti fills the whole screen, above everything, click-through */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 90; }
.sent-badge {
  width: 80px; height: 80px; margin: 0 auto 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 8px var(--accent-soft), 0 18px 44px -12px rgba(124,155,255,.55);
}
.sent-badge svg { width: 38px; }
.sent-badge.err { background: var(--err); color: #fff; font-weight: 700; font-size: 30px; }
.sent-inner h2 { font-size: 26px; letter-spacing: -.02em; }
.sent-inner > p, .sent-inner .upsell p { color: var(--text-2); max-width: 460px; margin: 12px auto 0; }
.upsell {
  margin: 40px auto 0; max-width: 500px;
  background:
    radial-gradient(120% 110% at 50% -30%, rgba(124,155,255,.10), transparent 55%),
    var(--surface);
  border: 1px solid rgba(124,155,255,.2);
  border-radius: var(--r-lg); padding: 36px 34px 32px;
  box-shadow: 0 24px 60px -30px rgba(0,0,14,.7);
}
.upsell h3 {
  font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--accent-2);
}
.upsell p { font-size: 14.5px; }
.upsell .btn { margin: 22px 6px 0; }

.stages { list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.stage { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 15px;
  transition: color .3s; }
.stage i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2);
  transition: all .3s var(--ease); position: relative; }
.stage.doing { color: var(--text); }
.stage.doing i { border-color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.stage.did { color: var(--text-2); }
.stage.did i { background: var(--accent); border-color: var(--accent); }
.stage.did i::after { content: ''; position: absolute; inset: 5px 4px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translateY(-1px); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }

.result-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 28px; align-items: start; }
.player { position: relative; aspect-ratio: 9/16; border-radius: var(--r-md); overflow: hidden;
  background: #000; border: 1px solid var(--line-2); }
.player video { width: 100%; height: 100%; object-fit: cover; }
.player-veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; color: #fff;
  background: rgba(0,0,10,.45); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
  font-size: 14px;
}
.player-veil.show { opacity: 1; pointer-events: auto; }
.player-big { font-size: 40px; }
.paycard h3 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 14px; }
.paylist { list-style: none; margin-bottom: 22px; color: var(--text-2); font-size: 14.5px; }
.paylist li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.paylist li:first-child { border-top: 1px solid var(--line); }

/* ── wizard footer nav ──────────────────────────────────────────── */
.wnav {
  display: flex; align-items: center; gap: 16px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.whint {
  flex: 1; text-align: right; font-size: 13.5px; color: var(--text-3);
  transition: color .3s var(--ease);
}
.whint.ok { color: var(--ok); }
.whint.bad { color: var(--err); font-weight: 500; }

/* soft red pulse on the element(s) a step still needs */
.attn { animation: attn 1.2s var(--ease) 2; border-radius: var(--r-md); }
@keyframes attn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  40% { box-shadow: 0 0 0 4px rgba(248,113,113,.25); }
}
input.attn, textarea.attn { border-color: rgba(248,113,113,.6) !important; }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 12px 24px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  transition: all .22s var(--ease);
  white-space: nowrap;
}
.btn.lg { padding: 15px 30px; font-size: 15.5px; }
.btn.sm { padding: 8px 16px; font-size: 13.5px; }
.btn.primary { background: var(--text); color: var(--bg); }
.btn.primary small {                       /* the quiet "Next:" prefix */
  font-size: 12.5px; font-weight: 500; opacity: .55; margin-right: 1px;
}
.btn.primary[data-next]::after {           /* thin forward arrow */
  content: ''; width: 15px; height: 15px; margin-left: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6.5-6.5L20 12l-6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6.5-6.5L20 12l-6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: translate .22s var(--ease);
}
.btn.primary[data-next]:hover::after { translate: 3px 0; }

/* Hint animations: ONLY the arrow moves — the label stays put.
   Next: the arrow drifts across, fading in and out as it travels. */
@keyframes arrowGo {
  0%, 6%  { transform: translateX(-5px); opacity: 0; }
  24%     { opacity: 1; }
  58%     { transform: translateX(9px); opacity: 0; }
  100%    { transform: translateX(-5px); opacity: 0; }
}
.btn.primary[data-next].hinting::after {
  animation: arrowGo 2.7s cubic-bezier(.4,0,.3,1) 3;
}

/* Browse / Listen: a down arrow dips and returns, hinting "more below". */
.browse-btn::after {
  content: ''; width: 14px; height: 14px; margin-left: 3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16m-6.5-6.5L12 20l6.5-6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16m-6.5-6.5L12 20l6.5-6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .7; transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.browse-btn:hover::after { opacity: 1; transform: translateY(2px); }
@keyframes arrowDip {
  0%, 100% { transform: translateY(0); opacity: .7; }
  40%      { transform: translateY(5px); opacity: 1; }
  70%      { transform: translateY(0); opacity: .7; }
}
.browse-btn.hinting::after { animation: arrowDip 2.7s cubic-bezier(.4,0,.3,1) 3; }
.btn.ghost[data-prev]::before {            /* thin backward arrow */
  content: ''; width: 15px; height: 15px; margin-right: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4m6.5-6.5L4 12l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4m6.5-6.5L4 12l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: translate .22s var(--ease);
}
.btn.ghost[data-prev]:hover::before { translate: -3px 0; }

/* keyboard focus — visible, on-brand */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tile:focus-visible, .voice-row:focus-visible, .track:focus-visible, .mb-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn.primary:hover:not(:disabled) { transform: translateY(-1px);
  box-shadow: 0 8px 26px -8px rgba(160,185,255,.5); }
.btn.primary:active:not(:disabled) { transform: translateY(0); }
.btn.primary:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
/* "await": step not complete yet — still clickable, visibly dimmer */
.btn.primary.await { background: rgba(250,250,249,.55); }
.btn.primary.await:hover { transform: none; box-shadow: none; }
.btn.ghost { border: 1px solid rgba(183,190,215,.38); color: #C6C9D6; }
.btn.ghost:hover { color: var(--text); border-color: rgba(183,190,215,.65); }
.btn.magic { border: 1px solid var(--line-2); background: var(--surface); }
.btn.magic:hover:not(:disabled) { border-color: var(--accent); }
.btn.magic:disabled { opacity: .55; cursor: wait; }
.magic-ico { font-size: 16px; line-height: 1; color: var(--accent-2); }
.spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── marketing sections ─────────────────────────────────────────── */
.how { padding: clamp(70px, 10vw, 120px) 0 0; text-align: center; }
.how h2, .faq h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 600; letter-spacing: -.025em; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; text-align: left; }
.how-grid article {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px;
}
.how-n { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--accent-2); }
.how-grid h3 { font-size: 17px; margin: 10px 0 8px; letter-spacing: -.01em; }
.how-grid p { font-size: 14.5px; color: var(--text-2); }

.faq { padding: clamp(70px, 10vw, 110px) 0 0; max-width: 660px; margin: 0 auto; }
.faq h2 { text-align: center; margin-bottom: 30px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 30px 18px 2px;
  font-weight: 500; font-size: 15.5px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  color: var(--text-3); font-size: 18px; transition: rotate .25s var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 2px 20px; color: var(--text-2); font-size: 14.5px; max-width: 56ch; }

.foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  max-width: 1080px; margin: 0 auto; padding: 30px clamp(16px,4vw,40px) 44px;
  border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2);
}
.foot a { text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.foot a:hover { color: var(--accent-2); }
.foot-fine { font-size: 12.5px; color: var(--text-3); }

/* ── media modal ────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,6,12,.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-card {
  position: relative; width: min(400px, 94vw);
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,12,.85);
}
.modal-media { background: #000; }
.modal-media img, .modal-media video {
  width: 100%; max-height: min(64vh, 560px); object-fit: contain; display: block;
}
.modal-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px 26px;                 /* room to breathe below the media */
}
.modal-meta { font-size: 12.5px; color: var(--text-3); }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  background: rgba(10,10,15,.68); color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  transition: color .2s, background .2s, transform .2s;
}
.modal-close:hover { transform: scale(1.06); }
.modal-close:hover { color: var(--text); background: rgba(10,10,15,.8); }

/* ── toasts ─────────────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 22px; left: 50%; translate: -50% 0; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.toast {
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-left: 3px solid var(--err);
  border-radius: var(--r-sm); padding: 13px 16px; font-size: 14px;
  box-shadow: 0 16px 40px -12px rgba(0,0,10,.75);
  animation: toast-in .4s var(--ease);
}
.toast.info { border-left-color: var(--accent); }
.toast.ok { border-left-color: var(--ok); }
@keyframes toast-in { from { opacity: 0; translate: 0 10px; } }

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .player { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .top-note { display: none; }
  .wtl { gap: 6px; padding-top: 20px; padding-bottom: 16px; }
  .wtl-step { gap: 7px; }
  .wtl-orb { width: 24px; height: 24px; font-size: 10px; }
  .wtl-conn { min-width: 4px; }
  .wtl-label { display: none; }                 /* orbs only on phones… */
  .wtl-step.active .wtl-label { display: block; } /* …except the active step */
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles.media { grid-template-columns: repeat(2, 1fr); }
  .wnav { flex-wrap: wrap; }
  .whint { flex-basis: 100%; order: -1; text-align: left; }
  .email-row .btn { width: 100%; }
  .script-opts .btn { flex: 1; }
  .script-stats { flex-wrap: wrap; }
  .stat { min-width: 40%; }
  .upsell .btn { width: 100%; margin: 10px 0 0; }
}

/* ── motion preferences ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}