/* ============================================================
   LP-ASAE — ASAE 2026 campaign LP (/lp/asae/)
   ============================================================
   Namespace: .asae-* under body class .lp-asae.page-lp-asae.
   Dark hero over the Indianapolis skyline, then a light chapter
   one (60% beat → four ways on the rail → score CTA), Component
   Lab #11 case-study carousel, promo tiles, SME-style dark
   member-stat strip + library, chat FAQ and meet-us on one tint.
   Stats are static — no count-ups anywhere.
   ============================================================ */

@import url("/css/lab/case-study-carousel.css");
@import url("/css/lab/scroll-feature-rail.css");
@import url("/css/lab/promo-tile-grid.css");
@import url("/css/lab/chat-faq.css");
@import url("/css/education-score.css");

.lp-asae {
    --asae-ink: #1a1a24;
    --asae-ink-soft: #23232f;
    --asae-paper: #fbfaf7;
    --asae-tint: #f1f1f6;
    --asae-line-dark: rgba(255, 255, 255, 0.14);
    --asae-line-light: rgba(0, 0, 0, 0.09);
    --asae-grad-stat: linear-gradient(120deg, var(--color-accent-tertiary) 0%, var(--color-accent-tertiary-light) 100%);
    --asae-grad-accent: linear-gradient(110deg, var(--color-accent-tertiary-light) 0%, var(--color-accent-primary-light) 100%);
    --asae-beat-width: 60rem;   /* 960px */
    --asae-rail-width: 75rem;   /* 1200px */
}

.lp-asae main {
    overflow-x: clip;
}

/* ---------- Generic pieces ---------- */

.asae-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.asae-btn--primary {
    background: var(--color-accent-primary);
    color: #fff;
}

.asae-btn--primary:hover {
    background: var(--color-accent-primary-dark);
}

.asae-btn--primary:active {
    transform: scale(0.98);
}

.asae-btn--primary:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.asae-btn--lg {
    font-size: var(--text-xl);
    padding: 1.15rem 2.25rem;
}

.asae-accent {
    background: var(--asae-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.asae-statnum {
    font-family: var(--font-heading);
    font-weight: var(--weight-black);
    background: var(--asae-grad-stat);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: var(--leading-none);
}

.asae-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.asae-textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-accent-tertiary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.asae-textlink i {
    transition: transform var(--transition-base);
}

/* The underline goes on the text span, not the link. A decoration set on the
   link paints across its whole inline box, which can carry it under the arrow
   depending on how Font Awesome renders the icon; a descendant cannot opt out
   of an inherited decoration, so the only reliable fix is to never set it on
   the parent. */
.asae-textlink:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.asae-textlink:hover i {
    transform: translateX(4px);
}

.asae-ruleslink {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--text-small);
    color: inherit;
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.asae-ruleslink:hover {
    opacity: 1;
}

/* ============================================================
   CHAPTER 1 — dark canvas
   ============================================================ */

.page-lp-asae .asae-ch1 {
    position: relative;
    background: var(--asae-ink);
    color: #fff;
    isolation: isolate;
}

/* ---------- Hero over the Indianapolis skyline ---------- */

.asae-hero {
    position: relative;
    padding: calc(80px + 7rem) var(--space-section-x) 7rem;
    overflow: hidden;
}

.asae-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("/images/lp/asae/asae-hero-indianapolis.jpg");
    background-size: cover;
    background-position: center 32%;
}

/* Readability scrim + fade into the ink canvas below */
.asae-hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(26, 26, 36, 0.86) 0%, rgba(26, 26, 36, 0.62) 48%, rgba(26, 26, 36, 0.3) 100%);
}

.asae-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 26, 36, 0.35) 0%, rgba(26, 26, 36, 0) 30%, rgba(26, 26, 36, 0.55) 68%, var(--asae-ink) 100%);
}

.asae-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.asae-hero .asae-eyebrow {
    color: var(--color-accent-tertiary-light);
    margin-bottom: var(--space-md);
    display: block;
}

.asae-hero h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: var(--leading-tight);
    font-weight: var(--weight-black);
    max-width: 56rem;
    margin: 0 0 var(--space-lg);
}

.asae-hero__sub {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    line-height: var(--leading-snug);
    max-width: 40rem;
    margin: 0 0 var(--space-xl);
}

.asae-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.asae-hero__prizes {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.asae-hero__prizes i {
    color: var(--color-accent-secondary);
    margin-right: 0.4rem;
}

/* Hero entrance: staggered word rise (JS wraps words in .asae-w) */
.page-lp-asae .asae-hero .asae-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.5s ease, transform 0.5s var(--easing-smooth);
    transition-delay: var(--d, 0s);
}

.page-lp-asae .asae-hero.is-in .asae-w {
    opacity: 1;
    transform: translateY(0);
}

/* The accent phrases are multi-word, and .asae-w's inline-block would make
   each one an unbreakable unit that drops to its own line early on narrow
   screens. They stay inline so they wrap word by word like the rest of the
   headline; box-decoration-break: slice keeps one continuous gradient sweep
   across the fragments. Cost is the rise — inline boxes can't be
   transformed — so accent phrases fade in on the same stagger instead. */
.page-lp-asae .asae-hero .asae-accent.asae-w {
    display: inline;
    transform: none;
    box-decoration-break: slice;
    -webkit-box-decoration-break: slice;
}

/* ============================================================
   CHAPTER ONE — structure
   ============================================================
   The 60% beat, the four dimensions on lab #34's rail, and the score CTA.
   Layout only; colour lives in "CHAPTER ONE — the look" below.
   ============================================================ */

/* ---------- The 60% beat ---------- */

.asae-beat {
    padding: var(--space-section-y) var(--space-section-x);
}

/* The beat and the rail are two halves of one chapter, so the boundary
   between them gets a single section's worth of space rather than both
   sections' padding stacking into a 256px hole. */
.asae-ch .asae-beat {
    padding-bottom: 0;
}

.asae-beat__inner {
    /* 960px — narrow enough that the two text columns stay readable */
    max-width: var(--asae-beat-width);
    margin: 0 auto;
}

.asae-beat__num {
    display: block;
    text-align: center;
    font-size: clamp(4.5rem, 9vw, 8rem);
    line-height: 0.88;
    margin-bottom: var(--space-lg);
    /* The wash: a wide gradient clipped to the glyphs, easing back and forth.
       Same technique as component lab #29, slowed down so it reads as a slow
       shimmer rather than an animation. */
    background-size: 300% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: asae-wash 14s ease-in-out infinite alternate;
}

@keyframes asae-wash {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.asae-beat__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

.asae-beat__line {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin: 0;
}

@media (max-width: 767px) {
    .asae-beat__cols {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* ---------- Four Ways on the rail (Component Lab #34) ---------- */

.page-lp-asae .asae-rail {
    background: transparent;
    padding: var(--space-section-y) var(--space-section-x);
}

.page-lp-asae .asae-rail .sfr__inner {
    /* 1200px */
    max-width: var(--asae-rail-width);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
}

.page-lp-asae .asae-rail .sfr__media {
    height: auto;
    top: 7.5rem;
    padding: var(--space-xl);
}

/* Standard site title treatment: h2 at --text-h2 capped at 800px, an intro
   paragraph beneath, left aligned. Matches the section heads on the rest of
   the site. Sits above the two columns, sharing the rail's 1200px measure. */
.page-lp-asae .asae-rail__head {
    max-width: var(--asae-rail-width);
    margin: 0 auto var(--space-2xl);
}

.page-lp-asae .asae-rail__head h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    max-width: 800px;
    margin: 0 0 var(--space-md);
}

.page-lp-asae .asae-rail__intro {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    max-width: 600px;
    margin: 0;
}

/* Rows: one shape language. Every row is a rounded block with a hairline
   divider drawn as a pseudo-element inset to the text, so the active row's
   rounded highlight never sits against a square full-width border. */
.page-lp-asae .asae-rail .sfr-item {
    position: relative;
    border: none;
    border-radius: var(--radius-lg);
    margin-bottom: 0;
    box-shadow: none;
}

.page-lp-asae .asae-rail .sfr-item + .sfr-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--asae-rail-pad);
    right: var(--asae-rail-pad);
    height: 1px;
    transition: opacity var(--transition-base);
}

/* The divider retracts around the active row so the rounded highlight reads
   as one clean shape */
.page-lp-asae .asae-rail .sfr-item.is-active::before,
.page-lp-asae .asae-rail .sfr-item.is-active + .sfr-item::before {
    opacity: 0;
}

/* Rows read as panels: doubled vertical padding and an icon at ~2.5× the
   lab's size. The two variables keep the icon's own box and the text indent
   (used by both the question and its description) in one place. */
.page-lp-asae .asae-rail {
    --asae-rail-icon: 3.5rem;
    --asae-rail-icon-gap: 4.5rem;  /* 3× the --space-lg it replaced */
    --asae-rail-pad: 2.25rem;      /* 36px — --space-lg plus 50% */
    --asae-rail-indent: calc(var(--asae-rail-pad) + var(--asae-rail-icon) + var(--asae-rail-icon-gap));
}

/* The icon is positioned rather than laid out. In flow it is a 56px flex item,
   which is taller than a one-line question (26px) — so it, not the text, set
   the row height, and the gap under a one-line title came out ~26px larger
   than under a two-line one. Out of flow, the text always sets the height and
   the title-to-body gap is identical on every panel. */
.page-lp-asae .asae-rail .sfr-item__toggle {
    position: relative;
    display: block;
    padding: var(--space-2xl) var(--asae-rail-pad);
    padding-left: var(--asae-rail-indent);
    font-size: var(--text-h6);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

/* Collapsed rows carry the full doubled padding top and bottom. On the open
   row the description supplies the bottom, so the toggle tightens to a normal
   gap rather than leaving 48px between question and answer. */
.page-lp-asae .asae-rail .sfr-item.is-active .sfr-item__toggle {
    padding-bottom: var(--space-lg);
}

.page-lp-asae .asae-rail .sfr-item__toggle i {
    position: absolute;
    left: var(--asae-rail-pad);
    top: var(--space-2xl);
    width: var(--asae-rail-icon);
    font-size: var(--asae-rail-icon);
    line-height: 1;
    text-align: center;
    transition: color var(--transition-base);
}

.page-lp-asae .asae-rail .sfr-item__desc {
    padding: 0 var(--asae-rail-pad) var(--space-2xl);
    padding-left: var(--asae-rail-indent);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
}

/* CTA: no container, just content on the page */
.asae-railcta {
    margin-top: var(--space-3xl);
}

.asae-railcta h2 {
    font-size: var(--text-h3);
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-md);
    max-width: 800px;
}

.asae-railcta > p {
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-md);
    max-width: 600px;
}

.asae-railcta__prize {
    font-size: var(--text-small);
    margin: 0 0 var(--space-lg) !important;
}

.asae-railcta__prize i {
    color: var(--color-accent-secondary);
    margin-right: 0.35rem;
}

/* Below the rail's breakpoint the lab hides the sticky panel; the score card
   is the point of the section, so it comes back inline above the questions. */
@media (max-width: 991px) {
    .page-lp-asae .asae-rail .sfr__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .page-lp-asae .asae-rail .sfr__media {
        display: block;
        position: static;
        max-width: 26rem;
    }
}

@media (max-width: 767px) {
    /* The card is capped at 26rem and sat flush left with the leftover space
       all on one side; centre it so the ring reads as the middle of the
       column rather than off to one edge. */
    .page-lp-asae .asae-rail .sfr__media {
        margin-left: auto;
        margin-right: auto;
    }

    /* 56px is too much of a 390px row; 40px keeps the icon emphatic without
       squeezing the question, and the gutter scales with it. Vertical padding
       stays doubled against the lab's mobile default. */
    .page-lp-asae .asae-rail {
        --asae-rail-icon: 2.5rem;
        --asae-rail-icon-gap: 3rem;
        --asae-rail-pad: 1.5rem;   /* 24px — --space-md plus 50% */
    }

    .page-lp-asae .asae-rail .sfr-item__toggle {
        padding: var(--space-xl) var(--asae-rail-pad);
        padding-left: var(--asae-rail-indent);
        font-size: var(--text-body);
    }

    .page-lp-asae .asae-rail .sfr-item.is-active .sfr-item__toggle {
        padding-bottom: var(--space-md);
    }

    .page-lp-asae .asae-rail .sfr-item__toggle i {
        top: var(--space-xl);
    }

    .page-lp-asae .asae-rail .sfr-item__desc {
        padding: 0 var(--asae-rail-pad) var(--space-xl);
        padding-left: var(--asae-rail-indent);
    }

    .page-lp-asae .asae-rail .sfr-item + .sfr-item::before {
        left: var(--asae-rail-pad);
        right: var(--asae-rail-pad);
    }
}

/* ============================================================
   CHAPTER ONE — the look
   ============================================================
   Light: the chapter sits on the page background, and lab #34's panel keeps
   the pastel tints it ships with. A dark treatment was built alongside this
   one and cut after review; git history has it if it is ever wanted back.
   ============================================================ */

.asae-ch {
    background: var(--color-bg);
}

.asae-ch .asae-beat__num {
    background-image: linear-gradient(100deg,
        var(--color-accent-tertiary-dark) 0%,
        var(--color-accent-tertiary) 26%,
        var(--color-accent-primary) 52%,
        var(--color-accent-tertiary) 78%,
        var(--color-accent-tertiary-dark) 100%);
}

.asae-ch .asae-beat__line { color: var(--color-text-secondary); }
.asae-ch .asae-beat__line strong { color: var(--color-text-primary); font-weight: var(--weight-bold); }

/* The lab component is natively light, so the panel keeps its pastel tints */
.asae-ch .asae-rail .sfr__media {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.asae-ch .asae-rail__head h2 { color: var(--color-text-primary); }
.asae-ch .asae-rail__intro { color: var(--color-text-secondary); }

.asae-ch .asae-rail .sfr-item + .sfr-item::before { background: var(--color-border); }
.asae-ch .asae-rail .sfr-item.is-active { background: #f6f5fb; }
.asae-ch .asae-rail .sfr-item__toggle { color: var(--color-text-secondary); }
/* Mid grey rather than --color-text-muted: the icons still recede behind the
   active row's teal, but clear 3:1 instead of sitting at 2.4 */
.asae-ch .asae-rail .sfr-item__toggle i { color: #8a8a8a; }
.asae-ch .asae-rail .sfr-item.is-active .sfr-item__toggle { color: var(--color-text-primary); }
.asae-ch .asae-rail .sfr-item.is-active .sfr-item__toggle i { color: var(--color-accent-tertiary-dark); }
.asae-ch .asae-rail .sfr-item__desc { color: var(--color-text-secondary); }

@media (hover: hover) {
    .asae-ch .asae-rail .sfr-item:not(.is-active) .sfr-item__toggle:hover {
        color: var(--color-text-primary);
    }
}

.asae-ch .asae-railcta h2 { color: var(--color-text-primary); }
.asae-ch .asae-railcta > p { color: var(--color-text-secondary); }
.asae-ch .asae-railcta__prize { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .asae-beat__num {
        animation: none;
        background-position: 50% 50%;
    }
}

/* ---------- Score card inside the rail ----------
   The panel supplies the surface and shadow, so the card drops its own.
   Rows dim except the one whose question is active; the bridge that moves
   .is-active lives in lp-asae.js. */

.asae-score-card--rail {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.asae-score-card__band {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffc978;
    background: rgba(249, 147, 13, 0.16);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.8rem;
    margin: 0 auto var(--space-lg);
}

.asae-score-card--rail .asae-score-card__ring {
    margin-bottom: var(--space-md);
}

.asae-score-card--rail .asae-score-card__band {
    display: table;
}

.asae-score-card__foot {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin: var(--space-lg) 0 0;
}

/* "Member Experience" is the longest label; give the column room so no row
   grows a second line and breaks the alignment down the card */
.asae-score-card--rail .asae-score-card__row {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    font-size: 0.875rem; /* caption + 2px */
}

/* The gap row keeps the same two columns as the others so every bar is the
   same length; "Start here" drops to a second line under the bar. */
.asae-score-card--rail .asae-score-card__row.is-gap {
    grid-template-columns: 9.5rem minmax(0, 1fr);
}

.asae-score-card--rail .asae-score-card__row.is-gap em {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.3rem;
}

/* The row's 16px gap applies between grid rows too, which made the Capacity
   row ~39px taller than its siblings. Zero the row axis and let the em's own
   margin do the spacing, so the four rows keep an even rhythm. */
.asae-score-card--rail .asae-score-card__row.is-gap {
    row-gap: 0;
}

@media (max-width: 479px) {
    .page-lp-asae .asae-score-card--rail .asae-score-card__row,
    .page-lp-asae .asae-score-card--rail .asae-score-card__row.is-gap {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.4rem var(--space-sm);
    }

    .page-lp-asae .asae-score-card--rail .asae-score-card__bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* The bar takes row 2 here, so "Start here" goes back beside the label
       instead of under the bar */
    .page-lp-asae .asae-score-card--rail .asae-score-card__row.is-gap em {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }
}

/* Row emphasis follows the active question */
.asae-score-card--rail .asae-score-card__row {
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md);
    opacity: 0.5;
    transition: opacity 300ms ease, background 300ms ease;
}

.asae-score-card--rail .asae-score-card__row.is-active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .asae-score-card--rail .asae-score-card__row { transition: none; }
}

.asae-score-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-lg);
}

.asae-score-card__ring {
    position: relative;
    width: 148px;
    margin: 0 auto var(--space-lg);
}

.asae-score-card__ring svg {
    display: block;
    width: 100%;
    transform: rotate(-90deg);
}

.asae-score-card__ring circle {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}

.asae-score-card__track {
    stroke: rgba(255, 255, 255, 0.12);
}

.asae-score-card__fill {
    stroke: var(--color-accent-tertiary-light);
    /* r=52 → C≈326.7; 46% shown (326.7 × 0.54 = 176.4) */
    stroke-dasharray: 326.7;
    stroke-dashoffset: 176.4;
}

.asae-score-card__num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: #fff;
    font-family: var(--font-heading);
}

.asae-score-card__num strong {
    font-size: 2.25rem;
    font-weight: var(--weight-black);
}

.asae-score-card__num span {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.6);
}

.asae-score-card__rows {
    display: grid;
    gap: var(--space-md);
}

.asae-score-card__row {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.85);
}

.asae-score-card__bar {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.asae-score-card__bar i {
    display: block;
    height: 100%;
    width: var(--w, 50%);
    border-radius: 4px;
    background: var(--asae-grad-stat);
}

.asae-score-card__row.is-gap {
    grid-template-columns: 96px 1fr auto;
}

.asae-score-card__row.is-gap .asae-score-card__bar i {
    background: linear-gradient(120deg, var(--color-accent-secondary), #ffb454);
}

.asae-score-card__row.is-gap em {
    font-style: normal;
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    color: var(--color-accent-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================================
   CAROUSEL — page-scoped extensions to Component Lab #11
   ============================================================ */

/* Extra body paragraph makes panels taller than the lab default —
   give the section room and tighten the stats into one row */
.page-lp-asae .csc {
    min-height: min(94vh, 60rem);
}

/* Site-wide section spacing. It goes on the inner rather than the section so
   min-height still governs, and the band only grows when content needs it. */
.page-lp-asae .csc__inner {
    padding: var(--space-section-y) var(--space-section-x);
}

/* The lab switches the content column off for pointer events so the
   background slides stay hoverable. That also stops :hover ever matching on
   the panel's own link — the button was clickable but could never light up. */
.page-lp-asae .csc-content {
    pointer-events: auto;
}

/* Stack the panels in one grid cell instead of absolutely positioning them.
   The lab's `position: absolute; inset: 0` pins every panel to the content
   column's height, so a panel taller than the column gets clipped by .csc's
   overflow: hidden — which is what cut the bottom line off NASSCO's stat
   labels once the section picked up the site's 128px padding. Same cell for
   every panel keeps the cross-fade and sizes the column to the tallest one,
   so the band grows to fit whichever panel needs the most room and never
   resizes as they change. */
.page-lp-asae .csc-content {
    display: grid;
}

.page-lp-asae .csc-panel {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
}

/* ---------- Brandon Hall award badge, top right of the carousel ----------
   Anchored to .csc__inner with the same padding tokens the inner itself uses,
   so it lands exactly on the top-right of the content area at every
   breakpoint. Only the active case study's badge is shown; .csc__inner is
   pointer-events: none, so neither can swallow a click. */
.page-lp-asae .csc-award {
    position: absolute;
    top: var(--space-section-y);
    right: var(--space-section-x);
    z-index: 3;
    width: 250px;
    height: auto;
    opacity: 0;
    transition: opacity 600ms ease;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

.page-lp-asae .csc__inner:has(#csc-panel-nassco.is-active) .csc-award--nassco,
.page-lp-asae .csc__inner:has(#csc-panel-canada-soccer.is-active) .csc-award--canada-soccer {
    opacity: 1;
}

/* The text column is 36rem and left-aligned, so it only reaches under the
   badge once the section is narrow. Padding on the heading and body — the only
   things tall enough to sit beside it — makes that text wrap early instead of
   running underneath. The stats row and button sit below the badge. */
@media (max-width: 1199px) {
    .page-lp-asae .csc-award { width: 200px; }
    .page-lp-asae .csc-panel h3,
    .page-lp-asae .csc-panel__body { padding-right: 224px; }
}

@media (max-width: 991px) {
    .page-lp-asae .csc-award { width: 150px; }
    .page-lp-asae .csc-panel h3,
    .page-lp-asae .csc-panel__body { padding-right: 170px; }
}

@media (max-width: 767px) {
    /* Dropped below the tab row so it sits level with the heading, as in the
       reference. At the top it would clip the second tab once the tabs and a
       100px badge no longer both fit across a ~290px content width. */
    .page-lp-asae .csc-award {
        width: 100px;
        top: calc(var(--space-section-y) + 3.25rem);
    }

    .page-lp-asae .csc-panel h3 { padding-right: 116px; }
    .page-lp-asae .csc-panel__body { padding-right: 0; }
}

/* Three stats, three columns, held all the way down to 420px. The lab caps the
   box at 30rem and goes 2-up then 1-up; here the row uses the panel width
   instead so the three read as one line of proof. 420 is not one of the site's
   breakpoints (the nearest is 479) — it is the floor the three columns were
   asked to survive to, so it is set literally. */
@media (min-width: 420px) {
    .page-lp-asae .csc-panel__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg);
        max-width: none;
    }
}

/* The gap costs more than it earns once the columns are this narrow */
@media (min-width: 420px) and (max-width: 560px) {
    .page-lp-asae .csc-panel__stats {
        gap: var(--space-md);
    }
}

/* Under 420 the labels can't hold three columns — stack them */
@media (max-width: 419px) {
    .page-lp-asae .csc-panel__stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

.page-lp-asae .csc-panel__body {
    max-width: 44rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-lg);
}

/* The quote is the reason this section exists, so it gets display size and a
   soft purple bloom behind it rather than sitting at body size under the
   narrative. Deliberately static — a moving quote reads as a gimmick. */
/* Client logo to the left of the quote, which pushes the quote text right.
   Full-colour artwork, no tile behind it. */
.page-lp-asae .csc-panel__testimonial {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin: 0 0 var(--space-xl);
}

.page-lp-asae .csc-panel__clientlogo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The -crop.svg files carry a viewBox cropped to the ink, so the box is
       roughly square and the logo fills it instead of floating in the empty
       120x50 artboard the originals ship with. */
    width: 5.5rem;
    height: 5.5rem;
}

/* The white NASSCO artwork is the circular mark with the wordmark stacked
   under it, so it is portrait where the Canada Soccer crop is square. It gets
   more height so the wordmark still reads, and auto width so no dead space
   opens up between it and the quote. */
.page-lp-asae .csc-panel__clientlogo--nassco {
    width: auto;
    height: 7rem;
}

.page-lp-asae .csc-panel__clientlogo img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* The wrapper owns the bottom margin now */
.page-lp-asae .csc-panel__testimonial .csc-panel__quote {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .page-lp-asae .csc-panel__clientlogo {
        width: 4rem;
        height: 4rem;
    }

    .page-lp-asae .csc-panel__clientlogo--nassco {
        width: auto;
        height: 5rem;
    }

    .page-lp-asae .csc-panel__testimonial {
        gap: var(--space-md);
    }
}

.page-lp-asae .csc-panel__quote {
    position: relative;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: #fff;
    max-width: 40rem;
    margin: 0 0 var(--space-xl);
    padding: var(--space-lg) 0 var(--space-lg) var(--space-xl);
}

/* The bloom: a wide, very soft radial behind the text */
.page-lp-asae .csc-panel__quote::after {
    content: "";
    position: absolute;
    /* .csc clips overflow, so the bloom stays inside the box */
    inset: -18% -10% -18% 0;
    z-index: -1;
    background: radial-gradient(60% 70% at 22% 50%,
        rgba(133, 99, 232, 0.42), rgba(133, 99, 232, 0.14) 48%, transparent 72%);
    pointer-events: none;
}

/* Accent bar in place of a quote mark — the mark would compete at this size */
.page-lp-asae .csc-panel__quote::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-accent-primary-light), var(--color-accent-tertiary));
}

.page-lp-asae .csc-panel__photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

/* The lift uses the independent `translate` property, not `transform`.
   .csc-panel.is-active > * runs the csc-rise entrance animation with
   animation-fill-mode: forwards, and a filling animation keeps ownership of
   `transform` for good — so a hover `transform` on this button can never
   apply, which is why it looked flat no matter what was declared. `translate`
   is a separate property the animation does not touch. */
.page-lp-asae .csc-btn {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-body);
    padding: var(--space-sm) var(--space-xl);
    transition: background var(--transition-fast), color var(--transition-fast),
                translate var(--transition-fast), box-shadow var(--transition-fast);
}

.page-lp-asae .csc-btn i {
    margin-left: 0.5rem;
    transition: transform var(--transition-fast);
}

@media (hover: hover) {
    .page-lp-asae .csc-btn:hover {
        background: var(--color-accent-primary);
        color: #fff;
        translate: 0 -2px;
        box-shadow: 0 10px 28px rgba(123, 92, 213, 0.45);
    }

    .page-lp-asae .csc-btn:hover i {
        transform: translateX(4px);
    }
}

.page-lp-asae .csc-btn:active {
    translate: 0 0;
    box-shadow: none;
}

/* ---------- Score card, light chapter ----------
   Not an inversion: the dark card leans on white-alpha surfaces, which have no
   light equivalent. Contrast checked against the panel tints — the ring, the
   number, the band chip and the flagged bar all carry meaning, so each gets a
   colour that holds on the pastel backgrounds the lab component uses. */

.asae-ch .asae-score-card__head { color: var(--color-text-secondary); }

.asae-ch .asae-score-card__track { stroke: rgba(0, 0, 0, 0.1); }
.asae-ch .asae-score-card__fill { stroke: var(--color-accent-tertiary); }

.asae-ch .asae-score-card__num { color: var(--color-text-primary); }
.asae-ch .asae-score-card__num span { color: var(--color-text-secondary); }

.asae-ch .asae-score-card__band {
    color: #8a4e02;
    background: rgba(249, 147, 13, 0.2);
}

.asae-ch .asae-score-card__row { color: var(--color-text-primary); }
.asae-ch .asae-score-card__bar { background: rgba(0, 0, 0, 0.1); }

.asae-ch .asae-score-card__bar i {
    background: linear-gradient(120deg, var(--color-accent-tertiary-dark), var(--color-accent-tertiary));
}

.asae-ch .asae-score-card__row.is-gap .asae-score-card__bar i {
    background: linear-gradient(120deg, #c2410c, var(--color-accent-secondary));
}

.asae-ch .asae-score-card__row.is-gap em { color: #9a4404; }
/* The footnote is the line that keeps the sample honest, so it has to clear
   4.5:1 against the lavender panel — --color-text-muted only reaches 1.9 */
.asae-ch .asae-score-card__foot { color: var(--color-text-secondary); }

.asae-ch .asae-score-card--rail .asae-score-card__row.is-active {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================================
   WORK — two promo tiles (Component Lab #17) + a logo row
   ============================================================ */

.asae-work {
    background: var(--asae-paper);
    padding: var(--space-section-y) 0;
}

.asae-work__head {
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-2xl);
    padding: 0 var(--space-section-x);
}

/* The design system's H2 scale, matching .asae-rail__head and
   .asae-meet__head. This was at --text-h3 — an H3 size on an H2. */
.asae-work__head h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    max-width: 800px;
    margin: 0 0 var(--space-md);
}

.asae-work__intro {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0;
}

/* The lab tile grid is full-bleed by design; here it is inset by the same
   gutter the rest of the sections use, so the pair lines up with the heading
   and the logo row above and below it. */
.asae-work__tiles.ptg {
    background: transparent;
    padding: 0 var(--space-section-x);
}

.page-lp-asae .asae-work__tiles .ptg-tile {
    min-height: 30rem;
}

.page-lp-asae .asae-work__tiles .ptg-tile h3 {
    font-size: var(--text-h4);
}

/* The lab's eyebrow purple reaches only 4.3:1 on the panel tile's grey; the
   darker step clears 4.5 at this size */
.page-lp-asae .asae-work__tiles .ptg-tile--panel .ptg-tile__eyebrow {
    color: var(--color-accent-primary-dark);
}

/* The whole tile is the click target: the tile itself is the anchor and the
   CTA is a span inside it, so the image is clickable without nesting links.
   (A stretched-link overlay on the CTA does not work here — the photo tile's
   .ptg-tile__content is positioned, so inset: 0 resolves to the content box
   and only the middle of the tile responds.) */
.page-lp-asae .asae-work__tiles .ptg-tile {
    display: flex;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
    .page-lp-asae .asae-work__tiles .ptg-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    }

    .page-lp-asae .asae-work__tiles .ptg-tile:hover .ptg-cta {
        background: var(--color-accent-primary-hover);
        border-color: var(--color-accent-primary-hover);
    }
}

/* The tile is the focusable element now, so the ring goes on it */
.page-lp-asae .asae-work__tiles .ptg-tile:focus-visible {
    outline: 3px solid var(--color-accent-primary);
    outline-offset: 3px;
}

/* The course screenshot ships with its own Start button, which read as the
   tile's control and made the panel boundary hard to find. A light wash in the
   tile's own grey pushes the shot back to being a sample, and a hairline rule
   marks where the panel ends. */
.page-lp-asae .asae-work__tiles .ptg-tile__shot {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    margin-top: var(--space-xl);
    border-top: 1px solid var(--color-border-strong);
}

.page-lp-asae .asae-work__tiles .ptg-tile__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(241, 241, 246, 0.62);
}

.page-lp-asae .asae-work__tiles .ptg-tile__shot .ptg-tile__img {
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: cover;
    object-position: top center;
}

/* Both tile photos are bright and detailed, so the lab's radial scrim is
   deepened here — enough for centred white text to hold contrast without
   flattening the image into a grey block. */
.page-lp-asae .asae-work__tiles .ptg-tile--photo::after {
    background:
        radial-gradient(72% 58% at 50% 46%, rgba(12, 12, 20, 0.82), rgba(12, 12, 20, 0.34) 70%, transparent 100%),
        linear-gradient(180deg, rgba(12, 12, 20, 0.5) 0%, rgba(12, 12, 20, 0.2) 45%, rgba(12, 12, 20, 0.62) 100%);
}

/* Logo row: still, and large enough to read as proof rather than decoration */
.asae-work__logos {
    max-width: var(--max-width-medium);
    margin: var(--space-2xl) auto 0;
    padding: 0 var(--space-section-x);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.asae-worklogo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    padding: var(--space-lg);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.asae-worklogo img {
    max-width: 100%;
    max-height: 5rem;
    width: auto;
    height: auto;
}

/* Shorter than the logo tiles: it holds one line of text, not a logo needing
   8.5rem of room. align-self stops the grid row stretching it back out. */
.asae-worklogo--more {
    min-height: 0;
    align-self: center;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    text-decoration: none;
    text-align: center;
    gap: 0.4rem;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

@media (hover: hover) {
    .asae-worklogo--more:hover {
        border-color: var(--color-accent-primary);
        background: rgba(123, 92, 213, 0.05);
    }
}

.asae-worklogo--more:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .asae-work__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Five tiles over two columns leaves the link alone in a half-width cell
       with an empty one beside it; let it run the full width instead */
    .asae-worklogo--more {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479px) {
    .asae-work__logos {
        grid-template-columns: 1fr;
    }

    /* Excluding the link: it carries one line of text, and this rule sits
       after its min-height: 0 at equal specificity, so it would win. */
    .asae-worklogo:not(.asae-worklogo--more) {
        min-height: 7rem;
    }
}

/* ============================================================
   MEMBER DEMAND + LIBRARY — one dark section
   ============================================================ */

.asae-members {
    position: relative;
    background: var(--asae-ink);
    color: #fff;
    padding: var(--space-section-y) var(--space-section-x);
    isolation: isolate;
}

.asae-members::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(80% 60% at 15% 0%, rgba(0, 161, 172, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.asae-members > * {
    position: relative;
    z-index: 1;
}

.asae-members__head {
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-2xl);
}

.asae-members__head .asae-eyebrow {
    color: var(--color-accent-tertiary-light);
    display: block;
    margin-bottom: var(--space-sm);
}

.asae-members__head h2 {
    color: #fff;
    font-size: var(--text-h3);
    margin: 0;
}

.asae-members__stats {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--asae-line-dark);
    border-bottom: 1px solid var(--asae-line-dark);
}

.asae-mstat {
    padding: var(--space-xl) var(--space-lg);
    border-left: 1px solid var(--asae-line-dark);
    display: flex;
    flex-direction: column;
}

.asae-mstat:first-child {
    border-left: none;
    padding-left: 0;
}

.asae-mstat__eyebrow {
    color: var(--color-accent-tertiary-light);
    font-size: 0.75rem;
    margin-bottom: var(--space-md);
}

.asae-mstat .asae-statnum {
    font-size: clamp(2.5rem, 3.4vw, 3.5rem);
    margin-bottom: var(--space-md);
}

.asae-mstat__lead {
    font-family: var(--font-heading);
    font-size: var(--text-h6);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: #fff;
    margin-bottom: var(--space-md);
}

.asae-mstat__body p {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-sm);
}

.asae-mstat__source {
    margin-top: auto;
    font-size: var(--text-caption) !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Library — continues in the same section, no background change */
.asae-library {
    max-width: var(--max-width-medium);
    margin: var(--space-section-y) auto 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: center;
}

.asae-library__head h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-md);
}

.asae-library__head > p {
    color: rgba(255, 255, 255, 0.78);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-lg);
}

.asae-library__list {
    display: grid;
}

.asae-libr {
    display: grid;
    grid-template-columns: 104px 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-sm);
    border-top: 1px solid var(--asae-line-dark);
    text-decoration: none;
    transition: background var(--transition-base);
}

.asae-libr:last-child {
    border-bottom: 1px solid var(--asae-line-dark);
}

.asae-libr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.asae-libr img {
    width: 104px;
    height: 58px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.asae-libr span {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: #fff;
    line-height: var(--leading-snug);
}

.asae-libr i {
    color: var(--color-accent-tertiary-light);
    transition: transform var(--transition-base);
}

.asae-libr:hover i {
    transform: translateX(4px);
}

/* ============================================================
   CHAT FAQ (Component Lab #33) — straight answers before the form
   ============================================================ */

/* The FAQ and the contact form read as one conversation, so they share a
   surface rather than sitting on two different tints. */
.asae-faq {
    background: var(--asae-tint);
}

.asae-faq .cfq__head {
    max-width: 46rem;
}

/* Two links side by side in the footer, wrapping on narrow screens */
/* Taller transcript: +224px on the lab's height at every step, so the longer
   answers (the cost list, the accessibility one) fit without scrolling on a
   desktop and scroll far less on a phone. */
.asae-faq .cfq__log {
    height: 40rem;   /* lab 26rem */
}

@media (max-width: 991px) {
    .asae-faq .cfq__log {
        height: 36rem;   /* lab 22rem */
    }
}

@media (max-width: 767px) {
    .asae-faq .cfq__log {
        height: 34rem;   /* lab 20rem */
    }
}

/* The reset zeroes all margins, and until now every answer was a single
   paragraph so it never showed. q-cost-course has an intro, a list, and a
   closing paragraph, so bubble children need their own rhythm. */
.asae-faq .cfq-bubble--bot > * + * {
    margin-top: var(--space-md);
}

.asae-faq .cfq-bubble--bot ul {
    padding-left: 1.25em;
}

.asae-faq .cfq-bubble--bot li + li {
    margin-top: 0.35rem;
}

.asae-faq .cfq__chat-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Tight, because the middot below supplies the visible separation —
       a wider flex gap would stack on top of it */
    gap: var(--space-sm);
}

/* Only "Contact us" and the address are links; the lead-in is plain text that
   matches their type so the row still reads as one line. */
.asae-faq .cfq__chat-foot > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
}

.asae-faq .cfq__chat-foot > span a {
    margin-left: 0.35rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* A middot keeps the two items visibly separate without a 32px hole */
.asae-faq .cfq__chat-foot > span::after {
    content: "\00b7";
    margin-left: var(--space-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}

/* Wrapped onto its own line the middot is a dangling character */
@media (max-width: 479px) {
    .asae-faq .cfq__chat-foot > span::after { content: none; }
}

/* ============================================================
   MEET US — people 25/25, form 50
   ============================================================ */

.asae-meet {
    background: var(--asae-tint);
    padding: var(--space-section-y) var(--space-section-x);
    scroll-margin-top: 90px;
}

.asae-meet__inner {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    display: grid;
    /* 128px gutter. The form keeps its 50%; the whole gutter is subtracted
       from the people column, so the two portraits narrow rather than the
       form. */
    grid-template-columns: minmax(0, calc(50% - var(--space-3xl) * 2)) minmax(0, 1fr);
    gap: calc(var(--space-3xl) * 2);
    align-items: start;
}

/* Section head above the two columns, matching .asae-work__head */
.asae-meet__head {
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-2xl);
}

/* Same treatment as .asae-rail__head h2 — the design system's H2 scale, not
   the H3 size this was set at */
.asae-meet__head h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    max-width: 800px;
    margin: 0;
}

.asae-meet__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.asae-person {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

/* Gradient ring, same technique as .cs-testimonial-v2-headshot in the case
   study kit: a transparent border shows a gradient clipped to the border box,
   with the card colour clipped to the padding box behind the photo. Without it
   a white-background studio portrait on a white card has no visible edge. */
.asae-person img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, var(--color-accent-primary-light), var(--color-accent-tertiary));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    margin-bottom: var(--space-md);
}

.asae-person h3 {
    font-size: var(--text-h6);
    color: var(--color-text-primary);
    margin: 0;
}

.asae-person__role {
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    margin: 0.15rem 0 var(--space-sm);
}

.asae-person p:last-child {
    margin: 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.asae-form-card {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
}

.asae-form-card h3 {
    font-size: var(--text-h6);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
}

.asae-form-card > p {
    margin: 0 0 var(--space-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* HubSpot form (Contact Us form 600ab25c…) — site-styled inputs */
.asae-form-card #asae-form .hs-form-field {
    margin-bottom: var(--space-md);
}

.asae-form-card #asae-form label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.asae-form-card #asae-form input[type="text"],
.asae-form-card #asae-form input[type="email"],
.asae-form-card #asae-form input[type="tel"],
.asae-form-card #asae-form select,
.asae-form-card #asae-form textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-text-primary);
    background: #fff;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
}

.asae-form-card #asae-form input:focus,
.asae-form-card #asae-form select:focus,
.asae-form-card #asae-form textarea:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(123, 92, 213, 0.15);
}

.asae-form-card #asae-form input[type="submit"] {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: #fff;
    background: var(--color-accent-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    margin-top: var(--space-xs);
}

.asae-form-card #asae-form input[type="submit"]:hover {
    background: var(--color-accent-primary-dark);
}

.asae-form-card #asae-form .hs-error-msgs {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    font-size: var(--text-caption);
    color: #d64545;
}

.asae-form-card #asae-form .submitted-message {
    font-size: var(--text-body);
    color: var(--color-text-primary);
}

/* ============================================================
   PRIZE RULES — footer line + centered modal
   ============================================================ */

.asae-rules-line {
    background: var(--asae-tint);
    text-align: center;
    padding: 0 var(--space-section-x) var(--space-2xl);
    color: var(--color-text-secondary);
}

/* .asae-rules modal styles live in education-score.css (loaded on both
   the LP via @import and the standalone /tools/association-education-score/ page) */

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */

.asae-sticky {
    display: none;
}

@media (max-width: 767px) {
    /* A centring strip across the bottom, not a full-width bar. The button is
       sized to its text and the dismiss control sits beside it; the pair is
       centred as a group, so the group's centre is the page's centre.
       Side padding keeps the group clear of the two launchers that live in
       this strip — Intercom bottom-left, CookieYes bottom-right, each a 48px
       badge at a 20px inset, so 68px is the zone to stay out of. */
    .asae-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.75rem;
        z-index: 90;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding: 0 4.5rem;
        transform: translateY(calc(100% + 1rem));
        transition: transform 0.35s var(--easing-smooth);
        /* The strip spans the viewport, so it would otherwise swallow taps
           meant for the launchers sitting under its empty ends. */
        pointer-events: none;
    }

    .asae-sticky > * {
        pointer-events: auto;
    }

    .asae-sticky.is-visible {
        transform: translateY(0);
    }

    /* Text width plus 16px either side, like every other button on the site */
    .asae-sticky > a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-accent-primary);
        color: #fff;
        font-family: var(--font-heading);
        font-size: var(--text-body);
        font-weight: var(--weight-medium);
        text-decoration: none;
        white-space: nowrap;
        padding: 0.9rem 1rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }

    .asae-sticky > button {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;    /* 44px — WCAG 2.5.5 touch target */
        height: 2.75rem;
        background: var(--asae-ink);
        color: #fff;
        border: none;
        border-radius: var(--radius-md);
        padding: 0;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--shadow-lg);
    }
}

/* The group is 268px and each launcher zone is 68px, so staying between them
   needs 404px of viewport. Below 480 there isn't that much, so the ribbon
   clears them by sitting above instead — still centred, still content-width.
   The hide transform has to grow with the raised offset: the base translate is
   height + 16px, which at this bottom value would leave it on screen before
   the page is scrolled. */
@media (max-width: 479px) {
    .asae-sticky {
        bottom: 5.25rem;
        padding: 0 0.75rem;
        transform: translateY(calc(100% + 6rem));
    }

    .asae-sticky.is-visible {
        transform: translateY(0);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
    .asae-members__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asae-mstat {
        border-left: none;
        border-top: 1px solid var(--asae-line-dark);
        padding-left: 0;
        padding-right: var(--space-lg);
    }

    .asae-mstat:nth-child(-n+2) {
        border-top: none;
    }

    .asae-mstat:nth-child(even) {
        border-left: 1px solid var(--asae-line-dark);
        padding-left: var(--space-lg);
    }

    .asae-library {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* People and form stack from the first breakpoint down — side by side the
       form card gets too narrow for its fields once the portraits shrink.
       Stacked, the 128px desktop gutter becomes a vertical dead zone that
       reads as a section break, so it comes in to the portrait gutter for the
       whole stacked range rather than only below 991. */
    .asae-meet__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* Doubled here too, so the portrait gutter is the same 48px from the first
       breakpoint down rather than stepping up only below 991 */
    .asae-meet__row {
        gap: var(--space-2xl);
    }
}

@media (max-width: 991px) {
    .asae-hero {
        padding: calc(80px + 4rem) var(--space-section-x) 5rem;
    }

}

@media (max-width: 767px) {
    .asae-hero {
        padding: calc(80px + 2.5rem) 1.5rem 3.5rem;
    }

    .asae-beat,
    .asae-members,
    .asae-meet {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .asae-members__stats {
        grid-template-columns: 1fr;
    }

    .asae-mstat {
        border-left: none !important;
        border-top: 1px solid var(--asae-line-dark);
        padding-left: 0 !important;
        padding-right: 0;
    }

    /* Single column, so every block needs its top rule back. The two-up rule
       above drops it on the first row, and at 0,2,0 it outranks the plain
       .asae-mstat border-top — which is why 25%+ lost its divider. */
    .asae-mstat:nth-child(-n+2) {
        border-top: 1px solid var(--asae-line-dark);
    }

    .asae-mstat:first-child {
        border-top: none;
    }

    .asae-meet__row {
        grid-template-columns: 1fr;
    }

    .asae-libr {
        grid-template-columns: 72px 1fr auto;
        gap: var(--space-md);
    }

    .asae-libr img {
        width: 72px;
        height: 44px;
    }
}

/* ============================================================
   MOTION SAFETY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .page-lp-asae .asae-hero .asae-w {
        opacity: 1;
        transform: none;
        transition: none;
    }

}