/* Phone-first navigation and demo sizing. */
.nav-menu,.mobile-nav{display:none}
@media(max-width:980px){
    .nav-menu{position:relative;z-index:60;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-weight:800}
    .mobile-nav{position:fixed;top:74px;left:14px;right:14px;z-index:40;gap:2px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.98);box-shadow:0 18px 50px rgba(13,24,37,.18)}
  .mobile-nav:not([hidden]){display:grid}
  .mobile-nav a{padding:13px 14px;border-radius:8px;color:var(--ink);font-weight:750}
  .mobile-nav a:hover,.mobile-nav a:focus-visible{background:var(--paper)}
}
@media(max-width:720px){
  .demo-dialog{width:calc(100% - 16px)!important;max-height:calc(100dvh - 16px);padding:30px 12px 16px;overflow-y:auto}
  .demo-heading{grid-template-columns:1fr;gap:10px;padding:0 28px 0 4px}
  .demo-heading h2{font-size:25px}
  .demo-heading>p{font-size:14px;line-height:1.45}
  .demo-screen{min-height:min(560px,58dvh)}
  .demo-scene{min-height:min(560px,58dvh);padding:20px 14px;gap:16px}
  .scene-copy h3{font-size:1.65rem;line-height:1.12}
  .scene-copy p{font-size:15px;line-height:1.5}
  .demo-window-bar .demo-company,.demo-window-bar .offline-chip{display:none}
  .demo-caption{min-height:58px;padding:10px 12px;align-items:flex-start;flex-direction:column;gap:4px;font-size:13px}
  .demo-controls{flex-wrap:wrap;padding:10px}
  .demo-controls .demo-chapters{order:3;flex-basis:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap}
  .demo-chapters button{white-space:nowrap;min-height:36px}
}