@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* PB1 Signs — header layout (design reference) */
:root {
    /* Brand palette */
    --color-navy: #011d4d;
    --color-navy-hover: #01356b;
    --color-crimson: #ab1320;
    --color-crimson-hover: #bb1121;

    --brand-red: var(--color-crimson);
    --accent-blue: var(--color-navy);
    --accent-red: var(--color-crimson);
    /* Primary filled buttons & key backgrounds */
    --btn-dash-bg: var(--color-navy);
    --btn-dash-bg-hover: var(--color-navy-hover);
    --text-dark: #1a1a1a;
    --text-muted: #444;
    --white: #fff;
    --surface-muted: #f4f6f9;
    --container: min(1160px, 100% - 2rem);
    --nav-break: 992px;
    /* Approx. top bar + navbar height for mobile drawer offset */
    --header-offset: 5.75rem;
    /* Site header must sit above sticky lesson toolbars (see .lesson-page__toolbar) */
    --z-site-header: 300;
    --z-account-dropdown: 400;
    --z-lesson-toolbar: 15;
}

.header {
    position: relative;
    width: 100%;
    top: auto;
    z-index: var(--z-site-header);
    transition: none;
    background: #fff;
}

.header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    backdrop-filter: none;
    opacity: 1;
    transition: none;
    pointer-events: none;
}

.header.scrolled::before {
    opacity: 1;
}

.header.scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header .container {
    position: relative;
    z-index: 4;
    overflow: visible;
}

.header .nav-wrap {
    position: relative;
    z-index: 2;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-dark);
    background: #f5f5f5;
    padding-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
button,
input,
textarea,
select {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.main {
    flex: 1 0 auto;
}

body.nav-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.container {
    width: var(--container);
    margin-inline: auto;
}

/* Header top bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    gap: 15px;
    transition: none;
}

.header.scrolled .top-bar {
    padding: 15px 0;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-header__logo-img {
    display: block;
    width: 100px;
    height: auto;
    object-fit: contain;
    transition: none;
}

.site-header__tagline {
    display: flex;
    flex-direction: column;
    gap: 0.12em;
    color: #011d4d;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(0.88rem, 1.35vw + 0.55rem, 1.2rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.01em;
    max-width: min(22rem, 100%);
    opacity: 0.95;
}

.site-header__tagline-desktop {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

.site-header__tagline-mobile {
    display: none;
    flex-direction: column;
    gap: inherit;
}

.site-header__tagline-line {
    display: block;
}

.header.scrolled .site-header__logo-img {
    width: 100px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 6;
}

.link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111827;
    position: relative;
    font-weight: 500;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.link__icon,
.login-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.link .fa-solid,
.login-btn .fa-solid {
    font-size: 14px;
    line-height: 1;
}

.link::after {
    content: none;
}

.link:hover,
.link:focus-visible {
    background: #011d4d;
    color: #fff;
    border-color: #011d4d;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(1, 29, 77, 0.22);
}

.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #011d4d, #01356b);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    transition: 0.3s;
}

.login-btn:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: #fff;
}

.nav-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: #011d4d;
    position: relative;
}

.nav {
    position: relative;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.nav-item {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    z-index: 3;
    padding: 8px 16px;
    transition: 0.3s;
}

.nav-item:hover,
.nav-item.active {
    color: #011d4d;
    background: #fff;
    border-radius: 5px;
    text-decoration: none;
}

.nav-indicator {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 0;
    background: #fff;
    transition: 0.3s;
    z-index: 1;
    border-radius: 5px;
}

.menu-btn {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: #fff;
    background: transparent;
    border: 0;
}

.mobile-full {
    position: fixed;
    inset: 0;
    background: rgba(1, 29, 77, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1000;
}

.mobile-full.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-full__backdrop {
    position: absolute;
    inset: 0;
}

.mobile-full__panel {
    position: relative;
    z-index: 1;
    height: 100%;
    width: min(50vw, 360px);
    min-width: 240px;
    max-width: calc(100vw - 3rem);
    background: #011d4d;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 12px 0 28px rgba(1, 29, 77, 0.2);
    display: flex;
    flex-direction: column;
}

.mobile-full.active .mobile-full__panel {
    transform: translateX(0);
}

.mobile-full__close {
    align-self: flex-end;
    margin: 0.6rem 0.75rem 0 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.mobile-inner {
    height: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.75rem 1rem 1.25rem;
    overflow-y: auto;
}

.mobile-link {
    font-size: 1.1rem;
    color: #fff;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-link:hover,
.mobile-link:focus-visible,
.mobile-link.active {
    background: #fff;
    color: #011d4d;
    text-decoration: none;
}

.mobile-link.active,
.mobile-link--login {
    font-weight: 700;
}

/* Header auth CTA (replaces Need Help block) */
.navbar__auth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    position: relative;
    z-index: 35;
}

.navbar__auth--mobile {
    display: none;
    flex-shrink: 0;
    align-items: center;
    padding: 0;
    margin: 0;
    border: none;
}

.navbar__auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem;
    background: var(--btn-dash-bg);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 6px;
    border: none;
    transition: background 0.15s, color 0.15s;
}

.navbar__auth-btn:hover {
    background: var(--btn-dash-bg-hover);
    color: var(--white);
    text-decoration: none;
}

/* My Account dropdown (shown when signed in — demo session) */
.account-menu {
    position: relative;
    flex-shrink: 0;
    z-index: var(--z-account-dropdown);
}

.top-actions .account-menu {
    z-index: var(--z-account-dropdown);
}

.navbar__auth--mobile .account-menu {
    width: auto;
}

.account-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    background: var(--btn-dash-bg);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    width: auto;
}

.navbar__auth--mobile .account-menu__btn {
    width: auto;
}

.account-menu__btn:hover {
    background: var(--btn-dash-bg-hover);
    text-decoration: none;
    color: var(--white);
}

.account-menu.is-open .account-menu__chev {
    transform: rotate(180deg);
}

.account-menu__chev {
    display: inline-flex;
    transition: transform 0.2s;
}

.account-menu__dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 15rem;
    padding: 0.35rem 0;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(1, 29, 77, 0.16);
    border: 1px solid #e2e8f0;
    z-index: var(--z-account-dropdown);
}

.account-menu.is-open .account-menu__dropdown {
    display: block;
}

.account-menu__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.account-menu__item:hover {
    background: #f1f5f9;
    text-decoration: none;
}

.account-menu__item.is-active {
    background: var(--btn-dash-bg);
    color: var(--white);
}

.account-menu__icon {
    display: flex;
    flex-shrink: 0;
    color: #64748b;
}

.account-menu__item.is-active .account-menu__icon {
    color: var(--white);
}

.account-menu__item--logout {
    margin-top: 0.15rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e8ecf4;
    background: #ab1320;
    color: var(--white);
    font-weight: 700;
}

.account-menu__item--logout:hover {
    background: #bb1121;
    color: var(--white);
    text-decoration: none;
}

.account-menu__item--logout .account-menu__icon {
    color: var(--white);
}

@media (max-width: 991px) {
    .account-menu.is-open .account-menu__dropdown {
        display: block;
    }

    .account-menu__dropdown {
        position: absolute;
        left: auto;
        right: 0;
        top: calc(100% + 0.35rem);
        margin-top: 0;
        min-width: 0;
        width: max-content;
        max-width: min(15.25rem, calc(100vw - 2rem));
        box-shadow: 0 12px 40px rgba(1, 29, 77, 0.16);
    }

    .top-actions .account-menu__item {
        padding: 0.65rem 0.85rem;
        font-size: 1rem;
        gap: 0.5rem;
    }

    .navbar__auth--mobile .account-menu {
        position: relative;
        z-index: var(--z-account-dropdown);
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 0;
    }

    .top-actions {
        gap: 8px;
    }

    .top-actions .account-menu {
        position: relative;
        z-index: var(--z-account-dropdown);
    }

    .top-actions .account-menu__btn {
        gap: 6px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 0;
        font-size: 0.875rem;
        font-weight: 600;
        background: linear-gradient(135deg, #011d4d, #01356b);
        box-shadow: none;
    }

    .top-actions .account-menu__btn:hover {
        background: linear-gradient(135deg, #01356b, #011d4d);
    }

    .site-header__tagline {
        max-width: min(20rem, calc(100vw - 8rem));
    }

    .nav {
        display: none;
    }

    .nav-wrap {
        display: none;
    }

    .menu-btn {
        display: block;
        position: static;
        color: #011d4d;
        line-height: 1;
        padding: 6px 8px;
    }
}

@media (max-width: 480px) {
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .logo-area {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .site-header__logo-img {
        width: 140px;
    }

    .site-header__tagline {
        line-height: 1.24;
        max-width: calc(100% - 114px);
    }

    .site-header__tagline-desktop {
        display: none;
    }

    .site-header__tagline-mobile {
        display: flex;
    }

    .site-header__tagline-line {
        display: block;
    }

    .top-actions {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
    }

    .top-actions .link {
        margin-right: auto;
    }
}

.main--home {
    min-height: 0;
}


/* Alternating section backgrounds below hero */
.main--home>.lesson-chapters {
    background-color: var(--surface-muted);
}

.main--home>.about-block {
    background-color: var(--white);
}

.main--home>.scheduling {
    background-color: var(--surface-muted);
}

.main--home>.testimonials {
    background-color: var(--white);
}


/* About Us — blue + red accents; dot motif; alternating stripe via .main--home */
.about-block {
    --about-blue: #011d4d;
    --about-blue-soft: #01356b;
    --about-red: #ab1320;
    --about-navy: #011d4d;
    --about-grey: #526077;
    --about-dot: rgba(1, 29, 77, 0.22);
    padding: clamp(3.25rem, 8vw, 5.75rem) 0;
}

.about-block__inner {
    width: min(1180px, 100% - 2rem);
    margin-inline: auto;
}

.about-block__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.75rem);
    align-items: center;
}

.about-block__media {
    position: relative;
    max-width: 520px;
    width: 100%;
    justify-self: start;
    padding-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.about-block__dots {
    position: absolute;
    top: clamp(-18px, -3vw, -28px);
    right: clamp(-10px, -2vw, -24px);
    width: min(220px, 48%);
    aspect-ratio: 1;
    border-radius: 12px;
    background-image: radial-gradient(circle at center, var(--about-dot) 1.35px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.65;
    z-index: 0;
    pointer-events: none;
}

.about-block__figure {
    margin: 0;
}

.about-block__figure--main {
    position: relative;
    z-index: 1;
}

.about-block__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.about-block__img--main {
    border-radius: clamp(14px, 3vw, 22px);
    box-shadow: 0 28px 50px rgba(1, 29, 77, 0.14), 0 10px 24px rgba(0, 0, 0, 0.06);
}

.about-block__figure--accent {
    position: absolute;
    bottom: clamp(-28px, -5vw, -36px);
    right: clamp(-12px, -3vw, -28px);
    width: clamp(188px, 52%, 280px);
    z-index: 2;
}

.about-block__img--accent {
    border-radius: 14px;
    border: 4px solid #fff;
    box-shadow: 0 18px 40px rgba(171, 19, 32, 0.12), 0 6px 16px rgba(1, 29, 77, 0.12);
}

.about-block__content {
    min-width: 0;
}

.about-block__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--about-red);
}

.about-block__eyebrow-icon {
    display: flex;
    color: var(--about-blue);
}

.about-block__title {
    margin: 0 0 1.1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 3.8vw, 2.35rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--about-navy);
}

.about-block__lead {
    margin: 0 0 0.95rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--about-grey);
}

.about-block__lead:last-of-type {
    margin-bottom: 1.35rem;
}

.about-block__lead .about-block__site-link {
    color: var(--about-navy);
    font-weight: 700;
    text-decoration: none;
}

.about-block__lead .about-block__site-link:hover {
    color: var(--about-blue);
    text-decoration: underline;
}

.about-block__features {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem clamp(1rem, 3vw, 1.85rem);
    width: 100%;
}

.about-block__feature {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 0.5rem;
    align-items: start;
    min-width: 0;
}

.about-block__check {
    display: flex;
    justify-content: flex-start;
    width: 22px;
    margin-top: 0.1rem;
    color: var(--about-blue);
}

.about-block__check circle {
    stroke: var(--about-blue-soft);
}

.about-block__feature-text {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--about-navy);
}

.about-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--btn-dash-bg);
    border: 2px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(1, 29, 77, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.about-block__cta:hover {
    text-decoration: none;
    background: var(--btn-dash-bg-hover);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(1, 29, 77, 0.22);
}

@media (max-width: 929px) {
    .about-block__layout {
        grid-template-columns: 1fr;
        gap: clamp(2.5rem, 6vw, 3rem);
    }

    .about-block__media {
        max-width: 560px;
        margin-inline: auto;
        justify-self: center;
        padding-bottom: clamp(2rem, 7vw, 3rem);
    }

    .about-block__figure--accent {
        right: max(-8px, 2vw);
        bottom: clamp(-24px, -4vw, -32px);
    }

    .about-block__content {
        text-align: center;
        max-width: 36rem;
        margin-inline: auto;
    }

    /* One column so every checkmark shares the same vertical line */
    .about-block__features {
        grid-template-columns: 1fr;
        max-width: min(26rem, 100%);
        margin-inline: auto;
        padding-inline-start: clamp(3.5rem, 3.5vw, 3.5rem);
        text-align: left;
    }

    .about-block__check {
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .about-block__cta {
        width: 100%;
    }

    .about-block__dots {
        right: max(-6px, 0px);
        top: -16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-block__cta:hover {
        transform: none;
    }
}

/* Home hero — full-width banner + glass card (separate from global header styles) */
:root {
    --home-hero-accent: #f5c518;
    --home-hero-cta: var(--btn-dash-bg);
    --home-hero-cta-hover: var(--btn-dash-bg-hover);
    --home-hero-overlay: transparent;
}

.home-hero {
    position: relative;
    min-height: min(78vh, 640px);
    display: flex;
    align-items: stretch;
    background-color: #1a1d24;
    background-image: var(--home-hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--home-hero-overlay);
    pointer-events: none;
}

.home-hero__layout {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.home-hero__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.home-hero__card {
    max-width: 34rem;
    width: 100%;
    padding: clamp(1.85rem, 4vw, 2.5rem);
    margin: 0;
    flex: 0 1 auto;
    border-radius: 24px;
    background: rgba(14, 20, 32, 0.84);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);
}

.home-hero__title {
    margin: 0 0 0.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.home-hero__subtitle {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 700;
    color: #fff;
}

.home-hero__rating {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

.home-hero__star {
    display: flex;
    flex-shrink: 0;
}

.home-hero__rating-text {
    font-size: 0.95rem;
    color: #fff;
}

.home-hero__rating-value {
    font-weight: 700;
    margin-right: 0.15rem;
}

.home-hero__features {
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.home-hero__features li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.35rem;
}

.home-hero__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}

.home-hero__feature-link {
    color: #bb1121;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.2px;
}

.home-hero__feature-link:hover {
    color: #ab1320;
    text-decoration: underline;
}

.home-hero__cta {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1.5rem;
    margin-bottom: 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--btn-dash-bg);
    border: 1px solid var(--btn-dash-bg);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.home-hero__cta:hover {
    background: var(--btn-dash-bg-hover);
    border-color: var(--btn-dash-bg-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

.home-hero__price {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

@media (min-width: 769px) {
    .home-hero__layout {
        justify-content: flex-start;
    }

    .home-hero__inner {
        justify-content: flex-start;
        padding-inline-start: 12px;
    }

    .home-hero__card {
        margin-left: -80px;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .home-hero {
        min-height: min(62vh, 480px);
        background-size: cover;
        background-position: 62% center;
    }

    .home-hero__layout {
        align-items: flex-start;
        justify-content: center;
        padding-top: clamp(1rem, 3vw, 2rem);
        padding-bottom: clamp(0.45rem, 2vw, 0.75rem);
        padding-inline: clamp(1rem, 4.5vw, 1.75rem);
    }

    .home-hero__inner {
        justify-content: center;
    }

    .home-hero__card {
        max-width: min(28rem, 100%);
        width: 100%;
        margin-inline: auto;
        text-align: left;
        padding-top: clamp(1.75rem, 4.2vw, 2.35rem);
        padding-inline: clamp(1.35rem, 4.5vw, 1.95rem);
        padding-bottom: clamp(1.1rem, 3vw, 1.55rem);
    }

    .home-hero__title {
        white-space: normal;
        font-size: clamp(1.45rem, 3.8vw, 1.85rem);
    }

    .home-hero__subtitle {
        font-size: clamp(1.06rem, 2.4vw, 1.28rem);
    }

    .home-hero__rating-text {
        font-size: 1.02rem;
    }

    .home-hero__features {
        font-size: 1rem;
    }

    .home-hero__feature-link {
        font-size: inherit;
    }

    .home-hero__cta {
        font-size: 1.02rem;
        margin-bottom: 0.65rem;
    }

    .home-hero__price {
        font-size: clamp(1.85rem, 4.2vw, 2.35rem);
    }

    .home-hero__rating {
        justify-content: flex-start;
    }

    .home-hero__rating .home-hero__star svg {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__cta:hover {
        transform: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .home-hero__card {
        background: rgba(14, 20, 32, 0.84);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
}

/* Complete Your lesson — blue + red accents, alternating page stripe via .main--home */
.lesson-chapters {
    --lc-blue: #011d4d;
    --lc-blue-soft: #01356b;
    --lc-red: #ab1320;
    --lc-black: #011d4d;
    --lc-border: #d4dbe8;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.lesson-chapters__inner {
    width: min(1320px, 100% - 2rem);
    margin-inline: auto;
}

.lesson-chapters__title {
    margin: 0 0 clamp(2rem, 4vw, 2.75rem);
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.15rem);
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    color: var(--lc-black);
}

.lesson-chapters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.35rem);
    align-items: stretch;
}

.lesson-chapters__card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.65rem;
    min-width: 0;
}

.lesson-chapters__icon-cluster {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
}

.lesson-chapters__icon-box {
    width: clamp(76px, 5.8vw, 92px);
    height: clamp(76px, 5.8vw, 92px);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--lc-blue-soft) 0%, var(--lc-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(1, 29, 77, 0.28);
}

.lesson-chapters__icon-svg {
    width: 54%;
    height: 54%;
}

.lesson-chapters__badge {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.35rem;
    border-radius: 50%;
    background: var(--lc-red);
    color: #fff;
    border: 2px solid #fff;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 12px rgba(171, 19, 32, 0.35);
}

.lesson-chapters__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--lc-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.06);
}

.lesson-chapters__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.lesson-chapters__panel--chapter {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.55rem 0.65rem 0.52rem;
    text-align: left;
    border-bottom: 1px solid rgba(171, 19, 32, 0.22);
    background: #fff;
}

.lesson-chapters__chapter-label {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--lc-blue);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lesson-chapters__chapter-num {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--lc-black);
    line-height: 1;
}

.lesson-chapters__panel--desc {
    flex: 1;
    padding: 0.55rem 0.65rem 0.65rem;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 3.75rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lesson-chapters__desc {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(11.5px, 0.95vw, 13px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: left;
    color: var(--lc-black);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.lesson-chapters__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 40px;
    padding: 0.85rem 1.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--white);
    background: var(--btn-dash-bg);
    border-radius: 999px;
    border: none;
    box-shadow: 0 4px 12px rgba(1, 29, 77, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.lesson-chapters__cta:hover {
    color: var(--white);
    background: var(--btn-dash-bg-hover);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 29, 77, 0.22);
}

.lesson-chapters__cta-wrap {
    margin: 2rem 0 0;
    text-align: center;
}

.lesson-chapters__cta--continue {
    background: var(--btn-dash-bg);
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.35);
}

.lesson-chapters__cta--continue:hover {
    background: var(--btn-dash-bg-hover);
    color: var(--white);
}

@media (max-width: 1099px) {
    .lesson-chapters__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lesson-chapters__desc {
        font-size: clamp(11px, 1.1vw, 12.5px);
    }
}

@media (max-width: 820px) {
    .lesson-chapters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-chapters__desc {
        font-size: 0.74rem;
        -webkit-line-clamp: 6;
    }

    .lesson-chapters__icon-box {
        width: 82px;
        height: 82px;
    }
}

@media (max-width: 480px) {
    .lesson-chapters__grid {
        grid-template-columns: 1fr;
    }

    .lesson-chapters__card {
        gap: 0.85rem;
    }

    .lesson-chapters__desc {
        font-size: 0.8125rem;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

/* Scheduling an appointment — white section, blue cards, red CTA */
.scheduling {
    --schedule-black: #0f0f0f;
    --schedule-card-blue: #011d4d;
    --schedule-cta-red: #ab1320;
    --schedule-cta-red-hover: #bb1121;
    padding: clamp(2rem, 4.5vw, 3.25rem) 0;
}

.scheduling__inner {
    width: min(1140px, 100% - 2rem);
    margin-inline: auto;
}

.scheduling__title {
    margin: 0 auto 1rem;
    max-width: none;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: center;
    color: #111;
    white-space: nowrap;
}

.scheduling__title-accent {
    display: block;
    margin-top: 0.2rem;
    color: #ab1320;
    font-size: clamp(1.2rem, 2.35vw, 1.7rem);
    font-weight: 600;
}

.scheduling__intro {
    margin: 0 auto 2.25rem;
    max-width: 58rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9675rem;
    line-height: 1.75;
    text-align: center;
    color: var(--schedule-black);
}

.scheduling__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 2rem;
}

.scheduling__card {
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border-radius: 16px;
    background: var(--schedule-card-blue);
    color: #fff;
    box-shadow: 0 16px 40px rgba(1, 29, 77, 0.2);
}

.scheduling__card-title {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;

}

.scheduling__card-body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.95);
}

.scheduling__card-body p {
    margin: 0 0 0.9rem;
}

.scheduling__card-body p:last-child {
    margin-bottom: 0;
}

.scheduling__card-body a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.scheduling__card-body a:hover {
    color: rgba(255, 255, 255, 0.85);
}

.scheduling__card-btn {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.62rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: #ab1320 !important;
    font-weight: 700;
    text-decoration: none !important;
}

.scheduling__card-btn:hover {
    background: rgba(1, 29, 77, 0.08);
    color: #ab1320 !important;
    text-decoration: none !important;
}

.scheduling__actions {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

.scheduling__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.92rem 1.85rem;
    min-height: 3rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--btn-dash-bg);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(1, 29, 77, 0.22);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.scheduling .scheduling__cta:hover {
    background: var(--btn-dash-bg-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(1, 29, 77, 0.26);
}

@media (max-width: 768px) {
    .scheduling__cards {
        grid-template-columns: 1fr;
    }

    .scheduling__cta {
        width: 100%;
        max-width: 22rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scheduling__cta:hover {
        transform: none;
    }
}

/* Learner testimonials — blue cards / white inner copy, drag carousel, red badge & dots */
.testimonials {
    --test-blue: #011d4d;
    --test-red: #ab1320;
    --test-black: #0f0f0f;
    --test-orange-star: #f7931e;
    --testimonial-card-bg: #eceff3;
    padding: clamp(3rem, 7vw, 5.25rem) 0;
}

/* Online California driver ed info section */
.driver-ed-online {
    padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 7vw, 5rem);
}

.driver-ed-online__inner {
    width: min(1140px, 100% - 2rem);
    margin-inline: auto;
}

.driver-ed-online__card {
    background: linear-gradient(135deg, rgba(1, 29, 77, 0.04) 0%, rgba(1, 29, 77, 0.07) 100%);
    border: 1px solid rgba(1, 29, 77, 0.12);
    border-radius: 18px;
    padding: clamp(1.4rem, 3.5vw, 2.2rem);
    box-shadow: 0 16px 40px rgba(1, 29, 77, 0.1);
}

.driver-ed-online__title {
    margin: 0 0 0.9rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    color: #011d4d;
}

.driver-ed-online__lead,
.driver-ed-online__note {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.75;
    color: #011d4d;
}

.driver-ed-online__list {
    margin: 1rem 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.45rem;
}

.driver-ed-online__list li {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #011d4d;
}

.testimonials__inner {
    width: min(1180px, 100% - 2rem);
    margin-inline: auto;
    text-align: center;
}

.testimonials__badge {
    display: inline-block;
    margin-bottom: 0.85rem;
    padding: 0.42rem 0.95rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--test-red);
    border-radius: 4px;
}

.testimonials__title {
    margin: 0 0 2rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 4vw, 2.05rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--test-black);
}

.testimonials__viewport {
    position: relative;
    overflow: hidden;
    margin: 0 -0.35rem;
    padding: 0 0.35rem 0.5rem;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.testimonials__viewport.is-dragging {
    cursor: grabbing;
}

.testimonials__viewport:focus-visible {
    outline: 2px solid rgba(1, 29, 77, 0.45);
    outline-offset: 4px;
}

.testimonials__track {
    --testimonial-gap: 22px;
    display: flex;
    gap: var(--testimonial-gap);
    will-change: transform;
    transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.testimonials__viewport.is-dragging .testimonials__track {
    transition: none;
}

.testimonials__slide {
    flex: 0 0 calc((100% - 2 * var(--testimonial-gap)) / 3);
    min-width: 0;
    box-sizing: border-box;
    padding: 1.2rem clamp(1rem, 2vw, 1.35rem);
    text-align: left;
    border-radius: 14px;
    background: var(--testimonial-card-bg);
    border: 1px solid rgba(1, 29, 77, 0.1);
    box-shadow: 0 10px 28px rgba(1, 29, 77, 0.1);
}

.testimonials__slide-top {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.95rem;
}

.testimonials__avatar {
    flex-shrink: 0;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    background: #011d4d;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(1, 29, 77, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

.testimonials__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-end;
}

.testimonials__name {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

.testimonials__stars {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.testimonials__date {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
}

.testimonials__body-wrap {
    position: relative;
}

.testimonials__body {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.65;
}

.testimonials__body-wrap--collapsible:not(.is-expanded) .testimonials__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.testimonials__readmore {
    margin: 0.35rem 0 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: #ab1320;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.testimonials__readmore:hover {
    color: #bb1121;
}

.testimonials__readmore:focus-visible {
    outline: 2px solid var(--test-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.testimonials__body-wrap.is-expanded .testimonials__readmore::after {
    content: '';
}

.testimonials__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.85rem;
    padding: 0 0.5rem;
}

.testimonials__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 15, 15, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.testimonials__dot:hover {
    transform: scale(1.15);
    background: rgba(15, 15, 15, 0.35);
}

.testimonials__dot.is-active {
    background: #011d4d;
    transform: scale(1.08);
}

.testimonials__dot:focus-visible {
    outline: 2px solid var(--test-blue);
    outline-offset: 2px;
}

@media (max-width: 959px) {
    .testimonials__slide {
        flex: 0 0 calc((100% - var(--testimonial-gap)) / 2);
    }
}

@media (max-width: 640px) {
    .testimonials__slide {
        flex: 0 0 100%;
    }

    .testimonials__viewport {
        margin: 0;
        padding: 0;
    }

    .testimonials__slide {
        box-shadow: 0 10px 24px rgba(1, 29, 77, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials__track {
        transition-duration: 0.01ms;
    }
}

/* Homepage — 3-step process (permit path) */
.work-process {
    --wp-navy: #0f172a;
    --wp-navy-soft: #011d4d;
    --wp-blue-bright: #2563eb;
    --wp-blue-light: #93c5fd;
    --wp-green: #059669;
    --wp-purple: #7c3aed;
    --wp-grey: #64748b;
    --wp-pill-bg: #e0ecff;
    --wp-pill-text: #1e40af;
    position: relative;
    padding: clamp(2rem, 5vw, 3rem) 0;
    overflow-x: visible;
    overflow-y: hidden;
}

.work-process__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: #f8fafc;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(37, 99, 235, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 80% 90%, rgba(124, 58, 237, 0.06) 0%, transparent 42%),
        radial-gradient(circle at 1px 1px, rgba(1, 29, 77, 0.045) 1px, transparent 0);
    background-size: auto auto, auto auto, 22px 22px;
}

.work-process__inner {
    position: relative;
    z-index: 1;
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
}

.work-process__header {
    text-align: center;
    margin-bottom: clamp(2rem, 4.5vw, 3rem);
    max-width: 44rem;
    margin-inline: auto;
}

.work-process__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    padding: 0.4rem 0.85rem 0.4rem 0.4rem;
    border-radius: 999px;
    background: var(--wp-pill-bg);
    border: 1px solid rgba(37, 99, 235, 0.2);
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.06);
}

.work-process__pill-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #1d4ed8, var(--wp-blue-bright));
    color: #fff;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.work-process__pill-text {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp-pill-text);
    line-height: 1.2;
}

.work-process__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 3.6vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.work-process__title-line {
    color: var(--wp-navy);
}

.work-process__title-accent {
    color: var(--wp-blue-bright);
}

.work-process__subtitle {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(0.95rem, 2vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp-grey);
}

.work-process__track {
    max-width: 1040px;
    margin-inline: auto;
    overflow: visible;
}

.work-process__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0 clamp(0.35rem, 1.2vw, 0.85rem);
}

.work-process__between {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    align-self: center;
    min-width: clamp(52px, 8vw, 88px);
    color: var(--wp-blue-bright);
}

.work-process__dash-line {
    flex: 1;
    min-width: 0;
    height: 0;
    border-bottom: 3.5px dotted var(--wp-blue-light);
    opacity: 0.95;
}

.work-process__between-arrow {
    font-size: clamp(2rem, 3vw, 2rem);
    opacity: 0.9;
    flex-shrink: 0;
}

.work-process-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    padding: 2.15rem 1.15rem 1.05rem;
    background: #fff;
    border: 1.5px solid #dbe5f1;
    border-radius: 20px 20px 52px 52px / 20px 20px 34px 34px;
    box-shadow:
        0 4px 6px rgba(1, 29, 77, 0.04),
        0 12px 28px rgba(1, 29, 77, 0.08);
    text-align: center;
    overflow: visible;
    min-height: 408px;
}

.work-process-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: inherit;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
}

.work-process-card--blue {
    border-color: rgba(59, 130, 246, 0.45);
}

.work-process-card--green {
    border-color: rgba(16, 185, 129, 0.4);
}

.work-process-card--purple {
    border-color: rgba(139, 92, 246, 0.42);
}

.work-process-card__step-num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #1e40af, var(--wp-blue-bright));
    color: #fff;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.work-process-card__step-num::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 9px;
    transform: translateX(-50%);
    background: currentColor;
    opacity: 0.32;
}

.work-process-card__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.work-process-card__icon-main {
    margin: 0.35rem 0 1rem;
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.35rem, 5vw, 2.85rem);
    line-height: 1;
}

.work-process-card--blue .work-process-card__icon-main {
    color: var(--wp-blue-bright);
    background: rgba(37, 99, 235, 0.09);
}

.work-process-card--green .work-process-card__icon-main {
    color: var(--wp-green);
    background: rgba(5, 150, 105, 0.1);
}

.work-process-card--purple .work-process-card__icon-main {
    color: var(--wp-purple);
    background: rgba(124, 58, 237, 0.1);
}

.work-process-card__title {
    margin: 0 0 0.55rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wp-navy-soft);
    line-height: 1.28;
}

.work-process-card__title::after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 3px;
    border-radius: 999px;
    margin: 0.65rem auto 0;
    background: #3b82f6;
    opacity: 0.72;
}

.work-process-card--green .work-process-card__title::after {
    background: #10b981;
}

.work-process-card--purple .work-process-card__title::after {
    background: #8b5cf6;
}

.work-process-card__text {
    margin: 0 0 auto;
    padding-bottom: 0.7rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.62;
    color: var(--wp-grey);
}

.work-process-card__icon-foot {
    margin-top: 0.25rem;
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.92;
}

.work-process-card--blue .work-process-card__icon-foot {
    color: var(--wp-blue-bright);
}

.work-process-card--green .work-process-card__icon-foot {
    color: var(--wp-green);
}

.work-process-card--purple .work-process-card__icon-foot {
    color: var(--wp-purple);
}

.work-process-card__swoosh {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 6.2rem;
    pointer-events: none;
    z-index: 1;
    border-radius: 0 0 999px 999px / 0 0 80px 80px;
}

.work-process-card--blue .work-process-card__swoosh {
    background:
        radial-gradient(130% 190% at 50% 100%, transparent 49.2%, rgba(37, 99, 235, 0.34) 50%, transparent 50.8%),
        radial-gradient(130% 190% at 50% 100%, rgba(37, 99, 235, 0.17) 0%, rgba(37, 99, 235, 0.08) 47%, rgba(37, 99, 235, 0) 72%);
}

.work-process-card--green .work-process-card__swoosh {
    background:
        radial-gradient(130% 190% at 50% 100%, transparent 49.2%, rgba(5, 150, 105, 0.31) 50%, transparent 50.8%),
        radial-gradient(130% 190% at 50% 100%, rgba(5, 150, 105, 0.17) 0%, rgba(5, 150, 105, 0.08) 47%, rgba(5, 150, 105, 0) 72%);
}

.work-process-card--purple .work-process-card__swoosh {
    background:
        radial-gradient(130% 190% at 50% 100%, transparent 49.2%, rgba(124, 58, 237, 0.3) 50%, transparent 50.8%),
        radial-gradient(130% 190% at 50% 100%, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.07) 47%, rgba(124, 58, 237, 0) 72%);
}

.work-process__timeline {
    position: relative;
    margin-top: clamp(1.55rem, 3.8vw, 2.35rem);
    min-height: clamp(2.5rem, 4.8vw, 3.1rem);
    overflow: visible;
}

.work-process__timeline-connect-svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    min-height: 2.75rem;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.work-process__timeline-connect-svg--compact {
    display: none;
}

.work-process__timeline-nodes {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0 clamp(0.35rem, 1.2vw, 0.85rem);
    min-height: clamp(2.5rem, 4.8vw, 3.1rem);
    pointer-events: none;
}

.work-process__timeline-spacer {
    min-width: clamp(52px, 8vw, 88px);
}

.work-process__timeline-node {
    display: flex;
    justify-content: center;
    align-items: center;
}

.work-process__node-ring {
    display: block;
    width: 2.05rem;
    height: 2.05rem;
}

.work-process__timeline-path {
    fill: none;
    stroke: rgba(111, 144, 216, 0.78);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3 8;
}

.work-process__timeline-path--second {
    stroke: rgba(139, 92, 246, 0.62);
}

.work-process__ring {
    fill: none;
    stroke-width: 7;
    paint-order: stroke fill;
}

.work-process__ring--blue {
    stroke: var(--wp-blue-bright);
}

.work-process__ring--green {
    stroke: var(--wp-green);
}

.work-process__ring--purple {
    stroke: var(--wp-purple);
}

@media (max-width: 992px) {
    .work-process__row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
    }

    .work-process-card {
        max-width: 340px;
        min-height: 388px;
    }

    .work-process__between {
        flex-direction: column;
        min-width: 0;
        width: 2.4rem;
        padding: 0.9rem 0 0.65rem;
        margin: 0.35rem 0 0.2rem;
        color: var(--wp-blue-bright);
        align-items: center;
        justify-content: center;
        overflow: visible;
        position: relative;
        z-index: 6;
    }

    .work-process__dash-line {
        width: 0;
        height: clamp(1.65rem, 4.8vw, 2.3rem);
        border-bottom: none;
        border-left: 3.5px dotted var(--wp-blue-light);
        flex: none;
    }

    .work-process__between-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        line-height: 1;
        transform: rotate(90deg);
        transform-origin: center;
    }

    .work-process__timeline-connect-svg--desktop {
        display: none;
    }

    .work-process__timeline-connect-svg--compact {
        display: block;
    }

    .work-process__timeline {
        width: 100%;
        max-width: min(340px, 100%);
        margin-inline: auto;
        min-height: 2.85rem;
        margin-top: 1rem;
    }

    .work-process__timeline-nodes {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        justify-items: center;
        width: 100%;
        min-height: 2.85rem;
        gap: 0;
    }

    .work-process__timeline-spacer {
        display: none;
    }

    .work-process__node-ring {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* Site footer — matches top bar brand color; red social circles */
.site-footer {
    --footer-social-red: var(--color-crimson-hover);
    --footer-line: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    margin-top: auto;
    background: var(--accent-blue);
    color: #fff;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.site-footer__inner {
    width: min(1180px, 100% - 2rem);
    margin-inline: auto;
    padding: clamp(1.5rem, 3.5vw, 2.35rem) 0 1.75rem;
}

.site-footer__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: start;
}

.site-footer__col--brand .site-footer__logo-link {
    display: inline-block;
    margin-top: -0.15rem;
    margin-bottom: 0.65rem;
    text-decoration: none;
}

.site-footer__logo-link:hover .site-footer__logo-badge {
    filter: brightness(1.06);
}

.site-footer__logo-badge {
    display: block;
    width: clamp(150px, 30vw, 198px);
    height: auto;
}

.site-footer__logo-svg {
    display: block;
    width: 100%;
    height: auto;
}

.site-footer__logo-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.site-footer__brand-text {
    margin: 0.9rem 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    max-width: 24rem;
}

.site-footer__brand-text:empty {
    display: none;
    margin: 0;
}

.site-footer__social {
    margin: 0;
    padding: 0;
    padding-left: clamp(0.65rem, 2.5vw, 2rem);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-start;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: var(--footer-social-red);
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.site-footer__social-link:hover {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.site-footer__heading {
    margin: 0 0 1.1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}

.site-footer__heading--support {
    margin-top: 0.9rem;
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.site-footer__list a {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-footer__list a:hover {
    color: #fff;
    padding-left: 3px;
    text-decoration: none;
}

.site-footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8925rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.site-footer__contact a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.site-footer__contact a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__contact-icon {
    flex-shrink: 0;
    margin-top: 0.08rem;
    color: #fff;
    opacity: 0.95;
    display: flex;
}

.site-footer__bar {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--footer-line);
}

.site-footer__footer-links {
    margin: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.75;
}

.site-footer__footer-links a {
    color: inherit;
    text-decoration: none;
}

.site-footer__footer-links a:hover {
    text-decoration: underline;
}

.site-footer__col--links {
    padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.site-footer__footer-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1.15rem;
}

.site-footer__footer-grid a {
    display: inline-block;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-size: 1rem;
}

.site-footer__footer-grid a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__legal {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
}

.site-footer__sep {
    color: rgba(255, 255, 255, 0.55);
}

.site-footer__credit {
    display: inline;
    font-weight: 500;
}

.site-footer__credit a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__credit a:hover {
    color: #fff;
}

@media (max-width: 1024px) {
    .site-footer__columns {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 1rem;
    }

    .site-footer__col--brand {
        grid-column: 1 / -1;
    }

    .site-footer__footer-links {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .site-footer__columns {
        grid-template-columns: 1fr;
    }

    .site-footer__col--brand {
        grid-column: auto;
        max-width: none;
    }

    .site-footer__footer-links {
        text-align: center;
    }

    .site-footer__footer-grid {
        grid-template-columns: 1fr;
    }

    .site-footer__brand-text {
        max-width: none;
    }

    .site-footer__sep {
        display: block;
        margin: 0.35rem 0;
    }
}

/* Slightly tighter spacing between homepage sections */
.main--home>.work-process,
.main--home>.lesson-chapters,
.main--home>.about-block,
.main--home>.scheduling,
.main--home>.testimonials {
    padding-top: clamp(2.3rem, 4.8vw, 3.4rem) !important;
    padding-bottom: clamp(2.3rem, 4.8vw, 3.4rem) !important;
}

.main--home>.scheduling {
    padding-top: clamp(1.4rem, 2.8vw, 2rem) !important;
}

@media (max-width: 900px) {
    .scheduling__title {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__social-link:hover {
        transform: none;
    }

    .site-footer__list a:hover {
        padding-left: 0;
    }
}

/* ——— Course details page ——— */
.main--course-details {
    background: var(--surface-muted);
}

.course-details-hero {
    --cd-hero-navy: #011d4d;
    --cd-hero-blue: #011d4d;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eefc 45%, #f4f6f9 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.12);
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 2.75rem);
}

.course-details-hero__inner {
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}

.course-details-hero__eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.course-details-hero__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--cd-hero-navy, #011d4d);
    line-height: 1.15;
}

.course-details-hero__lead {
    margin: 0 auto 1.35rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 40rem;
}

.course-details-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.course-details-hero__stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    background: var(--white);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--text-dark);
    border: 1px solid rgba(1, 29, 77, 0.12);
    box-shadow: 0 2px 10px rgba(1, 29, 77, 0.06);
}

.course-details-hero__stats strong {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: var(--brand-red);
}

.course-details-body {
    padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.course-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(22rem, 100%);
    gap: clamp(1.75rem, 4vw, 2.75rem);
    align-items: start;
}

.course-details-page-title {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 0.8rem;
    color: #011d4d;
    letter-spacing: -0.02em;
    text-align: center;
}

.course-details-curriculum {
    max-width: none;
    margin: 0;
    text-align: left;
}

.course-details-curriculum__title {
    margin: 0 0 0.8rem;
    text-align: left;
}

.course-details-curriculum__intro {
    margin: 0 0 1.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 40rem;
}

.main--course-details .all_lesson-chapters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.main--course-details .all_lesson-chapters .sin {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    box-shadow: 0 8px 20px rgba(1, 29, 77, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.main--course-details .all_lesson-chapters .serial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    min-height: 100%;
    background: #011d4d;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0;
    line-height: 1;
}

.main--course-details .all_lesson-chapters .sin .lesson-chapters__desc {
    padding: 13px 14px;
}

.course-details-lessons__cta-wrap {
    margin: 1.25rem 0 0;
    text-align: center;
}

.course-details-lessons__cta-wrap .lesson-chapters__cta {
    margin-top: 0;
    align-self: center;
}

@media (max-width: 576px) {
    .main--course-details .all_lesson-chapters {
        grid-template-columns: 1fr;
    }
}

.course-details-lessons {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.course-details-lesson {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 20px rgba(1, 29, 77, 0.1);
    position: relative;
    overflow: hidden;
}

.course-details-lesson::before {
    content: none;
}

.course-details-lesson__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 110px;
    background: #011d4d;
    padding: 0 0.45rem;
}

.course-details-lesson__badge {
    display: block;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: none;
}

.course-details-lesson__chapter {
    display: none;
}

.course-details-lesson__title {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 700;
    color: #011d4d;
    line-height: 1.3;
    text-transform: capitalize;
    flex: 1 1 auto;
    min-width: 0;
}

.course-details-lesson__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
    padding: 0.58rem 0.8rem;
}

.course-details-lesson__desc {
    display: none;
}

.course-details-lesson__cta {
    display: inline-flex;
    align-self: center;
    margin-top: 0;
    margin-left: auto;
    padding: 0.34rem 0.85rem;
    flex-shrink: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background: var(--btn-dash-bg);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.course-details-lesson__cta:hover {
    color: var(--white);
    background: var(--btn-dash-bg-hover);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(1, 29, 77, 0.22);
}

.course-details-aside__sticky {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: calc(var(--header-offset) + 2rem);
    margin-top: 1.15rem;
}

.course-details-info {
    margin: 0;
    padding: 1.35rem 1.4rem;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(1, 29, 77, 0.05);
}

.course-details-info__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #011d4d;
    line-height: 1.3;
}

.course-details-info__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #4a5568;
}

.course-details-info__link {
    color: var(--brand-red);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.course-details-info__link:hover {
    color: var(--color-crimson-hover);
    border-bottom-color: currentColor;
}

.course-details-cta-band {
    background: linear-gradient(90deg, #011d4d 0%, #01356b 100%);
    padding: clamp(1.5rem, 4vw, 2.25rem) 0;
}

.course-details-cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.course-details-cta-band__text {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 700;
    color: var(--white);
}

.course-details-cta-band__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    background: var(--btn-dash-bg);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.28);
}

.course-details-cta-band__btn:hover {
    transform: translateY(-1px);
    background: var(--btn-dash-bg-hover);
    box-shadow: 0 6px 20px rgba(1, 29, 77, 0.22);
    text-decoration: none;
    color: var(--white);
}

@media (max-width: 991px) {
    .course-details-layout {
        grid-template-columns: 1fr;
    }

    .course-details-aside__sticky {
        position: static;
        margin-top: 0;
    }
}

@media (max-width: 560px) {
    .course-details-lesson {
        flex-direction: column;
    }

    .course-details-lesson__marker {
        width: 100%;
        min-height: 2.15rem;
        flex: 0 0 auto;
    }

    .course-details-lesson__body {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .course-details-lesson__cta {
        margin-left: auto;
    }

    .course-details-cta-band__inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-details-cta-band__btn:hover {
        transform: none;
    }
}

/* ——— FAQs page ——— */
.main--faqs {
    background: var(--surface-muted);
}

.faqs-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eefc 45%, #f4f6f9 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.12);
    padding: clamp(2rem, 4vw, 2.75rem) 0;
}

.faqs-hero__inner {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.faqs-hero__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 3.5vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #011d4d;
    line-height: 1.2;
}

.faqs-hero__lead {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.faqs-shell {
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.faqs-shell__inner {
    max-width: 960px;
    margin-inline: auto;
}

.faqs-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}

.faqs-tabs:focus-within {
    outline: none;
}

.faqs-tab {
    flex: 1 1 0;
    min-width: 7.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem 1.1rem;
    margin: 0;
    border: 1px solid #d4dbe8;
    border-bottom: none;
    border-radius: 0;
    background: var(--white);
    color: var(--text-dark);
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.faqs-tab+.faqs-tab {
    border-left: none;
}

.faqs-tab:first-child {
    border-radius: 12px 0 0 0;
}

.faqs-tab:last-child {
    border-radius: 0 12px 0 0;
}

.faqs-tab:hover {
    background: #f8fafc;
    border-color: #c5d0e8;
}

.faqs-tab.is-active,
.faqs-tab[aria-selected="true"] {
    background: var(--btn-dash-bg);
    color: var(--white);
    border-color: var(--btn-dash-bg);
    box-shadow: 0 -4px 20px rgba(1, 29, 77, 0.2);
    position: relative;
    z-index: 1;
}

.faqs-tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    transition: color 0.2s;
}

.faqs-tab.is-active .faqs-tab__icon,
.faqs-tab[aria-selected="true"] .faqs-tab__icon {
    color: var(--white);
}

.faqs-tab__label {
    max-width: 11rem;
}

.faqs-panels {
    position: relative;
    z-index: 0;
}

.faqs-panel {
    background: var(--white);
    border: 1px solid #d4dbe8;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 32px rgba(1, 29, 77, 0.08);
}

.faqs-panel[hidden] {
    display: none;
}

.faqs-panel__inner {
    padding: 0.25rem 0 0.5rem;
}

.faqs-item {
    border-bottom: 1px dashed #c8d0dc;
}

.faqs-item:last-child {
    border-bottom: none;
}

.faqs-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.45;
}

.faqs-item__summary::-webkit-details-marker {
    display: none;
}

.faqs-item__question {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.faqs-item__chev {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: #5c6578;
    transition: transform 0.2s ease;
}

.faqs-item__chev svg {
    transform: rotate(-90deg);
}

.faqs-item[open] .faqs-item__chev svg {
    transform: rotate(0deg);
}

.faqs-item__answer {
    padding: 0 1.35rem 1.2rem;
    margin-top: -0.25rem;
}

.faqs-item__answer p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #4a5568;
    max-width: 52rem;
}

.faqs-inline-link {
    color: var(--brand-red);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.35);
}

.faqs-inline-link:hover {
    color: var(--color-crimson-hover);
    border-bottom-color: currentColor;
}

.faqs-footer-cta {
    background: var(--white);
    border-top: 1px solid #e2e8f0;
    padding: clamp(1.5rem, 4vw, 2rem) 0;
}

.faqs-footer-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.faqs-footer-cta__text {
    margin: 0;
    font-size: 1rem;
    color: var(--text-muted);
}

.faqs-footer-cta__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.25rem;
    background: var(--btn-dash-bg);
    color: var(--white);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s;
}

.faqs-footer-cta__link:hover {
    background: var(--btn-dash-bg-hover);
    color: var(--white);
    text-decoration: none;
}

@media (max-width: 640px) {
    .faqs-tab {
        min-width: 7.5rem;
        font-size: 0.6875rem;
        padding: 0.85rem 0.45rem 0.95rem;
    }

    .faqs-tab__icon svg {
        width: 24px;
        height: 24px;
    }

    .faqs-item__summary {
        padding: 1rem 1rem;
    }

    .faqs-item__answer {
        padding: 0 1rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .faqs-item__chev,
    .faqs-item__chev svg {
        transition: none;
    }
}

/* ——— Auth (sign in / sign up) ——— */
.main--auth {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #e8eefc 0%, #f4f6f9 40%, #eef2fb 100%);
    min-height: 0;
}

body.auth-modal-open {
    overflow: hidden;
}

.auth-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.auth-page__inner {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

.auth-card {
    --auth-navy: #011d4d;
    --auth-blue: #011d4d;
    --auth-blue-dark: #010b26;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: min(520px, calc(100vh - var(--header-offset) - 4rem));
    border-radius: 22px;
    overflow: hidden;
    background: var(--white);
    box-shadow:
        0 4px 6px rgba(1, 29, 77, 0.04),
        0 24px 48px rgba(1, 29, 77, 0.12);
}

.auth-card__promo {
    position: relative;
    flex: 0 0 clamp(240px, 38%, 340px);
    background: linear-gradient(155deg, #01356b 0%, var(--auth-blue) 45%, var(--auth-blue-dark) 100%);
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem);
}

.auth-card__promo-body {
    position: relative;
    width: 100%;
    max-width: 16rem;
}

.auth-promo-panel__title {
    margin: 0 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white);
    line-height: 1.15;
}

.auth-promo-panel__text {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

.auth-card__forms {
    flex: 1;
    min-width: 0;
    margin-left: clamp(-3.5rem, -8vw, -2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3.25rem);
    background: var(--white);
}

.auth-forms__wrap {
    width: 100%;
    max-width: 22rem;
}

.auth-form__heading {
    margin: 0 0 0.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--auth-navy);
    letter-spacing: -0.02em;
}

.auth-form__error {
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #7f1d1d;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

/* Bootstrap login success banner — full width above site header */
.login-success-toast {
    position: relative;
    z-index: calc(var(--z-site-header) + 5);
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.login-success-toast .alert {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    padding: 0.75rem 3rem 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: none;
}

.login-success-toast .alert .btn-close {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

.auth-form__hint {
    margin: 0 0 1.35rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.auth-field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.auth-req {
    color: var(--accent-red);
    text-decoration: none;
    font-weight: 700;
    margin-left: 0.1em;
}

.auth-field__input {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid #d4dbe8;
    border-radius: 999px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-field__input::placeholder {
    color: #9aa4b2;
}

.auth-field__input:hover {
    border-color: #b8c4dc;
}

.auth-field__input:focus {
    border-color: var(--auth-blue);
    box-shadow: 0 0 0 3px rgba(1, 29, 77, 0.15);
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.75rem 1.25rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.auth-btn--ghost-light {
    width: auto;
    min-width: 8.5rem;
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.85);
}

.auth-btn--ghost-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
    color: var(--white);
}

.auth-btn--outline {
    background: var(--btn-dash-bg);
    color: var(--white);
    border-color: var(--btn-dash-bg);
    margin-top: 0.5rem;
}

.auth-btn--outline:hover {
    background: var(--btn-dash-bg-hover);
    border-color: var(--btn-dash-bg-hover);
    color: var(--white);
}

.auth-form__footer {
    margin: 1rem 0 0;
    text-align: left;
}

.auth-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--auth-blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.auth-link:hover {
    color: var(--auth-blue-dark);
    border-bottom-color: currentColor;
}

.auth-link--btn {
    display: inline;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--auth-blue);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.35);
    cursor: pointer;
    text-align: left;
}

.auth-link--btn:hover {
    color: var(--auth-blue-dark);
    border-bottom-color: currentColor;
}

.auth-btn--muted {
    width: 100%;
    margin-top: 0.5rem;
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.auth-btn--muted:hover {
    background: #e8edf5;
    color: #334155;
    border-color: #cbd5e1;
}

.auth-btn--full {
    width: 100%;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.auth-modal[hidden] {
    display: none !important;
}

.auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.auth-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem 1.5rem 1.35rem;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    border: 1px solid #e2e8f0;
}

.auth-modal__close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.auth-modal__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.auth-modal__title {
    margin: 0 0 0.5rem;
    padding-right: 2rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.auth-modal__text {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.auth-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-modal__actions .auth-btn--outline {
    margin-top: 0;
}

.auth-modal__fake-email {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px dashed #94a3b8;
    border-radius: 12px;
    text-align: center;
}

.auth-modal__email-link {
    display: inline;
    padding: 0;
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-blue);
    background: none;
    border: none;
    border-bottom: 2px solid rgba(1, 29, 77, 0.4);
    cursor: pointer;
    text-decoration: none;
}

.auth-modal__email-link:hover {
    color: var(--auth-blue-dark);
    border-bottom-color: currentColor;
}

.auth-reset-sheet {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.auth-reset-sheet[hidden] {
    display: none !important;
}

.auth-reset-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 29, 77, 0.65);
    backdrop-filter: blur(6px);
}

.auth-reset-sheet__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 24rem;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.22);
    border: 1px solid #e2e8f0;
}

.auth-reset-sheet__close {
    top: 0.75rem;
    right: 0.75rem;
}

.auth-reset-sheet__title {
    margin: 0 0 0.35rem;
    padding-right: 2rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.auth-reset-sheet__lead {
    margin: 0 0 1.15rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.auth-reset-sheet__form .auth-btn--outline {
    margin-top: 0.35rem;
}

.auth-form__fineprint {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #6b7280;
}

.auth-form[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .auth-page__inner {
        width: min(100% - 1.25rem, 22.25rem);
    }

    .auth-card {
        flex-direction: column;
        width: 100%;
        min-height: 40rem;
        border-radius: 18px;
        margin-inline: auto;
    }

    .auth-card__promo {
        flex: none;
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
        padding: 1.75rem 1.5rem 2.5rem;
        min-height: 0;
    }

    .auth-card__promo-body {
        max-width: none;
    }

    .auth-card__forms {
        margin-left: 0;
        margin-top: -1.25rem;
        padding: 0 1.35rem 2.25rem;
        position: relative;
        z-index: 2;
    }

    .auth-forms__wrap {
        max-width: none;
        padding-top: 0.5rem;
    }

    .auth-form__heading {
        margin-top: 0.4rem;
    }

    .auth-form__hint {
        margin-bottom: 2rem;
    }

    .auth-form__footer {
        text-align: center;
    }

    .auth-link--btn {
        display: inline-block;
        text-align: center;
    }

    .auth-field-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .auth-field__input,
    .auth-btn,
    .auth-link {
        transition: none;
    }

    .site-header__logo-link:hover .site-header__logo-badge {
        transform: none;
    }

    .lesson-chapters__cta:hover,
    .course-details-lesson__cta:hover {
        transform: none;
    }
}

/* ——— Permit page ——— */
.main--permit {
    background: var(--surface-muted);
}

.permit-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #e4ebfb 50%, #f8fafc 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.1);
    padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.25rem);
}

.permit-hero__inner {
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}

.permit-hero__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.permit-hero__title {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.18;
    color: #011d4d;
}

.permit-hero__motto {
    margin: 0 auto 1.35rem;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 44rem;
}

.permit-hero__motto strong {
    color: #011d4d;
    font-weight: 800;
}

.permit-hero__pill {
    display: inline-block;
    padding: 0.2em 0.55em;
    margin: 0 0.1em;
    font-weight: 700;
    font-size: 0.92em;
    color: var(--brand-red);
    background: rgba(1, 29, 77, 0.08);
    border-radius: 6px;
}

.permit-hero__dot {
    color: #9aa4b2;
    font-weight: 400;
}

.permit-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.permit-hero__facts li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--white);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #011d4d;
    border: 1px solid #d4dbe8;
    box-shadow: 0 2px 8px rgba(1, 29, 77, 0.05);
}

.permit-hero__fact-k {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.permit-jump {
    position: sticky;
    top: var(--header-offset);
    z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
}

.permit-jump__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0;
    font-size: 0.8125rem;
}

.permit-jump__label {
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.25rem;
}

.permit-jump__link {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
    border: 1px solid rgba(1, 29, 77, 0.25);
    background: rgba(1, 29, 77, 0.04);
    transition: background 0.15s, border-color 0.15s;
}

.permit-jump__link:hover {
    background: rgba(1, 29, 77, 0.1);
    border-color: var(--brand-red);
}

.permit-body {
    padding: 1rem 0 clamp(2.5rem, 6vw, 4rem);
}

.permit-phases {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2rem);
    max-width: 800px;
    margin-inline: auto;
}

.permit-phase {
    background: var(--white);
    border-radius: 18px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 36px rgba(1, 29, 77, 0.07);
    overflow: hidden;
}

.permit-phase--1 {
    border-top: 4px solid #01356b;
}

.permit-phase--2 {
    border-top: 4px solid var(--brand-red);
}

.permit-phase--3 {
    border-top: 4px solid #011d4d;
}

.permit-phase__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.35rem 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, var(--white) 100%);
    border-bottom: 1px solid #eef2f7;
}

.permit-phase__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    background: rgba(1, 29, 77, 0.08);
    color: var(--brand-red);
}

.permit-phase--3 .permit-phase__glyph {
    background: rgba(1, 29, 77, 0.08);
    color: #011d4d;
}

.permit-phase__step {
    margin: 0 0 0.2rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.permit-phase__title {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.5vw, 1.6rem);
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.permit-phase__letter {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(1, 29, 77, 0.12);
    user-select: none;
}

.permit-phase--3 .permit-phase__letter {
    color: rgba(1, 29, 77, 0.12);
}

.permit-phase__intro {
    margin: 0;
    padding: 1rem 1.35rem 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.permit-phase__list {
    margin: 0;
    padding: 0.75rem 1.35rem 1.35rem;
    list-style: none;
}

.permit-phase__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 0.85rem;
    padding: 0.65rem 0;
    border-bottom: 1px dashed #d4dbe8;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #334155;
}

.permit-phase__item:last-child {
    border-bottom: none;
}

.permit-phase__check {
    color: var(--brand-red);
    margin-top: 0.1rem;
}

.permit-phase__footer {
    margin: 0;
    padding: 0 1.35rem 1.35rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #475569;
    border-top: 1px solid #eef2f7;
    padding-top: 1rem;
}

.permit-inline-link {
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.35);
}

.permit-inline-link:hover {
    color: var(--color-crimson-hover);
    border-bottom-color: currentColor;
}

.permit-cta {
    background: linear-gradient(100deg, #011d4d 0%, #011d4d 55%, #01356b 100%);
    padding: clamp(2rem, 5vw, 2.75rem) 0;
}

.permit-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    max-width: 900px;
    margin-inline: auto;
}

.permit-cta__title {
    margin: 0 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
}

.permit-cta__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    max-width: 28rem;
}

.permit-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.permit-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}

.permit-cta__btn--primary {
    background: var(--white);
    color: var(--brand-red);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.permit-cta__btn--primary:hover {
    transform: translateY(-1px);
    color: var(--color-crimson-hover);
    text-decoration: none;
}

.permit-cta__btn--ghost {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.55);
}

.permit-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    text-decoration: none;
    color: var(--white);
}

@media (max-width: 640px) {
    .permit-phase__head {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .permit-phase__letter {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: center;
    }

    .permit-jump__inner {
        gap: 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .permit-cta__btn--primary:hover {
        transform: none;
    }
}

/* ——— Driver license (provisional) page ——— */
.main--driver-license {
    background: var(--surface-muted);
}

.driver-license-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #e4ebfb 50%, #f8fafc 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.1);
    padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.25rem);
}

.driver-license-hero__inner {
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}

.driver-license-hero__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.driver-license-hero__title {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 3.8vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.18;
    color: #011d4d;
}

.driver-license-hero__lead {
    margin: 0 auto 1.35rem;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 42rem;
}

.driver-license-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.driver-license-hero__facts li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--white);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #011d4d;
    border: 1px solid #d4dbe8;
    box-shadow: 0 2px 8px rgba(1, 29, 77, 0.05);
}

.driver-license-hero__fact-k {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.driver-license-body {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.driver-license-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(20rem, 100%);
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
    max-width: 1040px;
    margin-inline: auto;
}

.driver-license-layout--single {
    display: block;
    max-width: 760px;
    margin-inline: auto;
}

.driver-license-layout--single .driver-license-card {
    width: min(100%, 760px);
    max-width: 760px;
    margin-inline: auto;
}

.driver-license-card {
    background: var(--white);
    border-radius: 18px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 36px rgba(1, 29, 77, 0.07);
    padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
    border-top: 4px solid var(--brand-red);
}

.driver-license-card__title {
    margin: 0 0 1.15rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.driver-license-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.driver-license-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px dashed #c8d0dc;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #334155;
}

.driver-license-list__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.driver-license-list__icon {
    color: var(--brand-red);
    margin-top: 0.15rem;
}

.driver-license-list__item--appt {
    padding-top: 1.1rem;
    margin-top: 0.25rem;
    border-top: 1px solid #e8edf5;
    border-bottom: none;
    background: linear-gradient(180deg, rgba(1, 29, 77, 0.04) 0%, transparent 100%);
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    border-radius: 12px;
}

.driver-license-list__appt-text strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #011d4d;
    font-weight: 700;
}

.driver-license-link {
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.35);
    word-break: break-word;
}

.driver-license-link:hover {
    color: var(--color-crimson-hover);
    border-bottom-color: currentColor;
}

.driver-license-aside__card {
    background: var(--white);
    border: 1px solid #d4dbe8;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 6px 22px rgba(1, 29, 77, 0.06);
    position: sticky;
    top: calc(var(--header-offset) + 1rem);
}

.driver-license-aside__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #011d4d;
}

.driver-license-aside__text {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.driver-license-aside__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.driver-license-aside__links li {
    margin-bottom: 0.45rem;
}

.driver-license-aside__links a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 29, 77, 0.3);
}

.driver-license-aside__links a:hover {
    color: var(--color-crimson-hover);
    border-bottom-color: currentColor;
}

.driver-license-cta {
    background: linear-gradient(100deg, #011d4d 0%, #011d4d 55%, #01356b 100%);
    padding: clamp(2rem, 5vw, 2.75rem) 0;
}

.driver-license-cta__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.driver-license-cta__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
}

.driver-license-cta__text {
    margin: 0 0 1.35rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.driver-license-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}

.driver-license-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}

.driver-license-cta__btn--primary {
    background: var(--btn-dash-bg);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(1, 29, 77, 0.22);
}

.driver-license-cta__btn--primary:hover {
    transform: translateY(-1px);
    background: var(--btn-dash-bg-hover);
    color: var(--white);
    text-decoration: none;
}

.driver-license-cta__btn--ghost {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.55);
}

.driver-license-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    color: var(--white);
    text-decoration: none;
}

@media (max-width: 900px) {
    .driver-license-layout {
        grid-template-columns: 1fr;
    }

    .driver-license-aside__card {
        position: static;
    }
}

@media (max-width: 560px) {
    .driver-license-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .driver-license-cta__btn--primary:hover {
        transform: none;
    }
}

/* ——— About us page ——— */
.main--about {
    background: var(--surface-muted);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.about-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #e4ebfb 50%, #f8fafc 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.1);
    padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.25rem);
}

.about-hero__inner {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.about-hero__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.about-hero__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #011d4d;
    line-height: 1.15;
}

.about-hero__lead {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
}

.about-hero__lead strong {
    color: #011d4d;
    font-weight: 700;
}

.about-body {
    padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.about-layout {
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 2.75rem);
}

.about-story {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid #d4dbe8;
    padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: 0 8px 28px rgba(1, 29, 77, 0.06);
    border-left: 4px solid var(--brand-red);
}

.about-story__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.about-story__text {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.65;
    color: #475569;
}

.about-story__text:last-child {
    margin-bottom: 0;
}

.about-story__text strong {
    color: #011d4d;
    font-weight: 700;
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.25rem);
}

.about-value {
    margin: 0;
    padding: 1.25rem 1.2rem;
    background: var(--white);
    border-radius: 14px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 6px 22px rgba(1, 29, 77, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.about-value:hover {
    border-color: rgba(1, 29, 77, 0.35);
    box-shadow: 0 10px 32px rgba(1, 29, 77, 0.1);
}

.about-value__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    background: rgba(1, 29, 77, 0.08);
    color: var(--brand-red);
}

.about-value__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #011d4d;
    line-height: 1.3;
}

.about-value__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.about-outcomes__inner {
    padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
    background: linear-gradient(135deg, #011d4d 0%, #011d4d 70%, #01356b 100%);
    border-radius: 16px;
    color: var(--white);
    box-shadow: 0 16px 40px rgba(1, 29, 77, 0.2);
}

.about-outcomes__title {
    margin: 0 0 0.45rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.about-outcomes__intro {
    margin: 0 0 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    max-width: 36rem;
}

.about-outcomes__list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.94);
}

.about-outcomes__list li {
    margin-bottom: 0.55rem;
}

.about-outcomes__list li:last-child {
    margin-bottom: 0;
}

.about-links__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.about-links__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-links__card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    background: var(--white);
    border: 1px solid #d4dbe8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.about-links__card:hover {
    border-color: var(--brand-red);
    background: rgba(1, 29, 77, 0.03);
    transform: translateY(-2px);
    text-decoration: none;
}

.about-links__label {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brand-red);
}

.about-links__hint {
    font-size: 0.8125rem;
    color: #64748b;
}

.about-cta {
    background: var(--white);
    border-top: 1px solid #e2e8f0;
    padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}

.about-cta__inner {
    max-width: 32rem;
    margin-inline: auto;
    text-align: center;
}

.about-cta__title {
    margin: 0 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.3rem);
    font-weight: 800;
    color: #011d4d;
}

.about-cta__text {
    margin: 0 0 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.about-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    background: var(--btn-dash-bg);
    color: var(--white);
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s, transform 0.15s;
}

.about-cta__btn:hover {
    background: var(--btn-dash-bg-hover);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .about-links__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .about-value:hover,
    .about-links__card:hover,
    .about-cta__btn:hover {
        transform: none;
    }
}

/* ——— Student dashboard (design-only; gated by demo session) ——— */
.main--dashboard {
    background: var(--surface-muted);
}

.dashboard-welcome {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eefc 45%, #f4f6f9 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.12);
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.dashboard-welcome__inner {
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}

.dashboard-welcome__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #011d4d;
    line-height: 1.15;
}

.dashboard-welcome__subtitle {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.dashboard-page-eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.dashboard-courses {
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.dashboard-courses__head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    max-width: 40rem;
    margin-inline: auto;
}

.dashboard-courses__title {
    margin: 0 0 0.45rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.dashboard-courses__intro {
    margin: 0;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.dashboard-courses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
}

.dashboard-course-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 28px rgba(1, 29, 77, 0.07);
    transition: box-shadow 0.2s, transform 0.2s;
}

.dashboard-course-card:hover {
    box-shadow: 0 14px 36px rgba(1, 29, 77, 0.12);
    transform: translateY(-2px);
}

.dashboard-course-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8eefc;
}

.dashboard-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dashboard-course-card__body {
    padding: 1.15rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.65rem;
}

.dashboard-course-card__title {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #011d4d;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.dashboard-course-card__desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    flex: 1;
}

.dashboard-course-card__progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dashboard-course-card__progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.dashboard-course-card__progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #011d4d, #01356b);
    transition: width 0.4s ease;
}

.dashboard-course-card__progress-bar--done {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.dashboard-course-card__progress-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.dashboard-course-card__cta,
.settings-btn--primary {
    padding: 0.5rem 1.1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--white);
    background: var(--btn-dash-bg);
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.dashboard-course-card__cta {
    margin-top: 0.15rem;
    align-self: flex-start;
}

.dashboard-course-card__cta:hover,
.settings-btn--primary:hover {
    background: var(--btn-dash-bg-hover);
}

.dashboard-course-card__cta:focus-visible,
.settings-btn--primary:focus-visible {
    outline: 2px solid #011d4d;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .dashboard-course-card:hover {
        transform: none;
    }
}

/* Lesson chapter cards: first lesson opens content */
a.sin.sin--lesson-link {
    display: flex;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.sin.sin--lesson-link:hover {
    box-shadow: 0 12px 28px rgba(16, 39, 94, 0.16);
}

a.sin.sin--lesson-link:focus-visible {
    outline: 2px solid #011d4d;
    outline-offset: 2px;
}

/* ——— Course lesson reader (users/lesson-*.php) ——— */
.main--lesson {
    background: var(--surface-muted);
}

.lesson-page {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.lesson-page__toolbar {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eefc 45%, #f4f6f9 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.12);
    padding: 0.85rem 0;
}

.lesson-page__toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lesson-page__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: none;
}

.lesson-page__back:hover {
    text-decoration: underline;
}

.lesson-page__meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Sequential lesson flow — Previous / Next / Finished */
.lesson-flow-nav {
    padding: 0.75rem 0 clamp(2rem, 4vw, 2.5rem);
}

.lesson-flow-nav__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 28px);
    box-sizing: border-box;
}

.lesson-flow-nav__timer-slot {
    margin-inline-end: auto;
    transform: translateY(-0.2rem);
}

.lesson-flow-nav__btn {
    display: inline-block;
    min-width: 10rem;
    padding: 0.85rem 2rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--btn-dash-bg, #011d4d);
    border: 1px solid var(--btn-dash-bg, #011d4d);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.lesson-flow-nav__btn:hover {
    background: var(--btn-dash-bg-hover, #01356b);
    border-color: var(--btn-dash-bg-hover, #01356b);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.lesson-flow-nav__btn--finished {
    background: #1a7f37;
    border-color: #1a7f37;
    box-shadow: 0 4px 14px rgba(26, 127, 55, 0.3);
}

.lesson-flow-nav__btn--finished:hover {
    background: #156b2e;
    border-color: #156b2e;
    color: #fff;
}

.all_lesson-chapters .sin:not(a) {
    cursor: default;
}

.lesson-page__inner {
    max-width: 52rem;
    margin-inline: auto;
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

.lesson-page-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    background: rgba(1, 29, 77, 0.94);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(1, 29, 77, 0.2);
}

.lesson-page-timer__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
}

.lesson-page-timer__value {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.lesson-page-timer[data-state="complete"] {
    background: rgba(167, 28, 42, 0.94);
}

.lesson-page__title {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: #011d4d;
    line-height: 1.2;
}

.lesson-hero-fig {
    margin: 0 0 2rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 32px rgba(1, 29, 77, 0.1);
    background: #e8eefc;
}

.lesson-hero-fig img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Lesson 2 — banner graphic (II. THE DRIVER) */
.lesson-hero-fig--l2 {
    background: #fff;
    border-color: rgba(1, 29, 77, 0.08);
}

.lesson-hero-fig--l2 img {
    object-fit: contain;
    max-height: min(52vh, 420px);
    margin-inline: auto;
}

.lesson-l2-section-head {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.lesson-l2-section-head .lesson-h2 {
    margin-top: 0;
}

/* A. License + “1. What your license means…” — two rows, text left / visuals right (demo layout) */
.lesson-block--license {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Break out of narrow lesson column so text + landscape photo fit comfortably */
.lesson-block--license-wider {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(62rem, calc(100vw - 2rem));
    max-width: none;
    box-sizing: border-box;
}

.lesson-block--license-wider .lesson-license-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, min(38%, 420px));
    column-gap: clamp(1.25rem, 3vw, 2rem);
}

.lesson-license-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
    column-gap: 1.25rem;
    row-gap: 1rem;
    align-items: start;
}

.lesson-license-grid__head .lesson-h2 {
    margin: 0 0 0.5rem;
}

.lesson-license-grid__head .lesson-lead {
    margin: 0;
}

.lesson-license-grid__illus {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.30rem;
    align-items: flex-end;
    justify-self: end;
    width: fit-content;
    max-width: 100%;
}

/* Shorter illustration beside A (file may include extra whitespace; cap height) */
.lesson-license-grid__illus .lesson-license-fig__img {
    display: block;
    max-height: clamp(10rem, 20vw, 14rem);
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-license-grid__body {
    grid-column: 1;
    grid-row: 2;
}

.lesson-license-grid__body>.lesson-h3 {
    margin: 0 0 0.45rem;
    color: #0f172a;
}

.lesson-license-grid__body>p {
    margin: 0 0 0.55rem;
}

.lesson-license-grid .lesson-list--license {
    margin: 0.35rem 0 0;
}

.lesson-license-grid .lesson-list--license li {
    margin-bottom: 0.3rem;
}

/*
 * Photo sits in the same grid row as the whole “1.” block (heading + paragraph + list).
 * margin-top alone cannot exceed the free space above the image; align-self:end pins the
 * figure to the bottom of that row so it lines up with the list instead of the heading.
 */
.lesson-license-grid__photo {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 12px;
    max-width: 100%;
}

.lesson-license-grid__photo .lesson-license-fig__img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.lesson-license-fig {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.08);
    background: #fff;
}

.lesson-block--license-others {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.lesson-others-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
    column-gap: 1.25rem;
    row-gap: 1rem;
    align-items: start;
}

.lesson-others-grid__body {
    grid-column: 1;
    grid-row: 1;
}

.lesson-others-grid__body>.lesson-h3 {
    margin: 0 0 0.45rem;
    color: #0f172a;
}

.lesson-others-grid__body>p {
    margin: 0.55rem 0 0;
}

.lesson-others-grid .lesson-list--license {
    margin: 0.35rem 0 0;
}

.lesson-others-grid .lesson-list--license li {
    margin-bottom: 0.3rem;
}

.lesson-others-grid__fig {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin: 0;
    border-radius: 12px;
    max-width: 100%;
}

.lesson-block--license-wider .lesson-others-grid--media-left {
    grid-template-columns: minmax(260px, min(38%, 420px)) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2rem);
}

.lesson-others-grid--media-left .lesson-others-grid__fig {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    margin: 0;
    max-width: 100%;
}

.lesson-others-grid--media-left .lesson-others-grid__body {
    grid-column: 2;
    grid-row: 1;
}

.lesson-others-grid--media-left .lesson-others-grid__fig .lesson-license-fig__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.lesson-others-grid--media-left .lesson-others-grid__body>.lesson-h3:first-of-type {
    margin-top: 0;
}

.lesson-others-b {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid #e2e8f0;
}

.lesson-others-b .lesson-h2 {
    margin: 0 0 0.5rem;
}

.lesson-block--license-others .lesson-others-b p {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.65;
}

.lesson-license-fig__img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}

.lesson-block {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--text-dark);
    font-size: 1rem;
    line-height: 1.65;
}

.lesson-block p {
    margin: 0 0 1rem;
}

.lesson-h2 {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #011d4d;
    line-height: 1.3;
}

.lesson-h2--accent {
    color: #0a3d8f;
}

.lesson-h3 {
    margin: 1.5rem 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0f172a;
    line-height: 1.35;
}

.lesson-subhead {
    margin: 1rem 0 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: #011d4d;
}

.lesson-lead {
    font-size: 1.02rem;
}

.lesson-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.lesson-list li {
    margin-bottom: 0.45rem;
}

/* Restore bullets (global ul resets list-style) */
.lesson-list--license {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.35rem;
    margin-left: 0;
    text-align: left;
}

.lesson-list--license li {
    display: list-item;
    text-align: left;
}

.lesson-list--dense li {
    margin-bottom: 0.65rem;
}

.lesson-split {
    display: grid;
    grid-template-columns: 1fr min(34%, 280px);
    gap: clamp(1rem, 3vw, 1.75rem);
    align-items: start;
    margin-top: 0.5rem;
}

.lesson-split--top {
    margin-bottom: 1.25rem;
}

.lesson-split__media--stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.lesson-media {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #e8eefc;
}

.lesson-media img {
    display: block;
    width: 100%;
    height: auto;
}

.lesson-media--border {
    border: 1px solid #c9d4e8;
    box-shadow: 0 6px 18px rgba(1, 29, 77, 0.08);
}

.lesson-media--photo {
    align-self: stretch;
}

.lesson-media--rounded {
    border-radius: 18px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.1);
}

.lesson-media--blob {
    border-radius: 22px 28px 20px 26px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.1);
}

.lesson-media--wide {
    max-width: min(100%, 44rem);
    margin-inline: auto;
}

.lesson-media--blue-border {
    border: 4px solid #011d4d;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(1, 29, 77, 0.12);
}

.lesson-banner {
    margin: 0 0 2rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 30px rgba(1, 29, 77, 0.1);
    background: #0f172a;
}

.lesson-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.lesson-block--float-wrap {
    overflow: auto;
}

.lesson-float-right {
    float: right;
    width: min(42%, 320px);
    margin: 0 0 1rem 1.25rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 22px rgba(1, 29, 77, 0.1);
    background: #e8eefc;
}

.lesson-float-right img {
    display: block;
    width: 100%;
    height: auto;
}

.lesson-float-right--frame {
    border: 3px solid #2563eb;
    border-radius: 16px;
}

.lesson-float-right--thick {
    border: 5px solid #011d4d;
    border-radius: 14px;
}

.lesson-figure-center {
    margin: 1.5rem auto 0;
    text-align: center;
}

.lesson-block--future .lesson-future-bar {
    margin: 0 0 1rem;
    padding: 0.65rem 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: linear-gradient(90deg, #011d4d, #0a3d8f);
    border-radius: 6px;
}

.lesson-quiz {
    margin-top: 2.5rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--white);
    border-radius: 14px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 28px rgba(1, 29, 77, 0.07);
}

/* Slightly wider than .lesson-page__inner for quiz + closing */
.lesson-quiz--wider,
.lesson-closing--wider {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(58rem, calc(100vw - 2rem));
    max-width: none;
    box-sizing: border-box;
}

.lesson-quiz--wider {
    padding-inline: clamp(1.25rem, 3vw, 2rem);
}

.lesson-quiz__title {
    margin: 0 0 1.5rem;
    text-align: center;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f172a;
}

.lesson-quiz__q {
    margin-bottom: 1.5rem;
}

.lesson-quiz__q:last-child {
    margin-bottom: 0;
}

.lesson-quiz__stem {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: #0f172a;
}

.lesson-quiz__opts {
    margin: 0;
    padding-left: 1.1rem;
    list-style: none;
}

.lesson-quiz__opts li {
    position: relative;
    margin-bottom: 0.35rem;
    padding-left: 0;
}

.lesson-quiz__opts li::before {
    content: none;
}

.lesson-quiz__opts .is-correct {
    color: #15803d;
    font-weight: 600;
}

.lesson-quiz__opts .is-correct .fa-square-check {
    margin-left: 0.35rem;
    color: #16a34a;
}

/* Interactive lesson quiz (Bootstrap radio as tick options) */
.lesson-quiz--interactive .lesson-quiz__intro {
    margin: -0.75rem 0 1.25rem;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.lesson-quiz--interactive .lesson-quiz__q {
    margin-bottom: 1.75rem;
    padding: 0;
    border: 0;
}

.lesson-quiz--interactive .lesson-quiz__stem {
    float: none;
    width: 100%;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.45;
}

.lesson-quiz--interactive .lesson-quiz__opts {
    padding-left: 0;
}

.lesson-quiz--interactive .lesson-quiz__check {
    margin-bottom: 0.5rem;
    padding-left: 2rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lesson-quiz--interactive .lesson-quiz__input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    border-radius: 0.15rem;
    border: 2px solid #94a3b8;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.7rem 0.7rem;
    flex-shrink: 0;
}

.lesson-quiz--interactive .lesson-quiz__input[type="radio"]:checked {
    background-color: #15803d;
    border-color: #15803d;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.lesson-quiz-result .alert-dismissible {
    padding-right: 3rem;
}

.lesson-quiz-result .btn-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    padding: 0.5rem;
    opacity: 0.65;
}

.lesson-quiz-result .alert {
    position: relative;
}

.lesson-quiz--interactive .lesson-quiz__label {
    cursor: pointer;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.45;
}

.lesson-quiz--interactive .lesson-quiz__check--correct {
    background-color: rgba(25, 135, 84, 0.08);
}

.lesson-quiz--interactive .lesson-quiz__check--wrong {
    background-color: rgba(220, 53, 69, 0.08);
}

.lesson-quiz--interactive .lesson-quiz__label--correct {
    color: #146c43;
    font-weight: 700;
}

.lesson-quiz--interactive .lesson-quiz__label--selected-correct {
    color: #146c43;
    font-weight: 700;
}

.lesson-quiz--interactive .lesson-quiz__label--wrong {
    color: #b02a37;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.lesson-quiz--interactive .lesson-quiz__check--correct .lesson-quiz__input[type="radio"] {
    border-color: #198754;
}

.lesson-quiz--interactive .lesson-quiz__check--wrong .lesson-quiz__input[type="radio"] {
    border-color: #dc3545;
    background-color: #dc3545;
}

.lesson-quiz--interactive .lesson-quiz__actions {
    margin-top: 1.5rem;
    text-align: center;
}

.lesson-quiz--interactive .lesson-quiz__submit {
    min-width: 12rem;
    font-weight: 600;
}

.lesson-quiz-result {
    margin-top: 1.25rem;
}

.lesson-flow-nav__btn.is-disabled,
.lesson-flow-nav__btn--next.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.35);
    box-shadow: none;
    transform: none;
}

.lesson-closing {
    margin-top: 2.5rem;
}

/* Lesson 3 — thank you card with vehicle image */
.lesson-closing--l3 .lesson-closing__photo {
    background: linear-gradient(135deg, #fff9e8 0%, #fff4d6 100%);
}

.lesson-closing--l3 .lesson-closing__photo img,
.lesson-closing--l3 .lesson-closing__photo-img {
    max-height: min(48vh, 320px);
}

/* Lesson 2 — thanks slide matches other .slide cards (1100px) */
.lesson-page--l2 .lesson-closing--l2 {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 0;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    overflow: hidden;
}

.lesson-page--l2 .lesson-closing--l2 .lesson-closing__thanks-fig {
    margin: 0;
    padding: 0;
    line-height: 0;
    text-align: center;
}

.lesson-page--l2 .lesson-closing--l2 .lesson-closing__thanks-img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin-inline: 0;
    border-radius: 0;
    box-shadow: none;
}

.lesson-closing__thanks-img {
    display: block;
    width: min(100%, 52rem);
    height: auto;
    margin-inline: auto;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(1, 29, 77, 0.08);
}

.lesson-closing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 32px rgba(1, 29, 77, 0.1);
    background: var(--white);
}

.lesson-closing__text {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.lesson-closing__line {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: #011d4d;
    line-height: 1.05;
}

.lesson-closing__line--lg {
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    letter-spacing: -0.02em;
}

.lesson-closing__line--sm {
    font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0.35rem 0;
}

.lesson-closing__photo {
    margin: 0;
    min-height: 200px;
    background: #e8eefc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
}

.lesson-closing__photo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(52vh, 360px);
    object-fit: contain;
    object-position: center;
}

.lesson-closing__nav {
    margin: 1.5rem 0 0;
    text-align: center;
}



@media (max-width: 720px) {

    .lesson-quiz--wider,
    .lesson-closing--wider,
    .lesson-block--license-wider {
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    .lesson-block--license-wider .lesson-license-grid {
        grid-template-columns: 1fr;
    }

    .lesson-license-grid {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
    }

    .lesson-license-grid__head {
        grid-column: 1;
        grid-row: 1;
    }

    .lesson-license-grid__illus {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        justify-self: center;
        width: 100%;
    }

    .lesson-license-grid__body {
        grid-column: 1;
        grid-row: 3;
    }

    .lesson-license-grid__photo {
        grid-column: 1;
        grid-row: 4;
        align-self: center;
        justify-self: center;
        max-width: 24rem;
        width: 100%;
        margin-top: clamp(0.75rem, 2vw, 1.25rem);
    }

    .lesson-others-grid {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
    }

    .lesson-others-grid--media-right,
    .lesson-others-grid--media-left,
    .lesson-block--license-wider .lesson-others-grid--media-left {
        grid-template-columns: 1fr;
    }

    .lesson-others-grid__body {
        grid-column: 1;
        grid-row: 1;
    }

    .lesson-others-grid__fig {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        max-width: 22rem;
        width: 100%;
    }

    .lesson-others-grid--media-left .lesson-others-grid__fig {
        grid-column: 1;
        grid-row: 2;
    }

    .lesson-others-grid--media-left .lesson-others-grid__body {
        grid-column: 1;
        grid-row: 1;
    }

    .lesson-others-grid--media-right .lesson-others-grid__body {
        grid-column: 1;
        grid-row: 1;
    }

    .lesson-others-grid--media-right .lesson-others-grid__fig {
        grid-column: 1;
        grid-row: 2;
    }

    .lesson-license-grid__illus .lesson-license-fig__img {
        max-height: clamp(6.5rem, 28vw, 9rem);
    }

    .lesson-split {
        grid-template-columns: 1fr;
    }

    .lesson-split__media--stack {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .lesson-split__media--stack .lesson-media {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 140px;
    }

    .lesson-split__aside {
        max-width: 20rem;
        margin-inline: auto;
    }

    .lesson-float-right {
        float: none;
        width: 100%;
        max-width: 22rem;
        margin: 1rem auto 0;
    }

    .lesson-closing__grid {
        grid-template-columns: 1fr;
    }

    .lesson-closing__photo {
        min-height: 220px;
        order: -1;
    }
}

/* B section — text left, image right */
.lesson-others-grid--media-right {
    grid-template-columns: minmax(0, 1fr) minmax(260px, min(38%, 420px));
    column-gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
}

.lesson-others-grid--media-right .lesson-others-grid__body {
    grid-column: 1;
    grid-row: 1;
}

.lesson-others-grid--media-right .lesson-others-grid__fig {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
    max-width: 100%;
}

.lesson-others-grid--media-right .lesson-license-fig__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Stack text + image before the two-column track becomes too narrow (tablets, small laptops) */
@media (max-width: 992px) {

    .lesson-others-grid--media-right,
    .lesson-others-grid--media-left,
    .lesson-block--license-wider .lesson-others-grid--media-left {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .lesson-others-grid--media-right .lesson-others-grid__body {
        grid-column: 1;
        grid-row: 1;
    }

    .lesson-others-grid--media-right .lesson-others-grid__fig {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        max-width: 22rem;
        width: 100%;
    }

    .lesson-others-grid--media-left .lesson-others-grid__fig {
        grid-column: 1;
        grid-row: 2;
    }

    .lesson-others-grid--media-left .lesson-others-grid__body {
        grid-column: 1;
        grid-row: 1;
    }
}

/* =========================================================
   VEHICLE DANGER SECTION
========================================================= */

.lesson-block--vehicle-danger {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Top banner image */
.lesson-danger-hero {
    margin: 0 0 1.5rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 28px rgba(1, 29, 77, 0.10);
    background: #e8eefc;
}

.lesson-danger-hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
}

/* Text block */
.lesson-danger-content {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.lesson-danger-content .lesson-h2 {
    margin-bottom: 0.65rem;
}

.lesson-danger-content p {
    margin-bottom: 0.85rem;
    max-width: 58rem;
}

/* Bottom two-column layout */
.lesson-danger-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    column-gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
}

.lesson-danger-grid__body .lesson-h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.lesson-danger-grid__body p {
    margin-bottom: 0.85rem;
}

.lesson-danger-grid__fig {
    margin: 0;
    justify-self: end;
    align-self: center;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.10);
    background: #fff;
}

.lesson-danger-grid__img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: cover;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-danger-grid {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .lesson-danger-grid__fig {
        justify-self: center;
        max-width: 22rem;
        width: 100%;
    }

    .lesson-danger-grid__img {
        max-width: 100%;
    }

    .lesson-danger-hero__img {
        max-height: 180px;
    }
}

/* =========================================================
   EXTRA DANGER / LAW SECTION
========================================================= */

.lesson-danger-extra {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.lesson-danger-extra__top {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.lesson-danger-extra__top .lesson-h2 {
    margin-bottom: 0.7rem;
}

.lesson-danger-extra__top p {
    margin-bottom: 0.85rem;
    max-width: 58rem;
}

/* Blue heading section */
.lesson-danger-laws__intro {
    margin-bottom: 1.5rem;
}

.lesson-danger-laws__intro .lesson-h2 {
    margin-bottom: 0.65rem;
}

.lesson-danger-laws__intro p {
    margin-bottom: 0;
    max-width: 62rem;
}

/* Grid */
.lesson-danger-laws__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    column-gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
}

/* Text side */
.lesson-danger-laws__body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.7rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.lesson-danger-laws__body p {
    margin-bottom: 0.85rem;
}

/* Image side */
.lesson-danger-laws__fig {
    margin: 0;
    justify-self: end;
    align-self: center;
    padding: 1rem;
    background: #3f78a8;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(1, 29, 77, 0.12);
}

.lesson-danger-laws__img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-danger-laws__grid {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .lesson-danger-laws__fig {
        justify-self: center;
        width: 100%;
        max-width: 22rem;
    }

    .lesson-danger-laws__img {
        max-width: 100%;
    }
}

/* =========================================================
   COURTESY / YIELD SECTION
========================================================= */

.lesson-courtesy-section {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Yield grid spacing */
.lesson-danger-laws__grid--yield {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Courtesy intro */
.lesson-courtesy-intro {
    margin-bottom: 1.5rem;
}

.lesson-courtesy-intro .lesson-h2 {
    margin-bottom: 0.75rem;
}

.lesson-courtesy-intro p {
    margin-bottom: 0;
    max-width: 64rem;
}

/* Shared roadway */
.lesson-courtesy-body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.7rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.lesson-courtesy-body p {
    margin-bottom: 0.85rem;
    max-width: 62rem;
}

.lesson-courtesy-body+.lesson-courtesy-body {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* =========================================================
   DRIVER EDUCATION SECTION
========================================================= */

.lesson-block--driver-ed {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Intro row */
.lesson-driver-ed__intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 370px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.lesson-driver-ed__intro-body .lesson-h2 {
    margin-bottom: 0.65rem;
}

.lesson-driver-ed__intro-body p {
    margin: 0;
    max-width: 48rem;
    line-height: 1.65;
}

/* Reusable text-left / image-right grid */
.lesson-driver-ed__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.lesson-driver-ed__grid:last-child {
    margin-bottom: 0;
}

.lesson-driver-ed__body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    color: #000;
}

.lesson-driver-ed__body p {
    margin-bottom: 0.55rem;
    line-height: 1.65;
}

.lesson-driver-ed__body .lesson-list--license {
    margin-top: 0.3rem;
}

.lesson-driver-ed__body .lesson-list--license li {
    margin-bottom: 0.25rem;
}

/* Images */
.lesson-driver-ed__fig {
    margin: 0;
    justify-self: end;
    align-self: center;
    max-width: 100%;
    overflow: hidden;
    background: #e8eefc;
}

.lesson-driver-ed__fig--top {
    align-self: start;
}

.lesson-driver-ed__img {
    display: block;
    width: 100%;
    max-width: 370px;
    height: auto;
    object-fit: cover;
}

/* Stack driver-ed rows on tablet (721–992px) so text is not squeezed beside images */
@media (max-width: 992px) and (min-width: 721px) {

    .lesson-driver-ed__intro-grid,
    .lesson-driver-ed__grid {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .lesson-driver-ed__fig,
    .lesson-driver-ed__fig--top {
        justify-self: center;
        width: 100%;
        max-width: 24rem;
    }

    .lesson-driver-ed__img {
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-driver-ed__intro-grid,
    .lesson-driver-ed__grid {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .lesson-driver-ed__fig,
    .lesson-driver-ed__fig--top {
        justify-self: center;
        width: 100%;
        max-width: 24rem;
    }

    .lesson-driver-ed__img {
        max-width: 100%;
    }
}

/* Lesson 2 — slightly smaller side images (serial 2–5) */
.lesson-block--lesson2 .lesson-driver-ed__fig {
    max-width: min(100%, 300px);
}

.lesson-block--lesson2 .lesson-driver-ed__img {
    max-width: 300px;
}

@media (max-width: 992px) and (min-width: 721px) {

    .lesson-block--lesson2 .lesson-driver-ed__fig {
        max-width: min(100%, 280px);
    }
}

@media (max-width: 720px) {

    .lesson-block--lesson2 .lesson-driver-ed__fig {
        max-width: min(100%, 280px);
    }
}

.lesson-auto-dev {
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* Top development row */
.lesson-auto-dev__intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.lesson-auto-dev__intro-body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    color: #000;
}

.lesson-auto-dev__intro-body p {
    margin: 0;
    max-width: 58rem;
    line-height: 1.65;
}

/* General content blocks */
.lesson-auto-dev__block {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.lesson-auto-dev__block .lesson-h3,
.lesson-auto-dev__combustion-body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    color: #000;
}

.lesson-auto-dev .lesson-list--license {
    margin-top: 0.35rem;
}

.lesson-auto-dev .lesson-list--license li {
    margin-bottom: 0.35rem;
    line-height: 1.55;
}

/* Combustion section: text left, image right */
.lesson-auto-dev__combustion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.lesson-auto-dev__combustion-body {
    min-width: 0;
}

/* Images */
.lesson-auto-dev__fig {
    margin: 0;
    justify-self: end;
    align-self: center;
    max-width: 100%;
    overflow: hidden;
}

.lesson-auto-dev__fig--top {
    align-self: start;
}

.lesson-auto-dev__fig--combustion {
    justify-self: center;
}

.lesson-auto-dev__img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-auto-dev__intro-grid,
    .lesson-auto-dev__combustion-grid {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .lesson-auto-dev__fig,
    .lesson-auto-dev__fig--top,
    .lesson-auto-dev__fig--combustion {
        justify-self: center;
        width: 100%;
        max-width: 24rem;
    }

    .lesson-auto-dev__img {
        max-width: 100%;
    }
}

.lesson-driver-ed__grid--cost {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.lesson-driver-ed__note {
    margin: 0.25rem 0 0 1.35rem;
    line-height: 1.6;
}

/* Full-width history text */
.lesson-auto-history {
    margin-top: clamp(2rem, 5vw, 3rem);
}

.lesson-auto-history__body {
    width: 100%;
}

.lesson-auto-history__body .lesson-h2 {
    margin-bottom: 0.75rem;
}

.lesson-auto-history__body p {
    max-width: 58rem;
    margin: 0;
    line-height: 1.65;
}

/* Center image below text */
.lesson-auto-history__fig {
    margin: clamp(1.5rem, 4vw, 2rem) auto 0;
    width: min(100%, 320px);
    overflow: hidden;
    background: #e8eefc;
}

.lesson-auto-history__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-driver-ed__note {
        margin-left: 0;
    }

    .lesson-auto-history__body p {
        max-width: 100%;
    }

    .lesson-auto-history__fig {
        width: min(100%, 24rem);
    }
}

/* =========================================================
   MASS PRODUCTION AND MODERNIZATION
========================================================= */

.lesson-auto-dev__modern {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.lesson-auto-dev__modern-body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    color: #000;
}

.lesson-auto-dev__modern-body .lesson-list--license {
    margin-top: 0.35rem;
}

.lesson-auto-dev__modern-body .lesson-list--license li {
    margin-bottom: 0.4rem;
    line-height: 1.55;
}

/* Images below text */
.lesson-auto-dev__modern-media {
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(220px, 300px);
    justify-content: center;
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 4rem);
    row-gap: 1rem;
}

.lesson-auto-dev__modern-fig {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
}

.lesson-auto-dev__modern-fig--left {
    justify-self: center;
}

.lesson-auto-dev__modern-fig--center {
    justify-self: center;
}

.lesson-auto-dev__modern-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Mobile */
@media (max-width: 720px) {
    .lesson-auto-dev__modern-media {
        grid-template-columns: 1fr;
    }

    .lesson-auto-dev__modern-fig {
        width: 100%;
        max-width: 24rem;
        justify-self: center;
    }
}

/* =========================================================
   AUTOMOBILE SOCIOLOGICAL + ECONOMIC IMPACT SECTION
========================================================= */

.lesson-block--auto-impact {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Main layout: full-width lead, then text left + image right */
.lesson-auto-impact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
    row-gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: start;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.lesson-auto-impact__lead {
    grid-column: 1 / -1;
    min-width: 0;
}

.lesson-auto-impact__grid:last-child {
    margin-bottom: 0;
}

.lesson-auto-impact__grid--economic {
    padding-top: clamp(1rem, 3vw, 1.5rem);
}

.lesson-auto-impact__body {
    min-width: 0;
}

.lesson-auto-impact__lead .lesson-h2 {
    margin-top: 0;
    margin-bottom: 0.65rem;
}

.lesson-auto-impact__body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.65rem;
    font-size: clamp(1.05rem, 2.3vw, 1.25rem);
    color: #000;
}

.lesson-auto-impact__lead p {
    margin: 0;
    max-width: none;
    line-height: 1.65;
}

.lesson-auto-impact__body p {
    margin: 0 0 1.25rem;
    max-width: 58rem;
    line-height: 1.65;
}

.lesson-auto-impact__subhead {
    margin-top: 0 !important;
    margin-bottom: 0.85rem !important;
    color: #011d4d !important;
}

.lesson-auto-impact__body .lesson-list--license {
    margin-top: 0.35rem;
}

.lesson-auto-impact__body .lesson-list--license li {
    margin-bottom: 0.4rem;
    line-height: 1.55;
}

/* Right-side images: centered in column, slightly below row start */
.lesson-auto-impact__fig {
    margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
    justify-self: center;
    align-self: start;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    background: #e8eefc;
}

.lesson-auto-impact__fig--blue {
    padding: 1rem;
    background: #1f5d99;
}

.lesson-auto-impact__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-auto-impact__grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-auto-impact__fig {
        margin-top: 0.35rem;
        max-width: 24rem;
        width: 100%;
    }

    .lesson-auto-impact__fig--blue {
        padding: 0.75rem;
    }
}

.lesson-block--auto-future {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Full-width intro (heading matches 1. DEVELOPMENT OF THE AUTOMOBILE.) */
.lesson-auto-future__intro {
    width: 100%;
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.lesson-auto-future__intro .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    color: #000;
}

.lesson-auto-future__intro>p {
    margin: 0 0 clamp(0.85rem, 2vw, 1.1rem);
    max-width: 58rem;
    line-height: 1.65;
}

.lesson-auto-future__intro>p:last-of-type {
    margin-bottom: 0;
}

/* Closing copy after grid — same measure as intro paragraph */
.lesson-auto-future__follow {
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    max-width: 58rem;
    line-height: 1.65;
}

/* Text left, image right */
.lesson-auto-future__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.lesson-auto-future__body {
    min-width: 0;
}

.lesson-auto-future__body .lesson-h3 {
    margin-top: 0;
    margin-bottom: 0.85rem;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    color: #000;
}

.lesson-auto-future__body .lesson-list--license {
    margin-top: 0.35rem;
}

.lesson-auto-future__body .lesson-list--license li {
    margin-bottom: 0.4rem;
    line-height: 1.55;
}

/* Right image */
.lesson-auto-future__fig {
    margin: 0;
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    background: #e8eefc;
}

.lesson-auto-future__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-auto-future__grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-auto-future__fig {
        max-width: 24rem;
        width: 100%;
    }
}

/* =========================================================
   LESSON 2 - D/E/F VISION TOPICS
========================================================= */

.lesson-l2-vision {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Match lesson-driver-ed subsection titles (e.g. B. VISUAL ACUITY, C. …) */
.lesson-l2-vision__title {
    margin: 0 0 0.75rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #000;
    text-align: center;
}

.lesson-l2-vision__title--left {
    text-align: left;
}

.lesson-l2-vision__lead {
    max-width: 58rem;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.55;
    text-align: center;
}

/* D. Peripheral Vision */
.lesson-l2-vision__peripheral {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 0.25rem;
}

.lesson-l2-vision__fig {
    margin: 0;
}

.lesson-l2-vision__fig--peripheral {
    margin: clamp(1.5rem, 3vw, 2rem) auto 0;
    width: min(100%, 430px);
}

.lesson-l2-vision__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l2-vision__img--peripheral {
    max-height: 240px;
}

/* E. Night Vision - text left, image right */
.lesson-l2-vision__night-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.lesson-l2-vision__night-body p {
    margin: 0;
    max-width: 48rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.6;
}

.lesson-l2-vision__fig--night {
    justify-self: center;
    width: min(100%, 330px);
}

.lesson-l2-vision__img--night {
    max-height: 240px;
}

/* F. Color Vision */
.lesson-l2-vision__color {
    text-align: center;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.lesson-l2-vision__fig--color {
    margin: clamp(1.5rem, 3vw, 2rem) auto 0;
    width: min(100%, 500px);
}

.lesson-l2-vision__img--color {
    max-height: 310px;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-l2-vision__title,
    .lesson-l2-vision__title--left {
        text-align: center;
    }

    .lesson-l2-vision__night-grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-l2-vision__night-body p {
        max-width: 100%;
        text-align: center;
    }

    .lesson-l2-vision__fig--peripheral,
    .lesson-l2-vision__fig--night,
    .lesson-l2-vision__fig--color {
        width: min(100%, 24rem);
    }

    .lesson-l2-vision__img--peripheral,
    .lesson-l2-vision__img--night,
    .lesson-l2-vision__img--color {
        max-height: 230px;
    }
}

/* =========================================================
   LESSON 2 - COMPENSATION / HEARING / PHYSICAL CONDITIONS
========================================================= */

.lesson-l2-senses {
    margin-top: clamp(2.75rem, 6vw, 4rem);
}

/* Shared titles — same scale as .lesson-driver-ed__body .lesson-h3 */
.lesson-l2-senses__title {
    margin: 0 0 0.75rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #000;
}

.lesson-l2-senses__title--center {
    text-align: center;
}

.lesson-l2-senses__title--left {
    text-align: left;
}

.lesson-l2-senses__blue-title {
    margin-bottom: 0.85rem;
    color: #1f5d99;
}

.lesson-l2-senses p {
    line-height: 1.6;
}

/* G. Compensation for Subnormal Vision */
.lesson-l2-senses__vision-comp {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.lesson-l2-senses__comp-fig {
    margin: clamp(1.25rem, 3vw, 1.75rem) auto 1.25rem;
    width: min(100%, 520px);
}

.lesson-l2-senses__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l2-senses__img--comp {
    max-height: 360px;
}

.lesson-l2-senses__center-text {
    max-width: 56rem;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.2rem);
    text-align: center;
}

/* Hearing intro */
.lesson-l2-senses__hearing {
    margin-bottom: clamp(2.75rem, 6vw, 4rem);
}

.lesson-l2-senses__hearing-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    column-gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.lesson-l2-senses__hearing-body p {
    margin: 0;
    max-width: 48rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.lesson-l2-senses__hearing-icons {
    margin: 0;
    justify-self: center;
    width: min(100%, 400px);
}

.lesson-l2-senses__img--icons {
    max-height: 300px;
}

/* Auditory acuity grid */
.lesson-l2-senses__auditory-grid {
    display: grid;
    grid-template-columns: minmax(260px, 430px) minmax(0, 1fr);
    column-gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.lesson-l2-senses__auditory-fig {
    margin: 0;
    justify-self: center;
    width: min(100%, 420px);
}

.lesson-l2-senses__img--auditory {
    max-height: 360px;
}

.lesson-l2-senses__auditory-body p {
    margin: 0;
    max-width: 42rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

/* B/C/D hearing text */
.lesson-l2-senses__hearing-conditions {
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.lesson-l2-senses__text-block {
    margin-bottom: clamp(1.25rem, 3vw, 1.85rem);
}

.lesson-l2-senses__text-block:last-child {
    margin-bottom: 0;
}

.lesson-l2-senses__text-block p {
    margin: 0;
    max-width: 68rem;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    line-height: 1.5;
}

/* Physical conditions */
.lesson-l2-senses__physical {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l2-senses__physical-intro {
    margin: 0 0 1.25rem;
    max-width: 68rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.lesson-l2-senses__condition {
    margin-bottom: 1rem;
}

.lesson-l2-senses__condition:last-child {
    margin-bottom: 0;
}

.lesson-l2-senses__small-title {
    margin: 0 0 0.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #000;
    line-height: 1.35;
}

.lesson-l2-senses__condition p {
    margin: 0;
    max-width: 70rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.55;
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-l2-senses__hearing-intro-grid,
    .lesson-l2-senses__auditory-grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-l2-senses__title,
    .lesson-l2-senses__title--left,
    .lesson-l2-senses__blue-title {
        text-align: center;
    }

    .lesson-l2-senses__hearing-body p,
    .lesson-l2-senses__auditory-body p,
    .lesson-l2-senses__physical-intro,
    .lesson-l2-senses__condition p,
    .lesson-l2-senses__text-block p {
        max-width: 100%;
    }

    .lesson-l2-senses__hearing-icons,
    .lesson-l2-senses__auditory-fig,
    .lesson-l2-senses__comp-fig {
        width: min(100%, 24rem);
    }

    .lesson-l2-senses__img--comp,
    .lesson-l2-senses__img--icons,
    .lesson-l2-senses__img--auditory {
        max-height: 260px;
    }
}

/* =========================================================
   LESSON 2 - MEDICAL CONDITIONS / CARBON / PSYCHOLOGICAL
========================================================= */

.lesson-l2-conditions {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* E + F grid */
.lesson-l2-conditions__medical-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.lesson-l2-conditions__body {
    min-width: 0;
}

.lesson-l2-conditions__block {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.lesson-l2-conditions__block:last-child {
    margin-bottom: 0;
}

.lesson-l2-conditions__block p {
    margin: 0 0 1rem;
    max-width: 58rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l2-conditions__cyan-title {
    color: #22c7df;
    max-width: 50rem;
}

/* Large black dot list like screenshot, but controlled */
.lesson-l2-conditions__dot-list {
    margin: 1rem 0 0;
    padding-left: 0;
    list-style: none;
}

.lesson-l2-conditions__dot-list li {
    position: relative;
    margin-bottom: 0.45rem;
    padding-left: 1.65rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.5;
}

.lesson-l2-conditions__dot-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #000;
}

/* Right-side stacked media */
.lesson-l2-conditions__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
}

.lesson-l2-conditions__fig {
    margin: 0;
    width: 100%;
    text-align: center;
}

.lesson-l2-conditions__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l2-conditions__fig--icons {
    max-width: 300px;
}

.lesson-l2-conditions__fig--review {
    max-width: 300px;
}

.lesson-l2-conditions__fig--car {
    max-width: 330px;
}

.lesson-l2-conditions__img--icons {
    max-height: 210px;
}

.lesson-l2-conditions__img--review {
    max-height: 230px;
}

.lesson-l2-conditions__img--car {
    max-height: 210px;
}


/* Carbon monoxide */
.lesson-l2-carbon {
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.lesson-l2-carbon__title {
    margin: 0 auto 1rem;
    max-width: 50rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 900;
    font-style: italic;
    line-height: 1.15;
    text-transform: uppercase;
    color: #1f7db8;
}

.lesson-l2-carbon__title::after {
    content: "";
    display: block;
    width: 9rem;
    height: 0.2rem;
    margin: 1rem auto 0;
    background: #1f7db8;
}

.lesson-l2-carbon__lead {
    max-width: 64rem;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.6;
}

.lesson-l2-carbon__fig {
    margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
    width: min(100%, 520px);
    border: 4px solid #22c7df;
    border-radius: 14px;
    overflow: hidden;
    background: #e8eefc;
}

.lesson-l2-carbon__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}


/* Psychological section */
.lesson-l2-psych {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l2-psych__head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2.25rem, 5vw, 3rem);
}

.lesson-l2-psych__title {
    margin: 0;
    max-width: 48rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 900;
    font-style: italic;
    line-height: 1.15;
    text-transform: uppercase;
    color: #1f7db8;
}

.lesson-l2-psych__rule {
    width: min(100%, 36rem);
    height: 0.2rem;
    margin: 0.9rem 0 1.5rem;
    background: #1f7db8;
}

.lesson-l2-psych__sub-title,
.lesson-l2-psych__readiness-title {
    margin: 0 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1f7db8;
}

.lesson-l2-psych__head-body p,
.lesson-l2-psych__readiness-body p {
    margin: 0;
    max-width: 56rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l2-psych__icons {
    margin: 0;
    justify-self: center;
    width: min(100%, 280px);
}

.lesson-l2-psych__readiness-grid {
    display: grid;
    grid-template-columns: minmax(260px, 430px) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 3px solid #1f7db8;
}

.lesson-l2-psych__readiness-fig {
    margin: 0;
    justify-self: center;
    width: min(100%, 420px);
    border: 4px solid #22c7df;
    border-radius: 12px;
    overflow: hidden;
}

.lesson-l2-psych__readiness-body {
    text-align: right;
}

.lesson-l2-psych__readiness-title {
    color: #174178;
}

.lesson-l2-psych__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l2-psych__img--icons {
    max-height: 260px;
}

.lesson-l2-psych__img--readiness {
    max-height: 260px;
    object-fit: cover;
}


/* Mobile */
@media (max-width: 720px) {

    .lesson-l2-conditions__medical-grid,
    .lesson-l2-psych__head-grid,
    .lesson-l2-psych__readiness-grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-l2-conditions__media {
        flex-direction: column;
    }

    .lesson-l2-conditions__fig--icons,
    .lesson-l2-conditions__fig--review,
    .lesson-l2-conditions__fig--car,
    .lesson-l2-psych__icons,
    .lesson-l2-psych__readiness-fig {
        width: min(100%, 24rem);
    }

    .lesson-l2-carbon__fig {
        width: min(100%, 24rem);
    }

    .lesson-l2-psych__title,
    .lesson-l2-carbon__title,
    .lesson-l2-psych__sub-title,
    .lesson-l2-psych__readiness-title {
        text-align: center;
    }

    .lesson-l2-psych__rule {
        margin-inline: auto;
    }

    .lesson-l2-psych__readiness-body {
        text-align: center;
    }

    .lesson-l2-conditions__img--icons,
    .lesson-l2-conditions__img--review,
    .lesson-l2-conditions__img--car,
    .lesson-l2-carbon__img,
    .lesson-l2-psych__img--icons,
    .lesson-l2-psych__img--readiness {
        max-height: 240px;
    }
}

/* =========================================================
   LESSON 2 - FULL-WIDTH STACKED IMAGES (18 & 19)
========================================================= */

/* Tighten gap between psychological block and these images only when they follow */
.lesson-l2-psych:has(+ .lesson-l2-full-media--stack) {
    margin-bottom: clamp(0.5rem, 1.25vw, 1rem);
}

.lesson-l2-full-media--stack {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.65rem, 1.75vw, 1.1rem);
    width: 100%;
    max-width: none;
}

.lesson-l2-full-media--stack .lesson-l2-full-media__fig {
    margin: 0;
    width: 100%;
    max-width: none;
    display: block;
    text-align: center;
}

.lesson-l2-full-media--stack .lesson-l2-full-media__img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
}

/* =========================================================
   LESSON 2 - PSYCHOLOGICAL EXTRA + QUIZ
========================================================= */

.lesson-l2-psych-extra {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* C/D/E: three rows — text left, image right (vertically centered with text) */
.lesson-l2-psych-extra__traits-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.lesson-l2-psych-extra__trait-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, min(36%, 380px));
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.lesson-l2-psych-extra__trait {
    margin: 0;
    min-width: 0;
}

.lesson-l2-psych-extra__title,
.lesson-l2-undesirable__title {
    margin: 0 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #000;
}

.lesson-l2-psych-extra__trait p {
    margin: 0;
    max-width: 55rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l2-psych-extra__trait-row .lesson-l2-psych-extra__fig {
    margin: 0;
    width: 100%;
    max-width: 360px;
    justify-self: center;
    border: 4px solid #22c7df;
    border-radius: 12px;
    overflow: hidden;
    background: #e8eefc;
}

.lesson-l2-psych-extra__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(240px, 32vh);
    object-fit: contain;
    object-position: center;
}

/* Undesirable traits */
.lesson-l2-undesirable {
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.lesson-l2-undesirable__main-title {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 900;
    font-style: italic;
    line-height: 1.2;
    text-transform: uppercase;
    color: #1f7db8;
}

.lesson-l2-undesirable__intro {
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
    max-width: 68rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l2-undesirable__item {
    margin-bottom: clamp(1.25rem, 3vw, 1.85rem);
}

.lesson-l2-undesirable__item:last-child {
    margin-bottom: 0;
}

.lesson-l2-undesirable__item p {
    margin: 0;
    max-width: 68rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

/* Quiz */
.lesson-l2-quiz {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.lesson-l2-quiz__title {
    margin: 0 0 clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 900;
    font-style: italic;
    line-height: 1.15;
    text-transform: uppercase;
    color: #1f7db8;
}

.lesson-l2-quiz__q {
    margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.lesson-l2-quiz__q:last-child {
    margin-bottom: 0;
}

.lesson-l2-quiz__stem {
    margin: 0 0 0.45rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    line-height: 1.45;
    color: #000;
}

.lesson-l2-quiz__opts {
    margin: 0;
    padding-left: 1.25rem;
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.45;
}

.lesson-l2-quiz__opts li {
    margin-bottom: 0.2rem;
    padding-left: 0.15rem;
}

.lesson-l2-quiz__opts .is-correct {
    color: #00bf4f;
    font-weight: 800;
}

.lesson-l2-quiz__opts .fa-square-check {
    margin-left: 0.25rem;
    color: #16a34a;
}

.lesson-l2-quiz__q--last .lesson-l2-quiz__stem {
    font-size: clamp(1.05rem, 2.3vw, 1.25rem);
}

.lesson-l2-quiz__q--last .lesson-l2-quiz__opts {
    font-size: clamp(1.05rem, 2.3vw, 1.2rem);
}

/* Mobile */
@media (max-width: 720px) {

    .lesson-l2-psych-extra__trait-row {
        grid-template-columns: 1fr;
        row-gap: clamp(0.85rem, 2.5vw, 1.25rem);
        align-items: start;
    }

    .lesson-l2-psych-extra__trait-row .lesson-l2-psych-extra__fig {
        max-width: min(100%, 22rem);
        margin-inline: auto;
    }

    .lesson-l2-psych-extra__img {
        max-height: min(220px, 38vh);
    }

    .lesson-l2-undesirable__main-title,
    .lesson-l2-quiz__title {
        text-align: center;
    }

    .lesson-l2-quiz__opts {
        padding-left: 1.1rem;
    }
}

/* =========================================================
   LESSON 3 - IMAGES 2 TO 8 CORRECTED
========================================================= */

.lesson-l3-title {
    margin: 0 0 0.75rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.14rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #011d4d;
}

.lesson-l3-title--major {
    font-size: clamp(1.18rem, 2.5vw, 1.55rem);
    font-weight: 900;
    line-height: 1.2;
}

.lesson-l3-title--gap {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.lesson-l3-natural p,
.lesson-l3-movement p,
.lesson-l3-gravity p,
.lesson-l3-inertia-intro p,
.lesson-l3-seatbelts p {
    margin: 0 0 0.9rem;
    max-width: 64rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l3-natural p:last-child,
.lesson-l3-movement p:last-child,
.lesson-l3-gravity p:last-child,
.lesson-l3-inertia-intro p:last-child,
.lesson-l3-seatbelts p:last-child {
    margin-bottom: 0;
}

.lesson-l3-movement .lesson-list--license li,
.lesson-l3-forces .lesson-list--license li,
.lesson-l3-gravity-effects .lesson-list--license li,
.lesson-l3-inertia-intro .lesson-list--license li,
.lesson-l3-seatbelts .lesson-list--license li {
    margin-bottom: 0.35rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.55;
}


/* A. Natural Laws intro - image left, text right */
.lesson-l3-natural {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-natural__grid {
    display: grid;
    grid-template-columns: minmax(300px, 48%) minmax(0, 1fr);
    column-gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.lesson-l3-natural__fig {
    margin: 0;
    justify-self: start;
    width: 100%;
}

.lesson-l3-natural__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 470px;
    object-fit: contain;
}


/* 1. How Natural Laws Affect Movement - image 3 right */
.lesson-l3-movement {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-movement__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    column-gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l3-movement__row:last-child {
    margin-bottom: 0;
}

.lesson-l3-movement__body {
    min-width: 0;
}

.lesson-l3-movement__fig {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 340px;
}

.lesson-l3-movement__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l3-movement__img--point1 {
    max-height: min(42vh, 320px);
}

.lesson-l3-movement__img--pointa {
    max-height: min(38vh, 280px);
}


/* B/C Natural Laws Enforce + Accident Types - images 5 & 6 right */
.lesson-l3-forces {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-forces__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    column-gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l3-forces__row:last-child {
    margin-bottom: 0;
}

.lesson-l3-forces__body {
    min-width: 0;
}

.lesson-l3-forces__fig {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 340px;
}

.lesson-l3-forces__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l3-forces__img--b {
    max-height: min(42vh, 300px);
}

.lesson-l3-forces__img--c {
    max-height: min(48vh, 340px);
}


/* Gravity text-only section */
.lesson-l3-gravity {
    margin-bottom: clamp(2.75rem, 6vw, 4rem);
}

.lesson-l3-gravity p {
    max-width: 62rem;
}


/* Gravity effects + low gear image 6 */
.lesson-l3-gravity-effects {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-gravity-effects__top {
    max-width: 58rem;
    margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.lesson-l3-lowgear {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 450px);
    column-gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.lesson-l3-lowgear__fig {
    margin: 0;
    justify-self: center;
    width: 100%;
    max-width: 420px;
}

.lesson-l3-lowgear__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}


/* Parking + Inertia text-only section */
.lesson-l3-inertia-intro {
    margin-bottom: clamp(3rem, 7vw, 5rem);
}

.lesson-l3-inertia-intro__parking {
    max-width: 64rem;
    margin-bottom: clamp(4rem, 9vw, 6rem);
}

.lesson-l3-inertia-intro__energy {
    max-width: 58rem;
}


/* Inertia definition + seatbelt image 8 */
.lesson-l3-seatbelts {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-seatbelts__definition {
    max-width: 64rem;
    margin-bottom: clamp(3rem, 7vw, 5rem);
}

.lesson-l3-seatbelts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    column-gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.lesson-l3-seatbelts__fig {
    margin: 0;
    justify-self: center;
    width: 100%;
    max-width: 390px;
}

.lesson-l3-seatbelts__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
}


/* Mobile */
@media (max-width: 768px) {

    .lesson-l3-natural__grid,
    .lesson-l3-movement__row,
    .lesson-l3-forces__row,
    .lesson-l3-lowgear,
    .lesson-l3-seatbelts__grid {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-l3-natural__fig,
    .lesson-l3-movement__fig,
    .lesson-l3-forces__fig,
    .lesson-l3-seatbelts__fig {
        justify-self: center;
        width: min(100%, 24rem);
        max-width: 24rem;
    }

    .lesson-l3-lowgear {
        row-gap: 1.5rem;
    }

    .lesson-l3-lowgear__fig {
        justify-self: stretch;
        width: calc(100% + 3rem);
        max-width: none;
        margin-inline: -1.5rem;
    }

    .lesson-l3-natural__img {
        max-height: 300px;
    }

    .lesson-l3-movement__img--point1 {
        max-height: 260px;
    }

    .lesson-l3-movement__img--pointa {
        max-height: 220px;
    }

    .lesson-l3-forces__img--b {
        max-height: 240px;
    }

    .lesson-l3-forces__img--c {
        max-height: 280px;
    }

    .lesson-l3-lowgear__img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .lesson-l3-seatbelts__img {
        max-height: 230px;
    }

    .lesson-l3-title,
    .lesson-l3-title--major {
        text-align: center;
    }

    .lesson-l3-natural p,
    .lesson-l3-movement p,
    .lesson-l3-gravity p,
    .lesson-l3-inertia-intro p,
    .lesson-l3-seatbelts p {
        max-width: 100%;
    }
}

/* =========================================================
   LESSON 3 - ENERGY / FRICTION / IMPACT / QUIZ
========================================================= */

.lesson-l3-energy-friction-impact {
    margin-top: clamp(2.75rem, 6vw, 4.25rem);
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

/* Shared section grid */
.lesson-l3-efi__grid,
.lesson-l3-efi__quiz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    column-gap: clamp(1.5rem, 5vw, 4rem);
    row-gap: 1.25rem;
    align-items: center;
    margin-bottom: clamp(3rem, 7vw, 5rem);
}

.lesson-l3-efi__grid:last-child,
.lesson-l3-efi__quiz-grid:last-child {
    margin-bottom: 0;
}

.lesson-l3-efi__grid:has(.lesson-l3-efi__media-col--potential) {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
}

.lesson-l3-efi__grid--full {
    grid-template-columns: 1fr;
}

/* 4. Kinetic Energy — images 11 & 12 beside text */
.lesson-l3-kinetic {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-kinetic__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
    column-gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l3-kinetic__row:last-child {
    margin-bottom: 0;
}

.lesson-l3-kinetic__body {
    min-width: 0;
}

.lesson-l3-kinetic__body p {
    margin: 0 0 1rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l3-kinetic__body .lesson-list--license li {
    margin-bottom: 0.35rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.55;
}

.lesson-l3-kinetic__fig {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 280px;
}

.lesson-l3-kinetic__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l3-kinetic__img--intro {
    max-height: min(28vh, 200px);
}

.lesson-l3-kinetic__img--effects {
    max-height: min(36vh, 260px);
}

/* D. Force of Friction — images 13 & 14 beside text */
.lesson-l3-friction {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-friction__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
    column-gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l3-friction__row:last-child {
    margin-bottom: 0;
}

.lesson-l3-friction__body {
    min-width: 0;
}

.lesson-l3-friction__body p {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l3-friction__fig {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 280px;
}

.lesson-l3-friction__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l3-friction__img--intro {
    max-height: min(32vh, 240px);
}

.lesson-l3-friction__img--definition {
    max-height: min(36vh, 260px);
}

.lesson-l3-friction__img--grid {
    max-height: min(44vh, 320px);
}

.lesson-l3-friction__body .lesson-list--license li {
    margin-bottom: 0.35rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.55;
}

.lesson-l3-friction__row:has(.lesson-l3-friction__img--grid) {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
}

/* Lubrication + centrifugal intro — images 18–20 */
.lesson-l3-paired {
    margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.lesson-l3-paired__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
    column-gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l3-paired__row:last-child {
    margin-bottom: 0;
}

.lesson-l3-paired__body {
    min-width: 0;
}

.lesson-l3-paired__body p {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l3-paired__body .lesson-list--license li {
    margin-bottom: 0.35rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.55;
}

.lesson-l3-paired__fig {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 300px;
}

.lesson-l3-paired__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-l3-paired__img--grid {
    max-height: min(44vh, 320px);
}

.lesson-l3-paired__img--understanding {
    max-height: min(40vh, 300px);
}

.lesson-l3-paired__img--curve {
    max-height: min(42vh, 300px);
}

.lesson-l3-efi__body,
.lesson-l3-efi__quiz-body {
    min-width: 0;
}

.lesson-l3-efi__body p {
    margin: 0 0 1rem;
    max-width: 64rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
}

.lesson-l3-efi__body p:last-child {
    margin-bottom: 0;
}

.lesson-l3-title--small {
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.lesson-l3-efi__text-block {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-l3-efi__text-block:last-child {
    margin-bottom: 0;
}

.lesson-l3-efi__body .lesson-list--license {
    margin-top: 0.35rem;
}

.lesson-l3-efi__body .lesson-list--license li {
    margin-bottom: 0.35rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.55;
}

/* Images */
.lesson-l3-efi__fig {
    margin: 0;
    justify-self: center;
    width: 100%;
    max-width: 400px;
}

.lesson-l3-efi__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 330px;
    object-fit: contain;
}

/* Potential energy — stacked images 9 & 10 beside text */
.lesson-l3-efi__media-col {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.85rem);
    justify-self: end;
    width: 100%;
    max-width: 280px;
}

.lesson-l3-efi__media-col--potential {
    align-self: start;
}

.lesson-l3-efi__media-col--potential .lesson-l3-efi__fig {
    margin: 0;
    max-width: 100%;
}

.lesson-l3-efi__img--potential-a {
    max-height: min(28vh, 200px);
}

.lesson-l3-efi__img--potential-b {
    max-height: min(32vh, 220px);
}

/* Individual image sizing */
.lesson-l3-efi__fig--potential {
    max-width: 340px;
}

.lesson-l3-efi__fig--potential .lesson-l3-efi__img {
    max-height: 360px;
}

.lesson-l3-efi__fig--kinetic,
.lesson-l3-efi__fig--friction {
    max-width: 440px;
}

.lesson-l3-efi__fig--kinetic .lesson-l3-efi__img,
.lesson-l3-efi__fig--friction .lesson-l3-efi__img {
    max-height: 390px;
}

.lesson-l3-efi__fig--stopping {
    max-width: 390px;
}

.lesson-l3-efi__fig--stopping .lesson-l3-efi__img {
    max-height: 330px;
}

.lesson-l3-efi__fig--wear {
    max-width: 420px;
}

.lesson-l3-efi__fig--wear .lesson-l3-efi__img {
    max-height: 420px;
}

.lesson-l3-efi__fig--centrifugal {
    max-width: 410px;
}

.lesson-l3-efi__fig--centrifugal .lesson-l3-efi__img {
    max-height: 470px;
}

.lesson-l3-efi__fig--centripetal {
    max-width: 420px;
}

.lesson-l3-efi__fig--centripetal .lesson-l3-efi__img {
    max-height: 440px;
}

.lesson-l3-efi__fig--impact,
.lesson-l3-efi__fig--impact-kinetic,
.lesson-l3-efi__fig--crush,
.lesson-l3-efi__fig--opposing {
    max-width: 410px;
}

.lesson-l3-efi__fig--impact .lesson-l3-efi__img,
.lesson-l3-efi__fig--impact-kinetic .lesson-l3-efi__img,
.lesson-l3-efi__fig--crush .lesson-l3-efi__img,
.lesson-l3-efi__fig--opposing .lesson-l3-efi__img {
    max-height: 360px;
}

/* Quiz image cards */
.lesson-l3-efi__fig--quiz {
    max-width: 360px;
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 8px 22px rgba(1, 29, 77, 0.08);
    background: #fff;
}

.lesson-l3-efi__fig--quiz .lesson-l3-efi__img {
    max-height: 360px;
}

/* Quiz — card layout (matches lesson 2) */
.lesson-l3-quiz {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.lesson-l3-quiz__title {
    margin: 0 0 clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 900;
    font-style: italic;
    line-height: 1.15;
    text-transform: uppercase;
    color: #1f7db8;
}

.lesson-l3-quiz__q {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.lesson-l3-quiz__q:last-child {
    margin-bottom: 0;
}

.lesson-l3-quiz__stem {
    margin: 0 0 0.45rem;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    line-height: 1.45;
    color: #000;
}

.lesson-l3-quiz__opts {
    margin: 0;
    padding-left: 1.25rem;
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.45;
}

.lesson-l3-quiz__opts li {
    margin-bottom: 0.2rem;
    padding-left: 0.15rem;
}

.lesson-l3-quiz__opts .is-correct {
    color: #00bf4f;
    font-weight: 800;
}

.lesson-l3-quiz__opts .fa-square-check {
    margin-left: 0.25rem;
    color: #16a34a;
}

.lesson-l3-quiz__q--last .lesson-l3-quiz__stem {
    font-size: clamp(1.05rem, 2.3vw, 1.25rem);
}

.lesson-l3-quiz__q--last .lesson-l3-quiz__opts {
    font-size: clamp(1.05rem, 2.3vw, 1.2rem);
}

/* Mobile — energy / friction / impact (must follow base grid rules above) */
@media (max-width: 768px) {

    .lesson-l3-efi__grid,
    .lesson-l3-efi__quiz-grid,
    .lesson-l3-efi__grid:has(.lesson-l3-efi__media-col--potential),
    .lesson-l3-kinetic__row,
    .lesson-l3-friction__row,
    .lesson-l3-friction__row:has(.lesson-l3-friction__img--grid),
    .lesson-l3-paired__row {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .lesson-l3-efi__body,
    .lesson-l3-efi__quiz-body,
    .lesson-l3-kinetic__body,
    .lesson-l3-friction__body,
    .lesson-l3-paired__body {
        min-width: 0;
        max-width: 100%;
    }

    .lesson-l3-efi__body p,
    .lesson-l3-kinetic__body p,
    .lesson-l3-friction__body p,
    .lesson-l3-paired__body p {
        max-width: 100%;
    }

    .lesson-l3-efi__media-col,
    .lesson-l3-efi__media-col--potential {
        justify-self: stretch;
        align-self: stretch;
        width: 100%;
        max-width: none;
    }

    .lesson-l3-efi__fig,
    .lesson-l3-efi__fig--potential,
    .lesson-l3-efi__fig--kinetic,
    .lesson-l3-efi__fig--friction,
    .lesson-l3-efi__fig--stopping,
    .lesson-l3-efi__fig--wear,
    .lesson-l3-efi__fig--centrifugal,
    .lesson-l3-efi__fig--centripetal,
    .lesson-l3-efi__fig--impact,
    .lesson-l3-efi__fig--impact-kinetic,
    .lesson-l3-efi__fig--crush,
    .lesson-l3-efi__fig--opposing,
    .lesson-l3-efi__fig--quiz,
    .lesson-l3-kinetic__fig,
    .lesson-l3-friction__fig,
    .lesson-l3-paired__fig {
        justify-self: stretch;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .lesson-l3-efi__img,
    .lesson-l3-efi__fig--potential .lesson-l3-efi__img,
    .lesson-l3-efi__fig--kinetic .lesson-l3-efi__img,
    .lesson-l3-efi__fig--friction .lesson-l3-efi__img,
    .lesson-l3-efi__fig--stopping .lesson-l3-efi__img,
    .lesson-l3-efi__fig--wear .lesson-l3-efi__img,
    .lesson-l3-efi__fig--centrifugal .lesson-l3-efi__img,
    .lesson-l3-efi__fig--centripetal .lesson-l3-efi__img,
    .lesson-l3-efi__fig--impact .lesson-l3-efi__img,
    .lesson-l3-efi__fig--impact-kinetic .lesson-l3-efi__img,
    .lesson-l3-efi__fig--crush .lesson-l3-efi__img,
    .lesson-l3-efi__fig--opposing .lesson-l3-efi__img,
    .lesson-l3-efi__fig--quiz .lesson-l3-efi__img,
    .lesson-l3-efi__img--potential-a,
    .lesson-l3-efi__img--potential-b,
    .lesson-l3-kinetic__img,
    .lesson-l3-kinetic__img--intro,
    .lesson-l3-kinetic__img--effects,
    .lesson-l3-friction__img,
    .lesson-l3-friction__img--intro,
    .lesson-l3-friction__img--definition,
    .lesson-l3-friction__img--grid,
    .lesson-l3-paired__img,
    .lesson-l3-paired__img--grid,
    .lesson-l3-paired__img--understanding,
    .lesson-l3-paired__img--curve {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .lesson-l3-quiz__title {
        text-align: center;
    }

    .lesson-l3-quiz__opts {
        padding-left: 1.1rem;
    }
}


/* ——— Account settings page ——— */
.main--settings {
    background: var(--surface-muted);
}

.settings-page {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.settings-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eefc 45%, #f4f6f9 100%);
    border-bottom: 1px solid rgba(1, 29, 77, 0.12);
    padding: clamp(2rem, 5vw, 2.75rem) 0;
}

.settings-hero__inner {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.settings-hero__icon {
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    border: 1px solid rgba(1, 29, 77, 0.12);
    box-shadow: 0 6px 20px rgba(1, 29, 77, 0.06);
}

.settings-hero__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 3.5vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #011d4d;
    line-height: 1.15;
}

.settings-hero__lead {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.settings-body {
    padding-top: clamp(1.5rem, 4vw, 2rem);
}

.settings-flash {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #86efac;
    border-radius: 10px;
    max-width: 42rem;
    margin-inline: auto;
}

.settings-card {
    max-width: 42rem;
    margin-inline: auto;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid #d4dbe8;
    box-shadow: 0 10px 36px rgba(1, 29, 77, 0.08);
    overflow: hidden;
}

.settings-card>form {
    margin: 0;
}

.settings-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid #e8ecf4;
    background: linear-gradient(180deg, #fafbfd 0%, var(--white) 100%);
}

.settings-card__title {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #011d4d;
    letter-spacing: -0.02em;
}

.settings-card__actions-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.15rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.settings-btn--secondary {
    background: var(--white);
    color: #011d4d;
    border-color: #c9d4e8;
}

.settings-btn--secondary:hover {
    background: #f1f5f9;
}

.settings-btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: #e2e8f0;
}

.settings-btn--ghost:hover {
    background: #f8fafc;
    color: #011d4d;
}

.settings-btn--cancel {
    background: var(--accent-red);
    color: var(--white);
    border-color: transparent;
}

.settings-btn--cancel:hover {
    background: #bb1121;
}

.settings-btn--cancel:focus-visible {
    outline: 2px solid #bb1121;
    outline-offset: 2px;
}

.settings-form {
    padding: 1.35rem 1.35rem 1.5rem;
}

.settings-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.25rem;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-field--full {
    grid-column: 1 / -1;
}

.settings-field__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.settings-field__hint {
    font-weight: 500;
    color: #94a3b8;
}

.settings-field__input {
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: var(--white);
    color: var(--text-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.settings-field__input:focus {
    outline: none;
    border-color: #011d4d;
    box-shadow: 0 0 0 3px rgba(1, 29, 77, 0.15);
}

.settings-field__input[readonly] {
    background: #f8fafc;
    color: #475569;
    cursor: default;
}

@media (max-width: 640px) {
    .settings-form__grid {
        grid-template-columns: 1fr;
    }

    .settings-card__head {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-card__actions-top {
        justify-content: stretch;
    }

    .settings-card__actions-top .settings-btn {
        flex: 1;
        min-width: 0;
    }
}

/* ——— Contact us page ——— */
.main--contact-us {
    background: var(--surface-muted);
}

.contact-us {
    padding: clamp(2rem, 4vw, 2.75rem) 0 clamp(2.5rem, 5vw, 3.4rem);
}

.contact-us__inner {
    width: min(1060px, 100% - 2rem);
    margin-inline: auto;
    background: var(--white);
    border: 1px solid #d4dbe8;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(1, 29, 77, 0.08);
    padding: clamp(1.3rem, 3.2vw, 2rem);
}

.contact-us__title {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #011d4d;
    text-align: center;
}

.contact-us__lead,
.contact-us__info {
    margin: 0 0 0.9rem;
    color: #334155;
    font-size: 1rem;
    line-height: 1.55;
}

.contact-us__section-title {
    margin: 1.15rem 0 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #011d4d;
}

.contact-us__section-line {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 1rem 0 0.55rem;
}

.contact-us__chat-link-wrap {
    margin: 0 0 0.85rem;
}

.contact-us__chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.contact-us__alert {
    margin: 0 0 1rem;
}

.contact-us-form {
    margin-top: 0.65rem;
    max-width: 980px;
    --contact-label-col: 220px;
    --contact-col-gap: 1rem;
}

.contact-us-form__row {
    display: grid;
    grid-template-columns: var(--contact-label-col) 1fr;
    align-items: center;
    gap: 0.7rem var(--contact-col-gap);
    margin-bottom: 0.65rem;
}

.contact-us-form__row--top {
    align-items: start;
}

.contact-us-form__label {
    text-align: right;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
}

.contact-us-form__input {
    width: 100%;
    border: 1px solid #c7d1e3;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 1rem;
    padding: 0.58rem 0.8rem;
    line-height: 1.35;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-us-form__input:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}

.contact-us-form__textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-us-form__hint {
    margin: 0.1rem 0 0.85rem calc(var(--contact-label-col) + var(--contact-col-gap));
    font-size: 0.95rem;
    color: #475569;
}

.contact-us-form__actions {
    margin-left: calc(var(--contact-label-col) + var(--contact-col-gap));
}

.contact-us-form__submit {
    min-width: 150px;
    padding: 0.6rem 1.1rem;
    border-radius: 7px;
    background: #00457c;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.22);
}

.contact-us-form__submit:hover {
    background: #011d4d;
}

.contact-us__phone p {
    margin: 0;
    color: #0f172a;
}

.contact-us__phone a {
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 1.1rem;
}

@media (max-width: 720px) {
    .contact-us-form__row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .contact-us-form__label {
        text-align: left;
    }

    .contact-us-form__hint,
    .contact-us-form__actions {
        margin-left: 0;
    }

    .contact-us__section-title {
        font-size: 1.25rem;
    }

    .contact-us-form__label {
        font-size: 0.98rem;
    }

    .contact-us-form__input {
        font-size: 1rem;
    }
}

/* ——— DMV forms page ——— */
.main--dmv-forms {
    background: var(--surface-muted);
}

.dmv-forms {
    padding: clamp(1.75rem, 4vw, 2.6rem) 0 clamp(2.25rem, 5vw, 3.3rem);
}

.dmv-forms__inner {
    display: block;
    max-width: 1100px;
    margin-inline: auto;
}

.dmv-forms__content {
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.06);
    padding: clamp(1.05rem, 3vw, 1.7rem);
}

.dmv-forms__content h1 {
    margin: 0 0 1rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.55rem, 2.6vw, 1.95rem);
    font-weight: 600;
    line-height: 1.3;
    color: #00457c;
}

.dmv-forms__content h2 {
    margin: 1.5rem 0 0.7rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 600;
    line-height: 1.3;
    color: #00457c;
}

.dmv-forms__content h3 {
    margin: 1.2rem 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.06rem, 1.8vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
    color: #00457c;
}

.dmv-forms__content .dmv-forms__faq-q {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.dmv-forms__content .dmv-forms__faq-q i {
    margin-top: 0.18rem;
    font-size: 0.92em;
    color: #1d4ed8;
}

.dmv-forms__content p {
    margin: 0 0 0.95rem;
    color: #334155;
    font-size: 1rem;
    line-height: 1.55;
}

.dmv-forms__content ul {
    margin: 0 0 0.95rem 1.15rem;
    list-style: disc;
}

.dmv-forms__content li {
    margin: 0 0 0.3rem;
    color: #334155;
    font-size: 1rem;
    line-height: 1.5;
}

.dmv-forms__content a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dmv-forms__content a:hover {
    color: #1d4ed8;
}

.dmv-forms__toc {
    position: sticky;
    top: calc(var(--header-offset) + 1rem);
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(1, 29, 77, 0.06);
    padding: 0.9rem 0.9rem;
}

.dmv-forms__toc h2 {
    margin: 0 0 0.5rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #011d4d;
}

.dmv-forms__toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmv-forms__toc li {
    margin: 0 0 0.15rem;
}

.dmv-forms__toc a {
    display: block;
    padding: 0.35rem 0.45rem;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #334155;
    text-decoration: none;
    line-height: 1.35;
}

.dmv-forms__toc a:hover {
    background: #eaf1ff;
    color: #1d4ed8;
    text-decoration: none;
}

@media (max-width: 980px) {
    .dmv-forms__inner {
        grid-template-columns: 1fr;
    }

    .dmv-forms__toc {
        position: static;
    }
}

/* ——— Terms and conditions page ——— */
.main--terms {
    background: var(--surface-muted);
}

.terms-page {
    padding: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2.4rem, 5vw, 3.2rem);
}

.terms-page__inner {
    width: min(1060px, 100% - 2rem);
    margin-inline: auto;
}

.terms-content {
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.06);
    padding: clamp(1.1rem, 3vw, 1.8rem);
}

.terms-content h1 {
    margin: 0 0 0.55rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #011d4d;
    line-height: 1.3;
    text-align: center;
}

.terms-content__updated {
    margin-bottom: 1rem;
    color: #475569;
    font-size: 0.95rem;
}

.terms-content h2 {
    margin: 1.35rem 0 0.55rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    font-weight: 600;
    color: #00457c;
    line-height: 1.35;
}

.terms-content h3 {
    margin: 1.1rem 0 0.45rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 1.8vw, 1.22rem);
    font-weight: 600;
    color: #00457c;
    line-height: 1.35;
}

.terms-content p {
    margin: 0 0 0.9rem;
    color: #334155;
    font-size: 1rem;
    line-height: 1.55;
}

.terms-content__list {
    margin: 0 0 1rem 1.2rem;
    padding: 0;
    list-style: disc;
}

.terms-content__list li {
    margin: 0 0 0.45rem;
    color: #334155;
    font-size: 1rem;
    line-height: 1.5;
}

.terms-content a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terms-content a:hover {
    color: #1d4ed8;
}

.terms-content__list--ordered {
    list-style: decimal;
    margin-left: 1.5rem;
}

/* ——— Signs in California article ——— */
.signs-content {
    text-align: left;
    padding: clamp(1.25rem, 3.5vw, 2.25rem);
}

.signs-content h1 {
    text-align: left;
    margin-bottom: 0.35rem;
}

.signs-byline {
    margin: 0 0 1.25rem;
    color: #475569;
    font-size: 0.95rem;
}

.signs-byline a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signs-byline a:hover {
    color: #1d4ed8;
}

.signs-link--dotted {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.signs-faq {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.signs-faq h2 {
    margin-top: 0;
}

.signs-faq__block {
    margin-bottom: 1.35rem;
}

.signs-faq__block:last-child {
    margin-bottom: 0;
}

.signs-content .signs-faq__question {
    margin: 0 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}

.signs-faq__answer {
    margin: 0;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.6;
}

.signs-faq__answer a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ——— Customer reviews page ——— */
.main--customer-reviews {
    background: var(--surface-muted);
}

.customer-reviews {
    padding: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2.4rem, 5vw, 3.2rem);
}

.customer-reviews__inner {
    width: min(1080px, 100% - 2rem);
    margin-inline: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d8dfec;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(1, 29, 77, 0.08);
    padding: clamp(1.1rem, 3vw, 1.8rem);
}

.customer-reviews__title {
    margin: 0;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: #011d4d;
}

.customer-reviews__lead {
    margin: 0.35rem 0 1rem;
    color: #475569;
    font-size: 0.98rem;
}

.customer-reviews__summary {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
    border: 1px solid #d9e2f1;
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    margin-bottom: 0.8rem;
}

.customer-reviews__score-card {
    width: 112px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(1, 29, 77, 0.1);
}

.customer-reviews__score-value {
    background: linear-gradient(135deg, #011d4d, #01356b);
    color: #fff;
    text-align: center;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    padding: 1rem 0;
}

.customer-reviews__score-label {
    background: #ab1320;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.45rem 0;
}

.customer-reviews__bars {
    display: grid;
    gap: 0.35rem;
}

.customer-reviews__bar-row {
    display: grid;
    grid-template-columns: 40px 1fr 54px;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
}

.customer-reviews__bar {
    background: #e5e7eb;
    border-radius: 3px;
    height: 11px;
    overflow: hidden;
}

.customer-reviews__bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #01356b 0%, #011d4d 100%);
}

.customer-reviews__overall h2 {
    margin: 0 0 0.3rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #011d4d;
    line-height: 1.2;
}

.customer-reviews__stars {
    color: #f59e0b;
    display: inline-flex;
    gap: 0.16rem;
    font-size: 1.35rem;
}

.customer-reviews__overall-note {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.85rem;
}

.customer-reviews__percent strong {
    display: block;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.35rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.customer-reviews__percent p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.35;
}

.customer-review-card {
    border: 1px solid #d9e2f1;
    border-radius: 12px;
    background: #fff;
    padding: 0.95rem 1rem;
    margin-bottom: 0.75rem;
}

.customer-review-card:last-child {
    margin-bottom: 0;
}

.customer-review-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
}

.customer-review-card__verified {
    color: #1d4ed8;
    font-size: 0.87rem;
    font-weight: 600;
    background: #eaf1ff;
    border: 1px solid #c7d6f7;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.customer-review-card__meta {
    margin: 0.45rem 0;
    color: #6b7280;
    font-size: 0.92rem;
}

.customer-review-card__text {
    margin: 0;
    color: #334155;
    font-size: 1.05rem;
    font-style: italic;
}

.customer-reviews__footer-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1.25rem;
    padding-top: 0.8rem;
    border-top: 1px dashed #d8dfec;
}

.customer-reviews__pagination {
    display: inline-flex;
    gap: 0.4rem;
}

.customer-reviews__page-btn {
    min-width: 34px;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 500;
}

.customer-reviews__page-btn:hover,
.customer-reviews__page-btn.is-active {
    background: #011d4d;
    color: #fff;
    border-color: #011d4d;
}

.customer-reviews__display-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #475569;
    font-size: 1.05rem;
}

.customer-reviews__display-opt select {
    border: 1px solid #94a3b8;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 1rem;
    padding: 0.35rem 0.55rem;
}

@media (max-width: 980px) {
    .customer-reviews__summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .customer-reviews__summary {
        grid-template-columns: 1fr;
    }

    .customer-reviews__score-card {
        width: 140px;
    }

    .customer-review-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-reviews__footer-controls {
        gap: 1rem;
    }
}

/* ——— Articles page ——— */
.main--articles {
    background: var(--surface-muted);
}

.articles-page {
    padding: clamp(1.8rem, 4vw, 2.7rem) 0 clamp(2.4rem, 5vw, 3.3rem);
}

.articles-page__inner {
    width: min(1080px, 100% - 2rem);
    margin-inline: auto;
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(1, 29, 77, 0.07);
    padding: clamp(1.1rem, 3vw, 1.9rem);
}

.articles-page__title {
    margin: 5px;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    font-weight: 700;
    color: #011d4d;
    text-align: center;
}

.articles-page__lead {
    margin: 0.45rem 0 1.1rem;
    font-size: 1rem;
    color: #475569;
    line-height: 1.55;
}

.articles-page__list {
    display: grid;
    gap: 0.85rem;
    margin-top: 20px;
}

.article-item {
    border: 1px solid #d9e2f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.95rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.article-item:hover {
    border-color: #b8c8e6;
    box-shadow: 0 10px 22px rgba(1, 29, 77, 0.08);
    transform: translateY(-1px);
}

.article-item__title {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.14rem, 2vw, 1.42rem);
    font-weight: 700;
    line-height: 1.35;
    color: #00457c;
}

.article-item__title i {
    margin-top: 0.23rem;
    font-size: 0.78em;
    color: #ab1320;
}

.article-item__title-link {
    color: inherit;
    text-decoration: none;
}

.article-item__title-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-item:has(.article-item__title-link):hover .article-item__title-link {
    color: #01356b;
}

.article-item__desc {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #334155;
}

/* ——— Course option page ——— */
.main--course-option {
    background: var(--surface-muted);
}

.course-option-hero {
    position: relative;
    background: url("https://images.unsplash.com/photo-1429041966141-44d228a42775?w=1800&h=900&fit=crop&q=80") center/cover no-repeat;
    padding: clamp(1.8rem, 5vw, 2.8rem) 0;
}

.course-option-hero__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

.course-option-hero__inner {
    position: relative;
    z-index: 1;
}

.course-option-hero__title {
    margin: 0 0 1.1rem;
    text-align: center;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #011d4d;
}

.course-option-hero__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.course-option-plan {
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(1, 29, 77, 0.22);
    padding: 0.95rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.course-option-plan__title {
    margin: 0 0 0.45rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #011d4d;
}

.course-option-plan__price {
    margin: 0 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #334155;
}

.course-option-plan__features {
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.course-option-plan__features li {
    display: grid;
    grid-template-columns: 1.1em minmax(0, 1fr);
    column-gap: 0.45rem;
    align-items: start;
    width: min(100%, 18rem);
    margin-inline: auto;
    margin-bottom: 0;
    font-size: 0.97rem;
    color: #334155;
    line-height: 1.45;
    text-align: left;
}

.course-option-plan__features li span {
    text-align: left;
}

.course-option-plan__features i {
    color: #ab1320;
    font-size: 0.88em;
    line-height: 1.45;
    padding-top: 0.14em;
}

.course-option-plan__cta {
    display: inline-block;
    min-width: 152px;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    background: #ab1320;
    color: #fff;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.course-option-plan__cta:hover {
    background: #bb1121;
    color: #fff;
    text-decoration: none;
}

.course-option-plan__guarantee {
    margin: 0.6rem 0 0;
    color: #01356b;
    font-size: 0.93rem;
    font-weight: 600;
}

.course-option-support {
    padding: 0.95rem 0;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #d8dfec;
}

.course-option-support p {
    margin: 0;
    color: #475569;
    line-height: 1.45;
}

.course-option-summary,
.course-option-why,
.course-option-faq {
    padding: clamp(1.5rem, 4vw, 2.2rem) 0;
}

.course-option-summary__inner {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: start;
}

.course-option-summary__media img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #d8dfec;
    box-shadow: 0 8px 18px rgba(1, 29, 77, 0.08);
}

.course-option-why__intro {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: clamp(1.35rem, 3.2vw, 1.85rem);
    text-align: center;
}

.course-option-summary__content h2,
.course-option-why__intro h2,
.course-option-faq__title {
    margin: 0 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #011d4d;
}

.course-option-summary__content p,
.course-option-why__lead {
    margin: 0 0 0.65rem;
    color: #334155;
    line-height: 1.55;
}

.course-option-why__intro .course-option-why__lead:last-child {
    margin-bottom: 0;
}

.course-option-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.course-option-why-card {
    margin: 0;
    padding: 1.15rem 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(1, 29, 77, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.course-option-why-card:hover {
    border-color: #b8c5da;
    box-shadow: 0 10px 22px rgba(1, 29, 77, 0.12);
}

.course-option-why-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    background: linear-gradient(145deg, #011d4d 0%, #01356b 100%);
    color: #fff;
    font-size: 1.25rem;
}

.course-option-why-card__title {
    margin: 0 0 0.45rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}

.course-option-why-card__text {
    margin: 0;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.55;
}

.course-option-faq__list {
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 12px;
    overflow: hidden;
}

.course-option-faq__item {
    border-bottom: 1px dashed #d4dbe8;
}

.course-option-faq__item:last-child {
    border-bottom: none;
}

.course-option-faq__item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    color: #01356b;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.06rem;
    font-weight: 700;
}

.course-option-faq__item summary::-webkit-details-marker {
    display: none;
}

.course-option-faq__item p {
    margin: 0;
    padding: 0 1rem 0.95rem;
    color: #334155;
    line-height: 1.55;
}

.course-option-faq__item i {
    transition: transform 0.2s;
}

.course-option-faq__item[open] i {
    transform: rotate(180deg);
}

@media (max-width: 980px) {
    .course-option-hero__grid {
        grid-template-columns: 1fr;
    }

    .course-option-summary__inner {
        grid-template-columns: 1fr;
    }
}

/* ——— Bulk order (group / voucher purchasing) ——— */
.main--bulk-order {
    background: var(--surface-muted);
    min-height: 0;
}

.bulk-order-hero {
    background: #fff;
    border-bottom: 1px solid #d8dfec;
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.bulk-order-hero__inner {
    max-width: 760px;
}

.bulk-order-hero__title {
    margin: 0 0 0.65rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 800;
    color: var(--color-navy);
    letter-spacing: 0.02em;
    text-align: center;
}

.bulk-order-hero__lead {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.65;
    color: var(--text-muted);
}

.bulk-order-shell {
    padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(3rem, 6vw, 4rem);
}

.bulk-order-shell__inner {
    max-width: 920px;
}

.bulk-order-section {
    margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    background: #fff;
    border: 1px solid #d8dfec;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(1, 29, 77, 0.06);
}

.bulk-order-section:last-child {
    margin-bottom: 0;
}

.bulk-order-section__title {
    margin: 0 0 0.85rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.2rem, 2.6vw, 1.45rem);
    font-weight: 800;
    color: var(--color-navy);
}

.bulk-order-section__intro {
    margin: 0 0 1.25rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.bulk-order-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
    margin-top: 0.25rem;
}

.bulk-order-step {
    text-align: center;
}

.bulk-order-step__icon {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-navy);
    color: #fff;
    font-size: 1.65rem;
}

.bulk-order-step__text {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1e293b;
    font-weight: 500;
}

.bulk-order-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.bulk-order-table-wrap--narrow {
    max-width: 420px;
    margin-inline: auto;
}

.bulk-order-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
}

/* Wider than small phones: horizontal scroll inside .bulk-order-table-wrap instead of squashing columns */
.bulk-order-table:not(.bulk-order-table--simple) {
    min-width: 600px;
}

.bulk-order-table--simple {
    min-width: 260px;
}

.bulk-order-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: #f1f5f9;
    color: var(--color-navy);
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
}

.bulk-order-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e8edf5;
    vertical-align: top;
    color: #334155;
}

/* Flexible pricing: center beats .bulk-order-table thead th { text-align: left } above */
.bulk-order-table.bulk-order-table--simple thead th,
.bulk-order-table.bulk-order-table--simple tbody td {
    text-align: center;
    vertical-align: middle;
}

.bulk-order-table tbody tr:last-child td {
    border-bottom: none;
}

.bulk-order-course-name {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.bulk-order-desc {
    margin: 0;
}

.bulk-order-desc__summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-navy-hover);
    list-style: none;
}

.bulk-order-desc__summary::-webkit-details-marker {
    display: none;
}

.bulk-order-desc__body {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.bulk-order-qty {
    width: 4.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
}

.bulk-order-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bulk-order-cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bulk-order-total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.bulk-order-total__label {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #0f172a;
}

.bulk-order-total__value {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    color: var(--color-navy);
}

.bulk-order-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #011d4d;
    border: 1px solid #011d4d;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bulk-order-cta:hover {
    background: #01356b;
    border-color: #01356b;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.bulk-order-benefits {
    margin: 0;
    padding-left: 1.2rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.bulk-order-benefits li {
    margin-bottom: 0.65rem;
}

.bulk-order-benefits li:last-child {
    margin-bottom: 0;
}

.bulk-order-faq {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.bulk-order-faq__item {
    border-bottom: 1px solid #e8edf5;
}

.bulk-order-faq__item:last-child {
    border-bottom: none;
}

.bulk-order-faq__summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
}

.bulk-order-faq__summary::-webkit-details-marker {
    display: none;
}

.bulk-order-faq__summary i {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.bulk-order-faq__item[open] .bulk-order-faq__summary i {
    transform: rotate(180deg);
}

.bulk-order-faq__answer {
    padding: 0 1rem 1rem;
}

.bulk-order-faq__answer p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.bulk-order-faq__answer--rich p+p,
.bulk-order-faq__answer--rich p+.bulk-order-faq__lead,
.bulk-order-faq__answer--rich p+.bulk-order-faq__ol,
.bulk-order-faq__answer--rich .bulk-order-faq__ol+p {
    margin-top: 0.85rem;
}

.bulk-order-faq__answer--rich .bulk-order-faq__lead {
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.bulk-order-faq__answer--rich .bulk-order-faq__lead strong {
    color: var(--color-navy);
}

.bulk-order-faq__answer--rich .bulk-order-faq__lead+.bulk-order-faq__ol {
    margin-top: 0.55rem;
}

.bulk-order-faq__answer--rich .bulk-order-faq__ol,
.bulk-order-faq__answer--rich .bulk-order-faq__ul {
    margin: 0.35rem 0 0;
    padding-left: 1.35rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.bulk-order-faq__answer--rich .bulk-order-faq__ol li+li,
.bulk-order-faq__answer--rich .bulk-order-faq__ul li+li {
    margin-top: 0.5rem;
}

.bulk-order-faq__answer--rich .bulk-order-faq__step-title {
    margin: 1.1rem 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.35;
}

.bulk-order-faq__answer--rich>.bulk-order-faq__step-title:first-child {
    margin-top: 0;
}

.bulk-order-faq__answer--rich .bulk-order-faq__ul+.bulk-order-faq__step-title {
    margin-top: 1.15rem;
}

.bulk-order-faq__answer--rich strong {
    color: var(--color-navy);
    font-weight: 700;
}

@media (max-width: 720px) {
    .bulk-order-steps {
        grid-template-columns: 1fr;
    }

    .bulk-order-table-wrap--narrow {
        max-width: none;
        margin-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bulk-order-cta:hover {
        transform: none;
    }
}

bulk-order-step__text {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1e293b;
    font-weight: 500;
}

.bulk-order-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.bulk-order-table-wrap--narrow {
    max-width: 420px;
    margin-inline: auto;
}

.bulk-order-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
}

/* Wider than small phones: horizontal scroll inside .bulk-order-table-wrap instead of squashing columns */
.bulk-order-table:not(.bulk-order-table--simple) {
    min-width: 600px;
}

.bulk-order-table--simple {
    min-width: 260px;
}

.bulk-order-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: #f1f5f9;
    color: var(--color-navy);
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
}

.bulk-order-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e8edf5;
    vertical-align: top;
    color: #334155;
}

/* Flexible pricing: center beats .bulk-order-table thead th { text-align: left } above */
.bulk-order-table.bulk-order-table--simple thead th,
.bulk-order-table.bulk-order-table--simple tbody td {
    text-align: center;
    vertical-align: middle;
}

.bulk-order-table tbody tr:last-child td {
    border-bottom: none;
}

.bulk-order-course-name {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.bulk-order-desc {
    margin: 0;
}

.bulk-order-desc__summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-navy-hover);
    list-style: none;
}

.bulk-order-desc__summary::-webkit-details-marker {
    display: none;
}

.bulk-order-desc__body {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.bulk-order-qty {
    width: 4.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
}

.bulk-order-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bulk-order-cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bulk-order-total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.bulk-order-total__label {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #0f172a;
}

.bulk-order-total__value {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    color: var(--color-navy);
}

.bulk-order-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.35rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #011d4d;
    border: 1px solid #011d4d;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bulk-order-cta:hover {
    background: #01356b;
    border-color: #01356b;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.bulk-order-benefits {
    margin: 0;
    padding-left: 1.2rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.bulk-order-benefits li {
    margin-bottom: 0.65rem;
}

.bulk-order-benefits li:last-child {
    margin-bottom: 0;
}

.bulk-order-faq {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.bulk-order-faq__item {
    border-bottom: 1px solid #e8edf5;
}

.bulk-order-faq__item:last-child {
    border-bottom: none;
}

.bulk-order-faq__summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
}

.bulk-order-faq__summary::-webkit-details-marker {
    display: none;
}

.bulk-order-faq__summary i {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.bulk-order-faq__item[open] .bulk-order-faq__summary i {
    transform: rotate(180deg);
}

.bulk-order-faq__answer {
    padding: 0 1rem 1rem;
}

.bulk-order-faq__answer p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.bulk-order-faq__answer--rich p+p,
.bulk-order-faq__answer--rich p+.bulk-order-faq__lead,
.bulk-order-faq__answer--rich p+.bulk-order-faq__ol,
.bulk-order-faq__answer--rich .bulk-order-faq__ol+p {
    margin-top: 0.85rem;
}

.bulk-order-faq__answer--rich .bulk-order-faq__lead {
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.bulk-order-faq__answer--rich .bulk-order-faq__lead strong {
    color: var(--color-navy);
}

.bulk-order-faq__answer--rich .bulk-order-faq__lead+.bulk-order-faq__ol {
    margin-top: 0.55rem;
}

.bulk-order-faq__answer--rich .bulk-order-faq__ol,
.bulk-order-faq__answer--rich .bulk-order-faq__ul {
    margin: 0.35rem 0 0;
    padding-left: 1.35rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.bulk-order-faq__answer--rich .bulk-order-faq__ol li+li,
.bulk-order-faq__answer--rich .bulk-order-faq__ul li+li {
    margin-top: 0.5rem;
}

.bulk-order-faq__answer--rich .bulk-order-faq__step-title {
    margin: 1.1rem 0 0.4rem;
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.35;
}

.bulk-order-faq__answer--rich>.bulk-order-faq__step-title:first-child {
    margin-top: 0;
}

.bulk-order-faq__answer--rich .bulk-order-faq__ul+.bulk-order-faq__step-title {
    margin-top: 1.15rem;
}

.bulk-order-faq__answer--rich strong {
    color: var(--color-navy);
    font-weight: 700;
}

@media (max-width: 720px) {
    .bulk-order-steps {
        grid-template-columns: 1fr;
    }

    .bulk-order-table-wrap--narrow {
        max-width: none;
        margin-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bulk-order-cta:hover {
        transform: none;
    }
}

/* ——— Lesson slide cards (L1 + L2 + L3 + L4 + L15) ——— */
.lesson-page--l1 .lesson-page__inner--l1,
.lesson-page--l2 .lesson-page__inner--l2,
.lesson-page--l3 .lesson-page__inner--l3,
.lesson-page--l4 .lesson-page__inner--l4,
.lesson-page--l12 .lesson-page__inner--l12,
.lesson-page--l15 .lesson-page__inner--l15 {
    max-width: 1100px;
    margin-inline: auto;
}

.lesson-page--l1 .lesson-l1-slides,
.lesson-page--l2 .lesson-l2-slides,
.lesson-page--l3 .lesson-l3-slides,
.lesson-page--l4 .lesson-l4-slides,
.lesson-page--l12 .lesson-l12-slides,
.lesson-page--l15 .lesson-l15-slides {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text, #1a1a1a);
}

.lesson-page--l4 .lesson-l4-slides>.slide {
    align-self: stretch;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}

.lesson-page--l1 .lesson-l1-slides h1,
.lesson-page--l1 .lesson-l1-slides h2,
.lesson-page--l1 .lesson-l1-slides h3,
.lesson-page--l1 .lesson-l1-slides .lesson-h2,
.lesson-page--l1 .lesson-l1-slides .lesson-h3,
.lesson-page--l2 .lesson-l2-slides h1,
.lesson-page--l2 .lesson-l2-slides h2,
.lesson-page--l2 .lesson-l2-slides h3,
.lesson-page--l2 .lesson-l2-slides .lesson-h2,
.lesson-page--l2 .lesson-l2-slides .lesson-h3,
.lesson-page--l3 .lesson-l3-slides h1,
.lesson-page--l3 .lesson-l3-slides h2,
.lesson-page--l3 .lesson-l3-slides h3,
.lesson-page--l3 .lesson-l3-slides .lesson-h2,
.lesson-page--l3 .lesson-l3-slides .lesson-h3,
.lesson-page--l3 .lesson-l3-slides .lesson-l3-title,
.lesson-page--l4 .lesson-l4-slides h1,
.lesson-page--l4 .lesson-l4-slides h2,
.lesson-page--l4 .lesson-l4-slides h3,
.lesson-page--l4 .lesson-l4-slides .section-title,
.lesson-page--l4 .lesson-l4-slides .section-title-large,
.lesson-page--l15 .lesson-l15-slides h1,
.lesson-page--l15 .lesson-l15-slides h2,
.lesson-page--l15 .lesson-l15-slides h3,
.lesson-page--l15 .lesson-l15-slides .section-title,
.lesson-page--l15 .lesson-l15-slides .section-title-large {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    color: #011d4d;
}

.lesson-page--l12 .lesson-l12-slides h1,
.lesson-page--l12 .lesson-l12-slides h2,
.lesson-page--l12 .lesson-l12-slides h3,
.lesson-page--l12 .lesson-l12-slides .section-title {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    color: #011d4d;
}

.lesson-page--l1 .slide,
.lesson-page--l2 .slide,
.lesson-page--l3 .slide,
.lesson-page--l4 .slide,
.lesson-page--l12 .slide,
.lesson-page--l15 .slide {
    background: #ffffff;
    max-width: 1100px;
    margin: 0 auto 40px auto;
    padding: 52px 60px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.lesson-page--l1 .slide-cover,
.lesson-page--l2 .slide-cover,
.lesson-page--l3 .slide-cover,
.lesson-page--l4 .slide-cover,
.lesson-page--l12 .slide-cover,
.lesson-page--l15 .slide-cover {
    background: #ffffff;
    min-height: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.lesson-page--l1 .slide-cover .cover-text h1,
.lesson-page--l2 .slide-cover .cover-text h1,
.lesson-page--l3 .slide-cover .cover-text h1,
.lesson-page--l4 .slide-cover .cover-text h1,
.lesson-page--l12 .slide-cover .cover-text h1,
.lesson-page--l15 .slide-cover .cover-text h1 {
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.lesson-page--l1 .slide-cover .cover-text p,
.lesson-page--l2 .slide-cover .cover-text p,
.lesson-page--l3 .slide-cover .cover-text p,
.lesson-page--l4 .slide-cover .cover-text p,
.lesson-page--l12 .slide-cover .cover-text p,
.lesson-page--l15 .slide-cover .cover-text p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 18px;
}

.lesson-page--l1 .slide-cover .cover-img,
.lesson-page--l2 .slide-cover .cover-img,
.lesson-page--l3 .slide-cover .cover-img,
.lesson-page--l4 .slide-cover .cover-img,
.lesson-page--l12 .slide-cover .cover-img,
.lesson-page--l15 .slide-cover .cover-img {
    display: flex;
    justify-content: flex-end;
}

.lesson-page--l1 .slide-cover .cover-img img,
.lesson-page--l1 .slide-img,
.lesson-page--l2 .slide-cover .cover-img img,
.lesson-page--l2 .slide-img,
.lesson-page--l3 .slide-cover .cover-img img,
.lesson-page--l3 .slide-img,
.lesson-page--l4 .slide-cover .cover-img img,
.lesson-page--l4 .slide-img,
.lesson-page--l12 .slide-cover .cover-img img,
.lesson-page--l12 .slide-img,
.lesson-page--l15 .slide-cover .cover-img img,
.lesson-page--l15 .slide-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.lesson-page--l1 .slide-cover .cover-img img,
.lesson-page--l2 .slide-cover .cover-img img,
.lesson-page--l3 .slide-cover .cover-img img,
.lesson-page--l4 .slide-cover .cover-img img,
.lesson-page--l15 .slide-cover .cover-img img {
    max-width: 480px;
    max-height: 360px;
    object-fit: contain;
}

.lesson-page--l1 .slide .lesson-block--license-wider,
.lesson-page--l1 .slide .lesson-quiz--wider,
.lesson-page--l1 .slide .lesson-quiz--in-slide,
.lesson-page--l2 .slide .lesson-block--license-wider,
.lesson-page--l2 .slide .lesson-quiz--wider,
.lesson-page--l2 .slide .lesson-quiz--in-slide,
.lesson-page--l3 .slide .lesson-block--license-wider,
.lesson-page--l3 .slide .lesson-quiz--wider,
.lesson-page--l3 .slide .lesson-quiz--in-slide,
.lesson-page--l4 .slide .lesson-quiz--wider,
.lesson-page--l4 .slide .lesson-quiz--in-slide,
.lesson-page--l7 .slide-card .lesson-quiz--wider,
.lesson-page--l7 .slide-card .lesson-quiz--in-slide,
.lesson-page--l8 .l8-slide .lesson-quiz--wider,
.lesson-page--l8 .l8-slide .lesson-quiz--in-slide,
.lesson-page--l9 .l9-card .lesson-quiz--wider,
.lesson-page--l9 .l9-card .lesson-quiz--in-slide,
.lesson-page--l10 .l10-card .lesson-quiz--wider,
.lesson-page--l10 .l10-card .lesson-quiz--in-slide,
.lesson-page--l11 .l11-card .lesson-quiz--wider,
.lesson-page--l11 .l11-card .lesson-quiz--in-slide,
.lesson-page--l12 .slide .lesson-quiz--wider,
.lesson-page--l12 .slide .lesson-quiz--in-slide,
.lesson-page--l13 .quiz-section .lesson-quiz--wider,
.lesson-page--l13 .quiz-section .lesson-quiz--in-slide,
.lesson-page--l14 .slide .lesson-quiz--wider,
.lesson-page--l14 .slide .lesson-quiz--in-slide,
.lesson-page--l15 .slide .lesson-quiz--wider,
.lesson-page--l15 .slide .lesson-quiz--in-slide,
.lesson-page--l5 .slide .lesson-quiz--wider,
.lesson-page--l5 .slide .lesson-quiz--in-slide {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.lesson-page--l1 .slide .lesson-block,
.lesson-page--l2 .slide .lesson-block,
.lesson-page--l3 .slide .lesson-block {
    margin-bottom: 0;
}

.lesson-page--l1 .slide .lesson-block+.lesson-block,
.lesson-page--l2 .slide .lesson-block+.lesson-block,
.lesson-page--l3 .slide .lesson-block+.lesson-block {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.lesson-page--l1 .slide .lesson-quiz,
.lesson-page--l2 .slide .lesson-quiz,
.lesson-page--l2 .slide .lesson-l2-quiz,
.lesson-page--l3 .slide .lesson-quiz,
.lesson-page--l3 .slide .lesson-l3-quiz {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
}

.lesson-page--l1 .lesson-closing--wider,
.lesson-page--l2 .lesson-closing--wider,
.lesson-page--l3 .lesson-closing--wider {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
}

@media (max-width: 768px) {

    .lesson-page--l1 .slide,
    .lesson-page--l2 .slide,
    .lesson-page--l3 .slide,
    .lesson-page--l4 .slide,
    .lesson-page--l15 .slide {
        padding: 32px 24px;
    }

    .lesson-page--l1 .slide-cover,
    .lesson-page--l2 .slide-cover,
    .lesson-page--l3 .slide-cover,
    .lesson-page--l4 .slide-cover,
    .lesson-page--l15 .slide-cover {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 0;
    }

    .lesson-page--l1 .slide-cover .cover-img,
    .lesson-page--l2 .slide-cover .cover-img,
    .lesson-page--l3 .slide-cover .cover-img,
    .lesson-page--l4 .slide-cover .cover-img,
    .lesson-page--l15 .slide-cover .cover-img {
        justify-content: center;
    }

    .lesson-page--l3 .lesson-l3-lowgear {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }

    .lesson-page--l3 .lesson-l3-lowgear__fig {
        justify-self: stretch;
        width: calc(100% + 3rem);
        max-width: none;
        margin-inline: -1.5rem;
    }

    .lesson-page--l3 .lesson-l3-lowgear__img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }
}

/* ——— Lesson 15 — Road Rage ——— */
.lesson-page--l15 .section-title {
    font-size: 1.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    margin-top: 0;
}

.lesson-page--l4 .section-title--blue,
.lesson-page--l15 .section-title--blue {
    color: #1a4a9c;
}

.lesson-page--l15 h2 {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 0;
    color: #1a1a1a;
}

.lesson-page--l15 .slide h2.section-title {
    color: #011d4d;
    font-size: 1.55rem;
}

.lesson-page--l15 p {
    margin-bottom: 14px;
    color: #222;
}

.lesson-page--l15 .content-with-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: start;
}

.lesson-page--l15 .content-with-image .text-col {
    min-width: 0;
}

.lesson-page--l15 .content-with-image .img-col {
    flex-shrink: 0;
    max-width: 340px;
}

.lesson-page--l15 .content-with-image .img-col img {
    display: block;
    border-radius: 6px;
    max-width: 320px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Slide 1 — intro text + hero image (16.png); full image visible on the right */
.lesson-page--l15 .slide-cover.slide-cover--l15-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 36px 32px;
}

.lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-text {
    max-width: none;
}

.lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-img {
    display: flex;
    align-self: start;
    align-items: flex-start;
    justify-content: flex-end;
    justify-self: end;
    width: min(280px, 32vw);
    flex-shrink: 0;
}

.lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-img .slide-img--l15-cover-hero {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    object-position: top right;
    border-radius: 6px;
}

@media (max-width: 768px) {

    /* Lesson 15 cover — stack text then image 16 (override l4 cover-img { display: none }) */
    .lesson-page--l4.lesson-page--l15 .slide-cover.slide-cover--l15-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 28px 20px;
        min-height: 0;
        align-items: stretch;
    }

    .lesson-page--l4.lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-img {
        display: flex !important;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        justify-content: center;
        align-items: center;
    }

    .lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-text {
        min-width: 0;
        max-width: 100%;
    }

    .lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-text h1 {
        font-size: clamp(1.35rem, 5vw, 1.85rem);
        margin-bottom: 1rem;
    }

    .lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-text p {
        font-size: 0.97rem;
        line-height: 1.65;
        max-width: 100%;
    }

    .lesson-page--l15 .slide-cover.slide-cover--l15-intro .cover-img .slide-img--l15-cover-hero {
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;
        object-fit: contain;
        object-position: center;
        margin-inline: auto;
    }
}

/* Slide 3 — text | image rows; narrow image column to match workbook layout */
.lesson-page--l15 .content-with-image--l15-roadrage-trio {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 260px);
    gap: 28px 32px;
}

.lesson-page--l15 .content-with-image--l15-roadrage-trio .img-col {
    max-width: 260px;
}

.lesson-page--l15 .content-with-image--l15-roadrage-trio .img-col img {
    max-width: 240px;
}

.lesson-page--l15 .l15-topic-note {
    margin: -4px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.02em;
}

.lesson-page--l15 .section-divider-light {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 32px 0;
}

@media (max-width: 768px) {
    .lesson-page--l15 .content-with-image {
        grid-template-columns: 1fr;
    }

    .lesson-page--l15 .content-with-image .img-col {
        max-width: 100%;
        justify-self: center;
    }
}

/* Lesson 15 — uniform slide card width (match cover through thank-you) */
.lesson-page--l15 .lesson-l4-slides,
.lesson-page--l15 .lesson-l15-slides {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    box-sizing: border-box;
    align-items: stretch;
}

.lesson-page--l4.lesson-page--l15 .lesson-l4-slides>.slide,
.lesson-page--l15 .lesson-l15-slides>.slide {
    width: 100%;
    max-width: 1100px;
    margin: 0 0 40px 0;
    box-sizing: border-box;
    align-self: stretch;
}

.lesson-page--l4.lesson-page--l15 .slide .slide-thankyou {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.lesson-page--l4.lesson-page--l15 .slide.slide--quiz {
    width: 100%;
    max-width: 1100px;
}

/* ——— Lesson 14 — Driving Experience ——— */
.lesson-page--l14 .lesson-page__inner--l14 {
    max-width: 1100px;
    margin-inline: auto;
}

.lesson-page--l14 .lesson-l14-slides {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text, #1a1a1a);
}

.lesson-page--l14 .lesson-l14-slides h1,
.lesson-page--l14 .lesson-l14-slides h2,
.lesson-page--l14 .lesson-l14-slides h3,
.lesson-page--l14 .lesson-l14-slides .section-title {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    color: #011d4d;
}

.lesson-page--l14 .slide {
    background: #ffffff;
    max-width: 1100px;
    margin: 0 0 40px 0;
    padding: 52px 60px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.lesson-page--l14 .slide-cover--l14 {
    background: #ffffff;
    min-height: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.lesson-page--l14 .slide-cover--l14 .cover-text h1 {
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #f5c400;
}

.lesson-page--l14 .slide-cover--l14 .cover-text p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 18px;
}

.lesson-page--l14 .slide-cover--l14 .cover-img {
    display: flex;
    justify-content: flex-end;
}

.lesson-page--l14 .slide-cover--l14 .cover-img img,
.lesson-page--l14 .slide-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.lesson-page--l14 .slide-cover--l14 .cover-img img {
    max-width: 480px;
    max-height: 360px;
    object-fit: contain;
}

.lesson-page--l14 .section-title {
    font-size: 1.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    margin-top: 0;
}

.lesson-page--l14 .section-title--yellow {
    color: #f5c400;
}

.lesson-page--l14 h2 {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 0;
    color: #1a1a1a;
}

.lesson-page--l14 .slide h2.section-title {
    font-size: 1.55rem;
}

.lesson-page--l14 .slide h2.section-title--yellow {
    color: #f5c400;
}

.lesson-page--l14 p {
    margin-bottom: 14px;
    color: #222;
}

.lesson-page--l14 .content-with-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: start;
}

/* Slide 2 — text left (~65%), image right (~35%); cap image height */
.lesson-page--l14 .content-with-image--l14-side {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 38%);
    gap: 24px 28px;
    align-items: start;
}

.lesson-page--l14 .slide--l14-experience .content-with-image--l14-side .text-col .section-title {
    margin-top: 0;
}

.lesson-page--l14 .slide--l14-experience .content-with-image--l14-side .img-col {
    max-width: 300px;
    width: 100%;
    justify-self: end;
    align-self: start;
}

.lesson-page--l14 .slide--l14-experience .content-with-image--l14-side .img-col img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 220px;
    height: auto;
    object-fit: contain;
    object-position: center right;
    margin-left: auto;
    border-radius: 6px;
}

.lesson-page--l14 .slide--l14-experience .content-with-image--l14-side:first-of-type .img-col img {
    max-height: 200px;
}

.lesson-page--l14 .content-with-image .text-col {
    min-width: 0;
}

.lesson-page--l14 .content-with-image .img-col {
    flex-shrink: 0;
    max-width: 340px;
}

.lesson-page--l14 .content-with-image .img-col img {
    display: block;
    border-radius: 6px;
    max-width: 320px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-page--l14 .section-divider-light {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 32px 0;
}

.lesson-page--l14 .lesson-l4-slides,
.lesson-page--l14 .lesson-l14-slides {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    box-sizing: border-box;
    align-items: stretch;
}

.lesson-page--l4.lesson-page--l14 .lesson-l4-slides>.slide,
.lesson-page--l14 .lesson-l14-slides>.slide {
    width: 100%;
    max-width: 1100px;
    margin: 0 0 40px 0;
    box-sizing: border-box;
    align-self: stretch;
}

.lesson-page--l4.lesson-page--l14 .slide.slide--quiz {
    width: 100%;
    max-width: 1100px;
}

.lesson-page--l14 .slide.slide-thankyou-l14 {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    min-height: 380px;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
}

.lesson-page--l14 .slide-thankyou-l14__media {
    position: relative;
    min-height: 320px;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    overflow: hidden;
}

.lesson-page--l14 .slide-thankyou-l14__media img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    border-radius: 0;
    max-width: none;
}

.lesson-page--l14 .slide-thankyou-l14__text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: #ffffff;
}

.lesson-page--l14 .slide-thankyou-l14__text h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #f5c400;
    margin: 0;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .lesson-page--l14 .slide {
        padding: 32px 24px;
    }

    .lesson-page--l14 .slide-cover--l14 {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 0;
    }

    .lesson-page--l14 .slide-cover--l14 .cover-img {
        justify-content: center;
    }

    .lesson-page--l14 .content-with-image,
    .lesson-page--l14 .content-with-image--l14-side {
        grid-template-columns: 1fr;
    }

    .lesson-page--l14 .content-with-image .img-col,
    .lesson-page--l14 .slide--l14-experience .content-with-image--l14-side .img-col {
        max-width: 100%;
        justify-self: center;
    }

    .lesson-page--l14 .slide--l14-experience .content-with-image--l14-side .img-col img {
        max-height: min(280px, 50vh);
        object-position: center;
        margin-left: auto;
        margin-right: auto;
    }

    .lesson-page--l14 .slide.slide-thankyou-l14 {
        grid-template-columns: 1fr;
    }

    .lesson-page--l14 .slide-thankyou-l14__media {
        clip-path: none;
        min-height: 220px;
    }

    .lesson-page--l14 .slide-thankyou-l14__media img {
        min-height: 220px;
    }
}

/* ——— Lesson 8 — Critical Vehicle Systems and Subsystems ——— */
.lesson-page--l8 {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    color: #111111;
}

.lesson-page--l8 .lesson-page__inner--l8,
.lesson-page--l8 .l8-wrap {
    max-width: 1100px;
    margin-inline: auto;
    box-sizing: border-box;
}

.lesson-page--l8 .l8-wrap {
    padding: 0 20px 60px;
    width: 100%;
}

/* Each slide = white card (no red divider lines) */
.lesson-page--l8 .l8-slide {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    margin: 0 auto 40px;
    padding: 40px 36px;
    border-bottom: none;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
}

.lesson-page--l8 .l8-slide--hero {
    position: relative;
    padding: 48px 36px 40px;
    overflow: hidden;
}

.lesson-page--l8 .l8-banner--hero {
    position: absolute;
    top: 28px;
    right: 36px;
    margin: 0;
    border-radius: 999px;
    z-index: 3;
}

.lesson-page--l8 .l8-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 50%);
    gap: 0;
    align-items: stretch;
    min-height: 460px;
}

.lesson-page--l8 .l8-hero__text {
    min-width: 0;
    padding-right: clamp(16px, 3vw, 32px);
    align-self: center;
}

.lesson-page--l8 .l8-hero__text .l8-h-main {
    margin-top: 0;
}

.lesson-page--l8 .l8-hero__media {
    --l8-hero-clip: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 400px;
    margin-right: -36px;
    padding: 0;
    background: transparent;
}

.lesson-page--l8 .l8-hero__media img,
.lesson-page--l8 .l8-hero-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 560px;
    min-height: 400px;
    max-height: min(500px, 80vh);
    height: auto;
    object-fit: contain;
    object-position: center;
    margin-inline: auto;
    clip-path: var(--l8-hero-clip);
    -webkit-clip-path: var(--l8-hero-clip);
    border-radius: 0;
}

.lesson-page--l8 .l8-slide--thankyou {
    padding: 0;
    overflow: hidden;
}

.lesson-page--l8 .l8-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: start;
    padding-bottom: 36px;
}

.lesson-page--l8 .l8-row:last-child {
    padding-bottom: 0;
}

.lesson-page--l8 .l8-row--full {
    grid-template-columns: 1fr;
}

.lesson-page--l8 .l8-row--img-left {
    grid-template-columns: auto minmax(0, 1fr);
}

.lesson-page--l8 .l8-row__text {
    min-width: 0;
}

.lesson-page--l8 .l8-row__img {
    flex-shrink: 0;
}

.lesson-page--l8 .l8-row__img img {
    display: block;
    border-radius: 6px;
    width: 260px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lesson-page--l8 .l8-row__img--sm img {
    width: 180px;
}

.lesson-page--l8 .l8-row__img--md img {
    width: 220px;
}

.lesson-page--l8 .l8-row__img--lg img {
    width: 320px;
}

.lesson-page--l8 .l8-img-pair {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.lesson-page--l8 .l8-img-pair img {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

.lesson-page--l8 .l8-h-main {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0 0 16px;
    color: #011d4d;
}

.lesson-page--l8 .l8-h-section {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #011d4d;
}

.lesson-page--l8 .l8-h-topic {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: #1a1a1a;
}

.lesson-page--l8 .l8-h-sub {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: #1a1a1a;
}

.lesson-page--l8 .l8-p {
    font-size: 0.97rem;
    line-height: 1.72;
    color: #222222;
    margin: 0 0 14px;
}

.lesson-page--l8 .l8-p:last-child {
    margin-bottom: 0;
}

.lesson-page--l8 .l8-banner {
    background: #d0021b;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 20px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
}

.lesson-page--l8 .l8-quiz-wrap {
    padding: 0;
}

.lesson-page--l8 .l8-quiz-title {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 28px;
    color: #011d4d;
}

.lesson-page--l8 .l8-q {
    margin-bottom: 22px;
}

.lesson-page--l8 .l8-q__text {
    font-size: 0.97rem;
    font-weight: 600;
    color: #111111;
    margin: 0 0 6px;
}

.lesson-page--l8 .l8-q__opt {
    font-size: 0.93rem;
    color: #444444;
    margin: 2px 0;
}

.lesson-page--l8 .l8-q__opt--correct {
    color: #2e7d32;
    font-weight: 700;
}

.lesson-page--l8 .l8-thankyou {
    background: #111111;
    color: #ffffff;
    text-align: center;
    padding: 72px 40px 56px;
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 4px;
}

.lesson-page--l8 .l8-thankyou h2 {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0;
    color: #ffffff;
}

.lesson-page--l8 .l8-thankyou::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #d0021b;
    clip-path: polygon(0 100%, 100% 100%, 85% 0, 0 0);
}

@media (max-width: 680px) {
    .lesson-page--l8 .l8-slide {
        padding: 28px 24px;
        margin-bottom: 28px;
    }

    .lesson-page--l8 .l8-slide--hero {
        padding: 28px 24px 32px;
    }

    .lesson-page--l8 .l8-banner--hero {
        position: static;
        display: inline-block;
        margin-bottom: 16px;
    }

    .lesson-page--l8 .l8-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 24px;
    }

    .lesson-page--l8 .l8-hero__text {
        padding-right: 0;
    }

    .lesson-page--l8 .l8-hero__media {
        margin-right: 0;
        min-height: 280px;
        padding: 0;
    }

    .lesson-page--l8 .l8-hero__media img,
    .lesson-page--l8 .l8-hero-img {
        max-width: 100%;
        min-height: 0;
        max-height: 360px;
        clip-path: none;
        -webkit-clip-path: none;
        border-radius: 8px;
    }

    .lesson-page--l8 .l8-row {
        grid-template-columns: 1fr;
    }

    .lesson-page--l8 .l8-row__img img,
    .lesson-page--l8 .l8-row__img--sm img,
    .lesson-page--l8 .l8-row__img--md img,
    .lesson-page--l8 .l8-row__img--lg img {
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }

    .lesson-page--l8 .l8-img-pair img {
        width: 100%;
    }

    .lesson-page--l8 .l8-img-pair {
        flex-direction: column;
    }

    .lesson-page--l8 .l8-wrap {
        padding: 0 14px 40px;
    }
}

/* ——— Lesson 13 — Substance Abuse ——— */
.lesson-page--l13 .lesson-page__inner--l13 {
    max-width: 1100px;
    margin-inline: auto;
}

.lesson-page--l13 .lesson-l13-slides {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text, #1a1a1a);
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    box-sizing: border-box;
}

.lesson-page--l13 .lesson-l13-slides h1,
.lesson-page--l13 .lesson-l13-slides h2,
.lesson-page--l13 .lesson-l13-slides h3 {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    color: #011d4d;
}

.lesson-page--l13 .slide-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    margin-bottom: 28px;
    overflow: hidden;
}

.lesson-page--l13 .slide-card .card-inner {
    padding: 30px 36px;
}

.lesson-page--l13 .slide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 38%);
    gap: 24px 28px;
    align-items: start;
}

.lesson-page--l13 .slide-grid.no-image {
    grid-template-columns: 1fr;
}

.lesson-page--l13 .slide-grid .slide-text {
    min-width: 0;
}

.lesson-page--l13 .slide-grid .slide-img {
    width: 100%;
    max-width: 260px;
    max-height: 240px;
    border-radius: 8px;
    object-fit: contain;
    object-position: center right;
    display: block;
    justify-self: end;
}

.lesson-page--l13 .slide-img.slide-img--l13-sm {
    max-width: 180px;
    max-height: 155px;
}

.lesson-page--l13 .slide-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.lesson-page--l13 .slide-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 10px;
}

.lesson-page--l13 .slide-card p {
    font-size: 0.97rem;
    color: #333;
    margin-bottom: 10px;
}

.lesson-page--l13 .section-label {
    background: #1565c0;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 20px;
}

.lesson-page--l13 .slide-intro .card-inner {
    padding: 36px 40px;
}

.lesson-page--l13 .slide-intro h2 {
    font-size: 1.6rem;
    margin-bottom: 18px;
    color: #011d4d;
}

.lesson-page--l13 .slide-intro p {
    font-size: 1rem;
    margin-bottom: 14px;
}

.lesson-page--l13 .sub-item {
    border-top: 1px solid #eeeeee;
    padding-top: 20px;
    margin-top: 20px;
}

.lesson-page--l13 .sub-item:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.lesson-page--l13 .quiz-section {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    margin-bottom: 28px;
    overflow: hidden;
}

.lesson-page--l13 .quiz-section .section-label {
    font-size: 0.9rem;
    padding: 10px 28px;
}

.lesson-page--l13 .quiz-section .section-label--quiz {
    font-size: 1rem;
    padding: 12px 28px;
}

.lesson-page--l13 .quiz-body {
    padding: 28px 36px;
}

.lesson-page--l13 .quiz-item {
    margin-bottom: 28px;
}

.lesson-page--l13 .quiz-item:last-child {
    margin-bottom: 0;
}

.lesson-page--l13 .quiz-item .q-text {
    font-weight: 700;
    font-size: 0.97rem;
    margin-bottom: 8px;
}

.lesson-page--l13 .quiz-item .option {
    padding: 4px 0;
    font-size: 0.93rem;
    color: #444444;
}

.lesson-page--l13 .quiz-item .option.correct {
    color: #2e7d32;
    font-weight: 600;
}

.lesson-page--l13 .thank-you {
    text-align: center;
    background: #1565c0;
    color: #ffffff;
    padding: 44px 20px;
    border-radius: 10px;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

@media (max-width: 700px) {
    .lesson-page--l13 .slide-grid {
        grid-template-columns: 1fr;
    }

    .lesson-page--l13 .slide-grid .slide-img {
        max-width: 100%;
        max-height: min(280px, 50vh);
        object-position: center;
        justify-self: center;
        margin-inline: auto;
    }

    .lesson-page--l13 .slide-card .card-inner,
    .lesson-page--l13 .quiz-body {
        padding: 20px;
    }
}

/* ——— Lesson 7 — Urban and rural driving ——— */
.lesson-page--l7 .lesson-page__inner--l7 {
    max-width: 1100px;
    margin-inline: auto;
}

.lesson-page--l7 .lesson-l7-slides {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lesson-page--l7 .lesson-l7-slides>.slide-card,
.lesson-page--l7 .lesson-l7-slides>.thank-you {
    align-self: stretch;
    width: 100%;
    max-width: 1100px;
}

.lesson-page--l7 .lesson-l7-slides h1,
.lesson-page--l7 .lesson-l7-slides h2,
.lesson-page--l7 .lesson-l7-slides h3,
.lesson-page--l7 .lesson-l7-slides h4 {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    color: #111111;
}

.lesson-page--l7 .slide-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 28px;
    overflow: hidden;
}

.lesson-page--l7 .slide-card--l7-title .card-inner {
    text-align: center;
    padding: 40px 32px;
}

.lesson-page--l7 .l7-title-main {
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 20px;
    line-height: 1.2;
}

.lesson-page--l7 .l7-title-figure {
    margin: 0;
}

.lesson-page--l7 .slide-img--title {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    border-radius: 0;
}

.lesson-page--l7 .slide-card .card-body,
.lesson-page--l7 .slide-card .card-inner {
    padding: 28px 36px;
}

.lesson-page--l7 .slide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 38%);
    gap: 24px 28px;
    align-items: start;
}

.lesson-page--l7 .slide-grid.no-img {
    grid-template-columns: 1fr;
}

.lesson-page--l7 .slide-grid-left {
    display: grid;
    grid-template-columns: minmax(200px, 42%) minmax(0, 1fr);
    gap: 24px 28px;
    align-items: start;
}

.lesson-page--l7 .slide-grid .slide-img {
    width: 100%;
    max-width: 220px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    justify-self: end;
}

.lesson-page--l7 .slide-grid .slide-img--wide {
    max-width: 300px;
}

.lesson-page--l7 .slide-grid-left .slide-img {
    width: 100%;
    max-width: 360px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.lesson-page--l7 .slide-card h2 {
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    margin-bottom: 10px;
}

.lesson-page--l7 .slide-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1b1b1b;
    margin-bottom: 8px;
}

.lesson-page--l7 .slide-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 5px;
}

.lesson-page--l7 .slide-card p {
    font-size: 0.96rem;
    color: #333333;
    margin-bottom: 10px;
}

.lesson-page--l7 .slide-card p:last-child {
    margin-bottom: 0;
}

.lesson-page--l7 .section-label {
    background: #2e7d32;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 20px;
}

.lesson-page--l7 .sub-item {
    border-top: 1px solid #eeeeee;
    padding-top: 18px;
    margin-top: 18px;
}

.lesson-page--l7 .sub-item:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.lesson-page--l7 .pair .lbl {
    font-weight: 700;
    font-size: 0.93rem;
}

.lesson-page--l7 .pair .txt {
    font-size: 0.93rem;
    color: #333333;
}

.lesson-page--l7 .quiz-section .section-label--quiz {
    font-size: 0.95rem;
    padding: 10px 20px;
}

.lesson-page--l7 .quiz-body {
    padding: 28px 36px;
}

.lesson-page--l7 .quiz-item {
    margin-bottom: 22px;
}

.lesson-page--l7 .quiz-item:last-child {
    margin-bottom: 0;
}

.lesson-page--l7 .quiz-item .q-text {
    font-weight: 700;
    font-size: 0.96rem;
    margin-bottom: 6px;
}

.lesson-page--l7 .quiz-item .option {
    font-size: 0.92rem;
    color: #444444;
    padding: 2px 0;
}

.lesson-page--l7 .quiz-item .option.correct {
    color: #2e7d32;
    font-weight: 600;
}

.lesson-page--l7 .thank-you {
    text-align: center;
    background: #2e7d32;
    color: #ffffff;
    padding: 44px 20px;
    border-radius: 10px;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

@media (max-width: 720px) {

    .lesson-page--l7 .slide-grid,
    .lesson-page--l7 .slide-grid-left {
        grid-template-columns: 1fr;
    }

    .lesson-page--l7 .slide-grid .slide-img,
    .lesson-page--l7 .slide-grid .slide-img--wide,
    .lesson-page--l7 .slide-grid-left .slide-img {
        max-width: 100%;
        justify-self: center;
    }

    .lesson-page--l7 .slide-card .card-body,
    .lesson-page--l7 .slide-card .card-inner,
    .lesson-page--l7 .quiz-body {
        padding: 18px;
    }
}


/* ——— Lesson 6 — Causes and costs of accidents ——— */
.lesson-page--l6 {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: #1a1a1a;
}

.lesson-page--l6 .lesson-page__inner--l6 {
    max-width: 1100px;
    margin-inline: auto;
    padding-top: clamp(1rem, 3vw, 1.5rem);
    padding-bottom: clamp(2rem, 5vw, 3rem);
}

.lesson-page--l6 .lesson-l6-slides {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lesson-page--l6 .lesson-l6-slides>.slide-card {
    align-self: stretch;
    width: 100%;
    max-width: 1100px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 28px;
    overflow: hidden;
}

.lesson-page--l6 .section-label {
    background: #f5a623;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 20px;
}

.lesson-page--l6 .card-inner {
    padding: 28px 36px;
}

.lesson-page--l6 .slide-card--l6-title .card-inner {
    text-align: center;
    padding: 40px 32px;
}

.lesson-page--l6 .l6-title-main {
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #f5a623;
    margin: 0 0 20px;
    line-height: 1.2;
}

.lesson-page--l6 .l6-title-figure {
    margin: 0;
}

.lesson-page--l6 .slide-img--title {
    max-width: 180px;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

.lesson-page--l6 .slide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 30%);
    gap: 20px 24px;
    align-items: start;
}

.lesson-page--l6 .slide-grid__media {
    justify-self: end;
}

.lesson-page--l6 .sub-item>.slide-grid.l6-slide-pair {
    margin-top: 14px;
}

.lesson-page--l6 .slide-img {
    max-width: 200px;
    width: 100%;
    max-height: 190px;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.lesson-page--l6 .slide-img.slide-img--l6-sm {
    max-width: 150px;
    max-height: 130px;
}

.lesson-page--l6 .l6-img-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.lesson-page--l6 .l6-img-pair .slide-img {
    max-width: 180px;
    max-height: 150px;
}

.lesson-page--l6 .card-inner h3,
.lesson-page--l6 .slide-text h3 {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 10px;
    line-height: 1.3;
}

.lesson-page--l6 .card-inner p,
.lesson-page--l6 .slide-text p {
    font-size: 0.97rem;
    line-height: 1.75;
    color: #333333;
    margin: 0 0 12px;
}

.lesson-page--l6 .card-inner ul,
.lesson-page--l6 .slide-text ul {
    margin: 8px 0 0;
    padding-left: 1.25rem;
}

.lesson-page--l6 .card-inner li,
.lesson-page--l6 .slide-text li {
    font-size: 0.97rem;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 6px;
}

.lesson-page--l6 .sub-item {
    border-top: 1px solid #eeeeee;
    padding-top: 18px;
    margin-top: 18px;
}

.lesson-page--l6 .sub-item:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.lesson-page--l6 .lesson-l6-slides .quiz-section .section-label--quiz {
    font-size: 0.95rem;
    padding: 10px 20px;
}

.lesson-page--l6 .lesson-l6-slides .quiz-body {
    padding: 28px 36px;
}

.lesson-page--l6 .lesson-l6-slides .quiz-item {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #ebebeb;
}

.lesson-page--l6 .lesson-l6-slides .quiz-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.lesson-page--l6 .lesson-l6-slides .q-text {
    font-weight: 600;
    font-size: 0.97rem;
    color: #111111;
    margin: 0 0 8px;
}

.lesson-page--l6 .lesson-l6-slides .option {
    font-size: 0.95rem;
    color: #444444;
    margin: 4px 0;
}

.lesson-page--l6 .lesson-l6-slides .option.correct {
    color: #2e7d32;
    font-weight: 700;
}

.lesson-page--l6 .slide-grid__media.l6-img-stack-2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.lesson-page--l6 .slide-grid__media.l6-img-stack-2 .slide-img {
    max-width: 160px;
    max-height: 140px;
}

.lesson-page--l6 .l6-two-col-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e8e8e8;
}

.lesson-page--l6 .l6-two-col-list ul {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.lesson-page--l6 .l6-two-col-list li {
    margin-bottom: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #333;
}

.lesson-page--l6 .l6-two-col-list li strong {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 0.2rem;
}

@media (max-width: 640px) {
    .lesson-page--l6 .l6-two-col-list {
        grid-template-columns: 1fr;
    }
}

.lesson-page--l6 .slide-card--l6-thanks .l6-thanks-inner {
    text-align: center;
    padding: 2rem 1rem;
}

.lesson-page--l6 .l6-thanks-title {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c45c26;
}

.lesson-page--l6 .slide-card--l6-thanks p {
    margin: 0;
    font-size: 1rem;
    color: #444;
}

/* Legacy content (unused — kept for reference) */
.lesson-page--l6 .l6-wrap--legacy {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.lesson-page--l6 .l6-wrap--legacy .l6-section-header {
    display: none;
}

.lesson-page--l6 .l6-wrap--legacy .l6-card,
.lesson-page--l6 .l6-wrap--legacy .l6-mini-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    padding: 24px 28px;
    margin-bottom: 20px;
    transform: none;
}

.lesson-page--l6 .l6-wrap--legacy .l6-card:hover,
.lesson-page--l6 .l6-wrap--legacy .l6-mini-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.lesson-page--l6 .l6-wrap--legacy .l6-card__title,
.lesson-page--l6 .l6-wrap--legacy .l6-mini-card__title {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 10px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-card__heading-bar,
.lesson-page--l6 .l6-wrap--legacy .l6-tag {
    display: none;
}

.lesson-page--l6 .l6-wrap--legacy .l6-list {
    list-style: disc;
    margin: 8px 0 0;
    padding-left: 1.25rem;
}

.lesson-page--l6 .l6-wrap--legacy .l6-list li {
    display: list-item;
    border: none;
    padding: 0;
    font-size: 0.97rem;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 6px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-list__dot {
    display: none;
}

.lesson-page--l6 .l6-wrap--legacy .slide-img,
.lesson-page--l6 .l6-wrap--legacy img[class*="slide-img"] {
    max-width: 200px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 10px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-grid-2,
.lesson-page--l6 .l6-wrap--legacy .l6-grid-3 {
    display: grid;
    gap: 20px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-page--l6 .l6-wrap--legacy .l6-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 28px 36px;
    margin-bottom: 28px;
    color: #111111;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-card__header,
.lesson-page--l6 .l6-wrap--legacy .l6-quiz-card__icon {
    display: none;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #f5a623;
    margin: 0 0 20px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid #eeeeee;
    border-radius: 0;
    padding: 0 0 18px;
    margin-bottom: 18px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-item__q {
    color: #111111;
    font-weight: 700;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-item__num {
    background: #f5a623;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-option {
    color: #444444;
}

.lesson-page--l6 .l6-wrap--legacy .l6-quiz-option--correct {
    color: #2e7d32;
    font-weight: 600;
}

.lesson-page--l6 .l6-wrap--legacy .l6-thankyou {
    background: #f5a623;
    border-radius: 8px;
    padding: 44px 20px;
    text-align: center;
    margin-top: 28px;
}

.lesson-page--l6 .l6-wrap--legacy .l6-thankyou__emoji {
    display: none;
}

.lesson-page--l6 .l6-wrap--legacy .l6-thankyou__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #ffffff;
    margin: 0;
}

.lesson-page--l6 .l6-wrap--legacy .l6-thankyou__sub {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .lesson-page--l6 .slide-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lesson-page--l6 .slide-grid__media,
    .lesson-page--l6 .slide-grid__media.l6-img-stack-2 {
        justify-self: stretch;
        width: 100%;
        max-width: none;
        align-items: stretch;
    }

    .lesson-page--l6 .l6-img-pair {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 1rem;
    }

    .lesson-page--l6 .slide-img,
    .lesson-page--l6 .slide-img--title,
    .lesson-page--l6 .slide-img.slide-img--l6-sm,
    .lesson-page--l6 .l6-img-pair .slide-img,
    .lesson-page--l6 .slide-grid__media.l6-img-stack-2 .slide-img,
    .lesson-page--l6 .l6-wrap--legacy .slide-img,
    .lesson-page--l6 .l6-wrap--legacy img[class*="slide-img"] {
        display: block;
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;
        margin-inline: auto;
        object-fit: contain;
    }

    .lesson-page--l6 .slide-img--title {
        max-width: min(88vw, 300px);
    }

    .lesson-page--l6 .card-inner {
        padding: 20px;
    }

    .lesson-page--l6 .lesson-l6-slides .quiz-body {
        padding: 20px;
    }

    .lesson-page--l6 .l6-wrap--legacy .l6-grid-2,
    .lesson-page--l6 .l6-wrap--legacy .l6-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ——— Lesson 9 ——— */
/* ─────────────────────────────────────────
PAGE SHELL  (matches grey bg from ref images)
───────────────────────────────────────── */
.lesson-page--l9 {
    background: #F0F0F0;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 36px 20px 64px;
}

/* ─────────────────────────────────────────
CARD  (matches the white rounded card)
───────────────────────────────────────── */
.l9-card {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    padding: 40px 44px;
    max-width: 980px;
    margin: 0 auto 28px;
}

/* ─────────────────────────────────────────
CARD INNER LAYOUT  (text left / img right)
───────────────────────────────────────── */
.l9-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: start;
}

.l9-row--full {
    display: block;
}

.l9-row__text {
    min-width: 0;
}

.l9-row__img {
    flex-shrink: 0;
}

.l9-row__img img {
    display: block;
    width: 280px;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}

/* Wider image for hero card */
.l9-row__img--lg img {
    width: 340px;
}

/* Centred wide image (slide 11 animal crash) */
.l9-img-center {
    margin-top: 24px;
    text-align: center;
}

.l9-img-center img {
    display: inline-block;
    max-width: 680px;
    width: 100%;
    border-radius: 6px;
}

/* ─────────────────────────────────────────
TYPOGRAPHY
───────────────────────────────────────── */
/* Lesson number label */
.l9-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 10px;
}

/* Big lesson title (slide 1) */
.l9-title-main {
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.3px;
    line-height: 1.18;
    color: #111;
    margin: 0 0 20px;
}

/* Section heading  A. AS A PEDESTRIAN */
.l9-h-section {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    color: #1A2744;
    margin: 0 0 14px;
}

/* Topic heading  1. PEDESTRIAN/BICYCLE… */
.l9-h-topic {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    color: #1A2744;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* Sub heading  A. OBEY ALL SIGNALS */
.l9-h-sub {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1A2744;
    margin: 0 0 8px;
}

/* Body copy */
.l9-p {
    font-size: 14.5px;
    line-height: 1.76;
    color: #333;
    margin: 0 0 14px;
}

.l9-p:last-child {
    margin-bottom: 0;
}

/* Bullet list (slide 2 ref image style) */
.l9-ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.l9-ul li {
    font-size: 14.5px;
    line-height: 1.68;
    color: #333;
    padding: 4px 0 4px 18px;
    position: relative;
}

.l9-ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #555;
    font-size: 16px;
    line-height: 1.5;
}

/* Bold inline label (like "Examples of lane signal messages include:" in ref) */
.l9-bold-label {
    font-size: 14.5px;
    font-weight: 700;
    color: #111;
    margin: 14px 0 6px;
}

/* ─────────────────────────────────────────
SECTION DIVIDER CARD  (slim label bar)
───────────────────────────────────────── */
.l9-section-bar {
    max-width: 980px;
    margin: 8px auto 0;
    padding: 0 4px;
}

.l9-section-bar__inner {
    border-left: 4px solid #7CCA42;
    padding: 10px 16px;
    background: #fff;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1A2744;
}

/* ─────────────────────────────────────────
QUIZ
───────────────────────────────────────── */
.l9-quiz-title {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    color: #1A2744;
    margin: 0 0 28px;
}

.l9-q {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #EBEBEB;
}

.l9-q:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.l9-q__text {
    font-size: 14.5px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px;
}

.l9-q__opt {
    font-size: 14px;
    color: #555;
    margin: 3px 0;
}

.l9-q__opt--correct {
    color: #3DAA32;
    font-weight: 700;
}

/* ─────────────────────────────────────────
THANK YOU CARD
───────────────────────────────────────── */
.l9-thankyou {
    text-align: center;
    padding: 60px 40px;
}

.l9-thankyou h2 {
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    color: #111;
    margin: 0;
}

/* Responsive */
@media (max-width: 660px) {
    .l9-card {
        padding: 28px 20px;
    }

    .l9-row {
        grid-template-columns: 1fr;
    }

    .l9-row__img img,
    .l9-row__img--lg img {
        width: 100%;
    }
}

/* ——— Lesson 10 ——— */
/* ── Page shell ── */
.lesson-page--l10 {
    background: #F0F2F5;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 32px 18px 64px;
}

/* ── Card ── */
.l10-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    padding: 36px 40px;
    max-width: 980px;
    margin: 0 auto 22px;
}

/* ── Grid: text-left image-right (matches PDF layout exactly) ── */
.l10-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: start;
}

.l10-grid__text {
    min-width: 0;
}

.l10-grid__img {
    flex-shrink: 0;
}

.l10-grid__img--top-gap {
    margin-top: 28px;
    align-self: start;
}

.l10-grid__img--bottom-gap {
    margin-bottom: 28px;
    align-self: start;
}

/* Full width (no image) */
.l10-full {
    display: block;
}

/* Center-image rows (slide 22, 29) */
.l10-img-center {
    margin-top: 20px;
    text-align: center;
}

.l10-img-center img {
    max-width: 660px;
    width: 100%;
    border-radius: 6px;
}

/* ── Typography — matches the PDF navy headings ── */
/* Lesson title slide 1 */
.l10-title {
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #0D2461;
    margin: 0 0 4px;
}

/* Section heading: A. ALCOHOL: / B. DRUGS: etc. */
.l10-h-sec {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0D2461;
    margin: 0 0 12px;
    letter-spacing: .3px;
}

/* Topic heading: 1. What is alcohol? / 2. How alcohol affects… */
.l10-h-top {
    font-size: 17px;
    font-weight: 700;
    color: #0D2461;
    margin: 0 0 8px;
}

/* Sub heading: a. A drug; a depressant… / b. Typical drink… */
.l10-h-sub {
    font-size: 15px;
    font-weight: 700;
    color: #0D2461;
    margin: 0 0 6px;
}

/* Sub-sub heading: 1) One twelve ounce beer… */
.l10-h-sub2 {
    font-size: 14.5px;
    font-weight: 700;
    color: #0D2461;
    margin: 8px 0 4px;
}

/* Body text */
.l10-p {
    font-size: 14px;
    line-height: 1.74;
    color: #2C2C2C;
    margin: 0 0 12px;
}

.l10-p:last-child {
    margin-bottom: 0;
}

/* ── Section label bar ── */
.l10-label-bar {
    max-width: 980px;
    margin: 4px auto 0;
}

.l10-label-bar__inner {
    border-left: 4px solid #0D2461;
    padding: 9px 14px;
    background: #fff;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0D2461;
}

/* ── Quiz ── */
.l10-quiz-title {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    color: #0D2461;
    letter-spacing: 1px;
    margin: 0 0 26px;
}

.l10-q {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EAEAEA;
}

.l10-q:last-child {
    border: none;
    margin: 0;
    padding: 0;
}

.l10-q__text {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0D2461;
    margin: 0 0 7px;
}

.l10-q__opt {
    font-size: 13.5px;
    color: #444;
    margin: 3px 0;
    text-transform: uppercase;
}

.l10-q__opt--ok {
    color: #1A7F35;
    font-weight: 700;
}

/* ── Thank You ── */
.l10-thankyou {
    text-align: center;
    padding: 60px 20px;
}

.l10-thankyou h2 {
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
    color: #0D2461;
    letter-spacing: 3px;
    margin: 0;
}

/* Responsive — mobile (overrides inline widths from l10img()) */
@media (max-width: 768px) {
    .lesson-page--l10 {
        padding: 24px 12px 48px;
    }

    .l10-card {
        padding: 24px 16px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .l10-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .l10-grid__text {
        min-width: 0;
    }

    .l10-grid__img,
    .l10-grid__img--top-gap,
    .l10-grid__img--bottom-gap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .l10-grid__img[style*="flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .lesson-page--l10 .l10-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        box-sizing: border-box;
        margin-inline: auto;
    }

    .l10-img-center {
        margin-top: 1.25rem;
        overflow: hidden;
        width: 100%;
    }

    .l10-title {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }

    .l10-thankyou h2 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        letter-spacing: 0.05em;
    }
}

/* ——— Lesson 11 ——— */
/* ── Page shell ── */
.lesson-page--l11 {
    background: #F0F2F5;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 32px 18px 64px;
}

/* ── Card ── */
.l11-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    padding: 36px 40px;
    max-width: 980px;
    margin: 0 auto 20px;
}

/* ── Grid: text-left image-right ── */
.l11-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: start;
}

.l11-grid__text {
    min-width: 0;
}

.l11-grid__img {
    flex-shrink: 0;
}

/* Stack of images in right column */
.l11-grid__img--stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}

/* Full-width (no image) */
.l11-full {
    display: block;
}

/* Centre image below text */
.l11-img-center {
    margin-top: 22px;
    text-align: center;
}

.l11-img-center img {
    max-width: 660px;
    width: 100%;
    border-radius: 6px;
}

/* ── Typography — matches PDF exactly ── */
/* Lesson number label */
.l11-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 10px;
}

/* Hero title */
.l11-title {
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #111;
    margin: 0 0 6px;
}

/* Major section heading: A. SHARING THE ROAD… */
.l11-h-sec {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: underline;
    color: #111;
    margin: 0 0 14px;
}

/* Topic heading: 1. Motorcycles are harder to see. */
.l11-h-top {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* Sub heading: a. Be aware of blind spots… */
.l11-h-sub {
    font-size: 15.5px;
    font-weight: 700;
    color: #111;
    margin: 0 0 7px;
}

/* Body copy */
.l11-p {
    font-size: 14px;
    line-height: 1.75;
    color: #2C2C2C;
    margin: 0 0 12px;
}

.l11-p:last-child {
    margin: 0;
}

/* ── Section label bar ── */
.l11-label {
    max-width: 980px;
    margin: 4px auto 0;
}

.l11-label__inner {
    border-left: 4px solid #E3000B;
    padding: 9px 14px;
    background: #fff;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #111;
}

/* ── Quiz ── */
.l11-quiz-title {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    color: #E3000B;
    letter-spacing: 1px;
    margin: 0 0 26px;
}

.l11-q {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #EAEAEA;
}

.l11-q:last-child {
    border: none;
    margin: 0;
    padding: 0;
}

.l11-q__text {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px;
}

.l11-q__opt {
    font-size: 13.5px;
    color: #444;
    margin: 3px 0;
}

.l11-q__opt--ok {
    color: #1A7F35;
    font-weight: 700;
}

/* ── Thank You ── */
.l11-thankyou {
    text-align: center;
    padding: 56px 20px;
}

.l11-thankyou h2 {
    font-size: 36px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #111;
    margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .l11-card {
        padding: 22px 16px;
    }

    .l11-grid {
        grid-template-columns: 1fr;
    }

    .l11-grid__img--stack {
        flex-direction: row;
        flex-wrap: wrap;
    }
}


/* ——— Lesson 12 — Risk taking & teen risk perception ——— */
.lesson-page--l12 .lesson-page__inner--l12 {
    max-width: 1100px;
    margin-inline: auto;
}

.lesson-page--l12 .lesson-l12-slides {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    box-sizing: border-box;
}

.lesson-page--l4.lesson-page--l12 .lesson-l4-slides>.slide,
.lesson-page--l12 .lesson-l12-slides>.slide {
    width: 100%;
    max-width: 1100px;
    margin: 0 0 40px 0;
    box-sizing: border-box;
}

.lesson-page--l12 .slide {
    background: #ffffff;
    padding: 52px 60px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    border-radius: 4px;
    overflow: hidden;
}

.lesson-page--l12 .slide--l12-image-only {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lesson-page--l12 .slide--l12-image-only__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.lesson-page--l12 .slide-cover.slide-cover--l12 {
    background: #0a0a0c;
    padding: 0;
    min-height: 520px;
    display: block;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.lesson-page--l12 .slide-cover--l12::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(40, 40, 50, 0.5) 0%, transparent 55%);
    pointer-events: none;
}

.lesson-page--l12 .slide-cover--l12__accent--bar {
    position: absolute;
    left: 24px;
    bottom: 32px;
    width: 56px;
    height: 5px;
    background: #ff6b2d;
    border-radius: 2px;
    z-index: 2;
}

.lesson-page--l12 .slide-cover--l12__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 40px 28px;
    min-height: 520px;
}

.lesson-page--l12 .slide-cover--l12__title {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.15rem, 3.2vw, 1.85rem);
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 auto;
    padding: 0 12px;
    max-width: 56rem;
    letter-spacing: 0.04em;
}

.lesson-page--l12 .slide-cover--l12__visual {
    margin-top: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.lesson-page--l12 .slide-cover--l12__car {
    display: block;
    width: 100%;
    max-width: 920px;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6));
}

.lesson-page--l12 .section-title--orange {
    color: #e85d04;
    font-size: 1.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    margin-top: 0;
}

.lesson-page--l12 h2 {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 0;
    color: #1a1a1a;
}

.lesson-page--l12 p {
    margin-bottom: 14px;
    color: #222;
}

/* One image per slide — text | image grid (same pattern as your slide exports) */
.lesson-page--l12 .l12-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: 32px 40px;
    align-items: start;
}

.lesson-page--l12 .l12-grid--stack {
    grid-template-columns: 1fr;
    gap: 20px;
}

.lesson-page--l12 .l12-grid__text {
    min-width: 0;
}

.lesson-page--l12 .l12-grid__media {
    min-width: 0;
}

.lesson-page--l12 .l12-grid__media img,
.lesson-page--l12 .l12-grid__media--full .slide-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.lesson-page--l12 .l12-grid__media--full {
    max-width: 100%;
}

/* A. Youthful Risk Taking — three rows: text | image (3, 4, 5) */
.lesson-page--l12 .l12-youthful-multi {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 8px;
}

.lesson-page--l12 .l12-youthful-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 28px 36px;
    align-items: start;
}

.lesson-page--l12 .l12-youthful-pair__text h2 {
    margin-top: 0;
}

.lesson-page--l12 .l12-youthful-pair__text h2:not(:first-child) {
    margin-top: 8px;
}

.lesson-page--l12 .l12-youthful-pair__img {
    min-width: 0;
}

.lesson-page--l12 .l12-youthful-pair__img .slide-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* B. Risk Perception — one card, three rows: text | image (8, 9, 10); images capped for fit */
.lesson-page--l12 .l12-b-perception-intro {
    margin-bottom: 0;
}

.lesson-page--l12 .l12-b-perception-intro p {
    margin-bottom: 0;
}

.lesson-page--l12 .l12-b-perception-multi {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 12px;
}

.lesson-page--l12 .l12-b-perception-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
    gap: 22px 28px;
    align-items: start;
}

.lesson-page--l12 .l12-b-perception-pair__text h2 {
    margin-top: 0;
}

.lesson-page--l12 .l12-b-perception-pair__img {
    min-width: 0;
}

.lesson-page--l12 .l12-b-perception-pair__img .slide-img {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 6px;
    display: block;
    margin-inline: auto;
}

/* §5–8 one card: images 11,12 beside §5,§6; §7 full-width text; image 13 beside §8 */
.lesson-page--l12 .l12-attitudes-multi {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 8px;
}

.lesson-page--l12 .l12-attitudes-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 200px);
    gap: 20px 24px;
    align-items: start;
}

.lesson-page--l12 .l12-attitudes-pair__text h2 {
    margin-top: 0;
}

.lesson-page--l12 .l12-attitudes-pair__img {
    min-width: 0;
}

.lesson-page--l12 .l12-attitudes-pair__img .slide-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 6px;
    display: block;
    margin-inline: auto;
}

.lesson-page--l12 .l12-attitudes-point7 h2 {
    margin-top: 0;
}

.lesson-page--l12 .l12-attitudes-point7 p:last-child {
    margin-bottom: 0;
}

/* Slide: §4–5 (text) | stacked images 6, 7; then §6–7 full width */
.lesson-page--l12 .l12-risk-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 28px 40px;
    align-items: start;
    margin-bottom: 32px;
}

.lesson-page--l12 .l12-risk-split__images {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.lesson-page--l12 .l12-risk-split__images .slide-img {
    width: 100%;
    height: auto;
    display: block;
}

.lesson-page--l12 .l12-risk-split__images .slide-img:not(.l12-img-passengers) {
    border-radius: 6px;
}

.lesson-page--l12 .l12-img-passengers {
    border-radius: 1.75rem 0.5rem 2.25rem 0.5rem;
}

.lesson-page--l12 .l12-risk-bottom h2 {
    margin-top: 1.25rem;
}

.lesson-page--l12 .l12-risk-bottom h2:first-child {
    margin-top: 0;
}

@media (max-width: 900px) {
    .lesson-page--l12 .l12-risk-split {
        grid-template-columns: 1fr;
    }

    .lesson-page--l12 .l12-risk-split__images,
    .lesson-page--l12 .l12-youthful-pair__img,
    .lesson-page--l12 .l12-b-perception-pair__img,
    .lesson-page--l12 .l12-attitudes-pair__img,
    .lesson-page--l12 .l12-grid__media {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .lesson-page--l12 .l12-youthful-pair {
        grid-template-columns: 1fr;
    }

    .lesson-page--l12 .l12-b-perception-pair {
        grid-template-columns: 1fr;
    }

    .lesson-page--l12 .l12-attitudes-pair {
        grid-template-columns: 1fr;
    }

    .lesson-page--l12 .l12-grid {
        grid-template-columns: 1fr;
    }
}

.lesson-page--l12 .section-divider-light {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 28px 0;
}

.lesson-page--l12 .quiz-title--l12 {
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-page--l12 .quiz-title--l12__muted {
    color: #4b5563;
}

.lesson-page--l12 .quiz-title--l12__accent {
    color: #e85d04;
}

.lesson-page--l4.lesson-page--l12 .slide.slide--quiz {
    width: 100%;
    max-width: 1100px;
}

.lesson-page--l4.lesson-page--l12 .slide--quiz .quiz-title.quiz-title--l12 {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    margin-bottom: 36px;
    letter-spacing: 0.04em;
}

.lesson-page--l12 .slide-thankyou-l12 {
    position: relative;
    min-height: 420px;
    padding: 0;
    background: #050506;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lesson-page--l12 .slide-thankyou-l12__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.lesson-page--l12 .slide-thankyou-l12__title-wrap {
    position: relative;
    z-index: 1;
    padding: 56px 40px;
    text-align: center;
    width: 100%;
    pointer-events: none;
}

.lesson-page--l12 .slide-thankyou-l12__title-wrap .slide-thankyou-l12__title {
    pointer-events: auto;
}

.lesson-page--l12 .slide-thankyou-l12__title {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(2.75rem, 7vw, 4.25rem);
    font-weight: 900;
    font-style: italic;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.06em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.lesson-page--l12 .slide-thankyou-l12__deco {
    position: absolute;
    background: #ff6b2d;
    pointer-events: none;
}

.lesson-page--l12 .slide-thankyou-l12__deco--pill {
    left: 20px;
    top: 0;
    width: 10px;
    height: 120px;
    border-radius: 0 0 8px 8px;
}

.lesson-page--l12 .slide-thankyou-l12__deco--line {
    height: 3px;
    border-radius: 2px;
}

.lesson-page--l12 .slide-thankyou-l12__deco--tr {
    width: 48px;
    top: 28px;
    right: 28px;
}

.lesson-page--l12 .slide-thankyou-l12__deco--below {
    width: 140px;
    left: 50%;
    margin-left: -140px;
    bottom: 38%;
}

.lesson-page--l12 .slide-thankyou-l12__deco--br {
    width: 48px;
    right: 24px;
    bottom: 28px;
}

@media (max-width: 768px) {
    .lesson-page--l4.lesson-page--l12 .slide {
        padding: 28px 20px;
        box-sizing: border-box;
    }

    .lesson-page--l12 .slide--l12-image-only {
        padding: 16px;
    }

    .lesson-page--l12 .l12-grid,
    .lesson-page--l12 .l12-youthful-pair,
    .lesson-page--l12 .l12-b-perception-pair,
    .lesson-page--l12 .l12-attitudes-pair,
    .lesson-page--l12 .l12-risk-split {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lesson-page--l12 .l12-grid__text,
    .lesson-page--l12 .l12-youthful-pair__text,
    .lesson-page--l12 .l12-b-perception-pair__text,
    .lesson-page--l12 .l12-attitudes-pair__text,
    .lesson-page--l12 .l12-risk-split__text {
        min-width: 0;
        max-width: 100%;
    }

    .lesson-page--l12 .l12-grid__media,
    .lesson-page--l12 .l12-youthful-pair__img,
    .lesson-page--l12 .l12-b-perception-pair__img,
    .lesson-page--l12 .l12-attitudes-pair__img,
    .lesson-page--l12 .l12-risk-split__images {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-inline: 0;
    }

    .lesson-page--l12 .l12-risk-split__images {
        gap: 1rem;
    }

    .lesson-page--l12 .slide-img,
    .lesson-page--l12 .slide--l12-image-only__img,
    .lesson-page--l12 .l12-grid__media img,
    .lesson-page--l12 .l12-grid__media--full .slide-img,
    .lesson-page--l12 .l12-youthful-pair__img .slide-img,
    .lesson-page--l12 .l12-b-perception-pair__img .slide-img,
    .lesson-page--l12 .l12-attitudes-pair__img .slide-img,
    .lesson-page--l12 .l12-risk-split__images .slide-img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        object-fit: contain !important;
        display: block;
        margin-inline: auto;
        box-sizing: border-box;
    }

    .lesson-page--l12 .section-title--orange {
        font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    }

    .lesson-page--l12 .slide-thankyou-l12 {
        min-height: 320px;
    }

    .lesson-page--l12 .slide-thankyou-l12__bg {
        object-fit: cover;
        object-position: center;
    }

    .lesson-page--l12 .slide-thankyou-l12__title-wrap {
        padding: 40px 20px;
    }
}

/* ——— Lesson 4 slide deck ——— */
.lesson-page--l4 .lesson-page__inner--l4 {
    max-width: 1100px;
    margin-inline: auto;
}

.lesson-page--l4 .lesson-l4-slides {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text, #1a1a1a);
}

.lesson-page--l4 .lesson-l4-slides h1,
.lesson-page--l4 .lesson-l4-slides h2,
.lesson-page--l4 .lesson-l4-slides h3,
.lesson-page--l4 .lesson-l4-slides .section-title,
.lesson-page--l4 .lesson-l4-slides .section-title-large {
    font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
    color: #011d4d;
}

.lesson-page--l4 .slide-img--thankyou {
    display: block;
    max-width: 280px;
    margin: 0 auto 1.25rem;
}


/* ===== SLIDE WRAPPER ===== */
.lesson-page--l4 .slide {
    background: #ffffff;
    max-width: 1100px;
    margin: 0 auto 40px auto;
    padding: 52px 60px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    border-radius: 4px;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

/* ===== COVER SLIDE ===== */
.lesson-page--l4 .slide-cover {
    background: #ffffff;
    min-height: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.lesson-page--l4 .slide-cover .cover-text h1 {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}

.lesson-page--l4 .slide-cover .cover-text p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 18px;
}

.lesson-page--l4 .slide-cover .cover-img {
    display: flex;
    justify-content: flex-end;
}

.lesson-page--l4 .slide-cover .cover-img img,
.lesson-page--l4 .slide-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.lesson-page--l4 .slide-cover .cover-img img {
    max-width: 480px;
    max-height: 360px;
    object-fit: contain;
}

.lesson-page--l4 .slide-img--composite {
    object-fit: contain;
}

/* ===== SECTION HEADINGS ===== */
.lesson-page--l4 .section-title {
    font-size: 1.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    margin-top: 0;
}

.lesson-page--l4 .section-title-large {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.lesson-page--l4 h2 {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 12px;
    margin-top: 28px;
}

.lesson-page--l4 .slide>h2:first-child,
.lesson-page--l4 .text-col>h2:first-child,
.lesson-page--l4 .text-col>.section-title:first-child,
.lesson-page--l4 .slide>h4:first-child {
    margin-top: 0;
}

.lesson-page--l4 h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 28px;
}

.lesson-page--l4 h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 20px;
}

.lesson-page--l4 p {
    margin-bottom: 14px;
    color: #222;
}

/* ===== LAYOUT: TEXT + IMAGE SIDE BY SIDE ===== */
.lesson-page--l4 .content-with-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 38%);
    gap: 28px 32px;
    align-items: start;
}

.lesson-page--l4 .content-with-image.image-left {
    grid-template-columns: minmax(140px, 38%) minmax(0, 1fr);
}

.lesson-page--l4 .content-with-image .text-col {
    min-width: 0;
}

.lesson-page--l4 .content-with-image .img-col {
    flex-shrink: 0;
    min-width: 0;
    max-width: 320px;
    width: 100%;
    justify-self: end;
    align-self: start;
}

.lesson-page--l4 .content-with-image .img-col img,
.lesson-page--l4 .content-with-image .img-col .slide-img {
    display: block;
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center right;
    margin-left: auto;
}

.lesson-page--l4 .content-with-image .img-col .slide-img.slide-img--l4-xs,
.lesson-page--l4 .slide-img--l4-xs {
    max-width: 180px;
}

.lesson-page--l4 .content-with-image .img-col .slide-img.slide-img--l4-sm,
.lesson-page--l4 .slide-img--l4-sm {
    max-width: 220px;
}

.lesson-page--l4 .content-with-image .img-col .slide-img.slide-img--l4-signal,
.lesson-page--l4 .slide-img--l4-signal {
    max-width: 180px;
}

.lesson-page--l4 .content-with-image .img-col .slide-img.slide-img--l4-tiny,
.lesson-page--l4 .slide-img--l4-tiny {
    max-width: 140px;
}

.lesson-page--l4 .content-with-image .img-col .slide-img.slide-img--l4-md,
.lesson-page--l4 .slide-img--l4-md {
    max-width: 260px;
}

.lesson-page--l4 .content-with-image .img-col .slide-img.slide-img--l4-lg,
.lesson-page--l4 .slide-img--l4-lg {
    max-width: 280px;
}

/* ===== IMAGE GRID ===== */
.lesson-page--l4 .img-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.lesson-page--l4 .img-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.lesson-page--l4 .img-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.lesson-page--l4 .img-grid-2 img,
.lesson-page--l4 .img-grid-3 img,
.lesson-page--l4 .img-grid-4 img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Small image grid labels */
.lesson-page--l4 .img-labeled {
    text-align: center;
    font-size: 0.72rem;
    color: #555;
    margin-top: 3px;
}

/* ===== TRAFFIC SIGNAL GRID (Slide 2) ===== */
.lesson-page--l4 .traffic-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: #cce6f7;
    border-radius: 8px;
    padding: 14px;
}

.lesson-page--l4 .signal-cell {
    background: #cce6f7;
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
}

.lesson-page--l4 .signal-cell .signal-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 8px;
    display: inline-block;
}

.lesson-page--l4 .signal-cell .signal-label.red {
    background: #d32f2f;
}

.lesson-page--l4 .signal-cell .signal-label.yellow {
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .signal-cell .signal-label.green {
    background: #388e3c;
}

.lesson-page--l4 .signal-pole {
    width: 60px;
    height: 130px;
    background: #222;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 0;
}

.lesson-page--l4 .signal-light {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #333;
}

.lesson-page--l4 .signal-light.red-on {
    background: radial-gradient(circle at 35% 35%, #ff8a80, #d32f2f);
    box-shadow: 0 0 10px #ff5252;
}

.lesson-page--l4 .signal-light.yellow-on {
    background: radial-gradient(circle at 35% 35%, #ffe57f, #f9a825);
    box-shadow: 0 0 10px #ffd740;
}

.lesson-page--l4 .signal-light.green-on {
    background: radial-gradient(circle at 35% 35%, #69f0ae, #388e3c);
    box-shadow: 0 0 10px #00e676;
}

.lesson-page--l4 .signal-scene {
    margin-top: 8px;
    width: 100%;
    height: 36px;
    background: #b0bec5;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.lesson-page--l4 .signal-scene .road-line {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    border-top: 3px dashed white;
}

/* ===== PURPOSE GRID (Regulation/Warning/Info/Guidance) ===== */
.lesson-page--l4 .purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 10px;
}

.lesson-page--l4 .purpose-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.lesson-page--l4 .purpose-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.lesson-page--l4 .purpose-card .purpose-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    padding: 4px;
    background: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}

/* ===== TRAFFIC SIGNS ICON GRID (Slide 4) ===== */
.lesson-page--l4 .signs-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.lesson-page--l4 .sign-icon-cell {
    text-align: center;
    padding: 6px 4px;
}

.lesson-page--l4 .sign-icon-cell .sign-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 4px auto;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.lesson-page--l4 .sign-icon-cell .sign-name {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
}

/* Sign shapes */
.lesson-page--l4 .sign-blue-circle {
    background: #1565c0;
    border-radius: 50%;
    color: #fff;
}

.lesson-page--l4 .sign-red-triangle {
    background: transparent;
    border-bottom: 54px solid #d32f2f;
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    height: 0;
    width: 0;
    position: relative;
}

.lesson-page--l4 .sign-red-triangle span {
    position: absolute;
    top: 18px;
    left: -14px;
    color: white;
    font-size: 0.9rem;
    font-weight: 900;
}

.lesson-page--l4 .sign-red-circle {
    background: #d32f2f;
    border-radius: 50%;
    color: #fff;
}

.lesson-page--l4 .sign-blue-square {
    background: #1976d2;
    color: #fff;
    border-radius: 4px;
}

.lesson-page--l4 .sign-yellow-diamond {
    background: #f9a825;
    transform: rotate(45deg);
    width: 40px;
    height: 40px;
    margin: 7px auto;
}

.lesson-page--l4 .sign-yellow-diamond span {
    transform: rotate(-45deg);
    display: block;
    font-size: 0.9rem;
}

.lesson-page--l4 .sign-red-octagon {
    background: #d32f2f;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    color: #fff;
}

.lesson-page--l4 .sign-parking {
    background: #1565c0;
    border-radius: 4px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.lesson-page--l4 .sign-no-vehicle {
    background: #d32f2f;
    border-radius: 50%;
    color: #fff;
    position: relative;
}

.lesson-page--l4 .sign-no-vehicle::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 4px;
    background: white;
    top: 50%;
    left: 10%;
    transform: translateY(-50%) rotate(-45deg);
}

/* ===== TRAFFIC LIGHT INFOGRAPHIC (Slide 5) ===== */
.lesson-page--l4 .traffic-light-infographic {
    background: #e0f7f6;
    border: 2px solid #4db6ac;
    border-radius: 12px;
    padding: 20px 16px;
    max-width: 240px;
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
}

.lesson-page--l4 .traffic-light-infographic h4 {
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-top: 0;
    letter-spacing: 0.05em;
}

.lesson-page--l4 .tl-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.lesson-page--l4 .tl-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lesson-page--l4 .tl-circle.stop {
    background: #d32f2f;
}

.lesson-page--l4 .tl-circle.wait {
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .tl-circle.go {
    background: #388e3c;
}

.lesson-page--l4 .tl-desc {
    font-size: 0.82rem;
    line-height: 1.4;
}

.lesson-page--l4 .tl-desc strong {
    display: block;
    font-size: 0.85rem;
}

.lesson-page--l4 .tl-desc .color-red {
    color: #d32f2f;
}

.lesson-page--l4 .tl-desc .color-yellow {
    color: #f9a825;
}

.lesson-page--l4 .tl-desc .color-green {
    color: #388e3c;
}

/* ===== ARROW SIGNAL CARDS (Slide 6) ===== */
.lesson-page--l4 .arrow-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    max-width: 300px;
    width: 100%;
    margin-left: auto;
}

.lesson-page--l4 .arrow-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f5f5f5;
}

.lesson-page--l4 .arrow-card .arrow-box {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.lesson-page--l4 .arrow-card .arrow-desc {
    font-size: 0.82rem;
    line-height: 1.4;
}

.lesson-page--l4 .arrow-card .arrow-desc strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.lesson-page--l4 .slide>.content-with-image+hr+.content-with-image {
    margin-top: 0;
}

.lesson-page--l4 .content-with-image h3 {
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.lesson-page--l4 .content-with-image .img-col .slide-img--composite,
.lesson-page--l4 .slide-img--composite {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    margin-left: auto;
}

.lesson-page--l4 .bg-red {
    background: #d32f2f;
    color: white;
}

.lesson-page--l4 .bg-yellow {
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .bg-yellow-flash {
    background: repeating-linear-gradient(45deg, #f9a825, #f9a825 4px, #fff8e1 4px, #fff8e1 8px);
    color: #222;
}

.lesson-page--l4 .bg-green {
    background: #388e3c;
    color: white;
}

/* ===== BULLET LIST ===== */
.lesson-page--l4 ul.content-list {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 14px;
}

.lesson-page--l4 ul.content-list li {
    margin-bottom: 6px;
}

.lesson-page--l4 ul.content-list.tight li {
    margin-bottom: 3px;
}

/* ===== SECTION DIVIDER ===== */
.lesson-page--l4 .section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 28px 0 24px;
}

.lesson-page--l4 .section-divider-light {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 24px 0 20px;
}

.lesson-page--l4 .l4-full-width {
    width: 100%;
    clear: both;
}

.lesson-page--l4 .l4-text-block {
    margin-bottom: 0;
}

.lesson-page--l4 .l4-text-block h3 {
    margin-top: 0;
}

.lesson-page--l4 .l4-img-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.lesson-page--l4 .l4-img-stack .slide-img {
    max-width: 200px;
}

.lesson-page--l4 .slide--thankyou-l4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    min-height: 280px;
}

.lesson-page--l4 .slide--thankyou-l4 h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin: 0;
}

/* ===== INFO SIGNS GRID (Slide 3 info section) ===== */
.lesson-page--l4 .info-signs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.lesson-page--l4 .info-sign {
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.3;
    color: #fff;
}

.lesson-page--l4 .info-sign.brown {
    background: #795548;
}

.lesson-page--l4 .info-sign.green {
    background: #2e7d32;
}

.lesson-page--l4 .info-sign.blue {
    background: #1565c0;
}

.lesson-page--l4 .info-sign.dark-green {
    background: #1b5e20;
}

.lesson-page--l4 .info-sign.route {
    background: #b71c1c;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.lesson-page--l4 .info-sign.service {
    background: #0277bd;
}

/* ===== PAVEMENT MARKING CARDS ===== */
.lesson-page--l4 .marking-section {
    margin-bottom: 30px;
}

.lesson-page--l4 .marking-section .marking-img {
    float: right;
    margin: 0 0 12px 24px;
    width: 280px;
    border-radius: 6px;
}

.lesson-page--l4 .clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* ===== INTERSECTION GRID ===== */
.lesson-page--l4 .intersection-signs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.lesson-page--l4 .intersection-signs-grid img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

/* ===== RAILROAD CONTROLS ===== */
.lesson-page--l4 .railroad-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.lesson-page--l4 .railroad-controls img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
}

/* ===== SCHOOL BUS SAFETY GRID ===== */
.lesson-page--l4 .school-bus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.lesson-page--l4 .school-bus-grid img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
}

/* ===== SIGN COLOR CARDS ===== */
.lesson-page--l4 .color-sign-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.lesson-page--l4 .color-sign-card .sign-swatch {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.75rem;
    color: #fff;
    text-transform: uppercase;
}

.lesson-page--l4 .color-sign-card .sign-swatch.red {
    background: #d32f2f;
}

.lesson-page--l4 .color-sign-card .sign-swatch.green {
    background: #2e7d32;
}

.lesson-page--l4 .color-sign-card .sign-swatch.yellow {
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .color-sign-card .sign-swatch.orange {
    background: #e65100;
}

.lesson-page--l4 .color-sign-card .sign-swatch.blue {
    background: #1565c0;
}

.lesson-page--l4 .color-sign-card .sign-swatch.brown {
    background: #4e342e;
}

.lesson-page--l4 .color-sign-card .sign-swatch.white {
    background: #fff;
    color: #222;
    border: 2px solid #ccc;
}

.lesson-page--l4 .color-sign-card .sign-detail h4 {
    margin-top: 0;
}

.lesson-page--l4 .color-sign-card .sign-detail p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* ===== SIGN SHAPES SECTION ===== */
.lesson-page--l4 .shape-list {
    list-style: none;
    padding: 0;
}

.lesson-page--l4 .shape-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.92rem;
}

.lesson-page--l4 .shape-badge {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.62rem;
}

.lesson-page--l4 .shape-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: #d32f2f;
    color: white;
}

.lesson-page--l4 .shape-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #d32f2f;
    color: white;
}

.lesson-page--l4 .shape-circle {
    border-radius: 50%;
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .shape-rect-v {
    background: #555;
    color: white;
}

.lesson-page--l4 .shape-pentagon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .shape-pennant {
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    background: #f9a825;
    color: #222;
}

.lesson-page--l4 .shape-diamond {
    transform: rotate(45deg);
    background: #f9a825;
    color: #222;
    width: 26px;
    height: 26px;
}

.lesson-page--l4 .shape-rect-h {
    background: #555;
    color: white;
    width: 48px;
    height: 24px;
}

/* ===== TEST YOUR KNOWLEDGE ===== */
.lesson-page--l4 .quiz-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.lesson-page--l4 .quiz-question {
    margin-bottom: 24px;
}

.lesson-page--l4 .quiz-question .q-text {
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.lesson-page--l4 .quiz-question .q-text strong {
    font-weight: 700;
}

.lesson-page--l4 .quiz-option {
    font-size: 0.9rem;
    margin-left: 18px;
    margin-bottom: 3px;
}

.lesson-page--l4 .quiz-option.correct {
    color: #2e7d32;
    font-weight: 700;
}

.lesson-page--l4 .checkmark {
    margin-left: 4px;
}

/* ===== THANK YOU SLIDE ===== */
.lesson-page--l4 .slide-thankyou {
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 300px;
}

.lesson-page--l4 .slide-thankyou h1 {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.lesson-page--l4 .road-graphic {
    flex-shrink: 0;
    width: 180px;
    position: relative;
}

.lesson-page--l4 .road-svg-container svg {
    display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .lesson-page--l4 .slide {
        padding: 28px 20px;
    }

    .lesson-page--l4 .slide-cover {
        grid-template-columns: 1fr;
    }

    .lesson-page--l4 .content-with-image {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lesson-page--l4 .content-with-image .img-col {
        justify-self: center;
        max-width: min(340px, 100%);
        margin-inline: auto;
    }

    .lesson-page--l4 .content-with-image .img-col img,
    .lesson-page--l4 .content-with-image .img-col .slide-img,
    .lesson-page--l4 .slide-img--l4-tiny,
    .lesson-page--l4 .slide-img--l4-signal,
    .lesson-page--l4 .slide-img--l4-xs,
    .lesson-page--l4 .slide-img--l4-sm,
    .lesson-page--l4 .slide-img--l4-md,
    .lesson-page--l4 .slide-img--l4-lg {
        max-width: min(280px, 100%);
        object-position: center;
        margin-inline: auto;
    }

    .lesson-page--l4 .traffic-light-infographic,
    .lesson-page--l4 .arrow-cards {
        margin-inline: auto;
        max-width: min(300px, 100%);
    }

    .lesson-page--l4 .arrow-cards {
        width: 100%;
    }

    .lesson-page--l4 .purpose-grid {
        grid-template-columns: 1fr;
    }

    .lesson-page--l4 .signs-icon-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lesson-page--l4 .info-signs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lesson-page--l4 .slide-thankyou,
    .lesson-page--l4 .slide--thankyou-l4 {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        min-height: auto;
        text-align: center;
        overflow: hidden;
        box-sizing: border-box;
    }

    .lesson-page--l4 .slide-thankyou h1,
    .lesson-page--l4 .slide--thankyou-l4 h1 {
        flex: 0 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-inline: 0.5rem;
        font-size: clamp(1.75rem, 8vw, 2.4rem);
        line-height: 1.1;
        text-align: center;
        letter-spacing: -0.02em;
        overflow-wrap: break-word;
    }

    .lesson-page--l4 .slide--thankyou-l4 .road-svg-container {
        flex-shrink: 0;
        width: 100%;
        max-width: 11.25rem;
        margin-inline: auto;
    }

    .lesson-page--l4 .slide--thankyou-l4 .road-svg-container svg {
        display: block;
        width: 100%;
        height: auto;
        max-width: 11.25rem;
        margin-inline: auto;
    }

    .lesson-page--l4 .marking-section .marking-img {
        float: none;
        width: 100%;
        margin: 0 0 14px 0;
    }
}

/* ================================================================
   lesson-5.css
   Styles for lesson-5.php — California Vehicle Code & Rules of the Road
   Designed to perfectly match the red/white/gray PDF slide aesthetic.
   Also covers all shared lesson-page shell classes used by lesson-4.php.
   ================================================================ */

/* ----------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
    --red: #d32f2f;
    /* Primary red — slides use this exact tone */
    --red-dark: #b71c1c;
    /* Hover / pressed state */
    --red-text: #ffffff;

    --gray-callout-bg: #e8e8e8;
    /* Light gray callout boxes (slides 8, 28…) */
    --gray-callout-border: #d0d0d0;

    --body-bg: #f2f2f2;
    --slide-bg: #ffffff;
    --body-text: #1a1a1a;
    --muted-text: #555555;

    --font: 'Segoe UI', Arial, Helvetica, sans-serif;

    --slide-pad-v: 48px;
    --slide-pad-h: 56px;
    --slide-radius: 4px;
    --slide-shadow: 0 2px 14px rgba(0, 0, 0, .08);

    --gap: 28px;
    /* between slides */
    --divider-gap: 28px;
}

/* ----------------------------------------------------------------
   BASE RESET
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--body-text);
    background: var(--body-bg);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--red);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

/* ----------------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------
   LAYOUT CONTAINER
   ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 28px;
}

/* ----------------------------------------------------------------
   PAGE SHELL: main, article
   ---------------------------------------------------------------- */
.main {
    padding-bottom: 80px;
}

.main--lesson {
    background: var(--body-bg);
}

.main--dashboard {
    min-height: 100vh;
}

.lesson-page {
    width: 100%;
}

/* ----------------------------------------------------------------
   TOOLBAR  (sticky top nav bar)
   ---------------------------------------------------------------- */
.lesson-page__toolbar {
    background: #ffffff;
    border-bottom: 2px solid #e0e0e0;
    padding: 13px 0;
    position: sticky;
    top: 0;
    z-index: var(--z-lesson-toolbar);
}

.lesson-page__toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Back link */
.lesson-page__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--body-text);
    transition: color .18s;
}

.lesson-page__back:hover {
    color: var(--red);
    text-decoration: none;
}

.lesson-page__back i {
    font-size: 0.8rem;
}

/* "Lesson 05" badge */
.lesson-page__meta {
    font-size: 0.82rem;
    color: #888;
    letter-spacing: .04em;
}

.lesson-page__meta strong {
    color: var(--body-text);
    font-weight: 900;
}

/* ----------------------------------------------------------------
   INNER WRAPPER
   ---------------------------------------------------------------- */
.lesson-page__inner {
    padding-top: 36px;
    padding-bottom: 16px;
}

.lesson-page__inner--l5 {
    /* same as above, lesson-5 specific modifier */
}

/* ----------------------------------------------------------------
   SLIDE STACK
   ---------------------------------------------------------------- */
.lesson-l4-slides,
.lesson-l5-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ================================================================
   SLIDE CARD  — base
   ================================================================ */
.slide {
    background: var(--slide-bg);
    border-radius: var(--slide-radius);
    padding: var(--slide-pad-v) var(--slide-pad-h);
    box-shadow: var(--slide-shadow);
    overflow: hidden;
    /* keeps callouts from bleeding outside */
}

/* ================================================================
   SLIDE 1 — COVER  (red + white two-column)
   Matches: red right panel, white left + car image
   ================================================================ */
.slide-cover {
    padding: 0;
    /* cover overrides padding — panels handle own spacing */
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 340px;
    overflow: hidden;
}

/* Left side: car image fills the column */
.cover-img--left {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.cover-img--left .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Right side: red panel with title */
.cover-text--red {
    background: var(--red);
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
    /* diagonal left edge */
}

.cover-text--red h1 {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 18px;
}

.cover-subtitle {
    font-size: 0.82rem;
    letter-spacing: .22em;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
}

/* ================================================================
   TWO-COLUMN  content-with-image
   ================================================================ */
.content-with-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: start;
}

/* When image should appear on the left (img-col first in DOM) */
.content-with-image--banner-red {
    grid-template-columns: auto 1fr;
    align-items: stretch;
}

/* Slide 4 — Temporary License: small image left, red callout right (centered in right grid) */
.content-with-image--license-side {
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
}

.content-with-image--license-side .img-col {
    align-self: center;
    align-items: flex-start;
    justify-content: flex-start;
}

.content-with-image--license-side .img-col .slide-img--l5-side {
    width: 240px;
    max-width: 34vw;
    height: auto;
    max-height: 260px;
    min-height: 0;
    object-fit: cover;
    border-radius: 6px;
}

/* B. Automobile Ownership — image 8 slightly larger */
.content-with-image--ownership .img-col .slide-img--l5-side {
    width: 280px;
    max-width: 38vw;
    max-height: 300px;
}

.content-with-image--license-side>.text-col.cvc-callout--red .section-title-large {
    margin-bottom: 12px;
}

.content-with-image--license-side>.text-col.cvc-callout--gray .section-title-large {
    margin-bottom: 8px;
}

.content-with-image--license-side>.text-col.cvc-callout--red,
.content-with-image--license-side>.text-col.cvc-callout--gray {
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-with-image--license-side>.text-col.cvc-callout--red {
    margin-bottom: 22px;
}

.content-with-image--license-side>.text-col.cvc-callout--gray.cvc-callout--speech-left {
    margin-left: 6px;
}

.content-with-image--license-side .cvc-callout--speech {
    max-width: none;
}

.content-with-image--license-side .cvc-callout--speech::after {
    left: 28px;
}

/* Gray callout — tail points left toward image (Instruction Permit) */
.cvc-callout--gray.cvc-callout--speech-left {
    position: relative;
}

.cvc-callout--gray.cvc-callout--speech-left::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 16px solid var(--gray-callout-border);
}

.cvc-callout--gray.cvc-callout--speech-left::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 14px solid var(--gray-callout-bg);
}

/* Slide 10 — License plates: text left, certificate icon right */
.content-with-image--plate-display {
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
}

.content-with-image--plate-display .text-col {
    min-width: 0;
}

.content-with-image--plate-display .l5-icon-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-img--l5-cert-icon {
    width: 168px;
    height: 168px;
    max-width: 22vw;
    object-fit: contain;
    display: block;
    background: transparent;
}

.text-col {
    min-width: 0;
}

.img-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.img-col .slide-img {
    border-radius: 8px;
    display: block;
}

.img-col .slide-img--composite {
    width: 320px;
    height: auto;
    border-radius: 8px;
}

/* ================================================================
   SECTION HEADINGS
   ================================================================ */

/* h1 inside slides (thank-you, cover) */
.slide h1 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--body-text);
}

/* Main section title — bold, uppercase, used with .section-title */
.section-title {
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--body-text);
    margin-bottom: 14px;
    margin-top: 0;
    line-height: 1.25;
}

/* Large section title — for section-header slides */
.section-title-large {
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .015em;
    color: #ffffff;
    /* used inside red callouts */
    margin-bottom: 14px;
    margin-top: 0;
    line-height: 1.2;
}

/* h2 — inside regular slides, not uppercase */
.slide h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--body-text);
    margin-bottom: 10px;
    margin-top: 28px;
    line-height: 1.3;
}

.slide h2:first-child {
    margin-top: 0;
}

/* h3 */
.slide h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--body-text);
    margin-bottom: 8px;
    margin-top: 24px;
    line-height: 1.35;
}

.slide h3:first-child {
    margin-top: 0;
}

/* h4 — subheadings (What the law requires / Practical implications) */
.slide h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--body-text);
    margin-bottom: 6px;
    margin-top: 18px;
    line-height: 1.4;
}

.slide h4:first-child {
    margin-top: 0;
}

/* Paragraph */
.slide p {
    font-size: 0.97rem;
    color: #2a2a2a;
    margin-bottom: 12px;
    line-height: 1.75;
}

.slide p:last-child {
    margin-bottom: 0;
}

/* ================================================================
   BULLET LISTS
   ================================================================ */
.content-list {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 14px;
}

.content-list li {
    font-size: 0.97rem;
    color: #2a2a2a;
    margin-bottom: 6px;
    line-height: 1.65;
}

.content-list.tight li {
    margin-bottom: 4px;
}

.content-list:last-child {
    margin-bottom: 0;
}

/* ================================================================
   DIVIDERS
   ================================================================ */
.section-divider {
    border: none;
    border-top: 3px solid #1a1a1a;
    margin: 32px 0;
}

.section-divider-light {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 24px 0;
}

/* ================================================================
   CVC CALLOUT BOXES
   Three flavours:
     --red   : solid red background, white text
     --gray  : light gray background, dark text
     --centered: centered layout (used for section-header slides)
   ================================================================ */
.cvc-callout {
    border-radius: 6px;
    padding: 28px 32px;
    margin-bottom: 0;
}

/* --- RED CALLOUT --- */
/* Matches slides 2 (bottom), 3 (top speech-bubble), 4 (right panel),
   10 (bottom traffic laws), 20 (other laws), 34 (civil liability),
   40 (criminal offenses) */
.cvc-callout--red {
    background: var(--red);
    color: #ffffff;
}

.cvc-callout--red h2,
.cvc-callout--red h3,
.cvc-callout--red h4,
.cvc-callout--red .section-title,
.cvc-callout--red .section-title-large {
    color: #ffffff;
}

.cvc-callout--red p,
.cvc-callout--red li {
    color: rgba(255, 255, 255, .93);
    font-size: 0.97rem;
    line-height: 1.75;
}

.cvc-callout--red .content-list {
    padding-left: 20px;
}

.cvc-callout--red em {
    font-style: italic;
    color: rgba(255, 255, 255, .9);
}

/* Speech-bubble pointer on bottom of some red callouts (slide 3 fee box) */
.cvc-callout--red.cvc-callout--speech {
    position: relative;
    display: inline-block;
    max-width: 520px;
}

.cvc-callout--red.cvc-callout--speech::after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 52px;
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 0 solid transparent;
    border-top: 22px solid var(--red);
}

/* --- GRAY CALLOUT --- */
/* Matches slides 3 (Examination box), 7 (auto ownership), 27 (equipment) */
.cvc-callout--gray {
    background: var(--gray-callout-bg);
    border: 1px solid var(--gray-callout-border);
    color: var(--body-text);
}

.cvc-callout--gray h2,
.cvc-callout--gray h3,
.cvc-callout--gray h4,
.cvc-callout--gray .section-title,
.cvc-callout--gray .section-title-large {
    color: var(--body-text);
}

.cvc-callout--gray p,
.cvc-callout--gray li {
    color: #2a2a2a;
    font-size: 0.97rem;
}

/* --- CENTERED CALLOUT --- */
/* Slide 20: "3. Other Important Laws" — red box centered in white slide */
.cvc-callout--centered {
    margin: 0 auto;
    max-width: 960px;
}

/* ================================================================
   RED BANNER (slide 2 upper — image left + red text right)
   content-with-image--banner-red uses this alongside cvc-banner--red
   ================================================================ */
.cvc-banner--red {
    background: var(--red);
    padding: 32px 36px;
    border-radius: 0 6px 6px 0;

    /* Arrow / chevron shape on the right */
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}

.cvc-banner--red h2,
.cvc-banner--red .section-title {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
}

.cvc-banner--red p {
    color: rgba(255, 255, 255, .93);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ================================================================
   RED RULE LINE  (below h2 in gray callout — slide 27/28 equipment)
   ================================================================ */
.cvc-red-rule {
    width: 48px;
    height: 4px;
    background: var(--red);
    border-radius: 2px;
    margin-bottom: 16px;
    margin-top: -6px;
}

/* ================================================================
   SLIDE IMAGE CLASSES
   ================================================================ */
.slide-img {
    border-radius: 8px;
    height: auto;
    display: block;
}

/* Composite image (collages, infographics — slightly larger default) */
.slide-img--composite {
    width: 320px;
    border-radius: 8px;
}

/* Thank-you slide hero image */
.slide-img--thankyou {
    width: 48%;
    max-width: 560px;
    border-radius: 0;
    object-fit: cover;
}

/* ================================================================
   THANK-YOU SLIDE  (slide 57)
   Mirrors the cover design: car left, red panel right
   ================================================================ */
.slide-thankyou--red {
    display: flex;
    align-items: stretch;
    min-height: 300px;
    padding: 0;
    gap: 0;
}

.slide-thankyou--red .slide-img--thankyou {
    flex: 0 0 48%;
    width: 48%;
    object-fit: cover;
    border-radius: 0;
}

.thankyou-text-block--red {
    flex: 1;
    background: var(--red);

    /* diagonal left edge, matching the cover */
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
    padding: 48px 52px 48px 64px;
    display: flex;
    align-items: center;
}

.thankyou-text-block--red h1 {
    font-size: 3.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #ffffff;
    line-height: 1.1;
}

/* ================================================================
   QUIZ — TEST YOUR KNOWLEDGE (legacy — use .lesson-quiz like lesson-1)
   ================================================================ */
.lesson-page--l5 .slide--l5-quiz {
    padding: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.lesson-page--l5 .slide--l5-quiz .lesson-quiz--in-slide {
    margin-top: 0;
}

/* ================================================================
   LESSON CLOSING FOOTER
   ================================================================ */
.lesson-closing {
    margin-top: 20px;
    padding: 24px 0 8px;
    text-align: center;
}

.lesson-closing--wider {
    padding: 32px 0 16px;
}

.lesson-closing__nav {
    margin: 0;
}

/* "Return to my courses" CTA — red on lesson pages; dashboard Continue uses --continue */
.lesson-chapters__cta:not(.lesson-chapters__cta--continue) {
    display: inline-block;
    padding: 13px 34px;
    background: var(--red);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background .18s, transform .12s;
    text-decoration: none;
}

.lesson-chapters__cta:not(.lesson-chapters__cta--continue):hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    text-decoration: none;
}

.lesson-chapters__cta:not(.lesson-chapters__cta--continue):active {
    transform: translateY(0);
}

/* Dashboard / My courses — deep blue Continue */
.lesson-chapters__cta.lesson-chapters__cta--continue {
    display: inline-block;
    padding: 13px 34px;
    background: var(--btn-dash-bg);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(1, 29, 77, 0.35);
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    text-decoration: none;
}

.lesson-chapters__cta.lesson-chapters__cta--continue:hover {
    background: var(--btn-dash-bg-hover);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(1, 29, 77, 0.4);
}

.lesson-chapters__cta.lesson-chapters__cta--continue:active {
    transform: translateY(0);
}

/* ================================================================
   UTILITY  (shared with lesson-4 if needed)
   ================================================================ */

/* Traffic-light infographic (lesson-4) */
.traffic-light-infographic {
    background: #e0f7f5;
    border: 2px solid #4db6ac;
    border-radius: 12px;
    padding: 22px 20px;
    max-width: 270px;
}

.traffic-light-infographic h4 {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 18px;
    color: var(--body-text);
}

.tl-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.tl-row:last-child {
    margin-bottom: 0;
}

.tl-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.tl-circle.stop {
    background: #d32f2f;
}

.tl-circle.wait {
    background: #f9a825;
    color: #222;
}

.tl-circle.go {
    background: #388e3c;
}

.tl-desc {
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--body-text);
}

.tl-desc strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.color-red {
    color: #d32f2f;
    font-weight: 700;
}

.color-yellow {
    color: #f9a825;
    font-weight: 700;
}

.color-green {
    color: #388e3c;
    font-weight: 700;
}

/* Arrow signal cards (lesson-4) */
.arrow-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.arrow-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.arrow-box {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.bg-red {
    background: #d32f2f;
    color: #fff;
}

.bg-yellow {
    background: #f9a825;
    color: #222;
}

.bg-yellow-flash {
    background: repeating-linear-gradient(45deg, #f9a825, #f9a825 4px, #fff8e1 4px, #fff8e1 8px);
    color: #222;
}

.bg-green {
    background: #388e3c;
    color: #fff;
}

.arrow-desc {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--body-text);
}

.arrow-desc strong {
    display: block;
    font-weight: 700;
    margin-bottom: 3px;
}

/* Color sign cards (lesson-4 sign colours) */
.color-sign-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.color-sign-card:last-child {
    margin-bottom: 0;
}

.sign-swatch {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.sign-swatch.red {
    background: #d32f2f;
}

.sign-swatch.green {
    background: #2e7d32;
}

.sign-swatch.yellow {
    background: #f9a825;
    color: #222;
}

.sign-swatch.orange {
    background: #e65100;
}

.sign-swatch.blue {
    background: #1565c0;
}

.sign-swatch.brown {
    background: #4e342e;
}

.sign-detail h4 {
    margin-top: 0;
}

.sign-detail p {
    margin-bottom: 0;
    font-size: 0.92rem;
}

/* Shape list (lesson-4 sign shapes) */
.shape-list {
    list-style: none;
    padding: 0;
}

.shape-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.94rem;
}

.shape-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.55rem;
}

/* Quiz styles (lesson-4 re-uses same classes) — already defined above */

/* Slide-cover (lesson-4 white version) */
.slide-cover:not(.slide-cover--red) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: var(--slide-pad-v) var(--slide-pad-h);
    min-height: 360px;
}

.slide-cover:not(.slide-cover--red) .cover-text h1 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.2px;
    color: var(--body-text);
    margin-bottom: 20px;
}

.slide-cover:not(.slide-cover--red) .cover-text p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 14px;
}

.slide-cover:not(.slide-cover--red) .cover-img {
    display: flex;
    justify-content: flex-end;
}

.slide-cover:not(.slide-cover--red) .cover-img .slide-img {
    width: 100%;
    max-width: 480px;
    height: 340px;
    object-fit: cover;
    border-radius: 8px;
}

/* Lesson-closing for lesson-4 */
.slide-thankyou {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 8px 0;
}

.slide-thankyou h1 {
    font-size: 3.4rem;
    font-weight: 900;
    letter-spacing: -.5px;
    color: var(--body-text);
}

.road-svg-container svg {
    display: block;
}

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

/* Tablet: 900px */
@media (max-width: 900px) {
    :root {
        --slide-pad-v: 36px;
        --slide-pad-h: 36px;
    }

    /* Cover */
    .slide-cover {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cover-img--left {
        height: 220px;
    }

    .cover-text--red {
        clip-path: none;
        padding: 36px 32px;
    }

    .cover-text--red h1 {
        font-size: 1.6rem;
    }

    /* Two-col */
    .content-with-image,
    .content-with-image--banner-red {
        grid-template-columns: 1fr;
    }

    .content-with-image--banner-red .img-col {
        display: none;
        /* hide img on small when it's inside a red banner */
    }

    .content-with-image--license-side.content-with-image--banner-red {
        gap: 20px;
        align-items: stretch;
    }

    .content-with-image--license-side.content-with-image--banner-red .img-col {
        display: flex;
    }

    .content-with-image--license-side>.text-col.cvc-callout--red,
    .content-with-image--license-side>.text-col.cvc-callout--gray {
        justify-self: stretch;
        max-width: none;
        margin-left: 0;
    }

    .content-with-image--license-side .img-col .slide-img--l5-side {
        width: 100%;
        max-width: 280px;
        min-height: 180px;
        border-radius: 6px;
    }

    .content-with-image--plate-display {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .content-with-image--plate-display .l5-icon-col {
        justify-content: center;
        width: 100%;
    }

    .lesson-page--l5 .slide-img--l5-cert-icon {
        width: min(68vw, 220px);
        height: min(68vw, 220px);
        max-width: none;
        margin-inline: auto;
    }

    .img-col {
        align-items: flex-start;
    }

    .img-col .slide-img--composite,
    .img-col .slide-img {
        width: 100%;
        max-width: 100%;
    }

    /* Thank you */
    .slide-thankyou--red {
        flex-direction: column;
    }

    .slide-thankyou--red .slide-img--thankyou {
        width: 100%;
        flex: none;
        height: 220px;
    }

    .thankyou-text-block--red {
        clip-path: none;
        padding: 36px 32px;
    }

    .thankyou-text-block--red h1 {
        font-size: 2.4rem;
    }

    /* CVC banner */
    .cvc-banner--red {
        clip-path: none;
        border-radius: 6px;
    }

    /* Lesson-4 cover — stack only (do not hide .cover-img; lessons 1–4 need the hero image) */
    .slide-cover:not(.slide-cover--red) {
        grid-template-columns: 1fr;
    }

    /* Lesson-4 thank-you */
    .slide-thankyou,
    .lesson-page--l4 .slide--thankyou-l4 {
        flex-direction: column;
        gap: 24px;
    }

    .slide-thankyou h1,
    .lesson-page--l4 .slide--thankyou-l4 h1 {
        font-size: 2.2rem;
    }
}

/* Mobile: 640px */
@media (max-width: 640px) {
    :root {
        --slide-pad-v: 26px;
        --slide-pad-h: 22px;
    }

    body {
        font-size: 15px;
    }

    .quiz-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .section-title-large {
        font-size: 1.3rem;
    }

    .slide h2 {
        font-size: 1.05rem;
    }

    .slide h3 {
        font-size: 0.98rem;
    }

    .arrow-cards {
        grid-template-columns: 1fr;
    }

    .content-with-image,
    .content-with-image--banner-red {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .img-col .slide-img {
        width: 100% !important;
        /* override inline style widths on small screens */
        max-width: 100% !important;
    }

    .cover-text--red h1 {
        font-size: 1.35rem;
    }

    .thankyou-text-block--red h1 {
        font-size: 1.9rem;
    }

    .lesson-chapters__cta {
        padding: 12px 24px;
        font-size: 0.82rem;
    }

    .cvc-callout {
        padding: 20px 18px;
    }

    .cvc-banner--red {
        padding: 22px 20px;
    }

    .lesson-page--l5 .slide-img--l5-cert-icon {
        width: min(75vw, 260px);
        height: min(75vw, 260px);
    }
}

/* Lessons 1–4 — cover slide (first image): text above, image below on mobile/tablet */
@media (max-width: 900px) {

    .lesson-page--l1 .slide.slide-cover,
    .lesson-page--l2 .slide.slide-cover,
    .lesson-page--l3 .slide.slide-cover,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto;
        gap: 1.25rem;
        padding: 28px 20px !important;
        min-height: 0 !important;
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
    }

    .lesson-page--l1 .slide-cover .cover-text,
    .lesson-page--l2 .slide-cover .cover-text,
    .lesson-page--l3 .slide-cover .cover-text,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) .cover-text {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .lesson-page--l1 .slide-cover .cover-text h1,
    .lesson-page--l2 .slide-cover .cover-text h1,
    .lesson-page--l3 .slide-cover .cover-text h1,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) .cover-text h1 {
        font-size: clamp(1.35rem, 5vw, 1.85rem);
        line-height: 1.2;
        margin-bottom: 1rem;
        overflow-wrap: normal;
        word-wrap: normal;
        hyphens: manual;
    }

    .lesson-page--l1 .slide-cover .cover-text p,
    .lesson-page--l2 .slide-cover .cover-text p,
    .lesson-page--l3 .slide-cover .cover-text p,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) .cover-text p {
        max-width: 100%;
        font-size: 0.97rem;
        line-height: 1.65;
    }

    .lesson-page--l1 .slide-cover .cover-img,
    .lesson-page--l2 .slide-cover .cover-img,
    .lesson-page--l3 .slide-cover .cover-img,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) .cover-img {
        display: flex !important;
        width: 100%;
        max-width: none;
        justify-content: center;
        justify-self: stretch;
        margin: 0;
    }

    .lesson-page--l1 .slide-cover .cover-img img,
    .lesson-page--l1 .slide-cover .cover-img .slide-img,
    .lesson-page--l2 .slide-cover .cover-img img,
    .lesson-page--l2 .slide-cover .cover-img .slide-img,
    .lesson-page--l3 .slide-cover .cover-img img,
    .lesson-page--l3 .slide-cover .cover-img .slide-img,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) .cover-img img,
    .lesson-page--l4 .slide.slide-cover:not(.slide-cover--l15-intro) .cover-img .slide-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center;
        margin-inline: auto;
        border-radius: 6px;
    }
}

/* =============================================================================
   ADMIN AREA (scoped under .admin-body for header/tables; admin-* classes)
   ============================================================================= */

/* ——— Admin login (matches attached design) ——— */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: #f0f4f8;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.admin-login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    padding: 2.25rem 2rem 2rem;
}

.admin-login-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: #0b1f3f;
    text-align: center;
    letter-spacing: -0.02em;
}

.admin-login-card__subtitle {
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    color: #64748b;
    text-align: center;
    line-height: 1.5;
}

.admin-login-card .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.35rem;
}

.admin-login-card .input-group-text {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

.admin-login-card .form-control {
    border-color: #e2e8f0;
    padding: 0.65rem 0.85rem;
    font-size: 0.9375rem;
}

.admin-login-card .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

.admin-login-card .form-check-label {
    font-size: 0.875rem;
    color: #64748b;
}

.admin-login-card .btn-login {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background: #2563eb;
    border: none;
    border-radius: 8px;
}

.admin-login-card .btn-login:hover {
    background: #1d4ed8;
}

.admin-login-card__footer {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

.admin-login-card__footer a {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}

.admin-login-card__footer a:hover {
    text-decoration: underline;
}

.admin-login-card__error {
    margin-bottom: 1rem;
}

/* ——— Admin dashboard layout ——— */
:root {
    --admin-sidebar-width: 260px;
    --admin-sidebar-mobile-width: 50vw;
    --admin-header-height: 60px;
    --admin-navy: #0b1f3f;
    --admin-blue: #2563eb;
    --admin-bg: #f1f5f9;
}

.admin-body {
    display: block;
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: var(--admin-bg);
    color: #1e293b;
}

.admin-body.admin-sidebar-open {
    overflow: hidden;
}

.admin-body.toggle-sidebar .admin-sidebar {
    transform: translateX(-100%);
}

.admin-body.toggle-sidebar .admin-shell {
    margin-left: 0;
}

/* Fixed admin header (override public .header / .header::before) */
.admin-body .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: var(--admin-header-height);
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 1px 6px rgba(1, 41, 112, 0.06);
    transition: left 0.25s ease;
}

.admin-body .header::before {
    content: none;
    display: none;
}

.admin-body .header>* {
    position: relative;
    z-index: 2;
}

.admin-body .header__left {
    display: flex;
    align-items: center;
    flex: 0 0 var(--admin-sidebar-width);
    width: var(--admin-sidebar-width);
    max-width: var(--admin-sidebar-width);
    padding-right: 0.75rem;
    gap: 0.5rem;
    justify-content: flex-start;
}

.admin-body .header .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.admin-body .header .logo:hover {
    text-decoration: none;
}

.admin-body .header .logo img {
    display: block;
    max-height: 42px;
    width: auto;
    height: auto;
}

.admin-body .toggle-sidebar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0;
    padding: 0.15rem;
    border: none;
    background: transparent;
    line-height: 1;
    color: #012970;
    cursor: pointer;
}

.admin-body .toggle-sidebar-btn .bi {
    font-size: 1.75rem;
}

.admin-body .toggle-sidebar-btn:hover {
    color: var(--admin-blue);
}

.admin-body .header-nav .nav-profile {
    color: #012970;
    text-decoration: none;
}

.admin-body .header-nav .nav-profile:hover {
    color: var(--admin-blue);
}

.nav-profile__img {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.nav-profile__name {
    font-weight: 600;
    color: #012970;
}

.admin-body .dropdown-menu-arrow.profile {
    min-width: 12rem;
    padding: 0.5rem 0;
    border: none;
    box-shadow: 0 4px 20px rgba(1, 41, 112, 0.12);
}

.admin-body .dropdown-menu-arrow.profile .dropdown-header h6 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #012970;
}

.admin-body .dropdown-menu-arrow.profile .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.admin-body .dropdown-menu-arrow.profile .dropdown-item i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.admin-sidebar {
    position: fixed;
    top: var(--admin-header-height);
    left: 0;
    z-index: 1040;
    width: var(--admin-sidebar-width);
    height: calc(100vh - var(--admin-header-height));
    display: flex;
    flex-direction: column;
    background: var(--admin-navy);
    color: #fff;
    transform: translateX(0);
    transition: transform 0.25s ease, width 0.25s ease;
}

.admin-sidebar__close {
    display: none;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    padding: 0.35rem;
    cursor: pointer;
}

.admin-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.75rem;
}

.admin-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-sidebar__link i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
    opacity: 0.9;
}

.admin-sidebar__link .bi,
.admin-sidebar__link .ri {
    font-size: 1.05rem;
    line-height: 1;
}

.admin-sidebar__link:hover,
.admin-sidebar__link:focus,
.admin-sidebar__link:focus-visible,
.admin-sidebar__link.is-active:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-sidebar__link.is-active {
    background: var(--admin-blue);
    color: #fff;
}

.admin-sidebar__footer {
    padding: 1rem 0.75rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.admin-sidebar__logout:hover,
.admin-sidebar__logout:focus,
.admin-sidebar__logout:focus-visible {
    text-decoration: none;
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
}

.admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(15, 23, 42, 0.45);
}

.admin-sidebar-backdrop[hidden] {
    display: none !important;
}

.admin-sidebar-backdrop:not([hidden]) {
    display: block;
}

.admin-shell {
    margin-left: var(--admin-sidebar-width);
    margin-top: var(--admin-header-height);
    min-height: calc(100vh - var(--admin-header-height));
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}

.admin-main {
    flex: 1;
    padding: 1.5rem;
}

/* Dashboard info cards — full-width 2 columns */
.admin-dashboard-cards {
    margin-bottom: 1.5rem;
}

.admin-dashboard-cards>[class*="col-"] {
    min-width: 0;
}

.admin-dashboard-cards .info-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(1, 41, 112, 0.08);
}

.admin-dashboard-cards .card-title {
    padding: 0;
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #012970;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.admin-dashboard-cards .card-icon {
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.admin-dashboard-cards .sales-card .card-icon {
    color: #4154f1;
    background: #f6f6fe;
}

.admin-dashboard-cards .passed-card .card-icon {
    color: #ff771d;
    background: #ffecdf;
}

.admin-dashboard-cards .ps-3 h6 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #012970;
    line-height: 1.2;
}

/* Recent passed students table */
.admin-body .recent-sales {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(1, 41, 112, 0.08);
}

.admin-body .recent-sales--spaced {
    margin-top: 1.5rem;
}

.admin-body .recent-sales .card-title {
    padding: 0 0 1rem;
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #012970;
    border-bottom: 1px solid #e2e8f0;
}

.admin-body .recent-sales .dataTable-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.admin-body .recent-sales .dataTable-dropdown label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: #6c757d;
}

.admin-body .recent-sales .dataTable-selector {
    width: auto;
    min-width: 4.25rem;
    display: inline-block;
}

.admin-body .recent-sales .dataTable-search {
    margin-left: auto;
}

.admin-body .recent-sales .dataTable-input {
    min-width: 12rem;
    max-width: 16rem;
}

.admin-body .recent-sales .dataTable-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.admin-body .recent-sales .dataTable-info {
    font-size: 0.8125rem;
    color: #6c757d;
}

.admin-body .recent-sales .dataTable-pagination-nav .pagination {
    gap: 0.15rem;
}

.admin-body .recent-sales .dataTable-pagination-nav .page-link {
    color: #012970;
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
}

.admin-body .recent-sales .dataTable-pagination-nav .page-item.active .page-link {
    background-color: #2563eb;
    border-color: #2563eb;
}

.admin-body .recent-sales .dataTable-pagination-nav .page-item.disabled .page-link {
    color: #94a3b8;
}

.admin-body .recent-sales .datatable thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #012970;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    background: #f6f9ff;
    border-bottom: none;
    white-space: nowrap;
}

.admin-body .recent-sales .datatable tbody td {
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    color: #444;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.admin-body .recent-sales .datatable tbody tr:last-child td {
    border-bottom: none;
}

.admin-body .recent-sales .datatable tbody tr:hover td {
    background: #f8fafc;
}

.admin-body .recent-sales .btn+.btn {
    margin-left: 0.35rem;
}

.admin-table__message {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Admin site settings form */
.admin-settings-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(1, 41, 112, 0.08);
    overflow: hidden;
}

.admin-settings-card__head {
    padding: 0.85rem 1.25rem;
    background: #e8f4fc;
    border-bottom: 1px solid #cfe2f5;
}

.admin-settings-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #012970;
}

.admin-settings-form {
    max-width: 920px;
    --admin-settings-label: 160px;
}

.admin-settings-form__row {
    display: grid;
    grid-template-columns: var(--admin-settings-label) 1fr;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-bottom: 0.85rem;
}

.admin-settings-form__row--top {
    align-items: start;
}

.admin-settings-form__label {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #334155;
}

.admin-settings-form__input,
.admin-settings-form__textarea {
    font-size: 0.9375rem;
    border-color: #dee2e6;
    border-radius: 8px;
}

.admin-settings-form__textarea {
    min-height: 100px;
    resize: vertical;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.8125rem;
}

.admin-settings-form__actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

@media (max-width: 767.98px) {
    .admin-settings-form__row {
        grid-template-columns: 1fr;
    }
}

.admin-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 1.5rem;
}

.admin-card+.admin-card {
    margin-top: 1.25rem;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-stat {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 1.25rem;
}

.admin-stat__label {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-stat__value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--admin-navy);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    margin: 0;
    font-size: 0.875rem;
}

.admin-table th {
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.admin-placeholder {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .admin-body .header__left {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
        padding-right: 0.5rem;
        gap: 0.35rem;
    }

    .admin-body .header .logo {
        flex-shrink: 0;
    }

    .admin-body .toggle-sidebar-btn {
        margin-left: 0;
    }

    .admin-body.toggle-sidebar .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar {
        width: var(--admin-sidebar-mobile-width);
        max-width: 20rem;
        min-width: 16rem;
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-sidebar__close {
        display: block;
    }

    .admin-shell {
        margin-left: 0;
    }

    .admin-body.toggle-sidebar .admin-shell {
        margin-left: 0;
    }
}

/* Lesson 6 — three-part quiz (all sections visible; locked = not clickable) */
.lesson6-quiz-root {
    width: 100%;
}

.lesson6-quiz-section--locked .lesson6-quiz-section__quiz {
    opacity: 0.72;
}

.lesson6-quiz-section--locked .lesson-quiz__input,
.lesson6-quiz-section--locked .lesson-quiz__label {
    pointer-events: none;
    cursor: not-allowed;
}

.lesson6-quiz-section--completed .lesson-quiz__input,
.lesson6-quiz-section--completed .lesson-quiz__label {
    pointer-events: none;
    cursor: default;
}

.lesson6-quiz-section__below {
    display: block;
    margin-top: 0.35rem;
    font-weight: 600;
}

.lesson6-quiz-section__result,
.lesson6-quiz__final {
    margin-top: 1rem;
}

.lesson6-quiz__final {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.lesson-page--l6 .lesson6-quiz-section .lesson-quiz--wider,
.lesson-page--l6 .lesson6-quiz-section .lesson-quiz--in-slide {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}