/* One continuous product story. Existing simulations keep their own light surfaces. */
.product-story {
  --story-bg: #081228;
  --story-text: #f5f7ff;
  --story-secondary: #b5c4df;
  --story-accent: #9bbcff;
  background: var(--story-bg);
  color: var(--story-text);
  padding: 96px var(--site-gutter) 80px;
}
.product-story__intro, .product-story__layout { width: min(1320px, 100%); margin-inline: auto; }
.product-story__intro { padding-left: 152px; margin-bottom: 32px; }
.product-story__intro h2 { margin: 0; max-width: 22ch; font-size: clamp(36px, 4vw, 56px); line-height: 1.1; letter-spacing: -.03em; }
.product-story__layout { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 32px; align-items: start; }
.product-story__rail { position: sticky; top: calc(50svh - 36px); display: grid; gap: 16px; padding-left: 20px; z-index: 5; }
@media (min-width: 701px) {
  .has-fixed-rail .product-story__chapters { grid-column: 2; }
  .product-story__rail.is-viewport-rail {
    --story-secondary: #b5c4df;
    --story-accent: #9bbcff;
    position: fixed;
    top: 50%;
    left: max(var(--site-gutter), calc((100% - 1320px) / 2));
    width: 120px;
    box-sizing: border-box;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition: opacity 180ms ease, visibility 180ms;
  }
  .product-story__rail.is-viewport-rail.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
}
.product-story__rail a { display: flex; min-height: 44px; align-items: center; color: var(--story-secondary); font-family: var(--font-display); font-size: 14px; transition: color 240ms ease; }
.product-story__rail a[aria-current] { color: #fff; font-weight: 600; }
.product-story__rail a:focus-visible { outline: 2px solid var(--story-accent); outline-offset: 4px; border-radius: 4px; }
.product-story__track { position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: #2b3854; }
.product-story__track span { display: block; width: 100%; height: 100%; background: var(--story-accent); transform: scaleY(var(--story-progress, .08)); transform-origin: top; }
.product-story .product-showcase {
  min-height: max(780px, calc(100svh - 80px));
  padding: 64px 0 96px;
  overflow: visible;
  background: transparent;
  border-bottom: 1px solid #24314b;
  scroll-margin-top: 112px;
}
.product-story .product-showcase:last-child { border-bottom: 0; }
.product-story [class*="section__glow"] { display: none; }
.product-story .product-showcase__row {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 40px;
  width: 100%;
  min-height: 600px;
  margin: 0;
  align-items: center;
  perspective: 1600px;
}
.product-story .product-showcase__copy { width: 100%; min-width: 0; gap: 24px; }
.product-story .product-showcase__heading { gap: 12px; }
.product-story .product-showcase__label { color: var(--story-accent); font-size: 20px; line-height: 1.4; }
.product-story .product-showcase__title { color: var(--story-text); font-size: clamp(32px, 2.9vw, 44px); line-height: 1.12; width: 100%; }
.product-story .product-showcase__title span { display: inline; }
.product-story .product-showcase__title span + span::before { content: ' '; }
.product-story .product-showcase__subtitle { color: #d3dff4; font-size: 19px; line-height: 1.45; }
.product-story .product-showcase__body { width: 100%; color: var(--story-secondary); font-size: 16px; line-height: 1.7; }
.product-story .product-showcase__cta { background: #2f6ee9; color: #fff; min-height: 48px; font-size: 16px; box-shadow: none; }
.product-story .product-showcase__cta:hover { background: #407cf0; }
.product-story .product-showcase__visual { width: 100%; min-width: 0; justify-self: stretch; }
.product-story :is(.sms-demo__demo,.sms-demo__note,.sms-demo__preview-label,.wa-stage__tools,.wa-stage__note,.voice-demo__toolbar,.voice-demo__note) { color: var(--story-secondary); }
.product-story .sms-demo__controls button { width: 44px; height: 44px; }
.product-story :is(.voice-demo__toolbar button,.wa-stage__controls button) { width: 44px; height: 44px; }
@media (max-width: 1100px) {
  .product-story__layout { grid-template-columns: 96px minmax(0,1fr); gap: 24px; }
  .product-story__intro { padding-left: 120px; }
  .product-story .product-showcase__row { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .product-story .product-showcase__copy { max-width: 620px; }
  .product-story .product-showcase__visual { max-width: 640px; justify-self: center; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .product-story__rail.is-viewport-rail { width: 96px; }
}
@media (max-width: 700px) {
  .product-story { padding: 64px 24px 56px; }
  .product-story__intro { padding-left: 0; margin-bottom: 32px; }
  .product-story__layout { display: block; }
  .product-story__rail { top: 72px; display: flex; gap: 24px; padding: 8px 0 12px; background: var(--story-bg); border-bottom: 1px solid #2b3854; }
  .product-story__rail a { font-size: 14px; }
  .product-story__track { top: auto; bottom: 0; width: 100%; height: 2px; }
  .product-story__track span { transform: scaleX(var(--story-progress, .08)); transform-origin: left; }
  .product-story .product-showcase { min-height: 0; padding: 56px 0 64px; scroll-margin-top: 152px; }
  .product-story .product-showcase__row { min-height: 0; gap: 32px; }
  .product-story .product-showcase__title { font-size: clamp(30px, 8vw, 40px); }
  .product-story .product-showcase__body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .product-story__rail a { transition: none; } }

/* Both sections share one solid surface, recolored by page scroll. */
#global-network { background: var(--network-scroll-bg, #fafbf9); }
.product-story[data-surface-theme="light"],
.product-story__rail[data-surface-theme="light"] {
  --story-text: #081228;
  --story-secondary: #263953;
  --story-accent: #174da3;
}
.product-story[data-surface-theme="light"] .product-showcase__subtitle { color: #263953; }
.product-story__rail[data-surface-theme="light"] a[aria-current] { color: #081228; }
.product-story[data-surface-changing="true"],
.product-story__rail[data-surface-changing="true"] {
  --story-text: #fff;
  --story-secondary: var(--story-text);
  --story-accent: var(--story-text);
}
.product-story[data-surface-changing="true"][data-surface-theme="light"],
.product-story__rail[data-surface-changing="true"][data-surface-theme="light"] { --story-text: #000; }
.product-story[data-surface-changing="true"] .product-showcase__subtitle,
.product-story__rail[data-surface-changing="true"] a[aria-current] { color: var(--story-text); }

/* Keep the final demo on the dark surface before the network transition enters. */
.product-story #voice-message-product { padding-bottom: max(320px, 60svh); }