/* =========================================================================
   MOBILE RESPONSIVENESS FOR LANDING PAGE
   Enhancements for phones and small tablets
   ========================================================================= */

@media (max-width: 1024px) {
    /* Improve padding for section containers on tablets */
    .section-content {
        padding: 0 32px;
    }
}

@media (max-width: 768px) {
    /* Navigation adjustments */
    .nav-actions {
        display: none; /* Hide top-right nav actions on mobile to declutter */
    }
    
    .nav-inner {
        justify-content: center; /* Center the logo */
    }

    /* Hero section scaling */
    .hero-h1 {
        font-size: clamp(2.2rem, 8vw, 3rem);
        line-height: 1.1;
    }
    .hero-sub {
        font-size: 1rem;
        padding: 0 16px;
    }
   .hero-pill {
        margin-top: 40px;
    }

    /* Section padding and spacing */
    .section {
        padding: 60px 16px;
    }
    .section-h2 {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
    }

    /* Grids to single column */
    .case-study-grid {
        grid-template-columns: 1fr !important; /* Override inline styles if any */
        gap: 16px;
    }

    .pricing-grid-enterprise,
    .pricing-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 24px;
        padding: 0 16px;
    }

    .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Feature block scaling */
    .feature-block-enterprise {
        padding: 24px 16px;
    }

    /* Forms */
    .contact-form-wrapper {
        padding: 24px 16px;
        margin: 0 16px;
    }

    /* Footer adjustments */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }
    .footer-links {
        flex-direction: column;
        gap: 16px;
    }

    /* Trust Strip Wrapping */
    .pricing-trust-strip {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    /* Extra small phone tweaks */
    .hero-h1 {
        font-size: 2rem;
    }
    .btn-primary-enterprise, .btn-secondary-enterprise {
        width: 100%;
        padding: 14px 24px;
        font-size: 0.9rem;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 16px;
    }
    .case-study-card {
        padding: 24px 16px !important; /* Override inline padding */
    }
}