/* ============================================================================
 * Heliomath MARKETING — structural components for the public landing pages.
 *
 * Loaded on every Heliomath landing/marketing page. These are the building
 * blocks that divide a page into full-width "folds" (like a multi-fold brochure)
 * with all content aligned to one shared measure, so materials line up section to
 * section and page to page.
 *
 * Class-based and opt-in, built on the tokens (spacing scale + surfaces). New
 * class names, so nothing here collides with or depends on the legacy CSS.
 *
 * STRUCTURE
 *   .mp-section              a full-width band (one "fold") — fluid vertical
 *                            rhythm + side gutters. Pair with a --surface
 *                            modifier for a background.
 *   .mp-section__inner       the content wrapper INSIDE a band — caps + centres
 *                            content at --mp-content-max so every section aligns.
 *   .mp-section__inner--wide / --narrow   alternate widths off the same centre.
 *   .mp-section__inner--centered          stack + centre the inner's children.
 *   .mp-section--<surface>   background modifiers (sunken / dark / …).
 *
 * USAGE
 *   <section class="mp-section mp-section--sunken">
 *     <div class="mp-section__inner mp-section__inner--centered"> … </div>
 *   </section>
 * ========================================================================== */

:root {
    /* The shared content widths every landing-page section aligns to. Change them
     * here and all sections re-align together. rem-based so they track zoom. */
    --mp-content-max:        68rem;   /* ~1088px — the standard content column */
    --mp-content-max-wide:   84rem;   /* ~1344px — wide rows (card grids, etc.) */
    --mp-content-max-narrow: 40rem;   /* ~640px  — prose / focused copy */
}

/* --- Section band (a brochure "fold") ------------------------------------ *
 * Full-width. Fluid vertical rhythm (space scale) + a fluid side gutter so
 * content never kisses the screen edge on narrow viewports. Physical properties
 * (not padding-block/inline) to stay within the browser floor. */
.mp-section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}

/* --- Inner: the alignment container -------------------------------------- *
 * width:100% + max-width + auto side margins => content caps at the shared
 * measure and centres, so every section's content lines up edge to edge. */
.mp-section__inner {
    width: 100%;
    max-width: var(--mp-content-max);
    margin-left: auto;
    margin-right: auto;
}
.mp-section__inner--wide   { max-width: var(--mp-content-max-wide); }
.mp-section__inner--narrow { max-width: var(--mp-content-max-narrow); }

/* Centred variant — stacks and centres children (the legacy centered-module). */
.mp-section__inner--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ============================================================================
 * LIGHT-HERO PAGE NAV + SECTION HEAD — shared marketing chrome.
 *
 * Moved here from heliomath_home.css (where they were scoped to #home / only loaded
 * on the home page) so EVERY marketing page gets them — notably the pricing page,
 * which was showing white nav links on its light hero and a left-aligned section head.
 * ========================================================================== */

/* The transparent nav sits over a LIGHT hero on these pages (home, pricing, …), so its
 * links need dark ink + the decorative face to read. Scoped by the light-hero-page body
 * class (not :has(), which is above the browser floor). */
.light-hero-page .nav-link {
    font-family: var(--font-family-decorative);
    text-decoration: none;
}
.light-hero-page .header.navbar-light.transparent .navbar-nav .nav-link {
    color: var(--night);
    font-weight: var(--font-weight-light);
}
.light-hero-page .header.navbar-light.transparent .navbar-nav .nav-link:hover {
    color: var(--midnight);
}
/* Pressed / focus ring — mirrors the dark-header pill's fix (heliomath_nav.css), but
 * these light-hero nav links have DARK ink, so the ring takes their TEXT colour
 * (--night), not a fill. Two reasons for outline + outline-offset here:
 *   1. An outline paints OUTSIDE the box and never reflows it, so the link can't
 *      change size on press.
 *   2. It lets us neutralise base.css's a:focus — the source of the distortion. That
 *      rule cuts the horizontal padding to 0.4em (which narrows the link and wraps its
 *      label to two lines: the "taller and skinnier" seen on the home pages) and adds
 *      negative side margins + an azure box-shadow ring. We restore the resting box
 *      metrics (Bootstrap's .nav-link 0.5rem 1rem / margin 0) and kill the box-shadow.
 * heliomath_nav.css isn't loaded on the home pages, so this is stated here (loaded on
 * every light-hero page). Plain :focus (not :focus-visible) so the ring shows on click. */
.light-hero-page .header.navbar-light.transparent .navbar-nav .nav-link:focus,
.light-hero-page .header.navbar-light.transparent .navbar-nav .nav-link:active {
    outline: 2px solid var(--night);
    /* Small offset so the ring HUGS the pill (it has only a faint translucent fill and
     * a tight box, so the 3px gap used on the larger dark-header pills read as too big). */
    outline-offset: 1px;
    box-shadow: none;
    /* Pin the resting box so base.css's a:focus can't shift/resize it. The resting box
     * is Bootstrap's navbar pill: .nav-link gives 0.5rem top/bottom and
     * .navbar-expand .navbar-nav .nav-link gives 0.5rem left/right — i.e. 0.5rem all
     * round. (base.css's a:focus only manages to change the side MARGINS, since that
     * navbar-expand rule already out-specifies it on padding — the margin reset below is
     * what actually stops the drift.) */
    padding: 0.5rem;
    margin-left: 0;
    margin-right: 0;
}

/* Dark-hero pages (about, plans): the transparent nav sits over a MIDNIGHT hero, so the
 * links are LIGHT pills instead (mirrors the LD / account-access nav). The pill itself —
 * box, typography, hover, AND the gap between pills — is the SINGLE SOURCE OF TRUTH in
 * heliomath_nav.css, which these pages load via their extra_head (see about.html /
 * plans.html). Do NOT restate the pill here: an earlier partial copy that set only
 * color/background silently leaned on grokkoli_public.css for its horizontal padding, and
 * lost it when that file was stripped. The only dark-hero-specific rule left is hiding the
 * nav wordmark, since the wordmark lives in the hero on these two pages. */
.dark-hero-page .header .navbar-brand {
    display: none;
}

/* The transparent nav (over a hero — home, educators, about, plans,
 * learning-differences, + auth) must ROLL OFF with the page as you scroll — it should
 * NOT stick to the window. Bootstrap's `.fixed-top` makes it position:fixed;
 * grokkoli_public used to override it to absolute, but that's gone with the strip, so
 * restore it here. Only the TRANSPARENT nav is targeted, so the solid blog/success navs
 * (no `.transparent`) correctly stay sticky. */
.header.navbar-light.transparent.fixed-top {
    position: absolute;
}

/* Fixed solid-nav clearance for the ported CONTENT pages (legal / success-stories /
 * scholarship). grokkoli_base used to clear the fixed ~64px top nav via `#main`
 * padding and the `.top-bar-spacer` height; both are gone with the Grokkoli strip.
 * These push each page's H1 ~40-50px below the bottom of the nav. Marketing loads on
 * exactly these pages, so the ids/class below only exist where the clearance is wanted.
 * (Scholarship's .mp-section supplies ~63px on its own — entirely under the nav — so it
 * needs this extra push for a visible gap.) */
.top-bar-spacer { height: 7rem; }          /* legal: nav 64px + ~48px gap */
#success-stories-page { padding-top: 4.5rem; }
#scholarship-page { padding-top: 3rem; }   /* + the mp-section's ~63px → H1 ~48px below the nav */

/* Scholarship page — form + copy specifics. */
#scholarship-page .contact-form .btn-grokkoli-primary {
    margin-top: 1.5rem;   /* breathing room between the last field and the Submit button */
}
/* The "$10/month" emphasis: wintergreen (the value/positive accent) at its DEEP tier —
 * coral is too light for small text on the beige field. Id-scoped, and grokkoli_base
 * (which !important-colours these legacy .accent-color-* classes) isn't loaded on the
 * solid-nav scholarship page, so no !important needed. */
#scholarship-page .accent-color-winter-green {
    color: var(--accent-secondary-hover);
}

/* Section head (eyebrow + title + sub wrapper) — centred. Used by the shared section
 * partials (e.g. the testimonials "What people are saying" head), so it belongs here,
 * not under #home. */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-lg);
}

/* Light-hero CONTENT LAYOUT — shared by the home + pricing light heroes. Left-aligned at
 * desktop, centred below 1000px. The centring sets text-align on the h2/p CHILDREN
 * explicitly (not just align-items on the container) — otherwise the h2/p text stays left
 * while the blocks centre. Moved here from heliomath_home.css so it also drives the
 * pricing hero (which loads marketing.css, not home.css). Each page keeps its own hero
 * surface (background), width cap and h1/h2/p sizing. */
.light-hero .content-container {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 999px) {
    .light-hero .content-container {
        align-items: center;
    }
    .light-hero .content-container h2,
    .light-hero .content-container p {
        text-align: center;
    }
}

/* --- Surface (background) modifiers — pair with .mp-section --------------- *
 * The dark ones also set the default ink so content on them reads without
 * needing extra classes. */
.mp-section--surface  { background-color: var(--surface-default); }
.mp-section--sunken   { background-color: var(--surface-sunken); }
.mp-section--elevated { background-color: var(--surface-elevated); }
.mp-section--dark     { background-color: var(--surface-dark);     color: var(--text-on-dark); }
.mp-section--dark-alt { background-color: var(--surface-dark-alt); color: var(--text-on-dark); }
/* Headings inside a dark band need the on-dark ink restated: the section rule above sets
 * text to --text-on-dark, but base.css's `h2 { color: --text-primary }` (etc.) targets the
 * heading DIRECTLY and beats that inherited colour, so a bare <h2> would render midnight
 * (invisible) on the dark surface. Restate it here for all heading levels. */
.mp-section--dark h1, .mp-section--dark h2, .mp-section--dark h3, .mp-section--dark h4,
.mp-section--dark-alt h1, .mp-section--dark-alt h2, .mp-section--dark-alt h3, .mp-section--dark-alt h4 {
    color: var(--text-on-dark);
}

/* Testimonials rest on the recessed sand band, with a warm hairline closing it off from
 * the section that follows + a healthy bottom pad so the band doesn't hug the cards.
 * Un-scoped from #home so it applies on #pricing (the plans page) too — the testimonials
 * styling is identical on every page that shows the partial. */
#testimonials {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border-on-sunken);
    padding-bottom: var(--space-2xl);
}

/* ============================================================================
 * SECTION FIXES — post .mp-section migration
 *
 * The testimonials container was renamed from .centered-standard-brochure-module
 * to .mp-section__inner--centered. Two behaviours were keyed to the OLD class
 * name (in grokkoli_public.css + the retired brand override) and lost in the rename;
 * restored here, scoped to #testimonials so no other centred section is touched:
 *   1. the >=860px switch to a horizontal row of equal-height cards. Without it
 *      the cards stack full-width and each card's quote "bubble" wraps its own
 *      attribution (.witness sits INSIDE the card).
 *   2. left-aligned card text — .mp-section__inner--centered adds
 *      text-align:center, which the old container did not.
 * ========================================================================== */
#testimonials .mp-section__inner--centered {
    text-align: left;
}
@media screen and (min-width: 860px) {
    #testimonials .mp-section__inner--centered {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;   /* equal-height cards, so each pinned attribution lines up */
    }
}



/* Beige (not white) so the white success-story cards pop against the section. */
#home #success-story-sample { background-color: var(--surface-default); }
/* Legacy dark-band class (predates the .mp-section--dark markup migration);
 * --surface-dark resolves to --midnight. */
#home .dark-blue-background { background-color: var(--surface-dark); }

/* --- Success-story SAMPLE: featured rounded cards (the #success-story-sample
 *     partial used on the home and learning-differences pages). Scoped to the
 *     section id so it can't touch the full success_stories page (which uses
 *     .success-stories.solo and is themed under #success-stories-page). --- */
#success-story-sample {
    padding-top: calc(3rem + 2vw);
    padding-bottom: calc(3rem + 2vw);
    box-shadow: none;
}
/* Shell (surface, border, radius, shadow, padding) now comes from .card
 * (heliomath_components.css); only the intra-card gap is set here. */
#success-story-sample .success-story-list-item {
    gap: 24px;
}
#success-story-sample img {
    box-shadow: none;
    margin-right: 0;
    /* Inset + rounding were supplied by grokkoli_public.css's .success-stories img
     * (padding:20px 10px; border-radius:15px), which the home page no longer loads —
     * reproduced here. Transparent mat (not a colour) so the inset shows the white
     * card, not a beige frame, around the illustration. */
    padding: 20px 10px;
    border-radius: 15px;
    background-color: transparent;
}
/* The learner illustration sits in a fixed-height (inline height:200px) image
 * column. Keep that column from shrinking in the flex row: otherwise the global
 * img{max-width:100%} clamps the image narrower than its aspect ratio while the
 * fixed height holds, squishing it horizontally. */
#success-story-sample .success-story-list-item > div:first-child {
    flex-shrink: 0;
}
/* Card headlines step down from the section title so the hierarchy reads
 * "section → items" (base sizes them nearly as large as the section h2). */
#success-story-sample .success-story-list-item h3 {
    font-size: calc(1.1rem + 0.35vw);
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    margin-top: 0;
    margin-bottom: 8px;
}
#home .standard-brochure-module a,
#success-story-sample a {
    color: var(--accent-primary);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================================
 * FAQ  — ported from the legacy Grokkoli CSS so it lives in the Heliomath CSS.
 *
 * This is the FULL effective FAQ styling for Heliomath, consolidated here from the
 * two files it originally spanned:
 *   1. grokkoli_public.css  — the structural base (padding, ol/li, the .faq tile,
 *      the comparison table, .faq-hide, disabled states).
 *   2. the retired brand override — the modern re-skin (white rounded tiles,
 *      chevron disc, exploration-palette colours) + the #faq-section background.
 *
 * Selectors and specificity are preserved VERBATIM, and the base rules are kept
 * ABOVE the re-skin (mirroring the original load order) so equal-specificity ties
 * resolve exactly as they do in production — this file renders the FAQ identically
 * on its own. This is a straight move; the redesign onto the Heliomath token/.mp-
 * system happens in the follow-up adjustment pass.
 *
 * TO RECONCILE (adjustment pass): .faq-question.disabled, strong, and the
 * .faq-question:not(:last-child) colour still reference legacy Grokkoli vars
 * (--off-white, --main-*) that the re-skin never overrode. They need Heliomath
 * token equivalents once grokkoli_public.css is removed from these pages.
 * ========================================================================== */

/* --- Structural base (from grokkoli_public.css) -------------------------- */
#faq-section {
    padding-bottom: 85px;
    /* Match .mp-section's gutter EXPLICITLY (at #id level) so this beats the legacy
       grokkoli_public.css `#faq-section { … 4vw }`, still loaded on the page — it's
       equal-specificity but loads earlier, so without this the FAQ column ends up
       wider than every other section. (Redundant once grokkoli_public is dropped.) */
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    overflow: hidden;
}
@media screen and (max-width: 1000px) {
    #faq-section {
        padding-bottom: 4vw;
    }
    #faq-section ol {
        margin-bottom: 0;
    }
}
#faq-section h2 {
    font-size: calc(1.8rem + 0.5vw);
    text-align: center;
}

#faq-section ol {
    padding-left: 0;
}
#faq-section ol li {
    display: flex;
    flex-direction: column;
    font-size: calc(1.1rem + 0.3vw);
    margin-top: 20px;
}
#faq-section ol li:last-child {
    margin-bottom: 0;
}
#faq-section ul li {
    display: list-item;
    font-size: calc(1rem + 0.2vw);
    margin-top: 10px;
    list-style-type: square;
}
/* The .faq tile shell now comes from the .card component (added to each
 * <li class="faq card">); the legacy grokkoli_public base tile (--off-white, 4px
 * radius, 30px pad) + its steel-grey ".link-to"/last-child variant are dropped
 * here. The accordion's own inset + clip live in the re-skin block below. */
#faq-section .faq-question {
    -webkit-user-select: none;
    user-select: none;
}
#faq-section .faq-question a, #faq-section .faq-answer a {
    text-decoration: underline;
}
/* Drop the underline on press (the pill fill is the affordance); this block's explicit
 * underline out-specifies base.css a:focus, so restate it. */
#faq-section .faq-question a:focus, #faq-section .faq-answer a:focus {
    text-decoration: none;
}
#faq-section .faq-question:not(:last-child) {
    color: var(--link);
    cursor: pointer;
}
#faq-section .faq-question:not(:last-child):hover {
    color: var(--link-hover);
}
#faq-section .faq-question.disabled {
    color: var(--text-caption);
}
#faq-section .faq-question.disabled:hover {
    color: var(--text-caption);
    cursor: auto;
}
#faq-section .faq-answer {
    margin-top: 18px;
    font-size: calc(1rem + 0.2vw);
}
#faq-section ul li span.small {
    font-size: calc(0.95rem + 0.1vw);
    max-width: calc(575px + 10vw);
    display: inline-block;
}
.faq-hide {
    display: none;
}
#faq-section strong {
    color: var(--text-primary);
}

/* --- Heliomath re-skin (from the retired brand override) ---------------- *
 * modern tiled accordion — crisp white tiles on the soft cloud section,
 * lighter question type (was heavy 900-weight), and a chevron set in a small
 * circular control. (Open state toggles .faq-hide on the ANSWER, not a class
 * on the question, so the chevron stays static — :has() is above the browser
 * floor and we don't add JS for a cosmetic flourish.) */
#faq-section,
#pricing #faq-section { background-color: var(--surface-default); }
#faq-section h2 { color: var(--midnight); margin-bottom: calc(1.5rem + 1vw); }
#faq-section ol li { margin-top: 14px; }
/* FAQ tiles ARE cards — each <li> carries the .card class. But the still-loaded
 * legacy grokkoli_public.css pins an `#faq-section .faq` shell (specificity 1,1,0)
 * that out-specifies the bare `.card` (0,1,0), so we re-assert the SAME shell here
 * at #id level — using the very tokens the .card component uses, so it stays
 * pixel-identical to a card — to win the cascade. Plus the accordion-only bits: a
 * zeroed inset (the padding lives on .faq-question / .faq-answer) and an overflow
 * clip for the chevron disc + answer hairline. Hover deepens the shadow only (no
 * lift: a vertical accordion list shouldn't bounce, so .card--interactive is not
 * used). When grokkoli_public.css is dropped from these pages, this whole block
 * can go and the bare .card class takes over. */
#faq-section .faq {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
#faq-section .faq:hover {
    box-shadow: var(--shadow-elevated-hover);
}
/* Neutralise the legacy steel-grey dashed last-child / .link-to variant
 * (grokkoli_public.css `#faq-section .faq:last-child`, 1,1,1) so the last
 * "Contact us" tile is a plain card too. */
#faq-section .faq:last-child,
#faq-section .faq.link-to {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-warm);
}
#faq-section .faq-question {
    color: var(--midnight);
    font-weight: var(--font-weight-medium);
    font-size: calc(1rem + 0.1vw);
    line-height: 1.45;
    padding: 20px 64px 20px 24px;
    position: relative;
}
#faq-section .faq-question:not(:last-child):hover { color: var(--link-hover); }
/* Chevron in a circular disc — ::before is the disc, ::after the arrow. */
#faq-section .faq-question::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background-color: var(--surface-sunken);
    border: 1px solid rgba(13, 27, 42, 0.08);
}
#faq-section .faq-question::after {
    content: "";
    position: absolute;
    right: 31px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--gray-700);
    border-bottom: 2px solid var(--gray-700);
    transform: rotate(45deg);
}
#faq-section .faq-question:last-child::before,
#faq-section .faq-question:last-child::after { display: none; }
#faq-section .faq-answer {
    color: var(--gray-700);
    font-size: calc(0.95rem + 0.1vw);
    line-height: 1.6;
    border-top: 1px solid rgba(13, 27, 42, 0.06);
    margin: 0 24px;
    padding: 16px 0 20px;
}
#faq-section .accent-color-winter-green { color: var(--flare); }

/* FAQ — same migration bite: the accordion sits in .mp-section__inner--centered,
 * whose text-align:center leaked into every .faq-question (title) and .faq-answer
 * (text), and whose align-items:center shrink-wrapped the <ol> instead of letting
 * the tiles span the measure. Restore a normal left-aligned, full-width stack. The
 * section's own <h2> keeps its centered heading via the #faq-section h2 rule. */
#faq-section .mp-section__inner--centered {
    align-items: stretch;
    text-align: left;
}


/* ============================================================================
 * MARKETING BODY COPY SIZE
 *
 * FAQ, testimonials and the success-story tiles predate the --type-* scale, so
 * their text still comes from old hardcoded sizes — the FAQ from its re-skin block
 * above (~0.95rem), and the testimonials + success stories from the legacy
 * grokkoli_public.css sizes ported below (an 11px / 0.9rem floor). That reads
 * noticeably smaller than the rest of the page, whose body copy is --type-body-size
 * (~17px floor). Bring these up to the body token so marketing copy is uniform; the
 * selectors match/beat the rules they replace, so they win.
 * ========================================================================== */
#faq-section .faq-answer {
    font-size: var(--type-body-size);
}
/* The question is now an <h3> (see the FAQ templates): give it the FAQ-question size
 * (--type-faq-question-size — a notch above body copy, sharing body's tiny 0.25vw growth so it
 * can't balloon on desktop), and zero the default heading margin so the tile spacing is unchanged. */
#faq-section .faq-question {
    font-size: var(--type-faq-question-size);
    margin: 0;
}
#testimonials .testimony-copy p {
    font-size: var(--type-body-size);
}
#success-story-sample .success-story-list-item p {
    font-size: var(--type-body-size);
}


/* ============================================================================
 * COMPONENT LAYOUT PORTED FROM grokkoli_public.css
 *
 * Structural layout the testimonials + success-story components used to get from
 * grokkoli_public.css, moved here so they survive once that file is dropped from
 * the Heliomath pages. STRUCTURE ONLY (flex, spacing, byline size) — the quote
 * bubble + card SKINS/colours already come from the blocks above (ported from the
 * retired brand override), so the legacy --main-* / --off-white colour refs are intentionally
 * NOT carried over. Rethemed onto the spacing/type tokens. Everything is scoped to
 * its section id (the containers are .mp-section already, so only the inner
 * component structure was missing).
 * ========================================================================== */

/* --- Testimonials --------------------------------------------------------- *
 * Equal-height white CARDS: a warm quote mark, the quote copy, then a
 * hairline-separated attribution pinned to each card's base. The card SKIN was
 * ported from the retired brand override (rethemed to Sunset tokens); the small
 * structural pieces (witness <h3> size, the stacked-card gap) come from the old
 * grokkoli_public.css. The row layout is set in SECTION FIXES above; below 860px
 * the cards stack. */
#testimonials .testimonial {
    display: flex;
    flex-direction: column;
    align-items: stretch;           /* the card fills the column width */
    max-width: 420px;
    margin-bottom: var(--space-xl);  /* gap between stacked cards below 860px */
}
/* The card. Its shell (surface, border, radius, shadow, padding) + the hover lift
 * now come from .card / .card--interactive (heliomath_components.css); only the
 * layout that fills the tile is set here. */
#testimonials .testimony {
    display: flex;
    flex-direction: column;
    font-style: normal;
}
/* Warm quote mark. */
#testimonials .quotation {
    color: var(--peach);
    font-family: var(--font-family-decorative);
    font-size: calc(28px + 2vw);
    line-height: 0.7;
    margin: 0 0 6px;
}
/* Quote copy fills the card so the attribution pins to the bottom. */
#testimonials .testimony-copy { flex: 1 1 auto; }
#testimonials .testimony-copy p { color: var(--gray-700); }
/* Attribution, hairline-separated, along each card's base. */
#testimonials .witness {
    text-align: left;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    min-width: 0;
}
#testimonials .witness h2 { color: var(--text-primary); font-size: 1.1rem; }
/* Role/location line ("Parent — City, State"): base.css sizes a bare <h3> at
 * display scale, so without this it balloons to heading size. Small, muted print. */
#testimonials .witness h3 {
    color: var(--text-caption);
    font-size: var(--type-caption-size);
    margin-top: 0.5em;
    font-weight: var(--font-weight-medium);
}
#testimonials .link, #testimonials .link p {
    color: var(--accent-primary);
    font-weight: var(--font-weight-medium);
}
/* The "Read more >>" toggle is a clickable <div>, not an <a>, so it gets no link
 * cursor by default — show the finger. */
#testimonials .link { cursor: pointer; }
/* Hover must recolour the child <p> too: the visible text lives there and
 * `#testimonials .link p` pins its colour, so a `.link:hover` alone (parent only) is
 * overridden and shows no change. Add an underline for a clear clickable affordance. */
#testimonials .link:hover, #testimonials .link:hover p {
    color: var(--accent-primary-hover);
    text-decoration: underline;
}
/* At >=860px the cards become equal-width columns in a row (SECTION FIXES sets the
 * row); keep a gap between them and drop the stacked-card bottom margin. */
@media screen and (min-width: 860px) {
    #testimonials .testimonial { flex: 1 1 0; margin-bottom: 0; }
    #testimonials .testimony { flex: 1 1 auto; }
    #testimonials .testimonial:not(:last-child) { margin-right: var(--space-lg); }
}

/* --- Success-story sample ------------------------------------------------- *
 * Each item is a flex row (learner illustration beside the copy), stacking on
 * narrow screens. Its card skin (bg/border/padding/gap) is in the
 * #success-story-sample block above and needs this flex context to work. */
#success-story-sample .success-story-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--space-lg);   /* separates stacked items */
}
@media screen and (min-width: 580px) {
    #success-story-sample .success-story-list-item {
        flex-direction: row;
        align-items: center;
    }
}


/* ============================================================================
 * LEGAL-PAGE TABLE  —  Terms of Service + Privacy Policy (.legal-copy table).
 *
 * Light cell styling ported from grokkoli_public_plus.css onto the Sunset tokens so the
 * table still reads once the legacy CSS is dropped. Scoped to .legal-copy, so although
 * this file is shared, these rules only ever touch the legal pages.
 * ========================================================================== */
.legal-copy table {
    border-collapse: collapse;
    font-size: var(--type-body-small-size);
}
.legal-copy table th {
    font-weight: var(--font-weight-semibold);
    background-color: var(--surface-sunken);   /* sand header row */
}
.legal-copy table td,
.legal-copy table th {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-warm);
    text-align: left;
    vertical-align: top;
}


/* ============================================================================
 * SUCCESS-STORY IMAGES  —  avatar + progress-graph float layout.
 *
 * Ported from grokkoli_public.css so the story images lay out without the legacy CSS: the
 * avatar floats left; the progress-graph (img.right) floats right on wider screens; each gets
 * a small inset. The frame's white fill is kept (invisible on the white .card, so it just
 * insets the image); the legacy drop-shadow is left OFF — per the earlier request to sit the
 * images flat on the card. (These classes only exist on the success-stories markup.)
 *
 * Cascade note: the `float: none` base for .right MUST precede the min-width media query, or
 * "float right on wide screens" (same specificity, so source order decides) never wins.
 * ========================================================================== */
/* Breathing room between the story cards (the legacy grokkoli_public `.success-story {
 * margin-top: 65px }`, now on the spacing scale). Applies to the first card too, spacing
 * it off the page heading. */
.success-story {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xl);
}
.success-story img {
    float: left;
    margin-bottom: 15px;
}
.success-stories img {
    padding: 20px 10px;
    border-radius: 15px;
    background-color: var(--surface-elevated);
    margin-right: 25px;
    box-shadow: none;
}
.success-story img.right {
    float: none;
    padding: 25px 40px 15px 25px;
}
@media screen and (min-width: 525px) {
    .success-story img.right {
        float: right;
        margin-top: 5px;
        margin-right: 5px;
        margin-left: 15px;
    }
}