during conversion keep the designed spacing. */ h1, h2, h3 { font-family: inherit; } :focus-visible { outline: 2px solid #DD2118; outline-offset: 3px; } /* ------------------------------------------------------- hover states -- Lifted out of the design's per-element hover attributes. The base colours are inline styles, so the hover rules need !important to win. */ .btn-nav-buy, .btn-primary { transition: background-color 0.15s ease, color 0.15s ease; } .btn-nav-buy:hover { background: #DD2118 !important; color: #fff !important; } .btn-primary:hover { background: #C11B13 !important; color: #fff !important; } /* --------------------------------------------------------------- cover -- First fold = nav + hero copy only. The 4-step .flow strip (inside header #top, after .hero-copy) must land below the fold on common desktop sizes. .hero-copy is given a height floor of "viewport minus the nav (108px, content-derived, not viewport-derived) minus the hero's own top padding (72px, see .hero inline style)" — once that floor is met, .flow's normal top margin naturally starts it past 100vh. min-height is a floor, not a cap, so short viewports where the copy is taller than the floor still render in full (no clipping) — they just scroll a little further before hitting .flow, which is fine. "safe center" balances the copy vertically when there's slack, and drops to top-alignment instead of centering into negative space when there isn't (older browsers that don't parse "safe center" ignore the declaration and keep the default top alignment, which is equally safe). Disabled entirely under 720px — see the mobile block below — so phones keep their existing compact spacing. */ .hero-copy { min-height: calc(100vh - 180px); display: flex; flex-direction: column; justify-content: safe center; } /* ----------------------------------------------------------- responsive -- The design is desktop-first and styled entirely inline, so every override below needs !important. Kept deliberately short. */ @media (max-width: 720px) { /* Cover-fold floor is desktop-only: on phones it would force a huge empty gap before .flow, which is exactly what we don't want here. */ .hero-copy { min-height: 0 !important; display: block !important; } /* Rhythm: 80–96px / 40px gutters come down to roughly 48px / 20px. */ .nav { padding: 16px 20px !important; flex-wrap: wrap !important; gap: 12px !important; } .nav-links { gap: 16px !important; flex-wrap: wrap !important; } .hero { padding: 40px 20px 48px !important; } .section-inner { padding: 48px 20px !important; } .page-main { padding: 32px 20px 64px !important; } .footer-inner { padding: 28px 20px !important; } /* Type scale. Bold (800) display type carries a bigger mobile size than you'd expect, so the hierarchy stays legible against 15px body copy: hero h1 44 -> section h2 32 -> page h1 34/36 -> subheads 18 -> body 15. Tighter line-height on the big headlines, left alone (loose, 1.5+) on body copy and the hero sub-paragraph, which already had its own mobile override. */ .hero-h1 { font-size: 44px !important; line-height: 1.08 !important; } .hero-sub { font-size: 17px !important; } .section-h2 { font-size: 32px !important; line-height: 1.15 !important; } .page-h1 { font-size: 34px !important; line-height: 1.12 !important; } /* Thanks page h1 is 48px on desktop (vs 42px for privacy/refunds/404), so it needs a taller mobile step than the shared .page-h1 rule gives the other policy pages. Applied together with .page-h1 on that one h1. */ .page-h1.page-h1--lg { font-size: 36px !important; } .buy-price { font-size: 38px !important; } .buy-price s { font-size: 22px !important; } /* Sub-headings one level below the section h2s: how-it-works step titles, FAQ questions, privacy card titles, and the thanks-page step titles (an h2 there, but the same visual level as the others' h3s). None of these had a mobile override before, so they were rendering at their desktop size (17-19px) immediately next to 15px body copy with nothing but their existing 700 weight to separate them. Standardised to one consistent size/line-height here; the bold weight (set inline, unchanged) does the rest of the contrast work against body text. */ .subhead { font-size: 18px !important; line-height: 1.3 !important; } /* The four-step hero flow stacks; the → connectors mean nothing vertically. */ .flow { flex-direction: column !important; gap: 28px !important; } .flow-arrow { display: none !important; } } @media (max-width: 460px) { /* Keep the Buy button reachable; drop the in-page anchors. */ .nav-anchor { display: none !important; } /* At 375–414px the logo (icon + wordmark) plus the Buy button no longer fit on one line at the wordmark's default 22px, forcing an awkward wrap onto a second row. Shrinking the wordmark alone is enough to keep both on one line without touching the icon or button. */ .wordmark { font-size: 16px !important; } }