.bb-pf-1 .bb-ph--no-media {
    position: relative;
    padding-block: clamp(var(--bb-space-48), 5vw, var(--bb-space-64));
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--bb-color-action-red) 15%, transparent) 0, transparent 28rem),
        var(--bb-color-canvas);
}

.bb-pf-1 .bb-ph--no-media::after {
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bb-color-action-red) 0 18%, transparent 18%);
    content: "";
}

.bb-learning-pathway-route--learn-to-dj.bb-pf-1 .bb-ph--no-media {
    --bb-learn-dj-header-image: image-set(
        url("../images/learning/learn-to-dj-header-r2-1920.avif") type("image/avif"),
        url("../images/learning/learn-to-dj-header-r2-1920.webp") type("image/webp")
    );
    background-color: #08090b;
    background-image:
        linear-gradient(90deg, rgb(6 7 10 / 94%) 0%, rgb(6 7 10 / 90%) 26%, rgb(6 7 10 / 66%) 68%, rgb(6 7 10 / 24%) 100%),
        linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 34%)),
        var(--bb-learn-dj-header-image);
    background-position: center 53%;
    background-size: cover;
}

.bb-learning-pathway-route--learn-to-dj .bb-ph__copy {
    position: relative;
    z-index: 1;
}

.bb-learning-pathway-route--learn-to-dj .bb-ph__copy .bb-text-lead {
    max-width: 66ch;
    color: #f5f6f7;
    text-shadow: 0 1px 12px rgb(0 0 0 / 52%);
}

.bb-learning-pathway-route--learn-music-production.bb-pf-1 .bb-ph--no-media {
    --bb-learn-production-header-image: image-set(
        url("../images/learning/learn-music-production-header-r1-1920.avif") type("image/avif"),
        url("../images/learning/learn-music-production-header-r1-1920.webp") type("image/webp")
    );
    background-color: #08090b;
    background-image:
        linear-gradient(90deg, rgb(6 7 10 / 96%) 0%, rgb(6 7 10 / 90%) 30%, rgb(6 7 10 / 62%) 67%, rgb(6 7 10 / 20%) 100%),
        linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 36%)),
        var(--bb-learn-production-header-image);
    background-position: center 52%;
    background-size: cover;
}

@media (min-width: 64rem) {
    .bb-learning-pathway-route--learn-music-production.bb-pf-1 .bb-ph--no-media {
        background-image:
            linear-gradient(90deg, rgb(6 7 10 / 98%) 0%, rgb(6 7 10 / 95%) 34%, rgb(6 7 10 / 84%) 49%, rgb(6 7 10 / 48%) 68%, rgb(6 7 10 / 12%) 100%),
            linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 34%)),
            var(--bb-learn-production-header-image);
        background-position: center, center, right 48%;
        background-repeat: no-repeat;
        background-size: 100% 100%, 100% 100%, auto 128%;
    }
}

.bb-learning-pathway-route--learn-music-production .bb-ph__copy {
    position: relative;
    z-index: 1;
}

.bb-learning-pathway-route--learn-music-production .bb-ph__copy .bb-text-lead {
    max-width: 68ch;
    color: #f5f6f7;
    text-shadow: 0 1px 12px rgb(0 0 0 / 56%);
}

.bb-learning-pathway-route--combined.bb-pf-1 .bb-ph--no-media {
    --bb-learn-combined-header-image: image-set(
        url("../images/learning/learn-combined-header-p2b-1920.avif") type("image/avif"),
        url("../images/learning/learn-combined-header-p2b-1920.webp") type("image/webp")
    );
    background-color: #08090b;
    background-image: var(--bb-learn-combined-header-image);
    background-position: center 49%;
    background-size: cover;
}

.bb-learning-pathway-route--combined .bb-ph__copy {
    position: relative;
    z-index: 1;
}

.bb-learning-pathway-route--combined .bb-ph__copy .bb-text-lead {
    max-width: 66ch;
    color: #f5f6f7;
    text-shadow: 0 1px 12px rgb(0 0 0 / 52%);
}

.bb-learning-pathway-route--dj-to-production.bb-pf-1 .bb-ph--no-media,
.bb-learning-pathway-route--production-to-dj.bb-pf-1 .bb-ph--no-media {
    background-color: #08090b;
    background-position: center 50%;
    background-size: cover;
}

.bb-learning-pathway-route--dj-to-production.bb-pf-1 .bb-ph--no-media {
    --bb-bridge-header-image: image-set(
        url("../images/learning/learn-bridge-dj-to-production-header-r1-1920.avif") type("image/avif"),
        url("../images/learning/learn-bridge-dj-to-production-header-r1-1920.webp") type("image/webp")
    );
    background-image: var(--bb-bridge-header-image);
}

.bb-learning-pathway-route--production-to-dj.bb-pf-1 .bb-ph--no-media {
    --bb-bridge-header-image: image-set(
        url("../images/learning/learn-bridge-production-to-dj-header-r1-1920.avif") type("image/avif"),
        url("../images/learning/learn-bridge-production-to-dj-header-r1-1920.webp") type("image/webp")
    );
    background-image: var(--bb-bridge-header-image);
}

.bb-learning-pathway-route--dj-to-production .bb-ph__copy,
.bb-learning-pathway-route--production-to-dj .bb-ph__copy {
    position: relative;
    z-index: 1;
}

.bb-learning-pathway-route--dj-to-production .bb-ph__copy .bb-text-lead,
.bb-learning-pathway-route--production-to-dj .bb-ph__copy .bb-text-lead {
    max-width: 62ch;
    color: #f5f6f7;
    text-shadow: 0 1px 12px rgb(0 0 0 / 56%);
}

.bb-learning-pathway-section { padding-block: clamp(var(--bb-space-24), 3vw, var(--bb-space-48)); }
.bb-learning-pathway { display: grid; gap: clamp(var(--bb-space-32), 5vw, var(--bb-space-64)); }

.bb-learning-pathway__overview {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr);
    min-height: 11rem;
    overflow: hidden;
    background: var(--bb-color-surface-1);
    border: 1px solid var(--bb-color-border-structural);
    border-radius: 12px;
    box-shadow: 0 18px 60px rgb(0 0 0 / 18%);
}

.bb-learning-pathway__overview-copy {
    display: grid;
    align-content: center;
    gap: var(--bb-space-12);
    padding: clamp(var(--bb-space-24), 4vw, var(--bb-space-48));
}

.bb-learning-pathway__eyebrow,
.bb-learning-pathway__stage-meta {
    margin: 0;
    color: var(--bb-color-text-secondary);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bb-learning-pathway__overview-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-8) var(--bb-space-24);
    align-items: baseline;
    margin: 0;
    color: var(--bb-color-text-secondary);
}

.bb-learning-pathway__overview-facts strong {
    color: var(--bb-color-text-primary);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -.025em;
}

:is(.bb-learning-pathway-route--dj-to-production, .bb-learning-pathway-route--production-to-dj) .bb-learning-pathway__overview {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

:is(.bb-learning-pathway-route--dj-to-production, .bb-learning-pathway-route--production-to-dj) .bb-learning-pathway__overview-copy {
    min-height: 0;
    padding-block: var(--bb-space-24);
    padding-inline: clamp(var(--bb-space-24), 3vw, var(--bb-space-40, 2.5rem));
    border-inline-start: 3px solid var(--bb-color-action-red);
}

:is(.bb-learning-pathway-route--dj-to-production, .bb-learning-pathway-route--production-to-dj) .bb-learning-pathway__overview-facts {
    display: grid;
    gap: var(--bb-space-8);
}

:is(.bb-learning-pathway-route--dj-to-production, .bb-learning-pathway-route--production-to-dj) .bb-learning-pathway__media {
    display: none;
}

.bb-learning-pathway__media {
    position: relative;
    display: flex;
    gap: clamp(.35rem, 1vw, .75rem);
    align-items: end;
    justify-content: center;
    min-height: 11rem;
    padding: var(--bb-space-24);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 55%),
        color-mix(in srgb, var(--bb-color-action-red) 12%, var(--bb-color-surface-2));
    isolation: isolate;
}

.bb-learning-pathway__media::before,
.bb-learning-pathway__media::after {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    content: "";
}

.bb-learning-pathway__media::before { width: 13rem; height: 13rem; inset: -5rem -2rem auto auto; }
.bb-learning-pathway__media::after { width: 8rem; height: 8rem; inset: auto auto -4rem -2rem; }

.bb-learning-pathway__media--reserved > span {
    z-index: 1;
    width: clamp(.6rem, 1.5vw, 1.1rem);
    height: var(--bb-level, 45%);
    min-height: 2rem;
    background: linear-gradient(180deg, #ff5360, var(--bb-color-action-red));
    border-radius: 999px 999px 3px 3px;
    box-shadow: 0 0 24px rgb(237 28 36 / 22%);
}

.bb-learning-pathway__media--reserved > span:nth-child(1) { --bb-level: 34%; }
.bb-learning-pathway__media--reserved > span:nth-child(2) { --bb-level: 68%; }
.bb-learning-pathway__media--reserved > span:nth-child(3) { --bb-level: 48%; }
.bb-learning-pathway__media--reserved > span:nth-child(4) { --bb-level: 82%; }
.bb-learning-pathway__media--reserved > span:nth-child(5) { --bb-level: 57%; }
.bb-learning-pathway__media--filled { padding: 0; }
.bb-learning-pathway__media--filled::before,
.bb-learning-pathway__media--filled::after { display: none; }
.bb-learning-pathway__media--filled :is(picture,img) { width: 100%; height: 100%; margin: 0; }
.bb-learning-pathway__media--filled img { display: block; object-fit: cover; }

.bb-learning-pathway__media--route-progress {
    align-items: center;
    padding: clamp(var(--bb-space-20, 1.25rem), 3vw, var(--bb-space-32));
    background:
        linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 58%),
        color-mix(in srgb, var(--bb-color-action-red) 9%, var(--bb-color-surface-2));
}

.bb-learning-pathway__media--route-progress::before,
.bb-learning-pathway__media--route-progress::after { display: none; }

.bb-learning-pathway__progress {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.45rem, 1vw, .75rem);
    width: min(100%, 25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bb-learning-pathway__progress-stage {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 6.25rem;
    align-content: center;
    gap: var(--bb-space-12);
    padding: clamp(.65rem, 1.4vw, 1rem) clamp(.45rem, 1vw, .75rem);
    background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%));
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 9px;
}

.bb-learning-pathway__progress-stage:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: calc(-1 * clamp(.45rem, 1vw, .75rem) - 1px);
    width: clamp(.45rem, 1vw, .75rem);
    height: 1px;
    background: linear-gradient(90deg, rgb(237 28 36 / 55%), rgb(255 255 255 / 16%));
    content: "";
}

.bb-learning-pathway__progress-stage b {
    color: rgb(255 255 255 / 48%);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
}

.bb-learning-pathway__progress-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.bb-learning-pathway__progress-nodes i {
    display: block;
    width: .55rem;
    height: .55rem;
    background: var(--bb-color-action-red);
    border: 1px solid rgb(255 255 255 / 32%);
    border-radius: 50%;
    box-shadow: 0 0 14px rgb(237 28 36 / 28%);
}

.bb-learning-pathway__progress-stage:nth-child(2) .bb-learning-pathway__progress-nodes i,
.bb-learning-pathway__progress-stage:nth-child(4) .bb-learning-pathway__progress-nodes i {
    background: color-mix(in srgb, var(--bb-color-action-red) 72%, #ff7b84);
}

.bb-learning-pathway__progress--combined {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: min(100%, 34rem);
}

.bb-learning-pathway__progress--combined .bb-learning-pathway__progress-stage {
    min-height: 6.5rem;
    padding-inline: .32rem;
}

.bb-learning-pathway__progress-routes {
    display: grid;
    gap: .3rem;
}

.bb-learning-pathway__progress-routes > span {
    display: block;
    padding: .25rem .18rem;
    color: var(--bb-color-text-primary);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-align: center;
    white-space: nowrap;
    background: rgb(5 8 12 / 44%);
    border: 1px solid rgb(255 255 255 / 38%);
    border-radius: 3px;
}

.bb-learning-pathway__sequence { display: grid; gap: clamp(var(--bb-space-48), 6vw, var(--bb-space-96)); }

.bb-learning-pathway__stage-region,
.bb-learning-pathway__journey,
.bb-learning-pathway__bridge-group {
    display: grid;
    grid-template-columns: minmax(12rem, .62fr) minmax(0, 1.65fr);
    gap: clamp(var(--bb-space-24), 5vw, var(--bb-space-64));
    align-items: start;
}

.bb-learning-pathway__stage-header,
.bb-learning-pathway__journey-header,
.bb-learning-pathway__bridge-group > header {
    position: sticky;
    top: calc(var(--bb-shell-header-height, 5rem) + var(--bb-space-24));
    display: grid;
    gap: var(--bb-space-16);
    padding-block-start: var(--bb-space-16);
    border-block-start: 4px solid var(--bb-color-action-red);
}

.bb-learning-pathway__stage-meta { display: flex; flex-wrap: wrap; gap: var(--bb-space-8); align-items: center; }

.bb-learning-pathway__stage-meta b {
    padding: .25rem .5rem;
    color: var(--bb-color-text-primary);
    font-size: .7rem;
    letter-spacing: .08em;
    background: var(--bb-color-surface-2);
    border: 1px solid var(--bb-color-border-control);
    border-radius: 999px;
}

.bb-learning-pathway__stage,
.bb-learning-pathway__journey-header h2,
.bb-learning-pathway__bridge-group h2 {
    margin: 0;
    color: var(--bb-color-text-primary);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.bb-learning-pathway__stage-summary {
    color: var(--bb-color-text-secondary);
    font-size: .94rem;
    line-height: 1.58;
}

.bb-learning-pathway__stage-summary > :first-child { margin-block-start: 0; }
.bb-learning-pathway__stage-summary > :last-child { margin-block-end: 0; }
.bb-learning-pathway__stage-summary ul { padding-inline-start: 1.1rem; }

.bb-learning-pathway__steps {
    display: grid;
    gap: var(--bb-space-16);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bb-pathway-step calc(var(--bb-step-start, 1) - 1);
}

.bb-learning-pathway__steps[start="3"] { --bb-step-start: 3; }
.bb-learning-pathway__steps[start="5"] { --bb-step-start: 5; }
.bb-learning-pathway__steps[start="6"] { --bb-step-start: 6; }
.bb-learning-pathway__steps[start="8"] { --bb-step-start: 8; }
.bb-learning-pathway__steps[start="12"] { --bb-step-start: 12; }

.bb-learning-pathway__step {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--bb-space-16);
    align-items: stretch;
    counter-increment: bb-pathway-step;
}

.bb-learning-pathway__step::before {
    z-index: 1;
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    margin-block-start: var(--bb-space-16);
    color: var(--bb-color-text-primary);
    font-size: .75rem;
    font-weight: 700;
    background: var(--bb-color-surface-2);
    border: 1px solid var(--bb-color-border-control);
    border-radius: 50%;
    content: counter(bb-pathway-step, decimal-leading-zero);
}

.bb-learning-pathway__step:not(:last-child)::after {
    position: absolute;
    inset: 3.4rem auto calc(-1 * var(--bb-space-16)) 1.28rem;
    width: 1px;
    background: linear-gradient(var(--bb-color-border-control), transparent);
    content: "";
}

.bb-learning-pathway__card {
    min-width: 0;
    padding: clamp(var(--bb-space-24), 3vw, var(--bb-space-32));
    background: linear-gradient(135deg, rgb(255 255 255 / 2%), transparent 45%), var(--bb-color-surface-1);
    border: 1px solid var(--bb-color-border-structural);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgb(0 0 0 / 12%);
    transition: border-color var(--bb-motion-2), transform var(--bb-motion-2), box-shadow var(--bb-motion-2);
}

.bb-learning-pathway__card:has(a):hover { border-color: var(--bb-color-border-control); box-shadow: 0 16px 40px rgb(0 0 0 / 22%); transform: translateY(-2px); }

.bb-learning-pathway__card h3 {
    margin: 0;
    color: var(--bb-color-text-primary);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.018em;
    text-wrap: balance;
}

.bb-learning-pathway__card h3 a { color: inherit; text-decoration-color: var(--bb-color-action-red); }
.bb-learning-pathway__card > h3 + p { margin-block: var(--bb-space-12) 0; color: var(--bb-color-text-secondary); line-height: 1.58; }

.bb-learning-pathway__lane {
    width: fit-content;
    margin: 0 0 var(--bb-space-12);
    padding: .3rem .55rem;
    color: color-mix(in srgb, var(--bb-color-text-secondary) 82%, transparent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--bb-color-surface-2) 65%, transparent);
    border-radius: 999px;
}

.bb-learning-pathway__card--integrated .bb-learning-pathway__lane { color: var(--bb-color-educational-citron); }
.bb-learning-pathway__card--integrated { border-color: color-mix(in srgb, var(--bb-color-educational-citron) 48%, var(--bb-color-border-structural)); box-shadow: 0 18px 48px rgb(0 0 0 / 22%); }

.bb-learning-pathway__requirements {
    display: grid;
    gap: var(--bb-space-8);
    margin: var(--bb-space-24) 0 0;
    padding: var(--bb-space-16) 0 0;
    border-block-start: 1px solid var(--bb-color-border-structural);
    list-style: none;
}

.bb-learning-pathway__requirements li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bb-space-12); align-items: baseline; color: var(--bb-color-text-secondary); font-size: .88rem; }
.bb-learning-pathway__requirement-level { color: var(--bb-color-text-primary); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.bb-learning-pathway__route-tools {
    display: grid;
    gap: var(--bb-space-12);
    padding: var(--bb-space-24);
    background: var(--bb-color-surface-1);
    border: 1px solid var(--bb-color-border-structural);
    border-radius: 10px;
}

.bb-learning-pathway__emphasis { display: flex; flex-wrap: wrap; gap: var(--bb-space-8); align-items: center; }
.bb-learning-pathway__emphasis > span { margin-inline-end: var(--bb-space-8); color: var(--bb-color-text-secondary); font-weight: 600; }
.bb-learning-pathway__emphasis a { min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--bb-color-border-control); border-radius: 999px; text-decoration: none; }
.bb-learning-pathway__emphasis a[aria-current="page"] { color: #fff; background: var(--bb-color-action-red); border-color: var(--bb-color-action-red); }
.bb-learning-pathway__note,.bb-learning-pathway__local-note { margin: 0; color: var(--bb-color-text-secondary); font-size: .9rem; }

.bb-learning-pathway__frozen-copy {
    width: min(100%, 72ch);
    max-width: 72ch;
    margin-inline: auto;
    padding: clamp(var(--bb-space-24), 4vw, var(--bb-space-48));
    color: var(--bb-color-text-secondary);
    line-height: 1.65;
    background: var(--bb-color-surface-1);
    border-inline-start: 4px solid var(--bb-color-action-red);
    border-radius: 0 10px 10px 0;
}

.bb-learning-pathway__frozen-copy :is(h2,h3,h4) { color: var(--bb-color-text-primary); line-height: 1.16; text-wrap: balance; }
.bb-learning-pathway__frozen-copy h2 { margin-block-start: var(--bb-space-48); font-size: var(--bb-font-size-h2); }
.bb-learning-pathway__frozen-copy h3 { margin-block-start: var(--bb-space-48); font-size: var(--bb-font-size-h3); }
.bb-learning-pathway__frozen-copy h4 { margin-block-start: var(--bb-space-24); font-size: 1.1rem; }
.bb-learning-pathway__frozen-copy li + li { margin-block-start: var(--bb-space-8); }

.bb-learning-pathway__combined-intro,
.bb-learning-pathway__combined-tail,
.bb-learning-pathway__bridge-intro,
.bb-learning-pathway__bridge-tail { width: min(100%, 78ch); max-width: 78ch; }

.bb-learning-pathway__combined-intro h2,
.bb-learning-pathway__combined-tail h2 { scroll-margin-top: calc(var(--bb-shell-header-height, 5rem) + var(--bb-space-24)); }

.bb-learning-pathway__optional-depth {
    display: grid;
    gap: var(--bb-space-16);
    padding: clamp(var(--bb-space-24), 4vw, var(--bb-space-48));
    background: color-mix(in srgb, var(--bb-color-surface-1) 72%, transparent);
    border: 1px solid var(--bb-color-border-structural);
    border-radius: 10px;
}

.bb-learning-pathway__optional-depth > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-space-16); }
.bb-learning-pathway__optional-depth a { display: grid; gap: .2rem; min-height: 44px; padding: var(--bb-space-16); color: var(--bb-color-text-secondary); border: 1px solid var(--bb-color-border-control); border-radius: 8px; text-decoration: none; }
.bb-learning-pathway__optional-depth a:hover { color: var(--bb-color-text-primary); border-color: var(--bb-color-action-red); }
.bb-learning-pathway__optional-depth a strong { color: var(--bb-color-text-primary); }

.bb-learning-pathway__bridge-group { padding-block-start: var(--bb-space-32); border-block-start: 1px solid var(--bb-color-border-structural); }

.bb-learning-pathway__bridge-checks {
    display: grid;
    gap: clamp(var(--bb-space-24), 4vw, var(--bb-space-48));
    padding-block-start: var(--bb-space-32);
    border-block-start: 1px solid var(--bb-color-border-structural);
}

.bb-learning-pathway__bridge-checks > header { width: min(100%, 70ch); }
.bb-learning-pathway__bridge-checks > header h2 { margin-block: var(--bb-space-8); color: var(--bb-color-text-primary); font-size: var(--bb-font-size-h2); }
.bb-learning-pathway__bridge-checks > header > p:last-child { color: var(--bb-color-text-secondary); }
.bb-learning-pathway__check-list { display: grid; gap: var(--bb-space-24); }

.bb-learning-pathway__check {
    min-width: 0;
    margin: 0;
    padding: clamp(var(--bb-space-24), 4vw, var(--bb-space-48));
    background: linear-gradient(135deg, rgb(255 255 255 / 2%), transparent 48%), var(--bb-color-surface-1);
    border: 1px solid var(--bb-color-border-structural);
    border-inline-start: 4px solid var(--bb-color-action-red);
    border-radius: 0 12px 12px 0;
    box-shadow: 0 14px 40px rgb(0 0 0 / 14%);
}

.bb-learning-pathway__check legend { width: min(100%, 70rem); padding: 0 var(--bb-space-12) 0 0; color: var(--bb-color-text-primary); }
.bb-learning-pathway__check legend span { display: block; margin-block-end: var(--bb-space-8); color: var(--bb-color-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bb-learning-pathway__check legend strong { display: block; font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.18; text-wrap: balance; }
.bb-learning-pathway__check-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(11rem, .55fr) minmax(0, 1fr); gap: clamp(var(--bb-space-24), 4vw, var(--bb-space-48)); align-items: start; margin-block-start: var(--bb-space-24); }
.bb-learning-pathway__check-clarification { color: var(--bb-color-text-secondary); line-height: 1.58; }
.bb-learning-pathway__check-clarification > :first-child { margin-block-start: 0; }
.bb-learning-pathway__check-clarification > :last-child { margin-block-end: 0; }
.bb-learning-pathway__choices { display: grid; gap: var(--bb-space-8); }
.bb-learning-pathway__check label { display: flex; min-height: 48px; gap: var(--bb-space-8); align-items: center; padding: .65rem .8rem; background: var(--bb-color-surface-2); border: 1px solid var(--bb-color-border-control); border-radius: 8px; cursor: pointer; }
.bb-learning-pathway__check label:has(input:checked) { color: var(--bb-color-text-primary); border-color: var(--bb-color-action-red); box-shadow: 0 0 0 1px var(--bb-color-action-red); }
.bb-learning-pathway__check input { width: 1.15rem; height: 1.15rem; accent-color: var(--bb-color-action-red); }
.bb-learning-pathway__result { min-height: 7rem; padding: var(--bb-space-16); color: var(--bb-color-text-secondary); background: color-mix(in srgb, var(--bb-color-surface-2) 72%, transparent); border-radius: 8px; line-height: 1.55; }
.bb-learning-pathway__result [hidden] { display: none; }
.bb-learning-pathway__result :is(h5, .bb-learning-pathway__result-label) { margin-block: var(--bb-space-16) var(--bb-space-8); color: var(--bb-color-text-primary); font-size: 1rem; }
.bb-learning-pathway__result-label > strong { font-weight: 700; }
.bb-learning-pathway__result > :first-child,
.bb-learning-pathway__result [data-bb-result] > :first-child { margin-block-start: 0; }
.bb-learning-pathway__result-prompt { margin: 0; }
.bb-learning-pathway__recommendations { margin-block-start: var(--bb-space-16); padding-block-start: var(--bb-space-16); border-block-start: 1px solid var(--bb-color-border-structural); }
.bb-learning-pathway__recommendations > p { margin: 0; color: var(--bb-color-text-primary); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bb-learning-pathway__recommendations ul { display: grid; gap: var(--bb-space-8); margin-block: var(--bb-space-12) 0; padding: 0; list-style: none; }
.bb-learning-pathway__recommendations a { color: var(--bb-color-text-primary); text-decoration-color: var(--bb-color-action-red); }

@media (max-width: 80rem) {
    .bb-learning-pathway-route--learn-to-dj.bb-pf-1 .bb-ph--no-media {
        --bb-learn-dj-header-image: image-set(
            url("../images/learning/learn-to-dj-header-r2-1280.avif") type("image/avif"),
            url("../images/learning/learn-to-dj-header-r2-1280.webp") type("image/webp")
        );
    }

    .bb-learning-pathway-route--learn-music-production.bb-pf-1 .bb-ph--no-media {
        --bb-learn-production-header-image: image-set(
            url("../images/learning/learn-music-production-header-r1-1280.avif") type("image/avif"),
            url("../images/learning/learn-music-production-header-r1-1280.webp") type("image/webp")
        );
    }

    .bb-learning-pathway-route--combined.bb-pf-1 .bb-ph--no-media {
        --bb-learn-combined-header-image: image-set(
            url("../images/learning/learn-combined-header-p2b-1280.avif") type("image/avif"),
            url("../images/learning/learn-combined-header-p2b-1280.webp") type("image/webp")
        );
    }

    .bb-learning-pathway-route--dj-to-production.bb-pf-1 .bb-ph--no-media {
        --bb-bridge-header-image: image-set(
            url("../images/learning/learn-bridge-dj-to-production-header-r1-1280.avif") type("image/avif"),
            url("../images/learning/learn-bridge-dj-to-production-header-r1-1280.webp") type("image/webp")
        );
    }

    .bb-learning-pathway-route--production-to-dj.bb-pf-1 .bb-ph--no-media {
        --bb-bridge-header-image: image-set(
            url("../images/learning/learn-bridge-production-to-dj-header-r1-1280.avif") type("image/avif"),
            url("../images/learning/learn-bridge-production-to-dj-header-r1-1280.webp") type("image/webp")
        );
    }
}

@media (max-width: 48rem) {
    .bb-learning-pathway-route--learn-to-dj.bb-pf-1 .bb-ph--no-media {
        --bb-learn-dj-header-image: image-set(
            url("../images/learning/learn-to-dj-header-r2-960.avif") type("image/avif"),
            url("../images/learning/learn-to-dj-header-r2-960.webp") type("image/webp")
        );
    }


    .bb-learning-pathway-route--learn-music-production.bb-pf-1 .bb-ph--no-media {
        --bb-learn-production-header-image: image-set(
            url("../images/learning/learn-music-production-header-r1-960.avif") type("image/avif"),
            url("../images/learning/learn-music-production-header-r1-960.webp") type("image/webp")
        );
    }

    .bb-learning-pathway-route--combined.bb-pf-1 .bb-ph--no-media {
        --bb-learn-combined-header-image: image-set(
            url("../images/learning/learn-combined-header-p2b-960.avif") type("image/avif"),
            url("../images/learning/learn-combined-header-p2b-960.webp") type("image/webp")
        );
    }


    .bb-learning-pathway-route--dj-to-production.bb-pf-1 .bb-ph--no-media {
        --bb-bridge-header-image: image-set(
            url("../images/learning/learn-bridge-dj-to-production-header-r1-960.avif") type("image/avif"),
            url("../images/learning/learn-bridge-dj-to-production-header-r1-960.webp") type("image/webp")
        );
    }

    .bb-learning-pathway-route--production-to-dj.bb-pf-1 .bb-ph--no-media {
        --bb-bridge-header-image: image-set(
            url("../images/learning/learn-bridge-production-to-dj-header-r1-960.avif") type("image/avif"),
            url("../images/learning/learn-bridge-production-to-dj-header-r1-960.webp") type("image/webp")
        );
    }
}

@media (max-width: 52rem) {
    .bb-learning-pathway-route--learn-to-dj .bb-ph__copy .bb-text-lead { max-width: 34rem; }
    .bb-learning-pathway-route--learn-music-production .bb-ph__copy .bb-text-lead { max-width: 36rem; }
    .bb-learning-pathway-route--combined .bb-ph__copy .bb-text-lead { max-width: 34rem; }
    .bb-learning-pathway-route--dj-to-production .bb-ph__copy .bb-text-lead,
    .bb-learning-pathway-route--production-to-dj .bb-ph__copy .bb-text-lead { max-width: 34rem; }
    .bb-learning-pathway__stage-region,
    .bb-learning-pathway__journey,
    .bb-learning-pathway__bridge-group { grid-template-columns: 1fr; gap: var(--bb-space-24); }
    .bb-learning-pathway__stage-header,
    .bb-learning-pathway__journey-header,
    .bb-learning-pathway__bridge-group > header { position: static; }
    .bb-learning-pathway__check-body { grid-template-columns: 1fr 1fr; }
    .bb-learning-pathway__check-clarification { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
    .bb-pf-1 .bb-ph--no-media { padding-block: var(--bb-space-32); }
    .bb-learning-pathway-route--learn-to-dj.bb-pf-1 .bb-ph--no-media {
        background-image:
            linear-gradient(90deg, rgb(6 7 10 / 92%) 0%, rgb(6 7 10 / 80%) 48%, rgb(6 7 10 / 36%) 100%),
            linear-gradient(180deg, rgb(0 0 0 / 12%), rgb(0 0 0 / 42%)),
            var(--bb-learn-dj-header-image);
        background-position: 55% 54%;
    }
    .bb-learning-pathway-route--learn-to-dj .bb-ph__copy .bb-text-lead { max-width: 34rem; font-size: 1rem; line-height: 1.55; }
    .bb-learning-pathway-route--learn-music-production.bb-pf-1 .bb-ph--no-media {
        background-image:
            linear-gradient(90deg, rgb(6 7 10 / 94%) 0%, rgb(6 7 10 / 84%) 52%, rgb(6 7 10 / 38%) 100%),
            linear-gradient(180deg, rgb(0 0 0 / 12%), rgb(0 0 0 / 44%)),
            var(--bb-learn-production-header-image);
        background-position: 56% 52%;
    }
    .bb-learning-pathway-route--learn-music-production .bb-ph__copy .bb-text-lead { max-width: 36rem; font-size: 1rem; line-height: 1.55; }
    .bb-learning-pathway-route--combined.bb-pf-1 .bb-ph--no-media { background-position: center 49%; }
    .bb-learning-pathway-route--combined .bb-ph__copy .bb-text-lead { max-width: 34rem; font-size: 1rem; line-height: 1.55; }
    .bb-learning-pathway-route--dj-to-production.bb-pf-1 .bb-ph--no-media,
    .bb-learning-pathway-route--production-to-dj.bb-pf-1 .bb-ph--no-media { background-position: center 50%; }
    .bb-learning-pathway-route--dj-to-production .bb-ph__copy .bb-text-lead,
    .bb-learning-pathway-route--production-to-dj .bb-ph__copy .bb-text-lead { max-width: 34rem; font-size: 1rem; line-height: 1.55; }
    :is(.bb-learning-pathway-route--dj-to-production, .bb-learning-pathway-route--production-to-dj) .bb-learning-pathway__overview-copy { padding: var(--bb-space-24); }
    .bb-learning-pathway-section { padding-block: var(--bb-space-32); }
    .bb-learning-pathway { gap: var(--bb-space-48); }
    .bb-learning-pathway__overview { grid-template-columns: 1fr; }
    .bb-learning-pathway__media { min-height: 7rem; }
    .bb-learning-pathway__media--route-progress { padding: var(--bb-space-16); }
    .bb-learning-pathway__progress { gap: .4rem; }
    .bb-learning-pathway__progress-stage { min-height: 5.5rem; padding: .65rem .45rem; }
    .bb-learning-pathway__progress-stage:not(:last-child)::after { right: calc(-.4rem - 1px); width: .4rem; }
    .bb-learning-pathway__progress-nodes { gap: .25rem; }
    .bb-learning-pathway__progress-nodes i { width: .45rem; height: .45rem; }
    .bb-learning-pathway__progress--combined { gap: .25rem; }
    .bb-learning-pathway__progress--combined .bb-learning-pathway__progress-stage { min-height: 5.5rem; padding: .6rem .28rem; }
    .bb-learning-pathway__progress--combined .bb-learning-pathway__progress-stage:not(:last-child)::after { right: calc(-.25rem - 1px); width: .25rem; }
    .bb-learning-pathway__progress-routes > span { padding-inline: .1rem; font-size: .52rem; }
    .bb-learning-pathway__sequence { gap: var(--bb-space-48); }
    .bb-learning-pathway__step { grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--bb-space-8); }
    .bb-learning-pathway__step::before { width: 2rem; height: 2rem; margin-block-start: var(--bb-space-16); font-size: .68rem; }
    .bb-learning-pathway__step:not(:last-child)::after { inset-inline-start: .98rem; }
    .bb-learning-pathway__card { padding: var(--bb-space-24); }
    .bb-learning-pathway__requirements li { grid-template-columns: 1fr; gap: .2rem; }
    .bb-learning-pathway__optional-depth > div,
    .bb-learning-pathway__check-body { grid-template-columns: 1fr; }
    .bb-learning-pathway__check-clarification { grid-column: auto; }
    .bb-learning-pathway__check { padding: var(--bb-space-24); }
}

@media (prefers-reduced-motion: reduce) { .bb-learning-pathway__card { transition: none; } }