/* bones-look/05-fixes-b26-b71.css: Numbered fixes B26 to B71 (2026-11-04).
   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. */
/* B26 F2: 16px contact fields on phones so iOS Safari does not zoom on focus (selector written out: minifier drops the space before :is). */
@media (max-width: 767px) { main .bl-contact__form .bl-contact__field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), main .bl-contact__form .bl-contact__field select, main .bl-contact__form .bl-contact__field textarea { font-size: 16px !important; } }

/* Batch 29: fit check cards per mock (#fit): 20px radius, 32px padding, 16px list, tick/dash markers. */
main .db-block > .bl-svc-head--fit { margin-bottom: 48px; }
main .db-fit { gap: 16px; }
@media (min-width: 768px) { main .db-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main .db-fit .db-fit__col { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 20px; background: var(--base-tint); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: none; }
main .db-fit .db-fit__col--no { background: var(--base); border-color: var(--bl-line); }
main .db-fit .db-fit__col h3 { --bl-h3-list: 20px; margin: 0; font-size: 20px !important; line-height: 1.2 !important; font-weight: 600; color: var(--t-bright); }
main .db-fit .db-fit__col ul { gap: 14px; }
main .db-fit .db-fit__col li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; color: var(--t-bright); }
main .db-fit .db-fit__col--no li { color: var(--t-medium); }
main .db-fit .db-fit__col li::before { position: absolute; left: 0; top: 0; font-weight: 400; color: var(--accent-text); }
main .db-fit .db-fit__col--no li::before { content: "–"; color: var(--t-muted); }

/* Batch 30: on laptop-height screens each section should fit below the header and "On this page" bar
   (Owner 2026-11-04). Tightens heads, the Pricing cards and the How we design card; no content change. */
@media (min-width: 992px) and (max-height: 1000px) {
  main .bl-svc-head h2 { font-size: clamp(34px, 3.3vw, 48px) !important; }
  main .db-block > .bl-svc-head { margin-bottom: 32px !important; }
  main .db-block > .bl-svc-head:has(+ .bl-wd) { margin-bottom: 20px !important; }
  .bl-wdp__card { gap: 16px; padding: 24px 28px; }
  .bl-wdp__rows > div { padding: 9px 0; }
  .bl-wd .bl-ssd__main { min-height: 0; }
  main .bl-wd.bl-ssd { gap: 24px; }
}
@media (min-width: 992px) and (max-height: 820px) {
  main .bl-svc-head h2 { font-size: clamp(32px, 3vw, 40px) !important; }
  main .db-block > .bl-svc-head { margin-bottom: 24px !important; }
  .bl-wdp__card { gap: 12px; padding: 20px 24px; }
  .bl-wdp__rows > div { padding: 8px 0; }
  .bl-wd .bl-ssd__main { padding: 28px 32px; }
  main .bl-wd .bl-wd__list { row-gap: 24px; }
}
@media (min-width: 992px) and (max-height: 820px) {
  main #included + .db-section .bl-benefits__item { padding: 24px 28px; gap: 10px; }
}
@media (min-width: 992px) and (max-height: 780px) {
  main .bl-svc-head h2 { font-size: clamp(30px, 2.8vw, 36px) !important; }
  .bl-wdp__card { gap: 10px; }
  .bl-wd .bl-ssd__main { padding: 24px 28px; }
}
@media (min-width: 992px) and (max-height: 780px) { main .bl-wd .bl-wd__list { row-gap: 20px; } }

/* Batch 31: FAQ section per mock (#faq): a ruled list instead of cards, 18px questions,
   a plain accent "+" that turns into "–" when open, 16px answers up to 620px. Applies to the
   shared FAQ component (service, area, sector and article pages); the FAQ page keeps its cards. */
.bl-faq .bl-faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.bl-faq .bl-faq__head > * { margin: 0; }
.bl-faq .bl-faq__list { gap: 0; border-top: 1px solid var(--bl-line); }
.bl-faq .bl-faq__item, .bl-faq .bl-faq__item[open] { border: 0; border-bottom: 1px solid var(--bl-line); border-radius: 0; background: none; box-shadow: none; }
.bl-faq .bl-faq__q { gap: 20px; padding: 22px 0; }
.bl-faq .bl-faq__q:focus-visible { border-radius: 4px; outline-offset: 4px; }
main .bl-faq .bl-faq__q h3 { font: 500 18px/1.35 var(--_font-default) !important; letter-spacing: 0; }
.bl-faq .bl-faq__icon, .bl-faq .bl-faq__item[open] .bl-faq__icon { flex: 0 0 22px; width: 22px; height: 22px; border: 0; border-radius: 0; background: none; transform: none; }
.bl-faq .bl-faq__icon::before, .bl-faq .bl-faq__icon::after, .bl-faq .bl-faq__item[open] .bl-faq__icon::before, .bl-faq .bl-faq__item[open] .bl-faq__icon::after { width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--accent-text); }
.bl-faq .bl-faq__item[open] .bl-faq__icon::after { transform: none; }
.bl-faq .bl-faq__a { padding: 0 0 24px; }
.bl-faq .bl-faq__a p { max-width: 620px; font-size: 16px; line-height: 1.6; }
@media only screen and (min-width: 992px) { main .bl-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; } }
.bl-faq .bl-faq__head .bl-home-hero__btn { background: transparent; }



/* Batch 33: fit check colours closer to the mock (#fit): blue-tinted good-fit card with a lighter
   accent border, softer list text, faint white border on the "no" card. */
main .db-fit .db-fit__col:not(.db-fit__col--no) { background: color-mix(in srgb, var(--accent-text) 4%, var(--base-tint)); border-color: color-mix(in srgb, var(--accent-text) 35%, transparent); }
main .db-fit .db-fit__col--no { border-color: color-mix(in srgb, var(--t-bright) 8%, transparent); }
main .db-fit .db-fit__col:not(.db-fit__col--no) li { color: color-mix(in srgb, var(--t-bright) 70%, var(--t-medium)); }

/* Batch 35: Work header per mock (#work): 56px H2 on two lines at all heights, 48px to the cards,
   pill with a faint border. Supersedes the B32 short-screen Work H2 rules (Work no longer fits one screen). */
main .bl-insights__head:has(+ .bl-wdw) { margin-bottom: 48px !important; }
main .bl-insights__head:has(+ .bl-wdw) > div:first-child { max-width: 760px; }
main .bl-insights__head:has(+ .bl-wdw) h2 { max-width: 12em; }
a.bl-wdw__all { border-color: color-mix(in srgb, var(--t-bright) 18%, transparent); }

/* Batch 37: reading progress line on the "On this page" bar, per the Web Design mock:
   2px along the bar's bottom edge, full viewport width, accent gradient with a soft glow,
   filled by the share of the page scrolled (--bl-toc-p, set by the bar script). */
.bl-toc__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: scaleX(var(--bl-toc-p, 0));
  transform-origin: left center;
  transition: transform .15s linear;
}
@media (prefers-reduced-motion: reduce) { .bl-toc__progress { transition: none; } }

/* Batch 38: web design hero fills the first screen with the proof strip and the "On this page" bar
   under it, as in the mock (Owner 2026-11-04). 234px = proof strip wrap (8 + 120 + 40) + bar (66).
   Desktop layout only (min-width 1200); the stacked hero below that keeps its own spacing. */
@media (min-width: 1200px) {
  #web-design-hero .db-hero-09__wrap { box-sizing: border-box; min-height: calc(100svh - 186px); padding-top: 120px !important; padding-bottom: 40px !important; align-content: center; }
  #web-design-hero .db-hero-09__stage { min-height: 0; padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 1200px) and (max-height: 940px) {
  #web-design-hero .db-hero-09__wrap { padding-top: 96px !important; padding-bottom: 32px !important; }
  #web-design-hero .hero-09-headline__title h1.hero-09-headline { font-size: clamp(36px, min(4.4vw, 6.2vh), 58px) !important; }
  #web-design-hero .hero-09-headline__lead { margin-top: 14px; }
  #web-design-hero .hero-09-headline__prices { margin-top: 16px; }
}
@media (min-width: 1200px) and (max-height: 820px) {
  #web-design-hero .db-hero-09__wrap { padding-top: 88px !important; padding-bottom: 24px !important; }
  #web-design-hero .db-hero-09__headline { gap: 10px; }
  #web-design-hero .hero-09-headline__lead { max-width: 600px; margin-top: 10px; }
  #web-design-hero .hero-09-headline__actions { margin-top: 8px; }
  #web-design-hero .hero-09-headline__prices { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 1200px) and (max-height: 780px) {
  #web-design-hero .db-hero-09__wrap { padding-top: 72px !important; padding-bottom: 0 !important; }
  #web-design-hero .db-hero-09__headline { gap: 8px; }
  #web-design-hero .hero-09-headline__prices { padding-top: 10px; margin-top: 8px; }
}
/* Batch 40: web design pricing, retained-support line aligned left under the cards (Owner 2026-11-04). v1 keeps it centred. */
.bl-ss-packs__more--left { text-align: left; }

/* Batch 42: closing CTA card and Related insights (Owner 2026-11-04: "This needs a fix and correct spacing").
   1) Related insights as the last section had no bottom padding, so the CTA card touched its cards.
   2) The "Talk to us" pill wrapped the email under the button; keep both on one row inside the pill. */
main > .bl-alist-wrap:not(:has(~ :not(script))) { padding-bottom: clamp(56px, 7vw, 96px); } /* last section in main (scripts may follow) */
@media (min-width: 768px) {
  .bl-footer__lead-actions { flex: none; flex-wrap: nowrap; column-gap: 18px; }
  .bl-footer__lead-actions .bl-footer__mail { white-space: nowrap; }
}

/* Batch 43: "On this page" bar on every service page (svc_toc() in service-sections.php).
   Sections it links to land below the header and the bar. */
.bl-toc-target { scroll-margin-top: calc(var(--bl-hdr-h, 72px) + 90px); } /* header + bar (66) + 24 */

/* Batch 44 (Owner 2026-11-04: "Use web design & homepage page as the approved page and correct
   everywhere else"). Benefit cards everywhere take the web-design "Included" look: one frame
   split by 1px lines, 20px titles, 15.5px text. A short last row stretches so no empty cell shows. */
.bl-benefits { gap: 1px; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--bl-line); }
.bl-benefits__item { padding: 32px; gap: 12px; border: 0; border-radius: 0; box-shadow: none; }
[data-theme="dark"] .bl-benefits__item { background: var(--base); }
main h3.bl-benefits__title { --bl-h3-list: 20px; line-height: 1.2 !important; }
.bl-benefits__item p { font-size: 15.5px; line-height: 1.55; }
@media (min-width: 768px) and (max-width: 1199px) {
  .bl-benefits > .bl-benefits__item:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .bl-benefits { gap: 1px; }
  .bl-benefits:not(.bl-benefits--2):not(.bl-benefits--4) > .bl-benefits__item:last-child:nth-child(3n+1) { grid-column: span 3; }
  .bl-benefits:not(.bl-benefits--2):not(.bl-benefits--4) > .bl-benefits__item:last-child:nth-child(3n+2) { grid-column: span 2; }
  .bl-benefits--2 > .bl-benefits__item:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 992px) and (max-height: 820px) {
  main .bl-benefits__item { padding: 24px 28px; gap: 10px; }
}
/* Process sections on every service page use the web-design timeline (svc_timeline): extra
   blocks after the list (what we need, prices) run full width under both columns. */
.bl-wdt > :not(.bl-wdt__head):not(.bl-wdt__list) { grid-column: 1 / -1; margin-top: 0; }
.bl-wdt__static a { color: var(--accent-text); }
/* Case pages: section headings and eyebrows at the web-design sizes (56px H2, 1.92px eyebrow
   tracking). The status panel and closing panel keep their smaller card headings. */
.bl-case .bl-cs > h2 { font-size: clamp(34px, 4.4vw, 56px) !important; line-height: 1.02 !important; }
.bl-case .bl-cs.bl-cs--status > h2 { font-size: clamp(24px, 2.2vw, 30px) !important; }
.bl-case .bl-cs-wrap > .bl-cs:last-of-type > h2 { font-size: clamp(28px, 3.1vw, 44px) !important; }
.bl-case .bl-cs > .bl-cs__eyebrow { letter-spacing: .16em; }
/* Batch 44: the timeline heading stacks like web-design (no lead pushed to the right). Eyebrows
   added to the promo and list sections join the section numbering; group labels inside a
   section stay plain labels, not a second numbered eyebrow. */
.bl-wdt .bl-wdt__head > * { align-self: flex-start; }
main:has(#service-content) .db-features-promo__content:has(> .bl-svc-head__eyebrow), main:has(#service-content) .card-split-title:has(> .bl-svc-head__eyebrow), main:has(#service-content) .bl-bones-what__text:has(> .bl-svc-head__eyebrow) { counter-increment: blsec; }
main:has(#service-content) .bl-svc-head__eyebrow.bl-benefit-group__label::before, main:has(#service-content) .bl-svc-head__eyebrow.bl-benefit-group__label::after, main:has(#service-content) .bl-bones-road__intro > .bl-svc-head__eyebrow::before, main:has(#service-content) .bl-bones-road__intro > .bl-svc-head__eyebrow::after { content: none; }
#service-content .db-features-promo__content, #service-content .db-features-promo__content h2 { text-align: left; } /* B44: left on phones too, like web-design */
/* B45 (Owner 2026-11-04: "next section after the tracker is hidden under it"): sections only carry
   bottom padding, so the first one after the "On this page" bar started flush under it. Give it
   the same space web-design.html has between the bar and its first section. */
.bl-toc--svc ~ #service-content > .db-section:first-child { --db-section-pt: clamp(56px, 6.67vw, 96px); }
/* B46 (Owner 2026-11-04, Structural Strategy "Two ways in": "ensure this section header and texts
   are exactly the same" as the mock). Section heads split into two equal columns, as in every mock
   (H2 540px | lead 540px at 1440). Package cards take the mock sizes: 40px padding, 24px titles,
   mono week labels, 56px prices, full-width buttons, "Best for" line. */
@media only screen and (min-width: 960px) {
  .bl-svc-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
}
.bl-ss-packs { gap: 16px; }
.bl-ss-pack { gap: 0; padding: 40px; border-radius: 24px; }
.bl-ss-pack.is-main { border-color: var(--accent); }
main .bl-ss-pack h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.bl-ss-pack__time { padding: 0; border: 0; border-radius: 0; font: 500 11px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-ss-pack.is-main .bl-ss-pack__time { color: var(--accent-text); }
.bl-ss-pack__price { margin-top: 24px; font-size: clamp(44px, 4vw, 56px); line-height: 1; letter-spacing: -.04em; }
.bl-ss-pack__price small { font: 400 15px/1 var(--_font-accent); letter-spacing: 0; color: var(--t-muted); }
.bl-ss-pack__text { margin-top: 24px; font-size: 16px; line-height: 1.5; }
.bl-ss-pack__gets { gap: 12px; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--bl-line); }
.bl-ss-pack__gets li { padding-left: 30px; font-size: 15px; line-height: 1.45; color: var(--t-medium); }
.bl-ss-pack.is-main .bl-ss-pack__gets li { color: var(--t-bright); }
.bl-ss-pack__best { margin: 24px 0 0; font-size: 14px; line-height: 1.4; color: var(--t-muted); }
.bl-ss-pack__note { margin-top: 24px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.bl-ss-pack__cta { margin-top: auto; align-self: stretch; justify-content: center; }
.bl-ss-pack > :nth-last-child(2) { margin-bottom: 32px; }
.bl-ss-packs__more { margin-top: 48px; font-size: 14px; color: var(--t-muted); }
.bl-ss-packs__more a { color: var(--accent-text); }
/* B47 (Owner 2026-11-04: "ensure the scroller is exactly the same position as the web design page
   in the hero"). Every other service hero fills the first screen so the "On this page" bar sits on
   the bottom edge, as on web-design (B38). 66px = the bar. Desktop layout only, like B38. */
@media (min-width: 1200px) {
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) { padding-bottom: 0; }
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .db-hero-09__wrap { box-sizing: border-box; min-height: calc(100svh - 58px); padding-top: 120px !important; padding-bottom: 40px !important; align-content: center; }
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .db-hero-09__stage { min-height: 0; padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 1200px) and (max-height: 940px) {
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .db-hero-09__wrap { padding-top: 96px !important; padding-bottom: 32px !important; }
}
@media (min-width: 1200px) and (max-height: 820px) {
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .db-hero-09__wrap { padding-top: 88px !important; padding-bottom: 24px !important; }
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) h1.hero-09-headline__hooked { font-size: clamp(40px, min(5.6vw, 8vh), 76px) !important; }
}
/* B48 (Owner 2026-11-04: "all text, headers should be exactly like the prototype; Structural
   Strategy Page"). Sizes from the mock at 1440: hero label 12px, sub 23px, lead 17px, price line
   14px; package titles 24px; Blueprint chapter title 32px, chapter list 500 weight. */
#structural-strategy-hero .hero-09-headline__label { font-size: 12px; }
#structural-strategy-hero .hero-09-headline__sub { font-size: 23px; }
#structural-strategy-hero .hero-09-headline__lead { font-size: 17px; font-weight: 400; line-height: 1.6; }
#structural-strategy-hero .hero-09-headline__prices { font-size: 14px; }
main .bl-ss-pack h3 { --bl-h3-list: 24px; }
main:has(#structural-strategy-hero) .bl-ssd__panel > h3 { --bl-h3-list: 32px; line-height: 1.12 !important; letter-spacing: -.025em; }
main:has(#structural-strategy-hero) .bl-ssd__tab span { font-weight: 500; }
main:has(#structural-strategy-hero) .bl-ssd__bar span { font-size: 10.5px; font-weight: 500; }
main:has(#structural-strategy-hero) .bl-ss-viz--tree b { font-size: 12px; }
@media (min-width: 1200px) and (max-height: 780px) {
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .db-hero-09__wrap { padding-top: 80px !important; padding-bottom: 16px !important; }
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) h1.hero-09-headline__hooked { font-size: clamp(40px, min(5.6vw, 6.2vh), 76px) !important; }
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .hero-09-headline__lead { margin-top: 10px; }
}
@media (min-width: 1200px) and (max-height: 780px) {
  .db-section[id$="-hero"]:has(+ .bl-toc--svc) .hero-09-headline__title h1 { font-size: clamp(40px, min(5.6vw, 6.2vh), 76px) !important; }
}

/* B49 Structural Strategy hero drawing, rebuilt from the mock (Owner 2026-11-04: "fix the illustration
   in hero to make it exactly like the mockup"). The mock draws on a 620×540 canvas scaled to its
   540px column; --u is one mock pixel at the current column width. Dark values are the mock's;
   light theme uses the site tokens. */
.bl-ssh { container-type: inline-size; width: 100%; max-width: 540px; margin-left: auto; }
.bl-ssh__canvas {
  --u: calc(100cqw / 620);
  --ssh-card: var(--base); --ssh-map: var(--base); --ssh-node: var(--base-tint);
  --ssh-line: var(--bl-line); --ssh-row: color-mix(in srgb, var(--bl-line) 70%, transparent);
  --ssh-t1: var(--t-bright); --ssh-t2: var(--t-medium); --ssh-t3: var(--t-muted);
  --ssh-acc: var(--accent); --ssh-acc-t: var(--accent-text); --ssh-acc-t2: var(--accent-text);
  --ssh-shadow: 0 40px 80px -30px rgba(15, 23, 42, .25);
  position: relative; width: 100cqw; height: calc(540 * var(--u)); text-align: left;
}
[data-theme="dark"] .bl-ssh__canvas {
  --ssh-card: #111319; --ssh-map: rgba(13, 15, 20, .96); --ssh-node: #161922;
  --ssh-line: rgba(255, 255, 255, .1); --ssh-row: rgba(255, 255, 255, .06);
  --ssh-t1: #fff; --ssh-t2: #e8eaf0; --ssh-t3: #8b93a7;
  --ssh-acc: #2563ff; --ssh-acc-t: #6f8dff; --ssh-acc-t2: #9db6ff;
  --ssh-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7);
}
.bl-ssh__canvas p, .bl-ssh__canvas ol { margin: 0; padding: 0; }
.bl-ssh__blue { position: absolute; left: calc(250 * var(--u)); top: calc(20 * var(--u)); width: calc(370 * var(--u)); height: calc(460 * var(--u)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ssh-line); border-radius: calc(18 * var(--u)); background: var(--ssh-card); box-shadow: var(--ssh-shadow); }
.bl-ssh__bar { display: flex; justify-content: space-between; align-items: center; padding: calc(16 * var(--u)) calc(20 * var(--u)) !important; border-bottom: 1px solid var(--ssh-line); }
.bl-ssh__bar span:first-child { font: 600 max(10px, calc(15 * var(--u))) var(--_font-accent); color: var(--ssh-t1); }
.bl-ssh__bar span:last-child, .bl-ssh__mapbar, .bl-ssh__status em { font: 500 max(10px, calc(9.5 * var(--u))) var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ssh-t3); }
.bl-ssh__list { flex: 1; display: flex; flex-direction: column; padding: calc(8 * var(--u)) calc(20 * var(--u)) !important; list-style: none; }
.bl-ssh__list li { display: grid; grid-template-columns: calc(26 * var(--u)) 1fr calc(18 * var(--u)); align-items: center; padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--ssh-row); font: 400 max(10px, calc(14 * var(--u))) var(--_font-accent); color: var(--ssh-t2); }
.bl-ssh__list li:last-child { border-bottom: 0; }
.bl-ssh__list b { font: 500 max(10px, calc(10.5 * var(--u))) var(--_font-mono); color: var(--ssh-acc-t); }
.bl-ssh__list svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.bl-ssh__list circle { fill: var(--ssh-acc); }
.bl-ssh__list path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bl-ssh__status { display: flex; justify-content: space-between; align-items: center; margin: 0 calc(20 * var(--u)) calc(20 * var(--u)) !important; padding: calc(14 * var(--u)) calc(16 * var(--u)) !important; border: 1px solid var(--ssh-acc); border-radius: calc(12 * var(--u)); background: linear-gradient(90deg, color-mix(in srgb, var(--ssh-acc) 20%, transparent), color-mix(in srgb, var(--ssh-acc) 6%, transparent)); }
.bl-ssh__status > span:first-child { display: flex; flex-direction: column; gap: calc(2 * var(--u)); font: 600 max(10px, calc(15 * var(--u))) var(--_font-accent); color: var(--ssh-t1); }
.bl-ssh__status em { font-style: normal; letter-spacing: .14em; color: var(--ssh-acc-t2); }
.bl-ssh__pill { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--ssh-acc); font: 500 max(10px, calc(12 * var(--u))) var(--_font-accent); color: #fff; }
.bl-ssh__map { position: absolute; left: 0; top: calc(250 * var(--u)); width: calc(300 * var(--u)); height: calc(270 * var(--u)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--ssh-acc-t2) 35%, transparent); border-radius: calc(18 * var(--u)); background: var(--ssh-map); box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgba(0, 0, 0, .5), 0 0 0 calc(6 * var(--u)) var(--base); }
.bl-ssh__mapbar { display: flex; justify-content: space-between; padding: calc(12 * var(--u)) calc(16 * var(--u)) !important; border-bottom: 1px solid var(--ssh-row); }
.bl-ssh__mapbar span:first-child { color: var(--ssh-acc-t2); }
.bl-ssh__lines { position: absolute; left: 0; top: calc(38 * var(--u)); width: calc(300 * var(--u)); height: calc(230 * var(--u)); fill: none; }
.bl-ssh__lines path { stroke: color-mix(in srgb, var(--ssh-acc-t2) 35%, transparent); stroke-width: 1.3; }
.bl-ssh__lines path.is-on { stroke: var(--ssh-acc); stroke-width: 2; }
.bl-ssh__node { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); padding: calc(7 * var(--u)) 0; border: 1px solid var(--ssh-line); border-radius: calc(8 * var(--u)); background: var(--ssh-node); text-align: center; font: 500 max(10px, calc(12.5 * var(--u))) var(--_font-accent); color: var(--ssh-t1); }
[data-theme="dark"] .bl-ssh__node { border-color: rgba(255, 255, 255, .14); }
.bl-ssh__node.is-main { border-color: var(--ssh-acc); background: color-mix(in srgb, var(--ssh-acc) 18%, var(--ssh-map)); }
.bl-ssh__rel { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); transform: rotate(var(--r)); font: 400 max(10px, calc(9.5 * var(--u))) var(--_font-mono); color: var(--ssh-t3); }
.bl-ssh__rel.is-on { color: var(--ssh-acc-t2); }
.bl-ssh__steps { position: absolute; left: 0; top: calc(30 * var(--u)); width: calc(220 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.bl-ssh__steps span { font: 500 max(10px, calc(10.5 * var(--u))) var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ssh-t3); }
.bl-ssh__steps span.is-on { color: var(--ssh-acc-t2); }
.bl-ssh__steps i { width: calc(40 * var(--u)); height: 1px; margin-top: calc(6 * var(--u)); background: var(--ssh-acc); }
@media (min-width: 1200px) {
  #structural-strategy-hero .db-hero-09__visual { width: calc(100% + 66px); margin-left: -41px; } /* mock: drawing fills the 540px right column */
  #structural-strategy-hero .bl-ssh { max-width: 540px; }
}
#structural-strategy-hero .db-hero-09__grid { display: none; } /* the mock drawing has no grid behind it */

/* B50 (Owner 2026-11-04): Structural Strategy benefits match the prototype type —
   card titles 19/600, card text and lead 15/18 at weight 400 (was 20, 15.5 and 300). */
main:has(#structural-strategy-hero) .bl-benefits .bl-benefits__title { --bl-h3-list: 19px; }
main:has(#structural-strategy-hero) .bl-benefits p:not(.bl-svc-head__eyebrow) { font-size: 15px; line-height: 1.55; font-weight: 400; }
main:has(#structural-strategy-hero) .bl-svc-head__lead { font-weight: 400; }

/* B50 (Owner 2026-11-04): Structural Strategy process, prototype layout. Stages 1–5 scroll
   sideways; the Approved Blueprint stays fixed at the end of the row. */
.bl-ssp { display: flex; flex-direction: column; gap: 56px; }
.bl-ssp__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .bl-ssp__row { grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; } }
@media (min-width: 1200px) { .bl-ssp__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .bl-ssp__track { grid-column: span 4; } }
.bl-ssp__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: 4px; }
.bl-ssp__track { padding-bottom: 12px; }
.bl-ssp__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: -32px; }
.bl-ssp__nav[hidden] { display: none; }
.bl-ssp__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bl-line); background: transparent; color: var(--t-bright, currentColor); font-size: 18px; line-height: 1; cursor: pointer; }
.bl-ssp__nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bl-ssp__nav button:disabled { opacity: .35; cursor: default; }
.bl-ssp__nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bl-ssp__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.bl-ssp__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 260px); gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; }
@media (min-width: 768px) { .bl-ssp__list { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (min-width: 1200px) { .bl-ssp__list { grid-auto-columns: calc((100% - 36px) / 4); } }
.bl-ssp__step, .bl-ssp__end { display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; min-width: 0; }
.bl-ssp__line { display: block; height: 3px; border-radius: 2px; background: var(--bl-line); }
.bl-ssp__step.is-first .bl-ssp__line, .bl-ssp__end .bl-ssp__line { background: var(--accent); }
.bl-ssp__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bl-line); font: 500 13px/1 "Geist Mono", ui-monospace, monospace; color: var(--t-muted); }
.bl-ssp__step.is-first .bl-ssp__n, .bl-ssp__n--done { background: var(--accent); border-color: var(--accent); color: #fff; }
main .bl-ssp h3 { --bl-h3-list: 18px; margin: 0; font-weight: 600; line-height: 1.3; }
.bl-ssp__step p, .bl-ssp__end p { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 400; color: var(--t-muted); }
.bl-ssp .bl-ss-work { margin-top: 0; }

/* B51 (Owner 2026-11-04, handoff guide: text inside illustrations at least 10px). The drawing's
   text is floored at 10px; on narrow drawings the side step labels and line labels would then
   collide, so they are left out there (the drawing still reads: Blueprint card + entity map). */
@container (max-width: 459px) {
  .bl-ssh__steps, .bl-ssh__rel { display: none; }
}

/* ---------------------------------------------------------------
   B52 Site header, rebuilt to the prototype (Owner 2026-11-04;
   designWork/Area Redesign Options/Site Header.dc.html). Markup and script:
   theme/core/site-header.php. Dark values are the prototype's; light mirrors the light guide.
---------------------------------------------------------------- */
:root {
  --bl-hdr-h: 68px;
  --hdr-bg: rgba(247, 248, 251, .86); --hdr-line: rgba(10, 11, 15, .08);
  --hdr-t1: #0a0b0f; --hdr-t2: #3f4350; --hdr-t3: #5d6475; --hdr-t4: #6b7386;
  --hdr-hover: rgba(10, 11, 15, .05); --hdr-active: rgba(10, 11, 15, .07);
  --hdr-panel: #ffffff; --hdr-panel-line: rgba(37, 99, 255, .22); --hdr-inset: #f4f6fa;
  --hdr-acc-t: #1d4fd8; --hdr-badge: rgba(37, 99, 255, .1); --hdr-badge-t: #1d4fd8;
  --hdr-scrim: rgba(10, 11, 15, .28); --hdr-outline: rgba(10, 11, 15, .18);
}
:root[data-theme="dark"] {
  --hdr-bg: rgba(10, 11, 15, .82); --hdr-line: rgba(255, 255, 255, .07);
  --hdr-t1: #ffffff; --hdr-t2: #c9cdd8; --hdr-t3: #a3a9b8; --hdr-t4: #8b93a7;
  --hdr-hover: rgba(255, 255, 255, .06); --hdr-active: rgba(255, 255, 255, .08);
  --hdr-panel: #0d0f14; --hdr-panel-line: rgba(157, 182, 255, .2); --hdr-inset: #08090c;
  --hdr-acc-t: #9db6ff; --hdr-badge: rgba(37, 99, 255, .16); --hdr-badge-t: #cfdcff;
  --hdr-scrim: rgba(5, 6, 9, .55); --hdr-outline: rgba(255, 255, 255, .18);
}
header.db-header.bl-hdr {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto; display: block;
  padding: 0 !important; gap: 0; z-index: 101; transform: none !important; opacity: 1 !important;
  background: var(--hdr-bg); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hdr-line); box-shadow: none;
  transition: transform .3s ease;
}
.bl-hdr__bar { box-sizing: border-box; max-width: var(--bl-site); height: var(--bl-hdr-h); margin: 0 auto; padding: 0 var(--bl-gutter); display: flex; align-items: center; gap: 24px; }
.bl-hdr__logo { display: flex; align-items: center; flex: none; }
.bl-hdr__logo img { display: block; height: 24px; width: auto; }
.bl-hdr__nav { flex: 1; display: none; justify-content: center; align-items: center; gap: 4px; }
.bl-hdr__link { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--hdr-t2); font: 500 14.5px/1 var(--_font-accent); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.bl-hdr__link:hover, .bl-hdr__link.is-current { background: var(--hdr-hover); color: var(--hdr-t1); }
.bl-hdr__svc { color: var(--hdr-t1); gap: 6px; }
.bl-hdr__svc svg { transition: transform .2s; }
.bl-hdr__svc[aria-expanded="true"] { background: var(--hdr-active); }
.bl-hdr__svc[aria-expanded="true"] svg { transform: rotate(180deg); }
.bl-hdr__count { padding: 1px 6px; border-radius: 999px; background: rgba(37, 99, 255, .2); font: 500 10.5px/1.5 var(--_font-mono); color: var(--hdr-badge-t); }
.bl-hdr__cta { display: none; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; background: #2563ff; color: #fff !important; font: 500 14.5px/1 var(--_font-accent); text-decoration: none; box-shadow: 0 10px 24px -10px rgba(37, 99, 255, .9); transition: background-color .2s; }
.bl-hdr__cta:hover { background: #1f4fe0; }
.bl-hdr__menu { margin-left: auto; display: flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hdr-outline); background: transparent; color: var(--hdr-t1); font: 500 14px/1 var(--_font-accent); cursor: pointer; }
.bl-hdr :focus-visible, .bl-hdr__mobile :focus-visible { outline: 2px solid #9db6ff; outline-offset: 2px; }
@media (min-width: 900px) {
  .bl-hdr__nav { display: flex; }
  .bl-hdr__cta { display: inline-flex; }
  .bl-hdr__menu { display: none; }
}
/* Services panel */
.bl-hdr__mega { position: absolute; left: 0; right: 0; top: 100%; padding: 10px var(--bl-gutter) 0; }
.bl-hdr__mega[hidden], .bl-hdr__scrim[hidden], .bl-hdr__mobile[hidden] { display: none !important; }
.bl-hdr__panel { max-width: calc(var(--bl-site) - 2 * var(--bl-gutter)); margin: 0 auto; border-radius: 24px; background: var(--hdr-panel); border: 1px solid var(--hdr-panel-line); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .55); overflow: hidden; }
:root[data-theme="dark"] .bl-hdr__panel { box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .9); }
.bl-hdr__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
.bl-hdr__col { padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.bl-hdr__col + .bl-hdr__col, .bl-hdr__col--core { border-right: 1px solid var(--hdr-line); }
.bl-hdr__col:last-child { border-right: 0; }
.bl-hdr__col--core { gap: 8px; background: radial-gradient(90% 70% at 0% 0%, rgba(37, 99, 255, .18), transparent 70%); }
.bl-hdr__label { padding: 0 14px 6px; font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hdr-t4); }
.bl-hdr__mega a { text-decoration: none; }
.bl-hdr__core { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 16px; border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.bl-hdr__core:hover, .bl-hdr__core:focus-visible, .bl-hdr__core.is-current { background: rgba(37, 99, 255, .12); border-color: rgba(37, 99, 255, .5); }
.bl-hdr__n { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #2563ff; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--_font-mono); color: var(--hdr-badge-t); transition: background-color .2s, color .2s; }
.bl-hdr__core:hover .bl-hdr__n, .bl-hdr__core.is-current .bl-hdr__n { background: #2563ff; color: #fff; }
.bl-hdr__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bl-hdr__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.bl-hdr__name strong { font: 600 16.5px/1.25 var(--_font-accent); color: var(--hdr-t1); }
.bl-hdr__core .bl-hdr__name strong { font-size: 17.5px; }
.bl-hdr__name em { font: 500 11px/1.4 var(--_font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--hdr-acc-t); }
.bl-hdr__name em.is-badge { padding: 3px 9px; border-radius: 999px; background: var(--hdr-badge); font-size: 10.5px; color: var(--hdr-badge-t); align-self: center; }
.bl-hdr__desc { font: 400 14px/1.45 var(--_font-accent); color: var(--hdr-t4); }
.bl-hdr__core .bl-hdr__desc { color: var(--hdr-t3); }
.bl-hdr__item { padding: 12px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 5px; transition: background-color .2s; }
.bl-hdr__item:hover, .bl-hdr__item:focus-visible, .bl-hdr__item.is-current { background: var(--hdr-hover); }
.bl-hdr__bones { margin-top: 6px; padding: 16px 18px; border-radius: 16px; background: var(--hdr-inset); border: 1px solid var(--hdr-line); display: flex; flex-direction: column; gap: 12px; transition: border-color .2s; }
.bl-hdr__bones:hover { border-color: rgba(157, 182, 255, .45); }
.bl-hdr__bones-t { display: flex; justify-content: space-between; align-items: center; font: 600 16px/1.3 var(--_font-accent); color: var(--hdr-t1); }
.bl-hdr__bones-t span { color: var(--hdr-acc-t); }
.bl-hdr__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-hdr__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hdr-outline); font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hdr-t3); }
.bl-hdr__pill.is-live { background: rgba(37, 99, 255, .14); border-color: rgba(37, 99, 255, .55); color: var(--hdr-badge-t); }
.bl-hdr__pill i { width: 6px; height: 6px; border-radius: 50%; background: #2563ff; }
.bl-hdr__all { margin-top: auto; padding: 14px; display: flex; justify-content: space-between; font: 500 15px/1.3 var(--_font-accent); color: var(--hdr-acc-t) !important; }
.bl-hdr__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px 16px 36px; border-top: 1px solid var(--hdr-line); background: var(--hdr-inset); }
.bl-hdr__strip p { margin: 0; font: 400 15px/1.4 var(--_font-accent); color: var(--hdr-t4); }
.bl-hdr__strip p span { color: var(--hdr-t1); }
.bl-hdr__strip-btns { display: flex; gap: 8px; }
.bl-hdr__btn { height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--hdr-outline); display: flex; align-items: center; color: var(--hdr-t1) !important; font: 500 14.5px/1 var(--_font-accent); }
.bl-hdr__btn:hover { border-color: var(--hdr-t3); }
.bl-hdr__btn.is-primary { background: #2563ff; border-color: #2563ff; color: #fff !important; }
.bl-hdr__btn.is-primary:hover { background: #1f4fe0; }
.bl-hdr__scrim { position: fixed; inset: 0; z-index: 100; background: var(--hdr-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Phone menu */
.bl-hdr__mobile { position: fixed; inset: var(--bl-hdr-h) 0 0 0; z-index: 102; overflow: auto; background: var(--base, #0a0b0f); padding: 20px var(--bl-gutter) 32px; display: flex; flex-direction: column; gap: 22px; }
:root[data-theme="dark"] .bl-hdr__mobile { background: #0a0b0f; }
:root:not([data-theme="dark"]) .bl-hdr__mobile { background: #f7f8fb; }
.bl-hdr__mobile nav { display: flex; flex-direction: column; }
.bl-hdr__mobile nav a { padding: 14px 0; border-bottom: 1px solid var(--hdr-line); font: 600 22px/1.3 var(--_font-accent); color: var(--hdr-t1); text-decoration: none; }
.bl-hdr__mobile nav a.is-current { color: var(--hdr-acc-t); }
.bl-hdr__mcta { height: 50px; border-radius: 999px; background: #2563ff; color: #fff !important; font: 500 16px/1 var(--_font-accent); display: flex; align-items: center; justify-content: center; text-decoration: none; }
html.bl-hdr-lock, html.bl-hdr-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .bl-hdr *, header.db-header.bl-hdr { transition: none !important; } }
.bl-hdr__logo-l, :root[data-theme="dark"] .bl-hdr__logo-l { display: none !important; }
:root:not([data-theme="dark"]) .bl-hdr__logo-d { display: none !important; }
:root:not([data-theme="dark"]) .bl-hdr__logo-l { display: block !important; }

/* B51 R2 (QA F1): the guide uses Geist 400/500/600 only; browser bold is 700. */
b, strong, th { font-weight: 600; }

/* ---------------------------------------------------------------
   B53 On-this-page bar and header effect, to the prototype (Owner 2026-11-04:
   "the page tracer too and the header effect"; Header.dc.html, PAGE-NOTES "On-this-page bar").
   Bar 54px + 1px line + 3px section progress = 58px. After 90px of scrolling (html.bl-condensed, set by
   window.blToc in theme/core/site-header.php) the main header slides up and the bar shows the logo.
---------------------------------------------------------------- */
:root { --toc-bg: rgba(247, 248, 251, .92); --toc-t-now: #0a0b0f; --toc-t-past: #3f4350; --toc-t-next: #5d6475; --toc-n: #6b7386; --toc-n-now: #1d4fd8; --toc-seg: rgba(10, 11, 15, .07); }
:root[data-theme="dark"] { --toc-bg: rgba(13, 15, 20, .9); --toc-t-now: #ffffff; --toc-t-past: #c9cdd8; --toc-t-next: #8b93a7; --toc-n: #5d6475; --toc-n-now: #9db6ff; --toc-seg: rgba(255, 255, 255, .06); }
header.db-header.bl-hdr { transition: transform .3s ease; }
html.bl-condensed header.db-header.bl-hdr { transform: translateY(-100%) !important; }
nav.bl-toc { top: var(--bl-hdr-h); border-top: 0; border-bottom: 1px solid var(--hdr-line); background: var(--toc-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: top .3s ease; }
html.bl-condensed nav.bl-toc { top: 0; }
html.bl-mega-open nav.bl-toc { opacity: 0; pointer-events: none; } /* B65: class set by setMega, not html:has() */
nav.bl-toc .db-container { max-width: var(--bl-site); padding-inline: var(--bl-gutter); }
nav.bl-toc .bl-toc__inner { height: 54px; padding: 0; gap: 16px; }
nav.bl-toc .bl-toc__label { display: none !important; }
.bl-toc__logo { display: none; flex: none; align-items: center; padding-right: 14px; border-right: 1px solid var(--hdr-line); }
.bl-toc__logo img { display: block; width: 28px; height: 28px; border-radius: 6px; } /* favicon mark (Owner 2026-11-04) */
html.bl-condensed .bl-toc__logo { display: flex; }
nav.bl-toc .bl-toc__list { flex: 1; min-width: 0; gap: 2px; scroll-snap-type: x proximity; }
nav.bl-toc .bl-toc__list li { flex: none; scroll-snap-align: start; }
nav.bl-toc .bl-toc__list a { min-height: 36px; height: 36px; gap: 7px; padding: 0 12px; border-radius: 10px; font: 500 14px/1 var(--_font-accent); color: var(--toc-t-next); background: transparent; transition: background-color .2s, color .2s; }
nav.bl-toc .bl-toc__list a.is-past { color: var(--toc-t-past); }
nav.bl-toc .bl-toc__list a:hover { color: var(--toc-t-now); background: var(--hdr-hover); }
nav.bl-toc .bl-toc__list a[aria-current] { color: var(--toc-t-now); background: rgba(37, 99, 255, .16); }
nav.bl-toc .bl-toc__list a span { font: 500 11px/1 var(--_font-mono); color: var(--toc-n); opacity: 1; }
nav.bl-toc .bl-toc__list a[aria-current] span { color: var(--toc-n-now); }
nav.bl-toc .bl-toc__count { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 0 0 14px; border-left: 1px solid var(--hdr-line); font: 500 12px/1 var(--_font-mono); color: var(--toc-t-next); }
nav.bl-toc .bl-toc__count b { font-weight: 500; color: var(--toc-t-now); }
nav.bl-toc .bl-toc__calc { flex: none; height: 38px; min-height: 38px; min-width: 38px; padding: 0 16px; gap: 8px; justify-content: center; border: 1px solid rgba(37, 99, 255, .6); background: rgba(37, 99, 255, .12); color: var(--toc-t-now); font: 500 13.5px/1 var(--_font-accent); }
nav.bl-toc .bl-toc__calc svg { width: 14px; height: 14px; color: var(--hdr-acc-t); }
.bl-toc__segs { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 3px; height: 3px; }
.bl-toc__segs > span { display: block; height: 3px; overflow: hidden; background: var(--toc-seg); }
.bl-toc__segs i { display: block; height: 100%; background: rgba(37, 99, 255, .55); transform: scaleX(0); transform-origin: left center; }
.bl-toc__segs > span.is-active i { background: #2563ff; }
.bl-toc-target { scroll-margin-top: 72px; }
/* B58b: web-design anchors too (were header + 112 = 180px, which left the section below the 140px tracker line). */
.bl-anchor { scroll-margin-top: calc(58px + clamp(40px, 12vh, 120px)); } /* B61/B63: bar + the same gap as a bar jump */
@media (max-width: 1099.98px) {
  nav.bl-toc .bl-toc__list a span, nav.bl-toc .bl-toc__count { display: none !important; }
  nav.bl-toc .bl-toc__calc { padding: 0 11px; font-size: 0; gap: 0; }
}
@media (max-width: 759.98px) {
  nav.bl-toc .bl-toc__list { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media (pointer: coarse) { nav.bl-toc .bl-toc__list a { min-height: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { header.db-header.bl-hdr, nav.bl-toc { transition: none !important; } }

/* B55 (Owner 2026-11-04, "Yes, join them"): the On this page bar is joined to the header from
   the top of the page, as in Header.dc.html. It is fixed under the 68px header; after 90px the
   header slides up and the bar moves to the top with it (same .3s). Page content starts 58px
   lower so nothing sits under the bar; the hero fit (100svh - 58px) then fills the screen. */
nav.bl-toc { position: fixed !important; left: 0; right: 0; top: var(--bl-hdr-h); z-index: 100; }
html.bl-condensed nav.bl-toc { top: 0; }
main.db-page-content:has(nav.bl-toc) { padding-top: 58px; }
html:has(.bl-hdr__mobile:not([hidden])) nav.bl-toc { visibility: hidden; }

/* ===================================================================== */
/* B56 footer (2026-11-04), to designWork Footer.dc.html. Markup: theme/core/site-footer.php */
/* ===================================================================== */
.bl-ft {
  --ft-bg: #07080b; --ft-bar: #060709; --ft-card: #0d0f14; --ft-news: #111319; --ft-field: #0b0c10;
  --ft-line: rgba(255,255,255,.08); --ft-line-2: rgba(255,255,255,.14); --ft-hover: rgba(157,182,255,.45);
  --ft-text: #fff; --ft-link: #c9cdd8; --ft-muted: #8b93a7; --ft-dim: #6b7386; --ft-ghost: #5d6475; --ft-legal: #a3a9b8;
  --ft-sky: #9db6ff; --ft-main: #6f8dff; --ft-blue: #2563ff; --ft-tile: rgba(37,99,255,.14);
  --ft-glow: rgba(37,99,255,.14); --ft-mark-lit: #cfdcff; --ft-bad: #ff8f8f; --ft-bad-line: #ff6b6b;
  position: relative; overflow: hidden; background: var(--ft-bg); border-top: 1px solid var(--ft-line);
  color: var(--ft-text); font-family: Geist, system-ui, sans-serif; padding: 0; margin: 0;
}
:root:not([data-theme="dark"]) .bl-ft {
  /* Light values from the handoff dark → light mapping (designWork handoff/dbeta-tokens.css, Style Guide Light) */
  --ft-bg: #eef0f5; --ft-bar: #e6e9f0; --ft-card: #f1f3f8; --ft-news: #fff; --ft-field: #fff;
  --ft-line: rgba(11,13,18,.08); --ft-line-2: rgba(11,13,18,.14); --ft-hover: rgba(37,99,255,.45);
  --ft-text: #0b0d12; --ft-link: #3a4152; --ft-muted: #5f6779; --ft-dim: #7a8293; --ft-ghost: #9aa1b0; --ft-legal: #4f576a;
  --ft-sky: #1f4fe0; --ft-main: #2563ff; --ft-tile: rgba(37,99,255,.14);
  --ft-glow: rgba(37,99,255,.14); --ft-mark-lit: #1a3fb8; --ft-bad: #c62a2f; --ft-bad-line: #e5484d;
}
.bl-ft a { color: var(--ft-link); text-decoration: none; transition: color .2s, border-color .2s; }
.bl-ft a:hover { color: var(--ft-text); }
.bl-ft a:focus-visible, .bl-ft button:focus-visible { outline: 2px solid var(--ft-sky); outline-offset: 3px; border-radius: 6px; }
.bl-ft__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 15% 0%, var(--ft-glow), transparent 70%); }
.bl-ft__in { position: relative; max-width: var(--bl-site); margin: 0 auto; padding: clamp(48px,6vw,80px) var(--bl-gutter) 0; display: flex; flex-direction: column; gap: clamp(40px,5vw,64px); }

.bl-ft__top { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; justify-content: space-between; }
.bl-ft__intro { flex: 1.4 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.bl-ft__logo { align-self: flex-start; display: inline-flex; }
.bl-ft__logo img { height: 22px; width: auto; }
.bl-ft__statement { margin: 0; max-width: 620px; font: 500 clamp(24px,2.8vw,34px)/1.2 Geist, sans-serif; letter-spacing: -.025em; color: var(--ft-text); text-wrap: balance; }
.bl-ft__statement span { color: var(--ft-sky); }

.bl-ft__news { flex: 1 1 360px; min-width: 0; max-width: 480px; padding: 20px; border-radius: 20px; background: var(--ft-news); border: 1px solid var(--ft-line); display: flex; flex-direction: column; gap: 12px; }
.bl-ft__news-head { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ft-muted); }
.bl-ft .bl-ft__news-head a { color: var(--ft-sky); letter-spacing: .08em; }
.bl-ft__news .form-container { display: flex; flex-direction: column; gap: 12px; }
.bl-ft__form { display: flex; align-items: center; gap: 6px; height: 52px; padding: 5px 5px 5px 18px; margin: 0; border-radius: 999px; background: var(--ft-field); border: 1px solid var(--ft-line-2); transition: border-color .2s; }
.bl-ft__form:focus-within { border-color: var(--ft-hover); }
.bl-ft__form.is-bad { border-color: var(--ft-bad-line); }
.bl-ft__form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ft-text); font: 400 15px Geist, sans-serif; padding: 0; box-shadow: none; outline: none; }
.bl-ft__form input::placeholder { color: var(--ft-dim); opacity: 1; }
.bl-ft__form button { flex: none; cursor: pointer; height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ft-blue); color: #fff; font: 500 14px Geist, sans-serif; display: flex; align-items: center; gap: 8px; transition: background .2s; }
.bl-ft__form button:hover { background: #1f4fe0; }
.bl-ft__hint { font: 400 13px Geist, sans-serif; color: var(--ft-muted); }
.bl-ft__form.is-bad ~ .bl-ft__hint { color: var(--ft-bad); }
.bl-ft__form.is-hidden, .bl-ft__form.is-hidden ~ .bl-ft__hint { display: none; }
.bl-ft .form__reply { display: none; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 999px; background: rgba(37,99,255,.12); border: 1px solid rgba(37,99,255,.5); font: 400 14px Geist, sans-serif; color: var(--ft-text); }
.bl-ft .form__reply.subscription-error { background: rgba(255,107,107,.1); border-color: var(--ft-bad-line); }
.bl-ft .form__reply.is-visible, .bl-ft .form__reply[style*="block"], .bl-ft .form__reply[style*="flex"] { display: flex !important; }

.bl-ft__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px), 1fr)); gap: 10px; }
.bl-ft__card { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--ft-card); border: 1px solid var(--ft-line); }
.bl-ft a.bl-ft__card:hover { border-color: var(--ft-hover); }
.bl-ft__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--ft-tile); display: flex; align-items: center; justify-content: center; color: var(--ft-sky); }
.bl-ft__card-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-ft__card-t > span { font: 500 10.5px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ft-muted); }
.bl-ft__card-t strong { font: 500 15px/1.3 Geist, sans-serif; color: var(--ft-text); overflow-wrap: anywhere; }
.bl-ft__card-t strong.is-addr { font-weight: 400; font-size: 14px; color: var(--ft-link); }
.bl-ft__go { color: var(--ft-dim); transition: transform .2s, color .2s; }
.bl-ft a.bl-ft__card:hover .bl-ft__go { color: var(--ft-sky); transform: translateX(3px); }

.bl-ft__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,170px), 1fr)); gap: 36px 28px; padding-top: 36px; border-top: 1px solid var(--ft-line); }
.bl-ft__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bl-ft__col > a { font: 400 15px/1.3 Geist, sans-serif; display: inline-flex; align-items: center; gap: 8px; }
.bl-ft .bl-ft__col > a.is-strong { font-weight: 500; color: var(--ft-text); }
.bl-ft__label { display: flex; align-items: center; gap: 8px; font: 500 10.5px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ft-muted); }
.bl-ft__label.is-main { color: var(--ft-main); }
.bl-ft__label i { width: 6px; height: 6px; border-radius: 50%; background: var(--ft-blue); }
.bl-ft__rule { align-self: stretch; height: 1px; background: var(--ft-line); margin: 2px 0; }
.bl-ft__count { padding: 1px 7px; border-radius: 999px; background: rgba(37,99,255,.18); font: 500 11px 'Geist Mono', monospace; color: var(--ft-mark-lit); }
.bl-ft__sub { font: 400 12px Geist, sans-serif; color: var(--ft-dim); margin-bottom: -4px; }
.bl-ft__chips + .bl-ft__sub { margin-top: 4px; }
.bl-ft__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-ft__chips a { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ft-line-2); font: 400 13px Geist, sans-serif; }
.bl-ft .bl-ft__chips a:hover { border-color: var(--ft-hover); }

.bl-ft__mark { position: relative; display: flex; flex-direction: column; gap: clamp(10px,1.5vw,18px); user-select: none; cursor: crosshair; }
.bl-ft__mark-row { display: flex; justify-content: space-between; gap: 16px; font: 500 10.5px 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ft-ghost); }
.bl-ft__xy { color: var(--ft-ghost); transition: color .3s; }
.bl-ft__mark.is-hover .bl-ft__xy { color: var(--ft-sky); }
.bl-ft__mark svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bl-ft__mark stop[stop-color="#9db6ff"], .bl-ft__mark pattern path { stop-color: var(--ft-sky); stroke: var(--ft-sky); }
.bl-ft__mark-base { stroke: var(--ft-sky); stroke-opacity: .2; }
.bl-ft__mark-lit { stroke: var(--ft-mark-lit); opacity: .55; transition: opacity .4s; }
.bl-ft__mark.is-hover .bl-ft__mark-lit { opacity: 1; }

.bl-ft__bar { position: relative; border-top: 1px solid var(--ft-line); background: var(--ft-bar); }
.bl-ft__bar-in { max-width: var(--bl-site); margin: 0 auto; padding: 18px var(--bl-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.bl-ft__ids { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 13px Geist, sans-serif; color: var(--ft-muted); }
.bl-ft__ids .is-strong { color: var(--ft-link); }
.bl-ft .bl-ft__ids a { color: inherit; }
.bl-ft__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font: 400 13px Geist, sans-serif; }
.bl-ft .bl-ft__legal a, .bl-ft__legal button[data-cookie-settings] { color: var(--ft-legal); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.bl-ft__legal button[data-cookie-settings]:hover { color: var(--ft-text); }
.bl-ft .bl-ft__legal a.is-mono { font-family: 'Geist Mono', monospace; font-size: 12px; }
.bl-ft__top-btn { cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ft-line-2); background: transparent; color: var(--ft-text); font: 500 12.5px Geist, sans-serif; transition: border-color .2s; }
.bl-ft__top-btn:hover { border-color: var(--ft-hover); }
@media (max-width: 559px) {
  .bl-ft__mark-row span:first-child, .bl-ft__mark-row span:last-child { display: none; }
  .bl-ft__mark-row { justify-content: center; }
  .bl-ft__legal a, .bl-ft__legal button { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .bl-ft *, .bl-ft__mark-lit { transition: none !important; } }

/* ===================================================================== */
/* B57 light theme to the prototype (Owner 2026-11-04: "ansure light theme aligns with the
   prototype colour schema ... the whole website"). Values: designWork handoff/dbeta-tokens.css
   [data-theme="light"] and the Style Guide Light dark → light mapping. Overrides the "Crisp light"
   tokens above; dark is unchanged. Owner-set hero glow shape kept, recoloured to #2563ff. */
/* ===================================================================== */
:root:not([data-theme="dark"]) {
  --base--light: #f7f8fb; --base-rgb--light: 247, 248, 251;   /* --bg-page */
  --base-tint--light: #ffffff;                                 /* --bg-card */
  --base-shade--light: #eef0f5;                                /* --bg-footer, side rails */
  --base-opp--light: #0b0d12; --base-opp-tint--light: #1c2130; /* --ink, --text-strong */
  --accent--light: #2563ff; --accent-rgb--light: 37, 99, 255;  /* --blue */
  --accent-text--light: #1f4fe0;                               /* --blue-300 (links, accents) */
  --additional--light: #2563ff; --additional-rgb--light: 37, 99, 255;
  --t-bright--light: #0b0d12;                                  /* --ink */
  --t-medium--light: #3a4152;                                  /* --text */
  --t-muted--light: #5f6779;                                   /* --text-subtle */
  --t-muted-extra--light: #7a8293;                             /* --text-faint */
  --st-bright--light: #0b0d12; --st-medium--light: #5f6779; --st-muted--light: #cfd4de;
  --neutral-transparent--light: rgba(11, 13, 18, .06);         /* --line-hair */
  --bl-line: rgba(11, 13, 18, .08);                            /* --line */
  --bl-edge-top: rgba(11, 13, 18, .06);
  --bl-glass: rgba(247, 248, 251, .86);
  --bl-e1: var(--bl-rim), 0 0 0 1px rgba(11, 13, 18, .04), 0 1px 2px rgba(15, 23, 42, .06);
  --bl-e2: var(--bl-rim), 0 0 0 1px rgba(11, 13, 18, .04), 0 24px 48px -20px rgba(15, 23, 42, .16);
  --bl-primary-hover: #1f4fe0;
  --focus-ring: #1f4fe0;
  /* header, panel and phone menu */
  --hdr-bg: rgba(247, 248, 251, .86); --hdr-line: rgba(11, 13, 18, .08);
  --hdr-t1: #0b0d12; --hdr-t2: #3a4152; --hdr-t3: #4f576a; --hdr-t4: #5f6779;
  --hdr-hover: rgba(11, 13, 18, .06); --hdr-active: rgba(11, 13, 18, .08);
  --hdr-panel: #ffffff; --hdr-panel-line: rgba(37, 99, 255, .2); --hdr-inset: #f4f6fa;
  --hdr-acc-t: #1f4fe0; --hdr-badge: rgba(37, 99, 255, .16); --hdr-badge-t: #1a3fb8;
  --hdr-scrim: rgba(15, 23, 42, .28); --hdr-outline: rgba(11, 13, 18, .18);
  /* on-this-page bar */
  --toc-bg: rgba(241, 243, 248, .9); --toc-t-now: #0b0d12; --toc-t-past: #3a4152; --toc-t-next: #5f6779;
  --toc-n: #7a8293; --toc-n-now: #1f4fe0; --toc-seg: rgba(11, 13, 18, .06);
}
:root:not([data-theme="dark"]) .bl-hdr__mobile { background: #f7f8fb; }
:root:not([data-theme="dark"]) .bl-hdr :focus-visible, :root:not([data-theme="dark"]) .bl-hdr__mobile :focus-visible { outline-color: #1f4fe0; }
:root:not([data-theme="dark"]) .bl-hdr__count { background: rgba(37, 99, 255, .16); }

/* ===================================================================== */
/* B57b dark theme to the prototype (Owner 2026-11-04: "Yes, match dark too"). Values: designWork
   handoff/dbeta-tokens.css :root (dark default). Header, bar and footer already use these. */
/* ===================================================================== */
:root[data-theme="dark"] {
  --base--dark: #0a0b0f; --base-rgb--dark: 10, 11, 15;         /* --bg-page */
  --base-tint--dark: #111319;                                  /* --bg-card */
  --base-shade--dark: #07080b;                                 /* --bg-footer */
  --base-opp--dark: #f7f8fb; --base-opp-tint--dark: #ffffff;
  --accent--dark: #2563ff; --accent-rgb--dark: 37, 99, 255;    /* --blue */
  --accent-text--dark: #9db6ff;                                /* --blue-300 (links, accents) */
  --additional--dark: #9db6ff; --additional-rgb--dark: 157, 182, 255;
  --t-bright--dark: #ffffff;                                   /* --ink */
  --t-medium--dark: #c9cdd8;                                   /* --text */
  --t-muted--dark: #8b93a7;                                    /* --text-subtle */
  --t-muted-extra--dark: #6b7386;                              /* --text-faint */
  --st-bright--dark: #ffffff; --st-medium--dark: #6b7386; --st-muted--dark: #2a2e38;
  --neutral-transparent--dark: rgba(255, 255, 255, .06);       /* --line-hair */
  --bl-line: rgba(255, 255, 255, .08);                         /* --line */
  --bl-edge-top: rgba(255, 255, 255, .12);                     /* --line-strong */
  --bl-glass: rgba(10, 11, 15, .82);
  --bl-hover: rgba(255, 255, 255, .06);
  --bl-primary-hover: #1f4fe0;
  --focus-ring: #9db6ff;
}

/* B58 brand identity (Owner 2026-11-04): wordmark 24px in the desktop header, 20px on phones and in the footer;
   the tracker uses the favicon tile, which needs no rounding of its own. */
.bl-hdr__logo img { height: 22px; } /* B62 (Owner 2026-11-04: "the logo should be bigger in the header") */
@media (min-width: 900px) { .bl-hdr__logo img { height: 28px; } }
.bl-ft__logo img { height: 20px; }
.bl-toc__logo img { border-radius: 0; }

/* ===================================================================== */
/* B59 type and components to the style guide (Owner 2026-11-04: "check fonts, styles, sizes ...
   our DBETA Style Guide Light"). Source: DBETA Style Guide (Light).dc.html, handoff/dbeta-tokens.css
   and the page mocks. Kept on purpose: Batch 30 laptop-height H2 sizes (Owner), 3:1 form field edges (UX-3). */
/* ===================================================================== */
:root { --bl-copy: #a3a9b8; --bl-btn-line: rgba(255, 255, 255, .18); }          /* --text-muted, --line-outline */
:root:not([data-theme="dark"]) { --bl-copy: #4f576a; --bl-btn-line: rgba(11, 13, 18, .18); }

/* Body copy: the guide's body and body-large colour (#a3a9b8 dark, #4f576a light). Rules that set their own colour still win. */
main p { color: var(--bl-copy); }

/* Page heroes: Display / H1 600 clamp(44px, 6vw, 82px) / .98, -0.05em (Services, Pricing, About, Blog mocks). */
main .bl-phero__title { font-size: clamp(44px, 6vw, 82px) !important; line-height: .98 !important; letter-spacing: -.05em; }
main .bl-phero--contact .bl-phero__title { font-size: clamp(44px, 6vw, 80px) !important; }
main .bl-phero--blog .bl-phero__title { font-size: clamp(44px, 6vw, 82px) !important; }
main .bl-phero--cases .bl-phero__title { font-size: clamp(46px, 6.4vw, 88px) !important; line-height: .96 !important; }

/* Blog article (Blog Post mock): title 600 clamp(38px, 5.2vw, 68px) / 1.02, -0.045em; chapter H2 28px / 1.2, -0.02em;
   body 18px / 1.75 in the text colour. */
main .bl-post-head__title { font-size: clamp(38px, 5.2vw, 68px) !important; line-height: 1.02 !important; letter-spacing: -.045em; }
main .bl-post__body h2 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.02em; }
main .bl-post__body p, main .bl-post__body li { font-size: 18px; line-height: 1.75; color: var(--t-medium); }

.bl-home-hero__btn:not(.bl-home-hero__btn--primary):hover { border-color: var(--t-bright); }
.bl-home-hero__btn--primary { box-shadow: 0 12px 30px -10px rgba(37, 99, 255, .8); }

/* B60 (Owner 2026-11-04: "db-section bl-proof-wrap - should be higher up and align with db-hero-09__wrap"):
   the web design hero no longer stretches to the screen height, so the proof strip follows the prices line
   at the hero's own spacing; the strip's container matches the hero wrap (same max width and side padding). */
@media (min-width: 1200px) {
  #web-design-hero .db-hero-09__wrap { min-height: 0 !important; padding-bottom: 40px !important; }
}
.bl-proof-wrap { padding-top: 0; }
.bl-proof-wrap > .db-container { box-sizing: border-box; max-width: var(--bl-site); margin-inline: auto; padding-inline: var(--bl-gutter, 32px); }

/* B63 (Owner 2026-11-04: the header hide and the tracer feel "clunky"): header and bar move together on the
   compositor (transform, one curve) instead of animating the bar's top; the bar logo fades in instead of
   popping in and shifting the links. */
header.db-header.bl-hdr { transition: transform .38s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
nav.bl-toc { transition: transform .38s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
html.bl-condensed nav.bl-toc { top: var(--bl-hdr-h); transform: translate3d(0, calc(-1 * var(--bl-hdr-h)), 0); }
.bl-toc__logo { display: flex; max-width: 0; padding-right: 0; overflow: hidden; opacity: 0; border-right-color: transparent; transition: max-width .38s cubic-bezier(.22, .61, .36, 1), padding .38s cubic-bezier(.22, .61, .36, 1), opacity .25s ease, border-color .25s ease; }
html.bl-condensed .bl-toc__logo { max-width: 48px; padding-right: 14px; opacity: 1; border-right-color: var(--hdr-line); }
@media (prefers-reduced-motion: reduce) { header.db-header.bl-hdr, nav.bl-toc, .bl-toc__logo { transition: none !important; } }

/* B64 (Owner 2026-11-04): the On this page bar fades in after the page loads. Only hidden once
   window.blToc has run (html.bl-has-toc), so without JavaScript the bar still shows. */
html.bl-has-toc:not(.bl-toc-in) nav.bl-toc { opacity: 0; pointer-events: none; visibility: hidden; }
html.bl-has-toc:not(.bl-toc-in) nav.bl-toc .bl-toc__inner { transform: translateY(-6px); }
nav.bl-toc .bl-toc__inner { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
html.bl-has-toc nav.bl-toc { transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { nav.bl-toc .bl-toc__inner { transition: none !important; transform: none !important; } }

/* B65 (Owner 2026-11-04: Services panel lags on scroll and is slow to highlight): no full-page blur behind
   the panel (it re-blurred the page every scrolled frame); the dimming alone stays. Hover states respond
   in .12s, and the panel paints in its own layer. */
.bl-hdr__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bl-hdr__mega { contain: layout; }
.bl-hdr__panel { transform: translateZ(0); }
.bl-hdr__core, .bl-hdr__item, .bl-hdr__bones, .bl-hdr__n { transition-duration: .12s; }

/* ---------------------------------------------------------------
   B66 service pages to their own mocks (Owner 2026-11-04: "properly align with the prototype. Page by
   page"; Owner decision: a page's own mock layout wins over the B44 Web Design pattern; colours,
   type and card styling stay shared). Mocks: SEO GEO, AI Visibility Audit, AI Engineering,
   AI Workflows, Workshops. Prototyping follows AI Engineering (no mock of its own).
---------------------------------------------------------------- */
/* Hero H1 sizes from each mock (the laptop-height rule above still applies below 781px high) */
@media (min-height: 781px) {
  main #machine-legibility-hero h1.hero-09-headline__hooked { font-size: clamp(42px, 5.6vw, 74px) !important; line-height: 1 !important; letter-spacing: -.045em !important; }
  main #ai-visibility-audit-hero h1.hero-09-headline__hooked,
  main #software-engineering-hero h1.hero-09-headline__hooked,
  main #workshops-hero h1.hero-09-headline__hooked { font-size: clamp(46px, 6.4vw, 88px) !important; line-height: .96 !important; letter-spacing: -.05em !important; }
}

/* Process steps side by side (mock: head row, then the steps with a progress bar over each) */
.bl-wdt.bl-wdt--row { grid-template-columns: minmax(0, 1fr) !important; gap: 48px; }
.bl-wdt--row .bl-wdt__head { position: static !important; }
@media (min-width: 960px) {
  .bl-wdt--row .bl-wdt__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46ch); column-gap: 64px; row-gap: 20px; align-items: end; }
  .bl-wdt--row .bl-wdt__head > * { grid-column: 1; }
  .bl-wdt--row .bl-wdt__head > .bl-svc-head__lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.bl-wdt__list--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px 16px; }
.bl-wdt__list--row:has(> li:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.bl-wdt__list--row .bl-wdt__item { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.bl-wdt__list--row .bl-wdt__item::before,
.bl-wdt__list--row .bl-wdt__item:not(.is-last)::before { content: ""; position: static; display: block; width: auto; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.bl-wdt__list--row .bl-wdt__item.is-first::before { background: var(--accent); }
.bl-wdt__list--row .bl-wdt__item.is-last::before { background: linear-gradient(90deg, var(--accent), var(--accent-text)); }
.bl-wdt__list--row .bl-wdt__dot { width: 36px; height: 36px; font-size: 13px; }
.bl-wdt__list--row .bl-wdt__item.is-last:not(.is-first) .bl-wdt__dot { border-style: solid; border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--t-bright); }
.bl-wdt__list--row .bl-wdt__body { gap: 10px; padding-top: 0; }
main .bl-wdt__list--row .bl-wdt__title h3 { --bl-h3-list: 19px; font-size: 19px !important; }
.bl-wdt__list--row .bl-wdt__body p { font-size: 15px; line-height: 1.55; }

/* Benefit cards fill the row (mock: auto-fit, 260px minimum, joined frame) */
.bl-benefits.bl-benefits--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; gap: 1px; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--bl-line); }
.bl-benefits--fit .bl-benefits__item { border: 0; border-radius: 0; background: var(--base); padding: 30px; }

/* Fit check: three cards in one row (AI Visibility Audit, AI Workflows mocks) */
@media (min-width: 1100px) { .bl-ss-work.bl-au-fit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-au-fit > .is-next { border-color: color-mix(in srgb, var(--accent-text) 30%, transparent); }
.bl-au-fit > .bl-au-after { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--base-tint) 50%); }

/* SEO GEO: "If it's structural" is the third card of the pack row */
@media (min-width: 1100px) { .bl-ss-packs.bl-ss-packs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-sg-next.bl-sg-next--card { margin-top: 0; padding: 32px; align-content: start; background: var(--base-shade, transparent); }
.bl-sg-next--card > p:not(.bl-ss-compare__k):not(.bl-sg-next__links) { font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--t-bright); }
.bl-sg-next--card .bl-sg-next__links { flex-direction: column; gap: 8px; margin-top: auto; }
.bl-benefits--fit > .bl-benefits__item { grid-column: auto !important; } /* B66: no B44 short-row stretch inside the auto-fit grid */
@media (min-width: 1100px) { .bl-ss-work.bl-au-fit > .bl-au-after { grid-column: auto; } } /* B66: third card in the row, not a full-width strip */
@media (min-width: 960px) { .bl-wdt--row .bl-wdt__head:not(:has(> .bl-svc-head__lead)) { grid-template-columns: minmax(0, 1fr); } } /* B66: no empty lead column when a step section has no lead */
/* AI Engineering "Built with AI tools": one framed panel; head + text side by side, review list as a card grid below */
.bl-se-vibe-panel { display: flex; flex-direction: column; gap: 40px; padding: clamp(28px, 4.5vw, 56px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), var(--base-tint) 55%); }
.bl-se-vibe__top { display: grid; gap: 24px 56px; align-items: start; }
@media (min-width: 960px) { .bl-se-vibe__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bl-se-vibe-panel .bl-svc-head { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.bl-se-vibe-panel .bl-svc-head > * { margin: 0; }
.bl-se-vibe-panel .bl-se-vibe { grid-template-columns: minmax(0, 1fr) !important; }
.bl-se-vibe-panel .bl-se-vibe__text p { font-size: 16.5px; }
.bl-se-vibe-panel .bl-se-vibe__covers { padding: 0; border: 0; border-radius: 0; background: none; }
.bl-se-vibe-panel .bl-se-vibe__covers ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; gap: 12px !important; }
.bl-se-vibe-panel .bl-se-vibe__covers li { padding: 22px; border-radius: 16px; border: 1px solid var(--bl-line); background: color-mix(in srgb, var(--base) 85%, transparent); }
.bl-se-vibe-panel .bl-se-vibe__covers li { display: flex; flex-direction: column; gap: 8px; }
.bl-se-vibe-panel .bl-se-vibe__covers .bl-benefits__n { font: 500 12px/1 var(--_font-mono); color: var(--accent-text); }
.bl-se-vibe-panel .bl-se-vibe__covers h3 { margin: 0; }
/* AI Engineering "Fix or rebuild": checklist in two columns beside the first-read card (mock) */
@media (min-width: 1100px) {
  .bl-se-check.is-js { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .bl-se-check.is-js .bl-se-check__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
}
/* AI Workflows: Business bots / AI workflows switch (mock) */
.bl-aw__switch { display: inline-flex; gap: 4px; align-self: flex-start; margin: 4px 0 14px; padding: 4px; border-radius: 999px; border: 1px solid var(--bl-line); background: var(--base-shade, var(--base)); }
.bl-aw__switch[hidden] { display: none; }
.bl-aw__switch button { padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; font: 500 14px/1 var(--_font-accent); color: var(--t-medium); cursor: pointer; transition: background-color .15s, color .15s; }
.bl-aw__switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.bl-aw__switch button:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.bl-aw.has-switch .bl-aw__group { display: none; }
.bl-aw.has-switch .bl-aw__gnote { margin-top: 0; }
.bl-aw__grp[hidden] { display: none; }

/* B66 Workshops: row steps with no lead, heading runs full width as in the mock */
@media (min-width:960px){ .bl-wdt--row .bl-wdt__head:not(:has(> .bl-svc-head__lead)) > h2 { max-width: none; } }

/* B67 Bones page to its mock (Owner 2026-11-04, "Page mock layout") */
.bl-bones-road__list { gap: 4px; }
.bl-bones-road__item:not(.is-now) { padding: 12px 20px; border-color: transparent; background: none; box-shadow: none; }
.bl-bones-road__item:not(.is-now) .bl-bones-road__dot { top: 16px; }
.bl-bones-road__item:not(.is-now):not(:last-child)::after { top: 27px; bottom: -20px; }
.bl-bones-road__item.is-now { margin-block: 8px; }
.bl-bones-cta { display: grid; gap: 28px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--bl-line); border-radius: 24px; background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--base-tint); }
.bl-bones-cta > .bl-svc-head { margin: 0; }
.bl-bones-cta > .bl-svc-head .bl-hv__chips { margin-top: 18px; }
.bl-bones-cta .bl-hv__chips em { font: 500 10px/1.8 var(--_font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--t-medium); margin-right: 4px; }
@media (min-width: 960px) {
  .bl-bones-cta { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .bl-bones-cta > .bl-svc-head { display: block; }
  .bl-bones-cta .bl-bones-use { grid-template-columns: 1fr; }
}

/* B67 Terms and Privacy to their mocks (Owner 2026-11-04, "Page mock layout") */
main:has(.bl-legal-glance) .bl-home-hero__title { font-size: clamp(40px, 5.2vw, 68px) !important; line-height: 1.02; letter-spacing: -.045em; }
.bl-legal .block-table-of-contents { padding: 0 !important; margin: 0 !important; border: 0; background: none; }
.bl-legal .table-of-contents__title { margin: 0 0 10px !important; font: 500 11px/1.4 var(--_font-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--t-medium) !important; }
.bl-legal .table-of-contents__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bl-legal .table-of-contents__nav li { display: block; margin: 0; padding: 0; font-size: 13px !important; line-height: 1.4 !important; }
.bl-legal .table-of-contents__nav li::before { content: none; }
.bl-legal .table-of-contents__nav a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--t-medium); text-decoration: none; font-size: 13px !important; }
.bl-legal .table-of-contents__nav a:hover, .bl-legal .table-of-contents__nav a:focus-visible { background: var(--base-tint); color: var(--t-bright); }
.bl-legal [id^="chapter-"] { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--bl-line); }
.bl-legal [id^="chapter-"] > h2 { font-size: 24px !important; line-height: 1.25 !important; letter-spacing: -.02em; margin: 0 0 16px !important; scroll-margin-top: calc(58px + 40px); }
.bl-legal__defs { margin: 0; display: grid; }
.bl-legal__defs > div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--bl-line); }
.bl-legal__defs > div:first-child { border-top: 0; padding-top: 4px; }
.bl-legal__defs dt { font-weight: 600; font-size: 15px; color: var(--t-bright); }
.bl-legal__defs dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--t-medium); }
@media (min-width: 1200px) {
  .bl-legal .db-article__content { grid-template-columns: 260px minmax(0, 760px) !important; }
  .bl-legal__defs > div { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}
.bl-legal .db-article__content > .db-article__block:first-child { padding: 20px 24px; border: 1px solid var(--bl-line); border-radius: 16px; background: var(--base-tint); }
.bl-legal .db-article__content > .db-article__block:first-child p { font-size: 15px !important; }
.bl-legal .db-article__content > .db-article__block:first-child p:last-child { margin-bottom: 0; }
.bl-legal .block-table-of-contents { scrollbar-width: none; }
.bl-legal .block-table-of-contents::-webkit-scrollbar { display: none; }

/* B67b Terms (and Privacy) closer to the Terms mock (Owner 2026-11-04: "terms need more work") */
.bl-legal-tools.is-moved { display: none; }
.bl-legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bl-legal-meta .bl-home-hero__code { margin: 0; }
.bl-legal-find { display: block; position: relative; margin: 0 0 16px; }
.bl-legal-find::before { content: ""; position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: currentColor; color: var(--t-medium); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; }
.bl-legal-find input { width: 100%; min-height: 44px; padding: 10px 14px 10px 38px; border: 1px solid var(--bl-line); border-radius: 10px; background: var(--base-tint); color: var(--t-bright); font: inherit; font-size: 14px; }
.bl-legal-find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-legal .table-of-contents__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-legal .table-of-contents__nav { gap: 0; border-left: 1px solid var(--bl-line); }
.bl-legal .table-of-contents__nav a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; margin-left: -1px; padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; line-height: 1.4 !important; }
.bl-legal .table-of-contents__nav a[aria-current] { border-left-color: var(--accent); color: var(--t-bright); }
.bl-legal__tn { font: 500 11px/1.65 var(--_font-mono); color: var(--t-muted); }
.bl-legal .table-of-contents__nav a[aria-current] .bl-legal__tn { color: var(--accent-text); }
.bl-legal [id^="chapter-"] > h2 { display: flex; align-items: baseline; gap: 14px; }
.bl-legal__n { flex: none; font: 500 13px/1 var(--_font-mono); letter-spacing: 0; color: var(--accent-text); }
.bl-legal .db-article__content > .db-article__block:first-child { padding: 20px 22px; }
.bl-legal .db-article__content > .db-article__block:first-child p { color: color-mix(in srgb, var(--t-bright) 78%, var(--t-medium)); font-size: 15.5px !important; line-height: 1.6; }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__org { margin: 0 0 6px; font-size: 15px !important; color: var(--t-bright); }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__addr { margin: 0 0 14px; font-size: 14px !important; color: var(--t-medium); }
.bl-legal [id^="chapter-"] p, .bl-legal [id^="chapter-"] li { font-size: 15.5px !important; line-height: 1.65; color: color-mix(in srgb, var(--t-bright) 78%, var(--t-medium)); }
.bl-legal__defs > div { padding: 14px 0; gap: 4px 16px; border-top: 0; border-bottom: 1px solid var(--bl-line); }
.bl-legal__defs > div:first-child { padding-top: 4px; }
.bl-legal__defs dt { font-size: 15px; }
.bl-legal__defs dd { font-size: 15px; line-height: 24px; color: color-mix(in srgb, var(--t-bright) 78%, var(--t-medium)); }
@media (min-width: 1200px) { .bl-legal__defs > div { grid-template-columns: 190px minmax(0, 1fr); } }
.bl-legal .db-article__content > .db-article__block:first-child p { margin: 0 0 10px !important; }
.bl-legal .db-article__content > .db-article__block:first-child p:last-child { margin-bottom: 0 !important; }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__org { font-weight: 600; }
.bl-legal .table-of-contents__nav .bl-legal__tn { font-weight: 500 !important; color: var(--t-muted) !important; }
.bl-legal .table-of-contents__nav a[aria-current] .bl-legal__tn { color: var(--accent-text) !important; }
.bl-legal .db-article__content > .db-article__block:first-child p > em:only-child { font-size: 13.5px; font-style: normal; font-family: var(--_font-mono); letter-spacing: .02em; color: var(--t-medium); }

/* B67d Terms/Privacy page head and At a glance, to the Terms mock (Owner 2026-11-04: "still not fully right") */
.bl-legal-meta { gap: 8px 20px; margin-top: 28px; }
.bl-home-hero__code.bl-legal-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; font: 400 14px/1.3 var(--_font-default); letter-spacing: normal; text-transform: none; color: var(--t-muted); }
.bl-home-hero__code.bl-legal-code:hover { color: var(--t-muted); }
.bl-legal-ver { padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); font: 500 11.5px/1.4 var(--_font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--accent-text); }
.bl-legal-code a { color: color-mix(in srgb, var(--t-bright) 78%, var(--t-medium)); text-decoration: none; }
.bl-legal-code a:hover, .bl-legal-code a:focus-visible { color: var(--accent-text); text-decoration: underline; }
.bl-legal-meta [data-legal-print] { min-height: 0; padding: 7px 14px; border: 1px solid var(--bl-line-strong, color-mix(in srgb, var(--t-bright) 18%, transparent)); border-radius: 999px; background: transparent; color: var(--t-bright); font-size: 13px; font-weight: 500; line-height: 1.4; box-shadow: none; }
.bl-legal-meta [data-legal-print]:hover, .bl-legal-meta [data-legal-print]:focus-visible { border-color: var(--accent); }
.bl-legal-glance__grid { border-radius: 16px; }
.bl-legal-glance__grid a { padding: 18px 20px; background: var(--base-tint); }
.bl-legal-glance__k { font-size: 10px; letter-spacing: .12em; color: var(--t-muted); }
.bl-legal-glance__grid b { font-size: 19px; letter-spacing: -.01em; }
.bl-legal-glance__grid a > span:last-child { font-size: 12.5px; color: var(--t-muted); }
.bl-legal-glance__note { font-size: 12.5px; color: var(--t-muted); }
.bl-legal-code .bl-legal-rep { font-weight: 400 !important; color: var(--t-muted) !important; font-size: 14px; }
.bl-legal-meta [data-legal-print] { height: auto !important; min-height: 0 !important; }
@media (min-width: 1200px) { main:has(.bl-legal-glance) .bl-home-hero__inner, main:has(.bl-legal-glance) .bl-legal-top .db-container, main:has(.bl-legal-glance) .bl-legal .db-container { max-width: var(--bl-site) !important; } }
.bl-legal .db-article__content > .db-article__block:first-child { gap: 0 !important; }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__org { margin-bottom: 4px !important; }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__addr { margin-bottom: 14px !important; }

/* B67e Terms/Privacy article body to the Terms mock article (Owner 2026-11-04, "also whole article") */
.bl-legal [id^="chapter-"] { padding: 28px 0; margin-top: 0; }
.bl-legal .db-article__content > .db-article__block:first-child { margin-bottom: 28px !important; }
.bl-legal [id^="chapter-"] > h2 { margin-bottom: 14px !important; }
.bl-legal [id^="chapter-"] h3 { margin: 24px 0 10px !important; font: 600 17px/1.35 var(--_font-default) !important; letter-spacing: -.01em; color: var(--t-bright) !important; }
.bl-legal [id^="chapter-"] > h2 + h3 { margin-top: 10px !important; }
.bl-legal [id^="chapter-"] p { margin: 0 0 14px !important; font-size: 16px !important; line-height: 1.7 !important; }
.bl-legal [id^="chapter-"] ul, .bl-legal [id^="chapter-"] ol { list-style: none !important; margin: 0 0 14px !important; padding: 0 !important; display: grid; gap: 8px; counter-reset: bl-legal-ol; }
.bl-legal [id^="chapter-"] ul > li, .bl-legal [id^="chapter-"] ol > li { position: relative; margin: 0 !important; padding: 0 0 0 34px !important; font-size: 15.5px !important; line-height: 1.6 !important; list-style: none !important; }
.bl-legal [id^="chapter-"] ul > li::before, .bl-legal [id^="chapter-"] ol > li::before { position: absolute; left: 0; top: 3px; width: 28px; content: "–"; font: 500 12px/1.6 var(--_font-mono); color: var(--accent-text); background: none !important; border: 0 !important; height: auto !important; border-radius: 0 !important; }
.bl-legal [id^="chapter-"] ol > li { counter-increment: bl-legal-ol; }
.bl-legal [id^="chapter-"] ol > li::before { content: counter(bl-legal-ol) "."; }
.bl-legal [id^="chapter-"] li::marker { content: none; }
.bl-legal [id^="chapter-"] .bl-legal__table, .bl-legal [id^="chapter-"] table { margin: 0 0 14px; }
.bl-legal .bl-legal__table, .bl-legal [id^="chapter-"] table { border: 1px solid var(--bl-line); border-radius: 14px; overflow: hidden; }
.bl-legal .bl-legal__table table { border: 0; border-radius: 0; margin: 0; }
.bl-legal [id^="chapter-"] table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; background: none; }
.bl-legal [id^="chapter-"] th, .bl-legal [id^="chapter-"] td { padding: 13px 16px !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--bl-line) 70%, transparent) !important; text-align: left; vertical-align: top; line-height: 1.55; background: none; }
.bl-legal [id^="chapter-"] thead th { border-top: 0 !important; font: 500 10.5px/1.4 var(--_font-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted) !important; }
.bl-legal [id^="chapter-"] tbody tr:nth-child(odd) > * { background: color-mix(in srgb, var(--t-bright) 2%, transparent); }
.bl-legal [id^="chapter-"] tbody td:first-child { width: 34%; font-weight: 500; color: var(--t-bright); }
.bl-legal [id^="chapter-"] tbody td { color: color-mix(in srgb, var(--t-bright) 78%, var(--t-medium)); }
.bl-legal [id^="chapter-"] tbody tr:hover > * { background: color-mix(in srgb, var(--t-bright) 4%, transparent); }
.bl-legal__top { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--t-muted); text-decoration: none; }
.bl-legal__top:hover, .bl-legal__top:focus-visible { color: var(--accent-text); }
.bl-legal .bl-legal__contact { margin-top: 8px; padding: 24px !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important; border-radius: 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.bl-legal .bl-legal__contact > h2 { margin: 0 0 6px !important; font-size: 18px !important; }
.bl-legal .bl-legal__contact p, .bl-legal .bl-legal__contact li { margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important; }
@media print { .bl-legal__top { display: none !important; } }

/* B67f exact values measured from the Terms mock article at 1440 (Owner 2026-11-04, "not exactly like the prototype") */
.bl-legal [id^="chapter-"] { display: flex !important; flex-direction: column; gap: 14px !important; }
.bl-legal [id^="chapter-"] > * { margin: 0 !important; max-width: none !important; }
.bl-legal [id^="chapter-"] > h2 { letter-spacing: -.015em !important; }
.bl-legal [id^="chapter-"] > h2 .bl-legal__n { color: #6f8dff !important; }
.bl-legal [id^="chapter-"] > h3 { margin-top: 10px !important; line-height: normal !important; letter-spacing: 0 !important; }
.bl-legal [id^="chapter-"] p, .bl-legal [id^="chapter-"] li, .bl-legal [id^="chapter-"] dd, .bl-legal [id^="chapter-"] tbody td + td,
.bl-legal .db-article__content > .db-article__block:first-child p:not([class]) { color: #c9cdd8 !important; max-width: none !important; }
.bl-legal [id^="chapter-"] li strong, .bl-legal [id^="chapter-"] p strong { color: inherit; }
.bl-legal [id^="chapter-"] > h2 .bl-legal__n, .bl-legal [id^="chapter-"] li::before { color: #6f8dff !important; }
.bl-legal .bl-legal__defs { display: flex !important; flex-direction: column; gap: 2px; }
.bl-legal .bl-legal__defs > div, .bl-legal .bl-legal__defs > div:first-child { padding: 14px 0 !important; gap: 16px !important; border-top: 0 !important; border-bottom: 1px solid rgba(255,255,255,.06); }
.bl-legal .bl-legal__defs dt { line-height: normal; }
.bl-legal .bl-legal__defs dd { font-size: 15px !important; line-height: 1.6 !important; }
.bl-legal .bl-legal__table, .bl-legal [id^="chapter-"] table:not(.bl-legal__table table) { border-color: rgba(255,255,255,.1) !important; }
.bl-legal [id^="chapter-"] th, .bl-legal [id^="chapter-"] td { border-top-color: rgba(255,255,255,.06) !important; }
.bl-legal [id^="chapter-"] tbody td:first-child { width: 33.3%; }
.bl-legal__top { display: block !important; align-self: flex-start; margin: 0 !important; line-height: normal; color: #8b93a7; }
.bl-legal .db-article__content > .db-article__block:first-child { padding: 20px 22px !important; }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__org { margin: 0 0 8px !important; line-height: normal !important; }
.bl-legal .db-article__content > .db-article__block:first-child .bl-legal__addr { margin: 0 0 14px !important; line-height: 1.55 !important; color: #a3a9b8 !important; }
.bl-legal .db-article__content > .db-article__block:first-child p:not([class]) { font-size: 15.5px !important; line-height: 1.65 !important; }
.bl-legal .bl-legal__contact { gap: 4px !important; }
.bl-legal .bl-legal__contact > h2 { line-height: normal !important; }
.bl-legal .bl-legal__contact p { color: #c9cdd8 !important; }
@media (min-width: 1200px) { .bl-legal .db-article__content { column-gap: 48px !important; } }
/* light theme: mock values are dark-only, so map them back to tokens */
:root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] p, :root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] li, :root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] dd, :root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] tbody td + td,
:root:not([data-theme="dark"]) .bl-legal .db-article__content > .db-article__block:first-child p:not([class]), :root:not([data-theme="dark"]) .bl-legal .bl-legal__contact p { color: var(--t-medium) !important; }
:root:not([data-theme="dark"]) .bl-legal .db-article__content > .db-article__block:first-child .bl-legal__addr, :root:not([data-theme="dark"]) .bl-legal__top { color: var(--t-muted) !important; }
:root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] > h2 .bl-legal__n, :root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] li::before { color: var(--accent-text) !important; }
:root:not([data-theme="dark"]) .bl-legal .bl-legal__defs > div { border-bottom-color: var(--bl-line); }
:root:not([data-theme="dark"]) .bl-legal .bl-legal__table, :root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] table { border-color: var(--bl-line) !important; }
:root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] th, :root:not([data-theme="dark"]) .bl-legal [id^="chapter-"] td { border-top-color: var(--bl-line) !important; }

/* B67g contents list and search, copied from the Terms mock source (aside/label/nav inline styles) */
.bl-legal .block-table-of-contents { gap: 12px !important; }
.bl-legal .table-of-contents__nav { border-left: 0 !important; }
.bl-legal .table-of-contents__nav a { margin-left: 0 !important; border-radius: 0 !important; border-left: 2px solid rgba(255,255,255,.08) !important; color: #a3a9b8 !important; }
.bl-legal .table-of-contents__nav a:hover, .bl-legal .table-of-contents__nav a:focus-visible { background: none !important; color: #fff !important; }
.bl-legal .table-of-contents__nav a[aria-current] { border-left-color: #2563ff !important; color: #fff !important; }
.bl-legal .table-of-contents__nav .bl-legal__tn { color: #8b93a7 !important; } /* B67l Owner "Raise to pass": mock #5d6475 was 3.32:1 */
.bl-legal .table-of-contents__nav a[aria-current] .bl-legal__tn { color: #9db6ff !important; }
.bl-legal .table-of-contents__nav li.is-dim { opacity: .3; pointer-events: none; }
.bl-legal-find { margin: 0 !important; }
.bl-legal-find::before { left: 12px !important; width: 13px !important; height: 13px !important; color: #8b93a7 !important; }
.bl-legal-find input { padding: 0 12px 0 33px !important; border: 1px solid rgba(255,255,255,.1) !important; background: #111319 !important; color: #fff !important; font-size: 13.5px !important; }
.bl-legal-find input::placeholder { color: #8b93a7; } /* B67l Owner "Raise to pass": mock #6b7386 was 3.91:1 */
@media (min-width: 1200px) { .bl-legal-find input { min-height: 40px !important; height: 40px; } }
:root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav a { border-left-color: var(--bl-line) !important; color: var(--t-medium) !important; }
:root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav a:hover, :root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav a[aria-current] { color: var(--t-bright) !important; }
:root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav a[aria-current] { border-left-color: var(--accent) !important; }
:root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav .bl-legal__tn { color: var(--t-muted) !important; }
:root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav a[aria-current] .bl-legal__tn { color: var(--accent-text) !important; }
:root:not([data-theme="dark"]) .bl-legal-find::before { color: var(--t-muted) !important; }
:root:not([data-theme="dark"]) .bl-legal-find input { border-color: var(--bl-line) !important; background: var(--base-tint) !important; color: var(--t-bright) !important; }

/* B67h contact card, from the Terms/Privacy mock source (section#contact inline styles) */
.bl-legal .bl-legal__contact { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px !important; margin: 8px 0 0 !important; padding: 24px !important; border-radius: 18px; border: 1px solid rgba(37,99,255,.45) !important; background: linear-gradient(90deg, rgba(37,99,255,.16), rgba(37,99,255,.04)); }
.bl-legal .bl-legal__contact-text { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; }
.bl-legal .bl-legal__contact h2 { display: block !important; margin: 0 !important; font: 600 18px/normal var(--_font-default) !important; letter-spacing: 0 !important; color: #fff !important; }
.bl-legal .bl-legal__contact p { margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: #c9cdd8 !important; }
.bl-legal .bl-legal__contact-btn { display: inline-block; margin: 0 !important; padding: 12px 22px; border-radius: 999px; background: #2563ff; color: #fff !important; font: 500 15px/normal var(--_font-default); text-decoration: none; }
.bl-legal .bl-legal__contact-btn:hover, .bl-legal .bl-legal__contact-btn:focus-visible { background: #1d4fe0; }
:root:not([data-theme="dark"]) .bl-legal .bl-legal__contact h2 { color: var(--t-bright) !important; }
:root:not([data-theme="dark"]) .bl-legal .bl-legal__contact p { color: var(--t-medium) !important; }

/* B67i subsection chips, from the Terms mock source (isSubs block inline styles) */
.bl-legal .bl-legal__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.bl-legal .bl-legal__subs button, .bl-legal .bl-legal__subs a { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font: 400 13px/normal var(--_font-default); color: #c9cdd8; text-decoration: none; }
.bl-legal .bl-legal__subs button:hover, .bl-legal .bl-legal__subs button:focus-visible, .bl-legal .bl-legal__subs button[aria-expanded="true"] { border-color: #2563ff; color: #fff; }
.bl-legal [id^="chapter-"] > h3 { scroll-margin-top: calc(58px + 40px); }
:root:not([data-theme="dark"]) .bl-legal .bl-legal__subs button { border-color: var(--bl-line); color: var(--t-medium); }
:root:not([data-theme="dark"]) .bl-legal .bl-legal__subs button:hover, :root:not([data-theme="dark"]) .bl-legal .bl-legal__subs button:focus-visible, :root:not([data-theme="dark"]) .bl-legal .bl-legal__subs button[aria-expanded="true"] { border-color: var(--accent); color: var(--t-bright); }
@media print { .bl-legal__subs { display: none !important; } }

/* B67j: the Terms mock's two-column tables have no visible header row; headers kept for screen readers (Privacy's 3-column tables keep theirs) */
.bl-legal .bl-legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-legal .bl-legal__table tbody tr:first-child > * { border-top: 0 !important; }

/* B67j collapsed subsections (Owner 2026-11-04, "Collapsed, chips open") */
.bl-legal .bl-legal__subs button { background: none; cursor: pointer; margin: 0; min-height: 0; }
.bl-legal .bl-legal__subs button[aria-expanded="true"] { background: rgba(37,99,255,.14); }
.bl-legal .bl-legal__panels { display: flex; flex-direction: column; margin: 0 !important; }
.bl-legal .bl-legal__panel { display: flex; flex-direction: column; gap: 14px; }
.bl-legal .bl-legal__panel:not([hidden]) { padding: 10px 0 14px; }
.bl-legal .bl-legal__panel[hidden]:not([hidden="until-found"]) { display: none; }
.bl-legal .bl-legal__panel > * { margin: 0 !important; max-width: none !important; }
.bl-legal .bl-legal__panel > h3 { margin: 0 !important; font: 600 17px/normal var(--_font-default) !important; color: var(--t-bright) !important; outline: none; }
.bl-legal .bl-legal__panel p { font-size: 16px !important; line-height: 1.7 !important; }
@media print { .bl-legal .bl-legal__panel[hidden] { display: flex !important; content-visibility: visible !important; } }
.bl-legal [id^="chapter-"] ul.bl-legal__panels--list { gap: 0 !important; }
.bl-legal ul.bl-legal__panels--list > li.bl-legal__panel { display: list-item; gap: 0; padding-top: 0 !important; outline: none; }
.bl-legal ul.bl-legal__panels--list > li.bl-legal__panel:not([hidden]) { padding-bottom: 8px !important; }
.bl-legal ul.bl-legal__panels--list > li.bl-legal__panel[hidden]:not([hidden="until-found"]) { display: none; }
@media print { .bl-legal ul.bl-legal__panels--list > li.bl-legal__panel[hidden] { display: list-item !important; } }
:root:not([data-theme="dark"]) .bl-legal-find input::placeholder { color: var(--t-muted); } /* B67l: #8b93a7 is for dark only */

/* B67l (Owner 2026-11-04 screenshot: blank space under the contact card beside the contents list).
   The contents box spans 40 grid rows but Terms uses 21, and each empty row added the 70px row gap
   (about 1,400px). The mock has no gap between chapters; chapters carry their own 28px padding. */
@media (min-width: 1200px) {
  .bl-legal .db-article__content { row-gap: 0 !important; }
  /* mock aside: overflow auto with a thin visible scrollbar, so a list taller than the window can be scrolled */
  .bl-legal .block-table-of-contents { scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.14) transparent; max-height: calc(100vh - 110px) !important; }
  .bl-legal .block-table-of-contents::-webkit-scrollbar { display: block !important; width: 6px; }
  .bl-legal .block-table-of-contents::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
  :root:not([data-theme="dark"]) .bl-legal .block-table-of-contents { scrollbar-color: rgba(10,11,15,.18) transparent; }
  :root:not([data-theme="dark"]) .bl-legal .block-table-of-contents::-webkit-scrollbar-thumb { background: rgba(10,11,15,.18); }
}

/* B67m search field and results (Owner 2026-11-04: corners cut off; search visuals) */
@media (min-width: 1200px) {
  /* the contents box scrolls, which clipped the field's focus ring; give it room */
  .bl-legal .block-table-of-contents { padding: 4px 4px 0 !important; margin: -4px -4px 0 !important; }
}
.bl-legal-find input { transition: border-color .15s, box-shadow .15s; }
.bl-legal-find input:focus, .bl-legal-find input:focus-visible { outline: none !important; border-color: #2563ff !important; box-shadow: 0 0 0 3px rgba(37,99,255,.28); }
.bl-legal-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.bl-legal-find input { padding-right: 36px !important; }
.bl-legal-find__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8b93a7; font: 400 18px/1 var(--_font-default); cursor: pointer; }
.bl-legal-find__clear:hover, .bl-legal-find__clear:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }
.bl-legal-find__clear[hidden] { display: none; }
.bl-legal .block-table-of-contents .bl-legal-none { margin: 0 !important; padding: 0 2px; font: 500 11.5px/1.4 var(--_font-mono); letter-spacing: .02em; color: #8b93a7; }
.bl-legal .block-table-of-contents .bl-legal-none.is-empty { padding: 10px 12px; border: 1px dashed rgba(157,182,255,.35); border-radius: 10px; font: 400 13px/1.45 var(--_font-default); letter-spacing: 0; color: #a3a9b8; }
.bl-legal mark.bl-legal-hit { padding: 0 2px; margin: 0 -2px; border-radius: 3px; background: rgba(37,99,255,.32); color: inherit; }
:root:not([data-theme="dark"]) .bl-legal-find__clear { color: var(--t-muted); }
:root:not([data-theme="dark"]) .bl-legal-find__clear:hover, :root:not([data-theme="dark"]) .bl-legal-find__clear:focus-visible { background: var(--base-tint); color: var(--t-bright); }
:root:not([data-theme="dark"]) .bl-legal-find input:focus, :root:not([data-theme="dark"]) .bl-legal-find input:focus-visible { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:root:not([data-theme="dark"]) .bl-legal .block-table-of-contents .bl-legal-none { color: var(--t-muted); }
:root:not([data-theme="dark"]) .bl-legal .block-table-of-contents .bl-legal-none.is-empty { border-color: var(--bl-line); color: var(--t-medium); }
:root:not([data-theme="dark"]) .bl-legal mark.bl-legal-hit { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:root:not([data-theme="dark"]) .bl-legal .table-of-contents__nav li.is-dim { opacity: .45; }
@media print { .bl-legal mark.bl-legal-hit { background: none; } }

/* B67n (2026-11-04): gap between the At a glance note and the search/article row,
   as the mock's section padding-top clamp(32px, 4vw, 48px). Owner: "bigger gap". */
.bl-legal { padding-top: clamp(32px, 4vw, 48px) !important; }
/* B67n: Privacy 3- and 5-column tables drawn as the mock's two-column rows (.8fr / 1.6fr).
   First cell is the label; the other cells stack in column 2, each with its column name
   as a small mono prefix (from the existing headers). Headers stay for screen readers. */
.bl-legal .bl-legal__table--rows table, .bl-legal .bl-legal__table--rows tbody { display: block; width: 100%; }
.bl-legal .bl-legal__table--rows tbody tr { display: grid; grid-template-columns: .8fr 1.6fr; column-gap: 16px; row-gap: 4px; padding: 13px 16px; border-top: 1px solid color-mix(in srgb, var(--bl-line) 70%, transparent); }
.bl-legal .bl-legal__table--rows tbody tr:first-child { border-top: 0; }
.bl-legal .bl-legal__table--rows tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--t-bright) 2%, transparent); }
.bl-legal .bl-legal__table--rows tbody tr > * { padding: 0 !important; border: 0 !important; background: none !important; width: auto !important; font-size: 14.5px; line-height: 1.55; }
.bl-legal .bl-legal__table--rows tbody td:first-child { grid-column: 1; grid-row: 1 / span 4; }
.bl-legal .bl-legal__table--rows tbody td + td { grid-column: 2; }
.bl-legal .bl-legal__table--rows tbody td + td::before { content: attr(data-label); content: attr(data-label) / ""; display: inline-block; min-width: 88px; margin-right: 8px; font: 500 10.5px/1.4 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.bl-legal .bl-legal__table--rows tbody td:first-child span { font-weight: 600; }
@media (max-width: 575px) {
  .bl-legal .bl-legal__table--rows tbody tr { grid-template-columns: 1fr; }
  .bl-legal .bl-legal__table--rows tbody td:first-child { grid-row: auto; }
  .bl-legal .bl-legal__table--rows tbody td + td { grid-column: 1; }
}
/* B67n: "Open cookie settings" as the mock's pill button */
.bl-legal .db-article__cookie-settings { display: inline-flex; align-items: center; margin-left: 6px; padding: 10px 18px; border: 1px solid #2563ff; border-radius: 999px; background: rgba(37, 99, 255, .14); color: var(--t-bright); font: 500 14px/1 var(--_font-sans, inherit); text-decoration: none; cursor: pointer; transition: background .15s; }
.bl-legal .db-article__cookie-settings:hover { background: rgba(37, 99, 255, .24); }
.bl-legal .db-article__cookie-settings:focus-visible { outline: 2px solid #2563ff; outline-offset: 2px; }
/* B67n: hanging indent so wrapped values line up after the column-name prefix */
.bl-legal .bl-legal__table--rows tbody td + td { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; }
.bl-legal .bl-legal__table--rows tbody td + td::before { min-width: 0; margin: 0; }

/* B67o (2026-11-04): Owner — "gap between page header and the header … removed on all pages".
   The space kept for the fixed header was clamp(76px, 8vw, 96px), but the header is 69px at
   every width, so content started 7–27px lower than the header's edge. Match it exactly. */
html:root { --db-header-offset: 69px; } /* QA O1: keep equal to the rendered height of header.db-header.bl-hdr (69px); change both together */
/* Page headings (legal and other --page heroes): the mock's top padding clamp(40px, 6vw, 72px),
   was 56 / 80 / 96px. */
.bl-home-hero--page { padding-top: clamp(40px, 6vw, 72px) !important; }
/* QA N1: row tables keep table semantics for screen readers (roles added in privacy.html) */
/* B67q/QA Q1: sections focused by the bar (tabindex -1) get no outline box; focus is for the next Tab only */
main [tabindex="-1"]:focus { outline: none; }

/* B68 (2026-11-04): Web development page rebuilt to Web Development Page.dc.html */
/* Values are the mock's (dark); light theme uses the site tokens and the overrides below. */
:root {
  --wdev-deep: #0d0f14; --wdev-chip: #13161e; --wdev-ws: #0b0c10; --wdev-facts: #0e1015; --wdev-tile: rgba(13, 15, 20, .85);
  --wdev-soft: #cfdcff; --wdev-num: #6f8dff; --wdev-h1-accent: #b9c8ff; --wdev-dim: #5d6475;
  --wdev-line2: rgba(255, 255, 255, .14); --wdev-line3: rgba(255, 255, 255, .06); --wdev-dash: rgba(255, 255, 255, .18);
  --wdev-map: radial-gradient(80% 80% at 50% 40%, #13224a, #0d0f14 70%);
  --wdev-shadow: 0 40px 80px -24px rgba(0, 0, 0, .8);
}
:root:not([data-theme="dark"]) {
  --wdev-deep: #f4f6fa; --wdev-chip: #eef0f5; --wdev-ws: #ffffff; --wdev-facts: #ffffff; --wdev-tile: #ffffff;
  --wdev-soft: #1a3fb8; --wdev-num: #1f4fe0; --wdev-h1-accent: #1f4fe0; --wdev-dim: #7a8293;
  --wdev-line2: rgba(11, 13, 18, .14); --wdev-line3: rgba(11, 13, 18, .06); --wdev-dash: rgba(11, 13, 18, .2);
  --wdev-map: radial-gradient(80% 80% at 50% 40%, rgba(37, 99, 255, .12), #f4f6fa 70%);
  --wdev-shadow: 0 40px 80px -30px rgba(15, 23, 42, .25);
}

/* Hero: H1 with the accent line, sub and lead sizes, chips under the buttons, workspace drawing */
#web-development-hero .hero-09-headline__title h1.hero-09-headline { max-width: 11ch; font-size: clamp(44px, min(6vw, 8.6vh), 80px) !important; line-height: .98 !important; letter-spacing: -.05em; background: none; -webkit-text-fill-color: currentColor; color: var(--t-bright); }
#web-development-hero .hero-09-headline__accent { color: var(--wdev-h1-accent); }
#web-development-hero .hero-09-headline__sub { font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.015em; color: var(--t-medium); }
#web-development-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#web-development-hero .bl-home-hero__btn { font-size: 16px; }
#web-development-hero .hero-09-headline__tags { order: 6; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#web-development-hero .hero-09-headline__tags .tag { padding: 6px 12px; border: 1px solid var(--wdev-line2); border-radius: 999px; background: none; font-family: var(--_font-default) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3; letter-spacing: 0 !important; text-transform: none; color: var(--t-medium); }
#web-development-hero .db-hero-09__grid { display: none; }
@media (min-width: 1100px) { #web-development-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #web-development-hero .bl-wdev-ws { max-width: none; } #web-development-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }
.bl-wdev-ws { container-type: inline-size; width: 100%; max-width: 600px; margin-left: auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 22px; background: var(--wdev-ws); box-shadow: var(--wdev-shadow); text-align: left; }
.bl-wdev-ws p { margin: 0; }
.bl-wdev-ws__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bl-line); }
.bl-wdev-ws__bar b { font-size: 13px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-ws__bar span { padding: 3px 9px; 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: .1em; text-transform: uppercase; color: var(--accent-text); }
.bl-wdev-ws__body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 300px; }
.bl-wdev-ws__side { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-right: 1px solid var(--bl-line); }
.bl-wdev-ws em { font: 500 9.5px/1.3 var(--_font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); padding-bottom: 2px; }
.bl-wdev-ws__side em + span, .bl-wdev-ws__side i + em { margin-top: 0; }
.bl-wdev-ws__side i + em { padding-top: 10px; }
.bl-wdev-ws__side span:last-of-type + em { padding-top: 10px; }
.bl-wdev-ws__side span { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; font-size: 12px; color: var(--t-medium); }
.bl-wdev-ws__side span.is-on { background: rgba(37, 99, 255, .16); font-weight: 500; color: var(--t-bright); }
.bl-wdev-ws__side small { font: 400 9.5px/1.3 var(--_font-mono); color: var(--t-muted); }
.bl-wdev-ws__side .is-on small { color: var(--wdev-soft); }
.bl-wdev-ws__side i { padding: 5px 9px; border-radius: 8px; font-style: normal; font-size: 12px; color: var(--t-medium); }
.bl-wdev-ws__side i.is-on { background: var(--wdev-chip); font-weight: 500; color: var(--t-bright); }
.bl-wdev-ws__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; }
.bl-wdev-ws__main > em { padding-top: 4px; }
.bl-wdev-ws__rec { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--accent); border-radius: 12px; background: linear-gradient(180deg, rgba(37, 99, 255, .14), var(--base-tint)); }
.bl-wdev-ws__rec > b { font-size: 18px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-ws__k { display: flex; justify-content: space-between; font: 500 9.5px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-wdev-ws__k span { display: flex; gap: 4px; }
.bl-wdev-ws u { text-decoration: none; }
.bl-wdev-ws__k u { padding: 1px 6px; border-radius: 5px; background: var(--wdev-chip); color: var(--t-muted); }
.bl-wdev-ws__k u.is-on { background: var(--accent); color: #fff; }
.bl-wdev-ws__tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.bl-wdev-ws__tags span { padding: 3px 8px; border-radius: 6px; background: var(--wdev-chip); color: var(--t-medium); }
.bl-wdev-ws__ai { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--accent-text) 45%, transparent); border-radius: 10px; font-size: 12px; color: var(--wdev-soft); }
.bl-wdev-ws__ai > span:last-child { display: flex; gap: 6px; }
.bl-wdev-ws__ai u { padding: 3px 9px; border: 1px solid var(--wdev-line2); border-radius: 999px; color: var(--t-medium); }
.bl-wdev-ws__ai u.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }
.bl-wdev-ws__checks { display: flex; flex-wrap: wrap; gap: 6px; font: 400 11px/1.3 var(--_font-mono); }
.bl-wdev-ws__checks span { padding: 4px 9px; border-radius: 999px; background: rgba(37, 99, 255, .12); color: var(--wdev-soft); }
.bl-wdev-ws__checks span.is-on { background: var(--accent); color: #fff; }
.bl-wdev-ws__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bl-wdev-ws__out span { display: flex; flex-direction: column; gap: 2px; padding: 9px; border-radius: 9px; background: var(--wdev-chip); font-size: 10.5px; line-height: 1.3; color: var(--t-muted); }
.bl-wdev-ws__out b { font-size: 12px; font-weight: 600; color: var(--t-bright); }
@container (max-width: 460px) {
  .bl-wdev-ws__body { grid-template-columns: minmax(0, 1fr); }
  .bl-wdev-ws__side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--bl-line); }
  .bl-wdev-ws__side em, .bl-wdev-ws__side i { display: none; }
  .bl-wdev-ws__side span { flex: 1 1 auto; }
  .bl-wdev-ws__out { grid-template-columns: minmax(0, 1fr); }
}

/* Facts strip */
.bl-wdev-facts-wrap { padding-top: clamp(32px, 4vw, 48px); }
.bl-wdev-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 16px; background: var(--bl-line); }
.bl-wdev-facts > * { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; background: var(--wdev-facts); color: inherit; text-decoration: none; }
.bl-wdev-facts > a.is-link { background: color-mix(in srgb, var(--accent) 8%, var(--wdev-facts)); }
.bl-wdev-facts > a.is-link:hover .bl-wdev-facts__n { color: var(--t-bright); }
.bl-wdev-facts > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bl-wdev-facts__k { font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-wdev-facts__v { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--t-bright); }
.bl-wdev-facts__n { font-size: 13px; line-height: 1.4; color: var(--t-muted); }
.is-link .bl-wdev-facts__k, .is-link .bl-wdev-facts__n { color: var(--accent-text); }
main p.bl-wdev-facts__vat { margin: 10px 0 0; font-size: 12.5px; color: var(--t-muted-extra); }

/* Shared small UI row (builds, cases) */
.bl-wdev-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--wdev-chip); font-size: 12px; line-height: 1.3; color: var(--t-bright); }
.bl-wdev-row small, .bl-wdev-row b { font: 500 10px/1.3 var(--_font-mono); text-transform: uppercase; color: var(--accent-text); text-align: right; }
.bl-wdev-row.is-hi { border-color: rgba(37, 99, 255, .5); background: rgba(37, 99, 255, .14); }
.bl-wdev-row.is-hi small { color: var(--wdev-soft); }

/* 01 Two kinds of build */
.bl-wdev-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.bl-wdev-kind { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 24px; background: var(--base-tint); }
.bl-wdev-kind.is-main { border-color: rgba(37, 99, 255, .45); background: linear-gradient(180deg, rgba(37, 99, 255, .12), var(--base-tint) 40%); }
.bl-wdev-kind__art { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-bottom: 1px solid var(--wdev-line3); background: var(--wdev-deep); }
.bl-wdev-kind__art .bl-wdev-row { padding: 8px 12px; font-size: 12.5px; color: var(--t-medium); }
.bl-wdev-kind__art .bl-wdev-row b { font: 400 12.5px/1.3 var(--_font-default); text-transform: none; color: var(--t-bright); }
.bl-wdev-kind__art .bl-wdev-row em { font-style: normal; color: var(--accent-text); }
.bl-wdev-kind__art .bl-wdev-row.is-lg { padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--t-bright); }
.bl-wdev-kind__outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bl-wdev-kind__outs i { padding: 6px 0; border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 6px; font: 400 10.5px/1.3 var(--_font-mono); font-style: normal; text-align: center; color: var(--wdev-soft); }
.bl-wdev-kind__art--crm { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.bl-wdev-kind__nav { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--t-muted); }
.bl-wdev-kind__nav i { padding: 5px 8px; border-radius: 6px; font-style: normal; }
.bl-wdev-kind__nav i.is-on { background: rgba(37, 99, 255, .18); color: var(--t-bright); }
.bl-wdev-kind__rows { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bl-wdev-kind__art--crm .bl-wdev-row { padding: 8px 10px; font-size: 12px; color: var(--t-bright); }
.bl-wdev-kind__body { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.bl-wdev-kind__body > * { margin: 0; }
main p.bl-wdev-kind__k { font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
main .bl-wdev-kind__body h3 { --bl-h3-list: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--t-bright); }
.bl-wdev-kind__body p:not(.bl-wdev-kind__k) { font-size: 15.5px; line-height: 1.6; }
.bl-wdev-what { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; margin-top: 36px; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--bl-line); }
.bl-wdev-what > div { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--base); }
.bl-wdev-what > div > * { margin: 0; }
.bl-wdev-what__n { font: 500 12px/1.3 var(--_font-mono); color: var(--wdev-num); }
main .bl-wdev-what h3 { --bl-h3-list: 19px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-what p { font-size: 15px; line-height: 1.55; }
.bl-wdev-what a, .bl-wdev-stack__item a, .bl-wdev-steps a, .bl-wdev-ai a, .bl-wdev-fit a { color: var(--accent-text); }

/* 02 The stack: tab pills, item cards and the integration map */
.bl-wdev-stack { display: flex; flex-direction: column; gap: 32px; }
.bl-wdev-stack__tabs { display: none; }
.bl-wdev-stack.is-js .bl-wdev-stack__tabs { display: flex; gap: 6px; align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 999px; background: var(--base-tint); }
.bl-wdev-stack__tabs::-webkit-scrollbar { display: none; }
.bl-wdev-stack__tab { flex: none; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--bl-copy); font: 500 14px/1.3 var(--_font-default); cursor: pointer; }
.bl-wdev-stack__tab:hover { color: var(--t-bright); }
.bl-wdev-stack__tab.is-on { background: var(--accent); color: #fff; }
.bl-wdev-stack__tab:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.bl-wdev-stack__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.bl-wdev-stack__panels { flex: 1.3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.bl-wdev-stack__panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; align-content: start; }
.bl-wdev-stack.is-js .bl-wdev-stack__panel { display: none; }
.bl-wdev-stack.is-js .bl-wdev-stack__panel.is-on { display: grid; }
main p.bl-wdev-stack__label { grid-column: 1 / -1; margin: 0; font: 500 12px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.bl-wdev-stack.is-js .bl-wdev-stack__label { display: none; }
.bl-wdev-stack__item { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--bl-line); border-radius: 18px; background: var(--base-tint); }
.bl-wdev-stack__item > * { margin: 0; }
.bl-wdev-stack__item > span { font: 500 11.5px/1.3 var(--_font-mono); color: var(--wdev-num); }
main .bl-wdev-stack__item h3 { --bl-h3-list: 18px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-stack__item p { font-size: 14.5px; line-height: 1.55; }
.bl-wdev-map { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent-text) 25%, transparent); border-radius: 24px; background: var(--wdev-map); }
.bl-wdev-map__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(--t-muted); }
.bl-wdev-map__bar span:first-child { color: var(--accent-text); }
.bl-wdev-map__area { position: relative; flex: 1; min-height: 300px; }
.bl-wdev-map__area svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-wdev-map__area path { stroke: color-mix(in srgb, var(--accent-text) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.bl-wdev-map__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 20px; border: 1px solid var(--accent); border-radius: 16px; background: linear-gradient(180deg, rgba(37, 99, 255, .3), rgba(37, 99, 255, .1)); box-shadow: 0 0 0 6px rgba(37, 99, 255, .1); white-space: nowrap; }
.bl-wdev-map__hub b { font-size: 16px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-map__hub small { font: 400 11px/1.3 var(--_font-mono); color: var(--wdev-soft); }
.bl-wdev-map__node { position: absolute; padding: 8px 12px; border: 1px solid var(--wdev-line2); border-radius: 10px; background: var(--base-tint); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--t-bright); }
.bl-wdev-map__node.is-top { left: 50%; top: 0; transform: translateX(-50%); }
.bl-wdev-map__node.is-tl { left: 4%; top: 10%; }
.bl-wdev-map__node.is-tr { right: 4%; top: 10%; }
.bl-wdev-map__node.is-bl { left: 2%; bottom: 10%; }
.bl-wdev-map__node.is-br { right: 4%; bottom: 10%; }
.bl-wdev-map figcaption { font-size: 12.5px; line-height: 1.5; color: var(--t-muted); }

/* 03 AI-assisted development: one wide card */
.bl-wdev-ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: 32px 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 0% 0%, rgba(37, 99, 255, .16), var(--base-tint) 55%); }
.bl-wdev-ai .bl-svc-head.bl-wdev-ai__head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
.bl-wdev-ai .bl-svc-head.bl-wdev-ai__head > * { grid-column: 1; }
main .bl-wdev-ai .bl-svc-head h2 { font-size: clamp(28px, 3.4vw, 42px) !important; max-width: none; line-height: 1.08 !important; letter-spacing: -.03em; }
main .bl-wdev-ai__head p:not(.bl-svc-head__eyebrow) { font-size: 16.5px; line-height: 1.6; color: var(--t-medium); }
.bl-wdev-ai__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bl-wdev-ai__steps > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border: 1px dashed var(--wdev-dash); border-radius: 14px; background: var(--wdev-tile); }
.bl-wdev-ai__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-wdev-ai__steps b { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--t-bright); }
.bl-wdev-ai__steps small { font: 400 11px/1.3 var(--_font-mono); color: var(--t-muted); }
.bl-wdev-ai__steps .is-dev { border-style: solid; border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.bl-wdev-ai__steps .is-dev em, .bl-wdev-ai__steps .is-dev small { color: var(--accent-text); }
.bl-wdev-ai__steps .is-rel { border: 1px solid var(--accent); background: linear-gradient(180deg, rgba(37, 99, 255, .22), var(--wdev-tile)); }
.bl-wdev-ai__steps .is-rel em, .bl-wdev-ai__steps .is-rel small { color: var(--wdev-soft); }

/* 04 Examples: case cards with a small pipeline drawing */
.bl-wdev-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.bl-wdev-case { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); color: inherit; text-decoration: none; }
.bl-wdev-case:hover { border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.bl-wdev-case:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.bl-wdev-case__art { display: flex; flex-direction: column; gap: 7px; padding: 20px; border-bottom: 1px solid var(--wdev-line3); background: var(--wdev-deep); }
.bl-wdev-case__bar { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 2px; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-wdev-case__bar span:last-child { color: var(--accent-text); }
.bl-wdev-case__art .bl-wdev-row small { color: var(--wdev-soft); }
.bl-wdev-case__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 24px; }
.bl-wdev-case__meta { font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
main h3.bl-wdev-case__title { --bl-h3-list: 19px; margin: 0; font-weight: 600; letter-spacing: -.015em; color: var(--t-bright); }
.bl-wdev-case__sum { font-size: 14.5px; line-height: 1.5; color: var(--bl-copy); }
.bl-wdev-case__more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--accent-text); }

/* 05 How a project runs: five steps with a progress line */
.bl-wdev-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px 12px; margin: 0; padding: 0; list-style: none; }
.bl-wdev-step { display: flex; flex-direction: column; gap: 14px; }
.bl-wdev-step > h3, .bl-wdev-step > p { margin: 0; }
.bl-wdev-step__line { height: 3px; border-radius: 2px; background: var(--accent); }
.bl-wdev-step--2 .bl-wdev-step__line { background: rgba(37, 99, 255, .75); }
.bl-wdev-step--3 .bl-wdev-step__line { background: rgba(37, 99, 255, .55); }
.bl-wdev-step--4 .bl-wdev-step__line { background: rgba(37, 99, 255, .4); }
.bl-wdev-step--5 .bl-wdev-step__line { background: linear-gradient(90deg, #2563ff, #9db6ff); }
.bl-wdev-step__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--accent); border-radius: 50%; font: 500 13px/1 var(--_font-mono); color: var(--accent-text); }
.bl-wdev-step--1 .bl-wdev-step__n { background: var(--accent); color: #fff; }
.bl-wdev-step--5 .bl-wdev-step__n { border-color: #9db6ff; background: rgba(37, 99, 255, .2); color: var(--t-bright); }
main .bl-wdev-step h3 { --bl-h3-list: 18px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-step p { font-size: 14.5px; line-height: 1.55; }

/* 06 Fit check: good fit, probably not, and the website links card */
.bl-wdev-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.bl-wdev-fit__card { display: flex; flex-direction: column; gap: 18px; padding: 30px; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); }
.bl-wdev-fit__card > * { margin: 0; }
.bl-wdev-fit__card.is-yes { border-color: color-mix(in srgb, var(--accent-text) 30%, transparent); }
.bl-wdev-fit__card.is-no { background: var(--wdev-deep); }
.bl-wdev-fit__card.is-link { gap: 14px; border-color: rgba(37, 99, 255, .45); background: linear-gradient(180deg, rgba(37, 99, 255, .12), var(--base-tint) 50%); }
main .bl-wdev-fit h3 { --bl-h3-list: 19px; font-weight: 600; color: var(--t-bright); }
.bl-wdev-fit ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bl-wdev-fit li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 15.5px; line-height: 1.5; color: var(--bl-copy); }
.bl-wdev-fit .is-yes li { color: var(--t-medium); }
.bl-wdev-fit li::before { content: "✓"; color: var(--wdev-num); }
.bl-wdev-fit .is-no li::before { content: "–"; color: var(--wdev-dim); }
main .bl-wdev-fit__card.is-link p { font-size: 15px; line-height: 1.55; color: var(--t-medium); }

@media (prefers-reduced-motion: no-preference) {
  .bl-wdev-case, .bl-wdev-stack__tab { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
}

/* B69 (2026-11-04): SEO and GEO page rebuilt to SEO GEO Page.dc.html */
/* Values are the mock's (dark); light theme uses the site tokens and the B68 --wdev-* overrides.
   Reuses .bl-wdev-facts, -what, -steps, -case(s), -row and -fit from B68. */

/* Hero: hook large, topic line under it (both stay in the H1), lead, buttons, mock drawing */
main #machine-legibility-hero h1.hero-09-headline__hooked { display: flex; flex-direction: column; gap: 26px; max-width: 11ch; font-size: clamp(42px, min(5.6vw, 8.4vh), 74px) !important; line-height: 1 !important; letter-spacing: -.045em !important; background: none; -webkit-text-fill-color: currentColor; color: var(--t-bright); }
#machine-legibility-hero .bl-phero__hook { display: block; }
#machine-legibility-hero .bl-phero__accent { color: var(--wdev-h1-accent); }
#machine-legibility-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); }
#machine-legibility-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#machine-legibility-hero .bl-home-hero__btn { font-size: 16px; }
#machine-legibility-hero .hero-09-headline__prices strong::after { content: " ·"; font-weight: 400; color: var(--t-muted); }
#machine-legibility-hero .db-hero-09__grid { display: none; }
@media (min-width: 1100px) { #machine-legibility-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #machine-legibility-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }

/* Hero drawing: drawn on a 620 x 540 grid and scaled with the container (--u = 1/620 of its width).
   Below 460px wide the cards stack at their natural size. */
.bl-geo-hv { container-type: inline-size; width: 100%; max-width: 620px; margin-left: auto; text-align: left; }
.bl-geo-hv__box { --u: calc(100cqw / 620); position: relative; aspect-ratio: 620 / 540; }
.bl-geo-hv__wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-geo-hv__wire path { stroke: color-mix(in srgb, var(--accent-text) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.bl-geo-hv__dot { display: none; fill: var(--wdev-soft); }
.bl-geo-hv__card { position: absolute; display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: calc(16 * var(--u)); background: var(--base-tint); }
.bl-geo-hv__card.is-page { left: 0; top: 7.407%; width: 43.548%; height: 37.037%; }
.bl-geo-hv__card.is-code { left: 32.258%; top: 46.296%; width: 48.387%; border-color: var(--accent); background: var(--wdev-deep); box-shadow: 0 0 0 calc(5 * var(--u)) rgba(37, 99, 255, .08), 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgba(37, 99, 255, .45); }
.bl-geo-hv__card.is-ai { left: 53.226%; top: 3.704%; width: 46.774%; height: 33.333%; border-color: color-mix(in srgb, var(--accent-text) 30%, transparent); }
.bl-geo-hv__bar { display: flex; justify-content: space-between; align-items: center; gap: calc(6 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--bl-line); font: 500 calc(9.5 * var(--u))/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-geo-hv__bar i { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: color-mix(in srgb, var(--t-bright) 16%, transparent); }
.bl-geo-hv__bar i + span { margin-left: auto; }
.is-code .bl-geo-hv__bar span:first-child, .is-ai .bl-geo-hv__bar span:first-child { color: var(--accent-text); }
.bl-geo-hv__in { display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(16 * var(--u)); }
.bl-geo-hv__k { font: 500 calc(9 * var(--u))/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-geo-hv__in > b { font-size: calc(20 * var(--u)); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--t-bright); }
.bl-geo-hv__line, .bl-geo-hv__lines span { display: block; width: 90%; height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: color-mix(in srgb, var(--t-bright) 12%, transparent); }
.bl-geo-hv__line.is-70 { width: 70%; }
.bl-geo-hv__line.is-80 { width: 80%; }
.bl-geo-hv__btn { align-self: flex-start; margin-top: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: var(--accent); font-size: calc(11 * var(--u)); font-weight: 500; line-height: 1.3; color: #fff; }
main pre.bl-geo-hv__code { margin: 0; padding: calc(14 * var(--u)) calc(16 * var(--u)); overflow: hidden; border: 0; background: none; font: 400 calc(12 * var(--u))/1.6 var(--_font-mono); white-space: pre; color: var(--t-muted); }
.bl-geo-hv__code b { font-weight: 400; color: var(--wdev-soft); }
.is-ai .bl-geo-hv__in { gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.bl-geo-hv__q { align-self: flex-end; max-width: 85%; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); background: var(--wdev-chip); font-size: calc(12.5 * var(--u)); line-height: 1.4; color: var(--t-bright); }
.bl-geo-hv__lines { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.bl-geo-hv__lines span { width: 94%; background: color-mix(in srgb, var(--t-bright) 14%, transparent); }
.bl-geo-hv__lines span + span { width: 78%; }
.bl-geo-hv__src { align-self: flex-start; display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border: 1px solid rgba(37, 99, 255, .5); border-radius: 999px; background: rgba(37, 99, 255, .14); font: 400 calc(10.5 * var(--u))/1.3 var(--_font-mono); color: var(--wdev-soft); }
.bl-geo-hv__src i { flex: none; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--accent); }
main p.bl-geo-hv__cap { position: absolute; left: 0; right: 0; top: 92.593%; display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 calc(10.5 * var(--u))/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-geo-hv__cap span { color: var(--t-muted); }
.bl-geo-hv__cap span:last-child { color: var(--accent-text); }
@container (max-width: 459px) {
  .bl-geo-hv__box { --u: 1px; display: flex; flex-direction: column; gap: 12px; aspect-ratio: auto; }
  .bl-geo-hv__wire { display: none; }
  .bl-geo-hv__card.is-page, .bl-geo-hv__card.is-code, .bl-geo-hv__card.is-ai { position: static; width: auto; height: auto; }
  main p.bl-geo-hv__cap { position: static; padding-top: 4px; }
}

/* 01 What they mean: SEO and GEO cards, facts strip (.bl-wdev-facts as a list) */
.bl-geo-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.bl-geo-pair__card { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.5vw, 40px); border: 1px solid var(--bl-line); border-radius: 24px; background: var(--base-tint); }
.bl-geo-pair__card.is-main { border-color: rgba(37, 99, 255, .55); background: linear-gradient(180deg, rgba(37, 99, 255, .16), var(--base-tint) 55%); }
main .bl-geo-pair__card > p { margin: 0; }
main p.bl-geo-pair__abbr { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--t-bright); }
main p.bl-geo-pair__k { font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
main .is-main p.bl-geo-pair__k { color: var(--accent-text); }
main p.bl-geo-pair__t { font-size: 17px; line-height: 1.55; color: var(--t-medium); }
.bl-geo-pair__t b { font-weight: 500; color: var(--t-bright); }
.bl-wdev-facts.bl-geo-facts { margin: 16px 0 0; }
.bl-geo-facts dd { margin: 0; }
.bl-geo-facts .bl-wdev-facts__v { font-size: 19px; }
.bl-geo-facts a { color: var(--accent-text); }

/* 02 The difference: tab pills, the two panels stacked so the box keeps its height */
.bl-geo-diff { overflow: hidden; border: 1px solid var(--bl-line); border-radius: 24px; background: var(--base-tint); }
.bl-geo-diff__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--bl-line); }
main .bl-geo-diff__bar > p { margin: 0; font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-geo-diff__tabs { display: none; }
.bl-geo-diff.is-js .bl-geo-diff__tabs { display: flex; flex-wrap: wrap; max-width: 100%; padding: 4px; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 999px; background: var(--wdev-deep); }
.bl-geo-diff__tab { flex: 1 1 auto; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--bl-copy); font: 500 14px/1.3 var(--_font-default); cursor: pointer; }
.bl-geo-diff__tab:hover { color: var(--t-bright); }
.bl-geo-diff__tab.is-on { background: var(--accent); color: #fff; }
.bl-geo-diff__tab.is-on:first-child { background: color-mix(in srgb, var(--t-bright) 16%, transparent); color: var(--t-bright); }
.bl-geo-diff__tab:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
@media (max-width: 479px) { .bl-geo-diff.is-js .bl-geo-diff__tabs { flex-direction: column; width: 100%; border-radius: 24px; } }
.bl-geo-diff__stack { display: grid; gap: 40px; padding: clamp(24px, 3.5vw, 40px); }
.bl-geo-diff.is-js .bl-geo-diff__stack { min-height: 330px; }
.bl-geo-diff.is-js .bl-geo-diff__panel { grid-area: 1 / 1; visibility: hidden; }
.bl-geo-diff.is-js .bl-geo-diff__panel.is-on { visibility: visible; }
.bl-geo-diff__panel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bl-geo-diff__panel > * { margin: 0; }
main p.bl-geo-diff__quote { max-width: 820px; font-size: clamp(18px, 2vw, 24px); line-height: 1.6; color: var(--t-muted); }
.bl-geo-diff__quote mark { padding: 1px 6px; border: 1px dashed color-mix(in srgb, var(--t-bright) 35%, transparent); border-radius: 5px; background: none; color: var(--t-bright); }
.bl-geo-diff__guess { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; padding: 0; list-style: none; }
.bl-geo-diff__guess li { padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--t-bright) 16%, transparent); border-radius: 12px; background: var(--wdev-deep); font-size: 14px; line-height: 1.4; color: var(--bl-copy); }
.bl-geo-diff__guess span { font: 500 12px/1.4 var(--_font-mono); color: var(--t-muted); }
main p.bl-geo-diff__sum { margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--t-muted); }
.bl-geo-diff__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.bl-geo-diff__facts > div { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent-text) 40%, transparent); border-radius: 16px; background: var(--wdev-deep); }
.bl-geo-diff__facts > div.is-main { border-color: var(--accent); background: linear-gradient(180deg, rgba(37, 99, 255, .16), var(--wdev-deep)); }
.bl-geo-diff__facts dt { align-self: flex-start; padding: 3px 9px; border-radius: 6px; background: rgba(37, 99, 255, .25); font: 500 10.5px/1.3 var(--_font-mono); color: var(--wdev-soft); }
.bl-geo-diff__facts .is-main dt { background: var(--accent); color: #fff; }
.bl-geo-diff__facts dd { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--t-bright); }
main p.bl-geo-diff__ok { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--wdev-soft); }
.bl-geo-diff__ok svg { flex: none; }

/* 03 Benefits (.bl-wdev-what) and 04 steps (.bl-wdev-steps): mock spacing and line shades */
.bl-wdev-what.bl-geo-what { margin-top: 0; }
.bl-geo-what > div { padding: 30px; }
.bl-geo-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 16px; }
.bl-geo-steps .bl-wdev-step--2 .bl-wdev-step__line { background: rgba(37, 99, 255, .7); }
.bl-geo-steps .bl-wdev-step--3 .bl-wdev-step__line { background: rgba(37, 99, 255, .45); }
.bl-geo-steps .bl-wdev-step--5 .bl-wdev-step__n { font: 500 15px/1 var(--_font-default); }
.bl-geo-steps p { font-size: 15px; }

/* 05 Not on Bones? Check, Audit and the structural next step */
.bl-geo-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.bl-geo-pack { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); }
.bl-geo-pack > * { margin: 0; }
.bl-geo-pack.is-main { border-color: var(--accent); background: linear-gradient(180deg, rgba(37, 99, 255, .16), var(--base-tint) 45%); box-shadow: 0 30px 80px -30px rgba(37, 99, 255, .55); }
.bl-geo-pack.is-next { gap: 14px; border: 1px dashed color-mix(in srgb, var(--accent-text) 30%, transparent); background: var(--wdev-deep); }
.bl-geo-pack__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
main .bl-geo-pack__head h3 { --bl-h3-list: 22px; margin: 0; font-weight: 600; letter-spacing: -.02em; color: var(--t-bright); }
.bl-geo-pack__time { font: 500 11px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.is-main .bl-geo-pack__time { color: var(--accent-text); }
main p.bl-geo-pack__price { display: flex; align-items: baseline; gap: 8px; font-size: 50px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--t-bright); }
.bl-geo-pack__price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--t-muted); }
main p.bl-geo-pack__text { font-size: 15.5px; line-height: 1.5; color: var(--bl-copy); }
main .is-main p.bl-geo-pack__text { color: var(--t-medium); }
.bl-geo-pack__cta { margin-top: auto; padding: 13px; border: 1px solid var(--wdev-dash); border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; color: var(--t-bright); }
.bl-geo-pack__cta:hover { border-color: var(--t-bright); color: var(--t-bright); }
.is-main .bl-geo-pack__cta { border-color: var(--accent); background: var(--accent); color: #fff; }
.is-main .bl-geo-pack__cta:hover { color: #fff; filter: brightness(1.1); }
.bl-geo-pack__cta:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
main p.bl-geo-pack__k { font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
main p.bl-geo-pack__lead { font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--t-bright); }
main p.bl-geo-pack__links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; font-size: 14.5px; font-weight: 500; }
.bl-geo-pack__links a { color: var(--accent-text); }

/* 06 Examples (.bl-wdev-case): fixed drawing height, tile drawings */
.bl-geo-cases .bl-wdev-case__art { justify-content: center; min-height: 180px; padding: 22px; }
.bl-geo-cases .bl-wdev-case__art .bl-wdev-row { color: var(--t-medium); }
.bl-wdev-case__art.bl-geo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 8px; }
.bl-geo-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 10px; background: var(--wdev-chip); }
.bl-geo-tile small { font: 500 10px/1.3 var(--_font-mono); text-transform: uppercase; color: var(--t-muted); }
.bl-geo-tile b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-geo-tile.is-num b { font-size: 26px; line-height: 1; letter-spacing: -.03em; }
.bl-geo-tile.is-num small { font: 400 11.5px/1.3 var(--_font-default); text-transform: none; }
.bl-geo-tile.is-wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--accent); background: rgba(37, 99, 255, .14); font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--t-bright); }
.bl-geo-tile.is-wide small { font: 500 12px/1.3 var(--_font-default); text-transform: none; text-align: right; color: var(--wdev-soft); }

/* 07 Fit: arrows on "Sound familiar?", as in the mock */
.bl-geo-fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.bl-geo-fit .is-yes li { font-size: 16px; }
.bl-geo-fit .is-no li { font-size: 16px; }
.bl-geo-fit .is-yes li::before { content: "→"; }

@media (prefers-reduced-motion: no-preference) {
  .bl-geo-hv__dot { display: inline; }
  .bl-geo-diff__tab, .bl-geo-pack__cta { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
}
/* B68 QA H1: visible "Illustrative example" label under the Web development hero drawing */
.bl-wdev-ws__note { margin: 10px 4px 0; text-align: right; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }

/* B70 (2026-11-04): AI Visibility Audit page rebuilt to AI Visibility Audit Page.dc.html */
/* Values are the mock's (dark); light theme uses the site tokens and the B68 --wdev-* overrides.
   Reuses .bl-wdev-facts, -steps, -fit and .bl-geo-pack(s) from B68/B69. */

/* Hero: hook large, topic line under it (both stay in the H1), lead, buttons, mock drawing */
main #ai-visibility-audit-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); }
#ai-visibility-audit-hero .bl-phero__hook { display: block; }
#ai-visibility-audit-hero .bl-phero__accent { display: block; color: var(--wdev-h1-accent); }
#ai-visibility-audit-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-visibility-audit-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#ai-visibility-audit-hero .bl-home-hero__btn { font-size: 16px; }
#ai-visibility-audit-hero .db-hero-09__grid { display: none; }
@media (min-width: 1100px) { #ai-visibility-audit-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #ai-visibility-audit-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }

/* Hero drawing: audit summary card and a prompt test (illustrative) */
.bl-aud-hv { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin-left: auto; text-align: left; }
.bl-aud-hv p { margin: 0; }
.bl-aud-hv__card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); border-radius: 20px; background: var(--base-tint); box-shadow: var(--wdev-shadow); }
.bl-aud-hv__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bl-line); }
.bl-aud-hv__bar > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-aud-hv__bar b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-aud-hv__bar small { font-size: 12px; line-height: 1.3; color: var(--t-muted); }
.bl-aud-hv__bar em, .bl-aud-hv__rank em { font: 500 10px/1.3 var(--_font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bl-aud-hv__bar em { flex: none; }
.bl-aud-hv__rank { display: flex; flex-direction: column; margin: 0; padding: 8px 20px 14px; list-style: none; }
.bl-aud-hv__rank li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 72px; align-items: center; gap: 14px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--wdev-line3); font-size: 13.5px; line-height: 1.3; color: var(--t-bright); }
.bl-aud-hv__rank li:last-child { border-bottom: 0; }
.bl-aud-hv__rank li::before { content: none; }
.bl-aud-hv__rank i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--w), color-mix(in srgb, var(--t-bright) 8%, transparent) var(--w)); }
.bl-aud-hv__rank .is-imp i { background: linear-gradient(90deg, var(--wdev-num) var(--w), color-mix(in srgb, var(--t-bright) 8%, transparent) var(--w)); }
.bl-aud-hv__rank .is-ok i { background: linear-gradient(90deg, var(--accent-text) var(--w), color-mix(in srgb, var(--t-bright) 8%, transparent) var(--w)); }
.bl-aud-hv__rank em { letter-spacing: 0; text-align: right; color: var(--wdev-soft); }
.bl-aud-hv__rank .is-imp em, .bl-aud-hv__rank .is-ok em { color: var(--t-muted); }
.bl-aud-hv__test { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 20px; background: var(--wdev-deep); }
.bl-aud-hv__k { display: flex; justify-content: space-between; gap: 12px; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.bl-aud-hv__k span { color: var(--t-muted); }
.bl-aud-hv__k span:first-child { color: var(--accent-text); }
.bl-aud-hv__q { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--t-bright); }
.bl-aud-hv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-aud-hv__chips span { padding: 5px 10px; border: 1px solid transparent; border-radius: 999px; background: var(--wdev-chip); font-size: 12px; line-height: 1.3; color: var(--t-medium); }
.bl-aud-hv__chips span.is-you { border: 1px dashed color-mix(in srgb, var(--accent-text) 50%, transparent); background: none; color: var(--accent-text); }
#ai-visibility-audit-hero .bl-wdev-ws__note { max-width: 560px; margin-left: auto; }
@container (max-width: 420px) {
  .bl-aud-hv__bar, .bl-aud-hv__test { padding-left: 16px; padding-right: 16px; }
  .bl-aud-hv__rank { padding-left: 16px; padding-right: 16px; }
  .bl-aud-hv__rank li { grid-template-columns: minmax(0, 1fr) 56px 62px; gap: 10px; font-size: 13px; }
}

/* Facts strip under the hero (.bl-wdev-facts as a list) */
.bl-aud-facts dd { margin: 0; }

/* 01 What the audit answers: three cards with a drawing on top */
.bl-aud-q { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.bl-aud-q__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); }
.bl-aud-q__art { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 150px; padding: 20px; border-bottom: 1px solid var(--wdev-line3); background: var(--wdev-deep); }
.bl-aud-q__row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--wdev-chip); font-size: 12.5px; line-height: 1.3; color: var(--t-medium); }
.bl-aud-q__row b { font-weight: 400; color: var(--t-bright); }
.bl-aud-q__row.is-off { border: 1px dashed color-mix(in srgb, var(--accent-text) 50%, transparent); }
.bl-aud-q__row.is-off b { color: var(--accent-text); }
.bl-aud-q__art.is-code { gap: 6px; font: 400 12px/1.6 var(--_font-mono); color: var(--t-muted); }
.bl-aud-q__art.is-code span, .bl-aud-q__art.is-code b { font-family: var(--_font-mono); }
.bl-aud-q__art.is-code b { font-weight: 400; color: var(--wdev-soft); }
.bl-aud-q__art.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px; }
.bl-aud-q__art.is-grid .bl-aud-q__row { padding: 8px 10px; font-size: 12px; }
.bl-aud-q__row i { font-style: normal; color: var(--t-muted); }
.bl-aud-q__row.is-on { border: 1px solid rgba(37, 99, 255, .5); background: rgba(37, 99, 255, .14); color: var(--t-bright); }
.bl-aud-q__row.is-on i { color: var(--accent-text); }
.bl-aud-q__note { grid-column: 1 / -1; padding-top: 2px; font: 500 10px/1.3 var(--_font-mono); letter-spacing: .1em; text-align: right; text-transform: uppercase; color: var(--t-muted); }
.bl-aud-q__body { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.bl-aud-q__body > * { margin: 0; }
.bl-aud-q__n { font: 500 12px/1.3 var(--_font-mono); color: var(--wdev-num); }
main .bl-aud-q__body h3 { --bl-h3-list: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--t-bright); }
.bl-aud-q__body p { font-size: 15px; line-height: 1.55; }

/* 02 What's included: numbered list beside the sample finding */
.bl-aud-inc { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.bl-aud-inc__list { flex: 1.3 1 440px; min-width: 0; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--t-bright) 10%, transparent); }
.bl-aud-inc__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--bl-line); }
.bl-aud-inc__list li::before { content: none; }
.bl-aud-inc__list li > div { display: flex; flex-direction: column; gap: 5px; }
.bl-aud-inc__list li > div > * { margin: 0; }
.bl-aud-inc__n { padding-top: 3px; font: 500 12px/1.3 var(--_font-mono); color: var(--wdev-num); }
.is-plus .bl-aud-inc__n { color: var(--accent-text); }
main .bl-aud-inc__list h3 { --bl-h3-list: 18px; font-weight: 600; color: var(--t-bright); }
.bl-aud-inc__list p { font-size: 15px; line-height: 1.5; }
.bl-aud-find { flex: 1 1 340px; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1px solid color-mix(in srgb, var(--accent-text) 30%, transparent); border-radius: 24px; background: radial-gradient(80% 80% at 100% 0%, rgba(37, 99, 255, .16), var(--wdev-deep) 60%); }
.bl-aud-find > * { margin: 0; }
.bl-aud-find__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(--t-muted); }
.bl-aud-find__bar span { color: var(--t-muted); }
.bl-aud-find__bar span:first-child { color: var(--accent-text); }
.bl-aud-find__title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
main .bl-aud-find__title h3 { --bl-h3-list: 20px; margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--t-bright); }
.bl-aud-find__title b { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--accent); font: 500 10px/1.3 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.bl-aud-find__rows { display: flex; flex-direction: column; border-top: 1px solid var(--bl-line); }
.bl-aud-find__rows > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wdev-line3); }
.bl-aud-find__rows > div:last-child { border-bottom: 0; }
.bl-aud-find__rows dt { padding-top: 3px; font: 500 10.5px/1.3 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.bl-aud-find__rows dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--t-medium); }
.bl-aud-find__rows .is-fix dt { color: var(--accent-text); }
.bl-aud-find__rows .is-fix dd { color: var(--t-bright); }
@media (max-width: 479px) { .bl-aud-find__rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* 03 How it works: three steps (.bl-wdev-steps) */
.bl-wdev-steps.bl-aud-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 16px; }
.bl-aud-steps .bl-wdev-step--2 .bl-wdev-step__line { background: rgba(37, 99, 255, .6); }
main .bl-aud-steps .bl-wdev-step h3 { --bl-h3-list: 19px; }
.bl-aud-steps .bl-wdev-step p { font-size: 15px; }

/* 04 Not an automated check: comparison table; rows stack below 640px */
.bl-aud-vs { overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); font-size: 15px; line-height: 1.5; }
.bl-aud-vs__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.3fr); }
.bl-aud-vs__row > span { padding: 16px 22px; border-bottom: 1px solid var(--wdev-line3); color: var(--bl-copy); }
.bl-aud-vs__row:last-child > span { border-bottom: 0; }
.bl-aud-vs__row > [role="rowheader"] { color: var(--t-muted); }
.bl-aud-vs__row > .is-us { background: rgba(37, 99, 255, .1); color: var(--t-bright); }
.bl-aud-vs__row.is-head > span { padding-top: 18px; padding-bottom: 18px; border-bottom-color: var(--bl-line); font: 500 11px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.bl-aud-vs__row.is-head > .is-us { color: var(--accent-text); }
@media (max-width: 639px) {
  .bl-aud-vs { font-size: 14px; }
  .bl-aud-vs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-aud-vs__row > span { padding: 12px 16px; }
  .bl-aud-vs__row > [role="rowheader"] { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 0; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; }
  .bl-aud-vs__row.is-head > span:first-child { grid-column: 1 / -1; padding: 0; border: 0; }
  .bl-aud-vs__row.is-head > span { padding-top: 14px; padding-bottom: 14px; }
}

/* 05 Pricing: two packs (.bl-geo-pack) with ticked lists, then the Structural Audit comparison */
.bl-geo-packs.bl-aud-packs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.bl-geo-pack.bl-aud-pack { gap: 22px; padding: clamp(28px, 3.5vw, 40px); border-radius: 24px; }
main .bl-aud-pack .bl-geo-pack__head h3 { --bl-h3-list: 24px; }
main .bl-aud-pack p.bl-geo-pack__price { font-size: 56px; }
.bl-aud-pack .bl-geo-pack__cta { padding: 14px; }
.bl-aud-pack__gets { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--bl-line); list-style: none; font-size: 15px; line-height: 1.45; color: var(--t-medium); }
.is-main .bl-aud-pack__gets { color: var(--t-bright); }
.bl-aud-pack__gets li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; }
.bl-aud-pack__gets li::before { content: "✓"; color: var(--wdev-num); }
.bl-aud-or { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px 48px; margin-top: clamp(32px, 4vw, 48px); padding: 28px clamp(24px, 3vw, 32px); border: 1px solid var(--bl-line); border-radius: 20px; }
.bl-aud-or > div { display: flex; flex-direction: column; gap: 8px; }
.bl-aud-or p { margin: 0; }
main p.bl-aud-or__k { font: 500 11px/1.3 var(--_font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
main p.bl-aud-or__lead { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--t-bright); }
.bl-aud-or > .bl-aud-or__text { gap: 12px; }
.bl-aud-or__text p { font-size: 15px; line-height: 1.55; color: var(--bl-copy); }
.bl-aud-or__text strong { font-weight: 500; color: var(--t-bright); }
.bl-aud-or__text a { color: var(--accent-text); }

/* 06 Is it right for you? (.bl-wdev-fit): the two links at the foot of "After the audit" */
main .bl-aud-fit .is-link p.bl-aud-fit__links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; font-size: 14.5px; font-weight: 500; }

/* B71 (2026-11-04): AI-assisted prototyping page in the AI Engineering mock layout */
/* No mock of its own (Owner choice): the AI Engineering mock's patterns, filled with this page's copy.
   Reuses .bl-sg-facts, .bl-se-vibe-panel, .bl-benefits--fit, .bl-wdev-ai, -steps, -row, -ws__note,
   .bl-hv and .bl-ss-work. Light theme uses the site tokens and the B68 --wdev-* overrides. */

/* Hero: hook large, topic line under it (both stay in the H1), lead, buttons, drawing (as B70) */
main #prototyping-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); }
#prototyping-hero .bl-phero__hook { display: block; }
#prototyping-hero .bl-phero__accent { display: block; color: var(--wdev-h1-accent); }
#prototyping-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); }
#prototyping-hero .hero-09-headline__lead { max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--bl-copy); }
#prototyping-hero .bl-home-hero__btn { font-size: 16px; }
#prototyping-hero .db-hero-09__grid { display: none; }
@media (min-width: 1100px) { #prototyping-hero .db-hero-09__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } #prototyping-hero .db-hero-09__stage { padding-left: 0; padding-right: 0; } }
.bl-pro-hv .bl-hv__card { gap: 8px; padding: 18px; border-radius: 20px; box-shadow: var(--wdev-shadow); }
.bl-pro-hv .bl-hv__bar { margin-bottom: 4px; }
.bl-pro-hv .bl-wdev-row { padding: 10px 12px; font-size: 13px; }
.bl-pro-hv .bl-hv__checks li { min-width: 0; }
p.bl-pro-hv__nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; font-size: 12px; color: var(--t-muted); }
.bl-pro-hv__nav i, .bl-pro-art__nav i { padding: 5px 10px; border-radius: 6px; font-style: normal; }
.bl-pro-hv__nav i.is-on, .bl-pro-art__nav i.is-on { background: rgba(37, 99, 255, .18); color: var(--t-bright); }
#prototyping-hero .bl-wdev-ws__note { max-width: 560px; margin-left: auto; }

/* Intro: the framed panel (mock 02) with chips under the heading */
.bl-pro-intro .bl-hv__chips span { padding: 6px 12px; font-size: 12.5px; }

/* 01 Why prototype first: six numbered cards, three to a row on wide screens */
@media (min-width: 960px) { .bl-benefits.bl-benefits--fit.bl-pro-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* 02 What a prototype can include: choices beside one output card (mock 03); all cards without JS */
.bl-pro-inc { display: grid; gap: 16px; }
.bl-pro-inc__tabs { display: none; }
.bl-pro-inc__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.bl-pro-inc__panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); }
.bl-pro-inc__panel > * { margin: 0; }
main .bl-pro-inc__panel h3 { --bl-h3-list: 20px; font-weight: 600; color: var(--t-bright); }
.bl-pro-inc__panel .bl-ss-compare__k { margin: 6px 0 0; color: var(--accent-text); }
.bl-pro-inc__panel .bl-wdev-ws__note { margin: auto 0 0; padding-top: 6px; }
.bl-pro-inc.is-js .bl-pro-inc__tabs { display: grid; gap: 8px; align-content: start; }
.bl-pro-inc.is-js .bl-pro-inc__panels { display: block; }
.bl-pro-inc.is-js .bl-pro-inc__panel { display: none; padding: 28px; }
.bl-pro-inc.is-js .bl-pro-inc__panel.is-on { display: flex; border-color: var(--accent); background: linear-gradient(180deg, rgba(37, 99, 255, .14), var(--base-tint) 70%); }
.bl-pro-inc__tab { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 16px 18px; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--base-tint); font: 500 15px/1.4 var(--_font-default); color: var(--t-medium); text-align: left; cursor: pointer; }
.bl-pro-inc__tab span { font: 500 12px/1 var(--_font-mono); color: var(--wdev-num); }
.bl-pro-inc__tab:hover { color: var(--t-bright); }
.bl-pro-inc__tab.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: rgba(37, 99, 255, .12); color: var(--t-bright); }
.bl-pro-inc__tab:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
@media (min-width: 960px) {
  .bl-pro-inc.is-js { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .bl-pro-inc.is-js .bl-pro-inc__panels { position: sticky; top: calc(var(--bl-hdr-h, 72px) + 72px); }
}
@media (min-width: 1100px) {
  .bl-pro-inc.is-js { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .bl-pro-inc.is-js .bl-pro-inc__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bl-pro-inc__tab { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
}

/* Small illustrative drawings in the output card */
.bl-pro-art { display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 14px; border: 1px solid var(--bl-line); border-radius: 14px; background: var(--wdev-deep); }
.bl-pro-art__nav { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--t-muted); }
.bl-pro-art__screen { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; background: var(--wdev-chip); }
.bl-pro-art__screen span { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--t-bright) 14%, transparent); }
.bl-pro-art__screen span.is-70 { width: 70%; }
.bl-pro-art__field { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px dashed var(--wdev-dash); border-radius: 8px; font: 500 10px/1.3 var(--_font-mono); text-transform: uppercase; color: var(--t-muted); }
.bl-pro-art__field b { font-weight: 500; color: var(--t-medium); }
.bl-pro-art__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: auto 0; }
.bl-pro-art__flow i { padding: 8px 12px; border: 1px solid var(--bl-line); border-radius: 999px; background: var(--wdev-chip); font-size: 12.5px; font-style: normal; color: var(--t-bright); }
.bl-pro-art__flow i + i::before { content: "→"; margin: 0 8px 0 -2px; color: var(--accent-text); }
.bl-pro-art__flow i.is-on { border-color: var(--accent); background: rgba(37, 99, 255, .14); }
.bl-pro-art__bars { display: flex; align-items: flex-end; gap: 10px; height: 104px; }
.bl-pro-art__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.bl-pro-art__bars i.is-on { background: var(--accent); }

/* 04 Our platform: text beside a small Bones 9 card */
.bl-pro-own { display: grid; gap: 32px 64px; align-items: center; }
.bl-pro-own .bl-svc-head.bl-pro-own__head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
.bl-pro-own .bl-svc-head.bl-pro-own__head > * { grid-column: 1; }
main .bl-pro-own__head p:not(.bl-svc-head__eyebrow) { font-size: 16.5px; line-height: 1.6; color: var(--t-medium); }
.bl-pro-own__head a { color: var(--accent-text); }
.bl-pro-own__art { width: 100%; max-width: 480px; }
.bl-pro-own__art .bl-hv__card { gap: 8px; padding: 18px; border-radius: 20px; }
.bl-pro-own__art .bl-wdev-row { padding: 10px 12px; font-size: 13px; }
@media (min-width: 960px) { .bl-pro-own { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .bl-pro-own__art { justify-self: end; } }

/* 05 Prices: the mock's "Prices" card under the steps, one card wide */
.db-section:has(+ .bl-pro-price-wrap) { padding-bottom: 0 !important; }
.bl-pro-price-wrap { padding-top: 40px !important; }
.bl-ss-work.bl-pro-price { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.bl-pro-price > div { display: flex; flex-direction: column; gap: 8px; max-width: none; }
.bl-pro-price > div > * { margin: 0; }
main .bl-pro-price h2 { font-size: clamp(22px, 2vw, 26px) !important; font-weight: 600; line-height: 1.2 !important; letter-spacing: -.02em; color: var(--t-bright); }
.bl-pro-price .bl-se-p { max-width: 70ch; }
.bl-pro-price a { color: var(--accent-text); }

/* Section numbers match the On this page bar: the intro is not in the bar, so it has no number; Prices is 06 */
main:has(#service-content) .bl-pro-intro .bl-svc-head { counter-increment: none; }
main:has(#service-content) .bl-pro-intro .bl-svc-head__eyebrow::before { content: ""; }
main:has(#service-content) .bl-pro-price > div { counter-increment: blsec; }
main:has(#service-content) .bl-pro-price .bl-ss-compare__k::before { content: counter(blsec, decimal-leading-zero) " · "; }
/* AI and developers: the three tiles stack on small phones so the mono labels fit */
@media (max-width: 479px) { .bl-pro-ai .bl-wdev-ai__steps { grid-template-columns: minmax(0, 1fr); } }