/* Preserve the approved phone/desktop compositions at intermediate sizes.
   Clip only horizontal animation overshoot; vertical sticky scenes stay intact. */
.pricing-section { overflow-x: clip; }

@media (min-width: 701px) and (max-width: 1100px) {
  .events-rail { padding-left: 76px; padding-right: 20px; }
  .events-category { font-size: 19px; }
  .events-details p { font-size: 17px; }
  .events-display { padding-right: 24px; }
  .customize-slide {
    min-height: 680px;
    padding: 36px 32px 24px;
    column-gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
  }
  .customize-copy h3 { font-size: 36px; line-height: 1.15; }
  .customize-copy > p:not(.customize-feedback) { font-size: 16px; }
  .customize-track-choice { min-height: 96px; }
}

/* Do not shrink the landscape video to the few pixels left after the heading.
   Short laptops and landscape phones can scroll through a full-size hero. */
@media (min-width: 701px) and (max-height: 640px) {
  .hero-media { width: min(1000px, calc(100% - 48px)); margin-top: 30px; }
  .hero-header { padding-top: 32px; }
}

@media (max-width: 700px) {
  /* Keep the launcher visible (unless the reservation CTA is active), but lift
     it above the first video's budget button instead of covering that button. */
  .mobile-hero-visible .atlas-widget:not(.atlas-widget--open) {
    bottom: max(116px, calc(100px + env(safe-area-inset-bottom))) !important;
  }
  .hero-platter { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .section-nav-inner { padding-inline: 12px; gap: 2px; }
  .section-nav-brand { font-size: 16px; }
  .section-nav-reserve { padding-inline: 11px; }
  .customize-copy label { flex-wrap: wrap; gap: 4px 8px; }
}