/*
 * Public marketing pages use the same Hacktivate tokens, type, controls, and
 * Lucide icon language as the authenticated product.
 */

.marketing-page {
    min-height: 100vh;
}

.marketing-shell {
    width: min(100% - (var(--space-5) * 2), var(--content-max));
    margin-inline: auto;
}

.marketing-nav {
    margin-bottom: 0;
}

.site-nav .marketing-nav-cta {
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--brand);
}

.site-nav .marketing-nav-cta:hover,
.site-nav .marketing-nav-cta:focus {
    color: var(--brand-hover);
    border-color: var(--brand-hover);
}

.marketing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-8);
    margin-top: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.marketing-hero-home {
    background:
        radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 32%),
        var(--surface);
}

.marketing-hero-copy h1,
.marketing-page-header h1 {
    max-width: 16ch;
    font-size: clamp(var(--text-2xl), 5vw, 4.25rem);
}

.marketing-lede {
    max-width: 58ch;
    margin: var(--space-5) 0;
    color: var(--ink-soft);
    font-size: var(--text-lg);
    font-weight: 340;
}

.marketing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.marketing-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.marketing-actions .btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-ink);
}

.marketing-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.marketing-note i {
    color: var(--success);
    margin-top: 0.25em;
}

.marketing-console {
    border: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--ink));
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--brand-ink);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transform: rotate(1deg);
}

.marketing-console-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--ink) 88%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--surface) 18%, transparent);
}

.marketing-console-bar span {
    width: 0.65rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--danger);
}

.marketing-console-bar span:nth-child(2) { background: var(--amber-500); }
.marketing-console-bar span:nth-child(3) { background: var(--success); }
.marketing-console-bar code { margin-left: auto; color: var(--brand-soft); }

.marketing-console-body {
    padding: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.marketing-console-body p { margin: 0 0 var(--space-3); }
.marketing-console-result { display: flex; justify-content: space-between; color: var(--brand-soft); }
.marketing-console-result span { color: color-mix(in srgb, var(--success) 60%, var(--surface)); }
.marketing-prompt { color: var(--brand-2); }
.marketing-cursor { color: var(--brand-2); }

.marketing-section {
    padding: var(--space-10) 0;
}

.marketing-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
    align-items: center;
    gap: var(--space-8);
    min-height: min(42rem, calc(100vh - 16rem));
    padding: var(--space-10) var(--space-8);
}

.marketing-auth-intro h1 {
    max-width: 12ch;
    font-size: clamp(var(--text-2xl), 5vw, 4rem);
}

.marketing-auth-card {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

.marketing-auth-confirmation {
    grid-template-columns: minmax(0, 48rem);
    justify-content: center;
    align-content: start;
    gap: var(--space-4);
    padding-block: var(--space-8);
}

.marketing-auth-confirmation .marketing-auth-intro,
.marketing-auth-confirmation .marketing-auth-card {
    width: min(100%, 48rem);
    justify-self: center;
}

.marketing-auth-confirmation .marketing-auth-intro {
    text-align: center;
}

.marketing-auth-confirmation .marketing-auth-intro h1,
.marketing-auth-confirmation .marketing-lede {
    max-width: none;
}

.marketing-auth-confirmation .marketing-lede {
    margin-inline: auto;
    margin-bottom: 0;
}

.marketing-auth-confirmation .credentials-box h4 {
    overflow-wrap: anywhere;
}

.marketing-section + .marketing-section {
    border-top: 1px solid var(--line);
}

.marketing-section-heading {
    max-width: 48rem;
    margin-bottom: var(--space-6);
}

.marketing-section-heading p:not(.eyebrow),
.marketing-cta p:not(.eyebrow),
.marketing-pilot > div > p:not(.eyebrow) {
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: var(--text-lg);
}

.marketing-card-grid,
.marketing-feature-list,
.marketing-evidence-grid,
.marketing-price-grid,
.marketing-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.marketing-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-card,
.marketing-audience-card,
.marketing-summary-card,
.marketing-price-card,
.marketing-faq-grid article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-card {
    padding: var(--space-6);
}

.marketing-card p,
.marketing-audience-card p,
.marketing-feature-list p,
.marketing-summary-card p,
.marketing-price-card p,
.marketing-faq-grid p,
.marketing-step-list p {
    color: var(--ink-soft);
}

.marketing-track-card {
    border-top: 4px solid var(--track-accent);
}

.marketing-track-card.is-ai { --track-accent: var(--track-ai); }
.marketing-track-card.is-coding { --track-accent: var(--track-coding); }
.marketing-track-card.is-cybersecurity { --track-accent: var(--track-cybersecurity); }
.marketing-track-card .marketing-icon { color: var(--track-accent); background: color-mix(in srgb, var(--track-accent) 10%, var(--surface)); }

.marketing-icon,
.marketing-safeguarding-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    aspect-ratio: 1;
    margin-bottom: var(--space-4);
    border-radius: var(--radius);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--text-xl);
}

.marketing-section.marketing-audience {
    border-top: 0;
}

.marketing-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.marketing-audience-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6);
}

.marketing-audience-card .marketing-icon { margin-bottom: 0; }
.marketing-audience-card a { font-weight: 650; text-decoration: none; }
.marketing-audience-card a:hover span { text-decoration: underline; }

.marketing-feature-list article {
    padding: var(--space-5) 0;
}

.marketing-feature-list article > i {
    color: var(--brand);
    font-size: var(--text-2xl);
}

.marketing-feature-list h3 { margin-top: var(--space-4); }

.marketing-summary-card {
    padding: var(--space-6);
}

.marketing-summary-card h2 {
    font-size: var(--text-xl);
}

.marketing-check-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.marketing-check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.marketing-check-list i {
    color: var(--success);
    margin-top: 0.25em;
}

.marketing-safeguarding,
.marketing-pilot,
.marketing-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-safeguarding {
    background: color-mix(in srgb, var(--brand-soft) 52%, var(--surface));
}

.marketing-safeguarding-icon {
    width: 8rem;
    margin: 0 auto;
    border-radius: 50%;
    font-size: var(--text-3xl);
}

.marketing-step-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketing-step-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
}

.marketing-step-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-weight: 700;
}

.marketing-step-list h3,
.marketing-step-list p { margin: 0; }

.marketing-page-header {
    max-width: 52rem;
    padding: var(--space-10) 0 var(--space-8);
}

.marketing-price-grid {
    align-items: stretch;
}

.marketing-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
}

.marketing-price-card.is-business {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
    box-shadow: var(--shadow-2);
}

.marketing-price-card .marketing-check-list {
    margin-bottom: var(--space-6);
}

.marketing-price-card .btn,
.marketing-price-card > .disabled {
    margin-top: auto;
}

.marketing-plan-name {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.marketing-plan-summary {
    min-height: 4.8rem;
}

.marketing-price-detail {
    margin-top: calc(var(--space-2) * -1);
}

.marketing-plan-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--brand-ink);
    font-size: var(--text-sm);
    font-weight: 650;
}

.marketing-plan-badge.is-muted {
    background: var(--surface-raised);
    color: var(--ink-soft);
}

.marketing-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-faq-grid article {
    padding: var(--space-5);
}

.marketing-cta {
    margin: var(--space-8) 0;
    background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface));
}

.marketing-cta .marketing-actions {
    justify-content: flex-end;
}

.marketing-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6) 0;
    margin-top: var(--space-8);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.marketing-footer-brand img { height: 2rem; }
.marketing-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }
.marketing-footer a { color: var(--ink-soft); text-decoration: none; }
.marketing-footer a:hover { color: var(--ink); text-decoration: underline; }
.marketing-footer p { margin: 0; }

@media (max-width: 900px) {
    .marketing-nav .nav-toggle { display: inline-flex; }
    .marketing-nav { position: relative; flex-wrap: wrap; }
    .marketing-nav .site-nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-2);
        z-index: 20;
    }
    .marketing-nav .site-nav-links.is-open { display: flex; }
    .marketing-nav .site-nav-spacer { margin-left: 0; }

    .marketing-hero,
    .marketing-auth,
    .marketing-safeguarding,
    .marketing-pilot,
    .marketing-cta {
        grid-template-columns: 1fr;
    }

    .marketing-card-grid,
    .marketing-feature-list,
    .marketing-evidence-grid,
    .marketing-price-grid {
        grid-template-columns: 1fr;
    }

    .marketing-feature-list article {
        padding: var(--space-4);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .marketing-plan-summary { min-height: 0; }
    .marketing-cta .marketing-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
    .marketing-shell {
        width: min(100% - (var(--space-4) * 2), var(--content-max));
    }

    .marketing-hero,
    .marketing-auth,
    .marketing-safeguarding,
    .marketing-pilot,
    .marketing-cta {
        padding: var(--space-6);
    }

    .marketing-audience-grid,
    .marketing-faq-grid {
        grid-template-columns: 1fr;
    }

    .marketing-audience-card {
        grid-template-columns: 1fr;
    }

    .marketing-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .marketing-actions .btn {
        width: 100%;
    }

    .marketing-console { transform: none; }

    .marketing-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .marketing-footer nav { order: 2; }
    .marketing-footer p { order: 3; }
}

/* ------------------------------------------------------------------ */
/* Marketing v2: a fuller SaaS presentation built from product tokens */
/* ------------------------------------------------------------------ */

/* Keep the public site comfortably wider than the signed-in product while
 * preserving a readable line length inside every prose component. */
.marketing-shell {
    --marketing-content-max: 78rem;
    width: min(100% - (var(--space-5) * 2), var(--marketing-content-max));
}

.marketing-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    backdrop-filter: blur(18px);
}

.site-nav .marketing-nav-cta {
    background: var(--brand);
    color: var(--brand-ink);
}

.site-nav .marketing-nav-cta:hover,
.site-nav .marketing-nav-cta:focus {
    background: var(--brand-hover);
    color: var(--brand-ink);
}

.marketing-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr);
    gap: clamp(var(--space-6), 5vw, var(--space-10));
    padding: clamp(var(--space-8), 6vw, 5.75rem);
    border-color: color-mix(in srgb, var(--brand) 15%, var(--line));
    box-shadow: var(--shadow-2);
}

.marketing-hero-copy h1,
.marketing-page-header h1 {
    font-size: clamp(var(--text-2xl), 5.4vw, 4.75rem);
    line-height: 1.02;
}

.marketing-section,
.marketing-course-section {
    padding-block: clamp(var(--space-8), 8vw, 6.75rem);
}

.marketing-section + .marketing-section {
    border-top: 0;
}

.marketing-section-heading {
    max-width: 53rem;
    margin-bottom: clamp(var(--space-6), 4vw, var(--space-10));
}

.marketing-section-heading.is-centred {
    margin-inline: auto;
    text-align: center;
}

.marketing-section-heading.is-centred p:not(.eyebrow) {
    margin-inline: auto;
}

.marketing-section-heading h2,
.marketing-band h2,
.marketing-course-intro h2,
.marketing-cta h2,
.marketing-pilot h2 {
    font-size: clamp(var(--text-2xl), 4vw, 3.25rem);
    line-height: 1.04;
}

.marketing-section-heading p:not(.eyebrow),
.marketing-course-intro > p:not(.eyebrow),
.marketing-band-copy > p:not(.eyebrow) {
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: var(--text-lg);
}

.marketing-section--compact {
    padding-block: clamp(var(--space-6), 5vw, var(--space-10));
}

/* These homepage modifiers halve both sides of selected section boundaries. */
.marketing-section.marketing-home-gap--compact-before {
    padding-top: clamp(var(--space-5), 4vw, 3.375rem);
}

.marketing-section.marketing-home-gap--compact-after {
    padding-bottom: clamp(var(--space-5), 4vw, 3.375rem);
}

.marketing-band.marketing-home-gap--compact-before {
    margin-top: clamp(var(--space-4), 2.5vw, 2.375rem);
}

.marketing-band.marketing-home-gap--compact-after {
    margin-bottom: clamp(var(--space-4), 2.5vw, 2.375rem);
}

.marketing-privacy {
    padding-top: clamp(var(--space-5), 4vw, 3.375rem);
}

.marketing-privacy .marketing-section-heading {
    margin-bottom: clamp(var(--space-4), 2vw, 2.375rem);
}

/* Compact, credible product facts can sit directly beneath a hero without
 * becoming another collection of floating cards. */
.marketing-proof-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: var(--space-6) 0 0;
    padding: 1px;
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-proof-strip > * {
    min-width: 0;
    padding: var(--space-5);
    background: var(--surface);
}

.marketing-proof-value,
.marketing-proof-strip strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    line-height: 1.15;
}

.marketing-proof-label,
.marketing-proof-strip small,
.marketing-proof-strip span {
    display: block;
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* Product previews deliberately reuse the shapes, spacing and accents of the
 * real application. They communicate shipped capability without stock art. */
.marketing-product-frame {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: var(--space-3);
    background: var(--ink);
    border: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--ink));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    color: var(--brand-ink);
}

.marketing-product-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.35rem;
    padding: 0 var(--space-2) var(--space-3);
    color: color-mix(in srgb, var(--brand-ink) 72%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.marketing-product-toolbar::before {
    width: 0.65rem;
    aspect-ratio: 1;
    background: var(--brand-2);
    border-radius: 50%;
    box-shadow:
        calc(var(--space-3) + 0.15rem) 0 0 var(--track-coding),
        calc(var(--space-5) + 0.3rem) 0 0 var(--track-ai);
    content: "";
}

.marketing-product-toolbar > *:first-child {
    margin-left: calc(var(--space-5) + 0.3rem);
}

.marketing-product-window {
    min-width: 0;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    background: var(--surface);
    border-radius: calc(var(--radius-lg) - var(--space-1));
    color: var(--ink);
}

.marketing-product-window > :last-child {
    margin-bottom: 0;
}

.marketing-product-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.marketing-product-heading h3,
.marketing-product-heading p {
    margin: 0;
}

.marketing-product-heading p {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.marketing-product-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketing-product-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.marketing-product-row-icon {
    display: grid;
    width: 2.5rem;
    aspect-ratio: 1;
    place-items: center;
    flex-shrink: 0;
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
    color: var(--brand);
}

.marketing-product-row-copy {
    min-width: 0;
}

.marketing-product-row-copy strong,
.marketing-product-row-copy small {
    display: block;
    overflow-wrap: anywhere;
}

.marketing-product-row-copy small {
    color: var(--ink-soft);
}

.marketing-product-row-value {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.marketing-product-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.marketing-product-metric {
    min-width: 0;
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.marketing-product-metric strong,
.marketing-product-metric small {
    display: block;
}

.marketing-product-metric strong {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
}

.marketing-product-metric small {
    color: var(--ink-soft);
}

.marketing-product-progress {
    height: 0.5rem;
    margin-top: var(--space-3);
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-pill);
}

.marketing-product-progress > span {
    display: block;
    width: var(--product-progress, 72%);
    height: 100%;
    background: var(--product-accent, var(--brand));
    border-radius: inherit;
}

.marketing-product-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--brand-soft);
    border-radius: var(--radius-pill);
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.marketing-product-code {
    margin: 0;
    padding: var(--space-5);
    overflow: hidden;
    background: var(--ink);
    border: 1px solid color-mix(in srgb, var(--brand-2) 25%, var(--ink));
    border-radius: var(--radius-sm);
    color: color-mix(in srgb, var(--brand-ink) 84%, var(--brand-2));
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* Surface bands create page cadence without introducing a second visual
 * language. Both modifier spellings are supported for template clarity. */
.marketing-band {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    align-items: center;
    gap: clamp(var(--space-6), 5vw, var(--space-10));
    margin-block: clamp(var(--space-6), 5vw, var(--space-10));
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-band.is-tinted,
.marketing-band--tinted {
    background: color-mix(in srgb, var(--brand-soft) 52%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
}

.marketing-band.is-dark,
.marketing-band--dark {
    background: var(--ink);
    border-color: color-mix(in srgb, var(--brand-2) 24%, var(--ink));
    color: var(--brand-ink);
    box-shadow: var(--shadow-2);
}

.marketing-band.is-dark :is(h2, h3, strong),
.marketing-band--dark :is(h2, h3, strong) {
    color: var(--brand-ink);
}

/* The last two selectors are not redundant: .marketing-section-heading
 * p:not(.eyebrow) sets a dark --ink-soft at higher specificity than a bare
 * element selector, so without matching it the band's own intro paragraph
 * renders navy on navy. */
.marketing-band.is-dark :is(p, li, small),
.marketing-band--dark :is(p, li, small),
.marketing-band.is-dark .marketing-section-heading p:not(.eyebrow),
.marketing-band--dark .marketing-section-heading p:not(.eyebrow) {
    color: color-mix(in srgb, var(--brand-ink) 76%, transparent);
}

.marketing-band.is-dark .eyebrow,
.marketing-band--dark .eyebrow {
    color: var(--brand-2);
}

.marketing-band.is-dark .marketing-check-list i,
.marketing-band--dark .marketing-check-list i {
    color: color-mix(in srgb, var(--success) 64%, var(--brand-ink));
}

.marketing-band-copy {
    min-width: 0;
}

.marketing-band-copy > :last-child {
    margin-bottom: 0;
}

/* Substantial course sections replace shallow equal cards. Each course keeps
 * the product's established track colour, while featured courses can lead an
 * audience page without implying the other tracks are unavailable. */
.marketing-course-list,
.marketing-priority-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.marketing-course {
    --course-accent: var(--brand);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--space-5), 4vw, var(--space-8));
    min-width: 0;
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--course-accent) 28%, var(--line));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-course.is-ai { --course-accent: var(--track-ai); }
.marketing-course.is-coding { --course-accent: var(--track-coding); }
.marketing-course.is-cybersecurity { --course-accent: var(--track-cybersecurity); }

.marketing-course.is-featured,
.marketing-course-featured,
.marketing-course--featured,
.marketing-priority-grid > .marketing-course.is-featured {
    grid-column: 1 / -1;
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--course-accent) 13%, transparent), transparent 38%),
        var(--surface);
    border-color: color-mix(in srgb, var(--course-accent) 48%, var(--line));
    box-shadow: var(--shadow-2);
}

.marketing-priority-education .marketing-course.is-coding,
.marketing-priority-business .marketing-course.is-ai {
    border-color: color-mix(in srgb, var(--course-accent) 48%, var(--line));
}

.marketing-priority-grid.marketing-priority-education > .marketing-course.is-coding,
.marketing-priority-grid.marketing-priority-business > .marketing-course.is-ai,
.marketing-priority-education .marketing-course-list > .marketing-course.is-coding,
.marketing-priority-business .marketing-course-list > .marketing-course.is-ai {
    grid-column: 1 / -1;
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--course-accent) 13%, transparent), transparent 38%),
        var(--surface);
    box-shadow: var(--shadow-2);
}

.marketing-course-intro,
.marketing-course-body {
    min-width: 0;
}

.marketing-course-intro {
    position: relative;
    padding-top: var(--space-5);
}

.marketing-course-intro::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 4px;
    background: var(--course-accent);
    border-radius: var(--radius-pill);
    content: "";
}

.marketing-course-intro h2,
.marketing-course-intro h3 {
    margin-bottom: var(--space-4);
}

.marketing-course-intro p {
    color: var(--ink-soft);
}

.marketing-course-body {
    display: grid;
    align-content: start;
    gap: var(--space-5);
}

.marketing-course-outcome {
    padding: var(--space-4);
    background: color-mix(in srgb, var(--course-accent) 8%, var(--surface));
    border-left: 4px solid var(--course-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.marketing-course-outcome > :last-child {
    margin-bottom: 0;
}

.marketing-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.marketing-topic-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketing-topic-grid > *,
.marketing-topic-list > li {
    min-width: 0;
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.marketing-topic-grid :is(h3, h4, strong),
.marketing-topic-list strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--ink);
}

.marketing-topic-grid :is(p, small),
.marketing-topic-list :is(p, small) {
    margin: 0;
    color: var(--ink-soft);
}

.marketing-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketing-chip,
.marketing-chip-list > li {
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--course-accent, var(--brand)) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--course-accent, var(--brand)) 24%, var(--line));
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--course-accent, var(--brand)) 78%, var(--ink));
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* Capability and bento grids give reporting, tools and teaching features a
 * deliberate hierarchy while retaining ordinary source order. */
.marketing-capability-grid,
.marketing-bento-grid,
.marketing-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
}

.marketing-capability-grid > *,
.marketing-bento-grid > *,
.marketing-bento > * {
    grid-column: span 4;
    min-width: 0;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-capability-grid > .is-featured,
.marketing-bento-grid > .is-featured,
.marketing-bento > .is-featured {
    grid-column: span 8;
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
}

.marketing-capability-grid > .is-wide,
.marketing-bento-grid > .is-wide,
.marketing-bento > .is-wide {
    grid-column: span 6;
}

.marketing-capability-grid > * > :last-child,
.marketing-bento-grid > * > :last-child,
.marketing-bento > * > :last-child {
    margin-bottom: 0;
}

.marketing-capability-grid .marketing-icon,
.marketing-bento-grid .marketing-icon,
.marketing-bento .marketing-icon {
    margin-bottom: var(--space-5);
}

/* Audience pathways are link-rich decision cards rather than generic feature
 * boxes. Existing audience markup receives the same improved layout. */
.marketing-audience-grid,
.marketing-pathways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.marketing-pathway,
.marketing-audience-card {
    min-width: 0;
    border-color: color-mix(in srgb, var(--brand) 13%, var(--line));
}

.marketing-pathway {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-pathway > :last-child,
.marketing-audience-card > div > :last-child {
    margin-top: auto;
}

.marketing-pathway a,
.marketing-audience-card a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand);
    font-weight: 650;
    text-decoration: none;
}

.marketing-pathway a:hover,
.marketing-pathway a:focus,
.marketing-audience-card a:hover,
.marketing-audience-card a:focus {
    color: var(--brand-hover);
}

/* Label only, so the trailing arrow stays clear of the underline. */
.marketing-pathway a:hover span,
.marketing-pathway a:focus span,
.marketing-audience-card a:hover span,
.marketing-audience-card a:focus span {
    text-decoration: underline;
}

.marketing-pathway.is-featured {
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}

/* Keep the final decision visually decisive: one strong surface and a limited
 * action group rather than another undifferentiated content card. */
.marketing-cta {
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-2) 17%, transparent), transparent 42%),
        color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
    box-shadow: var(--shadow-2);
}

@media (max-width: 1050px) {
    .marketing-card-grid,
    .marketing-feature-list,
    .marketing-evidence-grid,
    .marketing-price-grid,
    .marketing-audience-grid,
    .marketing-pathways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketing-capability-grid > *,
    .marketing-bento-grid > *,
    .marketing-bento > * {
        grid-column: span 6;
    }

    .marketing-capability-grid > .is-featured,
    .marketing-bento-grid > .is-featured,
    .marketing-bento > .is-featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .marketing-hero,
    .marketing-band,
    .marketing-course {
        grid-template-columns: 1fr;
    }

    .marketing-card-grid,
    .marketing-feature-list,
    .marketing-evidence-grid,
    .marketing-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketing-course-list,
    .marketing-priority-grid {
        grid-template-columns: 1fr;
    }

    .marketing-course,
    .marketing-course.is-featured,
    .marketing-course-featured,
    .marketing-course--featured {
        grid-column: auto;
    }

    .marketing-course-intro {
        max-width: 46rem;
    }
}

@media (max-width: 680px) {
    .marketing-shell {
        width: min(100% - (var(--space-4) * 2), var(--marketing-content-max));
    }

    .marketing-card-grid,
    .marketing-feature-list,
    .marketing-evidence-grid,
    .marketing-price-grid,
    .marketing-audience-grid,
    .marketing-pathways,
    .marketing-proof-strip,
    .marketing-topic-grid,
    .marketing-product-metrics {
        grid-template-columns: 1fr;
    }

    .marketing-capability-grid > *,
    .marketing-capability-grid > .is-featured,
    .marketing-capability-grid > .is-wide,
    .marketing-bento-grid > *,
    .marketing-bento-grid > .is-featured,
    .marketing-bento-grid > .is-wide,
    .marketing-bento > *,
    .marketing-bento > .is-featured,
    .marketing-bento > .is-wide {
        grid-column: 1 / -1;
    }

    .marketing-band,
    .marketing-course,
    .marketing-course.is-featured,
    .marketing-course-featured,
    .marketing-course--featured {
        padding: var(--space-6);
    }

    .marketing-product-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .marketing-product-row-value {
        grid-column: 2;
    }
}

@media (max-width: 440px) {
    .marketing-product-frame {
        padding: var(--space-2);
    }

    .marketing-product-window,
    .marketing-product-code {
        padding: var(--space-4);
    }

    .marketing-product-toolbar {
        font-size: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Marketing v2 template compatibility                                */
/* ------------------------------------------------------------------ */

/* The public templates use explicit window-bar dots rather than the
 * pseudo-element variant above. Both structures intentionally share the same
 * product-window language. */
.marketing-product-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 2.35rem;
    padding: 0 var(--space-2) var(--space-3);
    color: color-mix(in srgb, var(--brand-ink) 74%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.marketing-product-bar > span:not(.marketing-product-status) {
    width: 0.65rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    background: var(--brand-2);
    border-radius: 50%;
}

.marketing-product-bar > span:nth-child(2) { background: var(--track-coding); }
.marketing-product-bar > span:nth-child(3) { background: var(--track-ai); }

.marketing-product-bar > strong {
    min-width: 0;
    margin-left: var(--space-2);
    overflow: hidden;
    color: var(--brand-ink);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-product-status {
    flex: 0 0 auto;
    margin-left: auto;
    padding: var(--space-1) var(--space-2);
    background: color-mix(in srgb, var(--brand-2) 16%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--ink));
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--brand-ink) 82%, var(--brand-2));
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
}

.marketing-product-body {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    background: var(--surface);
    border-radius: calc(var(--radius-lg) - var(--space-1));
    color: var(--ink);
}

.marketing-product-body > :last-child {
    margin-bottom: 0;
}

.marketing-product-row.is-ai { --product-accent: var(--track-ai); }
.marketing-product-row.is-cybersecurity { --product-accent: var(--track-cybersecurity); }
.marketing-product-row.is-coding { --product-accent: var(--track-coding); }

.marketing-product-row > i {
    display: grid;
    width: 2.5rem;
    aspect-ratio: 1;
    place-items: center;
    background: color-mix(in srgb, var(--product-accent, var(--brand)) 10%, var(--surface));
    border-radius: var(--radius-sm);
    color: var(--product-accent, var(--brand));
    font-size: var(--text-lg);
}

.marketing-product-row > div {
    min-width: 0;
}

.marketing-product-row > div > strong,
.marketing-product-row > div > small {
    display: block;
    overflow-wrap: anywhere;
}

.marketing-product-row > div > small {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.marketing-product-row > b {
    color: var(--product-accent, var(--brand));
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 650;
}

.marketing-product-row .marketing-product-progress {
    display: block;
    height: 0.42rem;
    margin-top: var(--space-2);
}

.marketing-product-row .marketing-product-progress > span {
    background: var(--product-accent, var(--brand));
}

.marketing-product-callout,
.marketing-code-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: var(--radius-sm);
}

.marketing-product-callout > i,
.marketing-code-result > i {
    flex: 0 0 auto;
    color: var(--success);
    font-size: var(--text-lg);
}

.marketing-product-callout > span,
.marketing-code-result > span {
    min-width: 0;
}

.marketing-product-callout :is(strong, small),
.marketing-code-result :is(strong, small) {
    display: block;
}

.marketing-product-callout small,
.marketing-code-result small {
    color: var(--ink-soft);
}

.marketing-product-heading > div {
    min-width: 0;
}

.marketing-product-heading > div :is(small, strong) {
    display: block;
}

.marketing-product-heading > div small {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.marketing-product-heading > div strong {
    font-size: var(--text-lg);
}

.marketing-product-heading > span {
    flex: 0 0 auto;
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: clamp(var(--text-xl), 5vw, var(--text-3xl));
    font-weight: 700;
    line-height: 1;
}

.marketing-product-metrics > article {
    min-width: 0;
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.marketing-product-metrics > article :is(strong, small) {
    display: block;
}

.marketing-product-metrics > article strong {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
}

.marketing-product-metrics > article small {
    color: var(--ink-soft);
    line-height: 1.35;
}

.marketing-readiness-chart {
    display: flex;
    align-items: end;
    gap: var(--space-2);
    height: 7rem;
    padding: var(--space-4) var(--space-4) 0;
    background:
        linear-gradient(to top, var(--line) 1px, transparent 1px) 0 0 / 100% 33%,
        var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.marketing-readiness-chart > span {
    flex: 1 1 0;
    min-width: 0.5rem;
    background: linear-gradient(to top, var(--brand), var(--brand-2));
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* The education hero shows a compact code editor built entirely from shipped
 * page primitives and token colours. */
.marketing-code-preview {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.marketing-code-tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4) 0;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
}

.marketing-code-tabs > span {
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.marketing-code-tabs > .is-active {
    border-color: var(--track-coding);
    color: var(--ink);
}

.marketing-code-preview pre,
.marketing-code-preview pre:not(.bg-dark) {
    min-height: 15rem;
    margin: 0;
    padding: var(--space-5);
    overflow: auto;
    background: var(--ink);
    border: 0;
    border-radius: 0;
    color: var(--brand-ink);
    font-size: var(--text-sm);
    line-height: 1.75;
    white-space: pre-wrap;
}

.marketing-code-preview pre code,
.marketing-code-preview pre:not(.bg-dark) code {
    color: color-mix(in srgb, var(--brand-ink) 88%, var(--brand-2));
    font-size: inherit;
}

.marketing-code-preview .code-keyword { color: color-mix(in srgb, var(--track-ai) 55%, var(--brand-ink)); }
.marketing-code-preview .code-function { color: color-mix(in srgb, var(--brand-2) 74%, var(--brand-ink)); }
.marketing-code-preview .code-number { color: color-mix(in srgb, var(--track-coding) 58%, var(--brand-ink)); }

.marketing-code-result {
    margin: var(--space-4);
    background: color-mix(in srgb, var(--success) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 24%, var(--line));
}

/* Detailed course cards and home-page summaries use the same compact track
 * identity, metadata, practice and outcome components. */
.marketing-card-heading,
.marketing-course-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}

.marketing-card-heading .marketing-icon,
.marketing-course-title .marketing-icon {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* The icon and challenge-count row leaves the title sitting tight underneath,
 * so lift it clear of them. */
.marketing-card-heading + h3 {
    margin-top: var(--space-3);
}

.marketing-card-stat {
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--track-accent, var(--brand)) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--track-accent, var(--brand)) 22%, var(--line));
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--track-accent, var(--brand)) 76%, var(--ink));
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.marketing-track-grid--detailed .marketing-track-card {
    display: flex;
    flex-direction: column;
}

.marketing-track-grid--detailed .marketing-topic-list {
    margin-block: var(--space-5);
}

.marketing-track-grid--detailed .marketing-track-card > a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    color: var(--track-accent);
    font-weight: 650;
    text-decoration: none;
}

/* Underline the label, not the arrow. A decoration set on the anchor is drawn
 * across every descendant and a descendant cannot opt back out of it, so the
 * label carries its own span. */
.marketing-track-grid--detailed .marketing-track-card > a:hover span,
.marketing-track-grid--detailed .marketing-track-card > a:focus span {
    text-decoration: underline;
}

.marketing-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
    align-items: start;
    gap: clamp(var(--space-6), 6vw, var(--space-10));
}

.marketing-split--balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-split > .marketing-section-heading {
    margin-bottom: 0;
}

/* Beside a heading block the list would otherwise top-align with the small
 * eyebrow, floating well above the heading it belongs to. */
.marketing-split > .marketing-step-list {
    margin-top: var(--space-6);
}

.marketing-course-stack {
    display: grid;
    gap: var(--space-6);
}

#course-directory {
    display: grid;
    gap: var(--space-6);
    padding-block: clamp(var(--space-8), 8vw, 6.75rem);
}

#course-directory > .marketing-course + .marketing-course {
    margin-top: 0;
}

.marketing-course + .marketing-course {
    margin-top: var(--space-6);
}

.marketing-course-stack > .marketing-course + .marketing-course {
    margin-top: 0;
}

.marketing-course-title {
    justify-content: flex-start;
    margin-bottom: var(--space-5);
}

.marketing-course-title > div {
    min-width: 0;
}

.marketing-course-title .eyebrow {
    margin-bottom: var(--space-2);
}

.marketing-course-title :is(h2, h3) {
    margin: 0;
}

.marketing-course-title h3 {
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
}

.marketing-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.marketing-course-meta > span {
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--course-accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--course-accent) 20%, var(--line));
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--course-accent) 72%, var(--ink));
    font-size: var(--text-sm);
}

.marketing-course-practice {
    padding: var(--space-5);
    background: color-mix(in srgb, var(--course-accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--course-accent) 18%, var(--line));
    border-radius: var(--radius);
}

.marketing-course-practice h3 {
    margin-bottom: var(--space-4);
}

.marketing-course-practice .marketing-check-list {
    margin-top: 0;
}

.marketing-topic-grid--compact > * {
    padding: var(--space-3) var(--space-4);
}

.marketing-topic-grid--compact :is(h3, h4) {
    font-size: var(--text-base);
}

.marketing-check-list--inline {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    padding: var(--space-5);
    background: color-mix(in srgb, var(--course-accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--course-accent) 18%, var(--line));
    border-radius: var(--radius);
}

.marketing-outcome-strip {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.marketing-outcome-strip > article {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--course-accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--course-accent) 20%, var(--line));
    border-radius: var(--radius-sm);
}

.marketing-outcome-strip > article > i {
    flex: 0 0 auto;
    color: var(--course-accent);
    font-size: var(--text-xl);
}

.marketing-outcome-strip :is(strong, small) {
    display: block;
}

.marketing-outcome-strip small {
    color: var(--ink-soft);
}

/* Stacked bands and bento layouts supply strong rhythm without introducing
 * white-on-white cards inside their dark variant. */
.marketing-band--stacked {
    grid-template-columns: 1fr;
    align-items: start;
}

.marketing-band--stacked > .marketing-section-heading {
    max-width: 55rem;
    margin-bottom: 0;
}

.marketing-bento > *,
.marketing-bento-grid > * {
    grid-column: span 6;
}

.marketing-bento-primary {
    background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
}

.marketing-bento > article > i,
.marketing-bento-grid > article > i {
    display: inline-flex;
    margin-bottom: var(--space-5);
    color: var(--brand);
    font-size: var(--text-2xl);
}

.marketing-band--dark .marketing-bento > *,
.marketing-band--dark .marketing-bento-grid > * {
    background: color-mix(in srgb, var(--ink) 88%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-ink) 15%, var(--ink));
}

.marketing-band--dark .marketing-bento > .marketing-bento-primary,
.marketing-band--dark .marketing-bento-grid > .marketing-bento-primary {
    background: color-mix(in srgb, var(--brand) 26%, var(--ink));
    border-color: color-mix(in srgb, var(--brand-2) 28%, var(--ink));
}

.marketing-band--dark .marketing-bento :is(h3, p),
.marketing-band--dark .marketing-bento-grid :is(h3, p) {
    color: var(--brand-ink);
}

.marketing-band--dark .marketing-bento p,
.marketing-band--dark .marketing-bento-grid p {
    color: color-mix(in srgb, var(--brand-ink) 72%, transparent);
}

.marketing-band--dark .marketing-bento i,
.marketing-band--dark .marketing-bento-grid i {
    color: var(--brand-2);
}

.marketing-capability-grid > * {
    grid-column: span 6;
}

.marketing-capability-grid--four > * {
    grid-column: span 3;
}

.marketing-capability-grid > article > i {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--brand);
    font-size: var(--text-xl);
}

.marketing-capability-grid > article :is(strong, span) {
    display: block;
}

.marketing-capability-grid > article span {
    margin-top: var(--space-2);
    color: var(--ink-soft);
}

/* Real attributed school feedback provides social proof without invented
 * logos. Cards keep quotes readable and attribution visually separate. */
.marketing-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.marketing-testimonial-grid > figure,
.marketing-testimonial-feature {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

/* Quotes in a grid are peers: no promotion by source order. The standalone
 * .marketing-testimonial-feature is a different component and keeps the tint. */
.marketing-testimonial-feature {
    background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
}

.marketing-testimonial-grid blockquote,
.marketing-testimonial-feature blockquote {
    margin: 0 0 var(--space-6);
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 550;
    line-height: 1.55;
}

.marketing-testimonial-grid figcaption,
.marketing-testimonial-feature figcaption {
    display: grid;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.marketing-testimonial-grid figcaption span,
.marketing-testimonial-feature figcaption span {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.marketing-school-assurance,
.marketing-safeguarding {
    border-color: color-mix(in srgb, var(--track-coding) 22%, var(--line));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--track-coding) 12%, transparent), transparent 42%),
        color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
}

.marketing-school-assurance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    border: 1px solid color-mix(in srgb, var(--track-coding) 22%, var(--line));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.marketing-school-assurance > :last-child {
    margin-bottom: 0;
}

.marketing-school-assurance h2,
.marketing-safeguarding h2 {
    font-size: clamp(var(--text-2xl), 4vw, 3.25rem);
}

/* Audience-specific hero tints provide context while keeping the same product
 * frame and brand identity on every public route. */
.marketing-hero-learn {
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 34%),
        var(--surface);
}

.marketing-hero-schools {
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--track-coding) 13%, transparent), transparent 34%),
        var(--surface);
}

.marketing-hero-business {
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--track-ai) 13%, transparent), transparent 34%),
        var(--surface);
}

@media (max-width: 1050px) {
    .marketing-capability-grid--four > * {
        grid-column: span 6;
    }

    .marketing-testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .marketing-split,
    .marketing-split--balanced,
    .marketing-school-assurance {
        grid-template-columns: 1fr;
    }

    .marketing-split > .marketing-section-heading {
        margin-bottom: 0;
    }

    .marketing-course-stack .marketing-course,
    .marketing-course-stack .marketing-course--featured {
        grid-template-columns: 1fr;
    }

    .marketing-course-stack .marketing-check-list--inline,
    .marketing-course-stack .marketing-outcome-strip {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .marketing-product-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .marketing-product-metrics > article {
        padding: var(--space-2);
    }

    .marketing-product-metrics > article strong {
        font-size: var(--text-lg);
    }

    .marketing-product-metrics > article small {
        font-size: 0.72rem;
    }

    .marketing-check-list--inline,
    .marketing-outcome-strip,
    .marketing-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .marketing-capability-grid > *,
    .marketing-capability-grid--four > *,
    .marketing-bento > *,
    .marketing-bento-grid > * {
        grid-column: 1 / -1;
    }

    .marketing-school-assurance {
        padding: var(--space-6);
    }

    .marketing-product-row > b {
        grid-column: 2;
    }
}

@media (max-width: 440px) {
    .marketing-product-status {
        display: none;
    }

    .marketing-course-title {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .marketing-course-meta > span {
        width: 100%;
    }

    .marketing-card-heading {
        align-items: center;
    }

    .marketing-card-stat {
        white-space: normal;
    }
}