/* ================= VOICE HERO (new, prefix vx-) =================
     The scene's picture is the hero. Words stay on the dark side of it: the headline, one sentence,
     one button, then the player with only the line being spoken. Details (the typed script, the credit)
     open on request. */
  .vx {
    --vx-paper: var(--color-text-primary);
    --vx-paper-2: var(--color-text-secondary);
    --vx-muted: var(--color-text-muted);
    --vx-gold: var(--color-accent-primary);
    --vx-line: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    --vx-unsaid: color-mix(in srgb, var(--color-text-primary) 30%, transparent);
    --vx-ease: cubic-bezier(.2, .72, .22, 1);
    --vx-deck: 124px;
    --vx-sheet-h: 196px;
    --vx-fade: 54px;
    --vx-gutter: clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    min-height: clamp(720px, 100svh, 1000px);
    padding: 128px 0 44px;
    color: var(--vx-paper);
    background: var(--color-bg-page);
  }
  .vx *, .vx *::before, .vx *::after { box-sizing: border-box; }
  .vx p { max-width: none; }
  .vx :where(button) { font: inherit; color: inherit; }
  .vx :focus-visible { outline: 2px solid var(--vx-gold); outline-offset: 3px; }
  .vx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* The picture: full bleed, one per scene, crossfading. Shade on the left for the words, at the bottom for the strip. */
  .vx-bg { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
  .vx-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; opacity: 0; transition: opacity 1.1s ease; }
  .vx-bg img.is-on { opacity: 1; }
  .vx-bg::after { content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--color-bg-page) 0%, color-mix(in srgb, var(--color-bg-page) 86%, transparent) 26%, color-mix(in srgb, var(--color-bg-page) 35%, transparent) 48%, color-mix(in srgb, var(--color-bg-page) 0%, transparent) 64%),
      linear-gradient(0deg, color-mix(in srgb, var(--color-bg-page) 90%, transparent) 0%, color-mix(in srgb, var(--color-bg-page) 0%, transparent) 26%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-bg-page) 70%, transparent) 0%, color-mix(in srgb, var(--color-bg-page) 0%, transparent) 18%); }
  /* Biscuit: at the tape stop his kitchen loses its colour with the stadium. */
  .vx-bg img[data-scene="biscuit"] { filter: grayscale(calc(var(--tape, 0) * .85)) brightness(calc(1 - var(--tape, 0) * .3)); }

  .vx-wrap { width: min(100% - 2 * var(--vx-gutter), 1280px); margin: 0 auto; }
  .vx-grid { display: grid; grid-template-columns: minmax(380px, 580px) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "copy ." ". ." "player strip"; column-gap: clamp(32px, 4vw, 72px); row-gap: 28px; }
  .vx-copy { grid-area: copy; position: relative; z-index: 2; }

  /* Copy: headline, one sentence, one button */
  .vx-title { margin: 0; color: var(--vx-paper); }
  .vx-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; font-family: 'Inter', var(--font-family-base); font-size: .72rem; font-weight: 600; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--vx-gold); }
  .vx-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
  .vx-h1 { display: block; font-size: clamp(2.6rem, 3.7vw, 3.9rem); font-weight: 600; line-height: .98; letter-spacing: -.018em; }
  .vx-h1 span, .vx-h1 em { display: block; }
  .vx-h1 em { font-weight: 600; }
  .vx-lede { margin: 1.3rem 0 0; max-width: 31em; color: var(--vx-paper-2); font-size: clamp(1.02rem, 1.15vw, 1.14rem); line-height: 1.55; }
  .vx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 1.8rem; }
  .vx-actions .btn-glow { min-height: 52px; }
  .vx-terms { margin: 0; color: var(--vx-muted); font-size: .8rem; line-height: 1.5; }

  /* Player: the object (it is the play control), the scene, and the line being spoken */
  .vx-player { grid-area: player; position: relative; z-index: 2; min-width: 0; align-self: end; }
  .vx-now { display: grid; grid-template-columns: var(--vx-deck) minmax(0, 1fr); gap: 20px; align-items: center; max-width: 540px; }
  .vx-now-text { min-width: 0; }
  .vx-need-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
  .vx-need { margin: 0; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: clamp(1.32rem, 1.6vw, 1.56rem); font-weight: 600; line-height: 1.2; color: var(--vx-paper); }
  .vx-script-btn { flex: none; display: inline-flex; align-items: center; gap: .5em; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: 'Inter', var(--font-family-base); font-size: .62rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-muted) !important; transition: color .2s; }
  .vx-script-btn i { font-size: 1.2em; color: var(--vx-gold); }
  .vx-script-btn:hover { color: var(--vx-paper) !important; }
  .vx-note { margin: 2px 0 0; display: none; align-items: center; gap: .5em; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: 1rem; font-style: italic; color: var(--vx-paper-2); }
  .vx-note i { font-size: .82em; font-style: normal; color: var(--vx-gold); }
  .vx-note.is-on { display: flex; }

  .vx-seekrow { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
  /* The demo's real waveform is the seek bar; the range input lies invisible on top of it for mouse, touch and keys. */
  .vx-wave { position: relative; flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; }
  .vx-wave .lp-wv { pointer-events: none; }
  .vx-wave .lp-wv i { background: color-mix(in srgb, var(--color-text-primary) 24%, transparent); }
  .vx-wave .lp-wv-on i { background: linear-gradient(180deg, #f7d88f, var(--color-cta)); }
  .vx-wave:hover .lp-wv:not(.lp-wv-on) i { background: color-mix(in srgb, var(--color-text-primary) 34%, transparent); }
  .vx-wave.has-wave .vx-seek { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .vx-wave:has(.vx-seek:focus-visible) { outline: 2px solid var(--vx-gold); outline-offset: 4px; }
  .vx-time { flex: none; min-width: 4.6em; text-align: right; font-family: 'Inter', var(--font-family-base); font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--vx-muted); }
  .vx-seek { flex: 1; height: 18px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
  .vx-seek::-webkit-slider-runnable-track { height: 2px; border-radius: 0; background: linear-gradient(to right, var(--color-accent-primary) var(--p), color-mix(in srgb, var(--color-text-primary) 16%, transparent) var(--p)); }
  .vx-seek::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--color-text-primary) 16%, transparent); }
  .vx-seek::-moz-range-progress { height: 2px; background: var(--color-accent-primary); }
  .vx-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -3.5px; border: 0; border-radius: 50%; background: var(--color-accent-primary); opacity: 0; transition: opacity .2s, transform .2s; }
  .vx-seek::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--color-accent-primary); }
  .vx-seek:hover::-webkit-slider-thumb, .vx-seek:focus-visible::-webkit-slider-thumb, .vx-player.is-started .vx-seek::-webkit-slider-thumb { opacity: 1; }
  .vx-seek:hover::-webkit-slider-thumb { transform: scale(1.3); }

  /* Deck: the record (or reel, rose window, pool) at a small size, the play button on it */
  .vx-deck { position: relative; width: var(--vx-deck); }
  .vx-turntable { position: relative; width: 100%; aspect-ratio: 1; }
  .vx-disc-box { position: absolute; left: 2%; top: 8%; width: 84%; aspect-ratio: 1; transition: opacity .2s ease, transform .26s var(--vx-ease); }
  .vx-deck.is-swapping .vx-disc-box { opacity: 0; transform: scale(.93); }
  .vx-disc { position: absolute; inset: 0; border-radius: 50%; will-change: transform; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 6%, transparent); }
  .vx-label { position: absolute; inset: 29%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
  .vx-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .vx-ring text { font-family: 'Inter', var(--font-family-base); font-size: 6.3px; font-weight: 600; letter-spacing: .5px; }
  .vx-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 210deg, transparent 0deg, rgba(255, 236, 200, .1) 24deg, transparent 52deg, transparent 180deg, rgba(255, 236, 200, .07) 206deg, transparent 236deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 29.5%, #000 30%); mask-image: radial-gradient(circle, transparent 0 29.5%, #000 30%); }
  .vx-deck[data-disc="noir"] .vx-disc, .vx-deck[data-disc="storybook"] .vx-disc {
    background:
      radial-gradient(circle, transparent 0 61%, color-mix(in srgb, var(--color-text-primary) 5%, transparent) 61.3%, transparent 61.9%),
      radial-gradient(circle, transparent 0 77%, color-mix(in srgb, var(--color-text-primary) 4.5%, transparent) 77.3%, transparent 77.9%),
      repeating-radial-gradient(circle, #141117 0 1.1px, #1c1821 1.5px, #121015 2.3px),
      #141117; }
  .vx-deck[data-disc="noir"] .vx-label { background: radial-gradient(circle at 38% 32%, #6c2a3b, #3b1322 72%); }
  .vx-deck[data-disc="noir"] .vx-ring text { fill: var(--color-accent-primary); }
  .vx-deck[data-disc="storybook"] .vx-label { background: radial-gradient(circle at 38% 32%, #e4ac58, #a96b28 74%); }
  .vx-deck[data-disc="storybook"] .vx-ring text { fill: #3b1626; }
  .vx-deck[data-disc="gold"] .vx-disc {
    background:
      radial-gradient(circle, transparent 0 61%, rgba(60, 35, 5, .28) 61.3%, transparent 61.9%),
      radial-gradient(circle, transparent 0 77%, rgba(60, 35, 5, .22) 77.3%, transparent 77.9%),
      repeating-radial-gradient(circle, #b88b3c 0 1.1px, #d5ae5f 1.5px, #a77c31 2.3px),
      #bf9344;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 40px color-mix(in srgb, var(--color-accent-primary) 12%, transparent); }
  .vx-deck[data-disc="gold"] .vx-label { background: radial-gradient(circle at 38% 32%, #8d6527, #573a10 74%); }
  .vx-deck[data-disc="gold"] .vx-ring text { fill: #f0d699; }
  .vx-deck[data-disc="gold"] .vx-sheen { background: conic-gradient(from 210deg, transparent 0deg, rgba(255, 248, 220, .38) 26deg, transparent 56deg, transparent 180deg, rgba(255, 248, 220, .26) 208deg, transparent 240deg); }
  /* A jukebox single (seven inch, 45 turns a minute): smaller, wide cream label, no tonearm. */
  .vx-deck[data-disc="single"] .vx-disc { inset: 9%;
    background:
      radial-gradient(circle, transparent 0 70%, color-mix(in srgb, var(--color-text-primary) 5%, transparent) 70.4%, transparent 71%),
      repeating-radial-gradient(circle, #141117 0 1.1px, #1c1821 1.5px, #121015 2.3px),
      #141117; }
  .vx-deck[data-disc="single"] .vx-sheen { inset: 9%; }
  .vx-deck[data-disc="single"] .vx-label { inset: 23%; background: radial-gradient(circle at 38% 32%, #f1e3c2, #d2b986 78%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 4px #7a2537; }
  .vx-deck[data-disc="single"] .vx-ring text { fill: #6a1f2e; }

  /* Objects that are not records: a tape reel, a rose window, a pool of water. All drawn in SVG,
     all driven by audio.currentTime like the records. */
  .vx-obj { position: absolute; inset: 0; display: none; width: 100%; height: 100%; overflow: visible; }
  .vx-deck[data-obj="reel"] .vx-reel, .vx-deck[data-obj="rose"] .vx-rose, .vx-deck[data-obj="pool"] .vx-pool { display: block; }
  .vx-deck[data-obj="reel"] .vx-disc, .vx-deck[data-obj="rose"] .vx-disc, .vx-deck[data-obj="pool"] .vx-disc,
  .vx-deck[data-obj="reel"] .vx-sheen, .vx-deck[data-obj="rose"] .vx-sheen, .vx-deck[data-obj="pool"] .vx-sheen { display: none; }
  .vx-shade { position: absolute; inset: 1%; display: none; border-radius: 50%; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); pointer-events: none; }
  .vx-deck[data-obj="reel"] .vx-shade, .vx-deck[data-obj="rose"] .vx-shade, .vx-deck[data-obj="pool"] .vx-shade { display: block; }
  .vx-reel { will-change: transform; }
  .vx-halo { position: absolute; inset: -16%; display: none; border-radius: 50%; pointer-events: none; opacity: var(--lux, 0);
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-primary) 30%, transparent) 0, color-mix(in srgb, var(--color-accent-primary) 10%, transparent) 40%, color-mix(in srgb, var(--color-accent-primary) 0%, transparent) 66%); }
  .vx-deck[data-obj="rose"] .vx-halo, .vx-deck[data-obj="pool"] .vx-halo { display: block; }
  .vx-rose .vx-glass { filter: brightness(calc(.46 + var(--lux, .3) * .74)) saturate(calc(.7 + var(--lux, .3) * .36)); }
  .vx-pool { transform-origin: 50% 50%; will-change: transform; }
  .vx-deck:not([data-obj="lp"]) .vx-arm { opacity: 0; transition: transform .8s var(--vx-ease), opacity .25s; }

  .vx-arm { position: absolute; z-index: 2; left: 84%; top: 1%; width: 20%; height: 84%; transform-origin: 50% 14.2857%; transform: rotate(-3deg); transition: transform .8s var(--vx-ease); pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55)); }
  .vx-arm svg { display: block; width: 100%; height: 100%; overflow: visible; }

  .vx-play { position: absolute; z-index: 3; left: 44%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-cta)); color: var(--color-accent-contrast) !important; font-size: 1rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 4px color-mix(in srgb, var(--color-bg-page) 30%, transparent); transition: transform .22s var(--vx-ease), box-shadow .3s; }
  .vx-play:hover { transform: scale(1.07); box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 6px color-mix(in srgb, var(--color-accent-primary) 18%, transparent); }
  .vx-play:active { transform: scale(.95); }
  .vx-play .fa-play { margin-left: 3px; }
  .vx-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--color-accent-primary); opacity: 0; pointer-events: none; }
  .vx-play.is-pulse::after { animation: vx-ring .7s var(--vx-ease); }
  @keyframes vx-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

  /* The words: only the line being spoken, large; the one before it fades out above. */
  .vx-sheet { position: relative; min-width: 0; margin-top: 18px; }
  .vx-viewport { position: relative; height: var(--vx-sheet-h); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--vx-fade)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--vx-fade)); }
  .vx-scroll { position: relative; padding: var(--vx-fade) 0 0; transition: transform .7s var(--vx-ease); will-change: transform; }
  /* Before the first press: the opening line of the demo, faint, where the spoken words will appear. */
  .vx-card { position: absolute; left: 0; right: 0; top: 22px; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: clamp(1.5rem, 1.9vw, 1.85rem); font-style: italic; font-weight: 500; line-height: 1.22; color: var(--vx-unsaid); text-wrap: pretty; transition: opacity .4s ease; pointer-events: none; }
  .vx-player.is-started .vx-card { opacity: 0; }
  .vx-wait { position: absolute; left: 0; bottom: 0; margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-gold); opacity: 0; transition: opacity .3s; }
  .vx-wait.is-on { opacity: 1; }

  .vx-line { display: block; margin: 0 0 14px; transition: opacity .6s ease; }
  .vx-line[hidden] { display: none; }
  .vx-line.is-in { animation: vx-in .5s var(--vx-ease); }
  @keyframes vx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .vx-line.is-past { opacity: .32; }
  .vx-who { display: flex; align-items: baseline; gap: .6em; margin-bottom: 2px; }
  .vx-speaker { display: inline-flex; align-items: center; gap: .45em; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-gold); }
  .vx-line.is-narrator .vx-speaker { color: var(--vx-paper-2); }
  .vx-speaker .fa-phone-alt { font-size: .82rem; letter-spacing: 0; }
  .vx-delivery { display: none; }
  .vx-text { margin: 0; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: clamp(1.6rem, 2.1vw, 2rem); font-weight: 500; line-height: 1.2; color: var(--vx-unsaid); text-wrap: balance; }
  .vx-text .w { transition: color .2s ease, text-shadow 1.4s var(--vx-ease); }
  .vx-text .w.on { color: var(--vx-paper); }
  .vx-text .w.now { color: var(--vx-gold); }
  /* Stage directions are heard, not read: only a cue that carries the jingle's reprise is shown. */
  .vx-cue > .vx-text:not(.vx-reprise), .vx-who:empty { display: none; }
  .vx-cue:not(:has(.vx-reprise)) { display: none !important; }

  /* Caller on the phone: narrower, thinner, band-limited. Without the phone, he is in the room. */
  .vx-line.is-phone .vx-text { max-width: 20em; font-family: 'Inter', var(--font-family-base); font-size: 1.12rem; font-weight: 400; line-height: 1.5; letter-spacing: .01em; }
  .vx-line.is-phone .vx-text .w.on { color: var(--vx-paper-2); }
  .vx-line.is-phone .vx-text .w.now { color: var(--vx-gold); }
  .vx-line.fx-reveal .vx-text { font-size: clamp(1.9rem, 2.5vw, 2.4rem); line-height: 1.12; }
  .vx-line.fx-boast .vx-text { font-size: clamp(2.1rem, 2.8vw, 2.7rem); line-height: 1.06; letter-spacing: -.005em; }
  .vx-line.fx-small .vx-text { font-size: 1.3rem; font-style: italic; }

  /* A roll call: one-word lines by different speakers sit on one line, the speaker in small caps under each word. */
  .vx-row .vx-who { display: none; }
  .vx-row .vx-row-cells { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px clamp(16px, 2vw, 28px); }
  .vx-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
  .vx-cell.is-heard { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .vx-cell-who { font-family: 'Inter', var(--font-family-base); font-size: .56rem; font-weight: 600; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; color: var(--vx-muted); }
  /* The jingle: the sung syllable is gold, sung ones light, the rest wait. 6 px per scale step. */
  .vx-text .syl { display: inline-block; transition: transform .12s var(--vx-ease), color .12s ease; }
  .is-jingling .w, .is-jingling .w.on, .is-jingling .w.now { color: var(--vx-unsaid); }
  .is-jingling .syl.sung { color: var(--vx-paper); }
  .is-jingling .syl.now { color: var(--vx-gold); }
  .vx-cue .vx-reprise { display: block; font-style: normal; color: var(--vx-unsaid); }

  /* Space in the game scene: a voice far above is small, right-aligned and high; walking down it grows. */
  .vx-line.fx-high .vx-text { font-size: 1.2rem; line-height: 1.4; letter-spacing: .01em; text-align: right; }
  .vx-line.fx-high .vx-who { justify-content: flex-end; }
  .vx-line.fx-approach .vx-text .w { font-size: calc(1.2rem + .8rem * var(--k, 1)); opacity: 0; transition: color .2s ease, opacity .35s ease; }
  .vx-line.fx-approach .vx-text .w.on { opacity: 1; }
  /* The oath: three faint copies of the line behind it, growing with the choir. */
  .vx-line.fx-choir .vx-text { position: relative; isolation: isolate; }
  .vx-echo { position: absolute; inset: 0; z-index: -1; color: var(--vx-gold); opacity: 0; pointer-events: none; user-select: none; }
  .vx-echo.e1 { transform: translate(-.3em, .3em); }
  .vx-echo.e2 { transform: translate(.3em, -.3em); }
  .vx-echo.e3 { transform: translate(0, -.6em); }

  /* The sports scene: "Gone!" is the biggest line; at the tape stop the stadium lines droop and go grey;
     the kitchen lines are small and plain. --tape (0 to 1) comes from audio.currentTime. */
  .vx-line.fx-gated .vx-text { font-size: clamp(3rem, 4.4vw, 4.2rem); font-weight: 600; line-height: 1; letter-spacing: -.01em; }
  .vx-line.fx-gated .vx-text .w { transition: none; }
  .vx-zone-stadium { transform: translateY(calc(var(--tape, 0) * 4px)); filter: grayscale(var(--tape, 0)) brightness(calc(1 - var(--tape, 0) * .28)); }
  .vx-zone-kitchen .vx-text { font-family: 'Inter', var(--font-family-base); font-size: 1.12rem; font-weight: 400; line-height: 1.5; letter-spacing: .01em; }
  .vx-zone-kitchen .vx-text .w.on { color: var(--vx-paper-2); }
  .vx-zone-kitchen .vx-text .w.now { color: var(--vx-gold); }

  /* One voice only (the meditation): no speaker name. Each line is placed where the voice is,
     left ear to right ear (--x from 0 to 1), from the scene's azimuth events. */
  .vx-pan { position: relative; left: calc(var(--x, .5) * 100%); width: fit-content; max-width: 88%; transform: translateX(calc(var(--x, .5) * -100%)); text-align: center; }
  .vx-solo .vx-who { display: none; }
  .vx-solo .vx-line:not(.vx-cue) .vx-text { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }

  /* Rain over the whole picture: thin gold marks that fall with the audio, stop at "hold" and glow. */
  .vx-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .vx-rain[hidden] { display: none; }
  .vx-rain span { position: absolute; top: 0; width: 1px; opacity: var(--a, .3); color: color-mix(in srgb, var(--color-accent-primary) 50%, transparent); background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-primary) 0%, transparent), currentColor); will-change: transform; transition: color .6s ease, box-shadow .6s ease, opacity .6s ease; }
  .vx-rain.is-held span { opacity: calc(var(--a, .3) * 2); color: rgba(255, 216, 150, 1); box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-primary) 55%, transparent); }

  /* A chorus (lines with the same "group"): the greetings flow as one passage, each lit while it speaks.
     Size and opacity step down with the mix. */
  .vx-line.vx-hello { margin: 0 0 16px; }
  .vx-line.vx-hello.is-in { animation-name: vx-appear; }
  @keyframes vx-appear { from { opacity: 0; } to { opacity: 1; } }
  .vx-hello-head { display: none; }
  .vx-hello-grid { --vx-hi-size: clamp(1.3rem, 1.6vw, 1.55rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px .75em; }
  .vx-hi { min-width: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
  .vx-hi.is-heard { opacity: var(--go, 1); visibility: visible; transition: opacity .3s ease; }
  .vx-hi-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vx-hi-text { margin: 0; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: calc(var(--vx-hi-size) * var(--gs, 1)); font-weight: 500; line-height: 1.3; color: var(--vx-paper-2); transition: color .25s ease; }
  .vx-hi-text:lang(ja), .vx-hi-text:lang(zh), .vx-hi-text:lang(ko) { font-size: calc(var(--vx-hi-size) * var(--gs, 1) * .8); font-weight: 300; letter-spacing: .02em; }
  .vx-hi-text:lang(ja) { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Yu Gothic', 'Hiragino Sans', Meiryo, serif; }
  .vx-hi-text:lang(zh) { font-family: 'Songti SC', 'Noto Serif SC', 'Microsoft YaHei', 'PingFang SC', serif; }
  .vx-hi-text:lang(ko) { font-family: 'AppleMyungjo', 'Noto Serif KR', 'Malgun Gothic', 'Apple SD Gothic Neo', serif; }
  .vx-hi.is-lit .vx-hi-text { color: var(--vx-gold); }

  /* End of a scene with a "hear again" point: one quiet link under the last line */
  .vx-again .vx-who { display: none; }
  .vx-again-btn { display: inline-flex; align-items: center; gap: .6em; margin: 4px 0 0; padding: 4px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-accent-primary) 40%, transparent); background: none; cursor: pointer; font-family: 'Inter', var(--font-family-base); font-size: .64rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-paper) !important; transition: border-color .25s; }
  .vx-again-btn i { color: var(--vx-gold); font-size: 1.15em; transition: transform .35s var(--vx-ease); }
  .vx-again-btn:hover { border-bottom-color: var(--vx-gold); }
  .vx-again-btn:hover i { transform: rotate(-40deg); }

  /* Demo index (2026-10-25): the jobs as one passage of type with small gold dots between them, like a printed
     programme, so the whole list reads at a glance. The chosen job is gold and a gold line under it fills while
     its demo plays. Lengths and the waveform live in the player, never behind a name. */
  .vx-strip { grid-area: strip; align-self: end; justify-self: end; position: relative; z-index: 2; width: min(100%, 620px); }
  .vx-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 10px; }
  .vx-strip-k { display: inline-flex; align-items: center; gap: 12px; font-family: 'Inter', var(--font-family-base); font-size: .7rem; font-weight: 600; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--vx-gold); }
  .vx-strip-k::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
  .vx-strip-head em { font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: 1.15rem; line-height: 1.3; color: var(--vx-paper-2); text-shadow: 0 1px 12px rgba(8, 6, 13, .9); }
  .vx-index { display: flex; flex-wrap: wrap; gap: 0 30px; }
  .vx-scene { --vx-track: transparent; position: relative; margin: 0; padding: 4px 0 5px; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
  .vx-scene::after { content: ""; position: absolute; top: 50%; right: -17px; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent-primary) 50%, transparent); pointer-events: none; }
  .vx-scene.is-eol::after { display: none; }
  .vx-t-name { display: block; padding-bottom: 4px; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: clamp(1.25rem, 1.45vw, 1.42rem); font-weight: 600; line-height: 1.2; white-space: nowrap; color: color-mix(in srgb, var(--color-text-primary) 78%, transparent); text-shadow: 0 1px 14px rgba(8, 6, 13, .9);
    background: linear-gradient(var(--vx-gold), var(--vx-gold)) left bottom / calc(var(--p, 0) * 100%) 1px no-repeat, linear-gradient(var(--vx-track), var(--vx-track)) left bottom / 100% 1px no-repeat;
    transition: color .25s ease; }
  .vx-scene:hover { --vx-track: color-mix(in srgb, var(--color-text-primary) 26%, transparent); }
  .vx-scene:hover .vx-t-name { color: var(--vx-paper); }
  .vx-scene[aria-pressed="true"] { --vx-track: color-mix(in srgb, var(--color-accent-primary) 26%, transparent); }
  .vx-scene[aria-pressed="true"] .vx-t-name { color: var(--vx-gold); }

  /* The typed script: a panel over the picture, opened from "Script". */
  .vx-drawer { --vx-paper: var(--color-text-primary); --vx-paper-2: var(--color-text-secondary); --vx-muted: var(--color-text-muted); --vx-gold: var(--color-accent-primary); --vx-line: color-mix(in srgb, var(--color-text-primary) 12%, transparent); --vx-ease: cubic-bezier(.2, .72, .22, 1);
    position: fixed; z-index: 1100; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; padding: 30px clamp(20px, 3vw, 40px) 28px; background: var(--color-bg-page); border-left: 1px solid var(--vx-line); box-shadow: -30px 0 60px rgba(0, 0, 0, .4); transform: translateX(0); transition: transform .45s var(--vx-ease), visibility 0s; }
  .vx-drawer, .vx-drawer * { box-sizing: border-box; }
  .vx-drawer :where(button) { font: inherit; }
  .vx-drawer :focus-visible { outline: 2px solid var(--vx-gold); outline-offset: 3px; }
  .vx-drawer[hidden] { display: flex; visibility: hidden; transform: translateX(104%); transition: transform .45s var(--vx-ease), visibility 0s .45s; }
  .vx-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--vx-line); }
  .vx-drawer-title { margin: 0; font-family: 'Cormorant Garamond', var(--font-family-heading); font-size: 1.3rem; font-weight: 600; color: var(--vx-paper); }
  .vx-drawer-tools { display: flex; align-items: center; gap: 18px; }
  .vx-copybtn, .vx-close { display: inline-flex; align-items: center; gap: .5em; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: 'Inter', var(--font-family-base); font-size: .64rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-paper) !important; }
  .vx-copybtn { border-bottom: 1px solid color-mix(in srgb, var(--color-accent-primary) 40%, transparent); }
  .vx-copybtn i { color: var(--vx-gold); }
  .vx-copybtn:hover { border-bottom-color: var(--vx-gold); }
  .vx-close { font-size: 1.1rem !important; color: var(--vx-muted) !important; }
  .vx-close:hover { color: var(--vx-paper) !important; }
  .vx-credit { margin: 12px 0 0; font-size: .8rem; line-height: 1.6; color: var(--vx-muted); }
  .vx-typed { flex: 1 1 auto; min-height: 0; margin-top: 14px; overflow: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-accent-primary) 35%, transparent) transparent; }
  .vx-typed pre { margin: 0; font-family: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--vx-paper); }
  .vx-typed .tg { color: var(--vx-muted); }
  .vx-typed .tg-who { color: var(--vx-gold); }
  .vx-typed .tg-style { color: var(--color-cta); }
  .vx-typed .tg-dsp { color: rgba(196, 182, 154, .55); }
  .vx-typed .tg-meta { color: var(--vx-paper-2); }

  /* Next section teaser (context only) */
  .vx-next { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--color-bg-surface); border-top: 1px solid var(--color-border-default); text-align: center; }
  .vx-next h2 { max-width: 18em; margin-left: auto; margin-right: auto; }
  .vx-next .section-intro { margin-bottom: 1.6rem; }
  .vx-next-note { margin: 0 auto; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); }

  /* Laptops with a short screen: the same layout, set tighter, so the strip stays in the first view. */
  @media (min-width: 960px) and (max-height: 880px) {
    .vx { --vx-deck: 104px; --vx-sheet-h: 150px; --vx-fade: 40px; min-height: max(640px, 100svh); padding: 100px 0 26px; }
    .vx-grid { row-gap: 20px; }
    .vx-h1 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); }
    .vx-lede { margin-top: 1rem; }
    .vx-actions { margin-top: 1.3rem; }
    .vx-sheet { margin-top: 12px; }
    .vx-text { font-size: clamp(1.45rem, 1.8vw, 1.75rem); }
    .vx-line.fx-gated .vx-text { font-size: 3.2rem; }
  }
  /* Small laptops: two even columns, so the index of demos keeps room for its lines. */
  @media (min-width: 960px) and (max-width: 1199px) {
    .vx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  /* Narrower (2026-10-25): the picture is a band at the top. Then the headline, the sentence and the button,
     so the first screen of a phone holds the offer and the way to act on it; then the player, and the index
     of demos as a short passage of type. The words area opens only once a demo plays, so no empty gap waits
     under the player; until then it shows the demo's opening line in two faint lines. */
  @media (max-width: 959px) {
    .vx { --vx-band: min(calc(56px + 58vw), 520px); --vx-deck: 100px; --vx-sheet-h: 190px; --vx-fade: 40px; display: block; min-height: 0; padding: 0 0 60px; }
    .vx-player, .vx-strip { align-self: stretch; }
    .vx-bg { bottom: auto; height: var(--vx-band); }
    .vx-bg img { object-position: 70% 50%; }
    .vx-bg::after { background:
      linear-gradient(0deg, var(--color-bg-page) 0%, color-mix(in srgb, var(--color-bg-page) 55%, transparent) 24%, color-mix(in srgb, var(--color-bg-page) 0%, transparent) 50%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-bg-page) 75%, transparent) 0%, color-mix(in srgb, var(--color-bg-page) 0%, transparent) 30%); }
    .vx-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: calc(var(--vx-band) - 52px); }
    .vx-copy { display: contents; }
    .vx-title { order: 1; }
    .vx-lede { order: 2; margin-top: .9rem; font-size: 1rem; }
    .vx-actions { order: 3; margin-top: 1.4rem; }
    .vx-player { order: 4; margin-top: 44px; }
    .vx-strip { order: 5; justify-self: auto; width: auto; margin-top: 36px; }
    .vx-kicker { font-size: .66rem; margin-bottom: .8rem; }
    .vx-h1 { font-size: clamp(2.4rem, 10.4vw, 4rem); line-height: 1; }
    .vx-now { gap: 14px; }
    .vx-need-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .vx-need { font-size: 1.24rem; }
    .vx-seekrow { gap: 10px; margin-top: 6px; }
    .vx-wave { height: 26px; }
    .vx-sheet { margin-top: 8px; }
    .vx-player:not(.is-started) .vx-viewport { height: 0; }
    .vx-card { position: static; margin-top: 10px; -webkit-line-clamp: 2; font-size: 1.2rem; }
    .vx-player.is-started .vx-card { display: none; }
    .vx-index { gap: 0 24px; }
    .vx-scene::after { right: -14px; }
    .vx-t-name { font-size: 1.24rem; }
    .vx-text { font-size: 1.5rem; }
    .vx-line.is-phone .vx-text, .vx-zone-kitchen .vx-text { font-size: 1.02rem; }
    .vx-line.fx-gated .vx-text { font-size: 2.6rem; }
    .vx-line.fx-high .vx-text { font-size: 1.08rem; }
    .vx-line.fx-approach .vx-text .w { font-size: calc(1.08rem + .5rem * var(--k, 1)); }
    .vx-line.fx-reveal .vx-text { font-size: 1.7rem; }
    .vx-line.fx-boast .vx-text { font-size: 1.9rem; }
    .vx-solo .vx-line:not(.vx-cue) .vx-text { font-size: 1.6rem; }
    .vx-hello-grid { --vx-hi-size: 1.2rem; }
    .vx-drawer { padding-top: 22px; background: var(--color-bg-page); border-left: 0; }
  }
  @media (max-width: 640px) {
    .vx-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .vx-actions .btn-glow { justify-content: center; }
    .vx-terms { text-align: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .vx-arm, .vx-scroll, .vx-disc-box, .vx-line, .vx-bg img, .vx-text .w, .vx-hi, .vx-hi-text, .vx-again-btn i, .vx-cell, .vx-text .syl, .vx-t-name, .vx-drawer, .vx-card { transition: none !important; }
    .vx-line.is-in, .vx-play.is-pulse::after { animation: none !important; }
    /* Only light and colour change: no lift, no droop, no growth. */
    .vx-text .syl { transform: none !important; }
    .vx-zone-stadium { transform: none !important; }
    .vx-line.fx-approach .vx-text .w { font-size: inherit !important; }
  }

  /* German labels (Geschlecht, Sprechtempo, Stimmtextur) are longer than the English ones: the label column of the voice board grows so no label runs into its options. */
  :lang(de) .lp-vd-row { grid-template-columns: 6.2rem minmax(0, 1fr); }

  /* Below 360 px the two pill toggles (billing period, who makes the voiceovers) tighten so the longer French labels stay inside the screen. */
  @media (max-width: 359px) {
    #voice-landing .lp-bill button { gap: .4rem; padding: .58rem .9rem; font-size: .86rem; }
  }