@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/inter-900.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/inter-800.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/inter-400-italic.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/inter-300-italic.woff2) format("woff2")} /* Poppins (self-hosted, served via 'self' like Inter — no Google Fonts request). Used for sub-text / supporting copy only (the --f-lede token); headlines stay Inter. Poppins is the closest open face to Google Sans's rounder geometry — Commander 2026-08-19. Latin subset. */ @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")} @font-face{font-family:"TurboEV";src:url("/fonts/TurboEV.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:block;} /* --- GLOBAL RESETS & BASE --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--f-sans); /* Poppins default site-wide (Commander 2026-08-19) */ background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; /* Guard against horizontal overflow WITHOUT making a scroll container. `overflow-x: hidden` computes overflow-y to `auto`, which turns into the scroll container for its descendants and silently defeats the sticky site header (.nav is position:sticky;top:0 with a backdrop blur — designed as a sticky overlay). `clip` clips the same overflow but establishes NO scroll container, so the header sticks to the viewport as intended. The `hidden` line is a fallback for browsers predating `overflow: clip` (pre-2022); where `clip` is supported it wins (last value), restoring the sticky header. */ overflow-x: hidden; overflow-x: clip; } /* HEADLINES = Inter, everything else = Poppins (Commander 2026-08-19). The body default is Poppins (--f-sans); this one global rule pins every heading tag back to Inter (--f-display) site-wide — landing + interior pages + product surfaces — so the split is consistent everywhere without touching each page. The site's headlines are all

/

tags (verified across app routes). Highlight spans (.g/.accent) inherit the heading's Inter. / h1, h2, h3 { font-family: var(--f-display); } ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; } ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.25); } / BUG-308: skip-to-content link for the STATIC surfaces (workspace, rebate-hub, legal). The app-router pages define an identical .skip-link in app/globals.css; this shared copy loads via design-system.css -> global.css so the static pages (which never load globals.css) get it too. Off-screen until keyboard focus. / .skip-link { position: absolute; left: 12px; top: -56px; z-index: 200; background: var(--text, #161510); color: var(--bg, #F2EFE8); padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: top 0.18s ease; } .skip-link:focus { top: 12px; } / BUG-308: honor prefers-reduced-motion everywhere this base loads — including the workspace + Hub, whose ~27 keyframes were otherwise unguarded. Shortens motion to near-zero while preserving end states; essential status text (e.g. the scan "running" copy) is unaffected because it isn't animation-dependent. / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* =================================================================== SHARED PRIMITIVES (Foundations pass, Commander 2026-08-19 — UI/UX review SG-2 / SG-4). global.css is loaded on every surface (marketing React + static Workspace + Hub via the design-system.css import chain), so these belong here as the single source. =================================================================== / / Elevated surface — ONE material for every card on true black. Depth comes from light (top-lit gradient + bright top-rim + faint halo), never from black drop-shadows (invisible on #000). Apply to any card/panel. / .elevated { background: var(--elev-fill); border: 1px solid var(--elev-border); box-shadow: var(--elev-1); } .elevated-2 { / hero / paid-deliverable surfaces — a hair brighter / background: var(--elev-fill); border: 1px solid var(--elev-border); box-shadow: var(--elev-2); } / Primary button — ONE definition (was copy-pasted 4×). Solid brand green with depth + white-on-click, dark-on-green text via the single token. */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-sans); font-weight: 700; border: none; cursor: pointer; color: var(--on-green); background: linear-gradient(180deg, #B9FF61 0%, #A8FF35 48%, #93EC17 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 16px -6px rgba(168,255,53,0.5), 0 2px 5px -1px rgba(0,0,0,0.35); transition: transform var(--dur-fast), background var(--dur-base), box-shadow var(--dur-base); } .btn-primary:hover { transform: translateY(-1px); background: linear-gradient(180deg, #C6FF7A 0%, #B4FF48 48%, #A0FA2C 100%); } .btn-primary:active { transform: translateY(0); background: #fff; color: var(--on-green); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 10px -5px rgba(0,0,0,0.45); } .btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }