/* Marketing navigation only. The editable app opens on its own page. */
html { scroll-padding-top: 84px; }
.demo-sticky-header { position: fixed; inset: 0 0 auto; z-index: 80; background: var(--bg); border-bottom: 1px solid var(--hairline); }
.demo-sticky-header[hidden], .demo-device-note[hidden] { display: none; }
.demo-sticky-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.demo-sticky-brand { display: flex; width: 56px; flex-shrink: 0; }
.demo-sticky-brand svg { display: block; width: 100%; height: auto; }
.demo-sticky-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.demo-sticky-inner .button { min-height: 42px; padding: 0 20px; white-space: nowrap; }
.demo-sticky-links { display: flex; gap: 28px; margin-left: auto; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.demo-sticky-links a { color: var(--muted); }
.demo-sticky-links a:hover { color: var(--ink); }
.demo-phone-label { display: none; }
.hero-side .actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hero-action { min-width: 0; }
.hero-action .button { width: 100%; padding: 0 12px; text-align: center; line-height: 1.4; }
.hero-action .availability { margin-top: 12px; line-height: 1.8; letter-spacing: .015em; }
.demo-device-note { padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.demo-device-note h2 { font: 600 1.3rem var(--display); margin-bottom: 8px; }
.demo-device-note p { max-width: 55ch; font-size: .8rem; line-height: 1.8; color: var(--muted); }
@media (max-width: 1023px) {
 .demo-desktop-label { display: none; }
 .demo-phone-label { display: inline; }
 .demo-sticky-links { display: none; }
}
@media (max-width: 520px) {
 .demo-sticky-inner { min-height: 60px; gap: 12px; }
 .demo-sticky-brand { width: 42px; }
 .demo-sticky-actions { gap: 8px; }
 .demo-sticky-inner .button { width: auto; min-height: 38px; padding: 0 12px; font-size: 9px; letter-spacing: .08em; }
 .hero-side .actions { grid-template-columns: minmax(0, 1fr); gap: 20px; }
 .hero-download-action .button { min-height: 32px; border: 0; padding: 0; justify-content: flex-start; }
 .hero-download-action .availability { margin-top: 4px; }
}