/* Desktop layout only. Must not affect the phone layout. */
@media (min-width: 960px) {
    html, body { overflow-x: hidden; }

    /* ── shared nav: hide hamburger, restyle existing .menu into a compact bar ── */
    .hamburger { display: none !important; }
    .menu-overlay { display: none !important; }
    html.menu-open, body.menu-open { overflow-x: hidden; overflow-y: auto; position: static; }

    .menu,
    .menu.active {
        position: static;
        top: auto;
        right: auto;
        transform: none !important;
        width: auto;
        height: auto;
        max-height: none;
        max-width: none;
        overflow: visible;
        padding: 0;
        background: transparent;
        background-image: none;
        border: none;
        border-left: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 50;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.08rem 0.12rem;
    }

    .menu-title,
    .menu-sep { display: none; }

    .menu a,
    .menu a.menu-branch {
        display: inline-block;
        padding: 0.28rem 0.48rem;
        margin: 0;
        background: transparent;
        background-image: none;
        border: none;
        border-radius: 6px;
        font-size: 0.72rem;
        line-height: 1.25;
        letter-spacing: 0.1px;
        white-space: nowrap;
        color: #fff;
    }
    .menu a.menu-branch { line-height: 1.25; }
    .menu a.menu-branch span { display: none; }
    .menu a:hover,
    .menu a.menu-branch:hover {
        transform: none;
        background: rgba(212, 169, 94, 0.14);
        background-image: none;
        border: none;
        box-shadow: none;
        color: var(--accent);
    }

    /* Homepage: menu is a sibling of .page — full-width slim strip at the top */
    body > .menu,
    body > .menu.active {
        width: 100%;
        justify-content: center;
        padding: 0.62rem 1.4rem;
        background: rgba(7, 9, 16, 0.72);
        border-bottom: 1px solid rgba(212, 169, 94, 0.24);
    }

    /* Inner pages: logo left, links wrap beside / under it */
    nav {
        max-width: 1120px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0.55rem 1.5rem 0.7rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.2rem 0.7rem;
    }
    nav .nav-logo { flex: 0 0 auto; }
    nav .menu,
    nav .menu.active {
        flex: 1 1 16rem;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-end;
    }

    /* ── homepage ── */
    .page {
        max-width: 1120px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
        align-items: center;
    }
    .equalizer {
        max-width: 720px;
        width: 100%;
    }
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
        gap: 1.6rem 2.8rem;
        align-items: center;
        width: 100%;
        max-width: 1120px;
        margin: 0 0 0.4rem;
    }
    .hero-copy { text-align: left; min-width: 0; }
    .hero-copy .logo,
    .hero-copy h1.logo,
    .hero-copy .tagline,
    .hero-copy .tagline-kicker,
    .hero-copy .hero-buy { text-align: left; }
    .hero-copy .heartbeat-wrap { margin-left: 0; margin-right: auto; }
    .hero-sample,
    .hero-sample.portrait {
        width: 100%;
        max-width: 380px;
        margin: 0;
        justify-self: end;
    }

    .options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
        max-width: 1120px;
        width: 100%;
    }
    .options .opt-btn:nth-child(5) { grid-column: 1 / -1; }

    .review,
    .forme {
        max-width: 760px;
        width: 100%;
    }
    .moment-section { width: 100%; }
    .moment-video {
        width: 100%;
        max-width: 720px;
    }
    .branch {
        max-width: 720px;
        width: 100%;
    }

    /* ── inner pages ── */
    .container {
        max-width: 1120px;
    }
    .banner { height: 340px; }
    .banner h1 { font-size: 3.15rem; }

    .song-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }
    .paths {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
    .rec-pair {
        max-width: 880px;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }
    .logo-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem 1.1rem;
        max-width: 1120px;
    }
    .logo-list .logo-row { margin-bottom: 0; }

    .form-card {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* thanks / 404 — slightly wider reading column */
    .wrap {
        max-width: 720px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .wrap p { max-width: 560px; }
}

@media (min-width: 960px) {
    .reaction-frame { width: 280px; }
    .reaction-proof { max-width: 640px; margin-left: auto; margin-right: auto; }
}