/* ═══════════════════════════════════════════════════════════════════
   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: 40px 0;
}
.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: 28px;
  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; }

/* 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: rgba(255,255,255,.9);
  line-height: 1.65;
}

/* Light callout box — plain white card, no coloured border strip. */
.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;
}
.ia-callout--teal,
.ia-callout--green,
.ia-callout--orange,
.ia-callout--blue { border: none; }

/* ── 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: rgba(255,255,255,.82);
  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: rgba(255,255,255,.9);
}
.ia-body-sm--muted {
  color: rgba(255,255,255,.8);
  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,
.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;
}

/* ── 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; }
.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; }

/* ── 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. All carry a min-width
   so the horizontal-scroll kicks in on narrow viewports. */
.ia-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-width: 760px;
}
.ia-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  min-width: 720px;
}
.ia-grid-3--flush {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  min-width: 720px;
  position: relative;
}
.ia-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  min-width: 760px;
}
.ia-row-flex {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 780px;
  flex-wrap: nowrap;
}

/* ── 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: rgba(255,255,255,.9);
  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;
}
/* 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 20px;
  margin-bottom: 12px;
  color: #ffffff;
  border-left: 4px solid;
  border-radius: 14px;
  /* Same bloom as the case-study Impact cards and homepage bento. */
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.ia-layer--teal   { background: #0096c7; border-left-color: #0096c7; }
.ia-layer--green  { background: #4aaa57; border-left-color: #4aaa57; }
.ia-layer--orange { background: #f77f00; border-left-color: #f77f00; }
.ia-layer--blue   { background: #1565c7; border-left-color: #1565c7; }
.ia-layer--navy   { background: #0f1a3a; border-left-color: #0f1a3a; }
/* Grid variant — same visual, resets margin + uses even padding so the
   card sits cleanly inside a parent `display:grid` (e.g. 2x2 matrix). */
.ia-layer--grid {
  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; }
/* 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; }
/* 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;
}

/* 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,
.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: rgba(255,255,255,.85);
  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: rgba(255,255,255,.85);
  line-height: 1.6;
}

/* Additional grid wrappers ────────────────────────────────────────────── */
.ia-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-width: 780px;
  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);
}

/* 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; }

/* Centered icon cell (24px glyph in a centered flex box). */
.ia-icon-center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.75);
  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: rgba(255,255,255,.9); }

/* 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 #0096c7"],
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid #4aaa57"],
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid #f77f00"],
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid #1565c7"],
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #0096c7"],
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #4aaa57"],
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #f77f00"],
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #1565c7"] {
  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 #0096c7"] *,
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid #4aaa57"] *,
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid #f77f00"] *,
.blog-article div[style*="background:rgba(255,255,255,.04)"][style*="border-left:3px solid #1565c7"] *,
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #0096c7"] *,
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #4aaa57"] *,
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #f77f00"] *,
.blog-article div[style*="background:rgba(255,255,255,.06)"][style*="border-left:3px solid #1565c7"] * {
  color: #1a2857 !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"] {
  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-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 OUTER wrappers only — direct children of the diagram
     container. Nested inline grids/flex (chart bars, step columns) are
     NOT touched. EXCEPT comparison tables (grid-template-columns:220px)
     which stay as a wide scrollable table — see the override lower in
     this media query. */
  .blog-diagram-scroll > [style*="display:grid"]:not([style*="grid-template-columns:220px"]),
  .blog-diagram-scroll > [style*="display: grid"]:not([style*="grid-template-columns:220px"]),
  .ia-diagram > [style*="display:grid"]:not([style*="grid-template-columns:220px"]),
  .ia-diagram > [style*="display: grid"]:not([style*="grid-template-columns:220px"]) {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 12px !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;
  }

  /* ─── 5-column comparison tables (grid starts with 220px fixed col)
     on mobile: switch to a plain stacked block layout. The grid
     becomes a vertical list of cells (header row cells first, then
     each data row's cells in HTML order). User sees every single
     cell on screen — nothing cut off, no horizontal scroll required.
     Higher specificity (`.blog-article .ia-diagram > ...`) beats the
     generic direct-child flatten rule above. */
  .blog-article .ia-diagram > [style*="grid-template-columns:220px"],
  .blog-article .blog-diagram-scroll > [style*="grid-template-columns:220px"] {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .blog-article .ia-diagram > [style*="grid-template-columns:220px"] > *,
  .blog-article .blog-diagram-scroll > [style*="grid-template-columns:220px"] > * {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    text-align: left !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;
}