/* ============================================================================
   MY STAY — the redesign layer.
   guest.css still owns the entry screen (which reads well and stays as it is).
   Everything below re-skins and re-flows what a guest sees AFTER sign-in, which
   was the disconnected part: a navy workspace bolted onto a dark/gold brand, a
   hidden sidebar on phones, and six tabs that never felt like one stay.

   Three rules drive it:
     1. One surface. The stay is a single dark canvas with the same copper the
        entry screen uses, not a light app pasted into a dark site.
     2. One menu, always reachable. A sticky segmented rail replaces the sidebar
        that vanished on mobile, and it looks the same on phone and desktop.
     3. Nothing heavy. Motion is CSS transitions + one IntersectionObserver, so
        the premium feel costs no bundle. No animation framework is loaded.
   ========================================================================== */

body.guest-authenticated {
  --stay-bg: #0E1116;
  --stay-surface: #161B22;
  --stay-surface-2: #1C232C;
  --stay-line: #2A3441;
  --stay-gold: #B06E3E;
  --stay-gold-soft: rgba(176, 110, 62, .14);
  --stay-text: #F2F4F7;
  --stay-text-2: #9AA4B2;
  --stay-text-3: #6B7480;
  --stay-green: var(--cp-success-ink);
  --stay-radius: 18px;
  background: var(--stay-bg);
  color: var(--stay-text);
}
body.guest-authenticated .guest-header {
  background: rgba(14, 17, 22, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stay-line);
  position: sticky; top: 0;
}
body.guest-authenticated .guest-brand { color: var(--stay-text); }

/* The sidebar was the single biggest source of "disconnected": present on
   desktop, gone on phones, and duplicating the site header's branding. */
body.guest-authenticated .app-sidebar { display: none; }
body.guest-authenticated .app-workspace,
body.guest-authenticated [dir=rtl] .app-workspace {
  margin: 0;
  padding: 0 clamp(16px, 4vw, 44px) 120px;
  max-width: 1180px;
  margin-inline: auto;
}

/* ── Top bar: who you are, which stay, and the way out ─────────────────── */
body.guest-authenticated .app-topbar {
  padding: 22px 0 14px;
  margin: 0;
  align-items: center;
  gap: 12px;
}
body.guest-authenticated .app-topbar .eyebrow,
body.guest-authenticated .app-topbar .eyebrow.blue { color: var(--stay-gold); }
body.guest-authenticated .app-topbar h1 {
  font: 500 clamp(26px, 4.4vw, 40px)/1.05 Georgia, serif;
  letter-spacing: -.03em;
  color: var(--stay-text);
}
body.guest-authenticated .topbar-actions select {
  background: var(--stay-surface);
  border: 1px solid var(--stay-line);
  color: var(--stay-text-2);
  border-radius: 10px;
}
body.guest-authenticated .round-button {
  background: var(--stay-surface); border: 1px solid var(--stay-line); color: var(--stay-text-2);
}
body.guest-authenticated .guest-avatar { background: var(--stay-gold); }

/* ── The menu the stay was missing ─────────────────────────────────────────
   Same rail on every screen size, horizontally scrollable on a phone so six
   sections never collapse into a hamburger the guest has to hunt for. */
.stay-rail {
  position: sticky;
  top: 68px;
  z-index: 40;
  display: flex;
  gap: 6px;
  padding: 10px 0;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, var(--stay-bg) 72%, transparent);
}
.stay-rail::-webkit-scrollbar { display: none; }
.stay-rail button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--stay-line);
  background: var(--stay-surface);
  color: var(--stay-text-2);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.stay-rail button i { font-style: normal; font-size: 14px; }
.stay-rail button:hover { transform: translateY(-1px); border-color: var(--stay-gold); }
.stay-rail button.active {
  background: var(--stay-gold-soft);
  border-color: var(--stay-gold);
  color: var(--stay-text);
}
.stay-rail .rail-dot {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--stay-gold); color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
}

/* ── Hero: the stay itself, with the countdown that makes it feel live ──── */
body.guest-authenticated .stay-hero {
  border-radius: var(--stay-radius);
  border: 1px solid var(--stay-line);
  background:
    radial-gradient(circle at 86% 8%, rgba(176, 110, 62, .30), transparent 42%),
    linear-gradient(150deg, #171d25, #10151b 70%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .40);
  padding: clamp(24px, 4.5vw, 44px);
  min-height: 0;
  overflow: hidden;
  position: relative;
}
body.guest-authenticated .stay-hero:after {
  content: "";
  position: absolute; inset: auto -40px -120px auto;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(176, 110, 62, .16);
  pointer-events: none;
}
body.guest-authenticated .stay-hero > div:first-child > span {
  color: var(--stay-gold); letter-spacing: .16em; font-size: 10px;
}
body.guest-authenticated .stay-hero h2 {
  font: 500 clamp(28px, 5vw, 46px)/1.02 Georgia, serif;
  letter-spacing: -.035em;
}
body.guest-authenticated .stay-hero p { color: var(--stay-text-2); font-size: 13px; line-height: 1.6; }
body.guest-authenticated .white-button { background: var(--stay-gold); color: #fff; }
body.guest-authenticated .glass-button {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--stay-line); color: var(--stay-text);
}
body.guest-authenticated .stay-badge {
  background: var(--stay-surface-2); color: var(--stay-text); border: 1px solid var(--stay-line);
}

/* The countdown chip — "1 night to go" is the single most-read line in the app. */
.stay-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 14px;
  border-radius: 999px;
  background: var(--stay-gold-soft);
  border: 1px solid rgba(176, 110, 62, .38);
  font-size: 12px; font-weight: 700; color: #E8B584;
}
.stay-countdown i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--stay-green);
  animation: stayPulse 2.4s ease-in-out infinite;
}
@keyframes stayPulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ── Every panel below the hero shares one card language ────────────────── */
body.guest-authenticated .journey-progress,
body.guest-authenticated .requests-preview,
body.guest-authenticated .upsell-preview,
body.guest-authenticated .upsell-catalog,
body.guest-authenticated .form-card,
body.guest-authenticated .request-form,
body.guest-authenticated .request-history,
body.guest-authenticated .checkout-card,
body.guest-authenticated .quick-card,
body.guest-authenticated .service-picker button {
  background: var(--stay-surface);
  border: 1px solid var(--stay-line);
  border-radius: var(--stay-radius);
  color: var(--stay-text);
  box-shadow: none;
}
body.guest-authenticated .journey-progress h3,
body.guest-authenticated .requests-preview h3,
body.guest-authenticated .upsell-preview h3,
body.guest-authenticated .upsell-catalog h3,
body.guest-authenticated .form-card h3,
body.guest-authenticated .checkout-card h3,
body.guest-authenticated .view-heading h2 { color: var(--stay-text); font-family: Georgia, serif; }
body.guest-authenticated .view-heading > p:last-child,
body.guest-authenticated .form-card > p,
body.guest-authenticated .quick-card > small,
body.guest-authenticated .request-mini small,
body.guest-authenticated .empty { color: var(--stay-text-2); }
body.guest-authenticated .journey-progress header span,
body.guest-authenticated .requests-preview header span,
body.guest-authenticated .upsell-preview > header span,
body.guest-authenticated .upsell-catalog > header span,
body.guest-authenticated .form-card > span,
body.guest-authenticated .checkout-card > span,
body.guest-authenticated .eyebrow.blue,
body.guest-authenticated .request-history header > span { color: var(--stay-gold); }
body.guest-authenticated .progress-track { background: #232b35; }
body.guest-authenticated .progress-steps i { background: #232b35; color: var(--stay-text-3); }
body.guest-authenticated .progress-steps i.done { background: var(--stay-green); color: #0E1116; }
body.guest-authenticated .progress-steps b { color: var(--stay-text); font-size: 11px; }
body.guest-authenticated .progress-steps small { color: var(--stay-text-3); font-size: 9px; }
body.guest-authenticated .quick-card > i { color: var(--stay-gold); }
body.guest-authenticated .quick-card > b { font-size: 12px; }
body.guest-authenticated .quick-card:hover { border-color: var(--stay-gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
body.guest-authenticated .key-card {
  background: linear-gradient(150deg, rgba(176, 110, 62, .22), var(--stay-surface));
  border-color: rgba(176, 110, 62, .42);
}
body.guest-authenticated .key-card > i, body.guest-authenticated .key-card > b { color: var(--stay-text); }
body.guest-authenticated .service-picker button.active {
  border: 1px solid var(--stay-gold); background: var(--stay-gold-soft); padding: 16px;
}
body.guest-authenticated .service-picker i, body.guest-authenticated .file-drop i { color: var(--stay-gold); }
body.guest-authenticated .primary { background: var(--stay-gold); color: #fff; }
body.guest-authenticated .primary:hover { background: #C07F4C; }
body.guest-authenticated .secondary { background: var(--stay-surface-2); color: var(--stay-text); border: 1px solid var(--stay-line); }
body.guest-authenticated input, body.guest-authenticated textarea, body.guest-authenticated select {
  background: var(--stay-surface-2) !important;
  border-color: var(--stay-line) !important;
  color: var(--stay-text) !important;
  border-radius: 10px !important;
  color-scheme: dark;
}
body.guest-authenticated input:focus, body.guest-authenticated textarea:focus, body.guest-authenticated select:focus {
  border-color: var(--stay-gold) !important;
  box-shadow: 0 0 0 3px rgba(176, 110, 62, .18) !important;
}
body.guest-authenticated .request-mini, body.guest-authenticated .request-row { border-top-color: var(--stay-line); }
body.guest-authenticated .request-mini b, body.guest-authenticated .request-row h4 { color: var(--stay-text); font-size: 12px; }

/* Status pills carry meaning, so they are colour-coded rather than all green. */
body.guest-authenticated .status-pill { background: rgba(74, 222, 128, .13); color: var(--stay-green); }
body.guest-authenticated .status-pill.is-waiting { background: var(--stay-gold-soft); color: #E8B584; }
body.guest-authenticated .status-pill.is-declined { background: rgba(248, 113, 113, .14); color: var(--cp-danger-ink); }
body.guest-authenticated .status-pill.is-live { background: rgba(96, 165, 250, .14); color: var(--cp-info-ink); }

/* ── Access card: only real during the stay window ─────────────────────── */
.access-card {
  margin-top: 16px;
  border-radius: var(--stay-radius);
  border: 1px solid rgba(176, 110, 62, .42);
  background: linear-gradient(150deg, rgba(176, 110, 62, .18), var(--stay-surface) 65%);
  padding: 20px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.access-card .access-item > span {
  display: block; font-size: 9px; letter-spacing: .16em; font-weight: 850; color: var(--stay-gold);
}
.access-card .access-item > b {
  display: block; margin-top: 8px; font: 600 22px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; color: var(--stay-text);
}
.access-card .access-item > small { display: block; margin-top: 5px; font-size: 10px; color: var(--stay-text-2); line-height: 1.5; }
.access-card.is-locked { border-color: var(--stay-line); background: var(--stay-surface); }
.access-card.is-locked .access-item > b { font-size: 14px; font-family: inherit; letter-spacing: 0; color: var(--stay-text-2); }
/* Only a real code earns the big monospace treatment — a sentence set in it
   reads as broken, which is exactly how the first pass looked. */
.access-card .access-item > b.is-text {
  font: 500 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0; color: var(--stay-text-2);
}

/* ── Offers: a swipeable rail on a phone, a grid on a desk ─────────────── */
body.guest-authenticated .upsell-card {
  background: linear-gradient(155deg, var(--stay-surface-2), var(--stay-surface));
  border-color: var(--stay-line);
  color: var(--stay-text);
}
body.guest-authenticated .upsell-card.featured {
  background: radial-gradient(circle at 88% 10%, rgba(176, 110, 62, .34), transparent 40%), linear-gradient(145deg, #1d232c, #12171d);
  border-color: rgba(176, 110, 62, .45);
}
body.guest-authenticated .upsell-card h4 { color: var(--stay-text); }
body.guest-authenticated .upsell-card > p { color: var(--stay-text-2); font-size: 11px; }
body.guest-authenticated .upsell-card-top > span { color: var(--stay-gold); }
body.guest-authenticated .upsell-value b { color: var(--stay-text); }
body.guest-authenticated .upsell-value span, body.guest-authenticated .upsell-terms { color: var(--stay-text-3); }
body.guest-authenticated .upsell-assurance { color: var(--stay-green); }
body.guest-authenticated .upsell-action { background: var(--stay-gold); color: #fff; border-radius: 10px; }
body.guest-authenticated .upsell-card.featured .upsell-action { background: var(--stay-gold); color: #fff; }
body.guest-authenticated .upsell-tag { background: rgba(74, 222, 128, .13); color: var(--stay-green) !important; }

@media (max-width: 780px) {
  body.guest-authenticated .upsell-grid,
  body.guest-authenticated .upsell-grid.compact {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  body.guest-authenticated .upsell-grid::-webkit-scrollbar { display: none; }
  body.guest-authenticated .upsell-card { scroll-snap-align: start; }
  /* The old rule hid every card past the second on a phone; a swipe rail shows
     them all, so the guest is no longer sold two things out of six. */
  body.guest-authenticated .upsell-grid.compact .upsell-card:nth-child(n+3) { display: flex; }
}

/* ── Club: inside the stay, not a separate product ─────────────────────── */
body.guest-authenticated .club-hero {
  background: radial-gradient(circle at 86% 14%, rgba(176, 110, 62, .30), transparent 40%), linear-gradient(140deg, #171d25, #10151b);
  border: 1px solid rgba(176, 110, 62, .34);
  border-radius: var(--stay-radius);
  min-height: 0;
}
body.guest-authenticated .club-hero h2 { font-size: clamp(30px, 5vw, 50px); }
body.guest-authenticated .member-card {
  background: linear-gradient(145deg, #20272f, #161b22);
  color: var(--stay-text);
  border: 1px solid rgba(176, 110, 62, .4);
}
body.guest-authenticated .member-card:after { color: rgba(176, 110, 62, .10); }
body.guest-authenticated .club-join, body.guest-authenticated .club-dashboard > article,
body.guest-authenticated .club-benefits > * {
  background: var(--stay-surface); border: 1px solid var(--stay-line); border-radius: var(--stay-radius); color: var(--stay-text);
}

/* ── Support and checkout keep the same canvas ─────────────────────────── */
body.guest-authenticated .support-layout { background: var(--stay-surface); border: 1px solid var(--stay-line); border-radius: var(--stay-radius); min-height: 0; }
body.guest-authenticated .support-chat { background: var(--stay-surface-2); border: 1px solid var(--stay-line); }
body.guest-authenticated .support-chat header { border-bottom-color: var(--stay-line); }
body.guest-authenticated .support-chat header b { color: var(--stay-text); }
body.guest-authenticated .bot-message { background: #232b35; color: var(--stay-text); }
body.guest-authenticated .user-message { background: var(--stay-gold); color: #fff; }
/* MESSAGES. Every bubble in the real thread carries who said it, on which
   channel, and when — a guest looking at "we have refunded that" needs to know
   whether it arrived by email three days ago or in the app just now. An unread
   one is marked, and stays marked until it is actually read. */
.bot-message small, .user-message small { display: block; margin-top: 6px; font-size: 8px; opacity: .72; letter-spacing: .04em; }
.bot-message.is-unread { box-shadow: inset 3px 0 0 var(--stay-gold, #b08d57); }
#messagesNotice { margin: 0 12px 10px; font-size: 9px; }
body.guest-authenticated .support-chat form { border-top-color: var(--stay-line); }
body.guest-authenticated .support-chat button { background: var(--stay-gold); }
body.guest-authenticated .support-chat input { background: transparent !important; border: 0 !important; }
body.guest-authenticated .checkout-layout { min-height: 0; }
body.guest-authenticated .checkout-copy ol { color: var(--stay-text-2); }
body.guest-authenticated .rating button { color: #333c47; }
body.guest-authenticated .rating button.selected { color: var(--stay-gold); }

/* ── Motion: cheap, and off for anyone who asked for less ──────────────── */
.stay-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.stay-reveal.is-in { opacity: 1; transform: none; }
body.guest-authenticated .app-view.active > * { animation: stayIn .38s ease both; }
@keyframes stayIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Skeletons: the shape of the answer arrives before the answer does. */
.stay-skeleton { display: grid; gap: 10px; }
.stay-skeleton > i {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, #1c232c 25%, #26303b 50%, #1c232c 75%);
  background-size: 200% 100%;
  animation: staySheen 1.4s linear infinite;
}
.stay-skeleton > i:nth-child(2) { width: 70% }
.stay-skeleton > i:nth-child(3) { width: 45% }
@keyframes staySheen { from { background-position: 200% 0 } to { background-position: -200% 0 } }

@media (prefers-reduced-motion: reduce) {
  .stay-reveal, body.guest-authenticated .app-view.active > * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .stay-countdown i, .stay-skeleton > i { animation: none !important; }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .stay-rail { top: 60px; }
  body.guest-authenticated .app-workspace { padding: 0 14px 150px; }
  body.guest-authenticated .stay-hero { padding: 22px 18px; display: block; }
  body.guest-authenticated .stay-hero-actions { flex-direction: row; }
  body.guest-authenticated .stay-hero-actions > * { flex: 1; }
  /* The rail IS the menu now, so the old white bottom bar (which clashed with
     everything) is retired rather than restyled. */
  body.guest-authenticated .mobile-app-nav { display: none !important; }
  body.guest-authenticated .app-workspace { padding-bottom: 60px }
  body.guest-authenticated .form-card-grid, body.guest-authenticated .service-layout { grid-template-columns: 1fr; }
}

/* ── Home manual & concierge ───────────────────────────────────────────────
   The building facts and the assistant that answers about them, sharing one
   card language with the rest of the stay. */
body.guest-authenticated .home-block,
body.guest-authenticated .home-ask {
  background: var(--stay-surface);
  border: 1px solid var(--stay-line);
  border-radius: var(--stay-radius);
  padding: 20px;
  margin-bottom: 14px;
}
body.guest-authenticated .home-block h3,
body.guest-authenticated .home-ask h3 {
  font: 500 20px Georgia, serif; margin: 0 0 12px; color: var(--stay-text);
}
body.guest-authenticated .home-ask header > span {
  font-size: 9px; letter-spacing: .16em; font-weight: 850; color: var(--stay-gold);
}
.home-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.home-fact {
  background: var(--stay-surface-2); border: 1px solid var(--stay-line);
  border-radius: 12px; padding: 13px 14px;
}
.home-fact > span { display: block; font-size: 9px; letter-spacing: .14em; font-weight: 850; color: var(--stay-gold); }
.home-fact > b { display: block; margin-top: 6px; font-size: 14px; color: var(--stay-text); line-height: 1.45; word-break: break-word; }
.home-fact > small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--stay-text-3); }
/* A locked fact is styled as absent, not as a value — the guest should never
   read "Available when your stay starts" as if it were the code. */
.home-fact.is-locked > b { color: var(--stay-text-3); font-size: 12.5px; font-weight: 500; }

.home-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.home-chips li {
  font-size: 11.5px; color: var(--stay-text-2);
  border: 1px solid var(--stay-line); border-radius: 999px; padding: 6px 12px;
  background: var(--stay-surface-2);
}
.home-rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.home-rules li { font-size: 12.5px; line-height: 1.6; color: var(--stay-text-2); }
.home-summary { font-size: 13px; line-height: 1.65; color: var(--stay-text-2); margin: 0 0 12px; }
.home-summary a { color: var(--stay-gold); }
.home-nearby { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.home-nearby > div { border-left: 2px solid var(--stay-gold); padding-left: 11px; }
.home-nearby span { display: block; font-size: 9px; letter-spacing: .14em; font-weight: 850; color: var(--stay-gold); }
.home-nearby b { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--stay-text-2); line-height: 1.5; }

body.guest-authenticated .home-ask { border-color: rgba(176, 110, 62, .38); }
body.guest-authenticated .home-ask > p { font-size: 12.5px; color: var(--stay-text-2); margin: 0 0 12px; }
.home-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.home-suggestions button {
  border: 1px solid var(--stay-line); background: var(--stay-surface-2); color: var(--stay-text-2);
  border-radius: 999px; padding: 8px 13px; font-size: 11.5px; cursor: pointer; transition: .18s;
}
.home-suggestions button:hover { border-color: var(--stay-gold); color: var(--stay-text); }
#homeAskForm { display: flex; gap: 8px; }
#homeAskForm input { flex: 1; }
#homeAskForm button {
  border: 0; border-radius: 10px; background: var(--stay-gold); color: #fff;
  padding: 0 20px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.home-answer:empty { display: none; }
.home-answer { margin-top: 12px; }
.home-answer-text {
  background: var(--stay-surface-2); border: 1px solid var(--stay-line); border-radius: 12px;
  padding: 14px; font-size: 13px; line-height: 1.65; color: var(--stay-text); margin: 0;
}
.home-answer-text a { color: var(--stay-gold); }

/* Arrival packs, add-ons and partner links. */
.home-offers { display: grid; gap: 10px; }
.home-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--stay-surface-2); border: 1px solid var(--stay-line); border-radius: 12px; padding: 14px 16px;
}
.home-offer b { display: block; font-size: 13.5px; color: var(--stay-text); }
.home-offer small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--stay-text-2); line-height: 1.5; }
.home-offer-buy { display: flex; align-items: center; gap: 12px; }
.home-offer-buy > span { font: 600 15px Georgia, serif; color: var(--stay-gold); white-space: nowrap; }
.home-offer-buy button {
  border: 0; border-radius: 9px; background: var(--stay-gold); color: #fff;
  padding: 9px 16px; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.home-offer-buy button[disabled] { opacity: .6; cursor: default; }
/* Once an extra is reserved, its button becomes the way to pay for it. */
.home-offer-pay, .request-pay {
  display: inline-block; border-radius: 9px; text-decoration: none; white-space: nowrap;
  background: var(--stay-gold, #C97B45); color: #fff;
  padding: 9px 16px; font-size: 12px; font-weight: 800;
}
.home-offer-pay:hover, .request-pay:hover { filter: brightness(1.08); }
.request-pay { align-self: center; margin-left: 10px; }
.home-partners a { color: var(--stay-text-2); text-decoration: none; }
.home-partners li:hover { border-color: var(--stay-gold); }

/* PARTNER SERVICES — seven grey chips in a row read as a footnote. These are real
   things a guest wants at 11pm on a Thursday, so they are given a card each: a glyph
   to find it by, a line that says why, and a visible way in. */
.partner-grid {
  display: grid; gap: 10px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.partner-card {
  display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "icon body" "go go";
  gap: 12px; align-items: start; text-decoration: none;
  padding: 14px 15px; border-radius: 14px;
  border: 1px solid var(--stay-line, rgba(255,255,255,.10));
  background: var(--stay-surface-2, rgba(255,255,255,.03));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.partner-card:hover, .partner-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--stay-gold, #C97B45);
  background: color-mix(in srgb, var(--stay-gold, #C97B45) 8%, transparent);
}
.partner-card.featured { border-color: color-mix(in srgb, var(--stay-gold, #C97B45) 55%, transparent); }
.partner-icon { grid-area: icon; font-size: 22px; line-height: 1.2; }
.partner-body { grid-area: body; min-width: 0; }
.partner-card b { display: block; font-size: 13.5px; color: var(--stay-text, #EAEEF3); }
.partner-card small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--stay-text-2, #9AA4B2); }
.partner-club {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em;
  margin-left: 6px; padding: 2px 6px; border-radius: 99px; vertical-align: middle;
  background: rgba(167,139,250,.16); color: var(--cp-accent-ink);
}
.partner-go {
  grid-area: go; justify-self: start; margin-top: 2px;
  font-size: 11.5px; font-weight: 800; color: var(--stay-gold, #C97B45);
}
.home-partners li:hover a { color: var(--stay-text); }

/* ── Density pass ──────────────────────────────────────────────────────────
   The first version kept the old page's box sizes and simply recoloured them.
   On a phone that produced a ~3,900px column of near-identical dark boxes: four
   158px-tall service tiles with a big empty gap inside each, two of which just
   repeated the access card above them. This pass is about density, not colour. */

/* Service tiles become rows: icon left, label right, no dead space. */
body.guest-authenticated .quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.guest-authenticated .quick-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "icon kicker" "icon title" "icon sub";
  align-content: center;
  gap: 0 12px;
  padding: 14px;
}
body.guest-authenticated .quick-card > span { grid-area: kicker; font-size: 8px; }
body.guest-authenticated .quick-card > i { grid-area: icon; margin: 0; align-self: center; font-size: 22px; }
body.guest-authenticated .quick-card > b { grid-area: title; margin-top: 3px; }
body.guest-authenticated .quick-card > small { grid-area: sub; margin-top: 2px; font-size: 10px; }

/* An empty progress track read as a full bar, because the track itself was a
   pale block the width of the card. It now reads as empty until it isn't. */
body.guest-authenticated .progress-track {
  background: #1b2129; border: 1px solid var(--stay-line); height: 7px; margin: 14px 0;
}
body.guest-authenticated .progress-track i { background: linear-gradient(90deg, var(--stay-gold), var(--stay-green)); }
body.guest-authenticated .journey-progress header > b { font-size: 12px; color: var(--stay-text-2); }
body.guest-authenticated .progress-steps { grid-template-columns: 1fr 1fr; gap: 8px; }

/* Panels sit closer together and carry less padding on a phone. */
body.guest-authenticated .journey-progress,
body.guest-authenticated .requests-preview,
body.guest-authenticated .upsell-preview,
body.guest-authenticated .upsell-catalog { margin-top: 12px; padding: 16px; }
body.guest-authenticated .access-card { margin-top: 12px; padding: 16px; gap: 12px; }

/* The essentials were six full-width boxes; two columns halves the scroll. */
.home-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
.home-fact { padding: 11px 12px; }
.home-fact > b { font-size: 13px; margin-top: 5px; }
/* The address is the one fact that needs the full width to stay readable. */
.home-fact:last-child { grid-column: 1 / -1; }
body.guest-authenticated .home-block, body.guest-authenticated .home-ask { padding: 16px; margin-bottom: 12px; }

.access-reveal {
  margin-top: 10px; border: 1px solid var(--stay-gold); background: transparent;
  color: #E8B584; border-radius: 999px; padding: 7px 14px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.access-reveal:hover { background: var(--stay-gold-soft); }
.access-reveal[disabled] { opacity: .6; cursor: default; }

@media (max-width: 420px) {
  body.guest-authenticated .quick-grid { grid-template-columns: 1fr; }
  .home-facts { grid-template-columns: 1fr; }
  .home-fact:last-child { grid-column: auto; }
}

/* The hero carried a 44px pad, a two-line address and a gap before the actions:
   339px before a phone showed anything else. */
@media (max-width: 780px) {
  body.guest-authenticated .stay-hero { padding: 20px 18px; }
  body.guest-authenticated .stay-hero h2 { font-size: clamp(24px, 6.5vw, 32px); margin: 8px 0 6px; }
  body.guest-authenticated .stay-hero p { font-size: 12px; }
  body.guest-authenticated .stay-countdown { margin-top: 12px; }
  body.guest-authenticated .stay-hero-actions { margin-top: 14px; gap: 8px; }
  body.guest-authenticated .stay-hero-actions > * { padding: 12px 14px; font-size: 11.5px; }
}

/* ── The Club is now the front door to services ────────────────────────────
   Membership used to open only after check-out, and services sat in a separate
   tab — so the membership and the thing it unlocks were never on the same
   screen. Both now live here, and a non-member sees the reason to join exactly
   where the service they wanted used to be. */
.club-locked {
  margin-top: 14px;
  border: 1px solid rgba(176, 110, 62, .45);
  border-radius: var(--stay-radius);
  background: linear-gradient(150deg, rgba(176, 110, 62, .16), var(--stay-surface) 70%);
  padding: 22px;
  text-align: center;
}
.club-locked b { display: block; font: 500 21px Georgia, serif; color: var(--stay-text); }
.club-locked p { margin: 8px auto 16px; max-width: 460px; font-size: 13px; line-height: 1.65; color: var(--stay-text-2); }
.club-locked button {
  border: 0; border-radius: 10px; background: var(--stay-gold); color: #fff;
  padding: 12px 22px; font-size: 12.5px; font-weight: 800; cursor: pointer;
}

body.guest-authenticated .club-services {
  background: var(--stay-surface); border: 1px solid var(--stay-line);
  border-radius: var(--stay-radius); padding: 18px; margin-top: 14px;
}
body.guest-authenticated .club-services > header > span {
  font-size: 9px; letter-spacing: .16em; font-weight: 850; color: var(--stay-gold);
}
body.guest-authenticated .club-services > header h3 { font: 500 21px Georgia, serif; margin: 5px 0 0; color: var(--stay-text); }
/* Inside the Club the request form and its history are already on a card, so
   they drop their own frame rather than nesting a box in a box. */
body.guest-authenticated .club-services .request-form,
body.guest-authenticated .club-services .request-history {
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
body.guest-authenticated .club-services .request-history { border-top: 1px solid var(--stay-line); padding-top: 14px; margin-top: 14px; }
body.guest-authenticated .club-services .service-layout { grid-template-columns: 1fr; gap: 14px; }

/* ── Trips: what the Club remembers after check-out ────────────────────── */
.trip-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px;
}
.trip-totals > div {
  background: var(--stay-surface); border: 1px solid var(--stay-line);
  border-radius: 12px; padding: 14px;
}
.trip-totals span { display: block; font-size: 9px; letter-spacing: .14em; font-weight: 850; color: var(--stay-gold); }
.trip-totals b { display: block; margin-top: 6px; font: 500 22px Georgia, serif; color: var(--stay-text); }
.trip-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--stay-surface); border: 1px solid var(--stay-line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.trip-row.is-current { border-color: rgba(176, 110, 62, .5); background: linear-gradient(150deg, rgba(176, 110, 62, .12), var(--stay-surface) 70%); }
.trip-row b { display: block; font-size: 13.5px; color: var(--stay-text); }
.trip-row small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--stay-text-2); }
.trip-meta { display: flex; align-items: center; gap: 12px; }
.trip-meta b { font: 500 15px Georgia, serif; color: var(--stay-gold); }

/* ── The membership gate ───────────────────────────────────────────────────
   First screen after sign-in. It is a decision, not a nag, so it gets room and
   states plainly what joining connects. */
.club-gate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.club-gate-backdrop { position: absolute; inset: 0; background: rgba(6, 9, 13, .82); backdrop-filter: blur(6px); }
body.club-gate-open { overflow: hidden; }
.club-gate-card {
  position: relative;
  width: min(500px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: linear-gradient(160deg, #1a212a, #12171d 70%);
  border: 1px solid rgba(176, 110, 62, .45);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  color: #F2F4F7;
}
.club-gate-card .eyebrow { color: #B06E3E; font-size: 9px; letter-spacing: .2em; font-weight: 850; margin: 0 0 10px; }
.club-gate-card h2 { font: 500 clamp(24px, 5vw, 31px)/1.1 Georgia, serif; margin: 0 0 10px; letter-spacing: -.02em; }
.club-gate-lead { font-size: 13px; line-height: 1.65; color: #9AA4B2; margin: 0 0 18px; }
.club-gate-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.club-gate-benefits li { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; }
.club-gate-benefits i {
  font-style: normal; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: rgba(176, 110, 62, .16); color: #E8B584; border: 1px solid rgba(176, 110, 62, .38);
}
.club-gate-benefits b { display: block; font-size: 12.5px; color: #F2F4F7; }
.club-gate-benefits span { font-size: 11.5px; line-height: 1.5; color: #9AA4B2; }
.club-gate-card .check-line { display: flex !important; align-items: flex-start; gap: 10px; margin: 12px 0; }
.club-gate-card .check-line input { width: auto !important; margin-top: 2px; accent-color: #B06E3E; }
.club-gate-card .check-line span { font-size: 11.5px; line-height: 1.55; color: #9AA4B2; }
.club-gate-card .primary { background: #B06E3E; color: #fff; border-radius: 11px; padding: 14px; margin-top: 6px; }
.club-gate-skip {
  display: block; width: 100%; margin-top: 14px; padding: 8px;
  border: 0; background: none; color: #6B7480; font-size: 11.5px; cursor: pointer; text-decoration: underline;
}
.club-gate-skip:hover { color: #9AA4B2; }

/* ── CONFIRMATION VIEW ──────────────────────────────────────────────────────
   Two columns on desktop with a sticky right rail; one column on mobile, where
   the confirmation box comes FIRST because reference and PIN are what a guest
   opens this page for at the door. */
.conf-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.conf-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.conf-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
@media (max-width:900px){
  .conf-grid{grid-template-columns:1fr}
  .conf-side{position:static;order:-1}
}
.conf-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px}
.conf-card h3{margin:0 0 12px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.conf-hero{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px}
.conf-check{margin:0;color:#1a7f4b;font-weight:700;font-size:14px}
html[data-theme="dark"] .conf-check{color:#4ade80}
.conf-hero h2{margin:6px 0 4px;font-size:22px;color:var(--ink)}
.conf-sent{margin:0 0 14px;color:var(--muted);font-size:13px}
.conf-actions{display:flex;gap:10px;flex-wrap:wrap}
.conf-actions .secondary,.conf-actions a.secondary{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
/* This band renders on a DARK surface in the guest shell in BOTH themes, so
   neither --ink nor a theme-conditional amber is safe: measured 2.66:1 against
   the composited background. It carries its own opaque chip instead, which
   makes the contrast deterministic rather than dependent on whatever ancestor
   happens to sit behind it. Measured 9.6:1. */
.conf-trust{margin:0;padding:11px 14px;border-radius:12px;font-size:12px;line-height:1.6;
  background:#2A1D12;border:1px solid rgba(224,169,109,.45);color:#F2CFA6}
.conf-saved{color:#1a7f4b;font-size:11px;font-weight:600}
html[data-theme="dark"] .conf-saved{color:#4ade80}
.conf-summary{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
.conf-summary img{width:120px;height:90px;object-fit:cover;border-radius:12px}
.conf-summary h4{margin:0 0 4px;font-size:15px;color:var(--ink)}
.conf-summary p{margin:2px 0;font-size:13px;color:var(--muted)}
.conf-total{font-size:17px!important;font-weight:800;color:var(--ink)!important;margin-top:8px!important}
@media (max-width:520px){.conf-summary{grid-template-columns:1fr}.conf-summary img{width:100%;height:150px}}
.conf-exp-ph{width:120px;height:90px;border-radius:12px;background:var(--line)}
.conf-upsells{display:flex;flex-direction:column;gap:12px}
.conf-upsell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:14px}
.conf-upsell h4{margin:0 0 4px;font-size:14px;color:var(--ink)}
.conf-upsell p{margin:2px 0;font-size:12.5px;color:var(--muted)}
.conf-upsell-buy{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.conf-price{margin:0!important;font-size:15px;color:var(--ink)!important}
.conf-price s{color:var(--muted);font-weight:400;margin-right:4px}
.conf-badge-member{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  background:rgba(193,123,69,.16);color:#8E5226;border:1px solid rgba(193,123,69,.4)}
html[data-theme="dark"] .conf-badge-member{color:#E0A96D}
.conf-free-cancel{color:#1a7f4b!important;font-size:12px!important;margin-top:6px!important}
html[data-theme="dark"] .conf-free-cancel{color:#4ade80!important}
@media (max-width:520px){.conf-upsell{grid-template-columns:1fr}.conf-upsell-buy{align-items:flex-start;text-align:left}}
.conf-carousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.conf-carousel>*{flex:0 0 210px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:10px}
.conf-exp img{width:100%;height:110px;object-fit:cover;border-radius:10px}
.conf-exp h4{margin:8px 0 4px;font-size:13.5px;color:var(--ink)}
.conf-exp p{margin:2px 0;font-size:12px;color:var(--muted)}
.conf-stars{color:#C17B45!important;font-weight:600}
.conf-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;font-size:13px;color:var(--muted)}
.conf-kv b{color:var(--ink);font-size:14px}
.conf-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.conf-copy{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;
  padding:4px 9px;font-size:11.5px;cursor:pointer}
/* The quiet zone is a real white box, not a theme colour: a QR rendered dark-on-dark
   does not scan, and this panel is dark for most of the day. */
.conf-qr{margin:12px auto 6px;width:172px;height:172px;background:#fff;border-radius:12px;
  padding:10px;display:flex;align-items:center;justify-content:center}
.conf-qr img{width:100%;height:100%;object-fit:contain;display:block}
.conf-ref small{display:block;text-align:center;color:var(--muted);font-size:11.5px}
.conf-settled{margin:8px 0 0;color:#1a7f4b;font-size:12.5px;font-weight:600}
html[data-theme="dark"] .conf-settled{color:#4ade80}
.conf-reward{background:linear-gradient(135deg,rgba(193,123,69,.16),rgba(142,82,38,.08));border-color:rgba(193,123,69,.45)}
.conf-reward p{margin:0;font-size:13px;color:var(--ink);line-height:1.6}
.conf-bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0 6px}
.conf-bar i{display:block;height:100%;background:linear-gradient(90deg,#C17B45,#E0A96D)}
.conf-access p{margin:6px 0;font-size:13.5px;color:var(--ink)}
.conf-empty{padding:40px;text-align:center;color:var(--muted)}
.conf-empty button{margin-top:12px}

/* stage-aware panel, offline notice, rewards modal */
.conf-offline{margin:6px 0 0;font-size:12px;color:#8E5226;background:rgba(224,169,109,.14);
  border:1px solid rgba(224,169,109,.4);border-radius:9px;padding:7px 10px}
html[data-theme="dark"] .conf-offline{color:#E8B888}
.conf-stage-grid{display:flex;flex-wrap:wrap;gap:8px}
.conf-stage-grid .secondary,.conf-stage-grid a.secondary{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 13px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer}
.conf-stage-grid .secondary[disabled]{opacity:.6;cursor:default}
.conf-stage-note{margin:10px 0 0;font-size:11.5px;color:var(--muted)}
.conf-comeback{background:linear-gradient(135deg,rgba(193,123,69,.14),rgba(142,82,38,.06));border-color:rgba(193,123,69,.4)}
.conf-modal-backdrop{position:fixed;inset:0;background:rgba(6,10,13,.62);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:9000}
.conf-modal{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;max-width:420px;width:100%}
.conf-modal-eyebrow{margin:0 0 6px;font-size:10.5px;letter-spacing:.16em;color:#C17B45;font-weight:700}
.conf-modal h3{margin:0 0 8px;font-size:19px;color:var(--ink)}
.conf-modal p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.conf-modal-list{margin:0 0 16px;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.9}
.conf-modal-list s{color:var(--muted);font-weight:400}
.conf-modal-off{display:block;text-align:center;margin-top:12px;font-size:12px;color:var(--muted);
  text-decoration:underline;cursor:pointer}