/* ============================================================
   LovelyHair Club — membership feature stylesheet.

   Feature-scoped: every selector starts `.lh-club-`. No global
   resets, no element selectors outside a `.lh-club-` ancestor.
   Tokens only — no raw hex, no raw px scale, no font stacks.
   Mobile-first: base rules are the phone; media queries add up.
   ============================================================ */

/* ---------- Local aliases -------------------------------- */

.lh-club {
  --club-card-pad: var(--space-6);
  --club-stack: var(--space-5);
  --club-line: var(--border-subtle);
}
@media (min-width: 750px) {
  .lh-club { --club-card-pad: var(--space-8); }
}

/* ---------- Scroll reveal --------------------------------
   Opt-IN, never opt-out. A reveal target is fully visible until
   lh-membership.js puts `lh-club--motion` on the page root, which
   it only does when IntersectionObserver exists and the visitor
   has not asked for reduced motion. So no-JS, old-browser and
   reduced-motion visitors all get the content immediately —
   nothing is ever hidden behind a script that might not run.
   Stagger is a per-item custom property.
   -------------------------------------------------------- */

.lh-club--motion .lh-club-reveal {
  opacity: 0;
  transform: translate3d(0, var(--club-reveal-y, 18px), 0);
  transition:
    opacity var(--duration-slow) var(--ease-out) var(--club-reveal-delay, 0ms),
    transform var(--duration-slow) var(--ease-out) var(--club-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.lh-club--motion .lh-club-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lh-club--motion .lh-club-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   HERO — image only.

   The banner arrives with its headline, wordmark and member seal
   already printed on it, so nothing is drawn on top and nothing is
   cropped: the picture renders at its own aspect ratio and swaps to
   a portrait asset on phones. `height: auto` is the whole trick —
   any fixed height plus object-fit: cover would cut the baked type.
   ============================================================ */

.lh-club-hero {
  display: block;
  background: var(--surface-page);
}
.lh-club-hero__img {
  display: block;
  width: 100%;
  height: auto;
  /* An unloaded <img> paints its alt text; collapse that so the banner
     area stays clean until the artwork arrives. */
  color: transparent;
  font-size: 0;
}

/* ---------- Trust card under the hero ---------------------
   A single elevated card rather than a flat strip: on desktop it is
   lifted over the banner's bottom edge so banner and promises read as
   one object, split by hairlines into three columns. On a phone the
   banner ends on paper and the lift would look accidental, so the card
   sits inline and the promises become stacked rows.
   -------------------------------------------------------- */

.lh-club-trust {
  position: relative;
  z-index: 2;
  padding-block: var(--space-6) 0;
}
@media (min-width: 750px) {
  .lh-club-trust {
    margin-top: calc(var(--space-12) * -1);
    padding-block: 0;
  }
}

.lh-club-trust__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 750px) {
  .lh-club-trust__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--space-2) var(--space-6);
  }
}

.lh-club-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding-block: var(--space-5);
}
.lh-club-trust__item + .lh-club-trust__item {
  border-top: 1px solid var(--club-line);
}
@media (min-width: 750px) {
  .lh-club-trust__item {
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
  }
  .lh-club-trust__item + .lh-club-trust__item {
    border-top: 0;
    border-inline-start: 1px solid var(--club-line);
  }
}

.lh-club-trust__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-circle);
  background: var(--color-accent-soft);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--lh-amber-rgb), 0.26);
}

.lh-club-trust__text {
  min-width: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-trust__text strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--font-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */

.lh-club-section { padding-block: var(--section-pad-y); scroll-margin-top: var(--space-16); }
.lh-club-section--tint { background: var(--surface-sunken); }
.lh-club-section--card { background: var(--surface-card); }

.lh-club-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-8);
}
.lh-club-head__eyebrow {
  display: block;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.lh-club-head__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  line-height: var(--leading-heading);
  color: var(--text-heading);
  text-wrap: balance;
}
.lh-club-head__body {
  margin: var(--space-3) auto 0;
  max-width: 56ch;
  font-size: var(--font-body-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* ============================================================
   PLANS
   ============================================================ */

.lh-club-plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 700px) and (max-width: 999px) {
  /* Two cards side by side, the third centred beneath them rather than
     stretched across the full width. */
  .lh-club-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .lh-club-plans__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; margin-inline: auto; }
}
@media (min-width: 1000px) {
  .lh-club-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.lh-club-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
@media (min-width: 750px) {
  .lh-club-plan { padding: var(--space-5) var(--space-5) var(--space-8); }
}
.lh-club-plan:has(:focus-visible) { box-shadow: var(--ring-focus); }
.lh-club-plan--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-amber);
}

/* The price sits on its own tinted panel inside the card — a plate the eye
   lands on before it reads a word. The featured plan warms that plate to the
   brand amber so the recommendation is carried by the design, not by a louder
   label. */
.lh-club-plan__head {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.lh-club-plan--featured .lh-club-plan__head {
  background: linear-gradient(150deg, var(--color-accent-soft), var(--color-primary-tint));
}

.lh-club-plan__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.lh-club-plan__flag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--surface-card);
  color: var(--text-muted);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-pill);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* The cadence pill still just names the plan on a featured card; the
   "Most popular" flag is pushed to the far right of the row so it reads as
   a separate badge, not crowded against the cadence pill. */
.lh-club-plan__flag--featured {
  margin-left: auto;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-action);
}

.lh-club-plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
}
.lh-club-plan__amount {
  font-family: var(--font-serif);
  font-size: var(--font-h1);
  line-height: 1;
  color: var(--text-heading);
}
.lh-club-plan__cadence {
  font-size: var(--font-body-md);
  color: var(--text-muted);
}

.lh-club-plan__billing {
  margin: 0;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-club-plan__note {
  margin: var(--space-1) 0 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-plan__planname {
  margin: var(--space-4) 0 0;
  font-size: var(--font-caption);
  color: var(--text-subtle);
}

.lh-club-plan__save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-savings-soft);
  color: var(--color-savings);
  border-radius: var(--radius-pill);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
}
/* The plan the savings are measured against still gets a row, so the button
   below it lines up with the other cards instead of floating a step higher. */
.lh-club-plan__save--none {
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.lh-club-plan__save--none .lh-club-icon { color: var(--text-muted); }
/* Holds the row open on a card that has nothing true to say there, so the
   buttons underneath still line up across the three cards. */
.lh-club-plan__save--empty {
  background: transparent;
  padding-inline: 0;
}
.lh-club-plan__save--empty::before { content: "\00a0"; }

.lh-club-plan__list {
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--club-line);
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.lh-club-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-club-plan__list .lh-club-icon {
  flex: none;
  color: var(--color-primary);
}

/* The form sits at the foot of the card, pushed down so every card's button
   lines up however uneven the copy above them is. */
.lh-club-plan__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
}
.lh-club-plans__terms {
  margin: var(--space-4) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-plans__terms a { color: var(--text-link); }

/* The pre-launch state. A washed-out primary button reads as broken; this reads
   as deliberate — an outlined, clearly inert control that says what it is. */
.lh-club-plans__button[disabled] {
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}
.lh-club-plans__button[disabled]:hover {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.lh-club-plans__error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--lh-error);
  border-radius: var(--radius-sm);
  background: var(--lh-error-soft);
  color: var(--lh-error);
  font-size: var(--font-body-sm);
}
.lh-club-plans__error[hidden] { display: none; }

/* ---------- Assurance row under the plans -----------------
   Quiet by design. It answers the worry a price creates, so it
   has to be legible without competing with the cards above it:
   no card, no border, small amber glyphs on the section tint.
   -------------------------------------------------------- */

.lh-club-plans__assurance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--club-line);
  list-style: none;
}
@media (min-width: 700px) {
  .lh-club-plans__assurance {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-6);
    justify-items: center;
  }
  /* A hairline between the promises instead of just the gap between them —
     three claims read as one row of related facts rather than three loose
     lines. Skipped on the item that opens each visual row: a border there
     would run along the outer edge instead of sitting between two items. */
  .lh-club-assurance:not(:first-child) {
    padding-inline-start: var(--space-6);
    border-inline-start: 1px solid var(--club-line);
  }
}

/* ---------- Mobile: one promise at a time, auto-advancing ------------
   Three static rows read as a wall of small text on a phone. Below 700px
   the list becomes a quiet auto-playing reel — CSS-only (no JS timer to
   manage), each item crossfades and drifts in on its own delay so the row
   always shows exactly one claim. `prefers-reduced-motion` turns it back
   into the plain stacked list further down, and because opacity (not
   `display`) is what hides the other two, a screen reader still has all
   three in the DOM regardless of which one is on screen.
   -------------------------------------------------------------------- */
@media (max-width: 699px) {
  .lh-club-plans__assurance {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 5.5rem;
  }
  .lh-club-assurance {
    position: absolute;
    inset: var(--space-6) 0 auto 0;
    justify-content: center;
    text-align: center;
    opacity: 0;
    animation: lh-club-assurance-cycle 9s ease-in-out infinite;
  }
  .lh-club-assurance:nth-child(1) { animation-delay: 0s; }
  .lh-club-assurance:nth-child(2) { animation-delay: 3s; }
  .lh-club-assurance:nth-child(3) { animation-delay: 6s; }
  .lh-club-assurance:nth-child(n + 4) { display: none; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .lh-club-plans__assurance { display: grid; min-height: 0; }
  .lh-club-assurance {
    position: static;
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@keyframes lh-club-assurance-cycle {
  0%, 1%    { opacity: 0; transform: translateX(10px); }
  8%, 30%   { opacity: 1; transform: translateX(0); }
  37%, 100% { opacity: 0; transform: translateX(-10px); }
}

.lh-club-assurance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}
.lh-club-assurance .lh-club-icon {
  flex: none;
  margin-block-start: 0.1em;
  color: var(--color-primary);
}
.lh-club-assurance__text {
  min-width: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-assurance__text strong {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

/* ---------- Configuration notice (staff-facing) ----------- */

.lh-club-setup {
  padding: var(--club-card-pad);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
}
.lh-club-setup h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-body-md);
  color: var(--text-heading);
}
.lh-club-setup ol { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
.lh-club-setup li + li { margin-top: var(--space-1); }

/* ============================================================
   BENEFITS
   ============================================================ */

/* A bento: one tall card, two stacked, one tall. On a phone the same four
   cards become a single column, the tall ones keeping their portrait crop and
   the middle pair going landscape, so the rhythm survives the stack. */

.lh-club-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
/* Aspect ratios are scoped to the stacked layout. Left unscoped they would beat
   the desktop reset on specificity (:nth-child adds a class-level weight that
   `> *` has not), and the grid's own row heights would stop deciding anything. */
@media (max-width: 899px) {
  .lh-club-bento > :nth-child(4n + 1),
  .lh-club-bento > :nth-child(4n) { aspect-ratio: 4 / 5; }
  .lh-club-bento > :nth-child(4n + 2),
  .lh-club-bento > :nth-child(4n + 3) { aspect-ratio: 16 / 10; }
  /* A card with no photograph has nothing to hold that shape open, and a tall
     empty gradient reads as a failed image. Let it size to its own copy until
     the picture arrives. */
  .lh-club-bento > .lh-club-bento__card--flat {
    aspect-ratio: auto;
    min-height: 11rem;
  }
}

@media (min-width: 900px) {
  .lh-club-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  /* Only claim the bento shape when there are exactly four cards. Delete one in
     the theme editor and the grid falls back to plain equal columns rather than
     leaving a hole where a spanned card used to be. */
  .lh-club-bento:has(> :nth-child(4):last-child) {
    grid-template-rows: repeat(2, 15rem);
  }
  .lh-club-bento:has(> :nth-child(4):last-child) > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .lh-club-bento:has(> :nth-child(4):last-child) > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .lh-club-bento:has(> :nth-child(4):last-child) > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .lh-club-bento:has(> :nth-child(4):last-child) > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
}
@media (min-width: 1200px) {
  .lh-club-bento:has(> :nth-child(4):last-child) { grid-template-rows: repeat(2, 17rem); }
}

.lh-club-bento__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-image);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  a.lh-club-bento__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  a.lh-club-bento__card:hover .lh-club-bento__img { transform: scale(1.04); }
}
a.lh-club-bento__card:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (prefers-reduced-motion: reduce) {
  .lh-club-bento__card,
  .lh-club-bento__img { transition: none; }
  a.lh-club-bento__card:hover { transform: none; }
  a.lh-club-bento__card:hover .lh-club-bento__img { transform: none; }
}

.lh-club-bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  font-size: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}
.lh-club-bento__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--lh-stone-900-rgb), 0.78),
    rgba(var(--lh-stone-900-rgb), 0.24) 46%,
    rgba(var(--lh-stone-900-rgb), 0) 74%
  );
}

.lh-club-bento__body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--space-5);
}
@media (min-width: 900px) {
  .lh-club-bento__body { padding: var(--space-6); }
}
.lh-club-bento__title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-h4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.lh-club-bento__text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-on-dark-muted);
}

.lh-club-bento__arrow {
  position: absolute;
  z-index: 1;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  color: var(--text-heading);
}

/* No photograph yet — the card still has to look deliberate. Brand tint,
   dark type, same copy in the same corner. */
.lh-club-bento__card--flat {
  background: linear-gradient(150deg, var(--color-accent-soft), var(--color-primary-tint));
  color: var(--text-heading);
  border: 1px solid var(--club-line);
}
.lh-club-bento__card--flat .lh-club-bento__text { color: var(--text-muted); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */

/* The steps run down a spine on a phone and across one on a desktop. Each step
   owns the segment that leaves it: `::before` is the unlit track, `::after` the
   lit fill, and the fill only animates once the step has revealed. The last
   step has nowhere to point, so it draws neither. */

.lh-club-steps {
  --club-marker: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 850px) {
  .lh-club-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}

.lh-club-step {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--club-marker) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 850px) {
  .lh-club-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* --- the connector ---------------------------------------- */
.lh-club-step::before,
.lh-club-step::after {
  content: "";
  position: absolute;
  /* Mobile: a vertical rail from under the marker to the next one. */
  inset-inline-start: calc(var(--club-marker) / 2 - 1px);
  inset-block-start: calc(var(--club-marker) + var(--space-2));
  width: 2px;
  height: calc(100% - var(--club-marker) + var(--space-4));
  border-radius: var(--radius-pill);
}
.lh-club-step::before { background: var(--club-line); }
.lh-club-step::after { background: var(--color-accent); transform-origin: top; }
.lh-club-step:last-child::before,
.lh-club-step:last-child::after { display: none; }

@media (min-width: 850px) {
  .lh-club-step::before,
  .lh-club-step::after {
    inset-block-start: calc(var(--club-marker) / 2 - 1px);
    inset-inline-start: calc(var(--club-marker) + var(--space-3));
    width: auto;
    height: 2px;
    inset-inline-end: calc(var(--space-5) * -1);
    transform-origin: left;
  }
}

/* Unlit until the step arrives — but only when the motion class is present, so
   a no-JS or reduced-motion visitor sees a finished spine, never an empty one. */
.lh-club--motion .lh-club-step::after { transform: scaleY(0); }
.lh-club--motion .lh-club-step.is-in::after {
  transform: scaleY(1);
  transition: transform var(--duration-slower) var(--ease-out) 120ms;
}
@media (min-width: 850px) {
  .lh-club--motion .lh-club-step::after { transform: scaleX(0); }
  .lh-club--motion .lh-club-step.is-in::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lh-club--motion .lh-club-step::after,
  .lh-club--motion .lh-club-step.is-in::after { transform: none; transition: none; }
}

/* --- the marker ------------------------------------------- */
.lh-club-step__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--club-marker);
  height: var(--club-marker);
  border-radius: var(--radius-circle);
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  box-shadow: 0 0 0 6px var(--surface-card);
}
.lh-club-section--card .lh-club-step__marker { box-shadow: 0 0 0 6px var(--surface-card); }
.lh-club-step__num {
  font-family: var(--font-serif);
  font-size: var(--font-body-lg);
  line-height: 1;
}

.lh-club-step__content { min-width: 0; }
.lh-club-step__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--font-h4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}
.lh-club-step__title .lh-club-icon { flex: none; color: var(--color-primary); }
.lh-club-step__title > span { min-width: 0; }
.lh-club-step__body {
  margin: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* ============================================================
   ELIGIBILITY + COMPARISON
   ============================================================ */

/* Eligible services as rectangular tiles on the section tint: real service
   photography, the label under the picture rather than over it, and a gold
   badge that states the benefit on every one. */

.lh-club-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .lh-club-tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-5);
  }
}

.lh-club-tile { min-width: 0; }
.lh-club-tile__link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
}
.lh-club-tile__link:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.lh-club-tile__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--lh-img-loader, none), var(--surface-image);
  border: 1px solid var(--club-line);
}
.lh-club-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  font-size: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}
@media (hover: hover) {
  .lh-club-tile__link:hover .lh-club-tile__img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .lh-club-tile__img { transition: none; }
  .lh-club-tile__link:hover .lh-club-tile__img { transform: none; }
}
.lh-club-tile__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-circle);
  background: var(--color-accent-soft);
  color: var(--color-primary);
}
.lh-club-tile__pill {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--lh-stone-900);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.lh-club-tile__label {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--font-body-md);
  line-height: var(--leading-snug);
  color: var(--text-heading);
  text-wrap: balance;
}

/* Exclusions: one sentence, given a warm border rather than a warning colour.
   It is a boundary, not an error. */
.lh-club-exclusions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--club-line);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.lh-club-exclusions .lh-club-icon { flex: none; margin-block-start: 0.1em; color: var(--color-primary); }
.lh-club-exclusions__text {
  min-width: 0;
  margin: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-exclusions__text strong {
  color: var(--text-heading);
  margin-inline-end: var(--space-1);
}

/* The table is wider than a phone on purpose — five rows across three columns
   does not usefully stack. It scrolls inside this box, and the classic
   four-layer background trick paints a soft shadow on whichever edge still has
   content beyond it, so a mobile reader can see there is more to the right
   instead of assuming the column is simply cut off. `local` layers move with
   the content; `scroll` layers stay put, and the two cancel out at each end. */
.lh-club-compare {
  margin-top: var(--space-8);
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface-sunken) 30%, rgba(var(--lh-stone-50-rgb), 0)) left center / 3rem 100% no-repeat,
    linear-gradient(to left, var(--surface-sunken) 30%, rgba(var(--lh-stone-50-rgb), 0)) right center / 3rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(var(--lh-stone-900-rgb), 0.14), rgba(var(--lh-stone-900-rgb), 0)) left center / 1rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--lh-stone-900-rgb), 0.14), rgba(var(--lh-stone-900-rgb), 0)) right center / 1rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.lh-club-compare__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--font-caption);
  color: var(--text-muted);
}
@media (min-width: 750px) {
  .lh-club-compare__hint { display: none; }
}
.lh-club-compare table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--font-body-sm);
}
.lh-club-compare caption {
  margin-bottom: var(--space-3);
  text-align: start;
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.lh-club-compare th,
.lh-club-compare td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-bottom: 1px solid var(--club-line);
  vertical-align: top;
}
.lh-club-compare thead th {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
}
.lh-club-compare tbody th { font-weight: var(--weight-regular); color: var(--text-body); }
.lh-club-compare .lh-club-compare__member { color: var(--color-savings); font-weight: var(--weight-semibold); }
.lh-club-compare .lh-club-compare__guest { color: var(--text-muted); }

/* ============================================================
   FINAL CTA BAND
   ============================================================ */

/* A single band: photograph, then two panels split by a hairline. Light, so it
   closes the page on the same paper it opened on rather than dropping into a
   dark slab. The picture holds a portrait crop on desktop and a shallow
   landscape one on a phone, where a tall photo would push the panels off the
   first screen. */

.lh-club-cta { padding-block: var(--section-pad-y); }

.lh-club-cta__band {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--club-line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .lh-club-cta__band { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); }
  .lh-club-cta__band--noimage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lh-club-cta__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: var(--lh-img-loader, none), var(--surface-image);
}
@media (min-width: 900px) {
  .lh-club-cta__media { aspect-ratio: auto; }
}
.lh-club-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The band's picture is a portrait crop of a seated subject, so bias the crop
     just above centre: dead centre puts her at the bottom of a tall column. */
  object-position: center 32%;
  color: transparent;
  font-size: 0;
}

/* The divider belongs BETWEEN things. Put it on every panel and the first one
   draws a second line right under the band's own border. */
.lh-club-cta__panel {
  min-width: 0;
  padding: var(--space-6);
}
.lh-club-cta__band > * + .lh-club-cta__panel {
  border-top: 1px solid var(--club-line);
}
@media (min-width: 900px) {
  .lh-club-cta__panel { padding: var(--space-8); }
  .lh-club-cta__band > * + .lh-club-cta__panel {
    border-top: 0;
    border-inline-start: 1px solid var(--club-line);
  }
}

.lh-club-cta__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-h3);
  line-height: var(--leading-heading);
  color: var(--text-heading);
  text-wrap: balance;
}
.lh-club-cta__body {
  margin: var(--space-3) 0 0;
  max-width: 42ch;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.lh-club-cta__aside {
  margin: var(--space-4) 0 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-cta__aside a { color: var(--text-link); }

/* ============================================================
   STATUS NOTICES — used on the hub, the PDP and the cart
   ============================================================ */

.lh-club-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-club-note > .lh-club-icon { flex: none; margin-block-start: 0.1em; }
.lh-club-note__body { min-width: 0; }
.lh-club-note__title {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-club-note p { margin: 0; }
.lh-club-note p + p { margin-top: var(--space-2); }
.lh-club-note a { color: var(--text-link); }
.lh-club-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.lh-club-note--active {
  border-color: var(--lh-success);
  background: var(--lh-success-soft);
}
.lh-club-note--active > .lh-club-icon,
.lh-club-note--active .lh-club-note__title { color: var(--color-instock); }

.lh-club-note--warn {
  border-color: var(--lh-warning);
  background: var(--lh-warning-soft);
}
.lh-club-note--warn > .lh-club-icon,
.lh-club-note--warn .lh-club-note__title { color: var(--lh-warning); }

.lh-club-note--offer {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.lh-club-note--offer > .lh-club-icon { color: var(--color-primary); }

/* ---------- Compact pill — single-service page --------------------------
   Same three states as the status notices above, but as one line: an icon,
   short copy, and at most one action, wrapping only if the viewport truly
   forces it. Its own class rather than a `.lh-club-note` modifier, because
   the hub still needs the fuller icon+title+body card layout elsewhere on
   the same stylesheet.
   -------------------------------------------------------------------- */
.lh-club-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--font-body-sm);
  line-height: var(--leading-snug);
  color: var(--text-body);
}
.lh-club-pill > .lh-club-icon { flex: none; }
.lh-club-pill__text { flex: 1 1 auto; min-width: 0; font-weight: var(--weight-medium); }
.lh-club-pill__action {
  flex: none;
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lh-club-pill--active { background: var(--lh-success-soft); color: var(--color-instock); }
.lh-club-pill--active .lh-club-pill__text { color: var(--color-instock); }

.lh-club-pill--warn { background: var(--lh-warning-soft); }
.lh-club-pill--warn > .lh-club-icon { color: var(--lh-warning); }

.lh-club-pill--offer { background: var(--color-accent-soft); }
.lh-club-pill--offer > .lh-club-icon { color: var(--color-primary); }
/* Amber on the gold-light pill is 3.9:1; the dark amber step passes AA. */
.lh-club-pill--offer .lh-club-pill__action { color: var(--color-primary-hover); }

/* ============================================================
   MEMBERSHIP HUB / DASHBOARD
   ============================================================ */

.lh-club-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .lh-club-hub__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); }
}

.lh-club-card {
  min-width: 0;
  padding: var(--club-card-pad);
  background: var(--surface-card);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.lh-club-card__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--font-h3);
  line-height: var(--leading-heading);
  color: var(--text-heading);
}

.lh-club-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
}
.lh-club-badge--active { background: var(--lh-success-soft); color: var(--color-instock); border-color: var(--lh-success); }
.lh-club-badge--grace { background: var(--lh-warning-soft); color: var(--lh-warning); border-color: var(--lh-warning); }
.lh-club-badge--paused,
.lh-club-badge--cancelled { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-strong); }
.lh-club-badge--none { background: var(--color-accent-soft); color: var(--color-primary); border-color: var(--color-accent); }

.lh-club-facts { margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.lh-club-facts > div { min-width: 0; }
.lh-club-facts dt {
  margin: 0 0 var(--space-1);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.lh-club-facts dd {
  margin: 0;
  font-size: var(--font-body-md);
  color: var(--text-heading);
}

.lh-club-hub__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 600px) {
  .lh-club-hub__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   WELCOME
   ============================================================ */

.lh-club-welcome { text-align: center; }
.lh-club-welcome__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-circle);
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.lh-club-welcome__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
  text-align: start;
}
@media (min-width: 800px) {
  .lh-club-welcome__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   PDP + CART INLINE MESSAGING
   ============================================================ */

.lh-club-service-note { margin-block: var(--space-4); }
.lh-club-cart-note { margin-block: var(--space-4); }

/* ============================================================
   FOOTER ENTRY POINT
   ============================================================ */

.lh-club-footer-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-8);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  text-align: center;
}
@media (min-width: 750px) {
  .lh-club-footer-strip {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
    gap: var(--space-6);
    padding-inline: var(--space-6);
  }
}
.lh-club-footer-strip__copy { min-width: 0; }
.lh-club-footer-strip__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--font-body-lg);
  color: var(--text-on-dark);
}
@media (min-width: 750px) {
  .lh-club-footer-strip__title { justify-content: flex-start; }
}
.lh-club-footer-strip__title .lh-club-icon { color: var(--color-accent); }
.lh-club-footer-strip__body {
  margin: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-on-dark-muted);
}
.lh-club-footer-strip__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding-inline: var(--space-5);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.lh-club-footer-strip__link:hover,
.lh-club-footer-strip__link:focus-visible {
  background: var(--color-accent);
  color: var(--lh-stone-900);
}
.lh-club-footer-strip__link:focus-visible { box-shadow: var(--ring-focus); outline: none; }

/* Light-scheme footer needs readable text on an off-white surface. */
.lh-footer--light .lh-club-footer-strip { border-color: var(--border-subtle); }
.lh-footer--light .lh-club-footer-strip__title { color: var(--text-heading); }
.lh-footer--light .lh-club-footer-strip__body { color: var(--text-muted); }
.lh-footer--light .lh-club-footer-strip__title .lh-club-icon,
.lh-footer--light .lh-club-footer-strip__link { color: var(--color-primary); border-color: var(--color-primary); }
.lh-footer--light .lh-club-footer-strip__link:hover,
.lh-footer--light .lh-club-footer-strip__link:focus-visible {
  background: var(--color-primary);
  color: var(--color-on-action);
}

/* ============================================================
   MEMBERSHIP PRODUCT PAGE — the head of the club PDP.

   Mobile first and single column: picture, then the promise, then
   the buttons. From 900px it becomes 44/56 with the picture stuck
   to the top of the viewport while the copy scrolls past it, which
   is what keeps the offer visible during the read.

   Every grid and flex child carries `min-width: 0`. Without it a
   child's automatic minimum size is its min-content, so one long
   unbroken string (a currency-formatted price, a service name)
   widens the whole column past the viewport instead of wrapping —
   and a body-level overflow clip hides the scrollbar that would
   otherwise give it away.
   ============================================================ */

.lh-club-pdp {
  padding-block: var(--space-6) var(--space-10);
  background: var(--surface-page);
}
@media (min-width: 900px) {
  .lh-club-pdp { padding-block: var(--space-8) var(--space-16); }
}

.lh-club-crumbs {
  margin-bottom: var(--space-5);
  font-size: var(--font-caption);
  color: var(--text-muted);
}
.lh-club-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-club-crumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.lh-club-crumbs li + li::before {
  content: "/";
  color: var(--text-subtle);
}
.lh-club-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.lh-club-crumbs a:hover,
.lh-club-crumbs a:focus-visible { color: var(--text-link); text-decoration: underline; }
.lh-club-crumbs [aria-current] { color: var(--text-heading); }

.lh-club-pdp__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .lh-club-pdp__grid {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: var(--space-12);
    align-items: start;
  }
}
.lh-club-pdp__media,
.lh-club-pdp__body { min-width: 0; }

.lh-club-pdp__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--lh-img-loader, none), var(--surface-image);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .lh-club-pdp__media {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
  }
}
.lh-club-pdp__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* An unloaded <img> paints its alt text as fallback content; collapse it so
     the reserved box stays a clean placeholder until the photo arrives.
     Neither property can affect a loaded raster image's own pixels. */
  color: transparent;
  font-size: 0;
}
.lh-club-pdp__img--empty {
  display: grid;
  place-items: center;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: var(--font-body-md);
}

.lh-club-pdp__seal {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  display: grid;
  place-content: center;
  width: 5.5rem;
  height: 5.5rem;
  padding: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-on-action);
  text-align: center;
  font-size: var(--font-caption);
  line-height: 1.2;
  box-shadow: var(--shadow-md);
}
.lh-club-pdp__seal strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-body-md);
}

.lh-club-pdp__eyebrow { display: block; margin-bottom: var(--space-3); }
.lh-club-pdp__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}
@media (min-width: 900px) {
  .lh-club-pdp__title { font-size: var(--font-h1); }
}
.lh-club-pdp__lede {
  margin: 0 0 var(--space-5);
  font-size: var(--font-body-lg);
  line-height: var(--leading-body);
  color: var(--text-body);
}

.lh-club-pdp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.lh-club-pdp__price-from {
  font-size: var(--font-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--text-muted);
}
.lh-club-pdp__price-amount {
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  line-height: 1;
  color: var(--text-price);
}
.lh-club-pdp__price-suffix { font-size: var(--font-body-md); color: var(--text-muted); }
.lh-club-pdp__price-note {
  margin: 0 0 var(--space-5);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}

.lh-club-pdp__points {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.lh-club-pdp__points li {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  font-size: var(--font-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-club-pdp__points li > span { min-width: 0; }
.lh-club-pdp__points .lh-club-icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--color-primary);
}
.lh-club-pdp__points strong {
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
}
.lh-club-pdp__point-body {
  display: block;
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}

.lh-club-pdp__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lh-club-pdp__actions .lh-button { width: 100%; }
@media (min-width: 560px) {
  .lh-club-pdp__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lh-club-pdp__actions .lh-button { width: auto; }
}

/* ---------- Cadence picker in the PDP body ----------------
   Three native radios, three complete forms, and nothing but the
   sibling combinator switching between them — so the plan on
   screen is the plan that submits even with the script blocked.
   The radios are clipped rather than display:none so they keep
   their place in the tab order and can hand a focus ring to the
   pill through :focus-visible.
   -------------------------------------------------------- */

.lh-club-pick {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.lh-club-pdp__actions .lh-club-pick { width: 100%; }

.lh-club-pick__legend {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.lh-club-pick__labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}
.lh-club-pick__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.lh-club-pick__option:hover { color: var(--text-heading); }

.lh-club-pick__panes { min-width: 0; }
.lh-club-pick__pane { display: none; min-width: 0; }

/* The switch itself. Attribute selectors rather than ids, because the ids
   carry the section id to stay unique and a stylesheet cannot know it. */
.lh-club-pick__radio[value="month"]:checked ~ .lh-club-pick__panes .lh-club-pick__pane[data-cadence="month"],
.lh-club-pick__radio[value="quarter"]:checked ~ .lh-club-pick__panes .lh-club-pick__pane[data-cadence="quarter"],
.lh-club-pick__radio[value="year"]:checked ~ .lh-club-pick__panes .lh-club-pick__pane[data-cadence="year"] {
  display: block;
}
.lh-club-pick__radio[value="month"]:checked ~ .lh-club-pick__labels .lh-club-pick__option[data-cadence="month"],
.lh-club-pick__radio[value="quarter"]:checked ~ .lh-club-pick__labels .lh-club-pick__option[data-cadence="quarter"],
.lh-club-pick__radio[value="year"]:checked ~ .lh-club-pick__labels .lh-club-pick__option[data-cadence="year"] {
  background: var(--color-action);
  color: var(--color-on-action);
  box-shadow: var(--shadow-xs);
}
.lh-club-pick__radio[value="month"]:focus-visible ~ .lh-club-pick__labels .lh-club-pick__option[data-cadence="month"],
.lh-club-pick__radio[value="quarter"]:focus-visible ~ .lh-club-pick__labels .lh-club-pick__option[data-cadence="quarter"],
.lh-club-pick__radio[value="year"]:focus-visible ~ .lh-club-pick__labels .lh-club-pick__option[data-cadence="year"] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.lh-club-pick__rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}
.lh-club-pick__amount {
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  line-height: 1;
  color: var(--text-heading);
}
.lh-club-pick__suffix { font-size: var(--font-body-md); color: var(--text-muted); }
.lh-club-pick__cycle {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.lh-club-pick__form { min-width: 0; }
.lh-club-pdp__actions .lh-club-pick .lh-button { width: 100%; }
.lh-club-pick__button[disabled] {
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}
.lh-club-pick__button[disabled]:hover {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.lh-club-pick__error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--lh-error);
  border-radius: var(--radius-sm);
  background: var(--lh-error-soft);
  color: var(--lh-error);
  font-size: var(--font-body-sm);
}
.lh-club-pick__error[hidden] { display: none; }

.lh-club-pdp__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-savings-soft);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-club-pdp__status > span { min-width: 0; }
.lh-club-pdp__status .lh-club-icon { flex: none; color: var(--color-savings); }
.lh-club-pdp__status--lapsed { background: var(--lh-warning-soft); }
.lh-club-pdp__status--lapsed .lh-club-icon { color: var(--lh-warning); }

.lh-club-pdp__assure {
  margin: var(--space-4) 0 0;
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}

.lh-club-pdp__more {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--club-line);
}
.lh-club-pdp__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-target);
  list-style: none;
  cursor: pointer;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-club-pdp__more summary::-webkit-details-marker { display: none; }
.lh-club-pdp__more summary:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring-focus);
}
.lh-club-pdp__more summary > span { min-width: 0; }
.lh-club-pdp__more summary .lh-club-icon {
  flex: none;
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}
.lh-club-pdp__more[open] summary .lh-club-icon { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .lh-club-pdp__more summary .lh-club-icon { transition: none; }
}
.lh-club-pdp__prose {
  margin-top: var(--space-3);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-pdp__prose p { margin: 0 0 var(--space-3); }
.lh-club-pdp__prose p:last-child { margin-bottom: 0; }

/* ---------- Sticky join bar (phones) ---------------------
   Fixed to the bottom edge, revealed by lh-membership.js only
   between the hero's buttons and the plan cards. Never on desktop,
   where the plan cards are one short scroll away and a fixed bar
   would be noise.
   -------------------------------------------------------- */

.lh-club-stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 240;
  padding: var(--space-3) var(--page-gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-card);
  border-top: 1px solid var(--club-line);
  box-shadow: var(--shadow-lg);
}
.lh-club-stickybar[hidden] { display: none; }
@media (min-width: 900px) {
  .lh-club-stickybar { display: none; }
}
.lh-club-stickybar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.lh-club-stickybar__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
}
.lh-club-stickybar__price strong {
  font-family: var(--font-serif);
  font-size: var(--font-body-lg);
  color: var(--text-price);
}
.lh-club-stickybar__price span { font-size: var(--font-body-sm); color: var(--text-muted); }
.lh-club-stickybar__cta { flex: 1 1 auto; justify-content: center; min-width: 0; }

/* Floating buttons clear the join bar via --lh-fab-safe-bottom
   (scroll-to-top.css), keyed on the html.lh-club-stickybar-on class. */

/* ============================================================
   BREAK-EVEN — what a year costs, and the line it has to clear.
   ============================================================ */

.lh-club-worth {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 750px) {
  .lh-club-worth { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.lh-club-worth__row {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--club-card-pad);
  border: 1px solid var(--club-line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.lh-club-worth__plan {
  font-family: var(--font-serif);
  font-size: var(--font-h4);
  color: var(--text-heading);
}
.lh-club-worth__cost,
.lh-club-worth__break {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.lh-club-worth__label {
  font-size: var(--font-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--text-muted);
}
.lh-club-worth__cost strong {
  font-size: var(--font-body-lg);
  color: var(--text-heading);
}
.lh-club-worth__break strong {
  font-family: var(--font-serif);
  font-size: var(--font-h3);
  line-height: 1.1;
  color: var(--color-primary);
}
.lh-club-worth__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-club-worth__note > span { min-width: 0; }
.lh-club-worth__note .lh-club-icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--color-accent);
}

/* ---------- Utility ---------------------------------------- */

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

/* ============================================================
   JOIN POPUP (snippets/lh-club-join-dialog, /lh/club-join.js; owner, 2026-10-31)
   Built from the booking popup's own pieces in /lh/booking.css (lh-book__*): the shell, the step
   header (icon circles; labels from 750px), the selectable rows with their tick, the picked card
   (tick on the photo, "Change"), the card box, "Save card", the sticky footer with its top border,
   and the motion. Only the Club's differences live here: the popup fits its content instead of
   filling the screen, the plan rows carry a price column, and step 2 builds itself in.
   Selectors start at .lh-club-join so they outrank booking.css whichever loads last.
   ============================================================ */
.lh-club-join {
  --lh-book-pad: var(--space-4);
  width: min(560px, calc(100vw - 48px));
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-page);
  color: var(--text-body);
  box-shadow: var(--shadow-xl);
  overflow: clip;
}
.lh-club-join[open] { display: flex; flex-direction: column; animation: lh-book-sheet var(--duration-slow) var(--ease-emphasis); }
.lh-club-join.is-closing { animation: lh-book-sheet-out 180ms var(--ease-in) forwards; }
.lh-club-join::backdrop { background: color-mix(in srgb, var(--surface-inverse) 50%, transparent); animation: lh-book-fade var(--duration-base) var(--ease-out); }
.lh-club-join .lh-book__shell { flex: 1 1 auto; min-height: 0; height: auto; }
@media (min-width: 750px) { .lh-club-join { --lh-book-pad: var(--space-6); } }
@media (max-width: 749px) {
  .lh-club-join { max-height: calc(100dvh - var(--space-3) - env(safe-area-inset-top, 0px)); }
}

/* Step 1: the periods. Name and billing on the left, the monthly price (and saving) on the right. */
.lh-club-join .lh-club-join__intro { display: grid; gap: var(--space-1); }
.lh-club-join .lh-club-join__opt { grid-template-columns: minmax(0, 1fr) auto auto; padding: var(--space-4); }
.lh-club-join .lh-club-join__opt-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.lh-club-join__tag {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-action);
  font-size: var(--font-caption); font-weight: var(--weight-semibold); line-height: 1.4;
}
.lh-club-join__opt-price { display: grid; justify-items: end; gap: 2px; text-align: right; line-height: 1.25; }
.lh-club-join__opt-price strong {
  font-family: var(--font-display); font-size: var(--font-h4); font-weight: var(--weight-semibold);
  color: var(--text-heading); font-variant-numeric: lining-nums tabular-nums;
}
.lh-club-join__opt-price > span:not(.lh-club-join__saving) { font-size: var(--font-caption); color: var(--text-muted); }
.lh-club-join__saving {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--color-savings-soft); color: var(--color-savings);
  font-size: var(--font-caption); font-weight: var(--weight-semibold); white-space: nowrap;
}
.lh-club-join__saving[hidden] { display: none; }

/* Step 2: the picked plan is a card, not a choice. */
.lh-club-join .lh-club-join__chosen { cursor: default; }
.lh-club-join .lh-club-join__chosen.lh-book__opt:active:not(.is-off) { scale: none; }
.lh-club-join .lh-club-join__chosen .lh-book__opt-sub { align-items: center; }
.lh-club-join .lh-club-join__paywrap { display: grid; gap: var(--space-3); }
.lh-club-join .lh-club-join__paywrap[hidden] { display: none; }
.lh-club-join .lh-club-join__cardwrap { margin-top: 0; animation: none; }

/* The footer: "Join Club" across, the terms under it (no Back button: "Change" is the way back). */
.lh-club-join .lh-club-join__foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: var(--space-2); }
.lh-club-join .lh-club-join__foot[hidden] { display: none; }
.lh-club-join .lh-club-join__foot .lh-book__terms { margin: 0; text-align: center; }

/* Step 2 builds itself, as a picked service does in the booking popup: the plan lifts into place
   (booking.css), then the sign-in or the payment slides in after it, and the footer rises. */
@media (prefers-reduced-motion: no-preference) {
  .lh-club-join .lh-club-join__pay > .lh-club-join__auth,
  .lh-club-join .lh-club-join__pay > .lh-club-join__paywrap { animation: lh-book-slide-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both; }
  .lh-club-join .lh-club-join__foot:not([hidden]) { animation: lh-cj-foot-in 380ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both; }
}
@keyframes lh-cj-foot-in { from { transform: translateY(100%); } }

/* FAQ (owner, 2026-10-29): the title sits close to its questions; the list itself adds no extra padding. */
[data-club-faq] .lh-club-head { margin-bottom: var(--space-5); }
[data-club-faq] .lh-faq { --faq-pt: 0; --faq-pb: 0; padding-block: 0; }