@media (max-width: 900px) {
    :root {
        --page-pad: 20px;
        --header-sticky-top: 108px;
    }

    .header-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo actions"
            "seg seg";
        padding: 12px var(--page-pad);
        background: var(--bg-main);
        row-gap: 10px;
    }
    .logo { grid-area: logo; grid-column: auto; grid-row: auto; }
    .seg {
        grid-area: seg;
        grid-column: auto;
        grid-row: auto;
        justify-self: stretch;
        position: static;
        left: auto;
        transform: none;
        z-index: 1;
    }
    .header-actions {
        grid-area: actions;
        grid-column: auto;
        grid-row: auto;
        margin-left: 0;
    }
    .logo-title { font-size: 16px; }
    .seg-track { width: 100%; }
    .seg-btn {
        flex: 1;
        padding: 10px 12px;
        font-size: 13px;
        justify-content: center;
    }

    .guide-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .guide-hero h1 { max-width: none; }
    @media (max-width: 900px) {
        .guide-progress-num { justify-content: flex-start; }
    }

    .profile-bar {
        grid-template-columns: 1fr 1fr;
    }

    .studio {
        grid-template-columns: 1fr;
    }
    .map-card {
        order: -1;
        position: sticky;
        top: var(--header-sticky-top, 108px);
        z-index: 8;
        min-height: 0;
        max-height: none;
        overflow: visible;
        padding: 12px 14px;
        gap: 8px;
        border-radius: 20px;
    }
    .map-kicker {
        margin: 0;
        font-size: 10px;
    }
    .plan-rail {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }
    .plan-rail-row {
        min-height: 44px;
        min-width: 44px;
        width: auto;
        padding: 8px 10px;
        flex: 0 0 auto;
        gap: 0;
        justify-content: center;
    }
    .plan-rail-body,
    .plan-rail-icon { display: none; }
    .plan-rail-num {
        font-size: 15px;
        width: auto;
        letter-spacing: 0;
    }
    .map-card .plan-note {
        display: block;
        padding: 10px 12px;
        margin-top: 0;
        border-radius: 12px;
    }
    .map-card .plan-note-kicker {
        margin: 0 0 4px;
        font-size: 10px;
    }
    .map-card .plan-note-body {
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
    }
    .step-card, .map-card { min-height: 0; }
    .step-card-inner { padding-left: 20px; padding-right: 20px; }
    .export-bar { margin: 0 12px 16px; padding: 12px 14px; }
    .step-card::after { width: 80px; opacity: 0.6; }
    .official-cta { width: 100%; justify-content: center; }
    .plan-doc-foot {
        grid-template-columns: 1fr;
    }
    .plan-doc-verified,
    .action-btn,
    .source-links {
        grid-column: 1;
        grid-row: auto;
    }
    .action-btn { justify-self: stretch; }
    .hop-clicks-list { margin-left: 40px; }
    .plan-doc-hops.is-under-cta { padding-left: 12px; }

    .faq-split { display: flex; flex-direction: column; gap: 16px; }
}

@media (max-width: 420px) {
    .seg-btn { font-size: 12px; padding: 10px 8px; }
    .profile-bar { grid-template-columns: 1fr; }
}