/*
 * /membership — PR26-746. Sections PR26-782 to 786.
 *
 * Foundations first: `ravl-2026.css` carries tokens, type, buttons, bands, nav and footer. Only
 * this page's composition is here — the four-column inclusion list, the two plan cards, and the
 * question list.
 *
 * THE ONE VISUAL DECISION ON THE PAGE is how much heavier the Elite card is than the Core card,
 * and the answer is: barely. PR26-784 allows a 2px accent border and the mint tint and nothing
 * else — no "most popular" flag, no dimmed Core card, nothing that shames the free choice. The
 * page's FIRST job is the free signup, because every barrier at the door works against a network
 * product, and a pricing table that makes free look like the mistake is a barrier.
 */

/* ============================================================ 01 HERO — PR26-782 */

.mb-hero__h { max-width: 16em; margin-inline: auto; }
.mb-hero__lede { margin-top: 28px; }
.mb-hero__action { margin-top: 40px; }

/* ============================================================ 02 WHAT MEMBERSHIP INCLUDES — PR26-783 */

.mb-incl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin-top: 64px;
    text-align: left;
}

.mb-incl__item { border-top: 1px solid var(--ink); padding-top: 24px; }

.mb-incl__title {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* ============================================================ 03 CORE AND ELITE — PR26-784 */

.mb-plans__h { max-width: 17em; }
.mb-plans__lede { margin-top: 22px; max-width: 46em; }

.mb-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 56px;
    align-items: start;
}

.mb-plan {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-large);
    background: var(--page);
    padding: 40px;
}

/* The whole of Elite's visual weighting: a 2px accent border and the mint tint. `--fog` rather
   than `--tint-3` because the hero is mint and this brackets the page with it — and because the
   contrast arithmetic for `--fog` is the one already measured by `npm run check:a11y`. */
.mb-plan--elite {
    border: 2px solid var(--accent);
    background: var(--fog);
}

/* 2px against 1px would shift the card's content by a pixel relative to its neighbour. Absorbed
   in the padding so the two cards' text baselines line up. */
.mb-plan--elite { padding: 39px; }

.mb-plan__badge {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--accent);
    /* White ON the action fill, not a palette colour — the same exception the primary button
       makes, and the only place a literal white is right. */
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.mb-plan__name {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* `--subtle` is 4.74:1 on white and fails on every other ground, including the mint of the
       Elite card. `--subtle-on-tint` clears 4.5:1 on all six grounds in the system and is not
       perceptibly a different grey. */
    color: var(--subtle-on-tint);
}

.mb-plan__price {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.mb-plan__alt { font-size: 17px; font-weight: 500; color: var(--body); letter-spacing: 0; }

.mb-plan__note { margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--body); }

.mb-plan__list { margin: 0 0 32px; }

.mb-plan__list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--body);
}

.mb-plan__list li strong { color: var(--ink); font-weight: 600; }

/* The tick is drawn rather than typed, so it is never announced and never selected with the text.
   `content: ""` with a border pair is a check mark that inherits nothing from a font. */
.mb-plan__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 11px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mb-plan__cta { width: 100%; }

.mb-plans__commit { margin-top: 40px; max-width: 44em; }

/* ============================================================ 04 QUESTIONS — PR26-785 */

.mb-q__h { max-width: 14em; }

.mb-q { margin-top: 56px; }

/* Hairline rules between the items, and the definition list is the right element: a question and
   its answer are a term and a definition, and a screen reader announces the pairing. */
.mb-q__item {
    padding: 32px 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 40px;
}

.mb-q__item:last-child { border-bottom: 1px solid var(--line); }

.mb-q__q {
    margin: 0;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.mb-q__a { margin: 0; }

/* ============================================================ BELOW 1440 */

@media (max-width: 1080px) {
    .mb-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
    .mb-q__item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 720px) {
    .mb-incl { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
    .mb-plans { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
    .mb-plan { padding: 28px 22px; }
    .mb-plan--elite { padding: 27px 21px; }
    .mb-q { margin-top: 36px; }
    .mb-q__item { padding: 24px 0; }
}