/* Responsive styles - all media queries */

/* ============================================================
    DESKTOP (>= 1024px)
    ============================================================ */
@media (min-width: 1024px) {
    .desktop-hero-layout {
        align-items: center !important;
        padding-top: 0 !important;
    }
    .desktop-left-col {
        width: 55% !important;
        padding-top: 0 !important;
    }
    .desktop-right-col {
        width: 45% !important;
        display: flex !important;
        justify-content: flex-end !important;
        padding-top: 68px !important;
    }
    .desktop-phone-mockup {
        max-width: 410px !important;
        min-height: 630px !important;
        height: 100% !important;
        max-height: 700px !important;
    }
    .howitworks-phone-mockup {
        min-width: 300px!important;
        max-width: 400px !important;
        min-height: 600px !important;
        height: 100% !important;
        max-height: 700px !important;
    }
    .badge-v2 {
        display: inline-block !important;
    }
    .mobile-only-extras {
        display: none !important;
    }
}

/* Large screens (> 1600px) */
@media (min-width: 1600px) {
    .desktop-phone-mockup {
        max-width: 410px !important;
    }
    .howitworks-phone-mockup {
        max-width: 290px !important;
    }
}

/* ============================================================
   TABLET (768px - 1023px)
   The hero stacks in a single column below "lg". The fixed
   100vh height that only makes sense for the desktop 55/45
   split must be removed here, otherwise the stacked content
   is cramped. The mobile trust line is shown to avoid the
   431-768px gap.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .desktop-hero-layout {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    .mobile-only-extras {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 28px !important;
        margin-bottom: 0 !important;
    }
    .mobile-mockup-wrapper {
        padding-top: 3rem !important;
        padding-bottom: 4rem !important;
    }
    .mobile-mockup-frame {
        max-width: 360px !important;
    }
}

/* ============================================================
   MOBILE (<= 768px)
   Covers the 431-768px gap AND the <=430px small phones.
   ============================================================ */
@media (max-width: 768px) {
    /* Remove the fixed 100vh height and guard against any
       horizontal scroll from the mockup / dialpad. */
    .desktop-hero-layout {
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
    }

    .mobile-grid-override {
        display: block !important;
    }
    .mobile-text-bounds {
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 0 !important;
    }

    /* Desktop-only badge hidden on Mobile */
    .badge-v2 {
        display: none !important;
    }

    /* Text Sizes & Exact Mobile Spacings */
    .mobile-top-spacing {
        margin-top: 24px !important;
    }
    .mobile-subheadline {
        margin-bottom: 16px !important;
    }

    .mobile-headline {
        font-size: 32px !important;
        line-height: 1.12 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
    }
    .mobile-body-copy {
        margin-bottom: 32px !important;
    }

    .mobile-cta-stack {
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .mobile-cta-btn {
        font-size: 14px !important;
    }

    /* Feature Strip & Trust Line Styling (visible across all mobile widths) */
    .mobile-only-extras {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 28px !important;
        margin-bottom: 0 !important;
    }
    .mobile-feature-strip {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: 11px !important;
        color: #a1a1aa !important;
        font-weight: 400 !important;
        flex-wrap: wrap !important;
    }
    .mobile-feature-sep {
        font-size: 12px !important;
        color: #52525b !important;
    }
    .mobile-trust-line {
        font-size: 13px !important;
        color: #e4e4e7 !important;
        font-weight: 500 !important;
        margin-top: 12px !important;
        text-align: center !important;
    }

    /* Scroll Hint Position */
    .mobile-scroll-hint-wrapper {
        margin-top: auto !important;
        margin-bottom: 24px !important;
        padding-bottom: 0 !important;
    }
    .mobile-scroll-text {
        font-size: 11px !important;
    }

    /* Mockup below fold */
    .mobile-mockup-wrapper {
        padding-top: 4rem !important;
        padding-bottom: 5rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .mobile-mockup-frame {
        width: 100% !important;
        max-width: 260px !important;
    }

    /* Dialpad form: keep inside the viewport, no overflow */
    .mobile-mockup-frame form,
    .mobile-mockup-frame .flex.items-stretch {
        min-width: 0 !important;
    }
    .mobile-mockup-frame input[type="tel"] {
        min-width: 0 !important;
    }
}

/* Very small phones (<= 360px): tighten CTA padding and
   headline so nothing overflows the viewport. */
@media (max-width: 360px) {
    .mobile-cta-btn {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .mobile-headline {
        font-size: 28px !important;
    }
}

/* Light Mode Adaptive Styling for Mobile Extras */
.light .mobile-trust-line {
    color: #1f2937 !important;
}
.light .mobile-feature-strip {
    color: #6b7280 !important;
}
.light .mobile-feature-sep {
    color: #d1d5db !important;
}

/* ============================================================
   ROI CALCULATOR MOBILE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Section padding: 60px top/bottom, 16px sides */
    .roi-calculator-section {
        padding: 60px 16px !important;
    }
    
    /* Prevent horizontal scroll */
    .roi-calculator-container {
        overflow-x: hidden !important;
    }
    
    /* Stack layout: inputs on top, results below */
    .roi-calculator-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    /* Config panel - full width inputs */
    .roi-config-panel {
        gap: 16px !important;
    }
    
    .roi-config-group {
        gap: 6px !important;
    }
    
    /* Shorten labels */
    .roi-config-label {
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    
    /* Inputs: full width, 16px font (prevents iOS zoom), proper padding */
    .roi-config-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }
    
    /* Slider value display */
    .roi-slider-value {
        font-size: 13px !important;
        margin-top: 4px !important;
    }
    
    /* Select dropdown - adjust padding for 16px font */
    select.roi-config-input {
        padding-right: 44px !important;
        background-position: right 16px center !important;
    }
    
    /* Results: smaller big number (36px) */
    .roi-main-value {
        font-size: 36px !important;
    }
    
    .roi-main-label {
        font-size: 14px !important;
    }
    
    /* Gauge: 180px wide */
    .gauge-container {
        height: 140px !important;
        margin-bottom: 24px !important;
    }
    
    .gauge-svg {
        width: 180px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .gauge-percent {
        font-size: 28px !important;
    }
    
    .gauge-label {
        font-size: 11px !important;
    }
    
    /* Stat cards in 2x2 grid */
    .roi-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }
    
    .roi-kpi-card {
        padding: 16px 12px !important;
        min-height: 80px !important;
    }
    
    .roi-kpi-value {
        font-size: 22px !important;
    }
    
    .roi-kpi-label {
        font-size: 10px !important;
    }
    
    /* Buttons: stack vertically, full width */
    .roi-snapshot-cta {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .roi-cta-button-primary,
    .roi-cta-button-secondary {
        width: 100% !important;
        height: 48px !important;
        font-size: 14px !important;
        padding: 0 24px !important;
    }
    
    /* Business Snapshot - mobile version */
    .roi-snapshot-title {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }
    
    .roi-snapshot-row {
        padding: 10px 0 !important;
        font-size: 13px !important;
    }
    
    .roi-snapshot-label {
        font-size: 13px !important;
    }
    
    .roi-snapshot-value {
        font-size: 13px !important;
    }
    
    /* Disclaimer */
    .roi-disclaimer {
        font-size: 11px !important;
        margin-top: 16px !important;
    }
}