@media (max-width: 900px) {
    .nav-shell {
        grid-template-columns: auto auto;
    }

    .icon-button {
        display: inline-block;
        justify-self: end;
    }

    .site-nav,
    .nav-actions {
        grid-column: 1 / -1;
        display: none;
        width: 100%;
    }

    .site-nav.is-open {
        display: grid;
        justify-content: stretch;
        gap: 10px;
        padding-bottom: 12px;
    }

    .nav-shell:has(.site-nav.is-open) .nav-actions {
        display: flex;
        padding-bottom: 14px;
    }

    .hero-grid,
    .split-section,
    .content-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 36px;
    }

    .content-grid {
        padding-top: 24px;
    }

    .card-grid,
    .compact-grid,
    .pricing-grid {
        grid-template-columns: 1fr 1fr;
    }

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

@media (max-width: 620px) {
    .container,
    .narrow {
        width: min(100% - 24px, 1120px);
    }

    .hero-copy h1,
    .page-hero h1 {
        font-size: 40px;
    }

    .card-grid,
    .compact-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .article-body,
    .panel,
    .auth-card,
    .status-card,
    .side-panel {
        padding: 18px;
    }

    .message-stack {
        left: 12px;
        right: 12px;
    }
}