.demo-page { background: #f6f9fc; }
.demo-page .marketing-header { position: relative; inset: auto; margin: 0 auto; padding: 24px 0; gap: 24px; }
.demo-page .marketing-logo img { width: 180px; }
.demo-page .marketing-nav { color: var(--deep-blue); }
.demo-page .marketing-nav a { background: transparent; }
.demo-page .marketing-nav a:hover, .demo-page .marketing-nav a:focus-visible { background: var(--soft-blue); color: var(--deep-blue); }
.demo-page .marketing-nav .nav-cta { background: var(--brand-blue); color: #fff; }
.demo-page .marketing-nav .login-link { border-color: var(--line); }
.demo-main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 64px; }
.demo-intro { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.demo-eyebrow { color: var(--brand-blue-strong); font-size: .8rem; font-weight: 800; letter-spacing: .14em; }
.demo-intro h1 { margin: 18px 0; color: var(--deep-blue); font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.06; letter-spacing: -.035em; }
.demo-intro > p:last-child { max-width: 640px; margin: 0 auto; font-size: 1.1rem; color: var(--muted); line-height: 1.65; }
.demo-player { margin: 0; }
.demo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #081d49; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.demo-player figcaption { margin: 20px 0 28px; color: var(--muted); font-size: .9rem; text-align: center; line-height: 1.7; }
.demo-transcript { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.demo-transcript summary { padding: 20px 0; cursor: pointer; font-weight: 700; }
.demo-transcript h3 { margin: 24px 0 8px; }
.demo-transcript p { color: var(--muted); line-height: 1.7; }
.demo-transcript > div { padding-bottom: 16px; }
.demo-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; }
.demo-page a:focus-visible, .demo-page summary:focus-visible, .demo-page video:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 4px; }
@media (max-width: 720px) {
  .demo-page .marketing-header { align-items: center; gap: 20px; width: calc(100% - 32px); }
  .demo-page .marketing-nav { justify-content: center; flex-wrap: wrap; overflow: visible; }
  .demo-page .marketing-nav a { padding: 0 10px; font-size: .85rem; }
  .demo-main { padding-top: 16px; }
  .demo-intro { margin-bottom: 28px; }
  .demo-intro > p:last-child { font-size: 1rem; }
  .demo-actions { flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }