@media (max-width: 900px) {
    .dash-hero-row {
        grid-template-columns: 1fr;
    }

    /* Tablet: keep the four-across horizontal roadmap, just tighten it a bit. The line's
       left/right inset stays 15.5% (unrelated to circle size), so shrinking the circle here
       only needs --roadmap-circle-size — the line's vertical centering recalculates itself. */
    :root {
        --roadmap-circle-size: 54px;
    }

    .roadmap-node {
        gap: 8px;
        padding: 0 2px 6px;
    }

    .roadmap-node-title {
        font-size: 10.5px;
    }

    .roadmap-node-value {
        font-size: 17px;
    }

    .roadmap-node-detail {
        font-size: 10.5px;
    }

    .dash-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 0;
    }

    .dash-stat {
        border-left: none;
        padding-left: 0;
    }

    .dash-stat:nth-child(odd) {
        border-right: 1px solid var(--dash-border);
        padding-right: 16px;
    }

    .dash-objective-row {
        align-items: flex-start;
    }

    .dash-objective-cta {
        align-self: flex-end;
    }
}

@media (max-width: 600px) {
    /* Mobile: vertical stepper — switch back from the desktop/tablet grid to a flex column, each
       node becomes a row (circle left, text right), and the connecting line rotates to run
       vertically behind the stacked circles. */
    .roadmap-track {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        padding: 0;
    }

    .roadmap-node {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 0;
    }

    .roadmap-node-text {
        align-items: flex-start;
    }

    .roadmap-line {
        top: calc(var(--roadmap-circle-size) / 2 - 1.5px);
        bottom: calc(var(--roadmap-circle-size) / 2 - 1.5px);
        left: calc(var(--roadmap-circle-size) / 2 - 1.5px);
        right: auto;
        width: 3px;
        height: auto;
        flex-direction: column;
    }

    .auth-card {
        padding: 22px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .course-grid {
        grid-template-columns: 1fr;
    }

    .dash-card {
        padding: 18px;
    }

    .dash-stats-strip {
        padding: 16px;
    }

    .nitro-hero {
        padding: 20px;
    }

    .nitro-hero-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .nitro-hero-next {
        width: 100%;
    }

    .dash-continue-cta,
    .dash-continue-cta.btn {
        width: 100%;
    }

    .dash-objective-row {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-icon-circle {
        align-self: flex-start;
    }

    .dash-objective-cta,
    .dash-objective-cta.btn {
        align-self: stretch;
        width: 100%;
    }

    .nitro-trail-step {
        padding: 0 2px;
        gap: 3px;
    }

    .nitro-trail-step:not(:last-child)::after {
        top: 14px;
    }

    .nitro-trail-name {
        font-size: 10px;
    }

    .nitro-trail-tag,
    .nitro-trail-check {
        font-size: 8px;
    }
}