{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --brand-orange: #F26531; --brand-orange-2:#ff6b00; } /* Small helpers used in your markup */ .text-brand-orange { color: var(--brand-orange); } .bg-brand-orange { background-color: var(--brand-orange); } .border-brand-orange { border-color: var(--brand-orange); } .section-header { text-align:center; } .section-title { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight: 900; letter-spacing: -0.02em; color:#111827; } .section-subtitle { margin-top: .5rem; color:#6B7280; font-size: 1.05rem; } /* Hero badge animation */ @keyframes badgePop { 0%{transform:scale(.98); opacity:.85} 50%{transform:scale(1); opacity:1} 100%{transform:scale(.98); opacity:.9} } .animate-badge { animation: badgePop 2.2s ease-in-out infinite; } /* Guarantee cards */ .guarantee-badge { background:#fff; border:1px solid #E5E7EB; border-radius: 1rem; padding: 1.75rem; box-shadow: 0 10px 25px rgba(0,0,0,.06); } /* FAQ v2 (your custom classes) */ .faq-container-v2 { display:flex; flex-direction:column; gap: 1rem; } .faq-item-v2 { background:#fff; border:1px solid #E5E7EB; border-radius: 1rem; padding: 1.25rem 1.25rem; box-shadow: 0 6px 18px rgba(0,0,0,.05); overflow:hidden; } .faq-question-v2 { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:800; font-size: 1.05rem; color:#111827; user-select:none; } .faq-icon-v2 { width: 2rem; height: 2rem; border-radius: .75rem; display:flex; align-items:center; justify-content:center; background: rgba(242,101,49,.08); color: var(--brand-orange); font-weight: 900; transition: transform .2s ease; } .faq-answer-v2 { max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .2s ease; } .faq-item-v2.is-open .faq-answer-v2 { max-height: 520px; /* enough for your content */ opacity: 1; } .faq-item-v2.is-open .faq-icon-v2 { transform: rotate(45deg); } .highlight-box { margin-top: 1rem; padding: 1rem; border-radius: .85rem; border: 1px solid rgba(242,101,49,.25); background: rgba(242,101,49,.06); color:#111827; font-weight: 600; } .faq-bold { font-weight: 900; } /* Comparison table */ .comparison-table th, .comparison-table td { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; } /* Make the widget background transparent */ .as-seen-in-widget, .as-seen-in-widget .as-seen-in-logos-container, .as-seen-in-widget .as-seen-in-logos, .as-seen-in-widget .as-seen-in-logo, .as-seen-in-widget h3 { background: transparent !important; background-color: transparent !important; } /* Strong transparent override (includes pseudo-elements + background images) */ .as-seen-in-widget.as-seen-in-widget, .as-seen-in-widget.as-seen-in-widget * , .as-seen-in-widget.as-seen-in-widget::before, .as-seen-in-widget.as-seen-in-widget::after, .as-seen-in-widget.as-seen-in-widget *::before, .as-seen-in-widget.as-seen-in-widget *::after { background-color: transparent !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } /* If their CSS uses borders to “frame” the section */ .as-seen-in-widget.as-seen-in-widget { border: 0 !important; } /* Make only the widget shells transparent */ .as-seen-in-widget, .as-seen-in-logos-container { background-color: transparent !important; background: transparent !important; } /* If the white is coming from the rails */ .as-seen-in-rail { background: transparent !important; background-image: none !important; } /* Keep logos visible */ .as-seen-in-logo, .as-seen-in-logo img { background: transparent !important; } /* Make the widget itself transparent (safe + targeted) */ .as-seen-in-widget, .as-seen-in-widget .as-seen-in-logos-container { background: transparent !important; background-color: transparent !important; } /* Remove any rail fill/gradient that can look like a white bar */ .as-seen-in-widget .as-seen-in-rail { background: transparent !important; background-image: none !important; } /* Keep logos visible */ .as-seen-in-widget img { opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* Tailwind's bg-gray-50 is #F9FAFB */ :root { --cta-section-bg: #F9FAFB; } .as-seen-in-widget, .as-seen-in-widget .as-seen-in-logos-container { background: var(--cta-section-bg) !important; background-color: var(--cta-section-bg) !important; } /* If rails use a fill/gradient that looks different, match them too */ .as-seen-in-widget .as-seen-in-rail { background: var(--cta-section-bg) !important; background-image: none !important; } /* Keep logos clean */ .as-seen-in-widget img { opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* Let the wrapper color show through */ .as-seen-in-widget, .as-seen-in-widget .as-seen-in-logos-container { background: transparent !important; background-color: transparent !important; } /* Kill any rail fill/gradient that can look like a different strip */ .as-seen-in-widget .as-seen-in-rail { background: transparent !important; background-image: none !important; } /* Optional: ensure the widget doesn't create its own "boxed" feel */ .as-seen-in-widget { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }