@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/source-sans-3-variable.woff2') format('woff2'); }
:root {
  --launch-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --launch-width: 1280px;
  --launch-gutter: clamp(20px, 4vw, 64px);
}
/* Professional marketing skin. Default when data-skin is missing or "pro".
   The modern skin is the light paper theme. data-skin="vintage" is the dark
   radio and keeps the marketing tokens from tokens.css. */

html:not([data-skin="vintage"]) {
  --font-ui: var(--launch-font-body);
  --font-marketing: var(--launch-font-body);
  --marketing-room: var(--bg);
  --marketing-bg: var(--surface-2);
  --marketing-surface: var(--surface);
  --marketing-surface-2: var(--surface-2);
  --marketing-text: var(--on-surface);
  --marketing-muted: var(--on-surface-muted);
  --marketing-border: var(--border);
  --marketing-accent: var(--accent);
  --marketing-accent-hover: var(--accent-hover);
  --marketing-accent-ink: var(--accent-ink);
  color-scheme: light;
}

.skin-switch {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 4px 8px 4px 12px;
  border: 1px solid color-mix(in srgb, var(--marketing-text) 28%, transparent);
  border-radius: var(--rounded-xl);
  background: color-mix(in srgb, var(--marketing-surface) 88%, transparent);
  color: var(--marketing-text);
  font: 400 13px/1 var(--font-ui);
  letter-spacing: 0;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.skin-switch:focus-visible { outline: 2px solid var(--marketing-accent); outline-offset: 3px; }
.skin-switch-label { white-space: nowrap; }
.skin-switch-track {
  position: relative;
  display: block;
  width: 28px;
  height: 16px;
  border-radius: var(--rounded-xl);
  background: var(--marketing-border);
}
.skin-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: var(--rounded-xl);
  background: var(--marketing-text);
  transition: transform var(--motion-base) var(--ease-out-expo);
}
/* On the radio the same control becomes a small brass plate in the corner,
   above the Sign knob. It must not cover that rocker. */
html[data-skin="vintage"] .skin-switch {
  top: 6px;
  right: 8px;
  gap: 5px;
  min-height: 24px;
  padding: 2px 4px 2px 6px;
  border: 1px solid var(--set-brass-deep);
  border-radius: var(--rounded-xs);
  background: linear-gradient(180deg, var(--set-brass-light), var(--set-brass) 46%, var(--set-brass-deep));
  color: var(--set-ink);
  font-family: var(--font-engrave);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-ivory) 70%, transparent);
  backdrop-filter: none;
}
html[data-skin="vintage"] .skin-switch-track {
  width: 18px;
  height: 8px;
  border-radius: var(--rounded-xs);
  background: var(--set-ink);
  box-shadow: inset 0 1px 2px color-mix(in srgb, black 55%, transparent);
}
html[data-skin="vintage"] .skin-switch-knob {
  top: 1px;
  left: 1px;
  width: 8px;
  height: 6px;
  border-radius: var(--rounded-xs);
  background: linear-gradient(180deg, var(--set-ivory), var(--set-brass));
  box-shadow: 0 1px 0 var(--set-walnut-deep);
  transform: translateX(8px);
}

@media (max-width: 820px) {
  .skin-switch { top: 8px; right: 8px; min-height: 44px; }
  html[data-skin="vintage"] .skin-switch { top: 6px; right: 8px; min-height: 24px; }
  /* Drop the radio just enough that the small plate stays above the Sign knob. */
  html[data-skin="vintage"] .radio-set { padding-top: 16px; }
  html[data-skin="vintage"] { --stage-top: 118px; }
}

/* The professional page hides the vintage home. The film stays. The vintage DOM stays for the switch. */
html[data-skin="vintage"] .pro-home { display: none !important; }
html:not([data-skin="vintage"]) .tape-home #main > :not(.pro-home):not(#watch) { display: none !important; }
/* The same film, on paper. The tape deck stays with Vintage mode. The picture keeps its own dark colours. */
html:not([data-skin="vintage"]) #watch.film-band {
  background: transparent;
  box-shadow: none;
  color: var(--marketing-text);
}
html:not([data-skin="vintage"]) #watch .deck,
html:not([data-skin="vintage"]) #watch .beam { display: none; }
html:not([data-skin="vintage"]) #watch .screening {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
  margin-inline: auto;
}
html:not([data-skin="vintage"]) #watch .film-head .eyebrow { color: var(--accent); }
html:not([data-skin="vintage"]) #watch .film-head h2 { color: var(--marketing-text); }
html:not([data-skin="vintage"]) #watch .film-head .lead { color: var(--marketing-muted); }
html:not([data-skin="vintage"]) #watch .screen-cloth {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 35%, transparent), var(--shadow-float);
}
html:not([data-skin="vintage"]) #watch .film-chapters button { color: var(--marketing-muted); }
html:not([data-skin="vintage"]) #watch .film-chapters button[data-current] { color: var(--accent); }
html:not([data-skin="vintage"]) #watch .film-chapters button[data-current]::before {
  background: var(--accent);
  box-shadow: none;
}
html:not([data-skin="vintage"]) #watch .film .button {
  min-height: 0;
  font-family: var(--font-marketing);
  letter-spacing: 0;
  text-transform: none;
}

html:not([data-skin="vintage"]) body.tape-home,
html:not([data-skin="vintage"]) body.set-room {
  background-color: var(--marketing-room);
  background-image: none;
  animation: none;
  color: var(--marketing-text);
  font-family: var(--font-ui);
}
html:not([data-skin="vintage"]) .legal,
html:not([data-skin="vintage"]) .doc-sheet,
html:not([data-skin="vintage"]) .lead,
html:not([data-skin="vintage"]) .station-copy p,
html:not([data-skin="vintage"]) .route-main p,
html:not([data-skin="vintage"]) .price-plan p {
  font-family: var(--font-ui);
}
html:not([data-skin="vintage"]) pre,
html:not([data-skin="vintage"]) code,
html:not([data-skin="vintage"]) .pro-code-body {
  font-family: var(--font-mono);
}

/* Flat bar in place of the photographed radio. The same links stay in the HTML. */
html:not([data-skin="vintage"]) .tape-home .radio-set,
html:not([data-skin="vintage"]) .set-room .radio-set,
html:not([data-skin="vintage"]) header.radio-set {
  --rh: 64px;
  position: sticky;
  inset: auto;
  top: 0;
  z-index: 60;
  height: 64px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--marketing-room) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--marketing-border) 80%, transparent);
  backdrop-filter: blur(16px);
}
html:not([data-skin="vintage"]) .rs-body {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(100%, 1280px);
  height: 64px;
  margin: 0 auto;
  padding-right: 168px;
  filter: none;
}
html:not([data-skin="vintage"]) .rs-piece,
html:not([data-skin="vintage"]) .rs-numbers,
html:not([data-skin="vintage"]) .rs-needle,
html:not([data-skin="vintage"]) .rs-knob,
html:not([data-skin="vintage"]) .rs-rock-word,
html:not([data-skin="vintage"]) .rs-home,
html:not([data-skin="vintage"]) .rs-knob-word { display: none !important; }
html:not([data-skin="vintage"]) .rs-brand {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
  height: 34px;
}
html:not([data-skin="vintage"]) .rs-brand::before {
  content: "";
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: url('/assets/brand/mark-nav.svg') center / contain no-repeat;
  animation: pro-breathe 3.6s ease-in-out infinite alternate;
}
html:not([data-skin="vintage"]) .rs-wordmark {
  width: 168px;
  height: 28px;
  background: url('/assets/brand/wordmark-light.svg') left center / contain no-repeat;
  mix-blend-mode: normal;
  filter: none;
}
html:not([data-skin="vintage"]) .rs-dial {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}
html:not([data-skin="vintage"]) .rs-stations {
  position: static;
  display: flex;
  align-items: center;
  gap: 2px;
  height: auto;
  inset: auto;
}
html:not([data-skin="vintage"]) .rs-stations a {
  height: auto;
  min-height: 36px;
  padding: 0 10px;
  color: var(--marketing-muted);
  font: 400 13px/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  opacity: 1;
}
html:not([data-skin="vintage"]) .rs-stations a::after { display: none; }
html:not([data-skin="vintage"]) .rs-stations a:hover,
html:not([data-skin="vintage"]) .rs-stations a:focus-visible,
html:not([data-skin="vintage"]) .rs-stations a[aria-current="page"] {
  color: var(--marketing-text);
  text-shadow: none;
  opacity: 1;
}
html:not([data-skin="vintage"]) .rs-rocker {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  width: auto;
  height: auto;
  border-radius: 0;
  perspective: none;
}
html:not([data-skin="vintage"]) .rs-rock {
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--rounded-md);
  font-size: 0;
}
html:not([data-skin="vintage"]) .rs-rock-up { background: var(--marketing-text); }
html:not([data-skin="vintage"]) .rs-rock-up::after {
  content: "Start free";
  color: var(--marketing-room);
  font: 400 12px/1 var(--font-ui);
}
html:not([data-skin="vintage"]) .rs-rock-down {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--marketing-border);
}
html:not([data-skin="vintage"]) .rs-rock-down::after {
  content: "Sign in";
  color: var(--marketing-text);
  font: 400 12px/1 var(--font-ui);
}
html:not([data-skin="vintage"]) .rs-tune { display: none; }
html:not([data-skin="vintage"]).station-live .tape-home .radio-set .rs-body { animation: none; }
html:not([data-skin="vintage"]).station-live .tape-home .rs-stations a,
html:not([data-skin="vintage"]) .rs-stations a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  animation: none;
  transition: background-size 180ms var(--ease-out-expo), color 180ms var(--ease-standard);
}
html:not([data-skin="vintage"]).station-live .tape-home .rs-stations a:hover,
html:not([data-skin="vintage"]).station-live .tape-home .rs-stations a:focus-visible,
html:not([data-skin="vintage"]) .rs-stations a:hover,
html:not([data-skin="vintage"]) .rs-stations a:focus-visible {
  background-size: 100% 2px;
}
html:not([data-skin="vintage"]) .skin-switch-knob {
  animation: pro-knob 2.2s ease-in-out infinite;
}

@media (max-width: 980px) {
  html:not([data-skin="vintage"]) .rs-stations a { padding: 0 6px; font-size: 10px; }
  html:not([data-skin="vintage"]) .rs-body { gap: 10px; padding-right: 150px; }
}
@media (max-width: 820px) {
  html:not([data-skin="vintage"]) header.radio-set,
  html:not([data-skin="vintage"]) .tape-home .radio-set,
  html:not([data-skin="vintage"]) .set-room .radio-set {
    height: auto;
    padding: 56px 16px 8px;
  }
  html:not([data-skin="vintage"]) .rs-body {
    height: 44px;
    gap: 8px;
    padding-right: 0;
  }
  html:not([data-skin="vintage"]) .rs-brand { width: auto; height: 28px; }
  html:not([data-skin="vintage"]) .rs-brand::before { flex-basis: 26px; width: 26px; height: 26px; }
  html:not([data-skin="vintage"]) .rs-wordmark { width: 128px; height: 22px; }
  html:not([data-skin="vintage"]) .rs-rocker { display: none; }
  html:not([data-skin="vintage"]) .rs-dial { justify-content: flex-end; }
  html:not([data-skin="vintage"]) .rs-tune {
    position: relative;
    inset: auto;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 36px;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid var(--marketing-border);
    border-radius: var(--rounded-md);
    background: transparent;
    color: var(--marketing-text);
    font-size: 0;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    cursor: pointer;
  }
  html:not([data-skin="vintage"]) .rs-tune span { font-size: 0; }
  html:not([data-skin="vintage"]) .rs-tune span::before {
    content: "Menu";
    color: var(--marketing-text);
    font: 400 12px/1 var(--font-ui);
  }
  html:not([data-skin="vintage"]) .rs-tune span::after { content: none; }
  html:not([data-skin="vintage"]) .rs-stations {
    position: fixed;
    top: 112px;
    left: 12px;
    right: 12px;
    z-index: 70;
    display: none;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px;
    border: 1px solid var(--marketing-border);
    border-radius: var(--rounded-lg);
    background: var(--marketing-surface);
    box-shadow: var(--shadow-float);
  }
  html:not([data-skin="vintage"]) .rs-stations[data-open],
  html:not([data-skin="vintage"]):not(.js) .rs-stations { display: flex; }
  html:not([data-skin="vintage"]) .rs-stations a {
    justify-content: flex-start;
    min-height: 44px;
    font-size: 14px;
  }
  html:not([data-skin="vintage"]) .rs-rock-down { display: none; }
}

html:not([data-skin="vintage"]) .button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--rounded-md);
  font: 400 12px/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
html:not([data-skin="vintage"]) .button.primary,
html:not([data-skin="vintage"]) .rs-rock-up {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
html:not([data-skin="vintage"]) .rs-rock-up::after { color: var(--accent-ink); }
html:not([data-skin="vintage"]) .button.primary::after {
  display: block;
  translate: none;
  animation: pro-sheen 3.2s linear infinite;
}
html:not([data-skin="vintage"]) .button.primary:hover { background: var(--accent-hover); filter: none; }
html:not([data-skin="vintage"]) .button.secondary {
  border-color: var(--marketing-border);
  background: transparent;
  color: var(--marketing-text);
}
html:not([data-skin="vintage"]) .set-room {
  background: var(--marketing-room);
}
html:not([data-skin="vintage"]) .set-room main { padding-top: 0; }
html:not([data-skin="vintage"]) .set-footer {
  max-width: var(--launch-width);
  padding: var(--space-page-lg) var(--launch-gutter);
  border-top: 1px solid var(--marketing-border);
  background: var(--marketing-room);
  font-family: var(--launch-font-body);
}
html:not([data-skin="vintage"]) .set-footer .footer-heading { font-family: inherit; }
@media (max-width: 600px) {
  html:not([data-skin="vintage"]) .set-footer { padding-block: var(--space-page); }
}
html:not([data-skin="vintage"]) h1,
html:not([data-skin="vintage"]) h2,
html:not([data-skin="vintage"]) h3,
html:not([data-skin="vintage"]) .door-title,
html:not([data-skin="vintage"]) .station h1,
html:not([data-skin="vintage"]) .eyebrow,
html:not([data-skin="vintage"]) .door-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.04em;
  text-transform: none;
  text-shadow: none;
  filter: none;
}
html:not([data-skin="vintage"]).station-live .station .station-view {
  position: static;
  top: auto;
  height: auto;
  overflow: visible;
  padding-top: 0;
}
html:not([data-skin="vintage"]) .station {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 11vh 6vw 8vh;
  background: none;
  overflow: hidden;
}
html:not([data-skin="vintage"]) .station-cabinet {
  width: min(1120px, 100%);
  margin: 0;
  filter: none;
  transform: none !important;
}
html:not([data-skin="vintage"]) .station-recap { display: none !important; }
html:not([data-skin="vintage"]) .station .cabinet-bay {
  aspect-ratio: auto;
  min-height: 0;
  background: none;
  perspective: none;
}
html:not([data-skin="vintage"]) .station .station-inside,
html:not([data-skin="vintage"]) .station .door-right,
html:not([data-skin="vintage"]) .station .door-rule,
html:not([data-skin="vintage"]) .station-veil,
html:not([data-skin="vintage"]) .station-hint { display: none !important; }
html:not([data-skin="vintage"]) .station .door,
html:not([data-skin="vintage"]) .station .door-left {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  transform: none;
}
html:not([data-skin="vintage"]) .station .door-engraving {
  position: static;
  top: auto;
  left: auto;
  width: min(1080px, 100%);
  max-width: 100%;
}
html:not([data-skin="vintage"]) .station h1,
html:not([data-skin="vintage"]) .door-title {
  display: block;
  max-width: 14em;
  margin: 0;
  color: var(--marketing-text);
  font-size: clamp(40px, 6.2vw, 84px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
  filter: none !important;
}
html:not([data-skin="vintage"]) .cta-proof {
  color: var(--marketing-muted);
  font: 400 12px/1.4 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
html:not([data-skin="vintage"]) .cta-proof li + li::before {
  background: var(--marketing-muted);
  border-radius: var(--rounded-xl);
  transform: none;
  opacity: 0.7;
}
html:not([data-skin="vintage"]) .door-eyebrow {
  margin: 0 0 16px;
  color: var(--marketing-muted);
  font-size: 13px;
}
html:not([data-skin="vintage"]).station-live .station .station-copy {
  position: static;
  left: auto;
  top: auto;
  z-index: auto;
  width: min(40rem, 100%);
  margin: 28px 0 0;
  padding: 0;
  text-align: left;
  justify-items: start;
  opacity: 1;
  transform: none;
}
html:not([data-skin="vintage"]).station-live .station .station-copy .lead {
  color: var(--marketing-muted);
  font-size: 18px;
  text-shadow: none;
}
html:not([data-skin="vintage"]) .station-copy .actions { justify-content: flex-start; }

/* Huge product windows on the inner pages. */
html:not([data-skin="vintage"]) .set-room .product-shot,
html:not([data-skin="vintage"]) .shot-section > .product-shot {
  width: 100%;
  max-width: none;
  margin-top: 48px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--marketing-border);
  border-bottom: 0;
  border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
  background: var(--marketing-surface);
  box-shadow: none;
  justify-self: stretch;
}
html:not([data-skin="vintage"]) .set-room .product-shot picture,
html:not([data-skin="vintage"]) .set-room .product-shot img,
html:not([data-skin="vintage"]) .shot-section > .product-shot img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}
html:not([data-skin="vintage"]) .set-room .product-shot figcaption {
  padding: 14px 18px 18px;
  border: 0;
  color: var(--marketing-muted);
  font: 400 12px/1.4 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
html:not([data-skin="vintage"]) .set-room .evidence-card,
html:not([data-skin="vintage"]) .set-room .platform-card,
html:not([data-skin="vintage"]) .set-room .agent-step,
html:not([data-skin="vintage"]) .set-room .price-plan,
html:not([data-skin="vintage"]) .set-room .price-plan.pro {
  border: 1px solid var(--marketing-border);
  border-radius: var(--rounded-lg);
  background: var(--marketing-surface);
  box-shadow: none;
}
html:not([data-skin="vintage"]) .set-room .price-plan.pro { border-color: var(--marketing-accent); }
html:not([data-skin="vintage"]) .pricing-grid-3 > .price-plan {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  grid-template-rows: none;
}
html:not([data-skin="vintage"]) .price-plan h2 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
html:not([data-skin="vintage"]) .price-plan .button { margin-top: auto; }
html:not([data-skin="vintage"]) .cta-dock {
  border: 1px solid var(--marketing-border);
  border-radius: var(--rounded-lg);
  background: var(--marketing-surface);
  box-shadow: none;
}
html:not([data-skin="vintage"]) .cta-dock p {
  color: var(--marketing-muted);
  font: 400 12px/1 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
html:not([data-skin="vintage"]) .cta-dock-dot {
  background: var(--marketing-muted);
  border-radius: var(--rounded-xl);
  transform: none;
}
@media (min-width: 821px) {
  html:not([data-skin="vintage"]) .cta-dock { display: none; }
}
html:not([data-skin="vintage"]) .set-room .evidence-card small,
html:not([data-skin="vintage"]) .set-room .platform-card small,
html:not([data-skin="vintage"]) .set-room .agent-step small,
html:not([data-skin="vintage"]) .set-room .price-plan small,
html:not([data-skin="vintage"]) .set-room .eyebrow {
  color: var(--marketing-muted);
  font: 400 12px/1.3 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

/* Home: the product rises from under the fold. */
.pro-home { background: var(--marketing-room); color: var(--marketing-text); }
.pro-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 64px);
  min-height: 640px;
  overflow: hidden;
  padding: 4.5vh 6vw 0;
}
.pro-hero-copy { position: relative; z-index: 2; max-width: 980px; }
.pro-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 22px;
  padding: 0 12px;
  border: 1px solid var(--marketing-border);
  border-radius: var(--rounded-xl);
  color: var(--marketing-muted);
  font-size: 11px;
}
.pro-display {
  margin: 0;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.015em;
}
.pro-mark { position: relative; }
.pro-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.pro-lead {
  max-width: 34rem;
  margin: 22px 0 0;
  color: var(--marketing-muted);
  font-size: 15px;
  line-height: 1.65;
}
.pro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pro-proof { margin: 12px 0 0; color: var(--marketing-muted); font-size: 11px; }
.pro-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 20px 0 0;
}
.pro-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 40px;
  background: linear-gradient(transparent, var(--marketing-room));
  pointer-events: none;
}
.pro-window {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--marketing-border);
  border-bottom: 0;
  border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
  background: var(--marketing-surface);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--on-surface) 22%, transparent);
}
.pro-chrome {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: var(--marketing-surface-2);
}
.pro-chrome i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--rounded-xl);
  background: var(--marketing-muted);
}
.pro-window-main { left: 0; right: 0; top: 0; bottom: 0; }
.pro-shot { display: block; }
.pro-shot img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center top;
}
.pro-scenes {
  --scene-dur: 5.5s;
  --scene-loop: 33s;
  display: flex;
  flex-direction: column;
}
.pro-scenes .pro-shot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.pro-shot .pro-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: pro-scene var(--scene-loop) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-dur));
}
.pro-shot .pro-scene:nth-child(1) { object-position: 72% 42%; }
.pro-shot .pro-scene:nth-child(2) { object-position: 72% 48%; }
.pro-shot .pro-scene-issue { object-position: 48% 16%; }
.pro-shot .pro-scene:nth-child(4) { object-position: 55% 36%; }
.pro-shot .pro-scene:nth-child(5) { object-position: 46% 14%; }
.pro-shot .pro-scene-agent {
  object-fit: contain;
  object-position: center;
  background: var(--on-surface);
}
.pro-scene-name {
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  margin-left: 10px;
}
.pro-scene-name span {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--marketing-muted);
  font: 400 13px/1 var(--font-ui);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  animation: pro-name var(--scene-loop) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-dur));
}
.pro-ticks {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}
.pro-ticks i {
  width: 14px;
  height: 2px;
  border-radius: var(--rounded-xs);
  background: var(--accent);
  opacity: 0.28;
  animation: pro-tick var(--scene-loop) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-dur));
}
.pro-cursor {
  position: absolute;
  z-index: 5;
  left: 76%;
  top: 82%;
  width: 18px;
  height: 22px;
  background: var(--on-surface);
  clip-path: polygon(0 0, 0 78%, 28% 62%, 46% 100%, 62% 92%, 44% 56%, 78% 56%);
  filter: drop-shadow(0 0 0.6px var(--marketing-surface)) drop-shadow(0 1px 1px color-mix(in srgb, var(--on-surface) 40%, transparent));
  opacity: 0;
  pointer-events: none;
  animation: pro-cursor var(--scene-loop) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-dur));
}
.pro-cursor-click { left: 76%; top: 72%; animation-name: pro-cursor-click; }
.pro-captured {
  position: absolute;
  z-index: 5;
  left: 16px;
  top: 44px;
  padding: 6px 10px;
  border-radius: var(--rounded-md);
  background: var(--accent);
  color: var(--accent-ink);
  font: 400 13px/1 var(--font-ui);
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  animation: pro-chip var(--scene-loop) linear infinite;
  animation-delay: var(--scene-dur);
}

.pro-marquee {
  overflow: hidden;
  border-block: 1px solid var(--marketing-border);
  background: var(--marketing-surface);
}
.pro-marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  padding: 16px 0;
}
.pro-marquee span {
  color: var(--marketing-muted);
  font: 400 12px/1 var(--font-ui);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pro-marquee span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 22px;
  background: var(--accent);
  border-radius: var(--rounded-xs);
  vertical-align: 1px;
}
.pro-reel {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px 40px;
  align-items: end;
  padding: 7vh 6vw 6vh;
  background: var(--marketing-surface);
  scroll-margin-top: 80px;
}
.pro-reel-copy { max-width: 8em; }
.pro-reel-frame { margin-top: 0; }
.pro-reel > .pro-caption { grid-column: 1 / -1; margin-top: 0; }
.pro-reel-shot { display: block; overflow: hidden; }
.pro-reel-shot img { display: block; width: 118%; max-width: none; height: auto; }
.pro-kicker { margin: 0 0 12px; color: var(--marketing-muted); font-size: 13px; }
.pro-poster-title {
  margin: 0;
  font-size: clamp(40px, 8vw, 104px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0.02em;
}

.pro-block { padding: 12vh 6vw; }
.pro-block-title {
  max-width: 12em;
  margin: 0 0 28px;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.015em;
}
.pro-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--marketing-border);
  border-bottom: 0;
  border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
  background: var(--marketing-surface);
}
.pro-frame img { display: block; width: 100%; height: auto; }
.pro-caption { margin: 14px 0 0; color: var(--marketing-muted); font-size: 12px; }

.pro-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
}
.pro-code-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--marketing-border);
  border-radius: var(--rounded-lg);
  background: var(--marketing-surface);
}
.pro-code-body {
  margin: 0;
  padding: 22px 22px 28px;
  overflow: auto;
  color: var(--marketing-text);
  font-size: 13px;
  line-height: 1.6;
}
.pro-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 64px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--marketing-border);
}
.pro-stat-n {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.pro-stat-l { margin: 8px 0 0; max-width: 18em; color: var(--marketing-muted); font-size: 13px; line-height: 1.45; }

.pro-close { padding-bottom: 18vh; }
.pro-close .pro-block-title { max-width: 10em; }
.pro-film {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--marketing-text);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--marketing-accent);
  text-underline-offset: 4px;
}

@keyframes pro-rise {
  from { transform: translateY(12%); }
  to { transform: none; }
}
@keyframes pro-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes pro-pan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -7%, 0); }
}
@keyframes pro-reel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-12%, 0, 0); }
}
@keyframes pro-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes pro-drift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to { transform: translate3d(10%, 8%, 0) scale(1.08); }
}
@keyframes pro-scan {
  from { transform: translate3d(-30vw, 0, 0); }
  to { transform: translate3d(110vw, 0, 0); }
}
@keyframes pro-sheen {
  from { transform: translate3d(-180%, 0, 0); }
  to { transform: translate3d(560%, 0, 0); }
}
@keyframes pro-sweep {
  to { transform: scaleX(1); }
}
@keyframes pro-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0.15; }
}
@keyframes pro-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}
@keyframes pro-fall {
  from { transform: translate3d(0, -120%, 0); }
  to { transform: translate3d(0, 650%, 0); }
}
@keyframes pro-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.72); }
}
@keyframes pro-grid {
  to { background-position: 0 56px, -56px 0; }
}
@keyframes pro-knob {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 42%, transparent); }
}
@keyframes pro-hover {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}
@keyframes pro-scene {
  0% { opacity: 1; }
  12% { opacity: 1; }
  19% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes pro-name {
  0%, 14% { opacity: 1; }
  18%, 100% { opacity: 0; }
}
@keyframes pro-tick {
  0%, 15% { opacity: 1; }
  18%, 100% { opacity: 0.28; }
}
@keyframes pro-cursor {
  0% { opacity: 0; transform: translate3d(-40px, -24px, 0); }
  3% { opacity: 1; transform: translate3d(-40px, -24px, 0); }
  9% { opacity: 1; transform: translate3d(0, 0, 0); }
  14% { opacity: 1; transform: translate3d(0, 0, 0); }
  18% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes pro-cursor-click {
  0% { opacity: 0; transform: translate3d(-16px, -8px, 0) scale(1); }
  3% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  7% { opacity: 1; transform: translate3d(0, 0, 0) scale(0.82); }
  10% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  14% { opacity: 1; }
  18% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes pro-chip {
  0%, 5% { opacity: 0; transform: translate3d(0, 6px, 0); }
  8%, 14% { opacity: 1; transform: translate3d(0, 0, 0); }
  18%, 100% { opacity: 0; }
}

html:not([data-skin="vintage"]) .pro-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: var(--rounded-xl);
  background: var(--accent);
  animation: pro-live 1.4s ease-in-out infinite;
}
html:not([data-skin="vintage"]) .pro-home { position: relative; }
html:not([data-skin="vintage"]) .pro-home::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 38vw;
  height: 38vw;
  left: -12vw;
  top: 18vh;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  animation: pro-drift 18s var(--ease-standard) infinite alternate-reverse;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .pro-window-main::after { content: none; animation: none; }
html:not([data-skin="vintage"]) .pro-window::after,
html:not([data-skin="vintage"]) .pro-frame::after,
html:not([data-skin="vintage"]) .pro-code-window::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, white 50%, transparent), transparent);
  mix-blend-mode: soft-light;
  animation: pro-sheen 3.4s linear infinite;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .station::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  animation: pro-fall 9s linear infinite;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .price-plan,
html:not([data-skin="vintage"]) .platform-card,
html:not([data-skin="vintage"]) .agent-step {
  position: relative;
  overflow: hidden;
}
html:not([data-skin="vintage"]) .price-plan::after,
html:not([data-skin="vintage"]) .platform-card::after,
html:not([data-skin="vintage"]) .agent-step::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 42%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  animation: pro-sheen 7s linear infinite;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .pro-hero::before,
html:not([data-skin="vintage"]) .station::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 52vw;
  height: 52vw;
  right: -12vw;
  top: -18vh;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  animation: pro-drift 14s var(--ease-standard) infinite alternate;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .pro-hero-copy,
html:not([data-skin="vintage"]) .pro-stage,
html:not([data-skin="vintage"]) .pro-marquee,
html:not([data-skin="vintage"]) .pro-reel,
html:not([data-skin="vintage"]) .pro-block,
html:not([data-skin="vintage"]) .station .cabinet-bay,
html:not([data-skin="vintage"]) .station-copy { position: relative; z-index: 1; }
html:not([data-skin="vintage"]) header.radio-set::after { content: none; animation: none; }
html:not([data-skin="vintage"]) .set-room .product-shot::after,
html:not([data-skin="vintage"]) .shot-section > .product-shot::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, white 55%, transparent), transparent);
  mix-blend-mode: soft-light;
  animation: pro-sheen 3.6s linear infinite;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .install-code {
  position: relative;
  overflow: hidden;
}
html:not([data-skin="vintage"]) .install-code::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 30%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  animation: pro-sheen 4.2s linear infinite;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .site-footer {
  position: relative;
  overflow: hidden;
}
html:not([data-skin="vintage"]) .site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  right: -12vw;
  bottom: -24vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  animation: pro-drift 11s var(--ease-standard) infinite alternate;
  pointer-events: none;
}
html:not([data-skin="vintage"]) .site-footer > * { position: relative; z-index: 1; }
html:not([data-skin="vintage"]) .pro-window { animation: pro-rise 1.15s var(--ease-out-expo) both; }
html:not([data-skin="vintage"]) .pro-shot img:not(.pro-scene) { animation: pro-pan 9s var(--ease-standard) 1.15s infinite alternate; }
html:not([data-skin="vintage"]) .pro-hero-copy > * { animation: pro-in 0.8s var(--ease-out-expo) both; }
html:not([data-skin="vintage"]) .pro-hero-copy > :nth-child(2) { animation-delay: 70ms; }
html:not([data-skin="vintage"]) .pro-hero-copy > :nth-child(3) { animation-delay: 140ms; }
html:not([data-skin="vintage"]) .pro-hero-copy > :nth-child(4) { animation-delay: 200ms; }
html:not([data-skin="vintage"]) .pro-mark::after { animation: pro-sweep 0.9s var(--ease-out-expo) 0.35s forwards; }
html:not([data-skin="vintage"]) .pro-marquee-track { animation: pro-marquee 10s linear infinite; }
html:not([data-skin="vintage"]) .pro-marquee span::before { animation: pro-live 1.5s ease-in-out infinite; }
html:not([data-skin="vintage"]) .pro-marquee span:nth-child(2n)::before { animation-delay: 0.45s; }
html:not([data-skin="vintage"]) .pro-reel-shot img { animation: pro-reel 14s var(--ease-standard) infinite alternate; }
html:not([data-skin="vintage"]) .pro-frame > img { animation: none; transform-origin: center top; }
html:not([data-skin="vintage"]) .pro-chrome i { animation: pro-blink 2.2s steps(1) infinite; }
html:not([data-skin="vintage"]) .pro-chrome i:nth-child(2) { animation-delay: 0.25s; }
html:not([data-skin="vintage"]) .pro-chrome i:nth-child(3) { animation-delay: 0.5s; }
html:not([data-skin="vintage"]) .pro-chrome .pro-ticks i {
  width: 14px;
  height: 2px;
  border-radius: var(--rounded-xs);
  background: var(--accent);
  animation: pro-tick var(--scene-loop) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-dur));
}
html:not([data-skin="vintage"]) .pro-code-body code::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 3px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: pro-blink 1s steps(1) infinite;
}
html:not([data-skin="vintage"]) .pro-stat { animation: pro-in 0.8s var(--ease-out-expo) both; }
html:not([data-skin="vintage"]) .pro-stat:nth-child(2) { animation-delay: 90ms; }
html:not([data-skin="vintage"]) .pro-stat:nth-child(3) { animation-delay: 180ms; }
html:not([data-skin="vintage"]) .set-room .product-shot { overflow: hidden; }
html:not([data-skin="vintage"]) .set-room .product-shot img { animation: none; transform-origin: center top; }
html:not([data-skin="vintage"]) .evidence-card { animation: pro-in 0.85s var(--ease-out-expo) both; }
html:not([data-skin="vintage"]) .price-plan,
html:not([data-skin="vintage"]) .platform-card,
html:not([data-skin="vintage"]) .agent-step {
  animation: pro-in 0.85s var(--ease-out-expo) both;
}
html:not([data-skin="vintage"]) .pricing-grid-3 > .price-plan:nth-child(2),
html:not([data-skin="vintage"]) .agent-steps > .agent-step:nth-child(2) { animation-delay: 80ms, -1.4s; }
html:not([data-skin="vintage"]) .pricing-grid-3 > .price-plan:nth-child(3),
html:not([data-skin="vintage"]) .agent-steps > .agent-step:nth-child(3) { animation-delay: 160ms, -2.8s; }
html:not([data-skin="vintage"]) .site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html:not([data-skin="vintage"]) .site-footer .brand::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: url('/assets/brand/mark-nav.svg') center / contain no-repeat;
}
html:not([data-skin="vintage"]) .site-footer .brand img { filter: brightness(0); }

@supports (animation-timeline: view()) {
  html:not([data-skin="vintage"]) .pro-poster-title,
  html:not([data-skin="vintage"]) .pro-frame,
  html:not([data-skin="vintage"]) .pro-code-window,
  html:not([data-skin="vintage"]) .pro-block-title {
    animation: pro-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@media (max-width: 800px) {
  .pro-hero { height: auto; min-height: calc(100dvh - 64px); padding: 28px 20px 0; }
  .pro-display { font-size: clamp(34px, 10vw, 48px); }
  .pro-poster-title { font-size: clamp(36px, 11vw, 56px); }
  .pro-stage { min-height: 42vh; margin-top: 24px; }
  .pro-window-main { bottom: -8%; }
  .pro-cursor, .pro-cursor-click { left: 64%; top: 64%; }
  .pro-split, .pro-stats, .pro-reel { grid-template-columns: 1fr; }
  .pro-reel { align-items: start; }
  .pro-reel, .pro-block { padding-inline: 20px; }
  .pro-reel-copy { max-width: 8em; }
}

@media (prefers-reduced-motion: reduce) {
  .pro-window,
  .pro-shot img,
  .pro-hero-copy > *,
  .pro-poster-title,
  .pro-frame,
  .pro-code-window,
  .pro-stat,
  .pro-mark::after,
  .pro-marquee-track,
  .pro-reel-shot img,
  .pro-chrome i,
  .pro-code-body code::after,
  .pro-hero::before,
  .pro-home::before,
  .station::before,
  .station::after,
  .pro-window::after,
  .pro-frame::after,
  .pro-code-window::after,
  .pro-frame > img,
  .pro-pill::before,
  .pro-marquee span::before,
  .price-plan::after,
  .platform-card::after,
  .agent-step::after,
  header.radio-set::after,
  .button.primary::after,
  .set-room .product-shot img,
  .set-room .product-shot::after,
  .shot-section > .product-shot::after,
  .install-code::after,
  .pro-stage::after,
  .pro-scene,
  .pro-scene-name span,
  .pro-ticks i,
  .pro-cursor,
  .pro-captured,
  .site-footer::before,
  .rs-brand::before,
  .rs-stations a,
  body.tape-home,
  body.set-room,
  .price-plan,
  .evidence-card,
  .platform-card,
  .agent-step,
  .skin-switch-knob { animation: none !important; transition: none; }
  .pro-mark::after { transform: none; }
  .pro-reel-shot img,
  .pro-frame > img { width: 100%; }
  .pro-scene { opacity: 0 !important; }
  .pro-scene-issue { opacity: 1 !important; }
  .pro-cursor,
  .pro-captured,
  .pro-scene-name,
  .pro-ticks { display: none; }
}

/* Vintage is parked at /vintage/. The modern shell no longer reserves a switch slot. */
html:not([data-skin="vintage"]) .rs-body { padding-right: 0; }
@media (max-width: 820px) { html:not([data-skin="vintage"]) .rs-stations { top: 64px; } }
.archive-return { position: fixed; z-index: 200; bottom: var(--space-2xl); right: var(--space-2xl); padding: var(--space-2xl); color: var(--set-ivory); background: var(--set-walnut-deep); border: 1px solid var(--set-brass-deep); border-radius: var(--rounded-md); font: 400 12px/1.5 var(--font-ui); }
@media (max-width: 820px) {
  html:not([data-skin="vintage"]) header.radio-set,
  html:not([data-skin="vintage"]) .tape-home .radio-set,
  html:not([data-skin="vintage"]) .set-room .radio-set { height: 64px; padding: 0 16px; }
  html:not([data-skin="vintage"]) .rs-body { height: 64px; }
}

/* The modern route shell shares the builder homepage's quiet paper surface. */
html:not([data-skin="vintage"]) .station::before,
html:not([data-skin="vintage"]) .station::after { display: none; }
html:not([data-skin="vintage"]) .rs-brand::before { animation: none; }
html:not([data-skin="vintage"]) .button { font-weight: 600; }
html:not([data-skin="vintage"]) .button::after { display: none; }
html:not([data-skin="vintage"]) .button.secondary { box-shadow: none; }
html:not([data-skin="vintage"]) .price-plan::after,
html:not([data-skin="vintage"]) .platform-card::after,
html:not([data-skin="vintage"]) .agent-step::after { display: none; }

html:not([data-skin="vintage"]) .site-footer::before { display: none; }


/* A code panel is a color pair: marketing-room becomes paper in this skin. */
html:not([data-skin="vintage"]) .doc-code {
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
html:not([data-skin="vintage"]) .doc-code code { color: inherit; background: transparent; }
html:not([data-skin="vintage"]) .doc-code[data-lang]::before { color: var(--on-surface-muted); }
html:not([data-skin="vintage"]) .doc-back { color: var(--accent); }
html:not([data-skin="vintage"]) .doc-group h2 { color: var(--on-surface-muted); }
html:not([data-skin="vintage"]) .doc-back:hover,
html:not([data-skin="vintage"]) .doc-raw:hover,
html:not([data-skin="vintage"]) .doc-toc a:hover { color: var(--on-surface); }

/* Paper links keep their contrast in every interaction state. */
html:not([data-skin="vintage"]) .text-link { color: var(--accent); font-family: var(--font-ui); }
html:not([data-skin="vintage"]) .text-link:hover { color: var(--on-surface); }
html:not([data-skin="vintage"]) .text-link:focus-visible { color: var(--on-surface); outline: 2px solid var(--accent); outline-offset: var(--space-sm); }
html:not([data-skin="vintage"]) .dev-nav-title,
html:not([data-skin="vintage"]) .route-list span,
html:not([data-skin="vintage"]) .flow-rail .fr-where,
html:not([data-skin="vintage"]) .credit-table td:last-child { color: var(--on-surface-muted); }
html:not([data-skin="vintage"]) .set-room .eyebrow { color: var(--accent); }

/* Dark demo chrome is a local theme, independent of the paper page. */
html:not([data-skin="vintage"]) .demo-rig {
  background: var(--neutral);
  color: var(--on-surface);
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-float);
}
html:not([data-skin="vintage"]) .demo-rig .rig-bar { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
html:not([data-skin="vintage"]) .demo-rig .view-switch { background: var(--surface); box-shadow: none; border: 1px solid var(--border-hover); }
html:not([data-skin="vintage"]) .demo-rig .view-switch button { font-family: var(--font-ui); color: var(--on-surface-muted); }
html:not([data-skin="vintage"]) .demo-rig .view-switch button span { font-family: var(--font-ui); letter-spacing: 0; text-transform: none; }
html:not([data-skin="vintage"]) .demo-rig .view-switch button small { opacity: 1; }
html:not([data-skin="vintage"]) .demo-rig .view-switch button:hover { background: var(--surface-2); color: var(--on-surface); }
html:not([data-skin="vintage"]) .demo-rig .view-switch button[aria-pressed="true"] { background: var(--surface-3); color: var(--on-surface); box-shadow: none; transform: none; }
html:not([data-skin="vintage"]) .demo-rig .rec-toggle { min-height: var(--space-touch-target); font-family: var(--font-ui); letter-spacing: 0; text-transform: none; text-shadow: none; }
html:not([data-skin="vintage"]) .demo-rig .rec-toggle.secondary { color: var(--on-surface); background: var(--surface); border: 1px solid var(--border-hover); box-shadow: none; }
html:not([data-skin="vintage"]) .demo-rig .rec-toggle.secondary:hover { color: var(--on-surface); background: var(--surface-2); border-color: var(--accent); }
html:not([data-skin="vintage"]) .demo-rig .view-switch button:focus-visible,
html:not([data-skin="vintage"]) .demo-rig .rec-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-xs); }
html:not([data-skin="vintage"]) .demo-steps li b { border-color: var(--border-hover); color: var(--on-surface-muted); }
html:not([data-skin="vintage"]) .demo-steps li[data-state="active"] b { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html:not([data-skin="vintage"]) .demo-steps li[data-state="complete"] b { background: var(--success-tint); color: var(--success); border-color: var(--success); }

/* Developers starts with the task, then demonstrates it. */
html:not([data-skin="vintage"]) .developer-page .station { max-width: var(--launch-width); margin-inline: auto; padding: var(--space-page-lg) var(--launch-gutter) var(--space-3xl); }
html:not([data-skin="vintage"]) .developer-page .station h1 { max-width: 16em; }
html:not([data-skin="vintage"]) .developer-page .bt-live-section { margin-top: var(--space-3xl); margin-bottom: var(--space-page); }
html:not([data-skin="vintage"]) .developer-page .dev-nav { padding-top: var(--space-3xl); }
html:not([data-skin="vintage"]) .developer-page .dev-main > .section { padding-block: var(--space-3xl) var(--space-page); }

/* Local theme islands also rebind aliases used by shared marketing controls. */
html:not([data-skin="vintage"]) :is([data-theme="dark"], [data-theme="light"]) {
  --marketing-room: var(--neutral);
  --marketing-bg: var(--surface-2);
  --marketing-surface: var(--surface);
  --marketing-surface-2: var(--surface-2);
  --marketing-text: var(--on-surface);
  --marketing-muted: var(--on-surface-muted);
  --marketing-accent: var(--accent);
  --marketing-accent-hover: var(--accent-hover);
  --marketing-accent-ink: var(--accent-ink);
  --marketing-border: var(--border-hover);
}
html:not([data-skin="vintage"]) .demo-rig[data-capture="on"][data-order="ready"] .shop-pay:not(:disabled),
html:not([data-skin="vintage"]) .demo-rig[data-capture="on"]:not([data-order]) .shop-pay:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
html:not([data-skin="vintage"]) .demo-rig[data-capture="on"] .shop-pay:hover:not(:disabled) { background: var(--accent-hover); }
/* Beat the older station texture selector as well as its base background. */
html:not([data-skin="vintage"]).station-live .set-room:has(.station) { background: var(--neutral); }
html:not([data-skin="vintage"]) [data-theme="dark"] { color-scheme: dark; }
html:not([data-skin="vintage"]) [data-theme="light"] { color-scheme: light; }
html:not([data-skin="vintage"]) .developer-page .station-copy .button { min-height: var(--space-touch-target); padding-inline: var(--space-3xl); font-size: 16px; }