/* ============================================================================= lp-v3.css — mobile-first responsive LAYER for the *-v3 landing pages ONLY. Loaded AFTER lp.css. Desktop layout stays governed by lp.css (intact); this file: (1) kills horizontal overflow (hard-failure fix), (2) reflows the hero with CSS grid so the value prop + the deliverable visual land above the fold on phones, while desktop keeps the copy-left / visual-right split, (3) stacks every multi-column block to full width on small screens, (4) slims the cookie-consent bar to an unobtrusive bottom strip. The live lp-* pages do NOT load this file and are completely unaffected. ============================================================================= */ /* ---- Standalone-document resets (v3 pages are full HTML docs, not Webflow fragments, so they own /). ---- */ html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; background: #ffffff; } /* ---- Overflow killers: nothing may exceed the viewport width. ---- */ .lp-wrapper { padding-top: 20px; overflow-x: clip; } .lp-wrapper img, .lp-wrapper video, .lp-wrapper iframe, .lp-wrapper picture, .lp-wrapper table, .lp-wrapper pre { max-width: 100%; } /* ---- Hero: CSS grid so the DOM order is mobile-first (head → visual → pitch) while desktop recreates the two-column split (copy left, visual right). head = eyebrow + headline; pitch = subcopy + CTA; visual spans both rows on desktop and sits between them on mobile. ---- */ .lp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "head visual" "pitch visual"; align-items: start; gap: 0 48px; max-width: 1100px; margin: 0 auto; } .lp-hero-head { grid-area: head; min-width: 0; text-align: left; } .lp-hero-pitch { grid-area: pitch; min-width: 0; text-align: left; } .lp-hero-visual { grid-area: visual; min-width: 0; align-self: start; } .lp-hero-video-solo { align-self: center; } /* full-suite video centers vs. the copy column */ /* =========================================================================== TABLET / SMALL (<= 860px) — single column, stacked, deliverable visual directly under the headline. =========================================================================== */ @media (max-width: 860px) { .lp-hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "pitch"; gap: 22px; } .lp-hero-visual, .lp-hero-video-solo { align-self: stretch; } /* Stack every multi-column proof block full width. */ .lp-proof-reports { grid-template-columns: 1fr; } .lp-proof-social { grid-template-columns: 1fr; } /* lp-social's per-platform cards come from marketing-plan.css (.sd-*) and are multi-column on desktop — force one readable column so they never overflow. */ .sd-social-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; } .sd-social-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Bounded preview frames stay inside the column. */ .lp-proof-listing-frame, .lp-proof-dash-frame { width: 100% !important; max-width: 100% !important; } } /* =========================================================================== PHONE (<= 560px) — tighten the hero so the value prop AND the deliverable visual are both reachable above the fold; size type for a phone. =========================================================================== */ @media (max-width: 560px) { .lp-header { padding: 12px 16px; } .lp-header-logo { height: 32px; } .lp-header-cta { padding: 9px 14px; font-size: 12.5px; } .lp-hero { padding: 20px 16px 26px; } .lp-hero-tight { padding-top: 16px; padding-bottom: 22px; } .lp-hero-grid { gap: 16px; } .lp-eyebrow { font-size: 12px; letter-spacing: 2px; margin: 0 0 9px; } .lp-hero h1 { font-size: 26px; line-height: 1.18; margin: 0 0 12px; } .lp-hero-sub { font-size: 15.5px; line-height: 1.5; margin: 0 0 18px; max-width: none; } .lp-cta-primary { display: block; width: 100%; text-align: center; padding: 15px 20px; font-size: 16px; } .lp-cta-sub { font-size: 13.5px; } /* Cap the hero visual so the headline still owns the very top, but the deliverable is clearly visible just beneath it (peeks above the fold). */ .lp-hero-visual img { max-height: 320px; width: auto; margin: 0 auto; } .lp-hero-visual.lp-hero-tall img { max-height: 320px; } .lp-hero-collage { grid-template-columns: 1fr; } .lp-section { padding: 26px 16px; } .lp-section h2 { font-size: 22px; line-height: 1.25; margin: 0 0 18px; } .lp-twotruths p { font-size: 16.5px; line-height: 1.55; } .lp-proof-frame { font-size: 15.5px; margin-bottom: 26px; } .lp-proof-eyebrow { margin-bottom: 12px; } .lp-proof-head { font-size: 12px; letter-spacing: 1.4px; padding: 10px 12px; } .lp-proof-cap { font-size: 14px; } .lp-proof-item { margin: 0 0 30px; } .lp-get-list li { font-size: 15.5px; padding: 16px 16px 16px 52px; } .lp-get-list li::before { left: 14px; top: 16px; } .lp-reason p { font-size: 16px; } /* Shorter preview frames so the clipped demo previews don't dominate. */ .lp-proof-listing-frame { height: 520px !important; } .lp-proof-dash-frame { height: 460px !important; } .lp-proof-close p { font-size: 17px; } .lp-proof-cta { display: block; width: 100%; text-align: center; } .lp-proof-fulllink { font-size: 14.5px; } } /* =========================================================================== COMPACT ABOVE-THE-FOLD CTA (mobile only). Lives in .lp-hero-head, right under the headline, so a non-scrolling visitor sees "what this is + how to start" in the first viewport. Hidden on desktop, where the hero's main CTA already shows in the pitch column (desktop intact). =========================================================================== */ .lp-cta-compact { display: none; } @media (max-width: 860px) { .lp-cta-compact { display: inline-block; margin: 14px 0 2px; background: #ffffff; color: var(--lp-navy) !important; font-weight: 800; font-size: 16px; text-decoration: none; padding: 13px 26px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.28); } } @media (max-width: 560px) { .lp-cta-compact { display: block; width: 100%; text-align: center; padding: 14px 20px; margin: 12px 0 2px; } } /* =========================================================================== COOKIE CONSENT BAR — forced to a single slim line on EVERY page/width so it reclaims vertical space and renders IDENTICALLY across all five v3 pages (the prior version wrapped to 1–2 lines inconsistently). The explanatory text ellipsis-truncates; the Decline/Accept buttons + consent mechanism stay fully intact. Overrides the runtime