/* =========================================================
   bd-ipoe.css — Quantum IPoE pages, BlueDot dark theme
   Ported from BNG Page Mockup/assets/bluedot-web.css.
   Every rule is scoped under .bd-ipoe. Site design tokens
   are aliased below with fallbacks so the block survives a
   theme-options change.
   ========================================================= */

.bd-ipoe {
  /* Surfaces */
  --bdi-bg:          var(--bg-primary,   #0A0E1A);
  --bdi-band:        var(--bg-secondary, #0F1629);
  --bdi-surface:     var(--bg-tertiary,  #151D35);
  --bdi-raised:      var(--bg-surface,   #1A2340);
  --bdi-card:        var(--gradient-card, linear-gradient(145deg, #0F1629, #151D35));

  /* Accents */
  --bdi-accent:      var(--accent-cyan,     #00D4FF);
  --bdi-accent-dim:  var(--accent-cyan-dim, #00B8D9);

  /* Type */
  --bdi-text:        var(--text-primary,   #E8F4F8);
  --bdi-muted:       var(--text-secondary, #94A3B8);
  --bdi-faint:       var(--text-muted,     #4A6080);
  --bdi-font:        var(--font-body, 'Inter', 'Segoe UI', system-ui, sans-serif);
  --bdi-mono:        var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);

  /* Lines */
  --bdi-rule:        var(--border-subtle, rgba(0, 212, 255, .12));
  --bdi-rule-strong: var(--border-active, rgba(0, 212, 255, .40));

  /* QoS — semantic, brightened for dark backgrounds. Never map to cyan. */
  --bdi-green:       #3FD07A;
  --bdi-yellow:      #F5C542;
  --bdi-red:         #FF6B5B;

  /* Geometry */
  --bdi-maxw:        var(--max-width, 1280px);
  --bdi-radius:      10px;
  --bdi-radius-lg:   14px;
  --bdi-shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 18px 44px rgba(0, 0, 0, .45);
  --bdi-shadow-sm:   0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .30);
  --bdi-glow:        0 0 0 1px var(--bdi-rule-strong), 0 0 28px rgba(0, 212, 255, .12);

  /* Base */
  color: var(--bdi-text);
  background: var(--bdi-bg);
  font-family: var(--bdi-font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.bd-ipoe *,
.bd-ipoe *::before,
.bd-ipoe *::after { box-sizing: border-box; }

.bd-ipoe img,
.bd-ipoe svg { max-width: 100%; }

.bd-ipoe a { color: var(--bdi-accent); text-decoration: none; }
.bd-ipoe a:hover { text-decoration: underline; }

.bd-ipoe h1,
.bd-ipoe h2,
.bd-ipoe h3,
.bd-ipoe h4 { line-height: 1.15; margin: 0 0 .5em; color: var(--bdi-text); }

.bd-ipoe p { margin: 0 0 1em; }
.bd-ipoe code,
.bd-ipoe kbd,
.bd-ipoe samp { font-family: var(--bdi-mono); }

/* ---- Layout helpers ---- */
.bd-ipoe .bd-wrap { max-width: var(--bdi-maxw); margin: 0 auto; padding: 0 24px; }
.bd-ipoe .bd-section { padding: 72px 0; background: var(--bdi-bg); }
.bd-ipoe .bd-section.bd-band {
  background: var(--bdi-band);
  border-top: 1px solid var(--bdi-rule);
  border-bottom: 1px solid var(--bdi-rule);
}
.bd-ipoe .bd-section-head { max-width: 760px; margin-bottom: 40px; }

.bd-ipoe .bd-kicker {
  text-transform: uppercase; letter-spacing: .18em; font-weight: 700;
  font-size: .72rem; color: var(--bdi-accent); margin: 0 0 12px;
}
.bd-ipoe .bd-section h2 {
  color: var(--bdi-text); font-size: 2rem; font-weight: 800; letter-spacing: -.01em;
  padding-bottom: 14px; position: relative;
}
.bd-ipoe .bd-section h2::after {
  content: ""; display: block; width: 68px; height: 3px;
  background: var(--bdi-accent); margin-top: 16px; border-radius: 2px;
}
.bd-ipoe .bd-section-head .bd-lead { font-size: 1.12rem; color: var(--bdi-muted); margin-top: 18px; }
.bd-ipoe .bd-lead { color: var(--bdi-muted); }
.bd-ipoe .bd-muted { color: var(--bdi-muted); }
.bd-ipoe .bd-center { text-align: center; }
.bd-ipoe .bd-mt-0 { margin-top: 0; }
.bd-ipoe .bd-mb-0 { margin-bottom: 0; }

/* ---- Badges & chips ---- */
.bd-ipoe .bd-badge {
  display: inline-block; background: var(--bdi-accent); color: var(--bdi-bg);
  font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 4px;
}
.bd-ipoe .bd-badge.bd-ghost {
  background: rgba(0, 212, 255, .08); color: var(--bdi-accent);
  border: 1px solid var(--bdi-rule-strong);
}
.bd-ipoe .bd-chip {
  display: inline-block; background: var(--bdi-raised); color: var(--bdi-accent);
  font-family: var(--bdi-mono); font-size: .82em; padding: 2px 8px; border-radius: 5px;
  border: 1px solid var(--bdi-rule);
}

/* ---- Buttons ---- */
.bd-ipoe .bd-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: 1rem; padding: 14px 24px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.bd-ipoe .bd-btn:hover { text-decoration: none; }
.bd-ipoe .bd-btn:active { transform: translateY(1px); }
.bd-ipoe .bd-btn-primary {
  background: var(--bdi-accent); color: var(--bdi-bg);
  box-shadow: 0 0 24px rgba(0, 212, 255, .22);
}
.bd-ipoe .bd-btn-primary:hover { background: var(--bdi-accent-dim); }
.bd-ipoe .bd-btn-ghost {
  background: transparent; color: var(--bdi-text); border-color: var(--bdi-rule-strong);
}
.bd-ipoe .bd-btn-ghost:hover { background: rgba(0, 212, 255, .08); }
.bd-ipoe .bd-btn-outline {
  background: transparent; color: var(--bdi-accent); border-color: var(--bdi-accent);
}
.bd-ipoe .bd-btn-outline:hover { background: rgba(0, 212, 255, .10); }
.bd-ipoe .bd-btn-lg { font-size: 1.06rem; padding: 16px 28px; }

/* ---- Hero ---- */
.bd-ipoe .bd-hero {
  position: relative; overflow: hidden; color: var(--bdi-text);
  background:
    var(--gradient-glow, radial-gradient(ellipse at center, rgba(0,212,255,.15) 0%, transparent 70%)) no-repeat 80% -20% / 1200px 600px,
    var(--gradient-hero, linear-gradient(135deg, #0A0E1A 0%, #0F1629 50%, #1A0A2E 100%));
  border-bottom: 1px solid var(--bdi-rule);
}
.bd-ipoe .bd-hero .bd-wrap { padding-top: 76px; padding-bottom: 76px; }
.bd-ipoe .bd-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.bd-ipoe .bd-hero .bd-kicker { color: var(--bdi-accent); }
.bd-ipoe .bd-hero h1 { font-size: 3.1rem; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 20px; }
.bd-ipoe .bd-hero h1 .bd-accent { color: var(--bdi-accent); }
.bd-ipoe .bd-hero .bd-subhead { font-size: 1.24rem; color: var(--bdi-muted); max-width: 34ch; margin-bottom: 32px; }
.bd-ipoe .bd-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 26px; }
.bd-ipoe .bd-hero-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .93rem; }
.bd-ipoe .bd-hero-links a { color: var(--bdi-muted); font-weight: 600; }
.bd-ipoe .bd-hero-links a:hover { color: var(--bdi-accent); }
.bd-ipoe .bd-hero-badges { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }

.bd-ipoe .bd-hero-panel {
  background: var(--bdi-card); border: 1px solid var(--bdi-rule);
  border-radius: var(--bdi-radius-lg); padding: 22px; box-shadow: var(--bdi-shadow);
}
.bd-ipoe .bd-hero-panel svg { display: block; width: 100%; height: auto; }

/* Stat strip */
.bd-ipoe .bd-stat-strip {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bdi-rule);
}
.bd-ipoe .bd-stat { min-width: 120px; }
.bd-ipoe .bd-stat .bd-num { font-size: 1.7rem; font-weight: 800; color: var(--bdi-accent); letter-spacing: -.01em; }
.bd-ipoe .bd-stat .bd-lbl { font-size: .82rem; color: var(--bdi-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

/* ---- Cards & grids ---- */
.bd-ipoe .bd-grid { display: grid; gap: 22px; }
.bd-ipoe .bd-grid.bd-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bd-ipoe .bd-grid.bd-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bd-ipoe .bd-grid.bd-cols-4 { grid-template-columns: repeat(4, 1fr); }

.bd-ipoe .bd-card {
  background: var(--bdi-card); border: 1px solid var(--bdi-rule);
  border-radius: var(--bdi-radius); padding: 26px; box-shadow: var(--bdi-shadow-sm);
}
.bd-ipoe .bd-card h3 { color: var(--bdi-text); font-size: 1.18rem; font-weight: 700; }
.bd-ipoe .bd-card p { color: var(--bdi-muted); margin-bottom: 0; }
.bd-ipoe .bd-card p + p { margin-top: .7em; }
.bd-ipoe .bd-card .bd-card-cta { margin-top: 16px; font-weight: 700; color: var(--bdi-accent); }
.bd-ipoe .bd-card.bd-link { transition: border-color .15s ease, box-shadow .15s ease; }
.bd-ipoe .bd-card.bd-link:hover { border-color: var(--bdi-rule-strong); box-shadow: var(--bdi-glow); text-decoration: none; }

.bd-ipoe .bd-product-card { display: flex; flex-direction: column; }
.bd-ipoe .bd-product-card .bd-tag {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--bdi-accent); margin-bottom: 10px;
}
.bd-ipoe .bd-product-card ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--bdi-muted); }
.bd-ipoe .bd-product-card li { margin: .3em 0; }
.bd-ipoe .bd-product-card .bd-card-cta { margin-top: auto; padding-top: 18px; }

/* Feature item with lead icon */
.bd-ipoe .bd-feature .bd-ic {
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--bdi-raised); border: 1px solid var(--bdi-rule);
  display: grid; place-items: center; margin-bottom: 14px; color: var(--bdi-accent);
}
.bd-ipoe .bd-feature .bd-ic svg { width: 22px; height: 22px; }
.bd-ipoe .bd-feature h3 { font-size: 1.06rem; color: var(--bdi-text); margin-bottom: .4em; }
.bd-ipoe .bd-feature p { color: var(--bdi-muted); font-size: .96rem; margin: 0; }

/* Two-column split */
.bd-ipoe .bd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bd-ipoe .bd-split.bd-narrow-left { grid-template-columns: .9fr 1.1fr; }
/* Grid items default to min-width: auto, so a track refuses to shrink below its
   content's min-content width. That defeats a nested overflow-x: auto — the
   .bd-table-wrap inside is not itself the grid item, so the item grows to fit
   the table (a nowrap <th> sets the floor) and the wrap never clamps or
   scrolls. min-width: 0 lets the track shrink so the wrap becomes the scroller. */
.bd-ipoe .bd-split > * { min-width: 0; }
.bd-ipoe .bd-split .bd-visual svg { width: 100%; height: auto; }
.bd-ipoe .bd-diagram-frame {
  background: var(--bdi-card); border: 1px solid var(--bdi-rule);
  border-radius: 12px; padding: 20px; box-shadow: var(--bdi-shadow-sm);
}
.bd-ipoe .bd-band .bd-diagram-frame { background: var(--bdi-surface); }

/* Numbered flow list */
.bd-ipoe .bd-flow-list { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.bd-ipoe .bd-flow-list li { position: relative; padding: 0 0 20px 52px; }
.bd-ipoe .bd-flow-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bdi-accent); color: var(--bdi-bg); font-weight: 700;
  display: grid; place-items: center; font-size: .95rem;
}
.bd-ipoe .bd-flow-list li:not(:last-child)::after {
  content: ""; position: absolute; left: 16px; top: 34px; bottom: 4px; width: 2px; background: var(--bdi-rule);
}
.bd-ipoe .bd-flow-list li h4 { margin: 4px 0 4px; font-size: 1.05rem; color: var(--bdi-text); }
.bd-ipoe .bd-flow-list li p { color: var(--bdi-muted); margin: 0; font-size: .96rem; }

/* Tick list */
.bd-ipoe .bd-ticklist { list-style: none; margin: 0; padding: 0; }
.bd-ipoe .bd-ticklist li { position: relative; padding: 6px 0 6px 30px; color: var(--bdi-text); }
.bd-ipoe .bd-ticklist li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 15px; height: 9px;
  border-left: 2.5px solid var(--bdi-green); border-bottom: 2.5px solid var(--bdi-green);
  transform: rotate(-45deg);
}

/* ---- Tables ---- */
.bd-ipoe .bd-table-wrap {
  overflow-x: auto; border: 1px solid var(--bdi-rule);
  border-radius: 10px; background: var(--bdi-band);
}
.bd-ipoe table.bd-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.bd-ipoe table.bd-table th,
.bd-ipoe table.bd-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--bdi-rule); vertical-align: top;
}
.bd-ipoe table.bd-table th {
  color: var(--bdi-accent); font-weight: 700;
  border-bottom: 2px solid var(--bdi-rule-strong); white-space: nowrap;
}
.bd-ipoe table.bd-table td { color: var(--bdi-muted); }
.bd-ipoe table.bd-table tr:last-child td { border-bottom: none; }
.bd-ipoe table.bd-table tbody tr:hover { background: var(--bdi-surface); }

.bd-ipoe .bd-dot-g,
.bd-ipoe .bd-dot-y,
.bd-ipoe .bd-dot-r {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
.bd-ipoe .bd-dot-g { background: var(--bdi-green); }
.bd-ipoe .bd-dot-y { background: var(--bdi-yellow); }
.bd-ipoe .bd-dot-r { background: var(--bdi-red); }

/* ---- Callout ---- */
.bd-ipoe .bd-callout {
  border-left: 4px solid var(--bdi-accent); background: var(--bdi-surface);
  padding: 18px 22px; border-radius: 0 10px 10px 0; margin: 8px 0 0;
}
.bd-ipoe .bd-callout .bd-t { font-weight: 700; color: var(--bdi-text); }
.bd-ipoe .bd-callout p { margin: .3em 0 0; color: var(--bdi-muted); }

/* ---- Roadmap ---- */
.bd-ipoe .bd-roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bd-ipoe .bd-roadmap .bd-col {
  background: var(--bdi-card); border: 1px solid var(--bdi-rule);
  border-radius: 12px; padding: 26px; box-shadow: var(--bdi-shadow-sm);
}
.bd-ipoe .bd-roadmap .bd-col.bd-today { border-top: 4px solid var(--bdi-green); }
.bd-ipoe .bd-roadmap .bd-col.bd-soon { border-top: 4px solid var(--bdi-accent); }
.bd-ipoe .bd-roadmap .bd-col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.14rem; margin-bottom: 14px; }
.bd-ipoe .bd-roadmap .bd-status {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; padding: 3px 9px; border-radius: 20px;
}
.bd-ipoe .bd-roadmap .bd-today .bd-status { background: rgba(63, 208, 122, .14); color: var(--bdi-green); }
.bd-ipoe .bd-roadmap .bd-soon .bd-status { background: rgba(0, 212, 255, .12); color: var(--bdi-accent); }
.bd-ipoe .bd-roadmap ul { margin: 0; padding: 0; list-style: none; }
.bd-ipoe .bd-roadmap li {
  padding: 9px 0; border-bottom: 1px solid var(--bdi-rule);
  color: var(--bdi-muted); font-size: .96rem;
}
.bd-ipoe .bd-roadmap li:last-child { border-bottom: none; }
.bd-ipoe .bd-roadmap li b { color: var(--bdi-text); }

/* ---- CTA band ---- */
.bd-ipoe .bd-cta-band {
  text-align: center; border-top: 1px solid var(--bdi-rule);
  background:
    var(--gradient-glow, radial-gradient(ellipse at center, rgba(0,212,255,.15) 0%, transparent 70%)) no-repeat 50% 0 / 1000px 460px,
    var(--bdi-band);
}
.bd-ipoe .bd-cta-band h2 { color: var(--bdi-text); font-size: 2.1rem; font-weight: 800; margin-bottom: 14px; }
.bd-ipoe .bd-cta-band h2::after { display: none; }
.bd-ipoe .bd-cta-band p { color: var(--bdi-muted); font-size: 1.12rem; max-width: 620px; margin: 0 auto 28px; }
.bd-ipoe .bd-cta-band .bd-hero-cta { justify-content: center; }
.bd-ipoe .bd-cta-band .bd-hero-links { justify-content: center; margin-top: 20px; }

/* Both the hero and the bottom CTA button keep the existing gate hook (rc-cta), so style it
   at the block level to match bd-btn-primary, wherever it appears inside .bd-ipoe. */
.bd-ipoe .rc-cta {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: 1.06rem; padding: 16px 28px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  background: var(--bdi-accent); color: var(--bdi-bg);
  box-shadow: 0 0 24px rgba(0, 212, 255, .22);
  font-family: var(--bdi-font);
}
.bd-ipoe .rc-cta:hover { background: var(--bdi-accent-dim); }

/* ---- SVG diagram label classes ----
   Only .bd-lbl-strong declares a fill, matching the mockup's own rules. A CSS
   declaration beats an SVG presentation attribute, so a fill here overrides
   the per-label fill= the converter writes and flattens deliberate accent
   labels to body grey. Every .bd-lbl / .bd-lbl-sm in the corpus carries its
   own fill attribute, so they resolve from the converter's output. */
.bd-ipoe svg .bd-lbl-strong { font: 700 13px var(--bdi-font); fill: var(--bdi-text); }
.bd-ipoe svg .bd-lbl { font: 600 12px var(--bdi-font); }
.bd-ipoe svg .bd-lbl-sm { font: 500 11px var(--bdi-font); }

/* =========================================================
   Divi containment
   Divi applies its own typography, link colors, and list
   styling to descendants of the Code module. Reassert ours
   here. Full-bleed row padding is handled by the section/row
   shortcode attributes (see to_divi.py), not by this file.
   ========================================================= */
.bd-ipoe { width: 100%; }
.bd-ipoe ul,
.bd-ipoe ol { line-height: 1.55; }
.bd-ipoe li { list-style-position: outside; }
.bd-ipoe h1, .bd-ipoe h2, .bd-ipoe h3, .bd-ipoe h4 { padding: 0; font-family: var(--bdi-font); }
.bd-ipoe p:last-child { margin-bottom: 0; }
.bd-ipoe a:hover { color: var(--bdi-accent-dim); }
.bd-ipoe button { font-family: inherit; }

/* =========================================================
   Responsive — breakpoints carried from the mockup, plus a
   few additions (.bd-cta-band h2, .bd-stat-strip gap, and
   .bd-hero .bd-wrap padding at 760px) not present there.
   ========================================================= */
@media (max-width: 940px) {
  .bd-ipoe .bd-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .bd-ipoe .bd-hero-panel { order: 2; }
  .bd-ipoe .bd-split,
  .bd-ipoe .bd-split.bd-narrow-left { grid-template-columns: 1fr; gap: 30px; }
  .bd-ipoe .bd-grid.bd-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .bd-ipoe { font-size: 16px; }
  .bd-ipoe .bd-hero h1 { font-size: 2.3rem; }
  .bd-ipoe .bd-section { padding: 52px 0; }
  .bd-ipoe .bd-section h2 { font-size: 1.65rem; }
  .bd-ipoe .bd-cta-band h2 { font-size: 1.8rem; }
  .bd-ipoe .bd-grid.bd-cols-2,
  .bd-ipoe .bd-grid.bd-cols-3,
  .bd-ipoe .bd-grid.bd-cols-4 { grid-template-columns: 1fr; }
  .bd-ipoe .bd-roadmap { grid-template-columns: 1fr; }
  .bd-ipoe .bd-stat-strip { gap: 14px 28px; }
  .bd-ipoe .bd-hero .bd-wrap { padding-top: 52px; padding-bottom: 52px; }
}

@media (max-width: 420px) {
  .bd-ipoe .bd-hero h1 { font-size: 2rem; }
  .bd-ipoe .bd-hero-cta .bd-btn,
  .bd-ipoe .rc-cta { width: 100%; justify-content: center; }
  .bd-ipoe .bd-wrap { padding: 0 18px; }
}

/* =========================================================
   Semantic QoS colour reassertion — LIVE-DEPLOY FIX.
   Do not simplify. Read this before editing the selectors.

   On the live site the Divi Customizer emits a global inline
   <style> block (id et-divi-customizer-preview-global-cached-
   inline-styles) that contains, among others:

     h1,h2,h3,h4,h5,h6,… { color: var(--text-primary)!important }
     .bd-card h3, .bd-card .et_pb_module_header {
        color: var(--text-primary)!important; … }

   Those declarations are !important, so they beat a PLAIN
   inline style="color:…" on the element. Three headings on the
   IPoE page (the fault / degraded / ok status cards) carry
   style="color:var(--bdi-red|yellow|green)" and the colour is
   SEMANTIC — the heading names a severity and the colour is
   what encodes it — so losing it is a real defect, not a
   cosmetic one. Live, all three rendered as #E8F4F8.

   This block is deliberately the ONLY thing we fight the site
   design system over. The heading name collision on
   .bd-section-head h2 / .bd-card h3 (site: 2.25rem/700 and
   1.25rem/600, ours: 2rem/800 and 1.18rem/700) is INTENDED —
   these pages are meant to adopt the site's typography. Do not
   add !important to size/weight, and do not rename the classes.

   Specificity, worked out rather than guessed. The affected
   elements ARE .bd-card h3 elements, so we must out-specify
   our own ".bd-ipoe .bd-card h3" (0,2,1) as well as the site's
   ".bd-card h3" (0,1,1) and "h1..h6" (0,0,1), and carry
   !important to compete in the important-author cascade at all:

     .bd-ipoe.bd-ipoe [style*="--bdi-red"]  ->  (0,3,0)
       ids            = 0
       class-like     = 3  (.bd-ipoe, .bd-ipoe, [style*=…])
       type/element   = 0

   (0,3,0) vs (0,2,1): the class column is compared before the
   element column, 3 > 2, so we win regardless of source order
   — which matters because the Customizer's <style> position
   relative to this stylesheet is not under our control.

   The repeated .bd-ipoe is the specificity bump and is load
   bearing; de-duplicating it drops us to (0,2,0) and the fix
   silently stops working. Keying off the inline token rather
   than a helper class keeps the rule tied to the authoring
   intent already present in the deployed markup.
   ========================================================= */
.bd-ipoe.bd-ipoe [style*="--bdi-red"]    { color: var(--bdi-red)    !important; }
.bd-ipoe.bd-ipoe [style*="--bdi-yellow"] { color: var(--bdi-yellow) !important; }
.bd-ipoe.bd-ipoe [style*="--bdi-green"]  { color: var(--bdi-green)  !important; }

/* =========================================================
   Divi wrapper neutralisation — full-bleed bands (live-only defect)
   ---------------------------------------------------------
   These three pages were designed as full-bleed alternating
   background bands: the hero, then .bd-section / .bd-section.bd-band
   running edge to edge. Live they did not. Every section was inset
   to a 1280px centred column with 96px/32px padding.

   WHY. The site's Divi Customizer emits a global inline stylesheet
   (id="et-divi-customizer-global-cached-inline-styles") containing:

     .et_pb_section { padding: var(--section-pad-y) var(--section-pad-x) !important; }
     .et_pb_row     { max-width: var(--max-width) !important; }

   Both carry !important, so they beat the per-module shortcode
   attributes these pages were built with (custom_padding="0px||0px||true|false",
   width="100%", max_width="100%"). Measured live: .et_pb_row_0 computed
   max-width:1280px and .et_pb_section_0 computed padding:96px 32px.

   Two visible consequences, both real defects rather than cosmetic:
     1. The alternating bands read as inset panels floating on a dark
        page instead of full-width bands. Our blocks manage their own
        width themselves — .bd-wrap already does max-width + centring
        + 24px gutters — so the Divi wrappers must contribute nothing.
     2. The 96px of section padding ABOVE the hero left a band of flat
        near-black under the site header. That header is position:fixed
        with a translucent rgba(10,14,26,0.35) background and muted
        rgb(148,163,184) links; with nothing but flat black behind it the
        navigation is nearly invisible. On every other page the same
        header sits on a hero image and reads fine. Removing the top
        padding puts the hero's own gradient directly behind it.

   WHY body.bd-ipoe-page RATHER THAN .bd-ipoe. The wrappers being
   neutralised are ANCESTORS of .bd-ipoe, so no selector descending from
   the block wrapper can reach them. The plugin's body_class filter adds
   bd-ipoe-page on exactly the QBNG_IPOE_PAGE_IDS pages (and fails closed
   on an empty ID list, because is_page(array()) is TRUE in WordPress), so
   the blast radius is those three pages and nothing else. Per-page
   overrides of these globals are already established practice on this
   site — its own CSS carries
   ".page-id-4 .et_pb_row_8 { width:100%!important; max-width:100%!important;
   padding:0 var(--section-pad-x)!important }".

   SPECIFICITY. "body.bd-ipoe-page .et_pb_section" is (0,2,1) against the
   Customizer's ".et_pb_section" (0,1,0); both are !important, so ours
   wins on specificity and not on source order — which matters because the
   Customizer <style> block's position relative to this stylesheet is not
   under our control.

   width:100% is set alongside max-width because Divi's own stylesheet
   gives .et_pb_row a percentage width (80%) that max-width alone would
   not undo.

   .et_pb_column is deliberately NOT listed: it carries no padding of its
   own under this cascade (verified — it computes 0px, and with the two
   rules below .bd-hero reaches x=0 and the full viewport width), so a
   rule for it would be speculative.

   DO NOT touch --section-pad-y / --section-pad-x / --max-width. They are
   the site's design tokens and every other page depends on them; this
   block neutralises their EFFECT on three pages only.
   ========================================================= */
body.bd-ipoe-page .et_pb_section { padding: 0 !important; }
body.bd-ipoe-page .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}