/* Magic Vocals — Live landing tokens + plugin styles
   Ported from magic-vocals-design-handoff/magic-vocals-app/src/styles/
   plugin.css + tokens.css. Scoped to .mv-shell and .live so the marketing
   sections and plugin don't collide. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-base: #000000;
  --bg-deep: #05050a;
  --bg-elev: #0a0a14;
  --bg-elev-2: #14141c;

  --primary:        #a7a5ff;
  --primary-dim:    #645cff;
  --primary-deep:   #4b44ff;
  --primary-violet: #bb44ff;
  --accent-bg:        rgba(167, 165, 255, 0.08);
  --accent-bg-active: rgba(167, 165, 255, 0.15);
  --accent-border:    rgba(167, 165, 255, 0.25);
  --accent-border-strong: rgba(167, 165, 255, 0.55);

  --on-surface:          #f0eeff;
  --on-surface-bright:   #ffffff;
  --on-surface-variant:  #9795b8;
  --on-surface-dim:      rgba(199, 196, 216, 0.5);

  --line:       rgba(255,255,255,0.08);
  --line-soft:  rgba(255,255,255,0.04);
  --line-strong:rgba(255,255,255,0.16);

  --ink-dim:    #9795b8;
  --ink-mute:   rgba(255,255,255,0.45);

  --c-power:   #ef4444;
  --c-focus:   #ff7ca8;
  --c-fat:     #ff7ca8;
  --c-doubler: #f5c518;
  --c-reverb:  #f5c518;
  --c-delay:   #f5c518;
  --c-clarity: #a7a5ff;
  --c-deess:   #a7a5ff;
  --c-input:   #38d07a;

  --rose:     #ff7ca8;
  --iris:     #a7a5ff;
  --gold:     #f5c518;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
}

html, body {
  margin: 0;
  background: var(--bg-base);
  color: var(--on-surface);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.live, .live * { box-sizing: border-box; }
.live { background: var(--bg-base); color: var(--on-surface); font-family: var(--font-main); }

/* =========================================================
   PLUGIN SHELL (ported from plugin.css, unchanged semantics)
   ========================================================= */

.mv-shell, .mv-shell * { user-select: none; -webkit-user-select: none; box-sizing: border-box; }
.mv-shell input { user-select: text; -webkit-user-select: text; }

.mv-shell {
  width: 1000px;
  height: 660px;
  flex-shrink: 0;
  position: relative;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(100,92,255,.1), transparent 60%),
    linear-gradient(180deg, #08080f 0%, #05050a 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.8), 0 0 80px -20px rgba(167,165,255,.18);
  color: var(--on-surface);
  font-family: var(--font-main);
  transform-origin: center center;
  transform: scale(var(--mv-scale, 1));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.mv-shell.is-bypass-global::before {
  content: 'BYPASS — RAW SIGNAL';
  position: absolute; inset: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 52px; font-weight: 900; letter-spacing: .14em;
  background: rgba(5,5,10,0.55);
  color: #fbbf24;
  text-shadow: 0 0 40px rgba(251,191,36,.6), 0 0 80px rgba(251,191,36,.3);
  pointer-events: none;
}

/* ── Header ── */
.mv-header {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  padding: 20px 24px;
  gap: 24px;
  background: linear-gradient(180deg, rgba(100,92,255,.05), transparent 70%), #06060c;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}
.mv-wordmark {
  font-size: 28px; font-weight: 800; letter-spacing: .12em;
  color: #fff; text-transform: uppercase; line-height: 1;
  text-shadow: 0 2px 30px rgba(167,165,255,.25);
}
.mv-wordmark small {
  display:block; margin-top:4px;
  font-size: 9px; font-weight: 700; letter-spacing: .3em;
  color: var(--primary); opacity: .8;
}
.mv-preset-row { display:flex; align-items:center; gap:10px; }
.mv-preset-big {
  height: 36px; flex: 1; max-width: 320px;
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px;
  background: linear-gradient(180deg, #0c0c18, #070710);
  border: 1px solid rgba(167,165,255,.2);
  border-radius: 6px;
  font-weight: 700; font-size: 14px; color: #fff; letter-spacing: .02em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(167,165,255,.08);
}
.mv-preset-big:hover { border-color: var(--accent-border-strong); }
.mv-preset-wrap { position: relative; flex: 1; max-width: 320px; }
.mv-preset-wrap .mv-preset-big { width: 100%; max-width: none; }

.mv-nudge {
  width: 32px; height: 36px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; padding: 0;
}
.mv-nudge svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mv-nudge:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }

.mv-chip {
  height: 28px; padding: 0 12px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  cursor: pointer; font-family: var(--font-main);
}
.mv-chip:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.mv-chip--bypass-on {
  background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.55); color: #fbbf24;
  box-shadow: 0 0 14px rgba(245,158,11,.3);
}
.mv-sig {
  height: 44px; display: flex; align-items: center; justify-content: flex-end; opacity: .95;
}
.mv-sig img {
  height: 100%; width: auto; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(245,197,24,.55)) drop-shadow(0 0 3px rgba(245,197,24,.7));
}

/* ── Hint glows — "look here" affordances when the plugin is live ── */
.mv-preset-row--hint .mv-preset-wrap,
.mv-preset-row--hint .mv-nudge {
  position: relative;
}
.mv-preset-row--hint .mv-preset-wrap::before,
.mv-preset-row--hint .mv-nudge::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 9px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px rgba(245,197,24,.55),
    0 0 18px 2px rgba(245,197,24,.5),
    0 0 36px 4px rgba(245,197,24,.25);
  animation: mv-hint-gold 1.8s ease-in-out infinite;
}
.mv-preset-row--hint .mv-nudge::before { inset: -4px; border-radius: 7px; }

@keyframes mv-hint-gold {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(245,197,24,.35),
      0 0 10px 1px rgba(245,197,24,.3),
      0 0 22px 2px rgba(245,197,24,.12);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(245,197,24,.7),
      0 0 22px 3px rgba(245,197,24,.6),
      0 0 48px 6px rgba(245,197,24,.35);
  }
}

/* Bypass chip — Clean-Up-blue pulse */
.mv-chip--bypass.mv-chip--hint {
  position: relative;
  border-color: rgba(125,211,252,.6) !important;
  background: rgba(125,211,252,.12) !important;
  color: #7dd3fc !important;
}
.mv-chip--bypass.mv-chip--hint::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 8px;
  pointer-events: none;
  animation: mv-hint-blue 1.8s ease-in-out infinite;
}
@keyframes mv-hint-blue {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(125,211,252,.35),
      0 0 10px 1px rgba(125,211,252,.3),
      0 0 22px 2px rgba(125,211,252,.12);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(125,211,252,.75),
      0 0 22px 3px rgba(125,211,252,.65),
      0 0 48px 6px rgba(125,211,252,.4);
  }
}
/* When bypass is ACTIVE, the pulse switches to amber matching mv-chip--bypass-on */
.mv-chip--bypass.mv-chip--hint.mv-chip--bypass-on::before {
  animation: mv-hint-amber 1.2s ease-in-out infinite;
}
@keyframes mv-hint-amber {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(251,191,36,.4), 0 0 14px 2px rgba(251,191,36,.35); }
  50%      { box-shadow: 0 0 0 2px   rgba(251,191,36,.85),0 0 28px 4px rgba(251,191,36,.7); }
}

/* ── Preset chip strip (hero, under A/B bar) ── */
.live .preset-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #0a0a14 0%, #05050a 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-family: var(--font-main);
}
.live .preset-strip__label {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}
.live .preset-strip__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.live .preset-chip {
  --chip-color: #a7a5ff;
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  cursor: pointer;
  font-family: var(--font-main);
  transition: all .12s;
}
.live .preset-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--chip-color); opacity: .55;
  box-shadow: 0 0 4px var(--chip-color);
}
.live .preset-chip:hover {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
}
.live .preset-chip:hover .preset-chip__dot { opacity: 1; }
.live .preset-chip.on {
  color: #fff;
  background: color-mix(in srgb, var(--chip-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--chip-color) 55%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--chip-color) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.live .preset-chip.on .preset-chip__dot { opacity: 1; box-shadow: 0 0 8px var(--chip-color); }
.live .preset-chip__real {
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 800; letter-spacing: .14em;
  padding: 2px 5px;
  color: #7dd3fc;
  background: rgba(125,211,252,.12);
  border: 1px solid rgba(125,211,252,.35);
  border-radius: 3px;
  margin-left: 4px;
}

/* ── Sample tabs — vocal source selector ── */
.live .sample-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #0a0a14 0%, #05050a 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-family: var(--font-main);
}
.live .sample-tabs__label {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .24em;
  color: rgba(255,255,255,.4);
  margin-right: 8px;
  white-space: nowrap;
}
.live .sample-tab {
  height: 28px; padding: 0 12px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  cursor: pointer; font-family: var(--font-main);
  transition: all .12s;
}
.live .sample-tab:hover { color: #fff; border-color: rgba(255,255,255,.24); }
.live .sample-tab.on {
  background: var(--accent-bg-active);
  border-color: var(--accent-border-strong);
  color: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ── Main grid ── */
.mv-main {
  flex: 1;
  display: grid;
  grid-template-columns: 250px 1fr 220px 150px;
  gap: 1px;
  background: rgba(255,255,255,.04);
  min-height: 0;
}
.mv-zone {
  background: linear-gradient(180deg, #0a0a14 0%, #05050a 100%);
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.mv-zone-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px; flex-shrink: 0;
}
.mv-zone-num {
  width: 22px; height: 22px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 11px; font-weight: 800; color: var(--primary);
  background: var(--accent-bg-active);
  border: 1px solid var(--accent-border);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.1);
}
.mv-zone-title {
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}

/* ── Controls ── */
.mv-controls {
  display: flex; gap: 10px; flex: 1; min-height: 0; align-items: stretch;
}
.mv-control {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  min-width: 0; position: relative;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.mv-control.is-solo { transform: scale(1.08); }
.mv-control--narrow { flex: 0 0 52px; gap: 6px; }
.mv-control--meter { flex: 0 0 54px; }
.mv-stereo { gap: 2px; justify-content: center; position: relative; }

.mv-control-label {
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-surface-variant);
  text-align: center;
}
.mv-control-icon {
  width: 28px; height: 28px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
}
.mv-control-icon svg { width:100%; height:100%; }
.mv-control-icon svg:not(.mv-brand-icon) { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mv-brand-icon { width: 100%; height: 100%; display:block; }
.mv-control-icon--foot { width: 20px; height: 20px; opacity: .5; }
.mv-control-icon.is-clickable { cursor: pointer; }
.mv-control-icon.is-clickable:hover { transform: scale(1.08); }

/* ── Slider ── */
.mv-slider {
  flex: 1; width: 100%;
  min-width: 28px; max-width: 44px;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 0;
  cursor: ns-resize;
}
.mv-slider-track {
  width: 6px; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  position: relative;
}
.mv-slider-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 85%, #fff) 0%, var(--fill) 100%);
  border-radius: 3px;
  box-shadow: 0 0 calc(6px + var(--g, 0) * 22px) color-mix(in srgb, var(--fill) calc(30% + var(--g, 0) * 55%), transparent);
  transition: height .28s cubic-bezier(.22,1,.36,1), box-shadow .12s ease-out;
}
.mv-slider-knob {
  position: absolute; left: 50%;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #e8e6ff 40%, #a7a5ff 100%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    0 0 calc(6px + var(--g, 0) * 24px) color-mix(in srgb, var(--fill) calc(30% + var(--g, 0) * 60%), transparent),
    inset 0 1px 1px rgba(255,255,255,.6);
  transform: translate(-50%, 50%);
  cursor: grab;
  transition: bottom .28s cubic-bezier(.22,1,.36,1);
}
.mv-slider-knob:active { cursor: grabbing; }

.mv-slider-cluster {
  flex: 1; width: 100%;
  display: flex; align-items: stretch; justify-content: center; gap: 3px; min-height: 0;
}

/* ── Meter ── */
.mv-meter {
  width: 8px; flex: 0 0 8px; min-width: 8px;
  display: flex; flex-direction: column-reverse; gap: 1px;
  padding: 2px;
  background: #000;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 2px;
}
.mv-meter-seg { flex: 1; background: rgba(255,255,255,.03); border-radius: 1px; min-height: 2px; }
.mv-meter-seg.on { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.mv-meter-seg.on.hot  { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }
.mv-meter-seg.on.peak { background: #ff3b3b; box-shadow: 0 0 8px rgba(255,59,59,.9); }

/* ── Optimal bracket ── */
.mv-optimal-bracket {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 34px;
  pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.85) 0 6px, transparent 6px) top left/6px 1.5px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 6px), rgba(255,255,255,.85) calc(100% - 6px)) top right/100% 1.5px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.85) 0 6px, transparent 6px) bottom left/6px 1.5px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 6px), rgba(255,255,255,.85) calc(100% - 6px)) bottom right/100% 1.5px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.85)) left top/1.5px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.85)) right top/1.5px 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.2));
}
.mv-optimal-arrow {
  position: absolute;
  width: 54px;
  pointer-events: none;
  color: rgba(255,255,255,.88);
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.mv-optimal-arrow--left  { left: -58px; }
.mv-optimal-arrow--right { right: -58px; }
.mv-optimal-arrow-label {
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  color: rgba(255,255,255,.88); text-align: center; line-height: 1.2;
}

/* ── Voice type pills ── */
.mv-voicetype { display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: 6px; }
.mv-voice-pill {
  width: 32px; height: 32px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.4);
  cursor: pointer; transition: all .15s;
}
.mv-voice-pill:hover { color:#fff; border-color: rgba(255,255,255,.25); }
.mv-voice-pill.on {
  background: var(--accent-bg-active);
  border-color: var(--accent-border-strong);
  color: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 40%, transparent);
}
.mv-voice-pill svg { width: 16px; height: 16px; stroke: currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mv-voice-pill svg.mv-brand-icon { width: 18px; height: 18px; stroke-width: 1.8; }

/* ── Rotary knob ── */
.mv-output-knob {
  width: 38px; height: 38px; border-radius: 50%;
  position: relative; flex-shrink: 0; cursor: grab;
  background: linear-gradient(180deg, #252542 0%, #15152a 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.mv-output-knob:active { cursor: grabbing; }
.mv-output-knob::before {
  content:''; position:absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2b2b4a 0%, #1c1c36 100%);
  border: 1px solid rgba(0,0,0,.3);
}
.mv-output-knob::after {
  content:''; position:absolute; top: 4px; left: 50%;
  width: 3px; height: 7px;
  background: var(--primary);
  box-shadow: 0 0 4px color-mix(in srgb, var(--primary) 50%, transparent);
  transform-origin: center 15px;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
  border-radius: 2px; z-index: 1;
}

/* ── Value readout ── */
.mv-value {
  font-size: 10px; font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  min-height: 12px;
  opacity: .85;
  cursor: default;
}

/* ── Bypass & solo dimming ── */
.mv-main.is-bypassed .mv-slider-fill {
  background: linear-gradient(180deg, #555 0%, #333 100%) !important;
  box-shadow: none !important;
}
.mv-main.is-bypassed .mv-slider-knob {
  background: radial-gradient(circle at 35% 30%, #aaa 0%, #777 40%, #444 100%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.2) !important;
}
.mv-main.is-bypassed .mv-control-icon { filter: grayscale(1) brightness(.65) !important; color: #888 !important; }

.mv-control.is-dim { opacity: .32; filter: grayscale(.6); transition: opacity .3s, filter .3s; }
.mv-control.is-solo .mv-control-label { color: #fff; }

/* Locked mode — hero listen: zones don't respond to clicks/drags */
.mv-main.is-locked { pointer-events: none; cursor: default; }
.mv-main.is-locked .mv-slider { cursor: default; }
.mv-main.is-locked .mv-slider-knob { cursor: default; }
.mv-main.is-locked .mv-voice-pill { cursor: default; pointer-events: none; }
.mv-main.is-locked .mv-output-knob { cursor: default; pointer-events: none; }

/* =========================================================
   LANDING SECTIONS
   ========================================================= */

.live .h1 { font-size: 84px; font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; color: #fff; }
.live .h2 { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; color: #fff; }
.live .h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.live .h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: #fff; }
.live .body-lg { font-size: 19px; line-height: 1.55; font-weight: 400; color: var(--ink-dim); }
.live .body    { font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--ink-dim); }
.live .body-sm { font-size: 14px; line-height: 1.5;  font-weight: 400; color: var(--ink-dim); }
.live .kicker  { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--iris); }
.live .mono    { font-family: var(--font-mono); }
.live b, .live strong { color: #fff; font-weight: 700; }

.live .section { position: relative; padding: 140px 96px; }
.live .section--dim { background: var(--bg-deep); }

.live .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(167,165,255,0.08);
  border: 1px solid rgba(167,165,255,0.24);
  color: var(--iris);
  font-size: 12px; font-weight: 600;
}
.live .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 6px var(--iris); }

.live .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 32px; border-radius: 100px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap; font-family: var(--font-main);
}
.live .btn--primary {
  background: var(--iris); color: #0a0820;
  box-shadow: 0 10px 40px -10px rgba(167,165,255,0.6);
}
.live .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 48px -10px rgba(167,165,255,0.9); }
.live .btn--rose {
  background: var(--rose); color: #1a0410;
  box-shadow: 0 10px 40px -10px rgba(255,124,168,0.6);
}
.live .btn--rose:hover { transform: translateY(-1px); box-shadow: 0 14px 48px -10px rgba(255,124,168,0.9); }
.live .btn--ghost {
  background: transparent; color: #fff;
  border-color: var(--line-strong);
}
.live .btn--ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.live .btn--gold {
  background: var(--gold); color: #1a1004;
  box-shadow: 0 10px 40px -10px rgba(245,197,24,0.55);
}
.live .btn--gold:hover { transform: translateY(-1px); box-shadow: 0 14px 48px -10px rgba(245,197,24,0.85); }
.live .btn--lg { padding: 22px 40px; font-size: 17px; }
.live .btn--sm { padding: 11px 20px; font-size: 13px; }

.live .glow-iris { background: radial-gradient(ellipse at center, rgba(167,165,255,0.32), transparent 62%); filter: blur(50px); pointer-events: none; }
.live .glow-rose { background: radial-gradient(ellipse at center, rgba(255,124,168,0.28), transparent 62%); filter: blur(50px); pointer-events: none; }
.live .glow-gold { background: radial-gradient(ellipse at center, rgba(245,197,24,0.22), transparent 62%); filter: blur(50px); pointer-events: none; }

/* Top nav */
.live .nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(5,5,10,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.live .nav__links { display: flex; gap: 32px; font-size: 13px; color: var(--ink-dim); }
.live .nav__links a { color: inherit; text-decoration: none; cursor: pointer; }
.live .nav__links a:hover { color: #fff; }

/* Hero container: plugin centered, text around it */
.live .hero {
  position: relative;
  padding: 80px 48px 96px;
  overflow: hidden;
}
.live .hero-head {
  max-width: 1040px; margin: 0 auto 56px; text-align: center;
}
.live .hero-gold {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #f5c518;
  background: linear-gradient(180deg, #ffe27a 0%, #f5c518 45%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 18px rgba(245, 197, 24, 0.55),
    0 0 42px rgba(245, 197, 24, 0.28);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35));
  padding: 0 0.04em;
}
.live .hero-stage {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 740px;
}
.live .hero-stage .mv-shell { transform-origin: center top; }

/* ─────────────────────────────────────────────────────────────────
   A/B control bar — visual language matched to the plugin:
   square corners (5px), .10em tracked uppercase, rgba white borders,
   mv-chip/mv-zone-head patterns instead of pills.
   ───────────────────────────────────────────────────────────────── */
.live .ab-bar {
  display: flex; align-items: stretch; gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #0a0a14 0%, #05050a 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 24px 60px -18px rgba(0,0,0,.7),
    0 0 48px -18px rgba(167,165,255,.28);
  font-family: var(--font-main);
}
.live .ab-bar--real { border-color: rgba(125,211,252,0.32); }

/* ── Transport (square play/pause + now-playing readout) ── */
.live .ab-cluster {
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px 0 4px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.live .ab-transport {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg-active);
  border: 1px solid var(--accent-border-strong);
  border-radius: 6px;
  color: var(--primary);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform .12s, background .15s, box-shadow .15s;
}
.live .ab-transport:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); transform: translateY(-1px); }
.live .ab-transport:active { transform: translateY(0); }
.live .ab-transport.is-playing {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.55);
  color: #fbbf24;
  box-shadow: 0 0 16px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.live .ab-now { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.live .ab-now__label {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.live .ab-now__name {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}

/* ── A/B segmented switch — same vocabulary as mv-chip / zone-head ── */
.live .ab-seg {
  display: flex; padding: 3px; gap: 3px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
}
.live .ab-seg__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .12s;
}
.live .ab-seg__btn:hover { color: rgba(255,255,255,.85); }
.live .ab-seg__letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; letter-spacing: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px;
  color: rgba(255,255,255,.7);
}
.live .ab-seg__name { line-height: 1; }
.live .ab-seg__btn.on {
  background: var(--accent-bg-active);
  border-color: var(--accent-border-strong);
  color: var(--primary);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
.live .ab-seg__btn.on .ab-seg__letter {
  background: var(--primary); border-color: var(--primary); color: #0a0820;
}
.live .ab-seg__btn--a.on {
  background: rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.55);
  color: #fbbf24;
  box-shadow: 0 0 14px rgba(251,191,36,.3), inset 0 1px 0 rgba(255,255,255,.05);
}
.live .ab-seg__btn--a.on .ab-seg__letter {
  background: #fbbf24; border-color: #fbbf24; color: #1a0f00;
}

/* ── Scrubber ── */
.live .ab-scrub-wrap {
  flex: 1; min-width: 180px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
}
.live .scrub {
  flex: 1;
  display: flex; align-items: center; gap: 3px; height: 32px;
  padding: 0; cursor: pointer;
}
.live .scrub__bar {
  width: 2px; border-radius: 1px;
  background: rgba(167,165,255,0.22);
  transition: background 0.1s, box-shadow 0.1s;
}
.live .scrub__bar.on { background: var(--iris); box-shadow: 0 0 6px var(--iris); }
.live .ab-time {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
.live .ab-time__sep { color: rgba(255,255,255,.25); }
.live .ab-time__total { color: rgba(255,255,255,.4); }

/* ── Status LED — matches mv-chip--bypass-on vocabulary ── */
.live .ab-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; align-self: center;
  font-family: var(--font-main);
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
}
.live .ab-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.live .ab-status--raw { color: #fbbf24; }
.live .ab-status--raw .ab-status__dot { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.live .ab-status--wet { color: var(--primary); }
.live .ab-status--wet .ab-status__dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.live .ab-status--real { color: #7dd3fc; }
.live .ab-status--real .ab-status__dot {
  background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc;
  animation: mv-pulse 1.8s ease-in-out infinite;
}
@keyframes mv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Zone caption floats */
.live .zone-caption {
  position: absolute; padding: 14px 18px;
  background: rgba(10,10,20,0.88);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #fff;
  max-width: 260px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.live .zone-caption__kicker {
  font-size: 9px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--iris); text-transform: uppercase; margin-bottom: 6px;
}

/* Preset tile */
.live .preset-tile {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.live .preset-tile:hover { transform: translateY(-3px); border-color: rgba(167,165,255,0.35); }
.live .preset-tile.on {
  border-color: var(--accent-border-strong);
  box-shadow: 0 0 0 1px var(--accent-border-strong), 0 12px 40px -10px rgba(167,165,255,0.3);
  background: linear-gradient(180deg, rgba(167,165,255,0.08), var(--bg-elev));
}
.live .preset-tile__genre {
  font-size: 9px; font-weight: 800; letter-spacing: 0.24em; color: var(--ink-mute);
  text-transform: uppercase; margin-bottom: 10px;
}
.live .preset-tile__name {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 18px;
}
.live .preset-tile__mini {
  display: flex; gap: 4px; align-items: end; height: 32px;
}
.live .preset-tile__bar { width: 4px; border-radius: 2px; }
.live .preset-tile__play {
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
}
.live .preset-tile.on .preset-tile__play {
  background: var(--iris); border-color: var(--iris);
  box-shadow: 0 0 16px var(--iris);
}
.live .preset-tile.on .preset-tile__play svg path { fill: #0a0820; }

/* REAL A/B badge — only on presets with real before/after stems */
.live .preset-tile--real { border-color: rgba(125,211,252,0.35); }
.live .preset-tile--real.on {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 1px rgba(125,211,252,0.6), 0 14px 44px -12px rgba(125,211,252,0.4);
  background: linear-gradient(180deg, rgba(125,211,252,0.1), var(--bg-elev));
}
.live .preset-tile__badge {
  position: absolute; top: 18px; left: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 7px; border-radius: 999px;
  background: rgba(125,211,252,0.14);
  border: 1px solid rgba(125,211,252,0.4);
  color: #7dd3fc;
  font-size: 9px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.live .preset-tile__badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 8px #7dd3fc;
  animation: mv-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes mv-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.live .preset-tile--real .preset-tile__genre { margin-top: 18px; }

/* AUTO GAIN toggle — sits below the Output knob in the End Here zone.
   Compact pill with an iris LED on the left; LED dims when off, lights
   up + pulsing glow when on. Color matches the iris accent already used
   for Clarity / De-Ess so it reads as "clean / final stage" tooling,
   not a loud creative effect. Ported from magicVocals/app/src/styles/
   plugin.css (directive 13). */
.live .mv-auto-toggle {
  appearance: none;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.45);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.live .mv-auto-toggle:hover {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.22);
}
.live .mv-auto-toggle.on {
  color: #cfceff;
  background: rgba(167,165,255,.10);
  border-color: rgba(167,165,255,.45);
}
.live .mv-auto-toggle.on:hover {
  color: #fff;
  border-color: rgba(167,165,255,.7);
}
.live .mv-auto-led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(167,165,255,.18);
  box-shadow: inset 0 0 2px rgba(0,0,0,.5);
  transition: background .12s ease, box-shadow .12s ease;
  flex-shrink: 0;
}
.live .mv-auto-toggle.on .mv-auto-led {
  background: #a7a5ff;
  box-shadow: 0 0 6px rgba(167,165,255,.85), 0 0 12px rgba(167,165,255,.45);
}
.live .mv-auto-label { line-height: 1; }
/* In bypass mode, AUTO follows the rest of the rig and goes cold gray. */
.live .mv-main.is-bypassed .mv-auto-toggle {
  color: rgba(255,255,255,.25) !important;
  border-color: rgba(255,255,255,.06) !important;
  background: transparent !important;
}
.live .mv-main.is-bypassed .mv-auto-toggle .mv-auto-led {
  background: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* Effect story row */
.live .effect-card {
  padding: 28px 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  height: 100%;
}
.live .effect-card__dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}
.live .effect-card__tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Effect card with embedded plugin Control (icon + fader + value).
   The Control component is the same one used by the plugin shell —
   shrunk to fit a narrow card column and laid out side-by-side with
   the section copy so the visitor sees the actual control they're
   reading about. The Control here is purely visual (audio is the
   stem player wired to the Isolate button) — pointer-events: none
   on the wrapper makes that explicit so the visitor doesn't think
   dragging affects the sound. */
.live .effect-card--with-control {
  padding: 22px 22px 24px;
  transition: opacity .25s ease, filter .25s ease;
  position: relative;
}
/* Close button on the active EffectStory card. Top-right corner,
   stops the preview audio and clears the highlighted state so all
   cards return to their default look. ESC also exits — handled in
   MagicVocalsApp. */
.live .effect-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  z-index: 2;
}
.live .effect-card__close:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

/* Transport panel — replaces the "Isolate {fx}" button on the active
   FX card. Two rows:
   row 1: ▶/⏸ play button + animated meter bars (paused when audio
          paused, animating when playing).
   row 2: A/B segmented toggle between DRY and the effect, mirrors
          audioMode so the user can flip without leaving the card. */
.live .effect-card__transport {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.live .effect-card__transport-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
}
.live .effect-card__play-btn {
  appearance: none;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--effect-color, var(--iris));
  color: #0a0820;
  border: 1px solid var(--effect-color, var(--iris));
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 14px color-mix(in srgb, var(--effect-color, var(--iris)) 35%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.live .effect-card__play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px color-mix(in srgb, var(--effect-color, var(--iris)) 55%, transparent);
}

/* Meters — N flex bars, animated via keyframes. Static when paused
   (animation-play-state: paused) so the visitor sees the audio is
   stopped at a glance. */
.live .effect-card__meters {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 24px;
  overflow: hidden;
}
.live .effect-card__meter-bar {
  flex: 1;
  background: var(--effect-color, var(--iris));
  border-radius: 1px;
  transform-origin: bottom;
  transform: scaleY(0.18);
  opacity: 0.85;
  animation-name: effect-card-meter-pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
}
.live .effect-card.is-playing .effect-card__meter-bar {
  animation-play-state: running;
}
/* DRY mode → meters go neutral gray. Reads as "no FX in the chain
   right now" so the visitor sees the bypass at a glance, not just by
   which side of the A/B toggle is highlighted. */
.live .effect-card__transport.is-dry .effect-card__meter-bar {
  background: rgba(255,255,255,0.32);
  opacity: 0.7;
}
@keyframes effect-card-meter-pulse {
  0%   { transform: scaleY(0.16); opacity: 0.55; }
  35%  { transform: scaleY(0.85); opacity: 1; }
  60%  { transform: scaleY(0.42); opacity: 0.78; }
  100% { transform: scaleY(0.95); opacity: 0.95; }
}

/* Bypass A/B toggle — segmented control. Active side fills with the
   effect color (B) or a neutral gray (A · DRY). Mirrors the visual
   pattern of the hero ABBar so visitors recognize it. */
.live .effect-card__bypass-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.live .effect-card__bypass-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(255,255,255,0.45);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.live .effect-card__bypass-btn:hover {
  color: rgba(255,255,255,0.85);
}
.live .effect-card__bypass-btn.on {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
/* The "B" / effect side glows in the effect color when active. */
.live .effect-card__bypass-btn:nth-child(2).on {
  background: color-mix(in srgb, var(--effect-color, var(--iris)) 14%, transparent);
  border-color: color-mix(in srgb, var(--effect-color, var(--iris)) 50%, transparent);
  color: #fff;
}
.live .effect-card__bypass-letter {
  font-size: 9px;
  letter-spacing: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
.live .effect-card__bypass-btn.on .effect-card__bypass-letter {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.live .effect-card__bypass-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
/* When some sibling card is active, dim the rest so the visitor's
   attention goes to the highlighted FX. The active card keeps its
   inline border + glow set via JSX. */
.live .effect-card--with-control.is-dim {
  opacity: 0.35;
  filter: saturate(0.7);
}
.live .effect-card--with-control.is-active {
  opacity: 1;
}
.live .effect-card__head {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: stretch;
}
.live .effect-card__control-wrap {
  /* Mini-frame around the Control so it reads as a sliced-out chunk
     of the plugin shell. Background and border match .mv-shell's main
     surface tones. pointer-events: none + user-select: none make the
     fader purely visual — visitor doesn't think dragging affects the
     audio (the Isolate button does). */
  display: flex;
  justify-content: center;
  padding: 10px 6px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
}
/* Compact the embedded Control. The plugin's .mv-control was sized
   for the full shell — these overrides keep the same look but fit a
   ~80px-wide column. */
.live .effect-card__control-wrap .mv-control {
  width: 76px;
  gap: 8px;
}
.live .effect-card__control-wrap .mv-control-label {
  font-size: 9px;
  letter-spacing: 0.16em;
}
.live .effect-card__control-wrap .mv-control-icon {
  width: 28px; height: 28px;
}
.live .effect-card__control-wrap .mv-slider {
  height: 110px;
}
.live .effect-card__control-wrap .mv-value {
  font-size: 10px;
}
.live .effect-card__control-wrap .mv-control-icon--foot {
  display: none;
}
.live .effect-card__copy {
  min-width: 0;
}

/* Granular Control card variant — top-of-card mini-frame holding a
   real plugin widget (AUTO pill, click-to-bypass icon pair, zone-head)
   so the visitor recognizes the element being explained. Same mini-
   frame look as effect-card__control-wrap but laid out horizontally
   above the copy instead of beside it, since the widgets here are
   horizontal pills/labels rather than vertical Control columns. */
.live .effect-card--with-widget {
  padding: 22px 22px 24px;
}
.live .effect-card__widget-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 16px 14px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
}
.live .effect-card__widget-frame--row {
  gap: 14px;
}
.live .mv-bypass-arrow {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0;
}

/* Chrys photo gallery */
.live .gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.live .gallery__item {
  border-radius: 16px; overflow: hidden; background: var(--bg-elev);
  border: 1px solid var(--line);
  position: relative;
}
.live .gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.live .gallery__item:nth-child(1) { grid-row: span 2; }

/* FAQ */
.live .faq-row {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px;
  cursor: pointer;
}
.live .faq-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Footer */
.live .footer {
  padding: 64px 96px 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #050508;
}
.live .footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.live .footer__col a { display: block; margin-bottom: 10px; font-size: 13px; color: var(--ink-dim); text-decoration: none; }
.live .footer__col a:hover { color: #fff; }
.live .footer__heading { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: var(--iris); margin-bottom: 18px; text-transform: uppercase; }

/* Scroll cue */
.live .scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--ink-mute); text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.live .scroll-cue__line { width: 1px; height: 40px; background: linear-gradient(180deg, transparent, var(--iris)); }

/* Mini plugin (sidebar reference) */
.live .mini-plugin-wrap {
  position: relative;
  width: 300px; height: 198px;
  pointer-events: none;
}
.live .mini-plugin-wrap .mv-shell {
  transform-origin: top left;
  transform: scale(0.3);
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (≤ 768 px)
   ─────────────────────────────────────────────────────────────────────
   Per directives/18_magic_vocals_mobile_lp.md. Same JSX, fluid layout.
   Plugin shell drops its fixed 1000×660 dimensions and lays its 4
   zones out vertically. Within each zone, controls scroll-snap
   horizontally so every control keeps a comfortable touch size
   instead of shrinking unreadably.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* ── Plugin shell: scale-to-fit (NO internal reflow) ──
     User feedback: the vertical-stacked-zones reflow felt "torto".
     Better to show the whole plugin as a single scaled-down unit so
     the visitor sees the full layout — header, all 4 zones side by
     side, presets, AUTO. Targets are smaller than HIG ideal but the
     visual integrity matches the actual product.

     `zoom` (not `transform: scale`) because zoom affects LAYOUT —
     the page reserves the scaled box, no overflow, no empty padding.
     calc((100vw - 24px) / 1000px) yields a unitless ratio (units
     cancel) so the shell fluidly fits any mobile width with breathing
     room at the sides. */
  .live .mv-shell {
    zoom: calc((100vw - 24px) / 1000px);
  }
  /* Reset the inline transform on the plugin wrapper so it doesn't
     compound with the zoom on the shell. */
  .live .hero-stage > div > div[style*="transform"],
  .live #playground div[style*="transform: scale"],
  .live #playground div[style*="transform:scale"] {
    transform: none !important;
  }

  /* The bypass-overlay text was 52px — keep small for the zoomed view. */
  .live .mv-shell.is-bypass-global::before {
    font-size: 52px;
    letter-spacing: .14em;
  }

  /* Sample tabs + preset chip strip: NOT inside the plugin, so they
     don't get scaled. Keep them mobile-friendly horizontal scrollers. */
  .live .sample-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .live .sample-tab {
    font-size: 10px;
    padding: 6px 10px;
  }
  .live .preset-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .live .preset-strip__chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 4px 12px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .live .preset-strip__chips::-webkit-scrollbar { display: none; }
  .live .preset-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Hide the guided tour button on mobile — overlay placement
     doesn't survive viewport-scale and the visitor doesn't need it
     here per Chrys feedback. */
  .live .playground-tour-btn { display: none !important; }
}

@media (max-width: 768px) {
  /* ── Section + typo scaling ── */
  .live .section { padding: 56px 18px; }
  .live .h1 { font-size: clamp(36px, 11vw, 56px); letter-spacing: -0.03em; line-height: 1.04; }
  .live .h2 { font-size: clamp(28px, 7.5vw, 40px); line-height: 1.08; letter-spacing: -0.02em; }
  .live .h3 { font-size: 20px; line-height: 1.18; letter-spacing: -0.01em; }
  .live .h4 { font-size: 17px; line-height: 1.25; }
  .live .body-lg { font-size: 16px; line-height: 1.55; }
  .live .body { font-size: 14px; line-height: 1.55; }

  /* Kill any horizontal grid splits used in section headers
     (1fr 1.2fr → single column). Catches Granular Control,
     Effects, Presets section header. */
  .live .section > div > div[style*="grid-template-columns"][style*="1fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 28px !important;
  }
  /* Card grids → 1-column stack at phone width. */
  .live .section div[style*="grid-template-columns: 'repeat(4, 1fr)'"],
  .live .section div[style*="grid-template-columns: repeat(4, 1fr)"],
  .live .section div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Top nav: collapse desktop links, swap in hamburger ── */
  .live .nav { padding: 12px 16px; }
  .live .nav__links {
    /* Hidden by default on mobile; revealed when .is-open is toggled
       on the parent .nav by the hamburger button. */
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: rgba(5,5,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .live .nav.is-open .nav__links { display: flex; }
  .live .nav__links a {
    padding: 14px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--on-surface);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .live .nav__links a:last-child { border-bottom: none; }
  .live .nav-burger {
    appearance: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    margin-right: 8px;
  }
  .live .nav-burger:active { background: rgba(255,255,255,0.06); }
  .live .nav .btn--sm { padding: 9px 14px; font-size: 12px; }
}
/* The hamburger button is desktop-hidden, mobile-only. */
.live .nav-burger { display: none; }
@media (max-width: 768px) {
  .live .nav-burger { display: inline-flex; }
}

@media (max-width: 768px) {
  /* ── Hero ── */
  .live .hero { padding: 32px 16px 48px; }
  .live .hero-head { margin-bottom: 28px; }
  .live .hero-stage { min-height: 0; }
  /* The hero-sub paragraph (descriptive copy) shrinks. */
  .live .hero-sub { font-size: 15px !important; line-height: 1.5 !important; margin-top: 18px !important; }

  /* ── A/B bar: stack vertically into 4 rows ── */
  .live .ab-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .live .ab-cluster {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 0 10px;
    justify-content: flex-start;
  }
  .live .ab-seg {
    align-self: stretch;
    justify-content: stretch;
  }
  .live .ab-seg__btn { flex: 1; }
  .live .ab-scrub-wrap {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0 0;
    min-width: 0;
  }
  .live .ab-status { align-self: flex-end; padding: 0; border: 0; }

  /* ── Granular Control + Effects cards: control-wrap shrinks ── */
  .live .effect-card { padding: 22px 18px 20px; }
  .live .effect-card--with-control .effect-card__head {
    grid-template-columns: 76px 1fr;
    gap: 14px;
  }
  .live .effect-card__control-wrap .mv-control { width: 64px; }
  .live .effect-card__control-wrap .mv-slider { height: 90px; }

  /* ── Final CTA ── */
  .live .section .h1[style*="fontSize"] { font-size: 42px !important; }

  /* ── FAQ: stack question + answer ── */
  .live .faq-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
  }

  /* ── Footer: collapse 5-col → 2-col → readable on phone ── */
  .live .footer { padding: 40px 16px 32px; }
  .live .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .live .footer__grid > div:first-child {
    grid-column: 1 / -1;
  }

  /* ── Creator section already has its own mobile rules in JSX
        (HiMobile photoX/Y), nothing extra needed. */
}

/* ═════════════════════════════════════════════════════════════════════
   D18 PHASE 4 — TOUCH POLISH
   ─────────────────────────────────────────────────────────────────────
   Active-state feedback, native gesture cleanup, scroll containment.
   Mostly mobile, but a few rules apply at every viewport (touch-action
   on every button kills the 300 ms double-tap delay everywhere).
   ═════════════════════════════════════════════════════════════════════ */

/* Kill the 300 ms delay + double-tap zoom on every interactive
   surface across desktop AND mobile. Browsers turn this on by
   default for any element they can't quickly classify. */
.live button,
.live a,
.live [role="button"],
.live .mv-control-icon.is-clickable,
.live .mv-zone-head.is-clickable {
  touch-action: manipulation;
}

/* Drop the gray flash iOS Safari paints on every tap. We provide
   our own :active feedback below — the gray flash on top makes the
   whole UI feel slow and chrome-y. */
.live, .mv-shell, .mv-pb-modal--inline {
  -webkit-tap-highlight-color: transparent;
}

/* Active-state feedback for the bigger interactive surfaces that
   today rely on :hover or have no pressed feedback. Hover works on
   desktop; :active works on touch. Both apply where appropriate. */
.live .btn:active { transform: translateY(1px); }
.live .btn--gold:active { box-shadow: 0 4px 16px -6px rgba(245, 197, 24, .55); }
.live .mv-chip:active { background: rgba(255,255,255,.12); }
.live .mv-nudge:active { background: rgba(255,255,255,.16); }
.live .mv-preset-big:active { border-color: var(--accent-border-strong); background: linear-gradient(180deg, #14142a, #0c0c18); }

/* Plugin controls: tactile feedback on tap. */
.live .mv-control-icon.is-clickable:active { transform: scale(0.96); }
.live .mv-zone-head.is-clickable:active { background: rgba(167,165,255,0.10); }
.live .mv-auto-toggle:active { transform: scale(0.97); }
.live .ab-transport:active { transform: scale(0.94); }
.live .ab-seg__btn:active { transform: scale(0.98); }

/* Preset browser controls: row press feedback + chip / cat / tag
   pressed states. */
.mv-pb-row:active { background: rgba(167,165,255,.14); }
.mv-pb-tag:active { transform: scale(0.97); }
.mv-pb-cat:active, .mv-pb-shortcut:active { background: rgba(167,165,255,.14); }
.mv-pb-fav:active { transform: scale(0.9); }

/* Effects card transport — bypass toggle press feedback. */
.live .effect-card__bypass-btn:active { transform: scale(0.97); }
.live .effect-card__play-btn:active { transform: scale(0.92); }
.live .effect-card__close:active { background: rgba(255,255,255,.18); }

/* Internal scroll containers don't want to bubble overscroll into
   the parent page. mv-controls + preset chips already set
   overscroll-behavior-x; preset browser sidebar gets the same. */
.mv-pb-sidebar { overscroll-behavior: contain; }
.mv-pb-list { overscroll-behavior: contain; }

@media (max-width: 768px) {
  /* Smooth-scroll into the active step's anchor when the guided
     tour advances on mobile, otherwise the spotlight can land off
     the visible area. */
  html { scroll-behavior: smooth; }

  /* Mobile-only: bigger active-state feedback so a tap is felt. */
  .live .btn:active { transform: translateY(1px) scale(0.98); }
}

/* ═════════════════════════════════════════════════════════════════════
   D18 PHASE 5 — INLINE-STYLE OVERRIDES + A11Y / PERF NOTES
   ─────────────────────────────────────────────────────────────────────
   The JSX uses many inline `style={{ paddingTop: 120, marginBottom: 80,
   gap: 80 }}`-style attributes for desktop polish. On mobile these
   inline values eat half the screen. CSS specificity means the only
   way to beat inline styles is via !important — used surgically here.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Section padding: inline paddingTop/paddingBottom (driven by the
     sectionPadding tweak, defaults to 120 px) is too tall on phones.
     Cap it with !important. Horizontal padding still comes from the
     plain rule above. */
  .live .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Section internal grid + gap fixes. Many inline grid header rows
     use `gap: 80` which pushes copy below the fold. Compress on mobile. */
  .live .section [style*="gap: 80"] { gap: 24px !important; }
  .live .section [style*="marginBottom: 80"] { margin-bottom: 28px !important; }
  .live .section [style*="marginBottom: 48"] { margin-bottom: 24px !important; }
  .live .section [style*="marginBottom: 56"] { margin-bottom: 28px !important; }
  .live .section [style*="margin-bottom: 80"] { margin-bottom: 28px !important; }
  .live .section [style*="margin-bottom: 48"] { margin-bottom: 24px !important; }
  .live .section [style*="margin-bottom: 40"] { margin-bottom: 24px !important; }

  /* Card grids → 1-col stack. The existing override targeted only
     [style*="grid-template-columns: 1fr"]; reinforce by hitting the
     literal inline JSX strings React emits. */
  .live .section [style*="gridTemplateColumns: '1fr 1.2fr'"],
  .live .section [style*="grid-template-columns: 1fr 1.2fr"],
  .live .section [style*="grid-template-columns:1fr 1.2fr"],
  .live .section [style*="grid-template-columns: repeat(4"],
  .live .section [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero plugin wrapper has `transform: scale(t.pluginScale)` inline.
     Force scale 1 on mobile so a power-user tweak doesn't shrink the
     already-narrow shell further. */
  .live .hero-stage > div > div[style*="transform"] {
    transform: none !important;
  }

  /* Hero subtitle paragraph bold-marker spacing. */
  .live .hero-sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-top: 18px !important;
  }
}

/* Reduce-motion: kill the meter pulse + hover scales for visitors
   who opt out via OS settings. Keeps the audio playback intact. */
@media (prefers-reduced-motion: reduce) {
  .live .effect-card__meter-bar {
    animation: none !important;
    transform: scaleY(0.5) !important;
  }
  .live .mv-control.is-solo,
  .live .mv-control-icon.is-clickable:hover {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  /* Playground plugin (section 02) has the same transform: scale()
     wrapper as the hero. Reset it too so the mobile-reflowed shell
     renders at native size in both spots. */
  .live #playground div[style*="transform: scale"],
  .live #playground div[style*="transform:scale"] {
    transform: none !important;
  }

  /* Tour overlay's explainer card: dock to the bottom so it never
     lands offscreen on a tall mobile portrait. The spotlight cut-out
     follows the anchor element via getBoundingClientRect() and is
     correct as-is — only the explainer card needs repositioning. */
  .live [class*="tour"][class*="explainer"],
  .live [class*="tour-card"] {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    top: auto !important;
    max-width: none !important;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  /* The flex column wrapper inside .hero-stage was sizing to its
     widest child (PresetChipStrip with 7 chips × ~120 px = ~840 px),
     pushing the layout wider than the viewport. Only .mv-shell gets
     zoomed; its siblings (ABBar, sample tabs, preset chip strip)
     render at native desktop widths. Lock the wrapper to viewport
     so the chip strip's horizontal scroll engages instead of
     overflowing the page. */
  .live .hero-stage,
  .live .hero-stage > div {
    width: 100%;
    max-width: 100%;
  }
  .live .ab-bar,
  .live .preset-strip,
  .live .sample-tabs {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .live .preset-strip__chips { max-width: 100%; }
  /* Scrub bars row: 80 bars × 3 px + gaps fits ~320 px. Allow it to
     shrink below content if the viewport is narrower than that
     instead of forcing horizontal page scroll. */
  .live .ab-scrub-wrap,
  .live .scrub { min-width: 0; overflow: hidden; }
}

/* ═════════════════════════════════════════════════════════════════════
   D18 FIX — drag-vs-scroll on mobile
   ─────────────────────────────────────────────────────────────────────
   On the playground plugin, dragging a fader (vertical pointer move)
   was triggering page scroll instead of moving the fader value.
   Browsers default touch-action: auto on every element which lets the
   page scroll on vertical swipe even over interactive controls.

   touch-action: none on the slider + rotary tells the browser "this
   element captures every gesture; don't interpret as scroll/zoom".
   The Slider component already calls preventDefault implicitly via
   pointer events; touch-action: none makes that contract explicit
   for mobile Safari + Chrome Android.
   ═════════════════════════════════════════════════════════════════════ */
.mv-slider,
.mv-slider-track,
.mv-slider-knob,
.mv-slider-cluster,
.mv-output-knob {
  touch-action: none;
}

/* ═════════════════════════════════════════════════════════════════════
   D18 FIX — mobile typography scale-down
   ─────────────────────────────────────────────────────────────────────
   User feedback: text was still too big on iPhone 13 Pro Max even
   after the first pass of clamp() / mobile h1-h6 rules. The earlier
   rules were beaten by inline JSX styles (style={{fontSize: …}}) on
   several h2 / h3 spots — class specificity loses to inline.

   This pass uses !important on every typography class scoped to .live,
   plus targets inline overrides on the hero h1, final CTA h1,
   creator-headline / lede, and effect-card h3s. ~30 % reduction
   across the board so the LP reads more like an editorial mobile
   page than a desktop layout shrunk to fit.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .live .h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }
  .live .h2 {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em !important;
  }
  .live .h3 {
    font-size: 17px !important;
    line-height: 1.22 !important;
  }
  .live .h4 {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .live .body-lg {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .live .body {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .live .body-sm {
    font-size: 12px !important;
  }
  .live .kicker {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  .live .hero-sub {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  /* Final-CTA byline ("VST3 / AU / AAX. Installs alongside…") */
  .live .body-lg[style*="maxWidth: 560"] { font-size: 13px !important; }

  /* Creator section overrides (its inline @media inside JSX uses 720
     as the breakpoint — between 721-768 it stayed at the 1100-rule
     52 px, which still feels big on a 414 viewport). */
  .live .creator-headline {
    font-size: 28px !important;
    line-height: 1.08 !important;
  }
  .live .creator-lede {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .live .creator-quote__body {
    font-size: 13px !important;
  }

  /* FAQ question text. */
  .live .faq-row .h4 {
    font-size: 15px !important;
  }
  .live .faq-row .body {
    font-size: 13px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   D18 SIMPLIFIED MOBILE — static plugin print + drop the playground
   ─────────────────────────────────────────────────────────────────────
   User feedback after testing on real device: the zoomed interactive
   plugin in the hero, even with all the touch + sizing fixes, was
   harder to use than just looking at it would suggest. Switching to
   a static SVG render of the plugin with the active preset baked in
   gives the visitor a clean visual without the interaction quirks.

   The Playground section ("Now grab the faders.") is dropped
   entirely on mobile — touch-drag worked but the value of "drive
   it yourself" doesn't carry on a 414-px screen, and removing it
   simplifies the flow.

   Desktop is unchanged: full interactive plugin shell, full playground.
   ═════════════════════════════════════════════════════════════════════ */
.live .mv-plugin-mobile-img { display: none; }

@media (max-width: 768px) {
  /* Swap interactive shell → static print */
  .live .mv-plugin-wrap > .mv-shell { display: none; }
  .live .mv-plugin-mobile-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow:
      0 24px 60px -20px rgba(0,0,0,0.7),
      0 0 60px -20px rgba(167,165,255,0.18);
  }
  /* The wrapper had transform: scale() inline for desktop polish —
     reset on mobile so it doesn't shrink the static image. */
  .live .mv-plugin-wrap[style*="transform"] {
    transform: none !important;
    width: 100%;
  }

  /* Drop the Playground section ("Now grab the faders") entirely. */
  .live #playground { display: none !important; }

  /* The .mv-shell zoom rule from the previous attempt is now dead
     for the hero (shell is hidden) but still applied to the live
     stylesheet — keep it idle. .mv-shell isn't rendered on mobile
     in any visible spot now. */
}

/* ═════════════════════════════════════════════════════════════════════
   D18 — preset chip strip drag affordance (mobile)
   ─────────────────────────────────────────────────────────────────────
   The hero preset row scrolls horizontally on mobile but visitors
   weren't realizing the chips continued past the viewport edge.
   Adds two cues:
     1) Mask-gradient on the right edge so the last visible chip
        fades out — "there's more →" without a literal label.
     2) An animated chevron pulsing right at the strip level, outside
        the chips' mask so it stays opaque while the chips behind it
        fade. Lives inside .preset-strip::after.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .live .preset-strip {
    position: relative;
  }
  .live .preset-strip__chips {
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
  }
  .live .preset-strip::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 16px;
    width: 18px;
    height: 24px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/16px no-repeat;
    opacity: .55;
    animation: preset-strip-cue 1.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes preset-strip-cue {
    0%   { transform: translateX(0);  opacity: .35; }
    50%  { transform: translateX(6px); opacity: .9; }
    100% { transform: translateX(0);  opacity: .35; }
  }

  /* Same idea for the SampleTabs (Vocal row) — the 4 vocal labels
     can wrap or scroll depending on viewport. Adds the same visual
     cue on the right edge if anything ends up offscreen. */
  .live .sample-tabs {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .live .sample-tabs::-webkit-scrollbar { display: none; }
  .live .sample-tab { flex-shrink: 0; }
}