/* Learner experience refresh. All rules are scoped to library, lesson, or basket pages. */
.nx-library,
.nx-lesson,
.nx-basket {
    --nx-surface: #0c1525;
    --nx-surface-raised: #121d31;
    --nx-surface-soft: #17223a;
    --nx-border: rgba(159, 175, 210, .18);
    --nx-border-bright: rgba(184, 167, 255, .38);
    --nx-copy: #b7c4d8;
    --nx-bright: #f7f8ff;
    --nx-purple: #b8a7ff;
    --nx-cyan: #75e6e7;
}

.nx-library .eyebrow,
.nx-lesson .eyebrow,
.nx-basket .eyebrow {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .15em;
}

.nx-library .button,
.nx-library .text-link,
.nx-lesson .button,
.nx-lesson .text-link,
.nx-basket .button,
.nx-basket .text-link {
    font-size: 14px;
}

/* Library */
.nx-library {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(30px, 4vw, 58px);
    padding-top: clamp(42px, 5vw, 72px);
    position: relative;
}

.nx-library:before {
    background: radial-gradient(circle, rgba(111, 78, 229, .16), transparent 68%);
    content: '';
    height: 520px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -180px;
    width: min(520px, 100%);
    z-index: -1;
}

.nx-library__main {
    min-width: 0;
}

.nx-library__hero {
    margin-bottom: 34px;
    max-width: 760px;
}

.nx-library__hero h1 {
    font-size: clamp(42px, 5vw, 66px);
    letter-spacing: -.06em;
    margin-bottom: 16px;
}

.nx-library__hero > p:last-child {
    color: var(--nx-copy);
    font-size: 18px;
    line-height: 1.7;
    max-width: 620px;
}

.nx-library__sidebar {
    border-color: var(--nx-border);
    padding-right: 24px;
}

.nx-library__sidebar > .eyebrow {
    margin: 3px 12px 18px;
}

.nx-library__sidebar nav {
    display: grid;
    gap: 6px;
}

.nx-library__sidebar nav a,
.nx-library__sidebar form button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #aebbd0;
    display: flex;
    font-size: 15px;
    gap: 12px;
    justify-content: flex-start;
    line-height: 1.35;
    margin: 0;
    min-height: 48px;
    padding: 11px 13px;
    text-align: left;
    width: 100%;
}

.nx-library__sidebar nav a:hover,
.nx-library__sidebar form button:hover {
    background: rgba(121, 91, 227, .11);
    border-color: rgba(184, 167, 255, .2);
    color: var(--nx-bright);
}

.nx-library__sidebar nav a.selected {
    background: linear-gradient(135deg, rgba(113, 82, 226, .8), rgba(73, 51, 157, .9));
    border-color: rgba(200, 189, 255, .28);
    box-shadow: 0 12px 35px rgba(68, 42, 169, .25), inset 0 1px rgba(255, 255, 255, .08);
    color: white;
}

.nx-library__sidebar nav svg {
    height: 19px;
    width: 19px;
}

.nx-library__sidebar form {
    border-color: var(--nx-border);
    margin-top: 19px;
    padding-top: 14px;
}

.nx-library__sidebar .sidebar-note {
    background: linear-gradient(145deg, rgba(21, 31, 53, .86), rgba(42, 28, 73, .72));
    border-color: rgba(184, 167, 255, .23);
    border-radius: 14px;
    color: #b9c5d8;
    font-size: 14px;
    line-height: 1.7;
    overflow: hidden;
    padding: 22px 18px;
}

.nx-library__sidebar .sidebar-note span {
    margin-top: 8px;
}

.nx-library__stats {
    gap: 16px;
    margin-bottom: 28px;
}

.nx-library__stats > article {
    background: linear-gradient(145deg, rgba(19, 30, 51, .96), rgba(9, 18, 32, .96));
    border: 1px solid var(--nx-border);
    border-radius: 16px;
    min-height: 142px;
    overflow: hidden;
    padding: 27px;
    position: relative;
}

.nx-library__stats > article:after {
    background: radial-gradient(circle, rgba(127, 92, 238, .2), transparent 70%);
    content: '';
    height: 140px;
    position: absolute;
    right: -55px;
    top: -55px;
    width: 140px;
}

.nx-library__stats strong {
    color: var(--nx-bright);
    font-size: 42px;
    line-height: 1;
    margin-bottom: 13px;
}

.nx-library__stats article > span:last-child {
    color: var(--nx-copy);
    display: block;
    font-size: 15px;
    line-height: 1.45;
}

.nx-library__stats .stat-icon {
    color: var(--nx-purple);
    right: 23px;
    top: 24px;
    z-index: 1;
}

.nx-library__stats .stat-icon svg {
    height: 27px;
    width: 27px;
}

.nx-library__continue {
    align-items: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(121, 93, 238, .26), transparent 32%),
        linear-gradient(130deg, #151a35 0%, #111d31 55%, #0b1728 100%);
    border: 1px solid var(--nx-border-bright);
    border-radius: 20px;
    box-shadow: 0 26px 80px -45px rgba(100, 74, 220, .9), inset 0 1px rgba(255, 255, 255, .08);
    display: grid;
    gap: 26px;
    grid-template-columns: 176px minmax(0, 1fr) auto;
    margin-bottom: 48px;
    min-height: 228px;
    overflow: hidden;
    padding: 26px 30px 26px 26px;
    position: relative;
}

.nx-library__continue:after {
    background: linear-gradient(120deg, transparent, rgba(117, 230, 231, .07));
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.nx-library__continue-cover,
.nx-library__continue-copy,
.nx-library__continue-action {
    position: relative;
    z-index: 1;
}

.nx-library__continue-cover .course-art.compact {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .26);
    height: 172px;
}

.nx-library__continue-copy .eyebrow {
    margin-bottom: 8px;
}

.nx-library__continue-copy h2 {
    font-size: clamp(28px, 3.1vw, 40px);
    margin-bottom: 12px;
}

.nx-library__next-section {
    color: #d4deed;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.nx-library__next-section span {
    color: #8fa1ba;
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-library__continue .progress-label,
.nx-library__card .progress-label {
    color: #aab9ce;
    font-size: 14px;
    margin: 15px 0 9px;
}

.nx-library__continue progress,
.nx-library__card progress {
    height: 7px;
    margin-bottom: 0;
}

.nx-library__continue-action {
    min-width: 168px;
    white-space: nowrap;
}

.nx-library__section-heading {
    align-items: flex-end;
    margin-bottom: 22px;
}

.nx-library__section-heading .eyebrow {
    margin-bottom: 8px;
}

.nx-library__section-heading h2 {
    font-size: clamp(30px, 3vw, 42px);
    margin-bottom: 0;
}

.nx-library__section-heading .text-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}

.nx-library__grid {
    gap: 22px;
}

.nx-library__card {
    background: linear-gradient(150deg, rgba(17, 28, 47, .96), rgba(8, 17, 30, .98));
    border: 1px solid var(--nx-border);
    border-radius: 18px;
    box-shadow: 0 24px 64px -48px rgba(86, 61, 194, .9);
    overflow: hidden;
}

.nx-library__card .course-art {
    height: 205px;
}

.nx-library__card .course-card-body {
    padding: 25px;
}

.nx-library__card .eyebrow {
    display: block;
    margin-bottom: 9px;
}

.nx-library__card h3 {
    font-size: 25px;
    line-height: 1.25;
    min-height: 62px;
}

.nx-library__card .button {
    min-height: 48px;
    margin-top: 20px;
}

.nx-library__card .library-links {
    color: #b4c2d6;
    font-size: 14px;
    margin-top: 18px;
}

.nx-library__card .library-links a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}

.nx-library__empty {
    grid-column: 1 / -1;
    padding: clamp(44px, 7vw, 80px) 30px;
}

.nx-library__empty p {
    font-size: 17px;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
    max-width: 610px;
}

.nx-library__banner {
    background: linear-gradient(120deg, rgba(41, 27, 79, .78), rgba(11, 28, 46, .92));
    border: 1px solid rgba(184, 167, 255, .2);
    margin-top: 34px;
}

.nx-library__banner .text-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}

.nx-library__records {
    background: linear-gradient(145deg, rgba(17, 28, 47, .95), rgba(8, 17, 30, .96));
    border-color: var(--nx-border);
    border-radius: 18px;
    padding: clamp(24px, 4vw, 42px);
}

.nx-library__records-heading {
    align-items: end;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.nx-library__records-heading h2,
.nx-library__records-heading p {
    margin-bottom: 0;
}

.nx-library__records-heading > p {
    font-size: 15px;
    line-height: 1.6;
    max-width: 330px;
    text-align: right;
}

.nx-library__record {
    border-color: var(--nx-border);
    font-size: 15px;
    min-height: 96px;
    padding: 24px 0;
}

.nx-library__record p {
    font-size: 15px;
}

.nx-library__record div > span,
.nx-library__record small {
    color: #91a2ba;
    display: block;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 7px;
}

.nx-library__record b {
    font-size: 17px;
}

.nx-library__record .button {
    min-height: 44px;
}

.nx-library__empty-inline {
    border-top: 1px solid var(--nx-border);
    margin-top: 24px;
    padding: 42px 0 20px;
    text-align: center;
}

.nx-library__empty-inline p {
    font-size: 15px;
}

/* Lesson reading */
.nx-lesson {
    max-width: 1370px;
    padding-top: 36px;
}

.nx-lesson__breadcrumbs {
    align-items: center;
    color: #9cacc4;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 10px;
    margin-bottom: 27px;
    min-height: 44px;
}

.nx-lesson__breadcrumbs a {
    align-items: center;
    color: #d1c8ff;
    display: inline-flex;
    min-height: 44px;
}

.nx-lesson__layout {
    gap: clamp(24px, 3vw, 42px);
    grid-template-columns: 310px minmax(0, 1fr);
}

.nx-lesson__rail {
    background: linear-gradient(155deg, rgba(17, 28, 47, .98), rgba(8, 17, 30, .98));
    border-color: var(--nx-border);
    border-radius: 18px;
    padding: 27px;
    top: 128px;
}

.nx-lesson__rail h2 {
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 23px;
}

.nx-lesson__rail .progress-label {
    color: #a8b7ca;
    font-size: 14px;
    margin: 0 0 9px;
}

.nx-lesson__rail progress {
    height: 7px;
    margin-bottom: 22px;
}

.nx-lesson__curriculum > summary {
    display: none;
}

.nx-lesson__curriculum nav {
    display: grid;
    gap: 5px;
    margin: 0 -9px 20px;
}

.nx-lesson__curriculum nav a {
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #aebbd0;
    display: flex;
    font-size: 14px;
    gap: 11px;
    line-height: 1.45;
    margin: 0;
    min-height: 48px;
    padding: 12px 10px;
}

.nx-lesson__curriculum nav a:hover {
    background: rgba(123, 91, 231, .1);
    border-color: rgba(184, 167, 255, .18);
    color: var(--nx-bright);
}

.nx-lesson__curriculum nav a.selected {
    background: rgba(117, 86, 211, .22);
    border-color: rgba(184, 167, 255, .28);
    color: #efeaff;
}

.nx-lesson__section-number {
    color: var(--nx-purple);
    flex: 0 0 24px;
    font-weight: 700;
    width: 24px;
}

.nx-lesson__download {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}

.nx-lesson__article {
    background:
        radial-gradient(circle at 95% 0%, rgba(108, 77, 223, .12), transparent 28%),
        linear-gradient(155deg, rgba(15, 25, 43, .98), rgba(7, 15, 27, .99));
    border-color: var(--nx-border);
    border-radius: 20px;
    box-shadow: 0 30px 90px -60px rgba(91, 68, 207, .9);
    min-width: 0;
    padding: clamp(34px, 5vw, 66px);
}

.nx-lesson__kicker {
    max-width: 760px;
}

.nx-lesson__kicker .eyebrow {
    font-size: 14px;
}

.nx-lesson__kicker .badge {
    font-size: 13px;
    padding: 7px 11px;
}

.nx-lesson__article > h1 {
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1.08;
    margin: 27px 0 15px;
    max-width: 790px;
}

.nx-lesson__reading-time {
    border-bottom: 1px solid var(--nx-border);
    color: #8fa0b9;
    font-size: 14px;
    margin-bottom: 0;
    max-width: 760px;
    padding-bottom: 30px;
}

.nx-lesson__prose {
    color: #d3dbea;
    font-size: clamp(17px, 1.4vw, 18.5px);
    line-height: 1.88;
    margin: 38px 0 46px;
    max-width: 68ch;
    white-space: pre-line;
}

.nx-lesson__exercise,
.nx-lesson__reflection {
    border: 1px solid rgba(184, 167, 255, .2);
    border-radius: 16px;
    margin: 26px 0;
    max-width: 760px;
    padding: clamp(24px, 4vw, 36px);
}

.nx-lesson__exercise {
    background: linear-gradient(140deg, rgba(93, 65, 190, .19), rgba(18, 31, 52, .72));
}

.nx-lesson__reflection {
    background: rgba(12, 25, 42, .76);
}

.nx-lesson__exercise h2,
.nx-lesson__reflection h2 {
    font-size: clamp(25px, 3vw, 34px);
    margin-bottom: 14px;
}

.nx-lesson__exercise > p:last-child,
.nx-lesson__reflection > p {
    color: #d2dceb;
    font-size: 17px;
    line-height: 1.75;
}

.nx-lesson__reflection .nx-lesson__note {
    color: #92a3bb;
    font-size: 14px;
    margin-bottom: 20px;
}

.nx-lesson__guidance {
    border-top: 1px solid var(--nx-border);
    padding-top: 14px;
}

.nx-lesson__guidance summary {
    align-items: center;
    color: #d2c8ff;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    justify-content: space-between;
    list-style: none;
    min-height: 44px;
}

.nx-lesson__guidance summary::-webkit-details-marker {
    display: none;
}

.nx-lesson__guidance summary:after {
    content: '+';
    font-size: 24px;
    font-weight: 400;
}

.nx-lesson__guidance[open] summary:after {
    content: '−';
}

.nx-lesson__guidance > div {
    border-left: 2px solid rgba(184, 167, 255, .5);
    margin-top: 10px;
    padding: 8px 0 1px 18px;
}

.nx-lesson__guidance > div p {
    color: #aebed2;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 13px;
}

.nx-lesson__pager {
    border-bottom: 1px solid var(--nx-border);
    border-top: 1px solid var(--nx-border);
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
    margin-top: 38px;
    max-width: 760px;
    padding: 18px 0;
}

.nx-lesson__pager a {
    align-items: center;
    border-radius: 10px;
    color: #d3ddeb;
    display: flex;
    font-size: 14px;
    gap: 13px;
    line-height: 1.4;
    min-height: 60px;
    padding: 8px 10px;
}

.nx-lesson__pager a:hover {
    background: rgba(121, 91, 227, .1);
}

.nx-lesson__pager a:last-child {
    justify-content: flex-end;
    text-align: right;
}

.nx-lesson__pager small {
    color: #8294ad;
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
}

.nx-lesson__footer {
    align-items: center;
    border: 0;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 30px;
    max-width: 760px;
}

.nx-lesson__footer p {
    color: #91a2ba;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
}

.nx-lesson__footer form,
.nx-lesson__footer .button {
    flex-shrink: 0;
}

.nx-lesson__footer .button {
    font-size: 14px;
    min-height: 50px;
}

.nx-lesson__complete {
    font-size: 15px;
    margin-top: 28px;
    max-width: 760px;
}

/* Basket */
.nx-basket {
    max-width: 1280px;
    padding-top: clamp(42px, 5vw, 70px);
    position: relative;
}

.nx-basket:before {
    background: radial-gradient(circle, rgba(102, 76, 211, .14), transparent 68%);
    content: '';
    height: 580px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: -210px;
    width: min(580px, 100%);
    z-index: -1;
}

.nx-basket__hero {
    margin-bottom: 28px;
    max-width: 770px;
}

.nx-basket__hero h1 {
    font-size: clamp(46px, 6vw, 72px);
    margin-bottom: 14px;
}

.nx-basket__hero > p:last-child {
    color: var(--nx-copy);
    font-size: 18px;
    line-height: 1.7;
}

.nx-basket__steps {
    counter-reset: none;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.nx-basket__steps li {
    align-items: center;
    border-bottom: 1px solid var(--nx-border);
    color: #7f90a9;
    display: grid;
    gap: 0 11px;
    grid-template-columns: 34px 1fr;
    min-height: 72px;
    padding: 10px 18px;
    position: relative;
}

.nx-basket__steps li:after {
    background: var(--nx-border);
    content: '';
    height: 1px;
    position: absolute;
    right: -18px;
    top: 27px;
    width: 36px;
}

.nx-basket__steps li:last-child:after {
    display: none;
}

.nx-basket__steps li > span {
    align-items: center;
    background: rgba(125, 96, 226, .11);
    border: 1px solid rgba(184, 167, 255, .24);
    border-radius: 50%;
    display: flex;
    font-size: 14px;
    grid-row: 1 / 3;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.nx-basket__steps strong {
    color: #c0cbdb;
    font-size: 14px;
    line-height: 1.3;
}

.nx-basket__steps small {
    color: #7f90a9;
    font-size: 12px;
    line-height: 1.35;
}

.nx-basket__steps li[aria-current='step'] {
    border-bottom-color: var(--nx-purple);
}

.nx-basket__steps li[aria-current='step'] > span {
    background: linear-gradient(135deg, #8565ee, #5b3fc4);
    color: white;
}

.nx-basket__steps li[aria-current='step'] strong {
    color: var(--nx-bright);
}

.nx-basket__layout {
    align-items: start;
    gap: clamp(22px, 3vw, 38px);
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .82fr);
}

.nx-basket__selection,
.nx-basket__summary {
    background: linear-gradient(150deg, rgba(17, 28, 47, .97), rgba(8, 17, 30, .98));
    border-color: var(--nx-border);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 38px);
}

.nx-basket__selection-heading {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 5px;
}

.nx-basket__selection-heading .eyebrow,
.nx-basket__selection-heading h2,
.nx-basket__selection-heading > p {
    margin-bottom: 0;
}

.nx-basket__selection-heading h2,
.nx-basket__summary h2 {
    font-size: clamp(27px, 3vw, 36px);
}

.nx-basket__selection-heading > p {
    color: #93a3ba;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.nx-basket__item {
    align-items: center;
    border-color: var(--nx-border);
    gap: 20px;
    grid-template-columns: 116px minmax(0, 1fr) auto;
    min-height: 164px;
    padding: 26px 0;
}

.nx-basket__cover .course-art.compact {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    height: 112px;
}

.nx-basket__item-copy .eyebrow {
    font-size: 13px;
    margin-bottom: 5px;
}

.nx-basket__item-copy h3 {
    font-size: 21px;
    line-height: 1.28;
    margin-bottom: 8px;
}

.nx-basket__licence-note,
.nx-basket__format {
    color: #a9b8cc;
    display: inline-block;
    font-size: 14px;
    line-height: 1.6;
}

.nx-basket__licence-note:after {
    color: #53627a;
    content: ' · ';
    margin: 0 4px;
}

.nx-basket__item .remove {
    color: #c8baff;
    font-size: 14px;
    min-height: 44px;
    padding: 9px 0;
    text-underline-offset: 4px;
}

.nx-basket__price {
    align-self: center;
    color: var(--nx-bright);
    font: 600 19px 'Space Grotesk', sans-serif;
}

.nx-basket__keep-shopping {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin-top: 16px;
    min-height: 44px;
}

.nx-basket__summary {
    box-shadow: 0 28px 85px -52px rgba(93, 66, 207, .9);
    position: sticky;
    top: 124px;
}

.nx-basket__summary > .eyebrow {
    margin-bottom: 8px;
}

.nx-basket__summary h2 {
    margin-bottom: 20px;
}

.nx-basket__summary .total-line {
    border-color: var(--nx-border);
    font-size: 15px;
    padding: 18px 0;
}

.nx-basket__summary .total-line strong {
    font-size: 27px;
}

.nx-basket__summary .demo-total strong {
    color: var(--nx-purple);
    font-size: 38px;
}

.nx-basket__demo-note {
    background: rgba(88, 65, 178, .13);
    border: 1px solid rgba(184, 167, 255, .2) !important;
    border-radius: 12px;
    color: #d8d0ff;
    font-size: 13px;
    line-height: 1.5;
    margin: 22px 0 !important;
    padding: 17px;
}

.nx-basket__demo-note strong,
.nx-basket__demo-note span {
    display: block;
}

.nx-basket__demo-note span {
    color: #aebcd0;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 7px;
}

.nx-basket__consent {
    font-size: 14px;
    line-height: 1.65;
    margin: 20px 0;
}

.nx-basket__consent input {
    height: 20px;
    margin-top: 2px;
    width: 20px;
}

.nx-basket__consent .text-link {
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nx-basket__summary .button {
    min-height: 52px;
}

.nx-basket__signin-note {
    font-size: 14px;
    margin: 13px 0 0;
}

.nx-basket__confirmation {
    border-top: 1px solid var(--nx-border);
    margin-top: 23px;
    padding-top: 21px;
}

.nx-basket__confirmation strong {
    color: #dce3f0;
    font-size: 15px;
}

.nx-basket__confirmation p {
    color: #92a2ba;
    font-size: 14px;
    line-height: 1.65;
    margin: 7px 0 0;
}

.nx-basket__empty {
    padding: clamp(48px, 8vw, 92px) 25px;
}

.nx-basket__empty p {
    font-size: 17px;
}

/* Tablet */
@media (max-width: 1100px) {
    .nx-library {
        grid-template-columns: 196px minmax(0, 1fr);
        gap: 28px;
    }

    .nx-library__sidebar {
        padding-right: 15px;
    }

    .nx-library__sidebar nav a,
    .nx-library__sidebar form button {
        font-size: 14px;
        gap: 9px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .nx-library__continue {
        gap: 20px;
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .nx-library__continue-cover .course-art.compact {
        height: 140px;
    }

    .nx-library__continue-action {
        grid-column: 2;
        justify-self: start;
    }

    .nx-lesson__layout {
        grid-template-columns: 265px minmax(0, 1fr);
    }

    .nx-lesson__rail {
        padding: 22px;
    }

    .nx-basket__layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(310px, .85fr);
    }

    .nx-basket__item {
        grid-template-columns: 90px minmax(0, 1fr) auto;
        gap: 15px;
    }

    .nx-basket__cover .course-art.compact {
        height: 90px;
    }
}

/* Neutralise the legacy mobile flex sidebar as soon as that rule applies. */
@media (max-width: 800px) {
    .nx-library__sidebar {
        display: block;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
}

/* Small tablet and mobile */
@media (max-width: 768px) {
    .nx-library,
    .nx-lesson,
    .nx-basket {
        padding-top: 32px;
    }

    .nx-library {
        display: block;
    }

    .nx-library__sidebar {
        border: 0;
        margin: 0 0 32px;
        padding: 0;
    }

    .nx-library__sidebar > .eyebrow,
    .nx-library__sidebar .sidebar-note {
        display: none;
    }

    .nx-library__sidebar nav {
        display: flex;
        gap: 8px;
        margin: 0 -2px;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        padding: 2px 2px 10px;
        scrollbar-width: thin;
        width: 100%;
    }

    .nx-library__sidebar nav a {
        flex: 0 0 auto;
        min-height: 46px;
        white-space: nowrap;
        width: auto;
    }

    .nx-library__sidebar form {
        border: 0;
        margin: 6px 0 0;
        padding: 0;
    }

    .nx-library__sidebar form button {
        width: auto;
    }

    .nx-library__hero h1 {
        font-size: clamp(40px, 10vw, 56px);
    }

    .nx-library__stats {
        gap: 10px;
    }

    .nx-library__stats > article {
        min-height: 126px;
        padding: 21px 17px;
    }

    .nx-library__stats strong {
        font-size: 35px;
    }

    .nx-library__stats .stat-icon {
        display: none;
    }

    .nx-library__continue {
        grid-template-columns: 132px minmax(0, 1fr);
        padding: 22px;
    }

    .nx-library__grid {
        grid-template-columns: 1fr 1fr;
    }

    .nx-library__records-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .nx-library__records-heading > p {
        text-align: left;
    }

    .nx-lesson__layout {
        display: block;
    }

    .nx-lesson__rail {
        margin-bottom: 24px;
        padding: 24px;
        position: static;
    }

    .nx-lesson__rail > .eyebrow,
    .nx-lesson__rail > h2 {
        display: none;
    }

    .nx-lesson__curriculum {
        border-top: 1px solid var(--nx-border);
        margin-top: 20px;
        padding-top: 10px;
    }

    .nx-lesson__curriculum > summary {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: 15px;
        justify-content: space-between;
        list-style: none;
        min-height: 48px;
    }

    .nx-lesson__curriculum > summary::-webkit-details-marker {
        display: none;
    }

    .nx-lesson__curriculum > summary span {
        color: #ddd6ff;
        font-weight: 700;
    }

    .nx-lesson__curriculum > summary strong {
        color: #8fa0b8;
        font-size: 13px;
    }

    .nx-lesson__curriculum nav {
        grid-template-columns: 1fr 1fr;
        margin: 8px 0 18px;
    }

    .nx-lesson__article {
        padding: clamp(28px, 7vw, 48px);
    }

    .nx-basket__layout {
        display: flex;
        flex-direction: column;
    }

    .nx-basket__selection,
    .nx-basket__summary {
        width: 100%;
    }

    .nx-basket__summary {
        position: static;
    }
}

/* Phones */
@media (max-width: 520px) {
    .nx-library__hero > p:last-child,
    .nx-basket__hero > p:last-child {
        font-size: 16px;
    }

    .nx-library__sidebar nav svg {
        display: block;
    }

    .nx-library__stats {
        grid-template-columns: 1fr;
    }

    .nx-library__stats > article {
        align-items: center;
        display: grid;
        gap: 12px;
        grid-template-columns: 52px 1fr;
        min-height: 90px;
        padding: 18px;
    }

    .nx-library__stats strong {
        font-size: 32px;
        margin: 0;
    }

    .nx-library__stats article > span:last-child {
        font-size: 14px;
    }

    .nx-library__continue {
        display: block;
        margin-bottom: 38px;
        padding: 20px;
    }

    .nx-library__continue-cover {
        margin-bottom: 22px;
    }

    .nx-library__continue-cover .course-art.compact {
        height: 165px;
    }

    .nx-library__continue-action {
        margin-top: 22px;
        width: 100%;
    }

    .nx-library__section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .nx-library__grid {
        grid-template-columns: 1fr;
    }

    .nx-library__card .course-art {
        height: 205px;
    }

    .nx-library__card h3 {
        min-height: 0;
    }

    .nx-library__record {
        align-items: flex-start;
        flex-direction: column;
    }

    .nx-library__record > b {
        text-align: left;
    }

    .nx-library__banner {
        padding: 25px;
    }

    .nx-lesson__breadcrumbs {
        margin-bottom: 18px;
    }

    .nx-lesson__rail,
    .nx-lesson__article {
        border-radius: 15px;
    }

    .nx-lesson__curriculum nav {
        grid-template-columns: 1fr;
    }

    .nx-lesson__article {
        padding: 25px 21px;
    }

    .nx-lesson__kicker {
        align-items: flex-start;
        flex-direction: column;
    }

    .nx-lesson__article > h1 {
        font-size: clamp(35px, 11vw, 46px);
        margin-top: 21px;
    }

    .nx-lesson__prose {
        font-size: 17px;
        line-height: 1.82;
        margin-top: 30px;
    }

    .nx-lesson__exercise,
    .nx-lesson__reflection {
        padding: 23px 19px;
    }

    .nx-lesson__pager {
        grid-template-columns: 1fr;
    }

    .nx-lesson__pager a:last-child {
        border-top: 1px solid var(--nx-border);
        justify-content: flex-end;
        padding-top: 15px;
    }

    .nx-lesson__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .nx-lesson__footer form,
    .nx-lesson__footer .button {
        width: 100%;
    }

    .nx-basket__steps li {
        gap: 8px;
        grid-template-columns: 30px 1fr;
        padding: 9px 6px;
    }

    .nx-basket__steps li > span {
        height: 30px;
        width: 30px;
    }

    .nx-basket__steps li:after,
    .nx-basket__steps small {
        display: none;
    }

    .nx-basket__selection,
    .nx-basket__summary {
        padding: 23px 20px;
    }

    .nx-basket__selection-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .nx-basket__selection-heading > p {
        text-align: left;
    }

    .nx-basket__item {
        align-items: start;
        gap: 14px;
        grid-template-columns: 76px minmax(0, 1fr);
        padding: 23px 0;
    }

    .nx-basket__cover .course-art.compact {
        height: 76px;
    }

    .nx-basket__price {
        grid-column: 2;
        justify-self: start;
    }

    .nx-basket__licence-note,
    .nx-basket__format {
        display: block;
    }

    .nx-basket__licence-note:after {
        display: none;
    }
}

/* 320–390px safety */
@media (max-width: 390px) {
    .nx-library__sidebar nav a {
        font-size: 13px;
    }

    .nx-library__hero h1,
    .nx-basket__hero h1 {
        font-size: 39px;
    }

    .nx-library__card .library-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .nx-lesson__article {
        padding-left: 17px;
        padding-right: 17px;
    }

    .nx-lesson__exercise,
    .nx-lesson__reflection {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nx-basket__steps strong {
        font-size: 13px;
    }

    .nx-basket__item-copy h3 {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-library *,
    .nx-library *:before,
    .nx-library *:after,
    .nx-lesson *,
    .nx-lesson *:before,
    .nx-lesson *:after,
    .nx-basket *,
    .nx-basket *:before,
    .nx-basket *:after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}