/* =========================================================
   VisuoSight Step 5.1.1 — Responsive Refinement
   Fixes responsive layout precedence from Step 5.1 and stabilizes
   full-page/mobile rendering.
========================================================= */

/*
Step 5.1 was loaded after the original stylesheet. Its desktop grid rules
therefore overrode some responsive rules from site.css.

These min-width guards + explicit breakpoint columns restore predictable
responsive behavior.
*/

.hero-grid > *,
.two-column > *,
.hardware-panel > *,
.security-grid > *,
.pricing-grid > *,
.workflow-grid > * {
    min-width: 0;
}

/*
Disable the translate-based reveal effect from v5.1.
It looked good interactively, but scrolling/full-page capture can catch
elements mid-transition and make the first line of a section look clipped.
*/
.v51-reveal,
.v51-reveal.v51-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1080px) {

    .hero-grid,
    .two-column,
    .hardware-panel,
    .security-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .hero-grid {
        gap: 46px !important;
    }

    .hero-copy,
    .hero-window,
    .section-copy,
    .diagnostic-visual,
    .therapy-visual,
    .hardware-copy,
    .hardware-device {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-window {
        justify-self: stretch;
        margin-inline: auto;
    }

    .two-column {
        gap: 40px !important;
    }

    .reverse-mobile .therapy-visual {
        order: 2;
    }

    .hardware-panel {
        gap: 34px !important;
    }

    .hardware-device {
        min-height: 360px;
    }

    .security-grid {
        gap: 34px !important;
    }
}


/* =========================================================
   TABLET / LARGE PHONE
========================================================= */

@media (max-width: 850px) {

    .pricing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pricing-card {
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
    }

    .pricing-card.featured,
    .pricing-card.featured:hover {
        transform: none !important;
    }

    .security-cards {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .security-cards article {
        width: 100%;
    }

    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    body {
        overflow-x: hidden;
    }

    .hero {
        overflow: hidden;
    }

    /*
    Force a vertical hero. This is the key correction visible in the
    supplied phone screenshot.
    */
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
    }

    .hero-copy,
    .hero-window {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-copy {
        order: 1;
    }

    .hero-window {
        order: 2;
        margin: 0 !important;
    }

    .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(37px, 11.5vw, 47px) !important;
        line-height: .98 !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero-lead {
        max-width: 100%;
        font-size: 14px;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-proof {
        max-width: 100% !important;
    }

    /*
    Keep the product preview contained inside the phone viewport.
    */
    .hero-window,
    .product-window {
        overflow: hidden;
        border-radius: 18px;
    }

    .window-body {
        display: block !important;
        width: 100%;
        min-height: 0 !important;
    }

    .preview-sidebar {
        display: none !important;
    }

    .preview-main {
        width: 100%;
        min-width: 0;
        padding: 10px;
    }

    .patient-strip {
        width: 100%;
        min-width: 0;
    }

    .patient-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    .metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .metric-card {
        min-width: 0;
    }

    .preview-panels {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /*
    Make all major marketing layouts explicitly single-column so later
    desktop overrides can never leak into the phone layout again.
    */
    .two-column,
    .hardware-panel,
    .security-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .workflow-grid,
    .pricing-grid,
    .security-cards,
    .diagnostic-grid,
    .check-grid,
    .hardware-points,
    .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .workflow-card,
    .pricing-card,
    .diagnostic-card,
    .security-cards article {
        min-width: 0;
    }

    /*
    Preserve visual ordering: text first for Diagnostics, text first for
    Quick Office, then its interactive visual.
    */
    #diagnostics .section-copy {
        order: 1;
    }

    #diagnostics .diagnostic-visual {
        order: 2;
    }

    #quick-office .section-copy {
        order: 1;
    }

    #quick-office .therapy-visual {
        order: 2;
    }

    /*
    Hardware reads better with copy first, device second.
    */
    .hardware-copy {
        order: 1;
    }

    .hardware-device {
        order: 2;
        min-height: 285px !important;
    }

    /*
    Pricing cards should feel like individual mobile cards rather than
    compressed desktop columns.
    */
    .pricing-card {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /*
    Keep CTA/header areas inside viewport.
    */
    .final-cta-inner {
        width: 100%;
    }

    .footer-grid,
    .footer-links {
        min-width: 0;
    }

    .footer-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
    Stop long content from creating a horizontal page scroll.
    */
    .hero *,
    .section *,
    .final-cta *,
    .site-footer * {
        max-width: 100%;
    }

    /*
    Exclusions where fixed visual dimensions are intentional.
    */
    .brand-mark,
    .mini-logo,
    .feature-icon,
    .diagnostic-dot,
    .therapy-center,
    .device-camera,
    .loader-dot {
        max-width: none;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 390px) {

    .hero-copy h1 {
        font-size: 36px !important;
    }

    .hero-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .metric-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .final-cta-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .footer-links {
        grid-template-columns: minmax(0, 1fr);
    }
}