/* Batches (/training/batches) and the batch rail on /master-classes.
   Tokens come from .lx in listing-ui.css. Prefixes: bh = hero, bb = board, bc = batch card, bz = closing panels, bw = trust. */

/* ---------- hero ---------- */
.bh {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 80px);
}

.bh-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--lx-line) 1px, transparent 1px), linear-gradient(90deg, var(--lx-line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
    mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
    opacity: .55;
    pointer-events: none;
}

.bh-wrap {
    position: relative;
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.bh-title {
    max-width: 15ch;
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--lx-ink);
    text-wrap: balance;
}

    .bh-title em {
        display: block;
        padding-bottom: .08em;
        font-style: normal;
        background: linear-gradient(100deg, var(--lx-a), var(--lx-b) 80%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.bh-lead {
    max-width: 46ch;
    margin: 20px 0 30px;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.bh-proof {
    display: grid;
    gap: 10px;
    margin-top: 34px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--lx-ink);
}

    .bh-proof li {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bh-proof svg {
        flex: none;
        padding: 3px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--lx-soft);
        color: var(--lx-a);
    }

.bh-stage {
    position: relative;
    perspective: 1200px;
    padding: 0 0 56px 0;
}

.bh-glow {
    position: absolute;
    inset: 8% 4% 12%;
    border-radius: 40px;
    background: radial-gradient(closest-side, rgba(var(--lx-glow), .35), transparent 75%);
    filter: blur(30px);
}

.bh-win {
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(110, 190, 230, .22);
    border-radius: 20px;
    background: #07111f;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.bh-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(110, 190, 230, .14);
    background: #0a1729;
}

.bh-lights {
    display: flex;
    gap: 7px;
}

    .bh-lights i {
        display: block;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #334155;
    }

        .bh-lights i:nth-child(1) {
            background: #ff5f57;
        }

        .bh-lights i:nth-child(2) {
            background: #febc2e;
        }

        .bh-lights i:nth-child(3) {
            background: #28c840;
        }

.bh-file {
    font: 500 .75rem 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    color: #7f95ab;
}

.bh-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, .14);
    color: #fca5a5;
    font-size: .72rem;
    font-weight: 800;
}

.bh-term {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 290px;
    padding: 22px 22px 26px;
    font: 500 .84rem/1.5 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    color: #cfe3f5;
}

    .bh-term p {
        margin: 0;
        animation: bh-in .4s ease both;
    }

    .bh-term .p {
        color: #22d3ee;
    }

    .bh-term .ok {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5cd1a3;
    }

    .bh-term .row {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 8px 12px;
        white-space: nowrap;
        border: 1px solid rgba(110, 190, 230, .14);
        border-radius: 10px;
        background: rgba(34, 211, 238, .05);
        font-family: inherit;
    }

        .bh-term .row b {
            color: #67e8f9;
        }

        .bh-term .row span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #eef7ff;
        }

        .bh-term .row small {
            color: #8aa0b8;
            font-size: .74rem;
        }

.caret {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    vertical-align: -.15em;
    background: #22d3ee;
    animation: bh-blink 1.1s steps(1) infinite;
}

.bh-next {
    position: absolute;
    right: -4px;
    bottom: 0;
    display: grid;
    gap: 8px;
    width: min(300px, 82%);
    padding: 16px 18px;
    border: 1px solid var(--lx-line);
    border-radius: 18px;
    background: var(--lx-card);
    box-shadow: var(--lx-shadow-hover);
}

    .bh-next small {
        font-size: .75rem;
        font-weight: 700;
        color: var(--lx-muted);
    }

    .bh-next a {
        font-size: .9rem;
        font-weight: 800;
        line-height: 1.3;
        color: var(--lx-ink) !important;
        text-decoration: none !important;
    }

        .bh-next a:hover {
            color: var(--lx-a) !important;
        }

.bh-clock {
    display: flex;
    gap: 8px;
}

    .bh-clock span {
        display: grid;
        justify-items: center;
        min-width: 48px;
        padding: 6px 0 5px;
        border-radius: 10px;
        background: var(--lx-soft);
        font-size: .68rem;
        font-weight: 700;
        color: var(--lx-muted);
    }

    .bh-clock b {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--lx-ink);
        font-variant-numeric: tabular-nums;
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes bh-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes bh-blink {
    50% {
        opacity: 0;
    }
}

/* ---------- board ---------- */
.bb {
    padding: clamp(36px, 1vw, 72px) 0 clamp(32px, 5vw, 64px);
}

.bb-wrap {
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.bb-side {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 18px;
}

    .bb-side h2 {
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -.03em;
        color: var(--lx-ink);
    }

.bb-search {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--lx-muted);
}

    .bb-search svg {
        position: absolute;
        left: 14px;
        pointer-events: none;
    }

    .bb-search input {
        width: 100%;
        min-height: 48px;
        padding: 0 14px 0 40px;
        border: 1px solid var(--lx-line);
        border-radius: 14px;
        background: var(--lx-card);
        color: var(--lx-ink);
        font: inherit;
        font-size: .9375rem;
    }

        .bb-search input:focus, .bb-zone select:focus {
            border-color: var(--lx-a);
            box-shadow: 0 0 0 4px rgba(var(--lx-glow), .18);
            outline: none;
        }

.bb-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--lx-line);
    border-radius: 14px;
    background: var(--lx-surface);
}

    .bb-group button {
        min-height: 38px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--lx-body);
        font: inherit;
        font-size: .8125rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .2s, color .2s;
    }

        .bb-group button.on {
            background: var(--lx-card);
            color: var(--lx-ink);
            box-shadow: var(--lx-shadow);
        }

.bb-tracks {
    display: grid;
    gap: 2px;
    padding-left: 14px;
    border-left: 2px solid var(--lx-line);
}

    .bb-tracks button {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 40px;
        padding: 6px 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--lx-body);
        font: inherit;
        font-size: .875rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background-color .2s, color .2s;
    }

        .bb-tracks button span {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .bb-tracks button b {
            flex: none;
            min-width: 24px;
            padding: 1px 7px;
            border-radius: 999px;
            background: var(--lx-soft);
            font-size: .72rem;
            color: var(--lx-a);
            text-align: center;
        }

        .bb-tracks button:hover {
            background: var(--lx-soft);
            color: var(--lx-ink);
        }

        .bb-tracks button.on {
            color: var(--lx-ink);
            background: var(--lx-soft);
        }

            .bb-tracks button.on::before {
                content: "";
                position: absolute;
                left: -16px;
                top: 8px;
                bottom: 8px;
                width: 2px;
                border-radius: 2px;
                background: var(--lx-a);
            }

.bb-zone {
    display: grid;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--lx-muted);
}

    .bb-zone select {
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid var(--lx-line);
        border-radius: 12px;
        background: var(--lx-card);
        color: var(--lx-ink);
        font: inherit;
        font-size: .875rem;
        font-weight: 600;
    }

.bb-group button:focus-visible, .bb-tracks button:focus-visible, .bc:focus-visible, .bb-empty button:focus-visible {
    outline: 2px solid var(--lx-a);
    outline-offset: 2px;
}

.bb-list {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.bb-count {
    font-size: .9rem;
    font-weight: 600;
    color: var(--lx-muted);
}

.bb-month {
    display: grid;
    gap: 14px;
}

    .bb-month + .bb-month {
        margin-top: 18px;
    }

    .bb-month > h3 {
        font-size: .8125rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--lx-muted);
    }

/* the batch card: date ticket, details, week strip, slot bar, action */
.bc {
    --mx: 50%;
    --my: 50%;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: clamp(14px, 2.4vw, 28px);
    align-items: center;
    padding: 20px 22px 20px 20px;
    border: 1px solid var(--lx-line);
    border-radius: 22px;
    background: var(--lx-card);
    color: var(--lx-body) !important;
    text-decoration: none !important;
    box-shadow: var(--lx-shadow);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .35s;
}

    .bc::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--lx-glow), .16), transparent 65%);
        opacity: 0;
        transition: opacity .3s;
        pointer-events: none;
    }

    .bc:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--lx-glow), .5);
        box-shadow: var(--lx-shadow-hover);
    }

        .bc:hover::before {
            opacity: 1;
        }

    .bc:active {
        transform: translateY(0) scale(.995);
    }

    .bc > * {
        position: relative;
    }

.bc-date {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    aspect-ratio: 1;
    border-radius: 20px;
    background: linear-gradient(160deg, #0e7490, #2563eb);
    color: #fff;
    line-height: 1;
    box-shadow: 0 14px 26px -16px rgba(37, 99, 235, .8);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

    .bc-date small {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        opacity: .8;
    }

    .bc-date b {
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .bc-date span {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

.bc:hover .bc-date {
    transform: rotate(-4deg) scale(1.04);
}

.bc-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.bc-status {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--lx-soft);
    color: var(--lx-a);
    font-size: .75rem;
    font-weight: 800;
}

.bc-status--soon {
    background: rgba(217, 119, 6, .14);
    color: var(--lx-warm);
}

.bc-status--live {
    background: rgba(5, 150, 105, .14);
    color: var(--lx-ok);
}

.bc-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: bc-pulse 1.8s ease-out infinite;
}

.bc-name {
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--lx-ink);
}

.bc-mentor {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    font-weight: 600;
}

.bc-av {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lx-soft);
    color: var(--lx-a);
    font-size: .72rem;
    font-weight: 800;
}

.bc-days {
    display: flex;
    gap: 5px;
}

    .bc-days span {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        border: 1px solid var(--lx-line);
        font-size: .7rem;
        font-weight: 700;
        color: var(--lx-muted);
    }

        .bc-days span.on {
            border-color: transparent;
            background: var(--lx-a);
            color: #fff;
        }

[data-bs-theme="dark"] .bc-days span.on {
    color: #04233a;
}

.bc-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bc-track {
    position: relative;
    flex: none;
    width: 120px;
    height: 6px;
    border-radius: 6px;
    background: var(--lx-soft);
}

    .bc-track i {
        position: absolute;
        top: 0;
        bottom: 0;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--lx-a), var(--lx-b));
    }

.bc-side {
    display: grid;
    justify-items: end;
    gap: 14px;
}

    .bc-side img {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        object-fit: cover;
        aspect-ratio: 1;
        filter: saturate(1.05);
        transition: transform .4s cubic-bezier(.2, .7, .2, 1);
    }

.bc:hover .bc-side img {
    transform: scale(1.08) rotate(3deg);
}

.bc-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--lx-ink);
    color: var(--lx-bg);
    font-size: .8125rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background-color .25s, color .25s;
}

    .bc-go svg {
        transition: transform .3s;
    }

.bc:hover .bc-go {
    background: linear-gradient(135deg, #0e7490, #2563eb);
    color: #fff;
}

    .bc:hover .bc-go svg {
        transform: translate(2px, -2px);
    }

.bc-skel {
    min-height: 150px;
}

    .bc-skel i {
        display: block;
        height: 16px;
        border-radius: 8px;
        background: linear-gradient(90deg, var(--lx-soft), rgba(var(--lx-glow), .2), var(--lx-soft));
        background-size: 200% 100%;
    }

        .bc-skel i:first-child {
            grid-row: span 3;
            width: 92px;
            height: 92px;
            border-radius: 20px;
        }

.bb-block {
    margin-top: clamp(28px, 4vw, 48px);
}

.bb-bh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
}

    .bb-bh h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--lx-ink);
    }

        .bb-bh h3 svg {
            color: var(--lx-a);
        }

.bb-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 56px 20px;
    border: 1px dashed var(--lx-line);
    border-radius: 22px;
    text-align: center;
    color: var(--lx-muted);
}

    .bb-empty h3 {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--lx-ink);
    }

    .bb-empty p {
        max-width: 44ch;
    }

    .bb-empty button {
        min-height: 46px;
        padding: 0 22px;
        border: 1px solid var(--lx-line);
        border-radius: 999px;
        background: var(--lx-card);
        color: var(--lx-ink);
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }

/* ---------- trust + closing panels ---------- */
.bw {
    padding: clamp(28px, 4vw, 56px) 0;
}

.bw-wrap {
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
}

.bw-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--lx-line);
    border-radius: 24px;
    background: var(--lx-card);
    box-shadow: var(--lx-shadow);
    overflow: hidden;
}

    .bw-stats li {
        display: grid;
        gap: 4px;
        padding: 26px clamp(18px, 2.6vw, 34px);
    }

        .bw-stats li + li {
            border-left: 1px solid var(--lx-line);
        }

    .bw-stats b {
        font-size: clamp(1.6rem, 3vw, 2.3rem);
        font-weight: 800;
        letter-spacing: -.03em;
        color: var(--lx-ink);
        font-variant-numeric: tabular-nums;
    }

    .bw-stats span {
        font-size: .875rem;
        color: var(--lx-muted);
    }

.bz {
    padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 80px);
}

.bz-wrap {
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.bz-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(26px, 3vw, 40px);
    border: 1px solid var(--lx-line);
    border-radius: 28px;
    background: var(--lx-card);
    box-shadow: var(--lx-shadow);
}

    .bz-card h3 {
        font-size: clamp(1.3rem, 2.2vw, 1.75rem);
        font-weight: 800;
        letter-spacing: -.025em;
        color: var(--lx-ink);
    }

    .bz-card p {
        max-width: 44ch;
        line-height: 1.65;
    }

    .bz-card .hb {
        margin-top: auto;
        padding-top: 10px;
    }
/* the team card is a tinted twin of the first card in light mode, and the dark panel in dark mode; buttons keep the hero colours in both */
.bz-card--team {
    background: linear-gradient(135deg, rgba(8, 145, 178, .12), rgba(37, 99, 235, .14)), var(--lx-card);
}

[data-bs-theme="dark"] .bz-card--team {
    border-color: transparent;
    background: radial-gradient(120% 120% at 100% 0%, rgba(37, 99, 235, .55), transparent 60%), #08182b;
}

    [data-bs-theme="dark"] .bz-card--team h3 {
        color: #fff;
    }

    [data-bs-theme="dark"] .bz-card--team p {
        color: #b4c6d9;
    }

.bz-grid-ic {
    position: absolute;
    right: -10px;
    bottom: -22px;
    font-size: 9rem;
    line-height: 1;
    color: rgba(var(--lx-glow), .1);
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .bh-wrap, .bb-wrap, .bz-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-stage {
        padding-bottom: 70px;
    }

    .bb-side {
        position: static;
    }

    .bb-tracks {
        display: flex;
        gap: 6px;
        padding: 0;
        border: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .bb-tracks button {
            flex: none;
            border: 1px solid var(--lx-line);
            border-radius: 999px;
            background: var(--lx-card);
        }

            .bb-tracks button.on::before {
                display: none;
            }

            .bb-tracks button span {
                -webkit-line-clamp: 1;
                white-space: nowrap;
            }

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

        .bw-stats li:nth-child(3) {
            border-left: 0;
        }

        .bw-stats li:nth-child(n+3) {
            border-top: 1px solid var(--lx-line);
        }
}

@media (max-width: 639.98px) {
    .bc {
        grid-template-columns: 68px minmax(0, 1fr);
        padding: 16px;
    }

    .bc-date b {
        font-size: 1.45rem;
    }

    .bc-date {
        border-radius: 16px;
    }

    .bc-side {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .bc-side img {
            width: 44px;
            height: 44px;
            border-radius: 12px;
        }

    .bc-track {
        width: 72px;
    }

    .bh-term .row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

        .bh-term .row small {
            display: none;
        }

    .bh-next {
        right: 0;
        left: 0;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bc {
        animation: bc-in .6s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(var(--i, 0) * 60ms);
    }

    .bc-skel i {
        animation: bc-sh 1.4s linear infinite;
    }
}

@keyframes bc-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes bc-sh {
    to {
        background-position: -200% 0;
    }
}

@keyframes bc-pulse {
    70% {
        box-shadow: 0 0 0 7px transparent;
    }

    0% {
        box-shadow: 0 0 0 0 currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc, .bc-date, .bc-side img, .bh-win, .bc-go svg {
        transition: none;
    }

    .bh-term p, .caret {
        animation: none;
    }
}

/* masterclass page: the same cards as a scroll-snap rail */
.bt--rail {
    padding-block: clamp(40px, 6vw, 72px);
}

.bt-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(460px, 88%);
    gap: 18px;
    padding: 6px 2px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

    .bt-rail > .bc {
        scroll-snap-align: start;
        grid-template-columns: 76px minmax(0, 1fr);
        animation: none;
    }

        .bt-rail > .bc .bc-side {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .bt-rail > .bc .bc-side img {
                width: 44px;
                height: 44px;
                border-radius: 12px;
            }

    .bt-rail:focus-visible {
        outline: 2px solid var(--lx-a);
        outline-offset: 4px;
        border-radius: 12px;
    }

.bt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.bt-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--lx-line);
    border-radius: 14px;
    background: var(--lx-surface);
}

    .bt-tabs button {
        min-height: 38px;
        padding: 0 14px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--lx-body);
        font: inherit;
        font-size: .85rem;
        font-weight: 700;
        cursor: pointer;
    }

        .bt-tabs button.on {
            background: var(--lx-card);
            color: var(--lx-ink);
            box-shadow: var(--lx-shadow);
        }

.bt-rail__nav {
    display: flex;
    gap: 8px;
}

    .bt-rail__nav button {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--lx-line);
        border-radius: 50%;
        background: var(--lx-card);
        color: var(--lx-ink);
        cursor: pointer;
        transition: border-color .2s, transform .2s;
    }

        .bt-rail__nav button:hover {
            border-color: rgba(var(--lx-glow), .55);
            transform: translateY(-2px);
        }

.bt-rail__empty {
    align-self: center;
    color: var(--lx-muted);
}

.bt-rail__all {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

@media (max-width: 639.98px) {
    .bt-rail__nav {
        display: none;
    }

    .bt--rail .bt-tabs {
        display: flex;
        overflow-x: auto;
        max-width: 100%;
    }

        .bt--rail .bt-tabs button {
            flex: none;
            white-space: nowrap;
        }
}

/* grid children may shrink below their content, otherwise a long option widens the filter column over the list */
.bb-side, .bb-side > * {
    min-width: 0;
}

.bb-zone select {
    width: 100%;
}

/* rail filters: quiet pills, one row, long course names clipped */
.bt--rail .bt-bar {
    align-items: center;
}

.bt--rail .bt-tabs {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
}

    .bt--rail .bt-tabs button {
        max-width: 240px;
        padding: 0 16px;
        overflow: hidden;
        border: 1px solid var(--lx-line);
        border-radius: 999px;
        background: var(--lx-card);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .bt--rail .bt-tabs button.on {
            border-color: transparent;
            background: linear-gradient(135deg, #0e7490, #2563eb);
            color: #fff;
            box-shadow: none;
        }

.bt--rail .bt-rail__nav {
    flex: none;
}

/* =====================================================================
   Batch board v2: toolbar, highlights, week timetable, list
   ===================================================================== */
.bb-wrap {
    display: block;
}



.tb {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 22px;
}

.tb-title h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--lx-ink);
}

.tb-title p {
    margin-top: 4px;
    color: var(--lx-muted);
    font-size: .9375rem;
}

.tb-ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tb-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--lx-line);
    border-radius: 12px;
    background: var(--lx-surface);
}

    .tb-seg button {
        min-height: 36px;
        padding: 0 14px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--lx-body);
        font: inherit;
        font-size: .8125rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .2s, color .2s;
    }

        .tb-seg button.on {
            background: var(--lx-card);
            color: var(--lx-ink);
            box-shadow: var(--lx-shadow);
        }

.tb-sel, .tb-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--lx-line);
    border-radius: 12px;
    background: var(--lx-card);
    color: var(--lx-muted);
    font-size: .8125rem;
    font-weight: 600;
}

    .tb-sel select {
        max-width: 230px;
        border: 0;
        background: transparent;
        color: var(--lx-ink);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        text-overflow: ellipsis;
    }

    .tb-search input {
        width: 170px;
        border: 0;
        background: transparent;
        color: var(--lx-ink);
        font: inherit;
        font-size: .875rem;
    }

        .tb-search input:focus, .tb-sel select:focus {
            outline: none;
        }

    .tb-sel:focus-within, .tb-search:focus-within {
        border-color: var(--lx-a);
        box-shadow: 0 0 0 4px rgba(var(--lx-glow), .16);
    }
.tb-seg button:focus-visible,
.hl-card:focus-visible,
.ls-row:focus-visible {
    outline: 2px solid var(--lx-a);
    outline-offset: 2px;
}

/* highlights: three metric cards */
.hl {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: 16px;
}

.hl-card {
    --t: var(--lx-a);
    position: relative;
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--lx-line);
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--t) 11%, transparent), transparent 60%), var(--lx-card);
    box-shadow: var(--lx-shadow);
    color: var(--lx-body) !important;
    text-decoration: none !important;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s;
}

.hl-card--b {
    --t: #059669;
}

.hl-card--c {
    --t: #6366f1;
}

.hl-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--t) 55%, transparent);
    box-shadow: 0 28px 44px -26px color-mix(in srgb, var(--t) 60%, transparent);
}

.hl-top {
    display: grid;
    gap: 14px;
}

.hl-tag {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--t);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}

.hl-metric {
    display: grid;
    gap: 2px;
}

    .hl-metric b {
        font-size: clamp(1.9rem, 3.2vw, 2.6rem);
        font-weight: 800;
        letter-spacing: -.04em;
        line-height: 1.05;
        color: var(--lx-ink);
        font-variant-numeric: tabular-nums;
    }

    .hl-metric small {
        font-size: .8125rem;
        color: var(--lx-muted);
    }

.hl-stage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--lx-line);
    border-radius: 14px;
    background: var(--lx-surface);
}

    .hl-stage img {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        object-fit: cover;
    }

    .hl-stage div {
        min-width: 0;
        flex: 1;
    }

    .hl-stage b {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.3;
        color: var(--lx-ink);
    }

    .hl-stage small {
        font-size: .78rem;
        color: var(--lx-muted);
    }

    .hl-stage svg {
        flex: none;
        color: var(--lx-muted);
        transition: transform .3s, color .3s;
    }

.hl-card:hover .hl-stage svg {
    color: var(--t);
    transform: translate(2px, -2px);
}

.hl-meta {
    font-size: .8125rem;
}

.hl-skel {
    min-height: 250px;
}

    .hl-skel i {
        display: block;
        height: 16px;
        border-radius: 8px;
        background: linear-gradient(90deg, var(--lx-soft), rgba(var(--lx-glow), .2), var(--lx-soft));
        background-size: 200% 100%;
    }

        .hl-skel i:nth-child(2) {
            height: 44px;
            width: 60%;
        }

.ls-slot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ls-track {
    position: relative;
    flex: none;
    width: 70px;
    height: 6px;
    border-radius: 6px;
    background: var(--lx-soft);
}

    .ls-track i {
        position: absolute;
        top: 0;
        bottom: 0;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--lx-a), var(--lx-b));
    }

/* list */
.ls {
    border: 1px solid var(--lx-line);
    border-radius: 22px;
    background: var(--lx-card);
    box-shadow: var(--lx-shadow);
    overflow: hidden;
}

.ls-head, .ls-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.5fr) minmax(110px, .7fr) 176px 262px minmax(130px, .8fr) 92px;
    gap: 16px;
    align-items: center;
    padding: 0 20px;
}

.ls-head {
    min-height: 44px;
    border-bottom: 1px solid var(--lx-line);
    background: var(--lx-surface);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lx-muted);
}

.ls-row {
    position: relative;
    min-height: 76px;
    border-bottom: 1px solid var(--lx-line);
    color: var(--lx-body) !important;
    text-decoration: none !important;
    transition: background-color .25s;
}

    .ls-row:last-child {
        border-bottom: 0;
    }

    .ls-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 3px;
        background: var(--c);
        transform: scaleY(0);
        transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    }

    .ls-row:hover {
        background: color-mix(in srgb, var(--c) 7%, transparent);
    }

        .ls-row:hover::before {
            transform: scaleY(1);
        }

.ls-course {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .ls-course img {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        object-fit: cover;
    }

    .ls-course > span {
        display: grid;
        min-width: 0;
    }

    .ls-course b {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .9375rem;
        line-height: 1.3;
        color: var(--lx-ink);
    }

    .ls-course small, .ls-mentor {
        font-size: .78rem;
        color: var(--lx-muted);
    }

.ls-start {
    display: grid;
    gap: 3px;
}

    .ls-start b {
        font-size: .9375rem;
        color: var(--lx-ink);
    }

.ls-st {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 800;
    color: var(--lx-a);
}

    .ls-st.soon {
        color: var(--lx-warm);
    }

    .ls-st.live {
        color: var(--lx-ok);
    }

    .ls-st i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        animation: bc-pulse 1.8s ease-out infinite;
    }

.ls-days {
    display: flex;
    gap: 4px;
}

    .ls-days i {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border: 1px solid var(--lx-line);
        border-radius: 7px;
        font-style: normal;
        font-size: .68rem;
        font-weight: 700;
        color: var(--lx-muted);
    }

        .ls-days i.on {
            border-color: transparent;
            background: var(--lx-a);
            color: #fff;
        }

[data-bs-theme="dark"] .ls-days i.on {
    color: #04233a;
}

.ls-mentor {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

    .ls-mentor i {
        flex: none;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--lx-soft);
        color: var(--lx-a);
        font-style: normal;
        font-size: .7rem;
        font-weight: 800;
    }

.ls-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    border-radius: 999px;
    background: var(--lx-soft);
    color: var(--lx-a);
    font-size: .8125rem;
    font-weight: 800;
    transition: background-color .25s, color .25s;
}

.ls-row:hover .ls-go {
    background: linear-gradient(135deg, #0e7490, #2563eb);
    color: #fff;
}

.ls-go svg {
    transition: transform .3s;
}

.ls-row:hover .ls-go svg {
    transform: translate(2px, -2px);
}

@media (max-width: 1279.98px) {
    .ls-head {
        display: none;
    }

    .ls-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "c go" "s s" "d t" "m m";
        gap: 10px 14px;
        padding: 16px 18px;
    }

    .ls-course {
        grid-area: c;
    }

    .ls-go {
        grid-area: go;
        width: 92px;
    }

    .ls-start {
        grid-area: s;
        grid-auto-flow: column;
        justify-content: space-between;
        align-items: center;
    }

    .ls-days {
        grid-area: d;
    }

    .ls-row > .ls-slot {
        grid-area: t;
        justify-self: end;
    }

    .ls-mentor {
        grid-area: m;
    }
}

@media (max-width: 899.98px) {
    .hl {
        grid-template-columns: minmax(0, 1fr);
    }

    .hl-card {
        gap: 14px;
    }
}

@media (max-width: 639.98px) {
    .tb-seg {
        width: 100%;
    }

        .tb-seg button {
            flex: 1;
            padding: 0 6px;
        }

    .tb-ctl {
        width: 100%;
    }

    .tb-sel, .tb-search {
        flex: 1 1 100%;
    }

        .tb-search input {
            width: 100%;
        }

        .tb-sel select {
            max-width: none;
            width: 100%;
        }

    .ls-track {
        width: 48px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hl-card {
        opacity: 0;
        transform: translateY(18px);
    }

    .hl.in .hl-card {
        opacity: 1;
        transform: none;
        transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s;
        transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s, 0s;
    }

        .hl.in .hl-card:hover {
            transform: translateY(-4px);
            transition-delay: 0s;
        }

    .ls-row {
        animation: bc-in .55s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(var(--i) * 45ms);
    }

    .hl-skel i {
        animation: bc-sh 1.4s linear infinite;
    }
}

/* the "Since 2015" line, kept in the hero with the same look it had in the home strip */
.bh-since {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    font-size: .8125rem;
    color: var(--lx-muted);
}

    .bh-since i {
        font-size: 1rem;
        color: var(--lx-a);
    }

    .bh-since b {
        font-weight: 800;
        color: var(--lx-ink);
    }

/* section backgrounds: the site navy used by the header, masterclass page and reviews, so every section on the page shares one colour.
   Only the closing band is a step lighter. (.lx brings a darker page colour of its own, which made the stats and closing blocks look detached.) */
.bh, .bb, .bw, .bz {
    --lx-bg: transparent;
}

[data-bs-theme="dark"] .bh, [data-bs-theme="dark"] .bb, [data-bs-theme="dark"] .bw {
    background: #05182c;
}

[data-bs-theme="dark"] .bh, [data-bs-theme="dark"] .bb, [data-bs-theme="dark"] .bw, [data-bs-theme="dark"] .bz {
    --lx-card: #082039;
    --lx-surface: #06182d;
    --lx-line: rgba(110, 190, 230, .2);
}

.bw {
    padding-block: 0 clamp(36px, 5vw, 64px);
}

.bz {
    background: #f1f7fa;
}

[data-bs-theme="dark"] .bz {
    background: #0a2037;
}

@media (max-width: 479.98px) {
    .bh-since span {
        display: none;
    }
}

/* trust facts: same look as the proof numbers on the home hero */
.bh-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
    padding: 22px 0 0;
    border-top: 1px solid var(--lx-line);
}

    .bh-facts li {
        display: grid;
        align-content: start;
        gap: 2px;
        padding: 6px 10px 6px 0;
        transition: transform .25s cubic-bezier(.2, .7, .2, 1);
    }

        .bh-facts li:hover {
            transform: translateY(-3px);
        }

        .bh-facts li > i {
            margin-bottom: 6px;
            font-size: 1.05rem;
            color: var(--lx-a);
        }

    .bh-facts b {
        font-size: clamp(1.45rem, 2.3vw, 1.9rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: var(--lx-ink);
        font-variant-numeric: tabular-nums;
    }

    .bh-facts small {
        font-size: .8125rem;
        line-height: 1.35;
        color: var(--lx-muted);
    }

@media (max-width: 575.98px) {
    .bh-facts {
        gap: 8px;
    }

        .bh-facts small {
            font-size: .75rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    .bh-facts li {
        transition: none;
    }
}