@media (max-width: 900px) {
  html { scroll-padding-top: 0; }

  .cn--interactive :where(section[id], header[id], .cn-field, .cn-confirm, .cn-form) {
    scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px));
    scroll-margin-bottom: 24px;
  }

  .cn--interactive :where(.cn-nav-link, .cn-nav-btn, .cn-again) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  .cn--interactive :where(.cn-input, .cn-select, .cn-reserve-panel) {
    min-width: 0;
    max-width: 100%;
  }

  .cn--interactive .cn-input { min-height: 60px; font-size: 18px; }
  .cn--interactive input[type="date"] { min-inline-size: 0; }
  .cn--interactive input[type="date"]::-webkit-date-and-time-value { text-align: left; }

  .cn--interactive :where(.cn-hero-caption, .cn-room-caption, .cn-pill-caption) {
    max-width: calc(100% - 32px);
    line-height: 1.45;
    border-radius: 14px;
  }

  .cn--interactive :where(.cn-confirm-title, .cn-confirm-rows dd) {
    overflow-wrap: anywhere;
  }

  .cn--interactive .cn-confirm .cn-eyebrow { color: var(--cn-accent); opacity: 1; }
  .cn--interactive .cn-confirm :focus-visible { outline-color: var(--cn-accent); }

  .cn--interactive .cn-float {
    top: calc(10px + env(safe-area-inset-top, 0px));
    max-width: calc(100% - 32px);
  }

  .cn--interactive .cn-float .cn-nav-btn { height: 44px; }
  .cn--interactive .cn-footer-bar { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
  .demo-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 20px 12px;
    font-size: 12px;
    line-height: 1.5;
  }

  .demo-bar > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
  .demo-bar span { max-width: none; }
  .demo-bar span a { display: inline-block; padding-block: 8px; }

  .cn--interactive .cn-nav-links { gap: 8px; }
  .cn--interactive .cn-nav-link { padding-inline: 4px; }
  .cn--interactive .cn-nav-btn { padding-inline: 18px; }
  .cn--interactive .cn-h1 { font-size: clamp(44px, 12vw, 60px); }
  .cn--interactive .cn-h2 { font-size: clamp(32px, 9.2vw, 40px); }
  .cn--interactive .cn-hero-facts { gap: 10px 16px; font-size: 11px; line-height: 1.5; letter-spacing: .07em; }
  .cn--interactive .cn-hero-facts li + li::before { content: none; }
  .cn--interactive .cn-help,
  .cn--interactive .cn-demo,
  .cn--interactive .cn-confirm-demo { font-size: 14px; line-height: 1.5; }
  .cn--interactive .cn-footer-stage { height: 78svh; }
}


@media (hover: none) and (pointer: coarse) {
  .cn--interactive .cn-hover-img { display: none; }
  .cn--interactive .cn-cta:hover,
  .cn--interactive .cn-plate:hover .cn-plate-media img,
  .cn--interactive .cn-room-gallery figure:hover img,
  .cn--interactive .cn-step:hover img,
  .cn--interactive .cn-menu-figure:hover img { transform: none; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .cn--interactive .cn-hero-figure { max-height: 380px; }
  .cn--interactive .cn-footer-stage { height: auto; min-height: 460px; }
}