/* ─── Global mobile overflow guard ────────────────────────────────────────── Webflow assigns fixed rem widths to several hero containers that are wider than a phone screen at 767px and below, causing horizontal scroll and clipped headlines. We cap everything to the viewport and clip the overflow. IMPORTANT — THREE RULES THAT MUST NEVER BE BROKEN: 1) Use `overflow-x: clip`, NEVER `overflow: hidden`. `hidden` turns the element into a scroll container, which silently breaks every descendant that uses `position: sticky` (the navbar AND the journey cards on /about-us). `clip` clips overflow WITHOUT creating a scroll container. 2) Apply the clip to `body` ONLY, never to `html`. Setting any non-visible overflow on the element makes it a sticky containing block in WebKit/iOS Safari, which kills `position: sticky` on every descendant (the navbar would scroll away with the page on iOS). 3) Scope the clip to mobile-only (`@media (max-width: 991px)`). On desktop it can still nudge the sticky containing block in some Chrome builds, causing the sticky navbar to appear to "scroll away" even though the page itself scrolls. Webflow's hero overflow problem is mobile-only, so there's no reason for this rule to ever apply on desktop. */ @media screen and (max-width: 991px) { body { max-width: 100%; overflow-x: clip; } } /* Self-hosted Inter + Urbanist (variable WOFF2, replaces Google WebFont loader) */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); } @font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/urbanist-var.woff2") format("woff2"); } /* Same logic for .page_wrapper. Webflow ships `.page_wrapper { overflow-x: clip }` which is fine in theory but, paired with the sticky navbar inside it, has shown up as "navbar scrolls away on desktop" reports. Strip the overflow on desktop entirely so the sticky navbar's containing block is the viewport (rock-solid), and re-apply the clip on tablet/mobile where the horizontal-overflow protection is actually needed. */ @media screen and (min-width: 992px) { .page_wrapper { overflow: visible !important; } } @media screen and (max-width: 479px) { .hero_headings, .hero_headings-2, .contact-hero_headings, ._3d_tab { width: 100% !important; max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; } } /* ─── Global resource card grid — fixed equal heights across all pages ────── Targets every ._3_col-grid on resources, posts, interviews, events, homepage, about-us, etc. All cards share the same image height and padding so the layout is consistent everywhere. */ ._3_col-grid { align-items: stretch; } /* Each card anchor — fixed total height, flex column */ ._3_col-grid > a.liner_border, ._3_col-grid > a.w-inline-block { display: flex !important; flex-direction: column !important; height: 26rem !important; /* image 14rem + text 12rem = 26rem total */ overflow: hidden !important; } /* Card fills the anchor */ ._3_col-grid .resource_card { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; overflow: hidden !important; } /* Fixed image height */ ._3_col-grid .resources_image { width: 100%; height: 14rem; object-fit: cover; flex-shrink: 0; } /* Video card image wrapper */ ._3_col-grid .resource_card-wrap { flex-shrink: 0; position: relative; } ._3_col-grid .resource_card-wrap .resources_image { height: 14rem; } /* Text block fills the remaining 12rem */ ._3_col-grid .resources_heading { flex: 1 !important; display: flex !important; flex-direction: column !important; padding: 1.1rem 1.4rem 1.4rem !important; gap: 0.4rem !important; overflow: hidden !important; min-height: 0 !important; } /* Title — 2 lines max */ ._3_col-grid .resources_heading h3.heading_6 { font-size: 1rem !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; flex-shrink: 0 !important; } /* Excerpt — 3 lines max */ ._3_col-grid .resources_heading p.text_800 { font-size: 0.85rem !important; line-height: 1.6 !important; opacity: 0.75 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; flex: 1 !important; min-height: 0 !important; } /* ─── Spacing overrides for specific grid instances ─────────────────────── */ /* Gap between heading block and cards on homepage / about-us */ #hp-articles-grid { margin-top: 0.5rem; } /* Generic tightener — any _3_col-grid that follows a .heading_wrapper.long (Resources / Insights pattern site-wide) gets only a small breathing-room margin so the card grid sits close to the section subtitle. Uses + so it only matches when the grid is the IMMEDIATE next sibling — won't affect grids with intervening content. */ .heading_wrapper.long + ._3_col-grid { margin-top: 0.5rem !important; } /* Section intro headings (h2 + tag/subtitle) — narrower centered measure. Replaces full-width .heading_wrapper.long override; keeps subtitles from stretching edge-to-edge. `.heading_wrapper.mid` is excluded — Webflow ships it at 42rem for pricing / why sections; capping at 36rem broke the Evaluation/Qualified toggle vs Zero/Premium/Advanced tab stack. */ .heading_wrapper-medium, .heading_wrapper-medium-2, .heading_wrapper.long { width: 100% !important; max-width: 42rem; margin-left: auto; margin-right: auto; } .heading_wrapper.mid { width: 100% !important; max-width: 42rem; margin-left: auto; margin-right: auto; } .heading_wrapper.long { padding-bottom: 0.25rem !important; } /* Pricing — deferred inactive tab panes (pricing-tabs-defer.js) */ .pricing-tab-placeholder { min-height: 28rem; } @media screen and (max-width: 991px) { .pricing-tab-placeholder { min-height: 40rem; } } /* Pricing — room for long h2; per-tab Standard / No activation fee + qualified overlay */ .pricing_section .heading_wrapper.mid, .pricing_section.pricing_new .heading_wrapper.mid { max-width: 48rem; } .pricing_section .tab_content, .pricing_section.pricing_new .tab_content { margin-top: 1.5rem !important; } /* Premium landing — new pricing (Premium-only, no plan tabs) */ #pricing.pricing_new .heading_wrapper-medium-2 { max-width: 48rem; margin-left: auto; margin-right: auto; text-align: center; } #pricing.pricing_new .pricing_premium_standalone { display: block; width: 100%; } /* Trader marquee — YouTube thumbnails (no hover MP4) */ .hover_video_wrapper img.video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Tightened space between card rows and the centered "View All …" link. - Was 5rem margin-top with display:block — that pushed the link a screen away AND killed Webflow's `.middle_align { justify-content: center }`, so the link rendered LEFT-aligned instead of centered. - Now 1.75rem margin-top so the link sits close to the cards, and we re-assert flex+center so the link stays centered on every page. Uses ~ (general sibling) not + (adjacent) because a