@highjumpdigitalsoftware/blog-kit 0.6.0

package/dist/core/css/components.css

@@ -0,0 +1,2632 @@
+/* ============================================================
+   blog-kit — Component styles
+   ------------------------------------------------------------
+   ONE shared stylesheet of global .bk-* BEM classes, imported by
+   BOTH the React and Astro adapters. The adapters emit identical
+   markup/classnames; all styling lives here so a restyle is a
+   single-file change that updates every framework and every site.
+
+   Every value keys off a --blog-* token (see tokens.css) so a
+   tenant re-skins by overriding tokens, never by editing this file.
+   ============================================================ */
+
+/* ── CalloutBox ──────────────────────────────────────────────
+   Canonical name: CalloutBox
+   Tones: info (default) | tip | success | warn | danger
+   The adapter maps the `tone` prop (and aliases type/variant) to a
+   --bk-callout--<tone> modifier class; colour logic stays here.
+   ──────────────────────────────────────────────────────────── */
+.bk-callout {
+  --_c: var(--blog-info);
+  --_bg: var(--blog-info-bg);
+  display: block;
+  background: var(--_bg);
+  border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent);
+  border-left: 4px solid var(--_c);
+  border-radius: var(--blog-radius-sm);
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  margin: var(--blog-sp-6) 0;
+}
+.bk-callout--info    { --_c: var(--blog-info);    --_bg: var(--blog-info-bg); }
+.bk-callout--tip     { --_c: var(--blog-success); --_bg: var(--blog-success-bg); }
+.bk-callout--success { --_c: var(--blog-success); --_bg: var(--blog-success-bg); }
+.bk-callout--warn    { --_c: var(--blog-warn);    --_bg: var(--blog-warn-bg); }
+.bk-callout--danger  { --_c: var(--blog-danger);  --_bg: var(--blog-danger-bg); }
+
+.bk-callout__title {
+  display: flex;
+  align-items: center;
+  gap: var(--blog-sp-2);
+  margin: 0 0 var(--blog-sp-2);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-md);
+  line-height: 1.3;
+  color: var(--_c);
+}
+
+.bk-callout__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--_c);
+}
+.bk-callout__icon svg { display: block; width: 18px; height: 18px; }
+
+.bk-callout__body {
+  font-size: var(--blog-fs-md);
+  line-height: 1.65;
+  color: var(--blog-text);
+}
+.bk-callout__body > :first-child { margin-top: 0; }
+.bk-callout__body > :last-child { margin-bottom: 0; }
+
+/* ============================================================
+   TipBox (.bk-tip) — "Pro tip" inline callout
+   Orange-tinted strip with a brand badge + bold lead line.
+   Ported from capture-ai blog TipBox (brand-orange tint/border).
+   ============================================================ */
+.bk-tip { display:flex; align-items:flex-start; gap:var(--blog-sp-3); margin:var(--blog-sp-5) 0; padding:var(--blog-sp-3) var(--blog-sp-4); background:var(--blog-brand-tint); border-left:4px solid var(--blog-brand); border-radius:var(--blog-radius-xs); }
+.bk-tip__badge { flex-shrink:0; margin-top:2px; padding:var(--blog-sp-1) var(--blog-sp-2); border-radius:var(--blog-radius-xs); background:var(--blog-brand); color:var(--blog-on-brand); font-family:var(--blog-font-display); font-weight:700; font-size: var(--blog-fs-eyebrow-sm); text-transform:uppercase; letter-spacing:var(--blog-tracking-wide); line-height:1.2; }
+.bk-tip__body { margin:0; font-family:var(--blog-font-body); font-size: var(--blog-fs-base); line-height:1.55; color:var(--blog-ink); }
+.bk-tip__lead { font-weight:700; }
+.bk-tip__context { color:var(--blog-text); }
+
+/* ── QuoteBlock ───────────────────────────────────────────────
+   Pull-quote / testimonial figure: large faded quote mark, brand
+   left-border, brand-tinted ground, italic body, bold uppercase
+   author, muted role, dashed-divider source attribution row. */
+.bk-quote { position: relative; margin: var(--blog-sp-7) 0; padding: var(--blog-sp-6) var(--blog-sp-5) var(--blog-sp-6) 56px; border-left: 4px solid var(--blog-brand); border-radius: 0 var(--blog-radius-xs) var(--blog-radius-xs) 0; background: var(--blog-brand-tint); }
+.bk-quote__mark { position: absolute; left: var(--blog-sp-4); top: var(--blog-sp-4); font-family: var(--blog-font-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--blog-brand); opacity: .35; user-select: none; pointer-events: none; }
+.bk-quote__body { margin: 0; font-family: var(--blog-font-display); font-style: italic; font-weight: 500; font-size: var(--blog-fs-xl); line-height: 1.3; color: var(--blog-ink); text-wrap: pretty; }
+.bk-quote__cite { display: flex; align-items: center; gap: var(--blog-sp-3); margin-top: var(--blog-sp-4); }
+.bk-quote__avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--blog-radius-pill); object-fit: contain; padding: 6px; background: var(--blog-paper); border: 1px solid var(--blog-border); }
+.bk-quote__who { display: flex; flex-direction: column; }
+.bk-quote__author { display: block; font-family: var(--blog-font-display); font-style: normal; font-weight: 700; font-size: var(--blog-fs-base); text-transform: uppercase; letter-spacing: var(--blog-tracking-wide); color: var(--blog-ink); }
+.bk-quote__role { font-family: var(--blog-font-body); font-size: var(--blog-fs-sm); color: var(--blog-mute); }
+.bk-quote__source { display: inline-flex; align-items: center; gap: var(--blog-sp-1); margin-top: var(--blog-sp-3); padding-top: var(--blog-sp-2); border-top: 1px dashed var(--blog-border); font-family: var(--blog-font-display); font-size: var(--blog-fs-eyebrow); letter-spacing: var(--blog-tracking-wide); color: var(--blog-mute); opacity: .8; text-decoration: none; transition: opacity .15s ease, color .15s ease; }
+.bk-quote__source--link:hover { opacity: 1; color: var(--blog-brand); }
+.bk-quote__source-kicker { font-weight: 700; text-transform: uppercase; font-size: var(--blog-fs-eyebrow-sm); letter-spacing: var(--blog-tracking-eyebrow); margin-right: 2px; color: var(--blog-mute); }
+.bk-quote__source-icon svg { display: block; width: 10px; height: 10px; opacity: .7; }
+@media (min-width: 640px) {
+  .bk-quote { padding: var(--blog-sp-8) var(--blog-sp-8) var(--blog-sp-8) 72px; }
+  .bk-quote__mark { left: var(--blog-sp-6); top: var(--blog-sp-5); font-size: 72px; }
+  .bk-quote__body { font-size: var(--blog-fs-2xl); }
+}
+
+/* ── Definition ─────────────────────────────────────────────
+   Term/definition block: brand monogram tile + name, optional
+   pronunciation, and definition body. Ported from Capture's
+   Definition.tsx (#FF4206→brand, #F9FAFB→bg-secondary, etc).
+   ──────────────────────────────────────────────────────────── */
+.bk-definition { display:flex; align-items:flex-start; gap:var(--blog-sp-4); margin:var(--blog-sp-6) 0; padding:var(--blog-sp-4); background:var(--blog-bg-secondary); border:1px solid var(--blog-border); border-radius:var(--blog-radius-xs); }
+.bk-definition__monogram { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:88px; height:88px; background:var(--blog-brand); color:var(--blog-on-brand); border-radius:var(--blog-radius-xs); font-family:var(--blog-font-display); font-weight:800; font-size:1.5rem; letter-spacing:.02em; }
+.bk-definition__content { flex:1; min-width:0; }
+.bk-definition__name { margin:0 0 .125rem; font-family:var(--blog-font-display); font-weight:700; font-size: var(--blog-fs-xl); line-height:1.2; color:var(--blog-ink); }
+.bk-definition__pronunciation { margin:0 0 var(--blog-sp-2); font-family:var(--blog-font-body); font-style:italic; font-size: var(--blog-fs-sm); line-height:1.3; color:var(--blog-mute); }
+.bk-definition__body { margin:0; font-family:var(--blog-font-body); font-size: var(--blog-fs-md); line-height:1.55; color:var(--blog-text); }
+@media (min-width:640px){ .bk-definition { gap:var(--blog-sp-5); padding:var(--blog-sp-5); } }
+
+/* ============================================================
+   FAQList — expandable Q&A built on native <details>/<summary>.
+   First item open by default; the plus toggle rotates 45deg into
+   an "x" when open. A behaviour script (core/behaviors/faq.js)
+   lifts the rendered pairs into FAQPage JSON-LD for SEO.
+   ============================================================ */
+.bk-faq { margin: var(--blog-sp-8) 0; }
+.bk-faq__heading {
+  margin: 0 0 var(--blog-sp-4);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  letter-spacing: var(--blog-tracking-eyebrow);
+  text-transform: uppercase;
+  color: var(--blog-brand);
+}
+.bk-faq__list {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--blog-border);
+  border-bottom: 1px solid var(--blog-border);
+}
+.bk-faq__item { border-bottom: 1px solid var(--blog-border); }
+.bk-faq__item:last-child { border-bottom: none; }
+.bk-faq__summary {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--blog-sp-4);
+  padding: var(--blog-sp-4) 0;
+  font-family: var(--blog-font-display);
+  font-weight: 600;
+  font-size: var(--blog-fs-lg);
+  line-height: 1.4;
+  color: var(--blog-ink);
+  list-style: none;
+  cursor: pointer;
+  transition: color .15s ease;
+}
+.bk-faq__summary::-webkit-details-marker { display: none; }
+.bk-faq__summary:hover { color: var(--blog-brand); }
+.bk-faq__toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--blog-radius-pill);
+  background: var(--blog-brand-soft);
+  color: var(--blog-brand);
+  transition: background .2s ease, color .2s ease, transform .2s ease;
+}
+.bk-faq__item[open] .bk-faq__toggle {
+  background: var(--blog-brand);
+  color: var(--blog-on-brand);
+  transform: rotate(45deg);
+}
+.bk-faq__bar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: currentColor;
+  border-radius: 1px;
+}
+.bk-faq__bar--h { width: .75rem; height: 2px; }
+.bk-faq__bar--v { width: 2px; height: .75rem; }
+.bk-faq__answer {
+  padding: 0 var(--blog-sp-1) var(--blog-sp-5) 0;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-md);
+  line-height: 1.6;
+  color: var(--blog-text);
+}
+.bk-faq__para { margin: 0 0 var(--blog-sp-3); }
+.bk-faq__para:last-child { margin-bottom: 0; }
+
+/* ── Checklist ───────────────────────────────────────────────
+   Canonical name: Checklist (+ sibling ChecklistItem)
+   Checklist: a list of {title, sub?, done?} rows on tinted tiles;
+   done rows get a filled brand-orange tick box + struck-through title.
+   ChecklistItem: a single standalone row on a paper tile; checked
+   rows get a filled success-green tick box + struck-through label.
+   Both use a text "✓" glyph (no SVG icon) faithful to the source.
+   ──────────────────────────────────────────────────────────── */
+.bk-checklist {
+  list-style: none;
+  margin: var(--blog-sp-6) 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--blog-sp-2);
+}
+.bk-checklist__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--blog-sp-3);
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  background: var(--blog-bg-secondary);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+}
+.bk-checklist__box {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 1.5px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+  background: transparent;
+  color: var(--blog-on-brand);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  line-height: 1;
+}
+.bk-checklist__item--done .bk-checklist__box {
+  background: var(--blog-brand);
+  border-color: var(--blog-brand);
+}
+.bk-checklist__text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.bk-checklist__title {
+  display: block;
+  font-family: var(--blog-font-body);
+  font-weight: 600;
+  font-size: var(--blog-fs-md);
+  line-height: 1.4;
+  color: var(--blog-ink);
+}
+.bk-checklist__item--done .bk-checklist__title {
+  text-decoration: line-through;
+  text-decoration-color: var(--blog-mute);
+}
+.bk-checklist__sub {
+  display: block;
+  margin-top: 2px;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  line-height: 1.5;
+  color: var(--blog-mute);
+}
+
+/* ── ChecklistItem (single standalone row) ──────────────────── */
+.bk-checklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--blog-sp-3);
+  margin: var(--blog-sp-3) 0;
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  background: var(--blog-paper);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+}
+.bk-checklist-item__box {
+  flex: 0 0 auto;
+  margin-top: 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 2px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+  background: transparent;
+  color: var(--blog-on-brand);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  line-height: 1;
+}
+.bk-checklist-item--checked .bk-checklist-item__box {
+  background: var(--blog-success);
+  border-color: var(--blog-success);
+}
+.bk-checklist-item__text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.bk-checklist-item__label {
+  display: block;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-base);
+  line-height: 1.4;
+  color: var(--blog-ink);
+}
+.bk-checklist-item--checked .bk-checklist-item__label {
+  color: var(--blog-mute);
+  text-decoration: line-through;
+}
+.bk-checklist-item__desc {
+  display: block;
+  margin-top: 2px;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  line-height: 1.5;
+  color: var(--blog-mute);
+}
+
+/* ============================================================
+   List — ordered / bullet / check list with branded markers
+   Ported from capture-ai blog List.tsx (#FF4206 → --blog-brand,
+   brand-orange-soft → --blog-brand-soft). Three variants share
+   one marker slot; ordered uses zero-padded display counters.
+   ============================================================ */
+.bk-list { margin: var(--blog-sp-6) 0; font-family: var(--blog-font-body); }
+
+.bk-list__heading {
+  margin: 0 0 var(--blog-sp-3);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  letter-spacing: var(--blog-tracking-wide);
+  text-transform: uppercase;
+  color: var(--blog-brand);
+}
+
+.bk-list__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--blog-sp-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bk-list__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--blog-sp-3);
+  margin: 0;
+  font-size: var(--blog-fs-lg);
+  line-height: 1.55;
+  color: var(--blog-text);
+}
+
+.bk-list__marker { flex: 0 0 auto; }
+
+.bk-list__text > strong { font-weight: 700; color: var(--blog-ink); }
+.bk-list__text > :first-child { margin-top: 0; }
+.bk-list__text > :last-child { margin-bottom: 0; }
+
+/* ordered — zero-padded display counters */
+.bk-list--ordered .bk-list__marker {
+  min-width: 30px;
+  padding-top: 2px;
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  font-size: var(--blog-fs-md);
+  line-height: 1.4;
+  color: var(--blog-brand);
+}
+
+/* bullet — brand dot */
+.bk-list--bullet .bk-list__marker {
+  width: 8px;
+  height: 8px;
+  margin-top: 8px;
+  border-radius: var(--blog-radius-pill);
+  background: var(--blog-brand);
+}
+
+/* check — tick inside a tinted brand circle */
+.bk-list--check .bk-list__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  border-radius: var(--blog-radius-pill);
+  background: var(--blog-brand-soft);
+  color: var(--blog-brand);
+}
+.bk-list--check .bk-list__marker svg { display: block; width: 14px; height: 14px; }
+
+/* ============================================================
+   StepBlock — numbered step card (badge + title + body)
+   ============================================================ */
+.bk-step { display:grid; grid-template-columns:36px 1fr; gap:var(--blog-sp-3); align-items:start; margin:var(--blog-sp-3) 0; padding:var(--blog-sp-3) var(--blog-sp-4); background:var(--blog-paper); border:1px solid var(--blog-border); border-radius:var(--blog-radius-xs); }
+.bk-step__num { width:36px; height:36px; border-radius:var(--blog-radius-pill); display:flex; align-items:center; justify-content:center; background:var(--blog-brand); color:var(--blog-on-brand); font-family:var(--blog-font-display); font-weight:800; font-size: var(--blog-fs-lg); line-height:1; }
+.bk-step__main { min-width:0; }
+.bk-step__title { margin:.375rem 0 var(--blog-sp-1); font-family:var(--blog-font-display); font-weight:700; font-size: var(--blog-fs-md); line-height:1.3; text-transform:uppercase; letter-spacing:.02em; color:var(--blog-ink); }
+.bk-step__body { font-family:var(--blog-font-body); font-size: var(--blog-fs-base); line-height:1.5; color:var(--blog-text); }
+.bk-step__body > p { margin:0; }
+.bk-step__body > p + p { margin-top:var(--blog-sp-2); }
+@media (min-width:640px) { .bk-step { grid-template-columns:44px 1fr; gap:var(--blog-sp-4); padding:var(--blog-sp-4) var(--blog-sp-5); } .bk-step__num { width:44px; height:44px; font-size:1.25rem; } }
+
+/* ── ComparisonTable ─────────────────────────────────────────
+   Canonical name: ComparisonTable
+   Side-by-side comparison of two options across features. Renders
+   twice from the SAME data: stacked cards (<640px, avoids the
+   hidden-horizontal-scroll trap) and a table (≥640px). The
+   [data-bk-comparison] behaviour toggles edge-fade hint classes
+   when the table overflows its scroll container.
+   Cells reading "yes"/✓ or "no"/✕ render as coloured glyph marks.
+   ──────────────────────────────────────────────────────────── */
+.bk-comparison { margin: var(--blog-sp-7) 0; }
+
+.bk-comparison__title {
+  margin: 0 0 var(--blog-sp-3);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-lg);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-ink);
+}
+
+/* Mobile: stacked cards (one per feature). */
+.bk-comparison__cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--blog-sp-3);
+}
+.bk-comparison__card {
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-paper);
+  overflow: hidden;
+}
+.bk-comparison__card-feature {
+  padding: var(--blog-sp-2) var(--blog-sp-4);
+  background: var(--blog-bg-secondary);
+  border-bottom: 1px solid var(--blog-border);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-mute);
+}
+.bk-comparison__card-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--blog-sp-3);
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+}
+.bk-comparison__card-row:first-of-type { border-bottom: 1px dashed var(--blog-border-light); }
+.bk-comparison__card-row--best { background: var(--blog-brand-tint); }
+.bk-comparison__card-label {
+  flex: 0 0 auto;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-mute);
+}
+.bk-comparison__card-row > :last-child {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  text-align: right;
+  color: var(--blog-ink);
+}
+.bk-comparison__card-row--best > :last-child { color: var(--blog-brand); font-weight: 600; }
+
+/* Tablet/desktop: table layout. */
+.bk-comparison__table-wrap {
+  display: none;
+  position: relative;
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-paper);
+  overflow: hidden;
+}
+/* Round the scroller to the wrap's radius so the thead fills the corners
+   (otherwise the wrap's paper bg shows as a band above the header row). */
+.bk-comparison__scroll { overflow-x: auto; border-radius: inherit; }
+.bk-comparison__table { width: 100%; border-collapse: collapse; }
+.bk-comparison__th {
+  text-align: left;
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  background: var(--blog-bg-secondary);
+  border-bottom: 1px solid var(--blog-border);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-mute);
+}
+.bk-comparison__td {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  border-bottom: 1px solid var(--blog-border);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  color: var(--blog-text);
+}
+.bk-comparison__tr:last-child .bk-comparison__td { border-bottom: none; }
+.bk-comparison__td--feature { color: var(--blog-ink); }
+.bk-comparison__td--best { background: var(--blog-brand-tint); color: var(--blog-brand); font-weight: 600; }
+
+/* Glyph marks for yes/no cells. */
+.bk-comparison__mark { font-weight: 700; }
+.bk-comparison__mark--yes { color: var(--blog-success); }
+.bk-comparison__mark--no { color: var(--blog-danger); }
+.bk-comparison__value--best { color: var(--blog-brand); font-weight: 600; }
+
+/* Scroll-edge hint fades, toggled by the behaviour on overflow. */
+.bk-comparison__table-wrap::before,
+.bk-comparison__table-wrap::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--blog-sp-6);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 1;
+}
+.bk-comparison__table-wrap::before {
+  left: 0;
+  background: linear-gradient(to right, var(--blog-paper), transparent);
+}
+.bk-comparison__table-wrap::after {
+  right: 0;
+  background: linear-gradient(to left, var(--blog-paper), transparent);
+}
+.bk-comparison__table-wrap--hint-left::before { opacity: 1; }
+.bk-comparison__table-wrap--hint-right::after { opacity: 1; }
+
+@media (min-width: 640px) {
+  .bk-comparison__cards { display: none; }
+  .bk-comparison__table-wrap { display: block; }
+}
+
+/* ProConBlock — side-by-side pros/cons cards (aliases: ProsCons) */
+.bk-procon { display:grid; grid-template-columns:1fr; gap:var(--blog-sp-3); margin:var(--blog-sp-6) 0; }
+@media (min-width:640px) { .bk-procon { grid-template-columns:1fr 1fr; } }
+.bk-procon__card { --_c:var(--blog-success); --_bg:var(--blog-success-bg); background:var(--_bg); border:1px solid color-mix(in srgb, var(--_c) 28%, transparent); border-radius:var(--blog-radius-xs); padding:var(--blog-sp-4); }
+@media (min-width:640px) { .bk-procon__card { padding:var(--blog-sp-5); } }
+.bk-procon__card--con { --_c:var(--blog-danger); --_bg:var(--blog-danger-bg); }
+.bk-procon__heading { margin:0 0 var(--blog-sp-3); font-family:var(--blog-font-display); font-weight:700; font-size: var(--blog-fs-base); text-transform:uppercase; letter-spacing:var(--blog-tracking-wide); color:var(--_c); }
+.bk-procon__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--blog-sp-2); }
+.bk-procon__item { display:flex; gap:var(--blog-sp-2); font-family:var(--blog-font-body); font-size: var(--blog-fs-base); line-height:1.45; color:var(--blog-text); }
+.bk-procon__mark { flex-shrink:0; width:18px; height:18px; margin-top:.1rem; border-radius:var(--blog-radius-pill); display:flex; align-items:center; justify-content:center; background:var(--_c); color:var(--blog-on-brand); font-size: var(--blog-fs-eyebrow); font-weight:700; line-height:1; }
+.bk-procon__text { display:block; }
+
+/* ============================================================
+   BeforeAfter — two-card comparison (muted "before" vs brand "after")
+   Faithful port of capture-ai BeforeAfter.tsx, tokenised.
+   ============================================================ */
+.bk-before-after { display:grid; grid-template-columns:1fr; gap:var(--blog-sp-3); margin:var(--blog-sp-6) 0; align-items:stretch; }
+@media (min-width:768px){ .bk-before-after { grid-template-columns:1fr 1fr; } }
+.bk-before-after__card { padding:var(--blog-sp-4); border-radius:var(--blog-radius-xs); border:1px solid var(--blog-border); }
+@media (min-width:640px){ .bk-before-after__card { padding:var(--blog-sp-5); } }
+.bk-before-after__card--before { background:var(--blog-bg-secondary); border-color:var(--blog-border); }
+.bk-before-after__card--after { background:var(--blog-brand); border-color:var(--blog-brand); color:var(--blog-on-brand); }
+.bk-before-after__label { font-family:var(--blog-font-display); font-weight:700; text-transform:uppercase; font-size: var(--blog-fs-eyebrow); letter-spacing:var(--blog-tracking-wide); color:var(--blog-mute); }
+.bk-before-after__card--after .bk-before-after__label { color:color-mix(in srgb, var(--blog-on-brand) 78%, transparent); }
+.bk-before-after__value { font-family:var(--blog-font-display); font-weight:800; font-size: var(--blog-fs-7xl); line-height:.9; margin:var(--blog-sp-2) 0; color:var(--blog-ink); }
+@media (min-width:640px){ .bk-before-after__value { font-size: var(--blog-fs-8xl); } }
+.bk-before-after__card--after .bk-before-after__value { color:var(--blog-on-brand); }
+.bk-before-after__body { font-family:var(--blog-font-body); font-size: var(--blog-fs-base); line-height:1.45; margin:var(--blog-sp-2) 0 0; color:var(--blog-text); }
+.bk-before-after__card--after .bk-before-after__body { color:color-mix(in srgb, var(--blog-on-brand) 85%, transparent); }
+
+/* ============================================================
+   ImageFeature — captioned figure with optional float (left/right/full)
+   Ported from capture-ai blog ImageFeature.tsx.
+   16/9 framed image, optional caption + credit footer.
+   ============================================================ */
+.bk-image-feature { margin: var(--blog-sp-7) 0; width: 100%; border: 1px solid var(--blog-border); border-radius: var(--blog-radius-xs); overflow: hidden; background: var(--blog-paper); }
+.bk-image-feature__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--blog-dark); }
+.bk-image-feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
+.bk-image-feature__caption { display: flex; justify-content: space-between; gap: var(--blog-sp-3); padding: var(--blog-sp-3) var(--blog-sp-4); border-top: 1px solid var(--blog-border); font-family: var(--blog-font-body); font-size: var(--blog-fs-sm); line-height: 1.5; color: var(--blog-mute); }
+.bk-image-feature__text { color: var(--blog-text); }
+.bk-image-feature__credit { color: var(--blog-mute); white-space: nowrap; }
+@media (min-width: 640px) {
+  .bk-image-feature--left { float: left; width: 50%; margin-right: var(--blog-sp-8); }
+  .bk-image-feature--right { float: right; width: 50%; margin-left: var(--blog-sp-8); }
+}
+
+/* ── Infographic ──────────────────────────────────────────────
+   AI-generated brand-locked infographic. Deliberately frameless,
+   borderless and caption-less — the image is the whole point and
+   renders at its natural aspect ratio so nothing is cropped. */
+.bk-infographic { margin: var(--blog-sp-7) 0; }
+.bk-infographic__img { display: block; width: 100%; height: auto; }
+
+/* ── CodeSnippet ─────────────────────────────────────────────
+   Canonical name: CodeSnippet
+   Dark code block with a header bar (filename/language label +
+   copy button) and a scrollable <pre>. The copy interaction is
+   handled by core/behaviors/code.js, wired via [data-bk-code].
+   All ink/surface colours key off the --blog-dark* / --blog-on-dark
+   tokens so it reads correctly on any tenant theme.
+   ──────────────────────────────────────────────────────────── */
+.bk-code {
+  margin: var(--blog-sp-6) 0;
+  border: 1px solid var(--blog-border-dark);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-dark);
+  overflow: hidden;
+}
+
+.bk-code__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--blog-sp-3);
+  padding: var(--blog-sp-2) var(--blog-sp-4);
+  background: var(--blog-dark-2);
+  border-bottom: 1px solid var(--blog-border-dark);
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-xs);
+  line-height: 1.4;
+}
+
+.bk-code__label {
+  color: var(--blog-on-dark);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bk-code__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-sp-1);
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--blog-brand);
+  font-family: var(--blog-font-display);
+  font-size: var(--blog-fs-eyebrow-sm);
+  font-weight: 700;
+  letter-spacing: var(--blog-tracking-wide);
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+.bk-code__copy:hover { color: var(--blog-brand-bright); }
+.bk-code__copy[data-copied="true"] { color: var(--blog-success); }
+
+.bk-code__copy-icon { display: inline-flex; }
+.bk-code__copy-icon svg { display: block; width: 13px; height: 13px; }
+
+.bk-code__pre {
+  margin: 0;
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  overflow-x: auto;
+  color: var(--blog-on-dark);
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-xs);
+  line-height: 1.6;
+  tab-size: 2;
+}
+
+.bk-code__code {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: none;
+  white-space: pre;
+}
+
+@media (min-width: 640px) {
+  .bk-code__pre {
+    padding: var(--blog-sp-4) var(--blog-sp-5);
+    font-size: var(--blog-fs-sm);
+  }
+}
+
+/* ── CTABanner ───────────────────────────────────────────────
+   Canonical name: CTABanner
+   Dark, full-bleed call-to-action banner with a brand-coloured
+   radial glow, heading + description, and a solid brand CTA link.
+   Ported from capture-ai's blog CTABanner (hardcoded #000 / #fff /
+   #FF4206 mapped to --blog-dark / --blog-on-dark / --blog-brand).
+   ──────────────────────────────────────────────────────────── */
+.bk-cta-banner {
+  position: relative;
+  overflow: hidden;
+  margin: var(--blog-sp-8) 0;
+  padding: var(--blog-sp-6);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-dark);
+  color: var(--blog-on-dark);
+}
+.bk-cta-banner__glow {
+  position: absolute;
+  top: -2.5rem;
+  right: -2.5rem;
+  width: 200px;
+  height: 200px;
+  border-radius: var(--blog-radius-pill);
+  pointer-events: none;
+  background: radial-gradient(
+    circle at 30% 30%,
+    color-mix(in srgb, var(--blog-brand) 40%, transparent),
+    transparent 60%
+  );
+}
+.bk-cta-banner__inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--blog-sp-4);
+}
+.bk-cta-banner__copy { min-width: 0; }
+.bk-cta-banner__heading {
+  margin: 0 0 var(--blog-sp-1);
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-2xl);
+  line-height: 1.1;
+  color: var(--blog-on-dark);
+}
+.bk-cta-banner__desc {
+  margin: 0;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  line-height: 1.5;
+  color: var(--blog-on-dark-mute);
+}
+.bk-cta-banner__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  gap: var(--blog-sp-2);
+  padding: var(--blog-sp-3) var(--blog-sp-5);
+  border-radius: var(--blog-radius-sm);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  font-size: var(--blog-fs-sm);
+  white-space: nowrap;
+  text-decoration: none;
+  background: var(--blog-brand);
+  color: var(--blog-on-brand);
+}
+.bk-cta-banner__cta:hover { background: var(--blog-brand-dark); }
+.bk-cta-banner__cta-icon svg {
+  display: block;
+  width: 14px;
+  height: 12px;
+}
+@media (min-width: 640px) {
+  .bk-cta-banner { padding: var(--blog-sp-8); }
+  .bk-cta-banner__glow {
+    top: -60px;
+    right: -60px;
+    width: 300px;
+    height: 300px;
+  }
+  .bk-cta-banner__inner {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--blog-sp-6);
+  }
+  .bk-cta-banner__cta { align-self: auto; }
+  .bk-cta-banner__heading { font-size: var(--blog-fs-4xl); }
+}
+
+/* ── NewsletterCTA ───────────────────────────────────────────
+   Canonical name: NewsletterCTA
+   Dark email-capture block: heading + description on one side, an
+   inline subscribe form (with visually-hidden honeypot) on the other.
+   A brand radial glow sits in the top-right corner. Form posts
+   natively to its `action`; the kit ships no client JS.
+   Ported from capture-ai's NewsletterCTA — #000 → --blog-dark,
+   #fff → --blog-on-dark, brand orange #FF4206 → --blog-brand,
+   white-70% copy → --blog-on-dark-mute.
+   ──────────────────────────────────────────────────────────── */
+.bk-newsletter {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--blog-sp-5);
+  align-items: center;
+  margin: var(--blog-sp-8) 0;
+  padding: var(--blog-sp-6);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-dark);
+  color: var(--blog-on-dark);
+}
+@media (min-width: 640px) {
+  .bk-newsletter { gap: var(--blog-sp-7); padding: var(--blog-sp-8); }
+}
+@media (min-width: 768px) {
+  .bk-newsletter { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
+}
+
+.bk-newsletter__glow {
+  position: absolute;
+  top: -2.5rem;
+  right: -2.5rem;
+  width: 200px;
+  height: 200px;
+  border-radius: var(--blog-radius-pill);
+  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--blog-brand) 40%, transparent), transparent 60%);
+  pointer-events: none;
+}
+@media (min-width: 640px) {
+  .bk-newsletter__glow { top: -60px; right: -60px; width: 300px; height: 300px; }
+}
+
+.bk-newsletter__copy { position: relative; }
+.bk-newsletter__heading {
+  margin: 0 0 var(--blog-sp-2);
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  font-size: var(--blog-fs-3xl);
+  line-height: 1.05;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-tight);
+  color: var(--blog-on-dark);
+}
+@media (min-width: 640px) {
+  .bk-newsletter__heading { font-size: var(--blog-fs-5xl); line-height: 1; }
+}
+.bk-newsletter__desc {
+  margin: 0;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  line-height: 1.5;
+  color: var(--blog-on-dark-mute);
+}
+
+.bk-newsletter__action { position: relative; }
+.bk-newsletter__form { display: flex; gap: var(--blog-sp-2); }
+
+.bk-newsletter__honeypot {
+  position: absolute;
+  left: -9999px;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bk-newsletter__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: var(--blog-sp-3) var(--blog-sp-3);
+  border: 1px solid var(--blog-paper);
+  border-radius: var(--blog-radius-sm);
+  background: var(--blog-paper);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  color: var(--blog-ink);
+  outline: none;
+}
+.bk-newsletter__input:focus-visible {
+  border-color: var(--blog-brand);
+  box-shadow: var(--blog-shadow-focus-ring);
+}
+.bk-newsletter__input::placeholder { color: var(--blog-mute); }
+
+.bk-newsletter__button {
+  flex: 0 0 auto;
+  padding: var(--blog-sp-3) var(--blog-sp-5);
+  border: 0;
+  border-radius: var(--blog-radius-sm);
+  background: var(--blog-brand);
+  color: var(--blog-on-brand);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.bk-newsletter__button:hover { background: var(--blog-brand-dark); }
+
+/* ============================================================
+   AuthorCard — .bk-author
+   Byline card: avatar (or initials fallback) + name / role / bio / links.
+   Ported from capture-ai blog AuthorCard; tokenised, self-contained.
+   ============================================================ */
+.bk-author { display:flex; align-items:center; gap:var(--blog-sp-3); margin:var(--blog-sp-6) 0; padding:var(--blog-sp-4) var(--blog-sp-4); background:var(--blog-bg-secondary); border:1px solid var(--blog-border); border-radius:var(--blog-radius-xs); }
+.bk-author__media { flex:0 0 auto; }
+.bk-author__avatar { display:block; width:56px; height:56px; border-radius:var(--blog-radius-pill); object-fit:cover; }
+.bk-author__avatar--fallback { display:flex; align-items:center; justify-content:center; background:var(--blog-brand-tint); color:var(--blog-brand); font-family:var(--blog-font-display); font-weight:800; font-size: var(--blog-fs-xl); text-transform:uppercase; letter-spacing:var(--blog-tracking-tight); }
+.bk-author__body { flex:1 1 auto; min-width:0; }
+.bk-author__name { margin:0; font-family:var(--blog-font-display); font-weight:800; text-transform:uppercase; font-size: var(--blog-fs-xl); line-height:1.2; color:var(--blog-ink); }
+.bk-author__role { margin:.125rem 0 0; font-family:var(--blog-font-body); font-size: var(--blog-fs-sm); color:var(--blog-mute); }
+.bk-author__bio { margin:var(--blog-sp-2) 0 0; font-family:var(--blog-font-body); font-size: var(--blog-fs-sm); line-height:1.5; color:var(--blog-text); }
+.bk-author__links { display:flex; flex-wrap:wrap; gap:var(--blog-sp-3); margin-top:var(--blog-sp-3); }
+.bk-author__link { font-family:var(--blog-font-display); font-weight:700; text-transform:uppercase; font-size: var(--blog-fs-eyebrow); letter-spacing:var(--blog-tracking-wide); color:var(--blog-brand); text-decoration:none; }
+.bk-author__link:hover { color:var(--blog-brand-dark); }
+@media (min-width:640px) { .bk-author { gap:var(--blog-sp-4); padding:var(--blog-sp-5) var(--blog-sp-5); } .bk-author__avatar { width:64px; height:64px; } }
+
+/* ============================================================
+   RelatedPosts — "Keep reading" grid of related-post cards.
+   Responsive 1/2/3-col grid; featured-image thumbnail with a
+   tokenised gradient placeholder fallback cycled per index.
+   ============================================================ */
+.bk-related { margin: var(--blog-sp-10) 0; }
+.bk-related__eyebrow { margin: 0 0 var(--blog-sp-3); font-family: var(--blog-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--blog-fs-sm); letter-spacing: var(--blog-tracking-wide); color: var(--blog-brand); }
+.bk-related__grid { display: grid; grid-template-columns: 1fr; gap: var(--blog-sp-3); }
+@media (min-width: 640px) { .bk-related__grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 1024px) { .bk-related__grid { grid-template-columns: repeat(3, 1fr); } }
+.bk-related__card { display: block; overflow: hidden; border: 1px solid var(--blog-border); border-radius: var(--blog-radius-xs); background: var(--blog-paper); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
+.bk-related__card:hover { box-shadow: var(--blog-shadow-lg); }
+.bk-related__thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--blog-bg-secondary); }
+.bk-related__thumb--g1 { background: linear-gradient(135deg, var(--blog-brand-dark), var(--blog-brand) 70%, var(--blog-brand-soft)); }
+.bk-related__thumb--g2 { background: linear-gradient(135deg, var(--blog-brand-dark), var(--blog-success)); }
+.bk-related__thumb--g3 { background: linear-gradient(135deg, var(--blog-dark), var(--blog-dark-3)); }
+.bk-related__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
+.bk-related__body { padding: var(--blog-sp-4); }
+.bk-related__cat { display: block; font-family: var(--blog-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--blog-fs-eyebrow-sm); letter-spacing: var(--blog-tracking-wide); color: var(--blog-brand); }
+.bk-related__title { margin: var(--blog-sp-1) 0 0; font-family: var(--blog-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--blog-fs-md); line-height: 1.25; color: var(--blog-ink); text-wrap: pretty; }
+.bk-related__excerpt { margin: var(--blog-sp-2) 0 0; font-family: var(--blog-font-body); font-size: var(--blog-fs-sm); line-height: 1.45; color: var(--blog-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* ── FurtherReading ──────────────────────────────────────────
+   Canonical name: FurtherReading
+   Card listing external resources. Each row: a title link (left)
+   + a source/publisher label (right). Rows are dashed-separated;
+   the last row drops its separator. Stacks on narrow viewports.
+   ──────────────────────────────────────────────────────────── */
+.bk-further-reading {
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  background: var(--blog-paper);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+}
+@media (min-width: 640px) {
+  .bk-further-reading { padding: var(--blog-sp-5) var(--blog-sp-6); }
+}
+
+.bk-further-reading__title {
+  display: flex;
+  align-items: center;
+  gap: var(--blog-sp-2);
+  margin: 0 0 var(--blog-sp-3);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-eyebrow);
+  color: var(--blog-brand);
+}
+
+.bk-further-reading__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.bk-further-reading__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--blog-sp-1);
+  padding: var(--blog-sp-2) 0;
+  border-bottom: 1px dashed var(--blog-border-light);
+}
+.bk-further-reading__item:last-child { border-bottom: none; }
+@media (min-width: 640px) {
+  .bk-further-reading__item {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--blog-sp-3);
+  }
+}
+
+.bk-further-reading__link {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  line-height: 1.5;
+  color: var(--blog-text);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+.bk-further-reading__link:hover { text-decoration: underline; }
+@media (min-width: 640px) {
+  .bk-further-reading__link { font-size: var(--blog-fs-md); }
+}
+
+.bk-further-reading__source {
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-mute);
+}
+@media (min-width: 640px) {
+  .bk-further-reading__source { white-space: nowrap; }
+}
+
+/* ── TableOfContents ─────────────────────────────────────────
+   Canonical name: TableOfContents
+   "In this article" nav. The <ul> is empty in markup — the toc
+   behaviour ([data-bk-toc]) scans the article for <h2>s, fills
+   the list with numbered entries, smooth-scrolls on click, and
+   flags the in-view heading with .bk-toc__link--active. The nav
+   hides itself (hidden attr) when there are no headings.
+   ──────────────────────────────────────────────────────────── */
+.bk-toc {
+  display: block;
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-bg-secondary);
+}
+.bk-toc[hidden] { display: none; }
+
+.bk-toc__heading {
+  margin: 0 0 var(--blog-sp-3);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-eyebrow);
+  color: var(--blog-brand);
+}
+
+.bk-toc__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bk-toc__item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--blog-sp-3);
+  padding: 0.625rem 0;
+  border-bottom: 1px dashed var(--blog-border-light);
+}
+.bk-toc__item:last-child { border-bottom: none; }
+
+.bk-toc__num {
+  flex: 0 0 auto;
+  width: 1.5rem;
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-xs);
+  color: var(--blog-mute);
+}
+
+.bk-toc__link {
+  flex: 1 1 auto;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-md);
+  line-height: 1.4;
+  text-decoration: none;
+  color: var(--blog-text);
+  transition: color 0.15s ease;
+}
+.bk-toc__link:hover { color: var(--blog-brand); }
+.bk-toc__link--active { color: var(--blog-brand); }
+
+/* ============================================================
+   TimelineBlock — vertical timeline / recap of dated milestones.
+   Ported from Capture AI's TimelineBlock (was TimelineRecap).
+   A 2px rail runs the height of the list; each event hangs a
+   ringed brand dot, a mono date, a display title and body copy.
+   ============================================================ */
+.bk-timeline { position: relative; padding-left: var(--blog-sp-6); margin: var(--blog-sp-6) 0; }
+.bk-timeline__rail { position: absolute; top: var(--blog-sp-2); bottom: var(--blog-sp-2); left: 6px; width: 2px; background: var(--blog-border); }
+.bk-timeline__item { position: relative; }
+.bk-timeline__item:not(:last-child) { padding-bottom: var(--blog-sp-5); }
+.bk-timeline__dot { position: absolute; left: calc(-1 * var(--blog-sp-6)); top: 6px; width: 14px; height: 14px; border-radius: var(--blog-radius-pill); background: var(--blog-brand); border: 3px solid var(--blog-paper); box-shadow: var(--blog-shadow-ring); }
+.bk-timeline__date { font-family: var(--blog-font-mono); font-size: var(--blog-fs-eyebrow); line-height: 1.4; text-transform: uppercase; letter-spacing: var(--blog-tracking-wide); color: var(--blog-brand); }
+.bk-timeline__title { margin: var(--blog-sp-1) 0 var(--blog-sp-1); font-family: var(--blog-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--blog-fs-lg); line-height: 1.3; color: var(--blog-ink); }
+.bk-timeline__desc { margin: 0; font-family: var(--blog-font-body); font-size: var(--blog-fs-base); line-height: 1.5; color: var(--blog-text); }
+
+/* ============================================================
+   StatCard (.bk-stat-card) — capture pack
+   A single highlighted metric: big brand-coloured number (+ optional
+   unit), an uppercase label, optional description, and an optional
+   dashed-divider "SOURCE" attribution row that links out when given a
+   URL. Ported from capture-ai's blog StatCard (+ inlined _SourceRow).
+   ============================================================ */
+.bk-stat-card {
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  background: var(--blog-paper);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-xs);
+}
+.bk-stat-card__value {
+  display: flex;
+  align-items: baseline;
+  font-family: var(--blog-font-display);
+  color: var(--blog-brand);
+}
+.bk-stat-card__num {
+  font-weight: 800;
+  font-size: var(--blog-fs-7xl);
+  line-height: .95;
+}
+.bk-stat-card__unit {
+  margin-left: .125rem;
+  font-weight: 500;
+  font-size: var(--blog-fs-2xl);
+}
+.bk-stat-card__label {
+  margin-top: var(--blog-sp-1);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-xs);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--blog-mute);
+}
+.bk-stat-card__desc {
+  margin-top: var(--blog-sp-1);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  line-height: 1.55;
+  color: var(--blog-mute);
+}
+.bk-stat-card__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-sp-1);
+  margin-top: var(--blog-sp-3);
+  padding-top: var(--blog-sp-2);
+  border-top: 1px dashed var(--blog-border);
+  font-family: var(--blog-font-display);
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: .04em;
+  color: var(--blog-mute);
+  opacity: .8;
+  text-decoration: none;
+  transition: opacity .15s ease, color .15s ease;
+}
+.bk-stat-card__source--link:hover {
+  opacity: 1;
+  color: var(--blog-brand);
+}
+.bk-stat-card__source-kicker {
+  margin-right: .125rem;
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow-sm);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--blog-mute-2);
+}
+.bk-stat-card__source-icon svg {
+  display: block;
+  width: 10px;
+  height: 10px;
+  opacity: .7;
+}
+
+/* ============================================================
+   VerdictCard — dark, brand-bordered verdict panel
+   Header: uppercase kicker + optional /10 score.
+   Body: optional winner pill, big verdict headline, summary,
+   and optional bullet chips. Ported from capture-ai's blog
+   VerdictCard (hardcoded #000 / #FF4206 mapped to tokens).
+   ============================================================ */
+.bk-verdict-card {
+  --_accent: var(--blog-brand-bright);
+  margin: var(--blog-sp-8) 0;
+  overflow: hidden;
+  color: var(--blog-on-dark);
+  background: var(--blog-dark);
+  border: 1px solid var(--_accent);
+  border-radius: var(--blog-radius-xs);
+  box-shadow: var(--blog-shadow-verdict);
+}
+.bk-verdict-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--blog-sp-3);
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  border-bottom: 1px solid color-mix(in srgb, var(--blog-on-dark) 10%, transparent);
+}
+.bk-verdict-card__kicker {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: var(--blog-tracking-eyebrow);
+  text-transform: uppercase;
+  color: var(--_accent);
+}
+.bk-verdict-card__score {
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  font-size: var(--blog-fs-4xl);
+  line-height: 1;
+  color: var(--_accent);
+}
+.bk-verdict-card__score-max {
+  font-size: var(--blog-fs-lg);
+  font-weight: 500;
+  color: color-mix(in srgb, var(--blog-on-dark) 50%, transparent);
+}
+.bk-verdict-card__body {
+  padding: var(--blog-sp-5);
+}
+.bk-verdict-card__winner {
+  margin: 0 0 var(--blog-sp-2);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: var(--blog-tracking-wide);
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--blog-on-dark) 50%, transparent);
+}
+.bk-verdict-card__winner-name {
+  color: var(--_accent);
+}
+.bk-verdict-card__verdict {
+  margin: 0 0 var(--blog-sp-2);
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  font-size: var(--blog-fs-2xl);
+  line-height: 1.05;
+  text-transform: uppercase;
+  color: var(--blog-on-dark);
+}
+.bk-verdict-card__summary {
+  margin: 0;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-md);
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--blog-on-dark) 80%, transparent);
+}
+.bk-verdict-card__bullets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--blog-sp-2);
+  margin-top: var(--blog-sp-4);
+}
+.bk-verdict-card__chip {
+  padding: var(--blog-sp-1) var(--blog-sp-3);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: var(--blog-tracking-wide);
+  text-transform: uppercase;
+  color: var(--blog-on-dark);
+  background: color-mix(in srgb, var(--_accent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--_accent) 40%, transparent);
+  border-radius: var(--blog-radius-pill);
+}
+@media (min-width: 640px) {
+  .bk-verdict-card__header { padding: var(--blog-sp-5) var(--blog-sp-6); }
+  .bk-verdict-card__score { font-size: var(--blog-fs-6xl); }
+  .bk-verdict-card__score-max { font-size: var(--blog-fs-xl); }
+  .bk-verdict-card__body { padding: var(--blog-sp-6); }
+  .bk-verdict-card__verdict { font-size: var(--blog-fs-4xl); line-height: 1; }
+}
+
+/* ── ScoreBar ────────────────────────────────────────────────
+   Canonical name: ScoreBar
+   A labelled rating row: uppercase label + numeric score + a
+   gradient-filled progress track. The fill width is set inline
+   (data-driven score/maxScore %); all colour/type/spacing here.
+   Responsive: wide viewports lay label/track/score on a
+   140px 1fr 48px grid; narrow viewports stack label+score above
+   a full-width track (matches the Capture source layout).
+   ──────────────────────────────────────────────────────────── */
+.bk-score-bar {
+  margin: var(--blog-sp-3) 0;
+}
+.bk-score-bar__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--blog-sp-3);
+}
+.bk-score-bar__label {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-xs);
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-mute);
+}
+.bk-score-bar__score {
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  font-size: var(--blog-fs-lg);
+  line-height: 1;
+  color: var(--blog-brand);
+}
+.bk-score-bar__track {
+  position: relative;
+  height: 8px;
+  margin-top: var(--blog-sp-2);
+  border-radius: var(--blog-radius-pill);
+  overflow: hidden;
+  background: var(--blog-bg-tertiary);
+}
+.bk-score-bar__fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  height: 100%;
+  border-radius: var(--blog-radius-pill);
+  background: linear-gradient(90deg, var(--blog-brand-bright), var(--blog-brand));
+  transition: width 0.7s ease-out;
+}
+@media (min-width: 640px) {
+  .bk-score-bar {
+    display: grid;
+    align-items: center;
+    gap: var(--blog-sp-3);
+    grid-template-columns: 140px 1fr 48px;
+  }
+  /* head dissolves so its children join the grid directly */
+  .bk-score-bar__head {
+    display: contents;
+  }
+  .bk-score-bar__score {
+    order: 3;
+    text-align: right;
+  }
+  .bk-score-bar__track {
+    order: 2;
+    margin-top: 0;
+  }
+}
+
+/* ============================================================
+   NumberedCard — card with a floating zero-padded number badge,
+   an uppercase display title, and a short body paragraph.
+   Ported from capture-ai blog _components/NumberedCard.
+   ============================================================ */
+.bk-numbered-card { position: relative; margin: var(--blog-sp-6) 0; padding: var(--blog-sp-5); background: var(--blog-paper); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-xs); }
+.bk-numbered-card__badge { position: absolute; top: calc(-1 * var(--blog-sp-3)); left: var(--blog-sp-5); display: inline-block; padding: var(--blog-sp-1) var(--blog-sp-2); background: var(--blog-brand); color: var(--blog-on-brand); border-radius: var(--blog-radius-pill); font-family: var(--blog-font-display); font-weight: 800; font-size: var(--blog-fs-base); letter-spacing: var(--blog-tracking-wide); line-height: 1; }
+.bk-numbered-card__title { margin: var(--blog-sp-2) 0 var(--blog-sp-1); font-family: var(--blog-font-display); font-weight: 800; font-size: var(--blog-fs-xl); text-transform: uppercase; color: var(--blog-ink); }
+.bk-numbered-card__body { margin: 0; font-family: var(--blog-font-body); font-size: var(--blog-fs-base); line-height: 1.5; color: var(--blog-text); }
+
+/* ── MetricHighlight ─────────────────────────────────────────
+   Canonical name: MetricHighlight
+   One metric → a big brand-filled hero (giant value + label +
+   optional change + SOURCE row). Two or more → a responsive grid
+   of bordered cards; column count comes from a
+   --metric-highlight--<n> modifier (2 | 3 | 4+).
+   Self-contained: its own dashed-divider source row (minor repetition
+   across components is preferred over shared cross-component classes).
+   ──────────────────────────────────────────────────────────── */
+.bk-metric-highlight { display: block; }
+
+/* —— hero (single metric) —— */
+.bk-metric-highlight--hero {
+  margin: var(--blog-sp-8) 0;
+  padding: var(--blog-sp-6) var(--blog-sp-5);
+  border-radius: var(--blog-radius-xs);
+  background: var(--blog-brand);
+  color: var(--blog-on-brand);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--blog-sp-4);
+}
+@media (min-width: 640px) {
+  .bk-metric-highlight--hero { padding: var(--blog-sp-10) var(--blog-sp-8); gap: var(--blog-sp-6); }
+}
+.bk-metric-highlight__hero-value {
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  line-height: .85;
+  font-size: var(--blog-fs-display);
+}
+.bk-metric-highlight__hero-body { flex: 1 1 0%; min-width: 0; }
+@media (min-width: 640px) { .bk-metric-highlight__hero-body { min-width: 260px; } }
+.bk-metric-highlight__hero-change {
+  font-family: var(--blog-font-body);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-sm);
+  letter-spacing: var(--blog-tracking-eyebrow);
+  color: color-mix(in srgb, var(--blog-on-brand) 72%, transparent);
+}
+@media (min-width: 640px) { .bk-metric-highlight__hero-change { font-size: var(--blog-fs-base); } }
+.bk-metric-highlight__hero-label {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-2xl);
+  line-height: 1.1;
+  margin-top: var(--blog-sp-1);
+}
+@media (min-width: 640px) { .bk-metric-highlight__hero-label { font-size: var(--blog-fs-3xl); } }
+
+/* —— grid (2+ metrics) —— */
+.bk-metric-highlight--grid {
+  display: grid;
+  gap: var(--blog-sp-3);
+  margin: var(--blog-sp-7) 0;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.bk-metric-highlight--2 { grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 640px) { .bk-metric-highlight--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 768px) {
+  .bk-metric-highlight--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .bk-metric-highlight--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+.bk-metric-highlight__card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--blog-sp-4);
+  border-radius: var(--blog-radius-xs);
+  border: 1px solid var(--blog-border);
+  background: var(--blog-paper);
+}
+@media (min-width: 640px) { .bk-metric-highlight__card { padding: var(--blog-sp-5); } }
+.bk-metric-highlight__value {
+  font-family: var(--blog-font-display);
+  font-weight: 800;
+  font-size: var(--blog-fs-5xl);
+  line-height: .95;
+  color: var(--blog-brand);
+}
+@media (min-width: 640px) { .bk-metric-highlight__value { font-size: var(--blog-fs-6xl); } }
+.bk-metric-highlight__label {
+  font-family: var(--blog-font-body);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  font-size: var(--blog-fs-xs);
+  margin-top: calc(var(--blog-sp-1) * 1.5);
+  color: var(--blog-mute);
+}
+.bk-metric-highlight__change {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  margin-top: var(--blog-sp-1);
+  color: var(--blog-mute);
+}
+.bk-metric-highlight__source-wrap { margin-top: auto; }
+
+/* —— source attribution row (dashed divider, links out) —— */
+.bk-metric-highlight__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-sp-1);
+  margin-top: calc(var(--blog-sp-1) * 3.5);
+  padding-top: calc(var(--blog-sp-1) * 2.5);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: var(--blog-tracking-wide);
+  text-decoration: none;
+  opacity: .8;
+  color: var(--blog-mute);
+  border-top: 1px dashed var(--blog-border);
+}
+.bk-metric-highlight__source--dark {
+  color: color-mix(in srgb, var(--blog-on-brand) 75%, transparent);
+  border-top-color: color-mix(in srgb, var(--blog-on-brand) 18%, transparent);
+}
+.bk-metric-highlight__source--link { transition: opacity .15s, color .15s; }
+.bk-metric-highlight__source--link:hover { opacity: 1; color: var(--blog-brand); }
+.bk-metric-highlight__source-kicker {
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-eyebrow-sm);
+  letter-spacing: var(--blog-tracking-eyebrow);
+  margin-right: 2px;
+  color: var(--blog-mute);
+}
+.bk-metric-highlight__source--dark .bk-metric-highlight__source-kicker {
+  color: color-mix(in srgb, var(--blog-on-brand) 55%, transparent);
+}
+.bk-metric-highlight__source-icon svg { display: block; width: 10px; height: 10px; opacity: .7; }
+
+/* ============================================================
+   CaseStudyHero (.bk-case-study-hero) — hjd pack
+   A dark case-study banner: a light logo plate (client logo image,
+   an HTML/text wordmark, or the auto-broken client name) beside a
+   body with uppercase chips, a headline, a sub-line, and a row of
+   brand-coloured result tiles (big number + uppercase label).
+   Ported from hjd's blog CaseStudyHero (.b-cs). The cyan/dark night
+   theme (#052230→#010E14 gradient, #fff text, #10C8F0 cyan results)
+   is mapped to neutral tokens: dark gradient → --blog-dark-3/-2/dark,
+   text → --blog-on-dark(/-mute), logo plate → --blog-paper/--blog-ink,
+   cyan result tiles → --blog-brand (+ tint/border via color-mix).
+   ============================================================ */
+.bk-case-study-hero {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--blog-sp-8);
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-8);
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--blog-radius-md);
+  background: radial-gradient(
+    120% 140% at 88% 110%,
+    var(--blog-dark-3) 0%,
+    var(--blog-dark-2) 45%,
+    var(--blog-dark) 100%
+  );
+  color: var(--blog-on-dark);
+}
+.bk-case-study-hero__logo {
+  width: 140px;
+  height: 140px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--blog-sp-4);
+  border-radius: var(--blog-radius-lg);
+  background: var(--blog-paper);
+}
+.bk-case-study-hero__logo strong {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-2xl);
+  line-height: 1;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-ink);
+}
+.bk-case-study-hero__logo img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
+.bk-case-study-hero__body {
+  position: relative;
+  min-width: 0;
+}
+.bk-case-study-hero__chips {
+  display: flex;
+  gap: var(--blog-sp-2);
+  flex-wrap: wrap;
+  margin-bottom: var(--blog-sp-2);
+}
+.bk-case-study-hero__chip {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  font-size: var(--blog-fs-eyebrow);
+  padding: 5px 11px;
+  border-radius: var(--blog-radius-pill);
+  background: color-mix(in srgb, var(--blog-on-dark) 8%, transparent);
+  color: color-mix(in srgb, var(--blog-on-dark) 85%, transparent);
+  border: 1px solid color-mix(in srgb, var(--blog-on-dark) 12%, transparent);
+}
+.bk-case-study-hero__heading {
+  margin: 0;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-6xl);
+  line-height: 1.05;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-tight);
+  color: var(--blog-on-dark);
+}
+.bk-case-study-hero__sub {
+  margin: var(--blog-sp-2) 0 var(--blog-sp-4);
+  font-family: var(--blog-font-body);
+  line-height: 1.55;
+  color: var(--blog-on-dark-mute);
+}
+.bk-case-study-hero__results {
+  display: flex;
+  gap: var(--blog-sp-3);
+  flex-wrap: wrap;
+}
+.bk-case-study-hero__result {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  border-radius: var(--blog-radius-md);
+  background: color-mix(in srgb, var(--blog-brand) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--blog-brand) 40%, transparent);
+}
+.bk-case-study-hero__result-num {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-2xl);
+  line-height: 1;
+  color: var(--blog-brand);
+}
+.bk-case-study-hero__result-label {
+  margin-top: var(--blog-sp-1);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  font-size: var(--blog-fs-eyebrow-sm);
+  color: var(--blog-on-dark-mute);
+}
+@media (max-width: 640px) {
+  .bk-case-study-hero {
+    grid-template-columns: 1fr;
+    gap: var(--blog-sp-5);
+    padding: var(--blog-sp-6);
+  }
+  .bk-case-study-hero__logo {
+    width: 96px;
+    height: 96px;
+  }
+  .bk-case-study-hero__heading { font-size: var(--blog-fs-4xl); }
+}
+
+/* ============================================================
+   ResultsStrip — horizontal strip of bordered KPI cells.
+   Each cell: uppercase label, big brand number, optional mono
+   delta (green up / red down), optional dashed-divider SOURCE
+   row. Collapses to 2-up on narrow screens.
+   hjd source maps: cyan → --blog-brand, line-2 → --blog-border,
+   white cell → --blog-paper, mute → --blog-mute, cyan-deep
+   hover → --blog-brand-dark, success/danger → state tokens.
+   ============================================================ */
+.bk-results-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  margin: calc(var(--blog-sp-1) * 3) 0;
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-md);
+  overflow: hidden;
+}
+@media (max-width: 700px) {
+  .bk-results-strip { grid-template-columns: 1fr 1fr; }
+}
+.bk-results-strip__cell {
+  padding: var(--blog-sp-3) calc(var(--blog-sp-1) * 2.75);
+  background: var(--blog-paper);
+  border-right: 1px solid var(--blog-border);
+}
+.bk-results-strip__cell:last-child { border-right: none; }
+@media (max-width: 700px) {
+  /* in a 2-col grid, clear the right border on the right column */
+  .bk-results-strip__cell:nth-child(2n) { border-right: none; }
+}
+.bk-results-strip__label {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  font-size: var(--blog-fs-eyebrow);
+  color: var(--blog-mute);
+}
+.bk-results-strip__num {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-6xl);
+  line-height: 1;
+  color: var(--blog-brand);
+  margin-top: 6px;
+}
+.bk-results-strip__delta {
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-eyebrow);
+  color: var(--blog-success);
+  margin-top: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.bk-results-strip__delta--down { color: var(--blog-danger); }
+
+/* —— source attribution row (dashed divider, links out) —— */
+.bk-results-strip__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-sp-1);
+  margin-top: calc(var(--blog-sp-1) * 1.5);
+  padding-top: var(--blog-sp-1);
+  border-top: 1px dashed var(--blog-border);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: var(--blog-tracking-wide);
+  text-decoration: none;
+  opacity: .85;
+  color: var(--blog-mute);
+}
+.bk-results-strip__source--link { transition: opacity .15s, color .15s; }
+.bk-results-strip__source--link:hover { opacity: 1; color: var(--blog-brand-dark); }
+.bk-results-strip__source-kicker {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-eyebrow-sm);
+  letter-spacing: var(--blog-tracking-eyebrow);
+  margin-right: 2px;
+  color: var(--blog-mute);
+}
+.bk-results-strip__source-icon svg { display: block; width: 10px; height: 10px; opacity: .7; }
+
+/* ============================================================
+   KeyMetric (.bk-key-metric) — hjd pack
+   A dark, full-width hero metric panel: one oversized brand-coloured
+   number alongside a copy column (uppercase label, rich-text title,
+   sub-line) and an optional dashed-divider "SOURCE" attribution row
+   that links out when a URL is given. Ported from hjd's blog KeyMetric
+   (+ inlined .b-stat-src override); cyan (#10C8F0) mapped to --blog-brand,
+   the dark radial gradient (#052230/#021821/#010E14) to the --blog-dark
+   surfaces, and white/rgba text to --blog-on-dark tokens.
+   ============================================================ */
+.bk-key-metric {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--blog-sp-8);
+  position: relative;
+  overflow: hidden;
+  margin: var(--blog-sp-7) 0;
+  padding: var(--blog-sp-12) var(--blog-sp-10);
+  border-radius: var(--blog-radius-md);
+  background: radial-gradient(120% 140% at 88% 110%, var(--blog-dark) 0%, var(--blog-dark-2) 45%, var(--blog-dark-3) 100%);
+  color: var(--blog-on-dark);
+}
+.bk-key-metric__num {
+  position: relative;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-display-2);
+  line-height: .85;
+  letter-spacing: -.02em;
+  color: var(--blog-brand);
+}
+.bk-key-metric__copy {
+  position: relative;
+  flex: 1;
+  min-width: 260px;
+}
+/* Narrow screens: drop the 260px floor (it overflows the padded card under
+   ~360px) and ease the generous padding so the panel fits. */
+@media (max-width: 640px) {
+  .bk-key-metric { padding: var(--blog-sp-6) var(--blog-sp-5); }
+  .bk-key-metric__copy { min-width: 0; }
+}
+.bk-key-metric__label {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-base);
+  letter-spacing: .08em;
+  color: var(--blog-brand);
+}
+.bk-key-metric__title {
+  margin: var(--blog-sp-1) 0 0;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-3xl);
+  line-height: 1.15;
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-tight);
+  color: var(--blog-on-dark);
+}
+.bk-key-metric__sub {
+  margin-top: var(--blog-sp-2);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  line-height: 1.55;
+  color: var(--blog-on-dark-mute);
+}
+.bk-key-metric__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--blog-sp-1);
+  margin-top: var(--blog-sp-3);
+  padding-top: var(--blog-sp-2);
+  border-top: 1px dashed color-mix(in srgb, var(--blog-on-dark) 18%, transparent);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-eyebrow);
+  letter-spacing: .04em;
+  color: color-mix(in srgb, var(--blog-on-dark) 65%, transparent);
+  text-decoration: none;
+  opacity: .9;
+  transition: opacity .15s ease, color .15s ease;
+}
+.bk-key-metric__source--link:hover {
+  opacity: 1;
+  color: var(--blog-on-dark);
+}
+.bk-key-metric__source-kicker {
+  margin-right: .125rem;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-eyebrow-sm);
+  letter-spacing: .08em;
+  color: color-mix(in srgb, var(--blog-on-dark) 50%, transparent);
+}
+.bk-key-metric__source-icon svg {
+  display: block;
+  width: 10px;
+  height: 10px;
+}
+
+/* ============================================================
+   KeywordTable — SEO keyword-ranking table
+   Faithful port of hjd .b-kw, tokenised. Columns: keyword, search
+   volume, a colour-coded difficulty pill (low/med/high via the
+   state tokens), before/after rank positions (mono), and a coloured
+   up/down rank-change delta with a ▲/▼ glyph. Overflows horizontally
+   on narrow viewports; the [data-bk-keyword-table] behaviour toggles
+   edge-fade hint classes when the scroll container can scroll.
+   hjd mapping: --hjd-line-2 → --blog-border, --hjd-mist →
+   --blog-bg-secondary, --hjd-r-md → --blog-radius-md, difficulty
+   pill colours → --blog-success/-warn/-danger (+ -bg).
+   ──────────────────────────────────────────────────────────── */
+.bk-keyword-table {
+  position: relative;
+  margin: var(--blog-sp-7) 0;
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-md);
+  background: var(--blog-paper);
+  overflow: hidden;
+}
+.bk-keyword-table__scroll { overflow-x: auto; border-radius: inherit; }
+.bk-keyword-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+}
+.bk-keyword-table__th {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  text-align: left;
+  border-bottom: 1px solid var(--blog-border);
+  background: var(--blog-bg-secondary);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-ink);
+  white-space: nowrap;
+}
+.bk-keyword-table__td {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  text-align: left;
+  border-bottom: 1px solid var(--blog-border);
+  color: var(--blog-text);
+  white-space: nowrap;
+}
+.bk-keyword-table__th--r,
+.bk-keyword-table__td--r { text-align: right; }
+.bk-keyword-table__tr:last-child .bk-keyword-table__td { border-bottom: none; }
+
+.bk-keyword-table__td--kw {
+  font-family: var(--blog-font-display);
+  font-weight: 600;
+  color: var(--blog-ink);
+  letter-spacing: var(--blog-tracking-tight);
+  white-space: normal;
+}
+.bk-keyword-table__rank { font-family: var(--blog-font-mono); }
+
+/* Difficulty pill — low / med / high via the neutral state tokens. */
+.bk-keyword-table__diff {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--blog-radius-xs);
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-eyebrow);
+}
+.bk-keyword-table__diff--low { background: var(--blog-success-bg); color: var(--blog-success); }
+.bk-keyword-table__diff--med { background: var(--blog-warn-bg); color: var(--blog-warn); }
+.bk-keyword-table__diff--high { background: var(--blog-danger-bg); color: var(--blog-danger); }
+
+/* Rank-change delta — coloured by direction, with a leading arrow glyph. */
+.bk-keyword-table__delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-xs);
+  font-weight: 700;
+  color: var(--blog-success);
+}
+.bk-keyword-table__delta--up::before { content: "\25B2"; font-size: var(--blog-fs-eyebrow-sm); }
+.bk-keyword-table__delta--down { color: var(--blog-danger); }
+.bk-keyword-table__delta--down::before { content: "\25BC"; font-size: var(--blog-fs-eyebrow-sm); }
+
+/* Scroll-edge hint fades, toggled by the behaviour on overflow. */
+.bk-keyword-table::before,
+.bk-keyword-table::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--blog-sp-6);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 1;
+}
+.bk-keyword-table::before {
+  left: 0;
+  background: linear-gradient(to right, var(--blog-paper), transparent);
+}
+.bk-keyword-table::after {
+  right: 0;
+  background: linear-gradient(to left, var(--blog-paper), transparent);
+}
+.bk-keyword-table--hint-left::before { opacity: 1; }
+.bk-keyword-table--hint-right::after { opacity: 1; }
+
+/* ============================================================
+   ChannelMixBars (.bk-channel-mix) — hjd pack
+   A horizontal bar breakdown of one metric across channels:
+   an uppercase brand heading + optional total, then one labelled
+   row per channel with a proportional fill and a right-aligned
+   value. The first row uses the brand fill; subsequent rows step
+   through a neutral colour ramp. Ported from hjd-website's blog
+   ChannelMixBars (cyan/dark source mapped to neutral tokens).
+   ============================================================ */
+.bk-channel-mix {
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  background: var(--blog-paper);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-md);
+}
+.bk-channel-mix__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: var(--blog-sp-3);
+}
+.bk-channel-mix__title {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-sm);
+  letter-spacing: .08em;
+  color: var(--blog-brand);
+}
+.bk-channel-mix__total {
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-xs);
+  color: var(--blog-mute);
+}
+.bk-channel-mix__row {
+  display: grid;
+  grid-template-columns: 120px 1fr 80px;
+  gap: var(--blog-sp-2);
+  align-items: center;
+  padding: var(--blog-sp-1) 0;
+}
+/* Narrow screens: lift the channel name onto its own row so the bar + value
+   keep usable width instead of crushing against two fixed columns. */
+@media (max-width: 600px) {
+  .bk-channel-mix__row { grid-template-columns: 1fr auto; }
+  .bk-channel-mix__name { grid-column: 1 / -1; }
+}
+.bk-channel-mix__name {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: var(--blog-fs-xs);
+  letter-spacing: .04em;
+  color: var(--blog-ink);
+}
+.bk-channel-mix__bar {
+  height: 14px;
+  background: var(--blog-bg-tertiary);
+  border-radius: var(--blog-radius-xs);
+  position: relative;
+  overflow: hidden;
+}
+.bk-channel-mix__fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--blog-brand);
+  border-radius: var(--blog-radius-xs);
+}
+.bk-channel-mix__fill--2 { background: var(--blog-brand-dark); }
+.bk-channel-mix__fill--3 { background: var(--blog-dark); }
+.bk-channel-mix__fill--4 { background: var(--blog-mute); }
+.bk-channel-mix__fill--5 { background: var(--blog-mute-2); }
+.bk-channel-mix__val {
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-xs);
+  color: var(--blog-ink);
+  text-align: right;
+}
+
+/* ── TrafficChart ─────────────────────────────────────────────────────────
+   Compact SVG line chart comparing a current vs previous series over time.
+   Ported from hjd-website's blog TrafficChart (.b-tc). Cyan #10C8F0 → --blog-brand,
+   greys (#ADADAD / #6B7280 / #EDEFF2) → --blog-mute-2 / --blog-mute / --blog-border-light,
+   white card → --blog-paper, --hjd-line-2 → --blog-border. All colours live on
+   .bk-traffic-chart classes (SVG strokes/fills via CSS), so the same chart renders
+   orange on Capture and cyan on HJD purely through tokens. */
+.bk-traffic-chart { margin: var(--blog-sp-6) 0; padding: var(--blog-sp-6); border: 1px solid var(--blog-border); border-radius: var(--blog-radius-md); background: var(--blog-paper); }
+.bk-traffic-chart__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--blog-sp-3); margin-bottom: var(--blog-sp-3); }
+.bk-traffic-chart__title { font-family: var(--blog-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--blog-fs-xl); letter-spacing: var(--blog-tracking-tight); color: var(--blog-ink); }
+.bk-traffic-chart__legend { display: flex; gap: var(--blog-sp-4); }
+.bk-traffic-chart__item { display: inline-flex; align-items: center; gap: var(--blog-sp-2); font-family: var(--blog-font-body); font-size: var(--blog-fs-xs); color: var(--blog-mute); }
+.bk-traffic-chart__dot { width: 10px; height: 2px; background: var(--blog-brand); border-radius: 2px; }
+.bk-traffic-chart__dot--prev { height: 0; background: transparent; border-top: 2px dashed var(--blog-mute-2); border-radius: 0; }
+.bk-traffic-chart__svg { display: block; width: 100%; height: auto; font-family: var(--blog-font-mono); font-size: var(--blog-fs-eyebrow-sm); }
+.bk-traffic-chart__axis { stroke: var(--blog-border-light); stroke-width: 1; }
+.bk-traffic-chart__line { fill: none; stroke: var(--blog-brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
+.bk-traffic-chart__line--prev { stroke: var(--blog-mute-2); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: butt; }
+.bk-traffic-chart__pt { fill: var(--blog-brand); }
+.bk-traffic-chart__labels text { fill: var(--blog-mute); }
+
+/* ============================================================
+   SerpPreview (.bk-serp-preview) — hjd pack
+   A mock search-engine results page: a rounded "search bar"
+   showing the query, then a stack of result rows (URL
+   breadcrumb, blue heading, snippet) with an optional
+   "Sponsored" tag for ad results. Ported from hjd's b-serp
+   (--hjd-mist→bg-secondary, --hjd-line-2→border, #fff→paper,
+   --hjd-cyan→brand, --hjd-night→on-brand, #0a4280 Google-blue
+   link→--blog-info, #3E444A/--hjd-ink-3→mute-2).
+   ============================================================ */
+.bk-serp-preview {
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-6);
+  background: var(--blog-bg-secondary);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-sm);
+}
+.bk-serp-preview__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--blog-sp-2);
+  padding: var(--blog-sp-2) var(--blog-sp-4);
+  background: var(--blog-paper);
+  border-radius: var(--blog-radius-pill);
+  box-shadow: var(--blog-shadow-sm);
+}
+.bk-serp-preview__bar-icon {
+  flex-shrink: 0;
+  color: var(--blog-mute);
+}
+.bk-serp-preview__bar-icon svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+.bk-serp-preview__input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: none;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  color: var(--blog-ink);
+}
+.bk-serp-preview__results {
+  margin-top: var(--blog-sp-4);
+  padding: 0 var(--blog-sp-1);
+}
+.bk-serp-preview__result {
+  padding: var(--blog-sp-3) 0;
+  border-bottom: 1px dashed var(--blog-border);
+}
+.bk-serp-preview__result:last-child {
+  border-bottom: none;
+}
+.bk-serp-preview__tag {
+  display: inline-block;
+  margin-right: var(--blog-sp-2);
+  padding: 1px 6px;
+  border-radius: var(--blog-radius-xs);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow-sm);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+.bk-serp-preview__tag--ad {
+  background: var(--blog-brand);
+  color: var(--blog-on-brand);
+}
+.bk-serp-preview__url {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-mute-2);
+}
+.bk-serp-preview__url strong {
+  color: var(--blog-ink);
+}
+.bk-serp-preview__heading {
+  margin: var(--blog-sp-1) 0;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-xl);
+  line-height: 1.3;
+  color: var(--blog-info);
+}
+.bk-serp-preview__heading:hover {
+  text-decoration: underline;
+}
+.bk-serp-preview__desc {
+  margin: 0;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  line-height: 1.4;
+  color: var(--blog-mute-2);
+}
+.bk-serp-preview__desc em {
+  font-style: normal;
+  font-weight: 600;
+  color: var(--blog-ink);
+}
+
+/* ── AdPreview ───────────────────────────────────────────────
+   Mock paid-ad creative in two platform styles. Ported from hjd's
+   .b-ad: cyan/dark mapped to neutral tokens (cyan → --blog-brand,
+   night → --blog-dark, #fff → --blog-paper, mist → --blog-bg-secondary,
+   greys → ink/border tokens). The Google link-blue (#0a4280) maps to
+   --blog-info to match SerpPreview. */
+.bk-ad-preview {
+  padding: 0;
+  border: 1px solid var(--blog-border-light);
+  border-radius: var(--blog-radius-md);
+  background: var(--blog-paper);
+  overflow: hidden;
+  margin: var(--blog-sp-6) 0;
+}
+.bk-ad-preview__head {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  display: flex;
+  align-items: center;
+  gap: var(--blog-sp-3);
+  border-bottom: 1px solid var(--blog-border-light);
+}
+.bk-ad-preview__avatar {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  border-radius: var(--blog-radius-pill);
+  background: var(--blog-dark);
+  color: var(--blog-brand);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--blog-fs-sm);
+}
+.bk-ad-preview__brand {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-text);
+  letter-spacing: var(--blog-tracking-tight);
+}
+.bk-ad-preview__sponsored {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-eyebrow);
+  color: var(--blog-mute);
+}
+.bk-ad-preview__copy {
+  padding: var(--blog-sp-4);
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+  color: var(--blog-text);
+  line-height: 1.55;
+}
+.bk-ad-preview__media {
+  aspect-ratio: 1.91 / 1;
+  background: linear-gradient(135deg, var(--blog-dark), var(--blog-brand-dark) 65%, var(--blog-brand));
+  position: relative;
+}
+.bk-ad-preview__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.bk-ad-preview__cta {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  background: var(--blog-bg-secondary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--blog-sp-3);
+  border-top: 1px solid var(--blog-border-light);
+}
+.bk-ad-preview__site {
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-eyebrow);
+  color: var(--blog-mute);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.bk-ad-preview__site strong { color: var(--blog-text); }
+.bk-ad-preview__btn {
+  background: var(--blog-brand);
+  color: var(--blog-on-brand);
+  border: none;
+  border-radius: var(--blog-radius-sm);
+  padding: 7px 14px;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: var(--blog-fs-eyebrow);
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+/* ── Google search-ad variant ── */
+.bk-ad-preview--google {
+  padding: 18px 20px;
+  overflow: visible;
+}
+.bk-ad-preview__g-head {
+  display: flex;
+  gap: var(--blog-sp-2);
+  align-items: center;
+  margin-bottom: 6px;
+}
+.bk-ad-preview__g-tag {
+  font-family: var(--blog-font-display);
+  font-size: var(--blog-fs-eyebrow);
+  font-weight: 700;
+  color: var(--blog-dark);
+  background: var(--blog-paper);
+  border: 1px solid var(--blog-dark);
+  border-radius: var(--blog-radius-xs);
+  padding: 1px 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.bk-ad-preview__g-dot {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-mute);
+}
+.bk-ad-preview__g-site {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-mute-2);
+}
+.bk-ad-preview__g-url {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-mute-2);
+  margin-top: 6px;
+}
+.bk-ad-preview__g-url strong { color: var(--blog-text); }
+.bk-ad-preview__g-headline {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-xl);
+  color: var(--blog-info);
+  margin: 4px 0;
+  line-height: 1.3;
+  cursor: pointer;
+}
+.bk-ad-preview__g-desc {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-mute-2);
+  line-height: 1.4;
+  margin: 0;
+}
+.bk-ad-preview__g-sitelinks {
+  display: flex;
+  gap: var(--blog-sp-4);
+  margin-top: var(--blog-sp-2);
+  padding-top: var(--blog-sp-2);
+  border-top: 1px dashed var(--blog-border-light);
+}
+.bk-ad-preview__g-sitelink {
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-xs);
+  color: var(--blog-info);
+}
+@media (max-width: 700px) {
+  .bk-ad-preview__cta { flex-wrap: wrap; }
+}
+
+/* ── AdPreviewPair ─────────────────────────────────────────────
+   hjd b-ads → tokenised. A layout-only container: two ad mockups
+   side by side, collapsing to one column on narrow screens. The
+   hjd source had no colours of its own, so only spacing tokens. */
+.bk-ad-preview-pair { display:grid; grid-template-columns:1fr; gap:var(--blog-sp-3); margin:var(--blog-sp-6) 0; align-items:start; }
+@media (min-width:768px){ .bk-ad-preview-pair { grid-template-columns:1fr 1fr; } }
+
+/* ============================================================
+   AuditScores (.bk-audit-scores) — hjd pack
+   A responsive row of semicircular score gauges (0–100). Each card
+   draws a faint neutral track arc plus a tone-coloured progress arc
+   whose sweep is computed (in the wrapper) from the score, a big
+   tone-coloured number, an uppercase label, and an optional sub-line.
+   Tone (good / warn / bad) is expressed purely as a token-driven
+   `--_c` custom property on the card modifier; the arc + number both
+   inherit it, so the SAME component renders in each pack's brand
+   colour for a passing score. Ported from hjd's blog AuditScores —
+   hardcoded #10C8F0 / #FFB020 / #F04D4D mapped to --blog-brand /
+   --blog-warn / --blog-danger, the #EDEFF2 track to --blog-bg-tertiary,
+   and the #fff card to --blog-paper.
+   ============================================================ */
+.bk-audit-scores {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--blog-sp-3);
+  margin: var(--blog-sp-6) 0;
+}
+@media (max-width: 700px) {
+  .bk-audit-scores { grid-template-columns: 1fr; }
+}
+.bk-audit-scores__card {
+  --_c: var(--blog-brand);
+  padding: var(--blog-sp-5);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-md);
+  background: var(--blog-paper);
+  text-align: center;
+}
+.bk-audit-scores__card--warn { --_c: var(--blog-warn); }
+.bk-audit-scores__card--bad  { --_c: var(--blog-danger); }
+.bk-audit-scores__gauge {
+  display: block;
+  width: 140px;
+  height: 84px;
+  margin: 0 auto var(--blog-sp-2);
+}
+.bk-audit-scores__track {
+  stroke: var(--blog-bg-tertiary);
+}
+.bk-audit-scores__arc {
+  stroke: var(--_c);
+}
+.bk-audit-scores__num {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-6xl);
+  line-height: 1;
+  color: var(--_c);
+}
+.bk-audit-scores__label {
+  margin-top: var(--blog-sp-2);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--blog-ink);
+}
+.bk-audit-scores__sub {
+  margin-top: .125rem;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-xs);
+  color: var(--blog-mute);
+}
+
+/* ============================================================
+   AuditFindings (.bk-audit-findings) — hjd pack
+   A bordered, divided list of audit findings. Each row leads with a
+   small severity dot (high / med / low), then a title + description
+   block, and a pill-shaped count on the right. Severity tone is a
+   token-driven CSS class (the dot colour resolves to the matching
+   state token) so the SAME component renders in each pack's palette.
+   Ported from hjd's blog AuditFindings (b-saf; #fff panel +
+   #F04D4D / #FFB020 / good-green dots + greys mapped to tokens).
+   ============================================================ */
+.bk-audit-findings {
+  margin: var(--blog-sp-6) 0;
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-md);
+  overflow: hidden;
+  background: var(--blog-paper);
+}
+.bk-audit-findings__row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--blog-sp-4);
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  border-bottom: 1px solid var(--blog-border);
+  align-items: center;
+}
+.bk-audit-findings__row:last-child {
+  border-bottom: none;
+}
+.bk-audit-findings__sev {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--blog-radius-pill);
+  flex-shrink: 0;
+}
+.bk-audit-findings__sev--high { background: var(--blog-danger); }
+.bk-audit-findings__sev--med { background: var(--blog-warn); }
+.bk-audit-findings__sev--low { background: var(--blog-success); }
+.bk-audit-findings__title {
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-base);
+  color: var(--blog-ink);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+}
+.bk-audit-findings__desc {
+  margin-top: 2px;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  line-height: 1.5;
+  color: var(--blog-mute);
+}
+.bk-audit-findings__count {
+  font-family: var(--blog-font-mono);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-ink);
+  padding: 4px 10px;
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-pill);
+}
+
+/* ────────────────────────────────────────────────────────────
+   Canonical name: DeliveryComparison
+   A flexible N-column comparison matrix. A header row of column
+   labels (the first header cell is blank, sitting above the
+   row-label column), then one row per criterion: a bold row label
+   with optional sub-text followed by one cell per column. The
+   table overflows its container on narrow viewports; the
+   [data-bk-delivery-comparison] behaviour toggles edge-fade hint
+   classes when it can scroll left/right (the hidden-horizontal-
+   scroll trap). Ported from hjd-website's blog DeliveryComparison;
+   cyan/dark source mapped to neutral --blog-* tokens.
+   ──────────────────────────────────────────────────────────── */
+.bk-delivery-comparison {
+  margin: var(--blog-sp-7) 0;
+  position: relative;
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-sm);
+  background: var(--blog-paper);
+  overflow: hidden;
+}
+.bk-delivery-comparison__scroll { overflow-x: auto; border-radius: inherit; }
+.bk-delivery-comparison__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-base);
+}
+.bk-delivery-comparison__th {
+  text-align: left;
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  background: var(--blog-bg-secondary);
+  border-bottom: 1px solid var(--blog-border);
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-mute);
+  white-space: nowrap;
+}
+.bk-delivery-comparison__td {
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  border-bottom: 1px solid var(--blog-border);
+  text-align: left;
+  vertical-align: top;
+  line-height: 1.5;
+  color: var(--blog-text);
+}
+.bk-delivery-comparison__tr:last-child .bk-delivery-comparison__td { border-bottom: none; }
+.bk-delivery-comparison__label {
+  display: block;
+  margin-bottom: 2px;
+  font-weight: 700;
+  color: var(--blog-ink);
+}
+
+/* Scroll-edge hint fades, toggled by the behaviour on overflow. */
+.bk-delivery-comparison::before,
+.bk-delivery-comparison::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--blog-sp-6);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 1;
+}
+.bk-delivery-comparison::before {
+  left: 0;
+  background: linear-gradient(to right, var(--blog-paper), transparent);
+}
+.bk-delivery-comparison::after {
+  right: 0;
+  background: linear-gradient(to left, var(--blog-paper), transparent);
+}
+.bk-delivery-comparison--hint-left::before { opacity: 1; }
+.bk-delivery-comparison--hint-right::after { opacity: 1; }
+
+/* ============================================================
+   RegionCallout — bordered grid of office / region cells, each
+   pairing a flag/colour swatch with an uppercase office name and
+   a brand-coloured monospace phone number. Ported from hjd
+   (.b-region): cyan phone (--hjd-cyan) → --blog-brand, #fff cells
+   → --blog-paper, --hjd-mist swatch → --blog-bg-tertiary, greys
+   → border/ink tokens, --hjd-r-md → --blog-radius-md.
+   ============================================================ */
+.bk-region-callout { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:var(--blog-sp-6) 0; border:1px solid var(--blog-border); border-radius:var(--blog-radius-md); overflow:hidden; }
+.bk-region-callout__cell { display:flex; align-items:center; gap:var(--blog-sp-3); padding:var(--blog-sp-4) var(--blog-sp-5); background:var(--blog-paper); border-right:1px solid var(--blog-border); }
+.bk-region-callout__cell:last-child { border-right:none; }
+.bk-region-callout__flag { flex-shrink:0; width:40px; height:30px; border-radius:var(--blog-radius-xs); background:var(--blog-bg-tertiary); border:1px solid var(--blog-border); position:relative; overflow:hidden; }
+.bk-region-callout__info { min-width:0; }
+.bk-region-callout__name { font-family:var(--blog-font-display); font-weight:700; text-transform:uppercase; font-size: var(--blog-fs-xs); letter-spacing:var(--blog-tracking-wide); color:var(--blog-ink); }
+.bk-region-callout__phone { margin-top:2px; font-family:var(--blog-font-mono); font-size: var(--blog-fs-sm); color:var(--blog-brand); }
+@media (max-width:700px){ .bk-region-callout { grid-template-columns:1fr; } .bk-region-callout__cell { border-right:none; border-bottom:1px solid var(--blog-border); } .bk-region-callout__cell:last-child { border-bottom:none; } }
+
+/* ── ServicePromoCard ────────────────────────────────────────
+   Ported from hjd .b-svc. Cyan accents → --blog-brand + brand tint/soft;
+   greys → ink/mute; dark-theme stays neutral via tokens. */
+.bk-service-promo-card {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--blog-sp-4);
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-4) var(--blog-sp-5);
+  border: 1px solid var(--blog-border);
+  border-radius: var(--blog-radius-sm);
+  background: linear-gradient(90deg, var(--blog-brand-tint), transparent);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 0.15s;
+}
+.bk-service-promo-card:hover { border-color: var(--blog-brand); }
+.bk-service-promo-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--blog-radius-sm);
+  background: var(--blog-brand-soft);
+  color: var(--blog-brand);
+}
+.bk-service-promo-card__icon svg {
+  display: block;
+  width: 22px;
+  height: 22px;
+}
+.bk-service-promo-card__body { min-width: 0; }
+.bk-service-promo-card__title {
+  display: block;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-md);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-tight);
+  color: var(--blog-ink);
+}
+.bk-service-promo-card__sub {
+  display: block;
+  margin-top: 2px;
+  font-family: var(--blog-font-body);
+  font-size: var(--blog-fs-sm);
+  color: var(--blog-mute);
+}
+.bk-service-promo-card__arrow {
+  flex-shrink: 0;
+  font-family: var(--blog-font-display);
+  font-weight: 700;
+  font-size: var(--blog-fs-sm);
+  text-transform: uppercase;
+  letter-spacing: var(--blog-tracking-wide);
+  color: var(--blog-brand);
+  white-space: nowrap;
+}
+
+/* ============================================================
+   ProseList (.bk-prose-list) — body-copy bullet/ordered lists
+   Two variants: --ul (brand dash marker) and --ol (zero-padded
+   brand counter). Add --divided for dashed-divider breathing
+   room between items. --grid mode aligns {title, description}
+   pairs into two columns across every row.
+   ============================================================ */
+.bk-prose-list { margin: 20px 0; padding: 0; padding-inline-start: 0; }
+.bk-prose-list--ul { list-style: none; }
+.bk-prose-list--ul .bk-prose-list__item { display: flex; align-items: flex-start; gap: 14px; padding: 6px 0 6px 6px; font-family: var(--blog-font-body); font-size: var(--blog-fs-md); line-height: 1.65; color: var(--blog-text); }
+.bk-prose-list--ul .bk-prose-list__item::before { content: ""; flex-shrink: 0; width: 8px; height: 2px; background: var(--blog-brand); border-radius: 1px; margin-top: calc((1em * 1.65 - 2px) / 2); }
+.bk-prose-list--ol { list-style: none; counter-reset: bkproselist; }
+.bk-prose-list--ol .bk-prose-list__item { display: flex; align-items: flex-start; gap: 14px; padding: 6px 0; counter-increment: bkproselist; font-family: var(--blog-font-body); font-size: var(--blog-fs-md); line-height: 1.65; color: var(--blog-text); }
+.bk-prose-list--ol .bk-prose-list__item::before { content: counter(bkproselist, decimal-leading-zero); font-family: var(--blog-font-display); font-weight: 700; font-size: var(--blog-fs-xs); line-height: calc(1.65 * 15 / 12); color: var(--blog-brand); letter-spacing: .04em; flex-shrink: 0; min-width: 22px; }
+.bk-prose-list__item strong { color: var(--blog-ink); font-weight: 700; }
+.bk-prose-list__item + .bk-prose-list__item { border-top: 1px dashed transparent; }
+.bk-prose-list--divided .bk-prose-list__item + .bk-prose-list__item { border-top-color: var(--blog-border-light); padding-top: 10px; margin-top: 4px; }
+
+/* Grid mode: title + description align as columns across rows. Each <li> uses
+   display:contents so its two spans participate in the parent grid. The marker
+   (dash or counter) renders as a ::before on the title so it tracks the
+   title's first-line baseline cleanly. */
+.bk-prose-list--grid { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(0, 2fr); column-gap: 28px; row-gap: 14px; counter-reset: bkproselist; }
+.bk-prose-list--grid .bk-prose-list__item { display: contents; }
+.bk-prose-list--grid .bk-prose-list__item::before { content: none; }
+.bk-prose-list--grid .bk-prose-list__marker { display: none; }
+.bk-prose-list--grid .bk-prose-list__title { counter-increment: bkproselist; position: relative; padding-left: 28px; font-family: var(--blog-font-body); font-weight: 700; font-size: var(--blog-fs-md); line-height: 1.55; color: var(--blog-ink); align-self: start; text-wrap: pretty; }
+.bk-prose-list--grid .bk-prose-list__desc { font-family: var(--blog-font-body); font-size: var(--blog-fs-md); line-height: 1.65; color: var(--blog-text); align-self: start; }
+.bk-prose-list--grid.bk-prose-list--ol .bk-prose-list__title::before { content: counter(bkproselist, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--blog-font-display); font-weight: 700; font-size: var(--blog-fs-xs); color: var(--blog-brand); letter-spacing: .04em; }
+.bk-prose-list--grid.bk-prose-list--ul .bk-prose-list__title::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--blog-brand); border-radius: 1px; }
+.bk-prose-list--grid.bk-prose-list--divided .bk-prose-list__item:not(:first-child) .bk-prose-list__title,
+.bk-prose-list--grid.bk-prose-list--divided .bk-prose-list__item:not(:first-child) .bk-prose-list__desc { border-top: 1px dashed var(--blog-border-light); padding-top: 14px; }
+.bk-prose-list--grid.bk-prose-list--divided .bk-prose-list__item:not(:first-child) .bk-prose-list__title { padding-top: 14px; }
+.bk-prose-list--grid.bk-prose-list--divided.bk-prose-list--ol .bk-prose-list__item:not(:first-child) .bk-prose-list__title::before { top: calc(14px + .1em); }
+.bk-prose-list--grid.bk-prose-list--divided.bk-prose-list--ul .bk-prose-list__item:not(:first-child) .bk-prose-list__title::before { top: calc(14px + .7em); }
+@media (max-width: 640px) {
+  .bk-prose-list--grid { grid-template-columns: 1fr; row-gap: 6px; }
+  .bk-prose-list--grid.bk-prose-list--divided .bk-prose-list__item:not(:first-child) .bk-prose-list__desc { border-top: none; padding-top: 2px; }
+}