/* ──────────────────────────────────────────────────────────────────────────
   local_edupages — styles the shop design system (shop.css / landing.css)
   does not provide. Loaded AFTER those files by the pages that need it, so
   it may rely on their ccq-landing vocabulary but must never redefine it.

   Currently: the FAQ accordion (faqs.php) — native <details>/<summary>, the
   marker replaced with a +/− indicator, no JavaScript — and the FREE Exam
   Help landing (examhelp.php): responsive Vimeo grid + claim band.
   ────────────────────────────────────────────────────────────────────────── */

.edu-faqs__list {
    max-width: 860px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
}

.edu-faqs__item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
}

.edu-faqs__item:first-of-type {
    border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.edu-faqs__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    list-style: none; /* Firefox marker */
}

.edu-faqs__question::-webkit-details-marker {
    display: none; /* Safari/Chrome marker */
}

.edu-faqs__question::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: #555;
}

.edu-faqs__item[open] > .edu-faqs__question::after {
    content: "\2212"; /* minus sign */
}

.edu-faqs__answer {
    padding: 0 0 1.25rem;
    color: #444;
}

.edu-faqs__answer p {
    margin: 0 0 0.75rem;
}

.edu-faqs__answer p:last-child {
    margin-bottom: 0;
}

.edu-faqs__cta {
    padding: 0.25rem 0 0.5rem;
}

.edu-faqs__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── FREE Exam Help landing (examhelp.php) — restyled 2026-08-31 (msg 488)
   to the plugin's newer .edu-home__* design language, same conventions as
   .edu-fyc__*/.edu-fl__*. The rendered moodleform's OWN markup (Bootstrap
   fitem/col-form-label rows) is untouched machinery from local_subscriptions
   — only its container chrome and button colour are restyled here. ────── */

.edu-examhelp__hero {
    padding: 3rem 0;
    /* Matches the GIF's own background (sampled from its still-frame PNG,
       averaged over background patches to filter out palette-dither noise)
       so the image doesn't show a visible frame against a pure-white
       section (msg 591). */
    background: #fafaf8;
}

/* Copy+form LEFT, animated illustration RIGHT (msg 588) - same flex
   hero-row/hero-copy/hero-illuswrap recipe as .edu-fyc__hero-row. Copy gets
   the larger share since it now holds the signup form, not just text.
   Mobile collapses to a single column: copy, then form, then image (DOM
   order already matches, no reordering needed). */
.edu-examhelp__hero-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-examhelp__hero-copy {
    flex: 1 1 55%;
}

.edu-examhelp__hero-illuswrap {
    flex: 1 1 45%;
}

.edu-examhelp__hero-body {
    font-size: 1.125rem;
    line-height: 1.7;
}

@media (max-width: 767.98px) {
    .edu-examhelp__hero-row {
        flex-direction: column;
        text-align: center;
    }

    /* Same convention as .edu-schools__hero-illuswrap/.edu-cc__hero-illuswrap
       - illustration dropped on mobile, copy+form only above the fold. */
    .edu-examhelp__hero-illuswrap {
        display: none;
    }

    .edu-examhelp__form {
        margin: 1.5rem auto 0;
    }
}

.edu-examhelp__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #555;
}

/* Form accordion (msg 760): collapsed by default (panel hidden), the
   toggle button reveals the existing form in place. No height animation -
   the form's own height varies too much (banner text, field validation) to
   pick a safe max-height cap, so this is a plain show/hide. */
.edu-examhelp__form-toggle {
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.edu-examhelp__form-panel {
    display: none;
}

.edu-examhelp__formwrap--open .edu-examhelp__form-panel {
    display: block;
}

/* The animation now lives in the hero's right column (msg 588), a NEW
   portrait-oriented GIF sized for a column rather than the old wide banner
   one. Explicit width/height attributes on both <img>s (set in the
   template) reserve the box before the file loads, so the page never
   jumps. Only one of the two images is ever visible - CSS below flips
   which one, rather than JS timing a swap after one play, so a slow
   connection can never show both/neither. */
.edu-examhelp__anim-gif,
.edu-examhelp__anim-still {
    display: block;
    width: 100%;
    height: auto;
}

.edu-examhelp__anim-still {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .edu-examhelp__anim-gif {
        display: none;
    }

    .edu-examhelp__anim-still {
        display: block;
    }
}

/* The signup card: white, subtle shadow, 4px teal top border — same card
   recipe as .edu-fl__facts-card, with a top-border accent (the established
   "teal top border" pattern, see .edu-fyc__free) instead of a full border. */
.edu-examhelp__form {
    /* Left-aligned under the copy on desktop now that it lives inside
       .edu-examhelp__hero-copy (msg 588) rather than its own full column -
       margin:0 auto would centre it oddly under left-aligned text. Centred
       again only on mobile, see the 767.98px media query. */
    max-width: 460px;
    margin: 1.5rem 0 0;
    padding: 1.75rem 1.5rem 1rem;
    background: #fff;
    border-radius: 14px;
    border-top: 4px solid #4bc0b1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.edu-examhelp__form .col-form-label,
.edu-examhelp__form label {
    font-weight: 600;
}

.edu-examhelp__form .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
    background: #ec008c;
    border-color: #ec008c;
}

.edu-examhelp__form .btn-primary:hover,
.edu-examhelp__form .btn-primary:focus {
    background: #c40074;
    border-color: #c40074;
}

/* Brief glow when a video card sends the visitor here (msg 553, item 3) -
   a box-shadow ring, not the border-top the card already owns, so nothing
   shifts layout when it plays. */
.edu-examhelp__form--pulse {
    animation: edu-examhelp-form-pulse 1s ease-out 1;
}

@keyframes edu-examhelp-form-pulse {
    0% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(75, 192, 177, 0.6);
    }
    100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 0 0 14px rgba(75, 192, 177, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-examhelp__form--pulse {
        animation: none;
    }
}

.edu-examhelp__claim-note {
    max-width: 460px;
    margin: 1rem auto 0;
    font-size: 0.85rem;
    color: rgba(38, 34, 98, 0.75);
}

/* Post-submit outcome banners. */
.edu-examhelp__banner {
    max-width: 460px;
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.edu-examhelp__banner--success {
    background: #e9f5e1;
    color: #3f6b1d;
    border: 1px solid #8dc63f;
}

.edu-examhelp__banner--error {
    background: #fdecea;
    color: #9a2418;
    border: 1px solid #e8a19a;
}

/* Honeypot: visually removed for humans (input class + its moodleform row). */
.edu-examhelp__hp,
#fitem_id_website {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.edu-examhelp__pack {
    padding: 3rem 0;
    background: #f5f5f5;
    text-align: center;
}

.edu-examhelp__pack-body {
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
    color: #333;
}

/* 6 small white video cards - honest now (msg 553, item 3): they don't
   play anything, clicking/tapping one scrolls to the signup form and
   pulses its border instead (examhelp.php's $videocardsjs). Bare navy
   play-icon per the house icon spec (docs/subprojects/d2c-launch/graphics/
   graphics-brief-shop-card-imagery.md "Icons": single line colour, no
   fill - already outline, not solid). 3/row desktop, 2/row mobile. */
.edu-examhelp__videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 780px;
    margin: 2rem auto 0;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-examhelp__videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Video flip-tiles (msg 760: replaces the plain video-card button; duration
   labels removed, front/back structure copied from howeduworks.php's own
   .edu-hew__flip recipe, see that file's CSS comment for the full
   rationale on backface-visibility/Safari/equal-height). Front = title +
   outline play icon (as before); back is plain white (not teal, per her
   explicit "back plain white" spec) with one shared sentence. */
.edu-examhelp__flip {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 140px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    perspective: 1200px;
}

.edu-examhelp__flip-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.edu-examhelp__flip:hover .edu-examhelp__flip-inner,
.edu-examhelp__flip.is-flipped .edu-examhelp__flip-inner {
    transform: rotateY(180deg);
}

.edu-examhelp__flip-front,
.edu-examhelp__flip-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: absolute;
    inset: 0;
    height: 100%;
    padding: 1.1rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.edu-examhelp__flip-back {
    transform: rotateY(180deg);
}

.edu-examhelp__play-icon {
    width: 28px;
    height: 28px;
}

.edu-examhelp__video-name {
    font-weight: 700;
    color: #262262;
    line-height: 1.35;
}

.edu-examhelp__flip-back-text {
    line-height: 1.5;
    color: #333;
}

@media (prefers-reduced-motion: reduce) {
    .edu-examhelp__flip-inner {
        transition: none;
    }

    .edu-examhelp__flip:hover .edu-examhelp__flip-inner,
    .edu-examhelp__flip.is-flipped .edu-examhelp__flip-inner {
        transform: none;
    }

    .edu-examhelp__flip-front,
    .edu-examhelp__flip-back {
        transition: opacity 0.3s ease;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }

    .edu-examhelp__flip-back {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }

    .edu-examhelp__flip:hover .edu-examhelp__flip-front,
    .edu-examhelp__flip.is-flipped .edu-examhelp__flip-front {
        opacity: 0;
    }

    .edu-examhelp__flip:hover .edu-examhelp__flip-back,
    .edu-examhelp__flip.is-flipped .edu-examhelp__flip-back {
        opacity: 1;
    }
}

.edu-examhelp__videos-caption {
    max-width: 640px;
    margin: 1.5rem auto 0;
    text-align: center;
    color: #555;
    font-size: 0.9rem;
}

/* "But wait!" offer block (msg 760, new, white). */
.edu-examhelp__offer {
    padding: 3rem 0;
    background: #fff;
    text-align: center;
}

.edu-examhelp__offer-body {
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
    color: #333;
}

.edu-examhelp__offer-price {
    max-width: 640px;
    margin: 1.25rem auto 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #262262;
}

/* Course contents (msg 760, new, light grey): text left, image right - same
   2-col recipe as the hero row. Lists are plain text on purpose (her brief:
   "must NOT look like buttons or tiles, no numbered badge graphics"). */
.edu-examhelp__contents {
    padding: 3rem 0;
    background: #f5f5f5;
}

.edu-examhelp__contents-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-examhelp__contents-copy {
    flex: 1 1 55%;
}

.edu-examhelp__contents-imgwrap {
    flex: 1 1 45%;
}

.edu-examhelp__contents-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.edu-examhelp__contents-subheading {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #262262;
}

.edu-examhelp__contents-list {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    line-height: 1.8;
    color: #333;
}

.edu-examhelp__contents-highlights-heading {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: #262262;
}

@media (max-width: 767.98px) {
    .edu-examhelp__contents-row {
        flex-direction: column;
        text-align: center;
    }

    .edu-examhelp__contents-list {
        text-align: left;
    }
}

/* Testimonials carousel (msg 760/761): the slide mechanics (position,
   opacity, .is-active) are the theme's own .edu-home__carousel-slide CSS,
   loaded sitewide - only the content styling (avatar + centred quote) is
   this page's own. */
.edu-examhelp__proof {
    padding: 3rem 0;
    background: #fff;
}

.edu-examhelp__testimonials-intro {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
    font-weight: 600;
    color: #262262;
    line-height: 1.6;
}

body.notloggedin .edu-examhelp .edu-examhelp__testimonial,
body.eduweb .edu-examhelp .edu-examhelp__testimonial {
    max-width: 560px;
    margin: 0 auto;
}

.edu-examhelp__testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.edu-examhelp__testimonial-avatar {
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 999px;
    object-fit: cover;
}

.edu-examhelp__testimonial .edu-home__quote-cite {
    font-weight: 700;
}

/* Closing band 2 (msg 760, new, light grey): illustration left, text right. */
.edu-examhelp__close2 {
    padding: 3rem 0;
    background: #f5f5f5;
}

.edu-examhelp__close2-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-examhelp__close2-imgwrap {
    flex: 1 1 45%;
}

.edu-examhelp__close2-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-examhelp__close2-copy {
    flex: 1 1 55%;
}

.edu-examhelp__close2-bold {
    font-weight: 700;
    color: #262262;
}

@media (max-width: 767.98px) {
    .edu-examhelp__close2-row {
        flex-direction: column-reverse;
        text-align: center;
    }
}

/* ── For Your Child (foryourchild.php) ──────────────────────────────────
   Reuses .edu-home__* (theme_edutheme _marketing.scss, scoped to any
   body.notloggedin page) for fonts/colours/buttons/spacing so this page
   matches the homepage exactly. Only genuinely new layout lives here.
   Section backgrounds alternate down the page (punch list item 1,
   2026-08-26): white / tint / white / tint / white / teal / navy - no two
   adjacent sections share a background. Card accent palette drawn from the
   theme's own brand variables: pink #ec008c ($brand-accent), teal #4bc0b1
   ($brand-teal), green #8dc63f ($brand-success), navy #262262
   ($brand-primary). Purple is #662d91 ($brand-purple) — navy and purple are
   distinct official CI colours, not interchangeable (fixed 2026-08-26; #262262
   was previously mislabelled "purple" in this file and in the theme's own
   _marketing.scss, which rendered navy borders where purple was intended). */

.edu-fyc {
    text-align: center;
}

.edu-fyc__hero,
.edu-fyc__stages,
.edu-fyc__proof {
    padding: 3rem 0;
    background: #fff;
}

/* "Not sure where to start?" band on THIS page only (2026-09-14, msg 830) -
   the homepage's own copy of this band stays white; grey inherited from the
   "What it costs" section this one replaced as the page's pricing surface.
   Extra specificity (.edu-fyc ancestor + both classes on the element) so it
   reliably wins over the shared .edu-home__pricing{background:#fff} rule
   regardless of stylesheet load order. */
.edu-fyc .edu-home__pricing.edu-fyc__pricing {
    background: #f5f5f5;
}

/* Sound familiar: solid teal band (was light grey) — the 4 quote chips stay
   white cards untouched; only the section's own heading/body/emphasis text
   goes white to read on the teal. */
.edu-fyc__sound {
    padding: 3rem 0;
    background: #4bc0b1;
}

.edu-fyc__sound .edu-home__heading,
.edu-fyc__sound .edu-fyc__sound-body,
.edu-fyc__sound .edu-fyc__emphasis {
    color: #fff;
}

/* Hero: copy left, illustration right on desktop (2026-08-26). The mountain's
   summit/flag sit toward the right of the source image, so on mobile the crop
   is biased right (object-position) to keep the flag visible even if the
   parent figure on the left gets partially cropped out. */
.edu-fyc__hero-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-fyc__hero-copy {
    flex: 1 1 45%;
}

.edu-fyc__hero-imagewrap {
    flex: 1 1 55%;
}

.edu-fyc__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-fyc__hero-heading {
    margin-bottom: 1rem;
}

.edu-fyc__hero-body {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* justify-content:flex-start alone loses to the theme's own
   .edu-home__btn-row{justify-content:center} (equal specificity, theme
   rule compiles later) - sidestep the fight entirely with flex-direction:
   column + align-items (a property the theme never sets, so nothing to
   lose to) rather than chasing specificity, msg 547/548. */
.edu-fyc__hero-btnrow {
    flex-direction: column;
    align-items: flex-start;
}

/* Gap fix (2026-09-21, msg 936: 2nd button added above the green one) -
   same fix/reasoning as .edu-fl__hero-btnrow and .edu-schools__hero-btnrow
   elsewhere in this file: stacked in a column, this row still inherited
   the theme's own body.notloggedin .edu-home__btn-row { gap: 4rem },
   leaving a 64px gap between the two buttons. Needs the same
   body.notloggedin prefix + ancestor-scope specificity (0,0,3,1) to beat
   it - a bare .edu-fyc__hero-btnrow rule loses the same way. */
body.notloggedin .edu-fyc__hero-row .edu-fyc__hero-btnrow,
body.eduweb .edu-fyc__hero-row .edu-fyc__hero-btnrow {
    gap: 0.75rem;
}

/* Both hero buttons same size + centred text (2026-09-22, msg 1059/1069) -
   same shared-width recipe already used for .edu-schools__hero-btnrow /
   .edu-fl__hero-btnrow elsewhere in this file, but 340px here (not the
   usual 320px) - this page's own pink label "Get Career Compass assessment"
   measures ~325px on one line (confirmed live via a hidden nowrap clone),
   so 320px wrapped it to 2 lines while the green button stayed 1 line. */
.edu-fyc__hero-btnrow .edu-home__btn {
    width: 340px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .edu-fyc__hero-row {
        flex-direction: column;
        text-align: center;
    }

    .edu-fyc__hero-btnrow {
        align-items: center;
    }

    .edu-fyc__hero-btnrow .edu-home__btn {
        width: 100%;
        max-width: 340px;
    }

    .edu-fyc__hero-imagewrap {
        width: 100%;
        height: 220px;
        overflow: hidden;
        border-radius: 12px;
    }

    .edu-fyc__hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }
}

/* Sound familiar: 4 quote cards, pink left border + shadow, 2-up desktop. */
.edu-fyc__chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 760px;
    margin: 0 auto 1.5rem;
}

@media (max-width: 767.98px) {
    .edu-fyc__chips {
        grid-template-columns: 1fr;
    }
}

.edu-fyc__chip {
    max-width: none;
    flex: none;
    text-align: left;
    border-left-color: #ec008c;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.edu-fyc__chip .edu-home__quote-text {
    margin: 0;
}

.edu-fyc__sound-body {
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto 1rem;
}

.edu-fyc__emphasis {
    font-size: 1.25rem;
    font-weight: 600;
    color: #262262;
    max-width: 760px;
    margin: 1rem auto 0;
    line-height: 1.5;
}

.edu-fyc__center {
    text-align: center;
}

/* Right for every stage: 3 cards, coloured top border green/teal/purple. */
.edu-fyc__stages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    text-align: left;
}

@media (max-width: 991.98px) {
    .edu-fyc__stages-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

.edu-fyc__stage-card {
    background: #262262;
    border-radius: 14px;
    border: 1px solid #262262;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.edu-fyc__stage-icon-wrap {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.75rem;
}

.edu-fyc__stage-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Third stage icon (figure with flag) reads too small at the standard scale
   inside its badge — the figure itself doesn't fill the frame the way the
   signpost/compass do. Enlarge just the icon content; the navy circle
   (the wrap, overflow:hidden) stays the same size as the other two. */
.edu-fyc__stage-card:nth-child(3) .edu-fyc__stage-icon {
    transform: scale(2);
}

.edu-fyc__stage-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
    text-align: center;
}

.edu-fyc__stage-body {
    margin: 0;
    line-height: 1.6;
    color: #fff;
}

.edu-fyc__stages-line {
    text-align: center;
    font-weight: 600;
    color: #262262;
    max-width: 700px;
    margin: 0 auto;
}

/* .edu-fyc__cost-card* and .edu-fyc__guarantee retired 2026-09-14 (Lettie,
   msg 830) - the "What it costs" section they styled was removed outright,
   not left as dead copy; these classes aren't reused elsewhere (checked -
   careercompass.php's visually similar price card uses its own .edu-cc__*
   classes, not these). */

/* Testimonials: 2 cards side by side, large teal quote-mark accent. */
.edu-fyc__proof .edu-home__quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 1.5rem auto 0;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-fyc__proof .edu-home__quotes {
        grid-template-columns: 1fr;
    }
}

.edu-fyc__proof .edu-home__quote {
    max-width: none;
    flex: none;
    position: relative;
    padding-top: 2.5rem;
}

.edu-fyc__proof .edu-home__quote::before {
    content: "\201C";
    position: absolute;
    top: 0.25rem;
    left: 1rem;
    font-size: 3rem;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: #4bc0b1;
    font-style: normal;
}

.edu-fyc__proof .edu-home__quote-cite {
    font-weight: 700;
}

.edu-fyc__proof-line {
    margin-top: 1.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: #262262;
}

/* Free pack: light tint band with a teal top border, navy text (2026-08-26 —
   was solid teal; the shared packform below is unaffected). */
.edu-fyc__free {
    padding: 3rem 0;
    background: #f5f5f5;
    border-top: 4px solid #4bc0b1;
    color: #262262;
}

.edu-fyc__free-heading {
    color: #262262 !important;
}

.edu-fyc__free-body {
    color: #262262;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.edu-fyc__free-smallprint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(38, 34, 98, 0.75);
}

/* The shared packform partial's outcome banners default to white text (built
   for the homepage's teal free-pack band) — illegible on this section's now
   light-grey background, so darken them here without touching the shared
   base rules the homepage instance still relies on. */
.edu-fyc__free .edu-packform__banner--success {
    color: #2f6b0f;
}

.edu-fyc__free .edu-packform__banner--error {
    color: #9a2418;
}

/* Closing: solid navy, white text, pink CTA. Grade badges removed
   2026-09-07 (universal-courses update) - .edu-fyc__grades/-grade-btn
   retired with them, no other page uses these classes.
   body.notloggedin prefix required on the CTA colour below: the theme's
   own base .edu-home__btn rule compiles to body.notloggedin .edu-home__btn
   (0,0,2,1 - the body element tips it over a plain 2-class selector),
   same specificity issue hit repeatedly on this page family (For Schools
   button gap, kicker pills). Without it this CTA silently rendered green,
   not pink, caught only now that Lettie asked for it by name. */
.edu-fyc__close {
    padding: 3rem 0;
    background: #262262;
    color: #fff;
}

.edu-fyc__close .edu-home__heading,
.edu-fyc__close p {
    color: #fff !important;
}

body.notloggedin .edu-fyc__close .edu-home__btn,
body.eduweb .edu-fyc__close .edu-home__btn {
    background: #ec008c;
}

body.notloggedin .edu-fyc__close .edu-home__btn:hover,
body.eduweb .edu-fyc__close .edu-home__btn:hover,
body.notloggedin .edu-fyc__close .edu-home__btn:focus,
body.eduweb .edu-fyc__close .edu-home__btn:focus {
    background: #c2016f;
}

.edu-fyc__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── For Schools (schools.php) — rebuilt 2026-08-31 ─────────────────────
   Reuses .edu-home__* (theme_edutheme _marketing.scss) for fonts/colours/
   buttons/spacing, same pattern as For Your Child above. Section backgrounds
   alternate white / tint / white / tint / white / tint / teal / navy down the
   page (hero / sound-familiar / gains / grade9 / use-it-your-way /
   testimonials / exampack / close) so no two adjacent sections share a
   background — exampack and close reuse the theme's own
   .edu-home__freepack / .edu-home__close bands as-is. Card accent palette:
   pink #ec008c ($brand-accent), teal #4bc0b1 ($brand-teal), green #8dc63f
   ($brand-success), navy #262262 ($brand-primary), purple #662d91
   ($brand-purple) — same official CI values as the FYC block above. */

.edu-schools {
    text-align: center;
}

.edu-schools__hero,
.edu-schools__gains,
.edu-schools__useway {
    padding: 3rem 0;
    background: #fff;
}

.edu-schools__grade9,
.edu-schools__testimonials {
    padding: 3rem 0;
    background: #f5f5f5;
}

/* Sound familiar?: solid teal, matching FYC's identical section exactly
   (.edu-fyc__sound above) — the 3 quote chips stay white cards untouched,
   only the section's own heading/body/emphasis text goes white to read on
   the teal. Requested by Lettie (msg 398) to bring Schools' background
   rhythm in line with FYC's. */
.edu-schools__sound {
    padding: 3rem 0;
    background: #4bc0b1;
}

/* Heading text navy, not white (2026-09-22, msg 1072 - reverses the white
   colour this same rule set below msg 398). body.notloggedin prefix still
   needed: the theme's own heading colour rule compiles to body.notloggedin
   .edu-home__heading (specificity 0,2,1) — a bare single-class override
   here (0,2,0) would lose to it, same issue already hit and fixed on the
   quote-card border colours. */
body.notloggedin .edu-schools__sound .edu-home__heading,
body.eduweb .edu-schools__sound .edu-home__heading {
    color: #262262;
}

.edu-schools__sound .edu-schools__emphasis {
    color: #fff;
}

/* Hero: copy left, illustration space reserved right on desktop — no image
   yet, it is briefed separately, so the wrap stays empty and is hidden on
   mobile rather than leaving a blank stacked block. */
.edu-schools__hero-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-schools__hero-copy {
    flex: 1 1 50%;
}

.edu-schools__hero-illuswrap {
    flex: 1 1 50%;
}

.edu-schools__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-schools__hero-heading {
    margin-bottom: 1rem;
}

.edu-schools__hero-body {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* justify-content:flex-start alone loses to the theme's own
   .edu-home__btn-row{justify-content:center} (equal specificity, theme
   rule compiles later) AND the row wraps (theme's flex-wrap:wrap, two
   buttons don't fit this half-width column) so justify-content:center
   was centering each wrapped line too - sidestep both with an explicit
   column layout + a shared fixed width, same recipe as forlearners.php's
   identical 2-button hero fix (.edu-fl__hero-btnrow, msg 477), msg 547/548. */
.edu-schools__hero-btnrow {
    flex-direction: column;
    align-items: flex-start;
}

/* gap is the one property the theme's own .edu-home__btn-row already sets,
   as `body.notloggedin .edu-home__btn-row { gap: 4rem }` - the same
   body.notloggedin specificity prefix this page family always needs
   against the theme's own rules (see the kicker-pill fix elsewhere in this
   file). A bare .edu-schools__hero-row ancestor scope (0,0,2,0) still lost
   to the theme's (0,0,2,1) - confirmed live via computed style showing
   64px despite this file being correct on disk. Adding the same prefix
   plus the ancestor scope (0,0,3,1) clears it. */
body.notloggedin .edu-schools__hero-row .edu-schools__hero-btnrow,
body.eduweb .edu-schools__hero-row .edu-schools__hero-btnrow {
    gap: 0.75rem;
}

.edu-schools__hero-btnrow .edu-home__btn {
    width: 320px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .edu-schools__hero-row {
        flex-direction: column;
        text-align: center;
    }

    .edu-schools__hero-btnrow {
        align-items: center;
    }

    .edu-schools__hero-btnrow .edu-home__btn {
        width: 100%;
        max-width: 320px;
    }

    .edu-schools__hero-illuswrap {
        display: none;
    }
}

.edu-schools__center {
    text-align: center;
}

/* Closing band "Book a Demo" + "Let's start a conversation" (2026-09-21, msg
   871) - stack Book a Demo above the WhatsApp CTA, same column+gap recipe as
   .edu-schools__hero-btnrow above, same body.notloggedin prefix needed to
   beat the theme's own body.notloggedin .edu-home__btn-row{gap:4rem} rule. */
body.notloggedin .edu-home__close .edu-schools__close-btnrow,
body.eduweb .edu-home__close .edu-schools__close-btnrow {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.edu-schools__close-btnrow .edu-home__btn {
    width: 320px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .edu-schools__close-btnrow .edu-home__btn {
        width: 100%;
        max-width: 320px;
    }
}

/* "Let's start a conversation" forced green inside the closing band
   (2026-09-21, msg 937) - this band's own theme rule makes every plain
   .edu-home__btn pink by default (.edu-home__close .edu-home__btn), so a
   same-specificity override is needed to win; body.notloggedin bumps it
   ahead regardless of stylesheet load order, same pattern used throughout
   this file. #8dc63f/#7ab62f are the theme's own green/darker-green
   (this plain CSS file has no SCSS variables to reference). */
body.notloggedin .edu-home__close .edu-schools__close-cta--green,
body.eduweb .edu-home__close .edu-schools__close-cta--green {
    background: #8dc63f;
}

body.notloggedin .edu-home__close .edu-schools__close-cta--green:hover,
body.eduweb .edu-home__close .edu-schools__close-cta--green:hover,
body.notloggedin .edu-home__close .edu-schools__close-cta--green:focus,
body.eduweb .edu-home__close .edu-schools__close-cta--green:focus {
    background: #7ab62f;
}

/* Sound familiar: 3 quote cards, pink left border + shadow — matches the
   FYC page's own quote-chip treatment above (.edu-fyc__chip). */
.edu-schools__chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 980px;
    margin: 0 auto 1.5rem;
}

@media (max-width: 767.98px) {
    .edu-schools__chips {
        grid-template-columns: 1fr;
    }
}

.edu-schools__chip {
    max-width: none;
    flex: none;
    text-align: left;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Specificity match: the theme's own body.notloggedin .edu-home__quote rule
   (theme_edutheme _marketing.scss) sets the same border-left-color property
   at (0,2,1) — a bare .edu-schools__chip class alone can't outrank it. */
body.notloggedin .edu-schools__chip,
body.eduweb .edu-schools__chip {
    border-left-color: #ec008c;
}

.edu-schools__chip .edu-home__quote-text {
    margin: 0;
}

.edu-schools__sound-body {
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto 1rem;
}

.edu-schools__emphasis {
    font-size: 1.25rem;
    font-weight: 600;
    color: #262262;
    max-width: 760px;
    margin: 1rem auto 0;
    line-height: 1.5;
}

/* What your school gains: 3 navy cards, matching FYC's .edu-fyc__stage-card
   block (same navy #262262, radius, padding) per Lettie's reference
   screenshot, msg 400. Icons are bare (no circle badge) per msg 405 — the
   PNGs are pre-filled with the same navy so they sit flush on the card;
   mix-blend-mode: lighten is belt-and-braces in case the generated fill
   isn't a pixel-perfect match, so no seam is visible either way. */
.edu-schools__gains-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: left;
}

@media (max-width: 991.98px) {
    .edu-schools__gains-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

.edu-schools__gain-card {
    background: #262262;
    border-radius: 14px;
    border: 1px solid #262262;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    isolation: isolate;
}

.edu-schools__gain-icon {
    display: block;
    width: 53px;
    height: 53px;
    margin: 0 auto 0.75rem;
    mix-blend-mode: lighten;
}

.edu-schools__gain-title {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.edu-schools__gain-body {
    margin: 0;
    line-height: 1.6;
    color: #fff;
}

.edu-schools__grade9-body {
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto;
}

/* Use it your way: 3 cards, white bg + coloured top border + small icon —
   Lettie's reference screenshot (msg 402), same treatment the gain-cards
   used before they moved to solid navy. */
.edu-schools__useway-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-schools__useway-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

.edu-schools__useway-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 4px solid transparent;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.edu-schools__useway-card:nth-child(1) {
    border-top-color: #8dc63f;
}

.edu-schools__useway-card:nth-child(2) {
    border-top-color: #4bc0b1;
}

.edu-schools__useway-card:nth-child(3) {
    border-top-color: #662d91;
}

.edu-schools__useway-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
}

.edu-schools__useway-title {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #262262;
    margin: 0 0 0.75rem;
}

.edu-schools__useway-body {
    margin: 0;
    line-height: 1.6;
}

.edu-schools__useway-line {
    font-weight: 600;
    color: #262262;
    margin-top: 0.5rem;
}

/* Testimonials accordion CSS retired (2026-09-21, msg 923) - the section
   is now the same .edu-home__carousel-* component the home page uses
   (theme-owned, body.notloggedin-scoped, already reaches this page - no
   replacement CSS needed here). */

.edu-schools__testimonials-line {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #262262;
}

/* Exam pack banner: "standard light version" of a solid-colour band, per the
   site-wide rule (2026-08-31) — was solid teal, converted because it sat
   directly against the navy closing band with nothing between them. Heading
   stays navy (.edu-home__heading default) and body text stays the normal
   dark colour — this section deliberately does NOT reuse .edu-home__freepack,
   which forces white text for its solid-teal homepage instance. */
.edu-schools__exampack {
    padding: 3rem 0;
    background: #fff;
    border-top: 4px solid #4bc0b1;
}

/* Closing: mailto link under the primary button — plain white text, unlike
   the pink .edu-home__btn the section already turns buttons into. */
.edu-schools__close-email {
    margin-top: 0.75rem;
}

.edu-schools__close-emaillink {
    color: #fff;
    text-decoration: underline;
}

.edu-schools__close-emaillink:hover,
.edu-schools__close-emaillink:focus {
    color: #fff;
    text-decoration: none;
}

.edu-schools__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── Shared simple pack-capture form (For Your Child + homepage) ────────
   One field ("WhatsApp number or email") + one button + an optional POPIA
   consent checkbox. Posts to local/edupages/packrequest.php. Designed to
   sit on a coloured banner (teal/navy) — text colour inherits from the
   parent section so it reads correctly wherever it's embedded. */
.edu-packform {
    max-width: 480px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.edu-packform__banner {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.edu-packform__banner--success {
    background: rgba(141, 198, 63, 0.15);
    color: #fff;
    border: 1px solid #8dc63f;
}

.edu-packform__banner--error {
    background: rgba(154, 36, 24, 0.15);
    color: #fff;
    border: 1px solid #e8a19a;
}

.edu-packform__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.edu-packform__row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.edu-packform__input {
    flex: 1 1 220px;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    color: #333;
}

.edu-packform__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
}

.edu-packform__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: inherit;
}

.edu-packform__consent input {
    margin-top: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Career Compass landing page (careercompass.php, 2026-08-31, Lettie's
   8-section brief). Colour rhythm: white hero, solid teal band (Section
   2), white, white (navy cards — not a full-width solid band), white
   (pink price card), light grey tint (testimonial), white (FAQ), solid
   navy close (Section 8, reuses the theme's .edu-home__close directly).
   Only 2 solid full-width bands on the page, never adjacent.
   ══════════════════════════════════════════════════════════════════════ */

.edu-cc {
    text-align: center;
}

.edu-cc__center {
    text-align: center;
}

/* SECTION 1 - Hero: copy left, illustration space reserved right on
   desktop (no image yet — briefed separately). */
.edu-cc__hero {
    /* Bottom padding tightened (msg 585) - combined with .edu-cc__benefits'
       own top padding this left a large white gap between the guarantee
       line and the teal band below. */
    padding: 3rem 0 1.25rem;
    background: #fff;
}

.edu-cc__hero-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-cc__hero-copy {
    flex: 1 1 50%;
}

.edu-cc__hero-illuswrap {
    flex: 1 1 50%;
}

.edu-cc__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-cc__hero-heading {
    margin-bottom: 1rem;
}

.edu-cc__hero-body {
    font-size: 1.125rem;
    line-height: 1.7;
}

.edu-cc__hero-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #262262;
    margin: 1rem 0 0;
}

.edu-cc__hero-btnrow {
    justify-content: flex-start;
}

.edu-cc__hero-guarantee {
    font-size: 0.875rem;
    color: #7a7a7a;
    margin-top: 0.6rem;
}

@media (max-width: 767.98px) {
    .edu-cc__hero-row {
        flex-direction: column;
        text-align: center;
    }

    .edu-cc__hero-btnrow {
        justify-content: center;
    }

    .edu-cc__hero-illuswrap {
        display: none;
    }
}

/* SECTION 2 - Five benefits: solid teal band, matching FYC/Schools'
   "Sound familiar?" bands exactly, with a single white rounded card
   holding the 5 lines instead of quote chips. */
.edu-cc__benefits {
    /* Top padding tightened to match .edu-cc__hero's reduced bottom padding
       (msg 585) - the gap above the teal band was too large. */
    padding: 1.5rem 0 3rem;
    background: #4bc0b1;
}

body.notloggedin .edu-cc__benefits .edu-home__heading,
body.eduweb .edu-cc__benefits .edu-home__heading {
    color: #fff;
}

.edu-cc__benefits-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-top: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    text-align: left;
}

/* Plain block paragraph, NOT flex — flex would turn "Choose ", <strong>...
   </strong> and " with confidence" into 3 separate flex items, each
   wrapping its own text independently instead of flowing as one sentence
   (hit and fixed 2026-08-31: mobile showed the bold phrase stacking one
   word per line in its own narrow column). The arrow is a ::before so it
   never becomes a flex/layout participant at all. */
.edu-cc__benefit-item {
    position: relative;
    margin: 0;
    padding: 0.6rem 0 0.6rem 1.75rem;
    line-height: 1.6;
    color: #333;
}

.edu-cc__benefit-item::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: 0.6rem;
    color: #ec008c;
    font-weight: 700;
}

.edu-cc__benefit-item strong {
    color: #262262;
}

/* SECTION 3 - How it works: 3 white bordered cards with hand-drawn green
   arrows between them (right on desktop, rotated to point down when the
   cards stack on mobile) - replaces the old numbered badges (msg 526,
   numbered badges are reserved for the 3 EDU pillar steps elsewhere).
   Green matches her own reference sheet's colour choice for an
   assessment page (msg 535); shape is a thick tapered "hook" stroke +
   solid triangular head, traced from the shape she pointed to on that
   sheet rather than the thin open-chevron first attempt. */
.edu-cc__how {
    padding: 3rem 0;
    background: #fff;
}

.edu-cc__steps-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0 1.25rem;
    margin-top: 2rem;
    text-align: left;
}

.edu-cc__step {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    height: 100%;
}

.edu-cc__step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    flex-shrink: 0;
}

.edu-cc__step-arrow img {
    display: block;
    width: 64px;
    height: auto;
}

.edu-cc__step-text {
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 767.98px) {
    .edu-cc__steps-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        gap: 0.5rem 0;
    }

    .edu-cc__step-arrow {
        width: auto;
        margin: 0.25rem 0;
    }

    .edu-cc__step-arrow img {
        transform: rotate(90deg);
    }
}

/* SECTION 4 - What's inside the report: 4 navy cards, 2x2 on desktop —
   same recipe as .edu-fyc__stage-card / .edu-schools__gain-card. */
.edu-cc__report {
    padding: 3rem 0;
    background: #fff;
}

.edu-cc__report-intro {
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
    color: #333;
}

.edu-cc__report-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 860px;
    margin: 2rem auto;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-cc__report-grid {
        grid-template-columns: 1fr;
    }
}

.edu-cc__report-card {
    background: #262262;
    border-radius: 14px;
    padding: 1.5rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.edu-cc__report-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
}

.edu-cc__report-body {
    margin: 0;
    line-height: 1.6;
    color: #fff;
}

/* Sample-report thumbnails + lightbox (msg 545). Thumbnails read as tilted
   "paper" pages - white card, thin border, drop shadow, alternating rotate
   so they don't look like a strict grid. The lightbox is a fixed-position
   overlay toggled via the native `hidden` attribute from JS. */
.edu-cc__sample-thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 240px));
    justify-content: center;
    gap: 2.5rem;
    max-width: 700px;
    margin: 0.5rem auto 2rem;
    padding: 0 1rem;
}

@media (max-width: 767.98px) {
    .edu-cc__sample-thumbs {
        grid-template-columns: minmax(160px, 240px);
        justify-items: center;
        gap: 2rem;
    }
}

.edu-cc__sample-thumb {
    display: block;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.edu-cc__sample-thumb:nth-child(1) {
    transform: rotate(-3deg);
}

.edu-cc__sample-thumb:nth-child(2) {
    transform: rotate(3deg);
}

.edu-cc__sample-thumb:hover,
.edu-cc__sample-thumb:focus {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}

.edu-cc__sample-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.edu-cc__sample-cta {
    cursor: pointer;
}

.edu-cc__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edu-cc__lightbox[hidden] {
    display: none;
}

.edu-cc__lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.88);
    border: 0;
    padding: 0;
}

.edu-cc__lightbox-dialog {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.edu-cc__lightbox-image {
    max-width: min(90vw, 720px);
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    background: #fff;
}

.edu-cc__lightbox-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.edu-cc__lightbox-prev,
.edu-cc__lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #fff;
    font-size: 1.75rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edu-cc__lightbox-prev {
    left: 1.5rem;
}

.edu-cc__lightbox-next {
    right: 1.5rem;
}

.edu-cc__lightbox-prev:hover,
.edu-cc__lightbox-next:hover,
.edu-cc__lightbox-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.edu-cc__lightbox-download {
    color: #fff;
    text-decoration: underline;
    font-size: 0.9rem;
}

.edu-cc__lightbox-download:hover {
    color: #fff;
}

@media (max-width: 767.98px) {
    .edu-cc__lightbox-prev,
    .edu-cc__lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }

    .edu-cc__lightbox-prev {
        left: 0.5rem;
    }

    .edu-cc__lightbox-next {
        right: 0.5rem;
    }
}

/* SECTION 5 - Price: highlighted card matching .edu-fyc__cost-card. */
.edu-cc__price {
    padding: 3rem 0;
    background: #fff;
}

.edu-cc__cost-card {
    display: block;
    max-width: 480px;
    margin: 1.5rem auto;
    padding: 1.75rem 1.5rem;
    background: #fff;
    text-align: center;
    border: 1px solid #ec008c;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.edu-cc__cost-card-prefix {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #262262;
    margin-bottom: 0.35rem;
}

.edu-cc__cost-card-price {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ec008c;
    line-height: 1.1;
    margin-bottom: 0.6rem;
}

.edu-cc__cost-card-price s {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #7a7a7a;
    margin-right: 0.5rem;
}

.edu-cc__cost-card-body {
    margin: 0 0 1.25rem;
    line-height: 1.6;
    color: #333;
}

.edu-cc__price-below {
    max-width: 640px;
    margin: 1.5rem auto 0;
    line-height: 1.6;
    color: #333;
}

/* SECTION 6 - Testimonial: light grey tint, one centred quote card with
   the same large teal quotation mark as FYC's proof section. */
.edu-cc__proof {
    padding: 3rem 0;
    background: #f5f5f5;
}

/* body.notloggedin .edu-cc prefix: the theme's own .edu-home__quote margin
   rule compiles to body.notloggedin .edu-home .edu-home__quote (specificity
   0,3,1) — a bare single-class override here would lose to it, same
   specificity issue hit repeatedly elsewhere on this page family. */
body.notloggedin .edu-cc .edu-cc__proof-quote,
body.eduweb .edu-cc .edu-cc__proof-quote {
    max-width: 640px;
    margin: 2rem auto 0;
    position: relative;
    padding-top: 2.5rem;
    text-align: left;
}

.edu-cc__proof-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.25rem;
    left: 1rem;
    font-size: 3rem;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: #4bc0b1;
    font-style: normal;
}

.edu-cc__proof-quote .edu-home__quote-cite {
    font-weight: 700;
}

.edu-cc__proof-line {
    max-width: 640px;
    margin: 1.5rem auto 0;
    font-weight: 600;
    color: #262262;
}

/* SECTION 6.5 - Platform strip (msg 452): compact, white, sits between the
   testimonial and the FAQ. Deliberately NOT .edu-home__heading (that's the
   2.25rem full-section size) — this strip is much shorter than a normal
   section, so its own smaller heading class. Chip colours are the exact
   pillar hexes from the theme's $brand-success/$brand-teal/$brand-purple
   (_variables.scss) — this plain CSS file has no access to those SCSS
   variables, so they're repeated here literally. */
.edu-cc__platform {
    padding: 2rem 0;
    background: #fff;
    text-align: center;
}

.edu-cc__platform-heading {
    max-width: 640px;
    margin: 0 auto 0.5rem;
    color: #262262;
    font-size: 1.25rem;
    font-weight: 400;
}

.edu-cc__platform-heading strong {
    font-weight: 700;
}

.edu-cc__platform-body {
    max-width: 560px;
    margin: 0 auto 1.25rem;
    color: #333;
    line-height: 1.6;
}

.edu-cc__platform-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.edu-cc__platform-chip {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.edu-cc__platform-chip--purpose {
    background: #8dc63f;
}

.edu-cc__platform-chip--path {
    background: #4bc0b1;
}

.edu-cc__platform-chip--prepare {
    background: #662d91;
}

.edu-cc__platform-link a {
    color: #662d91;
    font-weight: 600;
    text-decoration: underline;
}

/* SECTION 7 - FAQ accordion: button-driven (not details/summary) so only
   one panel is open at a time, per the brief. First item starts open via
   the .edu-cc__faq-item--open class rendered server-side. */
.edu-cc__faq {
    padding: 3rem 0;
    background: #fff;
}

.edu-cc__faq-list {
    max-width: 720px;
    margin: 2rem auto 0;
    text-align: left;
}

.edu-cc__faq-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.edu-cc__faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: #262262;
    cursor: pointer;
}

.edu-cc__faq-icon {
    flex: 0 0 auto;
    position: relative;
    width: 20px;
    height: 20px;
}

.edu-cc__faq-icon::before,
.edu-cc__faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #8dc63f;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-in-out;
}

.edu-cc__faq-icon::before {
    width: 14px;
    height: 3px;
}

.edu-cc__faq-icon::after {
    width: 3px;
    height: 14px;
}

.edu-cc__faq-item--open .edu-cc__faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.edu-cc__faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;
}

.edu-cc__faq-answer p {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: #333;
}

.edu-cc__faq-item--open .edu-cc__faq-answer {
    max-height: 400px;
    padding: 0 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   How EDU Works page (howeduworks.php, 2026-08-31, Lettie's 7-section
   brief). Colour rhythm: white hero + mountain, light grey tint (Step 1),
   white (Step 2), solid teal band (Step 3, Section 5), white (FAQ), solid
   navy close (Section 7, reuses theme's .edu-home__close). Only 2 solid
   full-width bands, never adjacent.
   ══════════════════════════════════════════════════════════════════════ */

.edu-hew {
    text-align: center;
}

.edu-hew__hero {
    padding: 3rem 0;
    background: #fff;
}

.edu-hew__hero-body {
    max-width: 700px;
    margin: 0.75rem auto 0;
    font-size: 1.125rem;
    line-height: 1.7;
}

/* SECTION 2 - Mountain: image slot reserves height so the page doesn't
   jump once Lettie's image is placed, same pattern schools.php used
   before its hero image was approved. */
.edu-hew__mountain {
    padding: 3rem 0;
    background: #fff;
}

.edu-hew__mountain-wrap {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
}

.edu-hew__mountain-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-hew__mountain-placeholder {
    min-height: 360px;
}

/* Lettie's 1/2/3 badges (msg 440/450), positioned to match her own
   reference mockup exactly (msg 466, EDU_mountainImage_website_
   AboutEDUpage.pdf - she drew the mountain + badges combined in one
   canvas). That mockup's canvas is ~1.345:1, matching this mountain SVG's
   own viewBox (841.89 x 623.66, ~1.349:1) almost exactly, so the mockup's
   badge positions were read directly as fractions of ITS canvas and
   applied as left/top % here - not derived from the SVG's 6 circle
   markers (an earlier version tried that, see history) and not confined
   to a flanking-column layout (a second earlier version tried that per
   msg 459's text description alone, before this mockup existed - this
   supersedes both). 1 top-left (in the sky left of the flag climber), 2
   further left and lower (beside the telescope figure), 3 upper-right
   (in the sky right of the summit, above the roped climber) - clear of
   all artwork in the reference. The translate() undoes each badge image's
   own number-circle offset (~18.2%/32.6% into the image, same badge PNGs
   as before) so the circle - not the image corner - lands on the mockup's
   point. Desktop/tablet only; mobile keeps the plain-text station list
   below, same call as hero illustrations on Schools/FYC at this
   breakpoint. */
/* width needs !important: the theme's own `img { width: 100% !important }`
   below 992px otherwise blows each badge up to the full mountain width,
   piling all three on top of the artwork at tablet size (Frans, msg 1082). */
.edu-hew__badge {
    position: absolute;
    width: 28.5% !important;
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.edu-hew__badge--1 {
    /* Shifted left (msg 504/515) by the width of "SE" in "PURPOSE" as
       measured in the source badge PNG (~122px of 1236px = ~9.9% of the
       badge's own rendered width), converted to a container-% shift at
       this badge's 28.5% width: 9.9% * 28.5% =~ 2.8%. Moves the WHOLE
       badge (circle, icon, text, box) as one unit - not just the text. */
    left: 19.8%;
    top: 27.6%;
    transform: translate(-18.2%, -32.6%);
}

.edu-hew__badge--2 {
    left: 3.0%;
    top: 44.3%;
    transform: translate(-18.2%, -32.6%);
}

.edu-hew__badge--3 {
    left: 72.4%;
    top: 36.6%;
    transform: translate(-18.2%, -32.6%);
}

/* Phone: overlaid at 28.5% the badge text is unreadably small, so the
   badges drop out of the artwork. Their number circles move onto the
   station list below instead, so Purpose/Path/Prepare appear once
   (msg 1082, then 1089). */
@media (max-width: 767.98px) {
    .edu-hew__badge {
        display: none;
    }
}

/* Number circle beside each station, phones only. A 48px window onto the
   badge PNG itself (1236x628): the circle sits at ~x171-317, y140-286, so
   the image is scaled by 48/146 and shifted to that box. No second asset. */
.edu-hew__station-badge {
    display: none;
}

@media (max-width: 767.98px) {
    .edu-hew__station {
        display: flex;
        align-items: center;
        gap: 0.875rem;
    }

    .edu-hew__station-badge {
        display: block;
        position: relative;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        overflow: hidden;
    }

    .edu-hew__station-badge img {
        position: absolute;
        left: -56px;
        top: -46px;
        width: 406px !important;
        max-width: none;
        height: auto;
    }

    .edu-hew__station-num {
        display: none;
    }
}

.edu-hew__stations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 2rem auto 0;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-hew__stations {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

.edu-hew__station {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.edu-hew__station strong {
    color: #262262;
}

.edu-hew__mountain-caption {
    max-width: 640px;
    margin: 1.5rem auto 0;
    color: #7a7a7a;
    font-size: 0.9375rem;
}

/* Pillar-coded heading words (msg 504/509/511) - "Step N:" and the pillar
   word (PURPOSE/PATH/PREPARE) in each step heading take that pillar's
   colour, same green/teal/purple used for the mountain badges and Career
   Compass platform-strip chips elsewhere on this site. */
.edu-hew__pillar-green {
    color: #8dc63f;
}

.edu-hew__pillar-teal {
    color: #4bc0b1;
}

.edu-hew__pillar-purple {
    color: #662d91;
}

/* Kicker pills (msg 517/518) - same pillar colours as backgrounds instead
   of the theme default green (.edu-home__campaign-kicker); text stays
   white, already set by that base rule. Step 1's kicker is left as the
   theme default green - it already matches the Purpose pillar.
   body.notloggedin prefix required: the theme's own kicker background
   rule compiles to body.notloggedin .edu-home__campaign-kicker (0,2,1) -
   same specificity issue hit repeatedly on this page family. */
body.notloggedin .edu-home__campaign-kicker.edu-hew__step2-kicker,
body.eduweb .edu-home__campaign-kicker.edu-hew__step2-kicker {
    background: #4bc0b1;
}

body.notloggedin .edu-home__campaign-kicker.edu-hew__step3-kicker,
body.eduweb .edu-home__campaign-kicker.edu-hew__step3-kicker {
    background: #662d91;
}

/* SECTION 3 - Step 1: Purpose (light grey tint). */
.edu-hew__step1 {
    padding: 3rem 0;
    background: #f5f5f5;
}

.edu-hew__step-intro {
    max-width: 700px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
    color: #333;
}

/* Made a link to careercompass.php (msg 507) - it was a plain, non-
   interactive card before. text-decoration:none since it's now an <a>;
   the hover shadow is the only added affordance, no colour changes (every
   child element already sets its own explicit colour). */
.edu-hew__flagship-card {
    display: block;
    max-width: 560px;
    margin: 2rem auto 0;
    padding: 1.75rem 1.5rem;
    background: #fff;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ec008c;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    transition: box-shadow 0.15s ease-in-out;
}

.edu-hew__flagship-card:hover,
.edu-hew__flagship-card:focus {
    text-decoration: none;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

.edu-hew__flagship-prefix {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #262262;
    margin-bottom: 0.6rem;
}

.edu-hew__flagship-body {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: #333;
}

.edu-hew__flagship-price {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ec008c;
    line-height: 1.1;
}

.edu-hew__flagship-priceline {
    margin: 0.25rem 0 0;
    color: #7a7a7a;
}

.edu-hew__proof {
    max-width: 640px;
    margin: 1.75rem auto 0;
    font-weight: 600;
    color: #262262;
    line-height: 1.6;
}

/* SECTION 4 - Step 2: Path (white). */
.edu-hew__step2 {
    padding: 3rem 0;
    background: #fff;
}

.edu-hew__step2-gradenote {
    max-width: 700px;
    margin: 0.75rem auto 0;
    font-weight: 700;
    color: #262262;
}

.edu-hew__tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 2rem auto 0;
    text-align: left;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .edu-hew__tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599.98px) {
    .edu-hew__tiles-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Flip tiles (msg 486): real Career Guidance Hub tool names + Lettie's own
   illustrations. Structure: .edu-hew__flip (a <button>, perspective + the
   focusable/clickable element itself) > .edu-hew__flip-inner (rotates,
   preserve-3d) > .edu-hew__flip-front / .edu-hew__flip-back (absolutely
   positioned over each other, backface-visibility hidden both unprefixed
   AND -webkit- prefixed — Safari needs the prefix or the back face shows
   blank/mirrored; this could not be tested in real Safari from this
   environment, Chrome DevTools only, code-reviewed against the known
   WebKit requirement instead).

   Grid gives equal-HEIGHT grid ITEMS via align-items:stretch above, but a
   flip tile's front/back are position:absolute (needed for the 3D flip),
   so they don't naturally fill that stretched height on their own - each
   layer needs height:100% explicitly, cascaded down through
   .edu-hew__flip / -inner / -front / -back, or they'd collapse to their
   own content size and the "equal height regardless of back-text length"
   requirement would silently fail.

   Flip triggers: :hover for desktop mouse (below); .is-flipped class
   (fliptilesjs in howeduworks.php) for click/tap/keyboard Enter+Space,
   since touch fires :hover unreliably and keyboard activation doesn't
   trigger :hover at all. Only one tile stays flipped at a time (JS
   enforces it) and tile 1 auto-flips once via IntersectionObserver when
   the section scrolls into view. prefers-reduced-motion swaps the 3D turn
   for a fade (media query near the bottom of this block). */
.edu-hew__flip {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    perspective: 1200px;
}

.edu-hew__flip-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s ease 0.08s;
}

.edu-hew__flip.is-flipped .edu-hew__flip-inner {
    transform: rotateY(180deg);
}

/* :hover flip trigger only for real hover+precise-pointer devices (mouse
   desktop) - a plain `:hover` rule fires unreliably/stickily on touch
   (msg 1022), so touch/tablet relies purely on the .is-flipped click
   toggle above (fliptilesjs in howeduworks.php: 1st tap flips, 2nd tap
   flips back). */
@media (hover: hover) and (pointer: fine) {
    .edu-hew__flip:hover .edu-hew__flip-inner {
        transform: rotateY(180deg);
    }
}

.edu-hew__flip-front,
.edu-hew__flip-back {
    display: block;
    position: absolute;
    inset: 0;
    height: 100%;
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.edu-hew__flip-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    text-align: center;
    overflow: hidden;
}

.edu-hew__flip-image {
    display: block;
    width: 100%;
    max-width: 140px;
    height: auto;
}

.edu-hew__flip-name {
    display: block;
    margin: 0;
    font-weight: 700;
    color: #262262;
}

/* Mobile-only always-visible description line (msg 1022) - hidden on
   desktop/tablet, where the same {{back}} copy only shows on the flipped
   card back. Shown in the mobile override block further down. */
.edu-hew__flip-desc {
    display: none;
}

/* Dog-ear affordance (msg 1022): a folded teal corner at rest, top-right of
   the front face, hinting the card flips. Classic zero-size-box/border
   triangle so it needs no extra markup. .edu-hew__flip-front's overflow:
   hidden above clips it neatly to the card's own 12px border-radius.
   transform-origin: top right + a short, undelayed transition make it grow
   slightly the instant :hover starts, a beat before the (0.08s-delayed)
   flip rotation above catches up - "reacts first, then peels into the
   flip". Not shown on tablet/touch at rest is NOT required by the brief;
   it stays visible there too since the 2-col grid still flips on tap. */
.edu-hew__flip-front::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 32px 32px 0;
    border-color: transparent #4bc0b1 transparent transparent;
    transform-origin: top right;
    transition: transform 0.15s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .edu-hew__flip:hover .edu-hew__flip-front::before {
        transform: scale(1.15);
    }
}

.edu-hew__flip-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    background: #4bc0b1;
    color: #fff;
    text-align: left;
    transform: rotateY(180deg);
}

.edu-hew__flip-back-name {
    display: block;
    margin: 0;
    font-weight: 700;
}

.edu-hew__flip-back-text {
    display: block;
    margin: 0;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .edu-hew__flip-inner {
        transition: none;
    }

    .edu-hew__flip:hover .edu-hew__flip-inner,
    .edu-hew__flip.is-flipped .edu-hew__flip-inner {
        transform: none;
    }

    .edu-hew__flip-front,
    .edu-hew__flip-back {
        transition: opacity 0.3s ease;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }

    .edu-hew__flip-back {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }

    .edu-hew__flip:hover .edu-hew__flip-front,
    .edu-hew__flip.is-flipped .edu-hew__flip-front {
        opacity: 0;
    }

    .edu-hew__flip:hover .edu-hew__flip-back,
    .edu-hew__flip.is-flipped .edu-hew__flip-back {
        opacity: 1;
    }
}

/* Mobile (single-column grid, msg 1022): flip removed entirely - no hover,
   no tap-to-flip, no dog-ear. Card becomes a plain stacked block (image,
   title, always-visible description) instead of the absolutely-positioned
   front/back pair the flip needs. fliptilesjs may still toggle .is-flipped
   on tap here (JS is unchanged) but that class has no visual effect once
   .edu-hew__flip-inner's transform is forced to none below. */
@media (max-width: 599.98px) {
    .edu-hew__flip {
        min-height: 0;
        perspective: none;
        cursor: default;
    }

    .edu-hew__flip-inner {
        height: auto;
        transform: none !important;
        transition: none;
    }

    .edu-hew__flip-front {
        position: static;
        height: auto;
        padding: 1.25rem 1rem;
    }

    .edu-hew__flip-front::before {
        display: none;
    }

    .edu-hew__flip-back {
        display: none;
    }

    .edu-hew__flip-desc {
        display: block;
        margin: 0;
        color: #4b4b4b;
        line-height: 1.5;
    }
}

/* SECTION 5 - Step 3: Prepare. Was a solid teal band; changed to light grey
   tint with a 4px teal top border (msg 504/511) — same recipe this room's
   standing rule #4 already uses for converting a solid band ("light-grey+
   4px-teal-top-border+navy-heading+dark-text"). No more white-text
   override needed: .edu-home__heading already defaults to navy. */
.edu-hew__step3 {
    padding: 3rem 0;
    background: #f5f5f5;
    border-top: 4px solid #4bc0b1;
}

.edu-hew__step3-intro {
    color: #333;
}

/* Universal-courses restructure (2026-09-07, msg 660): lead statement,
   skills chips and connector line, all dark text on the section's own
   light-grey band (not literally white-on-teal - this band was converted
   away from solid teal in the 2026-08-31 polish batch per the site's
   "max 2 solid bands" rule, so white text would be unreadable here; kept
   consistent with the dark text already used by .edu-hew__step3-intro/
   -caps immediately around it). */
.edu-hew__step3-lead {
    max-width: 700px;
    margin: 1.5rem auto 0;
    color: #262262;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.edu-hew__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 900px;
    margin: 1.25rem auto 0;
}

.edu-hew__chip {
    background: #fff;
    color: #262262;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.edu-hew__step3-connector {
    max-width: 700px;
    margin: 1.5rem auto 0;
    color: #333;
    line-height: 1.6;
}

/* Grade cards now a subordinate "where to begin" guide under the chips
   above them, so noticeably smaller than the original size (was
   0.9375rem/1.1rem padding, max-width 1200px). Grid stays the same
   1200px/5-2-1 responsive breakpoints (already one row on desktop). */
.edu-hew__grades-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 2rem auto 0;
    text-align: left;
}

.edu-hew__grades-grid--compact {
    gap: 0.75rem;
    max-width: 980px;
    margin-top: 1.25rem;
}

@media (max-width: 991.98px) {
    .edu-hew__grades-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599.98px) {
    .edu-hew__grades-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

.edu-hew__grade-card {
    margin: 0;
    padding: 1.1rem 1.1rem;
    background: #fff;
    border-radius: 12px;
    line-height: 1.6;
    color: #333;
    font-size: 0.9375rem;
}

.edu-hew__grades-grid--compact .edu-hew__grade-card {
    padding: 0.65rem 0.8rem;
    font-size: 0.75rem;
    line-height: 1.45;
    border-radius: 8px;
}

.edu-hew__grade-card strong {
    color: #262262;
}

.edu-hew__step3-caps {
    max-width: 760px;
    margin: 1.25rem auto 0;
    color: #333;
    line-height: 1.6;
}

/* Linked line directly after Step 3 (2026-09-21, msg 873, item 15) - sits
   in the white gap between the step3 band and the FAQ section, so plain
   white background/centred/no extra padding needed beyond breathing room. */
.edu-hew__schoolsline {
    max-width: 760px;
    margin: 2rem auto;
    padding: 0 16px;
    text-align: center;
    color: #333;
}

.edu-hew__schoolsline a {
    color: #262262;
    font-weight: 700;
    text-decoration: underline;
}

/* SECTION 6 - FAQ accordion: same construction as .edu-cc__faq-*. */
.edu-hew__faq {
    padding: 3rem 0;
    background: #fff;
}

.edu-hew__faq-list {
    max-width: 720px;
    margin: 2rem auto 0;
    text-align: left;
}

.edu-hew__faq-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.edu-hew__faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: #262262;
    cursor: pointer;
}

.edu-hew__faq-icon {
    flex: 0 0 auto;
    position: relative;
    width: 20px;
    height: 20px;
}

.edu-hew__faq-icon::before,
.edu-hew__faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #8dc63f;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-in-out;
}

.edu-hew__faq-icon::before {
    width: 14px;
    height: 3px;
}

.edu-hew__faq-icon::after {
    width: 3px;
    height: 14px;
}

.edu-hew__faq-item--open .edu-hew__faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.edu-hew__faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;
}

.edu-hew__faq-answer p {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: #333;
}

.edu-hew__faq-item--open .edu-hew__faq-answer {
    max-height: 400px;
    padding: 0 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   For Learners page (forlearners.php, 2026-08-31, Lettie's 7-section
   brief, msgs 461-462). Colour rhythm: white hero, solid teal (Section 2),
   white (Section 3), white with navy cards (Section 4), light grey tint
   (Section 5), white (Section 6), solid navy close (Section 7 - reuses the
   theme's .edu-home__close). Only 2 solid full-width bands, never adjacent.
   ══════════════════════════════════════════════════════════════════════ */

/* SECTION 1 - Hero: copy left, illustration space reserved right - no image
   yet, it is briefed separately, so the wrap stays empty and is hidden on
   mobile rather than leaving a blank stacked block (same pattern schools.php
   used before its hero image was approved). */
.edu-fl__hero {
    padding: 3rem 0;
    background: #fff;
}

.edu-fl__hero-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-fl__hero-copy {
    flex: 1 1 50%;
}

.edu-fl__hero-illuswrap {
    flex: 1 1 50%;
}

.edu-fl__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-fl__hero-heading {
    margin-bottom: 1rem;
}

.edu-fl__hero-body {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* Stacked deliberately (not an accidental wrap): the two labels are
   different lengths ("Find out what you're good at" vs "Start with
   something free"), and this column is only ~half page width, so a
   side-by-side row wraps anyway at this width - stacking on purpose reads
   cleaner, and a shared fixed width (msg 477: "make the 2 buttons the
   same size") makes them match instead of hugging their own text. */
.edu-fl__hero-btnrow {
    flex-direction: column;
    align-items: flex-start;
}

/* Same gap fix as .edu-schools__hero-btnrow above (msg 771): stacked in a
   column, this row still inherited the theme's own
   body.notloggedin .edu-home__btn-row { gap: 4rem }, leaving a 64px gap
   between the two buttons. Needs the same body.notloggedin prefix +
   ancestor-scope specificity (0,0,3,1) to beat it - a bare
   .edu-fl__hero-btnrow rule loses the same way the Schools one did. */
body.notloggedin .edu-fl__hero-row .edu-fl__hero-btnrow,
body.eduweb .edu-fl__hero-row .edu-fl__hero-btnrow {
    gap: 0.75rem;
}

.edu-fl__hero-btnrow .edu-home__btn {
    width: 320px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .edu-fl__hero-row {
        flex-direction: column;
        text-align: center;
    }

    .edu-fl__hero-btnrow {
        align-items: center;
    }

    .edu-fl__hero-btnrow .edu-home__btn {
        width: 100%;
        max-width: 320px;
    }

    .edu-fl__hero-illuswrap {
        display: none;
    }
}

/* SECTION 2 - Sound familiar: solid teal band, same recipe as FYC/Schools'
   identical section - 4 white quote chips untouched, only the section's own
   heading/body text goes white to read on the teal. */
.edu-fl__sound {
    padding: 3rem 0;
    background: #4bc0b1;
}

.edu-fl__sound .edu-home__heading,
.edu-fl__sound .edu-fl__sound-body {
    color: #fff;
}

.edu-fl__chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 760px;
    margin: 0 auto 1.5rem;
}

@media (max-width: 767.98px) {
    .edu-fl__chips {
        grid-template-columns: 1fr;
    }
}

.edu-fl__chip {
    max-width: none;
    flex: none;
    text-align: left;
    border-left-color: #ec008c;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.edu-fl__chip .edu-home__quote-text {
    margin: 0;
}

.edu-fl__sound-body {
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto;
}

/* SECTION 3 - Career Compass: 5 arrow-bullet lines (same recipe as Career
   Compass's own 5-benefits list) + a highlighted R 295 facts card (same
   recipe as .edu-hew__flagship-card / .edu-cc__cost-card). */
.edu-fl__cc {
    padding: 3rem 0;
    background: #fff;
}

.edu-fl__cc-lines {
    max-width: 640px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.edu-fl__cc-line {
    position: relative;
    margin: 0;
    padding: 0.6rem 0 0.6rem 1.75rem;
    line-height: 1.6;
    color: #333;
}

.edu-fl__cc-line::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: 0.6rem;
    color: #ec008c;
    font-weight: 700;
}

.edu-fl__facts-card {
    display: block;
    max-width: 560px;
    margin: 2rem auto 0;
    padding: 1.75rem 1.5rem;
    background: #fff;
    text-align: center;
    border: 1px solid #ec008c;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.edu-fl__facts-body {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: #333;
}

.edu-fl__facts-price {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ec008c;
    line-height: 1.1;
}

/* SECTION 4 - Show your parents: very light grey tint, per her brief. MOVED
   (msg 481) up in the DOM to sit right after Career Compass — rule itself
   unchanged, still .edu-fl__parents. */
.edu-fl__parents {
    padding: 3rem 0;
    background: #f5f5f5;
}

.edu-fl__parents-body {
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
    color: #333;
}

.edu-fl__center {
    text-align: center;
}

/* SECTION 5 - The bigger picture: white, 3 navy cards side by side on
   desktop, each with a numbered ring badge (msg 481) — the badge PNGs are
   cropped from the same howeduworks-badge-1/2/3.png artwork (just the
   number-circle-plus-ring, not the full label), so the "badge style" is
   literally her own art, not a CSS recreation. REBUILT - replaces the old
   4-card icon-less "More than a test" (.edu-fl__more*, now deleted). */
.edu-fl__bp {
    padding: 3rem 0;
    background: #fff;
}

.edu-fl__bp-intro {
    max-width: 640px;
    margin: 0.75rem auto 0;
    text-align: center;
    line-height: 1.6;
    color: #333;
}

.edu-fl__bp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 2rem auto 0;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-fl__bp-grid {
        grid-template-columns: 1fr;
    }
}

.edu-fl__bp-card {
    background: #262262;
    border-radius: 14px;
    padding: 1.5rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.edu-fl__bp-badge {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 0 0.85rem;
}

.edu-fl__bp-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
}

.edu-fl__bp-body {
    margin: 0;
    line-height: 1.6;
    color: #fff;
}

.edu-fl__bp-closeline {
    max-width: 640px;
    margin: 2rem auto 0;
    text-align: center;
    font-weight: 600;
    color: #262262;
}

.edu-fl__bp-link {
    margin: 0.5rem 0 0;
    text-align: center;
}

.edu-fl__bp-link a {
    color: #662d91;
    font-weight: 600;
    text-decoration: underline;
}

/* SECTION 6 - Free stuff: light grey tint (msg 481 - was white; changed to
   fit the reordered rhythm since "Not your card?" now also uses the tint
   and needs to not sit adjacent to another tint section without a white
   gap - the actual adjacency is white(bigger picture) between them, so
   this is a deliberate rhythm choice from her brief, not a collision fix). */
.edu-fl__free {
    padding: 3rem 0;
    background: #f5f5f5;
}

.edu-fl__free-body {
    max-width: 640px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
    color: #333;
}

.edu-fl__free-smallprint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(38, 34, 98, 0.75);
}

/* SECTION 7 - Closing: reuses the theme's shared .edu-home__close, whose own
   ".edu-home__close .edu-home__btn" rule forces EVERY button inside it pink
   (built for single-button closes elsewhere) - her brief wants a pink
   primary + a GREEN secondary here, so the non-pink button needs an
   explicit, higher-specificity override back to green. */
body.notloggedin .edu-fl__close .edu-home__btn:not(.edu-home__btn--pink),
body.eduweb .edu-fl__close .edu-home__btn:not(.edu-home__btn--pink) {
    background: #8dc63f;
}

body.notloggedin .edu-fl__close .edu-home__btn:not(.edu-home__btn--pink):hover,
body.eduweb .edu-fl__close .edu-home__btn:not(.edu-home__btn--pink):hover,
body.notloggedin .edu-fl__close .edu-home__btn:not(.edu-home__btn--pink):focus,
body.eduweb .edu-fl__close .edu-home__btn:not(.edu-home__btn--pink):focus {
    background: #7ab332;
}

/* How EDU Works closing band "Bring EDU to your school" forced green
   (2026-09-21, msg 947) - same reasoning/recipe as .edu-fl__close above:
   this band's own theme rule makes every plain button pink by default. */
body.notloggedin .edu-home__close .edu-hew__close-cta--green,
body.eduweb .edu-home__close .edu-hew__close-cta--green {
    background: #8dc63f;
}

body.notloggedin .edu-home__close .edu-hew__close-cta--green:hover,
body.eduweb .edu-home__close .edu-hew__close-cta--green:hover,
body.notloggedin .edu-home__close .edu-hew__close-cta--green:focus,
body.eduweb .edu-home__close .edu-hew__close-cta--green:focus {
    background: #7ab62f;
}

.edu-fl__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   duplicateHome — full 10-section rebuild (2026-09-22, Lettie, msgs 974-976),
   then a layout/component styling pass (2026-09-22, msgs 980-982, copy
   untouched) that swapped page-specific card/badge/pricing markup for the
   THEME'S OWN real components wherever one already exists — .edu-home__
   component (Purpose/Path/Preparation cards), .edu-home__stats-grid/-item
   (the live homepage's stat-card bar), .edu-home__pricing-tier (the real
   pricing-card component, same one used on the homepage/For Your Child
   bundle bands) — so this page matches those pages by construction, not by
   a parallel copy of their styling. Only genuinely new layout (hero row,
   problem/audience card shells, the numbered steps list, the free-offer
   form row) still lives here as page-scoped .edu-duphome__* rules. Section
   padding (3rem 0) matches the same value every .edu-fyc__* section uses.
   ═══════════════════════════════════════════════════════════════════════ */

/* Section 1 - Hero: text left, illustration right (same recipe as
   .edu-fyc__hero-row/.edu-schools__hero-row/.edu-fl__hero-row). */
/* Padding reverted back to the standard 3rem (2026-09-22, msg 1011) - she
   asked for this page's top spacing to match FYC/Schools/Learners EXACTLY
   ("each page needs to start at exactly the same height"); those 3 pages
   all use .edu-fyc__hero/.edu-schools__hero/.edu-fl__hero { padding: 3rem
   0 } (measured live: FYC's hero starts at the same 71px-under-navbar
   position duplicateHome now also uses, confirming this is the value to
   match). The earlier 1.5rem tighten (msg 1002) is undone - it made this
   page inconsistent with its siblings instead of fixing anything real;
   the genuine "too much space below the image" cause is the illustration
   file's own baked-in white margins (measured: ~14% blank at the top of
   the then-1024x1024 PNG, ~17% blank at the bottom - not a CSS issue,
   flagged to her separately; this padding value is unrelated). UPDATE
   (msg 1014): she confirmed the image as final and asked for it cropped
   tighter - duplicatehome.php now points heroimage at a new, separately
   cropped pix/duphome-hero.png (1024x770), leaving careercompass.php's
   own copy of the original untouched. */
.edu-duphome__hero {
    padding: 3rem 0;
}

/* Root cause of the "too much white space" report (2026-09-22, msg 1005) -
   found by measuring the live DOM, not guessing: the hero illustration
   (490x490, near-square placeholder) is taller than the copy column
   (443px), and align-items:center was vertically centring the shorter
   copy column inside that extra height - a ~23px gap above AND below the
   text/buttons that no amount of section-padding trimming could remove,
   since it lived inside the row, not the section. Switched to flex-start
   so both columns start flush at the row's top edge instead. */
.edu-duphome__hero-row {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

.edu-duphome__hero-copy {
    flex: 1 1 50%;
}

.edu-duphome__hero-imagewrap {
    flex: 1 1 50%;
    text-align: center;
}

.edu-duphome__hero-image {
    max-width: 100%;
    height: auto;
}

.edu-duphome__hero-body {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 1rem 0 0;
}

/* Stacked (not side-by-side), same size, matching the other audience
   pages' own hero button rows (2026-09-22, msg 1017 - measured FYC live:
   .edu-fyc__hero-btnrow is flex-direction:column too). Both buttons get a
   shared fixed width (320px, the same value already used to line up the
   Schools/Learners hero button pairs) so they match each other exactly,
   per her explicit "the two buttons must be the same size". Same
   body.notloggedin + ancestor-scope specificity fix every sibling page's
   own hero-btnrow needed against the theme's shared
   .edu-home__btn-row{justify-content:center; gap:4rem} rule. */
body.notloggedin .edu-duphome__hero-row .edu-duphome__hero-btnrow,
body.eduweb .edu-duphome__hero-row .edu-duphome__hero-btnrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

body.notloggedin .edu-duphome__hero-btnrow .edu-home__btn,
body.eduweb .edu-duphome__hero-btnrow .edu-home__btn {
    width: 320px;
    text-align: center;
    box-sizing: border-box;
}

.edu-duphome__hero-trust {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #666;
}

/* Section 2 - The problem: 3-card timeline. Turquoise band (2026-09-22, msg
   998) - same #4bc0b1 teal + white heading/body/emphasis text recipe as
   For Your Child's .edu-fyc__sound and For Schools' .edu-schools__sound
   sections. The 3 white timeline cards below stay untouched, same
   precedent as those pages (their own cards read fine regardless of the
   section background). body.notloggedin prefix on the heading only - the
   theme's own heading colour rule compiles to body.notloggedin
   .edu-home__heading (0,2,1); a bare two-class override here (0,2,0)
   would lose to it, same landmine already documented on the FYC/Schools
   copies of this same recipe. */
.edu-duphome__problem {
    background: #4bc0b1;
    padding: 3rem 0;
}

body.notloggedin .edu-duphome__problem .edu-home__heading,
body.eduweb .edu-duphome__problem .edu-home__heading,
.edu-duphome__problem-intro,
.edu-duphome__problem-turn {
    color: #fff;
}

.edu-duphome__problem-intro {
    text-align: center;
    margin: 1rem 0 0;
    line-height: 1.6;
}

.edu-duphome__problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Shared white/rounded/shadow card shell - Section 2's grade cards and
   Section 6's audience cards use the SAME card style, per the brief. */
.edu-duphome__problem-card,
.edu-duphome__audience-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.edu-duphome__problem-card-h {
    font-size: 1.05rem;
    font-weight: 700;
    color: #262262;
    margin: 0 0 0.5rem;
    text-align: center;
}

.edu-duphome__problem-card-b {
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

/* Only the closing sentence is bold now (2026-09-22, msg 1017) - the
   other 3 are wrapped in <strong> individually where needed inside the
   duphome_problem_turn string itself; this rule just sets the base
   (unbold) weight + size for the whole line. */
.edu-duphome__problem-turn {
    text-align: center;
    font-weight: 400;
    font-size: 1.2rem;
    margin: 2rem 0 0;
}

/* Section 3 - What EDU is: reuses the theme's REAL Purpose/Path/Preparation
   card component (.edu-home__component + its badge/illustration images and
   green/teal/purple top border via nth-child, exactly as the live homepage
   renders it - theme_edutheme/scss/edutheme/_marketing.scss) - no
   page-specific card styling left, per the 2026-09-22 (msg 985-986) "match
   the current home page design exactly" instruction. This page's own
   heading/body copy is unchanged. */
.edu-duphome__what {
    padding: 3rem 0;
}

.edu-duphome__what-intro {
    text-align: center;
    margin: 1rem 0 0;
    line-height: 1.6;
}

.edu-duphome__what-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    align-items: stretch;
}

.edu-duphome__what-footline {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin: 1.5rem 0 0;
}

/* Section 4 - How it works in practice: numbered vertical list. */
.edu-duphome__how {
    background: #f5f5f5;
    padding: 3rem 0;
}

.edu-duphome__steps {
    list-style: none;
    counter-reset: duphomestep;
    margin: 2rem auto 0;
    padding: 0;
    max-width: 640px;
    text-align: left;
}

.edu-duphome__step {
    counter-increment: duphomestep;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 1.5rem;
}

.edu-duphome__step::before {
    content: counter(duphomestep);
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #8dc63f;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edu-duphome__step-text {
    line-height: 1.6;
    padding-top: 0.25rem;
}

/* Section 5 - Proof: dark navy, white text. Trust bar, 2 testimonials, the
   live homepage's own animated school-crest marquee. */
.edu-duphome__proof {
    background: #262262;
    color: #fff;
    padding: 3rem 0;
}

body.notloggedin .edu-duphome__proof .edu-home__heading,
body.eduweb .edu-duphome__proof .edu-home__heading {
    color: #fff;
}

/* One empty line of space above the trust bar (msg 1037) - the grid itself
   has no top margin of its own (theme rule is `body.notloggedin
   .edu-home__stats-grid { margin: 0 auto }`), so it was sitting right at
   the section's own 3rem top padding with nothing extra above "Trusted by
   schools...". A plain `.edu-duphome__trustbar` rule LOST to that theme
   rule (0,2,1) despite loading later - same body.notloggedin specificity
   landmine this codebase hits repeatedly - so this needs the same prefix. */
body.notloggedin .edu-duphome__trustbar,
body.eduweb .edu-duphome__trustbar {
    margin-top: 1.5rem;
}

/* Trust bar reuses the theme's REAL stat-card bar
   (.edu-home__stats-grid/-item, already white-cards-on-navy) - the 6
   duphome_proof_trust* strings embed the same .edu-home__stat-num[--word]
   spans the live homepage's own stats strip uses, so the markup is
   identical, just this page's own words.

   2026-09-22 (msg 1030 round): a rule was added here believing
   .edu-duphome__proof's `color: #fff` above was defeating
   .edu-home__stat-num's theme-owned green/bold rule. REMOVED 2026-09-22
   (msg 1037 round, caught while investigating the trust-bar margin-top
   fix below not applying) - that diagnosis was wrong. It was tested while
   logged in as admin, where the theme's ENTIRE marketing design system
   (wrapped in `body.notloggedin { ... }` in _marketing.scss) simply
   doesn't apply at all, so .edu-home__stat-num had no colour/weight rule
   matching it and fell back to inherited white/normal - that is a
   logged-in-testing artifact, not a real bug. For an actual anonymous
   visitor, .edu-home__stat-num's own explicit body.notloggedin-scoped
   colour/weight declaration already beats the inherited value regardless
   of specificity (an element's own rule always beats inheritance) - the
   trust bar was never broken live. Verified by listing matched CSS rules
   on a real logged-out load: only the theme's own
   `body.notloggedin .edu-home__stat-num` rule matched, already green/bold.
   Lesson for next time: verify page-specific fixes on THIS family of
   pages logged OUT, not logged in - the whole design system is
   body.notloggedin-scoped. */

.edu-duphome__testimonial {
    text-align: center;
    margin: 2rem 0 0;
    border: 0;
}

.edu-duphome__testimonial--large .edu-duphome__testimonial-text {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* Quotation marks are now literal characters inline in the
   duphome_proof_quote1/2 strings (2026-09-22, msg 1008 - "put the
   quotation mark next to 'I have...'", replacing the earlier separate
   green ::before block mark) - they inherit this white text colour
   automatically, no separate rule needed. White divider line between the
   two quotes, per the same brief. */
.edu-duphome__testimonial--small {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.edu-duphome__testimonial--small .edu-duphome__testimonial-text {
    font-size: 1.25rem;
    opacity: 0.9;
}

.edu-duphome__testimonial-text {
    margin: 0 0 0.5rem;
    color: #fff;
}

.edu-duphome__testimonial-cite {
    font-style: normal;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    opacity: 0.85;
}

/* School crests: the theme's REAL animated marquee (.edu-home__schools-card/
   -track, .edu-home__school-logo - same component the live homepage uses,
   2026-09-22 msg 991), just this page's own top spacing since it sits
   directly under the testimonials rather than under its own section
   caption. */
.edu-duphome__proof .edu-home__schools-card {
    margin-top: 2.5rem;
}

/* Section 6 - Audience router. */
.edu-duphome__audience {
    padding: 3rem 0;
}

.edu-duphome__audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.edu-duphome__audience-card {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.edu-duphome__audience-card-h {
    font-size: 1.15rem;
    font-weight: 700;
    color: #262262;
    margin: 0 0 0.5rem;
}

.edu-duphome__audience-card-b {
    margin: 0 0 1.25rem;
    line-height: 1.6;
    flex: 1 0 auto;
}

.edu-duphome__audience-link {
    align-self: center;
}

/* Section 7 - The offer: reuses the theme's REAL pricing-card component
   (.edu-home__pricing-tier/-grid/-flag/-name/-body/-payoff/-save/-price -
   the exact cards the homepage/For Your Child bundle bands use) instead of
   a page-specific card, per the brief. Two page-scoped overrides on top of
   that shared component: the emphasised card's border is PINK here (the
   shared component's own --hero modifier is green, used elsewhere), and
   every card's price is pink (the shared component only pinks its first
   card by default). */
.edu-duphome__offer {
    background: #f5f5f5;
    padding: 3rem 0;
}

.edu-duphome__offer-intro {
    text-align: center;
    margin: 1rem 0 0;
    line-height: 1.6;
}

/* !important on both: the shared component's own rules this page reuses
   are deeply nested (body.notloggedin .edu-home__pricing-grid
   .edu-home__pricing-tier:first-child ... / body.notloggedin
   .edu-home__pricing-tier--hero { border: 2px solid green }, a shorthand
   that beats a lone border-color override on specificity) - same
   landmine this page family has hit repeatedly (see version.php history),
   simplest robust fix here rather than chasing selector depth. */
.edu-duphome__offer .edu-home__pricing-tier--hero {
    border: 2px solid #ec008c !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.5rem);
}

.edu-duphome__offer .edu-home__pricing-price strong {
    color: #ec008c !important;
}

/* Body text + price centred (msg 1040) - .edu-home__pricing-body has no
   text-align of its own (theme's pricing cards are left-aligned by
   design elsewhere), so price/payoff/save-pill all inherit centre once
   set here. body.notloggedin prefix needed to beat the theme's own
   equal-or-higher-specificity rule for this class - same landmine as the
   border-colour/price-colour overrides just above. */
body.notloggedin .edu-duphome__offer .edu-home__pricing-body,
body.eduweb .edu-duphome__offer .edu-home__pricing-body {
    text-align: center;
}

.edu-duphome__offer-note {
    text-align: center;
    margin: 1rem 0 0;
}

/* Section 8 - FAQ: reuses the theme's existing .edu-home__faq-* accordion
   styling as-is, no page-specific rules needed beyond section spacing. */
.edu-duphome__faqsection {
    padding: 3rem 0;
}

/* Section 8b - Free exam help: light-grey + teal-top-border band, same
   recipe as .edu-fyc__free on foryourchild.php (msg 1025, added between
   the FAQ and the navy Final CTA). */
.edu-duphome__free {
    padding: 3rem 0;
    background: #f5f5f5;
    border-top: 4px solid #4bc0b1;
    color: #262262;
}

.edu-duphome__free-heading {
    color: #262262 !important;
}

.edu-duphome__free-body {
    color: #262262;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Section 9 - Final CTA: dark navy, white text. */
.edu-duphome__final {
    background: #262262;
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}

body.notloggedin .edu-duphome__final .edu-home__heading,
body.eduweb .edu-duphome__final .edu-home__heading {
    color: #fff;
}

/* Brief requirement: no "You are not logged in" line on this page - scoped
   to this page's body id only, other pages' footer is untouched. */
body#page-local-edupages-duplicatehome .logininfo {
    display: none;
}

.edu-duphome__final-body {
    margin: 1rem 0 0;
    font-size: 1.05rem;
}

/* Mobile: card grids stack to one column, buttons go full width, hero text
   sits above the illustration (flex-direction:column already puts the
   copy div, which comes first in the markup, above the image). */
@media (max-width: 767.98px) {
    body.notloggedin .edu-duphome .edu-home__btn-row,
body.eduweb .edu-duphome .edu-home__btn-row {
        flex-direction: column;
        align-items: stretch;
    }

    body.notloggedin .edu-duphome .edu-home__btn,
body.eduweb .edu-duphome .edu-home__btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .edu-duphome__hero-row {
        flex-direction: column;
    }

    .edu-duphome__hero-copy,
    .edu-duphome__hero-imagewrap {
        flex: 1 1 100%;
    }

    .edu-duphome__hero-heading,
    .edu-duphome__hero-body,
    .edu-duphome__hero-trust {
        text-align: center;
    }

    .edu-duphome__problem-grid,
    .edu-duphome__what-grid,
    .edu-duphome__audience-grid {
        grid-template-columns: 1fr;
    }

    /* .edu-home__pricing-grid is flex, not grid - stack instead. */
    .edu-duphome__offer-grid {
        flex-direction: column;
        align-items: center;
    }

    .edu-duphome__offer .edu-home__pricing-tier--hero {
        transform: none;
    }

    .edu-duphome__offer .edu-home__pricing-tier {
        width: 100%;
        max-width: 320px;
    }
}

/* Contact Us page (contactus.php), new 2026-09-22 (msg 1027/1028). Section 1
   (white) + Section 3 (light grey) need only spacing - Section 2's 2-column
   form/details layout is the only real new structure. */
.edu-contact__hero {
    padding: 3rem 0 1rem;
}

.edu-contact__intro {
    max-width: 640px;
    margin: 1rem auto 0;
    line-height: 1.6;
}

.edu-contact__main {
    padding: 1rem 0 3rem;
    background: #fff;
}

/* Form ~2/3, contact details ~1/3 on desktop; stacks full-width on mobile
   (brief: "form fields and button full width, contact details stacked
   below the form"). */
.edu-contact__row {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.edu-contact__form-col {
    flex: 2 1 0;
    min-width: 0;
}

.edu-contact__details-col {
    flex: 1 1 0;
    min-width: 0;
}

.edu-contact__smallprint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(38, 34, 98, 0.75);
}

.edu-contact__details-heading {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #262262;
}

/* Same icon-link recipe as the footer's own GET IN TOUCH block
   (theme_edutheme/templates/footer.mustache marketing-footer__links). */
.edu-contact__details-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.edu-contact__details-list li {
    margin-bottom: 1rem;
}

.edu-contact__details-list a {
    color: #262262;
    text-decoration: none;
    line-height: 1.5;
}

.edu-contact__details-list a:hover {
    text-decoration: underline;
}

.edu-contact__details-list i {
    color: #4bc0b1;
    width: 1.25rem;
    text-align: center;
    margin-right: 0.5rem;
}

.edu-contact__soft {
    padding: 3rem 0;
    background: #f5f5f5;
    text-align: center;
}

.edu-contact__soft-line {
    margin: 0;
    font-size: 1.1rem;
    color: #262262;
}

.edu-contact__soft-line a {
    color: #4bc0b1;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .edu-contact__row {
        flex-direction: column;
        gap: 2.5rem;
    }

    .edu-contact__form-col,
    .edu-contact__details-col {
        flex: 1 1 auto;
        width: 100%;
    }

    /* .form-control (Bootstrap) is already block/100% at every width; the
       submit button (.edu-home__btn is inline-block, sized to its text by
       default) is the one element that needs an explicit full-width rule. */
    .edu-contact__form-col .edu-home__btn--submit {
        display: block;
        width: 100%;
        text-align: center;
    }
}