/* MOBILE RESPONSIVE STYLES */

/* Hide on mobile utility */
.hide-on-mobile {
    display: block;
}

/* Base structural overrides based on style.css additions */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }

    .container {
        padding: 0 16px;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 16px !important;
    }

    /* Stack flex layout base class */
    .split-section {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .split-content {
        width: 100% !important;
    }

    .footer-flex {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .faq-grid {
        grid-template-columns: 1fr !important;
    }

    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .feature-card {
        padding: 28px !important;
    }

    .site-header .container {
        flex-direction: column;
        gap: 16px;
    }

    .nav-links {
        flex-wrap: wrap;
        gap: 16px !important;
        width: 100%;
        justify-content: center;
    }

    .nav-links a.btn {
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
    }

    .btn {
        font-size: 0.9rem;
        padding: 12px 24px;
    }

    .btn-lg {
        font-size: 1rem;
        padding: 14px 32px;
    }

    /* Stats grid mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-box {
        padding: 20px !important;
    }

    .stat-number {
        font-size: 2.5rem !important;
    }
}

/* Mobile phones (480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .feature-card {
        padding: 24px !important;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    .btn {
        padding: 14px 20px;
    }

    .btn-lg {
        padding: 16px 24px;
    }

    /* Pricing cards stacked */
    .pricing-card {
        padding: 32px !important;
    }

    .pricing-card.featured {
        transform: scale(1) !important;
    }

    /* Step timeline mobile friendly */
    .step-item {
        gap: 16px !important;
    }

    .step-number {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
    }
}

/* Ensure mobile viewport */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    /* Make sure inputs are readable on mobile */
    input,
    textarea,
    select {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
    }
}