/* ================================================================ AIML Funnel — Custom CSS Paste this into Elementor → Site Settings → Custom CSS ================================================================ */ /* ----- 1. Hide the Fluent Form on the funnel page ----- */ .fluentform-hidden-mount, .fluentform-hidden-mount * { position: absolute !important; left: -99999px !important; top: -99999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ----- 2. KILL all horizontal overflow at the root ----- */ html, body, body.elementor-page-canvas { margin: 0 !important; padding: 0 !important; background: #062B2B !important; overflow-x: hidden !important; overscroll-behavior-x: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ----- 3. Force box-sizing on every element ----- */ body.elementor-page-canvas *, body.elementor-page-canvas *::before, body.elementor-page-canvas *::after { box-sizing: border-box !important; } /* ----- 4. Kill Elementor wrapper padding/min-width around the HTML widget ----- */ body.elementor-page-canvas .elementor, body.elementor-page-canvas .elementor-section, body.elementor-page-canvas .elementor-container, body.elementor-page-canvas .elementor-row, body.elementor-page-canvas .elementor-column, body.elementor-page-canvas .elementor-column-wrap, body.elementor-page-canvas .elementor-widget-wrap, body.elementor-page-canvas .elementor-widget, body.elementor-page-canvas .elementor-widget-html, body.elementor-page-canvas .elementor-widget-html .elementor-widget-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ----- 5. Constrain all funnel containers to viewport ----- */ .header, .header-inner, .progress-wrap, .container, .step, .hero-img-wrap, .options, .option, .testimonial, .price-block, .plan-card, .timer-bar, .stats-row, .stat-mini, .trust-strip, .loader-wrap, .form-group { max-width: 100% !important; box-sizing: border-box !important; } /* ----- 6. Force text wrapping (the actual fix for the cut-off you saw) ----- */ .hero-title, .hero-sub, .step-title, .step-sub, .step-kicker, .option-title, .option-sub, .plan-title, .plan-sub, .testimonial-quote, .timer-text, .footer-note, .price-meta, .loader-title, .loader-sub { word-wrap: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; white-space: normal !important; } /* ----- 7. Big-number elements: shrink to fit instead of overflowing ----- */ .price-now, .price-strike, .timer-count, .date-num { max-width: 100% !important; overflow-wrap: break-word !important; } /* ----- 8. Mobile tweaks (≤ 480px) ----- */ @media (max-width: 480px) { .header { padding: 12px 14px !important; } .header-inner { max-width: 100% !important; } .progress-wrap { padding: 14px 14px 6px !important; max-width: 100% !important; } .container { padding: 18px 14px 100px !important; max-width: 100% !important; } .hero-img-wrap { padding: 24px 14px !important; } .hero-title { font-size: 26px !important; line-height: 1.05 !important; } .hero-sub { font-size: 13px !important; line-height: 1.4 !important; } .hero-badge { font-size: 9px !important; letter-spacing: 1.5px !important; padding: 5px 10px !important; } .step-kicker { font-size: 10px !important; letter-spacing: 1.5px !important; } .step-title { font-size: 24px !important; letter-spacing: -0.5px !important; line-height: 1.15 !important; } .step-sub { font-size: 13px !important; line-height: 1.4 !important; margin-bottom: 20px !important; } .option { padding: 14px 12px !important; gap: 10px !important; } .option-icon { font-size: 22px !important; width: 32px !important; } .option-title { font-size: 15px !important; } .option-sub { font-size: 12px !important; line-height: 1.3 !important; } .option-arrow { font-size: 16px !important; } .testimonial { padding: 14px !important; } .testimonial-quote { font-size: 13px !important; line-height: 1.45 !important; } .stats-row { gap: 8px !important; } .stat-mini { padding: 10px 6px !important; } .stat-mini-num { font-size: 18px !important; } .stat-mini-label { font-size: 9px !important; } .plan-card { padding: 18px !important; } .plan-title { font-size: 22px !important; line-height: 1.1 !important; } .plan-sub { font-size: 13px !important; } .plan-list li { font-size: 13px !important; } .price-now { font-size: 32px !important; letter-spacing: -0.5px !important; } .price-strike { font-size: 13px !important; } .price-meta { font-size: 10px !important; } .pricing-heading { font-size: 15px !important; margin: 6px 0 12px !important; } .price-option { padding: 16px !important; border-radius: 16px !important; } .price-option .price-now { font-size: 36px !important; } .price-option .price-unit { font-size: 17px !important; } .price-tag { font-size: 9px !important; padding: 4px 10px !important; } .price-note { font-size: 10px !important; } .timer-text { font-size: 11px !important; } .timer-count { font-size: 16px !important; } .cta-btn { font-size: 13px !important; padding: 15px !important; letter-spacing: 1px !important; } .form-input { font-size: 14px !important; padding: 13px !important; } .form-label { font-size: 11px !important; } .loader-title { font-size: 20px !important; } .footer-note { font-size: 10px !important; } } /* ----- 9. Extra-small phones (≤ 380px — iPhone SE / budget Android) ----- */ @media (max-width: 380px) { .container { padding: 16px 12px 90px !important; } .header { padding: 10px 12px !important; } .progress-wrap { padding: 12px 12px 6px !important; } .hero-title { font-size: 22px !important; } .hero-sub { font-size: 12px !important; } .step-title { font-size: 20px !important; } .step-sub { font-size: 12px !important; } .option-title { font-size: 14px !important; } .option-sub { font-size: 11px !important; } .price-now { font-size: 28px !important; } .plan-title { font-size: 20px !important; } }