@charset "UTF-8";
/* ==========================================================================
   The Kingdom Club & Resort

   One stylesheet for four surfaces: the public site, the member portal, the
   admin panel and the outlet panel.

   Identity: white and off-white grounds, gold for everything that leads the
   eye, dark text for reading. No green is used for UI -- the only green left
   anywhere is inside the logo artwork itself, which is the brand mark and is
   deliberately untouched.

   Depth comes from hairline gold-tinted borders and soft shadows rather than
   from filled panels, which is what keeps it feeling like a hotel and not a
   dashboard.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand palette ------------------------------------------------------ */
  --gold:        #c9a227;
  --gold-dark:   #a98318;
  --gold-light:  #d9bd57;

  --white:       #ffffff;
  --off-white:   #fafbf9;

  --text-dark:   #173521;
  --text-muted:  #68756d;

  /* --- Derived ------------------------------------------------------------ */
  --gold-pale:   #f6efd9;   /* tinted panel / active nav */
  --gold-mist:   #fdfaf1;   /* the faintest wash */
  --gold-line:   #ecdfba;   /* visible gold hairline */

  --surface:     var(--off-white);
  --line:        #e9e6dc;
  --line-soft:   #f2efe7;
  --text-faint:  #9aa39c;

  /* A warm near-black, used only where a photograph needs a scrim or a
     figure needs maximum contrast. Deliberately neutral, never green. */
  --ink:         #1c1a15;

  --gold-rgb:      201, 162, 39;
  --ink-rgb:       28, 26, 21;
  --white-rgb:     255, 255, 255;

  /* --- Status ------------------------------------------------------------- */
  --ok:       #2f7d4f;  --ok-bg:   #eaf4ee;
  --warn:     #a5761a;  --warn-bg: #fbf2de;
  --bad:      #a3342a;  --bad-bg:  #fbeae7;
  --bad-dark: #822a22;

  /* Georgia throughout, per the brand direction. One family for display
     and UI, differentiated by size, weight and letter-spacing instead. */
  --display: Georgia, "Times New Roman", Times, serif;
  --ui: Georgia, "Times New Roman", Times, serif;

  /* Type scale, 1.25 from 16px */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-4xl:  4rem;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 4px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-soft: 0 1px 2px rgba(var(--ink-rgb), 0.03),
                 0 10px 30px rgba(var(--ink-rgb), 0.05);
  --shadow-lift: 0 2px 6px rgba(var(--ink-rgb), 0.05),
                 0 22px 48px rgba(var(--ink-rgb), 0.11);
  --shadow-gold: 0 8px 24px rgba(var(--gold-rgb), 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --appbar-h: 92px;
  --rail: 262px;
  --shell: 1240px;
  --reading: 68ch;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Georgia everywhere. Form controls and tables do not inherit the body
   font by default, so they are named explicitly. */
html, body, button, input, textarea, select, table, a,
h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, label, summary, legend {
  font-family: Georgia, "Times New Roman", Times, serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Belt and braces: no section may push the page sideways. */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: var(--sp-3) var(--sp-4);
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Motion

   One entrance per element, driven by an IntersectionObserver that adds
   .is-visible. Everything is short and single-shot; nothing loops.
   -------------------------------------------------------------------------- */
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shimmer   { from { background-position: 200% 0; } to { background-position: -200% 0; } }

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* The page shell itself fades in once, so first paint is never a flash. */
.page-enter { animation: fade-in 420ms var(--ease) both; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--text-dark);
}

.page-title {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
}

.section-title {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-dark);
}

.lede { font-size: var(--t-md); color: var(--text-muted); max-width: var(--reading); }

.muted { color: var(--text-muted); }
.small { font-size: var(--t-sm); }
.tiny  { font-size: var(--t-xs); }

.amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* Small gold eyebrow, echoing the rule under the wordmark in the crest */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); }

.rule-gold {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent);
  margin: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   5. Brand lockups
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; line-height: 1.05; }
.brand__mark { width: 42px; height: auto; flex: none; }
.brand__name {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-dark);
}
.brand__sub {
  display: block;
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  margin-top: 3px;
}
.brand--light .brand__name { color: var(--white); }
.brand--light .brand__sub  { color: var(--gold-light); }

.brand-full { display: block; }
.brand-full img { width: 100%; height: auto; }
.brand-full--auth   { max-width: 250px; margin: 0 auto var(--sp-6); }
.brand-full--footer { max-width: 210px; margin: 0 auto var(--sp-4); }
.brand-full--hero   { max-width: 290px; margin: 0 auto var(--sp-5); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  color: var(--white);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(var(--gold-rgb), 0.22);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), filter 220ms var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); filter: saturate(1.08); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(0.4);
}

/* A light sweep across the button on hover -- one pass, no loop. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: transparent;
  border-color: var(--gold-line);
  color: var(--text-dark);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--gold-mist);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(var(--gold-rgb), 0.14);
}
.btn--ghost::after { display: none; }

.btn--gold { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); }

.btn--danger { background: linear-gradient(135deg, #b84034, var(--bad-dark)); box-shadow: none; }
.btn--danger:hover { box-shadow: 0 8px 22px rgba(163, 52, 42, 0.28); }

.btn--sm { padding: 7px 15px; font-size: var(--t-xs); }
.btn--lg { padding: 15px 32px; font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn--link {
  background: none; border: none; padding: 0; box-shadow: none;
  color: var(--gold-dark); text-decoration: underline;
  text-underline-offset: 3px; font-weight: 600;
}
.btn--link:hover { transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }

.field > label, .label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--text-dark);
}

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  font-size: var(--t-sm);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.14);
}
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--bad); }
.textarea { min-height: 104px; resize: vertical; }
.input[readonly] { background: var(--off-white); color: var(--text-muted); }

.field-hint { font-size: var(--t-xs); color: var(--text-muted); margin-top: var(--sp-2); }
.field-error { font-size: var(--t-xs); color: var(--bad); margin-top: var(--sp-2); font-weight: 600; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--t-sm); }
.check input { margin-top: 4px; flex: none; accent-color: var(--gold); }

.input-prefix {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); overflow: hidden;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.input-prefix:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.14); }
.input-prefix span {
  display: grid; place-items: center;
  padding: 0 14px;
  background: var(--gold-mist);
  border-right: 1px solid var(--line);
  font-weight: 600; color: var(--gold-dark);
}
.input-prefix .input { border: none; box-shadow: none; }

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.filters .field { margin: 0; min-width: 150px; }

/* --------------------------------------------------------------------------
   8. Panels and cards
   -------------------------------------------------------------------------- */
.panel {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--gold-mist), var(--white));
}
.panel__body { padding: var(--sp-6); }
.panel__foot {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line-soft);
  background: var(--off-white);
}

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stack   { display: grid; gap: var(--sp-6); }
.stack-4 { display: grid; gap: var(--sp-4); }

.divider { height: 1px; background: var(--line-soft); margin: var(--sp-5) 0; }

/* Figure tiles -- the dashboard's counting surfaces */
.figure-tile {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-soft);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
  overflow: hidden;
}
.figure-tile::before {
  /* A gold hairline along the top edge, revealed on hover. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.figure-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gold-line); }
.figure-tile:hover::before { transform: scaleX(1); }

a.figure-tile { text-decoration: none; display: block; }

.figure-tile__label {
  font-size: var(--t-xs);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.figure-tile__value {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.05;
  margin-top: var(--sp-2);
  color: var(--text-dark);
}
.figure-tile__meta { font-size: var(--t-xs); color: var(--text-faint); margin-top: var(--sp-2); }

.figure-tile--alert { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-mist), var(--white)); }
.figure-tile--alert::before { transform: scaleX(1); }
.figure-tile--alert .figure-tile__label { color: var(--gold-dark); }

/* --------------------------------------------------------------------------
   9. The passbook -- the one loud object in the portal

   Gold foil: this is the member's balance, and it should feel like the card
   in their wallet rather than a row in a table.
   -------------------------------------------------------------------------- */
.passbook {
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--gold-light) 0%, transparent 55%),
    linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 60%, #8f6d14 100%);
  color: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  overflow: hidden;
  box-shadow: var(--shadow-gold);
}
/* A soft sheen sweeping the foil, once, on hover */
.passbook::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 900ms var(--ease);
}
.passbook:hover::before { transform: translateX(100%); }
.passbook > * { position: relative; }

.passbook__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.passbook__value {
  font-family: var(--display);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1;
  margin-top: var(--sp-3);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(var(--ink-rgb), 0.16);
}

.passbook__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.88);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}
.passbook__note strong { color: var(--white); font-weight: 700; }

.passbook__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.passbook__actions .btn {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.36);
  color: var(--white);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.passbook__actions .btn:hover { background: rgba(255, 255, 255, 0.30); box-shadow: none; }
.passbook__actions .btn--gold,
.passbook__actions .btn--ghost {
  background: var(--white);
  border-color: var(--white);
  color: var(--gold-dark);
}
.passbook__actions .btn--gold:hover,
.passbook__actions .btn--ghost:hover { background: var(--white); filter: brightness(1.02); }

/* Payout balance -- the quieter second wallet, white with a gold edge */
.passbook--payout {
  background: var(--white);
  color: var(--text-dark);
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-soft);
}
.passbook--payout::before { display: none; }
.passbook--payout::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
}
.passbook--payout .passbook__label { color: var(--gold-dark); }
.passbook--payout .passbook__value { font-size: var(--t-2xl); color: var(--text-dark); text-shadow: none; }
.passbook--payout .passbook__note { border-top-color: var(--line); color: var(--text-muted); }
.passbook--payout .passbook__note strong { color: var(--text-dark); }
.passbook--payout .passbook__actions .btn {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  border-color: transparent; color: var(--white); backdrop-filter: none;
}
.passbook--payout .passbook__actions .btn--ghost {
  background: transparent; border-color: var(--gold-line); color: var(--text-dark);
}

/* --------------------------------------------------------------------------
   10. Ledger rows -- the left edge encodes credit or debit
   -------------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--line-soft); }

.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  transition: background 200ms var(--ease), border-left-color 200ms var(--ease);
}
.ledger__row:hover { background: var(--gold-mist); }
.ledger__row--credit { border-left-color: var(--ok); }
.ledger__row--debit  { border-left-color: var(--gold); }

.ledger__what { font-size: var(--t-sm); font-weight: 600; }
.ledger__meta { font-size: var(--t-xs); color: var(--text-muted); margin-top: 3px; }

.ledger__amount { font-size: var(--t-sm); font-weight: 700; text-align: right; white-space: nowrap; }
.ledger__amount--credit { color: var(--ok); }
.ledger__amount--debit  { color: var(--gold-dark); }
.ledger__after { font-size: var(--t-xs); color: var(--text-faint); font-weight: 400; }

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
.table th {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--gold-line);
  background: var(--gold-mist);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.table td { padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background 180ms var(--ease); }
.table tbody tr:hover { background: var(--gold-mist); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table--compact td, .table--compact th { padding: var(--sp-3); }

.table__empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--text-muted); }
.table__empty p { max-width: 44ch; margin: 0 auto var(--sp-4); }

.code-link {
  font-weight: 600;
  color: var(--gold-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color 180ms var(--ease);
}
.code-link:hover { border-bottom-color: var(--gold-dark); }

.proof-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  transition: transform 220ms var(--ease);
}
.proof-thumb:hover { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   12. Badges, levels, alerts
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--ok    { background: var(--ok-bg);   color: var(--ok);   border-color: #cfe5d8; }
.badge--warn  { background: var(--warn-bg); color: var(--warn); border-color: var(--gold-line); }
.badge--bad   { background: var(--bad-bg);  color: var(--bad);  border-color: #eecdc7; }
.badge--muted { background: var(--off-white); color: var(--text-muted); border-color: var(--line); }

.level-tag {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--white);
  font-size: var(--t-xs);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.30);
}
.level-tag--2 { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.level-tag--3 { background: linear-gradient(135deg, #d8cba4, var(--gold-dark)); }

.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r);
  border: 1px solid;
  border-left-width: 3px;
  font-size: var(--t-sm);
  margin-bottom: var(--sp-4);
  animation: fade-up 420ms var(--ease) both;
}
.alert--success { background: var(--ok-bg);   border-color: #cfe5d8; color: #1e5637; }
.alert--error   { background: var(--bad-bg);  border-color: #eecdc7; color: var(--bad-dark); }
.alert--warn    { background: var(--warn-bg); border-color: var(--gold-line); color: #7c5810; }
.alert--info    { background: var(--gold-mist); border-color: var(--gold-line); color: var(--gold-dark); }
.alert p { margin: 0; }
.alert strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   13. The app bar -- centred logo, nav either side
   -------------------------------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 90;
  overflow: visible;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 300ms var(--ease), background 300ms var(--ease);
}
.appbar.is-stuck { box-shadow: 0 6px 26px rgba(var(--ink-rgb), 0.07); background: rgba(255,255,255,0.95); }

/* A hairline of gold under the bar, the width of the page */
.appbar::after {
  content: "";
  position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 25%, var(--gold) 50%, var(--gold-line) 75%, transparent);
}

.appbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  min-height: var(--appbar-h);
  padding: var(--sp-3) var(--sp-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}

/* The logo sits in the centre column, so it stays optically centred
   regardless of how many links sit either side.

   It is carried on a white medallion. The lockup is a transparent PNG whose
   lower third is dark green wordmark and gold rule; hanging that straight
   over the hero photograph left those parts unreadable. The plate gives the
   whole lockup its own white ground, so it reads identically on every page.

   The bar keeps its 92px. The plate is 124px tall and gives back 56px of it
   through negative margins (112 - 6 - 38 = 68, the inner's content height),
   so only the artwork overhangs -- the header itself never grows.

   The plate is wider than it is tall, which makes the lockup height-bound
   rather than width-bound: the logo sits shorter with more room either side,
   and stays centred on both axes through place-items. */
.appbar__brand {
  justify-self: center;
  position: relative; z-index: 3;
  display: grid; place-items: center;
  text-decoration: none;
  width: 148px; height: 112px;
  padding: 10px;
  margin-top: -6px;
  margin-bottom: -38px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--gold-line);
  box-shadow: 0 10px 28px rgba(var(--ink-rgb), 0.10);
  transition: box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.appbar__brand:hover {
  box-shadow: 0 14px 34px rgba(var(--ink-rgb), 0.15);
  border-color: var(--gold);
}
/* No filter: the browser scales the 600px source down in one step, which keeps
   the fine "STAY | RELAX | REJUVENATE" rule legible.

   The height is set in pixels rather than as a percentage. A percentage
   max-height does not resolve against this grid area, so the artwork spilled
   past the shorter plate; an explicit height is deterministic, and width:auto
   keeps the 600x587 ratio exact. */
.appbar__brand img {
  height: 88px;
  width: auto;
  max-width: 100%;
  display: block;
}

.appbar__nav { display: flex; align-items: center; gap: var(--sp-6); }

/* Shown only on mobile, so the logo sits between two equal-weight controls. */
.appbar__nav--mobile-cta { display: none; }
.appbar__nav--left  { justify-self: start; }
.appbar__nav--right { justify-self: end; }

.appbar__link {
  position: relative;
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  text-decoration: none;
  padding: 8px 0;
  white-space: nowrap;
  transition: color 220ms var(--ease);
}
.appbar__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease);
}
.appbar__link:hover { color: var(--gold-dark); }
.appbar__link:hover::after { transform: scaleX(1); transform-origin: left; }
.appbar__link[aria-current="page"] { color: var(--gold-dark); font-weight: 600; }
.appbar__link[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile controls */
.appbar__toggle {
  display: none;
  justify-self: start;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  place-items: center;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.appbar__toggle:hover { border-color: var(--gold); background: var(--gold-mist); }
.appbar__toggle span {
  display: block; position: relative;
  width: 17px; height: 1.5px; background: var(--text-dark);
  transition: background 200ms var(--ease);
}
.appbar__toggle span::before,
.appbar__toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: var(--text-dark);
  transition: transform 300ms var(--ease);
}
.appbar__toggle span::before { top: -5.5px; }
.appbar__toggle span::after  { top:  5.5px; }
.appbar__toggle[aria-expanded="true"] span { background: transparent; }
.appbar__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.appbar__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* The mobile sheet slides down from under the bar */
.appbar__sheet {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
  overflow: hidden;
  max-height: 0;
  transition: max-height 420ms var(--ease);
}
.appbar__sheet.is-open { max-height: 480px; }
.appbar__sheet-inner { padding: var(--sp-4) var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-1); }

.appbar__sheet .appbar__link {
  display: block;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-md);
  opacity: 0;
  transform: translateY(-8px);
}
.appbar__sheet.is-open .appbar__link {
  animation: fade-up 380ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.appbar__sheet .appbar__link::after { display: none; }
.appbar__sheet .btn { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   14. Public site sections
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(86vh, 780px);
  display: flex;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero__inner {
  padding: var(--sp-9) var(--sp-5);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  animation: fade-up 900ms var(--ease) both;
}
.hero__crest { width: 88px; height: auto; margin: 0 auto var(--sp-5); }
.hero__title { font-size: clamp(2.4rem, 6.4vw, var(--t-4xl)); color: var(--white); margin: 0 auto; max-width: 16ch; }
.hero__tagline {
  margin-top: var(--sp-4);
  font-size: var(--t-md);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

.section { padding: var(--sp-9) var(--sp-5); }
.section--tight { padding: var(--sp-8) var(--sp-5); }
.section--panel { background: var(--white); }
.section--dark {
  background: var(--ink);
  color: var(--white);
  background-size: cover;
  background-position: center;
}
.section--dark .display,
.section--dark .section-title,
.section--dark .page-title { color: var(--white); }
.section--dark .eyebrow { color: var(--gold-light); }
.section--dark .eyebrow::before { background: var(--gold-light); }
.section__inner { max-width: var(--shell); margin: 0 auto; }

.section-lead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.section-lead h2 { font-family: var(--display); font-size: var(--t-2xl); font-weight: 600; line-height: 1.1; max-width: 20ch; }

/* The register -- destinations as a ruled directory */
.register { border-top: 1px solid var(--line); }
.register__item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-left 300ms var(--ease);
}
.register__item:hover { padding-left: var(--sp-4); }
.register__item:hover .register__name { color: var(--gold-dark); }
.register__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, var(--t-2xl));
  font-weight: 500; line-height: 1.1;
  transition: color 220ms var(--ease);
}
.register__where { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.register__thumb {
  width: 180px; height: 116px; object-fit: cover;
  border-radius: var(--r); background: var(--gold-mist); flex: none;
  transition: transform 320ms var(--ease);
}
.register__item:hover .register__thumb { transform: scale(1.04); }

.section--dark .register { border-top-color: rgba(255, 255, 255, 0.16); }
.section--dark .register__item { border-bottom-color: rgba(255, 255, 255, 0.16); }
.section--dark .register__where { color: rgba(255, 255, 255, 0.62); }
.section--dark .register__item:hover .register__name { color: var(--gold-light); }

/* Membership comparison */
.membership { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.membership th, .membership td { padding: var(--sp-4); border-bottom: 1px solid var(--line); text-align: left; }
.membership thead th {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 2px solid var(--gold);
}
.membership thead th:first-child {
  font-family: var(--ui); font-size: var(--t-xs); color: var(--gold-dark);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.membership .membership__row-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.membership .membership__price { font-family: var(--display); font-size: var(--t-xl); font-weight: 600; }
.membership .membership__credit { font-size: var(--t-lg); font-weight: 700; color: var(--gold-dark); }
.membership td { vertical-align: top; }

.amenity-list { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--t-sm); color: var(--text-muted); }
.amenity-list li { display: flex; align-items: center; gap: var(--sp-2); }
.amenity-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); background: var(--gold-mist);
  transition: transform 420ms var(--ease), box-shadow 320ms var(--ease);
}
.gallery img:hover { transform: scale(1.03); box-shadow: var(--shadow-lift); }

.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-3);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.strip img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r); scroll-snap-align: start; background: var(--gold-mist);
  transition: transform 420ms var(--ease);
}
.strip a:hover img { transform: scale(1.04); }

.terms-list { counter-reset: term; max-width: var(--reading); }
.terms-list li {
  counter-increment: term; position: relative;
  padding-left: var(--sp-7); margin-bottom: var(--sp-5);
  font-size: var(--t-sm); color: var(--text-muted);
}
.terms-list li::before {
  content: counter(term);
  position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-line); border-radius: 50%;
  font-size: var(--t-xs); font-weight: 700; color: var(--gold-dark);
}

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.feature__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lift); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.feature:hover .feature__media img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   15. Resort cards -- image-led, the photograph is the point
   -------------------------------------------------------------------------- */
.resort-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--sp-6); }

.resort-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease), border-color 340ms var(--ease);
}
.resort-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--gold-line); }

.resort-card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--gold-mist); text-decoration: none;
}
.resort-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.resort-card:hover .resort-card__media img { transform: scale(1.06); }

/* A scrim only at the foot of the image, where the type sits */
.resort-card__media::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(var(--ink-rgb), 0.72));
  pointer-events: none;
}

.resort-card__type {
  position: absolute; display: block; top: var(--sp-4); left: var(--sp-4);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gold-dark);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  backdrop-filter: blur(6px);
}

.resort-card__overlay { position: absolute; inset: auto 0 0 0; padding: var(--sp-5) var(--sp-6); color: var(--white); }
.resort-card__name {
  display: block;
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(var(--ink-rgb), 0.5);
}
.resort-card__where {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light);
  margin-top: var(--sp-2); font-weight: 600;
}

.resort-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; }
.resort-card__tagline { font-family: var(--display); font-size: var(--t-lg); color: var(--gold-dark); line-height: 1.3; }
.resort-card__text { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.75; flex: 1; }

.resort-card__facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--t-xs); color: var(--text-faint);
  padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
}
.resort-card__facts span { display: inline-flex; align-items: center; gap: 6px; }
.resort-card__facts span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.resort-card__foot { padding: 0 var(--sp-6) var(--sp-6); }

/* --------------------------------------------------------------------------
   16. Experience cards
   -------------------------------------------------------------------------- */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-5); }

.exp-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.exp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-line); }

.exp-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--gold-mist); overflow: hidden; }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.exp-card:hover .exp-card__media img { transform: scale(1.06); }

.exp-card__tag {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  background: rgba(255, 255, 255, 0.94);
  color: var(--gold-dark);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
  backdrop-filter: blur(6px);
}

.exp-card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.exp-card__title { font-size: var(--t-lg); font-weight: 600; line-height: 1.2; color: var(--text-dark); }
.exp-card__summary { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.7; flex: 1; }
.exp-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--t-xs); color: var(--text-faint);
  padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
}
.exp-card__meta a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.exp-card__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Offers */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }
.offer {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 320px; display: flex; align-items: flex-end;
  color: var(--white); background: var(--gold-dark);
  background-size: cover; background-position: center; text-decoration: none;
}
.offer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .05) 0%, rgba(var(--ink-rgb), .55) 55%, rgba(var(--ink-rgb), .92) 100%);
}
.offer > * { position: relative; padding: var(--sp-5); }
.offer__where { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; }
.offer__title { font-family: var(--display); font-size: var(--t-xl); font-weight: 600; line-height: 1.1; margin-top: var(--sp-2); }
.offer__detail { font-size: var(--t-sm); color: rgba(255, 255, 255, 0.84); margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   17. Signed-in shell
   -------------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail);
  flex: none;
  background: var(--white);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.rail__brand {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  flex: none;
}
.rail__brand a { text-decoration: none; display: inline-block; }
.rail__brand img { height: 52px; width: auto; margin: 0 auto; }
.rail__panel-label {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Only the link list scrolls, and only if it truly has to. */
.rail__nav {
  padding: var(--sp-3) var(--sp-3);
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}
.rail__nav::-webkit-scrollbar { width: 5px; }
.rail__nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.rail__group { margin-bottom: var(--sp-3); }
.rail__group[open] { margin-bottom: var(--sp-4); }

.rail__group-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
  margin: 0;
}
/* When the group is a <details>, its title is the toggle. */
summary.rail__group-title { cursor: pointer; list-style: none; border-radius: var(--r-sm); }
summary.rail__group-title::-webkit-details-marker { display: none; }
summary.rail__group-title:hover { background: var(--gold-mist); color: var(--gold-dark); }
.rail__chevron { transform: rotate(90deg); transition: transform 240ms var(--ease); opacity: .6; }
details[open] > .rail__group-title .rail__chevron { transform: rotate(-90deg); }

.rail__link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 8px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.3;
  text-decoration: none;
  color: var(--text-muted);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.rail__link-body { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rail__link-body > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail__icon { flex: none; opacity: .75; transition: opacity 200ms var(--ease), color 200ms var(--ease); }
.rail__link:hover { background: var(--gold-mist); color: var(--text-dark); }
.rail__link:hover .rail__icon { opacity: 1; color: var(--gold-dark); }

.rail__link[aria-current="page"] {
  background: var(--gold-pale);
  color: var(--gold-dark);
  font-weight: 700;
}
.rail__link[aria-current="page"] .rail__icon { opacity: 1; color: var(--gold-dark); }
.rail__link[aria-current="page"]::before {
  content: "";
  position: absolute; left: -12px; top: 50%;
  width: 3px; height: 62%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  transform: translateY(-50%);
}

.rail__count {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--white);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  flex: none;
}

.rail__foot { padding: var(--sp-3); border-top: 1px solid var(--line-soft); flex: none; }

/* "Go to Website" -- deliberately distinct from the tab links. */
.rail__website {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  background: linear-gradient(120deg, var(--gold-mist), var(--gold-pale));
  color: var(--gold-dark);
  font-size: var(--t-sm); font-weight: 700;
  text-decoration: none;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.rail__website:hover { border-color: var(--gold); transform: translateY(-1px); }
.rail__icon--trail { margin-left: auto; opacity: .55; }

/* Off-canvas scrim for the mobile rail */
.rail-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(var(--ink-rgb), 0.42);
  backdrop-filter: blur(2px);
  animation: fade-in 220ms var(--ease) both;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-7);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 30;
}
.topbar__id { font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0.04em; }
.topbar__id strong { color: var(--text-dark); font-weight: 700; }
.topbar__right { display: flex; align-items: center; gap: var(--sp-4); }

/* The rail already constrains the page, so the content takes the rest of
   the width. A generous max-width still stops text running to 2000px on
   an ultrawide display. */
.content { padding: var(--sp-6) var(--sp-7); flex: 1; width: 100%; max-width: 1680px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}
.page-head p { color: var(--text-muted); font-size: var(--t-sm); margin-top: var(--sp-2); }

/* The Main Referral ID strip */
.referral-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: linear-gradient(120deg, var(--gold-mist), var(--gold-pale));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-sm);
  margin-bottom: var(--sp-6);
}
.referral-strip__code {
  font-family: var(--display);
  font-weight: 700; font-size: var(--t-xl);
  color: var(--gold-dark); letter-spacing: 0.04em;
}

.copy-btn {
  border: 1px solid var(--gold-line);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--gold-dark);
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.copy-btn:hover { background: var(--gold-pale); border-color: var(--gold); transform: translateY(-1px); }

.viewing-banner {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--white);
  padding: var(--sp-3) var(--sp-7);
  font-size: var(--t-sm); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.viewing-banner form { margin: 0; }
.viewing-banner .btn { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); box-shadow: none; }

/* --------------------------------------------------------------------------
   18. Auth screens
   -------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }

.auth__aside {
  padding: var(--sp-8) var(--sp-7);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  text-align: center;
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  color: var(--white);
}
.auth__aside::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(var(--gold-rgb), 0.26) 0%, transparent 60%);
}
.auth__aside > * { position: relative; }
.auth__quote {
  font-family: var(--display);
  font-size: var(--t-2xl); font-weight: 500; line-height: 1.2;
  max-width: 18ch; color: var(--white);
}
.auth__aside-foot {
  font-size: var(--t-xs); color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.2em; text-transform: uppercase;
}

.auth__form { display: grid; place-items: center; padding: var(--sp-8) var(--sp-5); background: var(--white); }
.auth__form-inner { width: 100%; max-width: 400px; animation: fade-up 620ms var(--ease) both; }
.auth__mobile-mark { display: none; }

/* --------------------------------------------------------------------------
   19. Steps, genealogy, QR, misc
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-4); }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-4);
  align-items: start; font-size: var(--t-sm);
}
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 700; color: var(--text-faint);
  transition: all 260ms var(--ease);
}
.steps li[data-state="done"]::before {
  background: var(--ok); border-color: var(--ok); color: var(--white); content: "\2713";
}
.steps li[data-state="active"]::before {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  border-color: transparent; color: var(--white);
  box-shadow: 0 3px 12px rgba(var(--gold-rgb), 0.34);
}
.steps strong { display: block; color: var(--text-dark); }
.steps span { color: var(--text-muted); font-size: var(--t-xs); }

.level-block { margin-bottom: var(--sp-7); }
.level-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.level-head h3 { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; }
.level-head .badge { margin-left: auto; }

.qr-card {
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  text-align: center;
  max-width: 400px; margin: 0 auto;
  box-shadow: var(--shadow-soft);
}
.qr-card__amount { font-family: var(--display); font-size: var(--t-3xl); font-weight: 600; line-height: 1; margin-bottom: var(--sp-5); color: var(--text-dark); }
.qr-card__code { display: inline-block; padding: var(--sp-4); background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r); }
.qr-card__ref { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--text-muted); }
.qr-card__expiry { font-size: var(--t-sm); font-weight: 600; color: var(--gold-dark); margin-top: var(--sp-2); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); font-size: var(--t-sm); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 500; color: var(--text-dark); }

.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

details.disclosure > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; padding: var(--sp-2) 0; color: var(--gold-dark); }
details.disclosure > summary::marker { color: var(--gold); }

/* --------------------------------------------------------------------------
   20. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--text-muted);
}
.pagination__links { display: flex; gap: var(--sp-2); }
.pagination__links a, .pagination__links span {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  background: var(--white);
  transition: all 200ms var(--ease);
}
.pagination__links a:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-mist); }
.pagination__links [aria-current="page"] {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  border-color: transparent; color: var(--white); font-weight: 700;
}
.pagination__links .is-disabled { opacity: 0.4; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--off-white);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
  font-size: var(--t-sm);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 25%, var(--gold) 50%, var(--gold-light) 75%, transparent);
}
.site-footer__inner {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-7);
}
.site-footer h3 {
  font-size: var(--t-xs); color: var(--gold-dark);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: inherit; text-decoration: none; display: block; padding: 4px 0; transition: color 200ms var(--ease); }
.site-footer a:hover { color: var(--gold-dark); }
.site-footer__base {
  max-width: var(--shell); margin: var(--sp-7) auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .appbar__nav--left, .appbar__nav--right { display: none; }
  .appbar__toggle { display: grid; }
  .appbar__sheet { display: block; }
  /* Equal 1fr columns either side, so the logo is dead centre regardless
     of how wide the menu button and the account button happen to be. */
  .appbar__inner { grid-template-columns: 1fr auto 1fr; }
  .appbar__nav--mobile-cta { display: inline-flex; }
  .appbar__brand { justify-self: center; }
  /* 98 - 4 - 26 = 68, so the bar still measures 92px. */
  .appbar__brand {
    width: 130px; height: 98px; padding: 9px;
    margin-top: -4px; margin-bottom: -26px;
    border-radius: var(--r-lg);
  }
  .appbar__brand img { height: 76px; }
}

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .auth__mobile-mark { display: block; }

  .shell { flex-direction: column; }
  .rail {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--line-soft);
    overflow-x: auto;
  }
  .rail__brand { border-bottom: none; border-right: 1px solid var(--line-soft); padding: var(--sp-3) var(--sp-4); flex: none; }
  .rail__brand img { height: 40px; }
  .rail__nav { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); overflow-x: auto; }
  .rail__group { margin: 0; display: flex; gap: var(--sp-2); }
  .rail__group-title { display: none; }
  .rail__link { white-space: nowrap; }
  .rail__link::before { display: none; }
  .rail__foot { display: none; }

  .content { padding: var(--sp-5) var(--sp-4); }
  .topbar { padding: var(--sp-3) var(--sp-4); }
  .section { padding: var(--sp-8) var(--sp-4); }
  .hero__inner { padding: var(--sp-8) var(--sp-4); }

  .feature { grid-template-columns: 1fr; gap: var(--sp-5); }
  .resort-grid { grid-template-columns: 1fr; }
  .register__thumb { width: 128px; height: 86px; }
  .panel__head, .panel__body { padding: var(--sp-5); }
}

@media (max-width: 620px) {
  :root { --appbar-h: 68px; }
  /* The bar's content row is 44px here; 80 - 4 - 32 = 44. */
  .appbar__brand {
    width: 104px; height: 80px; padding: 7px;
    margin-top: -4px; margin-bottom: -32px;
    border-radius: var(--r);
    box-shadow: 0 8px 20px rgba(var(--ink-rgb), 0.12);
  }
  .appbar__brand img { height: 62px; }
  .passbook { padding: var(--sp-5); }
  .passbook__value { font-size: var(--t-2xl); }
  .register__thumb { display: none; }
  .register__item:hover { padding-left: 0; }
  .membership { font-size: var(--t-xs); }
  .membership th, .membership td { padding: var(--sp-3) var(--sp-2); }
  .page-head { gap: var(--sp-3); }
  .exp-grid, .resort-grid { grid-template-columns: 1fr; }
  .hero { min-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .rail, .topbar, .appbar, .site-footer,
  .actions, .btn, .filters, .pagination, .referral-strip { display: none !important; }

  body { background: #fff; }
  .content { padding: 0; max-width: none; }
  .panel, .qr-card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .table { min-width: 0; font-size: 11px; }
  .qr-card { max-width: none; }
  .passbook { background: #fff !important; color: #000 !important; border: 1px solid #999; box-shadow: none; }
  .passbook__label, .passbook__note { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   24. Portal topbar
   -------------------------------------------------------------------------- */
.topbar__left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }

.topbar__menu {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--text-dark);
  cursor: pointer;
  place-items: center;
  flex: none;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.topbar__menu:hover { border-color: var(--gold); background: var(--gold-mist); color: var(--gold-dark); }

.topbar__website,
.topbar__action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: color 220ms var(--ease), background 220ms var(--ease),
              border-color 220ms var(--ease), transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.topbar__action:hover { color: var(--gold-dark); background: var(--gold-mist); }

/* The route back to the public site reads as an accent, not another tab. */
.topbar__website {
  color: var(--gold-dark);
  border-color: var(--gold-line);
  background: linear-gradient(120deg, var(--gold-mist), var(--gold-pale));
}
.topbar__website:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--gold-rgb), 0.18);
}

/* --------------------------------------------------------------------------
   25. Route progress + content swap
   -------------------------------------------------------------------------- */
.route-progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2.5px; width: 0;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
  opacity: 0;
  transition: width 300ms var(--ease), opacity 200ms var(--ease);
}
.route-progress.is-loading { width: 72%; opacity: 1; transition-duration: 900ms; }
.route-progress.is-done    { width: 100%; opacity: 1; transition-duration: 180ms; }

#pjax { transition: opacity 200ms var(--ease); }
#pjax.is-swapping { opacity: 0.45; }

/* --------------------------------------------------------------------------
   26. Register / auth split form
   -------------------------------------------------------------------------- */
.auth--wide { grid-template-columns: 0.9fr 1.1fr; }
.auth--wide .auth__form-inner { max-width: 640px; }

/* Two columns of fields on desktop, so registration fits without scrolling. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.form-grid > .field--full { grid-column: 1 / -1; }

.auth__form--compact { padding: var(--sp-6) var(--sp-6); align-items: center; }
.auth__form--compact .field { margin-bottom: var(--sp-4); }
.auth__form--compact .input,
.auth__form--compact .select { padding: 11px 14px; font-size: var(--t-base); }
.auth__form--compact .field > label { font-size: var(--t-base); margin-bottom: 6px; }

.auth__intro { margin-bottom: var(--sp-5); }
.auth__intro h1 {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.15;
}
.auth__intro p { color: var(--text-muted); font-size: var(--t-sm); margin-top: 6px; }

/* A required marker that is visible without shouting */
.req { color: var(--gold-dark); font-weight: 700; margin-left: 3px; }

/* The aside on the register screen carries the reasons to join */
.auth__points { display: grid; gap: var(--sp-4); text-align: left; max-width: 300px; margin: 0 auto; }
.auth__point { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); align-items: start; }
.auth__point-mark {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--gold-light);
}
.auth__point strong { display: block; color: var(--white); font-size: var(--t-sm); }
.auth__point span { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.72); line-height: 1.6; }

/* --------------------------------------------------------------------------
   27. Step flow -- the joining process
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  position: relative;
}

/* The connecting line runs behind the numbers, between first and last. */
.flow::before {
  content: "";
  position: absolute;
  top: 31px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-line), var(--gold), var(--gold-line));
  z-index: 0;
}

.flow__step { position: relative; z-index: 1; text-align: center; }

.flow__num {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--gold-line);
  color: var(--gold-dark);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.14);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.flow__step:hover .flow__num {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.flow__badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 25px; height: 25px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--white);
  font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.35);
}

.flow__title { font-family: var(--display); font-size: var(--t-md); font-weight: 700; color: var(--text-dark); }
.flow__text  { font-size: var(--t-sm); color: var(--text-muted); margin-top: 6px; line-height: 1.65; }

.section--dark .flow__num { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: var(--gold-light); }
.section--dark .flow__title { color: var(--white); }
.section--dark .flow__text { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before {
    top: 32px; bottom: 32px; left: 31px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--gold-line), var(--gold), var(--gold-line));
  }
  .flow__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--sp-4);
    text-align: left;
    padding-bottom: var(--sp-6);
    align-items: start;
  }
  .flow__num { margin: 0; }
}

/* --------------------------------------------------------------------------
   28. Address cards
   -------------------------------------------------------------------------- */
.address-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--sp-5); }

.address-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-soft);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.address-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-line); }

.address-card__pin {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-mist), var(--gold-pale));
  border: 1px solid var(--gold-line);
  color: var(--gold-dark);
  margin-bottom: var(--sp-2);
}

.address-card__name { font-family: var(--display); font-size: var(--t-lg); font-weight: 700; color: var(--text-dark); }
.address-card__type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-dark);
}
.address-card__lines { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.7; }
.address-card__contact {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 7px; font-size: var(--t-sm);
}
.address-card__contact a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-dark); text-decoration: none; font-weight: 600;
}
.address-card__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.address-card__contact span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   29. Portal responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .topbar__website span { display: none; }
  .topbar__website { padding: 8px 11px; }
}

@media (max-width: 960px) {
  /* The rail becomes an off-canvas drawer rather than a horizontal strip,
     so every tab stays reachable without sideways scrolling. */
  .shell { flex-direction: row; }

  .rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    width: 284px; height: 100vh;
    transform: translateX(-102%);
    transition: transform 320ms var(--ease);
    box-shadow: var(--shadow-lift);
    border-right: 1px solid var(--line);
    flex-direction: column;
  }
  .rail.is-open { transform: none; }
  .rail__nav { display: block; padding: var(--sp-3); }
  .rail__group { display: block; margin-bottom: var(--sp-3); }
  .rail__group-title { display: flex; }
  .rail__foot { display: block; }
  .rail__brand { border-bottom: 1px solid var(--line-soft); border-right: none; padding: var(--sp-4); }
  .rail__brand img { height: 46px; }
  .rail__link { white-space: normal; }

  .topbar__menu { display: grid; }
  .topbar { padding: var(--sp-3) var(--sp-4); }
  .content { padding: var(--sp-5) var(--sp-4); }

  .form-grid { grid-template-columns: 1fr; }
  .auth--wide { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar__action span { display: none; }
  .topbar__id { font-size: 11px; }
  .address-grid { grid-template-columns: 1fr; }
  .auth__form--compact { padding: var(--sp-5) var(--sp-4); }
}

/* --------------------------------------------------------------------------
   30. Carousel

   Replaces the scrolling strip on the homepage, so no horizontal scrollbar
   ever reaches the page. The track is a flex row translated by percentage;
   only transform animates, so it stays smooth on a phone.
   -------------------------------------------------------------------------- */
.carousel { position: relative; }

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  background: var(--gold-mist);
}

.carousel__track {
  display: flex;
  transition: transform 620ms var(--ease);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}
.carousel__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Caption sits over the foot of the photograph */
.carousel__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6);
  background: linear-gradient(180deg, transparent, rgba(var(--ink-rgb), 0.82));
  color: var(--white);
}
.carousel__place {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(var(--ink-rgb), 0.5);
}
.carousel__where {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin-top: 4px;
}

/* Controls */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gold-dark);
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
  transition: background 220ms var(--ease), border-color 220ms var(--ease),
              transform 220ms var(--ease), opacity 220ms var(--ease);
  z-index: 2;
}
.carousel__btn:hover { background: var(--white); border-color: var(--gold); transform: translateY(-50%) scale(1.06); }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel__btn--prev { left: var(--sp-4); }
.carousel__btn--next { right: var(--sp-4); }
.carousel__btn--prev svg { transform: rotate(180deg); }

.carousel__dots {
  display: flex; justify-content: center; align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.carousel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 260ms var(--ease);
}
.carousel__dot:hover { border-color: var(--gold); }
.carousel__dot[aria-current="true"] {
  width: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-dark));
  border-color: transparent;
}

@media (max-width: 620px) {
  .carousel__btn { width: 42px; height: 42px; }
  .carousel__btn--prev { left: var(--sp-2); }
  .carousel__btn--next { right: var(--sp-2); }
  .carousel__caption { padding: var(--sp-4); }
  .carousel__place { font-size: var(--t-md); }
  .carousel__slide img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   31. Destination cards -- About page
   -------------------------------------------------------------------------- */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

.dest-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 3 / 4;
  background: var(--gold-mist);
  box-shadow: var(--shadow-soft);
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}
.dest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.dest-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.dest-card:hover img { transform: scale(1.08); }

.dest-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.05) 35%, rgba(var(--ink-rgb), 0.86) 100%);
}

/* A gold rule that draws itself across the card on hover */
.dest-card__body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-5);
  color: var(--white);
  z-index: 1;
}
.dest-card__rule {
  display: block;
  height: 2px; width: 32px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  margin-bottom: var(--sp-3);
  transition: width 420ms var(--ease);
}
.dest-card:hover .dest-card__rule { width: 72px; }

.dest-card__name {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(var(--ink-rgb), 0.5);
}
.dest-card__where {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin-top: 5px;
}

@media (max-width: 1024px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .dest-grid { grid-template-columns: 1fr; } .dest-card { aspect-ratio: 16 / 10; } }

/* --------------------------------------------------------------------------
   32. Closing call to action -- gold, never plain black
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--gold-mist) 0%, var(--white) 55%),
    var(--white);
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-soft);
}

/* A gold rule across the top edge, matching the passbook and figure tiles */
.cta::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark), var(--gold), var(--gold-light));
}

.cta__mark { width: 110px; height: auto; margin: 0 auto var(--sp-5); }

/* The full lockup, shown large and at its own aspect ratio. height:auto
   plus max-width keeps it from ever being cropped or stretched. */
.cta__logo {
  width: min(320px, 72vw);
  height: auto;
  max-width: 100%;
  margin: 0 auto var(--sp-5);
  display: block;
}
@media (max-width: 620px) {
  .cta__logo { width: min(230px, 78vw); }
  .cta__mark { width: 84px; }
  .cta { padding: var(--sp-8) var(--sp-4); }
}

.cta__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, var(--t-3xl));
  font-weight: 700;
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 auto;
  /* Gold on gold-tinted white, so the headline carries the theme rather
     than sitting there in black. */
  background: linear-gradient(120deg, var(--gold-dark) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Browsers without background-clip:text still get a gold headline. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cta__title { color: var(--gold-dark); -webkit-text-fill-color: currentColor; }
}

.cta__lede {
  font-size: var(--t-md);
  color: var(--text-muted);
  max-width: 48ch;
  margin: var(--sp-4) auto 0;
}
.cta__lede strong { color: var(--gold-dark); font-weight: 700; }

.cta__actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   33. Contact page split
   -------------------------------------------------------------------------- */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }

.contact-visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--gold-mist);
}
.contact-visual__media { position: relative; aspect-ratio: 4 / 3; }
.contact-visual__media img { width: 100%; height: 100%; object-fit: cover; }

.contact-visual__map { display: block; width: 100%; height: 340px; border: 0; }

.contact-visual__overlay {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-6);
  background: linear-gradient(180deg, transparent, rgba(var(--ink-rgb), 0.86));
  color: var(--white);
}
.contact-visual__title { font-family: var(--display); font-size: var(--t-xl); font-weight: 700; }
.contact-visual__sub { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-top: 4px; font-weight: 700; }

/* The office details, sitting under the visual */
.contact-facts { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.contact-fact { display: grid; grid-template-columns: 42px 1fr; gap: var(--sp-4); align-items: start; }
.contact-fact__mark {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-mist), var(--gold-pale));
  border: 1px solid var(--gold-line);
  color: var(--gold-dark);
}
.contact-fact__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-dark);
}
.contact-fact__value { font-size: var(--t-sm); color: var(--text-dark); margin-top: 2px; }
.contact-fact__value a { color: var(--text-dark); text-decoration: none; }
.contact-fact__value a:hover { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .contact-visual__map { height: 280px; }
}

/* --------------------------------------------------------------------------
   34. Round-4 corrections
   -------------------------------------------------------------------------- */

/* --- About: destinations as a compact 2x2 --------------------------------- */
.dest-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
  gap: var(--sp-4);
}
.dest-card { aspect-ratio: 16 / 11; }
.dest-card__body { padding: var(--sp-4); }
.dest-card__name { font-size: var(--t-md); }
.dest-card__where { font-size: 10px; margin-top: 3px; }
.dest-card__rule { width: 26px; margin-bottom: var(--sp-2); }
.dest-card:hover .dest-card__rule { width: 54px; }

@media (max-width: 620px) {
  .dest-grid { grid-template-columns: 1fr; max-width: 420px; }
  .dest-card { aspect-ratio: 16 / 10; }
}

/* --- The closing panel: a calmer, better balanced block -------------------- */
.cta { padding: var(--sp-8) var(--sp-6); }

/* The full lockup, sized so it leads without dominating. Centred by its own
   auto margins, not by inherited text-align, so it cannot drift. */
.cta__logo {
  width: 190px;
  max-width: 62vw;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-5);
}
.cta__mark {
  width: 76px;
  height: auto;
  display: block;
  margin: 0 auto var(--sp-4);
}
.cta .eyebrow { justify-content: center; margin-bottom: var(--sp-3); }
.cta__title { max-width: 22ch; }
.cta__lede { max-width: 46ch; }

@media (max-width: 620px) {
  .cta { padding: var(--sp-7) var(--sp-4); }
  .cta__logo { width: 150px; }
  .cta__mark { width: 62px; }
}

/* --- Carousel: a touch larger, and never taller than the viewport ---------- */
.carousel__slide img {
  aspect-ratio: 16 / 9;
  max-height: 62vh;
}
.carousel__viewport { background: var(--gold-mist); }

/* Keep the controls clear of the caption text on small screens */
@media (max-width: 720px) {
  .carousel__slide img { aspect-ratio: 4 / 3; max-height: 56vh; }
  .carousel__btn { top: 38%; }
}

/* --- Contact: one card, two equal halves ---------------------------------- */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* The map fills its half completely, so both columns end level. */
.contact-card__visual { position: relative; min-height: 100%; background: var(--gold-mist); }
.contact-card__visual iframe,
.contact-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.contact-card__form { padding: var(--sp-7); }
.contact-card__form h2 { margin-bottom: var(--sp-2); }

/* A caption pinned to the foot of the map */
.contact-card__pin {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-soft);
}
.contact-card__pin-mark { color: var(--gold-dark); flex: none; }
.contact-card__pin-name { font-weight: 700; font-size: var(--t-sm); color: var(--text-dark); line-height: 1.3; }
.contact-card__pin-where { font-size: var(--t-xs); color: var(--text-muted); }

/* The four facts sit below the card, evenly weighted */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.contact-tile {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: var(--sp-5);
  text-align: center;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--gold-line); }
.contact-tile__mark {
  width: 42px; height: 42px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-mist), var(--gold-pale));
  border: 1px solid var(--gold-line);
  color: var(--gold-dark);
}
.contact-tile__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-dark);
}
.contact-tile__value { font-size: var(--t-sm); color: var(--text-dark); margin-top: 4px; word-break: break-word; }
.contact-tile__value a { color: inherit; text-decoration: none; }
.contact-tile__value a:hover { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .contact-card { grid-template-columns: 1fr; }
  /* Stacked, the map needs an explicit height since it no longer has a
     sibling to match. */
  .contact-card__visual { min-height: 320px; }
  .contact-card__form { padding: var(--sp-6) var(--sp-5); }
  .contact-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .contact-strip { grid-template-columns: 1fr; }
  .contact-card__visual { min-height: 260px; }
}

/* --------------------------------------------------------------------------
   35. Home -- the membership comparison

   Every rule is scoped to .membership-section. .section-lead, .membership and
   .table-wrap are shared with the packages page and the admin panels, so their
   base rules must keep working untouched.
   -------------------------------------------------------------------------- */

/* --- The lead ------------------------------------------------------------- */
/* Centred and stacked. The old two-column .section-lead squeezed the heading
   into a half-width column, breaking it over three lines, while the lede sat
   bottom-aligned far to the right with nothing tying them together. */
.membership-lead {
  /* An explicit width, not ch: ch resolves against this element's 16px body
     font, which capped the 48px heading at ~628px and forced a third line. */
  max-width: 820px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.membership-lead .eyebrow { justify-content: center; }
.membership-lead__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, var(--t-3xl));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  /* Wide enough for two lines rather than three, and balanced so the second
     line is not left as a short orphan. text-wrap is progressive: browsers
     without it simply get the normal greedy break inside the same width. */
  /* em, so the limit scales with the heading itself */
  max-width: 16em;
  text-wrap: balance;
  margin: var(--sp-3) auto 0;
}
.membership-lead__lede {
  margin: var(--sp-4) auto 0;
  max-width: 56ch;
}

/* --- The card ------------------------------------------------------------- */
/* The comparison reads as a considered document rather than a bare grid
   floating on the page ground. */
.membership-card {
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.membership-section .membership {
  /* fixed layout gives the tiers equal width; previously they bunched to the
     left and left a wide empty gutter on the right */
  table-layout: fixed;
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.membership-section .membership th,
.membership-section .membership td {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
}

/* The label column is a legend: left aligned, narrower, quieter. */
.membership-section .membership th:first-child,
.membership-section .membership td:first-child {
  text-align: left;
  width: 30%;
  padding-left: var(--sp-6);
}

/* --- Header band ---------------------------------------------------------- */
.membership-section .membership thead th {
  position: relative;
  background: linear-gradient(180deg, var(--gold-mist), var(--white));
  border-bottom: 1px solid var(--gold-line);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-dark);
}
/* A short gold rule beneath each tier name. */
.membership-section .membership thead th:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.membership-section .membership thead th:first-child {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* --- Rows ----------------------------------------------------------------- */
.membership-section .membership__row-label {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: normal;
}

.membership-section .membership__price {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.1vw, var(--t-xl));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

/* "You receive" is what the member actually gets, so it is the loudest line
   in the table and the only tinted row. */
.membership__row--hero th,
.membership__row--hero td {
  background: var(--gold-mist);
  border-bottom-color: var(--gold-line);
}
.membership-section .membership__credit {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5vw, var(--t-2xl));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gold-dark);
}

.membership-section .membership__term {
  color: var(--text-muted);
  font-size: var(--t-sm);
}

/* Yes / No as quiet badges. The words themselves are unchanged. */
.membership__flag {
  display: inline-block;
  min-width: 56px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--gold-mist);
  border: 1px solid var(--gold-line);
  color: var(--gold-dark);
}
.membership__flag--no {
  background: #f5f6f5;
  border-color: var(--line);
  color: var(--text-muted);
}

/* The card edge already closes the table; a final hairline doubles it. */
.membership-section .membership tbody tr:last-child th,
.membership-section .membership tbody tr:last-child td { border-bottom: 0; }

.membership-cta {
  text-align: center;
  margin-top: var(--sp-6);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .membership-section .membership { min-width: 580px; }
  .membership-section .membership th,
  .membership-section .membership td { padding: var(--sp-4) var(--sp-3); }
  .membership-section .membership th:first-child,
  .membership-section .membership td:first-child { padding-left: var(--sp-5); }
}

@media (max-width: 620px) {
  .membership-lead { margin-bottom: var(--sp-6); }
  .membership-section .membership { min-width: 480px; font-size: var(--t-xs); }
  .membership-section .membership th,
  .membership-section .membership td { padding: var(--sp-4) var(--sp-2); }

  /* The labels stay pinned while the tiers scroll, so a value is never
     stranded without knowing which row it belongs to. */
  .membership-section .membership th:first-child,
  .membership-section .membership td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 34%;
    padding-left: var(--sp-4);
    background: var(--white);
    box-shadow: 1px 0 0 var(--line-soft);
  }
  .membership-section .membership thead th:first-child { background: var(--gold-mist); }
  .membership__row--hero th:first-child { background: var(--gold-mist); }

  .membership-section .membership thead th { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .membership__flag { min-width: 0; padding: 4px 10px; }
}

/* --------------------------------------------------------------------------
   36. Round-6 changes
   -------------------------------------------------------------------------- */

/* --- Home membership: the action sits beside the heading ------------------ */
/* Replaces the centred stack from round 5. The heading block takes the left,
   the button the right, and they share one baseline. */
.membership-lead {
  max-width: none;
  margin: 0 0 var(--sp-7);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--sp-6);
}
.membership-lead .eyebrow { justify-content: flex-start; }
.membership-lead__text { min-width: 0; }
.membership-lead__title {
  /* Left-aligned now, so the em cap can relax a little. */
  max-width: 20em;
  margin: var(--sp-3) 0 0;
}
.membership-lead__lede { margin: var(--sp-4) 0 0; max-width: 60ch; }

/* Sits on the heading's baseline, and never squeezes. */
.membership-lead__action {
  justify-self: end;
  align-self: end;
  white-space: nowrap;
  flex: none;
}

/* The old centred button below the table is gone from the markup; keep the
   rule harmless in case a cached page still carries it. */
.membership-cta { display: none; }

@media (max-width: 860px) {
  /* One column: the action drops beneath the text and spans the width, which
     is a far better tap target than a right-floated button on a phone. */
  .membership-lead {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
  }
  .membership-lead__action { justify-self: stretch; text-align: center; }
}

/* --- Destination cards, three across -------------------------------------- */
/* .dest-grid is 2x2 by default (About). This modifier is the only difference
   for the resort page's "Other Kingdom addresses". */
.dest-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
}
@media (max-width: 980px) {
  .dest-grid--3 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 620px) {
  .dest-grid--3 { grid-template-columns: 1fr; max-width: 420px; }
}

/* --- Wallet terms --------------------------------------------------------- */
.terms-page__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.terms-hero { text-align: center; margin-bottom: var(--sp-8); }
.terms-hero__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, var(--t-3xl));
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 16em;
  margin: var(--sp-3) auto 0;
  text-wrap: balance;
}
/* The same gold hairline that closes the lockup, used as a full stop. */
.terms-hero__rule {
  display: block;
  width: 120px;
  height: 1px;
  margin: var(--sp-5) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Each term on its own card, numbered in the display face. */
.terms-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Two across. In one column the short terms left most of each card empty;
     paired up, the text fills its card and the rhythm matches the notes
     panels below. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.terms-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease),
              transform 280ms var(--ease);
}
.terms-card:hover {
  border-color: var(--gold-line);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.terms-card__num {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-mist), var(--gold-pale));
  border: 1px solid var(--gold-line);
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
}
.terms-card__text {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.72;
  color: var(--text-dark);
}

/* The two explanations, as a matched pair. */
.terms-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.terms-note {
  padding: var(--sp-6);
  background: linear-gradient(180deg, var(--gold-mist), var(--white) 60%);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
}
.terms-note__mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gold-line);
  color: var(--gold-dark);
  margin-bottom: var(--sp-4);
}
.terms-note__title {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 var(--sp-3);
}
.terms-note__body {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-sm);
  line-height: 1.75;
  color: var(--text-muted);
}
.terms-note__body:last-child { margin-bottom: 0; }
.terms-note__body strong { color: var(--text-dark); font-weight: 700; }

.terms-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

@media (max-width: 860px) {
  .terms-notes { grid-template-columns: 1fr; }
  .terms-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .terms-hero { margin-bottom: var(--sp-6); }
  .terms-card { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  .terms-card__num { width: 38px; height: 38px; font-size: var(--t-base); }
  .terms-card__text { font-size: var(--t-base); line-height: 1.68; }
  .terms-note { padding: var(--sp-5); }
  .terms-actions > .btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   37. Round-7 fixes
   -------------------------------------------------------------------------- */

/* --- A row of buttons that keeps its spacing once it wraps ---------------- */
/* Adjacent inline .btn elements had no vertical gap, so on a phone the two
   stacked buttons sat flush against each other. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.btn-row--center { justify-content: center; }

@media (max-width: 620px) {
  /* Stacked and full width: a clear separation and a better tap target. */
  .btn-row { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .btn-row > .btn { width: 100%; justify-content: center; text-align: center; }
}

/* --- Footer, centred on small screens ------------------------------------- */
@media (max-width: 720px) {
  .site-footer { text-align: center; }
  .site-footer__inner { gap: var(--sp-6); justify-items: center; }
  .site-footer h3 { margin-bottom: var(--sp-3); }
  .site-footer__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
  }
}

/* --- Portal topbar on small screens --------------------------------------- */
/*
   The labels are hidden as the bar narrows, which left 16px icons floating in
   a pill sized for text -- tiny, and with no visible target. Sign out kept its
   fully round .btn shape next to them, so the row read as a lozenge among
   stray glyphs. Give every control the same 40px square-ish footprint the
   menu button already uses.
*/
@media (max-width: 1080px) {
  .topbar__website {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r);
    flex: none;
  }
  .topbar__website svg { width: 19px; height: 19px; }
}

@media (max-width: 960px) {
  .topbar__right { gap: var(--sp-2); }

  .topbar__action span { display: none; }
  .topbar__action {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r);
    flex: none;
    /* Was a transparent border with no fill, so the icon had no edge at all. */
    border-color: var(--line);
    background: var(--white);
    color: var(--text-dark);
  }
  .topbar__action svg { width: 19px; height: 19px; }
  .topbar__action:hover { border-color: var(--gold); }

  /* Matches the height and corner of the icon buttons beside it. */
  .topbar__right form .btn {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r);
    font-size: var(--t-sm);
    white-space: nowrap;
  }

  .topbar { gap: var(--sp-3); }
}

@media (max-width: 360px) {
  /* Only at the very narrowest widths does the customer ID line give way --
     never the controls, which keep their size and stay reachable. At 390px
     there is still room for both. */
  .topbar__id { display: none; }
}

/* --- Admin: payment proof, image or PDF ----------------------------------- */
.proof-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--gold-dark);
  font-size: var(--t-xs);
  font-weight: 600;
}
.proof-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.proof-link__thumb {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--gold-mist);
  display: block;
}
.proof-link__doc {
  width: 54px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--gold-line);
  background: var(--gold-mist);
  color: var(--gold-dark);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.proof-missing { color: var(--text-muted); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   38. Round-9: the mobile menu, and the portal on a phone
   -------------------------------------------------------------------------- */

/* --- Public site menu sheet ----------------------------------------------
   Now a sibling of .appbar rather than a child of it, so position:fixed
   resolves against the viewport. (Inside .appbar it could not: that element's
   backdrop-filter makes it the containing block for fixed descendants.)

   Fixed means the sheet is on screen wherever the page is scrolled -- top,
   middle or hard against the footer -- and it scrolls internally rather than
   clipping, which the old max-height:480px did to its own 507px of content.
   -------------------------------------------------------------------------- */
.appbar__sheet {
  position: fixed;
  top: var(--appbar-h);
  left: 0;
  right: 0;
  z-index: 88;                    /* under .appbar (90), over page content */

  /* display is deliberately untouched: the base rule hides the sheet and the
     <=1024px block reveals it. Re-declaring it here would land later in the
     cascade and hide the menu on the very screens that need it. */
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--gold-line);
  box-shadow: 0 18px 40px rgba(var(--ink-rgb), 0.16);

  /* Collapsed by default; opens to whatever the viewport can give it. */
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms var(--ease);
}

.appbar__sheet.is-open {
  max-height: calc(100vh - var(--appbar-h));
  max-height: calc(100dvh - var(--appbar-h));   /* honours mobile browser chrome */
  overflow-y: auto;
  overscroll-behavior: contain;                 /* no scroll chaining to the page */
  -webkit-overflow-scrolling: touch;
}

/* Sits under the sheet and over everything else; taps close the menu, and
   touch-action stops the page scrolling behind it. */
.appbar-scrim {
  position: fixed;
  inset: 0;
  z-index: 87;
  background: rgba(var(--ink-rgb), 0.42);
  backdrop-filter: blur(2px);
  touch-action: none;
}
.appbar-scrim[hidden] { display: none; }

/* --- Portal rail ---------------------------------------------------------- */
@media (max-width: 960px) {
  /* Keeps a flick inside the drawer from scrolling the page behind it, now
     that the body's overflow is left alone. */
  .rail { overscroll-behavior: contain; }
  .rail-scrim { touch-action: none; }
}

/* --- Portal content on a phone -------------------------------------------- */
@media (max-width: 720px) {
  /*
     .page-head and .panel__head are flex rows with the title on one side and
     an action on the other. At phone widths that squeezed a wrapping heading
     against a button -- "Kingdom" beside "Pay at an outlet", "Finish setting
     up your membership" beside its step badge. Stack them.
  */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }
  .page-head > * { min-width: 0; }
  .page-head .actions,
  .page-head .btn { align-self: flex-start; }

  .panel__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-5);
  }
  .panel__body { padding: var(--sp-5); }
  .panel__foot { padding: var(--sp-4) var(--sp-5); }

  /* Four full-width stat cards made the dashboard needlessly long. */
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

  .figure-tile { padding: var(--sp-4); }

  /* The wallet card's buttons: even widths, and a real gap once they wrap. */
  .passbook__actions { gap: var(--sp-3); }
  .passbook__actions .btn { flex: 1 1 calc(50% - var(--sp-3)); justify-content: center; }
}

@media (max-width: 380px) {
  /* Two-up still reads cleanly at 390px; only below this do the figures in a
     stat card start to crowd. */
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .passbook__actions .btn { flex: 1 1 100%; }
}

/* The customer ID sits on one line rather than wrapping under its label. */
@media (max-width: 960px) {
  .topbar__id { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* ===========================================================================
   Choose Currency

   Two homes, one control: the member portal topbar and the public app bar.
   Both are already crowded, so it stays as small as a select can be -- a
   globe, a code, and nothing else. The Apply button exists only for visitors
   without JavaScript; app.js hides it and submits on change.

   The rate line beneath is deliberately quiet. It is reassurance, not a
   headline: a member who wants to know why a figure looks the way it does can
   find the rate without it competing with the balance above.
   =========================================================================== */

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

.currency-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.currency-switch__label {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  margin: 0;
}

.currency-switch__icon { display: block; }

.currency-switch__select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--text-dark);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 22px 4px 8px;
  cursor: pointer;
  /* The chevron is drawn rather than loaded: the CSP on this host blocks
     external images, and an inline data: URI here would be one more thing
     to keep in step with the palette. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 10px center, right 6px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.currency-switch__select:hover { border-color: var(--gold-line); }

.currency-switch__select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.currency-switch__note {
  font-size: var(--t-xs);
  color: var(--text-faint);
  margin: 0;
  white-space: nowrap;
}

.currency-switch__warn { color: var(--warn); }

/* On the public bar the note would break the three-column grid, so it is
   folded away there and the select alone carries the choice. */
.currency-switch__note--appbar { display: none; }

.currency-switch--appbar .currency-switch__select {
  border-color: transparent;
  color: inherit;
}

/* Below the portal breakpoint the topbar is tight enough that the rate line
   has to go; the select keeps the choice reachable. */
@media (max-width: 960px) {
  .currency-switch__note { display: none; }
  .currency-switch__select { padding-right: 20px; }
}

/* The public bar collapses to a logo and two controls on a phone. The
   currency select is not one of them -- it lives in the portal, where the
   balances that need it are. */
@media (max-width: 1024px) {
  .currency-switch--appbar { display: none; }
}

/* ===========================================================================
   Buttons on a dark surface

   The hero and the error page put a ghost button over a photograph, and both
   used to force `style="color:#fff"` inline. That looked right until you
   hovered: .btn--ghost:hover paints --gold-mist (#fdfaf1) behind the label,
   and the inline colour -- being inline -- won, leaving white text on a
   near-white ground. The button effectively disappeared under the cursor.

   Handled as a proper modifier instead, so the hover state is defined
   alongside the resting state and the two cannot drift apart again. The fill
   lifts rather than inverts, which keeps the label white and readable
   throughout and preserves the glass look over the photograph.
   =========================================================================== */

.btn--on-dark {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.38);
  color: var(--white);
  backdrop-filter: blur(2px);
  box-shadow: none;
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* The sheen overlay on .btn is tuned for the gold fill and reads as a smear
   over a photograph. */
.btn--on-dark::after { display: none; }

/* Windows high-contrast mode drops background colours entirely; without this
   the label would sit on the raw photograph with no plate behind it. */
@media (forced-colors: active) {
  .btn--on-dark { border-color: ButtonText; color: ButtonText; }
}

/* ===========================================================================
   Section heading with an action on the right

   Heading and button share a row on desktop and stack on a phone. Wrapping
   rather than a media query means the break happens when the two actually
   stop fitting, whatever the heading says.
   =========================================================================== */

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
}

.section-head-row__text {
  flex: 1 1 28ch;      /* wraps once the heading can no longer hold its line */
  min-width: 0;        /* lets a long word shrink instead of forcing overflow */
}

.section-head-row__action { flex: 0 0 auto; }

@media (max-width: 640px) {
  .section-head-row { gap: var(--sp-4); }
  .section-head-row__action { width: 100%; }
}

/* ===========================================================================
   Icons inside buttons

   .btn is already an inline-flex row with a gap, so an icon needs nothing but
   a guard against being squashed when the label is long.
   =========================================================================== */

.btn > svg {
  flex: 0 0 auto;
  /* Optical centring: these glyphs are drawn on a 24-grid whose visual mass
     sits a hair high next to a cap-height label. */
  margin-top: -1px;
}

.btn--sm > svg { margin-top: 0; }