/* ============================================================================
 * Heliomath PRICING — the learning-plans page (#pricing).
 *
 * Ported from grokkoli_pricing.css and re-pointed onto the Sunset system:
 *   - a light hero on the SAND band (mirrors the home light-hero, minus the
 *     background image + CTA); the wordmark lives here, not in the nav;
 *   - a BEIGE page field below, with WHITE .card plan tiles;
 *   - accents by the agreed mix: CORNFLOWER for primary UI (buttons, ✓ markers,
 *     prices, the free-trial badge) and CORAL/peach (--flare) for the warm
 *     highlights (the "+" bonus + the money-back guarantee callouts).
 * Layout/sizing are kept from the original; only surfaces + colours changed.
 * ========================================================================== */

/* --- HERO: light hero on the sand band. No background image, no CTA. ---------
 * The wordmark sits in an <h1> here; the nav wordmark is hidden (below). */
.light-hero {
    position: relative;
    /* Dark "midnight" hero (like the learning-differences page). The .light-hero class
     * name is legacy — the surface is dark here; the hero text below is coloured for it. */
    background-color: var(--surface-dark);
    padding: calc(4.5rem + 1vw) calc(10px + 7vw) calc(2.5rem + 2vw);
}
/* Flex layout + the desktop/mobile alignment (incl. the h2/p centring below 1000px) come
 * from .light-hero .content-container in heliomath_marketing.css (shared with the home
 * hero). The width cap MATCHES the plan-cards container (.membership-options) so the
 * left-aligned hero content lines up with the LEFT EDGE of the first card below it — the
 * hero and the cards share the same outer gutter, so equal max-widths => equal left edge. */
.light-hero .content-container {
    max-width: calc(1280px + 3vw);
    padding-left: 4px;   /* nudge the left-aligned content ~4px right so the wordmark lines up with the first card's body, not its very edge/border */
}
.light-hero h1 {
    margin: 0 0 var(--space-sm);
}
.light-hero h1 img {
    display: inline-block;
    height: calc(2.25rem + 1.6vw);   /* same sizing as the home hero wordmark */
    width: auto;
    max-width: 100%;
}
.light-hero h2 {
    /* size comes straight from the type scale (--type-h2-size) — no bespoke override */
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    color: var(--text-on-dark);              /* cream — softer than pure white on the dark hero */
    max-width: 640px;
    margin: 0 0 var(--space-sm);
}
.light-hero p {
    color: var(--text-on-dark-muted);        /* muted light — lower contrast supporting copy */
    font-size: var(--type-body-small-size);  /* one step below body; the scholarship link inherits it */
    line-height: 1.4;
    margin: 0;
}
.light-hero a {
    color: var(--link-on-dark);              /* cornflower-soft — links on the dark hero */
    text-decoration: underline;
    /* On-dark surface: re-point the link pill fill + ring to the on-dark pair. */
    --link-fill: var(--link-fill-on-dark);
    --focus-ring-link: var(--focus-ring-link-on-dark);
}
.light-hero a:hover {
    color: var(--link-on-dark-hover);
}
/* Drop the underline on press. base.css a:focus already does this globally, but this
 * block's explicit `text-decoration: underline` out-specifies it, so restate it on :focus. */
.light-hero a:focus {
    text-decoration: none;
}

/* Desktop: right-justify the scholarship line to the right edge of the THIRD card (the
 * content-container's right edge = the cards' right edge). Below 1000px it centres with
 * the rest of the hero (via the shared marketing rule). */
@media (min-width: 1000px) {
    .light-hero .content-container p {
        align-self: flex-end;
        text-align: right;
    }
}

/* The nav wordmark is hidden on the dark-hero pages (the hero carries the logo) — see the
 * `.dark-hero-page .header .navbar-brand` rule in heliomath_marketing.css. */

/* --- PAGE FIELD: beige below the hero, so the white .card tiles pop. --------- */
#pricing {
    background-color: var(--surface-default);
}

.membership-options-area {
    /* Pull the cards up so they straddle the sand-hero / beige-field boundary — the tiles
     * "cross" the two surfaces to stand out, as on the Grokkoli plans page. */
    margin-top: -41px;
    padding-bottom: 50px;
    padding-left: calc(7vw + 10px);
    padding-right: calc(7vw + 10px);
}
#pricing .membership-options-area h2 {
    font-size: calc(1.2rem + 0.6vw);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-align: center;
    max-width: calc(550px + 5vw);
    margin-top: 75px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}
#pricing .membership-options-area h2 a {
    font-size: calc(1.2rem + 0.6vw);
    color: var(--link);
    text-decoration: underline;
}
#pricing .membership-options-area h2 a:focus {
    text-decoration: none;   /* drop underline on press; the pill fill is the affordance */
}

.membership-options {
    display: flex;
    justify-content: space-between;
    max-width: calc(1280px + 3vw);
    margin-left: auto;
    margin-right: auto;
}
.membership-options ul {
    padding-left: 40px;
}

/* --- PLAN TILES: .membership carries the .card class, which supplies the shell
 *     (white surface, warm border, radius, shadow). --card-padding:0 because each
 *     card manages its own internal spacing (name divider, price, button, lists). */
/* --card-padding:0 at #pricing specificity so the foundation .card (which loads after
 * this file and defaults --card-padding to space-lg) can't re-inset the tile. */
#pricing .membership {
    --card-padding: 0;
}
.membership {
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: max(300px, min((1280px - 40px - 7vw - 10px) / 3, (100vw - 14vw - 20px - 20px) / 3));
    margin-right: 20px;
    margin-bottom: 40px;
    max-width: calc(420px + 1vw);
}
.membership:last-child {
    margin-right: 0px;
}
@media screen and (max-width: 1360px) {
    #pricing .content-container {
        max-width: 930px;
    }
    .membership-options {
        flex-wrap: wrap;
        justify-content: center;
    }
    .membership-options-area p {
        text-align: center;
    }
    .membership {
        width: 39.5vw;
    }
}
@media screen and (max-width: 860px) {
    .membership-options {
        flex-direction: column;
        align-items: center;   /* centre the single stacked column of cards */
        max-width: calc(420px + 1vw);
    }
    .membership-options-area p {
        text-align: center;
    }
    .membership {
        /* Fill the centred, max-width-capped column instead of a fixed 80vw, and drop the
           300px min-width (that floor is for the 3-across desktop layout — when stacked it
           overflows the ~255px content area on a 320px phone, clipping the card's right
           edge). width:100% + border-box keeps the card inside the column at every width. */
        width: 100%;
        min-width: 0;
        margin-right: 0px;
    }
}

/* Phones (≤430px): the stacked card fills the column, so its side margins ARE the
   .membership-options-area padding (calc(7vw + 10px), ~32px/side at 320). That felt boxed-in,
   so drop the +10px constant here (→ 7vw, ~22px/side) to hand the card ~20px more width while
   keeping a comfortable margin. Still vw-based so it scales; tablet/desktop keep the full
   7vw + 10px and are unchanged. */
@media screen and (max-width: 430px) {
    .membership-options-area {
        padding-left: 7vw;
        padding-right: 7vw;
    }
}

#pricing .membership-options .membership h2 {
    /* Fluid size clamped to [26px, 31px]. Replaces two media-query pins
       (≤1360px → 26px, ≥2290px → 31px) that fenced this same calc; clamp is
       equivalent and drops the small jump those hard breakpoints could cause
       if 1rem ever differs from 16px. */
    font-size: clamp(26px, calc(1.15rem + 0.55vw), 31px);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    max-width: 20ch;
}
.membership h4 {
    font-weight: var(--font-weight-bold);
}
#pricing .membership-options .referral-discount {
    color: var(--flare);
    margin: 0 24px 20px;
    font-size: 17px;
    margin-top: -10px;
}
#pricing .membership-options .referral-discount span {
    font-size: 24px;
}

/* Start-Free-Trial button — winter-green (--accent-secondary, the positive/value
 * accent) fill, midnight label, pill. Can't literally use the component: the markup is
 * a shared .btn.btn-grokkoli-primary, which the component's :not(.btn-grokkoli-primary)
 * guard skips — so we reproduce the look here. */
.membership .btn {
    /* Barely scales with width (was var(--type-h4-size) = calc(1.15rem + 0.3vw), which grew
     * the button too tall on wide screens); the small-screen size was already good. */
    font-size: calc(1.15rem + 0.1vw);
    font-weight: var(--font-weight-bold);
    width: calc(100% - 48px);
    margin: 20px 24px 25px;
    margin-top: auto;
    padding: 0.7rem 1.7em;   /* top/bottom trimmed a touch from 0.85rem */
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background-color: var(--accent-secondary);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.membership .btn:hover  { background-color: var(--accent-secondary-hover); }
/* Press / focus — the detached full-opacity accent outline (offset off the edge),
 * matching the Heliomath .btn--accent ring (see heliomath_components.css), NOT the
 * old translucent box-shadow that hugged the button. Plain :focus (not
 * :focus-visible) so the ring shows on click too, and box-shadow:none clears the
 * legacy ring. :active also keeps the pressed fill + the downward nudge. */
.membership .btn:active {
    background-color: var(--accent-secondary-active);
    transform: translateY(1px);
    outline: 2px solid var(--accent-secondary);
    outline-offset: 3px;
    box-shadow: none;
}
.membership .btn:focus {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 3px;
    box-shadow: none;
}

.membership-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    font-weight: var(--font-weight-semibold);
}
.membership-price {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: calc(1.9rem + 1vw);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 20px 24px 0;
}
.membership-price sup, .membership-price span.small {
    font-size: 50%;
    font-weight: var(--font-weight-bold);
}

.discounted-price {
    position: absolute;
    color: var(--flare);
    font-size: 25px;
    top: -5px;
    left: calc(55px + 1vw);
}
.membership-price .discounted-price sup {
    font-size: 16px;
}
.membership-price .discounted-price span {
    font-size: 18px;
}
.membership-price .price {
    min-width: 150px;
    margin-right: 15px;
}
.membership-price .price span.strikethrough {
    position: relative;
}
.membership-price .price span.strikethrough:before {
    position: absolute;
    content: "";
    left: 0;
    top: 45%;
    right: 0;
    border-top: 2px solid;
    border-color: var(--flare);
    transform: rotate(-10deg);
}
.partial-discount .membership-price .price span.strikethrough:before {
    border-color: var(--flare);
}
.partial-discount .membership-price .discounted-price {
    color: var(--flare);
}
.memberships-note {
    text-align: center;
    width: 100%;
    color: var(--text-muted);
}

/* Free-trial badge — a soft neutral pill with the cornflower accent. */
.free-trial {
    position: absolute;
    top: 100px;
    right: 0;
    width: 136px;
    padding: 5px 5px 5px 6px;
    background-color: var(--surface-sunken);   /* sand ribbon */
    color: var(--night);   /* dark-blue "night" label on the sand ribbon */
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}
.arrow {
    position: absolute;
    top: 100px;
    right: 136px;
    height: 0;
    width: 0;
    border-bottom: 32px solid transparent;
    border-right: 12px solid var(--surface-sunken);   /* sand notch, matches the ribbon */
}
.membership .sub-text {
    text-align: left;
    font-size: calc(13.5px + 0.2vw);
    color: var(--text-muted);
    margin: -5px 24px 25px;
}

/* The "+" bonus mark — warm (coral). */
.bonus {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--accent-secondary);
}

/* Money-back guarantee callouts — a sand-tinted panel with a warm (coral) accent. */
.special {
    background-color: var(--surface-elevated);   /* white — the green text reads better than on sand */
    border: 1px solid var(--accent-secondary);   /* winter-green hairline defines the area on the white card */
    font-size: calc(13.5px + 0.2vw);
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
    margin: 0px 24px 20px;
    padding: 15px 18px;
    border-radius: 16px;
}
.special.orange,
.special.green {
    color: var(--accent-secondary);
}
.special strong {
    font-size: 110%;
    font-weight: var(--font-weight-semibold);
}
.special span.dollars {
    font-size: 135%;
}

.benefits {
    margin: 0px 24px;
    font-size: calc(13.5px + 0.2vw);
    color: var(--text-muted);
}
/* The monthly card ends on its benefits list — it has no trailing note like the other
   cards' money-back / savings lines — so on narrow screens its last bullet sat flush
   against the card's bottom edge (the card's padding-bottom is 0). Give .benefits a
   bottom margin ONLY when it's the card's last child, so this lands on that one card;
   the other cards (whose .benefits is followed by a .special note) are unaffected. The
   card's border stops the margin collapsing, so it renders as real interior space. */
.membership .benefits:last-child {
    margin-bottom: var(--space-lg);
}
.benefits strong {
    font-weight: var(--font-weight-semibold);
}
#pricing .benefits h3 {
    font-size: calc(1rem + 0.2vw);
    color: var(--text-primary);
    margin-top: 0;
}
/* Separate the "Benefits for parents" group from the learners list above it. The base
 * li:last-child rule strips the learners list's trailing margin, and .benefits h3 zeroes its
 * own margin-top, so the two subsections otherwise collide. A top margin on the SECOND group
 * (not on the h3) restores the gap without pushing down the first group's heading. */
.for-parents {
    margin-top: var(--space-md);
}
/* ✓ list markers — cornflower (primary). */
.benefits li::marker {
    content: "✓  ";
    color: var(--accent-secondary);
}

/* Parent-features — a MIDNIGHT panel (to break up the run of beige sections). All text is
 * cornflower-soft — title, subheadings and body share one blue. No CTAs, nothing else to re-theme. */
.parent-features {
    background-color: var(--surface-dark);
    color: var(--cornflower-soft);   /* cornflower-soft copy — matches the h2 title (was --cornflower-pale) */
    /* Extra-light body weight: white Nunito on the dark panel blooms and reads heavier than
     * it is, so even 300 looks chunky here. Inherited by the copy; headings + <strong> keep
     * theirs. (200 is off the token scale — hardcoded while we eyeball it.) */
    font-weight: 200;
    padding: var(--space-2xl) var(--space-gutter);
}
.parent-features .standard-brochure-module {
    max-width: var(--mp-content-max);
    margin-left: auto;
    margin-right: auto;
}
.parent-features h2 { color: var(--cornflower-soft); }   /* blue title on the dark panel */
.parent-features h3 {
    color: var(--cornflower-soft);           /* cornflower-soft subheadings — same blue as the h2 title (was --cornflower-pale) */
    font-size: var(--type-h4-size);          /* step these feature subheadings down to H4 */
    line-height: var(--type-h4-line);
    font-weight: var(--font-weight-medium);  /* medium weight — the body is 200, so this is a step up */
}

.parent-features .standard-brochure-module .flex {
    display: flex;
    justify-content: flex-start;
}
@media screen and (max-width: 750px) {
    .parent-features .standard-brochure-module .flex {
        flex-direction: column;
        align-items: flex-start;
    }
}
.parent-features .copy-block {
    margin-right: 20px;
}
/* Don't stretch the image column to the (taller) copy column — otherwise its frame runs
 * way down past the image. Sizing it to its content makes the frame hug the image. */
.parent-features .image-block {
    align-self: flex-start;
    margin-top: 20px;
}
.parent-features img {
    width: 480px;            /* ~60% bigger than the old 300px — the screenshot was barely readable */
    max-width: 100%;
    height: auto;            /* true aspect: the white frame hugs the image, no distortion, no over-tall box */
    border: 10px solid var(--surface-elevated);   /* the white photo-frame, which sticks to the image */
    border-radius: 10px;
    box-shadow: var(--shadow-elevated-hover);
}