/*
 * DIA CAPITAL — Section 06 · Risk & Scaling Matrix (06A + 06B). FINAL — 06A FROZEN FOR THIS PHASE.
 * Canonical CSS = the approved V4 base + V4.9 chapter / 06B styles + the 06A V5.4 block (transparent environment centred under
 * the core, CSS dark field), concatenated in the original cascade order. Previous canonical: src/archive/section-06-v1.0/.
 */

/* ===== from section-06-v4.css ===== */
/*
 * DIA CAPITAL — Section 06 · Risk & Scaling Matrix — V4 (parallel TEST): rebuild on the exact
 * supplied assets. Does not replace section-06.css (canonical) or the V2 / V2.1 / V3 / V3.1 tests.
 *
 * Requires the base system (main.css). Fills the dia.sections layer; scoped under .dia-apex.
 * Static (no motion).
 *
 * Theme: the head and the bridge follow the page theme. The two scenes are full-bleed dark
 * cinematic bands (.dia-island re-applies the Dark tokens locally); in Light mode their top and
 * bottom feather into the light page, so no rectangular image boundary is visible. In Dark mode
 * the bands are the page tone itself.
 *
 * 06A · LEFT (Coordina, Adapta) · render · RIGHT (Escala, Reduce) · Protege below centre.
 *       The text columns are aligned by the page layout to the render's own glyph positions.
 * 06B · favourable panel · render · adverse panel — three stable territories; the render may
 *       extend under the panels' inner edges (outer atmosphere only).
 */

@layer dia.sections {
  .dia-apex .dia-m4 {
    --m4-blue: #4D8DE8;
    --m4-field: var(--dia-island-bg);
    --m4-label: #D2A97C; /* small Bronze labels on the dark scenes */

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--dia-bg);
    color: var(--dia-text);
  }

  /* ================= Head (page theme) ================= */

  .dia-apex .dia-m4__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--dia-gutter);
    row-gap: var(--space-7);
    align-items: end;
  }

  .dia-apex .dia-m4__head { grid-column: 1 / span 6; }
  .dia-apex .dia-m4__title { margin-block-start: var(--space-4); }

  .dia-apex .dia-m4__body {
    max-inline-size: 36rem;
    margin-block-start: var(--space-5);
  }

  .dia-apex .dia-m4__statement {
    grid-column: 8 / span 5;
    margin: 0;
    padding-inline-start: var(--space-5);
    border-inline-start: 2px solid var(--dia-bronze);
    font-family: var(--font-display);
    font-size: var(--dia-fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .dia-apex .dia-m4__statement > span { display: block; }
  .dia-apex .dia-m4__statement-not { color: var(--dia-text-secondary); }
  .dia-apex .dia-m4__statement-is { margin-block-start: var(--space-3); color: var(--dia-text); }

  /* ================= Scenes: full-bleed dark bands ================= */

  .dia-apex .dia-m4__band {
    --dia-accent-text: var(--m4-label);

    position: relative;
    isolation: isolate;
    --m4-feather: 2.5rem; /* text starts below the feather, on the solid field */

    padding-block: calc(var(--m4-feather) + var(--space-5));
    background: transparent; /* the field below carries the tone and feathers into the page */
    color: var(--dia-text);
  }

  /* Field: feathers top and bottom (vertical only — full bleed has no side edges) and carries
     a soft atmospheric backlight behind the render. */
  .dia-apex .dia-m4__band::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 48% 56% at 50% 46%, color-mix(in srgb, var(--dia-surface) 70%, transparent) 0%, transparent 72%),
      var(--m4-field);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m4-feather), #000 calc(100% - var(--m4-feather)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m4-feather), #000 calc(100% - var(--m4-feather)), transparent 100%);
  }

  .dia-apex .dia-m4__band--a { margin-block-start: var(--space-5); }
  .dia-apex .dia-m4__band--b { margin-block-start: 0; }

  .dia-apex .dia-m4__core-label {
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--dia-accent-text);
  }

  /* Renders: opaque files; only their outer boundary is dissolved by a mask. */
  .dia-apex .dia-m4__art picture { display: block; }

  .dia-apex .dia-m4__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }

  /* ================= 06A — functions around the render ================= */

  .dia-apex .dia-m4__scene {
    container-type: inline-size;
    margin-block-start: var(--space-3);
  }

  .dia-apex .dia-m4__stage {
    --m4-art-w: min(56cqw, 720px);
    --m4-below: 5.5rem;   /* room for Protege under the render */
    --m4-gap: 20px;       /* clearance between the render's edge and the text column */

    position: relative;
    display: grid;
    justify-items: center;
    padding-block-end: var(--m4-below);
  }

  .dia-apex .dia-m4__art { inline-size: var(--m4-art-w); }
  .dia-apex .dia-m4__stage .dia-m4__art { grid-row: 1; }

  .dia-apex .dia-m4__fns {
    position: absolute;
    inset: 0 0 var(--m4-below);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  /* Text columns sit OUTSIDE the render's rectangle (its content runs to the edges). */
  .dia-apex .dia-m4__fn {
    position: absolute;
    max-inline-size: min(16.5rem, calc((100cqw - var(--m4-art-w)) / 2 - var(--m4-gap)));
    pointer-events: auto;
  }

  /* Vertical anchors = the render's glyph rows (26 % and 54 % of its height). */
  .dia-apex .dia-m4__fn--coordina,
  .dia-apex .dia-m4__fn--escala { inset-block-start: 26%; translate: 0 -50%; }

  .dia-apex .dia-m4__fn--adapta,
  .dia-apex .dia-m4__fn--reduce { inset-block-start: 54.2%; translate: 0 -50%; }

  .dia-apex .dia-m4__fn--coordina,
  .dia-apex .dia-m4__fn--adapta {
    inset-inline-end: calc(50% + 0.5 * var(--m4-art-w) + var(--m4-gap));
    text-align: end;
  }

  .dia-apex .dia-m4__fn--escala,
  .dia-apex .dia-m4__fn--reduce {
    inset-inline-start: calc(50% + 0.5 * var(--m4-art-w) + var(--m4-gap));
  }

  /* Protege: centred under the render's lower glyph. */
  .dia-apex .dia-m4__fn--protege {
    inset-block-start: calc(90.6% + var(--space-3));
    inset-inline-start: 50%;
    translate: -50% 0;
    text-align: center;
    max-inline-size: 20rem;
  }

  .dia-apex .dia-m4__fn-title {
    position: relative;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dia-accent-text);
  }

  .dia-apex .dia-m4__fn-text {
    margin: var(--space-2) 0 0;
    font-size: var(--dia-fs-small);
    line-height: 1.55;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* Restrained connector: a short hairline ending in a luminous point, toward the glyph. */
  .dia-apex .dia-m4__fn--coordina .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--adapta .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--escala .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--reduce .dia-m4__fn-title::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    block-size: 5px;
    translate: 0 -50%;
    pointer-events: none;
  }

  /* The hairline crosses the render's feathered edge and stops at its glyph
     (left glyphs end at 7.5 % of the render width, right glyphs begin 12.9 % from its edge). */
  .dia-apex .dia-m4__fn--coordina .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--adapta .dia-m4__fn-title::after {
    inset-inline-start: calc(100% + 8px);
    inline-size: calc(0.075 * var(--m4-art-w) + var(--m4-gap) - 8px);
  }

  .dia-apex .dia-m4__fn--escala .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--reduce .dia-m4__fn-title::after {
    inset-inline-end: calc(100% + 8px);
    inline-size: calc(0.129 * var(--m4-art-w) + var(--m4-gap) - 8px);
  }

  .dia-apex .dia-m4__fn--coordina .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--adapta .dia-m4__fn-title::after {
    background:
      radial-gradient(circle at calc(100% - 2.5px) 50%, var(--dia-bronze) 0 2px, transparent 2.5px),
      linear-gradient(to left, color-mix(in srgb, var(--dia-bronze) 70%, transparent), transparent) center / 100% 1px no-repeat;
  }

  .dia-apex .dia-m4__fn--escala .dia-m4__fn-title::after,
  .dia-apex .dia-m4__fn--reduce .dia-m4__fn-title::after {
    background:
      radial-gradient(circle at 2.5px 50%, var(--m4-blue) 0 2px, transparent 2.5px),
      linear-gradient(to right, color-mix(in srgb, var(--m4-blue) 70%, transparent), transparent) center / 100% 1px no-repeat;
  }

  /* ================= 06B — three territories ================= */

  .dia-apex .dia-m4__b-title {
    display: grid;
    justify-items: center;
    row-gap: var(--space-4);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--dia-accent-text);
  }

  .dia-apex .dia-m4__b-title::before {
    content: "";
    inline-size: var(--space-7);
    block-size: 1px;
    background: var(--dia-bronze);
  }

  .dia-apex .dia-m4__logic {
    display: grid;
    grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr) minmax(0, 18.5rem);
    align-items: center;
    margin-block-start: var(--space-5);
  }

  .dia-apex .dia-m4__art--b {
    grid-column: 2;
    grid-row: 1;
    inline-size: auto;
    margin-inline: calc(-1 * var(--space-8));
  }

  .dia-apex .dia-m4__panel {
    --m4-edge: var(--dia-bronze);

    position: relative;
    z-index: 1;
    grid-row: 1;
    padding: var(--space-6);
    border: 1px solid color-mix(in srgb, var(--dia-text) 12%, transparent);
    border-radius: var(--radius-md);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--dia-text) 4%, transparent), transparent 40%),
      color-mix(in srgb, var(--dia-surface) 84%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--dia-text) 6%, transparent),
      0 18px 40px -24px rgb(0 0 0 / 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* Faint side edge light on the panel's outer edge. */
  .dia-apex .dia-m4__panel::before {
    content: "";
    position: absolute;
    inset-block: var(--space-4);
    inline-size: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, transparent, var(--m4-edge), transparent);
    pointer-events: none;
  }

  .dia-apex .dia-m4__panel--up { grid-column: 1; }
  .dia-apex .dia-m4__panel--up::before { inset-inline-start: -1px; }

  .dia-apex .dia-m4__panel--down {
    --m4-edge: var(--m4-blue);

    grid-column: 3;
  }

  .dia-apex .dia-m4__panel--down::before { inset-inline-end: -1px; }

  .dia-apex .dia-m4__panel-key {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-m4__glyph {
    flex: none;
    inline-size: var(--space-5);
    block-size: 2px;
  }

  .dia-apex .dia-m4__glyph--open { background: var(--dia-bronze); }
  .dia-apex .dia-m4__glyph--held { background: var(--m4-blue); }

  .dia-apex .dia-m4__panel-title {
    margin: var(--space-4) 0 0;
    padding-block-end: var(--space-4);
    border-block-end: 1px solid color-mix(in srgb, var(--dia-text) 12%, transparent);
    font-family: var(--font-display);
    font-size: var(--dia-fs-h4);
    font-weight: 600;
    line-height: 1.3;
    color: var(--dia-text);
  }

  .dia-apex .dia-m4__panel-text {
    margin: var(--space-4) 0 0;
    font-size: var(--dia-fs-body);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  .dia-apex .dia-m4__bridge {
    max-inline-size: 30ch;
    margin: var(--space-8) 0 0;
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--dia-border);
  }

  /* ================= 1024–1279 ================= */

  @media (max-width: 1279px) {
    .dia-apex .dia-m4__stage { --m4-art-w: min(56cqw, 720px); --m4-gap: 16px; }
    .dia-apex .dia-m4__logic { grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) minmax(0, 15.5rem); }
    .dia-apex .dia-m4__art--b { margin-inline: calc(-1 * var(--space-7)); }
    .dia-apex .dia-m4__panel { padding: var(--space-5); }
  }

  /* ================= < 1024: render first, functions / panels below ================= */

  @media (max-width: 1023px) {
    .dia-apex .dia-m4__head,
    .dia-apex .dia-m4__statement { grid-column: 1 / -1; }

    .dia-apex .dia-m4__statement { max-inline-size: 36rem; }

    .dia-apex .dia-m4__band--a { margin-block-start: var(--space-5); }

    .dia-apex .dia-m4__stage {
      --m4-art-w: 100%;

      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--dia-gutter);
      row-gap: var(--space-5);
      padding-block-end: 0;
    }

    .dia-apex .dia-m4__stage .dia-m4__art {
      grid-column: 1 / -1;
      justify-self: center;
      inline-size: min(100%, 52rem);
    }

    .dia-apex .dia-m4__fns { display: contents; }

    .dia-apex .dia-m4__fn,
    .dia-apex .dia-m4__fn--coordina,
    .dia-apex .dia-m4__fn--adapta,
    .dia-apex .dia-m4__fn--escala,
    .dia-apex .dia-m4__fn--reduce,
    .dia-apex .dia-m4__fn--protege {
      position: relative;
      inset: auto;
      translate: none;
      max-inline-size: none;
      text-align: start;
      padding: var(--space-4) var(--space-5);
      border-inline-start: 2px solid var(--dia-bronze);
      background: linear-gradient(90deg, color-mix(in srgb, var(--dia-surface) 70%, transparent), transparent);
    }

    .dia-apex .dia-m4__fn--escala,
    .dia-apex .dia-m4__fn--reduce { border-inline-start-color: var(--m4-blue); }

    .dia-apex .dia-m4__fn--protege {
      grid-column: 1 / -1;
      justify-self: center;
      inline-size: min(100%, 24rem);
      border-inline-start-color: var(--m4-blue);
    }

    .dia-apex .dia-m4__fn .dia-m4__fn-title::after { content: none; }

    .dia-apex .dia-m4__logic {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--dia-gutter);
      row-gap: var(--space-5);
    }

    .dia-apex .dia-m4__art--b {
      grid-column: 1 / -1;
      grid-row: 1;
      margin-inline: 0;
      justify-self: center;
      inline-size: min(100%, 52rem);
    }

    .dia-apex .dia-m4__panel { grid-row: 2; }
    .dia-apex .dia-m4__panel--up { grid-column: 1; }
    .dia-apex .dia-m4__panel--down { grid-column: 2; }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-m4__band { padding-block: calc(var(--m4-feather) + var(--space-4)); }

    /* Renders run edge to edge so both halves stay visible. */
    .dia-apex .dia-m4__stage .dia-m4__art,
    .dia-apex .dia-m4__art--b {
      inline-size: calc(100% + 2 * var(--dia-margin));
      max-inline-size: none;
      margin-inline: calc(-1 * var(--dia-margin));
    }

    .dia-apex .dia-m4__stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }

    .dia-apex .dia-m4__fn--protege { justify-self: stretch; inline-size: auto; }

    .dia-apex .dia-m4__logic { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
    .dia-apex .dia-m4__panel--up,
    .dia-apex .dia-m4__panel--down { grid-column: 1; grid-row: auto; }
    .dia-apex .dia-m4__panel { padding: var(--space-5); }

    .dia-apex .dia-m4__bridge { margin-block-start: var(--space-7); }
  }
}

/* ===== from section-06-v4-9.css ===== */
/*
 * DIA CAPITAL — Section 06 · V4.9 (parallel TEST; chapter transition in the last block) · V4.8 (parallel TEST): V4.5 06A unchanged + V4.7 layered 06B with translucent step panels, synthesis band and closing line (last block); V4.6 bridge kept.
 * V4.3: the background layer is un-clipped and extends up behind the statement / body (atmosphere,
 * not a boxed image); the Matrix is ~12 % smaller; the head is lighter; the statement bridges into
 * the scene. Callouts / icons / connector logic are those of V4.2. Used together with section-06-v4.css (06B, bridge). Does not replace section-06.css.
 *
 * Architecture (≥ 1280): centred head, then one stage whose coordinate space is the 1672-wide
 * frame (y 200–900). Everything is positioned in % of that stage, so SVG connectors, icons and
 * copy stay locked to the Matrix at every width:
 *   back   → deep atmosphere / background layer (feathered)
 *   mid    → energy layers (screen) and the core, scaled down and masked so the waves dissolve
 *   front  → SVG connectors, icon modules and HTML copy sitting directly on the scene
 * Static (no motion). Dark immersive chapter in both themes (.dia-island), feathered into the
 * light page in Light mode.
 */

@layer dia.sections {
  .dia-apex .dia-m42__band {
    --m42-feather: 2.5rem;
    --m42-bronze: #D2A97C;
    --m42-blue: #4D8DE8;
    --m42-blue-text: #8FB6F0;
    --dia-accent-text: var(--m42-bronze);

    position: relative;
    isolation: isolate;
    margin-block-start: var(--space-5);
    padding-block: calc(var(--m42-feather) + var(--space-2)) calc(var(--m42-feather) + var(--space-2));
    background: transparent;
    color: var(--dia-text);
  }

  .dia-apex .dia-m42__band::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 34% 20% at 50% 14%, rgb(110 150 220 / 0.07), transparent 72%),
      radial-gradient(ellipse 30% 26% at 50% 56%, rgb(214 150 76 / 0.17), transparent 72%),
      radial-gradient(ellipse 34% 30% at 24% 58%, rgb(60 120 220 / 0.11), transparent 72%),
      radial-gradient(ellipse 34% 30% at 76% 58%, rgb(60 120 220 / 0.11), transparent 72%),
      radial-gradient(ellipse 60% 18% at 50% 90%, rgb(214 150 76 / 0.09), transparent 72%),
      linear-gradient(to bottom, rgb(2 8 13 / 0.55), transparent 22%),
      var(--dia-island-bg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m42-feather), #000 calc(100% - var(--m42-feather)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m42-feather), #000 calc(100% - var(--m42-feather)), transparent 100%);
  }

  /* ---------- Head: centred, as in the reference ---------- */

  .dia-apex .dia-m42__head {
    display: grid;
    justify-items: center;
    position: relative;
    z-index: 3;
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-inline: var(--dia-margin);
    text-align: center;
  }

  .dia-apex .dia-m42__title {
    margin-block-start: var(--space-2);
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
    line-height: 1.15;
    text-wrap: balance;
  }

  .dia-apex .dia-m42__body {
    max-inline-size: 40rem;
    margin-block-start: var(--space-2);
    font-size: var(--dia-fs-body);
    line-height: 1.55;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  .dia-apex .dia-m42__statement {
    display: grid;
    row-gap: 2px;
    max-inline-size: 44rem;
    margin: var(--space-4) 0 0;
    padding-block-start: var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  /* Short structural Bronze cue instead of a long rule. */
  .dia-apex .dia-m42__statement { position: relative; justify-items: center; }
  .dia-apex .dia-m42__statement::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inline-size: 2.5rem;
    block-size: 1px;
    background: var(--dia-bronze);
  }

  .dia-apex .dia-m42__statement-not { color: var(--dia-text-secondary); }
  .dia-apex .dia-m42__statement-is { color: var(--dia-text); }
  .dia-apex .dia-m42__statement > span { text-shadow: 0 0 14px rgb(4 12 19 / 0.95), 0 1px 3px rgb(4 12 19 / 0.8); }

  /* ---------- Stage ---------- */

  .dia-apex .dia-m42__stage-wrap {
    container-type: inline-size;
    inline-size: min(100%, 1500px);
    margin-inline: auto;
    margin-block-start: calc(-1 * var(--space-1));
  }

  /* The stage does not clip: its background layer is atmosphere and reaches up behind the head. */
  .dia-apex .dia-m42__stage {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    aspect-ratio: 1672 / 605;
  }

  .dia-apex .dia-m42__scene {
    position: absolute;
    inset: 0;
  }

  .dia-apex .dia-m42__layer {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: auto;
    display: block;
    pointer-events: none;
  }

  .dia-apex .dia-m42__layer img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* Optional background plate: only a faint, oversized, dissolving texture under the CSS atmosphere. */
  .dia-apex .dia-m42__layer--bg {
    inline-size: 125%;
    inset-inline-start: -12.5%;
    inset-block-start: calc(-372 / 605 * 100%);
    opacity: var(--m42-texture, 0.34);
    mix-blend-mode: screen;
  }

  .dia-apex .dia-m42__layer--bg img {
    -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 60%, #000 22%, transparent 76%);
    mask-image: radial-gradient(ellipse 46% 52% at 50% 60%, #000 22%, transparent 76%);
  }

  /* Core group: the transparent core only, ~60 % of the stage width. */
  .dia-apex .dia-m42__core-group {
    position: absolute;
    inset-inline-start: 20%;
    inline-size: 60%;
    inset-block-start: calc((133 - 225) / 605 * 100%);
    aspect-ratio: 1672 / 941;
    z-index: 2;
  }

  /* Energy group: the two energy layers, larger than the core, centred on the same base so the
     waves reach toward both callout columns. */
  .dia-apex .dia-m42__energy-group {
    position: absolute;
    inset-inline-start: 18%;
    inline-size: 64%;
    inset-block-start: calc((72 - 225) / 605 * 100%);
    aspect-ratio: 1672 / 941;
    z-index: 1;
  }

  .dia-apex .dia-m42__core-group .dia-m42__layer,
  .dia-apex .dia-m42__energy-group .dia-m42__layer { inset-block-start: 0; }

  .dia-apex .dia-m42__layer--blue,
  .dia-apex .dia-m42__layer--bronze { mix-blend-mode: screen; }

  .dia-apex .dia-m42__layer--blue { opacity: 0.8; }
  .dia-apex .dia-m42__layer--bronze { opacity: 0.72; }

  /* Wave tails dissolve into the atmosphere; the central pillar fades under the statement. */
  .dia-apex .dia-m42__layer--blue img,
  .dia-apex .dia-m42__layer--bronze img {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
      linear-gradient(to bottom, transparent 0, transparent 22%, #000 42%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
      linear-gradient(to bottom, transparent 0, transparent 22%, #000 42%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }

  .dia-apex .dia-m42__layer--core { z-index: 2; }

  .dia-apex .dia-m42__layer--core img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 8%, #000 30%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 8%, #000 30%, #000 100%);
  }

  /* ---------- Connectors ---------- */

  .dia-apex .dia-m42__links {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .dia-apex .dia-m42__link path {
    fill: none;
    stroke: var(--m42-c);
    stroke-opacity: 1;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
  }

  .dia-apex .dia-m42__link circle {
    fill: var(--m42-c);
    filter: drop-shadow(0 0 4px var(--m42-c));
  }

  .dia-apex .dia-m42__link--bronze { --m42-c: #E0A664; }
  .dia-apex .dia-m42__link--blue { --m42-c: #5C9CF0; }

  /* ---------- Functions: icon + title + copy, directly on the scene ---------- */

  .dia-apex .dia-m42__fns {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dia-apex .dia-m42__fn {
    position: absolute;
    display: grid;
    grid-template-columns: clamp(3.25rem, 4.7cqw, 4.5rem) minmax(0, 1fr);
    column-gap: clamp(0.625rem, 1cqw, 1rem);
    align-items: start;
    inline-size: 19.3%;
  }

  .dia-apex .dia-m42__fn--coordina { inset-inline-start: 5.98%;  inset-block-start: 7.44%; }
  .dia-apex .dia-m42__fn--adapta   { inset-inline-start: 5.98%;  inset-block-start: 33.9%; }
  .dia-apex .dia-m42__fn--escala   { inset-inline-start: 74.16%; inset-block-start: 7.44%; }
  .dia-apex .dia-m42__fn--reduce   { inset-inline-start: 74.16%; inset-block-start: 33.9%; }

  /* Bottom territory beneath the base: icon + title + copy directly on the field (no surface). */
  .dia-apex .dia-m42__fn--protege {
    inset-inline-start: 34.5%;
    inset-block-start: 80.5%;
    inline-size: 31%;
    align-items: center;
  }

  .dia-apex .dia-m42__icon { display: block; inline-size: 100%; aspect-ratio: 1; }

  .dia-apex .dia-m42__icon img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .dia-apex .dia-m42__fn-title {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dia-accent-text);
  }

  .dia-apex .dia-m42__fn[data-tone="b"] .dia-m42__fn-title { color: var(--m42-blue-text); }

  .dia-apex .dia-m42__fn-text {
    margin: var(--space-1) 0 0;
    font-size: var(--dia-fs-small);
    line-height: 1.5;
    color: #B4C1C6;
    text-wrap: pretty;
    text-shadow: 0 1px 10px rgb(4 12 18 / 0.9);
  }

  .dia-apex .dia-m42__fn-title { text-shadow: 0 1px 10px rgb(4 12 18 / 0.9); }

  /* Atmospheric scrim (not a card): a soft dark falloff keeps the copy legible over the energy. */
  .dia-apex .dia-m42__fn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14% -8% -14% -6%;
    background: radial-gradient(ellipse closest-side, rgb(4 12 19 / 0.88) 0%, rgb(4 12 19 / 0.7) 60%, transparent 100%);
    pointer-events: none;
  }

  .dia-apex .dia-m42__fn { isolation: isolate; }

  /* ---------- Identity ---------- */

  .dia-apex .dia-m42__identity {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: center;
    row-gap: var(--space-1);
    margin-block-start: var(--space-1);
    text-align: center;
  }

  .dia-apex .dia-m42__identity::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -30% -16% -30%;
    background: radial-gradient(ellipse closest-side, rgb(4 12 19 / 0.8), rgb(4 12 19 / 0.5) 60%, transparent 100%);
    pointer-events: none;
  }

  .dia-apex .dia-m42__core-label,
  .dia-apex .dia-m42__concepts {
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .dia-apex .dia-m42__core-label { letter-spacing: 0.18em; color: var(--dia-accent-text); }

  .dia-apex .dia-m42__concepts {
    letter-spacing: 0.12em;
    word-spacing: 0.2em;
    color: var(--dia-text-secondary);
  }

  /* ---------- < 1280: scene stays prominent, functions go below in two columns ---------- */

  @media (max-width: 1279px) {
    .dia-apex .dia-m42__stage { aspect-ratio: 1672 / 520; }

    .dia-apex .dia-m42__layer--bg { inset-block-start: calc(-300 / 520 * 100%); }

    .dia-apex .dia-m42__core-group {
      inset-block-start: calc((127 - 240) / 520 * 100%);
      inline-size: 62%;
      inset-inline-start: 19%;
    }

    .dia-apex .dia-m42__energy-group {
      inset-block-start: calc((52 - 240) / 520 * 100%);
      inline-size: 74%;
      inset-inline-start: 13%;
    }

    .dia-apex .dia-m42__links { display: none; }

    .dia-apex .dia-m42__fns {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4) var(--space-6);
      inline-size: min(100%, 52rem);
      margin: var(--space-5) auto 0;
      padding-inline: var(--dia-margin);
    }

    .dia-apex .dia-m42__fn,
    .dia-apex .dia-m42__fn--coordina,
    .dia-apex .dia-m42__fn--adapta,
    .dia-apex .dia-m42__fn--escala,
    .dia-apex .dia-m42__fn--reduce,
    .dia-apex .dia-m42__fn--protege {
      position: relative;
      inset: auto;
      inline-size: auto;
      grid-template-columns: 3.75rem minmax(0, 1fr);
      column-gap: var(--space-3);
      padding: 0;
      border: 0;
      background: none;
    }

    .dia-apex .dia-m42__fn--protege { grid-column: 1 / -1; justify-self: center; max-inline-size: 26rem; }

    .dia-apex .dia-m42__identity { margin-block-start: var(--space-5); }
  }
}

/* The stage / functions need to live in the same flow container for the tablet list. */
@layer dia.sections {
  @media (max-width: 1279px) {
    .dia-apex .dia-m42__stage {
      overflow: visible;
      -webkit-mask-image: none;
      mask-image: none;
      aspect-ratio: auto;
      display: grid;
    }

    .dia-apex .dia-m42__scene {
      position: relative;
      inset: auto;
      aspect-ratio: 1672 / 520;
      overflow: hidden;
      -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
      mask-composite: intersect;
    }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-m42__scene { aspect-ratio: 1 / 0.82; }

    .dia-apex .dia-m42__layer--bg { inset-block-start: -20%; inline-size: 200%; inset-inline-start: -50%; }

    .dia-apex .dia-m42__core-group {
      inline-size: 150%;
      inset-inline-start: -25%;
      inset-block-start: -2%;
    }

    .dia-apex .dia-m42__energy-group {
      inline-size: 180%;
      inset-inline-start: -40%;
      inset-block-start: -14%;
    }

    .dia-apex .dia-m42__fns {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
    }

    .dia-apex .dia-m42__title { text-wrap: balance; }
  }
}

@layer dia.sections {
  /* 06A starts closer to the section's top edge: the band carries its own feather. */
  .dia-apex .dia-m4:has(.dia-m42__band) { padding-block-start: var(--space-6); }
}

/* =====================================================================
 * V4.6 — 06B density + closing bridge (06A untouched)
 * ===================================================================== */
@layer dia.sections {
  /* 06B: tighter vertical rhythm; the artwork itself is not scaled. */
  .dia-apex .dia-m4__band--b {
    padding-block: calc(var(--m4-feather) + var(--space-3)) calc(var(--m4-feather) + var(--space-1));
  }

  .dia-apex .dia-m4__b-title {
    row-gap: var(--space-3);
    font-size: clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem);
    letter-spacing: 0.24em;
    color: #E2BE95;
  }

  .dia-apex .dia-m4__b-title::before { inline-size: var(--space-8); block-size: 2px; }

  .dia-apex .dia-m4__logic { margin-block-start: var(--space-3); }

  /* Closing bridge: a narrative statement, not a footnote. */
  .dia-apex .dia-m4__bridge {
    position: relative;
    max-inline-size: 60rem;
    margin: var(--space-5) 0 0;
    padding-block-start: var(--space-6);
    border-block-start: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .dia-apex .dia-m4__bridge::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--space-8);
    block-size: 2px;
    background: var(--dia-bronze);
  }

  /* Less dead space after the statement before Section 07 begins. */
  .dia-apex .dia-m4:has(.dia-m42__band) { padding-block-end: var(--space-9); }

  @media (max-width: 1023px) {
    .dia-apex .dia-m4__band--b { margin-block-start: calc(-1 * var(--space-4)); }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-m4__band--b { padding-block: calc(var(--m4-feather) + var(--space-2)) var(--m4-feather); }
    .dia-apex .dia-m4__bridge {
      margin-block-start: var(--space-4);
      padding-block-start: var(--space-5);
      max-inline-size: 22em;
    }
    .dia-apex .dia-m4:has(.dia-m42__band) { padding-block-end: var(--space-8); }
  }
}

/* =====================================================================
 * V4.7 — 06B layered scene (dia-m6b__*). Replaces the V4 06B markup; old 06B rules are unused.
 * Stage coordinate space: width W = 100 %, height = 0.38 W. All layers are positioned in % of W.
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-m6b {
    --m6b-bronze: #D2A97C;
    --m6b-blue: #4D8DE8;
    --m6b-feather: 2.5rem;
    --dia-accent-text: var(--m6b-bronze);

    position: relative;
    isolation: isolate;
    margin-block-start: var(--space-5);
    padding-block: calc(var(--m6b-feather) + var(--space-4)) var(--m6b-feather);
    color: var(--dia-text);
  }

  /* Section-level atmosphere: one continuous tone behind head, scene and panels. */
  .dia-apex .dia-m6b::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 22% 24% at 33% 58%, rgb(214 150 76 / 0.15), transparent 72%),
      radial-gradient(ellipse 22% 24% at 67% 58%, rgb(60 120 220 / 0.14), transparent 72%),
      radial-gradient(ellipse 30% 22% at 50% 60%, rgb(200 170 140 / 0.07), transparent 72%),
      linear-gradient(to bottom, rgb(2 8 13 / 0.45), transparent 20%),
      var(--dia-island-bg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m6b-feather), #000 calc(100% - var(--m6b-feather)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m6b-feather), #000 calc(100% - var(--m6b-feather)), transparent 100%);
  }

  /* ---------- Head ---------- */

  .dia-apex .dia-m6b__head {
    display: grid;
    justify-items: center;
    max-inline-size: 48rem;
    margin-inline: auto;
    padding-inline: var(--dia-margin);
    text-align: center;
  }

  .dia-apex .dia-m6b__eyebrow {
    display: grid;
    justify-items: center;
    row-gap: var(--space-3);
    margin: 0;
    font-size: clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #E2BE95;
  }

  .dia-apex .dia-m6b__eyebrow::before {
    content: "";
    inline-size: var(--space-8);
    block-size: 2px;
    background: var(--dia-bronze);
  }

  .dia-apex .dia-m6b__title {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .dia-apex .dia-m6b__intro {
    max-inline-size: 36rem;
    margin: var(--space-3) 0 0;
    color: var(--dia-text-secondary);
    font-size: var(--dia-fs-body);
    line-height: 1.55;
    text-wrap: pretty;
  }

  /* ---------- Stage ---------- */

  .dia-apex .dia-m6b__stage-wrap {
    container-type: inline-size;
    inline-size: min(100%, 1440px);
    margin-inline: auto;
    margin-block-start: var(--space-2);
  }

  .dia-apex .dia-m6b__stage {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 100 / 34;
  }

  .dia-apex .dia-m6b__scene { position: absolute; inset: 0; }

  .dia-apex .dia-m6b__layer {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .dia-apex .dia-m6b__layer img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* Data field: ambient depth behind everything; soft edges, screen-blended. */
  .dia-apex .dia-m6b__layer--field {
    inset-inline-start: 8%;
    inline-size: 84%;
    inset-block-start: -17%;
    mix-blend-mode: screen;
    opacity: 0.5;
  }

  .dia-apex .dia-m6b__layer--field img {
    -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 52%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 48% 50% at 50% 52%, #000 25%, transparent 78%);
  }

  /* Floor: the shared technological arena under all three objects. */
  .dia-apex .dia-m6b__layer--floor {
    inset-inline-start: 12%;
    inline-size: 76%;
    inset-block-start: -6%;
    opacity: 0.85;
  }

  .dia-apex .dia-m6b__layer--floor img {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 66%, #000 40%, transparent 86%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 66%, #000 40%, transparent 86%);
  }

  /* Growth (Bronze, left) and protection (blue, right): behind the core, tall steps toward it. */
  .dia-apex .dia-m6b__layer--growth {
    inset-inline-start: 18%;
    inline-size: 34%;
    inset-block-start: 2%;
    opacity: 0.96;
  }

  .dia-apex .dia-m6b__layer--protect {
    inset-inline-start: 48%;
    inline-size: 34%;
    inset-block-start: 2%;
    opacity: 0.96;
  }

  .dia-apex .dia-m6b__layer--growth img,
  .dia-apex .dia-m6b__layer--protect img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
  }

  .dia-apex .dia-m6b__layer--core {
    inset-inline-start: 33%;
    inline-size: 34%;
    inset-block-start: 1%;
    z-index: 2;
  }

  /* ---------- Panels ---------- */

  .dia-apex .dia-m6b__panel {
    --m6b-edge: var(--dia-bronze);

    position: absolute;
    z-index: 3;
    inset-block-start: 8%;
    inline-size: 18.5%;
    min-inline-size: 14.5rem;
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--dia-text) 11%, transparent);
    border-radius: var(--radius-md);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--dia-text) 4%, transparent), transparent 40%),
      color-mix(in srgb, var(--dia-surface) 76%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dia-text) 6%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .dia-apex .dia-m6b__panel::before {
    content: "";
    position: absolute;
    inset-block: var(--space-4);
    inline-size: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, transparent, var(--m6b-edge), transparent);
  }

  /* Short connector toward the object it describes. */
  .dia-apex .dia-m6b__panel::after {
    content: "";
    position: absolute;
    inset-block-start: 38%;
    inline-size: 2.5rem;
    block-size: 5px;
    background:
      radial-gradient(circle at var(--m6b-node) 50%, var(--m6b-edge) 0 2px, transparent 2.5px),
      linear-gradient(var(--m6b-dir), color-mix(in srgb, var(--m6b-edge) 70%, transparent), transparent) center / 100% 1px no-repeat;
    pointer-events: none;
  }

  .dia-apex .dia-m6b__panel--up {
    inset-inline-start: 1%;
    --m6b-node: calc(100% - 2.5px);
    --m6b-dir: to right;
  }

  .dia-apex .dia-m6b__panel--up::before { inset-inline-start: -1px; }
  .dia-apex .dia-m6b__panel--up::after { inset-inline-start: calc(100% + 4px); }

  .dia-apex .dia-m6b__panel--down {
    --m6b-edge: var(--m6b-blue);
    --m6b-node: 2.5px;
    --m6b-dir: to left;

    inset-inline-end: 1%;
  }

  .dia-apex .dia-m6b__panel--down::before { inset-inline-end: -1px; }
  .dia-apex .dia-m6b__panel--down::after { inset-inline-end: calc(100% + 4px); }

  .dia-apex .dia-m6b__panel-key {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-m6b__glyph { flex: none; inline-size: var(--space-5); block-size: 2px; }
  .dia-apex .dia-m6b__glyph--open { background: var(--dia-bronze); }
  .dia-apex .dia-m6b__glyph--held { background: var(--m6b-blue); }

  .dia-apex .dia-m6b__panel-title {
    margin: var(--space-3) 0 0;
    padding-block-end: var(--space-3);
    border-block-end: 1px solid color-mix(in srgb, var(--dia-text) 12%, transparent);
    font-family: var(--font-display);
    font-size: var(--dia-fs-h4);
    font-weight: 600;
    line-height: 1.3;
    color: var(--dia-text);
  }

  .dia-apex .dia-m6b__panel-text {
    margin: var(--space-3) 0 0;
    font-size: var(--dia-fs-small);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* ---------- < 1280: scene, then the two panels side by side ---------- */

  @media (max-width: 1279px) {
    .dia-apex .dia-m6b__stage {
      aspect-ratio: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--dia-gutter);
      row-gap: var(--space-4);
      padding-inline: var(--dia-margin);
    }

    .dia-apex .dia-m6b__stage-wrap { overflow-x: clip; }

    /* The scene is drawn wider than the viewport (its sides are atmosphere) so the three objects
       stay substantial; both the Bronze and the blue structures remain inside the viewport. */
    .dia-apex .dia-m6b__scene {
      position: relative;
      inset: auto;
      grid-column: 1 / -1;
      justify-self: center;
      inline-size: 130%;
      aspect-ratio: 100 / 37;
    }

    .dia-apex .dia-m6b__panel,
    .dia-apex .dia-m6b__panel--up,
    .dia-apex .dia-m6b__panel--down {
      position: relative;
      inset: auto;
      inline-size: auto;
      min-inline-size: 0;
    }

    .dia-apex .dia-m6b__panel::after { content: none; }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-m6b { padding-block: calc(var(--m6b-feather) + var(--space-2)) var(--m6b-feather); }

    .dia-apex .dia-m6b__stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }

    /* Mobile: the scene is ~1.8 × the viewport so the core and both sides stay legible. */
    .dia-apex .dia-m6b__scene { inline-size: 180%; aspect-ratio: 100 / 40; }
  }
}

/* =====================================================================
 * V4.8 — 06B panels, synthesis band, closing line, disclaimer
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-m6b__intro { max-inline-size: 46rem; }

  /* Scene: a little narrower so the wider panels do not touch the structures. */
  .dia-apex .dia-m6b__stage { aspect-ratio: 100 / 35; }
  .dia-apex .dia-m6b__layer--growth { inset-inline-start: 21%; inline-size: 32%; inset-block-start: 6%; }
  .dia-apex .dia-m6b__layer--protect { inset-inline-start: 47%; inline-size: 32%; inset-block-start: 6%; }
  .dia-apex .dia-m6b__layer--core { inset-inline-start: 33%; inline-size: 34%; inset-block-start: 5%; }
  .dia-apex .dia-m6b__layer--floor { inset-inline-start: 14%; inline-size: 72%; inset-block-start: 0%; }
  .dia-apex .dia-m6b__layer--field { inset-block-start: -12%; }
  .dia-apex .dia-m6b__layer--floor img {
    -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 62%, #000 36%, transparent 80%);
    mask-image: radial-gradient(ellipse 50% 46% at 50% 62%, #000 36%, transparent 80%);
  }

  /* Panels: ultra-light translucent instrument panels, same tone as the 06A callouts. */
  .dia-apex .dia-m6b__panel {
    inset-block-start: 1%;
    inline-size: 23%;
    min-inline-size: 16rem;
    padding: var(--space-4) var(--space-5) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--m6b-edge) 26%, transparent);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--m6b-edge) 7%, transparent), transparent 55%),
      color-mix(in srgb, var(--dia-island-bg) 46%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dia-text) 5%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .dia-apex .dia-m6b__panel::before { content: none; }
  .dia-apex .dia-m6b__panel::after { content: none; }

  .dia-apex .dia-m6b__panel--up { inset-inline-start: 2%; }
  .dia-apex .dia-m6b__panel--down { inset-inline-end: 2%; }

  .dia-apex .dia-m6b__panel-head {
    margin: 0;
    padding-block-end: var(--space-3);
    border-block-end: 1px solid color-mix(in srgb, var(--dia-text) 12%, transparent);
    font-family: var(--font-body);
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dia-text);
  }

  .dia-apex .dia-m6b__panel-head span { color: var(--m6b-accent); }

  .dia-apex .dia-m6b__panel--up { --m6b-accent: #E0A664; }
  .dia-apex .dia-m6b__panel--down { --m6b-accent: #6FA6F2; }

  .dia-apex .dia-m6b__panel-lead {
    margin: var(--space-3) 0 0;
    font-size: var(--dia-fs-small);
    line-height: 1.55;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  .dia-apex .dia-m6b__steps {
    display: grid;
    row-gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .dia-apex .dia-m6b__step {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: start;
  }

  /* Thin continuity line between the numbered markers. */
  .dia-apex .dia-m6b__step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block: 2.25rem calc(-1 * var(--space-3));
    inset-inline-start: calc(1.125rem - 0.5px);
    inline-size: 1px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--m6b-accent) 60%, transparent), color-mix(in srgb, var(--m6b-accent) 15%, transparent));
  }

  .dia-apex .dia-m6b__num {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--m6b-accent) 70%, transparent);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--m6b-accent);
  }

  .dia-apex .dia-m6b__step-title {
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m6b-accent);
  }

  .dia-apex .dia-m6b__step-text {
    margin: 2px 0 0;
    font-size: var(--dia-fs-small);
    line-height: 1.5;
    color: #B4C1C6;
    text-wrap: pretty;
  }

  /* ---------- Synthesis band ---------- */

  .dia-apex .dia-m6b__band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inline-size: min(100% - 2 * var(--dia-margin), 64rem);
    margin: var(--space-1) auto 0;
    padding: var(--space-3) 0;
    list-style: none;
    border-block: 1px solid color-mix(in srgb, var(--dia-text) 10%, transparent);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dia-island-bg) 40%, transparent) 20%, color-mix(in srgb, var(--dia-island-bg) 40%, transparent) 80%, transparent);
  }

  .dia-apex .dia-m6b__band li {
    --m6b-t: #E0A664;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-inline: var(--space-3);
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m6b-t);
  }

  .dia-apex .dia-m6b__band li[data-tone="b"] { --m6b-t: #6FA6F2; }

  .dia-apex .dia-m6b__band li + li {
    border-inline-start: 1px solid color-mix(in srgb, var(--dia-text) 10%, transparent);
  }

  .dia-apex .dia-m6b__band-icon {
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---------- Closing line + disclaimer ---------- */

  .dia-apex .dia-m6b__synthesis {
    max-inline-size: 46rem;
    margin: var(--space-5) auto 0;
    padding-inline: var(--dia-margin);
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    color: var(--dia-text);
  }

  .dia-apex .dia-m6b__disclaimer {
    max-inline-size: 46rem;
    margin: var(--space-3) auto 0;
    padding-inline: var(--dia-margin);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* ---------- < 1280 ---------- */

  @media (max-width: 1279px) {
    .dia-apex .dia-m6b__stage { aspect-ratio: auto; }
    .dia-apex .dia-m6b__panel,
    .dia-apex .dia-m6b__panel--up,
    .dia-apex .dia-m6b__panel--down {
      position: relative;
      inset: auto;
      min-inline-size: 0;
      inline-size: auto;
    }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-m6b__band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
    .dia-apex .dia-m6b__band li:nth-child(3) { border-inline-start: 0; }
    .dia-apex .dia-m6b__band li { justify-content: flex-start; }
  }
}

/* =====================================================================
 * V4.9 — 06A → 06B chapter transition (seam only)
 *   1. 06A closes: its lower atmosphere falls back into the DIA tone (overlay below the identity line
 *      level), and its bottom edge becomes opaque so the two chapters share one continuous dark field
 *      (no light gap in Light mode).
 *   2. A controlled quiet zone replaces the old stacked paddings (28 + 0 + 52 px; before 48 + 24 + 56).
 *   3. 06B opens on a slightly deeper plane: a 260 px top-only layer (calm tone + faint Bronze / blue
 *      glows) that ramps in from the 06A tone, so there is no hard step and everything below the
 *      heading region is untouched.
 *   4. The Bronze rule becomes a soft threshold (glow + node).
 * ===================================================================== */
@layer dia.sections {
  /* 1. 06A: closing fade + opaque bottom edge */
  .dia-apex .dia-m42__band {
    padding-block-end: calc(var(--m42-feather) - var(--space-3));
  }

  .dia-apex .dia-m42__band::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m42-feather));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--m42-feather));
  }

  .dia-apex .dia-m42__band::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 6rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--dia-island-bg) 70%, transparent) 55%, var(--dia-island-bg) 100%);
  }

  /* 2. quiet zone: no extra margin; 06B's own top padding is reduced */
  .dia-apex .dia-m6b {
    margin-block-start: 0;
    padding-block-start: calc(var(--m6b-feather) + var(--space-3));
  }

  .dia-apex .dia-m6b::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--m6b-feather)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--m6b-feather)), transparent 100%);
  }

  /* 3. deeper opening plane, top only */
  .dia-apex .dia-m6b::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 16.25rem;
    pointer-events: none;
    background:
      radial-gradient(ellipse 22% 45% at 37% 38%, rgb(214 150 76 / 0.10), transparent 72%),
      radial-gradient(ellipse 22% 45% at 63% 38%, rgb(60 120 220 / 0.11), transparent 72%),
      linear-gradient(to bottom, transparent 0, rgb(1 6 10 / 0.5) 30%, rgb(1 6 10 / 0.3) 58%, transparent 100%);
  }

  /* 4. the rule as a threshold */
  .dia-apex .dia-m6b__eyebrow::before {
    box-shadow: 0 0 14px 1px rgb(182 120 60 / 0.45);
  }

  @media (max-width: 767px) {
    .dia-apex .dia-m6b { padding-block-start: calc(var(--m6b-feather) + var(--space-1)); }
    .dia-apex .dia-m6b::after { block-size: 12rem; }
  }
}

/* ===== from section-06a-v5-4.css ===== */
/*
 * DIA CAPITAL — Section 06A · V5.4 (TEST; V5.3 + the centering block at the end). Loads AFTER section-06-v4.css and section-06-v4-9.css. The composition is the
 * approved pre-V5 06A, untouched: same stage, core, energy waves (canonical opacities 0.8 / 0.72), callouts, connectors.
 * The only change: the plate in .dia-m42__layer--bg is now the TRANSPARENT environment image, so the dark ground that the
 * old opaque image carried is supplied by CSS here. The environment keeps the old plate's geometry and treatment
 * (125 % wide, same offsets, screen blend, radial dissolve mask — inherited from the canonical rules).
 */
@layer dia.sections {
  /* Quiet CSS dark field behind the transparent environment (the lighting detail lives in the image). */
  .dia-apex .dia-m42__stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60% -10% -10%;
    pointer-events: none;
    background:
      radial-gradient(ellipse 34% 30% at 50% 58%, rgb(61 120 220 / 0.07), transparent 72%),
      radial-gradient(ellipse 40% 16% at 50% 84%, rgb(201 138 75 / 0.05), transparent 72%),
      linear-gradient(to bottom, rgb(4 12 19 / 0), rgb(4 11 17 / 0.45) 40%, rgb(4 11 17 / 0.3));
  }

  /* V5.4 — the environment follows the Matrix core: centred on the stage (the core group is centred at 50 % at every
     breakpoint). Width, height, opacity, blend, mask and vertical offset are the canonical ones, unchanged. */
  .dia-apex .dia-m42__layer--bg {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
}