.home-hero { padding: clamp(7.5rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(34rem, 1.18fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.home-hero__copy, .home-hero__copy p { max-width: 44rem; }
.home-hero h1 { margin: .75rem 0 1.5rem; }
.home-hero__support { color: var(--be-navy-200); font-size: 1.05rem; }
.eyebrow { color: var(--be-text-primary); font-size: .75rem; font-weight: var(--be-fw-body-strong); letter-spacing: .16em; margin-bottom: 1rem; max-width: none; text-transform: uppercase; }
.section--dark .eyebrow { color: var(--be-bright-aqua); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.button { border: 1px solid var(--be-terracotta); display: inline-flex; justify-content: center; padding: .75rem 1.1rem; font-weight: var(--be-fw-body-strong); }
.button--primary { background: var(--be-terracotta); color: var(--be-navy); }
.button--secondary { border-color: var(--be-bright-aqua); color: var(--be-bright-aqua); }
.button:focus-visible, .audience-grid a:focus-visible { outline: 2px solid var(--be-bright-aqua); outline-offset: 3px; }
.assurance-line { border-left: 3px solid var(--be-bright-aqua); color: var(--be-text-on-dark); font-weight: var(--be-fw-body-strong); padding-left: 1rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; margin-top: 1.5rem; }
.hero-proof li { color: var(--be-navy-200); font-size: .78rem; }

.decision-engine { border: 1px solid var(--be-navy-700); background: var(--be-navy); color: var(--be-text-on-dark); padding: clamp(1rem, 3vw, 2rem); }
.decision-engine figcaption { margin-bottom: 1.5rem; }
.decision-engine figcaption h2 { font-size: 1.25rem; }
.decision-engine figcaption p { color: var(--be-navy-200); font-size: .82rem; margin-top: .5rem; }
.decision-engine__flow { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(7.5rem, .8fr) minmax(7.5rem, .75fr) minmax(6.5rem, .8fr); gap: .65rem; align-items: center; }
.decision-engine__inputs, .decision-engine__outcomes { display: grid; gap: .45rem; list-style: none; }
.decision-engine__inputs li, .decision-engine__outcomes li { border: 1px solid var(--be-navy-700); padding: .55rem; font-size: .68rem; }
.decision-engine__outcomes li { border-left: 3px solid var(--be-bright-aqua); font-weight: var(--be-fw-body-strong); letter-spacing: .08em; }
.decision-engine__core { background: var(--be-pale-aqua); color: var(--be-navy); padding: 1rem .65rem; text-align: center; }
.decision-engine__core span, .decision-engine__gate span { display: block; margin-top: .35rem; font-size: .65rem; }
.decision-engine__gate { border: 2px solid var(--be-terracotta); color: var(--be-sand); padding: .75rem .55rem; text-align: center; }

.split-intro, .platform-grid, .government-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.split-intro p + p, .government-grid p + p { margin-top: 1.25rem; }
.pull-quote { border-left: 5px solid var(--be-terracotta); font-family: var(--be-font-display); font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.25; margin: 3rem 0; max-width: 55rem; padding-left: 1.5rem; }
.value-pool { border-top: 1px solid var(--be-border); padding-top: 2rem; }
.value-pool__bar { display: grid; grid-template-columns: 85fr 15fr; height: 2rem; }
.value-pool__primary { background: var(--be-navy); }
.value-pool__enabled { background: var(--be-terracotta); }
.value-pool__labels { display: grid; grid-template-columns: 85fr 15fr; gap: 1rem; margin-top: 1rem; }
.value-pool__labels strong { display: block; font-family: var(--be-font-display); font-size: 2rem; }
.value-pool__labels p { font-size: .8rem; }
.section-lead { font-size: 1.08rem; margin-top: 1.5rem; max-width: 52rem; }
.metric-grid, .audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 3rem; background: var(--be-border); border: 1px solid var(--be-border); }
.metric, .audience-grid article { background: var(--be-bg-page); padding: clamp(1.25rem, 3vw, 2rem); }
.metric strong { color: var(--be-text-primary); display: block; font-family: var(--be-font-display); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; }
.metric p { margin-top: .75rem; }
.source-label { display: block; color: var(--be-text-secondary); font-size: .75rem; margin-top: .6rem; }
.source-label a, .government-grid a { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .18em; }
.source-label a:focus-visible, .government-grid a:focus-visible { outline: 2px solid var(--be-navy); outline-offset: 3px; }
.closing-line { font-family: var(--be-font-display); font-size: 1.25rem; font-weight: var(--be-fw-display-strong); margin-top: 2.5rem; max-width: 52rem; }

.platform-grid { margin-top: 3rem; }
.platform-grid > article { border-top: 3px solid var(--be-bright-aqua); padding-top: 1.5rem; }
.definition-stack, .rule-list { margin-top: 1.5rem; }
.definition-stack div, .rule-list li { border-top: 1px solid var(--be-navy-700); padding: 1rem 0; }
.definition-stack dt { color: var(--be-bright-aqua); font-weight: var(--be-fw-body-strong); }
.definition-stack dd, .rule-list li { color: var(--be-navy-200); }
.assurance-ribbon { border: 1px solid var(--be-terracotta); color: var(--be-text-on-dark); margin-top: 1rem; padding: 1rem; }
.outcomes-block { border-top: 1px solid var(--be-navy-700); margin-top: 3rem; padding-top: 2rem; }
.outcome-grid, .principle-grid, .offering-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; list-style: none; margin-top: 1.5rem; }
.outcome-grid li, .offering-grid li { border-top: 3px solid var(--be-bright-aqua); background: var(--be-bg-page); color: var(--be-navy); padding: 1rem; }
.outcome-grid strong, .outcome-grid span, .principle-grid strong, .principle-grid span, .offering-grid strong, .offering-grid span { display: block; }
.outcome-grid span, .principle-grid span, .offering-grid span { font-size: .78rem; margin-top: .5rem; }
.principle-grid li { border-top: 3px solid var(--be-teal); padding: 1rem; }
.callout { border-left: 5px solid var(--be-terracotta); font-family: var(--be-font-display); font-size: 1.2rem; font-weight: var(--be-fw-display-strong); margin-top: 2.5rem; max-width: 52rem; padding-left: 1.25rem; }
.audience-grid article { border-top: 3px solid var(--be-teal); display: flex; flex-direction: column; }
.card-kicker { color: var(--be-text-primary); font-size: .75rem; font-weight: var(--be-fw-body-strong); letter-spacing: .08em; text-transform: uppercase; }
.audience-grid h3 { margin: 1rem 0; }
.audience-grid a { color: var(--be-text-primary); font-weight: var(--be-fw-body-strong); margin-top: auto; padding-top: 1.5rem; text-decoration: underline; text-underline-offset: .2em; }
.proof-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 3rem 0 1rem; }
.proof-list li { border-left: 3px solid var(--be-teal); padding: 1rem; }
.offering-grid li { border-color: var(--be-terracotta); }
.boundary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 3rem 0; background: var(--be-border); border: 1px solid var(--be-border); }
.boundary-list p { background: var(--be-bg-page); padding: 1.5rem; max-width: none; }
.boundary-list strong { display: block; }
.assurance-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 3rem 0; }
.assurance-chain li { background: var(--be-navy); color: var(--be-sand); padding: 1rem; position: relative; text-align: center; }
.assurance-chain li:nth-child(even) { background: var(--be-teal); color: var(--be-navy); }
.assurance-chain li:not(:last-child)::after { content: "→"; color: var(--be-bright-aqua); position: absolute; right: -.45rem; z-index: 1; }
.closing-cta p { color: var(--be-navy-200); margin-top: 1.25rem; }
.trust-line { border-top: 1px solid var(--be-navy-700); font-size: .8rem; padding-top: 1rem; }

@media (max-width: 980px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .decision-engine { max-width: 46rem; }
  .outcome-grid, .principle-grid, .offering-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-hero { padding-top: 7rem; }
  .decision-engine__flow, .split-intro, .platform-grid, .government-grid, .metric-grid, .audience-grid, .boundary-list { grid-template-columns: 1fr; }
  .decision-engine__core, .decision-engine__gate { padding: .75rem; }
  .value-pool__labels { grid-template-columns: 1fr; }
  .outcome-grid, .principle-grid, .offering-grid, .proof-list, .assurance-chain { grid-template-columns: 1fr; }
  .assurance-chain li:not(:last-child)::after { bottom: -.8rem; left: 50%; right: auto; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .audience-grid a { transition: none; }
}

.platform-hero { padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem); }
.platform-hero__inner { max-width: 58rem; }
.platform-hero h1 { margin: .75rem 0 1.5rem; max-width: 55rem; }
.platform-hero__support { color: var(--be-navy-200); font-size: 1.08rem; max-width: 50rem; }

.platform-loop { border-color: var(--be-navy-700); }
.platform-loop__inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--be-navy-700); }
.platform-loop__inputs article { background: var(--be-pale-aqua); color: var(--be-navy); padding: 1rem; }
.platform-loop__inputs h3, .platform-loop__engine h3, .platform-loop__outputs h3 { font-size: .9rem; }
.platform-loop__inputs p, .platform-loop__engine p, .platform-loop__outputs p { font-size: .78rem; margin-top: .6rem; max-width: none; }
.platform-loop__engine { border-left: 4px solid var(--be-bright-aqua); margin-top: 1px; padding: 1.25rem; }
.platform-loop__engine p { color: var(--be-navy-200); }
.platform-loop__gate { border: 2px solid var(--be-terracotta); color: var(--be-sand); font-size: .75rem; letter-spacing: .12em; margin: 1rem auto; max-width: 15rem; padding: .75rem; text-align: center; }
.platform-loop__outputs { background: var(--be-sand); border-left: 4px solid var(--be-teal); color: var(--be-navy); padding: 1.25rem; }

.platform-outcomes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; list-style: none; margin-top: 2.5rem; }
.platform-outcomes li { background: var(--be-sand); border-top: 4px solid var(--be-bright-aqua); color: var(--be-navy); padding: 1.25rem; }
.platform-outcomes h3 { font-size: 1rem; }
.platform-outcomes p { font-size: .8rem; margin-top: 1rem; }
.platform-outcomes strong { color: var(--be-text-primary); }

.governed-ai-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); gap: clamp(2.5rem, 6vw, 6rem); }
.procurement-integrity { border-left: 5px solid var(--be-terracotta); margin-top: 2rem; padding-left: 1.25rem; }
.procurement-integrity a { color: var(--be-text-primary); font-weight: var(--be-fw-body-strong); text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .18em; }
.procurement-integrity a:focus-visible { outline: 2px solid var(--be-navy); outline-offset: 3px; }
.assurance-controls { list-style: decimal; margin: 0; padding-left: 2rem; }
.assurance-controls li { border-top: 1px solid var(--be-border); padding: 1rem .5rem 1rem .75rem; }
.assurance-controls li::marker { color: var(--be-text-primary); font-family: var(--be-font-display); font-size: 1.15rem; font-weight: var(--be-fw-display-strong); }

.evidence-action { border: 1px solid var(--be-border); margin: 2.5rem 0 1.5rem; }
.evidence-action h3 { background: var(--be-navy); color: var(--be-sand); padding: 1.25rem; }
.evidence-action dl div { display: grid; grid-template-columns: minmax(8rem, .35fr) minmax(0, 1.65fr); border-top: 1px solid var(--be-border); }
.evidence-action dt { color: var(--be-text-primary); font-weight: var(--be-fw-body-strong); padding: 1rem 1.25rem; }
.evidence-action dd { border-left: 1px solid var(--be-border); padding: 1rem 1.25rem; }
.evidence-action figcaption { color: var(--be-text-secondary); font-size: .8rem; padding: 1rem 1.25rem; }

.application-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 2.5rem 0; }
.application-options div { border-top: 3px solid var(--be-bright-aqua); padding: 1.25rem; }
.application-options dt { color: var(--be-bright-aqua); font-weight: var(--be-fw-body-strong); }
.application-options dd { color: var(--be-navy-200); margin-top: .65rem; }

@media (max-width: 980px) {
  .platform-loop__inputs, .platform-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governed-ai-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .platform-loop__inputs, .platform-outcomes, .application-options { grid-template-columns: 1fr; }
  .evidence-action dl div { grid-template-columns: 1fr; }
  .evidence-action dd { border-left: 0; padding-top: 0; }
}

.solution-chooser { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--be-border); border: 1px solid var(--be-border); }
.solution-chooser a { background: var(--be-bg-page); color: var(--be-text-primary); padding: 1.25rem; text-decoration: none; }
.solution-chooser a:hover { background: var(--be-pale-aqua); }
.solution-chooser a:focus-visible, .offering-card > .button:focus-visible { outline: 2px solid var(--be-navy); outline-offset: -4px; }
.solution-chooser strong { display: block; margin-top: .75rem; }
.choice-rule { border-left: 5px solid var(--be-terracotta); font-weight: var(--be-fw-body-strong); margin-top: 2rem; padding-left: 1.25rem; }

.offerings { display: grid; gap: 2rem; margin-top: 2.5rem; }
.offering-card { border: 1px solid var(--be-border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; padding: clamp(1.5rem, 4vw, 3rem); scroll-margin-top: 6rem; }
.offering-card__need, .offering-card h3, .offering-card__proposition, .offering-card__benefit, .offering-card > .button { grid-column: 1 / -1; }
.offering-card__need { color: var(--be-text-primary); font-size: .78rem; font-weight: var(--be-fw-body-strong); letter-spacing: .05em; text-transform: uppercase; }
.offering-card h3 { border-bottom: 4px solid var(--be-terracotta); margin-top: .85rem; padding-bottom: 1rem; }
.offering-card__proposition { font-family: var(--be-font-display); font-size: 1.2rem; font-weight: var(--be-fw-display-strong); margin: 1.25rem 0 2rem; max-width: 55rem; }
.offering-card__detail { border-top: 1px solid var(--be-border); padding: 1.25rem 0; }
.offering-card__detail h4, .offering-card__benefit h4 { color: var(--be-text-primary); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.offering-card__detail p, .offering-card__detail ul, .offering-card__benefit p { margin-top: .75rem; }
.offering-card__detail ul { list-style: disc; padding-left: 1.25rem; }
.offering-card__detail li + li { margin-top: .45rem; }
.offering-card__benefit { background: var(--be-pale-aqua); border-left: 4px solid var(--be-teal); margin: 1rem 0 1.5rem; padding: 1.25rem; }
.offering-card > .button { justify-self: start; }
.commercial-principle .callout { background: var(--be-navy); color: var(--be-sand); }

@media (max-width: 980px) {
  .solution-chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .solution-chooser, .offering-card { grid-template-columns: 1fr; }
}

.methodology-record { max-width: 72rem; }
.methodology-record h2 { margin-top: 3rem; }
.methodology-record h3 { margin-top: 2rem; }
.methodology-record ul, .methodology-record ol { padding-left: 1.5rem; }
.methodology-record li + li { margin-top: .5rem; }
.table-scroll { margin: 1.5rem 0 2.5rem; max-width: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--be-teal); outline-offset: 4px; }
.table-scroll table { border-collapse: collapse; min-width: 44rem; width: 100%; }
.table-scroll caption { font-family: var(--be-font-display); font-weight: var(--be-fw-display-strong); padding: 0 0 .75rem; text-align: left; }
.table-scroll th, .table-scroll td { border: 1px solid var(--be-border); padding: .75rem; text-align: left; vertical-align: top; }
.table-scroll th { background: var(--be-pale-aqua); color: var(--be-text-primary); }

/* ══════════════════════════════════════════════════════════════
   DIRECTION B — "THE INSTRUMENT" (Home + Platform rollout)
   Merged from design/direction-b/direction.css. Additive: every
   legacy rule above is retained; rules below extend or override
   only classes used exclusively by index.html and platform.html.
   All colours resolve to --be-* brand tokens (tints via color-mix
   of tokens only). No raw hex. Sharp corners everywhere.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Local derived tints (not brand tokens — named --dx- deliberately). */
  --dx-hair: color-mix(in srgb, var(--be-teal) 6%, transparent);
  --dx-hair-dark: color-mix(in srgb, var(--be-sand) 9%, transparent);
  --dx-line-dark: color-mix(in srgb, var(--be-sand) 16%, transparent);
  --dx-line-dark-soft: color-mix(in srgb, var(--be-sand) 20%, transparent);
  --dx-ink-dark: color-mix(in srgb, var(--be-sand) 88%, var(--be-navy));
  --dx-ink-dark-soft: color-mix(in srgb, var(--be-sand) 84%, var(--be-navy));
  --dx-shadow: 0 20px 44px -28px color-mix(in srgb, var(--be-navy) 58%, transparent);
}

/* ─── Layout primitives ────────────────────────────────────── */
.be-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.be-section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--be-sand);
  border-top: 1px solid var(--be-border-subtle);
}
.be-section--pale { background: var(--be-pale-aqua); border-top-color: color-mix(in srgb, var(--be-teal) 22%, transparent); }
.be-section--dark {
  background: var(--be-navy);
  color: var(--be-text-on-dark);
  border-top: 1px solid color-mix(in srgb, var(--be-sand) 12%, transparent);
}
/* Whisper-subtle instrumentation grid — LIGHT sections only. */
.be-section:not(.be-section--dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(to right, var(--dx-hair) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--dx-hair) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, black 8%, black 92%, transparent 100%);
}
.be-section > .be-container { position: relative; z-index: 1; }

/* ─── Typographic system ───────────────────────────────────── */
.be-eyebrow {
  font-family: var(--be-font-body);
  font-size: 0.8rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--be-navy-700);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  max-width: none;
}
.be-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--be-teal);
  flex: none;
}
.be-section--dark .be-eyebrow { color: var(--be-bright-aqua); }
.be-section--dark .be-eyebrow::before { background: var(--be-bright-aqua); }

.be-h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: var(--be-fw-display);
  line-height: 1.03;
  letter-spacing: -0.015em;
}
.be-h2,
/* Some headings are pinned by contract tests to an exact tag with no other
   attributes, so they cannot carry .be-h2 — give section headings the
   display scale by position too. Figure captions set their own size below. */
.be-section h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.be-h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: var(--be-fw-display-light);
}
.be-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--be-navy-700);
  max-width: 62ch;
}
.be-section--dark .be-lead { color: var(--dx-ink-dark); }
.be-body { max-width: 64ch; }
.be-body + .be-body { margin-top: 1rem; }
.be-section--dark .be-body { color: var(--be-text-on-dark); }
.be-closing {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.4;
  max-width: 60ch;
  margin-top: 2rem;
}
.be-source {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--be-navy-500);
  line-height: 1.5;
  max-width: none;
}
.be-source a { color: var(--be-navy); text-decoration: underline; text-underline-offset: 2px; }
.be-source a:hover { color: var(--be-aqua-600); }
.be-section--dark .be-source { color: var(--be-navy-200); }
.be-section--dark .be-source a { color: var(--be-bright-aqua); }
.be-fignum {
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--be-navy-500);
  margin-bottom: 0.75rem;
  max-width: none;
}
.be-section--dark .be-fignum { color: var(--be-bright-aqua); }
.be-pullquote {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  /* Owner feedback 2026-07-15 (H3): the banner read much larger than sibling
     callout styles; brought down to sit between .be-callout and the h2 scale. */
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30ch;
  padding-left: 1.5rem;
  border-left: 3px solid var(--be-terracotta);
}
.be-headblock { max-width: 52rem; }
/* Keeps a money range on one line (owner feedback H5/B1/B4). */
.be-nowrap { white-space: nowrap; }
.be-mt-sm { margin-top: 1rem; }
.be-mt-md { margin-top: 1.75rem; }
.be-mt-lg { margin-top: 2.5rem; }
.be-section .be-h2 + .be-lead, .be-section .be-h1 + .be-lead { margin-top: 1.25rem; }
.be-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.be-split__lead h2 { max-width: 18ch; }
.be-split p a { text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.18em; }
.be-section a:not(.button):focus-visible { outline: 3px solid var(--be-bright-aqua); outline-offset: 2px; }
.be-section:not(.be-section--dark) a:not(.button):focus-visible { outline-color: var(--be-navy); }

/* ─── Buttons — ONE system (overrides legacy .button rules) ── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  font-family: var(--be-font-body);
  font-size: 0.95rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.button--primary {
  background: var(--be-terracotta);
  color: var(--be-navy);
  border-color: var(--be-terracotta);
}
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--be-navy);
  color: var(--be-sand);
  border-color: var(--be-navy);
}
.button--primary:active { background: var(--be-navy-700); color: var(--be-sand); border-color: var(--be-navy-700); }
.button--secondary {
  background: transparent;
  color: var(--be-navy);
  border-color: var(--be-navy);
}
.button--secondary:hover,
.button--secondary:focus-visible { background: var(--be-navy); color: var(--be-sand); }
.button--secondary:active { background: var(--be-navy-700); color: var(--be-sand); }
.be-section--dark .button--secondary,
.section--dark .button--secondary { color: var(--be-sand); border-color: var(--be-sand); background: transparent; }
.be-section--dark .button--secondary:hover,
.be-section--dark .button--secondary:focus-visible,
.section--dark .button--secondary:hover,
.section--dark .button--secondary:focus-visible { background: var(--be-sand); color: var(--be-navy); }
.be-section--dark .button--primary:hover,
.be-section--dark .button--primary:focus-visible,
.section--dark .button--primary:hover,
.section--dark .button--primary:focus-visible { border-color: var(--be-sand); }
.button:focus-visible { outline: 3px solid var(--be-bright-aqua); outline-offset: 2px; }
.be-button-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* ─── Hero ─────────────────────────────────────────────────── */
.be-hero { padding-top: clamp(7.5rem, 12vw, 10rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.be-hero__copy { max-width: 62rem; }
.be-hero__copy h1 { margin-top: 0.25rem; }
.be-hero__support {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--be-sand) 90%, var(--be-navy));
  max-width: 58ch;
  margin-top: 1.25rem;
}
.be-assurance-line {
  margin-top: 1.6rem;
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--be-bright-aqua);
  letter-spacing: 0.01em;
  max-width: none;
}

/* Home hero backdrop (dot-matrix motif) removed 2026-07-17 at the owner's
   call — it read busy behind the copy. The generated artwork is parked at
   assets/imagery/hero-home.webp and its prompt is the Home hero block in
   docs/imagery-art-direction.md, so it can be reinstated without regenerating.
   The hero is plain navy in the meantime. */

/* ─── Hero method strip, outcome and delivery line ─────────── */
.be-hero__method-label { margin-top: 2rem; }
.be-hero__method {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0.5rem 0 0;
  padding: 0;
  max-width: 58ch;
}
.be-hero__method li {
  font-size: 0.9rem;
  font-weight: var(--be-fw-body-strong);
  letter-spacing: 0.02em;
  color: var(--be-sand);
}
/* Separator trails its own item, so a wrap leaves the "·" at the end of a
   line rather than orphaning it at the start of the next one. */
.be-hero__method li:not(:last-child)::after {
  content: "·";
  margin-left: 0.85rem;
  color: var(--be-bright-aqua);
}
.be-hero__outcome {
  margin-top: 1.75rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--dx-ink-dark);
  max-width: 58ch;
}
.be-hero__apply {
  margin-top: 0.9rem;
  font-size: 1rem;          /* body prose — holds the 16px floor (BEP-599) */
  color: var(--be-navy-200);
  max-width: 58ch;
}

/* ─── Decision-engine band ──────────────────────────────────
   The band sits on pale aqua so it alternates against the navy hero above and
   the sand section below. The diagram itself keeps a navy canvas: the SVG
   grammar is sand-on-navy (.be-svg-label, .be-arrow-sand), and
   .decision-engine__panel already paints its own navy ground — so only the
   caption furniture *outside* the panel needs light-background colours. */
/* The figure's own margin-top existed to separate it from the hero copy it used
   to sit beneath. Now that it opens its own band, that margin stacked on the
   section padding and made this the widest gap on the page. */
.be-section--engine .decision-engine { margin-top: 0; }
.be-section--engine .decision-engine { color: var(--be-text-primary); }
.be-section--engine .decision-engine figcaption p { color: var(--be-navy-700); }
.be-section--engine .decision-engine__more a { color: var(--be-navy); }
.be-section--engine .decision-engine__more a:hover { color: var(--be-aqua-600); }

/* ─── Decision engine (Home hero figure) — instrument panel ── */
.decision-engine {
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  color: var(--be-text-on-dark);
  max-width: none;
}
.decision-engine figcaption { max-width: 64ch; margin-bottom: 1.75rem; }
.decision-engine figcaption h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.decision-engine figcaption p { color: var(--dx-ink-dark-soft); font-size: 1rem; margin-top: 0.85rem; }
.decision-engine__panel {
  border: 1px solid var(--dx-line-dark);
  background:
    linear-gradient(color-mix(in srgb, var(--be-sand) 3%, transparent), color-mix(in srgb, var(--be-sand) 3%, transparent)),
    var(--be-navy);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  position: relative;
}
.decision-engine__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--dx-hair-dark) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, var(--dx-hair-dark) 0 1px, transparent 1px 44px);
}
.decision-engine__panel > * { position: relative; }
.decision-engine__svg { display: block; width: 100%; height: auto; font-family: var(--be-font-body); }

/* SVG element grammar (all colours via tokens) */
.be-svg-node { fill: color-mix(in srgb, var(--be-sand) 5%, transparent); stroke: var(--be-navy-200); stroke-width: 1; }
.be-svg-node--input { stroke: color-mix(in srgb, var(--be-bright-aqua) 75%, transparent); }
.be-svg-core { fill: color-mix(in srgb, var(--be-sand) 7%, transparent); stroke: var(--be-sand); stroke-width: 1.5; }
.be-svg-gate { fill: color-mix(in srgb, var(--be-terracotta) 12%, transparent); stroke: var(--be-terracotta); stroke-width: 2; }
.be-svg-gate-inner { fill: none; stroke: color-mix(in srgb, var(--be-terracotta) 55%, transparent); stroke-width: 1; }
.be-lane { fill: none; stroke: var(--be-bright-aqua); stroke-width: 1.5; }
.be-trace { fill: none; stroke: color-mix(in srgb, var(--be-sand) 55%, transparent); stroke-width: 1; }
.be-svg-tick { stroke: color-mix(in srgb, var(--be-sand) 40%, transparent); stroke-width: 1; }
.be-arrow-aqua { fill: var(--be-bright-aqua); }
.be-arrow-sand { fill: var(--be-sand); }
.be-svg-strong { fill: var(--be-sand); font-size: 24px; font-weight: 700; letter-spacing: 0.05em; }
.be-svg-label  { fill: var(--be-sand); font-size: 20px; font-weight: 600; letter-spacing: 0.08em; }
.be-svg-sub    { fill: var(--be-navy-200); font-size: 18px; font-weight: 500; letter-spacing: 0.02em; }
.be-svg-index  { fill: var(--be-bright-aqua); font-size: 16px; font-weight: 600; letter-spacing: 0.16em; }
.be-svg-index--gate { fill: var(--be-terracotta); }
.be-svg-gatelabel { fill: var(--be-terracotta); font-size: 24px; font-weight: 700; letter-spacing: 0.06em; }
.be-svg-gatesub   { fill: color-mix(in srgb, var(--be-terracotta) 82%, var(--be-sand)); font-size: 18px; font-weight: 500; letter-spacing: 0.03em; }

/* Semantic flow — hidden on desktop (decorative SVG shows), shown below 1080px */
.decision-engine__flow { display: none; }
.decision-engine__inputs { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.decision-engine__inputs li {
  border: 1px solid color-mix(in srgb, var(--be-bright-aqua) 55%, transparent);
  background: color-mix(in srgb, var(--be-sand) 4%, transparent);
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  color: var(--be-sand);
}
.decision-engine__join {
  width: 2px;
  height: 26px;
  margin: 0.35rem auto;
  background: var(--be-bright-aqua);
  position: relative;
}
.decision-engine__join::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--be-bright-aqua);
}
.decision-engine__join--flow { background: color-mix(in srgb, var(--be-sand) 55%, transparent); }
.decision-engine__join--flow::after { border-top-color: color-mix(in srgb, var(--be-sand) 55%, transparent); }
.decision-engine__core {
  background: transparent;
  border: 1px solid var(--be-sand);
  color: var(--be-sand);
  padding: 0.9rem 1rem;
  text-align: center;
}
.decision-engine__core strong { font-family: var(--be-font-display); font-weight: var(--be-fw-display); font-size: 1.1rem; letter-spacing: 0.04em; }
.decision-engine__core span { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: var(--be-navy-200); }
.decision-engine__gate {
  border: 2px solid var(--be-terracotta);
  background: color-mix(in srgb, var(--be-terracotta) 10%, transparent);
  color: var(--be-terracotta);
  padding: 0.9rem 1rem;
  text-align: center;
}
.decision-engine__gate strong { font-family: var(--be-font-display); font-weight: var(--be-fw-display); font-size: 1.15rem; letter-spacing: 0.05em; }
.decision-engine__gate span { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: color-mix(in srgb, var(--be-terracotta) 80%, var(--be-sand)); }

/* The tested ol is the real, visible outcome rail (desktop: horizontal) */
.decision-engine__outcomes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 2rem 0 0;
  position: relative;
}
.decision-engine__outcomes::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: color-mix(in srgb, var(--be-sand) 45%, transparent);
}
.decision-engine__outcomes li {
  border: 0;
  padding: 0 0.9rem 0 0;
  position: relative;
  font-size: 0.9rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.12em;
  color: var(--be-sand);
}
.decision-engine__outcomes li::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--be-bright-aqua);
  background: var(--be-navy);
}
.decision-engine__outcomes li::after {
  content: "";
  position: absolute;
  top: calc(-2rem + 5px);
  left: 5px;
  width: 8px;
  height: 8px;
  background: var(--be-bright-aqua);
}

/* ─── Value-pool gauge (85 / 15) — Direction B restyle ─────── */
.value-pool { border-top: 0; padding-top: 0; margin-top: 2.5rem; max-width: 60rem; }
.value-pool__bar {
  display: flex;
  grid-template-columns: none;
  height: 3.25rem;
  border: 1px solid var(--be-navy-200);
  background: var(--be-sand);
}
.value-pool__primary { flex: 0 0 85%; background: var(--be-navy); position: relative; }
.value-pool__enabled { flex: 0 0 15%; background: color-mix(in srgb, var(--be-bright-aqua) 40%, var(--be-pale-aqua)); position: relative; border-left: 1px solid var(--be-navy-200); }
.value-pool__primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--be-sand) 14%, transparent) 0 1px, transparent 1px 28px);
}
.value-pool__enabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--be-navy) 12%, transparent) 0 1px, transparent 1px 28px);
}
.value-pool__labels { display: grid; grid-template-columns: 85fr 15fr; gap: 1.5rem; margin-top: 1.25rem; }
.value-pool__labels > div { padding-top: 0.85rem; border-top: 2px solid var(--be-navy); }
.value-pool__labels > div:last-child { border-top-color: var(--be-teal); }
.value-pool__labels strong {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1;
}
.value-pool__labels p { font-size: 0.95rem; color: var(--be-navy-700); max-width: none; }

/* ─── Readout band (stat instruments) ──────────────────────── */
.be-readouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-block: 2.5rem;
  border-top: 2px solid var(--be-navy);
}
.be-readouts--duo { grid-template-columns: repeat(2, 1fr); max-width: 56rem; margin-bottom: 1.5rem; }
/* Uniform build-proof grid (owner feedback 2026-07-16 round 2): every platform
   point in the same readout format, a step smaller than the flagship pair. */
.be-readouts--build { grid-template-columns: repeat(3, 1fr); margin-bottom: 1.5rem; }
.be-readouts--build .be-readout:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.be-readouts--build .be-readout__val { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
@media (max-width: 880px) {
  .be-readouts--build { grid-template-columns: 1fr; }
  .be-readouts--build .be-readout { border-left: 0; padding-left: 0; }
}
.be-readout { padding: 1.75rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--be-navy-100); }
.be-readout + .be-readout { border-left: 1px solid var(--be-navy-100); padding-left: 1.5rem; }
.be-readout__val {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.95;
  color: var(--be-navy);
  display: block;
  /* A readout figure must never wrap (owner feedback rounds 1+2). */
  white-space: nowrap;
}
.be-readout__gauge {
  height: 4px;
  margin: 0.9rem 0;
  background:
    linear-gradient(to right, var(--be-teal) 0, var(--be-teal) 100%) left / var(--fill, 60%) 100% no-repeat,
    color-mix(in srgb, var(--be-navy) 12%, transparent);
}
.be-readout__cap { font-size: 0.95rem; color: var(--be-navy-700); display: block; margin-bottom: 0.5rem; }
.be-readout__src {
  display: block;
  font-size: 0.78rem;
  font-weight: var(--be-fw-body-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--be-navy-500);
}
.be-readout__src a { color: var(--be-navy); text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: 0.02em; }
.be-readout__src a:hover { color: var(--be-aqua-600); }

/* ─── Ledger rows (definition ledgers, offerings) ──────────── */
.be-ledger { border-top: 1px solid currentColor; }
.be-ledger__row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 1.25rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--be-navy-100);
  align-items: baseline;
}
.be-section--dark .be-ledger__row { border-bottom-color: var(--dx-line-dark); }
.be-ledger__row dt {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: 1.1rem;
  color: var(--be-navy);
}
.be-section--dark .be-ledger__row dt { color: var(--be-sand); }
.be-ledger__row dd { color: var(--be-navy-700); }
.be-section--dark .be-ledger__row dd { color: var(--dx-ink-dark-soft); }
.be-ledger__idx {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.16em;
  color: var(--be-teal);
  display: block;
  margin-bottom: 0.35rem;
}
.be-section--dark .be-ledger__idx { color: var(--be-bright-aqua); }

/* ─── Callout / ribbon / trust line ────────────────────────── */
.be-callout {
  margin-top: 2rem;
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--be-teal);
  background: color-mix(in srgb, var(--be-teal) 8%, transparent);
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  max-width: 60ch;
}
.be-section--dark .be-callout {
  border-left-color: var(--be-bright-aqua);
  background: color-mix(in srgb, var(--be-bright-aqua) 10%, transparent);
  color: var(--be-sand);
}
.be-ribbon {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--dx-line-dark-soft);
  font-size: 0.9rem;
  color: var(--dx-ink-dark);
  background: color-mix(in srgb, var(--be-sand) 4%, transparent);
  max-width: none;
}
.be-trust-line { margin-top: 1.75rem; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--be-bright-aqua); max-width: none; }

/* ─── Audience readout rows ─────────────────────────────────── */
.be-rows { border-top: 2px solid var(--be-navy); }
.be-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr auto;
  gap: 1rem 2.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--be-navy-100);
  align-items: start;
}
.be-row__kicker { font-size: 0.75rem; font-weight: var(--be-fw-body-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--be-navy-700); }
.be-row h3 { margin-bottom: 0.5rem; }
.be-row__body { color: var(--be-navy-700); max-width: 52ch; }
.be-row__body p { max-width: none; }
/* Owner feedback 2026-07-15 (H8): the underlined links on the right read as
   clutter; restyled as quiet uppercase actions with a trailing arrow. */
.be-row__link {
  align-self: center;
  white-space: nowrap;
  font-weight: var(--be-fw-body-bold);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy);
  text-decoration: none;
}
.be-row__link::after { content: " \2192"; color: var(--be-teal); }
.be-row__link:hover { color: var(--be-aqua-600); }
.be-row__link:hover::after { color: var(--be-aqua-600); }

/* ─── Proof rows (Home product-proof, no mock screen) ──────── */
.proof-rows { border: 1px solid var(--be-navy-100); list-style: none; margin: 1.5rem 0 1rem; padding: 0; max-width: 56rem; background: var(--be-bg-page); }
.proof-rows li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.85rem 0.95rem; font-size: 0.95rem; color: var(--be-navy); }
.proof-rows li + li { border-top: 1px solid var(--be-navy-100); }
.proof-rows li::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--be-teal); transform: translateY(1px); }

/* ─── Collapsed evidence sources (About, owner feedback A2) ── */
.evidence-action__details summary { cursor: pointer; }
.evidence-action__details summary h3 { display: inline; }
.evidence-action__details[open] summary { margin-bottom: 1rem; }

/* ─── Value-pool title (85/15 figure lead line) ────────────── */
.value-pool__title {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--be-navy);
  max-width: 44ch;
  margin-bottom: 1.25rem;
}

/* ─── Decision-engine caption link (Home → Platform) ───────── */
.decision-engine__more { margin-top: 0.75rem; max-width: none; }
.decision-engine__more a {
  color: var(--be-bright-aqua);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.decision-engine__more a:hover { color: var(--be-pale-aqua); }

/* ─── Principle chips (governed-AI summary; detail lives on Platform) ── */
.be-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.be-chips li {
  border: 1px solid var(--be-navy-200);
  border-left: 3px solid var(--be-teal);
  background: var(--be-bg-page);
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  font-weight: var(--be-fw-body-strong);
  color: var(--be-navy);
}

/* A body link that must read as clickable (owner feedback round 2). */
.be-more-link a {
  font-weight: var(--be-fw-body-bold);
  color: var(--be-navy);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}
.be-more-link a::after { content: " \2192"; color: var(--be-teal); text-decoration: none; display: inline-block; margin-left: 0.15em; }
.be-more-link a:hover { color: var(--be-aqua-600); }

/* ─── Stack orbit (BidEquity consumes the categories around it) ──
   Owner feedback 2026-07-15 (H11): no joining lines, no right-hand
   products column — BidEquity sits in the middle and the four provider
   categories sit around it. */
.stack-orbit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "c1 sys c2"
    "c3 sys c4";
  gap: 1rem;
  align-items: stretch;
}
.stack-orbit__categories { display: contents; }
.stack-orbit__cat {
  border: 1px solid var(--be-navy-200);
  background: var(--be-bg-page);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  list-style: none;
}
.stack-orbit__cat--1 { grid-area: c1; }
.stack-orbit__cat--2 { grid-area: c2; }
.stack-orbit__cat--3 { grid-area: c3; }
.stack-orbit__cat--4 { grid-area: c4; }
.stack-orbit__cat-name { font-size: 0.78rem; font-weight: var(--be-fw-body-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--be-navy); }
.stack-orbit__cat-desc { font-size: 0.88rem; color: var(--be-navy-700); }
.stack-orbit__cat-limit { font-size: 0.78rem; color: var(--be-navy-500); border-top: 1px solid var(--be-navy-100); padding-top: 0.4rem; margin-top: 0.25rem; }
.stack-orbit__cat-limit b { color: var(--be-navy); font-weight: var(--be-fw-body-bold); }
.stack-orbit__system {
  grid-area: sys;
  align-self: center;
  justify-self: stretch;
  background: var(--be-navy);
  color: var(--be-sand);
  padding: 2.25rem 1.5rem;
  text-align: center;
  box-shadow: var(--dx-shadow);
}
.stack-orbit__system-kicker { display: block; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--be-bright-aqua); margin-bottom: 0.5rem; }
.stack-orbit__system-name {
  display: block;
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.stack-orbit__system-sub { display: block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--be-navy-200); }
@media (max-width: 880px) {
  .stack-orbit {
    grid-template-columns: 1fr;
    grid-template-areas: "sys" "c1" "c2" "c3" "c4";
  }
  .stack-orbit__system { padding: 1.75rem 1.25rem; }
}

/* ─── Assurance / competition chain (SVG rail) ─────────────── */
.be-chain { margin-top: 2.5rem; }
.be-chain__svg { width: 100%; height: auto; display: block; }
.be-chain__svg .cl-line  { stroke: var(--be-navy-200); stroke-width: 1.5; fill: none; }
.be-chain__svg .cl-dot   { fill: var(--be-sand); stroke: var(--be-teal); stroke-width: 1.5; }
.be-chain__svg .cl-dot-i { fill: var(--be-teal); }
.be-chain__svg .cl-arrow { fill: var(--be-navy-500); }
.be-chain__labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}
.be-chain__labels li {
  font-weight: var(--be-fw-body-bold);
  font-size: 0.9rem;
  color: var(--be-navy);
  text-align: center;
  line-height: 1.3;
}

/* ─── Platform loop — instrument centrepiece (on pale) ─────── */
.platform-loop { border: 0; background: transparent; padding: 0; color: var(--be-navy); }
.platform-loop figcaption h2 { color: var(--be-navy); }
.platform-loop figcaption p { color: var(--be-navy-700); }
.platform-loop__panel {
  border: 1px solid var(--dx-line-dark);
  background:
    linear-gradient(color-mix(in srgb, var(--be-sand) 3%, transparent), color-mix(in srgb, var(--be-sand) 3%, transparent)),
    var(--be-navy);
  color: var(--be-sand);
  padding: clamp(1.1rem, 3vw, 2.25rem);
  position: relative;
}
.platform-loop__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--dx-hair-dark) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, var(--dx-hair-dark) 0 1px, transparent 1px 44px);
}
.platform-loop__panel > * { position: relative; }
.platform-loop__inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: transparent;
  border: 1px solid var(--dx-line-dark-soft);
}
.platform-loop__inputs article { background: transparent; color: var(--be-sand); padding: 1.2rem 1.25rem; }
.platform-loop__inputs article + article { border-left: 1px solid var(--dx-line-dark-soft); }
.platform-loop__inputs h3 { font-family: var(--be-font-display); font-size: 1.05rem; font-weight: var(--be-fw-display-light); color: var(--be-sand); }
.platform-loop__inputs p { font-size: 0.9rem; color: color-mix(in srgb, var(--be-sand) 82%, var(--be-navy)); margin-top: 0.5rem; max-width: none; }
.platform-loop__engine {
  border: 1px solid var(--dx-line-dark-soft);
  border-left: 1px solid var(--dx-line-dark-soft);
  margin-top: 0;
  padding: 1.25rem 1.35rem;
}
.platform-loop__engine h3, .platform-loop__outputs h3 { font-family: var(--be-font-display); font-size: 1.2rem; font-weight: var(--be-fw-display); color: var(--be-sand); }
.platform-loop__engine p { color: var(--dx-ink-dark); font-size: 0.95rem; margin-top: 0.6rem; max-width: 90ch; }
.platform-loop__gate {
  border: 2px solid var(--be-terracotta);
  background: color-mix(in srgb, var(--be-terracotta) 12%, transparent);
  color: var(--be-terracotta);
  font-size: inherit;
  letter-spacing: normal;
  margin: 0;
  max-width: none;
  padding: 1.15rem 1.35rem;
  text-align: center;
}
.platform-loop__gate strong {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: 0.05em;
  color: var(--be-terracotta);
}
.platform-loop__outputs {
  background: transparent;
  border: 1px solid var(--dx-line-dark-soft);
  border-left: 1px solid var(--dx-line-dark-soft);
  color: var(--be-sand);
  padding: 1.25rem 1.35rem;
}
.platform-loop__outputs p { color: var(--dx-ink-dark); font-size: 0.95rem; margin-top: 0.6rem; max-width: 90ch; }
.platform-loop__arrow { display: flex; justify-content: center; padding: 0.55rem 0; }
.platform-loop__arrow-mark { width: 2px; height: 22px; background: var(--be-bright-aqua); position: relative; display: block; }
.platform-loop__arrow--flow .platform-loop__arrow-mark { background: color-mix(in srgb, var(--be-sand) 55%, transparent); }
.platform-loop__arrow-mark::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--be-bright-aqua);
}
.platform-loop__arrow--flow .platform-loop__arrow-mark::after { border-top-color: color-mix(in srgb, var(--be-sand) 55%, transparent); }

/* ─── Platform outcomes — station rail restyle ─────────────── */
.platform-outcomes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  position: relative;
}
.platform-outcomes::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: color-mix(in srgb, var(--be-sand) 45%, transparent);
}
.platform-outcomes li {
  background: transparent;
  border-top: 0;
  color: var(--be-text-on-dark);
  padding: 0 0.9rem 0 0;
  position: relative;
}
.platform-outcomes li:last-child { padding-right: 0; }
.platform-outcomes h3 {
  font-family: var(--be-font-body);
  font-weight: var(--be-fw-body-bold);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}
.platform-outcomes p { font-size: 0.9rem; margin-top: 0; color: var(--dx-ink-dark-soft); max-width: none; }
.platform-outcomes p + p { margin-top: 0.75rem; }
.platform-outcomes__products {
  border-top: 1px solid var(--dx-line-dark);
  padding-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--be-navy-200);
  line-height: 1.5;
}
.platform-outcomes strong {
  display: block;
  color: var(--be-bright-aqua);
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
}

/* ─── Lifecycle glyphs — engineered line-marks on the outcomes rail ─
   Direction B icon set (icons/lifecycle.svg), applied only to the five
   platform lifecycle stages. Marks are decorative (aria-hidden); the
   stage name stays as visible text, so nothing is lost if the sprite
   does not load. The navy backdrop masks the rail line behind the glyph,
   exactly as the former square station node did. */
.be-lifecycle-icon {
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--be-bright-aqua);      /* currentColor for the stroke — aqua on the dark section */
  background: var(--be-navy);        /* punch through the horizontal rail rule */
  margin-bottom: 1.1rem;             /* matches the spacing the station node used */
}

/* ─── Governed AI (platform) ───────────────────────────────── */
.governed-ai-layout { gap: clamp(1.75rem, 4vw, 3.5rem); }
.procurement-integrity { border-left: 0; margin-top: 1.25rem; padding-left: 0; font-size: 0.95rem; color: var(--be-navy-500); }
.assurance-controls { list-style: none; margin: 0; padding: 0; counter-reset: control; border-top: 1px solid var(--be-navy-100); }
.assurance-controls li {
  counter-increment: control;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.95rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--be-navy-100);
  align-items: baseline;
}
.assurance-controls li::marker { content: none; }
.assurance-controls li::before {
  content: counter(control, decimal-leading-zero);
  font-family: var(--be-font-body);
  font-size: 0.78rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.08em;
  color: var(--be-navy-700);
}

/* ─── Product-interface frame (Platform evidence figure) ───── */
.be-productframe .evidence-action { border: 0; margin: 2.5rem 0 0; }
.be-frame {
  border: 1px solid var(--be-navy-200);
  background: var(--be-sand);
  box-shadow: var(--dx-shadow);
  overflow: hidden;
}
.be-frame__chrome {
  background: var(--be-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1.1rem;
  flex-wrap: wrap;
}
.be-frame__id { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.be-frame__dots { display: inline-flex; gap: 5px; margin-right: 0.4rem; }
.be-frame__dots span { width: 9px; height: 9px; border: 1px solid color-mix(in srgb, var(--be-sand) 30%, transparent); }
.be-frame__brand {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-strong);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--be-sand);
}
.be-frame__sub {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-strong);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--be-cyan);   /* cyan ONLY in product-frame wordmark lock-up */
}
.be-frame__chip {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--be-sand) 78%, var(--be-navy));
  background: color-mix(in srgb, var(--be-sand) 8%, transparent);
  border: 1px solid var(--dx-line-dark-soft);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
.be-frame__tabs {
  display: flex;
  gap: 0.15rem;
  padding: 0 0.9rem;
  background: color-mix(in srgb, var(--be-teal) 6%, var(--be-sand));
  border-bottom: 1px solid var(--be-navy-100);
  overflow-x: auto;
}
.be-frame__tab {
  padding: 0.7rem 0.85rem;
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy-500);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.be-frame__tab--on { color: var(--be-navy); font-weight: var(--be-fw-body-bold); border-bottom-color: var(--be-teal); }
.be-frame__body { padding: clamp(1.25rem, 3vw, 1.85rem); background: var(--be-sand); }
/* The frame title is an h3 on Platform and an h2 on the Sample Output page;
   both must take the frame-body scale, not the section-heading scale. */
.be-productframe .evidence-action .be-frame h3,
.be-productframe .evidence-action .be-frame h2 {
  background: transparent;
  color: var(--be-navy);
  padding: 0 0 1.1rem;
  font-family: var(--be-font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: var(--be-fw-display);
  line-height: 1.2;
  letter-spacing: normal;
}
.be-productframe .evidence-action dl { border: 1px solid var(--be-navy-100); }
.be-productframe .evidence-action dl div {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  border-top: 0;
}
.be-productframe .evidence-action dl div + div { border-top: 1px solid var(--be-navy-100); }
.be-productframe .evidence-action dt {
  padding: 0.85rem 0.95rem;
  font-family: var(--be-font-body);
  font-size: 0.8rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy-700);
  background: color-mix(in srgb, var(--be-teal) 7%, var(--be-sand));
  border-right: 1px solid var(--be-navy-100);
}
/* Ledger values are body prose: they sit on the 16px floor, not below it. */
.be-productframe .evidence-action dd { border-left: 0; padding: 0.85rem 0.95rem; font-size: 1rem; color: var(--be-navy); line-height: 1.55; }
.be-productframe .evidence-action dd strong { color: var(--be-navy); font-weight: var(--be-fw-body-bold); }
.be-productframe .evidence-action figcaption { padding: 1rem 0 0; font-size: 0.82rem; color: var(--be-navy-500); }

/* ─── Application options — ledger restyle (dark) ──────────── */
.application-options { display: block; grid-template-columns: none; gap: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--dx-line-dark); }
.application-options div {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 1.25rem 2rem;
  padding: 1.15rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--dx-line-dark);
  align-items: baseline;
}
.application-options dt {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: 1.1rem;
  color: var(--be-sand);
}
.application-options dd { color: var(--dx-ink-dark-soft); margin-top: 0; }

/* ─── Direction B responsive ───────────────────────────────── */
@media (max-width: 1080px) {
  .decision-engine { max-width: none; }
  .decision-engine__svg { display: none; }
  .decision-engine__flow { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; gap: 0; }
  .decision-engine__outcomes {
    grid-template-columns: 1fr;
    gap: 0;
    border-left: 1.5px solid var(--be-sand);
    margin: 0.75rem 0 0 9px;
    padding: 0.2rem 0 0 1.25rem;
  }
  .decision-engine__outcomes::before { display: none; }
  .decision-engine__outcomes li { padding: 0.7rem 0; }
  .decision-engine__outcomes li + li { border-top: 1px solid var(--dx-line-dark); }
  .decision-engine__outcomes li::before {
    top: 0.85rem;
    left: calc(-1.25rem - 9px - 1px);
    width: 14px;
    height: 14px;
  }
  .decision-engine__outcomes li::after {
    top: calc(0.85rem + 4px);
    left: calc(-1.25rem - 9px - 1px + 4px);
    width: 7px;
    height: 7px;
  }
}
@media (max-width: 900px) {
  .be-split { grid-template-columns: 1fr; }
  .governed-ai-layout { grid-template-columns: 1fr; }

  .platform-outcomes { grid-template-columns: 1fr; }
  .platform-outcomes::before { display: none; }
  .platform-outcomes li { display: grid; grid-template-columns: 26px 1fr; gap: 0 1rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--dx-line-dark); }
  .platform-outcomes li:first-child { border-top: 0; padding-top: 0.5rem; }
  .platform-outcomes li > .be-lifecycle-icon { margin-bottom: 0; margin-top: 2px; }
  .platform-outcomes li > h3, .platform-outcomes li > p { grid-column: 2; }
}
@media (max-width: 760px) {
  .be-readouts { grid-template-columns: 1fr; border-top: none; }
  .be-readouts--duo { grid-template-columns: 1fr; }
  .be-readout { padding: 1.5rem 0; border-top: 2px solid var(--be-navy); border-bottom: none; }
  .be-readout + .be-readout { border-left: none; padding-left: 0; }
  .value-pool__labels { grid-template-columns: 1fr; }
  .be-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .be-row__link { align-self: start; white-space: normal; }
  .be-ledger__row { grid-template-columns: 1fr; gap: 0.4rem; }
  .application-options div { grid-template-columns: 1fr; gap: 0.4rem; }
  .be-chain__svg { display: none; }
  .be-chain__labels { grid-template-columns: 1fr; gap: 0.3rem; border-left: 1.5px solid var(--be-navy-200); padding-left: 1.1rem; }
  .be-chain__labels li { text-align: left; padding: 0.4rem 0; }
  .be-productframe .evidence-action dl div { grid-template-columns: 1fr; }
  .be-productframe .evidence-action dt { border-right: 0; border-bottom: 1px solid var(--be-navy-100); }
  .be-productframe .evidence-action dd { padding-top: 0.85rem; }
}
@media (max-width: 720px) {
  .platform-loop__inputs { grid-template-columns: 1fr; }
  .platform-loop__inputs article + article { border-left: none; border-top: 1px solid var(--dx-line-dark-soft); }
}

/* ─── Solutions — routing ledger (choose by need) ──────────── */
.solution-chooser {
  display: block;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--be-navy);
  margin-top: 2.5rem;
  counter-reset: route;
}
.solution-chooser a {
  counter-increment: route;
  display: block;
  position: relative;
  background: transparent;
  border-bottom: 1px solid var(--be-navy-100);
  color: var(--be-navy-700);
  font-size: 1rem;
  line-height: 1.5;
  padding: 1.25rem 2.25rem 1.25rem 3.5rem;
  transition: background-color 0.18s ease;
}
.solution-chooser a::before {
  content: counter(route, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.4rem;
  font-family: var(--be-font-body);
  font-size: 0.78rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.16em;
  color: var(--be-teal);
}
/* Direction indicator — decorative; the link text carries the meaning. */
.solution-chooser a::after {
  content: "";
  position: absolute;
  right: 0.65rem;
  top: 1.7rem;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--be-navy-200);
  border-right: 1.5px solid var(--be-navy-200);
  transform: rotate(45deg);
  transition: border-color 0.18s ease;
}
.solution-chooser a:hover { background: color-mix(in srgb, var(--be-teal) 7%, transparent); }
.solution-chooser a:hover::after { border-color: var(--be-aqua-600); }
.solution-chooser strong {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--be-navy);
}
.choice-rule {
  border-left: 3px solid var(--be-terracotta);
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  margin-top: 2.5rem;
  max-width: 60ch;
  padding-left: 1.25rem;
}

/* ─── Solutions — offering instrument panels (01-05) ───────── */
.offerings { counter-reset: offering; gap: clamp(2rem, 4vw, 3rem); }
.offering-card {
  counter-increment: offering;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--be-navy-200);
  background: var(--be-bg-page);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
/* Every child sits in the single column; each detail block below is its
   own self-contained 2-column ledger, so no sibling auto-placement. */
.offering-card__need,
.offering-card h3,
.offering-card__proposition,
.offering-card__detail,
.offering-card__benefit,
.offering-card > .button { grid-column: 1; }
.offering-card::before {
  content: "OFFERING " counter(offering, decimal-leading-zero);
  grid-column: 1;
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.18em;
  color: var(--be-teal);
  margin-bottom: 1rem;
}
/* Sentence case: this line is a full sentence, unreadable in caps. */
.offering-card__need {
  color: var(--be-navy-500);
  font-size: 0.9rem;
  font-weight: var(--be-fw-body-strong);
  letter-spacing: 0.01em;
  text-transform: none;
  max-width: 62ch;
}
/* Terracotta stays on the CTA only — one focal element per card. */
.offering-card h3 {
  font-family: var(--be-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: var(--be-fw-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--be-navy-200);
  margin-top: 0.6rem;
  padding-bottom: 1.1rem;
}
.offering-card__proposition {
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--be-navy-700);
  margin: 1.25rem 0 1.75rem;
  max-width: 60ch;
}
.offering-card__detail {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 0.5rem 2rem;
  align-items: baseline;
  border-top: 1px solid var(--be-navy-100);
  padding: 1.15rem 0;
}
.offering-card__detail h4,
.offering-card__benefit h4 {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--be-navy-500);
}
.offering-card__detail p,
.offering-card__detail ul,
.offering-card__benefit p { margin-top: 0; color: var(--be-navy-700); max-width: 62ch; }
.offering-card__benefit {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 0.5rem 2rem;
  align-items: baseline;
  background: color-mix(in srgb, var(--be-teal) 8%, transparent);
  border-left: 3px solid var(--be-teal);
  margin: 1.5rem 0 1.75rem;
  padding: 1.15rem 1.25rem;
}
.offering-card__benefit h4 { color: var(--be-navy-700); }
.offering-card__benefit p { color: var(--be-navy); }
.offering-card > .button { margin-top: 0.25rem; }

/* Commercial principle — geometry only; the navy/sand pair is pinned above. */
.commercial-principle .callout {
  border-left: 3px solid var(--be-terracotta);
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display-light);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  margin-top: 2.5rem;
  max-width: 60ch;
  padding: 1.35rem 1.5rem;
}

@media (max-width: 760px) {
  .offering-card__detail,
  .offering-card__benefit { grid-template-columns: 1fr; gap: 0.5rem; }
  .solution-chooser a { padding-right: 1.75rem; }
}

/* ─── About — vantage rows, programme readouts, evidence ───── */
/* Decorative rules from the legacy page-header language: the eyebrow
   already carries its own rule in Direction B. */
.be-section .divider { display: none; }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2.5rem;
  border-top: 2px solid var(--be-navy);
}
.proof-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--be-navy-100);
  padding: 1.75rem 1.5rem 1.75rem 0;
  counter-increment: vantage;
  /* Legacy styles.css .proof-card still contributes a shadow, hover lift and
     arrow; neutralise them so the flat ledger card renders clean. */
  box-shadow: none;
  transition: none;
}
.proof-card:hover { background: transparent; box-shadow: none; transform: none; }
.proof-card--teal:hover, .proof-card--coral:hover { background: transparent; }
.proof-card::after { content: none; }
.proof-card + .proof-card { border-left: 1px solid var(--be-navy-100); padding-left: 1.5rem; }
.proof-grid { counter-reset: vantage; }
.proof-card::before {
  content: "0" counter(vantage);
  display: block;
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.16em;
  color: var(--be-teal);
  margin-bottom: 0.85rem;
}
.proof-card p { color: var(--be-navy-700); max-width: none; }
.proof-card strong { color: var(--be-navy); display: block; margin-bottom: 0.4rem; }
.programme-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--be-navy); }
.programme-list li {
  border-bottom: 1px solid var(--be-navy-100);
  padding: 1.15rem 0;
  color: var(--be-navy-700);
}
.programme-list strong {
  color: var(--be-navy);
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 0.35rem;
}
/* About's evidence aside sits on light: a bordered record, not a navy panel. */
.be-section .evidence-action { border: 1px solid var(--be-navy-200); margin: 2.5rem 0 0; }
.be-section .evidence-action h3 {
  background: var(--be-navy);
  color: var(--be-sand);
  font-family: var(--be-font-display);
  font-weight: var(--be-fw-display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  padding: 1.15rem 1.25rem;
}
.be-section .evidence-action dt { color: var(--be-navy); font-weight: var(--be-fw-body-bold); }
.be-section .evidence-action dd { color: var(--be-navy-700); }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; border-top: 0; }
  .proof-card { border-top: 2px solid var(--be-navy); padding: 1.5rem 0; }
  .proof-card + .proof-card { border-left: 0; padding-left: 0; }
}

/* ─── Perspective — the long-form argument as an instrument ── */
/* A reading column, not a 1200px container: the compound selector pins the
   width explicitly rather than relying on .be-container source order. */
.be-container.be-essay {
  max-width: calc(72ch + 2 * clamp(1.25rem, 5vw, 3rem));
  counter-reset: essay;
}
.be-essay p,
.be-essay li { font-size: 1rem; line-height: 1.7; color: var(--be-navy-700); max-width: 72ch; }
.be-essay p + p { margin-top: 1.1rem; }
.be-essay p a { color: var(--be-navy); text-decoration: underline; text-underline-offset: 0.2em; }
.be-essay p a:hover { color: var(--be-teal); }
.be-essay strong { color: var(--be-navy); font-weight: var(--be-fw-body-bold); }

/* Section rhythm: an indexed technical marker over a hairline, set by CSS
   counter so the pinned copy and markup are untouched. */
.be-essay h2 {
  counter-increment: essay;
  margin-top: 3.25rem;
  margin-bottom: 1.15rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--be-navy-200);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--be-navy);
}
.be-essay h2::before {
  content: counter(essay, decimal-leading-zero);
  display: block;
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  letter-spacing: 0.16em;
  color: var(--be-teal);
  margin-bottom: 0.75rem;
}
.be-essay .be-pullquote { margin: 2.75rem 0; max-width: 34ch; }

/* ─── Methodology — the record as an instrument ─────────────── */
/* .methodology-record (line ~178) and .be-container are both 0,1,0 and
   .be-container is declared later, so it would take the width. Pinned. */
.be-container.methodology-record { max-width: 72rem; }
.methodology-record > h2:first-of-type { margin-top: 0; }
.methodology-record p,
.methodology-record li { color: var(--be-navy-700); }
.methodology-record strong { color: var(--be-navy); }

/* The page is entirely numbers: they line up in columns. */
.methodology-record .table-scroll table { font-variant-numeric: tabular-nums; }
.methodology-record .table-scroll th {
  background: color-mix(in srgb, var(--be-teal) 12%, var(--be-sand));
  color: var(--be-navy);
  font-family: var(--be-font-body);
  font-weight: var(--be-fw-body-bold);
  border-color: var(--be-navy-200);
}
.methodology-record .table-scroll td { border-color: var(--be-navy-100); }
.methodology-record .table-scroll caption {
  color: var(--be-navy);
  border-left: 3px solid var(--be-teal);
  padding-left: 0.75rem;
}

/* Phone: the grids stop being grids. Each row becomes a labelled block, so
   no table forces a sideways swipe — the owner's mobile pass, 2026-07-16.
   The column header moves into each cell as a small label via data-label. */
@media (max-width: 600px) {
  .methodology-record .table-scroll { overflow-x: visible; }
  .methodology-record .table-scroll table { min-width: 0; width: 100%; }
  .methodology-record .table-scroll thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .methodology-record .table-scroll tr {
    display: block;
    border: 1px solid var(--be-navy-200);
    margin-bottom: 0.75rem;
  }
  .methodology-record .table-scroll td {
    display: block;
    border: 0;
    border-top: 1px solid var(--be-navy-100);
    padding: 0.5rem 0.75rem;
  }
  .methodology-record .table-scroll td:empty { display: none; }
  .methodology-record .table-scroll td:first-child {
    border-top: 0;
    background: color-mix(in srgb, var(--be-teal) 12%, var(--be-sand));
    color: var(--be-navy);
    font-weight: var(--be-fw-body-bold);
  }
  .methodology-record .table-scroll td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
    font-weight: var(--be-fw-body-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--be-navy-500);
  }
}

/* ─── Founder interview — Direction B ──────────────────────── */
/* The page keeps its bespoke interview-* structure (it already carries the
   indexed-question language Direction B wants). What it lacked was the brand
   tokens, the type floors and one button system. components.css loads after
   styles.css, so equal-specificity rules here win; the deeper selectors are
   matched deliberately, not by accident. */

.interview-header__eyebrow {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--be-bright-aqua);
}
.interview-header__meta {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--be-sand) 60%, transparent);
}
.interview-header__stat-num { font-variant-numeric: tabular-nums; }
.interview-header__stat-label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--be-sand) 78%, transparent);
  max-width: 26ch;
}

/* Section index. The legacy .interview-q-num asks for 0.62rem but never got
   it: .interview-body p (0,1,1) outranks .interview-q-num (0,1,0), so the
   marker has always rendered at 16px body size, indistinguishable from the
   prose it labels. Scoped under the parent to actually win, and set to the
   12px index scale the rest of the site uses. */
.interview-body .interview-q-num {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  font-weight: var(--be-fw-body-bold);
  color: var(--be-teal);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.65rem;
}
.interview-section { border-bottom-color: var(--be-navy-100); }
.interview-section h2 { color: var(--be-navy); }

/* Body prose was a raw hex (#2A3B5C) with no token behind it. */
.interview-body p { color: var(--be-navy-700); }

/* .source-label loses to .interview-body p the same way, so the evidence
   qualification has been rendering as ordinary prose here while every other
   page footnotes it. Matches About: 12px, inherited navy-700. */
.interview-body .source-label { font-size: 0.75rem; }
.interview-body strong { color: var(--be-navy); font-weight: var(--be-fw-body-bold); }

/* Sidebar: labels to the floor, numerals tabular, links a real touch target. */
.interview-sidebar__label {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  font-weight: var(--be-fw-body-bold);
  color: var(--be-teal);
}
.interview-nav__item {
  font-size: 0.9rem;
  color: var(--be-navy-500);
  border-bottom-color: var(--be-navy-100);
  padding: 0.7rem 0;
  min-height: 44px;
}
.interview-nav__num {
  font-family: var(--be-font-body);
  font-size: 0.75rem;
  font-weight: var(--be-fw-body-bold);
  color: var(--be-teal);
  font-variant-numeric: tabular-nums;
}
.interview-nav__item:hover { color: var(--be-navy); }
.interview-nav__item.is-active { color: var(--be-navy); font-weight: var(--be-fw-body-bold); }
.interview-sidebar__cta { border-top-color: var(--be-navy-200); }
.interview-sidebar__cta p { font-size: 1rem; color: var(--be-navy-700); line-height: 1.55; }

/* One button system: terracotta ground carries NAVY text and inverts on
   hover. This element still shipped the sand-on-terracotta defect. */
.interview-sidebar__cta a {
  background: var(--be-terracotta);
  color: var(--be-navy);
  font-family: var(--be-font-display);
  font-size: 1rem;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  transition: background-color 0.2s, color 0.2s;
}
.interview-sidebar__cta a:hover {
  transform: none;
  box-shadow: none;
  background: var(--be-navy);
  color: var(--be-sand);
}
.interview-sidebar__cta a:focus-visible {
  outline: 2px solid var(--be-bright-aqua);
  outline-offset: 2px;
}

/* In-article stat callouts sit on navy: aqua is the live-signal colour. */
.interview-stat-callout { border-left-color: var(--be-bright-aqua); }
.interview-stat-callout--coral { border-left-color: var(--be-terracotta); }
.interview-stat-callout__num { font-variant-numeric: tabular-nums; }
.interview-stat-callout__label {
  font-size: 1rem;
  color: color-mix(in srgb, var(--be-sand) 80%, transparent);
}

/* Pull quotes: teal is the structural rule on light; terracotta is spent
   only on the closing quote, which is the page's focal moment. */
.pull-quote-full { border-left-color: var(--be-teal); color: var(--be-navy); }
.pull-quote-full strong { color: var(--be-teal); }
.pull-quote-full--closing { border-left-color: var(--be-terracotta); }
.pull-quote-full--closing strong { color: var(--be-terracotta); }

.editors-note { border-left-color: var(--be-teal); color: var(--be-navy-700); }
.closing-cta { border-top-color: var(--be-terracotta); }
.closing-cta__secondary { font-size: 1rem; color: var(--be-navy-500); }
.back-link { font-family: var(--be-font-body); color: var(--be-teal); border-bottom-color: var(--be-navy-200); }
.back-link:hover, .back-link:focus-visible { color: var(--be-navy); border-bottom-color: var(--be-navy); }
/* Scoped to the closing block, not .link-coral globally: the class is shared
   with Privacy, which is already migrated and signed off. The terracotta rule
   and closing pull quote already spend this screenful's budget. */
.closing-cta .link-coral { color: var(--be-navy); }
.closing-cta .link-coral:hover { color: var(--be-teal); }

/* ─── Privacy — legal prose on the body floor ───────────────── */
/* Scoped under .be-section to outrank the legacy .privacy-content rules. */
.be-section .privacy-content p,
.be-section .privacy-content li,
.be-section .privacy-content dd { font-size: 1rem; }
.be-section .privacy-content .text-muted { color: var(--be-navy-500); }