/*
 * Landing page mobile layout.
 * Keep the hero stable when a mobile browser refreshes or changes its browser chrome.
 */
@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
    }

    /* The desktop Ken Burns animation was restarting as a visible mobile zoom. */
    .hero-bg {
        transform: none;
        animation: none;
        background-position: center center;
    }

    /* Stack the account actions cleanly instead of relying on a line-break inside flex. */
    .hero-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        gap: 0.75rem;
    }

    .hero-btns .btn {
        width: 100%;
        max-width: none;
        min-height: 48px;
        padding: 12px 18px;
        white-space: nowrap;
    }
}