, not ) — otherwise keyboard/spacebar scrolls fire instantly without animation. */ } body { font-family: var(--font); color: var(--text); letter-spacing: -0.01em; /* NO zoom on mobile — iOS Safari mis-handles body zoom (content shrinks but the layout viewport doesn't, shoving everything off-center; Peyton hit this live 2026-07-07). Desktop keeps the slight scale-down below. */ } /* NOTE: a desktop `body { zoom: 0.98 }` used to live here to trim the landing ~2% on non-Chrome Mac browsers. Removed — `zoom < 1` anchors top-left, leaving a ~2% gap on the RIGHT edge. Invisible on centered pages, but the full-bleed services marquee stopped short of the right edge because of it (Peyton, 2026-07-08). Full-bleed edge-to-edge wins. */ main { /* Mandatory snap + always-stop = each scroll gesture locks to exactly one page. Can't blast through multiple sections with a single swipe. Reads slower / more controlled / more Apple-like than proximity. */ scroll-snap-type: y mandatory; scroll-behavior: smooth; /* keyboard/spacebar scrolls animate */ overflow-y: scroll; overflow-x: hidden; /* svh = "small viewport height" — always the smallest possible viewport, i.e. the chunk of screen that's ALWAYS visible regardless of whether the browser's URL bar / toolbar is showing. Using 100vh instead clips the bottom of each page in iOS Chrome, Instagram in-app browser, and anywhere the browser draws chrome on top of the viewport. */ height: 100svh; scrollbar-width: none; } main::-webkit-scrollbar { display: none; } /* ── Pages (each full viewport, snap target) ───────────── */ .page { min-height: 100svh; /* matches main's height — never overflows browser chrome */ width: 100vw; scroll-snap-align: start; scroll-snap-stop: always; /* lock to one page per swipe — no overshoot */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; /* trimmed from 60 → 40 so content fits in shorter browser chromes */ background: var(--bg); position: relative; /* anchors page-scoped absolute elements (scroll-down button, footer) */ } /* ── Page 1 — Hero ─────────────────────────────────────── */ .page-hero { /* Headline block is centered horizontally on the page, but the TEXT INSIDE the block is left-aligned (each line starts at the same x). Block hangs in the vertical center. */ align-items: center; justify-content: center; padding-left: 24px; padding-right: 24px; } .hero-headline { font-family: var(--font); font-weight: 500; font-size: 56px; /* trimmed from 64 — fits Chrome / IG browser viewports */ line-height: 1.10; letter-spacing: -0.01em; text-align: left; color: var(--text); /* Block sizes to its widest line — never use a max-width here, or internal wrap could break the layout. The .line spans below guarantee each line stays atomic. */ width: max-content; max-width: 100%; } .hero-headline .line { display: block; white-space: nowrap; /* lock each line — never re-wrap regardless of viewport */ } /* /forproviders hero has longer lines ("More customers." etc.) than the customer landing's ("Hello to"). Shrink specifically on this page so the block doesn't overflow narrow viewports. */ .page-forproviders .hero-headline { font-size: 44px; } @media (min-width: 768px) { .page-forproviders .hero-headline { font-size: 60px; } } @media (min-width: 1100px) { .page-forproviders .hero-headline { font-size: 68px; } } .hero-headline .accent { color: var(--orange); } /* Down-arrow button on hero — primes "scroll for more" + clickable shortcut to the next page. Centered by margin (NOT translateX) so it composes cleanly with the .reveal fade-in transforms. */ .scroll-down-btn { position: absolute; /* Sits well above the iPhone Safari URL bar + home-indicator. */ bottom: calc(100px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; margin: 0 auto; width: 48px; height: 48px; border-radius: 999px; border: none; background: rgba(0, 0, 0, 0.10); /* light grey */ color: #FFFFFF; /* white arrow */ display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, transform 0.08s; -webkit-tap-highlight-color: transparent; } .scroll-down-btn:hover { background: rgba(0, 0, 0, 0.16); } .scroll-down-btn:active { transform: scale(0.92); } .scroll-down-btn svg { width: 22px; height: 22px; display: block; } @media (min-width: 768px) { .scroll-down-btn { width: 52px; height: 52px; bottom: 80px; } .scroll-down-btn svg { width: 24px; height: 24px; } } /* ── Page 5 — Intro / explainer ────────────────────────── */ /* Spec: SF Pro Display 32pt medium, black, left-aligned, block 319pt wide. Scales up modestly on larger screens. */ .page-intro { align-items: center; justify-content: center; } .intro-headline { font-family: var(--font); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; text-align: left; color: var(--text); width: 319px; max-width: 100%; } /* ── Pages 2-4 — Phone + caption ───────────────────────── */ .page-phone { gap: 28px; } .phone-wrap { display: flex; align-items: center; justify-content: center; } .phone { display: block; /* Width is the EXPLICIT mobile size, but max-width keeps it from ever blowing past 60% of the viewport width. Max-height keeps the phone+caption combo from overflowing on short viewports (iPhone Chrome with persistent bottom bar = ~580px usable height). */ width: 220px; /* dialed down from 260 for Chrome / IG browser fit */ height: 449px; /* preserves the 0.49 aspect ratio of the mockup */ max-width: 60vw; max-height: 62svh; object-fit: contain; /* preserve aspect, don't crop the bezel */ user-select: none; -webkit-user-drag: none; } .caption { font-family: var(--font); font-weight: 400; font-size: 32px; line-height: 1.2; color: var(--text); text-align: center; max-width: 275px; } /* ── Page 6 — Services marquee (snap-locked, like other pages) ─── */ /* Whole body (headline + marquee) is centered vertically AND horizontally. Headline sits naturally above pills with deliberate spacing. Marquee always stretches to full viewport width regardless of the header block's narrow width. */ .section-services { justify-content: center; align-items: center; padding: 0; gap: 56px; /* spacing between headline and pills */ } .section-header { text-align: left; width: 319px; /* identical to .intro-headline on page 5 */ max-width: 100%; padding: 0; } .section-headline { font-family: var(--font); font-weight: 500; /* medium — match page 5 */ font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); } .section-headline .line { display: block; white-space: nowrap; } .section-sub { margin-top: 20px; font-family: var(--font); font-weight: 400; /* regular */ font-size: 19px; line-height: 1.4; letter-spacing: -0.005em; color: rgba(0, 0, 0, 0.90); /* near black */ text-align: left; } .marquee-stack { width: 100%; /* fills viewport regardless of section's align-items: center */ display: flex; flex-direction: column; gap: 12px; } /* Marquee: each row scrolls infinitely. The track holds two copies of the pill list back-to-back; animating it by exactly -50% (or 0 → -50% reversed) makes the loop seamless. No mask — edge-to-edge pills. */ .marquee { overflow: hidden; width: 100%; pointer-events: none; /* taps/touches fall through — marquee never pauses */ touch-action: none; -webkit-tap-highlight-color: transparent; } .marquee-track { display: flex; gap: 12px; width: max-content; will-change: transform; animation-play-state: running !important; /* nothing can pause us */ } .marquee-left { animation: marquee-left var(--dur, 40s) linear infinite; } .marquee-right { animation: marquee-right var(--dur, 45s) linear infinite; } /* Track holds 4 copies; translating by -25% advances by exactly 1 copy (visually identical to start). 4x oversupply guarantees the visible window is always full — never a gap, even on ultra-wide displays. */ @keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-25%); } } @keyframes marquee-right { from { transform: translateX(-25%); } to { transform: translateX(0); } } .pill { flex-shrink: 0; padding: 11px 20px; border-radius: 999px; background: var(--orange); color: #FFFFFF; font-family: var(--font); font-weight: 500; font-size: 16px; letter-spacing: -0.005em; white-space: nowrap; user-select: none; } /* ── /forproviders "The deal." — vertical give-and-take ───── */ .section-deal { justify-content: center; align-items: center; gap: 40px; } .deal-lists { width: 319px; /* matches section-header — same left edge */ max-width: 100%; display: flex; flex-direction: column; gap: 36px; } .deal-group-title { font-family: var(--font); font-weight: 500; /* one thickness thinner — was 600 */ font-size: 20px; /* subheader treatment, smaller than main headline */ color: var(--text); letter-spacing: -0.01em; margin-bottom: 14px; } .deal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .deal-list li { font-family: var(--font); font-weight: 400; font-size: 19px; line-height: 1.35; letter-spacing: -0.005em; color: var(--text); padding-left: 20px; position: relative; } .deal-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); } /* ── /forproviders — How it works steps ───────────────────── */ .provider-steps { width: 319px; /* matches section-header — same left edge */ max-width: 100%; display: flex; flex-direction: column; gap: 32px; } .step { display: flex; align-items: flex-start; gap: 18px; } .step-num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; background: var(--orange); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; } .step-text { flex: 1; min-width: 0; } .step-title { font-family: var(--font); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); margin-bottom: 6px; } .step-sub { font-family: var(--font); font-weight: 400; font-size: 17px; line-height: 1.4; letter-spacing: -0.005em; color: rgba(0, 0, 0, 0.65); } /* ── /forproviders sister-link below the CTA form ─────────── */ .cta-provider-link { margin-top: 0; font-family: var(--font); font-weight: 400; font-size: 15px; letter-spacing: -0.005em; color: rgba(0, 0, 0, 0.55); text-decoration: none; transition: color 0.18s; } .cta-provider-link:hover { color: var(--orange); } /* ── Page 7 — Early Access CTA ─────────────────────────────── */ .page-cta { justify-content: center; align-items: center; /* Just enough bottom reserve that the block clears the absolute footer on short viewports. Was 110px, which shoved the whole entity visibly HIGH — big dead zone between the For-providers link and the copyright line. 40px keeps clearance while letting the block sit truly centered (Peyton 2026-07-07). */ padding: 0 0 40px 0; gap: 40px; position: relative; /* anchors the absolute-positioned footer */ } .page-footer { position: absolute; /* iPhone Safari's dynamic URL bar eats the bottom — pad enough that the footer clears it AND the home-indicator safe area. */ bottom: calc(60px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-family: var(--font); font-weight: 400; font-size: 13px; letter-spacing: 0.01em; color: rgba(0, 0, 0, 0.45); } @media (min-width: 768px) { .page-footer { bottom: 32px; } /* desktop has no dynamic URL bar to dodge */ } .cta-form { width: 319px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; } /* HTML `hidden` defaults to display:none — but display:flex above wins without this override. Same for the success block. */ .cta-form[hidden], .cta-success[hidden] { display: none !important; } .cta-input { width: 100%; padding: 16px 24px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 999px; /* full pill */ background: rgba(255, 255, 255, 0.5); font-family: var(--font); font-weight: 400; font-size: 17px; color: var(--text); outline: none; transition: border-color 0.2s, background 0.2s; -webkit-appearance: none; } .cta-input::placeholder { color: rgba(0, 0, 0, 0.4); } .cta-input:focus { border-color: var(--orange); background: rgba(255, 255, 255, 0.85); } .cta-submit { width: 100%; margin-top: 4px; padding: 16px 20px; border: none; border-radius: 999px; /* full pill, matches inputs */ background: var(--orange); color: #FFFFFF; font-family: var(--font); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; cursor: pointer; transition: opacity 0.2s, transform 0.08s; } .cta-submit:hover { opacity: 0.92; } .cta-submit:active { transform: scale(0.98); } .cta-submit:disabled { opacity: 0.6; cursor: default; } .cta-status { min-height: 22px; margin-top: 4px; } /* Collapse entirely while empty — the reserved line was half the dead space between the submit button and the For-providers link. Layout nudges when a message appears, which is fine (it's an error state). */ .cta-status:empty { display: none; font-family: var(--font); font-weight: 400; font-size: 15px; text-align: center; color: rgba(0, 0, 0, 0.75); } .cta-status.error { color: var(--orange); } /* Success state — replaces the form entirely on successful submit. Same width as .cta-form so the page layout doesn't shift. */ .cta-success { width: 319px; max-width: 100%; text-align: center; } .cta-success-msg { font-family: var(--font); font-weight: 400; /* regular — one notch lighter than 500 */ font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; color: var(--orange); } @media (min-width: 768px) { .cta-success { width: 480px; } .cta-success-msg { font-size: 38px; } } @media (min-width: 1100px) { .cta-success { width: 520px; } .cta-success-msg { font-size: 44px; } } /* ── Reveal-on-scroll (set by JS via IntersectionObserver) ── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .reveal.in { opacity: 1; transform: translateY(0); } /* ── Larger screens ────────────────────────────────────── */ @media (min-width: 768px) { .hero-headline { font-size: 76px; /* up from 64 — modest bump */ } .page-hero { padding-left: 80px; padding-right: 80px; } .phone { width: 280px; height: 572px; } .caption { font-size: 32px; max-width: 320px; } .intro-headline { font-size: 40px; width: 480px; } .section-services { gap: 64px; } .section-header { width: 480px; } .section-headline { font-size: 40px; } .section-sub { font-size: 21px; margin-top: 22px; } .pill { padding: 13px 24px; font-size: 18px; } .marquee-track { gap: 14px; } .marquee-stack { gap: 14px; } .provider-steps { width: 480px; gap: 40px; } .step { gap: 22px; } .step-num { width: 48px; height: 48px; font-size: 22px; } .step-title { font-size: 28px; } .step-sub { font-size: 20px; } .deal-lists { width: 480px; gap: 44px; } .deal-group-title { font-size: 24px; margin-bottom: 18px; } .deal-list li { font-size: 22px; padding-left: 24px; } .deal-list li::before { top: 14px; width: 7px; height: 7px; } .page-cta { gap: 48px; } .cta-form { width: 480px; } .cta-input { font-size: 18px; padding: 18px 26px; } .cta-submit { font-size: 19px; padding: 18px 22px; } } @media (min-width: 1100px) { .hero-headline { font-size: 84px; /* capped here — premium > shouting */ } .page-hero { padding-left: 120px; padding-right: 120px; } .phone { width: 300px; height: 613px; } .caption { font-size: 34px; max-width: 340px; } .intro-headline { font-size: 48px; width: 580px; } .section-services { gap: 72px; } .section-header { width: 580px; } .section-headline { font-size: 48px; } .section-sub { font-size: 23px; margin-top: 24px; } .pill { padding: 15px 28px; font-size: 20px; } .marquee-track { gap: 16px; } .marquee-stack { gap: 16px; } .provider-steps { width: 580px; gap: 44px; } .step { gap: 24px; } .step-num { width: 54px; height: 54px; font-size: 24px; } .step-title { font-size: 32px; } .step-sub { font-size: 22px; } .deal-lists { width: 580px; gap: 52px; } .deal-group-title { font-size: 28px; margin-bottom: 20px; } .deal-list li { font-size: 26px; padding-left: 28px; } .deal-list li::before { top: 16px; width: 8px; height: 8px; } .page-cta { gap: 56px; } .cta-form { width: 520px; } .cta-input { font-size: 19px; padding: 20px 24px; } .cta-submit { font-size: 20px; padding: 20px 24px; } } /* Short-viewport (landscape phone) — disable snap, free scroll */ @media (max-height: 600px) { main { scroll-snap-type: none; } .page { min-height: auto; padding: 40px 24px; } .phone { width: 200px; height: 408px; } .hero-headline { font-size: 48px; } .caption { font-size: 26px; } } /* /forproviders uses the same mandatory page-snap lock as the main landing (the free-scroll trial was reverted — Peyton preferred the lock). It inherits `main`'s snap + `.page`'s snap-align globally. */