/* =============================================================================
 * ArgentumX · landing.css
 * Rebuild pass · scroll storytelling + financial surfaces
 * Design engineering under DEC-018/019 (repo-local pointer + AGENTS.md govern)
 * ========================================================================== */

:root{
  --bg:#040814;
  --bg-2:#07101f;
  --bg-3:#0a1730;
  --surface:#0a1528;
  --surface-2:#0d1a30;
  --surface-3:#111f3a;
  --text:#eef3f8;
  --text-dim:#c3ced9;
  --muted:#a7b2c1;
  --muted-2:#7c8898;
  --muted-3:#535e6f;
  --line:rgba(214,225,239,.12);
  --line-2:rgba(214,225,239,.2);
  --line-3:rgba(214,225,239,.32);
  --celeste:#74acdf;
  --celeste-hi:#9bc8ee;
  --celeste-lo:#2b5f8e;
  --auric:#e6c96a;
  --auric-light:#f3e2a6;
  --auric-deep:#c9a441;
  --green:#4ed6a1;
  --amber:#f0c66f;
  --red:#ef7b83;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 640px at 90% -6%,rgba(116,172,223,.10),transparent 55%),
    radial-gradient(900px 500px at -10% 30%,rgba(230,201,106,.045),transparent 60%),
    linear-gradient(180deg,#040814 0%,#050b17 40%,#040915 100%);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.010) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 70%);
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{color:inherit}
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.container{width:min(1240px,calc(100% - 56px));margin-inline:auto}

.skip-link{position:fixed;left:20px;top:-80px;z-index:200;background:var(--celeste);color:#04101c;padding:10px 14px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}

/* =============================================================================
 * HEADER
 * ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(4,8,20,.78);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
.header-inner{
  height:100%;
  width:min(1400px,calc(100% - 40px));
  margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
}
.brand-lockup{display:inline-flex;align-items:center;gap:13px;min-width:max-content}
.brand-symbol{display:block;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(230,201,106,.18))}
/* Wordmark: line-height 1.25 + visible overflow + descender padding.
   Fixes "g" clipping without noticeably increasing the wordmark size. */
.brand-wordmark{
  font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.02em;
  line-height:1.25;display:inline-flex;align-items:baseline;
  padding-bottom:2px;overflow:visible;
}
.brand-argentum,.brand-x{display:inline-block;line-height:1.25;padding-bottom:2px;overflow:visible}
.brand-argentum{
  background:linear-gradient(180deg,#f4ecd0 0%,#e6c96a 60%,#c9a441 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.brand-x{
  margin-left:1px;
  color:#f6ebc0;
  text-shadow:0 0 22px rgba(230,201,106,.35);
}
.main-nav{display:flex;justify-content:center;gap:24px;font-size:12px;color:var(--muted)}
.main-nav a{position:relative;padding:8px 0;transition:color .22s ease}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--text)}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:var(--celeste);transition:right .3s var(--ease)}
.main-nav a:hover:after{right:0}
.header-actions{display:flex;align-items:center}

.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 18px;
  border-radius:999px;border:1px solid transparent;
  font-size:12px;font-weight:700;letter-spacing:.01em;
  transition:transform .2s var(--ease),border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  cursor:pointer;
}
.button:hover{transform:translateY(-1px)}
.button-primary,.button-app{background:var(--celeste);color:#06101d;box-shadow:0 0 26px rgba(116,172,223,.15)}
.button-primary:hover,.button-app:hover{background:var(--celeste-hi);box-shadow:0 0 36px rgba(116,172,223,.25)}
.button-secondary{border-color:var(--line-2);background:rgba(255,255,255,.025);color:var(--text)}
.button-secondary:hover{border-color:rgba(116,172,223,.4);background:rgba(116,172,223,.055)}

/* --- header dual-CTA pair -------------------------------------------------
 * Two buttons joined by an auric hairline, wrapped in a subtle auric contour.
 * Reads as one paired object, not two loose buttons. Elongated pill shape.
 * ------------------------------------------------------------------------ */
.cta-pair{
  position:relative;
  display:inline-flex;align-items:stretch;gap:0;
  padding:3px;
  border-radius:999px;
  background:
    linear-gradient(90deg,rgba(230,201,106,.14),rgba(230,201,106,.06) 40%,rgba(230,201,106,.02) 60%,rgba(116,172,223,.10) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(230,201,106,.22),
    0 0 0 1px rgba(4,8,20,.4),
    0 10px 32px rgba(0,0,0,.35);
}
.cta-pair:before{
  content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,rgba(230,201,106,.35),transparent 30%,transparent 70%,rgba(155,200,238,.28));
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;
}
.cta-pair .button{
  border-radius:999px;
  min-height:40px;padding:0 18px;border:0;
  box-shadow:none;
}
.button-cta-partner{
  background:rgba(4,10,22,.55);color:var(--text);
  border:1px solid transparent;
}
.button-cta-partner:hover{background:rgba(230,201,106,.10);color:#f6ebc0}
.button-cta-app{
  background:linear-gradient(180deg,#a3cff2 0%,#74acdf 100%);
  color:#04101c;
  box-shadow:0 0 22px rgba(116,172,223,.22);
}
.button-cta-app:hover{background:linear-gradient(180deg,#b6d9f5 0%,#8dbde6 100%)}
.cta-pair-thread{
  align-self:center;
  width:1px;height:20px;flex:0 0 auto;
  background:linear-gradient(180deg,transparent,rgba(230,201,106,.55),transparent);
}

.eyebrow,.micro-label{
  font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--celeste);
}
.text-link{display:inline-block;margin-top:16px;color:var(--celeste-hi);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* =============================================================================
 * HERO · scroll-driven Cover Flow
 * The hero occupies ~5× viewport height as a scroll TRACK; inside a sticky
 * viewport pins the stage while a scalar --progress (0..1) is written by JS.
 * Each cover uses its own --offset = (index - progress * (N-1)) and a
 * transform derived from --offset. Result: album-browsing depth without
 * pagination controls.
 * ========================================================================== */
.hero{position:relative}
.hero-track{
  position:relative;
  /* 5 contexts × 1 viewport-height of scroll each = 5vh + 1 initial */
  height:calc(100vh + 400vh);
}
.hero-viewport{
  position:sticky;top:var(--header);
  height:calc(100vh - var(--header));
  min-height:640px;
  overflow:hidden;
  display:grid;align-items:center;
}
/* Continuity veil: the bottom of the sticky hero fades into the same
   deep background the Thesis inherits, killing the hard horizontal cut. */
.hero-viewport:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:180px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(4,8,20,.55) 55%,
    rgba(4,8,20,.94) 100%
  );
  z-index:5;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(560px,1.25fr);
  gap:64px;align-items:center;
  padding-top:8px;
  z-index:2;
}

/* --- hero atmosphere ------------------------------------------------------
 * NOT decorative blobs. Two directional light shafts + a fine grid, all at
 * very low opacity + heavy blur so they read as atmospheric depth, not as
 * planetary orbs. Contained inside track so they move with the section.
 * ------------------------------------------------------------------------ */
.hero-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.atmo-orb{
  position:absolute;filter:blur(140px);opacity:.14;mix-blend-mode:screen;
}
.atmo-orb--celeste{
  width:1100px;height:520px;right:-14%;top:6%;
  background:linear-gradient(150deg,rgba(116,172,223,.28) 10%,rgba(116,172,223,.04) 46%,transparent 78%);
  transform:rotate(-14deg);
}
.atmo-orb--auric{
  width:820px;height:360px;left:-10%;bottom:-6%;
  background:linear-gradient(210deg,rgba(230,201,106,.18) 8%,rgba(230,201,106,.03) 48%,transparent 82%);
  transform:rotate(6deg);
}
.atmo-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(ellipse at 60% 40%,#000,transparent 78%);
}

/* Blueprint depth layer: three faint architectural planes behind the hero
 * stage. Reads as premium structural depth, not a stock gradient.
 * Rendered as blurred, low-opacity vector rectangles + two crossing hairlines. */
.atmo-blueprint{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.72}
.atmo-blueprint-rect{
  position:absolute;
  border:1px solid rgba(155,200,238,.16);
  border-radius:20px;
  background:linear-gradient(160deg,rgba(11,26,54,.42),rgba(4,10,22,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  filter:blur(.4px);
}
.atmo-blueprint-rect--a{left:6%;top:12%;width:44%;height:64%;transform:rotate(-3deg);opacity:.22}
.atmo-blueprint-rect--b{right:8%;top:26%;width:38%;height:50%;transform:rotate(2deg);opacity:.28;border-color:rgba(230,201,106,.12)}
.atmo-blueprint-rect--c{left:34%;top:40%;width:32%;height:44%;transform:rotate(-1deg);opacity:.14}
.atmo-blueprint-line{
  position:absolute;background:linear-gradient(90deg,transparent,rgba(155,200,238,.14),transparent);
  filter:blur(.5px);
}
.atmo-blueprint-line--h{left:-5%;right:-5%;top:46%;height:1px}
.atmo-blueprint-line--v{top:-5%;bottom:-5%;left:64%;width:1px;background:linear-gradient(180deg,transparent,rgba(230,201,106,.14),transparent)}

/* --- hero copy (left) --- */
.hero-copy{position:relative;z-index:3}
.hero-copy h1{
  font-family:var(--serif);font-weight:340;letter-spacing:-.04em;line-height:.97;
  font-size:clamp(58px,6vw,96px);
  margin:18px 0 26px;max-width:640px;
}
.hero-copy h1 em{font-style:italic;color:var(--celeste-hi);font-weight:340}
.hero-lede{color:var(--text-dim);font-size:17px;line-height:1.72;max-width:520px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-meta{display:flex;align-items:center;gap:9px;margin-top:22px;color:var(--muted-2);font-size:11px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(78,214,161,.55)}
.hero-scroll-hint{
  display:flex;align-items:center;gap:14px;
  margin-top:36px;
  color:var(--muted-2);
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.hero-scroll-hint-line{
  width:52px;height:1px;background:linear-gradient(90deg,rgba(116,172,223,.42),rgba(116,172,223,.02));
  position:relative;
}
.hero-scroll-hint-line:after{
  content:"";position:absolute;left:0;top:-1px;width:12px;height:3px;
  background:var(--celeste);border-radius:2px;
  animation:heroHintPulse 2.6s var(--ease-out) infinite;
}
@keyframes heroHintPulse{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(40px);opacity:1}}

/* --- hero stage (right) --- */
.hero-stage{
  position:relative;
  height:min(78vh,720px);
  min-height:520px;
  perspective:1600px;
  z-index:3;
}
.hero-progress{
  position:absolute;left:0;right:0;top:-2px;z-index:4;
  display:flex;flex-direction:column;gap:10px;
  padding:0 6px;
}
.hero-progress-track{
  position:relative;width:100%;height:2px;
  background:linear-gradient(90deg,rgba(214,225,239,.06),rgba(214,225,239,.14),rgba(214,225,239,.06));
  border-radius:2px;overflow:hidden;
}
.hero-progress-fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,var(--celeste),var(--celeste-hi));
  box-shadow:0 0 12px rgba(155,200,238,.6);
  transform-origin:0 50%;
  transform:scaleX(var(--progress,0));
}
.hero-progress-labels{
  display:grid;grid-template-columns:repeat(5,1fr);
  font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.hero-progress-labels span{transition:color .28s ease}
.hero-progress-labels span.is-active{color:var(--text)}

.hero-covers{
  position:absolute;inset:36px 0 0 0;
  /* Flat stacking: newer cards ALWAYS above older via --i (preserve-3d
     conflicts with z-index, so we drop it here). Motion still reads 3D
     via translate + rotateY on individual cards. */
  perspective:1600px;
}
.hero-cover{
  position:absolute;inset:0;
  padding:26px 30px 24px;
  border-radius:26px;
  background:
    radial-gradient(600px 240px at 82% 12%,rgba(116,172,223,.10),transparent 60%),
    linear-gradient(150deg,rgba(14,29,55,.98),rgba(6,13,28,.98));
  border:1px solid rgba(116,172,223,.18);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset,
    inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--text);
  transform-origin:right center;
  will-change:transform,opacity;
  backface-visibility:hidden;
  /* --offset is per-card fractional distance from active
     (positive = upcoming, 0 = active, negative = past).
     --i is the card's index (0..4), locking stacking order. */
  --offset:0;
  --i:0;
  --up:max(0, var(--offset));
  --past:max(0, calc(var(--offset) * -1));
  /* Stacking: later index ALWAYS above earlier. Managed(4) > Broker(3) >
     Fund(2) > Company(1) > People(0). Past cards sit beneath newer ones. */
  z-index:calc(100 + var(--i));
  transform:
    translate3d(
      calc(var(--up) * 118%),
      calc(var(--up) * 22px),
      0
    )
    scale(calc(1 - var(--up) * .05 - var(--past) * .015))
    rotateY(calc(var(--up) * -14deg));
  opacity:calc(1 - max(0, calc(var(--up) - 1)) * .7);
  transition:box-shadow .3s ease;
}
/* Past cards fade very slightly under the newer ones (only visible if the
   newer card's rotateY leaves a sliver of past card exposed). */
.hero-cover[data-behind="1"]{
  filter:saturate(.85) brightness(.94);
}
/* Pre-JS safeguard: before layoutHero has run, hide non-active covers so
   the top-stacked card (Managed) doesn't briefly cover People on first
   paint. JS adds .is-ready to the stage on the first animation frame. */
.hero-stage:not(.is-ready) .hero-cover[aria-hidden="true"]{
  opacity:0;
  transform:translate3d(120%,0,0);
}

.hero-cover-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.hero-cover-eyebrow{font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--celeste)}
.hero-cover-title{
  font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
  font-size:22px;line-height:1.15;margin:8px 0 0;max-width:520px;
}
.hero-cover-status{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.hero-cover-body{padding-top:22px;height:calc(100% - 92px);overflow:hidden}

/* --- financial boards ---------------------------------------------------- */
.board{
  display:grid;grid-template-rows:auto auto 1fr auto;gap:22px;height:100%;
}
.board-top{
  display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:end;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.board-primary{display:flex;flex-direction:column;gap:6px}
.board-primary-value{
  font:500 46px/1 var(--mono);letter-spacing:-.055em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.board-primary-note{color:var(--muted);font-size:12px}
.board-primary-note.positive{color:var(--green);font-family:var(--mono);font-size:11px}
.board-eyebrow{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

.board-buffer{display:flex;flex-direction:column;gap:8px}
.board-buffer-bar{
  position:relative;height:6px;border-radius:3px;overflow:hidden;
  background:rgba(214,225,239,.08);
}
.board-buffer-bar span{
  display:block;height:100%;width:var(--fill,50%);
  background:linear-gradient(90deg,var(--celeste),var(--celeste-hi));
  box-shadow:0 0 12px rgba(116,172,223,.4);
}
.board-buffer-bar.warn span{background:linear-gradient(90deg,var(--amber),#f6d78e);box-shadow:0 0 12px rgba(240,198,111,.35)}
.board-buffer-legend{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted);letter-spacing:.06em}
.board-buffer-legend em{color:var(--muted-2);font-style:normal}

.board-histogram{
  display:grid;grid-template-columns:repeat(5,1fr);gap:5px;height:36px;align-items:end;
}
.board-histogram span{
  display:block;height:var(--h,50%);
  background:linear-gradient(180deg,var(--celeste),var(--celeste-lo));
  border-radius:2px 2px 0 0;opacity:.85;
}
.board-histogram span:nth-child(1){opacity:.6}
.board-histogram span:nth-child(2){opacity:.75}

.board-rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));
}
.board-rail>div{padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.board-rail>div:last-child{border-right:0}
.board-rail strong{font:500 16px var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.board-rail em{font-style:normal;color:var(--muted-2);font-size:10.5px}

.board-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;min-height:0}
.board--fund .board-columns,
.board--broker .board-columns,
.board--managed .board-columns{grid-template-columns:1fr 1fr}
.board-column{display:flex;flex-direction:column;gap:12px;min-width:0}
.board-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.board-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:11.5px;color:var(--muted);border-bottom:1px dashed rgba(214,225,239,.08);padding-bottom:8px;
}
.board-list li:last-child{border-bottom:0;padding-bottom:0}
.board-list li em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* Decision footer: integrated, NOT an overlay box.
 * Structure: leading auric hairline mark + body (eyebrow + copy) + meta chip.
 * Sits flush with the board, sharing its top divider and no drop shadow. */
.board-decision{
  margin-top:auto;
  padding:14px 4px 0;
  border-top:1px solid rgba(230,201,106,.22);
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;
  background:transparent;border-radius:0;
  position:relative;
}
.board-decision:before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(230,201,106,.55) 20%,rgba(230,201,106,.35) 80%,transparent);
}
.board-decision-mark{
  display:block;width:3px;height:28px;margin-top:2px;
  background:linear-gradient(180deg,var(--auric),rgba(230,201,106,0));
  border-radius:2px;
  box-shadow:0 0 12px rgba(230,201,106,.4);
}
.board-decision-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.board-decision-body .board-eyebrow{color:var(--auric)}
.board-decision-body p{margin:0;color:var(--text-dim);font-size:12.5px;line-height:1.55;max-width:64ch}
.board-decision-meta{
  align-self:flex-start;
  display:flex;flex-direction:column;gap:2px;text-align:right;
  padding:6px 10px;border:1px dashed rgba(230,201,106,.28);border-radius:8px;
  background:rgba(230,201,106,.04);
  min-width:min-content;
}
.board-decision-meta em{
  font-style:normal;font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.board-decision-meta strong{
  font:500 11px var(--mono);color:var(--auric-light,#f3e2a6);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  white-space:nowrap;
}

/* per-context accent tint on the cover header */
.hero-cover:has(.board--people)   { --context-accent:#9bc8ee; }
.hero-cover:has(.board--company)  { --context-accent:#74acdf; }
.hero-cover:has(.board--fund)     { --context-accent:#e6c96a; }
.hero-cover:has(.board--broker)   { --context-accent:#4ed6a1; }
.hero-cover:has(.board--managed)  { --context-accent:#f0c66f; }
.hero-cover-eyebrow{color:var(--context-accent,var(--celeste))}

/* =============================================================================
 * SECTION frame
 * ========================================================================== */
.section{padding:120px 0;position:relative}
.section-rule{border-top:1px solid var(--line)}
.section-intro{max-width:900px}
.section-intro h2{
  font-family:var(--serif);font-weight:340;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(40px,4.6vw,72px);margin:14px 0 22px;
}
.section-intro > p{color:var(--muted);font-size:16px;line-height:1.7;max-width:720px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}

/* =============================================================================
 * THESIS · fragmentation → coordination (no hub-spoke)
 * The section is a tall scroll track; sticky viewport pins a "field" of
 * actor chips that begin scattered with different depths/rotations/sizes.
 * As --tp (0..1) rises from 0 to 1 (JS-driven, viewport-gated), each chip
 * lerps from its scattered origin to a target row/column position. A
 * horizontal "coordination band" appears between rows 1 and 3. The scene
 * resolves into an ordered architecture, never into a center node.
 * ========================================================================== */
/* No hard border-top on Thesis — the hero-viewport fade veil handles the
   transition, so the section flows in from the hero without a horizontal cut. */
.section-thesis{padding:80px 0 0;position:relative}
.section-thesis:before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:120px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,20,.7) 0%,transparent 100%);
  z-index:1;
}
.thesis-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.atmo-veil{
  position:absolute;left:-8%;right:-8%;top:8%;bottom:0;
  background:
    radial-gradient(820px 400px at 30% 40%,rgba(116,172,223,.10),transparent 60%),
    radial-gradient(720px 360px at 78% 30%,rgba(230,201,106,.055),transparent 62%);
  filter:blur(20px);
}
.atmo-veil--right{background:
  radial-gradient(760px 380px at 78% 45%,rgba(116,172,223,.10),transparent 62%),
  radial-gradient(560px 300px at 22% 22%,rgba(230,201,106,.05),transparent 66%);
}
.thesis-intro{position:relative;z-index:2}
.thesis-track{position:relative;height:260vh;margin-top:56px}
.thesis-viewport{
  position:sticky;top:var(--header);
  height:calc(100vh - var(--header));min-height:640px;
  display:grid;place-items:center;
  overflow:hidden;
  --tp:0;
}
.thesis-caption{
  position:absolute;left:0;right:0;top:22px;
  display:flex;justify-content:space-between;padding:0 32px;
  font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  z-index:3;pointer-events:none;
}
.thesis-caption span{display:inline-flex;align-items:center;gap:8px}
.thesis-caption em{font-style:normal;color:var(--celeste-hi);font-weight:600;letter-spacing:.2em}
.thesis-caption span:last-child em{color:var(--auric)}
.thesis-caption span:first-child{opacity:calc(1 - var(--tp) * .85)}
.thesis-caption span:last-child{opacity:calc(var(--tp) * 1);color:var(--text)}

/* Layer legend: names the three socio-technical strata. Visible while
 * fragmentation is high (helps the reader anchor "this is a system of
 * layers"); fades out as coordination emerges. */
.thesis-layers{
  position:absolute;right:16px;top:56px;
  display:flex;flex-direction:column;gap:10px;
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  z-index:3;pointer-events:none;
  opacity:calc(1 - var(--tp) * .62);
}
.thesis-layers span{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-left:1px solid rgba(155,200,238,.28)}
.thesis-layers em{font-style:normal;color:var(--celeste);letter-spacing:.18em}
.thesis-layers span[data-layer="argx"] em{color:var(--auric)}

/* Flow marks: subtle vertical strokes between rails/coordination and
 * coordination/actors. Only appear as --tp advances. Reinforces the
 * "state travels through the layer" reading. */
.tk-flow{
  position:absolute;left:0;right:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(8,1fr);
  z-index:1;
  opacity:calc(max(0, var(--tp) - .3) * 1.4);
}
.tk-flow--in{top:24%;height:22%}
.tk-flow--out{bottom:24%;height:22%}
.tk-flow span{
  position:relative;justify-self:center;width:1px;height:100%;
  background:linear-gradient(180deg,rgba(155,200,238,calc(.22 * var(--tp))),transparent);
}
.tk-flow--out span{background:linear-gradient(0deg,rgba(230,201,106,calc(.20 * var(--tp))),transparent)}
.tk-flow span:before{
  content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;
  border-right:1px solid rgba(155,200,238,calc(.4 * var(--tp)));
  border-bottom:1px solid rgba(155,200,238,calc(.4 * var(--tp)));
  transform:translateX(-50%) rotate(45deg);
}
.tk-flow--out span:before{
  bottom:auto;top:0;
  border:0;border-left:1px solid rgba(230,201,106,calc(.4 * var(--tp)));border-top:1px solid rgba(230,201,106,calc(.4 * var(--tp)));
}

.thesis-field{
  position:relative;width:min(1400px,calc(100% - 40px));height:min(76vh,640px);
  margin:0 auto;
}

/* Columnar guides: 8 vertical lanes across the field.
   At --tp = 0 they are invisible (fragmented state, no architecture).
   At --tp = 1 they materialize as subtle vertical strokes, aligning every
   source above with its resolved column and every consumer below with the
   same column — reading as ORDERED ARCHITECTURE, not radial coordination. */
.tk-columns{
  position:absolute;inset:8% 0 8% 0;
  display:grid;grid-template-columns:repeat(8,1fr);
  pointer-events:none;
  opacity:calc(var(--tp) * .7);
  transition:opacity .4s ease;
  z-index:0;
}
.tk-columns span{
  position:relative;
  border-left:1px dashed rgba(116,172,223,calc(.10 + var(--tp) * .18));
}
.tk-columns span:first-child{border-left-color:transparent}
.tk-columns span:before,
.tk-columns span:after{
  content:"";position:absolute;left:calc(50% - 1px);width:2px;
  background:linear-gradient(180deg,rgba(155,200,238,calc(.18 * var(--tp))),transparent);
  opacity:var(--tp);
}
.tk-columns span:before{top:0;height:38%}
.tk-columns span:after{bottom:0;height:38%;background:linear-gradient(0deg,rgba(230,201,106,calc(.14 * var(--tp))),transparent)}

/* Coordination band appears at ~mid-row as --tp grows.
   Redesigned as an emergent LAYER with visible primitives — reads as a
   designed architecture, not a decorative ribbon. */
.tk-band{
  position:absolute;left:0;right:0;top:calc(50% - 44px);
  padding:14px 24px 16px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
  border-top:1px solid rgba(116,172,223,calc(.10 + var(--tp) * .55));
  border-bottom:1px solid rgba(116,172,223,calc(.10 + var(--tp) * .55));
  background:
    linear-gradient(90deg,
      rgba(4,10,22,calc(.4 + var(--tp) * .25)),
      rgba(10,26,54,calc(.35 + var(--tp) * .32)) 50%,
      rgba(4,10,22,calc(.4 + var(--tp) * .25))
    );
  box-shadow:
    0 0 calc(var(--tp) * 60px) rgba(116,172,223,calc(var(--tp) * .12)),
    inset 0 1px 0 rgba(255,255,255,calc(.04 * var(--tp)));
  opacity:calc(.22 + var(--tp) * .78);
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:3;
}
.tk-band-head{
  display:flex;align-items:baseline;gap:14px;
}
.tk-band-mark{
  font-family:var(--serif);font-size:22px;font-weight:400;
  color:var(--text);letter-spacing:-.015em;
  text-shadow:0 0 calc(var(--tp) * 24px) rgba(155,200,238,calc(var(--tp) * .5));
}
.tk-band-label{
  font:9px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--celeste-hi);opacity:calc(.4 + var(--tp) * .6);
}
/* Primitives appear only as the coordination emerges — six ordered facets
   of the same layer, arranged as pills, so the layer READS as designed. */
.tk-band-primitives{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  opacity:calc(max(0, calc(var(--tp) - .35)) * 1.6);
  transform:translateY(calc((1 - var(--tp)) * 6px));
  transition:opacity .3s ease,transform .4s var(--ease);
}
.tk-band-primitives span{
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
  padding:5px 10px;
  border:1px solid rgba(116,172,223,.28);
  border-radius:999px;
  background:rgba(116,172,223,.06);
  position:relative;z-index:2;
}

/* Fabric weave: six vertical sub-lanes inside the coordination band.
 * Converts the band from a horizontal ribbon into a structured coordination
 * fabric — state flows through six named lanes, not through a central node. */
.tk-band-weave{
  position:absolute;inset:2px 0;
  display:grid;grid-template-columns:repeat(6,1fr);
  pointer-events:none;z-index:0;
  opacity:calc(max(0, var(--tp) - .3) * 1.4);
}
.tk-band-weave span{
  position:relative;
  border-right:1px dashed rgba(155,200,238,calc(.14 + var(--tp) * .16));
}
.tk-band-weave span:last-child{border-right:0}
.tk-band-weave span:before,
.tk-band-weave span:after{
  content:"";position:absolute;left:0;right:0;height:60%;
  pointer-events:none;
}
.tk-band-weave span:before{
  top:0;
  background:linear-gradient(180deg,rgba(155,200,238,calc(.14 * var(--tp))),transparent);
}
.tk-band-weave span:after{
  bottom:0;
  background:linear-gradient(0deg,rgba(230,201,106,calc(.14 * var(--tp))),transparent);
}

/* Architectural corner marks on the coordination band.
 * Reads as a designed instrument, not a decorative ribbon. */
.tk-band-corners{position:absolute;inset:0;pointer-events:none;opacity:calc(.15 + var(--tp) * .8)}
.tk-band-corners i{
  position:absolute;width:14px;height:14px;
  border-color:rgba(230,201,106,.6);
}
.tk-band-corners i:nth-child(1){top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.tk-band-corners i:nth-child(2){top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}
.tk-band-corners i:nth-child(3){bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}
.tk-band-corners i:nth-child(4){bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* Scale label — In / Out — on the coordination band's outer edges.
 * Reinforces "state flows IN from rails and OUT to actors". */
.tk-band-scale{
  position:absolute;left:0;right:0;top:-11px;height:0;
  display:flex;justify-content:space-between;padding:0 16px;pointer-events:none;
  opacity:calc(max(0, var(--tp) - .4) * 1.6);
}
.tk-band-scale em{
  transform:translateY(-100%);
  font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--auric);font-style:normal;
  padding:3px 8px;border:1px solid rgba(230,201,106,.32);border-radius:999px;
  background:rgba(4,10,22,.72);
  backdrop-filter:blur(6px);
}

/* Actor chip: scattered at --tp=0, targeting a row/column grid at --tp=1.
 * Row 0 = top strip (sources), Row 2 = bottom strip (consumers).
 * Columns 0..7 stretched across width. JS writes --x0/--y0/--sc0/--rot0
 * for the initial scatter and reads data-target-row/col for the target.
 */
.tk{
  position:absolute;left:0;top:0;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(15,26,46,.94),rgba(7,15,30,.94));
  font-size:11px;letter-spacing:.005em;color:var(--muted);
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.42);
  transform-origin:center;
  --x0:50%;--y0:50%;--sc0:1;--rot0:0deg;--depth0:0;
  --xT:50%;--yT:50%;
  --x:calc(var(--x0) + (var(--xT) - var(--x0)) * var(--tp));
  --y:calc(var(--y0) + (var(--yT) - var(--y0)) * var(--tp));
  --sc:calc(var(--sc0) + (1 - var(--sc0)) * var(--tp));
  --rot:calc(var(--rot0) * (1 - var(--tp)));
  /* depth blur: further-back items are slightly blurred while fragmented;
     the blur resolves as the layer coordinates. */
  --blur:calc((var(--depth0) * 6px) * (1 - var(--tp)));
  --dim:calc(var(--depth0) * (1 - var(--tp)) * 1.2);
  filter:blur(var(--blur));
  opacity:calc(1 - var(--dim));
  left:var(--x);top:var(--y);
  transform:translate(-50%,-50%) scale(var(--sc)) rotate(var(--rot));
  transition:color .5s ease,border-color .5s ease,background .5s ease;
  z-index:2;
}
.tk span{position:relative;z-index:1}

/* Cluster tints while fragmented: each cluster carries a subtle border
 * accent so the three sub-groups read as distinct socio-technical strata
 * without adding words. Resolves to the common coordinated palette. */
.tk[data-cluster="accounts"]    { border-color:rgba(155,200,238,.28) }
.tk[data-cluster="markets"]     { border-color:rgba(230,201,106,.20) }
.tk[data-cluster="ops"]         { border-color:rgba(78,214,161,.20) }
.tk[data-cluster="principals"]  { border-color:rgba(155,200,238,.28) }
.tk[data-cluster="capital"]     { border-color:rgba(230,201,106,.24) }
.tk[data-cluster="counterparty"]{ border-color:rgba(214,225,239,.24) }

.thesis-viewport[data-thesis-state="coordinated"] .tk{
  color:var(--text);
  border-color:rgba(116,172,223,.32);
  background:linear-gradient(180deg,rgba(20,36,66,.94),rgba(9,20,40,.94));
}
.thesis-viewport[data-thesis-state="coordinated"] .tk--source{border-color:rgba(116,172,223,.42);color:var(--text)}
.thesis-viewport[data-thesis-state="coordinated"] .tk--consumer{border-color:rgba(230,201,106,.32);color:var(--text)}

.thesis-progress{
  position:absolute;left:0;right:0;bottom:28px;height:2px;
  background:rgba(214,225,239,.06);
  overflow:hidden;
}
.thesis-progress-fill{
  height:100%;width:100%;
  background:linear-gradient(90deg,var(--celeste),var(--celeste-hi));
  box-shadow:0 0 12px rgba(155,200,238,.5);
  transform-origin:0 50%;
  transform:scaleX(var(--tp,0));
}

/* =============================================================================
 * DOCTRINE · atmospheric interstitial
 * Full-bleed designed pause: layered atmosphere behind a typographic moment,
 * with three tight annotations sharing the same visual field.
 * ========================================================================== */
.section-doctrine{
  position:relative;
  padding:140px 0 128px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(4,8,20,.55) 0%,rgba(6,12,26,.9) 40%,rgba(4,8,20,.55) 100%);
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.doctrine-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.doctrine-veil{
  position:absolute;inset:-10% -5% -10% -5%;
  background:
    radial-gradient(1000px 520px at 24% 40%,rgba(116,172,223,.14),transparent 60%),
    radial-gradient(820px 460px at 76% 60%,rgba(230,201,106,.08),transparent 62%);
  filter:blur(24px);
}
.doctrine-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:110px 110px;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 78%);
  opacity:.55;
}
.doctrine-orb{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:1200px;height:520px;
  background:radial-gradient(ellipse,rgba(155,200,238,.16) 0%,transparent 60%);
  filter:blur(60px);
  opacity:.9;
}
.doctrine-inner{position:relative;z-index:2;text-align:center}
.doctrine-marks{
  display:flex;justify-content:center;gap:22px;margin-bottom:28px;
}
.doctrine-marks span{
  display:block;width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--celeste),transparent);
  opacity:.55;
}
.doctrine-marks span:nth-child(2){width:120px;opacity:.7}
.doctrine-kicker{color:var(--celeste-hi)}
.doctrine-statement{
  margin:22px auto 0;max-width:1040px;
  font-family:var(--serif);font-weight:340;
  font-size:clamp(38px,4.6vw,68px);line-height:1.06;letter-spacing:-.03em;
  color:var(--text);
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.doctrine-statement em{
  font-style:italic;font-weight:340;color:var(--muted);
  letter-spacing:-.025em;
}
.doctrine-statement strong{
  font-weight:400;color:var(--text);
  text-shadow:0 0 44px rgba(155,200,238,.28);
}
.doctrine-annotations{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
  text-align:left;
}
.doctrine-annotations > div{
  background:linear-gradient(180deg,rgba(11,22,44,.72),rgba(5,11,26,.68));
  padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:10px;
  min-width:0;
}
.doctrine-annotations .micro-label{color:var(--muted-2)}
.doctrine-annotations p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.6}

/* =============================================================================
 * PRODUCT · decision environment
 * One continuous instrument (not a 6-tile grid).
 * ========================================================================== */
.section-product{position:relative}
.product-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.instrument{
  margin-top:52px;
  border:1px solid rgba(116,172,223,.18);
  border-radius:26px;
  background:
    radial-gradient(900px 400px at 100% -20%,rgba(116,172,223,.08),transparent 60%),
    linear-gradient(155deg,rgba(11,22,44,.97),rgba(5,11,26,.97));
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.35);
}
.instrument-head{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:22px 28px;border-bottom:1px solid var(--line);
}
.instrument-title{display:flex;flex-direction:column;gap:4px}
.instrument-title span{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.01em}
.instrument-title small{color:var(--muted-2);font-size:11px}
.instrument-provenance{display:flex;gap:6px;flex-wrap:wrap}
.instrument-provenance span{
  font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.015);
}

.instrument-body{display:grid;grid-template-columns:1.55fr .95fr;min-height:640px}
.instrument-state{padding:36px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:28px}
.state-question h3{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.12;letter-spacing:-.025em;margin:14px 0 12px}
.state-change{color:var(--muted);max-width:720px;margin:0}
.state-change strong{color:var(--text)}

/* PRIMARY METRIC · Runway with policy floor visualized ------------------ */
.state-primary{
  padding:22px 24px 24px;
  border:1px solid rgba(116,172,223,.28);
  border-radius:16px;
  background:
    radial-gradient(560px 200px at 80% -30%,rgba(116,172,223,.12),transparent 60%),
    linear-gradient(180deg,rgba(11,26,54,.6),rgba(4,10,22,.4));
  display:flex;flex-direction:column;gap:14px;
}
.state-primary-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.state-primary-tag{
  font:500 10.5px var(--mono);letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;
  background:rgba(78,214,161,.10);color:var(--green);
  border:1px solid rgba(78,214,161,.28);
  font-variant-numeric:tabular-nums;
}
.state-primary-tag.policy-good{background:rgba(78,214,161,.10);color:var(--green);border-color:rgba(78,214,161,.28)}
.state-primary-tag.policy-risk{background:rgba(239,123,131,.10);color:var(--red);border-color:rgba(239,123,131,.32)}
.state-primary-value{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.state-primary-value strong{
  font:500 54px/1 var(--mono);letter-spacing:-.045em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.state-primary-value em{font-style:normal;color:var(--muted);font-size:12.5px}
.state-primary-gauge{
  position:relative;height:34px;margin-top:6px;
}
.state-primary-gauge .gauge-floor{
  position:absolute;left:66%;top:0;bottom:14px;width:1px;
  background:linear-gradient(180deg,var(--auric),transparent);
  box-shadow:0 0 8px rgba(230,201,106,.4);
}
.state-primary-gauge .gauge-floor:before{
  content:"policy floor";position:absolute;left:8px;top:-2px;
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--auric);
  white-space:nowrap;
}
.state-primary-gauge .gauge-fill{
  position:absolute;left:0;right:0;bottom:14px;height:8px;border-radius:4px;
  background:rgba(214,225,239,.08);
  overflow:hidden;
}
.state-primary-gauge .gauge-fill:after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:var(--gauge,70%);
  background:linear-gradient(90deg,var(--celeste),var(--celeste-hi));
  box-shadow:0 0 14px rgba(155,200,238,.45);
  border-radius:4px;
  transition:width .32s var(--ease);
}
.state-primary-gauge .gauge-scale{position:absolute;left:0;right:0;bottom:0;height:12px}
.state-primary-gauge .gauge-scale em{
  position:absolute;left:var(--at);transform:translateX(-50%);
  font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  font-style:normal;
}

/* SUPPORT CELLS · four aligned, one visual language ---------------------- */
.state-support{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-radius:14px;overflow:hidden;
  border:1px solid var(--line);
}
.state-cell{
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;
}
.state-cell-value{
  font:500 18px var(--mono);letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.15;
  word-break:break-word;
}
.state-cell em{font-style:normal;color:var(--muted-2);font-size:10.5px;margin-top:auto;padding-top:6px}
.state-cell.policy-good .state-cell-value{color:var(--green)}
.state-cell.policy-risk .state-cell-value{color:var(--red)}
.state-cell-value.flash,
.state-primary-value strong.flash,
.state-primary-tag.flash{animation:metricFlash .42s var(--ease)}
@keyframes metricFlash{0%{transform:translateY(0)}45%{transform:translateY(-2px);color:var(--celeste-hi)}100%{transform:translateY(0);color:inherit}}

.state-authority-chain{
  display:flex;align-items:center;gap:8px;color:var(--text-dim);font:11px var(--mono);letter-spacing:.04em;
  flex-wrap:wrap;
}
.state-authority-chain i{width:14px;height:1px;background:rgba(214,225,239,.32);position:relative;flex:0 0 auto}
.state-authority-chain i:after{content:"";position:absolute;right:0;top:-1px;width:3px;height:3px;border-radius:50%;background:var(--celeste)}

/* CONTEXT STRIP · receivables/payables/etc, low visual weight ------------ */
.state-context{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
}
.state-context > div{
  background:linear-gradient(180deg,rgba(255,255,255,.010),rgba(255,255,255,0));
  padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.state-context span{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.state-context strong{font:500 12.5px var(--mono);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.instrument-scenarios{padding:36px 32px 36px;background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0));display:flex;flex-direction:column;gap:16px}
.scenario-choice{display:grid;gap:10px;margin-top:12px}
.scenario-choice button{
  display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;text-align:left;
  border:1px solid var(--line);background:rgba(255,255,255,.018);padding:15px 16px;border-radius:16px;
  cursor:pointer;transition:.2s ease;
}
.scenario-choice button:hover{border-color:rgba(116,172,223,.32);background:rgba(116,172,223,.05)}
.scenario-choice button.is-active{border-color:rgba(116,172,223,.5);background:rgba(116,172,223,.09);box-shadow:0 0 24px rgba(116,172,223,.08)}
.scenario-letter{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font:500 11px var(--mono);color:var(--text)}
.scenario-body b{display:block;font-size:12.5px;color:var(--text)}
.scenario-body small{display:block;color:var(--muted-2);font-size:10.5px;margin-top:3px}
.scenario-choice em{font-style:normal;color:var(--auric);font-size:9px;text-transform:uppercase;letter-spacing:.1em}

.scenario-recommend{
  margin-top:16px;padding:22px;border:1px solid rgba(230,201,106,.22);border-radius:16px;
  background:linear-gradient(150deg,rgba(230,201,106,.06),rgba(230,201,106,0));
  opacity:.4;transition:opacity .3s ease;
}
.scenario-recommend.is-visible{opacity:1}
.scenario-recommend h4{font-family:var(--serif);font-size:22px;font-weight:400;margin:8px 0 14px}
.scenario-recommend p{margin:8px 0;color:var(--muted);font-size:11.5px}
.scenario-recommend b{display:inline-block;min-width:68px;color:var(--text)}
.scenario-recommend small{display:block;margin-top:14px;color:var(--muted-2);font-size:10px}

.instrument-foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px 28px;border-top:1px solid var(--line);
  font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.instrument-foot-note{color:var(--muted-2)}

/* =============================================================================
 * ARCHITECTURE INTERSTITIAL · from financial state to real-world outcomes
 *
 * Progressive-disclosure map of the coordination architecture.
 * Flow: State → Coordination → Outcome → New state
 * Below flow: return-arc "learning loop" annotation
 * Bottom:      Foundational substrate (5 primitives)
 * Foot:        Applied-across strip
 *
 * Design direction: some capabilities are live today, others describe the
 * shape of the system. No hub, no central node — this is orchestrated
 * horizontally as a coherent operating architecture.
 * ========================================================================== */
.section-architecture{
  position:relative;padding:140px 0 120px;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.03);
  background:linear-gradient(180deg,rgba(4,8,20,.35) 0%,rgba(7,14,30,.85) 40%,rgba(4,8,20,.4) 100%);
}
.architecture-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arch-plane{
  position:absolute;border:1px solid rgba(155,200,238,.10);border-radius:22px;
  background:linear-gradient(160deg,rgba(11,26,54,.42),rgba(4,10,22,.06));
  filter:blur(.5px);
}
.arch-plane--a{left:4%;top:10%;width:52%;height:64%;transform:rotate(-2deg);opacity:.28}
.arch-plane--b{right:6%;top:22%;width:44%;height:60%;transform:rotate(1.5deg);opacity:.32;border-color:rgba(230,201,106,.10)}
.arch-plane--c{left:28%;top:40%;width:38%;height:44%;transform:rotate(-1deg);opacity:.16}
.arch-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse at 50% 44%,#000 32%,transparent 82%);
  opacity:.6;
}
.architecture-inner{position:relative;z-index:2}
.architecture-head{max-width:900px}
.architecture-head h2{
  font-family:var(--serif);font-weight:340;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(36px,4.2vw,60px);margin:12px 0 20px;
}
.architecture-head h2 em{
  font-style:italic;color:var(--auric-light);font-weight:340;
  text-shadow:0 0 44px rgba(230,201,106,.24);
}
.architecture-head p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:720px}
.architecture-kicker{color:var(--auric)}

/* --- architecture figure: canonical CMO illustration ---------------------- *
 * The figure is the primary artifact: it visually names every stage,
 * the foundational layer and the applied-across ecosystem. Framed with a
 * thin auric hairline and corner marks so it reads as a designed exhibit,
 * not a stock diagram dropped into the page. Aspect-ratio preserved. */
.architecture-figure{
  margin:60px 0 0;
  padding:0;
  position:relative;
}
.architecture-figure-frame{
  position:relative;
  padding:14px;
  border:1px solid rgba(230,201,106,.22);
  border-radius:20px;
  background:
    radial-gradient(1000px 400px at 50% -20%,rgba(230,201,106,.05),transparent 60%),
    linear-gradient(180deg,rgba(10,20,42,.72),rgba(4,10,22,.62));
  box-shadow:
    0 60px 140px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.architecture-figure-frame:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(230,201,106,.55) 50%,transparent);
}
.architecture-figure-frame img{
  display:block;width:100%;height:auto;aspect-ratio:1672/941;
  border-radius:12px;
  object-fit:contain;
  background:#04091a;
}
.architecture-figure-corners{position:absolute;inset:6px;pointer-events:none}
.architecture-figure-corners i{
  position:absolute;width:16px;height:16px;
  border-color:rgba(230,201,106,.55);
}
.architecture-figure-corners i:nth-child(1){top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.architecture-figure-corners i:nth-child(2){top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}
.architecture-figure-corners i:nth-child(3){bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}
.architecture-figure-corners i:nth-child(4){bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}
.architecture-figure-caption{
  margin:22px auto 0;max-width:820px;
  display:flex;flex-direction:column;gap:8px;text-align:center;
}
.architecture-figure-caption .micro-label{color:var(--auric)}
.architecture-figure-caption p{
  margin:0;color:var(--muted);font-size:13px;line-height:1.6;
  font-family:var(--sans);font-style:italic;
}

/* =============================================================================
 * HOW IT WORKS · designed system progression
 * ========================================================================== */
.section-how{padding:120px 0 80px}
.process-ribbon{
  list-style:none;padding:0;margin:52px 0 0;
  display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0));
}
.process-ribbon li{
  position:relative;padding:28px 22px 32px;display:flex;flex-direction:column;gap:12px;
  border-right:1px solid var(--line);
  min-height:220px;
}
.process-ribbon li:last-child{border-right:0}
.process-ribbon li:before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--celeste) 40%,var(--celeste) 60%,transparent);
  opacity:calc(1 - (var(--proc-i,0) * .12));
}
.process-ribbon li:nth-child(1){--proc-i:0}
.process-ribbon li:nth-child(2){--proc-i:1}
.process-ribbon li:nth-child(3){--proc-i:2}
.process-ribbon li:nth-child(4){--proc-i:3}
.process-ribbon li:nth-child(5){--proc-i:4}
.process-ribbon li:nth-child(6){--proc-i:5}
.process-num{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--celeste)}
.process-ribbon h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:20px 0 6px;letter-spacing:-.01em}
.process-ribbon p{color:var(--muted);font-size:12px;line-height:1.6;margin:0}

.process-doctrine{
  margin-top:34px;padding:28px 30px;
  display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:center;
  border:1px solid rgba(116,172,223,.24);border-radius:16px;
  background:linear-gradient(90deg,rgba(116,172,223,.06),rgba(116,172,223,0));
}
.process-doctrine p{margin:0;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.3;color:var(--text)}

/* =============================================================================
 * SOLUTIONS · permissioned perspectives
 * ========================================================================== */
.perspective-panel{
  margin-top:52px;
  display:grid;grid-template-columns:260px 1fr;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(11,22,44,.95),rgba(5,11,26,.95));
}
.perspective-tabs{
  padding:20px 16px;border-right:1px solid var(--line);
  background:rgba(255,255,255,.014);
  display:flex;flex-direction:column;gap:6px;
}
.perspective-tabs button{
  width:100%;border:0;background:transparent;color:var(--muted);
  text-align:left;padding:14px 14px;border-radius:12px;
  cursor:pointer;font-size:12.5px;transition:.2s ease;
}
.perspective-tabs button:hover{color:var(--text);background:rgba(116,172,223,.04)}
.perspective-tabs button.is-active{background:rgba(116,172,223,.10);color:var(--text);box-shadow:inset 0 0 0 1px rgba(116,172,223,.24)}

.perspective-body{padding:32px 34px 34px;display:flex;flex-direction:column;gap:26px;min-width:0}
.perspective-copy h3{font-family:var(--serif);font-weight:400;font-size:32px;margin:10px 0 8px;letter-spacing:-.02em}
.perspective-copy p{color:var(--muted);max-width:720px;margin:0}

/* Anchor strip: same financial reality across every tab.
   Reinforces the "one reality → N projections" concept — this strip is
   static and never changes when tabs switch. */
/* Architectural facet strip: header (label + sub) · six ordered facet tiles
 * · arrow. Reads as a designed architecture, not decorative pills. */
.perspective-constants{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:stretch;
  padding:16px 18px;
  border:1px solid rgba(116,172,223,.24);
  border-radius:14px;
  background:
    radial-gradient(500px 240px at 100% 0%,rgba(230,201,106,.05),transparent 60%),
    linear-gradient(90deg,rgba(116,172,223,.08),rgba(116,172,223,.02));
  position:relative;overflow:hidden;
}
.perspective-constants:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(155,200,238,.4),rgba(230,201,106,.28),rgba(155,200,238,.4));
  opacity:.55;
}
.constants-label{display:flex;flex-direction:column;gap:4px;justify-content:center;max-width:160px}
.constants-label .micro-label{color:var(--celeste-hi)}
.constants-label small{color:var(--muted-2);font-size:10.5px;line-height:1.4}
.constants-atoms{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
}
.constants-atom{
  display:grid;grid-template-rows:auto auto auto;gap:2px;
  padding:9px 11px;min-width:0;
  border:1px solid rgba(155,200,238,.18);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(15,28,54,.55),rgba(6,14,30,.35));
  position:relative;
  transition:border-color .25s ease,background .25s ease;
}
.constants-atom:hover{border-color:rgba(230,201,106,.35);background:linear-gradient(180deg,rgba(18,34,64,.7),rgba(8,16,34,.5))}
.constants-atom em{
  font-style:normal;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--auric);
}
.constants-atom strong{
  font:500 12px var(--sans);letter-spacing:-.005em;color:var(--text);line-height:1.15;
}
.constants-atom small{
  font:9.5px var(--mono);letter-spacing:.04em;color:var(--muted-2);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.constants-arrow{
  align-self:center;
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);flex:0 0 auto;
  max-width:120px;text-align:right;line-height:1.35;
}
.perspective-scope{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden}
.perspective-scope > div{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.perspective-scope span{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.perspective-scope strong{font:500 17px var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.perspective-scope small{color:var(--muted-2);font-size:10.5px}

.perspective-signals{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.perspective-signals > div{
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0));
  display:flex;flex-direction:column;gap:8px;
}
.perspective-signals span{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.perspective-signals p{margin:0;color:var(--text-dim);font-size:12.5px;line-height:1.55}

/* =============================================================================
 * IDENTITY · one living entity state · on a foundational substrate
 * ========================================================================== */
.section-identity{padding:120px 0}

/* Substrate rail: five foundational primitives shown as an infrastructural
 * strip above the console. A row of downward "outflow" marks visually ties
 * the substrate to the console beneath — meaning: the console below is a
 * projection FROM this substrate, not an independent identity feature. */
.identity-substrate{
  position:relative;margin-top:44px;padding:20px 22px 18px;
  border:1px solid rgba(230,201,106,.24);border-radius:18px;
  background:
    radial-gradient(700px 200px at 100% 0%,rgba(230,201,106,.05),transparent 60%),
    linear-gradient(180deg,rgba(10,20,42,.9),rgba(4,10,22,.85));
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  overflow:visible;
}
.identity-substrate:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,201,106,.5) 50%,transparent);
}
.identity-substrate-item{
  padding:14px 14px 16px;min-width:0;
  display:flex;flex-direction:column;gap:5px;
  border-right:1px dashed rgba(230,201,106,.14);
}
.identity-substrate-item:last-of-type{border-right:0}
.identity-substrate-num{
  font-style:normal;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--auric);
}
.identity-substrate-item strong{
  font:500 13px var(--sans);letter-spacing:-.005em;color:var(--text);line-height:1.2;
}
.identity-substrate-item small{
  font:10px var(--mono);color:var(--muted-2);letter-spacing:.02em;line-height:1.35;
}
/* Outflow marks: five hairlines that drop from the substrate to the console
 * beneath. Communicate "flows FROM here". */
.identity-substrate-out{
  position:absolute;left:0;right:0;bottom:-18px;height:18px;
  display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none;
  grid-column:1/-1;
}
.identity-substrate-out span{
  justify-self:center;width:1px;height:100%;
  background:linear-gradient(180deg,rgba(230,201,106,.55),transparent);
  position:relative;
}
.identity-substrate-out span:after{
  content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;transform:translateX(-50%) rotate(45deg);
  border-right:1px solid rgba(230,201,106,.5);border-bottom:1px solid rgba(230,201,106,.5);
}

.identity-console{
  margin-top:36px;display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;
}
.identity-entity{
  padding:28px 28px 24px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,rgba(11,22,44,.95),rgba(5,11,26,.95));
  display:flex;flex-direction:column;gap:16px;
}
.identity-entity h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:6px 0 4px;letter-spacing:-.015em}
.identity-facts{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:12px}
.identity-facts li{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);border-bottom:1px dashed rgba(214,225,239,.08);padding-bottom:10px}
.identity-facts li:last-child{border-bottom:0;padding-bottom:0}
.identity-facts em{font-style:normal;color:var(--text);font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.identity-note{margin:auto 0 0;color:var(--muted-2);font-size:11.5px;padding-top:12px;border-top:1px dashed rgba(214,225,239,.08)}

.identity-projection{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(11,22,44,.95),rgba(5,11,26,.95));
  display:flex;flex-direction:column;
}
.identity-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.identity-tabs button{
  flex:1;min-width:120px;border:0;border-right:1px solid var(--line);
  background:transparent;color:var(--muted-2);padding:14px 10px;
  cursor:pointer;font-size:11px;letter-spacing:.05em;transition:.2s ease;
}
.identity-tabs button:last-child{border-right:0}
.identity-tabs button:hover{color:var(--text)}
.identity-tabs button.is-active{background:rgba(116,172,223,.09);color:var(--text)}
.identity-rows{padding:8px 22px;flex:1}
.identity-row{
  display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.identity-row:last-child{border-bottom:0}
.identity-row strong{font-size:12px;color:var(--text)}
.identity-row span{font-size:10.5px;color:var(--muted-2)}
.identity-row em{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.identity-row em.restricted{color:var(--amber)}

/* Projection head: sits above the counterparty tabs, framing "same entity,
 * many valid projections" with a small mark that echoes the five tabs. */
.identity-projection-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:22px 24px 14px;border-bottom:1px solid var(--line);
}
.identity-projection-copy{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:52ch}
.identity-projection-mark{
  display:inline-flex;gap:5px;padding:6px 8px;
  border:1px solid rgba(116,172,223,.24);border-radius:999px;
  background:rgba(116,172,223,.05);
  align-self:flex-start;flex:0 0 auto;
}
.identity-projection-mark em{
  display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(155,200,238,.6);
  animation:identityPulse 3s ease-in-out infinite;
}
.identity-projection-mark em:nth-child(1){animation-delay:.0s}
.identity-projection-mark em:nth-child(2){animation-delay:.2s}
.identity-projection-mark em:nth-child(3){animation-delay:.4s}
.identity-projection-mark em:nth-child(4){animation-delay:.6s}
.identity-projection-mark em:nth-child(5){animation-delay:.8s;background:rgba(230,201,106,.7)}
@keyframes identityPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

/* Adjacent surfaces: three articulated projections of the same primitive.
 * Sits below the console and reads as a designed extension, not filler. */
.identity-adjacent{
  margin-top:34px;
  padding:28px 30px 30px;
  border:1px solid rgba(230,201,106,.20);
  border-radius:20px;
  background:
    radial-gradient(720px 320px at 100% 0%,rgba(230,201,106,.06),transparent 60%),
    linear-gradient(160deg,rgba(10,20,42,.9),rgba(4,10,22,.85));
  position:relative;overflow:hidden;
}
.identity-adjacent:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,201,106,.5) 50%,transparent);
}
.identity-adjacent-head{
  max-width:720px;margin-bottom:22px;
  display:flex;flex-direction:column;gap:6px;
}
.identity-adjacent-head .micro-label{color:var(--auric)}
.identity-adjacent-head h3{
  font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.015em;line-height:1.15;
  margin:6px 0 4px;color:var(--text);
}
.identity-adjacent-head p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:64ch}
.identity-adjacent-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.identity-adjacent-card{
  position:relative;
  padding:22px 22px 20px;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(15,26,48,.85),rgba(7,14,30,.85));
  display:flex;flex-direction:column;gap:8px;
  transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}
.identity-adjacent-card:hover{
  transform:translateY(-2px);
  border-color:rgba(230,201,106,.35);
  background:linear-gradient(180deg,rgba(20,34,60,.9),rgba(10,20,38,.9));
}
.identity-adjacent-num{
  font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--auric);
}
.identity-adjacent-card h4{
  font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.2;letter-spacing:-.01em;
  margin:6px 0 4px;color:var(--text);
}
.identity-adjacent-card p{margin:0;color:var(--text-dim);font-size:12.5px;line-height:1.55}
.identity-adjacent-tag{
  margin-top:auto;padding-top:12px;
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  border-top:1px dashed rgba(214,225,239,.1);
}

/* =============================================================================
 * ECOSYSTEM · lattice of 10 actors
 * Interactive reveals with State / What ArgentumX coordinates / Gain / Example
 * ========================================================================== */
.ecosystem-lattice{
  margin-top:52px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;
}
/* v3 · <div>-based cell with an internal <button> toggle.
 * NO cell open by default. Rebalanced facets (4 equal cells, example spans
 * both columns and reads as a resolved outcome). Per-actor SVG glyphs. */
.eco-cell{
  position:relative;
  background:linear-gradient(180deg,rgba(11,22,44,.95),rgba(5,11,26,.95));
  color:var(--text);
  display:flex;flex-direction:column;
  transition:background .3s ease;
}
.eco-cell:hover{background:linear-gradient(180deg,rgba(15,30,58,.98),rgba(7,15,32,.98))}
.eco-cell.is-open{background:linear-gradient(180deg,rgba(18,36,68,.98),rgba(9,20,40,.98))}
.eco-cell-toggle{
  all:unset;
  display:flex;flex-direction:column;gap:12px;
  padding:24px 26px 22px;text-align:left;cursor:pointer;
  border-radius:0;
}
.eco-cell-toggle:focus-visible{outline:2px solid var(--celeste);outline-offset:-4px}
.eco-cell-head{display:flex;align-items:center;gap:12px}
.eco-glyph{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 auto;
  border-radius:10px;
  border:1px solid rgba(230,201,106,.28);
  background:rgba(230,201,106,.05);
  color:var(--auric-light);
}
.eco-num{
  font:10px var(--mono);letter-spacing:.14em;color:var(--celeste);text-transform:uppercase;
  margin-right:auto;
}
.eco-cta{
  font:9px var(--mono);letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);
  transition:.2s ease;display:inline-flex;align-items:center;gap:4px;
}
.eco-cta em{font-style:normal;color:var(--celeste-hi);transition:transform .3s var(--ease)}
.eco-cell:hover .eco-cta{color:var(--text);border-color:rgba(116,172,223,.35);background:rgba(116,172,223,.06)}
.eco-cell.is-open .eco-cta{color:var(--auric-light);border-color:rgba(230,201,106,.42);background:rgba(230,201,106,.08)}
.eco-cell.is-open .eco-cta em{transform:rotate(90deg)}
.eco-cell h3{margin:0;font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.005em;color:var(--text)}
.eco-cell-relevance{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:60ch}
/* Detail panel is now outside the toggle button.
 * v4: two sub-blocks — a per-actor mini scene + the 4 facets grid. */
.eco-cell-detail{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .3s ease,margin .5s var(--ease);
  margin:0 26px;
  display:flex;flex-direction:column;gap:12px;
}
.eco-cell.is-open .eco-cell-detail{max-height:1020px;opacity:1;margin:0 26px 22px}
.eco-cell-scene{
  width:100%;aspect-ratio:280/120;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(230,201,106,.20);
  background:
    radial-gradient(600px 220px at 50% 0%,rgba(230,201,106,.05),transparent 60%),
    linear-gradient(180deg,rgba(4,10,22,.75),rgba(4,10,22,.55));
}
.eco-cell-scene svg{display:block;width:100%;height:100%}
.eco-cell-facets{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-radius:12px;border:1px solid var(--line);
  overflow:hidden;
}
.eco-facet{
  background:linear-gradient(180deg,rgba(4,10,22,.72),rgba(4,10,22,.4));
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;
}
.eco-facet .micro-label{color:var(--muted-2)}
.eco-facet p{margin:0;color:var(--text-dim);font-size:12px;line-height:1.55}
.eco-facet--example{
  grid-column:1/-1;
  background:linear-gradient(90deg,rgba(230,201,106,.08),rgba(230,201,106,.02));
  border-top:1px solid rgba(230,201,106,.18);
}
.eco-facet--example .micro-label{color:var(--auric)}
.eco-facet--example p{color:var(--text)}

.ecosystem-cta{
  margin-top:34px;padding:24px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(90deg,rgba(255,255,255,.014),rgba(255,255,255,0));
}
.ecosystem-cta p{margin:0;color:var(--muted);font-size:14px;max-width:64ch}

/* =============================================================================
 * RESEARCH · themes of inquiry
 * ========================================================================== */
.section-research{padding:120px 0}

/* Editorial lede: a short, quiet framing line above the themes.
 * Reads as journal / thinking surface rather than internal architecture memo. */
.research-lede{
  margin-top:32px;
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;max-width:760px;
  border-left:1px solid rgba(230,201,106,.4);
  background:linear-gradient(90deg,rgba(230,201,106,.04),rgba(230,201,106,0));
}
.research-lede-mark{
  width:10px;height:10px;flex:0 0 auto;margin-top:6px;
  border-radius:50%;
  background:radial-gradient(circle,var(--auric-light) 0%,var(--auric) 60%,transparent 70%);
  box-shadow:0 0 14px rgba(230,201,106,.4);
}
.research-lede p{
  margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;
  font-family:var(--serif);font-style:italic;font-weight:340;letter-spacing:-.005em;
}
.research-themes{
  margin-top:36px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.research-themes article{
  position:relative;
  background:linear-gradient(180deg,rgba(11,22,44,.95),rgba(5,11,26,.95));
  padding:26px 26px 52px;min-height:260px;display:flex;flex-direction:column;gap:10px;
}
.research-theme-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;
}
.research-theme-num{
  font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.research-mode-tag{
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
  border:1px solid var(--line-2);
  color:var(--text-dim);
  background:rgba(255,255,255,.02);
}
.research-mode-tag.mode-01{color:var(--celeste-hi);border-color:rgba(116,172,223,.32);background:rgba(116,172,223,.06)}
.research-mode-tag.mode-02{color:var(--green);border-color:rgba(78,214,161,.32);background:rgba(78,214,161,.06)}
.research-mode-tag.mode-03{color:var(--auric);border-color:rgba(230,201,106,.32);background:rgba(230,201,106,.06)}
.research-mode-tag.mode-04{color:var(--amber);border-color:rgba(240,198,111,.32);background:rgba(240,198,111,.06)}
.research-themes h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:8px 0 6px;letter-spacing:-.005em;line-height:1.15}
.research-themes p{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0}
.research-theme-state{
  position:absolute;left:26px;bottom:22px;
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  padding:4px 10px;border:1px dashed rgba(214,225,239,.14);border-radius:999px;
}

/* =============================================================================
 * COMPANY / CTA
 * ========================================================================== */
.section-company{padding:120px 0 80px}
.company-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}
.company-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.company-actions p{width:100%;text-align:right;color:var(--muted-2);font-size:11px}

/* =============================================================================
 * FOOTER
 * ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:56px 0 42px;background:linear-gradient(180deg,transparent,rgba(4,8,20,.65))}
.footer-grid{
  display:grid;grid-template-columns:1.6fr repeat(7,1fr);gap:28px;
  align-items:flex-start;
}
.footer-brand-col{max-width:340px}
.footer-brand-col .brand-lockup{margin-bottom:14px}
.footer-tagline{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 10px}
.footer-meta{color:var(--muted-2);font-size:11px;line-height:1.55;margin:0 0 10px}
.footer-domain{margin:0;color:var(--muted-2);font-size:11px}
/* Social links: restrained silver default, auric on hover. Shared primitive
 * used by both index.html and research.html footers. Icons are inline SVG.
 * Minimum 40×40 hit target for touch. */
.footer-social{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;align-items:center;gap:6px;
}
.footer-social li{margin:0}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border-radius:10px;
  color:var(--muted);
  border:1px solid rgba(214,225,239,.10);
  background:rgba(255,255,255,.015);
  transition:color .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .18s var(--ease);
}
.footer-social svg{display:block;width:auto;height:auto}
.footer-social a:hover,
.footer-social a:focus-visible{
  color:var(--auric-light);
  border-color:rgba(230,201,106,.35);
  background:rgba(230,201,106,.05);
  box-shadow:0 0 18px rgba(230,201,106,.14);
  transform:translateY(-1px);
}
.footer-social a:focus-visible{outline:2px solid rgba(230,201,106,.55);outline-offset:2px}
.footer-domain a{color:var(--celeste)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col-hdr{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2);font-weight:600;margin-bottom:6px}
.footer-col a{color:var(--muted);font-size:12.5px;transition:color .2s ease;cursor:pointer}
.footer-col a:hover{color:var(--text)}
.footer-inactive{color:var(--muted-3);font-size:12.5px;cursor:not-allowed}
.footer-jurisdictions{color:var(--muted-2);font-size:11px;letter-spacing:.06em}
.footer-legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted-2);font-size:10.5px;flex-wrap:wrap}

/* =============================================================================
 * INTAKE MODAL
 * ========================================================================== */
.intake-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:5vh 20px 20px}
.intake-modal[hidden]{display:none}
.intake-backdrop{position:absolute;inset:0;background:rgba(3,7,16,.72);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);animation:intakeFadeIn .28s ease-out}
.intake-panel{position:relative;width:min(920px,100%);max-height:90vh;overflow-y:auto;background:linear-gradient(160deg,rgba(11,22,44,.98),rgba(5,12,27,.98));border:1px solid rgba(116,172,223,.24);border-radius:24px;box-shadow:0 44px 120px rgba(0,0,0,.55);animation:intakePanelIn .32s var(--ease)}
@keyframes intakeFadeIn{from{opacity:0}to{opacity:1}}
@keyframes intakePanelIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.intake-head{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;padding:28px 32px 8px}
.intake-head-copy{max-width:640px}
.intake-head-copy h2{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.15;letter-spacing:-.02em;margin:8px 0 10px;color:var(--text)}
.intake-head-copy p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0}
.intake-close{background:transparent;border:1px solid var(--line);color:var(--muted);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:14px;transition:.2s ease}
.intake-close:hover{color:var(--text);border-color:rgba(116,172,223,.4)}
/* CMO-owned background-image slot system (GH #15).
 * ─────────────────────────────────────────────────
 * Each participating section wraps its background image in a
 * .section-bg container. The container sits at position:absolute
 * behind the section content, keeps images subordinate to product
 * objects and copy, applies a dark treatment (multiply blend +
 * saturation reduction) so imagery reads at low intensity, and
 * hosts a picture element for AVIF/WebP responsive delivery.
 *
 * data-image-status governs whether the slot renders anything:
 *   "live"        → the section has a CMO-approved asset
 *   "pending-cmo" → no image rendered (empty is honest)
 *
 * Do not use this slot for the product visuals themselves — those
 * are approved product objects, not CMO background art. */
.section-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:strict;
}
.section-bg picture,.section-bg img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.section-bg img{
  object-fit:cover;object-position:center;
  /* Dark treatment · low saturation · controlled auric-celeste tone.
   * mix-blend-mode:screen keeps the SVG's light lines legible over the
   * dark section ground while allowing the darker areas to sink back. */
  filter:saturate(.55) brightness(.90);
  mix-blend-mode:screen;
  opacity:.42;
}
.section-bg[data-image-status="pending-cmo"] img{display:none}
/* Doctrine-specific placement — pull the composition slightly right
 * so the topographic focal point sits behind the type-block negative
 * space, not on top of the numerals. */
.section-bg--doctrine img{
  object-position:65% 50%;
  opacity:.36;
  transform:scale(1.02); /* mask any slight crop line at edges */
}
@media (prefers-reduced-motion:reduce){
  .section-bg img{opacity:.30}
}

/* Intake stepper — real 4-column progress. Each step owns one grid
 * column, so the numeral and label can never collide with another step.
 * The connector line sits behind the numerals (::before) at 50% vertical
 * position so it visually threads the four bubbles without overlapping.
 * Mobile switches to a single compact "STEP N / M · Label" indicator +
 * progress bar to avoid squeezing four translated labels together. */
.intake-stepper{margin:20px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intake-steps--desktop{list-style:none;margin:0;padding:18px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.intake-steps--desktop::before{
  content:"";position:absolute;left:calc(32px + 12px);right:calc(32px + 12px);top:50%;height:1px;
  background:var(--line-2);z-index:0;pointer-events:none;
}
.intake-steps--desktop li{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  min-width:0; /* allow long localised labels to ellipsize instead of overflow */
}
.intake-steps--desktop li .step-num{
  flex:0 0 auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);font-size:10px;color:var(--muted-2);background:var(--bg);
}
.intake-steps--desktop li .step-lbl{
  min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.intake-steps--desktop li.is-active{color:var(--text)}
.intake-steps--desktop li.is-active .step-num{border-color:var(--celeste);color:var(--celeste);background:rgba(116,172,223,.10)}
.intake-steps--desktop li.is-done{color:var(--muted)}
.intake-steps--desktop li.is-done .step-num{border-color:rgba(78,214,161,.6);color:var(--green);background:rgba(78,214,161,.08)}

.intake-steps--mobile{display:none;padding:14px 22px;align-items:center;gap:14px}
.intake-mstep{display:flex;flex-direction:column;gap:2px;min-width:0}
.intake-mstep-count{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--celeste)}
.intake-mstep-label{font:12px/1.2 var(--sans);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intake-mstep-bar{position:relative;flex:1 1 auto;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.intake-mstep-bar-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(.25);
  background:linear-gradient(90deg,var(--celeste),rgba(78,214,161,.85));transition:transform .28s var(--ease)}

/* Inline validation errors — replace all alert() with in-field messaging. */
.field-error{display:none;margin-top:6px;color:#ff8f7a;font:11px/1.4 var(--sans);letter-spacing:.01em}
.field-error.is-visible{display:block}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:rgba(255,143,122,.55)}
.option-grid.is-invalid,.option-grid--pain.is-invalid{outline:1px solid rgba(255,143,122,.35);border-radius:8px}
.intake-error-summary{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(255,143,122,.35);border-radius:8px;background:rgba(255,143,122,.06);color:#ff8f7a;font:12px/1.5 var(--sans);display:none}
.intake-error-summary.is-visible{display:block}

/* Privacy Notice link inside consent copy */
.field-consent a{color:var(--celeste);text-decoration:underline;text-underline-offset:2px}
.field-consent a:hover,.field-consent a:focus-visible{color:var(--text)}
.intake-form{padding:26px 32px 24px}
.intake-step{border:0;padding:0;margin:0;display:none}
.intake-step.is-active{display:block;animation:stepIn .3s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.field-hint{margin:0 0 16px;color:var(--muted);font-size:13px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-grid--triple{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field--wide{grid-column:1/-1}
.field-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);font-weight:600}
.field input:not([type="checkbox"]):not([type="radio"]),.field textarea,.field select{background:rgba(3,7,16,.55);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px 14px;font-family:var(--sans);font-size:14px;transition:border-color .2s ease,background .2s ease;width:100%}
.field input[type="checkbox"],.field input[type="radio"]{width:16px;height:16px;flex:0 0 16px}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:rgba(116,172,223,.55);background:rgba(6,12,26,.75)}
.option-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:6px}
.option{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.014);cursor:pointer;font-size:12.5px;color:var(--text);transition:.2s ease}
.option:hover{border-color:rgba(116,172,223,.35);background:rgba(116,172,223,.04)}
.option input{accent-color:var(--celeste);flex:0 0 auto}
.option:has(input:checked){border-color:rgba(116,172,223,.55);background:rgba(116,172,223,.09)}
.field-consent{display:flex;flex-direction:row;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.014)}
.field-consent input{margin-top:3px;accent-color:var(--celeste)}
.field-consent span{color:var(--muted);font-size:12.5px;line-height:1.5}
.intake-footer{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.intake-progress{color:var(--muted-2);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;flex:1;text-align:center;min-width:120px}
.intake-truth{margin:0;padding:14px 32px 24px;color:var(--muted-2);font-size:10.5px;text-align:center;border-top:1px solid var(--line)}
.intake-done{padding:14px 0 6px;text-align:center}
.intake-done h3{font-family:var(--serif);font-size:26px;font-weight:400;margin:12px 0 14px;color:var(--text)}
.intake-done p{color:var(--muted);font-size:14px;line-height:1.55;max-width:520px;margin:0 auto 12px}
.intake-done-meta{font:11px var(--mono);letter-spacing:.06em;color:var(--muted-2);margin:16px 0 22px !important}
.intake-done .button{margin-top:8px}
.intake-done--fail h3{color:var(--amber)}
.intake-done--fail p a{color:var(--celeste-hi);text-decoration:underline}
body.intake-open{overflow:hidden}

/* =============================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width:1280px){
  .footer-grid{grid-template-columns:1.4fr repeat(4,1fr);row-gap:32px}
  .footer-brand-col{grid-column:1/-1;max-width:none}
  .instrument-body{grid-template-columns:1.4fr 1fr}
}
@media (max-width:1180px){
  .main-nav{gap:18px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-viewport{min-height:auto;height:auto;padding:32px 0}
  .hero-stage{height:min(80vh,660px)}
  .process-ribbon{grid-template-columns:repeat(3,1fr)}
  .process-ribbon li{border-right:0;border-bottom:1px solid var(--line)}
  .process-ribbon li:nth-child(3n){border-right:0}
  .perspective-scope{grid-template-columns:repeat(2,1fr)}
  .perspective-constants{grid-template-columns:1fr}
  .constants-atoms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .constants-arrow{text-align:left;max-width:none}
  .ecosystem-lattice{grid-template-columns:1fr}
  .identity-console{grid-template-columns:1fr}
  .identity-adjacent-grid{grid-template-columns:1fr}
  .identity-projection-head{flex-direction:column;gap:10px}
  .identity-substrate{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
  .identity-substrate-item:nth-child(3n){border-right:0}
  .identity-substrate-item:nth-child(n+4){border-top:1px dashed rgba(230,201,106,.14);padding-top:12px}
  .identity-substrate-out{display:none}
  .architecture-figure{margin-top:44px}
  .architecture-figure-frame{padding:10px}
  .architecture-figure-caption p{font-size:12.5px}
  .company-grid{grid-template-columns:1fr;gap:32px}
  .company-actions{justify-content:flex-start}
  .company-actions p{text-align:left}
  .board-columns{grid-template-columns:1fr 1fr}
  .board--fund .board-columns,.board--broker .board-columns,.board--managed .board-columns{grid-template-columns:1fr}
  .board-rail{grid-template-columns:repeat(2,1fr)}
  .board-rail>div:nth-child(2){border-right:0}
  .board-rail>div:nth-child(n+3){border-top:1px solid var(--line)}
  .board-rail>div:nth-child(3){border-right:1px solid var(--line)}
  .state-support{grid-template-columns:1fr 1fr}
  .state-context{grid-template-columns:1fr 1fr}
  .research-modes{grid-template-columns:1fr 1fr}
  .doctrine-annotations{grid-template-columns:1fr}
  .header-actions .button-partner{display:none}
  .cta-pair .cta-pair-thread{display:none}
  .cta-pair{padding:2px}
}
@media (max-width:900px){
  :root{--header:64px}
  html,body{max-width:100vw;overflow-x:hidden}
  .header-inner{width:min(100% - 28px,1000px);grid-template-columns:auto auto;justify-content:space-between}
  .main-nav{display:none}
  .header-actions{justify-self:end}
  .container{width:min(100% - 32px,760px)}
  .hero-track{height:auto}
  .hero-viewport{position:relative;top:0;height:auto;min-height:auto;padding:24px 0 40px;overflow:visible}
  .hero-copy h1{font-size:clamp(46px,10vw,64px)}
  .hero-stage{height:min(100vh,720px);min-height:520px}
  .hero-cover{padding:22px 20px}
  .hero-cover-body{height:calc(100% - 88px)}
  .board-primary-value{font-size:36px}
  .board-columns{grid-template-columns:1fr}
  .board-rail{grid-template-columns:1fr 1fr}
  .board-rail>div:nth-child(n+3){border-top:1px solid var(--line)}
  .board-rail>div{border-right:0}
  .board-rail>div:nth-child(odd){border-right:1px solid var(--line)}
  .section{padding:88px 0}
  .section-thesis{padding:64px 0 0}
  .section-doctrine{padding:96px 0 88px}
  .thesis-track{height:200vh}
  .thesis-viewport{min-height:520px}
  .instrument-body{grid-template-columns:1fr}
  .instrument-state{border-right:0;border-bottom:1px solid var(--line)}
  .state-support{grid-template-columns:1fr 1fr}
  .state-context{grid-template-columns:1fr 1fr}
  .state-primary-value{align-items:flex-start;gap:8px}
  .state-primary-value strong{font-size:44px}
  .doctrine-statement{font-size:clamp(30px,6vw,44px)}
  .perspective-constants{grid-template-columns:1fr;gap:12px}
  .constants-atoms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eco-cell-detail{grid-template-columns:1fr}
  .research-modes{grid-template-columns:1fr 1fr}
  .process-ribbon{grid-template-columns:repeat(2,1fr)}
  .process-doctrine{grid-template-columns:1fr;gap:14px}
  .perspective-panel{grid-template-columns:1fr}
  .perspective-tabs{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}
  .perspective-tabs button{min-width:140px}
  .identity-tabs button{min-width:auto;font-size:10px;padding:12px 8px}
  .perspective-scope{grid-template-columns:1fr 1fr}
  .perspective-signals{grid-template-columns:1fr}
  .research-themes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-legal{flex-direction:column;gap:8px}
  .intake-panel{max-height:95vh}
  .intake-head{padding:22px 22px 4px;flex-direction:column;gap:14px}
  /* On tablet-and-below, four horizontally packed steps + translated
   * labels overflow. Switch to the compact "STEP N / M · Label" indicator. */
  .intake-steps--desktop{display:none}
  .intake-steps--mobile{display:flex}
  .intake-form{padding:22px}
  .field-grid,.field-grid--triple,.option-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  html,body{overflow-x:hidden}
  .container{width:min(100% - 24px,760px)}
  .header-actions .button{padding:0 13px;min-height:38px;font-size:11px}
  .hero-copy h1{font-size:42px}
  .hero-lede{font-size:15px}
  .hero-track{height:auto}
  .hero-atmosphere{display:none}
  .hero-viewport{position:relative;top:0;height:auto;min-height:0;padding:24px 0 32px;overflow:visible}
  .hero-stage{height:auto}
  .hero-covers{position:relative;inset:0;height:auto;display:flex;flex-direction:column;gap:16px}
  .hero-cover{position:relative;inset:0;opacity:1 !important;transform:none !important;z-index:auto !important;width:100%;padding:20px 18px}
  .hero-cover-body{height:auto;overflow:visible}
  .hero-cover-title{font-size:18px}
  .hero-progress{display:none}
  .board{gap:16px}
  .board-top{grid-template-columns:1fr;gap:14px;padding-bottom:14px}
  .board-primary-value{font-size:30px}
  .board-rail{grid-template-columns:1fr 1fr}
  .board-rail>div{border-right:0;padding:12px 14px}
  .board-rail>div:nth-child(odd){border-right:1px solid var(--line)}
  .board-rail>div:nth-child(n+3){border-top:1px solid var(--line)}
  .board-list li{font-size:11px;gap:8px}
  .board-list li em{font-size:10px}
  .board-decision{grid-template-columns:auto 1fr;gap:12px}
  .board-decision-meta{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;text-align:left}
  .board-decision p{font-size:12px}
  .identity-substrate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .identity-substrate-item:nth-child(3n){border-right:1px dashed rgba(230,201,106,.14)}
  .identity-substrate-item:nth-child(2n){border-right:0}
  .identity-substrate-item:nth-child(n+3){border-top:1px dashed rgba(230,201,106,.14);padding-top:12px}
  .architecture-figure-frame{padding:8px}
  .architecture-figure-corners i{width:12px;height:12px}
  .board-histogram{height:28px}
  .board-primary-value{font-size:32px}
  .thesis-track{height:auto}
  .thesis-viewport{position:relative;top:0;height:auto;padding:40px 0}
  .thesis-field{height:auto;display:flex;flex-direction:column;gap:8px;align-items:center}
  .tk{position:relative;left:0 !important;top:0 !important;transform:none !important}
  .tk-band{position:relative;left:0;right:0;top:0;margin:12px 0;border-radius:12px;padding:12px}
  .process-ribbon{grid-template-columns:1fr}
  .process-ribbon li{min-height:auto}
  .research-themes{grid-template-columns:1fr}
  .research-modes{grid-template-columns:1fr}
  .state-support{grid-template-columns:1fr}
  .state-context{grid-template-columns:1fr}
  .doctrine-annotations{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .field-grid,.field-grid--triple,.option-grid{grid-template-columns:1fr}
  .intake-head-copy h2{font-size:22px}
  .state-authority-chain{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-cover{transition:none !important}
  .tk{transition:none !important}
  .atmo-orb,.atmo-veil,.atmo-grid{animation:none !important}
  .hero-scroll-hint-line:after{animation:none}
  /* Reduced motion: linearize the hero so all covers stack readably */
  .hero-track{height:auto}
  .hero-viewport{position:relative;top:0;height:auto;padding:32px 0}
  .hero-covers{position:relative;inset:0;height:auto;display:flex;flex-direction:column;gap:16px}
  .hero-cover{position:relative;inset:0;opacity:1 !important;transform:none !important;z-index:auto !important}
  .hero-progress{display:none}
  .thesis-track{height:auto}
  .thesis-viewport{position:relative;top:0;height:auto;padding:32px 0}
  .tk{position:relative;left:0 !important;top:0 !important;transform:none !important}
}

/* =============================================================================
 * PERF · v2 additions
 * ========================================================================== */
/* Below-fold sections get content-visibility so the browser can skip
 * layout/paint work until they enter the viewport. Contain-intrinsic-size
 * keeps scrollbars stable. Applied narrowly to avoid regressions. */
.section-how,
.section-solutions,
.section-ecosystem,
.section-company,
.section-jurisdictions{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* When the hero visual system is enabled (data-hero-visual attr on <body>) or
 * when jurisdictions layer is active, disable expensive filters on mobile to
 * keep frame rate steady on lower-end devices. */
@media (max-width:900px){
  .atmo-orb,.atmo-veil{filter:blur(80px) !important}
  .doctrine-veil,.hero-atmosphere{filter:none}
  .site-header{backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
  .atmo-blueprint{opacity:.5}
  /* Cheaper shadows on mobile */
  .instrument,.hero-cover{box-shadow:0 20px 60px rgba(0,0,0,.4) !important}
}

/* Only animate covers/tokens when the hero/thesis is near the viewport.
 * landing.js toggles data-active on the section root. */
.hero:not([data-hero-active]) .hero-covers,
.hero:not([data-hero-active]) .hero-progress-fill,
.section-thesis:not([data-thesis-active]) .thesis-progress-fill{
  will-change:auto;
}
.hero[data-hero-active] .hero-covers,
.section-thesis[data-thesis-active] .thesis-field{
  will-change:transform;
}

/* =============================================================================
 * HERO · v2 FINANCIAL FIELD (SVG systems object)
 * Ownable ArgentumX visual object. Sits behind the cover flow, subordinate.
 * Slow transform-based motion, paused when hero is out of view (via IO).
 * ========================================================================== */
.atmo-field{
  position:absolute;
  right:-6%;top:50%;
  width:min(880px,72%);height:min(880px,72%);
  transform:translateY(-50%);
  opacity:.85;pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
}
.atmo-field-orbits{
  transform-origin:center;
  animation:axFieldRotate 180s linear infinite;
  animation-play-state:paused;
}
.atmo-field-nodes{
  transform-origin:center;
  animation:axFieldRotateSlow 300s linear infinite;
  animation-play-state:paused;
}
.atmo-field-arcs{
  transform-origin:center;
  animation:axFieldRotate 240s linear infinite reverse;
  animation-play-state:paused;
}
.hero[data-hero-active] .atmo-field-orbits,
.hero[data-hero-active] .atmo-field-nodes,
.hero[data-hero-active] .atmo-field-arcs{ animation-play-state:running; }
@keyframes axFieldRotate  { to { transform:rotate(360deg); } }
@keyframes axFieldRotateSlow { to { transform:rotate(-360deg); } }
@media (prefers-reduced-motion:reduce){
  .atmo-field-orbits,.atmo-field-nodes,.atmo-field-arcs{animation:none !important}
}
@media (max-width:900px){
  .atmo-field{opacity:.55;right:-30%;width:min(720px,110%);height:min(720px,110%)}
}

/* =============================================================================
 * JURISDICTIONS · v2
 * Illustrative operating contexts. Fixed order. No claims.
 * ========================================================================== */
.section-jurisdictions{position:relative;padding:120px 0;overflow:hidden}
.jurisdictions-atmosphere{position:absolute;inset:0;pointer-events:none}
.jurisdictions-atmosphere span{
  position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.35;
}
.jurisdictions-atmosphere span:nth-child(1){
  left:-8%;top:20%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(155,200,238,.12),transparent 60%);
}
.jurisdictions-atmosphere span:nth-child(2){
  right:-6%;bottom:10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(230,201,106,.10),transparent 60%);
}
.jurisdictions-grid{
  list-style:none;margin:52px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--line);
}
.jur-cell{
  padding:22px 20px 24px;min-width:0;
  background:linear-gradient(180deg,rgba(11,22,44,.85),rgba(5,11,26,.85));
  display:flex;flex-direction:column;gap:12px;
  transition:background .3s ease;
}
.jur-cell:hover{background:linear-gradient(180deg,rgba(15,28,54,.95),rgba(7,15,32,.95))}
.jur-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.4);
}
.jur-flag svg{display:block;border-radius:50%}
.jur-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.jur-code{font:9px var(--mono);letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase}
.jur-body strong{font:500 14px var(--sans);letter-spacing:-.005em;color:var(--text);line-height:1.2}
.jur-body em{font-style:normal;font:10px var(--mono);letter-spacing:.06em;color:var(--auric-light,#f3e2a6)}
.jurisdictions-truth{
  margin:22px 0 0;text-align:center;
  font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
@media (max-width:1180px){ .jurisdictions-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:900px){ .jurisdictions-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .section-jurisdictions{padding:88px 0}}
@media (max-width:640px){ .jurisdictions-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =============================================================================
 * IDENTITY · v2 TRUST EXPERIENCE
 * "Trust shouldn't reset at every handoff."
 * Architectural seal: 6 evidence layers + authority ring + permission
 * membrane + central seal. Not a padlock.
 * ========================================================================== */
.identity-intro{
  display:grid;grid-template-columns:1.35fr .85fr;gap:52px;align-items:center;max-width:none;
}
.identity-intro-copy h2{
  font-family:var(--serif);font-weight:340;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(38px,4.4vw,68px);
  margin:14px 0 22px;
}
.identity-intro-copy > p{color:var(--muted);font-size:16px;line-height:1.7;max-width:640px;margin:0 0 22px}
.identity-intro-atoms{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.identity-intro-atoms li{
  font:10.5px var(--mono);letter-spacing:.08em;color:var(--text-dim);
  padding:5px 12px;border:1px solid rgba(230,201,106,.28);border-radius:999px;
  background:rgba(230,201,106,.05);
}
/* Legacy padlock-ish trust seal removed. Kept classes for backward compat. */
.identity-trust-seal{display:none}

/* Trust journey · portable trust context across handoffs.
 * Reads left-to-right in two rows:
 *   Normal (top): four separate pellets die at each node — "reset" tags
 *                 confirm the meaning.
 *   ArgentumX (bottom): one seal object travels the whole rail — "preserved"
 *                 tags reinforce the outcome.
 * Motion is transform/opacity only. IO-gated by parent section reveal. */
.identity-trust-journey{
  position:relative;justify-self:center;width:100%;max-width:520px;
  display:flex;flex-direction:column;gap:14px;
}
.trust-journey-svg{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 24px rgba(230,201,106,.12));
}
.trust-journey-caption{
  margin:0;padding:0 8px;
  color:var(--muted);font-size:12.5px;line-height:1.55;text-align:center;
  font-family:var(--serif);font-style:italic;
}
.tj-label{
  fill:var(--muted-2);font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.tj-rowlabel{
  fill:var(--muted-2);font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.tj-rowlabel--argx{fill:var(--auric)}
.tj-node circle{transition:stroke .3s ease}
/* Pellets · four segments, each dies at its terminal node. */
.tj-pellet-a{ transform:translateX(40px);  animation:tjPelletDie 5s ease-in-out infinite;   animation-delay:0.0s;   offset-path: path('M40,110 L150,110'); offset-anchor:center; }
.tj-pellet-b{ transform:translateX(150px); animation:tjPelletDie 5s ease-in-out infinite;   animation-delay:0.6s;   offset-path: path('M150,110 L260,110'); offset-anchor:center; }
.tj-pellet-c{ transform:translateX(260px); animation:tjPelletDie 5s ease-in-out infinite;   animation-delay:1.2s;   offset-path: path('M260,110 L370,110'); offset-anchor:center; }
.tj-pellet-d{ transform:translateX(370px); animation:tjPelletDie 5s ease-in-out infinite;   animation-delay:1.8s;   offset-path: path('M370,110 L480,110'); offset-anchor:center; }
@keyframes tjPelletDie{
   0%   { offset-distance:0%;   opacity:0; }
   8%   { opacity:1; }
  70%   { offset-distance:100%; opacity:1; }
  85%   { opacity:0; }
 100%   { opacity:0; }
}

/* Seal · one object traveling the full auric rail. */
.tj-seal{
  offset-path: path('M40,250 L150,250 L260,250 L370,250 L480,250');
  offset-anchor:center;
  animation:tjSealTravel 5s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(230,201,106,.5));
}
@keyframes tjSealTravel{
   0%   { offset-distance:0%;   opacity:0; }
   6%   { opacity:1; }
  20%   { offset-distance:22%; }
  40%   { offset-distance:47%; }
  60%   { offset-distance:72%; }
  85%   { offset-distance:100%; opacity:1; }
 100%   { offset-distance:100%; opacity:0; }
}

/* Text tags — subtle fade in/out timed with the animation. */
.tj-reset text{
  opacity:0;
  animation:tjTagFlash 5s ease-in-out infinite;
}
.tj-reset text:nth-child(1){animation-delay:0.6s}
.tj-reset text:nth-child(2){animation-delay:1.2s}
.tj-reset text:nth-child(3){animation-delay:1.8s}
.tj-reset text:nth-child(4){animation-delay:2.4s}
.tj-preserved text{
  opacity:.7;
}
@keyframes tjTagFlash{
   0%,60%,100% { opacity:0; }
   68%         { opacity:1; }
   80%         { opacity:.55; }
}
@media (prefers-reduced-motion:reduce){
  .tj-pellet [class^="tj-pellet-"],.tj-seal{animation:none !important}
  .tj-pellet [class^="tj-pellet-"]{opacity:1}
  .tj-seal{opacity:1;transform:translateX(260px)}
}
@media (max-width:1180px){
  .identity-intro{grid-template-columns:1fr;gap:32px}
  .identity-trust-journey{max-width:440px}
}
@media (max-width:640px){
  .trust-journey-caption{font-size:12px;padding:0}
}

/* =============================================================================
 * LANGUAGE SWITCHER · v3 · compact dropdown
 * <details>/<summary> baseline + inline locale-detect script.
 * Not a growing row — a small pill that opens a menu.
 * ========================================================================== */
.lang-menu{position:relative;margin-right:12px;display:inline-block}
.lang-menu[open]{z-index:110}
.lang-menu-btn{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 8px;
  font:11px var(--mono);letter-spacing:.10em;color:var(--muted);
  border:1px solid rgba(214,225,239,.14);border-radius:999px;
  background:rgba(255,255,255,.018);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.lang-menu-btn::-webkit-details-marker{display:none}
.lang-menu-btn::marker{content:''}
.lang-menu-btn:hover,.lang-menu-btn:focus-visible{
  color:var(--text);border-color:rgba(230,201,106,.32);
  background:rgba(230,201,106,.05);
}
.lang-menu-current{letter-spacing:.12em}
.lang-menu-caret{margin-left:2px;transition:transform .22s var(--ease)}
.lang-menu[open] .lang-menu-caret{transform:rotate(180deg)}
.lang-menu-pop{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:170px;padding:6px;
  border:1px solid rgba(230,201,106,.22);border-radius:12px;
  background:linear-gradient(160deg,rgba(11,22,44,.98),rgba(5,11,26,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;flex-direction:column;gap:1px;
  animation:langMenuIn .18s var(--ease);
}
@keyframes langMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-menu-item{
  display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;
  font-family:var(--sans);font-size:12px;color:var(--text-dim);
  transition:color .18s ease,background .18s ease;
}
.lang-menu-item:hover,.lang-menu-item:focus-visible{
  color:var(--text);background:rgba(230,201,106,.06);
}
.lang-menu-item.is-current{color:var(--auric-light);background:rgba(230,201,106,.08)}
.lang-menu-short{
  font:10px var(--mono);letter-spacing:.12em;color:var(--muted-2);min-width:22px;
}
.lang-menu-item.is-current .lang-menu-short{color:var(--auric-light)}
.lang-menu-label{font-size:12.5px}
@media (max-width:900px){ .lang-menu{margin-right:8px} }
@media (max-width:640px){
  .lang-menu-current{display:none}
  .lang-menu-btn{padding:6px 8px;gap:6px}
}

/* =============================================================================
 * THESIS · V3 · Three-state legible scene
 *
 * Founder-driven rewrite of the old fragmented-band-coordinated animation.
 * The old markup (.tk / .tk-band / .tk-columns / .tk-flow / .thesis-caption
 * / .thesis-layers) is superseded by .thesis-viewport--v3 markup + these
 * rules. The old classes are kept intact for graceful legacy fallback.
 *
 * Everything below is transform + opacity driven off the same --tp CSS var
 * that landing.js already writes via the centralized scheduler.
 *
 * CMO ART DIRECTION SLOT: replace .thesis-v3-atmo-{a,b,c} to swap the mood.
 * CMO ART DIRECTION SLOT: replace .thesis-v3-fabric mesh treatment to swap
 * the fabric material without touching mechanics.
 * ========================================================================== */

.thesis-track--v3{
  position:relative;
  /* Reduced height vs v2 → less scroll-jail, less computational load. */
  height:220vh;
  margin-top:56px;
}
.thesis-viewport--v3{
  position:sticky;top:var(--header);
  height:calc(100vh - var(--header));min-height:640px;
  display:grid;place-items:center;
  overflow:hidden;
  --tp:0;
  contain:layout paint;
}

/* Ambient atmosphere — replaceable art-direction layer. */
.thesis-v3-atmo{position:absolute;inset:0;pointer-events:none}
.thesis-v3-atmo-a,.thesis-v3-atmo-b,.thesis-v3-atmo-c{
  position:absolute;border-radius:50%;filter:blur(70px);
  will-change:opacity;
}
.thesis-v3-atmo-a{
  left:-6%;top:8%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(116,172,223,.12),transparent 60%);
  opacity:calc(1 - var(--tp) * .5);
}
.thesis-v3-atmo-b{
  left:22%;top:18%;width:640px;height:440px;
  background:radial-gradient(circle,rgba(230,201,106,.10),transparent 60%);
  /* Warm middle glow tied to State B. */
  opacity:calc(max(0, min(1, (var(--tp) - .25) * 3)));
}
.thesis-v3-atmo-c{
  right:-4%;bottom:10%;width:560px;height:400px;
  background:radial-gradient(circle,rgba(155,200,238,.14),transparent 60%);
  opacity:calc(max(0, min(1, (var(--tp) - .55) * 3)));
}

/* Captions — one visible at a time. */
.thesis-v3-caption{
  position:absolute;left:0;right:0;top:28px;
  display:flex;justify-content:center;
  font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  z-index:3;pointer-events:none;
}
.thesis-v3-caption span{position:absolute;transition:opacity .4s ease}
.thesis-v3-caption em{font-style:normal;color:var(--celeste-hi);font-weight:600;margin-right:6px}
.thesis-v3-caption span[data-state="A"]{opacity:calc(1 - max(0, min(1, (var(--tp) - .1) * 5)))}
.thesis-v3-caption span[data-state="B"]{opacity:calc(max(0, min(1, (var(--tp) - .3) * 6)) * (1 - max(0, min(1, (var(--tp) - .6) * 6))))}
.thesis-v3-caption span[data-state="B"] em{color:var(--auric)}
.thesis-v3-caption span[data-state="C"]{opacity:calc(max(0, min(1, (var(--tp) - .65) * 5)))}
.thesis-v3-caption span[data-state="C"] em{color:var(--auric-light)}

/* Stage — 100% wide field. */
.thesis-v3-stage{
  position:relative;
  width:min(1200px,calc(100% - 48px));
  height:min(78vh,640px);
}

/* Fragmented nodes.
 * At tp=0 they sit at (x0,y0). At tp≥.55 they sit at (xT,yT).
 * Two rows in State C: top row (rails) + bottom row (actors). */
.thesis-v3-nodes span{
  position:absolute;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(214,225,239,.16);
  background:linear-gradient(180deg,rgba(15,26,46,.94),rgba(7,15,30,.94));
  font-size:11px;letter-spacing:.02em;color:var(--muted);
  white-space:nowrap;
  transform-origin:center;
  /* Compute the current position by lerping between --x0/--y0 and --xT/--yT.
     --tpc is 0 in State A, ramps 0→1 through State B, is 1 in State C. */
  --tpc:clamp(0,calc((var(--tp) - .30) / .30),1);
  left:calc(var(--x0) + (var(--xT) - var(--x0)) * var(--tpc));
  top: calc(var(--y0) + (var(--yT) - var(--y0)) * var(--tpc));
  transform:translate(-50%,-50%);
  transition:border-color .4s ease,background .4s ease,color .4s ease;
  will-change:left,top;
}
.thesis-v3-nodes span b{font-weight:500;font-style:normal;color:inherit}
/* When coordination is in play, tint accents by cluster-ish role. */
.thesis-viewport--v3[data-thesis-state="fabric"] .thesis-v3-nodes span,
.thesis-viewport--v3[data-thesis-state="coherent"] .thesis-v3-nodes span{
  border-color:rgba(155,200,238,.32);color:var(--text);
}
.thesis-viewport--v3[data-thesis-state="coherent"] .thesis-v3-nodes span[data-actor="investor"],
.thesis-viewport--v3[data-thesis-state="coherent"] .thesis-v3-nodes span[data-actor="tax"],
.thesis-viewport--v3[data-thesis-state="coherent"] .thesis-v3-nodes span[data-actor="legal"]{
  border-color:rgba(230,201,106,.32);
}

/* Coordination fabric — appears in State B, refined in C.
 * Kept quiet (no big rectangle in the middle) — it's a woven mesh that
 * feels like an operating layer, not a decorative ribbon. */
.thesis-v3-fabric{
  position:absolute;left:6%;right:6%;top:42%;bottom:42%;
  border-top:1px solid rgba(230,201,106,calc(.08 + var(--tp) * .3));
  border-bottom:1px solid rgba(230,201,106,calc(.08 + var(--tp) * .3));
  background:linear-gradient(180deg,
    rgba(4,10,22,calc(.15 + var(--tp) * .25)),
    rgba(10,20,42,calc(.20 + var(--tp) * .30)),
    rgba(4,10,22,calc(.15 + var(--tp) * .25))
  );
  opacity:calc(max(0, min(1, (var(--tp) - .28) * 4)));
  transition:opacity .3s ease;
}
.tf-mesh{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(6,1fr);
  pointer-events:none;opacity:.7;
}
.tf-mesh span{
  border-right:1px dashed rgba(155,200,238,calc(.10 + var(--tp) * .18));
  position:relative;
}
.tf-mesh span:last-child{border-right:0}
/* Horizontal fibres — subtle "weave" feeling. */
.tf-mesh--h{
  display:block;
  background-image:repeating-linear-gradient(180deg,
    transparent 0,transparent 5px,
    rgba(155,200,238,calc(.05 + var(--tp) * .06)) 6px,
    transparent 7px);
}
.tf-mesh--h span{display:none}
.tf-head{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:center;align-items:baseline;gap:14px;
  opacity:calc(max(0, min(1, (var(--tp) - .35) * 4)));
}
.tf-mark{
  font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.015em;color:var(--text);
  text-shadow:0 0 calc(var(--tp) * 26px) rgba(230,201,106,calc(var(--tp) * .4));
}
.tf-role{
  font:9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--auric);
}
.tf-primitives{
  position:absolute;left:0;right:0;bottom:8%;
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;
  opacity:calc(max(0, min(1, (var(--tp) - .52) * 4)));
}
.tf-primitives span{
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
  padding:4px 9px;border:1px solid rgba(116,172,223,.22);border-radius:999px;
  background:rgba(116,172,223,.05);
}

/* Coherent operating environment — three cells surface in State C
 * along the bottom of the stage. They read as an outcome. */
.thesis-v3-outcome{
  position:absolute;left:0;right:0;bottom:2%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  opacity:calc(max(0, min(1, (var(--tp) - .65) * 4)));
  transform:translateY(calc((1 - max(0, min(1, (var(--tp) - .65) * 4))) * 12px));
  transition:opacity .4s ease,transform .5s var(--ease);
}
.to-cell{
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(230,201,106,.20);
  background:linear-gradient(180deg,rgba(11,22,44,.85),rgba(5,11,26,.85));
  display:flex;flex-direction:column;gap:4px;
}
.to-eyebrow{
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--auric);
}
.to-cell strong{
  font-family:var(--serif);font-weight:400;font-size:14.5px;letter-spacing:-.01em;color:var(--text);
}

/* Progress */
.thesis-v3-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(214,225,239,.06);overflow:hidden;
}

/* Mobile · linearize */
@media (max-width:900px){
  .thesis-track--v3{height:auto;margin-top:32px}
  .thesis-viewport--v3{position:relative;top:0;height:auto;padding:56px 0 32px}
  .thesis-v3-stage{height:min(560px,80vh);width:min(760px,calc(100% - 32px))}
  .thesis-v3-outcome{position:relative;grid-template-columns:1fr;gap:8px;margin-top:20px;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .thesis-v3-nodes span{transition:none !important;left:var(--xT);top:var(--yT)}
  .thesis-viewport--v3{--tp:1 !important}
  .thesis-v3-atmo-a,.thesis-v3-atmo-b,.thesis-v3-atmo-c{animation:none !important}
}

/* Legacy v2 classes still present — hide so the new v3 stage is authoritative. */
.thesis-viewport--v3 .tk-band,
.thesis-viewport--v3 .tk-columns,
.thesis-viewport--v3 .tk-flow,
.thesis-viewport--v3 .thesis-layers,
.thesis-viewport--v3 .thesis-caption{display:none}

/* =============================================================================
 * v3 · SOFTER SECTION TRANSITIONS + CMO-READY BACKGROUND SYSTEM
 *
 * Removes hard divider lines where possible and layers subtle veils between
 * major sections. Each big surface (Hero, Thesis, Doctrine, Product,
 * Ecosystem) exposes an .atmo-slot container so a future CMO art-direction
 * pass can drop in illustration/imagery per section without touching the
 * mechanics below.
 *
 * DESIGN PRINCIPLE
 *   - The bottom of each major section fades into the top of the next.
 *   - New atmosphere is CSS-only (radial + linear + blur), no new images.
 *   - No new global scroll listeners, no new animation loops.
 *   - Mobile: reduce blur, hide the outermost auric bloom layer.
 *
 * CMO SLOTS (drop imagery here per section)
 *   .hero-atmosphere       → hero art-direction slot
 *   .thesis-v3-atmo        → thesis art-direction slot (v3 mesh)
 *   .doctrine-atmosphere   → doctrine art-direction slot
 *   .product-atmosphere    → product art-direction slot
 *   .section-jurisdictions .jurisdictions-atmosphere
 *   .section-ecosystem     (needs slot below)
 * ========================================================================== */

/* Remove the hard top border on the Product section rule; replace with a
 * soft veil that fades from Doctrine's warm tone into Product's cool tone. */
.section-product{border-top:0;position:relative}
.section-product::before{
  content:"";position:absolute;left:0;right:0;top:-120px;height:180px;
  background:linear-gradient(180deg,
    rgba(4,8,20,0) 0%,
    rgba(6,12,28,.35) 55%,
    rgba(4,8,20,.75) 100%);
  pointer-events:none;z-index:1;
}

/* Same soft veil approach for Doctrine → Architecture and for
 * Architecture → Product. Removes the flat page-break feeling. */
.section-doctrine{
  border-top:0;border-bottom:0;
  background:linear-gradient(180deg,
    rgba(4,8,20,0) 0%,
    rgba(6,12,28,.85) 30%,
    rgba(6,12,28,.85) 70%,
    rgba(4,8,20,0) 100%);
}
.section-doctrine::after{
  content:"";position:absolute;left:0;right:0;bottom:-100px;height:160px;
  background:linear-gradient(180deg,
    rgba(6,12,28,.55) 0%,
    rgba(4,8,20,0) 100%);
  pointer-events:none;z-index:1;
}

/* Doctrine · add another depth plane behind the type. */
.doctrine-atmosphere::before{
  content:"";position:absolute;left:8%;right:8%;top:20%;bottom:20%;
  border-radius:30px;
  background:
    radial-gradient(80% 60% at 50% 40%,rgba(155,200,238,.06),transparent 65%),
    radial-gradient(70% 50% at 50% 60%,rgba(230,201,106,.05),transparent 65%);
  filter:blur(40px);
  pointer-events:none;
}

/* Product · richer atmospheric depth without noise. */
.product-atmosphere::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(600px 400px at 8% 20%,rgba(116,172,223,.06),transparent 55%),
    radial-gradient(700px 500px at 92% 80%,rgba(230,201,106,.04),transparent 55%);
}

/* Section-rule dividers: soften from hard 1px lines to a subtle 1px
 * gradient that fades in from transparency at both edges. Reads as a
 * horizon, not a page break. */
.section-rule{
  border-top:0;position:relative;
}
.section-rule::before{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,225,239,.14) 30%,rgba(214,225,239,.14) 70%,transparent);
}

/* CMO ART DIRECTION SLOT (empty by default).
 * Every major atmosphere already has an aria-hidden container. This
 * generic class can be used to add richer imagery later without touching
 * the section markup. */
.atmo-slot{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  z-index:0;
}

/* Mobile · reduce the softer veils' blur cost. */
@media (max-width:900px){
  .doctrine-atmosphere::before,.product-atmosphere::after{filter:blur(24px)}
}

/* =============================================================================
 * v4 · SEMANTIC ARCHITECTURE FIGURE
 *
 * Replaces the raster financial-state-to-outcomes.png/webp. Every label is
 * a real text node bound to the locale dictionary. Same visual composition
 * as the retired figure:
 *   1) header (brand + eyebrow)
 *   2) title (serif h3 with italic accent)
 *   3) twelve-step flow ordered list
 *   4) foundational substrate strip
 *   5) applied-across ecosystem row
 * ========================================================================== */
.architecture-figure--live .architecture-figure-frame{
  padding:32px 32px 26px;
  background:
    radial-gradient(1200px 500px at 50% -20%,rgba(230,201,106,.07),transparent 60%),
    linear-gradient(180deg,rgba(10,20,42,.85),rgba(4,10,22,.85));
}
.arch-fig{
  display:flex;flex-direction:column;gap:22px;
}
.arch-fig-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.arch-fig-brand{
  font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--text);
}
.arch-fig-eyebrow{
  font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.arch-fig-title{
  font-family:var(--serif);font-weight:340;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(28px,3.4vw,50px);margin:0;color:var(--text);
}
.arch-fig-title em{font-style:italic;color:var(--auric-light);font-weight:340}
.arch-fig-sub{
  color:var(--muted);font-size:14px;line-height:1.55;margin:0;max-width:720px;
}

/* 12-step flow.
 * Auto-flowing responsive grid. Small connector arrows appear between
 * cells via ::after; they hide when items wrap to a new line so we never
 * draw arrows pointing at nothing. */
.arch-flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 22px;
}
.arch-step{
  position:relative;
  padding:12px 12px 10px;
  border:1px solid rgba(155,200,238,.16);border-radius:12px;
  background:linear-gradient(180deg,rgba(15,26,46,.75),rgba(6,14,30,.75));
  display:flex;flex-direction:column;gap:4px;min-width:0;
  transition:border-color .28s ease,background .28s ease;
}
.arch-step:hover{
  border-color:rgba(230,201,106,.32);
  background:linear-gradient(180deg,rgba(20,34,60,.85),rgba(10,20,38,.85));
}
.arch-step-num{
  font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--celeste);
}
.arch-step strong{
  font:500 12.5px var(--sans);letter-spacing:-.005em;color:var(--text);line-height:1.2;
  overflow-wrap:break-word;
}
.arch-step--intent{border-color:rgba(155,200,238,.36)}
.arch-step--intent .arch-step-num{color:var(--celeste-hi)}
.arch-step--newstate{border-color:rgba(155,200,238,.4)}
.arch-step--newstate .arch-step-num{color:var(--celeste-hi)}
.arch-step--learning{border-color:rgba(230,201,106,.42)}
.arch-step--learning .arch-step-num{color:var(--auric)}
/* Connector arrows between adjacent cells on the same row. */
.arch-step::after{
  content:"";position:absolute;
  right:-13px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;
  border-right:1px solid rgba(230,201,106,.4);
  border-top:1px solid rgba(230,201,106,.4);
  transform-origin:center;
  transform:translateY(-50%) rotate(45deg);
  opacity:.7;
}
.arch-step:nth-child(6n)::after,.arch-step:last-child::after{display:none}

/* Foundational substrate. */
.arch-substrate{
  border:1px solid rgba(230,201,106,.22);border-radius:14px;
  background:linear-gradient(180deg,rgba(11,22,44,.75),rgba(5,11,26,.75));
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.arch-substrate-label{
  font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--auric);
}
.arch-substrate-atoms{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.arch-substrate-atoms li{
  font:10.5px var(--mono);letter-spacing:.06em;color:var(--auric-light);
  padding:5px 12px;border:1px solid rgba(230,201,106,.28);border-radius:999px;
  background:rgba(230,201,106,.06);
}
.arch-substrate-note{
  margin:0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:820px;
}

/* Applied-across row · 7 actor archetypes with mini glyphs. */
.arch-applied{
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.014),rgba(255,255,255,0));
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.arch-applied-label{
  font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--celeste-hi);
}
.arch-applied-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;
}
.arch-applied-list li{
  min-width:0;
  display:flex;flex-direction:column;gap:4px;
  padding:10px 10px 12px;
  border:1px solid var(--line-2);border-radius:10px;
  background:linear-gradient(180deg,rgba(11,22,44,.7),rgba(5,11,26,.7));
}
.arch-applied-glyph{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border-radius:8px;
  color:var(--celeste-hi);
  border:1px solid rgba(155,200,238,.24);
  background:rgba(155,200,238,.05);
}
.arch-applied-list li strong{
  font:500 12px var(--sans);letter-spacing:-.005em;color:var(--text);line-height:1.2;
}
.arch-applied-list li small{
  font:10px var(--mono);color:var(--muted-2);letter-spacing:.02em;line-height:1.4;
  overflow-wrap:break-word;
}

@media (max-width:1180px){
  .arch-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .arch-step:nth-child(6n)::after{display:block}
  .arch-step:nth-child(4n)::after{display:none}
  .arch-applied-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .architecture-figure--live .architecture-figure-frame{padding:22px}
  .arch-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arch-step:nth-child(4n)::after,.arch-step:nth-child(6n)::after{display:block}
  .arch-step:nth-child(3n)::after{display:none}
  .arch-applied-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .arch-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arch-step:nth-child(3n)::after{display:block}
  .arch-step:nth-child(2n)::after{display:none}
}

/* =============================================================================
 * THESIS · V4 · Distributed truths → coherent operating state
 *
 * Six financial-system windows on the LEFT (State A/B). Each pane presents
 * one real-looking piece of the picture. As --tp advances they translate
 * toward the composed OUTCOME pane on the right and fade slightly, while
 * the outcome pane rises into full visibility.
 *
 * Motion is transform + opacity only. All values derive from --tp; the JS
 * scheduler is unchanged.
 * ========================================================================== */

.thesis-track--v4{position:relative;height:200vh;margin-top:56px}
.thesis-viewport--v4{
  position:sticky;top:var(--header);
  height:calc(100vh - var(--header));min-height:640px;
  display:grid;place-items:center;
  overflow:hidden;
  --tp:0;
  contain:layout paint;
}
.thesis-v4-atmo{position:absolute;inset:0;pointer-events:none}
.thesis-v4-atmo span{
  position:absolute;border-radius:50%;filter:blur(80px);
}
.thesis-v4-atmo-a{
  left:-6%;top:8%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(116,172,223,.12),transparent 60%);
  opacity:calc(1 - var(--tp) * .4);
}
.thesis-v4-atmo-b{
  right:-6%;bottom:6%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(230,201,106,.10),transparent 60%);
  opacity:calc(max(0, min(1, (var(--tp) - .3) * 3)));
}

.thesis-v4-caption{
  position:absolute;left:0;right:0;top:26px;
  display:flex;justify-content:center;
  font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  z-index:3;pointer-events:none;
}
.thesis-v4-caption span{position:absolute;transition:opacity .35s ease}
.thesis-v4-caption em{font-style:normal;color:var(--celeste-hi);font-weight:600;margin-right:6px}
.thesis-v4-caption span[data-state="A"]{opacity:calc(1 - max(0, min(1, (var(--tp) - .1) * 3)))}
.thesis-v4-caption span[data-state="C"]{opacity:calc(max(0, min(1, (var(--tp) - .55) * 3)))}
.thesis-v4-caption span[data-state="C"] em{color:var(--auric-light)}

.thesis-v4-stage{
  position:relative;
  width:min(1240px,calc(100% - 48px));
  height:min(78vh,660px);
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
}
/* Source cards · left column · 2x3 grid.
 * They translate slightly toward the outcome pane as --tp advances and dim. */
.thesis-v4-sources{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  --shift:calc(var(--tp) * 20px);
  --dim:calc(1 - var(--tp) * .35);
  transform:translateX(var(--shift));
  opacity:var(--dim);
  transition:transform .3s var(--ease),opacity .3s ease;
}
.tv4{
  padding:14px 16px 16px;border-radius:12px;
  border:1px solid rgba(155,200,238,.18);
  background:linear-gradient(180deg,rgba(15,26,46,.9),rgba(7,15,30,.9));
  display:flex;flex-direction:column;gap:6px;min-width:0;
  transition:border-color .35s ease,background .35s ease;
}
.tv4 header{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.tv4-tag{
  font:9.5px var(--mono);letter-spacing:.16em;color:var(--celeste);
}
.tv4-role{
  font:9px var(--mono);letter-spacing:.06em;color:var(--muted-2);
}
.tv4 strong{
  font:500 22px var(--mono);letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.tv4 small{
  font:10.5px var(--mono);letter-spacing:.02em;color:var(--muted-2);
}
.tv4--bank{border-color:rgba(155,200,238,.28)}
.tv4--erp{border-color:rgba(78,214,161,.24)}
.tv4--broker{border-color:rgba(230,201,106,.24)}
.tv4--legal{border-color:rgba(214,225,239,.24)}
.tv4--tax{border-color:rgba(240,198,111,.24)}
.tv4--investor{border-color:rgba(155,200,238,.28)}

/* Outcome pane · right column · rises into full visibility. */
.thesis-v4-outcome{
  padding:20px 22px 22px;
  border:1px solid rgba(230,201,106,.28);border-radius:16px;
  background:
    radial-gradient(500px 260px at 100% 0%,rgba(230,201,106,.10),transparent 60%),
    linear-gradient(160deg,rgba(11,22,44,.95),rgba(5,11,26,.95));
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:14px;
  --appear:max(0, min(1, (var(--tp) - .3) * 2));
  opacity:calc(.15 + var(--appear) * .85);
  transform:translateY(calc((1 - var(--appear)) * 22px));
  transition:opacity .3s ease,transform .35s var(--ease);
}
.tv4o-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.tv4o-brand{
  font-family:var(--serif);font-size:20px;font-weight:400;color:var(--text);letter-spacing:-.015em;
  text-shadow:0 0 22px rgba(230,201,106,calc(var(--tp) * .4));
}
.tv4o-role{
  font:9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--auric);
}
.tv4o-primary{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 0 14px;border-bottom:1px solid var(--line);
}
.tv4o-eyebrow{
  font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.tv4o-primary strong{
  font:500 40px var(--mono);letter-spacing:-.04em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1;
}
.tv4o-primary em{
  font-style:normal;font-size:11.5px;color:var(--muted);
}
.tv4o-rows{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;
}
.tv4o-rows li{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1px dashed rgba(214,225,239,.1);padding-bottom:6px;
  font-size:11.5px;color:var(--muted);
}
.tv4o-rows li em{
  font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.tv4o-foot{
  font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--auric-light);
  text-align:center;padding-top:4px;
}

.thesis-v4-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(214,225,239,.06);overflow:hidden;
}
.thesis-v4-progress .thesis-progress-fill{
  height:100%;width:100%;
  background:linear-gradient(90deg,var(--celeste),var(--celeste-hi));
  box-shadow:0 0 12px rgba(155,200,238,.5);
  transform-origin:0 50%;transform:scaleX(var(--tp,0));
}

@media (max-width:1180px){
  .thesis-v4-stage{grid-template-columns:1fr;gap:24px;height:auto}
  .thesis-v4-sources{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .thesis-track--v4{height:auto;margin-top:32px}
  .thesis-viewport--v4{position:relative;top:0;height:auto;padding:56px 0 32px}
  .thesis-v4-sources{transform:none;opacity:1}
  .thesis-v4-outcome{opacity:1;transform:none}
}
@media (max-width:640px){
  .thesis-v4-sources{grid-template-columns:1fr}
  .tv4 strong{font-size:20px}
  .tv4o-primary strong{font-size:34px}
  .tv4o-rows{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .thesis-v4-sources,.thesis-v4-outcome{transition:none !important;transform:none !important;opacity:1 !important}
}

/* =============================================================================
 * v4 · DOCTRINE / PRODUCT BACKGROUND STORYTELLING
 *
 * Real SVG background material (not photos, not stock imagery, not AI).
 * ArgentumX visual language: coordinated horizons + instrument grid.
 * ========================================================================== */
.doctrine-horizon{
  position:absolute;inset:0;pointer-events:none;
  width:100%;height:100%;opacity:.9;
}
.doctrine-horizon-a,.doctrine-horizon-b{
  transform-origin:center;
  animation:doctrineHorizonFloat 42s ease-in-out infinite;
}
.doctrine-horizon-b{animation-delay:-14s;animation-duration:56s}
@keyframes doctrineHorizonFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .doctrine-horizon-a,.doctrine-horizon-b{animation:none !important}
}
@media (max-width:900px){
  .doctrine-horizon{opacity:.6}
}

.product-underlay{
  position:absolute;inset:0;pointer-events:none;width:100%;height:100%;
  opacity:.85;
}
@media (max-width:900px){
  .product-underlay{opacity:.5}
}

/* =============================================================================
 * v4 · REMAINING SECTION TRANSITIONS (soft continuity)
 *
 * Kill the residual hard divider feel between Ecosystem / Jurisdictions /
 * Research and Thesis / Doctrine / Architecture / Product. All done via
 * position:absolute veils on ::before / ::after — no new DOM.
 * ========================================================================== */
.section-thesis{border-top:0;border-bottom:0;position:relative}
.section-thesis::after{
  content:"";position:absolute;left:0;right:0;bottom:-120px;height:160px;
  background:linear-gradient(180deg,rgba(6,12,26,.5) 0%,rgba(4,8,20,0) 100%);
  pointer-events:none;z-index:1;
}
.section-architecture{position:relative}
.section-architecture::before{
  content:"";position:absolute;left:0;right:0;top:-100px;height:160px;
  background:linear-gradient(180deg,rgba(4,8,20,0) 0%,rgba(6,12,26,.4) 100%);
  pointer-events:none;z-index:1;
}
.section-ecosystem,
.section-jurisdictions,
.section-research{position:relative;border-top:0}
.section-ecosystem::before{
  content:"";position:absolute;left:0;right:0;top:-80px;height:120px;
  background:linear-gradient(180deg,rgba(4,8,20,0),rgba(6,12,26,.35));
  pointer-events:none;z-index:0;
}
.section-jurisdictions::before,
.section-research::before{
  content:"";position:absolute;left:0;right:0;top:-90px;height:130px;
  background:linear-gradient(180deg,rgba(4,8,20,0),rgba(6,12,26,.35));
  pointer-events:none;z-index:0;
}