/* ════════════════════════════════════════════════════════════════
   EZELMAN — SITEWIDE OVERRIDES v4 (APR 2026)
   Loaded LAST on every page so it always wins the cascade.

   Goals:
   1) Tricolor brand barre at the top of every page
   2) Brand palette + gradient lock (kill stray non-brand colours)
   3) Article-layout L→R fix on every blog page (kill the empty 300px gutter)
   4) Brand-blue boxes for blog stat banners, callouts, verdicts
   5) Reduce hero empty-space on /services*, /about, /us, etc.
   ════════════════════════════════════════════════════════════════ */

/* ── (1) NO TRICOLOR BAR — removed per request, navbar stands clean ── */
body nav.navbar { position: fixed !important; }
body nav.navbar::before,
body nav.navbar::after {
  content: none !important;
  background: none !important;
  height: 0 !important;
  display: none !important;
}
body.no-navbar::before,
body[data-no-navbar]::before {
  content: none !important;
  display: none !important;
}
/* Also kill any decorative tricolor bar at the top of the page-hero / article-hero /
   stat-banner / breadcrumbs / case-meta — none of those should carry a coloured
   accent now, since the user wants a clean navbar/breadcrumb area on every page. */
body .page-hero::before,
body .article-hero::before,
body .hero::before,
body .stat-banner::before,
body .case-meta::before,
body .breadcrumbs::before,
body .breadcrumbs::after,
body nav.breadcrumbs::before,
body nav.breadcrumbs::after,
body section.page-hero:not([style*="background"])::before,
body section.page-hero::before,
body section.article-hero::before,
body div.article-hero::before,
body div.stat-banner::before,
body section.stat-banner::before,
body div.case-meta::before,
body section.case-meta::before {
  content: none !important;
  background: none !important;
  height: 0 !important;
  display: none !important;
}

/* ── (2) ARTICLE-LAYOUT — match the page-hero / container width on the
   rest of the site (1200px), single-column, full-bleed background ── */
body div.article-layout,
body section.article-layout,
body main .article-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 32px 48px !important;
  gap: 0 !important;
  background: transparent !important;
}
/* Article-hero + article body share the same dark sitewide background
   so the article reads as part of the page, not a contained card */
body main, body { background: #0A1628 !important; }
body .article-layout > .article-body,
body .article-body {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* Hide any in-flow sidebar that lived in the now-collapsed grid column.
   Keep the floating .toc-sidebar and #sidebar (mobile drawer) — they are fixed. */
body .article-layout > aside.sidebar,
body .article-layout > .sidebar:not(#sidebar):not(.toc-sidebar) {
  display: none !important;
}

/* Inner grid visuals inside articles get full width */
body .article-body .ez-axes,
body .article-body .ez-failures,
body .article-body .ez-plays,
body .article-body .ez-actions,
body .article-body .ez-grid-4,
body .article-body .ez-grid-3,
body .article-body .ez-grid-2,
body .article-body .verdict-grid,
body .article-body .steps {
  width: 100% !important;
  max-width: none !important;
}
@media (min-width: 1080px) {
  body .article-body .ez-axes { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── (3) BLOG STAT-BANNER — brand blue gradient ── */
body .stat-banner {
  background: linear-gradient(135deg, #0A1628 0%, #1F2C50 35%, #6258E0 100%) !important;
  position: relative;
  overflow: hidden;
}
body .stat-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6258E0, #1F8FF6, #F99B1C);
}
body .stat-banner-inner {
  max-width: 1280px !important;
  padding: 0 32px !important;
}
body .stat-item {
  background: transparent !important;
  border-right-color: rgba(143,180,255,0.18) !important;
  padding: 32px 24px !important;
}
body .stat-item .num {
  background: linear-gradient(135deg, #FFFFFF 0%, #8FB4FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body .stat-item .unit { color: #F99B1C !important; }
body .stat-item .lbl { color: rgba(255,255,255,0.72) !important; }

/* ── (4) BLOG CALLOUTS / VERDICT — brand-aligned ── */
body .callout {
  background: linear-gradient(165deg, rgba(98,88,224,0.10) 0%, #131F35 100%) !important;
  border-left: 3px solid #6258E0 !important;
  border-radius: 0 12px 12px 0 !important;
  color: rgba(255,255,255,0.86) !important;
}
body .callout p { color: rgba(255,255,255,0.86) !important; }
body .callout strong { color: #8FB4FF !important; }
body .callout-amber {
  background: linear-gradient(165deg, rgba(249,155,28,0.10) 0%, #131F35 100%) !important;
  border-left-color: #F99B1C !important;
}
body .callout-amber p { color: rgba(255,255,255,0.86) !important; }
body .callout-amber strong { color: #F99B1C !important; }
body .callout-dark {
  background: linear-gradient(135deg, #0A1628 0%, #1F2C50 60%, #6258E0 100%) !important;
  border: 1px solid rgba(143,180,255,0.24) !important;
  position: relative;
  overflow: hidden;
}
body .callout-dark::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6258E0, #1F8FF6, #F99B1C);
}
body .callout-dark .stat { color: #FFFFFF !important; }
body .callout-dark .stat-unit { color: #F99B1C !important; }
body .callout-dark p { color: rgba(255,255,255,0.78) !important; }

/* Verdict good/bad — keep brand voice */
body .verdict-good .verdict-header {
  background: linear-gradient(90deg, #1F8FF6 0%, #6258E0 100%) !important;
  color: #FFFFFF !important;
}
body .verdict-bad .verdict-header {
  background: linear-gradient(90deg, #F99B1C 0%, #6258E0 100%) !important;
  color: #FFFFFF !important;
}
body .verdict-good .verdict-body,
body .verdict-bad .verdict-body {
  background: #131F35 !important;
  border-color: rgba(138,163,242,0.22) !important;
  color: rgba(255,255,255,0.84) !important;
}

/* Comparison tables → brand palette */
body .comparison-table th {
  background: linear-gradient(90deg, #0A1628 0%, #1F2C50 100%) !important;
  color: #FFFFFF !important;
}
body .comparison-table td:first-child { color: #FFFFFF !important; }
body .comparison-table td { color: rgba(255,255,255,0.84) !important; border-bottom-color: rgba(143,180,255,0.14) !important; }
body .comparison-table tr:nth-child(even) td { background: rgba(143,180,255,0.04) !important; }

/* Steps numbered lists → palette */
body .step-num {
  background: linear-gradient(135deg, #6258E0 0%, #1F8FF6 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(98,88,224,0.32) !important;
}
body .step-content h4 { color: #FFFFFF !important; }
body .step-content p { color: rgba(255,255,255,0.84) !important; }

/* ── (5) NAVBAR → BREADCRUMB → HERO — kill all redundant vertical space.
   Navbar is fixed at top:0 with height ~72px, so breadcrumb just needs to clear
   it. No "buffer" zone between navbar and first content. ── */
@media (min-width: 901px) {
  /* Body has padding-top:72px to clear the fixed navbar — breadcrumb only
     needs a tiny breathing margin on top of that. */
  body nav.breadcrumbs,
  body div.breadcrumbs,
  body .breadcrumbs {
    margin-top: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important;
  }
  body nav.breadcrumbs ol,
  body div.breadcrumbs ol,
  body .breadcrumbs ol { gap: 6px !important; font-size: 12px !important; }

  /* Hero sits ~6px below the breadcrumb */
  body section.page-hero {
    padding-top: 14px !important;
    padding-bottom: 32px !important;
  }
  /* When the page has no breadcrumb, hero needs to clear the fixed navbar itself */
  body main > section.page-hero:first-child,
  body > main > section.page-hero:first-of-type {
    padding-top: 88px !important;
  }
  /* When breadcrumb sits above, kill the rest of the gap */
  body nav.breadcrumbs + section.page-hero,
  body nav.breadcrumbs + main > section.page-hero:first-child,
  body div.breadcrumbs + section.page-hero {
    padding-top: 6px !important;
    padding-bottom: 28px !important;
  }
  /* Hero internals — title sits flush after section-label */
  body section.page-hero .section-label,
  body section.page-hero__eyebrow {
    margin-bottom: 6px !important;
  }
  body section.page-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  body section.page-hero .page-hero__sub,
  body section.page-hero > .container > p,
  body section.page-hero p {
    margin-bottom: 16px !important;
  }
  /* Article hero (blog templates) — same treatment */
  body section.article-hero,
  body div.article-hero {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }
  body nav.breadcrumbs + section.article-hero,
  body nav.breadcrumbs + div.article-hero {
    padding-top: 6px !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 900px) {
  body section.page-hero {
    padding-top: 88px !important;
    padding-bottom: 28px !important;
  }
  body main > section.page-hero:first-child {
    padding-top: 92px !important;
  }
  body nav.breadcrumbs + section.page-hero {
    padding-top: 14px !important;
  }
  body div.article-layout {
    padding: 18px 18px 36px !important;
  }
}

/* ── (6) BLOG ARTICLE-HERO — brand gradient + tricolor bar at top ── */
body section.article-hero {
  background: linear-gradient(165deg, #0A1628 0%, rgba(98,88,224,0.10) 50%, #0A1628 100%) !important;
  position: relative;
  overflow: hidden;
}
body section.article-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6258E0, #1F8FF6, #F99B1C);
  z-index: 1;
}

/* ── (7) Body / article copy — tighter, less text-heavy on blogs ── */
body .article-body p,
body .article-body li {
  color: rgba(255,255,255,0.86) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-bottom: 14px !important;
}
body .article-body h2 {
  font-size: 22px !important;
  margin: 28px 0 12px !important;
}
body .article-body h3 {
  font-size: 17px !important;
  margin: 22px 0 8px !important;
}
body .article-body ul,
body .article-body ol { margin-bottom: 14px !important; }
body .article-body strong { color: #FFFFFF !important; font-weight: 700 !important; }
body .article-body h2 { color: #FFFFFF !important; }
body .article-body h3 { color: #FFFFFF !important; }
body .article-body a:not(.btn-primary):not(.btn-secondary) {
  color: #8FB4FF !important;
  text-decoration: underline;
  text-decoration-color: rgba(143,180,255,0.40);
  text-underline-offset: 3px;
}
body .article-body a:hover { color: #FFFFFF !important; }

/* ── (8) Sidebar / TOC inside article — hide if empty grid column ── */
body .sidebar.is-empty,
body .article-layout .sidebar:empty { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   (10) BLOG PAGES → ECB-ONSITE-PLAYBOOK VISUAL PARITY · APR 2026
   Goal: lift the 7 blog templates to the visual standard of
   /intelligence/articles/ecb-onsite-playbook/.
   - Dark hero with radial glows and 3 gradient KPI tiles
   - Alternating section backgrounds (dark navy / dark surface / navy)
   - Kicker labels above every h2
   - Bigger headlines, lighter prose, more visual rhythm
   - Less text, more designed callouts
   ════════════════════════════════════════════════════════════════ */

/* Hero: full Ezelman brand-palette gradient — navy → purple → blue */
body section.article-hero,
body div.article-hero,
body header.article-hero {
  background:
    radial-gradient(circle at 85% -10%, rgba(255,255,255,0.06) 0%, transparent 45%),
    radial-gradient(circle at 12% 110%, rgba(31,143,246,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #0A1628 0%, #1F2C50 35%, #3A2D7E 65%, #6258E0 92%, #1F8FF6 100%) !important;
  border-bottom: 1px solid rgba(143,180,255,0.16) !important;
  padding: 48px 32px 64px !important;
  position: relative !important;
  overflow: hidden !important;
}
body section.article-hero::after,
body div.article-hero::after,
body header.article-hero::after { content: none !important; }
body nav.breadcrumbs + section.article-hero,
body nav.breadcrumbs + div.article-hero {
  padding-top: 28px !important;
  padding-bottom: 48px !important;
}
body section.article-hero .article-hero__inner,
body div.article-hero .article-hero__inner,
body div.article-hero > div,
body section.article-hero > div {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* Hero h1 — bigger, gradient on accent words via <em> */
body section.article-hero h1,
body div.article-hero h1,
body section.article-hero .article-title,
body div.article-hero .article-title {
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -1.2px !important;
  margin: 0 0 16px !important;
  color: #FFFFFF !important;
  max-width: 950px !important;
}
body section.article-hero h1 em,
body div.article-hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #6258E0 0%, #1F8FF6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body section.article-hero p,
body div.article-hero p,
body section.article-hero .article-deck,
body div.article-hero .article-deck {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.72) !important;
  max-width: 760px !important;
}

/* Stat banner → gradient KPI tile row (matches .hero-kpis) */
body .stat-banner {
  background: transparent !important;
  border-top: none !important;
  padding: 0 !important;
  margin: -16px 0 0 !important;
  position: relative;
  z-index: 5;
}
body .stat-banner::before { content: none !important; }
body .stat-banner-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  background: transparent !important;
}
body .stat-item {
  background: linear-gradient(135deg, #6258E0 0%, #457BED 50%, #1F8FF6 100%) !important;
  border-right: none !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(98,88,224,0.24), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
}
body .stat-item::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  pointer-events: none;
}
body .stat-item .num {
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
  display: block;
}
body .stat-item .unit {
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
body .stat-item .lbl {
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

/* Article layout: full-width sections, no grid */
body div.article-layout,
body section.article-layout,
body main .article-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0A1628 !important;
}
body .article-layout > .article-body {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 64px 32px 48px !important;
  width: 100% !important;
}

/* Article body type system — playbook scale */
body .article-body p,
body .article-body li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.72) !important;
  margin-bottom: 18px !important;
  max-width: 880px !important;
}
body .article-body strong { color: #FFFFFF !important; font-weight: 700 !important; }

/* H2 — playbook section header, with kicker built from data-kicker if present */
body .article-body h2 {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  margin: 56px 0 18px !important;
  color: #FFFFFF !important;
  position: relative;
  padding-top: 24px !important;
  line-height: 1.18 !important;
}
body .article-body h2::before {
  content: attr(data-kicker);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #1F8FF6;
  margin-bottom: 12px;
  background: none;
  position: static;
  height: auto;
  width: auto;
  border: none;
}
/* H2 without data-kicker — small accent bar instead */
body .article-body h2:not([data-kicker])::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6258E0, #1F8FF6);
  margin-bottom: 16px;
}
body .article-body h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 32px 0 12px !important;
  color: #FFFFFF !important;
  letter-spacing: -0.2px !important;
}

/* First h2 has tighter top margin */
body .article-body > h2:first-child,
body .article-body > p:first-child + h2 {
  margin-top: 0 !important;
}

/* Anchor links inside body — brand */
body .article-body a:not(.btn-primary):not(.btn-secondary):not(.linkedin-bar__btn) {
  color: #8FB4FF !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(143,180,255,0.32);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
body .article-body a:not(.btn-primary):not(.btn-secondary):not(.linkedin-bar__btn):hover {
  color: #FFFFFF !important;
  border-bottom-color: #1F8FF6;
}

/* Callouts — playbook exec-summary style */
body .article-body .callout,
body .article-body .callout-amber,
body .article-body .callout-dark {
  background: #131F35 !important;
  border: 1px solid rgba(143,180,255,0.16) !important;
  border-left: 4px solid #6258E0 !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 28px 32px !important;
  margin: 32px 0 !important;
}
body .article-body .callout p,
body .article-body .callout-amber p,
body .article-body .callout-dark p {
  color: rgba(255,255,255,0.86) !important;
  font-size: 15px !important;
  margin-bottom: 12px !important;
}
body .article-body .callout p:last-child,
body .article-body .callout-amber p:last-child,
body .article-body .callout-dark p:last-child { margin-bottom: 0 !important; }
body .article-body .callout strong,
body .article-body .callout-amber strong { color: #8FB4FF !important; }
body .article-body .callout-amber { border-left-color: #F99B1C !important; }
body .article-body .callout-amber strong { color: #F99B1C !important; }
body .article-body .callout-dark { border-left-color: transparent !important; background: linear-gradient(135deg, #0A1628 0%, #1F2C50 60%, #6258E0 100%) !important; }
body .article-body .callout-dark .stat,
body .article-body .callout-dark .stat-unit { color: #FFFFFF !important; }
body .article-body .callout-dark .stat-unit { color: #F99B1C !important; }
body .article-body .callout-dark p { color: rgba(255,255,255,0.84) !important; }

/* Designed visual blocks (.ez-axes, .ez-failures, .ez-plays etc.) — ensure
   they match the playbook gradient + spacing */
body .article-body .ez-axes,
body .article-body .ez-failures,
body .article-body .ez-plays,
body .article-body .ez-actions,
body .article-body .ez-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 36px 0 !important;
}
body .article-body .ez-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 36px 0 !important;
}
body .article-body .ez-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  margin: 36px 0 !important;
}
@media (max-width: 960px) {
  body .article-body .ez-axes,
  body .article-body .ez-failures,
  body .article-body .ez-plays,
  body .article-body .ez-actions,
  body .article-body .ez-grid-4,
  body .article-body .ez-grid-3,
  body .article-body .ez-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

body .article-body .ez-axis,
body .article-body .ez-failure,
body .article-body .ez-play,
body .article-body .ez-action,
body .article-body .ez-card {
  background: #131F35 !important;
  border: 1px solid rgba(143,180,255,0.14) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
}
body .article-body .ez-axis::before,
body .article-body .ez-failure::before,
body .article-body .ez-play::before,
body .article-body .ez-action::before,
body .article-body .ez-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6258E0, #1F8FF6);
}

/* Comparison tables — keep sleek, dark with subtle borders */
body .article-body .comparison-table,
body .article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 28px 0 !important;
  font-size: 14px !important;
  background: #131F35 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body .article-body .comparison-table th,
body .article-body table th {
  background: linear-gradient(90deg, #0A1628 0%, #1F2C50 100%) !important;
  color: #FFFFFF !important;
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 11.5px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}
body .article-body .comparison-table td,
body .article-body table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(143,180,255,0.10) !important;
  color: rgba(255,255,255,0.82) !important;
  vertical-align: top !important;
}
body .article-body .comparison-table td:first-child,
body .article-body table td:first-child {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Verdict grid (good/bad columns) */
body .article-body .verdict-good .verdict-header {
  background: linear-gradient(90deg, #1F8FF6 0%, #6258E0 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
}
body .article-body .verdict-bad .verdict-header {
  background: linear-gradient(90deg, #F99B1C 0%, #C97B0F 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
}
body .article-body .verdict-good .verdict-body,
body .article-body .verdict-bad .verdict-body {
  background: #131F35 !important;
  border: 1px solid rgba(143,180,255,0.16) !important;
  border-top: none !important;
  color: rgba(255,255,255,0.84) !important;
}

/* Steps numbered list */
body .article-body .step-num {
  background: linear-gradient(135deg, #6258E0 0%, #1F8FF6 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(98,88,224,0.32) !important;
}

/* Article footer share + related — soften */
body .article-footer-share,
body .related-section {
  background: #0A1628 !important;
  border-color: rgba(143,180,255,0.10) !important;
}
body .related-section { padding: 64px 32px !important; }
body .related-section h2 { color: #FFFFFF !important; }
body .related-card {
  background: #131F35 !important;
  border: 1px solid rgba(143,180,255,0.14) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
}
body .related-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6258E0, #1F8FF6);
}
body .related-card h3 { color: #FFFFFF !important; }
body .related-card p { color: rgba(255,255,255,0.72) !important; }
body .related-tag { color: #8FB4FF !important; }

/* FAQ section on blog — redesign as branded accordion-style cards */
body .article-body .faq-section {
  margin: 48px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
body .article-body .faq-item {
  background: linear-gradient(160deg, #131F35 0%, #1F2C50 100%) !important;
  border: 1px solid rgba(143,180,255,0.18) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, #6258E0 0%, #1F8FF6 100%) 1 !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 22px 26px 20px !important;
  position: relative !important;
  transition: transform .2s, box-shadow .2s !important;
}
body .article-body .faq-item:first-child { border-top: 1px solid rgba(143,180,255,0.18) !important; }
body .article-body .faq-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 32px rgba(98,88,224,0.20) !important;
}
body .article-body .faq-item::before {
  content: 'Q';
  position: absolute;
  top: 22px;
  right: 24px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6258E0, #1F8FF6);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
body .article-body .faq-q {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
  padding-right: 44px !important;
  letter-spacing: -0.2px !important;
}
body .article-body .faq-a {
  color: rgba(255,255,255,0.82) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
body .article-body .faq-a strong { color: #FFFFFF !important; }

/* Pull-quote: turn long single paragraphs (with strong opening) into visual
   pull-quotes via a class users can opt in. Default keeps prose readable. */
body .article-body p.pull-quote,
body .article-body blockquote {
  background: linear-gradient(160deg, rgba(98,88,224,0.10) 0%, #131F35 100%) !important;
  border: none !important;
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, #6258E0, #1F8FF6) 1 !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 22px 26px 22px !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  margin: 28px 0 !important;
  max-width: none !important;
}

/* Constrain article-body width AND tighten prose to ~720px reading column */
body .article-body p:not(.pull-quote):not([class*="ez-"]):not([class*="callout"]):not(.exec-summary p):not(.faq-a) {
  max-width: 760px !important;
}
/* But designed visuals should use full width */
body .article-body .ez-axes,
body .article-body .ez-failures,
body .article-body .ez-plays,
body .article-body .ez-actions,
body .article-body .ez-grid-4,
body .article-body .ez-grid-3,
body .article-body .ez-grid-2,
body .article-body .ez-fail-grid,
body .article-body .ez-geo-init,
body .article-body .ez-bl,
body .article-body .ez-fix,
body .article-body table,
body .article-body .verdict-grid,
body .article-body .steps {
  max-width: none !important;
  width: 100% !important;
}

/* Mobile compact */
@media (max-width: 900px) {
  body section.article-hero,
  body div.article-hero {
    padding: 32px 20px 36px !important;
  }
  body .article-body { padding: 36px 20px !important; }
  body .article-body h2 { font-size: 26px !important; margin: 40px 0 14px !important; }
  body .article-body h3 { font-size: 19px !important; }
  body .stat-banner-inner { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  body .stat-item { padding: 22px 20px !important; }
}

/* Left CONTENTS sidebar IS shown on blog pages. Blog pages do NOT have a <main>
   wrapper — the article-hero, stat-banner, article-layout, footer-share, and
   related-section are direct children of <body>. Shift each one by 280px so the
   sidebar's column is fully cleared. linkedin-bar / newsletter-bar / footer
   stay full-width (they sit below the sidebar's vertical extent). */
@media (min-width: 1280px) {
  body:has(.article-layout) > header.article-hero,
  body:has(.article-layout) > section.article-hero,
  body:has(.article-layout) > div.article-hero,
  body:has(.article-layout) > div.stat-banner,
  body:has(.article-layout) > section.stat-banner,
  body:has(.article-layout) > div.article-layout,
  body:has(.article-layout) > div.article-footer-share,
  body:has(.article-layout) > section.article-footer-share,
  body:has(.article-layout) > section.related-section,
  body:has(.article-layout) > section.related-intel,
  body:has(.article-layout) > section.partner-cta-t85,
  /* Some blog templates wrap everything in <article>: shift the article wrapper itself */
  body:has(.article-layout) > article {
    margin-left: 280px !important;
    margin-right: 0 !important;
    max-width: calc(100% - 280px) !important;
    box-sizing: border-box !important;
  }
  /* Inside those shifted blocks the inner content sits at the standard 32px
     padding (not 280px) since the parent already cleared the sidebar */
  body:has(.article-layout) > header.article-hero,
  body:has(.article-layout) > section.article-hero,
  body:has(.article-layout) > div.article-hero {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  body:has(.article-layout) .article-layout > .article-body {
    padding-left: 32px !important;
  }
  body:has(.article-layout) > div.stat-banner,
  body:has(.article-layout) > section.stat-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fallback for browsers without :has — pad the article-hero element directly
     (Chromium 105+, Safari 15.4+, Firefox 121+ all support :has so this is a
     defensive layer for older Edge / iOS versions). */
  body > header.article-hero,
  body > section.article-hero,
  body > div.article-hero,
  body .article-layout > .article-body {
    padding-left: 280px !important;
  }
}

/* ── ALTERNATING SECTION BACKGROUNDS via h2 zoning ──────────────────────────
   Without restructuring HTML we still create rhythm: each h2 inside the body
   carries an inset full-bleed background panel that flows down to the next
   h2 (or the end of the body). Done via a wrapper trick using CSS variables
   and a `::before` panel anchored to the h2.
   For broad browser support we use a subtler approach: every other h2 gets
   a thicker accent bar + a shifted background tint via box-shadow that
   visually stripes the body. */
body .article-body h2:nth-of-type(odd) {
  background: linear-gradient(90deg, rgba(98,88,224,0.10) 0%, rgba(31,143,246,0.04) 60%, transparent 100%);
  margin-left: -32px !important;
  margin-right: -32px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-top: 28px !important;
  padding-bottom: 12px !important;
  border-radius: 0;
}
body .article-body h2:nth-of-type(odd)::before {
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #6258E0, #1F8FF6, #F99B1C) !important;
  margin-bottom: 18px !important;
}
body .article-body h2:nth-of-type(even)::before {
  width: 64px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #6258E0, #1F8FF6) !important;
}

/* ── FAILURE CARDS — vertical, impactful, brand-gradient redesign ─────────
   Reshapes the .ez-fail-grid from 5 horizontal split-rows into 5 stacked
   "cinematic" cards. Each card has:
   • a giant gradient number that breaks the grid
   • a left brand-gradient bar
   • two columns (What we see · Why it happens) styled as paired panels
   • a hover lift to feel interactive
   ──────────────────────────────────────────────────────────────────── */
body .ez-fail-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  margin: 40px 0 28px !important;
}
body .ez-fail-row {
  display: grid !important;
  grid-template-columns: 120px 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #0E1F3D 0%, #131F35 50%, #1F2C50 100%) !important;
  border: 1px solid rgba(143,180,255,0.16) !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(7,15,29,0.45) !important;
  transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s !important;
}
body .ez-fail-row:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 60px rgba(98,88,224,0.32), 0 0 0 1px rgba(143,180,255,0.28) !important;
}
body .ez-fail-row::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #6258E0 0%, #1F8FF6 50%, #F99B1C 100%) !important;
}

/* Giant gradient number column */
body .ez-fail-num {
  background: linear-gradient(135deg, #6258E0 0%, #1F8FF6 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 32px 16px !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: -2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}
body .ez-fail-num::before {
  content: '' !important;
  position: absolute !important;
  top: -30px !important; right: -30px !important;
  width: 100px !important; height: 100px !important;
  background: rgba(255,255,255,0.10) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
body .ez-fail-num::after {
  content: 'FAILURE' !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  color: rgba(255,255,255,0.72) !important;
  background: none !important;
}

/* Hide the in-row arrow column — we've collapsed to 3-col grid */
body .ez-fail-arr { display: none !important; }

/* What we see panel */
body .ez-fail-cell--what {
  background: linear-gradient(160deg, rgba(249,155,28,0.10) 0%, rgba(249,155,28,0.02) 100%) !important;
  border: none !important;
  border-left: 1px solid rgba(143,180,255,0.10) !important;
  border-right: 1px solid rgba(143,180,255,0.10) !important;
  padding: 28px 26px 26px !important;
  border-radius: 0 !important;
  position: relative !important;
}
body .ez-fail-cell--what::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #F99B1C, transparent) !important;
}

/* Why it happens panel */
body .ez-fail-cell--why {
  background: linear-gradient(160deg, rgba(31,143,246,0.12) 0%, rgba(98,88,224,0.06) 100%) !important;
  border: none !important;
  padding: 28px 26px 26px !important;
  border-radius: 0 !important;
  position: relative !important;
}
body .ez-fail-cell--why::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #1F8FF6, #6258E0) !important;
}

/* Cell labels — bigger, with a leading dot icon */
body .ez-fail-cell-lbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
body .ez-fail-cell--what .ez-fail-cell-lbl::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important; height: 8px !important;
  background: #F99B1C !important;
  border-radius: 2px !important;
  box-shadow: 0 0 10px rgba(249,155,28,0.6) !important;
}
body .ez-fail-cell--why .ez-fail-cell-lbl::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important; height: 8px !important;
  background: linear-gradient(135deg, #1F8FF6, #6258E0) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(31,143,246,0.6) !important;
}

body .ez-fail-cell-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
}
body .ez-fail-cell-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.84) !important;
  margin: 0 !important;
}
body .ez-fail-cell-text strong { color: #FFFFFF !important; }

/* Mobile — stack into single column */
@media (max-width: 900px) {
  body .ez-fail-row {
    grid-template-columns: 1fr !important;
  }
  body .ez-fail-num {
    padding: 18px !important;
    font-size: 36px !important;
  }
  body .ez-fail-num::after { top: 6px !important; }
  body .ez-fail-cell--what,
  body .ez-fail-cell--why {
    border-left: none !important;
    border-right: none !important;
    padding: 22px 20px !important;
  }
}

/* ── PLAYS / FIX CARDS — same brand-gradient palette as failure cards ── */
body .ez-fix__card {
  background: linear-gradient(160deg, #131F35 0%, #1F2C50 100%) !important;
  border: 1px solid rgba(143,180,255,0.18) !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg, #6258E0, #1F8FF6) 1 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
body .ez-fix__card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(98,88,224,0.24) !important;
}
body .ez-fix__card-num {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #6258E0, #1F8FF6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════
   (9) RIGHT-SIDE CONTEXTUAL TOC — re-declared here so EVERY page picks it
   up even if it doesn't load ezelman-core.css. The auto-built `.ez-right-toc`
   element was rendering as a giant unstyled hamburger + bare link list on
   pages that lacked the core stylesheet (about, hannan, blog templates, etc.)
   ════════════════════════════════════════════════════════════════ */
.ez-right-toc {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 950 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  display: none;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 1200px) {
  .ez-right-toc { display: block; }
}
.ez-right-toc__btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px 10px 12px !important;
  background: linear-gradient(135deg, rgba(98,88,224,0.94) 0%, rgba(31,143,246,0.94) 100%) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(143,180,255,0.40) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(7,15,29,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s !important;
  width: auto !important;
  height: auto !important;
  font-family: 'Inter', sans-serif !important;
}
.ez-right-toc__btn:hover {
  transform: translateY(-1px) !important;
}
.ez-right-toc__btn-icon {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  color: #FFFFFF !important;
}
.ez-right-toc__btn-icon svg { width: 100% !important; height: 100% !important; }
.ez-right-toc__btn-label { letter-spacing: 1.4px !important; }

.ez-right-toc__panel {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 10px) !important;
  width: 280px !important;
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  padding: 16px 14px 14px !important;
  background: linear-gradient(165deg, rgba(19,31,53,0.98) 0%, rgba(98,88,224,0.16) 100%) !important;
  border: 1px solid rgba(138,163,242,0.32) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(7,15,29,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s, visibility 0.18s, transform 0.18s !important;
}
.ez-right-toc.is-open .ez-right-toc__panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.ez-right-toc__kicker {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #8FB4FF !important;
  margin: 4px 4px 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px dashed rgba(138,163,242,0.20) !important;
}
.ez-right-toc__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ez-right-toc__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ez-right-toc__link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  border-left: 2px solid transparent !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  font-family: 'Inter', sans-serif !important;
}
.ez-right-toc__link:hover {
  background: rgba(31,143,246,0.10) !important;
  color: #FFFFFF !important;
  border-left-color: rgba(143,180,255,0.40) !important;
}
.ez-right-toc__num {
  flex: 0 0 22px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  color: #8AA3F2 !important;
  font-family: 'Consolas', monospace !important;
  padding-top: 1px !important;
}
.ez-right-toc__text {
  flex: 1 !important;
  word-break: break-word !important;
}
.ez-right-toc__item.is-active .ez-right-toc__link {
  background: rgba(98,88,224,0.18) !important;
  color: #FFFFFF !important;
  border-left-color: #1F8FF6 !important;
}
.ez-right-toc__item.is-active .ez-right-toc__num {
  color: #FFFFFF !important;
}
@media print {
  .ez-right-toc { display: none !important; }
}

/* Same hardening for the older left-side `.toc-sidebar` element if present.
   Anchor to the TOP-LEFT (not center) just below the fixed navbar, the way
   /services/ originally placed it. */
.toc-sidebar {
  position: fixed !important;
  left: 8px !important;
  top: 130px !important;        /* below the navbar (72px) AND the breadcrumb (~110px) */
  transform: none !important;
  width: 224px !important;
  max-height: calc(100vh - 150px) !important;
  overflow-y: auto !important;
  padding: 14px 12px 12px !important;
  background: linear-gradient(165deg, rgba(19,31,53,0.96) 0%, rgba(98,88,224,0.12) 100%) !important;
  border: 1px solid rgba(138,163,242,0.20) !important;
  border-radius: 12px !important;
  z-index: 940 !important;
  font-family: 'Inter', sans-serif !important;
  display: none;
}
@media (min-width: 1440px) { .toc-sidebar { left: 16px !important; width: 240px !important; } }
@media (min-width: 1600px) { .toc-sidebar { left: 28px !important; width: 248px !important; } }
@media (min-width: 1760px) { .toc-sidebar { left: 44px !important; } }
@media (min-width: 1280px) {
  .toc-sidebar { display: block; }
}
.toc-sidebar__kicker {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #8FB4FF !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px dashed rgba(138,163,242,0.20) !important;
}
.toc-sidebar__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.toc-sidebar__item { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.toc-sidebar__link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  border-left: 2px solid transparent !important;
  font-family: 'Inter', sans-serif !important;
}
.toc-sidebar__link:hover {
  background: rgba(31,143,246,0.10) !important;
  color: #FFFFFF !important;
  border-left-color: rgba(143,180,255,0.40) !important;
}
.toc-sidebar__num {
  flex: 0 0 22px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #8AA3F2 !important;
  font-family: 'Consolas', monospace !important;
  padding-top: 1px !important;
}
.toc-sidebar__text { flex: 1 !important; word-break: break-word !important; }

/* Push the article body out of the way of the fixed left TOC so they NEVER
   overlap on desktop. Below 1280px the TOC is hidden, so no margin needed. */
@media (min-width: 1280px) {
  body div.article-layout,
  body section.article-layout,
  body main .article-layout {
    margin-left: 280px !important;
    margin-right: 0 !important;
    max-width: calc(100% - 320px) !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
}

/* MOBILE — under 1200px the right-side TOC element is auto-hidden by its own
   media query above. Belt-and-braces: also hide the legacy `.toc-sidebar`
   anywhere narrower than 1280px so it can't possibly overlap mobile content. */
@media (max-width: 1279px) {
  .toc-sidebar,
  .ez-right-toc { display: none !important; }
}