/* Steering 12 §4 to §6: Problem Chapters, the Signal Track, the review card and the action. Markup from
   inc/bb-chapters.php (wrappers only). Spec: REFERENCE-PROBLEM-SECTION-H7.html, rules scoped to .chA .chB .chC .chD
   .lanes .lane .trk .nd .verdict .pc .act, namespaced here as bb-*. Text on light grounds is #1F2937 or darker for body
   and #3B4452 or darker for muted (§3); orange text on light is #C34A00 / #B54300 (AA), #FF6A00 only as a fill or line. */

/* ── Chapters ── */
/* (0,3,3): bb-visuals.css pads section.bb-vis-has-v1.bb-vis-has-v1 at (0,2,3) */
html body section.bb-ch.bb-ch.bb-ch { padding: 0 !important; background: none !important; display: flex; flex-direction: column; }
html body section.bb-ch > * { width: 100%; }
html body .bb-ch .bb-chA, html body .bb-ch .bb-chC, html body .bb-ch .bb-chD { background: #F7F8FA; }
html body .bb-ch .bb-chA { padding: 96px 0 64px; }
/* Problem section WHITE where the section after it is grey (owner, 26 Oct 2026): the chapter ground is #F7F8FA by
   Steering 12, and on these nine pages the self-diagnosis that follows is grey too, so two greys touched.
   tools/section-rhythm.py flags any same-tone boundary site-wide. */
html body:is(.page-id-12736, .page-id-12696, .page-id-12483, .page-id-12544, .page-id-12939, .page-id-12897, .page-id-13100, .page-id-13122, .page-id-13087) .bb-ch :is(.bb-chA, .bb-chC, .bb-chD) { background: #FFFFFF !important; }
html body .bb-ch .bb-chC { padding: 80px 0 72px; }
html body .bb-ch .bb-chD { padding: 0 0 96px; }
html body .bb-ch .bb-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
/* the section's outer edges keep the site rhythm (owner, 25 Oct 2026): every other band reads 96px of section padding
   plus the fluid .bb-wrap padding, clamp(20px, 4vw, 60px), from its edge to its first and last painted content
   (measured 162px at 1440, 82 to 90px at 390); the chapters zero the wrap padding, so the first and last chapter
   carry the sum. (0,3,3) beats the per-chapter paddings below at every width. */
html body section.bb-ch.bb-ch > :first-child { padding-top: calc(96px + clamp(20px, 4vw, 60px)); }
html body section.bb-ch.bb-ch > :last-child { padding-bottom: calc(96px + clamp(20px, 4vw, 60px)); }
@media (max-width: 700px) {
  html body section.bb-ch.bb-ch > :first-child { padding-top: calc(60px + clamp(20px, 4vw, 60px)); }
  html body section.bb-ch.bb-ch > :last-child { padding-bottom: calc(60px + clamp(20px, 4vw, 60px)); }
}

/* A: the claim */
html body .bb-ch .bb-chA .bb-label { color: #C34A00 !important; }
/* size, weight and tracking come from the page's own H2 scale, so this heading matches every other H2 on the page
   (owner, 25 Oct 2026: the reference's 56px/800 read as a different font) */
html body .bb-ch .bb-chA h2 { margin: 18px 0 0 !important; max-width: 1100px; color: #14181F !important; }
/* the accent stays brand orange (owner, 25 Oct 2026), the reference's own colour */
html body .bb-ch .bb-chA h2 em { font-style: normal; color: #FF6A00 !important; }
html body .bb-ch .bb-chA .bb-explainer-strip--answer { margin: 40px 0 0 !important; max-width: none !important; padding: 4px 0 4px 32px !important; background: none !important; border: 0 !important; border-left: 3px solid #FF8A3D !important; border-radius: 0 !important; box-shadow: none !important; }
html body .bb-ch .bb-chA .bb-explainer-label { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: normal !important; text-transform: none !important; color: #14181F !important; }
html body .bb-ch .bb-chA .bb-explainer-strip--answer p,
html body .bb-ch .bb-chA--plain p { margin: 12px 0 0 !important; max-width: 1120px !important; font-size: 19.5px !important; line-height: 1.7 !important; color: #1F2937 !important; }
html body .bb-ch .bb-chA--plain h2 + p { margin-top: 40px !important; }
html body .bb-ch .bb-chA .bb-explainer-strip--answer strong, html body .bb-ch .bb-chA--plain p strong { font-weight: 700 !important; color: #14181F !important; }

/* B: the picture, a card beside the claim (owner, 25 Oct 2026). The full-bleed band left the picture small inside a
   wide black field; here it takes the right column, cropped 3:2 to its subject (--bb-fy per file, inc/bb-chapters.php),
   on a black card that matches the V1 black, so no edge, mask or fade is needed. */
@media (min-width: 1024px) {
  html body .bb-ch .bb-chA--split > .bb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0 64px; align-items: center; }
}
html body .bb-ch .bb-chA--split { padding: 96px 0 0; }
html body .bb-ch .bb-chA--split .bb-chA-copy { min-width: 0; }
html body .bb-ch .bb-chA--split .bb-explainer-strip--answer p, html body .bb-ch .bb-chA--split.bb-chA--plain p { font-size: 18px !important; }
html body .bb-ch figure.bb-chB.bb-chB--card { margin: 0 !important; max-width: none !important; padding: 0 !important; text-align: left; background: #000000 !important; border: 0 !important;
  border-radius: 20px !important; overflow: hidden; box-shadow: none !important; }   /* no shadow: on the light ground it read as a grey band under the picture (owner, 26 Oct 2026) */
html body .bb-ch .bb-chB.bb-chB--card img.bb-vis-img { display: block; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 3 / 2; margin: 0 !important;
  object-fit: cover !important; object-position: 50% var(--bb-fy, 50%) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-mask-image: none; mask-image: none; }
/* the caption sits centred in its band, equal space above and below (owner, 26 Oct 2026; it was 4px over 26px) */
html body .bb-ch .bb-chB--card figcaption { padding: 22px 28px; }
html body .bb-ch .bb-chB--card figcaption p { margin: 0 !important; max-width: none !important; font-size: 16px !important; line-height: 1.65 !important; color: #F4F5F7 !important; -webkit-font-smoothing: auto; text-align: left !important; }
html body .bb-ch .bb-chB--card figcaption p strong { color: #FFFFFF !important; }
html body .bb-ch .bb-chB--card figcaption a { color: #FF8A3D !important; }   /* a light-ground link colour on the black card measured 3.98:1 */
/* homepage: the CTA sits under the copy it acts on, left-aligned in the copy column */
html body .bb-ch .bb-chA-copy .bb-act { margin-top: 36px; }
html body .bb-ch .bb-chA-copy .bb-act .bb-cta-actions, html body .bb-ch .bb-chA-copy .bb-act .bb-final-actions { justify-content: flex-start !important; }
html body .bb-ch .bb-chA-copy .bb-act .bb-prob-cta, html body .bb-ch .bb-chA-copy .bb-act .bb-cta-sub, html body .bb-ch .bb-chA-copy .bb-act .bb-final-note-light { text-align: left !important; margin-left: 0 !important; }

/* ── Lanes and the Signal Track (§5) ── */
html body .bb-lanes { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; overflow: visible !important; box-shadow: none !important; }
html body .bb-lanes .bb-lane { display: grid !important; grid-template-columns: 300px minmax(0, 1fr); gap: 0 56px; align-items: start; margin: 0 !important; padding: 44px 0 !important; background: none !important;
  border: 0 !important; border-top: 1px solid #E6E8EE !important; border-radius: 0 !important; box-shadow: none !important; }
html body .bb-lanes .bb-lane:first-child { border-top: 0 !important; padding-top: 0 !important; }
html body .bb-lanes .bb-lh { min-width: 0; }
html body .bb-lanes .bb-tg, html body .bb-lanes .bb-server-panel-badge, html body .bb-lanes .bb-g4-duo-label { display: inline-block !important; margin: 0 !important; padding: 6px 12px !important; border: 0 !important; border-radius: 999px !important;
  font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .1em !important; text-transform: uppercase !important; background: #EEF0F4 !important; color: #4B5563 !important; }
html body .bb-lanes .bb-lane--ok .bb-tg, html body .bb-lanes .bb-lane--ok .bb-server-panel-badge { background: #FFF1E8 !important; color: #B54300 !important; }
html body .bb-lanes .bb-lh h3 { margin: 14px 0 0 !important; font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -.01em; color: #14181F !important; }
html body .bb-lanes .bb-trk { --cw: calc((100% - (var(--n) - 1) * 28px) / var(--n)); display: grid !important; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; position: relative;
  margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: bb-st; flex-direction: initial !important; }
html body .bb-lanes .bb-trk--2 { --n: 2; } html body .bb-lanes .bb-trk--3 { --n: 3; } html body .bb-lanes .bb-trk--4 { --n: 4; } html body .bb-lanes .bb-trk--5 { --n: 5; }
html body .bb-lanes .bb-trk::before { content: ""; position: absolute; left: 18px; right: calc(var(--cw) - 18px); top: 17px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #D5D9E0 0, #D5D9E0 50%, rgba(213,217,224,.35) 100%); }
html body .bb-lanes .bb-lane--ok .bb-trk::before { top: 16.5px; height: 3px; background: linear-gradient(90deg, #FFC59B, #FF6A00); box-shadow: 0 0 12px rgba(255,106,0,.35); }
html body .bb-lanes .bb-trk--w0 { --w: 0; } html body .bb-lanes .bb-trk--w1 { --w: 1; } html body .bb-lanes .bb-trk--w2 { --w: 2; } html body .bb-lanes .bb-trk--w3 { --w: 3; }
html body .bb-lanes .bb-lane--bad .bb-trk--w0::after, html body .bb-lanes .bb-lane--bad .bb-trk--w1::after, html body .bb-lanes .bb-lane--bad .bb-trk--w2::after, html body .bb-lanes .bb-lane--bad .bb-trk--w3::after { content: ""; position: absolute; left: calc(var(--w) * (var(--cw) + 28px) + 18px); right: calc(var(--cw) - 18px); top: 17px; height: 2px;
  background: repeating-linear-gradient(90deg, #F59E0B 0 6px, transparent 6px 12px); opacity: .5; }
/* the page's own arrow and pipe elements (glyph connectors) give way to the track */
html body .bb-lanes .bb-ct-mini-arrow, html body .bb-lanes .bb-server-pipe, html body .bb-lanes .bb-server-blocker > svg { display: none !important; }
html body .bb-lanes .bb-st { display: block !important; position: relative; min-width: 0; margin: 0 !important; padding: 56px 0 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #1F2937 !important; text-align: left !important; counter-increment: bb-st; opacity: 1 !important; }
html body .bb-lanes .bb-nd { position: absolute; top: 0; left: 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 Inter, system-ui, sans-serif; font-feature-settings: "tnum"; letter-spacing: .02em;
  color: #6B7280; background: linear-gradient(#fff, #F6F7F9); box-shadow: 0 0 0 1px #E3E6EB, 0 1px 2px rgba(16,24,40,.06), 0 6px 14px -6px rgba(16,24,40,.18); }
html body .bb-lanes .bb-nd::before { content: counter(bb-st, decimal-leading-zero); }
html body .bb-lanes .bb-st--warn .bb-nd::before, html body .bb-lanes .bb-st--res .bb-nd::before { content: none; }
html body .bb-lanes .bb-nd svg { width: 16px; height: 16px; display: block; }
html body .bb-lanes .bb-lane--ok .bb-nd { color: #C34A00; background: linear-gradient(#fff, #FFF5EE); box-shadow: 0 0 0 1px #FFD3B5, 0 0 0 5px rgba(255,106,0,.06), 0 6px 14px -6px rgba(195,74,0,.3); }
html body .bb-lanes .bb-st--warn .bb-nd { background: linear-gradient(#FFFBEB, #FEF3C7); box-shadow: 0 0 0 1px #FCD34D, 0 0 0 5px rgba(245,158,11,.10), 0 6px 14px -6px rgba(180,83,9,.3); }
html body .bb-lanes .bb-st--warn .bb-ct-warn-icon { color: #B45309 !important; }
html body .bb-lanes .bb-st--res { font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; }
html body .bb-lanes .bb-st--res .bb-nd { width: 44px; height: 44px; top: -4px; left: -4px; }
html body .bb-lanes .bb-st--res .bb-nd svg { width: 20px; height: 16px; }
html body .bb-lanes .bb-lane--bad .bb-st--res, html body .bb-lanes .bb-lane--bad .bb-st--res .bb-ct-warn-icon { color: #9B2C2C !important; }
html body .bb-lanes .bb-lane--bad .bb-st--res .bb-nd { background: #fff; box-shadow: 0 0 0 1.5px #F2B8B8, 0 0 0 6px rgba(197,48,48,.06), 0 8px 18px -8px rgba(155,44,44,.35); }
html body .bb-lanes .bb-lane--ok .bb-st--res { color: #B54300 !important; }
html body .bb-lanes .bb-lane--ok .bb-st--res .bb-nd { background: linear-gradient(135deg, #FF8A3D, #ED4B00); box-shadow: 0 0 0 6px rgba(255,106,0,.12), 0 12px 26px -8px rgba(255,106,0,.65); }
/* more than five steps: the vertical track at every width */
html body .bb-lanes .bb-trk--v { grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* Verdict line (the old chip row) */
html body .bb-verdict { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 10px 14px !important; text-align: left !important;
  margin: 8px 0 0 !important; padding: 28px 0 0 !important; border: 0 !important; border-top: 1px solid #E6E8EE !important; background: none !important; }
html body .bb-verdict > div { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #4B5563 !important; white-space: normal !important; }
html body .bb-verdict > svg { stroke: #9AA3AF; width: 14px; height: 12px; flex: none; }
html body .bb-verdict > div:last-child { font-weight: 600 !important; color: #9B2C2C !important; }
html body .bb-verdict > div:last-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #C53030; vertical-align: 1px; }
html body .bb-verdict--ok > div:last-child { color: #B54300 !important; }
html body .bb-verdict--ok > div:last-child::before { background: #FF6A00; }
html body .bb-ch .bb-close { margin: 20px auto 0 !important; max-width: 760px; text-align: center !important; font-size: 17px !important; line-height: 1.6 !important; color: #3B4452 !important; }
html body .bb-ch .bb-close strong { color: #14181F !important; }

/* Role Pair (pattern B): two component lanes with neutral pills, the DATA FLOW pill on the hairline between them */
html body .bb-lanes--pair { display: block !important; }
html body .bb-lanes--pair .bb-lane--pair { align-items: center; }
html body .bb-lanes--pair .bb-lane--pair + .bb-pair-flow + .bb-lane--pair { border-top: 0 !important; }
html body .bb-lanes--pair .bb-g4-duo-num { display: inline-grid !important; place-items: center; width: 36px; height: 36px; margin: 0 10px 0 0 !important; vertical-align: middle; border-radius: 50%; font: 600 12px/1 Inter, system-ui, sans-serif !important; font-feature-settings: "tnum";
  color: #6B7280 !important; background: linear-gradient(#fff, #F6F7F9) !important; box-shadow: 0 0 0 1px #E3E6EB, 0 6px 14px -6px rgba(16,24,40,.18); position: static !important; opacity: 1 !important; }
html body .bb-lanes--pair .bb-g4-duo-icon { display: none !important; }
html body .bb-lanes--pair .bb-g4-duo-label { vertical-align: middle; }
html body .bb-lanes--pair .bb-g4-duo-title { display: block; margin: 14px 0 0 !important; font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #14181F !important; }
html body .bb-lanes--pair .bb-g4-duo-text { margin: 0 !important; max-width: 760px; font-size: 17px !important; line-height: 1.65 !important; color: #1F2937 !important; }
html body .bb-lanes--pair .bb-pair-flow { position: relative; display: flex !important; justify-content: center; align-items: center; height: 1px; margin: 0 !important; padding: 0 !important; background: #E6E8EE !important; transform: none !important; width: auto !important; }
html body .bb-lanes--pair .bb-pair-flow > :not(.bb-g4-duo-arrow-label) { display: none !important; }
html body .bb-lanes--pair .bb-g4-duo-arrow-label { position: relative; display: inline-flex !important; align-items: center; gap: 6px; padding: 5px 12px !important; border: 1px solid #E6E8EE; border-radius: 999px; background: #F7F8FA !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase; color: #4B5563 !important; transform: none !important; writing-mode: horizontal-tb !important; }
html body .bb-lanes--pair .bb-g4-duo-arrow-label::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #6B7280; border-bottom: 1.5px solid #6B7280; transform: translateY(-2px) rotate(45deg); }

/* Decision Split (pattern C): the server panels as lanes, the two checklists as cards */
html body .bb-lanes--split { margin-top: 48px !important; }
html body .bb-lanes--split .bb-server-panel-head { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body .bb-lanes--split .bb-server-panel-rec { font-size: 13px !important; font-weight: 600 !important; color: #B54300 !important; background: none !important; padding: 0 !important; border: 0 !important; }
html body .bb-lanes--split .bb-lane { grid-template-areas: "lh trk" "sub trk"; grid-template-rows: auto 1fr; }
html body .bb-lanes--split .bb-lh { grid-area: lh; } html body .bb-lanes--split .bb-trk { grid-area: trk; } html body .bb-lanes--split .bb-lane-sub { grid-area: sub; }
html body .bb-lanes--split .bb-lane-sub { margin: 14px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: #3B4452 !important; text-align: left !important; }
html body .bb-lanes--split .bb-server-bypass { display: block !important; margin: 2px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 14px !important; font-weight: 400 !important; color: #3B4452 !important; position: static !important; }
html body .bb-lanes--split .bb-st { display: block !important; }
html body .bb-dcards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px !important; margin-top: 48px !important; }
html body .bb-dcards .bb-server-dec-divider { display: none !important; }
html body .bb-dcards .bb-server-dec-block { background: #fff !important; border: 1px solid #E6E8EE !important; border-radius: 20px !important; padding: 32px !important; box-shadow: none !important; }
html body .bb-dcards .bb-server-dec-block--critical { border-color: #F4D2BC !important; box-shadow: 0 0 0 4px rgba(255,106,0,.05) !important; }
html body .bb-dcards .bb-server-dec-heading { display: block; font-size: 17px !important; font-weight: 700 !important; color: #14181F !important; }
html body .bb-dcards .bb-server-dec-list li { font-size: 16px !important; line-height: 1.6 !important; color: #1F2937 !important; }
html body .bb-dcards .bb-server-dec-block--ok .bb-server-dec-list li::before { color: #6B7280 !important; border-color: #9AA3AF !important; }
html body .bb-dcards .bb-server-dec-block--critical .bb-server-dec-list li::before { color: #C34A00 !important; border-color: #FF8A3D !important; }

/* ── Symptom Grid (pattern D) ── */
html body .bb-ch .bb-sym { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
html body .bb-ch .bb-sym .bb-prob-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin: 0 !important; padding: 28px !important; background: #fff !important; border: 1px solid #E6E8EE !important; border-radius: 16px !important; box-shadow: none !important; }
html body .bb-ch .bb-sym .bb-prob-icon { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 10px !important; background: #FFF1E8 !important; color: #C34A00 !important; flex: none; }
html body .bb-ch .bb-sym .bb-prob-icon svg { width: 20px; height: 20px; stroke: #C34A00; color: #C34A00; }
html body .bb-ch .bb-sym .bb-prob-item-text strong { display: block; font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #14181F !important; }
html body .bb-ch .bb-sym .bb-prob-item-text span { display: block; margin-top: 8px; font-size: 16px !important; line-height: 1.55 !important; color: #1F2937 !important; }

/* ── Review card and the action (§6) ── */
html body .bb-ch figure.bb-proof-strip { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px !important; align-items: center; margin: 0 !important; padding: 44px 52px !important; max-width: none !important;
  background: #fff !important; border: 1px solid #F4D2BC !important; border-radius: 20px !important; box-shadow: 0 0 0 4px rgba(255,106,0,.05), 0 0 32px -6px rgba(255,106,0,.22), 0 24px 48px -28px rgba(195,74,0,.28) !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-quote-col { padding: 0 !important; border: 0 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-mark { width: 34px !important; height: 34px !important; margin: 0 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-quote { margin: 14px 0 0 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-quote p { margin: 0 !important; font-size: 26px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: -.015em; color: #14181F !important; font-style: normal !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-attr { margin-top: 24px !important; gap: 8px 14px !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-avatar { width: 44px !important; height: 44px !important; min-width: 44px; border-radius: 50% !important; background: #FFF1E8 !important; color: #B54300 !important; font-weight: 700 !important; font-size: 15px !important; display: grid !important; place-items: center; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-who strong { font-size: 16px !important; color: #14181F !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-co { font-size: 15px !important; color: #3B4452 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-verified { display: inline-flex !important; align-items: center; gap: 6px; margin-left: 6px; font-size: 14px !important; font-weight: 500 !important; color: #4B5563 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-verified circle { fill: #16A34A; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-result-col { align-self: stretch; justify-content: center !important; gap: 0 !important; padding: 0 0 0 56px !important; border: 0 !important; border-left: 1px solid #E6E8EE !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-num { font-size: 56px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.025em; color: #C34A00 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-label { margin-top: 12px !important; font-size: 17px !important; line-height: 1.5 !important; color: #374151 !important; }
html body .bb-ch .bb-proof-strip .bb-proof-strip-link { margin-top: 16px !important; font-size: 16px !important; font-weight: 600 !important; color: #C34A00 !important; text-decoration: none; }
html body .bb-ch .bb-act { margin-top: 44px; text-align: center; }
html body .bb-ch .bb-act .bb-final-actions, html body .bb-ch .bb-act .bb-cta-actions { display: flex !important; justify-content: center !important; margin: 0 !important; }
html body .bb-ch .bb-act .bb-btn-primary { background: #FF6A00 !important; color: #fff !important; padding: 18px 32px !important; border-radius: 10px !important; font-size: 17px !important; font-weight: 700 !important; box-shadow: 0 14px 30px -14px rgba(255,106,0,.7) !important; border: 0 !important; }
html body .bb-ch .bb-act .bb-btn-primary:hover { background: #ED4B00 !important; }
html body .bb-ch .bb-act .bb-final-note-light, html body .bb-ch .bb-act .bb-cta-sub { display: block; margin: 16px auto 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: #4B5563 !important; text-align: center !important; }
html body .bb-ch .bb-act .bb-prob-cta { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: center !important; }

/* ── Rollout (all pages in scope) ── */
/* lane geometry for every lane: head in column 1 with any foot lines under it, the track or other body in column 2 */
html body .bb-lanes .bb-lane > .bb-lh { grid-column: 1; grid-row: 1; }
html body .bb-lanes .bb-lane > .bb-trk, html body .bb-lanes .bb-lane > .bb-lane-body { grid-column: 2; grid-row: 1 / span 6; min-width: 0; }
html body .bb-lanes .bb-lane > .bb-lane-sub { grid-column: 1; margin: 12px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: #3B4452 !important; text-align: left !important; }
/* closing lines: insight cards, closing leads and closers sit centred under the mechanism, never as a card */
html body .bb-ch .bb-close { display: block; margin: 32px auto 0 !important; max-width: 820px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; text-align: center !important; }
html body .bb-ch .bb-close, html body .bb-ch .bb-close p { font-size: 17px !important; line-height: 1.65 !important; color: #3B4452 !important; }
html body .bb-ch .bb-close p + p { margin-top: 10px !important; }
html body .bb-ch .bb-close strong { color: #14181F !important; }
/* Symptom Grid on the waste and pricing-model cards (direct children are the cards) */
html body .bb-ch .bb-sym > * { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; margin: 0 !important; padding: 28px !important; background: #fff !important; border: 1px solid #E6E8EE !important; border-radius: 16px !important; box-shadow: none !important; min-width: 0; }
html body .bb-ch .bb-sym > * > span:first-child, html body .bb-ch .bb-sym .bb-prob-icon { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 10px !important; background: #FFF1E8 !important; color: #C34A00 !important; flex: none; }
html body .bb-ch .bb-sym > * > span:first-child svg { width: 20px; height: 20px; stroke: #C34A00; }
html body .bb-ch .bb-sym h3 { margin: 0 !important; font-size: 18px !important; line-height: 1.35 !important; font-weight: 700 !important; color: #14181F !important; }
html body .bb-ch .bb-sym h3 a { color: #14181F !important; }
html body .bb-ch .bb-sym p { margin: 0 !important; font-size: 16px !important; line-height: 1.55 !important; color: #1F2937 !important; }
html body .bb-ch .bb-sym .bb-pricing-model-tag { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: #B54300 !important; }
@media (min-width: 1200px) { html body .bb-ch .bb-sym--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the consent page splits its review into a quote card and a result card: each one a single column */
html body .bb-ch .bb-cmv2-proof { display: grid; gap: 24px; }
html body .bb-ch figure.bb-proof-strip--quote-only, html body .bb-ch figure.bb-proof-strip--result-only { grid-template-columns: minmax(0, 1fr) !important; }
html body .bb-ch .bb-proof-strip--result-only .bb-proof-strip-result-col { border-left: 0 !important; padding-left: 0 !important; }

/* tables in chapter C scroll inside their own wrap, so words stay whole (two mid-word breaks at 390 on /why-not-cheaper/) */
html body .bb-ch .bb-chC table :is(th, td, strong) { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; }

/* ── Below 1024px ── */
@media (max-width: 1023px) {
  html body .bb-ch .bb-chA, html body .bb-ch .bb-chC, html body .bb-ch .bb-chD { padding-top: 56px; padding-bottom: 48px; }
  html body .bb-ch .bb-chA--split { padding-bottom: 0; }
  html body .bb-ch figure.bb-chB.bb-chB--card { margin-top: 36px !important; border-radius: 16px !important; }
  html body .bb-ch .bb-chB--card figcaption { padding: 18px 20px; }
  html body .bb-ch .bb-chD { padding-top: 0; }
  html body .bb-ch .bb-chA .bb-explainer-strip--answer p, html body .bb-ch .bb-chA.bb-chA--plain p { font-size: 17px !important; }
  html body .bb-lanes .bb-lane > * { grid-column: 1 !important; grid-row: auto !important; }
  html body .bb-lanes .bb-lane { grid-template-columns: minmax(0, 1fr); gap: 22px 0; padding: 32px 0 !important; }
  html body .bb-lanes--split .bb-lane { grid-template-areas: "lh" "trk" "sub"; grid-template-rows: auto; }
  html body .bb-lanes .bb-trk { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* vertical track: one segment per step, from its node centre to the next node centre (the next step starts one
     22px gap below this one, and every node centre, the 44px result node's included, sits 18px below its step's top),
     so the line ends on the last node's centre whatever the step text wraps to */
  html body .bb-lanes .bb-trk::before { display: none; }
  html body .bb-lanes .bb-st:not(.bb-st--res)::after { content: ""; position: absolute; left: 17px; top: 18px; width: 2px; height: calc(100% + 22px); background: #D5D9E0; }
  html body .bb-lanes .bb-lane--ok .bb-st:not(.bb-st--res)::after { left: 16.5px; width: 3px; background: linear-gradient(180deg, #FFC59B, #FF6A00); }
  html body .bb-lanes .bb-lane--bad .bb-trk--w0::after, html body .bb-lanes .bb-lane--bad .bb-trk--w1::after, html body .bb-lanes .bb-lane--bad .bb-trk--w2::after, html body .bb-lanes .bb-lane--bad .bb-trk--w3::after { display: none; }
  html body .bb-lanes .bb-st { padding: 7px 0 0 56px !important; min-height: 36px; }
  html body .bb-lanes .bb-st--res { padding-top: 9px !important; }
  html body .bb-ch .bb-sym { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .bb-ch figure.bb-proof-strip { grid-template-columns: minmax(0, 1fr); gap: 28px !important; padding: 28px 24px !important; }
  html body .bb-ch .bb-proof-strip .bb-proof-strip-quote p { font-size: 21px !important; }
  html body .bb-ch .bb-proof-strip .bb-proof-strip-result-col { padding: 28px 0 0 !important; border-left: 0 !important; border-top: 1px solid #E6E8EE !important; }
  html body .bb-ch .bb-proof-strip .bb-proof-strip-num { font-size: 48px !important; }
  html body .bb-ch .bb-act { margin-top: 32px; }
}
@media (min-width: 1200px) { html body .bb-ch .bb-sym { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1199px) { html body .bb-ch .bb-sym { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  html body .bb-ch .bb-sym, html body .bb-dcards { grid-template-columns: minmax(0, 1fr); }
}
/* vertical track (more than five steps) at desktop widths too */
@media (min-width: 1024px) {
  html body .bb-lanes .bb-trk--v::before { display: none; }
  html body .bb-lanes .bb-trk--v .bb-st { padding: 7px 0 0 56px !important; min-height: 36px; }
  html body .bb-lanes .bb-trk--v .bb-st:not(.bb-st--res)::after { content: ""; position: absolute; left: 17px; top: 18px; width: 2px; height: calc(100% + 22px); background: #D5D9E0; }
}