/* ============================================================= Capkiro — Global Mobile Responsive Safety Net Loaded on EVERY page to prevent horizontal scroll on mobile. Root causes this file addresses: 1. iOS Safari ignores overflow-x:hidden on with touch scroll 2. 100vw includes scrollbar width (use 100% instead) 3. Inline min-width values on flex children exceed narrow viewports 4. Absolutely positioned decorative elements extending beyond viewport ============================================================= */ /* ===== ROOT CONTAINMENT ===== */ html { overflow-x: hidden; overscroll-behavior-x: none; max-width: 100%; } body { overflow-x: hidden; overscroll-behavior-x: none; width: 100%; max-width: 100%; position: relative; } /* ===== UNIVERSAL BOX-SIZING ===== */ *, *::before, *::after { box-sizing: border-box; } /* ===== PREVENT CHILD ELEMENTS FROM EXCEEDING VIEWPORT ===== */ /* All block-level containers must respect viewport width */ main, section, article, aside, header, footer, div, form, nav { max-width: 100%; } /* Images and media must never exceed their container */ img, video, iframe, embed, object, svg, canvas { max-width: 100%; height: auto; } /* Tables should scroll within their container, not push the page */ table { max-width: 100%; } /* ===== MOBILE: 768px and below ===== */ @media (max-width: 768px) { /* Force word wrapping on all text content */ body { overflow-wrap: break-word; word-wrap: break-word; } /* Navigation must stay within viewport */ nav { padding-left: 1rem !important; padding-right: 1rem !important; width: 100% !important; max-width: 100% !important; } .nav-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; } /* Hamburger must always be visible and tappable on mobile */ .hamburger { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; flex-shrink: 0 !important; z-index: 210 !important; } /* Desktop nav links must be hidden on mobile */ .nav-links { display: none !important; } /* Prevent all inline min-width from causing overflow */ [style*="min-width"] { min-width: 0 !important; } /* Override inline min-width on specific elements known to cause overflow */ #inlineCtaForm { min-width: 0 !important; width: 100% !important; flex-direction: column !important; } #inlineCtaForm input, #inlineCtaForm button { min-width: 0 !important; width: 100% !important; } /* Footer disclaimer paragraphs - remove min-width */ footer p[style*="min-width"], .closing p[style*="min-width"], section p[style*="min-width"] { min-width: 0 !important; } /* Footer flex containers must stack on mobile */ footer > div[style*="display:flex"] { flex-direction: column !important; } /* Closing section flex containers must stack on mobile */ .closing > div[style*="display:flex"] { flex-direction: column !important; } /* Gate forms and inputs */ .gate-input, .gate-btn, #singleGateForm { min-width: 0 !important; max-width: 100% !important; } #singleGateForm { flex-direction: column !important; } /* Match detail cards generated by JS */ .match-detail { min-width: 0 !important; } /* Preview cards */ .preview-card { min-width: 0 !important; flex: 1 1 130px !important; } /* Ensure sections don't overflow */ section, .trust-strip, .faq-section, .problem, .how, .social-proof, .closing { max-width: 100% !important; overflow-x: hidden !important; } /* Hide decorative pseudo-elements that can overflow */ .problem::after { display: none !important; } /* Hero section responsiveness */ .hero { padding-left: 1rem !important; padding-right: 1rem !important; min-height: auto !important; } .hero h1 { font-size: clamp(1.6rem, 7vw, 3rem) !important; max-width: 100% !important; } .hero-sub { max-width: 100% !important; } .form-card { max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* Comparison table wrappers */ .table-wrapper { min-width: 0 !important; overflow-x: auto !important; } } /* ===== SMALL MOBILE: 480px and below ===== */ @media (max-width: 480px) { nav { padding: 0.75rem 0.75rem !important; } .hero { padding: 5rem 0.75rem 2rem !important; } .hero h1 { font-size: clamp(1.4rem, 8vw, 2.5rem) !important; line-height: 1.1 !important; } .form-card { padding: 1.25rem !important; border-radius: 14px !important; } .form-grid { grid-template-columns: 1fr !important; } /* Force all flex containers in closing/footer to stack */ footer div[style*="flex"], .closing div[style*="flex"] { flex-direction: column !important; gap: 0.75rem !important; } } /* ===== EXTRA SMALL: 360px and below ===== */ @media (max-width: 360px) { .hero h1 { font-size: clamp(1.3rem, 8vw, 2.2rem) !important; } .form-card { padding: 1rem !important; } /* Everything must wrap */ * { word-break: break-word !important; overflow-wrap: break-word !important; } }