:root {
  color-scheme: light;                 /* the brand is light-only */

  /* ---------- Canvas and surfaces ---------- */
  --bg: #f4f1ea;                       /* cream canvas: page, sign-in screen */
  --nav: #f4f1ea;                      /* sidebar: same as canvas, split off by a 1.5px ink edge */
  --paper: #fffdf8;                    /* cards, panels, inputs, topbar, secondary buttons, meter track */
  --wash-lime: #e9edda;                /* running panel, selected list row, source icon tile, count pill */
  --wash-stone: #efede6;               /* scope notes, gap notice, neutral change chip, status pill */
  --wash-table: #eeece3;               /* table header, cost box, letter-scale cells */
  --wash-code: #eeece6;                /* raw evidence and JSON blocks */
  --wash-lane: #f0eee7;                /* lane label band in the findings list */
  --wash-card: #f8f7f1;                /* supporting (diagnostic) cards; open finding row */
  --wash-quiet: #eceee1;               /* explanatory "quiet" panel */
  --wash-rank: #e9eddd;                /* headline figure box */
  --wash-note: #ebece1;                /* coverage note */
  --wash-info: #e6edf3;                /* the one cool information panel */
  --wash-info-edge: #b6c2ce;
  --hover-fill: #e9e7dc;               /* hover: secondary button, nav item, Open Report */
  --hover-card: #f0f1e4;               /* hover: saved-website card summary */
  --selected-fill: #edf3d6;            /* the chosen option card */
  --disabled-fill: #eeece4;            /* disabled-but-explained controls (stay fully opaque) */
  --count-fill: #e7e7dc;               /* count pill inside a tab */
  --icon-tile-fill: #e9e7dd;           /* icon tile in a list row */
  --source-tile-bg: #e9edda;  --source-tile-icon: #315c2c;   /* 40px source icon tile, green: 6.52:1 */
  --info-tile-bg: #dfe9f4;    --info-tile-icon: #345575;     /* 40px source icon tile, blue: 6.33:1 */
  --overlay: #17171388;                /* dialog backdrop: ink at 53% */

  /* ---------- Ink and text ---------- */
  --ink: #171713;                      /* text, borders, hard shadows, dark fills. Never #000 */
  --ink-hover: #35352d;                /* primary button hover fill */
  --ink-20: #17171333;                 /* hairline above a card's footer link */
  --muted: #57574d;                    /* secondary text: 7.18:1 on paper, 6.47:1 on canvas */
  --text-on-tint: #4c4c42;             /* small text on verdict-tinted cards */
  --green: #284d25;                    /* link colour, checkbox accent in sign-in */
  --green-text: #315c2c;               /* secondary green text: completed steps, links in summaries */
  --icon-quiet: #6d6d5e;               /* icons inside Label: Value chips */

  /* ---------- Lines ---------- */
  --line: #c9c6bb;                     /* dividers and quiet card edges. Decorative only (1.68:1) */
  --field-edge: #89897d;               /* inputs, selects, textareas: 3.48:1 on paper */
  --meter-edge: #777766;               /* grade meter and radio ring: 4.48:1 */
  --option-edge: #aaa99b;              /* unselected option card */

  /* ---------- Accent and verdict swatches ---------- */
  --lime: #d7ed76;                     /* the accent; also "Good" */
  --yellow: #ffe799;                   /* "Needs Attention" / review / your action needed */
  --coral: #ffb19e;                    /* "Poor" / issue */
  --blue: #e0e8f2;                     /* "Limited Data" / information / open question */

  /* ---------- Verdict ramps: card fill / meter fill / top rule / overall panel ---------- */
  --good-card: #edf3d6;    --good-meter: #9cc246;    --good-rule: #91b83e;    --good-panel: #f0f4df;
  --warn-card: #fff3c9;    --warn-meter: #d7a92d;    --warn-rule: #d5a932;    --warn-panel: #fff4cf;
  --poor-card: #ffe1d7;    --poor-meter: #e47251;    --poor-rule: #dd674c;    --poor-panel: #ffe1d7;
  --neutral-card: #edf0f4; --neutral-meter: #a5b4c9; --neutral-rule: #9daabc; --neutral-panel: #f0f2f5;
  --default-card: #f0f2f5; --default-meter: #c8d0dc;          /* card with no tone yet */

  /* ---------- State colours: fill / text / edge ---------- */
  /* shared by badges, finding icons, change chips and map-grid cells */
  --pass-bg: #e1ecba;    --pass-text: #28401d;    --pass-edge: #bbca94;     /* 9.18:1 */
  --review-bg: #fff0bd;  --review-text: #665011;  --review-edge: #dcc578;   /* 6.78:1 */
  --issue-bg: #ffe1d7;   --issue-text: #842b20;   --issue-edge: #efb9a7;    /* 7.24:1 */
  --planned-bg: #e7e8e6; --planned-text: #52574e; --planned-edge: #c6c9c2;  /* 6.03:1 */
  --neutral-chip-text: #4a4a40;        /* on --wash-stone: 7.65:1 */
  --pill-gold-edge: #8f7632;           /* yellow count pill and priority number */
  --asking-edge: #5b7396;              /* blue "needs access" number */
  --priorities-edge: #a18d47;          /* priorities panel border ("Start here." in the app) */
  --passes-edge: #a7b781;              /* "What's working" panel and running panel border */
  --passes-icon: #3d662b;

  /* ---------- Feedback ---------- */
  --error-text: #a7482a;   --error-bg: #fff0e9;    /* 5.24:1 */
  --warning-text: #84713a;                         /* field warnings, 4.69:1 on paper */
  --success-text: #28401d; --success-bg: #e1ecba;  /* 9.18:1 */

  /* ---------- Not Measured (missing evidence). Never a verdict colour ---------- */
  --na-bg: #eef0eb;        --na-hatch: #e0e4dd;       --na-edge: #aeb4ac;
  --na-text: #555b54;      --na-text-2: #60675f;      --na-icon: #78837a;
  --na-struck: #717a71;    --na-strike: #69746b;      --na-rule: #89958c;   /* large text only */
  --na-mark: #555f57;      --na-mark-text: #d9e0d8;   --na-mark-strike: #aab5aa;
  --na-chip-bg: #e7e8e4;   --na-chip-hatch: #cbd0c9;  --na-chip-text: #4d544d;
  --na-row-bg: #f2f3ef;    --na-row-hatch: #e6e9e3;   --na-dot: #87958a;
  --na-value: #626d63;     --na-value-strike: #88958a;                      /* inline, body size */

  /* ---------- Placeholder tints (monogram tiles only). Never a verdict colour ---------- */
  --tint-clay: #edd9ce;  --tint-clay-edge: #b9a9a1;
  --tint-rose: #f0dae1;  --tint-rose-edge: #bbaab0;
  --tint-lilac: #e4daee; --tint-lilac-edge: #b2aaba;
  --tint-sky: #d9dff0;   --tint-sky-edge: #a9aebb;
  --tint-teal: #cee2e5;  --tint-teal-edge: #a1b0b3;
  --tint-mint: #cfe4d8;  --tint-mint-edge: #a1b2a8;

  /* ---------- Tier accents (plan cards; not verdicts) ---------- */
  --tier-2-stripe: #add5ed; --tier-3-stripe: #cfc0e8;   /* tier 1 stripe is --lime */
  --tier-2-icon: #dcebfa;   --tier-3-icon: #e7dff1;     /* tier 1 icon tile is --lime */

  /* ---------- Progress ---------- */
  --progress-track: #d1d0c4; --progress-fill: #496136;

  /* ---------- Type ---------- */
  --font-display: Lexend, Arial, sans-serif;            /* weight 700 only */
  --font-body: Atkinson, Arial, sans-serif;             /* Atkinson Hyperlegible, 400 only */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* one stack for all code (guide decision, see 4.1) */
  --font-export: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-display: -0.035em;        /* every Lexend heading and number */
  --tracking-display-tight: -0.06em;   /* the overall grade letter only */
  --tracking-card-title: -0.025em;     /* small h3 inside grade cards */
  --tracking-eyebrow: 0.015em;
  --text-body: 17px;  --leading-body: 1.6;
  --text-control: 16px;                /* buttons, labels, tabs, nav */
  --text-secondary: 15px;              /* meta, help text, chips row */
  --text-support: 14px;                /* small, eyebrow, captions */
  --text-chip: 13px;                   /* badges and counts: the floor */
  --measure: 70ch;

  /* ---------- Spacing (see 2.7) ---------- */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px;
  --sp-8: 20px; --sp-9: 24px; --sp-10: 28px; --sp-11: 36px; --sp-12: 50px; --sp-13: 64px;

  /* ---------- Radii ---------- */
  --radius-swatch: 3px;                /* legend swatch */
  --radius-tag: 4px;                   /* nav count pill */
  --radius-chip: 5px;                  /* badges, meters, letter-scale cells */
  --radius-control: 6px;               /* buttons, inputs, Label: Value chips */
  --radius-tile: 7px;                  /* icon tiles, diagnostic cards, map cells, brand tile */
  --radius-card: 8px;                  /* grade cards, overall grade, running panel */
  --radius-panel: 9px;                 /* panels, tier cards, saved-website cards */
  --radius-feature: 10px;              /* report card, dialog, sign-in card, what-changed panel */
  --radius-round: 999px;               /* count pills in headings */

  /* ---------- Borders ---------- */
  --border-hair: 1px;                  /* badges, dividers, swatches, table rows */
  --border: 1.5px;                     /* panels, cards, controls, chips */
  --border-strong: 2px;                /* overall grade band, skip link */

  /* ---------- Shadows (hard, zero blur) and focus ---------- */
  --shadow-primary: 3px 3px 0 var(--lime);
  --shadow-primary-hover: 4px 4px 0 var(--lime);
  --shadow-news: 3px 3px 0 var(--lime);            /* "what changed" panel */
  --shadow-nav-active: 2px 2px 0 var(--ink);
  --shadow-tier: 3px 3px 0 var(--ink);
  --shadow-report: 4px 4px 0 var(--ink);           /* 3px at 760px and below */
  --shadow-dialog: 5px 5px 0 var(--ink);           /* dialog and sign-in card */
  --focus-outline: 3px solid var(--ink);
  --focus-offset: 4px;
  --focus-halo: 0 0 0 7px var(--lime);

  /* ---------- Sizes and layers ---------- */
  --shell-sidebar: 248px;  --shell-sidebar-compact: 230px;   /* compact at 1150px and below */
  --shell-topbar: 74px;    --shell-topbar-phone: 68px;       /* phone at 760px and below */
  --content-max: 1530px;
  --tap: 44px;             /* smallest standalone target */
  --tap-control: 46px;     /* buttons, inputs, tabs */
  --tap-nav: 48px;         /* primary navigation */
  --tile-h: 56px;          --tile-max: 84px;                 /* brand tile */
  --z-overlay: 50;         --z-skip: 100;
}
/* BookingIQ components mapped to the Big Brain Biz style guide. */
@font-face{font-family:Atkinson;src:url('/assets/bbb-brand-v1/atkinson-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Lexend;src:url('/assets/bbb-brand-v1/lexend-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

*{box-sizing:border-box;min-width:0}html{color-scheme:light;font-size:100%;scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1.5px}header{background:var(--paper);border-bottom:1.5px solid var(--ink)}.nav{max-width:1120px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand img{width:48px;height:auto;flex:none}.brand>span{display:flex;flex-direction:column}.brand strong{font:700 27px/1.2 var(--font-display);letter-spacing:-.035em}.brand small{font:400 13px/1.6 var(--font-body);color:var(--muted);margin-top:3px}nav{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:16px}nav a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none}main{max-width:1040px;margin:auto;padding:64px 24px}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.015em;color:var(--muted);text-transform:none}h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;color:var(--ink)}h1{font-size:clamp(30px,4vw,44px);line-height:1.2;margin:14px 0 24px;max-width:20ch}h2{font-size:23px;line-height:1.35;margin:36px 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 12px}p{margin:8px 0 20px;max-width:70ch}.lead{max-width:64ch;font-size:19px;color:var(--muted)}.actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:28px 0 50px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);padding:11px 17px;border-radius:6px;box-shadow:3px 3px 0 var(--lime);text-decoration:none;font:600 16px/1.4 var(--font-body)}.button:not(:disabled):hover{background:var(--ink-hover);box-shadow:4px 4px 0 var(--lime)}.button.secondary{background:var(--paper);color:var(--ink);box-shadow:none}.button.secondary:not(:disabled):hover{background:var(--hover-fill)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:36px 0}.card{background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:24px;box-shadow:3px 3px 0 var(--ink)}.card p{font-size:17px;color:var(--muted);margin:0}.number{font-size:14px;color:var(--muted);font-weight:700;margin-bottom:20px}.note{background:var(--wash-lime);border:1.5px solid var(--ink);border-radius:9px;padding:24px;margin-top:36px}.document{max-width:820px}.document h1{max-width:none}.document li{margin:12px 0}.date{color:var(--muted);font-size:15px}.toc{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:15px;margin:24px 0 36px;border-block:1.5px solid var(--line);padding-block:12px}.toc a{min-height:44px}footer{border-top:1.5px solid var(--ink);background:var(--paper);color:var(--muted)}.footer{max-width:1120px;margin:auto;padding:28px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px}.footer p{margin:0}.footer nav{font-size:15px}code{font-family:var(--font-mono);font-size:15px;overflow-wrap:anywhere;background:var(--wash-code);padding:2px 4px;border-radius:6px}ul{padding-left:24px}.skip{position:absolute;top:-100px;left:16px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:10px 16px;z-index:100}.skip:focus{top:12px}a:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px var(--lime)}main:focus{outline:none}
@media(max-width:760px){.nav{align-items:flex-start;flex-direction:column;gap:16px}.grid{grid-template-columns:minmax(0,1fr)}main{padding-top:36px}.brand strong{font-size:25px}.brand img{width:43px}.card{padding:24px}.footer{flex-direction:column}}
@media(max-width:360px){main,.nav,.footer{padding-inline:16px}.lead{font-size:17px}.actions{align-items:stretch;flex-direction:column}.note{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}