:root {
  color-scheme: light;
  --ink: #171716;
  --ink-2: #343431;
  --muted: #6e6d68;
  --ground: #f7f6f2;
  --paper: #ffffff;
  --line: #e4e2da;
  --accent: #ffc838;
  --accent-ink: #171716;
  --success: #176b46;
  --danger: #b42318;
  --mint: #8bd8cc;
  --night: #101816;
  --night-2: #1b2522;
  --cream: #f4f0e7;
  --shadow-card: 0 18px 56px rgba(23, 23, 22, 0.1);
  --shadow-soft: 0 8px 28px rgba(23, 23, 22, 0.07);
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --content: 1280px;
  --ease: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open,
body.menu-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  text-wrap: balance;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow--light {
  color: rgba(255, 255, 255, 0.76);
}

.eyebrow--mint {
  color: var(--mint);
}

.button {
  align-items: center;
  border-radius: var(--radius-s);
  display: inline-flex;
  font-size: 15px;
  font-weight: 720;
  gap: 10px;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}

.button:hover {
  transform: translateY(-1px);
}

.button--small {
  min-height: 42px;
  padding-inline: 18px;
}

.button--large {
  min-height: 56px;
  font-size: 16px;
}

.button--full {
  width: 100%;
}

.button--yellow {
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(255, 200, 56, 0.22);
  color: var(--accent-ink);
}

.button--yellow:hover {
  background: #ffd25a;
  box-shadow: 0 12px 30px rgba(255, 200, 56, 0.28);
}

.button--cream {
  background: var(--cream);
  color: var(--night);
}

.button--outline {
  background: transparent;
  border: 1px solid var(--line);
}

.button.is-disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
  transform: none;
}

.text-link {
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 3px;
  position: relative;
}

.text-link::after {
  background: currentColor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transition: width var(--ease);
  width: 26%;
}

.text-link:hover::after {
  width: 100%;
}

.text-link--light {
  color: #fff;
}

.yellow-pill,
.price-pill {
  align-items: center;
  background: var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  padding: 8px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Design review */

.review-page {
  min-height: 100vh;
}

.review-header {
  align-items: center;
  display: flex;
  height: 80px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1380px;
  padding: 0 40px;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-size: 17px;
  font-weight: 760;
  gap: 10px;
  letter-spacing: -0.02em;
}

.brand img {
  height: 34px;
  object-fit: contain;
  width: 34px;
}

.review-meta {
  color: var(--muted);
  font-size: 13px;
}

.review-main {
  margin: 0 auto;
  max-width: 1380px;
  padding: 64px 40px 80px;
}

.review-intro {
  max-width: 820px;
}

.review-intro h1 {
  font-size: clamp(48px, 5.2vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin-bottom: 28px;
}

.review-intro > p:last-child {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
  max-width: 730px;
}

.concept-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 72px;
}

.concept-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition:
    transform var(--ease),
    box-shadow var(--ease);
}

.concept-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.concept-preview {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.concept-preview > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.concept-card--a .concept-preview::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.04));
  content: "";
  inset: 0;
  position: absolute;
}

.concept-preview__overlay {
  bottom: 36px;
  color: #fff;
  left: 36px;
  position: absolute;
  right: 36px;
  z-index: 2;
}

.concept-preview__overlay > strong {
  display: block;
  font-size: 44px;
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin: 20px 0 28px;
}

.mini-booker {
  align-items: center;
  background: #fff;
  border-radius: 14px;
  color: var(--ink);
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 1.4fr 1fr auto;
  padding: 10px;
}

.mini-booker span {
  border-right: 1px solid var(--line);
  padding: 9px;
}

.mini-booker b {
  background: var(--accent);
  border-radius: 9px;
  padding: 10px 12px;
}

.guided-panel {
  background: rgba(16, 24, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  bottom: 24px;
  color: #fff;
  left: 24px;
  padding: 24px;
  position: absolute;
  right: 24px;
}

.recommend-tag {
  background: var(--mint);
  border-radius: 999px;
  color: var(--night);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding: 6px 9px;
  text-transform: uppercase;
}

.guided-panel small {
  color: rgba(255, 255, 255, 0.62);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

.guided-panel > strong {
  display: block;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 7px 0 18px;
}

.intent-row {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}

.intent-row span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 11px;
  padding: 7px 10px;
}

.intent-row .active {
  background: var(--paper);
  color: var(--night);
}

.guided-result {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 12px;
}

.guided-panel__cta {
  background: var(--accent);
  border-radius: 10px;
  color: var(--accent-ink);
  display: block;
  font-size: 12px;
  font-weight: 800;
  padding: 12px;
  text-align: center;
  width: 100%;
}

.concept-copy {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  padding: 30px;
}

.concept-copy h2 {
  font-size: 32px;
  letter-spacing: -0.04em;
  margin: 0;
}

.concept-copy > p,
.concept-copy > ul,
.concept-copy > .text-link {
  grid-column: 1 / -1;
}

.concept-copy > p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.concept-copy ul {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.concept-copy li {
  font-size: 14px;
  padding-left: 22px;
  position: relative;
}

.concept-copy li::before {
  color: var(--success);
  content: "✓";
  font-weight: 800;
  left: 0;
  position: absolute;
}

.arrow-link {
  align-items: center;
  background: var(--ground);
  border-radius: 50%;
  display: flex;
  font-size: 20px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.review-note {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 24px;
  grid-template-columns: 180px 1fr 1fr;
  margin-top: 72px;
  padding: 34px 0;
}

.review-note > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.review-note span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.review-footer {
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1380px;
  padding: 0 40px 40px;
}

/* Shared site chrome */

.booking-page {
  min-height: 100vh;
}

.booking-page[data-concept="b"] {
  background: var(--night);
}

.site-header {
  align-items: center;
  display: flex;
  height: 72px;
  justify-content: space-between;
  left: 0;
  padding: 0 max(48px, calc((100vw - var(--content)) / 2));
  position: relative;
  top: 0;
  width: 100%;
  z-index: 50;
}

.site-header--a {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(20, 20, 18, 0.08);
  backdrop-filter: blur(18px);
}

.site-header--b {
  background: var(--night);
  color: #fff;
}

.site-header--b .brand img,
.member-b .brand img {
  filter: saturate(0.72) brightness(1.18);
}

.desktop-nav {
  align-items: center;
  display: flex;
  gap: 34px;
}

.desktop-nav a,
.header-signin {
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}

.desktop-nav a {
  color: var(--muted);
}

.site-header--b .desktop-nav a,
.site-header--b .header-signin {
  color: rgba(255, 255, 255, 0.68);
}

.desktop-nav a:hover,
.header-signin:hover {
  color: inherit;
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 20px;
}

.mobile-menu {
  align-items: center;
  background: transparent;
  display: none;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.mobile-menu span {
  background: currentColor;
  display: block;
  height: 1.5px;
  width: 20px;
}

.mobile-drawer {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 2px;
  left: 0;
  padding: 12px 20px 20px;
  position: fixed;
  right: 0;
  top: 56px;
  z-index: 90;
}

.mobile-drawer a,
.mobile-drawer button {
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font-size: 16px;
  font-weight: 650;
  padding: 14px 4px;
  text-align: left;
}

.screen {
  min-height: 70vh;
}

.site-footer {
  background: #eeeae1;
  display: grid;
  gap: 36px;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  padding: 58px max(48px, calc((100vw - var(--content)) / 2));
}

[data-concept="b"] .site-footer {
  background: #0a100f;
  color: #fff;
}

.site-footer > div {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer p,
.site-footer span,
.site-footer a {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

[data-concept="b"] .site-footer p,
[data-concept="b"] .site-footer span,
[data-concept="b"] .site-footer a {
  color: rgba(255, 255, 255, 0.56);
}

.site-footer strong {
  font-size: 13px;
  margin-bottom: 4px;
}

.site-footer .brand {
  margin-bottom: 10px;
}

.site-footer .brand span {
  color: var(--ink);
  font-size: 17px;
}

[data-concept="b"] .site-footer .brand span {
  color: #fff;
}

/* Shared cards, trust and room inventory */

.section-intro {
  margin: 0 auto 72px;
  max-width: 730px;
  text-align: center;
}

.section-intro h2 {
  font-size: 52px;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 18px;
}

.section-intro > p:last-child {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.room-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  min-width: 0;
  overflow: hidden;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    border-color var(--ease);
}

.room-card:hover {
  border-color: #c9c6bc;
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.room-card__image {
  height: 250px;
  overflow: hidden;
  position: relative;
}

.room-card__image img {
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
  width: 100%;
}

.room-card:hover .room-card__image img {
  transform: scale(1.015);
}

.room-card__body {
  padding: 20px;
}

.room-card__top {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.room-card h3 {
  font-size: 21px;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 2px 0 0;
}

.room-card .price-pill {
  font-size: 10px;
  padding: 7px 9px;
  text-transform: none;
}

.room-meta {
  color: var(--muted);
  font-size: 13px;
  margin: 7px 0 14px;
}

.room-description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  min-height: 61px;
}

.room-link {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 750;
  justify-content: space-between;
  margin-top: 22px;
}

.trust-strip {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 70px 0;
}

.trust-strip > div {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 10px;
  min-height: 76px;
  padding: 0 18px;
}

.trust-strip > div + div {
  border-left: 1px solid var(--line);
}

.trust-strip span {
  align-items: center;
  background: #eff8f3;
  border-radius: 50%;
  color: var(--success);
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  height: 25px;
  justify-content: center;
  width: 25px;
}

.trust-strip--wide {
  margin: 0;
  padding-inline: max(48px, calc((100vw - var(--content)) / 2));
}

.trust-strip--dark {
  background: var(--night);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  margin: 0;
  padding-inline: max(48px, calc((100vw - var(--content)) / 2));
}

.trust-strip--dark > div + div {
  border-color: rgba(255, 255, 255, 0.12);
}

.trust-strip--dark span {
  background: rgba(139, 216, 204, 0.14);
  color: var(--mint);
}

/* Concept A home */

.hero {
  position: relative;
}

.hero--home-a {
  align-items: flex-end;
  display: flex;
  height: 680px;
  overflow: hidden;
}

.hero--home-a > img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.hero-shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.04) 78%);
  inset: 0;
  position: absolute;
}

.hero-copy {
  color: #fff;
  margin: 0 max(48px, calc((100vw - var(--content)) / 2));
  max-width: 640px;
  padding-bottom: 132px;
  position: relative;
  z-index: 2;
}

.hero-copy h1 {
  font-size: clamp(58px, 5.2vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0 0 22px;
}

.hero-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 520px;
}

.quick-book {
  background: var(--paper);
  border: 1px solid rgba(20, 20, 18, 0.08);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  margin: -64px auto 0;
  max-width: 1184px;
  padding: 18px;
  position: relative;
  z-index: 5;
}

.quick-book--a {
  grid-template-columns: 1.55fr 0.9fr 0.9fr 0.95fr;
}

.quick-book label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quick-book label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  padding-left: 3px;
  text-transform: uppercase;
}

.quick-book select,
.field-button {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  min-height: 50px;
  padding: 0 14px;
  text-align: left;
  width: 100%;
}

.quick-book .button {
  align-self: end;
}

.room-index {
  margin: 0 auto;
  max-width: var(--content);
  padding: 140px 0 120px;
}

.room-group + .room-group {
  margin-top: 106px;
}

.group-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 26px;
}

.group-heading .eyebrow {
  margin-bottom: 6px;
}

.group-heading h2 {
  font-size: 32px;
  letter-spacing: -0.04em;
  margin: 0;
}

.group-heading > span {
  color: var(--muted);
  font-size: 13px;
}

.room-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-band {
  height: 570px;
  overflow: hidden;
  position: relative;
}

.photo-band > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.photo-band::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.08));
  content: "";
  inset: 0;
  position: absolute;
}

.photo-band > div {
  color: #fff;
  left: max(48px, calc((100vw - var(--content)) / 2));
  max-width: 580px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.photo-band h2 {
  font-size: 54px;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 28px;
}

/* Concept B home */

.home-b {
  background: var(--ground);
}

.hero--home-b {
  background: var(--night);
  color: #fff;
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1fr);
  min-height: 710px;
  padding: 58px max(48px, calc((100vw - var(--content)) / 2)) 78px;
  position: relative;
}

.hero-b-copy {
  align-self: center;
  padding-bottom: 72px;
}

.hero-b-copy h1 {
  font-size: clamp(62px, 6vw, 88px);
  letter-spacing: -0.065em;
  line-height: 0.9;
  margin: 0 0 32px;
}

.hero-b-copy h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero-b-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
  line-height: 1.55;
  max-width: 480px;
}

.hero-b-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 36px;
}

.hero-b-proof span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.hero-b-proof b {
  color: var(--mint);
  font-weight: 720;
}

.guided-booker {
  align-self: center;
  background: var(--paper);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  color: var(--ink);
  padding: 28px;
  position: relative;
  z-index: 4;
}

.guided-booker__top {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr auto;
  margin-bottom: 26px;
}

.step-mark {
  align-items: center;
  background: var(--night);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  margin-right: 10px;
  width: 30px;
}

.guided-booker__top p {
  font-size: 13px;
  font-weight: 720;
  margin: 0;
}

.time-promise {
  color: var(--muted);
  font-size: 11px;
}

.guided-booker h2 {
  font-size: 34px;
  letter-spacing: -0.045em;
  margin-bottom: 20px;
}

.intent-selector {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intent-selector button {
  align-items: center;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 82px;
  padding: 8px 6px;
}

.intent-selector .intent-icon {
  font-size: 19px;
  line-height: 1;
  margin-bottom: 4px;
}

.intent-selector button strong {
  font-size: 12px;
  font-weight: 740;
}

.intent-selector button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 560;
  line-height: 1.2;
  max-width: 105px;
}

.intent-selector button.active {
  background: #fff9e8;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.guided-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1.45fr;
  margin: 18px 0 12px;
}

.guided-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guided-fields label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.guided-fields select,
.guided-fields .field-button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  min-height: 47px;
  padding: 0 10px;
}

.guided-match {
  align-items: center;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  display: grid;
  gap: 11px;
  grid-template-columns: 58px 1fr auto;
  min-height: 64px;
  padding: 8px;
  text-decoration: none;
  transition: border-color 160ms ease-out, transform 160ms ease-out;
}

.guided-match:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.guided-match--primary {
  background: #fff9e8;
  border-color: #e5d39d;
}

.guided-matches {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.guided-match img {
  border-radius: 8px;
  height: 52px;
  object-fit: cover;
  width: 58px;
}

.guided-match div {
  display: flex;
  flex-direction: column;
}

.guided-match small {
  color: var(--success);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.guided-match strong {
  font-size: 14px;
}

.guided-match span {
  color: var(--muted);
  font-size: 11px;
}

.guided-match .match-arrow {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 17px;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.guided-context-note {
  background: #eef9f6;
  border-radius: 10px;
  color: #176b55;
  font-size: 10px;
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 8px 10px;
}

.guided-no-match {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}

.guided-no-match strong {
  font-size: 13px;
}

.guided-no-match span,
.guided-no-match a {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.guided-no-match a {
  color: var(--ink);
  font-weight: 720;
  margin-top: 3px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.guided-reassurance {
  color: var(--muted);
  display: flex;
  font-size: 10px;
  justify-content: center;
  gap: 16px;
  margin-top: 13px;
}

.hero-b-image {
  bottom: 0;
  height: 180px;
  left: max(48px, calc((100vw - var(--content)) / 2));
  overflow: hidden;
  position: absolute;
  right: max(48px, calc((100vw - var(--content)) / 2));
}

.hero-b-image::after {
  background: linear-gradient(90deg, rgba(16, 24, 22, 0.72), rgba(16, 24, 22, 0));
  content: "";
  inset: 0;
  position: absolute;
}

.hero-b-image img {
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  width: 100%;
}

.photo-caption {
  bottom: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  left: 16px;
  position: absolute;
  z-index: 2;
}

.fast-choice {
  margin: 0 auto;
  max-width: var(--content);
  padding: 110px 0 120px;
}

.section-intro--split {
  align-items: end;
  display: flex;
  justify-content: space-between;
  max-width: none;
  text-align: left;
}

.section-intro--split > div:first-child {
  max-width: 680px;
}

.section-intro--split h2 {
  margin: 0;
}

.category-filter {
  background: #eae8e1;
  border-radius: 999px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.category-filter button {
  background: transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  min-height: 38px;
  padding: 0 15px;
}

.category-filter button.active {
  background: var(--paper);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.08);
  color: var(--ink);
}

.guided-room-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.room-card--guided {
  border-radius: 14px;
}

.room-card--guided .room-card__image {
  height: 185px;
}

.room-card--guided .room-card__body {
  padding: 16px;
}

.room-card--guided h3 {
  font-size: 18px;
}

.room-card--guided .room-description {
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.room-card--guided .room-link {
  border-top: 1px solid var(--line);
  margin-top: 15px;
  padding-top: 12px;
}

.fit-tag {
  background: var(--mint);
  border-radius: 999px;
  color: var(--night);
  font-size: 10px;
  font-weight: 800;
  left: 12px;
  padding: 7px 10px;
  position: absolute;
  top: 12px;
  text-transform: uppercase;
}

.decision-proof {
  background: var(--night);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 620px;
}

.decision-proof__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.decision-proof__copy {
  align-self: center;
  max-width: 560px;
  padding: 70px;
}

.decision-proof h2 {
  font-size: 54px;
  letter-spacing: -0.055em;
  line-height: 1;
  margin-bottom: 22px;
}

.decision-proof__copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.64);
  font-size: 17px;
  line-height: 1.55;
}

.sample-total {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  margin-top: 28px;
  padding: 16px;
}

.sample-total > div {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 8px 0;
}

.sample-total > div:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--mint);
  font-size: 16px;
  margin-top: 4px;
  padding-top: 14px;
}

/* Room pages */

.room-hero {
  overflow: hidden;
  position: relative;
}

.room-hero--a {
  height: 840px;
}

.room-hero__track,
.room-hero__track img {
  height: 100%;
  width: 100%;
}

.room-hero__track img {
  object-fit: cover;
}

.room-hero__shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.08) 72%), linear-gradient(0deg, rgba(0, 0, 0, 0.38), transparent 50%);
  inset: 0;
  position: absolute;
}

.room-hero__copy {
  bottom: 72px;
  color: #fff;
  left: max(48px, calc((100vw - var(--content)) / 2));
  max-width: 660px;
  position: absolute;
}

.room-hero__copy h1 {
  font-size: 76px;
  font-weight: 420;
  letter-spacing: -0.055em;
  line-height: 0.9;
  margin: 20px 0;
}

.room-hero__copy h1 strong {
  font-weight: 730;
}

.room-hero__copy p {
  color: rgba(255, 255, 255, 0.76);
  margin: 0;
}

.gallery-control {
  align-items: center;
  bottom: 48px;
  color: #fff;
  display: flex;
  gap: 12px;
  position: absolute;
  right: max(48px, calc((100vw - var(--content)) / 2));
}

.gallery-control button {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.gallery-control span {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: center;
}

.hero-booking-slot {
  position: absolute;
  right: max(48px, calc((100vw - var(--content)) / 2));
  top: 30px;
  width: 396px;
  z-index: 4;
}

.hero-booking-slot .booking-panel {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  padding: 18px;
}

.hero-booking-slot .booking-panel__heading {
  margin-bottom: 13px;
}

.hero-booking-slot .booking-panel__heading h2 {
  font-size: 21px;
}

.hero-booking-slot .date-strip {
  margin: 10px 0 14px;
}

.hero-booking-slot .date-strip button {
  min-height: 58px;
  padding-block: 5px;
}

.hero-booking-slot .time-grid button {
  min-height: 44px;
}

.hero-booking-slot .duration-row {
  margin-top: 12px;
  padding-top: 11px;
}

.hero-booking-slot .duration-picker {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 118px;
  margin-top: 10px;
  padding-top: 10px;
}

.hero-booking-slot .duration-picker > span small {
  display: none;
}

.hero-booking-slot .duration-picker select {
  min-height: 44px;
}

.hero-booking-slot .booking-range-summary {
  margin-top: 9px;
  padding-block: 7px;
}

.hero-booking-slot .money-summary {
  gap: 6px;
  margin: 12px 0;
}

.hero-booking-slot .money-summary__total {
  padding-top: 9px;
}

.hero-booking-slot .panel-policy {
  display: none;
}

.room-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 816px) 416px;
  margin: 0 auto;
  max-width: var(--content);
  padding: 76px 0 120px;
}

.room-details > h2,
.details-section > h2 {
  font-size: 46px;
  letter-spacing: -0.05em;
  line-height: 1.04;
  margin-bottom: 20px;
}

.room-lead {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  max-width: 740px;
}

.detail-facts {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 44px 0 72px;
}

.detail-facts > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 18px;
}

.detail-facts > div + div {
  border-left: 1px solid var(--line);
}

.detail-facts span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.detail-facts strong {
  font-size: 16px;
}

.details-section {
  margin-top: 82px;
}

.feature-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 0;
  padding: 18px;
}

.feature-card__toggle {
  align-items: center;
  background: transparent;
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  padding: 0;
  text-align: left;
  width: 100%;
}

.feature-icon {
  align-items: center;
  background: #fff6dc;
  border-radius: 50%;
  display: flex;
  font-size: 17px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.feature-card__toggle > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.feature-card__toggle strong {
  font-size: 15px;
}

.feature-card__toggle small {
  color: var(--muted);
  font-size: 10px;
}

.feature-card__toggle > b {
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
}

.feature-card > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 16px 0 0;
}

.gallery-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.gallery-grid button {
  background: transparent;
  border-radius: 14px;
  height: 260px;
  overflow: hidden;
  padding: 0;
}

.gallery-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sibling-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.sibling-grid .room-card__image {
  height: 210px;
}

.booking-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.desktop-booking-slot .booking-panel {
  position: sticky;
  top: 24px;
}

.mobile-booking-slot {
  display: none;
}

.booking-panel__heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 17px;
}

.booking-panel__heading h2 {
  font-size: 24px;
  letter-spacing: -0.04em;
  margin: 0;
}

.price-note {
  font-size: 13px;
  line-height: 1.3;
  text-align: right;
}

.price-note small {
  color: var(--muted);
  font-size: 10px;
}

.calendar-control {
  position: relative;
}

.calendar-field {
  align-items: center;
  appearance: none;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 14px;
  text-align: left;
  width: 100%;
}

.calendar-field:focus-visible,
.calendar-field[aria-expanded="true"] {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.calendar-field b {
  transition: transform 180ms ease;
}

.calendar-field[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.calendar-field > span {
  display: flex;
  flex-direction: column;
}

.calendar-field small {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.calendar-field strong {
  font-size: 13px;
}

.calendar-popover {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 54px rgba(15, 20, 18, 0.2);
  left: 0;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 30;
}

.calendar-popover[hidden] {
  display: none;
}

.calendar-popover__header {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 44px 1fr 44px;
  margin-bottom: 9px;
  text-align: center;
}

.calendar-popover__header button {
  align-items: center;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.calendar-popover__header button:disabled,
.calendar-popover__grid button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.calendar-popover__weekdays,
.calendar-popover__grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-popover__weekdays {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  margin-bottom: 4px;
  text-align: center;
  text-transform: uppercase;
}

.calendar-popover__weekdays span {
  padding: 3px 0;
}

.calendar-popover__grid button {
  align-items: center;
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-width: 0;
  padding: 2px;
}

.calendar-popover__grid button:hover:not(:disabled) {
  background: var(--ground);
}

.calendar-popover__grid button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.calendar-popover__grid button.active {
  background: var(--ink);
  color: #fff;
}

.calendar-popover__grid button small {
  color: #8a5b00;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-popover__grid button.active small {
  color: var(--accent);
}

.month-nav {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 34px 1fr 34px;
  margin-top: 12px;
}

.month-nav button {
  align-items: center;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.month-nav button:disabled {
  cursor: default;
  opacity: 0.35;
}

.month-nav > div {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.month-nav strong {
  font-size: 11px;
}

.month-nav small {
  color: var(--muted);
  font-size: 7px;
}

.date-strip {
  display: flex;
  gap: 6px;
  margin: 14px 0 20px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-behavior: smooth;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

.date-strip button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex: 0 0 62px;
  flex-direction: column;
  min-height: 68px;
  padding: 8px 3px;
}

.booking-panel--a .date-strip {
  scroll-snap-type: x mandatory;
}

.booking-panel--a .date-strip button {
  flex-basis: calc((100% - 24px) / 5);
  min-width: 52px;
  scroll-snap-align: start;
}

.date-strip span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.date-strip strong {
  font-size: 17px;
  line-height: 1.25;
}

.date-strip small {
  color: var(--muted);
  font-size: 7px;
  white-space: nowrap;
}

.date-strip button.active {
  background: #fff7df;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.date-strip button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.booking-label {
  align-items: center;
  display: flex;
  font-size: 11px;
  font-weight: 750;
  justify-content: space-between;
  margin-bottom: 9px;
}

.booking-label small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.time-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.time-grid button {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  min-height: 44px;
}

.time-grid button small {
  color: var(--muted);
  font-size: 8px;
}

.time-grid button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.time-grid button.active small {
  color: rgba(255, 255, 255, 0.62);
}

.time-grid button:disabled {
  background: #f1f0ec;
  border-color: transparent;
  color: #aaa79f;
  cursor: not-allowed;
  opacity: 0.62;
  text-decoration: line-through;
}

.time-grid button:disabled small {
  color: inherit;
}

.duration-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  padding-top: 15px;
}

.duration-row > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.duration-row > div {
  display: flex;
  gap: 5px;
}

.duration-row button {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 10px;
  min-height: 44px;
  padding: 0 8px;
}

.duration-row button.active {
  background: var(--ink);
  color: #fff;
}

.fixed-duration {
  font-size: 13px;
}

.duration-picker {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 132px;
  margin-top: 17px;
  padding-top: 15px;
}

.duration-picker > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.duration-picker > span strong {
  font-size: 12px;
}

.duration-picker > span small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.duration-picker select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 17px) calc(50% - 2px) / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 12px) calc(50% - 2px) / 5px 5px no-repeat,
    var(--ground);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  min-height: 44px;
  padding: 0 30px 0 12px;
  width: 100%;
}

.day-pass-choice {
  align-items: center;
  background: #fff7df;
  border: 1px solid var(--ink);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  padding: 12px;
}

.day-pass-choice > span {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
}

.day-pass-choice > div {
  display: flex;
  flex-direction: column;
}

.day-pass-choice strong {
  font-size: 12px;
}

.day-pass-choice small {
  color: var(--muted);
  font-size: 9px;
}

.booking-range-summary {
  align-items: center;
  background: var(--ground);
  border-radius: 9px;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 12px;
}

.booking-range-summary span {
  color: var(--muted);
  font-size: 9px;
}

.booking-range-summary strong {
  font-size: 11px;
}

.booking-selection-note {
  color: #8f4d17;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  margin: 9px 4px 0;
  text-align: center;
}

.booking-selection-note--dark {
  color: #ffd98a;
}

.duration-guidance {
  color: #8f4d17;
  font-size: 9px;
  line-height: 1.4;
  margin: -2px 0 10px;
}

.booking-product-note {
  align-items: flex-start;
  background: #fff7df;
  border: 1px solid #f2d98e;
  border-radius: 10px;
  color: var(--ink);
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
}

.booking-product-note > span {
  align-items: center;
  background: var(--accent);
  border-radius: 7px;
  display: flex;
  flex: 0 0 30px;
  font-size: 9px;
  font-weight: 850;
  height: 30px;
  justify-content: center;
}

.booking-product-note p {
  font-size: 9px;
  line-height: 1.45;
  margin: 0;
}

.booking-product-note strong {
  display: block;
  font-size: 10px;
  margin-bottom: 2px;
}

.mobile-booking-bar {
  display: none;
}

.money-summary {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.money-summary > div {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.money-summary > div:not(.money-summary__total) strong {
  font-weight: 600;
}

.money-summary__total {
  border-top: 1px solid var(--line);
  font-size: 16px !important;
  margin-top: 4px;
  padding-top: 14px;
}

.panel-policy {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  margin: 13px 4px 0;
  text-align: center;
}

/* Concept B room */

.room-b {
  background: var(--ground);
}

.room-b-top {
  background: var(--night);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  min-height: 860px;
}

.room-b-gallery {
  min-height: 720px;
  overflow: hidden;
  position: relative;
}

.room-b-gallery > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.room-b-gallery::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.36), transparent 44%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.room-b-gallery > .yellow-pill {
  bottom: 108px;
  left: 28px;
  position: absolute;
  z-index: 2;
}

.room-b-thumbs {
  bottom: 24px;
  display: flex;
  gap: 8px;
  left: 28px;
  position: absolute;
  z-index: 2;
}

.room-b-thumbs button {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  height: 60px;
  overflow: hidden;
  padding: 0;
  width: 74px;
}

.room-b-thumbs button.active {
  border-color: var(--accent);
}

.room-b-thumbs img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.room-b-gallery-control {
  align-items: center;
  bottom: 28px;
  color: #fff;
  display: flex;
  gap: 8px;
  position: absolute;
  right: 28px;
  z-index: 3;
}

.room-b-gallery-control button {
  align-items: center;
  background: rgba(10, 16, 15, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.room-b-gallery-control span {
  font-size: 10px;
  min-width: 34px;
  text-align: center;
}

.room-b-book {
  align-self: start;
  max-width: 690px;
  padding: 62px 64px 72px;
}

.back-link {
  color: var(--muted);
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 30px;
}

.room-b-book h1 {
  font-size: 58px;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0 0 15px;
}

.room-b-summary {
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 560px;
}

.room-b-price {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.room-b-price > strong {
  color: var(--accent);
  font-size: 35px;
  letter-spacing: -0.04em;
}

.room-b-price > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  line-height: 1.5;
}

.availability-block {
  background: var(--paper);
  border-radius: 18px;
  color: var(--ink);
  padding: 18px;
}

.availability-block .booking-label:not(:first-child) {
  border-top: 1px solid var(--line);
  margin-top: 17px;
  padding-top: 16px;
}

.availability-block .date-strip {
  margin-bottom: 0;
}

.availability-block .duration-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.selection-receipt {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  margin: 14px 0;
  padding: 13px;
}

.selection-receipt__room {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px 1fr auto;
}

.selection-receipt__room img {
  border-radius: 8px;
  height: 48px;
  object-fit: cover;
  width: 54px;
}

.selection-receipt__room > div {
  display: flex;
  flex-direction: column;
}

.selection-receipt__room small {
  color: var(--mint);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.selection-receipt__room strong {
  font-size: 13px;
}

.selection-receipt__room span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
}

.selection-receipt__room button,
.selection-receipt__room > a {
  background: transparent;
  color: rgba(255, 255, 255, 0.64);
  font-size: 9px;
  text-decoration: underline;
}

.selection-receipt .money-summary {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 12px 0 8px;
  padding-top: 12px;
}

.selection-receipt .money-summary > div {
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
}

.selection-receipt .money-summary__total {
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  font-size: 14px !important;
}

.hold-note {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  gap: 8px;
  padding-top: 10px;
}

.hold-note > span {
  color: var(--accent);
}

.hold-note div {
  display: flex;
  flex-direction: column;
}

.hold-note strong {
  font-size: 9px;
}

.hold-note small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
}

.room-b-book .panel-policy {
  color: rgba(255, 255, 255, 0.5);
}

.room-b-confidence {
  background: var(--cream);
  display: grid;
  gap: 60px;
  grid-template-columns: 0.8fr 1.2fr;
  padding: 82px max(48px, calc((100vw - var(--content)) / 2));
}

.room-b-confidence h2 {
  font-size: 46px;
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin: 0;
}

.fit-reasons {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.fit-reasons span {
  align-items: baseline;
  background: var(--paper);
  border: 1px solid #ded9ce;
  border-radius: 14px;
  display: flex;
  font-size: 13px;
  gap: 8px;
  padding: 18px;
}

.fit-reasons b {
  color: var(--success);
  font-size: 18px;
}

.room-b-details {
  display: grid;
  gap: 70px;
  grid-template-columns: 0.85fr 1.15fr;
  margin: 0 auto;
  max-width: var(--content);
  padding: 110px 0;
}

.room-b-cross-sell {
  background: #0c1412;
  padding: 82px max(48px, calc((100vw - var(--content)) / 2));
}

.room-b-cross-sell .section-intro {
  margin-bottom: 30px;
  max-width: none;
}

.room-b-cross-sell .section-intro h2 {
  color: #fff;
  font-size: 42px;
}

.room-b-cross-sell .sibling-grid {
  gap: 18px;
}

.room-b-detail-copy h2 {
  font-size: 52px;
  letter-spacing: -0.055em;
  line-height: 1;
}

.room-b-detail-copy > p:last-child {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* Checkout */

.checkout {
  background: var(--ground);
  padding: 44px 48px 110px;
}

.checkout-progress {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto 54px;
  max-width: 720px;
}

.checkout-progress > div {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 110px;
}

.checkout-progress span {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  font-size: 10px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.checkout-progress b {
  font-size: 10px;
  font-weight: 650;
}

.checkout-progress .active {
  color: var(--ink);
}

.checkout-progress .active span {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 800;
}

.checkout-progress .done span {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.checkout-progress i {
  background: var(--line);
  height: 1px;
  margin: 0 -20px 17px;
  width: 125px;
}

.checkout-title {
  margin: 0 auto 38px;
  max-width: 1120px;
}

.checkout-title h1 {
  font-size: 54px;
  letter-spacing: -0.055em;
  line-height: 1;
  margin-bottom: 13px;
}

.checkout-title > p:last-child {
  color: var(--muted);
  font-size: 14px;
}

.checkout-title button {
  background: transparent;
  color: var(--ink);
  font-weight: 750;
  padding: 0;
  text-decoration: underline;
}

.checkout-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 672px) 416px;
  margin: 0 auto;
  max-width: 1128px;
}

.checkout-form-stack {
  display: grid;
  gap: 18px;
}

.details-form,
.payment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
}

.form-section-heading {
  align-items: center;
  display: grid;
  gap: 13px;
  grid-template-columns: auto 1fr auto;
  margin-bottom: 24px;
}

.form-section-heading > span {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.form-section-heading h2 {
  font-size: 22px;
  letter-spacing: -0.035em;
  margin: 0 0 3px;
}

.form-section-heading p {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
}

.form-section-heading > b {
  color: #635bff;
  font-size: 17px;
  letter-spacing: -0.05em;
}

.field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.field-grid label,
.signin-card label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-grid label > span,
.signin-card label > span {
  font-size: 11px;
  font-weight: 700;
}

.field-grid label small {
  color: var(--muted);
  font-weight: 500;
}

.field-grid input,
.signin-card input {
  background: #fcfcfa;
  border: 1px solid var(--line);
  border-radius: 11px;
  min-height: 52px;
  padding: 0 14px;
  width: 100%;
}

.field-span {
  grid-column: 1 / -1;
}

.stripe-mock {
  border: 1px solid #d9d9df;
  border-radius: 10px;
  display: grid;
  overflow: hidden;
}

.stripe-mock label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
}

.stripe-mock label + label,
.stripe-mock > label + div,
.stripe-mock > div + label {
  border-top: 1px solid #e4e4e8;
}

.stripe-mock > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stripe-mock > div label + label {
  border-left: 1px solid #e4e4e8;
  border-top: 0;
}

.stripe-mock span {
  color: #777780;
  font-size: 9px;
}

.stripe-mock div {
  color: #6b6b74;
  font-size: 12px;
}

.stripe-mock label > div {
  display: flex;
  justify-content: space-between;
}

.terms-check {
  align-items: flex-start;
  color: var(--muted);
  display: flex;
  font-size: 11px;
  gap: 9px;
  line-height: 1.45;
  margin-top: 17px;
}

.terms-check input {
  accent-color: var(--ink);
  height: 16px;
  margin: 1px 0 0;
  width: 16px;
}

.order-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.desktop-order .order-card {
  position: sticky;
  top: 24px;
}

.order-card__image {
  height: 180px;
}

.order-card__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.order-card__heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.order-card__heading small {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.order-card__heading h2 {
  font-size: 22px;
  letter-spacing: -0.04em;
  margin: 0;
}

.order-card__heading a {
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
}

.order-facts {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin: 0 20px;
  padding: 16px 0;
}

.order-facts > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.order-facts span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.order-facts strong {
  font-size: 12px;
}

.order-card .money-summary,
.order-card > .hold-timer,
.order-card > .panel-policy {
  margin-left: 20px;
  margin-right: 20px;
}

.hold-timer {
  align-items: center;
  background: #fff7df;
  border: 1px solid #f1d78f;
  border-radius: 11px;
  display: flex;
  gap: 10px;
  margin: 18px 0;
  padding: 12px;
}

.timer-ring {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  font-size: 16px;
  height: 35px;
  justify-content: center;
  width: 35px;
}

.hold-timer div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hold-timer strong {
  font-size: 11px;
}

.hold-timer small {
  color: var(--muted);
  font-size: 9px;
}

.hold-timer [data-timer] {
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.hold-expiry {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  margin: -8px 20px 18px;
}

.hold-expiry summary {
  color: inherit;
  cursor: pointer;
  font-weight: 750;
}

.hold-expiry p {
  margin: 7px 0 5px;
}

.hold-expiry a {
  color: inherit;
  font-weight: 750;
  text-decoration: underline;
}

.checkout-b .hold-expiry {
  color: rgba(255, 255, 255, 0.56);
}

.secure-note {
  color: var(--muted);
  font-size: 10px;
  margin: -4px 0 0;
  text-align: center;
}

.mobile-order {
  display: none;
}

.checkout-b {
  background: var(--night);
  color: #fff;
}

.checkout-b-shell {
  display: grid;
  gap: 58px;
  grid-template-columns: minmax(0, 700px) 390px;
  margin: 0 auto;
  max-width: 1148px;
}

.checkout-b-main .checkout-progress {
  justify-content: flex-start;
  margin-bottom: 26px;
}

.checkout-b .checkout-progress .active,
.checkout-b .checkout-progress .done {
  color: #fff;
}

.checkout-b .checkout-progress i {
  background: rgba(255, 255, 255, 0.18);
}

.checkout-b .checkout-title {
  margin-bottom: 26px;
}

.checkout-b .checkout-title h1 {
  color: #fff;
}

.checkout-b .checkout-title > p:last-child {
  color: rgba(255, 255, 255, 0.55);
}

.checkout-b .checkout-title button {
  color: var(--mint);
}

.combined-checkout-card {
  background: var(--paper);
  border-radius: 22px;
  color: var(--ink);
  overflow: hidden;
}

.combined-checkout-card .details-form,
.combined-checkout-card .payment-card {
  border: 0;
  border-radius: 0;
}

.payment-card--embedded {
  border-top: 1px solid var(--line) !important;
}

.final-charge {
  align-items: center;
  background: #f3f1eb;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr auto;
  padding: 20px 26px 26px;
}

.final-charge > div {
  display: flex;
  flex-direction: column;
}

.final-charge span {
  color: var(--muted);
  font-size: 10px;
}

.final-charge strong {
  font-size: 19px;
}

.checkout-b-reassurance {
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  font-size: 10px;
  gap: 20px;
  justify-content: center;
  margin-top: 18px;
}

.checkout-b .desktop-order > .hold-timer {
  margin-top: 0;
}

.order-card--b {
  background: var(--night-2);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: #fff;
}

.order-card--b .order-facts,
.order-card--b .money-summary__total {
  border-color: rgba(255, 255, 255, 0.12);
}

.order-card--b .order-facts span,
.order-card--b .order-card__heading small,
.order-card--b .panel-policy {
  color: rgba(255, 255, 255, 0.48);
}

/* Confirmation */

.confirmation {
  background: var(--ground);
  padding: 44px 48px 110px;
}

.success-heading {
  margin: 0 auto 42px;
  max-width: 760px;
  text-align: center;
}

.success-mark {
  align-items: center;
  background: #e9f7ef;
  border-radius: 50%;
  color: var(--success);
  display: flex;
  font-size: 24px;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  margin: 0 auto 20px;
  width: 54px;
}

.success-heading h1 {
  font-size: 58px;
  letter-spacing: -0.06em;
  line-height: 0.96;
  margin-bottom: 14px;
}

.success-heading > p:last-child {
  color: var(--muted);
}

.confirmation-layout {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 672px) 416px;
  margin: 0 auto;
  max-width: 1120px;
}

.confirmation-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.confirmation-card > img {
  height: 290px;
  object-fit: cover;
  width: 100%;
}

.confirmation-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.confirmation-card__body > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 110px;
  padding: 20px;
}

.confirmation-card__body > div:nth-child(even) {
  border-left: 1px solid var(--line);
}

.confirmation-card__body > div:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.confirmation-card__body span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confirmation-card__body strong {
  font-size: 15px;
}

.confirmation-card__body small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.confirmation-actions {
  align-self: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
}

.confirmation-actions h2 {
  font-size: 29px;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.confirmation-actions > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.confirmation-actions .button + .button {
  margin-top: 10px;
}

.confirmation-actions .text-link {
  margin-top: 19px;
}

.arrival-note {
  align-items: center;
  background: var(--ground);
  border-radius: 13px;
  display: flex;
  gap: 12px;
  margin-top: 26px;
  padding: 14px;
}

.arrival-note > span {
  align-items: center;
  background: var(--ink);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.arrival-note p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
}

.arrival-note strong {
  color: var(--ink);
  font-size: 12px;
}

.confirmation-policy {
  color: var(--muted);
  font-size: 11px;
  margin-top: 32px;
  text-align: center;
}

.confirmation-policy a {
  color: var(--ink);
  font-weight: 700;
}

.confirmation-b {
  background: var(--night);
  color: #fff;
  padding-top: 80px;
}

.success-band {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: auto 1fr auto;
  margin: 0 auto 48px;
  max-width: 1120px;
}

.success-mark--b {
  background: rgba(139, 216, 204, 0.14);
  color: var(--mint);
  margin: 0;
}

.success-band h1 {
  font-size: 55px;
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 0 0 8px;
}

.success-band p {
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
}

.success-total {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  text-align: right;
}

.success-total strong {
  color: var(--accent);
  font-size: 18px;
}

.confirmation-b-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 672px) 416px;
  margin: 0 auto;
  max-width: 1120px;
}

.confirmation-card--b,
.confirmation-b .confirmation-actions {
  background: var(--night-2);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.confirmation-card--b .confirmation-card__body > div {
  border-color: rgba(255, 255, 255, 0.12);
}

.confirmation-card--b .confirmation-card__body span,
.confirmation-card--b .confirmation-card__body small,
.confirmation-b .confirmation-actions > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.52);
}

.confirmation-b .button--outline {
  border-color: rgba(255, 255, 255, 0.2);
}

.confirmation-b .arrival-note {
  background: rgba(255, 255, 255, 0.06);
}

.confirmation-b .arrival-note strong {
  color: #fff;
}

.confirmation-b .arrival-note > span {
  background: var(--mint);
  color: var(--night);
}

.arrival-timeline {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;
  margin: 70px auto 0;
  max-width: 1120px;
}

.arrival-timeline > div {
  align-items: center;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: auto 1fr;
}

.arrival-timeline > div > span {
  align-items: center;
  background: rgba(139, 216, 204, 0.16);
  border-radius: 50%;
  color: var(--mint);
  display: flex;
  grid-row: 1 / 3;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.arrival-timeline strong {
  font-size: 11px;
}

.arrival-timeline p {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  margin: 0;
}

.arrival-timeline i {
  background: rgba(255, 255, 255, 0.16);
  height: 1px;
}

/* Member */

.member {
  background: var(--ground);
  padding: 70px max(48px, calc((100vw - var(--content)) / 2)) 120px;
}

.member-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 62px;
}

.member-heading h1 {
  font-size: 56px;
  letter-spacing: -0.055em;
  line-height: 1;
  margin-bottom: 12px;
}

.member-heading p:last-child {
  color: var(--muted);
  margin: 0;
}

.member-section + .member-section {
  margin-top: 72px;
}

.member-section__heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.member-section__heading h2 {
  font-size: 32px;
  letter-spacing: -0.045em;
  margin: 0;
}

.member-section__heading > small,
.member-section__heading > a,
.member-section__heading > button {
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.allowance-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.allowance-grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
}

.allowance-grid article > div:first-child {
  display: flex;
  justify-content: space-between;
}

.allowance-grid article > div:first-child span {
  font-size: 12px;
  font-weight: 750;
}

.allowance-grid article > div:first-child b {
  color: var(--muted);
  font-size: 9px;
}

.allowance-grid article > strong {
  display: flex;
  font-size: 42px;
  gap: 8px;
  letter-spacing: -0.05em;
  margin: 24px 0 16px;
}

.allowance-grid article > strong small {
  align-self: end;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.3;
  padding-bottom: 6px;
}

.allowance-bar {
  background: var(--line);
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}

.allowance-bar i {
  background: var(--accent);
  display: block;
  height: 100%;
}

.allowance-grid article > a {
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  margin-top: 18px;
}

.allowance-grid .plan-card {
  background: var(--ink);
  color: #fff;
}

.plan-card > p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 0;
}

.member-columns {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr);
  margin-top: 72px;
}

.booking-list {
  display: grid;
  gap: 10px;
}

.booking-list article {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: 100px 1fr auto auto;
  padding: 10px;
}

.booking-list img {
  border-radius: 9px;
  height: 74px;
  object-fit: cover;
  width: 100px;
}

.booking-list article > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.booking-list small,
.booking-list span {
  color: var(--muted);
  font-size: 10px;
}

.booking-list strong {
  font-size: 15px;
}

.booking-list button {
  background: transparent;
  font-size: 11px;
  font-weight: 750;
  padding: 12px;
}

.status-pill {
  background: #eaf7ef;
  border-radius: 999px;
  color: var(--success) !important;
  font-size: 9px !important;
  font-weight: 800;
  padding: 7px 9px;
  text-transform: uppercase;
}

.status-pill--mint {
  background: rgba(139, 216, 204, 0.16);
  color: var(--mint) !important;
}

.account-card {
  align-self: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
}

.account-card > div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr auto;
  padding: 15px 0;
}

.account-card > div span {
  color: var(--muted);
  font-size: 9px;
  grid-column: 1 / -1;
  text-transform: uppercase;
}

.account-card > div strong {
  font-size: 12px;
}

.account-card > div a {
  font-size: 10px;
  text-decoration: underline;
}

.account-card > button {
  background: transparent;
  font-size: 11px;
  font-weight: 750;
  padding: 10px 0 0;
}

.history-section {
  margin-top: 72px;
}

.history-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.history-table > div {
  align-items: center;
  display: grid;
  font-size: 12px;
  gap: 20px;
  grid-template-columns: 1fr 1fr 120px auto;
  min-height: 62px;
  padding: 0 18px;
}

.history-table > div + div {
  border-top: 1px solid var(--line);
}

.history-table > div span:nth-child(2),
.history-table > div span:nth-child(3) {
  color: var(--muted);
}

.history-table button {
  background: transparent;
  font-size: 10px;
  font-weight: 750;
}

.member-b {
  background: var(--night);
  color: #fff;
  padding-top: 80px;
}

.member-b-hero {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 54px;
}

.member-b-hero h1 {
  font-size: 64px;
  letter-spacing: -0.06em;
  line-height: 0.94;
  margin: 0;
}

.next-booking {
  align-items: stretch;
  background: var(--night-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  display: grid;
  gap: 22px;
  grid-template-columns: 250px 1fr auto;
  overflow: hidden;
  padding-right: 24px;
}

.next-booking > img {
  height: 180px;
  object-fit: cover;
  width: 250px;
}

.next-booking > div:nth-child(2) {
  align-self: center;
}

.next-booking > div:nth-child(2) > p {
  color: var(--mint);
  font-size: 11px;
  margin: 9px 0 5px;
}

.next-booking h2 {
  font-size: 26px;
  letter-spacing: -0.04em;
  margin: 0 0 6px;
}

.next-booking small {
  color: rgba(255, 255, 255, 0.5);
}

.next-booking__actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.next-booking__actions button {
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 700;
  padding: 8px;
}

.member-section--dark {
  margin-top: 66px;
}

.member-b .member-section__heading > small {
  color: rgba(255, 255, 255, 0.46);
}

.member-b .allowance-grid article {
  background: var(--night-2);
  border-color: rgba(255, 255, 255, 0.12);
}

.member-b .allowance-grid article > div:first-child b,
.member-b .allowance-grid article > strong small,
.member-b .plan-card > p {
  color: rgba(255, 255, 255, 0.46);
}

.member-b .allowance-bar {
  background: rgba(255, 255, 255, 0.13);
}

.member-b .allowance-bar i {
  background: var(--mint);
}

.member-b .allowance-grid .plan-card {
  background: var(--cream);
  color: var(--night);
}

.member-b .allowance-grid .plan-card > div:first-child b,
.member-b .allowance-grid .plan-card > p {
  color: var(--muted);
}

.member-b-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.6fr 0.8fr;
  margin-top: 70px;
}

.member-b .booking-list article {
  background: var(--night-2);
  border-color: rgba(255, 255, 255, 0.12);
}

.member-quick {
  background: var(--night-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px;
}

.member-quick a {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  padding: 17px 0;
}

.member-quick a > span {
  align-items: center;
  background: rgba(139, 216, 204, 0.12);
  border-radius: 10px;
  color: var(--mint);
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.member-quick a > div {
  display: flex;
  flex-direction: column;
}

.member-quick small,
.member-quick b {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
}

/* Modal and toast */

.signin-modal {
  inset: 0;
  position: fixed;
  z-index: 120;
}

.modal-backdrop {
  background: rgba(7, 10, 9, 0.66);
  inset: 0;
  position: absolute;
  width: 100%;
}

.signin-card {
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  left: 50%;
  max-width: calc(100% - 40px);
  padding: 30px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
}

.signin-card h2 {
  font-size: 32px;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-bottom: 14px;
}

.signin-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.signin-card label {
  margin: 22px 0 14px;
}

.signin-card [data-signin-email-step] > small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  margin-top: 12px;
  text-align: center;
}

.code-sent {
  color: var(--muted);
  font-size: 12px;
  margin-top: 18px;
}

.text-button {
  background: transparent;
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin: 12px auto 0;
  text-decoration: underline;
}

.modal-close {
  align-items: center;
  background: var(--ground);
  border-radius: 50%;
  display: flex;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  position: absolute;
  right: 15px;
  top: 15px;
  width: 44px;
}

.site-toast {
  background: var(--ink);
  border-radius: 999px;
  bottom: 24px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  left: 50%;
  padding: 12px 18px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 150;
}

/* Mobile */

@media (max-width: 760px) {
  .eyebrow {
    font-size: 10px;
  }

  .review-header {
    height: 64px;
    padding: 0 20px;
  }

  .review-header .brand {
    font-size: 14px;
  }

  .review-header .brand img {
    height: 27px;
    width: 27px;
  }

  .review-meta {
    font-size: 10px;
  }

  .review-main {
    padding: 48px 16px 64px;
  }

  .review-intro h1 {
    font-size: 46px;
    line-height: 0.96;
  }

  .review-intro > p:last-child {
    font-size: 16px;
  }

  .concept-grid {
    grid-template-columns: 1fr;
    margin-top: 46px;
  }

  .concept-preview {
    height: 410px;
  }

  .concept-preview__overlay {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }

  .concept-preview__overlay > strong {
    font-size: 35px;
  }

  .mini-booker {
    grid-template-columns: 1fr auto;
  }

  .mini-booker span:nth-child(2) {
    display: none;
  }

  .guided-panel {
    bottom: 14px;
    left: 14px;
    right: 14px;
  }

  .concept-copy {
    padding: 22px;
  }

  .review-note {
    grid-template-columns: 1fr;
  }

  .review-footer {
    flex-direction: column;
    gap: 7px;
    padding: 0 16px 24px;
  }

  .site-header {
    height: 56px;
    padding: 0 16px;
    position: sticky;
  }

  .site-header .brand {
    font-size: 14px;
  }

  .site-header .brand img {
    height: 27px;
    width: 27px;
  }

  .desktop-nav,
  .header-actions {
    display: none;
  }

  .mobile-menu {
    display: flex;
  }

  .site-header--b + .mobile-drawer {
    background: var(--night-2);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .site-header--b + .mobile-drawer a,
  .site-header--b + .mobile-drawer button {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .site-footer {
    gap: 28px;
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }

  .section-intro {
    margin-bottom: 42px;
    text-align: left;
  }

  .section-intro h2 {
    font-size: 38px;
  }

  .section-intro > p:last-child {
    font-size: 15px;
  }

  .hero--home-a {
    height: 430px;
  }

  .hero-shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.03) 80%);
  }

  .hero-copy {
    margin: 0 20px;
    padding-bottom: 44px;
  }

  .hero-copy h1 {
    font-size: 41px;
    line-height: 0.98;
    margin-bottom: 16px;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .quick-book {
    border-radius: 16px;
    margin: -10px 12px 0;
    padding: 14px;
  }

  .quick-book--a {
    grid-template-columns: 1fr;
  }

  .quick-time {
    display: none !important;
  }

  .quick-book select,
  .quick-book .field-button,
  .quick-book .button {
    min-height: 49px;
  }

  .room-index {
    padding: 78px 14px 72px;
  }

  .room-group + .room-group {
    margin-top: 70px;
  }

  .group-heading {
    align-items: start;
    margin-bottom: 17px;
  }

  .group-heading h2 {
    font-size: 24px;
    max-width: 270px;
  }

  .group-heading > span {
    font-size: 10px;
  }

  .room-grid {
    gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .room-card {
    border-radius: 14px;
  }

  .room-card__image {
    height: 140px;
  }

  .room-card__body {
    padding: 13px;
  }

  .room-card__top {
    display: block;
  }

  .room-card h3 {
    font-size: 16px;
  }

  .room-card .price-pill {
    margin-top: 9px;
  }

  .room-meta {
    font-size: 10px;
    margin: 8px 0 0;
  }

  .room-description {
    display: none;
  }

  .room-card--guided .room-description {
    display: -webkit-box;
    font-size: 10px;
    line-height: 1.35;
    min-height: 27px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .room-link {
    font-size: 10px;
    margin-top: 14px;
  }

  .photo-band {
    height: 440px;
  }

  .photo-band > div {
    left: 20px;
    right: 20px;
  }

  .photo-band h2 {
    font-size: 39px;
  }

  .trust-strip,
  .trust-strip--wide,
  .trust-strip--dark {
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
  }

  .trust-strip > div {
    font-size: 10px;
    min-height: 66px;
    padding: 10px 12px;
  }

  .trust-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .trust-strip > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .trust-strip--dark > div:nth-child(3),
  .trust-strip--dark > div:nth-child(4) {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .trust-strip > div strong {
    line-height: 1.3;
  }

  .hero--home-b {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 24px 16px 52px;
  }

  .hero-b-copy {
    padding: 0 4px;
  }

  .hero-b-copy h1 {
    font-size: 44px;
    line-height: 0.92;
    margin-bottom: 18px;
  }

  .hero-b-copy > p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-b-proof {
    gap: 8px 16px;
    margin-top: 16px;
  }

  .guided-booker {
    border-radius: 20px;
    padding: 20px;
  }

  .guided-booker__top {
    margin-bottom: 18px;
  }

  .guided-booker h2 {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .intent-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intent-selector button {
    min-height: 74px;
  }

  .guided-fields {
    gap: 8px;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  }

  .guided-reassurance {
    align-items: center;
    flex-direction: column;
    gap: 4px;
  }

  .hero-b-image {
    height: 150px;
    left: 0;
    position: relative;
    right: 0;
    width: 100%;
  }

  .fast-choice {
    padding: 70px 16px;
  }

  .section-intro--split {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .category-filter {
    max-width: 100%;
    overflow-x: auto;
  }

  .category-filter button {
    flex: 0 0 auto;
  }

  .guided-room-grid {
    grid-template-columns: 1fr;
  }

  .room-card--guided > a {
    display: grid;
    grid-template-columns: 112px 1fr;
    min-height: 128px;
  }

  .room-card--guided .room-card__image {
    height: 100%;
    min-height: 128px;
  }

  .room-card--guided .room-card__body {
    align-self: center;
  }

  .room-card--guided .price-pill {
    margin-top: 6px;
  }

  .fit-tag {
    font-size: 8px;
    left: 7px;
    padding: 5px 7px;
    top: 7px;
  }

  .decision-proof {
    display: flex;
    flex-direction: column;
  }

  .decision-proof__image {
    height: 280px;
  }

  .decision-proof__copy {
    padding: 50px 20px;
  }

  .decision-proof h2 {
    font-size: 41px;
  }

  .room-hero--a {
    height: 390px;
  }

  .room-hero__copy {
    bottom: 40px;
    left: 20px;
    max-width: 330px;
  }

  .room-hero__copy h1 {
    font-size: 43px;
    margin: 13px 0;
  }

  .room-hero__copy p {
    font-size: 12px;
  }

  .room-hero__copy .yellow-pill {
    font-size: 8px;
    max-width: 305px;
  }

  .gallery-control {
    bottom: 15px;
    right: 14px;
  }

  .gallery-control button {
    height: 44px;
    width: 44px;
  }

  .month-nav {
    grid-template-columns: 44px 1fr 44px;
  }

  .month-nav button {
    height: 44px;
    width: 44px;
  }

  .room-layout {
    display: block;
    padding: 12px 12px 70px;
  }

  .hero-booking-slot {
    display: none;
  }

  .desktop-booking-slot {
    display: none;
  }

  .mobile-booking-slot {
    display: block;
    margin-bottom: 62px;
  }

  .booking-panel {
    border-radius: 16px;
    padding: 16px;
  }

  .mobile-booking-bar {
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line);
    bottom: 0;
    box-shadow: 0 -14px 36px rgba(11, 17, 16, 0.16);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    left: 0;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 90;
  }

  .mobile-booking-bar[hidden] {
    display: none;
  }

  .mobile-booking-bar > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mobile-booking-bar small {
    color: var(--muted);
    font-size: 8px;
  }

  .mobile-booking-bar strong {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-booking-bar .button {
    font-size: 12px;
    min-height: 52px;
    padding-inline: 14px;
  }

  body[data-screen="room"] .site-footer {
    padding-bottom: 100px;
  }

  .booking-panel__heading h2 {
    font-size: 21px;
  }

  .booking-panel .date-strip {
    overflow-x: auto;
  }

  .booking-panel .date-strip button {
    min-width: 58px;
  }

  .time-grid {
    grid-template-columns: 1fr 1fr;
  }

  .time-grid button {
    min-height: 48px;
  }

  .room-details > .eyebrow,
  .room-details > h2,
  .room-details > .room-lead,
  .room-details > .detail-facts,
  .room-details > .details-section,
  .room-details > .trust-strip {
    margin-left: 8px;
    margin-right: 8px;
  }

  .room-details > h2,
  .details-section > h2 {
    font-size: 34px;
  }

  .room-lead {
    font-size: 15px;
  }

  .detail-facts {
    grid-template-columns: 1fr;
    margin-bottom: 56px !important;
  }

  .detail-facts > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .details-section {
    margin-top: 62px !important;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    gap: 8px;
  }

  .gallery-grid button {
    height: 128px;
  }

  .sibling-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .sibling-grid .room-card {
    flex: 0 0 284px;
    scroll-snap-align: start;
  }

  .room-b-top {
    display: block;
    min-height: 0;
  }

  .room-b-gallery {
    height: 268px;
    min-height: 0;
  }

  .room-b-gallery > .yellow-pill {
    bottom: 18px;
    left: 16px;
    font-size: 8px;
  }

  .room-b-thumbs {
    display: none;
  }

  .room-b-gallery-control {
    bottom: 14px;
    right: 14px;
  }

  .room-b-gallery-control button {
    height: 44px;
    width: 44px;
  }

  .room-b-book {
    padding: 28px 16px 48px;
  }

  .room-b-book .back-link {
    margin-bottom: 20px;
  }

  .room-b-book h1 {
    font-size: 42px;
  }

  .room-b-summary {
    font-size: 13px;
  }

  .availability-block {
    margin-inline: -4px;
    padding: 16px;
  }

  .availability-block .date-strip {
    overflow-x: auto;
  }

  .availability-block .date-strip button {
    min-width: 58px;
  }

  .duration-row--b {
    align-items: flex-start;
  }

  .selection-receipt__room {
    grid-template-columns: 48px 1fr;
  }

  .selection-receipt__room > button {
    display: none;
  }

  .room-b-confidence {
    grid-template-columns: 1fr;
    padding: 58px 20px;
  }

  .room-b-confidence h2 {
    font-size: 38px;
  }

  .fit-reasons {
    grid-template-columns: 1fr 1fr;
  }

  .fit-reasons span {
    align-items: flex-start;
    flex-direction: column;
  }

  .room-b-details {
    grid-template-columns: 1fr;
    padding: 70px 16px;
  }

  .room-b-cross-sell {
    padding: 64px 16px;
  }

  .room-b-cross-sell .section-intro h2 {
    font-size: 34px;
  }

  .room-b-detail-copy h2 {
    font-size: 41px;
  }

  .checkout {
    padding: 28px 16px 70px;
  }

  .checkout-progress {
    margin-bottom: 32px;
  }

  .checkout-progress > div {
    min-width: 70px;
  }

  .checkout-progress b {
    font-size: 8px;
  }

  .checkout-progress i {
    margin-inline: -8px;
    width: 60px;
  }

  .checkout-title h1 {
    font-size: 40px;
  }

  .checkout-layout,
  .checkout-b-shell {
    display: block;
  }

  .desktop-order {
    display: none;
  }

  .mobile-order {
    display: block;
  }

  .order-card {
    margin-bottom: 18px;
  }

  .order-card__image {
    height: 140px;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .field-span {
    grid-column: auto;
  }

  .details-form,
  .payment-card {
    padding: 20px 16px;
  }

  .stripe-mock > div {
    grid-template-columns: 1fr 1fr;
  }

  .checkout-b .checkout-progress {
    justify-content: center;
  }

  .checkout-b .back-link {
    margin-bottom: 22px;
  }

  .checkout-b .checkout-title h1 {
    color: #fff;
  }

  .combined-checkout-card {
    border-radius: 18px;
  }

  .final-charge {
    grid-template-columns: 1fr;
  }

  .final-charge .button {
    width: 100%;
  }

  .checkout-b-reassurance {
    align-items: center;
    flex-direction: column;
    gap: 6px;
  }

  .confirmation {
    padding: 30px 16px 70px;
  }

  .success-heading {
    text-align: left;
  }

  .success-heading .success-mark {
    margin-left: 0;
  }

  .success-heading h1 {
    font-size: 45px;
  }

  .confirmation-layout,
  .confirmation-b-grid {
    grid-template-columns: 1fr;
  }

  .confirmation-card > img {
    height: 196px;
  }

  .confirmation-card__body {
    grid-template-columns: 1fr;
  }

  .confirmation-card__body > div {
    min-height: 94px;
  }

  .confirmation-card__body > div:nth-child(even) {
    border-left: 0;
  }

  .confirmation-card__body > div + div {
    border-top: 1px solid var(--line);
  }

  .confirmation-b {
    padding-top: 50px;
  }

  .success-band {
    align-items: start;
    grid-template-columns: auto 1fr;
    margin-bottom: 34px;
  }

  .success-band h1 {
    font-size: 41px;
  }

  .success-total {
    grid-column: 2;
    text-align: left;
  }

  .confirmation-card--b .confirmation-card__body > div + div {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .arrival-timeline {
    align-items: start;
    grid-template-columns: 1fr;
    margin-top: 50px;
  }

  .arrival-timeline i {
    height: 26px;
    margin-left: 18px;
    width: 1px;
  }

  .member {
    padding: 48px 16px 80px;
  }

  .member-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
  }

  .member-heading h1 {
    font-size: 43px;
  }

  .member-section__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .member-section__heading h2 {
    font-size: 28px;
  }

  .allowance-grid {
    grid-template-columns: 1fr;
  }

  .member-columns,
  .member-b-grid {
    grid-template-columns: 1fr;
  }

  .booking-list article {
    align-items: start;
    gap: 10px;
    grid-template-columns: 82px 1fr auto;
  }

  .booking-list img {
    height: 66px;
    width: 82px;
  }

  .booking-list .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .booking-list button {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .history-table > div {
    align-items: start;
    grid-template-columns: 1fr auto;
    padding-block: 14px;
  }

  .history-table > div span:nth-child(2),
  .history-table > div span:nth-child(3) {
    grid-column: 1;
  }

  .history-table > div button {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .member-b {
    padding-top: 54px;
  }

  .member-b-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .member-b-hero h1 {
    font-size: 44px;
  }

  .next-booking {
    grid-template-columns: 1fr;
    padding: 0 0 18px;
  }

  .next-booking > img {
    height: 190px;
    width: 100%;
  }

  .next-booking > div {
    padding-inline: 18px;
  }

  .next-booking__actions {
    align-items: flex-start;
  }

  .member-b .allowance-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .member-b .allowance-grid article {
    flex: 0 0 300px;
    scroll-snap-align: start;
  }

  .signin-card {
    padding: 25px 20px;
  }
}

/* Reserve refinement pass */

.skip-link {
  background: var(--ink);
  border-radius: 0 0 10px 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  left: 16px;
  padding: 12px 16px;
  position: fixed;
  top: 0;
  transform: translateY(-120%);
  transition: transform 160ms ease;
  z-index: 200;
}

.skip-link:focus {
  transform: translateY(0);
}

body[data-concept="a"] .desktop-nav a,
body[data-concept="a"] .header-signin,
body[data-concept="a"] .button--small {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

body[data-concept="a"] .feature-card__toggle,
body[data-concept="a"] .text-button {
  min-height: 44px;
}

body[data-concept="a"] .desktop-nav a[aria-current="page"] {
  color: var(--ink);
}

body[data-concept="a"] .quick-book--a {
  grid-template-columns: minmax(0, 1.5fr) minmax(190px, 0.85fr) auto;
}

.quick-book .field-input {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  min-height: 50px;
  padding: 0 14px;
  width: 100%;
}

.booking-steps {
  margin: 0 auto;
  max-width: var(--content);
  padding: 120px 0 12px;
}

.booking-steps .section-intro {
  margin-bottom: 48px;
}

.booking-steps__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-steps__grid article {
  background: #f5f4f1;
  border: 1px solid var(--line);
  border-radius: 22px;
  min-height: 230px;
  padding: 28px;
}

.booking-steps__grid article > span {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 750;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.booking-steps__grid h3 {
  font-size: 23px;
  letter-spacing: -0.035em;
  margin: 46px 0 10px;
}

.booking-steps__grid p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

body[data-concept="a"] .room-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 912px;
  padding-inline: 48px;
}

body[data-concept="a"] .gallery-control {
  bottom: 32px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 5;
}

.gallery-grid figure {
  border-radius: 14px;
  height: 260px;
  margin: 0;
  overflow: hidden;
}

.gallery-grid figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body[data-concept="a"] .month-nav {
  grid-template-columns: 44px 1fr 44px;
}

body[data-concept="a"] .month-nav button {
  height: 44px;
  width: 44px;
}

body[data-concept="a"] .calendar-field small,
body[data-concept="a"] .month-nav small,
body[data-concept="a"] .date-strip span,
body[data-concept="a"] .date-strip small,
body[data-concept="a"] .booking-label small,
body[data-concept="a"] .time-grid button small,
body[data-concept="a"] .duration-picker > span small,
body[data-concept="a"] .day-pass-choice small,
body[data-concept="a"] .booking-range-summary span,
body[data-concept="a"] .duration-guidance,
body[data-concept="a"] .booking-product-note p {
  font-size: 10px;
}

body[data-concept="a"] .booking-range-summary strong,
body[data-concept="a"] .booking-product-note strong,
body[data-concept="a"] .panel-policy {
  font-size: 11px;
}

.stripe-mock input,
.stripe-mock select {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  min-height: 28px;
  outline: 0;
  padding: 0;
  width: 100%;
}

.stripe-mock label:focus-within {
  box-shadow: inset 0 0 0 2px rgba(23, 23, 23, 0.18);
}

.member-gate {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 680px;
}

.member-gate > section {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  max-width: 620px;
}

.member-gate h1 {
  font-size: clamp(48px, 6vw, 78px);
  letter-spacing: -0.06em;
  line-height: 0.98;
  margin: 0;
}

.member-gate > section > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  margin: 24px 0 30px;
}

.member-gate .text-link {
  margin-top: 20px;
}

@media (min-width: 761px) and (max-width: 1199px) {
  body[data-concept="a"] .room-hero--a {
    height: 560px;
  }

  body[data-concept="a"] .hero-booking-slot {
    display: none;
  }

  body[data-concept="a"] .room-layout {
    display: block;
    max-width: 912px;
    padding: 0 48px 100px;
  }

  body[data-concept="a"] .mobile-booking-slot {
    display: block;
    margin: -72px auto 72px;
    max-width: 720px;
    position: relative;
    z-index: 5;
  }

  body[data-concept="a"] .calendar-popover {
    left: 50%;
    max-width: 430px;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body[data-concept="a"] .checkout-layout {
    display: block;
    max-width: 720px;
  }

  body[data-concept="a"] .desktop-order {
    display: none;
  }

  body[data-concept="a"] .mobile-order {
    display: block;
  }

  body[data-concept="a"] .mobile-order .order-card {
    margin-bottom: 18px;
  }

  body[data-concept="a"] .confirmation-layout {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}

@media (min-width: 1200px) and (max-height: 800px) {
  body[data-concept="a"] .room-hero--a {
    height: calc(100vh - 72px);
    min-height: 648px;
  }

  body[data-concept="a"] .hero-booking-slot {
    top: 12px;
  }

  body[data-concept="a"] .hero-booking-slot .booking-panel {
    padding: 12px 16px;
  }

  body[data-concept="a"] .hero-booking-slot .booking-panel__heading {
    margin-bottom: 8px;
  }

  body[data-concept="a"] .hero-booking-slot .calendar-field {
    min-height: 46px;
  }

  body[data-concept="a"] .hero-booking-slot .month-nav {
    margin-top: 6px;
  }

  body[data-concept="a"] .hero-booking-slot .date-strip {
    margin: 6px 0 8px;
  }

  body[data-concept="a"] .hero-booking-slot .date-strip button {
    min-height: 50px;
  }

  body[data-concept="a"] .hero-booking-slot .duration-picker {
    margin-top: 6px;
    padding-top: 6px;
  }

  body[data-concept="a"] .hero-booking-slot .time-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-concept="a"] .hero-booking-slot .booking-range-summary {
    margin-top: 6px;
    padding-block: 6px;
  }

  body[data-concept="a"] .hero-booking-slot .money-summary > div:not(.money-summary__total) {
    display: none;
  }

  body[data-concept="a"] .hero-booking-slot .money-summary {
    margin: 6px 0;
  }

  body[data-concept="a"] .hero-booking-slot .money-summary__total {
    margin-top: 0;
    padding-top: 6px;
  }
}

@media (max-width: 760px) {
  body[data-concept="a"] .quick-book--a {
    grid-template-columns: 1fr;
  }

  .booking-steps {
    padding: 76px 14px 0;
  }

  .booking-steps__grid {
    grid-template-columns: 1fr;
  }

  .booking-steps__grid article {
    min-height: 0;
    padding: 22px;
  }

  .booking-steps__grid h3 {
    margin-top: 30px;
  }

  body[data-concept="a"] .gallery-control {
    bottom: 15px;
    left: auto;
    right: 14px;
    transform: none;
  }

  body[data-concept="a"] .room-layout {
    padding-inline: 12px;
  }

  body[data-concept="a"] .calendar-popover {
    left: 50%;
    padding: 10px;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
  }

  body[data-concept="a"] .calendar-popover__weekdays,
  body[data-concept="a"] .calendar-popover__grid {
    gap: 3px;
  }

  body[data-concept="a"] .mobile-booking-slot .booking-panel > [data-checkout-link] {
    display: none;
  }

  body[data-concept="a"].calendar-popover-open .mobile-booking-bar {
    display: none !important;
  }

  body[data-concept="a"] .mobile-booking-bar small {
    font-size: 10px;
  }

  body[data-concept="a"] .mobile-booking-bar strong {
    font-size: 12px;
  }

  body[data-concept="a"] .room-meta,
  body[data-concept="a"] .room-link,
  body[data-concept="a"] .trust-strip > div {
    font-size: 12px;
  }

  body[data-concept="a"] .site-header .brand,
  body[data-concept="a"] .checkout-title button,
  body[data-concept="a"] .order-card__heading a,
  body[data-concept="a"] .confirmation-actions .text-link,
  body[data-concept="a"] .allowance-grid article > a,
  body[data-concept="a"] .site-footer a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .gallery-grid figure {
    height: 128px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .checkout-progress,
  .confirmation-actions button,
  .confirmation-actions .text-link,
  .site-toast {
    display: none !important;
  }

  .confirmation {
    padding: 24px !important;
  }

  .confirmation-layout {
    display: block !important;
  }

  .confirmation-actions {
    border: 0 !important;
    box-shadow: none !important;
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Mobile polish — Vladimir's review, 2026-07-24.
   Additive overrides only: none of Codex's rules above are edited, so this
   block can be deleted to revert exactly to the approved design.
   ========================================================================== */

/* 1. "Got it to unstick" — the booking bar is position:fixed but nothing
      reserved space for it, so it sat on top of the price rows and the
      cancellation note. Reserve its height at the end of the page. */
@media (max-width: 900px) {
  body.booking-page {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* 2. "Padding" — a flex child defaults to min-width:auto, so this callout's
      second line could not shrink and spilled outside its box. Let it wrap,
      and top-align the icon now that the copy is genuinely two lines. */
.hold-timer {
  align-items: flex-start;
  padding: 14px;
}
.hold-timer > div {
  min-width: 0;
}
.hold-timer strong,
.hold-timer small {
  overflow-wrap: anywhere;
}

/* 3. "Awkward near the bevels" — give the fixed bar the same horizontal
      breathing room as the cards, and respect rounded-corner insets. */
@media (max-width: 640px) {
  .mobile-booking-bar {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* ==========================================================================
   Start-time sheet — Apple-style progressive disclosure (Fahad, 2026-07-24).
   30-minute granularity produced 28 buttons; the inventory is unchanged but
   now sits behind one control, grouped by part of day.
   ========================================================================== */

.time-control {
  position: relative;
}

.time-field .is-placeholder {
  color: #8a8578;
}

.time-sheet {
  background: #fff;
  border: 1px solid var(--line, #e6e2d8);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.16);
  margin-top: 8px;
  overflow: hidden;
  z-index: 40;
}

.time-sheet__header {
  align-items: center;
  border-bottom: 1px solid var(--line, #e6e2d8);
  display: flex;
  justify-content: space-between;
  padding: 14px 16px 12px;
}

.time-sheet__header strong { font-size: 15px; }

.time-sheet__header button {
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  height: 32px;
  width: 32px;
}
.time-sheet__header button:hover { background: #f2efe7; }

.time-sheet__meta {
  color: #8a8578;
  font-size: 12px;
  margin: 0;
  padding: 10px 16px 0;
}

.time-sheet__body {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 4px 16px 16px;
  -webkit-overflow-scrolling: touch;
}

.time-sheet__group { margin-top: 14px; }

.time-sheet__group h4 {
  align-items: baseline;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.time-sheet__group h4 span {
  color: #8a8578;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.time-sheet__group[data-empty="true"] { opacity: 0.45; }

/* On phones the sheet becomes a true bottom sheet: thumb-reachable, and it
   never gets clipped by the booking panel's own scroll area. */
@media (max-width: 640px) {
  .time-sheet {
    border-radius: 20px 20px 0 0;
    bottom: 0;
    left: 0;
    margin: 0;
    max-height: 82vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    right: 0;
    z-index: 90;
  }
  .time-sheet__body { max-height: 58vh; }
  body.time-sheet-open { overflow: hidden; }
  body.time-sheet-open::after {
    background: rgba(17, 17, 17, 0.42);
    content: "";
    inset: 0;
    position: fixed;
    z-index: 80;
  }
  /* the bottom booking bar must not sit on top of the sheet */
  body.time-sheet-open .mobile-booking-bar { display: none; }
}

/* ---- real Stripe embed + checkout errors (step 3) ---------------------- */
.stripe-embed { margin-top: 14px; min-height: 220px; }
.checkout-error {
  background: #fdecec;
  border-radius: 10px;
  color: #b42318;
  font-size: 13px;
  margin: 12px 0 0;
  padding: 10px 12px;
}
.eyebrow--warn { color: #b42318 !important; }

/* ==========================================================================
   Visual hierarchy — Vladimir, 2026-07-24. One decision is primary at a time:
   until a start time exists, the total and Continue are not yet the
   customer's business, so they recede instead of competing for attention.
   ========================================================================== */
.booking-panel--a[data-stage="needs-time"] .money-summary,
.booking-panel--a[data-stage="needs-time"] .panel-policy {
  opacity: 0.45;
  transition: opacity 180ms ease;
}
.booking-panel--a[data-stage="needs-time"] [data-checkout-link] {
  background: #f1eee6;
  box-shadow: none;
  color: #a8a293;
  pointer-events: none;
}
.booking-panel--a[data-stage="ready"] .money-summary {
  opacity: 1;
}
/* and once a time is chosen, the time field reads as satisfied */
.booking-panel--a[data-stage="ready"] .time-field {
  border-color: #111;
}

/* ---- live member account ------------------------------------------------
   The account screen paints into the shared .member-section/.allowance-grid/
   .history-table/.account-card blocks defined above, so it inherits the same
   type and rhythm as the rest of the site. Only the states those blocks have
   no opinion about live here. */
.member-empty { color: #8a8578; font-size: 14px; margin: 8px 0; }
.member-empty .text-link { font-size: inherit; }

/* A cancelled booking still belongs in the history — it just must never be
   mistaken for one that is going ahead. */
.history-cancelled {
  color: #8a8578; font-size: 11.5px; font-style: normal; letter-spacing: 0.04em;
  margin-left: 6px; text-transform: uppercase;
}
.history-table a { color: inherit; }

/* Receipt/PDF links push the third column wide on a phone; let it wrap rather
   than force the row into a horizontal scroll. */
@media (max-width: 640px) {
  .history-table > div { gap: 2px; }
  .history-table > div span:nth-child(3) { white-space: normal; }
}

/* The privacy disclosure spans the whole footer rather than becoming a fifth
   column in its 1.7fr+3 grid, which would have squeezed the other four.
   Quiet, but legible — a notice nobody can read is not a notice. */
.footer-privacy {
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  color: #6f6a5f;
  font-size: 12px;
  grid-column: 1 / -1;
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 78ch;
  padding-top: 22px;
}
[data-concept="b"] .footer-privacy {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.62);
}

/* The allowance grid was fixed at three columns, built when its contents were
   three sample cards. Real allowances come from comp.ALLOW, and a private
   office member has FOUR (huddle, boardroom, podcast, relaxation) — which the
   three-column grid laid out as 3 + 1 orphan for the most common member tier.
   The plan decides the count, so let the count decide the columns. Below
   760px the base stylesheet collapses this to one column and still wins. */
@media (min-width: 761px) and (max-width: 1179px) {
  .allowance-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .allowance-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .allowance-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four across leaves each card too narrow for the headline's number-and-
   caption flex ROW: "1 h 45 m" wrapped, which made that one card's bar and
   link sit lower than its neighbours'. Stack the caption under the number
   at this count, and pin the bar to the card's bottom so a headline of any
   length still leaves every card in the row aligned. */
.allowance-grid[data-count="4"] article {
  display: flex;
  flex-direction: column;
}
.allowance-grid[data-count="4"] article > .allowance-bar { margin-top: auto; }
.allowance-grid[data-count="4"] article > strong {
  display: block;
  margin-bottom: 14px;
}
.allowance-grid[data-count="4"] article > strong small {
  display: block;
  margin-top: 6px;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------- round 4
   Month grid, peer-field length control, and the date/time confirmation that
   replaced the price breakdown above Continue. Appended last so these win
   over the earlier concept-scoped sizing without editing those blocks. */

.month-cal {
  margin-top: 12px;
}

.month-cal .month-nav {
  grid-template-columns: 32px 1fr 32px;
  margin-top: 0;
}

.month-cal .month-nav button {
  border-radius: 8px;
  font-size: 15px;
  height: 32px;
  line-height: 1;
  width: 32px;
}

.month-cal .month-nav strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.month-cal__weekdays {
  color: var(--muted);
  display: grid;
  font-size: 10px;
  font-weight: 600;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
  letter-spacing: 0.04em;
  margin-top: 10px;
  text-align: center;
}

.month-cal__grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 4px;
}

.month-cal__blank {
  display: block;
}

.month-cal__grid button {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  width: 100%;
}

.month-cal__grid button:hover:not(:disabled):not(.active) {
  background: var(--ground);
  border-color: var(--line);
}

.month-cal__grid button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.month-cal__grid button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.32;
}

.month-cal__grid button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* Today marker — a dot, so it reads even when the day is also selected. */
.month-cal__grid button i {
  background: var(--accent);
  border-radius: 50%;
  bottom: 5px;
  height: 4px;
  position: absolute;
  width: 4px;
}

.month-cal__grid button.active i {
  background: var(--paper);
}

.month-cal__grid button:disabled i {
  display: none;
}

/* Length reads as a peer of Start time rather than a different kind of row:
   same field shell, same label/value rhythm. The native select sits invisibly
   on top so phones still get the system picker. */
.duration-field {
  margin-top: 10px;
  position: relative;
}

.duration-field select {
  appearance: none;
  bottom: 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.duration-field:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.time-control {
  margin-top: 10px;
}

.booking-confirm {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
  padding-top: 14px;
}

.booking-confirm > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.booking-confirm small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.booking-confirm strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.booking-confirm strong.is-placeholder {
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 420px) {
  .month-cal__grid button {
    font-size: 12.5px;
  }
  .booking-confirm strong {
    font-size: 13.5px;
  }
}

/* Sticky-bar recap yields to the in-card confirmation when both are on
   screen, so the selection is never stated twice in one viewport. */
.mobile-booking-bar[data-recap-hidden="1"] > div:first-child {
  display: none;
}

.mobile-booking-bar[data-recap-hidden="1"] .button {
  flex: 1;
  justify-content: center;
}

/* ------------------------------------------------------- SD card add-on
   The offer lives inside the note that explains why two cards are needed,
   so it reads as answering the problem rather than as an upsell. */

.booking-product-note--cards {
  display: block;
}

.booking-product-note__head {
  display: flex;
  gap: 10px;
}

.card-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.card-option {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  text-align: left;
  transition: border-color var(--ease), box-shadow var(--ease);
  width: 100%;
}

.card-option--none {
  padding: 12px;
}

.card-option img {
  border-radius: 8px;
  flex: none;
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.card-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* long spec strings must wrap, not overflow */
}

.card-option__text strong {
  font-size: 13px;
  font-weight: 600;
}

.card-option__text small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.card-option__price {
  font-size: 13px;
  font-weight: 700;
  margin-left: auto;
  padding-left: 8px;
  white-space: nowrap;
}

.card-option:hover:not(:disabled) {
  border-color: var(--ink);
}

.card-option:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.card-option.active {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.card-option:disabled {
  cursor: default;
  opacity: 0.45;
}

.card-option:disabled .card-option__price {
  color: var(--muted);
  font-weight: 600;
}

.money-summary__cards span {
  min-width: 0;
}

/* The Continue button sat flush against the date/time confirmation — zero
   gap above it, 19px below — which read as the button being crammed into
   the bottom of the card. Give it the same rhythm as the controls above
   (10–16px) and let the card's own padding finish underneath. Scoped to
   panel A so the checkout screen's own button is untouched. */
.booking-panel--a .button--full {
  margin-top: 16px;
}

.booking-panel--a {
  padding-bottom: 20px;
}

/* ------------------------------------------------- hero must fit the card
   .room-hero--a was a fixed 840px with overflow:hidden, and the booking
   card is absolutely positioned inside it. Adding the SD card picker pushed
   the podcast room's card to 975px, so 135px — including the Continue
   button — was CLIPPED AND UNREACHABLE on desktop. A fixed-height hero
   cannot hold a card whose height varies by room.

   So the card goes into normal flow and defines the hero's height, while
   the photo becomes an absolutely-positioned backdrop behind it. The hero
   keeps its 840px floor, so rooms with shorter cards look exactly as
   before; only a card that would have been cut makes it taller.
   Scoped to the width where the hero slot is actually shown. */
@media (min-width: 1200px) {
  body[data-concept="a"] .room-hero--a {
    height: auto;
    min-height: 840px;
  }

  body[data-concept="a"] .room-hero--a .room-hero__track {
    inset: 0;
    position: absolute;
  }

  body[data-concept="a"] .room-hero--a .hero-booking-slot {
    margin: 30px max(48px, calc((100vw - var(--content)) / 2)) 30px auto;
    position: relative;
    right: auto;
    top: auto;
  }
}

/* ------------------------------------------------- footer rhythm (mobile)
   The columns ran on two different rhythms: links carry a 44px tap-target
   min-height, address lines are plain spans at 20px, and both sat in a 9px
   gap — so Support and Reserve looked airy while Visit looked cramped.
   Everything below the brand block now shares one 44px row, and the gap is
   dropped since each row provides its own spacing. */
@media (max-width: 760px) {
  body[data-concept="a"] .site-footer > div:not(:first-child) {
    gap: 0;
  }

  body[data-concept="a"] .site-footer > div:not(:first-child) span,
  body[data-concept="a"] .site-footer > div:not(:first-child) a {
    align-items: center;
    display: flex;
    min-height: 44px;
  }

  /* The heading sits tighter to its own group than to the one above it. */
  body[data-concept="a"] .site-footer > div:not(:first-child) strong {
    margin-bottom: 2px;
  }
}

/* The clock was the text character ◷ at 16px in a 35px circle — a glyph, so
   it rendered small and its side-bearings pushed it off-centre no matter how
   the flex box was aligned. It's an inline SVG now: sized in the circle, and
   genuinely centred because the viewBox is symmetrical. */
.timer-ring svg {
  height: 19px;
  width: 19px;
  display: block;
}