/* /demo/: the booking flow (assets/shared/demo/) as a page, between the nav and the footer */
.demo-page { position: relative; padding: 56px 0 140px; }
.demo-page::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 720px; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 60% at 70% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.demo-noscript { padding: 80px 0; text-align: center; color: var(--fg-2); }
.demo-noscript a { color: var(--fg-0); text-decoration: underline; }
@media (max-width: 960px) { .demo-page { padding: 24px 0 96px; } }
@media (max-width: 560px) { .demo-page .container { padding: 0 12px; } }

/* PERF-3: reserve the flow's height so the footer does not jump when demo.js replaces the fallback.
   The fallback (h1 + one line) is ~200px; the built flow is 976px on desktop and ~1355px on phones.
   The values are the built flow's measured heights per band (the app window's framing is keyed to the
   same breakpoints demo.js uses: stacked ≤960px, beside the form ≥961px, taller frame ≥861px high). */
.demo-page { min-height: 976px; }
@media (min-width: 961px) and (max-height: 860px) { .demo-page { min-height: 924px; } }
@media (max-width: 960px) { .demo-page { min-height: 1356px; } }