/* Reset */ *, *::before, *::after { box-sizing: border-box; } /* overscroll-behavior-x (not overflow-x:hidden) stops the whole site from bouncing/dragging left-right on mobile Safari. overflow-x:hidden looks like the obvious fix but it makes body/html a scroll container, which breaks position:sticky for every descendant (the sticky header went dead site-wide the one time this was tried) — overscroll-behavior kills the bounce without that side effect. Inner carousels (press-strip, pricing/testimonials swipers) are unaffected either way since they scroll via their own overflow-x:auto. scroll-behavior:smooth applies to every in-page #anchor jump site-wide (nav "Get Started" → #pricing, FAQ/blog quick-nav, post TOC), so those read as a deliberate scroll instead of an instant jump. Direct/initial hash navigation (e.g. a footer link straight to /resources/#seo) is the one case this breaks — see the inline script at the top of header.php's , which forces an instant jump for that specific case and lets blog.js correct to the precise offset once the page has actually settled. */ html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; scroll-behavior: smooth; } body { margin: 0; overscroll-behavior-x: none; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* Variables */ :root { --color-purple: #673de6; --color-purple-dark: #5025d1; --color-teal: #00b090; --color-ink: #1d1e20; --color-body: #4d4d51; --color-hero-bg: #f4f5ff; --color-navy: #2f1c6a; --color-border: #d5dfff; --radius-pill: 50px; --radius-card: 16px; --container-width: 1188px; /* 1140px measured content + 24px padding each side (border-box) */ --container-wide: 1264px; /* 1216px measured content + 24px padding each side (border-box) */ --font-heading: 'DM Sans', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-body); background: #ffffff; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-ink); line-height: 1.15; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; } /* Container utilities: the
itself is full-bleed (so its background color spans the whole viewport, matching Elementor's actual outer-container/inner-container split); a .container inside constrains the content width. */ .site-footer__inner, .container { max-width: var(--container-width); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* Wider container: measured 1216px content on hero and FAQ specifically */ .hero__inner, .container--wide { max-width: var(--container-wide); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } section { padding-top: 80px; padding-bottom: 80px; } /* Eyebrow pill badge: verified via _elementor_data — the live markup is a flex container (align-items:center) wrapping a heading with line-height:20px, not a padded inline text node, so it centers vertically regardless of font metrics. */ .eyebrow { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 900; font-size: 14px; line-height: 20px; text-transform: uppercase; color: #4a0efb; background: #ffffff; border: 1px solid #d1ceff; border-radius: 100px; padding: 10px 24px; margin: 0 0 24px; } /* inline-flex is an inline-level box, so margin:auto alone can't center it; forcing a shrink-wrapped block-level flex container makes centering work again while keeping the internal flex vertical-centering above. */ .eyebrow--center { display: flex; width: max-content; margin-left: auto; margin-right: auto; } /* Verified via _elementor_data: the hero eyebrow container is width:65% of its column (not fixed padding), which is why it has more side whitespace than a text-hugging pill. */ .eyebrow--hero { width: 65%; } /* Section titles: verified via _elementor_data — DM Sans 36px/700/40 line-height is the shared heading style across every section except FAQ. */ .section-title { font-family: var(--font-heading); font-size: 36px; font-weight: 700; line-height: 40px; margin-bottom: 16px; } .section-title--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; } .section-title--invert { color: #ffffff; } @media (max-width: 768px) { .section-title { font-size: 20px; line-height: 28px; } } .section-subtitle { font-family: var(--font-heading); font-size: 16px; font-weight: 400; line-height: 24px; color: var(--color-body); margin-bottom: 40px; } .section-subtitle--center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } .section-subtitle--invert { color: rgba(255,255,255,0.8); } /* Buttons */ .btn { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 16px; border-radius: var(--radius-pill); padding: 12px 25px; transition: background-color 0.15s ease, transform 0.1s ease; } .btn--primary { background: var(--color-purple); color: #ffffff; } .btn--primary:hover { background: var(--color-purple-dark); } .btn--outline { background: #ffffff; border: 2px solid var(--color-purple); color: var(--color-purple); } .btn--outline:hover { background: #f4f2ff; } .btn--block { display: block; width: 100%; text-align: center; } /* Checkout CTAs are