/* ===== /membership — the page the nav's Membership entry now opens =====
   Loaded by membership.html alone. Everything structural on that page is
   borrowed from app.css (.hero-air, .ladder-grid, .ladder-card, .cta-band);
   what lives here is the handful of things only this page has: the price under
   the headline, the Stripe-return banner, the arithmetic callout and the
   "what it does not do" list.

   WHY IT IS ITS OWN FILE. app.css is loaded by 27 pages through a `?v=` token
   at a week's max-age, so a rule only one page uses costs every other page a
   re-download to ship. A page-specific sheet is the pattern already used by
   course.css, trial.css and project-page.css. */

/* The price sentence under the headline, written by js/ladder.js from
   js/pricing.js. It carries .lc-price too, so it inherits the `:empty`
   collapse — a page that loses pricing.js shows no price, not a wrong one. */
.mb-price {
    margin: 22px auto 0;
    max-width: 560px;
    font-size: 17px;
    color: var(--ink-2);
}

/* COMING BACK FROM STRIPE. `[hidden]` is an attribute selector on purpose:
   this element is a flex/block box, and a plain `.mb-paid { display: block }`
   would beat the `hidden` attribute outright — an element that reads back
   hidden and hides nothing has shipped on this site before. */
.mb-paid {
    display: block;
    margin: 0;
    padding: 14px 24px;
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.mb-paid[hidden] { display: none; }
.mb-paid-quiet { background: var(--bg-alt); font-weight: 500; color: var(--ink-2); }

/* The arithmetic. One derived sentence plus one written one, in a box, because
   it is an argument rather than a feature and should not read as a fourth card. */
.mb-math {
    max-width: 720px;
    margin: 48px auto 0;
    padding: 24px 26px;
    background: var(--bg-alt);
    border-radius: var(--r-card);
}
.mb-math h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 10px;
}
.mb-math p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
/* Derived and therefore possibly absent: no member price in the ladder means
   no sentence, and an empty paragraph must not leave a gap above the next one. */
.mb-math p:empty { display: none; }
.mb-math-p { margin-top: 10px; }

/* What the membership does NOT do. A list of refusals, so it is deliberately
   plainer than the feature cards: no ticks, no boxes. */
.mb-not {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}
.mb-not li {
    position: relative;
    padding: 16px 0 16px 26px;
    border-top: 1px solid var(--hairline);
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.6;
}
.mb-not li:last-child { border-bottom: 1px solid var(--hairline); }
.mb-not li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ink-3);
}
.mb-contact {
    max-width: 720px;
    margin: 22px auto 0;
    color: var(--ink-2);
    font-size: 15px;
}

@media (max-width: 600px) {
    .mb-price { font-size: 16px; }
    .mb-math { padding: 20px; margin-top: 36px; }
    .mb-not li { font-size: 15px; }
}