#demo { scroll-margin-top: 84px; }
    .hero-visual { overflow:clip; }
    .cta-panel .button { max-width:100%; white-space:normal; text-align:center; }
    .demo-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.75fr); gap:48px; align-items:center; padding:32px; border:1px solid var(--line); border-radius:var(--radius,18px); background:#fff; }
    .demo-copy, .demo-player { min-width:0; }
    .demo-copy .section-copy { margin:20px 0 24px; }
    .demo-player { margin:0; justify-self:center; width:min(100%,324px); }
    .demo-player video { display:block; width:100%; height:auto; aspect-ratio:9/16; border-radius:12px; background:var(--cream-alt); }
    .demo-player figcaption, .demo-note { color:var(--muted); font-size:13px; line-height:1.5; margin:12px 0 0; }
    .demo-transcript { margin-top:22px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
    .demo-transcript summary { cursor:pointer; color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
    @media (max-width:640px) {
      .demo-layout { grid-template-columns:minmax(0,1fr); gap:28px; padding:22px; }
      .nav-inner { gap:8px; }
      .nav-links .button-small { display:inline-flex; min-height:40px; padding:0 12px; font-size:13px; }
    }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
    .app-demo h2 { font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.03em; }
    .demo-copy .section-copy { font-size:18px; }
    .demo-copy .hero-note { line-height:1.5; }
    .demo-copy .button { max-width:100%; white-space:normal; text-align:center; }