.course-hero {
    position: relative;
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
    background-color: #060c1e;
    background-image: url("../assets/img/hero-network-sm.jpg");
    background-image: image-set(url("../assets/img/hero-network-sm.webp") type("image/webp"),
        url("../assets/img/hero-network-sm.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.course-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(5, 10, 26, 0.88) 0%, rgba(9, 22, 62, 0.76) 50%, rgba(5, 10, 26, 0.92) 100%);
}

.course-hero__grid {
    position: relative;
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

.course-hero__intro {
    text-align: center;
}

.course-hero__title {
    margin-top: var(--space-3);
    font-size: clamp(1.75rem, 0.55rem + 2.3vw, 2.5rem);
    color: var(--paper);
}

.course-hero__lede {
    margin: var(--space-3) auto 0;
    max-width: 46ch;
    text-align: left;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.7;
}

.course-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.fact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9375rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.08);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--paper);
}

.fact .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #8fb8ff;
}

.course-hero .lead-card {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

.lead-card {
    padding: clamp(1.5rem, 4vw, 2rem);
    border-radius: var(--radius-lg);
    background-color: var(--paper);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75);
}

.lead-card__title {
    font-size: var(--step-2);
}

.lead-card__lede {
    margin-top: var(--space-2);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.lead-form__grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.lead-form__submit {
    width: 100%;
    margin-top: var(--space-4);
}

.lead-form__note {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.overview {
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

.overview__body {
    color: var(--ink-soft);
    text-align: justify;
    hyphens: auto;
}

.overview__body p + p {
    margin-top: var(--space-4);
}

.overview__figure {
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

.overview__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.audience {
    display: grid;
    gap: var(--space-3);
}

.audience__item {
    padding: clamp(1.5rem, 3vw, 1.875rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-color: var(--paper);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.audience__item:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: var(--shadow-lift);
}

.audience__title {
    margin-top: var(--space-4);
    font-size: var(--step-1);
}

.audience__copy {
    margin-top: var(--space-2);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.levels {
    display: grid;
    gap: var(--space-4);
}

.level {
    display: grid;
    align-content: start;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background-color: var(--paper);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.level:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: var(--shadow-lift);
}

.level--advanced {
    border-color: transparent;
    background-image: var(--gradient-deep);
    color: rgba(255, 255, 255, 0.8);
}

.level__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-pill);
    background-color: var(--blue-soft);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-deep);
}

.level--advanced .level__badge {
    background-color: rgba(255, 255, 255, 0.16);
    color: var(--paper);
}

.level__name {
    margin-top: var(--space-3);
    font-size: var(--step-2);
}

.level--advanced .level__name {
    color: var(--paper);
}

.level__meta {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.level--advanced .level__meta {
    color: #8fb8ff;
}

.level__summary {
    margin-top: var(--space-3);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.level--advanced .level__summary {
    color: rgba(255, 255, 255, 0.8);
}

.level__list {
    display: grid;
    gap: 0.5rem;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.level--advanced .level__list {
    border-top-color: var(--rule-inverse);
    color: rgba(255, 255, 255, 0.8);
}

.level__list li {
    display: grid;
    grid-template-columns: 0.4375rem minmax(0, 1fr);
    column-gap: var(--space-3);
}

.level__list li::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    margin-top: 0.6em;
    border-radius: 50%;
    background-image: var(--gradient-primary);
}

.level--advanced .level__list li::before {
    background-image: none;
    background-color: #8fb8ff;
}

.syllabus + .syllabus {
    margin-top: var(--space-7);
}

.syllabus__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--ink-strong);
}

.syllabus__title {
    font-size: var(--step-2);
}

.syllabus__meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.module-grid {
    display: grid;
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-color: var(--rule);
    overflow: hidden;
}

.module-grid li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    background-color: var(--paper);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.module-grid span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--blue);
}

.deliverables {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-image: linear-gradient(160deg, var(--blue-tint) 0%, #e8eefc 100%);
}

.deliverables__title {
    font-size: var(--step-1);
}

.deliverables__list {
    display: grid;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.deliverables__list li {
    display: grid;
    grid-template-columns: 0.4375rem minmax(0, 1fr);
    column-gap: var(--space-3);
}

.deliverables__list li::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    margin-top: 0.6em;
    border-radius: 50%;
    background-image: var(--gradient-primary);
}

.module {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-color: var(--paper);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.module + .module {
    margin-top: var(--space-3);
}

.module[open] {
    border-color: transparent;
    box-shadow: var(--shadow-card);
}

.module__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    min-height: 3.75rem;
    cursor: pointer;
    list-style: none;
}

.module__summary::-webkit-details-marker {
    display: none;
}

.module__number {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--blue);
}

.module__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-strong);
}

.module__chevron {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transition);
}

.module[open] .module__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
    border-color: var(--blue);
}

.module__body {
    padding: 0 var(--space-4) var(--space-4);
}

.module__topics {
    display: grid;
    gap: 0.5rem;
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}

.module__topics li {
    display: grid;
    grid-template-columns: 0.4375rem minmax(0, 1fr);
    column-gap: var(--space-3);
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.module__topics li::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    margin-top: 0.6em;
    border-radius: 50%;
    background-image: var(--gradient-primary);
}

.brochure {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5rem);
    background-image: var(--gradient-deep);
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.brochure::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 34rem;
    background: radial-gradient(40% 50% at 25% 50%, rgba(20, 180, 232, 0.32), transparent 70%),
        radial-gradient(40% 50% at 80% 40%, rgba(122, 69, 230, 0.32), transparent 70%);
    pointer-events: none;
}

.brochure__grid {
    position: relative;
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

.brochure__title {
    margin-top: var(--space-3);
    max-width: 20ch;
    color: var(--paper);
}

.brochure__copy {
    margin-top: var(--space-3);
    max-width: 46ch;
}

.brochure__list {
    display: grid;
    gap: 0.5rem;
    margin-top: var(--space-4);
    font-size: 0.9375rem;
}

.brochure__list li {
    display: grid;
    grid-template-columns: 0.4375rem minmax(0, 1fr);
    column-gap: var(--space-3);
}

.brochure__list li::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    margin-top: 0.6em;
    border-radius: 50%;
    background-color: #8fb8ff;
}

.faq {
    border-top: 1px solid var(--rule);
}

.faq__item {
    border-bottom: 1px solid var(--rule);
}

.faq__question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
    min-height: 3.5rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--ink-strong);
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__item[open] .faq__question {
    color: var(--blue);
}

.faq__sign {
    position: relative;
    width: 1rem;
    height: 1rem;
}

.faq__sign::before,
.faq__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--transition);
}

.faq__sign::after {
    transform: rotate(90deg);
}

.faq__item[open] .faq__sign::after {
    transform: rotate(0deg);
}

.faq__answer {
    padding: 0 var(--space-5) var(--space-4) 0;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

@media (min-width: 40em) {
    .lead-form__grid,
    .audience,
    .levels,
    .module-grid,
    .deliverables__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-form__grid,
    .audience,
    .levels {
        gap: var(--space-4);
    }

    .module-grid,
    .deliverables__list {
        gap: 1px;
    }

    .deliverables__list {
        gap: 0.5rem var(--space-5);
        background-color: transparent;
    }

    .lead-form__field--wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 48em) {
    .course-hero__facts {
        display: flex;
        flex-wrap: wrap;
    }

    .course-hero {
        background-image: url("../assets/img/hero-network.jpg");
        background-image: image-set(url("../assets/img/hero-network.webp") type("image/webp"),
            url("../assets/img/hero-network.jpg") type("image/jpeg"));
    }
}

@media (min-width: 64em) {
    .lead-form__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .overview {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(2.5rem, 5vw, 4rem);
    }

    .audience {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .audience--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .brochure__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        column-gap: clamp(2.5rem, 5vw, 4rem);
    }
}

@media (min-width: 80em) {
    .course-hero__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        column-gap: clamp(2.5rem, 5vw, 4rem);
    }

    .course-hero .lead-card {
        max-width: none;
    }
}

/* Hero brochure action ---------------------------------------------------- */

.course-hero__actions {
    margin-top: var(--space-4);
}

/* Floating brochure button ------------------------------------------------

   The syllabus runs long, so the download form can sit a long way down the
   page. This keeps it one tap away from anywhere. Once the visitor jumps to
   the form it gets out of the way, so it never covers the fields. */

.brochure-fab {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--gradient-primary);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-blue);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brochure-fab:hover,
.brochure-fab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 30px 56px -24px rgba(45, 110, 231, 0.9);
    color: #ffffff;
}

.brochure-fab .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* After the visitor follows the link, the button would sit on top of the form
   it just took them to. :has() removes it without any JavaScript. */
@supports selector(:has(*)) {
    main:has(#brochure:target) .brochure-fab {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brochure-fab {
        transition: none;
    }

    .brochure-fab:hover,
    .brochure-fab:focus-visible {
        transform: none;
    }
}

@media (max-width: 40rem) {
    .brochure-fab {
        padding: 0.75rem 1rem;
    }

    .brochure-fab__label {
        font-size: var(--step--2);
    }
}