/* ============================================================
   VOICECLONE — "Bold & Vivid" design system
   Palette: ink-violet ground · hot pink-red + acid volt-yellow duo
   Type: Archivo Black display · humanist body · technical mono
   ============================================================ */

@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-black.woff2") format("woff2");
}

:root {
  /* ground — near-black with a deliberate violet bias, not pure #000 */
  --ink:       #0C0A12;
  --ink-2:     #100D18;
  --surface:   #191322;
  --surface-2: #241B31;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  /* text */
  --paper: #F6F4FA;
  --muted: #B4AEC6;
  --faint: #948EA8;

  /* the vivid duo */
  --hot:    #FF3D6E;
  --hot-2:  #FF6B8E;
  --volt:   #ECFF4C;
  --volt-2: #F5FF8A;

  /* semantic (separate from the accent) */
  --good: #37D98A;
  --warn: #FFB84D;
  --bad:  #FF3D6E;

  --grad: linear-gradient(96deg, var(--hot) 0%, #FF8A4C 46%, var(--volt) 100%);

  /* Archivo Black is weight-400 only; the display role never needs bolder */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { background: var(--ink); }
body {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img, canvas { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(56px, 9vw, 104px); }

/* ---- typography ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--hot); display: inline-block; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; text-wrap: balance; line-height: 1.05; }
.display { font-size: clamp(2.9rem, 8.5vw, 6.4rem); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
h2.big { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; }
.lede { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 46ch; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- buttons ---- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: .98rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--hot { background: var(--hot); color: #fff; box-shadow: 0 8px 30px -10px var(--hot); }
.btn--hot:hover { background: var(--hot-2); box-shadow: 0 12px 34px -8px var(--hot); }
.btn--volt { background: var(--volt); color: #14110A; }
.btn--volt:hover { background: var(--volt-2); }
.btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--paper); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--sm { padding: 9px 16px; font-size: .86rem; }
.btn--block { width: 100%; }

/* ---- clone choice: Fast vs Professional ---- */
.clone-choice { margin: 30px 0 4px; }
.clone-choice__intro { margin-bottom: 18px; }
.clone-choice__intro p { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 10px 0 0; max-width: 62ch; }
.clone-choice__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .clone-choice__grid { grid-template-columns: 1fr; } }

.cchoice {
  --accent: var(--volt);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 22px; overflow: hidden; isolation: isolate;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cchoice::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.cchoice::after { content: ""; position: absolute; inset: -40% 40% auto -40%; height: 160px; z-index: -1;
  background: radial-gradient(60% 100% at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.cchoice--fast { --accent: var(--volt); }
.cchoice--pro  { --accent: var(--hot); }
.cchoice:hover { transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
  box-shadow: 0 16px 38px -18px color-mix(in srgb, var(--accent) 55%, transparent); }

.cchoice__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.cchoice__icon svg { width: 23px; height: 23px; }

.cchoice__eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); }
.cchoice__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.06;
  letter-spacing: -.02em; color: var(--paper); }
.cchoice__desc { color: var(--muted); font-size: .93rem; line-height: 1.55; max-width: 42ch; }

.cchoice__specs { display: flex; flex-direction: column; gap: 9px; width: 100%; margin-top: 4px; padding-top: 16px;
  border-top: 1px solid var(--line); }
.cchoice__specs > span { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.cchoice__specs b { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); }
.cchoice__specs i { font-style: normal; font-weight: 600; font-size: .9rem; color: var(--paper); text-align: right; }

.cchoice__cta { margin-top: 18px; font-family: var(--font-mono); font-weight: 700; font-size: .88rem;
  border-radius: 999px; padding: 10px 20px; background: var(--accent); color: #14110A; transition: filter .15s ease; }
.cchoice--pro .cchoice__cta { color: #fff; }
.cchoice:hover .cchoice__cta { filter: brightness(1.07); }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav--admin { background: color-mix(in srgb, #05040A 88%, transparent); border-bottom-color: rgba(236,255,76,.18); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 400; letter-spacing: -.03em; font-size: 1.28rem; text-transform: uppercase; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand__img { display: block; width: auto; max-width: 56vw; flex: none; }
.brand small { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .2em; color: var(--volt); text-transform: uppercase; align-self: center; }
/* min-width:0 lets this shrink instead of forcing the bar wider than the
   viewport, which made the whole page scroll sideways. */
.nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px;
              margin-left: auto; align-items: center; min-width: 0; }
.nav__links a { color: var(--muted); font-size: .95rem; font-weight: 600; transition: color .15s; }
.nav__links a:hover { color: var(--paper); }
.nav__user { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
@media (max-width: 760px){ .nav__hide-sm { display: none; } }

/* ---- generic layout mains ---- */
.main-narrow { max-width: 480px; margin: clamp(40px, 8vw, 90px) auto; padding-inline: 20px; }
.main-wide { max-width: var(--wrap); margin: clamp(32px, 5vw, 56px) auto; padding-inline: clamp(20px,4vw,40px); }

/* ---- cards / panels ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 3vw, 36px); }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.field label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input {
  font-family: var(--font-body); font-size: 1rem; color: var(--paper);
  background: var(--ink-2); border: 1.5px solid var(--line-2); border-radius: 11px; padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--faint); }
.field input:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 4px rgba(255,61,110,.18); }
.field .hint { font-family: var(--font-body); font-size: .84rem; color: var(--faint); letter-spacing: normal; text-transform: none; }
.form-alt { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 20px; }
.form-alt a { color: var(--volt); font-weight: 600; }

/* ---- flash / alerts ---- */
.flash { border-radius: 11px; padding: 12px 15px; font-size: .9rem; margin-bottom: 4px; }
.flash--err { background: rgba(255,61,110,.12); border: 1px solid rgba(255,61,110,.4); color: #ffb3c6; }
.flash--ok { background: rgba(55,217,138,.12); border: 1px solid rgba(55,217,138,.4); color: #9dedc4; }
.flash ul { margin: 0; padding-left: 18px; }
.flash li + li { margin-top: 4px; }

/* ---- pills / tags ---- */
.pill { display: inline-block; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.pill--volt { color: #14110A; background: var(--volt); border-color: var(--volt); font-weight: 700; }

/* ---- stat block (dashboards) ---- */
.stat__label { color: var(--muted); font-size: .82rem; margin: 0 0 6px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.stat__value { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -.02em; }
.stat__value .unit { font-family: var(--font-mono); font-size: .9rem; color: var(--muted); margin-left: 8px; letter-spacing: 0; }

/* ---- hero (landing) ---- */
.hero { padding-top: clamp(36px, 6vw, 72px); }
.hero__grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 940px){ .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero .display { margin-top: 22px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.sample { margin-top: 30px; display: inline-flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px; }
.sample__play { width: 42px; height: 42px; border-radius: 50%; background: var(--hot); color: #fff; display: grid; place-items: center; flex: none; }
.sample__meta { display: flex; flex-direction: column; padding-right: 12px; }
.sample__meta b { font-size: .92rem; }
.sample__meta span { font-size: .82rem; color: var(--muted); }
.waveband { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--ink-2)); padding: 18px; }
.waveband canvas { width: 100%; height: 200px; }
.waveband__foot { display: flex; justify-content: space-between; margin-top: 12px; color: var(--faint); font-size: .8rem; gap: 12px; }

/* ---- section head ---- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.shead a { color: var(--volt); font-weight: 700; font-size: .95rem; font-family: var(--font-mono); }

/* ---- how-it-works steps ---- */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.step__n { font-family: var(--font-mono); font-size: .8rem; color: var(--hot); letter-spacing: .1em; }
.step h3 { font-size: 1.35rem; margin: 12px 0 8px; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---- voice cards ---- */
.grid-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; }
.vcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: border-color .18s, transform .18s, background .18s; overflow: hidden; }
.vcard:hover { border-color: var(--line-2); transform: translateY(-3px); background: var(--surface-2); }
.vcard__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vplay { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: transform .15s, background .15s; }
.vcard:hover .vplay { background: var(--volt); transform: scale(1.06); }
.vminiwave { display: flex; align-items: center; gap: 3px; height: 30px; flex: 1; }
.vminiwave i { flex: 1; background: linear-gradient(180deg, var(--hot), #7a2f52); border-radius: 2px; opacity: .85; }
.vcard h3 { font-size: 1.3rem; letter-spacing: -.01em; }
.vcard__lang { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); margin: 8px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vcard__lang .flag { font-size: 1rem; line-height: 1; }
/* Gender badge on voice tiles — glyph does the work, no sex/colour cliché. */
.vsex { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px; }
.vsex__sym { font-size: 1rem; line-height: 1; color: var(--volt); }
.vcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.vcard__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.vcard__price { font-family: var(--font-mono); font-size: .82rem; color: var(--paper); }
.vcard__price span { color: var(--faint); }
.badge-clone { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; background: var(--volt); color: #14110A; font-weight: 700; padding: 4px 9px; border-radius: 6px; }
.byline { font-size: .84rem; color: var(--faint); }
.byline b { color: var(--volt); font-weight: 600; }
.vplay { cursor: pointer; border: 0; }
.vplay.is-playing { background: var(--hot); color: #fff; }

/* ---- filter bar + styled selects ---- */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.filters__field { display: flex; flex-direction: column; gap: 6px; }
.filters__field label { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.filters__field input { font-family: var(--font-body); font-size: .9rem; color: var(--paper); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; }
.filters__field input:focus { outline: none; border-color: var(--hot); }
.filters__grow { flex: 1; min-width: 180px; }
.sel { position: relative; display: inline-block; }
.sel select { appearance: none; font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--paper); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 34px 10px 14px; cursor: pointer; width: 100%; }
.sel::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sel select[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- textarea ---- */
.field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--paper); background: var(--ink-2); border: 1.5px solid var(--line-2); border-radius: 11px; padding: 13px 15px; resize: vertical; min-height: 150px; line-height: 1.6; }
.field textarea::placeholder { color: var(--faint); }
.field textarea:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 4px rgba(255,61,110,.18); }

/* ---- chosen voice (project-new) ---- */
.chosen-voice { display: flex; align-items: center; gap: 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
.chosen-voice b { display: block; font-size: .98rem; }
.chosen-voice .mono { font-size: .82rem; color: var(--muted); }
.chosen-voice .vplay { width: 40px; height: 40px; background: var(--hot); color: #fff; }

/* ---- project summary bar ---- */
.proj-summary { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.proj-summary__voice { display: flex; align-items: center; gap: 12px; }
.proj-summary__voice b { display: block; }
.proj-summary__voice .mono { font-size: .82rem; color: var(--muted); }
.proj-summary__voice .vplay { width: 40px; height: 40px; background: var(--hot); color: #fff; }
.proj-summary__stats { display: flex; flex-wrap: wrap; gap: 18px; font-size: .85rem; color: var(--muted); }
.proj-summary__stats b { color: var(--paper); }

/* ---- segments / editor ---- */
.segs { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.seg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.seg__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.seg__num { font-family: var(--font-mono); font-size: .8rem; color: var(--faint); letter-spacing: .1em; }
.seg__text { font-size: 1.15rem; margin: 10px 0 4px; line-height: 1.5; color: var(--paper); }
.seg__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--line); }
.seg__spacer { flex: 1; }
.seg-error { margin-top: 14px; margin-bottom: 0; }
.seg-generate[disabled] { opacity: .6; cursor: progress; }

/* ---- takes ---- */
.takes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.takes-empty { color: var(--faint); font-size: .8rem; margin: 6px 0 0; }
.take-row { display: flex; align-items: center; gap: 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.take-row.is-selected { border-color: var(--volt); box-shadow: inset 0 0 0 1px var(--volt); }
.take-row__pick { display: flex; align-items: center; gap: 10px; flex: none; cursor: pointer; user-select: none; }
.take-radio { accent-color: var(--volt); width: 16px; height: 16px; flex: none; }
.take-row__n { font-size: .8rem; color: var(--muted); flex: none; }
.take-emotion { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #14110A; background: var(--volt); border-radius: 999px; padding: 3px 9px; flex: none; }
.take-emotion.is-neutral { color: var(--muted); background: transparent; border: 1px solid var(--line-2); font-weight: 400; }
.take-speed { color: var(--paper); background: var(--surface-2); border: 1px solid var(--line-2); font-weight: 700; }

/* ---- line speed slider (5 detents, middle = normal) ---- */
.speedctl { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 14px; }
.speedctl .seg-speed { appearance: auto; width: 96px; accent-color: var(--muted); cursor: pointer; margin: 0; }
.speedctl .seg-speed.is-off-normal { accent-color: var(--volt); }
.speedctl__label { font-size: .78rem; color: var(--muted); min-width: 86px; text-align: left; }

/* ---- final audio / export ---- */
.finalbar { margin-top: 26px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.finalbar__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.finalbar__hint { font-size: .8rem; color: var(--faint); }
.finalbar__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.export-err { color: var(--hot); }
.finalbar__result { display: flex; align-items: center; gap: 14px; margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.finalbar__result[hidden] { display: none; }
.finalbar__result .aplayer { flex: 1; }

.build-confirm { margin-top: 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 18px; }
.build-confirm[hidden] { display: none; }
.build-confirm__msg { margin: 0 0 12px; font-size: .95rem; line-height: 1.5; }
.build-confirm__cr { color: var(--volt); }
.build-confirm__check { display: flex; align-items: center; gap: 10px; font-size: .92rem; cursor: pointer; margin-bottom: 14px; user-select: none; }
.build-confirm__check input { accent-color: var(--volt); width: 17px; height: 17px; flex: none; }
.build-confirm__btns { display: flex; gap: 10px; justify-content: flex-end; }
.take-row__cost { font-size: .8rem; color: var(--faint); flex: none; }

/* casting call: watermark disclosure — deliberately unmissable */
.cast-notice { margin-top: 16px; padding: 12px 15px; border-radius: 11px; font-size: .9rem; line-height: 1.55; background: rgba(255,184,77,.1); border: 1px solid rgba(255,184,77,.45); color: #FFD9A3; }
.cast-notice b { color: #FFE7C7; }

/* casting call: audition board rows */
.cast-row { position: relative; }
.cast-star { flex: none; border: 0; background: transparent; color: var(--faint); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 2px 6px; transition: color .15s, transform .12s; }
.cast-star:hover { color: var(--volt); transform: scale(1.15); }
.cast-row.is-starred { border-color: var(--volt); }
.cast-row.is-starred .cast-star { color: var(--volt); }

/* broadcast-polish selector on the build bar */
.finalbar__polish { display: inline-flex; align-items: center; gap: 8px; }
.finalbar__polish label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.finalbar__polish .sel { display: inline-block; }
.finalbar__polish select { padding: 8px 30px 8px 12px; }

/* build history (BUILD 1, BUILD 2, … newest first) */
.builds { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.build-row { display: flex; align-items: center; gap: 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.build-row .aplayer { flex: 1; }
.build-row__pill { flex: none; font-size: .84rem; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.build-row__latest { display: none; flex: none; font-size: .82rem; letter-spacing: .06em; font-weight: 700; color: var(--ink); background: var(--volt); border-radius: 999px; padding: 3px 9px; }
.build-row.is-latest { border-color: var(--line-2); }
.build-row.is-latest .build-row__latest { display: inline-block; }
.build-row.is-latest .build-row__pill { color: var(--paper); border-color: var(--line-2); }
.build-row__date { flex: none; font-size: .8rem; color: var(--faint); }
@media (max-width: 700px) { .build-row { flex-wrap: wrap; } }

/* stacked variant (test lab): info on top, full-width player below */
.build-row--stacked { flex-wrap: wrap; }
.build-row--stacked .build-row__date { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-row--stacked .aplayer { flex: 1 1 100%; order: 10; margin-top: 2px; }

/* build progress bar (generating missing lines) */
.build-progress__track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.build-progress__fill { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 999px; transition: width .25s ease; }
.build-progress__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.build-progress__label { color: var(--muted); }
.build-progress__pct { color: var(--volt); font-weight: 700; font-size: 1.05rem; }
.build-progress__eta { color: var(--faint); font-size: .8rem; margin-top: 3px; }

/* custom audio player */
.aplayer { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.aplayer audio { display: none; }
.aplayer__toggle { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--hot); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: background .15s, transform .1s; }
.aplayer__toggle:hover { background: var(--hot-2); }
.aplayer__toggle:active { transform: scale(.92); }
.aplayer .ic-pause { display: none; }
.aplayer.is-playing .ic-play { display: none; }
.aplayer.is-playing .ic-pause { display: block; }
.aplayer__seek { position: relative; flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; cursor: pointer; min-width: 40px; }
.aplayer__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--grad); border-radius: 999px; }
.aplayer__time { font-size: .8rem; color: var(--muted); flex: none; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- pronunciation panel ---- */
/* ---- Project page header + collapsible reference ------------------------
   Three stacked panels used to fill the whole first screen before a single
   line of script appeared. One bar now carries the voice and the numbers, and
   the reference material sits behind two buttons, closed by default. */

/* Two distinct cards. The player is one thing, the size of the job is another,
   and sharing an outline made the credit total look like the cost of pressing
   play. A visible gap and separate borders keep them apart. */
.pbar-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.pcard { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 14px 18px; display: flex; align-items: center; }
.pcard--voice { gap: 12px; min-width: 0; border-left: 3px solid var(--hot); flex: 1 1 260px; }
.pcard--stats { gap: 10px 22px; flex-wrap: wrap; margin-left: auto; }
.pcard--voice .vplay { width: 38px; height: 38px; background: var(--hot); color: #fff; flex: none; }
.pbar__vname b { display: block; font-size: 1.02rem; line-height: 1.2; }
.pbar__vname .mono { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* Top-right actions: switch editors sits directly above the way out. */
.shead__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.shead__actions .modeswap { display: block; }
.pstat { display: flex; flex-direction: column; line-height: 1.15; }
.pstat b { font-size: 1.05rem; font-weight: 800; color: var(--paper); font-variant-numeric: tabular-nums; }
.pstat i { font-family: var(--font-mono); font-style: normal; font-size: .68rem; letter-spacing: .08em;
           text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.pstat--bal b { color: var(--volt); }

/* Toolbar. Squarer and heavier than a thin pill, so it reads as built rather
   than as a default outline button. */
.ptools { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.pdisc { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2);
         border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 11px;
         padding: 11px 16px; cursor: pointer; color: var(--paper);
         font-family: var(--font-body); font-size: .84rem; font-weight: 700; letter-spacing: .01em;
         transition: background .15s, border-color .15s, transform .08s; }
.pdisc:hover { background: #2C2140; border-color: var(--muted); }
.pdisc:active { transform: translateY(1px); }
.pdisc__ic { font-size: 1rem; line-height: 1; }
.pdisc__ar { color: var(--faint); font-size: .62rem; transition: transform .18s; margin-left: 1px; }
.pdisc[aria-expanded="true"] { background: var(--surface-2); border-color: var(--volt); color: var(--volt); }
.pdisc[aria-expanded="true"] .pdisc__ar { transform: rotate(180deg); color: var(--volt); }
.pdisc__n { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; background: var(--volt);
            color: #14110A; border-radius: 999px; padding: 2px 8px; }

.ppanel { margin-top: 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.ppanel__lead { font-size: 1rem; color: var(--paper); margin: 0 0 20px; line-height: 1.5; }

/* Each cue is a card with the cue on its own line and the plain-English
   meaning under it. The old layout put them side by side, so a long cue like
   "[speaking sadly, heavy and slow]" squeezed its description into a narrow
   column that wrapped after two words and looked broken. Stacking removes
   that failure mode completely: the description always gets the full width. */
.cueset + .cueset { margin-top: 22px; }
.cueset__t { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em;
             text-transform: uppercase; color: var(--faint); margin: 0 0 12px; line-height: 1; }
.cuegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.cuegrid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cue { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.cue__k { display: block; font-family: var(--font-mono); font-size: .88rem; font-weight: 600;
          color: var(--volt); line-height: 1.35; margin-bottom: 8px; overflow-wrap: anywhere; }
.cue__d { display: block; font-size: .97rem; color: #CFC9DE; line-height: 1.45; }

.ppanel__note { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
                font-size: .93rem; color: var(--muted); line-height: 1.65; }
.ppanel__note code { font-family: var(--font-mono); font-size: .86rem; color: var(--paper); overflow-wrap: anywhere; }
.ppanel__note--hi { border-top: 0; margin-top: 20px; padding: 16px 18px; border-radius: 12px;
                    background: color-mix(in srgb, var(--volt) 8%, transparent);
                    border-left: 3px solid var(--volt); color: var(--paper); }
.ppanel__more { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
                display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ppanel__morelbl { display: block; width: 100%; font-size: .7rem; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.ppanel__more code { font-family: var(--font-mono); font-size: .82rem; color: var(--muted);
                     background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }

.pron-hint { font-size: .8rem; color: var(--faint); }
.pron-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pron-empty { color: var(--faint); font-size: .8rem; }

/* ---- "you changed this, generate again before building" ---- */
.seg-staleflag { color: var(--volt); font-size: .72rem; letter-spacing: .04em;
                 align-self: center; white-space: nowrap; }
.seg-generate.is-stale { position: relative; animation: gen-glow 1.5s ease-in-out infinite; }
@keyframes gen-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 255, 76, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(236, 255, 76, .45), 0 0 18px 2px rgba(236, 255, 76, .5); }
}
/* Motion off: keep a steady ring so the signal survives without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .seg-generate.is-stale { animation: none; box-shadow: 0 0 0 2px var(--volt); }
}

/* ---- pause dropdown, with a fixed label so it says what it is ---- */
.pausectl, .emoctl { display: inline-flex; align-items: center; gap: 8px; }
.pausectl__l, .emoctl__l { font-family: var(--font-mono); font-size: .72rem; color: var(--faint);
               white-space: nowrap; }
.editor--regular .emoctl__l, .seg.sline .emoctl__l { font-size: .74rem; }

/* ---- earlier versions of a line, hidden on the regular page ---- */
.takes-more { color: var(--faint); font-size: .78rem; margin: 8px 0 0; }
.takes-more a { color: var(--volt); text-decoration: underline; text-underline-offset: 3px; }
.modeswap { display: contents; }

/* ---- which way of working they picked, shown on the script form ---- */
.chosen-mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
               margin-top: 12px; padding: 11px 15px; border-radius: 12px;
               background: var(--surface); border: 1px solid var(--line-2); }
.chosen-mode--regular  { border-color: rgba(236,255,76,.34); }
.chosen-mode--advanced { border-color: rgba(255,107,142,.36); }
.chosen-mode__k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.chosen-mode--regular  .chosen-mode__k { color: var(--volt); }
.chosen-mode--advanced .chosen-mode__k { color: var(--hot-2); }
.chosen-mode__d { color: var(--muted); font-size: .88rem; }
.chosen-mode a { margin-left: auto; color: var(--faint); font-size: .8rem; }
.chosen-mode a:hover { color: var(--paper); }

/* ---- reading style, changeable after the project is made ---- */
.stylepick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.stylepick__what { color: var(--volt-2); letter-spacing: .04em; }
.stylepick__all { display: flex; align-items: center; gap: 10px; margin-top: 14px;
                  color: var(--muted); font-size: .92rem; cursor: pointer; }
.stylepick__all input { accent-color: var(--volt); width: 16px; height: 16px; flex: none; }
.stylepick__go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.stylepick__go .mono { color: var(--faint); }
.pron-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .84rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 8px 6px 12px; color: var(--paper); }
.pron-chip b { color: var(--volt); font-weight: 600; }
.pron-chip__x { border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: .8rem; line-height: 1; padding: 2px 5px; border-radius: 50%; }
.pron-chip__x:hover { color: var(--hot); }

/* selectable script text */
.seg__text { cursor: text; }
.seg__text::selection { background: rgba(236,255,76,.35); }

/* ---- nudge popover (highlight → nuance) ---- */
.nudge { position: absolute; z-index: 60; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.7); padding: 8px; }
.nudge[hidden] { display: none; }
.nudge__btn { border: 0; background: transparent; color: var(--paper); font-family: var(--font-body); font-weight: 600; font-size: .9rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.nudge__btn:hover { background: var(--surface); color: var(--volt); }
.nudge__form { display: flex; flex-direction: column; gap: 10px; padding: 6px; width: 300px; }
.nudge__label { font-size: .92rem; }
.nudge__input { font-family: var(--font-mono); font-size: .95rem; color: var(--paper); background: var(--ink-2); border: 1.5px solid var(--line-2); border-radius: 9px; padding: 10px 12px; }
.nudge__input:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 4px rgba(255,61,110,.18); }
.nudge__ex { font-size: .84rem; color: var(--faint); line-height: 1.5; }
.nudge__actions { display: flex; justify-content: flex-end; gap: 8px; }
.nudge__menu { display: flex; flex-direction: column; min-width: 210px; }
.nudge__menu .nudge__btn { text-align: left; width: 100%; }
.nudge__btn--remove { color: var(--hot-2); }
.nudge__btn--remove:hover { color: var(--hot); }

/* delivery palette (one-click audio tags) */
.nudge__deliver { display: flex; flex-flow: row wrap; gap: 6px; max-width: 264px; }
.nudge__hd { width: 100%; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); padding: 2px 2px 4px; }
.nudge__chip { border: 1px solid var(--line-2); background: var(--ink-2); color: var(--paper); font-family: var(--font-mono); font-size: .84rem; cursor: pointer; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.nudge__chip:hover { border-color: var(--hot); color: var(--volt); background: var(--surface); }

/* inline line editing (edit like a document) */
.seg__text { cursor: text; border-radius: 8px; margin: 0 -8px; padding: 0 8px; transition: background .15s; }
.seg__text:hover { background: rgba(255,255,255,.04); }
.seg__text[hidden] { display: none; }
.seg__editwrap { margin: 2px 0 14px; }
.seg__edit { width: 100%; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: var(--paper); background: var(--ink-2); border: 1.5px solid var(--hot); border-radius: 11px; padding: 12px 14px; resize: none; overflow: hidden; min-height: 52px; }
.seg__edit:focus { outline: none; box-shadow: 0 0 0 4px rgba(255,61,110,.15); }
.seg__edittools { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.seg__edithint { color: var(--faint); font-size: .8rem; }

/* AI Auto-Director modal */
.dmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,3,10,.72); }
.dmodal[hidden] { display: none; }
.dmodal__card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 24px; width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px -16px rgba(0,0,0,.8); }
.dmodal__title { margin: 0 0 6px; font-size: 1.15rem; }
.dmodal__sub { margin: 0 0 16px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.dmodal__list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 0 -4px 16px; padding: 4px; }
.drow { display: flex; gap: 12px; align-items: flex-start; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.drow:hover { border-color: var(--line-2); }
.drow__chk { margin-top: 3px; accent-color: var(--volt); width: 17px; height: 17px; flex: none; }
.drow__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.drow__n { font-size: .82rem; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.drow__old { color: var(--faint); font-size: .82rem; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.22); }
.drow__new { color: var(--paper); font-size: .95rem; line-height: 1.5; }
.dtag { color: var(--volt); font-weight: 700; font-family: var(--font-mono); font-size: .85em; }
.dmodal__btns { display: flex; gap: 10px; justify-content: flex-end; }

/* delivery cheatsheet panel */
.deliver-guide { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.deliver-guide__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.deliver-guide__head h3 { font-family: var(--font-display, inherit); font-size: 1rem; margin: 0; }
.deliver-guide__hint { color: var(--faint); font-size: .84rem; }
.deliver-guide__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 22px; }
.deliver-row { display: flex; gap: 12px; align-items: baseline; font-size: .86rem; padding: 3px 0; }
.deliver-row code { font-family: var(--font-mono); color: var(--volt); background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-size: .82rem; white-space: nowrap; flex: none; }
.deliver-row span { color: var(--muted); }
.deliver-guide__ex { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); line-height: 1.6; }
.deliver-guide__ex code { font-family: var(--font-mono); color: var(--paper); }

/* Auto-Director intensity chooser (setup step in the modal) */
.dsetup__opts { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 18px; }
.dopt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.dopt:hover { border-color: var(--line-2); }
.dopt input { accent-color: var(--volt); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.dopt__body { display: flex; flex-direction: column; gap: 3px; }
.dopt__t { font-weight: 700; }
.dopt__d { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.dopt input:checked + .dopt__body .dopt__t { color: var(--volt); }

/* inline nuance markers in the script text */
.seg__text mark { background: transparent; color: inherit; }
.nz-em { color: var(--volt); font-weight: 700; text-shadow: 0 0 14px rgba(236,255,76,.4); }
.nz-pron { text-decoration: underline dotted var(--hot); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.nz-pron-say { color: #37D98A; font-size: .72em; font-weight: 700; margin-left: 5px; letter-spacing: .01em; }
.nz-pause { color: var(--hot); font-weight: 700; padding: 0 2px; }
.seg-clear[hidden] { display: none; }

/* ---- project list (dashboard) ---- */
.proj-list { display: flex; flex-direction: column; gap: 10px; }
.proj-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 14px 18px; transition: border-color .15s, background .15s; }
.proj-row:hover { border-color: var(--line-2); background: var(--surface-2); }
.proj-row__link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.proj-row__delform { margin: 0; flex: none; }
.proj-row__del { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1; }
.proj-row__del:hover { border-color: var(--hot); color: var(--hot); }
.proj-row__archive { flex: none; }
.proj-row--archived { opacity: .72; }
.proj-row--archived:hover { opacity: 1; }
.proj-row__title { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-row__meta { color: var(--muted); font-size: .8rem; flex: none; }
.proj-row__date { color: var(--faint); font-size: .78rem; white-space: nowrap; flex: none; }

/* projects header: sort control sits beside "+ New project" */
.shead__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.proj-sort { display: inline-flex; align-items: center; gap: 9px; }
.proj-sort label { color: var(--faint); font-size: .8rem; }
.proj-sort .sel { width: 150px; }

/* below ~560px the created date would crowd the row — drop it, keep it in the tooltip-free flow on wider screens */
@media (max-width: 560px) {
  .proj-row__date { display: none; }
}
.proj-row__status { text-transform: capitalize; }
.proj-row__status--in_progress { color: #14110A; background: var(--volt); border-color: var(--volt); font-weight: 700; }
.proj-row__status--completed { color: #0C1A10; background: var(--good); border-color: var(--good); font-weight: 700; }
.proj-row__status--archived { color: var(--faint); }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding-block: 40px; color: var(--faint); margin-top: auto; }
.foot__in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot .brand { font-size: 1.1rem; }
.foot__links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot__links a { color: var(--muted); font-size: .88rem; }
.foot__links a:hover { color: var(--paper); }

/* ---- reveal-on-load (only hides content when JS is present) ---- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Voice cloning — "your voices" cards + create-your-voice page
   ============================================================ */
/* header buttons: keep their own text colour (the generic `.shead a` volt rule
   is only meant for plain text links like "← Voices"). */
.shead a.btn--volt { color: #14110A; }
.shead a.btn--hot { color: #fff; }
.shead a.btn--ghost { color: var(--paper); }

.myvoices { margin-top: 24px; }
.myvoices__hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }

/* client's own voice card + the "add" card */
.vcard--mine { border-color: var(--line-2); }
.vcard--mine .vcard__lang { color: var(--volt); }
.vcard__delform { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
.vcard__del { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1; }
.vcard__del:hover { border-color: var(--hot); color: var(--hot); }
.vcard--add { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; text-decoration: none; border-style: dashed; border-color: var(--line-2); color: var(--paper); min-height: 200px; }
.vcard--add:hover { border-color: var(--volt); }
.vcard--add__plus { font-size: 2rem; color: var(--volt); line-height: 1; }
.vcard--add__t { font-family: var(--font-display, inherit); font-size: 1.15rem; }
.vcard--add__d { font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* create-your-voice page — script left, recorder + confirm right (sticky),
   so the record button and the whole script share one screen. */
.clone-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 20px; }
.clone-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
@media (max-width: 920px) { .clone-layout { grid-template-columns: 1fr; } .clone-side { position: static; } }
.clone-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.clone-card__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.clone-card__hd h2 { font-size: 1.15rem; margin: 0; }
.clone-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: var(--ink); font-weight: 800; font-size: .95rem; flex: none; }
.clone-hint { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 6px 0 0; }

.read-script { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.read-line { display: flex; gap: 14px; align-items: baseline; padding: 10px 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; }
.read-cue { flex: none; width: 156px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hot); line-height: 1.35; padding-top: 2px; }
.read-text { font-size: 1rem; line-height: 1.5; }
.read-pause { color: var(--faint); font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
@media (max-width: 700px) { .read-line { flex-direction: column; gap: 4px; } .read-cue { width: auto; } }

/* mic settings — device picker, input gain, live level meter */
.micset { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; }
.micset__row { display: flex; align-items: center; gap: 12px; }
.micset__label { flex: none; width: 100px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.micset__sel { flex: 1; min-width: 0; }
.micset__sel select { width: 100%; }
.micset__val { flex: none; width: 52px; text-align: right; font-size: .8rem; color: var(--paper); }
#gain-slider { flex: 1; min-width: 0; accent-color: var(--hot); cursor: pointer; }
#gain-slider:disabled { opacity: .4; cursor: default; }
.meter { position: relative; flex: 1; height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #37D98A; border-radius: 999px; transition: width .06s linear; }
.meter__fill.is-hot { background: #FFC24C; }
.meter__fill.is-clip { background: var(--hot); }
.meter__peak { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(255,255,255,.85); }

/* --- 80s LED ladder input meter (dB-scaled; a correct level sits toward the right) --- */
.vumeter { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vumeter__row { display: flex; gap: 2px; height: 22px; padding: 3px; border-radius: 4px;
  background: linear-gradient(#0a0c0f, #14171c); border: 1px solid #000;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05); }
.vu-led { flex: 1; border-radius: 1px; background: #191c21;
  box-shadow: inset 0 0 1px rgba(0,0,0,.8); transition: background .05s linear, box-shadow .05s linear; }
.vu-led--green { background: #12251a; }
.vu-led--amber { background: #2a2410; }
.vu-led--red   { background: #2a1210; }
.vu-led.is-on.vu-led--green { background: #3ce07d; box-shadow: 0 0 6px #3ce07d, inset 0 0 2px #c4ffd8; }
.vu-led.is-on.vu-led--amber { background: #ffb020; box-shadow: 0 0 6px #ffb020, inset 0 0 2px #ffe4a6; }
.vu-led.is-on.vu-led--red   { background: #ff3b30; box-shadow: 0 0 7px #ff3b30, inset 0 0 2px #ffb4af; }
.vu-led.is-peak.vu-led--green { background: #1f7a46; box-shadow: 0 0 4px rgba(60,224,125,.5); }
.vu-led.is-peak.vu-led--amber { background: #8a5f12; box-shadow: 0 0 4px rgba(255,176,32,.5); }
.vu-led.is-peak.vu-led--red   { background: #8a2420; box-shadow: 0 0 4px rgba(255,59,48,.5); }
.vumeter__scale { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .04em;
  color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
.vumeter__scale i { font-style: normal; }
.micset__hint { font-size: .8rem; color: var(--faint); line-height: 1.55; margin: 0; }

.clone-player { margin-top: 14px; display: flex; }
.clone-player[hidden] { display: none; }
.clone-player .aplayer { flex: 1; }

.rec { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.rec-btn { border: 0; border-radius: 999px; background: var(--hot); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: .95rem; padding: 12px 24px; cursor: pointer; white-space: nowrap; flex: none; }
.rec-btn:hover { background: var(--hot-2); }
.rec-btn.is-recording { background: #fff; color: var(--hot); box-shadow: 0 0 0 4px rgba(255,61,110,.25); animation: recpulse 1.2s ease-in-out infinite; }
.rec-btn:disabled { opacity: .5; cursor: default; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 10px rgba(255,61,110,0); } }
.rec-timer { font-size: 1.05rem; color: var(--paper); }
.rec-status { font-size: .82rem; color: var(--muted); }
.clone-upload { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.clone-upload__or { color: var(--faint); font-size: .8rem; }

/* professional clone wizard */
.pvc-intro { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 18px 0 4px; max-width: 640px; }
.pvc-total { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.pvc-total b { color: var(--volt); font-size: 1.05rem; }
.pvc-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pvc-file { font-size: .8rem; color: var(--paper); background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.pvc-captcha { margin-top: 14px; background: #fff; border-radius: 12px; padding: 14px; }
.pvc-captcha img { display: block; width: 100%; height: auto; }
.pvc-training { margin-top: 14px; color: var(--volt); font-size: .85rem; animation: pvcpulse 1.6s ease-in-out infinite; }
@keyframes pvcpulse { 50% { opacity: .35; } }

.clone-idrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.clone-idrow .field { margin: 0; }
.clone-idhint { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
.clone-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .9rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.clone-consent input { accent-color: var(--volt); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.clone-msg { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.clone-msg--err { color: #ffb3c6; }

/* ---- one delivery per line ----
   Replaces the six-item emotion dropdown. A select made a client choose from
   words with no explanation; this opens a short list where every option says
   what it gives you. */
.cuebtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.84rem;
  font-weight:700;padding:9px 13px;border-radius:10px;cursor:pointer;color:var(--paper);
  background:var(--surface-2);border:1px solid var(--line-2);border-bottom-width:2px;
  transition:background .15s,border-color .15s}
.cuebtn:hover:not(:disabled){background:#2C2140;border-color:#B28CFF}
.cuebtn:disabled{opacity:.5;cursor:default}
.cuebtn.is-set{background:color-mix(in srgb,#B28CFF 18%,transparent);border-color:color-mix(in srgb,#B28CFF 50%,transparent);color:#B28CFF}
.cuebtn__ic{font-size:.95rem;line-height:1}
.cuebtn__x{opacity:.6;font-size:.75rem;margin-left:1px}
.cuebtn__x:hover{opacity:1}

/* the sheet of ten */
.cuesheet{position:absolute;z-index:60;width:min(560px,calc(100vw - 32px));padding:15px;border-radius:14px;
  background:var(--ink-2);border:1px solid var(--line-2);box-shadow:0 18px 46px rgba(0,0,0,.55)}
.cuesheet__hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.cuesheet__hd .lbl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cuescale{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cuescale i{flex:1;height:4px;border-radius:99px;background:linear-gradient(90deg,#3C3350,#B28CFF,var(--hot))}
.cuescale span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cuegrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.cueopt{display:block;text-align:left;font-family:var(--font-body);font-size:.88rem;font-weight:700;
  padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--paper);
  background:var(--surface);border:1px solid var(--line);border-bottom-width:2px}
.cueopt small{display:block;font-weight:400;font-size:.72rem;color:var(--faint);margin-top:3px;line-height:1.35}
.cueopt:hover{background:var(--surface-2);border-color:#B28CFF}
.cueopt:hover small{color:var(--muted)}
.cueopt.is-on{background:color-mix(in srgb,#B28CFF 22%,transparent);border-color:#B28CFF;color:#B28CFF}
.cueopt.is-on small{color:color-mix(in srgb,#B28CFF 80%,white)}
.cueopt--none{grid-column:1/-1;text-align:center;font-weight:400;color:var(--faint);padding:8px}
.cueown{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:11px;border-top:1px solid var(--line)}
.cueown input{flex:1;min-width:190px;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;
  padding:9px 12px;color:var(--paper);font:inherit;font-size:.84rem}
.cueown button{font-family:var(--font-body);font-size:.8rem;font-weight:700;padding:9px 14px;border-radius:9px;
  cursor:pointer;background:var(--volt);border:1px solid var(--volt);color:#14110A}
.cuesheet__err{margin-top:9px;font-size:.78rem;color:var(--hot)}

/* which cue made a take */
.take-cue{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,#B28CFF 16%,transparent);color:#B28CFF;
  border:1px solid color-mix(in srgb,#B28CFF 40%,transparent);white-space:nowrap}

/* ============================================================
   REGULAR (Studio) editor — the calm, easy-to-read layout.
   Scoped entirely under .editor--regular, so Advanced is untouched.
   Same markup and same editor.js underneath; only the look changes.
   ============================================================ */

/* ---- the script cover (slate) ---- */
.slate{
  position:relative;margin-top:22px;padding:24px clamp(18px,3vw,26px) 20px;
  background:#050409;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;
  box-shadow:0 22px 48px rgba(0,0,0,.5);
}
.slate::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(96deg,var(--hot) 0%,#FF8A4C 48%,var(--volt) 100%);}
.slate__k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--hot-2);}
.slate__top{display:flex;align-items:center;gap:13px;margin-top:12px;}
.slate__play{width:40px;height:40px;background:var(--hot);color:#fff;flex:none;}
.slate__voice{min-width:0;flex:1 1 auto;}
.slate__voice b{display:block;font-size:1.05rem;line-height:1.2;}
.slate__voice .mono{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;}
.slate__bal{display:flex;flex-direction:column;align-items:flex-end;flex:none;}
.slate__bal b{font-family:var(--font-mono);font-size:1.05rem;color:var(--volt);font-variant-numeric:tabular-nums;line-height:1;}
.slate__bal i{font-family:var(--font-mono);font-style:normal;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:5px;}
.slate__rule{height:0;border-top:1px solid rgba(255,255,255,.20);border-bottom:1px solid rgba(255,255,255,.07);margin:18px 0 0;padding-top:3px;}
.slate__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px 22px;margin:16px 0 0;}
.slate__grid dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.slate__grid dd{margin:4px 0 0;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;}

/* ---- tools row, quieter in regular ---- */
.editor--regular .ptools{margin-top:18px;}

/* ---- the lines ---- */
.editor--regular .segs{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.editor--regular .seg{padding:22px clamp(16px,2.5vw,24px);border-radius:16px;}
.editor--regular .seg[data-stale="1"]{border-color:rgba(236,255,76,.3);}
.editor--regular .seg__head{margin-bottom:2px;}
.editor--regular .seg__num{font-size:.66rem;letter-spacing:.16em;}
.editor--regular .seg-meta{font-size:.68rem;}
/* the words: the thing you actually read, so give them room and size */
.editor--regular .seg__text{font-size:1.32rem;line-height:1.55;margin:12px 0 2px;}
.editor--regular .seg__edit{font-size:1.2rem;}

/* controls: no hard divider, quieter buttons, airier */
.editor--regular .seg__controls{border-top:0;padding-top:14px;margin-top:8px;gap:10px;}
.editor--regular .seg-edit{border-radius:9px;}
.editor--regular .cuebtn{border-radius:999px;padding:7px 14px;}
.editor--regular .pausectl__l{font-size:.74rem;}
.editor--regular .seg-pause{padding:7px 30px 7px 12px;}

/* the one control that spends money: dark, with the accent only on the cost,
   the Option F treatment chosen for the mock */
.editor--regular .seg-generate{
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--paper);
  font-weight:650;border-radius:9px;padding:8px 15px;
}
.editor--regular .seg-generate:hover{border-color:var(--volt);background:#2B2140;}
.editor--regular .seg-generate.is-stale{border-color:var(--volt);}

/* takes sit quietly under the line */
.editor--regular .take-row{border-radius:12px;}

/* ---- the finish panel ---- */
.editor--regular .finalbar{
  margin-top:32px;padding:24px clamp(18px,3vw,28px);border-radius:18px;
  background:var(--surface);border:1px solid var(--line-2);
}
.editor--regular .finalbar__head{margin-bottom:18px;}
.editor--regular .finalbar .eyebrow{font-size:.72rem;}

/* on a phone the controls stack instead of crowding */
@media (max-width:620px){
  .editor--regular .seg__controls{gap:8px;}
  .editor--regular .seg__text{font-size:1.18rem;}
  .slate__grid{grid-template-columns:repeat(2,1fr);}
}

/* Take rows on a phone: the label, badges and player would overflow in one
   row, so let them wrap and give the player its own line. Applies to both
   editors, since the take row is shared. */
@media (max-width:620px){
  .take-row{flex-wrap:wrap;}
  .take-row__pick{flex-wrap:wrap;min-width:0;}
  .take-row .aplayer{flex:1 1 100%;order:5;}
  .take-row__cost{margin-left:auto;}
}

/* The built-audio row wraps on a phone too, same reasoning as the take rows. */
@media (max-width:620px){
  .build-row{flex-wrap:wrap;}
  .build-row .aplayer{flex:1 1 100%;order:5;margin-top:4px;}
  .build-row .btn{margin-left:auto;}
}

/* ---- Studio line: the script-row layout from the mockup ----
   Three columns — who, the words with tags beneath, the paid action on a
   rail — instead of Advanced's stacked control strip. Same elements inside,
   arranged like a table read. */
.editor--regular .segs{gap:2px;}
.seg.sline{padding:18px 16px 18px 12px;border-radius:14px;border:1px solid transparent;
  background:var(--surface);position:relative;}
.seg.sline:hover{background:var(--surface-2);}
.seg.sline::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--good);}
.seg.sline[data-stale="1"]::before{background:var(--volt);}

.sline__grid{display:grid;grid-template-columns:158px minmax(0,1fr) auto;gap:0 22px;align-items:start;}
.sline__lead{display:flex;align-items:center;gap:11px;padding-top:2px;min-width:0;}
.sline__av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.9rem;color:#12100A;background:var(--hot);}
.sline__who{min-width:0;}
.sline__who b{display:block;font-size:.92rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sline__who i{display:block;font-style:normal;font-size:.62rem;letter-spacing:.08em;color:var(--faint);margin-top:2px;}

/* the words: the biggest thing on the row */
.editor--regular .seg.sline .seg__text{font-size:1.3rem;line-height:1.52;margin:0;color:var(--paper);}
.sline__tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;}

/* the rail holds the one action that costs money */
.sline__rail{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;}
.sline__cost{font-size:.68rem;color:var(--faint);white-space:nowrap;}
.sline__rail .seg-generate{
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--paper);
  font-weight:650;border-radius:9px;padding:8px 15px;white-space:nowrap;
}
.sline__rail .seg-generate:hover{border-color:var(--volt);background:#2B2140;}
.sline__rail .seg-generate.is-stale{border-color:var(--volt);}

/* tags in the studio row: quiet pills */
.seg.sline .cuebtn{border-radius:999px;padding:7px 13px;}
.seg.sline .pausectl__l{font-size:.72rem;}
.seg.sline .seg-pause{padding:6px 28px 6px 11px;}

/* takes sit under the whole grid, indented to line up with the words */
.editor--regular .seg.sline .takes-list{margin-left:180px;margin-top:14px;}
.editor--regular .seg.sline .seg-error{margin-left:180px;}

@media (max-width:720px){
  .sline__grid{grid-template-columns:minmax(0,1fr);gap:10px;}
  .sline__lead{order:-1;}
  .sline__rail{flex-direction:row;align-items:center;justify-content:space-between;width:100%;}
  .editor--regular .seg.sline .takes-list,
  .editor--regular .seg.sline .seg-error{margin-left:0;}
  .editor--regular .seg.sline .seg__text{font-size:1.16rem;}
}

/* ---- per-line Undo and Delete ---- */
.seg-undo{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--paper);background:rgba(255,255,255,.05);
  font-size:.82rem;font-weight:600;white-space:nowrap;
}
.seg-undo:hover{border-color:var(--volt);color:var(--volt-2);background:rgba(236,255,76,.08);}
.seg-menu{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  border:1px solid transparent;color:var(--faint);font-size:1.15rem;line-height:1;background:transparent;
}
.seg-menu:hover{color:var(--paper);border-color:var(--line-2);background:rgba(255,255,255,.06);}

/* the ⋮ menu itself */
.linemenu{position:absolute;z-index:80;min-width:190px;padding:6px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.6);
  display:flex;flex-direction:column;}
.linemenu button{padding:9px 11px;border-radius:8px;text-align:left;font-size:.92rem;color:var(--paper);}
.linemenu button:hover{background:rgba(255,255,255,.07);}
.linemenu__del{color:var(--hot-2);}
.linemenu__del:hover{background:rgba(255,61,110,.14);}

/* delete confirmation popover */
.delpop{
  position:absolute;z-index:80;min-width:250px;max-width:320px;padding:15px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.delpop__t{margin:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.delpop__q{margin:6px 0 0;font-size:.95rem;color:var(--paper);line-height:1.4;overflow-wrap:break-word;}
.delpop__w{margin:10px 0 0;padding:9px 11px;border-radius:9px;font-size:.82rem;line-height:1.45;
  background:rgba(255,184,77,.08);border:1px solid rgba(255,184,77,.3);color:var(--muted);}
.delpop__acts{display:flex;gap:9px;justify-content:flex-end;margin-top:15px;}
.delpop__keep,.delpop__del{padding:9px 15px;border-radius:9px;font-size:.88rem;white-space:nowrap;}
.delpop__keep{background:var(--paper);color:var(--ink);font-weight:650;}
.delpop__keep:hover{background:#fff;}
.delpop__del{border:1px solid var(--hot);color:var(--hot-2);}
.delpop__del:hover{background:var(--hot);border-color:var(--hot);color:#fff;}

/* ---- Studio "Finish your project" 3-step panel ---- */
.finish__h{font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 18px;}
.finish__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.finish__step{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border-radius:13px;
  background:var(--ink-2);border:1px solid var(--line);}
.finish__step.is-done{border-color:rgba(55,217,138,.32);background:rgba(55,217,138,.05);}
.finish__n{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.85rem;color:var(--faint);border:1px solid var(--line-2);}
.finish__step.is-done .finish__n{background:var(--good);border-color:var(--good);color:#0A1710;font-weight:700;}
.finish__t{min-width:0;flex:1 1 auto;}
.finish__t b{display:block;font-size:1rem;}
.finish__t > span{display:block;font-size:.87rem;color:var(--faint);margin-top:2px;}
.finish__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;}

/* ---- multi-voice: speaker avatar, cast strip, voice picker ---- */
/* the line avatar is a button now (click to change the voice) */
.sline__av.seg-speaker{border:0;padding:0;cursor:pointer;position:relative;}
.sline__av.seg-speaker:hover{box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.sline__av.seg-speaker::after{content:"▾";position:absolute;right:-2px;bottom:-3px;font-size:.6rem;
  color:var(--paper);background:var(--ink-2);border-radius:50%;width:13px;height:13px;
  display:grid;place-items:center;border:1px solid var(--line-2);}

/* cast strip on the slate */
.slate__cast{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);}
.slate__castk{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.castchip{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);}
.castchip__av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.72rem;color:#12100A;}
.castchip__n{font-size:.88rem;font-weight:600;line-height:1.15;}
.castchip__m{display:block;font-size:.6rem;letter-spacing:.04em;color:var(--faint);font-weight:400;}
.castadd{padding:7px 14px;border:1px dashed rgba(255,255,255,.28);border-radius:999px;color:var(--muted);font-size:.83rem;background:transparent;}
.castadd:hover{border-color:var(--volt);color:var(--volt);}

/* the voice picker popover */
.voicepick{position:absolute;z-index:85;width:288px;max-width:calc(100vw - 24px);padding:12px;
  border-radius:13px;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.6);}
.voicepick__q{width:100%;padding:10px 12px;border-radius:9px;background:var(--ink);border:1px solid var(--line-2);
  color:var(--paper);font:inherit;font-size:.9rem;}
.voicepick__q:focus{outline:none;border-color:var(--volt);}
.voicepick__list{margin-top:10px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.voicepick__h{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:2px 0 4px;}
.voicepick__v{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 11px;border-radius:9px;text-align:left;width:100%;}
.voicepick__v:hover{background:rgba(255,255,255,.07);}
.voicepick__n{font-size:.92rem;font-weight:600;}
.voicepick__m{font-size:.66rem;color:var(--faint);}
.voicepick__none{color:var(--faint);font-size:.86rem;padding:10px 4px;}

/* ============================================================
   LANDING PAGE / SALES FUNNEL
   ============================================================ */

.lp-hero{padding-bottom:clamp(48px,7vw,88px);}
/* trust points under the hero CTA */
.trustrow{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:30px;padding:0;}
.trustrow li{position:relative;padding-left:22px;font-size:.9rem;color:var(--muted);}
.trustrow li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%;
  background:var(--grad);}

/* ---- the live demo widget ---- */
.demo{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;
  padding:clamp(18px,2.4vw,26px);box-shadow:0 30px 80px -40px rgba(0,0,0,.9);align-self:start;}
.demo__bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;}
.demo__k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hot);}
.demo__tries{font-size:.72rem;color:var(--faint);}
.demo__lbl{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;}
.demo__hint{color:var(--faint);opacity:.7;text-transform:none;letter-spacing:0;font-size:.66rem;margin-left:6px;}
.demo__hint::before{content:"· ";}
.demo__script{background:var(--ink-2);border:1px solid var(--line-2);border-radius:12px;
  padding:16px 16px;font-size:1.28rem;line-height:1.4;color:var(--paper);min-height:2.4em;
  font-family:var(--font-body);transition:border-color .15s;}
.demo__script:focus{outline:none;border-color:var(--volt);box-shadow:0 0 0 3px rgba(236,255,76,.14);}
.demo__script:empty::before{content:"Type your line…";color:var(--faint);}
.demo__meta{display:flex;justify-content:flex-end;margin-top:8px;font-size:.74rem;color:var(--faint);}
.demo__meta .is-over{color:var(--hot);}
.demo__pick{display:flex;align-items:flex-start;gap:12px;margin-top:16px;}
.demo__pk{flex:none;width:44px;padding-top:8px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;}
.stylechip{padding:8px 15px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--muted);font-weight:600;font-size:.86rem;cursor:pointer;transition:.14s;}
.stylechip:hover{border-color:var(--paper);color:var(--paper);}
.stylechip.is-on{background:var(--volt);border-color:var(--volt);color:#14110A;}
.voicechip{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--paper);cursor:pointer;transition:.14s;}
.voicechip:hover{border-color:var(--paper);}
.voicechip.is-on{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot) inset;}
.voicechip__av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.74rem;color:#12100A;}
.voicechip__n{display:flex;flex-direction:column;line-height:1.1;text-align:left;}
.voicechip__n b{font-size:.86rem;font-weight:650;}
.voicechip__n i{font-size:.62rem;color:var(--faint);font-style:normal;}
.demo__go{margin-top:20px;}
.demo__status{min-height:1.2em;margin-top:10px;font-size:.82rem;color:var(--muted);text-align:center;}
.demo__status.is-busy{color:var(--volt);}
.demo__status.is-busy::after{content:"";display:inline-block;width:1em;text-align:left;animation:dots 1.2s steps(4,end) infinite;}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* the compact player that appears after a generation */
.demo__player{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;}
.demo__play{width:42px;height:42px;flex:none;border-radius:50%;border:none;cursor:pointer;
  background:var(--hot);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px -10px var(--hot);}
.demo__play .ic-pause{display:none;}
.demo__player.is-playing .ic-play{display:none;}
.demo__player.is-playing .ic-pause{display:block;}
.demo__seek{flex:1;height:8px;border-radius:999px;background:var(--surface-2);cursor:pointer;overflow:hidden;}
.demo__fill{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .08s linear;}
.demo__time{flex:none;font-size:.78rem;color:var(--muted);min-width:34px;text-align:right;}

/* ---- the register wall ---- */
body.wall-open{overflow:hidden;}
.wall{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(8,6,12,.72);backdrop-filter:blur(6px);}
.wall__card{width:min(520px,100%);background:var(--surface);border:1px solid var(--line-2);
  border-radius:22px;padding:clamp(26px,4vw,42px);box-shadow:0 40px 120px -30px rgba(0,0,0,.9);}
.wall__list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;}
.wall__list li{position:relative;padding-left:26px;color:var(--muted);}
.wall__list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--volt);font-weight:700;}
.wall__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* ---- benefits grid ---- */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:.16s;}
.bcard:hover{border-color:var(--line-2);transform:translateY(-3px);}
.bcard__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--surface-2);font-size:1.3rem;margin-bottom:14px;}
.bcard h3{font-size:1.28rem;margin-bottom:8px;}
.bcard p{color:var(--muted);font-size:.94rem;}

/* ---- marquee feature rows ---- */
.frow{display:grid;gap:28px;align-items:center;margin-top:56px;}
.frow:first-child{margin-top:0;}
@media(min-width:900px){
  .frow{grid-template-columns:1fr 1fr;gap:48px;}
  .frow--flip .frow__copy{order:2;}
}
.flink{display:inline-block;margin-top:18px;color:var(--volt);font-weight:700;font-size:.92rem;}
/* the "app window" product shots, recreated from real editor UI */
.shot{background:var(--ink-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);}
.shot__bar{display:flex;align-items:center;gap:6px;padding:11px 15px;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:.7rem;color:var(--faint);}
.shot__dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);}
.shot__dot:first-child{background:var(--hot);}
.shot__cast{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line);}
.shot__castk{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-right:2px;}
.castmini{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.82rem;font-weight:600;}
.castmini__av,.shotline__av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.68rem;color:#12100A;}
.shotline{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);}
.shotline:last-child{border-bottom:none;}
.shotline__b{flex:1;display:flex;flex-direction:column;line-height:1.25;}
.shotline__b b{font-size:.8rem;}
.shotline__b span{color:var(--muted);font-size:1.02rem;}
.shotline__tag{font-size:.72rem;color:var(--faint);flex:none;}
.shot__line{padding:16px 16px 6px;font-size:1.02rem;color:var(--paper);}
.shot__line .hl{background:rgba(236,255,76,.22);border-radius:4px;padding:0 3px;font-family:var(--font-body);}
.shot__chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 4px;}
.shotchip{padding:6px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--muted);font-size:.8rem;font-weight:600;}
.shotchip.is-on{background:var(--volt);border-color:var(--volt);color:#14110A;}
.shot__wave{padding:14px 16px 18px;}
.shot__wave [data-wave]{display:flex;align-items:flex-end;gap:3px;height:46px;}
.shot__wave [data-wave] i{flex:1;min-width:2px;border-radius:2px;background:var(--grad);opacity:.85;}
.shot__pron{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;}
.pronmini{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);font-size:.86rem;}
.pronmini b{font-weight:650;}
.pronmini__x{color:var(--faint);font-size:.72rem;}
.shot__note{padding:2px 16px 16px;color:var(--faint);font-size:.74rem;}

/* ---- comparison table ---- */
.ctable{margin-top:14px;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;}
.ctable__head,.ctable__row{display:grid;grid-template-columns:1.4fr 1.3fr 1.3fr;align-items:center;}
.ctable__head{background:var(--surface);border-bottom:1px solid var(--line-2);}
.ctable__head span{padding:14px 16px;font-size:.82rem;}
.ctable__us{font-weight:700;color:var(--paper);}
.ctable__head .ctable__us{position:relative;}
.ctable__head .ctable__us::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);}
.ctable__head .ctable__them{color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;}
.ctable__row{border-bottom:1px solid var(--line);}
.ctable__row:last-child{border-bottom:none;}
.ctable__row span{padding:16px;font-size:.92rem;}
.ctable__feat{color:var(--paper);font-weight:600;}
.ctable__row .ctable__us{background:rgba(255,61,110,.06);color:var(--paper);font-weight:400;
  display:flex;gap:9px;align-items:flex-start;height:100%;}
.ctable__row .ctable__them{color:var(--faint);display:flex;gap:9px;align-items:flex-start;}
.tick{color:var(--good);font-weight:700;flex:none;}
.cross{color:var(--bad);opacity:.7;flex:none;}
.ctable__foot{margin-top:14px;color:var(--faint);font-size:.78rem;}
@media(max-width:720px){
  .ctable__head{display:none;}
  .ctable__row{grid-template-columns:1fr;gap:0;padding:6px 0;}
  .ctable__row span{padding:8px 16px;}
  .ctable__feat{padding-top:14px;font-size:1rem;}
  .ctable__row .ctable__us{background:transparent;}
}

/* ---- use cases ---- */
.usegrid{display:flex;flex-wrap:wrap;gap:12px;}
.usechip{padding:12px 20px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  font-weight:600;font-size:1rem;transition:.15s;}
.usechip:hover{border-color:var(--volt);color:var(--volt);}

.lp-final{padding-block:clamp(70px,10vw,120px);}