/* css/guest.css — the guest-track families (design return 2026-09, RETURN
   section 3; boards S2, S4-S9). Loaded by guest pages only, after main.css
   (and after the legacy stack on the travel guides and inquiry pages, whose
   rules carry the legacy guard: see main.css section 8). Phone first;
   tokens only. Text is 12px or larger at 4.5:1 or better; inputs are 16px.
   Families:
     .search .sheet .guest-bar .open-nights .chip-bar .home-grid .rail
     .home-area .reviews-strip .review-card .plan-box
   The renderer's blocks (scripts/build-guest-homes.mjs) are on the families:
   .home-grid/.rail of .card--home, .table--facts. Page files (stay-hub,
   guest-region, guest-occasion, guest-guides, guest-pages) only place them. */

/* [hidden] beats the flex/grid display of cards and groups (guest-search.js filters). */
[data-ghomes] [hidden], [data-ghomes-group][hidden] { display: none !important; }

/* ==========================================================================
   Guest families (guest-track design return 2026-09; boards S2, S4-S9).
   Members of the one grammar in css/main.css (tokens, .btn, .chip, .card,
   .kicker, .section). Tokens only. The page gutter these bleed against is
   the .container gutter: 20px, 12px under 360px, 24px from 768px.
   ========================================================================== */

/* ── .search — the date search card (in-page #search and in the sheet) ─────
   Field 56px, 1.5px --color-text-light border, 16px value (no iOS zoom).
   The go button is .btn.btn--gold.btn--lg.btn--full; Clear is .btn--quiet.
   Dates and guests share one row from 768px (S11 at 834; the go and the
   lines under them span the card), all three in one row from 900px.
   --secondary: the go steps back to outline (monthly,
   where the person path is the page's gold). */
.search {
  display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-3);
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  font-family: inherit; color: var(--color-text);
}
.search__dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.search__field {
  position: relative; display: block; min-width: 0; min-height: calc(var(--touch-target-comfortable) + var(--space-2)); margin: 0;
  background: var(--color-white); border: var(--border-control) solid var(--color-text-light);
  border-radius: var(--radius-md); cursor: pointer;
}
.search__field:focus-within { border-color: var(--color-focus); outline: var(--focus-ring); outline-offset: 2px; }
.search__field:has([aria-invalid="true"]) { border-color: var(--color-error); box-shadow: inset 0 0 0 0.5px var(--color-error); }
.search__label {
  position: absolute; left: var(--space-3); top: var(--space-1-5); z-index: 1; pointer-events: none;
  font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-gray-600);
}
.search__field input,
.search__field select {
  position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0;
  padding: var(--space-6) var(--space-3) var(--space-1-5); border: 0; border-radius: inherit; background: transparent;
  font-family: inherit; font-size: var(--text-base); line-height: var(--leading-snug); color: var(--color-text); text-align: left;
  -webkit-appearance: none; appearance: none; outline: none; cursor: pointer;
}
.search__field select { padding-right: var(--space-10); text-overflow: ellipsis; }
.search__field input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.search__field input::-webkit-datetime-edit { padding: 0; }
.search__field input::-webkit-calendar-picker-indicator { margin: 0; padding: 0; cursor: pointer; }
.search__field--select::after {
  content: ""; position: absolute; right: var(--space-4); top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--color-gray-600); border-bottom: 2px solid var(--color-gray-600);
  transform: translateY(-50%) rotate(45deg);
}
/* iOS shows an empty date field as blank: say what to do instead (JS marks empty fields). */
.search__hint {
  display: none; position: absolute; left: var(--space-3); top: var(--space-6); pointer-events: none;
  font-size: var(--text-base); line-height: var(--leading-snug); color: var(--color-text-light);
}
.search.is-enhanced .search__field[data-empty] .search__hint { display: block; }
.search.is-enhanced .search__field[data-empty] input:not(:focus) { color: transparent; }
.search.is-enhanced .search__field[data-empty]:focus-within .search__hint { display: none; }
.search__clear { justify-self: center; }
.search__msg { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text); }
.search__msg:empty { display: none; }
.search__msg.is-error { color: var(--color-error); font-weight: 600; }
.search__msg a { color: var(--color-primary-dark); font-weight: 700; text-decoration: underline; }
.search__long { display: block; margin-top: var(--space-xs); color: var(--color-gray-600); }
.search__note { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-light); }
.search--sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.search--secondary .search__go { background: var(--color-white); border-color: var(--color-border-strong); box-shadow: none; font-weight: 600; }
@media (max-width: 359px) {
  .search { padding: var(--space-2-5); }
  .search__dates { gap: var(--space-1-5); }
  .search__field input { padding-left: var(--space-2-5); padding-right: var(--space-1-5); }
  .search__label,
  .search__hint { left: var(--space-2-5); }
}
@media (min-width: 768px) {
  /* over the hero band's lower edge, in a solid panel: never text on a photo */
  .search--lift { position: relative; z-index: 2; margin-top: calc(var(--space-18) * -1); box-shadow: var(--shadow-lg); }
  .search:not(.search--sheet) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .search:not(.search--sheet) > * { grid-column: 1 / -1; }
  .search:not(.search--sheet) > .search__dates { grid-column: 1; grid-row: 1; }
  .search:not(.search--sheet) > .search__field--select { grid-column: 2; grid-row: 1; }
}
@media (min-width: 900px) {
  .search:not(.search--sheet) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(240px, auto); column-gap: var(--space-3); }
  .search:not(.search--sheet) .search__dates { grid-column: 1; grid-row: 1; }
  .search:not(.search--sheet) .search__field--select { grid-column: 2; grid-row: 1; }
  .search:not(.search--sheet) .search__go { grid-column: 3; grid-row: 1; min-height: calc(var(--touch-target-comfortable) + var(--space-2)); }
  .search:not(.search--sheet) .search__msg { grid-column: 1 / -1; grid-row: 2; }
  .search:not(.search--sheet) .search__note { grid-column: 1 / -1; grid-row: 3; }
}

/* ── .sheet — the date sheet: a modal <dialog>, bottom sheet on phones and
   a centred dialog (--dialog look) from 768px. Its gold is the only gold
   while it is open (the header pill steps back: html.gsheet-open). ──────── */
.sheet {
  box-sizing: border-box; width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh;
  margin: auto 0 0; padding: 0; border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: auto;
  background: var(--color-white); color: var(--color-text); box-shadow: var(--shadow-xl);
}
/* ::backdrop does not inherit custom properties in older browsers: literal first. */
.sheet::backdrop { background: rgba(30, 30, 30, 0.55); background: var(--color-scrim); }
.sheet[open] { animation: sheet-in var(--duration-normal) var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__panel { padding: 0 var(--space-4) calc(var(--space-md) + env(safe-area-inset-bottom)); }
/* the head stays put on long sheets (320x568): Close is always reachable */
.sheet__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: calc(var(--touch-target-comfortable) + var(--space-2)); background: var(--color-white);
}
.sheet__title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: var(--leading-snug); color: var(--color-charcoal); }
.sheet__title:focus { outline: none; }
html.gsheet-open { overflow: hidden; }
@media (max-width: 359px) {
  .sheet__panel { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (min-width: 768px) {
  .sheet,
  .sheet--dialog { margin: auto; max-width: 480px; border-radius: var(--radius-xl); }
  .sheet__panel { padding: var(--space-3) var(--space-6) var(--space-6); }
}

/* ── .guest-bar — the bottom bar (partials/guestbar.html) ──────────────────
   Without JS an in-flow sticky row (never covers content). With JS it is
   fixed and shows only while no other gold is on screen: it yields to
   #search, the plan block, the ending, the cookie banner, the date sheet and
   the phone menu (js/guest-search.js; the banner rule is in main.css). From
   768px it floats (--float look). Call = .btn--call.btn--icon, go =
   .btn--gold.btn--sm. */
.guest-bar {
  position: sticky; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: var(--touch-target-min) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  box-sizing: border-box; min-height: calc(var(--touch-target-comfortable) + var(--space-4)); margin: 0;
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-white); border-top: 1px solid var(--color-border); color: var(--color-text);
}
.guest-bar[hidden] { display: none !important; }
.guest-bar.is-live { position: fixed; left: 0; right: 0; bottom: 0; }
body.has-gbar { padding-bottom: calc(var(--touch-target-comfortable) + var(--space-4) + env(safe-area-inset-bottom)); }
.guest-bar__summary {
  display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: var(--touch-target-min);
  color: var(--color-text); text-decoration: none;
}
.guest-bar__summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.guest-bar__label { font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-gray-600); }
.guest-bar__value { font-size: var(--text-base); font-weight: 600; line-height: var(--leading-snug); color: var(--color-text); overflow-wrap: anywhere; }
.guest-bar .guest-bar__go { padding: 0 var(--space-5); font-size: var(--text-base); white-space: nowrap; }
@media (max-width: 359px) {
  .guest-bar { padding-left: var(--space-3); padding-right: var(--space-3); }
  .guest-bar__label { display: none; }
  .guest-bar .guest-bar__go { padding: 0 var(--space-3-5); }
}
@media (min-width: 768px) {
  .guest-bar.is-live,
  .guest-bar--float {
    left: 50%; right: auto; bottom: var(--space-md); width: min(560px, calc(100% - var(--space-8))); transform: translateX(-50%);
    gap: var(--space-3); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  }
  body.has-gbar { padding-bottom: var(--space-24); }
}

/* ── .open-nights — "Open in the next 10 days" (js/stay-open-nights.js) ───
   Fixed 24px head and 96px rail so nothing below moves as it fills.
   Hidden without JS (html.js is stamped before first paint). */
.open-nights { display: none; }
.js .open-nights { display: block; margin: var(--space-3) 0 0; }
.open-nights__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--space-6); margin: 0 0 var(--space-sm); }
.open-nights__title {
  display: flex; align-items: center; gap: var(--space-sm); min-width: 0; margin: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1;
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-primary-dark); white-space: nowrap;
}
.open-nights__dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-accent); animation: open-nights-pulse 2.4s var(--ease-in-out) infinite; }
@keyframes open-nights-pulse { 50% { opacity: 0.35; } }
.open-nights__note { flex: none; font-size: var(--text-xs); line-height: 1; color: var(--color-text-light); white-space: nowrap; }
.open-nights__rail {
  display: flex; gap: var(--space-2-5); box-sizing: border-box; height: var(--space-24);
  margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-5); scrollbar-width: none;
}
.open-nights__rail::-webkit-scrollbar { display: none; }
.open-nights__tile {
  flex: 0 0 calc(var(--space-32) * 2 - var(--space-8)); box-sizing: border-box; height: var(--space-24); min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-0-5);
  padding: var(--space-2-5) var(--space-3-5); box-shadow: none;
}
.open-nights__tile[hidden] { display: none; }
.open-nights__name { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-snug); color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-nights__meta { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-nights__dates { font-size: var(--text-sm); font-weight: 700; line-height: var(--leading-snug); color: var(--color-primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-nights__tile--skel { background: var(--color-bg-alt); border-color: var(--color-bg-alt); }
.open-nights__msg {
  flex: 1 0 100%; box-sizing: border-box; height: var(--space-24); margin: 0; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; border: 1px dashed var(--color-text-light); border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-gray-600);
}
.open-nights__msg[hidden] { display: none; }
.open-nights__msg a { color: var(--color-primary-dark); font-weight: 700; text-decoration: underline; }
/* the mono title (--tracking-widest) and the note do not fit one 24px row
   under 420px: the note steps out */
@media (max-width: 419px) {
  .open-nights__note { display: none; }
}
@media (max-width: 359px) {
  .open-nights__rail { margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); scroll-padding-inline: var(--space-3); }
  .open-nights__tile { flex-basis: 212px; }
}
@media (min-width: 768px) {
  .open-nights__rail { margin: 0; padding: 0; scroll-padding-inline: 0; }
}
@media (min-width: 900px) {
  .open-nights__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); overflow: visible; }
  .open-nights__tile { width: auto; }
  .open-nights__msg { grid-column: 1 / -1; }
}

/* ── .chip-bar — one scrolling row: the area select (.chip--select) then the
   aria-pressed filter chips. Without JS it is the jump links only. The count
   line under it is aria-live. ─────────────────────────────────────────────── */
.chip-bar {
  display: flex; align-items: center; gap: var(--space-sm); margin: 0 calc(var(--space-5) * -1); padding: var(--space-1) var(--space-5) var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; white-space: nowrap;
}
.chip-bar::-webkit-scrollbar { display: none; }
.chip-bar__sep { flex: none; align-self: stretch; width: 1px; margin: var(--space-2) 0; background: var(--color-border); }
html:not(.js) .chip-bar [data-gfilter],
html:not(.js) .chip-bar__sep { display: none; }
.chip-bar--jump .chip { color: var(--color-text); }
.chip-bar__count { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-gray-600); }
@media (max-width: 359px) {
  .chip-bar { margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (min-width: 768px) {
  .chip-bar { flex-wrap: wrap; margin: 0; padding: var(--space-1) 0 var(--space-2); overflow: visible; }
}

/* ── .home-grid, .rail, .home-area — the homes ────────────────────────────
   .home-grid: 1 / 2 (700) / 3 (1024) columns. --phone-rail: under 700px
   the grid scrolls sideways (256px cards, no feature line, RL-39) and ends
   in the .home-grid__all tile ("See all N homes →"). js/guest-search.js
   makes every area group of three or more a phone rail (ruling 3).
   .rail: a rail at every width (travel guides). .home-area: one area group
   inside the one homes section (--space-md apart on phones, --space-2xl
   from 1024: ruling 12). */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: 0; }
.home-grid__all { display: none; }
.home-grid__none { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.home-grid__none a { color: var(--color-primary-dark); font-weight: 700; text-decoration: underline; }
@media (max-width: 699px) {
  .home-grid--phone-rail {
    display: flex; gap: var(--space-3); margin-left: calc(var(--space-5) * -1); margin-right: calc(var(--space-5) * -1);
    padding: var(--space-1) var(--space-5) var(--space-3); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-5);
  }
  .home-grid--phone-rail > .card,
  .home-grid--phone-rail > .home-grid__all { flex: 0 0 calc(var(--space-32) * 2); scroll-snap-align: start; }
  .home-grid--phone-rail .card__media { aspect-ratio: 4 / 3; }
  .home-grid--phone-rail .card__feature { display: none; }
  .home-grid--phone-rail > .home-grid__all { display: flex; }
  .home-grid--phone-rail > .home-grid__all[hidden] { display: none; }
}
@media (max-width: 359px) {
  .home-grid--phone-rail { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); scroll-padding-inline: var(--space-3); }
}
@media (min-width: 700px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}
.rail {
  display: flex; gap: var(--space-3); margin: 0 0 var(--space-lg); padding: var(--space-1) var(--space-1) var(--space-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-1);
}
.rail > .card,
.rail > .card--accent { flex: 0 0 calc(var(--space-32) * 2); scroll-snap-align: start; }
.home-area { scroll-margin-top: var(--space-20); }
.home-area[hidden] { display: none; }
.home-area + .home-area { margin-top: var(--space-md); }
.home-area__title { margin: 0; font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 500; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-charcoal); }
.home-area__meta { margin: 0 0 var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-gray-600); }
.home-area__sub { max-width: 62ch; margin: 0 0 var(--space-md); line-height: var(--leading-normal); color: var(--color-gray-600); }
@media (min-width: 1024px) {
  .home-area + .home-area { margin-top: var(--space-2xl); }
}

/* ── .reviews-strip — the one review component (hub and regions, Q-09) ────
   A raised section; head = h2 + one claim line (spans only, no star, no
   score); a rail of .review-card under 900px (86% cards), 3-up from 900px. */
.reviews-strip { padding: var(--space-10) 0; background: var(--color-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.reviews-strip__head { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.reviews-strip__title { margin: 0; font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 500; line-height: var(--leading-snug); color: var(--color-charcoal); }
.reviews-strip__line { max-width: 60ch; margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.reviews-strip__list {
  display: flex; gap: var(--space-3); margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5) var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-5); list-style: none;
}
.reviews-strip .review-card {
  flex: 0 0 86%; width: auto; margin: 0; display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  scroll-snap-align: start; box-shadow: none;
}
.reviews-strip .review-card__quote { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-charcoal); }
.reviews-strip .review-card__by {
  margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-border);
  font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-gray-600);
}
.reviews-strip .review-card__by b { color: var(--color-text); font-weight: 600; }
@media (max-width: 359px) {
  .reviews-strip__list { margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); scroll-padding-inline: var(--space-3); }
}
@media (min-width: 768px) {
  .reviews-strip { padding: var(--space-18) 0; }
  .reviews-strip__list { margin: 0 calc(var(--space-6) * -1); padding-left: var(--space-6); padding-right: var(--space-6); scroll-padding-inline: var(--space-6); }
}
@media (min-width: 900px) {
  .reviews-strip__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-lg); }
  .reviews-strip__line { text-align: right; }
  .reviews-strip__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; overflow: visible; }
  .reviews-strip .review-card { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .reviews-strip { padding: var(--space-22) 0; }
}

/* ── .plan-box — "Fifteen or more? Plan it with a person" (occasions) ────
   Carries the page's own gold ("Plan it with a person"): while it is on
   screen the guest bar yields and the header steps back. Its call button is
   white on the accent ground, as in the ending (main.css). From 1024 the
   title and text sit left (7) and the buttons right (5), across both rows. */
.plan-box {
  display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-accent); border: 1px solid var(--color-border-accent); border-radius: var(--radius-lg);
}
.plan-box__title { margin: 0; font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 500; line-height: var(--leading-snug); color: var(--color-charcoal); }
.plan-box__text { max-width: 60ch; margin: 0; line-height: var(--leading-normal); color: var(--color-text); }
.plan-box__ctas { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xs); }
@media (min-width: 560px) {
  .plan-box__ctas { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 768px) {
  .plan-box { padding: var(--space-xl); }
}
@media (min-width: 1024px) {
  .plan-box { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; column-gap: var(--space-2xl); row-gap: var(--space-sm); align-items: end; }
  .plan-box__title,
  .plan-box__text { grid-column: 1; }
  .plan-box__ctas { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open],
  .open-nights__dot { animation: none; }
}