/* Latest APP surfaces stay intact; the presentation stage carries the light and motion. */
.product-demo {
  --demo-bg: #10161d;
  --demo-ink: #f5f7fb;
  --demo-muted: #a9b1bd;
  --demo-faint: #768291;
  --demo-edge: #ffffff14;
  --demo-active: #ffffff09;
  --demo-accent: #b9d7ed;
  --demo-light: #87b7d54a;
  --demo-mint: #72b9a12b;
  --demo-paper: #fff;
  --demo-chat-ink: #25272d;
  --demo-chat-muted: #999;
  --demo-phone-edge: #757779;
  --demo-phone-dark: #28292b;
  --demo-phone-highlight: #a0a1a3;
  --demo-phone-glass: #08090a;
  --demo-phone-rim: 2px;
  --demo-phone-reflection: #ffffff30;
  --demo-status-height: 52px;
  --demo-status-font: 12px;
  --demo-island-width: 88px;
  --demo-island-height: 25px;
  --demo-island-top: 10px;
  --demo-camera-size: 7px;
  --demo-camera-glass: #101721;
  --demo-stage-radius: 36px;
  --demo-device-radius: 48px;
  --demo-screen-radius: 42px;
  --demo-border: 1px;
  --demo-shell: 7px;
  --demo-key-width: 3px;
  --demo-key-short: 18px;
  --demo-key-long: 38px;
  --demo-key-action-top: 100px;
  --demo-key-up-top: 144px;
  --demo-key-down-top: 195px;
  --demo-key-power-top: 167px;
  --demo-gap-xs: 6px;
  --demo-gap-sm: 12px;
  --demo-gap: 24px;
  --demo-gap-lg: 40px;
  --demo-inset: 64px;
  --demo-mobile-inset: 24px;
  --demo-stage-gap: 80px;
  --demo-device-width: 344px;
  --demo-device-height: 746px;
  --demo-chat-font: 13px;
  --demo-meta-font: 10px;
  --demo-body-font: 15px;
  --demo-small-font: 12px;
  --demo-title-font: 48px;
  --demo-pill-radius: 999px;
  --demo-shadow: 0 36px 80px #0007, 0 8px 22px #0004;
  --demo-glow-blur: 55px;
  --demo-stage-height: 820px;
  --demo-slow: 9s;
  --demo-fast: 260ms;
  --demo-stage-texture: radial-gradient(#ffffff09 1px, transparent 1px);
  padding: var(--demo-gap-sm) var(--demo-gap) var(--demo-gap-lg);
  scroll-margin-top: 0;
}
.product-demo [hidden] { display: none !important; }
.demo-stage { max-width: var(--maxw); min-height: var(--demo-stage-height); margin: auto; position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--demo-stage-gap); padding: var(--demo-inset); border-radius: var(--demo-stage-radius); background: var(--demo-bg); color: var(--demo-ink); }
.demo-stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: var(--demo-border) solid var(--demo-edge); pointer-events: none; }
.demo-stage-grid { position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: var(--demo-stage-texture); background-size: var(--demo-gap) var(--demo-gap); mask-image: linear-gradient(transparent, black, transparent); }
.demo-halo { position: absolute; z-index: -1; width: 60%; height: 70%; border-radius: 50%; filter: blur(var(--demo-glow-blur)); pointer-events: none; animation: demo-halo-drift var(--demo-slow) ease-in-out infinite alternate; }
.demo-halo--blue { right: -10%; top: 0; background: radial-gradient(ellipse, var(--demo-light), transparent 70%); }
.demo-halo--green { right: 5%; bottom: -15%; background: radial-gradient(ellipse, var(--demo-mint), transparent 70%); animation-delay: -4s; }
.demo-story { position: relative; z-index: 1; min-width: 0; }
.demo-eyebrow { display: flex; align-items: center; gap: var(--demo-gap-sm); font-size: var(--demo-small-font); letter-spacing: .12em; color: var(--demo-accent); margin-bottom: var(--demo-gap); }
.demo-eyebrow > span,.demo-product-caption > span { width: var(--demo-gap-xs); height: var(--demo-gap-xs); border-radius: 50%; background: var(--demo-accent); box-shadow: 0 0 var(--demo-gap-sm) var(--demo-light); flex-shrink: 0; }
.demo-story h2 { font-size: var(--demo-title-font); font-weight: 550; letter-spacing: -.04em; line-height: 1.35; }
.demo-story h2 > span { color: var(--demo-accent); }
.demo-lead { margin-top: var(--demo-gap); color: var(--demo-muted); line-height: 1.9; font-size: var(--demo-body-font); }
.demo-steps { margin-top: var(--demo-gap-lg); display: grid; gap: var(--demo-gap-xs); }
.demo-steps button { display: flex; align-items: center; gap: var(--demo-gap-sm); width: 100%; text-align: left; padding: var(--demo-gap-sm); background: transparent; border: var(--demo-border) solid transparent; border-radius: var(--radius); color: var(--demo-faint); cursor: pointer; transition: color var(--demo-fast), background var(--demo-fast), border-color var(--demo-fast); }
.demo-steps button > span:nth-child(2) { flex: 1; }
.demo-step-number { align-self: flex-start; padding-top: var(--demo-border); font-family: var(--font-mono); font-size: var(--demo-small-font); }
.demo-steps strong { display: block; font-size: var(--demo-body-font); font-weight: 500; }
.demo-steps small { display: block; font-size: var(--demo-small-font); margin-top: var(--demo-gap-xs); line-height: 1.6; }
.demo-step-arrow { opacity: 0; color: var(--demo-accent); transition: opacity var(--demo-fast); }
.demo-steps button[aria-pressed="true"] { background: var(--demo-active); border-color: var(--demo-edge); color: var(--demo-ink); }
.demo-steps button[aria-pressed="true"] small { color: var(--demo-muted); }
.demo-steps button[aria-pressed="true"] .demo-step-number,.demo-steps button.is-past .demo-step-number { color: var(--demo-accent); }
.demo-steps button[aria-pressed="true"] .demo-step-arrow { opacity: 1; }
.demo-steps button:hover { color: var(--demo-ink); background: var(--demo-active); }
.demo-playback { display: flex; gap: var(--demo-gap-sm); align-items: center; margin-top: var(--demo-gap); color: var(--demo-muted); font-size: var(--demo-small-font); }
.demo-playback button { color: inherit; padding: var(--demo-gap-xs) 0; cursor: pointer; border: 0; background: transparent; }
.demo-playback button:disabled { cursor: default; opacity: .65; }
.demo-timeline { height: calc(var(--demo-border) * 2); background: var(--demo-edge); margin-top: var(--demo-gap-sm); overflow: hidden; border-radius: var(--demo-pill-radius); }
.demo-timeline span { display: block; width: 0; height: 100%; background: var(--demo-accent); }
.demo-note { margin-top: var(--demo-gap-sm); color: var(--demo-muted); font-size: var(--demo-meta-font); }
.demo-product { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.demo-device { width: var(--demo-device-width); height: var(--demo-device-height); position: relative; isolation: isolate; padding: var(--demo-shell); border-radius: var(--demo-device-radius); background: linear-gradient(105deg, var(--demo-phone-highlight), var(--demo-phone-dark) 5%, var(--demo-phone-edge) 48%, var(--demo-phone-dark) 95%, var(--demo-phone-highlight)); box-shadow: var(--demo-shadow); }
.demo-device::before { content: ''; position: absolute; z-index: -1; inset: var(--demo-phone-rim); border-radius: calc(var(--demo-device-radius) - var(--demo-phone-rim)); background: var(--demo-phone-glass); box-shadow: inset 0 0 0 var(--demo-border) var(--demo-phone-dark); }
.demo-device::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 var(--demo-border) 0 var(--demo-phone-reflection), inset 0 calc(var(--demo-border) * -1) 0 var(--demo-phone-dark); }
.demo-antenna { position: absolute; inset-block: 0; width: var(--demo-phone-rim); pointer-events: none; background: linear-gradient(transparent 12%, var(--demo-phone-dark) 12% 13%, transparent 13% 87%, var(--demo-phone-dark) 87% 88%, transparent 88%); }
.demo-antenna--left { left: 0; }
.demo-antenna--right { right: 0; }
.demo-phone-key { position: absolute; left: calc(var(--demo-key-width) * -1); width: var(--demo-key-width); height: var(--demo-key-long); border-radius: var(--demo-pill-radius); background: linear-gradient(var(--demo-phone-edge), var(--demo-phone-dark), var(--demo-phone-edge)); }
.demo-phone-key--action { top: var(--demo-key-action-top); height: var(--demo-key-short); }
.demo-phone-key--volume-up { top: var(--demo-key-up-top); }
.demo-phone-key--volume-down { top: var(--demo-key-down-top); }
.demo-phone-key--power { left: auto; right: calc(var(--demo-key-width) * -1); top: var(--demo-key-power-top); height: calc(var(--demo-key-long) * 1.5); }
.demo-screen { position: relative; height: 100%; border-radius: var(--demo-screen-radius); overflow: hidden; display: flex; flex-direction: column; background: var(--demo-paper); color: var(--demo-chat-ink); line-height: 1.65; }
.demo-statusbar { display: flex; position: relative; align-items: center; justify-content: space-between; height: var(--demo-status-height); padding: 0 var(--demo-gap) var(--demo-gap-xs); font-size: var(--demo-status-font); font-weight: 600; flex-shrink: 0; }
.demo-island { position: absolute; top: var(--demo-island-top); left: 50%; transform: translateX(-50%); width: var(--demo-island-width); height: var(--demo-island-height); background: var(--demo-phone-glass); border-radius: var(--demo-pill-radius); }
.demo-island::after { content: ''; position: absolute; right: var(--demo-gap-xs); top: 50%; transform: translateY(-50%); width: var(--demo-camera-size); height: var(--demo-camera-size); border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--demo-camera-glass), var(--demo-phone-glass) 65%); }
.demo-status-icons { display: flex; align-items: center; gap: var(--demo-gap-xs); }
.demo-status-icons svg { width: var(--demo-key-long); height: var(--demo-gap-sm); }
.demo-battery { display: inline-block; width: calc(var(--demo-gap-sm) * 1.4); height: calc(var(--demo-gap-xs) * 1.3); background: var(--demo-chat-ink); border: var(--demo-border) solid var(--demo-chat-muted); box-shadow: inset 0 0 0 var(--demo-border) var(--demo-paper); border-radius: calc(var(--demo-border) * 2); }
.demo-battery { position: relative; }
.demo-battery::after { content: ''; position: absolute; top: 25%; right: calc(var(--demo-phone-rim) * -1); width: var(--demo-border); height: 50%; border-radius: var(--demo-pill-radius); background: var(--demo-chat-muted); }
.demo-home-indicator { width: 30%; height: calc(var(--demo-border) * 4); margin: var(--demo-gap-xs) auto var(--demo-gap-sm); border-radius: var(--demo-pill-radius); background: var(--demo-chat-ink); flex-shrink: 0; }
.demo-product-caption { display: flex; align-items: center; justify-content: center; gap: var(--demo-gap-sm); margin-top: var(--demo-gap); font-size: var(--demo-small-font); color: var(--demo-accent); }
.demo-static-note { max-width: var(--maxw); margin: var(--demo-gap) auto; }
.product-demo button:focus-visible,.demo-chat-scroll:focus-visible { outline: calc(var(--demo-border) * 2) solid var(--demo-accent); outline-offset: calc(var(--demo-border) * 4); }
.is-paused .demo-halo { animation-play-state: paused; }
@keyframes demo-halo-drift { to { transform: translate(-5%, -4%) scale(1.12); opacity: .7; } }
@media (max-width: 1000px) {
  .product-demo { --demo-inset: 40px; --demo-stage-gap: 36px; --demo-title-font: 38px; }
}
@media (max-width: 760px) {
  .product-demo { --demo-device-width: 320px; --demo-device-height: 694px; --demo-inset: 28px; --demo-title-font: 34px; --demo-stage-radius: 28px; padding-inline: var(--demo-gap-sm); }
  .demo-stage { grid-template-columns: 1fr; gap: var(--demo-gap-lg); padding: var(--demo-inset) var(--demo-mobile-inset); }
  .demo-story h2 { font-size: var(--demo-title-font); }
  .demo-lead { font-size: var(--demo-chat-font); }
  .demo-steps { grid-template-columns: 1fr 1fr; gap: var(--demo-gap-xs); margin-top: var(--demo-gap); }
  .demo-steps button { padding: var(--demo-gap-sm) var(--demo-gap-xs); gap: var(--demo-gap-xs); }
  .demo-steps strong { font-size: var(--demo-small-font); }
  .demo-steps small,.demo-step-arrow { display: none; }
  .demo-device { max-width: 100%; animation: none; }
  .demo-halo { width: 150%; height: 65%; top: 35%; }
}
@media (max-width: 380px) {
  .product-demo { --demo-device-width: 288px; --demo-device-height: 644px; --demo-chat-font: 12px; --demo-gap-lg: 32px; --demo-inset: 24px; --demo-mobile-inset: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-demo *, .product-demo *::after { animation: none !important; transition: none !important; }
}