/* ═══════════════════════════════════════════════════════════════════
   Insight Infographics — common class library

   The insight post bodies ship with lots of inline <div style="…">
   infographic panels. This stylesheet pulls the most-common inline
   patterns into one place so sizes, colors and spacing can change
   site-wide from a single file.

   Prefix: .ia-*
   Loaded globally in views/partials/head.ejs so every insight page
   inherits these styles without needing per-template includes.
   ═══════════════════════════════════════════════════════════════════ */

/* Scrollable navy-gradient diagram container ────────────────────────── */
.ia-diagram {
  background: linear-gradient(135deg, #1a2857 0%, #0d1b3e 100%);
  padding: 40px 32px;
  margin: 0 0 32px;
  border-radius: 14px;
}
/* When a diagram wrapper scrolls horizontally (wide step-flow), the
   kicker + heading above the row stay pinned to the left so copy
   doesn't scroll off with the grid. Applies in both .ia-diagram
   (standard navy wrapper) and .cs-card--navy-border-teal (callout
   variant used on the Roadmap). */
/* Sticky kicker + heading ONLY in sections that actually scroll horizontally
   on mobile (compare table, scorecard, 5-step flow, step num, progress line).
   Universal sticky would clamp section-level kickers' margin-left:-18px
   flush-align back to 0 in non-scrolling sections. */
.ia-diagram:has(.ia-g3-flow) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-g3-flow) > .white-kicker-style,
.ia-diagram:has(.ia-g3-flow) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-g3-flow) > .ia-h,
.ia-diagram:has(.ia-g3-flow) > .ia-h--snug,
.ia-diagram:has(.ia-g4-flow) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-g4-flow) > .white-kicker-style,
.ia-diagram:has(.ia-g4-flow) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-g4-flow) > .ia-h,
.ia-diagram:has(.ia-g4-flow) > .ia-h--snug,
.ia-diagram:has(.ia-g5-flow) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-g5-flow) > .white-kicker-style,
.ia-diagram:has(.ia-g5-flow) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-step-num) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-step-num) > .white-kicker-style,
.ia-diagram:has(.ia-step-num) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-progress-line) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-progress-line) > .white-kicker-style,
.ia-diagram:has(.ia-progress-line) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-compare-table) > .ia-kicker,
.ia-diagram:has(.ia-compare-table) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-compare-table) > .white-kicker-style,
.ia-diagram:has(.ia-compare-table) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-compare-table) > .ia-h,
.ia-diagram:has(.ia-compare-table) > .ia-h--snug,
.ia-diagram:has(.ia-compare-table) > .ia-body--softmuted-24,
.ia-diagram:has(.ia-compare-table) > .ia-callout,
.ia-diagram:has(.ia-scorecard-matrix) > .ia-kicker,
.ia-diagram:has(.ia-scorecard-matrix) > .ia-kicker--eyebrow,
.ia-diagram:has(.ia-scorecard-matrix) > .white-kicker-style,
.ia-diagram:has(.ia-scorecard-matrix) > .dark-colored-kicker-style,
.ia-diagram:has(.ia-scorecard-matrix) > .ia-h,
.ia-diagram:has(.ia-scorecard-matrix) > .ia-h--snug,
.ia-diagram:has(.ia-scorecard-matrix) > .ia-callout,
.ia-diagram.ia-scorecard-matrix > .ia-kicker,
.ia-diagram.ia-scorecard-matrix > .ia-kicker--eyebrow,
.ia-diagram.ia-scorecard-matrix > .white-kicker-style,
.ia-diagram.ia-scorecard-matrix > .dark-colored-kicker-style,
.ia-diagram.ia-scorecard-matrix > .ia-h,
.ia-diagram.ia-scorecard-matrix > .ia-h--snug,
.ia-diagram.ia-scorecard-matrix > .ia-callout,
.ia-diagram:has(.ia-g5-flow) > .ia-h,
.ia-diagram:has(.ia-g5-flow) > .ia-h--snug,
.ia-diagram:has(.ia-step-num) > .ia-h,
.ia-diagram:has(.ia-step-num) > .ia-h--snug,
.ia-diagram:has(.ia-progress-line) > .ia-h,
.ia-diagram:has(.ia-progress-line) > .ia-h--snug,
.cs-card--navy-border-teal > .ia-kicker--eyebrow,
.cs-card--navy-border-teal > .ia-h,
.cs-card--navy-border-teal > .ia-h--snug {
  position: sticky;
  left: 0;
}

/* Simple user-added rule — any kicker/title descendant of .blog-diagram-scroll
   pins to left:0 as content scrolls horizontally. */
.blog-diagram-scroll .dark-colored-kicker-style,
.blog-diagram-scroll .ia-h {
  position: sticky;
  left: 0;
}

/* Small step circle (32x32, brand bg + white content). Used as a
   compact numbered/iconed step marker in horizontal flows. */
.ia-step-circle-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.ia-step-circle-sm--teal   { background: #0096c7; }
.ia-step-circle-sm--green  { background: #4aaa57; }
.ia-step-circle-sm--orange { background: #f77f00; }
.ia-step-circle-sm--blue   { background: #1565c7; }

/* Universal progress line connecting step circles in a horizontal flow.
   Change color stops here once, every diagram's connector updates. */
.ia-progress-line {
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #0096c7, #f77f00, #4aaa57, #1565c7, #0096c7);
  grid-column: 1 / -1;
}
.ia-diagram--v2 {
  background: linear-gradient(135deg, #1a2857 0%, #0d1540 100%);
}

/* Diagram section heading (large bold white) ────────────────────────── */
.ia-h {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Diagram kicker — uppercase label with brand color + bar accent ─── */
.ia-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ia-kicker--teal   { color: #0096c7; }
.ia-kicker--green  { color: #4aaa57; }
.ia-kicker--orange { color: #f77f00; }
.ia-kicker--blue   { color: #1565c7; }
.ia-kicker--navy   { color: #1a2857; }
/* Explicit high-specificity override: --navy kicker always wins. Used when
   the kicker sits inside a white container and needs navy text regardless
   of any ancestor rule forcing white. */
.is-blog-post .ia-kicker.ia-kicker--navy,
.is-blog-post .ia-left-pill .ia-kicker.ia-kicker--navy,
.is-blog-post .ia-left-pill--white .ia-kicker.ia-kicker--navy {
  color: #1a2857 !important;
}

/* Stat value — the big white number/word in each stat block ──────── */
.ia-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

/* Stat sub-label — supporting line under a stat val ──────────────── */
.ia-stat-sub {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

/* Body text inside a diagram card — unified at 16px / .9 opacity.
   Previously .75 — bumped so text under charts and in dark cards reads
   clearly against navy backgrounds. */
.ia-body {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.65;
  margin-bottom: 12px;
}

/* Base callout box — white by default; colored variants override below. */
.ia-callout {
  margin-top: 22px;
  padding: 18px 22px;
  background-color: #ffffff;
  /* Same top-left bloom as the Impact / homepage bento — subtle on white. */
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  color: #1a2857;
  border: none;
  border-radius: 14px;
}
/* Explicit white variant (same as default) — use in markup for clarity. */
.ia-callout--white {
  background-color: #ffffff;
  color: #1a2857;
}
/* Brand-colored variants — solid brand bg + white text. Same top-left bloom
   as colored cards for a consistent surface treatment. */
.ia-callout--teal   { background-color: #0096c7; color: #ffffff; }
.ia-callout--green  { background-color: #4aaa57; color: #ffffff; }
.ia-callout--orange { background-color: #f77f00; color: #ffffff; }
.ia-callout--blue   { background-color: #1565c7; color: #ffffff; }
.ia-callout--teal,
.ia-callout--green,
.ia-callout--orange,
.ia-callout--blue {
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.28), transparent 55%);
}
/* Inside a colored callout, kickers / body / stats are white too. */
.ia-callout--teal :is(.ia-kicker, .ia-body, .ia-h, .ia-stat-val, .ia-stat-sub, strong, em, p, li),
.ia-callout--green :is(.ia-kicker, .ia-body, .ia-h, .ia-stat-val, .ia-stat-sub, strong, em, p, li),
.ia-callout--orange :is(.ia-kicker, .ia-body, .ia-h, .ia-stat-val, .ia-stat-sub, strong, em, p, li),
.ia-callout--blue :is(.ia-kicker, .ia-body, .ia-h, .ia-stat-val, .ia-stat-sub, strong, em, p, li) {
  color: #ffffff !important;
}

/* ─── Universal numbered step circle (.ia-step-num) ──────────────────
   One class for every numbered step circle across insights. White
   background + navy numeral + the standard white-card dark top-left
   bloom. Uniform 48x48 size + horizontally centered via margin:auto
   so numbers align the same way on every page regardless of original
   inline sizing (some were 60px/72px — too big). */
.ia-step-num {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
}
/* Colored variants moved below the universal `body .blog-article
   div.ia-step-num.ia-step-num` override — see line ~2240 — for correct
   specificity. */

/* ── Numbered step circle (52x52 solid-color circle with a big white
   numeral inside — used as a step-flow marker). */
.ia-step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
}
.ia-step-circle--teal   { background: #0096c7; }
.ia-step-circle--green  { background: #4aaa57; }
.ia-step-circle--orange { background: #f77f00; }
.ia-step-circle--blue   { background: #1565c7; }

/* ── Dark inset pill — small rounded rectangle with a semi-transparent
   black background. Reads as a sub-item inside a navy diagram. */
.ia-dark-pill {
  padding: 14px 16px;
  background: rgba(0,0,0,.18);
  border-radius: 4px;
}
.ia-dark-pill--mb { margin-bottom: 10px; }

/* ── Bordered card — slightly larger panel with brand-tinted background
   and matching border, generous 24px padding. For "quadrant" / "col"
   style blocks that don't fuse with each other. */
.ia-bordered-card {
  padding: 24px;
  color: #ffffff;
  border-radius: 14px;
  border: none;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-bordered-card--teal   { background-color: #0096c7; }
.ia-bordered-card--green  { background-color: #4aaa57; }
.ia-bordered-card--orange { background-color: #f77f00; }
.ia-bordered-card--blue   { background-color: #1565c7; }
/* All text inside flipped to white (overrides inline muted colors). */
.ia-bordered-card,
.ia-bordered-card [style*="color:#"],
.ia-bordered-card [style*="color:rgba"],
.ia-bordered-card .ia-kicker,
.ia-bordered-card .ia-kicker--teal,
.ia-bordered-card .ia-kicker--green,
.ia-bordered-card .ia-kicker--orange,
.ia-bordered-card .ia-kicker--blue,
.ia-bordered-card .ia-body,
.ia-bordered-card .ia-body-sm,
.ia-bordered-card .ia-stat-val,
.ia-bordered-card .ia-stat-sub,
.ia-bordered-card .ia-sub-h {
  color: #ffffff !important;
}

/* ── Bordered card with coloured top accent — subtler tint than
   .ia-bordered-card (background opacity .06 instead of .1) + a strong
   3px top-border strip in brand colour. */
.ia-accent-card {
  padding: 24px;
  color: #ffffff;
  border-radius: 14px;
  border: none;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-accent-card--teal   { background-color: #0096c7; }
.ia-accent-card--green  { background-color: #4aaa57; }
.ia-accent-card--orange { background-color: #f77f00; }
.ia-accent-card--blue   { background-color: #1565c7; }
.ia-accent-card,
.ia-accent-card [style*="color:#"],
.ia-accent-card [style*="color:rgba"],
.ia-accent-card .ia-kicker,
.ia-accent-card .ia-kicker--teal,
.ia-accent-card .ia-kicker--green,
.ia-accent-card .ia-kicker--orange,
.ia-accent-card .ia-kicker--blue,
.ia-accent-card .ia-body,
.ia-accent-card .ia-body-sm,
.ia-accent-card .ia-stat-val,
.ia-accent-card .ia-stat-sub,
.ia-accent-card .ia-sub-h {
  color: #ffffff !important;
}

/* ── Row with a bottom underline — centered cell in a stacked list on
   dark background. */
.ia-row-line {
  padding: 14px 16px;
  font-size: 16px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

/* ── Thin horizontal separator — a one-line row with a hairline bottom
   border (used between stacked label rows). */
.ia-row-sep {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Big section heading (compact variant) — same 22px bold white as
   .ia-h but with a shorter margin-bottom for cards that follow soon. */
.ia-h--compact {
  margin-bottom: 10px;
}

/* ── Sub-heading inside a diagram card — 16px bold white above a body
   paragraph; two margin-bottom variants (default 18px, snug 0). */
.ia-sub-h {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
}
.ia-sub-h--snug { margin-bottom: 0; }

/* ── Small body copy (13px) with high-contrast white and a muted sub
   variant for secondary captions. Opacity bumped (.75 → .9, .55 → .8)
   so chart captions read clearly on dark cards. */
.ia-body-sm {
  font-size: 13px;
  color: #ffffff;
}
.ia-body-sm--muted {
  color: #ffffff;
  margin-top: 4px;
}

/* ── Larger step circle (72x72) with number on top + short label under —
   used in big step-flow diagrams. */
.ia-step-circle--lg {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  line-height: 1.15;
  flex-direction: column;
  font-size: 16px;
}

/* ── Flex comparison column — brand-tinted panel with matching border + a
   3px top accent, equal-width via flex:1. Used in before/after rows. */
.ia-flex-col {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  border-radius: 14px;
  border: none;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-flex-col--teal   { background-color: #0096c7; }
.ia-flex-col--green  { background-color: #4aaa57; }
.ia-flex-col--orange { background-color: #f77f00; }
.ia-flex-col--blue   { background-color: #1565c7; }
.ia-flex-col--white  { background-color: #ffffff; color: #1a2857; }
.ia-flex-col,
.ia-flex-col [style*="color:#"],
.ia-flex-col [style*="color:rgba"],
.ia-flex-col .ia-kicker,
.ia-flex-col .ia-kicker--teal,
.ia-flex-col .ia-kicker--green,
.ia-flex-col .ia-kicker--orange,
.ia-flex-col .ia-kicker--blue,
.ia-flex-col .ia-body,
.ia-flex-col .ia-body-sm,
.ia-flex-col .ia-stat-val,
.ia-flex-col .ia-stat-sub,
.ia-flex-col .ia-sub-h {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Catch-all for inline-styled brand-color cards anywhere inside an
   article. Any element with an inline rgba(brand) OR hex brand bg
   becomes a solid tile with white text + the standard dark top-left
   bloom. Scoped to .blog-article so it doesn't leak into app chrome.
   ═══════════════════════════════════════════════════════════════════ */
/* Scope: NOT applied to <a> / <button> (those keep their site-common
   button style) and NOT applied to bar-chart stems and similar inner
   graphic elements that have an inline width — the extra [style*="padding:"]
   requirement means we only transform elements that are PANELS (have
   their own padding) rather than inner graphic primitives. */
.blog-article div[style*="background:rgba(0,150,199,"][style*="padding:"],
.blog-article section[style*="background:rgba(0,150,199,"][style*="padding:"],
.blog-article div[style*="background: rgba(0,150,199,"][style*="padding:"],
.blog-article section[style*="background: rgba(0,150,199,"][style*="padding:"],
.blog-article div[style*="background:#0096c7"][style*="padding:"],
.blog-article section[style*="background:#0096c7"][style*="padding:"],
.blog-article div[style*="background: #0096c7"][style*="padding:"] {
  background-color: #0096c7 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}
.blog-article div[style*="background:rgba(74,170,87,"][style*="padding:"],
.blog-article section[style*="background:rgba(74,170,87,"][style*="padding:"],
.blog-article div[style*="background: rgba(74,170,87,"][style*="padding:"],
.blog-article section[style*="background: rgba(74,170,87,"][style*="padding:"],
.blog-article div[style*="background:#4aaa57"][style*="padding:"],
.blog-article section[style*="background:#4aaa57"][style*="padding:"],
.blog-article div[style*="background: #4aaa57"][style*="padding:"] {
  background-color: #4aaa57 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}
.blog-article div[style*="background:rgba(247,127,0,"][style*="padding:"],
.blog-article section[style*="background:rgba(247,127,0,"][style*="padding:"],
.blog-article div[style*="background: rgba(247,127,0,"][style*="padding:"],
.blog-article section[style*="background: rgba(247,127,0,"][style*="padding:"],
.blog-article div[style*="background:#f77f00"][style*="padding:"],
.blog-article section[style*="background:#f77f00"][style*="padding:"],
.blog-article div[style*="background: #f77f00"][style*="padding:"] {
  background-color: #f77f00 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}
.blog-article div[style*="background:rgba(21,101,199,"][style*="padding:"],
.blog-article section[style*="background:rgba(21,101,199,"][style*="padding:"],
.blog-article div[style*="background: rgba(21,101,199,"][style*="padding:"],
.blog-article section[style*="background: rgba(21,101,199,"][style*="padding:"],
.blog-article div[style*="background:#1565c7"][style*="padding:"],
.blog-article section[style*="background:#1565c7"][style*="padding:"],
.blog-article div[style*="background: #1565c7"][style*="padding:"] {
  background-color: #1565c7 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}

/* Chart-bar primitives — divs with inline width/height/flex + brand
   background but NO padding (so they're bars, not panels). Lighten
   with a soft white vertical gradient so bars stand out on their
   matching-color card without going stark white. Covers both HEX
   (background:#f77f00) and RGBA (background:rgba(247,127,0,1)) forms.
   NOT applied to circles (border-radius:50% elements like step-flow
   badges) — those keep their brand color. */
.blog-article div[style*="width:"][style*="background:#0096c7"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="width:"][style*="background:#4aaa57"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="width:"][style*="background:#f77f00"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="width:"][style*="background:#1565c7"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:#0096c7"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:#4aaa57"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:#f77f00"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:#1565c7"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:rgba(0,150,199,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:rgba(74,170,87,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:rgba(247,127,0,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="height:"][style*="background:rgba(21,101,199,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="flex:"][style*="background:rgba(0,150,199,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="flex:"][style*="background:rgba(74,170,87,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="flex:"][style*="background:rgba(247,127,0,"]:not([style*="padding:"]):not([style*="border-radius:50%"]),
.blog-article div[style*="flex:"][style*="background:rgba(21,101,199,"]:not([style*="padding:"]):not([style*="border-radius:50%"]) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22)) !important;
  opacity: 1 !important;
}

/* Any inline font-size below 16px on text inside a .ia-diagram card
   gets bumped to 16px for readability. */
.blog-article [style*="font-size:14px"],
.blog-article [style*="font-size: 14px"],
.blog-article [style*="font-size:13px"],
.blog-article [style*="font-size: 13px"],
.blog-article [style*="font-size:15px"],
.blog-article [style*="font-size: 15px"] {
  font-size: 16px !important;
}
/* Force every text descendant inside those solid tiles to white, overriding
   any inline brand color or `.ia-*` body/kicker class that would otherwise
   blend into or mute against the matching solid background. */
.blog-article [style*="background:rgba(0,150,199,"] *,
.blog-article [style*="background:rgba(74,170,87,"] *,
.blog-article [style*="background:rgba(247,127,0,"] *,
.blog-article [style*="background:rgba(21,101,199,"] *,
.blog-article [style*="background:#0096c7"] *,
.blog-article [style*="background:#4aaa57"] *,
.blog-article [style*="background:#f77f00"] *,
.blog-article [style*="background:#1565c7"] *,
.blog-article [style*="background:rgba(0,150,199,"] .ia-body,
.blog-article [style*="background:rgba(74,170,87,"] .ia-body,
.blog-article [style*="background:rgba(247,127,0,"] .ia-body,
.blog-article [style*="background:rgba(21,101,199,"] .ia-body,
.blog-article [style*="background:rgba(0,150,199,"] .ia-kicker,
.blog-article [style*="background:rgba(74,170,87,"] .ia-kicker,
.blog-article [style*="background:rgba(247,127,0,"] .ia-kicker,
.blog-article [style*="background:rgba(21,101,199,"] .ia-kicker,
.blog-article [style*="background:rgba(0,150,199,"] .ia-stat-val,
.blog-article [style*="background:rgba(74,170,87,"] .ia-stat-val,
.blog-article [style*="background:rgba(247,127,0,"] .ia-stat-val,
.blog-article [style*="background:rgba(21,101,199,"] .ia-stat-val,
.blog-article [style*="background:rgba(0,150,199,"] .ia-stat-sub,
.blog-article [style*="background:rgba(74,170,87,"] .ia-stat-sub,
.blog-article [style*="background:rgba(247,127,0,"] .ia-stat-sub,
.blog-article [style*="background:rgba(21,101,199,"] .ia-stat-sub,
.blog-article [style*="background:rgba(0,150,199,"] .ia-body-sm,
.blog-article [style*="background:rgba(74,170,87,"] .ia-body-sm,
.blog-article [style*="background:rgba(247,127,0,"] .ia-body-sm,
.blog-article [style*="background:rgba(21,101,199,"] .ia-body-sm {
  color: #ffffff !important;
}
/* White-background inline card: text flips to navy. */
.blog-article [style*="background:#ffffff"],
.blog-article [style*="background: #ffffff"],
.blog-article [style*="background:#fff"],
.blog-article [style*="background: #fff"],
.blog-article [style*="background:rgba(255,255,255,1)"] {
  color: #1a2857 !important;
}
.blog-article [style*="background:#ffffff"] *,
.blog-article [style*="background:#fff"] *,
.blog-article [style*="background:rgba(255,255,255,1)"] * {
  color: #1a2857 !important;
}

/* Neutral white-tinted / navy base containers inside a diagram — strip
   the faint 1px white border and the colored top-border strip the inline
   style sets. Rounded corners too. These look like "ground" panels, not
   bordered boxes. */
.blog-article [style*="border:1px solid rgba(255,255,255"],
.blog-article [style*="border: 1px solid rgba(255,255,255"] {
  border: none !important;
  border-radius: 14px !important;
}

/* Universal rounded-corners pass — ANY inline-styled panel (has both an
   inline background and inline padding, so it's clearly a card) inside
   .blog-article picks up a 14px radius. Covers white, navy, and
   dark-overlay inline cards that the color-specific catch-alls above miss.
   Scoped to div/section so links and chart-bar primitives are untouched. */
.blog-article div[style*="background"][style*="padding:"],
.blog-article section[style*="background"][style*="padding:"] {
  border-radius: 14px !important;
}

/* EXCEPTION: inline list items with a thin left-brand border + subtle
   white background (`background:rgba(255,255,255,.05) + border-left:2px`)
   are stacked list rows, not standalone cards. Strip ALL card decoration:
   border, border-radius, background, gradient. They read as flat rows. */
.blog-article div[style*="background:rgba(255,255,255,.05)"][style*="border-left:2px"],
.blog-article div[style*="background: rgba(255,255,255,.05)"][style*="border-left:2px"],
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:2px"],
.blog-article div[style*="background: rgba(255,255,255,.06)"][style*="border-left:2px"] {
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Number-row grid ─────────────────────────────────────────────────
   A 2-column grid: numbered white circle on the left, brand-color content
   panel on the right. One row per step. Replaces the earlier
   grid-template-columns:auto 1fr inline pattern. */
.ia-number-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 16px;
  column-gap: 16px;
  min-width: 720px;
}
/* White circle holding the digit. Uses the same top-left bloom as every
   other white card so it reads as part of the family. */
.ia-number-grid > .ia-layer {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 24px auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  min-width: 72px;
  align-self: center;
}
.ia-number-digit {
  font-size: 48px;
  font-weight: 900;
  color: #1a2857 !important;
  line-height: 1;
}
/* Right-side content panel in the row. Four brand-color variants. */
.ia-number-card {
  padding: 24px 28px;
  color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-number-card--teal   { background-color: #0096c7; }
.ia-number-card--green  { background-color: #4aaa57; }
.ia-number-card--orange { background-color: #f77f00; }
.ia-number-card--blue   { background-color: #1565c7; }

/* Finalized ia-number-card design (2026-10-14) — rounded corners, pinned
   circle size, and a white lead-card variant. */
.is-blog-post .ia-number-card {
  border-radius: 18px;
}
/* Specificity boost: body + .blog-article + double-class to beat any
   universal override and inline-styled parent rules. */
body .blog-article .ia-number-card.ia-number-card--white {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
body .blog-article .ia-number-card.ia-number-card--white,
body .blog-article .ia-number-card.ia-number-card--white .ia-kicker,
body .blog-article .ia-number-card.ia-number-card--white .ia-sub-h,
body .blog-article .ia-number-card.ia-number-card--white .ia-body {
  color: #1a2857 !important;
}
/* Shrink circles — 72px was too big; match .ia-step-num at 48px. */
.is-blog-post .ia-number-grid > .ia-layer {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex-shrink: 0;
}
.is-blog-post .ia-number-grid > .ia-layer .ia-number-digit {
  font-size: 22px !important;
}
/* Kickers inside Numbered Grid cards: strip the pill, show plain
   uppercase text. White on colored cards; navy on the white card.
   `body .blog-article` prefix beats the later invert rule's specificity. */
body .blog-article .ia-number-card .ia-kicker {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 14px !important;
  letter-spacing: .08em;
  color: #ffffff !important;
}
body .blog-article .ia-number-card.ia-number-card--white .ia-kicker {
  color: #1a2857 !important;
}
.ia-number-card .ia-kicker,
.ia-number-card .ia-sub-h,
.ia-number-card .ia-body,
.ia-number-card [style*="color:#"] {
  color: #ffffff !important;
}
/* Small variant of .ia-kicker — 13px with a tight 6px bottom gap, used
   inside number-row cards and other dense panels. Inherits color from
   the parent .ia-kicker--COLOR classes. */
.ia-kicker--sm {
  font-size: 13px;
  margin-bottom: 6px;
}

/* Faint white-overlay quote blocks inside colored cards (background:
   rgba(255,255,255,.03 / .04 / .05 / .06 / .08)) — strip the background
   entirely so the quote sits as plain text on the colored card. */
.blog-article [style*="background:rgba(255,255,255,.03)"],
.blog-article [style*="background:rgba(255,255,255,.04)"],
.blog-article [style*="background:rgba(255,255,255,.05)"],
.blog-article [style*="background:rgba(255,255,255,.06)"],
.blog-article [style*="background:rgba(255,255,255,.08)"],
.blog-article [style*="background: rgba(255,255,255,.03)"],
.blog-article [style*="background: rgba(255,255,255,.04)"],
.blog-article [style*="background: rgba(255,255,255,.05)"],
.blog-article [style*="background: rgba(255,255,255,.06)"],
.blog-article [style*="background: rgba(255,255,255,.08)"] {
  background: transparent !important;
}

/* ── Centered small card with coloured top accent. */
.ia-center-card {
  padding: 16px;
  text-align: center;
  color: #ffffff;
  border-radius: 14px;
  border: none;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-center-card--teal   { background-color: #0096c7; }
.ia-center-card--green  { background-color: #4aaa57; }
.ia-center-card--orange { background-color: #f77f00; }
.ia-center-card--blue   { background-color: #1565c7; }
.ia-center-card,
.ia-center-card [style*="color:#"],
.ia-center-card [style*="color:rgba"],
.ia-center-card .ia-kicker,
.ia-center-card .ia-kicker--teal,
.ia-center-card .ia-kicker--green,
.ia-center-card .ia-kicker--orange,
.ia-center-card .ia-kicker--blue,
.ia-center-card .ia-body,
.ia-center-card .ia-body-sm,
.ia-center-card .ia-stat-val,
.ia-center-card .ia-stat-sub,
.ia-center-card .ia-sub-h {
  color: #ffffff !important;
}

/* ── Left-border card with 24px padding (no all-round border). */
.ia-left-card {
  padding: 24px;
  color: #ffffff;
  border-radius: 14px;
  border: none;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-left-card--teal   { background-color: #0096c7; }
.ia-left-card--green  { background-color: #4aaa57; }
.ia-left-card--orange { background-color: #f77f00; }
.ia-left-card--blue   { background-color: #1565c7; }
.ia-left-card,
.ia-left-card [style*="color:#"],
.ia-left-card [style*="color:rgba"],
.ia-left-card .ia-kicker,
.ia-left-card .ia-kicker--teal,
.ia-left-card .ia-kicker--green,
.ia-left-card .ia-kicker--orange,
.ia-left-card .ia-kicker--blue,
.ia-left-card .ia-body,
.ia-left-card .ia-body-sm,
.ia-left-card .ia-stat-val,
.ia-left-card .ia-stat-sub,
.ia-left-card .ia-sub-h {
  color: #ffffff !important;
}

/* ── Sub-heading margin-bottom modifiers. */
.ia-sub-h--mb-4  { margin-bottom: 4px; }
.ia-sub-h--mb-8  { margin-bottom: 8px; }
.ia-sub-h--mb-12 { margin-bottom: 12px; }
/* Let the inside-pages .ia-mb-0 utility actually zero the sub-h / stat-val
   margin even though it loads BEFORE this file (otherwise the base rule
   wins on specificity-tie + source-order). */
.ia-sub-h.ia-mb-0,
.ia-stat-val.ia-mb-0 { margin-bottom: 0; }

/* ── Inline numeric/text prefix (e.g. "01 ", "A. ") in brand color. */
.ia-prefix {
  font-weight: 700;
  margin-right: 10px;
}
.ia-prefix--teal   { color: #0096c7; }
.ia-prefix--green  { color: #4aaa57; }
.ia-prefix--orange { color: #f77f00; }
.ia-prefix--blue   { color: #1565c7; }

/* ── Micro kicker — 9px uppercase label (very small, used as a chart cell
   caption). Keep its intentionally tight sizing. */
.ia-micro-kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .85;
  margin-bottom: 1px;
}

/* ── Grid wrappers used by scrollable diagrams.
   .ia-grid-2 no longer forces min-width:760 — on narrow desktop widths
   that was pushing the 2-card row past the viewport and triggering an
   ugly horizontal scrollbar inside the diagram. Cards now shrink
   responsively; mobile @media collapses to 1fr. */
.ia-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Universal: 3-card groups also stack vertically — matches .ia-grid-4
   and .ia-grid-5. 58 articles get wider, more-readable cards. */
.ia-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ia-grid-3--flush {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
/* Universal: a 5-card group reads better stacked than squeezed into 5
   narrow columns. Single-column on every width across all 32 posts that
   use .ia-grid-5. */
.ia-grid-5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
/* Universal: a horizontal row of cards reads better stacked than squeezed
   into narrow columns. Always column across every width + every article. */
.ia-row-flex {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
/* Finalized ia-row-flex design (2026-10-14): don't let cards grow
   vertically to fill container (flex:1 → flex:0 0 auto), and tighten
   the arrow spacing between cards. Card width stays full-width. */
.is-blog-post .ia-row-flex {
  gap: 4px;
}
.is-blog-post .ia-row-flex .ia-flex-col {
  flex: 0 0 auto;
}
.is-blog-post .ia-row-flex > .ia-arrow,
.is-blog-post .ia-row-flex > .ia-stat-inline {
  margin: 0 !important;
  padding: 2px 0 !important;
}

/* ── Progress bar across a 3-step flow (sits behind step circles). */
.ia-progress-bar {
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, #0096c7, #f77f00, #4aaa57);
}

/* ── Big stat numeral — 24px bold brand-color on dark. */
.ia-stat-big {
  font-size: 24px;
  font-weight: 700;
}
.ia-stat-big--teal   { color: #0096c7; }
.ia-stat-big--green  { color: #4aaa57; }
.ia-stat-big--orange { color: #f77f00; }
.ia-stat-big--blue   { color: #1565c7; }

/* ── Body with brand-color variant (used on the subtler diagrams).
   Opacity bumped to .9 so muted body reads clearly on dark cards. */
.ia-body--muted {
  color: #ffffff;
  line-height: 1.65;
  margin-bottom: 12px;
}
.ia-body--softblue {
  color: #c8d8f0;
  line-height: 1.9;
}
/* Text inside a light callout flips to navy — override the global
   .ia-body / .ia-kicker colors which assume a dark container. */
.ia-callout .ia-body {
  color: rgba(26, 40, 87, 0.78);
}
.ia-callout .ia-kicker,
.ia-callout .ia-stat-val,
.ia-callout .ia-stat-sub,
.ia-callout .ia-h,
.ia-callout [style*="text-transform:uppercase"],
.ia-callout [style*="color:#"] {
  color: #1a2857 !important;
}
/* Also catch inline `color:rgba(...)` text (not just hex colors). Chained
   specificity (.ia-diagram .ia-callout […]) beats the later
   `.ia-diagram [style*="color:rgba(255,255,255,"]` rule that would
   otherwise paint callout body text white and hide it on the white bg. */
.ia-diagram .ia-callout [style*="color:rgba"] {
  color: #1a2857 !important;
}
/* Only the colored left-border carries the brand accent now; every text
   element inside a white callout is navy for readability. */

/* ── Solid-color layer cards ──────────────────────────────────────────
   Previously these shipped as inline `background:rgba(…,.1);border-left…`
   on each card, which rendered a faint tint. The class versions below
   lift the background to the brand color at full opacity so the card
   reads as a solid tile (matches the homepage Case Studies bento look).
   One class to change the look of every layer card site-wide. */
.ia-layer {
  padding: 18px 24px;
  margin-bottom: 12px;
  color: #ffffff;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  display: flex;
  align-items: center;
  gap: 18px;
}
.ia-layer--teal   { background: #0096c7; }
.ia-layer--green  { background: #4aaa57; }
.ia-layer--orange { background: #f77f00; }
.ia-layer--blue   { background: #1565c7; }
.ia-layer--navy   { background: #0f1a3a; }
.ia-layer--white  { background-color: #ffffff; color: #1a2857; }
/* Grid variant — vertical card inside a parent `display:grid`. The base
   `.ia-layer` is horizontal (circle + body side-by-side); grid cards hold
   stacked kicker/title/body instead, so override back to block layout. */
.ia-layer--grid {
  display: block;
  margin-bottom: 0;
  padding: 20px;
}
/* Inside a solid-color layer card: any brand-colored uppercase kicker
   would blend into the matching background. Flip ALL text (including
   inline-styled kickers) to white so headings/kickers/body stay
   readable on green / teal / orange / blue / navy tiles. */
.ia-layer .ia-kicker,
.ia-layer .ia-stat-val,
.ia-layer .ia-stat-sub,
.ia-layer .ia-body,
.ia-layer [style*="text-transform:uppercase"],
.ia-layer [style*="color:#"],
.ia-layer [style*="color:rgba"] {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Additional class-ification pass — classes for the high-frequency inline
   patterns that remained after the first migration passes.
   ═══════════════════════════════════════════════════════════════════════ */

/* Generic solid-color card wrapper (padding:24px) ────────────────────── */
.ia-card {
  padding: 24px;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-card--teal   { background-color: #0096c7; }
.ia-card--green  { background-color: #4aaa57; }
.ia-card--orange { background-color: #f77f00; }
.ia-card--blue   { background-color: #1565c7; }
.ia-card--white  { background-color: #ffffff; color: #1a2857; }
/* Space between adjacent stacked cards (not inside a grid, which handles
   its own gap). Applies anywhere two .ia-card siblings sit next to each
   other — matches the former .ia-layer margin-bottom pattern. */
.ia-card + .ia-card { margin-top: 12px; }
/* Compact padding modifier (22px 20px). */
.ia-card--p22 { padding: 22px 20px; }
/* Centered small card (padding:16px + text-align:center). */
.ia-card--c16 { padding: 16px; text-align: center; }
/* Centered text — reusable modifier that pairs with any .ia-card--COLOR. */
.ia-card--center { text-align: center; }
/* Grid span: card takes 2 columns inside a .ia-grid-3 / .ia-grid-4. */
.ia-card--span2 { grid-column: span 2; }
/* Small inline chip — compact label tile with uppercase brand text. */
.ia-chip {
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffff;
  border-radius: 6px;
}
.ia-chip--teal   { background-color: #0096c7; }
.ia-chip--green  { background-color: #4aaa57; }
.ia-chip--orange { background-color: #f77f00; }
.ia-chip--blue   { background-color: #1565c7; }

/* Chevron (right-pointing arrow shape, clip-path based) — used for
   horizontal process-flow tiles where each stage points to the next. */
.ia-chevron {
  padding: 18px 14px;
  text-align: center;
  color: #ffffff;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}
.ia-chevron--teal   { background-color: #0096c7; }
.ia-chevron--green  { background-color: #4aaa57; }
.ia-chevron--orange { background-color: #f77f00; }
.ia-chevron--blue   { background-color: #1565c7; }

/* ═══════════════════════════════════════════════════════════════════
   Common inline-replacement utilities — one class per high-frequency
   inline pattern so a single CSS change updates the whole site. */

/* .ia-diagram margin variant: m48 (was `margin:48px 0`). */
.ia-diagram--m48 { margin: 48px 0; }

/* H2 variant with 8px bottom gap instead of the default 28px. */
.ia-h--snug { margin-bottom: 8px; }

/* Kicker variants that differ from the default .ia-kicker:
     --sm (11px) + --md (13px) with 8px bottom gap and solid #fff. */
.ia-kicker--md {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}
.ia-kicker--eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f77f00;
  margin-bottom: 12px;
}

/* Grid variants that stay multi-column at desktop and get horizontal
   scroll on mobile (via a parent .blog-diagram-scroll or min-width). */
.ia-grid-2--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 720px; }
.ia-grid-3--wide { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; min-width: 720px; }
.ia-grid-4--wide { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; min-width: 720px; }
.ia-grid-4--flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.ia-grid-5--flow { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }

/* Step column (centered content, position:relative for progress-bar
   overlay sibling). */
.ia-step-col { text-align: center; position: relative; }
.ia-step-col--flex { flex: 1; text-align: center; padding: 0 8px; }

/* Step circle (52x52 round brand-color tile with white digit, used in
   horizontal step-flow). The 72x72 variant is .ia-step-circle--lg. */
.ia-step-circle-md {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
}
.ia-step-circle-md--teal   { background: #0096c7; }
.ia-step-circle-md--green  { background: #4aaa57; }
.ia-step-circle-md--orange { background: #f77f00; }
.ia-step-circle-md--blue   { background: #1565c7; }

/* Step label + sub (sit under step circle). */
.ia-step-label { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ia-step-label--big { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: .05em; }
.ia-step-sub { font-size: 16px; color: #ffffff; }
.ia-step-sub--sm { font-size: 14px; color: #ffffff; }

/* Chart container + columns + labels (horizontal bar chart). */
.ia-chart-container {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  height: 160px;
  padding: 8px 6px;
  background: rgba(0,0,0,.18);
  border-radius: 12px;
}
/* Breathing room above the chart when it follows the kicker directly (no sub-h). */
.ia-accent-card .ia-chart-container { margin-top: 16px; }
/* Inside an accent-card (bar-chart cards), the footer badge-callout is a
   full-width colored strip, not the small-bold inline treatment the global
   .is-blog-post .ia-badge-callout rule enforces. */
.is-blog-post .ia-accent-card .ia-badge-callout {
  display: block !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  margin-top: 16px !important;
}
.is-blog-post .ia-accent-card .ia-badge-callout--orange { background-color: #f77f00 !important; color: #ffffff !important; }
.is-blog-post .ia-accent-card .ia-badge-callout--green  { background-color: #4aaa57 !important; color: #ffffff !important; }
.is-blog-post .ia-accent-card .ia-badge-callout--teal   { background-color: #0096c7 !important; color: #ffffff !important; }
.is-blog-post .ia-accent-card .ia-badge-callout--blue   { background-color: #1565c7 !important; color: #ffffff !important; }
.ia-chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ia-chart-labels {
  display: flex;
  gap: 12px;
  padding: 0 6px;
  font-size: 13px;
  color: #ffffff;
  margin-top: 10px;
}
.ia-chart-labels > * { flex: 1; text-align: center; }

/* Flex-centered 1-cell container (SVG icon in a 40px slot). */
.ia-slot-40 { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; padding-bottom: 20px; }

/* Inline icon utility — vertical-align middle + right margin. */
.ia-icon-r8  { vertical-align: middle; margin-right: 8px; }
.ia-icon-r10 { vertical-align: middle; margin-right: 10px; }

/* Body-size muted (16px white .78 opacity, 1.6 line-height) and its
   wider variant with 32px bottom gap. */
.ia-body--softmuted { font-size: 16px; color: #ffffff; line-height: 1.6; }
.ia-body--softmuted-24 { font-size: 16px; color: #ffffff; line-height: 1.65; margin-bottom: 24px; }
.ia-body--softmuted-10 { font-size: 16px; color: #ffffff; line-height: 1.65; margin-bottom: 10px; }
.ia-body--softmuted-mb { font-size: 16px; color: #ffffff; line-height: 1.65; }
.ia-body--dim32 { font-size: 16px; color: #ffffff; margin-bottom: 32px; }

/* Small-brand kicker: 16px bold brand color with 8px bottom gap. */
.ia-sub-h--teal   { font-size: 16px; font-weight: 700; color: #0096c7; margin-bottom: 8px; }
.ia-sub-h--green  { font-size: 16px; font-weight: 700; color: #4aaa57; margin-bottom: 8px; }
.ia-sub-h--orange { font-size: 16px; font-weight: 700; color: #f77f00; margin-bottom: 8px; }
.ia-sub-h--blue   { font-size: 16px; font-weight: 700; color: #1565c7; margin-bottom: 8px; }

/* Mid H3 — 20px bold white with 10px bottom gap. */
.ia-h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   Grid wrappers — 2 / 3 / 4 / 5 columns + comparison "A vs B" layouts
   with 40/60px arrow spacers in between. Desktop fits container width
   (cards shrink to fit), mobile collapses to 1fr via @media below. No
   min-width: cards breathe at every width; the parent
   .blog-diagram-scroll's overflow-x:auto is enough safety for very
   narrow screens. */
.ia-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ia-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ia-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Max-centered 4-col — small centered cards (max-width 700, text-align:center). */
.ia-g4-centered {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
/* 5-col step-flow with position-relative so a progress bar can overlay.
   min-width keeps the row at readable size on narrow desktops / tablets
   and triggers horizontal scroll in parent `.blog-diagram-scroll` or
   `.cs-card--navy-border-teal` instead of squashing. */
.ia-g3-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; min-width: 480px; }
.ia-g4-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; min-width: 600px; }
.ia-g5-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; min-width: 720px; }
.ia-g6-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; min-width: 820px; }

/* Comparison "A vs B" (2 cols with 60px arrow slot in middle). */
.ia-g2-vs {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 16px;
  align-items: stretch;
}
/* Comparison 3-stage roadmap (3 cols with 40px arrow slots between). */
.ia-g3-vs {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: 0;
  align-items: stretch;
}
/* Compact 4-col with small 10/12px gap (dense stat row). Stacks to 2
   columns on narrow desktops / tablets, and to a single column on
   phones so long tile content (long titles, URLs) doesn't overflow. */
.ia-g4-tight  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ia-g4-tight2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1024px) {
  .ia-g4-tight,
  .ia-g4-tight2 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .ia-g4-tight,
  .ia-g4-tight2 { grid-template-columns: 1fr !important; }
}
/* Belt-and-braces: long un-breakable tokens (URLs, product names like
   "LandbrokerMLS.com") inside tile titles break instead of overflowing. */
.cs-dd-4-tiles .cs-ba-label,
.cs-dd-4-tiles .cs-mini-body { overflow-wrap: anywhere; }
/* Inset "note" tile for the dark highlight that sits at the bottom of
   a task/stage card (e.g. "AI Assistant acts; humans review..."). */
.ia-card-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
}
.ia-card--white .ia-card-note {
  background: rgba(26,40,87,0.08);
  color: #1a2857;
}
/* Flip text to white inside any solid-color .ia-card. */
.ia-card,
.ia-card .ia-kicker,
.ia-card .ia-sub-h,
.ia-card .ia-body,
.ia-card .ia-body-sm,
.ia-card .ia-stat-val,
.ia-card .ia-stat-sub,
.ia-card [style*="color:#"],
.ia-card [style*="color:rgba"] {
  color: #ffffff !important;
}
/* …but on the white variant, everything flips BACK to navy. Must come
   AFTER the white-text block above to win on cascade order (same
   specificity). */
.ia-card.ia-card--white,
.ia-card.ia-card--white .ia-kicker,
.ia-card.ia-card--white .ia-sub-h,
.ia-card.ia-card--white .ia-body,
.ia-card.ia-card--white .ia-body-sm,
.ia-card.ia-card--white .ia-stat-val,
.ia-card.ia-card--white .ia-stat-sub,
.ia-card.ia-card--white .ia-layer-kicker,
.ia-card.ia-card--white .ia-layer-title,
.ia-card.ia-card--white .ia-layer-desc {
  color: #1a2857 !important;
}

/* ─── White-variant card universal rule ─────────────────────────────
   Any .ia-layer--white or .ia-card--white tile: (1) all descendant text
   is navy, (2) the .ia-step-num circle inverts to navy bg + white digit
   so it stays visible against the white card. One rule, every article. */
body .blog-article .ia-layer--white,
body .blog-article .ia-layer--white *:not([class*="kicker-style"]):not([class*="kicker-style"] *),
body .blog-article .ia-card--white,
body .blog-article .ia-card--white *:not([class*="kicker-style"]):not([class*="kicker-style"] *) {
  color: #1a2857 !important;
}
body .blog-article .ia-layer--white div.ia-step-num.ia-step-num,
body .blog-article .ia-card--white div.ia-step-num.ia-step-num {
  background-color: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
}
/* Kicker pill on a white card: keep base navy-pill + white text so the
   label stays visible. The universal `.ia-card--white *` rule above was
   forcing kicker text to navy, which blended into its navy pill bg. */
body .blog-article .ia-card.ia-card--white .ia-kicker,
body .blog-article .ia-card--white > .ia-kicker,
.is-blog-post .ia-card.ia-card--white .ia-kicker {
  color: #ffffff !important;
}

/* Solid-color pill — 12x14 padded brand-color tile. Border removed
   per 2026-10-11 feedback (the 2px left border was redundant since the
   fill already carries the brand color). */
.ia-left-pill {
  padding: 12px 14px;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-left-pill--teal   { background-color: #0096c7; }
.ia-left-pill--green  { background-color: #4aaa57; }
.ia-left-pill--orange { background-color: #f77f00; }
.ia-left-pill--blue   { background-color: #1565c7; }
.ia-left-pill--white  { background-color: #ffffff; }
.ia-left-pill,
.ia-left-pill .ia-kicker,
.ia-left-pill .ia-body,
.ia-left-pill [style*="color:#"],
.ia-left-pill [style*="color:rgba"] {
  color: #ffffff !important;
}

/* Kicker size + spacing modifiers ─────────────────────────────────────── */
/* Extra-small kicker (10px) with 8px bottom gap. */
.ia-kicker--xs {
  font-size: 10px;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
/* Mid kicker (11px) with 16px bottom gap. */
.ia-kicker--mid {
  font-size: 11px;
  margin-bottom: 16px;
}
/* Thin 13px with 4px bottom gap. */
.ia-kicker--thin {
  font-size: 13px;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
/* White color (used when parent isn't a solid-color card). */
.ia-kicker--white { color: #ffffff; }
/* Soft-blue color (used on navy sections). */
.ia-kicker--softblue { color: #7db4ff; }

/* Body text spacing / line-height modifiers ──────────────────────────── */
/* Tighter line-height (1.55). */
.ia-body--tight {
  line-height: 1.55;
}
/* Looser line-height (1.85 or 1.9). */
.ia-body--loose {
  line-height: 1.9;
}
/* Dim text (opacity .85). */
.ia-body--dim {
  color: #ffffff;
  margin-bottom: 4px;
}
/* Body with explicit margin-bottom. */
.ia-body--mb-10 { margin-bottom: 10px; }
/* Small body with 16px bottom margin. */
.ia-body-sm--mb-16 { margin-bottom: 16px; }
/* 14px body with .85 opacity + line-height 1.6. */
.ia-body--14-dim {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
}

/* Additional grid wrappers ──────────────────────────────────────────────
   Universal: a 4-card group reads better stacked than squeezed into 4
   narrow columns. Same treatment as .ia-grid-5. */
.ia-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.ia-grid-3--tight {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ia-grid-2--tight {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  min-width: 720px;
}

/* Ghost cards — translucent white tiles used on navy sections ──────── */
/* 22px padded ghost card — border removed per 2026-10-11 feedback (the
   1px white outline looked like an unwanted frame around content). */
.ia-ghost-card {
  padding: 22px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.06);
  border: none;
  border-radius: 14px;
  color: #ffffff;
}
/* Compact 14px padded ghost pill. */
.ia-ghost-pill {
  padding: 14px;
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  color: #ffffff;
}

/* Row header — centered 14x16 pill with hairline bottom and faint tint,
   used as a column header inside a stacked list. */
.ia-row-header {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

/* ─── Finalized Compare Table design (2026-10-14) ─────────────────────
   Scorecard-style colorful grid: rectangular rounded cards (not pills).
   Each data cell is a brand-colored rounded card, color per column.
   First column = teal rounded card (like Scorecard's row labels).
   Column header row = brand-colored rectangular labels (not pills).
   Mobile keeps horizontal scroll — compare tables need width. */
.is-blog-post .ia-compare-table,
body .blog-article .ia-compare-table[style] {
  gap: 6px !important;
  row-gap: 6px !important;
  column-gap: 10px !important;
}
/* Column header cells (badge-callouts row 1): rectangular rounded, not pills. */
.is-blog-post .ia-compare-table > .ia-badge-callout {
  margin: 0 !important;
  padding: 12px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
/* Row-header cells (first column): white gradient card, navy text. */
.is-blog-post .ia-compare-table > .ia-row-header {
  padding: 14px 16px !important;
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 700;
  color: #1a2857 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
}
/* SIGNAL column header (first cell, inline-styled) — remove its bg and
   bottom border so it reads as a plain label. */
.is-blog-post .ia-compare-table > *:first-child {
  background: transparent !important;
  border: none !important;
}
/* Data cells become rectangular rounded cards, color per column. */
.is-blog-post .ia-compare-table > .ia-row-line {
  padding: 14px 16px !important;
  text-align: center;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
/* Sentiment-based cell colors: GREEN = positive/best, TEAL = neutral,
   ORANGE = weaker/more effort. Cells targeted by grid position. */
/* GREEN — Native, Strong, Yes, Strongest, Yes/open, Yours by default,
   Framework-neutral, Provider-neutral, None */
.is-blog-post .ia-compare-table > :nth-child(7),
.is-blog-post .ia-compare-table > :nth-child(8),
.is-blog-post .ia-compare-table > :nth-child(12),
.is-blog-post .ia-compare-table > :nth-child(13),
.is-blog-post .ia-compare-table > :nth-child(17),
.is-blog-post .ia-compare-table > :nth-child(18),
.is-blog-post .ia-compare-table > :nth-child(19),
.is-blog-post .ia-compare-table > :nth-child(23),
.is-blog-post .ia-compare-table > :nth-child(25),
.is-blog-post .ia-compare-table > :nth-child(28),
.is-blog-post .ia-compare-table > :nth-child(29),
.is-blog-post .ia-compare-table > :nth-child(30) {
  background: #4aaa57 !important;
  color: #ffffff !important;
}
/* TEAL — API-level, Proxy layer */
.is-blog-post .ia-compare-table > :nth-child(9),
.is-blog-post .ia-compare-table > :nth-child(24) {
  background: #0096c7 !important;
  color: #ffffff !important;
}
/* ORANGE — You build it, Basic, Your framework, Limited, LangChain-leaning */
.is-blog-post .ia-compare-table > :nth-child(10),
.is-blog-post .ia-compare-table > :nth-child(14),
.is-blog-post .ia-compare-table > :nth-child(15),
.is-blog-post .ia-compare-table > :nth-child(20),
.is-blog-post .ia-compare-table > :nth-child(22),
.is-blog-post .ia-compare-table > :nth-child(27) {
  background: #f77f00 !important;
  color: #ffffff !important;
}
/* Framework lock-in row data cells (inline-styled divs at 27-30) also
   get the shared card styling: rounded corners, padding, centered.
   Also target .ia-cell-metric / .ia-cell-metric-head so the metric row
   gets rounded cards for ANY compare-table shape (2-col, 3-col, 4-col). */
.is-blog-post .ia-compare-table > :nth-child(27),
.is-blog-post .ia-compare-table > :nth-child(28),
.is-blog-post .ia-compare-table > :nth-child(29),
.is-blog-post .ia-compare-table > :nth-child(30),
.is-blog-post .ia-compare-table > .ia-cell-metric,
.is-blog-post .ia-compare-table > .ia-cell-metric-head {
  padding: 14px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px;
}
/* Metric-head cell gets the same white-gradient card as .ia-row-header
   so the row label is readable regardless of column count. */
.is-blog-post .ia-compare-table > .ia-cell-metric-head {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}

/* Inline stat heading — a flex row with brand-color 20px text (used as
   a sub-section label with icon). */
.ia-stat-inline {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
}
.ia-stat-inline--teal   { color: #0096c7; }
.ia-stat-inline--green  { color: #4aaa57; }
.ia-stat-inline--orange { color: #f77f00; }
.ia-stat-inline--blue   { color: #1565c7; }
/* When a .ia-stat-inline is used as a "vs" / arrow separator between
   stacked cards inside .ia-row-flex, flip it to white + centered.
   .ia-row-flex is universally stacked column now, so the separator
   needs center alignment and white color (brand variants would blend
   into cards). */
.ia-row-flex > .ia-stat-inline {
  color: #ffffff !important;
  justify-content: center !important;
  text-align: center;
}
/* Any SVG arrow glyph rendered inside the common arrow slot (.ia-slot-40)
   inherits the universal arrow color — WHITE. Overrides inline brand
   strokes like `stroke="#0096c7"` so every step-flow arrow site-wide
   paints the same color. Change here once, every arrow updates. */
.ia-slot-40 svg,
.ia-slot-40 svg path,
.ia-slot-40 svg line,
.ia-slot-40 svg polyline {
  stroke: #ffffff !important;
}

/* Universal arrow — size + color are now owned by the base .ia-arrow
   rule in inside-pages.css. This block only sets the GLYPH direction
   for the responsive .ia-arrow--rotate variant (→ on desktop rows,
   ↓ on mobile stacks + wherever cards are stacked by .ia-row-flex). */
.ia-arrow--rotate {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  padding: 8px 0 !important;
}
.ia-arrow--rotate::after {
  content: '\2192\FE0E';
  font-size: 22px !important;
  line-height: 1;
  color: #ffffff;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ia-row-flex .ia-arrow--rotate::after {
  content: '\2193\FE0E';
}

/* Comparison tables keep their wide multi-col grid even at top level. */
.blog-diagram-scroll > .ia-compare-table,
.ia-diagram > .ia-compare-table {
  display: grid !important;
  grid-template-columns: 220px repeat(4, 1fr) !important;
  min-width: 860px !important;
  row-gap: 6px !important;
  column-gap: 10px !important;
}
/* 4-col variant: wider row-label + 3 data cols (for product listings). */
.blog-diagram-scroll > .ia-compare-table--4col,
.ia-diagram > .ia-compare-table--4col {
  grid-template-columns: 2fr 1.3fr .6fr 1.4fr !important;
  min-width: 680px !important;
}
/* 2-col variant: label + 2 data cols (A vs B comparisons). */
.blog-diagram-scroll > .ia-compare-table--2col,
.ia-diagram > .ia-compare-table--2col {
  grid-template-columns: 180px 1fr 1fr !important;
  min-width: 680px !important;
}

/* Centered icon cell (24px glyph in a centered flex box). */
.ia-icon-center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
}

/* Compact badge callout — small tinted bar with brand-color text, used
   as a footer-strip below a card. */
.ia-badge-callout {
  margin-top: 16px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 14px;
}
.ia-badge-callout--teal   { background-color: #0096c7; color: #ffffff; }
.ia-badge-callout--green  { background-color: #4aaa57; color: #ffffff; }
.ia-badge-callout--orange { background-color: #f77f00; color: #ffffff; }
.ia-badge-callout--blue   { background-color: #1565c7; color: #ffffff; }

/* Compact sub-heading (16px bold white, 6px bottom gap). */
.ia-sub-h--sm {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

/* Icon-center: bump the dim rgba to .9 so chart glyphs read clearly. */
.ia-icon-center { color: #ffffff; }

/* NOTE: previously had a global opacity-bump catch-all here that forced
   every rgba(255,255,255,.5-.95) → solid #ffffff across .blog-article.
   REMOVED on 2026-10-11 because it killed the intended light-gray text
   hierarchy on plain navy sections (step labels, captions, descriptions).
   Text inside brand-color cards is still forced to #ffffff via the
   per-card rules (.ia-card *, .ia-bordered-card *, .ia-layer *, and
   the inline background:rgba(brand,…) + padding descendant rule). */

/* ─── Infographic arrows → always white ─────────────────────────────
   Arrows (→ ↓ ⇒ ▶) between infographic steps / columns ship with
   inline brand colors (teal / orange). Force them to white so they
   read as neutral connectors against the navy diagram background,
   not as colored elements that compete with the brand cards. Matches
   every arrow-glyph pattern found across posts/industries/services/
   case-studies. */
.blog-article div[style*="color:#0096c7"][style*="font-size:20px"][style*="font-weight:700"][style*="text-align:center"],
.blog-article div[style*="color:#0096c7"][style*="font-size:18px"][style*="font-weight:700"][style*="text-align:center"],
.blog-article div[style*="color:#0096c7"][style*="font-size:22px"][style*="font-weight:700"],
.blog-article div[style*="color:#f77f00"][style*="font-size:24px"][style*="font-weight:700"],
.blog-article div[style*="color:#f77f00"][style*="font-weight:700"]:not([style*="font-size"]),
.blog-article div[style*="color:#0096c7"][style*="font-size:36px"][style*="font-weight:800"] {
  color: #ffffff !important;
}

/* Class-based arrows — `.ia-stat-big--COLOR` used as a lone glyph (→ ↓)
   inside a flex-centered slot between diagram columns. Scoped to :only-child
   so real stat numbers (which sit next to a label sibling) are untouched. */
.blog-article div[style*="justify-content:center"] > .ia-stat-big:only-child,
.blog-article div[style*="justify-content: center"] > .ia-stat-big:only-child {
  color: #ffffff !important;
}

/* ─── Table header cells (brand-color + padding:14px 16px + border-bottom)
   are flat table cells, not standalone cards. Strip the rounded corners
   and the dark top-left bloom that the universal catch-alls apply, so
   they read as proper table columns, not floating pills. */
.blog-article div[style*="padding:14px 16px"][style*="border-bottom:2px solid"],
.blog-article div[style*="padding: 14px 16px"][style*="border-bottom:2px solid"],
.blog-article div[style*="padding:14px 16px"][style*="border-bottom: 2px solid"],
.blog-article div[style*="padding: 14px 16px"][style*="border-bottom: 2px solid"] {
  border-radius: 0 !important;
  background-image: none !important;
}

/* ─── Dark-overlay callout (translucent white + left brand border) → WHITE
   Pattern: `background:rgba(255,255,255,.04/.06)` + `border-left:3px solid #BRAND`
   lives inside a navy diagram as a subtle quote-callout. Convert to a
   white card with the standard dark top-left bloom (same look as
   .ia-callout) and navy text so it reads cleanly against the navy
   background. Left brand-color border preserved as a subtle accent.
   43 instances across posts + case_studies get this treatment. */
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid"],
.blog-article div[style*="background:rgba(255,255,255,.05)"][style*="border-left:3px solid"],
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid"],
.blog-article div[style*="background:rgba(255,255,255,.08)"][style*="border-left:3px solid"] {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 14px !important;
  color: #1a2857 !important;
}
/* Flip all text inside those white callouts to navy. */
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid"] *,
.blog-article div[style*="background:rgba(255,255,255,.05)"][style*="border-left:3px solid"] *,
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid"] *,
.blog-article div[style*="background:rgba(255,255,255,.08)"][style*="border-left:3px solid"] * {
  color: #1a2857 !important;
}

/* ─── Gray stage cards → brand teal ──────────────────────────────────
   Pattern: `background:rgba(255,255,255,.08)` + `border-top:3px solid #fff`
   was used as a "neutral/inactive" stage card. User wants brand colors
   consistently — convert to teal with matching top border. */
.blog-article div[style*="background:rgba(255,255,255,.08)"][style*="border-top:3px solid #fff"],
.blog-article div[style*="background:rgba(255,255,255,.12)"][style*="border-top:3px solid #fff"] {
  background-color: #0096c7 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border-top-color: #0096c7 !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}
.blog-article div[style*="background:rgba(255,255,255,.08)"][style*="border-top:3px solid #fff"] *,
.blog-article div[style*="background:rgba(255,255,255,.12)"][style*="border-top:3px solid #fff"] * {
  color: #ffffff !important;
}

/* ─── Light-tint sub-cards (rgba(brand,.12) + border-top:2px) ─────
   The .12 opacity + 2px top border + padding:16px pattern is used for
   "sub-feature" cards sitting on a navy canvas. My brand-color catch-all
   above was painting them solid, killing the subtle look. Override to
   render as WHITE cards with the dark top-left bloom (same look as
   .ia-callout), so they read as calm feature tiles. The 2px brand
   border-top stays as a subtle accent. */
.blog-article div[style*="background:rgba(0,150,199,.12)"][style*="padding:16px"][style*="border-top:2px"],
.blog-article div[style*="background:rgba(74,170,87,.12)"][style*="padding:16px"][style*="border-top:2px"],
.blog-article div[style*="background:rgba(247,127,0,.12)"][style*="padding:16px"][style*="border-top:2px"],
.blog-article div[style*="background:rgba(21,101,199,.12)"][style*="padding:16px"][style*="border-top:2px"] {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border-radius: 14px !important;
  color: #1a2857 !important;
}
/* Flip all text inside those white cards to navy (overrides the global
   white-descendant rule from the catch-all above). */
.blog-article div[style*="background:rgba(0,150,199,.12)"][style*="padding:16px"][style*="border-top:2px"] *,
.blog-article div[style*="background:rgba(74,170,87,.12)"][style*="padding:16px"][style*="border-top:2px"] *,
.blog-article div[style*="background:rgba(247,127,0,.12)"][style*="padding:16px"][style*="border-top:2px"] *,
.blog-article div[style*="background:rgba(21,101,199,.12)"][style*="padding:16px"][style*="border-top:2px"] * {
  color: #1a2857 !important;
}

/* ─── Inner body-block (same-brand-color panel INSIDE a card) ──────
   Pattern: a nested div with `background:rgba(brand,1);padding:10px 14px`
   that sits inside its parent card. Reads as a quote/callout extension
   of the card, not as its own card. Strip the dark bloom + card
   background (both are redundant and look like a washed overlay) and
   mark it with a left white 2px border for emphasis. */
.blog-article div[style*="background:rgba(0,150,199,"][style*="padding:10px 14px"],
.blog-article div[style*="background: rgba(0,150,199,"][style*="padding:10px 14px"],
.blog-article div[style*="background:rgba(74,170,87,"][style*="padding:10px 14px"],
.blog-article div[style*="background: rgba(74,170,87,"][style*="padding:10px 14px"],
.blog-article div[style*="background:rgba(247,127,0,"][style*="padding:10px 14px"],
.blog-article div[style*="background: rgba(247,127,0,"][style*="padding:10px 14px"],
.blog-article div[style*="background:rgba(21,101,199,"][style*="padding:10px 14px"],
.blog-article div[style*="background: rgba(21,101,199,"][style*="padding:10px 14px"],
.blog-article div[style*="background:rgba(0,150,199,"][style*="padding:10px 12px"],
.blog-article div[style*="background: rgba(0,150,199,"][style*="padding:10px 12px"],
.blog-article div[style*="background:rgba(74,170,87,"][style*="padding:10px 12px"],
.blog-article div[style*="background: rgba(74,170,87,"][style*="padding:10px 12px"],
.blog-article div[style*="background:rgba(247,127,0,"][style*="padding:10px 12px"],
.blog-article div[style*="background: rgba(247,127,0,"][style*="padding:10px 12px"],
.blog-article div[style*="background:rgba(21,101,199,"][style*="padding:10px 12px"],
.blog-article div[style*="background: rgba(21,101,199,"][style*="padding:10px 12px"] {
  background-color: rgba(0,0,0,.18) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
}

/* ─── MOBILE: stack OUTER diagram grids ────────────────────────────
   On narrow screens, the OUTER wrappers (direct children of
   .blog-diagram-scroll / .ia-diagram) collapse to a single column so
   cards stack vertically. Nested inline grids/flex INSIDE cards (chart
   primitives, bar containers, inline step rows) are left alone — their
   original layout is intentional. */
@media (max-width: 768px) {
  /* Keep the native overflow-x:auto on .blog-diagram-scroll so wide
     tables (like 5-col comparison grids) scroll horizontally and the
     user can swipe through all columns. */
  /* Class-based outer wrappers (always safe to flatten). */
  .ia-grid-2,
  .ia-grid-3,
  .ia-grid-3--flush,
  .ia-grid-3--tight,
  .ia-grid-5,
  .ia-grid-4,
  .ia-grid-2--tight,
  .ia-g2,
  .ia-g3,
  .ia-g4,
  .ia-g5-flow,
  .ia-g2-vs,
  .ia-g3-vs,
  .ia-g4-centered,
  .ia-g4-tight,
  .ia-g4-tight2,
  .ia-row-flex,
  .ia-number-grid {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 12px !important;
  }
  .ia-row-flex { flex-direction: column !important; }
  /* Inline-styled grid wrappers inside a diagram — ALL descendants, not
     just direct children. Nested stage-card grids (e.g. a card that
     uses `grid-template-columns:80px 1fr 140px` internally for a label
     | body | stat row) overflow on narrow screens, so flatten them to
     1 column too. The comparison table (.ia-compare-table class) is
     excluded via a dedicated higher-specificity override below. */
  .blog-diagram-scroll [style*="display:grid"]:not(.ia-compare-table):not(.ia-scorecard-matrix):not(.ia-scorecard-matrix *),
  .blog-diagram-scroll [style*="display: grid"]:not(.ia-compare-table):not(.ia-scorecard-matrix):not(.ia-scorecard-matrix *),
  .ia-diagram [style*="display:grid"]:not(.ia-compare-table):not(.ia-scorecard-matrix):not(.ia-scorecard-matrix *),
  .ia-diagram [style*="display: grid"]:not(.ia-compare-table):not(.ia-scorecard-matrix):not(.ia-scorecard-matrix *) {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 12px !important;
  }
  /* Comparison table (.ia-compare-table): higher specificity restores
     the wide 5-column grid so it stays scrollable horizontally. */
  .blog-diagram-scroll > .ia-compare-table,
  .ia-diagram > .ia-compare-table {
    display: grid !important;
    grid-template-columns: 220px repeat(4, 1fr) !important;
    min-width: 860px !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
  }
  /* 4-col variant on mobile: keep its own 4-col layout + min-width so
     the table stays horizontal and matches the desktop structure. */
  .blog-diagram-scroll > .ia-compare-table--4col,
  .ia-diagram > .ia-compare-table--4col {
    grid-template-columns: 2fr 1.3fr .6fr 1.4fr !important;
    min-width: 680px !important;
  }
  /* 2-col variant on mobile: keep its own 2-col layout + min-width so
     the table stays horizontal and matches the desktop structure. */
  .blog-diagram-scroll > .ia-compare-table--2col,
  .ia-diagram > .ia-compare-table--2col {
    grid-template-columns: 180px 1fr 1fr !important;
    min-width: 680px !important;
  }

  /* ─── Preserve multi-column grids inside .blog-diagram-scroll so
     step-flow and comparison diagrams stay horizontal and SCROLL on
     mobile (don't stack vertically). The parent .blog-diagram-scroll
     already has overflow-x:auto. One rule per column count; higher
     specificity wins against the universal stackers above. */
  .blog-diagram-scroll .ia-g2 {
    grid-template-columns: 1fr 1fr !important;
    min-width: 600px !important;
    gap: 16px !important;
  }
  .blog-diagram-scroll .ia-g3 {
    grid-template-columns: repeat(3, 1fr) !important;
    min-width: 720px !important;
    gap: 16px !important;
  }
  .blog-diagram-scroll .ia-g4,
  .blog-diagram-scroll .ia-g4-centered,
  .blog-diagram-scroll .ia-g4-tight,
  .blog-diagram-scroll .ia-g4-tight2 {
    grid-template-columns: repeat(4, 1fr) !important;
    min-width: 800px !important;
    gap: 12px !important;
  }
  .blog-diagram-scroll .ia-g5-flow,
  .blog-diagram-scroll .ia-grid-5--flow,
  .cs-card--navy-border-teal .ia-grid-5--flow {
    grid-template-columns: repeat(5, 1fr) !important;
    min-width: 900px !important;
    gap: 0 !important;
  }
  .blog-diagram-scroll .ia-grid-4--flow {
    grid-template-columns: repeat(4, 1fr) !important;
    min-width: 720px !important;
    gap: 0 !important;
  }
  .blog-diagram-scroll .ia-g2-vs {
    grid-template-columns: 1fr 60px 1fr !important;
    min-width: 720px !important;
    gap: 16px !important;
  }
  .blog-diagram-scroll .ia-g3-vs {
    grid-template-columns: 1fr 40px 1fr 40px 1fr !important;
    min-width: 760px !important;
    gap: 0 !important;
  }
  /* ─── NOSCROLL wrapper (mobile stacking) ───
     In noscroll wrappers, every multi-column grid stacks to 1fr and all
     min-widths collapse so content fits viewport cleanly. */
  .blog-diagram-noscroll,
  .blog-diagram-noscroll * {
    min-width: 0 !important;
  }
  .blog-diagram-noscroll .ia-g2,
  .blog-diagram-noscroll .ia-g3,
  .blog-diagram-noscroll .ia-g3-vs,
  .blog-diagram-noscroll .ia-g3--3plus1,
  .blog-diagram-noscroll .ia-g3--pyramid,
  .blog-diagram-noscroll .ia-grid-2,
  .blog-diagram-noscroll .ia-grid-3,
  .blog-diagram-noscroll .ia-grid-3--tight,
  .blog-diagram-noscroll .ia-grid-3--flush,
  .blog-diagram-noscroll .ia-grid-4,
  .blog-diagram-noscroll .ia-grid-5,
  .blog-diagram-noscroll .ia-number-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Arrows inside noscroll flow shapes become vertical on mobile (↓).
     The arrow element stays — font-size:0 + ::after pseudo-element below
     renders a centred ↓ glyph (see .ia-arrow--rotate rules below). */
  /* MOBILE arrows:
     .ia-arrow            → flip color to WHITE (all arrows, incl ↓)
     .ia-arrow--rotate    → right-pointing arrows (→, ▸, etc.): hide the
                            glyph (font-size:0 so neither it nor its
                            flex-flow space takes room) and show a ↓
                            via ::after, centered in the slot.
     Uses display:flex + justify-content:center so the ↓ sits in the
     visual center of the slot regardless of whether the inline parent
     is flex, block, or grid. Font-size on ::after matches typical
     desktop arrow sizing (24px) so mobile isn't visually heavier. */
  .ia-arrow {
    color: #ffffff !important;
  }
  .ia-arrow--rotate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
  }
  .ia-arrow--rotate::after {
    /* \2193 = ↓  \FE0E = Unicode variation selector 15 (text presentation).
       Forces iOS Safari to render ↓ as a plain text character instead of
       its colored emoji variant (which was showing as a blue box).
       Bumped to 28px on mobile — the base 22px looked small inside the
       wider stacked card gaps on narrow screens. */
    content: '\2193\FE0E';
    font-size: 28px !important;
    line-height: 1;
    color: #ffffff;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  /* .ia-stack-mobile: class-based mobile stacker (iOS Safari-safe).
     Uses display:grid 1fr instead of display:block so gap works and
     stacked cards have visible breathing room between them. */
  .ia-stack-mobile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 16px !important;
  }
  .ia-stack-mobile > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  .blog-diagram-scroll > [style*="display:flex"],
  .blog-diagram-scroll > [style*="display: flex"],
  .ia-diagram > [style*="display:flex"],
  .ia-diagram > [style*="display: flex"] {
    flex-direction: column !important;
    min-width: 0 !important;
  }
  /* Number-grid left circle: center it under the heading rather than
     pushing against the card. */
  .ia-number-grid > .ia-layer { margin: 0 auto !important; }
  /* Any inline min-width on direct children → neutralize so the outer
     wrapper fits the viewport (nested min-widths inside cards keep
     their intended chart sizes). */
  .blog-diagram-scroll > [style*="min-width:720px"],
  .blog-diagram-scroll > [style*="min-width:760px"],
  .blog-diagram-scroll > [style*="min-width:780px"],
  .blog-diagram-scroll > [style*="min-width: 720px"],
  .blog-diagram-scroll > [style*="min-width: 760px"],
  .blog-diagram-scroll > [style*="min-width: 780px"],
  .ia-diagram > [style*="min-width:720px"],
  .ia-diagram > [style*="min-width:760px"],
  .ia-diagram > [style*="min-width:780px"] {
    min-width: 0 !important;
  }

}

/* ─── 2×2 quadrant matrix (.ia-matrix) ────────────────────────────────
   Clean replacement for absolutely-positioned scatter diagrams. Desktop
   renders as a Y-label column + 2×2 grid + X-label row; mobile stacks
   everything into a single column (axis labels become inline chips).
   Variant color on each cell via .ia-matrix-cell--{green,teal,orange,blue}.
   Used first in post 243 (open-source vs closed-source AI models). */
.ia-matrix {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: 1fr auto;
  gap: 14px;
  align-items: stretch;
}
.ia-matrix-ylabel {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ia-matrix-ylabel-arrow {
  font-size: 0;
  line-height: 1;
}
.ia-matrix-ylabel-arrow::after {
  content: '\2192';
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ia-matrix-ylabel-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}
.ia-matrix-grid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}
/* Top-margin utility for stacking matrix-grid under another shape in the same diagram. */
.ia-mt-20 { margin-top: 20px; }
.ia-matrix-xlabel {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  padding-top: 4px;
}
.ia-matrix-cell {
  padding: 20px 20px 18px;
  border-radius: 12px;
  min-height: 120px;
  border: 1px solid transparent;
}
.ia-matrix-cell--white {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  border-color: #ffffff;
}
.ia-matrix-cell--white .ia-matrix-cell-kicker,
.ia-matrix-cell--white .ia-matrix-cell-name,
.ia-matrix-cell--white .ia-matrix-cell-desc { color: #1a2857; }
.ia-matrix-cell--green  { background: #4aaa57; border-color: #4aaa57; }
.ia-matrix-cell--teal   { background: #0096c7; border-color: #0096c7; }
.ia-matrix-cell--orange { background: #f77f00; border-color: #f77f00; }
.ia-matrix-cell--blue   { background: #1565c7; border-color: #1565c7; }
.ia-matrix-cell-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 10px;
}
.ia-matrix-cell-name {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.2;
}
.ia-matrix-cell-desc {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.45;
}
@media (max-width: 768px) {
  .ia-matrix {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  .ia-matrix-ylabel {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    gap: 6px;
  }
  .ia-matrix-ylabel-text {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .ia-matrix-ylabel-arrow::after {
    content: '\2193';
  }
  .ia-matrix-grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .ia-matrix-xlabel {
    grid-column: 1;
    grid-row: 3;
  }
}

/* ─── Model-size spectrum (.ia-spectrum) ─────────────────────────────
   Labels ABOVE a gradient bar, 4 colored dots pinned to the bar at
   0 / 33 / 66 / 100%, then a 4-column card grid underneath. Mobile
   stacks the cards to one column and hides the gradient bar + dots
   (the colored cards carry the small-to-large progression on their own).
   Used in post 242 (small vs large language models). */
.ia-spectrum {
  display: block;
}
.ia-spectrum-labels {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ia-spectrum-label {
  flex: 1;
  text-align: center;
}
.ia-spectrum-label--white  { color: #ffffff; }
.ia-spectrum-label--green  { color: #4aaa57; }
.ia-spectrum-label--teal   { color: #0096c7; }
.ia-spectrum-label--orange { color: #f77f00; }
.ia-spectrum-label--blue   { color: #7db4ff; }
.ia-spectrum-track {
  position: relative;
  height: 8px;
  background: linear-gradient(90deg, #ffffff 0%, #0096c7 33%, #f77f00 66%, #4aaa57 100%);
  border-radius: 4px;
  margin: 0 10px;
}
.ia-spectrum-dot {
  position: absolute;
  top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #0d1b3e;
  margin-left: -10px;
}
/* Dots pinned to the center of each of the 4 equally-sized cards below
   (12.5 / 37.5 / 62.5 / 87.5%) so the label-dot-card column reads as a
   single vertical axis per task type. */
.ia-spectrum-dot:nth-child(1) { left: 12.5%; }
.ia-spectrum-dot:nth-child(2) { left: 37.5%; }
.ia-spectrum-dot:nth-child(3) { left: 62.5%; }
.ia-spectrum-dot:nth-child(4) { left: 87.5%; }
/* 3-stage variant: cards expand to fill, dots re-pin to centers of 3 slots */
.ia-spectrum--n3 .ia-spectrum-cards { grid-template-columns: repeat(3, 1fr); }
.ia-spectrum--n3 .ia-spectrum-dot:nth-child(1) { left: 16.67%; }
.ia-spectrum--n3 .ia-spectrum-dot:nth-child(2) { left: 50%; }
.ia-spectrum--n3 .ia-spectrum-dot:nth-child(3) { left: 83.33%; }
/* 5-cell matrix: 2x2 grid + 5th cell spans full width underneath */
.ia-matrix-grid--5plus1 > .ia-matrix-cell:nth-child(5) { grid-column: 1 / -1; }
/* 3-column matrix row (for hub-and-spoke top/bottom bands) */
.ia-matrix-grid--3col { grid-template-columns: repeat(3, 1fr); }
/* 1-column matrix row — a single full-width matrix cell, e.g. a hub cell */
.ia-matrix-grid--1col { grid-template-columns: 1fr; }
/* 4-column matrix row (for hub-and-spoke bands with 4 callers) */
.ia-matrix-grid--4col { grid-template-columns: repeat(4, 1fr); }
.ia-spectrum-dot--white  { background: #ffffff; }
.ia-spectrum-dot--green  { background: #4aaa57; }
.ia-spectrum-dot--teal   { background: #0096c7; }
.ia-spectrum-dot--orange { background: #f77f00; }
.ia-spectrum-dot--blue   { background: #1565c7; }
.ia-spectrum-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 48px;
}
.ia-spectrum-card {
  padding: 20px;
  border-radius: 8px;
  color: #ffffff;
}
.ia-spectrum-card--white {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  color: #1a2857;
}
.ia-spectrum-card--white .ia-spectrum-card-title,
.ia-spectrum-card--white .ia-spectrum-card-body,
.ia-spectrum-card--white .ia-spectrum-card-kicker { color: #1a2857; }
.ia-spectrum-card--green  { background: #4aaa57; }
.ia-spectrum-card--teal   { background: #0096c7; }
.ia-spectrum-card--orange { background: #f77f00; }
.ia-spectrum-card--blue   { background: #1565c7; }
.ia-spectrum-card-kicker {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}
.ia-spectrum-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.ia-spectrum-card-body {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.55;
}
@media (max-width: 768px) {
  /* Mobile: hide the top labels row + bar (would overlap/stretch awkwardly
     on narrow widths) and surface the size name inside each stacked card
     via its kicker, so the small-to-large progression stays legible. */
  .ia-spectrum-labels,
  .ia-spectrum-track { display: none; }
  .ia-spectrum-card-kicker { display: block; }
  .ia-spectrum-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
  }
  /* Infographic cards: on narrow widths, stack the icon ABOVE the title
     and center both. Desktop keeps the inline icon-left-of-title layout.
     Covers every card shape that uses the small-inline-icon pattern:
     .ia-number-card (Numbered Grid), .ia-card (Grid-5 / Pass A), and
     .ia-flex-col (Row Flex). */
  :is(.ia-number-card, .ia-card, .ia-flex-col) .ia-d-flex.ia-ai-start.ia-gap-10 {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ─── Lifecycle step-flow (.ia-lifecycle) ────────────────────────────
   Horizontal step-flow with a gradient line connecting 4 numbered
   circles. Replaces the arrow-between-steps pattern (removes the
   literal → characters that stacked badly on narrow widths).
   Mobile: hide the gradient line, stack columns to 1fr.
   Used in post 142 (continuous AI improvement lifecycle). */
.ia-lifecycle {
  position: relative;
}
.ia-lifecycle::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 12.5%;
  right: 12.5%;
  height: 4px;
  background: linear-gradient(90deg, #0096c7 0%, #f77f00 33%, #4aaa57 66%, #1565c7 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 0;
}
.ia-lifecycle-cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ia-lifecycle-col { text-align: center; padding: 0 8px; }
.ia-lifecycle-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ia-lifecycle-label--teal   { color: #0096c7; }
.ia-lifecycle-label--orange { color: #f77f00; }
.ia-lifecycle-label--green  { color: #4aaa57; }
.ia-lifecycle-label--blue   { color: #1565c7; }
.ia-lifecycle-when {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}
.ia-lifecycle-desc {
  font-size: 15px;
  color: #ffffff;
  line-height: 1.55;
}
@media (max-width: 768px) {
  .ia-lifecycle::before { display: none; }
  .ia-lifecycle-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ia-lifecycle-col { text-align: left; padding: 0; }
  .ia-lifecycle-col .ia-step-num {
    margin: 0 0 14px !important;
  }
}

/* ─── Horizontal numbered layer bars (.ia-layers wrapper) ────────────
   Stacker for a sequence of .ia-layer bars (defined above). Only extras:
   wrapper gap, step-num margin reset, right-side body text styles, and
   the white-variant inversion for the step circle so its number stays
   visible against a white card. Used in post 142 (continuous AI
   improvement). */
.ia-layers { display: flex; flex-direction: column; gap: 10px; }
/* Step-number inside .ia-layer uses the shared .ia-step-num (white
   circle, navy digit). The site-wide `.ia-layer * { color: #ffffff
   !important }` rule further down would otherwise paint the digit white
   and hide it against the white circle — restore navy here. Also kill
   auto-centering margins because .ia-layer is a FLEX ROW (circle sits
   left of body, not horizontally centered in block context). Chained
   specificity (0,4,2) beats the universal (0,3,2) above. */
body .blog-article .ia-layer div.ia-step-num.ia-step-num {
  margin: 0 !important;
  color: #1a2857 !important;
}
/* White layer: all text goes navy. Must out-specific the site-wide
   `.ia-layer * { color:#ffffff !important }` rule below in the file,
   so we chain the class (`.ia-layer.ia-layer--white *` beats
   `.ia-layer *` by one extra class on specificity). */
.ia-layer.ia-layer--white,
.ia-layer.ia-layer--white * {
  color: #1a2857 !important;
}
/* …and inside the white layer, flip the step circle to navy-with-white
   so the digit stays readable against the white card. */
body .blog-article .ia-layer.ia-layer--white div.ia-step-num.ia-step-num {
  background-color: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
}
.ia-layer-body { flex: 1; min-width: 0; }
.ia-layer-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 4px;
}
.ia-layer--white .ia-layer-kicker { color: #1a2857; }
.ia-layer-title {
  font-size: 18px;
  font-weight: 800;
  color: inherit;
  margin: 0 0 6px;
  line-height: 1.3;
}
.ia-layer-desc {
  font-size: 16px;
  color: inherit;
  line-height: 1.55;
}
@media (max-width: 768px) {
  .ia-layer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
}

/* ─── Comparison table (.ia-ctable) ──────────────────────────────────
   Class-based replacement for inline-styled n-column comparison tables.
   Desktop: 1 label column + N value columns in a single grid, flat colored
   row bands, no cell rounding or gaps. Mobile: each row collapses to its
   own stacked card, header row hidden, column labels injected via
   `data-field` → `::before`. Used first in post 241 (foundation vs
   fine-tuned vs industry-trained AI backbones).
   Row color via .ia-ctable-row--{green,teal,orange,blue}. */
.ia-ctable {
  display: grid;
  grid-template-columns: 200px 2fr repeat(3, 1fr);
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
}
.ia-ctable-row { display: contents; }
.ia-ctable-cell {
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  color: #ffffff;
}
.ia-ctable-cell--head {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  color: #1a2857;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 16px;
  text-align: center;
  border-bottom: 2px solid #ffffff;
}
.ia-ctable-cell--head.ia-ctable-cell--label { text-align: left; }
.ia-ctable-cell--head.ia-ctable-cell--text  { text-align: left; }
/* Separate the 5 head cells with a thin navy divider so they read as
   distinct columns on the white strip (they're siblings in the grid
   because .ia-ctable-row is display:contents). */
.ia-ctable-cell--head + .ia-ctable-cell--head {
  border-left: 1px solid #d8dce6;
}
.ia-ctable-cell--label { font-size: 17px; font-weight: 800; }
.ia-ctable-cell--text  { line-height: 1.55; }
.ia-ctable-cell--value {
  text-align: center;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ia-ctable-row--green  .ia-ctable-cell:not(.ia-ctable-cell--head) { background: #4aaa57; }
.ia-ctable-row--teal   .ia-ctable-cell:not(.ia-ctable-cell--head) { background: #0096c7; }
.ia-ctable-row--orange .ia-ctable-cell:not(.ia-ctable-cell--head) { background: #f77f00; }
.ia-ctable-row--blue   .ia-ctable-cell:not(.ia-ctable-cell--head) { background: #1565c7; }
@media (max-width: 768px) {
  /* Mobile: each row becomes a card. Header row is hidden; the column
     name appears before each value via data-field so each row stays
     self-explanatory. */
  .ia-ctable {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 0;
  }
  .ia-ctable-row {
    display: block;
    border-radius: 12px;
    overflow: hidden;
  }
  .ia-ctable-row--head { display: none; }
  .ia-ctable-row--green  { background: #4aaa57; }
  .ia-ctable-row--teal   { background: #0096c7; }
  .ia-ctable-row--orange { background: #f77f00; }
  .ia-ctable-row--blue   { background: #1565c7; }
  .ia-ctable-cell {
    background: transparent !important;
    padding: 10px 18px;
  }
  .ia-ctable-cell--label {
    font-size: 20px;
    padding: 18px 18px 6px;
  }
  .ia-ctable-cell--text {
    padding: 4px 18px 10px;
    font-size: 14px;
  }
  .ia-ctable-cell--text::before,
  .ia-ctable-cell--value::before {
    content: attr(data-field);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
  }
  .ia-ctable-cell--text::before {
    display: block;
    margin-bottom: 4px;
  }
  .ia-ctable-cell--value {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 18px;
    text-align: left;
    border-top: 1px solid #ffffff;
  }
  .ia-ctable-cell--value:last-child { padding-bottom: 16px; }
}

/* ─── Comparison table class (.ia-compare-table) ──────────────────────
   The 2 comparison-table grids (langsmith-vs… and salesforce-vs… posts)
   carry this class on their outer grid wrapper. The table stays as a
   wide 5-column grid on both desktop and mobile; on mobile it scrolls
   horizontally via the parent .blog-diagram-scroll (overflow-x:auto).
   The only tweak we apply here is forcing header-cell text to WHITE
   because inline color matches the background (`color:#4aaa57` on green
   bg etc.) and that makes labels invisible on the colored bars.
   Highest-specificity selectors used so no cascade order can undo it. */
.ia-compare-table > div[style*="background:rgba(0,150,199,"],
.ia-compare-table > div[style*="background:rgba(74,170,87,"],
.ia-compare-table > div[style*="background:rgba(247,127,0,"],
.ia-compare-table > div[style*="background:rgba(21,101,199,"],
.ia-compare-table > div[style*="background: rgba(0,150,199,"],
.ia-compare-table > div[style*="background: rgba(74,170,87,"],
.ia-compare-table > div[style*="background: rgba(247,127,0,"],
.ia-compare-table > div[style*="background: rgba(21,101,199,"] {
  color: #ffffff !important;
}
.ia-compare-table > div[style*="background:rgba(0,150,199,"] *,
.ia-compare-table > div[style*="background:rgba(74,170,87,"] *,
.ia-compare-table > div[style*="background:rgba(247,127,0,"] *,
.ia-compare-table > div[style*="background:rgba(21,101,199,"] *,
.ia-compare-table > div[style*="background: rgba(0,150,199,"] *,
.ia-compare-table > div[style*="background: rgba(74,170,87,"] *,
.ia-compare-table > div[style*="background: rgba(247,127,0,"] *,
.ia-compare-table > div[style*="background: rgba(21,101,199,"] * {
  color: #ffffff !important;
}

/* ─── Solid-color card body text: fully opaque white ──────────────
   On brand-color cards (orange/green/teal/blue), translucent white
   loses contrast against the saturated background. Force fully solid
   #ffffff for every text descendant so the copy pops cleanly without
   the washed-out "sits behind a scrim" look. */
.ia-card,
.ia-card *,
.ia-bordered-card,
.ia-bordered-card *,
.ia-accent-card,
.ia-accent-card *,
.ia-flex-col,
.ia-flex-col *,
.ia-center-card,
.ia-center-card *,
.ia-left-card,
.ia-left-card *,
.ia-left-pill,
.ia-left-pill *,
.ia-layer,
.ia-layer *,
.ia-number-card,
.ia-number-card * {
  color: #ffffff !important;
}
/* …except the white .ia-number-grid circle, which gets navy digit. */
.ia-number-grid > .ia-layer,
.ia-number-grid > .ia-layer * {
  color: #1a2857 !important;
}

/* ─── Any brand-color card: text is FULLY OPAQUE #ffffff ───────────
   Inline captions inside these cards use rgba(255,255,255,.62/.75/.78)
   which looks washed-out against bright backgrounds (especially orange).
   Force everything to solid #ffffff so copy reads cleanly. Scoped to
   .blog-article so site chrome is untouched. */
.blog-article div[style*="background:rgba(0,150,199,"][style*="padding:"],
.blog-article div[style*="background:rgba(0,150,199,"][style*="padding:"] *,
.blog-article section[style*="background:rgba(0,150,199,"][style*="padding:"],
.blog-article section[style*="background:rgba(0,150,199,"][style*="padding:"] *,
.blog-article div[style*="background:rgba(74,170,87,"][style*="padding:"],
.blog-article div[style*="background:rgba(74,170,87,"][style*="padding:"] *,
.blog-article section[style*="background:rgba(74,170,87,"][style*="padding:"],
.blog-article section[style*="background:rgba(74,170,87,"][style*="padding:"] *,
.blog-article div[style*="background:rgba(247,127,0,"][style*="padding:"],
.blog-article div[style*="background:rgba(247,127,0,"][style*="padding:"] *,
.blog-article section[style*="background:rgba(247,127,0,"][style*="padding:"],
.blog-article section[style*="background:rgba(247,127,0,"][style*="padding:"] *,
.blog-article div[style*="background:rgba(21,101,199,"][style*="padding:"],
.blog-article div[style*="background:rgba(21,101,199,"][style*="padding:"] *,
.blog-article section[style*="background:rgba(21,101,199,"][style*="padding:"],
.blog-article section[style*="background:rgba(21,101,199,"][style*="padding:"] *,
.blog-article div[style*="background:#0096c7"][style*="padding:"],
.blog-article div[style*="background:#0096c7"][style*="padding:"] *,
.blog-article div[style*="background:#4aaa57"][style*="padding:"],
.blog-article div[style*="background:#4aaa57"][style*="padding:"] *,
.blog-article div[style*="background:#f77f00"][style*="padding:"],
.blog-article div[style*="background:#f77f00"][style*="padding:"] *,
.blog-article div[style*="background:#1565c7"][style*="padding:"],
.blog-article div[style*="background:#1565c7"][style*="padding:"] * {
  color: #ffffff !important;
}

/* iOS Safari fallback: any inline `color:rgba(255,255,255,.X)` text inside
   an insight diagram goes solid white. Single-attribute selector works
   reliably on mobile Safari where the chained `[bg...][padding...] *`
   combinations above sometimes don't fire. The diagram is always navy or
   brand-colored, so white is always the correct text color. */
.ia-diagram [style*="color:rgba(255,255,255,"] {
  color: #ffffff !important;
}


/* ─── Universal step-circle override ───────────────────────────────
   Bulletproof: `body .blog-article div.ia-step-num.ia-step-num` gives
   specificity (0,3,2) which beats the earlier `.blog-article div[bg]
   [padding] *` rule (0,3,1). No matter what card the circle lands in —
   brand-colored, translucent white, nested — it stays white with a
   navy digit. One rule, every article. */
body .blog-article div.ia-step-num.ia-step-num {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  flex-shrink: 0 !important;
  /* Default: center horizontally in block parent + add 14px breathing room
     below (matches the original inline pattern most posts use). Flex-row
     parents override to margin:0 below. */
  margin: 0 auto 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Override: when the step circle is a child of an inline-styled flex-row
   parent, kill the auto-center margins (auto margins would push the item
   to the end of the row and the 14px bottom margin breaks vertical
   centering). Specificity (0,4,2) beats the universal (0,3,2) above. */
body .blog-article [style*="display:flex"] > div.ia-step-num.ia-step-num,
body .blog-article [style*="display: flex"] > div.ia-step-num.ia-step-num {
  margin: 0 !important;
}

/* Colored variants of .ia-step-num — brand bg + white numeral + no
   radial gradient. Must sit AFTER the universal override above and use
   the double-class pattern to beat it (same specificity (0,3,2), later
   source order wins). */
body .blog-article div.ia-step-num.ia-step-num--teal   { background-color: #0096c7 !important; color: #ffffff !important; background-image: none !important; }
body .blog-article div.ia-step-num.ia-step-num--green  { background-color: #4aaa57 !important; color: #ffffff !important; background-image: none !important; }
body .blog-article div.ia-step-num.ia-step-num--orange { background-color: #f77f00 !important; color: #ffffff !important; background-image: none !important; }
body .blog-article div.ia-step-num.ia-step-num--blue   { background-color: #1565c7 !important; color: #ffffff !important; background-image: none !important; }
body .blog-article div.ia-step-num.ia-step-num--navy   { background-color: #1a2857 !important; color: #ffffff !important; background-image: none !important; }

/* Section eyebrow kicker inside a step-flow diagram: white instead of
   the default orange (looks more like a header prefix in context). */
.is-blog-post .ia-diagram:has(.ia-g5-flow) > .ia-kicker--eyebrow,
.is-blog-post .ia-diagram:has(.ia-step-num) > .ia-kicker--eyebrow,
.is-blog-post .ia-diagram:has(.ia-progress-line) > .ia-kicker--eyebrow {
  color: #ffffff;
}

/* A brand-colored div NESTED inside another brand-colored card (e.g. the
   "Exit:" tile at the bottom of each roadmap stage) drops its radial
   bloom (no double bloom) AND switches to a dark translucent fill so it
   reads as a distinct inset highlight tile against the parent's solid
   brand color, instead of blending into it. */
.ia-diagram [style*="padding:"][style*="background:rgba(0,150,199,"] [style*="padding:"][style*="background:rgba(0,150,199,"],
.ia-diagram [style*="padding:"][style*="background:rgba(74,170,87,"] [style*="padding:"][style*="background:rgba(74,170,87,"],
.ia-diagram [style*="padding:"][style*="background:rgba(247,127,0,"] [style*="padding:"][style*="background:rgba(247,127,0,"],
.ia-diagram [style*="padding:"][style*="background:rgba(21,101,199,"] [style*="padding:"][style*="background:rgba(21,101,199,"] {
  background-color: rgba(0,0,0,0.18) !important;
  background-image: none !important;
  border-radius: 6px !important;
}
/* Same inset-tile treatment for a translucent-white nested panel inside a
   translucent-white parent (card 5's Exit tile uses rgba(255,255,255,.15)
   inside rgba(255,255,255,.08) wrapper). */
.ia-diagram [style*="padding:"][style*="background:rgba(255,255,255,"] [style*="padding:"][style*="background:rgba(255,255,255,"] {
  background-color: rgba(0,0,0,0.18) !important;
  background-image: none !important;
  border-radius: 6px !important;
}


/* ═══════════════════════════════════════════════════════
   ARTICLE INFOGRAPHIC SHAPES — classes added for the
   sample lab (article-infographics-sample). All brand
   colors solid, no inline styles. 2026-10-13.
═══════════════════════════════════════════════════════ */

/* Stat row wrapper (optional margin/alignment layer around ia-g* grids) */
.ia-stat-row { margin: 20px 0 24px; }

/* Numbered step circles — brand-colored stroke via a wrapper modifier */
.blog-step-num--teal   svg { stroke: #0096c7; }
.blog-step-num--orange svg { stroke: #f77f00; }
.blog-step-num--green  svg { stroke: #4aaa57; }
.blog-step-num--blue   svg { stroke: #1565c7; }

/* Vertical stack of layers (used for layered diagrams) */
.ia-stack { display: flex; flex-direction: column; gap: 10px; }
.ia-stack > .ia-layer { width: 100%; }

/* Flow A → B (two cards with an arrow between) */
.ia-flow-ab {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
  min-width: 720px;
}

/* Arrow (horizontal + vertical) with brand color variants */
/* Removed: duplicate .ia-arrow block (was 36px/800) that overrode the base
   site-wide 22px rule. Base .ia-arrow lives in inside-pages.css and is the
   single source of truth. Scoped insight-only arrow design (if needed) goes
   under .is-blog-post .ia-arrow { } later in this file, not here. */

/* ═══════════════════════════════════════════════════════
   INSIGHT-SCOPED PATTERNS — only apply on article pages
   (body wraps content in <article class="is-blog-post">).
   Keeps case studies / services / industries unchanged.
═══════════════════════════════════════════════════════ */

/* Kicker as a contextual pill badge inside article infographics.
   Mirrors .cs-mini-badge logic used in case-study deep dives:
   • On white / light-gradient card  → navy pill + white text
   • On dark / brand-colored card    → white pill + navy text
   Brand-color variants on the kicker itself (--teal/--green/--orange/
   --blue/--white) are overridden here — contrast with the parent card
   is what matters, not the kicker's own color token. */
.is-blog-post .ia-kicker {
  display: inline-block;
  background: #1a2857;
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  width: fit-content;
  align-self: flex-start;
}
/* Section-level kicker (direct child of a diagram wrapper): pull the
   pill text flush-left with the heading below by cancelling the pill's
   internal left padding. (ia-ghost-card kicker is center-aligned via
   its own rule, so not included here.) */
.is-blog-post .ia-diagram > .ia-kicker,
.is-blog-post .blog-diagram-scroll > .ia-kicker {
  margin-left: -18px;
}
/* Kicker inside brand-colored parent cards — inherits parent's white text.
   No background pill, no color override — parent card already sets color:#ffffff
   so the uppercase kicker reads cleanly on top of the brand bg. */
.is-blog-post :is(
  .ia-card--teal, .ia-card--green, .ia-card--orange, .ia-card--blue, .ia-card--navy,
  .ia-center-card--teal, .ia-center-card--green, .ia-center-card--orange, .ia-center-card--blue,
  .ia-badge-callout--teal, .ia-badge-callout--green, .ia-badge-callout--orange, .ia-badge-callout--blue,
  .ia-flex-col--teal, .ia-flex-col--green, .ia-flex-col--orange, .ia-flex-col--blue,
  .ia-layer--teal, .ia-layer--green, .ia-layer--orange, .ia-layer--blue,
  .ia-left-card--teal, .ia-left-card--green, .ia-left-card--orange,
  .ia-left-pill--teal, .ia-left-pill--green, .ia-left-pill--orange,
  .ia-number-card--teal, .ia-number-card--green, .ia-number-card--orange, .ia-number-card--blue,
  .ia-bg-teal, .ia-bg-green, .ia-bg-orange, .ia-bg-blue, .ia-bg-navy
) .ia-kicker {
  background: transparent;
  color: inherit;
}

/* White variant of .ia-center-card — follows first-card-white rule and
   provides a contrast card in grids of brand-colored centre cards.
   Overrides the base .ia-center-card children-text-white block.
   Keeps the base radial top-left bloom for depth. */
.is-blog-post .ia-center-card--white {
  background-color: #ffffff;
}
.is-blog-post .ia-center-card--white,
.is-blog-post .ia-center-card--white .ia-body,
.is-blog-post .ia-center-card--white .ia-body-sm,
.is-blog-post .ia-center-card--white .ia-stat-val,
.is-blog-post .ia-center-card--white .ia-stat-sub,
.is-blog-post .ia-center-card--white .ia-sub-h {
  color: #1a2857 !important;
}

/* ─── 3-COLUMN GRID — ghost-card inner-tile pattern (SAMPLE ONLY) ───
   Reverted from global scope back to sample-page scope on 2026-10-14 so
   the sample stays the single source of truth for shape designs until
   every shape is finalised. When ready to migrate, swap
   .is-blog-post → .is-blog-post. */
.is-blog-post .ia-ghost-card > .ia-kicker,
.is-blog-post .ia-ghost-card > .white-kicker-style,
.is-blog-post .ia-ghost-card > .dark-colored-kicker-style,
.is-blog-post .ia-ghost-card > .ia-ta-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  text-align: center;
}
.is-blog-post .ia-ghost-card > .ia-stat-val {
  text-align: center;
  margin-bottom: 14px;
}
.is-blog-post .ia-ghost-card .ia-grid-3--tight {
  gap: 18px;
}
.is-blog-post .ia-ghost-card .ia-grid-3--tight > * {
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
/* Strip pill from inner-tile thin kickers — plain uppercase label.
   Removed the first-child-white forcing (markup now declares .ia-left-pill--white
   explicitly; universal white-card fix handles the navy text).
   Color is inherited from parent pill: navy on white parent, white on colored parent. */
.is-blog-post .ia-ghost-card .ia-grid-3--tight .ia-kicker {
  background: transparent;
  padding: 0;
  border-radius: 0;
  letter-spacing: .08em;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: inherit;
}

/* ─── SAMPLE ONLY ─── icons on the sample article's ghost-card inner-tile
   kickers. Per-article content choices (not promoted to .is-blog-post)
   until a keyword-based icon-class system is designed. */
.post-article-infographics-sample .ia-ghost-card .ia-grid-3--tight .ia-kicker::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: center/contain no-repeat;
  margin-top: -3px;
}
.post-article-infographics-sample .ia-ghost-card .ia-grid-3--tight > :nth-child(1) .ia-kicker::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2857' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.post-article-infographics-sample .ia-ghost-card .ia-grid-3--tight > :nth-child(2) .ia-kicker::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}
.post-article-infographics-sample .ia-ghost-card .ia-grid-3--tight > :nth-child(3) .ia-kicker::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 8 16 12 12 16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>");
}

/* ─── Badge callout restyle — plain inline label with icon (SAMPLE ONLY) ───
   No background, icon top-aligned with text. Text color: on white parent
   card = badge's brand color; on colored parent card = white (inherits
   from the parent's forced-white text). */
.is-blog-post .ia-badge-callout {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}
.is-blog-post .ia-badge-callout svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
}
/* Stacked variant: block layout so <br> inside breaks lines and label+body
   pairs sit one above the other. Use when the badge holds multiple
   label+body pairs (e.g. Maintenance cost / Operational risk). */
.is-blog-post .ia-badge-callout--stack {
  display: block !important;
}
.is-blog-post .ia-badge-callout--stack strong {
  display: inline;
}
/* Arrow bullet list — small chevron in front of each item. Aggressive
   overrides because the article body is wrapped in .blog-prose which
   gives every <ul li>::before a square bullet by default. The !important
   rules below (a) kill the square via `content: none` on the base pseudo
   path by overriding every property, and (b) set our own chevron, with
   list-style:none to kill the browser default disc too. */
.is-blog-post ul.ia-arrow-list,
.is-blog-post .ia-arrow-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.is-blog-post .ia-arrow-list li {
  list-style: none !important;
  position: relative !important;
  padding-left: 18px !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.5 !important;
  background: none !important;
}
.is-blog-post .ia-arrow-list li::before {
  content: "›" !important;
  position: absolute !important;
  left: 2px !important;
  top: -1px !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  opacity: .8 !important;
  color: inherit !important;
}
/* Text color per parent card: navy on white, white on colored. */
.is-blog-post .ia-left-card--white .ia-arrow-list,
.is-blog-post .ia-left-card--white .ia-arrow-list li {
  color: #1a2857 !important;
}
.is-blog-post .ia-left-card:not(.ia-left-card--white) .ia-arrow-list,
.is-blog-post .ia-left-card:not(.ia-left-card--white) .ia-arrow-list li {
  color: #ffffff !important;
}

/* Kicker's own margin-bottom handles the gap now — stat-val has no
   extra top margin, so spacing stays consistent with other shapes. */

/* On white parent card: badge text + icon = navy (readable + consistent).
   Explicit navy stroke on the SVG and ALL children (path/line/circle/
   polyline/polygon/rect) so the hard-coded inline `stroke="#ffffff"` on
   each icon is overridden site-wide for any white-card badge. */
.is-blog-post .ia-left-card--white .ia-badge-callout,
.is-blog-post .ia-left-card--white .ia-badge-callout {
  color: #1a2857 !important;
}
.is-blog-post .ia-left-card--white .ia-badge-callout svg,
.is-blog-post .ia-left-card--white .ia-badge-callout svg path,
.is-blog-post .ia-left-card--white .ia-badge-callout svg line,
.is-blog-post .ia-left-card--white .ia-badge-callout svg circle,
.is-blog-post .ia-left-card--white .ia-badge-callout svg polyline,
.is-blog-post .ia-left-card--white .ia-badge-callout svg polygon,
.is-blog-post .ia-left-card--white .ia-badge-callout svg rect,
.is-blog-post .ia-left-card--white .ia-badge-callout svg,
.is-blog-post .ia-left-card--white .ia-badge-callout svg path,
.is-blog-post .ia-left-card--white .ia-badge-callout svg line,
.is-blog-post .ia-left-card--white .ia-badge-callout svg circle,
.is-blog-post .ia-left-card--white .ia-badge-callout svg polyline,
.is-blog-post .ia-left-card--white .ia-badge-callout svg polygon,
.is-blog-post .ia-left-card--white .ia-badge-callout svg rect {
  stroke: #1a2857 !important;
}

/* ─── WHITE VARIANT of .ia-left-card — SAMPLE ONLY ───
   Lets the lead card in a .ia-g3-vs flow follow the first-card-white rule.
   Overrides the forced-white text in .ia-left-card children. Keeps the
   base radial top-left bloom via the base .ia-left-card rule. */
.is-blog-post .ia-left-card--white {
  background-color: #ffffff;
}
.is-blog-post .ia-left-card--white,
.is-blog-post .ia-left-card--white .ia-body,
.is-blog-post .ia-left-card--white .ia-body-sm,
.is-blog-post .ia-left-card--white .ia-stat-val,
.is-blog-post .ia-left-card--white .ia-stat-sub,
.is-blog-post .ia-left-card--white .ia-sub-h {
  color: #1a2857 !important;
}

/* ─── 3+1 GRID (ia-g3--3plus1) — SAMPLE ONLY ───
   3-col grid where the 4th card spans the full width in row 2. Honors
   max-3-cols rule. Stacks to 1 col on mobile via the generic mobile
   rules below. */
.is-blog-post .ia-g3--3plus1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.is-blog-post .ia-g3--3plus1 > :nth-child(4) {
  grid-column: 1 / -1;
}

/* ─── 3-2-1 PYRAMID GRID (ia-g3--pyramid) — SAMPLE ONLY ───
   6-card pyramid (3 across, 2 centered, 1 centered). Honours the max-3-col
   rule by never exceeding 3 cards per row. Stacks to 1 col on mobile.
   Only used on the sample article today; promote to .is-blog-post when
   this shape is adopted by real articles. */
.is-blog-post .ia-g3--pyramid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin: 20px 0;
}
.is-blog-post .ia-g3--pyramid > * { grid-column: span 2; }
/* Row 2: two cards split the full row (3 of 6 cols each). */
.is-blog-post .ia-g3--pyramid > :nth-child(4) { grid-column: 1 / span 3; }
.is-blog-post .ia-g3--pyramid > :nth-child(5) { grid-column: 4 / span 3; }
/* Row 3: one card fills the full row. */
.is-blog-post .ia-g3--pyramid > :nth-child(6) { grid-column: 1 / -1; }
/* Kill the base `.ia-card + .ia-card { margin-top: 12px }` rule inside
   any grid wrapper — grids handle their own gap and the sibling margin
   pushes cards 2+ down by 12px, misaligning rows. */
.is-blog-post .ia-g2 .ia-card + .ia-card,
.is-blog-post .ia-g3 .ia-card + .ia-card,
.is-blog-post .ia-g3--pyramid .ia-card + .ia-card,
.is-blog-post .ia-g3--3plus1 .ia-card + .ia-card,
.is-blog-post .ia-grid-2 .ia-card + .ia-card,
.is-blog-post .ia-grid-3 .ia-card + .ia-card,
.is-blog-post .ia-grid-3--tight .ia-card + .ia-card,
.is-blog-post .ia-grid-3--flush .ia-card + .ia-card,
.is-blog-post .ia-stack-mobile .ia-card + .ia-card {
  margin-top: 0 !important;
}

/* Chip inside pyramid cards: match the kicker-pill treatment (same
   padding/radius/typography) + contextual coloring (navy pill on white
   card, white pill on colored card). The chip's own --COLOR modifier
   is intentionally overridden. */
.is-blog-post .ia-g3--pyramid .ia-chip {
  padding: 6px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
  margin-top: 14px;
}
.is-blog-post .ia-g3--pyramid .ia-card--white .ia-chip {
  background-color: #1a2857 !important;
  color: #ffffff !important;
}
.is-blog-post .ia-g3--pyramid .ia-card--teal .ia-chip,
.is-blog-post .ia-g3--pyramid .ia-card--green .ia-chip,
.is-blog-post .ia-g3--pyramid .ia-card--orange .ia-chip,
.is-blog-post .ia-g3--pyramid .ia-card--blue .ia-chip {
  background-color: #ffffff !important;
  color: #1a2857 !important;
}

/* Centered icon slot above the card title (used in the pyramid cards). */
.is-blog-post .ia-card-ic {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.is-blog-post .ia-card-ic svg { display: block; }

/* ─── MOBILE: NO horizontal scroll + stack grid children to 1 col
   (except the 3 exempt sequence shapes: 5-Step Flow, Step Numbers,
   Progress Line) per feedback_no_mobile_scroll_except_3.
   Sample-scoped for now; promote to .is-blog-post when all shapes are
   finalised. */
@media (max-width: 768px) {
  /* NO horizontal scroll AND no clipping — content must fit via stacking.
     Only the 3 exempt sequence shapes keep swipeable overflow:auto. */
  .is-blog-post .blog-diagram-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .is-blog-post .blog-diagram-scroll:has(.ia-g5-flow),
  .is-blog-post .blog-diagram-scroll:has(.ia-step-num),
  .is-blog-post .blog-diagram-scroll:has(.ia-progress-line),
  .is-blog-post .blog-diagram-scroll:has(.ia-compare-table),
  .is-blog-post .blog-diagram-scroll:has(.ia-scorecard-matrix) {
    overflow-x: auto !important;
  }
  /* Force compare table + scorecard to keep their full desktop width on
     mobile so parent scrolls instead of cells stacking. Beats the base
     `.blog-prose [style*="min-width"][style*="display:grid"] { min-width:0
     !important }` rule in entexis.css line 2712 via higher specificity. */
  body .blog-article .blog-prose .ia-compare-table,
  body .blog-article .blog-prose [style*="display:grid"].ia-compare-table {
    min-width: 820px !important;
    max-width: none !important;
    overflow-x: visible !important;
  }
  /* Stack every grid inside non-exempt diagrams to one column. */
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-g2,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-g3,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-g3-vs,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-g3--3plus1,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-grid-2,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-grid-3--tight,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-grid-3--flush,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line, .ia-compare-table, .ia-scorecard-matrix)) .ia-stack-mobile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 14px !important;
  }
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) .ia-g3--3plus1 > :nth-child(4) {
    grid-column: 1 !important;
  }
  /* Non-exempt diagrams: tighter padding + no sticky positioning on
     headers (sticky is only useful inside a horizontal scroll area). */
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) .ia-diagram {
    padding: 24px 16px !important;
  }
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) .ia-diagram > .ia-kicker--eyebrow,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) .ia-diagram > .ia-h,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) .ia-diagram > .ia-h--snug {
    position: static !important;
  }
  /* Allow long words to break so prose fits the narrow viewport. */
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Kill any min-width utility inside non-exempt diagrams so text wraps
     to the mobile viewport instead of forcing a 720px row. The attribute
     match covers both the `ia-mw-` prefix family and `-mw720` suffix
     family (e.g. ia-body-16-70-l16-mb24-mw720). */
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) .ia-mw-720,
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) [class*="ia-mw-"],
  .is-blog-post .blog-diagram-scroll:not(:has(.ia-g5-flow, .ia-step-num, .ia-progress-line)) [class*="mw720"] {
    min-width: 0 !important;
  }

  .is-blog-post .ia-g3--pyramid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .is-blog-post .ia-g3--pyramid > * {
    grid-column: 1 / -1 !important;
  }
}

/* ─── 2-COLUMN GRID — ia-g2 2x2 pattern (SAMPLE ONLY) ───
   Preview for the finalised 2-col grid shape. First card white (lead-card
   rule), 18px radius for consistency with the 3-col ghost-card design,
   card-3 colour overridden to orange, icons attached to the stat-val
   title (not the kicker). When finalised, swap
   .is-blog-post → .is-blog-post for global rollout. */
.is-blog-post .ia-g2 .ia-card {
  border-radius: 18px !important;
}
/* First card: markup now uses .ia-card--white explicitly — universal
   white-card fix (end of file) handles navy text + kicker contrast.
   Legacy first-child-white forcing rules removed. */
.is-blog-post .ia-g2 > :nth-child(1) .ia-kicker {
  background: #1a2857 !important;
  color: #ffffff !important;
}
/* Third card: override blue → orange. */
.is-blog-post .ia-g2 > :nth-child(3).ia-card {
  background-color: #f77f00 !important;
}

/* More breathing room between the kicker pill and the stat-val title. */
.is-blog-post .ia-g2 .ia-card .ia-kicker {
  margin-bottom: 14px !important;
}

/* Icons on 2-col grid stat-val titles (sample's 2x2 pattern).
   Promoted site-wide so real articles using .ia-g2 can carry inline SVG
   icons at the start of each stat-val, matching sample's convention. */
.is-blog-post .ia-g2 .ia-stat-val {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.25;
}
.is-blog-post .ia-g2 .ia-stat-val > svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
/* Sample retains its CSS-driven icons (pseudo-element with data-URI).
   Real articles use inline <svg> in markup inside the stat-val. */
.post-article-infographics-sample .ia-g2 .ia-stat-val {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.25;
}
.post-article-infographics-sample .ia-g2 .ia-stat-val::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: center/contain no-repeat;
  margin-top: 2px;
}
.post-article-infographics-sample .ia-g2 > :nth-child(1) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2857' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/></svg>");
}
.post-article-infographics-sample .ia-g2 > :nth-child(2) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
}
.post-article-infographics-sample .ia-g2 > :nth-child(3) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.post-article-infographics-sample .ia-g2 > :nth-child(4) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
}

/* ─── SAMPLE ONLY ─── icons on sample's 5-col grid stat-val titles.
   Per-article content choices. All 5 cards are colored → white icons. */
.post-article-infographics-sample .ia-grid-5 .ia-stat-val {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.25;
}
.post-article-infographics-sample .ia-grid-5 .ia-stat-val::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: center/contain no-repeat;
  margin-top: 2px;
}
/* Pattern 1 (WHITE card) — Streaming Token Output: zap/lightning (navy stroke) */
.post-article-infographics-sample .ia-grid-5 > :nth-child(1) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2857' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
}
/* Pattern 2 (teal) — Prompt Compression: minimize */
.post-article-infographics-sample .ia-grid-5 > :nth-child(2) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 14 10 14 10 20'/><polyline points='20 10 14 10 14 4'/><line x1='14' y1='10' x2='21' y2='3'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
}
/* Pattern 3 (orange) — Parallel Orchestration: git-branch */
.post-article-infographics-sample .ia-grid-5 > :nth-child(3) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='3' x2='6' y2='15'/><circle cx='18' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M18 9a9 9 0 0 1-9 9'/></svg>");
}
/* Pattern 4 (blue) — Smaller Model: chevrons-down (reduce) */
.post-article-infographics-sample .ia-grid-5 > :nth-child(4) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 13 12 18 17 13'/><polyline points='7 6 12 11 17 6'/></svg>");
}
/* Scorecard Matrix: bump cell font-size from inline 14px → 15px for
   readability. Covers chips + Avg cells + header labels. */
.is-blog-post .ia-scorecard-matrix [style*="display:grid"],
.is-blog-post .ia-scorecard-matrix [style*="display:grid"] > *,
.is-blog-post .ia-scorecard-matrix .ia-chip {
  font-size: 15px !important;
}

/* ─── Layered Status Row ───
   Outer stacker: flex column with gap, min-width for mobile scroll.
   Row: 3-col grid (label | body | status). Row-color variants carry
   the brand bg + radial bloom (promoted to .is-blog-post). */
.is-blog-post .ia-layered-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 720px;
}
.is-blog-post .ia-layered-row {
  display: grid;
  grid-template-columns: 160px 1fr 140px;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 10px;
}
.is-blog-post .ia-layered-row--white {
  background: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.is-blog-post .ia-layered-row--white * { color: #1a2857 !important; }
.is-blog-post .ia-layered-row--orange {
  background: #f77f00;
}
.is-blog-post .ia-layered-row--orange * { color: #ffffff !important; }
/* Padding modifier: row 4 of the sample uses 22px all around. */
.is-blog-post .ia-layered-row--p22 { padding: 22px; }
/* teal/green variants already inherit .ia-card--teal / .ia-card--green */
/* Mobile: fit viewport (no horizontal scroll). Collapse each row to one
   column: eyebrow → body → status, stacked vertically. */
@media (max-width: 767px) {
  .is-blog-post .ia-layered-stack { min-width: 0 !important; }
  .is-blog-post .ia-layered-row {
    grid-template-columns: 1fr !important;
    padding: 14px 16px !important;
    gap: 8px !important;
    align-items: start;
  }
  .is-blog-post .ia-layered-row--p22 { padding: 14px 16px !important; }
}

/* ─── Inline SVG icon sizing ───
   For inline SVGs placed inside text (e.g. Layered Status Row titles).
   Keeps vertical rhythm with 16px text. */
.ia-icon-18 { vertical-align: middle; margin-right: 8px; width: 18px; height: 18px; }
.ia-icon-22 { vertical-align: middle; margin-right: 8px; width: 22px; height: 22px; }
.ia-icon-24 { vertical-align: middle; margin-right: 10px; width: 24px; height: 24px; }
.ia-icon-26 { vertical-align: middle; margin-right: 10px; width: 26px; height: 26px; }
.ia-icon-28 { vertical-align: middle; margin-right: 10px; width: 28px; height: 28px; }
/* Funnel stat (right cell of Layered Status Row when it carries a metric). */
.is-blog-post .ia-funnel-stat { text-align: right; }
.is-blog-post .ia-funnel-num  { font-size: 22px; font-weight: 800; color: #ffffff; margin-bottom: 4px; }
.is-blog-post .ia-layered-row--white .ia-funnel-num { color: #1a2857; }
/* Stage head — step-num badge + title inline on one row. */
.is-blog-post .ia-stage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.is-blog-post .ia-stage-head div.ia-step-num.ia-step-num { margin: 0 !important; }

/* ─── 5-Column Grid outer stacker + rows ───
   Each row = 60px icon/badge column + 1fr content, with a brand-colored
   bg and matching 3px left border strip. */
.is-blog-post .ia-5col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 700px;
}
.is-blog-post .ia-5col-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-left: 3px solid currentColor;
  border-radius: 10px;
}
.is-blog-post .ia-5col-row--green  { background: #4aaa57; border-left: none; }
.is-blog-post .ia-5col-row--teal   { background: #0096c7; border-left-color: #0096c7; }
.is-blog-post .ia-5col-row--orange { background: #f77f00; border-left-color: #f77f00; }
.is-blog-post .ia-5col-row--blue   { background: #1565c7; border-left-color: #1565c7; }
/* White lead variant — first-card-white convention. Navy text, no border,
   same radial bloom as every other white card so it reads as a sibling. */
.is-blog-post .ia-5col-row--white {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  border-left: none;
}
.is-blog-post .ia-5col-row--white,
.is-blog-post .ia-5col-row--white .ia-stat-32,
.is-blog-post .ia-5col-row--white .ia-stat-val,
.is-blog-post .ia-5col-row--white .ia-body {
  color: #1a2857;
}
/* Mobile: let the stack fit the viewport (no horizontal scroll, no clip)
   and collapse each row to one column — Q# on top, body below. Must come
   AFTER the base rule above so the mobile grid-template-columns wins. */
@media (max-width: 767px) {
  .is-blog-post .ia-5col-stack { min-width: 0 !important; }
  .is-blog-post .ia-5col-row {
    grid-template-columns: 1fr !important;
    padding: 14px 16px;
    gap: 10px;
    align-items: start;
  }
}

/* ─── Scorecard Matrix outer scroll wrapper + inner grid ───
   The outer fits its parent (no min-width); the inner grid is 720px
   wide and the outer scrolls horizontally when the viewport is smaller. */
.is-blog-post .ia-sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.is-blog-post .ia-sc-grid {
  display: grid;
  grid-template-columns: 130px repeat(5, 1fr) 80px;
  gap: 4px;
  font-size: 14px;
  min-width: 720px;
}
/* Layered Status Row title — SVG is inline-flow (vertical-align+margin
   on the SVG itself). No flex. No gap. No line-height overrides. */

/* ─── Stacked Card Comparison (ia-diagram--v2) ───
   Numbered badge + icon-labeled rows with thin dividers so the content
   stops being a wall of text. Promoted to .is-blog-post so it applies to
   every stacked-comparison instance across articles once migrated. */
.is-blog-post .ia-stack-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.is-blog-post .ia-stack-head .ia-kicker--mb14 {
  margin-bottom: 0 !important;
}
/* Numbered badge uses the project's standard .ia-step-num circle
   (48×48, white bg + navy numeral, both !important). The default
   `margin: 0 auto 14px` centers the circle — need (0,4,2) specificity
   with the double-class pattern to beat the universal override at
   `body .blog-article div.ia-step-num.ia-step-num` (line ~2407). */
body .blog-article .ia-stack-head div.ia-step-num.ia-step-num {
  margin: 0 !important;
}
/* Layout only. bg + color come from the central WHITE-CARD rule (end of
   file) so one edit updates every white surface in insights. */
.is-blog-post .ia-stack-row {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.is-blog-post .ia-stack-row:last-of-type { margin-bottom: 14px; }
.is-blog-post .ia-stack-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2857 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.is-blog-post .ia-stack-label svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  color: #1a2857 !important;
  stroke: #1a2857 !important;
}
/* Icon-only variant (quote blocks): no text label, just the glyph. */
.is-blog-post .ia-stack-label--iconly {
  margin-bottom: 10px;
}
.is-blog-post .ia-stack-body {
  font-size: 16px;
  color: #1a2857 !important;
  line-height: 1.6;
}
/* Bigger Outcome line inside Stacked Card Comparison cards (base rule
   is 13px which reads too small for prose). Scoped so other shapes'
   badge-callouts stay as-is. */
.is-blog-post .ia-diagram--v2 .ia-card > .ia-badge-callout {
  font-size: 16px !important;
  line-height: 1.5;
}
/* Mobile: Stacked Card Comparison stacks vertically — no horizontal
   scroll. Override needed because the `.blog-diagram-scroll` keep-
   scroll exemption triggers on `:has(.ia-step-num)`, and our numbered
   badge adds a step-num; this re-forces plain stacking for v2. */
@media (max-width: 767px) {
  .is-blog-post .ia-diagram--v2 {
    overflow-x: visible !important;
  }
  .is-blog-post .ia-diagram--v2 .ia-mw-720,
  .is-blog-post .ia-diagram--v2 [class*="mw720"],
  .is-blog-post .ia-diagram--v2 [style*="min-width:720px"],
  .is-blog-post .ia-diagram--v2 .ia-card {
    min-width: 0 !important;
  }
}

/* Pattern 5 (teal) — Response Caching: database */
.post-article-infographics-sample .ia-grid-5 > :nth-child(5) .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='9' ry='3'/><path d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/><path d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/></svg>");
}

/* ─── SAMPLE ONLY ─── icons on Numbered Grid sub-h titles.
   Per-article content choices. */
.post-article-infographics-sample .ia-number-card .ia-sub-h {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.post-article-infographics-sample .ia-number-card .ia-sub-h::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: center/contain no-repeat;
  margin-top: 2px;
}
/* Row 1 (white) — Map Where Your Customers Are: map-pin, navy icon */
.post-article-infographics-sample .ia-number-card--white .ia-sub-h::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2857' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
/* Row 2 (teal) — Match Demand Against Where You Serve: map/overlap, white icon */
.post-article-infographics-sample .ia-number-card--teal .ia-sub-h::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/><line x1='8' y1='2' x2='8' y2='18'/><line x1='16' y1='6' x2='16' y2='22'/></svg>");
}
/* Row 3 (orange) — Put Your Field Work on the Map: navigation/route, white */
.post-article-infographics-sample .ia-number-card--orange .ia-sub-h::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='3 11 22 2 13 21 11 13 3 11'/></svg>");
}
/* Row 4 (green) — Watch How It Changes Over Time: trending-up, white */
.post-article-infographics-sample .ia-number-card--green .ia-sub-h::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 6 13.5 15.5 8.5 10.5 1 18'/><polyline points='17 6 23 6 23 12'/></svg>");
}

/* ─── SAMPLE ONLY ─── icons on sample's Row Flex stat-val titles.
   Per-article content choices. All 4 cards colored → white icons. */
.post-article-infographics-sample .ia-row-flex .ia-stat-val {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.25;
}
.post-article-infographics-sample .ia-row-flex .ia-stat-val::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: center/contain no-repeat;
  margin-top: 2px;
}
/* Layer 1 (WHITE card) — Request Entry: log-in (navy stroke on white) */
.post-article-infographics-sample .ia-row-flex .ia-flex-col--white .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2857' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>");
}
/* Layer 2 (teal) — Parallel Operations: git-branch */
.post-article-infographics-sample .ia-row-flex .ia-flex-col--teal .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='3' x2='6' y2='15'/><circle cx='18' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M18 9a9 9 0 0 1-9 9'/></svg>");
}
/* Layer 3 (orange) — Compressed Prompt: minimize */
.post-article-infographics-sample .ia-row-flex .ia-flex-col--orange .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 14 10 14 10 20'/><polyline points='20 10 14 10 14 4'/><line x1='14' y1='10' x2='21' y2='3'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
}
/* Layer 4 (GREEN card) — Streaming Response: zap (white stroke on green) */
.post-article-infographics-sample .ia-row-flex .ia-flex-col--green .ia-stat-val::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
}


/* Timeline / lifecycle */
.ia-timeline { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 28px; }
.ia-timeline::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px;
  width: 2px; background: rgba(26,40,87,.15);
}
.ia-timeline-item { position: relative; background: #ffffff; border-radius: 10px; padding: 14px 18px; border: 1px solid rgba(26,40,87,.08); }
.ia-timeline-dot { position: absolute; left: -22px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: #0096c7; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(26,40,87,.15); }
.ia-timeline-item--teal   .ia-timeline-dot { background: #0096c7; }
.ia-timeline-item--orange .ia-timeline-dot { background: #f77f00; }
.ia-timeline-item--green  .ia-timeline-dot { background: #4aaa57; }
.ia-timeline-item--blue   .ia-timeline-dot { background: #1565c7; }

/* Bar chart (div-based bars) */
.ia-barchart { display: flex; flex-direction: column; gap: 10px; }
.ia-bar-row { display: grid; grid-template-columns: 140px 1fr 60px; gap: 12px; align-items: center; }
.ia-bar-label { font-size: 14px; color: #1a2857; font-weight: 600; }
.ia-bar-track { height: 18px; background: rgba(26,40,87,.08); border-radius: 999px; overflow: hidden; }
.ia-bar-fill  { height: 100%; border-radius: 999px; }
.ia-bar-fill--teal   { background: #0096c7; }
.ia-bar-fill--orange { background: #f77f00; }
.ia-bar-fill--green  { background: #4aaa57; }
.ia-bar-fill--blue   { background: #1565c7; }
.ia-bar-fill--w-30 { width: 30%; }
.ia-bar-fill--w-45 { width: 45%; }
.ia-bar-fill--w-60 { width: 60%; }
.ia-bar-fill--w-80 { width: 80%; }
.ia-bar-val { font-size: 14px; font-weight: 700; color: #1a2857; text-align: right; }

/* Chip / pill row */
.ia-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* Comparison matrix table — brand-tinted header cells */
.ia-compare-table .ia-th--teal   { background: #0096c7; color: #ffffff; }
.ia-compare-table .ia-th--orange { background: #f77f00; color: #ffffff; }
.ia-compare-table .ia-th--green  { background: #4aaa57; color: #ffffff; }
.ia-compare-table .ia-th--blue   { background: #1565c7; color: #ffffff; }

/* Pull quote */
.ia-pullquote {
  border-left: 4px solid #0096c7;
  padding: 20px 24px;
  margin: 24px 0;
  background: rgba(0,150,199,.04);
  border-radius: 8px;
}
.ia-pullquote p { font-size: 18px; font-style: italic; color: #1a2857; margin: 0 0 10px; line-height: 1.6; }
.ia-pullquote-attr { font-size: 14px; font-weight: 600; color: #6b7280; font-style: normal; }

/* SVG chart wrapper */
.ia-svg-chart { max-width: 100%; height: auto; display: block; margin: 10px 0; }

/* Mobile: timeline shrinks dot column */
@media (max-width: 560px) {
  .ia-bar-row { grid-template-columns: 100px 1fr 50px; }
  .ia-flow-ab { grid-template-columns: 1fr; }
  .ia-flow-ab .ia-arrow { transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHITE-CARD CENTRAL RULE — single source of truth for every white
   surface in insight infographics. Change bg / bloom / text colour here
   and every white container updates in one edit.
   ═══════════════════════════════════════════════════════════════════════ */
.is-blog-post :is(
  .ia-card--white,
  .ia-center-card--white,
  .ia-number-card--white,
  .ia-left-card--white,
  .ia-left-pill--white,
  .ia-layer--white,
  .ia-layered-row--white,
  .ia-callout--white,
  .ia-flex-col--white,
  .ia-stack-row
) {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  color: #1a2857;
}
/* All descendant text → navy (visible on white). Pills + icons that are
   explicit about their own colour (.ia-kicker, [class*="kicker-style"],
   [class*="icon-style"]) are excluded so they keep their own look. */
.is-blog-post :is(
  .ia-card--white,
  .ia-center-card--white,
  .ia-number-card--white,
  .ia-left-card--white,
  .ia-left-pill--white,
  .ia-layer--white,
  .ia-layered-row--white,
  .ia-callout--white,
  .ia-flex-col--white,
  .ia-stack-row
) *:not(.ia-kicker):not(.ia-kicker *):not([class*="kicker-style"]):not([class*="kicker-style"] *):not([class*="icon-style"]):not([class*="icon-style"] *):not(.ia-step-num):not(.ia-step-num *) {
  color: #1a2857 !important;
}
.is-blog-post :is(
  .ia-card--white,
  .ia-center-card--white,
  .ia-number-card--white,
  .ia-left-card--white,
  .ia-left-pill--white,
  .ia-layer--white,
  .ia-layered-row--white,
  .ia-callout--white,
  .ia-flex-col--white,
  .ia-stack-row
) svg:not([class*="icon-style"]) {
  stroke: #1a2857 !important;
}
.is-blog-post :is(
  .ia-card--white,
  .ia-center-card--white,
  .ia-number-card--white,
  .ia-left-card--white,
  .ia-left-pill--white,
  .ia-layer--white,
  .ia-layered-row--white,
  .ia-callout--white,
  .ia-flex-col--white,
  .ia-stack-row
) .ia-arrow-list li::before {
  color: #1a2857 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   KICKER CLASSES — explicit per context (added 2026-10-15)

   Two self-contained kicker classes. Each one hard-codes its own look
   based on the background it will sit on. No parent-child cascade, no
   !important wars. Pick the one that matches the surrounding card color.

   .white-kicker-style        → inside a WHITE parent (card/pill/callout)
                                 navy pill + white text — visible on white
   .dark-colored-kicker-style → inside a DARK/COLORED parent
                                 (teal/green/orange/blue/navy card/pill)
                                 white pill + navy text — visible on color

   Both are 999px pills. Both set font + spacing explicitly. Use ONE of
   them per kicker in markup; no additional .ia-kicker-- modifiers needed.
   ═══════════════════════════════════════════════════════════════════════ */
.white-kicker-style,
.dark-colored-kicker-style {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  width: fit-content;
  margin-bottom: 10px;
  text-align: center;
}
.white-kicker-style {
  background: #1a2857 !important;
  color: #ffffff !important;
}
.dark-colored-kicker-style {
  background: #ffffff !important;
  color: #1a2857 !important;
}
/* Mobile: center every text element AND the kicker pill inside each
   card/diagram so narrow viewports read evenly. */
@media (max-width: 768px) {
  .is-blog-post :is(.ia-diagram, .blog-diagram-scroll, .blog-diagram-noscroll) :is(.ia-h, .ia-h--snug, .ia-h--compact, .ia-h--mb18, .ia-stat-val, .ia-stat-sub, .ia-body, .ia-body-sm, .ia-sub-h):not(.ia-body--tight) {
    text-align: center;
  }
  /* stat-val + sub-h with inline/pseudo icons: stack as column on mobile
     so the icon sits ABOVE the text and both centre consistently, no
     matter how long the heading wraps. */
  .is-blog-post :is(.ia-diagram, .blog-diagram-scroll, .blog-diagram-noscroll) :is(.ia-stat-val, .ia-sub-h) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .is-blog-post :is(.ia-diagram, .blog-diagram-scroll, .blog-diagram-noscroll) :is(.white-kicker-style, .dark-colored-kicker-style) {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
  /* Kicker-style classes stay centred on mobile across ALL diagram shapes,
     including scrolling ones (user: center text globally on mobile). */
}

/* ═══════════════════════════════════════════════════════════════════════
   ICON CLASSES — same explicit-per-context idea as the kicker classes.
   Use on the SVG element (or its wrapper). No baked-in stroke="#..."
   needed on the SVG — the class sets both color + SVG stroke.
     .white-icon-style         → navy icon (visible on WHITE parent)
     .dark-colored-icon-style  → white icon (visible on DARK/COLORED parent)
   ═══════════════════════════════════════════════════════════════════════ */
/* Target both: the element itself (when class is on <svg>) AND any child
   SVG/path/polygon/etc. (when class is on a wrapper div). Covers both
   usage styles — class="…" on <svg>, or class="…" on the wrapping div. */
svg.white-icon-style,
svg.white-icon-style *,
.white-icon-style > svg,
.white-icon-style > svg * {
  stroke: #1a2857 !important;
  color: #1a2857 !important;
}
svg.dark-colored-icon-style,
svg.dark-colored-icon-style *,
.dark-colored-icon-style > svg,
.dark-colored-icon-style > svg * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}