/* ==========================================================================
   bb-blog.css: blog index, single post, category and author views ONLY
   (enqueued by inc/bb-blog.php on is_singular('post'), is_home(), is_category(),
   is_author()). Spec: brains/CLAUDE-CODE-BLOG-BUILD.md Steps 4 to 6.

   Reuses bb-pillar.css components (.bb-explainer-strip--answer, .bb-proof-strip,
   .bb-btn-primary); nothing here redeclares a shared class at its base specificity.
   Every selector is scoped under .bb-post or .bb-blog, so no service page is reached.

   Palette: LIVE dark surfaces (#0B121B band, #141C27 cards), owner ruling 2026-10-12.
   Orange text on light grounds is #C24A00 (AA); #FF6A00 only on dark (CLAUDE.md §2).
   Sizes in px: the root font-size is 18px, and the Elementor kit styles bare h1-h6,
   p, a and button at (0,1,1), so selectors here are (0,2,x) with !important.
   ========================================================================== */

.bb-post, .bb-blog { background: #FFFFFF; width: 100%; flex: 1 1 100%; min-width: 0; }   /* Astra's .ast-container is a flex row */
.bb-post .bb-post-wrap, .bb-blog .bb-post-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; box-sizing: border-box; }

/* Navigation lists never take the global prose tick (Additional.css "article ul li::before"). */
.bb-post nav ul, .bb-blog nav ul, .bb-post .bb-toc ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bb-post nav ul li::before, .bb-blog nav ul li::before, .bb-blog .bb-card-grid li::before { content: none !important; display: none !important; }
.bb-post nav ul li, .bb-blog nav ul li { margin: 0 !important; }

/* ── Dark title band: breadcrumb, category, H1, subtitle, byline ───────── */
.bb-post .bb-post-band, .bb-blog .bb-post-band { background: #0B121B; padding: 150px 0 52px; color: #FAFAFA; }
.bb-post .bb-post-crumbs, .bb-blog .bb-post-crumbs { font-size: 14px !important; line-height: 1.5 !important; color: rgba(250,250,250,0.7) !important; margin: 0 0 22px !important; }
.bb-post .bb-post-crumbs a, .bb-blog .bb-post-crumbs a { color: rgba(250,250,250,0.88) !important; text-decoration: none !important; }
.bb-post .bb-post-crumbs a:hover, .bb-blog .bb-post-crumbs a:hover { color: #FFFFFF !important; text-decoration: underline !important; }
.bb-post .bb-post-cat { display: inline-block; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #FF6A00 !important; text-decoration: none !important; margin: 0 0 14px !important; }
.bb-post .bb-post-title, .bb-blog .bb-post-title {
  color: #FFFFFF !important; font-size: clamp(32px, 4.2vw, 50px) !important; line-height: 1.12 !important;
  font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; margin: 0 0 16px !important; max-width: 920px;
}
.bb-post .bb-post-sub, .bb-blog .bb-post-sub { color: rgba(250,250,250,0.8) !important; font-size: 19px !important; line-height: 1.55 !important; max-width: 780px; margin: 0 0 28px !important; }
.bb-post .bb-post-byline { display: flex; align-items: center; gap: 12px; }
.bb-post .bb-post-avatar { width: 40px !important; height: 40px !important; max-width: 40px !important; border-radius: 50% !important; object-fit: cover !important; flex: 0 0 40px; }
.bb-post .bb-post-byline p { margin: 0 !important; line-height: 1.45 !important; }
.bb-post .bb-post-byline-name { font-size: 16px !important; font-weight: 700 !important; }
.bb-post .bb-post-byline-name a { color: #FFFFFF !important; text-decoration: none !important; }
.bb-post .bb-post-byline-name a:hover { text-decoration: underline !important; }
.bb-post .bb-post-byline-role, .bb-post .bb-post-byline-meta { font-size: 14px !important; color: rgba(250,250,250,0.72) !important; }
.bb-post .bb-post-byline-meta span + span::before { content: "·"; margin: 0 8px; }

/* Admin-only preview notice (missing hero image). Logged-in pages are not cached. */
.bb-post .bb-post-admin-note { background: #FFF8F2; color: #7A2E00; border-bottom: 1px solid rgba(255,106,0,0.3); padding: 10px 20px; font-size: 15px; text-align: center; position: relative; z-index: 5; margin-top: 90px; }

/* ── Hero band with the featured image (Blog Steering 1 §3a) ──────────────
   The image is a real <img> (indexable, alt text) behind a left-to-right gradient whose opacity
   comes from bb_hero_overlay (60 to 90): rgba(5,7,10,ov) to rgba(5,7,10,ov - 0.15). The H1 sits
   on the darker left. */
.bb-post .bb-post-band--img { position: relative; overflow: hidden; isolation: isolate; min-height: 520px; display: flex; align-items: flex-end; box-sizing: border-box; }
.bb-post .bb-post-band .bb-post-hero-img {
  position: absolute !important; inset: 0; z-index: -2; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover !important; object-position: 70% 50%; border-radius: 0 !important;
}
.bb-post .bb-post-band--img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,7,10,var(--bb-ov,0.78)) 0%, rgba(5,7,10,var(--bb-ov,0.78)) 35%, rgba(5,7,10,var(--bb-ov2,0.63)) 100%); }
.bb-post .bb-post-band-inner { width: min(1360px, 100% - 40px); }
.bb-post .bb-post-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px !important; }
.bb-post .bb-post-labels .bb-post-cat { margin: 0 !important; }
.bb-post .bb-post-type { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FAFAFA; border: 1px solid rgba(250,250,250,0.35); border-radius: 100px; padding: 3px 10px; line-height: 1.4; }
.bb-post .bb-post-byline-name .bb-post-byline-role { font-weight: 500; }

/* ── Body grid (Steering 1 §3b) ────────────────────────────────────────────
   < 768: one column. 768 to 1199: content + right rail. >= 1200: left rail 240 | content 720 | right rail 300.
   Rails are sticky inside their own column, so they release where the grid ends (before the
   related posts and the footer). */
.bb-post .bb-post-main { padding: 40px 0 72px; }
.bb-post .bb-post-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: min(1360px, 100% - 40px); }
.bb-post .bb-post-col { width: 100%; max-width: 720px; margin-inline: auto; min-width: 0; }
.bb-post .bb-post-left, .bb-post .bb-post-right { display: none; min-width: 0; }
.bb-post .bb-sticky { position: sticky; top: 24px; }
.bb-post .bb-post-qa { max-width: 720px; margin: 0 0 28px !important; box-sizing: border-box; }
.bb-post .bb-post-qa p { font-size: 17px !important; line-height: 1.65 !important; color: #1F2937 !important; }
.bb-post .bb-post-qa .bb-explainer-label { font-size: 15px !important; }
@media (min-width: 768px) {
  .bb-post .bb-post-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
  .bb-post .bb-post-right { display: block; }
  .bb-post .bb-post-col { margin: 0; }
}
@media (min-width: 1200px) {
  .bb-post .bb-post-grid { grid-template-columns: 240px minmax(0, 720px) 300px; justify-content: space-between; column-gap: 40px; }
  .bb-post .bb-post-left { display: block; }
}

/* TOC. Rail at >= 1200; below that an "On this page" dropdown under the hero, sticky on phones. */
.bb-post .bb-toc { font-size: 15px; }
.bb-post .bb-toc li { margin: 0 !important; }
.bb-post .bb-toc li::before { content: none !important; }
.bb-post .bb-toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid #E2E5EC; color: #374151 !important; text-decoration: none !important; line-height: 1.4 !important; }
.bb-post .bb-toc a:hover, .bb-post .bb-toc a:focus-visible { color: #C24A00 !important; border-left-color: #C24A00; }
/* Active item: #FF6A00 bar; text #C24A00 because #FF6A00 text on white is 2.9:1 (CLAUDE.md §2). */
.bb-post .bb-toc a.is-active { border-left: 3px solid #FF6A00; padding-left: 13px; color: #C24A00 !important; font-weight: 700; }
.bb-post .bb-toc-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em; text-transform: uppercase; color: #4F5B68 !important; margin: 0 0 10px !important; }
.bb-post .bb-toc--rail ol { max-height: calc(100vh - 220px); overflow: auto; }
.bb-post .bb-progress { height: 3px; background: #E2E5EC; border-radius: 3px; overflow: hidden; margin: 16px 0 14px; }
.bb-post .bb-progress span { display: block; height: 100%; background: #FF6A00; transform: scaleX(0); transform-origin: 0 50%; }
.bb-post .bb-share { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 !important; }
.bb-post .bb-share .bb-share-btn, .bb-post button.bb-share-btn {
  background: none !important; border: 0 !important; padding: 2px 0 !important; margin: 0 !important; min-height: 0 !important; box-shadow: none !important;
  font: 600 14px/1.4 Inter, sans-serif !important; color: #C24A00 !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; cursor: pointer;
}
.bb-post .bb-share .bb-share-btn:hover { text-decoration: underline !important; }

.bb-post .bb-toc-bar { display: block; background: #FFFFFF; border-bottom: 1px solid #E2E5EC; }
.bb-post .bb-toc-bar summary { list-style: none; cursor: pointer; width: min(1360px, 100% - 40px); margin: 0 auto; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #111827; font-size: 16px; }
.bb-post .bb-toc-bar summary::-webkit-details-marker { display: none; }
.bb-post .bb-toc-bar summary::after { content: "+"; color: #C24A00; font-size: 22px; line-height: 1; }
.bb-post .bb-toc-bar[open] summary::after { content: "\2212"; }
.bb-post .bb-toc-bar ol { width: min(1360px, 100% - 40px); margin: 0 auto 14px !important; max-height: 55vh; overflow: auto; }
.bb-post .bb-toc-bar .bb-progress { margin: 0; border-radius: 0; height: 2px; }
@media (min-width: 768px) { .bb-post .bb-toc-bar .bb-progress { display: none; } }
@media (max-width: 767px) { .bb-post .bb-toc-bar { position: sticky; top: 0; z-index: 30; } }
@media (min-width: 1200px) { .bb-post .bb-toc-bar { display: none; } }

/* Right rail cards: Summarize with AI, offer, service. */
.bb-post .bb-rail-card { display: block; border-radius: 12px; padding: 20px; margin: 0 0 16px; box-sizing: border-box; }
.bb-post .bb-rail-card p { margin: 0 !important; }
.bb-post .bb-rail-ai { background: #FFFFFF; border: 1px solid #E2E5EC; }
.bb-post .bb-rail-title { font-size: 15px !important; font-weight: 800 !important; color: #111827 !important; margin-bottom: 12px !important; line-height: 1.35 !important; }
.bb-post .bb-ai-list { display: grid; gap: 8px; }
.bb-post .bb-ai-btn {
  display: flex; align-items: center; gap: 10px; border: 1px solid #E2E5EC; border-radius: 8px; padding: 9px 12px;
  color: #111827 !important; font-size: 15px; font-weight: 600; text-decoration: none !important; line-height: 1.3; background: #FFFFFF;
}
.bb-post .bb-ai-btn svg { flex: 0 0 18px; color: #4F5B68; }
.bb-post .bb-ai-btn:hover, .bb-post .bb-ai-btn:focus-visible { border-color: #C24A00; color: #C24A00 !important; }
.bb-post .bb-ai-btn:hover svg { color: #C24A00; }
.bb-post .bb-rail-offer { background: #0B121B; }
.bb-post .bb-rail-eyebrow { display: block; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #FF6A00 !important; margin-bottom: 8px !important; }
.bb-post .bb-rail-line { font-size: 15px !important; line-height: 1.55 !important; color: rgba(250,250,250,0.86) !important; margin-bottom: 16px !important; }
.bb-post .bb-rail-offer .bb-btn { display: flex; justify-content: center; padding: 12px 16px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 15px !important; color: #FFFFFF !important; text-decoration: none !important; text-transform: none !important; }
.bb-post .bb-rail-service { background: #141C27; text-decoration: none !important; }
.bb-post .bb-rail-service-name { display: block; font-size: 17px; font-weight: 800; color: #FFFFFF; line-height: 1.35; }
.bb-post .bb-rail-service:hover .bb-rail-service-name { text-decoration: underline; }

/* AI chips: phones only, directly after the quick answer. */
.bb-post .bb-ai-chips { margin: 0 0 32px; }
.bb-post .bb-ai-chips-label { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; color: #4F5B68 !important; margin: 0 0 8px !important; }
.bb-post .bb-ai-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-post .bb-ai-row .bb-ai-btn { padding: 7px 11px; font-size: 14px; gap: 6px; }
@media (min-width: 768px) { .bb-post .bb-ai-chips { display: none; } }

/* ── Body typography (Step 4.2): 18px, line-height 1.7, 720px measure ───── */
.bb-post .bb-post-body { color: #1F2937; font-size: 18px; line-height: 1.7; }
.bb-post .bb-post-body p, .bb-post .bb-post-body li { font-size: 18px !important; line-height: 1.7 !important; color: #1F2937 !important; }
.bb-post .bb-post-body p { margin: 0 0 22px !important; }
.bb-post .bb-post-body h2 { font-size: 30px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #0B121B !important; text-transform: none !important; margin: 52px 0 16px !important; scroll-margin-top: 24px; }
.bb-post .bb-post-body h3 { font-size: 22px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #0B121B !important; text-transform: none !important; margin: 36px 0 12px !important; }
.bb-post .bb-post-body > :first-child { margin-top: 0 !important; }
.bb-post .bb-post-body a { color: #C24A00 !important; text-decoration: underline !important; text-underline-offset: 2px; }
.bb-post .bb-post-body strong { color: #111827; }
.bb-post .bb-post-body ul, .bb-post .bb-post-body ol { margin: 0 0 22px !important; padding-left: 0 !important; }
.bb-post .bb-post-body ul { list-style: none !important; }
.bb-post .bb-post-body ul li { position: relative; padding-left: 1.6em; margin: 8px 0 !important; }
.bb-post .bb-post-body ul li::before { position: absolute; left: 0; top: 0; width: 1.2em !important; margin: 0 !important; color: #C24A00 !important; }
.bb-post .bb-post-body ol { padding-left: 1.4em !important; }
.bb-post .bb-post-body ol li { margin: 8px 0 !important; padding-left: 4px; }
.bb-post .bb-post-body ol li::before { content: none !important; }

/* Tables: horizontal scroll on mobile, sticky first column. Astra borders every cell globally,
   so cell borders are reset and drawn once; the wrapper carries the outline and the radius. */
.bb-post .bb-post-body .bb-table-wrap, .bb-post .bb-post-body .wp-block-table {
  overflow-x: auto; margin: 0 0 28px !important; -webkit-overflow-scrolling: touch;
  border: 1px solid #E2E5EC; border-radius: 10px;
}
.bb-post .bb-post-body table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; min-width: 560px; font-size: 16px; border: 0 !important; margin: 0 !important; }
.bb-post .bb-post-body th, .bb-post .bb-post-body td { padding: 12px 14px !important; text-align: left; vertical-align: top; border: 0 !important; border-bottom: 1px solid #E2E5EC !important; line-height: 1.5; color: #1F2937; font-size: 16px !important; }
.bb-post .bb-post-body th { background: #EFF2F7; font-weight: 700; color: #111827; }
.bb-post .bb-post-body tbody tr:last-child td { border-bottom: 0 !important; }
.bb-post .bb-post-body th:first-child, .bb-post .bb-post-body td:first-child { position: sticky; left: 0; z-index: 1; background: #FFFFFF; font-weight: 600; box-shadow: inset -1px 0 0 #E2E5EC; }
.bb-post .bb-post-body th:first-child { background: #EFF2F7; }
.bb-post .bb-post-body .wp-block-table figcaption { padding: 0 14px 10px; }

/* Code: dark, monospaced, copy button. */
.bb-post .bb-post-body pre { position: relative; background: #0D1117 !important; color: #E6EDF3 !important; border-radius: 10px; padding: 18px 20px; margin: 0 0 24px !important; overflow-x: auto; font-size: 15px; line-height: 1.6; border: 0 !important; }
.bb-post .bb-post-body pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; background: none !important; color: inherit !important; padding: 0 !important; font-size: inherit !important; white-space: pre; }
.bb-post .bb-post-body :not(pre) > code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #EFF2F7; color: #111827; padding: 1px 6px; border-radius: 4px; font-size: 0.88em; }
.bb-post .bb-post-body pre .bb-copy {
  position: absolute; top: 8px; right: 8px; background: #141C27 !important; color: #FAFAFA !important; border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 6px !important; padding: 4px 10px !important; font: 600 13px/1.4 Inter, sans-serif !important; text-transform: none !important;
  letter-spacing: normal !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important; cursor: pointer;
}
.bb-post .bb-post-body pre .bb-copy:hover, .bb-post .bb-post-body pre .bb-copy:focus-visible { border-color: #FF6A00 !important; }

/* Figures, quotes, callouts, image slots. */
.bb-post .bb-post-body figure { margin: 0 0 28px !important; }
.bb-post .bb-post-body figure img { border-radius: 10px; height: auto !important; max-width: 100% !important; }
.bb-post .bb-post-body figcaption { font-size: 15px !important; color: #4F5B68 !important; margin-top: 8px !important; line-height: 1.5; text-align: left; }
.bb-post .bb-post-body blockquote { margin: 0 0 24px !important; padding: 4px 0 4px 20px !important; border-left: 3px solid #FF6A00 !important; background: none !important; }
.bb-post .bb-post-body blockquote p { font-size: 20px !important; color: #111827 !important; font-style: normal !important; }
.bb-post .bb-post-body .bb-callout { background: #FFF8F2; border: 1px solid rgba(255,106,0,0.15); border-left: 3px solid #FF6A00; border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 0 0 24px; }
.bb-post .bb-post-body .bb-callout > :last-child { margin-bottom: 0 !important; }
.bb-post .bb-img-slot { border: 2px dashed #C24A00; border-radius: 10px; padding: 16px; }
.bb-post .bb-img-slot__ph { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; text-align: center; background: #EFF2F7; color: #4F5B68; font-size: 15px; padding: 16px; border-radius: 6px; }
.bb-post.bb-post--published .bb-img-slot__ph { display: none !important; }
.bb-post.bb-post--published .bb-img-slot { border: 0; padding: 0; }

/* ── Injections: related service box (Step 4.4) and proof card (Step 4.5) ─ */
.bb-post .bb-post-service { background: #FFF8F2; border: 1px solid rgba(255,106,0,0.15); border-left: 3px solid #FF6A00; border-radius: 0 12px 12px 0; padding: 24px 26px; margin: 8px 0 36px; }
.bb-post .bb-post-body .bb-post-service p { margin: 0 0 6px !important; }
.bb-post .bb-post-body .bb-post-service-eyebrow { font-size: 12.5px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #C24A00 !important; }
.bb-post .bb-post-body .bb-post-service-title { font-size: 22px !important; font-weight: 800 !important; color: #0B121B !important; line-height: 1.3 !important; }
.bb-post .bb-post-body .bb-post-service-line { font-size: 16px !important; line-height: 1.55 !important; color: #374151 !important; }
.bb-post .bb-post-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.bb-post .bb-post-service-actions .bb-btn, .bb-post .bb-post-cta .bb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: none !important; color: #FFFFFF !important; text-transform: none !important; }
.bb-post .bb-post-service-link { font-size: 16px; font-weight: 600; color: #C24A00 !important; text-decoration: none !important; }
.bb-post .bb-post-service-link:hover { text-decoration: underline !important; }
.bb-post .bb-proof-strip.bb-proof-strip--result-only { grid-template-columns: 1fr !important; margin: 8px 0 36px !important; }
.bb-post .bb-proof-strip--result-only .bb-proof-strip-result-col { padding: 0 !important; }
.bb-post .bb-post-body .bb-proof-strip a { text-decoration: none !important; }

/* ── FAQ: accordion, open by default, no hidden text at load ───────────── */
.bb-post .bb-post-faq { margin-top: 12px; }
.bb-post .bb-post-faq-item { border-top: 1px solid #E2E5EC; padding: 6px 0; }
.bb-post .bb-post-faq-item:last-child { border-bottom: 1px solid #E2E5EC; }
.bb-post .bb-post-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bb-post .bb-post-faq-item summary::-webkit-details-marker { display: none; }
.bb-post .bb-post-faq-item summary::after { content: "−"; font-size: 24px; line-height: 1.2; color: #C24A00; font-weight: 700; margin-top: 14px; }
.bb-post .bb-post-faq-item:not([open]) summary::after { content: "+"; }
.bb-post .bb-post-body .bb-post-faq-q { margin: 14px 0 !important; font-size: 20px !important; }
.bb-post .bb-post-faq-a > :last-child { margin-bottom: 14px !important; }

/* ── End CTA (dark card) and author bio ────────────────────────────────── */
.bb-post .bb-post-cta { background: #0B121B; border-radius: 14px; padding: 32px 30px; margin: 48px 0 40px; color: #FAFAFA; }
.bb-post .bb-post-cta p { margin: 0 !important; }
.bb-post .bb-post-cta-eyebrow { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #FF6A00 !important; margin-bottom: 8px !important; }
.bb-post .bb-post-cta-title { font-size: 26px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #FFFFFF !important; margin-bottom: 16px !important; }
.bb-post .bb-post-cta-points { list-style: none !important; margin: 0 0 22px !important; padding: 0 !important; }
.bb-post .bb-post-cta-points li { position: relative; color: rgba(250,250,250,0.88) !important; font-size: 16px !important; margin: 6px 0 !important; padding-left: 1.6em; }
.bb-post .bb-post-cta-points li::before { position: absolute; left: 0; top: 0; width: 1.2em !important; margin: 0 !important; color: #FF6A00 !important; }
.bb-post .bb-post-cta-sub { font-size: 14px !important; color: rgba(250,250,250,0.7) !important; margin-top: 12px !important; }
.bb-post .bb-post-bio { display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid #E2E5EC; padding-top: 32px; }
.bb-post .bb-post-bio-photo { width: 80px !important; height: 80px !important; max-width: 80px !important; border-radius: 50% !important; object-fit: cover !important; object-position: 50% 15%; flex: 0 0 80px; }
.bb-post .bb-post-bio p { margin: 0 0 6px !important; }
.bb-post .bb-post-bio-name { font-size: 18px !important; font-weight: 800 !important; color: #0B121B !important; }
.bb-post .bb-post-bio-role { font-size: 14px !important; color: #4F5B68 !important; }
.bb-post .bb-post-bio-text { font-size: 16px !important; line-height: 1.65 !important; color: #374151 !important; margin-top: 8px !important; }
.bb-post .bb-post-bio-links a { color: #C24A00 !important; font-weight: 600; font-size: 15px; margin-right: 18px; text-decoration: none !important; }
.bb-post .bb-post-bio-links a:hover { text-decoration: underline !important; }

/* ── Cards, grids, related, archives ───────────────────────────────────── */
.bb-post .bb-post-related { background: #EFF2F7; padding: 64px 0 80px; }
.bb-post .bb-post-related-h, .bb-blog .bb-blog-section-h { font-size: 28px !important; font-weight: 800 !important; color: #0B121B !important; text-transform: none !important; margin: 0 0 28px !important; line-height: 1.25 !important; }
.bb-card-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 768px) { .bb-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bb-post .bb-post-card, .bb-blog .bb-post-card {
  display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E2E5EC; border-radius: 12px; overflow: hidden;
  text-decoration: none !important; color: inherit !important; transition: box-shadow .2s ease, transform .2s ease;
}
.bb-post .bb-post-card:hover, .bb-blog .bb-post-card:hover { box-shadow: 0 10px 28px rgba(11,18,27,0.10); transform: translateY(-2px); }
.bb-post .bb-post-card:focus-visible, .bb-blog .bb-post-card:focus-visible { outline: 3px solid #C24A00; outline-offset: 3px; }
.bb-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0B121B; }
.bb-post .bb-card-img, .bb-blog .bb-card-img { display: block; width: 100% !important; max-width: 100% !important; height: 100% !important; object-fit: cover !important; }
.bb-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.bb-post .bb-card-cat, .bb-blog .bb-card-cat { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #C24A00; }
.bb-post .bb-card-title, .bb-blog .bb-card-title {
  font-size: 20px !important; line-height: 1.3 !important; font-weight: 800 !important; color: #0B121B !important; text-transform: none !important; margin: 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bb-card-excerpt { font-size: 15.5px; line-height: 1.55; color: #374151; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bb-card-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14px; color: #4F5B68; }
.bb-post .bb-card-avatar, .bb-blog .bb-card-avatar { width: 24px !important; height: 24px !important; border-radius: 50% !important; object-fit: cover !important; }

.bb-blog .bb-blog-list, .bb-blog .bb-blog-start { padding: 56px 0 80px; }
.bb-blog .bb-blog-start { background: #EFF2F7; padding-bottom: 56px; }
.bb-blog .bb-blog-start + .bb-blog-list { padding-top: 56px; }
.bb-blog .bb-blog-intro p { color: rgba(250,250,250,0.8) !important; font-size: 18px !important; line-height: 1.65 !important; max-width: 780px; margin: 0 0 18px !important; }
.bb-blog .bb-blog-parent { margin: 0 0 24px !important; }
.bb-blog .bb-blog-parent a { color: #FF6A00 !important; font-weight: 700; font-size: 16px; text-decoration: none !important; }
.bb-blog .bb-blog-parent a:hover { text-decoration: underline !important; }
.bb-blog .bb-blog-pills ul { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-blog .bb-blog-pills a { display: inline-block; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; color: #FAFAFA !important; font-size: 15px; font-weight: 600; text-decoration: none !important; line-height: 1.3; }
.bb-blog .bb-blog-pills a:hover, .bb-blog .bb-blog-pills a[aria-current="page"] { border-color: #FF6A00; color: #FFFFFF !important; background: rgba(255,106,0,0.14); }
.bb-blog .bb-blog-empty { font-size: 18px; color: #374151; }
.bb-blog .bb-blog-empty a { color: #C24A00 !important; }
.bb-blog .bb-pagination { margin-top: 44px; }
.bb-blog .bb-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bb-blog .bb-pagination a, .bb-blog .bb-pagination span { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid #E2E5EC; border-radius: 8px; color: #111827 !important; text-decoration: none !important; font-weight: 600; }
.bb-blog .bb-pagination .current { background: #0B121B; border-color: #0B121B; color: #FFFFFF !important; }
.bb-blog .bb-pagination a:hover { border-color: #C24A00; color: #C24A00 !important; }

/* Author page head */
.bb-blog .bb-author-head { display: flex; gap: 32px; align-items: flex-start; }
.bb-blog .bb-author-photo { width: 160px !important; height: 200px !important; max-width: 160px !important; object-fit: cover !important; border-radius: 12px !important; flex: 0 0 160px; }
.bb-blog .bb-author-role { color: #FF6A00 !important; font-weight: 700 !important; font-size: 17px !important; margin: 0 0 6px !important; }
.bb-blog .bb-author-creds { color: rgba(250,250,250,0.85) !important; font-size: 15px !important; margin: 0 0 16px !important; }
.bb-blog .bb-author-links a { color: #FF6A00 !important; font-weight: 700; text-decoration: none !important; }

@media (max-width: 767px) { .bb-post .bb-post-band--img { min-height: 420px; } }
@media (max-width: 700px) {
  .bb-post .bb-post-band, .bb-blog .bb-post-band { padding: 140px 0 36px; }
  .bb-post .bb-post-sub, .bb-blog .bb-post-sub { font-size: 17px !important; }
  .bb-post .bb-post-main { padding: 28px 0 56px; }
  .bb-post .bb-post-body h2 { font-size: 26px !important; margin-top: 44px !important; }
  .bb-post .bb-post-body h3 { font-size: 20px !important; }
  .bb-post .bb-post-cta { padding: 26px 22px; }
  .bb-post .bb-post-cta-title { font-size: 22px !important; }
  .bb-post .bb-post-bio { flex-direction: column; }
  .bb-blog .bb-author-head { flex-direction: column; gap: 20px; }
  .bb-blog .bb-author-photo { width: 120px !important; height: 150px !important; flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-post .bb-post-card, .bb-blog .bb-post-card { transition: none; }
  .bb-post .bb-post-card:hover, .bb-blog .bb-post-card:hover { transform: none; }
}

/* ── Homepage "Latest Guides" row (Step 8, gated by option bb_home_blog_row) ── */
.bb-blog.bb-home-blog { background: #FFF8F2; padding: 80px 0 88px; }
.bb-home-blog .bb-home-blog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.bb-home-blog .bb-home-blog-head .bb-blog-section-h { margin: 0 !important; font-size: clamp(28px, 3vw, 38px) !important; }
.bb-home-blog .bb-home-blog-all { color: #C24A00 !important; font-weight: 700; font-size: 16px; text-decoration: none !important; }
.bb-home-blog .bb-home-blog-all:hover { text-decoration: underline !important; }
@media (max-width: 700px) { .bb-blog.bb-home-blog { padding: 60px 0; } }

/* ── /blog/ index rows and card labels (Steering 1 §2) ─────────────────── */
.bb-blog .bb-blog-row { padding: 56px 0 8px; }
.bb-blog .bb-blog-row + .bb-blog-row, .bb-blog .bb-blog-row + .bb-blog-list { padding-top: 40px; }
.bb-blog .bb-blog-row-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px; }
.bb-blog .bb-blog-row-head .bb-blog-section-h { margin: 0 !important; }
.bb-blog .bb-blog-viewall { margin: 0 !important; font-size: 15px; color: #4F5B68; }
.bb-blog .bb-blog-viewall a { color: #C24A00 !important; font-weight: 700; text-decoration: none !important; }
.bb-blog .bb-blog-viewall a:hover { text-decoration: underline !important; }
.bb-card-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bb-post .bb-card-type, .bb-blog .bb-card-type { font-size: 12px; font-weight: 600; color: #4F5B68; border: 1px solid #E2E5EC; border-radius: 100px; padding: 1px 8px; line-height: 1.5; }
@media (min-width: 768px) {
  .bb-blog .bb-card-grid--latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-blog .bb-post-card--large { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .bb-blog .bb-post-card--large { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .bb-blog .bb-post-card--large .bb-card-media { aspect-ratio: 16 / 9; height: 100%; }
  .bb-blog .bb-post-card--large .bb-card-body { padding: 32px 36px; justify-content: center; }
  .bb-blog .bb-post-card--large .bb-card-title { font-size: 28px !important; -webkit-line-clamp: 3; }
  .bb-blog .bb-post-card--large .bb-card-excerpt { font-size: 17px; }
}

/* ==========================================================================
   STEERING 2 SPACING SYSTEM (2026-10-13). Overrides the values above.
   Tokens: --s1 4 · --s2 8 · --s3 12 · --s4 16 · --s5 24 · --s6 32 · --s7 48 · --s8 64 · --s9 96.
   Values the steering names explicitly (72, 80, 28, 20, 36, 56, 10, 6) are used as given.
   Header: Astra's header is absolute and scrolls away; it is 142px tall above 1200px and
   124px at 1200 and below (125 on phones), so the hero pads from below it.
   ========================================================================== */
.bb-post, .bb-blog { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --bb-hdr: 142px; }
@media (max-width: 1200px) { .bb-post, .bb-blog { --bb-hdr: 124px; } }
@media (max-width: 767px) { .bb-post, .bb-blog { --bb-hdr: 125px; } }

/* A1 Hero */
.bb-post .bb-post-band, .bb-blog .bb-post-band { padding: calc(var(--bb-hdr) + 72px) 0 80px !important; }
.bb-post .bb-post-band--img { min-height: 520px; }
.bb-post .bb-post-band-inner, .bb-blog .bb-post-band .bb-post-wrap { width: min(1240px, 100% - 40px); }
.bb-post .bb-post-crumbs, .bb-blog .bb-post-crumbs { font-size: 14px !important; margin: 0 0 28px !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.bb-post .bb-post-crumbs span { color: rgba(250,250,250,0.55); }
.bb-post .bb-post-labels { gap: var(--s3) !important; margin: 0 0 20px !important; }
.bb-post .bb-post-title, .bb-blog .bb-post-title { font-size: 52px !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; max-width: 860px; margin: 0 0 var(--s5) !important; }
.bb-post .bb-post-sub, .bb-blog .bb-post-sub { font-size: 20px !important; line-height: 1.6 !important; max-width: 640px; color: rgba(250,250,250,0.82) !important; margin: 0 0 36px !important; }
.bb-post .bb-post-byline { gap: var(--s4); border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--s5); align-items: center; max-width: 860px; }
.bb-post .bb-post-avatar { width: 52px !important; height: 52px !important; max-width: 52px !important; flex: 0 0 52px !important; border-radius: 50% !important; object-fit: cover !important; object-position: 50% 18% !important; box-shadow: 0 0 0 2px rgba(255,106,0,0.5); }
.bb-post .bb-post-byline-name { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 var(--s1) !important; }
.bb-post .bb-post-byline-meta { font-size: 14px !important; color: rgba(250,250,250,0.72) !important; margin: 0 !important; }
.bb-post .bb-post-byline-meta span + span::before { content: "·"; margin: 0 var(--s2); }
.bb-post .bb-post-policy { margin: var(--s2) 0 0 !important; font-size: 14px !important; }
.bb-post .bb-post-policy a { color: rgba(250,250,250,0.72) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.bb-post .bb-post-policy a:hover { color: #FFFFFF !important; }
@media (max-width: 767px) {
  /* 48px (not 40) under the header, so the breadcrumb clears it by 48px as A1 also requires. */
  .bb-post .bb-post-band, .bb-blog .bb-post-band { padding: calc(var(--bb-hdr) + 48px) 0 48px !important; }
  .bb-post .bb-post-band--img { min-height: 420px; }
  .bb-post .bb-post-title, .bb-blog .bb-post-title { font-size: 34px !important; }
  .bb-post .bb-post-sub, .bb-blog .bb-post-sub { font-size: 18px !important; }
}

/* A2 / G2 Grid: 64px below the hero on desktop and tablet */
.bb-post .bb-post-main { padding: var(--s8) 0 var(--s9) !important; }
.bb-post .bb-post-grid { width: min(1240px, 100% - 40px); }
@media (min-width: 768px) { .bb-post .bb-post-grid { column-gap: var(--s6); } }
@media (min-width: 1200px) { .bb-post .bb-post-grid { grid-template-columns: 240px minmax(0, 720px) 300px; column-gap: 56px; justify-content: center; } }
.bb-post .bb-sticky { top: var(--s6); }
/* Under 768: TOC bar 16px below the hero, quick answer 32px below the bar */
@media (max-width: 767px) {
  .bb-post .bb-toc-bar { margin-top: var(--s4); border-top: 1px solid #E2E5EC; }
  .bb-post .bb-post-main { padding-top: var(--s6) !important; }
}
@media (min-width: 768px) and (max-width: 1199px) { .bb-post .bb-toc-bar { margin-top: var(--s5); border-top: 1px solid #E2E5EC; } .bb-post .bb-toc-bar + .bb-post-main { padding-top: var(--s6) !important; } }

/* A3 Left TOC */
.bb-post .bb-toc-title { font-size: 12px !important; letter-spacing: 0.14em !important; margin: 0 0 var(--s4) !important; }
.bb-post .bb-toc li { margin: 0 0 2px !important; }
.bb-post .bb-toc a { font-size: 14px !important; line-height: 1.45 !important; padding: var(--s2) 0 var(--s2) var(--s4) !important; border-left: 2px solid #E2E5EC !important; color: #4F5B68 !important; font-weight: 500; }
.bb-post .bb-toc--rail a { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-post .bb-toc a:hover { color: #111827 !important; }
.bb-post .bb-toc a.is-active { border-left: 2px solid #FF6A00 !important; padding-left: var(--s4) !important; color: #C24A00 !important; font-weight: 600 !important; }
.bb-post .bb-toc--rail ol { max-height: none; overflow: visible; }
.bb-post .bb-post-left .bb-progress { margin: var(--s5) 0 0; }
.bb-post .bb-share { margin: var(--s5) 0 0 !important; gap: var(--s3) !important; }
.bb-post .bb-share .bb-share-btn, .bb-post button.bb-share-btn { display: inline-flex !important; align-items: center; gap: var(--s2); }
.bb-post .bb-share svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* A4 Right rail */
.bb-post .bb-rail-card { margin: 0 0 var(--s5) !important; padding: var(--s5) !important; border-radius: 14px !important; }
.bb-post .bb-rail-offer, .bb-post .bb-rail-service { padding: 28px !important; }
.bb-post .bb-rail-title { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 6px !important; }
.bb-post .bb-rail-help { font-size: 13px !important; color: #4F5B68 !important; margin: 0 0 var(--s4) !important; line-height: 1.45 !important; }
.bb-post .bb-ai-list { gap: 10px !important; }
.bb-post .bb-rail-ai .bb-ai-btn { height: 44px; padding: 0 14px !important; gap: 10px !important; font-size: 14px !important; font-weight: 500 !important; border: 1px solid #E2E5EC !important; box-sizing: border-box; }
.bb-post .bb-ai-btn svg { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
.bb-post .bb-ai-btn:hover, .bb-post .bb-ai-btn:focus-visible { border-color: #FF6A00 !important; }
.bb-post .bb-rail-eyebrow { font-size: 12px !important; margin: 0 0 10px !important; }
.bb-post .bb-rail-line { font-size: 15px !important; line-height: 1.55 !important; margin: 0 0 20px !important; }
.bb-post .bb-rail-offer .bb-btn { width: 100%; height: 48px; padding: 0 var(--s4) !important; align-items: center; box-sizing: border-box; }
.bb-post .bb-rail-service-name { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 var(--s2); }
.bb-post .bb-rail-service-desc { display: block; font-size: 14px; line-height: 1.5; color: rgba(250,250,250,0.7); }
.bb-post .bb-rail-service-link { display: block; margin-top: var(--s4); font-size: 15px; font-weight: 700; color: #FF6A00; }
.bb-post .bb-rail-service:hover .bb-rail-service-name { text-decoration: none; }
.bb-post .bb-rail-service:hover .bb-rail-service-link { text-decoration: underline; }
.bb-post .bb-ai-row { gap: 10px !important; }

/* G3 Checklist box */
.bb-post .bb-checklist { background: #FFF8F2; border: 1px solid rgba(255,106,0,0.18); border-radius: 14px; }
.bb-post .bb-checklist--inline { padding: var(--s6); margin: 40px 0; }
.bb-post .bb-checklist p { margin: 0 !important; }
.bb-post .bb-post-body .bb-checklist-eyebrow, .bb-post .bb-checklist-eyebrow { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #C24A00 !important; margin-bottom: var(--s2) !important; }
.bb-post .bb-post-body .bb-checklist-title, .bb-post .bb-checklist-title { font-size: 20px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0B121B !important; margin-bottom: var(--s2) !important; }
.bb-post .bb-post-body .bb-checklist-line, .bb-post .bb-checklist-line { font-size: 15px !important; line-height: 1.55 !important; color: #374151 !important; margin-bottom: var(--s4) !important; }
.bb-post .bb-checklist-jump { font-size: 15px; font-weight: 700; color: #C24A00 !important; text-decoration: none !important; }
.bb-post .bb-checklist-jump:hover { text-decoration: underline !important; }
.bb-post .bb-post-body .bb-checklist-privacy, .bb-post .bb-checklist-privacy { font-size: 13px !important; line-height: 1.5 !important; color: #4F5B68 !important; margin-top: var(--s3) !important; margin-bottom: 0 !important; }   /* the body paragraph margin left 24px under the last line */
.bb-post .bb-checklist-privacy a { color: #C24A00 !important; }
.bb-post .bb-checklist .wpforms-container { margin: 0 !important; }
.bb-post .bb-checklist .wpforms-field { padding: 0 0 var(--s3) !important; }
.bb-post .bb-checklist .wpforms-field-label { font-size: 14px !important; font-weight: 600 !important; color: #111827 !important; }
.bb-post .bb-checklist input[type="email"] { width: 100% !important; max-width: none !important; height: 48px; padding: 0 14px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; font-size: 16px !important; background: #FFFFFF !important; box-sizing: border-box; }
.bb-post .bb-checklist .wpforms-field-checkbox li, .bb-post .bb-checklist .wpforms-field-checkbox li::before { content: none !important; }
.bb-post .bb-checklist .wpforms-field-checkbox label { font-size: 14px !important; line-height: 1.45 !important; color: #374151 !important; }
/* Consent row sits on the box's left text edge and the button follows it directly (owner report 15 Oct 2026:
   the prose list rule gave the li 28.8px of left padding, and the UL, the field and the submit container
   each added space, leaving 76px between the consent line and a centred button). */
.bb-post .bb-checklist .wpforms-field.wpforms-field-checkbox { padding: 0 0 var(--s4) !important; margin: 0 !important; }
.bb-post .bb-checklist .wpforms-field-checkbox ul { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bb-post .bb-checklist .wpforms-field-checkbox li { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bb-post .bb-checklist .wpforms-field-checkbox li input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0 !important; }
.bb-post .bb-checklist .wpforms-submit-container { display: flex !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; }
.bb-post .bb-checklist .wpforms-submit-container button.wpforms-submit { margin: 0 !important; }
.bb-post .bb-checklist button.wpforms-submit { background: #FF6A00 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; height: 48px; padding: 0 var(--s5) !important; font: 700 16px/1 Inter, sans-serif !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; cursor: pointer; }
.bb-post .bb-checklist button.wpforms-submit:hover { background: #ED4B00 !important; }
.bb-post .bb-checklist .wpforms-confirmation-container-full { background: #FFFFFF !important; border: 1px solid #E2E5EC !important; border-radius: 10px; color: #111827; padding: var(--s4) !important; }
.bb-post .bb-checklist .wpforms-confirmation-container-full a { color: #C24A00 !important; font-weight: 700; }

/* A5 Content column */
.bb-post .bb-post-qa { padding: var(--s5) 28px !important; margin: 0 0 40px !important; }
.bb-post .bb-post-qa .bb-explainer-label { margin-bottom: 10px !important; }
.bb-post .bb-post-body p, .bb-post .bb-post-body li { line-height: 1.75 !important; }
.bb-post .bb-post-body p { margin: 0 0 var(--s5) !important; }
.bb-post .bb-post-body h2 { font-size: 30px !important; margin: var(--s8) 0 20px !important; }
.bb-post .bb-post-body h3 { font-size: 22px !important; margin: 40px 0 var(--s3) !important; }
.bb-post .bb-post-body ul li, .bb-post .bb-post-body ol li { margin: 0 0 10px !important; }
.bb-post .bb-post-body figure, .bb-post .bb-post-body .bb-figure { margin: 40px 0 !important; }
.bb-post .bb-post-body figcaption { font-size: 14px !important; margin-top: var(--s3) !important; }
.bb-post .bb-post-body .bb-figure img { width: 100% !important; height: auto !important; border-radius: 10px; display: block; }
.bb-post .bb-proof-strip.bb-proof-strip--result-only { margin: 40px 0 !important; }
.bb-post .bb-post-body .wp-block-table, .bb-post .bb-post-body .bb-table-wrap { margin: 40px 0 !important; }
.bb-post .bb-post-body th { background: #F3F4F6 !important; }
.bb-post .bb-post-body th, .bb-post .bb-post-body td { padding: 14px var(--s4) !important; font-size: 15px !important; }
.bb-post .bb-post-body td:first-child { font-weight: 700 !important; }
.bb-post .bb-post-body th:first-child { background: #F3F4F6 !important; }
@media (max-width: 767px) {
  /* scroll hint: a shadow on the right edge while more columns sit off screen */
  .bb-post .bb-post-body .wp-block-table, .bb-post .bb-post-body .bb-table-wrap {
    background: linear-gradient(to right, #FFF 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
                linear-gradient(to left, #FFF 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
                radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
  }
  .bb-post .bb-post-body td, .bb-post .bb-post-body th:not(:first-child) { background-color: transparent; }
}
.bb-post .bb-post-faq-item { padding: 20px 0 !important; }
.bb-post .bb-post-cta { margin: var(--s8) 0 0 !important; }
.bb-post .bb-post-bio { margin-top: var(--s8) !important; padding-top: var(--s6) !important; border-top: 1px solid #E2E5EC; gap: var(--s5) !important; }
.bb-post .bb-post-bio-photo { width: 88px !important; height: 88px !important; max-width: 88px !important; flex: 0 0 88px !important; object-fit: cover !important; object-position: 50% 18% !important; }
.bb-post .bb-post-related { padding: var(--s8) 0 var(--s9) !important; }
.bb-post .bb-checklist .wpforms-required-label { color: #C24A00 !important; }   /* WPForms red is 3.8:1 on the cream box */

/* ==========================================================================
   OWNER CORRECTIONS 2026-10-13 (after Steering 2)
   1. Hero: even VISIBLE padding. The header box has ~21px of empty space under the logo, so the top
      padding is measured from the logo: about 64px above the breadcrumb and 64px below the byline
      (desktop and tablet), about 48px each on phones.
   2. Grid follows the Web Tonic reference: 1344px container with 48px gutters, columns in the
      ratio 245 : 734 : 278 with 44px gaps (content 734px at 1440, about 593px at 1200).
   3. Right rail: two cards (Summarize with AI, Book a Growth Call).
   ========================================================================== */
.bb-post .bb-post-band, .bb-blog .bb-post-band { padding: calc(var(--bb-hdr) + 44px) 0 var(--s8) !important; }
.bb-post .bb-post-band--img { align-items: center; }
@media (max-width: 767px) { .bb-post .bb-post-band, .bb-blog .bb-post-band { padding: calc(var(--bb-hdr) + 24px) 0 var(--s7) !important; } }
@media (min-width: 1200px) {
  .bb-post .bb-post-band-inner, .bb-blog .bb-post-band .bb-post-wrap { width: min(1344px, 100% - 96px); }
  .bb-post .bb-post-grid { width: min(1344px, 100% - 96px); grid-template-columns: minmax(0, 245fr) minmax(0, 734fr) minmax(0, 278fr); column-gap: 44px; justify-content: stretch; }
  .bb-post .bb-post-col { max-width: 734px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .bb-post .bb-post-band-inner, .bb-blog .bb-post-band .bb-post-wrap { width: calc(100% - 64px); }
  .bb-post .bb-post-grid { width: calc(100% - 64px); grid-template-columns: minmax(0, 1fr) 260px; column-gap: var(--s6); }
  .bb-post .bb-toc-bar summary, .bb-post .bb-toc-bar ol { width: calc(100% - 64px); }
}

/* Card text margins: (0,3,x) so the generic ".bb-rail-card p { margin: 0 }" no longer flattens them */
.bb-post .bb-rail-card p.bb-rail-title { margin: 0 0 6px !important; }
.bb-post .bb-rail-card p.bb-rail-help { margin: 0 0 var(--s4) !important; }
.bb-post .bb-rail-card p.bb-rail-eyebrow { margin: 0 0 10px !important; }
.bb-post .bb-rail-card p.bb-rail-line { margin: 0 0 20px !important; }
/* Mid-article service box: the button row gets room above it */
.bb-post .bb-post-service { padding: 28px !important; margin: 40px 0 !important; }
.bb-post .bb-post-body .bb-post-service p.bb-post-service-line { margin: 0 !important; }
.bb-post .bb-post-service-actions { margin-top: var(--s5) !important; gap: var(--s4) var(--s5) !important; }
.bb-post .bb-post-service-actions .bb-btn { min-height: 48px; padding: 0 22px !important; }
/* End CTA: room above the button and below the subline */
.bb-post .bb-post-cta { padding: 40px 36px !important; }
.bb-post .bb-post-cta p.bb-post-cta-eyebrow { margin: 0 0 var(--s3) !important; }
.bb-post .bb-post-cta p.bb-post-cta-title { margin: 0 0 var(--s5) !important; }
.bb-post .bb-post-cta ul.bb-post-cta-points { margin: 0 0 var(--s6) !important; }
.bb-post .bb-post-cta .bb-btn { min-height: 52px; padding: 0 var(--s5) !important; }
.bb-post .bb-post-cta p.bb-post-cta-sub { margin: var(--s4) 0 0 !important; }
@media (max-width: 767px) { .bb-post .bb-post-cta { padding: var(--s6) var(--s5) !important; } }
/* Sources: one collapsed panel */
.bb-post .bb-post-sources { margin: var(--s8) 0 0; border-top: 1px solid #E2E5EC; border-bottom: 1px solid #E2E5EC; }
.bb-post .bb-post-sources summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--s4) 0; }
.bb-post .bb-post-sources summary::-webkit-details-marker { display: none; }
.bb-post .bb-post-sources summary::after { content: "+"; color: #C24A00; font-size: 22px; font-weight: 700; }
.bb-post .bb-post-sources[open] summary::after { content: "\2212"; }
.bb-post .bb-post-body .bb-post-sources h2 { font-size: 18px !important; margin: 0 !important; }
.bb-post .bb-post-sources-n { color: #4F5B68; font-weight: 600; }
.bb-post .bb-post-body .bb-post-sources-body p, .bb-post .bb-post-body .bb-post-sources-body li { font-size: 14px !important; line-height: 1.6 !important; margin: 0 0 var(--s2) !important; }
.bb-post .bb-post-body .bb-post-sources-body ol { padding-left: 1.4em !important; margin: 0 0 var(--s4) !important; }
/* Rail CTA card: heading above the button (owner correction 2026-10-13) */
.bb-post .bb-rail-card p.bb-rail-head { font-size: 19px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #FFFFFF !important; margin: 0 0 var(--s3) !important; }
.bb-post .bb-rail-card p.bb-rail-line { font-size: 15px !important; line-height: 1.55 !important; color: rgba(250,250,250,0.8) !important; margin: 0 0 var(--s5) !important; }
.bb-post .bb-rail-card p.bb-rail-sub { font-size: 13px !important; color: rgba(250,250,250,0.65) !important; margin: var(--s3) 0 0 !important; text-align: center; }
.bb-post .bb-rail-card p.bb-rail-alt { font-size: 14px !important; line-height: 1.5 !important; color: rgba(250,250,250,0.8) !important; margin: var(--s4) 0 0 !important; padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,0.12); }
.bb-post .bb-rail-alt a { color: #FF6A00 !important; font-weight: 700; text-decoration: none !important; }
.bb-post .bb-rail-alt a:hover { text-decoration: underline !important; }
/* Hero bottom: the eye reads the header bar as part of the top space, so the bottom gets more (owner review 2026-10-13) */
.bb-post .bb-post-band { padding-bottom: 88px !important; }
@media (max-width: 767px) { .bb-post .bb-post-band { padding-bottom: var(--s8) !important; } }

/* ── Blog index and category pages (owner corrections 2026-10-13) ──────────
   Same container as the article (1344px, 48px gutters), larger cards and type. */
@media (min-width: 1200px) { .bb-blog .bb-post-wrap { width: min(1344px, 100% - 96px); } }
@media (min-width: 768px) and (max-width: 1199px) { .bb-blog .bb-post-wrap { width: calc(100% - 64px); } }
.bb-blog .bb-card-grid { gap: var(--s6); }
.bb-blog .bb-card-body { padding: var(--s5) 28px 28px; gap: var(--s3); }
.bb-blog .bb-card-title { font-size: 22px !important; line-height: 1.3 !important; }
.bb-blog .bb-card-excerpt { font-size: 16px; line-height: 1.6; }
.bb-blog .bb-blog-section-h { font-size: 30px !important; }
.bb-blog .bb-blog-row { padding: var(--s8) 0 var(--s2); }
.bb-blog .bb-blog-list { padding: var(--s8) 0 var(--s9); }
@media (min-width: 900px) {
  .bb-blog .bb-post-card--large .bb-card-title { font-size: 34px !important; }
  .bb-blog .bb-post-card--large .bb-card-body { padding: 48px; }
  .bb-blog .bb-post-card--large .bb-card-excerpt { font-size: 18px; -webkit-line-clamp: 4; }
}

/* Byline: keep "Published 13 October 2026" and "13 min read" whole when the meta line wraps on phones */
.bb-post .bb-post-byline-meta span:not(:first-child) { white-space: nowrap; }

/* ═══ STEERING 3 ADDENDUM (2026-10-13): HERO ON THE HEADER GRID, BODY ON THE WIDE GRID ═══
   HERO (breadcrumb, labels, H1, subtitle, byline; index/category/author heads) uses the HEADER's
   content box, read from the --bb-hdr-* variables in Additional.css that the header rules use, so the
   two cannot drift: <=768 20px gutters; 769-1270 60px Astra margin + 20px bar padding; 1271-1300 20px
   (mobile header); >=1301 a centred min(1320px, 100% - 16px) container with 24px padding.
   Its left edge is the header PADDING edge, which is where the logo's visible mark starts (measured:
   first visible logo pixel x=84 at 1440; the image box sits 6px further left but its black ground is
   invisible on the dark header). Its right edge is the header CTA / hamburger right edge.
   BODY (TOC, text, rail, card grids, related) keeps the earlier wide grid by owner ruling
   (2026-10-13, "earlier wide body"): 1344px container with 48px gutters and 245 : 734 : 278 columns,
   44px gaps, from 1200; 32px gutters on tablets; the header's 20px on phones. */
.bb-post, .bb-blog {
  --bb-blog-gut: var(--bb-hdr-mob-pad, 20px);
  --bb-blog-w: 100%;
  --bb-hero-w: 760px;
}
@media (min-width: 769px) and (max-width: 1270px) {
  .bb-post, .bb-blog { --bb-blog-gut: calc(var(--bb-hdr-tab-margin, 60px) + var(--bb-hdr-mob-pad, 20px)); }
}
@media (min-width: 1301px) {
  .bb-post, .bb-blog { --bb-blog-gut: var(--bb-hdr-pad, 24px); --bb-blog-w: min(var(--bb-hdr-max, 1320px), 100% - 2 * var(--bb-hdr-edge, 8px)); }
}
/* Hero containers: header grid */
.bb-post .bb-post-band .bb-post-wrap, .bb-blog:not(.bb-home-blog) .bb-post-band .bb-post-wrap {
  box-sizing: border-box !important; width: var(--bb-blog-w) !important; max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--bb-blog-gut) !important; padding-right: var(--bb-blog-gut) !important;
}
/* Body containers: the earlier wide grid */
.bb-post .bb-post-main .bb-post-wrap, .bb-post .bb-post-related .bb-post-wrap,
.bb-blog:not(.bb-home-blog) > section .bb-post-wrap,
.bb-post .bb-toc-bar summary, .bb-post .bb-toc-bar ol {
  box-sizing: border-box !important; width: calc(100% - 2 * var(--bb-hdr-mob-pad, 20px)) !important; max-width: none !important;
  margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important;
}
@media (min-width: 768px) {
  .bb-post .bb-post-main .bb-post-wrap, .bb-post .bb-post-related .bb-post-wrap,
  .bb-blog:not(.bb-home-blog) > section .bb-post-wrap,
  .bb-post .bb-toc-bar summary, .bb-post .bb-toc-bar ol { width: calc(100% - 64px) !important; }
}
@media (min-width: 1200px) {
  .bb-post .bb-post-main .bb-post-wrap, .bb-post .bb-post-related .bb-post-wrap,
  .bb-blog:not(.bb-home-blog) > section .bb-post-wrap { width: min(1344px, 100% - 96px) !important; }
  .bb-post .bb-post-grid { grid-template-columns: minmax(0, 245fr) minmax(0, 734fr) minmax(0, 278fr) !important; column-gap: 44px !important; justify-content: stretch !important; }
  .bb-post .bb-post-col { max-width: 734px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .bb-post .bb-post-grid { grid-template-columns: minmax(0, 1fr) 260px !important; column-gap: var(--s6) !important; }
}
/* The mobile header is 124px tall up to 1300, not only up to 1200 */
@media (min-width: 1201px) and (max-width: 1300px) { .bb-post, .bb-blog { --bb-hdr: 124px; } }
/* Hero: divider and byline span the H1's width only; the H1 stays clear of the art's subject */
.bb-post .bb-post-title, .bb-post .bb-post-byline { max-width: var(--bb-hero-w) !important; }

/* Editorial policy page (page-editorial-policy.php): one centred reading column under the blog hero */
.bb-post.bb-policy .bb-post-main { padding: var(--s8) 0 var(--s9); }
.bb-post.bb-policy .bb-policy-col { max-width: 734px !important; margin-inline: auto !important; }
.bb-post.bb-policy .bb-post-body h2:first-child { margin-top: 0 !important; }

/* Inline code (URLs, parameter names) wraps inside the column; measured: an endpoint URL ran 253px past a 350px column at 390 */
.bb-post .bb-post-body :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }

/* Font swap shift (measured CLS 0.13 at 390 on a long H1): blog text uses the metric-matched
   'Inter Fallback' from bb-fonts.css while Inter loads, so the swap does not re-wrap the hero. */
.bb-post, .bb-blog, .bb-post h1, .bb-post h2, .bb-post h3, .bb-blog h1, .bb-blog h2, .bb-blog h3 { font-family: var(--bb-font-sans, 'Inter', 'Inter Fallback', sans-serif) !important; }

/* ═══ STEERING 5 (2026-10-14): BLOG CONTAINER (HEADER INCLUDED) AND A FULL-VISIBILITY HERO ═══
   A§4a. Blog templates (body.bb-blog-view: /blog/, category archives, posts, the author page, /editorial-policy/)
   use ONE container: the body grid the TOC and rail already sat on, min(1344px, 100% - 96px) from 1200px, 32px
   side margins from 768 to 1199, 20px below 768 (the site's existing gutter tokens). The header reads the same
   --bb-hdr-* variables, re-pointed here, so the logo's visible mark, the breadcrumb, the H1 and the TOC start on
   one left line and the header button and the right rail end on one right line. Other pages keep :root's values,
   so their header is unchanged. At 1440 the hero text starts at x 48, so a right-45% subject (from x 792) leaves
   room for a 720px title column.
   A§4. The featured image renders at full strength: no overlay, no opacity, no filter. >=1024 it runs full-bleed
   behind the hero, anchored right, in a band at least 16:9 tall so the art is not enlarged; the title column is
   sized from the art's own measured subject edge (--bb-art-x, bb_blog_art_x()), so it narrows instead of dimming.
   <1024 the hero stacks: the art in a 4:3 box anchored right with a bottom fade, then the text on black. */
body.bb-blog-view { --bb-hdr-max: 1344px; --bb-hdr-edge: 48px; --bb-hdr-pad: 0px; --bb-hdr-mob-pad: 20px; --bb-hdr-tab-margin: 0px; }
@media (min-width: 768px) and (max-width: 1199px) { body.bb-blog-view { --bb-hdr-mob-pad: 32px; } }
@media (min-width: 1200px) and (max-width: 1300px) { body.bb-blog-view { --bb-hdr-mob-pad: 48px; } }
.bb-post { --bb-hero-left: 20px; }
@media (min-width: 768px) { .bb-post { --bb-hero-left: 32px; } }
@media (min-width: 1200px) { .bb-post { --bb-hero-left: max(48px, calc((100vw - 1344px) / 2)); } }

.bb-post .bb-post-band--img::before, .bb-post .bb-post-band--img::after { content: none !important; display: none !important; }
.bb-post .bb-post-band .bb-post-hero-img { opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; object-position: right center !important; }
.bb-post .bb-post-band--img { background: #0A0C10 !important; }

@media (min-width: 1024px) {
  /* Owner review 2026-10-14 (three rounds): the image anchors the heading and must carry visual weight, the title must not dominate either. The art box is
     --bb-hero-h tall (46vw, 420 to 660px), 16:9, pinned right and vertically centred beside the text block below the
     header; it never scales with the band. Its own edges blend into the black on the left, top and bottom (all far
     from the subject, which sits in the central 80% of the art's height and its right 45%). The title column is what
     is left of the subject's rendered edge minus a 48px gap, capped at 700px. Full strength: no overlay, no opacity. */
  /* Owner ruling 18 Oct 2026 (second of the day, final): the art stays where it was, 48px past the container's right edge, keeping
     the right padding; anchoring it to the screen edge was tried and reverted. The gap to its right is filled by the extended
     master's colour continuation (tools/extend-hero.py, default mode), which carries the art's floor and base out and fades. */
  .bb-post { --bb-hero-h: clamp(420px, 46vw, 660px); --bb-hero-right: max(0px, calc((100vw - 1344px) / 2 - 48px)); }
  .bb-post .bb-post-band .bb-post-hero-img { inset: auto var(--bb-hero-right) auto auto !important; top: calc(var(--bb-hdr) / 2 + 50% - var(--bb-hero-h) / 2) !important;
    height: var(--bb-hero-h) !important; width: calc(var(--bb-hero-h) * 16 / 9) !important; max-width: none !important; aspect-ratio: 16 / 9; object-fit: cover !important;
    /* Right edge (owner 18 Oct 2026): a 16:9 hero whose right edge carries an object or glow gets no extension (any
       continuation looked fake), so it fades into the band like its left edge, over min(gap to its right, 160px): 0 up
       to 1440 where the art meets the screen edge, so nothing changes there. Extended masters override this mask. */
    --bb-fade-r: min(var(--bb-hero-right), 160px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 calc(100% - var(--bb-fade-r)), transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 calc(100% - var(--bb-fade-r)), transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%); mask-composite: intersect; }
  .bb-post .bb-post-band--img { min-height: calc(var(--bb-hdr) + var(--bb-hero-h) + 48px) !important; align-items: center !important;
    --bb-hero-w: min(700px, calc(100vw - var(--bb-hero-right) - var(--bb-hero-h) * 16 / 9 * (1 - var(--bb-art-x, 0.55)) - var(--bb-hero-left) - 48px)); }
  .bb-post .bb-post-band--img .bb-post-crumbs, .bb-post .bb-post-band--img .bb-post-labels, .bb-post .bb-post-band--img .bb-post-title,
  .bb-post .bb-post-band--img .bb-post-sub, .bb-post .bb-post-band--img .bb-post-byline { max-width: var(--bb-hero-w) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .bb-post .bb-post-band .bb-post-title { font-size: 44px !important; line-height: 1.12 !important; } }
/* Extended hero masters (owner report 15 Oct 2026, measured): above 1440 the 16:9 box stops --bb-hero-right short of
   the screen (48px at 1536, 240 at 1920, 560 at 2560) and the art's lighting ended there in a hard line. An extended
   master (bb_blog_art_region(): the approved 16:9 scene untouched at x 0 to H*16/9, plus background-only canvas that
   falls off to #0A0C10) lets the box grow right into that gap by --bb-ext = min(gap, the extension at this height).
   The left edge and the height do not move and the scale stays height-driven (cover, anchored left, box never wider
   than the master's aspect), so the subject's size and position are identical to the 16:9 render. The left fade is
   restated in px of the 16:9 width (10%), and the visible extension fades to transparent so any master ends on the
   band colour. A 16:9 master is untouched by these rules. */
@media (min-width: 1024px) {
  .bb-post .bb-post-band .bb-post-hero-img.bb-post-hero-img--ext {
    --bb-ext: min(var(--bb-hero-right), calc(var(--bb-hero-h) * (var(--bb-art-a) - 1.7778)));
    inset: auto calc(var(--bb-hero-right) - var(--bb-ext)) auto auto !important;
    width: calc(var(--bb-hero-h) * 16 / 9 + var(--bb-ext)) !important; aspect-ratio: auto !important; object-position: left center !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--bb-hero-h) * 0.17778), #000 calc(100% - var(--bb-ext)), transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--bb-hero-h) * 0.17778), #000 calc(100% - var(--bb-ext)), transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%); }
}
/* Stacked heroes (<1024, 4:3 box): show the same part of the scene as a 16:9 master anchored right, i.e. the scene's
   right edge on the box's right edge: x = (4/3 * 0.75 ... ) solved for cover in a 4:3 box = 33.333% / (0.75a - 1). */
@media (max-width: 1023px) {
  .bb-post .bb-post-band .bb-post-hero-img.bb-post-hero-img--ext { object-position: calc(33.333% / (0.75 * var(--bb-art-a) - 1)) center !important; }
}

/* /blog/ header art (owner request 18 Oct 2026): the page's featured image, in the article hero scope (.bb-post.bb-blog-hero),
   sized to the index header's short text block instead of the article hero's 660px. */
@media (min-width: 1024px) { .bb-blog .bb-blog-hero { --bb-hero-h: clamp(300px, 30vw, 440px); } }
@media (max-width: 1023px) { .bb-blog .bb-blog-hero .bb-post-band .bb-post-hero-img { aspect-ratio: 16 / 9 !important; }
  .bb-blog .bb-blog-hero .bb-post-band .bb-post-hero-img.bb-post-hero-img--ext { object-position: left center !important; }
  .bb-blog .bb-blog-hero .bb-post-band--img::after { top: calc(var(--bb-hdr) + 56.25vw - 120px) !important; } }

/* H1 accent: the cover card's accent words (bb_h1_accent = cover_accent) in Blaze Orange on the dark hero (7.3:1 on black, CLAUDE.md §2) */
.bb-post .bb-post-title em { font-style: normal; color: #FF6A00; }
/* Even line lengths in the hero: no one-word last line under a long H1 */
.bb-post .bb-post-band .bb-post-title { text-wrap: balance; }
.bb-post .bb-post-band .bb-post-sub { text-wrap: pretty; }
@media (max-width: 1023px) {
  .bb-post .bb-post-band--img { display: block !important; min-height: 0 !important; padding-top: var(--bb-hdr) !important; }
  .bb-post .bb-post-band .bb-post-hero-img { position: relative !important; inset: auto !important; z-index: 0 !important; display: block !important;
    width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover !important; }
  .bb-post .bb-post-band--img::after { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; z-index: 1;
    top: calc(var(--bb-hdr) + 75vw - 120px); height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(10,12,16,0) 0%, #0A0C10 100%); }
  .bb-post .bb-post-band--img .bb-post-band-inner { position: relative; z-index: 2; padding-top: var(--s5) !important; }
}

/* Live cover card rules moved to bb-cover.css (Steering 9 B: Guides rows show covers on service pages); bb-blog.css depends on it. */