/* /demo page: shares landing.css (header, hero, buttons, footer); only page specifics here. */
.demo-hero { padding: 56px 0 64px; }
.demo-hero h1 { max-width: 14em; }
.demo-kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8fb6ff; }
.demo-body { max-width: 1120px; }
.demo-body > * { max-width: 640px; }
.demo-note { margin: 24px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-alt); font-size: 15px; color: var(--ink-soft); }
.demo-page .header-cta { display: inline-flex; }
@media (max-width: 640px) {
  .demo-hero { padding: 36px 0 44px; }
  .demo-body .btn { width: 100%; }
  /* Small screens: the header keeps only the logo and languages. */
  .demo-page .header-cta { display: none; }
}