/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Hallmark · macrostructure: Feature Stack · genre: modern-minimal · theme: Plume
 * audience: event organizers, producers, broadcast teams · use: select and buy a production asset · tone: soft premium technical
 * nav: N9 Edge-aligned minimal (filled pill, Fraunces wordmark, spacious) · footer: Ft5 Statement (28ch, wordmark below, hairline)
 * enrichment: H9 Tier-C photoreal 3D microphone render · motion: spectrum + signal pulse
 * F2 Sticky-scroll knobs: pinned=left, content=diagram, steps=4 · F6 Product grid knobs: ratio=4/3, density=1-up editorial, action=Add
 * contrast: pass (46–50) · slop: pass (51–55) · honest: pass (56) · chrome: pass (57) · tokens: pass (58)
 * responsive: pass (36, 59, 61–69) · icons: pass (60)
 */

@font-face {
  font-family: "Geist";
  src: url("../../../themes/voicestage-fse/assets/fonts/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../../../themes/voicestage-fse/assets/fonts/fraunces-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --color-paper: oklch(98% 0.008 285);
  --color-paper-2: oklch(95.5% 0.016 285);
  --color-paper-3: oklch(91.5% 0.026 285);
  --color-ink: oklch(17% 0.018 285);
  --color-ink-2: oklch(29% 0.025 285);
  --color-neutral: oklch(47% 0.022 285);
  --color-muted: oklch(38% 0.024 285);
  --color-rule: oklch(84% 0.02 285);
  --color-rule-dark: oklch(65% 0.03 285);
  --color-accent: oklch(60% 0.205 294);
  --color-accent-soft: oklch(89% 0.065 294);
  --color-accent-pale: oklch(95% 0.035 294);
  --color-accent-ink: oklch(98% 0.008 285);
  --color-warm: oklch(78% 0.13 52);
  --color-signal: oklch(63% 0.17 26);
  --color-dark-stage: oklch(13% 0.025 285);
  --color-dark-stage-2: oklch(20% 0.04 285);
  --color-dark-text: oklch(95% 0.012 285);
  --color-metal: oklch(31% 0.027 285);
  --color-metal-deep: oklch(16% 0.024 285);
  --color-metal-mid: oklch(48% 0.026 285);
  --color-metal-light: oklch(76% 0.022 285);
  --color-metal-bright: oklch(91% 0.018 285);
  --color-mesh: oklch(9% 0.018 285);
  --color-shadow: oklch(18% 0.02 285 / 0.12);
  --color-shadow-strong: oklch(12% 0.025 285 / 0.36);
  --color-overlay: oklch(12% 0.02 285 / 0.36);
  --color-transparent: oklch(98% 0.008 285 / 0);

  --font-display: "Geist", sans-serif;
  --font-body: "Geist", sans-serif;
  --font-wordmark: "Fraunces", serif;

  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: 1rem;
  --text-md: 1.18rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: clamp(2.25rem, 4.8vw, 4.8rem);
  --text-display: clamp(3.4rem, 8.2vw, 7.5rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;
  --page-gutter: clamp(1rem, 4vw, 4.5rem);
  --content-width: 92rem;
  --nav-height: 5rem;

  --radius-sm: 0.65rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.8rem;
  --radius-pill: 999px;
  --rule: 1px;
  --shadow-soft: 0 1.5rem 4rem var(--color-shadow);

  --dur-instant: 100ms;
  --dur-short: 180ms;
  --dur-medium: 300ms;
  --dur-long: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 60;
  --z-drawer: 70;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; scroll-behavior: smooth; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-drawer-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: var(--color-transparent); }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { font-family: var(--font-display); overflow-wrap: anywhere; min-width: 0; }

.skip-link {
  position: fixed;
  inset: var(--space-md) auto auto var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-180%);
  z-index: var(--z-drawer);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
button:active, a:active { opacity: 0.78; }
button:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }

.vsb-header,
.vsb-footer { max-width: none; }

.wp-block-template-part { margin: 0; }

.admin-bar .site-nav { top: 32px; }

.site-nav {
  min-height: var(--nav-height);
  padding: var(--space-lg) var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-nav);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); width: fit-content; white-space: nowrap; font-family: var(--font-wordmark); font-weight: 600; font-size: var(--text-md); line-height: 1; }
.brand__mark { width: 1.75rem; height: 1.75rem; color: var(--color-accent); }
.brand__mark path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vsb-classic-menu { min-width: 0; }
.vsb-classic-menu__list { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.vsb-classic-menu__list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-muted); font-size: var(--text-sm); font-weight: 550; line-height: 1; white-space: nowrap; }
.vsb-classic-menu__list a:hover, .vsb-classic-menu__list .current-menu-item > a { color: var(--color-accent); }
.vsb-classic-menu__mobile { display: none; position: relative; }
.vsb-classic-menu__mobile summary { width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; display: grid; place-content: center; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-pill); cursor: pointer; list-style: none; color: var(--color-ink); }
.vsb-classic-menu__mobile summary::-webkit-details-marker { display: none; }
.vsb-classic-menu__mobile summary:hover { border-color: var(--color-rule-dark); }
.vsb-classic-menu__mobile summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--space-2xs); }
.vsb-classic-menu__mobile summary:active { transform: translateY(1px); }
.vsb-classic-menu__mobile-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vsb-classic-menu__hamburger { width: 1.15rem; display: grid; gap: var(--space-2xs); }
.vsb-classic-menu__hamburger i { display: block; width: 100%; height: var(--rule); border-radius: var(--radius-pill); background: currentColor; }
.vsb-classic-menu__mobile nav { position: absolute; top: calc(100% + var(--space-sm)); right: 0; width: min(19rem, calc(100vw - 2 * var(--page-gutter))); padding: var(--space-md); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-soft); }
.vsb-classic-menu__mobile .vsb-classic-menu__list { display: grid; gap: var(--space-xs); }
.vsb-classic-menu__mobile .vsb-classic-menu__list a { width: 100%; padding-inline: var(--space-sm); }
.site-nav__status { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.status-dot { width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0.25rem var(--color-accent-pale); }
.nav-cta { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 2.75rem; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav-cta:hover { background: var(--color-ink-2); }
.nav-cta:active { transform: translateY(1px); }

.hero { min-height: calc(100svh - var(--nav-height)); padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); max-width: var(--content-width); margin: 0 auto; }
.hero__copy { align-self: center; min-width: 0; }
.hero__kicker, .section-note { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.13em; color: var(--color-muted); margin-bottom: var(--space-xl); }
.hero h1 { font-size: var(--text-display); letter-spacing: -0.065em; line-height: 0.83; margin-bottom: var(--space-2xl); max-width: 8ch; }
.hero h1 span { color: var(--color-accent); }
.hero__lede-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-lg); max-width: 44rem; }
.hero__lede-row p { max-width: 34ch; margin: 0; color: var(--color-muted); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-lg); width: fit-content; padding-block: var(--space-sm); border-bottom: var(--rule) solid var(--color-ink); font-weight: 600; font-size: var(--text-sm); line-height: 1; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.text-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.mic-stage { min-width: 0; height: min(72svh, 44rem); min-height: 32rem; align-self: center; display: grid; grid-template-rows: auto minmax(0, 1fr); position: relative; isolation: isolate; }
.mic-stage__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding: 0 var(--space-md) var(--space-sm); border-bottom: var(--rule) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap; }
.mic-stage__status { display: inline-flex; align-items: center; gap: var(--space-xs); }
.mic-stage__status i { width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 var(--space-2xs) var(--color-accent-pale); }
.mic-stage__status b { font-weight: 500; }
.mic-stage__field { min-height: 0; position: relative; display: grid; place-items: center; perspective: 72rem; overflow: visible; }
.mic-stage__field::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: var(--rule); background: var(--color-rule); }
.mic-stage__halo { position: absolute; border-radius: 50%; border: var(--rule) solid var(--color-accent-soft); pointer-events: none; }
.mic-stage__halo--outer { width: min(36rem, 88%); aspect-ratio: 1; opacity: 0.52; }
.mic-stage__halo--inner { width: min(24rem, 58%); aspect-ratio: 1; border-color: var(--color-accent); opacity: 0.18; }
.mic-stage__note { position: absolute; z-index: 2; font-size: var(--text-xs); line-height: 1.45; color: var(--color-neutral); text-transform: uppercase; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.mic-stage__note--left { left: var(--space-sm); top: 31%; }
.mic-stage__note--right { right: var(--space-sm); bottom: 24%; text-align: right; }
.mic-product { width: min(31rem, 74%); height: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 var(--space-xl) var(--space-xl) var(--color-shadow)); }
.sound-spectrum { position: absolute; inset: 18% 4% 17%; display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); z-index: 1; opacity: 0.62; pointer-events: none; }
.sound-spectrum::before { content: ""; position: absolute; left: 0; right: 0; height: var(--rule); background: var(--color-accent-soft); }
.sound-spectrum i { --spectrum-amp: 0.56; flex: 1; max-width: var(--space-xs); height: 78%; border-radius: var(--radius-pill); background: var(--color-accent); transform: scaleY(calc(var(--spectrum-amp) * 0.18)); transform-origin: center; animation: spectrum 1.08s var(--ease-in-out) infinite alternate; animation-delay: -180ms; }
.sound-spectrum i:nth-child(4n + 1) { --spectrum-amp: 0.28; animation-delay: -720ms; }
.sound-spectrum i:nth-child(4n + 2) { --spectrum-amp: 0.74; animation-delay: -360ms; }
.sound-spectrum i:nth-child(4n + 3) { --spectrum-amp: 0.42; animation-delay: -910ms; }
.sound-spectrum i:nth-child(n + 12):nth-child(-n + 21) { --spectrum-amp: 0.9; }
.mic-stage__halo--inner { animation: mic-pulse 2.2s var(--ease-out) infinite; }

.signal-line { padding: var(--space-3xl) var(--page-gutter) var(--space-4xl); max-width: var(--content-width); margin: 0 auto; }
.signal-line > p { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.8rem); max-width: 30ch; margin-bottom: var(--space-3xl); }
.signal-line__track { display: flex; align-items: center; gap: var(--space-md); color: var(--color-neutral); font-size: var(--text-xs); letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; }
.signal-line__track i { flex: 1; min-width: 2rem; height: var(--rule); background: var(--color-rule); }

.show-flow { background: var(--color-paper-2); display: grid; grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 6vw, 7rem); padding: var(--space-4xl) var(--page-gutter); }
.show-flow__sticky { position: sticky; top: var(--space-3xl); align-self: start; max-width: 31rem; }
.show-flow__sticky h2 { font-size: var(--text-2xl); line-height: 0.93; letter-spacing: -0.05em; margin-bottom: var(--space-xl); }
.show-flow__sticky > p:not(.section-note) { color: var(--color-muted); max-width: 40ch; }
.flow-progress { margin-top: var(--space-3xl); display: grid; gap: var(--space-sm); max-width: 20rem; }
.flow-progress__bar { height: 2px; background: var(--color-rule); overflow: hidden; }
.flow-progress__bar i { display: block; height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(0.25); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
.flow-progress__text { font-size: var(--text-xs); color: var(--color-neutral); font-variant-numeric: tabular-nums; }
.show-flow__scenes { display: grid; gap: var(--space-4xl); min-width: 0; }
.flow-scene { min-height: 72vh; display: grid; align-content: center; gap: var(--space-lg); opacity: 0.5; transition: opacity var(--dur-long) var(--ease-out); }
.flow-scene.is-current { opacity: 1; }
.flow-scene__visual { position: relative; overflow: hidden; min-height: 30rem; border-radius: var(--radius-lg); background: var(--color-dark-stage); color: var(--color-dark-text); }
.flow-scene__copy { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
.flow-scene__copy span { font-size: var(--text-xs); color: var(--color-neutral); text-transform: uppercase; letter-spacing: 0.08em; }
.flow-scene__copy p { margin: 0; max-width: 44ch; font-size: var(--text-md); line-height: 1.4; }
.flow-scene__visual--hold { display: grid; place-content: center; justify-items: center; background: var(--color-accent-pale); color: var(--color-ink); }
.hold-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--color-rule) var(--rule), var(--color-transparent) var(--rule)), linear-gradient(90deg, var(--color-rule) var(--rule), var(--color-transparent) var(--rule)); background-size: 4rem 4rem; mask-image: linear-gradient(to bottom, var(--color-transparent), var(--color-ink), var(--color-transparent)); }
.hold-time { position: relative; font-size: clamp(5rem, 12vw, 10rem); font-weight: 700; letter-spacing: -0.08em; line-height: 1; font-variant-numeric: tabular-nums; }
.hold-caption { position: relative; font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.flow-scene__visual--voice { display: grid; place-content: center; text-align: center; padding: var(--space-xl); }
.flow-scene__visual--voice p { font-family: var(--font-wordmark); font-size: clamp(1.6rem, 4vw, 3.6rem); line-height: 1.05; margin: var(--space-xl) 0 0; }
.voice-line { height: 5rem; display: flex; align-items: center; justify-content: center; gap: var(--space-xs); color: var(--color-accent); }
.voice-line i { width: 0.25rem; height: 100%; background: currentColor; border-radius: var(--radius-pill); transform: scaleY(0.2); animation: voice 1.4s var(--ease-in-out) infinite alternate; }
.voice-line i:nth-child(2n) { animation-delay: 90ms; }
.voice-line i:nth-child(3n) { animation-delay: 180ms; }
.voice-line i:nth-child(5n) { animation-delay: 270ms; }
.flow-scene__visual--reveal { display: grid; place-content: center; background: var(--color-dark-stage-2); }
.reveal-word { position: relative; display: grid; font-weight: 700; font-size: clamp(4.2rem, 10vw, 9rem); line-height: 0.69; letter-spacing: -0.085em; z-index: 2; }
.reveal-word span:last-child { color: var(--color-accent); transform: translateX(0.42em); }
.reveal-flare { position: absolute; width: 18rem; aspect-ratio: 1; right: 12%; top: 18%; border-radius: 50%; background: var(--color-warm); filter: blur(5rem); opacity: 0.28; }
.flow-scene__visual--live { padding: var(--space-xl); display: grid; align-content: end; background: var(--color-accent-soft); color: var(--color-ink); }
.live-chip { position: absolute; top: var(--space-lg); right: var(--space-lg); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-signal); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; }
.speaker-frame { position: absolute; width: 48%; height: 72%; left: 26%; bottom: 0; border-radius: 50% 50% 0 0; background: var(--color-dark-stage-2); opacity: 0.94; }
.live-lower { position: relative; width: fit-content; min-width: min(22rem, 85%); display: grid; padding: var(--space-md) var(--space-lg); background: var(--color-paper); border-left: 0.3rem solid var(--color-accent); box-shadow: var(--shadow-soft); }
.live-lower b { font-size: var(--text-sm); }
.live-lower span { color: var(--color-muted); font-size: var(--text-xs); }

.catalog { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4xl) var(--page-gutter); }
.catalog__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.5fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-3xl); }
.catalog__header h2 { font-size: var(--text-2xl); line-height: 0.93; letter-spacing: -0.055em; margin: 0; }
.catalog__header p { color: var(--color-muted); max-width: 38ch; margin: 0; }
.product-list { border-top: var(--rule) solid var(--color-rule); }
.catalog .product { display: grid; grid-template-columns: 3.25rem minmax(16rem, 0.7fr) minmax(0, 1.3fr); gap: var(--space-xl); align-items: center; padding: var(--space-xl) 0; border-bottom: var(--rule) solid var(--color-rule); }
.product__index { align-self: start; color: var(--color-neutral); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.product__visual { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--color-paper-2); min-width: 0; }
.product__body { display: grid; gap: var(--space-2xl); padding: var(--space-lg) 0; }
.product__body h3 { font-size: clamp(1.65rem, 3vw, 3rem); letter-spacing: -0.045em; line-height: 1; margin-bottom: var(--space-md); }
.product__body p { color: var(--color-muted); max-width: 44ch; margin: 0; }
.product__buy { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); }
.product__price { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.add-button { border: 0; border-bottom: var(--rule) solid var(--color-ink); padding: var(--space-sm) 0; background: var(--color-transparent); display: inline-flex; align-items: center; gap: var(--space-xl); cursor: pointer; font-weight: 600; font-size: var(--text-sm); line-height: 1; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.add-button:hover { color: var(--color-accent); border-color: var(--color-accent); }
.add-button:active { transform: translateY(1px); }
.add-button.loading { opacity: 0.55; cursor: progress; }
.add-button.added { color: var(--color-accent); border-color: var(--color-accent); }
.product--podcast .product__visual { display: grid; place-content: center; background: var(--color-accent-pale); }
.podcast-rings { position: absolute; inset: 0; display: grid; place-content: center; }
.podcast-rings i { grid-area: 1 / 1; width: 7rem; aspect-ratio: 1; border: var(--rule) solid var(--color-accent); border-radius: 50%; transform: scale(var(--ring-scale, 1)); opacity: var(--ring-opacity, 1); }
.podcast-rings i:nth-child(2) { --ring-scale: 1.65; --ring-opacity: 0.55; }
.podcast-rings i:nth-child(3) { --ring-scale: 2.3; --ring-opacity: 0.2; }
.podcast-word { position: relative; font-weight: 700; letter-spacing: 0.13em; }
.product--radio .product__visual { background: var(--color-dark-stage); color: var(--color-dark-text); display: grid; place-content: center; justify-items: center; gap: var(--space-xl); }
.radio-dial { position: relative; width: min(15rem, 55%); aspect-ratio: 1; border: var(--rule) solid var(--color-rule-dark); border-radius: 50%; display: grid; place-content: center; }
.radio-dial::after { content: ""; position: absolute; width: 45%; height: var(--rule); top: 50%; left: 50%; background: var(--color-accent); transform-origin: left; transform: rotate(-32deg); }
.radio-dial span { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.radio-bars { display: flex; gap: var(--space-xs); }
.radio-bars i { width: 2rem; height: 0.2rem; background: var(--color-rule-dark); }
.radio-bars i:nth-child(-n+3) { background: var(--color-accent); }
.product--narration .product__visual { padding: var(--space-xl); display: grid; align-content: space-between; background: var(--color-paper-3); }
.script-lines { display: grid; font-family: var(--font-display); font-size: clamp(1.4rem, 3.5vw, 2.8rem); line-height: 1.02; }
.script-lines span:nth-child(2) { margin-left: 12%; color: var(--color-accent); }
.script-lines span:nth-child(3) { margin-left: 26%; }
.narration-play { justify-self: end; width: 3rem; aspect-ratio: 1; display: grid; place-content: center; border: var(--rule) solid var(--color-ink); border-radius: 50%; font-size: var(--text-xs); }
.product--commercial .product__visual { background: var(--color-warm); padding: var(--space-xl); display: flex; justify-content: space-between; align-items: stretch; }
.commercial-type { display: grid; align-content: center; font-size: clamp(2.4rem, 6vw, 5.5rem); font-weight: 700; line-height: 0.72; letter-spacing: -0.08em; }
.commercial-type span:nth-child(2) { color: var(--color-paper); }
.commercial-rule { width: var(--rule); background: var(--color-ink); }
.product--personal .product__visual { background: var(--color-accent-soft); display: grid; place-content: center; }
.personal-grid { display: grid; grid-template-columns: repeat(3, 3rem); gap: var(--space-sm); transform: rotate(-8deg); }
.personal-grid i { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-paper); box-shadow: 0 0.65rem 1.5rem var(--color-shadow); }
.personal-grid i:nth-child(2), .personal-grid i:nth-child(5) { background: var(--color-accent); }
.personal-plus { position: absolute; right: var(--space-xl); bottom: var(--space-lg); font-size: var(--text-xl); }

.bundle { background: var(--color-dark-stage); color: var(--color-dark-text); padding: var(--space-4xl) max(var(--page-gutter), calc((100% - var(--content-width)) / 2 + var(--page-gutter))); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; overflow: hidden; }
.bundle .section-note { color: var(--color-rule-dark); }
.bundle__copy h2 { font-size: var(--text-2xl); line-height: 0.94; letter-spacing: -0.055em; margin-bottom: var(--space-xl); }
.bundle__copy > p:not(.section-note) { max-width: 44ch; color: var(--color-rule-dark); }
.bundle .text-link { border-color: var(--color-dark-text); }
.bundle__stack { position: relative; min-height: 34rem; perspective: 70rem; }
.bundle-card { position: absolute; inset: 8% 4% 8% 10%; border-radius: var(--radius-lg); padding: var(--space-xl); display: grid; align-content: space-between; box-shadow: var(--shadow-soft); transform-origin: bottom center; }
.bundle-card span { font-size: var(--text-xs); letter-spacing: 0.14em; }
.bundle-card--back { background: var(--color-paper-3); color: var(--color-ink); transform: rotate(-8deg) translate(-10%, -8%); }
.bundle-card--mid { background: var(--color-warm); color: var(--color-ink); transform: rotate(7deg) translate(12%, 2%); }
.bundle-card--front { background: var(--color-accent); color: var(--color-accent-ink); transform: rotate(-1deg); }
.bundle-card b { font-size: var(--text-xl); }
.bundle-card strong { font-size: clamp(5rem, 11vw, 10rem); letter-spacing: -0.08em; font-variant-numeric: tabular-nums; line-height: 0.9; }
.bundle-card i { font-size: var(--text-sm); font-style: normal; }

.confidence { padding: var(--space-3xl) var(--page-gutter); max-width: var(--content-width); margin: 0 auto; display: grid; grid-template-columns: 0.55fr 1.45fr; gap: var(--space-2xl); align-items: start; }
.confidence > p { color: var(--color-muted); }
.confidence dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.confidence dl div { padding: 0 var(--space-lg); border-left: var(--rule) solid var(--color-rule); display: grid; gap: var(--space-xs); }
.confidence dt { font-weight: 600; }
.confidence dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

.faq-support { padding: var(--space-4xl) var(--page-gutter); max-width: var(--content-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr); gap: clamp(3rem, 7vw, 8rem); }
.faq > h2, .support-card h2 { font-size: var(--text-2xl); line-height: 0.96; letter-spacing: -0.05em; }
.faq__list { border-top: var(--rule) solid var(--color-rule); }
.faq details { border-bottom: var(--rule) solid var(--color-rule); }
.faq summary { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font-size: var(--text-lg); font-weight: 400; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 62ch; color: var(--color-muted); padding: 0 var(--space-2xl) var(--space-lg) 0; }
.support-card { background: var(--color-accent-pale); border-radius: var(--radius-lg); padding: var(--space-2xl); align-self: start; position: sticky; top: var(--space-3xl); }
.support-card__signal { height: 4rem; display: flex; gap: var(--space-2xs); align-items: center; margin-bottom: var(--space-3xl); color: var(--color-accent); }
.support-card__signal i { width: 0.2rem; height: 24%; background: currentColor; }
.support-card__signal i:nth-child(2), .support-card__signal i:nth-child(6) { height: 56%; }
.support-card__signal i:nth-child(3), .support-card__signal i:nth-child(5) { height: 90%; }
.support-card__signal i:nth-child(4) { height: 40%; }
.support-card > p { color: var(--color-muted); }
.support-card__link { margin-top: var(--space-xl); min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); border-bottom: var(--rule) solid var(--color-ink); font-weight: 600; line-height: 1; white-space: nowrap; }
.support-card__contacts { margin-top: var(--space-xl); }
.support-card__contacts .support-card__link { margin-top: 0; }

.vsb-contact-form { width: min(100% - 2 * var(--page-gutter), var(--content-width)); margin: var(--space-3xl) auto var(--space-4xl); display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.vsb-contact-form__intro { position: sticky; top: var(--space-xl); }
.vsb-contact-form__intro h2 { max-width: 10ch; margin-bottom: var(--space-xl); font-size: var(--text-2xl); line-height: .94; letter-spacing: -.055em; }
.vsb-contact-form__intro > p { max-width: 38ch; color: var(--color-muted); }
.vsb-contact-form__note { padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule); font-size: var(--text-sm); }
.vsb-contact-form__details { display: grid; gap: .6rem; margin-top: var(--space-lg); }
.vsb-contact-form__details a { width: max-content; max-width: 100%; border-bottom: var(--rule) solid var(--color-rule); padding-bottom: .3rem; color: var(--color-ink); font-size: var(--text-sm); font-weight: 650; overflow-wrap: anywhere; }
.vsb-contact-form__details a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.vsb-contact-form__panel { padding: clamp(1.25rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.vsb-contact-form__panel form { display: grid; gap: var(--space-lg); }
.vsb-contact-form__panel p { display: grid; gap: var(--space-xs); margin: 0; min-width: 0; }
.vsb-contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.vsb-contact-form label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 650; }
.vsb-contact-form input, .vsb-contact-form select, .vsb-contact-form textarea { width: 100%; min-height: 3.25rem; box-sizing: border-box; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sm); padding: .8rem 1rem; background: var(--color-paper); color: var(--color-ink); font: inherit; }
.vsb-contact-form textarea { resize: vertical; }
.vsb-contact-form input:focus-visible, .vsb-contact-form select:focus-visible, .vsb-contact-form textarea:focus-visible { outline: .18rem solid var(--color-accent); outline-offset: .1rem; border-color: var(--color-accent); }
.vsb-contact-form button { min-height: 3.5rem; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: var(--radius-pill); padding-inline: var(--space-lg); background: var(--color-ink); color: var(--color-paper); cursor: pointer; font: inherit; font-weight: 650; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.vsb-contact-form button:hover { background: var(--color-ink-2); transform: translateY(-.1rem); }
.vsb-contact-form__notice { margin-bottom: var(--space-lg); padding: var(--space-md); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sm); }
.vsb-contact-form__notice.is-success { border-color: var(--color-accent); background: var(--color-accent-pale); }
.vsb-contact-form__notice.is-error { border-color: var(--color-signal); background: var(--color-paper); }
.vsb-contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.site-footer { background: var(--color-paper-2); padding: var(--space-4xl) var(--page-gutter) var(--space-xl); }
.site-footer__statement { font-size: clamp(3.5rem, 9vw, 8.5rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.075em; margin-bottom: var(--space-4xl); }
.site-footer__statement::first-line { color: var(--color-accent); }
.site-footer__meta { padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
.site-footer__meta nav { display: flex; gap: var(--space-lg); }
.site-footer__meta nav a { line-height: 1; white-space: nowrap; }
.site-footer__meta nav a:hover { color: var(--color-accent); }
.site-footer__meta > span { justify-self: end; white-space: nowrap; }
.site-footer__identity { display: grid; gap: var(--space-sm); }
.site-footer__contact { display: grid; gap: .35rem; }
.site-footer__contact a { width: max-content; color: var(--color-muted); line-height: 1.25; }
.site-footer__contact a:hover { color: var(--color-accent); }

.drawer-backdrop { position: fixed; inset: 0; background: var(--color-overlay); opacity: 0; visibility: hidden; z-index: var(--z-overlay); transition: opacity var(--dur-medium) var(--ease-in), visibility 0s var(--dur-medium); }
.checkout-drawer { position: fixed; inset: 0 0 0 auto; width: min(34rem, 100%); background: var(--color-paper); z-index: var(--z-drawer); padding: clamp(1.5rem, 5vw, 3rem); transform: translateX(100%); visibility: hidden; transition: transform var(--dur-long) var(--ease-out), visibility 0s var(--dur-long); overflow-y: auto; }
.is-drawer-open .drawer-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
.is-drawer-open .checkout-drawer { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.drawer-close { margin-left: auto; border: var(--rule) solid var(--color-rule); border-radius: 50%; width: 2.75rem; height: 2.75rem; display: grid; place-content: center; background: var(--color-paper); cursor: pointer; font-size: var(--text-lg); }
.checkout-drawer h2 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 0.95; letter-spacing: -0.05em; margin-bottom: var(--space-2xl); }
.checkout-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-lg) 0; border-block: var(--rule) solid var(--color-rule); margin-bottom: var(--space-2xl); }
.checkout-item__thumb { aspect-ratio: 1; background: var(--color-accent-soft); border-radius: var(--radius-sm); display: grid; place-content: center; color: var(--color-accent); font-weight: 700; }
.checkout-item > div:nth-child(2) { display: grid; }
.checkout-item span { color: var(--color-muted); font-size: var(--text-xs); }
.checkout-item b { font-variant-numeric: tabular-nums; }
.checkout-field { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.checkout-field > span { font-size: var(--text-sm); font-weight: 600; }
.checkout-field select, .checkout-field textarea { width: 100%; border: var(--rule) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-md); }
.checkout-field textarea { resize: vertical; }
.checkout-field select:focus, .checkout-field textarea:focus { border-color: var(--color-accent); }
.checkout-submit { width: 100%; min-height: 3.5rem; margin-top: var(--space-lg); border: 0; border-radius: var(--radius-pill); padding: 0 var(--space-lg); display: flex; justify-content: space-between; align-items: center; background: var(--color-ink); color: var(--color-paper); cursor: pointer; font-weight: 600; white-space: nowrap; }
.checkout-submit:hover { background: var(--color-ink-2); }
.checkout-note { text-align: center; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }

@keyframes voice { from { transform: scaleY(0.14); } to { transform: scaleY(0.92); } }
@keyframes spectrum { from { transform: scaleY(calc(var(--spectrum-amp) * 0.18)); opacity: 0.32; } to { transform: scaleY(var(--spectrum-amp)); opacity: 0.76; } }
@keyframes mic-pulse { from { opacity: 0.18; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }

@media (max-width: 72rem) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: var(--space-2xl); }
  .hero__copy { display: block; }
  .hero__kicker, .hero h1 { grid-column: 1; }
  .hero__lede-row { grid-column: 2; grid-row: 1 / span 2; display: grid; }
  .mic-stage { width: min(100%, 48rem); height: clamp(32rem, 68svh, 42rem); justify-self: center; margin-top: var(--space-xl); }
  .catalog .product { grid-template-columns: 2rem minmax(15rem, 0.85fr) minmax(0, 1.15fr); }
}

@media (max-width: 60rem) {
	.vsb-classic-menu__desktop { display: none; }
	.vsb-classic-menu__mobile { display: block; }
	.vsb-contact-form { grid-template-columns: 1fr; }
	.vsb-contact-form__intro { position: static; }
  .site-nav { grid-template-columns: 1fr 1fr; }
  .site-nav__status { display: none; }
  .hero__copy { display: block; }
  .hero__lede-row { margin-top: var(--space-2xl); }
  .show-flow { grid-template-columns: 1fr; }
  .show-flow__sticky { position: static; max-width: 44rem; }
  .flow-progress { display: none; }
  .show-flow__scenes { gap: var(--space-3xl); }
  .flow-scene { min-height: auto; opacity: 1; }
  .flow-scene__visual { min-height: 25rem; }
  .catalog .product { grid-template-columns: 2rem minmax(0, 1fr); align-items: start; }
  .product__visual, .product__body { grid-column: 2; }
  .product__visual { width: 100%; }
  .product__body { padding-top: 0; }
  .bundle { grid-template-columns: 1fr; }
  .bundle__stack { min-height: 30rem; }
  .confidence { grid-template-columns: 1fr; }
  .confidence dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) 0; }
  .faq-support { grid-template-columns: 1fr; }
  .support-card { position: static; }
  .site-footer__meta { grid-template-columns: 1fr auto; }
  .site-footer__meta nav { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; }
}

@media (max-width: 40rem) {
	.vsb-contact-form { margin-block: var(--space-xl) var(--space-3xl); }
	.vsb-contact-form__row { grid-template-columns: minmax(0, 1fr); }
	.vsb-contact-form__panel { padding: var(--space-lg); }
  :root { --nav-height: 4.25rem; --page-gutter: clamp(1rem, 5vw, 1.5rem); }
  .site-nav { padding-block: var(--space-md); }
  .brand { font-size: var(--text-base); }
  .brand__mark { width: 1.5rem; height: 1.5rem; }
  .nav-cta { min-width: 2.75rem; width: 2.75rem; padding: 0; justify-content: center; font-size: 0; }
  .nav-cta span { font-size: var(--text-base); }
  .hero { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }
  .hero h1 { font-size: clamp(3.4rem, 18vw, 5.4rem); margin-bottom: var(--space-xl); }
  .hero__lede-row { grid-template-columns: 1fr; }
  .mic-stage { height: clamp(27rem, 66svh, 34rem); min-height: 27rem; margin-top: var(--space-2xl); }
  .mic-stage__meta { padding-inline: 0; }
  .mic-stage__note { display: none; }
  .mic-product { width: min(26rem, 92%); height: 100%; max-height: 100%; }
  .mic-stage__halo--outer { width: 96%; }
  .mic-stage__halo--inner { width: 68%; }
  .sound-spectrum { inset-inline: 0; }
  .signal-line { padding-block: var(--space-3xl); }
  .signal-line__track { gap: var(--space-sm); }
  .signal-line__track span:nth-of-type(even), .signal-line__track i:nth-of-type(even) { display: none; }
  .show-flow { padding-block: var(--space-3xl); }
  .flow-scene__visual { min-height: 21rem; }
  .flow-scene__copy { grid-template-columns: 1fr; gap: var(--space-sm); }
  .catalog, .faq-support { padding-block: var(--space-3xl); }
  .catalog__header { grid-template-columns: 1fr; }
  .catalog .product { grid-template-columns: 1fr; gap: var(--space-md); }
  .product__index, .product__visual, .product__body { grid-column: 1; }
  .product__visual { aspect-ratio: 4 / 3; }
  .product__buy { align-items: flex-end; }
  .script-lines { font-size: 1.55rem; }
  .personal-grid { grid-template-columns: repeat(3, 2.4rem); }
  .bundle { padding-block: var(--space-3xl); }
  .bundle__stack { min-height: 22rem; }
  .bundle-card { inset: 8% 1% 8% 5%; }
  .bundle-card strong { font-size: 4.5rem; }
  .confidence dl { grid-template-columns: 1fr; }
  .confidence dl div { padding-block: var(--space-md); }
  .support-card { padding: var(--space-xl); }
  .support-card__link { font-size: var(--text-sm); }
  .site-footer__statement { font-size: clamp(3.4rem, 18vw, 5.6rem); }
  .site-footer__meta { display: flex; flex-direction: column; align-items: flex-start; }
  .site-footer__meta nav { order: -1; display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .checkout-drawer { padding-top: var(--space-lg); }
}

@media screen and (max-width: 782px) {
  .admin-bar .site-nav { top: 46px; }
}

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