/* Graphite design system (Tim, 21 Oct 2026). Loaded last; tokens live in theme.css.
   Inter · near-black primary (white in dark) · warm grey surfaces · ONE burnt-orange accent (--brand) for
   section labels, active tab and Review only · 8px radius · no shadows · icons only in the bottom nav. */
:root { --r-btn: 8px; --btn-h: 40px; --btn-h-sm: 32px; --seg-on: var(--card); --seg-on-ink: var(--ink); }
*, *::before, *::after { box-shadow: none !important; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em; }
h1, h2, h3, .hdr-title { letter-spacing: -.015em; font-weight: 650; }
.pr-v, .p, .kpi strong, .stat strong, .fig strong, td.num { font-variant-numeric: tabular-nums; }
a { color: var(--ink); text-underline-offset: 3px; }

/* ---- Wordmark (replaces the yellow S tile) ---- */
.hdr-mark, .nav-logo { display: none !important; }
.wordmark { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
#nav-sheet .wordmark { color: var(--ink); }
.hdr-logo { text-decoration: none !important; display: flex; align-items: center; }
.hdr-tt .hdr-brand { display: none !important; }
.hdr-b { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
header.top, .hdr-bar { backdrop-filter: none !important; }

/* ---- Icons: nav only. Decorative row/tile/chip icons go. ---- */
.rp-ic, .ov-ic, .sv-ic, .row-ic, .pick-ic, .ph-ico, .fx-ic, .ml-ics, .sb-chip .ico, .hw-tile .ico, .hw-si, .hw-flow li .ico svg,
.btn .ico, .bf-act .ico, .chip .ico, .rm-card .ico, .card h2 .ico, .card h3 .ico, .lbl .ico, .nav-it .ico { display: none !important; }
nav.tabs .ico, .nav-x .ico, .sb-x .ico, .hdr-b .ico, .sheet-x .ico, [data-act$="close"] .ico, [aria-label="Close"] .ico { display: block !important; }
nav.tabs button .ico { stroke-width: 1.6 !important; }
.rp-list > .rp-b, .rp-list > .rp-b.off, .rp-list > .rp-b.ask { grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "t p" "d s" "x x" !important; }
.rp-list > .rp-b.rp-wrap:has(.rp-test) { grid-template-areas: "t p" "d s" "x x" "y y" !important; }
.rp-list .rp-d.rp-test { margin: 6px 0 0 0 !important; }

/* ---- Buttons: primary / secondary / text ---- */
.btn, .btn-secondary, button.chip, .chips button, .pipe-counts button, .area-dd-btn, .bf-filt-btn, .icon-btn, .bf-act, .rp-more, .lab-chips button, .rp-lab button {
  border-radius: 8px !important; background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; font-weight: 600 !important; }
.btn:hover, .btn-secondary:hover, button.chip:hover { filter: none !important; border-color: var(--muted) !important; }
.btn-primary, .btn.pr, button.chip[aria-pressed="true"], .chips button[aria-pressed="true"], .ml-btns .btn.on, .gh-chip[aria-pressed="true"], .pipe-counts button[aria-pressed="true"] {
  background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.btn-text, .linkish, .txt-link { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; text-decoration: none !important; font-weight: 600 !important; }
.btn-text:hover, .linkish:hover, .txt-link:hover { color: var(--ink) !important; }
.bf-act.no { color: var(--ink) !important; }
.seg, .seg.basemap, .rp-scope3.seg { background: var(--track) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 3px !important; }
.seg .seg-btn { border-radius: 6px !important; color: var(--muted) !important; }
.seg .seg-btn[aria-pressed="true"] { background: var(--accent) !important; color: var(--accent-ink) !important; }
input, select, textarea { border-radius: 8px !important; background: var(--card) !important; border: 1px solid var(--line-strong) !important; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 1px; }

/* ---- Surfaces ---- */
.card, .rm-card, table, .pipe-panels > details, .owner-block, .area-dd-pop, .ui-drawbar, .stage-col, .mini, .rp-grid.rp-list, .rp-b, .hw-tile, .hw-rc, .smp-card, .sheet, .ck-card {
  border-radius: 8px !important; border: 1px solid var(--line) !important; background: var(--card) !important; }
.rp-list > .rp-b { border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }
.rp-list > .rp-b:first-child { border-top: 0 !important; }
.rp-b.ready, .rp-b:hover { border-color: var(--line) !important; }
.rm-card:hover { border-color: var(--line-strong) !important; }
.stat, .stats > *, .fig, .kpi { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--muted) !important; }
.stat strong, .stat .v, .stats > * strong, .fig strong, .kpi strong { color: var(--ink) !important; font-weight: 650 !important; }

/* ---- Section labels: the accent's main job ---- */
.eyebrow, .hw-h, .sb-h, .sec-h, .rp-h, .ov-h, .lab, h2.sec, .card > h3:first-child { color: var(--brand) !important; }
.eyebrow, .hw-h, .sb-h { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase; }

/* ---- Status = dot + text, never a filled pill ---- */
.badge, .rm-chip, .os-tag, .added-tag, .rm-rank, .sbadge, .rp-chip, .sb-badge, .rp-s, .plot-chip, .score-badge, .rm-score > * {
  background: transparent !important; border: 0 !important; color: var(--muted) !important; padding: 0 !important; border-radius: 0 !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.badge::before, .rp-chip::before, .sbadge::before, .rp-s::before, .sb-badge::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.rp-chip.ok, .badge.ok, .rp-b.done .rp-s, .sbadge.saved { color: var(--ok) !important; }
.rp-chip.wait, .badge.warn, .rp-b.gen .rp-s, .sb-badge.rv { color: var(--warn) !important; }
.rp-chip.bad, .sbadge.nope { color: var(--muted) !important; }
.rp-b.review .rp-s, .rp-chip.review, .badge.review { color: var(--brand) !important; }
html[data-theme="dark"] .rp-b.gen .rp-s { color: var(--warn) !important; }
.rm-score .badge, .rm-score > span { background: transparent !important; color: var(--ink) !important; font-weight: 650 !important; }
.rm-score .badge::before, .rm-score > span::before { content: none !important; }

/* ---- Prices: plain bold, right of the title; test price as fine print ---- */
.pr-v { font-weight: 650 !important; color: var(--ink) !important; }
.rp-list .rp-d.rp-test, .pr-x { font-size: 11.5px !important; color: var(--muted) !important; }

/* ---- Bottom nav: icons + label; active = ink + 2px accent bar ---- */
@media (max-width: 760px) {
  nav.tabs { background: var(--card) !important; backdrop-filter: none !important; }
  nav.tabs button[aria-selected="true"] { color: var(--ink) !important; position: relative; }
  nav.tabs button[aria-selected="true"]::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--brand); }
}
@media (min-width: 761px) {
  nav.tabs button[aria-selected="true"] { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--brand) !important; border-radius: 0 !important; }
}

/* ---- Menu sheet: theme surfaces, plain rows ---- */
#nav-sheet { background: rgba(0,0,0,.45) !important; backdrop-filter: none !important; }
#nav-sheet .nav-in, #nav-sheet .nav-top { background: var(--card) !important; color: var(--ink) !important; border-color: var(--line) !important; }
#nav-sheet .nav-it, #nav-sheet .nav-area, #nav-sheet a, #nav-sheet button { color: var(--ink) !important; }
#nav-sheet small, #nav-sheet .nav-g, #nav-sheet .nav-h { color: var(--muted) !important; }
#nav-sheet .nav-it[aria-current="page"] { background: var(--card2) !important; color: var(--ink) !important; }
#nav-sheet .nav-it[aria-current="page"]::before { background: var(--brand) !important; border-radius: 0 !important; }
#nav-sheet .nav-area[aria-pressed="true"] { background: var(--card2) !important; border-color: var(--ink) !important; color: var(--ink) !important; }
#nav-sheet .nav-it, #nav-sheet .nav-area { border-radius: 8px !important; }

/* ---- Who's it for sheet + How it works: no navy/yellow bands ---- */
.sb-band { background: var(--card) !important; border-bottom: 1px solid var(--line) !important; }
.sb-brand { color: var(--ink) !important; letter-spacing: -.01em !important; font-size: 14px !important; font-weight: 700 !important; }
.sb-x { color: var(--ink) !important; } .sb-x:hover { background: var(--card2) !important; }
.sb-chip { border-radius: 6px !important; border-color: var(--line) !important; }
.hw-hero { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
.hw-hero h2, .hw-step strong { color: var(--ink) !important; } .hw-hero > p, .hw-step small, .hw-sn { color: var(--muted) !important; }
.hw-hero .sb-brand { font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--brand) !important; }
.hw-step li { background: var(--card2) !important; border-radius: 8px !important; align-items: flex-start !important; text-align: left !important; padding: 28px 10px 10px !important; }
.hw-sn { font-size: 12px !important; color: var(--brand) !important; }
.hw-flow li .ico { width: 12px !important; height: 12px !important; padding: 0 !important; border: 2px solid var(--line-strong) !important; background: var(--card) !important; }
.hw-flow li:last-child .ico { background: var(--ink) !important; border-color: var(--ink) !important; }
.hw-flow li + li::before { top: 5px !important; }
.hw-src span { border-radius: 6px !important; }

/* ---- Toasts, map, misc ---- */
.toast { border-radius: 8px !important; }
.flow-strip > *, html[data-theme="dark"] .flow-strip > * { background: var(--card2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
.qs-ballpark, .need, .ql-bar.val, .ql-bar.spent, .rp-b.ask { background: var(--card2) !important; }
.ad-row input, input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.leaflet-bar a { border-radius: 0 !important; }
.leaflet-bar { border-radius: 8px !important; overflow: hidden; border: 1px solid var(--line) !important; }

/* ---- Pressed / selected states win over older sheets ---- */
html .seg-btn[aria-pressed="true"], html .seg .seg-btn[aria-pressed="true"], html .seg-btn[aria-checked="true"], html[data-theme] .seg-btn[aria-pressed="true"],
html .chips button[aria-pressed="true"], html button.chip[aria-pressed="true"], html .chips button.on, html button.chip.on, html .bf-filt-btn[aria-pressed="true"],
html #asb-sheet .asb-b[aria-pressed="true"], html .lab-c[aria-pressed="true"], html #amd-sheet .fx-chip[aria-pressed="true"], html .pipe-counts button[aria-pressed="true"] {
  background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
html[data-theme="dark"] .seg-btn:not([aria-pressed="true"]):not([aria-checked="true"]) { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; }
.seg-btn svg, .btn svg:not(.keep), .bf-act svg, button.chip svg { display: none !important; }
nav.tabs svg, .hdr-b svg, .nav-x svg, .sb-x svg, .leaflet-control svg { display: inline-block !important; }

/* ---- Header: wordmark over page title ---- */
.hdr-bar { display: grid !important; grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.hdr-logo { grid-column: 1; grid-row: 1; } .hdr-logo .wordmark { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.hdr-tt { grid-column: 1; grid-row: 2; min-width: 0; } .hdr-title { font-size: 17px !important; font-weight: 650 !important; }
.hdr-bar > .hdr-b { grid-row: 1 / 3; }

/* ---- Sheets (Tim, 21 Oct): branded sticky header, max 90dvh, sticky action footer, only the middle scrolls ---- */
.smp-info { background: rgba(0,0,0,.45) !important; }
.smp-info-in, .smp-info.sb .smp-info-in, .ui-sheet, #cd-sheet .cd-body, .bf-fsheet-in { border-radius: 12px 12px 0 0 !important; max-height: 90vh !important; max-height: 90dvh !important; }
.smp-info.sb .smp-info-in { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
.smp-info.sb .sb-band { position: sticky; top: 0; z-index: 2; flex: none; padding: 12px 12px 12px 16px !important; }
.smp-info.sb .sb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.smp-info.sb .sb-foot { flex: none; position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.smp-info.sb .sb-foot .smp-acts { padding: 0 !important; margin: 0 !important; }
.sb-band .sb-ttl { flex: 1; min-width: 0; margin-left: 10px; font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-band .sb-brand { font-size: 11px !important; color: var(--brand) !important; letter-spacing: .1em !important; text-transform: uppercase; white-space: nowrap; }
.sb-hero { padding-top: 14px !important; } .sb-cv { width: 56px !important; }
/* generic sheets: sticky header + footer */
.ui-sheet, #asb-sheet, #cd-sheet { background: var(--card) !important; }
.ui-sheet > :first-child, #asb-sheet .asb-bar, .ui-sheet .ui-h, .ck-card > h3:first-child, .bf-fsheet-h { position: sticky !important; top: 0; z-index: 2; background: var(--card) !important; border-bottom: 1px solid var(--line); }
.ui-sheet .ui-acts, .ui-sheet .sheet-acts, .ck-card .ck-acts, #asb-sheet .asb-acts, .bf-fsheet .bf-fsheet-f { position: sticky !important; bottom: 0; z-index: 2; background: var(--card) !important; border-top: 1px solid var(--line); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* Shared ask/pick cards (checkout options, asbestos versions, request changes, rename…) */
.ask-bg { background: rgba(0,0,0,.45) !important; }
.ask-card { display: flex !important; flex-direction: column; max-height: 90vh !important; max-height: 90dvh !important; overflow: hidden !important; padding: 0 !important;
  background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 12px 12px 0 0 !important; }
.ask-card > .ask-t { flex: none; position: sticky; top: 0; margin: 0 !important; padding: 14px 16px 12px !important; border-bottom: 1px solid var(--line); font-weight: 650 !important; font-size: 15px !important; background: var(--card); }
.ask-card > .ask-t::before { content: var(--brand-label, "Planning Desk"); display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 2px; }
.ask-card > .ask-s, .ask-card > .ask-in, .ask-card > textarea { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; }
.ask-card > .ask-s { margin-top: 12px !important; color: var(--muted) !important; }
.ask-card > .pick-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 16px; }
.ask-card > .ask-row { flex: none; position: sticky; bottom: 0; margin: 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--line); background: var(--card); }
.pick-b { border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--card) !important; color: var(--ink) !important; }
.pick-b:hover { border-color: var(--ink) !important; }
/* full-screen tools (Fix the building, roof labelling, Request changes): sticky bars */
#fix-sheet, #asb-sheet, #amd-sheet > * { background: var(--bg) !important; color: var(--ink) !important; }
#fix-sheet .fx-bar, #amd-sheet .amd-hd, #amd-sheet > * > :first-child { position: sticky; top: 0; z-index: 2; background: var(--card) !important; border-bottom: 1px solid var(--line); }
#fix-sheet .fx-foot { position: sticky; bottom: 0; background: var(--card) !important; border-top: 1px solid var(--line); }
.fx-tb { border-radius: 8px !important; background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.fx-tb[aria-pressed="true"] { background: var(--accent) !important; color: var(--accent-ink) !important; }
.fx-ic { display: none !important; }
/* add-a-building sheet */
.ui-sheet { max-height: 90dvh !important; border-top: 1px solid var(--line); }
.ui-sheet .ui-hd { position: sticky; top: 0; z-index: 2; background: var(--card); border-bottom: 1px solid var(--line); padding-bottom: 10px; font-weight: 650; }
.ui-sheet .ui-row { position: sticky; bottom: 0; background: var(--card); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* ---- How it works (calm rebuild, 21 Oct): 8pt grid, 56px between sections, one H1, one H2 style, 2 weights ---- */
#view-howto { padding-bottom: 96px; }
.hx { max-width: 640px; }
.hx-hero { padding: 24px 0 8px; }
.hx-k { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.hx-h1 { margin: 0 0 16px; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; max-width: 20ch; }
.hx-lead { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.hx-cta { min-height: 44px !important; padding: 0 20px !important; }
.hx-sec { margin-top: 56px; }
.hx-h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.hx-num { list-style: none; margin: 0; padding: 0; counter-reset: hx; border-top: 1px solid var(--line); }
.hx-num li { counter-increment: hx; display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hx-num li::before { content: counter(hx); grid-row: 1 / 3; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.hx-num strong, .hx-row strong { font-weight: 600; font-size: 16px; }
.hx-num span, .hx-row > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.5; }
.hx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hx-list li { border-bottom: 1px solid var(--line); }
.hx-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 16px 0; color: var(--ink); }
.hx-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hx-rt { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.hx-rt .pr-v { font-size: 16px; }
.hx-note { margin: 16px 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.hx-plain { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; font-size: 14px; line-height: 2; color: var(--ink); }
.hx-faqs { border-top: 1px solid var(--line); }
.hx-faq { border-bottom: 1px solid var(--line); }
.hx-faq summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-weight: 600; font-size: 15px; }
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 20px; font-weight: 400; color: var(--muted); }
.hx-faq[open] summary::after { content: "–"; }
.hx-faq p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; max-width: 60ch; }
.smp-acts { grid-template-columns: 1fr 1fr !important; }
.smp-acts > .btn-primary:first-child { grid-column: 1 / -1 !important; }
.smp-acts .smp-who { grid-column: 1 / -1 !important; justify-self: start; min-height: 32px !important; padding: 0 !important; }
.smp-info.sb .sb-foot .smp-acts > .btn-primary:first-child { grid-column: 1 / -1 !important; }
.smp-vars .btn { background: var(--card) !important; }

/* ---- Final precedence for the three button kinds ---- */
html body .btn.btn-primary, html body button.btn-primary, html body a.btn-primary { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
html body .btn.btn-text { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; }
.smp-acts .smp-who { text-decoration: underline !important; text-underline-offset: 3px; }
/* accent only on small labels: large card headings go back to ink */
.card > h3:first-child, .rp-h { color: var(--ink) !important; }
.card > h3:first-child { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--brand) !important; }
/* icon-only buttons keep their glyph (they have an aria-label and no text) */
.btn[aria-label] svg, .icon-btn svg, button[aria-label]:not(:has(span)) > svg { display: inline-block !important; }
.smp-acts .smp-who { justify-self: start !important; width: auto !important; text-align: left !important; }

/* ---- Round 2 fixes (21 Oct) ---- */
/* solid sticky header + hairline; header grows with its two lines instead of overflowing */
header.top { position: sticky !important; top: 0; z-index: 1200; background: var(--bg) !important; border-bottom: 1px solid var(--line) !important; }
.hdr-bar { height: auto !important; min-height: 56px; padding: 8px 0 !important; }
/* address note on its own muted line */
.fact-v .fact-note, .fact-v .hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted) !important; }
/* neutral cover placeholder */
.smp-cover.smp-ph, .sb-cv.smp-ph, .hw-cv.smp-ph { background: var(--card2) !important; }
.smp-cover.smp-ph svg, .smp-cover.smp-ph .ico { display: none !important; }
.sb-cv.smp-ph::after, .hw-cv.smp-ph::after { content: none !important; }
/* building check card (inline, before a concept pack) */
.ck-card { border: 1px solid var(--line) !important; border-left: 2px solid var(--brand) !important; border-radius: 8px !important; padding: 16px !important; background: var(--card) !important; }
.ck-card.confirmed, .ck-card.ck-done { border-left-color: var(--ok) !important; padding: 12px 16px !important; }
.ck-t { margin: 0 0 4px !important; font-weight: 600 !important; font-size: 15px !important; }
.ck-s { margin: 0 0 12px !important; color: var(--muted) !important; font-size: 14px; line-height: 1.5; }
.ck-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-banner { border-radius: 8px !important; background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-left: 2px solid var(--brand) !important; }
.ck-banner strong, .ck-banner span, .ck-banner a:not(.btn) { color: var(--ink) !important; }
/* asbestos versions: one segmented control, then the single Buy now */
.rp-scope3.seg { display: flex !important; width: 100%; margin: 8px 0 !important; }
.rp-scope3 .seg-btn { flex: 1 1 0; min-height: 36px; font-size: 13px !important; }
.smp-vars { gap: 8px !important; }
/* calmer weights everywhere */
h1, h2, h3, h4, strong, b, th, .t, .rm-name, .rp-t { font-weight: 600 !important; }
.rp-more .ico, .rp-more svg, button[aria-label] > svg.ico:only-child { display: inline-block !important; width: 18px; height: 18px; }
.rp-more { display: inline-grid !important; place-items: center; }
.bf-act.more svg, .bf-act.more .ico, .rm-more-btn svg, .rm-more-btn .ico, button.row-ic, button.row-ic svg, button.row-ic .ico { display: inline-block !important; }
.bf-act.more, .rm-more-btn { display: inline-grid !important; place-items: center; }
html body #nav-sheet .nav-in, html body #nav-sheet .nav-top { background: var(--card) !important; color: var(--ink) !important; } html body #nav-sheet .nav-it[aria-current="page"] { background: var(--card2) !important; }

/* ======== v3 (Tim, 21 Oct 02:51): EB mark, royal-blue header #0038b8, premium polish ======== */
/* Brand colour = blue. Orange retired. Labels go neutral grey; blue is for the header, active tab, links-as-buttons focus and Review. */
.eyebrow, .hw-h, .sb-h, .sec-h, .rp-h, .ov-h, .lab, h2.sec, .card > h3:first-child, .hx-k, .ask-card > .ask-t::before { color: var(--muted) !important; }
.lbl { color: var(--muted) !important; }
/* header */
header.top { background: var(--bar) !important; border-bottom: 0 !important; color: var(--bar-ink) !important; }
header.top *, .hdr-title, .hdr-logo .wordmark { color: var(--bar-ink) !important; }
.hdr-logo .wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em; opacity: .9; }
.eb-mark { display: inline-block !important; height: 14px; width: auto; flex: none; }
.hdr-title { font-size: 18px !important; letter-spacing: -.015em; }
.hdr-b, header.top .hdr-b { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; }
.hdr-b:hover { background: rgba(255,255,255,.2) !important; }
header.top input, header.top .seg { color: var(--ink) !important; }
/* menu sheet header in brand blue */
html body #nav-sheet .nav-top { background: var(--bar) !important; color: #fff !important; border-bottom: 0 !important; }
#nav-sheet .nav-top .wordmark, #nav-sheet .nav-top .nav-x { color: #fff !important; } #nav-sheet .nav-top .wordmark { display: inline-flex; align-items: center; gap: 8px; }
#nav-sheet .nav-top .eb-mark { height: 16px; }
#nav-sheet .nav-x { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; }
#nav-sheet .nav-it[aria-current="page"]::before { background: var(--brand) !important; }
/* bottom nav active bar */
nav.tabs button[aria-selected="true"]::after { background: var(--brand) !important; }
/* sheets: blue header strip */
.smp-info.sb .sb-band, .ask-card > .ask-t { background: var(--bar) !important; color: #fff !important; border-bottom: 0 !important; }
.smp-info.sb .sb-band .sb-brand, .smp-info.sb .sb-band .sb-ttl, .smp-info.sb .sb-band .sb-x, .ask-card > .ask-t, .ask-card > .ask-t::before { color: #fff !important; }
.ask-card > .ask-t::before { opacity: .75; }
.smp-info.sb .sb-band .sb-brand { opacity: .8; }
.smp-info.sb .sb-x:hover { background: rgba(255,255,255,.14) !important; }
.smp-info-in, .ask-card { border: 0 !important; }
.smp-info.sb .smp-info-in, .ask-card { box-shadow: 0 -12px 40px rgba(0,0,0,.18) !important; }
/* Who's it for sheet body */
.sb-hero { gap: 16px !important; padding: 20px 20px 4px !important; align-items: flex-start !important; }
.sb-cv { width: 84px !important; border-radius: 6px !important; border: 1px solid var(--line) !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; }
.sb-cv img { opacity: 1 !important; filter: none !important; }
.sb-ht h3 { font-size: 20px !important; letter-spacing: -.015em; margin: 2px 0 4px !important; }
.sb-pr .pr-v { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.02em; }
.sb-turn { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.smp-info.sb .sb-h { margin: 20px 20px 8px !important; font-size: 11px !important; }
.sb-for { padding: 0 20px !important; gap: 8px !important; }
.sb-chip { padding: 6px 12px !important; border-radius: 999px !important; background: var(--card2) !important; border: 0 !important; font-size: 13px !important; font-weight: 500; }
.smp-info.sb .sb-use { padding: 0 20px 0 38px !important; font-size: 15px !important; line-height: 1.6 !important; }
.smp-info.sb .sb-not { margin: 12px 20px 4px !important; font-size: 13px !important; }
.smp-info.sb .sb-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important; }
.smp-info.sb .sb-foot .smp-acts { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.smp-info.sb .sb-foot .btn { width: 100% !important; min-height: 48px !important; font-size: 15px !important; }
/* Sample cards: edge-to-edge cover, balanced actions */
.smp-card { overflow: hidden; border-radius: 12px !important; }
.smp-cover, .smp-cover.smp-cover-btn { padding: 0 !important; background: var(--card2) !important; border-bottom: 1px solid var(--line) !important; aspect-ratio: 4 / 3 !important; overflow: hidden; }
.smp-cover img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: top center; box-shadow: none !important; }
.smp-body { padding: 20px !important; gap: 0 !important; }
.smp-th .smp-t, .smp-t { font-size: 18px !important; letter-spacing: -.015em; }
.smp-th .pr .pr-v { font-size: 18px !important; font-weight: 600 !important; }
.smp-d { display: block; margin-top: 6px !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--ink) !important; opacity: .78; font-weight: 400 !important; }
.smp-meta { display: block; margin-top: 8px !important; font-size: 13px !important; color: var(--muted) !important; }
.smp-acts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 20px !important; }
.smp-acts > .btn { width: 100% !important; min-height: 44px !important; }
.smp-acts > .btn-primary:first-child { grid-column: 1 / -1 !important; min-height: 48px !important; font-size: 15px !important; }
.smp-acts .smp-who, html body .smp-acts .btn.btn-text.smp-who { grid-column: auto !important; justify-self: stretch !important; text-decoration: none !important; text-align: center !important; color: var(--ink) !important; background: var(--card) !important; border: 1px solid var(--line-strong) !important; padding: 0 12px !important; min-height: 44px !important; }
.smp-vars { margin-top: 16px; }
/* generic premium polish */
.card, .rm-card, .rp-grid.rp-list, .hx-row { border-radius: 12px !important; }
.card, .rm-card, .rp-grid.rp-list { box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; }
html[data-theme="dark"] .card, html[data-theme="dark"] .rm-card { box-shadow: none !important; }
.btn { min-height: 40px; letter-spacing: -.005em; transition: background-color .15s, border-color .15s; }
.lead, .smp-lead { font-size: 15px !important; line-height: 1.55 !important; color: var(--muted) !important; max-width: 60ch; margin: 16px 0 20px !important; }
:focus-visible { outline-color: var(--brand) !important; }
html body .smp-card { padding: 0 !important; }
.smp-card .smp-hit { padding: 0 !important; }

/* ======== v4 (Tim 03:05): single-row header = EB mark + page title; theme icon; filter count ======== */
.hdr-bar { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 56px; padding: 0 !important; }
.hdr-logo { display: flex !important; align-items: center; flex: none; line-height: 0; }
.hdr-logo .eb-mark { height: 13px !important; width: auto; }   /* ≈ cap height of the 18px title */
.hdr-tt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.hdr-tt .hdr-brand { display: none !important; }
.hdr-title { font-size: 18px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-bar > .hdr-b { flex: none; }
.theme-tg { display: inline-grid !important; place-items: center; width: 40px; height: 40px; min-width: 40px !important; padding: 0 !important; margin: 0 !important; }
.theme-tg svg, header.top .theme-tg svg, .theme-tg .tg-ic { display: block !important; color: #fff !important; stroke: #fff !important; width: 20px; height: 20px; }
.bf-filt-n, html[data-theme] .bf-filt-n { color: var(--brand) !important; }
.hdr-tt, .hdr-title { justify-content: flex-start !important; text-align: left !important; margin: 0 !important; } .hdr-tt { order: 0; } .hdr-bar > .hdr-b:first-of-type { margin-left: auto !important; }
html body .hdr-tt { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; }
/* Checkout add-on step (Tim, 21 Oct 2026): Render pack / Owner letter after a concept pack */
.ao-card { display: flex; flex-direction: column; gap: 0; }
.ao-base, .ao-tot { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; font-size: 15px; color: var(--ink); }
.ao-base { border-bottom: 1px solid var(--line); }
.ao-base b, .ao-tot b, .ao-pr { font-weight: 600; font-variant-numeric: tabular-nums; }
.ao-tot { border-top: 1px solid var(--line); font-size: 17px; }
.ao-b { display: flex !important; align-items: center; gap: 12px; }
.ao-b .pick-tx { flex: 1 1 auto; min-width: 0; }
.ao-b[aria-checked="true"] { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); }
.ao-tick { flex: 0 0 22px; width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.ao-b[aria-checked="true"] .ao-tick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ao-pr { white-space: nowrap; color: var(--ink); font-size: 15px; }
.ao-test { margin: 0 16px 4px; font-size: 12px; color: var(--muted); }
.ao-acts { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }
.ao-acts .btn-primary { width: 100%; }

/* ======== v5 (Tim 03:17): calm, roomy sample cards; blue primary; no heavy black blocks ======== */
.smp-grid { gap: 40px !important; }
html body .smp-card { padding: 0 !important; border-radius: 16px !important; border: 1px solid var(--line) !important; background: var(--card) !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.04) !important; overflow: hidden; }
html[data-theme="dark"] body .smp-card { box-shadow: none !important; }
.smp-cover, .smp-cover.smp-cover-btn { aspect-ratio: 4 / 5 !important; padding: 28px 32px 0 !important; background: var(--bg2) !important; border-bottom: 1px solid var(--line) !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; overflow: hidden; }
.smp-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; border-radius: 6px 6px 0 0; box-shadow: 0 -1px 0 var(--line), 0 6px 24px rgba(16,24,40,.12) !important; background: #fff; }
html[data-theme="dark"] .smp-cover img { box-shadow: 0 6px 24px rgba(0,0,0,.4) !important; }
.smp-body { padding: 28px 28px 24px !important; }
.smp-th .smp-t, .smp-t { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -.015em; }
.smp-th .pr .pr-v { font-size: 19px !important; font-weight: 500 !important; color: var(--ink) !important; }
.smp-d { margin-top: 10px !important; font-size: 15px !important; line-height: 1.6 !important; opacity: 1 !important; color: var(--muted) !important; }
.smp-meta { margin-top: 12px !important; font-size: 13px !important; }
.smp-acts { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 24px !important; }
.smp-acts > .btn, .smp-acts > .btn-primary:first-child { width: 100% !important; min-height: 48px !important; font-size: 15px !important; font-weight: 500 !important; border-radius: 10px !important; }
html body .smp-acts .btn.btn-secondary { background: transparent !important; border: 1px solid var(--line-strong) !important; color: var(--ink) !important; }
html body .smp-acts .btn.btn-text.smp-who, .smp-acts .smp-who { align-self: center !important; width: auto !important; min-height: 32px !important; border: 0 !important; background: none !important; color: var(--muted) !important; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: var(--line-strong); font-weight: 500 !important; padding: 4px 8px !important; }
.smp-acts .smp-who:hover { color: var(--ink) !important; }
.smp-lead { margin: 24px 0 32px !important; }
/* primary everywhere = brand blue (white text), hover a touch darker */
html body .btn.btn-primary:hover { filter: brightness(.92) !important; }

/* ===== v6 (Tim 03:30): visual-first Samples grid + detail sheet ===== */
.smx-lead { margin: 4px 4px 20px; font-size: 15px; color: var(--muted); }
.smx-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
@media (min-width: 700px) { .smx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .smx-grid { grid-template-columns: repeat(3, 1fr); } }
.smx-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.smx-tap { all: unset; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; cursor: pointer; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.smx-tap:active { transform: scale(.985); }
.smx-tap:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.smx-stage { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 28px; background: linear-gradient(180deg, var(--bg2), var(--card2)); overflow: hidden; }
.smx-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 18px 40px rgba(16,24,40,.18); background: #fff; }
.smx-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; flex: 1; }
.smx-t { font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); line-height: 1.25; }
.smx-w { font-size: 15px; color: var(--muted); line-height: 1.4; }
.smx-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; }
.smx-p, .smx-sp { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.smx-p small, .smx-sp small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.smx-btn { pointer-events: none; min-height: 44px !important; padding: 0 22px !important; border-radius: 999px !important; font-size: 15px !important; display: inline-flex !important; align-items: center; width: auto !important; }
/* sheet */
.smx-sheet .smx-sh { display: flex; gap: 18px; align-items: center; padding: 20px 20px 4px; }
.smx-scv { flex: none; width: 92px; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 18px rgba(16,24,40,.12); }
.smx-scv img { display: block; width: 100%; height: auto; }
.smx-sheet p { margin: 0; }
.smx-sw { font-size: 15px; color: var(--ink); margin-top: 2px !important; }
.smx-sm { font-size: 13px; color: var(--muted); margin-top: 4px !important; }
.smx-sd { padding: 16px 20px 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.smx-vars { list-style: none; margin: 14px 20px 0; padding: 0; display: grid; gap: 8px; }
.smx-vars li { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; background: var(--card2); font-size: 14px; color: var(--muted); }
.smx-vars strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.smx-h { padding: 22px 20px 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.smx-use { margin: 0; padding: 0 20px 0 40px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.smx-not { padding: 16px 20px 8px; font-size: 13px; color: var(--muted); }
.smx-foot { display: grid !important; gap: 10px; }
.smx-foot .btn { width: 100%; min-height: 48px; }
.smx-lead { margin: 20px 4px 20px !important; }
.smx-stage { padding: 24px; }
.smx-sheet .smx-use { list-style: none !important; margin: 0 !important; padding: 0 20px !important; }
.smx-sheet .smx-use li { position: relative; padding-left: 18px !important; margin: 0 !important; }
.smx-sheet .smx-use li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.smx-sheet .smx-vars { margin: 16px 20px 0 !important; }
.smx-sheet .smx-vars { padding: 0 !important; }

/* Area picker county groups (Notts rollout, 21 Oct 2026) */
.ad-grp { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7280); padding: 12px 12px 4px; }