/* Keep plan selection responsive on phones. The registration hero retains the
   office photo; the long form no longer repaints a fixed full-page photo. */
@media (max-width: 780px) {
    html:has(.solo-enroll) {
        scroll-behavior: auto;
    }

    .solo-enroll {
        background: #0b0b0a;
    }

    .solo-enroll::before,
    .solo-enroll::after {
        display: none;
    }

    .solo-enroll-steps,
    .solo-enroll-capabilities span {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .solo-enroll-plans > label {
        transition: border-color .12s ease, background-color .12s ease;
    }

    .solo-enroll-plans > label:hover {
        transform: none;
    }

    .solo-enroll-plans > label.featured,
    .solo-enroll-plans label:has(input:checked) {
        box-shadow: none;
    }

    .solo-setup-overlay {
        align-items: end;
        padding: 12px;
        background: rgba(3, 3, 3, .9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .solo-setup-dialog {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        padding: 31px 20px 24px;
        border-radius: 22px;
        animation-duration: .24s;
    }

    .solo-setup-mark {
        width: 68px;
        height: 68px;
        margin: 15px auto;
    }

    .solo-setup-mark img {
        width: 48px;
        height: 48px;
    }

    .solo-setup-dialog p {
        font-size: .76rem;
    }

    .solo-setup-actions {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }
}