/* ==========================================================================
   PLAN EXPLAINERS   body.page-plan-explainers
   ==========================================================================
   An intro hero with a sample explainer card (.pe-card, reusing bar-compare),
   then #launch-set, the grid of explainers.
   ========================================================================== */

body.page-plan-explainers {
    /* The card has its own border: no divider beside it. Desktop: it floats
       over the hero's two rules, 106px above the top one and 127px below the
       bottom (at 2400), as on the board. Stacked below 993. */
    .hero__intro > .pe-card {
        border-left: 0;
        padding-left: clamp(1.25rem, 2vw, 1.9rem);
    }

    .pe-card {
        background: var(--white);
        border: 1px solid #E3E7EC;
        border-radius: 12px;
        padding: clamp(1.25rem, 2vw, 1.9rem);
        box-shadow: 0 18px 40px -24px rgba(4, 32, 63, 0.25);

        h3 {
            font-family: var(--type-display);
            font-size: clamp(1.2rem, 1.5vw, 1.5rem); color: var(--heading);
            margin: 0 0 0.75rem; padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--hairline); line-height: 1.2;
        }
        .pe-body { margin: 0; color: var(--body); font-size: 0.9375rem; line-height: 1.5; }
        .pe-step {
            display: block; margin: 1.1rem 0 0.4rem;
            font-family: var(--type-body); font-weight: 700;
            font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--prime);
        }
        .pe-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.35rem 0; color: var(--body); font-size: 0.9375rem; line-height: 1.4; }
        .pe-tick { color: var(--prime); font-weight: 700; flex: none; }
        .pe-tax {
            margin: 0.75rem 0 0; text-align: right;
            font-family: var(--type-body); font-weight: 700;
            font-size: 0.875rem; color: var(--heading);
        }

        /* the bar-compare, compacted; no rule between its two bars */
        .bar-compare { margin-top: 0.25rem; }
        .bc-row { padding: 0.4rem 0 0.55rem; }
        .bc-row + .bc-row { border-top: 0; }
        .bc-label { font-size: 0.875rem; }
        .bc-val,
        .bc-row--hi .bc-val { font-size: 1rem; }
        .bc-fill { height: 16px; }
        .bc-fill--hi { height: 18px; }
    }
}
@media only screen and (min-width: 993px) {
    body.page-plan-explainers .hero__intro > .pe-card {
        position: relative; z-index: 1;
        margin-top: calc(-1 * clamp(1.75rem, 3vw, 2.75rem) - clamp(2rem, 4.42vw, 6.625rem));
        margin-bottom: calc(-1 * clamp(1.75rem, 3vw, 2.75rem) - clamp(2rem, 5.29vw, 7.9375rem));
    }
}

/* The launch set: a rule above each explainer */
#launch-set .row > * {
    border-top: 2px solid var(--hairline);
    padding-top: clamp(1rem, 1.6vw, 1.4rem);

    h3 {
        font-family: var(--type-display);
        font-size: clamp(1.2rem, 1.5vw, 1.5rem); color: var(--heading);
        margin: 0 0 0.5rem; line-height: 1.2;
    }
    p { margin: 0 0 1.1rem; color: var(--body); font-size: 0.9375rem; line-height: 1.5; }
    p:last-child { margin-bottom: 0; }
    a.btn { margin: 0; }
}