/* ================================================================
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; }
}