/* Session Library homepage modules — styles for the three ACF blocks
 * (session-finder-block, sample-session-block, popular-sessions-block) and the shared
 * gate lightbox. Enqueued from mr/inc/assets.php only on pages containing one of the blocks.
 *
 * Visuals match the approved design (claude.ai/design "Everyday Speech homepage redesign"):
 * tokens below mirror the design system's colors.css / typography.css / spacing.css. The
 * tokens are scoped to the module roots on purpose — this file must never restyle anything
 * outside the three modules. */

.eds-session-finder,
.eds-hero-finder,
.eds-sample-session,
.eds-popular-sessions,
.eds-curriculum-features,
.eds-trial-cta,
.eds-gate-scrim {
    /* Design-system tokens (everyday-speech-marketing-design-system, 2026-08-21) */
    --eds-blue-100: #E2EEFF;
    --eds-blue-200: #9DC6FF;
    --eds-blue-300: #4592FF;
    --eds-blue-400: #00409B;
    --eds-blue-500: #00204D;
    --eds-yellow-100: #FFF5D9;
    --eds-yellow-200: #FFECB9;
    --eds-yellow-300: #FFD768;
    --eds-text-primary: #011633;
    --eds-text-body: #283445;
    --eds-text-muted: #6C747F;
    --eds-border-soft: #E5E7EB;
    --eds-radius-s: 16px;
    --eds-radius-m: 24px;
    --eds-radius-l: 32px;
    --eds-radius-pill: 1000px;
    --eds-shadow-sm: 0 2px 8px rgba(0, 32, 77, 0.06);
    --eds-shadow-md: 0 8px 24px rgba(0, 32, 77, 0.08);
    --eds-shadow-lg: 0 16px 48px rgba(0, 32, 77, 0.12);
    --eds-font: "Lexend", Arial, sans-serif;
    /* Session-player teal palette (design SampleSession.jsx) */
    --eds-teal-deep: #0C4A5A;
    --eds-teal-line: #3A9BB8;
    --eds-teal-circle: #CFE9F1;
    --eds-teal-icon: #2C8CA6;
    --eds-teal-card: #BFE3EE;

    font-family: var(--eds-font);
    color: var(--eds-text-primary);
}

/* JS toggles visibility with the hidden attribute; it must beat any display rule below
 * (a bare `display: flex` would otherwise override the attribute's UA default). */
.eds-session-finder [hidden],
.eds-hero-finder [hidden],
.eds-sample-session [hidden],
.eds-popular-sessions [hidden],
.eds-curriculum-features [hidden],
.eds-gate-scrim[hidden],
.eds-gate-scrim [hidden] {
    display: none !important;
}

/* ── Shared pill buttons (design-system Button) ───────────────────────────── */

.eds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 600 18px/28px var(--eds-font);
    letter-spacing: 0.01em;
    padding: 14px 28px;
    border: none;
    border-radius: var(--eds-radius-pill);
    background: var(--eds-blue-400);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.eds-btn:hover {
    transform: translateY(-1px);
    color: #fff;
}

.eds-btn--primary {
    background: var(--eds-blue-400);
    color: #fff;
}

.eds-btn--primary:hover {
    background: var(--eds-blue-500);
}

.eds-btn--lg {
    font: 600 20px/30px var(--eds-font);
    padding: 18px 36px;
}

.eds-btn--outline {
    background: transparent;
    color: var(--eds-blue-400);
    border: 2px solid var(--eds-blue-400);
}

.eds-btn--outline:hover {
    background: var(--eds-blue-100);
    color: var(--eds-blue-400);
}

.eds-btn--white {
    background: #fff;
    color: var(--eds-blue-400);
}

.eds-btn--white:hover {
    background: var(--eds-blue-100);
    color: var(--eds-blue-400);
}

.eds-btn--teal {
    background: var(--eds-teal-deep);
    font: 700 16px/26px var(--eds-font);
    padding: 11px 20px;
}

.eds-btn--teal:hover {
    background: #08323d;
}

.eds-btn--teal-outline {
    background: #fff;
    color: var(--eds-teal-deep);
    border: 2px solid var(--eds-teal-deep);
    font: 700 16px/26px var(--eds-font);
    padding: 9px 20px;
}

.eds-btn--teal-outline:hover {
    background: var(--eds-teal-circle);
    color: var(--eds-teal-deep);
}

.eds-btn--yellow {
    background: #F4B72E;
    color: #3a2a00;
    font: 700 16px/26px var(--eds-font);
    padding: 11px 20px;
}

.eds-btn--yellow:hover {
    background: #e0a51d;
    color: #3a2a00;
}

/* Design-system Button variant "secondary": pastel-yellow pill with dark text.
 * The hover color must be restated — the base .eds-btn:hover sets color: #fff. */
.eds-btn--secondary {
    background: var(--eds-yellow-200);
    color: var(--eds-text-primary);
}

.eds-btn--secondary:hover {
    background: var(--eds-yellow-300);
    color: var(--eds-text-primary);
}

/* ── Module 1: Session Finder ─────────────────────────────────────────────── */

.eds-session-finder {
    background: #fff;
    padding: 48px 0 72px;
}

.eds-session-finder__heading {
    font: 500 36px/44px var(--eds-font);
    color: var(--eds-text-primary);
    text-align: center;
    margin: 0 0 24px;
}

.eds-finder-card {
    background: #fff;
    border: 1px solid var(--eds-border-soft);
    border-radius: var(--eds-radius-l);
    box-shadow: var(--eds-shadow-md);
    padding: 28px 32px;
    max-width: 940px;
    margin: 0 auto;
}

.eds-finder-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font: 400 20px/2 var(--eds-font);
    color: var(--eds-text-primary);
}

.eds-sentence-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font: 600 18px/28px var(--eds-font);
    border-radius: var(--eds-radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 140ms ease;
}

.eds-sentence-pill.is-active {
    color: var(--eds-blue-400);
    background: var(--eds-blue-100);
    border: 1.5px solid var(--eds-blue-300);
}

.eds-sentence-pill.is-set {
    color: var(--eds-blue-400);
    background: #fff;
    border: 1.5px solid var(--eds-blue-300);
}

.eds-sentence-pill.is-muted {
    color: var(--eds-text-muted);
    background: #fff;
    border: 1.5px solid var(--eds-border-soft);
}

.eds-sentence-pill__caret {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 140ms ease;
}

.eds-sentence-pill.is-active .eds-sentence-pill__caret {
    transform: rotate(180deg);
}

.eds-finder-clear {
    font: 600 16px/26px var(--eds-font);
    color: var(--eds-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 4px;
}

.eds-finder-divider {
    border: none;
    border-top: 1px solid var(--eds-border-soft);
    margin: 22px 0 20px;
}

.eds-finder-chooser {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Skill tags — the design system's SkillTag, colored by the 10 skill families. */
.eds-skilltag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 16px/26px var(--eds-font);
    padding: 8px 18px;
    border: none;
    border-radius: var(--eds-radius-pill);
    cursor: pointer;
    background: var(--eds-skill-light);
    color: var(--eds-skill-dark);
    transition: transform 140ms ease;
}

.eds-skilltag:hover {
    transform: scale(1.05);
}

.eds-skilltag__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--eds-skill-dark);
}

.eds-skilltag.is-solid {
    background: var(--eds-skill-dark);
    color: #fff;
    transform: scale(1.05);
}

.eds-skilltag.is-solid .eds-skilltag__dot {
    background: #fff;
    opacity: 0.9;
}

/* Skill color families (design-system skill tokens: light "-1" / dark "-3", plus the
 * taxonomy's mid "secondary" tone used for goal-pill dots — see
 * mr/blocks/data/session-taxonomy.php), keyed by the feed's skill slug.
 * IN-APP / FUNCTIONAL ONLY — never for general branding. */
.eds-skill--academic-readiness      { --eds-skill-light: #DBF0EB; --eds-skill-dark: #32705F; --eds-skill-secondary: #6EC8B1; }
.eds-skill--adaptive-skills         { --eds-skill-light: #FFEAD8; --eds-skill-dark: #9E4904; --eds-skill-secondary: #FFB168; }
.eds-skill--communication           { --eds-skill-light: #F7E0FC; --eds-skill-dark: #77356D; --eds-skill-secondary: #DE97ED; }
.eds-skill--emotional-recognition   { --eds-skill-light: #DBF4FF; --eds-skill-dark: #005277; --eds-skill-secondary: #85C5F6; }
.eds-skill--friendship              { --eds-skill-light: #E6DAF6; --eds-skill-dark: #5D3A90; --eds-skill-secondary: #A77BE8; }
.eds-skill--problem-solving         { --eds-skill-light: #F1EECD; --eds-skill-dark: #7C730C; --eds-skill-secondary: #F3E168; }
.eds-skill--resiliency              { --eds-skill-light: #E1E1FF; --eds-skill-dark: #3E3F98; --eds-skill-secondary: #859DFF; }
.eds-skill--self-regulation         { --eds-skill-light: #E4F5CB; --eds-skill-dark: #3A570D; --eds-skill-secondary: #A7E18E; }
.eds-skill--situational-awareness   { --eds-skill-light: #FFF4DC; --eds-skill-dark: #936800; --eds-skill-secondary: #FAD171; }
.eds-skill--vocational              { --eds-skill-light: #FFE3DC; --eds-skill-dark: #A13015; --eds-skill-secondary: #FF9568; }

.eds-choicepill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 16px/26px var(--eds-font);
    color: var(--eds-blue-400);
    background: #fff;
    border: 1.5px solid var(--eds-blue-300);
    border-radius: var(--eds-radius-pill);
    padding: 8px 18px;
    cursor: pointer;
    transition: all 140ms ease;
}

.eds-choicepill:hover {
    background: var(--eds-blue-100);
}

.eds-choicepill.is-selected {
    color: #fff;
    background: var(--eds-blue-400);
    border-color: var(--eds-blue-400);
}

/* Goal pills carry their skill's family class for the dot only (library finder parity);
 * the dot shows the skill's mid "secondary" tone. */
.eds-choicepill__dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--eds-skill-secondary, var(--eds-skill-dark));
}

.eds-choicepill.is-selected .eds-choicepill__dot {
    background: #fff;
    opacity: 0.9;
}

/* Zero sessions for this option under the current selection: visible but inert. */
.eds-choicepill.is-disabled,
.eds-choicepill.is-disabled:hover {
    color: #A9B0B9;
    border-color: var(--eds-border-soft);
    background: #fff;
    cursor: default;
}

.eds-finder-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.eds-finder-helper {
    font: 400 14px/20px var(--eds-font);
    color: var(--eds-text-muted);
    text-align: center;
    margin: 12px 0 0;
}

/* ── Hero + Session Finder (combined hero) ────────────────────────────────── */
/* The hero anchor look — blue dotted background, headline, .button CTAs, white card
 * with backdrop tab, circular cutout, Bree Serif title and curved arrows — all comes
 * from .homepage-hero-section in mr/assets/css/style.css; this block only adapts the
 * finder internals to the hero card's centered flex-column layout. Typography inside
 * the card root stays --eds-font (token block above), except the Bree Serif title. */

/* 15% less headroom above the card title than the anchor card (marketing review,
 * 2026-08-24). The anchor sets the card padding from a deeply nested rule in
 * mr/assets/css/style.css, so this selector mirrors that chain (plus the block root)
 * to out-rank it; calc() keeps tracking the token as it changes per breakpoint. */
.homepage-hero-section.eds-hero-finder .mr-container .content-container .material-links-wrapper .material-links-container {
    padding-top: calc(var(--Padding-16XL) * 0.85);
}

@media (max-width: 1024px) {
    .homepage-hero-section.eds-hero-finder .mr-container .content-container .material-links-wrapper .material-links-container {
        padding-top: calc(var(--Padding-12XL) * 0.85);
    }
}

.eds-hero-finder .material-links-title-container {
    margin-bottom: var(--Margin-S, 8px);
}

.eds-hero-finder .eds-finder-sentence,
.eds-hero-finder .eds-finder-chooser {
    width: 100%;
    position: relative;
    z-index: 10;
}

.eds-hero-finder .eds-finder-divider {
    width: 100%;
    margin: 0;
}

.eds-hero-finder .eds-finder-cta-row {
    margin-top: var(--Margin-S, 8px);
}

.eds-hero-finder .eds-finder-helper {
    margin: 0;
}

/* Locked-in state (library finder behavior): once a level is chosen — including an
 * explicit "Any goal"/"Any age" — its sentence pill keeps the light blue fill so the
 * selection reads at a glance. The currently open pill is distinguished by the darker
 * border plus the flipped caret. */
.eds-hero-finder .eds-sentence-pill.is-set {
    color: var(--eds-blue-400);
    background: var(--eds-blue-100);
    border: 1.5px solid var(--eds-blue-300);
}

.eds-hero-finder .eds-sentence-pill.is-active {
    border-color: var(--eds-blue-400);
}

/* Goal/age chooser pills: neutral border and ink per the library finder screenshots,
 * keeping the marketing palette's blue for hover and the selected state. */
.eds-hero-finder .eds-choicepill {
    border-width: 1px;
    border-color: var(--eds-border-soft);
    color: var(--eds-text-primary);
}

.eds-hero-finder .eds-choicepill.is-selected {
    color: #fff;
    background: var(--eds-blue-400);
    border-color: var(--eds-blue-400);
}

.eds-hero-finder .eds-choicepill.is-disabled,
.eds-hero-finder .eds-choicepill.is-disabled:hover {
    color: #A9B0B9;
    border-color: var(--eds-border-soft);
    background: #fff;
}

/* Skill chooser pills match the live hero's material-link pills (mr/assets/css/style.css
 * .material-link-item-link + its per-skill color classes) instead of the finder's dotted
 * SkillTag: Lexend body type, skill-100 fill, 1px skill-300 border, neutral text. Hover
 * and the selected state (.is-solid) both use the skill-200 fill — the live pill's hover. */
.eds-hero-finder .eds-skilltag {
    font-family: var(--Body-M-Lexend-Regular-Family);
    font-size: var(--Body-M-Lexend-Regular-Size);
    font-weight: var(--Body-M-Lexend-Regular-Weight);
    line-height: var(--Body-M-Lexend-Regular-Line-Height);
    color: var(--Neutral-400);
    background-color: var(--Neutral-50);
    border: 1px solid var(--Neutral-200);
    padding: var(--Padding-S) var(--Padding-L);
    transition: all 0.3s;
}

.eds-hero-finder .eds-skilltag:hover,
.eds-hero-finder .eds-skilltag.is-solid {
    transform: none;
    color: var(--Neutral-400);
}

.eds-hero-finder .eds-skilltag__dot {
    display: none;
}

.eds-hero-finder .eds-skilltag.eds-skill--self-regulation {
    background-color: var(--wp--preset--color--olive-100-self-regulation, #E4F5CB);
    border-color: var(--wp--preset--color--olive-300-self-regulation, #3A570D);
}
.eds-hero-finder .eds-skilltag.eds-skill--self-regulation:hover,
.eds-hero-finder .eds-skilltag.eds-skill--self-regulation.is-solid {
    background-color: var(--wp--preset--color--olive-200-self-regulation, #ACDA68);
}

.eds-hero-finder .eds-skilltag.eds-skill--emotional-recognition {
    background-color: var(--wp--preset--color--sky-100-emotional-recognition, #DBF4FF);
    border-color: var(--wp--preset--color--sky-300-emotional-recognition, #005277);
}
.eds-hero-finder .eds-skilltag.eds-skill--emotional-recognition:hover,
.eds-hero-finder .eds-skilltag.eds-skill--emotional-recognition.is-solid {
    background-color: var(--wp--preset--color--sky-200-emotional-recognition, #63BAE2);
}

.eds-hero-finder .eds-skilltag.eds-skill--communication {
    background-color: var(--wp--preset--color--mouve-100-communication, #FCEFFF);
    border-color: var(--wp--preset--color--mouve-300-communication, #914284);
}
.eds-hero-finder .eds-skilltag.eds-skill--communication:hover,
.eds-hero-finder .eds-skilltag.eds-skill--communication.is-solid {
    background-color: var(--wp--preset--color--mouve-200-communication, #F6C7FF);
}

.eds-hero-finder .eds-skilltag.eds-skill--problem-solving {
    background-color: var(--wp--preset--color--lemon-100-problem-solving, #F1EECD);
    border-color: var(--wp--preset--color--lemon-300-problem-solving, #736C22);
}
.eds-hero-finder .eds-skilltag.eds-skill--problem-solving:hover,
.eds-hero-finder .eds-skilltag.eds-skill--problem-solving.is-solid {
    background-color: var(--wp--preset--color--lemon-200-problem-solving, #E4DA6C);
}

.eds-hero-finder .eds-skilltag.eds-skill--academic-readiness {
    background-color: var(--wp--preset--color--mint-100-academic-readiness, #E1F1ED);
    border-color: var(--wp--preset--color--mint-300-academic-readiness, #1B6F59);
}
.eds-hero-finder .eds-skilltag.eds-skill--academic-readiness:hover,
.eds-hero-finder .eds-skilltag.eds-skill--academic-readiness.is-solid {
    background-color: var(--wp--preset--color--mint-200-academic-readiness, #66CFB3);
}

.eds-hero-finder .eds-skilltag.eds-skill--situational-awareness {
    background-color: var(--wp--preset--color--green-100-situational-awareness, #E0EBB8);
    border-color: var(--wp--preset--color--green-300-situational-awareness, #3A570D);
}
.eds-hero-finder .eds-skilltag.eds-skill--situational-awareness:hover,
.eds-hero-finder .eds-skilltag.eds-skill--situational-awareness.is-solid {
    background-color: var(--wp--preset--color--green-200-situational-awareness, #ACDA68);
}

.eds-hero-finder .eds-skilltag.eds-skill--friendship {
    background-color: var(--wp--preset--color--purple-100-friendship, #F0E5FF);
    border-color: var(--wp--preset--color--purple-300-friendship, #5D3A90);
}
.eds-hero-finder .eds-skilltag.eds-skill--friendship:hover,
.eds-hero-finder .eds-skilltag.eds-skill--friendship.is-solid {
    background-color: var(--wp--preset--color--purple-200-friendship, #BF9EF0);
}

.eds-hero-finder .eds-skilltag.eds-skill--resiliency {
    background-color: var(--wp--preset--color--violet-100-resiliency, #E1E1FF);
    border-color: var(--wp--preset--color--violet-300-resiliency, #3E3F98);
}
.eds-hero-finder .eds-skilltag.eds-skill--resiliency:hover,
.eds-hero-finder .eds-skilltag.eds-skill--resiliency.is-solid {
    background-color: var(--wp--preset--color--violet-200-resiliency, #9799FF);
}

.eds-hero-finder .eds-skilltag.eds-skill--adaptive-skills {
    background-color: var(--wp--preset--color--orange-100-adaptive-skills, #FFEAD8);
    border-color: var(--wp--preset--color--orange-300-adaptive-skills, #9E4904);
}
.eds-hero-finder .eds-skilltag.eds-skill--adaptive-skills:hover,
.eds-hero-finder .eds-skilltag.eds-skill--adaptive-skills.is-solid {
    background-color: var(--wp--preset--color--orange-200-adaptive-skills, #FFA961);
}

.eds-hero-finder .eds-skilltag.eds-skill--vocational {
    background-color: var(--wp--preset--color--peach-100-vocational, #FFE3DC);
    border-color: var(--wp--preset--color--peach-300-vocational, #8C3F2C);
}
.eds-hero-finder .eds-skilltag.eds-skill--vocational:hover,
.eds-hero-finder .eds-skilltag.eds-skill--vocational.is-solid {
    background-color: var(--wp--preset--color--peach-200-vocational, #FF9176);
}

/* Below 768px the hero card goes full-bleed (anchor behavior); stack the chooser
 * pills full-width with centered labels, matching the live hero's material-link
 * pills, and open up the row gap to the anchor's list spacing. */
@media (max-width: 768px) {
    .eds-hero-finder .eds-finder-chooser {
        gap: var(--Margin-L, 14px);
    }

    .eds-hero-finder .eds-skilltag {
        width: 100%;
        justify-content: center;
    }

    .eds-hero-finder .eds-choicepill {
        width: 100%;
        text-align: center;
    }
}

/* ── Module 2: Sample Session ─────────────────────────────────────────────── */

.eds-sample-session {
    background: var(--eds-yellow-100);
    padding: 84px 32px;
}

.eds-sample-session__container {
    /* Matches the Module 3 carousels' content width (.mr-container: 1264px minus 32px
     * gutters) so the framed preview and the rows below align (change notes 2026-08-24). */
    max-width: 1200px;
    margin: 0 auto;
}

.eds-sample-session__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}

.eds-scallop {
    display: block;
    overflow: visible;
}

.eds-sample-session__title {
    font: 500 36px/44px var(--eds-font);
    color: var(--eds-text-primary);
    margin: 0;
}

.eds-sample-session__lede {
    font: 400 20px/30px var(--eds-font);
    color: var(--eds-text-body);
    margin: 0;
    max-width: 620px;
}

/* Clickability hint (added 2026-08-25): Bree Serif line with the hero finder's curved
 * arrows, pointing at the framed session below. JS adds .is-waiting at init and .is-shown
 * when the frame first enters the viewport; without JS the hint simply renders visible.
 * Bree Serif is already loaded site-wide (mr/inc/assets.php). */
.eds-session-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    /* The header's 32px bottom margin sits above; -6px nets 26px over / 28px under. */
    margin: -6px 0 28px;
}

.eds-session-hint__text {
    font-family: "Bree Serif", Georgia, serif;
    font-size: 20px;
    line-height: 1.3;
    color: var(--eds-blue-400);
    margin: 0;
    text-align: center;
    /* Sized to hold one line down to the 980px breakpoint (approved 2026-08-25). */
    white-space: nowrap;
}

.eds-session-hint__arrow {
    display: flex;
    align-items: center;
    transform: translateY(28%);
}

.eds-session-hint__arrow svg {
    display: block;
}

.eds-session-hint.is-waiting {
    opacity: 0;
    transform: translateY(10px);
    /* Transition lives on the before-change state so adding .is-shown always interpolates. */
    transition: opacity 500ms ease, transform 500ms ease;
}

.eds-session-hint.is-shown {
    opacity: 1;
    transform: none;
}

/* Dark tablet bezel around the session preview (change notes 2026-08-24). Shadow is the
 * design-system token --eds-shadow-lg — token shadows only, no custom shadows. */
.eds-session-frame {
    position: relative;
    background: #1E2A3A;
    padding: 20px;
    border-radius: 38px;
    box-shadow: var(--eds-shadow-lg);
}

/* Decorative hardware tabs on the top-left edge, echoing the video-frame reference art. */
.eds-session-frame__tab {
    position: absolute;
    top: -6px;
    height: 10px;
    border-radius: 5px;
    background: #0B1B2E;
}

.eds-session-frame__tab--wide {
    left: 44px;
    width: 44px;
}

.eds-session-frame__tab--narrow {
    left: 100px;
    width: 30px;
}

.eds-session-card-frame {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
}

.eds-session-banner {
    background: #C9A7E8;
    padding: 26px 32px;
}

.eds-session-banner__badge {
    display: inline-block;
    background: #5B2E86;
    color: #fff;
    font: 700 14px/20px var(--eds-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 8px;
}

.eds-session-banner__title {
    font: 700 44px/1.1 var(--eds-font);
    color: var(--eds-text-primary);
    margin: 14px 0 0;
}

/* Teal stepper with connectors */
.eds-stepper {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--eds-border-soft);
    counter-reset: none;
    overflow-x: auto;
    /* Breathing room when Next/Back scrolls the stepper to the top of the viewport. */
    scroll-margin-top: 24px;
}

/* The legacy child-theme stylesheet (.wrapper li rules, assets/css/style.css) adds
 * padding-left and margin-bottom to every list item; either one shifts the circles off
 * the 108px-column math below and opens a gap between connector and circle — zero both.
 * (.eds-stepper .eds-stepper__item out-ranks the legacy .wrapper ol li selector.) */
.eds-stepper .eds-stepper__item {
    display: flex;
    align-items: flex-start;
    flex: 1 0 auto;
    padding: 0;
    margin: 0;
}

/* The last item has no trailing connector, so letting it grow just piles empty space
 * after "Extend" and pushes the whole timeline off-center. Pin it to its content width;
 * the connector-bearing items absorb the growth and the row reads centered. */
.eds-stepper__item:last-child {
    flex: 0 0 auto;
}

.eds-stepper__item:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--eds-teal-line);
    border-radius: 2px;
    margin-top: 25px;
    /* The tab column is 108px with the 52px circle centered, leaving 28px of empty column
     * on each side; pull the connector under both neighbors so it meets each circle's edge
     * directly (marketing review 2026-08-24). min-width covers the 56px of negative margin
     * plus a 24px visible line, so the columns never collapse into each other when the
     * stepper scrolls at narrow widths. */
    min-width: 80px;
    margin-left: -28px;
    margin-right: -28px;
}

/* Keeps the circle painting above the connector where they meet. */
.eds-stepper__circle {
    position: relative;
}

.eds-stepper__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 108px;
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--eds-font);
}

.eds-stepper__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eds-teal-circle);
    border: 2px solid var(--eds-teal-line);
    color: var(--eds-teal-icon);
    transition: all 160ms ease;
}

/* Hover/focus affordance: the circle grows slightly (its transition animates this),
 * signaling every step is clickable. */
.eds-stepper__tab:hover .eds-stepper__circle,
.eds-stepper__tab:focus-visible .eds-stepper__circle {
    transform: scale(1.1);
}

.eds-stepper__item.is-active .eds-stepper__circle {
    background: var(--eds-teal-deep);
    border-color: var(--eds-teal-deep);
    color: #fff;
}

/* One-time attention pulse (added 2026-08-25): when the framed session first enters the
 * viewport each circle pulses once in sequence (330ms apart, timed in session-modules.js)
 * to show the steps are clickable. Ring color is the teal icon tone fading out. */
@keyframes eds-step-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(44, 140, 166, 0.55); }
    55%  { transform: scale(1.22); box-shadow: 0 0 0 12px rgba(44, 140, 166, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(44, 140, 166, 0); }
}

.eds-stepper__item.is-pulsing .eds-stepper__circle {
    animation: eds-step-pulse 450ms ease-in-out;
}

/* JS also skips the sequence under reduced motion; this covers the hint's fade too. */
@media (prefers-reduced-motion: reduce) {
    .eds-stepper__item.is-pulsing .eds-stepper__circle {
        animation: none;
    }

    .eds-session-hint.is-waiting {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.eds-stepper__label {
    font: 700 16px/1.2 var(--eds-font);
    color: var(--eds-text-primary);
    text-align: center;
    white-space: nowrap;
}

.eds-stepper__item.is-active .eds-stepper__label {
    color: var(--eds-teal-deep);
}

.eds-stepper__time {
    font: 400 14px/20px var(--eds-font);
    color: var(--eds-text-muted);
}

.eds-sample-session__panels {
    padding: 32px;
}

.eds-step-panel__title {
    font: 500 32px/40px var(--eds-font);
    color: var(--eds-teal-deep);
    margin: 0 0 20px;
}

.eds-step-panel__helper {
    font: 400 18px/28px var(--eds-font);
    color: var(--eds-text-muted);
    margin: -14px 0 20px;
}

/* Warm Up */
.eds-warmup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.eds-warmup-card {
    border: 1.5px solid var(--eds-teal-card);
    border-radius: var(--eds-radius-m);
    padding: 16px;
}

.eds-warmup-card__category {
    display: block;
    font: 700 18px/28px var(--eds-font);
    color: var(--eds-text-primary);
    margin-bottom: 12px;
}

.eds-media {
    position: relative;
    border-radius: var(--eds-radius-s);
    overflow: hidden;
    background: var(--eds-text-primary);
}

.eds-media video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.eds-media__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--eds-teal-deep);
    color: #fff;
    font: 700 14px/20px var(--eds-font);
    padding: 5px 11px;
    border-radius: 8px;
    pointer-events: none;
}

.eds-media__duration {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(1, 22, 51, 0.8);
    color: #fff;
    font: 600 14px/20px var(--eds-font);
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
}

/* Centered play overlay (injected by session-modules.js): clicking the play button starts playback.
 * Hidden with the badges once playback begins. */
.eds-media__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--eds-teal-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--eds-shadow-md);
    transition: transform 140ms ease, background 140ms ease;
}

.eds-media__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #08323d;
}

.eds-media.is-playing .eds-media__badge,
.eds-media.is-playing .eds-media__duration,
.eds-media.is-playing .eds-media__play {
    display: none;
}

.eds-warmup-card__name {
    font: 700 18px/28px var(--eds-font);
    color: var(--eds-text-primary);
    margin: 12px 0 0;
}

/* Session Opener */
.eds-notepad {
    position: relative;
    background: var(--eds-yellow-100);
    background-image: repeating-linear-gradient(var(--eds-yellow-100) 0 39px, rgba(12, 74, 90, 0.10) 39px 40px);
    border-radius: var(--eds-radius-l);
    padding: 26px 30px;
    margin-bottom: 20px;
}

.eds-notepad__label {
    font: 700 18px/28px var(--eds-font);
    color: var(--eds-teal-deep);
    border-bottom: 3px solid var(--eds-teal-deep);
    padding-bottom: 3px;
}

.eds-notepad__question {
    font: 600 32px/1.3 var(--eds-font);
    color: var(--eds-text-primary);
    margin: 30px 0 22px;
    max-width: 82%;
}

.eds-notepad__selby {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 96px;
    height: auto;
}

.eds-keyterms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.eds-keyterm-card {
    border: 2px solid var(--eds-teal-card);
    border-radius: var(--eds-radius-l);
    padding: 20px 22px;
}

.eds-keyterm-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--eds-blue-100);
    color: var(--eds-teal-deep);
    font: 700 14px/20px var(--eds-font);
    padding: 5px 12px;
    border-radius: var(--eds-radius-pill);
}

.eds-keyterm-card__title {
    font: 500 24px/28px var(--eds-font);
    color: var(--eds-text-primary);
    margin: 14px 0 8px;
}

.eds-keyterm-card__definition {
    font: 400 18px/28px var(--eds-font);
    color: var(--eds-text-body);
    margin: 0;
}

/* Core Material — full-bleed 16:9 player spanning the panel, no stage or inlay
 * (marketing review 2026-08-24). */
.eds-media--core {
    border-radius: var(--eds-radius-m);
}

.eds-core-below {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 22px;
    align-items: start;
}

.eds-check-card {
    background: var(--eds-blue-100);
    border: 2px solid var(--eds-teal-card);
    border-radius: var(--eds-radius-l);
    padding: 18px 20px;
}

.eds-check-card__head {
    font: 400 18px/28px var(--eds-font);
    margin: 0 0 12px;
}

.eds-check-card__head b {
    color: var(--eds-text-primary);
    font-size: 19px;
}

.eds-check-card__head span {
    color: var(--eds-text-muted);
}

.eds-check-card__row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.eds-check-card__selby {
    width: 62px;
    height: auto;
    flex: 0 0 auto;
}

.eds-check-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.eds-core-description {
    font: 400 18px/28px var(--eds-font);
    color: var(--eds-text-body);
}

.eds-core-description p {
    margin: 0;
}

/* Practice */
.eds-practice-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eds-practice-card {
    border: 2px solid var(--eds-teal-card);
    border-radius: var(--eds-radius-l);
    padding: 20px 22px;
}

.eds-practice-card p,
.eds-practice-card__body {
    font: 700 18px/1.5 var(--eds-font);
    color: var(--eds-text-primary);
    margin: 0;
}

.eds-practice-card__chip {
    display: inline-block;
    font: 700 14px/20px var(--eds-font);
    padding: 4px 14px;
    border-radius: var(--eds-radius-pill);
    margin-bottom: 12px;
}

.eds-practice-card__chip--discussion {
    background: var(--eds-blue-100);
    color: var(--eds-teal-deep);
}

.eds-practice-card__chip--roleplay {
    background: #DCEFC8;
    color: #4B7A2B;
}

.eds-practice-card__chip--minigame {
    background: #FBE6B6;
    color: #9A6B12;
}

/* Extend */
.eds-extend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

/* Full-bleed activity thumbnail with the actions overlaid near the bottom (marketing
 * review 2026-08-24). The gradient only shows if the image fails to load. */
.eds-extend-panel {
    position: relative;
    border-radius: var(--eds-radius-l);
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #6FD4E8, #33A9DA);
}

.eds-extend-panel__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eds-extend-panel__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 16px;
}

.eds-extend-panel__actions .eds-btn {
    box-shadow: var(--eds-shadow-md);
}

.eds-extend-description {
    font: 400 18px/28px var(--eds-font);
    color: var(--eds-text-body);
    margin: 0 0 18px;
}

.eds-extend-description p {
    margin: 0;
}

.eds-howto {
    border: 2px solid var(--eds-teal-card);
    border-radius: var(--eds-radius-l);
    padding: 18px 22px;
}

.eds-howto__head {
    font: 700 18px/28px var(--eds-font);
    color: var(--eds-teal-deep);
    margin: 0 0 8px;
}

/* Numbered steps (marketing review 2026-08-24). The legacy child-theme stylesheet
 * forces list-style: none onto every li, so the decimal is restated on the items with
 * a selector that out-ranks it. */
.eds-howto ol {
    margin: 0;
    padding-left: 22px;
    font: 400 18px/1.7 var(--eds-font);
    color: var(--eds-text-body);
    list-style: decimal outside;
}

.eds-sample-session .eds-howto ol li {
    list-style: decimal outside;
    padding-left: 4px;
}

/* Stepper nav */
.eds-sample-session__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    border-top: 1px solid var(--eds-border-soft);
}

.eds-step-back {
    font: 600 16px/26px var(--eds-font);
    padding: 11px 22px;
}

.eds-step-back:disabled {
    visibility: hidden;
}

.eds-step-next {
    font: 700 16px/26px var(--eds-font);
    padding: 12px 24px;
}

/* Closing banner — blue, per the approved design. Narrower than the frame on purpose:
 * capped at the session-finder card's 940px and centered, a deliberate wide-frame /
 * narrow-banner rhythm; single flex row so the CTA never drops below the text at
 * desktop widths (change notes 2026-08-24 — wrapping returns below 720px). */
.eds-sessions-banner {
    margin-top: 28px;
    background: var(--eds-blue-400);
    border-radius: var(--eds-radius-l);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.eds-sessions-banner__text {
    flex: 1 1 auto;
    max-width: 620px;
}

.eds-sessions-banner__title {
    font: 500 32px/40px var(--eds-font);
    color: #fff;
    margin: 0 0 6px;
}

.eds-sessions-banner__lede {
    font: 400 20px/30px var(--eds-font);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.eds-sessions-banner__cta {
    font: 700 18px/28px var(--eds-font);
    padding: 15px 30px;
    white-space: nowrap;
}

/* ── Module 3: Popular Sessions ───────────────────────────────────────────── */

.eds-popular-sessions {
    background: #fff;
    padding: 84px 0;
}

.eds-popular-sessions__heading {
    font: 500 40px/48px var(--eds-font);
    color: var(--eds-text-primary);
    text-align: center;
    margin: 0 0 56px;
}

.eds-session-row {
    margin-bottom: 56px;
}

/* 16px margin + the track's net 8px shadow padding = 24px visible title→cards gap. */
.eds-session-row__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.eds-session-row__title {
    font: 500 24px/32px var(--eds-font);
    color: var(--eds-text-primary);
    margin: 0;
}

/* flex-end (with the header also flex-end) bottom-aligns the see-all link's text with
 * the row title's text; centering left the link floating mid-height of the arrows. */
.eds-session-row__aside {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.eds-session-row__see-all {
    font: 600 16px/26px var(--eds-font);
    color: var(--eds-blue-400);
    text-decoration: underline;
    white-space: nowrap;
}

.eds-session-row__arrows {
    display: flex;
    gap: 8px;
}

/* Round paging buttons (30px circles — 25% down from the spec's original 40px — with
 * flex-centered SVG chevrons). The explicit padding/flex exist because Divi's customizer
 * injects a bare `button { padding: 1em 3em }` rule that otherwise warps these into ovals. */
.eds-carousel__arrow {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--eds-border-soft);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eds-text-muted);
    cursor: pointer;
    line-height: 0;
}

.eds-carousel__arrow svg {
    display: block;
}

.eds-carousel__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Shell around the scrolling track. flow-root keeps the track's negative vertical margins
 * from collapsing through, so the card strip sits at a known 8px inset from the shell's top
 * and bottom — the edge fades below anchor to that. */
.eds-carousel {
    position: relative;
    display: flow-root;
}

/* Edge fades: when a card is clipped by the track's scroll edge (32px outside the shell,
 * where the track's negative margin puts it), a transparent→white gradient over the
 * outermost 30px (10% of the 300px card) signals the row continues. pointer-events: none
 * keeps the clipped card underneath clickable. JS toggles the modifiers on scroll. */
.eds-carousel::before,
.eds-carousel::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 30px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.eds-carousel::before {
    left: -32px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}

.eds-carousel::after {
    right: -32px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.eds-carousel--fade-left::before,
.eds-carousel--fade-right::after {
    opacity: 1;
}

/* The track scrolls, so card hover shadows (--eds-shadow-lg: 0 16px 48px) get clipped at
 * its box edges. The padding gives the shadows room inside the scroll area and the equal
 * negative margins cancel it out of the layout — card positions and the spacing between
 * rows/sections stay exactly as before (net 8px vertical, 0 horizontal, as previously). */
.eds-carousel__track {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: -28px -32px -56px;
    padding: 36px 32px 64px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.eds-carousel__track::-webkit-scrollbar {
    display: none;
}

/* display:flex (not list-item) lets each li stretch to the track's tallest card, so
 * every card in a row shares one height; shorter titles just get more whitespace. */
.eds-carousel__item {
    display: flex;
    flex: 0 0 auto;
    width: 300px;
}

/* The legacy child-theme stylesheet (.wrapper ul li, assets/css/style.css) paints a black
 * dot on every list item and indents it 0.8em — that indent is what pushed the first card
 * out of line with the row title. Suppress both on carousel cards. */
.eds-popular-sessions .eds-carousel__item {
    padding-left: 0;
    margin-bottom: 0;
}

.eds-popular-sessions .eds-carousel__item::before {
    content: none;
}

.eds-session-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
    background: #fff;
    border: 1px solid var(--eds-border-soft);
    border-radius: var(--eds-radius-l);
    overflow: hidden;
    box-shadow: var(--eds-shadow-sm);
    cursor: pointer;
    font-family: var(--eds-font);
    color: var(--eds-text-primary);
    transition: all 180ms ease;
}

.eds-session-card:hover {
    box-shadow: var(--eds-shadow-lg);
    transform: translateY(-4px);
}

.eds-session-card__media {
    position: relative;
    display: block;
    height: 168px;
    background: var(--eds-blue-100);
    overflow: hidden;
}

.eds-session-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eds-session-card__badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    font: 700 14px/20px var(--eds-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--eds-blue-400);
    border-radius: var(--eds-radius-s);
    padding: 5px 11px;
}

.eds-session-card__badge--s2 {
    background: #E8833A;
}

.eds-session-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 16px 18px 18px;
}

.eds-session-card__title {
    font: 700 18px/1.3 var(--eds-font);
    color: var(--eds-text-primary);
    /* Two-line floor keeps card heights identical across all three carousels even when
     * a row's titles all fit on one line. */
    min-height: calc(2 * 1.3em);
}

.eds-session-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.eds-tagpill {
    font: 500 14px/20px var(--eds-font);
    color: var(--eds-text-body);
    background: #fff;
    border: 1px solid var(--eds-border-soft);
    border-radius: var(--eds-radius-pill);
    padding: 4px 12px;
    white-space: nowrap;
}

.eds-popular-sessions__view-all {
    display: flex;
    justify-content: center;
    margin: 8px 0 0;
}

/* ── Curriculum Features grid ─────────────────────────────────────────────── */

.eds-curriculum-features {
    background: var(--eds-yellow-100);
    padding: 84px 0;
}

.eds-curriculum-features__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 48px;
}

.eds-curriculum-features__title {
    font: 500 36px/44px var(--eds-font);
    color: var(--eds-text-primary);
    margin: 0;
}

.eds-curriculum-features__lede {
    font: 400 20px/30px var(--eds-font);
    color: var(--eds-text-body);
    margin: 0;
    max-width: 560px;
}

.eds-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Design-system Card (tone page, interactive): paper shadow, generous rounding, hover lift. */
.eds-feature-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #fff;
    border-radius: var(--eds-radius-l);
    padding: 32px;
    box-shadow: var(--eds-shadow-md);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.eds-feature-card:hover {
    box-shadow: var(--eds-shadow-lg);
    transform: translateY(-3px);
}

.eds-feature-card__tile {
    width: 76px;
    height: 76px;
    border-radius: var(--eds-radius-m);
    background: var(--eds-blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eds-feature-card__tile img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.eds-feature-card__title {
    font: 500 24px/28px var(--eds-font);
    color: var(--eds-text-primary);
    margin: 0;
}

.eds-feature-card__body {
    font: 400 16px/26px var(--eds-font);
    color: var(--eds-text-body);
    margin: 0;
}

/* ── The gate lightbox ("Get this session") ───────────────────────────────── */

body.eds-gate-open {
    overflow: hidden;
}

.eds-gate-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(1, 22, 51, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.eds-gate-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--eds-shadow-lg);
    padding: 36px 36px 30px;
    box-sizing: border-box; /* keep the 36px side padding inside max-width on narrow viewports */
    width: 550px; /* 440px + 25%, readability request (marketing 2026-08-25) */
    max-width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* Top-right close. Explicit padding/size because Divi's customizer injects a bare
 * `button { padding: 1em 3em }` rule that otherwise inflates the button and drags the
 * glyph out of the corner. */
.eds-gate-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--eds-text-muted);
    cursor: pointer;
    transition: color 140ms ease;
}

.eds-gate-x:hover {
    color: var(--eds-blue-400);
}

.eds-gate-heading {
    font: 500 30px/38px var(--eds-font);
    color: var(--eds-blue-400);
    margin: 0 0 18px;
}

.eds-gate-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eds-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eds-field__label {
    font: 700 18px/28px var(--eds-font);
    color: var(--eds-text-primary);
}

.eds-field input,
.eds-field select {
    width: 100%;
    box-sizing: border-box;
    font: 400 18px/28px var(--eds-font);
    color: var(--eds-text-primary);
    background: #fff;
    border: 1px solid var(--eds-border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    outline: none;
}

.eds-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%23011633' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.eds-gate-submit {
    background: var(--eds-blue-400);
    color: #fff;
    border: none;
    border-radius: var(--eds-radius-pill);
    padding: 16px 28px;
    font: 700 18px/28px var(--eds-font);
    cursor: pointer;
    margin-top: 4px;
    transition: background 160ms ease;
}

.eds-gate-submit:hover {
    background: var(--eds-blue-500);
}

.eds-gate-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Animated loading circle while the gate request runs and (on success) the browser
 * follows the redirect. Toggled by session-modules.js via .is-loading. */
.eds-gate-submit.is-loading::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    vertical-align: -3px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: eds-spin 700ms linear infinite;
}

@keyframes eds-spin {
    to { transform: rotate(360deg); }
}

/* Patience note under the submit button — shown only while the gate request runs
 * (session-modules.js toggles [hidden] alongside .is-loading). The new-contact path
 * can legitimately take 10s+, so the wait needs an explanation. */
.eds-gate-patience {
    font: 400 15px/24px var(--eds-font);
    color: var(--eds-text-muted);
    margin: 0;
    text-align: center;
}

.eds-gate-fineprint {
    font: 400 16px/26px var(--eds-font);
    color: var(--eds-text-muted);
    margin: 0;
    text-align: center;
}

.eds-gate-fineprint a {
    color: var(--eds-blue-400);
}

/* Informational (blue) inline box, never an error treatment — district-gate rule. */
.eds-gate-message {
    display: none;
    background: var(--eds-blue-100);
    border: 1px solid var(--eds-blue-200);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.eds-gate-message.is-visible {
    display: block;
}

.eds-gate-message__head {
    font: 600 16px/26px var(--eds-font);
    margin: 0 0 4px;
}

.eds-gate-message__body {
    font: 400 14px/20px var(--eds-font);
    margin: 0;
}

.eds-gate-offramp {
    display: inline-block;
    margin-top: 8px;
    font: 600 14px/20px var(--eds-font);
    color: var(--eds-text-primary);
}

/* Outcome states (walled / existing account / error) */
.eds-eyebrow {
    display: block;
    font: 600 12px/18px var(--eds-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--eds-blue-400);
    margin-bottom: 6px;
}

.eds-gate-lede {
    font: 400 18px/28px var(--eds-font);
    color: var(--eds-text-body);
    margin: 0 0 20px;
}

.eds-gate-points {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font: 400 16px/1.8 var(--eds-font);
    color: var(--eds-text-body);
}

/* Brand checkmark instead of bullets — same check path as the quote generators'
 * check-blue.svg, stroke swapped to blue-400 (#00409B). */
.eds-gate-points li {
    position: relative;
    padding-left: 28px;
}

.eds-gate-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 13px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none'><path d='M2 6.32L6.78947 11L16 2' stroke='%2300409B' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / contain;
}

.eds-gate-pilot,
.eds-gate-login {
    display: flex;
    width: 100%;
    margin-bottom: 16px;
}

.eds-gate-quiet {
    text-align: center;
    font: 400 14px/20px var(--eds-font);
    margin: 8px 0 0;
}

.eds-gate-quiet a {
    color: var(--eds-text-muted);
    text-decoration: underline;
}

.eds-gate-continue {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    font: 400 14px/20px var(--eds-font);
    color: var(--eds-text-muted);
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}

.eds-gate-retry {
    display: flex;
    width: 100%;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media screen and (max-width: 980px) {
    .eds-session-finder__heading {
        font: 500 28px/36px var(--eds-font);
    }

    .eds-finder-sentence {
        font-size: 18px;
    }

    .eds-warmup-grid,
    .eds-keyterms,
    .eds-core-below,
    .eds-extend-grid {
        grid-template-columns: 1fr;
    }

    .eds-sample-session {
        padding: 56px 16px;
    }

    .eds-session-hint {
        gap: 14px;
    }

    .eds-session-hint__text {
        font-size: 18px;
    }

    .eds-session-hint__arrow svg {
        width: 36px;
        height: 30px;
    }

    .eds-sample-session__panels {
        padding: 20px;
    }

    .eds-session-banner__title {
        font: 700 32px/1.15 var(--eds-font);
    }

    .eds-notepad__question {
        font: 600 24px/1.3 var(--eds-font);
        max-width: 100%;
    }

    /* The floating mascot overlaps the full-width question on narrow screens — hide it. */
    .eds-notepad__selby {
        display: none;
    }

    .eds-popular-sessions__heading {
        font: 500 30px/38px var(--eds-font);
    }

    .eds-curriculum-features__title {
        font: 500 28px/36px var(--eds-font);
    }

    .eds-features-grid {
        grid-template-columns: 1fr;
    }

    /* No align-items override: the base rule's flex-end keeps the see-all text
     * bottom-aligned with the title while the header still fits on one line, and
     * has no effect once it wraps (each flex line holds a single item). */
    .eds-session-row__header {
        flex-wrap: wrap;
    }

    .eds-carousel__item {
        width: 260px;
    }
}

/* Session-frame responsive behavior (change notes 2026-08-24). */
@media screen and (max-width: 768px) {
    /* Thinner bezel so it doesn't eat into content on small screens. */
    .eds-session-frame {
        padding: 12px;
        border-radius: 26px;
    }
}

@media screen and (max-width: 720px) {
    /* Below the banner's no-wrap threshold the CTA stacks under the text again. */
    .eds-sessions-banner {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 640px) {
    /* Decorative hardware tabs crowd the layout at phone sizes. */
    .eds-session-frame__tab {
        display: none;
    }

    /* Two flanking arrows crowd a phone column: stack the text over one angled arrow
     * and let the line wrap. */
    .eds-session-hint {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 22px;
    }

    .eds-session-hint__text {
        font-size: 16px;
        white-space: normal;
        max-width: 300px;
    }

    .eds-session-hint__arrow--left {
        display: none;
    }

    .eds-session-hint__arrow--right {
        transform: none;
    }

    .eds-session-hint__arrow--right svg {
        width: 34px;
        height: 28px;
        transform: rotate(28deg);
    }
}

/* ── Module: Trial CTA Subfooter ("Get access to the full curriculum") ────── */

/* The section paints the pastel Features surface behind the band so the 72px top
 * curves reveal yellow, not the page background. The band itself is full-bleed. */
.eds-trial-cta {
    background: var(--eds-yellow-100);
}

.eds-trial-cta__band {
    background: var(--eds-blue-400);
    border-radius: 72px 72px 0 0;
    overflow: hidden;
    padding: 72px 32px 0;
}

.eds-trial-cta__content {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.eds-trial-cta .wave-line {
    width: 96px;
    display: block;
}

.eds-trial-cta .wave-line svg {
    display: block;
    width: 100%;
    height: auto;
}

.eds-trial-cta__title {
    font: 500 36px/44px var(--eds-font);
    color: #fff;
    margin: 0;
}

.eds-trial-cta__title em {
    font-style: normal;
    color: var(--eds-yellow-300);
}

.eds-trial-cta__lede {
    font: 400 20px/30px var(--eds-font);
    color: var(--eds-blue-200);
    max-width: 560px;
    margin: 0;
}

/* Bottom-flush with the footer edge: the band has no bottom padding and the image
 * art is already cropped at its bottom edge. */
.eds-trial-cta__characters {
    display: block;
    width: min(880px, 92vw);
    height: auto;
    margin: 24px auto 0;
}

@media screen and (max-width: 768px) {
    .eds-trial-cta__band {
        border-radius: 44px 44px 0 0;
        padding-top: 56px;
    }
}

@media screen and (max-width: 480px) {
    .eds-trial-cta__title {
        font: 500 28px/36px var(--eds-font);
    }

    .eds-trial-cta__button {
        /* border-box so width:100% includes the pill's 36px side padding; the 18px
         * face keeps the label on one line inside the 320px cap. */
        box-sizing: border-box;
        width: 100%;
        max-width: 320px;
        font: 600 18px/28px var(--eds-font);
    }
}