/* bones-look/06-fixes-b72-on.css: Numbered fixes B72 onwards (2026-11-04 to 11-05). Add new rules at the end of this file.
   F8 stage 1 (2026-11-05): bones-look.css split in its original order into six files, loaded in
   number order (theme/core/assets.php). Order matters: later files override earlier ones. */
/* B72 (2026-11-04): AI-assisted software engineering page rebuilt to AI Engineering Page.dc.html */
/* Sections 01-05 already followed the mock (B66, .bl-se-*, .bl-sg-facts); this block finishes the hero,
   the "Fix it or rebuild it?" checker and the price cards. Light theme uses the site tokens and the
   B68 --wdev-* overrides. Hero rules as B71 (#prototyping-hero). */

/* Hero: hook large, topic line under it (both stay in the H1), lead, buttons, drawing */
main #software-engineering-hero h1.hero-09-headline__hooked { display: flex; flex-direction: column; gap: 26px; max-width: none; font-size: clamp(46px, min(6.4vw, 9.6vh), 88px) !important; line-height: .96 !important; letter-spacing: -.05em !important; background: none; -webkit-text-fill-color: currentColor; color: var(--t-bright); }
#software-engineering-hero .bl-phero__hook { display: block; }
#software-engineering-hero .bl-phero__accent { display: block; color: var(--wdev-h1-accent); }
#software-engineering-hero .bl-phero__topic { order: 2; margin: 0; font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--t-medium); }
#software-engineering-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#software-engineering-hero .bl-home-hero__btn { font-size: 16px; }
#software-engineering-hero .db-hero-09__grid { display: none; }
#software-engineering-hero .db-hero-09__visual { min-width: 0; }
@media (min-width: 1100px) { #software-engineering-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #software-engineering-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }

/* Hero drawing: the mock's pull request (line numbers, one removed line, three added) and three check tiles */
.bl-eng-hv { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin-left: auto; text-align: left; }
.bl-eng-hv__pr { min-width: 0; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--wdev-deep); box-shadow: var(--wdev-shadow); }
.bl-eng-hv__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--wdev-line3); }
.bl-eng-hv__bar > span:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--t-bright); }
.bl-eng-hv__bar b { flex: none; padding: 3px 8px; border-radius: 6px; background: rgba(37, 99, 255, .18); font: 500 10.5px/1.3 var(--_font-mono); color: var(--wdev-soft); }
.bl-eng-hv__bar > span:last-child { font: 400 11px/1.3 var(--_font-mono); color: var(--t-muted); }
.bl-eng-hv__code { display: grid; grid-template-columns: minmax(max-content, 1fr); padding: 10px 0; overflow-x: auto; font: 400 12.5px/1.75 var(--_font-mono); }
.bl-eng-hv__ln { display: grid; grid-template-columns: 40px 18px minmax(max-content, 1fr); padding: 0 18px; color: var(--wdev-dim); }
.bl-eng-hv .bl-eng-hv__ln, .bl-eng-hv .bl-eng-hv__ln i, .bl-eng-hv .bl-eng-hv__ln code { font-family: var(--_font-mono); font-variant-ligatures: none; }
.bl-eng-hv__ln i { font-style: normal; }
.bl-eng-hv__ln code { padding: 0; background: none; font: inherit; color: var(--t-muted); white-space: pre; }
.bl-eng-hv__ln.is-del { background: color-mix(in srgb, var(--t-bright) 3%, transparent); }
.bl-eng-hv__ln.is-del code { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--t-bright) 30%, transparent); }
.bl-eng-hv__ln.is-add { background: rgba(37, 99, 255, .12); }
.bl-eng-hv__ln.is-add i:nth-child(2) { color: var(--accent-text); }
.bl-eng-hv__ln.is-add code { color: var(--t-bright); }
.bl-eng-hv__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-eng-hv__steps li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border: 1px dashed var(--wdev-dash); border-radius: 14px; background: var(--base-tint); }
.bl-eng-hv__steps em { font: 500 9.5px/1.3 var(--_font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-eng-hv__steps b { font-size: 13.5px; font-weight: 500; color: var(--t-bright); }
.bl-eng-hv__steps small { font: 400 11px/1.3 var(--_font-mono); color: var(--t-muted); }
.bl-eng-hv__steps .is-dev { border-style: solid; border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.bl-eng-hv__steps .is-dev em, .bl-eng-hv__steps .is-dev small { color: var(--accent-text); }
.bl-eng-hv__steps .is-rel { border-style: solid; border-color: var(--accent); background: linear-gradient(180deg, rgba(37, 99, 255, .2), var(--base-tint)); }
.bl-eng-hv__steps .is-rel em, .bl-eng-hv__steps .is-rel small { color: var(--wdev-soft); }
.bl-eng-hv .bl-wdev-ws__note { margin-top: 0; }
@media (max-width: 479px) { .bl-eng-hv__steps { grid-template-columns: minmax(0, 1fr); } .bl-eng-hv__code { font-size: 11.5px; } .bl-eng-hv__ln { grid-template-columns: 30px 14px minmax(max-content, 1fr); padding: 0 14px; } }

/* 03 Fix it or rebuild it?: statement cards with a drawn box, first-read card as tall as the list (mock) */
.bl-eng-check.is-js { align-items: stretch; }
.bl-eng-check .bl-se-check__list label { position: relative; grid-template-columns: 24px minmax(0, 1fr); padding: 18px; background: var(--wdev-deep); color: var(--t-bright); }
.bl-eng-check .bl-se-check__list input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
.bl-eng-check .bl-se-check__list label > span::before { content: ""; position: absolute; left: 18px; top: 19px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--t-bright) 30%, transparent); border-radius: 6px; font: 600 12px/1 var(--_font-default); color: #fff; }
.bl-eng-check .bl-se-check__list label > span { grid-column: 2; }
.bl-eng-check .bl-se-check__list label:has(input:checked) { border-color: rgba(37, 99, 255, .55); background: rgba(37, 99, 255, .12); }
.bl-eng-check .bl-se-check__list label:has(input:checked) > span::before { content: "✓"; border-color: var(--accent); background: var(--accent); }
.bl-eng-check .bl-se-check__list label:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.bl-eng-check.is-js .bl-se-check__out { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: static; }
.bl-eng-check .bl-se-check__out .bl-ss-compare__k { margin: 0; color: var(--accent-text); }
.bl-eng-check .bl-se-check__out .bl-home-hero__btn { margin-top: auto; }
.bl-eng-check[data-state="fix"] .bl-se-check__out { background: linear-gradient(180deg, rgba(37, 99, 255, .18), var(--base-tint) 70%); }
.bl-eng-check[data-state="rebuild"] .bl-se-check__out { border-color: var(--wdev-h1-accent); background: linear-gradient(180deg, rgba(157, 182, 255, .14), var(--base-tint) 70%); }
@media (prefers-reduced-motion: no-preference) {
  .bl-eng-check .bl-se-check__list label { transition: background-color .2s ease, border-color .2s ease; }
  .bl-eng-check.is-js .bl-se-check__out { transition: background .3s ease, border-color .3s ease; }
}

/* 04 How it works: "Learn to work this way" card in the accent frame (mock) */
.bl-eng-work > div { display: flex; flex-direction: column; gap: 12px; padding: 30px; }
.bl-eng-work > div > * { margin: 0; }
main .bl-eng-work h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.bl-eng-work > .is-next { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, rgba(37, 99, 255, .12), var(--base-tint) 50%); }
.bl-eng-work > .is-next .bl-ss-compare__k { color: var(--accent-text); }
.bl-eng-work a { color: var(--accent-text); }

/* B73 (2026-11-04): AI workflows and business bots page rebuilt to AI Workflows Page.dc.html */
/* Values are the mock's (dark); light theme uses the site tokens and the B68 --wdev-* overrides.
   Reuses .bl-wdev-steps, -fit, -ws__note (B68) and the page's .bl-ssd / .bl-aw picker; those shared
   rules are not edited, only overridden here under .bl-wf / #ai-automation-hero. */

/* Hero: hook large with the accent inline, topic line under it (both stay in the H1), lead, buttons */
main #ai-automation-hero h1.hero-09-headline__hooked { display: flex; flex-direction: column; gap: 26px; max-width: 11ch; font-size: clamp(44px, min(6vw, 8.6vh), 82px) !important; line-height: .98 !important; letter-spacing: -.05em !important; background: none; -webkit-text-fill-color: currentColor; color: var(--t-bright); }
#ai-automation-hero .bl-phero__hook { display: block; }
#ai-automation-hero .bl-phero__accent { color: var(--wdev-h1-accent); }
#ai-automation-hero .bl-phero__topic { order: 2; margin: 0; font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--t-medium); }
#ai-automation-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#ai-automation-hero .bl-home-hero__btn { font-size: 16px; }
#ai-automation-hero .db-hero-09__grid { display: none; }
#ai-automation-hero .db-hero-09__visual { min-width: 0; }
@media (min-width: 1100px) { #ai-automation-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #ai-automation-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }

/* Hero drawing: the mock's workflow run (goal, plan, execution loop, task complete) */
.bl-wf-hv { display: flex; flex-direction: column; width: 100%; max-width: 560px; margin-left: auto; text-align: left; }
.bl-wf-hv p, .db-section .bl-wf-hv p { max-width: none; margin: 0; }
.bl-wf-hv__bar > span:first-child, .bl-wf-hv__loop > p > span { color: inherit; }
.bl-wf-hv__card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 22px; background: var(--wdev-deep); box-shadow: var(--wdev-shadow); }
.bl-wf-hv__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bl-line); font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.bl-wf-hv__bar > span:last-child { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .12em; color: var(--t-muted); }
.bl-wf-hv__bar i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bl-wf-hv__in { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.bl-wf-hv__row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--wdev-chip); }
.bl-wf-hv__row > span { font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-wf-hv__row > b { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--t-bright); }
.bl-wf-hv__row > b.is-dim { color: var(--t-medium); }
.bl-wf-hv__loop { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--accent-text) 40%, transparent); border-radius: 14px; }
.bl-wf-hv__loop > p { display: flex; justify-content: space-between; gap: 12px; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-wf-hv__loop ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl-wf-hv__loop li { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 10px; background: var(--wdev-chip); text-align: center; }
.bl-wf-hv__loop b { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-wf-hv__loop small { font-size: 10.5px; line-height: 1.3; color: var(--t-muted); }
.bl-wf-hv__loop li.is-on { border-color: var(--accent); background: rgba(37, 99, 255, .16); }
.bl-wf-hv__loop li.is-on small { color: var(--accent-text); }
.bl-wf-hv__done { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: linear-gradient(90deg, rgba(37, 99, 255, .2), rgba(37, 99, 255, .06)); }
.bl-wf-hv__done > span { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--t-bright); }
.bl-wf-hv__done svg { flex: none; color: var(--accent); }
.bl-wf-hv__done small { font-size: 12px; color: var(--wdev-soft); }
@media (max-width: 479px) {
  .bl-wf-hv__in { padding: 14px; }
  .bl-wf-hv__row { grid-template-columns: 56px minmax(0, 1fr); }
  .bl-wf-hv__loop ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 01 Why: heading left, both paragraphs right, under a rule (mock #intro) */
.bl-wf-why .bl-svc-head { margin-bottom: 0; padding-top: 40px; border-top: 1px solid var(--bl-line); }
.bl-wf-why .bl-svc-head__lead { display: flex; flex-direction: column; gap: 16px; max-width: none; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
.bl-wf-why .bl-svc-head__lead p { margin: 0; }
.bl-wf-why .bl-wf-why__note { color: var(--t-medium); }
main .bl-wf-why .bl-svc-head h2 { max-width: none; font-size: clamp(30px, 3.8vw, 48px) !important; line-height: 1.05 !important; }
@media (min-width: 960px) {
  .bl-wf-why .bl-svc-head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .bl-wf-why .bl-svc-head > .bl-svc-head__lead { grid-row: 1 / span 2; align-self: start; }
}

/* 02 What we build: switch above, list with descriptions beside one example panel (mock #build) */
#aw-build .db-block > .bl-svc-head { margin-bottom: 36px; }
.bl-wf-switch.bl-aw__switch { margin: 0 0 36px; }
.bl-wf-switch.bl-aw__switch button { padding: 10px 20px; font-size: 14.5px; }
.bl-wf.bl-ssd.is-js { gap: 16px; }
@media (min-width: 960px) { .bl-wf.bl-ssd.is-js { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.bl-wf.is-js .bl-ssd__nav { gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; }
.bl-wf .bl-ssd__nav [role="tablist"] { gap: 4px; }
.bl-wf.has-switch .bl-aw__gnote { margin: 0; padding: 0 4px 10px; font-size: 15px; line-height: 1.5; color: var(--bl-copy); }
.bl-wf .bl-ssd__tab.bl-wf-tab { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 16px; border: 1px solid var(--wdev-line3); border-radius: 14px; }
.bl-wf .bl-ssd__tab.bl-wf-tab.is-on { border-color: rgba(37, 99, 255, .5); background: rgba(37, 99, 255, .12); }
.bl-wf .bl-wf-tab .bl-ssd__n { padding-top: 3px; color: var(--wdev-dim); }
.bl-wf .bl-wf-tab .bl-ssd__go { padding-top: 2px; opacity: 1; font-size: 14px; color: var(--wdev-dim); }
.bl-wf .bl-wf-tab.is-on .bl-ssd__n, .bl-wf .bl-wf-tab.is-on .bl-ssd__go { color: var(--accent-text); }
.bl-wf-tab__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bl-wf-tab__t b { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--t-bright); }
.bl-wf-tab__t > span { font-size: 14px; line-height: 1.45; color: var(--bl-copy); }
.bl-wf .bl-ssd__main { gap: 16px; min-height: 400px; padding: clamp(20px, 3vw, 32px); border-color: color-mix(in srgb, var(--accent-text) 25%, transparent); background: radial-gradient(80% 80% at 100% 0%, rgba(37, 99, 255, .16), var(--wdev-deep) 60%); }
.bl-wf .bl-ssd__stack { flex: 1; }
.bl-wf .bl-ssd__panel { gap: 16px; min-width: 0; }
.bl-wf-panel__bar { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-wf-panel__bar > span { color: var(--t-muted); }
.bl-wf-panel__bar > span:first-child { color: var(--accent-text); }
.bl-wf:not(.is-js) .bl-wf-panel__bar > span:first-child { visibility: hidden; }
.bl-wf.is-js .bl-ssd__panel > h3, .bl-wf.is-js .bl-ssd__panel > .bl-ssd__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-wf .bl-ssd__main > .bl-wdev-ws__note { margin: 0; }
/* Chat window */
.bl-wf-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 18px; background: var(--base-tint); }
.bl-wf-chat__head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--bl-line); }
.bl-wf-chat__av { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); font-size: 12px; font-weight: 600; color: #fff; }
.bl-wf-chat__head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bl-wf-chat__head b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-wf-chat__head small { font-size: 11px; line-height: 1.3; color: var(--t-muted); }
.bl-wf .bl-aw__chat { flex: 1; gap: 10px; justify-content: flex-end; padding: 16px; }
.bl-wf .bl-aw__chat .bl-aw__src { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid rgba(37, 99, 255, .45); border-radius: 999px; background: rgba(37, 99, 255, .12); font: 400 11px/1.4 var(--_font-mono); color: var(--wdev-soft); }
.bl-wf .bl-aw__chat .bl-aw__src::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* Workflow steps */
.bl-wf .bl-aw__flow { flex: 1; align-content: start; padding: 0; }
.bl-wf .bl-aw__flow li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
.bl-wf .bl-aw__flow li::before { left: 17px; top: 30px; width: 2px; background: color-mix(in srgb, var(--accent-text) 30%, transparent); }
.bl-wf .bl-aw__flow span { justify-self: center; width: 30px; height: 30px; border-width: 1.5px; border-color: color-mix(in srgb, var(--accent-text) 50%, transparent); background: var(--base-tint); color: var(--t-bright); }
.bl-wf .bl-aw__flow .is-end span { border-color: var(--accent); background: var(--accent); color: #fff; }
.bl-wf .bl-aw__flow b { padding-top: 4px; font-size: 15.5px; line-height: 1.3; }
.bl-wf .bl-aw__flow em { padding-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--bl-copy); }
@media (prefers-reduced-motion: no-preference) {
  .bl-wf .bl-ssd__tab.bl-wf-tab { transition: background-color .2s ease, border-color .2s ease; }
}

/* 03 How it works: three steps (mock #how) */
.bl-wdev-steps.bl-wf-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 16px; }
#aw-steps .bl-svc-head { grid-template-columns: minmax(0, 1fr); }
#aw-steps .bl-svc-head h2 { max-width: none; }
main .bl-wf-steps .bl-wdev-step h3 { --bl-h3-list: 19px; }
.bl-wf-steps .bl-wdev-step p { font-size: 15px; }

/* 04 Fit check: the related services card (mock #fit) */
main .bl-wf-fit .bl-wdev-fit__card.is-link p.bl-wf-fit__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14.5px; font-weight: 500; }
main .bl-wf-fit .bl-wdev-fit__card.is-link p.bl-wf-fit__price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bl-line); font-size: 13.5px; line-height: 1.5; color: var(--bl-copy); }

/* B74 (2026-11-04): Workshops page rebuilt to Workshops Page.dc.html */
/* Values are the mock's (dark); light theme uses the site tokens and the B68 --wdev-* overrides.
   Reuses .bl-sg-facts, .bl-wdev-steps and -ws__note; the old .bl-ws picker rules are no longer used by
   the page and are left as they are. Shared rules are only overridden here, under #workshops-hero / .bl-wks-*. */

/* Hero: kicker, hook large with the accent line, topic line under it (both stay in the H1), lead, buttons */
main #workshops-hero h1.hero-09-headline__hooked { display: flex; flex-direction: column; gap: 26px; max-width: none; font-size: clamp(46px, min(6.4vw, 9.6vh), 88px) !important; line-height: .96 !important; letter-spacing: -.05em !important; background: none; -webkit-text-fill-color: currentColor; color: var(--t-bright); }
#workshops-hero .bl-phero__hook { display: block; }
#workshops-hero .bl-phero__accent { display: block; color: var(--wdev-h1-accent); }
#workshops-hero .bl-phero__topic { order: 2; margin: 0; font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--t-medium); }
#workshops-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#workshops-hero .bl-home-hero__btn { font-size: 16px; }
#workshops-hero .db-hero-09__grid { display: none; }
#workshops-hero .db-hero-09__visual { min-width: 0; }
@media (min-width: 1100px) { #workshops-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #workshops-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }

/* Hero drawing: the mock's draft workshop plan (title, three sessions with the second marked, "Using your own") */
.bl-wks-hv { display: flex; flex-direction: column; width: 100%; max-width: 560px; margin-left: auto; text-align: left; }
.bl-wks-hv p, .db-section .bl-wks-hv p { max-width: none; margin: 0; }
.bl-wks-hv__card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 22px; background: var(--wdev-deep); box-shadow: var(--wdev-shadow); }
.bl-wks-hv__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bl-line); }
.bl-wks-hv__bar > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-wks-hv__bar b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-wks-hv__bar small { font-size: 12px; line-height: 1.4; color: var(--t-muted); }
.bl-wks-hv__tag { flex: none; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--accent-text) 40%, transparent); border-radius: 999px; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-wks-hv__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px 20px; list-style: none; }
.bl-wks-hv__list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: var(--wdev-chip); font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--t-bright); }
.bl-wks-hv__list li::before { content: none; }
.bl-wks-hv__list li > span { white-space: nowrap; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-wks-hv__list li.is-on { border-color: rgba(37, 99, 255, .5); background: rgba(37, 99, 255, .14); }
.bl-wks-hv__list li.is-on > span { color: var(--accent-text); }
.bl-wks-hv__own { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--bl-line); }
.bl-wks-hv__own em { font: 500 10px/1.3 var(--_font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-wks-hv__own > span { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-wks-hv__own i { padding: 5px 11px; border: 1px solid var(--wdev-line2); border-radius: 999px; font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--t-medium); }
@media (max-width: 479px) { .bl-wks-hv__bar, .bl-wks-hv__list, .bl-wks-hv__own { padding-left: 14px; padding-right: 14px; } .bl-wks-hv__list li { gap: 10px; } }

/* Facts strip: one row of three under the hero (mock) */
.bl-wks-facts.bl-sg-facts { margin: 0; border-radius: 16px; background: var(--wdev-facts); }
.bl-wks-facts.bl-sg-facts dt { font-size: 10.5px; letter-spacing: .14em; color: var(--t-muted); }
.bl-wks-facts.bl-sg-facts dd { margin-top: 4px; font-size: 13px; color: var(--t-muted); }
@media (min-width: 768px) { .bl-wks-facts.bl-sg-facts > div + div { border-left: 1px solid var(--wdev-line3); } }

/* 01 Topics: heading left, lead right; four cards with a drawn box beside the plan card (mock #plan) */
.bl-wks-topics .bl-svc-head { margin-bottom: 40px; }
.bl-wks-topics .bl-svc-head__lead { font-size: 18px; line-height: 1.55; color: var(--bl-copy); }
.bl-wks-pick { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.bl-wks-pick__topics { flex: 1.4 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bl-wks-topic { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px; border: 1px solid var(--wdev-line3); border-radius: 18px; background: var(--base-tint); }
.bl-wks-topic::before { content: none; }
.bl-wks-topic > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bl-copy); }
.bl-wks-topic > p a { color: var(--accent-text); }
.bl-wks-topic__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; }
.bl-wks-topic__head input { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; }
.bl-wks-pick:not(.is-js) .bl-wks-topic__head input { display: none; }
.bl-wks-topic__n { font: 500 12px/1.3 var(--_font-mono); color: var(--wdev-num); }
.bl-wks-topic__box { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--t-bright) 30%, transparent); border-radius: 7px; font: 600 12px/1 var(--_font-default); color: #fff; }
.bl-wks-topic__title { grid-column: 1 / -1; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--t-bright); }
.bl-wks-pick.is-js .bl-wks-topic__head { cursor: pointer; }
.bl-wks-pick.is-js .bl-wks-topic__box { display: flex; }
.bl-wks-topic:has(input:checked) { border-color: rgba(37, 99, 255, .55); background: rgba(37, 99, 255, .12); }
.bl-wks-topic:has(input:checked) .bl-wks-topic__box { border-color: var(--accent); background: var(--accent); }
.bl-wks-topic:has(input:checked) .bl-wks-topic__box::before { content: "✓"; }
.bl-wks-topic:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.bl-wks-topic__head:hover .bl-wks-topic__box { border-color: var(--accent-text); }
/* Plan card: only with JavaScript; nothing is sent, the plan only shows on the page */
.bl-wks-plan { display: none; }
.bl-wks-pick.is-js .bl-wks-plan { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px; border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 20px; background: radial-gradient(80% 80% at 100% 0%, rgba(37, 99, 255, .16), var(--wdev-deep) 60%); }
.bl-wks-plan p, .db-section .bl-wks-plan p { max-width: none; margin: 0; }
.bl-wks-plan__live { display: flex; flex-direction: column; gap: 16px; }
.bl-wks-plan__bar { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.bl-wks-plan__bar > span:last-child { color: var(--t-muted); }
.bl-wks-plan__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-wks-plan__list:empty { display: none; }
.bl-wks-plan__list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 11px; background: var(--base-tint); font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--t-bright); }
.bl-wks-plan__list li::before { content: none; }
.bl-wks-plan__list b { white-space: nowrap; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-wks-plan__empty { padding: 18px; border: 1px dashed color-mix(in srgb, var(--accent-text) 35%, transparent); border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--bl-copy); }
.bl-wks-plan__empty[hidden] { display: none; }
.bl-wks-plan__foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--bl-line); font-size: 13.5px; line-height: 1.5; color: var(--bl-copy); }
.bl-wks-plan > .bl-home-hero__btn { justify-content: center; margin-top: auto; width: 100%; font-size: 15px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .bl-wks-topic, .bl-wks-topic__box { transition: background-color .2s ease, border-color .2s ease; }
}

/* 02 How it works: three steps (mock #how), then the prices row */
.bl-wdev-steps.bl-wks-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 16px; }
.bl-wks-how .bl-svc-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
.bl-wks-how .bl-svc-head h2 { max-width: none; }
main .bl-wks-steps .bl-wdev-step h3 { --bl-h3-list: 19px; }
.bl-wks-steps .bl-wdev-step p { font-size: 15px; }
.bl-wks-steps .bl-wdev-step--2 .bl-wdev-step__line { background: rgba(37, 99, 255, .6); }
.bl-wks-price { display: flex; flex-direction: column; gap: 4px; margin-top: 48px; padding: 22px 26px; border: 1px solid var(--bl-line); border-radius: 16px; }
.bl-wks-price p, .db-section .bl-wks-price p { max-width: 720px; margin: 0; }
p.bl-wks-price__k { font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-wks-price p:not(.bl-wks-price__k) { font-size: 15.5px; line-height: 1.55; color: var(--t-medium); }
.bl-wks-price a { color: var(--accent-text); }
/* Spacing and text resets for the rows above (shared section and paragraph rules win otherwise) */
.bl-se-facts-wrap.bl-wks-facts-wrap { padding-top: clamp(32px, 4vw, 48px); }
main .db-section.bl-wks-topics { padding-top: var(--bl-gap-s); }
.bl-wks-plan__foot > span { font-size: inherit; font-weight: 400; line-height: inherit; color: inherit; }

/* B75 (2026-11-04): Bones page rebuilt to Bones Page.dc.html */
/* Page-only (.bl-bn-*, or scoped to .bl-bn-hero / #roadmap / .bl-bones-cta, which only bones.html uses).
   Dark values are the mock's through the B68 --wdev-* tokens; light uses the site tokens. */

/* Hero: accent end of the H1, two equal columns, the status card */
.bl-bn-hero .bl-home-hero__accent { color: var(--wdev-h1-accent); }
.bl-bn-st { width: 100%; margin-top: 40px; border: 1px solid var(--wdev-line2); border-radius: 22px; background: var(--wdev-deep); box-shadow: var(--wdev-shadow); overflow: hidden; }
.bl-bn-st__bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--bl-line); }
.bl-bn-st__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--wdev-line2); }
.bl-bn-st__bar span { margin-left: auto; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .1em; color: var(--t-muted); }
.bl-bn-st__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--bl-line); }
.bl-bn-st__grid > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px; background: var(--wdev-deep); }
.bl-bn-st__grid > div.is-live { background: linear-gradient(180deg, rgba(37, 99, 255, .16), var(--wdev-deep) 80%); }
.bl-bn-st dt { display: flex; align-items: center; gap: 8px; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-bn-st__grid > .is-live dt { color: var(--accent-text); }
.bl-bn-st dt i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.bl-bn-st .is-live dt i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.bl-bn-st .is-dev dt i { border: 1.5px solid var(--accent-text); }
.bl-bn-st__grid dd { margin: 0; font: 600 30px/1 var(--_font-accent); letter-spacing: -.03em; color: var(--t-bright); }
.bl-bn-st__grid dd.is-sm { font-size: 24px; letter-spacing: -.02em; }
.bl-bn-st__grid dd.bl-bn-st__note { font: 400 13.5px/1.4 var(--_font-default); letter-spacing: 0; color: var(--t-medium); }
.bl-bn-st__note a { color: var(--accent-text); }
.bl-bn-st__parts { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: center; row-gap: 12px; margin: 0; padding: 20px 22px; border-top: 1px solid var(--bl-line); }
.bl-bn-st__parts dt { grid-column: 1 / -1; }
.bl-bn-st__parts dd { margin: 0; padding: 10px 0; border: 1px solid var(--wdev-line2); border-radius: 10px; background: var(--wdev-chip); text-align: center; font: 500 13px/1.2 var(--_font-default); color: var(--t-bright); }
.bl-bn-st__parts dd.is-on { border-color: rgba(37, 99, 255, .55); background: rgba(37, 99, 255, .14); }
.bl-bn-st__parts dd { grid-row: 2; grid-column: 1; }
.bl-bn-st__parts dd:nth-of-type(2) { grid-column: 3; }
.bl-bn-st__parts dd:nth-of-type(3) { grid-column: 5; }
.bl-bn-st__parts::before, .bl-bn-st__parts::after { content: ""; grid-row: 2; height: 1px; background: color-mix(in srgb, var(--accent-text) 50%, transparent); }
.bl-bn-st__parts::before { grid-column: 2; }
.bl-bn-st__parts::after { grid-column: 4; }
@media (max-width: 479px) {
  .bl-bn-st__grid > div { padding: 18px 16px; }
  .bl-bn-st__grid dd { font-size: 24px; }
  .bl-bn-st__grid dd.is-sm { font-size: 20px; }
  .bl-bn-st__parts { grid-template-columns: 1fr 12px 1fr 12px 1fr; padding: 18px 16px; }
}
@media (min-width: 1100px) {
  .bl-home-hero--status.bl-bn-hero .bl-home-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
  .bl-home-hero--status.bl-bn-hero .bl-bn-st { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin-top: 0; }
}

/* 01 What Bones is: cards without icons, the status chip first (mock #what) */
.bl-bones-caps__item.bl-bn-cap { gap: 12px; padding: 28px; border-radius: 20px; background: var(--base-tint); background-image: none; box-shadow: none; }
.bl-bn-cap .bl-bones-caps__st { align-self: flex-start; justify-self: start; padding: 4px 10px; border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); font-size: 10px; letter-spacing: .12em; }
.bl-bones-caps__item.bl-bn-cap.is-planned { background: var(--wdev-deep); border-color: var(--wdev-dash); }
.bl-bn-cap.is-planned .bl-bones-caps__st { border-color: var(--wdev-dash); color: var(--t-medium); }

/* 02 How it fits together: tabs as buttons, then three cards (mock #flow) */
.bl-bn-flow { display: grid; gap: 40px; }
.bl-bn-flow__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: -8px; }
.bl-bn-flow:not(.is-js) .bl-bn-flow__tabs { display: none; }
.bl-bn-flow__tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px; border: 1px solid var(--wdev-line2); border-radius: 14px; background: transparent; color: var(--t-bright); text-align: left; cursor: pointer; }
.bl-bn-flow__tab b { font: 600 15px/1.3 var(--_font-default); }
.bl-bn-flow__tab span { font: 400 12.5px/1.3 var(--_font-default); color: var(--t-medium); }
.bl-bn-flow__tab.is-on { border-color: var(--accent); background: rgba(37, 99, 255, .16); }
.bl-bn-flow__tab:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--wdev-line2)); }
.bl-bn-flow__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-bn-flow.is-js .bl-bn-flow__panel:not(.is-on), .bl-bn-flow.is-js .bl-bn-flow__nojs { display: none; }
.bl-bn-flow__nojs { text-align: left; }
.bl-bn-flow__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; }
.bl-bn-flow__card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); }
.bl-bn-flow__card--core { gap: 10px; border-color: var(--accent); background: linear-gradient(180deg, rgba(37, 99, 255, .16), var(--base-tint) 60%); }
p.bl-bn-flow__k { margin: 0; padding-bottom: 6px; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-bn-flow__card--core p.bl-bn-flow__k { color: var(--accent-text); }
.bl-bn-flow__types, .bl-bn-flow__outs, .bl-bn-flow__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-bn-flow__types li { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 13px; border: 1px solid var(--bl-line); border-radius: 10px; background: var(--wdev-deep); }
.bl-bn-flow__types li.is-hot { border-color: var(--accent); background: rgba(37, 99, 255, .16); }
.bl-bn-flow__types b, .bl-bn-flow__outs b { font: 600 14.5px/1.3 var(--_font-default); color: var(--t-bright); }
.bl-bn-flow__types code, .bl-bn-flow__outs code { overflow-wrap: anywhere; font: 400 11.5px/1.4 var(--_font-mono); color: var(--t-muted); background: none; padding: 0; }
.bl-bn-flow__outs li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 13px; border: 1px solid var(--bl-line); border-radius: 10px; background: var(--wdev-deep); }
.bl-bn-flow__outs b { display: flex; justify-content: space-between; gap: 8px; }
.bl-bn-flow__outs b span { font: 400 12px/1.4 var(--_font-default); color: var(--t-muted); text-align: right; }
.bl-bn-flow__outs code { font-size: 12px; color: var(--wdev-soft); }
.bl-bn-flow__steps li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 12px; border-radius: 10px; background: var(--wdev-tile); }
.bl-bn-flow__steps li > span { font: 500 11px/1.6 var(--_font-mono); color: var(--accent-text); }
.bl-bn-flow__steps li p, .db-section .bl-bn-flow__steps li p { margin: 0; font: 400 14px/1.45 var(--_font-default); color: var(--t-bright); }
.bl-bn-flow__steps li em { display: block; margin-top: 3px; font: 400 11px/1.4 var(--_font-mono); font-style: normal; color: var(--t-muted); }
.bl-bn-flow__who { margin: auto 0 0; padding: 12px; border: 1px dashed color-mix(in srgb, var(--accent-text) 45%, transparent); border-radius: 10px; }
.bl-bn-flow__who dt, .bl-bn-flow__story dt { font: 500 10px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-bn-flow__who dd { margin: 4px 0 0; font: 400 13.5px/1.45 var(--_font-default); color: var(--wdev-soft); }
.bl-bn-flow__story { display: flex; flex-direction: column; gap: 6px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--bl-line); }
.bl-bn-flow__story dd { margin: 0; font: 400 13.5px/1.45 var(--_font-default); color: var(--t-medium); }
.bl-bn-flow__story dd:last-child { color: var(--t-bright); }
.bl-bn-flow__story dd + dt { margin-top: 6px; }
p.bl-bn-flow__note { margin: -16px 0 0; font-size: 13.5px; color: var(--t-muted); }
@media (prefers-reduced-motion: no-preference) { .bl-bn-flow__tab { transition: border-color .2s ease, background-color .2s ease; } }

/* 04 What Bones 9 is made of: cards with a drawn screen (mock #bones9) */
.bl-bn-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.bl-bn-part { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); color: inherit; text-decoration: none; }
.bl-bn-part:hover, .bl-bn-part:focus-visible { border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); color: inherit; }
.bl-bn-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-bn-part__media { display: flex; flex-direction: column; min-height: 200px; padding: 20px 20px 12px; border-bottom: 1px solid var(--wdev-line3); background: var(--wdev-deep); }
.bl-bn-part__media .bl-wdev-ws__note { margin: 10px 0 0; }
.bl-bn-draw { flex: 1; display: flex; flex-direction: column; gap: 8px; font: 400 12.5px/1.3 var(--_font-default); color: var(--t-medium); }
.bl-bn-draw i { font-style: normal; }
.bl-bn-draw__rec { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid rgba(37, 99, 255, .5); border-radius: 9px; background: rgba(37, 99, 255, .14); }
.bl-bn-draw__rec b { font: 500 13px/1.3 var(--_font-default); color: var(--t-bright); }
.bl-bn-draw__rec i { font: 500 10px/1.6 var(--_font-mono); text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.bl-bn-draw__field { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--wdev-chip); }
.bl-bn-draw__field b { font-weight: 400; color: var(--t-bright); }
.bl-bn-draw__outs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; }
.bl-bn-draw__outs i { padding: 6px 0; border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 6px; text-align: center; font: 400 10.5px/1.3 var(--_font-mono); color: var(--wdev-soft); }
.bl-bn-draw--portal { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.bl-bn-draw__nav { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--t-muted); }
.bl-bn-draw__nav i { padding: 5px 8px; border-radius: 6px; }
.bl-bn-draw__nav i.is-on { background: rgba(37, 99, 255, .18); color: var(--t-bright); }
.bl-bn-draw__rows { display: flex; flex-direction: column; gap: 6px; }
.bl-bn-draw__rows > span { display: flex; justify-content: space-between; gap: 6px; padding: 9px 10px; border-radius: 8px; background: var(--wdev-chip); font-size: 12px; color: var(--t-bright); }
.bl-bn-draw__rows i { display: flex; align-items: center; gap: 5px; font: 500 10px/1.3 var(--_font-mono); text-transform: uppercase; color: var(--t-muted); }
.bl-bn-draw__rows i.is-live { color: var(--accent-text); }
.bl-bn-draw__rows i.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bl-bn-draw--console { gap: 0; }
.bl-bn-draw__k { padding-bottom: 4px; font: 500 9.5px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-bn-draw__act { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--wdev-line3); font-size: 12px; }
.bl-bn-draw__act:last-child { border-bottom: 0; }
.bl-bn-draw__act i { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wdev-line2); font: 500 10px/1 var(--_font-default); color: var(--t-bright); }
.bl-bn-draw__act i.is-on { background: #1c2a5e; color: #fff; }
.bl-bn-part__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.bl-bn-part__k { font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
main .bl-bn-part h3 { margin: 0; font: 600 22px/1.25 var(--_font-accent); letter-spacing: -.02em; color: var(--t-bright); }
.bl-bn-part__text { font: 400 15px/1.55 var(--_font-default); color: var(--t-medium); }
.bl-bn-part__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font: 500 14.5px/1.3 var(--_font-default); color: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) { .bl-bn-part { transition: border-color .2s ease; } }

/* 05 Roadmap: numbered head, equal columns, the mock's dots and rail (mock #roadmap) */
main:has(#service-content) #roadmap .bl-bones-road__intro { counter-increment: blsec; }
main:has(#service-content) #roadmap .bl-bones-road__intro > .bl-svc-head__eyebrow::before { content: counter(blsec, decimal-leading-zero) " ·"; }
main:has(#service-content) #roadmap .bl-bones-road__intro > .bl-svc-head__eyebrow::after { content: ""; }
#roadmap .bl-bones-road__lead { font-size: 17px; }
#roadmap .bl-bones-road__legend { gap: 8px 18px; font-size: 13.5px; }
#roadmap .bl-bones-road__legend li::before { width: 10px; height: 10px; box-sizing: border-box; }
#roadmap .bl-bones-road__legend .is-now::before { background: var(--accent); border: 0; }
#roadmap .bl-bones-road__legend .is-dev::before { background: none; border: 2px solid var(--accent); }
#roadmap .bl-bones-road__legend .is-planned::before { background: none; border: 1.5px dashed var(--accent-text); }
#roadmap .bl-bones-road__legend .is-exploring::before { background: none; border: 1.5px dotted var(--wdev-dim); }
#roadmap .bl-bones-road__list { gap: 0; padding-left: 44px; }
#roadmap .bl-bones-road__item { padding: 0 0 28px; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 6px; }
#roadmap .bl-bones-road__item:last-child { padding-bottom: 0; }
#roadmap .bl-bones-road__item:not(:last-child)::after { left: -32px; top: 22px; bottom: 0; width: 2px; background: rgba(37, 99, 255, .35); opacity: 1; }
#roadmap .bl-bones-road__item.is-dev::after { background: rgba(37, 99, 255, .25); }
#roadmap .bl-bones-road__item.is-planned::after, #roadmap .bl-bones-road__item.is-exploring::after { background: color-mix(in srgb, var(--accent-text) 16%, transparent); }
#roadmap .bl-bones-road__dot { box-sizing: border-box; left: -39px; top: 4px; width: 16px; height: 16px; animation: none; }
#roadmap .bl-bones-road__item.is-done .bl-bones-road__dot { left: -38px; width: 14px; height: 14px; border: 0; background: var(--wdev-line2); }
#roadmap .bl-bones-road__item.is-now .bl-bones-road__dot { left: -42px; top: 20px; width: 22px; height: 22px; border: 0; background: var(--accent); box-shadow: 0 0 0 5px rgba(37, 99, 255, .2), 0 0 20px rgba(37, 99, 255, .6); }
#roadmap .bl-bones-road__item.is-dev .bl-bones-road__dot { border: 2px solid var(--accent); background: var(--base); }
#roadmap .bl-bones-road__item.is-planned .bl-bones-road__dot { border: 1.5px dashed var(--accent-text); background: none; }
#roadmap .bl-bones-road__item.is-exploring .bl-bones-road__dot { border: 1.5px dotted var(--wdev-dim); background: none; }
#roadmap .bl-bones-road__when { font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
#roadmap .is-now .bl-bones-road__when, #roadmap .is-dev .bl-bones-road__when { color: var(--accent-text); }
#roadmap .is-planned .bl-bones-road__when { color: var(--t-medium); }
#roadmap .bl-bones-road__when em { margin: 0; padding: 0; border: 0; color: inherit; }
#roadmap .bl-bones-road__when em::before { content: "· "; }
#roadmap .bl-bones-road__when em.bl-bones-road__here { margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: #fff !important; letter-spacing: .1em; }
#roadmap .bl-bones-road__when em.bl-bones-road__here::before { content: none; }
#roadmap .bl-bones-road__item.is-now { margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--accent); border-radius: 16px; background: linear-gradient(180deg, rgba(37, 99, 255, .14), var(--base-tint)); gap: 8px; }
#roadmap .bl-bones-road__item.is-now::after { left: -32px; top: 42px; bottom: -28px; }
main #roadmap .bl-bones-road__item.is-now h3 { font-size: 20px; }
#roadmap .bl-bones-road__item.is-now p { color: var(--t-bright); }
main #roadmap .bl-bones-road__item.is-exploring h3 { color: var(--t-medium); }
#roadmap .bl-bones-road__item.is-exploring p { color: var(--t-muted); }
@media (min-width: 1024px) {
  #roadmap .bl-bones-road { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  #roadmap .bl-bones-road__intro { position: static; }
}

/* 06 Using Bones today: the mock's panel, step 2 highlighted (mock #use) */
.bl-bones-cta .bl-svc-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.bl-bones-cta .bl-svc-head__lead { margin-top: 16px; font-size: 15.5px; }
.bl-bones-cta .bl-svc-head h2 { margin-top: 16px; }
.bl-bones-cta .bl-hv__chips span { padding: 6px 12px; border-color: color-mix(in srgb, var(--accent-text) 35%, transparent); font-size: 13px; color: var(--t-bright); }
.bl-bones-cta .bl-bones-use { gap: 10px; }
.bl-bones-cta .bl-bones-use > a { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; padding: 18px 20px; border-radius: 16px; border-color: var(--wdev-line2); background: var(--wdev-deep); }
.bl-bones-cta .bl-bones-use > a b { font-size: 16px; }
.bl-bones-cta .bl-bones-use > a em { font-family: var(--_font-default); font-size: 13.5px; }
.bl-bones-cta .bl-bones-use .bl-ss-steps__n { width: 36px; height: 36px; background: none; }
.bl-bones-cta .bl-bones-use > a:nth-child(2) { border-color: var(--accent); background: linear-gradient(90deg, rgba(37, 99, 255, .18), rgba(37, 99, 255, .05)); }
.bl-bones-cta .bl-bones-use > a:nth-child(2) .bl-ss-steps__n { background: var(--accent); color: #fff; }
.bl-bones-cta .bl-bones-use > a:nth-child(2) em { color: var(--wdev-soft); }
.bl-bones-cta .bl-bones-use > a:nth-child(2) .bl-lcards__go { color: var(--t-bright); }
.bl-bones-cta { border-color: var(--bl-line); background: var(--base-tint); }

/* Light theme: the mock's fixed blues read too faint on white */
:root:not([data-theme="dark"]) .bl-bn-st__grid > div.is-live { background: linear-gradient(180deg, rgba(37, 99, 255, .08), var(--wdev-deep) 80%); }
:root:not([data-theme="dark"]) .bl-bn-draw__act i.is-on { background: var(--accent); }

/* B76 (2026-11-04): client case study (AT-ECO) rebuilt to Case Study Page.dc.html */
/* Hero (every client case, from theme/work/article_headline.php): breadcrumb, status pill, accent
   title, one facts card with chips along the bottom, optional large drawing. Body (.bl-cc, AT-ECO
   only): split sections with drawings, numbered result tiles, status panel, "how it fits" panel.
   Colours are site tokens; the --wdev-* tokens already switch for the light theme (B68). */
.bl-cc-hero { background: radial-gradient(55% 70% at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%); }
.bl-cc-crumbs { width: 100%; min-width: 0; }
.bl-cc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.4; color: var(--t-medium); }
.bl-cc-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; }
.bl-cc-crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--t-muted); }
.bl-cc-crumbs li::marker { content: none; }
.bl-cc-crumbs a { color: var(--t-medium); text-decoration: none; }
.bl-cc-crumbs a:hover { color: var(--t-bright); text-decoration: underline; }
.bl-cc-crumbs [aria-current] { color: var(--t-bright); overflow-wrap: anywhere; }
.bl-cc-hero .bl-cc-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; letter-spacing: .14em; }
.bl-cc-hero__status { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent); border-radius: 999px; letter-spacing: .1em; color: var(--wdev-soft); }
.bl-cc-hero__accent { color: var(--wdev-h1-accent); }
.bl-cc-facts { gap: 0; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 18px; background: color-mix(in srgb, var(--base-tint) 60%, transparent); }
.bl-cc-facts__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.bl-cc-facts__dl > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px; border-bottom: 1px solid var(--wdev-line3); }
.bl-cc-facts__dl > div:nth-child(odd) { border-right: 1px solid var(--wdev-line3); }
.bl-cc-facts__dl > div:nth-last-child(-n+2):nth-child(odd), .bl-cc-facts__dl > div:last-child { border-bottom: 0; }
.bl-cc-facts__dl dt { font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-medium); }
.bl-cc-facts__dl dd { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--t-bright); overflow-wrap: anywhere; }
.bl-cc-facts__dl dd a { color: var(--t-bright); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
.bl-cc-facts__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--wdev-line3); }
.bl-cc-facts__chips span { padding: 4px 10px; border: 1px solid var(--wdev-line2); border-radius: 999px; font-size: 12.5px; line-height: 1.3; color: var(--t-medium); }
@media only screen and (min-width: 1024px) {
  .bl-cc-hero .bl-home-hero__inner { row-gap: 28px; }
  .bl-cc-hero .bl-cc-crumbs { grid-column: 1 / -1; }
  .bl-cc-hero .bl-cc-fig { margin-top: 12px; }
}
@media (max-width: 1023.98px) { .bl-cc-hero .bl-case-hero__text { margin-top: 24px; } }
@media (max-width: 479.98px) {
  .bl-cc-facts__dl { grid-template-columns: minmax(0, 1fr); }
  .bl-cc-facts__dl > div { border-right: 0 !important; border-bottom: 1px solid var(--wdev-line3) !important; }
  .bl-cc-facts__dl > div:last-child { border-bottom: 0 !important; }
}

/* Large drawing under the hero: framed window with three columns (mock's content-model figure) */
.bl-cc-fig__frame { display: flex; flex-direction: column; align-items: center; padding: clamp(20px, 5vw, 56px); border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); border-radius: 28px; background: var(--wdev-map); }
.bl-cc-fig .bl-wdev-ws__note { align-self: stretch; max-width: 820px; width: 100%; margin: 10px auto 0; }
.bl-cc-win { width: 100%; max-width: 820px; overflow: hidden; border: 1px solid var(--wdev-line2); border-radius: 18px; background: var(--wdev-ws); box-shadow: var(--wdev-shadow); text-align: left; }
.bl-cc-win__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--bl-line); font-size: 13.5px; color: var(--t-medium); }
.bl-cc-win__bar b { font-weight: 600; color: var(--t-bright); }
.bl-cc-win__bar span { font-weight: 400; color: var(--t-medium); }
.bl-cc-win__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bl-cc-win__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border-top: 1px solid var(--bl-line); margin-top: -1px; }
.bl-cc-win__col + .bl-cc-win__col { border-left: 1px solid var(--bl-line); margin-left: -1px; }
.bl-cc-win__k { margin: 0; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-medium); }
.bl-cc-win__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-cc-win__list li { margin: 0; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; background: var(--wdev-chip); font-size: 13.5px; font-weight: 500; color: var(--t-bright); }
.bl-cc-win__list li::before { content: none; }
.bl-cc-win__list li.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.bl-cc-win__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bl-cc-win__chips span { padding: 6px 11px; border: 1px solid var(--wdev-line2); border-radius: 999px; font-size: 13px; color: var(--t-bright); }

/* Body sections: kicker with a rule, mock H2 size, split text and drawing */
.bl-cc { --bl-h2: clamp(32px, 4vw, 50px); gap: clamp(56px, 7vw, 96px); padding-bottom: clamp(16px, 2vw, 24px); }
.bl-cc-sec { display: grid; gap: 24px 72px; min-width: 0; }
.bl-cc-sec__text, .bl-cc-sec__head { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bl-cc-sec__text > p:not(.bl-cc-kicker), .bl-cc-status > p:not(.bl-cc-status__k) { margin: 0; font-size: 17px; line-height: 1.65; color: color-mix(in srgb, var(--t-bright) 78%, var(--t-medium)); text-wrap: pretty; }
.bl-cc-sec h2 { margin: 0 !important; color: var(--t-bright); text-wrap: balance; }
.bl-cc-kicker { display: flex; align-items: center; gap: 12px; margin: 0 !important; font: 500 12px/1.4 var(--_font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.bl-cc-kicker::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--accent); }
.bl-cc-kicker + h2 { margin-top: 0 !important; }
.bl-cc-sec__art { display: grid; gap: 16px; min-width: 0; }
.bl-cc-sec__art .bl-case-fig { border-radius: 20px; background: var(--wdev-deep); }
@media (min-width: 992px) {
  .bl-cc-sec--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .bl-cc-sec--flip .bl-cc-sec__art { order: -1; }
}
@media (max-width: 575.98px) { .bl-cc-sec__text > p:not(.bl-cc-kicker), .bl-cc-status > p:not(.bl-cc-status__k) { font-size: 16.5px; } }

/* 03 Results: numbered tiles (mock's tile grid), then the status panel */
.bl-cc-tiles { counter-reset: cct; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--bl-line); }
.bl-cc-tiles > li { counter-increment: cct; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 26px; background: var(--base); font-size: 15px; line-height: 1.55; color: var(--t-medium); }
.bl-cc-tiles > li::before { content: counter(cct, decimal-leading-zero); position: static; width: auto; height: auto; border: 0; border-radius: 0; font: 500 12px/1.4 var(--_font-mono); color: var(--accent-text); }
.bl-cc-tiles strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
@media (min-width: 700px) { .bl-cc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-cc-tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .bl-cc-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bl-cc-tiles > li { grid-column: span 2; }
  .bl-cc-tiles > li:nth-child(n+4) { grid-column: span 3; }
  .bl-cc-tiles > li:last-child:nth-child(odd) { grid-column: span 3; }
}
.bl-cc-status { display: grid; gap: 10px 56px; align-items: start; padding: clamp(24px, 3.5vw, 36px); border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 20px; background: var(--base-tint); }
.bl-cc-status__k { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.bl-cc-status__k span { width: 8px; height: 8px; border: 2px solid var(--accent); border-radius: 50%; }
@media (min-width: 768px) { .bl-cc-status { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* 04 The platform: the mock's "how it fits together" panel, records feeding three outputs */
.bl-cc-panel { --bl-h2: clamp(30px, 3.6vw, 44px); align-items: center; gap: 36px 56px; padding: clamp(24px, 4.5vw, 52px); border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--base-tint); }
@media (min-width: 992px) { .bl-cc-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl-cc-map { display: grid; gap: 10px; min-width: 0; }
.bl-cc-map p { margin: 0; }
.bl-cc-map__hub { display: flex; flex-direction: column; gap: 6px; justify-self: center; width: min(100%, 300px); padding: 24px 14px; border: 1px solid var(--accent); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent), 0 20px 50px -12px color-mix(in srgb, var(--accent) 60%, transparent); text-align: center; }
.bl-cc-map__hub span { font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wdev-soft); }
.bl-cc-map__hub b { font-size: 20px; font-weight: 600; color: var(--t-bright); }
.bl-cc-map__outs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 22px; }
.bl-cc-map__outs::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 12px; background: var(--accent); }
.bl-cc-map__outs::after { content: ""; position: absolute; top: 12px; left: calc(100% / 6); right: calc(100% / 6); height: 1px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.bl-cc-map__outs span { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 64px; padding: 14px 10px; border: 1px solid var(--wdev-line2); border-radius: 16px; background: var(--wdev-tile); text-align: center; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--t-bright); overflow-wrap: anywhere; }
.bl-cc-map__outs span::after { content: ""; position: absolute; top: -11px; left: 50%; width: 1px; height: 10px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
@media (max-width: 575.98px) { .bl-cc-map__outs { gap: 6px; } .bl-cc-map__outs span { padding: 12px 6px; border-radius: 12px; font-size: 12.5px; overflow-wrap: normal; } }

/* 05 Client feedback: heading, then the quote card full width */
.bl-cc-sec--quote .bl-cs__quote { margin: 0; }

/* Prev/next (every client case, theme/work/project_nav.php): mock cards, the next one tinted */
.bl-cc-nav { gap: 12px; }
.bl-cc-nav .bl-case-nav__item { gap: 6px; padding: 22px 24px; border-radius: 18px; border-color: var(--wdev-line2); background: none; box-shadow: none; }
.bl-cc-nav .bl-case-nav__item--next { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bl-cc-nav .bl-case-nav__item:hover { transform: none; border-color: var(--accent); }
.bl-cc-nav .bl-case-nav__label { font-size: 10.5px; letter-spacing: .12em; color: var(--t-medium); }
.bl-cc-nav .bl-case-nav__item--next .bl-case-nav__label { color: var(--accent-text); }
.bl-cc-nav .bl-case-nav__title { font-size: 17px; font-weight: 600; }
.bl-cc-nav .bl-case-nav__client { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .bl-cc-nav .bl-case-nav__item, .bl-cc-crumbs a { transition: border-color .2s ease, color .2s ease; }
}

/* Light theme: the accent tints read faint on white */
:root:not([data-theme="dark"]) .bl-cc-hero { background: radial-gradient(55% 70% at 85% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%); }
:root:not([data-theme="dark"]) .bl-cc-facts { background: var(--wdev-facts); }
:root:not([data-theme="dark"]) .bl-cc-tiles > li { background: var(--wdev-tile); }
:root:not([data-theme="dark"]) .bl-cc-map__hub span { color: var(--accent-text); }

/* B77 (2026-11-04): Bones 9 Customer Portal case rebuilt to Case Study Customer Portal.dc.html */
/* Hero: the B76 client hero, opted into by this page ($caseHero['ccHero']), plus a full-width
   interactive portal illustration (.bl-cp-ill, tabs from bl_pick_script). Body (.bl-cp): status
   panel, split section heads, numbered area cards and dashed notes. Prev/next use .bl-cc-nav. */
.bl-cp-hero-fig { min-width: 0; }
.bl-cp-ill { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.bl-cp-ill__frame { padding: clamp(16px, 4vw, 48px); border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); border-radius: 28px; background: var(--wdev-map); }
.bl-cp-ill__win { max-width: 900px; margin: 0 auto; overflow: hidden; border: 1px solid var(--wdev-line2); border-radius: 18px; background: var(--wdev-ws); box-shadow: var(--wdev-shadow); text-align: left; }
.bl-cp-ill__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--bl-line); }
.bl-cp-ill__bar b { font-size: 14px; font-weight: 600; color: var(--t-bright); }
.bl-cp-ill__tag { padding: 3px 9px; border: 1px dashed color-mix(in srgb, var(--accent-text) 50%, transparent); border-radius: 999px; font: 500 10px/1.4 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-cp-ill__body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 340px; }
.bl-cp-ill__tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 10px 12px; border-bottom: 1px solid var(--bl-line); }
.bl-cp-ill__win:not(.is-js) .bl-cp-ill__tabs { display: none; }
.bl-cp-ill__tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--t-medium); font: 500 13.5px/1.3 var(--_font-default); text-align: left; cursor: pointer; }
.bl-cp-ill__tab:hover { color: var(--t-bright); }
.bl-cp-ill__tab.is-on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--t-bright); }
.bl-cp-ill__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-cp-ill__badge { font: 500 10px/1 var(--_font-mono); color: var(--accent-text); }
.bl-cp-ill__view { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px; }
.bl-cp-ill__win:not(.is-js) .bl-cp-ill__view + .bl-cp-ill__view { border-top: 1px solid var(--bl-line); }
.bl-cp-ill__win.is-js .bl-cp-ill__view:not(.is-on) { display: none; }
.bl-cp-ill p.bl-cp-ill__t { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-cp-ill p.bl-cp-ill__sub { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--t-medium); }
.bl-cp-ill__rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bl-cp-ill__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--wdev-line3); border-radius: 10px; background: var(--wdev-chip); }
.bl-cp-ill__rows li::before { content: none; }
.bl-cp-ill__rows li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-cp-ill__rows b { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--t-bright); overflow-wrap: anywhere; }
.bl-cp-ill__rows li > span > span { font-size: 12px; line-height: 1.4; color: var(--t-medium); overflow-wrap: anywhere; }
.bl-cp-ill__rows em { flex: none; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); font: 500 11px/1.3 var(--_font-default); font-style: normal; color: var(--wdev-soft); }
.bl-cp-ill__rows li.is-warn { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bl-cp-ill__rows li.is-warn em { background: var(--accent); color: #fff; }
.bl-cp-ill__rows li.is-muted em { border: 1px dashed var(--wdev-dash); background: none; color: var(--t-medium); }
.bl-cp-ill figcaption { font-size: 13px; line-height: 1.5; text-align: center; color: var(--t-medium); }
@media (min-width: 640px) {
  .bl-cp-ill__body { grid-template-columns: 180px minmax(0, 1fr); }
  .bl-cp-ill__win:not(.is-js) .bl-cp-ill__body { grid-template-columns: minmax(0, 1fr); }
  .bl-cp-ill__tabs { flex-direction: column; flex-wrap: nowrap; align-content: stretch; padding: 12px; border-right: 1px solid var(--bl-line); border-bottom: 0; }
}
@media (max-width: 639.98px) {
  .bl-cp-ill__tab { flex: 1 1 auto; gap: 8px; }
}
@media (max-width: 419.98px) {
  .bl-cp-ill__rows li { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Body: the status panel sits close under the illustration, as in the mock */
.bl-cs-wrap.bl-cp { padding-top: clamp(0px, 1.2vw, 16px); padding-bottom: clamp(32px, 4.5vw, 64px); }
.bl-cp .bl-cp-split { display: grid; gap: 24px 72px; min-width: 0; }
@media (min-width: 992px) { .bl-cp .bl-cp-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.bl-cp .bl-cp-covers { gap: 32px; }
.bl-cp-status { --bl-h2: clamp(24px, 2.6vw, 30px); gap: 20px 56px; }
@media (min-width: 768px) { .bl-cp-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl-cp-status__head { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bl-cp .bl-cp-status__head h2 { margin: 0 !important; font-size: clamp(24px, 2.6vw, 30px) !important; line-height: 1.15 !important; letter-spacing: -.02em; color: var(--t-bright); }
.bl-cp-status > p:not(.bl-cc-status__k) { font-size: 16px; }
.bl-cp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bl-cp-chips span { padding: 4px 10px; border: 1px dashed var(--wdev-dash); border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--t-medium); }
.bl-cp-chips span.is-main { border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--wdev-soft); }
.bl-cp-areas { counter-reset: cpa; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bl-cp-areas > li { counter-increment: cpa; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 4px 10px; min-width: 0; margin: 0 !important; padding: 18px 20px; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--base-tint); }
.bl-cp-areas > li::before { content: counter(cpa, decimal-leading-zero); grid-row: 1 / span 2; position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; padding-top: 3px; font: 500 11px/1.4 var(--_font-mono); color: var(--accent-text); }
.bl-cp-areas b { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--t-bright); }
.bl-cp-areas span { font-size: 13.5px; line-height: 1.5; color: var(--t-medium); }
.bl-cp-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.bl-cp .bl-cp-note { display: block; margin: 0; padding: 22px 24px; border: 1px dashed var(--wdev-dash); border-radius: 16px; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--t-bright) 82%, var(--t-medium)); }
.bl-cp-note > span { display: block; margin-bottom: 8px; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-medium); }
.bl-cp-note--accent { border-color: color-mix(in srgb, var(--accent-text) 35%, transparent) !important; }
.bl-cp-note--accent > span { color: var(--accent-text); }
.bl-cp-note a { color: var(--t-bright); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .bl-cp-ill__tab { transition: background-color .2s ease, color .2s ease; }
}

/* Light theme */
:root:not([data-theme="dark"]) .bl-cp-areas > li { background: var(--wdev-tile); }
:root:not([data-theme="dark"]) .bl-cp-ill__rows li.is-warn { background: color-mix(in srgb, var(--accent) 7%, var(--wdev-ws)); }

/* B78 (2026-11-04): Bones 9 Staff Console case rebuilt to Case Study Staff Console.dc.html */
/* Hero: the B76/B77 hero ($caseHero['ccHero']) with the B77 framed illustration (.bl-cp-ill), here
   a staff console: a side column (tabs plus a "named person" note), rows with health dots and a
   support-access demonstration. Body (.bl-scn, this page only): B77 status panel and split heads,
   numbered job cards, dashed note, "what a client would notice" panel and the "where it fits"
   panel with the three-part tiles (bl_case_parts). Prev/next use .bl-cc-nav. */
.bl-scn-ill__side { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--bl-line); }
.bl-scn-ill .bl-cp-ill__tabs { border: 0; }
.bl-scn-ill p.bl-scn-ill__who { margin: 0; padding: 10px 12px; border-top: 1px solid var(--bl-line); font-size: 11.5px; line-height: 1.45; color: var(--t-medium); }
.bl-scn-ill .bl-cp-ill__win:not(.is-js) p.bl-scn-ill__who { border-top: 0; }
@media (min-width: 640px) {
  .bl-scn-ill__side { border-right: 1px solid var(--bl-line); border-bottom: 0; }
  .bl-scn-ill .bl-cp-ill__tabs { padding: 12px 12px 8px; border-right: 0; }
  .bl-scn-ill p.bl-scn-ill__who { margin: auto 12px 12px; padding: 10px 0 0; }
  .bl-scn-ill .bl-cp-ill__win:not(.is-js) .bl-scn-ill__side { border-right: 0; border-bottom: 1px solid var(--bl-line); }
  .bl-scn-ill .bl-cp-ill__win:not(.is-js) p.bl-scn-ill__who { margin: 0; padding: 10px 20px; }
}
.bl-scn-rows li > span.bl-scn-row { flex-direction: row; align-items: center; gap: 10px; }
.bl-scn-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-scn-row > span > span { font-size: 12px; line-height: 1.4; color: var(--t-medium); overflow-wrap: anywhere; }
.bl-scn-dot { flex: none; box-sizing: border-box; width: 9px; height: 9px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--accent); }
.bl-scn-dot.is-imp { border-color: var(--accent-text); background: none; }
.bl-scn-dot.is-none { border-style: dashed; border-color: var(--t-medium); background: none; }
.bl-scn-dot.is-unknown { border-style: dotted; border-color: var(--wdev-dim); background: none; }
.bl-scn-ill__try { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--accent-text) 40%, transparent); border-radius: 12px; }
.bl-scn-ill__try[hidden] { display: none; }
.bl-scn-ill__try p { margin: 0; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--t-bright) 80%, var(--t-medium)); }
.bl-scn-ill__btn { min-height: 36px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 500 12.5px/1.2 var(--_font-default); cursor: pointer; }
.bl-scn-ill__btn.is-quiet { background: color-mix(in srgb, var(--t-bright) 16%, var(--wdev-ws)); color: var(--t-bright); }
.bl-scn-ill__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 02 What it covers: numbered job cards, dashed note, the client-facing panel */
.bl-scn .bl-scn-covers { gap: 32px; }
.bl-scn-jobs { counter-reset: scj; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bl-scn-jobs > li { counter-increment: scj; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; min-width: 0; margin: 0 !important; padding: 18px 20px; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--base-tint); font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--t-bright) 90%, var(--t-medium)); }
.bl-scn-jobs > li::before { content: counter(scj, decimal-leading-zero); position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; padding-top: 3px; font: 500 11px/1.4 var(--_font-mono); color: var(--accent-text); }
.bl-scn p.bl-scn-note { margin: 0; padding: 16px 20px; border: 1px dashed var(--wdev-dash); border-radius: 14px; font-size: 15px; line-height: 1.55; color: var(--t-medium); }
.bl-scn-note > span { margin-right: 10px; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-medium); }
.bl-scn-notice { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3.5vw, 40px); border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); border-radius: 24px; background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--base-tint); }
.bl-scn-notice__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.bl-scn .bl-scn-notice h3 { margin: 0 !important; font-size: clamp(22px, 2.4vw, 28px) !important; font-weight: 600; line-height: 1.15 !important; letter-spacing: -.02em; color: var(--t-bright); }
.bl-scn .bl-scn-notice__head p { margin: 0 !important; font-size: 13.5px; line-height: 1.45; color: var(--t-medium); }
.bl-scn-notice dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 0; }
.bl-scn-notice dl > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border: 1px solid var(--bl-line); border-radius: 16px; background: var(--wdev-tile); }
.bl-scn-notice dt { font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-scn-notice dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--t-bright); }

/* 03 Where it fits: one panel, text beside the three-part tiles (Bones Core in the middle, larger) */
.bl-scn .bl-scn-fit { --bl-h2: clamp(30px, 3.6vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: center; gap: 36px 56px; padding: clamp(28px, 4.5vw, 52px); border: 1px solid var(--bl-line); border-radius: 28px; background: var(--base-tint); }
.bl-scn .bl-scn-fit h2 { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.06 !important; }
.bl-scn .bl-scn-fit .bl-cc-sec__text > p:not(.bl-cc-kicker) { font-size: 16.5px; }
.bl-scn .bl-scn-fit .bl-cc-sec__text > p.bl-scn-fit__more { font-size: 15.5px; line-height: 1.6; color: var(--t-medium); }
.bl-scn .bl-case-parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; margin: 0 !important; }
.bl-scn .bl-case-parts__tile { gap: 6px; padding: 18px 14px; border-color: var(--wdev-line2); background: var(--wdev-deep); text-align: center; transition: none; }
.bl-scn .bl-case-parts__k { font-size: 10px; }
.bl-scn .bl-case-parts b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.bl-scn .bl-case-parts__go { font-size: 12px; color: var(--accent-text); }
.bl-scn .bl-case-parts > li:nth-child(2) .bl-case-parts__tile { padding: 24px 14px; border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); border-radius: 18px; }
.bl-scn .bl-case-parts > li:nth-child(2) .bl-case-parts__k { color: var(--accent-text); }
.bl-scn .bl-case-parts > li:nth-child(2) b { font-size: 18px; }
.bl-scn .bl-case-parts .is-current .bl-case-parts__tile { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }
.bl-scn .bl-case-parts .is-current .bl-case-parts__k, .bl-scn .bl-case-parts .is-current .bl-case-parts__go { color: var(--wdev-soft); }
.bl-scn a.bl-case-parts__tile:hover, .bl-scn a.bl-case-parts__tile:focus-visible { border-color: var(--accent-text); }
@media (max-width: 479.98px) {
  .bl-scn .bl-case-parts { gap: 6px; }
  .bl-scn .bl-case-parts__tile, .bl-scn .bl-case-parts > li:nth-child(2) .bl-case-parts__tile { padding: 14px 6px; border-radius: 12px; }
  .bl-scn .bl-case-parts__k { font-size: 9px; letter-spacing: .08em; }
  .bl-scn .bl-case-parts b, .bl-scn .bl-case-parts > li:nth-child(2) b { font-size: 13px; overflow-wrap: normal; }
  .bl-scn .bl-case-parts .is-current .bl-case-parts__tile { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .bl-scn .bl-case-parts__tile { transition: border-color .2s ease; }
  .bl-scn-ill__btn { transition: background-color .2s ease; }
}

/* Light theme */
:root:not([data-theme="dark"]) .bl-scn-jobs > li { background: var(--wdev-tile); }
:root:not([data-theme="dark"]) .bl-scn .bl-case-parts .is-current .bl-case-parts__k, :root:not([data-theme="dark"]) .bl-scn .bl-case-parts .is-current .bl-case-parts__go { color: var(--accent-text); }

/* B79 (2026-11-04): Bones 9 Core Platform case rebuilt to Case Study Page.dc.html */
/* Hero: the B76/B77 hero ($caseHero['ccHero']) with, full width below, the B76 framed window
   (.bl-cc-fig__frame, .bl-cc-win) as the content-model drawing (Your types / Workflow / Published
   to). Body (.bl-core, this page only): B77 status panel, 01 split with the one-record location
   demo, 02 split head with joined numbered tiles and the Audit note, 03 panel with the three-part
   tiles (bl_case_parts, restyled here as on the Staff Console). Prev/next use .bl-cc-nav. */
.bl-core-fig { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.bl-core-fig figcaption { font-size: 13px; line-height: 1.5; text-align: center; color: var(--t-medium); }
.bl-core-fig .bl-cc-win__bar span.is-on { padding: 2px 10px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--t-bright); }
.bl-core-fig .bl-cc-win__bar .bl-cp-ill__tag { margin-left: auto; }
.bl-core-fig .bl-cc-win__k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
.bl-core-fig .bl-cc-win__k span { color: var(--accent-text); }
.bl-core-fig .bl-cc-win__list li { font-weight: 500; color: color-mix(in srgb, var(--t-bright) 80%, var(--t-medium)); }
.bl-core-fig .bl-cc-win__list li.is-on { border-color: var(--accent); color: var(--t-bright); }
.bl-core-fig .bl-core-list--flow { gap: 10px; }
.bl-core-fig .bl-core-list--flow li { padding: 10px 12px; font-weight: 400; background: none; }
.bl-core-fig .bl-core-list--flow li:nth-child(1) { border: 1px dashed var(--wdev-dash); color: var(--t-medium); }
.bl-core-fig .bl-core-list--flow li:nth-child(2) { border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); color: var(--wdev-soft); }
.bl-core-fig .bl-core-list--flow li:nth-child(3) { border-color: var(--accent); background: var(--accent); font-weight: 500; color: #fff; }
.bl-core-fig .bl-core-list--out li { color: var(--t-bright); }

/* Body spacing and the 01 split: text beside the location demo */
.bl-core .bl-cc-sec { min-width: 0; }
@media (min-width: 992px) { .bl-core .bl-core-problem { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 40px 72px; } }
.bl-core-demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.bl-core-demo__card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--wdev-line2); border-radius: 20px; background: var(--wdev-deep); }
.bl-core-demo__rec { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--accent); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), var(--base-tint)); }
.bl-core p.bl-core-demo__bar { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-core p.bl-core-demo__name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-core-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.bl-core-demo__k, .bl-core-demo__sync { font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-medium); }
.bl-core-demo__sync { margin-left: auto; color: var(--accent-text); }
.bl-core-demo__locs { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-core-demo__locs[hidden], .bl-core-demo__static[hidden], .bl-core-demo__sync[hidden] { display: none; }
.bl-core-demo__locs button, .bl-core-demo__static { min-height: 32px; padding: 5px 12px; border: 1px solid var(--wdev-line2); border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--t-bright) 80%, var(--t-medium)); font: 500 12.5px/1.3 var(--_font-default); }
.bl-core-demo__locs button { cursor: pointer; }
.bl-core-demo__static { display: inline-flex; align-items: center; }
.bl-core-demo__locs button[aria-pressed="true"], .bl-core-demo__static { border-color: var(--accent); background: var(--accent); color: #fff; }
.bl-core-demo__locs button:hover { border-color: var(--accent-text); }
.bl-core-demo__locs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-core-demo__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bl-core-demo__out > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--wdev-line3); border-radius: 12px; background: var(--base-tint); }
.bl-core-demo.is-flash .bl-core-demo__out > div { border-color: var(--accent); }
.bl-core-demo__out dt { font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-medium); }
.bl-core-demo__out dd { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--t-bright); overflow-wrap: anywhere; }
.bl-core-demo__out dd.is-code { font: 400 12.5px/1.45 var(--_font-mono); color: var(--wdev-soft); }
.bl-core-demo__out b { font-weight: inherit; color: inherit; }
.bl-core-demo figcaption { font-size: 13px; line-height: 1.5; color: var(--t-medium); }
@media (max-width: 419.98px) { .bl-core-demo__card { padding: 14px; } .bl-core-demo__out { grid-template-columns: minmax(0, 1fr); } }

/* 02 What we are building: split head, joined numbered tiles, Audit note */
.bl-core .bl-core-build { gap: 36px; }
.bl-core-drive { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bl-core p.bl-core-drive__k { margin: 0; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-medium); }
.bl-core-tiles { counter-reset: cor; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--bl-line); }
.bl-core-tiles > li { counter-increment: cor; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 !important; padding: 26px; background: var(--base); }
.bl-core-tiles > li::before { content: counter(cor, decimal-leading-zero); position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; font: 500 12px/1.4 var(--_font-mono); color: var(--accent-text); }
.bl-core .bl-core-tiles h3 { margin: 0 !important; font-size: 18px !important; font-weight: 600; line-height: 1.3 !important; color: var(--t-bright); }
.bl-core .bl-core-tiles p { margin: 0 !important; font-size: 14.5px; line-height: 1.5; color: var(--t-medium); }
@media (min-width: 600px) { .bl-core-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-core-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-core p.bl-core-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--t-bright) 82%, var(--t-medium)); }
.bl-core-note > span { padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 18%, transparent); font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wdev-soft); }

/* 03 How it fits together: accent panel, text beside the three-part tiles (Bones Core current) */
.bl-core .bl-core-fit { --bl-h2: clamp(30px, 3.6vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: center; gap: 36px 56px; padding: clamp(28px, 4.5vw, 52px); border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--base-tint); }
.bl-core .bl-core-fit h2 { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.06 !important; }
.bl-core .bl-core-fit .bl-cc-sec__text > p:not(.bl-cc-kicker) { font-size: 16.5px; }
.bl-core .bl-core-fit .bl-cc-sec__text > p.bl-core-fit__more { font-size: 15.5px; line-height: 1.6; color: var(--t-medium); }
.bl-core .bl-case-parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; margin: 0 !important; }
.bl-core .bl-case-parts__tile { gap: 6px; padding: 18px 14px; border-color: var(--wdev-line2); background: var(--wdev-deep); text-align: center; transition: none; }
.bl-core .bl-case-parts__k { font-size: 10px; }
.bl-core .bl-case-parts b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.bl-core .bl-case-parts__go { font-size: 12px; color: var(--accent-text); }
.bl-core .bl-case-parts .is-current .bl-case-parts__tile { padding: 28px 14px; border-color: var(--accent); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent), 0 20px 50px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.bl-core .bl-case-parts .is-current b { font-size: 20px; }
.bl-core .bl-case-parts .is-current .bl-case-parts__k, .bl-core .bl-case-parts .is-current .bl-case-parts__go { color: var(--wdev-soft); }
.bl-core a.bl-case-parts__tile:hover, .bl-core a.bl-case-parts__tile:focus-visible { border-color: var(--accent-text); }
@media (max-width: 479.98px) {
  .bl-core .bl-case-parts { gap: 6px; }
  .bl-core .bl-case-parts__tile, .bl-core .bl-case-parts .is-current .bl-case-parts__tile { padding: 14px 6px; border-radius: 12px; }
  .bl-core .bl-case-parts__k { font-size: 9px; letter-spacing: .08em; }
  .bl-core .bl-case-parts b, .bl-core .bl-case-parts .is-current b { font-size: 13px; overflow-wrap: normal; }
  .bl-core .bl-case-parts .is-current .bl-case-parts__tile { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .bl-core .bl-case-parts__tile { transition: border-color .2s ease; }
  .bl-core-demo__out > div { transition: border-color .4s ease; }
  .bl-core-demo__locs button { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
}

/* Light theme */
:root:not([data-theme="dark"]) .bl-core-tiles > li, :root:not([data-theme="dark"]) .bl-core-demo__out > div { background: var(--wdev-tile); }
:root:not([data-theme="dark"]) .bl-core-note > span { color: var(--accent-text); }
:root:not([data-theme="dark"]) .bl-core .bl-core-fit { background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), var(--base-tint); }
:root:not([data-theme="dark"]) .bl-core .bl-case-parts .is-current .bl-case-parts__k, :root:not([data-theme="dark"]) .bl-core .bl-case-parts .is-current .bl-case-parts__go { color: var(--accent-text); }

/* B80 (2026-11-04): five client cases (Cerberus, M Capital, CaskCap, Vinadamo, Fenstercraft) on the B76 case layout */
/* Body reuses the B76 .bl-cc-* classes. Added here: a split head (heading left, text right, top
   aligned) with an optional full-width row below it, and two- and three-tile results rows at wide widths. */
@media (min-width: 992px) {
  .bl-cc-sec--split.bl-cc2-head { align-items: start; }
  .bl-cc2-head > .bl-cc2-wide { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bl-cc-tiles.bl-cc2-tiles--2 > li { grid-column: span 3; }
  .bl-cc-tiles.bl-cc2-tiles--3 > li:last-child:nth-child(odd) { grid-column: span 2; }
}

/* B81 (2026-11-04): single blog post rebuilt to Blog Post Page.dc.html */
/* Markup: theme/blog/single_layout.php, article_headline.php, article_thumb.php, table_contents.php,
   article_author.php, article_faq.php, article_navigation.php, related_blogs.php. Earlier .bl-post*
   rules stay; these override them for main.bl-post--b81 only. */
.bl-post-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101; pointer-events: none; }
.bl-post-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-text) 55%, #FFFFFF)); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
main.bl-post--b81 .bl-post-top { position: relative; background: radial-gradient(55% 420px at 85% 0%, rgba(var(--accent-rgb), .16) 0%, transparent 70%) no-repeat; }
main.bl-post--b81 .bl-post-doc { max-width: 1080px; margin: 0 auto; }

/* Header */
.bl-post-hero { display: flex; flex-direction: column; gap: 24px; padding: clamp(32px, 5vw, 64px) 0 clamp(28px, 4vw, 40px); }
.bl-post-hero__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.4; color: var(--t-muted); }
.bl-post-hero__crumbs li { display: inline-flex; gap: 8px; margin: 0; }
.bl-post-hero__crumbs li + li::before { content: "/"; color: var(--t-muted); }
main .bl-post-hero .bl-post-hero__crumbs a { color: var(--t-medium); text-decoration: none; }
main .bl-post-hero .bl-post-hero__crumbs a:hover { color: var(--t-bright); }
.bl-post-hero__crumbs li:last-child span { color: var(--t-bright); }
main .bl-post-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); max-width: none; }
.bl-post-hero__new { padding: 3px 9px; border-radius: 999px; background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .5); color: color-mix(in srgb, var(--accent-text) 30%, var(--t-bright)); letter-spacing: .1em; }
main h1.bl-post-hero__title { margin: 0; max-width: 900px; font-size: clamp(32px, 5.2vw, 68px) !important; line-height: 1.02 !important; font-weight: 600; letter-spacing: -.045em; color: var(--t-bright); text-wrap: balance; overflow-wrap: break-word; }
.bl-post-hero__accent { color: color-mix(in srgb, var(--accent-text) 45%, var(--t-bright)); }
main .bl-post-hero__lead { margin: 0; max-width: 760px; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55; color: var(--t-medium); text-wrap: pretty; }
.bl-post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--bl-line); }
.bl-post-hero__author { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bl-post-hero__author img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--bl-line); background: var(--base-tint); }
.bl-post-hero__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-post-hero__name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-post-hero__sub { font-size: 13px; line-height: 1.4; color: var(--t-muted); }
.bl-post-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.bl-post-hero__tag { padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--t-bright) 14%, transparent); font-size: 12.5px; line-height: 1.3; color: var(--t-medium); }
.bl-post-hero__ai { margin-left: 6px; padding: 6px 13px; border-radius: 999px; background: var(--base-tint); border: 1px solid color-mix(in srgb, var(--accent-text) 40%, transparent); font-size: 12.5px; font-weight: 500; line-height: 1.3; color: color-mix(in srgb, var(--accent-text) 30%, var(--t-bright)); text-decoration: none; }
.bl-post-hero__ai:hover { color: var(--t-bright); border-color: var(--accent-text); }
.bl-post-hero a:focus-visible, .bl-post-main a:focus-visible, .bl-post-contents a:focus-visible, .bl-post-contents__toggle:focus-visible, .bl-post-faq__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Illustration frame */
.bl-post-figure { margin: 0; overflow: hidden; border-radius: 24px; padding: clamp(20px, 4vw, 44px); background: radial-gradient(70% 90% at 20% 0%, rgba(var(--accent-rgb), .2), var(--base-tint) 70%); border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); }
.bl-post-figure .bl-post-art { padding: 0; }
.bl-post-figure .bl-post-art .db-concept--tile { width: min(100%, 640px); }
.bl-post-figure > img, .bl-post-figure picture, .bl-post-figure picture img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Two columns: contents aside + text (max 700px) */
.bl-post-layout { display: block; padding-top: clamp(40px, 5vw, 64px); }
.bl-post-main { min-width: 0; max-width: 700px; margin: 0 auto; }
@media (min-width: 1024px) {
  .bl-post-layout { display: grid; grid-template-columns: 220px minmax(0, 700px); justify-content: center; column-gap: 48px; align-items: start; }
  .bl-post-layout--single { grid-template-columns: minmax(0, 700px); }
  .bl-post-main { margin: 0; }
  .bl-post-side { position: sticky; top: calc(var(--bl-hdr-h, 72px) + 24px); align-self: start; }
}

/* On this page */
.bl-post-contents { display: flex; flex-direction: column; gap: 4px; }
main .bl-post-contents__title { margin: 0; padding: 0 0 10px 14px; font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-post-contents__toggle { display: none; }
.bl-post-contents__list { margin: 0; padding: 0; list-style: none; }
.bl-post-contents__list li { margin: 0; padding: 0; }
.bl-post-contents__list li::before { content: none; }
main .bl-post-contents .bl-post-contents__list a { display: block; padding: 7px 12px; border-left: 2px solid var(--bl-line); font-size: 13.5px; line-height: 1.4; color: var(--t-muted); text-decoration: none; }
main .bl-post-contents .bl-post-contents__list a:hover { color: var(--t-bright); }
main .bl-post-contents .bl-post-contents__list a[aria-current] { border-left-color: var(--accent); color: var(--t-bright); }
main .bl-post-contents__left { margin: 16px 0 0 14px; font-size: 12.5px; line-height: 1.4; color: var(--t-muted); }
main .bl-post-contents__left:empty { display: none; }
@media (min-width: 1024px) {
  .bl-post-contents__list { max-height: calc(100vh - var(--bl-hdr-h, 72px) - 160px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 1023px) {
  .bl-post-side { max-width: 700px; margin: 0 auto 32px; }
  .bl-post-contents { gap: 0; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--base-tint); overflow: hidden; }
  main .bl-post-contents__title { padding: 14px 18px 4px; }
  .bl-post-contents.is-enhanced .bl-post-contents__title { display: none; }
  .bl-post-contents.is-enhanced .bl-post-contents__toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 14px 18px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--t-bright); text-align: left; cursor: pointer; }
  .bl-post-contents__icon::before { content: "+"; font-size: 18px; color: var(--accent-text); }
  .bl-post-contents.is-open .bl-post-contents__icon::before { content: "\2212"; }
  .bl-post-contents.is-enhanced:not(.is-open) .bl-post-contents__list { display: none; }
  .bl-post-contents__list { padding: 0 10px 12px; }
  main .bl-post-contents .bl-post-contents__list a { padding: 8px; border-left: 0; font-size: 14px; color: var(--t-medium); }
  main .bl-post-contents__left { display: none; }
}

/* Article text */
main.bl-post--b81 .bl-post__body .db-article__block { gap: 22px; margin-top: 46px; padding-top: 0; border-top: 0; }
main.bl-post--b81 .bl-post__body .db-article__block:first-child { margin-top: 0; }
main.bl-post--b81 .bl-post__body .db-article__block:not(:first-child) > h2:first-child::before { content: none; display: none; }
main.bl-post--b81 .bl-post__body .db-article__block h2 { margin: 0; color: var(--t-bright); scroll-margin-top: calc(var(--bl-hdr-h, 72px) + 24px); }
main.bl-post--b81 .bl-post__body [id^="chapter-"] { scroll-margin-top: calc(var(--bl-hdr-h, 72px) + 24px); }
main.bl-post--b81 .bl-post__body .db-article__excerpt { max-width: none; margin: 0; padding: 22px 24px; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .04)); border: 1px solid rgba(var(--accent-rgb), .45); font-size: 19px !important; line-height: 1.6 !important; font-weight: 400; color: var(--t-medium); }
main.bl-post--b81 .bl-post__body .db-article__excerpt strong { font-weight: 500; color: var(--t-bright); }
main.bl-post--b81 .bl-post__body .db-article__block > ul, main.bl-post--b81 .bl-post__body .db-article__block > ol { display: flex !important; flex-direction: column; gap: 10px; margin: 0; padding: 0 !important; border: 0; border-radius: 0; background: none; }
main.bl-post--b81 .bl-post__body .db-article__block > ul > li, main.bl-post--b81 .bl-post__body .db-article__block > ol > li { padding: 0 0 0 32px; border-top: 0; }
main.bl-post--b81 .bl-post__body .db-article__block > ul > li::before { content: "\2013"; left: 0; top: 0; width: 24px; height: auto; border-radius: 0; background: none; font-size: inherit; line-height: inherit; color: var(--accent-text); }
main.bl-post--b81 .bl-post__body .db-article__block > ol > li::before { top: .35em; }

/* Author card and "In short" */
.bl-post-author { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 56px; padding: 24px; border-radius: 18px; background: var(--base-tint); border: 1px solid var(--bl-line); }
.bl-post-author__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--bl-line); }
.bl-post-author__info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
main .bl-post-author__k, main .bl-post-short__k { margin: 0; font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
main .bl-post-author__name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
main .bl-post-author .bl-post-author__name a { color: inherit; text-decoration: none; }
main .bl-post-author .bl-post-author__name a:hover { color: var(--accent-text); }
main .bl-post-author__role { margin: 0; font-size: 14px; line-height: 1.4; color: var(--t-muted); }
.bl-post-author__links { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-post-author__links a { padding: 9px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--t-bright) 18%, transparent); font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--t-bright); text-decoration: none; }
.bl-post-author__links a:hover { border-color: var(--accent-text); }
.bl-post-short { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 22px 24px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--accent-text) 40%, transparent); }
main .bl-post-short__k { color: var(--accent-text); }
main .bl-post-short__text { margin: 0; max-width: var(--bl-measure, 64ch); font-size: 15.5px; line-height: 1.65; color: var(--t-medium); }

/* Questions about this article */
.bl-post-faq { margin-top: 48px; }
main h2.bl-post-faq__title { margin: 0 0 6px; padding-bottom: 6px; font: 500 10.5px/1.4 var(--_font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-post-faq__list { border-top: 1px solid var(--bl-line); }
.bl-post-faq__item { border-bottom: 1px solid var(--bl-line); }
main .bl-post-faq__q { margin: 0; }
.bl-post-faq__btn { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 18px 0; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: normal; color: var(--t-bright); text-align: left; cursor: pointer; }
.bl-post-faq__icon { flex: none; width: 20px; text-align: center; }
.bl-post-faq__icon::before { content: "\2212"; font-size: 20px; font-weight: 400; color: var(--accent-text); }
.bl-post-faq__btn[aria-expanded="false"] .bl-post-faq__icon::before { content: "+"; }
.bl-post-faq__a[hidden] { display: none; }
main .bl-post-faq__a p { margin: 0 0 20px; max-width: none; font-size: 16px; line-height: 1.6; color: var(--t-muted); }

/* Previous / next */
.bl-post-pn-wrap { margin-top: 40px; }
.bl-post-pn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.bl-post-pn__item { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; border: 1px solid var(--bl-line); color: inherit; text-decoration: none; }
.bl-post-pn__item:hover { border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.bl-post-pn__item--next { text-align: right; border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.bl-post-pn__item--next:hover { border-color: var(--accent); }
.bl-post-pn__item--next:only-child { grid-column: 1 / -1; }
.bl-post-pn__label { font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-post-pn__item--next .bl-post-pn__label { color: var(--accent-text); }
.bl-post-pn__title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--t-bright); }

/* Continue reading: the shared compact cards, kept to the article width */
main.bl-post--b81 .bl-alist-wrap .bl-alist__head, main.bl-post--b81 .bl-alist-wrap .bl-alist { max-width: 1080px; margin-left: auto; margin-right: auto; }
main.bl-post--b81 .bl-alist-wrap .bl-alist__head { margin-bottom: 24px; }

@media (prefers-reduced-motion: no-preference) {
  main .bl-post-contents .bl-post-contents__list a, main .bl-post-hero .bl-post-hero__crumbs a, .bl-post-hero__ai, .bl-post-author__links a, .bl-post-pn__item { transition: color .2s, border-color .2s; }
}
@media (max-width: 575px) {
  .bl-post-hero__ai { margin-left: 0; }
  .bl-post-author, .bl-post-short { padding: 20px; }
  main.bl-post--b81 .bl-post__body .db-article__excerpt { padding: 18px 20px; font-size: 17px !important; }
}
@media print { .bl-post-progress, .bl-post-side { display: none !important; } }

/* Light theme */
:root:not([data-theme="dark"]) .bl-post-hero__accent { color: var(--accent-text); }
:root:not([data-theme="dark"]) .bl-post-hero__new, :root:not([data-theme="dark"]) .bl-post-hero__ai { color: var(--accent-text); }
:root:not([data-theme="dark"]) .bl-post-figure { background: radial-gradient(70% 90% at 20% 0%, rgba(var(--accent-rgb), .10), var(--base-tint) 70%); }
:root:not([data-theme="dark"]) main.bl-post--b81 .bl-post-top { background: radial-gradient(55% 420px at 85% 0%, rgba(var(--accent-rgb), .08) 0%, transparent 70%) no-repeat; }
:root:not([data-theme="dark"]) .bl-post-progress span { background: var(--accent); box-shadow: none; }

/* B82 (2026-11-04): B81 follow-ups. Concept blue lifted in dark so pill and nav text ("In review",
   "Types") reads at 4.5:1 or better; fills that use the same token carry no text. */
html:root[data-theme="dark"] .db-concept { --cx-blue: #9db6ff; }

/* B83 (2026-11-04): contact.html finished to the mock "Contact Page": step circles (filled,
   outline, dashed), the office card as a map link, the quote panel, label rows with the website
   hint and character count, the privacy line beside "Send message", and the sent state. */
.bl-phero--contact .bl-contactx__next li:nth-child(1) .bl-nsteps__n { border-color: var(--accent); background: var(--accent); color: #fff; }
.bl-phero--contact .bl-contactx__next li:nth-child(3) .bl-nsteps__n { border-style: dashed; border-color: var(--accent-text); }
.bl-phero--contact .bl-contactx__details a .bl-contactx__map { font-size: 13px; line-height: 1.4; font-weight: 400; font-style: normal; color: var(--accent-text); }
.bl-phero--contact .bl-contactx__details a address { color: var(--t-bright); }
.bl-contact__quote { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); gap: 10px; }
.bl-contact__quote[hidden] { display: none; }
.bl-contact__quote-k { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.bl-contact__quote-k a { color: var(--accent-text); letter-spacing: .08em; text-decoration: none; }
.bl-contact__quote-k a:hover { text-decoration: underline; }
.bl-contact__quote-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl-contact__quote-items li { padding: 4px 10px; border: 1px solid var(--bl-line); border-radius: 999px; background: var(--base); font-size: 13px; color: var(--t-bright); }
.bl-contact__form .bl-contact__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bl-contact__label-row [data-url-mark] { color: var(--accent-text); }
.bl-contact__label-row .bl-contact__hint { font-size: 12.5px; }
.bl-contact__count { font: 400 12.5px/1.3 var(--_font-mono); color: var(--t-medium); }
.bl-contact__form #cf-website.is-needed { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.bl-contact__form .bl-contact__send { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.bl-contact__privacy { max-width: 300px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--t-medium); }
.bl-contact__privacy a { color: var(--accent-text); }
.bl-contact__sent { min-height: 520px; margin: 0 !important; padding: 0 !important; text-align: left; }
.bl-contact__sent:not([style*="none"]) { display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.bl-contact__sent-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 15%, transparent); }
main .bl-contactx__form .bl-contact__sent h2.reply__title { margin: 0; font-size: 32px !important; line-height: 1.1; letter-spacing: -.025em; color: var(--t-bright); }
.bl-contact__sent .reply__text { max-width: 420px; margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--t-medium); }
.bl-contact__sent-sum { margin: 0; font-size: 14px; color: var(--t-medium); }
.bl-contact__again { margin-top: 8px; padding: 11px 20px; border: 1px solid color-mix(in srgb, var(--t-bright) 18%, transparent); border-radius: 999px; background: none; color: var(--t-bright); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; }
.bl-contact__again:hover { border-color: var(--accent); }
.bl-contact__again:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media only screen and (max-width: 767px) { .bl-contact__sent { min-height: 360px; } }

/* B84 (2026-11-04): error pages (404, 403, 401, 500) moved to the redesign's page hero
   (theme/components/error-body.php). No mock; reuses .bl-phero and adds the large code
   numeral and a "Useful pages" list. */
.bl-phero--error { padding-bottom: 56px; }
.bl-phero--error .bl-phero__inner { align-items: end; }
.bl-err__code { margin: 0 0 -8px; font: 500 clamp(72px, 12vw, 160px)/.9 var(--_font-mono); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 55%, var(--t-bright)); }
.bl-err { padding: 0 0 112px; }
.bl-err__inner { max-width: var(--bl-site); margin: 0 auto; padding-inline: var(--bl-gutter); }
.bl-err__links { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid color-mix(in srgb, var(--t-bright) 12%, transparent); border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--t-bright) 12%, transparent); }
@media only screen and (min-width: 768px) { .bl-err__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (min-width: 1200px) { .bl-err__links { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media only screen and (min-width: 768px) and (max-width: 1199px) { .bl-err__links li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.bl-err__links li { display: flex; background: var(--base); }
.bl-err__links a { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; width: 100%; padding: 22px 24px; color: var(--t-bright); text-decoration: none; transition: background-color .2s; }
.bl-err__links a:hover { background: color-mix(in srgb, var(--accent) 7%, var(--base)); }
.bl-err__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bl-err__name { font-size: 17px; font-weight: 500; line-height: 1.3; }
.bl-err__sub { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--t-medium); }
.bl-err__links svg { grid-column: 2; grid-row: 1 / span 2; color: var(--accent-text); transition: transform .2s; }
.bl-err__links a:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .bl-err__links a, .bl-err__links svg { transition: none; } }
main .bl-err h2.bl-err__title { margin: 0 0 20px; font: 500 12px/1.2 var(--_font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--t-medium); }

/* B85 (2026-11-04): blog "Start here" to the mock "Blog Page" (#featured): mono label, lead card
   with a blue border and the Bones content-model panel, the other five in one bordered list.
   Overrides the batch-6 .bl-blog-start rules above. */
main .db-block h2.bl-blog-start__label { margin: 0 0 20px; font: 500 11px/1.2 var(--_font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--t-medium); }
.bl-blog-start { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 880px) { .bl-blog-start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; } }
.bl-blog-start__lead { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--t-bright) 3%, var(--base)); color: inherit; text-decoration: none; transition: border-color .2s; }
.bl-blog-start__lead:hover { border-color: var(--accent); }
.bl-blog-start__lead:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bl-blog-start__art { display: flex; align-items: center; justify-content: center; min-height: 230px; padding: 24px; background: radial-gradient(80% 80% at 30% 20%, color-mix(in srgb, var(--accent) 22%, var(--base)), var(--base) 70%); }
.bl-blog-start__art img { width: 100%; max-width: 440px; height: auto; border-radius: 14px; }
.bl-blog-start__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 32px); }
.bl-blog-start .bl-blog-start__k { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-medium); }
.bl-blog-start__date { color: var(--accent-text); white-space: nowrap; }
main .bl-blog-start h3.bl-blog-start__title { margin: 0; font-size: clamp(24px, 2.6vw, 30px) !important; font-weight: 600; line-height: 1.15 !important; letter-spacing: -.025em; color: var(--t-bright); }
.bl-blog-start__ex { margin: 0; max-width: var(--bl-measure, 64ch); font-size: 15.5px; line-height: 1.55; color: var(--t-medium); }
.bl-blog-start__list { display: flex; flex-direction: column; min-width: 0; border: 1px solid color-mix(in srgb, var(--t-bright) 8%, transparent); border-radius: 24px; overflow: hidden; }
.bl-blog-start__list li { flex: 1; display: flex; border-bottom: 1px solid color-mix(in srgb, var(--t-bright) 7%, transparent); }
.bl-blog-start__list li:last-child { border-bottom: 0; }
.bl-blog-start__list a { flex: 1; justify-content: center; gap: 6px; padding: 18px 22px; }
.bl-blog-start__list a:hover { background: color-mix(in srgb, var(--t-bright) 2%, transparent); }
.bl-blog-start__list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bl-blog-start__list .bl-blog-start__k { font-size: 10px; letter-spacing: .12em; }
.bl-blog-start__list b { font-size: 16px; line-height: 1.35; }
.no-touch .bl-blog-start__list a:hover b, .bl-blog-start__list a:focus-visible b { text-decoration: none; }
/* Content-model panel (mock drawing) */
.bl-cm { width: 100%; max-width: 440px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, #000 25%, var(--base)); border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); }
.bl-cm__bar { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--t-bright) 7%, transparent); font-size: 12px; line-height: 1.5; color: var(--t-medium); }
.bl-cm__bar b { font-weight: 500; color: var(--t-bright); }
.bl-cm__bar .is-on { padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--t-bright); }
.bl-cm__body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bl-cm__types { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-cm__types span { padding: 6px 11px; border-radius: 8px; background: color-mix(in srgb, var(--t-bright) 5%, var(--base)); font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--t-medium); }
.bl-cm__types .is-on { background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid var(--accent); padding: 5px 10px; color: var(--t-bright); }
.bl-cm__flow { display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr; align-items: center; }
.bl-cm__flow span { padding: 6px 0; border-radius: 7px; text-align: center; font-size: 11px; line-height: 1.3; }
.bl-cm__flow i { height: 1px; background: color-mix(in srgb, var(--accent-text) 40%, transparent); }
.bl-cm__draft { border: 1px dashed color-mix(in srgb, var(--t-bright) 20%, transparent); color: var(--t-medium); }
.bl-cm__review { border: 1px solid color-mix(in srgb, var(--accent-text) 40%, transparent); color: var(--t-bright); }
.bl-cm__pub { background: var(--accent); color: #fff; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .bl-blog-start__lead { transition: none; } }
:root:not([data-theme="dark"]) .bl-cm { background: var(--base-tint); }

/* B86 (2026-11-04): blog archive to the mock "Blog Page" (#all) and the hero meta dot. */
.bl-phero--blog .bl-phero__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; color: var(--t-medium); }
.bl-phero--blog .bl-phero__meta::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bl-blog-arch { padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); }
.bl-blog-arch__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.bl-blog-arch__head .bl-home-kicker { margin: 0 0 16px; }
main .db-block h2.bl-blog-arch__title { margin: 0; font-size: clamp(32px, 4vw, 48px) !important; font-weight: 600; line-height: 1.05 !important; letter-spacing: -.035em; }
.bl-blog-arch__count { margin: 0; font: 500 12px/1.4 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-medium); }
.bl-blog-bar { position: sticky; top: var(--bl-bar-top, 0px); z-index: 10; display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 14px 0; background: color-mix(in srgb, var(--base) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bl-blog-bar .bl-blog-tools { gap: 10px; margin: 0; }
.bl-blog-tools__q { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--t-bright) 3%, var(--base)); border: 1px solid color-mix(in srgb, var(--t-bright) 12%, transparent); color: var(--t-medium); }
.bl-blog-tools__q:focus-within { border-color: var(--accent); }
.bl-blog-bar .bl-blog-tools input { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--t-bright); font-size: 15px; }
.bl-blog-bar .bl-blog-tools input:focus-visible { outline: none; }
.bl-blog-bar .bl-blog-sort { padding: 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); background: color-mix(in srgb, var(--t-bright) 3%, var(--base)); }
.bl-blog-bar .bl-blog-sort button { min-height: 36px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--t-medium); }
.bl-blog-bar .bl-blog-sort button + button { border-left: 0; }
.bl-blog-bar .bl-blog-sort button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 500; }
.bl-blog-bar .bl-blog-sort button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-blog-bar .bl-cases__filters { gap: 6px; }
.bl-blog-bar .bl-cases__chip { flex: none; padding: 7px 13px; border-color: color-mix(in srgb, var(--t-bright) 14%, transparent); background: transparent; font-size: 13px; font-weight: 400; color: var(--t-medium); }
.bl-blog-bar .bl-cases__chip span { font-size: 11px; font-weight: 400; }
.bl-blog-bar .bl-cases__chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
/* Text cards */
.bl-bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.bl-bcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: color-mix(in srgb, var(--t-bright) 3%, var(--base)); border: 1px solid color-mix(in srgb, var(--t-bright) 8%, transparent); color: inherit; text-decoration: none; transition: border-color .2s; }
.bl-bcard[hidden] { display: none; }
.bl-bcard:hover { border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.bl-bcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bl-bcard__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: color-mix(in srgb, #000 12%, var(--base)); border-bottom: 1px solid color-mix(in srgb, var(--t-bright) 6%, transparent); }
.bl-bcard__k { min-width: 0; overflow: hidden; padding: 5px 10px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font: 500 11.5px/1.3 var(--_font-mono); color: var(--accent-text); white-space: nowrap; text-overflow: ellipsis; }
.bl-bcard__new { flex: none; font: 500 10px/1 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-bcard__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px; }
.bl-bcard__meta { font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-medium); }
main .bl-bcard h3.bl-bcard__title { margin: 0; font-size: 17.5px !important; font-weight: 600; line-height: 1.3 !important; letter-spacing: -.01em; color: var(--t-bright); }
.bl-bcard__desc { font-size: 14px; line-height: 1.55; color: var(--t-medium); }
.bl-bcard__date { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--t-medium); }
:root:not([data-theme="dark"]) .bl-bcard__head { background: color-mix(in srgb, var(--t-bright) 3%, var(--base)); }
:root:not([data-theme="dark"]) .bl-bcard { background: var(--base-tint); }
/* Show more, clear filters, no results */
.bl-blog-pill { padding: 13px 26px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--t-bright) 18%, transparent); background: transparent; color: var(--t-bright); font: 500 15px/1 var(--_font-default); cursor: pointer; }
.bl-blog-pill:hover { border-color: var(--accent); }
.bl-blog-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-blog-pill span { font: 400 12px/1 var(--_font-mono); color: var(--t-medium); }
.bl-blog-arch .bl-blog-none:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--accent-text) 35%, transparent); text-align: left; }
.bl-blog-arch .bl-blog-none p { margin: 0; font-size: 18px; font-weight: 600; color: var(--t-bright); }
.bl-blog-arch .bl-blog-pill[data-posts-reset] { padding: 10px 18px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .bl-bcard { transition: none; } }
.bl-blog-bar .bl-cases__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding: 6px; margin: -6px; }
.bl-blog-bar .bl-cases__filters::-webkit-scrollbar { display: none; }

/* B87 (2026-11-04, Owner screenshot): blog hero with a stats line and a "Browse by topic" panel. */
.bl-phero--blog { position: relative; overflow: hidden; background: radial-gradient(55% 70% at 85% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.bl-phero--blog::before { content: ""; position: absolute; inset: 0 0 0 45%; background-image: linear-gradient(color-mix(in srgb, var(--t-bright) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--t-bright) 4%, transparent) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); pointer-events: none; }
.bl-phero--blog .bl-phero__inner { position: relative; align-items: center; }
@media only screen and (min-width: 960px) { .bl-phero--blog .bl-phero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; } }
.bl-phero--blog .bl-phero__main { gap: 24px; }
.bl-phero--blog .bl-phero__main .bl-home-kicker { margin: 0; }
.bl-phero--blog .bl-phero__lead { max-width: 560px; }
.bl-blog-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0; font: 500 12px/1.4 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-medium); }
.bl-blog-stats b { font-weight: 500; color: var(--t-bright); }
.bl-blog-stats span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.bl-blog-stats span:first-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bl-topics { border-radius: 24px; overflow: hidden; background: color-mix(in srgb, var(--t-bright) 3%, var(--base)); border: 1px solid color-mix(in srgb, var(--t-bright) 9%, transparent); box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent); }
:root:not([data-theme="dark"]) .bl-topics { background: var(--base-tint); }
.bl-topics__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px clamp(20px, 2.4vw, 30px); border-bottom: 1px solid color-mix(in srgb, var(--t-bright) 8%, transparent); }
main .bl-topics h2.bl-topics__title { margin: 0; font-size: 18px !important; font-weight: 600; line-height: 1.3 !important; letter-spacing: -.01em; }
.bl-topics__head > span { font: 500 11px/1 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-medium); }
.bl-topics__list { margin: 0; padding: 8px 0; list-style: none; }
.bl-topics__list a { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 10px clamp(20px, 2.4vw, 30px); color: var(--t-bright); text-decoration: none; }
.bl-topics__list a:hover { background: color-mix(in srgb, var(--t-bright) 3%, transparent); }
.bl-topics__list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bl-topics__name { grid-column: 1; font-size: 15px; font-weight: 500; line-height: 1.3; }
.bl-topics__bar { grid-column: 1; grid-row: 2; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--t-bright) 8%, transparent); overflow: hidden; }
.bl-topics__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.bl-topics__list li:nth-child(n+4) .bl-topics__bar i { background: color-mix(in srgb, var(--accent) 75%, var(--base)); }
.bl-topics__list li:nth-child(n+8) .bl-topics__bar i { background: color-mix(in srgb, var(--accent) 55%, var(--base)); }
.bl-topics__n { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font: 500 13px/1 var(--_font-mono); color: var(--t-bright); }
.no-touch .bl-topics__list a:hover .bl-topics__name { color: var(--accent-text); }
@media only screen and (max-width: 959px) { .bl-phero--blog::before { display: none; } .bl-phero--blog { background: radial-gradient(90% 40% at 80% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); } }

/* B89 (2026-11-04, Owner: "the gap … is too big from where the content finishes"): the article
   lists at the foot of pages (Latest articles, Related insights, Continue reading) sat 117–248px
   below the last content, from this wrapper's 96px top padding plus the previous section's 120px
   bottom padding. After a padded section the wrapper adds no top padding and that section ends shorter;
   elsewhere (blog posts) the wrapper keeps a smaller top padding. */
.bl-alist-wrap { padding-top: clamp(48px, 5vw, 72px); }
:is(.db-section.padding-default, :has(> .db-section.padding-default:nth-last-child(1 of :not(script, style)))) + .bl-alist-wrap { padding-top: 0; }
.db-section.padding-default:has(+ .bl-alist-wrap),
:has(+ .bl-alist-wrap) > .db-section.padding-default:nth-last-child(1 of :not(script, style)) { padding-bottom: clamp(56px, 6vw, 80px) !important; }
.db-section.padding-default + script + .bl-alist-wrap { padding-top: 0; } .db-section.padding-default:has(+ script + .bl-alist-wrap) { padding-bottom: clamp(56px, 6vw, 80px) !important; }

/* B90 (2026-11-04, Owner): every side-by-side step list uses the Structural Strategy stepper (.bl-ssp,
   svc_stepper in theme/components/service-sections.php). --c-md / --c-lg: steps in view at 768+ / 1200+;
   more than that scroll sideways with the arrows. With an end step, it stays fixed in its own column. */
.bl-ssp--gen { gap: 20px; margin-top: 8px; }
.bl-ssp--gen .bl-ssp__nav { margin-top: 0; }
@media (min-width: 768px) {
  .bl-ssp--gen .bl-ssp__list { grid-auto-columns: calc((100% - (var(--c-md) - 1) * 12px) / var(--c-md)); }
  .bl-ssp--gen:not(.bl-ssp--end) .bl-ssp__row { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .bl-ssp--gen .bl-ssp__list { grid-auto-columns: calc((100% - (var(--c-lg) - 1) * 12px) / var(--c-lg)); }
  .bl-ssp--gen.bl-ssp--end .bl-ssp__row { grid-template-columns: repeat(calc(var(--c-lg) + 1), minmax(0, 1fr)); }
  .bl-ssp--gen.bl-ssp--end .bl-ssp__track { grid-column: 1 / -2; }
  .bl-ssp--gen:not(.bl-ssp--end) .bl-ssp__row { grid-template-columns: minmax(0, 1fr); }
  .bl-ssp--gen:not(.bl-ssp--end) .bl-ssp__track { grid-column: auto; }
}
.bl-ssp--gen .bl-ssp__step p a, .bl-ssp--gen .bl-ssp__end p a { color: var(--t-bright); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* B91 (Owner 2026-11-04: "ensure this strip db-section bl-proof-wrap - is always in the same height on all
   pages web-design.html page is correct"): the facts strips under the other service heroes follow the B60
   web design layout. The hero stops stretching to the screen height at 1200px and up, the strip follows it
   with no extra top padding, and the strip is at least as tall as the web design one (120px). */
@media (min-width: 1200px) { /* QA B91 S2: below 1200 these heroes keep their own height, as web-design does */
  :is(#web-development-hero, #ai-visibility-audit-hero, #prototyping-hero, #software-engineering-hero, #workshops-hero) { padding-bottom: 0 !important; }
  :is(#web-development-hero, #ai-visibility-audit-hero, #prototyping-hero, #software-engineering-hero, #workshops-hero) .db-hero-09__wrap { min-height: 0 !important; padding-bottom: 40px !important; }
  :is(.bl-wdev-facts, .bl-sg-facts) { min-height: 120px; }
}
html body .db-section.padding-default:is(.bl-wdev-facts-wrap, .bl-se-facts-wrap) { padding-top: 0 !important; }
:is(.bl-wdev-facts-wrap, .bl-se-facts-wrap) > .db-container { box-sizing: border-box; max-width: var(--bl-site); margin-inline: auto; padding-inline: var(--bl-gutter, 32px); }
:is(.bl-wdev-facts-wrap, .bl-se-facts-wrap) .bl-sg-facts { margin-top: 0; border-radius: 16px; }

/* B92 (Owner 2026-11-04: header and bar hide is "clunky", gap when scrolling fast): on pages with the
   On this page bar, the header and bar follow the scroll position (theme/core/site-header.php sets the transform
   each frame), so they have no timed transform transition. The bar keeps its fade-in. */
html.bl-hdr-linked header.db-header.bl-hdr { transition: none !important; }
html.bl-hdr-linked nav.bl-toc { transition: opacity .5s ease !important; }

/* B93 (Owner 2026-11-04: the header should reappear "with a little animation with a slight delay"):
   set by theme/core/site-header.php while the header comes back; header and bar use the same curve, so they
   stay joined. Scrolling down keeps the B92 direct link. */
html.bl-hdr-linked.bl-hdr-rev header.db-header.bl-hdr { transition: transform .42s cubic-bezier(.22, .61, .36, 1) .08s !important; }
html.bl-hdr-linked.bl-hdr-rev nav.bl-toc { transition: transform .42s cubic-bezier(.22, .61, .36, 1) .08s, opacity .5s ease !important; }
@media (prefers-reduced-motion: reduce) { html.bl-hdr-linked.bl-hdr-rev header.db-header.bl-hdr, html.bl-hdr-linked.bl-hdr-rev nav.bl-toc { transition: none !important; } }

/* B94 (Owner 2026-11-04: "make it easier for users to find us on github, email and call"): call, email and
   GitHub icon links before "Talk to us" in the header bar (1100px and up), labelled buttons in the phone
   menu, a GitHub card in the footer contact row and on the contact page. */
.bl-hdr__reach { display: none; }
@media (min-width: 1100px) {
  .bl-hdr__reach { display: flex; align-items: center; gap: 2px; margin-right: -8px; }
  .bl-hdr__reach a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: var(--hdr-t3); text-decoration: none; transition: color .12s ease, background-color .12s ease; }
  .bl-hdr__reach a:hover { color: var(--hdr-t1); background: var(--hdr-hover); }
  .bl-hdr__reach a:focus-visible { outline: 2px solid var(--hdr-acc-t); outline-offset: 1px; color: var(--hdr-t1); }
}
.bl-hdr__mreach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: -10px; }
.bl-hdr__mreach a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1px solid var(--hdr-line); border-radius: 999px; color: var(--hdr-t1) !important; font: 500 15px/1 var(--_font-accent); text-decoration: none; }
.bl-hdr__mreach a:focus-visible { outline: 2px solid var(--hdr-acc-t); outline-offset: 2px; }
.bl-hdr__mreach svg { flex: none; color: var(--hdr-t3); }

/* B96 (Owner 2026-11-04, design update): two contact links (call, GitHub); in the phone menu they sit above
   "Talk to us", so the B94 negative top margin no longer applies. */
.bl-hdr__mreach { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

/* B97 (Owner 2026-11-04: contact page, "ensure form always ends nice and even"): side by side (1100px and
   up) the form card and the details column share one height, so their bottom edges line up. Any extra space
   is shared between the rows of the shorter column instead of collecting under it. */
@media only screen and (min-width: 1100px) {
  .bl-contactx { align-items: stretch; }
  .bl-contactx__info { align-content: space-between; }
  .bl-contactx__form { display: flex; flex-direction: column; }
  .bl-contactx__form .bl-contact__card { flex: 1 1 auto; display: flex; flex-direction: column; }
  .bl-contactx__form .form-container { flex: 1 1 auto; display: flex; flex-direction: column; }
  .bl-contactx__form .bl-contact__form { flex: 1 1 auto; align-content: space-between; }
  .bl-contactx__form .form-container.is-success { justify-content: center; }
}

/* B99 (Owner 2026-11-04: blog posts, "the content should align with CTA"): the post uses the site width,
   so the hero, the contents column, the article blocks (FAQ, previous/next, author) and "Continue reading"
   line up with the logo and "Talk to us" edges, as the other pages do. Running text keeps the site's 64ch
   reading measure (--bl-measure). */
main.bl-post--b81 .bl-post-doc,
main.bl-post--b81 .bl-alist-wrap .bl-alist__head, main.bl-post--b81 .bl-alist-wrap .bl-alist { max-width: none; }
main.bl-post--b81 .bl-post-main { max-width: none; }
main.bl-post--b81 .bl-post__body .db-article__block > p, main.bl-post--b81 .bl-post__body .db-article__block > ul,
main.bl-post--b81 .bl-post__body .db-article__block > ol, main.bl-post--b81 .bl-post__body .db-article__block > blockquote { max-width: var(--bl-measure, 64ch); } /* no " :is(" after a descendant space: the bundler drops the space */
@media (max-width: 1023px) { main.bl-post--b81 .bl-post-side { max-width: none; } }
@media (min-width: 1024px) {
  main.bl-post--b81 .bl-post-layout { grid-template-columns: 220px minmax(0, 1fr); justify-content: stretch; column-gap: 64px; }
  main.bl-post--b81 .bl-post-layout--single { grid-template-columns: minmax(0, 1fr); }
}

/* B100 (Owner 2026-11-04, design update): footer sign-off. Logo 32px (small-size E), a thin divider and
   "Web and platform company · London · Since 2019" in small mono, with more space before the statement. */
.bl-ft__sign { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 12px; }
.bl-ft__sign .bl-ft__logo img { height: 32px; width: auto; }
.bl-ft__sign-t { padding-left: 18px; border-left: 1px solid var(--ft-line-2); font: 500 11px/1.4 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ft-muted); }
@media (min-width: 576px) { .bl-ft__sign { flex-wrap: nowrap; } .bl-ft__sign-t { text-wrap: balance; } }
@media (max-width: 575px) { .bl-ft__sign .bl-ft__logo img { height: 28px; } .bl-ft__sign-t { flex-basis: 100%; padding-left: 0; border-left: 0; letter-spacing: .08em; text-wrap: balance; } }

/* B101 (Owner 2026-11-04, design update for the Web Design FAQ, applied to every page using
   theme/components/faq.php): numbered question cards with a topic label; the open card has a deeper
   background, a blue outline and a filled blue "−" button, closed cards an outlined "+"; answers can end
   with a next-step link; the left column stays in view and ends with a "Still have a question?" card.
   Scoped to .bl-faq--cards so the FAQ page and blog posts keep their own styles. */
.bl-faq.bl-faq--cards .bl-faq__list { gap: 10px; border-top: 0; }
.bl-faq.bl-faq--cards .bl-faq__item { border: 1px solid var(--bl-line); border-radius: 16px; background: var(--base-tint); box-shadow: none; transition: border-color .2s ease, background-color .2s ease; }
.bl-faq.bl-faq--cards .bl-faq__item[open] { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--base)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.no-touch .bl-faq.bl-faq--cards .bl-faq__item:not([open]):hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--bl-line)); }
.bl-faq.bl-faq--cards .bl-faq__q { align-items: flex-start; gap: 20px; padding: 20px 22px; }
.bl-faq.bl-faq--cards .bl-faq__q:focus-visible { border-radius: 16px; outline-offset: 2px; }
.bl-faq--cards .bl-faq__qt { display: grid; gap: 8px; min-width: 0; }
.bl-faq--cards .bl-faq__meta { display: flex; align-items: center; gap: 10px; font: 500 11px/1.2 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-faq--cards .bl-faq__n { color: var(--accent-text); }
.bl-faq--cards .bl-faq__topic { display: inline-flex; align-items: center; gap: 10px; }
.bl-faq--cards .bl-faq__topic::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .6; }
main .bl-faq.bl-faq--cards .bl-faq__q h3 { font: 500 18px/1.4 var(--_font-default) !important; letter-spacing: -.005em; color: var(--t-bright); }
.bl-faq.bl-faq--cards .bl-faq__icon, .bl-faq.bl-faq--cards .bl-faq__item[open] .bl-faq__icon { flex: 0 0 32px; width: 32px; height: 32px; margin-top: 2px; border: 1px solid var(--bl-line); border-radius: 50%; background: transparent; transform: none; }
.bl-faq.bl-faq--cards .bl-faq__icon::before, .bl-faq.bl-faq--cards .bl-faq__icon::after { width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--t-bright); }
.bl-faq.bl-faq--cards .bl-faq__icon::after { transform: rotate(90deg); }
.bl-faq.bl-faq--cards .bl-faq__item[open] .bl-faq__icon { border-color: var(--accent); background: var(--accent); }
.bl-faq.bl-faq--cards .bl-faq__item[open] .bl-faq__icon::before { background: #fff; }
.bl-faq.bl-faq--cards .bl-faq__item[open] .bl-faq__icon::after { transform: rotate(90deg) scaleX(0); }
.bl-faq.bl-faq--cards .bl-faq__a { display: grid; justify-items: start; gap: 14px; padding: 0 22px 22px; }
.bl-faq.bl-faq--cards .bl-faq__a p { max-width: 62ch; font-size: 16px; line-height: 1.6; }
.bl-faq--cards .bl-faq__next { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--accent-text); text-decoration: none; }
.bl-faq--cards .bl-faq__next:hover svg { transform: translateX(3px); }
.bl-faq--cards .bl-faq__next svg { transition: transform .15s ease; }
.bl-faq--cards .bl-faq__ask { display: grid; gap: 4px; width: 100%; max-width: 420px; margin-top: 8px; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bl-line)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)); }
.bl-faq--cards .bl-faq__ask-t { margin: 0; font: 600 19px/1.3 var(--_font-default); color: var(--t-bright); }
.bl-faq--cards .bl-faq__ask-s { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-medium); }
.bl-faq--cards .bl-faq__ask-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bl-faq.bl-faq--cards .bl-faq__head .bl-faq__call { gap: 8px; background: transparent; }
@media only screen and (min-width: 992px) {
  main .bl-faq.bl-faq--cards { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; }
  .bl-faq.bl-faq--cards .bl-faq__head { position: sticky; top: calc(var(--bl-hdr-h, 72px) + 32px); align-self: start; }
}
@media only screen and (max-width: 575px) {
  .bl-faq.bl-faq--cards .bl-faq__q { padding: 18px; }
  .bl-faq.bl-faq--cards .bl-faq__a { padding: 0 18px 18px; }
  .bl-faq--cards .bl-faq__ask { padding: 18px; }
}
.bl-faq.bl-faq--cards .bl-faq__head .bl-home-hero__btn--primary { background: var(--bl-primary, #2563ff); border-color: transparent; color: #fff; }
.bl-faq.bl-faq--cards .bl-faq__head .bl-home-hero__btn--primary:hover { background: var(--bl-primary-hover, #1f4fe0); }

/* B102 (Owner 2026-11-04): legal "Back to contents" links. From 1200px the contents list is
   sticky beside the text, so the 18 repeated links are hidden there; below 1200 they stay. */
@media (min-width: 1200px) { .bl-legal [id^="chapter-"] > .bl-legal__top { display: none !important; } }
/* B103 (2026-11-04): footer sign-up message. An older generic .form__reply rule positions it
   absolutely, so on success it covered the "Insights by email" heading; keep it in the card's flow. */
.bl-ft__news .form__reply { position: static !important; transform: none !important; }

/* ----------------------------------------------------------------
   B104 + B107 floating dock (Owner 2026-11-04). B107 aligns it with
   designWork/Area Redesign Options/Floating Nav.dc.html: dark values are the file's; light mirrors them.
   Markup and script: theme/core/site-header.php.
---------------------------------------------------------------- */
:root {
  --dk-bg: rgba(255, 255, 255, .86); --dk-line: rgba(37, 99, 255, .22); --dk-sep: rgba(10, 11, 15, .12);
  --dk-t: #4b5263; --dk-t-on: #0a0b0f; --dk-sheet: rgba(255, 255, 255, .97); --dk-card: #f4f6fa; --dk-card-line: rgba(10, 11, 15, .08);
  --dk-more: #1d2230; --dk-more-hover: rgba(37, 99, 255, .1); --dk-go: #8b93a7; --dk-muted: #5d6475; --dk-k: #1d4fd8;
  --dk-tip-bg: #0a0b0f; --dk-tip-t: #fff; --dk-scrim: rgba(10, 11, 15, .28); --dk-outline: rgba(10, 11, 15, .16);
  --dk-shadow: 0 24px 60px -20px rgba(10, 11, 15, .35), 0 0 0 1px rgba(10, 11, 15, .04), inset 0 1px 0 rgba(255, 255, 255, .6);
  --dk-h: 60px; --dk-h-s: 52px; --dk-bottom: 24px; --dk-bottom-s: 14px;
  --bl-dock-space: calc(var(--dk-h) + var(--dk-bottom) * 2);
}
:root[data-theme="dark"] {
  --dk-bg: rgba(17, 19, 25, .82); --dk-line: rgba(157, 182, 255, .22); --dk-sep: rgba(255, 255, 255, .12);
  --dk-t: #a3a9b8; --dk-t-on: #fff; --dk-sheet: rgba(17, 19, 25, .96); --dk-card: #0d0f14; --dk-card-line: rgba(255, 255, 255, .08);
  --dk-more: #e8eaf0; --dk-more-hover: rgba(37, 99, 255, .12); --dk-go: #5d6475; --dk-muted: #8b93a7; --dk-k: #9db6ff;
  --dk-tip-bg: #f7f8fb; --dk-tip-t: #0a0b0f; --dk-scrim: rgba(5, 6, 9, .55); --dk-outline: rgba(255, 255, 255, .16);
  --dk-shadow: 0 24px 60px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@media (max-width: 759px) { :root { --dk-bottom: 12px; --dk-bottom-s: 12px; } }

/* Top rail: scrolls with the page (design: position absolute, 84px tall in the mock; kept at the site's header height). */
header.db-header.bl-hdr.bl-hdr--dock { position: absolute !important; background: transparent !important; border-bottom: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; }
.bl-hdr--dock .bl-hdr__bar { gap: 18px; }
.bl-hdr--dock .bl-hdr__logo { flex: none; transition: opacity .35s ease, transform .35s ease; }
html.bl-dock-scrolled .bl-hdr--dock .bl-hdr__logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.bl-rail__line { flex: 1; min-width: 24px; height: 1px; background: repeating-linear-gradient(90deg, rgba(37, 99, 255, .35) 0 4px, transparent 4px 9px); }
:root[data-theme="dark"] .bl-rail__line { background: repeating-linear-gradient(90deg, rgba(157, 182, 255, .35) 0 4px, transparent 4px 9px); }
.bl-rail__live, .bl-rail__meta { flex: none; display: flex; align-items: center; gap: 8px; font: 500 11px var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bl-rail__live { color: var(--dk-k); }
.bl-rail__live i { width: 6px; height: 6px; border-radius: 50%; background: #2563ff; box-shadow: 0 0 8px #2563ff; }
.bl-rail__meta { gap: 18px; color: var(--dk-muted); }
.bl-rail__meta i { width: 1px; height: 14px; background: var(--dk-sep); }
@media (max-width: 759px) { .bl-rail__meta { display: none; } }

body { padding-bottom: var(--bl-dock-space); }
.bl-price__bar { bottom: calc(var(--bl-dock-space) - 8px) !important; }

/* Dock */
.bl-dock { position: fixed; left: 0; right: 0; bottom: max(var(--dk-bottom), env(safe-area-inset-bottom)); z-index: 103; display: flex; justify-content: center; padding: 0 10px; pointer-events: none; transition: bottom .35s cubic-bezier(.2, .8, .2, 1); font-family: var(--_font-accent); }
.bl-dock.is-compact { bottom: max(var(--dk-bottom-s), env(safe-area-inset-bottom)); }
.bl-dock__bar { position: relative; display: flex; align-items: center; gap: 4px; height: var(--dk-h); padding: 6px; border-radius: 999px; background: var(--dk-bg); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--dk-line); box-shadow: var(--dk-shadow); box-sizing: border-box; pointer-events: auto; transition: height .3s ease; }
.bl-dock.is-compact .bl-dock__bar { height: var(--dk-h-s); }
.bl-dock__ind { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; border-radius: 999px; background: rgba(37, 99, 255, .2); border: 1px solid rgba(37, 99, 255, .55); box-sizing: border-box; opacity: 0; pointer-events: none; transition: left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
:root:not([data-theme="dark"]) .bl-dock__ind { background: rgba(37, 99, 255, .12); border-color: rgba(37, 99, 255, .45); }
.bl-dock__item { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-width: 0; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--dk-t); font: 500 14px/1 var(--_font-accent); white-space: nowrap; text-decoration: none; cursor: pointer; transition: color .2s, padding .3s; }
.bl-dock__item svg { flex: none; }
.bl-dock__item.is-on, .bl-dock__item[aria-expanded="true"] { color: var(--dk-t-on); }
.bl-dock__caret { transform: rotate(180deg); transition: transform .25s; }
.bl-dock__svc[aria-expanded="true"] .bl-dock__caret { transform: rotate(0deg); }
.bl-dock__tip { display: none; position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); padding: 6px 11px; border-radius: 9px; background: var(--dk-tip-bg); color: var(--dk-tip-t); font: 500 12.5px/1.2 var(--_font-accent); white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7); pointer-events: none; }
.bl-dock__tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--dk-tip-bg); }
.bl-dock__sep { flex: none; width: 1px; height: 28px; margin: 0 4px; background: var(--dk-sep); }
.bl-dock__sep--logo { margin: 0 4px 0 2px; }
.bl-dock__menu { display: none; }
.bl-dock__cta { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-width: 0; padding: 0 18px; border-radius: 999px; background: #2563ff; color: #fff !important; font: 500 14px/1 var(--_font-accent); white-space: nowrap; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(37, 99, 255, .9); transition: padding .3s, background .2s; }
.bl-dock__cta:hover { background: #3b74ff; }
/* Logo inside the dock: only once the page has scrolled past 90px (and always on phones). */
.bl-dock__logo, .bl-dock__sep--logo { display: none; }
.bl-dock__logo { position: relative; z-index: 1; flex: none; align-items: center; height: 100%; padding: 0 14px 0 16px; border-radius: 999px; text-decoration: none; }
.bl-dock__logo:hover { background: rgba(127, 127, 127, .06); }
.bl-dock__logo-mark { display: none; }
.bl-dock__logo .bl-logo { height: 20px; }
html.bl-dock-scrolled .bl-dock__logo { display: flex; }
html.bl-dock-scrolled .bl-dock__sep--logo { display: block; }
/* Compact pill (and phones): icons only, tooltips on hover, a dot under the current page. */
.bl-dock.is-compact .bl-dock__t, .bl-dock.is-compact .bl-dock__caret { display: none; }
.bl-dock.is-compact .bl-dock__item, .bl-dock.is-compact .bl-dock__cta { padding: 0; min-width: 44px; }
.bl-dock.is-compact .bl-dock__logo { padding: 0; }
.bl-dock.is-compact .bl-dock__logo-full { display: none; }
.bl-dock.is-compact .bl-dock__logo-mark { display: block; }
.bl-dock.is-compact .bl-dock__logo-mark .bl-logo { width: 38px; height: 38px; }
.bl-dock.is-compact:not(.is-open) .bl-dock__item:hover .bl-dock__tip, .bl-dock.is-compact:not(.is-open) .bl-dock__item:focus-visible .bl-dock__tip { display: block; }
.bl-dock.is-compact .bl-dock__item.is-current:not(.bl-dock__menu)::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #9db6ff; }
:root:not([data-theme="dark"]) .bl-dock.is-compact .bl-dock__item.is-current::after { background: #2563ff; }

/* Sheets rise out of the dock. */
.bl-dock-scrim { position: fixed; inset: 0; z-index: 102; background: var(--dk-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bl-dock-scrim[hidden], .bl-dock__sheet[hidden] { display: none !important; }
.bl-dock__sheet { position: absolute; bottom: calc(100% + 10px); left: 50%; width: min(720px, calc(100vw - 20px)); margin-left: calc(min(720px, calc(100vw - 20px)) / -2); max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; border-radius: 26px; background: var(--dk-sheet); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--dk-line); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); pointer-events: auto; transform-origin: 50% 100%; animation: bl-dock-in .35s cubic-bezier(.2, .8, .2, 1); }
:root:not([data-theme="dark"]) .bl-dock__sheet { box-shadow: 0 30px 80px -24px rgba(10, 11, 15, .4); }
@keyframes bl-dock-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.bl-dock__sheet--svc { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.bl-dock__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bl-dock__title { font: 600 18px/1.2 var(--_font-accent); color: var(--dk-t-on); }
.bl-dock__all { font: 500 13.5px/1 var(--_font-accent); color: var(--dk-k) !important; text-decoration: none; }
.bl-dock__all:hover { color: var(--dk-t-on) !important; }
.bl-dock__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bl-dock__step { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--dk-card); border: 1px solid var(--dk-card-line); color: inherit !important; text-decoration: none; transition: border-color .2s; }
.bl-dock__step.is-feature { background: linear-gradient(180deg, rgba(37, 99, 255, .18), var(--dk-card)); border-color: rgba(37, 99, 255, .55); }
.bl-dock__step:hover, .bl-dock__step:focus-visible { border-color: #2563ff; }
.bl-dock__k { font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-k); }
.bl-dock__step strong { font: 600 15.5px/1.25 var(--_font-accent); color: var(--dk-t-on); }
.bl-dock__price { font: 400 12.5px/1.3 var(--_font-accent); color: var(--dk-muted); }
.bl-dock__more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; }
.bl-dock__more a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font: 500 14px/1.3 var(--_font-accent); color: var(--dk-more) !important; text-decoration: none; }
.bl-dock__more a:hover, .bl-dock__more a.is-current { background: var(--dk-more-hover); color: var(--dk-t-on) !important; }
.bl-dock__go { color: var(--dk-go); }
.bl-dock__sheet--menu { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.bl-dock__page { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: 14px; font: 600 18px/1.2 var(--_font-accent); color: var(--dk-t-on) !important; text-decoration: none; }
.bl-dock__page .bl-dock__go { color: var(--dk-k); }
.bl-dock__page:hover, .bl-dock__page.is-current { background: rgba(127, 127, 127, .07); }
.bl-dock__reach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid var(--dk-card-line); }
.bl-dock__reach a { height: 48px; border-radius: 999px; border: 1px solid var(--dk-outline); display: flex; align-items: center; justify-content: center; font: 500 14.5px/1 var(--_font-accent); color: var(--dk-t-on) !important; text-decoration: none; }
.bl-dock :focus-visible { outline: 2px solid #9db6ff; outline-offset: 2px; }
:root:not([data-theme="dark"]) .bl-dock :focus-visible { outline-color: #1f4fe0; }

/* Phones (under 760px): full width, logo tile, Services, Bones, Work, Menu, chat-icon CTA. */
@media (max-width: 759px) {
  .bl-dock__bar { width: 100%; justify-content: space-between; }
  .bl-dock__t, .bl-dock__caret { display: none; }
  .bl-dock__item, .bl-dock__cta { padding: 0; min-width: 52px; }
  .bl-dock__item--pricing, .bl-dock__item--insights, .bl-dock__item--about { display: none; }
  .bl-dock__menu { display: flex; }
  .bl-dock__logo { display: flex; padding: 0; }
  .bl-dock__sep--logo { display: block; }
  .bl-dock__logo-full { display: none; }
  .bl-dock__logo-mark { display: block; }
  .bl-dock .bl-dock__logo-mark .bl-logo { width: 44px; height: 44px; }
  .bl-dock.is-compact .bl-dock__logo-mark .bl-logo { width: 38px; height: 38px; }
  .bl-dock.is-compact .bl-dock__item, .bl-dock.is-compact .bl-dock__cta { min-width: 52px; }
  .bl-dock .bl-dock__item.is-current:not(.bl-dock__menu)::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #9db6ff; }
  :root:not([data-theme="dark"]) .bl-dock .bl-dock__item.is-current::after { background: #2563ff; }
  .bl-dock .bl-dock__tip { display: none !important; }
  .bl-dock__steps { grid-template-columns: 1fr; }
}
/* B107 fit: the labelled dock is 786px (913px with the logo), so between 760 and 959px it would run off
   screen (the design file overlaps there too). In that band it shows icons only, with tooltips. */
@media (min-width: 760px) and (max-width: 959px) {
  .bl-dock .bl-dock__t, .bl-dock .bl-dock__caret, .bl-dock .bl-dock__logo-full { display: none; }
  .bl-dock .bl-dock__item, .bl-dock .bl-dock__cta { padding: 0; min-width: 44px; }
  .bl-dock .bl-dock__logo { padding: 0; }
  .bl-dock .bl-dock__logo-mark { display: block; }
  .bl-dock .bl-dock__logo-mark .bl-logo { width: 44px; height: 44px; }
  .bl-dock:not(.is-open) .bl-dock__item:hover .bl-dock__tip, .bl-dock:not(.is-open) .bl-dock__item:focus-visible .bl-dock__tip { display: block; }
  .bl-dock .bl-dock__item.is-current:not(.bl-dock__menu)::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #9db6ff; }
  :root:not([data-theme="dark"]) .bl-dock .bl-dock__item.is-current::after { background: #2563ff; }
}
@media (prefers-reduced-motion: reduce) { .bl-dock, .bl-dock *, .bl-dock__sheet, .bl-hdr--dock .bl-hdr__logo { transition: none !important; animation: none !important; } }
@media print { .bl-dock, .bl-dock-scrim { display: none !important; } body { padding-bottom: 0; } }

/* B106 final logo {dbeta}● (theme/components/dbeta-logo.php, design "DBETA Logo Final"). */
.bl-logo { display: block; width: auto; overflow: visible; }
.bl-logo .bl-logo__b { fill: #2563ff; }
.bl-logo .bl-logo__n { fill: #0a0b0f; }
:root[data-theme="dark"] .bl-logo .bl-logo__b { fill: #5b8cff; }
:root[data-theme="dark"] .bl-logo .bl-logo__n { fill: #ffffff; }
.bl-hdr--dock .bl-hdr__bar .bl-hdr__logo .bl-logo { height: 26px; }
.bl-ft__sign .bl-ft__logo .bl-logo { height: 34px; }
@media (max-width: 575px) { .bl-ft__sign .bl-ft__logo .bl-logo { height: 28px; } }
@media print { .bl-logo .bl-logo__b { fill: #2563ff !important; } .bl-logo .bl-logo__n { fill: #0a0b0f !important; } }
.bl-toc__logo .bl-logo { height: 18px; } /* B106: {d} symbol replaces the favicon mark */
/* B108 (Owner 2026-11-04: the home illustration "should align more to the right so its inline with the
   top header and content"): the 620px drawing is scaled down, which left it short of the right edge;
   it now sits flush with the content edge (and the rail's "London · Since 2019"). */
.bl-home-hero--split .bl-flow { display: flex; justify-content: flex-end; justify-self: end; }

/* B109 (Owner 2026-11-04: "ensure this alignment is done on all pages"). Every split page hero ends its
   drawing on the content edge, as B108 does on the home page. Service heroes on the Digital Platform
   Engineering, Structural Strategy and Web Design pages kept a 24px stage inset and centred the drawing. */
/* Stacked (<1100): no side inset either, so a full-width drawing meets both content edges. */
.db-hero-09--split .db-hero-09__stage { padding-left: 0; padding-right: 0; }
@media (min-width: 1100px) {
  .db-hero-09--split .db-hero-09__stage { justify-items: end; }
  #structural-strategy-hero .db-hero-09__visual { width: 100%; margin-left: 0; }
}

/* B110 (Owner 2026-11-04): header logo option B from designWork "DBETA Logo Final" §06, "Suggested: bigger,
   and the dot starts the line". Logo 40px desktop / 30px tablet / 26px phone in a 104px desktop header. The
   opening brace hangs into the margin so the "d" meets the content edge (d ink starts at 0.655 x the logo
   height in this viewBox). The dashed line leaves the logo's dot (dot centre sits 0.194 x height below the
   logo's middle) and runs to a ring before "Bones 8.0 · Live". */
.bl-hdr--dock { --bl-lg: 26px; }
@media (min-width: 760px) { .bl-hdr--dock { --bl-lg: 30px; } }
@media (min-width: 1100px) { .bl-hdr--dock { --bl-lg: 40px; } .bl-hdr--dock .bl-hdr__bar { height: var(--bl-hdr-dock-h); } }
.bl-hdr--dock .bl-hdr__bar .bl-hdr__logo .bl-logo { width: auto; height: var(--bl-lg); }
/* B112 (Owner 2026-11-04, with a 1000px screenshot: "the content should align with the logo"): no hanging
   brace. The opening brace sits on the content edge, in line with the headline, kicker and buttons
   (brace ink starts 0.75 units into the viewBox, under 1px at every size). */
.bl-hdr--dock .bl-hdr__logo { margin-left: 0; }
.bl-hdr--dock .bl-rail__line,
.bl-hdr--dock .bl-rail__live,
.bl-hdr--dock .bl-rail__meta { transform: translateY(calc(var(--bl-lg) * .194)); }
.bl-hdr--dock .bl-rail__line { margin: 0 -18px 0 -20px; background: repeating-linear-gradient(90deg, rgba(37, 99, 255, .45) 0 4px, transparent 4px 9px); }
:root[data-theme="dark"] .bl-hdr--dock .bl-rail__line { background: repeating-linear-gradient(90deg, rgba(157, 182, 255, .45) 0 4px, transparent 4px 9px); }
.bl-hdr--dock .bl-rail__live::before { content: ""; flex: none; box-sizing: border-box; width: 9px; height: 9px; margin-right: 10px; border: 1.5px solid #2563ff; border-radius: 50%; background: var(--base); }
:root[data-theme="dark"] .bl-hdr--dock .bl-rail__live::before { border-color: #5b8cff; }

/* B110 (Owner 2026-11-04: "remove the background color from favicon here"): the dock's {d} mark is the
   plain symbol (blue braces, ink "d"), not the blue tile. */
.bl-dock .bl-dock__logo-mark .bl-logo.bl-logo--sym { width: auto; height: 22px; }
.bl-dock.is-compact .bl-dock__logo-mark .bl-logo.bl-logo--sym { width: auto; height: 20px; }
.bl-dock .bl-dock__logo { min-width: 44px; justify-content: center; }
@media (max-width: 959px) { .bl-dock .bl-dock__logo { padding: 0 10px 0 14px; } }
.bl-dock.is-compact .bl-dock__logo { padding: 0 8px 0 12px; }

/* B111 (Owner 2026-11-04: "fix the gap between blogs and cta on the homepage"). The home article list is the
   last block inside .db-home-sections, so the main > .bl-alist-wrap rule above missed it and the cards touched
   the footer CTA. Same bottom space for a last article list at any depth in main. */
main .bl-alist-wrap:not(:has(~ :not(script, style))) { padding-bottom: clamp(56px, 7vw, 96px); }

/* B113 (Owner 2026-11-04: "ok that works", on braces from the logo in content: section labels, big numbers,
   error and empty states, pull quotes). Decorative only: every brace uses the content alt-text form
   ("{" / "") so screen readers keep the plain words; browsers without it use the first declaration.
   Braces use the logo's blue (#2563ff light, #5b8cff dark) where they are set apart from the text. */
:root { --bl-brace: #2563ff; }
:root[data-theme="dark"] { --bl-brace: #5b8cff; }

/* 1. Section labels: "—— { 01 · How we work }". The 32px line moves into the label's background so
   ::before and ::after can hold the braces. */
.bl-home-kicker, .bl-svc-head__eyebrow { padding-left: 44px; background: linear-gradient(var(--accent), var(--accent)) left center / 32px 1px no-repeat; }
.bl-home-kicker::before, .bl-svc-head__eyebrow::before { content: "{"; content: "{" / ""; flex: none; position: static; width: auto; height: auto; margin-right: -3px; padding: 0; background: none; }
.bl-home-kicker::after, .bl-svc-head__eyebrow::after { content: "}"; content: "}" / ""; flex: none; position: static; width: auto; height: auto; margin-left: -3px; background: none; }
main:has(#service-content) .bl-svc-head__eyebrow::before { content: "\7B\A0" counter(blsec, decimal-leading-zero) " ·"; content: "\7B\A0" counter(blsec, decimal-leading-zero) " ·" / counter(blsec, decimal-leading-zero) " ·"; margin-right: 0; padding-left: 0; }
main:has(#service-content) .bl-svc-head__eyebrow::after { content: "}"; content: "}" / ""; position: static; width: auto; height: auto; background: none; }
main:has(#service-content) .bl-pro-intro .bl-svc-head__eyebrow::before,
main:has(#service-content) .bl-insights__head:not(#service-content *) .bl-svc-head__eyebrow::before { content: "{"; content: "{" / ""; margin-right: -3px; }
main:has(#service-content) #roadmap .bl-bones-road__intro > .bl-svc-head__eyebrow::before { content: "\7B\A0" counter(blsec, decimal-leading-zero) " ·"; content: "\7B\A0" counter(blsec, decimal-leading-zero) " ·" / counter(blsec, decimal-leading-zero) " ·"; }
main:has(#service-content) #roadmap .bl-bones-road__intro > .bl-svc-head__eyebrow::after { content: "}"; content: "}" / ""; }
/* Group sub-labels that had no line or number stay plain. */
main:has(#service-content) .bl-svc-head__eyebrow.bl-benefit-group__label,
main:has(#service-content) .bl-bones-road__intro > .bl-svc-head__eyebrow { padding-left: 0; background: none; }
main:has(#service-content) #roadmap .bl-bones-road__intro > .bl-svc-head__eyebrow { padding-left: 44px; background: linear-gradient(var(--accent), var(--accent)) left center / 32px 1px no-repeat; }
/* Number-only section heads: "—— { 03 }". */
main:has(#service-content) .bl-svc-head:not(:has(.bl-svc-head__eyebrow))::before { content: "\7B\A0" counter(blsec, decimal-leading-zero) "\A0\7D"; content: "\7B\A0" counter(blsec, decimal-leading-zero) "\A0\7D" / counter(blsec, decimal-leading-zero); }

/* 2. Big numbers: Cases stats strip, "{ 9 }". */
.bl-cases-stats__n::before, .bl-cases-stats__n::after { font-family: var(--_font-mono); font-weight: 400; color: var(--bl-brace); }
.bl-cases-stats__n::before { content: "{"; content: "{" / ""; margin-right: .14em; }
.bl-cases-stats__n::after { content: "}"; content: "}" / ""; margin-left: .14em; }

/* 3. Error and empty states: "{ 404 }" (the code is aria-hidden) and the legal search "no match" line. */
.bl-err__code::before, .bl-err__code::after { color: var(--bl-brace); -webkit-text-stroke: 0; }
.bl-err__code::before { content: "{"; margin-right: .08em; }
.bl-err__code::after { content: "}"; margin-left: .08em; }
.bl-legal-none.is-empty::before { content: "\7B\A0"; content: "\7B\A0" / ""; color: var(--bl-brace); font-family: var(--_font-mono); }
.bl-legal-none.is-empty::after { content: "\A0\7D"; content: "\A0\7D" / ""; color: var(--bl-brace); font-family: var(--_font-mono); }

/* 4. Pull quotes in articles: large blue braces in place of the left rule. */
.bl-post blockquote { position: relative; padding: 4px 48px; border-left: 0; }
.bl-post blockquote::before, .bl-post blockquote::after { position: absolute; font: 400 2.2em/1 var(--_font-mono); color: var(--bl-brace); }
.bl-post blockquote::before { content: "{"; content: "{" / ""; left: 0; top: 0; }
.bl-post blockquote::after { content: "}"; content: "}" / ""; right: 0; bottom: 0; }
@media (max-width: 575px) { .bl-post blockquote { padding: 4px 32px; } .bl-post blockquote::before, .bl-post blockquote::after { font-size: 1.6em; } }

/* B114 (Owner 2026-11-04, footer screenshot: "at the bottom the menu creates a gap it should float slightly to
   the top so that it doesnt hide company & privacy policy"). The dock's reserved space moves from the body
   (a band in the page colour under the footer) into the footer's bottom bar, so the bar colour runs to the
   bottom and the dock floats just under the company and policy row. */
body { padding-bottom: 0; }
/* B115: superseded. No space under the footer; the dock rises above the bottom bar instead (site-header.php lift()). */

/* B116 (Owner 2026-11-04: "when i open service menu its seems that is laging again becomes really slow and
   unresponsive"). Same cause as B65: the dock's full-page scrim blurred the whole page again on every frame
   (and Lenis keeps the page scrolling under it), and the sheet added its own 20px blur. Dim only; the sheets
   are near-opaque (.96/.97) so the blur was barely visible. Each sheet paints in its own layer. */
.bl-dock-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bl-dock__sheet { -webkit-backdrop-filter: none; backdrop-filter: none; contain: layout; }
.bl-dock__sheet a, .bl-dock__sheet button { transition-duration: .12s; }

/* B117 (Owner 2026-11-05, service page screenshot: "remove the closing header animation, put the logo correctly and
   remove the gap between the sub menu"). The rail header is 104px from 1100px (B110), but the "On this page" bar
   still sat at the old 68px, so it ran under the logo. The bar now starts on the header's lower edge and follows
   the scroll exactly (site-header.php shift() reads this top), with no timed slide or fade. This supersedes the
   B93 delayed return for the bar. The rail logo no longer fades out: it scrolls away with the header. */
:root { --bl-hdr-dock-h: 68px; }
@media (min-width: 1100px) { :root { --bl-hdr-dock-h: 104px; } }
html:has(.bl-hdr--dock) nav.bl-toc,
html.bl-condensed:has(.bl-hdr--dock) nav.bl-toc { top: var(--bl-hdr-dock-h); }
html:has(.bl-hdr--dock) main.db-page-content:has(nav.bl-toc) { padding-top: calc(58px + var(--bl-hdr-dock-h) - 68px); }
html.bl-hdr-linked:has(.bl-hdr--dock) nav.bl-toc,
html.bl-hdr-linked.bl-hdr-rev:has(.bl-hdr--dock) nav.bl-toc { transition: none !important; }
.bl-hdr--dock .bl-hdr__logo,
html.bl-dock-scrolled .bl-hdr--dock .bl-hdr__logo { opacity: 1; transform: none; pointer-events: auto; transition: none; }
/* B117: the old condensed rule (html.bl-condensed header ... translateY(-100%)) outranked the dock header's
   transform:none, so past 90px the rail jumped up and out (the "closing" movement), leaving a gap above the bar
   on the way back up. The rail only scrolls with the page. */
html.bl-condensed header.db-header.bl-hdr.bl-hdr--dock { transform: none !important; }

/* B118 (Owner 2026-11-05: "make this smaller [the rail header] on service pages. and remove the closing animation
   we have"). The {d} mark that joins the On this page bar once the header has gone now appears at once
   instead of sliding in (the last remaining "closing" movement). */
/* (The 68px header and 28px logo first tried here were withdrawn: the Owner meant the dark strip, see B119.) */
.bl-toc__logo, html.bl-condensed .bl-toc__logo { transition: none !important; }

/* B119 (Owner 2026-11-05: "Not the logo smaller the dark backround i meant"). The page keeps a top offset for the
   header (and the On this page bar) as padding on main, so a strip of the plain page colour showed above the
   first section's background, under the transparent rail header. The first section now reaches up behind the
   header: it moves up by the offset and takes it back as a transparent top border its background paints under,
   so its content stays where it was. */
main.db-page-content { --bl-main-pt: 0px; }
.db-page-content--inner, .db-page-content.inner-page-content { --bl-main-pt: var(--db-header-offset); }
main.db-page-content:has(nav.bl-toc) { --bl-main-pt: 58px; }
html:has(.bl-hdr--dock) main.db-page-content:has(nav.bl-toc) { --bl-main-pt: calc(58px + var(--bl-hdr-dock-h) - 68px); }
html:has(.bl-hdr--dock) main.db-page-content > .db-section:first-child { margin-top: calc(-1 * var(--bl-main-pt)); border-top: var(--bl-main-pt) solid transparent; background-origin: border-box; }

/* B120 (Owner 2026-11-05, screenshot of a seam just above the On this page bar: "can you remove this gap";
   reverted with B121, then re-requested on its own: "can you remove the gap i asked for before"). After B119
   the hero section's own glow reaches the top, but the hero block inside it (.db-hero-09, with its second glow)
   still began at the old offset, leaving a band where it started. It now reaches up the same way. */
html:has(.bl-hdr--dock) main.db-page-content > .db-section:first-child > .db-hero-09:first-child { margin-top: calc(-1 * var(--bl-main-pt)); border-top: var(--bl-main-pt) solid transparent; background-origin: border-box; }

/* B122 (Owner 2026-11-05: "is there a way to rather move this to be on the side of the page instead
   indicating where the user is" → chose "Slim right-edge rail"). With the dock header the "On this page"
   bar leaves the top of the page. From 1100px it is a slim rail of numbered points in the right margin:
   dashed line (as in the logo), points fill as you scroll, the current section's name shows on hover or
   focus (always from 1800px, where the margin has room), Price calculator at the foot. Below 1100px it is
   a "02 / 07 · Section" pill above the dock that opens the section list. Script: blToc rail mode in
   theme/core/site-header.php. Selectors key on the dock header (not the script's class) so nothing jumps
   before the script runs. No backdrop-filter (B65/B116 lag). */
html:has(.bl-hdr--dock) main.db-page-content:has(nav.bl-toc) { padding-top: 0; --bl-main-pt: 0px; }
/* B123 (Owner 2026-11-05: "that just needs hero alignment to just the way the other pages are"). With no bar
   to sit on the bottom edge, the B47 full-screen, vertically centred service hero only pushed the content
   down (eyebrow at 224-251px on a 966px screen). The hero now starts at the top like About, Bones,
   Services and Pricing: eyebrow at the same 141px. */
@media (min-width: 1100px) { /* QA B123 DECIDE: from 1100, where the rail starts (was 1200) */
  html:has(.bl-hdr--dock) .db-section[id$="-hero"]:has(+ .bl-toc--svc) .db-hero-09__wrap { min-height: 0; align-content: start; }
  html:has(.bl-hdr--dock) main:has(nav.bl-toc) .db-section[id$="-hero"] .db-hero-09__wrap { padding-top: 141px !important; align-items: start; } /* QA B123 S1 · incl. web-design, whose bar is not the hero's next sibling */
  html:has(.bl-hdr--dock) #web-design-hero .db-hero-09__wrap { padding-top: 141px !important; } /* beats the B38 id rules */
}
html:has(.bl-hdr--dock) .bl-toc-target { scroll-margin-top: calc(var(--bl-hdr-dock-h) + 24px); }
html:has(.bl-hdr--dock) nav.bl-toc {
  top: auto !important; left: auto; bottom: auto; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: none !important; will-change: auto; pointer-events: none;
}
html:has(.bl-hdr--dock) nav.bl-toc .db-container { max-width: none; width: auto; margin: 0; padding: 0; }
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__inner { height: auto; padding: 0; transform: none; }
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__logo,
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__count,
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__segs,
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__progress { display: none !important; }
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list,
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc,
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__pill { pointer-events: auto; }
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list { flex-direction: column; flex-wrap: nowrap; overflow: visible; -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; }
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__tip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a span.bl-toc__t { font: inherit; color: inherit; }
.bl-toc__dot { display: none; }
.bl-toc__pill { display: none; }

@media (min-width: 1100px) {
  html:has(.bl-hdr--dock) nav.bl-toc {
    right: calc(max(var(--bl-gutter), (100vw - var(--bl-site)) / 2 + var(--bl-gutter)) / 2 - 12px); top: 50% !important; /* centred in the side margin */ translate: 0 -50%;
    width: 24px; z-index: 99;
  }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__inner { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list { position: relative; gap: 0; padding: 0; align-items: flex-end; }
  /* dashed track and the solid share already passed, through the dot centres */
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list::before,
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list::after { content: ""; position: absolute; right: 7.5px; top: 16px; bottom: 16px; width: 1px; pointer-events: none; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list::before { background: repeating-linear-gradient(to bottom, var(--toc-n) 0 3px, transparent 3px 7px); opacity: .45; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list::after { background: var(--bl-brace); transform-origin: top center; transform: scaleY(var(--rail-p, 0)); transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list li { position: relative; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a {
    position: relative; display: flex; justify-content: flex-end; align-items: center;
    width: 24px; height: 32px; min-height: 32px; padding: 0; border-radius: 0; background: none !important; color: var(--toc-t-now);
  }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__dot {
    display: block; position: relative; z-index: 1; flex: none; width: 9px; height: 9px; margin-right: 3.5px; box-sizing: border-box;
    border: 1.5px solid var(--toc-n); border-radius: 50%; background: var(--base);
    transition: background-color .2s, border-color .2s, transform .2s;
  }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a.is-past .bl-toc__dot { border-color: var(--bl-brace); background: var(--bl-brace); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a[aria-current] .bl-toc__dot { border-color: var(--bl-brace); background: var(--base); transform: scale(1.45); box-shadow: inset 0 0 0 1.5px var(--base), inset 0 0 0 5px var(--bl-brace); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a:hover .bl-toc__dot { border-color: var(--bl-brace); }
  /* the name: a small label to the left of the point */
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__tip,
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc::before {
    position: absolute; right: 30px; top: 50%; padding: 7px 11px; border-radius: 9px;
    border: 1px solid var(--hdr-line); background: var(--base); box-shadow: 0 10px 28px -14px rgba(10, 11, 15, .45);
    font: 500 13px/1 var(--_font-accent); color: var(--toc-t-now);
    opacity: 0; visibility: hidden; transform: translate(6px, -50%); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a span:not(.bl-toc__tip):not(.bl-toc__t) { font: 500 11px/1 var(--_font-mono); color: var(--toc-n); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a[aria-current] span:not(.bl-toc__tip):not(.bl-toc__t) { color: var(--toc-n-now); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a:hover .bl-toc__tip,
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a:focus-visible .bl-toc__tip,
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc:hover::before,
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc:focus-visible::before { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .18s ease, transform .18s ease, visibility 0s; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a:focus-visible { outline: 0; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a:focus-visible .bl-toc__dot { outline: 2px solid var(--bl-brace); outline-offset: 3px; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc {
    position: relative; width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0; gap: 0;
    border-radius: 50%; font-size: 0; justify-content: center; margin-right: -4px; /* centre on the dots */
  }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc svg { width: 12px; height: 12px; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__calc::before { content: "Price calculator"; right: 34px; }
}
/* wide screens: the margin has room, so the current section's name stays in view */
@media (min-width: 1800px) {
  html:has(.bl-hdr--dock) nav.bl-toc { right: 24px; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a[aria-current] .bl-toc__tip { opacity: 1; visibility: visible; transform: translate(0, -50%); border-color: transparent; background: none; box-shadow: none; padding-right: 2px; transition: opacity .18s ease, visibility 0s; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__list a[aria-current]:hover .bl-toc__tip { border-color: var(--hdr-line); background: var(--base); }
}

/* phones and tablets: a pill just above the dock */
@media (max-width: 1099px) {
  html:has(.bl-hdr--dock) nav.bl-toc {
    left: 0; right: 0; top: auto !important; bottom: calc(max(var(--dk-bottom), env(safe-area-inset-bottom)) + var(--dk-h) + 10px);
    z-index: 102; display: flex; justify-content: center; padding: 0 16px; transition: opacity .25s ease, visibility 0s;
  }
  html.bl-dock-lifted:has(.bl-hdr--dock) nav.bl-toc:not(.is-open) { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__pill {
    order: 3; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; max-width: 100%;
    border: 1px solid var(--dk-line); border-radius: 999px; background: var(--base); box-shadow: var(--dk-shadow);
    font: 500 13.5px/1 var(--_font-accent); color: var(--toc-t-now); cursor: pointer;
  }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__pill-n { flex: none; font: 500 12px/1 var(--_font-mono); color: var(--toc-t-next); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__pill-n b { font-weight: 500; color: var(--bl-brace); }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:has(.bl-hdr--dock) nav.bl-toc .bl-toc__pill:focus-visible { outline: 2px solid var(--bl-brace); outline-offset: 2px; }
  html:has(.bl-hdr--dock) nav.bl-toc:not(.is-open) .bl-toc__list,
  html:has(.bl-hdr--dock) nav.bl-toc:not(.is-open) .bl-toc__calc { display: none !important; }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list {
    order: 1; display: flex; gap: 2px; width: min(320px, calc(100vw - 32px)); max-height: 55vh; overflow-y: auto; padding: 6px; box-sizing: border-box;
    border: 1px solid var(--dk-line); border-radius: 16px; background: var(--base); box-shadow: var(--dk-shadow);
  }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list li { width: 100%; }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a { width: 100%; height: 44px; min-height: 44px; justify-content: flex-start; padding: 0 12px; box-sizing: border-box; }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a span { display: inline !important; }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a span.bl-toc__tip { display: inline-flex !important; gap: 10px; font: 500 15px/1.2 var(--_font-accent); color: var(--toc-t-next); }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a.is-past span.bl-toc__tip { color: var(--toc-t-past); }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a[aria-current] span.bl-toc__tip { color: var(--toc-t-now); }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a span.bl-toc__tip > span:first-child { font: 500 11px/1 var(--_font-mono); color: var(--toc-n); }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__list a[aria-current] span.bl-toc__tip > span:first-child { color: var(--toc-n-now); }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__calc {
    order: 2; display: inline-flex; align-items: center; justify-content: center; width: min(320px, calc(100vw - 32px)); height: 44px; min-height: 44px;
    padding: 0 16px; gap: 8px; box-sizing: border-box; border-radius: 12px; font-size: 14px; background: var(--base); box-shadow: var(--dk-shadow);
  }
  html:has(.bl-hdr--dock) nav.bl-toc.is-open .bl-toc__calc:hover { background: var(--base); }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.bl-hdr--dock) nav.bl-toc, html:has(.bl-hdr--dock) nav.bl-toc *, html:has(.bl-hdr--dock) nav.bl-toc *::before, html:has(.bl-hdr--dock) nav.bl-toc *::after { transition: none !important; }
}

/* B124 (Owner 2026-11-05: "check all section padding / spacing bottom / top ... each section its too close
   to each other, it needs some room to breathe"). Measured before: section to section 72px (375), 90px
   (1000), 120px (1440); before Related insights 56/60/80; page hero to first section 48/64/80.
   One roomier scale: --bl-gap 96 / 134 / 160 (it was clamp(88px, 48px + 6vw, 160px) before the B-era
   "fit on the screen" cut, so 1440 returns to the earlier 160) and a smaller step --bl-gap-s 72 / 96 / 112 for
   hero-to-content and the run-in to Related insights. Heading-to-content spacing inside sections is unchanged. */
:root {
  --bl-gap: clamp(96px, 6vw + 74px, 160px);
  --bl-gap-s: clamp(72px, 4vw + 56px, 112px);
}
:is(.db-section.padding-default, :has(> .db-section.padding-default:nth-last-child(1 of :not(script, style)))) + .bl-alist-wrap { padding-top: 0; }
:has(+ .bl-alist-wrap) > .db-section.padding-default:nth-last-child(1 of :not(script, style)) { padding-bottom: var(--bl-gap-s) !important; }
.db-section.padding-default:has(+ script + .bl-alist-wrap) { padding-bottom: var(--bl-gap-s) !important; }
.bl-alist-wrap { padding-top: var(--bl-gap-s); }
main .bl-alist-wrap:not(:has(~ :not(script, style))) { padding-bottom: var(--bl-gap); }
.bl-phero:not(.bl-phero--contact, .bl-phero--price, .bl-phero--cases, .bl-phero--error) { padding-bottom: var(--bl-gap-s); }
.db-section.padding-default:has(+ .bl-alist-wrap) { padding-bottom: var(--bl-gap-s) !important; }
.db-section.padding-default + #all-articles { padding-top: 0; } /* blog: one gap, not gap + 88 */
/* service pages: the hero is followed by the side rail, so hero-to-content is one smaller step at every width */
html:has(.bl-hdr--dock) .db-section[id$="-hero"]:has(+ nav.bl-toc) { padding-bottom: 0; --db-section-pb: 0px; }
.bl-toc--svc ~ #service-content > .db-section:first-child { --db-section-pt: var(--bl-gap-s); }
/* B124b (Owner 2026-11-05: "no give that more space too"): homepage hero to "How we work" was 48px; now the
   same hero-to-content step as the other pages. */
.db-section.bl-home-hero { padding-bottom: var(--bl-gap-s); }

/* B125 (Owner 2026-11-05: "check this page in the prototype; services.html"). Source: designWork/Area Redesign
   Options/Services Page.dc.html. Type sizes and the "Choose where to start" panel now follow the mock:
   chooser head 36px with the note on the same line at 14px; panel on a blue-tinted gradient with a light
   blue border, radius 24px; panel title 40px; description 17px; price 20px semibold; the link is the blue
   pill button. Section heads "Structure first, not design" 50px and "On their own…" 40px; Latest articles 28px.
   Container width, header and section spacing stay as agreed site-wide (B124). Services page only. */
main #start .bl-home-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; }
main #start .bl-home-head h2 { font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.1 !important; letter-spacing: -.03em !important; }
main #start .bl-home-head__lead { max-width: none; margin: 0; font-size: 14px !important; line-height: 1.4; color: var(--t-medium); }
main #start .bl-start__tabs { gap: 8px; }
main #start .bl-start__tab { border-radius: 16px; padding: 18px 20px; gap: 8px; }
main #start .bl-start__bar { position: static; display: block; height: 3px; border-radius: 2px; }
main #start .bl-start__price { font: 400 13.5px/1.4 var(--_font-accent); }
main #start .bl-start__stack {
  border-radius: 24px; padding: clamp(22px, 3.5vw, 40px);
  border-color: color-mix(in srgb, var(--bl-brace) 30%, transparent);
  background: radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), var(--base-tint) 55%);
}
main #start .bl-start__copy { gap: 16px; }
main #start .bl-cmp__kicker { margin: 0; font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; color: var(--accent-text); }
main #start h3.bl-start__title { font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.05 !important; letter-spacing: -.03em !important; }
main #start .bl-start__text { font-size: 17px; line-height: 1.6; }
main #start .bl-start__inc { gap: 10px; margin: 0; }
main #start .bl-start__inc li { padding-left: 30px; line-height: 1.5; color: var(--t-bright); }
main #start .bl-start__foot { gap: 16px; margin: 0; padding-top: 14px; }
main #start .bl-start__foot > span { font: 600 20px/1.2 var(--_font-accent); letter-spacing: -.01em; }
main #start .bl-start__foot a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 999px; background: #2563ff; color: #fff; font: 500 15px/1 var(--_font-accent); text-decoration: none; }
main #start .bl-start__foot a:hover { background: #1d4fd8; color: #fff; text-decoration: none; }
main #start .bl-start__card { border-radius: 18px; border-color: var(--bl-line); }
main #how-we-start .bl-home-head h2 { font-size: clamp(32px, 4vw, 50px) !important; line-height: 1.04 !important; letter-spacing: -.035em !important; }
main #all-services .bl-home-head h2 { font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.05 !important; letter-spacing: -.03em !important; }
body:has(main #start):has(main #all-services) .bl-alist-wrap .bl-alist__head h2 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }

/* B126 QA fixes (home-qa rounds on B103/B107/B115/B122) and the Services "Latest articles" gap.
   Owner 2026-11-05: "this doesn't appear correct on services" (Latest articles sat flush on the CTA band:
   there the article list is outside main, so the main-scoped bottom gap did not apply). */
body > .bl-alist-wrap:has(+ .bl-cta-band) { padding-bottom: var(--bl-gap); }
.db-consent-card { bottom: calc(var(--bl-dock-space) + env(safe-area-inset-bottom, 0px)) !important; } /* QA B107 B2 */
.bl-dock__sheet { max-height: calc(100vh - 120px - var(--dk-lift, 0px)); max-height: calc(100dvh - 120px - var(--dk-lift, 0px)); } /* QA B115 B1 */

/* 3a (Owner 2026-11-05, "update the homepage hero to 3a", designWork Header Redesign.dc.html): on the home page
   the header is the logo alone, with no rail, chip or meta. A dashed line leaves the logo's dot and drops into the
   top of "One record" (drawn in content/pages/index.body.php, 960px and up); a blue dot runs along it, the record pulses,
   then three dots run to the page, schema and sitemap. The tools we build on replace the "Trusted by" strip. */
header.db-header.bl-hdr.bl-hdr--solo { box-shadow: none !important; } /* no bar, hairline or glow (every page) */
.bl-signal { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 1; }
.bl-signal__line { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 4 5; }
.bl-signal__dot,
.bl-flow__dots circle { fill: var(--accent); }
.bl-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--bl-line); }
.bl-stack__label { margin: 0; font: 500 11px/1.2 var(--_font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.bl-stack__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; margin: 0; padding: 0; list-style: none; }
.bl-stack__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--t-bright); }
.bl-stack__list svg { flex: none; display: block; }
@media (min-width: 960px) {
  .bl-stack { align-items: flex-start; }
  .bl-stack__list { justify-content: flex-start; }
}

/* 3a on the SEO and GEO hero (Owner 2026-11-05): nodes and anchor for the homepage-style signal (hero_service.php). */
.bl-geo-hv__wire { z-index: 1; pointer-events: none; overflow: visible; }
.bl-geo-hv__dot { fill: var(--accent); }
.bl-geo-hv__hub { fill: var(--accent); }
.bl-geo-hv__end { fill: var(--base); stroke: var(--accent); stroke-width: 2; }
.bl-geo-hv__sig { position: absolute; left: 48.387%; top: 46.296%; width: 0; height: 0; pointer-events: none; }
@container (max-width: 459px) { .bl-geo-hv__sig { display: none; } }

/* Owner 2026-11-05 (screenshot of a band behind the logo on case and article pages): the first section's grid and
   glow layers (::before / ::after, inset 0) started under the transparent top border B119 adds, so they began
   below the header and left a hard edge. They now reach up behind the header too. */
html:has(.bl-hdr--dock) main.db-page-content > .bl-home-hero.db-section:first-child::before,
html:has(.bl-hdr--dock) main.db-page-content > .bl-home-hero.db-section:first-child::after { top: calc(-1 * var(--bl-main-pt)); }
/* Owner 2026-11-05: "reduce the padding bl-post-hero loading-wrap to about 32px" (space above the article title). */
.bl-post-hero { padding-top: 32px; }
/* Owner 2026-11-05: "reduce to padding here too" (Bones page hero), matching the 32px above the article title. */
main .db-section.bl-home-hero--page.bl-bn-hero { padding-top: 32px !important; } /* beats the !important page-hero rule (QA O1) */

/* Logo shine (Owner 2026-11-05): gradient stops for dbeta_logo(..., true), "dbeta" in the header and footer logos.
   Ink with a light band, as "Built to scale." is muted with a bright band. */
.bl-logo__sh0 { stop-color: #0a0b0f; }
.bl-logo__sh1 { stop-color: #8fa9ff; }
:root[data-theme="dark"] .bl-logo__sh0 { stop-color: #ffffff; }
:root[data-theme="dark"] .bl-logo__sh1 { stop-color: #5b8cff; }
@media print { .bl-logo__sh0, .bl-logo__sh1 { stop-color: #0a0b0f !important; } }

/* Home reviews (2026-11-06, Lighthouse "ARIA role should be appropriate"): the tabpanel role moved
   from the <figure> to a wrapping div; the figure now carries the item's layout. */
.bl-quotes__fig { display: grid; align-content: start; gap: 20px; margin: 0; min-width: 0; }