/* ═══════════════════════════════════════════════════════════════════
   inside-pages.css — shared styling for every "inside" page that uses
   the .svc-hero-wrap hero pattern (service pages, industry pages,
   and anything else that adopts the same shell).
   ─────────────────────────────────────────────────────────────────────
   Loaded globally via views/partials/head.ejs. All rules are scoped to
   `body:has(.svc-hero-wrap)` (or the `.svc-hero-wrap` element itself),
   so pages that do NOT use that hero pattern stay completely unaffected.

   Previously these rules lived inline inside views/services/show.ejs.
   Moving them here makes them apply automatically to every inside page.
   ═══════════════════════════════════════════════════════════════════ */

/* Breadcrumb treatment moved to public/css/breadcrumb.css. */

/* Same navy-to-white gradient as the homepage Case Studies section. */
.svc-hero-wrap {
  padding-top: 20px;
}
.svc-hero-wrap .ins-btn-primary,
.svc-hero-wrap .ins-btn-ghost { border-radius: 999px; }

/* Row: white card on LEFT, gradient / process panel on RIGHT. */
.svc-hero-wrap .ins-row1 {
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 24px;
}
/* White card — light-flip: white + top-left dark bloom, no drop shadow. */
.svc-hero-wrap .ins-card-overlap {
  margin-left: 0;
  margin-right: 0;
  border-radius: 18px;
  align-self: stretch;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  box-shadow: none;
}
.svc-hero-wrap .ins-card-overlap .ins-card-eyebrow { color: var(--navy); }
.svc-hero-wrap .ins-card-overlap .ins-card-eyebrow-bar { background: var(--navy); }
.svc-hero-wrap .ins-card-overlap .ins-card-desc { color: var(--navy); }
/* Strip any inline colour inside the title. */
.svc-hero-wrap .ins-card-overlap .ins-card-title,
.svc-hero-wrap .ins-card-overlap .ins-card-title * { color: var(--navy) !important; }
/* Pills: navy border + navy text, rounded pill, Title Case. */
.svc-hero-wrap .ins-card-overlap .ins-card-pill {
  color: var(--navy) !important;
  border: 1px solid var(--navy) !important;
  border-radius: 999px;
  text-transform: capitalize;
}
.svc-hero-wrap .ins-gradient {
  background: transparent;
  width: auto;
  flex: 0 0 42%;
}
/* Industry-page right-side cards: each .ins-gradient-card is a stacked
   coloured tile with the same top-left dark bloom as the process tiles
   on service pages. Colours cycle through the brand palette. Anchors
   with .ins-gradient-card need the reset for text-decoration/inherit. */
body:has(.svc-hero-wrap) .ins-gradient-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
body:has(.svc-hero-wrap) .ins-gradient-card {
  display: block;
  padding: 22px 24px;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  text-decoration: none;
  color: inherit;
  transition: filter .25s ease, transform .2s ease;
}
body:has(.svc-hero-wrap) a.ins-gradient-card:hover { filter: brightness(1.06); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+1) { background-color: var(--teal); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+2) { background-color: var(--orange); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+3) { background-color: var(--green); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+4) { background-color: var(--navy); }
/* When .ins-step items are rendered inside a coloured .ins-gradient-card
   (case-study hero Key Impacts list), strip the tile-style bloom and
   force the numbers to white so nothing competes with the card colour. */
body:has(.svc-hero-wrap) .ins-gradient-card .ins-step {
  padding: 8px 0;
  background-image: none;
  border-radius: 0;
  transition: none;
}
body:has(.svc-hero-wrap) .ins-gradient-card .ins-step:hover { filter: none; transform: none; }
body:has(.svc-hero-wrap) .ins-gradient-card .ins-step-num { color: #ffffff !important; opacity: 0.55; }

/* "The Problem Space" — restructure the section on inside pages. The
   base entexis.css builds this as a 2-column grid (left: title + copy,
   right: stacked stat cards). We flip it to a single stacked layout:
   title + copy span the full width at the top, then the stat cards
   drop below in a horizontal row so the section reads as a full-width
   feature block rather than a narrow two-column split. */
body:has(.svc-hero-wrap) .problem-section {
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  align-items: initial !important;
  padding-left: max(72px, calc(50% - 720px)) !important;
  padding-right: max(72px, calc(50% - 720px)) !important;
}
/* Cap every case-study content section to the same 1440px content column
   as the hero. Each section keeps its own vertical padding + background,
   only the horizontal padding is replaced with the max() trick. */
body:has(.svc-hero-wrap) .section,
body:has(.svc-hero-wrap) .insight-band,
body:has(.svc-hero-wrap) .features-section,
body:has(.svc-hero-wrap) .ecosystem-section,
body:has(.svc-hero-wrap) .deep-dives-section,
body:has(.svc-hero-wrap) .how-section,
body:has(.svc-hero-wrap) .roadmap-section,
body:has(.svc-hero-wrap) .platform-section,
body:has(.svc-hero-wrap) .cs-impact-section,
body:has(.svc-hero-wrap) .cs-cta-section,
body:has(.svc-hero-wrap) .cs-insights-section,
body:has(.svc-hero-wrap) .cs-faq-section,
body:has(.svc-hero-wrap) .next-case,
body:has(.svc-hero-wrap) .git-strip,
body:has(.svc-hero-wrap) .home-new .hn-work {
  padding-left: max(72px, calc(50% - 720px)) !important;
  padding-right: max(72px, calc(50% - 720px)) !important;
}
/* "The Problem Space" eyebrow label reads as navy on every case study,
   overriding the per-page theme-colour the DB body sets inline (green
   / orange / blue etc.). */
body:has(.svc-hero-wrap) .problem-section .sec-eyebrow {
  color: var(--navy) !important;
}
body:has(.svc-hero-wrap) .prob-right {
  flex-direction: row !important;
  gap: 20px !important;
}
body:has(.svc-hero-wrap) .prob-right > .prob-stat-card {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .prob-right {
    flex-direction: column !important;
  }
}
/* Stat cards — plain tiles: no background tint, no border. Base
   entexis.css draws a left border and a light nth-child tint per card;
   we strip both here so the cards read as clean content blocks that
   inherit the section's white ground. Padding is trimmed on the sides
   so the copy aligns to the same left edge as the paragraphs above. */
body:has(.svc-hero-wrap) .prob-stat-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
}
/* Hide the stat-card icons entirely — the cards read cleaner as
   number → label → description, no glyph on top. */
body:has(.svc-hero-wrap) .prob-stat-card .psc-icon { display: none !important; }

/* "Under the Hood" — inline navy panels inside each deep-dive card
   (marked in DB body with `style="background:#1a2857"`) get rounded
   corners so they match the site's rounded-card language. */
body:has(.svc-hero-wrap) .deep-dives-section [style*="background:#1a2857"] {
  border-radius: 18px !important;
  overflow: hidden;
}
/* Every mini-tile INSIDE a navy panel across case studies uses an
   inline coloured border (`border:2px solid #4aaa57` etc.) from the
   DB body. Strip those borders so the tiles read as clean subtle
   plates on the navy ground — matching the AllWear body style. */
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-left:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-right:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-top:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-bottom:"] {
  border: 0 !important;
}
/* Extra bottom padding so "Under the Hood" ends with breathing room
   before the next section (What's Possible / Related, etc.) begins. */
body:has(.svc-hero-wrap) .deep-dives-section {
  padding-bottom: 100px !important;
}

/* ── "What It Connects" (.ecosystem-section) — same treatment as the
   Impact and What's Possible sections: navy→white gradient ground,
   cards flip to solid brand colours with content anchored to the
   bottom, no border, 18px rounded corners. */
body:has(.svc-hero-wrap) .ecosystem-section {
  padding: 80px max(72px, calc(50% - 720px)) 100px !important;
}
body:has(.svc-hero-wrap) .ecosystem-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .sec-title,
body:has(.svc-hero-wrap) .ecosystem-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .ecosystem-section > div > p { color: rgba(255,255,255,0.7) !important; }

/* Header wrapper — the DB body constrains it to `max-width:900px;
   padding:0 24px`, which offsets the title / description to the right
   of the card grid. Reset both so heading text aligns to the same
   72px section padding as the cards below. */
body:has(.svc-hero-wrap) .ecosystem-section > div:not(.eco-grid) {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Grid: keep the DB body's 3-col template, just widen the gap and
   remove the inline max-width so the grid aligns to section padding. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-grid {
  max-width: none !important;
  padding: 0 !important;
  gap: 20px !important;
  margin: 32px 0 0 !important;
}

/* Cards — flat solid colour + top-left dark bloom, rounded corners,
   content anchored to the bottom (flex column pushed to flex-end).
   Border-radius + border overrides the inline styles. `!important` on
   the flex properties beats any inline `display:block` the DB body
   might set. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card {
  border-radius: 18px !important;
  border: 0 !important;
  padding: 24px 22px !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
/* Brand-cycle colours across the flat grid. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+1) { background-color: var(--teal, #0096c7) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+2) { background-color: var(--orange, #f77f00) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+3) { background-color: var(--green, #4aaa57) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+4) { background-color: var(--blue, #1565c7) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+5) { background-color: var(--navy, #1a2857) !important; }
/* Every text descendant flips to white on the coloured tiles. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card * { color: #ffffff !important; }
/* Title / description sit flush against the card's inner padding — no
   inherited left offset. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card .eco-name,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card .eco-desc,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card .eco-tag {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Light-flip — chained class selector beats the nth-child colour cycle
   above (2 classes vs 2 classes; later in source wins). Card 0 gets
   `.eco-card--light` from the JS, plus one random card past index 2. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card.eco-card--light {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.18), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .ecosystem-section .eco-card.eco-card--light,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card.eco-card--light * {
  color: var(--navy, #1a2857) !important;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .ecosystem-section { padding: 60px 24px 80px !important; }
  body:has(.svc-hero-wrap) .ecosystem-section .eco-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Case-study FAQ — match the home FAQ layout: inner wrapper widened to
   1200px, wrapped in a white rounded card with generous padding. Base
   template ships `.fade-in { max-width: 800px }` inline, which we
   widen here so both sites carry the same shape. Section itself gets
   a subtle light-gray ground so the white card reads as a card. */
body:has(.svc-hero-wrap) .cs-faq-section {
  background: #f7f7f8 !important;
  padding: 56px max(72px, calc(50% - 720px)) !important;
}
body:has(.svc-hero-wrap) .cs-faq-section > .fade-in {
  max-width: 1440px !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 48px 48px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .cs-faq-section { padding: 40px 20px !important; }
  body:has(.svc-hero-wrap) .cs-faq-section > .fade-in { padding: 32px 20px !important; }
}
@media (max-width: 560px) {
  body:has(.svc-hero-wrap) .cs-faq-section { padding: 28px 14px !important; }
  body:has(.svc-hero-wrap) .cs-faq-section > .fade-in { padding: 24px 14px !important; }
}

/* ── "What's Possible" (.roadmap-section) — same treatment as the
   Impact section: navy→white gradient ground, cards in the Industries
   row rhythm (2 + 1 + 3 + 1). Reuses the palette rotation but with
   `.rm-step--wide / --lead / --light` modifiers the JS assigns. */
body:has(.svc-hero-wrap) .roadmap-section {
  padding: 144px max(72px, calc(50% - 720px)) 100px !important;
  margin-top: 0 !important;
}
body:has(.svc-hero-wrap) .roadmap-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .roadmap-section .sec-title,
body:has(.svc-hero-wrap) .roadmap-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .roadmap-section > .fade-in > p { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .rm-steps {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 32px !important;
}
/* Cards — flat solid colour + top-left dark bloom, rounded corners,
   no hover motion or shadow, no ::after ring. */
body:has(.svc-hero-wrap) .rm-step {
  padding: 32px 28px !important;
  background: var(--rm-color, var(--teal)) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  min-height: 240px;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
}
body:has(.svc-hero-wrap) .rm-step::after { display: none !important; }
body:has(.svc-hero-wrap) .rm-step:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Palette cycle — flat tokens instead of the diagonal gradient. */
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+1) { --rm-color: var(--teal);   background: var(--teal)   !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+2) { --rm-color: var(--orange); background: var(--orange) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+3) { --rm-color: var(--green);  background: var(--green)  !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+4) { --rm-color: var(--blue);   background: var(--blue)   !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+5) { --rm-color: var(--navy);   background: var(--navy)   !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
/* Force every text descendant to white on the coloured cards. */
body:has(.svc-hero-wrap) .rm-step,
body:has(.svc-hero-wrap) .rm-step * { color: #ffffff !important; }
/* Row-rhythm modifiers. */
body:has(.svc-hero-wrap) .rm-step--wide { grid-column: span 2; }
body:has(.svc-hero-wrap) .rm-step--lead { grid-column: 1 / -1; }
/* Light-flip — chained selector matches the nth-child specificity;
   placed AFTER the nth-child block, so cascade order wins. */
body:has(.svc-hero-wrap) .rm-step.rm-step--light {
  background: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.08), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .rm-step.rm-step--light,
body:has(.svc-hero-wrap) .rm-step.rm-step--light * { color: var(--navy) !important; }
body:has(.svc-hero-wrap) .rm-step.rm-step--light .rm-dot {
  background: rgba(26,40,87,0.08) !important;
  border-color: rgba(26,40,87,0.20) !important;
  color: var(--navy) !important;
}
body:has(.svc-hero-wrap) .rm-step.rm-step--light .rm-status {
  background: rgba(26,40,87,0.08) !important;
  color: var(--navy) !important;
}
/* Navy paint for every full-width --lead tile. */
body:has(.svc-hero-wrap) .rm-step.rm-step--lead {
  background: var(--navy) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
/* Explicit green accent for step 5 (JS marks it with --green). Same
   chained-class specificity so it beats the nth-child cycle. */
body:has(.svc-hero-wrap) .rm-step.rm-step--green {
  background: var(--green) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .rm-steps { grid-template-columns: 1fr !important; }
  body:has(.svc-hero-wrap) .rm-step--wide,
  body:has(.svc-hero-wrap) .rm-step--lead { grid-column: 1 !important; }
}
/* Small-caps title at the top of each navy panel (e.g. "Same Topic,
   Two Very Different Sets"). DB body colours these with an inline
   brand-hex string — force them to white so they read cleanly against
   the navy ground. */
body:has(.svc-hero-wrap) .deep-dives-section [style*="background:#1a2857"] > div[style*="letter-spacing:.1em"],
body:has(.svc-hero-wrap) .deep-dives-section [style*="background:#1a2857"] > div[style*="text-transform:uppercase"] {
  color: #ffffff !important;
}
/* Body copy inside every navy panel across a case study (Under the
   Hood deep-dive panels, What Makes It Work visual panels, and any
   other inline `background:#1a2857` block) reads at rgba(255,255,255,
   .35–.7) in the DB body, which is muted on navy. Boost every text
   descendant to a high-contrast off-white so the copy stays readable.
   Small-caps eyebrow labels above already resolve to pure white. */
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="rgba(255,255,255,"] {
  color: rgba(255,255,255,0.92) !important;
}
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-muted {
  color: rgba(255,255,255,0.92) !important;
}
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-note,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-note-author,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-note-body {
  color: #1a2857 !important;
}
/* White gradient rows (no brand badge) flip muted text to navy. */
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .feat-sb-muted {
  color: #1a2857 !important;
}
/* White gradient rows: title text classes default to white but need navy
   on the white row background. Mirrors the muted-flip above so a row
   without a brand trigger stays legible. */
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold-mb,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold-mb2,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold-mb4,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold-mb8 {
  color: #1a2857 !important;
}
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-label,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-autolog {
  color: rgba(255,255,255,0.75) !important;
}
/* Inside a white-gradient stat card the label needs navy, not translucent
   white (otherwise it fades into the white background). Must come AFTER
   the rule above to win equal-specificity source order. */
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-stat .feat-sb-label {
  color: #1a2857 !important;
}
/* Card title (the big number / lead phrase) matches the left-side H2
   `.prob-title` scale so the two columns read at the same weight. */
body:has(.svc-hero-wrap) .prob-stat-card .psc-num {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

/* "The Impact" section on case-study bodies. Section gets the case-studies
   navy-to-white gradient behind it; the inner grid becomes a 3-column
   asymmetric layout like the homepage Industries; each card cycles the
   brand palette with the top-left dark bloom, and the first (lead) card
   spans the full row width (like hn-ind-lead). Card 0 + one random card
   render as white light-flip tiles. */
body:has(.svc-hero-wrap) .cs-impact-section {
  /* Match the side padding of other sections — content caps at 1440px
     content column via max() while gradient background spans full width. */
  padding: 80px max(72px, calc(50% - 720px)) 100px !important;
}
/* Restyle the section heading colours so they read against the dark top
   of the gradient. */
body:has(.svc-hero-wrap) .cs-impact-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .cs-impact-section .sec-title,
body:has(.svc-hero-wrap) .cs-impact-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .cs-impact-section .fade-in > p { color: rgba(255,255,255,0.7) !important; }

/* Match the width of the sections above (Problem Space, Features, etc.)
   which use full-flow content inside `.problem-section`-style wrappers
   with 72px side padding and no inner max-width cap. The DB body ships
   the Impact section with `<div class="fade-in" style="max-width:900px">`,
   so we cancel that inline cap and reset the inline `padding:0 24px` too
   so the content aligns to the outer 72px side padding of the section. */
body:has(.svc-hero-wrap) .cs-impact-section .fade-in {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Turn the .fade-in that WRAPS the Impact cards into one 3-col grid
   and flatten every DB sub-grid wrapper inside it (display: contents)
   so all cards flow into the same outer grid. Row rhythm is then set
   by two per-card modifiers the JS applies:
     .cs-impact-card--wide  → spans 2 of 3 columns (top-left tile)
     .cs-impact-card--lead  → spans all 3 columns (full-width row)
   Card index 0 is --wide + --light, then every 4th card starting at
   index 2 is --lead, giving the Industries-block rhythm the site
   already uses: 2 → 1 → 3 → 1 → 3 → 1 → … */
body:has(.svc-hero-wrap) .cs-impact-section .fade-in:has(.cs-impact-card) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
body:has(.svc-hero-wrap) .cs-impact-section .fade-in:has(.cs-impact-card) > div {
  display: contents !important;
}
body:has(.svc-hero-wrap) .cs-impact-card--wide { grid-column: span 2; }
body:has(.svc-hero-wrap) .cs-impact-card--lead { grid-column: 1 / -1; }
/* The navy paint for every --lead tile lives BELOW the nth-child colour
   block further down this file, so cascade order (later wins at equal
   specificity) can beat the green/orange/etc. cycle. */

/* Cards — brand-cycle colours + top-left dark bloom + individual
   rounded corners (18px each, like the Industries tiles). Position
   `relative` kept for the icon slot. */
body:has(.svc-hero-wrap) .cs-impact-card {
  padding: 32px 28px !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  min-height: 260px;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Icon slot injected by the Impact-section JS. Inherits the card's own
   text colour so it flips with the light variant. Sits above the DB
   inline content, matching the Industries card structure. */
body:has(.svc-hero-wrap) .cs-impact-icon {
  color: inherit !important;
  margin-bottom: 18px;
  line-height: 0;
}
body:has(.svc-hero-wrap) .cs-impact-icon svg { display: block; }
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light .cs-impact-icon,
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light .cs-impact-icon * {
  color: var(--navy) !important;
  stroke: var(--navy) !important;
}

/* Kill hover motion + hover shadow on every card-like element on inside
   pages. Some cards set transform / box-shadow via inline onmouseover
   handlers (from services/show.ejs and older DB body content); this
   `!important` beats the inline styles that get pushed in on mouseover. */
body:has(.svc-hero-wrap) .hn-bento-card:hover,
body:has(.svc-hero-wrap) .hn-news-card:hover,
body:has(.svc-hero-wrap) .hn-how-card:hover,
body:has(.svc-hero-wrap) .cs-impact-card,
body:has(.svc-hero-wrap) .cs-impact-card:hover,
body:has(.svc-hero-wrap) .ins-gradient-card:hover,
body:has(.svc-hero-wrap) .svc-lab:hover,
body:has(.svc-hero-wrap) .hn-ind-grid a:hover,
body:has(.svc-hero-wrap) a[onmouseover]:hover {
  transform: none !important;
  box-shadow: none !important;
}
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+1) { background: var(--teal) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+2) { background: var(--orange) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+3) { background: var(--green) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+4) { background: var(--blue) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+5) { background: var(--navy) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }

/* Force every text descendant white on the coloured cards. */
body:has(.svc-hero-wrap) .cs-impact-card,
body:has(.svc-hero-wrap) .cs-impact-card * { color: #ffffff !important; }
/* Bump the description text (13-14px in DB inline) to body size so it
   reads at the same weight as the paragraph copy above. The JS-injected
   .cs-impact-icon is now the first div child, so the DB description
   sits at nth-of-type(4) (icon → number → label → description). */
body:has(.svc-hero-wrap) .cs-impact-card > div:nth-of-type(4),
body:has(.svc-hero-wrap) .cs-impact-card p {
  font-size: 16px !important;
  line-height: 1.65 !important;
}
/* On cards whose LABEL slot is a small 13px string (Before / After /
   What It Unlocked in HR; similar mini-label cards in other bodies),
   bump the label from 13px to a real headline size so it reads as the
   card's title. Icon is now nth-of-type(1); the label sits at
   nth-of-type(2). Stats cards have a 32px number at nth-of-type(2), so
   the [style*="font-size:13px"] attribute filter is what keeps this
   rule from catching them. */
body:has(.svc-hero-wrap) .cs-impact-card > div:nth-of-type(2)[style*="font-size:13px"] {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

/* Light-flip — card chain uses two classes so specificity matches the
   nth-child colour rules (both are 3 classes/pseudo-classes deep) and
   the later declaration wins the cascade, making the tile white. */
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light {
  background: #ffffff !important;
  /* Re-declare the bloom: the `background` shorthand above wipes
     background-image, which left the white Impact tile dead flat while
     the matching How It Works white tile (.how-step:nth-child(1)) kept
     its gradient. This line is what makes the two sets look the same. */
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light,
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light * { color: var(--navy) !important; }
/* Navy paint for every full-width --lead tile. Chained class selector
   (2 classes) matches the nth-child rule specificity above; this rule
   is placed AFTER the nth-child block so cascade order wins. */
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--lead {
  background: var(--navy) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
/* Explicit green accent for card 6 (JS marks it with --green). Same
   chained-class specificity so it beats the nth-child cycle. */
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--green {
  background: var(--green) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Deep-dives section — class-based replacement for the 10 inline-style
   patterns that were handed-authored into case study body HTML. All
   scoped to .deep-dives-section so these class names cannot leak.
   ═══════════════════════════════════════════════════════════════════ */

/* Section kicker — the uppercase "DEEP DIVES" label above the heading */
.deep-dives-section .dd-section-kicker {
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0096c7; margin-bottom: 20px;
}

/* Per-card kicker — small coloured label above the card's title */
.deep-dives-section .dd-kicker {
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 10px;
}
.deep-dives-section .dd-kicker--teal   { color: #0096c7; }
.deep-dives-section .dd-kicker--green  { color: #4aaa57; }
.deep-dives-section .dd-kicker--orange { color: #f77f00; }
.deep-dives-section .dd-kicker--gray   { color: #94a0ad; }

/* Inline badges / chips inside deep-dive cards */
.deep-dives-section .dd-badge {
  font-size: 13px; font-weight: 700;
  padding: 3px 8px; letter-spacing: .04em;
  display: inline-block;
}
/* Badges: SOLID brand background + WHITE text. */
.deep-dives-section .dd-badge--teal   { background: #0096c7; color: #ffffff; }
.deep-dives-section .dd-badge--green  { background: #4aaa57; color: #ffffff; }
.deep-dives-section .dd-badge--orange { background: #f77f00; color: #ffffff; }
.deep-dives-section .dd-badge--gray   { background: #6b7280; color: #ffffff; }
.deep-dives-section .dd-badge--navy   { background: #1a2857; color: #ffffff; border-radius: 999px; padding: 3px 10px; }
/* Give rounded brand badges breathing room when they lead a card body. */
.cs-tcard--xl .dd-badge,
.cs-tcard--xl-teal .dd-badge,
.cs-tcard--xl-green .dd-badge,
.cs-tcard--xl-orange .dd-badge,
.cs-tcard--xl-blue .dd-badge { margin-bottom: 12px; }
/* Beat .cs-card--navy .cs-tcard--xl * {color:inherit !important} which forces
   navy text (invisible on navy badge). Also beat the generic .dd-badge rule. */
.cs-card--navy .cs-tcard--xl .dd-badge.dd-badge--navy,
.cs-card--navy .cs-tcard--xl-green .dd-badge.dd-badge--navy,
.cs-card--navy-mt24 .cs-tcard--xl .dd-badge.dd-badge--navy,
.cs-card--navy-mt24 .cs-tcard--xl-green .dd-badge.dd-badge--navy,
.cs-card--navy-sm .cs-tcard--xl .dd-badge.dd-badge--navy { color: #ffffff !important; background: #1a2857 !important; }

/* Body text variants — solid white on dark cards. */
.deep-dives-section .dd-text {
  font-size: 16px; color: #ffffff; line-height: 1.6;
}
.deep-dives-section .dd-text--sm {
  font-size: 15px; color: #ffffff; line-height: 1.7;
}
.deep-dives-section .dd-text--list {
  font-size: 16px; color: #ffffff; line-height: 2;
}

/* Mini-card badge — ONE common class. Default = small inline chip (10px).
   Inside a cs-dd-4-tiles card it auto-scales up to the bigger 13px badge
   with the radial-bloom gradient. On a white-gradient parent (cs-tile
   --white-grad or 1st card of the cycle) it inverts to navy pill + white
   text. Keep this the only badge class — no colour variants, no size
   variants, context does the work. */
.cs-mini-badge,
.cs-mini-badge.cs-mini-badge {
  display: inline-block;
  background: #ffffff !important;
  color: #1a2857 !important;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  margin-bottom: 12px;
  letter-spacing: .04em;
  border-radius: 999px;
  font-style: normal !important;
}
/* Size modifier: readable 14px pill (opt in per use). */
.cs-mini-badge.cs-mini-badge--lg {
  font-size: 14px;
  padding: 5px 14px;
}
.cs-dd-4-tiles .cs-mini-badge {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  font-size: 13px;
  padding: 3px 12px;
  margin-bottom: 0;
}

.cs-mini-days {
  font-size: 13px; color: #ffffff;
}
.cs-mini-days--alert {
  font-size: 13px; color: #e74c3c; font-weight: 700;
}

.cs-mini-body {
  font-size: 16px; color: #ffffff; line-height: 1.5;
}

/* Compact deep-dive card title (icon + title + body horizontal layout). */
.cs-dd-mini-title {
  font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px;
}

/* Impact stat subtitle — sits under a big stat number, above a short body. */
.cs-stat-subtitle {
  font-size: 18px; font-weight: 700; color: #fff; margin: 8px 0 6px;
}

/* Tech-stack card icon (goes above the tech name inside .eco-card).
   Color follows the card's positional --eco-color so icon = tag label color. */
.eco-card .cs-tech-icon {
  width: 36px; height: 36px; margin-bottom: 18px; display: block;
  color: var(--eco-color, #0096c7);
}

/* Mini-card header row — holds a badge + a "N days" / status label. */
.cs-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 14px;
}
/* Inner mini-card tiles stack content vertically with consistent spacing.
   align-items: flex-start keeps inline-block chips at their natural width
   instead of stretching full-width. */
.cs-dd-4-tiles .cs-tcard--sm,
.cs-dd-4-tiles .cs-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
/* Badge color overrides live further down (after .cs-tile * so source order
   wins at equal specificity). See the block near .cs-tile--white-grad. */
.cs-dd-4-tiles .cs-mini-header { margin-bottom: 14px; }
.cs-dd-4-tiles .cs-ba-label {
  font-size: 24px; font-weight: 800; line-height: 1.1;
  margin: 0 0 10px;
}
.cs-dd-4-tiles .cs-mini-body {
  font-size: 14px; line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Ecosystem section — class-based replacement for inline-style patterns.
   Scoped to .ecosystem-section.
   ═══════════════════════════════════════════════════════════════════ */
.ecosystem-section .eco-card-title {
  font-size: 16px; font-weight: 700; color: #1a2857; margin-bottom: 6px;
}
.ecosystem-section .eco-card-body {
  font-size: 16px; color: #6b7280; line-height: 1.6;
}
.ecosystem-section .eco-card-footer-label {
  margin-top: 10px; font-size: 13px; font-weight: 700;
}
.ecosystem-section .eco-card-footer-label--teal      { color: #0096c7; }
.ecosystem-section .eco-card-footer-label--green     { color: #4aaa57; }
.ecosystem-section .eco-card-footer-label--orange    { color: #f77f00; }
.ecosystem-section .eco-card-footer-label--blue      { color: #1565c7; }
.ecosystem-section .eco-card-footer-label--red       { color: #f2504e; }
.ecosystem-section .eco-card-footer-label--darkgreen { color: #4a7a2a; }
.ecosystem-section .eco-card-footer-label--black     { color: #222222; }
.eco-intro {
  font-size: 16px; color: #6b7280; line-height: 1.8; max-width: 560px; margin-top: 14px;
}
.eco-intro--nocap {
  font-size: 16px; color: #6b7280; line-height: 1.8;
}
/* ═══════════════════════════════════════════════════════════════════
   Architecture section (inside .deep-dives-section with navy card).
   Class-based replacement for the inline-style grid/kicker/chip set.
   ═══════════════════════════════════════════════════════════════════ */
.cs-arch-body {
  font-size: 16px; color: #fff; line-height: 1.6;
}
/* Section kicker (INPUTS / COMPLIANCE / OUTPUTS) inside a navy
   infographic wrapper — ALWAYS WHITE, no brand accents (per
   2026-10-12 rule: no colors inside navy infographics). */
.cs-arch-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  margin-bottom: 10px;
  color: #ffffff;
}
.cs-arch-kicker--teal,
.cs-arch-kicker--green,
.cs-arch-kicker--blue   { color: #ffffff; }
.cs-arch-kicker--orange { color: #ffffff; margin-bottom: 5px; }

/* Inner cell inside a navy infographic wrapper — solid brand-color
   tile with WHITE text. Rounded corners, no left borders. */
.cs-arch-cell {
  padding: 14px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 10px;
}
.cs-arch-cell--teal   { background: #0096c7; }
.cs-arch-cell--green  { background: #4aaa57; }
.cs-arch-cell--orange { background: #f77f00; }
.cs-arch-cell--blue   { background: #1565c7; }

.cs-arch-band {
  background: #f77f00;
  color: #ffffff;
  padding: 18px;
  text-align: center;
  border-radius: 10px;
}

.cs-arch-foot-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: #ffffff;
  text-align: center; margin-bottom: 12px;
}

/* Foundation-row chip (bottom of the diagram wrapper). White pill +
   navy text so chips pop against the navy wrapper. The parent-class
   prefixes raise specificity above `.cs-card--navy *` which otherwise
   forces every descendant to white text. */
.cs-card--navy .cs-arch-chip,
.cs-card--navy-mt24 .cs-arch-chip,
.cs-card--navy-nm .cs-arch-chip,
.cs-card--navy-sm .cs-arch-chip,
.cs-card--navy-border-teal .cs-arch-chip,
.cs-arch-chip,
.cs-arch-chip--teal,
.cs-arch-chip--green,
.cs-arch-chip--orange,
.cs-arch-chip--blue {
  font-size: 13px;
  font-weight: 700;
  color: #1a2857 !important;
  background: #ffffff !important;
  padding: 6px 14px;
  border-radius: 999px;
  border: none !important;
}

/* "A Real Run" numbered-step list (inside .deep-dives-section navy card). */
.cs-step-title {
  font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px;
}
.cs-step-body {
  font-size: 16px; color: #ffffff; line-height: 1.6;
}
.cs-step-body--mb { margin-bottom: 8px; }

/* Ingestion section — "YOUR SOURCES" kicker + source tag chips. */
.cs-ingest-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  color: #0096c7; margin-bottom: 12px;
}
.cs-card--navy .cs-ingest-tag,
.cs-card--navy-mt24 .cs-ingest-tag,
.cs-card--navy-nm .cs-ingest-tag,
.cs-card--navy-sm .cs-ingest-tag,
.cs-card--navy-border-teal .cs-ingest-tag,
.cs-ingest-tag {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  color: #1a2857 !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 999px;
  padding: 6px 14px;
}
.cs-ingest-note {
  margin-top: 18px;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   Before / After / What It Unlocked mini-cards (inside Impact section
   and sometimes stat cards). Each mini-card has a coloured label and
   body copy. All inline font-sizes migrated to classes.
   ═══════════════════════════════════════════════════════════════════ */
.cs-ba-label {
  font-size: 22px; font-weight: 700; color: #ffffff; line-height: 1.2; margin-bottom: 14px;
}
.cs-ba-label--teal      { color: #0096c7 !important; }
.cs-ba-label--green     { color: #4aaa57 !important; }
.cs-ba-label--blue      { color: #1565c7 !important; }
.cs-ba-label--orange    { color: #f77f00 !important; }
.cs-ba-label--red       { color: #f2504e !important; }
.cs-ba-label--darkgreen { color: #4a7a2a !important; }
.cs-ba-text {
  font-size: 16px; color: #ffffff; line-height: 1.6;
}
.cs-ba-text--muted {
  font-size: 16px; color: #ffffff; line-height: 1.6;
}

/* Section intro paragraph (used under section headings in How It Works
   and What's Possible / Roadmap). */
.cs-section-intro {
  font-size: 16px; color: #6b7280; line-height: 1.8; max-width: 520px; margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   Common inline-replacement utilities (case studies + industries +
   services) — one class per high-frequency inline pattern so a single
   CSS change updates every page.
   ─────────────────────────────────────────────────────────────────── */

/* White card with 1px light-gray border — service page impact / how-it-works. */
.cs-card { background: #fff; padding: 24px; border: 1px solid #e5e7eb; }

/* Solid navy card variants (3 padding/margin flavors). */
/* Navy card variants — all share solid navy bg + rounded outside corners. */
.cs-card--navy    { background: #1a2857; padding: 28px 24px; margin: 20px 0 24px; border-radius: 18px; }
.cs-card--navy-nm { background: #1a2857; padding: 28px 24px; border-radius: 18px; }
.cs-card--navy-sm { background: #1a2857; padding: 24px; border-radius: 18px; }
.cs-card--navy-mt24     { background: #1a2857; padding: 28px 24px; margin-top: 24px; border-radius: 18px; }
.cs-card--navy-lg-mt24  { background: #1a2857; padding: 36px 32px; margin: 24px 0 8px; position: relative; border-radius: 18px; }
.cs-card--navy-mb       { background: #1a2857; padding: 28px 24px; margin: 16px 0 24px; border-radius: 18px; }
.cs-card--navy-mb-lg    { background: #1a2857; padding: 36px 24px; margin: 16px 0 24px; border-radius: 18px; }
.cs-card--navy-plain-mb { background: #1a2857; padding: 28px 24px; margin: 0 0 24px; border-radius: 18px; }
.cs-card--navy-border-teal { background: #1a2857; padding: 28px 24px; border-radius: 18px; }


/* Universal rule: every text descendant inside any .cs-card--navy*
   wrapper is WHITE. Overrides brand-color kickers / section-kickers
   that would otherwise read muted against the navy background. */
.cs-card--navy,
.cs-card--navy *,
.cs-card--navy-nm,
.cs-card--navy-nm *,
.cs-card--navy-sm,
.cs-card--navy-sm *,
.cs-card--navy-mt24,
.cs-card--navy-mt24 *,
.cs-card--navy-mb,
.cs-card--navy-mb *,
.cs-card--navy-mb-lg,
.cs-card--navy-mb-lg *,
.cs-card--navy-plain-mb,
.cs-card--navy-plain-mb *,
.cs-card--navy-lg-mt24,
.cs-card--navy-lg-mt24 *,
.cs-card--navy-border-teal,
.cs-card--navy-border-teal * {
  color: #ffffff !important;
}

/* Exception: a sample white-gradient card (.ia-card--white) nested
   inside any .cs-card--navy* wrapper breaks out of the force-white
   rule above — the white card needs navy text to be readable. One
   rule, one place to change: every reshape that reuses .ia-card--white
   inside a navy wrapper (CONTENT READER-style callouts, etc.) gets
   navy text automatically. */
.cs-card--navy .ia-card.ia-card--white,
.cs-card--navy .ia-card.ia-card--white *,
.cs-card--navy-nm .ia-card.ia-card--white,
.cs-card--navy-nm .ia-card.ia-card--white *,
.cs-card--navy-sm .ia-card.ia-card--white,
.cs-card--navy-sm .ia-card.ia-card--white *,
.cs-card--navy-mt24 .ia-card.ia-card--white,
.cs-card--navy-mt24 .ia-card.ia-card--white *,
.cs-card--navy-mb .ia-card.ia-card--white,
.cs-card--navy-mb .ia-card.ia-card--white *,
.cs-card--navy-mb-lg .ia-card.ia-card--white,
.cs-card--navy-mb-lg .ia-card.ia-card--white *,
.cs-card--navy-plain-mb .ia-card.ia-card--white,
.cs-card--navy-plain-mb .ia-card.ia-card--white *,
.cs-card--navy-lg-mt24 .ia-card.ia-card--white,
.cs-card--navy-lg-mt24 .ia-card.ia-card--white *,
.cs-card--navy-border-teal .ia-card.ia-card--white,
.cs-card--navy-border-teal .ia-card.ia-card--white * {
  color: #1a2857 !important;
}

/* Legacy inline 32px step-number circles — scale up to match the
   .ia-step-circle-md used across diagrams (44px, 16/700, same bloom).
   Inline background colour stays, we only enlarge + add top-left bloom. */
div[style*="width:32px;height:32px;border-radius:50%"] {
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  flex-shrink: 0;
}

/* Legacy inline-styled translucent tiles across case studies: flip
   them to the same white-gradient treatment as .cs-tcard so no card
   renders as a transparent sliver. Catches every padding/margin
   variant via attribute selector. */
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] {
  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: 10px !important;
  color: #1a2857 !important;
}

/* Legacy tiles with `padding:16px 16px` + `border-top:3px solid #COLOR`
   are the 3-col Connect/Read/Ready pattern — flip to brand colour.
   The wider `padding:18px` single-band variants (GOVERNED LAYER etc.)
   fall through to the white-gradient default above. */
div[style*="padding:16px 16px"][style*="border-top:3px solid #0096c7"] {
  background-color: #0096c7 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #ffffff !important;
}
div[style*="padding:16px 16px"][style*="border-top:3px solid #f77f00"] {
  background-color: #f77f00 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #ffffff !important;
}
div[style*="padding:16px 16px"][style*="border-top:3px solid #4aaa57"] {
  background-color: #4aaa57 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #ffffff !important;
}
div[style*="padding:16px 16px"][style*="border-top:3px solid #1565c7"] {
  background-color: #1565c7 !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #ffffff !important;
}
/* Text + labels inside brand-coloured legacy tiles flip to white. */
div[style*="padding:16px 16px"][style*="border-top:3px solid #0096c7"] *,
div[style*="padding:16px 16px"][style*="border-top:3px solid #f77f00"] *,
div[style*="padding:16px 16px"][style*="border-top:3px solid #4aaa57"] *,
div[style*="padding:16px 16px"][style*="border-top:3px solid #1565c7"] * {
  color: #ffffff !important;
}
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] *,
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] .dd-text,
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] .dd-badge,
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] p,
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] span,
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] strong,
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] div {
  color: #1a2857 !important;
}
div[style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] .dd-badge {
  background: #1a2857 !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 3px 12px;
}

/* Case study inset tiles — WHITE gradient card by default (navy text).
   Rows carrying a brand-colour `.dd-badge--teal/green/orange/blue`
   flip to that colour (contextual). Same visual language as .feat-sb-row. */
.cs-tcard {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none;
  padding: 16px 18px;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: #1a2857 !important;
}
.cs-tcard--xl {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border: none;
  padding: 18px 20px;
  border-radius: 10px;
  color: #1a2857 !important;
}
.cs-tcard:has(.dd-badge--teal)   { background-color: #0096c7 !important; color: #ffffff !important; }
.cs-tcard:has(.dd-badge--orange) { background-color: #f77f00 !important; color: #ffffff !important; }
.cs-tcard:has(.dd-badge--green)  { background-color: #4aaa57 !important; color: #ffffff !important; }
.cs-tcard:has(.dd-badge--blue)   { background-color: #1565c7 !important; color: #ffffff !important; }
.cs-tcard:has(.dd-badge--navy)   { background-color: #1a2857 !important; color: #ffffff !important; }
/* Text + badge recolouring. The `*` scope also pulls <strong>/<em>/<b>
   back from the global .cs-card--navy * rule which otherwise forces
   white on every nested element. Covers .dd-text, .dd-text--sm,
   .dd-text--list, .dd-kicker (+ brand variants). */
.cs-tcard .dd-text,
.cs-tcard .dd-text *,
.cs-tcard .dd-text--sm,
.cs-tcard .dd-text--sm *,
.cs-tcard .dd-text--list,
.cs-tcard .dd-text--list *,
.cs-tcard .dd-kicker,
.cs-tcard--xl .dd-text,
.cs-tcard--xl .dd-text *,
.cs-tcard--xl .dd-text--sm,
.cs-tcard--xl .dd-text--sm *,
.cs-tcard--xl .dd-text--list,
.cs-tcard--xl .dd-text--list *,
.cs-tcard--xl .dd-kicker,
.cs-tcard--xl .cs-ba-label,
.cs-tcard--xl .cs-mini-body,
.cs-tcard--xl .ia-body--white-bold,
.cs-tcard--xl .ia-body--white-bold-mb,
.cs-tcard--xl .ia-body--white-bold-mb2,
.cs-tcard--xl .ia-body--white-bold-mb4,
.cs-tcard--xl .ia-body--white-bold-mb8,
.cs-tcard--xl .ia-c-white { color: inherit !important; }
.cs-tcard .dd-badge {
  background: #ffffff !important;
  color: #1a2857 !important;
  border-radius: 999px;
  padding: 3px 12px;
}
.cs-tcard:not(:has(.dd-badge--teal, .dd-badge--orange, .dd-badge--green, .dd-badge--blue, .dd-badge--navy)) .dd-badge,
.cs-tcard:not([class*="cs-tcard--"]) > span[class*="ia-chip"],
.cs-tcard:not([class*="cs-tcard--"]) > span[style] {
  background: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
}

/* Small gray caption (file hint / footnote). */
.cs-caption-sm { font-size: 11px; color: #6b7280; line-height: 1.4; }

/* Light section wrap (gray background + vertical padding). */
.cs-section-light { padding: 60px 0; background: #f7f7f8; }

/* Centered 900-wide container used throughout case studies. */
.cs-container-900 { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.cs-container-900-grid-3 {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Stat column (vertical center + 6px gap). */
.cs-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Horizontal row (12px gap, top-aligned items). */
.cs-row-start { display: flex; gap: 12px; align-items: flex-start; }
/* Column of items with gap (12px). */
.cs-col-12 { display: flex; flex-direction: column; gap: 12px; }

/* Icon utility — vertical-align:-2px right-margin 8px + no shrink. */
.cs-icon { vertical-align: -2px; margin-right: 8px; flex-shrink: 0; }
/* Icon top-aligned (sits above a tall text block). */
.cs-icon-top { flex-shrink: 0; margin-top: 2px; }

/* 2-column equal grid (24px gap and 16px gap flavors). */
.cs-grid-2-24 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cs-grid-2-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 3-column equal grid (6/12/14px gap flavors). */
.cs-grid-3-6  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cs-grid-3-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-grid-3-14 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Navy CTA strip (title + sub + pill action button on one row).
   Styling matches what the attribute-selector transform used to render:
   navy bg, 18px rounded, white title, translucent sub, outlined pill. */
.ent-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #1a2857;
  padding: 28px 32px;
  margin: 16px 0 24px;
  border-radius: 18px;
}
.ent-cta-strip-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.ent-cta-strip-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.ent-cta-strip-btn {
  display: inline-block !important;
  padding: 12px 28px !important;
  background: #1a2857 !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
}

/* Services + articles + industries: stack .blog-stat-row to one column
   on mobile. Case studies don't use .blog-prose so they're untouched. */
@media (max-width: 768px) {
  .cs-grid-2-24,
  .cs-grid-2-16,
  .cs-grid-3-6,
  .cs-grid-3-12,
  .cs-grid-3-14 { grid-template-columns: 1fr !important; }

  /* Fallback: any remaining inline 2/3/4-col grids inside case-study
     navy cards stack to 1 column on mobile. */
  div[style*="display:grid;grid-template-columns:1fr 1fr 1fr 1fr"],
  div[style*="display:grid;grid-template-columns:1fr 1fr 1fr"],
  div[style*="display:grid;grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Mobile: let the dd-text wrap AROUND the badge instead of taking a
     full flex column, so narrow viewports don't squeeze the text into
     a tiny right-hand sliver. */
  .cs-tcard,
  .cs-tcard--xl,
  .cs-tcard--teal, .cs-tcard--orange, .cs-tcard--green, .cs-tcard--blue,
  .cs-tcard--red, .cs-tcard--navy, .cs-tcard--sm,
  .cs-tcard--xl-teal, .cs-tcard--xl-orange, .cs-tcard--xl-green, .cs-tcard--xl-blue,
  .cs-tcard--xl2 {
    display: block !important;
  }
  .cs-tcard .dd-badge,
  .cs-tcard--xl .dd-badge,
  .cs-tcard--teal .dd-badge, .cs-tcard--orange .dd-badge, .cs-tcard--green .dd-badge, .cs-tcard--blue .dd-badge,
  .cs-tcard--red .dd-badge, .cs-tcard--navy .dd-badge, .cs-tcard--sm .dd-badge,
  .cs-tcard--xl-teal .dd-badge, .cs-tcard--xl-orange .dd-badge, .cs-tcard--xl-green .dd-badge, .cs-tcard--xl-blue .dd-badge,
  .cs-tcard--xl2 .dd-badge {
    float: left;
    margin: 0 10px 0 0;
    line-height: 1.2;
  }
  .cs-tcard .dd-text,
  .cs-tcard--xl .dd-text,
  .cs-tcard--teal .dd-text, .cs-tcard--orange .dd-text, .cs-tcard--green .dd-text, .cs-tcard--blue .dd-text,
  .cs-tcard--red .dd-text, .cs-tcard--navy .dd-text, .cs-tcard--sm .dd-text,
  .cs-tcard--xl-teal .dd-text, .cs-tcard--xl-orange .dd-text, .cs-tcard--xl-green .dd-text, .cs-tcard--xl-blue .dd-text,
  .cs-tcard--xl2 .dd-text {
    margin: 0 !important;
    display: block;
  }
  .blog-prose .blog-stat-row { grid-template-columns: 1fr; }

  /* 1-column stat stack corner rounding: only first-card top + last-card
     bottom. :not(#x) bumps specificity above the entexis.css 2x2 rules. */
  .is-blog-post .blog-stat-item:not(#x) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .is-blog-post .blog-stat-item:first-child:not(#x) {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
  }
  .is-blog-post .blog-stat-item:last-child:not(#x) {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }
}

/* Stat value big numerals (32px bold with brand color, lh:1). */
.cs-stat-32        { font-size: 32px; font-weight: 800; line-height: 1; }
.cs-stat-32--teal   { color: #0096c7; }
.cs-stat-32--green  { color: #4aaa57; }
.cs-stat-32--orange { color: #f77f00; }
.cs-stat-32--blue   { color: #1565c7; }
/* Stat value mid numerals (22px bold with brand color, lh:1). */
.cs-stat-22        { font-size: 22px; font-weight: 800; line-height: 1; }
.cs-stat-22--teal   { color: #0096c7; }
.cs-stat-22--green  { color: #4aaa57; }
.cs-stat-22--orange { color: #f77f00; }
.cs-stat-22--blue   { color: #1565c7; }

/* ─── Shared text/background utilities (used across insights + case
       studies + industries + services) ────────────────────────────── */

/* Text color utilities — single-property utility classes. */
/* ─── Deep-dive utility classes — one per repeating inline shape.
   Added 2026-10-12 to migrate ~1000 inline styles across case studies.
   Keep in sync with scratchpad/dd-inline-cleanup.js. */
.ia-icon-inline { vertical-align: -2px; margin-right: 8px; flex-shrink: 0; }
.ia-flex-1 { flex: 1; }
.ia-flex-shrink-0 { flex-shrink: 0; }
.ia-pb-22 { padding-bottom: 22px; }
.ia-mt-2 { margin-top: 2px; }

/* Text size + weight utilities. Colour comes from .ia-c-* classes. */
.ia-text-10 { font-size: 10px; }
.ia-text-11 { font-size: 11px; }
.ia-text-12 { font-size: 12px; }
.ia-text-13 { font-size: 13px; }
.ia-text-14 { font-size: 14px; }
.ia-text-16 { font-size: 16px; }
.ia-text-18 { font-size: 18px; }
.ia-text-22 { font-size: 22px; }
.ia-text-700 { font-weight: 700; }
.ia-text-800 { font-weight: 800; }
.ia-text-center { text-align: center; }
.ia-text-right { text-align: right; }

/* Muted translucent-white text (used on dark navy diagram cards). */
.ia-c-muted75 { color: rgba(255,255,255,.75); }
.ia-c-muted60 { color: rgba(255,255,255,.6); }
.ia-c-muted40 { color: rgba(255,255,255,.4); }

/* Uppercase kicker labels — 11/13/16px variants, 700, letterspaced,
   with 16px bottom margin. Pair with an .ia-c-* colour class. */
.ia-kicker-11-uc { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.ia-kicker-13-uc { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.ia-kicker-16-uc { font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }

/* Flex row helpers — space-between + vertical rhythm. */
.ia-row-between        { display: flex; justify-content: space-between; }
.ia-row-between-16     { display: flex; justify-content: space-between; font-size: 16px; }
.ia-row-between-center { display: flex; justify-content: space-between; align-items: center; }
.ia-col-gap-6          { display: flex; align-items: center; gap: 6px; }
.ia-col-gap-8          { display: flex; flex-direction: column; gap: 8px; }

/* Stat circles — brand background colour from inline `background:` stays
   on each element so each step keeps its own colour; the class holds
   the shape + layout. 32px variants are inline-row (number inside),
   36/40/44px variants center-align horizontally with bottom margin. */
.ia-circle-32 {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-weight: 700; font-size: 13px;
}
.ia-circle-36 {
  width: 36px; height: 36px; border-radius: 50%;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.ia-circle-40 {
  width: 40px; height: 40px; border-radius: 50%;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
}
.ia-circle-44 {
  width: 44px; height: 44px; border-radius: 50%;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
}

/* Flex layouts common inside deep-dive cards. */
.ia-col-bottom-center {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
}
.ia-col-bottom-center--rel {
  flex: 1; position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
}
.ia-row-divider {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ia-row-divider-16 {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 16px;
}
.ia-row-divider-ac {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ia-flex-gap-8  { display: flex; gap: 8px; }
.ia-flex-gap-10 { display: flex; gap: 10px; }
.ia-flex-gap-12 { display: flex; gap: 12px; }
.ia-flex-gap-14 { display: flex; gap: 14px; }
.ia-row-ac-gap-8 { display: flex; align-items: center; gap: 8px; }
.ia-row-top-gap-8 { display: flex; align-items: flex-start; gap: 8px; }
.ia-col-gap-10 { display: flex; flex-direction: column; gap: 10px; }

.ia-flex-1-center { flex: 1; text-align: center; }

/* 16/20px heading variants with brand colour (pair with .ia-c-*). */
.ia-text-16-700-mb4  { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ia-text-16-700-mb10 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.ia-text-20-700 { font-size: 20px; font-weight: 700; }
.ia-text-20-800 { font-size: 20px; font-weight: 800; }
.ia-text-13-600 { font-size: 13px; font-weight: 600; }
.ia-text-16-mt2 { font-size: 16px; margin-top: 2px; }
.ia-text-13-mt2 { font-size: 13px; margin-top: 2px; }
.ia-text-10-mt2 { font-size: 10px; margin-top: 2px; }

.ia-c-muted75-14 { font-size: 14px; color: rgba(255,255,255,.75); }
.ia-c-muted75-16-15 { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.5; }
.ia-c-muted75-16-14 { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.4; }
.ia-c-muted75-nowrap { font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; margin-left: 10px; }

/* Full-width kicker label with 20px bottom (common deep-dive header). */
.ia-kicker-16-uc-mb20 {
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 20px;
}

.ia-c-teal   { color: #0096c7; }
.ia-c-green  { color: #4aaa57; }
.ia-c-orange { color: #f77f00; }
.ia-c-blue   { color: #1565c7; }
.ia-c-white  { color: #ffffff; }
.ia-c-navy   { color: #1a2857; }
.ia-c-red    { color: #f2504e; }
.ia-c-sage   { color: #4a7a2a; }
.ia-c-dark   { color: #222222; }

/* Solid brand backgrounds (used on decorative dots, pills, chart bars). */
.ia-bg-teal   { background: #0096c7; }
.ia-bg-green  { background: #4aaa57; }
.ia-bg-orange { background: #f77f00; }
.ia-bg-blue   { background: #1565c7; }

/* Softmuted body variants shared with insights but not in insights CSS. */
.ia-body--muted75 { font-size: 16px; color: #ffffff; }
.ia-body--muted85 { font-size: 16px; color: #ffffff; line-height: 2; }
.ia-body--white-bold { font-size: 16px; font-weight: 700; color: #fff; }
.ia-body--white-bold-mb { font-size: 16px; color: #fff; font-weight: 600; }
.ia-body--muted-14 { font-size: 14px; color: #ffffff; }

/* ─── Margin / spacing utilities (single-property) ──────────────── */
.ia-mb-4  { margin-bottom: 4px; }
.ia-mb-6  { margin-bottom: 6px; }
.ia-mb-8  { margin-bottom: 8px; }
.ia-mb-10 { margin-bottom: 10px; }
.ia-mb-12 { margin-bottom: 12px; }
.ia-mb-14 { margin-bottom: 14px; }
.ia-mb-16 { margin-bottom: 16px; }
.ia-mb-24 { margin-bottom: 24px; }
.ia-mb-32 { margin-bottom: 32px; }

/* ─── Added during inline-strip pass (2026-10-15) ───
   Utility classes to replace repeated inline styles across all 13
   infographic shapes in the sample article. */
.ia-c-mute { color: #9ca3af; }
.ia-stat-32 { font-size: 32px; font-weight: 800; color: #ffffff; text-align: center; }
.ia-eyebrow--rt-mute  { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; text-align: right; }
.ia-eyebrow--rt-white { font-size: 12px; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: .1em; text-align: right; }
/* Scorecard Matrix cells */
.ia-sc-head { padding: 10px 8px; font-weight: 700; color: rgba(255,255,255,.85); text-align: center; }
.ia-sc-head--strong { padding: 10px 8px; font-weight: 700; color: #ffffff; text-align: center; }
/* Scorecard grid modifier: label + status chip + description layout. */
.ia-sc-grid--3col { grid-template-columns: 220px 120px 1fr !important; min-width: 820px !important; gap: 10px !important; }
/* Scorecard description cell with colored background (brand hex). */
.ia-sc-desc { padding: 12px 16px; font-size: 14px; color: #ffffff; line-height: 1.5; border-radius: 10px; }
.ia-sc-desc--orange { background-color: #f77f00; }
.ia-sc-desc--green  { background-color: #4aaa57; }
.ia-sc-desc--teal   { background-color: #0096c7; }
.ia-sc-desc--blue   { background-color: #1565c7; }
.ia-sc-avg  { background: rgba(255,255,255,.05); padding: 12px 8px; text-align: center; color: #ffffff; font-weight: 700; }
.ia-sc-row-label { background: rgba(255,255,255,.08); padding: 12px 8px; color: #ffffff; font-weight: 700; }
/* Column-flow metric cells (4-Col / 5-Col grids) */
.ia-cell-metric      { padding: 14px 16px; font-size: 16px; color: rgba(255,255,255,.82); text-align: center; }
.ia-cell-metric-head { padding: 14px 16px; font-size: 16px; font-weight: 800; color: #ffffff; background: rgba(255,255,255,.02); }
.ia-cell-label-xs    { font-size: 13px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: .08em; text-align: center; }
/* Eyebrow variants without text-align */
.ia-eyebrow--mute  { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; }
.ia-eyebrow--white { font-size: 11px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: .1em; }
/* Muted body-copy opacities @ 16px line-height 1.5 */
.ia-c-muted55-16-15 { font-size: 16px; color: rgba(255,255,255,.55); line-height: 1.5; }
.ia-c-muted85-16-15 { font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.5; }
.ia-c-mute-16-15    { font-size: 16px; color: #9ca3af; line-height: 1.5; }
.ia-c-muted78-16-15 { font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.55; }
/* Compare Table head cell */
.ia-ct-head { padding: 14px 16px; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid rgba(255,255,255,.15); }

/* ─── Added for 207-article inline-strip migration (2026-10-15) ───
   Opacity + size + alignment utilities needed across real articles. */
.ia-c-muted50 { color: rgba(255,255,255,.5); }
.ia-c-muted55 { color: rgba(255,255,255,.55); }
.ia-c-muted62 { color: rgba(255,255,255,.62); }
.ia-c-muted65 { color: rgba(255,255,255,.65); }
.ia-c-muted70 { color: rgba(255,255,255,.7); }
.ia-c-muted72 { color: rgba(255,255,255,.72); }
.ia-c-muted78 { color: rgba(255,255,255,.78); }
.ia-c-muted80 { color: rgba(255,255,255,.8); }
.ia-c-muted82 { color: rgba(255,255,255,.82); }
.ia-c-muted85 { color: rgba(255,255,255,.85); }
.ia-fs-10 { font-size: 10px; }
.ia-fs-11 { font-size: 11px; }
.ia-fs-13 { font-size: 13px; }
.ia-fs-18 { font-size: 18px; }
.ia-fs-20 { font-size: 20px; }
.ia-fs-22 { font-size: 22px; }
.ia-fs-24 { font-size: 24px; }
.ia-fs-28 { font-size: 28px; }
.ia-ta-center { text-align: center; }
.ia-ta-left   { text-align: left; }
.ia-ta-right  { text-align: right; }
.ia-w-full    { width: 100%; }
.ia-mh-150    { min-height: 150px; }
.ia-mh-160    { min-height: 160px; }
.ia-mh-170    { min-height: 170px; }
.ia-pad-22    { padding: 22px; }
.ia-pad-24    { padding: 24px; }
.ia-mt-32     { margin-top: 32px; }
.ia-mt-34     { margin-top: 34px; }

/* ─── Micro-utility pack for parser-based inline-strip (2026-10-15) ─── */
/* Font sizes (px) */
.ia-fs-9  { font-size: 9px; }
.ia-fs-12 { font-size: 12px; }
.ia-fs-14 { font-size: 14px; }
.ia-fs-15 { font-size: 15px; }
.ia-fs-16 { font-size: 16px; }
.ia-fs-17 { font-size: 17px; }
.ia-fs-19 { font-size: 19px; }
.ia-fs-26 { font-size: 26px; }
.ia-fs-36 { font-size: 36px; }
.ia-fs-40 { font-size: 40px; }
/* Font weights */
.ia-fw-400 { font-weight: 400; }
.ia-fw-500 { font-weight: 500; }
.ia-fw-600 { font-weight: 600; }
.ia-fw-700 { font-weight: 700; }
.ia-fw-800 { font-weight: 800; }
.ia-fw-900 { font-weight: 900; }
/* Line heights (no decimal: 1 → 10, 1.5 → 15, 1.85 → 185) */
.ia-lh-1   { line-height: 1; }
.ia-lh-11  { line-height: 1.1; }
.ia-lh-12  { line-height: 1.2; }
.ia-lh-125 { line-height: 1.25; }
.ia-lh-13  { line-height: 1.3; }
.ia-lh-14  { line-height: 1.4; }
.ia-lh-15  { line-height: 1.5; }
.ia-lh-155 { line-height: 1.55; }
.ia-lh-16  { line-height: 1.6; }
.ia-lh-165 { line-height: 1.65; }
.ia-lh-17  { line-height: 1.7; }
.ia-lh-175 { line-height: 1.75; }
.ia-lh-18  { line-height: 1.8; }
.ia-lh-185 { line-height: 1.85; }
.ia-lh-19  { line-height: 1.9; }
.ia-lh-2   { line-height: 2; }
/* Letter spacing (06 → .06em, 08 → .08em, 1 → .1em, 12 → .12em, 14 → .14em) */
.ia-ls-02  { letter-spacing: .02em; }
.ia-ls-04  { letter-spacing: .04em; }
.ia-ls-06  { letter-spacing: .06em; }
.ia-ls-08  { letter-spacing: .08em; }
.ia-ls-1   { letter-spacing: .1em; }
.ia-ls-12  { letter-spacing: .12em; }
.ia-ls-14  { letter-spacing: .14em; }
/* Text transform */
.ia-tt-up  { text-transform: uppercase; }
.ia-tt-no  { text-transform: none; }
/* Opacity */
.ia-op-85  { opacity: .85; }
.ia-op-9   { opacity: .9; }
/* Padding (common ones) */
.ia-p-14-16 { padding: 14px 16px; }
.ia-p-14-18 { padding: 14px 18px; }
.ia-p-18    { padding: 18px; }
.ia-p-18-22 { padding: 18px 22px; }
.ia-p-20    { padding: 20px; }
.ia-p-22-20 { padding: 22px 20px; }
/* Margin-bottom extras */
.ia-mb-0  { margin-bottom: 0; }
.ia-mb-2  { margin-bottom: 2px; }
.ia-mb-18 { margin-bottom: 18px; }
.ia-mb-20 { margin-bottom: 20px; }
.ia-mb-28 { margin-bottom: 28px; }
.ia-mb-36 { margin-bottom: 36px; }
.ia-mt-4  { margin-top: 4px; }
.ia-mt-6  { margin-top: 6px; }
.ia-mt-8  { margin-top: 8px; }
.ia-mt-10 { margin-top: 10px; }
.ia-mt-12 { margin-top: 12px; }
.ia-mt-14 { margin-top: 14px; }
.ia-mt-16 { margin-top: 16px; }
.ia-mt-18 { margin-top: 18px; }
/* Width */
.ia-mw-520 { min-width: 520px; }
.ia-mw-700 { min-width: 700px; }
.ia-mw-760 { min-width: 760px; }
.ia-mw-820 { min-width: 820px; }
.ia-mw-860 { min-width: 860px; }
/* Display + flexbox utilities */
.ia-d-flex   { display: flex; }
.ia-d-grid   { display: grid; }
.ia-d-iflex  { display: inline-flex; }
.ia-d-block  { display: block; }
.ia-d-iblock { display: inline-block; }
.ia-flex-col { flex-direction: column; }
.ia-ai-center  { align-items: center; }
.ia-ai-start   { align-items: flex-start; }
.ia-ai-end     { align-items: flex-end; }
.ia-ai-stretch { align-items: stretch; }
.ia-jc-center  { justify-content: center; }
.ia-jc-between { justify-content: space-between; }
.ia-jc-around  { justify-content: space-around; }
.ia-jc-start   { justify-content: flex-start; }
.ia-jc-end     { justify-content: flex-end; }
.ia-flex-1 { flex: 1; }
.ia-pos-rel { position: relative; }
.ia-pos-abs { position: absolute; }
.ia-z-1 { z-index: 1; }
/* Gap utilities */
.ia-gap-0  { gap: 0; }
.ia-gap-3  { gap: 3px; }
.ia-gap-4  { gap: 4px; }
.ia-gap-6  { gap: 6px; }
.ia-gap-8  { gap: 8px; }
.ia-gap-10 { gap: 10px; }
.ia-gap-12 { gap: 12px; }
.ia-gap-14 { gap: 14px; }
.ia-gap-16 { gap: 16px; }
.ia-gap-18 { gap: 18px; }
.ia-gap-20 { gap: 20px; }
.ia-gap-24 { gap: 24px; }
/* Grid-template-columns common repeat variants */
.ia-gtc-r2 { grid-template-columns: repeat(2, 1fr); }
.ia-gtc-r3 { grid-template-columns: repeat(3, 1fr); }
.ia-gtc-r4 { grid-template-columns: repeat(4, 1fr); }
.ia-gtc-r5 { grid-template-columns: repeat(5, 1fr); }
.ia-gtc-r6 { grid-template-columns: repeat(6, 1fr); }
/* Brand solid backgrounds */
.ia-bg-teal   { background: #0096c7; }
.ia-bg-green  { background: #4aaa57; }
.ia-bg-orange { background: #f77f00; }
.ia-bg-blue   { background: #1565c7; }
.ia-bg-navy   { background: #1a2857; }
/* rgba(brand,1) — functionally identical to solid hex but used in some articles */
.ia-bg-teal-1   { background: rgba(0,150,199,1); }
.ia-bg-green-1  { background: rgba(74,170,87,1); }
.ia-bg-orange-1 { background: rgba(247,127,0,1); }
.ia-bg-blue-1   { background: rgba(21,101,199,1); }
/* Translucent white backgrounds */
.ia-bg-w02 { background: rgba(255,255,255,.02); }
.ia-bg-w04 { background: rgba(255,255,255,.04); }
.ia-bg-w05 { background: rgba(255,255,255,.05); }
.ia-bg-w06 { background: rgba(255,255,255,.06); }
.ia-bg-w08 { background: rgba(255,255,255,.08); }
.ia-bg-w10 { background: rgba(255,255,255,.1); }
/* Border-top brand variants (bar chart top caps) */
.ia-bt-teal   { border-top: 2px solid #0096c7; }
.ia-bt-green  { border-top: 2px solid #4aaa57; }
.ia-bt-orange { border-top: 2px solid #f77f00; }
.ia-bt-blue   { border-top: 2px solid #1565c7; }
/* Border-left brand variants (callout accents) */
.ia-bl-teal   { border-left: 3px solid #0096c7; }
.ia-bl-green  { border-left: 3px solid #4aaa57; }
.ia-bl-orange { border-left: 3px solid #f77f00; }
.ia-bl-blue   { border-left: 3px solid #1565c7; }
/* Common border-radius values */
.ia-br-circle { border-radius: 50%; }
.ia-br-4      { border-radius: 4px; }
.ia-br-6      { border-radius: 6px; }
.ia-br-8      { border-radius: 8px; }
.ia-br-10     { border-radius: 10px; }
.ia-br-12     { border-radius: 12px; }
.ia-br-top-4  { border-radius: 4px 4px 0 0; }
/* Width/height for step badges + bars */
.ia-sq-18 { width: 18px; height: 18px; }
.ia-sq-24 { width: 24px; height: 24px; }
.ia-sq-32 { width: 32px; height: 32px; }
.ia-sq-38 { width: 38px; height: 38px; }
.ia-sq-40 { width: 40px; height: 40px; }
.ia-sq-42 { width: 42px; height: 42px; }
.ia-sq-44 { width: 44px; height: 44px; }
.ia-sq-48 { width: 48px; height: 48px; }
.ia-sq-52 { width: 52px; height: 52px; }
.ia-sq-60 { width: 60px; height: 60px; }
.ia-sq-72 { width: 72px; height: 72px; }
/* Bar-cell dimensions used in mini bar charts */
.ia-bar-small { width: 18px; height: 14px; }
/* Margin shortcut: center auto with bottom spacing (step-flow circles) */
.ia-m-auto-14 { margin: 0 auto 14px; }
.ia-m-auto-18 { margin: 0 auto 18px; }
/* Text decoration helpers */
.ia-td-none { text-decoration: none; }
.ia-cursor-pointer { cursor: pointer; }
/* Width/height individual (for non-square cases + square via w+h pair) */
.ia-w-14 { width: 14px; } .ia-h-14 { height: 14px; }
.ia-w-18 { width: 18px; } .ia-h-18 { height: 18px; }
.ia-w-24 { width: 24px; } .ia-h-24 { height: 24px; }
.ia-w-32 { width: 32px; } .ia-h-32 { height: 32px; }
.ia-w-38 { width: 38px; } .ia-h-38 { height: 38px; }
.ia-w-40 { width: 40px; } .ia-h-40 { height: 40px; }
.ia-w-42 { width: 42px; } .ia-h-42 { height: 42px; }
.ia-w-44 { width: 44px; } .ia-h-44 { height: 44px; }
.ia-w-48 { width: 48px; } .ia-h-48 { height: 48px; }
.ia-w-52 { width: 52px; } .ia-h-52 { height: 52px; }
.ia-w-60 { width: 60px; } .ia-h-60 { height: 60px; }
.ia-w-72 { width: 72px; } .ia-h-72 { height: 72px; }
.ia-h-8  { height: 8px;  }
.ia-h-12 { height: 12px; }
.ia-h-150 { height: 150px; }
/* Padding — more variants */
.ia-p-0-8   { padding: 0 8px; }
.ia-p-0-10  { padding: 0 10px; }
.ia-p-0-28  { padding: 0 28px; }
.ia-p-12-0  { padding: 12px 0; }
.ia-p-18-0  { padding: 18px 0; }
.ia-p-14    { padding: 14px; }
.ia-p-16-20 { padding: 16px 20px; }
.ia-p-12-14 { padding: 12px 14px; }
.ia-p-10-12 { padding: 10px 12px; }
.ia-p-5-10  { padding: 5px 10px; }
.ia-pr-10   { padding-right: 10px; }
.ia-pb-10   { padding-bottom: 10px; }
/* Borders — translucent + brand (rgba) */
.ia-b-w08 { border: 1px solid rgba(255,255,255,.08); }
.ia-b-w1  { border: 1px solid rgba(255,255,255,.1); }
.ia-b-w18 { border: 1px solid rgba(255,255,255,.18); }
.ia-bb-w08 { border-bottom: 1px solid rgba(255,255,255,.08); }
.ia-bb-w15 { border-bottom: 1px solid rgba(255,255,255,.15); }
.ia-bl-w08 { border-left: 1px solid rgba(255,255,255,.08); }
.ia-bl-2-green-1   { border-left: 2px solid rgba(74,170,87,1); }
.ia-bl-2-orange-1  { border-left: 2px solid rgba(247,127,0,1); }
.ia-bl-2-teal-1    { border-left: 2px solid rgba(0,150,199,1); }
.ia-bl-2-blue-1    { border-left: 2px solid rgba(21,101,199,1); }
.ia-bl-2-green     { border-left: 2px solid #4aaa57; }
.ia-bl-2-orange    { border-left: 2px solid #f77f00; }
.ia-bl-2-teal      { border-left: 2px solid #0096c7; }
.ia-bl-2-blue      { border-left: 2px solid #1565c7; }
/* Grid column span (full-width inside grid) */
.ia-gc-full { grid-column: 1 / -1; }
/* Typography extras */
.ia-ff-mono { font-family: monospace; }
.ia-ws-pre  { white-space: pre-wrap; }
/* Margins — more variants */
.ia-m-6-0       { margin: 6px 0; }
.ia-m-0-6-6-0   { margin: 0 6px 6px 0; }
/* Shape family — pipeline (7-cell flow with auto connectors) */
.ia-pipeline-row  { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; min-width: 720px; }
.ia-pipeline-conn { position: absolute; top: 18px; left: calc((100% - 48px)/6); right: calc((100% - 48px)/6); height: 2px; background: linear-gradient(90deg, #0096c7, #f77f00, #4aaa57); grid-column: 1 / -1; }
/* Shape family — mini bar chart track */
.ia-bar-track { display: flex; align-items: flex-end; justify-content: space-around; height: 150px; border-bottom: 1px solid rgba(255,255,255,.15); }
/* Shape family — specific grid templates recurring across articles */
.ia-grid-80-1-140 { display: grid; grid-template-columns: 80px 1fr 140px; gap: 14px; align-items: center; padding: 16px 20px; }
.ia-grid-48-1    { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.ia-grid-60-200-1 { display: grid; grid-template-columns: 60px 200px 1fr; gap: 16px; align-items: center; padding: 16px 20px; }
.ia-grid-11-1-1  { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
/* Width extras */
.ia-w-80 { width: 80px; } .ia-h-80 { height: 80px; }
.ia-w-90 { width: 90px; } .ia-h-90 { height: 90px; }
/* Final sweep utilities */
.ia-mw-780 { min-width: 780px; }
.ia-mw-880 { min-width: 880px; }
.ia-mw-900 { min-width: 900px; }
.ia-m-auto-10  { margin: 0 auto 10px; }
.ia-pt-14      { padding-top: 14px; }
.ia-flex-shrink-0 { flex-shrink: 0; }
.ia-lh-115     { line-height: 1.15; }
.ia-ls-05      { letter-spacing: .05em; }
.ia-bg-dark18  { background: rgba(0,0,0,.18); }
.ia-bg-dark25  { background: rgba(0,0,0,.25); }
.ia-b-w12      { border: 1px solid rgba(255,255,255,.12); }
.ia-bt-w08     { border-top: 1px solid rgba(255,255,255,.08); }
.ia-gtc-11-1-1  { grid-template-columns: 1.1fr 1fr 1fr; }
.ia-gtc-120-1-1 { grid-template-columns: 120px 1fr 1fr; }
.ia-mt-24  { margin-top: 24px; }
.ia-mt-26  { margin-top: 26px; }
.ia-mt-6  { margin-top: 6px; }
.ia-mt-10 { margin-top: 10px; }
.ia-mt-14 { margin-top: 14px; }
.ia-mt-24 { margin-top: 24px; }

/* Font-size single-prop utility (most common 16px plain). */
.ia-fs-16 { font-size: 16px; }

/* Flex basis + layout utilities. */
.ia-flex-1 { flex: 1; }
.ia-fcenter { display: flex; align-items: center; justify-content: center; }
.ia-fcol-noshrink { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ia-frow-18 { display: flex; gap: 18px; align-items: stretch; }
.ia-row-divided {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Link row — flex row with gap:14, mb:10, no underline, position:relative. */
.ia-row-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  position: relative;
}
.ia-row-link--nomb {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  position: relative;
}

/* Case-study navy/muted compound text classes. */
.cs-txt-15-navy      { color: var(--navy); font-size: 15px; }
.cs-txt-15-navy-bold { font-size: 15px; font-weight: 700; color: var(--navy); }
.cs-txt-13-muted     { font-size: 13px; color: var(--muted); }
.cs-txt-13-muted-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 3px; }

/* Flex-row tile variants — SOLID brand bg + top-left bloom, white text,
   10px rounded corners. Matches the .feat-sb-row / contextual pattern. */
.cs-tcard--teal,
.cs-tcard--green,
.cs-tcard--orange,
.cs-tcard--blue,
.cs-tcard--red,
.cs-tcard--navy,
.cs-tcard--sm {
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: #ffffff;
  border-radius: 10px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.cs-tcard--teal   { background-color: #0096c7; }
.cs-tcard--green  { background-color: #4aaa57; }
.cs-tcard--orange { background-color: #f77f00; }
.cs-tcard--blue   { background-color: #1565c7; }
/* --red is NOT a brand color (banned per feedback_brand_colors_only).
   Legacy markup falls back to blue. */
.cs-tcard--red    { background-color: #1565c7; }
.cs-tcard--navy,
.cs-tcard--sm     { background-color: #1a2857; }

/* XL (padding:18px 20px) variants. */
.cs-tcard--xl-teal,
.cs-tcard--xl-green,
.cs-tcard--xl-orange,
.cs-tcard--xl-blue {
  padding: 18px 20px;
  color: #ffffff;
  border-radius: 10px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.cs-tcard--xl-teal   { background-color: #0096c7; }
.cs-tcard--xl-green  { background-color: #4aaa57; }
.cs-tcard--xl-orange { background-color: #f77f00; }
.cs-tcard--xl-blue   { background-color: #1565c7; }

/* Legacy navy xl2. */
.cs-tcard--xl2 {
  background-color: #1a2857;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  padding: 16px 20px; display: flex; gap: 16px; align-items: flex-start;
  color: #ffffff;
  border-radius: 10px;
}

/* Badge inside ANY colored card variant: white pill + navy text.
   Overrides the deep-dives-section brand-coloured badge rules.
   Also catches inline-styled <span>s (legacy markup where the badge
   isn't a `.dd-badge` but a span with inline bg/color). */
.cs-tcard--teal .dd-badge,
.cs-tcard--green .dd-badge,
.cs-tcard--orange .dd-badge,
.cs-tcard--blue .dd-badge,
.cs-tcard--red .dd-badge,
.cs-tcard--navy .dd-badge,
.cs-tcard--sm .dd-badge,
.cs-tcard--xl-teal .dd-badge,
.cs-tcard--xl-green .dd-badge,
.cs-tcard--xl-orange .dd-badge,
.cs-tcard--xl-blue .dd-badge,
.cs-tcard--xl2 .dd-badge,
.cs-tcard--teal > span,
.cs-tcard--green > span,
.cs-tcard--orange > span,
.cs-tcard--blue > span,
.cs-tcard--red > span,
.cs-tcard--navy > span,
.cs-tcard--sm > span,
.cs-tcard > span.ia-chip-teal-xs,
.cs-tcard > span[class*="ia-chip"],
.cs-tcard--teal > span[class*="ia-chip"],
.cs-tcard--green > span[class*="ia-chip"],
.cs-tcard--orange > span[class*="ia-chip"],
.cs-tcard--blue > span[class*="ia-chip"],
.cs-tcard--red > span[class*="ia-chip"],
.cs-tcard--navy > span[class*="ia-chip"],
.cs-tcard--sm > span[class*="ia-chip"] {
  background: #ffffff !important;
  background-image: none !important;
  color: #1a2857 !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
}

/* Force every text descendant inside a .cs-tcard* variant to WHITE,
   overriding brand-color text that previously sat on translucent bg. */
.cs-tcard *,
.cs-tcard--teal *, .cs-tcard--green *, .cs-tcard--orange *, .cs-tcard--blue *, .cs-tcard--red *,
.cs-tcard--xl-teal *, .cs-tcard--xl-green *, .cs-tcard--xl-orange *, .cs-tcard--xl-blue *,
.cs-tcard--sm *, .cs-tcard--xl2 * { color: #ffffff !important; }

/* ─── Note strip (horizontal small card, mt:14 + padding, often with icon)
       SOLID brand bg + white text. */
.cs-note-strip {
  margin-top: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  border-radius: 10px;
}
.cs-note-strip--teal   { background: #0096c7; }
.cs-note-strip--green  { background: #4aaa57; }
.cs-note-strip--orange { background: #f77f00; }
.cs-note-strip--blue   { background: #1565c7; }
.cs-note-strip * { color: #ffffff !important; }
/* White-gradient variant: inverts to navy text on a white radial-bloom
   bg so it reads on a brand-colored or navy container without blending. */
.cs-note-strip--white {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  color: #1a2857;
}
.cs-note-strip--white * { color: #1a2857 !important; }
.cs-note-strip--white svg { stroke: #1a2857 !important; }

/* Flex-equal cell inside a brand-colored strip (navy sub-tile). */
.cs-cell-flex {
  flex: 1;
  background: #1a2857;
  padding: 16px;
  text-align: center;
  color: #ffffff;
}
.cs-cell-flex-18-16 {
  background: #1a2857;
  padding: 18px 16px;
  text-align: center;
  color: #ffffff;
}
.cs-cell-flex-8-12 {
  flex: 1;
  padding: 8px 12px;
  background: #1a2857;
  font-size: 16px;
  color: #ffffff;
}
.cs-cell-flex * { color: #ffffff !important; }

/* Small inline chips. */
.cs-chip-blue   { background: #1565c7; color: #fff; padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 999px; display: inline-block; }

/* Intent-chip row — flex-wrap pill row where each pill cycles through
   brand colours (teal → orange → green → blue → navy). One class
   .cs-chip per pill, context chooses the colour. */
.cs-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cs-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: #1565c7;
  border-radius: 999px;
}
.cs-chip-row > .cs-chip:nth-child(5n+1) { background: #0096c7; }
.cs-chip-row > .cs-chip:nth-child(5n+2) { background: #f77f00; }
.cs-chip-row > .cs-chip:nth-child(5n+3) { background: #4aaa57; }
.cs-chip-row > .cs-chip:nth-child(5n+4) { background: #1565c7; }
/* 5th slot — brand palette has no 5th accent, so green doubles.
   Avoids navy (invisible on navy parent cards). */
.cs-chip-row > .cs-chip:nth-child(5n+5) { background: #4aaa57; }
.cs-chip-green  { background: #4aaa57; color: #fff; padding: 3px 8px; font-size: 9px; font-weight: 700; }

/* Button-like label (padded with border). */
.cs-btn-label--green {
  padding: 6px 14px;
  background: #4aaa57;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

/* Small navy decorative boxes. */
.cs-box-sm      { background: #1a2857; padding: 14px; color: #ffffff; border-radius: 10px; }
.cs-box-sm-p10  { background: #1a2857; padding: 10px; color: #ffffff; border-radius: 10px; }
.cs-box-sm-ctr  { background: #1a2857; padding: 8px; text-align: center; color: #ffffff; border-radius: 10px; }
.cs-box-sm-12-6 { background: #1a2857; padding: 12px 6px; text-align: center; color: #ffffff; border-radius: 10px; }
.cs-box-sm-14-10 { background: #1a2857; padding: 14px 10px; text-align: center; color: #ffffff; border-radius: 10px; }
.cs-box-sm-10-12 { background: #1a2857; padding: 10px 12px; color: #ffffff; border-radius: 10px; }
.cs-box-sm-pill  { background: #1a2857; padding: 4px 10px; font-size: 13px; color: #ffffff; border-radius: 999px; }
/* Contextual brand-colour variants of cs-box-sm-* (so an .ia-bg-* class
   on the same element wins over the default navy background). */
.cs-box-sm.ia-bg-teal,       .cs-box-sm-p10.ia-bg-teal,
.cs-box-sm-12-6.ia-bg-teal,  .cs-box-sm-14-10.ia-bg-teal,
.cs-box-sm-10-12.ia-bg-teal   { background: #0096c7; }
.cs-box-sm.ia-bg-orange,     .cs-box-sm-p10.ia-bg-orange,
.cs-box-sm-12-6.ia-bg-orange,.cs-box-sm-14-10.ia-bg-orange,
.cs-box-sm-10-12.ia-bg-orange { background: #f77f00; }
.cs-box-sm.ia-bg-green,      .cs-box-sm-p10.ia-bg-green,
.cs-box-sm-12-6.ia-bg-green, .cs-box-sm-14-10.ia-bg-green,
.cs-box-sm-10-12.ia-bg-green  { background: #4aaa57; }
.cs-box-sm.ia-bg-blue,       .cs-box-sm-p10.ia-bg-blue,
.cs-box-sm-12-6.ia-bg-blue,  .cs-box-sm-14-10.ia-bg-blue,
.cs-box-sm-10-12.ia-bg-blue   { background: #1565c7; }
/* Tiny color-dot (used as a legend indicator). */
.cs-dot-32x24   { background: #1a2857; width: 32px; height: 24px; }

/* ─── Case-study deep-dive color cycle: first card WHITE gradient,
   rest cycle brand colors (teal → orange → green → blue). COLOUR ONLY —
   it does NOT impose a grid or padding. Place it on the wrapper
   alongside the sibling layout class (ia-g4-tight2, cs-col-12,
   cs-grid-2-16, etc.) so the author's intended layout is kept. */
/* 1st = WHITE gradient + navy text */
.cs-dd-4-tiles > :nth-child(5n+1) {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
}
.cs-dd-4-tiles > :nth-child(5n+1) * { color: #1a2857 !important; }
/* 2nd = teal */
.cs-dd-4-tiles > :nth-child(5n+2) { background: #0096c7 !important; color: #ffffff !important; }
.cs-dd-4-tiles > :nth-child(5n+2) * { color: #ffffff !important; }
/* 3rd = orange */
.cs-dd-4-tiles > :nth-child(5n+3) { background: #f77f00 !important; color: #ffffff !important; }
.cs-dd-4-tiles > :nth-child(5n+3) * { color: #ffffff !important; }
/* 4th = green */
.cs-dd-4-tiles > :nth-child(5n+4) { background: #4aaa57 !important; color: #ffffff !important; }
.cs-dd-4-tiles > :nth-child(5n+4) * { color: #ffffff !important; }
/* 5th = blue (if ever a 5-tile deep dive) */
.cs-dd-4-tiles > :nth-child(5n+5) { background: #1565c7 !important; color: #ffffff !important; }
.cs-dd-4-tiles > :nth-child(5n+5) * { color: #ffffff !important; }

/* SVG icons inside a cs-dd-4-tiles card: stroke follows the card's text
   colour (navy on the white 1st card, white on cards 2-5). Overrides any
   hard-coded `stroke="#brand"` attribute on the <svg> itself. */
.cs-dd-4-tiles > :nth-child(5n+1) svg { stroke: #1a2857 !important; }
.cs-dd-4-tiles > :nth-child(5n+2) svg,
.cs-dd-4-tiles > :nth-child(5n+3) svg,
.cs-dd-4-tiles > :nth-child(5n+4) svg,
.cs-dd-4-tiles > :nth-child(5n+5) svg { stroke: #ffffff !important; }

/* ─── Chip variants (small label pills — SOLID brand, white text). */
.cs-chip-teal   { background: #0096c7; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #ffffff; }
.cs-chip-orange { background: #f77f00; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #ffffff; }
.cs-chip-green-md { background: #4aaa57; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #ffffff; }
/* On white-gradient tiles (cs-tile--white-grad), invert .cs-mini-badge to
   navy pill with white text. */
.cs-tile.cs-tile--white-grad .cs-mini-badge {
  background: #1a2857 !important;
  color: #ffffff !important;
}

/* Navy row-with-divider (translucent-white → navy). */
.cs-row-divided-navy {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #1a2857;
  color: #ffffff;
}

/* Flex-equal translucent-white tile → navy. */
.cs-cell-pad-10-14 {
  padding: 10px 14px;
  background: #1a2857;
  font-size: 16px;
  color: #ffffff;
}
.cs-cell-flex-10 {
  flex: 1;
  padding: 10px;
  background: #1a2857;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

/* ─── Callout note (margin-top:16 + colored left border + padding).
   Solid brand background + white text (no transparency). */
.cs-callout {
  margin-top: 16px;
  padding: 14px 18px;
  color: #ffffff;
  border-radius: 10px;
}
/* dd-kicker inside any .cs-callout: white pill + navy text (highlighted). */
.cs-callout .dd-kicker {
  display: inline-block;
  background: #ffffff !important;
  color: #1a2857 !important;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.cs-callout--teal   { background: #0096c7; }
.cs-callout--green  { background: #4aaa57; }
.cs-callout--orange { background: #f77f00; }
.cs-callout--blue   { background: #1565c7; }
.cs-callout--white-grad {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
  border-radius: 10px;
}
.cs-callout * { color: #ffffff !important; }
.cs-callout.cs-callout--white-grad * { color: #1a2857 !important; }
.cs-callout.cs-callout--white-grad .dd-kicker {
  display: inline-block;
  background: #1a2857 !important;
  color: #ffffff !important;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* Navy "max-width" sub-card. */
.cs-tcard--sm-mx {
  background: #1a2857;
  padding: 20px;
  max-width: 420px;
  color: #ffffff;
}
.cs-tcard--sm-16-20 {
  background: #1a2857;
  padding: 16px 20px;
  color: #ffffff;
}

/* Sub-card tiles inside case-study diagrams — SOLID brand bg + white
   text. Replaces translucent `rgba(brand,.08)` + border pairs that
   previously muted the brand colors. One class per color variant. */
.cs-tile {
  padding: 16px;
  color: #ffffff;
  border-radius: 10px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.cs-tile .dd-kicker {
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 8px;
  color: inherit !important;
}
.cs-tile .dd-text {
  font-size: 14px; line-height: 1.6;
  color: inherit !important;
}
.cs-tile--teal   { background: #0096c7; }
.cs-tile--green  { background: #4aaa57; }
.cs-tile--orange { background: #f77f00; }
.cs-tile--blue   { background: #1565c7; }
/* White gradient tile — navy text, same radial top-left bloom.
   Nested inside .cs-dd-4-tiles the explicit selector beats the
   nth-child(5n+N) brand-colour cycle. */
.cs-dd-4-tiles > .cs-tile--white-grad,
.cs-tile--white-grad {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
  border-radius: 10px;
}
.cs-dd-4-tiles > .cs-tile--white-grad *,
.cs-tile--white-grad * { color: #1a2857 !important; }
/* --red is NOT a brand color (banned per feedback_brand_colors_only).
   Legacy markup using .cs-tile--red falls back to blue. */
.cs-tile--red    { background: #1565c7; }
.cs-tile *       { color: #ffffff !important; }
/* Escape hatch: when a .cs-tcard--xl (white gradient) sits INSIDE a
   .cs-tile OR a .cs-card--navy, break out of the force-white rule above.
   The white card needs navy text; brand-colour and badge classes get
   explicit !important so they beat the parent's force-white rule.
   EXCEPTION: when the .cs-tcard--xl is inside a .cs-dd-4-tiles cycle,
   positions 2-5 are brand-colored and must keep WHITE text. */
.cs-tile .cs-tcard--xl,
.cs-card--navy .cs-tcard--xl { color: #1a2857 !important; }
.cs-tile .cs-tcard--xl *:not([class*="ia-c-"]):not([class*="ia-bg-"]):not(.feat-sb-badge):not(.cs-mini-badge):not(.dd-badge),
.cs-card--navy .cs-tcard--xl *:not([class*="ia-c-"]):not([class*="ia-bg-"]):not(.feat-sb-badge):not(.cs-mini-badge):not(.dd-badge) { color: inherit !important; }
/* Re-apply white on brand-colored cycling positions (2-5) inside cs-dd-4-tiles */
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+2),
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+3),
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+4),
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+5) { color: #ffffff !important; }
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+2) *,
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+3) *,
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+4) *,
.cs-card--navy .cs-dd-4-tiles > .cs-tcard--xl:nth-child(5n+5) * { color: #ffffff !important; }
.cs-tile .cs-tcard--xl .ia-c-green,
.cs-card--navy .cs-tcard--xl .ia-c-green  { color: #4aaa57 !important; }
.cs-tile .cs-tcard--xl .ia-c-teal,
.cs-card--navy .cs-tcard--xl .ia-c-teal   { color: #0096c7 !important; }
.cs-tile .cs-tcard--xl .ia-c-orange,
.cs-card--navy .cs-tcard--xl .ia-c-orange { color: #f77f00 !important; }
.cs-tile .cs-tcard--xl .ia-c-blue,
.cs-card--navy .cs-tcard--xl .ia-c-blue   { color: #1565c7 !important; }
.cs-tile .cs-tcard--xl .ia-c-red,
.cs-card--navy .cs-tcard--xl .ia-c-red    { color: #ef4444 !important; }
.cs-tile .cs-tcard--xl .feat-sb-badge,
.cs-card--navy .cs-tcard--xl .feat-sb-badge { color: #ffffff !important; }

/* .cs-grid-2-16 children with long content (star ratings + labels) need
   min-width:0 so grid tracks respect the container, no horizontal overflow. */
.cs-grid-2-16 > * { min-width: 0; }

/* Compact variant of .feat-mock-btn: shrinks to content width so it can
   sit inline next to a counter in a space-between row (e.g. DD quiz
   pager "Question 2 of 5" | [Next]). */
.feat-mock-btn--auto { display: inline-block; width: auto; }

/* White feat-sb-row sitting inside a .cs-card--navy: both the title
   text and a white step circle default to WHITE (parent rule forces it),
   so a white row with no brand trigger goes invisible. Flip all its text
   children back to navy — mirrors the feat-sb-visual invert for the
   dd-body context. */
.cs-card--navy .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold,
.cs-card--navy .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .ia-body--white-bold-mb,
.cs-card--navy .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .feat-sb-muted,
.cs-card--navy .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .feat-sb-stat-sub,
.cs-card--navy .feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .feat-mock-progress-step--white {
  color: #1a2857 !important;
}

/* Chart SVGs inside deep-dive navy cards: fill the card edge-to-edge.
   Without this, the SVG height attribute (e.g. 220) caps max width at
   the viewBox ratio, so on a wider card the chart centers with blank
   navy on both sides. width:100% + height:auto makes the SVG scale to
   whatever container width it has, preserving aspect ratio. */
.cs-card--navy > svg,
.cs-card--navy .cs-tcard--xl > svg,
.cs-card--navy .cs-tcard--xl-teal > svg,
.cs-card--navy .cs-tcard--xl-green > svg,
.cs-card--navy .cs-tcard--xl-orange > svg,
.cs-card--navy .cs-tcard--xl-blue > svg {
  width: 100%;
  height: auto;
}

/* On narrow mobile, deep-dive navy cards get tight horizontal padding so
   they don't eat the viewport. Charts keep their natural viewBox ratio
   so there's no letterboxed grey space top/bottom. */
@media (max-width: 768px) {
  .cs-card--navy { padding: 20px 16px; }
}

/* Inside a .cs-card--navy on narrow mobile, a .feat-sb-row with a right-
   aligned badge forces long text to wrap in a narrow left column with
   dead space on the right. Stack vertically on mobile and pull the badge
   to the top via `order:-1` so the badge chip sits above the full-width
   text block, which can then wrap naturally edge-to-edge. */
@media (max-width: 560px) {
  .cs-card--navy .feat-sb-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .cs-card--navy .feat-sb-row .feat-sb-badge { order: -1; }
}

/* Deep-dive cards (.cs-card--navy) + feature mockups (.feat-sb-visual):
   minimum readable body-text size is 16px. Bump the subtitle/metadata
   helpers that default to 13-14px so body copy stays consistent across
   both contexts. Pills/badges/labels keep their smaller sizes. */
.cs-card--navy .feat-sb-stat-sub,
.cs-card--navy .cs-mini-days,
.cs-card--navy .ia-body--muted75,
.cs-card--navy .ia-body-13-75,
.feat-sb-visual .feat-sb-muted,
.feat-sb-visual .feat-sb-stat-sub,
.feat-sb-visual .ia-body-13-75,
.feat-sb-visual .cs-mini-days { font-size: 16px !important; }

/* Inside a .cs-tile--navy (DD property-listing-style card): flex children
   get min-width:0 so long subtitles can shrink/wrap instead of pushing
   the row wide. On mobile the header + 4-stat + button rows stack
   vertically so everything fits within the navy card. */
.cs-tile--navy .ia-row-between-16 > *,
.cs-tile--navy .ia-flex-gap-10 > *,
.cs-tile--navy .ia-flex-gap-14 > * { min-width: 0; }
@media (max-width: 768px) {
  .cs-tile--navy:not(:has(.cs-tcard--xl)) .ia-row-between-16 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cs-tile--navy:not(:has(.cs-tcard--xl)) .ia-flex-gap-10,
  .cs-tile--navy:not(:has(.cs-tcard--xl)) .ia-flex-gap-14 { flex-direction: column; }
}

/* A .feat-sb-row (white-gradient + navy text) nested INSIDE a brand-colored
   .cs-tcard--* variant must keep its own navy text — the parent's
   .cs-tcard * { color:#fff } would otherwise force the row's text white. */
.cs-tcard--teal .feat-sb-row,
.cs-tcard--orange .feat-sb-row,
.cs-tcard--green .feat-sb-row,
.cs-tcard--blue .feat-sb-row,
.cs-tcard--navy .feat-sb-row,
.cs-tcard--red .feat-sb-row,
.cs-tcard--sm .feat-sb-row,
.cs-tcard--xl-teal .feat-sb-row,
.cs-tcard--xl-orange .feat-sb-row,
.cs-tcard--xl-green .feat-sb-row,
.cs-tcard--xl-blue .feat-sb-row { color: #1a2857 !important; }
.cs-tcard--teal .feat-sb-row *,
.cs-tcard--orange .feat-sb-row *,
.cs-tcard--green .feat-sb-row *,
.cs-tcard--blue .feat-sb-row *,
.cs-tcard--navy .feat-sb-row *,
.cs-tcard--red .feat-sb-row *,
.cs-tcard--sm .feat-sb-row *,
.cs-tcard--xl-teal .feat-sb-row *,
.cs-tcard--xl-orange .feat-sb-row *,
.cs-tcard--xl-green .feat-sb-row *,
.cs-tcard--xl-blue .feat-sb-row * { color: inherit !important; }

/* .cs-mini-badge sitting inside a brand-colored .cs-tcard variant keeps
   its white-pill + navy-text identity — otherwise the parent's
   .cs-tcard * { color:#fff } forces the text white → white on white pill. */
.cs-tcard--teal .cs-mini-badge,
.cs-tcard--orange .cs-mini-badge,
.cs-tcard--green .cs-mini-badge,
.cs-tcard--blue .cs-mini-badge,
.cs-tcard--navy .cs-mini-badge,
.cs-tcard--red .cs-mini-badge,
.cs-tcard--xl-teal .cs-mini-badge,
.cs-tcard--xl-orange .cs-mini-badge,
.cs-tcard--xl-green .cs-mini-badge,
.cs-tcard--xl-blue .cs-mini-badge {
  background: #ffffff !important;
  color: #1a2857 !important;
}
/* White-grad override — placed AFTER .cs-tile * so it wins source order
   at equal specificity. Pulls title + body back to navy. */
.cs-tile.cs-tile--white-grad,
.cs-tile.cs-tile--white-grad * { color: #1a2857 !important; }

/* Mini-badge always keeps its white pill + navy text, even when the
   parent cs-tile forces white on every child. Must come AFTER the
   .cs-tile * rule above to win equal-specificity source order. */
.cs-tile .cs-mini-badge,
.cs-tcard--sm .cs-mini-badge {
  background: #ffffff !important;
  color: #1a2857 !important;
}
/* Inside a cs-dd-4-tiles card (cards 2-5), restore the bigger size +
   bloom gradient we lost from the generic .cs-mini-badge default. */
.cs-dd-4-tiles > :nth-child(5n+2) .cs-mini-badge,
.cs-dd-4-tiles > :nth-child(5n+3) .cs-mini-badge,
.cs-dd-4-tiles > :nth-child(5n+4) .cs-mini-badge,
.cs-dd-4-tiles > :nth-child(5n+5) .cs-mini-badge {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  color: #1a2857 !important;
}
/* INVERT: on any WHITE-GRADIENT parent container, the .cs-mini-badge
   flips to a NAVY pill with WHITE text so it reads against the white
   background. Covers every white-gradient surface in the design system. */
.cs-tile.cs-tile--white-grad .cs-mini-badge,
.cs-dd-4-tiles > :nth-child(5n+1) .cs-mini-badge,
.cs-tcard--xl .cs-mini-badge,
.cs-callout--white-grad .cs-mini-badge,
.feat-sb-stat .cs-mini-badge,
.feat-sb-row:not(:has(.ia-bg-teal, .ia-bg-orange, .ia-bg-green, .ia-bg-blue, .ia-bg-navy)) .cs-mini-badge {
  background: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
}
/* Larger-padding + plain-navy variants (24/18/20 instead of 16). */
.cs-tile--p24    { padding: 24px; }
.cs-tile--p18-20 { padding: 18px 20px; }
.cs-tile--p20    { padding: 20px; }
.cs-tile--navy   { background: #1a2857; }

/* Case-study blue card variant (missing from first pass). */
.cs-card-blue-top {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  padding: 16px;
  text-align: center;
  border-radius: 10px;
  color: #1a2857;
  position: relative;
  overflow: hidden;
}
.cs-card-blue-top * { color: #1a2857 !important; }
.cs-card-blue-top svg { stroke: #1a2857 !important; }

/* Blue 11px kicker with 20px bottom gap. */
.cs-kicker-blue-20 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1565c7;
  margin-bottom: 20px;
}

/* Big H2 variants with 18 / 24 margin-bottom. */
.ia-h--mb18 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 18px; line-height: 1.3; }
.ia-h--mb24 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 24px; line-height: 1.3; }

/* Case-study stat variant (navy, mid-size). */
.cs-stat-22-navy { font-size: 22px; font-weight: 800; color: #1a2857; line-height: 1; }

/* Small 13px green bold text. */
.ia-sub-h-13-green { font-size: 13px; color: #4aaa57; font-weight: 700; }
.ia-sub-h-13-green-med { font-size: 13px; color: #4aaa57; font-weight: 600; }

/* Kicker variants with 14 / 16 bottom gap. */
.ia-kicker--mb14 {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 14px;
}
.ia-kicker--mb16 {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.ia-kicker--xs10 {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.ia-kicker--xs10-sm {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 4px;
}
.ia-kicker--md-orange {
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #f77f00; margin-bottom: 16px;
}

/* Larger step circle (60x60 brand-color with 26px numeral). */
.ia-step-circle-xl {
  width: 60px; height: 60px; border-radius: 50%;
  color: #fff; font-size: 26px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.ia-step-circle-xl--teal   { background: #0096c7; }
.ia-step-circle-xl--green  { background: #4aaa57; }
.ia-step-circle-xl--orange { background: #f77f00; }
.ia-step-circle-xl--blue   { background: #1565c7; }

/* White 16-bold text + small variants (compound). */
.ia-body--white-bold-mb4 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ia-body--white-bold-mb8 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ia-body--white-bold-mb2 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.ia-body--white-600 { font-size: 16px; font-weight: 600; color: #fff; }
.ia-body--white-600-l6 { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.6; }

/* Diagram container variant with 36px padding/margin (vs default 40/40). */
.ia-diagram--p36 {
  background: linear-gradient(135deg, #1a2857 0%, #0d1b3e 100%);
  padding: 36px 32px;
  margin: 36px 0;
}

/* Softmuted body with 7/65/8 opacity flavors (used in case-study prose). */
.ia-body--muted7  { color: #ffffff; }
.ia-body--muted55 { color: #ffffff; }
.ia-body--muted75-plain { color: #ffffff; }

/* H3-ish 17px bold mb:14. */
.ia-h3--17 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 14px; }
/* H3 18px bold mb:14. */
.ia-h3--18 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 14px; }

/* Dim 18px opacity-55 index numeral (sits inside step indicators). */
.ia-step-idx { opacity: .55; color: #ffffff; font-weight: 800; font-size: 18px; }

/* Thin vertical connector line (2px wide, flex-1 tall, translucent). */
.ia-vconnect { width: 2px; flex: 1; background: rgba(255,255,255,.12); }

/* Padding-6-0 (common tight row). */
.ia-pad-6-0 { padding: 6px 0; }
/* Padding-top:0 override. */
.ia-pt-0 { padding-top: 0; }

/* ─── Universal arrow glyph — THE class, used site-wide. Every arrow
   (unicode glyph or old SVG) now carries `.ia-arrow`. Change size /
   color / weight here once, every arrow updates. */
.ia-arrow {
  display: block;
  text-align: center;
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  margin: 12px 0;
}
/* Right-pointing arrow (horizontal flow). */
.ia-arrow--right::before { content: '\2192\FE0E'; }
/* Down-pointing arrow (vertical flow). */
.ia-arrow--down::before  { content: '\2193\FE0E'; }

/* Step col with flex:1 and z-index:1 (overlays progress line). */
.ia-step-col--z { flex: 1; text-align: center; position: relative; z-index: 1; }

/* Small orange stat 24px. */
.ia-stat-24--orange { color: #f77f00; font-size: 24px; font-weight: 700; }

/* Small text-right. */
.ia-text-right { text-align: right; }

/* Media-safe inline image. */
.ia-img-block { display: block; width: 100%; height: auto; border-radius: 12px; }

/* Transition delay utilities (used by fade-in staggers). */
.ia-td-100 { transition-delay: .1s; }

/* min-width utilities (for horizontal-scroll children of
   .blog-diagram-scroll — stops them collapsing on narrow desktops). */
.ia-mw-620 { min-width: 620px; }
.ia-mw-700 { min-width: 700px; }
.ia-mw-720 { min-width: 720px; }
.ia-mw-760 { min-width: 760px; }
.ia-mw-780 { min-width: 780px; }
.ia-mw-820 { min-width: 820px; }

/* ─── Case-study section intro paragraph (dark-blue sub text under H2). */
.cs-intro-p {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.8;
  margin-top: 14px;
  margin-bottom: 40px;
}
.cs-intro-p-15 {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.8;
  margin-top: 14px;
  margin-bottom: 40px;
}

/* ─── Common weight utility. */
.ia-fw-700 { font-weight: 700; }
.ia-fw-800 { font-weight: 800; }

/* ─── 16px bold white (common body heading). */
.ia-body-16-700-w { font-size: 16px; color: #fff; font-weight: 700; }
.ia-body-16-600-w { font-size: 16px; font-weight: 600; color: #fff; }
.ia-body-14-700-w { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }

/* ─── Softmuted body variants (specific line-height / size pairings). */
.ia-body-13-75 { font-size: 13px; color: #ffffff; }
.ia-body-13-70 { font-size: 13px; color: #ffffff; }
.ia-body-13-55 { font-size: 13px; color: #ffffff; }
.ia-body-13-55-l17 { font-size: 13px; color: #ffffff; line-height: 1.7; }
.ia-body-14-70-l15 { font-size: 14px; color: #ffffff; line-height: 1.5; }
.ia-body-14-70-l16 { font-size: 14px; color: #ffffff; line-height: 1.6; }
.ia-body-14-60-l155 { font-size: 14px; color: #ffffff; line-height: 1.55; }
.ia-body-16-80-l18 { font-size: 16px; color: #ffffff; line-height: 1.8; }
.ia-body-16-60-l18 { font-size: 16px; color: #ffffff; line-height: 1.8; }
.ia-body-13-75-mt6 { font-size: 13px; color: #ffffff; margin-top: 6px; }
.ia-body-13-75-ctr-mt4 { font-size: 13px; color: #ffffff; text-align: center; margin-top: 4px; }

/* ─── Small green sub-h (16px bold green with mb). */
.ia-sub-h-16-green-600 { font-size: 16px; color: #4aaa57; font-weight: 600; }

/* ─── Small inline chip (3x8 padded brand-tinted label). */
.ia-chip-teal-xs {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(0,150,199,.2);
  color: #0096c7;
  letter-spacing: .04em;
}

/* ─── Small translucent-white tile with orange top-border (4-col stat). */
.ia-tile-orange-top {
  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: 10px;
  padding: 14px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1a2857 !important;
}

/* ─── Softmuted centered heading inside wide-scroll diagram. */
.ia-ctr-18-muted75 {
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 8px;
  min-width: 720px;
}

/* ─── Softmuted body wide-scroll with 24 mb. */
.ia-body-16-70-l16-mb24-mw720 {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 24px;
  min-width: 720px;
}

/* ─── Tiny 9px label chip (translucent). */
.ia-chip-xs-tr {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  color: #ffffff;
}

/* ─── Translucent-white sub-tile (6px padded). */
.ia-tile-sm-tr {
  padding: 6px;
  text-align: center;
}

/* ─── Thin bar primitive (chart-bar). */
.ia-bar-18x14-tr { width: 18px; height: 14px; background: rgba(255,255,255,.1); }

/* ─── Side-strip callout (left border + padding). */
.ia-side-strip-14 {
  padding: 14px 18px;
  font-size: 14px;
  color: #ffffff;
  border-left: 1px solid rgba(255,255,255,.08);
}

/* ─── Grid wrappers with margin-top (compound). */
.ia-g3-mt24 {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.ia-g2-mb32 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.ia-g4-mt20-mw700 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-width: 700px;
}

/* ─── Article UL/LI base class — renders as numbered rows styled
   like the "What We Build" (.blog-steps) section. Each <li> becomes
   a row with an auto-numbered 01/02/03 gutter on the left; the
   leading <strong> inside the <li> acts as the row title. */
ul.ia-ul {
  list-style: none !important;
  counter-reset: ia-ul !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 36px 0 !important;
  padding: 0 !important;
}
ul.ia-ul > li {
  counter-increment: ia-ul;
  position: relative !important;
  display: block !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  padding: 20px 24px 20px 80px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}
ul.ia-ul > li::before {
  content: counter(ia-ul, decimal-leading-zero) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg3) !important;
  color: var(--navy) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  border-radius: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
ul.ia-ul > li strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  ul.ia-ul > li { padding: 20px 20px 20px 60px !important; }
  ul.ia-ul > li::before { width: 44px !important; font-size: 16px !important; }
}
/* Dark variant — soft-blue bullets + text for use inside navy diagram cards. */
.ia-ul--dark {
  margin: 0;
  padding: 0 0 0 18px;
  color: #c8d8f0;
  font-size: 16px;
  line-height: 1.9;
}
/* Navy variant — on light backgrounds (case-study / industry sections). */
.ia-ul--navy {
  margin: 0 0 24px;
  padding-left: 24px;
  color: #1a2857;
  line-height: 1.8;
}

@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .cs-impact-section .fade-in:has(.cs-impact-card) {
    grid-template-columns: 1fr !important;
  }
  body:has(.svc-hero-wrap) .cs-impact-card--wide,
  body:has(.svc-hero-wrap) .cs-impact-card--lead {
    grid-column: 1 !important;
  }
  /* Trim the giant 72px desktop side padding on mobile — the coloured
     cards need almost the full viewport width to read cleanly. Applies
     to Impact, How It Works, What's Possible, Problem Space and the
     other case-study body sections in one pass. */
  body:has(.svc-hero-wrap) .problem-section,
  body:has(.svc-hero-wrap) .features-section,
  body:has(.svc-hero-wrap) .ecosystem-section,
  body:has(.svc-hero-wrap) .deep-dives-section,
  body:has(.svc-hero-wrap) .platform-section,
  body:has(.svc-hero-wrap) .cs-impact-section,
  body:has(.svc-hero-wrap) .how-section,
  body:has(.svc-hero-wrap) .roadmap-section,
  body:has(.svc-hero-wrap) .cs-cta-section,
  body:has(.svc-hero-wrap) .cs-insights-section,
  body:has(.svc-hero-wrap) .cs-faq-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body:has(.svc-hero-wrap) .cs-impact-card,
  body:has(.svc-hero-wrap) .how-step,
  body:has(.svc-hero-wrap) .rm-step {
    padding: 24px 20px !important;
  }
}

/* ── "How It Works" section on case-study bodies — render the 4 steps
   as the case-studies bento from the homepage: wide top-left, tall
   right spanning both rows, two narrow tiles below. Solid brand colour
   + top-left dark bloom (no diagonal gradient), no hover shadow / lift,
   no ::after ring, no fixed 280px min-height — grid rows govern size.
   Step 1 flips to a white lead tile with navy text. Section itself
   gets the same navy→white gradient the Impact section uses so the two
   feature blocks read as a pair. */
body:has(.svc-hero-wrap) .how-section {
  padding: 80px max(72px, calc(50% - 720px)) 100px !important;
}
body:has(.svc-hero-wrap) .how-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .how-section .sec-title,
body:has(.svc-hero-wrap) .how-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .how-section > .fade-in > p { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .how-grid {
  grid-template-columns: 1.15fr 0.95fr 1.05fr !important;
  grid-template-rows: minmax(300px, auto) minmax(300px, auto) !important;
  gap: 18px !important;
}
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(2) { grid-column: 3;     grid-row: 1 / 3; }
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(3) { grid-column: 1;     grid-row: 2; }
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(4) { grid-column: 2;     grid-row: 2; }
body:has(.svc-hero-wrap) .how-step {
  background: var(--step-color, var(--teal)) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  padding: 30px 30px 26px !important;
  transition: none !important;
}
body:has(.svc-hero-wrap) .how-step::after { display: none !important; }
body:has(.svc-hero-wrap) .how-step:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Base .how-step rules paint .how-num at 30% white, .how-desc and
   .how-icon at 70% white — semi-transparent, which reads muted on the
   dark bento tiles. Force every text piece to pure #ffffff on the
   coloured cards. The white lead card overrides below. */
body:has(.svc-hero-wrap) .how-step,
body:has(.svc-hero-wrap) .how-step *,
body:has(.svc-hero-wrap) .how-step .how-num,
body:has(.svc-hero-wrap) .how-step .how-desc,
body:has(.svc-hero-wrap) .how-step .how-icon,
body:has(.svc-hero-wrap) .how-step .how-icon * {
  color: #ffffff !important;
}
/* Match the home bento palette: teal / orange / green / navy. */
body:has(.svc-hero-wrap) .how-step:nth-child(1) { --step-color: var(--teal); }
body:has(.svc-hero-wrap) .how-step:nth-child(2) { --step-color: var(--orange); }
body:has(.svc-hero-wrap) .how-step:nth-child(3) { --step-color: var(--green); }
body:has(.svc-hero-wrap) .how-step:nth-child(4) { --step-color: var(--navy); }

/* Step 1 = white lead tile (same treatment as .hn-bento-0 on home).
   Base .how-step rules force every descendant white via `!important`, so
   we override each targeted piece with a more-specific selector. */
body:has(.svc-hero-wrap) .how-step:nth-child(1) {
  background: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .how-step:nth-child(1),
body:has(.svc-hero-wrap) .how-step:nth-child(1) *,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-title,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-desc,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-icon,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-icon * {
  color: var(--navy) !important;
}
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-num { color: rgba(26,40,87,0.35) !important; }

@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .how-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  body:has(.svc-hero-wrap) .how-grid > .how-step {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }
  /* Trim the desktop 72px side padding on mobile. The `.how-section`
     base rule with `padding: 80px 72px 100px !important` sits later
     in this file than the earlier shared @media block, so this
     placement AFTER the base rule wins the cascade. */
  body:has(.svc-hero-wrap) .how-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Hide any inline `.cs-cta-section` that ships inside a case-study
   body (many older DB bodies still carry one). The template renders
   its own `.cta-band cta-band-light` below the FAQ block, so this
   inline block would be a duplicate — and its two-column button + note
   layout doesn't match the site's current pill-input CTA. */
body:has(.svc-hero-wrap) .cs-cta-section { display: none !important; }

/* Every above-footer CTA (site-wide) uses the same "card-in-section"
   treatment: a light grey outer strip carries a navy rounded card, and
   the copy + form sit on the navy card in white. Covers .cta-band on
   the homepage / labs / campaigns AND .cs-cta-section on services /
   industries. */
.cta-band,
.cs-cta-section {
  background: #eff0f2 !important;
  color: #ffffff !important;
  padding: 40px max(40px, calc((100% - 1200px) / 2)) !important;
  gap: 0 !important;
  position: relative !important;
  margin-top: 40px !important;
}
.cta-band::before,
.cs-cta-section::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 40px !important;
  bottom: 40px !important;
  left: max(40px, calc((100% - 1200px) / 2)) !important;
  right: max(40px, calc((100% - 1200px) / 2)) !important;
  background: linear-gradient(180deg, #121c3a 0%, #16214a 45%, #1a2857 100%) !important;
  border-radius: 24px !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.cta-band::after,
.cs-cta-section::after { display: none !important; }
.cta-band > *,
.cs-cta-section > * {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding: 48px !important;
}
/* Tighten the gap between the heading block and the form block ONLY
   when the layout has collapsed to a single stacked column (below
   1100px, matching the .cta-band 1fr fallback in entexis.css). At
   desktop the layout is a 2-column grid — heading left, form right —
   and touching the top/bottom padding just makes them sit at
   different Y positions instead of tightening the vertical gap. */
@media (max-width: 1100px) {
  .cta-band > *:nth-child(1),
  .cs-cta-section > *:nth-child(1) { padding-bottom: 12px !important; }
  .cta-band > *:nth-child(2),
  .cs-cta-section > *:nth-child(2) { padding-top: 8px !important; }
}

.cta-band h2,
.cta-band h2 span,
.cta-band .cta-sub,
.cta-band .cta-note,
.cs-cta-section h2,
.cs-cta-section h2 span,
.cs-cta-section p,
.cs-cta-section .cta-note {
  color: #ffffff !important;
}
.cta-band .cta-sub,
.cs-cta-section p { color: rgba(255,255,255,0.75) !important; }
.cta-band .cta-note,
.cs-cta-section .cta-note { color: rgba(255,255,255,0.5) !important; }

.cta-band .cta-row,
.cs-cta-section .cta-row {
  position: relative;
  display: block;
}
.cta-band .cta-inp,
.cs-cta-section .cta-inp {
  display: block;
  width: 100%;
  background: #ffffff !important;
  color: var(--navy) !important;
  border: 1px solid #ffffff !important;
  padding: 18px 200px 18px 28px;
  font-size: 16px !important;
  border-radius: 999px !important;
}
.cta-band .cta-inp::placeholder,
.cs-cta-section .cta-inp::placeholder { color: rgba(26,40,87,0.45) !important; }
.cta-band .cta-btn,
.cs-cta-section .cta-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.cta-band .cta-btn:hover,
.cs-cta-section .cta-btn:hover { transform: translateY(-50%) !important; }

@media (max-width: 900px) {
  .cta-band,
  .cs-cta-section {
    padding: 28px 24px !important;
    margin-top: 24px !important;
  }
  .cta-band::before,
  .cs-cta-section::before {
    top: 28px !important; bottom: 28px !important;
    left: 24px !important; right: 24px !important;
    border-radius: 20px !important;
  }
  .cta-band > *,
  .cs-cta-section > * { padding: 40px 28px !important; }
  .cta-band > *:nth-child(1),
  .cs-cta-section > *:nth-child(1) { padding-bottom: 8px !important; }
  .cta-band > *:nth-child(2),
  .cs-cta-section > *:nth-child(2) { padding-top: 8px !important; }
}
@media (max-width: 560px) {
  .cta-band,
  .cs-cta-section { padding: 20px !important; }
  .cta-band::before,
  .cs-cta-section::before {
    top: 20px !important; bottom: 20px !important;
    left: 20px !important; right: 20px !important;
    border-radius: 18px !important;
  }
  .cta-band > *,
  .cs-cta-section > * { padding: 32px 22px !important; }
}

/* Site-wide: every FAQ icon uses a single navy stroke. Inline `stroke`
   attributes on the SVGs (teal / orange / green / blue / navy variants
   in DB copy and templates) get overridden. Covers per-item icons
   (.faq-icon) AND any inline SVG inside the FAQ heading / section
   wrappers (case-study, homepage, ent-faq accordion). */
.faq-icon,
.cs-faq-section svg,
.home-faq-section svg,
.ent-faq-section svg,
.ent-faq-heading svg,
.ent-faq svg,
h2 svg + .faq-text /* noop safety */ {
  stroke: var(--navy) !important;
  color: var(--navy) !important;
}
/* Only repaint shapes that were EXPLICITLY filled (fill="..." attribute
   present and not "none"). The homepage FAQ icons are stroke-only
   outlines; without this guard the unconditional `.faq-icon circle`
   selector was filling every circle solid navy, hiding the inner icon
   shapes underneath. */
.faq-icon [fill]:not([fill="none"]),
.cs-faq-section svg [fill]:not([fill="none"]),
.home-faq-section svg [fill]:not([fill="none"]),
.ent-faq-section svg [fill]:not([fill="none"]),
.ent-faq-heading svg [fill]:not([fill="none"]),
.ent-faq svg [fill]:not([fill="none"]) {
  fill: var(--navy) !important;
}

/* Blog-post FAQ heading — the H2 directly preceding an .ent-faq
   accordion. Center the label + repaint its inline SVG icon navy so it
   matches the accordion below and stops using the DB-inlined teal. */
.is-blog-post h2:has(+ .ent-faq),
.blog-prose h2:has(+ .ent-faq) {
  text-align: center;
}
.is-blog-post h2:has(+ .ent-faq) svg,
.blog-prose h2:has(+ .ent-faq) svg {
  stroke: var(--navy) !important;
  color: var(--navy) !important;
}
.is-blog-post h2:has(+ .ent-faq) svg [fill]:not([fill="none"]),
.blog-prose h2:has(+ .ent-faq) svg [fill]:not([fill="none"]) {
  fill: var(--navy) !important;
}

/* Process panel — compact coloured tiles with top-left dark bloom. */
.svc-hero-wrap .ins-gradient-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-hero-wrap .ins-gradient-eyebrow {
  color: rgba(255,255,255,0.65);
  margin: 6px 4px 10px;
}
.svc-hero-wrap .ins-step {
  padding: 14px 18px;
  border-radius: 12px;
  border-bottom: 0;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  transition: filter .25s ease, transform .2s ease;
}
.svc-hero-wrap .ins-step:hover { filter: brightness(1.06); }
.svc-hero-wrap .ins-step-num { font-size: 16px; opacity: 1; }
.svc-hero-wrap .ins-gradient-heading { color: #ffffff; font-size: 16px; margin-bottom: 4px; font-weight: 700; }
.svc-hero-wrap .ins-gradient-text { color: #ffffff; font-size: 16px; line-height: 1.55; }

/* Light-flip overrides for the first (white) tile. */
.svc-hero-wrap .ins-step-light .ins-gradient-heading { color: var(--navy); }
.svc-hero-wrap .ins-step-light .ins-gradient-text { color: var(--muted); }
.svc-hero-wrap .ins-gradient-bottom { margin-top: 10px; padding: 0 4px; }
.svc-hero-wrap .ins-gradient-bottom a { color: var(--navy); border-bottom-color: rgba(26,40,87,0.4); }
.svc-hero-wrap .ins-gradient-bottom a:hover { border-bottom-color: var(--navy); }

@media (max-width: 900px) {
  .svc-hero-wrap .ins-row1 { flex-direction: column; gap: 16px; }
  .svc-hero-wrap .ins-gradient { flex: none; width: 100%; }
}

/* ── Content-section: blog-stat-row for services / industries / products
   USES THE SAME navy-shelf + brand-color-tile treatment as insights
   (defined in entexis.css under .is-blog-post .blog-stat-row).
   Font-size is now 24px universally (set in entexis.css); no per-page
   override needed. */

/* Sidebar CTA — rounded, full-width button, single white text throughout. */
body:has(.svc-hero-wrap) .blog-sidebar-cta {
  border-radius: 18px !important;
  overflow: hidden;
}
body:has(.svc-hero-wrap) .blog-sidebar-cta,
body:has(.svc-hero-wrap) .blog-sidebar-cta * {
  color: #ffffff !important;
}
body:has(.svc-hero-wrap) .sidebar-cta-btn {
  display: block !important;
  text-align: center;
  padding: 14px 24px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
}

/* Content-body icons — every SVG inside .blog-article prose forced to navy. */
body:has(.svc-hero-wrap) .blog-article svg {
  color: var(--navy) !important;
  stroke: var(--navy) !important;
}
/* Exception: SVGs inside a step circle (brand-color background) stay
   WHITE so icon contrast is preserved. */
body:has(.svc-hero-wrap) .blog-article .ia-step-circle-sm svg,
body:has(.svc-hero-wrap) .blog-article .ia-step-circle-md svg,
body:has(.svc-hero-wrap) .blog-article .ia-step-circle-xl svg,
body:has(.svc-hero-wrap) .blog-article .ia-step-circle--lg svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Body-authored inline CTA strips: any div in article body painted with
   a navy background gets rounded corners, white heading and a pill button. */
body:has(.svc-hero-wrap) .blog-article div[style*="var(--navy)"],
body:has(.svc-hero-wrap) .blog-article div[style*="#1a2857"] {
  border-radius: 18px !important;
}
body:has(.svc-hero-wrap) .blog-article div[style*="var(--navy)"] div[style*="font-weight:800"],
body:has(.svc-hero-wrap) .blog-article div[style*="#1a2857"] div[style*="font-weight:800"] {
  color: #ffffff !important;
}
body:has(.svc-hero-wrap) .blog-article div[style*="var(--navy)"] a[style*="background"],
body:has(.svc-hero-wrap) .blog-article div[style*="#1a2857"] a[style*="background"] {
  background-color: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;
}

/* Insights news mosaic — corners handle counts from 1 to 6 in a 3-col grid.
   Every card starts flat, then the four outer positions get their own
   corner. Extra rules cover edge cases where the grid has < 6 cards so
   the outer corners always live on a card that actually exists. */
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:nth-child(n) { border-radius: 0; }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:first-child { border-top-left-radius: var(--hn-r-card); }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:nth-child(3) { border-top-right-radius: var(--hn-r-card); }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:nth-child(4) { border-bottom-left-radius: var(--hn-r-card); }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:last-child { border-bottom-right-radius: var(--hn-r-card); }
/* Fewer than 4 cards → grid is one row, so the first card also owns
   bottom-left and (for 1-2 cards) the last card owns top-right. */
body:has(.svc-hero-wrap) .home-new .hn-news-grid:not(:has(> .hn-news-card:nth-child(4))) > .hn-news-card:first-child {
  border-bottom-left-radius: var(--hn-r-card);
}
body:has(.svc-hero-wrap) .home-new .hn-news-grid:not(:has(> .hn-news-card:nth-child(3))) > .hn-news-card:last-child {
  border-top-right-radius: var(--hn-r-card);
}

/* Single column below 720. The 3-col corner map above is geometric, so on a
   stack it rounds cards 3 and 4 in the MIDDLE of the strip. Collapse it to
   the stack's own four corners: first card takes both top, last card takes
   both bottom, everything between stays flat. !important because the
   body:has() + :not(:has()) selectors above outrank anything this block can
   spell, and home-new.css's own 720 block loses to them for the same reason. */
@media (max-width: 720px) {
  body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card {
    border-radius: 0 !important;
  }
  body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:first-child {
    border-top-left-radius: var(--hn-r-card) !important;
    border-top-right-radius: var(--hn-r-card) !important;
  }
  body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:last-child {
    border-bottom-left-radius: var(--hn-r-card) !important;
    border-bottom-right-radius: var(--hn-r-card) !important;
  }
}

/* Navy-to-white gradient behind the Insights section. */
body:has(.svc-hero-wrap) .home-new .hn-news {
}

/* Inside pages with fewer than 4 case studies — collapse the empty rows
   that the homepage's fixed 2×300px template would otherwise reserve.
   Scoped so pages that DO have all 4 case studies keep the bento's
   proper layout untouched. */
body:has(.svc-hero-wrap) .home-new .hn-bento:not(:has(> .hn-bento-card:nth-child(4))) {
  grid-template-rows: auto !important;
}
body:has(.svc-hero-wrap) .home-new .hn-bento:not(:has(> .hn-bento-card:nth-child(4))) .hn-bento-card {
  min-height: 300px;
}

/* Rounded corners on infographic panels, callouts, takeaway blocks, and
   inline CTA strips inside the article prose. */
/* overflow was `hidden` here to clip border-radius; it also blocked
   horizontal scroll on nested diagrams. Switched to `overflow-x:auto;
   overflow-y:hidden` so wide .blog-diagram-scroll children can scroll. */
body:has(.svc-hero-wrap) .is-blog-post .blog-diagram-scroll > div,
body:has(.svc-hero-wrap) .is-blog-post .inline-cta-strip,
body:has(.svc-hero-wrap) .is-blog-post .blog-callout,
body:has(.svc-hero-wrap) .is-blog-post .blog-takeaway {
  border-radius: 18px !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
body:has(.svc-hero-wrap) .is-blog-post .blog-callout { border-left: 0 !important; }
body:has(.svc-hero-wrap) .is-blog-post .blog-takeaway::before { display: none !important; }

/* ── Entexis Labs card, base visuals ────────────────────────────────
   The service pages carry these as inline styles on each anchor; insight
   posts use the classed version, so the values live here. Identical
   numbers, so the two render the same. Child ORDER matters: the ring is
   the first div and the icon the second, which is what the
   `> div:nth-of-type(2)` rule below keys off. */
.svc-labs-grid { display: grid; gap: 16px; }

/* Entexis Labs section inner layout utilities — replace the inline styles
   previously written in blog-post.ejs. */
.ent-labs-wrap    { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.ent-labs-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ent-labs-eyebrow-txt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0096c7; }
.ent-labs-h       { font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: -.015em; }
.ent-labs-sub     { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.7); max-width: 720px; margin: 0 0 28px; }
.svc-labs-band--padx { padding: 64px 32px 56px; color: #fff; position: relative; overflow: hidden; }
.svc-lab {
  display: block;
  padding: 28px 24px 22px;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.svc-lab:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.svc-lab-icon { position: relative; margin-bottom: 14px; color: #ffffff; }
.svc-lab-name { position: relative; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; }
.svc-lab-desc { position: relative; margin-bottom: 14px; font-size: 16px; line-height: 1.55; color: #ffffff; }
.svc-lab-cta  { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffffff; }
.svc-lab-light .svc-lab-icon,
.svc-lab-light .svc-lab-icon svg,
.svc-lab-light .svc-lab-name,
.svc-lab-light .svc-lab-desc,
.svc-lab-light .svc-lab-cta { color: var(--navy) !important; }

/* NOTE ON SCOPE: these rules are keyed on .svc-labs-band alone, not on
   body:has(.svc-hero-wrap). Insight posts carry .blog-hero-wrap, so the
   old body scope silently excluded them and their cards fell back to a
   single-column grid. .svc-labs-band only exists on service pages and
   insight posts, so it is specific enough by itself.

   Entexis Labs grid — homepage Case Studies bento for the first four
   cards, then the remaining five as a 2-up row followed by a 3-up row.
   Six columns rather than three: 6 divides evenly by both 2 (spans of 3)
   and 3 (spans of 2), so a half-width row and a third-width row can sit
   in the same grid. Cards past index 8 auto-flow two columns wide. */
.svc-labs-band .svc-labs-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  grid-auto-rows: 1fr;
  grid-auto-flow: row dense;
}
.svc-labs-band .svc-lab { grid-column: span 2; }
.svc-labs-band .svc-lab {
  padding: 32px 30px 28px !important;
  min-height: 280px;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
/* Target the icon by CLASS, not by nth-of-type. blog-post.ejs still emits
   .svc-lab-ring as the 1st div (making the icon the 2nd), but index.ejs and
   services/show.ejs no longer render the ring (per the no-thin-line-decorations
   rule) — so nth-of-type(2) started falling on .svc-lab-name and crammed the
   title into the 36x36 corner, wrapping it vertically. Class-based selectors
   work everywhere regardless of the ring's presence. */
.svc-labs-band .svc-lab .svc-lab-icon {
  position: absolute !important;
  top: 22px;
  right: 22px;
  margin: 0 !important;
  width: 36px;
  height: 36px;
}
.svc-labs-band .svc-lab .svc-lab-icon svg {
  width: 100% !important;
  height: 100% !important;
}
.svc-labs-band .svc-lab-0 .svc-lab-icon {
  width: 46px;
  height: 46px;
  top: 26px;
  right: 26px;
}
/* Rows 1-2: the bento. 4 of 6 columns = the old "2 of 3". */
.svc-labs-band .svc-lab-0 { grid-column: 1 / 5; grid-row: 1; padding: 44px 36px 36px !important; }
.svc-labs-band .svc-lab-1 { grid-column: 5 / 7; grid-row: 1 / 3; }
.svc-labs-band .svc-lab-2 { grid-column: 1 / 3; grid-row: 2; }
.svc-labs-band .svc-lab-3 { grid-column: 3 / 5; grid-row: 2; }
/* Row 3: two cards, half width each. */
.svc-labs-band .svc-lab-4 { grid-column: 1 / 4; grid-row: 3; }
.svc-labs-band .svc-lab-5 { grid-column: 4 / 7; grid-row: 3; }
/* Row 4: three cards, a third each. */
.svc-labs-band .svc-lab-6 { grid-column: 1 / 3; grid-row: 4; }
.svc-labs-band .svc-lab-7 { grid-column: 3 / 5; grid-row: 4; }
.svc-labs-band .svc-lab-8 { grid-column: 5 / 7; grid-row: 4; }

/* Insight posts use the SAME bento as the service pages above — the
   placements are already inherited, so nothing is overridden here for the
   common cases. relatedLabs is a manual per-post pick though, and the
   fixed bento only tiles cleanly at 4, 6 or 9 cards. These count-aware
   rules close the holes at 1, 2, 3 and 5 without touching the rest. */
/* DESKTOP ONLY. These spans are written against the 6-column desktop grid,
   and because of the :has() they outweigh the narrow-width reset further
   down (`.svc-labs-band .svc-lab { grid-column: auto !important }`) even
   though both carry !important. Left unscoped they kept forcing 6 columns
   into the 2-column layout below 1100px: the browser invented the missing
   tracks, and the cards collapsed to a few characters wide. That is what
   a half-screen window on a Mac looks like, so the breakpoint has to
   exclude them rather than try to out-specify them. */
@media (min-width: 1101px) {
  .svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(1)) > .svc-lab {
    grid-column: 1 / 7 !important; grid-row: auto !important;
  }
  .svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(2)) > .svc-lab {
    grid-column: span 3 !important; grid-row: auto !important;
  }
  .svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(3)) > .svc-lab {
    grid-column: span 2 !important; grid-row: auto !important;
  }
  /* 5 cards: keep the 4-card bento, then run the fifth full width. */
  .svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(5)) > .svc-lab-4 {
    grid-column: 1 / 7 !important; grid-row: 3 !important;
  }
}

@media (max-width: 1100px) {
  .svc-labs-band--flow .svc-labs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-labs-band--flow .svc-lab-0:not(:last-child) { grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 720px) {
  .svc-labs-band--flow .svc-labs-grid { grid-template-columns: 1fr !important; }
  .svc-labs-band--flow .svc-lab-0:not(:last-child) { grid-column: 1 !important; grid-row: auto !important; }
}
/* Match entexis.tech's Live Demos card sizing: chunky readable name,
   even chunkier on the white lead. Target by CLASS so the removal of
   .svc-lab-ring (per no-thin-line-decorations) doesn't shift the index. */
.svc-labs-band .svc-lab-name {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}
.svc-labs-band .svc-lab-lead .svc-lab-name {
  font-size: 26px !important;
  line-height: 1.15 !important;
}
.svc-labs-band .svc-lab-light > div,
.svc-labs-band .svc-lab-light svg { color: var(--navy) !important; }
.svc-labs-band .svc-lab-light > div:first-child { border-color: rgba(0,0,0,0.06) !important; }

@media (max-width: 1100px) {
  .svc-labs-band .svc-labs-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: minmax(220px, auto);
  }
  .svc-labs-band .svc-lab { grid-column: auto !important; grid-row: auto !important; }
  .svc-labs-band .svc-lab-0:not(:last-child) { grid-column: 1 / 3 !important; }
  .svc-labs-band .svc-lab-1 { grid-column: 1 / 3 !important; }
}
@media (max-width: 720px) {
  .svc-labs-band .svc-labs-grid { grid-template-columns: 1fr !important; grid-template-rows: none; }
  .svc-labs-band .svc-lab { grid-column: 1 !important; grid-row: auto !important; }
}

/* ── "What We Build / Solutions We Deliver" cards (.csb-svc-*) —
   shared styling used by case study pages AND blog article pages.
   Unscoped so it applies wherever the classes appear. */
.csb-svc-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  text-decoration: none;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 18px;
  min-height: 200px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  transition: none;
  box-shadow: none;
}
.csb-svc-card:hover { transform: none; box-shadow: none; }
/* First card is always the white lead tile with navy text. */
.csb-svc-card:nth-child(1) {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.18), transparent 55%) !important;
}
/* Cards 2+ cycle the brand palette with white text. `background-color`
   (not the `background` shorthand) preserves the base radial gradient
   so every tile keeps its top-left dark bloom. */
.csb-svc-card:nth-child(5n+2) { background-color: #f77f00 !important; }
.csb-svc-card:nth-child(5n+3) { background-color: #4aaa57 !important; }
.csb-svc-card:nth-child(5n+4) { background-color: #1565c7 !important; }
.csb-svc-card:nth-child(5n+5) { background-color: #1a2857 !important; }
.csb-svc-card:nth-child(5n+6) { background-color: #0096c7 !important; }
.csb-svc-card:not(:nth-child(1)),
.csb-svc-card:not(:nth-child(1)) * { color: #ffffff !important; }

/* ── Industries body content ──────────────────────────────────────────
   Scoped by .ind-prose, added on the industries template only, so the
   insight articles that share .blog-prose keep their per-post accent. */

/* Square list bullets: the .blog-prose default falls back to --teal when
   no --prose-accent is set, and industries never sets one, so every
   bullet rendered blue. Navy on all six pages. */
.ind-prose ul li::before { background: var(--navy); }

/* ═══════════════════════════════════════════════════════════════════
   CRM case study: Permissions Matrix (Feature 06) — semantic table
   with legible font-size, zebra rows, brand-coloured headers.
   ═══════════════════════════════════════════════════════════════════ */
.cs-perm-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #ffffff;
}
/* Round the OWNER (first body row) top corners + CRM (last body row)
   bottom corners. Applied to the end cells of those rows. */
.cs-perm-matrix tbody tr:first-child > th:first-child { border-top-left-radius: 12px; }
.cs-perm-matrix tbody tr:first-child > td:last-child  { border-top-right-radius: 12px; }
.cs-perm-matrix tbody tr:last-child  > th:first-child { border-bottom-left-radius: 12px; }
.cs-perm-matrix tbody tr:last-child  > td:last-child  { border-bottom-right-radius: 12px; }
/* Mobile: let the permission matrix scroll horizontally inside its
   navy card rather than overflow the viewport. The dd-section-kicker
   label stays glued to the left edge via position: sticky so it never
   scrolls away while the user swipes the table.
   Same treatment for the pipeline/workflow infographics in
   .cs-card--navy-lg-mt24 (DD04 lead comms, DD05 hiring pipeline). */
@media (max-width: 768px) {
  .cs-card--navy:has(.cs-perm-matrix),
  .cs-card--navy-lg-mt24 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cs-card--navy:has(.cs-perm-matrix) .dd-section-kicker,
  .cs-card--navy-lg-mt24 .dd-section-kicker {
    position: sticky;
    left: 0;
  }
  .cs-perm-matrix {
    min-width: 480px;
  }
  .cs-card--navy-lg-mt24 > div {
    min-width: 560px;
  }
  /* Bundle (cs-tile--navy with .cs-tcard--xl inside): scroll the INNER
     tile only so the section title above it (e.g. "Bundle System:
     Curated Packages") stays fixed and doesn't scroll with the content.
     Scoped by :has(.cs-tcard--xl) so other cs-tile--navy uses (e.g. the
     sports-afield property listing) don't inherit this scroll + 440px
     min-width which would otherwise push them past the viewport. */
  .cs-tile--navy:has(.cs-tcard--xl) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cs-tile--navy:has(.cs-tcard--xl) > * {
    min-width: 440px;
  }
}
.cs-perm-matrix th,
.cs-perm-matrix td {
  padding: 10px 12px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cs-perm-matrix thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top: none;
}
.cs-perm-matrix tbody th {
  text-align: left;
  font-weight: 600;
  color: rgba(255,255,255,.75);
}
.cs-perm-matrix .cs-tick   { color: #4aaa57; font-weight: 700; font-size: 15px; }
.cs-perm-matrix .cs-toggle { color: #f77f00; font-weight: 700; font-size: 15px; }
.cs-perm-matrix .cs-dash   { color: rgba(255,255,255,.25); font-weight: 700; font-size: 15px; }
/* Row-colour helper: when .ia-bg-green/teal/orange is on a tr, paint
   the cells so the colour actually renders under border-collapse, and
   force white text on everything inside so ticks/toggles stay legible. */
.cs-perm-matrix tbody tr.ia-bg-green  > th,
.cs-perm-matrix tbody tr.ia-bg-green  > td { background: #4aaa57; }
.cs-perm-matrix tbody tr.ia-bg-teal   > th,
.cs-perm-matrix tbody tr.ia-bg-teal   > td { background: #0096c7; }
.cs-perm-matrix tbody tr.ia-bg-orange > th,
.cs-perm-matrix tbody tr.ia-bg-orange > td { background: #f77f00; }
.cs-perm-matrix tbody tr.ia-bg-green  > *,
.cs-perm-matrix tbody tr.ia-bg-teal   > *,
.cs-perm-matrix tbody tr.ia-bg-orange > * { color: #ffffff !important; }
/* Legend footer */
.cs-perm-matrix .cs-perm-legend {
  text-align: left;
  padding-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ─── Alert strip (orange notification bar in Feature 08). */
.cs-alert-strip {
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 10px;
}
.cs-alert-strip--orange { background: #f77f00; }
.cs-alert-strip--teal   { background: #0096c7; }
.cs-alert-strip--green  { background: #4aaa57; }

/* ─── Notification bell + badge (Feature 08 head row). */
.cs-notif-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cs-notif-bell {
  position: relative;
  display: inline-block;
}
.cs-notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #f77f00;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-unread-count { color: #f77f00; font-weight: 700; }