/* /demo booking page. Tokens from the supplied "Book a demo" design (Soldera Design System V2).
   Everything is scoped under .demo-page so base.css (Webflow) rules cannot leak in. */

.demo-page {
  --phoenix-body-bg: #f7f7f7;
  --phoenix-emphasis-bg: #ffffff;
  --phoenix-blue-700: #0d2218;
  --phoenix-gray-100: #ededee;
  --phoenix-gray-1100: #1a2820;
  --phoenix-gray-800: #43504a;
  --phoenix-gray-700: #56615b;
  --on-dark-muted: #b8d0bf;
  --on-dark-strong: #e8efe2;
  --phoenix-blue-500: #1f4d33;
  --divider-on-dark: #1f4d33;
  --phoenix-orange-50: #f5d26e;
  --phoenix-orange-500: #c08e3a;
  --phoenix-green-700: #1f4926;
  --phoenix-green-100: #e7ede2;
  --phoenix-border-color: #e2e4e2;
  --phoenix-border-color-strong: #adb3af;
  --soft-pill-border: #b8d0bf;
  --demo-error: #b3261e;
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "Public Sans", system-ui, sans-serif;
  --fs-39: 2.4414rem;
  --fs-31: 1.9531rem;
  --fs-25: 1.5625rem;
  --fs-20: 1.25rem;
  --fs-16: 1rem;
  --fs-13: 0.8rem;
  --fs-11: 0.6875rem;
  --radius-input: 6px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-sticky: 0 4px 14px rgba(0, 0, 0, 0.04);
  --control-h: 48px;
  --cta-h: 56px;
  --touch-min: 44px;

  box-sizing: border-box;
  min-height: 100vh;
  padding: 48px 24px 64px;
  background: var(--phoenix-body-bg);
  color: var(--phoenix-gray-1100);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

body:has(.demo-page) {
  background: #f7f7f7;
}

.page-wrapper.overflow-on:has(> .demo-page) {
  display: block;
  overflow: visible;
}

.demo-page *,
.demo-page *::before,
.demo-page *::after {
  box-sizing: border-box;
}

.demo-page [hidden] {
  display: none !important;
}

.demo-page h1,
.demo-page h2,
.demo-page h3,
.demo-page p,
.demo-page ul,
.demo-page li,
.demo-page fieldset,
.demo-page legend,
.demo-page label {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  letter-spacing: normal;
}

.demo-page ul {
  list-style: none;
}

.demo-page img {
  display: block;
  max-width: none;
}

.demo-page button,
.demo-page input,
.demo-page select,
.demo-page textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

.demo-page :focus-visible {
  outline: 2px solid var(--phoenix-blue-500);
  outline-offset: 2px;
}

.demo-hero :focus-visible,
.demo-callcard :focus-visible {
  outline-color: var(--phoenix-orange-50);
}

.demo-visually-hidden,
.demo-page .demo-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.demo-only-mobile {
  display: none !important;
}

/* Exact staging demo only (class set by the early head script, removed by demo-booking.js once
   the staging wording is in place): the production Meet copy never paints. Space is kept, so
   the swap does not shift the layout. */
.demo-staging-copy-pending .demo-page [data-staging-copy] {
  visibility: hidden;
}

/* ── Preview banner ──────────────────────────────────────────────────────── */

.demo-preview-banner {
  max-width: 1200px;
  margin: 0 auto 24px !important;
  padding: 8px 16px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  border: 1px solid var(--phoenix-orange-500) !important;
  border-radius: var(--radius-input);
  background: var(--phoenix-orange-50);
  color: var(--phoenix-gray-1100);
  font-size: var(--fs-13);
}

.demo-preview-banner strong {
  font-weight: 600;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.demo-shell {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.demo-hero {
  flex: 1 1 400px;
  min-width: 0;
  padding: 48px 40px;
  border-radius: var(--radius-card);
  background: var(--phoenix-blue-700);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.demo-card {
  flex: 999 1 560px;
  min-width: 0;
  padding: 40px;
  border: 1px solid var(--phoenix-border-color);
  border-radius: var(--radius-card);
  background: var(--phoenix-emphasis-bg);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.demo-logo {
  width: 160px;
  height: auto;
}

.demo-hero-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-page .demo-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-39);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.demo-hosts {
  display: flex;
  align-items: center;
  gap: 16px;
}

.demo-avatars {
  display: flex;
  flex-shrink: 0;
}

.demo-avatars img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--phoenix-blue-700);
  object-fit: cover;
  background: var(--divider-on-dark);
}

.demo-avatars img + img {
  margin-left: -16px;
}

.demo-avatars--small img {
  width: 24px;
  height: 24px;
}

.demo-avatars--small img + img {
  margin-left: -8px;
}

.demo-hosts-text {
  display: flex;
  flex-direction: column;
}

.demo-strong {
  font-weight: 600;
}

.demo-small {
  font-size: var(--fs-13);
}

.demo-on-dark-muted {
  color: var(--on-dark-muted);
}

.demo-page .demo-micro {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.demo-agenda {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-checklist li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.demo-checklist svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.demo-proof {
  display: contents;
}

.demo-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--divider-on-dark);
}

.demo-stat {
  display: flex;
  flex-direction: column;
}

.demo-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-31);
  font-weight: 600;
  line-height: 1.2;
}

.demo-usedby {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-customers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-weight: 600;
  color: var(--on-dark-strong);
}

/* ── Card typography ─────────────────────────────────────────────────────── */

.demo-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-form {
  gap: 40px;
}

.demo-step-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-page .demo-form-title {
  font-family: var(--font-display);
  font-size: var(--fs-25);
  font-weight: 600;
  line-height: 1.2;
  color: var(--phoenix-gray-1100);
}

.demo-page .demo-step-title {
  font-family: var(--font-display);
  font-size: var(--fs-31);
  font-weight: 600;
  line-height: 1.2;
  color: var(--phoenix-gray-1100);
}

.demo-page .demo-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.2;
}

.demo-muted {
  color: var(--phoenix-gray-700);
}

.demo-hint {
  font-size: var(--fs-13);
  color: var(--phoenix-gray-700);
}

.demo-link,
.demo-page a.demo-link {
  color: var(--phoenix-blue-500);
  font-weight: 600;
  text-decoration: underline;
}

.demo-step-title:focus,
.demo-form-title:focus {
  outline: none;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.demo-fieldset {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-legend {
  display: block;
  width: 100%;
  margin-bottom: 16px !important;
}

.demo-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-page .demo-label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--phoenix-gray-1100);
}

.demo-optional {
  font-weight: 400;
  color: var(--phoenix-gray-700);
}

.demo-input,
.demo-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--phoenix-border-color-strong);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--phoenix-gray-1100);
  font-size: var(--fs-16);
}

.demo-input {
  height: var(--control-h);
  padding: 0 16px;
}

.demo-textarea {
  min-height: 112px;
  padding: 8px 16px;
  resize: vertical;
}

.demo-input::placeholder,
.demo-textarea::placeholder {
  color: var(--phoenix-gray-700);
  opacity: 1;
}

.demo-input[aria-invalid="true"],
.demo-textarea[aria-invalid="true"] {
  border-color: var(--demo-error);
  box-shadow: inset 0 0 0 1px var(--demo-error);
}

.demo-field-error {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--demo-error);
}

.demo-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-alert {
  padding: 16px;
  border: 1px solid var(--demo-error);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--phoenix-gray-1100);
  font-weight: 600;
}

.demo-alert:focus {
  outline: 2px solid var(--demo-error);
  outline-offset: 2px;
}

/* ── Chips: organisation, dates, slots ───────────────────────────────────── */

.demo-chip {
  height: var(--control-h);
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--phoenix-border-color);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--phoenix-gray-1100);
  font-size: var(--fs-16);
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
}

.demo-chip[aria-checked="true"],
.demo-chip[aria-pressed="true"] {
  border-color: var(--phoenix-blue-500);
  box-shadow: inset 0 0 0 1px var(--phoenix-blue-500);
  font-weight: 600;
}

.demo-org-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 8px;
}

.demo-org-grid[aria-invalid="true"] .demo-chip {
  border-color: var(--demo-error);
}

.demo-time-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.demo-page .demo-tz {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--phoenix-gray-700);
}

.demo-select {
  height: 32px;
  max-width: 100%;
  padding: 0 8px;
  border: 1px solid var(--phoenix-border-color);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--phoenix-gray-1100);
  font-size: var(--fs-13);
}

.demo-soonest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.demo-soonest-label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--phoenix-gray-700);
}

.demo-soonest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-pill {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--soft-pill-border);
  border-radius: var(--radius-pill);
  background: var(--on-dark-strong);
  color: var(--phoenix-blue-500);
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
}

.demo-pill[aria-pressed="true"] {
  border-color: var(--phoenix-blue-500);
  background: var(--phoenix-blue-500);
  color: #ffffff;
  font-weight: 600;
}

.demo-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.demo-range-label {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.demo-range-buttons {
  display: flex;
  gap: 8px;
}

.demo-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--phoenix-border-color);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--phoenix-gray-1100);
  cursor: pointer;
}

.demo-arrow:disabled {
  color: var(--phoenix-border-color-strong);
  cursor: default;
}

.demo-dates {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.demo-date {
  height: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.demo-date-dow,
.demo-date-month {
  font-size: var(--fs-11);
}

.demo-date-dow {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-date-day {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.2;
}

.demo-date:disabled {
  color: var(--phoenix-border-color-strong);
  cursor: default;
  background: #ffffff;
}

.demo-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.demo-slot {
  font-variant-numeric: tabular-nums;
}

/* ── Picker loading placeholder ──────────────────────────────────────────── */
/* Blank blocks in the final picker's shape while live times load. Decorative only: aria-hidden,
   no text, nothing focusable. A slow, low-contrast opacity pulse, off for reduced motion. */

.demo-picker,
.demo-skeleton,
.demo-picker-unavailable {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-skel {
  display: block;
  min-width: 0;
  border-radius: var(--radius-input);
  background: var(--phoenix-gray-100);
  animation: demo-skel-pulse 1.6s ease-in-out infinite alternate;
}

/* The visible "Loading available times…" line stands in for the Soonest row at the same height
   (pill height), so the placeholder is no taller than the picker that replaces it. */
#demo-picker-loading {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.demo-skel-soonest {
  display: none;
}

.demo-skel-pill {
  flex: 0 1 120px;
  height: 32px;
  border-radius: var(--radius-pill);
}

.demo-skel-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.demo-skel-label {
  width: 96px;
  height: 20px;
}

.demo-skel-arrows {
  display: flex;
  gap: 8px;
}

.demo-skel-arrow {
  width: 40px;
  height: 40px;
}

.demo-skel-dates {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.demo-skel-date {
  height: 75px;
}

.demo-skel-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.demo-skel-slot {
  height: var(--control-h);
}

@keyframes demo-skel-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.55;
  }
}

/* ── Call card (mobile) ──────────────────────────────────────────────────── */

.demo-callcard {
  padding: 24px 16px;
  border-radius: var(--radius-card);
  background: var(--phoenix-blue-700);
  color: #ffffff;
  flex-direction: column;
  gap: 16px;
}

.demo-callcard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.demo-checklist--compact {
  gap: 8px;
}

.demo-checklist--compact li {
  gap: 8px;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.demo-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-cta {
  width: 100%;
  height: var(--cta-h);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-input);
  background: var(--phoenix-orange-500);
  color: var(--phoenix-gray-1100);
  font-size: var(--fs-16);
  font-weight: 600;
  cursor: pointer;
}

.demo-cta:disabled {
  background: var(--phoenix-gray-100);
  color: var(--phoenix-gray-700);
  cursor: default;
}

.demo-cta[aria-busy="true"] {
  cursor: progress;
}

.demo-link-button {
  align-self: flex-start;
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--phoenix-blue-500);
  font-size: var(--fs-16);
  text-decoration: underline;
  cursor: pointer;
}

.demo-button,
.demo-page a.demo-button {
  height: var(--control-h);
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border: 1px solid var(--phoenix-border-color-strong);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--phoenix-gray-1100);
  font-weight: 600;
  text-decoration: none;
}

/* Turnstile's own widget at its normal 300 px size, never cropped, scaled or transformed: the
   container spans the bar and centres it above Confirm. On a 320 px phone the mobile bar's content
   box is 288 px, so the centred widget runs 6 px into each side of the bar's 16 px padding and
   stays inside the viewport. It needs a viewport of at least 300 px. */
.demo-turnstile {
  width: 100%;
  min-height: 65px;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

/* After the widget's own success callback the container is only taken out of the layout: the
   widget stays mounted with its token (no reset, no re-render). Expiry, error or a reset puts
   it back. This is a visual client status only, never server proof. demo-booking.js also sets
   an important inline display:none on the container while collapsed, so an inline display on
   the container cannot keep the widget visible. */
.demo-turnstile[data-collapsed="true"] {
  display: none;
}

/* While the collapse animation runs (about 0.5 s, see demo-booking.js) the container stays laid
   out so its height can ease to zero; the important inline display:none follows at the end. */
.demo-turnstile[data-collapsed="true"][data-collapse-anim="true"] {
  display: flex;
}

.demo-verified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--touch-min);
  font-size: var(--fs-13);
  color: var(--phoenix-gray-700);
}

.demo-verified[hidden] {
  display: none;
}

.demo-verified-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1f4926;
}

.demo-verified .demo-verified-toggle {
  align-self: center;
}

/* ── Booking card, results ───────────────────────────────────────────────── */

.demo-booking-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border: 1px solid var(--phoenix-border-color);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.demo-date-tile {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-input);
  background: var(--phoenix-blue-700);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.demo-date-tile-month {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--phoenix-orange-50);
}

.demo-date-tile-day {
  font-family: var(--font-display);
  font-size: var(--fs-25);
  font-weight: 600;
}

.demo-booking-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.demo-prep-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-check {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--phoenix-green-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-preview-note {
  padding: 8px 16px !important;
  border: 1px solid var(--phoenix-orange-500) !important;
  border-radius: var(--radius-input);
  background: var(--phoenix-orange-50);
  font-size: var(--fs-13);
  font-weight: 600;
}

/* ── Mobile (390 px reference) ───────────────────────────────────────────── */

@media screen and (max-width: 640px) {
  .demo-only-mobile {
    display: flex !important;
  }

  span.demo-only-mobile,
  .demo-step-title .demo-only-mobile {
    display: inline !important;
  }

  .demo-hosts-text.demo-only-mobile,
  .demo-callcard.demo-only-mobile {
    display: flex !important;
  }

  .demo-only-desktop {
    display: none !important;
  }

  .demo-page {
    padding: 0;
  }

  .demo-preview-banner {
    margin: 0 !important;
    border-width: 0 0 1px !important;
    border-radius: 0;
  }

  .demo-shell {
    display: block;
  }

  .demo-hero {
    padding: 24px 16px 48px;
    border-radius: 0;
    gap: 40px;
  }

  .demo-page[data-step="prep"] .demo-hero,
  .demo-page[data-step="prep_sending"] .demo-hero,
  .demo-page[data-step="booked"] .demo-hero,
  .demo-page[data-step="offline"] .demo-hero,
  .demo-page[data-step="unknown"] .demo-hero {
    padding-bottom: 24px;
  }

  .demo-page[data-step="prep"] .demo-hero > :not(.demo-logo),
  .demo-page[data-step="prep_sending"] .demo-hero > :not(.demo-logo),
  .demo-page[data-step="booked"] .demo-hero > :not(.demo-logo),
  .demo-page[data-step="offline"] .demo-hero > :not(.demo-logo),
  .demo-page[data-step="unknown"] .demo-hero > :not(.demo-logo) {
    display: none !important;
  }

  .demo-logo {
    width: 120px;
  }

  .demo-page .demo-h1 {
    line-height: 1.1;
  }

  .demo-avatars img {
    width: 40px;
    height: 40px;
  }

  .demo-avatars img + img {
    margin-left: -12px;
  }

  .demo-avatars--small img {
    width: 24px;
    height: 24px;
  }

  .demo-avatars--small img + img {
    margin-left: -8px;
  }

  .demo-hosts-text {
    line-height: 1.35;
  }

  .demo-proof {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--divider-on-dark);
  }

  .demo-stats {
    gap: 16px;
    padding-top: 0;
    border-top: 0;
  }

  .demo-usedby {
    margin-top: 0;
  }

  .demo-customers {
    gap: 4px 16px;
    font-size: var(--fs-13);
  }

  .demo-card {
    position: relative;
    padding: 24px 16px 0;
    border: 0;
    border-radius: 0;
    background: var(--phoenix-body-bg);
    gap: 40px;
  }

  .demo-page[data-step="pick"] .demo-card,
  .demo-page[data-step="submitting"] .demo-card,
  .demo-page[data-step="loading"] .demo-card,
  .demo-page[data-step="unavailable"] .demo-card {
    margin-top: -24px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .demo-page .demo-form-title {
    font-size: var(--fs-20);
  }

  .demo-page .demo-step-title {
    font-size: var(--fs-25);
  }

  .demo-page[data-step="booked"] .demo-step-title {
    font-size: var(--fs-31);
  }

  .demo-name-grid {
    gap: 8px;
  }

  .demo-org-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .demo-org-corporate,
  .demo-org-producer {
    grid-column: span 3;
  }

  .demo-org-trader,
  .demo-org-utility,
  .demo-org-other {
    grid-column: span 2;
  }

  .demo-time-head {
    flex-wrap: nowrap;
    align-items: center;
  }

  .demo-tz {
    min-width: 0;
  }

  .demo-tz-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .demo-select {
    height: var(--touch-min);
    max-width: 210px;
  }

  .demo-soonest-label {
    display: none;
  }

  .demo-soonest-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
  }

  .demo-pill {
    flex-shrink: 0;
    height: var(--touch-min);
  }

  .demo-arrow {
    width: var(--touch-min);
    height: var(--touch-min);
  }

  .demo-dates {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .demo-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #demo-picker-loading {
    min-height: var(--touch-min);
  }

  .demo-skel-arrow {
    width: var(--touch-min);
    height: var(--touch-min);
  }

  .demo-skel-dates {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .demo-skel-date:nth-child(n + 6) {
    display: none;
  }

  .demo-skel-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-skel-slot:nth-child(n + 7) {
    display: none;
  }

  .demo-confirm {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px;
    padding: 16px;
    /* Clears the home indicator on notched phones; 16px where there is no inset. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--phoenix-border-color);
    background: #ffffff;
    box-shadow: var(--shadow-sticky);
  }

  .demo-center-mobile {
    text-align: center;
  }

  .demo-confirm--prep .demo-link-button {
    align-self: stretch;
    width: 100%;
  }

  .demo-step[data-step-panel="booked"],
  .demo-step[data-step-panel="offline"],
  .demo-step[data-step-panel="unknown"],
  .demo-step[data-step-panel="unavailable"] {
    padding: 16px 0 40px;
  }

  .demo-booking-card {
    padding: 16px;
  }

  .demo-step .demo-button {
    align-self: stretch;
    width: 100%;
  }

  /* Cookiebot's settings button is fixed bottom-left outside .demo-page. Lift the closed
     button above the sticky .demo-confirm bar by the height demo-booking.js measures onto
     <body>. With no visible bar the variable is absent and the lift is zero. The lift is the
     full measured height, so the button clears the bar whatever its size. Only the closed
     widget moves: when expanded, Cookiebot puts .CookiebotWidget-open on the same root and
     the panel keeps its vendor position, so a tall panel is not pushed off short screens.
     Position only: visibility, focus and pointer handling stay with the vendor. */
  body:has(#demo-booking-root) #CookiebotWidget:not(.CookiebotWidget-open) {
    translate: 0 calc(-1 * var(--demo-sticky-offset, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-page * {
    scroll-behavior: auto !important;
  }

  .demo-skel {
    animation: none;
  }
}