@nukipa/post-content 0.1.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nukipa/post-content",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Framework-agnostic processor for Nukipa CMS post bodies — markdown + component markers + citations → HTML + interactive island descriptors.",
   "license": "MIT",
   "author": "Nukipa Labs",
@@ -21,9 +21,10 @@
     ".": {
       "types":  "./src/index.d.ts",
       "import": "./src/index.js"
-    }
+    },
+    "./styles.css": "./styles.css"
   },
-  "files": ["src", "README.md"],
+  "files": ["src", "styles.css", "README.md"],
   "peerDependencies": {
     "marked": "^17.0.0"
   },

package/src/components.js

@@ -358,22 +358,192 @@ function renderQuote(content) {
   };
 }
 
+/**
+ * `referenced_blog_post` — an embeddable card pointing at another blog
+ * post. Same render output whether it's embedded inside a CMS blog
+ * post (via cms.post_components) or inside a newsletter issue (via
+ * the `{{post:UUID}}` shorthand the newsletters worker resolves).
+ *
+ * Content shape:
+ *   { post_id, title?, url?, excerpt?, cover_url?, brand? }
+ *
+ * The host resolves `post_id` to the canonical metadata before render;
+ * we accept `title` / `url` / etc. on the content row so a pre-resolved
+ * snapshot can be passed in (newsletters does this — the worker has
+ * already fetched cms.posts when expanding markers, and passes the
+ * fields straight through).
+ *
+ * The HTML is email-safe (table + inline CSS) so the same renderer
+ * works for both web blog posts and email newsletters without
+ * branching.
+ */
+/**
+ * `referenced_blog_post` renderer with two styles:
+ *
+ *   - 'card'    (default) — full-width card: hero cover on top, title,
+ *                           excerpt, prominent CTA button. The hero card.
+ *   - 'compact' — row layout: small 96-px square cover on the left,
+ *                           title + truncated excerpt on the right,
+ *                           inline "Read more →" link (no CTA button).
+ *                           Half the vertical real estate of 'card', so
+ *                           it works as a list-style "see also" rail.
+ *
+ * Both shapes use the same brand colors and the same table-based
+ * email-safe markup; the only difference is the row layout. We render
+ * inline CSS only (Gmail strips <style> at the inbox).
+ */
+function renderReferencedPost(content = {}) {
+  const style = content.style === 'compact' ? 'compact' : 'card';
+  return style === 'compact'
+    ? renderReferencedPostCompact(content)
+    : renderReferencedPostCard(content);
+}
+
+function commonRefPostInputs(content) {
+  const safe = (s) => String(s || '').replace(/[&<>"]/g, (c) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;'
+  }[c]));
+  const url     = content.url       || '';
+  const title   = content.title     || 'Untitled post';
+  const excerpt = content.excerpt   || '';
+  const cover   = content.cover_url || '';
+  const brand   = content.brand     || {};
+  return {
+    safe,
+    url, title, excerpt, cover,
+    primary: brand.primary_color || '#0054C9',
+    text:    brand.text_color    || '#001D21',
+    muted:   '#5a5a5a',
+    card:    '#ffffff',
+    border:  '#e5e7eb'
+  };
+}
+
+function renderReferencedPostCard(content) {
+  const { safe, url, title, excerpt, cover, primary, text, muted, card, border } =
+    commonRefPostInputs(content);
+
+  const coverEl = cover
+    ? `<a href="${safe(url)}" target="_blank" style="text-decoration:none;display:block">
+         <img src="${safe(cover)}" alt="${safe(title)}" width="600"
+              style="display:block;width:100%;max-width:600px;height:auto;border:0;outline:none;text-decoration:none" />
+       </a>`
+    : `<a href="${safe(url)}" target="_blank" style="text-decoration:none;display:block">
+         <div style="width:100%;height:180px;background:${primary};
+                     display:flex;align-items:center;justify-content:center;
+                     padding:0 24px;color:#fff;font-weight:700;font-size:22px;
+                     line-height:1.2;text-align:center;font-family:inherit">
+           ${safe(title)}
+         </div>
+       </a>`;
+
+  const html = `
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
+       class="bp-component bp-referenced-post bp-referenced-post--card"
+       data-style="card"
+       style="border-collapse:collapse;margin:24px 0;background:${card};border:1px solid ${border};border-radius:10px;overflow:hidden">
+  <tr><td style="padding:0">${coverEl}</td></tr>
+  <tr><td style="padding:18px 22px 6px">
+    <a href="${safe(url)}" target="_blank"
+       style="font-size:19px;font-weight:700;line-height:1.25;color:${text};text-decoration:none">
+      ${safe(title)}
+    </a>
+  </td></tr>
+  ${excerpt ? `
+  <tr><td style="padding:6px 22px 14px;color:${muted};font-size:14px;line-height:1.5">
+    ${safe(excerpt)}
+  </td></tr>` : ''}
+  <tr><td style="padding:0 22px 22px">
+    <a href="${safe(url)}" target="_blank"
+       style="display:inline-block;padding:10px 16px;background:${primary};color:#ffffff;
+              font-weight:600;font-size:14px;text-decoration:none;border-radius:8px">
+      Read the article →
+    </a>
+  </td></tr>
+</table>`.replace(/\s*\n\s*/g, ' ').trim();
+  return { html };
+}
+
+function renderReferencedPostCompact(content) {
+  const { safe, url, title, excerpt, cover, primary, text, muted, card, border } =
+    commonRefPostInputs(content);
+
+  // 96-px square cover keeps the row Outlook-safe (a width attribute on
+  // the <td> with fixed pixel values is the most reliable). When no
+  // cover exists, fall back to a brand-coloured tile with a tiny
+  // initial letter so the row still has visual presence.
+  const coverCell = cover
+    ? `<td width="96" style="width:96px;padding:0;vertical-align:top">
+         <a href="${safe(url)}" target="_blank" style="display:block">
+           <img src="${safe(cover)}" alt="${safe(title)}" width="96" height="96"
+                style="display:block;width:96px;height:96px;object-fit:cover;border:0" />
+         </a>
+       </td>`
+    : `<td width="96" style="width:96px;padding:0;vertical-align:top">
+         <a href="${safe(url)}" target="_blank" style="display:block">
+           <div style="width:96px;height:96px;background:${primary};
+                       display:flex;align-items:center;justify-content:center;
+                       color:#fff;font-weight:700;font-size:24px;font-family:inherit;
+                       line-height:1;text-align:center">
+             ${safe(title.charAt(0).toUpperCase())}
+           </div>
+         </a>
+       </td>`;
+
+  // Excerpt is truncated to ~140 chars for the compact row. The card
+  // style keeps the full excerpt; this one trades fidelity for density.
+  const trimmedExcerpt = excerpt && excerpt.length > 140
+    ? excerpt.slice(0, 137).replace(/\s+\S*$/, '') + '…'
+    : excerpt;
+
+  const html = `
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
+       class="bp-component bp-referenced-post bp-referenced-post--compact"
+       data-style="compact"
+       style="border-collapse:collapse;margin:14px 0;background:${card};border:1px solid ${border};border-radius:10px;overflow:hidden">
+  <tr>
+    ${coverCell}
+    <td style="padding:12px 14px;vertical-align:top">
+      <a href="${safe(url)}" target="_blank"
+         style="font-size:15px;font-weight:700;line-height:1.3;color:${text};text-decoration:none;display:block">
+        ${safe(title)}
+      </a>
+      ${trimmedExcerpt ? `
+      <p style="margin:4px 0 6px;color:${muted};font-size:13px;line-height:1.45">
+        ${safe(trimmedExcerpt)}
+      </p>` : ''}
+      <a href="${safe(url)}" target="_blank"
+         style="display:inline-block;color:${primary};font-weight:600;font-size:13px;text-decoration:none">
+        Read more →
+      </a>
+    </td>
+  </tr>
+</table>`.replace(/\s*\n\s*/g, ' ').trim();
+  return { html };
+}
+
 const RENDERERS = {
-  cta:            (c) => renderCta(c),
-  form:           (c) => renderForm(c),
-  contact_form:   (c) => renderContactForm(c),
-  callout:        (c) => renderCallout(c.content || {}),
-  faq:            (c) => renderFaq(c.content || {}),
-  steps:          (c) => renderSteps(c.content || {}),
-  card:           (c) => renderCard(c.content || {}),
-  data_table:     (c) => renderDataTable(c.content || {}),
-  comparison:     (c) => renderComparison(c.content || {}),
-  process:        (c) => renderProcess(c.content || {}),
-  image:          (c) => renderImage(c),
-  image_carousel: (c) => renderImageCarousel(c.content || {}),
-  chart:          (c) => renderChart(c.content || {}),
-  widget:         (c, opts) => renderWidget(c, opts),
-  quote:          (c) => renderQuote(c.content || {})
+  cta:                  (c) => renderCta(c),
+  form:                 (c) => renderForm(c),
+  contact_form:         (c) => renderContactForm(c),
+  callout:              (c) => renderCallout(c.content || {}),
+  faq:                  (c) => renderFaq(c.content || {}),
+  steps:                (c) => renderSteps(c.content || {}),
+  card:                 (c) => renderCard(c.content || {}),
+  data_table:           (c) => renderDataTable(c.content || {}),
+  comparison:           (c) => renderComparison(c.content || {}),
+  process:              (c) => renderProcess(c.content || {}),
+  image:                (c) => renderImage(c),
+  image_carousel:       (c) => renderImageCarousel(c.content || {}),
+  chart:                (c) => renderChart(c.content || {}),
+  widget:               (c, opts) => renderWidget(c, opts),
+  quote:                (c) => renderQuote(c.content || {}),
+  // Referenced blog-post card. Same renderer used by both the CMS
+  // post-renderer pipeline (when authors embed another post via the
+  // editor) and the newsletters send/preview pipeline (which converts
+  // `{{post:UUID}}` markers into a pre-resolved component-shaped object
+  // on the fly — see services/newsletters/src/lib/postEmbeds.js).
+  referenced_blog_post: (c) => renderReferencedPost(c.content || {})
 };
 
 /**

package/styles.css

@@ -0,0 +1,469 @@
+/*
+ * Material Icons — pulled at the top so the @font-face rule wins the
+ * cascade before any of our `.material-icons` selectors below. The
+ * renderer emits glyph names verbatim (`help_outline`, `expand_more`,
+ * `arrow_forward`, `chevron_left`, `chevron_right`, plus whatever
+ * stage icons the post author picked); without this font those names
+ * render as literal text. To self-host (offline, privacy, or perf
+ * reasons): drop this @import, host the same font + matching CSS at
+ * the host, and the rest of this stylesheet keeps working unchanged.
+ */
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+/*
+ * Nukipa post-content default stylesheet.
+ *
+ * Ship-ready CSS for every component this package's renderPostBody()
+ * emits — callouts, FAQs, carousels, the inline CTA block, etc.
+ * Drop this into a Next.js layout (or any HTML host) and the
+ * rendered post is styled out of the box, no copying of ~800 lines
+ * of selectors.
+ *
+ *   import '@nukipa/post-content/styles.css';
+ *
+ * THEME TOKENS — every color/spacing value falls back to a sensible
+ * default. To re-theme, set the matching CSS variable on `:root` (or
+ * any ancestor of the post body):
+ *
+ *   :root {
+ *     --color-primary:        #0054C9;
+ *     --color-primary-contrast:#FFFFFF;
+ *     --color-bg:             #FFFFFF;
+ *     --color-text:           #001D21;
+ *     --color-text-muted:     #51646A;
+ *     --color-border:         #E5DFDC;
+ *     --color-surface:        #F0EBEB;
+ *   }
+ *
+ * Selectors target the classes the package emits directly — no host
+ * scope prefix (e.g. `.article-content` in apps/public). If you need
+ * to scope these rules to a single subtree, nest the @import in a
+ * cascade layer or wrap the body in a class and re-author the rules
+ * — this is the canonical stylesheet.
+ */
+
+/* ───── Container + prose typography ──────────────────────────────── */
+.prose-body {
+  max-width: 70ch;
+  line-height: 1.75;
+  font-size: 1.0625rem;
+  color: var(--color-text, #001D21);
+}
+.prose-body h1, .prose-body h2, .prose-body h3 {
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin-top: 1.6em;
+  margin-bottom: 0.5em;
+}
+.prose-body h1 { font-size: 2rem; }
+.prose-body h2 { font-size: 1.5rem; }
+.prose-body h3 { font-size: 1.25rem; }
+.prose-body p  { margin: 0 0 1.1em; }
+.prose-body a  {
+  color: var(--color-primary, #0054C9);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.prose-body code {
+  background: var(--color-surface, #F0EBEB);
+  padding: 0.1em 0.35em;
+  border-radius: 6px;
+  font-size: 0.9em;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+}
+.prose-body pre {
+  background: var(--color-dark, #1F2732);
+  color: var(--color-on-dark, #EAF1F8);
+  padding: 1.1em;
+  border-radius: 16px;
+  overflow-x: auto;
+}
+.prose-body pre code { background: transparent; padding: 0; }
+.prose-body img { border-radius: 16px; margin: 1.6em 0; max-width: 100%; height: auto; }
+.prose-body blockquote {
+  border-left: 2px solid var(--color-primary, #0054C9);
+  padding-left: 1em;
+  color: var(--color-text-muted, #51646A);
+  margin: 1.2em 0;
+}
+.prose-body ul, .prose-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
+.prose-body li { margin: 0.3em 0; }
+
+/* ───── Component wrapper (every bp-* gets one) ────────────────────── */
+.bp-component { margin: 1.5rem 0; }
+
+/* ───── Callouts ───────────────────────────────────────────────────── */
+.bp-callout {
+  padding: 0.75rem 1rem;
+  border-radius: 0 0.5rem 0.5rem 0;
+  border-left: 4px solid var(--color-border, #E5DFDC);
+  background: var(--color-surface, #F0EBEB);
+}
+.bp-callout__header {
+  font-weight: 600;
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin-bottom: 0.375rem;
+}
+.bp-callout__body p:last-child { margin-bottom: 0; }
+.bp-callout--note      { background: color-mix(in srgb, #3b82f6 8%, var(--color-bg, #FFFFFF)); border-left-color: #3b82f6; }
+.bp-callout--note      .bp-callout__header { color: #3b82f6; }
+.bp-callout--tip       { background: color-mix(in srgb, #10b981 8%, var(--color-bg, #FFFFFF)); border-left-color: #10b981; }
+.bp-callout--tip       .bp-callout__header { color: #10b981; }
+.bp-callout--important { background: color-mix(in srgb, var(--color-primary, #0054C9) 8%, var(--color-bg, #FFFFFF)); border-left-color: var(--color-primary, #0054C9); }
+.bp-callout--important .bp-callout__header { color: var(--color-primary, #0054C9); }
+.bp-callout--warning   { background: color-mix(in srgb, #f59e0b 8%, var(--color-bg, #FFFFFF)); border-left-color: #f59e0b; }
+.bp-callout--warning   .bp-callout__header { color: #f59e0b; }
+.bp-callout--caution   { background: color-mix(in srgb, #ef4444 8%, var(--color-bg, #FFFFFF)); border-left-color: #ef4444; }
+.bp-callout--caution   .bp-callout__header { color: #ef4444; }
+
+/* ───── FAQ ────────────────────────────────────────────────────────── */
+.bp-faq {
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+.bp-faq-item { border-bottom: 1px solid var(--color-border, #E5DFDC); }
+.bp-faq-item:last-child { border-bottom: none; }
+.bp-faq-item summary {
+  padding: 0.875rem 1.25rem;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--color-text, #001D21);
+  transition: background 0.15s;
+}
+.bp-faq-item summary:hover { background: var(--color-surface, #F0EBEB); }
+.bp-faq-item summary::-webkit-details-marker { display: none; }
+.bp-faq-icon     { font-size: 1.25rem; color: var(--color-primary, #0054C9); flex-shrink: 0; }
+.bp-faq-question { flex: 1; }
+.bp-faq-chevron  { font-size: 1.375rem; color: var(--color-text-muted, #51646A); transition: transform 0.2s; flex-shrink: 0; }
+.bp-faq-item[open] .bp-faq-chevron { transform: rotate(180deg); }
+.bp-faq-answer   { padding: 0 1.25rem 1rem 3rem; color: var(--color-text-muted, #51646A); }
+.bp-faq-answer p:last-child { margin-bottom: 0; }
+
+/* ───── Steps — vertical timeline ──────────────────────────────────── */
+.bp-steps { padding-left: 0; }
+.bp-step  { display: flex; gap: 1.25rem; }
+.bp-step__marker {
+  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
+}
+.bp-step__num {
+  width: 2.25rem; height: 2.25rem; border-radius: 50%;
+  background: var(--color-primary, #0054C9);
+  color: var(--color-primary-contrast, #FFFFFF);
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #0054C9) 15%, transparent);
+}
+.bp-step__line {
+  width: 2px; flex: 1; min-height: 1.5rem;
+  background: color-mix(in srgb, var(--color-primary, #0054C9) 25%, transparent);
+}
+.bp-step__content { padding-bottom: 2rem; flex: 1; }
+.bp-step--last .bp-step__content { padding-bottom: 0; }
+.bp-step__content strong { font-size: 1.0625rem; display: block; margin-bottom: 0.25rem; }
+.bp-step__content p:last-child { margin-bottom: 0; }
+
+/* ───── Card ───────────────────────────────────────────────────────── */
+.bp-card {
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: var(--color-surface, #F0EBEB);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+  border-left: 4px solid var(--color-primary, #0054C9);
+}
+.bp-card__img   { width: 100%; height: auto; display: block; }
+.bp-card__body  { padding: 1.25rem 1.5rem; }
+.bp-card__title { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; color: var(--color-primary, #0054C9); }
+.bp-card__body p { color: var(--color-text-muted, #51646A); }
+.bp-card__body p:last-child { margin-bottom: 0; }
+
+/* ───── Chart (canvas placeholder, host hydrates) ──────────────────── */
+.bp-chart          { border: 1px solid var(--color-border, #E5DFDC); border-radius: 0.5rem; padding: 1rem; }
+.bp-chart__title   { font-weight: 600; margin-bottom: 0.5rem; }
+.bp-chart__canvas  { width: 100%; max-height: 400px; }
+
+/* ───── Data Table ─────────────────────────────────────────────────── */
+.bp-data-table {
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.bp-data-table__title {
+  font-weight: 600; padding: 0.75rem 1rem;
+  background: var(--color-surface, #F0EBEB);
+  border-bottom: 1px solid var(--color-border, #E5DFDC);
+}
+.bp-data-table table { margin: 0; width: max-content; min-width: 100%; }
+.bp-data-table th, .bp-data-table td { min-width: 100px; }
+
+/* ───── Image Carousel ─────────────────────────────────────────────── */
+.bp-carousel {
+  position: relative;
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+.bp-carousel__track  { display: flex; overflow: hidden; }
+.bp-carousel__slide  { min-width: 100%; display: none; }
+.bp-carousel__slide.active { display: block; }
+.bp-carousel__slide img { width: 100%; height: auto; display: block; }
+.bp-carousel__caption {
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  color: var(--color-text-muted, #51646A);
+  text-align: center;
+  background: var(--color-surface, #F0EBEB);
+}
+.bp-carousel__prev, .bp-carousel__next {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%;
+  width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  backdrop-filter: blur(4px); transition: background 0.15s;
+}
+.bp-carousel__prev .material-icons, .bp-carousel__next .material-icons { font-size: 1.5rem; }
+.bp-carousel__prev:hover, .bp-carousel__next:hover { background: rgba(0,0,0,0.7); }
+.bp-carousel__prev { left: 0.75rem; }
+.bp-carousel__next { right: 0.75rem; }
+
+/* ───── Inline image (single figure) ───────────────────────────────── */
+.bp-image {
+  margin: 1.75rem 0;
+  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
+}
+.bp-image img {
+  max-width: 100%; height: auto; display: block;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-border, #E5DFDC);
+}
+.bp-image__caption {
+  font-size: 0.9375rem;
+  color: var(--color-text-muted, #51646A);
+  text-align: center;
+  line-height: 1.5;
+}
+.bp-image__caption p { margin: 0; }
+.bp-image__credit {
+  font-size: 0.75rem;
+  color: var(--color-text-muted, #51646A);
+  opacity: 0.85;
+}
+.bp-image__credit a { color: inherit; text-decoration: underline; }
+.bp-image-placeholder {
+  margin: 1.75rem 0; padding: 2rem 1rem;
+  border: 1px dashed var(--color-border, #E5DFDC);
+  border-radius: 0.75rem;
+  text-align: center;
+  color: var(--color-text-muted, #51646A);
+  font-style: italic;
+}
+
+/* ───── Process — auto-fit grid of stages ─────────────────────────────
+   The renderer interleaves <div class="bp-process__stage"> and
+   <div class="bp-process__connector"> in document order. Laying that
+   out as wrapping flex put orphan connector arrows at the start of
+   wrapped rows (the connector that "belongs" between stage 4 and
+   stage 5 ended up alone on row 2). The grid below tracks columns
+   by stage width — connectors are hidden because they only encode
+   left-to-right adjacency, which is meaningless once the grid wraps
+   into multiple rows. */
+.bp-process {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  align-items: start;
+  justify-items: center;
+  gap: 1rem 0.5rem;
+}
+.bp-process__stage {
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  min-width: 0; padding: 1rem 0.75rem;
+}
+.bp-process__icon {
+  width: 3rem; height: 3rem; border-radius: 50%;
+  background: var(--color-primary, #0054C9);
+  color: var(--color-primary-contrast, #FFFFFF);
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 1rem; flex-shrink: 0; margin-bottom: 0.75rem;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #0054C9) 15%, transparent);
+}
+.bp-process__icon .material-icons { font-size: 1.375rem; }
+.bp-process__num   { font-weight: 700; font-size: 1rem; }
+.bp-process__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
+.bp-process__desc  { font-size: 0.875rem; color: var(--color-text-muted, #51646A); line-height: 1.5; }
+.bp-process__connector { display: none; }
+
+/* ───── Comparison ─────────────────────────────────────────────────── */
+.bp-comparison {
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.bp-comparison table {
+  margin: 0; width: max-content; min-width: 100%;
+  border-collapse: collapse;
+}
+.bp-comparison th, .bp-comparison td {
+  min-width: 100px;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--color-border, #E5DFDC);
+}
+.bp-comparison thead th {
+  background: var(--color-surface, #F0EBEB);
+  font-weight: 600;
+  text-align: left;
+  border-bottom-width: 2px;
+}
+.bp-comparison tbody tr:last-child th, .bp-comparison tbody tr:last-child td { border-bottom: none; }
+.bp-comparison tbody tr:hover td, .bp-comparison tbody tr:hover th { background: color-mix(in srgb, var(--color-surface, #F0EBEB) 60%, transparent); }
+.bp-comparison__cell { text-align: center; }
+
+/* ───── Cite chip — superscript footnote link ──────────────────────── */
+.bp-cite {
+  display: inline-block;
+  font-size: 0.7em;
+  vertical-align: super;
+  line-height: 1;
+  padding: 1px 5px;
+  margin: 0 1px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary, #0054C9) 12%, transparent);
+  color: var(--color-primary, #0054C9);
+  font-weight: 600;
+}
+.bp-cite a       { color: inherit; text-decoration: none; }
+.bp-cite a:hover { text-decoration: underline; }
+.bp-cite--orphan {
+  background: var(--color-surface, #F0EBEB);
+  color: var(--color-text-muted, #51646A);
+}
+
+/* ───── Inline widget iframe ───────────────────────────────────────── */
+.inline-widget-container {
+  margin: 2rem 0;
+  border-radius: 0.75rem;
+  overflow: visible;
+}
+.inline-widget-container iframe {
+  width: 100%;
+  border: none;
+  min-height: 200px;
+}
+
+/* ───── Inline CTA ─────────────────────────────────────────────────── */
+.inline-cta-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 2.5rem 2rem;
+  margin: 2.5rem 0;
+  background: var(--color-surface, #F0EBEB);
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 1rem;
+  text-align: center;
+}
+.inline-cta-description {
+  color: var(--color-text-muted, #51646A);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  margin: 0;
+}
+.inline-cta-btn {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  font-family: inherit;
+}
+.inline-cta-btn.cta-primary {
+  background: var(--color-primary, #0054C9);
+  color: var(--color-primary-contrast, #FFFFFF);
+}
+.inline-cta-btn.cta-primary:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+.inline-cta-btn.cta-outline {
+  background: transparent;
+  border: 2px solid var(--color-primary, #0054C9);
+  color: var(--color-primary, #0054C9);
+}
+.inline-cta-btn.cta-outline:hover {
+  background: color-mix(in srgb, var(--color-primary, #0054C9) 10%, transparent);
+}
+.inline-cta-btn.cta-subtle {
+  background: transparent;
+  color: var(--color-primary, #0054C9);
+  text-decoration: underline;
+  padding: 0.5rem 0;
+}
+.inline-cta-btn.cta-subtle:hover { opacity: 0.8; }
+
+/* ───── CTA Form ───────────────────────────────────────────────────── */
+.inline-cta-form-block { padding: 2rem; }
+.inline-cta-form-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  color: var(--color-text, #001D21);
+  margin: 0 0 1.25rem;
+}
+.inline-cta-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 480px;
+  width: 100%;
+  margin: 0 auto;
+}
+.inline-cta-input,
+.inline-cta-textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border, #E5DFDC);
+  border-radius: 0.5rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  background: var(--color-bg, #FFFFFF);
+  color: var(--color-text, #001D21);
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+}
+.inline-cta-input:focus,
+.inline-cta-textarea:focus {
+  outline: none;
+  border-color: var(--color-primary, #0054C9);
+}
+.inline-cta-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+.inline-cta-submit { align-self: center; margin-top: 0.5rem; }
+.inline-cta-success {
+  color: var(--color-primary, #0054C9);
+  font-weight: 600;
+  font-size: 1rem;
+  margin: 1rem 0;
+}
+
+/* ───── Mobile tweaks ──────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .prose-body    { font-size: 1rem; }
+  .prose-body h1 { font-size: 1.75rem; }
+  .prose-body h2 { font-size: 1.5rem; }
+  .prose-body h3 { font-size: 1.25rem; }
+}