/* BuildsConnect. v6 "Paper, Ink & Ochre". Warm oat-paper light mode + warm espresso dark mode (no blue). Hairlines and whitespace instead of boxed cards. Bricolage Grotesque (display) / Hanken Grotesk (body) / IBM Plex Mono (data). Self-hosted, latin subset. */ @font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap} @font-face{font-family:"Hanken";src:url(/assets/fonts/hanken-var.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap} /* THE SITE'S LABELS ARE SET IN HANKEN, NOT MONO. v16 retired mono deliberately ("labels & data now set in Hanken") and the design language's real mono stack flipped 20 of them back - kickers, captions and the email mockup's own text, none of which a reader compares digit by digit. The site rules now name the body face explicitly; .num and .mono in the primitives keep the real mono for the columns of figures it exists for. (2026-08-29) */ /* BC:TOKENS:START */ /* ============================================================================ BUILDSCONNECT DESIGN TOKENS - THE CANONICAL SOURCE (2026-08-29) This file is the ONE definition. design/build_tokens.py injects it verbatim between the BC:TOKENS markers in BOTH stylesheets: platform/app/static/style.css (the app) site/assets/styles.v17.css (the marketing site) Never edit the injected copies. tests/test_design_language.py fails the build if either copy drifts from this file. THE BLOCK IS SPLIT IN TWO ON PURPOSE, and the split is what makes the theme rule assertable. Measured 2026-08-29: the app's light :root defined 44 tokens and its dark block 28 - an asymmetry that looked like sixteen bugs and was mostly type, radius and aliases that are correctly theme-independent. Mixing the two kinds in one block means "both themes define the same names" cannot be asserted without false alarms. So: BLOCK A theme-independent: type, space, radius, structure, motion. Defined once. Never repeated in a theme block. BLOCK B colour ONLY. Every name in it appears in all three theme blocks, and the test asserts that set-equality exactly. CONTRAST: every pair checked against WCAG AA before shipping (4.5:1 body, 3:1 large text and UI component boundaries). Four pairs failed the first palette and were fixed AT THE TOKEN, never at the usage: --dim on --panel2 was 4.43 -> #6f6a64 (4.83) --warn on --panel2 was 4.39 -> #8f5f00, recorded as 4.98 and RE-MEASURED 2026-08-31 as 4.32, which still fails AA. #8f5f00 on #EAE3D5 is 4.32; the 4.98 was miscomputed. Now #7a5100 = 5.47. accent text on --accent-weak was 4.27 -> --accent-strong #9d4b18 (5.34) --line-strong at 1.6-1.8 could never carry a control boundary, so control boundaries got their own token (--control-line, 3.2-3.6) and --line-strong stayed a structural hairline, which carries no 3:1 duty. ============================================================================ */ /* ── BLOCK A: theme-independent ───────────────────────────────────────────── No colour here. If a value belongs in both themes identically, it lives here exactly once, which is why the theme blocks below can be compared by name. */ :root { /* Type. Only two faces are shipped (bricolage-var.woff2, hanken-var.woff2); the mono stack is deliberately system-only - it always resolves, downloads nothing, and never silently falls through to a face we do not have. */ --font-display: "Bricolage", ui-sans-serif, system-ui, sans-serif; --font-body: "Hanken", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --t-label: .7rem; /* uppercase micro-label, the only uppercase we allow */ --t-xs: .74rem; --t-sm: .78rem; /* KPI sub-line */ --t-cap: .82rem; /* dense table text */ --t-body: .9rem; /* card body, report table */ --t-md: 1rem; /* card heading */ --t-lg: 1.15rem; --t-kpi: 1.5rem; /* KPI value */ --t-xl: 2rem; --lh-tight: 1.25; --lh: 1.5; --lh-loose: 1.62; /* the report density */ --track-label: .06em; /* letter-spacing for uppercase labels */ --track-kpi: -.01em; /* Space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 14px; --s5: 18px; --s6: 22px; --s7: 28px; --s8: 36px; /* Radius */ --r-sm: 6px; --r: 12px; --r-lg: 16px; --r-pill: 999px; /* Structure */ --wrap: 1120px; --measure: 66ch; --gutter: clamp(20px, 5vw, 44px); --focus-ring: 3px; --motion: 160ms cubic-bezier(.2, .6, .2, 1); --sp: clamp(40px, 4.6vw, 70px); /* public-surface section rhythm */ /* The one dark band. It stays dark in BOTH themes by design - a deliberately theme-independent surface, which is why it lives in Block A and is exempt from the light/dark symmetry rule. Its own text/accent pairs are checked against it, not against the page. */ --band-bg: #17140f; --band-surface: #211e17; --band-text: #ece5d6; --band-muted: #a69c88; --band-border: #37322a; --band-accent: #E8875A; --band-accent-ink: #1a0e06; /* Fluid type for the public surfaces (section 7: scale without breakpoints) */ /* THE SITE'S OWN MEASURED SCALE, restored 2026-08-29. The brief offered clamp(2.15rem, 4.6vw, 3.5rem) as a starting point and it rendered the hero 13% larger, wrapping "Know about the job before anyone else does." onto an extra line. The site's clamp was tuned to THIS hero's copy at THIS column width, which is a measurement; the brief's number was a default. The measurement wins. */ --t-hero: clamp(2.1rem, 1.3rem + 2vw, 3.3rem); --t-h2: clamp(1.5rem, 3vw, 2.15rem); --t-h3: clamp(1.2rem, 1.8vw, 1.45rem); --t-lede: 1.02rem; --t-deck: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); --t-kicker: .74rem; --t-num: clamp(2rem, 1.5rem + 2vw, 3.2rem); /* THE ONE BREAKPOINT SET. CSS cannot read a custom property inside @media, so these are declared here for the record and enforced by test: no other width value may appear in an @media query in either stylesheet. THREE BOUNDARIES: 560, 820, 1100. A "narrow" rule uses max-width at the boundary minus 0.02px and a "wide" rule uses min-width at the boundary, so the two never both match on the same pixel: --bp-sm: 560px; --bp-md: 820px; --bp-lg: 1100px (max-width counterparts: 559.98px, 819.98px, 1099.98px) */ } /* ── BLOCK B: colour. Light is the default and shares its block with an explicit [data-theme="light"], so an OS preference and a deliberate choice can never disagree. THE PALETTE IS THE SITE'S OWN, AND IT IS OLDER THAN THIS FILE. styles.v16.css opens by naming it: v6 "Paper, Ink & Ochre" - warm oat-paper light, warm espresso dark, NO BLUE. The first cut of this file re-derived something close but lost the warmth in the two places it shows most: ink at #1a1a1a and panel at #ffffff are strictly neutral, and they set the temperature of every page. Restored to the documented values, which pass AA comfortably. The only two the site's own numbers could not carry are kept at the nudges named above: --dim (its #7A7160 measured 4.24 on paper) and accent-as-text (#B4571C measured 4.27, which is what --accent-strong exists for). ───────────────── */ :root, :root[data-theme="light"] { --bg: #F4F0E7; --panel: #FBF8F1; --panel2: #EAE3D5; --line: #DED6C5; --line-strong: #c9c1b4; --control-line: #8f8776; --text: #1E1B15; --text2: #514937; --dim: #6f6a64; --icon: #57534e; --accent: #B4571C; --accent-strong: #9d4b18; --accent-ink: #ffffff; --accent-weak: #fbeee4; --accent-line: #e3bd9d; --up: #2f6f4f; --down: #a33a2a; --good: #2f6f4f; --warn: #7a5100; --danger: #8a2418; --grid: #eeeae2; /* THE MAP. A canvas cannot read a custom property, so bc_map.js fetches the style, walks the tree resolving var(--token) against the live theme, and re-applies on a theme change. These are the tokens it resolves. Without them a dark page renders a bright white map, which looks plausible and is wrong - the exact break the design language names for canvas surfaces. */ --map-bg: #e8ecef; --map-land: #f7f5f0; --map-park: #e3ecdc; --map-industrial: #f0ece4; --map-water: #cadbe6; --map-building: #e6e1d8; --map-road: #ffffff; --map-road-major: #f4c37b; --map-boundary: #9aa4ad; --map-label-minor: #8a939b; --map-label: #5a646e; --map-label-strong: #3a434c; --map-halo: #f7f5f0; --scrim: rgba(40, 30, 20, .38); --shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 1px 1px rgba(40, 30, 20, .03); --shadow-lift: 0 1px 2px rgba(40, 30, 20, .05), 0 12px 28px -18px rgba(40, 30, 20, .28); } /* Dark, twice and identically: once for the OS preference (guarded so an explicit light choice beats a dark OS) and once for the deliberate toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17140F; --panel: #211E17; --panel2: #2A261D; --line: #37322A; --line-strong: #454036; --control-line: #726b5c; --text: #ECE5D6; --text2: #cbc5ba; --dim: #948d81; --icon: #a8a094; /* DARK ACCENT, RAISED ONE STEP (founder 2026-08-29). The theme accents used to be different hues - amber #E4933B dark against terracotta #B4571C light - and folding dark onto the terracotta hue (19deg) cost presence: 7.04 against the espresso ground where the amber measured 7.47. Raising lightness 63% -> 68% at the same hue and saturation gives 8.04, which BEATS the amber it replaced while keeping one brand hue across both themes. A second step (#EEA482, 8.98) was measured and rejected: at L 72% this hue reads pink. */ /* DARK ACCENT, RAISED ONE STEP (founder 2026-08-29). The theme accents used to be different hues - amber #E4933B dark against terracotta #B4571C light - and folding dark onto the terracotta hue (19deg) cost presence: 7.04 against the espresso ground where the amber measured 7.47. Raising lightness 63% -> 68% at the same hue and saturation gives 8.04, which BEATS the amber it replaced while keeping one brand hue across both themes. A second step (#EEA482, 8.98) was measured and rejected: at L 72% this hue reads pink. */ --accent: #EB9770; --accent-strong: #F2AA85; --accent-ink: #1a0e06; --accent-weak: #33211a; --accent-line: #5c3a26; --up: #4ea87a; --down: #e07a63; --good: #4ea87a; --warn: #d9a441; --danger: #e07a63; --grid: #221f1a; --map-bg: #10130f; --map-land: #191b17; --map-park: #1b241c; --map-industrial: #201d18; --map-water: #16242e; --map-building: #23211c; --map-road: #2f2c26; --map-road-major: #4a3a22; --map-boundary: #4a5158; --map-label-minor: #7d857f; --map-label: #a2a9a3; --map-label-strong: #c9cfc9; --map-halo: #10130f; --scrim: rgba(0, 0, 0, .6); --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-lift: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 34px -20px rgba(0, 0, 0, .7); } } :root[data-theme="dark"] { --bg: #17140F; --panel: #211E17; --panel2: #2A261D; --line: #37322A; --line-strong: #454036; --control-line: #726b5c; --text: #ECE5D6; --text2: #cbc5ba; --dim: #948d81; --icon: #a8a094; --accent: #EB9770; --accent-strong: #F2AA85; --accent-ink: #1a0e06; --accent-weak: #33211a; --accent-line: #5c3a26; --up: #4ea87a; --down: #e07a63; --good: #4ea87a; --warn: #d9a441; --danger: #e07a63; --grid: #221f1a; --map-bg: #10130f; --map-land: #191b17; --map-park: #1b241c; --map-industrial: #201d18; --map-water: #16242e; --map-building: #23211c; --map-road: #2f2c26; --map-road-major: #4a3a22; --map-boundary: #4a5158; --map-label-minor: #7d857f; --map-label: #a2a9a3; --map-label-strong: #c9cfc9; --map-halo: #10130f; --scrim: rgba(0, 0, 0, .6); --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-lift: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 34px -20px rgba(0, 0, 0, .7); } /* ── THE MIGRATION BRIDGE (dated 2026-08-29, and it is a compromise) ───────── Measured before the refactor: 192 var() fallbacks across 30 token names, and 23 token names used in 26+ template files that are DEFINED NOWHERE - held up entirely by their fallback hex. That is exactly the failure the fallback rule describes: strip the fallbacks first and 26 files lose their panel colour. So the old names are ALIASED to the new ones here, in one block, and they alias rather than duplicate - an alias resolves at use time and therefore tracks the theme automatically, which is what makes it safe. The ledger in tests/test_design_language.py counts the files still using them; the block shrinks to nothing as lanes migrate and the test's ceiling ratchets DOWN so it can never grow back. */ :root { --paper: var(--bg); --surface: var(--panel); --raise: var(--panel); --card: var(--panel); --sunk: var(--panel2); --panel-2: var(--panel2); --chip-bg: var(--panel2); --ink: var(--text); --muted: var(--text2); --mut: var(--text2); --faint: var(--dim); --border: var(--line); --line-soft: var(--line); --hairline: var(--line); --hair: 1px solid var(--line); --accent-brand: var(--accent); --accent-2: var(--accent-strong); --accent-text: var(--accent-strong); --accent-wash: var(--accent-weak); --ok: var(--good); --amber: var(--warn); --info: var(--icon); --ok-wash: color-mix(in srgb, var(--good) 12%, var(--panel)); --warn-wash: color-mix(in srgb, var(--warn) 12%, var(--panel)); --danger-wash: color-mix(in srgb, var(--danger) 12%, var(--panel)); --info-wash: color-mix(in srgb, var(--icon) 12%, var(--panel)); --display: var(--font-display); --body: var(--font-body); --mono: var(--font-mono); --shadow-sm: var(--shadow); /* operator/admin surface aliases - one definition, tracks the theme */ --op-th: var(--panel2); --op-accent: var(--accent); --op-amber: var(--warn); --op-amber-bg: var(--warn-wash); --op-amber-bd: var(--warn); --op-warn-bg: var(--warn-wash); --op-warn-ink: var(--warn); --op-warn-bd: var(--warn); --op-chip-bg: var(--panel2); --op-chip-bd: var(--line); --op-prov: var(--icon); --op-prov-bg: var(--panel2); --op-prov-bd: var(--line); --op-fence-bg: var(--accent-weak); --op-fence-bd: var(--accent-line); --op-ev: var(--icon); --ev-c: var(--icon); --op-haz-a-bg: color-mix(in srgb, var(--good) 12%, var(--panel)); --op-haz-a-ink: var(--good); --op-haz-a-bd: var(--good); --op-haz-n-bg: var(--panel2); --op-haz-n-bd: var(--line); --op-haz-p-bg: var(--danger-wash); --op-contra-bg: var(--warn-wash); --haz-present: var(--danger); --haz-absent: var(--good); --haz-unknown: var(--dim); --c-funnel-mix: var(--panel2); --c-donut-mix: var(--panel2); --dp-accent: var(--accent); } /* BC:TOKENS:END */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--body);font-size:var(--t-body);line-height:1.65;font-weight:435; overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .24s ease,color .24s ease; } img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.028em;text-wrap:balance} p{margin:0} ::selection{background:var(--accent);color:var(--accent-ink)} :where(a,button,input,textarea,summary):focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px} .wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto} .measure{max-width:var(--measure)} .rule{border:0;border-top:var(--hair);margin:0} .kicker{font-family:var(--font-body);font-weight:500;font-size:var(--t-kicker);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)} .kicker--acc{color:var(--accent-text)} .kicker--chip{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:7px;padding:.5rem .85rem;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 5%,transparent)} .deck{font-size:var(--t-deck);line-height:1.5;color:var(--muted);max-width:46ch} .skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;font-weight:600} .skip:focus{left:0;top:0} /* buttons */ /* SQUARE, NOT ROUNDED (founder, 2026-08-31). Buttons only - cards and panels keep their radius; the ruling was about the controls. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--body);font-weight:500;font-size:.98rem;padding:.85em 1.5em;border-radius:0;border:var(--hair);background:transparent;color:var(--text);cursor:pointer;transition:transform .16s ease,background .2s,border-color .2s,box-shadow .24s;min-height:46px} .btn:hover{transform:translateY(-1px)} .btn--accent{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:var(--shadow-sm)} .btn--accent:hover{box-shadow:0 18px 34px -16px rgba(180,87,28,.5)} .btn--quiet:hover{background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--muted)} .btn--lg{font-size:1.05rem;padding:1em 1.8em} .btn--block{width:100%} /* ── masthead ── */ .mast{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .24s,border-color .24s,backdrop-filter .24s} .mast.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom:var(--hair)} .mast__top{border-top:3px solid var(--accent)} .mast__in{display:flex;align-items:center;gap:1.4rem;height:72px} .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.03em;white-space:nowrap} .brand__mk{width:16px;height:16px;border-radius:3px;background:var(--accent);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .mast__date{font-family:var(--font-body);font-weight:500;font-size:.7rem;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-left:1rem;white-space:nowrap} .mast__nav{display:flex;gap:1.9rem;margin-left:2.6rem} .mast__nav a{color:var(--muted);font-weight:500;font-size:.95rem;position:relative;padding:.3rem 0;white-space:nowrap} .mast__nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--accent);transition:width .2s} .mast__nav a:hover{color:var(--text)}.mast__nav a:hover::after{width:100%} .mast__right{display:flex;align-items:center;gap:1.1rem} .theme{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;margin-left:auto;color:var(--muted);background:none;border:var(--hair);border-radius:9px;cursor:pointer;flex:none;transition:color .18s,border-color .18s} .theme svg{width:18px;height:18px} .theme:hover{color:var(--text);border-color:var(--muted)} .mast__login{color:var(--muted);font-size:.9rem;font-weight:500;white-space:nowrap} .mast__login:hover{color:var(--text)} .mast__right .btn{padding:.6em 1.05em;font-size:.9rem;min-height:0} .burger{display:none;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer;flex-direction:column;gap:5px;min-height:46px;min-width:46px;align-items:center;justify-content:center} .burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.24s} .mast__mobile{display:none;flex-direction:column;padding:.6rem var(--gutter) 1.4rem;border-bottom:var(--hair)} .mast__mobile a{padding:1rem .1rem;font-weight:500;color:var(--text);border-bottom:var(--hair)} .mast__mobile .btn{margin-top:1rem;border-bottom:0} .mast__mobile .theme{margin-top:1rem;align-self:flex-start} /* ── section shell ── */ .sec{padding:var(--sp) 0;position:relative} .sec--sunk{background:var(--sunk);transition:background .24s} .sec__head{margin-bottom:clamp(26px,3.5vw,44px);display:grid;gap:16px;max-width:46ch} .sec__head .kicker{margin-bottom:-8px} h2.h2{font-size:var(--t-h2);line-height:1.06} /* nav: current page */ .mast__nav a[aria-current="page"]{color:var(--text)} .mast__nav a[aria-current="page"]::after{width:100%} /* ── sub-page header ── */ .pagehead{padding:clamp(34px,4.5vw,60px) 0 clamp(26px,3vw,40px)} .crumb{font-size:.9rem;color:var(--faint);margin-bottom:16px} .crumb a{color:var(--muted)}.crumb a:hover{color:var(--text)} .crumb .sepc{margin:0 .5rem;color:var(--border)} .pagehead h1{font-size:var(--t-h2);letter-spacing:-.022em;line-height:1.05;margin:0;max-width:20ch} .pagehead .lead{margin-top:18px;font-size:var(--t-deck);line-height:1.5;color:var(--muted);max-width:58ch} /* ── prose (sub-page body) ── */ .prose{max-width:70ch} .prose>h2{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.018em;margin:clamp(32px,4vw,48px) 0 14px} .prose>h2:first-child{margin-top:0} .prose p{color:var(--muted);line-height:1.68;margin:0 0 16px;max-width:66ch} .prose p:last-child{margin-bottom:0} .prose strong{color:var(--text);font-weight:600} .prose a:not(.btn){color:var(--accent-text);text-decoration:underline;text-underline-offset:2px} .prose ul{list-style:none;margin:6px 0 20px;padding:0;display:grid;gap:12px} .prose ul li{position:relative;padding-left:24px;color:var(--muted);line-height:1.55;max-width:64ch} .prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)} .prose ul li strong{color:var(--text);font-weight:600} /* ── home hub: ruled fan-out to detail pages ── */ .indexlist{border-top:var(--hair)} .indexlist a{display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) auto;gap:clamp(16px,4vw,48px);align-items:baseline;padding:clamp(24px,3vw,38px) 0;border-bottom:var(--hair);transition:padding-left .2s ease} .indexlist a:hover{padding-left:8px} .il__k{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--accent-text)} .il__t{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;margin-bottom:7px} .il__d{color:var(--muted);max-width:54ch} .il__go{color:var(--accent-text);font-weight:600;white-space:nowrap;align-self:center} .indexlist a:hover .il__go{text-decoration:underline} /* ── related links + CTA strip (sub-pages) ── */ .related{border-top:var(--hair);margin-top:clamp(36px,4.5vw,60px);padding-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center} .related .lbl{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--faint);font-weight:600} .related a{color:var(--accent-text);font-weight:500}.related a:hover{text-decoration:underline} .ctastrip{border-top:3px solid var(--accent);margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,3.5vw,44px);display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between} .ctastrip h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);letter-spacing:-.02em;max-width:20ch} .ctastrip .cta-row{flex:none} /* ── hero ── */ .hero{padding-top:clamp(28px,3.5vw,52px)} .hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,60px);align-items:start;padding-bottom:clamp(36px,4.5vw,60px)} .hero__lead{padding-top:clamp(8px,2vw,28px)} .hero__lead{max-width:34ch} .hero__h1{font-size:var(--t-hero);letter-spacing:-.03em;margin:18px 0} .hero__lead .deck{margin-bottom:30px} .cta-row{display:flex;flex-wrap:wrap;gap:14px} .statwrap{padding-top:clamp(32px,4vw,48px)} .statline{font-family:var(--font-body);font-weight:500;font-size:.92rem;color:var(--muted);letter-spacing:.01em;padding-top:24px;font-variant-numeric:tabular-nums} .statline b{color:var(--text)}.statline .sep{color:var(--faint);margin:0 .5rem} /* ── product preview object (email + SMS) ── */ .object{position:relative;padding:8px 0 40px} /* BC:MOCKUP:START - a picture of someone else's product. These literals are Gmail's greys and iMessage green. They are NOT our chrome and must NOT follow our theme: an email client is white in dark mode too, and a themed mockup would stop looking like the thing it is depicting. Same reasoning the design language gives for categorical chart palettes - a literal that carries no semantic meaning stays literal. Contained here so it is named and countable rather than loose. */ .email{background:var(--surface);border:var(--hair);border-radius:12px;box-shadow:var(--shadow);position:relative;overflow:hidden} .email__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:var(--hair)} .email__av{width:34px;height:34px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1rem;flex:none} .email__who{min-width:0} .email__from{font-weight:500;font-size:.92rem} .email__addr{font-family:var(--font-body);font-size:.72rem;color:var(--faint)} .email__time{margin-left:auto;font-family:var(--font-body);font-size:.72rem;color:var(--faint);white-space:nowrap} .email__body{padding:18px} .email__subj{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px} .email__snip{color:var(--muted);font-size:.94rem;margin-bottom:16px} .email__facts{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0 0 16px;font-size:.85rem} .email__facts dt{color:var(--faint);font-weight:500} .email__facts dd{margin:0;font-family:var(--font-body);color:var(--text);font-variant-numeric:tabular-nums} .chip{display:inline-block;font-family:var(--font-body);font-size:.72rem;color:var(--accent-ink);background:var(--accent);padding:.15rem .5rem;border-radius:4px} .email__link{color:var(--accent-text);font-weight:500;font-size:.9rem} .email__foot{margin-top:14px;padding-top:12px;border-top:var(--hair);font-family:var(--font-body);font-size:.68rem;color:var(--faint)} .stamp{position:absolute;top:14px;right:14px;transform:rotate(7deg);font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.12em;color:var(--accent);border:1.5px solid var(--accent);border-radius:5px;padding:.28rem .5rem;opacity:.85} .sms{position:relative;margin:22px 0 0 24px;width:82%;max-width:300px} .sms__label{font-family:var(--font-body);font-size:.66rem;letter-spacing:.08em;color:var(--faint);margin:0 0 6px 6px;text-transform:uppercase} .sms__bubble{background:var(--surface);border:var(--hair);border-radius:16px 16px 16px 5px;padding:12px 14px;font-size:.85rem;line-height:1.45;box-shadow:var(--shadow-sm)} .sms__bubble b{font-weight:500} .sms__time{font-family:var(--font-body);font-size:.66rem;color:var(--faint);margin:5px 0 0 8px} /* BC:MOCKUP:END */ .object__cap{font-family:var(--font-body);font-size:.72rem;color:var(--faint);margin-top:26px;text-align:center;letter-spacing:.02em} /* ── problem ── */ .problem .lede2{font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);line-height:1.4;font-family:var(--display);font-weight:400;letter-spacing:-.02em;max-width:24ch;color:var(--text)} .problem p.flow{max-width:52ch;color:var(--muted);margin-top:28px;font-size:1.1rem;line-height:1.6} .dropcap::first-letter{font-family:var(--display);font-weight:700;font-size:3.4em;line-height:.8;float:left;margin:.05em .12em 0 0;color:var(--accent)} .pull{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.3rem + 2.2vw,3rem);letter-spacing:-.028em;color:var(--accent);margin-top:56px;max-width:20ch;line-height:1.08} /* ── how it works: hung numerals + ruled rows ── */ .steps{border-top:var(--hair)} .step{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2.6fr);gap:clamp(24px,5vw,64px);padding:clamp(40px,5vw,64px) 0;border-bottom:var(--hair);align-items:baseline} .step__num{font-family:var(--display);font-weight:700;font-size:var(--t-num);line-height:.8;color:var(--accent);letter-spacing:-.04em;font-variant-numeric:tabular-nums} .step__t{font-family:var(--display);font-weight:700;font-size:var(--t-h3);margin-bottom:14px;letter-spacing:-.02em} .step p{color:var(--muted);max-width:48ch;font-size:1.05rem} /* ── coverage index ── */ .trades{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.75;letter-spacing:-.015em;color:var(--text)} .trades .sep{color:var(--accent);font-weight:500} .trades .more{color:var(--faint)} .coverage{margin-top:44px;color:var(--muted);max-width:60ch;font-size:1.08rem;line-height:1.6} .coverage b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums} /* ── who it's for: ruled list ── */ .who{border-top:var(--hair)} .who__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,56px);padding:clamp(32px,4vw,48px) 0;border-bottom:var(--hair);align-items:baseline} .who__t{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em} .who__row p{color:var(--muted);max-width:52ch;font-size:1.05rem} /* ── what you get: open 2x2 ruled ── */ .gets{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:var(--hair)} .get{padding:clamp(32px,4vw,48px) clamp(28px,4vw,48px) clamp(32px,4vw,48px) 0;border-bottom:var(--hair)} .get:nth-child(odd){border-right:var(--hair);padding-left:0} .get:nth-child(even){padding-left:clamp(28px,4vw,48px)} .get__tick{color:var(--accent);font-family:var(--font-body);font-size:.9rem;margin-bottom:14px} .get__t{font-family:var(--display);font-weight:700;font-size:var(--t-h3);margin-bottom:12px;letter-spacing:-.02em} .get p{color:var(--muted);max-width:44ch;font-size:1.02rem} /* ── credibility ── */ .cred{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,80px);align-items:start} .cred__ticks{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px} .cred__ticks li{position:relative;padding-left:26px;color:var(--muted);max-width:50ch;line-height:1.55} .cred__ticks li strong{color:var(--text);font-weight:500} .cred__ticks li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)} .figs{display:grid;gap:0;border-top:2px solid var(--accent)} .fig{padding:26px 0;border-bottom:var(--hair)} .fig__n{font-family:var(--font-body);font-weight:500;font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1} .fig__n .u{color:var(--accent)} .fig__l{color:var(--muted);font-size:.94rem;margin-top:8px} .note{margin-top:40px;font-style:italic;color:var(--faint);max-width:50ch} /* ── cols (builders / pricing) ── */ .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--hair)} .col{padding:clamp(32px,3.5vw,44px) clamp(24px,3vw,36px);border-bottom:var(--hair)} .col:not(:last-child){border-right:var(--hair)} .col h3{font-family:var(--display);font-weight:700;font-size:1.32rem;margin-bottom:14px;letter-spacing:-.02em} .col p{color:var(--muted);font-size:1rem} .tier{display:flex;flex-direction:column} .tier--pro{background:var(--surface);box-shadow:var(--shadow);border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));position:relative} .tier__flag{position:absolute;top:-11px;left:clamp(24px,3vw,36px);font-family:var(--font-body);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:.28rem .7rem;border-radius:20px} .tier__badge{font-family:var(--font-body);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text);margin:6px 0 4px} .tier__for{color:var(--muted);font-size:.94rem;margin-bottom:20px} .tier__list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;flex:1} .tier__list li{position:relative;padding-left:22px;font-size:.98rem} .tier__list li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)} .fineprint{color:var(--faint);font-size:.9rem;margin-top:40px;max-width:60ch} #intel .btn{margin-top:44px} /* gap-separated columns (pricing) - only Pro raised */ .cols--cards{border-top:0;gap:clamp(20px,3vw,30px);align-items:start} .cols--cards .col{border:0!important;padding-left:0;padding-right:0} .cols--cards .tier--pro{padding:clamp(28px,3.5vw,42px)} /* ── faq ── */ .faq{border-top:var(--hair);max-width:900px} .faq__item summary{font-size:1.18rem} .faq__item{border-bottom:var(--hair)} .faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:clamp(22px,2.5vw,30px) 0;font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.015em} .faq__item summary::-webkit-details-marker{display:none} .faq__item summary::after{content:"+";color:var(--accent);font-family:var(--font-body);font-size:1.5rem;line-height:1;transition:transform .25s} .faq__item[open] summary::after{content:"×";transform:rotate(0)} .faq__item p{color:var(--muted);max-width:68ch;padding:0 0 clamp(22px,2.5vw,30px);line-height:1.65} /* ── closing CTA: full-bleed dark band ── */ .band{background:var(--band-bg);color:var(--band-text)} .band .kicker{color:color-mix(in srgb,var(--band-accent) 88%,var(--band-text))} .band h2{color:var(--band-text)} .band .deck{color:var(--band-muted);margin-inline:auto} .ctaband{text-align:center;max-width:640px;margin-inline:auto} .form{margin-top:40px;text-align:left;background:var(--band-surface);border:1px solid var(--band-border);border-radius:16px;padding:clamp(28px,4vw,48px)} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .field{display:block;margin-bottom:20px} .field>span{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--band-muted);margin-bottom:9px} .field em{color:var(--band-accent);font-style:normal}.field .opt{color:var(--faint)} .field input,.field textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--band-text);background:rgba(0,0,0,.22);border:1px solid var(--band-border);border-radius:9px;padding:.9rem 1rem;min-height:48px;transition:border-color .16s,box-shadow .16s} .field input::placeholder,.field textarea::placeholder{color:var(--faint)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--band-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--band-accent) 26%,transparent)} .field textarea{resize:vertical;min-height:96px} .field input[aria-invalid="true"]{border-color:var(--danger)} .err{display:block;color:var(--danger);font-size:.82rem;margin-top:.35rem;min-height:1em} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cf-turnstile-slot:not(:empty){margin:.2rem 0 1rem} .form__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:.3rem} .form__actions .btn--quiet{color:var(--band-text);border-color:var(--band-border)} .form__note{color:var(--faint);font-size:.86rem;margin-top:18px;font-family:var(--font-body)} .form__status{margin-top:18px;font-weight:500;min-height:1.4em} .form__status a{color:var(--band-accent);text-decoration:underline} .form__status.is-ok{color:var(--good)}.form__status.is-bad{color:var(--danger)} .form.is-done .form__row,.form.is-done .field,.form.is-done .form__actions,.form.is-done .hp,.form.is-done .cf-turnstile-slot,.form.is-done .form__note{display:none} /* ── footer colophon ── */ .footer{padding:clamp(40px,5vw,60px) 0 34px;border-top:3px solid var(--accent)} .footer__in{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;padding-bottom:32px;border-bottom:var(--hair)} .footer__tag{color:var(--muted);margin-top:12px;max-width:34ch} .footer__nav{display:flex;flex-wrap:wrap;gap:20px} .footer__nav a{color:var(--muted);font-size:.94rem}.footer__nav a:hover{color:var(--text)} .colophon{padding-top:28px;display:grid;gap:12px;color:var(--faint);font-size:.85rem} .colophon a{color:var(--muted)} .colophon .set{font-family:var(--font-body);font-size:.76rem;letter-spacing:.02em} .colophon .biz strong{color:var(--text)} /* ── motion ── */ .js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.16,.8,.3,1),transform .6s cubic-bezier(.16,.8,.3,1)} .js .reveal.in{opacity:1;transform:none} .js [data-stagger]>*{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.16,.8,.3,1),transform .55s cubic-bezier(.16,.8,.3,1)} .js [data-stagger].in>*{opacity:1;transform:none} .js [data-stagger].in>*:nth-child(2){transition-delay:.09s} .js [data-stagger].in>*:nth-child(3){transition-delay:.18s} .js [data-stagger].in>*:nth-child(4){transition-delay:.27s} @media (prefers-reduced-motion:reduce){.js .reveal,.js [data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}} /* ── responsive ── */ @media (max-width:1099.98px){ .mast__date,.mast__nav,.mast__right{display:none} .burger{display:flex;margin-left:0} .mast.open .mast__mobile{display:flex} .mast.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .mast.open .burger span:nth-child(2){opacity:0} .mast.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .hero__in,.cred{grid-template-columns:1fr;gap:48px} .hero__lead{max-width:none} .step,.who__row{grid-template-columns:1fr;gap:14px} .step__num{font-size:clamp(2.6rem,14vw,3.4rem)} .cols{grid-template-columns:1fr} .col:not(:last-child){border-right:0} .tier--pro{margin:14px 0} } @media (max-width:559.98px){ .gets{grid-template-columns:1fr} .get:nth-child(odd){border-right:0;padding-right:0} .get:nth-child(even){padding-left:0} .form__row{grid-template-columns:1fr} .cta-row .btn,.form__actions .btn{flex:1 1 100%} .sms{width:100%;max-width:none;margin:22px 0 0 0} .indexlist a{grid-template-columns:1fr;gap:5px;padding-left:0!important} .il__go{margin-top:10px} .ctastrip{flex-direction:column;align-items:flex-start;gap:20px} } /* === product preview + dashboard charts === */ :root{ --c-funnel-mix:var(--sunk); --c-donut-mix:var(--sunk); } .chart{width:100%;height:auto;overflow:visible;font-family:var(--body)} .chart .grid{stroke:var(--border);stroke-width:1;opacity:.7} .c-axis{fill:var(--faint);font-size:11px}.c-axis--x{text-anchor:middle}.c-axis--r{text-anchor:end} .c-area{fill:var(--accent);opacity:.13} .c-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .c-dot{fill:var(--accent)}.c-hit{fill:var(--accent);opacity:0}.c-hit:hover{opacity:.14} .c-bar{fill:var(--accent)} .c-rowlabel{fill:var(--text);font-size:12px;font-weight:500}.c-rowlabel--r{text-anchor:end} .c-val{fill:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}.c-sub{fill:var(--faint)} .c-caplabel{fill:var(--faint);font-size:10.5px;text-anchor:middle;font-variant-numeric:tabular-nums} .c-donut-num{fill:var(--text);font-size:19px;font-weight:700;text-anchor:middle;font-family:var(--display)} .c-donut-sub{fill:var(--faint);font-size:10px;text-anchor:middle} .c-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px} .c-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px} .c-swatch{width:10px;height:10px;border-radius:3px;flex:none} .c-leg-k{color:var(--text);font-weight:500}.c-leg-v{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums} .chart-empty{color:var(--faint);font-size:12px;padding:20px;text-align:center} .preview{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin-top:clamp(26px,3vw,40px)} .preview__chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--sunk);border-bottom:1px solid var(--border)} .preview__chrome .pd{width:10px;height:10px;border-radius:50%;background:var(--border)} .preview__url{margin-left:14px;font-family:var(--body);font-size:.8rem;color:var(--faint)} .preview__body{padding:clamp(16px,2.4vw,26px)} .pv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .pv-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden} .pv-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)} .pv-stat__v{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1} .pv-stat__u{font-size:.6em;color:var(--muted)} .pv-stat__l{display:block;margin-top:5px;font-size:.78rem;color:var(--muted)} .pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pv-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px} .pv-card--wide{grid-column:1 / -1} .pv-card__h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:600;font-size:.98rem;margin-bottom:8px} .pv-card__h span{font-family:var(--body);font-weight:400;font-size:.76rem;color:var(--faint)} .pv-donutrow{display:flex;align-items:center;gap:16px}.pv-donutrow .chart--donut{width:140px;flex:none}.pv-donutrow .c-legend{flex:1} .preview__cap{text-align:center;margin-top:14px;font-size:.82rem;color:var(--faint)} @media(max-width:819.98px){.pv-kpis{grid-template-columns:repeat(2,1fr)}.pv-grid{grid-template-columns:1fr}} /* === gated preview teaser (headline numbers crisp, detail blurred) === */ .sec.product{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(34px,4.5vw,64px)} .product .sec__head{margin-bottom:clamp(20px,2.4vw,30px)} .pv-locked .c-rowlabel,.pv-locked .c-val,.pv-locked .c-caplabel,.pv-locked .c-axis, .pv-locked .c-leg-k,.pv-locked .c-leg-v,.pv-locked .c-donut-num,.pv-locked .c-donut-sub{ filter:blur(4.5px);opacity:.66;-webkit-user-select:none;user-select:none} .pv-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px} @media(max-width:819.98px){.pv-grid3{grid-template-columns:1fr}} .pv-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px; margin-top:16px;padding:18px 22px;border:1px solid var(--border);border-radius:14px; background:color-mix(in srgb,var(--accent) 7%,var(--bg))} .pv-cta__t{font-family:var(--display);font-weight:700;font-size:1.08rem;max-width:46ch;line-height:1.25} .pv-cta__t span{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:.9rem;margin-top:5px;line-height:1.4} .pv-cta__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .pv-cta .btn{margin:0} .pv-lockpill{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:999px;padding:3px 10px;margin-left:auto} /* BC:MOCKUP:START - the v10 refinement of the same picture. Two regions because the refinement sits after unrelated rules; consolidating them into one is remaining work, and naming both is what keeps the literals countable in the meantime. */ /* === v10 refinements: real email + green SMS + coverage simplify + steps === */ /* email: always a white Gmail/Outlook-style client, in both themes */ .email{background:#ffffff;border:1px solid #e4e6e9;color:#202124;box-shadow:0 24px 50px -30px rgba(20,24,31,.5),0 2px 8px -4px rgba(20,24,31,.25)} .email__head{border-bottom:1px solid #edeef0;padding:14px 18px} .email__av{border-radius:50%;background:#c2410c;color:#fff;width:38px;height:38px} .email__from{color:#202124;font-weight:600} .email__addr{color:#5f6368;font-family:var(--body)} .email__time{color:#5f6368;font-family:var(--body)} .email__subj{color:#202124} .email__snip{color:#3c4043} .email__facts dt{color:#5f6368} .email__facts dd{color:#202124;font-family:var(--body)} .email__link{color:#1a73e8;font-weight:500} .email__foot{color:#80868b;border-top:1px solid #edeef0;font-family:var(--body)} .email .chip{background:#e8f0fe;color:#1a73e8;border-color:transparent} .stamp{transform:none;color:#0a7d33;border:1px solid #b7e0c4;background:#e7f6ec;border-radius:999px;font-family:var(--body);letter-spacing:.02em;top:16px;right:16px;opacity:1;font-weight:600;padding:.24rem .62rem;font-size:.6rem} /* SMS: green iPhone (SMS) bubble, white text, received on the left */ .sms__bubble{background:#34c759;color:#fff;border:0;border-radius:20px 20px 20px 6px;padding:11px 15px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.9rem;line-height:1.4;box-shadow:none} .sms__bubble b{color:#fff;font-weight:600} /* BC:MOCKUP:END */ /* kill the drop-cap (random font/size change) */ .dropcap::first-letter{font-size:inherit;font-family:inherit;font-weight:inherit;float:none;margin:0;color:inherit} /* homepage: how-it-works steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px} .step{border:1px solid var(--border);border-radius:14px;padding:20px 22px;background:var(--surface)} .step__n{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--accent-text);display:inline-grid; place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:12px} .step h3{font-size:1.06rem;margin-bottom:7px} .step p{color:var(--muted);font-size:.94rem;line-height:1.5} /* coverage: trade chips, stat row, point cards */ .trade-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px} .trade-chip{font-size:.9rem;padding:.5rem .95rem;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text)} .trade-chip--more{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))} .figs--row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2px} .points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px} .point{border:1px solid var(--border);border-radius:14px;padding:18px 20px;background:var(--surface)} .point h3{font-size:1.04rem;margin-bottom:8px} .point p{color:var(--muted);font-size:.93rem;line-height:1.5} .coverage-note{color:var(--muted);max-width:62ch;margin-top:clamp(22px,3vw,38px);font-size:1.02rem;line-height:1.55} @media(max-width:819.98px){.steps,.figs--row,.points{grid-template-columns:1fr}} /* === v11: tighten + balance the hero, fill the left column === */ .hero{padding-top:clamp(18px,2.4vw,36px)} .hero__in{align-items:center;padding-bottom:clamp(26px,3.2vw,44px)} .object{padding:4px 0 8px} .statwrap{padding-top:clamp(18px,2.4vw,34px)} .hero__points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px} .hero__points li{position:relative;padding-left:24px;color:var(--muted);font-size:1rem;line-height:1.4} .hero__points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)} /* ══ Homepage revamp: product showcase + roadmap ══════════════════════════ */ .prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:6px} @media(max-width:819.98px){.prods{grid-template-columns:1fr}} .prod{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:var(--hair);border-radius:14px;padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-sm)} .prod__top{display:flex;align-items:center;justify-content:space-between;gap:12px} .prod__aud{font-family:var(--body);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--faint)} .prod__name{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;margin:0 0 6px} .prod__val{color:var(--muted);max-width:52ch} .prod__list{list-style:none;display:grid;gap:9px;margin:auto 0 0;padding:2px 0 0} .prod__list li{position:relative;display:flex;gap:11px;align-items:flex-start;color:var(--text);font-size:.97rem;line-height:1.45} .prod__list li::before{content:"";flex:none;width:7px;height:7px;margin-top:.5em;background:var(--accent);transform:rotate(45deg)} .prod__note{font-size:.85rem;line-height:1.5;color:var(--faint);border-top:var(--hair);padding-top:13px;margin:0} .prod__note em{color:var(--accent-text);font-style:italic} .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;padding:.32rem .6rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);white-space:nowrap} .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .tag--live{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 32%,var(--border))} .tag--planned{color:var(--faint)} .road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:6px} @media(max-width:819.98px){.road{grid-template-columns:1fr}} .road__col{display:flex;flex-direction:column;gap:15px;background:var(--surface);border:var(--hair);border-radius:14px;padding:clamp(20px,2.2vw,28px)} .road__col--live{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-color:color-mix(in srgb,var(--accent) 24%,var(--border))} .road__h{display:flex;align-items:center;justify-content:space-between;gap:10px} .road__t{font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.01em} .road__list{list-style:none;display:grid;gap:11px;margin:0;padding:0} .road__list li{position:relative;display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:.95rem;line-height:1.45} .road__list li b{color:var(--text);font-weight:600} .road__list li::before{content:"";flex:none;width:7px;height:7px;margin-top:.42em;border-radius:50%;border:1.5px solid var(--accent);opacity:.5} .road__col--live .road__list li::before{background:var(--accent);opacity:1} .roadlink{margin-top:22px;color:var(--muted)} .roadlink a{color:var(--accent-text);font-weight:600} /* ══ Homepage polish: isolated step cards + bold stats band ══════════════════ */ /* how-it-works steps as clean vertical cards (isolated from the .step ruled-row layout) */ .stepcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:6px} @media(max-width:819.98px){.stepcards{grid-template-columns:1fr}} .stepcard{background:var(--surface);border:var(--hair);border-radius:14px;padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:13px} .stepcard__n{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text);font-family:var(--display);font-weight:700;font-size:1.15rem;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border))} .stepcard h3{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;margin:2px 0 0} .stepcard p{color:var(--muted);font-size:.99rem;line-height:1.5;margin:0} /* bold stats band - the salesy numbers */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(12px,1.6vw,22px);border-top:var(--hair);padding-top:clamp(24px,2.6vw,34px)} @media(max-width:819.98px){.stats{grid-template-columns:repeat(2,1fr);gap:26px 18px}} .stat{display:flex;flex-direction:column;gap:6px} .stat__n{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,1.3rem + 2.6vw,3.2rem);line-height:.9;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums} .stat__n .u{color:var(--accent-text)} .stat__l{font-size:.92rem;color:var(--muted);line-height:1.4;max-width:24ch} /* tighten the hero so the columns align (kill the gap above the kicker) */ .hero__lead{padding-top:0} /* ── data tables (.tablewrap > .tbl) ──────────────────────────────────────── These classes are used by every vertical landing page and were never defined, so the field tables rendered as bare browser defaults: no padding, no rules, and - because the stacking rules below were also missing - a wide table that overflowed the viewport on a phone. The data-label attributes in the markup existed the whole time waiting for this block. */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0; border:var(--hair);border-radius:10px;background:var(--surface)} .tbl{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.55} .tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:top; border-bottom:var(--hair)} .tbl thead th{font-family:var(--display);font-weight:600;font-size:.8rem; letter-spacing:.04em;text-transform:uppercase;color:var(--muted); background:var(--bg);white-space:nowrap} .tbl tbody tr:last-child td{border-bottom:0} .tbl td strong{color:var(--text)} .tbl td:first-child{white-space:nowrap} /* The second column carries sentences; let it breathe but not sprawl. */ .tbl td:last-child{max-width:62ch;color:var(--muted)} @media (max-width:819.98px){ /* STACK, don't scroll. A 2-column field table read sideways is unreadable, and horizontal scroll hides the very column that explains the field. */ .tablewrap{border:0;background:none;overflow-x:visible} .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%} .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .tbl tr{border:var(--hair);border-radius:10px;background:var(--surface); padding:4px 0;margin-bottom:12px} .tbl td{border-bottom:0;padding:8px 14px} .tbl td:first-child{white-space:normal;padding-bottom:0} .tbl td:last-child{max-width:none} .tbl td[data-label]:last-child::before{content:attr(data-label); display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase; color:var(--faint);margin-bottom:2px} } /* An unbuilt product must not read like a shipped one. The small "Coming soon" tag was doing all the work; this makes the state legible inside the copy. */ .notyet{display:block;color:var(--accent-text);font-size:.9rem;margin-bottom:6px; letter-spacing:.01em} .mast .btn,.mast__cta .btn{white-space:nowrap} /* LINKS READ AS LINKS (2026-08-23): inline text links are underlined and coloured, buttons are not. A reader should tell a link from a sentence and a button from a link at a glance. */ /* :not(.chip) added 2026-08-31. This prose-link rule outranks .prod-roles .chip (0,3,3 against 0,2,0), so the role selector painted --accent regardless of what its own rule said: 4.27 on the light page, still under AA in the very theme the founder reported. A chip is a control, not a sentence link. The token sweep could not see this - it reads rules, not the cascade - the SCREENSHOT did. */ main p a:not(.btn):not(.chip):not(.path__cta):not(.il__go),main li a:not(.btn),main dd a:not(.btn),main .deck a:not(.btn),main .stat__l a,main figcaption a{ color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;font-weight:600} main p a:not(.btn):hover,main li a:not(.btn):hover,main .deck a:not(.btn):hover{text-decoration-thickness:2.5px} .path__cta,.il__go{text-decoration:underline;text-underline-offset:.2em} .btn{text-decoration:none !important} /* role-page chip picker (2026-08-27): the row that jumps a trade to its own page */ .chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 1.4rem} a.chip{text-decoration:none !important} .chip--on{box-shadow:0 0 0 2px var(--accent-ink) inset;font-weight:700} /* BC:PRIMITIVES:START */ /* ============================================================================ BUILDSCONNECT PRIMITIVES - ONE definition per component (2026-08-29) Source of truth. design/build_tokens.py injects this verbatim into platform/app/static/style.css between the BC:PRIMITIVES markers. Every component here replaces variants that existed in three places. Colour comes from tokens ONLY - no hex, no var() fallback, no rgba over an assumed background. Sizes come from the type scale, never inline. ============================================================================ */ /* ── DENSITY: two densities, one component set (section 5) ─────────────────── The single most valuable idea in the system and it maps onto the two buyers. A geotechnical engineer scanning two hundred rows and an agent reading twelve want different things from the same table. Set by role on the wrapper; nobody chooses it. Every component below reads these, so there is one component set. */ .content { --d-wrap: var(--wrap); --d-table: var(--t-body); --d-cell: 9px 12px; --d-card-pad: var(--s5); --d-kpi: var(--t-kpi); --d-lh: var(--lh); } .content.data { /* consultants and technical buyers - the data dominates */ --d-wrap: none; --d-table: var(--t-cap); --d-cell: 6px 10px; --d-card-pad: var(--s4); --d-kpi: 1.35rem; --d-lh: var(--lh); } .content.report { /* agents, brokers, principals - roomy and scannable */ --d-wrap: 1080px; --d-table: var(--t-body); --d-cell: 11px 14px; --d-card-pad: var(--s6); --d-kpi: var(--t-kpi); --d-lh: var(--lh-loose); } .content { max-width: var(--d-wrap); line-height: var(--d-lh); } /* Tabular figures everywhere digits are compared (section 2). */ .num, .kpi .v, .mono, .dt td, .dt th, .dtable td, .dtable th, table td, table th { font-variant-numeric: tabular-nums; } .mono, .num { font-family: var(--font-mono); } /* ── FOCUS: one ring, every interactive element (section 4) ────────────────── Declared once here rather than per component, so a new control cannot ship without it. Tested by test_design_language. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .pill:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ── CARD ────────────────────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--d-card-pad, var(--s5)); box-shadow: var(--shadow); color: var(--text); } .card > h2, .card > h3, .card__head, .card__title { font-size: var(--t-md); font-weight: 600; line-height: var(--lh-tight); margin: 0 0 var(--s2); color: var(--text); } .card p, .card__body { font-size: var(--t-body); color: var(--dim); margin: 0 0 var(--s2); } .card > :last-child { margin-bottom: 0; } @media (max-width: 559.98px) { .card { overflow-x: auto; } } /* ── KPI: label / value / sub-line. The sub-line SELLS the number. ────────── */ .kpi { display: flex; flex-direction: column; gap: var(--s1); } .kpi .k, .kpi__label { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--dim); } .kpi .v, .kpi__value { font-size: var(--d-kpi, var(--t-kpi)); font-weight: 600; font-family: var(--font-mono); letter-spacing: var(--track-kpi); color: var(--text); line-height: var(--lh-tight); } .kpi .s, .kpi__sub { font-size: var(--t-sm); color: var(--dim); } .kpi .s:empty, .kpi__sub:empty { display: none; } /* omitted, never blank */ .kpi .v.up { color: var(--up); } .kpi .v.down { color: var(--down); } /* ── PILL: neutral by default, semantics as CLASSES, never inline ─────────── */ .pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; line-height: 1.7; background: var(--panel2); color: var(--text2); border: 1px solid var(--line); white-space: nowrap; } .pill.accent { background: var(--accent-weak); color: var(--accent-strong); border-color: var(--accent-line); } .pill.good { background: color-mix(in srgb, var(--good) 12%, var(--panel)); color: var(--good); border-color: color-mix(in srgb, var(--good) 34%, var(--panel)); } .pill.warn { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, var(--panel)); } .pill.danger { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, var(--panel)); } /* ── BUTTON: solid / ghost / icon, with every state ──────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 9px 15px; min-height: 38px; border-radius: var(--r-sm); border: 1px solid transparent; font-family: inherit; font-size: var(--t-body); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); transition: background var(--motion), border-color var(--motion), opacity var(--motion); } .btn:hover { background: var(--accent-strong); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled, .btn:disabled { opacity: .55; cursor: not-allowed; background: var(--accent); } .btn.ghost { background: transparent; color: var(--text); border-color: var(--control-line); } .btn.ghost:hover { background: var(--panel2); border-color: var(--accent); color: var(--accent-strong); } .btn.icon { padding: 0; width: 38px; min-height: 38px; background: transparent; color: var(--icon); border-color: transparent; } .btn.icon:hover { background: var(--panel2); color: var(--accent-strong); } .btn.sm { padding: 5px 10px; min-height: 30px; font-size: var(--t-cap); } /* ── BANNER: four severities as classes, not two plus inline ─────────────── */ .banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel2); color: var(--text2); font-size: var(--t-body); } .banner__title { font-weight: 600; color: var(--text); } .banner.ok { background: color-mix(in srgb, var(--good) 10%, var(--panel)); border-color: color-mix(in srgb, var(--good) 32%, var(--panel)); } .banner.warn { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: color-mix(in srgb, var(--warn) 32%, var(--panel)); } .banner.error { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 32%, var(--panel)); } .banner.ok .banner__title { color: var(--good); } .banner.warn .banner__title { color: var(--warn); } .banner.error .banner__title { color: var(--danger); } /* ── DATA TABLE: sticky header, scroll container at EVERY width ──────────── */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .dtable, .dt { width: 100%; border-collapse: collapse; font-size: var(--d-table, var(--t-body)); color: var(--text); } .dtable thead th, .dt thead th { position: sticky; top: 0; z-index: 2; background: var(--panel2); color: var(--dim); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); text-align: left; padding: var(--d-cell, 9px 12px); border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .dtable td, .dt td { padding: var(--d-cell, 9px 12px); border-bottom: 1px solid var(--line); vertical-align: top; } .dtable tbody tr:hover, .dt tbody tr:hover { background: var(--panel2); } .dtable td.num, .dt td.num, .dtable th.num, .dt th.num { text-align: right; font-family: var(--font-mono); } .dtable tbody tr:last-child td, .dt tbody tr:last-child td { border-bottom: 0; } /* ── INPUT: one class for text and select ────────────────────────────────── */ .input, .field input, .field select, .field textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--control-line); border-radius: var(--r-sm); padding: 8px 11px; min-height: 38px; font-family: inherit; font-size: var(--t-body); line-height: 1.4; } .input:focus, .field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 var(--focus-ring) var(--accent-weak); } /* THE OUTLINE IS REMOVED ONLY FOR POINTER FOCUS. `:focus` and `:focus-visible` have identical specificity, so a bare `outline: none` on :focus 130 lines below the focus ring simply deleted it - the ring was declared, tested as declared, and did not render for the keyboard user it exists for. Scoping to :not(:focus-visible) keeps the ring where it matters and stops the doubled outline when a mouse clicks a field. */ .input:focus:not(:focus-visible), .field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--dim); } .input[disabled], input[disabled], select[disabled] { background: var(--panel2); color: var(--dim); } .field > span, .field__label { display: block; font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--dim); margin-bottom: var(--s1); } .field__help { display: block; font-size: var(--t-sm); color: var(--dim); margin-top: var(--s1); } /* THE BAND STAYS DARK IN BOTH THEMES, so a label coloured for a light panel is unreadable on it. The primitive above overrode the site's own band-safe rule at identical specificity; this puts the band's controls back on band tokens. */ .band .field > span, .band .field__label, .band .field__help { color: var(--band-muted); } .band .input, .band input, .band select, .band textarea { background: var(--band-surface); color: var(--band-text); border-color: var(--band-border); } /* Phones: 16px stops iOS zooming on focus; 44px is the touch minimum. */ @media (max-width: 559.98px) { .input, input, select, textarea { font-size: 16px; min-height: 44px; } .btn { min-height: 44px; } } /* ── VOICE (section 6): absence, status words, the one-line confidence note ─ */ /* A field with no record says so. Never a blank cell, never zero, never null. */ .na { color: var(--dim); font-style: normal; } .na::after { content: "not on the record"; } /* Status is never colour alone: every status colour pairs with its word. */ .status { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; } .status::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; } .status.good { color: var(--good); } .status.warn { color: var(--warn); } .status.danger { color: var(--danger); } /* One short line, in dim, under the figure it qualifies. Authority, not hedging. If it starts reading like a disclaimer it has grown too big - keep it to one. */ .basis { display: block; font-size: var(--t-sm); color: var(--dim); margin-top: var(--s1); } /* ── GATED: shown, not hidden (section 7) ────────────────────────────────── */ .gated { opacity: .62; } .gated .icon, .gated .tile__icon { color: var(--dim); } .gated .btn { background: transparent; color: var(--text); border-color: var(--control-line); } .lock { font-size: var(--t-xs); color: var(--dim); } /* ── EMPTY STATE: a real component, not a bare sentence ─────────────────── */ .empty { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: var(--s6); text-align: center; color: var(--dim); font-size: var(--t-body); background: var(--panel); } .empty__title { display: block; color: var(--text); font-weight: 600; margin-bottom: var(--s1); } /* ── SECTION RHYTHM for public surfaces: eyebrow, heading, lede ──────────── */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent-strong); margin-bottom: var(--s2); } .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--accent-line); } .lede { font-size: var(--t-lede); color: var(--text2); max-width: 62ch; line-height: var(--lh-loose); } /* Emphasis is colour, never italics. */ .em { color: var(--accent-strong); font-style: normal; } /* ── PRINT: force light, and re-colour what will not print ───────────────── */ @media print { :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #ffffff !important; --panel: #ffffff !important; --panel2: #f4f2ee !important; --line: #cfc9bd !important; --line-strong: #9a9284 !important; --control-line: #6f6a60 !important; --text: #111111 !important; --text2: #333029 !important; --dim: #5c5850 !important; --icon: #4a4640 !important; --accent: #8f4514 !important; --accent-strong: #7d3c11 !important; --accent-ink: #ffffff !important; --accent-weak: #f7ece2 !important; --accent-line: #cda684 !important; --up: #245c40 !important; --down: #86301f !important; --good: #245c40 !important; /* the screen amber is invisible on paper; this is its printable equivalent */ --warn: #6d4700 !important; --danger: #74190f !important; --grid: #e6e2da !important; --shadow: none !important; --shadow-lift: none !important; } body { background: #ffffff !important; color: #111111 !important; } .card, .dtable, .dt { box-shadow: none !important; } .dtable thead th, .dt thead th { position: static !important; } .tablewrap { overflow: visible !important; } a[href]::after { content: ""; } .no-print, .topnav, .sidebar, .toolbar { display: none !important; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── MAP LEGEND: the key must agree with the dots (2026-08-29) ────────────── */ .maplegend { display: inline-flex; align-items: center; gap: var(--s1); margin-right: var(--s3); font-size: var(--t-sm); color: var(--dim); } .maplegend__dot { width: .7rem; height: .7rem; border-radius: var(--r-pill); background: var(--accent); display: inline-block; } .maplegend__dot--prov { background: var(--panel); border: 2px solid var(--accent); } /* MapLibre's own chrome is a vendored stylesheet with a hardcoded white popup and white controls, so our themed popup text was landing on white in dark mode. Re-skin the vendor's containers from tokens; the map canvas itself is resolved separately in bc_map.js. */ .maplibregl-popup-content, .mapboxgl-popup-content { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lift); } .maplibregl-popup-tip, .mapboxgl-popup-tip { border-top-color: var(--panel) !important; border-bottom-color: var(--panel) !important; } .maplibregl-ctrl-group, .mapboxgl-ctrl-group { background: var(--panel) !important; box-shadow: var(--shadow) !important; } .maplibregl-ctrl-group button, .mapboxgl-ctrl-group button { background: var(--panel) !important; } .maplibregl-ctrl-group button + button { border-top-color: var(--line) !important; } .maplibregl-ctrl-attrib, .mapboxgl-ctrl-attrib { background: var(--panel2) !important; color: var(--dim) !important; } .maplibregl-ctrl-attrib a { color: var(--accent-strong) !important; } /* BC:PRIMITIVES:END */ /* ── THE SITE'S OWN MEASURED VALUES (local overrides, 2026-08-29) ─────────── PLACED LAST ON PURPOSE. The generated primitives are appended at the end of this file, so an override asserting the site's own metrics has to sit after them: at equal specificity the last rule wins, and the first attempt at this block sat above the primitives and silently lost. A LOCAL OVERRIDE WITH A STATED REASON IS EVIDENCE, NOT DRIFT. The shared block carries the APP's values, and the app is a dense tool read by someone scanning two hundred rows. This is a reading surface that has to convince a stranger. Four tokens legitimately differ, and the consolidation had silently taken the app's side of each: --wrap 1120 is the app's column; this site was set at 1160 and its hero copy was fitted to it. At 1120 the headline loses 40px and wraps "anyone else does." onto an extra line. --t-body the app's .9rem is dense-UI body. This site reads at 1.0625rem (17px); the shared value shrank every paragraph on the site by 15% and narrowed every ch-based measure with it. --t-h2 the site's own step, tuned against its section rhythm. --t-h3 likewise. Each was MEASURED for this surface. The shared block is not wrong; it is answering a different question. */ :root { /* MONO IS RETIRED ON THE SITE. v16 said so in one line - `--mono:var(--body)` - and meant it: the site has no monospace anywhere, including `.tok`, the inline code chip that names a field. The shared bridge points --mono at a real mono stack because the APP wants one in its tables. Both are right; they just are not the same product. Stated here so the next person who "fixes" this alias reads the reason first. */ --mono: var(--font-body); --wrap: 1160px; --t-body: 1.0625rem; --t-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); --t-h3: clamp(1.3rem, 1.15rem + .55vw, 1.5rem); } /* ── THE SITE'S OWN BUTTON, re-asserted (local override, 2026-08-29) ───────── The shared primitive is sized for a dense tool: 38px tall, .9rem, tight padding. This is a marketing page whose two hero calls to action were set large and STACKED. The primitive collapsed them onto one row, which took 100px out of the hero's text column - and because the hero grid is align-items:center, the email and SMS mockup beside it rose by exactly 50px. The founder noticed the mockup had moved; the cause was the button. Same reasoning as the type tokens above: the app's size is not wrong, it is answering a different question. The primitive still supplies every state, the focus ring and the semantics; only the metrics are the site's. */ .btn { font-family: var(--font-body); font-weight: 500; font-size: .98rem; padding: .85em 1.5em; border-radius: 7px; min-height: 46px; /* THE SITE'S BUTTON NEVER DECLARED A LINE-HEIGHT, and that is not the same as any one value: an inherited the body's 1.55 while a