/* --- MOBILE COMPATIBILITY FIXES --- */

@media (max-width: 992px) {
    /* Fix: Prevent logos from becoming massive by protecting their height */
    .logo img, .footer-logo img, .nav-logo img {
        height: 24px !important;
        width: auto !important;
    }

    .pricing-split, 
    .features-list-structured, 
    .addons-grid,
    .venue-highlights-flex,
    .roi-card {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 40px !important;
    }

    .pricing-info {
        padding-left: 0 !important;
    }

    .hero-pricing {
        padding: 140px 0 60px !important;
        min-height: auto !important;
    }

    .integrations-circle {
        transform: scale(0.7) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    img:not(.logo img):not(.footer-logo img) {
        max-width: 100% !important;
        height: auto !important;
    }

    .hero-content h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .pricing-info h2 {
        font-size: 2rem !important;
    }

    .venue-scroll-window {
        border-radius: 0 !important;
        padding: 20px 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        overflow: hidden !important;
    }

    .venue-scroll-container {
        width: 100% !important;
        overflow-x: hidden !important;
        scroll-snap-type: none !important;
    }

    .venue-highlights-flex {
        display: block !important;
        width: 100% !important;
        padding: 0 20px !important;
    }

    .venue-card {
        width: 100% !important;
        display: none !important; 
        flex-direction: column !important;
        height: auto !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        border-radius: 30px !important;
    }

    .venue-card.active-card {
        display: flex !important;
    }

    .venue-card-info {
        padding: 30px 20px !important;
    }

    .venue-card-visual {
        height: 200px !important;
        order: -1 !important;
    }

    .logo-bubble {
        display: none !important;
    }
}