/* ========================================
   AAES — AI for Africa's Education Summit — Landing Page
   Rebuilt to match the AAES Figma design (blue/cream/navy/mint/pink
   palette, pixel-block wordmark + icons) instead of the theme's
   default dark UI. Scoped entirely to .aaes-page so nothing else on
   the site is affected.
   The registration FORM itself (question types, fork, success state)
   is styled in dynamic-form.css and shared with /ai-survey — do not
   duplicate those rules here. The modal SHELL styles live at the
   bottom of this file, restyled to match AAES but keeping the same
   IDs/classes summit.js already wires up.
   ======================================== */

/* Absans — confirmed via Figma inspect, self-hosted like Eudoxus Sans
   (Collletttivo, SIL OFL, single Regular 400 weight only). */
@font-face {
    font-family: "Absans";
    src: url("../fonts/Absans-Regular.woff2") format("woff2"),
         url("../fonts/Absans-Regular.woff") format("woff"),
         url("../fonts/Absans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.aaes-page {
    /* Exact brand colors — pulled from the Figma file via its REST API
       (fills on Hero/About/Activities/Speakers/Schedule nodes), not
       eyeballed from a screenshot. */
    --aaes-blue: #1255fb;
    --aaes-blue-deep: #0d43cc;
    --aaes-cream: #fffae3;
    --aaes-mint: #d1fefb;
    --aaes-pink: #ffa2fb;
    --aaes-navy: #01123c;
    --aaes-white: #ffffff;
    --aaes-black: #000000;
    --aaes-font-display: "Absans", "Unbounded", sans-serif;
    --aaes-font-body: "Outfit", sans-serif;

    background: var(--aaes-blue);
    color: var(--aaes-white);
    font-family: var(--aaes-font-display);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Figma frame is 1440px wide with a 64px gutter each side (1312px
   content area). max-width includes the padding (border-box) so it
   matches exactly once the viewport reaches 1440px. */
.aaes-container {
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 900px) {
    .aaes-container {
        padding: 0 64px;
    }
}

/* Pixel-noise background texture used on every blue section — the real
   AAES pattern tile, rendered small and faint as a separate layer (a
   pseudo-element, not the section's own background) so opacity fades
   only the texture, never the section's actual blue or its content. */
.aaes-pixel-bg {
    position: relative;
    background-color: var(--aaes-blue);
}

/* Pre-composited hex-offset repeat tile (built from the exact Figma
   pattern-fill spec: scale 94%, spacing 22% x/y, tileType
   HORIZONTAL_HEXAGONAL, source node 87:5415 = pattern.svg) — a single
   background-repeat can't express the alternating-row offset on its
   own, so the two-row period is baked into the tile image itself. */
.aaes-pixel-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
    mix-blend-mode: soft-light;
    background-image: url("../images/pattern-tile.png");
    background-repeat: repeat;
    background-size: 60px 60px;
    /* Figma pattern fill is center/center-aligned within its shape, not
       anchored to the top-left corner — matches without a cut-off edge. */
    background-position: center;
}

/* -------------------------------------------------
   BUTTONS
   ------------------------------------------------- */
.aaes-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--aaes-font-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.4px;
    padding: 16px 20px;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 0;
    transition: all 0.15s ease;
    white-space: nowrap;
    /* The site-wide typography.css has a bare `a:hover` rule (underline +
       0.8 opacity) meant for inline text links. It wins on the hover
       state specifically because it carries both a pseudo-class AND an
       element selector, out-specificity-ing an un-hovered `.aaes-btn`
       class rule — this neutralizes it for every button variant. */
    text-decoration: none;
}

.aaes-btn:hover {
    text-decoration: none;
    opacity: 1;
}

.aaes-btn--mint {
    background: var(--aaes-mint);
    color: var(--aaes-black);
    border-color: var(--aaes-mint);
}

.aaes-btn--mint:hover {
    background: #b0fbf6;
    /* Explicit even though this variant already beats the global a:hover
       rule on specificity for background — color was never set here at
       all, so main.css's `a:hover{color:#007cba}` was free to apply. */
    color: var(--aaes-black);
}

.aaes-btn--outline-light {
    background: transparent;
    color: var(--aaes-cream);
    border-color: var(--aaes-cream);
}

.aaes-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--aaes-cream);
}

.aaes-btn--blue {
    background: var(--aaes-blue);
    color: var(--aaes-white);
    border-color: var(--aaes-blue);
}

.aaes-btn--blue:hover {
    background: var(--aaes-blue-deep);
    color: var(--aaes-white);
}

.aaes-btn--outline-blue {
    background: transparent;
    color: var(--aaes-blue);
    border-color: var(--aaes-blue);
}

.aaes-btn--outline-blue:hover {
    background: rgba(0, 87, 255, 0.06);
    color: var(--aaes-blue);
}

/* Smaller variant — topbar "Register for Free" (Figma: 16px/18px text,
   16px padding all round, vs. the 20px/23px hero + footer buttons). */
.aaes-btn--sm {
    font-size: 1rem;
    line-height: 1.125;
    letter-spacing: -0.64px;
    padding: 16px;
}

.aaes-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* At hero-button text size (20px) + 20px padding, "Learn more" and
   "Register to Attend" together overflow a phone-width container and
   wrap to two lines. Force one row and let both buttons share the
   width instead. */
@media (max-width: 600px) {
    .aaes-btn-row {
        flex-wrap: nowrap;
    }

    .aaes-btn-row .aaes-btn {
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.9375rem;
        padding: 14px 10px;
        letter-spacing: -0.3px;
    }
}

/* -------------------------------------------------
   TOP BAR
   ------------------------------------------------- */
.aaes-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 62px 0 0;
    flex-wrap: wrap;
}

/* Real exported asset (wordmark + caption + divider + "LAGOS 2026",
   all baked together at their true relative sizes, native 373x98) —
   replaces the earlier hand-measured text approximation entirely. */
.aaes-logo-lockup {
    display: block;
    height: 98px;
    width: auto;
    /* Figma: this group is 98 tall but its row is only 80 (Position
       Y:-18) — it visually overflows above the row on purpose. */
    margin-top: -18px;
}

/* Figma's mobile frame sizes this whole lockup down to 171px wide so
   it fits beside "Register for Free" on one row instead of wrapping. */
@media (max-width: 600px) {
    .aaes-logo-lockup {
        width: 171px;
        height: auto;
        margin-top: -8px;
    }
}

/* -------------------------------------------------
   HERO
   ------------------------------------------------- */
.aaes-hero {
    position: relative;
    z-index: 1;
    padding-bottom: 64px;
}

.aaes-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    /* align-items:center left a large empty strip above the pill on real
       viewports — the photo column renders ~150px taller than the text
       column, so centering the shorter one against the taller one pushed
       it down instead of keeping both flush with the row's top. */
    align-items: start;
    padding-top: 40px;
}

.aaes-hero__pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    /* Figma: no cornerRadius on this frame — the AAES system is blocky/
       square throughout (matches the pixel wordmark and buttons), not
       pill-rounded. */
    border-radius: 0;
    padding: 8px 12px;
    /* Mobile frame ("Frame 1321316531" / Description text) gives 14px /
       -0.03em, not the 16px/-0.48px guessed here before. */
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--aaes-white);
    margin-bottom: 24px;
}

.aaes-hero__title {
    font-family: var(--aaes-font-display);
    /* Mobile frame's title layer: 60px, line-height:100%, -0.06em — the
       old 2.5rem (40px) with no letter-spacing was never sourced from a
       mobile dump. Overridden back up at 900px/1440px below, same as
       before. */
    font-size: 60px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.06em;
    margin: 0 0 16px;
    color: var(--aaes-white);
}

.aaes-hero__title .aaes-accent {
    color: var(--aaes-pink);
}

.aaes-hero__subtitle {
    font-family: var(--aaes-font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: var(--aaes-white);
    max-width: 578px;
    /* Figma's "Featuring talks…" line under this is hidden (visible:
       false) in the actual file, so this is now the last text element
       before the button row — carries that block's 48px gap. */
    margin: 0 0 48px;
}

.aaes-hero__photo-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

/* The pink block is baked into hero-photo.png itself (photo + backdrop
   exported together from Figma) — just size and place the image. */
.aaes-hero__photo {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}

/* Below the 900px breakpoint the grid stacks to one column and the photo
   sits inside .aaes-container's own 24px side padding, inset instead of
   flush with the screen edges like the reference. Break it out of that
   padding on both sides so it's genuinely edge-to-edge — the bottom too
   (the photo is .aaes-hero's last element, so its own padding-bottom is
   what's leaving a gap there), but not the top: the gap above the photo,
   between it and the button row, stays as-is.

   This block must come AFTER the base .aaes-hero__photo rule above: same
   specificity, so max-width:none here only wins because it's later in
   source order — it silently lost to the base rule's max-width:420px for
   any viewport between 420-899px when this was positioned before it. */
@media (max-width: 899px) {
    /* An explicit calc() width, not a bare negative margin on a stretched
       grid item — that relies on the flex-in-grid stretch/flex-basis
       interaction, which measured inconsistently at narrow widths (e.g.
       350.875px instead of the expected 320px at a 320px viewport). This
       is deterministic: 100% resolves against the grid column's own
       content width regardless of this element's own margins. */
    .aaes-hero__photo-wrap {
        width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
    }

    .aaes-hero__photo {
        width: 100%;
        max-width: none;
    }

    .aaes-hero {
        padding-bottom: 0;
    }
}

@media (min-width: 900px) {
    .aaes-hero__grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 24px;
    }

    .aaes-hero__title {
        font-size: 3.2rem;
    }

    .aaes-hero__photo-wrap {
        justify-content: flex-end;
    }
}

/* At the Figma canvas width (1440), switch to its exact fixed-px
   layout: 578px text column, 78px gap, 720px photo column bleeding to
   the true right edge (no right gutter on the photo). */
@media (min-width: 1440px) {
    .aaes-hero__grid {
        grid-template-columns: 578px 720px;
        justify-content: space-between;
        gap: 78px;
    }

    .aaes-hero__title {
        font-size: 86px;
        line-height: 86px;
        letter-spacing: -5.16px;
    }

    /* The fixed-px columns (578 + 78 gap + 720) already sum to exactly
       container-width minus its own padding (578+78+720 = 1440-64,
       i.e. the 720 column's natural, unmargined right edge already
       lands flush on the container's true right edge with ZERO extra
       margin — confirmed empirically, an earlier -64px "cancel the
       padding" margin here was actually double counting and overshot
       the edge by 64px). .aaes-container is capped at max-width:1440px
       and centered, so on any viewport wider than that, only the
       container's own (100vw - 1440px)/2 centering margin needs
       canceling to reach the true browser edge. */
    .aaes-hero__photo-wrap {
        margin-right: calc(-1 * (100vw - 1440px) / 2);
    }

    .aaes-hero__photo {
        /* No cap — fills 100% of the wrap above, whose width now grows
           with the viewport via the bleed margin instead of stopping at
           a fixed 720px. */
        max-width: none;
    }

    .aaes-hero {
        padding-bottom: 101px;
    }

    .aaes-hero__grid {
        padding-top: 86px;
    }
}

/* -------------------------------------------------
   PARTNERS STRIP
   ------------------------------------------------- */
.aaes-partners {
    position: relative;
    z-index: 3;
    background: var(--aaes-white);
}

.aaes-partners__row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    row-gap: 16px;
}

/* Figma: this box is filled cream, full section height, and bleeds to
   the true left edge of the viewport — the separation from the white
   "Event Partners" side is the color change itself, not a border
   line. The ::before bleeds the fill left past the container's own
   padding without needing to know its exact (responsive) width.
   Figma's own "Desktop - 4" frame centers its content (align-items:
   center) with symmetric 24px/64px padding, not the left-aligned,
   right-only padding this used before. */
/* The cream ::before bleeds this box's BACKGROUND left to the true
   viewport edge, past .aaes-container's own 64px gutter — but without
   this margin, the box's own layout width (used for centering its
   content) still starts at that gutter, not the true edge. That left
   "An initiative of" centered ~32px right of the visible cream area's
   actual center. Extending the box itself to match the background
   fixes it — content now centers against the same span that's
   actually visible as cream. */
.aaes-partners__initiative {
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* This is the outer "Desktop - 4" frame's gap (32px), which never
       actually applied to anything since that frame only has one child
       in the dump. The label-to-logo spacing is really governed by the
       nested "Initiative section" frame, which specifies gap:8px. */
    gap: 8px;
    margin-left: -64px;
    padding: 24px 64px;
    flex-shrink: 0;
}

.aaes-partners__initiative::before {
    content: "";
    position: absolute;
    inset: 0;
    left: -9999px;
    background: var(--aaes-cream);
    z-index: -1;
}

.aaes-partners__initiative-label {
    font-family: var(--aaes-font-body);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--aaes-navy);
}

.aaes-partners__initiative img {
    height: 54px;
    width: auto;
}

/* Figma's "Title" layer is only 113px wide — well short of "Made
   possible In conjunction with" at 16px, meaning it's meant to wrap to
   two lines, not stay on one. Also corrected: font-family (was the
   display/heading font, should be the body font), font-size (was 20px,
   should be 16px), and letter-spacing (was a flat -1.2px, should be
   -0.02em ≈ -0.32px at this size). */
.aaes-partners__label {
    width: 113px;
    font-family: var(--aaes-font-body);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--aaes-navy);
    flex-shrink: 0;
}

/* Figma's "Partner logos container" is a plain packed flex row (gap:32,
   padding:12px 32px 12px 0) — no space-between distributing extra
   space, and no left padding since it sits right against the label. */
.aaes-partners__logos {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 12px 32px 12px 0;
    flex-wrap: wrap;
    flex: 1;
}

/* Every individual logo/crest in the dump measures ~55px tall (the DOT
   crest icon, the Faculty Logo cluster, the Unilag crest ellipse, the
   S.W.A.T mark — all land within a couple px of 55.18), not the 70px
   used before. Width is left to each logo's own aspect ratio rather
   than a shared max-width cap, since the sourced widths vary a lot
   per logo (the AI UniPod lockup alone is ~146px). */
.aaes-partners__logos img {
    height: 55px;
    width: auto;
    object-fit: contain;
}

/* The dump's "Frame 1321316574" (Google Educator Groups / S.W.A.T /
   Edline) is its own sub-group with justify-content:space-between and
   flex-grow:1 — unlike the rest of .aaes-partners__logos, which is a
   plain packed row. Without this, these three just pack left with a
   large empty gap trailing after Edline instead of spreading out to
   fill the row's remaining width. */
.aaes-partners__logos-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex: 1;
}

/* Separates the Unilag-affiliated logos (DOT, AI UniPod, Unilag crest)
   from the other event partners (Google Educator Groups, S.W.A.T,
   Edline). Figma's own divider ("Vector 25") is a hairline, not a
   filled bar — but the dump's literal 0.35px sub-pixel width rendered
   as barely visible on real screens (sub-1px borders anti-alias down
   to almost nothing). Bumped to a full 1px, which is what a Figma
   hairline actually maps to in CSS, at the same 50% opacity. */
.aaes-partners__divider {
    align-self: stretch;
    width: 0;
    border-left: 1px solid #000000;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Below the desktop breakpoint this row had no dedicated layout at
   all -- it just let the desktop flex row wrap on its own, which
   produced uneven space-between gaps and the label/logos landing in
   odd spots. Figma's own mobile frame stacks these: full-width cream
   initiative block on top, then the label centered underneath, then
   DOT/AI UniPod/Lagos State Government stacked in a single centered
   column, then a full-width horizontal divider, then Google Educator
   Groups/S.W.A.T/Edline as a row below it — reordered to S.W.A.T/
   Google Educator Groups/Edline on mobile specifically, matching the
   reference image (no CSS dump exists for this breakpoint, built from
   the screenshot directly). */
@media (max-width: 899px) {
    .aaes-partners__row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .aaes-partners__initiative {
        align-items: center;
        text-align: center;
        /* Cancel the desktop-only -64px fix above — the mobile row
           stacks full-width and centers itself, with a 24px (not 64px)
           container gutter, so that offset doesn't apply here. */
        margin-left: 0;
        padding: 24px 32px;
        margin-bottom: 32px;
    }

    .aaes-partners__initiative::before {
        left: -9999px;
        right: -9999px;
    }

    .aaes-partners__label {
        /* Desktop's 113px width forces a 2-line wrap that only makes
           sense next to the crowded desktop row — mobile has the full
           column width and the reference shows it on one line. */
        width: auto;
        text-align: center;
        margin-bottom: 24px;
    }

    .aaes-partners__logos {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 0 32px 32px;
    }

    /* Now horizontal (was the desktop vertical rule) and full-width via
       align-self:stretch, which resolves against the column's cross
       axis (width) here instead of height. */
    .aaes-partners__divider {
        border-left: none;
        border-top: 1px solid #000000;
        height: 0;
        width: auto;
    }

    /* Desktop fills remaining row width via flex:1 — mobile stacks
       this as its own full-width row instead. */
    .aaes-partners__logos-group {
        flex: none;
        width: 100%;
    }

    /* Reference shows S.W.A.T / Google Educator Groups / Edline on
       mobile, not desktop's Google Educator Groups / S.W.A.T / Edline
       order — reordered visually via `order` rather than changing the
       shared DOM (which desktop also reads). */
    .aaes-partners__logos-group img:nth-child(1) {
        order: 1;
    }

    .aaes-partners__logos-group img:nth-child(2) {
        order: 0;
    }

    .aaes-partners__logos-group img:nth-child(3) {
        order: 2;
    }
}


/* -------------------------------------------------
   ABOUT (collage + AAES wordmark)
   ------------------------------------------------- */
.aaes-about {
    position: relative;
    z-index: 1;
    padding: 64px 0;
}

@media (min-width: 900px) {
    .aaes-about {
        padding: 128px 0 64px;
    }
}

.aaes-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

/* Text block above the collage on mobile — the reference shows date/
   venue/wordmark/description first, then the photo cross below, the
   opposite of the DOM order (collage img comes first, needed for the
   desktop 2-column grid's left/right placement below). Scoped to
   mobile only via the max-width:899px block further down — at
   desktop this would flip which grid column each one lands in. */
@media (max-width: 899px) {
    .aaes-collage {
        order: 1;
    }

    .aaes-about__meta {
        order: 0;
    }
}

/* Single pre-composed cross-shaped collage image (exported whole from
   Figma) — no need to assemble it from separate photos. Figma sizes
   it 634x634 (square), not the earlier 380px guess. */
.aaes-collage {
    display: block;
    width: 100%;
    max-width: 634px;
    height: auto;
    margin: 0 auto;
}

.aaes-about__meta {
    text-align: center;
}

.aaes-about__date {
    font-family: var(--aaes-font-display);
    font-size: 2.36rem;
    font-weight: 400;
    line-height: 1.15;
    /* Was -1.41px (a flat px guess) — the dump gives -0.06em, which at
       this font-size works out to about -2.26px. */
    letter-spacing: -0.06em;
    color: var(--aaes-white);
    margin: 0 0 12px;
}

.aaes-about__venue {
    font-family: var(--aaes-font-display);
    font-size: 1.47rem;
    line-height: 1.2;
    /* Same fix as .aaes-about__date — was -0.88px, dump gives -0.06em
       (≈ -1.41px at this font-size). */
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px;
}

.aaes-about__wordmark {
    display: block;
    width: 100%;
    max-width: 493px;
    height: auto;
    margin: 0 auto 30px;
}

@media (min-width: 900px) {
    .aaes-about__wordmark {
        margin: 0 0 30px;
    }
}

/* Also baked vector art in Figma (no font data) -- measured against
   the real Absans font: 25px reproduces the exact 28px box height. */
.aaes-about__subtitle {
    font-family: var(--aaes-font-display);
    font-size: 25px;
    font-weight: 400;
    color: var(--aaes-white);
    /* Dump's "Frame 1321316535" gives 32px between the wordmark group
       and the description below — was 24px. */
    margin: 0 0 32px;
}

.aaes-about__desc {
    font-family: var(--aaes-font-display);
    font-size: 1.5rem;
    line-height: 1.65;
    letter-spacing: -0.48px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 493px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .aaes-about__grid {
        grid-template-columns: 1fr 1fr;
        gap: 128px;
    }

    .aaes-about__meta,
    .aaes-about__desc {
        text-align: left;
        margin-left: 0;
    }

    /* Figma centers just this date/venue block within the column (its
       own frame is narrower than the column, symmetric on both sides)
       — the wordmark and description below stay left-edge-aligned.
       Must match the wordmark's own 493px max-width, not the full
       (wider) meta column, or the two centers don't line up. */
    .aaes-about__date,
    .aaes-about__venue {
        max-width: 493px;
        text-align: center;
    }
}

/* -------------------------------------------------
   SECTION HEADING (generic, centered)
   ------------------------------------------------- */
.aaes-heading {
    font-family: var(--aaes-font-display);
    font-weight: 400;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -2.88px;
    text-align: center;
    margin: 0 0 64px;
}

.aaes-heading--on-blue { color: var(--aaes-white); }
.aaes-heading--on-cream { color: var(--aaes-navy); }

/* -------------------------------------------------
   WHO IS IT FOR
   ------------------------------------------------- */
/* No background of its own — .aaes-about (this section's sibling,
   sharing the same .aaes-pixel-bg wrapper) already relies on the
   wrapper's own blue fill + pattern ::before showing through, but this
   section's own opaque background sat above that pattern layer
   (z-index:1 vs the pattern's 0) and fully hid it — and made the gap
   between cards visually disappear too, since the gap and the cards
   were both flat, identical blue with nothing to tell them apart. */
.aaes-audience {
    position: relative;
    z-index: 1;
    padding: 64px 0 128px;
}

/* Mobile dump names this section's own background "AAES Sea" (#0057FF)
   — a distinct token from the general --aaes-blue (#1255fb) — and its
   heading is cream (#FFFAE0) at 32px, not the shared .aaes-heading--
   on-blue class's plain white/48px used by other blue sections. Scoped
   here rather than changing that shared class, which isn't confirmed
   for this section's siblings.

   Flat fill, no pattern — confirmed directly against the mobile
   reference, which shows a solid, texture-free background on this
   section (unlike .aaes-about, which does want the wrapper's pattern
   showing through). */
@media (max-width: 767px) {
    /* A background-color directly on .aaes-audience only fills the
       .aaes-container-inset width it sits in, leaving the wrapper's
       patterned edges (the container's own side padding, and beyond)
       visible on either side. Bled to the true viewport edges via
       ::before instead, same trick used for the cream initiative
       block earlier — the fill needs to reach past the container, not
       just match its own box. */
    .aaes-audience::before {
        content: "";
        position: absolute;
        inset: 0;
        left: -9999px;
        right: -9999px;
        background: #0057ff;
        z-index: -1;
    }

    .aaes-audience .aaes-heading {
        font-size: 32px;
        color: #fffae0;
    }
}

.aaes-audience__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

.aaes-audience__card {
    background: var(--aaes-blue);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
}

.aaes-audience__card--enabler {
    background: var(--aaes-cream);
    border-color: var(--aaes-cream);
}

.aaes-audience__heading {
    margin: 0;
}

/* Mobile: a real clickable accordion row (title + a +/- icon), only
   one card's content showing at a time. Desktop neutralizes all of
   this back to a plain heading — see the 768px block below. */
.aaes-audience__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 24px 20px;
    text-align: left;
    /* main.css has a global button:focus{outline:2px solid ...} rule
       (a generic "smooth focus effect" meant for plain links/buttons)
       that was showing a heavy outline box around the whole toggle row
       on tap — same class of leak as the "Learn more" hover bug earlier
       in this session. */
    outline: none;
}

.aaes-audience__icon-toggle {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-image: url("../images/faq-icon-plus.svg");
    background-repeat: no-repeat;
}

.aaes-audience__toggle[aria-expanded="true"] .aaes-audience__icon-toggle {
    background-image: url("../images/faq-icon-minus.svg");
}

.aaes-audience__title {
    font-family: var(--aaes-font-display);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.25;
    letter-spacing: -2.4px;
    color: var(--aaes-white);
}

.aaes-audience__card--enabler .aaes-audience__title {
    color: var(--aaes-black);
}

/* :not([hidden]) — a bare .aaes-audience__panel{display:flex} rule
   has equal specificity to the browser's default [hidden]{display:
   none}, and author styles win specificity ties, so it was silently
   overriding hidden entirely (JS set the attribute correctly, nothing
   actually hid the content). */
.aaes-audience__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0 20px 24px;
}

.aaes-audience__desc {
    font-family: var(--aaes-font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: var(--aaes-white);
    text-align: center;
    margin: 0;
}

.aaes-audience__card--enabler .aaes-audience__desc {
    color: var(--aaes-black);
}

.aaes-audience__icon {
    width: 150px;
    height: 154px;
}

.aaes-audience__cta {
    width: 100%;
    white-space: normal;
}

/* At the narrow single-column mobile width, the button's available
   text width (~234px) is just under the text's natural width at the
   base 20px size (~240px) — enough to force a wrap. Shrinking to 18px
   gives it comfortable room to stay on one line instead. */
@media (max-width: 767px) {
    .aaes-audience__cta {
        font-size: 18px;
    }
}

/* Desktop shows every card fully expanded, side by side — the
   accordion (collapsible toggle + hidden panel) only exists for the
   single-column mobile layout. Neutralizes the toggle button back to
   a plain heading and restores the original always-visible card
   proportions; dynamic-form.js-style JS still handles forcing
   panel.hidden = false at this width, this just undoes the mobile
   visual chrome around it. */
@media (min-width: 768px) {
    .aaes-audience__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .aaes-audience__card {
        padding: 64px 32px 48px;
        min-height: 444px;
    }

    .aaes-audience__toggle {
        display: block;
        padding: 0;
        cursor: default;
    }

    .aaes-audience__title {
        display: block;
        text-align: center;
        margin: 0 0 32px;
    }

    .aaes-audience__icon-toggle {
        display: none;
    }

    .aaes-audience__panel {
        flex: 1;
        padding: 0;
    }

    .aaes-audience__icon {
        margin: 32px auto;
    }

    .aaes-audience__cta {
        margin-top: auto;
    }
}

/* Mobile-specific dump ("iPhone 13 & 14 - 3"): all three cards are
   blue here, including the Enabler card (cream on desktop only), with
   a real border/shadow and tighter padding than the desktop values
   below reuse unscoped. */
@media (max-width: 767px) {
    /* Cards touch directly — confirmed against the reference, which
       shows them separated only by their own borders, not a real gap. */
    .aaes-audience__grid {
        gap: 0;
    }

    /* Smooth open/close instead of the instant hidden-attribute jump —
       JS drives the actual target height (measured via scrollHeight)
       via inline style, this just makes that change transition instead
       of snapping. Desktop never sets max-height at all, so it's
       unaffected. */
    .aaes-audience__panel:not([hidden]) {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease;
    }

    .aaes-audience__card,
    .aaes-audience__card--enabler {
        background: #0057ff;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: -18.6414px -3.28966px 29.6069px rgba(0, 0, 0, 0.1);
    }

    .aaes-audience__title {
        font-size: 32px;
        text-transform: capitalize;
    }

    .aaes-audience__card--enabler .aaes-audience__title {
        color: var(--aaes-white);
    }

    /* Dimming Educators/Learners to 50% opacity while Enabler stayed
       full read as inconsistent in practice — matched to Enabler's
       full-opacity, left-aligned treatment across all three instead.
       (Also cancels the desktop black-text override on Enabler, whose
       card is blue here, not cream.) */
    .aaes-audience__desc {
        opacity: 1;
        text-align: left;
        /* Without this the paragraph shrinks to its own content width
           and centers as a block (inheriting the panel's align-items:
           center) — text-align:left alone would just left-align text
           inside an already-centered narrow box, not visibly move it
           to the card's true left edge. */
        align-self: stretch;
    }

    .aaes-audience__card--enabler .aaes-audience__desc {
        color: var(--aaes-white);
    }

    /* Enabler card's button is mint-outlined (#C5FFFB), not the
       blue-outline that suits its desktop cream background — its card
       is blue here, same as the other two, but its button keeps a
       distinct accent color from their white outline. */
    .aaes-audience__card--enabler .aaes-audience__cta {
        border-color: #c5fffb;
        color: #c5fffb;
    }
}

/* -------------------------------------------------
   SPEAKERS
   ------------------------------------------------- */
.aaes-speakers {
    position: relative;
    background: var(--aaes-cream);
    padding: 74px 0 64px;
}

/* Figma gives this section its own (extra) 156px side margin beyond
   the shared 64px .aaes-container gutter — added here on top of it
   rather than duplicating the container's own padding logic. */
@media (min-width: 1200px) {
    .aaes-speakers {
        padding: 74px 92px 64px;
    }
}

.aaes-speakers__grid {
    display: grid;
    /* Figma's mobile frame stacks these single-column, showing only 2
       of the 6 cards at a time (the rest paged in via the arrows). */
    grid-template-columns: 1fr;
    gap: 20px;
}

.aaes-speaker.is-hidden {
    display: none;
}

.aaes-speaker {
    text-align: center;
}

/* Figma: the card fill is solid blue + the same pattern used
   elsewhere on the page (fills=[SOLID:#1255fb,PATTERN]) -- the photo
   sits on top of that as its own layer, background removed, so the
   pattern shows around the person rather than being covered edge to
   edge by a rectangular photo. */
.aaes-speaker__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--aaes-blue);
    margin-bottom: 14px;
    overflow: hidden;
}

.aaes-speaker__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/pattern-tile.png");
    background-size: 60px 60px;
    background-position: center;
    opacity: 0.2;
    mix-blend-mode: soft-light;
}

.aaes-speaker__photo img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aaes-speaker__name {
    font-family: var(--aaes-font-display);
    font-size: 1.59rem;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -1.53px;
    color: var(--aaes-navy);
    margin: 0 0 2px;
}

.aaes-speaker__title {
    font-family: var(--aaes-font-body);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.84px;
    color: var(--aaes-navy);
    margin: 0;
}

.aaes-speakers__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
}

.aaes-speakers__arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
}

.aaes-speakers__arrow img {
    width: 32px;
    height: 32px;
    opacity: 0.2;
}

/* Same asset for both directions — right is just the left arrow
   mirrored, matching how Figma builds it (one icon, flipped). */
.aaes-speakers__arrow--next img {
    transform: scaleX(-1);
}

.aaes-speakers__arrow--active img {
    opacity: 1;
}

/* One track, one thumb that slides to the current page — not a row
   of dots. Exact 96x32 / 32x32 sizing from the user's Figma inspect;
   track color is an approximation (not given), thumb is the brand
   blue used everywhere else on this page. */
.aaes-speakers__track {
    position: relative;
    width: 96px;
    height: 32px;
    background: rgba(1, 18, 60, 0.08);
}

.aaes-speakers__track-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: var(--aaes-blue);
    transition: left 0.25s ease;
}

@media (min-width: 768px) {
    .aaes-speakers__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* -------------------------------------------------
   KEY ACTIVITIES
   ------------------------------------------------- */
.aaes-activities {
    position: relative;
    z-index: 1;
    background: var(--aaes-blue);
    padding: 64px 0 128px;
}

@media (min-width: 1200px) {
    .aaes-activities {
        padding: 64px 22px 128px;
    }
}

.aaes-activities__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.aaes-activity-card {
    position: relative;
    background: var(--aaes-cream);
    padding: 56px 32px;
    min-height: 214px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aaes-activity-card__title {
    font-family: var(--aaes-font-display);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -1.92px;
    color: var(--aaes-navy);
    margin: 0 0 10px;
}

@media (min-width: 768px) {
    .aaes-activities__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------
   PROGRAMME FLOW
   ------------------------------------------------- */
.aaes-programme {
    background: var(--aaes-cream);
    padding: 74px 0 64px;
}

/* No gap was set at all, so the two tracks rendered as one touching
   block instead of separate cards. Max-width corrected to 1128px
   (1440 - 156px side padding x2 in the dump's outer "Schedule" frame),
   not the earlier 1268px guess. */
.aaes-programme__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    box-sizing: border-box;
    max-width: 1128px;
    padding: 0 24px;
    margin: 0 auto;
}

/* Figma narrows just the heading's own column here (165px side margin
   vs the shared container's 64px) — the panel below keeps the wider
   column, so this only scopes the container used for the heading,
   not the whole section. */
@media (min-width: 1200px) {
    .aaes-programme > .aaes-container {
        max-width: 1238px;
    }
}

/* Each track turned out to be two stacked pieces, not one solid
   card: a fixed 142px colored header band (navy on the left, blue on
   the right — not the whole-card light/dark split this used to be),
   sitting directly on a white body with black text, same on both
   tracks. */
.aaes-programme__track {
    display: flex;
    flex-direction: column;
}

.aaes-programme__track-header {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 142px;
    padding: 32px;
}

.aaes-programme__track-header--navy {
    background: #00133f;
}

/* Figma names this "AAES Sea" — #0057FF, a distinct token from the
   general --aaes-blue (#1255fb) used elsewhere on the page, not an
   approximation of it. */
.aaes-programme__track-header--blue {
    background: #0057ff;
}

.aaes-programme__track-title {
    font-family: var(--aaes-font-display);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.25;
    letter-spacing: -0.06em;
    text-align: left;
    text-transform: capitalize;
    margin: 0;
    /* typography.css sets a global h3{color:#fff}, which happens to
       already match — set explicitly anyway so it's not relying on
       a same-color coincidence from an unrelated global rule. */
    color: var(--aaes-cream);
}

/* Figma breaks "Student Track" onto two lines only in the side-by-side
   desktop layout, to match the taller two-line "Teachers &
   Administrators Track" heading beside it — below 768px (stacked,
   single column) it reads as one line instead. */
.aaes-programme__track-break {
    display: none;
}

@media (min-width: 768px) {
    .aaes-programme__track-break {
        display: block;
    }
}

.aaes-programme__track-body {
    background: var(--aaes-white);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 32px 64px;
    /* .aaes-programme__track is a grid item and stretches to match its
       taller sibling by default, but the body's own height was still
       just content-based, leaving a gap of bare cream section
       background showing below the shorter track instead of white.
       Growing to fill the stretched track makes both tracks the same
       full height, matching the taller one. */
    flex: 1;
}

.aaes-programme__track-body p {
    font-family: var(--aaes-font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #000000;
    margin: 0;
}

@media (min-width: 768px) {
    .aaes-programme__panel {
        grid-template-columns: 1fr 1fr;
    }
}

/* -------------------------------------------------
   FAQ
   ------------------------------------------------- */
/* Figma gives this section its own white background and a narrower,
   more-inset content column (156px sides at 1440) than the rest of
   the page's shared .aaes-container (64px sides) — deliberately
   distinct, not a mistake, so it doesn't reuse that wrapper. */
.aaes-faq {
    position: relative;
    z-index: 1;
    background: var(--aaes-white);
    padding: 64px 24px 96px;
}

.aaes-faq__heading {
    color: var(--aaes-navy);
    margin-bottom: 40px;
}

/* Single flex column on mobile — .aaes-faq__col is display:contents
   here (see below) so its items become direct children and the order
   values set inline in PHP restore natural 0-1-2-3-4 reading order,
   even though the DOM groups them into two columns for desktop. */
.aaes-faq__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1128px;
    margin: 0 auto;
}

/* Unwraps the column box on mobile so its items become direct flex
   children of .aaes-faq__grid, ordered back into natural 0-1-2-3-4
   sequence by the inline `order` set in PHP — overridden to a real
   flex column at 900px+, where the two-column split is wanted. */
.aaes-faq__col {
    display: contents;
}

.aaes-faq-item {
    background: var(--aaes-cream);
}

.aaes-faq-item__heading {
    margin: 0;
}

.aaes-faq-item__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 24px 16px;
    text-align: left;
    font-family: var(--aaes-font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--aaes-navy);
}

.aaes-faq-item__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-image: url("../images/faq-icon-plus.svg");
    background-repeat: no-repeat;
}

.aaes-faq-item__toggle[aria-expanded="true"] .aaes-faq-item__icon {
    background-image: url("../images/faq-icon-minus.svg");
}

.aaes-faq-item__panel {
    padding: 0 16px 24px;
}

.aaes-faq-item__answer {
    font-family: var(--aaes-font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--aaes-black);
    margin: 0;
}

@media (min-width: 900px) {
    .aaes-faq {
        padding: 64px 156px 128px;
    }

    /* Two genuinely independent columns (each its own flex container),
       not one 2-column CSS grid — a shared grid row spans both columns,
       so expanding an item in the right column was stretching that
       whole row and visibly padding out its row-mate on the left even
       though its own content never changed. */
    .aaes-faq__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .aaes-faq__col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
        min-width: 0;
    }

    .aaes-faq-item__toggle {
        padding: 32px 24px;
        font-size: 1.25rem;
    }

    .aaes-faq-item__panel {
        padding: 0 24px 32px;
    }

    .aaes-faq-item__answer {
        font-size: 1.125rem;
    }
}

/* -------------------------------------------------
   FOOTER CTA
   ------------------------------------------------- */
.aaes-footer-cta {
    background: var(--aaes-cream);
}

.aaes-footer-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
}

.aaes-footer-cta__panel {
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.aaes-footer-cta__panel--mint {
    background: var(--aaes-mint);
    /* Icon + title/buttons are centered on mobile, not left-aligned —
       confirmed against the reference. */
    align-items: center;
    text-align: center;
}

/* Figma stacks icon-above-text on mobile but sits them side by side
   (icon left, text right) from the desktop breakpoint up. */
@media (min-width: 900px) {
    .aaes-footer-cta__panel--mint {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }
}

.aaes-footer-cta__panel--blue {
    background: var(--aaes-blue);
    align-items: center;
    text-align: center;
    padding: 40px 32px;
    /* This panel's own gap was still the base 40px, which dominated
       over the smaller margin-top tweaks already made to the divider
       and initiative row below — wordmark, divider, and "An initiative
       of" need to sit much closer together than that. */
    gap: 14px;
}

@media (min-width: 900px) {
    .aaes-footer-cta__panel {
        padding: 64px;
    }

    .aaes-footer-cta__panel--blue {
        padding: 64px 128px;
    }
}

.aaes-footer-cta__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 32px;
}

@media (min-width: 900px) {
    .aaes-footer-cta__info {
        align-items: flex-start;
        width: auto;
    }
}

/* Register/Speak-to-organisers buttons stack full-width on mobile —
   the shared .aaes-btn-row's mobile rule (forcing a side-by-side
   nowrap row) was written for the hero's two buttons and was leaking
   into this section too. */
.aaes-footer-cta__panel--mint .aaes-btn-row {
    width: 100%;
}

@media (max-width: 600px) {
    .aaes-footer-cta__panel--mint .aaes-btn-row {
        flex-direction: column;
    }

    .aaes-footer-cta__panel--mint .aaes-btn-row .aaes-btn {
        flex: none;
        width: 100%;
    }
}

.aaes-footer-cta__icon {
    width: 120px;
    height: auto;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    .aaes-footer-cta__icon {
        width: 231px;
    }
}

.aaes-footer-cta__title {
    font-family: var(--aaes-font-display);
    font-weight: 400;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -2.88px;
    color: var(--aaes-black);
    margin: 0;
    max-width: 447px;
}

.aaes-footer-cta__wordmark {
    display: block;
    width: 100%;
    max-width: 248px;
    height: auto;
    margin: 0 auto;
}

/* Missing entirely before — a thin rule between the wordmark and the
   "An initiative of" line, matching the wordmark's own width. */
.aaes-footer-cta__divider {
    display: block;
    width: 100%;
    max-width: 248px;
    height: 0;
    border-top: 0.5px solid #ffffff;
    opacity: 0.5;
    margin: 0 auto;
}

.aaes-footer-cta__initiative {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--aaes-font-body);
    font-size: 1.08rem;
    color: var(--aaes-white);
    white-space: nowrap;
}

.aaes-footer-cta__initiative img {
    height: 40px;
    width: auto;
}

.aaes-footer-cta__copyright {
    font-family: var(--aaes-font-body);
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: -0.32px;
    color: rgba(255, 255, 255, 0.5);
    /* Panel gap (8px) alone would put this right under "An initiative
       of" — kept as its own more separated line instead. */
    margin-top: 24px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    /* Figma: 936.9 / 503.1 of 1440 -- not an even 50/50 split. */
    .aaes-footer-cta__grid {
        grid-template-columns: 936.9fr 503.1fr;
    }
}

/* ========================================
   REGISTRATION MODAL (AAES styling, same IDs/classes as summit.js)
   Pixel-matched to the modal/form Figma frames (file IEF3l3MBrG1FY7ebCpcS5e).
   Colors here (#0057FF etc.) come straight from that file's own "Copy as
   code" export and differ very slightly from --aaes-blue used on the rest
   of the page (a different source file) — kept as given rather than
   normalized, since fidelity to this specific design was the ask.
   ======================================== */
.smt-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.smt-modal--open {
    display: flex;
}

.smt-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 19, 63, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Shell only — background/padding live on #summit-fork / #summit-form-mount
   instead, since Figma gives the fork screen a white 794px-wide frame and
   the form screens a cream 520px-wide frame. Width toggles via a modifier
   class summit.js adds/removes when switching screens. */
.smt-modal__dialog {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    max-width: 794px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 19, 63, 0.35);
}

.smt-modal__dialog--narrow {
    max-width: 520px;
}

/* Base: a plain inline flex item — used as-is inside .kdf-fork-header,
   which handles positioning via justify-content:space-between (matches
   Figma's Frame 1321316557, a real row containing both Title and Close,
   not two independently-positioned elements). */
.smt-modal__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.smt-modal__close img {
    display: block;
    /* Was 32px unconditionally — too big per direct feedback. */
    width: 24px;
    height: 24px;
}

@media (max-width: 767px) {
    .smt-modal__close img {
        width: 16px;
        height: 16px;
    }
}

/* Form/success screens: Figma positions Close independently (absolute,
   right:32/top:39) rather than in a row with the back-link, so this
   variant keeps that instead of .kdf-fork-header's flex layout. */
.smt-modal__close--form {
    position: absolute;
    top: 39px;
    right: 32px;
    z-index: 2;
}

/* -------------------------------------------------
   FORK SCREEN
   ------------------------------------------------- */
.kdf-fork-screen {
    display: flex;
    flex-direction: column;
    gap: 64px;
    background: #ffffff;
    padding: 64px;
}

.kdf-fork-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kdf-fork-heading {
    font-family: "Absans", "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #00133f;
    margin: 0;
}

.kdf-fork {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kdf-fork-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* The dump says align-items:center on this card, but that's centering
       an inner "Card Text Container" that has its own explicit
       width:260px (nearly the full card width) — a no-op there. This
       markup has no such fixed-width wrapper, so copying center literally
       shrinks each child (the icon especially) to its own content size
       and centers it, instead of hugging the left edge like the design
       actually shows. flex-start reproduces the real visual result. */
    align-items: flex-start;
    padding: 32px 32px 24px;
    /* Figma's actual structure has a "Card Text Container" (icon+title+
       description, its own internal gap:32) as one group, and the arrow
       row as a second group below it, separated by the card's own
       gap:64 (~ justify-content:space-between at the card's fixed 390px
       height). Reproduced here without adding a wrapper div: gap:32
       covers icon/title/desc, and the arrow's margin-top:auto pushes it
       to the bottom of min-height, consuming all remaining space —
       same two-group rhythm, no matter how long the description runs. */
    gap: 32px;
    min-height: 390px;
    flex: 1;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* No border-radius appears anywhere in the CSS dump for this element —
       square, per that data. (A prior version of this rule had 20px,
       added by eyeballing a screenshot rather than sourcing it — removed.) */
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* The light/cream (#C5FFFB) card is retired per direct feedback — both
   cards now use the same blue treatment as the dark variant. Kept the
   --light/--dark modifier classes in the markup rather than merging
   them (lower-risk, no HTML/JS changes needed), just made --light's
   own colors match --dark's exactly. */
.kdf-fork-btn--light,
.kdf-fork-btn--dark {
    background: #0057ff;
}

/* No hover-state color/fade data exists for these cards — the "Copy as
   code" dump only covers the resting state, and guessing at a fade
   effect from a single screenshot produced something that didn't read
   right. Rather than invent an effect, hover is a deliberate no-op:
   the card stays exactly as specified. dynamic-form.css (shared with
   /ai-survey) still carries an old .kdf-fork-btn:hover rule (a
   translucent blue wash) from before this redesign, at the same
   specificity — restate the resting colors on :hover explicitly so
   that leftover rule can never show through. */
.kdf-fork-btn--light,
.kdf-fork-btn--light:hover,
.kdf-fork-btn--dark,
.kdf-fork-btn--dark:hover {
    background: #0057ff;
    border-color: rgba(255, 255, 255, 0.5);
}

.kdf-fork-btn-icon {
    display: block;
    height: 80px;
    width: auto;
}

.kdf-fork-btn-title {
    font-family: "Absans", "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.06em;
    text-transform: capitalize;
    margin: 0;
}

.kdf-fork-btn--light .kdf-fork-btn-title,
.kdf-fork-btn--dark .kdf-fork-btn-title {
    color: #c5fffb;
}

.kdf-fork-btn-desc {
    font-family: "Absans", "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    margin: 0;
}

.kdf-fork-btn--light .kdf-fork-btn-desc,
.kdf-fork-btn--dark .kdf-fork-btn-desc {
    color: #ffffff;
}

/* Hidden until the card is hovered — previously always visible. The
   light card's arrow image was swapped from long-right.svg (dark/navy,
   meant for the retired cream background) to light-long-right.svg to
   stay visible now that both cards are blue. */
.kdf-fork-btn-arrow {
    display: block;
    width: 24px;
    height: 24px;
    align-self: flex-end;
    /* Consumes all remaining space in the column, pinning this to the
       card's bottom edge regardless of description length — see the
       .kdf-fork-btn comment above. */
    margin-top: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.kdf-fork-btn:hover .kdf-fork-btn-arrow {
    opacity: 1;
}

@media (min-width: 768px) {
    .kdf-fork {
        flex-direction: row;
    }
}

@media (max-width: 767px) {
    .kdf-fork-screen {
        padding: 40px 24px;
    }

    .kdf-fork-heading {
        /* Sourced from Figma's own typography panel — was 28px. */
        font-size: 24px;
    }
}

/* -------------------------------------------------
   FORM SCREEN
   ------------------------------------------------- */
/* Same mistake as the fork screen, caught on re-audit: the dump's outer
   "Activities" frame for both forms is display:flex, flex-direction:
   column, align-items:center, gap:64 between its three direct children
   (back-link row, big title, field list) — not margin-based spacing
   with an invented value. */
.kdf-form-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    background: #fffae0;
    padding: 48px 32px;
}

.kdf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: "Absans", "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.06em;
    color: #00133f;
    transition: opacity 0.15s ease;
}

.kdf-back-link:hover {
    opacity: 0.7;
}

.kdf-back-link__icon {
    display: block;
    width: 24px;
    height: 24px;
}

.kdf-form-title {
    font-family: "Absans", "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #00133f;
    align-self: flex-start;
    margin: 0;
}

/* .kdf-form-screen now uses align-items:center (matching the dump) rather
   than the default stretch — the actual field list (dynamic-form.js's
   .kdf-form, rendered inside this) needs to explicitly span full width
   or it would shrink to content width and center instead. */
#summit-form-inner {
    align-self: stretch;
    width: 100%;
}

@media (max-width: 767px) {
    .kdf-form-screen {
        padding: 32px 20px;
    }

    .kdf-form-title {
        font-size: 26px;
    }
}

/* -------------------------------------------------
   FORM FIELDS (dynamic-form.js output, re-skinned)
   ------------------------------------------------- */
.smt-modal .kdf-label,
.smt-modal .kdf-success-title {
    font-family: "Absans", "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.034em;
    color: #00133f;
}

/* dynamic-form.css's base .kdf-loading is rgba(255,255,255,0.6) —
   readable on the shared dark theme, but next to invisible against
   this modal's cream background. Never re-skinned for AAES until now. */
.smt-modal .kdf-loading {
    color: #00133f;
}

.smt-modal .kdf-error {
    color: #c0324a;
}

.smt-modal .kdf-back-link,
.smt-modal .kdf-success-text {
    color: #5a5a56;
}

/* dynamic-form.css's base .kdf-back-link:hover turns the text white —
   invisible against this page's light backgrounds. Neutralize. */
.smt-modal .kdf-back-link:hover {
    color: #5a5a56;
}

.smt-modal .kdf-question--error {
    border-radius: 0;
}

.smt-modal .kdf-input,
.smt-modal .kdf-textarea,
.smt-modal .kdf-select {
    /* Dump's "Text Input" layer explicitly carries box-sizing:border-box —
       without it the 1.5px border adds on top of height:50.5px instead of
       being absorbed by it, rendering ~3px taller than spec'd. */
    box-sizing: border-box;
    background: #ffffff;
    border: 1.5px solid #e6e0bc;
    /* Figma's field wrapper (invisible — no fill/border of its own) carries
       border-radius:16px, but the visible bordered box itself has none —
       square, like every other surface on this page. Explicit 0 needed:
       dynamic-form.css's base .kdf-input/.kdf-select/.kdf-textarea rule
       defaults to 14px. */
    border-radius: 0;
    /* Horizontal padding isn't specified in the dump (unavoidable — text
       needs *some* inset from the border), left at a reasonable value.
       Vertical sizing, previously approximated via padding, now uses the
       dump's actual height:50.5px directly instead of guessing at it. */
    padding: 0 16px;
    font-family: "Outfit", sans-serif;
    color: #00133f;
}

.smt-modal .kdf-input,
.smt-modal .kdf-select {
    height: 50.5px;
}

.smt-modal .kdf-textarea {
    padding-top: 14px;
    padding-bottom: 14px;
    /* height:109/min-height:100 in the dump was for one specific field
       (the school form's student-name list) — not a general textarea
       default, so min-height is kept as the safest general value rather
       than hardcoding that field's specific height everywhere. */
    min-height: 100px;
}

/* dynamic-form.css's base :focus rule uses the old dark-theme teal
   (#007cba) and a translucent-white background overlay — replace with
   the AAES palette so focusing a field doesn't flash the wrong color.
   background-color (not the `background` shorthand) so .kdf-select's
   chevron image/position isn't reset again on focus. */
.smt-modal .kdf-input:focus,
.smt-modal .kdf-textarea:focus,
.smt-modal .kdf-select:focus {
    border-color: #0057ff;
    background-color: #ffffff;
}

.smt-modal .kdf-select {
    /* The shared .smt-modal .kdf-input/.kdf-textarea/.kdf-select rule above
       sets `background` as a shorthand, which resets position/repeat to
       their initial values — restate them here or the chevron tiles from
       the top-left instead of sitting right-aligned. */
    background-image: url("../images/icon-chevron-down-blue.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    /* The shared padding rule above is a shorthand (14px 16px) that
       overrides dynamic-form.css's padding-right:40px — restate the
       wider right padding so text doesn't run under the chevron. */
    padding-right: 44px;
}

.smt-modal .kdf-select option {
    color: #1a1a1a;
}

/* Single-option "select" rendered as a checkbox row (consent lines) —
   see singleOptionSelectAsCheckbox in dynamic-form.js. Reuses the shared
   .kdf-checkbox-box glyph, styled to match Figma's 24px box. */
/* Same outer-Container gap:48 grouping as .kdf-nav above, but for the
   transition into the consent-checkbox block (the dump's
   "Frame 1321316555", a sibling of the regular field list with gap:48
   between them) — targets only the FIRST checkbox question directly
   after a regular field, not checkbox-to-checkbox transitions (those
   stay at the base 24px gap, close to the dump's internal 32px without
   needing a dedicated selector for a 2-checkbox-only case). */
.smt-modal .kdf-question:not(:has(.kdf-single-checkbox)) + .kdf-question:has(.kdf-single-checkbox) {
    margin-top: 24px;
}

.smt-modal .kdf-single-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-family: "Absans", "Unbounded", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.034em;
    color: #00133f;
}

.smt-modal .kdf-single-checkbox .kdf-checkbox-box {
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: 1.5px solid #e6e0bc;
    background: #ffffff;
    color: #0057ff;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.smt-modal .kdf-single-checkbox--selected .kdf-checkbox-box {
    background: #0057ff;
    border-color: #0057ff;
    color: #ffffff;
}

.smt-modal .kdf-option-btn {
    background: #ffffff;
    border: 1.5px solid #e6e0bc;
    border-radius: 0;
    color: #00133f;
}

/* dynamic-form.css's base :hover sets a translucent-white border,
   invisible on this light theme. Neutralize to the resting border. */
.smt-modal .kdf-option-btn:hover {
    border-color: #e6e0bc;
}

.smt-modal .kdf-option-btn--selected {
    background: #0057ff;
    border-color: #0057ff;
    color: #ffffff;
}

/* Dump's outer "Container" groups the field list and the submit Button
   as siblings with gap:48 between them — dynamic-form.js has no concept
   of that grouping, it just flatly renders .kdf-nav as one more .kdf-form
   child under the base 24px gap (plus dynamic-form.css's own 8px
   margin-top, giving ~32px total here before this override). Adding 24px
   on top of the existing 24px flex gap reaches the dump's 48px exactly,
   replacing (not stacking with) that base margin-top. */
.smt-modal .kdf-nav {
    margin-top: 24px;
}

.smt-modal .kdf-next-btn {
    background: #0057ff;
    border-radius: 0;
    /* Dump's Button frame gives an explicit height:54px (box-sizing:
       border-box) — the same "approximated via padding instead of the
       real dimension" gap already fixed on the inputs. padding:20px 16px
       alone would render ~64px tall (2x20px + ~24px line-height). */
    height: 54px;
    box-sizing: border-box;
    padding: 20px 16px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.02em;
}

/* No hover data exists for this button either (same situation as the
   fork cards) — no-op instead of the invented darker-blue guess that
   used to be here. dynamic-form.css's base :hover (#0693dd) would
   otherwise leak through at equal specificity. */
.smt-modal .kdf-next-btn:hover {
    background: #0057ff;
}

.smt-modal .kdf-back-btn {
    border-radius: 0;
    border-color: #d8d2ab;
    color: #5a5a56;
}

/* dynamic-form.css's base :hover turns this white-on-transparent —
   invisible here. Neutralize to the resting colors. */
.smt-modal .kdf-back-btn:hover {
    border-color: #d8d2ab;
    color: #5a5a56;
}

/* No Figma spec was given for the success screen in this pass — reuses
   the fork screen's white background so it isn't a transparent box now
   that .smt-modal__dialog itself carries no fill. */
#summit-success.kdf-success {
    position: relative;
    background: #ffffff;
    padding: 64px 32px;
}