/* Mobile-specific fixes (900px covers tablet-portrait devices like Galaxy Z Fold) */
@media (max-width: 900px) {
    /* Prevent horizontal overflow everywhere */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Fix header/nav overflow - no overflow hidden/clip on ancestors of fixed menu (breaks in Safari) */
    .main-header, .navbar, .navbar .container {
        max-width: 100vw;
    }

    .nav-brand {
        max-width: 60%;
        overflow: visible;
        text-overflow: ellipsis;
    }

    .brand-name {
        font-size: 1.2rem !important;
        color: #f1f5f9 !important;
    }

    .tagline {
        font-size: 0.65rem !important;
    }

    /* Hero section - ensure content clears the fixed nav */
    .hero {
        overflow: hidden;
    }

    .hero-content {
        padding-top: 140px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

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

    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .hero-buttons .cta-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-stats .stat-number {
        font-size: 1.5rem;
    }

    /* Hide hero floating icons on small mobile to prevent overflow */
    .hero-float-icon {
        display: none;
    }

    /* Reduce hero ::before mesh gradient size to prevent overflow */
    .hero::before {
        top: -25%;
        left: -25%;
        width: 150%;
        height: 150%;
        animation-duration: 30s;
    }

    /* Embedded demo iframe on homepage */
    .hero + section iframe {
        height: 300px !important;
    }

    /* Embedded demo overlay buttons */
    .hero + section form {
        display: block !important;
        margin-top: 8px;
    }

    .hero + section form input {
        width: 100% !important;
        margin-bottom: 6px;
    }

    /* Organization type selector cards */
    section > .container > div[style*="flex-wrap"] {
        gap: 0.75rem !important;
    }

    section > .container > div[style*="flex-wrap"] > a {
        flex: 1 1 calc(50% - 0.5rem) !important;
        max-width: none !important;
        padding: 1rem 0.75rem !important;
    }

    /* Section headers */
    .section-title {
        font-size: 1.5rem !important;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
    }

    /* Demo preview grid */
    .demo-preview-grid {
        grid-template-columns: 1fr !important;
    }

    /* Services grid */
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    /* Pricing grid - single column and centered */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    .pricing-card {
        max-width: 100%;
    }

    .pricing-card.popular {
        transform: none !important;
    }

    .pricing-cta {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Trust badges stack on mobile */
    .trust-badges {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem !important;
    }

    .trust-badge {
        width: 100%;
        justify-content: center;
    }

    /* Testimonial carousel */
    .testimonial-carousel {
        overflow: hidden;
        max-width: 100%;
    }

    .testimonial-slide {
        padding: 0 0.25rem;
    }

    .testimonial-card {
        padding: 1.5rem !important;
    }

    /* Carousel controls - ensure touch-friendly size */
    .carousel-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Testimonials */
    .testimonial-grid {
        grid-template-columns: 1fr !important;
    }

    /* Social proof stats */
    .proof-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .proof-number {
        font-size: 2rem;
    }

    /* Feature rows */
    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .feature-row.reverse .feature-mockup,
    .feature-row.reverse .feature-text {
        order: unset !important;
    }

    .feature-text h3 {
        font-size: 1.25rem;
    }

    /* Feature link - full width touch target */
    .feature-link {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }

    /* Final CTA section */
    .final-cta {
        overflow: hidden;
        padding: 4rem 0 !important;
    }

    .final-cta .section-title {
        font-size: 1.75rem !important;
    }

    .final-cta-sub {
        font-size: 1rem !important;
    }

    .final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-btn-glow,
    .cta-btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Quick Actions on dashboard */
    .action-card h4 {
        font-size: 1rem !important;
    }

    /* Book demo calendar - horizontal scroll with clear affordance */
    .calendar-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .calendar {
        min-width: auto !important;
        gap: 4px !important;
    }

    .cal-day {
        min-width: 58px !important;
        flex-shrink: 0;
    }

    .time-slot {
        font-size: 0.7rem !important;
        padding: 3px !important;
    }

    /* EnviroLog Demo - filter buttons wrap */
    .filter-buttons {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .filter-btn {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
    }

    /* EnviroLog Demo - dashboard grid stack */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .map-panel {
        min-height: 250px;
    }

    .timeline-panel {
        min-height: auto;
    }

    /* Demo banner */
    .demo-banner {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Demo nav */
    .top-nav .nav-container {
        flex-wrap: wrap;
    }

    .top-nav .user-menu {
        display: none;
    }

    /* Signup plan sidebar */
    .plan-summary {
        position: static !important;
    }

    /* Contact map */
    #contactMap {
        height: 150px !important;
    }

    /* Popups and modals */
    #exitPopup > div > div,
    #demoGate > div > div,
    .demo-readonly-msg {
        width: 95% !important;
        max-width: 95% !important;
        padding: 1.5rem !important;
    }

    /* Sticky CTA bar */
    #stickyCta {
        padding: 8px 16px !important;
    }

    #stickyCta span {
        font-size: 0.8rem !important;
    }

    /* Tables */
    table {
        font-size: 0.8rem;
    }

    /* Chat widget */
    #nves-chat-box {
        width: calc(100vw - 40px) !important;
        right: -10px !important;
    }

    /* Language switcher */
    .lang-name {
        display: none !important;
    }

    /* General spacing */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Form inputs - ensure they don't overflow */
    input, select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Homepage contact grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .contact-form-wrapper {
        padding: 1.5rem !important;
    }

    /* Long email link overflow */
    .contact-method a {
        word-break: break-all;
    }

    /* Footer */
    footer {
        overflow: hidden;
    }

    footer .container {
        padding: 0 1rem;
        text-align: center;
    }

    footer .container p {
        word-wrap: break-word;
    }

    /* Social share buttons */
    .share-buttons {
        flex-wrap: wrap;
    }

    /* Floating shapes in final CTA - hide to prevent overflow */
    .floating-shape {
        display: none;
    }

    /* All touch targets minimum 44px */
    .service-link,
    .nav-link,
    .nav-btn,
    .pricing-cta,
    .submit-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Reduce heavy animations on mobile for performance */
    .hero-particles .particle {
        display: none;
    }

    /* Ensure no element overflows its container */
    img, video, svg, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Sticky CTA full width */
    #stickyCta > div {
        flex-direction: column;
        text-align: center;
    }

    #stickyCta a[href="/book-demo.php"] {
        width: 100%;
        justify-content: center;
    }
}

/* Small phones (iPhone SE — 375px) */
@media (max-width: 375px) {
    .hero-content {
        padding-top: 120px !important;
        padding-bottom: 40px !important;
    }

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

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

    .hero-buttons .cta-button {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.95rem !important;
    }

    .hero-stats .stat-number {
        font-size: 1.25rem;
    }

    .hero-stats .stat-label {
        font-size: 0.7rem;
    }

    .pricing-card {
        padding: 1.5rem !important;
    }

    .plan-price,
    .pricing-price {
        font-size: 2rem !important;
    }

    .section-title {
        font-size: 1.3rem !important;
    }

    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Organization cards go single column on tiny screens */
    section > .container > div[style*="flex-wrap"] > a {
        flex: 1 1 100% !important;
    }

    /* CTA buttons full width */
    .cta-btn-glow,
    .cta-btn-outline {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Testimonial text size */
    .testimonial-quote p {
        font-size: 0.9rem !important;
    }

    .brand-name {
        font-size: 1rem !important;
    }
}

/* iPhone 14 Pro Max and similar large phones */
@media (min-width: 376px) and (max-width: 430px) {
    .hero-title {
        font-size: 1.65rem !important;
    }

    .hero-content {
        padding-top: 130px !important;
    }
}

/* iPad portrait */
@media (min-width: 768px) and (max-width: 900px) {
    /* On iPad, show 2-column grids where possible */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .demo-preview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-float-icon {
        display: flex;
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

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