:root {
    --container-width:1200px
}

::selection {
    background:#f9cb40;
    color:#023047
}

a,button,input {
    outline-offset:5px
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--accent)
}

[id] {
    scroll-margin-top:110px
}

.nav-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:80px;
    gap:24px
}

.zas-brand {
    gap:8px
}

.zas-brand-logo {
    width:62px;
    height:56px
}

.brand-text {
    display:flex;
    flex-direction:column
}

.brand-text strong {
    color:var(--primary);
    font-size:21px;
    letter-spacing:1px;
    line-height:1.2
}

.brand-text small {
    color:var(--accent);
    font-size:12px;
    letter-spacing:2px;
    line-height:1.7
}

.nav-cta {
    margin-left:20px;
    gap:20px;
    font-size:14px
}

.zas-nav-link {
    font-size:14px
}

.hero {
    background:var(--secondary);
    position:relative;
    overflow:hidden
}

.hero-grid {
    display:grid;
    grid-template-columns:1.08fr 1fr;
    gap:70px;
    align-items:center;
    min-height:600px;
    padding-block:65px
}

.hero-copy .zas-eyebrow {
    font-size:11px;
    letter-spacing:2px;
    display:flex;
    align-items:center;
    gap:12px
}

.eyebrow-line {
    width:25px;
    height:2px;
    background:var(--highlight)
}

.hero h1 {
    font-size:clamp(42px,5.1vw,68px);
    line-height:1.08;
    color:white;
    letter-spacing:-2.5px;
    margin:26px 0
}

.hero h1 em {
    font-style:normal;
    color:var(--primary-light)
}

.hero-description {
    color:#c0d4df;
    font-size:16px;
    max-width:450px;
    line-height:1.8
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:30px
}

.hero-actions .zas-btn {
    gap:28px;
    font-size:14px;
    padding:14px 22px
}

.hero-secondary {
    color:white;
    font-size:13px;
    display:flex;
    gap:12px
}

.hero-note {
    color:#a3bdcb;
    display:flex;
    gap:9px;
    align-items:center;
    font-size:12px;
    margin-top:30px
}

.note-dot {
    width:6px;
    height:6px;
    background:var(--highlight);
    border-radius:50%;
    display:inline-block
}

.hero-visual {
    position:relative;
    background:#083c53;
    border:1px solid #315d70;
    border-radius:var(--radius-xl);
    padding:24px;
    box-shadow:0 20px 60px #001b2940
}

.visual-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:2px;
    color:#aac6d4
}

.visual-cross {
    color:var(--primary-light);
    font-size:24px
}

.hero-visual>img {
    width:100%;
    aspect-ratio:1.25;
    object-fit:contain
}

.visual-caption {
    border-top:1px solid #315d70;
    padding-top:20px;
    color:white;
    font-size:14px;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.visual-caption small {
    display:block;
    font-size:9px;
    color:#8daebf;
    letter-spacing:1.7px;
    margin-bottom:4px
}

.visual-arrow {
    color:var(--primary-light);
    font-size:32px
}

.visual-tag {
    position:absolute;
    right:-20px;
    top:80px;
    background:white;
    border-radius:8px;
    padding:10px 16px;
    box-shadow:var(--shadow-md);
    color:var(--secondary);
    font-size:12px;
    display:flex;
    gap:8px;
    align-items:center
}

.visual-tag .note-dot {
    background:var(--primary)
}

.domain-strip {
    border-bottom:1px solid var(--border);
    background:#f7fbfd
}

.domain-strip>.zas-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-block:25px
}

.domain-intro {
    font-size:9px;
    letter-spacing:1px;
    color:var(--text-muted);
    flex-shrink:0
}

.domain-intro strong {
    color:var(--secondary);
    font-size:10px
}

.domain-strip a {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:12px;
    font-weight:600
}

.domain-strip a:hover {
    color:var(--primary-dark)
}

.domain-number {
    color:var(--primary);
    font-size:10px
}

.section-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px
}

.section-header h2,.approach h2,.detail-section h2 {
    font-size:34px;
    margin-bottom:12px
}

.section-header p:last-child {
    margin-bottom:0;
    font-size:14px
}

.section-kicker {
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--primary-dark);
    margin-bottom:14px
}

.text-link {
    color:var(--primary-dark);
    font-size:13px;
    font-weight:600;
    display:inline-flex;
    gap:20px;
    align-items:center;
    white-space:nowrap
}

.text-link:hover {
    text-decoration:underline
}

.course-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.course-card {
    border:1px solid #e3e9ed;
    border-radius:12px;
    overflow:hidden;
    background:white;
    display:flex;
    flex-direction:column;
    transition:transform .2s,box-shadow .2s
}

.course-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-md)
}

.course-art {
    height:210px;
    display:block;
    position:relative;
    overflow:hidden;
    background:#edf6f8
}

.course-art img {
    width:100%;
    height:100%;
    object-fit:contain;
    padding:10px 30px
}

.art-robotics {
    background:#e9f4f6
}

.art-electronics {
    background:#f8f3e7
}

.art-coding {
    background:#edf0f9
}

.art-embedded {
    background:#eaf4ee
}

.art-ai {
    background:#f4eef8
}

.art-label {
    position:absolute;
    top:16px;
    left:16px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--secondary);
    font-weight:700
}

.course-card-body {
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1
}

.card-meta {
    font-size:9px;
    color:var(--primary-dark);
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    font-weight:600
}

.status {
    font-size:9px;
    background:#f5f6f7;
    color:#626b76;
    padding:4px 8px;
    border-radius:20px;
    white-space:nowrap
}

.course-card h3 {
    font-size:20px;
    line-height:1.35;
    margin:16px 0 10px
}

.course-card h3 a:hover {
    color:var(--primary-dark)
}

.course-card p {
    font-size:13px;
    line-height:1.75;
    margin-bottom:24px
}

.card-bottom {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:17px;
    border-top:1px solid var(--border);
    font-size:11px;
    color:var(--text-muted)
}

.card-bottom a {
    color:var(--primary-dark);
    font-weight:600
}

.card-bottom a span {
    margin-left:8px
}

.approach {
    background:#f5f9fa;
    border-top:1px solid #e7eff2
}

.approach-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px
}

.approach h2 {
    font-size:42px;
    line-height:1.15
}

.approach h2 span {
    color:var(--primary)
}

.approach-grid>div>p:not(.section-kicker) {
    font-size:14px;
    max-width:390px;
    margin:24px 0
}

.approach-steps article {
    display:flex;
    gap:24px;
    padding:26px 0;
    border-bottom:1px solid #dce8ed
}

.approach-steps article:first-child {
    padding-top:8px
}

.approach-steps article>span {
    font-size:12px;
    font-weight:700;
    color:var(--primary);
    padding-top:4px
}

.approach-steps h3 {
    font-size:19px;
    margin-bottom:10px
}

.approach-steps p {
    font-size:14px;
    margin:0
}

.zas-footer {
    padding:55px 0 20px
}

.footer-content {
    display:grid;
    grid-template-columns:2fr 1fr 1.2fr;
    gap:60px
}

.footer-brand {
    font-weight:700;
    letter-spacing:1.5px;
    font-size:21px;
    color:white!important
}

.footer-brand span {
    display:block;
    color:var(--accent);
    font-size:10px;
    letter-spacing:2.3px
}

.footer-content p {
    font-size:13px;
    line-height:1.8;
    margin-top:20px
}

.footer-content h3 {
    font-size:13px;
    margin-bottom:18px
}

.footer-content>div>a:not(.footer-brand) {
    display:block;
    font-size:12px;
    margin-bottom:9px
}

.zas-footer-bottom {
    font-size:11px
}

.page-heading {
    background:#f0f7f9;
    padding:65px 0 55px;
    border-bottom:1px solid #e1ebef
}

.page-heading h1 {
    font-size:46px;
    letter-spacing:-1.5px;
    margin-bottom:18px
}

.page-heading p:last-child {
    font-size:15px;
    max-width:650px;
    margin:0
}

.catalogue {
    padding-block:40px 80px
}

.search-form>label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:10px
}

.search-controls {
    display:flex;
    gap:12px;
    max-width:650px
}

.search-controls input[type=search] {
    min-width:0;
    flex:1;
    border:1px solid #ccd8df;
    border-radius:8px;
    padding:13px 16px;
    font-size:14px;
    color:var(--secondary);
    background:white
}

.search-controls input:focus {
    outline:2px solid var(--primary);
    outline-offset:2px
}

.search-controls button {
    gap:20px
}

.category-filters {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin:28px 0
}

.filter {
    border:1px solid #dce4e8;
    border-radius:6px;
    padding:9px 14px;
    font-size:12px;
    transition:background .2s
}

.filter:hover {
    background:#edf7fa
}

.filter.selected {
    background:var(--secondary);
    color:white;
    border-color:var(--secondary)
}

.results-heading {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
    font-size:12px;
    align-items:center
}

.results-heading p {
    margin:0
}

.results-heading>span {
    color:var(--text-muted);
    font-size:11px
}

.empty-state {
    text-align:center;
    background:#f5f9fa;
    border-radius:12px;
    padding:65px 25px
}

.detail-hero {
    background:var(--secondary);
    padding:25px 0 55px
}

.breadcrumbs {
    display:flex;
    gap:12px;
    color:#b6cedb;
    font-size:12px;
    flex-wrap:wrap
}

.breadcrumbs a:hover {
    color:white
}

.detail-hero-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:60px;
    align-items:center;
    margin-top:35px
}

.detail-hero h1 {
    color:white;
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    letter-spacing:-1.5px;
    margin-bottom:20px
}

.detail-hero-grid p:not(.zas-eyebrow) {
    color:#c0d4df;
    max-width:610px
}

.detail-hero .zas-eyebrow {
    font-size:12px
}

.detail-hero-grid img {
    width:100%;
    height:260px;
    object-fit:contain;
    background:#083c53;
    border-radius:12px
}

.detail-badges {
    display:flex;
    gap:10px;
    margin-top:25px
}

.detail-badges span {
    font-size:11px;
    padding:6px 12px;
    border:1px solid #50768a;
    border-radius:30px;
    color:white
}

.detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:70px;
    align-items:start;
    padding-block:55px
}

.detail-section {
    margin-bottom:45px
}

.detail-section h2 {
    font-size:27px
}

.detail-section p,.detail-section li {
    font-size:14px;
    line-height:1.8
}

.content-notice {
    background:#f1f8fa;
    border-left:3px solid var(--primary);
    padding:20px;
    margin-top:24px
}

.content-notice strong {
    font-size:13px
}

.content-notice p {
    margin:7px 0 0;
    font-size:13px
}

.outcome-list {
    padding:0;
    list-style:none
}

.outcome-list li {
    position:relative;
    padding-left:25px;
    margin-bottom:12px
}

.outcome-list li:before {
    content:'✓';
    color:var(--primary-dark);
    position:absolute;
    left:0
}

.modules {
    border:1px solid #dfe7ec;
    border-radius:8px;
    overflow:hidden
}

.modules details+details {
    border-top:1px solid #dfe7ec
}

.modules summary {
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    list-style:none
}

.modules summary::-webkit-details-marker {
    display:none
}

.module-number {
    color:var(--primary-dark);
    font-size:11px
}

.module-plus {
    margin-left:auto;
    color:var(--primary-dark);
    font-size:20px
}

.modules details[open] .module-plus {
    transform:rotate(45deg)
}

.modules ul {
    margin:0;
    padding:0 25px 20px 64px;
    color:var(--text-body)
}

.media-placeholder {
    border:1px dashed #b9ced8;
    border-radius:8px;
    background:#fafcfd;
    display:flex;
    align-items:center;
    gap:20px;
    padding:24px
}

.media-placeholder>span {
    font-size:35px;
    color:var(--primary)
}

.media-placeholder strong {
    font-size:13px
}

.media-placeholder p {
    font-size:12px;
    margin:5px 0 0
}

.media-gallery {
    display:grid;
    gap:20px
}

.media-gallery figure {
    margin:0
}

.media-gallery img,.media-gallery video {
    width:100%;
    border-radius:8px;
    max-height:500px;
    object-fit:contain;
    background:#f2f6f8
}

.media-gallery figcaption {
    font-size:12px;
    color:var(--text-muted);
    margin-top:8px
}

.course-sidebar {
    position:sticky;
    top:110px;
    border:1px solid #dde7ec;
    padding:26px;
    border-radius:12px;
    box-shadow:var(--shadow-sm)
}

.course-sidebar h2 {
    font-size:20px;
    line-height:1.4
}

.course-sidebar dl {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 10px;
    border-block:1px solid #e7ecef;
    padding-block:20px;
    font-size:12px
}

.course-sidebar dt {
    color:var(--text-muted)
}

.course-sidebar dd {
    margin:0;
    text-align:right
}

.course-sidebar h3 {
    font-size:14px
}

.course-sidebar p {
    font-size:12px
}

.course-sidebar .zas-btn {
    width:100%;
    gap:14px;
    font-size:12px;
    margin-top:8px
}

.course-sidebar small {
    display:block;
    text-align:center;
    font-size:10px;
    color:var(--text-muted);
    margin-top:14px
}

@media(min-width:992px) {
    .zas-navigation {
        display:flex!important
    }
}

@media(max-width:1100px) {
    .hero-grid {
        gap:35px
    }
    .domain-strip>.zas-container {
        gap:15px
    }
    .domain-strip a {
        gap:6px
    }
    .domain-intro {
        display:none
    }
    .course-grid {
        gap:18px
    }
    .card-meta {
        flex-wrap:wrap
    }
    .detail-layout {
        gap:35px
    }
    .visual-tag {
        right:0
    }
    .hero-actions {
        gap:16px
    }
}

@media(max-width:991px) {
    .hero-grid {
        grid-template-columns:1fr 1fr;
        gap:30px;
        padding-block:50px;
        min-height:540px
    }
    .hero h1 {
        font-size:50px
    }
    .hero-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:18px
    }
    .hero-copy .zas-eyebrow {
        letter-spacing:1px;
        font-size:9px
    }
    .hero-visual {
        padding:16px
    }
    .visual-heading {
        font-size:8px
    }
    .visual-caption {
        font-size:11px
    }
    .visual-tag {
        top:60px;
        font-size:10px
    }
    .nav-cta {
        margin:10px 0 0
    }
    .course-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .approach-grid {
        gap:45px
    }
    .detail-layout {
        grid-template-columns:minmax(0,1fr) 280px
    }
    .footer-content {
        gap:30px
    }
    .domain-strip>.zas-container {
        flex-wrap:wrap;
        justify-content:center;
        gap:12px 25px
    }
}

@media(max-width:767px) {
    .nav-inner {
        min-height:68px
    }
    .zas-brand-logo {
        width:45px;
        height:42px
    }
    .brand-text strong {
        font-size:16px
    }
    .brand-text small {
        font-size:9px;
        letter-spacing:1.4px
    }
    .hero-grid {
        grid-template-columns:1fr;
        padding:40px 0;
        gap:35px
    }
    .hero h1 {
        font-size:54px
    }
    .hero-description {
        font-size:14px
    }
    .hero-actions {
        flex-direction:row;
        align-items:center;
        flex-wrap:wrap;
        gap:20px
    }
    .hero-actions .zas-btn {
        font-size:12px;
        min-height:46px;
        padding:12px 18px
    }
    .hero-secondary {
        font-size:12px
    }
    .hero-visual {
        max-width:480px;
        width:100%;
        justify-self:center
    }
    .hero-visual>img {
        max-height:300px
    }
    .visual-heading {
        font-size:9px
    }
    .visual-caption {
        font-size:13px
    }
    .visual-tag {
        right:12px;
        top:55px
    }
    .hero-note {
        margin-top:22px
    }
    .domain-strip a {
        font-size:11px
    }
    .domain-strip>.zas-container {
        padding-block:20px
    }
    .section-header {
        align-items:flex-start;
        flex-direction:column;
        gap:18px
    }
    .section-header h2 {
        font-size:30px
    }
    .approach-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .approach h2 {
        font-size:36px
    }
    .approach-steps article {
        padding:20px 0
    }
    .footer-content {
        grid-template-columns:1fr 1fr;
        gap:30px
    }
    .footer-content>div:first-child {
        grid-column:1/-1
    }
    .page-heading {
        padding:40px 0
    }
    .page-heading h1 {
        font-size:36px
    }
    .results-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:5px
    }
    .category-filters {
        gap:8px
    }
    .filter {
        font-size:11px;
        padding:8px 10px
    }
    .detail-hero-grid {
        grid-template-columns:1fr;
        gap:25px
    }
    .detail-hero-grid img {
        height:220px
    }
    .detail-layout {
        grid-template-columns:1fr;
        padding-block:35px;
        gap:15px
    }
    .course-sidebar {
        position:static;
        grid-row:1
    }
    .course-sidebar h2 {
        display:none
    }
    .course-sidebar dl {
        margin-top:0
    }
    .course-sidebar .section-kicker {
        margin-bottom:15px
    }
    .detail-section {
        margin-bottom:32px
    }
    .media-placeholder {
        padding:18px
    }
    .detail-hero {
        padding-bottom:35px
    }
    .detail-section h2 {
        font-size:24px
    }
    .breadcrumbs {
        font-size:10px;
        gap:8px
    }
}

@media(max-width:540px) {
    .course-grid {
        grid-template-columns:1fr
    }
    .course-art {
        height:220px
    }
    .card-meta {
        font-size:10px
    }
    .course-card h3 {
        font-size:22px
    }
    .hero h1 {
        font-size:48px
    }
    .hero-copy .zas-eyebrow {
        font-size:8px
    }
    .desktop-break {
        display:none
    }
    .search-controls {
        gap:8px
    }
    .search-controls button {
        padding:10px 14px;
        font-size:12px;
        gap:8px
    }
    .search-controls input[type=search] {
        font-size:12px;
        padding:12px
    }
    .page-heading h1 {
        font-size:32px
    }
    .catalogue {
        padding-top:28px
    }
    .footer-content {
        gap:20px
    }
    .hero-visual>img {
        max-height:250px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important
    }
    .course-card:hover,.zas-btn:hover {
        transform:none
    }
}

/* Compact, shared spacing and course information layout. */
.course-art img.course-cover {
    padding: 0;
    object-fit: cover;
}

.course-art:has(.course-cover) .art-label {
    background: #ffffffeb;
    padding: 4px 8px;
    border-radius: 4px;
}

.module-bonus {
    padding: 3px 7px;
    background: #fff2cd;
    color: #72521d;
    font-size: 10px;
    border-radius: 4px;
}

.module-demo {
    margin: 0 18px 18px 64px;
    padding: 14px;
    background: #f0f7f9;
    border-left: 3px solid var(--primary);
}

.module-demo strong {
    font-size: 11px;
    color: var(--primary-dark);
}

.module-demo p {
    font-size: 13px;
    margin: 5px 0 0;
}

.media-gallery figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.media-duration {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.course-documents a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #dce7ec;
    padding: 18px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

.course-documents a:hover {
    background: #f0f7f9;
}

.course-documents small {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    margin-top: 5px;
}

.zas-section {
    padding-block: 58px;
}

.hero-grid {
    min-height: 470px;
    padding-block: 40px;
    gap: 48px;
}

.hero h1 {
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-block: 20px 24px;
}

.hero-actions {
    margin-top: 24px;
}

.hero-visual {
    padding: 20px;
}

.hero-visual > img {
    max-height: 310px;
}

.visual-caption {
    gap: 16px;
    padding-top: 16px;
    flex-wrap: wrap;
}

.visual-tag {
    position: static;
    padding: 7px 11px;
    box-shadow: none;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
}

.section-header {
    margin-bottom: 24px;
}

.section-header h2 {
    font-size: 32px;
}

.section-kicker {
    margin-bottom: 10px;
}

.domain-strip > .zas-container {
    padding-block: 19px;
}

.page-heading {
    padding-block: 24px;
}

.page-heading h1 {
    font-size: 28px;
    letter-spacing: -.6px;
    margin-bottom: 8px;
}

.page-heading p:last-child {
    max-width: none;
    font-size: 15px;
}

.catalogue {
    padding-block: 24px 58px;
}

.category-filters {
    margin-block: 18px;
}

.results-heading {
    margin-bottom: 18px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-brand > img {
    width: 62px;
    height: 56px;
    flex-shrink: 0;
}

.footer-brand .footer-brand-text {
    color: white;
    font-size: 21px;
    letter-spacing: 1.5px;
}

.footer-brand-text > span {
    margin-top: 3px;
}

.zas-social-links {
    margin-top: 18px;
    gap: 10px;
}

.zas-social-links a, .social-unconfigured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: white;
}

.zas-social-links a:hover {
    background: var(--primary);
    color: white;
}

.social-unconfigured {
    color: #b8b8b8;
}

.course-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.course-section-nav a {
    font-size: 11px;
    padding: 7px 10px;
    border: 1px solid #dce7ec;
    border-radius: 6px;
}

.course-section-nav a:hover {
    background: #edf7fa;
    color: var(--primary-dark);
}

.detail-section {
    margin-bottom: 32px;
}

.detail-section .section-pending {
    color: var(--text-muted);
    font-size: 13px;
}

.course-sidebar dl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.course-sidebar dd {
    overflow-wrap: anywhere;
}

.course-sidebar .zas-btn-primary {
    color: var(--white);
    background: var(--secondary);
}

.course-sidebar .zas-btn-primary:hover {
    background: var(--primary-dark);
}

/* LMS typography: Inter for content, Poppins for the brand lockup. */
.brand-text, .footer-brand-text {
    font-family: var(--font-family-brand);
}

.brand-text strong {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

.brand-text small {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.footer-brand .footer-brand-text {
    font-weight: 700;
}

.footer-brand-text > span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.zas-nav-link {
    font-size: 15px;
}

.nav-cta {
    font-size: 15px;
}

.zas-navbar {
    background: var(--white);
}

.zas-navbar.is-scrolled {
    background: var(--dark);
    border-bottom-color: rgba(255, 255, 255, .1);
}

.zas-navbar.is-scrolled .brand-text strong {
    color: var(--primary);
}

.zas-navbar.is-scrolled .zas-nav-toggle span {
    background: var(--white);
}

.zas-navbar .nav-cta {
    color: var(--white);
    background: var(--secondary);
}

.zas-navbar .nav-cta:hover {
    background: var(--primary-dark);
}

.zas-navbar .zas-nav-link.is-active {
    color: var(--secondary);
    background: rgba(33, 158, 188, .09);
}

.zas-navbar .zas-nav-link.is-active:hover {
    background: rgba(33, 158, 188, .15);
}

.zas-navbar .zas-nav-link:not(.is-active):hover {
    color: var(--secondary);
    background: rgba(2, 48, 71, .08);
}

.zas-navbar.is-scrolled .zas-nav-link,
.zas-navbar.is-scrolled .zas-nav-link.is-active {
    color: var(--white);
}

.zas-navbar.is-scrolled .zas-nav-link.is-active {
    background: rgba(255, 255, 255, .12);
}

.zas-navbar.is-scrolled .zas-nav-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .18);
}

.zas-navbar.is-scrolled .nav-cta {
    background: var(--primary-dark);
}

.zas-navbar.is-scrolled .nav-cta:hover {
    background: var(--secondary);
}

.hero {
    background: var(--secondary);
}

.hero h1 em {
    color: var(--primary-light);
}

.hero-description {
    font-size: 1.2rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .95);
    max-width: 540px;
}

.hero-copy .zas-eyebrow {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--white);
}

.hero-actions .zas-btn {
    font-size: 1rem;
}

.hero-secondary {
    font-size: 14px;
    font-weight: 600;
}

.hero-visual {
    background: #083c53;
    border-color: #315d70;
    box-shadow: 0 20px 60px rgba(0, 27, 41, .25);
}

.visual-heading {
    letter-spacing: 1.2px;
    color: #aac6d4;
}

.visual-cross {
    color: var(--primary-light);
}

.visual-caption {
    font-size: 15px;
    color: var(--white);
    border-color: #315d70;
}

.visual-caption small {
    font-size: 10px;
    letter-spacing: 1px;
    color: #a3bdcb;
}

.visual-tag {
    color: var(--primary-dark);
    background: var(--white);
}

.domain-intro {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--secondary);
}

.section-kicker {
    font-size: 12px;
    letter-spacing: 1px;
}

.section-header p:last-child {
    font-size: 1rem;
}

.course-card h3 {
    font-size: 22px;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.course-card p {
    font-size: 15px;
    line-height: 1.65;
}

.card-meta {
    font-size: 11px;
}

.status {
    font-size: 10px;
}

.card-bottom {
    font-size: 12px;
    flex-wrap: wrap;
}

.text-link {
    font-size: 14px;
}

.approach-grid > div > p:not(.section-kicker), .approach-steps p {
    font-size: 1rem;
    line-height: 1.75;
}

.approach h2 {
    letter-spacing: -.02em;
}

.detail-hero h1 {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.detail-hero-grid p:not(.zas-eyebrow) {
    color: #dceaf0;
    font-size: 1.05rem;
    line-height: 1.75;
}

.detail-section p, .detail-section li {
    font-size: 1rem;
    line-height: 1.75;
}

.detail-section h2 {
    font-weight: 700;
    letter-spacing: -.02em;
}

.course-sidebar p, .course-sidebar dl {
    font-size: 13px;
}

.course-sidebar dl {
    gap: 16px 10px;
}

.course-section-nav a {
    font-size: 12px;
    font-weight: 600;
}

.module-demo p {
    font-size: 14px;
}

.modules summary {
    font-size: 14px;
}

.search-form > label {
    font-size: 14px;
    font-weight: 700;
}

.search-controls input[type=search] {
    font-size: 15px;
}

.filter {
    font-size: 13px;
    font-weight: 500;
}

.footer-content p {
    font-size: 14px;
}

.footer-content > div > a:not(.footer-brand) {
    font-size: 13px;
}

@media (max-width: 991px) {
    .hero-grid {
        gap: 28px;
    }
    .hero h1 {
        font-size: 44px;
    }
    .visual-tag {
        font-size: 10px;
    }
    .hero-copy .zas-eyebrow {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .zas-section {
        padding-block: 40px;
    }
    .hero-grid {
        min-height: auto;
        padding-block: 30px;
        gap: 28px;
    }
    .hero h1 {
        font-size: 2.3rem;
    }
    .hero-description {
        font-size: 1.05rem;
    }
    .hero-actions .zas-btn {
        font-size: 14px;
    }
    .brand-text strong {
        font-size: 18px;
    }
    .brand-text small {
        font-size: 11px;
    }
    .hero-visual > img {
        max-height: 230px;
    }
    .page-heading {
        padding-block: 20px;
    }
    .page-heading h1 {
        font-size: 25px;
    }
    .section-header h2 {
        font-size: 27px;
    }
    .catalogue {
        padding-block: 20px 40px;
    }
    .footer-brand .footer-brand-text {
        font-size: 18px;
    }
    .footer-brand > img {
        width: 52px;
        height: 48px;
    }
    .course-section-nav {
        margin-bottom: 22px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
    .hero-copy .zas-eyebrow {
        font-size: 13px;
    }
}