/*
 * Academy surface authority.
 *
 * Shared public styles own structure and accessibility. This file owns the
 * Academy visual language: near-black navy ink, restrained Teliyadu cyan,
 * atmospheric surfaces, and the learning components. It is intentionally
 * scoped so Technology cannot inherit it, and it wins on specificity alone —
 * no importance overrides anywhere in this file.
 *
 * Design rules encoded here:
 *   - Borders are secondary. Hierarchy comes from space, type, and surface.
 *   - There is no universal card. Each surface category has its own geometry.
 *   - Radius and elevation are scales, not single values.
 */

.surface-academy {
    /* Ink */
    --academy-ink: #0b1220;
    --academy-ink-soft: #334155;
    --academy-muted: #64748b;
    --academy-muted-strong: #475569;

    /* Brand — used selectively, never as a large field */
    --academy-cyan: #0295b9;
    --academy-cyan-dark: #027099;
    --academy-cyan-light: #67d3ec;
    --academy-cyan-soft: #ecf8fc;

    /* Surfaces */
    --academy-surface: #ffffff;
    --academy-surface-soft: #ffffff;
    --academy-surface-tint: #eef4f8;
    --academy-dark: #0b1220;

    /* Lines are quiet by policy */
    --academy-line: rgba(15, 23, 42, .08);
    --academy-line-strong: rgba(15, 23, 42, .14);

    /* Radius scale */
    --academy-radius-control: 10px;
    --academy-radius-button: 11px;
    --academy-radius-card: 18px;
    --academy-radius-bento: 28px;

    /* Elevation scale — large, soft, low opacity */
    --academy-e1: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 24px rgba(11, 18, 32, .035);
    --academy-e2: 0 2px 4px rgba(11, 18, 32, .04), 0 18px 44px rgba(11, 18, 32, .07);
    --academy-e3: 0 4px 8px rgba(11, 18, 32, .04), 0 34px 90px rgba(11, 18, 32, .11);

    background: var(--academy-surface);
    color: var(--academy-ink-soft);
    color-scheme: light;
    font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.surface-academy .pageMain {
    background: var(--academy-surface);
}

.surface-academy .pageContainer {
    margin-inline: auto;
    max-width: 1320px;
    padding-inline: clamp(20px, 3.4vw, 48px);
    width: 100%;
}

.surface-academy :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--academy-cyan);
    outline-offset: 3px;
}

/*
 * The legacy public bundle styles bare elements — `p`, `h3` and `h4` all carry
 * `padding: 20px 0`. That leaks into every Academy component and is the main
 * reason the surface reads as loose and unresolved. Neutralise it inside the
 * components this file owns, so spacing comes from the component alone.
 *
 * Deliberately NOT applied to `.richText`: CMS prose still needs that padding
 * for paragraph rhythm, and it is the only place authors control the markup.
 */
.surface-academy :is(
    .academyStageCopy,
    .academySurfaceHeroCopy,
    .academySectionIntro,
    .academyCapability,
    .academyRouteText,
    .academyCourseCardBody,
    .academyPathHead,
    .academyExamCard,
    .academyOfferCard,
    .academyEditorial,
    .academyStatePanel,
    .academyBenefit,
    .academyFilterBar,
    .academyStepBody,
    .academyEnrollPanel,
    .academyHero,
    .academyCourseHero
) :is(h1, h2, h3, h4, p) {
    padding: 0;
}

/* ==========================================================================
 * Global header — thin, quiet, almost part of the page.
 * `html body` outranks the shared body rule that sets --public-nav-offset.
 * ======================================================================== */

html body.surface-academy {
    --public-nav-offset: 68px;
}

html body.surface-academy #app > header {
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    background: rgba(255, 255, 255, .8);
    border: 0;
    border-bottom: 1px solid var(--academy-line);
    border-radius: 0;
    box-shadow: none;
    left: 0;
    padding: 0;
    right: 0;
    top: 0;
    transition: background-color 200ms ease, border-color 200ms ease;
}

html body.surface-academy #app > header .container-fluid {
    max-width: 1320px;
    padding-inline: clamp(20px, 3.4vw, 48px);
}

html body.surface-academy #app > header .container-fluid > .row .col-12 {
    height: 68px;
}

html body.surface-academy #app > header .logo img {
    border-radius: 0;
    height: 34px;
}

html body.surface-academy #app > header nav > ul {
    gap: 0;
}

html body.surface-academy #app > header nav > ul > li {
    padding: 0 2px;
}

html body.surface-academy #app > header nav > ul > li > :is(a, button) {
    background: transparent;
    border-radius: var(--academy-radius-control);
    color: var(--academy-muted-strong);
    font-size: 14px;
    font-weight: 550;
    height: 40px;
    letter-spacing: -.005em;
    padding-inline: 12px;
    position: relative;
}

html body.surface-academy #app > header nav > ul > li > :is(a, button):hover {
    background: transparent;
    color: var(--academy-ink);
}

/* Minimal active indicator — a hairline, not a filled pill. */
html body.surface-academy #app > header nav > ul > li.isActive > a {
    color: var(--academy-ink);
    font-weight: 650;
}

html body.surface-academy #app > header nav > ul > li.isActive > a::after {
    background: var(--academy-cyan);
    border-radius: 2px;
    bottom: 6px;
    content: "";
    height: 2px;
    left: 12px;
    position: absolute;
    right: 12px;
}

html body.surface-academy #app > header nav > ul > li.navActionSecondary > :is(a, button) {
    background: transparent;
    border: 1px solid var(--academy-line-strong);
    border-radius: var(--academy-radius-button);
    color: var(--academy-ink);
    font-weight: 650;
    margin-left: 10px;
    padding-inline: 16px;
}

html body.surface-academy #app > header nav > ul > li.navActionSecondary > :is(a, button):hover {
    background: var(--academy-ink);
    border-color: var(--academy-ink);
    color: #fff;
}

/*
 * Account menu grouping.
 *
 * The menu had grown to eight undifferentiated links, which is past the point
 * where a list is scannable. Labelled groups give the eye somewhere to land,
 * and the staff entry is separated because it leaves the learner experience for
 * a Django-rendered back office — a different kind of destination, not another
 * account page.
 */
.surface-academy #app > header nav > ul > li ul li.navMenuHeading {
    color: var(--academy-muted);
    cursor: default;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 14px 14px 5px;
    text-transform: uppercase;
}

.surface-academy #app > header nav > ul > li ul li.navMenuHeading:first-child {
    padding-top: 8px;
}

.surface-academy #app > header nav > ul > li ul li.navMenuStaff a {
    align-items: center;
    color: var(--academy-cyan-dark);
    display: flex;
    font-weight: 700;
    gap: 7px;
}

.surface-academy #app > header nav > ul > li ul li.navMenuStaff a:hover {
    color: var(--academy-ink);
}

.surface-academy #app > header nav > ul > li ul li.navMenuSignOut {
    border-top: 1px solid var(--academy-line);
    margin-top: 8px;
    padding-top: 6px;
}

.surface-academy #app > header .headerBell svg {
    display: block;
}

.surface-academy #app > header .headerBell {
    color: var(--academy-muted-strong);
}

/* ==========================================================================
 * Typographic primitives
 * ======================================================================== */

.surface-academy .academyEyebrow {
    color: var(--academy-cyan-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.2;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.surface-academy .academyKicker {
    color: var(--academy-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 650;
    gap: 6px;
    letter-spacing: .01em;
    margin: 0 0 10px;
}

.surface-academy .academyStageLede {
    color: var(--academy-muted-strong);
    font-size: clamp(17px, 1.55vw, 19px);
    line-height: 1.62;
    margin: 22px 0 0;
    max-width: 34em;
}

.surface-academy .academySectionIntro {
    margin-bottom: clamp(32px, 4vw, 52px);
    max-width: 760px;
}

.surface-academy .academySectionIntro h2,
.surface-academy .academySectionTitle {
    color: var(--academy-ink);
    font-size: clamp(30px, 3.3vw, 46px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.06;
    margin: 0;
    text-wrap: balance;
}

.surface-academy .academySectionIntro > p:last-child {
    color: var(--academy-muted-strong);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.62;
    margin: 16px 0 0;
    max-width: 56ch;
}

.surface-academy .academyArrow {
    display: inline-flex;
    transition: transform 200ms ease;
}

.surface-academy .academyArrow svg {
    height: 1em;
    width: 1em;
}

.surface-academy :is(a, .academyCourseCard, .academyRoute):hover .academyArrow {
    transform: translateX(3px);
}

/*
 * Standalone links carry a 44px tap target (WCAG 2.2 SC 2.5.8). The padding is
 * cancelled by an equal negative margin, so the hit area grows without moving
 * anything. Links inline in prose keep their natural box under the exception.
 */
.surface-academy .academyTextLink {
    align-items: center;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    margin-block: -12px;
    padding-block: 12px;
    text-decoration: none;
}

.surface-academy :is(
    .academyExamHead,
    .academyOfferHead,
    .academyPathHead,
    .academyEditorial,
    .academyStepBody
) h3 a {
    display: inline-block;
    margin-block: -10px;
    padding-block: 10px;
}

.surface-academy .academyTextLink:hover {
    color: var(--academy-ink);
}

/* .srOnly comes from the shared structural layer in globals.css. */

/* ==========================================================================
 * Buttons — precise, not oversized
 * ======================================================================== */

.surface-academy .academyButton {
    align-items: center;
    background: var(--academy-ink);
    border: 1px solid var(--academy-ink);
    border-radius: var(--academy-radius-button);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 9px;
    justify-content: center;
    letter-spacing: -.005em;
    min-height: 46px;
    padding: 0 20px;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 200ms ease;
}

.surface-academy .academyButton:hover {
    background: #1c2739;
    border-color: #1c2739;
    box-shadow: var(--academy-e2);
    color: #fff;
}

.surface-academy .academyButton:active {
    box-shadow: none;
}

.surface-academy .academyButtonQuiet,
.surface-academy .academyButtonSecondary {
    background: transparent;
    border-color: var(--academy-line-strong);
    color: var(--academy-ink);
}

/* Surfaces are pure white, so a quiet button needs a translucent wash rather
 * than a tinted fill to show any hover feedback at all. */
.surface-academy :is(.academyButtonQuiet, .academyButtonSecondary):hover {
    background: rgba(11, 18, 32, .04);
    border-color: var(--academy-ink);
    box-shadow: none;
    color: var(--academy-ink);
}

.surface-academy .academyButton:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: .5;
}

/* ==========================================================================
 * Landing hero — open composition, no boxed panel
 * ======================================================================== */

.surface-academy .academyStage {
    background:
        radial-gradient(58% 46% at 78% 4%, rgba(2, 149, 185, .10), transparent 72%),
        radial-gradient(46% 40% at 6% 0%, rgba(103, 211, 236, .08), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, var(--academy-surface) 62%);
    overflow: hidden;
    padding-top: clamp(48px, 6vw, 88px);
    position: relative;
}

.surface-academy .academyStageGrid {
    align-items: center;
    display: grid;
    gap: clamp(32px, 4vw, 64px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    padding-bottom: clamp(40px, 5vw, 72px);
}

/* Sized so "Advance your future." holds one line at the column width the
 * hero grid gives it — the two-line break is the composition. */
.surface-academy .academyStageCopy h1 {
    color: var(--academy-ink);
    font-size: clamp(40px, 4.2vw, 62px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .98;
    margin: 0;
    text-wrap: balance;
}

.surface-academy .academyStageCopy h1 > span {
    display: block;
}

.surface-academy .academyStageCopy h1 > span:last-child {
    color: var(--academy-muted-strong);
}

.surface-academy .academyStageActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.surface-academy .academyStageSignal {
    align-items: center;
    color: var(--academy-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 8px;
    margin: 26px 0 0;
}

.surface-academy .academyStageSignal strong {
    color: var(--academy-ink);
    font-weight: 700;
}

.surface-academy .academyStageSignal span {
    color: var(--academy-line-strong);
}

/* Hero object slot — holds either the authored SVG or a commissioned render. */
.surface-academy .academyHeroObject {
    margin-inline: auto;
    max-width: 620px;
    width: 100%;
}

.surface-academy .academyHeroObject :is(svg, img) {
    display: block;
    height: auto;
    width: 100%;
}

.surface-academy .academyHeroFloat {
    animation: academyFloat 8s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

@keyframes academyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ==========================================================================
 * Capability strip — integrated into the hero, not four cards
 * ======================================================================== */

.surface-academy .academyCapabilityRow {
    border-top: 1px solid var(--academy-line);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: clamp(28px, 3vw, 44px);
    padding-top: clamp(28px, 3vw, 44px);
}

.surface-academy .academyCapability {
    color: inherit;
    display: block;
    padding-inline: clamp(14px, 2vw, 30px);
    position: relative;
    text-decoration: none;
}

.surface-academy .academyCapability:first-child {
    padding-inline-start: 0;
}

.surface-academy .academyCapability + .academyCapability::before {
    background: var(--academy-line);
    content: "";
    inset-block: 2px;
    inset-inline-start: 0;
    position: absolute;
    width: 1px;
}

.surface-academy .academyCapabilityIcon {
    align-items: center;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    height: 26px;
    justify-content: flex-start;
    margin-bottom: 14px;
    width: 26px;
}

.surface-academy .academyCapabilityIcon svg {
    height: 22px;
    width: 22px;
}

.surface-academy .academyCapabilityTitle {
    align-items: center;
    color: var(--academy-ink);
    display: flex;
    font-size: 15px;
    font-weight: 700;
    gap: 7px;
    letter-spacing: -.01em;
    margin-bottom: 7px;
}

.surface-academy .academyCapabilityBody {
    color: var(--academy-muted);
    display: block;
    font-size: 13.5px;
    line-height: 1.58;
    max-width: 30ch;
}

.surface-academy .academyCapability.isLinked:hover .academyCapabilityTitle {
    color: var(--academy-cyan-dark);
}

/* ==========================================================================
 * Route bento — unequal spans, each route with its own identity
 * ======================================================================== */

.surface-academy .academyRouteSection {
    background: var(--academy-surface);
}

.surface-academy .academyRouteBento {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.surface-academy .academyRoute {
    background: var(--academy-surface-soft);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-bento);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(24px, 2.6vw, 36px);
    position: relative;
    text-decoration: none;
    transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.surface-academy .academyRoute::after {
    background: radial-gradient(70% 60% at 82% 8%, rgba(2, 149, 185, .13), transparent 70%);
    content: "";
    inset: 0;
    opacity: .9;
    pointer-events: none;
    position: absolute;
    transition: opacity 260ms ease;
    z-index: -1;
}

.surface-academy .academyRoute:hover {
    border-color: rgba(2, 149, 185, .3);
    box-shadow: var(--academy-e2);
    transform: translateY(-3px);
}

.surface-academy .academyRoute:hover::after {
    opacity: 1;
}

.surface-academy .academyRoute[data-size="primary"] {
    background: linear-gradient(165deg, #101c30 0%, var(--academy-dark) 68%);
    grid-column: span 2;
    grid-row: span 2;
    justify-content: flex-end;
    min-height: 340px;
}

.surface-academy .academyRoute[data-size="primary"]::after {
    background:
        radial-gradient(58% 52% at 84% 10%, rgba(2, 149, 185, .38), transparent 68%),
        radial-gradient(40% 40% at 12% 96%, rgba(103, 211, 236, .16), transparent 70%);
}

/* Chevron watermark — gives the primary tile its own identity instead of a
 * field of empty navy, without competing with the copy that sits over it. */
.surface-academy .academyRoute[data-size="primary"]::before {
    background-image:
        linear-gradient(150deg, transparent 47%, rgba(103, 211, 236, .16) 47.6%, transparent 49%),
        linear-gradient(210deg, transparent 47%, rgba(103, 211, 236, .16) 47.6%, transparent 49%),
        linear-gradient(150deg, transparent 55%, rgba(103, 211, 236, .1) 55.6%, transparent 57%),
        linear-gradient(210deg, transparent 55%, rgba(103, 211, 236, .1) 55.6%, transparent 57%);
    content: "";
    inset: -12% -6% 26% 34%;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.surface-academy .academyRoute[data-size="wide"] {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
}

.surface-academy .academyRouteIcon {
    align-items: center;
    background: rgba(2, 149, 185, .09);
    border-radius: 14px;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    flex: 0 0 auto;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.surface-academy .academyRouteIcon svg {
    height: 23px;
    width: 23px;
}

.surface-academy .academyRoute[data-size="primary"] .academyRouteIcon {
    background: rgba(255, 255, 255, .1);
    color: var(--academy-cyan-light);
    height: 54px;
    width: 54px;
}

.surface-academy .academyRouteText {
    display: block;
    flex: 1 1 auto;
}

.surface-academy .academyRouteText h3 {
    color: var(--academy-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.24;
    margin: 0 0 8px;
}

.surface-academy .academyRouteText > span {
    color: var(--academy-muted);
    display: block;
    font-size: 14px;
    line-height: 1.58;
    max-width: 46ch;
}

.surface-academy .academyRoute[data-size="primary"] .academyRouteText h3 {
    color: #fff;
    font-size: clamp(26px, 2.3vw, 34px);
    letter-spacing: -.03em;
}

.surface-academy .academyRoute[data-size="primary"] .academyRouteText > span {
    color: rgba(255, 255, 255, .68);
    font-size: 15.5px;
    margin-top: 12px;
}

.surface-academy .academyRouteAction {
    align-items: center;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 750;
    gap: 8px;
    letter-spacing: .01em;
    margin-top: auto;
}

.surface-academy .academyRoute[data-size="wide"] .academyRouteAction {
    margin-top: 0;
}

.surface-academy .academyRoute[data-size="primary"] .academyRouteAction {
    color: var(--academy-cyan-light);
}

/* ==========================================================================
 * Catalogue — filters as controls on the page, not one outlined box
 * ======================================================================== */

.surface-academy .academyCatalogueSection {
    background: var(--academy-surface);
    scroll-margin-top: calc(var(--public-nav-offset, 68px) + 12px);
}

.surface-academy .academyFilterBar {
    border-bottom: 1px solid var(--academy-line);
    display: grid;
    gap: 18px;
    margin-bottom: clamp(28px, 3vw, 40px);
    padding-bottom: 22px;
}

.surface-academy .academyFilterPrimary {
    display: flex;
    gap: 10px;
}

.surface-academy .academySearchField {
    align-items: center;
    background: var(--academy-surface-soft);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-control);
    display: flex;
    flex: 1 1 auto;
    gap: 11px;
    padding-inline: 15px;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.surface-academy .academySearchField:focus-within {
    background: var(--academy-surface);
    border-color: var(--academy-cyan);
    box-shadow: 0 0 0 3px rgba(2, 149, 185, .13);
}

.surface-academy .academySearchField svg {
    color: var(--academy-muted);
    flex: 0 0 auto;
    height: 19px;
    width: 19px;
}

.surface-academy .academySearchField input {
    background: transparent;
    border: 0;
    color: var(--academy-ink);
    font-family: inherit;
    font-size: 15px;
    min-height: 50px;
    outline: 0;
    padding: 0;
    width: 100%;
}

.surface-academy .academySearchField input::placeholder {
    color: var(--academy-muted);
}

.surface-academy .academyFilterToggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--academy-line-strong);
    border-radius: var(--academy-radius-control);
    color: var(--academy-ink);
    cursor: pointer;
    display: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    gap: 9px;
    min-height: 50px;
    padding-inline: 16px;
}

.surface-academy .academyFilterToggle svg {
    height: 18px;
    width: 18px;
}

.surface-academy .academyFilterCount {
    background: var(--academy-cyan);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    min-width: 19px;
    padding: 2px 6px;
}

.surface-academy .academyFilterSubmit {
    flex: 0 0 auto;
    min-height: 50px;
}

.surface-academy .academyFilterFields {
    align-items: end;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.surface-academy .academySelectField {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.surface-academy .academySelectField label {
    color: var(--academy-muted-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.surface-academy .academySelectField select,
.surface-academy .academyVerifyForm input,
.surface-academy .academyInlineForm :is(input, select, textarea),
.surface-academy .academyFormGrid :is(input, select, textarea) {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line-strong);
    border-radius: var(--academy-radius-control);
    color: var(--academy-ink);
    font-family: inherit;
    font-size: 14.5px;
    min-height: 46px;
    padding: 10px 13px;
    width: 100%;
}

.surface-academy .academySelectField select:focus,
.surface-academy .academyVerifyForm input:focus,
.surface-academy .academyInlineForm :is(input, select, textarea):focus,
.surface-academy .academyFormGrid :is(input, select, textarea):focus {
    border-color: var(--academy-cyan);
    box-shadow: 0 0 0 3px rgba(2, 149, 185, .13);
    outline: 0;
}

.surface-academy .academyFilterStatus {
    align-items: center;
    color: var(--academy-muted);
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: 14px;
    justify-content: flex-end;
    margin: 0;
    min-height: 46px;
    white-space: nowrap;
}

/* Sits inside the result-count paragraph but is a control, not prose, so it
 * needs a real target. Padding cancelled by margin keeps the row unchanged. */
.surface-academy .academyFilterReset {
    color: var(--academy-cyan-dark);
    display: inline-block;
    font-weight: 700;
    margin-block: -7px;
    padding-block: 7px;
    text-decoration: none;
}

.surface-academy .academyFilterReset:hover {
    color: var(--academy-ink);
    text-decoration: underline;
}

/* ==========================================================================
 * Course card — image-led content object
 * ======================================================================== */

.surface-academy .academyCourseGrid {
    display: grid;
    gap: clamp(18px, 2vw, 28px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.surface-academy .academyCourseCard {
    background: var(--academy-surface);
    border-radius: var(--academy-radius-card);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 220ms ease, box-shadow 240ms ease;
}

.surface-academy .academyCourseCard:hover {
    box-shadow: var(--academy-e2);
    transform: translateY(-4px);
}

.surface-academy .academyCourseCard .academyCardMedia {
    background: var(--academy-surface-tint);
    border-radius: calc(var(--academy-radius-card) - 2px);
    display: block;
    overflow: hidden;
    position: relative;
}

.surface-academy .academyCourseCard .academyCardMedia > :is(img, div) {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.surface-academy .academyCourseCard .academyCardMedia > img {
    display: block;
}

.surface-academy .academyCourseCard .academyCardMedia > img {
    transition: transform 320ms ease;
}

.surface-academy .academyCourseCard:hover .academyCardMedia > img {
    transform: scale(1.03);
}

/* Uniform treatment over inconsistent CMS uploads. */
.surface-academy .academyCourseCard .academyCardMedia::after {
    background: linear-gradient(185deg, rgba(11, 18, 32, 0) 62%, rgba(11, 18, 32, .16));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.surface-academy .academyCardPlaceholder {
    align-items: center;
    background:
        radial-gradient(70% 60% at 74% 18%, rgba(2, 149, 185, .18), transparent 62%),
        linear-gradient(150deg, #f2f8fb, #dfe9ef);
    color: var(--academy-cyan-dark);
    display: flex;
    justify-content: center;
}

.surface-academy .academyCardPlaceholder svg {
    height: 40px;
    opacity: .6;
    width: 40px;
}

.surface-academy .academyCourseCardBody {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 4px 4px;
}

.surface-academy .academyCourseCardBody .academyKicker {
    color: var(--academy-cyan-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.surface-academy .academyCourseCardBody h3 {
    color: var(--academy-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.28;
    margin: 0 0 9px;
}

.surface-academy .academyCourseCardBody h3 a {
    color: inherit;
    text-decoration: none;
}

/* One hit area for the whole card without nesting interactive elements. */
.surface-academy .academyCourseCardBody h3 a::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.surface-academy .academyCourseExcerpt {
    color: var(--academy-muted);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.58;
    margin: 0 0 14px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.surface-academy .academyCourseMetaRow {
    align-items: center;
    color: var(--academy-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    gap: 6px 14px;
}

.surface-academy .academyRating {
    align-items: center;
    color: var(--academy-ink-soft);
    display: inline-flex;
    font-weight: 700;
    gap: 5px;
}

.surface-academy .academyRating svg {
    color: #c08a1e;
    height: 14px;
    width: 14px;
}

.surface-academy .academyRating small {
    color: var(--academy-muted);
    font-weight: 550;
}

.surface-academy .academyCourseCard .academyCardFooter {
    align-items: center;
    border-top: 1px solid var(--academy-line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
}

.surface-academy .academyCourseCard .academyProgress {
    margin: 4px 0 14px;
}

.surface-academy .academyPrice {
    color: var(--academy-ink);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.01em;
}

.surface-academy .academyPrice.isFree {
    color: #04785c;
}

.surface-academy .academyCardCta {
    align-items: center;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 750;
    gap: 7px;
}

.surface-academy .academyProgress {
    background: var(--academy-surface-tint);
    border-radius: 999px;
    height: 5px;
    position: relative;
}

.surface-academy .academyProgress > span {
    background: var(--academy-cyan);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.surface-academy .academyProgress small {
    color: var(--academy-muted);
    display: block;
    font-size: 11px;
    font-weight: 650;
    margin-top: 7px;
}

/* ==========================================================================
 * Learning paths — sequence, not another grid of courses
 * ======================================================================== */

.surface-academy .academyPathGrid {
    display: grid;
    gap: clamp(18px, 2vw, 26px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.surface-academy .academyPathCard {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(24px, 2.6vw, 32px);
    transition: border-color 200ms ease, box-shadow 220ms ease;
}

.surface-academy .academyPathCard:hover {
    border-color: rgba(2, 149, 185, .28);
    box-shadow: var(--academy-e2);
}

.surface-academy .academyPathHead h3 {
    color: var(--academy-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.24;
    margin: 0 0 10px;
}

.surface-academy .academyPathHead h3 a {
    color: inherit;
    text-decoration: none;
}

.surface-academy .academyPathHead > p:last-child {
    color: var(--academy-muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

.surface-academy .academyPathTrack {
    align-items: center;
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.surface-academy .academyPathTrack > li {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

/* Fixed connector length so a two-step path reads as a short sequence
 * rather than a stretched, mostly-empty rail. */
.surface-academy .academyPathTrack > li:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(2, 149, 185, .42), var(--academy-line-strong));
    content: "";
    flex: 0 1 48px;
    height: 2px;
    min-width: 16px;
    width: 48px;
}

.surface-academy .academyPathNode {
    align-items: center;
    background: var(--academy-cyan-soft);
    border: 1px solid rgba(2, 149, 185, .22);
    border-radius: 999px;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.surface-academy .academyPathMore {
    color: var(--academy-muted);
    font-size: 12px;
    font-weight: 700;
    padding-left: 8px;
}

.surface-academy .academyPathFooter {
    align-items: center;
    border-top: 1px solid var(--academy-line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
}

.surface-academy .academyPathCount {
    color: var(--academy-muted-strong);
    font-size: 13px;
    font-weight: 650;
}

.surface-academy .academyPathCard > .academyButton {
    align-self: flex-start;
}

/* Numbered sequence on the path detail page. */
.surface-academy .academyStepList {
    counter-reset: none;
    display: grid;
    gap: 0;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.surface-academy .academyStepList > li {
    display: grid;
    gap: 18px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 22px 0;
    position: relative;
}

.surface-academy .academyStepList > li + li {
    border-top: 1px solid var(--academy-line);
}

.surface-academy .academyStepIndex {
    align-items: center;
    background: var(--academy-surface-soft);
    border: 1px solid var(--academy-line);
    border-radius: 12px;
    color: var(--academy-cyan-dark);
    display: inline-flex;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.surface-academy .academyStepBody h3 {
    color: var(--academy-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 0 0 7px;
}

.surface-academy .academyStepBody h3 a {
    color: inherit;
    text-decoration: none;
}

.surface-academy .academyStepBody h3 a:hover {
    color: var(--academy-cyan-dark);
}

.surface-academy .academyStepBody > p {
    color: var(--academy-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
 * Sub-surface heroes
 * ======================================================================== */

.surface-academy .academySurfaceHero {
    background:
        radial-gradient(52% 44% at 88% 2%, rgba(2, 149, 185, .10), transparent 70%),
        linear-gradient(180deg, #ffffff, var(--academy-surface) 70%);
    overflow: hidden;
    padding: clamp(44px, 5.6vw, 84px) 0 clamp(32px, 4vw, 56px);
}

.surface-academy .academySurfaceHeroGrid {
    align-items: center;
    display: grid;
    gap: clamp(24px, 3.4vw, 56px);
    grid-template-columns: minmax(0, 1fr);
}

.surface-academy .academySurfaceHero.hasVisual .academySurfaceHeroGrid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

.surface-academy .academySurfaceHeroCopy h1 {
    color: var(--academy-ink);
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0;
    text-wrap: balance;
}

.surface-academy .academySurfaceHeroCopy h1 > span {
    display: block;
}

.surface-academy .academySurfaceHeroCopy h1 > span:last-child {
    color: var(--academy-muted-strong);
}

.surface-academy .academySurfaceHeroVisual .academyHeroObject {
    max-width: 520px;
}

/* Three horizontal benefits under the exam hero. */
.surface-academy .academyBenefitRow {
    border-top: 1px solid var(--academy-line);
    display: grid;
    gap: clamp(20px, 3vw, 44px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: clamp(12px, 2vw, 20px);
    padding-top: clamp(28px, 3.4vw, 44px);
}

.surface-academy .academyBenefitTitle {
    color: var(--academy-ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 8px;
}

.surface-academy .academyBenefit > p {
    color: var(--academy-muted);
    font-size: 14px;
    line-height: 1.58;
    margin: 0;
    max-width: 34ch;
}

/* Legacy plain hero, still used by detail pages. */
.surface-academy .academyHero {
    background: var(--academy-surface-soft);
    border-bottom: 1px solid var(--academy-line);
    padding: clamp(44px, 5vw, 74px) 0;
}

.surface-academy .academyHero h1 {
    color: var(--academy-ink);
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 700;
    letter-spacing: -.038em;
    line-height: 1.05;
    margin: 0;
    max-width: 900px;
    text-wrap: balance;
}

.surface-academy .academyHero > div > p:last-child {
    color: var(--academy-muted-strong);
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.62;
    margin: 18px 0 0;
    max-width: 60ch;
}

.surface-academy .academyCourseHero,
.surface-academy .academyLearnerHero {
    background:
        radial-gradient(48% 60% at 92% 12%, rgba(2, 149, 185, .26), transparent 66%),
        linear-gradient(160deg, #101c30, var(--academy-dark) 72%);
    border: 0;
    color: #fff;
    overflow: hidden;
    padding: clamp(44px, 5.4vw, 74px) 0;
    position: relative;
}

.surface-academy :is(.academyCourseHero, .academyLearnerHero) .pageContainer {
    position: relative;
    z-index: 1;
}

.surface-academy :is(.academyCourseHero, .academyLearnerHero) .academyEyebrow {
    color: var(--academy-cyan-light);
}

.surface-academy :is(.academyCourseHero, .academyLearnerHero) h1 {
    color: #fff;
    font-size: clamp(32px, 4.2vw, 54px);
    font-weight: 700;
    letter-spacing: -.038em;
    line-height: 1.05;
    max-width: 940px;
    text-wrap: balance;
}

.surface-academy .academyLearnerHero .pageContainer > p:last-child {
    color: rgba(255, 255, 255, .66);
    font-size: 16px;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 60ch;
}

.surface-academy .academyHeroMeta {
    gap: 8px;
    margin-top: 22px;
}

.surface-academy .academyHeroMeta span {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    padding: 8px 11px;
}

/* ==========================================================================
 * Exam cards — compact information/action objects
 * ======================================================================== */

.surface-academy .academyExamGrid {
    display: grid;
    gap: clamp(16px, 1.8vw, 22px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.surface-academy .academyExamCard {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 2.2vw, 28px);
    transition: border-color 200ms ease, box-shadow 220ms ease;
}

.surface-academy .academyExamCard:hover {
    border-color: rgba(2, 149, 185, .28);
    box-shadow: var(--academy-e1);
}

.surface-academy .academyExamHead {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.surface-academy .academyExamHead h3 {
    color: var(--academy-ink);
    display: -webkit-box;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.surface-academy .academyExamHead h3 a {
    color: inherit;
    text-decoration: none;
}

.surface-academy .academyExamHead h3 a:hover {
    color: var(--academy-cyan-dark);
}

.surface-academy .academyStatus {
    background: var(--academy-cyan-soft);
    border-radius: 999px;
    color: var(--academy-cyan-dark);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 6px 11px;
    text-transform: uppercase;
    white-space: nowrap;
}

.surface-academy .academyStatus.isClosed {
    background: rgba(15, 23, 42, .06);
    color: var(--academy-muted-strong);
}

.surface-academy .academyExamExcerpt {
    color: var(--academy-muted);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.58;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.surface-academy .academyExamFacts {
    border-top: 1px solid var(--academy-line);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding-top: 16px;
}

.surface-academy .academyExamFacts dt {
    color: var(--academy-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.surface-academy .academyExamFacts dd {
    color: var(--academy-ink);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    margin: 5px 0 0;
}

.surface-academy .academyExamCard > .academyButton {
    align-self: flex-start;
    margin-top: auto;
}

/* ==========================================================================
 * Scholarship offers
 * ======================================================================== */

.surface-academy .academyOfferGrid {
    display: grid;
    gap: clamp(16px, 1.8vw, 24px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.surface-academy .academyOfferCard {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(22px, 2.2vw, 28px);
    transition: border-color 200ms ease, box-shadow 220ms ease;
}

.surface-academy .academyOfferCard:hover {
    border-color: rgba(2, 149, 185, .28);
    box-shadow: var(--academy-e1);
}

.surface-academy .academyOfferHead h3 {
    color: var(--academy-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.28;
    margin: 0 0 9px;
}

.surface-academy .academyOfferHead h3 a {
    color: inherit;
    text-decoration: none;
}

.surface-academy .academyOfferHead > p:last-child {
    color: var(--academy-muted);
    font-size: 14px;
    line-height: 1.58;
    margin: 0;
}

.surface-academy .academyOfferFooter {
    align-items: center;
    border-top: 1px solid var(--academy-line);
    color: var(--academy-muted-strong);
    display: flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 650;
    gap: 10px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
}

.surface-academy .academyOfferCard > .academyButton {
    align-self: flex-start;
}

/* ==========================================================================
 * Editorial summaries
 * ======================================================================== */

.surface-academy .academyEditorialStack {
    display: grid;
    gap: clamp(32px, 4vw, 56px);
}

.surface-academy .academyEditorialGrid {
    border-top: 1px solid var(--academy-line);
    display: grid;
    gap: 0 clamp(28px, 3.4vw, 56px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.surface-academy .academyEditorial {
    padding: clamp(26px, 3vw, 38px) 0;
}

.surface-academy .academyEditorial.isFeatured {
    border-bottom: 1px solid var(--academy-line);
    max-width: 46em;
    padding-top: 0;
}

/* Column rule belongs to the right-hand column only, and row rules start at
 * the second row — an adjacent-sibling selector would mark every item after
 * the first, including the left column. */
.surface-academy .academyEditorialGrid > .academyEditorial:nth-child(even) {
    box-shadow: -1px 0 0 var(--academy-line);
    padding-inline-start: clamp(28px, 3.4vw, 56px);
}

.surface-academy .academyEditorialGrid > .academyEditorial:nth-child(n + 3) {
    border-top: 1px solid var(--academy-line);
}

.surface-academy .academyEditorial h3 {
    color: var(--academy-ink);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.18;
    margin: 0 0 14px;
    text-wrap: balance;
}

.surface-academy .academyEditorial.isFeatured h3 {
    font-size: clamp(30px, 3.4vw, 46px);
    letter-spacing: -.036em;
    line-height: 1.06;
}

.surface-academy .academyEditorial h3 a {
    color: inherit;
    text-decoration: none;
}

.surface-academy .academyEditorial h3 a:hover {
    color: var(--academy-cyan-dark);
}

.surface-academy .academyEditorialExcerpt {
    color: var(--academy-muted-strong);
    font-size: 15.5px;
    line-height: 1.68;
    margin: 0 0 18px;
    max-width: 58ch;
}

.surface-academy .academyEditorial.isFeatured .academyEditorialExcerpt {
    font-size: clamp(16.5px, 1.5vw, 19px);
}

/* ==========================================================================
 * Empty states — low density, contextual, never a dashed box
 * ======================================================================== */

.surface-academy .academyStatePanel {
    align-items: center;
    background:
        radial-gradient(58% 70% at 50% 0%, rgba(2, 149, 185, .07), transparent 72%),
        var(--academy-surface-soft);
    border-radius: var(--academy-radius-bento);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(48px, 6vw, 84px) 28px;
    text-align: center;
}

.surface-academy .academyStateIcon {
    align-items: center;
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: 16px;
    box-shadow: var(--academy-e1);
    color: var(--academy-cyan-dark);
    display: inline-flex;
    height: 54px;
    justify-content: center;
    margin-bottom: 6px;
    width: 54px;
}

.surface-academy .academyStateIcon svg {
    height: 24px;
    width: 24px;
}

.surface-academy .academyStatePanel h3 {
    color: var(--academy-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.022em;
    margin: 0;
}

.surface-academy .academyStatePanel > p {
    color: var(--academy-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 44ch;
}

.surface-academy .academyStatePanel .academyButton {
    margin-top: 12px;
}

/* ==========================================================================
 * Sections, detail layouts, content panels
 * ======================================================================== */

.surface-academy .academySection {
    padding: clamp(56px, 6.4vw, 96px) 0;
}

.surface-academy .academySectionTint {
    background: var(--academy-surface-soft);
    border-top: 1px solid var(--academy-line);
    scroll-margin-top: calc(var(--public-nav-offset, 68px) + 12px);
}

.surface-academy .academyDetailLayout {
    gap: clamp(24px, 3vw, 44px);
    grid-template-columns: minmax(0, 1.72fr) minmax(300px, .78fr);
}

.surface-academy .academyPanel {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    box-shadow: none;
    color: var(--academy-muted-strong);
    font-size: 15px;
    line-height: 1.7;
    padding: clamp(24px, 3vw, 34px);
}

.surface-academy .academyPanel h2 {
    color: var(--academy-ink);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.25;
}

.surface-academy .academyEnrollPanel {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    box-shadow: var(--academy-e1);
    gap: 16px;
    padding: 22px;
    top: calc(var(--public-nav-offset, 68px) + 18px);
}

.surface-academy .academyLargeValue {
    color: var(--academy-ink);
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -.025em;
    margin: 0;
}

.surface-academy .academyCurriculum details {
    border-color: var(--academy-line);
    border-radius: var(--academy-radius-control);
}

.surface-academy .academyCurriculum summary {
    font-size: 14.5px;
    min-height: 52px;
    padding: 15px 16px;
}

.surface-academy .academyLessonRow {
    border-top-color: var(--academy-line);
    font-size: 13.5px;
    padding: 13px 16px;
}

.surface-academy .academyChips span {
    background: var(--academy-surface-soft);
    border: 1px solid var(--academy-line);
    border-radius: 8px;
    color: var(--academy-ink-soft);
    font-size: 12.5px;
    font-weight: 650;
    padding: 8px 11px;
}

.surface-academy .academyReading {
    color: var(--academy-ink-soft);
    font-size: 17px;
    line-height: 1.8;
    margin-inline: auto;
    max-width: 68ch;
}

.surface-academy .paginationNav {
    margin-top: clamp(32px, 3.4vw, 44px);
}

.surface-academy .paginationNav a {
    border-color: var(--academy-line-strong);
    border-radius: var(--academy-radius-control);
    color: var(--academy-ink-soft);
    font-size: 14px;
    font-weight: 650;
    height: 44px;
    min-width: 44px;
}

.surface-academy .paginationNav a:hover {
    border-color: var(--academy-ink);
    color: var(--academy-ink);
}

.surface-academy .paginationNav a[aria-current="page"] {
    background: var(--academy-ink);
    border-color: var(--academy-ink);
    color: #fff;
}

/* ==========================================================================
 * Learner surfaces — kept aligned with the new token set
 * ======================================================================== */

.surface-academy .academyLearnerStack {
    gap: 32px;
}

.surface-academy .academyStatGrid {
    gap: 16px;
}

.surface-academy .academyStatGrid > div {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    box-shadow: var(--academy-e1);
    padding: 22px;
    position: relative;
}

.surface-academy .academyStatGrid strong {
    color: var(--academy-ink);
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -.03em;
}

.surface-academy .academyLearningGrid,
.surface-academy .academyDashboardGrid {
    gap: 20px;
}

.surface-academy :is(
    .academyCard,
    .academyLearningCard,
    .academyNotification,
    .academyQuestionBlock,
    .academyLessonAside,
    .academyCertificateCard,
    .academyVerificationResult,
    .academyVerifyForm,
    .academyCheckoutPayment,
    .academyCheckoutSummary
) {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line);
    border-radius: var(--academy-radius-card);
    box-shadow: var(--academy-e1);
}

.surface-academy .academyLearningCard {
    grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
    transition: border-color 180ms ease, box-shadow 200ms ease;
}

.surface-academy .academyLearningCard:hover {
    border-color: rgba(2, 149, 185, .3);
    box-shadow: var(--academy-e2);
}

.surface-academy .academyLearningCard > div {
    padding: 20px;
}

.surface-academy .academyLearningCard h2 {
    color: var(--academy-ink);
    font-size: 18px;
    font-weight: 700;
}

.surface-academy .academySectionRow h2 {
    color: var(--academy-ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.surface-academy .academySectionRow a,
.surface-academy .academyResourceLink {
    color: var(--academy-cyan-dark);
}

.surface-academy .academyListRow {
    border-top-color: var(--academy-line);
    padding: 14px 0;
}

.surface-academy .academyLessonHeader {
    background: var(--academy-surface-soft);
    border-bottom: 1px solid var(--academy-line);
    padding: 36px 0;
}

.surface-academy .academyLessonHeader h1 {
    color: var(--academy-ink);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -.032em;
}

.surface-academy .academyLessonLayout {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.surface-academy .academyVideoFrame,
.surface-academy .academyLessonAside,
.surface-academy .academyTableWrap {
    border-radius: var(--academy-radius-card);
}

.surface-academy .academyNotification.isUnread {
    border-left: 3px solid var(--academy-cyan);
}

.surface-academy .academyTableWrap {
    border-color: var(--academy-line);
    box-shadow: var(--academy-e1);
}

.surface-academy .academyTable th {
    background: var(--academy-surface-soft);
    color: var(--academy-ink);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.surface-academy .academyTable :is(th, td) {
    border-bottom-color: var(--academy-line);
    padding: 14px 16px;
}

/* ==========================================================================
 * Authentication — calm, elevated, atmospheric
 * ======================================================================== */

.surface-academy .academyAuthSection {
    align-items: center;
    background: var(--academy-surface);
    display: flex;
    justify-content: center;
    min-height: calc(100dvh - var(--public-nav-offset, 68px));
    overflow: hidden;
    padding: clamp(40px, 6vw, 80px) 20px;
    position: relative;
}

.surface-academy .academyAuthAtmosphere {
    background:
        radial-gradient(38% 34% at 22% 12%, rgba(2, 149, 185, .16), transparent 70%),
        radial-gradient(44% 40% at 84% 86%, rgba(103, 211, 236, .14), transparent 72%),
        radial-gradient(70% 50% at 50% 50%, rgba(238, 244, 248, .9), transparent 75%);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.surface-academy .academyAuthCard {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    box-shadow: var(--academy-e3);
    max-width: 460px;
    padding: clamp(30px, 3.4vw, 42px);
    position: relative;
    width: 100%;
}

.surface-academy .academyAuthCard::before {
    content: none;
}

.surface-academy .academyAuthCard h1 {
    color: var(--academy-ink);
    font-size: clamp(28px, 2.8vw, 34px);
    font-weight: 700;
    letter-spacing: -.032em;
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

.surface-academy .academyAuthIntro {
    color: var(--academy-muted);
    font-size: 15px;
    line-height: 1.58;
    margin: 12px 0 26px;
    padding: 0;
}

.surface-academy .academyGoogleButton {
    align-items: center;
    background: var(--academy-surface);
    border: 1px solid var(--academy-line-strong);
    border-radius: var(--academy-radius-button);
    color: var(--academy-ink);
    display: flex;
    font-size: 14.5px;
    font-weight: 650;
    gap: 11px;
    justify-content: center;
    min-height: 48px;
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease;
    width: 100%;
}

.surface-academy .academyGoogleButton:hover {
    background: rgba(11, 18, 32, .04);
    border-color: var(--academy-ink);
}

.surface-academy .academyAuthDivider {
    align-items: center;
    color: var(--academy-muted);
    display: flex;
    font-size: 12px;
    font-weight: 650;
    gap: 14px;
    margin: 22px 0;
}

.surface-academy .academyAuthDivider::before,
.surface-academy .academyAuthDivider::after {
    background: var(--academy-line);
    content: "";
    flex: 1 1 auto;
    height: 1px;
}

.surface-academy .academyAuthForm {
    display: grid;
    gap: 16px;
}

.surface-academy .academyAuthForm label {
    color: var(--academy-ink-soft);
    display: grid;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
}

.surface-academy .academyAuthForm input {
    background: var(--academy-surface);
    border: 1px solid var(--academy-line-strong);
    border-radius: var(--academy-radius-control);
    color: var(--academy-ink);
    font-family: inherit;
    font-size: 15px;
    min-height: 48px;
    padding: 11px 14px;
    width: 100%;
}

.surface-academy .academyAuthForm input:focus {
    border-color: var(--academy-cyan);
    box-shadow: 0 0 0 3px rgba(2, 149, 185, .13);
    outline: 0;
}

.surface-academy .academyAuthForm .academyButton {
    margin-top: 6px;
    min-height: 48px;
    width: 100%;
}

.surface-academy .academyAuthLinks {
    align-items: center;
    color: var(--academy-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13.5px;
    gap: 8px 18px;
    justify-content: space-between;
    margin-top: 22px;
}

.surface-academy .academyAuthLinks a {
    color: var(--academy-cyan-dark);
    font-weight: 650;
    text-decoration: none;
}

.surface-academy .academyAuthLinks a:hover {
    text-decoration: underline;
}

.surface-academy :is(.academyFormError, .academyFormSuccess) {
    border-radius: var(--academy-radius-control);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    padding: 12px 14px;
}

.surface-academy .academyFormError {
    background: #fef2f2;
    color: #9f1239;
}

.surface-academy .academyFormSuccess {
    background: var(--academy-cyan-soft);
    color: var(--academy-cyan-dark);
}

/* ==========================================================================
 * Footer
 * ======================================================================== */

.surface-academy #app footer.footerSite--academy {
    background: var(--academy-dark);
}

.surface-academy #app footer.footerSite--academy :is(.footerDirect a, .footerLinks a:hover, .footerBottom a:hover) {
    color: var(--academy-cyan-light);
}

.surface-academy #app footer.footerSite--academy .footerGroup h3 {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ==========================================================================
 * Responsive — recomposed, not shrunk
 * ======================================================================== */

@media (max-width: 1199.98px) {
    .surface-academy .academyStageGrid {
        gap: 32px;
        grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
    }

    .surface-academy .academyCourseGrid,
    .surface-academy .academyOfferGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body.surface-academy #app > header nav > ul > li > :is(a, button) {
        font-size: 13.5px;
        padding-inline: 9px;
    }

    html body.surface-academy #app > header nav > ul > li.isActive > a::after {
        left: 9px;
        right: 9px;
    }
}

@media (max-width: 991.98px) {
    html body.surface-academy {
        --public-nav-offset: 60px;
    }

    html body.surface-academy #app > header {
        border-radius: 0;
        left: 0;
        padding: 0;
        right: 0;
        top: 0;
    }

    html body.surface-academy #app > header .container-fluid > .row .col-12 {
        height: 60px;
    }

    /* Mobile hero: copy first, visual after. */
    .surface-academy .academyStageGrid,
    .surface-academy .academySurfaceHero.hasVisual .academySurfaceHeroGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyStageVisual,
    .surface-academy .academySurfaceHeroVisual {
        order: 2;
    }

    .surface-academy .academyHeroObject {
        max-width: 440px;
    }

    .surface-academy .academyCapabilityRow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 0;
    }

    .surface-academy .academyCapability:nth-child(3) {
        padding-inline-start: 0;
    }

    .surface-academy .academyCapability:nth-child(3)::before {
        content: none;
    }

    .surface-academy .academyRouteBento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .surface-academy .academyRoute[data-size="primary"] {
        grid-column: span 2;
        grid-row: auto;
        min-height: 260px;
    }

    .surface-academy .academyRoute[data-size="wide"] {
        grid-column: span 2;
    }

    .surface-academy .academyBenefitRow {
        gap: 24px;
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyDetailLayout,
    .surface-academy .academyLessonLayout {
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyEnrollPanel,
    .surface-academy .academyLessonAside {
        position: static;
    }

    .surface-academy .academyEditorialGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyEditorialGrid > .academyEditorial:nth-child(even),
    .surface-academy .academyEditorialGrid > .academyEditorial:nth-child(n + 3) {
        border-top: 1px solid var(--academy-line);
        box-shadow: none;
        padding-inline-start: 0;
    }

    /* 11px uppercase labels read fine on a desktop monitor and are marginal on
     * anything held in the hand. The phone-only cliff at 767.98px left a tablet
     * in portrait — exactly 768px — on the desktop treatment, so the smallest
     * type steps up across the whole handheld range instead. */
    .surface-academy :is(.academyEyebrow, .academyStatus, .academyProgress small),
    .surface-academy .academyCourseCardBody .academyKicker,
    .surface-academy .academyExamFacts dt,
    .surface-academy .academyRating small,
    .surface-academy .academyTable th {
        font-size: 12px;
    }
}

@media (max-width: 767.98px) {
    .surface-academy .pageContainer {
        padding-inline: 18px;
    }

    .surface-academy .academyStageCopy h1 {
        font-size: clamp(42px, 11.5vw, 52px);
    }

    .surface-academy .academyStageActions {
        display: grid;
    }

    .surface-academy .academyStageActions .academyButton {
        width: 100%;
    }

    .surface-academy .academyCourseGrid,
    .surface-academy .academyExamGrid,
    .surface-academy .academyOfferGrid,
    .surface-academy .academyPathGrid,
    .surface-academy .academyRouteBento,
    .surface-academy .academyLearningGrid,
    .surface-academy .academyDashboardGrid,
    .surface-academy .academyStatGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyRoute[data-size="primary"],
    .surface-academy .academyRoute[data-size="wide"] {
        grid-column: auto;
    }

    .surface-academy .academyRoute[data-size="wide"] {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Refinement moves into a sheet; search and submit stay in reach. */
    .surface-academy .academyFilterToggle {
        display: inline-flex;
    }

    .surface-academy .academyFilterPrimary {
        flex-wrap: wrap;
    }

    .surface-academy .academySearchField {
        flex-basis: 100%;
    }

    .surface-academy .academyFilterToggle,
    .surface-academy .academyFilterSubmit {
        flex: 1 1 0;
    }

    .surface-academy .academyFilterFields {
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyFilterFields[data-open="false"] {
        display: none;
    }

    .surface-academy .academyFilterStatus {
        justify-content: space-between;
        min-height: 0;
    }

    .surface-academy .academyExamFacts {
        gap: 10px;
    }

    .surface-academy .academyLearningCard {
        grid-template-columns: minmax(0, 1fr);
    }

    .surface-academy .academyLearningCard > img {
        aspect-ratio: 16 / 9;
    }

    .surface-academy .academyStepList > li {
        gap: 14px;
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .surface-academy .academyStepIndex {
        height: 38px;
        width: 38px;
    }

    .surface-academy .academyTableWrap {
        overflow-x: auto;
    }
}

@media (max-width: 429.98px) {
    .surface-academy .academyCapabilityRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .surface-academy .academyCapability {
        padding-inline: 0;
    }

    .surface-academy .academyCapability + .academyCapability::before {
        content: none;
    }

    .surface-academy .academyPathTrack > li:not(:last-child)::after {
        min-width: 8px;
    }

    .surface-academy .academyPathNode {
        height: 28px;
        width: 28px;
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface-academy *,
    .surface-academy *::before,
    .surface-academy *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: .01ms;
    }

    .surface-academy .academyHeroFloat {
        animation: none;
    }

    .surface-academy :is(.academyCourseCard, .academyRoute, .academyButton):hover {
        transform: none;
    }

    .surface-academy .academyCourseCard:hover .academyCardMedia > img,
    .surface-academy :is(a, .academyCourseCard, .academyRoute):hover .academyArrow {
        transform: none;
    }
}