/*
 * landing.css - Serenity Inn landing page.
 *
 * Every colour comes from a custom property that index.html sets from
 * tenant.brand at load. Nothing in here names a brand hex. Gold only ever
 * sits on the dark green surfaces, never as text on paper.
 *
 * Mobile first. Desktop arrives via min-width queries.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--body, sans-serif);
  color: var(--ink, #1c1c1c);
  background: var(--paper, #fff);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; }

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4.5vw, 32px);
}

/* ------------------------------------------------------------------- nav */

#nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
#nav.is-solid {
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 10px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .01em;
}
.nav-brand img { height: 44px; width: auto; }

.nav-links { display: none; }

.nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-phone {
  display: none;
  color: var(--accentStrong);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.nav-phone:hover { text-decoration: underline; }
.nav-book {
  background: var(--accentStrong);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 11px 19px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  transition: filter .15s;
}
.nav-book:hover { filter: brightness(1.15); }

@media (min-width: 900px) {
  .nav-links {
    display: flex;
    gap: 26px;
    margin-left: auto;
  }
  .nav-links a {
    color: var(--ink2);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color .15s;
  }
  .nav-links a:hover { color: var(--accentStrong); }
  .nav-cta { margin-left: 0; }
  .nav-phone { display: inline; }
}

/* ------------------------------------------------------------------ hero */

.hero { padding: 8px 0 clamp(30px, 5vw, 64px); }

/* PHONE ORDER: photos, name, booking, then the detail. The booking panel has to
   land on the first screen, so everything above it is on a tight budget and the
   three supporting facts sit underneath it instead of pushing it off. */
.hero-grid {
  display: grid;
  gap: 12px;
}
/* A grid item defaults to min-width:auto, so one wide child can push the whole
   track past the viewport. This is the guard that stops that ever happening. */
.hero-grid > * { min-width: 0; }
.hero-media { order: 1; }
.hero-text  { order: 2; }
.book       { order: 3; }
.hero-facts { order: 4; }

.hero-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* Belt and braces. If an image ever computes taller than its track again, it
     gets clipped here instead of painting over the copy underneath it. */
  overflow: hidden;
}
/* height was 100% here, and on iOS Safari that resolved against an indefinite
   grid track while aspect-ratio was ALSO trying to set the height. The images
   rendered taller than their boxes, overflowed, and the headline painted on top
   of the photos. aspect-ratio owns the height now and nothing fights it. */
.hero-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}
.hm-main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}
/* Phone and tablet only; desktop overrides to 16/10 further down. These two
   crops decide whether "Check availability" clears the fold, so they are as
   shallow as they can be without the photos reading as slivers. */
.hm-a, .hm-b { aspect-ratio: 2 / 1; }

.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(38px, 9.5vw, 74px);
  line-height: 1.04;
  letter-spacing: -.01em;
}
.hero-lead {
  margin-top: 10px;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  color: var(--ink2);
  max-width: 46ch;
}

/* On a wide screen these carry the text column down to the height of the photo
   column beside it. On a phone they are the first thing below the booking bar. */
.hero-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 44ch;
}
.hero-facts li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--rule);
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.45;
  color: var(--ink2);
}
.hero-facts li:last-child { border-bottom: 1px solid var(--rule); }
.hero-facts li::before {
  content: '';
  position: absolute;
  left: 4px; top: 19px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* TABLET. An iPad is too narrow for the two-column hero and too tall to waste,
   so it keeps the stacked order but takes a cinematic crop on the lead photo.
   Without this the CTA fell 100px below the fold on a 768x1024 iPad. */
@media (min-width: 700px) and (max-width: 899px) {
  .hero-grid { gap: 10px; }
  .hm-main { aspect-ratio: 21 / 9; }
  .hero h1 { font-size: 56px; }
  .hero-lead { font-size: 18px; max-width: 60ch; }
  .hero-facts { max-width: none; }
  .hero-facts li { padding: 9px 0 9px 24px; }
  .hero-facts li::before { top: 18px; }
  /* The two-up booking bar is taller than the single row it replaced here, so
     the panel gives back the difference in padding. Without this the CTA sat
     16px under the fold on a 768x1024 iPad. */
  .book { padding: 18px; margin-top: 20px; }
  .book-top { margin-bottom: 12px; }
}

@media (min-width: 900px) {
  .hero { padding: clamp(12px, 2vw, 26px) 0 clamp(28px, 4vw, 46px); }
  .hero-grid {
    grid-template-columns: 1.02fr 1fr;
    gap: 0 clamp(36px, 5vw, 70px);
    grid-template-areas:
      "text  media"
      "facts media"
      "book  book";
    align-content: start;
  }
  /* The media spans both text rows, so any height it has spare is split between
     them. Pinning the copy to the bottom of its row and the facts to the top of
     theirs keeps the two touching instead of drifting apart. */
  .hero-text  { grid-area: text; align-self: end; }
  .hero-media { grid-area: media; align-self: center; }
  .hero-facts { grid-area: facts; margin-top: 20px; align-self: start; }
  .book       { grid-area: book; }
  .hero-lead { margin-top: 18px; line-height: 1.65; }
  .hero-media { gap: 12px; }
  /* These two ratios ARE the height of the hero: the photo column is taller
     than the copy, so it decides how far down the booking panel sits. Shallower
     crops pull it up by roughly 130px without losing a photo. */
  .hm-main { aspect-ratio: 2 / 1; border-radius: 22px; }
  .hm-a, .hm-b { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------ booking panel + proof */

/* The booking panel used to be its own dark green band under the hero. It is
   now a panel INSIDE the hero, so a visitor lands on one screen that says who
   this is and lets them pick dates without scrolling. Her pale green surface
   gives the white booking bar its edge without cutting the page in two. */
.book {
  margin-top: clamp(26px, 3.6vw, 42px);
  /* html already carries scroll-padding-top for the sticky nav, so this only
     adds the breathing room. 90 here stacked on top of it and left the panel
     sitting a third of the way down an empty screen. */
  scroll-margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: clamp(22px, 3.2vw, 32px);
}

.book-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 46px);
  margin-bottom: 18px;
}

.book-h {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 34px);
  color: var(--ink);
}

/* theme the booking bar from her tokens, and nothing else */
.bb {
  --bb-paper: var(--paper);
  --bb-ink: var(--ink);
  --bb-muted: var(--muted);
  --bb-line: var(--rule);
  --bb-accent: var(--accentStrong);
  --bb-accent-ink: var(--paper);
  --bb-sel: var(--green);
  --bb-range: color-mix(in oklab, var(--accent) 16%, transparent);
  --bb-font: var(--body);
  --bb-display: var(--display);
  --bb-note: var(--ink2);
  --bb-shadow: 0 10px 30px color-mix(in oklab, var(--greenDark) 12%, transparent);
  max-width: none;
}

.proofs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(22px, 3.5vw, 40px);
}
.proof {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
/* Gold is her brand but it is only ~2.3:1 on paper, so on this light panel the
   numerals take the solved accent instead. Gold stays on the green surfaces. */
.proof-score {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1;
  color: var(--accentStrong);
}
.proof-score i {
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}
.proof-meta { display: flex; flex-direction: column; gap: 1px; }
.proof-meta b { color: var(--ink); font-size: 14.5px; }
.proof-meta span { color: var(--muted); font-size: 12.5px; }
.proof:hover .proof-meta b { text-decoration: underline; text-decoration-color: var(--accent); }

/* Phone: every pixel above "Check availability" is spent, so the panel loses its
   padding, the heading drops a size and the two scores sit on one line. */
@media (max-width: 760px) {
  .book { margin-top: 2px; padding: 14px 13px; border-radius: 18px; }
  .book-top { margin-bottom: 10px; gap: 10px 16px; align-items: center; }
  .book-h { font-size: 25px; }
  .proofs { gap: 8px 16px; }
  .proof { gap: 8px; }
  .proof-score { font-size: 25px; }
  .proof-score i { font-size: 12px; }
  .proof-meta b { font-size: 13px; }
  .proof-meta span { font-size: 11.5px; }
  .bb { --bb-radius: 15px; --bb-radius-sm: 11px; }
}

/* -------------------------------------------------------------- sections */

section { padding: clamp(64px, 9vw, 108px) 0; }

main h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.005em;
}
.sec-sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16.5px;
}

/* two-column blocks: image above text when stacked, flipped with order */
.split { display: grid; gap: 28px; }
.split-media { order: -1; }
.split-media img { width: 100%; border-radius: 22px; object-fit: cover; }

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(44px, 6vw, 76px);
    align-items: center;
  }
  .split-media { order: 2; }
  .split.media-left .split-media { order: -1; }
}

/* ------------------------------------------------------------------ host */

.host-photo img { aspect-ratio: 4 / 5; }
/* Her photo is a tall 4:5, so 17px body text left the right-hand column
   looking half empty next to it. */
.host p {
  margin-top: 20px;
  font-size: clamp(17px, 1.55vw, 20.5px);
  line-height: 1.62;
  color: var(--ink2);
  max-width: 54ch;
}
.host h2 { font-size: clamp(32px, 3.9vw, 50px); }
.host-sign {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  color: var(--accentStrong);
  margin-top: 26px !important;
}
.host-role {
  font-size: 15px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

/* ----------------------------------------------------------------- rooms */

.rooms-list {
  margin-top: 42px;
  border-bottom: 1px solid var(--rule);
}
.room {
  display: grid;
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.room > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}
.room h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 27px;
}
.room-bed {
  margin-top: 4px;
  color: var(--accentStrong);
  font-weight: 600;
  font-size: 14px;
}
.room-blurb {
  margin-top: 10px;
  color: var(--ink2);
  line-height: 1.6;
  max-width: 58ch;
}
.room-feats {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}
.room-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.room-rate b { font-size: 28px; font-weight: 800; }
.room-rate span { color: var(--muted); font-size: 14px; margin-left: 4px; }
.room-sleeps { color: var(--muted); font-size: 13.5px; }
.room-side button {
  background: var(--accentStrong);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: filter .15s;
}
.room-side button:hover { filter: brightness(1.15); }

@media (min-width: 900px) {
  .room {
    grid-template-columns: 250px 1fr auto;
    align-items: center;
    gap: 34px;
  }
  .room-side {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 6px;
  }
  .room-side button { margin-top: 8px; }
}

/* ------------------------------------------------------------- breakfast */

.breakfast { background: var(--cream); }

.bf-inc {
  display: inline-block;
  margin-top: 24px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accentStrong);
  border: 1.5px solid color-mix(in oklab, var(--accentStrong) 40%, transparent);
  border-radius: 999px;
  padding: 8px 15px;
}
.breakfast .split-text p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink2);
  max-width: 54ch;
}

.bf-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-self: start;
}
.bf-mosaic img {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.bf-0, .bf-1 { aspect-ratio: 3 / 4; }
.bf-2, .bf-3 { aspect-ratio: 1 / 1; }

@media (min-width: 900px) {
  .bf-mosaic { padding-bottom: 26px; }
  .bf-mosaic img:nth-child(even) { transform: translateY(26px); }
}

.bf-room { margin-top: clamp(40px, 6vw, 60px); }
.bf-room img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
}
.bf-room figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}
@media (min-width: 900px) {
  .bf-room img { aspect-ratio: 21 / 9; }
}

/* ----------------------------------------------------------------- house */

.house-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.house-grid figure { position: relative; margin: 0; }
.house-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.house-grid figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}
.hg-living { grid-column: 1 / -1; }
.hg-living img { aspect-ratio: 16 / 10; }
.hg-egg { grid-row: span 2; }
.hg-a img, .hg-b img { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .house-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 252px;
  }
  .hg-living { grid-column: 1 / 3; }
  .hg-living img, .hg-a img, .hg-b img { aspect-ratio: auto; }
  .hg-egg { grid-column: 3; grid-row: 1 / 3; }
}

.ams {
  margin-top: 46px;
  display: grid;
  gap: 26px 44px;
}
.am { display: flex; gap: 14px; align-items: flex-start; }
.am-ic { font-size: 23px; line-height: 1.4; }
.am b { font-size: 16.5px; }
.am p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
@media (min-width: 680px) { .ams { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ams { grid-template-columns: 1fr 1fr 1fr; } }

/* --------------------------------------------------------------- reviews */

/* A moving row, not a wall. Eight quotes in a grid is a section somebody scrolls
   past; the same eight sliding under the booking bar get read. */
.rmq {
  background: var(--surface);
  border-block: 1px solid var(--rule);
  padding: 26px 0;
  overflow: hidden;
}

.rmq-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: rmq 64s linear infinite;
}
.rmq:hover .rmq-track,
.rmq:focus-within .rmq-track { animation-play-state: paused; }

/* The set is printed twice, so sliding exactly half the track lands the copy
   where the original started and the loop never shows a seam. */
@keyframes rmq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rmq-track { animation: none; }
  .rmq { overflow-x: auto; }
}

.review {
  flex: none;
  width: min(340px, 78vw);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 20px 22px 18px;
}
.review-stars {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 3px;
}
.review blockquote {
  margin: 10px 0 14px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--ink);
}
.review figcaption b { display: block; font-size: 14.5px; }
.review figcaption span { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- nearby */

.near-grid {
  margin-top: 42px;
  display: grid;
  gap: 38px 52px;
}
@media (min-width: 760px) { .near-grid { grid-template-columns: 1fr 1fr; } }

.near-walk {
  display: inline-block;
  background: var(--surface);
  color: var(--accentStrong);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.near h3 {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
}
.near p {
  margin-top: 8px;
  color: var(--ink2);
  line-height: 1.6;
  max-width: 44ch;
}

/* --------------------------------------------------------------- find us */

.find { background: var(--greenDark); color: var(--cream); }
.find h2 { color: var(--gold); }
.find-line {
  margin-top: 16px;
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--cream) 88%, transparent);
  max-width: 40ch;
}
.find-list {
  margin-top: 30px;
  list-style: none;
}
.find-list li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
}
.find-list li span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 55%, transparent);
}
.find-list a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  transition: color .15s;
  overflow-wrap: anywhere;
}
.find-list a:hover { color: var(--gold); }
.find-list b { font-weight: 600; }
.find-photo img { aspect-ratio: 4 / 5; }

/* ---------------------------------------------------------------- footer */

.foot {
  background: var(--greenDark);
  border-top: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  padding: 22px 0 30px;
}
.foot-in {
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: color-mix(in oklab, var(--cream) 60%, transparent);
}

/* --------------------------------------------------- confirmation modal */

#confirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
}
#confirm[hidden] { display: none; }

.cf-back {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--greenDark) 62%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cf-card {
  position: relative;
  background: var(--paper);
  border-radius: 24px;
  padding: 34px 28px 24px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 30px 80px color-mix(in oklab, var(--greenDark) 45%, transparent);
}
.cf-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accentStrong);
  color: var(--paper);
  font-size: 24px;
}
.cf-card h3 {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 27px;
}
.cf-lead { margin-top: 6px; color: var(--muted); font-size: 15.5px; }

.cf-facts { margin: 22px 0 6px; text-align: left; }
.cf-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}
.cf-facts dt { color: var(--muted); font-size: 14px; }
.cf-facts dd { font-weight: 600; font-size: 15px; text-align: right; }
.cf-facts dd b { font-size: 17px; font-weight: 800; }
.cf-facts dd span { color: var(--muted); font-weight: 500; font-size: 12.5px; margin-left: 6px; }

.cf-wa {
  display: block;
  margin-top: 14px;
  padding: 13px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  color: var(--accentStrong);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: border-color .15s;
}
.cf-wa:hover { border-color: var(--accent); }
.cf-done {
  width: 100%;
  margin-top: 10px;
  background: var(--accentStrong);
  color: var(--paper);
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: filter .15s;
}
.cf-done:hover { filter: brightness(1.15); }

/* ------------------------------------------------------------------ touch */

/* For fingers, not a trackpad. Applies on her iPad and on a phone, changes
   nothing on a desktop. Apple's floor for a tap target is 44pt. */
@media (hover: none) and (pointer: coarse) {
  .nav-book { min-height: 44px; padding: 12px 20px; }
  .room-pick, .s-apply, .bb-go, .bb-done, .cf-done { min-height: 48px; }
  .bb-cell { min-height: 56px; }
  .bb-step button { width: 44px; height: 44px; }
  .bb-day { min-height: 42px; }
  .proof { min-height: 44px; }

  * { -webkit-tap-highlight-color: transparent; }
  .nav-book, .bb-go, .bb-step button, .bb-day, .room-pick { -webkit-user-select: none; user-select: none; }

  /* Marquee hover-pause cannot work without a pointer, and on iOS a tapped
     :hover sticks, which would freeze the row for good. */
  .rmq:hover .rmq-track { animation-play-state: running; }
}