/* ===== MOBILE BUG FIXES =====
   This file must be loaded LAST to override all other stylesheets.
   Fixes 13 mobile responsive bugs.
*/

@media (max-width: 768px) {

    /* Bug 4: Hero section too tall - hide mockup on mobile */
    .hero {
        min-height: auto !important;
    }
    .hero-content {
        order: 1 !important;
    }
    .hero-visual {
        display: none !important;
    }

    /* Bug 5: Benefits 4-column grid overflow → 1 column */
    [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Bug 6: "How it works" & Bug 9/12/13: All 2-column grids → stack */
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Bug 2: CTA form - stack email + button vertically */
    form[style*="display: flex"] {
        flex-direction: column !important;
    }

    /* Bug 3: CTA checkmarks 5-column → 2-column wrap */
    [style*="grid-template-columns: repeat(5, auto)"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    /* Bug 8: Pricing trust indicators 3-column → 1 column */
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Bug 7: Comparison table - fit on mobile without scroll */
    .table-scroll-wrapper table {
        min-width: 0 !important;
        width: 100% !important;
    }
    .table-scroll-wrapper td,
    .table-scroll-wrapper th {
        padding: 1rem 0.5rem !important;
        font-size: 0.875rem !important;
    }
    .table-scroll-wrapper td:last-child,
    .table-scroll-wrapper th:last-child {
        width: 60px !important;
        min-width: 60px !important;
    }

    /* Bug 10 & 11: Large titles too big on mobile */
    .section-title[style*="font-size: 3rem"] {
        font-size: 1.75rem !important;
    }
    [style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }

    /* Bug 14: Stats 4-column → 2x2 grid */
    [style*="grid-template-columns: repeat(4, 1fr)"][style*="text-align: center"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* About stats large numbers */
    [style*="font-size: 3.5rem"] {
        font-size: 2rem !important;
    }

    /* Reduce CTA block padding on mobile */
    [style*="padding: 4rem 3rem"] {
        padding: 2.5rem 1.5rem !important;
    }

    /* About hero min-height fix */
    [style*="min-height: 60vh"] {
        min-height: auto !important;
    }
}