/* ========================================================================== RESPONSIVE BREAKPOINT CONVENTION Exactly three max-width values are used anywhere in this file. CSS custom properties can't be referenced inside @media conditions, so this is an enforced convention, not a variable - keep new media queries on these values instead of introducing new ones: 900px Tablet : nav becomes a burger menu, 3/4-col grids drop to 2-col 768px Mobile : single-column/stacked layouts, tightened spacing 480px Small phone : final squeeze (stacked buttons, reduced padding) ========================================================================== */ /* ========================================================================== RESET (minimal) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* overflow-x:hidden on body alone is a well-documented insufficient fix for iOS Safari: its rubber-band/elastic horizontal drag is tied to 's own scrollability, not just 's. Both need it, or a real device can still show a draggable horizontal scroll that desktop Chrome (including DevTools device emulation, which is still Blink underneath) never reproduces, because Blink ties the affordance to body correctly. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { min-height: 100vh; } img, picture, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; } ul, ol { list-style: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== PART 1. BRAND SYSTEM : CSS VARIABLES ========================================================================== */ :root { /* 1.1 Core brand */ --bp-dark: #0F2D24; --bp-green: #2E7D4F; --bp-lime: #D4FF00; --bp-lime-hover: #C8F000; --bp-lime-text: #0F2D24; --bp-white: #F5F5F5; --bp-black: #0A0A0A; /* Surfaces : only these two backgrounds are used anywhere on the page */ --bp-surface-1: #0A1A12; --bp-surface-2: #0F2D24; /* Component-level fills (dropdown panels, form inputs on other pages) */ --bp-surface-3: #122B1E; --bp-surface-4: #1A3D2A; /* Pure white (hover-brightened titles only) */ --bp-white-pure: #FFFFFF; /* Borders / lines : rgba(255,255,255,X) family */ --bp-border: rgba(255, 255, 255, 0.07); --bp-border-hover: rgba(255, 255, 255, 0.15); --bp-line-03: rgba(255, 255, 255, 0.03); --bp-line-04: rgba(255, 255, 255, 0.04); --bp-line-06: rgba(255, 255, 255, 0.06); --bp-line-08: rgba(255, 255, 255, 0.08); --bp-line-10: rgba(255, 255, 255, 0.10); --bp-line-15: rgba(255, 255, 255, 0.15); --bp-line-20: rgba(255, 255, 255, 0.20); --bp-line-40: rgba(255, 255, 255, 0.40); /* Text ink : rgba(245,245,245,X) family */ --bp-ink-22: rgba(245, 245, 245, 0.22); --bp-ink-25: rgba(245, 245, 245, 0.25); --bp-ink-30: rgba(245, 245, 245, 0.30); --bp-ink-35: rgba(245, 245, 245, 0.35); --bp-ink-45: rgba(245, 245, 245, 0.45); --bp-ink-50: rgba(245, 245, 245, 0.50); --bp-ink-55: rgba(245, 245, 245, 0.55); --bp-ink-65: rgba(245, 245, 245, 0.65); --bp-ink-70: rgba(245, 245, 245, 0.70); --bp-ink-75: rgba(245, 245, 245, 0.75); --bp-ink-80: rgba(245, 245, 245, 0.80); --bp-ink-90: rgba(245, 245, 245, 0.90); /* Back-compat aliases used across many components */ --bp-text-muted: var(--bp-ink-45); --bp-text-sub: var(--bp-ink-65); /* Status colors (errors/success on forms only, not a design accent) */ --bp-critical: #FF6B6B; --bp-minor: #6BCB8B; /* Report preview (light-context card) */ --bp-report-bg: #F5F5F5; --bp-report-text: #0A0A0A; --bp-report-ink-40: rgba(10, 10, 10, 0.40); --bp-report-ink-50: rgba(10, 10, 10, 0.50); --bp-report-ink-55: rgba(10, 10, 10, 0.55); --bp-report-ink-60: rgba(10, 10, 10, 0.60); --bp-report-ink-70: rgba(10, 10, 10, 0.70); --bp-report-ink-75: rgba(10, 10, 10, 0.75); --bp-report-line: rgba(10, 10, 10, 0.08); /* Shadows : solid black only, no colored/glow shadows anywhere */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); --shadow-xl: 0 32px 80px rgba(0,0,0,0.6); /* 1.2 Typography */ --font: 'Poppins', system-ui, -apple-system, sans-serif; --text-display: clamp(3.5rem, 7vw, 6rem); --text-h1: clamp(2.5rem, 5vw, 4rem); --text-h2: clamp(1.5rem, 2.5vw, 2rem); --text-h3: clamp(1.125rem, 1.5vw, 1.375rem); --text-body-lg: clamp(1rem, 1.25vw, 1.125rem); --text-body: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --lh-display: 1.0; --lh-heading: 1.2; --lh-body: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* 1.3 Spacing + Layout */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; --max-w: 1120px; --page-x: clamp(1.25rem, 5vw, 4rem); /* Fluid section spacing: one formula scales continuously from small phones to large desktops with no breakpoint jump. Floor (3.5rem) is reached at any width below ~560px, so small/large phones share a sane, uniform value instead of inheriting desktop-scale padding. */ --section-y: clamp(3.5rem, 10vw, 10rem); /* 1.4 Border radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 16px; --radius-full: 9999px; /* 1.5 Motion */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-micro: 150ms; --dur-fast: 250ms; --dur-base: 350ms; --dur-slow: 500ms; --dur-page: 650ms; } /* ========================================================================== BASE TYPOGRAPHY ========================================================================== */ body { font-family: var(--font); font-weight: var(--fw-regular); font-size: var(--text-body); line-height: var(--lh-body); color: var(--bp-white); background: var(--bp-surface-2); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--bp-white); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } p { color: var(--bp-text-sub); } a { text-decoration: none; } svg { flex-shrink: 0; } ::selection { background: var(--bp-line-20); color: var(--bp-white); } :focus-visible { outline: 2px solid var(--bp-white); outline-offset: 2px; } /* ========================================================================== LAYOUT UTILITIES ========================================================================== */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-x); } .section { padding: var(--section-y) var(--page-x); } .section-inner { max-width: var(--max-w); margin: 0 auto; } /* Plain-text label, no pill, no background : matches hero eyebrow treatment */ .section-label { display: block; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-ink-35); margin-bottom: var(--space-4); } .section-header { max-width: 720px; margin-bottom: var(--space-12); } .section-header h2 { margin-bottom: var(--space-4); } .aeo-lead { font-size: var(--text-body-lg); line-height: var(--lh-body); color: var(--bp-text-sub); max-width: 720px; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-group > * { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal-group.in-view > * { opacity: 1; transform: translateY(0); } .reveal-group > *:nth-child(1) { transition-delay: 0ms; } .reveal-group > *:nth-child(2) { transition-delay: 80ms; } .reveal-group > *:nth-child(3) { transition-delay: 160ms; } .reveal-group > *:nth-child(4) { transition-delay: 240ms; } .reveal-group > *:nth-child(5) { transition-delay: 320ms; } .reveal-group > *:nth-child(6) { transition-delay: 400ms; } /* ========================================================================== BUTTONS ========================================================================== */ /* Generic btn system : used on pages outside this redesign's scope (solutions/blog/forms). Kept neutral, no lime. */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font); font-weight: var(--fw-semibold); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; border: none; transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .btn-primary { background: var(--bp-white); color: var(--bp-dark); font-weight: var(--fw-bold); } .btn-primary:hover { background: var(--bp-ink-90); } .btn-ghost { background: transparent; color: var(--bp-white); border: 1px solid var(--bp-line-20); font-weight: var(--fw-medium); } .btn-ghost:hover { border-color: var(--bp-line-40); background: var(--bp-line-04); } .btn-lg { padding: 16px 36px; font-size: 16px; letter-spacing: -0.01em; justify-content: center; } .btn-sm { padding: 0.55rem 1.25rem; font-size: var(--text-sm); } .btn-md { padding: 0.75rem 1.5rem; font-size: var(--text-sm); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Primary lime CTA : hero, Growth pricing card, waitlist submit. Nowhere else. */ .btn-lime { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--bp-lime); color: var(--bp-lime-text); font-weight: var(--fw-bold); font-size: 15px; padding: 14px 28px; border-radius: var(--radius-sm); border: none; text-decoration: none; cursor: pointer; transition: background var(--dur-micro) linear; } .btn-lime:hover { background: var(--bp-lime-hover); } /* Small lime CTA (Growth pricing card) */ .btn-lime-sm { display: block; width: 100%; background: var(--bp-lime); color: var(--bp-lime-text); font-size: var(--text-sm); font-weight: var(--fw-bold); padding: 10px; border-radius: var(--radius-sm); text-align: center; border: none; cursor: pointer; text-decoration: none; transition: background var(--dur-micro) linear; } .btn-lime-sm:hover { background: var(--bp-lime-hover); } /* White outlined CTA (Free / Starter / Scale pricing cards) */ .btn-outline { display: block; width: 100%; background: transparent; border: 1px solid var(--bp-line-20); color: var(--bp-white); font-size: var(--text-sm); font-weight: var(--fw-medium); padding: 10px; border-radius: var(--radius-sm); text-align: center; cursor: pointer; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); } .btn-outline:hover { border-color: var(--bp-line-40); background: var(--bp-line-04); } /* ========================================================================== CARDS : flat, geometric, border-only hover. No lift. No shadow on hover. ========================================================================== */ .card { background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--radius-md); padding: var(--space-7); transition: border-color var(--dur-fast) var(--ease-out); } .card:hover { border-color: var(--bp-border-hover); } /* ========================================================================== NAVIGATION ========================================================================== */ /* Floating pill nav : centered capsule above the page content */ .nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; width: calc(100% - 48px); max-width: 1000px; background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--bp-line-08); border-radius: 100px; padding: 0 8px 0 20px; height: 52px; display: flex; align-items: center; justify-content: space-between; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .nav.scrolled { background: rgba(10, 10, 10, 0.92); } .nav.hidden { transform: translateX(-50%) translateY(calc(-100% - 20px)); } .nav.visible { transform: translateX(-50%) translateY(0); } .nav-inner { width: 100%; height: 100%; display: flex; align-items: center; gap: var(--space-6); } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 32px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--space-2); margin: 0 auto; } .nav-link { font-size: 14px; font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.6); text-decoration: none; background: none; border: none; cursor: pointer; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-1); transition: color var(--dur-micro), background var(--dur-micro); } .nav-link:hover { color: rgba(255, 255, 255, 0.9); background: var(--bp-line-06); } /* Lime pill CTA inside the nav */ .nav-cta { display: inline-flex; align-items: center; background: var(--bp-lime); color: var(--bp-black); font-weight: var(--fw-bold); border-radius: 100px; padding: 8px 20px; font-size: 14px; border: none; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur-micro) linear; } .nav-cta:hover { background: var(--bp-lime-hover); } .nav-item--dropdown { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-8px); width: 280px; background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); pointer-events: none; z-index: 200; } .nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown, .nav-item--dropdown.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .nav-dropdown-inner { padding: var(--space-4); } .nav-dropdown-label { font-size: 0.65rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-text-muted); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1); } .nav-dropdown-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); text-decoration: none; transition: background var(--dur-micro); } .nav-dropdown-item:hover { background: var(--bp-surface-3); } .nav-dropdown-title { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--bp-white); display: flex; align-items: center; gap: var(--space-2); } .nav-dropdown-sub { font-size: 0.7rem; color: var(--bp-text-muted); } .nav-dropdown-divider { height: 1px; background: var(--bp-border); margin: var(--space-2) 0; } .nav-dropdown-item--muted .nav-dropdown-title { color: var(--bp-text-muted); } .nav-coming-soon { font-size: 0.6rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-ink-70); background: transparent; border: 1px solid var(--bp-line-15); padding: 0.15rem 0.4rem; border-radius: var(--radius-full); } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; } .nav-burger span { display: block; width: 100%; height: 2px; background: var(--bp-white); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-drawer { position: fixed; inset: 0; z-index: 300; background: rgba(10, 26, 18, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); } .nav-drawer.open { opacity: 1; visibility: visible; } .nav-drawer-close { position: absolute; top: var(--space-6); right: var(--page-x); width: 40px; height: 40px; } .nav-drawer-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; } .nav-drawer-link { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--bp-white); } .nav-drawer-accordion-trigger { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--bp-white); display: flex; align-items: center; gap: var(--space-2); } .nav-drawer-sub { display: flex; flex-direction: column; gap: var(--space-4); max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out); } .nav-drawer-sub.open { max-height: 400px; margin-top: var(--space-4); } .nav-drawer-sub a { font-size: var(--text-body); color: var(--bp-text-sub); } @media (max-width: 900px) { .nav { width: calc(100% - 32px); top: 12px; border-radius: 16px; } .nav-links { display: none; } .nav-burger { display: flex; margin-left: auto; } .nav-cta-desktop { display: none; } } /* ========================================================================== HERO : single section, stacked centered rows (vertaaux.ai structure) Near-black background with dot grid texture. The radial-gradient below is the one allowed texture pattern, not a color gradient. ========================================================================== */ .hero { background-color: var(--bp-black); background-image: radial-gradient( circle, var(--bp-line-06) 1px, transparent 1px ); background-size: 28px 28px; padding: 160px var(--page-x) 80px; text-align: center; } /* Plain-text eyebrow : no pill, no background, no border (used by waitlist + trust sections) */ .eyebrow { display: block; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-ink-35); margin-bottom: var(--space-8); } /* Part A : centered copy block */ .hero-copy { max-width: 720px; margin: 0 auto 48px; } .hero-pills { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; } .hero-pill { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--bp-line-15); border-radius: 100px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-ink-45); background: var(--bp-line-03); } .hero-pill-dot { color: var(--bp-line-15); font-size: 12px; } .hero-h1 { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.03em; color: var(--bp-white); text-align: center; margin-bottom: 24px; } .hero-h1-accent { color: var(--bp-lime); display: block; } .hero-sub { font-size: 1.125rem; line-height: 1.7; color: var(--bp-ink-45); text-align: center; max-width: 520px; margin: 0 auto 36px; } .hero-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } .hero-cta-hint { font-size: 12px; color: var(--bp-ink-22); text-align: center; } /* Part B : timer-driven browser demonstration (inside hero, below copy) */ .hero-browser-stage { position: relative; max-width: 760px; margin: 0 auto 80px; /* Local safety net: the popup's position is computed dynamically by JS from the extension icon's real (post-scale) on-screen position. If that computation is ever off for any reason, this guarantees the popup is clipped locally instead of being able to push the page itself into horizontal scroll - it can misplace, it can no longer leak outside this component. Costs a few px of the popup/mockup shadows at the very edge, which is an acceptable trade for this. */ overflow: hidden; /* Set by JS to whatever height the tallest popup screen actually needs at the current scale (see positionDemoOverlays in main.js) - without this, the same overflow:hidden above can clip the bottom of the popup (e.g. the Submit button on the Review screen) on narrow screens, where the scaled mockup - and the stage height that follows it - shrinks faster than the popup itself does. min-height only ever grows the box, so this is a no-op wherever the mockup is already tall enough. */ min-height: var(--stage-min-height, 0px); } /* Reserves a box at the correct proportions and clips the browser mockup, which always renders at its authored 760px size (see .demo-browser) and is scaled down to fit via CSS transform - not by reflowing its contents. aspect-ratio is the default/no-JS-fallback height; JS (positionDemoOverlays in main.js) overrides --wrap-height directly whenever the popup needs the mockup's own canvas taller than its natural 540px design height. Explicit height always wins over aspect-ratio, so this is a clean override, not a conflict - aspect-ratio only ever applies while --wrap-height is unset. */ .demo-browser-scale-wrap { position: relative; width: 100%; aspect-ratio: 760 / 540; height: var(--wrap-height, auto); overflow: hidden; } /* ---- browser chrome shell ---- */ .demo-browser { --demo-bg: #FFFFFF; --demo-sidebar: #F8F9FA; --demo-border: #E5E7EB; --demo-ink: #111827; --demo-ink-muted: #6B7280; --demo-accent: #3B82F6; --demo-success-bg: rgba(34, 197, 94, 0.1); --demo-success-ink: #16A34A; --demo-danger-bg: rgba(239, 68, 68, 0.1); --demo-danger-ink: #DC2626; position: relative; /* Always lays out at the authored desktop size (760px, matching .hero-browser-stage's max-width), then scaled down to fit whatever width is actually available - one continuous formula, no breakpoints, works identically at 320px or 3200px. Deliberately vw, not cqw (container query units): cqw has real support gaps on real-world mobile browsers as of 2026, and when unsupported the whole transform value is invalid and gets dropped entirely - producing the worst possible fallback (full 760px, unscaled, overflowing every phone). vw has been universally supported for a decade-plus with no such gap. 100vw is the full viewport width, not the space actually available to this component, so .hero's own horizontal padding (--page-x, applied on both sides) is subtracted first. min(1, ...) stops it from ever scaling up past 1 once the available width exceeds 760px (matching .hero-browser-stage's own max-width cap). */ width: 760px; /* Default (auto) sizes to its content, chrome (~78px) + body (460px). JS grows this - the mockup's own unscaled canvas - whenever the popup needs more vertical room than that at the current scale, so the extra space renders as more of this element's own white background (see --demo-bg) rather than the popup floating past the mockup onto the dark hero background behind it. */ height: var(--browser-canvas-height, auto); transform-origin: top left; transform: scale(min(1, calc((100vw - 2 * var(--page-x)) / 760px))); border-radius: 14px; overflow: hidden; background: var(--demo-bg); box-shadow: 0 48px 96px rgba(0, 0, 0, 0.55); } .demo-browser-chrome { background: var(--demo-sidebar); border-bottom: 1px solid var(--demo-border); } .demo-browser-tabs { display: flex; gap: 4px; padding: 10px 12px 0; } .demo-tab { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px 8px 0 0; font-size: 12px; color: var(--demo-ink-muted); background: transparent; } .demo-tab--active { background: var(--demo-bg); color: var(--demo-ink); } .demo-tab-favicon { width: 10px; height: 10px; border-radius: 3px; background: var(--demo-accent); flex-shrink: 0; } .demo-browser-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--demo-bg); } .demo-nav-btns { display: flex; gap: 6px; flex-shrink: 0; } .demo-nav-btn { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--demo-border); } .demo-address-bar { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: var(--demo-sidebar); border: 1px solid var(--demo-border); min-width: 0; } .demo-address-favicon { width: 10px; height: 10px; border-radius: 3px; background: var(--demo-accent); flex-shrink: 0; } .demo-address-url { font-size: 12px; color: var(--demo-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo-ext-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .demo-ext-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, box-shadow 0.3s; } .demo-ext-icon--ghost { background: var(--demo-border); opacity: 0.6; } .demo-ext-icon--bp { background: var(--bp-black) url('/assets/icon-32.png') center / 18px 18px no-repeat; overflow: hidden; } /* ---- browser body : inner SaaS app ---- */ .demo-browser-body { position: relative; display: flex; height: 460px; } .demo-sidebar { width: 168px; flex-shrink: 0; background: var(--demo-sidebar); border-right: 1px solid var(--demo-border); padding: 16px 12px; } .demo-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--demo-ink-muted); border-left: 3px solid transparent; } .demo-sidebar-item--active { color: var(--demo-ink); border-left-color: var(--demo-accent); font-weight: 600; } .demo-sidebar-icon { width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: 0.35; flex-shrink: 0; } .demo-main { flex: 1; min-width: 0; padding: 20px; overflow: hidden; } .demo-metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; } .demo-metric-card { background: var(--demo-bg); border: 1px solid var(--demo-border); border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 2px; } .demo-metric-value { font-size: 14px; font-weight: 600; color: var(--demo-ink); } .demo-metric-label { font-size: 11px; color: var(--demo-ink-muted); } .demo-chart { margin-bottom: 18px; } .demo-chart-label { display: block; font-size: 13px; font-weight: 600; color: var(--demo-ink); margin-bottom: 8px; } .demo-chart-bar { height: 8px; border-radius: 100px; background: var(--demo-border); overflow: hidden; } .demo-chart-bar span { display: block; height: 100%; background: var(--demo-accent); border-radius: 100px; } .demo-table { width: 100%; border-collapse: collapse; font-size: 13px; } .demo-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--demo-ink-muted); padding: 6px 8px; border-bottom: 1px solid var(--demo-border); } .demo-table td { padding: 8px; color: var(--demo-ink); border-bottom: 1px solid var(--demo-border); } .demo-table tbody tr:nth-child(even) { background: var(--demo-sidebar); } .demo-badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; } .demo-badge--active { background: var(--demo-success-bg); color: var(--demo-success-ink); } .demo-badge--churn { background: var(--demo-danger-bg); color: var(--demo-danger-ink); } .demo-badge--trial { background: var(--demo-border); color: var(--demo-ink-muted); } /* ---- cursor ---- */ .demo-cursor { position: absolute; top: 10px; left: 200px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--bp-white-pure); border: 1.5px solid var(--bp-black); opacity: 0; z-index: 5; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } /* ---- capture indicator ---- */ .demo-capture-indicator { position: absolute; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: var(--bp-black); color: var(--bp-white-pure); font-size: 12px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; } .demo-capture-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bp-lime); } /* ---- extension popup : real screenshots, swapped by JS ---- */ .demo-popup { position: absolute; /* Fallback values match the icon's real position at 1:1 (unscaled) desktop size. JS measures the icon's actual on-screen position (which moves as .demo-browser is scaled by the container query) and overrides these via custom properties, so the popup keeps dropping from the right place at any viewport width instead of just at the one scale these hardcoded numbers were measured for. */ top: var(--popup-top, 74px); right: var(--popup-right, 16px); width: 240px; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; z-index: 6; } .popup-state-img { display: block; width: 100%; height: auto; } /* Redacts the account email/credit row baked into the review and submitted screenshots. Uses % of .demo-popup's own (auto) height, not a fixed px offset - a fixed px value only holds at ONE render scale. The popup is 240px wide on desktop but up to 380px wide on mobile (near-native size), so a px offset calibrated for one scale lands on the wrong row at the other. % of height tracks the image at any width. Each state gets its own %, because the two screenshots have different native heights (591px vs 355px) even though the email row sits at the same native y (58-89px) in both - so the same pixel band is a different fraction of each image. */ .demo-popup-redact { position: absolute; left: 0; right: 0; display: none; pointer-events: none; background: rgba(234, 235, 235, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .demo-popup-redact { background: rgb(234, 235, 235); } } [data-state="7"] .demo-popup-redact { display: block; top: 9.8%; height: 5.3%; } [data-state="8"] .demo-popup-redact { display: block; top: 16.3%; height: 8.8%; } /* Cursor that clicks the button inside the popup screenshot right before each state advances: Start Audit Session (state 3), Review and Submit (state 6), Submit for Audit (state 7). Position is a fixed % of the image box, measured from the real screenshot pixels per state. */ .demo-popup-cursor { position: absolute; left: 50%; top: 82%; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--bp-white-pure); border: 1.5px solid var(--bp-black); opacity: 0; transform: translate(-50%, -50%) scale(1); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; z-index: 7; } [data-state="3"] .demo-popup-cursor { top: 82%; } [data-state="6"] .demo-popup-cursor { top: 83%; } [data-state="7"] .demo-popup-cursor { top: 79%; } [data-click="1"] .demo-popup-cursor { opacity: 1; } [data-click="2"] .demo-popup-cursor { opacity: 1; transform: translate(-50%, -50%) scale(0.78); } /* ---- state machine : one data-state attribute on #browser-stage drives everything ---- */ [data-state="2"] .demo-ext-icon--bp, [data-state="7"] .demo-ext-icon--bp { box-shadow: 0 0 0 2px var(--bp-lime); } [data-state="1"] .demo-cursor { opacity: 1; transform: translate(0, 0); } [data-state="2"] .demo-cursor { opacity: 1; transform: translate(var(--cursor-target-x, 420px), var(--cursor-target-y, -46px)); } [data-state="7"] .demo-cursor { opacity: 1; transform: translate(var(--cursor-target-x, 420px), var(--cursor-target-y, -46px)); } [data-state="3"] .demo-popup, [data-state="4"] .demo-popup, [data-state="5"] .demo-popup, [data-state="6"] .demo-popup, [data-state="7"] .demo-popup, [data-state="8"] .demo-popup { opacity: 1; visibility: visible; transform: translateY(0); } [data-state="5"] .demo-capture-indicator, [data-state="6"] .demo-capture-indicator { opacity: 1; transform: translateY(0); } /* Respect prefers-reduced-motion: static state-7 frame, no transitions */ @media (prefers-reduced-motion: reduce) { .demo-cursor, .demo-popup, .demo-capture-indicator, .demo-popup-cursor { transition: none; } } /* Mobile: the browser mockup stays visible (its scale now comes from a vw-based calc(), not container query units - see .demo-browser above - so it no longer depends on the CSS feature that broke on a real device). The popup keeps its own independent, smaller size and stays position:absolute, anchored to the extension icon's real position by the same JS that runs at every screen size. */ @media (max-width: 768px) { .hero { padding-top: 120px; } .hero-browser-stage { margin: 0 auto 48px; } .demo-popup { width: 190px; } } /* ========================================================================== STATS BAR (statistics, not logos) ========================================================================== */ .stats-bar { background: var(--bp-black); border-top: 1px solid var(--bp-line-06); border-bottom: 1px solid var(--bp-line-06); padding: 56px var(--page-x); } .stats-inner { display: flex; align-items: center; justify-content: center; gap: 64px; max-width: var(--max-w); margin: 0 auto; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-number { display: block; font-size: 48px; font-weight: var(--fw-bold); color: var(--bp-white); line-height: 1; letter-spacing: -0.02em; } .stat-label { display: block; font-size: 13px; color: var(--bp-ink-35); margin-top: 8px; letter-spacing: 0.02em; } .stat-divider { width: 1px; height: 48px; background: var(--bp-line-08); } @media (max-width: 768px) { .stats-inner { gap: var(--space-8); } .stat-divider { display: none; } } /* ========================================================================== PROBLEM SECTION : flat cards, same geometry as audit cards, no icons ========================================================================== */ .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .problem-card h3 { font-size: var(--text-body-lg); margin-bottom: var(--space-3); } .problem-card p { font-size: var(--text-sm); color: var(--bp-ink-50); line-height: 1.75; } .problem-stat { font-size: var(--text-xs); color: var(--bp-ink-45); font-style: italic; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--bp-border); line-height: 1.6; } @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } } /* ========================================================================== HOW IT WORKS : pure typography, no cards, no icons, no connectors ========================================================================== */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); margin-top: var(--space-16); } .step-number { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.10em; text-transform: uppercase; color: var(--bp-ink-22); margin-bottom: 20px; display: block; } .step-title { font-size: 22px; font-weight: var(--fw-semibold); color: var(--bp-white); line-height: 1.25; margin-bottom: 16px; } .step-body { font-size: 15px; line-height: 1.75; color: var(--bp-ink-50); } .step-note { font-size: var(--text-xs); color: var(--bp-ink-35); font-style: italic; margin-top: var(--space-3); } @media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; gap: var(--space-10); } } /* ========================================================================== WHAT WE AUDIT : editorial rows, Linear-style. No cards. No icons. ========================================================================== */ .audit-list { margin-top: 64px; border-top: 1px solid var(--bp-border); } .audit-item { display: grid; grid-template-columns: 320px 1fr; gap: 48px; padding: 36px 0; border-bottom: 1px solid var(--bp-border); align-items: start; transition: background var(--dur-fast) var(--ease-out); } .audit-item:hover { background: rgba(255, 255, 255, 0.015); margin: 0 -32px; padding-left: 32px; padding-right: 32px; } .audit-item-left { display: flex; align-items: baseline; gap: 20px; } .audit-item-num { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: rgba(245, 245, 245, 0.18); flex-shrink: 0; font-variant-numeric: tabular-nums; } .audit-item-title { font-size: 18px; font-weight: var(--fw-semibold); color: var(--bp-white); line-height: 1.3; } .audit-item-body { font-size: 15px; line-height: 1.75; color: var(--bp-ink-50); padding-top: 4px; } .audit-note { text-align: center; font-size: var(--text-sm); color: var(--bp-ink-45); margin-top: var(--space-12); font-style: italic; } @media (max-width: 768px) { .audit-item { grid-template-columns: 1fr; gap: 12px; } } /* ========================================================================== WHO IT IS FOR : quote-forward cards, no tag pills ========================================================================== */ .persona-grid-row1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--space-12); } .persona-grid-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 66%; margin: 16px auto 0; } .persona-card { background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--radius-md); padding: var(--space-8); position: relative; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); } .persona-card:hover { border-color: var(--bp-border-hover); } .persona-quote-mark { position: absolute; top: 12px; left: 20px; font-size: 64px; font-weight: var(--fw-bold); color: var(--bp-line-04); line-height: 1; font-family: Georgia, serif; pointer-events: none; user-select: none; } .persona-quote { font-size: 15px; font-weight: var(--fw-semibold); color: var(--bp-white); line-height: 1.45; font-style: italic; margin-bottom: 16px; position: relative; } .persona-body { font-size: 14px; line-height: 1.7; color: var(--bp-ink-50); } .persona-role { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-ink-25); border-top: 1px solid var(--bp-line-06); padding-top: 16px; margin-top: 20px; } @media (max-width: 900px) { .persona-grid-row1 { grid-template-columns: repeat(2, 1fr); } .persona-grid-row2 { max-width: 100%; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .persona-grid-row1, .persona-grid-row2 { grid-template-columns: 1fr; max-width: 100%; } } /* ========================================================================== SAMPLE REPORT PREVIEW ========================================================================== */ .report-preview { background: var(--bp-report-bg); color: var(--bp-report-text); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-12); max-width: 680px; margin: var(--space-16) auto 0; box-shadow: var(--shadow-xl); position: relative; } .report-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); border-bottom: 1px solid var(--bp-report-line); padding-bottom: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; } .report-header-meta { text-align: right; } .report-header-title { font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--bp-report-text); } .report-header-sub { font-size: var(--text-xs); color: var(--bp-report-ink-55); } .report-score-heading { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.7rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-report-ink-60); margin-bottom: var(--space-4); } .report-score-heading span { font-size: 1.25rem; color: var(--bp-report-text); font-family: var(--font); } .report-score-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); } .report-score-row { display: flex; align-items: center; gap: var(--space-4); } .report-score-row-label { font-size: var(--text-xs); width: 140px; flex-shrink: 0; color: var(--bp-report-ink-75); } .report-score-track { flex: 1; height: 3px; background: var(--bp-report-line); border-radius: 2px; overflow: hidden; } .report-score-fill { display: block; height: 100%; background: var(--bp-report-text); border-radius: 2px; } .report-score-row-value { font-size: var(--text-xs); font-weight: var(--fw-semibold); width: 40px; text-align: right; color: var(--bp-report-text); } .report-fixes-heading { font-size: 0.7rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-report-ink-60); margin-bottom: var(--space-4); } .report-fix { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); } .report-fix-number { font-family: var(--font); font-weight: var(--fw-bold); color: var(--bp-report-ink-40); } .report-fix-title { font-weight: var(--fw-semibold); color: var(--bp-report-text); margin-bottom: var(--space-1); } .report-fix-badges { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--bp-report-ink-70); } .report-fix-desc { font-size: var(--text-sm); color: var(--bp-report-ink-75); line-height: 1.5; } .report-fix-fix { font-size: var(--text-sm); color: var(--bp-report-text); font-weight: var(--fw-medium); margin-top: var(--space-1); } .badge-critical { background: rgba(10, 10, 10, 0.08); color: var(--bp-report-text); border: 1px solid rgba(10, 10, 10, 0.15); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; } .badge-major { background: rgba(10, 10, 10, 0.05); color: var(--bp-report-ink-70); border: 1px solid rgba(10, 10, 10, 0.10); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; } .report-more { font-size: var(--text-sm); color: var(--bp-report-ink-50); font-style: italic; } .report-download-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); font-weight: var(--fw-semibold); color: var(--bp-report-text); } @media (max-width: 768px) { .report-preview { padding: var(--space-6); } .report-score-row-label { width: 100px; } .report-header { flex-direction: column; } .report-header-meta { text-align: left; } } @media (max-width: 480px) { .report-preview { padding: var(--space-4); } } /* ========================================================================== PRICING ========================================================================== */ /* Wrapper owns the visual chrome (border/radius/padding) and is the only element allowed to scroll horizontally, so the table itself can never stretch the page past the viewport at any screen size. */ .credit-table-wrap { border: 1px solid var(--bp-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-12); max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .credit-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .credit-table caption { text-align: left; font-size: var(--text-body-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); color: var(--bp-white); } .credit-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-text-muted); padding: var(--space-2) var(--space-3); } .credit-table td { padding: var(--space-2) var(--space-3); color: var(--bp-text-sub); border-top: 1px solid var(--bp-border); } .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--space-12); } .pricing-card { background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--radius-md); padding: var(--space-7); display: flex; flex-direction: column; position: relative; } .pricing-card--featured { border-color: var(--bp-ink-22); transform: scale(1.02); } .pricing-name { font-size: 13px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-ink-45); margin-bottom: 8px; } .pricing-price { font-size: 40px; font-weight: var(--fw-bold); color: var(--bp-white); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; } .pricing-sub { font-size: 12px; color: var(--bp-ink-35); margin-bottom: var(--space-6); } .pricing-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-8); flex: 1; } .pricing-list li { font-size: var(--text-sm); color: var(--bp-ink-50); padding-left: var(--space-6); position: relative; } .pricing-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 4px; height: 4px; border-radius: 50%; background: var(--bp-ink-35); } .pricing-compare { text-align: center; max-width: 640px; margin: var(--space-12) auto 0; font-size: var(--text-sm); color: var(--bp-text-sub); } .pricing-compare strong { color: var(--bp-white); } .referral-note { display: flex; align-items: center; gap: var(--space-3); justify-content: center; text-align: center; max-width: 560px; margin: var(--space-8) auto 0; padding: var(--space-4) var(--space-6); border: 1px solid var(--bp-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--bp-text-sub); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-card--featured { transform: none; } } /* ========================================================================== TRUST : stacked ladder, no founder card, no columns ========================================================================== */ .trust-section { background: var(--bp-surface-1); padding: var(--section-y) var(--page-x); } .trust-inner { max-width: 860px; margin: 0 auto; } .trust-ladder { margin-top: 72px; position: relative; padding-left: 80px; } /* Vertical connecting line running down the left */ .trust-ladder::before { content: ''; position: absolute; left: 28px; top: 8px; bottom: 8px; width: 1px; background: var(--bp-border); } .trust-rung { position: relative; padding-bottom: 56px; display: grid; grid-template-columns: 48px 1fr; gap: 32px; align-items: start; } /* Last rung has no bottom padding */ .trust-rung:last-child { padding-bottom: 0; } /* Staircase effect: alternate rungs indent right */ .trust-rung--2, .trust-rung--4 { margin-left: 40px; } .trust-rung-left { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 4px; } /* Dot on the vertical line */ .trust-rung-left::before { content: ''; position: absolute; left: 50%; top: 8px; width: 6px; height: 6px; background: var(--bp-line-20); border-radius: 50%; transform: translateX(-50%); margin-left: -52px; } /* Active dot on hover */ .trust-rung:hover .trust-rung-left::before { background: var(--bp-lime); transition: background 0.2s; } .trust-step-num { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: rgba(245, 245, 245, 0.18); font-variant-numeric: tabular-nums; } .trust-rung-title { font-size: 22px; font-weight: var(--fw-semibold); color: var(--bp-white); line-height: 1.3; margin-bottom: 12px; letter-spacing: -0.01em; transition: color 0.2s; } .trust-rung:hover .trust-rung-title { color: var(--bp-white-pure); } .trust-rung-sub { font-size: 15px; line-height: 1.75; color: var(--bp-ink-45); } /* Mobile: remove staircase indent */ @media (max-width: 768px) { .trust-ladder { padding-left: 48px; } .trust-rung--2, .trust-rung--4 { margin-left: 0; } .trust-rung-title { font-size: 18px; } } /* ========================================================================== WAITLIST ========================================================================== */ .waitlist-section { padding: var(--section-y) var(--page-x); text-align: center; background: var(--bp-surface-2); } .waitlist-inner { max-width: 560px; margin: 0 auto; } .waitlist-headline { font-size: var(--text-h1); font-weight: var(--fw-bold); color: var(--bp-white); line-height: var(--lh-heading); margin-bottom: var(--space-4); } .waitlist-sub { font-size: var(--text-body-lg); color: var(--bp-text-sub); line-height: var(--lh-body); margin-bottom: var(--space-8); } .waitlist-sub strong { color: var(--bp-white); font-weight: var(--fw-semibold); } .waitlist-form { margin-bottom: var(--space-6); } .waitlist-input-row { display: flex; gap: 12px; max-width: 460px; margin: 0 auto; } .waitlist-input-row input { flex: 1; background: transparent; border: 1px solid var(--bp-line-20); border-radius: var(--radius-sm); color: var(--bp-white); font-family: var(--font); font-size: 14px; padding: 12px 16px; outline: none; transition: border-color var(--dur-micro) var(--ease-out); } .waitlist-input-row input:focus { border-color: var(--bp-line-40); } .waitlist-input-row input::placeholder { color: var(--bp-ink-25); } .waitlist-error { font-size: var(--text-sm); color: var(--bp-critical); margin-top: var(--space-3); text-align: center; } .waitlist-success { font-size: var(--text-sm); color: var(--bp-minor); margin-top: var(--space-3); text-align: center; } .waitlist-note { font-size: var(--text-xs); color: var(--bp-ink-45); } @media (max-width: 480px) { .waitlist-input-row { flex-direction: column; } } /* ========================================================================== FOUNDER QUESTIONS ========================================================================== */ .founder-q-section { background: var(--bp-surface-1); } .founder-q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: var(--space-12); } .founder-q-card { background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--radius-md); padding: var(--space-6); transition: border-color var(--dur-fast) var(--ease-out); } .founder-q-card:hover { border-color: var(--bp-border-hover); } .founder-q-card h3 { font-size: 15px; font-weight: var(--fw-semibold); color: var(--bp-white); line-height: 1.4; margin-bottom: 12px; } .founder-q-card p { font-size: 14px; line-height: 1.75; color: var(--bp-ink-50); margin: 0; } .founder-q-note { font-size: var(--text-xs); color: var(--bp-ink-45); text-align: center; margin-top: var(--space-8); font-style: italic; } @media (max-width: 768px) { .founder-q-grid { grid-template-columns: 1fr; } } /* ========================================================================== FAQ ========================================================================== */ .faq-section { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--bp-border); } .faq-question { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 20px 0; cursor: pointer; text-align: left; gap: var(--space-4); color: var(--bp-white); font-size: 16px; font-weight: var(--fw-medium); font-family: var(--font); line-height: 1.4; } .faq-question:hover { color: var(--bp-ink-80); } .faq-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--bp-ink-35); transition: transform var(--dur-fast) var(--ease-out); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out), padding var(--dur-fast) var(--ease-out); padding: 0; } .faq-item.open .faq-answer { max-height: 400px; padding-bottom: 20px; } .faq-answer p { font-size: 15px; line-height: 1.75; color: var(--bp-ink-55); padding-bottom: 20px; } /* ========================================================================== FINAL CTA : solid background, no gradient ========================================================================== */ .final-cta { background: var(--bp-surface-2); padding: var(--section-y) var(--page-x); text-align: center; } .final-cta-eyebrow { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-ink-35); margin-bottom: var(--space-4); } .final-cta-headline { font-size: var(--text-h1); font-weight: var(--fw-bold); color: var(--bp-white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-10); max-width: 640px; margin-left: auto; margin-right: auto; } .final-cta-headline .accent { color: var(--bp-white); } .final-cta-sub { font-size: var(--text-body-lg); color: var(--bp-text-sub); max-width: 480px; margin: 0 auto var(--space-8); line-height: var(--lh-body); } .final-cta-trust { font-size: var(--text-xs); color: var(--bp-ink-35); margin-top: var(--space-6); line-height: 1.8; } /* ========================================================================== FOOTER ========================================================================== */ .footer { background: var(--bp-surface-1); border-top: 1px solid var(--bp-border); padding: var(--space-16) var(--page-x) var(--space-8); } .footer-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-10); padding-bottom: var(--space-12); } .footer-brand img { height: 34px; width: auto; margin-bottom: var(--space-4); } .footer-tagline { font-size: var(--text-sm); color: var(--bp-ink-50); margin-bottom: var(--space-4); line-height: 1.6; } .footer-social { margin-top: 20px; } .footer-social-link { display: inline-flex; align-items: center; gap: 8px; color: var(--bp-ink-45); text-decoration: none; font-size: 14px; transition: color var(--dur-micro) var(--ease-out); } .footer-social-link:hover { color: var(--bp-ink-80); } .footer-col-heading { font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-ink-25); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--bp-ink-45); display: block; transition: color var(--dur-micro) var(--ease-out); } .footer-col a:hover { color: var(--bp-ink-80); } .footer-bottom { max-width: var(--max-w); margin: 0 auto; border-top: 1px solid var(--bp-border); padding-top: var(--space-8); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--bp-ink-45); } .footer-bottom a { color: var(--bp-ink-45); text-decoration: underline; } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } } /* ========================================================================== BREADCRUMB / SOLUTIONS (out of scope for this redesign, kept functional) ========================================================================== */ .breadcrumb { padding: var(--space-4) 0; font-size: var(--text-xs); color: var(--bp-text-muted); } .breadcrumb a { color: var(--bp-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--bp-white); } .breadcrumb span { margin: 0 var(--space-2); } .solutions-hero { min-height: 60vh; padding-top: 68px; display: flex; align-items: center; } .solutions-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .solutions-overview-card { display: flex; flex-direction: column; } .solutions-overview-card h3 { margin-bottom: var(--space-2); } .solutions-overview-card p { font-size: var(--text-sm); margin-bottom: var(--space-4); flex: 1; } .solutions-overview-card .arrow-link { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--bp-white); } @media (max-width: 900px) { .solutions-overview-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .solutions-overview-grid { grid-template-columns: 1fr; } } .sample-finding-card { max-width: 560px; margin: 0 auto; } /* ========================================================================== BLOG (out of scope for this redesign, kept functional) ========================================================================== */ .blog-hero { padding: calc(68px + var(--space-16)) var(--page-x) var(--space-16); text-align: center; } .blog-hero h1 { margin-bottom: var(--space-4); } .blog-hero-sub { font-size: var(--text-body-lg); max-width: 560px; margin: 0 auto; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .blog-card { display: block; overflow: hidden; } .blog-card img { width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: var(--space-4); } .blog-card-tag { display: inline-block; font-size: 0.65rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-ink-70); border: 1px solid var(--bp-line-15); padding: 0.15rem 0.5rem; border-radius: var(--radius-full); margin-bottom: var(--space-3); } .blog-card h2 { font-size: var(--text-body-lg); margin-bottom: var(--space-2); } .blog-card-excerpt { font-size: var(--text-sm); margin-bottom: var(--space-3); } .blog-card-meta { font-size: var(--text-xs); color: var(--bp-text-muted); } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } } .post-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--bp-white); z-index: 400; width: 0%; transition: width var(--dur-micro) linear; } .post-header { padding: calc(68px + var(--space-12)) var(--page-x) var(--space-8); max-width: 760px; margin: 0 auto; } .post-header h1 { margin-bottom: var(--space-4); } .post-meta { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--bp-text-muted); } .post-body { max-width: 760px; margin: 0 auto; padding: 0 var(--page-x) var(--space-16); } .post-body p { margin-bottom: var(--space-6); font-size: var(--text-body-lg); } .post-body h2 { margin: var(--space-12) 0 var(--space-4); } .post-body ul, .post-body ol { padding-left: var(--space-6); margin-bottom: var(--space-6); } .post-body li { list-style: disc; margin-bottom: var(--space-2); font-size: var(--text-body-lg); color: var(--bp-text-sub); } .post-lead { font-size: var(--text-body-lg); color: var(--bp-white); font-weight: var(--fw-medium); margin-bottom: var(--space-8); } .author-box { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-6); border-top: 1px solid var(--bp-border); margin-top: var(--space-12); } .author-box-initial { width: 48px; height: 48px; border-radius: 50%; background: var(--bp-green); color: var(--bp-white); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); flex-shrink: 0; } .author-box strong { display: block; color: var(--bp-white); } .author-box span { font-size: var(--text-xs); color: var(--bp-text-muted); } .post-cta { text-align: center; padding: var(--space-8); border: 1px solid var(--bp-border); border-radius: var(--radius-lg); margin: var(--space-12) 0; } .post-cta p { margin-bottom: var(--space-4); } /* ========================================================================== FORMS (contact, upload, integrations) : out of scope, kept functional ========================================================================== */ .simple-page-hero { padding: calc(68px + var(--space-20)) var(--page-x) var(--space-16); text-align: center; max-width: 640px; margin: 0 auto; } .simple-page-hero h1 { margin-bottom: var(--space-4); } .simple-page-hero p { font-size: var(--text-body-lg); } .upload-form { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); } .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--bp-white); } .form-field input, .form-field select, .form-field textarea { background: var(--bp-surface-3); border: 1px solid var(--bp-border); border-radius: var(--radius-md); color: var(--bp-white); font-family: var(--font); font-size: var(--text-body); padding: 0.75rem 1rem; outline: none; transition: border-color var(--dur-micro); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--bp-line-40); } .form-field-file { border: 1px dashed var(--bp-border); border-radius: var(--radius-md); padding: var(--space-8); text-align: center; color: var(--bp-text-muted); font-size: var(--text-sm); } .upload-checklist { font-size: var(--text-sm); color: var(--bp-text-sub); padding-left: var(--space-6); margin-top: var(--space-2); } .upload-checklist li { list-style: disc; margin-bottom: var(--space-1); } .integrations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-12); } .integration-card { text-align: left; } .integration-badge { display: inline-block; font-size: 0.6rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-ink-70); border: 1px solid var(--bp-line-15); padding: 0.15rem 0.5rem; border-radius: var(--radius-full); margin-top: var(--space-4); } .integrations-notify { display: flex; gap: var(--space-3); max-width: 420px; margin: 0 auto; } .integrations-notify input { flex: 1; background: var(--bp-surface-3); border: 1px solid var(--bp-border); border-radius: var(--radius-md); color: var(--bp-white); font-family: var(--font); padding: 0.75rem 1rem; } .integrations-note { text-align: center; font-size: var(--text-xs); color: var(--bp-text-muted); margin-top: var(--space-4); } @media (max-width: 900px) { .integrations-grid { grid-template-columns: 1fr; } } .legal-content { max-width: 760px; margin: 0 auto; padding: calc(68px + var(--space-12)) var(--page-x) var(--space-16); } .legal-content h1 { margin-bottom: var(--space-6); } .legal-content h2 { margin: var(--space-10) 0 var(--space-4); } .legal-content p { margin-bottom: var(--space-4); font-size: var(--text-body-lg); } .legal-content ul { padding-left: var(--space-6); margin-bottom: var(--space-4); } .legal-content li { list-style: disc; margin-bottom: var(--space-2); font-size: var(--text-body-lg); color: var(--bp-text-sub); }