/* A-List membership page: brand palette + box style (2026-11-05).
   Loaded after reference-membership.css, which carries its own stone/evergreen/clay palette.
   Remap that palette to the brand tokens and retire the two dark bands. */
.customer-page {
  --stone: #fff;
  --stone-2: var(--ae-blush);
  --ink: var(--ae-ink);
  --ink-soft: var(--ae-muted);
  --line: var(--ae-line);
  --cream: #fff;
  --clay: var(--ae-wine);
  --clay-soft: var(--ae-wine);
  --evergreen: var(--ae-ink);
  --evergreen-deep: var(--ae-ink);
}

/* Dark bands retired: "Honest math" and the closing CTA sit on blush; the fit columns are white cards. */
.customer-page .areas,
.customer-page .final-cta { background: var(--ae-blush); color: var(--ae-ink); border-top: 1px solid var(--ae-line); }
.customer-page .areas .section-head h2,
.customer-page .final-cta h2,
.customer-page .fit-col h3,
.customer-page .final-cta .close-line { color: var(--ae-ink); }
.customer-page .areas .section-head p,
.customer-page .final-cta .lines,
.customer-page .final-cta .membership-note,
.customer-page .fit-col li { color: var(--ae-muted); }
.customer-page .fit-grid,
.customer-page .areas-list { background: var(--ae-line); border-color: var(--ae-line); }
.customer-page .fit-col,
.customer-page .area-item { background: #fff; }
.customer-page .fit-col li { border-bottom-color: var(--ae-line); }
.customer-page .fit-col .fig,
.customer-page .area-item .n { color: var(--ae-wine); }
.customer-page .area-item h4 { color: var(--ae-ink); }
.customer-page .area-item p { color: var(--ae-muted); }
.customer-page .final-cta .membership-note a { color: var(--ae-ink); }
.customer-page .final-cta .membership-note a:hover { color: var(--ae-wine); }
.customer-page .financing-strip { border-top-color: var(--ae-line); color: var(--ae-muted); }
.customer-page .financing-strip a { color: var(--ae-ink); }
.customer-page .financing-strip a:hover { color: var(--ae-wine); }
.customer-page .financing-strip .fs-sep { color: var(--ae-line); }

/* Ways to use the Collective (2026-11-06): four equal cards replace the worth-it / not-yet comparison. */
.customer-page .ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 20px; background: var(--ae-line); border: 1px solid var(--ae-line); }
.customer-page .way-card { padding: 32px 28px; background: #fff; }
.customer-page .way-card .fig { margin-bottom: 10px; font: 500 11px/1.5 var(--ae-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ae-wine); }
.customer-page .way-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ae-muted); }
.customer-page .ways-cta { margin: 28px 0 0; text-align: center; }
.customer-page .ways-cta a { padding-bottom: 4px; border-bottom: 1px solid var(--ae-ink); font: 500 11px/1.5 var(--ae-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ae-ink); text-decoration: none; }
.customer-page .ways-cta a:hover { color: var(--ae-wine); border-color: var(--ae-wine); }
@media (max-width: 640px) { .customer-page .ways-grid { grid-template-columns: 1fr; } }