/* =================================================================
   SimpleK12 — site stylesheet
   Built on Bootstrap 5.3.3 (CDN). PX units only.
   Order: tokens → base → layout → typography → buttons → shared
   components (topbar, header, menu, footer, CTA band) → page sections.
   ================================================================= */

/* === Tokens (resolved to literal values) ===
   ink #22282b, muted #5b6a73, teal #36768d, teal-dark #275668, teal-light #c7e7ee,
   mist #f0f8f9, snow #f9fafb, line #e6e6e7, line-soft #e0e4e6, field #cdd5d9 */
body {
    background-color: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* === Base === */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #22282b;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

a {
    color: #275668;
}
a:hover {
    color: #22282b;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: inherit;
    color: inherit;
}

p {
    margin: 0;
}

/* width/height attributes only reserve space; CSS classes set the rendered size */
img {
    width: auto;
    height: auto;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #36768d;
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #ffffff;
    color: #22282b;
    font-weight: 600;
    padding: 8px 16px;
}
.skip-link:focus {
    left: 16px;
    top: 16px;
}

/* === Layout === */
.container {
    max-width: 1424px;
    padding-left: 32px;
    padding-right: 32px;
}

.section-space {
    padding-top: 88px;
    padding-bottom: 88px;
}

.bg_white {
    background: #ffffff;
}
.bg_mist {
    background: #f0f8f9;
}
.bg_snow {
    background: #f9fafb;
}
.bg_ink {
    background: #22282b;
    color: #ffffff;
}
.bg_teal {
    background: #36768d;
    color: #ffffff;
}
.bg_teal_dark {
    background: #275668;
    color: #ffffff;
}

/* Row gutters for gap sizes outside Bootstrap's g-0…g-5 scale */
.gutter-12 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}
.gutter-14 {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
}
.gutter-18 {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
}
.gutter-20 {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}
.gutter-28 {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 28px;
}
.gutter-32 {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
}
.gutter-36 {
    --bs-gutter-x: 36px;
    --bs-gutter-y: 36px;
}
.gutter-40 {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}
.gutter-48 {
    --bs-gutter-x: 48px;
    --bs-gutter-y: 48px;
}
.gutter-56 {
    --bs-gutter-x: 56px;
    --bs-gutter-y: 56px;
}
.gutter-64 {
    --bs-gutter-x: 64px;
    --bs-gutter-y: 64px;
}

/* Mobile container padding is 20px, so horizontal gutters above 40px would overflow */
@media (max-width: 767.98px) {
    .gutter-48,
    .gutter-56,
    .gutter-64 {
        --bs-gutter-x: 40px;
    }
}

/* === Typography === */
.page-title {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1.62px;
}

.section-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.95px;
}

.eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5b6a73;
}

.intro-text {
    font-size: 18px;
    color: #5b6a73;
}

.clr_muted {
    color: #5b6a73;
}
.clr_teal {
    color: #36768d;
}
.clr_teal_dark {
    color: #275668;
}

/* === Buttons === */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 15px 26px;
    border: 0;
    border-radius: 10px;
    background: #36768d;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cta-btn:hover {
    color: #ffffff;
}

.cta-btn.btn_white,
.cta-btn.btn_white:hover {
    background: #ffffff;
    color: #275668;
}

.cta-btn.btn_outline,
.cta-btn.btn_outline:hover {
    background: #ffffff;
    color: #22282b;
    border: 1.5px solid #cdd5d9;
}

/* === Forms (contact + quote request) === */
.form-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(39, 86, 104, 0.10);
}

.form-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-card-title {
    font-size: 22px;
    font-weight: 600;
}
.form-card-sub {
    font-size: 14px;
    color: #5b6a73;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.field-label {
    font-size: 13px;
    font-weight: 600;
}
.field-req {
    color: #36768d;
}

.field-input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid #cdd5d9;
    border-radius: 10px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: normal;
}
textarea.field-input {
    padding: 12px 14px;
    resize: vertical;
}

.choice-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.choice-group > legend {
    float: none;
    width: auto;
    margin-bottom: 6px;
    padding: 0;
    line-height: inherit;
}

.choice-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid #cdd5d9;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #5b6a73;
}
.check-option a {
    font-weight: 600;
}

.choice-option input,
.check-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #36768d;
}

.form-submit {
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: #36768d;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.form-note {
    font-size: 12px;
    color: #5b6a73;
    text-align: center;
}

/* === Topbar === */
.site-topbar {
    background: #275668;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
}
.site-topbar a,
.site-topbar a:hover {
    color: #ffffff;
    font-weight: 600;
    margin-left: 6px;
}

/* === Header === */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e6e6e7;
}

.site-header-inner {
    min-height: 72px;
    gap: 24px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
}
.site-logo img {
    display: block;
    width: auto;
    height: 32px;
}

/* Main navigation (menu structure from simplek12.com). Top-level items open a dropdown on
   hover or with their chevron button; Learning Pathways opens a side fly-out. Below 1200px
   the same markup becomes an accordion inside the mobile menu (see further down). */
.site-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
}
.site-nav-item {
    position: relative;
}

.site-nav-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav-link,
.site-nav-link:hover {
    display: block;
    padding: 10px 0;
    border: 0;
    background: none;
    color: #22282b;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.site-nav-link.is-active,
.site-nav-link.is-active:hover {
    color: #36768d;
    font-weight: 600;
}
/* label + arrow in one button (Meet SimpleK12); keep the flex layout on hover too, or the
   shared link hover rule would switch it to block and make the arrow jump */
.site-nav-label,
.site-nav-label:hover {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.site-nav-label svg {
    color: #5b6a73;
    transition: transform 0.2s ease;
}

.site-nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5b6a73;
    cursor: pointer;
}
.site-nav-toggle svg {
    transition: transform 0.2s ease;
}
.has-dropdown.is-open > .site-nav-row .site-nav-toggle svg,
.has-dropdown.is-open > .site-nav-row .site-nav-label svg {
    transform: rotate(180deg);
}

/* Dropdown panel */
.site-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: -18px;
    z-index: 1000;
    min-width: 260px;
    padding: 10px;
    border: 1px solid #e6e6e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(34, 40, 43, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* invisible bridge so the pointer can travel from the label into the panel */
.site-dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    height: 12px;
}
.has-dropdown.is-open > .site-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-dropdown-link,
.site-dropdown-link:hover {
    display: block;
    flex: 1 1 auto;
    padding: 10px 14px;
    border-radius: 8px;
    color: #22282b;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.site-dropdown-link.is-active,
.site-dropdown-link.is-active:hover {
    color: #36768d;
    font-weight: 600;
}

.cta-btn.site-dropdown-cta {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 12px 18px;
    font-size: 14px;
}

/* Learning Pathways fly-out inside the For Educators dropdown */
.site-dropdown .has-dropdown {
    position: relative;
}
.site-dropdown .site-nav-row {
    gap: 0;
}
.site-dropdown .site-nav-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.site-dropdown .site-nav-toggle svg {
    transform: rotate(-90deg);
}
.site-dropdown .has-dropdown.is-open > .site-nav-row .site-nav-toggle svg {
    transform: rotate(-90deg);
}
.site-dropdown.is-sub {
    top: -11px;
    left: calc(100% + 12px);
}
.site-dropdown.is-sub::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: -14px;
    width: 14px;
    height: auto;
}

/* Desktop with a mouse: dropdowns also open on hover */
@media (min-width: 1200px) and (hover: hover) {
    .has-dropdown:hover > .site-dropdown {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .has-dropdown:hover > .site-nav-row .site-nav-toggle svg,
    .has-dropdown:hover > .site-nav-row .site-nav-label svg {
        transform: rotate(180deg);
    }
    .site-dropdown .has-dropdown:hover > .site-nav-row .site-nav-toggle svg {
        transform: rotate(-90deg);
    }
}

.site-header-actions {
    gap: 18px;
    font-size: 14px;
    font-weight: 500;
}

.site-login,
.site-login:hover {
    padding: 10px 0;
    color: #22282b;
    text-decoration: none;
}

.cta-btn.btn_header {
    justify-content: flex-start;
    gap: 0;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e0e4e6;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
}

/* Homepage header variant */
.site-header.home-variant .site-header-inner {
    min-height: 76px;
    gap: 28px;
}
.site-header.home-variant .site-logo img {
    height: 34px;
}
.site-header.home-variant .site-header-actions {
    gap: 20px;
}
.site-header.home-variant .cta-btn.btn_header {
    padding: 12px 20px;
}

.site-search {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 0 16px;
    border: 1px solid #e0e4e6;
    border-radius: 999px;
    background: #f9fafb;
}
.site-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: normal;
}

/* === Mobile menu: the nav becomes a Bootstrap offcanvas below 1200px === */
.site-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Desktop: logo | menu in the exact centre | actions (equal flex columns either side of the menu) */
@media (min-width: 1200px) {
    .site-header-inner {
        flex-wrap: nowrap;
    }
    .site-header-inner > .site-logo,
    .site-header-inner > .site-header-actions {
        flex: 1 1 0;
    }
    .site-header-inner > .site-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .site-menu .offcanvas-body {
        align-items: center;
        gap: 28px;
    }
}

/* Header search: inline beside the menu from 1400px (centred with it); 1200-1399px a search
   button opens the search row below the header; under 1200px it sits in the mobile menu */
@media (min-width: 1400px) {
    .site-header .site-search {
        flex: 0 0 240px;
        margin: 0;
    }
}

.site-search-toggle {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e0e4e6;
    border-radius: 50%;
    background: #f9fafb;
    cursor: pointer;
}
.site-search-toggle[aria-expanded="true"] {
    border-color: #36768d;
}

.site-search-row .container {
    padding-bottom: 14px;
}
.site-search-row .site-search {
    flex: 0 0 auto;
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 1199.98px) {
    .site-search-row {
        display: none;
    }
}

/* Small phones (under 390px): a slightly smaller logo and tighter spacing keep the logo, trial
   button and menu button on one row */
@media (max-width: 389.98px) {
    .site-header-inner,
    .site-header.home-variant .site-header-inner {
        gap: 12px;
    }
    .site-header-actions,
    .site-header.home-variant .site-header-actions {
        gap: 10px;
    }
    .site-logo img,
    .site-header.home-variant .site-logo img {
        height: 28px;
    }
    .cta-btn.btn_header,
    .site-header.home-variant .cta-btn.btn_header {
        padding: 12px 14px;
    }
}
@media (max-width: 349.98px) {
    .site-header-inner,
    .site-header.home-variant .site-header-inner {
        gap: 8px;
    }
    .site-header-actions,
    .site-header.home-variant .site-header-actions {
        gap: 8px;
    }
    .site-logo img,
    .site-header.home-variant .site-logo img {
        height: 24px;
    }
    .menu-toggle {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 1199.98px) {
    .site-menu {
        --bs-offcanvas-width: 320px;
    }
    .site-menu .offcanvas-header {
        padding: 20px;
        border-bottom: 1px solid #e6e6e7;
    }
    .site-menu .offcanvas-header img {
        display: block;
        width: auto;
        height: 32px;
    }
    .site-menu .offcanvas-body {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    /* Main navigation as an accordion */
    .site-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        font-size: 16px;
    }
    .site-nav-item {
        border-bottom: 1px solid #e6e6e7;
    }
    .site-nav-row {
        justify-content: space-between;
    }
    .site-nav-link,
    .site-nav-link:hover {
        flex: 1 1 auto;
        padding: 12px 0;
        text-align: left;
    }
    .site-nav-label,
    .site-nav-label:hover {
        display: flex;
        justify-content: space-between;
    }
    .site-nav-label svg {
        margin-right: 14px;
    }
    .site-nav-toggle {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .site-dropdown,
    .site-dropdown.is-sub {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 14px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .site-dropdown::before {
        display: none;
    }
    .has-dropdown.is-open > .site-dropdown {
        display: block;
    }
    .site-dropdown-link,
    .site-dropdown-link:hover {
        padding: 9px 12px;
        white-space: normal;
    }
    .site-dropdown .site-nav-toggle svg {
        transform: none;
    }
    .site-dropdown .has-dropdown.is-open > .site-nav-row .site-nav-toggle svg {
        transform: rotate(180deg);
    }
    .cta-btn.site-dropdown-cta {
        width: auto;
    }
    .site-menu .site-search {
        flex: 0 0 auto;
        max-width: none;
        margin: 0;
    }
}

/* === Breadcrumb (top of every page hero except the homepage) === */
/* the breadcrumb sits a little closer to the header than the hero's full top padding;
   the content below moves up with it */
.site-breadcrumb {
    margin-top: -32px;
    margin-bottom: 24px;
}
/* the course and pathway detail heroes already start close to the header */
.detail-hero .site-breadcrumb {
    margin-top: 0;
}
@media (max-width: 767.98px) {
    .site-breadcrumb,
    .detail-hero .site-breadcrumb {
        margin-top: -24px;
    }
}
.site-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 10px;
    color: #5b6a73;
}
.site-breadcrumb li {
    display: flex;
    align-items: center;
    min-width: 0;
}
.site-breadcrumb li + li::before {
    content: '/';
    padding: 0 6px;
    color: #cdd5d9;
}
.site-breadcrumb a,
.site-breadcrumb a:hover {
    color: #275668;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-breadcrumb a:hover {
    color: #36768d;
    text-decoration: underline;
}
.site-breadcrumb-current {
    overflow: hidden;
    color: #22282b;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-breadcrumb.is-center ol {
    justify-content: center;
}

/* === Footer === */
.site-footer {
    background: #22282b;
    color: #fffdf8;
}

.site-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 32px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.footer-brand > img {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 38px;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #4a555b;
    border-radius: 50%;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 160px;
}
.footer-col-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a7aeb1;
}
.footer-col a,
.footer-col a:hover {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #fffdf8;
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 252, 242, 0.25);
    font-size: 13px;
    color: #d9dcdd;
}
.footer-legal {
    display: flex;
    gap: 28px;
}
.footer-legal a,
.footer-legal a:hover {
    color: #fffcf2;
    text-decoration: none;
}

/* Homepage footer variant */
.site-footer.home-variant .site-footer-inner {
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 36px;
}
.site-footer.home-variant .footer-top {
    --bs-gutter-x: 48px;
    --bs-gutter-y: 48px;
}
.site-footer.home-variant .footer-brand {
    gap: 24px;
}
.site-footer.home-variant .footer-brand > img {
    height: 40px;
}
.site-footer.home-variant .footer-links {
    gap: 48px;
}
.site-footer.home-variant .footer-col {
    gap: 14px;
    min-width: 170px;
}
.site-footer.home-variant .footer-bottom {
    gap: 16px;
    padding-top: 28px;
}
.site-footer.home-variant .footer-legal {
    gap: 32px;
}

/* === CTA band (shared closing call-to-action) === */
.cta-band {
    overflow: hidden;
    border-radius: 24px;
    background: #36768d;
    color: #ffffff;
}

.cta-band-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 56px 48px;
}
.cta-band-body p {
    max-width: 520px;
    font-size: 17px;
    color: #e3eef2;
}
.cta-band-body .cta-btn {
    align-self: flex-start;
    margin-top: 6px;
}

.cta-band-img {
    display: block;
    min-height: 320px;
    object-fit: cover;
}

/* Optional photo wrapper (.cta-band-media): the photo fills its column and the band height
   follows the text, for photos tall enough to leave the band mostly empty */
.cta-band-media {
    position: relative;
}
/* anchored to the top so faces near the top edge stay in view at every width */
.cta-band-media .cta-band-img {
    width: 100%;
    object-position: center top;
}

@media (min-width: 768px) {
    .cta-band-media {
        min-height: 420px;
    }
    .cta-band-media .cta-band-img {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

/* When the band stacks, keep the photo from growing with the viewport width */
@media (max-width: 767.98px) {
    .cta-band-img {
        max-height: 440px;
    }
}

/* Stacked wrapper photos use a 6:5 frame that scales with the width: a fixed height blew a
   portrait photo up into a close-up that cut faces off on tablets */
@media (max-width: 767.98px) {
    .cta-band-media .cta-band-img {
        max-height: none;
        min-height: 0;
        aspect-ratio: 6 / 5;
        object-fit: cover;
    }
}

/* === Shared: pills, chips, icon tiles === */
.chip,
.chip:hover {
    padding: 8px 14px;
    border-radius: 999px;
    background: #f0f8f9;
    color: #22282b;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.chip.is-active,
.chip.is-active:hover {
    background: #22282b;
    color: #ffffff;
    font-weight: 600;
}

.tag-pill {
    padding: 5px 10px;
    border-radius: 999px;
    background: #f0f8f9;
    color: #275668;
    font-size: 12px;
    font-weight: 600;
}

.icon-tile {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0f8f9;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid #cdd5d9;
    border-radius: 12px;
    background: #ffffff;
}
.search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: normal;
}

/* === Shared: feature card (icon + title + text) === */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 26px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.feature-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.feature-card p {
    font-size: 14px;
    color: #5b6a73;
}

/* === Shared: course card === */
.course-card,
.course-card:hover {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e6e6e7;
    border-radius: 16px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
.course-card-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.course-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}
.course-card-meta {
    font-size: 12px;
    font-weight: 500;
    color: #5b6a73;
}
.course-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.course-card-body p {
    font-size: 14px;
    color: #5b6a73;
}
.course-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
}
.course-card-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #5b6a73;
}
.course-card-link {
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
}

/* === Shared: pathway card === */
.pathway-card,
.pathway-card:hover {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
.pathway-card-img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}
.pathway-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 24px;
}
.pathway-card-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
.pathway-card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5b6a73;
}
.pathway-card-count {
    font-size: 12px;
    font-weight: 600;
    color: #275668;
}
.pathway-card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.pathway-card-body p {
    font-size: 14px;
    color: #5b6a73;
}
.pathway-card-link {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
}

/* === Shared: testimonial card === */
.quote-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    margin: 0;
    padding: 26px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #f9fafb;
}
.quote-stars {
    display: flex;
    gap: 3px;
}
.quote-card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #22282b;
}
.quote-card figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: auto 0 0;
}
.quote-card figcaption img {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #e0e4e6;
}
.quote-author {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* === Shared: testimonial slider (behaviour in assets/js/main.js) ===
   [data-slider] root. The viewport clips one row of Bootstrap columns and the script slides the
   track one page at a time, so cards per view follow the column classes (e.g. col-12 /
   col-sm-6 / col-lg-4 = 1 / 2 / 3). The heading and arrows share a header row; with
   .is-centered, and on every slider under 768px, the heading is centred and the arrows move
   below the dots. */
.quote-slider {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.quote-slider-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.quote-slider-nav {
    display: flex;
    gap: 10px;
}
.quote-slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1.5px solid #cdd5d9;
    border-radius: 50%;
    background: #ffffff;
    color: #22282b;
    cursor: pointer;
}

.quote-slider-viewport {
    overflow: hidden;
    touch-action: pan-y;
    /* extra clip room so a lifted card and its shadow show; the negative margins keep the
       layout unchanged (the next slide is 20px away, so 18px of side room never reveals it) */
    margin: -8px -18px -40px;
    padding: 8px 18px 40px;
}
.quote-slider-track {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0px;
    transition: transform 0.45s ease;
}

/* one card style for every testimonial slider */
.quote-slider .quote-card {
    gap: 18px;
    min-height: 260px;
}

.quote-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.quote-slider-dot {
    width: 10px;
    min-width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #cdd5d9;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.quote-slider-dot.is-active {
    width: 28px;
    background: #36768d;
}

.quote-slider.is-centered .quote-slider-head {
    display: contents;
}
.quote-slider.is-centered .quote-slider-nav {
    order: 1;
    justify-content: center;
    margin-top: -8px;
}

/* a tighter card hover shadow that fits inside the slider's clip room */
@media (hover: hover) {
    .quote-slider .quote-card:hover {
        box-shadow: 0 8px 16px rgba(34, 40, 43, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quote-slider-track {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .quote-slider-head {
        display: contents;
    }
    .quote-slider-nav {
        order: 1;
        justify-content: center;
        margin-top: -8px;
    }
}

/* === Shared: FAQ (centred heading + Bootstrap collapse accordion) === */
.faq-head {
    margin-bottom: 40px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e0e4e6;
}
.faq-item {
    border-bottom: 1px solid #e0e4e6;
}
.faq-question {
    font-size: 18px;
    font-weight: 600;
}

/* Open item: 24px above the question, 8px to the answer, 24px below the answer */
.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 24px 0 8px;
    border: 0;
    background: transparent;
    color: #22282b;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: padding-bottom 0.35s ease, color 0.2s ease;
}
.faq-toggle.collapsed {
    padding-bottom: 24px;
}
.faq-toggle:hover {
    color: #36768d;
}

.faq-icon {
    flex: 0 0 auto;
    color: #36768d;
    transition: transform 0.3s ease;
}
.faq-toggle:not(.collapsed) .faq-icon {
    transform: rotate(180deg);
}

.faq-answer p {
    padding-bottom: 24px;
    font-size: 15px;
    color: #5b6a73;
}

@media (prefers-reduced-motion: reduce) {
    .faq-toggle,
    .faq-icon {
        transition: none;
    }
}

/* === Shared responsive overrides === */
@media (max-width: 767.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-space {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .page-title {
        font-size: 30px;
        letter-spacing: -0.9px;
    }

    .section-title {
        font-size: 27px;
        letter-spacing: -0.675px;
    }

    .site-header.home-variant .site-header-inner {
        min-height: 68px;
        gap: 16px;
    }

    .site-footer-inner {
        padding-top: 56px;
        padding-bottom: 28px;
    }
    .site-footer.home-variant .footer-top {
        --bs-gutter-x: 40px;
    }
    .site-footer.home-variant .site-footer-inner {
        padding-top: 48px;
        padding-bottom: 28px;
    }

    .cta-band-body {
        padding: 36px 24px;
    }

    .faq-head {
        margin-bottom: 32px;
    }
}


/* =================================================================
   PAGE: Homepage (homepage.html)
   ================================================================= */

/* === Home: topbar + header (home variant) === */
.site-topbar.home-variant {
    padding: 10px 24px;
}

/* === Home: shared section rhythm, headings, buttons === */
.home-section-space {
    padding-top: 96px;
    padding-bottom: 96px;
}

.home-stack {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.home-stack.is-wide {
    gap: 40px;
}

.home-section-title {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -1px;
}
.home-section-title.is-lg {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1.1px;
}
.home-section-title.is-md {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.9px;
}

.home-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.home-head p {
    font-size: 17px;
    color: #5b6a73;
}
.home-head .home-head-text {
    max-width: 760px;
}
.home-head.is-center {
    align-items: center;
    text-align: center;
}
.home-head.is-center p {
    margin: 0 auto;
}

.home-inline-link,
.home-inline-link:hover {
    color: #275668;
}

.cta-btn.home-btn-lg {
    gap: 12px;
    padding: 18px 30px;
    font-size: 16px;
}
.cta-btn.home-btn-outline-lg {
    padding: 18px 26px;
    font-size: 16px;
}
.cta-btn.home-btn-md {
    padding: 14px 22px;
}
.cta-btn.home-btn-sm {
    padding: 12px 18px;
    font-size: 14px;
}
/* the section-head and quote outline buttons have no fill */
.cta-btn.home-btn-md,
.cta-btn.home-btn-md:hover,
.cta-btn.home-btn-sm,
.cta-btn.home-btn-sm:hover {
    background: transparent;
}

@media (max-width: 767.98px) {
    .home-section-space {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .home-section-title {
        font-size: 27px;
        line-height: 1.15;
        letter-spacing: -0.675px;
    }
    .home-section-title.is-lg {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.7px;
    }
    .home-section-title.is-md {
        font-size: 26px;
        letter-spacing: -0.65px;
    }
}

/* === Home: hero === */
.home-hero {
    overflow: hidden;
}

.home-hero-space {
    padding-top: 80px;
    padding-bottom: 72px;
}

.home-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.home-hero-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    border: 1px solid #c7e7ee;
    border-radius: 999px;
    background: #f0f8f9;
    color: #275668;
    font-size: 13px;
    font-weight: 600;
}
.home-hero-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #36768d;
}

.home-hero-title {
    font-size: 58px;
    line-height: 1.08;
    letter-spacing: -1.74px;
}

.home-hero-lead {
    max-width: 580px;
    font-size: 19px;
    line-height: 1.6;
    color: #5b6a73;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.home-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}
.home-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Photo column: decorative layers and floating cards keep the original absolute positioning */
.home-hero-media {
    position: relative;
    min-height: 600px;
}
.home-hero-backdrop {
    position: absolute;
    top: 24px;
    right: 0;
    width: 86%;
    height: 560px;
    border-radius: 28px;
    background: #f0f8f9;
}
.home-hero-photo {
    position: absolute;
    right: 4%;
    bottom: 0;
    width: 80%;
    height: 600px;
    object-fit: contain;
    object-position: center bottom;
}

.home-hero-card {
    position: absolute;
    padding: 16px;
    border: 1px solid #e6e6e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(34, 40, 43, 0.10);
}
.home-hero-card.is-pathway {
    top: 64px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 284px;
}
.home-hero-card.is-cert {
    bottom: 48px;
    left: 6%;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 314px;
}

.home-hero-card-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #5b6a73;
}
.home-hero-progress {
    height: 6px;
    border-radius: 99px;
    background: #e4eef1;
}
.home-hero-progress-bar {
    width: 50%;
    height: 6px;
    border-radius: 99px;
    background: #36768d;
}
.home-hero-pathway-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.icon-tile.home-hero-cert-icon {
    background: #eaf5ef;
}
.home-hero-cert-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-hero-cert-title {
    font-size: 14px;
    font-weight: 600;
}
.home-hero-cert-sub {
    font-size: 12px;
    line-height: 1.4;
    color: #5b6a73;
}

@media (max-width: 767.98px) {
    .home-hero-space {
        padding-top: 44px;
        padding-bottom: 40px;
    }
    .home-hero-title {
        font-size: 34px;
        line-height: 1.12;
        letter-spacing: -1.02px;
    }
    .home-hero-media {
        min-height: 520px;
    }
    .home-hero-backdrop {
        width: 90%;
        height: 460px;
        border-radius: 24px;
    }
    .home-hero-photo {
        width: 84%;
        height: 500px;
    }
    .home-hero-card.is-pathway {
        top: 24px;
        width: 244px;
    }
    .home-hero-card.is-cert {
        bottom: 16px;
        left: 0;
        width: 274px;
    }
}

/* === Home: stats strip === */
.home-stats {
    border-top: 1px solid #e6e6e7;
    border-bottom: 1px solid #e6e6e7;
}
.home-stats-space {
    padding-top: 36px;
    padding-bottom: 36px;
}
.home-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.home-stat-num {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: #275668;
}
.home-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}

@media (max-width: 767.98px) {
    .home-stats-space {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

/* On small phones the label sits under its number. The original mobile export kept them side by
   side, which made "550,000+ Educators" run into the next stat. */
@media (max-width: 575.98px) {
    .home-stat {
        flex-wrap: wrap;
        row-gap: 0;
    }
    .home-stat-label {
        flex-basis: 100%;
    }
}

@media (max-width: 359.98px) {
    .home-stat-num {
        font-size: 26px;
        letter-spacing: -0.52px;
    }
}

/* === Home: course catalog === */
.home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* the two row groups only matter on phones; on larger screens their chips wrap as one group */
.home-chips-row { display: contents; }

/* Phones and tablets in portrait: two rows that scroll sideways together, edge to edge */
@media (max-width: 991.98px) {
    .home-chips {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin: 0 -20px;
        padding: 0 20px 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .home-chips::-webkit-scrollbar { display: none; }
    .home-chips-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding-right: 20px;
    }
    .home-chips .chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
/* tablets: the page gutter is 32px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-chips {
        margin: 0 -32px;
        padding: 0 32px 2px;
    }
    .home-chips-row {
        padding-right: 32px;
    }
}
.chip.home-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
}

.course-card.is-home .course-card-body {
    gap: 10px;
}
.home-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: auto;
}

/* === Home: goals === */
.home-goals-head {
    max-width: 800px;
    margin: 0 auto;
}

.home-goal-card,
.home-goal-card:hover {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 28px 28px 32px;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
/* arch-free crops of goal-1/2/3 (goal-*-crop.webp), shown as plain rectangles */
.home-goal-img {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center 20%;
}
.home-goal-card h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}
.home-goal-card p {
    font-size: 15px;
    color: #5b6a73;
}
.home-goal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
}

/* === Home: featured learning pathways === */
.home-path-feature,
.home-path-feature:hover {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 20px;
    background: #22282b;
    color: #22282b;
    text-decoration: none;
}
.home-path-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}
.home-path-feature-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding: 36px;
    background: rgba(34, 40, 43, 0.72);
    color: #ffffff;
}
.home-path-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c7e7ee;
}
.home-path-feature h3 {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.6px;
}
.home-path-feature p {
    font-size: 15px;
    color: #d6e6ec;
}
.home-path-feature-link {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.pathway-card.is-home .pathway-card-img {
    height: 130px;
}
.pathway-card.is-home .pathway-card-body {
    gap: 8px;
    padding: 20px 22px 22px;
}

/* === Home: professional learning shouldn't feel like another job === */
.home-job-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.home-job-copy p {
    font-size: 17px;
    color: #c1c9cd;
}
.home-job-copy .home-job-lead {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}
.cta-btn.home-btn-light,
.cta-btn.home-btn-light:hover {
    align-self: flex-start;
    padding: 16px 28px;
    background: #ffffff;
    color: #22282b;
    font-size: 16px;
}
/* arch-free crop (section-img-crop.webp) with plain 20px corners */
.home-job-img {
    display: block;
    width: 100%;
    height: 520px;
    border-radius: 20px;
    object-fit: cover;
    object-position: center top;
}

/* === Home: how it works === */
/* the heading runs on one line from iPad portrait up (phones wrap it) */
.home-how-title {
    max-width: none;
}

.home-how-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 20px 20px 28px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #f9fafb;
}
.home-how-card img {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 14px;
    object-fit: cover;
}
.home-how-card h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}
.home-how-card p {
    font-size: 15px;
    color: #5b6a73;
}

/* === Home: membership === */
.home-member-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.home-member-copy > p {
    font-size: 17px;
    color: #5b6a73;
}
.home-member-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
}
.home-member-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-member-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-plan-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 36px;
    border: 2px solid #36768d;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(39, 86, 104, 0.12);
}
.home-plan-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.home-plan-name {
    display: flex;
    flex-direction: column;
}
.home-plan-title {
    font-size: 22px;
    font-weight: 700;
}
.home-plan-sub {
    font-size: 14px;
    color: #5b6a73;
}
.home-plan-badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: #eaf5ef;
    color: #7c874c;
    font-size: 12px;
    font-weight: 600;
}

.home-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px;
    border: 1px solid #e0e4e6;
    border-radius: 14px;
}
.home-price.is-featured {
    border: 2px solid #36768d;
    background: #f0f8f9;
}
.home-price-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5b6a73;
}
.home-price.is-featured .home-price-label {
    color: #275668;
}
.home-price-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.52px;
}
.home-price-value span {
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}

.cta-btn.home-plan-cta {
    display: flex;
    padding: 18px 28px;
    font-size: 16px;
    text-align: center;
}
.home-plan-note {
    font-size: 13px;
    color: #5b6a73;
    text-align: center;
}

/* phones: the two prices stay side by side, so the card and boxes give up some padding */
@media (max-width: 575.98px) {
    .home-plan-card {
        padding: 24px 20px;
    }
    .home-price {
        padding: 12px;
    }
    .home-price-value {
        font-size: 22px;
        letter-spacing: -0.44px;
    }
}
@media (max-width: 374.98px) {
    .home-plan-card {
        padding: 24px 14px;
    }
    .home-price {
        padding: 12px 10px;
    }
    .home-price-value {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .home-price-value span {
        font-size: 13px;
    }
    .cta-btn.home-plan-cta {
        padding-right: 12px;
        padding-left: 12px;
    }
}

.home-schools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.home-schools-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-schools-title {
    font-size: 16px;
    font-weight: 600;
}
.home-schools-sub {
    font-size: 14px;
    color: #5b6a73;
}

/* === Home: testimonials === */

/* === Home: state requirements === */
.home-state-box {
    position: relative;
    overflow: hidden;
    padding: 56px;
    border-radius: 24px;
    background: #275668;
    color: #ffffff;
}
.home-state-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Interactive state map: data from us-atlas (US Census Bureau state shapes, Albers USA
   projection with Alaska and Hawaii insets). The highlighted state and the name tag follow
   the state picker; see "State map" in main.js. */
.state-map {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}
.state-map-svg {
    display: block;
    width: 100%;
    height: auto;
}
.state-map-svg path {
    fill: #36768d;
    stroke: #275668;
    stroke-width: 1;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.2s ease;
}
.state-map-svg path:hover {
    fill: #4b8aa1;
}
.state-map-svg path.is-active {
    fill: #c7e7ee;
}

/* name tag: a pin on the state with the name above it */
.state-map-tag {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    pointer-events: none;
}
.state-map-tag::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #275668;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.state-map-tag::after {
    content: "";
    position: absolute;
    bottom: 9px;
    left: -6px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #ffffff transparent transparent;
}
.state-map-tag-label {
    position: absolute;
    bottom: 15px;
    left: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #22282b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateX(calc(-50% + var(--shift, 0px)));
}
.state-map-tag.is-below::after {
    top: 9px;
    bottom: auto;
    border-width: 0 6px 6px;
    border-color: transparent transparent #ffffff;
}
.state-map-tag.is-below .state-map-tag-label {
    top: 15px;
    bottom: auto;
}

/* light variant for pale backgrounds (state-requirements.html hero) */
.state-map.is-light .state-map-svg path {
    fill: #afc8d1;
    stroke: #ffffff;
}
.state-map.is-light .state-map-svg path:hover {
    fill: #86aebd;
}
.state-map.is-light .state-map-svg path.is-active {
    fill: #36768d;
}

@media (prefers-reduced-motion: reduce) {
    .state-map-svg path {
        transition: none;
    }
}

.home-state-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.home-state-title {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.72px;
}
.home-state-copy p {
    max-width: 720px;
    font-size: 16px;
    color: #d6e6ec;
}

.home-state-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 468px;
    max-width: 100%;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    color: #22282b;
}
.home-state-card label {
    font-size: 14px;
    font-weight: 600;
}
.field-input.home-state-select {
    padding: 0 16px;
    font-weight: 500;
}
.form-submit.home-state-btn {
    min-height: 50px;
}
.home-state-note {
    font-size: 12px;
    color: #5b6a73;
}

@media (max-width: 767.98px) {
    .home-state-box {
        padding: 28px 22px;
    }
    .home-state-main {
        gap: 24px;
    }
    .home-state-title {
        font-size: 26px;
        letter-spacing: -0.52px;
    }
}

/* === Home: FAQ === */
.home-faq {
    border-top: 1px solid #e6e6e7;
}

.home-faq-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.home-faq-head p {
    font-size: 16px;
    color: #5b6a73;
}
.home-faq-head a,
.home-faq-head a:hover {
    color: #275668;
    font-weight: 600;
}

/* === Home: closing CTA (homepage variant of .cta-band) === */
/* the original keeps 96px / 32px around the band at every width, mobile included */
.home-cta-space {
    padding: 96px 32px;
}

.cta-band.is-home .cta-band-body {
    gap: 20px;
    padding: 64px;
}
.cta-band.is-home .cta-band-body p {
    max-width: 560px;
}
.cta-band.is-home .cta-band-body .cta-btn {
    margin-top: 8px;
}
.cta-band.is-home .cta-band-img {
    min-height: 420px;
}

@media (max-width: 767.98px) {
    .cta-band.is-home .cta-band-img {
        max-height: 420px;
    }
}

.home-cta-title {
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -1.05px;
}

@media (max-width: 767.98px) {
    .cta-band.is-home .cta-band-body {
        padding: 28px 22px;
    }
    .home-cta-title {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.7px;
    }
}


/* =================================================================
   PAGE: Course Catalog (course-catalog.html)
   ================================================================= */

/* === Course catalog: hero === */
.catalog-hero .section-space {
    padding-bottom: 56px;
}

.catalog-hero-text {
    gap: 16px;
}
.catalog-hero-text .intro-text {
    max-width: 640px;
}

.catalog-search {
    width: 475px;
    max-width: 100%;
    min-height: 56px;
}

.catalog-topics {
    margin-top: calc(40px - var(--bs-gutter-y));
}

.catalog-topic,
.catalog-topic:hover {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-height: 260px;
    overflow: hidden;
    border-radius: 20px;
    background: #275668;
    color: #ffffff;
    text-decoration: none;
}
.catalog-topic-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}
.catalog-topic-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 26px;
    background: rgba(34, 40, 43, 0.6);
}
.catalog-topic-body .eyebrow {
    color: #c7e7ee;
}
/* room for three lines (3 x 26px) in every card, so the dark bands, labels, titles and links line up
   across the row whatever the title length */
.catalog-topic-title {
    min-height: 78px;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}
.catalog-topic-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
/* narrower cards: a smaller title keeps it within the reserved lines */
@media (max-width: 1399.98px) {
    .catalog-topic-body {
        padding: 20px;
    }
    .catalog-topic-title {
        min-height: 72px;
        font-size: 18px;
        line-height: 24px;
    }
}
/* phones (cards in one swipe row): room for four lines */
@media (max-width: 767.98px) {
    .catalog-topic-title {
        min-height: 96px;
    }
}
@media (max-width: 359.98px) {
    .catalog-topic-title {
        min-height: 84px;
        font-size: 16px;
        line-height: 21px;
    }
}

/* === Course catalog: filters + course grid === */
.catalog-filter {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 260px;
}

.catalog-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.catalog-filter-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.check-option.is-filter {
    padding: 6px 0;
    font-size: 14px;
    color: #22282b;
    cursor: pointer;
}

.catalog-filter-link,
.catalog-filter-link:hover {
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
    text-decoration: none;
}
.catalog-filter-link svg {
    vertical-align: baseline;
}

.catalog-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.catalog-count {
    font-size: 15px;
    color: #5b6a73;
}
.catalog-count strong {
    color: #22282b;
}

.catalog-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.catalog-sort-label {
    font-size: 14px;
    color: #5b6a73;
}
.catalog-filter-btn,
.catalog-sort-select {
    min-height: 44px;
    border: 1.5px solid #cdd5d9;
    border-radius: 10px;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: normal;
}
.catalog-filter-btn {
    align-items: center;
    padding: 0 16px;
    font-weight: 600;
    cursor: pointer;
}
.catalog-sort-select {
    padding: 0 14px;
    font-weight: 500;
    color: #22282b;
}
/* Phones: the count on its own line, then the Filters button and the sort list side by side
   (the "Sort by" label stays for screen readers; the list text already says what it sorts by) */
@media (max-width: 767.98px) {
    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .catalog-sort {
        flex-wrap: nowrap;
    }
    .catalog-sort-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    /* width 0 + grow: the list fills the row but never widens the column on small phones */
    .catalog-sort-select {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
    }
}

/* the empty states replace the grid when nothing matches: a centred box with a next step */
.catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 24px auto 0;
    padding: 40px 32px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #f9fafb;
    color: #5b6a73;
    text-align: center;
}
.catalog-empty[hidden] {
    display: none;
}
.catalog-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e3eef2;
    color: #275668;
}
.catalog-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #22282b;
}
.catalog-empty p {
    font-size: 15px;
}
.catalog-empty .cta-btn {
    margin-top: 4px;
}

/* the chosen filters above the results */
.catalog-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 16px;
}
.catalog-active[hidden] {
    display: none;
}
.catalog-active-label {
    font-size: 13px;
    font-weight: 600;
    color: #5b6a73;
}
.catalog-active-list {
    display: contents;
}
.catalog-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px 6px 14px;
    border: 1px solid #c7e7ee;
    border-radius: 999px;
    background: #f0f8f9;
    color: #275668;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.catalog-active-chip:hover {
    border-color: #36768d;
    background: #e3eef2;
}
.catalog-active-clear {
    padding: 6px 4px;
    border: 0;
    background: none;
    color: #36768d;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Under 768px the sidebar is a slide-in panel opened by the Filters button */
.catalog-filter-panel-title {
    font-size: 20px;
    font-weight: 600;
}
.catalog-filter-panel-foot {
    padding: 16px;
    border-top: 1px solid #e6e6e7;
}
@media (max-width: 991.98px) {
    .catalog-filter-col {
        display: contents;
    }
    .catalog-filter-panel {
        --bs-offcanvas-width: 320px;
    }
    .catalog-filter-panel .offcanvas-header {
        border-bottom: 1px solid #e6e6e7;
    }
    .catalog-filter-panel .catalog-filter {
        width: 100%;
    }
}

/* === Course catalog: learning pathways === */
.catalog-paths-head {
    gap: 12px;
}
.catalog-paths-head.is-center {
    align-items: center;
    text-align: center;
}
.catalog-paths-more {
    margin-top: 36px;
}
.catalog-paths-head p {
    max-width: 640px;
    font-size: 17px;
    color: #5b6a73;
}

.catalog-paths-grid {
    margin-top: calc(36px - var(--bs-gutter-y));
}

.pathway-card.is-compact .pathway-card-img {
    height: 160px;
}
.pathway-card.is-compact .pathway-card-body {
    flex: 0 1 auto;
    gap: 8px;
    padding: 20px 22px 22px;
}
.pathway-card.is-compact .pathway-card-link {
    margin-top: 4px;
    padding-top: 0;
}


/* =================================================================
   PAGE: Course Detail (course-detail.html)
   ================================================================= */

/* The .detail-* classes below are shared by course-detail.html and pathway-detail.html. */

/* === Course detail: hero + membership sidebar === */
.detail-hero .section-space {
    padding-top: 40px;
}


.detail-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-pill.is-detail {
    padding: 6px 12px;
    background: #e4eef1;
}
.tag-pill.is-olive {
    background: #eaf5ef;
    color: #7c874c;
}

.detail-title {
    font-size: 44px;
    letter-spacing: -1.32px;
}

.detail-lead {
    font-size: 17px;
    color: #5b6a73;
}

.detail-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}
.detail-fact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.detail-fact-label {
    font-size: 15px;
    font-weight: 600;
}
.detail-fact-sub {
    font-size: 12px;
    color: #5b6a73;
}

.detail-hero-img {
    display: block;
    width: 100%;
    height: 420px;
    border-radius: 24px;
    object-fit: cover;
}

.detail-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.detail-subtitle {
    font-size: 26px;
    font-weight: 600;
}
.detail-block p {
    font-size: 16px;
    color: #5b6a73;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    color: #5b6a73;
}

.cd-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cd-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
}
.cd-checks-icon {
    flex: 0 0 auto;
    margin-top: 3px;
}

.detail-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 380px;
    max-width: 100%;
}

/* Desktop and tablets in landscape: the sidebar column stays in view while the course content
   scrolls past */
@media (min-width: 992px) {
    .detail-aside-col {
        position: sticky;
        top: 24px;
    }
}

.detail-offer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border: 2px solid #36768d;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(39, 86, 104, 0.12);
}
.detail-offer .tag-pill {
    align-self: flex-start;
}
.detail-offer-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.detail-offer-title {
    font-size: 15px;
    font-weight: 600;
}
.detail-offer-price {
    font-size: 14px;
    color: #5b6a73;
}
.detail-offer-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #e6e6e7;
    list-style: none;
    font-size: 14px;
}
.detail-offer-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-presenter {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.detail-presenter-img {
    display: block;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.detail-presenter-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detail-presenter-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5b6a73;
}
.detail-presenter-name {
    font-size: 17px;
    font-weight: 600;
}
.detail-presenter-role {
    font-size: 13px;
    color: #5b6a73;
}

/* === Course detail: meet the presenter === */
.detail-instructor-img {
    display: block;
    width: 260px;
    height: 300px;
    border-radius: 24px;
    object-fit: cover;
}

.detail-instructor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.detail-instructor-bio {
    font-size: 17px;
    color: #5b6a73;
}
.detail-instructor-focus {
    font-size: 15px;
}
.detail-instructor .cta-btn {
    align-self: flex-start;
}

/* === Course detail: related courses === */
.cd-related-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cd-related-head p {
    font-size: 17px;
    color: #5b6a73;
}
.cd-related-head.is-center {
    align-items: center;
    text-align: center;
}
.cd-related-more {
    margin-top: 36px;
}

.cd-related-grid {
    margin-top: calc(36px - var(--bs-gutter-y));
}

.course-card.is-related .course-card-body {
    flex: 0 1 auto;
}
.course-card.is-related .course-card-link {
    margin-top: 4px;
}


/* =================================================================
   PAGE: Learning Pathways (learning-pathways.html)
   ================================================================= */

/* === Learning Pathways: Hero === */
.lp-hero-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.lp-hero-text {
    font-size: 17px;
    color: #5b6a73;
}
.lp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.lp-hero-img {
    display: block;
    width: 100%;
    height: 460px;
    border-radius: 28px;
    object-fit: cover;
}

/* === Learning Pathways: Build the skills (steps) === */
.lp-steps-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 820px;
}
.lp-steps-head p {
    font-size: 17px;
    color: #5b6a73;
}
.lp-steps-grid {
    margin-top: calc(36px - var(--bs-gutter-y));
}

.lp-step-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 30px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.lp-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #36768d;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.lp-step-card h3 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}
.lp-step-card p {
    font-size: 15px;
    color: #5b6a73;
}

/* === Learning Pathways: Featured pathways === */
.lp-featured-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-featured-head p {
    max-width: 760px;
    font-size: 17px;
    color: #5b6a73;
}

.lp-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-sort label {
    font-size: 14px;
    color: #5b6a73;
}
.lp-sort-select {
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid #cdd5d9;
    border-radius: 10px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.lp-chips {
    gap: 8px;
    margin-top: 24px;
}
/* phones: the sort list fills the row next to its label */
@media (max-width: 767.98px) {
    .lp-sort-select {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
    }
}

.lp-paths-grid {
    margin-top: calc(28px - var(--bs-gutter-y));
}

/* === Learning Pathways: More than just a course === */
.lp-benefits-grid {
    margin-top: calc(36px - var(--bs-gutter-y));
}

.lp-benefit-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 30px;
    border-radius: 20px;
    background: #f0f8f9;
}
.lp-benefit-card .icon-tile {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #36768d;
}
.lp-benefit-card h3 {
    font-size: 21px;
    font-weight: 600;
}
.lp-benefit-card p {
    font-size: 15px;
    color: #5b6a73;
}

/* === Learning Pathways: FAQ === */
.lp-faq-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-faq-intro p {
    color: #5b6a73;
}
.lp-faq-intro a {
    font-weight: 600;
}


/* =================================================================
   PAGE: Pathway Detail (pathway-detail.html)
   ================================================================= */

/* Builds on the shared .detail-* classes from the Course Detail section. */

/* === Pathway detail: hero + membership sidebar === */
.pd-title {
    font-size: 46px;
    letter-spacing: -1.38px;
}

/* the portrait sits at the top of the sidebar, shown whole, resting on the membership card
   (the negative margin cancels the sidebar's 16px gap) */
.pd-hero-img {
    height: auto;
    margin-bottom: -16px;
}

.pd-courses {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-steps {
    display: flex;
    flex-direction: column;
    margin: 0 0 0 20px;
    padding: 0;
    border-left: 2px solid #c7e7ee;
    list-style: none;
}
.pd-step {
    position: relative;
    padding: 0 0 28px 36px;
}
.pd-step-num {
    position: absolute;
    top: 0;
    left: -21px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #36768d;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}
.pd-step-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.pd-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pd-step-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.pd-step-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7c874c;
}
.pd-step-card p {
    font-size: 14px;
    color: #5b6a73;
}
.pd-step-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #5b6a73;
}
.pd-step-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* === Pathway detail: schools and districts === */
.pd-district-band {
    overflow: hidden;
    border-radius: 24px;
    background: #22282b;
    color: #ffffff;
}
/* The photo (nt-section-img-5-crop.webp, the original without its arch mask) fills its column
   instead of setting the band height, so only the band's own corners are rounded, like the
   closing CTA band. It is cropped from the bottom so the faces stay in view. */
.pd-district-media {
    position: relative;
}
.pd-district-img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .pd-district-img {
        max-height: 420px;
        object-fit: cover;
        object-position: center top;
    }
}

@media (min-width: 768px) {
    .pd-district-band {
        min-height: 460px;
    }
    .pd-district-img {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}
.pd-district-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 56px 48px;
}
.pd-district-body .eyebrow {
    color: #afc8d1;
}
.pd-district-body p {
    font-size: 16px;
    color: #c1c9cd;
}
.pd-district-body .cta-btn {
    align-self: flex-start;
}

@media (max-width: 767.98px) {
    .pd-district-body {
        padding: 36px 24px;
    }
}


/* =================================================================
   PAGE: State Requirements (state-requirements.html)
   ================================================================= */

/* === State requirements: Layout helpers === */
@media (max-width: 767.98px) {
    /* this page's mobile header uses a tighter trial button and 28px section titles */
    .page-state-requirements .cta-btn.btn_header {
        padding: 12px 14px;
        font-size: 13px;
    }
    .sr-title {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
}

/* === State requirements: Hero === */
.state-requirements-hero {
    overflow: hidden;
}

.sr-hero-text {
    max-width: 560px;
}

.sr-finder {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 610px; /* 560px content + padding + border (content-box in the original) */
    padding: 24px;
    border: 1px solid #e0e4e6;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(39, 86, 104, 0.10);
}
.sr-finder-label {
    font-size: 14px;
    font-weight: 600;
}
.sr-finder-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.sr-finder-select {
    flex: 1 1 240px;
    min-width: 0;
    min-height: 54px;
    padding: 0 16px;
    border: 1.5px solid #cdd5d9;
    border-radius: 12px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}
.sr-finder-submit {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    background: #36768d;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}
.sr-finder-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5b6a73;
}

.sr-hero-disclaimer {
    max-width: 560px;
    font-size: 12px;
    line-height: 1.5;
    color: #5b6a73;
}


@media (max-width: 767.98px) {
    .sr-hero-title {
        font-size: 36px;
        letter-spacing: -1.08px;
    }
}

/* === State requirements: Result panel === */
.state-requirements-result {
    border-top: 1px solid #e6e6e7;
    border-bottom: 1px solid #e6e6e7;
}

.sr-result-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sr-result-intro p {
    font-size: 16px;
    color: #5b6a73;
}

.sr-result-card {
    overflow: hidden;
    border: 1px solid #e0e4e6;
    border-radius: 20px;
    background: #ffffff;
}
.sr-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 28px;
    background: #275668;
    color: #ffffff;
}
.sr-result-state {
    font-size: 18px;
    font-weight: 600;
}
.sr-result-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 600;
}
.sr-result-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
}
.sr-result-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}
.sr-result-body p {
    font-size: 16px;
    color: #5b6a73;
}
.sr-result-body .sr-result-lead {
    color: #22282b;
}
.sr-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* smaller button used in the result panel and the courses header */
.cta-btn.sr-btn {
    min-height: 44px;
    padding: 14px 24px;
}
.cta-btn.btn_outline.sr-btn {
    padding: 14px 22px;
}

/* === State requirements: Team help === */
.sr-help {
    padding: 48px;
    border-radius: 24px;
    background: #22282b;
    color: #ffffff;
}
.sr-help-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sr-help-text p {
    font-size: 16px;
    color: #c1c9cd;
}
.sr-help-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sr-help-label {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}
.sr-help-input {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid #4a555b;
    border-radius: 10px;
    background: #2e3539;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: normal;
}
/* name and email side by side from 576px (an email address needs the full width on phones);
   stacked on tablets in portrait, where the form sits in a half column */
@media (min-width: 576px) and (max-width: 767.98px), (min-width: 992px) {
    .sr-help-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }
    .sr-help-form > label:nth-of-type(1) { grid-area: 1 / 1; }
    .sr-help-form > input:nth-of-type(1) { grid-area: 2 / 1; }
    .sr-help-form > label:nth-of-type(2) { grid-area: 1 / 2; }
    .sr-help-form > input:nth-of-type(2) { grid-area: 2 / 2; }
    .sr-help-submit { grid-column: 1 / -1; }
}
/* 16px text: smaller makes iOS zoom in when a field is tapped */
@media (max-width: 575.98px) {
    .sr-help-input {
        font-size: 16px;
    }
}
.sr-help-submit {
    min-height: 50px;
    margin-top: 4px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

/* === State requirements: Courses === */
.sr-courses {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.sr-courses-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sr-courses-intro p {
    font-size: 17px;
    color: #5b6a73;
}

/* roomier course card variant */
.course-card.is-sr .course-card-body {
    gap: 10px;
    padding: 20px 20px 22px;
}
.course-card.is-sr .course-card-title {
    font-size: 17px;
}

/* === State requirements: Testimonials === */
/* uses the shared .quote-slider component */

/* === State requirements: CTA === */
.cta-band.is-sr .section-title,
.state-requirements-cta .cta-band .section-title {
    line-height: 1.12;
}
.cta-band.is-sr .cta-btn,
.state-requirements-cta .cta-band .cta-btn {
    min-height: 44px;
    padding: 16px 28px;
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .cta-band.is-sr .cta-band-body,
    .state-requirements-cta .cta-band .cta-band-body {
        padding: 56px 48px;
    }
}


/* =================================================================
   PAGE: State Detail (Texas) (state-detail-texas.html)
   ================================================================= */

/* === State detail Texas: Layout helpers === */
/* heading block followed by a card grid, 36px apart */
.texas-stack {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* === State detail Texas: Hero === */

.texas-hero-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* "approved in your state" badge: the leaf in a stamped ring with a check, then the approval */
.approved-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 14px;
    padding: 10px 18px 10px 10px;
    border: 1px solid #d9e7ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(39, 86, 104, 0.10);
}
.approved-badge-seal {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid #36768d;
    border-radius: 50%;
    background: #f0f8f9;
    box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 5px #c7e7ee;
}
.approved-badge-seal img {
    width: 28px;
    height: 28px;
}
.approved-badge-check {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #7c874c;
}
.approved-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.approved-badge-title {
    color: #22282b;
    font-size: 15px;
    font-weight: 700;
}
.approved-badge-sub {
    color: #5b6a73;
    font-size: 13px;
}

.texas-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.texas-hero-meta {
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}
.texas-hero-sep {
    margin: 0 8px;
    color: #afc8d1;
}

.texas-hero-img {
    display: block;
    width: 100%;
    height: 440px;
    border-radius: 28px;
    object-fit: cover;
}

/* === State detail Texas: Busy educators === */
/* Square crop of the photo (tx-4-square.webp, cut from tx-4.webp without its curved mask),
   shown whole with the same 10px corners as the buttons. The export cropped it to a 400px
   band, which cut off the presenter's head. */
.texas-intro-img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.texas-intro-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.texas-intro-text p {
    font-size: 17px;
    color: #5b6a73;
}
.texas-intro-text .cta-btn {
    align-self: flex-start;
}

/* === State detail Texas: Goals === */
.texas-goals-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
}
.texas-goals-intro p {
    font-size: 17px;
    color: #5b6a73;
}

.texas-goal-card,
.texas-goal-card:hover {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 26px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
.icon-tile.texas-goal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}
.texas-goal-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.texas-goal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
}

/* === State detail Texas: Renewal requirements === */
.texas-renewal-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.texas-renewal-text p {
    font-size: 16px;
    color: #5b6a73;
}
.texas-renewal-text .cta-btn {
    align-self: flex-start;
}

.texas-glance {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border-radius: 24px;
    background: #f0f8f9;
}
.texas-glance-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #275668;
}
.texas-glance-note {
    font-size: 12px;
    color: #5b6a73;
}

.texas-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid #e0e4e6;
    border-radius: 14px;
    background: #ffffff;
}
.texas-stat-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.56px;
    color: #275668;
}
.texas-stat-label {
    font-size: 13px;
    color: #5b6a73;
}

/* === State detail Texas: Featured courses === */
.texas-topics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 28px;
    border-radius: 16px;
    background: #275668;
    color: #ffffff;
}
.texas-topics .eyebrow {
    color: #afc8d1;
}
.texas-topics-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.texas-topics p {
    font-size: 14px;
    color: #c1c9cd;
}
.texas-topics-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.texas-topics-links a,
.texas-topics-links a:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

/* === State detail Texas: FAQ === */
.texas-faq-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.texas-faq-intro p {
    font-size: 16px;
    color: #5b6a73;
}
.texas-faq-intro a {
    font-weight: 600;
}

/* === State detail Texas: Why professional learning matters === */
.texas-benefits-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.texas-benefits-intro p {
    max-width: 760px;
    font-size: 17px;
    color: #5b6a73;
}

.texas-benefit {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.texas-benefit-img {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
}
.texas-benefit-title {
    font-size: 21px;
    font-weight: 600;
}
.texas-benefit p {
    font-size: 15px;
    color: #5b6a73;
}


/* =================================================================
   PAGE: Membership / Pricing (membership-pricing.html)
   ================================================================= */

/* === Membership Pricing: Hero + plans === */
.mp-hero-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.mp-hero-head .page-title {
    max-width: 760px;
}
.mp-hero-head .intro-text {
    max-width: 560px;
}

.mp-signup-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 32px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.mp-signup-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}
.mp-signup-steps li.is-current {
    color: #22282b;
}
/* content-box like the original, so the 1.5px ring renders exactly as there */
.mp-signup-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 28px;
    height: 28px;
    border: 1.5px solid #cdd5d9;
    border-radius: 50%;
    color: #5b6a73;
    font-size: 13px;
    font-weight: 600;
}
.mp-signup-steps .is-current .mp-signup-num {
    border: 0;
    background: #36768d;
    color: #ffffff;
}

.mp-plans {
    max-width: 920px;
    margin: 40px auto 0;
}

.mp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 100%;
    padding: 36px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.mp-plan.is-featured {
    border: 2px solid #36768d;
    box-shadow: 0 24px 60px rgba(39, 86, 104, 0.14);
}
.mp-plan-badge {
    position: absolute;
    top: -14px;
    left: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #36768d;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.mp-plan-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mp-plan-name {
    font-size: 20px;
    font-weight: 600;
}
.mp-plan-sub,
.mp-plan-billed {
    font-size: 14px;
    color: #5b6a73;
}
.mp-plan-pricing {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.mp-plan-amount {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.44px;
}
.mp-plan-period {
    font-size: 15px;
    color: #5b6a73;
}
.mp-plan-trial {
    align-self: flex-start;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f0f8f9;
    color: #275668;
    font-size: 13px;
    font-weight: 600;
}
.mp-plan .cta-btn {
    width: 100%;
}
.mp-plan-features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}
.mp-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-assurances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}
.mp-assurances li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* === Membership Pricing: Stats strip === */
.mp-stats {
    border-bottom: 1px solid #e6e6e7;
}
.mp-stats-inner {
    padding-top: 56px;
    padding-bottom: 56px;
}
.mp-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-stat-value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.32px;
    color: #275668;
}
.mp-stat-label {
    font-size: 15px;
    font-weight: 500;
    color: #5b6a73;
}

/* === Membership Pricing: What's included === */
.mp-included-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mp-included-body p {
    font-size: 17px;
    color: #5b6a73;
}
.mp-included-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
}
.mp-included-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mp-included-body .cta-btn {
    align-self: flex-start;
    margin-top: 6px;
}
.mp-included-img {
    display: block;
    width: 100%;
    height: 440px;
    border-radius: 24px;
    object-fit: cover;
}

/* === Membership Pricing: Testimonials === */
.mp-testimonials-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.mp-testimonials-head p {
    color: #5b6a73;
}

/* === Membership Pricing: FAQ === */
.mp-faq-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mp-faq-intro p {
    color: #5b6a73;
}
.mp-faq-intro a {
    font-weight: 600;
}

/* === Membership Pricing: Custom solution banner === */
.mp-custom-banner {
    padding: 48px;
    border-radius: 24px;
    background: #22282b;
    color: #ffffff;
}
.mp-custom-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mp-custom-body .eyebrow {
    color: #afc8d1;
}

@media (max-width: 767.98px) {
    .mp-custom-banner {
        padding: 28px 22px;
    }
}


/* =================================================================
   PAGE: For Educators (for-educators.html)
   ================================================================= */

/* === For educators: shared section helpers (also used by for-schools.html) === */
.edu-copy {
    font-size: 17px;
    color: #5b6a73;
}

/* space between a section heading block and the card grid below it */
.edu-head {
    margin-bottom: 36px;
}

.edu-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
}

.edu-section-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edu-section-head.is-wide {
    gap: 12px;
}
.edu-section-head.is-center {
    align-items: center;
    text-align: center;
}
/* button centred below a card grid */
.edu-after {
    margin-top: 36px;
}
.edu-section-head.is-wide p {
    max-width: 760px;
}

/* === For educators: hero === */
.edu-hero-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.edu-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.edu-hero-meta {
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}
.edu-hero-dot {
    margin: 0 8px;
    color: #afc8d1;
}

/* crop from the bottom so her face is never cut off */
.edu-hero-img {
    display: block;
    width: 100%;
    height: 520px;
    border-radius: 28px;
    object-fit: cover;
    object-position: center top;
}
/* stacked under the copy: shorter, so the next section (and the reasons to sign up) come sooner */
@media (max-width: 1199.98px) {
    .edu-hero .edu-hero-img {
        height: 420px;
    }
}
@media (max-width: 767.98px) {
    .edu-hero .edu-hero-img {
        height: 300px;
    }
}

/* === For educators: goals === */
.edu-goal-card,
.edu-goal-card:hover {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 22px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}

.edu-goal-img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
    object-position: center bottom;
}
/* rectangular crops of the arched photos (goal-*-crop, ed-*-crop), with 10px corners */
.edu-goal-img.is-photo {
    border-radius: 10px;
    object-fit: cover;
    object-position: center 25%;
}
.edu-intro.is-center {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.edu-goal-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.edu-goal-card p {
    font-size: 14px;
    color: #5b6a73;
}

.edu-goal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
}

/* === For educators: on-demand video courses === */
.edu-video-img {
    display: block;
    width: 100%;
    height: 420px;
    border-radius: 24px;
    object-fit: cover;
}

.edu-video-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.edu-video-body .cta-btn {
    align-self: flex-start;
}

.edu-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.edu-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.edu-point .icon-tile {
    background: #ffffff;
}

.edu-point-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.edu-point-title {
    font-size: 18px;
    font-weight: 600;
}
.edu-point-text p {
    font-size: 15px;
    color: #5b6a73;
}

/* === For educators: platform features === */
/* uses the shared .feature-card + .icon-tile; heading spacing from .edu-head */

/* === For educators: course library === */
/* uses the shared .course-card */

/* === For educators: why professional learning matters === */
.edu-benefit-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}
.edu-benefit-img {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
}
.edu-benefit-title {
    font-size: 21px;
    font-weight: 600;
}
.edu-benefit-card p {
    font-size: 15px;
    color: #5b6a73;
}

/* === For educators: expert educators === */
.edu-expert,
.edu-expert:hover {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #22282b;
    text-decoration: none;
}
.edu-expert-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    object-fit: cover;
}
.edu-expert-name {
    font-size: 17px;
    font-weight: 600;
}
.edu-expert-role {
    margin-top: -8px;
    font-size: 13px;
    color: #5b6a73;
}

/* === For educators: membership options === */
.edu-plans-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.edu-plans-head p {
    max-width: 640px;
}

.edu-plans-grid {
    max-width: 900px;
    margin: 0 auto;
}

.edu-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 32px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.edu-plan-card.is-featured {
    border: 2px solid #36768d;
}

.edu-plan-badge {
    position: absolute;
    top: -14px;
    left: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #36768d;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.edu-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.edu-plan-amount {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1.32px;
    line-height: 1;
}
.edu-plan-period {
    font-size: 14px;
    color: #5b6a73;
}

/* per-month price under the annual price */
.edu-plan-note {
    margin-top: -6px;
    font-size: 14px;
    font-weight: 600;
    color: #36768d;
}
/* phones: the annual plan comes first with the full list; the monthly card shows only its price
   and button (its list is the same) */
@media (max-width: 767.98px) {
    .edu-plan-card.is-compact-sm .edu-plan-label,
    .edu-plan-card.is-compact-sm .edu-plan-list {
        display: none;
    }
}

.edu-plan-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5b6a73;
}

.edu-plan-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.edu-plan-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

/* === For educators: closing CTA === */
/* uses the shared .cta-band */


/* =================================================================
   PAGE: For Schools / Districts (for-schools.html)
   ================================================================= */

/* Reuses the hero, goal card, section head, benefit card and expert card classes (.edu-*)
   from the For Educators section. */

/* === For schools: hero === */
.schools-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}

/* === For schools: challenges === */
.schools-goals .edu-goal-img {
    height: 170px;
}

/* === For schools: built for schools showcase === */
.schools-showcase-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
    text-align: center;
}
.schools-showcase-head p {
    max-width: 640px;
}

.schools-rows {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.schools-row {
    --bs-gutter-x: 48px;
    --bs-gutter-y: 48px;
}

.schools-row-img {
    display: block;
    width: 100%;
    height: 340px;
    border-radius: 24px;
    object-fit: cover;
}

.schools-row-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.schools-row-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
}
.schools-row-body p {
    font-size: 16px;
    color: #5b6a73;
}
.schools-row-body .cta-btn {
    align-self: flex-start;
}

@media (max-width: 767.98px) {
    .schools-row {
        --bs-gutter-x: 40px;
    }
}

/* === For schools: district testimonial === */
.schools-proof-band {
    overflow: hidden;
    border-radius: 24px;
    background: #22282b;
    color: #ffffff;
}

.schools-proof-img {
    display: block;
    min-height: 380px;
    object-fit: cover;
}

.schools-proof-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 56px 48px;
}

.schools-proof-quote {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.45;
}

.schools-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.schools-stat-num {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.08px;
    line-height: 1.1;
    color: #c7e7ee;
}
.schools-stat-label {
    font-size: 13px;
    color: #c1c9cd;
}

@media (max-width: 767.98px) {
    .schools-proof-body {
        padding: 36px 24px;
    }
}

/* === For schools: platform features === */
/* uses the shared .feature-card + .icon-tile */

/* === For schools: values === */
.schools-value-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 30px;
    border-radius: 20px;
    background: #ffffff;
}
.schools-value-num {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1;
    color: #afc8d1;
}
.schools-value-title {
    font-size: 22px;
    font-weight: 600;
}
.schools-value-card p {
    font-size: 15px;
    color: #5b6a73;
}

/* === For schools: closing CTA === */
/* uses the shared .cta-band */


/* =================================================================
   PAGE: Request a Quote (request-a-quote.html)
   ================================================================= */

/* === Request a quote: hero + form === */
.rfq-hero-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rfq-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rfq-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.rfq-point-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rfq-point-title {
    font-size: 16px;
    font-weight: 600;
}
.rfq-point-text p {
    font-size: 14px;
    color: #5b6a73;
}

.rfq-hello {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 28px;
    border-radius: 20px;
    background: #22282b;
    color: #ffffff;
}
.rfq-hello .eyebrow {
    color: #afc8d1;
}

.rfq-hello-phone,
.rfq-hello-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.rfq-hello-phone,
.rfq-hello-phone:hover {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}
.rfq-hello-email,
.rfq-hello-email:hover {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

.rfq-trust,
.edu-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #5b6a73;
}
.rfq-trust-faces {
    display: flex;
}
.rfq-trust-faces img {
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
}
.rfq-trust-faces img:first-child {
    margin-left: 0;
}

/* === Request a quote: stats strip === */
.rfq-stats {
    border-bottom: 1px solid #e6e6e7;
}

.rfq-stats-inner {
    padding-top: 56px;
    padding-bottom: 56px;
}

.rfq-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.rfq-stat-num {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1.1;
    color: #275668;
}
.rfq-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}

/* === Request a quote: testimonial + what happens next === */
.rfq-next-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rfq-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rfq-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.rfq-step-num {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #36768d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}
.rfq-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rfq-step-title {
    font-size: 16px;
    font-weight: 600;
}
.rfq-step-desc {
    font-size: 14px;
    color: #5b6a73;
}


/* =================================================================
   PAGE: Our Story (our-story.html)
   ================================================================= */

/* === Our Story: hero === */
.story-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.story-hero-text {
    font-size: 17px;
    color: #5b6a73;
}

.story-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 8px;
}
.story-stat {
    display: flex;
    flex-direction: column;
}
.story-stat-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: #275668;
}
.story-stat-label {
    font-size: 13px;
    color: #5b6a73;
}

.story-hero-img {
    display: block;
    width: 100%;
    height: 500px;
    border-radius: 28px;
    object-fit: cover;
}

/* === Our Story: purpose, mission, vision === */
.story-purpose-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 32px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}

/* === Our Story: who we are === */
/* animated logo mark from simplek12.com/our-story (os-who-we-are.gif), shown whole */
.story-about-img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
    border-radius: 24px;
}

.story-about-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.story-about-copy p {
    color: #5b6a73;
}

/* === Our Story: values === */
.story-values .section-title {
    margin-bottom: 36px;
}

/* === Our Story: 40-year timeline === */
.story-history-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.story-history-head p {
    font-size: 17px;
    color: #5b6a73;
}

.story-timeline {
    display: flex;
    flex-direction: column;
    max-width: 862px;
    margin: 48px auto 0;
    padding: 0;
    border-left: 2px solid #c7e7ee;
    list-style: none;
}
.story-timeline-item {
    position: relative;
    padding: 0 0 32px 40px;
}
.story-timeline-dot {
    position: absolute;
    top: 6px;
    left: -9px;
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #36768d;
}
.story-timeline-item h3 {
    margin: 6px 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}
.story-timeline-item p {
    font-size: 15px;
    color: #5b6a73;
}

/* === Our Story: sister brands === */
.story-brands .section-title {
    margin-bottom: 36px;
}

.story-brand-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 32px;
    border-radius: 20px;
    background: #22282b;
    color: #ffffff;
}
.story-brand-logo {
    display: block;
    width: 180px;
    height: 56px;
    padding: 10px;
    border-radius: 8px;
    background: #2e3539;
    object-fit: contain;
}
.story-brand-name {
    font-size: 20px;
    font-weight: 600;
}
.story-brand-card p {
    font-size: 15px;
    color: #c1c9cd;
}
.story-brand-link,
.story-brand-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}


/* =================================================================
   PAGE: Our Expert Educators (our-experts.html)
   ================================================================= */

/* === Our Experts: hero === */
.experts-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.experts-hero-copy .intro-text {
    max-width: 720px;
}

.experts-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.experts-stat {
    display: flex;
    flex-direction: column;
}
.experts-stat-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: #275668;
}
.experts-stat-label {
    font-size: 13px;
    color: #5b6a73;
}

.experts-apply-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 476px;
    max-width: 100%;
    padding: 28px;
    border-radius: 20px;
    background: #22282b;
    color: #ffffff;
}
.experts-apply-card .eyebrow {
    color: #afc8d1;
}
.experts-apply-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}
.experts-apply-card .cta-btn {
    align-self: flex-start;
    margin-top: 6px;
}

/* === Our Experts: directory (search, filter chips, expert cards) === */
.experts-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.search-field.is-experts {
    width: 100%;
    max-width: 454px;
}

.experts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* phones and tablets in portrait: the swipe row spans the column (the filter column gap already
   spaces it from the search) */
@media (max-width: 991.98px) {
    .experts-filter .experts-chips {
        align-self: stretch;
        margin-top: 0;
    }
}
/* the chips are filter buttons (behaviour in main.js) */
.experts-chips .chip,
.lp-chips .chip,
.home-chips .chip,
.blog-chips .chip {
    border: 0;
    cursor: pointer;
}

.experts-empty,
.lp-paths-empty,
.home-catalog-empty {
    margin-top: 28px;
    color: #5b6a73;
    text-align: center;
}

.expert-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 20px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.expert-card p {
    font-size: 14px;
    color: #5b6a73;
}

.expert-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.expert-card-photo {
    display: block;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.expert-card-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.expert-card-name {
    font-size: 17px;
    font-weight: 600;
}
.expert-card-role {
    font-size: 13px;
    color: #5b6a73;
}

.expert-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.expert-card-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e0e4e6;
    border-radius: 50%;
}

.experts-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.cta-btn.experts-more-btn {
    padding: 15px 40px;
}


/* =================================================================
   PAGE: Contact (contact.html)
   ================================================================= */

/* === Contact: hero === */
.contact-hello {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 28px;
    border-radius: 20px;
    background: #22282b;
    color: #ffffff;
}
.contact-hello .eyebrow {
    color: #afc8d1;
}

.contact-hello-phone,
.contact-hello-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.contact-hello-phone,
.contact-hello-phone:hover {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}
.contact-hello-email,
.contact-hello-email:hover {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

.contact-hello-address {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #c1c9cd;
}
.contact-hello-address svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.help-card,
.help-card:hover {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 18px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
.help-card-title {
    font-size: 14px;
    font-weight: 600;
}
.help-card-text {
    font-size: 13px;
    color: #5b6a73;
}

/* === Contact: membership cards === */
.member-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 28px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.member-card-title {
    font-size: 20px;
    font-weight: 600;
}
.member-card p {
    font-size: 15px;
    color: #5b6a73;
}
.member-card .cta-btn {
    align-self: flex-start;
    margin-top: 6px;
}

.member-card.is-teal {
    border: 0;
    background: #36768d;
    color: #ffffff;
}
.member-card.is-teal .eyebrow {
    color: #c7e7ee;
}
.member-card.is-teal p {
    color: #e3eef2;
}


/* =================================================================
   PAGE: Blog (blog.html)
   ================================================================= */

/* The blog card, category chips, list header, pagination and newsletter band defined here are
   shared by blog.html, blog-category.html and blog-post.html. */

/* === Blog: Hero === */
.blog-hero .section-space {
    padding-bottom: 56px;
}

.blog-hero-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.blog-hero-intro {
    max-width: 640px;
}
.blog-hero-text.is-center {
    align-items: center;
    text-align: center;
}

/* Original label is content-box: 420px max content + 32px padding + 3px border */
.blog-search {
    width: 455px;
    max-width: 100%;
    min-height: 55px;
}
.blog-empty {
    margin: 8px 0 0;
    color: #5b6a73;
    text-align: center;
}

/* Shared: category chips row */
.blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}
.blog-chips.is-center {
    justify-content: center;
}

/* Phones and tablets in portrait: one row that scrolls sideways, edge to edge, fading out at
   the right edge (also the topic chips on learning-pathways.html and our-experts.html) */
@media (max-width: 991.98px) {
    .blog-chips,
    .blog-chips.is-center,
    .lp-chips,
    .experts-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 20px -20px 0;
        padding: 0 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .blog-chips::-webkit-scrollbar,
    .lp-chips::-webkit-scrollbar,
    .experts-chips::-webkit-scrollbar {
        display: none;
    }
    .blog-chips .chip,
    .lp-chips .chip,
    .experts-chips .chip {
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* with the 20px end padding, the last chip clears the 40px fade when scrolled to the end */
    .blog-chips::after,
    .lp-chips::after,
    .experts-chips::after {
        content: "";
        flex: 0 0 12px;
    }
}
/* the fade at the right edge shows only while a row actually scrolls (main.js sets .is-scrollable);
   a chip under it stays faintly visible as a hint that there are more */
.blog-chips.is-scrollable,
.lp-chips.is-scrollable,
.experts-chips.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
}
/* desktop: the blog category chips stay on one line: slightly tighter pills fit from about
   1366px; narrower screens scroll the row sideways. Auto margins centre it while it fits and
   collapse when it scrolls, so the first chip stays reachable */
@media (min-width: 992px) {
    .blog-chips {
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .blog-chips::-webkit-scrollbar {
        display: none;
    }
    .blog-chips .chip {
        flex-shrink: 0;
        padding: 8px 10px;
        white-space: nowrap;
    }
    .blog-chips.is-center {
        justify-content: flex-start;
    }
    .blog-chips-row {
        display: contents;
    }
    .blog-chips.is-center > :first-child > :first-child {
        margin-left: auto;
    }
    .blog-chips.is-center > :last-child > :last-child {
        margin-right: auto;
    }
}
/* tablets: the page gutter is 32px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .blog-chips,
    .blog-chips.is-center,
    .lp-chips,
    .experts-chips {
        margin-right: -32px;
        margin-left: -32px;
        padding: 0 32px;
    }
}

/* === Blog: Shared blog card (also used by blog-category and blog-post) === */
.blog-card,
.blog-card:hover {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
.blog-card-img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.blog-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}
.blog-card-body .tag-pill {
    align-self: flex-start;
}
.blog-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    color: #5b6a73;
}

/* === Blog: Featured posts === */
.blog-featured-card .blog-card-img {
    height: 280px;
}
.blog-featured-card .blog-card-body {
    padding: 28px;
}
.blog-featured-card .blog-card-title {
    font-size: 24px;
}

.blog-mini-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.blog-mini-card,
.blog-mini-card:hover {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
}
.blog-mini-card-cat {
    font-size: 12px;
    font-weight: 600;
    color: #275668;
}
.blog-mini-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.blog-mini-card-date {
    font-size: 13px;
    color: #5b6a73;
}

/* === Blog: Latest articles === */
/* Shared: list header (title + control), also used by blog-post "More from" */
.blog-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.blog-latest-head {
    margin-top: 56px;
}
.blog-list-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.56px;
}

.blog-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}
.blog-sort label {
    font-size: 14px;
    color: #5b6a73;
}
.blog-sort select {
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid #cdd5d9;
    border-radius: 10px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

/* Shared: pagination (bordered links are 44px content + 1px border in the original) */
.blog-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}
.blog-pager-link,
.blog-pager-link:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #e0e4e6;
    border-radius: 10px;
    color: #22282b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.blog-pager-link.is-active,
.blog-pager-link.is-active:hover {
    width: 44px;
    height: 44px;
    border: 0;
    background: #22282b;
    color: #ffffff;
}
.cta-btn.blog-pager-next {
    min-height: 44px;
    padding: 0 18px;
}

/* === Blog: Newsletter band (also used by blog-category) === */
.blog-newsletter {
    margin-top: 56px;
    padding: 32px;
    border-radius: 20px;
    background: #275668;
    color: #ffffff;
}
.blog-newsletter-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.blog-newsletter-title {
    font-size: 20px;
    font-weight: 600;
}
.blog-newsletter-sub {
    font-size: 14px;
    color: #d6e6ec;
}

/* the email field and the button stay on one line at every width */
.blog-newsletter-form {
    display: flex;
    gap: 10px;
}
.blog-newsletter-label {
    position: absolute;
    left: -9999px;
}
.blog-newsletter-form input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: normal;
}
.blog-newsletter-form button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: #22282b;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .blog-newsletter {
        padding: 24px 20px;
    }
    .blog-newsletter-form {
        gap: 8px;
    }
    .blog-newsletter-form input {
        padding: 0 12px;
    }
    .blog-newsletter-form button {
        padding: 0 16px;
    }
}
@media (max-width: 374.98px) {
    .blog-newsletter-form input {
        font-size: 14px;
    }
}


/* =================================================================
   PAGE: Blog Category (blog-category.html)
   ================================================================= */

/* Reuses the blog card, category chips, hero intro width, pagination and newsletter band from
   the Blog section. */

/* === Blog category: Hero === */
.blog-category-hero .section-space {
    padding-bottom: 56px;
}


.blog-category-hero-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.blog-category-hero-text.is-center {
    align-items: center;
    text-align: center;
}

/* === Blog category: Courses === */
.blog-category-courses-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blog-category-courses-text p {
    font-size: 17px;
    color: #5b6a73;
}
.blog-category-courses-text.is-center {
    align-items: center;
    text-align: center;
}
.blog-category-courses-more {
    margin-top: 36px;
}

/* 36px below the header; the row's own negative margin-top equals the gutter */
.blog-category-course-grid {
    margin-top: calc(36px - var(--bs-gutter-y));
}


/* =================================================================
   PAGE: Blog Post (blog-post.html)
   ================================================================= */

/* Reuses the blog card and list header from the Blog section ("More from Classroom Management"). */

/* === Post: Hero === */
/* 48px of breathing room plus the 120px the cover overlaps (see .post-cover) */
.post-hero .section-space {
    padding-bottom: 168px;
}

/* wide enough for the title to sit on two lines on desktop */
.post-hero-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1080px;
}
/* white so the pill shows on the mist hero (the default pill fill matches it) */
.tag-pill.post-hero-tag {
    align-self: flex-start;
    padding: 5px 12px;
    border: 1px solid #c7e7ee;
    background: #ffffff;
}
/* 46px at every width in both originals */
.page-title.post-hero-title {
    font-size: 46px;
    letter-spacing: -1.38px;
    text-wrap: balance;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    font-size: 14px;
    color: #5b6a73;
}
.post-meta-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* 28px content + 1px border (content-box in the original) */
.post-meta-author img {
    width: 30px;
    height: 30px;
    border: 1px solid #e0e4e6;
    border-radius: 50%;
    background: #ffffff;
    object-fit: contain;
}

/* === Post: Article === */
/* The cover overlaps the bottom of the hero by 120px. The container keeps that negative margin
   inside it (flow-root), so the white section still starts where the hero ends. In the original
   export the margin collapsed through and the cover hid the end of the title and the author row. */
.post-body > .container {
    display: flow-root;
}

.post-cover {
    position: relative;
    display: block;
    width: 100%;
    height: 460px;
    margin-top: -120px;
    border-radius: 24px;
    object-fit: cover;
}

/* 48px below the cover; the row's own negative margin-top equals the gutter */
.post-layout {
    margin-top: calc(48px - var(--bs-gutter-y));
}
/* the article fills the space beside the sidebar, so the sidebar sits at the right edge */
.post-article {
    font-size: 17px;
    line-height: 1.7;
    color: #22282b;
}
.post-article p {
    margin: 0 0 16px;
}
.post-article .post-intro {
    font-size: 18px;
    font-weight: 500;
}
.post-article .post-lead-in {
    margin-bottom: 12px;
}
.post-article .post-note {
    margin: 16px 0 0;
}
.post-article h2 {
    margin: 36px 0 12px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.56px;
}
.post-article h3 {
    margin: 24px 0 8px;
    font-size: 20px;
    font-weight: 600;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 22px;
}

.post-step {
    height: 100%;
    padding: 18px;
    border-radius: 14px;
    background: #f0f8f9;
}
.post-step-num {
    font-size: 12px;
    font-weight: 600;
    color: #36768d;
}
.post-step-title {
    margin: 4px 0;
    font-size: 16px;
    font-weight: 600;
}
.post-step-text {
    font-size: 14px;
    color: #5b6a73;
}

.post-activity {
    height: 100%;
    padding: 16px;
    border: 1px solid #e6e6e7;
    border-radius: 14px;
    background: #ffffff;
}
.post-activity-title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
}
.post-activity-text {
    font-size: 14px;
    color: #5b6a73;
}

/* Tables scroll inside their wrapper on narrow screens, as in the mobile original */
.post-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.post-table th {
    padding: 10px 12px;
    border-bottom: 2px solid #e0e4e6;
    font-weight: 600;
    text-align: left;
}
.post-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6e6e7;
}

.post-courses {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 40px;
    padding: 28px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #f9fafb;
}
.post-courses-title {
    font-size: 18px;
    font-weight: 600;
}
.post-courses-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #e6e6e7;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

/* === Post: Sidebar === */
/* Full width when it wraps under the article; a fixed width beside it on desktop (below) */
.post-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Desktop: the sidebar (contents first) stays in view while the article scrolls; on short
   screens it scrolls on its own so nothing is cut off */
@media (min-width: 992px) {
    .post-aside-col {
        position: sticky;
        top: 16px;
    }
    .post-aside {
        width: 328px;
        max-width: none;
        max-height: calc(100vh - 32px);
        margin: -4px;
        padding: 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

.post-toc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.post-toc a,
.post-toc a:hover {
    padding: 6px 0;
    border-top: 1px solid #f0f2f3;
    color: #22282b;
    font-size: 14px;
    text-decoration: none;
}

/* Phones and tablets: the contents as a collapsed menu above the article */
.post-toc-mobile {
    margin-bottom: 28px;
    border: 1px solid #e6e6e7;
    border-radius: 16px;
    background: #ffffff;
}
.post-toc-mobile summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 18px;
    cursor: pointer;
    list-style: none;
}
.post-toc-mobile summary::-webkit-details-marker {
    display: none;
}
.post-toc-mobile-label {
    font-size: 15px;
    font-weight: 600;
    color: #22282b;
}
.post-toc-mobile-count {
    font-size: 13px;
    color: #5b6a73;
}
.post-toc-mobile-icon {
    flex: 0 0 auto;
    margin-left: auto;
    color: #36768d;
    transition: transform 0.3s ease;
}
.post-toc-mobile[open] .post-toc-mobile-icon {
    transform: rotate(180deg);
}
.post-toc-mobile-list {
    display: flex;
    flex-direction: column;
    padding: 0 18px 10px;
}
.post-toc-mobile-list a,
.post-toc-mobile-list a:hover {
    padding: 11px 0;
    border-top: 1px solid #f0f2f3;
    color: #22282b;
    font-size: 14px;
    text-decoration: none;
}
.post-toc-mobile-list a:hover {
    color: #275668;
}
@media (prefers-reduced-motion: reduce) {
    .post-toc-mobile-icon {
        transition: none;
    }
}

.post-aside-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 20px;
    background: #36768d;
    color: #ffffff;
}
.post-aside-cta-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.post-aside-cta-text {
    font-size: 14px;
    color: #e3eef2;
}
.post-aside-cta .cta-btn {
    margin-top: 4px;
}

.post-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
}
.post-share-label {
    font-size: 14px;
    font-weight: 600;
}
.post-share-links {
    display: flex;
    gap: 8px;
}
/* 40px content + 1px border (content-box in the original) */
.post-share-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #e0e4e6;
    border-radius: 50%;
}


/* =================================================================
   PAGE: Legal / Privacy Policy (legal-privacy.html)
   ================================================================= */

/* === Legal: hero === */
.legal-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.legal-hero-date {
    font-size: 16px;
    color: #5b6a73;
}


/* === Legal: policy body === */
/* centred 1000px column, text stays left-aligned */
.legal-body {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
}
.legal-body h2 {
    margin: 36px 0 12px;
    font-size: 24px;
    letter-spacing: -0.48px;
}
.legal-body h2:first-child {
    margin-top: 0;
}
.legal-body p {
    margin: 0 0 14px;
}

.legal-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 36px;
    padding: 22px 24px;
    border-radius: 16px;
    background: #f0f8f9;
}
.legal-help span {
    font-size: 15px;
}

/* =================================================================
   PAGE: All pages (index.html)
   ================================================================= */

.pages-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.pages-group + .pages-group {
    margin-top: 56px;
}
.pages-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
}
.pages-group-count {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: #5b6a73;
}

/* page preview: the top of the page at desktop size */
.course-card-img.page-card-img {
    height: auto;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid #e6e6e7;
    object-position: center top;
}
.page-card .course-card-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.course-card-link.page-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

@media (max-width: 767.98px) {
    .pages-group + .pages-group {
        margin-top: 40px;
    }
    .pages-group-title {
        font-size: 20px;
    }
}

/* =================================================================
   INTERACTION: hover states
   The exported designs had no hover states, so every button-style
   control gets one here. This block stays last: many rules above set
   the same colors for the normal and :hover states.
   ================================================================= */

/* === Transitions === */
.cta-btn,
.form-submit,
.sr-finder-submit,
.sr-help-submit,
.blog-newsletter-form button,
.chip,
.blog-pager-link,
.catalog-filter-btn,
.menu-toggle,
.site-search-toggle,
.quote-slider-arrow,
.footer-social a,
.expert-card-social,
.site-nav-link,
.site-nav-toggle,
.site-dropdown-link,
.site-login {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* === Filled teal buttons: darker teal === */
.cta-btn:hover,
.form-submit:hover,
.sr-finder-submit:hover {
    background: #275668;
    color: #ffffff;
}

/* === White buttons on teal or dark panels: pale teal === */
.cta-btn.btn_white:hover,
.cta-btn.home-btn-light:hover,
.sr-help-submit:hover {
    background: #e3eef2;
}

/* === Dark buttons: teal === */
.blog-newsletter-form button:hover {
    background: #275668;
}

/* === Outline and icon buttons: mist fill, teal border === */
.cta-btn.btn_outline:hover,
.blog-pager-link:hover,
.catalog-filter-btn:hover,
.menu-toggle:hover,
.site-search-toggle:hover,
.expert-card-social:hover {
    border-color: #36768d;
    background: #f0f8f9;
}

/* === Filter chips === */
.chip:hover {
    background: #e3eef2;
    color: #275668;
}

/* Selected chip and current page: slightly lighter ink */
.chip.is-active:hover,
.blog-pager-link.is-active:hover {
    background: #3b4549;
    color: #ffffff;
}

/* === Slider arrows: outlined at rest, teal on hover === */
.quote-slider-arrow:hover {
    border-color: #36768d;
    background: #36768d;
    color: #ffffff;
}

/* === Slider dots === */
.quote-slider-dot:hover {
    background: #9cbfcc;
}
.quote-slider-dot.is-active:hover {
    background: #36768d;
}

/* === Phone and email links on the dark contact panels (contact, request a quote) === */
.contact-hello-phone,
.contact-hello-email,
.rfq-hello-phone,
.rfq-hello-email {
    transition: color 0.2s ease;
}
.contact-hello-phone:hover,
.contact-hello-email:hover,
.rfq-hello-phone:hover,
.rfq-hello-email:hover {
    color: #c7e7ee;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* === Footer links: light teal on hover === */
.footer-col a,
.footer-legal a {
    transition: color 0.2s ease;
}
.footer-col a:hover,
.footer-legal a:hover {
    color: #c7e7ee;
}

/* === Footer social icons === */
.footer-social a:hover {
    border-color: #7d888e;
    background: rgba(255, 255, 255, 0.08);
}

/* === Header links === */
.site-nav-link:hover,
.site-nav-toggle:hover,
.site-login:hover {
    color: #36768d;
}
.site-nav-toggle:hover {
    background: #f0f8f9;
}
.site-dropdown-link:hover {
    background: #f0f8f9;
    color: #36768d;
}

/* === Cards: lift, soft shadow, light teal border on hover ===
   Every content card on every page. Photo cards also zoom their photo, and cards with a text
   link darken it and nudge its arrow. Only on devices with a real hover, so a tap on a phone
   doesn't leave a card raised. Interface panels (forms, sidebars, contact panels, the state
   finder, hero decorations) are not cards and stay still. */
.course-card,
.pathway-card,
.blog-card,
.blog-mini-card,
.catalog-topic,
.home-path-feature,
.home-goal-card,
.edu-goal-card,
.texas-goal-card,
.texas-topics,
.help-card,
.feature-card,
.quote-card,
.expert-card,
.experts-apply-card,
.post-activity,
.post-step,
.pd-step-card,
.texas-stat,
.schools-value-card,
.home-how-card,
.lp-step-card,
.lp-benefit-card,
.story-purpose-card,
.story-brand-card,
.member-card,
.edu-plan-card,
.home-plan-card,
.home-schools,
.mp-plan {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.course-card-img,
.pathway-card-img,
.blog-card-img,
.catalog-topic-img,
.home-path-feature > img {
    transition: transform 0.4s ease;
}
.course-card-link,
.pathway-card-link,
.texas-goal-link,
.edu-goal-link,
.home-goal-link {
    transition: color 0.2s ease;
}
.texas-goal-icon {
    transition: background-color 0.25s ease;
}
.texas-goal-link svg,
.edu-goal-link svg,
.home-goal-link svg,
.catalog-topic-link svg,
.home-path-feature-link svg {
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .course-card:hover,
    .pathway-card:hover,
    .blog-card:hover,
    .blog-mini-card:hover,
    .catalog-topic:hover,
    .home-path-feature:hover,
    .home-goal-card:hover,
    .edu-goal-card:hover,
    .texas-goal-card:hover,
    .texas-topics:hover,
    .help-card:hover,
    .feature-card:hover,
    .quote-card:hover,
    .expert-card:hover,
    .experts-apply-card:hover,
    .post-activity:hover,
    .post-step:hover,
    .pd-step-card:hover,
    .texas-stat:hover,
    .schools-value-card:hover,
    .home-how-card:hover,
    .lp-step-card:hover,
    .lp-benefit-card:hover,
    .story-purpose-card:hover,
    .story-brand-card:hover,
    .member-card:hover,
    .edu-plan-card:hover,
    .home-plan-card:hover,
    .home-schools:hover,
    .mp-plan:hover {
        border-color: #c7e7ee;
        box-shadow: 0 18px 40px rgba(34, 40, 43, 0.10);
        transform: translateY(-4px);
    }

    /* Featured plans keep their teal border and get a deeper version of their shadow */
    .home-plan-card:hover,
    .mp-plan.is-featured:hover,
    .edu-plan-card.is-featured:hover {
        border-color: #36768d;
        box-shadow: 0 28px 64px rgba(39, 86, 104, 0.18);
    }

    .course-card:hover .course-card-img,
    .pathway-card:hover .pathway-card-img,
    .blog-card:hover .blog-card-img,
    .catalog-topic:hover .catalog-topic-img,
    .home-path-feature:hover > img {
        transform: scale(1.04);
    }

    .course-card:hover .course-card-link,
    .pathway-card:hover .pathway-card-link,
    .texas-goal-card:hover .texas-goal-link,
    .edu-goal-card:hover .edu-goal-link,
    .home-goal-card:hover .home-goal-link {
        color: #275668;
    }

    .texas-goal-card:hover .texas-goal-icon {
        background: #e3eef2;
    }

    .texas-goal-card:hover .texas-goal-link svg,
    .edu-goal-card:hover .edu-goal-link svg,
    .home-goal-card:hover .home-goal-link svg,
    .catalog-topic:hover .catalog-topic-link svg,
    .home-path-feature:hover .home-path-feature-link svg {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-card,
    .pathway-card,
    .blog-card,
    .blog-mini-card,
    .catalog-topic,
    .home-path-feature,
    .home-goal-card,
    .edu-goal-card,
    .texas-goal-card,
    .texas-topics,
    .help-card,
    .feature-card,
    .quote-card,
    .expert-card,
    .experts-apply-card,
    .post-activity,
    .post-step,
    .pd-step-card,
    .texas-stat,
    .schools-value-card,
    .home-how-card,
    .lp-step-card,
    .lp-benefit-card,
    .story-purpose-card,
    .story-brand-card,
    .member-card,
    .edu-plan-card,
    .home-plan-card,
    .home-schools,
    .mp-plan,
    .course-card-img,
    .pathway-card-img,
    .blog-card-img,
    .catalog-topic-img,
    .home-path-feature > img {
        transition: none;
    }
    .course-card:hover,
    .pathway-card:hover,
    .blog-card:hover,
    .blog-mini-card:hover,
    .catalog-topic:hover,
    .home-path-feature:hover,
    .home-goal-card:hover,
    .edu-goal-card:hover,
    .texas-goal-card:hover,
    .texas-topics:hover,
    .help-card:hover,
    .feature-card:hover,
    .quote-card:hover,
    .expert-card:hover,
    .experts-apply-card:hover,
    .post-activity:hover,
    .post-step:hover,
    .pd-step-card:hover,
    .texas-stat:hover,
    .schools-value-card:hover,
    .home-how-card:hover,
    .lp-step-card:hover,
    .lp-benefit-card:hover,
    .story-purpose-card:hover,
    .story-brand-card:hover,
    .member-card:hover,
    .edu-plan-card:hover,
    .home-plan-card:hover,
    .home-schools:hover,
    .mp-plan:hover,
    .course-card:hover .course-card-img,
    .pathway-card:hover .pathway-card-img,
    .blog-card:hover .blog-card-img,
    .catalog-topic:hover .catalog-topic-img,
    .home-path-feature:hover > img {
        transform: none;
    }
}

/* =================================================================
   Mobile CRO layer
   Phone-first conversion patterns shared by every page: sticky CTA bar,
   swipe rows, compact list cards, offer card under the intro on detail
   pages, form-first quote/contact pages, compact homepage hero.
   ================================================================= */

/* === CRO: sticky CTA bar (below 992px, shown once the hero CTA scrolls away) === */
.sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e0e4e6;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 24px rgba(34, 40, 43, 0.08);
    visibility: hidden;
    transform: translateY(110%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.sticky-cta.is-visible {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.25s ease, visibility 0s linear 0s;
}
.sticky-cta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.sticky-cta-title {
    font-size: 14px;
    font-weight: 700;
    color: #22282b;
}
.sticky-cta-sub {
    font-size: 12px;
    color: #5b6a73;
}
.cta-btn.sticky-cta-btn {
    flex-shrink: 0;
    min-height: 48px;
    margin-left: auto;
    padding: 0 20px;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    body.has-sticky-cta {
        padding-bottom: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta,
    .sticky-cta.is-visible {
        transition: none;
    }
}

/* === CRO: shorter topbar on phones === */
@media (max-width: 575.98px) {
    .site-topbar {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* mouse drag on a row that scrolls sideways (main.js): no snapping or text selection mid-drag */
.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.row-swipe-sm.is-dragging {
    scroll-snap-type: none;
}

/* === CRO: swipe rows (card rows scroll sideways under 768px instead of stacking) === */
/* the gutter is 0px, not 0: margins written as calc(36px - var(--bs-gutter-y)) need a length */
@media (max-width: 767.98px) {
    .row-swipe-sm {
        --bs-gutter-y: 0px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .row-swipe-sm::-webkit-scrollbar {
        display: none;
    }
    .row-swipe-sm > * {
        flex: 0 0 auto;
        width: 60%;
        scroll-snap-align: start;
    }
    .row-swipe-sm > * > * {
        height: 100%;
    }
}
@media (max-width: 575.98px) {
    .row-swipe-sm > * {
        width: 84%;
    }
}

/* === CRO: compact list cards (image left, no excerpt) for long lists on phones === */
@media (max-width: 575.98px) {
    .row-list-sm {
        --bs-gutter-y: 12px;
    }
    .row-list-sm .course-card,
    .row-list-sm .pathway-card,
    .row-list-sm .blog-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-radius: 14px;
    }
    .row-list-sm .course-card-img,
    .row-list-sm .pathway-card-img,
    .row-list-sm .blog-card-img {
        flex: 0 0 108px;
        width: 108px;
        height: auto;
        min-height: 108px;
        object-fit: cover;
    }
    .row-list-sm .course-card-body,
    .row-list-sm .pathway-card-body,
    .row-list-sm .blog-card-body {
        gap: 6px;
        min-width: 0;
        padding: 12px 14px;
    }
    .row-list-sm .course-card-body p,
    .row-list-sm .pathway-card-body p,
    .row-list-sm .blog-card-body .tag-pill {
        display: none;
    }
    .row-list-sm .course-card-title,
    .row-list-sm .pathway-card-title,
    .row-list-sm .blog-card-title {
        font-size: 15px;
        line-height: 1.35;
    }
    .row-list-sm .expert-card {
        gap: 12px;
        padding: 16px;
    }
    .row-list-sm .expert-card > p {
        display: none;
    }
}

/* === CRO: contact and quote forms (both sit in .hero-form-col) ===
   The two contact options are side-by-side tiles (name above its turnaround time) in a wrapper
   (.choice-options); the chosen one is highlighted.
   Phones: tighter card so the fields get the width, names side by side, 16px field text (smaller
   text makes iOS zoom in when a field is tapped), a shorter message box. */
.choice-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-form-col .choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.hero-form-col .choice-option {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2px 10px;
    padding: 12px 14px;
}
.hero-form-col .choice-option-name {
    font-weight: 600;
}
.hero-form-col .choice-option .clr_muted {
    flex-basis: 100%;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}
.hero-form-col .choice-option:has(input:checked) {
    border-color: #36768d;
    background: #f0f8f9;
}
@media (max-width: 575.98px) {
    .hero-form-col .form-card {
        gap: 16px;
        padding: 24px 18px;
    }
    .hero-form-col .field-input {
        font-size: 16px;
    }
    .hero-form-col textarea.field-input {
        height: 104px;
    }
    .hero-form-col .choice-option {
        padding: 12px;
    }
    .hero-form-col .check-option {
        min-height: 44px;
    }
}
/* the smallest phones: the two options stack again so "Phone call" stays next to its radio */
@media (max-width: 359.98px) {
    .hero-form-col .choice-options {
        grid-template-columns: 1fr;
    }
}

/* === CRO: contact hero body (replaces the d-flex utilities so it can reflow on phones) === */
.contact-hero-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* === CRO: stat rows two-up on phones === */
@media (max-width: 575.98px) {
    .row-stats-sm > * {
        min-width: 0;
    }
    .row-stats-sm [class*="stat-num"],
    .row-stats-sm [class*="stat-value"] {
        font-size: 28px;
        line-height: 1.15;
    }
    .row-stats-sm > * {
        width: 50%;
    }
    .row-stats-sm > *:last-child:nth-child(odd) {
        width: 100%;
    }
}

/* === CRO: homepage stats (number above label on phones and every tablet, iPad Pro included;
   the label sits beside the number from 1200px) === */
@media (max-width: 1199.98px) {
    .home-stat {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 2px;
    }
    .home-stat-label {
        flex-basis: auto;
    }
}

/* === CRO: homepage hero (photo first, primary CTA above the fold) === */
@media (max-width: 1199.98px) {
    .home-hero .row {
        --bs-gutter-y: 28px;
    }
    .home-hero-media {
        max-width: 640px;
        min-height: 460px;
        margin: 0 auto;
    }
    .home-hero-backdrop {
        height: 420px;
    }
    .home-hero-photo {
        height: 460px;
    }
}
@media (max-width: 767.98px) {
    .home-hero-space {
        padding-top: 16px;
    }
    .home-hero .row {
        --bs-gutter-y: 18px;
    }
    .home-hero-copy {
        gap: 18px;
    }
    .home-hero-media {
        min-height: 270px;
    }
    .home-hero-backdrop {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 220px;
        border-radius: 24px;
    }
    .home-hero-photo {
        right: 0;
        width: 70%;
        height: 270px;
        object-position: right bottom;
    }
    .home-hero-card {
        padding: 10px 12px;
        border-radius: 12px;
    }
    .home-hero-card.is-pathway {
        display: none;
    }
    .home-hero-card.is-cert {
        bottom: 14px;
        left: 12px;
        gap: 10px;
        width: 190px;
    }
    .home-hero-cert-title {
        font-size: 12px;
    }
    .home-hero-cert-sub {
        font-size: 11px;
    }
    .home-hero-badge {
        order: 1;
    }
    .home-hero-title {
        order: 2;
        font-size: 30px;
    }
    .home-hero-actions {
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .home-hero-actions .cta-btn {
        width: 100%;
    }
    .home-hero-trust {
        order: 4;
    }
    .home-hero-lead {
        order: 5;
        font-size: 16px;
    }
}

/* === CRO: header actions never wrap ("Log in" and the trial button stay on one line) === */
.site-login,
.cta-btn.btn_header {
    white-space: nowrap;
}

/* === CRO: detail pages (offer card under the intro below 1200px) === */
@media (min-width: 576px) {
    .detail-offer.is-inline {
        max-width: 560px;
    }
}
.detail-offer.is-inline {
    gap: 14px;
    margin: 4px 0 8px;
    padding: 20px;
}
@media (max-width: 991.98px) {
    .detail-aside {
        width: 100%;
    }
    .detail-aside > .detail-offer {
        display: none;
    }
}
@media (max-width: 575.98px) {
    .detail-title {
        font-size: 28px;
        line-height: 1.18;
    }
    .detail-hero-img {
        height: 210px;
        object-fit: cover;
    }
}

/* === CRO: quote + contact pages (form straight after the intro on phones; two columns from 768px) === */
@media (max-width: 767.98px) {
    .rfq-hero .row.gutter-56,
    .contact-hero .row.gutter-56 {
        --bs-gutter-y: 0px;
    }
    .hero-form-intro,
    .hero-form-body {
        display: contents;
    }
    .hero-form-body > * {
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }
    .hero-form-body > .eyebrow,
    .hero-form-body > .page-title,
    .hero-form-body > .intro-text {
        order: 1;
        margin-bottom: 14px;
    }
    .hero-form-col {
        order: 2;
        margin-bottom: 28px;
    }
}

/* === CRO: tap targets (44px minimum on touch screens) === */
@media (max-width: 991.98px) {
    .expert-card-foot a {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =================================================================
   MOBILE: equal section spacing
   Under 768px every section leaves 56px above and below its content
   (the .section-space value); these rules bring the exceptions in line.
   ================================================================= */
@media (max-width: 767.98px) {
    /* swipe rows keep their 8px of room for card shadows without adding it to the section */
    .row-swipe-sm {
        margin-bottom: -8px;
    }
    .home-hero-space {
        padding-bottom: 56px;
    }
    .home-cta-space {
        padding: 56px 20px;
    }
    .detail-hero .section-space {
        padding-top: 56px;
    }
    /* same background as the section above and no divider: one 56px gap instead of two */
    .state-detail-texas-faq .section-space {
        padding-top: 0;
    }
}

/* the last item of a reflowed hero form adds no space under the hero */
@media (max-width: 767.98px) {
    .hero-form-body > :last-child {
        margin-bottom: 0;
    }
}
@media (max-width: 767.98px) {
    .hero-form-body > .row-swipe-sm:last-child {
        margin-bottom: -8px;
    }
}

/* =================================================================
   MOBILE: consistent heading sizes
   Under 768px every page title (h1) is 30px and every section title (h2) 27px,
   the shared .page-title / .section-title values; these rules bring the exceptions in line.
   ================================================================= */
@media (max-width: 767.98px) {
    .home-hero-title,
    .detail-title,
    .detail-title.pd-title,
    .page-title.sr-hero-title,
    .page-title.post-hero-title {
        font-size: 30px;
        line-height: 1.08;
        letter-spacing: -0.9px;
    }
    .home-section-title.is-lg,
    .home-section-title.is-md,
    .home-state-title,
    .home-cta-title,
    .detail-subtitle,
    .section-title.sr-title,
    .blog-list-title {
        font-size: 27px;
        line-height: 1.15;
        letter-spacing: -0.675px;
    }
    /* headings inside an article: the same size on the blog post and the privacy policy */
    .post-article h2 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }
}

/* =================================================================
   MOBILE: full-width buttons
   Under 576px every button in the page content fills its column (pairs stack, one per row).
   Not the blog pagination or the newsletter field + button row.
   ================================================================= */
@media (max-width: 575.98px) {
    main .cta-btn:not([class*="blog-pager"]),
    main .sr-finder-submit {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

/* =================================================================
   MOBILE: CRO pass (from the 390px audit of every page)
   ================================================================= */
/* list icons keep their size when the line wraps */
li > svg,
.post-courses-link svg {
    flex-shrink: 0;
}
.legal-body h2 {
    line-height: 1.25;
}
.pd-step-time {
    white-space: nowrap;
}
/* savings anchors on the annual plan */
.home-price-save,
.mp-plan-save {
    color: #36768d;
    font-weight: 600;
}
.home-price-save {
    margin-left: 4px;
    letter-spacing: 0;
    text-transform: none;
}
.mp-plan-save {
    font-size: 14px;
}
.story-hero-actions {
    margin-top: 4px;
}

/* below lg the detail pages show the offer card inline under the title; the sidebar's
   presenter card and photo only repeat the instructor section further down */
@media (max-width: 991.98px) {
    .detail-aside .detail-presenter,
    .detail-aside .pd-hero-img {
        display: none;
    }
    /* nothing else in the sidebar shows below lg, so its column goes too (no stray gutter) */
    [class*="col-"]:has(> .detail-aside) {
        display: none;
    }
}
@media (max-width: 1199.98px) {
    .schools-hero .edu-hero-img {
        height: 420px;
    }
}

/* contact and quote pages: the dark "Say hello" card keeps its own padding and the page gutter
   when the hero reflows (the generic rule gives every item gutter padding instead) */
@media (max-width: 767.98px) {
    .hero-form-body > .contact-hello,
    .hero-form-body > .rfq-hello {
        flex-basis: calc(100% - var(--bs-gutter-x));
        margin-right: calc(var(--bs-gutter-x) * 0.5);
        margin-left: calc(var(--bs-gutter-x) * 0.5);
        padding: 26px 28px;
    }
    .contact-hello-phone,
    .contact-hello-email,
    .rfq-hello-phone,
    .rfq-hello-email {
        min-height: 44px;
    }
}
@media (max-width: 767.98px) {
    /* the help-card row: 20px gutter on the left like the form above; the swipe row runs to the right edge */
    .hero-form-body > .row {
        padding-right: 0;
        padding-left: 0;
        flex-basis: calc(100% - 14px);
        max-width: calc(100% - 14px);
        margin-right: 0;
        margin-left: 14px;
    }
}

@media (max-width: 767.98px) {
    /* tall photos come down so the next message and button arrive sooner */
    .story-hero-img,
    .lp-hero-img,
    .texas-hero-img,
    .home-job-img,
    .schools-hero .edu-hero-img {
        height: 300px;
        object-position: center top;
    }
    .edu-video-img,
    .mp-included-img {
        height: 260px;
    }
    .pd-district-img {
        max-height: 260px;
    }
    /* the product screenshots show whole (fixed height cropped the labels drawn into them) */
    .schools-row-img {
        height: auto;
    }
    .schools-proof-img {
        min-height: 0;
        height: 260px;
        object-position: center top;
    }
    .texas-intro-img {
        max-width: 240px;
    }
    .story-about-img {
        max-width: 220px;
    }
    .blog-featured-card .blog-card-img {
        height: 200px;
    }
    /* featured pathway: three lines of description, the card links to the full pathway */
    .home-path-feature p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    /* membership: annual comes first with the full list; monthly shows its price and button */
    .mp-plan.is-compact-sm .mp-plan-features {
        display: none;
    }
}

@media (max-width: 575.98px) {
    /* the eyebrow repeats the page title, and the three-step indicator wraps to two lines:
       without them the annual plan's trial button is on the first screen */
    .mp-hero-head .eyebrow,
    .mp-signup-steps {
        display: none;
    }
    /* blog post cover at its own shape (it was 460px tall), overlapping the hero by 64px */
    .post-hero .section-space {
        padding-bottom: 112px;
    }
    .post-cover {
        height: auto;
        margin-top: -64px;
    }
    .pathway-card-top {
        flex-direction: column;
        gap: 4px;
    }
    .texas-stat-num {
        font-size: 24px;
        white-space: nowrap;
    }
    .sr-help {
        padding: 28px 20px;
    }
}

/* =================================================================
   TABLET (768px to 1199px): two columns like desktop
   The two-column rows switch at md (768px); these rules size their contents for the
   narrower columns: tighter gutters and section spacing, smaller hero media.
   ================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .gutter-40,
    .gutter-48,
    .gutter-56,
    .gutter-64 {
        --bs-gutter-x: 32px;
    }
    .section-space,
    .home-section-space {
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .home-hero-space {
        padding-top: 56px;
        padding-bottom: 64px;
    }
    .home-cta-space {
        padding-top: 72px;
        padding-bottom: 72px;
    }
    /* CTA bands: text column padding for the 7/12 column */
    .cta-band-body,
    .cta-band.is-home .cta-band-body {
        padding: 40px 32px;
    }
    /* homepage hero photo sized for its half column */
    .home-hero-media {
        min-height: 420px;
    }
    .home-hero-backdrop {
        height: 380px;
    }
    .home-hero-photo {
        height: 420px;
    }
    /* homepage state section: copy and state picker side by side, the map full width below */
    .home-state-main {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }
    .home-state-copy {
        flex: 1 1 0;
        min-width: 0;
    }
    .home-state-card {
        flex: 0 0 300px;
    }
    /* pricing card in its half column: room for both price boxes */
    .home-plan-card {
        padding: 28px 24px;
    }
    .home-price {
        padding: 12px;
    }
    .home-price-value {
        font-size: 22px;
        letter-spacing: -0.44px;
    }
    .home-price-save {
        display: block;
        margin: 2px 0 0;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* homepage hero heading in its half column */
    .home-hero-title {
        font-size: 40px;
        letter-spacing: -1.2px;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* catalog topic cards: two across, the third spans the row under them */
    .catalog-topics > .col:last-child:nth-child(odd) {
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* catalog hero: intro and search side by side */
    .catalog-search {
        width: 340px;
    }
}

/* =================================================================
   TABLET type (768px to 1199px): section headings at 80% of their desktop size,
   body paragraphs 16px (card text and small notes keep their sizes)
   ================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .home-hero-title {
        font-size: 46px;
        letter-spacing: -1.38px;
    }
    .page-title {
        font-size: 43px;
        letter-spacing: -1.29px;
    }
    .page-title.sr-hero-title {
        font-size: 43px;
        letter-spacing: -1.29px;
    }
    .page-title.post-hero-title {
        font-size: 37px;
        letter-spacing: -1.11px;
    }
    .page-title.detail-title.pd-title {
        font-size: 37px;
        letter-spacing: -1.11px;
    }
    .page-title.detail-title {
        font-size: 35px;
        letter-spacing: -1.05px;
    }
    .home-section-title.is-lg {
        font-size: 35px;
        letter-spacing: -0.87px;
    }
    .home-cta-title {
        font-size: 34px;
        letter-spacing: -0.85px;
    }
    .home-section-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    .home-section-title.home-how-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    .section-title {
        font-size: 30px;
        letter-spacing: -0.75px;
    }
    .section-title.edu-head {
        font-size: 30px;
        letter-spacing: -0.75px;
    }
    .section-title.sr-title {
        font-size: 30px;
        letter-spacing: -0.75px;
    }
    .home-state-title {
        font-size: 29px;
        letter-spacing: -0.58px;
    }
    .home-section-title.is-md {
        font-size: 29px;
        letter-spacing: -0.73px;
    }
    .home-path-feature-body h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }
    .post-article h2 {
        font-size: 22px;
        letter-spacing: -0.44px;
    }
    .blog-list-title {
        font-size: 22px;
        letter-spacing: -0.44px;
    }
    .detail-subtitle {
        font-size: 21px;
    }
    .schools-row-title {
        font-size: 21px;
    }
    .pages-group-title {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .legal-body h2 {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .blog-category-courses-text p,
    .catalog-paths-head p,
    .cd-related-head p,
    .cta-band-body p,
    .detail-instructor-bio,
    .detail-instructor-focus,
    .detail-lead,
    .edu-copy,
    .edu-point-text p,
    .home-head p,
    .home-head-text,
    .home-hero-lead,
    .home-job-copy p,
    .home-job-lead,
    .home-job-copy .home-job-lead,
    .home-member-copy p,
    .home-path-feature-body p,
    .intro-text,
    .intro-text.blog-hero-intro,
    .intro-text.sr-hero-text,
    .lp-featured-head p,
    .lp-hero-text,
    .lp-steps-head p,
    .mp-included-body p,
    .post-article p,
    .post-intro,
    .post-article .post-intro,
    .post-lead-in,
    .post-note,
    .sr-courses-intro p,
    .story-hero-text,
    .story-history-head p,
    .story-timeline-item p,
    .texas-benefit p,
    .texas-benefits-intro p,
    .texas-goals-intro p,
    .texas-intro-text p {
        font-size: 16px;
    }
}

/* =================================================================
   HEADINGS: every section heading (24px and up) 20% smaller than before, on every device
   ================================================================= */
@media (min-width: 1200px) {
    .page-title {
        font-size: 43px;
        letter-spacing: -1.3px;
    }
    .section-title {
        font-size: 30px;
        letter-spacing: -0.76px;
    }
    .page-title.post-hero-title {
        font-size: 37px;
        letter-spacing: -1.1px;
    }
    .post-article h2 {
        font-size: 22px;
        letter-spacing: -0.45px;
    }
    .blog-list-title {
        font-size: 22px;
        letter-spacing: -0.45px;
    }
    .page-title.detail-title {
        font-size: 35px;
        letter-spacing: -1.06px;
    }
    .detail-subtitle {
        font-size: 21px;
    }
    .section-title.edu-head {
        font-size: 30px;
        letter-spacing: -0.76px;
    }
    .schools-row-title {
        font-size: 21px;
    }
    .home-hero-title {
        font-size: 46px;
        letter-spacing: -1.39px;
    }
    .home-section-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    .home-path-feature-body h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }
    .home-section-title.is-lg {
        font-size: 35px;
        letter-spacing: -0.88px;
    }
    .home-section-title.home-how-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    .home-state-title {
        font-size: 29px;
        letter-spacing: -0.58px;
    }
    .home-section-title.is-md {
        font-size: 29px;
        letter-spacing: -0.72px;
    }
    .home-cta-title {
        font-size: 34px;
        letter-spacing: -0.84px;
    }
    .pages-group-title {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .legal-body h2 {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .page-title.detail-title.pd-title {
        font-size: 37px;
        letter-spacing: -1.1px;
    }
    .page-title.sr-hero-title {
        font-size: 43px;
        letter-spacing: -1.3px;
    }
    .section-title.sr-title {
        font-size: 30px;
        letter-spacing: -0.76px;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .page-title {
        font-size: 34px;
        letter-spacing: -1.03px;
    }
    .section-title {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    .page-title.post-hero-title {
        font-size: 30px;
        letter-spacing: -0.89px;
    }
    .page-title.detail-title {
        font-size: 28px;
        letter-spacing: -0.84px;
    }
    .section-title.edu-head {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    .home-hero-title {
        font-size: 37px;
        letter-spacing: -1.1px;
    }
    .home-section-title {
        font-size: 26px;
        letter-spacing: -0.64px;
    }
    .home-path-feature-body h3 {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .home-section-title.is-lg {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    .home-section-title.home-how-title {
        font-size: 26px;
        letter-spacing: -0.64px;
    }
    .home-state-title {
        font-size: 23px;
        letter-spacing: -0.46px;
    }
    .home-section-title.is-md {
        font-size: 23px;
        letter-spacing: -0.58px;
    }
    .home-cta-title {
        font-size: 27px;
        letter-spacing: -0.68px;
    }
    .page-title.detail-title.pd-title {
        font-size: 30px;
        letter-spacing: -0.89px;
    }
    .page-title.sr-hero-title {
        font-size: 34px;
        letter-spacing: -1.03px;
    }
    .section-title.sr-title {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
}
@media (max-width: 767.98px) {
    .page-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .section-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .page-title.post-hero-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .post-article h2 {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .blog-list-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .page-title.detail-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .detail-subtitle {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .section-title.edu-head {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .schools-row-title {
        font-size: 21px;
    }
    .home-hero-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .home-section-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .home-path-feature-body h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }
    .home-section-title.is-lg {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .home-section-title.home-how-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .home-state-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .home-section-title.is-md {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .home-cta-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
    .legal-body h2 {
        font-size: 19px;
        letter-spacing: -0.38px;
    }
    .page-title.detail-title.pd-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .page-title.sr-hero-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .section-title.sr-title {
        font-size: 22px;
        letter-spacing: -0.54px;
    }
}
/* tablet portrait: the homepage hero heading sits in a half column, so it stays a step smaller */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-hero-title {
        font-size: 32px;
        letter-spacing: -0.96px;
    }
}

/* body paragraphs: 16px on every device (intros, section copy, CTA bands, article text) */
.blog-category-courses-text p,
.catalog-paths-head p,
.cd-related-head p,
.cta-band-body p,
.detail-instructor-bio,
.detail-instructor-focus,
.detail-lead,
.edu-copy,
.edu-point-text p,
.home-head p,
.home-head-text,
.home-hero-lead,
.home-job-copy p,
.home-job-lead,
.home-job-copy .home-job-lead,
.home-member-copy p,
.home-path-feature-body p,
.intro-text,
.intro-text.blog-hero-intro,
.intro-text.sr-hero-text,
.lp-featured-head p,
.lp-hero-text,
.lp-steps-head p,
.mp-included-body p,
.post-article p,
.post-intro,
.post-article .post-intro,
.post-lead-in,
.post-note,
.sr-courses-intro p,
.story-hero-text,
.story-history-head p,
.story-timeline-item p,
.texas-benefit p,
.texas-benefits-intro p,
.texas-goals-intro p,
.texas-intro-text p {
    font-size: 16px;
}

/* =================================================================
   SECTIONS: 20% less vertical padding on every device
   ================================================================= */
@media (min-width: 1200px) {
    .section-space {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .home-section-space,
    .home-cta-space {
        padding-top: 76px;
        padding-bottom: 76px;
    }
    .home-hero-space {
        padding-top: 64px;
        padding-bottom: 58px;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .section-space,
    .home-section-space,
    .home-cta-space {
        padding-top: 58px;
        padding-bottom: 58px;
    }
    .home-hero-space {
        padding-top: 44px;
        padding-bottom: 52px;
    }
}
@media (min-width: 768px) {
    /* heroes with their own bottom space, the detail heroes' short top, the blog cover overlap
       (38px of space plus the 120px the cover overlaps) */
    .blog-hero .section-space,
    .blog-category-hero .section-space,
    .catalog-hero .section-space {
        padding-bottom: 45px;
    }
    .detail-hero .section-space {
        padding-top: 32px;
    }
    .post-hero .section-space {
        padding-bottom: 158px;
    }
    .home-stats-space {
        padding-top: 29px;
        padding-bottom: 29px;
    }
}
@media (max-width: 767.98px) {
    .section-space,
    .home-section-space,
    .home-cta-space,
    .blog-hero .section-space,
    .blog-category-hero .section-space,
    .catalog-hero .section-space {
        padding-top: 44px;
        padding-bottom: 44px;
    }
    .detail-hero .section-space {
        padding-top: 44px;
    }
    .home-hero-space {
        padding-bottom: 44px;
    }
    .post-hero .section-space {
        padding-bottom: 102px;
    }
    .home-stats-space {
        padding-top: 22px;
        padding-bottom: 22px;
    }
}
.mp-stats-inner,
.rfq-stats-inner {
    padding-top: 45px;
    padding-bottom: 45px;
}

/* hero headings (each page's h1) at 44px on desktop and laptop */
@media (min-width: 1200px) {
    .page-title,
    .home-hero-title,
    .page-title.post-hero-title,
    .page-title.detail-title,
    .page-title.detail-title.pd-title,
    .page-title.sr-hero-title {
        font-size: 44px;
        letter-spacing: -1.32px;
    }
}

/* =================================================================
   TABLET cards (768px to 1199px): cards three or four across get less padding and smaller
   titles so their text is not squeezed into narrow columns
   ================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .home-goal-card,
    .home-how-card,
    .schools-value-card,
    .lp-step-card,
    .lp-benefit-card,
    .story-brand-card,
    .story-purpose-card,
    .feature-card {
        padding: 20px;
    }
    .edu-goal-card,
    .texas-goal-card {
        padding: 18px;
    }
    .home-goal-card h3,
    .home-how-card h3,
    .lp-step-card h3,
    .lp-benefit-card h3,
    .schools-value-title,
    .edu-benefit-title,
    .texas-benefit-title {
        font-size: 18px;
        letter-spacing: -0.18px;
    }
    .story-brand-name {
        font-size: 17px;
    }
    .pathway-card-title,
    .edu-goal-title,
    .texas-goal-title {
        font-size: 16px;
    }
    /* homepage state box: less padding around the copy, picker and map */
    .home-state-box {
        padding: 32px;
    }
}

/* =================================================================
   TABLET + LANDSCAPE fixes from the device review
   ================================================================= */
/* Our Story: the arrow stays right after the last word when a brand link wraps */
.story-brand-link,
.story-brand-link:hover {
    display: block;
}
.story-brand-link svg {
    display: inline-block;
    margin-left: 6px;
    vertical-align: -2px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Our Story: hero stats two by two in the half column; purpose cards full width with the
       label beside the text; the two hero buttons the same width */
    .story-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
    }
    .story-purpose-card {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }
    .story-hero-actions .cta-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    /* blog post: related titles at one size and up to three lines; a readable article width */
    .post-related .blog-card-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 16px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .post-article {
        max-width: 720px;
    }
}
@media (max-width: 991.98px) {
    .post-table th,
    .post-table td:nth-child(-n+2) {
        white-space: nowrap;
    }
}
/* the H1 repeats the post title, so the breadcrumb ends at the category below desktop */

/* Our Experts, 992px to 1199px (four across): photo above the name so names and roles have room */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .expert-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .expert-card-photo {
        flex-basis: auto;
        width: 56px;
        height: 56px;
    }
}
/* blog post sidebar on shorter screens (iPad landscape, small laptops): a compact contents list
   and no share row, so the trial button is never cut off */
@media (min-width: 992px) and (max-height: 900px) {
    .post-toc {
        gap: 0;
        padding: 16px 20px;
    }
    .post-toc a,
    .post-toc a:hover {
        padding: 7px 0;
        font-size: 13px;
    }
    .post-aside .post-share {
        display: none;
    }
}
/* phones held sideways (short screens): hero media no taller than the screen */
@media (min-width: 768px) and (max-height: 500px) {
    .story-hero-img {
        height: 320px;
    }
    .post-cover {
        height: 280px;
    }
}

/* blog category chips below 992px: two rows (.blog-chips-row) that scroll sideways together,
   like the homepage chips */
@media (max-width: 991.98px) {
    .blog-chips,
    .blog-chips.is-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .blog-chips-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding-right: 20px;
    }
    .blog-chips::after {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .blog-chips-row {
        padding-right: 32px;
    }
}

/* =================================================================
   Course, pathway and state pages: tablet and phone-landscape fixes
   ================================================================= */
/* presenter photo: keep the face in the frame */
.detail-hero-img {
    object-position: center 20%;
}
/* inline offer card (below 1200px): full width, the benefits list beside the trial buttons */
@media (min-width: 768px) {
    .detail-offer.is-inline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        align-items: start;
        gap: 12px 28px;
        max-width: none;
    }
    .detail-offer.is-inline > * {
        grid-column: 1;
    }
    .detail-offer.is-inline .detail-offer-list {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
        padding: 0 0 0 24px;
        border-top: 0;
        border-left: 1px solid #e6e6e7;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* readable line length for the long course and pathway text */
    .detail-block,
    .detail-lead {
        max-width: 780px;
    }
}
/* catalog topic cards three across on tablets in landscape: room for four title lines */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .catalog-topic-title {
        min-height: 84px;
        font-size: 16px;
        line-height: 21px;
    }
}
/* pathway cards: a long audience label shortens instead of pushing the course count down */
@media (min-width: 576px) {
    .pathway-card-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* phones held sideways (short screens): the hero's call to action on the first screen */
@media (orientation: landscape) and (max-height: 500px) {
    .site-topbar {
        display: none;
    }
    main > section:first-child .section-space,
    main > section:first-child .home-hero-space {
        padding-top: 24px;
    }
    main > section:first-child .site-breadcrumb {
        margin-top: 0;
    }
    main > section:first-child .eyebrow:has(+ h1),
    .detail-badges,
    .detail-offer.is-inline .tag-pill,
    .lp-hero-text {
        display: none;
    }
}

/* blog post: the step and activity cards are two across on phones too; a little less padding there */
@media (max-width: 575.98px) {
    .post-step,
    .post-activity {
        padding: 14px;
    }
}

/* =================================================================
   Homepage, educators, schools, pricing, quote and contact: tablet and phone-landscape fixes
   ================================================================= */
/* contact member cards: the buttons line up at the bottom of both cards */
.member-card .cta-btn {
    margin-top: auto;
}
/* For Schools product screenshots show whole below 1200px (labels are drawn into them) */
@media (max-width: 1199.98px) {
    .schools-row-img {
        height: auto;
        object-fit: contain;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* homepage featured pathway as a full-width banner above the two-by-two pathways */
    .home-path-feature {
        min-height: 360px;
    }
    /* For Schools testimonial photo: keep the caption drawn into its lower left; shorter quote */
    .schools-proof-img {
        object-position: left center;
    }
    .schools-proof-quote {
        font-size: 20px;
    }
    /* Membership: the laptop and phone mockup shows whole */
    .mp-included-img {
        height: auto;
        object-fit: contain;
    }
}
/* phones held sideways: the hero buttons come straight after the heading */
@media (orientation: landscape) and (max-height: 500px) {
    .home-hero-badge {
        display: none;
    }
    .home-hero-title {
        order: 1;
    }
    .home-hero-actions {
        order: 2;
    }
    .home-hero-lead {
        order: 3;
    }
    .home-hero-trust {
        order: 4;
    }
    .edu-hero-body > * {
        order: 3;
    }
    .edu-hero-body > .page-title {
        order: 1;
    }
    .edu-hero-body > .edu-hero-actions {
        order: 2;
    }
    /* pricing: the plans straight after the title; monthly shows its price and button */
    .mp-signup-steps,
    .mp-hero-head .intro-text {
        display: none;
    }
    .mp-plan.is-compact-sm .mp-plan-features {
        display: none;
    }
}

/* course and pathway titles are long: sized so they stay on two lines beside the sticky sidebar */
.page-title.detail-title {
    text-wrap: balance;
}
@media (min-width: 1200px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 30px;
        letter-spacing: -0.9px;
    }
}
@media (min-width: 1280px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 32px;
        letter-spacing: -0.96px;
    }
}
@media (min-width: 1366px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 36px;
        letter-spacing: -1.08px;
    }
}
@media (min-width: 1440px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 38px;
        letter-spacing: -1.14px;
    }
}

/* course and pathway titles: a further 25% smaller (phones stop at 20px so the title stays above
   the card titles in size) */
@media (min-width: 1200px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 23px;
        letter-spacing: -0.69px;
    }
}
@media (min-width: 1280px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 24px;
        letter-spacing: -0.72px;
    }
}
@media (min-width: 1366px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 27px;
        letter-spacing: -0.81px;
    }
}
@media (min-width: 1440px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 28px;
        letter-spacing: -0.84px;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .page-title.detail-title {
        font-size: 21px;
        letter-spacing: -0.63px;
    }
    .page-title.detail-title.pd-title {
        font-size: 22px;
        letter-spacing: -0.66px;
    }
}
@media (max-width: 767.98px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 20px;
        letter-spacing: -0.6px;
    }
}

/* course and pathway titles: 34px on desktop and laptop */
@media (min-width: 1200px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 34px;
        letter-spacing: -1.02px;
    }
}
/* course and pathway titles: 26px on tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .page-title.detail-title,
    .page-title.detail-title.pd-title {
        font-size: 26px;
        letter-spacing: -0.78px;
    }
}

/* course and pathway pages from 992px: sidebar beside the content like desktop (slimmer on tablets
   in landscape), so the sticky trial bar is not needed there */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .detail-aside {
        width: 320px;
    }
}
@media (min-width: 992px) {
    body:has(.detail-aside) .sticky-cta {
        display: none;
    }
    body:has(.detail-aside).has-sticky-cta {
        padding-bottom: 0;
    }
}

/* page headings (every page except the homepage hero): 34px on desktop, stepping down on laptops
   so they stay on at most two lines */
@media (min-width: 1200px) {
    .page-title,
    .page-title.post-hero-title,
    .page-title.sr-hero-title {
        font-size: 28px;
        letter-spacing: -0.84px;
    }
}
@media (min-width: 1280px) {
    .page-title,
    .page-title.post-hero-title,
    .page-title.sr-hero-title {
        font-size: 30px;
        letter-spacing: -0.9px;
    }
}
@media (min-width: 1366px) {
    .page-title,
    .page-title.post-hero-title,
    .page-title.sr-hero-title {
        font-size: 32px;
        letter-spacing: -0.96px;
    }
}
@media (min-width: 1440px) {
    .page-title,
    .page-title.post-hero-title,
    .page-title.sr-hero-title {
        font-size: 34px;
        letter-spacing: -1.02px;
    }
}

/* For Schools testimonial band on phones: smaller quote and stats */
@media (max-width: 767.98px) {
    .schools-proof-body {
        padding: 28px 20px;
    }
    .schools-proof-quote {
        font-size: 18px;
        line-height: 1.5;
    }
    .schools-stat-num {
        font-size: 28px;
    }
}

/* Learning Pathways and Texas hero photos (transparent cut-outs): shown whole from 768px, never
   cropped at the head; capped at their frame height */
@media (min-width: 768px) {
    .lp-hero-img,
    .texas-hero-img {
        height: auto;
        object-fit: contain;
    }
    .lp-hero-img {
        max-height: 460px;
    }
    .texas-hero-img {
        max-height: 440px;
    }
}

/* Our Experts: search on the left, topic list on the right (one row from 576px) */
.experts-filter {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.search-field.is-experts {
    flex: 1 1 320px;
}
.experts-topic-select {
    flex: 0 0 260px;
    min-height: 56px;
    padding: 0 16px;
    border: 1.5px solid #cdd5d9;
    border-radius: 12px;
    background: #ffffff;
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
}
@media (max-width: 575.98px) {
    .experts-topic-select {
        flex-basis: 100%;
        font-size: 16px;
    }
}
/* Our Experts cards four across on tablets in landscape: the LinkedIn button moves to the card's
   top-right corner so the topic tag has the full card width */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .expert-card {
        position: relative;
    }
    .expert-card-social {
        position: absolute;
        top: 16px;
        right: 16px;
    }
}

/* Our Story timeline on tablets: smaller titles and text */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .story-timeline-item h3 {
        font-size: 18px;
    }
    .story-timeline-item p {
        font-size: 14px;
    }
}

/* phones: card titles stay a step below the 22px section headings */
@media (max-width: 767.98px) {
    .home-goal-card h3,
    .home-how-card h3,
    .home-plan-title,
    .schools-value-title,
    .schools-row-title,
    .edu-benefit-title,
    .lp-step-card h3,
    .lp-benefit-card h3,
    .texas-benefit-title,
    .texas-topics-title,
    .story-timeline-item h3,
    .story-brand-name,
    .sr-result-title,
    .blog-newsletter-title,
    .post-article h3 {
        font-size: 18px;
    }
    .blog-featured-card .blog-card-title,
    .home-path-feature-body h3 {
        font-size: 20px;
    }
}
/* tablets: the same step below the 24px section headings */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .blog-featured-card .blog-card-title,
    .home-plan-title,
    .schools-row-title {
        font-size: 20px;
    }
}

/* breadcrumb a little closer to the header: 28px desktop, 18px tablet, 14px phone */
.site-breadcrumb {
    margin-top: -42px;
}
@media (min-width: 768px) {
    .detail-hero .site-breadcrumb {
        margin-top: -14px;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .site-breadcrumb {
        margin-top: -40px;
    }
}
@media (max-width: 767.98px) {
    .site-breadcrumb,
    .detail-hero .site-breadcrumb {
        margin-top: -30px;
    }
}

/* blog post hero: the cover photo sits beside the title (no overlap into the article) */
.post-hero .section-space {
    padding-bottom: 70px;
}
.post-cover {
    height: auto;
    margin-top: 0;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .post-hero .section-space {
        padding-bottom: 58px;
    }
}
@media (max-width: 767.98px) {
    .post-hero .section-space {
        padding-bottom: 44px;
    }
}

/* breadcrumb closer still to the header: 16px desktop, 12px tablet, 10px phone */
.site-breadcrumb {
    margin-top: -54px;
}
@media (min-width: 768px) {
    .detail-hero .site-breadcrumb {
        margin-top: -20px;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .site-breadcrumb {
        margin-top: -46px;
    }
}
@media (max-width: 767.98px) {
    .site-breadcrumb,
    .detail-hero .site-breadcrumb {
        margin-top: -34px;
    }
}
@media (max-width: 767.98px) {
    /* blog post hero on phones: the photo a short step below the meta line */
    .post-hero .row {
        --bs-gutter-y: 24px;
    }
}

/* blog post: the article starts close under the hero (the cover no longer sits above it) */
.post-layout {
    margin-top: calc(0px - var(--bs-gutter-y));
}
.post-body > .section-space {
    padding-top: 48px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .post-body > .section-space {
        padding-top: 40px;
    }
}
@media (max-width: 767.98px) {
    .post-body > .section-space {
        padding-top: 32px;
    }
}

/* footer: the three link groups spread evenly across their column (no empty gap beside the logo) */
@media (min-width: 576px) {
    .footer-links,
    .site-footer.home-variant .footer-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }
    .footer-col,
    .site-footer.home-variant .footer-col {
        min-width: 0;
    }
}

/* course catalog: search sits in the results toolbar, between the count and the sort list */
.catalog-search.is-toolbar {
    flex: 1 1 260px;
    width: auto;
    max-width: 420px;
    min-height: 48px;
    margin-left: auto;
}
@media (max-width: 767.98px) {
    /* phones: count, then search full width, then filters + sort */
    .catalog-search.is-toolbar {
        flex: 0 0 auto;
        max-width: none;
        margin-left: 0;
    }
    .catalog-search.is-toolbar input {
        font-size: 16px;
    }
}

/* course catalog: the long category list scrolls inside its own box (about seven and a half visible) */
.catalog-filter-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 312px;
    margin-right: -8px;
    padding-right: 8px;
    padding-bottom: 16px;
    overflow-y: auto;
    /* the next category peeks in under a soft fade, a hint that the list scrolls */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), rgba(0, 0, 0, 0.35));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), rgba(0, 0, 0, 0.35));
    overscroll-behavior: contain;
    scrollbar-color: #cdd5d9 transparent;
    scrollbar-width: thin;
}
.catalog-filter-options:focus-visible {
    outline: 2px solid #36768d;
    outline-offset: 2px;
}
/* "View Your State Requirements" arrow lined up with the text */
.catalog-filter-link,
.catalog-filter-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.catalog-filter-link svg {
    flex-shrink: 0;
    vertical-align: middle;
}

/* blog post: a narrower reading container (1140px of content) for the article and its sidebar;
   the hero keeps the full container */
@media (min-width: 1200px) {
    .post-body > .container {
        max-width: 1204px;
    }
}

/* course catalog: the filter sidebar stays in view while the course list scrolls (992px and up) */
@media (min-width: 992px) {
    .catalog-filter-col {
        position: sticky;
        top: 24px;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* homepage hero on phones: half the space between the header and the photo backdrop (66px -> 34px) */
@media (max-width: 767.98px) {
    .home-hero-space {
        padding-top: 0;
    }
    .home-hero-media {
        min-height: 254px;
    }
    .home-hero-photo {
        height: 254px;
    }
}

/* =================================================================
   CLIENT FEEDBACK: heroes like the homepage on every page with a hero photo
   (.hero-split = text column + photo column)
   ================================================================= */
/* the three points with ticks, as under the homepage hero buttons */
.hero-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #5b6a73;
}
.hero-ticks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-ticks svg {
    flex-shrink: 0;
}
/* desktop and iPad: the photo lines up with the top of the text */
.hero-split-media > img {
    object-position: center top;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* badge on one line, buttons side by side, the three points on one row */
    .hero-split .approved-badge-title {
        font-size: 14px;
    }
    .hero-split .texas-actions,
    .hero-split .lp-hero-actions,
    .hero-split .edu-hero-actions {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .hero-split .texas-actions .cta-btn,
    .hero-split .lp-hero-actions .cta-btn,
    .hero-split .edu-hero-actions .cta-btn {
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    .hero-split .hero-ticks {
        flex-wrap: nowrap;
        gap: 14px;
        font-size: 12px;
        white-space: nowrap;
    }
    .hero-split .hero-ticks li {
        gap: 5px;
    }
    .hero-split .hero-ticks svg {
        width: 14px;
        height: 14px;
    }
}
/* iPad portrait: a wider text column so the buttons and points fit beside the photo */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-split > .hero-split-text {
        width: 60%;
    }
    .hero-split > .hero-split-media {
        width: 40%;
    }
}
/* phones: photo first and compact, then title, buttons and points; the longer copy follows */
@media (max-width: 767.98px) {
    .hero-split {
        --bs-gutter-y: 20px;
    }
    .hero-split .hero-split-media > img {
        width: 100%;
        max-height: none;
        height: 240px;
        border-radius: 20px;
    }
    .hero-split-media > .texas-hero-img,
    .hero-split-media > .lp-hero-img {
        object-fit: contain;
    }
    .hero-split-media > .edu-hero-img,
    .hero-split-media > .story-hero-img {
        object-fit: cover;
        object-position: center top;
    }
    .hero-split-text .texas-hero-text > *,
    .hero-split-text .lp-hero-body > *,
    .hero-split-text .edu-hero-body > *,
    .hero-split-text .story-hero-copy > * {
        order: 6;
    }
    .hero-split-text .approved-badge,
    .hero-split-text .eyebrow {
        order: 1;
    }
    .hero-split-text .page-title {
        order: 2;
    }
    .hero-split-text .texas-actions,
    .hero-split-text .lp-hero-actions,
    .hero-split-text .edu-hero-actions {
        order: 3;
    }
    .hero-split-text .hero-ticks {
        order: 4;
    }
    .hero-split-text .edu-hero-trust {
        order: 5;
    }
    .hero-split-text .story-stats {
        order: 7;
    }
    .hero-split-text .texas-hero-text,
    .hero-split-text .lp-hero-body,
    .hero-split-text .edu-hero-body,
    .hero-split-text .story-hero-copy {
        gap: 16px;
    }
}

/* homepage hero on desktop and laptops: less space above, so the three points sit on the first screen */
@media (min-width: 1200px) {
    .home-hero-space {
        padding-top: 24px;
    }
}

/* homepage course filters on desktop and laptops: all nine on one centred line (tighter pills),
   scrolling sideways on narrower laptops instead of dropping one pill to a second row */
@media (min-width: 992px) {
    .home-chips {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .home-chips::-webkit-scrollbar {
        display: none;
    }
    .chip.home-chip {
        flex-shrink: 0;
        padding: 10px 13px;
        white-space: nowrap;
    }
    .home-chips > .home-chips-row:first-child > :first-child {
        margin-left: auto;
    }
    .home-chips > .home-chips-row:last-child > :last-child {
        margin-right: auto;
    }
}
/* desktop: centred while it fits (auto margins above); below 992px the two rows start at the left edge */
@media (min-width: 992px) {
    .home-chips.is-scrollable {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
        mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
    }
}

/* =================================================================
   CLIENT FEEDBACK: breadcrumbs, State Requirements, homepage hero on phones
   ================================================================= */
/* phones and tablets: the breadcrumb stays on one line and scrolls sideways */
@media (max-width: 991.98px) {
    .site-breadcrumb ol {
        flex-wrap: nowrap;
        margin-right: calc(var(--bs-gutter-x, 40px) * -0.5);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .site-breadcrumb ol::-webkit-scrollbar {
        display: none;
    }
    .site-breadcrumb li {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .site-breadcrumb li:last-child {
        padding-right: 20px;
    }
    .site-breadcrumb-current {
        overflow: visible;
    }
}
/* State Requirements: the finder is a single list (no button) */
.sr-finder-controls .sr-finder-select {
    flex: 1 1 auto;
    width: 100%;
}
/* homepage hero on phones: the photo block sits closer under the header */
@media (max-width: 767.98px) {
    .home-hero-media {
        min-height: 236px;
    }
    .home-hero-photo {
        height: 236px;
    }
}
/* the smallest phones: the main hero button label on one line */
@media (max-width: 374.98px) {
    .home-hero-actions .cta-btn {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* a spinning icon while something loads (the "Use my location" button) */
@keyframes catalog-spin {
    to { transform: rotate(360deg); }
}
/* the three hero points stay on one row on laptops and desktops */
@media (min-width: 1200px) {
    .hero-split .hero-ticks {
        flex-wrap: nowrap;
        gap: 18px;
        white-space: nowrap;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero-split .hero-ticks {
        gap: 14px;
        font-size: 13px;
    }
}
/* homepage hero points on iPad landscape: one row like the other heroes */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero-trust {
        flex-wrap: nowrap;
        gap: 12px;
        font-size: 12px;
        white-space: nowrap;
    }
    .home-hero-trust li {
        gap: 5px;
    }
    .home-hero-trust svg {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
    }
}


/* =================================================================
   CLIENT FEEDBACK (second pass): homepage hero
   ================================================================= */
/* laptops and desktops: the text starts at the top beside the photo and sits a little tighter,
   so the three points are on the first screen of a 1366x768 or 1280x800 laptop */
@media (min-width: 1200px) {
    .home-hero-copy {
        gap: 20px;
    }
}
/* short laptop screens (1280x720 and similar) */
@media (min-width: 1200px) and (max-height: 640px) {
    .home-hero-space {
        padding-top: 12px;
    }
    .home-hero-copy {
        gap: 12px;
    }
    .home-hero-title {
        line-height: 1.04;
    }
}
/* iPad landscape: both buttons side by side */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero-actions {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .home-hero-actions .cta-btn {
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
}
/* iPad portrait: badge, title and intro beside the photo (both from the top); the buttons and the
   three points run on full-width rows underneath, each on one line */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-hero .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto auto;
        grid-template-areas:
            "badge media"
            "title media"
            "lead media"
            "actions actions"
            "trust trust";
        gap: 20px 32px;
        margin: 0;
    }
    .home-hero .row > *,
    .home-hero-copy {
        display: contents;
    }
    .home-hero-badge {
        grid-area: badge;
        justify-self: start;
    }
    .home-hero-title {
        grid-area: title;
    }
    .home-hero-lead {
        grid-area: lead;
        align-self: start;
    }
    .home-hero-actions {
        grid-area: actions;
        flex-wrap: nowrap;
        margin-top: 4px;
    }
    .home-hero-trust {
        grid-area: trust;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .home-hero-media {
        grid-area: media;
        width: 100%;
        min-height: 400px;
        margin: 0;
    }
    .home-hero-backdrop {
        height: 370px;
    }
    .home-hero-photo {
        height: 400px;
    }
}

/* Learning Pathways topic chips on desktop and laptops: one line like the homepage filters
   (tighter pills); narrower laptops scroll the row sideways instead of dropping a chip to a second row */
@media (min-width: 992px) {
    .lp-chips {
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .lp-chips::-webkit-scrollbar {
        display: none;
    }
    .lp-chips .chip {
        flex-shrink: 0;
        padding: 8px 11px;
        white-space: nowrap;
    }
}

/* Our Story hero stats on phones: two by two (a 3 + 1 split on the larger phones looked broken) */
@media (max-width: 767.98px) {
    .story-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 24px;
    }
}
/* Our Experts stats on the smallest phones: the three stay on one row */
@media (max-width: 374.98px) {
    .experts-stats {
        flex-wrap: nowrap;
        gap: 20px;
    }
    .experts-stat-value {
        font-size: 26px;
    }
}

/* button labels stay on one line on phones: the support e-mail button on the privacy page, and the
   longer outline buttons on the smallest phones */
@media (max-width: 575.98px) {
    .legal-help .cta-btn {
        padding-right: 14px;
        padding-left: 14px;
        font-size: 14px;
        white-space: nowrap;
    }
}
@media (max-width: 374.98px) {
    .texas-actions .cta-btn,
    .member-card .cta-btn {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* short landscape tablets and smart displays (1024x600): the homepage hero buttons stay on the first screen */
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 640px) {
    .home-hero-space {
        padding-top: 24px;
    }
    .home-hero-copy {
        gap: 14px;
    }
}

/* homepage hero on laptops and desktops: the photo block is no taller than the text beside it,
   so the stats strip under the hero shows on the first screen */
@media (min-width: 1200px) {
    .home-hero-space {
        padding-bottom: 40px;
    }
    .home-hero-media {
        min-height: 500px;
    }
    .home-hero-backdrop {
        height: 460px;
    }
    .home-hero-photo {
        height: 500px;
    }
    .home-stats-space {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}
/* shorter laptop screens (1536x730 and similar): a little tighter again */
@media (min-width: 1200px) and (min-height: 641px) and (max-height: 760px) {
    .home-hero-space {
        padding-top: 16px;
        padding-bottom: 28px;
    }
    .home-hero-copy {
        gap: 16px;
    }
    .home-hero-media {
        min-height: 470px;
    }
    .home-hero-backdrop {
        height: 430px;
    }
    .home-hero-photo {
        height: 470px;
    }
}

/* "A Smarter Way to Earn Professional Development Hours" on one line on iPad portrait too */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-section-title.home-how-title {
        letter-spacing: -0.9px;
    }
}

/* homepage "A Smarter Way…" cards on iPad: shorter photos (portrait cards are only ~180px wide) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-how-card img {
        height: 160px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-how-card img {
        height: 190px;
    }
}

/* Texas hero on iPad landscape and desktop: the cut-out photo (it has empty space above the head)
   sits higher and a little smaller, ending level with the text, so no tall empty band under the hero */
@media (min-width: 992px) {
    .texas-hero-img {
        max-height: 380px;
        margin-top: -48px;
    }
}
/* Texas: a divider between the featured courses and the FAQ (both on the same grey) */
.state-detail-texas-faq {
    border-top: 1px solid #e6e6e7;
}

/* Texas "At a glance" stats on iPad: smaller figures so "5 years" and "200 hrs" stay on one line */
@media (min-width: 768px) and (max-width: 991.98px) {
    .texas-stat {
        padding: 16px 14px;
    }
    .texas-stat-num {
        font-size: 22px;
        letter-spacing: -0.44px;
        white-space: nowrap;
    }
    .texas-stat-label {
        font-size: 12px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .texas-stat-num {
        font-size: 24px;
        letter-spacing: -0.48px;
    }
}

/* Learning Pathways hero on iPad landscape and desktop: same treatment as Texas, the cut-out sits
   higher and a little smaller so it ends level with the buttons */
@media (min-width: 992px) {
    .lp-hero-img {
        max-height: 420px;
        margin-top: -48px;
    }
}

/* For Educators, For Schools and Our Story heroes on laptops and desktops: the photo ends level with
   the text instead of hanging below it. Width and height shrink together, so the framing stays the
   same (no extra crop), and the photo keeps to the right edge */
@media (min-width: 1200px) {
    .edu-hero .edu-hero-img {
        width: 83%;
        height: 430px;
        margin-left: auto;
    }
    .schools-hero .edu-hero-img {
        width: 78%;
        height: 400px;
        margin-left: auto;
    }
    .hero-split-media > .story-hero-img {
        width: 86%;
        height: 430px;
        margin-left: auto;
    }
}

/* homepage hero heading on laptops and desktops: 40px (three lines from 1366px); the photo block
   comes down with it so it still ends level with the text */
@media (min-width: 1200px) {
    .home-hero-title {
        font-size: 40px;
        letter-spacing: -1.2px;
    }
    .home-hero-media {
        min-height: 440px;
    }
    .home-hero-backdrop {
        height: 400px;
    }
    .home-hero-photo {
        height: 440px;
    }
}
@media (min-width: 1200px) and (min-height: 641px) and (max-height: 760px) {
    .home-hero-space {
        padding-bottom: 24px;
    }
    .home-stats-space {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .home-hero-media {
        min-height: 420px;
    }
    .home-hero-backdrop {
        height: 380px;
    }
    .home-hero-photo {
        height: 420px;
    }
}

/* the "Powered by Netlify" badge that Netlify's script injects into the hosted preview (an iframe,
   so its own .nl-wrap class can't be reached from here) */
#nl-badge-frame {
    display: none;
}

/* homepage hero photo carousel (as on the live site): four teachers in the same frame, each slides
   in from the right every 3 seconds (main.js). .home-hero-photo is now the frame; the slides fill it */
.home-hero-photo {
    overflow: hidden;
}
.home-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(100%);
    transition: transform 0.5s ease;
}
.home-hero-slide.is-active {
    transform: none;
}
.home-hero-slide.is-parked,
.home-hero-photo.is-dragging .home-hero-slide {
    transition: none;
}
/* drag with the mouse or swipe on touch (main.js); vertical swipes still scroll the page */
.home-hero-media {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
@media (hover: hover) and (pointer: fine) {
    .home-hero-media {
        cursor: grab;
    }
    .home-hero-media:has(.is-dragging) {
        cursor: grabbing;
    }
}
@media (max-width: 767.98px) {
    .home-hero-slide {
        object-position: right bottom;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-slide {
        transition: none;
    }
}

/* =================================================================
   CLIENT MEETING FEEDBACK
   ================================================================= */
/* homepage Featured Learning Pathways: every pathway gets the same card (no single highlighted one),
   three to a view in a slider. The course count sits on the photo; a trail of course steps leads to
   the certificate, and on hover the steps fill in one after another ("here's your path, follow it") */
.home-paths .quote-slider-track > * {
    display: flex;
}
.path-card,
.path-card:hover {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    color: #22282b;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.path-card-media {
    position: relative;
    display: block;
    overflow: hidden;
}
.path-card-media img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.path-card-count {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #275668;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(34, 40, 43, 0.12);
}
.path-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 24px;
}
.path-card-for {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7c874c;
}
.path-card-title {
    font-size: 19px;
    line-height: 1.3;
}
.path-card-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 15px;
    line-height: 1.55;
    color: #5b6a73;
}
.path-card-trail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}
.path-card-steps {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
}
.path-card-steps::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 2px dashed #c7e7ee;
}
.path-card-step {
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px solid #9cc7d4;
    border-radius: 50%;
    background: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.path-card-goal {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef1e5;
    color: #7c874c;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.path-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #275668;
}
.path-card-link svg {
    transition: transform 0.2s ease;
}
@media (hover: hover) {
    .path-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(34, 40, 43, 0.08);
    }
    .path-card:hover .path-card-media img {
        transform: scale(1.04);
    }
    .path-card:hover .path-card-step {
        border-color: #36768d;
        background: #36768d;
    }
    .path-card:hover .path-card-goal {
        background: #7c874c;
        color: #ffffff;
    }
    .path-card:hover .path-card-link svg {
        transform: translateX(4px);
    }
    .path-card .path-card-step:nth-child(2) { transition-delay: 0.05s; }
    .path-card .path-card-step:nth-child(3) { transition-delay: 0.1s; }
    .path-card .path-card-step:nth-child(4) { transition-delay: 0.15s; }
    .path-card .path-card-step:nth-child(5) { transition-delay: 0.2s; }
    .path-card .path-card-step:nth-child(6) { transition-delay: 0.25s; }
    .path-card .path-card-step:nth-child(7) { transition-delay: 0.3s; }
    .path-card .path-card-step:nth-child(8) { transition-delay: 0.35s; }
    .path-card .path-card-step:nth-child(9) { transition-delay: 0.4s; }
    .path-card .path-card-step:nth-child(10) { transition-delay: 0.45s; }
    .path-card:hover .path-card-goal {
        transition-delay: 0.5s;
    }
}
@media (prefers-reduced-motion: reduce) {
    .path-card,
    .path-card-media img,
    .path-card-step,
    .path-card-goal,
    .path-card-link svg {
        transition: none;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .path-card-media img {
        height: 170px;
    }
    .path-card-body {
        padding: 18px 20px 20px;
    }
    .path-card-title {
        font-size: 17px;
    }
}
@media (max-width: 767.98px) {
    .path-card-media img {
        height: 180px;
    }
    .path-card-body {
        padding: 18px 20px 20px;
    }
    .path-card-title {
        font-size: 18px;
    }
}

/* "Professional learning shouldn't feel like another job": the teacher standing with his class
   behind him, in the arch outline (section-img.webp, transparent corners), as on the live site */
.home-job-img.is-arch {
    max-width: 460px;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .home-job-img.is-arch {
        max-width: 300px;
        height: auto;
    }
}

/* homepage hero caption card: the teacher on screen (name, role, story); her course steps follow
   (see "course steps fill in" below) */
.home-hero-caption-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-hero-caption-name {
    font-size: 14px;
    font-weight: 700;
    color: #22282b;
}
.home-hero-caption-role {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #5b6a73;
}
.home-hero-caption-head,
.home-hero-card.is-caption .home-hero-pathway-title {
    transition: opacity 0.25s ease;
}
.home-hero-card.is-changing .home-hero-caption-head,
.home-hero-card.is-changing .home-hero-pathway-title {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-caption-head,
    .home-hero-card.is-caption .home-hero-pathway-title {
        transition: none;
    }
}

/* header search suggestions (main.js): a panel under the search field while typing */
.site-search {
    position: relative;
}
.site-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1050;
    width: 100%;
    min-width: 360px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid #e0e4e6;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(34, 40, 43, 0.14);
}
.site-header .site-search-results {
    right: 0;
    left: auto;
}
.site-search-results a,
.site-search-results a:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #22282b;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}
.site-search-results [role="option"].is-active a,
.site-search-results a:hover {
    background: #f0f8f9;
}
.site-search-result-title mark {
    padding: 0;
    background: transparent;
    color: #275668;
    font-weight: 700;
}
.site-search-result-type {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f0f8f9;
    color: #275668;
    font-size: 11px;
    font-weight: 600;
}
.site-search-empty {
    padding: 10px 12px;
    color: #5b6a73;
    font-size: 14px;
}
.site-search-all {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e6e6e7;
}
.site-search-all a,
.site-search-all a:hover {
    color: #275668;
    font-weight: 600;
}
/* in the search row and the mobile menu the panel is as wide as the field */
.site-search-row .site-search-results {
    right: 0;
    left: 0;
    min-width: 0;
}
@media (max-width: 1199.98px) {
    .site-menu .site-search-results {
        right: 0;
        left: 0;
        min-width: 0;
    }
}

/* homepage pathways slider: arrows sit with the dots, the "See All" button comes last */
.home-paths .home-paths-more {
    order: 2;
}

/* homepage hero on phones: the teacher caption card shows on every device. It takes the bottom-left
   spot (clear of the teacher's face on the narrowest phones) and the certificate card becomes a small
   badge in the top-left corner */
@media (max-width: 767.98px) {
    .home-hero-card.is-pathway.is-caption {
        top: auto;
        bottom: 12px;
        left: 12px;
        display: flex;
        gap: 6px;
        width: 210px;
        max-width: calc(100% - 24px);
    }
    .home-hero-caption-name {
        font-size: 13px;
    }
    .home-hero-caption-role {
        font-size: 10px;
        letter-spacing: 0.6px;
    }
    .home-hero-card.is-caption .home-hero-pathway-title {
        font-size: 12px;
        line-height: 1.35;
    }
    .home-hero-card.is-cert {
        top: 12px;
        bottom: auto;
        gap: 8px;
        width: auto;
        padding: 6px 12px 6px 6px;
        border-radius: 999px;
    }
    .icon-tile.home-hero-cert-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }
    .icon-tile.home-hero-cert-icon svg {
        width: 15px;
        height: 15px;
    }
    .home-hero-cert-sub {
        display: none;
    }
}
@media (max-width: 374.98px) {
    .home-hero-card.is-pathway.is-caption {
        width: 184px;
    }
}

/* course detail on phones and iPad portrait (one column, offer card inline): title, then the photo,
   then the intro and the four facts, then the free-trial offer card, then the description */
@media (max-width: 991.98px) {
    .cd-hero .detail-main > * {
        order: 7;
    }
    .cd-hero .detail-main > .detail-badges {
        order: 1;
    }
    .cd-hero .detail-main > .detail-title {
        order: 2;
    }
    .cd-hero .detail-main > .detail-hero-img {
        order: 3;
    }
    .cd-hero .detail-main > .detail-lead {
        order: 4;
    }
    .cd-hero .detail-main > .detail-facts {
        order: 5;
    }
    .cd-hero .detail-main > .detail-offer.is-inline {
        order: 6;
    }
}
/* course title on phones: two lines at most, the rest cut with an ellipsis (the full title stays in
   the page for search engines and screen readers) */
@media (max-width: 767.98px) {
    .cd-hero .detail-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}


/* course catalog: numbered pages under "Load more" (main.js) */
.catalog-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.catalog-page,
.catalog-page:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e0e4e6;
    border-radius: 10px;
    background: #ffffff;
    color: #22282b;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.catalog-page:hover {
    border-color: #36768d;
    background: #f0f8f9;
}
.catalog-page.is-current,
.catalog-page.is-current:hover {
    border-color: #22282b;
    background: #22282b;
    color: #ffffff;
}
.catalog-page.is-step {
    padding: 0 18px;
}
.catalog-pages[hidden] {
    display: none;
}

/* course catalog: every category as a link */
.catalog-topic-links-box {
    padding: 32px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #f9fafb;
}
.catalog-topic-links-title {
    margin-bottom: 18px;
    font-size: 22px;
}
.catalog-topic-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.catalog-topic-links-list .chip {
    display: inline-block;
    border: 1px solid #e0e4e6;
    background: #ffffff;
}
/* the category page's own topic in the list */
.catalog-topic-links-list .chip.is-active {
    border-color: #22282b;
    background: #22282b;
}
@media (max-width: 767.98px) {
    .catalog-topic-links-box {
        padding: 22px 18px;
    }
    .catalog-topic-links-title {
        font-size: 19px;
    }
}

/* homepage hero caption: the teacher's course steps fill in one after another ("step, step, step"),
   the certificate at the end lights up and the "Certificate issued" card pops, then the next
   teacher slides in (main.js listens for the end of the certificate animation) */
.home-hero-steps {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.home-hero-steps::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    left: 0;
    border-top: 2px dashed #c7e7ee;
}
.home-hero-step {
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px solid #9cc7d4;
    border-radius: 50%;
    background: #ffffff;
}
.home-hero-step-goal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef1e5;
    color: #7c874c;
}
.home-hero-steps.is-running .home-hero-step {
    animation: hero-step-fill 0.3s ease forwards;
}
.home-hero-steps.is-running .home-hero-step:nth-child(2) { animation-delay: 0.45s; }
.home-hero-steps.is-running .home-hero-step:nth-child(3) { animation-delay: 0.9s; }
.home-hero-steps.is-running .home-hero-step:nth-child(4) { animation-delay: 1.35s; }
.home-hero-steps.is-running .home-hero-step:nth-child(5) { animation-delay: 1.8s; }
.home-hero-steps.is-running .home-hero-step:nth-child(6) { animation-delay: 2.25s; }
.home-hero-steps.is-running .home-hero-step-goal {
    animation: hero-step-goal 1.3s ease 2.7s forwards;
}
.home-hero-steps.is-paused .home-hero-step,
.home-hero-steps.is-paused .home-hero-step-goal {
    animation-play-state: paused;
}
.home-hero-card.is-cert.is-issued {
    animation: hero-cert-issued 0.7s ease;
}
.home-hero-card.is-cert.is-issued .home-hero-cert-icon {
    background: #7c874c;
    transition: background-color 0.3s ease;
}
.home-hero-card.is-cert.is-issued .home-hero-cert-icon svg {
    stroke: #ffffff;
}
@keyframes hero-step-fill {
    to {
        border-color: #36768d;
        background: #36768d;
    }
}
@keyframes hero-step-goal {
    0% { transform: scale(1); background: #eef1e5; color: #7c874c; }
    15% { transform: scale(1.3); background: #7c874c; color: #ffffff; }
    30%, 100% { transform: scale(1); background: #7c874c; color: #ffffff; }
}
@keyframes hero-cert-issued {
    0% { transform: scale(1); }
    40% { transform: scale(1.05); box-shadow: 0 18px 44px rgba(124, 135, 76, 0.28); }
    100% { transform: scale(1); }
}
@media (max-width: 767.98px) {
    .home-hero-step {
        width: 8px;
        height: 8px;
    }
    .home-hero-step-goal {
        width: 20px;
        height: 20px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-step {
        border-color: #36768d;
        background: #36768d;
    }
    .home-hero-step-goal {
        background: #7c874c;
        color: #ffffff;
    }
    .home-hero-card.is-cert.is-issued {
        animation: none;
    }
}

/* "Use my location" under the state lists (main.js picks the state from the browser's position) */
.state-locate {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #275668;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.state-locate:hover {
    color: #36768d;
    text-decoration: underline;
}
.state-locate.is-loading svg {
    animation: catalog-spin 1s linear infinite;
}
.state-locate[hidden],
.state-locate-status[hidden] {
    display: none;
}
.state-locate-status {
    display: block;
    color: #5b6a73;
    font-size: 13px;
    line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
    .state-locate.is-loading svg {
        animation: none;
    }
}

/* course detail: the category badge is a link to the category's courses */
a.tag-pill.is-detail.is-link,
a.tag-pill.is-detail.is-link:hover {
    color: inherit;
    text-decoration: none;
}
a.tag-pill.is-detail.is-link:hover {
    background: #e3eef2;
}
/* course detail: related topics as links under the related courses */
.cd-topics {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e6e6e7;
}
.cd-topics-title {
    font-size: 17px;
}
.cd-topics-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cd-topics-list .chip {
    display: inline-block;
}
/* course detail on phones: the four course facts smaller, so they take less room above the offer */
@media (max-width: 767.98px) {
    .cd-hero .detail-facts {
        --bs-gutter-y: 10px;
    }
    .cd-hero .detail-fact {
        gap: 8px;
    }
    .cd-hero .detail-fact .icon-tile {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .cd-hero .detail-fact .icon-tile svg {
        width: 16px;
        height: 16px;
    }
    .cd-hero .detail-fact-label {
        font-size: 14px;
    }
    .cd-hero .detail-fact-sub {
        font-size: 11px;
    }
}
/* course detail on phones: the topic links scroll sideways in one row (like the other chip rows)
   and the "View all" button label stays on one line */
@media (max-width: 767.98px) {
    .cd-topics-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-self: stretch;
        margin: 0 -20px;
        padding: 0 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .cd-topics-list::-webkit-scrollbar {
        display: none;
    }
    .cd-topics-list .chip {
        white-space: nowrap;
    }
    .cd-related-more .cta-btn {
        padding-right: 14px;
        padding-left: 14px;
        font-size: 14px;
        white-space: nowrap;
    }
}
.cd-topics-list.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
}
/* course catalog topic links on phones: three rows that scroll sideways instead of a long stack */
@media (max-width: 767.98px) {
    .catalog-topic-links-list {
        display: grid;
        grid-auto-columns: max-content;
        grid-auto-flow: column;
        grid-template-rows: repeat(3, auto);
        margin: 0 -18px;
        padding: 0 18px 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .catalog-topic-links-list::-webkit-scrollbar {
        display: none;
    }
    .catalog-topic-links-list .chip {
        white-space: nowrap;
    }
    .catalog-topic-links-list.is-scrollable {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
        mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.3));
    }
}

/* reviews: the simpleK12 leaf in place of a reviewer photo */
.quote-card figcaption img.quote-leaf {
    width: 30px;
    height: 30px;
    border-radius: 0;
    object-fit: contain;
    background: none;
}

/* homepage membership block on the dark ink background (#22282b); the price cards stay white */
.home-membership.bg_ink .eyebrow {
    color: #8fcbd8;
}
.home-membership.bg_ink .home-section-title {
    color: #ffffff;
}
.home-membership.bg_ink .home-member-copy > p {
    color: #c1c9cd;
}
.home-membership.bg_ink .home-member-list {
    color: #ffffff;
}
.home-membership.bg_ink .home-member-list svg {
    stroke: #8fcbd8;
}
.home-membership.bg_ink .home-member-side {
    color: #22282b;
}
.home-membership.bg_ink .home-plan-card {
    border-color: #ffffff;
    box-shadow: none;
}

/* homepage hero below 1366px: the teacher's face is in the upper middle of her photo, so the caption
   card sits along the bottom of the photo (over the body) and the certificate card becomes a small
   badge in the top corner; neither covers a face (wider screens keep the caption top-left) */
@media (min-width: 768px) and (max-width: 1365.98px) {
    .home-hero-card.is-pathway.is-caption {
        top: auto;
        bottom: 12px;
        left: 0;
        width: 340px;
        max-width: 100%;
    }
    .home-hero-card.is-cert {
        top: 12px;
        bottom: auto;
        left: 0;
        gap: 8px;
        width: auto;
        padding: 6px 14px 6px 6px;
        border-radius: 999px;
    }
    .icon-tile.home-hero-cert-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .icon-tile.home-hero-cert-icon svg {
        width: 16px;
        height: 16px;
    }
    .home-hero-cert-title {
        font-size: 13px;
    }
    .home-hero-cert-sub {
        display: none;
    }
}
/* phones: the caption card is full width and hangs a little below the photo, so its top stays under
   the teacher's chin on every phone */
@media (max-width: 767.98px) {
    .home-hero-media {
        margin-bottom: 36px;
    }
    .home-hero-card.is-pathway.is-caption {
        right: 12px;
        bottom: -36px;
        width: auto;
        max-width: none;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-hero-card.is-pathway.is-caption {
        bottom: 0;
    }
}
@media (max-width: 374.98px) {
    .home-hero-card.is-cert {
        top: 8px;
        left: 8px;
        padding-right: 10px;
    }
    .home-hero-cert-title {
        font-size: 11px;
    }
}

/* course catalog: "Most Popular Courses" above the topic cards, and smaller topic cards */
.catalog-popular-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 36px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.52px;
    color: #22282b;
}
.catalog-popular-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #36768d;
    color: #ffffff;
}
.catalog-popular-title + .catalog-topics {
    margin-top: calc(18px - var(--bs-gutter-y));
}
.catalog-topic,
.catalog-topic:hover {
    min-height: 184px;
    border-radius: 16px;
}
.catalog-topic-body {
    gap: 6px;
    padding: 16px 18px;
}
.catalog-topic-title {
    min-height: 63px;
    font-size: 16px;
    line-height: 21px;
}
.catalog-topic-link {
    font-size: 13px;
}
@media (max-width: 767.98px) {
    .catalog-popular-title {
        margin-top: 28px;
        font-size: 22px;
    }
    .catalog-popular-icon {
        width: 30px;
        height: 30px;
    }
    .catalog-topic-title {
        min-height: 84px;
    }
}
/* the topic titles take two lines from 1366px and up to four on iPad landscape */
@media (min-width: 1366px) {
    .catalog-topic-title {
        min-height: 42px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .catalog-topic-title {
        min-height: 84px;
    }
}

/* call-to-action strip under a section's cards (Learning Pathways) */
.cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: 32px;
    padding: 24px 28px;
    border: 1px solid #c7e7ee;
    border-radius: 20px;
    background: #f0f8f9;
}
.cta-strip-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cta-strip-title {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: #22282b;
}
.cta-strip-sub {
    font-size: 15px;
    color: #5b6a73;
}
.cta-strip-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
}
@media (max-width: 991.98px) {
    .cta-strip {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 575.98px) {
    .cta-strip {
        margin-top: 24px;
        padding: 20px;
    }
    .cta-strip-title {
        font-size: 17px;
    }
    .cta-strip-actions {
        flex-direction: column;
        align-self: stretch;
    }
    .cta-strip-actions .cta-btn {
        width: 100%;
    }
}

/* pathway detail sidebar (992px and up): the classroom photo sits at the top and scrolls away; the
   free-trial card then follows the scroll down the whole course list */
.pd-aside-photo {
    display: block;
    width: 100%;
    height: 250px;
    border-radius: 20px;
    object-fit: cover;
    object-position: center 30%;
}
@media (min-width: 992px) {
    .pd-aside-col {
        align-self: stretch;
    }
    .pd-aside-col .detail-aside {
        height: 100%;
    }
    .pd-aside-col .detail-offer {
        position: sticky;
        top: 24px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pd-aside-photo {
        height: 210px;
    }
}
@media (max-width: 991.98px) {
    .pd-aside-photo {
        display: none;
    }
}

/* pathway instructor layouts (pathway-instructors.html): the option label above each layout */
.layouts-hero-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}
.layouts-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.layouts-jump .chip {
    display: inline-block;
}
.layout-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 32px;
    padding: 12px 16px;
    border: 1px dashed #9cc7d4;
    border-radius: 14px;
    background: #ffffff;
    font-size: 14px;
}
.layout-label-num {
    padding: 3px 10px;
    border-radius: 999px;
    background: #22282b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}
.layout-label-title {
    font-weight: 600;
    color: #22282b;
}
.layout-label-note {
    color: #5b6a73;
}

/* instructors: shared heading and the instructor card */
.pd-team-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    text-align: center;
}
.pd-team-head p {
    max-width: 640px;
    color: #5b6a73;
}
.pd-team-head.is-split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}
.pd-team-head.is-split > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pd-team-more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.instructor-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 28px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.instructor-card-photo {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f8f9;
}
.instructor-card-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.instructor-card-name {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: #22282b;
}
.instructor-card-role {
    font-size: 14px;
    color: #5b6a73;
}
.instructor-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #5b6a73;
}
.instructor-card-focus {
    margin-top: auto;
    font-size: 14px;
}
.instructor-card.is-compact {
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
}
.instructor-card.is-compact .instructor-card-photo {
    width: 88px;
    height: 88px;
    margin-bottom: 6px;
}
.instructor-card.is-compact .instructor-card-name {
    font-size: 16px;
}
.instructor-card.is-compact .instructor-card-role {
    font-size: 13px;
}
.instructor-card.is-compact .tag-pill {
    margin-top: auto;
}
@media (hover: hover) {
    .instructor-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(34, 40, 43, 0.08);
    }
}
@media (prefers-reduced-motion: reduce) {
    .instructor-card {
        transition: none;
    }
}
.pd-team-slider .pd-team-head {
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .pd-team-head.is-split {
        flex-direction: column;
        align-items: flex-start;
    }
    .instructor-card {
        padding: 22px;
    }
    .instructor-card.is-compact {
        padding: 20px 12px;
    }
    .instructor-card.is-compact .instructor-card-photo {
        width: 72px;
        height: 72px;
    }
    .layout-label-note {
        flex-basis: 100%;
    }
}

/* blog post hero: a one-line summary under the title, so the column beside the cover is not empty */
.post-hero-dek {
    max-width: 640px;
    font-size: 17px;
    line-height: 1.6;
    color: #5b6a73;
}
@media (max-width: 575.98px) {
    .post-hero-dek {
        font-size: 16px;
    }
}

/* state requirements: every state as a plain link (for crawlers and for anyone not using the map),
   in columns: 2 on phones, 3 from 576px, 4 from 768px, 5 from 992px, 6 from 1200px */
.sr-list-intro {
    max-width: 640px;
    margin: 0 auto 32px;
}
.sr-list-intro p {
    margin-top: 10px;
    font-size: 17px;
    color: #5b6a73;
}
.sr-state-list {
    margin: 0;
    padding: 24px 28px;
    border: 1px solid #e0e4e6;
    border-radius: 20px;
    background: #ffffff;
    list-style: none;
    columns: 2;
    column-gap: 24px;
}
.sr-state-list li {
    break-inside: avoid;
}
.sr-state-list a {
    display: block;
    padding: 7px 0;
    color: #22282b;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.sr-state-list a:hover {
    color: #36768d;
    text-decoration: underline;
}
@media (min-width: 576px) {
    .sr-state-list {
        columns: 3;
    }
}
@media (min-width: 768px) {
    .sr-state-list {
        padding: 28px 36px;
        columns: 4;
    }
}
@media (min-width: 992px) {
    .sr-state-list {
        columns: 5;
    }
}
@media (min-width: 1200px) {
    .sr-state-list {
        columns: 6;
    }
}
@media (max-width: 575.98px) {
    .sr-list-intro {
        margin-bottom: 24px;
    }
    .sr-list-intro p {
        font-size: 16px;
    }
    .sr-state-list {
        padding: 14px 20px;
        column-gap: 16px;
    }
    .sr-state-list a {
        padding: 5px 0;
    }
}

/* state requirements finder: "Use my location" on the left, "See requirements" on the right (the
   location only picks the state; this button opens it), the status line under both */
.sr-finder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}
.sr-finder-actions .state-locate {
    align-self: center;
}
.sr-finder-actions .state-locate-status {
    flex-basis: 100%;
}
.cta-btn.sr-finder-go {
    padding: 11px 20px;
    font-size: 14px;
}
@media (max-width: 575.98px) {
    .cta-btn.sr-finder-go {
        width: 100%;
    }
}

/* brand leaf (the dot of the "i" in the simpleK12 logo) as a faint, tilted texture behind a light
   section, top right; .is-left puts it bottom left. The section's content stays above it. */
.leaf-texture {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.leaf-texture::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -130px;
    z-index: -1;
    width: 520px;
    height: 520px;
    background: url("../img/leaf-mark.svg") center / contain no-repeat;
    opacity: 0.09;
    transform: rotate(-16deg);
    pointer-events: none;
}
.leaf-texture.is-left::before {
    top: auto;
    right: auto;
    bottom: -130px;
    left: -150px;
    transform: rotate(14deg);
}
@media (max-width: 767.98px) {
    .leaf-texture::before {
        top: -50px;
        right: -110px;
        width: 280px;
        height: 280px;
    }
    .leaf-texture.is-left::before {
        top: auto;
        right: auto;
        bottom: -70px;
        left: -110px;
    }
}

/* links to the instructor profile (course detail presenter) and the presenter section's two buttons */
.detail-fact-label.is-link,
.detail-presenter-name.is-link {
    color: #22282b;
    text-decoration: underline;
    text-decoration-color: #c7e7ee;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.detail-fact-label.is-link:hover,
.detail-presenter-name.is-link:hover {
    color: #36768d;
    text-decoration-color: #36768d;
}
.detail-instructor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* our experts: the name links to the profile and the whole card is clickable (LinkedIn stays its own link) */
.expert-card {
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.expert-card:hover {
    border-color: #c7e7ee;
    box-shadow: 0 14px 34px rgba(39, 86, 104, 0.10);
}
a.expert-card-name {
    color: #22282b;
    text-decoration: none;
}
a.expert-card-name::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
}
a.expert-card-name:hover {
    color: #36768d;
}
.expert-card-social {
    position: relative;
    z-index: 1;
}

/* outline button for dark bands (teal CTA band) */
.cta-btn.btn_ghost,
.cta-btn.btn_ghost:hover {
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    color: #ffffff;
}
.cta-btn.btn_ghost:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* reviews: link under the homepage slider */
.reviews-more {
    margin-top: 32px;
}

/* === Category page (course-category.html) === */
.category-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.category-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.category-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    object-fit: cover;
}
.category-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #d9e7ec;
}
.category-related-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.category-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.category-related-list .chip {
    background: #ffffff;
}
/* sidebar: the other categories are links to their own pages */
.category-links {
    margin: 0;
    list-style: none;
}
.category-link {
    display: block;
    padding: 6px 0;
    color: #22282b;
    font-size: 14px;
    text-decoration: none;
}
.category-link:hover {
    color: #36768d;
    text-decoration: underline;
}
.category-link.is-current {
    padding-left: 12px;
    border-left: 3px solid #36768d;
    color: #275668;
    font-weight: 600;
}
.category-path {
    overflow: hidden;
    border: 1px solid #e6e6e7;
    border-radius: 24px;
    background: #ffffff;
}
.category-path-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}
.category-path-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    height: 100%;
    padding: 44px 48px;
}
.category-path-body p {
    color: #5b6a73;
    font-size: 16px;
}
.category-path-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}
.category-path-facts li {
    padding: 6px 12px;
    border-radius: 999px;
    background: #f0f8f9;
    color: #275668;
    font-size: 13px;
    font-weight: 600;
}
@media (max-width: 767.98px) {
    .category-hero-img {
        aspect-ratio: 16 / 10;
    }
    .category-related {
        margin-top: 28px;
        padding-top: 20px;
    }
    .category-path-img {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .category-path-body {
        padding: 28px 24px;
    }
    /* related topics swipe sideways on phones (drag to scroll in main.js), so no chip sits alone */
    .category-related-list {
        flex-wrap: nowrap;
        align-self: stretch;
        width: calc(100% + 40px);
        margin: 0 -20px;
        padding: 0 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .category-related-list::-webkit-scrollbar {
        display: none;
    }
    .category-related-list .chip {
        display: inline-block;
        white-space: nowrap;
    }
}

/* category page: star rating and the educator count under the hero buttons */
.category-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: #5b6a73;
    font-size: 14px;
}
.category-proof strong {
    color: #22282b;
}
/* category page: reviews of the category's courses */
.category-reviews-head {
    max-width: 640px;
    margin: 0 auto 32px;
}
.category-reviews-head p {
    margin-top: 10px;
    color: #5b6a73;
    font-size: 17px;
}
@media (max-width: 767.98px) {
    .category-reviews-head {
        margin-bottom: 24px;
    }
    .category-reviews-head p {
        font-size: 16px;
    }
}

/* === Instructor profile (instructor-profile.html) === */
/* the photo takes the simpleK12 leaf shape: round top-left and bottom-right, one sharp corner */
.profile-photo {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50% 18px 50% 0;
    object-fit: cover;
    box-shadow: 0 24px 60px rgba(39, 86, 104, 0.18);
}
.profile-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.profile-role {
    margin-top: -6px;
    color: #275668;
    font-size: 18px;
    font-weight: 600;
}
.profile-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.profile-tags-label {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
.profile-social {
    width: 48px;
    height: 48px;
    background: #ffffff;
}
.profile-head {
    max-width: 680px;
    margin: 0 auto 36px;
}
.profile-head p {
    margin-top: 10px;
    color: #5b6a73;
    font-size: 17px;
}
.profile-fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 24px;
    border: 1px solid #e6e6e7;
    border-radius: 20px;
    background: #f9fafb;
}
.profile-fact-value {
    color: #36768d;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.profile-fact-label {
    color: #22282b;
    font-size: 15px;
    line-height: 1.45;
}
.profile-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
.profile-cta-actions .cta-btn {
    margin-top: 0;
}
@media (max-width: 767.98px) {
    .profile-photo {
        max-width: 260px;
        margin: 0 auto;
    }
    /* the courses button fills the row and the LinkedIn icon stays beside it */
    .profile-actions {
        flex-wrap: nowrap;
    }
    .profile-actions .cta-btn {
        flex: 1 1 auto;
        width: auto;
    }
    .profile-actions .profile-social {
        flex: 0 0 auto;
    }
    .profile-fact {
        padding: 18px 16px;
    }
    .profile-tags-label {
        flex-basis: 100%;
    }
    .profile-fact-label {
        font-size: 14px;
    }
    .profile-head {
        margin-bottom: 28px;
    }
    .profile-head p {
        font-size: 16px;
    }
    .profile-fact-value {
        font-size: 22px;
    }
}
/* phones (portrait, and landscape with a short screen): the buttons come straight after the name
   and role so they sit on the first screen; the bio and specialties follow */
@media (max-width: 767.98px), (orientation: landscape) and (max-height: 500px) {
    .profile-photo {
        max-width: 200px;
    }
    .profile-copy .profile-actions {
        order: 1;
    }
    .profile-copy .intro-text {
        order: 2;
    }
    .profile-copy .profile-tags {
        order: 3;
    }
}

/* === Reviews page (reviews.html) === */
.reviews-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.reviews-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
/* the next step under each theme's heading */
.reviews-theme-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #275668;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.reviews-theme-link:hover {
    color: #36768d;
    text-decoration: underline;
}
/* "The takeaway": one summary paragraph in a bordered box */
.reviews-takeaway-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 40px;
    border-left: 4px solid #36768d;
    border-radius: 0 20px 20px 0;
    background: #f0f8f9;
}
.reviews-takeaway-box p {
    color: #22282b;
    font-size: 17px;
    line-height: 1.7;
}
@media (max-width: 767.98px) {
    .reviews-takeaway-box {
        padding: 24px 22px;
    }
    .reviews-takeaway-box p {
        font-size: 16px;
    }
}
.reviews-jump-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.reviews-jump-list .chip {
    background: #ffffff;
}
.reviews-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border: 1px solid #d9e7ec;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(39, 86, 104, 0.10);
}
.reviews-summary-title {
    color: #22282b;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.reviews-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid #e6e6e7;
    border-bottom: 1px solid #e6e6e7;
    list-style: none;
}
.reviews-summary-stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reviews-summary-value {
    color: #36768d;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.reviews-summary-label {
    color: #5b6a73;
    font-size: 13px;
}
.reviews-summary-note {
    color: #5b6a73;
    font-size: 13px;
}
.reviews-theme-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
    margin-bottom: 32px;
}
.reviews-theme-head p {
    color: #5b6a73;
    font-size: 17px;
}
.bg_snow .quote-card.is-review {
    background: #ffffff;
}
.quote-topic {
    align-self: flex-start;
    color: #275668;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #c7e7ee;
    text-underline-offset: 3px;
}
.quote-topic:hover {
    color: #36768d;
}
@media (max-width: 767.98px) {
    .reviews-summary {
        padding: 22px;
    }
    .reviews-summary-value {
        font-size: 19px;
    }
    .reviews-theme-head {
        margin-bottom: 24px;
    }
    .reviews-theme-head p {
        font-size: 16px;
    }
    /* the topic chips swipe sideways on phones (drag to scroll in main.js) */
    .reviews-jump-list {
        flex-wrap: nowrap;
        width: calc(100% + 40px);
        margin: 0 -20px;
        padding: 0 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .reviews-jump-list::-webkit-scrollbar {
        display: none;
    }
    .reviews-jump-list .chip {
        display: inline-block;
        white-space: nowrap;
    }
}

/* === WordPress: page.php wraps the page's blocks in .l-blocks-wrap, so the hero is not
   main's first child there; same rules as "phones held sideways" above. === */
@media (orientation: landscape) and (max-height: 500px) {
    main > .l-blocks-wrap > section:first-child .section-space,
    main > .l-blocks-wrap > section:first-child .home-hero-space {
        padding-top: 24px;
    }
    main > .l-blocks-wrap > section:first-child .site-breadcrumb {
        margin-top: 0;
    }
    main > .l-blocks-wrap > section:first-child .eyebrow:has(+ h1) {
        display: none;
    }
}

/* === WordPress: real course titles can wrap in the state page's topics card; keep its arrow
   from shrinking. === */
.texas-topics-links a svg {
    flex-shrink: 0;
}

/* === WordPress: FAQ block, "section heading" style (.faq-section): the head of the learning
   pathways and state page FAQs (.lp-faq-intro, .texas-faq-intro); the course category and
   reviews FAQs (block class category-faq / reviews-faq) have a plain head. === */
.faq-section-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-section-head p {
    font-size: 16px;
    color: #5b6a73;
}
.faq-section-head a {
    font-weight: 600;
}
.category-faq .faq-section-head,
.reviews-faq .faq-section-head {
    display: block;
}
.category-faq .faq-section-head p,
.reviews-faq .faq-section-head p {
    color: inherit;
}
.category-faq .faq-section-head a,
.reviews-faq .faq-section-head a {
    font-weight: inherit;
}


/* === WordPress: instructor cards link to the profile; compact grid "View all" === */
.instructor-card {
    position: relative;
}
.instructor-card-link {
    color: inherit;
    text-decoration: none;
}
.instructor-card-link:hover {
    color: inherit;
    text-decoration: underline;
}
/* The hidden cards: their columns keep their top gutter, the same 20px gap as between the rows
   above. The button sits in the design's centred .pd-team-more row and goes once opened. */
.pd-team-rest > .row {
    margin-top: 0;
}
.pd-team-more .cta-btn[aria-expanded="true"] {
    display: none;
}


/* === WordPress: server-side catalog === */
/* The chosen-filter chips and "Clear all" are links to the state without them (no JavaScript needed) */
a.catalog-active-chip,
a.catalog-active-chip:hover {
    color: #275668;
    text-decoration: none;
}
a.catalog-active-clear:hover {
    color: #275668;
}
/* Page links: a gap between far-apart page numbers */
.catalog-page.is-gap,
.catalog-page.is-gap:hover {
    min-width: 0;
    padding: 0 4px;
    border-color: transparent;
    background: none;
    color: #5b6a73;
}
/* While the next state loads in place */
[data-catalog].is-loading [data-catalog-list],
[data-catalog].is-loading [data-catalog-pages] {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
/* Without JavaScript: the filter form's button (in the filter column and next to the sort) */
.catalog-filter .catalog-filter-submit {
    margin-top: 16px;
}
.catalog-sort .catalog-filter-submit {
    display: inline-flex;
}