/* ==========================================================================
   NoShotList design system — "Studio at night"
   Deep charcoal ground, warm off-white type, ONE signal color (recording red),
   a calm secondary (sage) for success. Instrument Serif for display, Inter for
   UI, a monospace face for the timecode/HUD motif that runs through the whole
   product (every word you say gets a timestamp — the UI says so, visually).
   Shared by: index.html (landing), app.html (SPA), cam.html (phone).
   ========================================================================== */

:root{
  /* ---- color tokens ---- */
  --bg: #15141b;
  --bg-raised: #1d1b24;
  --bg-sunken: #0f0e13;
  --bg-glass: rgba(29,27,36,.72);
  --ink: #f4efe6;
  --ink-dim: rgba(244,239,230,.64);
  --ink-faint: rgba(244,239,230,.4);
  --line: rgba(244,239,230,.09);
  --line-strong: rgba(244,239,230,.18);
  --rec: #ff4b3e;
  --rec-ink: #2a0d0a;
  --rec-dim: rgba(255,75,62,.16);
  --rec-glow: rgba(255,75,62,.45);
  --sage: #8fb8a8;
  --sage-ink: #0d1b16;
  --sage-dim: rgba(143,184,168,.16);
  --sage-glow: rgba(143,184,168,.45);
  --amber: #e0a75e;
  --amber-dim: rgba(224,167,94,.16);

  /* ---- type ---- */
  --font-display: 'Instrument Serif', Georgia, 'Iowan Old Style', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- scale ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --container: 1160px;
  --shadow-card: 0 1px 0 rgba(244,239,230,.04) inset, 0 20px 60px -30px rgba(0,0,0,.7);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* prefers-color-scheme: light stays reserved for later — dark is the brand, always on */

*,*::before,*::after{ box-sizing: border-box; }
html{ color-scheme: dark; -webkit-text-size-adjust: 100%; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
input,textarea,select{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin: 0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* visible focus everywhere, mouse users don't get the ring */
:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* The [hidden] attribute must always win over any class's own `display` rule (a class selector
   loaded after the UA stylesheet otherwise beats the browser's own [hidden]{display:none}). */
[hidden]{ display: none !important; }

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

/* ---------------------------------------------------------------- layout */
.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.stack > * + *{ margin-top: var(--s-4); }
.cluster{ display:flex; align-items:center; gap: var(--s-3); flex-wrap: wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); }
.grid{ display:grid; gap: var(--s-5); }
.hide-mobile{ display:none; }
@media (min-width: 900px){ .hide-mobile{ display: revert; } }
.show-mobile-only{ display: revert; }
@media (min-width: 900px){ .show-mobile-only{ display:none; } }
/* Mobile nav drawer: closed by default at every width; only opens (.is-open) under 900px, so
   growing the window back to desktop always wins regardless of open/closed state. */
/* .app-nav (below) sets display:flex at equal specificity — qualify both so the drawer stays hidden on desktop */
.app-nav.mobile-nav-drawer{ display:none; padding: 0 var(--s-5); gap:4px; flex-direction:column; }
@media (max-width: 899px){ .app-nav.mobile-nav-drawer.is-open{ display:flex; } }

/* ---------------------------------------------------------------- type */
.eyebrow{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow--rec{ color: var(--rec); }
.eyebrow--sage{ color: var(--sage); }
.h-hero{ font-family: var(--font-display); font-weight: 400; line-height: .98; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem); }
.h1{ font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.h2{ font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.h3{ font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; letter-spacing: -.005em; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-dim); line-height: 1.55; max-width: 40em; }
.muted{ color: var(--ink-dim); }
.faint{ color: var(--ink-faint); }
.mono{ font-family: var(--font-mono); }
.italic-serif{ font-family: var(--font-display); font-style: italic; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--radius-md);
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: -.002em;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.98); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background: var(--rec); color: #fff9f7; box-shadow: 0 10px 30px -12px var(--rec-glow); }
.btn-primary:hover{ background:#ff5b4f; }
.btn-sage{ background: var(--sage); color: var(--sage-ink); box-shadow: 0 10px 30px -12px var(--sage-glow); }
.btn-sage:hover{ background:#9dc6b6; }
.btn-outline{ border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink-dim); background: rgba(244,239,230,.04); }
.btn-ghost{ color: var(--ink-dim); }
.btn-ghost:hover{ color: var(--ink); background: rgba(244,239,230,.05); }
.btn-lg{ min-height: 56px; padding: 0 var(--s-6); font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-sm{ min-height: 36px; padding: 0 var(--s-4); font-size: .85rem; border-radius: var(--radius-sm); }
.btn-block{ width:100%; }
.btn-icon{ width:44px; padding:0; flex-shrink:0; }
.btn .spinner{ margin-right:2px; }

/* ---------------------------------------------------------------- forms */
.field{ display:block; }
.field + .field{ margin-top: var(--s-4); }
.field-label{ display:block; font-size: .82rem; font-weight:600; color: var(--ink-dim); margin-bottom: var(--s-2); }
.input, .textarea, .select{
  width:100%; background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius-sm); padding: 0 var(--s-4); min-height: 48px;
  font-size: 1rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea{ padding: var(--s-3) var(--s-4); min-height: 100px; resize: vertical; line-height:1.5; }
.input::placeholder,.textarea::placeholder{ color: var(--ink-faint); }
.input:focus,.textarea:focus,.select:focus{ border-color: var(--ink-dim); box-shadow: 0 0 0 3px rgba(244,239,230,.08); }
.field-help{ margin-top: var(--s-2); font-size: .82rem; color: var(--ink-faint); }
.field-error{ margin-top: var(--s-2); font-size: .82rem; color: var(--rec); }
.input--error{ border-color: var(--rec); }
.checkbox-row{ display:flex; align-items:flex-start; gap: var(--s-3); cursor:pointer; }
.checkbox-row input{ margin-top: 4px; width:18px; height:18px; accent-color: var(--rec); }

/* ---------------------------------------------------------------- cards */
.card{
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); box-shadow: var(--shadow-card);
}
.card--tight{ padding: var(--s-4); }
.card--interactive{ cursor:pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.card--interactive:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.card--current{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset, var(--shadow-card); }
.divider{ height:1px; background: var(--line); border:0; margin: var(--s-5) 0; }
.hairline-top{ border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- pills / badges */
.pill{
  display:inline-flex; align-items:center; gap: var(--s-2); padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill); font-size: .76rem; font-weight:600; letter-spacing:.01em;
  font-family: var(--font-mono); text-transform: uppercase; background: rgba(244,239,230,.06); color: var(--ink-dim);
  border: 1px solid var(--line);
}
.pill--rec{ background: var(--rec-dim); color: var(--rec); border-color: transparent; }
.pill--sage{ background: var(--sage-dim); color: var(--sage); border-color: transparent; }
.pill--amber{ background: var(--amber-dim); color: var(--amber); border-color: transparent; }
.pill--dot::before{ content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---------------------------------------------------------------- REC / timecode HUD (signature motif) */
.rec-dot{ width:9px; height:9px; border-radius:50%; background: var(--rec); flex-shrink:0; }
.rec-dot--live{ animation: rec-pulse 1.1s ease-in-out infinite; }
@keyframes rec-pulse{ 0%,100%{ opacity:1; box-shadow: 0 0 0 0 var(--rec-dim); } 50%{ opacity:.55; box-shadow: 0 0 0 6px transparent; } }
.timecode{
  display:inline-flex; align-items:center; gap: var(--s-2); font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .03em; color: var(--ink-dim); padding: var(--s-1) var(--s-3); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
}
.timecode--rec{ color: var(--ink); border-color: var(--rec-dim); }
.timecode .rec-dot{ margin-right: 2px; }

/* ---------------------------------------------------------------- the orb (voice producer) */
.orb-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.orb-wrap:has(.orb-label){ margin-bottom: 2.4rem; }
.orb{
  --orb-size: 120px; width: var(--orb-size); height: var(--orb-size); border-radius:50%; position:relative;
  background: radial-gradient(circle at 32% 28%, rgba(244,239,230,.5), rgba(143,184,168,.5) 45%, rgba(21,20,27,0) 72%);
  filter: saturate(1.1);
  animation: orb-breathe 4.2s ease-in-out infinite;
}
.orb::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border: 1px solid var(--line-strong); opacity:.6;
}
@keyframes orb-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.045); } }
.orb--agent{ background: radial-gradient(circle at 32% 28%, #fff6ee, var(--sage) 45%, rgba(21,20,27,0) 74%); box-shadow: 0 0 60px -6px var(--sage-glow); animation: orb-talk 1s ease-in-out infinite; }
.orb--user{ background: radial-gradient(circle at 32% 28%, #fff2ef, var(--rec) 45%, rgba(21,20,27,0) 74%); box-shadow: 0 0 60px -6px var(--rec-glow); animation: orb-talk .82s ease-in-out infinite; }
@keyframes orb-talk{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.09); } }
.orb--sm{ --orb-size: 40px; }
.orb--lg{ --orb-size: 180px; }
/* Remy (the headset mascot) as the orb: poses stacked, the speaking class picks one */
.orb--remy, .orb--remy.orb--agent, .orb--remy.orb--user{ background:none; box-shadow:none; border-radius:0; filter:none; }
.orb--remy::after{ display:none; }
.orb--remy img{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition: opacity .16s ease;
  filter: drop-shadow(0 0 calc(var(--orb-size) * .1) rgba(155,92,255,.5)) drop-shadow(0 0 calc(var(--orb-size) * .22) rgba(255,110,90,.18)); }
.orb--remy .pose-idle{ opacity:1; }
.orb--remy.orb--agent .pose-idle, .orb--remy.orb--user .pose-idle{ opacity:0; }
.orb--remy.orb--agent .pose-talking, .orb--remy.orb--user .pose-listening{ opacity:1; }
.orb--remy.orb--user{ animation: orb-breathe 2.6s ease-in-out infinite; }
.orb--remy.orb--user img{ filter: drop-shadow(0 0 calc(var(--orb-size) * .1) rgba(255,75,62,.45)) drop-shadow(0 0 calc(var(--orb-size) * .22) rgba(255,75,62,.18)); }
.orb-label{ position:absolute; bottom:-2rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family: var(--font-mono); font-size: .74rem; color: var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }

.waveform{ display:flex; align-items:center; gap:3px; height: 22px; }
.waveform span{ width:3px; border-radius:2px; background: var(--ink-dim); height: 30%; transition: height .12s var(--ease); }
.waveform--agent span{ background: var(--sage); }
.waveform--user span{ background: var(--rec); }
.waveform--live span{ animation: wave-bounce 1s ease-in-out infinite; }
.waveform span:nth-child(2){ animation-delay:.1s; } .waveform span:nth-child(3){ animation-delay:.2s; }
.waveform span:nth-child(4){ animation-delay:.3s; } .waveform span:nth-child(5){ animation-delay:.15s; }
@keyframes wave-bounce{ 0%,100%{ height:22%; } 50%{ height:90%; } }

/* ---------------------------------------------------------------- transcript */
.transcript{ display:flex; flex-direction:column; gap: var(--s-3); max-height: 100%; overflow-y:auto; }
.transcript-line{ display:flex; gap: var(--s-3); align-items:flex-start; }
.transcript-line .who{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--ink-faint); width: 4.4em; flex-shrink:0; padding-top:.2em; text-align:right; }
.transcript-line--agent .who{ color: var(--sage); }
.transcript-line--user .who{ color: var(--rec); }
.transcript-line .text{ color: var(--ink-dim); line-height:1.5; }
.transcript-line--user .text{ color: var(--ink); }
.transcript-line .text .cursor{ display:inline-block; width:2px; height:1em; background: var(--ink-dim); vertical-align:-2px; animation: caret-blink 1s step-end infinite; }
@keyframes caret-blink{ 50%{ opacity:0; } }

/* ---------------------------------------------------------------- checklist (producer items) */
.checklist{ display:flex; flex-direction:column; gap: var(--s-2); }
.checklist-item{
  display:flex; align-items:flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  border: 1px solid transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.checklist-item .mark{
  width:22px; height:22px; border-radius:50%; border: 1.5px solid var(--line-strong); flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.checklist-item--done .mark{ background: var(--sage); border-color: var(--sage); color: var(--sage-ink); }
.checklist-item--done .label{ color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.checklist-item--partial .mark{ border-color: var(--amber); color: var(--amber); }
.checklist-item--current{ background: rgba(255,75,62,.08); border-color: var(--rec-dim); }
.checklist-item--current .mark{ border-color: var(--rec); }
.checklist-item .label{ font-weight:600; font-size:.92rem; }
.checklist-item .gist{ font-size:.84rem; color: var(--ink-dim); margin-top:2px; }
.checklist-item .video-tag{ font-family: var(--font-mono); font-size:.68rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }

/* ---------------------------------------------------------------- toast */
.toast-stack{ position:fixed; top: var(--s-5); right: var(--s-5); display:flex; flex-direction:column; gap: var(--s-3); z-index:400; max-width: min(360px, calc(100vw - 2 * var(--s-5))); }
.toast{
  background: var(--bg-raised); border:1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-card); font-size:.9rem;
  animation: toast-in .25s var(--ease);
}
.toast--error{ border-color: var(--rec); }
.toast--success{ border-color: var(--sage); }
@keyframes toast-in{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } }

/* ---------------------------------------------------------------- modal / sheet */
.modal-backdrop{ position:fixed; inset:0; background: rgba(10,9,13,.72); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding: var(--s-5); z-index:500; animation: fade-in .18s var(--ease); }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{ background: var(--bg-raised); border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding: var(--s-6); max-width: 460px; width:100%; box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); }
/* review finding #21: a business name can run to 140 chars with no spaces (a bare domain like
   harborlineplumbingandheating.com) — .biz-row-name already wraps it in the list, but the confirm dialog's own
   title and "type NAME to confirm" label had no wrap rule and could run past a 375px phone's modal edge. */
.biz-modal-title, .biz-modal-confirm-label{ overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- accordion (FAQ) */
.accordion-item{ border-bottom: 1px solid var(--line); }
.accordion-item:first-child{ border-top: 1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--s-4);
  padding: var(--s-5) 0; background:none; border:0; text-align:left; cursor:pointer; min-height:44px;
  font-family: var(--font-ui); font-weight:600; font-size:1.02rem; color: var(--ink);
}
.accordion-trigger .plus{ font-family: var(--font-mono); color: var(--ink-faint); transition: transform .2s var(--ease); flex-shrink:0; }
.accordion-item[data-open="true"] .plus{ transform: rotate(45deg); color: var(--rec); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .25s var(--ease); }
.accordion-panel .inner{ padding: 0 0 var(--s-5); color: var(--ink-dim); max-width: 42em; line-height:1.6; }

/* ---------------------------------------------------------------- chips */
.chip-row{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.chip{ font-size:.78rem; padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); background: rgba(244,239,230,.06); border:1px solid var(--line); color: var(--ink-dim); }
.chip--fit{ color: var(--sage); border-color: color-mix(in srgb, var(--sage) 45%, transparent); }
.chip--must{ background: var(--rec-dim); color: var(--rec); border-color: transparent; font-weight:600; }

/* ---------------------------------------------------------------- skeleton / loading */
.skel{ background: linear-gradient(90deg, var(--bg-raised) 25%, rgba(244,239,230,.06) 37%, var(--bg-raised) 63%); background-size: 400% 100%; animation: skel-shimmer 1.6s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes skel-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.spinner{ width:16px; height:16px; border-radius:50%; border: 2px solid rgba(244,239,230,.25); border-top-color: currentColor; animation: spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   Marketing site (index.html)
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:100; background: var(--bg); border-bottom: 1px solid transparent; padding: var(--s-4) 0; transition: border-color .2s var(--ease); }
.site-header.is-scrolled{ border-bottom-color: var(--line); }
.brand-lockup{ display:flex; align-items:center; gap: var(--s-2); font-family: var(--font-display); font-size:1.3rem; letter-spacing:-.01em; }
.brand-lockup .rec-dot{ animation: rec-pulse 2.6s ease-in-out infinite; }
.brand-lockup .brand-mark{ width: 1.2em; height: 1.1em; flex-shrink: 0; color: var(--ink); }
.brand-lockup .brand-rec{ animation: brand-rec 2.6s ease-in-out infinite; }
@keyframes brand-rec{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }
.brand-lockup .brand-word i{ font-style: italic; }

.hero{ position:relative; padding: var(--s-9) 0 var(--s-8); overflow:hidden; }
.hero-grain{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(circle at 20% 20%, rgba(143,184,168,.08), transparent 40%), radial-gradient(circle at 80% 0%, rgba(255,75,62,.08), transparent 45%); }
.hero-inner{ position:relative; display:grid; gap: var(--s-7); }
@media (min-width: 900px){ .hero-inner{ grid-template-columns: 1.1fr .9fr; align-items:center; } }
.hero-cta-row{ display:flex; gap: var(--s-3); flex-wrap:wrap; margin-top: var(--s-6); }
.hero-stage{ position:relative; aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; display:flex; align-items:center; justify-content:center; }
.hero-stage .timecode{ position:absolute; bottom: 6%; left:50%; transform:translateX(-50%); }

.steps{ padding: var(--s-8) 0; }
.steps-scrubber{ position:relative; display:grid; gap: var(--s-6); }
@media (min-width: 900px){ .steps-scrubber{ grid-template-columns: repeat(3,1fr); gap: var(--s-5); } }
.step{ position:relative; padding-top: var(--s-5); border-top: 2px solid var(--line-strong); }
.step .step-tc{ font-family: var(--font-mono); font-size:.82rem; color: var(--rec); letter-spacing:.04em; }
.step h3{ margin-top: var(--s-3); }
.step p{ margin-top: var(--s-2); color: var(--ink-dim); line-height:1.55; }

.proof-strip{ padding: var(--s-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.faq{ padding: var(--s-8) 0; max-width: 46em; }

.cta-band{ padding: var(--s-8) 0 var(--s-9); text-align:center; }
.cta-band .h1{ margin-bottom: var(--s-3); }

.site-footer{ padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line); color: var(--ink-faint); font-size:.85rem; }

/* ==========================================================================
   App shell (app.html)
   ========================================================================== */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width: 240px; flex-shrink:0; background: var(--bg-sunken); border-right:1px solid var(--line);
  padding: var(--s-5); display:flex; flex-direction:column; gap: var(--s-6); position:sticky; top:0; height:100vh;
}
.app-nav{ display:flex; flex-direction:column; gap: var(--s-1); }
.app-nav-link{
  display:flex; align-items:center; gap: var(--s-3); padding: var(--s-3) var(--s-3); border-radius: var(--radius-sm);
  color: var(--ink-dim); font-weight:500; min-height:44px; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.app-nav-link:hover{ background: rgba(244,239,230,.05); color: var(--ink); }
.app-nav-link[aria-current="page"]{ background: rgba(255,75,62,.1); color: var(--ink); }
.app-nav-link .dot{ width:6px; height:6px; border-radius:50%; background: var(--line-strong); }
.app-nav-link[aria-current="page"] .dot{ background: var(--rec); }
.app-main{ flex:1; min-width:0; padding: var(--s-6) var(--s-7); }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--s-6); gap: var(--s-4); flex-wrap:wrap; }
.minutes-hud{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-faint); }
.minutes-hud strong{ color: var(--ink-dim); font-weight:600; }
/* the sidebar's plan line (ui.js minutesHudHtml): plan · minutes left, over a thin meter */
.shell-hud{ display:block; font-family: var(--font-ui); font-size:.86rem; color: var(--ink-dim); }
.shell-hud strong{ color: var(--ink); }
.shell-hud .hud-meter{ display:block; height:5px; margin-top: var(--s-2); border-radius:999px; background: rgba(244,239,230,.1); overflow:hidden; }
.shell-hud .hud-meter i{ display:block; height:100%; min-width:5px; border-radius:inherit; background: var(--rec); }
.shell-hud .hud-meter.is-low i{ background: var(--amber); }

.mobile-topbar{ display:none; align-items:center; justify-content:space-between; padding: var(--s-4) var(--s-5); border-bottom:1px solid var(--line); position:sticky; top:0; background: var(--bg); z-index:50; }
@media (max-width: 899px){
  .app-shell{ flex-direction:column; }
  .app-sidebar{ display:none; }
  .mobile-topbar{ display:flex; }
  .app-main{ padding: var(--s-5); }
}

/* desktop-required notice (studio on small screens) */
.desktop-only-note{ display:none; }
@media (max-width: 1023px){ .desktop-only-note{ display:block; } .desktop-only-note ~ .studio-grid{ display:none; } }

/* ---------------------------------------------------------------- onboarding */
.onboard-shell{ max-width: 640px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-9); min-height:100vh; display:flex; flex-direction:column; }
.onboard-back{ align-self:flex-start; margin: calc(-1 * var(--s-4)) 0 var(--s-4) calc(-1 * var(--s-3)); }
.onboard-progress{ display:flex; gap: var(--s-2); margin-bottom: var(--s-7); }
.onboard-progress .seg{ height:3px; flex:1; border-radius:2px; background: var(--line-strong); }
.onboard-progress .seg--done{ background: var(--sage); }
.onboard-progress .seg--active{ background: var(--rec); }
.choice-grid{ display:grid; gap: var(--s-4); }
@media (min-width: 560px){ .choice-grid{ grid-template-columns: 1fr 1fr; } }
.choice-card{
  display:flex; flex-direction:column; gap: var(--s-2); text-align:left; padding: var(--s-6); border-radius: var(--radius-lg);
  background: var(--bg-raised); border: 1px solid var(--line); cursor:pointer; min-height:150px;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.choice-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.choice-card[aria-pressed="true"]{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset; }
.choice-card .icon{ font-size:1.6rem; }
/* F1: Step B's "film it as your founder story" vs "just talk" choice — the recommended one gets a sage accent to
   match its badge (the .pill--sage already used for it) instead of the rec-red selection state above, which is for
   Step A's picked/unpicked toggle, not a recommendation. */
.choice-card--recommended{ border-color: color-mix(in srgb, var(--sage) 55%, var(--line)); }
.choice-card--recommended:hover{ border-color: var(--sage); }

/* F5: the done button pulses once Remy has what he needs (or the 7-minute fallback fires) — never blocks the button,
   just draws the eye to it. The global prefers-reduced-motion rule near the top already flattens this to a single
   near-instant frame for anyone who has that set. */
.btn--pulse{ animation: btn-pulse 1.6s ease-in-out infinite; }
@keyframes btn-pulse{ 0%,100%{ box-shadow: 0 10px 30px -12px var(--rec-glow); } 50%{ box-shadow: 0 10px 42px -6px var(--rec-glow), 0 0 0 7px var(--rec-dim); } }

.research-list{ display:flex; flex-direction:column; gap: var(--s-3); }
.research-row{ display:flex; align-items:center; gap: var(--s-3); font-size:.92rem; color: var(--ink-dim); }
.research-row .status-dot{ width:16px; height:16px; border-radius:50%; border: 1.5px solid var(--line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.research-row--done .status-dot{ background: var(--sage); border-color: var(--sage); }
.research-row--done{ color: var(--ink); }
.research-row--active .status-dot{ border-color: var(--rec); }
.research-row--active{ color: var(--ink); }

.type-instead{ display:inline-flex; align-items:center; gap: var(--s-2); color: var(--ink-dim); font-size:.85rem; background:none; border:0; padding: var(--s-2) var(--s-3); min-height:44px; cursor:pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.type-instead:hover{ color: var(--ink); text-decoration-color: currentColor; }

.brief-card-grid{ display:grid; gap: var(--s-4); }
@media (min-width: 720px){ .brief-card-grid{ grid-template-columns: 1fr 1fr; } }
.brief-card .field-label{ margin-bottom: var(--s-1); }
.brief-card textarea, .brief-card .input{ background: transparent; border: 1px dashed var(--line-strong); }
.brief-card textarea:focus, .brief-card .input:focus{ border-style: solid; }

.accent-swatches{ display:flex; gap: var(--s-3); flex-wrap:wrap; }
.swatch{ width:44px; height:44px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative; }
.swatch[aria-pressed="true"]{ border-color: var(--ink); }
.swatch[aria-pressed="true"]::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------- home / formats */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap:wrap; }
.format-grid{ display:grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.format-card{ display:flex; flex-direction:column; gap: var(--s-3); }
.format-card .hook-pattern{ font-family: var(--font-display); font-size:1.15rem; line-height:1.3; color: var(--ink); }
.format-card .example{ font-size:.82rem; color: var(--ink-faint); font-style: italic; }
.format-card .meta-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: var(--s-2) var(--s-3); flex-wrap:wrap; }
.format-card .meta-row > .btn{ flex-shrink:0; margin-left:auto; }
.format-card .meta-row > .eyebrow{ flex: 1 1 120px; min-width:0; }

.video-grid{ display:grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.video-card{ display:flex; flex-direction:column; gap: var(--s-3); }
.video-card[data-selected="true"]{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset, var(--shadow-card); }
.video-card .pick{ position:absolute; top: var(--s-4); right: var(--s-4); }
.video-card{ position:relative; }
.plan-points{ display:flex; flex-direction:column; gap: var(--s-3); }
.plan-point-row{ display:flex; gap: var(--s-3); align-items:flex-start; padding: var(--s-3); border-radius: var(--radius-sm); background: rgba(244,239,230,.03); }
.plan-point-row .idx{ font-family: var(--font-mono); color: var(--ink-faint); font-size:.8rem; padding-top:2px; }

.paste-link-row{ display:flex; gap: var(--s-3); flex-wrap:wrap; }
.paste-link-row .input{ flex:1; min-width: 220px; }

.selection-bar{
  position: sticky; bottom: var(--s-5); display:flex; align-items:center; justify-content:space-between;
  gap: var(--s-4); background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); margin-top: var(--s-6); box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------- studio */
.phone-frame{
  /* never taller than the window (13" laptops): width follows the available height */
  width: min(100%, calc((100vh - 190px) * 9 / 16)); min-width: 240px; margin: 0 auto;
  aspect-ratio: 9/16; border-radius: var(--radius-lg); background: var(--bg-sunken);
  border: 1px solid var(--line-strong); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center;
}
.phone-frame img, .phone-frame video{ width:100%; height:100%; object-fit:cover; }
.phone-frame .thirds{ position:absolute; inset:0; pointer-events:none; opacity:.35; }
.phone-frame .thirds::before, .phone-frame .thirds::after{ content:''; position:absolute; background: var(--ink); }
.phone-frame .thirds::before{ left:33.33%; top:0; bottom:0; width:1px; box-shadow: 66.66% 0 0 var(--ink); }
.phone-frame .thirds::after{ top:33.33%; left:0; right:0; height:1px; box-shadow: 0 66.66% 0 0 var(--ink); }
.phone-frame .frame-hud{ position:absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3); display:flex; justify-content:space-between; }
/* live WebRTC video sits over the JPEG preview (the fallback underneath); the HUD + thirds grid stay on top of both */
.phone-frame .live-video{ position:absolute; inset:0; z-index:1; object-fit:contain; background:#000; }
.phone-frame .live-video[hidden]{ display:none; }
.phone-frame .frame-hud, .phone-frame .thirds{ z-index:2; }
/* framing guide (studio.js guideSvg): outline over the preview, under the HUD. Light stroke + dark halo + soft glow so it
   reads over any footage; fades in/out (data-on). Outline art: /img/framing-guide.svg */
.phone-frame .frame-hud{ z-index:3; align-items:flex-start; gap: var(--s-2); }
.frame-hud-tools{ display:flex; gap: 4px; flex:none; }
/* the status pill shares the row with three buttons: keep it on one line (short windows = narrower frame) */
.phone-frame .frame-hud .timecode{ display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-inline: var(--s-2); }
.phone-frame .frame-hud .btn-icon{ width:36px; min-height:34px; background: rgba(15,14,19,.55); border:1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink-dim); }
.phone-frame .frame-hud .btn-icon:hover{ color: var(--ink); background: rgba(15,14,19,.72); }
.phone-frame .frame-hud .btn-icon[aria-pressed="true"]{ color: var(--ink); border-color: var(--line-strong); }
.phone-frame .frame-hud .btn-icon svg{ display:block; }
@media (max-height: 760px){ .phone-frame .frame-hud .btn-icon{ width:32px; } }
.frame-guide{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.frame-guide[data-on="true"]{ opacity:1; visibility:visible; transition: opacity .45s var(--ease), visibility 0s; }
.frame-guide .fg{ position:absolute; inset:0; width:100%; height:100%; }
.fg .fg-halo{ fill:none; stroke: rgba(6,6,10,.7); stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.fg .fg-glow{ fill:none; stroke: rgba(244,239,230,.45); stroke-width: 7px; }
.fg .fg-line{ fill:none; stroke: rgba(244,239,230,.94); stroke-width: 2px; }
.fg .fg-eyeline{ fill:none; stroke: rgba(244,239,230,.85); stroke-width: 1.25px; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.fg .fg-arrow{ fill:none; stroke: rgba(244,239,230,.95); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.fg .fg-label{ font-family: var(--font-mono); font-weight:600; font-size:31px; letter-spacing:.08em; fill: rgba(244,239,230,.96);
  paint-order: stroke; stroke: rgba(6,6,10,.72); stroke-width: 7px; stroke-linejoin: round; }
.fg .fg-label--sub{ font-weight:500; font-size:27px; letter-spacing:.05em; fill: rgba(244,239,230,.8); }
@media (prefers-reduced-motion: no-preference){
  /* a few slow breaths when it appears, then it holds still (no pulse at all with reduced motion) */
  .frame-guide[data-on="true"] .fg-glow{ animation: fg-breathe 2.6s var(--ease) 3; }
}
@keyframes fg-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
/* "the angle we want": example photo beside the preview while they set up */
.angle-card{ display:flex; gap: var(--s-4); align-items:center; padding: var(--s-3); margin:0; }
.angle-photo{ flex:none; width:104px; aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow:hidden; background: var(--bg-sunken); }
.angle-photo img{ width:100%; height:100%; object-fit:cover; object-position: 30% 40%; }
.angle-copy{ display:flex; flex-direction:column; gap: 6px; min-width:0; }
.angle-copy p{ font-size:.95rem; line-height:1.45; max-width: 40ch; }
.phone-frame .empty{ text-align:center; color: var(--ink-faint); font-size:.85rem; padding: var(--s-5); }
.pair-card .code{ font-family: var(--font-mono); font-size: 2.4rem; letter-spacing:.14em; color: var(--ink); margin: var(--s-3) 0; }
.pair-card canvas, .pair-card img.qr{ margin: 0 auto var(--s-3); border-radius: var(--radius-sm); background:#fff; padding:8px; }

.producer-row{ display:flex; align-items:center; gap: var(--s-5); }
.point-card{ min-height: 120px; }
.point-card .must-say{ margin-top: var(--s-3); }
.mode-voice-row{ display:flex; gap: var(--s-5); flex-wrap:wrap; align-items:center; }
.segmented{ display:inline-flex; background: var(--bg-sunken); border:1px solid var(--line-strong); border-radius: var(--radius-pill); padding:3px; }
.segmented button{ padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); background:none; border:0; color: var(--ink-dim); font-weight:600; font-size:.85rem; cursor:pointer; min-height:38px; }
.segmented button[aria-pressed="true"]{ background: var(--ink); color: var(--bg-sunken); }
.voice-picker{ display:flex; gap: var(--s-2); }
.voice-chip{ padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); border:1px solid var(--line-strong); background:none; color: var(--ink-dim); font-size:.82rem; cursor:pointer; text-transform:capitalize; min-height:36px; }
.voice-chip[aria-pressed="true"]{ border-color: var(--sage); color: var(--sage); background: var(--sage-dim); }
.record-controls{ display:flex; justify-content:center; padding: var(--s-4) 0; }
.uploading-note{ text-align:center; color: var(--ink-dim); }

/* ---------------------------------------------------------------- clips */
.clip-grid{ display:grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.clip-card{ display:flex; flex-direction:column; gap: var(--s-3); }
.clip-thumb{ aspect-ratio: 9/16; border-radius: var(--radius-md); overflow:hidden; background: var(--bg-sunken); position:relative; }
.clip-thumb video, .clip-thumb img{ width:100%; height:100%; object-fit:cover; }
.clip-thumb .status-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap: var(--s-2); background: rgba(15,14,19,.75); }
.progress-track{ width: 70%; height:4px; border-radius:2px; background: var(--line-strong); overflow:hidden; }
.progress-fill{ height:100%; background: var(--rec); transition: width .3s var(--ease); }
.caption-row{ display:flex; align-items:flex-start; gap: var(--s-2); }
.caption-row p{ flex:1; font-size:.85rem; color: var(--ink-dim); line-height:1.4; max-height: 4.2em; overflow:hidden; }
.clip-actions{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.clip-actions .clip-delete{ margin-left:auto; width:36px; }
.clip-actions .btn-sm:not(.btn-icon){ padding: 0 var(--s-3); }
.clip-actions .clip-delete:hover{ color: var(--rec); background: var(--rec-dim); }

/* ---------------------------------------------------------------- settings */
.settings-card{ max-width: 480px; }
.settings-card--wide{ max-width: 720px; } /* "Your businesses" (M4): rows need more room than the 480px forms below it */

.biz-list{ margin-top: var(--s-4); display:flex; flex-direction:column; gap: var(--s-3); }
.biz-row{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-md); flex-wrap:wrap; }
.biz-row-main{ min-width:0; flex:1 1 220px; }
.biz-row-name{ font-weight:600; overflow-wrap:anywhere; }
.biz-row-meta{ display:flex; align-items:center; gap: var(--s-3); flex-wrap:wrap; margin-top: 6px; font-size:.82rem; }
.biz-row-actions{ flex:none; }
.biz-danger:hover{ color: var(--rec); border-color: var(--rec); background: var(--rec-dim); }
@media (max-width: 520px){
  .biz-row{ flex-direction:column; align-items:stretch; }
  .biz-row-main{ flex-basis:auto; } /* flex-basis:220px is a WIDTH in the row layout — in column mode it forces a min-HEIGHT instead */
  .biz-row-actions{ justify-content:flex-end; }
}

/* ---------------------------------------------------------------- start / auth */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: var(--s-5); }
.auth-card{ width:100%; max-width: 420px; }
.auth-card .brand-lockup{ margin-bottom: var(--s-6); justify-content:center; }

/* ---------------------------------------------------------------- empty states */
.empty-state{ text-align:center; padding: var(--s-8) var(--s-5); color: var(--ink-dim); }
.empty-state .h3{ color: var(--ink); margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- misc */
.center-col{ max-width: 720px; margin:0 auto; }
.two-col{ display:grid; gap: var(--s-6); }
@media (min-width: 1024px){ .two-col{ grid-template-columns: 1fr 1fr; } }

.clip-thumb{ position:relative; overflow:hidden; }
.clip-thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------------- reference videos (the viral originals) */
.ref-thumb{ position:relative; display:block; width:100%; aspect-ratio: 9/16; max-height: 280px; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); cursor:pointer; padding:0;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,75,62,.22), rgba(21,20,27,0) 60%), linear-gradient(160deg, #22212b, #15141b); }
.ref-thumb--sm{ max-height: 150px; width: 84px; flex-shrink:0; }
.ref-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; transition: transform .3s var(--ease), opacity .2s; }
.ref-thumb:hover img{ transform: scale(1.03); opacity:1; }
.ref-thumb-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(14,14,18,.66); color: var(--ink); font-size:.95rem; border:1px solid rgba(244,239,230,.25); backdrop-filter: blur(4px); }
.ref-thumb--sm .ref-thumb-play{ width:30px; height:30px; font-size:.7rem; }
.ref-thumb-platform{ position:absolute; top:8px; left:8px; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink); background: rgba(14,14,18,.6); padding:2px 6px; border-radius:4px; }
.ref-thumb-views{ position:absolute; bottom:8px; left:8px; font-family: var(--font-mono); font-size:.72rem; color: var(--ink); background: rgba(14,14,18,.6); padding:2px 6px; border-radius:4px; }
.ref-thumb--sm .ref-thumb-platform, .ref-thumb--sm .ref-thumb-views{ display:none; }
.format-card .ref-thumb{ margin-bottom: var(--s-3); max-height: 220px; }
.ref-modal-back{ position:fixed; inset:0; z-index:700; background: rgba(8,8,11,.78); display:flex; align-items:center; justify-content:center; padding: var(--s-5); backdrop-filter: blur(6px); }
.ref-modal{ display:grid; grid-template-columns: minmax(260px, 360px) minmax(280px, 440px); gap: var(--s-6); background: var(--bg-raised, #1b1a22); border:1px solid var(--line); border-radius: var(--radius-lg, 18px); padding: var(--s-5); max-height: 92vh; overflow:auto; }
.ref-modal-player{ aspect-ratio: 9/16; width:100%; border-radius: var(--radius-sm); overflow:hidden; background:#000; }
.ref-modal-player iframe{ width:100%; height:100%; border:0; display:block; }
.ref-modal-noembed{ height:100%; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; color: var(--ink-dim); text-align:center; padding: var(--s-4); }
.ref-block{ margin-top: var(--s-4); }
.ref-quote{ font-family: var(--font-display); font-size: 1.35rem; line-height:1.25; margin-top: 6px; color: var(--ink); }
.ref-quote--yours{ color: var(--sage); }
@media (max-width: 760px){ .ref-modal{ grid-template-columns: 1fr; } .ref-modal-player{ max-height: 60vh; } }
.based-on{ display:flex; align-items:center; gap: var(--s-2); font-size:.82rem; color: var(--ink-faint); margin-top: var(--s-2); }
.based-on button{ background:none; border:0; color: var(--ink-dim); text-decoration: underline; text-underline-offset:3px; cursor:pointer; padding:0; font-size:inherit; }
.ref-modal--wide{ grid-template-columns: minmax(360px, 640px) minmax(280px, 400px); align-items:start; }
.ref-modal-player--wide{ aspect-ratio: 16/9; }
@media (max-width: 1000px){ .ref-modal--wide{ grid-template-columns: 1fr; } }
.verified-badge{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.04em; color: var(--sage); border:1px solid rgba(143,184,168,.35); border-radius: var(--radius-pill); padding: 2px 8px; white-space:nowrap; }

/* pairing inside the phone frame */
.pair-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--s-2);
  padding: var(--s-4); text-align:center; background: radial-gradient(120% 80% at 50% 0%, rgba(255,75,62,.10), rgba(21,20,27,0) 60%), var(--bg-sunken); }
.pair-overlay .qr-box{ background:#fff; padding:12px; border-radius: 14px; margin: var(--s-3) 0 var(--s-2); line-height:0; min-width: 200px; min-height: 200px; display:flex; align-items:center; justify-content:center; }
.pair-overlay .qr-box img, .pair-overlay .qr-box canvas{ display:block; }
.pair-overlay .code{ font-family: var(--font-mono); font-size: 1.9rem; letter-spacing:.18em; color: var(--ink); margin-top: var(--s-1); }
.pair-card{ margin-top: var(--s-3); text-align:center; }

/* Home (/app): /css/home.css */
/* the studio itself (stepper, stage, coach, cue, rows): /css/studio.css */

/* ---------------------------------------------------------------- caption style picker (Home > brief editor) */
.capstyle-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); max-width: 620px; }
.capstyle-card{ display:flex; flex-direction:column; gap: var(--s-2); text-align:left; padding: var(--s-2); border-radius: var(--radius-md);
  background: var(--bg-sunken); border: 2px solid var(--line-strong); color: var(--ink); cursor:pointer; font: inherit;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.capstyle-card:hover{ border-color: var(--ink-faint); }
.capstyle-card[aria-checked="true"]{ border-color: var(--sage); background: var(--sage-dim); }
.capstyle-media{ display:block; aspect-ratio: 9 / 16; border-radius: var(--radius-sm); overflow:hidden; background:#000; }
.capstyle-media img, .capstyle-media video{ display:block; width:100%; height:100%; object-fit:cover; }
.capstyle-name{ font-weight:600; font-size:.92rem; padding: 0 var(--s-1); }
.capstyle-card[aria-checked="true"] .capstyle-name::before{ content:'✓ '; color: var(--sage); }
.capstyle-desc{ font-size:.8rem; line-height:1.4; color: var(--ink-dim); padding: 0 var(--s-1) var(--s-1); }
@media (max-width: 560px){
  .capstyle-grid{ grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); }
  .capstyle-card{ padding: var(--s-1); }
  .capstyle-desc{ font-size:.72rem; }
  .capstyle-name{ font-size:.8rem; }
}