@media (min-width: 768px) {
    .steps,
    .mode-grid,
    .safety-grid,
    .site-footer__inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .safety-grid {
        margin-top: var(--space-6);
    }

    .band--split,
    .compat {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .top-nav__links,
    .top-nav__search,
    .profile-link__label {
        display: flex;
    }

    .bottom-nav:not(.bottom-nav--inline) {
        display: none;
    }

    .app-main {
        padding-bottom: var(--space-16);
    }

    .discover-layout,
    .settings-layout,
    .profile-layout {
        align-items: start;
    }

    .discover-layout > *,
    .settings-layout > *,
    .profile-layout > * {
        min-width: 0;
    }

    .discover-layout {
        grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    }

    .settings-layout {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .profile-layout {
        grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
    }

    .app--conversation .app-main {
        padding-bottom: var(--space-8);
    }

    .chat-shell {
        display: grid;
        grid-template-columns: 300px 1fr;
        min-height: 70vh;
    }

    .chat-thread--placeholder,
    .chat-thread {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        border-left: 1px solid var(--color-border);
    }

    .chat-thread__empty {
        display: grid;
        place-items: center;
        flex: 1;
        padding: var(--space-6);
        text-align: center;
    }

    .chat-thread__body {
        flex: 1;
    }

    .admin-shell {
        grid-template-columns: 240px 1fr;
    }

    .admin-sidebar {
        border-bottom: 0;
        border-right: 1px solid var(--color-border);
    }

    .admin-sidebar nav {
        display: grid;
    }

    .hero {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        min-height: calc(100vh - var(--nav-height));
    }

    .hero__stage {
        position: relative;
        min-height: 560px;
    }

    .hero__card--back,
    .hero__card--mid,
    .hero__card--front {
        display: block;
        position: absolute;
        width: min(280px, 70%);
    }

    .hero__card--back { top: 40px; left: 0; z-index: 1; transform: rotate(-6deg); }
    .hero__card--mid { top: 80px; left: 70px; z-index: 2; transform: rotate(3deg); }
    .hero__card--front { top: 0; right: 0; z-index: 3; width: min(320px, 78%); transform: none; }

    .hero__note {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 4;
    }

    .toast-region {
        left: auto;
        right: var(--space-6);
        bottom: var(--space-6);
        width: min(360px, calc(100% - 48px));
    }

    .mode-switch__btn {
        font-size: 0.95rem;
    }
}

@media (max-width: 1023px) {
    .profile-card__media,
    .profile-photos__primary {
        height: min(52vh, 420px);
        aspect-ratio: auto;
    }

    .top-nav__links,
    .top-nav__search,
    .profile-link__label {
        display: none;
    }

    .hero__card--back,
    .hero__card--mid {
        display: none;
    }

    .chat-thread--placeholder {
        display: none;
    }

    .chat-shell--open .chat-list {
        display: none;
    }

    .app--conversation .bottom-nav {
        display: none;
    }

    .app--conversation .app-main {
        width: 100%;
        padding: 0;
    }

    .app--conversation .chat-shell {
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .app--conversation .chat-thread {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }

    .app--conversation .chat-thread__body {
        flex: 1;
    }

    .app--conversation .composer {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }

    .composer__send-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .composer__send-icon {
        display: inline-flex;
    }

    .composer__send {
        width: 44px;
        padding: 0;
    }

    .match-dialog {
        width: 100%;
        max-width: none;
        height: fit-content;
        margin: auto 0 0;
    }

    .match-dialog__card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@media (max-width: 767px) {
    .top-nav__inner {
        flex-wrap: wrap;
    }

    .hero__card--back,
    .hero__card--mid {
        display: none;
    }

    .public-header__nav a:not(.btn) {
        display: none;
    }
}