/* ═══════════════════════════════════════════════════════════════════════
   Burke Williams — Membership Page
   Figma node: 1965:105382  |  "Membership | Desktop"  [1920×4941]
   Sections: Hero · Benefits · Comparison Table · Become a Member · FAQ
   All values taken directly from Phase 1 Figma inspection data.
   ═══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1 · HERO
   Figma: Secondary header 2  [1920×700]
   bg: membership-1965-105383.png
   Text panel (Frame 2147203238) [539×640]: bottom-left  pb=80  pl=120
   ──────────────────────────────────────────────────────────────────────── */
.bw-mem-hero {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: #335d88;
  display: flex;
  align-items: flex-end;
}
.bw-mem-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Dark-left gradient overlay */
.bw-mem-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(10, 8, 6, 0.88)  0%,
    rgba(10, 8, 6, 0.58)  38%,
    rgba(10, 8, 6, 0.08) 100%
  );
  pointer-events: none;
}

/* Text panel [539×640]: bottom-left  pb=80  pl=120 */
.bw-mem-hero-panel {
  position: relative;
  z-index: 2;
  padding: 0 120px 80px;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bw-mem-hero-heading { margin: 0; }

/* "Wellness" — Teodor TRIAL 60px wt=350 lh=72px  #fffdf8 */
.bw-mem-h-display {
  display: block;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #fffdf8;
}

/* "Memberships" — La Belle Aurore 60px wt=400 lh=72px  #fffdf8 */
.bw-mem-h-script {
  display: block;
  font-family: var(--font-script);
  font-size: 60px;
  font-weight: 400;
  line-height: 72px;
  color: #fffdf8;
  font-style: normal;
}

/* Description — Barlow 20px wt=400 lh=24px  #fffdf8  max-w~480px */
.bw-mem-hero-desc {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #fffdf8;
  max-width: 480px;
  margin: 0;
}

/* "Explore Memberships" CTA — radius:100px  Barlow 16px wt=600  #fffdf8 */
.bw-mem-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 253, 248, 0.75);
  background: transparent;
  color: #fffdf8;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-decoration: none;
  text-transform: capitalize;
  align-self: flex-start;
  transition: background 0.25s;
}
.bw-mem-hero-cta:hover {
  background: rgba(255, 253, 248, 0.15);
}
/* Show only the right arrow icon in the CTA */
.bw-mem-hero-cta svg:first-child { display: none; }

/* ────────────────────────────────────────────────────────────────────────
   SHARED · TAG pill
   Figma: TAG [47px tall]  stroke:#676767 weight=1  radius pill  pad=10
          Barlow 18px wt=600  UPPER  #676767
   ──────────────────────────────────────────────────────────────────────── */
.bw-mem-tag {
  display: inline-flex;
  align-items: center;
  height: 47px;
  padding: 10px 16px;
  border: 1px solid #676767;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: #676767;
  text-transform: uppercase;
}
/* Alt TAG: same but used in compare section */
.bw-mem-tag--alt {
  align-self: flex-start;
}

/* ────────────────────────────────────────────────────────────────────────
   2 · BODY B — MEMBERSHIP BENEFITS
   Figma: Body B  [1920×575]  fill:#fffdf8  pad=74/77/74/77  align=MAX/CENTER
   Frame 2147203249 [750×134]: TAG + h2  — vertical gap=16  align=CENTER
   Component [1766×245]: Row [1766×219]  HORIZONTAL gap=140
   Content [313×219]: VERTICAL gap=24  pad=24/24/24/24  align=CENTER
   ──────────────────────────────────────────────────────────────────────── */
.bw-mem-benefits {
  background: #fffdf8;
  padding: 74px 77px;
}
.bw-mem-benefits-inner {
  max-width: 1766px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Heading block [750×134] — centred */
.bw-mem-benefits-head {
  max-width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* "Membership / Benefits" — Teodor TRIAL 60px wt=350 lh=72px  #335d88
   Task spec: Teodor+Script treatment for the "/" separator */
.bw-mem-benefits-title {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #335d88;
  margin: 0;
}
/* Display word spans stay in Teodor */
.bw-mem-benefits-title-display {
  font-family: var(--font-display);
  font-weight: 350;
}
/* Script "/" — La Belle Aurore gives the Teodor+Script combination */
.bw-mem-benefits-title-slash {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
}

/* 4 columns: HORIZONTAL gap=140 centred */
.bw-mem-benefits-row {
  display: flex;
  gap: 140px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Each Content [313×219]: VERTICAL gap=24  pad=24  align=CENTER */
.bw-mem-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 265px;
  text-align: center;
  padding: 24px;
}
.bw-mem-benefit-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Content Top [265×113]: gap=16 */
.bw-mem-benefit-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Benefit title — Barlow 18px wt=600  #1a1712 */
.bw-mem-benefit-title-text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1712;
  margin: 0;
}
/* Benefit desc — Barlow 15px  #676767 */
.bw-mem-benefit-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: #676767;
  line-height: 1.55;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   3 · COMPARISON TABLE
   Figma: Frame 2147203255  [1920×1452]  fill:#fffdf8  stroke:#676767  pad=90
   Frame 2147203100 [1682×191]: HORIZONTAL  SPACE_BETWEEN  align=MAX
   Frame 2147203110 [1682×1022]: VERTICAL gap=20  pad=40/0/40/0  align=MAX
   Membership table [1680×819]: VERTICAL gap=2
   Column grid: 968fr / 353fr / 353fr (gap=3)
   ──────────────────────────────────────────────────────────────────────── */
.bw-mem-compare {
  background: #fffdf8;
  border-top: 1px solid #676767;
  padding: 90px;
}
.bw-mem-compare-inner {
  max-width: 1680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 59px;
}

/* Heading row: text left, button right — SPACE_BETWEEN  align=MAX */
.bw-mem-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.bw-mem-compare-text {
  max-width: 844px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "Which Wellness Membership…" — Teodor 40px wt=350 lh=48px  #335d88 */
.bw-mem-compare-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 350;
  line-height: 48px;
  color: #335d88;
  margin: 0;
}

/* Desc — Barlow 20px wt=400 lh=24px  #737373 */
.bw-mem-compare-desc {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #737373;
  margin: 0;
}

/* "Inquire" button — fill:#335d88  stroke:#335d88  radius:100px  h=44px */
.bw-mem-inquire-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 100px;
  border: 1px solid #335d88;
  background: #335d88;
  color: #fffcf6;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-decoration: none;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}
.bw-mem-inquire-btn:hover {
  background: #0b2e56;
  border-color: #0b2e56;
}
/* Hide leading arrow in inquire button */
.bw-mem-inquire-btn svg:first-child { display: none; }

/* ── TABLE ────────────────────────────────────────────────────────────── */
.bw-mem-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Column grid: 968fr / 353fr / 353fr  gap=3 */
.bw-mem-table-header,
.bw-mem-table-row,
.bw-mem-price-row,
.bw-mem-table-cta-row {
  display: grid;
  grid-template-columns: 968fr 353fr 353fr;
  gap: 3px;
}

/* HEADER ROW */
/* header-essential [969×80]  fill:#ece7db */
.bw-mem-col-label {
  background: #ece7db;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 32px;
}
/* "Benefit" — Teodor TRIAL 32px wt=350 lh=38.4px  #1a1712 */
.bw-mem-col-benefit-label {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 350;
  line-height: 38.4px;
  color: #1a1712;
}

/* header-essential [353×80]  fill:#335d88  stroke:#7095bb weight=1 */
.bw-mem-col-essential {
  background: #335d88;
  border: 1px solid #7095bb;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* header-deluxe [353×80]  fill:#0b2e56 — Figma dark navy */
.bw-mem-col-deluxe {
  background: #0b2e56;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Column header labels — Teodor TRIAL 32px wt=350 lh=38.4px */
.bw-mem-col-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 350;
  line-height: 38.4px;
}
.bw-mem-col-essential .bw-mem-col-name { color: #fffdf8; }
.bw-mem-col-deluxe    .bw-mem-col-name { color: #fffdf8; } /* cream on dark navy bg */

/* FEATURE ROWS */
/* label-cell [968×82]  fill:#f6f3ec  pad=32/32/32/32 */
.bw-mem-cell-label {
  background: #f6f3ec;
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 20px 32px;
}
/* feature-text — Barlow 24px wt=500 lh=28.8px  #4a4a48
   Figma: feature-text [904×29] font: Barlow 24px wt=500 lh=28.8px */
.bw-mem-feature-text {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  color: #4a4a48;
  margin: 0;
}

/* Essential / Deluxe cells */
.bw-mem-cell {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  background: #ece8dd;  /* deluxe-cell fill default */
}
/* essential checked: fill:#ece8dd — already covered by default */
/* essential dim (not included): fill:#d0ccc2 opacity=0.8 */
.bw-mem-cell--dim {
  background: rgba(208, 204, 194, 0.80);
}
/* deluxe checked: fill:#ece8dd */
.bw-mem-cell--deluxe {
  background: #ece8dd;
}
/* deluxe dim: fill:#ece7db opacity=0.8 */
.bw-mem-cell--deluxe.bw-mem-cell--dim {
  background: rgba(236, 231, 219, 0.80);
}

.bw-mem-check { flex-shrink: 0; }

/* "—" for not included */
.bw-mem-dash {
  font-family: var(--font-body);
  font-size: 20px;
  color: #676767;
}

/* Cell note — Barlow 20px wt=400 lh=24px  #335d88 */
.bw-mem-cell-note {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #335d88;
  margin: 0;
  text-align: center;
  max-width: 300px;
}

/* PRICE ROW */
.bw-mem-price-label {
  background: #ece7db;
  min-height: 138px;
  display: flex;
  align-items: center;
  padding: 20px 32px;
}
/* Price terms — Barlow 14px lh=24px  #4a4a48 */
.bw-mem-price-terms {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #4a4a48;
  margin: 0;
}

.bw-mem-price-cell {
  min-height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
}
/* Essential: fill:#335d88 */
.bw-mem-price-essential { background: #335d88; }
/* Deluxe: fill:#0b2e56 — Figma dark navy */
.bw-mem-price-deluxe    { background: #0b2e56; }

/* Price amount — Teodor TRIAL 60px wt=350 lh=72px */
.bw-mem-price-amount {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
}
.bw-mem-price-essential .bw-mem-price-amount { color: #fffdf8; }
.bw-mem-price-deluxe    .bw-mem-price-amount { color: #fffdf8; } /* cream on dark navy bg */

/* "/month" — Barlow 20px wt=400 lh=24px */
.bw-mem-price-period {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  align-self: flex-end;
  margin-bottom: 10px;
}
.bw-mem-price-essential .bw-mem-price-period { color: #fffdf8; }
.bw-mem-price-deluxe    .bw-mem-price-period { color: #fffdf8; } /* cream on dark navy bg */

/* CTA row */
.bw-mem-table-cta-label {
  background: #f6f3ec;
  height: 64px;
}
.bw-mem-table-cta-cell {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bw-mem-table-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 32px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.bw-mem-table-cta:hover { opacity: 0.85; }
.bw-mem-table-cta--essential {
  background: #335d88;
  color: #fffdf8;
  border: 1px solid #335d88;
}
.bw-mem-table-cta--deluxe {
  background: #0b2e56;
  color: #fffdf8;
  border: 1px solid #0b2e56;
}

/* Location toggle row */
.bw-mem-location-toggle-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* "Member pricing varies by location:" — Barlow 16px wt=500 ls=0.16px  #000 */
.bw-mem-location-note {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: 0.16px;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

/* Toggle [498×52]  fill:#fff  stroke:#ece8dd  radius:100px  pad=4 */
.bw-mem-toggle {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ece8dd;
  border-radius: 100px;
  padding: 4px;
  gap: 0;
}
/* Toggle buttons [241×44] radius:100px  pad=10/10 */
.bw-mem-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 16px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #676767;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
/* Active: fill:#d75f3d */
.bw-mem-toggle-btn--active {
  background: #d75f3d;
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────
   4 · BECOME A MEMBER
   Figma: "become a member"  [1920×630]  fill:#fffdf8  pad=100/120/100/124
   Contact Container [1676×430]  radius:10px  HORIZONTAL gap=293  pad=100/120/100/0
   Left: Contact Details [663×230]  VERTICAL gap=57  — Contact Text [663×126] + Info
   Right: Form [720×228]  VERTICAL gap=32
   ──────────────────────────────────────────────────────────────────────── */
.bw-mem-join {
  background: #fffdf8;
  padding: 100px 120px 100px 124px;
}
.bw-mem-join-inner {
  max-width: 1676px;
  margin-inline: auto;
  border-radius: 10px;
  display: flex;
  gap: 293px;
  align-items: flex-start;
}

/* Left: Contact Details [663×230] */
.bw-mem-join-details {
  max-width: 663px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 57px;
}
.bw-mem-join-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "Become a Member" — Teodor TRIAL 60px wt=350 lh=72px  #335d88 */
.bw-mem-join-heading {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #335d88;
  margin: 0;
}

/* Desc — Barlow 16px wt=400 lh=19.2px ls=0.16px  #6c6c6c */
.bw-mem-join-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: 0.16px;
  color: #6c6c6c;
  max-width: 540px;
  margin: 0;
}

/* Contact info — Phone label + number */
.bw-mem-join-contact { display: flex; }
.bw-mem-join-phone-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* "Phone" label — Barlow 16px wt=400 ls=0.16px  #676767 */
.bw-mem-join-phone-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: 0.16px;
  color: #676767;
}
/* Number link */
.bw-mem-join-phone-number {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #335d88;
  text-decoration: none;
  transition: opacity 0.2s;
}
.bw-mem-join-phone-number:hover { opacity: 0.75; }

/* Right: Form [720×228]  VERTICAL gap=32 */
.bw-mem-join-form {
  flex: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Row: 2 inputs side by side  [720×76]  HORIZONTAL gap=16 */
.bw-mem-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Field: VERTICAL gap=4 */
.bw-mem-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Label — Barlow 14px wt=500  #1a1712 */
.bw-mem-field-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #1a1712;
}
/* Input — [352×52]  border-bottom:#ece8dd or full border */
.bw-mem-field-input {
  height: 52px;
  padding: 0 16px;
  border: 1px solid #ece8dd;
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  color: #1a1712;
  outline: none;
  transition: border-color 0.2s;
}
.bw-mem-field-input::placeholder {
  color: #b3b3b3;
}
.bw-mem-field-input:focus {
  border-color: #335d88;
}

/* Submit actions */
.bw-mem-form-actions { display: flex; }

/* Submit button — fill:#345d89  stroke:#335d88  radius:50px  h=44px */
.bw-mem-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid #335d88;
  background: #345d89;
  color: #fffcf6;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  cursor: pointer;
  transition: background 0.25s;
}
.bw-mem-submit-btn:hover {
  background: #0b2e56;
}

/* ────────────────────────────────────────────────────────────────────────
   5 · FAQ
   Figma: FAQ Section  [1920×784]  fill:#fffdf8  pad=100/120
   Left: FAQ Content [318×48] — title  Teodor 40px wt=350 lh=48px  #335d88
   Right: Commitment Card [721×584]  VERTICAL gap=12
   Card: stroke:#b3b3b3 weight=1  pad=12/12  gap=20  VERTICAL
         Frame 427321851 [697×27]: HORIZONTAL SPACE_BETWEEN  align=CENTER
         Title: Teodor TRIAL 24px wt=700 lh=26.9px  #335d88
         Desc: Barlow 16px wt=500 lh=21.6px ls=0.16px  #6b6b6e
   ──────────────────────────────────────────────────────────────────────── */
.bw-mem-faq {
  background: #fffdf8;
  padding: 100px 120px;
  position: relative;
  overflow: hidden;
}

/* Figma: Vector [1530×2063] fill:#ece8dd opacity=0.5 (decorative bg shape) */
.bw-mem-faq::before {
  content: '';
  position: absolute;
  right: -200px;
  top: -100px;
  width: 765px;
  height: 1032px;
  background: #ece8dd;
  opacity: 0.5;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.bw-mem-faq-inner {
  position: relative;
  z-index: 1;
  max-width: 1680px;
  margin-inline: auto;
  display: flex;
  gap: 643px;
  align-items: flex-start;
}

/* Left heading */
.bw-mem-faq-header {
  flex-shrink: 0;
  max-width: 318px;
  position: sticky;
  top: 100px;
}
/* "Membership FAQs" — Teodor TRIAL 40px wt=350 lh=48px  #335d88 */
.bw-mem-faq-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 350;
  line-height: 48px;
  color: #335d88;
  margin: 0;
}

/* Right: cards [721×584]  VERTICAL gap=12 */
.bw-mem-faq-cards {
  flex: 1;
  max-width: 721px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card: stroke:#b3b3b3 weight=1  pad=12  VERTICAL gap=20 */
.bw-mem-faq-card {
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  overflow: hidden;
}

/* Toggle button — [697×27]  HORIZONTAL SPACE_BETWEEN */
.bw-mem-faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Question — Teodor TRIAL 24px wt=700 lh=26.9px  #335d88 */
.bw-mem-faq-question {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 26.9px;
  color: #335d88;
  flex: 1;
}

/* Icon: minus/plus circle */
.bw-mem-faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
}
/* Open: show minus, hide plus */
.bw-mem-faq-card--open    .bw-mem-faq-icon--plus  { display: none; }
.bw-mem-faq-card:not(.bw-mem-faq-card--open) .bw-mem-faq-icon--minus { display: none; }

/* Body */
.bw-mem-faq-body {
  display: none;
  padding: 0 12px 16px;
}
.bw-mem-faq-body--open { display: block; }

/* Answer — Barlow 16px wt=500 lh=21.6px ls=0.16px  #6b6b6e */
.bw-mem-faq-answer {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: 0.16px;
  color: #6b6b6e;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   RESPONSIVE — all four required breakpoints
   ──────────────────────────────────────────────────────────────────────── */

/* 1500px — tighten internal gaps */
@media (max-width: 1500px) {
  .bw-mem-join-inner { gap: 80px; }
  .bw-mem-faq-inner  { gap: 60px; }
}

/* 1400px — reduce section padding */
@media (max-width: 1400px) {
  .bw-mem-hero-panel   { padding: 0 64px 72px; }
  .bw-mem-benefits     { padding: 64px; }
  .bw-mem-compare      { padding: 64px; }
  .bw-mem-join         { padding: 80px 64px; }
  .bw-mem-faq          { padding: 80px 64px; }
}

/* 1200px — collapse table label column, tighten benefit gap */
@media (max-width: 1200px) {
  .bw-mem-benefits-row { gap: 60px; }
  .bw-mem-compare-head { flex-direction: column; align-items: flex-start; }
  .bw-mem-table-header,
  .bw-mem-table-row,
  .bw-mem-price-row,
  .bw-mem-table-cta-row {
    grid-template-columns: 1fr 1fr;
  }
  .bw-mem-col-label,
  .bw-mem-price-label,
  .bw-mem-table-cta-label { display: none; }
  .bw-mem-faq-inner  { gap: 40px; }
  .bw-mem-feature-text { font-size: 18px; }
}

/* 1024px — stack join section, reduce compare sizes */
@media (max-width: 1024px) {
  .bw-mem-benefits-row { gap: 40px; }
  .bw-mem-benefits-title { font-size: 48px; line-height: 58px; }
  .bw-mem-compare-title  { font-size: 34px; line-height: 42px; }
  .bw-mem-compare-desc   { font-size: 17px; }
  .bw-mem-feature-text   { font-size: 16px; }
  .bw-mem-join-inner     { flex-direction: column; gap: 48px; }
  .bw-mem-join-details   { max-width: 100%; }
  .bw-mem-join-form      { max-width: 100%; }
  .bw-mem-faq-inner      { flex-direction: column; gap: 32px; }
  .bw-mem-faq-header     { position: static; }
}

/* 1000px — ensure stack */
@media (max-width: 1000px) {
  .bw-mem-join-inner     { gap: 40px; }
}

/* 768px — mobile layout */
@media (max-width: 768px) {
  /* Hero */
  .bw-mem-hero         { height: auto; min-height: 520px; }
  .bw-mem-hero-panel   { padding: 130px 24px 60px; max-width: 100%; }
  .bw-mem-h-display,
  .bw-mem-h-script     { font-size: clamp(36px, 10vw, 60px); line-height: 1.15; }

  /* Benefits */
  .bw-mem-benefits     { padding: 48px 24px; }
  .bw-mem-benefits-title { font-size: clamp(32px, 7vw, 60px); line-height: 1.1; }
  .bw-mem-benefits-row { gap: 32px; flex-direction: column; align-items: center; }

  /* Compare */
  .bw-mem-compare      { padding: 48px 24px; }
  .bw-mem-compare-title { font-size: clamp(26px, 5vw, 40px); line-height: 1.2; }

  /* Table */
  .bw-mem-table-header,
  .bw-mem-table-row,
  .bw-mem-price-row,
  .bw-mem-table-cta-row { grid-template-columns: 1fr 1fr; }
  .bw-mem-col-label, .bw-mem-price-label, .bw-mem-table-cta-label { display: none; }
  .bw-mem-feature-text { font-size: 14px; }
  .bw-mem-price-amount { font-size: 40px; }

  /* Location toggle */
  .bw-mem-location-toggle-row { flex-direction: column; align-items: flex-start; }

  /* Join */
  .bw-mem-join         { padding: 64px 24px; }
  .bw-mem-join-heading { font-size: clamp(32px, 8vw, 60px); line-height: 1.15; }
  .bw-mem-form-row     { grid-template-columns: 1fr; }

  /* FAQ */
  .bw-mem-faq          { padding: 64px 24px; }
  .bw-mem-faq-title    { font-size: clamp(28px, 6vw, 40px); }
  .bw-mem-faq-question { font-size: 18px; }
}

/* 480px — smallest mobile */
@media (max-width: 480px) {
  .bw-mem-hero-panel        { padding: 100px 16px 48px; }
  .bw-mem-h-display,
  .bw-mem-h-script          { font-size: clamp(30px, 12vw, 48px); }
  .bw-mem-hero-desc         { font-size: 16px; }
  .bw-mem-hero-cta          { font-size: 14px; padding: 0 18px; height: 40px; }

  .bw-mem-benefits          { padding: 40px 16px; }
  .bw-mem-benefits-title    { font-size: clamp(26px, 9vw, 40px); }
  .bw-mem-benefit-item      { padding: 16px; }
  .bw-mem-benefit-title-text { font-size: 16px; }

  .bw-mem-compare           { padding: 40px 16px; }
  .bw-mem-compare-title     { font-size: clamp(22px, 7vw, 34px); }
  .bw-mem-col-benefit-label,
  .bw-mem-col-name          { font-size: 20px; }
  .bw-mem-price-amount      { font-size: 32px; }
  .bw-mem-price-period      { font-size: 14px; }
  .bw-mem-table-cta         { height: 38px; padding: 0 20px; font-size: 14px; }

  .bw-mem-join              { padding: 48px 16px; }
  .bw-mem-join-heading      { font-size: clamp(28px, 10vw, 44px); }
  .bw-mem-join-desc         { font-size: 14px; }
  .bw-mem-field-input       { height: 44px; font-size: 14px; }

  .bw-mem-faq               { padding: 48px 16px; }
  .bw-mem-faq-title         { font-size: clamp(22px, 7vw, 32px); }
  .bw-mem-faq-question      { font-size: 16px; }
  .bw-mem-faq-answer        { font-size: 14px; }
}