/* Premium Membership on Home below Signature Dishes, and after the main action on Menu and Private Dining. Three tiers with Platinum
   featured. Publication authorised 26 October 2026 (Home, #60); Menu and Private Dining 27 October.
   Prices are Cabinet Grotesk, which carries the rupee sign. */
#membership {
  --mb-ink: #211008;
  --mb-ink-2: #57493e;
  --mb-muted: #6b5848;
  --mb-faint: #857261;
  --mb-paper: #f3efe7;
  --mb-sheet: #ebe2d6;
  --mb-sheet-2: #d9ccb9;
  --mb-wine: #5d0b0e;
  --mb-gold: #86652f;
  --mb-silver: #6f6c68;
  --mb-pad: clamp(20px, 5vw, 76px);
  --mb-display: "Cabinet Grotesk", "Libre Franklin", Arial, sans-serif;
  --mb-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  scroll-margin-top: 96px;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--mb-pad);
  color: var(--mb-ink);
  font-family: var(--mb-body);
}
/* Scoped by id so page stylesheets (Private Dining zeroes h2 and p margins) cannot reach it. */
#membership h2 { margin: 0; font: 800 clamp(34px, 4.3vw, 72px)/1.04 var(--mb-display); letter-spacing: -.035em; text-wrap: balance; }
@media (min-width: 760px) { #membership h2 { white-space: nowrap; } }
:where(#membership) h3 { margin: 0; }
:where(#membership) p { margin: 0; }
:where(#membership) ul { list-style: none; margin: 0; padding: 0; }
#membership .mb-lede { margin-top: 22px; color: var(--mb-ink-2); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.4; }
/* "by invitation upon inquiry." moves to the next line as one piece, and wraps inside itself only when
   it is wider than the line (large text settings), so it never clips the way white-space: nowrap did. */
#membership .mb-nowrap { display: inline-block; }
#membership .mb-terms { margin-top: 20px; color: var(--mb-ink-2); font-size: 14px; line-height: 1.5; }
#membership .mb-footnote { margin-top: 4px; }
#membership .mb-gold h3 { color: var(--mb-gold); }
#membership .mb-silver h3 { color: var(--mb-silver); }
/* Featured tier: a small "Best Value" badge in the top-right corner, in the darker wine with the gold
   lettering of Kalai's member card. Out of the flow, so all three cards keep the same size and rows. */
#membership .mb-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #45070a;
  color: #dcbd8a;
  white-space: nowrap;
  font: 700 11.5px/1 var(--mb-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Track B */
.track-b .mb-head { margin: 0 auto clamp(28px, 3.4vw, 48px); text-align: center; }
.track-b .mb-head .mb-lede { max-width: 46ch; margin-inline: auto; }
.track-b .mb-tiers { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .track-b .mb-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.track-b .mb-tier { position: relative; border-radius: 20px; padding: 24px 22px 26px; background: var(--mb-sheet); display: flex; flex-direction: column; gap: 16px; transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease; }
.track-b .mb-tier h3 { font-size: 19px; line-height: 1.2; }
.track-b .mb-price { margin-top: -6px; font: 800 clamp(38px, 3.6vw, 46px)/1 var(--mb-display); letter-spacing: -.02em; }
.track-b .mb-price span { display: inline-block; white-space: nowrap; color: var(--mb-ink-2); font: 500 15px/1 var(--mb-body); letter-spacing: 0; }
.track-b .mb-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; background: var(--mb-sheet-2); color: var(--mb-ink); font: 700 15px/1 var(--mb-display); text-decoration: none; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease, color 160ms ease; }
.track-b .mb-cta .ui-icon { width: 18px; height: 18px; }
.track-b .mb-cta:active { transform: scale(.97); }
.track-b .mb-cta:focus-visible { outline: 3px solid var(--mb-ink); outline-offset: 3px; }
.track-b .mb-perks { display: grid; gap: 11px; margin-top: 4px; font-size: 15px; line-height: 1.45; }
.track-b .mb-perks li { display: flex; gap: 10px; align-items: flex-start; }
.track-b .mb-perks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--mb-ink); }
.track-b .mb-perks b { font-weight: 700; }
.track-b .mb-perks .is-off { color: var(--mb-muted); }
.track-b .mb-perks .is-off svg { color: var(--mb-faint); }
.track-b .mb-tier.is-feature { background: var(--mb-wine); color: var(--mb-paper); }
.track-b .is-feature .mb-price span { color: #e8d2c8; }
.track-b .is-feature .mb-cta { background: var(--mb-paper); color: var(--mb-wine); }
.track-b .is-feature .mb-cta:focus-visible { outline-color: var(--mb-paper); }
.track-b .is-feature .mb-perks, .track-b .is-feature .mb-perks svg { color: #f6e9e2; }
.track-b .mb-terms { text-align: center; }

/* Desktop hover: only for a real mouse, so touch screens never keep a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
  .track-b .mb-tier:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(120, 92, 48, .16); }
  .track-b .mb-tier:not(.is-feature):hover { background: #e4d9ca; }
  .track-b .mb-tier:not(.is-feature):hover .mb-cta { background: var(--mb-ink); color: var(--mb-paper); }
  .track-b .mb-tier.is-feature:hover { box-shadow: 0 16px 34px rgba(93, 11, 14, .28); }
  .track-b .is-feature .mb-cta:hover { background: #fff8f0; }
}

/* Windows high contrast removes fills, so give cards and buttons a system border there only. */
@media (forced-colors: active) {
  .track-b .mb-tier, .track-b .mb-cta, #membership .mb-badge { border: 1px solid CanvasText; }
  .track-b .mb-perks svg, .track-b .is-feature .mb-perks svg { color: CanvasText; }
  .track-b .mb-perks .is-off svg { color: GrayText; }
}

@media (prefers-reduced-motion: reduce) {
  #membership *, #membership *::before { transition: none !important; }
  .track-b .mb-tier:hover { transform: none !important; }
}