/* Shared marketing-site stylesheet — landing, pricing, feature pages, legal pages. Extracted from landing.html on 2026-07-26 so the feature-page family can't drift from it. Feature-page-specific components live in the FEATURE PAGES block at the bottom. */ :root{--font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; --green:#2f5c1f; --green-dk:#22461a; --green-lt:#6aaf45; --green-soft:#e9f1e2; --green-btn:#3f7a26; /* same token/value as the app: white on this is 5.2:1 (AA). --green-lt is 2.68:1 and must never sit under white text */ /* --green-txt / --green-ink are DELIBERATE ALIASES of --green / --green-dk in light — identical values, so naming them changed nothing here. They exist because --green does two incompatible jobs: it is a FILL under white text (.btn, .ribbon, step bullets) and it is TEXT on a pale ground (links, .stat b, .plan h3). In dark those pull opposite ways — the fill must stay dark enough for white text, the ink must go light enough to read on a dark card — so the two jobs need two tokens. Same split the app made (--green vs --green-txt). Use --green-txt wherever the value ends up as INK, --green wherever it ends up as a FILL. */ --green-txt:#2f5c1f; --green-ink:#22461a; --green-ln:#d6e6c9; /* border of a --green-soft tinted block (.glance) */ --ink:#16180f; --muted:#5a6152; --line:#e6e8e0; --bg:#ffffff; --soft:#f6f8f2; /* Surfaces. --bg is the PAGE; --card is anything that floats on it (cards, plans, the mega-menu, the screenshot frame). Both are white in light — which is exactly why the distinction was never written down and had to be recovered here: in dark a card has to sit LIGHTER than the page, or the whole grid melts into one flat rectangle. */ --card:#ffffff; --line-hi:#d6dccd; /* card hover border */ --line-hi2:#d0d8c5; /* open
border — a shade tighter than --line-hi in light */ --glass:rgba(255,255,255,.86); /* sticky header, blurred */ --bar:#eef1ea; --bar-dot:#ccd2c4; /* the fake browser chrome above the hero screenshot */ --note-bg:#fdf6e6; /* .legal .note — amber wash */ /* Amber "check this" badge, used by pathways.html / cdc-workflow.html. #7a6015 on #faf3dc is 5.39:1 (the 2026-07-31 styleguard fix); tokenised here so dark gets a matching pair instead of a cream block glaring off the page. */ --warn-tx:#7a6015; --warn-bg:#faf3dc; --warn-ln:#eadfba; /* The "why" band is a green FIELD with white text on it. It must NOT follow --green/--green-dk into dark: those get lighter so a button fill stays visible, which would drop this band's own body copy under 4.5:1. Its own tokens go the other way — darker. */ --why-1:#22461a; --why-2:#2f5c1f; --hero-wash:rgba(106,175,69,.20); --amber:#c98a00; --radius:16px; --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.08); --shadow-lg:0 30px 70px rgba(0,0,0,.16); } /* ---- DARK theme (2026-07-31) ----------------------------------------------------------------- COLOUR TOKENS ONLY — not one component rule is repeated below. Same discipline, the same storage key ('js_theme') and the same pre-paint script as the app, so a choice made on the map carries to the marketing site and back with no white frame at either hop. Absent on purpose: --green-btn (a filled CTA must keep white text at 4.5:1, so it cannot get lighter), --font, --radius. */ [data-theme="dark"]{ color-scheme:dark; --bg:#0b0f0c; --soft:#141a15; /* full-bleed tinted bands (.trust, .persona, .final, table headers) — a touch LIGHTER than the page, because "recessed" inverts in dark */ --card:#171e18; /* lifts off both --bg and --soft; the border does the rest */ --line:#2b342d; --line-hi:#3f4b41; --line-hi2:#3f4b41; --ink:#f0f5ef; /* 15.4:1 on --card */ --muted:#93a195; /* 6.3:1 on --card, 6.5:1 on --soft, 7.2:1 on --bg — this token carries most of the marketing body copy, so it is sized for the worst ground */ --green:#45802a; /* FILL: white on it is 4.8:1, and it is 3.6:1 against --card, so the button still has an edge of its own */ --green-dk:#2c5c1a; /* the hover/pressed fill — darker, so white text gains rather than loses */ --green-txt:#8fd15f; /* INK: 9.3:1 on --card, 10.5:1 on --bg */ --green-ink:#9ed474; /* INK on a --green-soft tint: 8.4:1 */ --green-lt:#9fd97a; /* ✓ glyphs and accent hairlines: 9.1:1 on --green-soft */ --green-soft:#1d2a17; --green-ln:#2e4522; --hero-wash:rgba(106,175,69,.13); --why-1:#16300f; --why-2:#1f4416; /* white 11:1, the band's own body copy 8.5:1 */ --amber:#d9a441; --note-bg:#33290f; --warn-tx:#f2cf6a; --warn-bg:#3b3210; --warn-ln:#6d5d20; --glass:rgba(11,15,12,.86); --bar:#1c231d; --bar-dot:#39433b; /* Neutral black, deepened — a shadow on a dark ground has to work harder to read as "floating". Never tinted: a coloured glow is not part of this design system. */ --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.55); --shadow-lg:0 30px 70px rgba(0,0,0,.62); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font:16px/1.62 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} a{color:var(--green-txt);text-decoration:none} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} h1,h2,h3{letter-spacing:-.02em} .btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-family:inherit;font-weight:650;padding:12px 22px;border-radius:11px;border:1px solid var(--green);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;box-shadow:0 2px 8px rgba(0,0,0,.18)} .btn:hover{background:var(--green-dk);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.24)} .btn.ghost{background:var(--card);color:var(--green-txt);box-shadow:none} .btn.ghost:hover{background:var(--soft);border-color:var(--green)} .btn.lg{padding:15px 30px;font-size:16.5px} /* header */ header{position:sticky;top:0;z-index:60;background:var(--glass);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} header.scrolled{border-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.05)} .nav{display:flex;align-items:center;gap:26px;height:66px} .brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:18px;color:var(--ink)} /* Gradient stops at --green-btn, NOT --green-lt: the white 800 wordmark covers the full tile and white on --green-lt (#6aaf45) is 2.68:1, failing WCAG 1.4.3. Same fix the app made in its 2026-07-25 audit — this is now identical to index.html's `.brand .logo`. The green-tinted drop shadow is gone with it: shadows are neutral and only mean "this floats". */ .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--green),var(--green-btn));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px} .nav .spacer{flex:1} /* min-height 34px: these measured 23px, under the 24px WCAG 2.5.8 AA floor, and 34px is also the height every control in the app's topbar uses — so the two headers now agree on target size too. */ .nav a.link{color:var(--muted);font-weight:600;font-size:14.5px;transition:color .15s; display:inline-flex;align-items:center;min-height:34px} .nav a.link:hover{color:var(--green-txt)} /* ---- theme toggle ------------------------------------------------------------------------- Same idiom, same class names and the same `js_theme` key as the app's topbar toggle, so the control is recognisably the same one on both sides of the site. The GLYPH comes from CSS, not from JS, and that is the point: marketing.js is `defer`red, so a script that wrote the character would paint ☾ on an already-dark page for a frame. An attribute selector on — which the pre-paint script has already set — is correct on the very first frame. marketing.js owns only the ARIA state, which no frame depends on. 34x34 clears the 24px WCAG 2.5.8 floor and matches the height of every other control in this bar. It is a