/* ════════════════════════════════════════════════════════════════════
   FADELESS — 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 */
  /* Borders are keyed to the ghost button's rgba(183,190,215,.38) so
     every edge in the UI belongs to one family: --line is that colour
     muted for resting inputs/cards, --line-2 the hover/emphasis step. */
  --line:      rgba(183,190,215,.26);
  /* Separators INSIDE a component — table rows, list dividers. The same
     weight that reads as a crisp edge around a 40px input reads as a
     hard rule when it runs the full width of a table, so a row divider
     gets its own, lighter value. */
  --line-soft: rgba(183,190,215,.11);
  --line-2:    rgba(183,190,215,.42);
  --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;
  /* ── vertical rhythm ──────────────────────────────────────────
     ONE scale for every gap we add from here on, so new sections
     never invent their own spacing. Use the step, not a number:
       --sp-1  label → its own field          (tight pair)
       --sp-2  items inside one group         (list rows, chips)
       --sp-3  field → next field             (separate questions)
       --sp-4  block → next block             (script → comments)   */
  --sp-1: 8px;   --sp-2: 14px;   --sp-3: 26px;   --sp-4: 40px;
  --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(37px, 3.5vw, 60px); 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);
  /* The panel height animates on every step change, which is exactly
     the situation Chrome's scroll anchoring reacts to: it picks an
     anchor node, and when the wizard shrinks it "helpfully" scrolls to
     keep that node still — on a phone that anchor is usually already
     the section BELOW the wizard, so the page lurches down into "From
     idea to posted". We move the viewport ourselves in goTo(); the
     browser must not second-guess it. */
  overflow-anchor: none;
}

/* ── 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; overflow-anchor: none; }
.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: var(--sp-3); }
.wpanel-head.sub h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  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: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* ── choice tiles ───────────────────────────────────────────────── */
.tiles {
  display: grid; gap: var(--sp-2);
  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); }
/* SVG tile art (Reddit mark, AI styles) is drawn to sit ON the tile's
   surface, not to fill it — contain it and let the dark show through. */
.tile-art.vector {
  background-size: contain; background-repeat: no-repeat;
  background-color: 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: var(--sp-3); }
.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: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.script-opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-3); }
.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; }
.title-warnings { display: flex; flex-wrap: wrap; gap: 6px; }
.title-warnings:empty { display: none; }
.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;
}
/* ── the four script parts: title / hook / body / conclusion ─────
      One column, generous air between fields (--sp-3) and only a
      hairline between a label and the input it names (--sp-1), so
      the eye groups them correctly at a glance. */
.script-part { display: flex; flex-direction: column; gap: var(--sp-1); }
.script-part textarea, .script-part input[type="text"] {
  width: 100%; resize: vertical; line-height: 1.7;
}
.script-part input[type="text"] { font-weight: 600; }

/* Numbered steps + a hairline between each: four short, obviously
   separate questions instead of one tall column of text. The number
   gives the eye a place to land on the way down. */
.script-part + .script-part {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);         /* rule spans the full width */
}
.script-part > .field-label { font-size: 14px; color: var(--text); }

/* label / helper text stack: name on top, guidance quietly beneath */
.field-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.label-help {
  flex: 1 0 100%; font-weight: 400; color: var(--text-3);
  font-size: 12.5px; line-height: 1.5; margin: -2px 0 0;
}
/* Required / Optional pill: states the contract without a red asterisk */
.req {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.req.opt { color: var(--text-3); background: none; }
textarea#storyHook, textarea#storyOutro { min-height: 58px; max-height: 160px; }
.hook-tips { display: flex; flex-wrap: wrap; gap: 6px; }
.hook-tips:empty { display: none; }
.ttip, .tok {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; border-radius: 999px; padding: 4px 11px;
}
.ttip { color: var(--text-2); background: var(--surface); border: 1px solid var(--line-2); }
.tok  { color: var(--ok); background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); }

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);
}
/* ── link-style buttons ("View all types", expanders) ───────────── */
.link-btn {
  background: none; border: none; cursor: pointer; align-self: flex-start;
  font: 500 13.5px/1 var(--font); color: var(--accent-2);
  padding: 10px 2px; margin-top: var(--sp-2);
  text-decoration: underline; text-decoration-color: rgba(157,180,255,.35);
  text-underline-offset: 4px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.link-btn:hover { color: var(--text); text-decoration-color: currentColor; }
/* "View all" sits under a tile grid, a bit more than the default
   link-btn gap, but pulled in 15px from the old --sp-3 (26px). */
#storyMore { margin-top: 11px; }
/* "Show all N stories" sits inside a flex list that already spaces
   its rows with --sp-2 (14px); no extra margin needed on top of that,
   or it reads as detached from the list it's expanding. */
#postsMore { margin-top: 0; }

/* ── Reddit source: subreddit picker + suggested-post list ──────── */
.reddit-source {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.reddit-source .field { max-width: 320px; }
.reddit-posts { display: flex; flex-direction: column; gap: var(--sp-2); }
.reddit-posts:empty { display: none; }
/* Same anatomy as a voice row: content left, Select chip right. */
.rp-item {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px; cursor: pointer;
  color: var(--text); font-family: var(--font);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.rp-item:hover { background: var(--surface-2); border-color: var(--line-2); }
.rp-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.rp-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rp-title { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.rp-snippet { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.rp-meta { font-size: 12px; color: var(--text-3); }
.rp-item .vselect { flex: 0 0 auto; }
.rp-item:hover .vselect { color: var(--text); border-color: rgba(183,190,215,.65); }
.rp-item.selected .vselect { display: none; }
.rp-item .voice-check { flex: 0 0 18px; }
.rp-item.selected .voice-check { display: block; }
.rp-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-3); padding: 2px 2px 4px;
}

/* comments (Reddit story): one line each, they're card text */
.comments-section { margin-top: var(--sp-4); display: flex; flex-direction: column; }
/* No extra margin-top here: .wpanel-head.sub already puts --sp-3
   below its <p>, same as every other section header. Adding more on
   top of that (as this used to) left the first input stranded far
   below the "Shown as comment cards…" hint text. */
.comment-fields { display: flex; flex-direction: column; gap: var(--sp-2); }
.comment-input { width: 100%; }

.script-stats {
  display: flex; gap: 10px;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);         /* closes the field list */
}
.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" leads the voice list. Same shimmering-border
   trick as .email-wrap (padding + a slowly rotating conic-gradient
   background; --ewa/emailSpin declared once, above .email-wrap) so
   this option visually leads the list the way the email field leads
   the final step: the wrapper draws the ring, so .upload-row's own
   border is turned off (transparent, not dashed) rather than doubling
   up two different edge treatments on one row. */
.voice-shimmer {
  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;
}
.upload-row {
  flex-wrap: wrap; cursor: default;
  border-color: transparent;
}
.voice-shimmer .upload-row { border-radius: calc(var(--r-sm) - 1.5px); }
.upload-row:hover { background: var(--surface); }
.upload-row .voice-play.mic { pointer-events: none; }
.upload-row .voice-play.mic svg { width: 16px; height: 16px; }
.upload-row.selected { 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; }
/* Same shimmering-border technique as .email-wrap (padding + a rotating
   conic-gradient background, --ewa is declared once, above .email-wrap),
   but dialed way down: this box sits on screen for a while rather than
   being glanced at mid-typing, so a fast bright spin would nag rather
   than delight. Same emailSpin keyframe, just much slower, and the
   gradient stops are far lower-contrast so it reads as a faint ambient
   glow instead of a moving highlight. Unlike the email field this one
   never stops, it's not something you focus, it's something you notice. */
.upsell {
  margin: 40px auto 0; max-width: 500px;
  border-radius: var(--r-lg); padding: 1.5px;
  background: conic-gradient(from var(--ewa),
    rgba(124,155,255,.07) 0deg, rgba(124,155,255,.07) 240deg,
    rgba(160,185,255,.32) 300deg, rgba(124,155,255,.07) 360deg);
  animation: emailSpin 14s linear infinite;
  box-shadow: 0 24px 60px -30px rgba(0,0,14,.7);
}
.upsell-inner {
  background:
    radial-gradient(120% 110% at 50% -30%, rgba(124,155,255,.10), transparent 55%),
    var(--surface);
  border-radius: calc(var(--r-lg) - 1.5px);
  padding: 36px 34px 32px;
}
.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;
  /* One notch down from 12px/24px/14.5px: at that size the buttons
     dominated every screen they sat on. Changed here rather than
     per-page so the studio, the wizard and onboarding stay identical. */
  border-radius: 999px; padding: 10px 20px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  /* Named properties only, NOT `all`. `all` used to also animate this
     button's own resolved width whenever a FLEX SIBLING appeared or
     disappeared next to it (e.g. "Try another" popping in beside
     "Generate script with AI"), which read as the two buttons
     briefly squeezing into each other before settling. Layout should
     snap instantly; only these visual properties should ease. */
  transition: color .22s var(--ease), background-color .22s var(--ease),
    border-color .22s var(--ease), box-shadow .22s var(--ease),
    opacity .22s var(--ease), transform .22s var(--ease);
  white-space: nowrap;
}
.btn.lg { padding: 13px 26px; font-size: 14.5px; }
.btn.sm { padding: 7px 14px; font-size: 12.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: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-2);
  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: #242430; }

/* ── "Use your own voice" modal ──────────────────────────────────── */
.modal-card.wide { width: min(660px, 94vw); border-radius: 36px; }
.vr-body { padding: 30px 28px 6px; }
.vr-head p { color: var(--text-2); margin-top: 4px; font-size: 14px; }
.vr-tabs {
  position: relative; display: flex; gap: 3px; margin-top: var(--sp-3);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 4px;
}
.vr-tab-thumb {
  position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: 0;
  background: var(--text); border-radius: calc(var(--r-sm) - 4px);
  box-shadow: 0 2px 10px -2px rgba(0,0,12,.5);
}
.vr-tab {
  position: relative; z-index: 1; flex: 1; padding: 9px 12px;
  border-radius: calc(var(--r-sm) - 4px);
  font-size: 13.5px; font-weight: 600; color: var(--text-3);
  transition: color .25s var(--ease);
}
.vr-tab:hover { color: var(--text-2); }
.vr-tab.active { color: #0A0A0F; }
.vr-tab.active:hover { color: #0A0A0F; }
.vr-pane { margin-top: var(--sp-3); padding-bottom: 28px; }

/* upload pane: a big dashed drop target, the modal's whole reason to
   still offer "just upload a file" alongside recording in pieces */
.vr-drop {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 34px 20px; border-radius: var(--r-md);
  border: 1.5px dashed var(--line-2); color: var(--text-2);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.vr-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.vr-drop svg { width: 26px; color: var(--text-3); }
.vr-drop b { color: var(--text); font-size: 14.5px; }
.vr-drop span { font-size: 12.5px; color: var(--text-3); }

.vr-note { font-size: 13px; color: var(--text-2); }
.rec-chunks {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-2); max-height: 46vh; overflow-y: auto;
  padding-right: 4px;
}
.rec-chunk {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px;
  transition: border-color .2s var(--ease);
}
.rec-chunk.done { border-color: rgba(74,222,128,.4); }
.rec-chunk.active { border-color: var(--accent); }
.rec-chunk-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.rec-chunk-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3);
}
.rec-chunk-status { font-size: 12px; color: var(--text-3); }
.rec-chunk.done .rec-chunk-status { color: var(--ok); }
.rec-chunk.active .rec-chunk-status { color: var(--err); }
.rec-chunk-text {
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
  margin-bottom: 10px;
}
.rec-chunk-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-chunk-controls .btn { padding: 7px 14px; font-size: 13px; }
/* recording pulse: a small filled dot that breathes while capturing */
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--err);
  display: inline-block; margin-right: 6px;
  animation: recPulse 1.1s ease-in-out infinite;
}
@keyframes recPulse { 50% { opacity: .35; transform: scale(.8); } }
.vr-rec-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.vr-progress { font-size: 13px; color: var(--text-3); }

/* ── 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; }
}