.article-course-pathway {
    --course-pathway-ink: #17322b;
    --course-pathway-muted: #52665a;
    --course-pathway-lime: #ccf45d;
    --course-pathway-lime-soft: #f4ffda;
    --course-pathway-line: #d2e99c;
    position: relative;
    isolation: isolate;
    margin: 3rem 0;
    padding: 1.4rem;
    overflow: hidden;
    border: 1px solid var(--course-pathway-line);
    border-radius: 1.1rem;
    background: var(--course-pathway-lime-soft);
    box-shadow: 0 18px 36px rgba(61, 92, 21, 0.11);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.article-course-pathway::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.42rem;
    background: var(--course-pathway-lime);
    content: '';
    transform: scaleY(0.34);
    transform-origin: center;
    transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.article-course-pathway.is-revealed::before {
    transform: scaleY(1);
}

.article-course-pathway__spark {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(23, 50, 43, 0.08);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.56);
    color: #527114;
    pointer-events: none;
}

.article-course-pathway__spark svg {
    width: 0.98rem;
    height: 0.98rem;
}

.article-course-pathway__lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding-right: 2.25rem;
    transition: opacity 420ms ease 140ms, transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
}

.article-course-pathway__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    background: var(--course-pathway-lime);
    color: var(--course-pathway-ink);
    box-shadow: 0 8px 16px rgba(91, 119, 24, 0.16);
}

.article-course-pathway__icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.article-course-pathway__label,
.article-course-pathway__course-label {
    margin: 0;
    color: #527114;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.article-course-pathway__heading {
    margin: 0.28rem 0 0;
    color: var(--course-pathway-ink);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: 1.2;
}

.article-course-pathway__body {
    margin: 0.55rem 0 0;
    max-width: 44rem;
    color: var(--course-pathway-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

.article-course-pathway__course {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: end;
    margin-top: 1.35rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(127, 168, 45, 0.34);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: opacity 420ms ease 240ms, transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 240ms;
}

.article-course-pathway__course-title {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--course-pathway-ink);
    font-size: 1.03rem;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
}

.article-course-pathway__course-title:hover {
    color: #365216;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.article-course-pathway__course-description {
    margin: 0.36rem 0 0;
    color: var(--course-pathway-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.article-course-pathway__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: var(--course-pathway-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.article-course-pathway__duration svg {
    width: 0.9rem;
    height: 0.9rem;
}

.article-course-pathway__actions {
    display: grid;
    gap: 0.55rem;
    min-width: 10rem;
}

.article-course-pathway__details,
.article-course-pathway__join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 2.7rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.72rem;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.article-course-pathway__details {
    border: 1px solid #bfdc78;
    background: #ffffff;
    color: var(--course-pathway-ink);
}

.article-course-pathway__join {
    background: var(--course-pathway-ink);
    color: #ffffff;
}

.article-course-pathway__details:hover {
    border-color: #8fba2f;
    background: #fbffef;
    box-shadow: 0 7px 15px rgba(61, 92, 21, 0.1);
}

.article-course-pathway__join:hover {
    background: #24463a;
    box-shadow: 0 8px 16px rgba(23, 50, 43, 0.18);
}

.article-course-pathway__details:active,
.article-course-pathway__join:active {
    transform: translateY(1px) scale(0.985);
}

.article-course-pathway__details:focus-visible,
.article-course-pathway__join:focus-visible,
.article-course-pathway__course-title:focus-visible {
    outline: 2px solid var(--course-pathway-ink);
    outline-offset: 3px;
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, 1.35rem, 0) scale(0.985);
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__lead,
html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__course {
    opacity: 0;
    transform: translate3d(0, 0.65rem, 0);
}

@media (prefers-reduced-motion: no-preference) {
    .article-course-pathway.is-revealed .article-course-pathway__icon {
        animation: coursePathwayIconFloat 3.8s cubic-bezier(0.45, 0, 0.55, 1) 820ms 2 both;
    }

    .article-course-pathway.is-revealed .article-course-pathway__spark {
        animation: coursePathwaySparkFloat 3.4s cubic-bezier(0.45, 0, 0.55, 1) 980ms 2 both;
    }

    .article-course-pathway__join:hover svg {
        transform: translate3d(0.16rem, 0, 0);
    }

    .article-course-pathway__join svg {
        transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes coursePathwayIconFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, -0.28rem, 0) rotate(-2deg); }
}

@keyframes coursePathwaySparkFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0.18rem, -0.18rem, 0) rotate(8deg); }
}

@media (max-width: 640px) {
    .article-course-pathway {
        margin: 2.1rem 0;
        padding: 1.2rem;
    }

    .article-course-pathway__course {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.92rem;
    }

    .article-course-pathway__actions {
        grid-template-columns: 1fr 1fr;
        min-width: 0;
    }

    .article-course-pathway__details,
    .article-course-pathway__join {
        padding-inline: 0.5rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 430px) {
    .article-course-pathway__actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-course-pathway,
    .article-course-pathway::before,
    .article-course-pathway__lead,
    .article-course-pathway__course,
    .article-course-pathway__icon,
    .article-course-pathway__spark,
    .article-course-pathway__details,
    .article-course-pathway__join {
        animation: none !important;
        transition: none !important;
    }

    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed),
    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__lead,
    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__course {
        opacity: 1;
        transform: none;
    }
}

/* The course invitation is an editorial strip, not a card nested inside the article. */
.article-course-pathway {
    --course-pathway-ink: #0b1730;
    --course-pathway-muted: #52606d;
    --course-pathway-lime: #c8ff24;
    position: relative;
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    isolation: isolate;
    margin: 3.5rem 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.article-course-pathway::before {
    display: none;
}

.article-course-pathway__rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 13.25rem;
    padding: 1.1rem 0;
    overflow: hidden;
    background: var(--course-pathway-lime);
}

.article-course-pathway__motif {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--course-pathway-ink);
}

.article-course-pathway__motif svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.35;
}

.article-course-pathway__motif--cap svg {
    width: 2.25rem;
    height: 2.25rem;
}

.article-course-pathway__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11.25rem, 13.5rem);
    gap: 1.75rem;
    align-items: center;
    min-height: 13.25rem;
    padding: 1.5rem 0 1.5rem 1.55rem;
    border-top: 1px solid #d8dde5;
    border-bottom: 1px solid #d8dde5;
    background: transparent;
    transition: opacity 420ms ease 140ms, transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
}

.article-course-pathway__copy {
    min-width: 0;
}

.article-course-pathway__label {
    margin: 0;
    color: #506f12;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.article-course-pathway__prompt {
    margin: 0.45rem 0 0;
    color: var(--course-pathway-ink);
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.35;
}

.article-course-pathway__heading {
    margin: 0.45rem 0 0;
    color: var(--course-pathway-ink);
    font-size: clamp(1.32rem, 2.55vw, 1.8rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.article-course-pathway__heading a {
    color: var(--course-pathway-ink) !important;
    text-decoration: none !important;
}

.article-course-pathway__heading a:hover {
    text-decoration: underline;
    text-decoration-color: var(--course-pathway-lime);
    text-decoration-thickness: 0.18em;
    text-underline-offset: 0.14em;
}

.article-course-pathway__course-description,
.article-course-pathway__body {
    margin: 0.58rem 0 0;
    max-width: 42rem;
    color: var(--course-pathway-muted);
    font-size: 0.91rem;
    line-height: 1.58;
}

.article-course-pathway__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
    padding-left: 1.35rem;
    border-left: 1px solid #d8dde5;
}

.article-course-pathway__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin: 0 0 0.35rem;
    color: #46515f;
    font-size: 0.78rem;
    font-weight: 750;
}

.article-course-pathway__duration svg {
    width: 0.92rem;
    height: 0.92rem;
    color: #597b13;
}

.article-course-pathway__join,
.article-course-pathway__details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.9rem;
    padding: 0.66rem 0.85rem;
    border: 0;
    border-radius: 0.35rem;
    font-size: 0.83rem;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.article-course-pathway__join {
    order: 1;
    background: var(--course-pathway-ink);
    color: var(--course-pathway-lime) !important;
    text-decoration: none !important;
}

.article-course-pathway__details {
    order: 2;
    justify-content: flex-start;
    padding-inline: 0;
    color: var(--course-pathway-ink) !important;
    text-decoration: underline !important;
    text-decoration-color: #a9d532;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.28em;
}

.article-course-pathway__join:hover {
    background: #172a50;
    box-shadow: none;
}

.article-course-pathway__details:hover {
    border: 0;
    background: transparent;
    color: #405e0c !important;
    box-shadow: none;
}

.article-course-pathway__join:active,
.article-course-pathway__details:active {
    transform: translateY(1px) scale(0.99);
}

.article-course-pathway__heading a:focus-visible,
.article-course-pathway__join:focus-visible,
.article-course-pathway__details:focus-visible {
    outline: 2px solid var(--course-pathway-ink);
    outline-offset: 4px;
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__content {
    opacity: 0;
    transform: translate3d(0, 0.8rem, 0);
}

@media (prefers-reduced-motion: no-preference) {
    .article-course-pathway.is-revealed .article-course-pathway__motif--spark {
        animation: coursePathwaySparkFloat 3.2s ease-in-out 760ms 2 both;
    }

    .article-course-pathway.is-revealed .article-course-pathway__motif--cap {
        animation: coursePathwayCapFloat 3.6s ease-in-out 920ms 2 both;
    }

    .article-course-pathway__join svg,
    .article-course-pathway__details svg {
        transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .article-course-pathway__join:hover svg,
    .article-course-pathway__details:hover svg {
        transform: translate3d(0.18rem, 0, 0);
    }
}

@keyframes coursePathwayCapFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, -0.32rem, 0) rotate(-4deg); }
}

@media (max-width: 640px) {
    .article-course-pathway {
        grid-template-columns: 1fr;
        margin: 2.75rem 0;
    }

    .article-course-pathway__rail {
        flex-direction: row;
        min-height: 3.85rem;
        padding: 0 1.25rem;
    }

    .article-course-pathway__motif--cap svg {
        width: 1.85rem;
        height: 1.85rem;
    }

    .article-course-pathway__content {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        min-height: 0;
        padding: 1.25rem 0 0;
        border-top: 0;
    }

    .article-course-pathway__actions {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.6rem 1rem;
        padding: 1rem 0 0;
        border-top: 1px solid #d8dde5;
        border-left: 0;
    }

    .article-course-pathway__duration {
        grid-column: 1 / -1;
        margin: 0;
    }

    .article-course-pathway__join {
        min-width: 9.25rem;
    }

    .article-course-pathway__details {
        justify-content: flex-end;
        font-size: 0.78rem;
    }
}

@media (max-width: 390px) {
    .article-course-pathway__actions {
        grid-template-columns: 1fr;
    }

    .article-course-pathway__join,
    .article-course-pathway__details {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-course-pathway__content,
    .article-course-pathway__motif,
    .article-course-pathway__join,
    .article-course-pathway__details {
        animation: none !important;
        transition: none !important;
    }

    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__content {
        opacity: 1;
        transform: none;
    }
}

/* Course facts strip: the article stays editorial; the useful course facts own the right-hand signal. */
.article-course-pathway {
    --course-pathway-ink: #0b1730;
    --course-pathway-muted: #52606d;
    --course-pathway-lime: #c8ff24;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 14.5rem);
    width: calc(100% + 8rem);
    margin: 3.5rem -4rem;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.article-course-pathway__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 14.25rem;
    padding: 1.65rem 1.9rem 1.65rem 4rem;
    border-top: 1px solid #d8dde5;
    border-bottom: 1px solid #d8dde5;
    border-left: 1px solid #d8dde5;
    background: #ffffff;
    overflow: hidden;
    isolation: isolate;
}

.article-course-pathway__copy > * {
    position: relative;
    z-index: 1;
}

.article-course-pathway__copy::before {
    position: absolute;
    bottom: -5.7rem;
    left: -22%;
    width: 78%;
    height: 9.5rem;
    border-radius: 48% 52% 0 0 / 70% 74% 0 0;
    background: rgba(100, 116, 139, 0.16);
    content: '';
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-58%, 0.8rem, 0) rotate(-4deg);
}

.article-course-pathway__copy::after {
    position: absolute;
    right: -28%;
    bottom: -6.6rem;
    width: 78%;
    height: 10rem;
    border-radius: 52% 48% 0 0 / 74% 70% 0 0;
    background: rgba(148, 163, 184, 0.13);
    content: '';
    opacity: 0;
    pointer-events: none;
    transform: translate3d(55%, 1.1rem, 0) rotate(5deg);
}

.article-course-pathway__heading {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    line-height: 1.08;
}

.article-course-pathway__heading a:hover {
    color: var(--course-pathway-ink) !important;
    text-decoration-color: var(--course-pathway-lime);
}

.article-course-pathway__course-description {
    margin: 0.7rem 0 0;
    max-width: 39rem;
}

.article-course-pathway__signal {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 14.25rem;
    padding: 1.2rem;
    overflow: hidden;
    border-top: 1px solid #d8dde5;
    border-right: 1px solid #d8dde5;
    border-bottom: 1px solid #d8dde5;
    color: var(--course-pathway-ink);
    background: var(--course-pathway-lime);
}

.article-course-pathway__motif {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    color: var(--course-pathway-ink);
    opacity: 0.9;
}

.article-course-pathway__motif--spark {
    top: 1rem;
    right: 1rem;
}

.article-course-pathway__facts {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.6rem;
    padding-right: 2rem;
}

.article-course-pathway__fact {
    display: grid;
    gap: 0.14rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(11, 23, 48, 0.22);
}

.article-course-pathway__fact span {
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.article-course-pathway__fact strong {
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.3;
}

.article-course-pathway__actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    border: 0;
}

.article-course-pathway__join,
.article-course-pathway__details {
    width: 100%;
    min-height: 2.7rem;
    border-radius: 0.25rem;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, color 180ms ease, text-decoration-color 180ms ease;
}

.article-course-pathway__join {
    background: var(--course-pathway-ink);
    color: var(--course-pathway-lime) !important;
}

.article-course-pathway__details {
    justify-content: center;
    min-height: 1.65rem;
    padding: 0.1rem 0;
    color: var(--course-pathway-ink) !important;
    text-decoration-color: rgba(11, 23, 48, 0.58) !important;
}

.article-course-pathway__join:hover {
    background: #ffffff;
    color: var(--course-pathway-ink) !important;
    transform: translate3d(0, -1px, 0);
}

.article-course-pathway__details:hover {
    background: transparent;
    color: var(--course-pathway-ink) !important;
    text-decoration-color: var(--course-pathway-ink) !important;
    text-decoration-thickness: 2px !important;
    transform: none;
}

.article-course-pathway__join:active {
    background: #b4e720;
    color: var(--course-pathway-ink) !important;
    transform: translate3d(0, 1px, 0);
}

.article-course-pathway__details:active {
    opacity: 0.7;
    transform: none;
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__copy,
html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__signal {
    opacity: 0;
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__copy {
    transform: translate3d(-0.8rem, 0, 0);
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__signal {
    transform: translate3d(1.1rem, 0, 0) scale(0.965);
}

html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__fact,
html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__actions {
    opacity: 0;
    transform: translate3d(0, 0.45rem, 0);
}

.article-course-pathway__copy,
.article-course-pathway__signal {
    transition: opacity 360ms ease 90ms, transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 90ms;
}

.article-course-pathway__signal {
    transition-delay: 180ms;
}

.article-course-pathway__fact,
.article-course-pathway__actions {
    transition: opacity 320ms ease 360ms, transform 460ms cubic-bezier(0.16, 1, 0.3, 1) 360ms;
}

.article-course-pathway__fact:nth-child(2) {
    transition-delay: 430ms;
}

.article-course-pathway__actions {
    transition-delay: 510ms;
}

@media (prefers-reduced-motion: no-preference) {
    .article-course-pathway.is-revealed .article-course-pathway__copy::before {
        animation: coursePathwayCopyWaveLeft 9.2s cubic-bezier(0.45, 0, 0.55, 1) 170ms infinite;
    }

    .article-course-pathway.is-revealed .article-course-pathway__copy::after {
        animation: coursePathwayCopyWaveRight 11.4s cubic-bezier(0.45, 0, 0.55, 1) 480ms infinite;
    }

    .article-course-pathway.is-revealed .article-course-pathway__motif--spark {
        animation: coursePathwaySparkFloat 3.2s ease-in-out 760ms 2 both;
    }

}

@media (max-width: 640px) {
    .article-course-pathway {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 2.25rem 0;
    }

    .article-course-pathway__copy {
        min-height: 0;
        padding: 1.15rem 1rem;
    }

    .article-course-pathway__signal {
        min-height: 0;
        gap: 1.2rem;
        padding: 1.15rem;
        border-top: 0;
        border-left: 1px solid #d8dde5;
    }

    .article-course-pathway__facts {
        grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
        gap: 1rem;
        padding-right: 2.75rem;
    }

    .article-course-pathway__fact {
        min-width: 0;
    }

    .article-course-pathway__actions {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.8rem;
    }

    .article-course-pathway__details {
        width: auto;
        padding-inline: 0.25rem;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .article-course-pathway {
        width: calc(100% + 6rem);
        margin-inline: -3rem;
    }

    .article-course-pathway__copy {
        padding-left: 3rem;
    }
}

@media (max-width: 390px) {
    .article-course-pathway__facts,
    .article-course-pathway__actions {
        grid-template-columns: 1fr;
    }

    .article-course-pathway__details {
        width: 100%;
    }
}

@keyframes coursePathwayCopyWaveLeft {
    0% { opacity: 0; transform: translate3d(-58%, 0.8rem, 0) rotate(-4deg); }
    12% { opacity: 0.16; transform: translate3d(-18%, 0.1rem, 0) rotate(-1deg); }
    42% { opacity: 0.11; transform: translate3d(34%, -0.7rem, 0) rotate(2deg); }
    70% { opacity: 0.15; transform: translate3d(8%, 0.5rem, 0) rotate(-2deg); }
    100% { opacity: 0; transform: translate3d(-58%, 0.8rem, 0) rotate(-4deg); }
}

@keyframes coursePathwayCopyWaveRight {
    0% { opacity: 0; transform: translate3d(55%, 1.1rem, 0) rotate(5deg); }
    13% { opacity: 0.12; transform: translate3d(18%, 0.35rem, 0) rotate(2deg); }
    46% { opacity: 0.09; transform: translate3d(-38%, -0.55rem, 0) rotate(-2deg); }
    74% { opacity: 0.13; transform: translate3d(-7%, 0.6rem, 0) rotate(1deg); }
    100% { opacity: 0; transform: translate3d(55%, 1.1rem, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .article-course-pathway__copy,
    .article-course-pathway__signal,
    .article-course-pathway__motif,
    .article-course-pathway__join,
    .article-course-pathway__details {
        animation: none !important;
        transition: none !important;
    }

    .article-course-pathway__copy::before,
    .article-course-pathway__copy::after {
        animation: none !important;
    }

    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__copy,
    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__signal {
        opacity: 1;
        transform: none;
    }

    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__fact,
    html.course-pathway-motion-ready .article-course-pathway:not(.is-revealed) .article-course-pathway__actions {
        opacity: 1;
        transform: none;
    }
}

.blog-translation-card {
    position: relative;
}

.blog-translation-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.blog-translation-toolbar__label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-translation-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.blog-language-switch {
    --switch-thumb-x: 0%;
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 5.85rem;
    min-height: 2.35rem;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    overflow: hidden;
}

.blog-language-switch:hover {
    border-color: #bfdbfe;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 18px rgba(37, 99, 235, 0.1);
}

.blog-language-switch:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.blog-language-switch:disabled {
    cursor: wait;
    opacity: 0.82;
}

.blog-language-switch__option {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    transition: color 220ms ease;
}

.blog-language-switch__thumb {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 1;
    width: calc(50% - 0.25rem);
    height: calc(100% - 0.5rem);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
    transform: translate3d(var(--switch-thumb-x), 0, 0) scaleX(1);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms ease;
    transform-origin: center;
}

.blog-language-switch__bridge {
    position: absolute;
    top: 0.34rem;
    bottom: 0.34rem;
    left: 0.58rem;
    right: 0.58rem;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(191, 219, 254, 0.78), rgba(255, 255, 255, 0.1));
    filter: blur(0.3px);
    opacity: 0;
    transform: scaleX(0.24);
    transform-origin: left center;
    pointer-events: none;
}

.blog-language-switch[aria-checked="false"] .blog-language-switch__option:first-child,
.blog-language-switch[aria-checked="true"] .blog-language-switch__option:nth-child(2) {
    color: #0f172a;
}

.blog-language-switch[aria-checked="true"] {
    --switch-thumb-x: calc(100% + 0.02rem);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.blog-language-switch.is-switching-to-vi .blog-language-switch__thumb {
    animation: blogSwitchSpringToVi 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.blog-language-switch.is-switching-to-en .blog-language-switch__thumb {
    animation: blogSwitchSpringToEn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.blog-language-switch.is-switching-to-vi .blog-language-switch__bridge {
    animation: blogSwitchBridgeToVi 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.blog-language-switch.is-switching-to-en .blog-language-switch__bridge {
    animation: blogSwitchBridgeToEn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.blog-translation-stage {
    position: relative;
    overflow: visible;
    background: #ffffff;
    isolation: isolate;
}

.blog-translation-stage.is-switching {
    overflow: hidden;
}

.blog-translation-old-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    pointer-events: none;
    will-change: clip-path;
}

.blog-translation-new-layer {
    position: relative;
    z-index: 2;
    background: #ffffff;
    will-change: clip-path;
}

.blog-translation-sweep-edge {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: 2.6rem;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 42%,
        rgba(219, 234, 254, 0.45) 56%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(0.5px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -2.6rem, 0);
    will-change: transform, opacity;
}

@keyframes blogSwitchSpringToVi {
    0% {
        transform: translate3d(0, 0, 0) scaleX(1);
    }

    38% {
        transform: translate3d(48%, 0, 0) scaleX(1.46);
    }

    70% {
        transform: translate3d(calc(100% + 0.02rem), 0, 0) scaleX(0.88);
    }

    100% {
        transform: translate3d(calc(100% + 0.02rem), 0, 0) scaleX(1);
    }
}

@keyframes blogSwitchSpringToEn {
    0% {
        transform: translate3d(calc(100% + 0.02rem), 0, 0) scaleX(1);
    }

    38% {
        transform: translate3d(54%, 0, 0) scaleX(1.46);
    }

    70% {
        transform: translate3d(0, 0, 0) scaleX(0.88);
    }

    100% {
        transform: translate3d(0, 0, 0) scaleX(1);
    }
}

@keyframes blogSwitchBridgeToVi {
    0% {
        opacity: 0;
        transform: translate3d(-26%, 0, 0) scaleX(0.2);
        transform-origin: left center;
    }

    42% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0) scaleX(1);
        transform-origin: left center;
    }

    100% {
        opacity: 0;
        transform: translate3d(38%, 0, 0) scaleX(0.18);
        transform-origin: right center;
    }
}

@keyframes blogSwitchBridgeToEn {
    0% {
        opacity: 0;
        transform: translate3d(26%, 0, 0) scaleX(0.2);
        transform-origin: right center;
    }

    42% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0) scaleX(1);
        transform-origin: right center;
    }

    100% {
        opacity: 0;
        transform: translate3d(-38%, 0, 0) scaleX(0.18);
        transform-origin: left center;
    }
}

@media (max-width: 640px) {
    .blog-translation-toolbar {
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .blog-translation-toolbar__controls {
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-language-switch,
    .blog-language-switch__option,
    .blog-language-switch__thumb,
    .blog-language-switch__bridge,
    .blog-translation-old-layer,
    .blog-translation-new-layer,
    .blog-translation-sweep-edge {
        animation: none !important;
        transition: none !important;
    }
}