/* ============================================================
 * DAMAROS — Combined sections.
 * ============================================================ */

/* smooth WebGL fade-in — no glitchy first-frame pop */
#world { opacity: 0; transition: opacity .55s ease; }
body.world-ready #world { opacity: 1; }
 *   · Execution Spine  (Protocol · Evidence · Screening · Resolve · Replay)
 *       2×2 pipeline grid with Replay solo in the third column, vertically centered.
 *   · Trial Intelligence (Node ↔ Sponsor)
 *       one verified signal, read from two halves.
 * Tokens, fonts, .cap / .cap-box / .chip come from journey.css.
 * ============================================================ */

/* ============================================================
 * EXECUTION SPINE
 * ============================================================ */
.cap.es {
  width: min(70rem, calc(100vw - 2 * var(--page-gutter)));
  max-width: min(70rem, calc(100vw - 2 * var(--page-gutter)));
  text-align: center;
}
.es-title {
  margin: .4rem 0 0;
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: .92; letter-spacing: -.04em;
  color: var(--cold); text-wrap: balance;
}

/* punchy subheading that sits close under every section headline */
.cap-subhead {
  margin: .5rem auto 0; max-width: 46ch; font-family: var(--fb); font-weight: 600;
  font-size: clamp(1.05rem, 1.65vw, 1.38rem); line-height: 1.28; letter-spacing: -.005em;
  color: var(--steel); text-wrap: balance;
}
.cap-subhead em { font-style: normal; color: var(--cold); }

/* cards — minimal & chic: a soft refined surface with a hairline edge catching light, Archivo headers */
.cap-box {
  border-radius: 16px;
  border: 1px solid rgba(169, 192, 214, .13);
  background: linear-gradient(180deg, rgba(169, 192, 214, .05), rgba(169, 192, 214, .01) 62%), rgba(11, 15, 22, .5);
  box-shadow: inset 0 1px 0 rgba(232, 236, 240, .07);
}
.cap-box:hover {
  border-color: rgba(169, 192, 214, .32);
  box-shadow: inset 0 1px 0 rgba(232, 236, 240, .12), 0 18px 46px rgba(5, 7, 11, .5);
}
.cap-box-h {
  font-family: var(--fh); font-weight: 600; letter-spacing: -.012em; font-size: 1rem; color: #f5f8fb;
}

/* ---- the four stages, shown at once: a clean 2x2 grid on desktop / laptop
   (same two-panel grammar as Platform Substrate / Trial Intelligence),
   a horizontal swipe carousel on mobile (Protocol · Evidence · Screening · Replay) ---- */
.es-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch;
  gap: clamp(1rem, 1.8vw, 1.6rem); margin: clamp(1.4rem, 3.4vh, 2.2rem) auto 0; text-align: left;
}
.es-stage-card {
  position: relative; display: flex; flex-direction: column; gap: clamp(.75rem, 1.1vw, 1rem);
}
/* heading + subhead now sit OUTSIDE the surface, free on the field, for more negative space */
.es-stage-head { display: flex; flex-direction: column; gap: .2rem; padding: 0 clamp(.15rem, .4vw, .45rem); }
.es-stage-tag { display: none; }
.es-stage-head h3 {
  margin: .1rem 0 0; font-family: var(--fh); font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -.02em; color: var(--steel);
}
.es-stage-sub { display: none; }
.es-stage-sub em { font-style: normal; color: var(--cold); }
.es-stage-cards {
  display: flex; flex-direction: column; gap: clamp(.85rem, 1.5vw, 1.25rem);
  padding: clamp(1rem, 1.5vw, 1.45rem) clamp(1.05rem, 1.5vw, 1.45rem);
  border: 1px solid rgba(169, 192, 214, .2); border-radius: 16px;
  background: linear-gradient(180deg, rgba(169, 192, 214, .07), rgba(169, 192, 214, .02)), rgba(8, 11, 17, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.es-stage-card:hover .es-stage-cards { border-color: rgba(169, 192, 214, .42); box-shadow: 0 14px 40px rgba(5, 7, 11, .5); transform: translateY(-2px); }
/* open, editorial rows (no box-in-box) so the section breathes instead of reading as a wall of text */
.es-stage-cards .cap-box { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.es-stage-cards .cap-box:hover { border: 0; background: none; box-shadow: none; transform: none; }
.es-stage-cards .cap-box + .cap-box { border-top: 1px solid rgba(169, 192, 214, .12); padding-top: clamp(.85rem, 1.5vw, 1.25rem); }
.es-stage-cards .cap-box-h { font-size: clamp(.9rem, 1vw, .98rem); }
.es-stage-cards .cap-box-b { font-size: clamp(.82rem, .95vw, .9rem); margin-top: .42rem; line-height: 1.5; color: rgba(232, 236, 240, .64); }

/* three verdict dots — on the screening card's header line */
.es-card--verdict .cap-box-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.es-dots { display: flex; gap: .4rem; flex: none; }
.es-dots i { width: 7px; height: 7px; border-radius: 50%; }
.es-dots .ev--pass { background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 55%, transparent); }
.es-dots .ev--review { background: var(--amber); box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent); }
.es-dots .ev--fail { background: var(--breach); box-shadow: 0 0 6px color-mix(in srgb, var(--breach) 55%, transparent); }

/* ============================================================
 * TRIAL INTELLIGENCE  (Node ↔ Sponsor)
 * ============================================================ */
.cap.ti {
  width: min(70rem, calc(100vw - 2 * var(--page-gutter)));
  max-width: min(70rem, calc(100vw - 2 * var(--page-gutter)));
  text-align: center;
}
.ti-title {
  margin: .4rem 0 0; font-family: var(--fh); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: .92; letter-spacing: -.04em; color: var(--cold);
}
.ti-split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  gap: clamp(1rem, 2.6vw, 1.8rem); margin: clamp(1.2rem, 3vh, 1.8rem) auto 0; text-align: left;
}

/* product panel shell — Node · Console · Trident · Luna · Eye · Sentinel */
.cap.cap--active .ti-half, .cap.cap--active .ps-half { pointer-events: auto; }
.ti-half,
.ps-half {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem); border: none; border-radius: 14px;
  --panel-ring: rgba(169, 192, 214, .22);
  box-shadow: inset 0 0 0 1px var(--panel-ring);
  background: linear-gradient(180deg, rgba(169, 192, 214, .07), rgba(169, 192, 214, .02)), rgba(8, 11, 17, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), opacity .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ti-half:hover,
  .ps-half:hover {
    --panel-ring: rgba(169, 192, 214, .42);
    box-shadow: inset 0 0 0 1px var(--panel-ring), 0 14px 40px rgba(5, 7, 11, .5);
    transform: translateY(-2px);
  }
}
.ti-half.is-emph { --panel-ring: rgba(169, 192, 214, .4); }

.ti-half-head h3 {
  margin: .15rem 0 0; font-family: var(--fh); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; color: var(--cold);
}
.ti-tag {
  font-family: var(--fb); font-size: .58rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--steel);
}
.ti-sub {
  margin: .4rem 0 0; font-family: var(--fb); font-size: .9rem; line-height: 1.45;
  color: rgba(232, 236, 240, .78);
}
.ti-sub em { font-style: normal; color: var(--steel); }

/* ---- NODE visual: a small cluster of community sites that pulse green from the hub ---- */
.ti-node-viz {
  display: flex; align-items: center; justify-content: center; gap: clamp(9px, 1.65vw, 15px);
  margin: .2rem 0;
}
.ti-sq {
  position: relative; border: 1.5px solid rgba(169, 192, 214, .4); border-radius: 9px;
  background:
    repeating-linear-gradient(0deg, rgba(169, 192, 214, .1) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(169, 192, 214, .1) 0 1px, transparent 1px 9px),
    rgba(169, 192, 214, .03);
  box-shadow: inset 0 0 14px rgba(5, 7, 11, .5);
  transition: border-color .23s var(--ease), box-shadow .23s var(--ease);
}
.ti-sq--s { width: clamp(33px, 4.4vw, 44px); height: clamp(33px, 4.4vw, 44px); border-radius: 8px; }
.ti-sq--m { width: clamp(46px, 5.9vw, 62px); height: clamp(46px, 5.9vw, 62px); }
.ti-sq--l { width: clamp(59px, 7.7vw, 79px); height: clamp(59px, 7.7vw, 79px); border-radius: 12px; }
.ti-sq::after {
  content: ""; position: absolute; inset: 30%; border-radius: 3px;
  background: rgba(169, 192, 214, .16); transition: background .23s var(--ease), box-shadow .23s var(--ease);
}
/* node emit — each site pulses green on its own random clock (re-rolled per hover in JS) */
.ti-node.is-firing .ti-sq { will-change: border-color, box-shadow; animation: tiSite var(--dur, 1.4s) var(--ease) var(--d, 0s) infinite; }
.ti-node.is-firing .ti-sq::after { will-change: background, box-shadow; animation: tiSiteCore var(--dur, 1.4s) var(--ease) var(--d, 0s) infinite; }
@keyframes tiSite {
  0%, 100% { border-color: rgba(169, 192, 214, .4); box-shadow: inset 0 0 14px rgba(5,7,11,.5); }
  42% { border-color: var(--ok); box-shadow: inset 0 0 14px color-mix(in srgb, var(--ok) 20%, rgba(5,7,11,.5)), 0 0 16px color-mix(in srgb, var(--ok) 45%, transparent); }
}
@keyframes tiSiteCore {
  0%, 100% { background: rgba(169, 192, 214, .16); box-shadow: none; }
  42% { background: var(--ok); box-shadow: 0 0 9px color-mix(in srgb, var(--ok) 60%, transparent); }
}
/* a few sites resolve stone-blue instead of green (random per hover) */
.ti-node.is-firing .ti-sq--steel { animation-name: tiSiteSteel; }
.ti-node.is-firing .ti-sq--steel::after { animation-name: tiSiteSteelCore; }
@keyframes tiSiteSteel {
  0%, 100% { border-color: rgba(169, 192, 214, .4); box-shadow: inset 0 0 14px rgba(5,7,11,.5); }
  42% { border-color: var(--steel); box-shadow: inset 0 0 14px rgba(169,192,214,.16), 0 0 16px rgba(169,192,214,.5); }
}
@keyframes tiSiteSteelCore {
  0%, 100% { background: rgba(169, 192, 214, .16); box-shadow: none; }
  42% { background: var(--steel); box-shadow: 0 0 9px rgba(169,192,214,.6); }
}

/* ---- SPONSOR visual: the aggregated operating matrix ---- */
.ti-matrix {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
  height: clamp(103px, 14.3vh, 128px); margin: .2rem 0;
}
.ti-cell {
  border-radius: 3px; background: rgba(169, 192, 214, .08);
  border: 1px solid rgba(169, 192, 214, .12);
  transition: background .23s var(--ease), border-color .23s var(--ease), box-shadow .23s var(--ease);
}
/* reading — cells pulse on their own random clock; a few flag green / amber each pass */
.ti-sponsor.is-reading .ti-cell { will-change: background, border-color, box-shadow; animation: tiCell var(--dur, 1.6s) var(--ease) var(--d, 0s) infinite; }
.ti-sponsor.is-reading .ti-cell--ok { animation-name: tiCellOk; }
.ti-sponsor.is-reading .ti-cell--review { animation-name: tiCellReview; }
.ti-sponsor.is-reading .ti-cell--fail { animation-name: tiCellFail; }
@keyframes tiCell {
  0%, 100% { background: rgba(169, 192, 214, .08); border-color: rgba(169, 192, 214, .12); box-shadow: none; }
  50% { background: rgba(169, 192, 214, .26); border-color: rgba(169, 192, 214, .34); }
}
@keyframes tiCellOk {
  0%, 100% { background: rgba(169, 192, 214, .1); border-color: rgba(169, 192, 214, .16); box-shadow: none; }
  50% { background: color-mix(in srgb, var(--ok) 42%, transparent); border-color: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 40%, transparent); }
}
@keyframes tiCellReview {
  0%, 100% { background: rgba(169, 192, 214, .1); border-color: rgba(169, 192, 214, .16); box-shadow: none; }
  50% { background: color-mix(in srgb, var(--amber) 42%, transparent); border-color: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 45%, transparent); }
}
@keyframes tiCellFail {
  0%, 100% { background: rgba(169, 192, 214, .1); border-color: rgba(169, 192, 214, .16); box-shadow: none; }
  50% { background: color-mix(in srgb, var(--breach) 42%, transparent); border-color: var(--breach); box-shadow: 0 0 10px color-mix(in srgb, var(--breach) 48%, transparent); }
}

.ti-cards { display: flex; flex-direction: column; gap: .7rem; }

/* ============================================================
 * PLATFORM SUBSTRATE  (Trident · Luna) — a two-layer lens toggle
 * ============================================================ */
.cap.ps {
  width: min(70rem, calc(100vw - 2 * var(--page-gutter)));
  max-width: min(70rem, calc(100vw - 2 * var(--page-gutter)));
  text-align: center;
}
.ps-title {
  margin: .4rem 0 0; font-family: var(--fh); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: .92; letter-spacing: -.04em; color: var(--cold);
}
/* both layers shown side by side — same two-panel grammar as Node / Console */
.ps-split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  gap: clamp(1rem, 2.6vw, 1.8rem); margin: clamp(1.2rem, 3vh, 1.8rem) auto 0; text-align: left;
}
.ps-half-head h3 {
  margin: .15rem 0 0; font-family: var(--fh); font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.15rem); letter-spacing: -.03em; color: var(--cold);
}
.ps-tag {
  font-family: var(--fb); font-size: .58rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--steel);
}
.ps-sub {
  margin: .5rem 0 0; font-family: var(--fb); font-size: .95rem; line-height: 1.45;
  color: rgba(232, 236, 240, .78);
}
.ps-sub em { font-style: normal; color: var(--steel); }
.ps-cards { display: flex; flex-direction: column; gap: .7rem; margin-top: .3rem; }

/* layer fields — parallel to the Node cluster / Console matrix */
.ps-field { display: flex; align-items: center; justify-content: center; height: clamp(136px, 18.7vh, 169px); margin: .2rem 0; }

/* TRIDENT — stable lattice; engage sends a smooth left-to-right activation wave */
.nn, .luna-svg {
  width: 100%; height: 100%; overflow: visible;
  shape-rendering: geometricPrecision;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.nn-edge {
  stroke: var(--ok); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-opacity: 0;
}
.nn-dot { fill: rgba(169, 192, 214, .32); }
.ps-half.is-live .nn-edge {
  animation: nnEdgeFlow var(--dur, 4.2s) ease-in-out var(--d, 0s) infinite;
}
.ps-half.is-live .nn-dot.nn-dot--live {
  animation: nnDotFlow var(--dur, 4.2s) ease-in-out var(--d, 0s) infinite;
}
@keyframes nnEdgeFlow {
  0%, 100% { stroke-opacity: 0; }
  10% { stroke-opacity: 0; }
  26% { stroke-opacity: 1; }
  40% { stroke-opacity: .62; }
  56% { stroke-opacity: 0; }
}
@keyframes nnDotFlow {
  0%, 100% { fill: rgba(169, 192, 214, .32); }
  10% { fill: rgba(169, 192, 214, .32); }
  28% { fill: var(--ok); }
  42% { fill: color-mix(in srgb, var(--ok) 72%, rgba(169, 192, 214, .32)); }
  58% { fill: rgba(169, 192, 214, .34); }
}

/* LUNA — three oblique governance rings built from cleanly-spaced dots; turn CW · CCW · CW on engage */
.luna-svg { width: clamp(136px, 19.8vw, 178px); height: auto; }
.luna-ring circle { fill: var(--luna); opacity: .42; transition: opacity .2s var(--ease); }
.luna-ring {
  transform-box: fill-box; transform-origin: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.ps-half--luna.is-live .luna-ring circle { opacity: 1; }
.ps-half--luna.is-live .luna-ring--1 { will-change: transform; animation: lunaCW 13s linear infinite; }
.ps-half--luna.is-live .luna-ring--2 { will-change: transform; animation: lunaCCW 10s linear infinite; }
.ps-half--luna.is-live .luna-ring--3 { will-change: transform; animation: lunaCW 7s linear infinite; }
@keyframes lunaCW { to { transform: rotate(360deg) translateZ(0); } }
@keyframes lunaCCW { to { transform: rotate(-360deg) translateZ(0); } }

/* ============================================================
 * OPERATIONS MESH  (Eye · Sentinel)
 * Eye, LIVE: Node/Console map zones with sky/stone signals crossing the field.
 * ============================================================ */

.fg-svg, .rt-svg, .ey-svg {
  width: 100%; height: 100%; overflow: hidden;
  shape-rendering: geometricPrecision;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.ps-field.ps-eye { overflow: hidden; }
.ps-field.ps-sentinel, .ps-field.ps-router { overflow: hidden; border-radius: 50%; }

/* FORGE, scattered fragments pulse in a sweep and gather into one packet. Sky blue, no lines. */
.ps-half--forge { --fg-sky: #7ec8e9; --fg-sky-dim: rgba(126, 200, 233, .28); }
.fg-frag { fill: var(--fg-sky-dim); }
.fg-box { fill: rgba(126, 200, 233, .06); stroke: rgba(126, 200, 233, .24); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ps-half--forge.is-live .fg-frag { animation: fgFrag var(--dur, 3.2s) var(--ease) var(--d, 0s) infinite; }
.ps-half--forge.is-live .fg-box { animation: fgBox var(--dur, 3.4s) var(--ease) var(--d, 0s) infinite; }
@keyframes fgFrag {
  0%, 100% { fill: rgba(126, 200, 233, .26); opacity: 1; }
  38% { fill: var(--fg-sky); opacity: 1; }
  52% { fill: var(--fg-sky); opacity: .25; }
  68% { fill: rgba(126, 200, 233, .26); opacity: 1; }
}
@keyframes fgBox {
  0%, 100% { fill: rgba(126, 200, 233, .06); stroke: rgba(126, 200, 233, .24); }
  48% { fill: color-mix(in srgb, var(--fg-sky) 22%, transparent); stroke: var(--fg-sky); }
  72% { fill: color-mix(in srgb, var(--fg-sky) 32%, transparent); stroke: var(--fg-sky); }
}

/* ROUTER — compact ATC radar: an amber sweep line anchored at center spins at a
   constant rate, dragging a fading wake; amber contacts light as it passes and
   trail off behind it. */
.rt-ring { fill: none; stroke: rgba(169, 192, 214, .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rt-grid { stroke: rgba(169, 192, 214, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rt-sweep-g { transform-box: view-box; transform-origin: 50px 50px; }
.rt-wake { fill: var(--amber); }
.rt-wake--1 { opacity: .2; }
.rt-wake--2 { opacity: .085; }
.rt-sweep { stroke: var(--amber); stroke-width: 1.35; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.rt-core { fill: rgba(169, 192, 214, .5); stroke: rgba(169, 192, 214, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rt-dot { fill: var(--amber); opacity: .1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.ps-half--router.is-live .rt-sweep-g { animation: rtSweep var(--rt-sweep-dur, 4.8s) linear infinite; }
.ps-half--router.is-live .rt-dot { animation: rtDotWake var(--dur, 4.8s) linear infinite var(--d, 0s); }
@keyframes rtSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rtDotWake {
  0% { opacity: 1; transform: scale(1.7); filter: drop-shadow(0 0 3px rgba(217, 162, 62, .7)); }
  10% { opacity: .8; transform: scale(1); filter: none; }
  45% { opacity: 0; transform: scale(1); filter: none; }
  100% { opacity: 0; transform: scale(1); filter: none; }
}

/* EYE — Node ↔ Console map: vertical zones, terrain grid, bidirectional signals */
.ps-half--eye { --eye-sky: #7ec8e9; --eye-sky-dim: rgba(126, 200, 233, .28); }
.ey-map-line { stroke: rgba(169, 192, 214, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ey-zone { fill: rgba(8, 11, 17, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ey-zone--node { stroke: rgba(126, 200, 233, .38); fill: rgba(126, 200, 233, .06); }
.ey-zone--sponsor { stroke: rgba(169, 192, 214, .36); fill: rgba(169, 192, 214, .05); }
.ey-signal { opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.ey-signal--sky { fill: var(--eye-sky); }
.ey-signal--steel { fill: var(--steel); }
.ps-half--eye.is-live .ey-zone--node { animation: eyZoneGlowNode 3.2s var(--ease) infinite; }
.ps-half--eye.is-live .ey-zone--sponsor { animation: eyZoneGlowSponsor 3.2s var(--ease) infinite .8s; }
.ps-half--eye.is-live .ey-signal--lr { animation: eySignalLR var(--dur, 2.6s) cubic-bezier(0.42, 0, 0.58, 1) infinite var(--d, 0s); }
.ps-half--eye.is-live .ey-signal--rl { animation: eySignalRL var(--dur, 2.6s) cubic-bezier(0.42, 0, 0.58, 1) infinite var(--d, 0s); }
@keyframes eySignalLR {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; filter: drop-shadow(0 0 3px rgba(126, 200, 233, .55)); }
  90% { opacity: .82; filter: none; }
  100% { transform: translate(var(--ey-span, 84px), var(--ey-y, 0)); opacity: 0; filter: none; }
}
@keyframes eySignalRL {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; filter: drop-shadow(0 0 3px rgba(169, 192, 214, .55)); }
  90% { opacity: .82; filter: none; }
  100% { transform: translate(calc(var(--ey-span, 84px) * -1), var(--ey-y, 0)); opacity: 0; filter: none; }
}
@keyframes eyZoneGlowNode {
  0%, 100% { stroke: rgba(126, 200, 233, .32); }
  50% { stroke: rgba(126, 200, 233, .55); }
}
@keyframes eyZoneGlowSponsor {
  0%, 100% { stroke: rgba(169, 192, 214, .3); }
  50% { stroke: rgba(169, 192, 214, .52); }
}

/* SENTINEL — opportunity radar sweep (amber, repurposed Router viz) */
.ps-half--sentinel.is-live .rt-sweep-g { animation: rtSweep var(--rt-sweep-dur, 4.8s) linear infinite; }
.ps-half--sentinel.is-live .rt-dot { animation: rtDotWake var(--dur, 4.8s) linear infinite var(--d, 0s); }

/* ============================================================
 * COMPACT SYMBOL — the live field parks at the TOP-RIGHT of each panel head
 * (Platform Substrate + Trial Intelligence), capped to the head's own height
 * so it never out-sizes the title + subhead. Same treatment, mobile + desktop.
 * ============================================================ */
.ps-topline, .ti-topline {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(.7rem, 1.7vw, 1.2rem);
}
.ps-topline .ps-half-head, .ti-topline .ti-half-head { flex: 1 1 auto; min-width: 0; }
.ps-field, .ti-node-viz, .ti-matrix {
  flex: 0 0 auto; align-self: flex-start; margin: 0;
  width: var(--viz-w, clamp(97px, 11vw, 128px));
  height: var(--viz-h, clamp(57px, 7.7vh, 79px));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0);
}
/* Luna · Trident · Node run a touch larger than the Console matrix */
.ps-field, .ti-node-viz { height: calc(var(--viz-h, clamp(57px, 7.7vh, 79px)) * 1.13); }
.ps-field { width: calc(var(--viz-w, clamp(97px, 11vw, 128px)) * 1.13); }
.ti-node-viz { width: auto; }
.luna-svg { width: 100%; height: 100%; }
.ti-topline .ti-matrix { gap: 4px; }
/* compact node-site cluster — small enough to live in the header corner */
.ti-topline .ti-node-viz { gap: 4px; width: var(--viz-w, clamp(97px, 11vw, 128px)); max-width: var(--viz-w, clamp(97px, 11vw, 128px)); height: var(--viz-h, clamp(57px, 7.7vh, 79px)); justify-content: center; align-items: center; overflow: hidden; }
.ti-topline .ti-sq--s { width: 17px; height: 17px; border-radius: 4px; }
.ti-topline .ti-sq--m { width: 24px; height: 24px; border-radius: 6px; }
.ti-topline .ti-sq--l { width: 31px; height: 31px; border-radius: 8px; }

.hswipe-nav { display: none; }

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

/* Desktop / laptop: Platform Substrate + Trial Intelligence carry two full panels,
 * so on short laptop viewports (e.g. MacBook Chrome) the centered block grew tall
 * enough to ride up under the fixed top nav. Nudge the section down a touch and let
 * every interior element scale to viewport HEIGHT (min() caps do nothing on tall
 * screens, shrink gracefully on short ones) so it always clears the header. */
@media (min-width: 821px) {
  .cap.ps, .cap.ti { top: calc(50% + clamp(.4rem, 1.8vh, 1.4rem)); }
  .cap.es { top: calc(50% - clamp(.6rem, 2.2vh, 1.4rem)); }
  .ps-title, .ti-title { font-size: min(clamp(2.2rem, 5vw, 3.7rem), 6.2vh); }
  .es-title { font-size: min(clamp(2rem, 4.4vw, 3.2rem), 5.2vh); }
  .cap.es .cap-subhead { font-size: min(clamp(1.05rem, 1.6vw, 1.32rem), 2.4vh); margin-top: clamp(.3rem, 1.1vh, .5rem); }
  .es-grid { margin-top: min(clamp(1.2rem, 3vh, 2rem), 3.2vh); gap: min(clamp(.8rem, 1.5vw, 1.3rem), 1.7vh); }
  .es-stage-card { gap: min(clamp(.7rem, 1.1vw, 1rem), 1.5vh); }
  .es-stage-head h3 { font-size: min(clamp(1.05rem, 1.55vw, 1.35rem), 2.5vh); }
  .cap.es .es-stage-sub { font-size: min(.9rem, 1.9vh); margin-top: .12rem; }
  .es-stage-cards { gap: min(clamp(.85rem, 1.5vw, 1.25rem), 1.8vh); padding: min(1.6vh, 1.3rem) clamp(1.1rem, 1.5vw, 1.4rem); }
  .es-stage-cards .cap-box + .cap-box { padding-top: min(clamp(.85rem, 1.5vw, 1.25rem), 1.8vh); }
  .es-stage-cards .cap-box-h { font-size: min(.94rem, 2vh); }
  .es-stage-cards .cap-box-b { margin-top: min(.42rem, .8vh); line-height: 1.5; }
  .cap.ps .cap-subhead, .cap.ti .cap-subhead {
    font-size: min(clamp(1.05rem, 1.65vw, 1.38rem), 2.5vh); margin-top: clamp(.35rem, 1.2vh, .55rem);
  }
  .ps-split, .ti-split { margin-top: min(clamp(1.2rem, 3vh, 1.8rem), 2.6vh); }
  .ps-half-head h3, .ti-half-head h3 { font-size: min(clamp(1.5rem, 2.7vw, 2.15rem), 3.4vh); }
  .ps-sub, .ti-sub { font-size: min(.95rem, 2vh); margin-top: min(.4rem, 1vh); }
  .cap.ps, .cap.ti { --viz-h: min(79px, 9.9vh); --viz-w: min(130px, 13.75vw); }
  .ti-half .cap-box, .ps-half .cap-box { padding: min(1rem, 1.7vh) 1.15rem; }
  .ti-cards, .ps-cards { gap: min(.7rem, 1.4vh); }
}

@media (max-width: 820px) {
  .cap.es, .cap.ti, .cap.ps, .cap.gapcap { width: min(34rem, 92vw); max-width: min(34rem, 92vw); }

  /* section headlines — nudge down for breathing room above the carousel */
  .cap.es .es-title, .cap.ti .ti-title, .cap.ps .ps-title, .cap.gapcap .gap-title { margin-top: clamp(.85rem, 3.6vh, 1.2rem); }
  .cap.ti .cap-subhead, .cap.ps .cap-subhead, .cap.gapcap .gap-lead { margin-top: clamp(.55rem, 2.2vh, .75rem); }

  /* every multi-panel section → a horizontal swipe carousel (one panel at a time) */
  .es-grid, .ti-split, .ps-split, .gap-grid {
    grid-template-columns: none; display: flex; flex-wrap: nowrap;
    gap: clamp(.75rem, 4.2vw, 1.1rem); overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; scroll-snap-stop: always; overscroll-behavior-x: contain;
    scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pinch-zoom;
    margin-top: clamp(.85rem, 2.6vh, 1.25rem);
  }
  .es-grid::-webkit-scrollbar, .ti-split::-webkit-scrollbar, .ps-split::-webkit-scrollbar, .gap-grid::-webkit-scrollbar { display: none; }
  .es-stage-card, .ti-half, .ps-half, .gap-col {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; gap: clamp(.65rem, 3vw, .85rem);
    padding: clamp(.82rem, 3.6vw, 1.1rem) clamp(.88rem, 3.8vw, 1.15rem);
    transform: none;   /* touch must not lift cards — hover translateY was clipping the colored top edge */
  }
  .ps-half.is-live {
    --panel-ring: rgba(169, 192, 214, .42);
    box-shadow: inset 0 0 0 1px var(--panel-ring), 0 14px 40px rgba(5, 7, 11, .5);
  }

  /* compact internals so one panel fits the viewport */
  .cap.ps, .cap.ti { --viz-h: clamp(51px, 9.9vw, 70px); --viz-w: clamp(81px, 20.9vw, 114px); }
  .es-stage-head h3, .ti-half-head h3, .ps-half-head h3 { font-size: clamp(1.38rem, 6.8vw, 1.72rem); }
  .es-stage-sub, .ti-sub, .ps-sub { font-size: clamp(.82rem, 3.6vw, .88rem); margin-top: clamp(.28rem, 1.2vw, .38rem); }
  .es-stage-cards, .ti-cards, .ps-cards { gap: clamp(.42rem, 2vw, .5rem); }
  .es-stage-cards .cap-box, .ti-half .cap-box, .ps-half .cap-box { padding: clamp(.72rem, 3.2vw, .95rem) clamp(.82rem, 3.5vw, 1.05rem); }
  .es-stage-cards .cap-box-h, .ti-half .cap-box-h, .ps-half .cap-box-h { font-size: clamp(.82rem, 3.6vw, .88rem); }
  .es-stage-cards .cap-box-b, .ti-half .cap-box-b, .ps-half .cap-box-b { font-size: clamp(.78rem, 3.4vw, .84rem); margin-top: clamp(.38rem, 1.6vw, .48rem); }
  .ti-topline .ti-node-viz,
  .ti-topline .ti-matrix {
    width: var(--viz-w); height: var(--viz-h); flex: 0 0 var(--viz-w);
    max-width: var(--viz-w); max-height: var(--viz-h); margin: 0; overflow: hidden;
  }
  .ti-topline .ti-node-viz {
    gap: 3px; justify-content: center; align-items: center;
  }
  .ti-topline .ti-sq--s { width: 11px; height: 11px; border-radius: 3px; }
  .ti-topline .ti-sq--m { width: 15px; height: 15px; border-radius: 4px; }
  .ti-topline .ti-sq--l { width: 19px; height: 19px; border-radius: 5px; }
  .ti-half.ti-node,
  .ti-half.ti-sponsor { min-height: 0; }
  .ti-half .ti-topline { gap: clamp(.55rem, 2.8vw, .75rem); align-items: flex-start; }
  .ti-half .ti-cards { margin-top: 0; }
  .cap.ti .ti-coexist { margin-top: clamp(.45rem, 1.2vh, .65rem); }
  .cap.ti .ti-coexist .co-deploy { font-size: clamp(.62rem, 2.7vw, .72rem); line-height: 1.28; }

  /* mobile panel switcher — disabled; swipe-only carousels */
  .hswipe-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .es-stage-card, .es-stage-cards,
  .ti-half, .ti-cell, .ti-sq, .ps-half { transition: none; }
  .ti-node.is-firing .ti-sq, .ti-node.is-firing .ti-sq::after,
  .ti-sponsor.is-reading .ti-cell,
  .ps-half.is-live .nn-edge, .ps-half.is-live .nn-dot, .luna-ring,
  .ps-half--forge.is-live .fg-frag, .ps-half--forge.is-live .fg-box,
  .ps-half--eye.is-live .ey-signal, .ps-half--eye.is-live .ey-zone,
  .ps-half--sentinel.is-live .rt-sweep-g, .ps-half--sentinel.is-live .rt-dot,
  .ps-half--router.is-live .rt-sweep-g, .ps-half--router.is-live .rt-dot { animation: none; }
  .es-facet { opacity: 1; visibility: visible; position: static; }
  .es-facet:not(.facet--active) { display: none; }
}