/* Phone layouts: continuous sections and text that stays on a stable reading edge. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html[data-suite] { --mobile-gutter: clamp(20px, 6vw, 28px); }

  html[data-suite] .screen .script-section {
    border-radius: 0;
  }
  html[data-suite] .screen .script-section[data-script-beat] .script-copy {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
    transform: none;
  }
  html[data-suite] .screen :is(.section, .booking-section) {
    padding-inline: var(--mobile-gutter);
  }
  html[data-suite] .screen :is(.section, .booking-section) h2 {
    font-size: clamp(30px, 8vw, 36px);
    line-height: 1.15;
  }
  html[data-suite] .screen :is(h1, h2, h3, p, li, summary, a, button, label) {
    overflow-wrap: anywhere;
  }
  html[data-suite] .screen :is(input, textarea, select) {
    font-size: 16px;
  }
  html[data-suite] .screen :is(.cta, .booking-button, .wl-button) {
    max-width: 100%;
    min-height: 48px;
    white-space: normal;
  }
  html[data-suite] .screen summary {
    min-height: 44px;
  }
  html[data-suite] .screen summary::after {
    flex: 0 0 auto;
  }
  /* Desktop word masks must also reflow if a visitor rotates/resizes a device. */
  html[data-suite] .motion-clip, html[data-suite] .motion-word {
    display: inline;
  }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .workbench :is(button, select), .spec :is(button, select) {
    min-height: 44px;
  }
  html[data-suite] .screen :is(.nav-link, .text-link, .secondary, .booking-inline-link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html[data-suite] .screen :is(.consent, .wl-consent) {
    align-items: flex-start;
    line-height: 1.6;
  }
  html[data-suite] .screen input[type=checkbox] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 760px) {
  html:not([data-suite]) .filters button { min-height: 44px; }
  html:not([data-suite]) .actions a { display: inline-flex; align-items: center; min-height: 44px; }
  html:not([data-suite]) footer { flex-wrap: wrap; }
}