/* =========================================================
   VisuoSight Step 5.1.1 FINAL — Pixel-Level Refinement
   Loaded AFTER site.css + visual-refinement-v510.css +
   visual-refinement-v511.css.

   Purpose:
   - refine spacing, type scale, alignment, cards and CTA proportions
   - preserve the responsive fixes from v511
   - keep the site stable and animation-free
========================================================= */

:root{
    --vs-final-text:#14233c;
    --vs-final-muted:#65758c;
    --vs-final-line:#dbe5f1;
    --vs-final-blue:#3169e7;
    --vs-final-blue-deep:#173f7d;
    --vs-final-teal:#12917d;
    --vs-final-panel:#ffffff;
    --vs-final-soft:#f6f9fd;
    --vs-final-shadow:0 16px 42px rgba(24,49,91,.075);
    --vs-final-shadow-strong:0 28px 68px rgba(17,43,84,.13);
}

/* ---------------------------------------------------------
   Global
--------------------------------------------------------- */

html{
    scroll-padding-top:88px;
}

body{
    color:var(--vs-final-text);
    overflow-x:hidden;
}

.shell{
    width:min(1220px,calc(100% - 44px));
}

.section{
    padding:88px 0;
}

.section-heading.centered{
    max-width:790px;
    margin-bottom:36px;
}

.section-heading h2,
.section-copy h2{
    letter-spacing:-.042em;
}

.section-heading p,
.section-copy>p{
    max-width:700px;
    color:var(--vs-final-muted);
}

.eyebrow{
    color:#3d67cf;
    font-size:9px;
    letter-spacing:.165em;
}

.button{
    border-radius:11px;
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

.site-header-inner{
    min-height:74px;
}

.brand-mark{
    width:42px;
    height:42px;
    border-radius:12px;
}

.brand-copy strong{
    font-size:15px;
    letter-spacing:-.025em;
}

.site-nav{
    gap:1px;
}

.site-nav a{
    min-height:40px;
    padding:0 10px;
    font-size:9.5px;
}

.header-signin,
.header-actions .button.small{
    min-height:38px;
    border-radius:9px;
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */

.hero{
    padding:78px 0 72px;
}

.hero-grid{
    grid-template-columns:minmax(0,.93fr) minmax(535px,1.07fr);
    gap:58px;
}

.hero-copy{
    padding-top:3px;
}

.hero-copy h1{
    max-width:670px;
    margin:14px 0 16px;
    font-size:clamp(44px,4.8vw,66px);
    line-height:.975;
}

.hero-lead{
    max-width:600px;
    font-size:15px;
    line-height:1.72;
}

.hero-actions{
    margin-top:24px;
}

.hero-actions .button{
    min-width:128px;
}

.hero-proof{
    margin-top:21px;
    gap:12px 17px;
    font-size:9px;
}

.hero-proof i{
    width:18px;
    height:18px;
}

.hero-window{
    border-radius:22px;
    box-shadow:var(--vs-final-shadow-strong);
}

.hero-window::before{
    height:3px;
}

.window-topbar{
    min-height:62px;
    padding:12px 14px;
}

.window-body{
    grid-template-columns:114px 1fr;
    min-height:388px;
}

.preview-sidebar{
    padding:14px 9px;
}

.preview-side-item{
    min-height:35px;
}

.preview-main{
    padding:12px;
}

.patient-strip{
    padding:11px 12px;
}

.metric-card{
    min-height:76px;
    padding:10px;
}

.preview-panel{
    min-height:132px;
}

/* ---------------------------------------------------------
   Trust strip
--------------------------------------------------------- */

.trust-grid{
    min-height:66px;
}

.trust-grid span{
    font-size:8.7px;
}

/* ---------------------------------------------------------
   Workflow
--------------------------------------------------------- */

.workflow-grid{
    gap:13px;
}

.workflow-card{
    min-height:218px;
    padding:20px;
    border-radius:16px;
}

.workflow-card h3{
    margin-top:15px;
    font-size:16px;
}

.workflow-card p{
    font-size:10px;
    line-height:1.62;
}

.feature-icon{
    width:40px;
    height:40px;
}

/* ---------------------------------------------------------
   Diagnostics + Quick Office
--------------------------------------------------------- */

.two-column{
    gap:56px;
}

.check-grid{
    margin:22px 0;
    gap:9px 14px;
}

.check-grid span{
    font-size:9.6px;
}

.diagnostic-visual,
.therapy-visual{
    border-radius:19px;
    box-shadow:var(--vs-final-shadow);
}

.visual-topbar,
.therapy-header{
    min-height:67px;
    padding:14px 16px;
}

.diagnostic-grid{
    gap:8px;
    padding:15px;
}

.diagnostic-card{
    min-height:90px;
    padding:13px;
    border-radius:12px;
}

.diagnostic-card strong{
    font-size:9.7px;
}

.therapy-stage{
    min-height:292px;
}

.therapy-target{
    width:92px;
    height:92px;
    font-size:31px;
}

.therapy-controls span{
    min-height:43px;
}

.feature-points{
    margin-top:21px;
    gap:8px;
}

.feature-points>div{
    padding:11px 13px;
}

.feature-points strong{
    font-size:10.5px;
}

.feature-points span{
    font-size:8.8px;
}

/* ---------------------------------------------------------
   Hardware
--------------------------------------------------------- */

.hardware-section{
    padding:82px 0;
}

.hardware-panel{
    gap:54px;
}

.hardware-copy h2{
    max-width:610px;
    font-size:clamp(31px,3.7vw,46px);
}

.hardware-copy p{
    font-size:13px;
    line-height:1.68;
}

.hardware-points{
    gap:8px 16px;
    margin:20px 0 22px;
}

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

.device-frame{
    width:min(405px,90%);
}

/* ---------------------------------------------------------
   Pricing
--------------------------------------------------------- */

.pricing-section{
    padding-top:84px;
    padding-bottom:92px;
}

.pricing-grid{
    gap:14px;
    max-width:1120px;
    margin-inline:auto;
}

.pricing-card{
    min-height:430px;
    padding:20px;
    border-radius:17px;
}

.pricing-card.featured{
    transform:translateY(-4px);
}

.pricing-card.featured:hover{
    transform:translateY(-6px);
}

.pricing-card h3{
    font-size:18px;
}

.plan-desc{
    min-height:46px;
    font-size:9.4px;
}

.plan-price{
    margin:17px 0 13px;
}

.plan-price-current{
    font-size:26px;
}

.plan-features{
    gap:7px;
    padding:12px;
    border-radius:11px;
}

.plan-feature{
    font-size:8.8px;
}

.plan-cta{
    min-height:41px;
}

/* ---------------------------------------------------------
   Access control
--------------------------------------------------------- */

.security-grid{
    gap:42px;
}

.section-copy.compact h2{
    font-size:34px;
}

.security-cards{
    gap:9px;
}

.security-cards article{
    min-height:168px;
    padding:16px;
    border-radius:13px;
}

.security-cards strong{
    margin-top:18px;
    font-size:10.5px;
}

.security-cards p{
    font-size:8.8px;
    line-height:1.5;
}

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.faq-section{
    padding-top:78px;
    padding-bottom:82px;
}

.faq-list{
    max-width:760px;
    gap:8px;
}

.faq-list details{
    border-radius:11px;
}

.faq-list summary{
    padding:14px 42px 14px 15px;
    font-size:10px;
}

.faq-list details>div{
    padding:0 15px 14px;
    font-size:9.5px;
}

/* ---------------------------------------------------------
   Final CTA + footer
--------------------------------------------------------- */

.final-cta{
    padding:48px 0;
}

.final-cta h2{
    max-width:610px;
    font-size:31px;
}

.final-cta-actions .button{
    min-height:40px;
}

.site-footer{
    padding:42px 0 16px;
}

.footer-grid{
    gap:40px;
}

.footer-brand p{
    max-width:360px;
}

.footer-links{
    gap:54px;
}

.footer-bottom{
    margin-top:28px;
}

/* ---------------------------------------------------------
   Modal
--------------------------------------------------------- */

.demo-modal{
    width:min(640px,100%);
    padding:22px;
    border-radius:18px;
}

.demo-modal h2{
    font-size:25px;
}

.form-grid{
    gap:9px;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
    min-height:41px;
    border-radius:9px;
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media(max-width:1080px){

    .shell{
        width:min(100% - 34px,1120px);
    }

    .section{
        padding:76px 0;
    }

    .hero{
        padding-top:64px;
    }

    .hero-grid{
        gap:38px;
    }

    .hero-copy{
        max-width:760px;
        margin-inline:auto;
        text-align:center;
    }

    .hero-copy h1,
    .hero-lead{
        margin-inline:auto;
    }

    .hero-actions,
    .hero-proof{
        justify-content:center;
    }

    .hero-window{
        max-width:790px;
        margin-inline:auto;
    }

    .hardware-section{
        padding:72px 0;
    }

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

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media(max-width:650px){

    .shell{
        width:min(100% - 22px,1180px);
    }

    .site-header-inner{
        min-height:64px;
    }

    .brand-mark{
        width:38px;
        height:38px;
    }

    .brand-copy strong{
        font-size:13.5px;
    }

    .hero{
        padding:42px 0 44px;
    }

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

    .hero-copy{
        padding:0;
        text-align:left;
    }

    .hero-copy h1{
        margin-top:12px;
        font-size:clamp(36px,11.1vw,44px) !important;
        line-height:.985 !important;
    }

    .hero-lead{
        font-size:13.2px;
        line-height:1.62;
    }

    .hero-actions{
        gap:7px;
        margin-top:20px;
    }

    .hero-actions .button{
        min-height:43px;
        min-width:0;
        padding-inline:10px;
        font-size:10px;
    }

    .hero-proof{
        margin-top:17px;
        gap:7px;
        font-size:8.8px;
    }

    .hero-window{
        border-radius:16px;
    }

    .window-topbar{
        min-height:54px;
        padding:9px 10px;
    }

    .window-brand strong{
        font-size:9px;
    }

    .window-brand small{
        font-size:6.5px;
    }

    .preview-main{
        padding:8px;
    }

    .patient-strip{
        padding:9px;
    }

    .metric-row{
        gap:5px;
    }

    .metric-card{
        min-height:66px;
        padding:8px;
    }

    .preview-panel{
        min-height:105px;
        padding:10px;
    }

    .trust-grid{
        padding:11px 0;
    }

    .trust-grid span{
        padding:6px 9px;
        font-size:8px;
    }

    .section{
        padding:55px 0;
    }

    .section-heading.centered{
        margin-bottom:24px;
    }

    .section-heading h2,
    .section-copy h2{
        margin-bottom:10px;
        font-size:29px;
        line-height:1.07;
    }

    .section-heading p,
    .section-copy>p{
        font-size:12.4px;
        line-height:1.63;
    }

    .workflow-grid{
        gap:8px;
    }

    .workflow-card{
        min-height:0;
        padding:16px;
    }

    .workflow-card h3{
        font-size:15px;
    }

    .workflow-card p{
        font-size:9.8px;
    }

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

    .check-grid{
        margin:18px 0;
    }

    .check-grid span{
        font-size:9.2px;
    }

    .visual-topbar,
    .therapy-header{
        min-height:59px;
        padding:11px 12px;
    }

    .diagnostic-grid{
        padding:9px;
        gap:6px;
    }

    .diagnostic-card{
        min-height:78px;
        padding:10px;
    }

    .therapy-stage{
        min-height:220px;
    }

    .therapy-target{
        width:66px;
        height:66px;
        font-size:23px;
    }

    .therapy-controls span{
        min-height:40px;
    }

    .feature-points{
        margin-top:17px;
    }

    .hardware-section{
        padding:58px 0;
    }

    .hardware-copy h2{
        font-size:30px;
    }

    .hardware-copy p{
        font-size:12.4px;
    }

    .hardware-device{
        min-height:255px !important;
    }

    .device-frame{
        width:min(330px,94%);
    }

    .pricing-section{
        padding-top:56px;
        padding-bottom:60px;
    }

    .pricing-grid{
        gap:10px;
    }

    .pricing-card{
        padding:17px;
        border-radius:15px;
    }

    .pricing-card h3{
        font-size:17px;
    }

    .plan-desc{
        min-height:0;
    }

    .plan-price-current{
        font-size:25px;
    }

    .plan-cta{
        min-height:40px;
    }

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

    .section-copy.compact h2{
        font-size:29px;
    }

    .security-cards{
        gap:7px;
    }

    .security-cards article{
        padding:14px;
    }

    .faq-section{
        padding-top:56px;
        padding-bottom:60px;
    }

    .faq-list summary{
        padding:13px 40px 13px 13px;
        font-size:9.8px;
    }

    .faq-list details>div{
        padding:0 13px 13px;
        font-size:9.2px;
    }

    .final-cta{
        padding:42px 0;
    }

    .final-cta h2{
        font-size:28px;
    }

    .site-footer{
        padding-top:36px;
    }

    .footer-grid{
        gap:26px;
    }

    .demo-modal{
        padding:18px 14px 14px;
    }

    .demo-modal h2{
        font-size:23px;
    }
}

/* ---------------------------------------------------------
   Very small phones
--------------------------------------------------------- */

@media(max-width:390px){

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

    .section-heading h2,
    .section-copy h2,
    .section-copy.compact h2{
        font-size:27px;
    }

    .final-cta h2{
        font-size:26px;
    }
}