@font-face {
  font-family: "ABC Diatype";
  src: url("/assets/fonts/ABCDiatypeVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoFo Sans Mono";
  src: url("/assets/fonts/CoFoSansSemi-Mono-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --sans: "ABC Diatype", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "CoFo Sans Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --ink: #17181a;
  --ink-soft: #45484d;
  --ink-muted: #717378;
  --ink-faint: #9da1ab;
  --paper: #f7f8fb;
  --white: #ffffff;
  --line: rgba(23, 24, 26, 0.08);
  --line-strong: rgba(23, 24, 26, 0.15);
  --gx-950: #061d15;
  --gx-900: #0a2e20;
  --gx-850: #0d3828;
  --gx-800: #10452f;
  --gx-700: #087148;
  --gx-600: #00895e;
  --gx-500: #12a873;
  --gx-300: #5eedb8;
  --gx-200: #9af5d4;
  --gx-100: #d9faec;
  --amber: #ffb700;
  --amber-soft: #fff3d6;
  --coral: #ff6b4a;
  --blue: #0066ff;
  --purple: #b250ff;
  --red: #ff1c00;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(6, 29, 21, 0.04), 0 8px 24px rgba(6, 29, 21, 0.05);
  --shadow-lg: 0 30px 80px rgba(6, 29, 21, 0.16), 0 8px 24px rgba(6, 29, 21, 0.1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  /* Prism-nav token aliases (so the nav CSS below is verbatim-identical to Prism) */
  --n900: #17181a; --n700: #45484d; --n500: #717378; --n100: #f0f2f7; --p800: #005c3f;
  --section-pad: clamp(72px, 10vh, 128px);
  /* header→content gap — standard vertical space between a section header
     (eyebrow + title + lede) and the content block directly below it. Ported
     from Prism's --head-gap. Every header→content block uses it, so the gap
     stays consistent site-wide — retune it HERE, once. */
  --head-gap: clamp(40px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body:has(.mobile-menu.is-open) { overflow: hidden; }
::selection { color: var(--gx-950); background: var(--gx-300); }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, pre { margin-top: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--gx-300); outline-offset: 3px; }

.container, .container-wide { width: min(100% - 40px, 1120px); margin-inline: auto; }
.container-wide { width: min(100% - 112px, 1280px); }
.section-pad { padding-block: var(--section-pad); }
.section-line { border-top: 1px solid var(--line); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: 12px; padding: 10px 16px; background: var(--ink); color: white; border-radius: var(--r-sm); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: none; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 550; letter-spacing: -0.035em; }
.brand--inverse { color: white; }
.brand-mark { position: relative; display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; color: var(--gx-600); }
.brand-mark--inverse { color: var(--gx-300); }
.brand-mark__corner { position: absolute; width: 7px; height: 7px; border-color: currentColor; border-style: solid; }
.brand-mark__corner--tl { left: 0; top: 0; border-width: 2px 0 0 2px; }
.brand-mark__corner--tr { right: 0; top: 0; border-width: 2px 2px 0 0; }
.brand-mark__corner--bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.brand-mark__corner--br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.brand-mark__dot { position: absolute; border-radius: 50%; background: currentColor; }
.brand-mark__dot--a { width: 5px; height: 5px; left: 7px; top: 8px; }
.brand-mark__dot--b { width: 4px; height: 4px; right: 6px; top: 6px; }
.brand-mark__dot--c { width: 6px; height: 6px; left: 11px; top: 12px; }
.brand-mark__dot--d { width: 4px; height: 4px; right: 6px; bottom: 7px; }
.brand-mark__dot--e { width: 3px; height: 3px; left: 6px; bottom: 5px; }

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(247, 248, 251, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.site-header__inner { width: min(100% - 48px, 1184px); height: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
/* legacy .site-nav links removed — the Prism nav system (also .site-nav) is appended at end of file */
.site-header__actions { justify-self: end; display: flex; align-items: center; }
.menu-button { display: none; width: 42px; height: 42px; border: 0; background: transparent; position: relative; cursor: pointer; }
.menu-button span { position: absolute; left: 9px; width: 24px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease-out), top .25s var(--ease-out); }
.menu-button span:first-child { top: 16px; }
.menu-button span:last-child { top: 25px; }
.menu-button[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

/* Buttons and labels */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border: 0; border-radius: var(--r-full); font-family: var(--mono); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; font-feature-settings: 'zero' 1; cursor: pointer; transition: all .25s var(--ease-out); }
.button svg { width: 14px; height: 14px; }
.button:hover { transform: translateY(-0.5px); }
.button:disabled { cursor: wait; opacity: .62; transform: none; }
.button--small { padding: 8px 16px; font-size: 11px; letter-spacing: .08em; }
.button--primary { color: white; background: var(--gx-600); }
.button--primary:hover { background: var(--gx-700); }
.button--dark { color: white; background: var(--ink); }
.button--dark:hover { background: #2a2a2e; }
.button--secondary { color: var(--ink); background: white; border: 1px solid var(--line-strong); padding: 14px 28px; }
.button--secondary:hover { border-color: var(--ink-faint); }
.button--mint { color: var(--gx-950); background: var(--gx-300); }
.button--mint:hover { background: var(--gx-200); }
.button--glass { color: rgba(255,255,255,.86); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); padding: 14px 28px; }
.button--glass:hover { color: white; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 14px; color: var(--gx-700); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.text-link span { transition: transform .2s var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }
.text-link--light { color: var(--gx-300); }
.eyebrow { margin-bottom: 18px; display: flex; align-items: center; gap: 14px; color: var(--gx-600); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-feature-settings: 'zero' 1; }
.eyebrow::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; }
.eyebrow--inverse { color: var(--gx-300); }

.section-header { max-width: 760px; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header--center .eyebrow { justify-content: center; }
.section-header h2 { margin-bottom: 24px; font-size: clamp(43px, 5.2vw, 70px); font-weight: 450; letter-spacing: -.052em; line-height: .98; }
.section-header h2 em { color: var(--gx-600); }
.section-header__body { max-width: 610px; color: var(--ink-muted); font-size: 18px; line-height: 1.65; }
.section-header--center .section-header__body { margin-inline: auto; }
.section-header__body p:last-child { margin-bottom: 0; }
.section-header--inverse h2 { color: white; }
.section-header--inverse h2 em { color: var(--gx-300); }
.section-header--inverse .section-header__body { color: rgba(255,255,255,.55); }

/* Footer */
.site-footer { color: white; background: #0d0e10; }
.site-footer__main { padding-block: 82px 72px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; }
.site-footer__brand p { max-width: 330px; margin: 24px 0 30px; color: rgba(255,255,255,.45); font-size: 17px; }
.site-footer__links { display: grid; grid-template-columns: 1.3fr 1fr .7fr; gap: 48px; }
.site-footer__links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__links a { color: rgba(255,255,255,.67); font-size: 15px; transition: color .2s; }
.site-footer__links a:hover { color: white; }
.footer-label { margin-bottom: 10px; color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__family { min-height: 86px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 28px; color: rgba(255,255,255,.32); font-family: var(--mono); font-size: 8px; letter-spacing: .055em; text-transform: uppercase; }
.family-lockup { display: flex; align-items: center; gap: 18px; }
.family-lockup > span { padding-inline: 18px; border-inline: 1px solid rgba(255,255,255,.11); }
.family-lockup__c1 { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--blue); color: var(--blue); font-size: 16px; font-family: var(--sans); }
.family-lockup__prism .brand-mark { transform: rotate(45deg) scale(.75); color: var(--amber); }

/* Page hero */
.page-hero { padding-block: clamp(80px, 10vw, 138px); background: var(--paper); overflow: hidden; }
.page-hero--dark { color: white; background: var(--gx-950); }
.page-hero__grid { min-height: 530px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: clamp(52px, 7vw, 110px); align-items: center; }
.page-hero__copy h1 em { color: var(--gx-600); }
.page-hero--dark .page-hero__copy h1 em { color: var(--gx-300); }
.page-hero__body { max-width: 650px; color: var(--ink-muted); font-size: 19px; line-height: 1.65; }
.page-hero--dark .page-hero__body { color: rgba(255,255,255,.57); }
.page-hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-hero__aside { min-width: 0; }
.hero-note { flex-basis: 100%; margin: 0; color: var(--ink-faint); font-size: 13px; }

/* Home hero */
.home-hero { position: relative; min-height: 790px; overflow: hidden; color: white; background: var(--gx-950); }
.home-hero__field, .contact-page__field { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(94,237,184,.23) 1.15px, transparent 1.3px), radial-gradient(circle at 30% 20%, rgba(94,237,184,.12), transparent 35%), linear-gradient(100deg, transparent 45%, rgba(94,237,184,.05)); background-size: 15px 15px, 100% 100%, 100% 100%; mask-image: linear-gradient(90deg, transparent 0%, black 44%, black 100%); opacity: .75; }
.home-hero__field::after { content: ""; position: absolute; width: 700px; height: 700px; right: -100px; top: -180px; border: 1px solid rgba(94,237,184,.08); border-radius: 50%; box-shadow: 0 0 0 90px rgba(94,237,184,.018), 0 0 0 190px rgba(94,237,184,.012); }
.home-hero__grid { position: relative; min-height: 714px; padding-block: 80px 72px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); gap: 64px; align-items: center; }
.home-hero__copy h1 { max-width: 760px; margin-bottom: 28px; font-size: clamp(61px, 6.5vw, 94px); font-weight: 430; letter-spacing: -.061em; line-height: .91; }
.home-hero__copy h1 em { color: var(--gx-300); }
.home-hero__copy > p:not(.eyebrow) { max-width: 610px; margin-bottom: 34px; color: rgba(255,255,255,.6); font-size: 19px; line-height: 1.65; }
.home-hero__visual { min-width: 0; transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); transform-origin: left center; }
.home-hero__rail { position: relative; min-height: 76px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.home-hero__rail span:first-child { color: var(--gx-300); }
.home-hero__rail i, .world-model__topbar i, .briefing-card__header i, .code-console__footer i, .enterprise-visual__bar i { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--gx-300); box-shadow: 0 0 0 4px rgba(94,237,184,.08); }

/* Product visual */
.world-model { position: relative; min-height: 540px; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: var(--r-xl); background: rgba(15, 55, 40, .72); box-shadow: 0 50px 100px rgba(0,0,0,.32); backdrop-filter: blur(16px); }
.world-model::before { content: ""; position: absolute; inset: 48px 0 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent); }
.world-model__topbar { height: 48px; padding-inline: 18px; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.43); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.world-model__topbar span:first-child { color: rgba(255,255,255,.72); }
.world-model__canvas { position: relative; min-height: 490px; }
.world-model__context { position: absolute; left: 22px; top: 25px; width: 190px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(6,29,21,.72); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.ui-label { display: block; margin-bottom: 10px; color: var(--gx-300); font-family: var(--mono); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
.world-model__context > strong { font-size: 17px; font-weight: 500; }
.context-grid { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; overflow: hidden; }
.context-grid span { min-height: 52px; padding: 9px; color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 6px; text-transform: uppercase; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.context-grid span:nth-child(even) { border-right: 0; }
.context-grid span:nth-last-child(-n+2) { border-bottom: 0; }
.context-grid b { margin-top: 5px; display: block; color: white; font-family: var(--sans); font-size: 15px; font-weight: 450; }
.world-model__nodes { position: absolute; inset: 0; }
.graph-node { position: absolute; width: 48px; height: 48px; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(94,237,184,.4); border-radius: 50%; color: var(--gx-300); background: var(--gx-950); font-family: var(--mono); font-size: 6px; box-shadow: 0 0 0 7px rgba(94,237,184,.04); }
.graph-node--a { left: 48%; top: 16%; }.graph-node--b { right: 11%; top: 26%; }.graph-node--c { left: 42%; top: 49%; width: 64px; height: 64px; color: var(--gx-950); background: var(--gx-300); }.graph-node--d { right: 9%; top: 57%; }
.graph-line { position: absolute; height: 1px; z-index: 1; background: linear-gradient(90deg, rgba(94,237,184,.1), rgba(94,237,184,.6)); transform-origin: left; }
.graph-line--a { width: 150px; left: 53%; top: 22%; transform: rotate(19deg); }.graph-line--b { width: 115px; left: 48%; top: 52%; transform: rotate(-63deg); }.graph-line--c { width: 135px; left: 51%; top: 55%; transform: rotate(22deg); }
.world-model__signal { position: absolute; z-index: 3; left: 80px; right: 26px; bottom: 24px; padding: 20px; border: 1px solid rgba(94,237,184,.32); border-radius: 15px; background: rgba(6,29,21,.93); box-shadow: 0 22px 55px rgba(0,0,0,.35); }
.signal-meta, .signal-sources { display: flex; align-items: center; justify-content: space-between; color: var(--gx-300); font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.signal-meta span:last-child { color: rgba(255,255,255,.35); }
.world-model__signal > strong { max-width: 490px; margin: 10px 0 8px; display: block; font-size: 20px; font-weight: 480; line-height: 1.2; }
.world-model__signal > p { margin-bottom: 13px; color: rgba(255,255,255,.49); font-size: 12px; }
.signal-next { padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,.65); background: rgba(94,237,184,.08); font-size: 11px; }
.signal-next span { margin-right: 8px; color: var(--gx-300); font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.signal-sources { margin-top: 13px; justify-content: flex-start; gap: 18px; color: rgba(255,255,255,.28); }

/* Statement + mechanism */
.statement-section { background: white; }
.statement-section__inner { max-width: 980px; }
.statement-section__lead { max-width: 760px; margin-bottom: 26px; color: var(--ink-muted); font-size: 19px; line-height: 1.6; }
.statement-section h2 { margin: 0; font-size: clamp(45px, 5.3vw, 75px); font-weight: 430; letter-spacing: -.052em; line-height: 1.02; }
.statement-section h2 em { color: var(--gx-600); }
.mechanism { background: var(--paper); }
.mechanism .section-header { margin-bottom: var(--head-gap); }
.pipeline-visual { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: white; box-shadow: var(--shadow-sm); }
.pipeline-step { position: relative; min-height: 150px; padding: 24px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; border-right: 1px solid var(--line); }
.pipeline-step:last-child { border-right: 0; background: var(--gx-100); }
.pipeline-step__number { color: var(--gx-600); font-family: var(--mono); font-size: 9px; }
.pipeline-step strong { display: block; margin-bottom: 7px; font-size: 18px; font-weight: 520; }
.pipeline-step p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
.pipeline-step__arrow { position: absolute; z-index: 2; right: -13px; top: 65px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gx-600); background: white; font-size: 12px; }
.mechanism__proof-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.proof-card { min-height: 238px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; display: flex; flex-direction: column; }
.proof-card__label, .proof-card__footer { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.proof-card__event-title { max-width: 520px; margin: 30px 0 23px; font-size: 26px; font-weight: 460; line-height: 1.18; }
.proof-card__tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.proof-card__tokens span { padding: 6px 9px; border-radius: var(--r-full); color: var(--gx-700); background: var(--gx-100); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.proof-card__footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.proof-card--pathway { color: white; background: var(--gx-900); }
.proof-card--pathway .proof-card__label { color: var(--gx-300); }
.proof-card--pathway .proof-card__footer { color: rgba(255,255,255,.28); border-color: rgba(255,255,255,.1); }
.pathway-chain { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.pathway-chain span, .pathway-chain strong { padding: 10px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; font-family: var(--mono); font-size: 8px; font-weight: 500; text-transform: uppercase; }
.pathway-chain strong { color: var(--gx-950); border-color: var(--gx-300); background: var(--gx-300); }
.pathway-chain i { color: rgba(255,255,255,.3); font-style: normal; }

/* Briefings */
.signal-showcase { color: white; background: var(--gx-950); overflow: hidden; }
.signal-showcase__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: center; }
.signal-showcase .section-header h2 { color: white; }
.signal-showcase .section-header h2 em { color: var(--gx-300); }
.signal-showcase .section-header__body { color: rgba(255,255,255,.5); }
.signal-showcase .text-link { margin-top: 32px; color: var(--gx-300); }
.signal-showcase__card { position: relative; }
.signal-showcase__card::before { content: ""; position: absolute; inset: -100px -160px; background: radial-gradient(circle at center, rgba(94,237,184,.12), transparent 62%); }
.briefing-card { position: relative; overflow: hidden; border: 1px solid rgba(23,24,26,.11); border-radius: var(--r-lg); color: var(--ink); background: white; box-shadow: var(--shadow-lg); }
.briefing-card__header { min-height: 48px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; color: var(--gx-800); background: var(--gx-100); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.briefing-card__header > span { color: var(--gx-600); }
.briefing-card__header i { background: var(--gx-600); }
.briefing-card__content { padding: 30px; }
.briefing-card__tag { padding: 6px 9px; display: inline-flex; border-radius: var(--r-full); color: var(--gx-700); background: var(--gx-100); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.briefing-card h3 { max-width: 620px; margin: 18px 0 16px; font-size: 28px; font-weight: 470; letter-spacing: -.025em; line-height: 1.15; }
.briefing-card__content > p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.briefing-card__content > p strong { color: var(--ink); font-weight: 520; }
.briefing-card__action, .briefing-card__watch { margin-top: 11px; padding: 13px 14px; border-radius: 9px; color: var(--ink-soft); background: var(--paper); font-size: 13px; }
.briefing-card__action span, .briefing-card__watch span { margin-right: 8px; color: var(--gx-600); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.briefing-card__watch { border: 1px dashed var(--line-strong); background: transparent; }
.briefing-card__watch span { color: var(--ink-faint); }
.briefing-card__footer { min-height: 54px; padding: 10px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink-faint); font-family: var(--mono); font-size: 7px; letter-spacing: .03em; text-transform: uppercase; }
.briefing-card--compact h3 { font-size: 21px; }
.briefing-card--compact .briefing-card__content { padding: 22px; }
.briefing-card--compact .briefing-card__footer { align-items: flex-start; flex-direction: column; gap: 3px; }

/* Two readers */
.two-readers { background: white; }
.two-readers .section-header { margin-bottom: var(--head-gap); }
.two-readers__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.reader-pane { min-width: 0; padding: 26px; background: var(--paper); }
.reader-pane + .reader-pane { border-left: 1px solid var(--line-strong); }
.reader-pane--code { background: var(--gx-950); }
.reader-pane__label { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.reader-pane__label span { color: var(--gx-600); }
.reader-pane--code .reader-pane__label { color: rgba(255,255,255,.28); }
.reader-pane--code .reader-pane__label span { color: var(--gx-300); }
.event-record { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg); color: rgba(255,255,255,.65); background: rgba(255,255,255,.035); }
.event-record__bar { min-height: 48px; padding-inline: 16px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 8px; }
.event-record__bar span:last-child { color: var(--gx-300); }
.event-record pre { min-height: 360px; margin: 0; padding: 26px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.85; }
.event-record__status { min-height: 54px; padding-inline: 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; color: var(--gx-300); font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.event-record__status i { width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--gx-300); }

/* Stack */
.platform-stack { background: var(--paper); }
.platform-stack__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: start; }
.platform-stack__intro { position: sticky; top: calc(var(--nav-h) + 50px); }
.platform-stack__intro .text-link { margin-top: 30px; }
.stack-list { display: flex; flex-direction: column; gap: 10px; }
.stack-item { min-height: 124px; padding: 20px 24px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); display: grid; grid-template-columns: 44px 1fr auto; gap: 20px; align-items: center; background: white; box-shadow: var(--shadow-sm); }
.stack-item > span, .stack-item > b { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.stack-item > span { color: var(--ink-faint); }
.stack-item > b { padding: 7px 10px; border-radius: var(--r-full); font-weight: 500; }
.stack-item strong { font-size: 22px; font-weight: 520; }
.stack-item p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }
.stack-item--exo { border-color: rgba(255,107,74,.25); }.stack-item--exo > b { color: #a63c26; background: rgba(255,107,74,.11); }
.stack-item--signals { border-color: rgba(94,237,184,.5); background: var(--gx-100); }.stack-item--signals > b { color: var(--gx-700); background: rgba(0,137,94,.1); }
.stack-item--globodex > b { color: var(--gx-700); background: var(--gx-100); }
.stack-item--prism { border-color: rgba(255,183,0,.32); }.stack-item--prism > b { color: #8a6200; background: var(--amber-soft); }

/* Trust */
.trust-section { color: white; background: #0d0e10; }
.trust-section__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.trust-section h2 { margin: 0; font-size: clamp(56px, 6.5vw, 90px); font-weight: 430; letter-spacing: -.057em; line-height: .93; }
.trust-section h2 em { color: var(--gx-300); }
.trust-section__body > p { max-width: 700px; margin-bottom: 58px; color: rgba(255,255,255,.58); font-size: 22px; line-height: 1.55; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.trust-grid > div { min-height: 180px; padding: 24px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.trust-grid span { color: var(--gx-300); font-family: var(--mono); font-size: 8px; }
.trust-grid strong { margin: 32px 0 8px; display: block; font-size: 18px; font-weight: 500; }
.trust-grid p { margin: 0; color: rgba(255,255,255,.38); font-size: 13px; }

/* Use cases + CTA */
.use-cases { background: white; }
.use-cases .section-header { margin-bottom: var(--head-gap); }
.use-case-list { border-top: 1px solid var(--line-strong); }
.use-case { min-height: 210px; padding: 34px 0; display: grid; grid-template-columns: 55px 190px 1fr 1fr; gap: 40px; align-items: start; border-bottom: 1px solid var(--line-strong); }
.use-case > span, .use-case__name { color: var(--gx-600); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.use-case h3 { max-width: 430px; margin: 0; font-size: 28px; font-weight: 470; line-height: 1.15; letter-spacing: -.025em; }
.use-case > p:last-child { max-width: 390px; margin: 0; color: var(--ink-muted); line-height: 1.65; }
.cta-band { position: relative; overflow: hidden; color: white; background: var(--gx-900); }
.cta-band__noise { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle, rgba(94,237,184,.16) 1px, transparent 1.2px), radial-gradient(circle at 80% 30%, rgba(94,237,184,.13), transparent 28%); background-size: 16px 16px, auto; mask-image: linear-gradient(90deg, transparent 15%, black 70%); }
.cta-band__inner { position: relative; min-height: 510px; padding-block: 100px; display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; }
.cta-band h2 { max-width: 850px; margin-bottom: 24px; font-size: clamp(48px, 6vw, 82px); font-weight: 430; letter-spacing: -.055em; line-height: .95; }
.cta-band h2 em { color: var(--gx-300); }
.cta-band p { max-width: 660px; margin: 0; color: rgba(255,255,255,.55); font-size: 18px; }
.cta-band .button { white-space: nowrap; }

/* Signals */
.domain-capture { width: min(100%, 650px); padding: 5px; border: 1px solid var(--line-strong); border-radius: var(--r-full); display: flex; background: white; box-shadow: var(--shadow-sm); }
.domain-capture input { min-width: 0; flex: 1; padding: 0 18px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.domain-capture input::placeholder { color: var(--ink-faint); }
.signals-process { background: white; }
.signals-process .section-header { margin-bottom: var(--head-gap); }
.numbered-grid { display: grid; border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.numbered-grid--three { grid-template-columns: repeat(3, 1fr); }
.numbered-grid article { min-height: 270px; padding: 28px; border-right: 1px solid var(--line-strong); }
.numbered-grid article:last-child { border-right: 0; background: var(--gx-100); }
.numbered-grid article > span { color: var(--gx-600); font-family: var(--mono); font-size: 9px; }
.numbered-grid h3 { margin: 80px 0 12px; font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.numbered-grid p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.briefing-anatomy { overflow: hidden; color: white; background: var(--gx-950); }
.briefing-anatomy__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 90px; align-items: center; }
.briefing-anatomy__visual { position: relative; }
.briefing-anatomy__visual::before { content: ""; position: absolute; inset: -80px; background: radial-gradient(circle, rgba(94,237,184,.1), transparent 60%); }
.briefing-anatomy .section-header h2 { color: white; }
.briefing-anatomy .section-header h2 em { color: var(--gx-300); }
.anatomy-list { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.12); }
.anatomy-list li { padding: 20px 0; display: grid; grid-template-columns: 45px 1fr; border-bottom: 1px solid rgba(255,255,255,.12); }
.anatomy-list li > span { color: var(--gx-300); font-family: var(--mono); font-size: 8px; }
.anatomy-list strong { font-size: 16px; font-weight: 500; }
.anatomy-list p { margin: 5px 0 0; color: rgba(255,255,255,.42); font-size: 13px; }
.track-record { background: var(--paper); }
.track-record .section-header { margin-bottom: var(--head-gap); }
.illustration-note { margin: -40px 0 24px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.score-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 16px; }
.score-card { min-height: 230px; padding: 25px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-sm); }
.score-card--large { grid-row: span 2; min-height: 476px; display: flex; flex-direction: column; }
.score-card__label { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.score-card > strong { margin-top: auto; display: block; color: var(--gx-600); font-size: 76px; font-weight: 430; letter-spacing: -.06em; }
.score-card > p { margin: 2px 0 0; color: var(--ink-muted); font-size: 14px; }
.score-bars { height: 100px; margin-top: 35px; display: flex; align-items: flex-end; gap: 6px; }
.score-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--gx-100); }
.score-bars i:nth-child(1) { height: 42%; }.score-bars i:nth-child(2) { height: 60%; }.score-bars i:nth-child(3) { height: 55%; }.score-bars i:nth-child(4) { height: 72%; }.score-bars i:nth-child(5) { height: 67%; }.score-bars i:nth-child(6) { height: 84%; }.score-bars i:nth-child(7) { height: 76%; }.score-bars i:nth-child(8) { height: 91%; }.score-bars i:nth-child(9) { height: 84%; background: var(--gx-600); }
.score-card:not(.score-card--large) > strong { margin-top: 45px; font-size: 45px; }
.score-card--quiet { grid-column: 2 / 4; min-height: 230px; color: white; background: var(--gx-900); }
.score-card--quiet h3 { max-width: 480px; margin: 52px 0 8px; color: var(--gx-300); font-size: 24px; font-weight: 480; }
.score-card--quiet p { color: rgba(255,255,255,.38); }
/* Accountable-intelligence section — firehose ledger (left) + stats + one real briefing */
.trg { display: grid; grid-template-columns: 1.08fr .92fr; gap: 16px; align-items: stretch; }
.trg__left { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 16px; }
.trg__left .trb { grid-column: 1 / -1; }
.trl { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-sm); }
.trl__h { color: var(--ink-faint); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.trl ul { margin: 16px 0 0; padding: 0; list-style: none; }
.trl li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 12.5px 0; border-top: 1px solid var(--line); font-size: 14px; }
.trl li:first-of-type { border-top: 0; }
.trl__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.trl__ev { color: var(--ink); }
.trl__tag { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.trl li.on .trl__dot { background: var(--gx-600); }
.trl li.on .trl__tag { color: var(--gx-600); }
.trs { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.trs > span { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.trs strong { display: block; margin: 34px 0 2px; color: var(--gx-600); font-size: 44px; font-weight: 430; letter-spacing: -.045em; }
.trs p { margin: 0; color: var(--ink-muted); font-size: 13.5px; }
.trb { padding: 26px; border-radius: var(--r-lg); background: var(--gx-900); color: white; display: flex; flex-direction: column; }
.trb__top { display: flex; justify-content: space-between; color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.trb__chip { align-self: flex-start; margin: 22px 0 13px; padding: 3px 9px; border-radius: 5px; background: rgba(94,237,184,.14); color: var(--gx-300); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.trb__h { margin: 0 0 12px; color: white; font-size: 19px; font-weight: 500; line-height: 1.28; letter-spacing: -.01em; }
.trb__why { margin: 0 0 12px; color: rgba(255,255,255,.62); font-size: 13.5px; line-height: 1.5; }
.trb__why b { color: white; font-weight: 500; }
.trb__act { margin: auto 0 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.78); font-size: 13.5px; }
.trb__act b { color: var(--gx-300); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-right: 9px; }
@media (max-width: 900px){ .trg { grid-template-columns: 1fr; } }
.role-lenses { background: white; }
.role-lenses__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; }
.lens-stack { position: relative; min-height: 490px; }
.lens-stack article { position: absolute; width: 88%; min-height: 160px; padding: 23px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-lg); }
.lens-stack article:nth-child(1) { left: 0; top: 0; }.lens-stack article:nth-child(2) { right: 0; top: 150px; }.lens-stack article:nth-child(3) { left: 5%; top: 300px; background: var(--gx-100); }
.lens-stack span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.lens-stack strong { margin: 17px 0 9px; display: block; font-size: 19px; font-weight: 500; line-height: 1.25; }
.lens-stack p { margin: 0; color: var(--ink-muted); font-size: 12px; }
/* Signals pricing */
.pricing__grid { margin-top: var(--head-gap); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pr-card { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-sm); }
.pr-card__tier { margin: 0; color: var(--gx-600); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pr-card__price { margin: 18px 0 0; font-size: 46px; font-weight: 430; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.pr-card__price span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); }
.pr-card__price--talk { font-size: 30px; letter-spacing: -.03em; }
.pr-card__desc { margin: 15px 0 24px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
.pr-card__feats { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 13px; }
.pr-card__feats li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.pr-card__feats li::before { content: "\2713"; color: var(--gx-600); font-size: 12px; font-weight: 600; line-height: 1.55; }
.pr-card__feats li b { color: var(--ink); font-weight: 500; }
.pr-card__cta { margin-top: auto; }
.pr-card__cta .button { width: 100%; }
@media (max-width: 1024px) { .pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing__grid { grid-template-columns: 1fr; } }

.faq-section { background: white; }
.faq-section__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: start; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item button { width: 100%; padding: 25px 0; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.faq-item button span { font-size: 18px; }
.faq-item button i { position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
.faq-item button i::before, .faq-item button i::after { content: ""; position: absolute; top: 8px; left: 1px; width: 16px; height: 1px; background: var(--gx-600); transition: transform .2s; }
.faq-item button i::after { transform: rotate(90deg); }.faq-item.is-open button i::after { transform: rotate(0); }
.faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq-item__answer p { min-height: 0; margin: 0; overflow: hidden; color: var(--ink-muted); line-height: 1.65; }
.faq-item.is-open .faq-item__answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__answer p { padding: 0 48px 25px 0; }

/* Enterprise */
.enterprise-visual { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); background: rgba(255,255,255,.04); box-shadow: 0 36px 80px rgba(0,0,0,.3); }
.enterprise-visual__bar { min-height: 46px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.48); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.enterprise-visual__bar span:last-child { color: var(--gx-300); }
.enterprise-visual__sources, .enterprise-visual__outputs { padding: 17px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.enterprise-visual__sources span, .enterprise-visual__outputs span { min-height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: rgba(255,255,255,.47); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.enterprise-visual__core { min-height: 250px; margin: 0 17px; padding: 30px; border: 1px solid rgba(94,237,184,.22); border-radius: var(--r-lg); position: relative; text-align: center; background: rgba(94,237,184,.04); }
.enterprise-visual__core strong { display: block; color: white; font-size: 48px; font-weight: 420; letter-spacing: -.05em; }
.enterprise-visual__core p { color: rgba(255,255,255,.36); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.enterprise-visual__core > div { height: 80px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.enterprise-visual__core i { width: 14%; border-radius: 3px 3px 0 0; background: rgba(94,237,184,.1); }
.enterprise-visual__core i:nth-child(1) { height: 25%; }.enterprise-visual__core i:nth-child(2) { height: 42%; }.enterprise-visual__core i:nth-child(3) { height: 58%; }.enterprise-visual__core i:nth-child(4) { height: 75%; }.enterprise-visual__core i:nth-child(5) { height: 94%; background: var(--gx-300); }
.enterprise-visual__outputs span { color: var(--gx-300); border-color: rgba(94,237,184,.15); background: rgba(94,237,184,.04); }
.enterprise-outcomes { background: white; }
.enterprise-outcomes .section-header { margin-bottom: var(--head-gap); }
.outcome-rows { border-top: 1px solid var(--line); }
.outcome-row { display: grid; grid-template-columns: 290px 1fr; gap: 44px; padding: 34px 0; border-bottom: 1px solid var(--line); align-items: start; }
.outcome-row__shift { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.outcome-row__from { color: var(--ink-faint); font-size: 13px; }
.outcome-row__arrow { color: var(--gx-600); margin-right: 6px; }
.outcome-row__to { color: var(--ink); font-size: 22px; font-weight: 470; letter-spacing: -.02em; }
.outcome-row__body h3 { margin: 0 0 9px; font-size: 21px; font-weight: 470; letter-spacing: -.015em; line-height: 1.15; }
.outcome-row__body p { margin: 0; max-width: 560px; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.architecture-section { background: var(--paper); }
.architecture-section .section-header { margin-bottom: var(--head-gap); }
.arch-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.arch-step { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 30px 0; border-top: 1px solid var(--line); align-items: start; }
.arch-step__n { font-family: var(--mono); font-size: 32px; font-weight: 400; line-height: 1; color: var(--gx-600); letter-spacing: -.02em; }
.arch-step__body h3 { margin: 0 0 9px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.arch-step__body p { margin: 0 0 14px; color: var(--ink-muted); font-size: 14px; line-height: 1.55; }
.arch-step__layer { color: var(--gx-600); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.judgment-section { color: white; background: var(--gx-950); }
.judgment-section__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.judgment-section .section-header h2 { color: white; }.judgment-section .section-header h2 em { color: var(--gx-300); }.judgment-section .section-header__body { color: rgba(255,255,255,.48); }
.judgment-card { padding: 28px; border: 1px solid rgba(94,237,184,.25); border-radius: var(--r-xl); background: rgba(255,255,255,.045); box-shadow: 0 28px 70px rgba(0,0,0,.27); }
.judgment-card__head { display: flex; align-items: center; justify-content: space-between; color: var(--gx-300); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.judgment-card__head b { padding: 5px 8px; border-radius: var(--r-full); background: rgba(94,237,184,.09); font-weight: 500; }
.judgment-card > h3 { max-width: 620px; margin: 30px 0; font-size: 30px; font-weight: 450; line-height: 1.12; }
.judgment-card__section { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.judgment-card__section span { color: var(--gx-300); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.judgment-card__section p { margin: 0; color: rgba(255,255,255,.5); font-size: 13px; }
.governance-section { background: white; }
.governance-section .section-header { margin-bottom: var(--head-gap); }
.gov-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gov-card { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-sm); }
.gov-card__cat { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; color: var(--gx-600); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.gov-card__mark { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: rgba(94,237,184,.15); color: var(--gx-700); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.gov-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 480; letter-spacing: -.01em; line-height: 1.22; }
.gov-card p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1080px) { .gov-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .outcome-row { grid-template-columns: 1fr; gap: 12px; }
  .arch-steps { grid-template-columns: 1fr; column-gap: 0; }
  .gov-cards { grid-template-columns: 1fr; }
}

/* Developer */
.code-console { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-xl); color: rgba(255,255,255,.72); background: #101415; box-shadow: var(--shadow-lg); }
.code-console__tabs { min-height: 51px; padding-inline: 8px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: stretch; }
.code-console__tabs button { padding: 0 16px; border: 0; border-bottom: 2px solid transparent; color: rgba(255,255,255,.35); background: transparent; font-family: var(--mono); font-size: 8px; text-transform: uppercase; cursor: pointer; }
.code-console__tabs button[aria-selected="true"] { color: var(--gx-300); border-color: var(--gx-300); }
.code-console pre { min-height: 330px; margin: 0; padding: 28px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.9; }
.code-console__footer { min-height: 46px; padding-inline: 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.code-console__footer span:first-child { color: var(--gx-300); }
.developer-problem { background: white; }
.developer-problem__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.dedup-visual { min-height: 420px; display: grid; grid-template-columns: 1fr 50px 1fr; gap: 18px; align-items: center; }
.dedup-pages { position: relative; min-height: 300px; }
.dedup-pages span { position: absolute; width: 170px; height: 104px; padding: 15px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink-faint); background: var(--paper); font-family: var(--mono); font-size: 8px; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.dedup-pages span:nth-child(1) { left: 5px; top: 0; transform: rotate(-5deg); }.dedup-pages span:nth-child(2) { right: 5px; top: 42px; transform: rotate(4deg); }.dedup-pages span:nth-child(3) { left: 20px; top: 94px; transform: rotate(-2deg); }.dedup-pages span:nth-child(4) { right: 4px; top: 140px; transform: rotate(5deg); }.dedup-pages span:nth-child(5) { left: 12px; top: 188px; transform: rotate(-3deg); }
.dedup-arrow { color: var(--gx-600); font-size: 26px; text-align: center; }
.dedup-event { min-height: 190px; padding: 28px; border: 1px solid rgba(0,137,94,.25); border-radius: var(--r-lg); background: var(--gx-100); box-shadow: var(--shadow-sm); }
.dedup-event i { width: 8px; height: 8px; display: block; margin-bottom: 45px; border-radius: 50%; background: var(--gx-600); }
.dedup-event span { color: var(--gx-700); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.dedup-event strong { margin: 9px 0 5px; display: block; font-size: 25px; font-weight: 500; }.dedup-event p { margin: 0; color: var(--ink-muted); font-size: 12px; }
.api-primitives { background: var(--paper); }.api-primitives .section-header { margin-bottom: var(--head-gap); }
.api-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.api-grid article { min-height: 380px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.method { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }.api-grid article > code { margin-left: 10px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.api-grid h3 { margin: 100px 0 12px; font-size: 26px; font-weight: 480; }.api-grid p { color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.api-grid article > div { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }.api-grid b { padding: 5px 8px; border-radius: var(--r-full); color: var(--gx-700); background: var(--gx-100); font-family: var(--mono); font-size: 7px; font-weight: 500; }
.state-trigger { color: white; background: var(--gx-950); }
.state-trigger__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; }
.state-trigger .section-header h2 { color: white; }.state-trigger .section-header h2 em { color: var(--gx-300); }.state-trigger .section-header__body { color: rgba(255,255,255,.48); }
.state-trigger__console { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); background: rgba(255,255,255,.035); }
.state-trigger__header { min-height: 49px; padding-inline: 18px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 8px; }.state-trigger__header span:last-child { color: var(--gx-300); }
.state-trigger__header i { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--gx-300); }
.state-event { min-height: 118px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: center; }.state-event:last-child { border-bottom: 0; }
.state-event > span, .state-event > em { color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 7px; font-style: normal; text-transform: uppercase; }.state-event > em { padding: 5px 8px; border-radius: var(--r-full); color: var(--gx-300); background: rgba(94,237,184,.08); }
.state-event b { font-weight: 500; }.state-event p { margin: 6px 0 0; color: rgba(255,255,255,.42); font-size: 12px; }.state-event--old { opacity: .52; }.state-event--action { background: rgba(94,237,184,.035); }
.provenance-section { background: white; }.provenance-section__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; align-items: center; }
.provenance-log { border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.provenance-log > div { min-height: 67px; padding: 0 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; }.provenance-log > div:last-child { border-bottom: 0; }
.provenance-log span, .provenance-log b { font-family: var(--mono); font-size: 7px; font-weight: 500; text-transform: uppercase; }.provenance-log span { color: var(--ink-faint); }.provenance-log code { overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }.provenance-log b { color: var(--gx-700); }

/* Partners */
.rights-visual { min-height: 500px; padding: 28px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); background: rgba(255,255,255,.04); box-shadow: 0 34px 80px rgba(0,0,0,.28); }
.rights-visual__source, .rights-visual__record { padding: 21px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(6,29,21,.62); }.rights-visual__record { border-color: rgba(94,237,184,.25); }
.rights-visual span { color: var(--gx-300); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }.rights-visual strong { margin: 10px 0 5px; display: block; font-size: 19px; font-weight: 500; }.rights-visual p { margin: 0; color: rgba(255,255,255,.36); font-size: 11px; }
.rights-visual__flow { height: 62px; display: grid; place-items: center; position: relative; }.rights-visual__flow span { width: 1px; height: 100%; background: rgba(94,237,184,.35); }.rights-visual__flow i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gx-300); }.rights-visual__flow i:first-child { top: 4px; }.rights-visual__flow i:last-child { bottom: 4px; }
.rights-visual__permissions { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 7px; }.rights-visual__permissions > span { flex-basis: 100%; margin-bottom: 4px; }.rights-visual__permissions b, .rights-visual__permissions em { padding: 7px 9px; border-radius: var(--r-full); color: var(--gx-300); background: rgba(94,237,184,.08); font-family: var(--mono); font-size: 7px; font-style: normal; font-weight: 500; }.rights-visual__permissions em { color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); }
.broken-model { background: white; }.broken-model__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 95px; align-items: center; }
.model-compare { display: grid; gap: 12px; }.model-compare > div { min-height: 180px; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper); }.model-compare__new { color: white; border-color: var(--gx-900) !important; background: var(--gx-900) !important; }
.model-compare > div > span { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.model-compare__new > span { color: var(--gx-300) !important; }.model-compare > div > div { margin: 35px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.model-compare b { font-size: 17px; font-weight: 500; }.model-compare i { color: var(--ink-faint); font-style: normal; }.model-compare__new i { color: var(--gx-300); }.model-compare p { margin: 0; color: var(--ink-muted); font-size: 13px; }.model-compare__new p { color: rgba(255,255,255,.42); }
.partner-pipeline { background: var(--paper); }.partner-pipeline .section-header { margin-bottom: var(--head-gap); }
.partner-steps { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: white; }
.partner-steps article { min-height: 300px; padding: 24px; border-right: 1px solid var(--line); }.partner-steps article:last-child { border-right: 0; background: var(--gx-100); }.partner-steps span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }.partner-steps h3 { margin: 110px 0 11px; font-size: 20px; font-weight: 500; }.partner-steps p { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.55; }
.control-section { color: white; background: var(--gx-950); }.control-section__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }.control-section .section-header h2 { color: white; }.control-section .section-header h2 em { color: var(--gx-300); }.control-section .section-header__body { color: rgba(255,255,255,.45); }
.permission-panel { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); background: rgba(255,255,255,.04); }.permission-panel__head { min-height: 62px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: var(--gx-300); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.permission-panel__head b { color: rgba(255,255,255,.36); font-weight: 500; }
.permission-row { min-height: 69px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr 38px 72px; gap: 18px; align-items: center; }.permission-row:last-child { border-bottom: 0; }.permission-row span { color: rgba(255,255,255,.65); }.permission-row i { width: 34px; height: 19px; position: relative; border-radius: var(--r-full); background: rgba(255,255,255,.13); }.permission-row i::after { content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; border-radius: 50%; background: rgba(255,255,255,.4); transition: transform .2s; }.permission-row i.is-on { background: var(--gx-300); }.permission-row i.is-on::after { background: var(--gx-950); transform: translateX(15px); }.permission-row b { color: rgba(255,255,255,.32); font-family: var(--mono); font-size: 7px; font-weight: 500; text-transform: uppercase; }
.partner-types { background: white; }.partner-types .section-header { margin-bottom: var(--head-gap); }.partner-type-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; }.partner-type-grid article { min-height: 280px; padding: 30px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }.partner-type-grid article:nth-child(even) { border-right: 0; }.partner-type-grid article:nth-last-child(-n+2) { border-bottom: 0; }.partner-type-grid span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.partner-type-grid h3 { margin: 55px 0 12px; font-size: 24px; font-weight: 480; }.partner-type-grid p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }

/* EDS */







.eds-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 90px; padding-block: 100px 140px; }
.eds-nav { position: sticky; top: calc(var(--nav-h) + 38px); height: max-content; padding-left: 16px; border-left: 1px solid var(--line-strong); display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.eds-nav p { margin: 0 0 7px; color: var(--gx-600); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.eds-nav a { color: var(--ink-muted); font-size: 13px; transition: color .2s; }.eds-nav a:hover { color: var(--gx-600); }
.eds-content { min-width: 0; max-width: 900px; }.eds-section { padding-block: 35px 110px; scroll-margin-top: calc(var(--nav-h) + 20px); }.eds-section + .eds-section { padding-top: 100px; border-top: 1px solid var(--line-strong); }
.eds-section > h2 { max-width: 800px; margin-bottom: 25px; font-size: clamp(43px, 5vw, 68px); font-weight: 440; letter-spacing: -.05em; line-height: .98; }.eds-section > p { max-width: 750px; color: var(--ink-muted); font-size: 17px; line-height: 1.7; }.eds-lead { font-size: 20px !important; }
.eds-problem-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.eds-problem-grid article { min-height: 250px; padding: 23px; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; }.eds-problem-grid span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }.eds-problem-grid h3 { margin: 75px 0 10px; font-size: 19px; font-weight: 500; }.eds-problem-grid p { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.eds-layers { margin-top: 48px; display: grid; gap: 9px; }.eds-layer { min-height: 100px; padding: 19px 22px; border: 1px solid var(--line-strong); border-radius: var(--r-md); display: grid; grid-template-columns: 42px 1fr auto; gap: 20px; align-items: center; background: white; }.eds-layer > span, .eds-layer > b { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }.eds-layer > span { color: var(--gx-600); }.eds-layer > b { padding: 6px 9px; border-radius: var(--r-full); color: var(--gx-700); background: var(--gx-100); font-weight: 500; }.eds-layer strong { font-size: 18px; font-weight: 500; }.eds-layer p { margin: 4px 0 0; color: var(--ink-muted); font-size: 12px; }.eds-layer--meta { margin-inline: 18px; }.eds-layer--vector { margin-inline: 36px; }.eds-layer--graph { margin-inline: 54px; color: white; border-color: var(--gx-900); background: var(--gx-900); }.eds-layer--graph p { color: rgba(255,255,255,.43); }.eds-layer--graph > b { color: var(--gx-950); background: var(--gx-300); }
.event-anatomy { margin: 50px 0 24px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: white; }.event-anatomy > div { min-height: 72px; padding: 0 20px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 45px 170px 1fr; gap: 18px; align-items: center; }.event-anatomy > div:last-child { border-bottom: 0; }.event-anatomy span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }.event-anatomy strong { font-weight: 500; }.event-anatomy code { color: var(--ink-muted); font-family: var(--mono); font-size: 10px; }
.eds-code { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); color: rgba(255,255,255,.66); background: #101415; }.eds-code__bar { min-height: 48px; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; color: var(--gx-300); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.eds-code__bar span:last-child { color: rgba(255,255,255,.28); }.eds-code pre { margin: 0; padding: 28px; overflow: auto; font-family: var(--mono); font-size: 11px; line-height: 1.75; }
.conformance-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: white; }.conformance-grid article { min-height: 285px; padding: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }.conformance-grid article:last-child { border-right: 0; color: white; background: var(--gx-900); }.conformance-grid span { color: var(--gx-600); font-family: var(--mono); font-size: 15px; }.conformance-grid article:last-child span { color: var(--gx-300); }.conformance-grid h3 { margin: 70px 0 10px; font-size: 20px; font-weight: 500; }.conformance-grid p { color: var(--ink-muted); font-size: 12px; line-height: 1.55; }.conformance-grid article:last-child p { color: rgba(255,255,255,.43); }.conformance-grid b { margin-top: auto; color: var(--gx-600); font-family: var(--mono); font-size: 7px; font-weight: 500; text-transform: uppercase; }.conformance-grid article:last-child b { color: var(--gx-300); }
.relation-grid { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.relation-grid article { min-height: 150px; padding: 22px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: white; }.relation-grid span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.relation-grid div { margin-top: 45px; display: flex; flex-wrap: wrap; gap: 6px; }.relation-grid b { padding: 5px 8px; border-radius: var(--r-full); color: var(--ink-soft); background: var(--paper); font-family: var(--mono); font-size: 7px; font-weight: 500; }
.principle-list { margin-top: 50px; border-top: 1px solid var(--line-strong); }.principle-list article { min-height: 150px; padding-block: 27px; border-bottom: 1px solid var(--line-strong); display: grid; grid-template-columns: 55px .8fr 1.2fr; gap: 25px; align-items: start; }.principle-list span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }.principle-list h3 { margin: 0; font-size: 20px; font-weight: 500; }.principle-list p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.65; }

/* Contact and legal */
.contact-page { position: relative; min-height: 100dvh; overflow: hidden; color: white; background: var(--gx-950); }.contact-page__field { opacity: .45; }.contact-page__grid { position: relative; min-height: 850px; padding-block: calc(var(--nav-h) + var(--section-pad)) var(--section-pad); display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; align-items: start; }.contact-page__intro { position: sticky; top: calc(var(--nav-h) + 60px); }.contact-page h1 { margin-bottom: 24px; font-size: clamp(38px, 4.8vw, 64px); font-weight: 500; letter-spacing: -.032em; line-height: 1.05; }.contact-page h1 em { color: var(--gx-300); }.contact-page__intro > p:not(.eyebrow) { max-width: 570px; color: rgba(255,255,255,.55); font-size: 18px; line-height: 1.65; }
.contact-details { margin-top: 65px; border-top: 1px solid rgba(255,255,255,.12); }.contact-details > div { padding-block: 15px; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; gap: 15px; }.contact-details span { color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.contact-details a { color: rgba(255,255,255,.7); font-size: 13px; }
.contact-page__form { padding: 36px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); color: var(--ink); background: white; box-shadow: 0 40px 90px rgba(0,0,0,.28); }.contact-form { display: flex; flex-direction: column; gap: 22px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.contact-form label { display: flex; flex-direction: column; gap: 8px; }.contact-form label > span { color: var(--ink-muted); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; color: var(--ink); background: var(--paper); transition: border-color .2s, box-shadow .2s, background .2s; }.contact-form input, .contact-form select { height: 51px; padding: 0 14px; }.contact-form textarea { padding: 14px; resize: vertical; }.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--gx-600); background: white; box-shadow: 0 0 0 3px rgba(0,137,94,.08); }.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-faint); }.contact-form__submit { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }.contact-form__submit p { max-width: 230px; margin: 0; color: var(--ink-faint); font-size: 11px; }.contact-form__submit p a { color: var(--gx-600); }.honeypot { position: absolute !important; left: -9999px; }.cf-turnstile[data-sitekey^="__"] { display: none; }.form-error { margin: 0; padding: 12px 14px; border-radius: 8px; color: #8f281e; background: #fff0ed; font-size: 13px; }.form-error a { text-decoration: underline; }.form-success { min-height: 480px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.form-success > span { width: 50px; height: 50px; margin-bottom: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--gx-950); background: var(--gx-300); font-size: 20px; }.form-success h2 { margin-bottom: 14px; font-size: 43px; font-weight: 450; letter-spacing: -.04em; }.form-success p { color: var(--ink-muted); }.form-success button { padding: 0; border: 0; background: transparent; }.form-loading { min-height: 400px; display: grid; place-items: center; color: var(--ink-faint); }
.legal-page { padding-block: calc(var(--nav-h) + var(--section-pad)) var(--section-pad); }.legal-page header { max-width: 760px; margin-bottom: 80px; }.legal-page header h1 { margin: 0 0 18px; font-size: clamp(44px, 6vw, 84px); font-weight: 460; letter-spacing: -.038em; line-height: 1.02; }.legal-page header > p:last-child { color: var(--ink-faint); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.legal-page section { max-width: 760px; margin-left: auto; padding: 30px 0; border-top: 1px solid var(--line-strong); }.legal-page section h2 { margin-bottom: 18px; font-size: 25px; font-weight: 500; }.legal-page section p { color: var(--ink-muted); font-size: 16px; line-height: 1.75; }.legal-page section a { color: var(--gx-600); text-decoration: underline; text-underline-offset: 3px; }
.not-found { min-height: 700px; padding-block: 140px; }.not-found > span { color: var(--gx-600); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.not-found h1 { max-width: 900px; margin: 30px 0 25px; font-size: clamp(54px, 7vw, 96px); font-weight: 430; letter-spacing: -.058em; line-height: .93; }.not-found p { max-width: 580px; margin-bottom: 35px; color: var(--ink-muted); font-size: 18px; }

/* Responsive */
@media (max-width: 1120px) {
  .container-wide { width: min(100% - 48px, 1280px); }
  .site-nav { gap: 19px; }
  .home-hero__grid { grid-template-columns: .8fr 1.2fr; gap: 35px; }
  .home-hero__copy h1 { font-size: clamp(56px, 6.8vw, 78px); }
  .world-model__context { display: none; }
  .world-model__signal { left: 25px; }
  .use-case { grid-template-columns: 45px 150px 1fr 1fr; gap: 24px; }
  .page-hero__grid { grid-template-columns: .9fr 1.1fr; gap: 45px; }
  .platform-stack__grid, .signal-showcase__grid, .briefing-anatomy__grid, .role-lenses__grid, .judgment-section__grid, .state-trigger__grid, .control-section__grid, .contact-page__grid { gap: 55px; }
  .architecture-grid { grid-template-columns: 1fr 1fr; }
  .partner-steps { grid-template-columns: repeat(3, 1fr); }
  .partner-steps article:nth-child(3) { border-right: 0; }.partner-steps article { border-bottom: 1px solid var(--line); }
  .partner-steps article:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 900px) {
  :root { --section-pad: 92px; }
  .site-header__inner { width: calc(100% - 36px); grid-template-columns: 1fr auto; }
  .site-header__cta { display: none; }
  .menu-button { display: block; }
  .mobile-menu { position: fixed; inset: var(--nav-h) 0 0; z-index: 99; display: block; visibility: hidden; opacity: 0; background: rgba(247,248,251,.98); backdrop-filter: blur(20px); transition: opacity .25s, visibility .25s; }
  .mobile-menu.is-open { visibility: visible; opacity: 1; }
  .mobile-menu__nav { width: min(100% - 40px, 600px); margin: 35px auto 0; display: flex; flex-direction: column; }
  .mobile-menu__nav > a:not(.button) { min-height: 67px; border-bottom: 1px solid var(--line-strong); display: flex; align-items: center; gap: 25px; font-size: 25px; letter-spacing: -.02em; }
  .mobile-menu__nav > a span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }
  .mobile-menu__nav .button { margin-top: 30px; }
  .home-hero__grid, .page-hero__grid, .signal-showcase__grid, .platform-stack__grid, .trust-section__grid, .briefing-anatomy__grid, .role-lenses__grid, .judgment-section__grid, .developer-problem__grid, .state-trigger__grid, .provenance-section__grid, .broken-model__grid, .control-section__grid, .contact-page__grid { grid-template-columns: 1fr; }
  .home-hero__grid { padding-block: 82px 58px; }
  .home-hero__visual { max-width: 700px; transform: none; }
  .home-hero__rail { flex-wrap: wrap; padding-block: 22px; }
  .page-hero__grid { gap: 65px; }.page-hero__aside { max-width: 700px; }
  .pipeline-visual { grid-template-columns: 1fr 1fr; }.pipeline-step:nth-child(2) { border-right: 0; }.pipeline-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.pipeline-step__arrow { display: none; }
  .mechanism__proof-grid, .two-readers__grid, .score-grid, .governance-grid, .partner-type-grid, .relation-grid { grid-template-columns: 1fr; }
  .reader-pane + .reader-pane { border-left: 0; border-top: 1px solid var(--line-strong); }
  .platform-stack__intro, .contact-page__intro { position: static; }
  .trust-section__grid { gap: 55px; }.trust-section__body > p { margin-bottom: 40px; }
  .use-case { grid-template-columns: 45px 1fr; }.use-case__name { grid-column: 2; }.use-case h3, .use-case > p:last-child { grid-column: 2; }
  .cta-band__inner { grid-template-columns: 1fr; gap: 42px; }
  .site-footer__main { grid-template-columns: 1fr; gap: 60px; }.site-footer__family { align-items: flex-start; flex-direction: column; padding-block: 24px; }.family-lockup { flex-wrap: wrap; }
  .numbered-grid--three, .outcome-grid, .api-grid, .eds-problem-grid { grid-template-columns: 1fr; }.numbered-grid article, .outcome-grid article { border-right: 0; border-bottom: 1px solid var(--line-strong); }.numbered-grid article:last-child, .outcome-grid article:last-child { border-bottom: 0; }
  .briefing-anatomy__visual { order: 2; }.briefing-anatomy__copy { order: 1; }
  .score-card--large { grid-row: auto; min-height: 350px; }.score-card--quiet { grid-column: auto; }
  .lens-stack { min-height: 520px; }
  .faq-section__grid { grid-template-columns: 1fr; gap: 55px; }
  .architecture-grid { grid-template-columns: 1fr 1fr; }
  .partner-steps { grid-template-columns: 1fr 1fr; }.partner-steps article, .partner-steps article:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.partner-steps article:nth-child(even) { border-right: 0; }.partner-steps article:last-child { border-bottom: 0; }
  .eds-layout { grid-template-columns: 1fr; gap: 0; }.eds-nav { display: none; }.eds-content { max-width: none; }
  .conformance-grid { grid-template-columns: 1fr 1fr; }.conformance-grid article:nth-child(2) { border-right: 0; }.conformance-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .contact-page__grid { gap: 65px; }.contact-page__intro { max-width: 750px; }
}

@media (max-width: 640px) {
  :root { --section-pad: 72px; }
  .container, .container-wide { width: calc(100% - 40px); }
  .section-header h2 { font-size: 42px; }.section-header__body { font-size: 16px; }
  .button-row, .page-hero__actions { align-items: stretch; flex-direction: column; }.button-row .button, .page-hero__actions > .button { width: 100%; }
  .home-hero { min-height: auto; }.home-hero__grid { min-height: auto; }.home-hero__copy h1 { font-size: 51px; }.home-hero__copy > p { font-size: 17px; }.home-hero__visual { margin-top: 15px; }
  .world-model { min-height: 445px; }.world-model__canvas { min-height: 397px; }.world-model__nodes { opacity: .56; }.world-model__signal { left: 14px; right: 14px; bottom: 14px; }.world-model__signal > strong { font-size: 17px; }.signal-meta span:last-child { display: none; }
  .home-hero__rail span:nth-child(2) { display: none; }.home-hero__rail { justify-content: space-between; }
  .statement-section h2 { font-size: 42px; }
  .pipeline-visual { grid-template-columns: 1fr; }.pipeline-step { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }.pipeline-step:last-child { border-bottom: 0; }
  .mechanism__proof-grid { grid-template-columns: 1fr; }.pathway-chain { padding-block: 30px; }
  .signal-showcase__grid { gap: 55px; }.briefing-card h3 { font-size: 23px; }.briefing-card__content { padding: 22px; }.briefing-card__footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .two-readers__grid { border-radius: var(--r-lg); }.reader-pane { padding: 14px; }.event-record pre { min-height: 320px; padding: 18px; font-size: 10px; }
  .stack-item { grid-template-columns: 34px 1fr; }.stack-item > b { grid-column: 2; width: max-content; }.stack-item p { font-size: 12px; }
  .trust-grid { grid-template-columns: 1fr; }.trust-section h2 { font-size: 55px; }.trust-section__body > p { font-size: 18px; }
  .use-case { padding-block: 27px; }.use-case h3 { font-size: 24px; }
  .cta-band__inner { min-height: 480px; padding-block: 75px; }.cta-band h2 { font-size: 47px; }.cta-band .button { white-space: normal; }
  .site-footer__links { grid-template-columns: 1fr 1fr; }.site-footer__links > div:first-child { grid-row: span 2; }.family-lockup > span { order: 3; width: 100%; padding: 15px 0 0; border: 0; }
  .page-hero { padding-block: 70px; }.page-hero__grid { min-height: auto; gap: 55px; }.page-hero__copy h1 { font-size: 53px; }.page-hero__body { font-size: 17px; }
  .domain-capture { padding: 0; border: 0; border-radius: 0; flex-direction: column; gap: 10px; background: transparent; box-shadow: none; }.domain-capture input { min-height: 52px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: white; }.domain-capture .button { width: 100%; }
  .numbered-grid article { min-height: 230px; }.numbered-grid h3 { margin-top: 55px; }
  .score-card--large { min-height: 320px; }.score-card > strong { font-size: 60px; }.lens-stack { min-height: auto; display: grid; gap: 12px; }.lens-stack article { position: static; width: 100%; }.faq-item button span { font-size: 16px; }
  .outcome-grid article { min-height: 300px; }.outcome-grid h3 { margin-top: 65px; }.architecture-grid { grid-template-columns: 1fr; }.judgment-card { padding: 20px; }.judgment-card > h3 { font-size: 24px; }.judgment-card__section { grid-template-columns: 1fr; gap: 7px; }.governance-grid article, .partner-type-grid article { border-right: 0; border-bottom: 1px solid var(--line-strong) !important; }.governance-grid article:last-child, .partner-type-grid article:last-child { border-bottom: 0 !important; }
  .dedup-visual { min-height: 600px; grid-template-columns: 1fr; }.dedup-pages { min-height: 300px; }.dedup-arrow { transform: rotate(90deg); }.api-grid article { min-height: 320px; }.api-grid h3 { margin-top: 70px; }.state-event { grid-template-columns: 36px 1fr; }.state-event > em { grid-column: 2; width: max-content; }.provenance-log > div { padding-block: 14px; grid-template-columns: 90px 1fr; }.provenance-log b { grid-column: 2; }
  .partner-steps { grid-template-columns: 1fr; }.partner-steps article, .partner-steps article:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); }.partner-steps article:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }.partner-steps article:last-child { border-bottom: 0; }.partner-steps h3 { margin-top: 70px; }.permission-row { grid-template-columns: 1fr 34px; }.permission-row b { grid-column: 1; grid-row: 2; padding-bottom: 10px; }.permission-row i { grid-row: 1 / 3; grid-column: 2; }.partner-type-grid { grid-template-columns: 1fr; }
  .contact-page__grid { min-height: auto; padding-block: calc(var(--nav-h) + var(--section-pad)) 75px; }.contact-page h1 { font-size: 51px; }.contact-page__form { padding: 22px; }.form-row { grid-template-columns: 1fr; }.contact-form__submit { align-items: stretch; flex-direction: column; }.contact-form__submit p { max-width: none; }.legal-page { padding-block: calc(var(--nav-h) + var(--section-pad)) 100px; }.legal-page header h1 { font-size: 58px; }.legal-page section { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Refined Globodex system — recovered from the original v3 design language */
:root {
  --nav-h: 64px;
  --section-pad: clamp(88px, 8vw, 128px);
  --canvas: 1200px;
  --max-wide: 1280px;                 /* Prism content grid — one width for nav + every section */
  --gutter: 56px;
  --surface: #f4f5f2;
  --surface-warm: #f1f2ed;
  --deep: #071f17;
  --deep-2: #0a2b20;
}

body { background: var(--surface); }
.container-wide { width: min(calc(100% - (var(--gutter) * 2)), var(--canvas)); }
.section-header { max-width: 800px; }
.section-header h2 { font-size: clamp(42px, 5vw, 68px); font-weight: 430; letter-spacing: -.05em; line-height: .98; }
.section-header__body { max-width: 620px; font-size: 17px; line-height: 1.65; }
.eyebrow { margin-bottom: 20px; }
/* base button sizing unified to Prism's .btn (see the .button rule near the top) */
.button--light { color: var(--gx-900); background: white; }
.button--light:hover { color: white; background: var(--gx-950); }
.button--outline-light { color: white; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.02); padding: 14px 28px; }
.button--outline-light:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); border-bottom: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.site-header__frame { width: min(calc(100% - 40px), 1320px); height: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header__frame .brand { justify-self: start; font-size: 19px; }
.site-header__frame .brand-mark { width: 24px; height: 24px; flex-basis: 24px; }
.site-header__nav { display: flex; align-items: center; gap: 28px; }
.site-header__nav a { position: relative; min-height: 44px; display: grid; place-items: center; color: var(--ink-soft); font-family: var(--mono); font-size: 9px; letter-spacing: .075em; text-transform: uppercase; transition: color .2s; }
.site-header__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 1px; background: var(--gx-600); transition: right .25s var(--ease-out); }
.site-header__nav a:hover, .site-header__nav a.is-active { color: var(--gx-700); }
.site-header__nav a:hover::after, .site-header__nav a.is-active::after { right: 0; }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.site-header__index { min-height: 40px; padding-inline: 8px; display: grid; place-items: center; color: var(--ink-soft); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.site-header__index:hover { color: var(--gx-600); }
.site-header__access { min-height: 38px; padding-inline: 18px; border-radius: var(--r-full); display: grid; place-items: center; color: white; background: var(--gx-600); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, transform .2s; }
.site-header__access:hover { background: var(--gx-700); transform: translateY(-1px); }
.site-header .menu-button { display: none; }
.site-menu { position: fixed; inset: var(--nav-h) 0 auto; z-index: 99; max-height: calc(100svh - var(--nav-h)); padding: 36px var(--gutter) 18px; visibility: hidden; overflow: auto; opacity: 0; border-bottom: 1px solid var(--line-strong); background: rgba(247,248,251,.98); transform: translateY(-12px); transition: opacity .2s, transform .25s var(--ease-out), visibility .2s; }
.site-menu.is-open { visibility: visible; opacity: 1; transform: none; }
.site-menu__inner { width: min(100%, var(--canvas)); margin-inline: auto; display: grid; grid-template-columns: 1.35fr .72fr .72fr .9fr; border-top: 1px solid var(--line-strong); }
.site-menu__inner > div { min-width: 0; padding: 24px; border-right: 1px solid var(--line); }
.site-menu__inner > div:last-child { border-right: 0; }
.menu-label { margin-bottom: 24px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.site-menu__platforms > a { min-height: 88px; padding: 14px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 28px 1fr 22px; gap: 8px 12px; align-items: center; }
.site-menu__platforms > a:last-child { border-bottom: 1px solid var(--line); }
.site-menu__platforms span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }
.site-menu__platforms strong { font-size: 27px; font-weight: 430; letter-spacing: -.04em; }
.site-menu__platforms small { grid-column: 2; color: var(--ink-muted); }
.site-menu__platforms i { grid-column: 3; grid-row: 1 / 3; font-style: normal; }
.site-menu__platforms a:hover strong, .site-menu__platforms a.is-active strong { color: var(--gx-600); }
.site-menu__column { display: flex; flex-direction: column; }
.site-menu__column a { min-height: 36px; padding: 7px 0; color: var(--ink-soft); font-size: 14px; }
.site-menu__column a:hover { color: var(--gx-600); }
.site-menu__brief { display: flex; flex-direction: column; }
.site-menu__brief strong { margin-top: auto; font-size: 28px; font-weight: 430; letter-spacing: -.04em; line-height: 1.05; }
.site-menu__brief > p:not(.menu-label) { margin: 18px 0; color: var(--ink-muted); font-size: 14px; }
.site-menu__brief a { padding-top: 16px; border-top: 1px solid var(--line-strong); color: var(--gx-700); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.site-menu__footer { width: min(100%, var(--canvas)); min-height: 42px; margin-inline: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

/* Shared product hero */
.page-hero { padding: 0; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; color: white; background: var(--gx-950); }
.page-hero__stage { position: relative; flex: 1; min-height: 0; padding-top: var(--nav-h); display: grid; align-items: center; }
.page-hero__matrix { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle, rgba(94,237,184,.15) 1px, transparent 1.2px), radial-gradient(circle at 78% 40%, rgba(94,237,184,.13), transparent 30%); background-size: 18px 18px, 100% 100%; mask-image: linear-gradient(90deg, transparent 32%, black 62%, black 100%); }
.page-hero__grid { position: relative; z-index: 2; min-height: 640px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: clamp(52px, 7vw, 96px); align-items: center; }
/* ── Hero top clearance · one token, --section-pad ──
   The gap between the nav and a hero's eyebrow is the same measurement as the
   gap between a section's edge and its section header, so it uses the same
   token. Every hero had hand-tuned constants instead, which had drifted well
   under the rhythm: 80/76/64 here, 32 on the stacked /globodex and /signals
   heroes, 56/40 on /developers — against a rhythm of 115/88/76.

   The stacked heroes were the worst because the constant is the WHOLE gap
   there: those layouts pin their graphic to the bottom and spread with
   space-between, so nothing else contributes slack and the copy sat 32px under
   the nav at every width from 390 to 1280.

   .contact-page__grid and .legal-page already expressed this correctly as
   calc(var(--nav-h) + var(--section-pad)); the heroes simply predate it.
   .home-hero is deliberately NOT in this set — it centres above 820 and
   bottom-anchors below it, and it already clears by 164px+. */
.page-hero__copy { padding-block: var(--section-pad); }
/* Type matched to Prism's .pp-hero__title: the grid column sets the measure
   (max-width: none), so headline length drives line count, not an arbitrary cap. */
.page-hero__copy h1 { max-width: none; margin-bottom: 24px; font-size: clamp(38px, 4.6vw, 62px); font-weight: 500; letter-spacing: -.032em; line-height: 1.05; text-wrap: balance; }
.page-hero__copy h1 em { color: var(--gx-300); }
.page-hero__body { max-width: 610px; color: rgba(255,255,255,.65); font-size: 18px; line-height: 1.62; }
.page-hero__actions { margin-top: 32px; }
.page-hero__aside { position: relative; z-index: 1; width: 100%; min-width: 0; }
.page-hero__aside > * { box-shadow: 0 36px 90px rgba(0,0,0,.28); }

/* Homepage hero */
/* Homepage hero — text over shader (Paper shaders 2.5.131, same engine as Prism); Prism 100dvh height */
.home-hero { position: relative; min-height: 100svh; padding-top: var(--nav-h); display: flex; align-items: center; overflow: hidden; color: white; isolation: isolate;
  background: radial-gradient(120% 130% at 70% 38%, #08231a 0%, #05160f 48%, #030f0a 100%);
  --wm-dot: #2acb85; --wm-arc: rgba(150,214,190,.20);
  --wm-ring-g: rgba(94,237,184,.34); --wm-ring-c: rgba(236,231,214,.30);
  --wm-core-g: #6bf0c0; --wm-core-c: #edeadd; --wm-scrim: #030f0a; }

/* ── World-map hero visual (inline SVG .home-hero__map) — static dot-field + network layer.
   Nodes/arcs are authored in the OG's 1200×630 coordinate space for later packet animation. ── */
.home-hero__viz { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.home-hero__map { position: absolute; top: 50%; right: -1%; transform: translateY(-50%); width: min(66%, 1040px); aspect-ratio: 720 / 548; height: auto; }
.home-hero__viz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wm-scrim) 0%, rgba(3,16,11,.7) 26%, rgba(3,16,11,0) 52%); }
.wm-dots { fill: var(--wm-dot); }
.wm-arcs .wm-arc { stroke: var(--wm-arc); stroke-width: 1; }
.wm-arcs .wm-arc--dash { stroke-dasharray: 1 7; stroke-linecap: round; }
.wm-ring { fill: none; stroke: var(--wm-ring-c); stroke-width: 1; }
.wm-node--green .wm-ring { stroke: var(--wm-ring-g); }
.wm-core { fill: var(--wm-core-c); }
.wm-node--green .wm-core, .wm-core--green { fill: var(--wm-core-g); }
/* Signal packets (injected by main.js) travelling the .wm-arc--live routes. */
.wm-packet { fill: #aef7dc; filter: drop-shadow(0 0 2.5px rgba(120,240,190,.9)); }
.wm-packet--tail { fill: #6bf0c0; filter: none; }
/* Sonar ping on the hubs — expands past the static rings, then fades. */
.wm-pulse { fill: none; stroke: var(--wm-ring-g); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: wm-sonar 3.4s ease-out infinite; }
.wm-node--cream .wm-pulse { stroke: var(--wm-ring-c); }
@keyframes wm-sonar { 0% { transform: scale(.55); opacity: .5; } 72% { opacity: 0; } 100% { transform: scale(4.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wm-pulse { animation: none; opacity: 0; } }
/* On stacked (mobile/tablet) layouts the map recedes to a faint full-bleed backdrop
   behind the copy; the legend card (a desktop detail) is dropped. */
@media (max-width: 900px) {
  .home-hero__map { width: 150%; right: -25%; top: 44%; opacity: .4; }
  .home-hero__viz::after { background: linear-gradient(180deg, rgba(3,15,10,.15) 0%, rgba(3,15,10,.5) 55%, var(--wm-scrim) 100%); }
}
.home-hero__inner { position: relative; z-index: 2; }
.home-hero__copy { max-width: 720px; }
/* Marquee tier — Prism's .h1 scale (lh 1.05, ls -.035em). The homepage runs larger
   than interior heroes; the line-height stays the same so the block still composes. */
.home-hero__copy h1 { margin: 0 0 28px; font-size: clamp(46px, 6.2vw, 82px); font-weight: 460; letter-spacing: -.035em; line-height: 1.04; }
.home-hero__copy h1 em { color: var(--gx-300); }
.home-hero__copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 34px; color: rgba(255,255,255,.66); font-size: 18px; line-height: 1.65; }

/* Homepage narrative */
/* TRIAL: was var(--surface-warm) — both narrative sections now white, so the dotted
   seam is the only thing dividing them. Revert this one value to bring the warm band back. */
.home-problem { padding-block: var(--section-pad); background: white; }
.home-problem h2 { max-width: 790px; margin: 0 0 28px; font-size: clamp(48px, 5.5vw, 72px); font-weight: 420; letter-spacing: -.055em; line-height: .96; }
.home-thesis { padding-block: var(--section-pad); background: white; }
/* Thesis statement — display scale. Deliberately larger than Prism's 48px h2 so the
   thesis reads as the page's typographic peak; weight 400 / -.035em (Prism's display
   register) comes from the Prism-alignment block further down. */
.home-thesis h2 { margin: 0; font-size: clamp(2.75rem, 5.4vw, 4.875rem); line-height: 1.04; text-wrap: auto; }
.home-thesis h2 em { color: var(--gx-600); }

/* Product doors */
/* Green ground (was --surface #f4f5f2). The dark band sits between two white
   sections and carries ~24% of the page's scroll height. */
.home-platforms { padding-block: var(--section-pad); background: var(--gx-800); }
/* White is scoped to the HEADER BLOCK, never the section. `color` inherits, and
   h3 has no colour rule anywhere in this stylesheet — so a section-level white
   lands on the light cards too (--signals reached contrast 13, the three
   --compact cards contrast 0: invisible headings). __intro and
   .home-product-grid are siblings, so scoping here leaves every card inheriting
   the page default ink. Do not lift this onto .home-platforms. */
.home-platforms__intro { margin-bottom: var(--head-gap); color: white; }
/* Doubled class: the global .eyebrow.eyebrow override (line ~1288) is also
   (0,2,0) and sits later in the file, so a single .home-platforms .eyebrow
   loses the tie and the eyebrow stays --gx-600 — invisible on the green. */
.home-platforms .eyebrow.eyebrow { color: var(--gx-300); }
.home-platforms .section-header__body { color: rgba(255,255,255,.62); }
/* --globodex is --gx-950; on the green it needs an edge or it reads as a region
   of the section rather than a card. */
.home-platforms .home-product-card--globodex { border-color: rgba(255,255,255,.14); }
/* The light cards' 1px var(--line) border is a dark-on-light value — against the
   green it reads as grime, so it flips to a soft lift. */
.home-platforms .home-product-card:not(.home-product-card--globodex) { border-color: rgba(255,255,255,.08); }
.home-platforms .home-product-card:hover { border-color: rgba(94,237,184,.34); box-shadow: 0 24px 60px rgba(0,0,0,.34); }
.home-platforms__intro h2 { max-width: 760px; margin: 0 0 22px; font-size: clamp(46px, 5vw, 66px); font-weight: 420; letter-spacing: -.052em; line-height: .98; }
.home-platforms__intro h2 em { color: var(--gx-600); }
.home-product-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.home-product-card { position: relative; min-width: 0; min-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); display: block; background: white; box-shadow: 0 1px 1px rgba(6,29,21,.02); transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; }
.home-product-card:hover { transform: translateY(-4px); border-color: rgba(0,137,94,.22); box-shadow: 0 24px 60px rgba(6,29,21,.09); }
.home-product-card__head { position: relative; z-index: 2; min-height: 54px; padding-inline: 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.home-product-card__head i { color: var(--gx-600); font-size: 14px; font-style: normal; transition: transform .25s; }
.home-product-card:hover .home-product-card__head i { transform: translate(3px,-3px); }
.home-product-card__copy { position: relative; z-index: 2; padding: 28px; }
.home-product-card__copy h3 { margin: 0 0 16px; font-size: clamp(42px, 4.2vw, 61px); font-weight: 430; letter-spacing: -.055em; line-height: .92; }
.home-product-card__copy p { max-width: 480px; margin-bottom: 24px; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.home-product-card__copy strong { color: var(--gx-700); font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.home-product-card__visual { min-width: 0; }
.home-product-card--globodex { grid-column: span 7; min-height: 650px; color: white; background: var(--gx-950); }
.home-product-card--globodex .home-product-card__head { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.38); }
.home-product-card--globodex .home-product-card__head i, .home-product-card--globodex .home-product-card__copy strong { color: var(--gx-300); }
.home-product-card--globodex .home-product-card__copy p { color: rgba(255,255,255,.53); }
/* In flow with margin-top:auto, same reasoning as .product-glyph. Absolute
   anchored these by `bottom`, so their TOP floated on their own height and rose
   into the copy whenever the card was short — measured clashes of -8px at 1440,
   -2px at 1280 and -44px at 900. The negative right/bottom margins keep the
   deliberate bleed; .home-product-card's overflow:hidden still clips it. */
.home-product-card--globodex .home-product-card__visual { position: static; margin: auto -55px -60px 28px; transform: rotate(-1.5deg); }
.home-product-card--globodex .event-record { box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.home-product-card--signals { grid-column: span 5; min-height: 650px; background: #eef4ef; }
.home-product-card--signals .home-product-card__visual { position: static; margin: auto -68px -38px 28px; transform: rotate(1.25deg); }
.home-product-card--signals .briefing-card { box-shadow: 0 25px 60px rgba(6,29,21,.13); }
.home-product-card--compact { grid-column: span 4; min-height: 430px; }
.home-product-card--compact .home-product-card__copy { max-width: 390px; }
.home-product-card--compact .home-product-card__copy h3 { font-size: clamp(38px, 3.5vw, 50px); }
/* The glyph sits in FLOW with margin-top:auto, not position:absolute. Absolute
   took it out of the flow, so nothing reserved space for it and the card's
   hand-tuned min-height was the only thing holding the label off it. That failed
   between 700px and 1080px, where the EDS card goes full-width (span 12) but
   keeps a 330px floor — the copy grew into the glyph and overlapped it by 48px.
   In flow it still pins to the bottom when there is spare room, and pushes the
   card taller when there is not, so the clash cannot come back. */
.home-product-card { display: flex; flex-direction: column; }
/* fixed height, not min-height: with a floor the three glyphs sized to their own
   content and never matched (enterprise 119, code 110, eds 126) */
.product-glyph { position: static; margin: auto 28px 28px; height: var(--glyph-h, 126px); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
/* breathing room between the copy block (ending in the small mono label) and the
   glyph — previously there was none in the flow at all */
.home-product-card__copy { padding-bottom: 24px; }
.product-glyph--enterprise { padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background-image: radial-gradient(circle, rgba(0,137,94,.16) 1px, transparent 1.2px); background-size: 14px 14px; }
.product-glyph--enterprise .pg-ent__src { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.product-glyph--enterprise .pg-ent__src span { display: block; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(255,255,255,.72); color: var(--ink-muted); font-family: var(--mono); font-size: 6.5px; letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.35; }
.product-glyph--enterprise .pg-ent__flow { text-align: center; color: var(--gx-600); font-size: 11px; line-height: 1; }
.product-glyph--enterprise .pg-ent__layer { padding: 8px; border: 1px solid rgba(0,137,94,.30); border-radius: 5px; background: rgba(0,137,94,.08); color: var(--gx-700); font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
/* no `margin: 0` here — it would override .product-glyph's `auto 28px 28px`,
   which is what both insets this from the card edges AND pushes it to the
   bottom. It existed to reset the <pre> UA margin while the glyph was absolutely
   positioned; .product-glyph now sets margin explicitly, so the reset is not
   needed and was costing the left/right inset and the bottom alignment. */
.product-glyph--code { padding: 18px; color: var(--gx-300); background: var(--gx-950); font-family: var(--mono); font-size: 10px; line-height: 1.7; }
.product-glyph--eds { padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 6px; background: var(--gx-100); }
.product-glyph--eds span { height: 28px; display: grid; place-items: center; border: 1px solid rgba(0,137,94,.2); color: var(--gx-700); background: rgba(255,255,255,.55); font-family: var(--mono); font-size: 8px; }
.product-glyph--eds span:nth-child(2) { height: 46px; }.product-glyph--eds span:nth-child(3) { height: 68px; }.product-glyph--eds span:nth-child(4) { height: 88px; }
.product-glyph--eds .is-active { color: white; background: var(--gx-600); }

/* One event, different stakes */
.home-missions { padding-block: var(--section-pad); color: white; background: var(--gx-950); }
.home-missions__header { margin-bottom: var(--head-gap); }
.home-missions__header h2 { margin: 0; font-size: clamp(48px, 5.3vw, 70px); font-weight: 420; letter-spacing: -.055em; line-height: .96; }
.home-missions__header h2 em { color: var(--gx-300); }
/* A step below --gx-950 so the artifact reads as a darker object sitting on the section,
   with the commentary row (--gx-850) a step lighter than both. */
.home-event { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-xl); background: #04150f; }
/* Photo band above the record, cropped to a wide letterbox by object-fit. The canonical
   event strip below is pulled up over the foot of it by exactly its own height and given
   a backdrop blur, so the frost field reads through the strip as frosted glass. The scrim
   is .68 rather than lighter because the photo's lower third is bright — the mono labels
   sit at 36% white and go illegible over anything thinner. */
.home-event__photo { position: relative; height: clamp(180px, 21vw, 290px); margin: 0; overflow: hidden; }
.home-event__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.home-event__source { position: relative; z-index: 2; min-height: 58px; margin-top: -58px; padding-inline: 20px; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(4,21,15,.68); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; color: rgba(255,255,255,.42); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.home-event__source span i { width: 6px; height: 6px; margin-right: 7px; display: inline-block; border-radius: 50%; background: var(--gx-300); box-shadow: 0 0 0 4px rgba(94,237,184,.07); }
.home-event__source b { color: rgba(255,255,255,.7); font-weight: 500; }
.home-event__source em { justify-self: end; color: var(--gx-300); font-style: normal; }
.home-event__outputs { display: grid; grid-template-columns: repeat(3,1fr); }
/* The "Rendered as …" header rows and the repeated "Same record · same receipts" footers
   were removed from these cells. Both were structural: the 40px top margins below existed
   to clear the header, and the footer's `margin-top: auto` anchored content to the bottom.
   With them gone the margins are zeroed and min-height drops from 320px, or the cells
   would carry a 64px void above the content and ~170px below it. */
.home-event__outputs article { min-height: 200px; padding: 24px; border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; }
.home-event__outputs article:last-child { border-right: 0; }
.home-event__outputs article > b { margin: 0 0 13px; color: var(--gx-300); font-family: var(--mono); font-size: 7px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.home-event__outputs h3 { margin: 0 0 15px; font-size: 26px; font-weight: 450; line-height: 1.08; }
.home-event__outputs p { color: rgba(255,255,255,.49); font-size: 13px; }
.home-event__outputs dl { margin: 0; display: grid; grid-template-columns: 72px 1fr; gap: 10px; font-size: 12px; }
.home-event__outputs dt { color: rgba(255,255,255,.35); }.home-event__outputs dd { margin: 0; color: rgba(255,255,255,.72); }
.home-event__outputs pre { margin: 0; color: var(--gx-300); font-family: var(--mono); font-size: 10px; line-height: 1.7; white-space: pre-wrap; }
/* Monochrome treatment. The artifact above sits in the deepest green and the commentary
   here a step lighter (--gx-850), so the two taxonomies — one event rendered three ways,
   then three audiences — separate by tone rather than by a white break. Chosen over the
   white version to preserve the missions section as the page's one sustained dark beat,
   between the light platform grid above and the white trust section below, and to keep
   mint working as an accent rather than a background. No border-top: tone is the divider. */
.home-mission-grid { display: grid; grid-template-columns: repeat(3,1fr); background: var(--gx-850); }
/* min-height reduced from 290px with the numbered labels removed: the heading stays
   bottom-anchored, so the space the labels vacated became dead air above it. */
.home-mission-grid article { min-height: 230px; padding: 24px; border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; }
.home-mission-grid article:last-child { border-right: 0; }
.home-mission-grid h3 { max-width: 320px; margin: auto 0 18px; color: white; font-size: 26px; font-weight: 440; letter-spacing: -.035em; line-height: 1.05; }
.home-mission-grid p { margin: 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.55; }

/* Trust + partner conversion */
.home-trust { padding-block: var(--section-pad); background: white; }
.home-trust__header { margin-bottom: var(--head-gap); }
.home-trust__header h2 { max-width: 750px; margin: 0 0 22px; font-size: clamp(48px, 5vw, 68px); font-weight: 420; letter-spacing: -.055em; line-height: .96; }
.home-trust__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.home-trust__grid article { min-height: 260px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; background: var(--surface); }
.home-trust__grid article > span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; }
/* The removed .trust-check carried the `margin-bottom: auto` that bottom-anchored each
   card's heading and body against the number at the top. That anchoring moves onto the
   heading, so the cards keep their baseline-bottom alignment (as .home-mission-grid does)
   instead of collapsing to the top and leaving the space beneath. */
.home-trust__grid h3 { margin: auto 0 11px; font-size: 24px; font-weight: 480; letter-spacing: -.03em; }
.home-trust__grid p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.cta-band { position: relative; overflow: hidden; color: white; background: linear-gradient(112deg, var(--gx-700), var(--gx-600)); }
.cta-band__grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px), radial-gradient(circle at 80% 40%, rgba(94,237,184,.8), transparent 28%); background-size: 48px 48px, 48px 48px, auto; mask-image: linear-gradient(90deg, transparent 25%, black); }
.cta-band__inner { position: relative; min-height: 460px; padding-block: 80px; display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; }
.cta-band h2 { max-width: 840px; margin: 0 0 18px; font-size: clamp(48px, 5.3vw, 72px); font-weight: 420; letter-spacing: -.055em; line-height: .96; }
.cta-band h2 em { color: white; }
.cta-band__inner > div > p:last-child { max-width: 650px; margin: 0; color: rgba(255,255,255,.62); font-size: 16px; }

/* Footer */
.site-footer { color: white; background: #0b0d0c; }
.site-footer__routes { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,.1); }
.site-footer__routes > a { min-height: 180px; padding: 40px max(var(--gutter), calc((100vw - var(--canvas)) / 2)); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.1); transition: background .25s; }
.site-footer__routes > a:last-child { border-right: 0; }
.site-footer__routes > a:hover { background: var(--gx-950); }
.site-footer__routes span { margin-bottom: 24px; color: rgba(255,255,255,.32); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__routes strong { font-size: clamp(29px, 3vw, 43px); font-weight: 430; letter-spacing: -.04em; }
.site-footer__routes i { color: var(--gx-300); font-style: normal; }
.site-footer__directory { padding-block: 66px; display: grid; grid-template-columns: repeat(4,1fr); gap: 48px; }
.site-footer__directory > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__directory a { color: rgba(255,255,255,.58); font-size: 14px; transition: color .2s; }
.site-footer__directory a:hover { color: white; }
.site-footer .footer-label { margin-bottom: 14px; color: rgba(255,255,255,.27); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__wordmark { width: min(calc(100% - (var(--gutter) * 2)), var(--canvas)); margin-inline: auto; overflow: hidden; color: white; font-size: clamp(90px, 16vw, 230px); font-weight: 390; letter-spacing: -.075em; line-height: .68; white-space: nowrap; }
.site-footer__legal { min-height: 68px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.25); font-family: var(--mono); font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }

/* Dedicated Globodex page */
.globodex-intro { background: var(--surface-warm); }
.globodex-intro__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(60px, 8vw, 110px); align-items: end; }
.globodex-intro__contrast { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: white; }
.globodex-intro__contrast article { min-height: 145px; padding: 24px; display: grid; grid-template-columns: 76px 1fr; gap: 6px 18px; border-bottom: 1px solid var(--line); }
.globodex-intro__contrast article:last-child { border-bottom: 0; background: var(--gx-100); }
.globodex-intro__contrast span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.globodex-intro__contrast strong { font-size: 23px; font-weight: 470; }
.globodex-intro__contrast p { grid-column: 2; margin: 0; color: var(--ink-muted); font-size: 14px; }
.globodex-anatomy { color: white; background: var(--gx-950); }
.globodex-anatomy__grid { margin-top: var(--head-gap); display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.globodex-anatomy__grid article { min-height: 260px; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); display: flex; flex-direction: column; background: rgba(255,255,255,.025); }
.globodex-anatomy__grid span { color: var(--gx-300); font-family: var(--mono); font-size: 8px; }
.globodex-anatomy__grid h3 { margin: auto 0 14px; font-size: 29px; font-weight: 450; letter-spacing: -.035em; }
.globodex-anatomy__grid p { margin: 0; color: rgba(255,255,255,.48); font-size: 14px; line-height: 1.55; }








.globodex-state { color: white; background: var(--deep-2); }
.globodex-state__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 8vw, 110px); align-items: center; }
.globodex-timeline { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg); background: rgba(0,0,0,.1); }
.globodex-timeline > div { min-height: 108px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: 62px 1fr auto; gap: 7px 16px; align-content: center; }
.globodex-timeline > div:last-child { border-bottom: 0; }
.globodex-timeline span, .globodex-timeline em { color: var(--gx-300); font-family: var(--mono); font-size: 8px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.globodex-timeline strong { font-size: 18px; font-weight: 470; }
.globodex-timeline p { grid-column: 2; margin: 0; color: rgba(255,255,255,.47); font-size: 13px; }
.globodex-trust { background: var(--surface-warm); }
.globodex-trust__grid { margin-top: var(--head-gap); display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.globodex-trust__grid article { min-height: 300px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; background: white; }
.globodex-trust__grid span { color: var(--gx-600); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.globodex-trust__grid h3 { margin: auto 0 14px; font-size: 26px; font-weight: 450; letter-spacing: -.035em; line-height: 1.08; }
.globodex-trust__grid p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.globodex-surfaces { background: white; }
.globodex-surfaces__grid { margin-top: var(--head-gap); border-top: 1px solid var(--line-strong); }
.globodex-surfaces__grid a { min-height: 140px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); display: grid; grid-template-columns: 48px .78fr 1.22fr 24px; gap: 28px; align-items: center; }
.globodex-surfaces__grid a > span { align-self: start; padding-top: 12px; color: var(--gx-600); font-family: var(--mono); font-size: 8px; }
.globodex-surfaces__grid h3 { margin: 0; font-size: clamp(38px, 4vw, 54px); font-weight: 430; letter-spacing: -.05em; }
.globodex-surfaces__grid p { max-width: 540px; margin: 0; color: var(--ink-muted); font-size: 15px; }
.globodex-surfaces__grid i { color: var(--gx-600); font-size: 18px; font-style: normal; transition: transform .2s; }
.globodex-surfaces__grid a:hover h3 { color: var(--gx-600); }
.globodex-surfaces__grid a:hover i { transform: translate(3px,-3px); }

@media (max-width: 1080px) {
  .site-header__nav { gap: 18px; }
  .site-header__nav a { font-size: 8px; }
  .page-hero__grid { grid-template-columns: minmax(0,1fr) 420px; gap: 48px; }
  .home-hero__copy { width: 62%; }
  .home-hero__observation { width: 320px; }
  .home-product-card--compact { grid-column: span 6; }
  .home-product-card--eds { grid-column: span 12; min-height: 330px; }
  
}

@media (max-width: 900px) {
  .site-header__frame { grid-template-columns: 1fr auto; }
  .site-header__nav { display: none; }
  .site-header__actions { gap: 8px; }
  .site-header .menu-button { width: 42px; height: 42px; display: block; }
  .site-header .menu-button span { left: 9px; background: var(--ink); }
  .site-header__index { display: none; }
  .site-menu__inner { grid-template-columns: 1.2fr .8fr; }
  .site-menu__platforms { grid-row: span 2; }
  .site-menu__brief { display: none; }
  .site-menu__inner > div:nth-child(3) { border-top: 1px solid var(--line); }
  .page-hero__stage, .page-hero__grid { min-height: auto; }
  .page-hero__grid { padding-block: var(--section-pad); grid-template-columns: 1fr; }
  .page-hero__copy { max-width: 720px; padding: 0; }
  .page-hero__aside { max-width: 720px; }
  .home-hero { min-height: 780px; }
  .home-hero__video { width: 100%; height: 55%; opacity: .68; }
  .home-hero__wash { background: linear-gradient(180deg, rgba(7,31,23,.12) 0%, var(--gx-950) 54%, var(--gx-950) 100%); }
  .home-hero__inner { min-height: 724px; align-items: flex-end; }
  .home-hero__copy { width: 75%; max-width: 680px; padding: 300px 0 70px; }
  .home-hero__observation { right: 0; bottom: 72px; width: 290px; }
  .home-hero__observation-event p, .home-hero__observation-stats { display: none; }
  .home-product-card--globodex, .home-product-card--signals { grid-column: span 12; min-height: 600px; }
  /* visuals are in flow now — margin replaces the old absolute offsets */
  .home-product-card--signals .home-product-card__visual { margin-right: 8%; }
  .home-event__outputs, .home-mission-grid { grid-template-columns: 1fr; }
  .home-event__outputs article, .home-mission-grid article { min-height: 230px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .home-event__outputs article:last-child, .home-mission-grid article:last-child { border-bottom: 0; }
  .home-trust__grid, .globodex-trust__grid { grid-template-columns: repeat(2,1fr); }
  .cta-band__inner { grid-template-columns: 1fr; gap: 36px; }
  .cta-band__inner .button { width: max-content; }
  .globodex-intro__grid, .globodex-state__grid { grid-template-columns: 1fr; }
  /* stacked: lead with the section header, then the timeline visual below it */
  .globodex-state__grid > header { order: -1; }
  .globodex-anatomy__grid { grid-template-columns: repeat(2,1fr); }
  .globodex-surfaces__grid a { grid-template-columns: 40px 1fr 24px; }
  .globodex-surfaces__grid p { grid-column: 2; }
  .globodex-surfaces__grid i { grid-column: 3; grid-row: 1; }
}

@media (max-width: 640px) {
  :root { --nav-h: 62px; --gutter: 20px; --section-pad: 76px; }
  .container-wide { width: calc(100% - 40px); }
  .site-header__frame { width: calc(100% - 28px); }
  .site-header__frame .brand { font-size: 18px; }
  .site-header__access { display: none; }
  .site-menu { padding: 20px 14px 14px; }
  .site-menu__inner { display: block; }
  .site-menu__platforms > a { min-height: 72px; }
  .site-menu__platforms strong { font-size: 24px; }
  .site-menu__platforms small, .site-menu__column, .site-menu__footer { display: none; }
  .button-row { flex-direction: column; }
  .button-row .button { width: 100%; }
  .page-hero__grid { padding-block: var(--section-pad); }
  .page-hero__copy h1 { font-size: 48px; }
  .page-hero__body { font-size: 16px; }
  .home-hero { min-height: 740px; }
  .home-hero__video { height: 44%; object-position: 60% center; }
  .home-hero__inner { min-height: 690px; }
  .home-hero__copy { width: 100%; padding: 250px 0 54px; }
  .home-hero__copy h1 { font-size: clamp(46px, 14vw, 58px); line-height: .96; }
  .home-hero__copy > p { font-size: 16px; line-height: 1.55; }
  .home-hero__observation { display: none; }
  .home-hero__rail { min-height: 50px; }
  .home-hero__rail span:nth-child(2) { display: none; }
  .home-problem { padding-block: 78px; }
  .home-problem .section-header__body, .home-platforms__intro .section-header__body, .home-trust__header .section-header__body { font-size: 16px; }
  .home-thesis { padding-block: 76px; }
  .home-thesis h2 { font-size: 38px; }
  .home-product-grid { display: block; }
  .home-product-card { margin-bottom: 14px; }
  .home-product-card--globodex, .home-product-card--signals { min-height: 650px; }
  .home-product-card--globodex .home-product-card__visual { margin-left: 20px; margin-right: -100px; }
  .home-product-card--signals .home-product-card__visual { margin-left: 20px; margin-right: -145px; }
  .home-product-card--compact, .home-product-card--eds { min-height: 380px; }
  .home-product-card__copy { padding: 24px 20px 20px; }
  .home-product-card__copy h3 { font-size: 43px; }
  /* glyph is in flow now — margins replace the old absolute offsets */
  .product-glyph { margin: auto 20px 20px; }
  /* stacked here, so the strip is taller than 58px — drop the overlap rather than
     have it sit half-off the photo, and keep it solid since there is nothing behind it */
  .home-event__source { margin-top: 0; padding-block: 15px; grid-template-columns: 1fr; text-align: left; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .home-event__source em { justify-self: start; }
  .home-event__outputs article { min-height: 260px; }
  .home-mission-grid article { min-height: 250px; }
  .home-trust__grid, .globodex-trust__grid, .globodex-anatomy__grid{ grid-template-columns: 1fr; }
  .home-trust__grid article { min-height: 235px; }
  .cta-band__inner { min-height: 450px; padding-block: 68px; }
  .cta-band h2 { font-size: 44px; }
  .cta-band__inner .button { width: 100%; }
  .site-footer__routes, .site-footer__directory { grid-template-columns: 1fr; }
  .site-footer__routes > a { min-height: 138px; padding: 28px 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-footer__directory { gap: 34px; }
  .site-footer__wordmark { font-size: 28vw; line-height: .72; }
  .site-footer__legal { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
  .globodex-intro__contrast article { grid-template-columns: 1fr; }
  .globodex-intro__contrast p { grid-column: 1; }
  .globodex-anatomy__grid article, .globodex-trust__grid article { min-height: 230px; }
  .globodex-timeline > div { grid-template-columns: 52px 1fr; }
  .globodex-timeline em { grid-column: 2; }
  .globodex-surfaces__grid a { gap: 12px; }
  .globodex-surfaces__grid h3 { font-size: 38px; }
}

/* ─────────────────────────────────────────────
   Prism system alignment (2026-07-18)
   Reads as a Prism sibling: open display tracking + Prism's
   lighter display weight (400), roomier small-screen gutter.
   Emerald accent + section structure intentionally unchanged.
   ───────────────────────────────────────────── */
.home-hero__copy h1,
.home-product-card__copy h3 {
  font-weight: 400;
  letter-spacing: -0.04em;
}
.home-problem h2,
.home-thesis h2,
.home-platforms__intro h2,
.home-missions__header h2,
.home-trust__header h2,
.cta-band h2 {
  font-weight: 400;
  letter-spacing: -0.035em;
}
@media (max-width: 760px) {
  .container, .container-wide { width: min(100% - 40px, 1280px); }
}

/* Shader hero — clean responsive (supersedes legacy video-hero rules) */
@media (max-width: 1080px) {
  .home-hero__copy { width: auto; max-width: 640px; }
}
@media (max-width: 900px) {
  .home-hero { min-height: 100svh; }
  .home-hero__inner { min-height: 0; }
  .home-hero__copy { width: auto; max-width: 620px; padding: 0; }
}
@media (max-width: 640px) {
  .home-hero { min-height: max(520px, calc(100svh - var(--nav-h))); }
  .home-hero__copy { width: auto; max-width: 100%; padding: 0; }
}

/* ═══════════════════════════════════════════════════════════
   NAV — identical to the Prism site's system (padding, spacing,
   type, hover, sticky/blur, mobile). Only the logo, links, and CTA
   differ. Ported verbatim from Prism assets/styles.css .site-nav block.
   ═══════════════════════════════════════════════════════════ */
/* nav overlays the hero (Prism-style): heroes are 100dvh and clear the nav via their own
   top padding; non-hero pages (legal) clear it via their existing top padding. */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(247, 248, 251, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(23, 24, 26, 0.06);
  transition: background 0.3s var(--ease), border-color 0.3s;
}
.site-nav.scrolled {
  background: rgba(247, 248, 251, 0.985);
  border-bottom-color: rgba(23, 24, 26, 0.10);
}
.nav-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center;
  height: 100%;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--n900); text-decoration: none;
  font-weight: 550; font-size: 16px; letter-spacing: -0.01em;
}
.nav-brand svg { width: 28px; height: 28px; flex-shrink: 0; }
.nav-menu {
  /* gap:0 with the spacing moved INTO each item's horizontal padding. The visual
     rhythm is unchanged (18px + 18px = the old 36px gap) but the hover targets now
     touch, so moving between triggers never crosses dead space and the open panel
     stays open — it just swaps contents. margin-left is reduced by one item's
     padding so the first label still lands on the grid. */
  display: flex; align-items: center; gap: 0;
  margin-left: 38px;
  position: relative;
}
.nav-menu__item {
  position: relative;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(23, 24, 26, 0.62);
  text-decoration: none;
  padding: 22px 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-menu__item:hover, .nav-menu__item.is-open { color: var(--n900); }
.nav-menu__item svg { width: 9px; height: 9px; opacity: 0.7; transition: transform 0.2s; }
.nav-menu__item.is-open svg { transform: rotate(180deg); }
.nav-menu__item[data-dropdown] { position: static; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: -28px;
  width: 760px;
  background: #fff;
  border: 0.5px solid var(--n100);
  border-radius: 14px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 48px;
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  box-shadow:
    0 0 0 1px rgba(23, 24, 26, 0.04),
    0 4px 8px rgba(23, 24, 26, 0.04),
    0 16px 48px rgba(23, 24, 26, 0.14);
}
.nav-dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-menu__item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown__item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: opacity 0.15s; }
.nav-dropdown__item:hover .nav-dropdown__name { color: var(--p800); }
.nav-dropdown__item:hover .nav-dropdown__cat { color: var(--n700); }
.nav-dropdown__cat {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--n500);
  font-feature-settings: 'zero' 1;
}
.nav-dropdown__name {
  font-family: var(--sans);
  font-size: 16px; font-weight: 500;
  color: var(--n900);
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-cta {
  background: var(--n900);
  color: #fff;
  white-space: nowrap;   /* "Contact us" broke onto two lines in the squeeze band */
  padding: 9px 22px;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
}
.nav-cta:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(23, 24, 26, 0.28);
}
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  margin-left: auto;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span {
  width: 18px; height: 1.5px;
  background: var(--n900);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: rgba(247, 248, 251, 0.98);
  backdrop-filter: blur(20px);
  z-index: 99;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  padding: 32px 24px;
  overflow-y: auto;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; }
.nav-mobile__group { padding: 18px 0; border-bottom: 1px solid rgba(23, 24, 26, 0.06); }
.nav-mobile__label {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(23, 24, 26, 0.4);
  margin-bottom: 12px;
  font-weight: 500;
}
.nav-mobile__link {
  display: block; padding: 10px 0;
  color: var(--n900); text-decoration: none;
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em;
}
.nav-mobile__link--sub { font-size: 15px; color: rgba(23, 24, 26, 0.65); font-weight: 400; padding: 6px 0; }
.nav-mobile__cta { margin-top: 24px; }
/* tighten the nav below 1100 — but NOT by restoring `gap`, which would reopen the
   dead space between hover targets and break the seamless dropdown handover.
   Shrink each item's horizontal padding instead: 13px + 13px = the 26px it used
   to gap, with the targets still touching. */
@media (max-width: 1100px) {
  .nav-menu { margin-left: 23px; }
  .nav-menu__item { padding-inline: 13px; }
}
@media (max-width: 900px) {
  .nav-inner { padding: 0 24px; }
}
/* Hand over to the mobile menu at 1024, not 900. Measured: the desktop nav has
   only 12px of clearance left at 980 and the labels wrap to two lines by 960 —
   so 901-980 was a band where the nav was visibly broken. */
@media (max-width: 1024px) {
  .nav-menu, .nav-right { display: none; }
  .nav-toggle { display: flex; }
}

/* ── Prism content grid ────────────────────────────────────────
   .container-wide == Prism's .container (max-width 1280 + gutter), so the nav,
   hero, and every section share ONE grid — identical to Prism. This overrides
   the legacy min()/--canvas container-wide widths defined earlier in the file. */
/* padding-inline, not the `padding: 0 x` shorthand: this rule is declared late, so the
   shorthand silently reset top/bottom padding to 0 on every element that also carries a
   section class with its own padding-block — e.g. .contact-page__grid lost its 100px top
   clearance and slid under the fixed nav. Same failure mode as `margin: 0 auto` here
   previously zeroing the header→content gaps. A container should only ever set its own
   axis and never clobber what the element declares on the other one. */
.container-wide { width: 100%; max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
@media (max-width: 900px) { :root { --gutter: 24px; } }   /* Prism's mobile gutter */
@media (max-width: 640px) { :root { --nav-h: 64px; } }    /* Prism's nav height at all sizes */

/* ── Buttons: Prism sizing ── standard = 44px (base above); large = 64px.
   Matches Prism's .btn / .btn--large; Globodex keeps its own accent colours. */
.button--large { padding: 25px 36px; }
.button--glass.button--large, .button--secondary.button--large, .button--outline-light.button--large { padding: 24px 36px; }
/* Sizing is carried by the .button--large class in markup, exactly as Prism does it
   (41 of its 42 in-page buttons are .btn--large; 44px is reserved for the nav and for
   inline form controls). This replaced a set of hero-scoped padding overrides, which
   made every hero CTA large but silently left every other in-page CTA — closing bands
   included — at 44px, since the rule was tied to the section rather than the button. */

/* Eyebrows standardized to Prism's spec everywhere. The doubled class (0,2,0) beats any
   sibling-paragraph rule (e.g. .home-hero__copy > p, .cta-band ... p) that would otherwise
   resize/recolor the eyebrow <p>. Colour keeps Globodex's accent (emerald / mint inverse). */
.eyebrow.eyebrow { font-size: 11px; letter-spacing: .18em; color: var(--gx-600); }
.eyebrow.eyebrow--inverse { color: var(--gx-300); }

/* ── Prism's shared section header — the pp-src pattern: title left / lede right.
   Ported 1:1 from Prism's workflow-kit.css (grid 1fr 1fr, gap clamp(40,6vw,110),
   align start; title clamp(1.9rem,3.3vw,2.9rem)/500/1.08/-.025em with balanced
   wrapping; lede capped at 48ch and nudged 6px to sit optically with the first
   title line; stacks at 820px). Applied to the homepage narrative sections —
   inner pages keep the stacked .section-header default. ── */
.section-header--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 6vw, 110px); align-items: start; }
.section-header--split > * { min-width: 0; }
.section-header--split .eyebrow { grid-column: 1 / -1; }
.section-header--split h2 { margin: 0; max-width: none; font-size: clamp(1.9rem, 3.3vw, 2.9rem); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.section-header--split .section-header__body { max-width: 48ch; padding-top: 6px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; }
@media (max-width: 820px) {
  .section-header--split { grid-template-columns: 1fr; }
  .section-header--split .section-header__body { padding-top: 22px; }
}

/* ── Thesis field: a band of fragments above the statement that resolves from
   scattered to ordered as the section enters the viewport — "noise → accountable
   state" stated spatially. Decorative and JS-generated, so it collapses to zero
   height (no reserved gap) if the script never runs. ── */
/* The band straddles the boundary between .home-problem (warm) and .home-thesis
   (white), centred on it by translateY(-50%), so the resolved single-baseline row of
   dots lands exactly on the dividing line — the noise resolves into the seam itself.
   Its two halves fall inside the sections' existing vertical padding, so it never
   collides with copy on either side. */
.home-thesis { position: relative; }
.thesis-seam { position: absolute; top: 0; left: 0; right: 0; z-index: 2; transform: translateY(-50%); pointer-events: none; }
.thesis-field { position: relative; height: 0; }
.thesis-field.is-ready { height: 96px; }
.thesis-field i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gx-600); }

/* ── Thesis statement: scroll-driven per-word colour fill (Prism's position-H2 device) ──
   main.js tokenises the <em> continuation into .gx-word spans and writes --fill 0→1 per
   word as the block crosses the viewport; colour interpolates muted grey → emerald.
   Without JS the <em> stays solid emerald, so this is purely additive. ── */
.home-thesis h2.is-wordfill em .gx-word {
  color: color-mix(in srgb, var(--gx-600) calc(var(--fill, 0) * 100%), var(--ink-faint));
  transition: color .08s linear;
  will-change: color;
}


/* ── Closing CTA group (homepage) ── Prism's pp-cta shape: an inset rounded card on a
   light ground rather than a full-bleed band — radius clamp(20,2.4vw,30), a deep soft
   drop plus a 1px inset hairline, sized on Prism's own clamp values. The existing
   left/right layout is preserved inside it. ONE grid gap drives both the space beneath
   the hero card and the space between the two route cards, so the two can never drift.
   The route cards are the links previously in .site-footer__routes; they are removed
   from the homepage footer only, so the other pages keep their footer unchanged.
   TRIAL: revert by restoring the .cta-band section and the footer routes block. */
/* White, matching .home-trust directly above, so the two sections read as one continuous
   ground and the card floats on it — --paper (#f7f8fb) left a visible seam at the join. */
.cta-suite { padding-block: clamp(16px, 3vh, 48px) clamp(72px, 11vh, 132px); background: white; }
.cta-suite__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cta-suite__hero { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(20px, 2.4vw, 30px); padding: clamp(48px, 6vw, 88px) clamp(26px, 4vw, 64px); color: white; background: linear-gradient(112deg, var(--gx-700), var(--gx-600)); box-shadow: 0 50px 110px -60px rgba(0,60,40,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.cta-suite__mesh { position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px), radial-gradient(circle at 80% 40%, rgba(94,237,184,.8), transparent 28%); background-size: 48px 48px, 48px 48px, auto; mask-image: linear-gradient(90deg, transparent 22%, black 68%); }
.cta-suite__inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 5vw, 70px); align-items: center; }
.cta-suite__hero h2 { max-width: 840px; margin: 0 0 18px; font-size: clamp(42px, 5vw, 68px); font-weight: 420; letter-spacing: -.055em; line-height: .96; }
.cta-suite__hero h2 em { color: white; }
.cta-suite__hero > .cta-suite__inner p:last-child { max-width: 650px; margin: 0; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.6; }
.cta-suite__route { position: relative; overflow: hidden; min-height: 220px; padding: 32px; border-radius: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; color: white; background: var(--gx-950); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: background .28s var(--ease-out); }
.cta-suite__route:hover { background: var(--gx-900); }
.cta-suite__route > span { color: rgba(255,255,255,.34); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.cta-suite__route strong { margin-top: auto; display: flex; align-items: center; gap: 16px; font-size: clamp(28px, 3vw, 43px); font-weight: 430; letter-spacing: -.04em; line-height: 1.05; }
.cta-suite__route i { font-style: normal; color: var(--gx-300); transition: transform .28s var(--ease-out); }
.cta-suite__route:hover i { transform: translateX(5px); }
/* pledge strip — supporting commitments carried inside the hero card */
.cta-suite__pledge { margin-top: clamp(36px, 4vw, 54px); padding-top: clamp(28px, 3vw, 38px); border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 46px); }
.cta-suite__pledge > div { display: flex; flex-direction: column; gap: 7px; }
.cta-suite__pledge b { display: block; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .1em; color: rgba(255,255,255,.44); }
.cta-suite__pledge strong { font-size: 16px; font-weight: 500; letter-spacing: -.012em; color: white; }
.cta-suite__pledge p { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.55; }
/* dark ground — for pages that never leave the dark, so the seam into the footer stays
   continuous instead of striping. Grounds mirror the developers page; pending palette promotion. */
.cta-suite--dark { background: var(--carbon); }
.cta-suite--dark .cta-suite__hero { box-shadow: 0 50px 110px -60px rgba(0,120,80,.5), inset 0 0 0 1px rgba(255,255,255,.1); }
.cta-suite--dark .cta-suite__route { background: var(--carbon-raised); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.cta-suite--dark .cta-suite__route:hover { background: #182220; }
/* capture variant — the closing CTA takes the address itself instead of linking out.
   The inner stacks to one column so the form is the same width as the one in the
   hero rather than shrinking into the button slot; the note is re-pinned to 13px
   because .cta-suite__inner p:last-child would otherwise style it as a lede. */
.cta-suite--capture .cta-suite__inner { grid-template-columns: 1fr; gap: 34px; }
.cta-suite--capture .domain-capture { width: min(100%, 620px); border-color: transparent; box-shadow: 0 18px 40px -18px rgba(0,40,26,.5); }
.cta-suite--capture .cta-suite__inner p.hero-note { max-width: none; margin-top: 14px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
  .cta-suite__grid { grid-template-columns: 1fr; }
  .cta-suite__inner { grid-template-columns: 1fr; gap: 34px; }
  .cta-suite__route { min-height: 168px; padding: 26px 24px; }
  .cta-suite__pledge { grid-template-columns: 1fr; gap: 22px; }
}

/* ── TRIAL · Prism-pattern mission bento ──────────────────────────────────────────
   Duplicate of the missions section for side-by-side comparison. Follows Prism's
   product bento: a bordered, rounded frame split into cells by hairlines, each cell
   a graphic area over a white text area. The stacked cards are pinned top + bottom
   BELOW the frame (bottom: -70px) so they are always cropped by the viz regardless of
   content length — the Prism "panel continues past the fold" effect — with a gradient
   at the foot so they dissolve rather than cut hard.
   Revert: delete this block and the .mission-bento <section> in index.html. */
/* White to match .home-trust directly below, so the bento runs seamlessly into it
   (was --paper #f7f8fb, which left a faint seam at that join). This moves the seam
   upward instead — and that seam is now a hard one: .home-platforms above is
   --gx-800 green, no longer --surface #f4f5f2. Deliberate, but if the join ever
   needs softening, this is the rule to revisit. Only affects the light variant;
   .mission-bento--dark overrides this background. */
.mission-bento { padding-block: var(--section-pad); background: white; }
.mission-bento .section-header { margin-bottom: var(--head-gap); }
.mbento { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: white; }
.mbento__cell { min-width: 0; border-right: 1px solid var(--line); }
.mbento__cell:last-child { border-right: 0; }
.mbento__viz { position: relative; height: 384px; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); }
.mbento__viz--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mbento__viz--stack::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 108px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(244,245,242,0), var(--surface)); }
.mbento__say { padding: 26px 28px 30px; }
.mbento__say h3 { margin: 0 0 8px; font-size: 22px; font-weight: 450; letter-spacing: -.025em; line-height: 1.18; color: var(--ink); }
.mbento__say p { margin: 0; max-width: 46ch; color: var(--ink-muted); font-size: 13px; line-height: 1.6; }

/* photo overlay — the record forming over the world it describes */
.mbento__overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; overflow: hidden; border-radius: 10px; color: white; background: rgba(6,20,14,.86); }
.mbento__overlay-top { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.mbento__overlay-top span:first-child { color: var(--gx-300); }
.mbento__overlay-top span:last-child { color: rgba(255,255,255,.5); }
.mbento__overlay-top i { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--gx-300); }
.mbento__overlay-body { padding: 11px 12px 12px; }
.mbento__overlay-body > p { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.mbento__overlay-body > div { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11.5px; color: rgba(255,255,255,.6); }
.mbento__overlay-body em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--gx-300); }

/* diagonal stack — offset on both axes, cropped by the viz */
.mcard { position: absolute; width: 66%; border-radius: 10px; overflow: hidden; background: white; box-shadow: 0 2px 6px rgba(6,29,21,.05), 0 24px 54px -10px rgba(6,29,21,.28), inset 0 0 0 1px rgba(23,24,26,.06); }
.mcard--back  { left: 3%;  top: 22px;  bottom: -70px; z-index: 1; }
.mcard--mid   { left: 10%; top: 50px; bottom: -70px; z-index: 2; }
.mcard--front { left: 24%; top: 124px; bottom: -70px; z-index: 3; }
.mcard__head { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.mcard__head--mint { color: var(--gx-600); background: #d8f7e8; border-bottom-color: transparent; }
.mcard__body { padding: 11px 12px; }
.mcard__tl { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 7px 10px; font-size: 11.5px; color: var(--ink-soft); }
.mcard__tl dt { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.mcard__tl dd { margin: 0; }
.mcard__tl s { color: var(--ink-faint); }
.mcard__tl b { color: var(--gx-600); font-weight: 500; }
.mcard--dark { background: #0a2419; box-shadow: 0 2px 6px rgba(6,29,21,.06), 0 26px 58px -10px rgba(6,29,21,.34), inset 0 0 0 1px rgba(255,255,255,.09); }
.mcard--dark .mcard__head { border-bottom-color: rgba(255,255,255,.14); color: rgba(255,255,255,.5); }
.mcard--dark pre { margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--gx-300); white-space: pre-wrap; }
.mcard__chip { display: inline-block; margin-bottom: 7px; padding: 2px 8px; border-radius: 4px; color: var(--gx-600); background: #e8f6ef; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.mcard__h { margin: 0 0 6px; font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.mcard__why { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.mcard__why b { font-weight: 500; color: var(--ink); }
.mcard__row { padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.mcard__row span { margin-right: 8px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

@media (max-width: 900px) {
  .mbento { grid-template-columns: 1fr; }
  .mbento__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .mbento__cell:last-child { border-bottom: 0; }
  .mbento__viz { height: 320px; }
  .mcard { width: 74%; }
}

/* ── TRIAL B · dark colourway for the mission bento ──────────────────────────────
   Structure is untouched; only tone changes, taken from the original missions bento:
   the graphic area sits in the deepest green (#04150f), the text area a step lighter
   (--gx-850), and the section ground between them (--gx-950) — the same three-step
   tonal ladder the canonical-event bento uses. Cards lift off the dark ground by tone
   plus shadow rather than by being white, so the whole thing stays monochrome and mint
   is left doing accent work only. Revert: delete this block and the 05c <section>. */
.mission-bento--dark { background: var(--gx-950); }
.mission-bento--dark .mbento { border-color: rgba(255,255,255,.13); background: var(--gx-850); }
.mission-bento--dark .mbento__cell { border-right-color: rgba(255,255,255,.12); }
.mission-bento--dark .mbento__viz { background: #04150f; border-bottom-color: rgba(255,255,255,.12); }
.mission-bento--dark .mbento__viz--stack::after { background: linear-gradient(180deg, rgba(4,21,15,0), #04150f); }
.mission-bento--dark .mbento__say { background: var(--gx-850); }
.mission-bento--dark .mbento__say h3 { color: white; }
.mission-bento--dark .mbento__say p { color: rgba(255,255,255,.58); }
.mission-bento--dark .mcard { background: var(--gx-850); box-shadow: 0 -1px 6px rgba(0,0,0,.28), 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.09); }
.mission-bento--dark .mcard__head { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.42); }
.mission-bento--dark .mcard__head--mint { color: var(--gx-950); background: var(--gx-300); border-bottom-color: transparent; }
.mission-bento--dark .mcard__tl { color: rgba(255,255,255,.74); }
.mission-bento--dark .mcard__tl dt { color: rgba(255,255,255,.4); }
.mission-bento--dark .mcard__tl s { color: rgba(255,255,255,.3); }
.mission-bento--dark .mcard__tl b { color: var(--gx-300); }
.mission-bento--dark .mcard--dark { background: var(--gx-950); }
.mission-bento--dark .mcard__chip { color: var(--gx-300); background: rgba(94,237,184,.14); }
.mission-bento--dark .mcard__h { color: white; }
.mission-bento--dark .mcard__why { color: rgba(255,255,255,.6); }
.mission-bento--dark .mcard__why b { color: white; }
.mission-bento--dark .mcard__row { border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.mission-bento--dark .mcard__row span { color: rgba(255,255,255,.36); }

/* The second-sentence <em> reads as plain text rather than an accent on these light
   headings. `inherit` rather than a literal so it tracks the heading colour. Scoped to
   the two requested; the dark bento variant keeps its mint <em>, since that is an accent
   on a dark ground rather than green-on-white. NOTE: the same green-on-light <em> device
   is still used by ~29 headings across the six inner pages — rolling this out site-wide
   is one line on `.section-header h2 em`, not more rules like these. */
.home-platforms__intro h2 em,
.mission-bento:not(.mission-bento--dark) .section-header h2 em { color: inherit; }

/* ── Footer · ported from Prism's .prism-foot + .prism-foot-parent ────────────────
   Same structure and metrics: 2fr/1fr/1fr/1fr brand-plus-columns grid at 40px gap,
   17px/550 brand lockup, 13px/1.6 description capped at 280px, 10px mono column titles
   at .1em, 13px links at 50% white. Widths use Globodex's own 1280/56 grid so the footer
   aligns with every other section rather than Prism's flat 48px padding.
   The parent strip mirrors Prism's — Prism's links out to Globodex, so ours links back.
   WORDMARK: "Globodex" has no descenders, so the only thing under the baseline is the
   font's descent space. Pulling the block down by that amount and clipping it at the
   footer puts the letterforms exactly on the bottom edge instead of floating above it. */
.site-footer { position: relative; overflow: hidden; padding-top: 64px; color: white; background: #0b0d0c; border-top: 1px solid rgba(255,255,255,.06); }
.site-footer__top { width: 100%; max-width: var(--max-wide); padding-inline: var(--gutter); box-sizing: border-box; margin: 0 auto 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand-logo { display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 17px; font-weight: 550; letter-spacing: -.01em; }
.site-footer__brand-logo svg { width: 20px; height: 20px; flex-shrink: 0; }
.site-footer__brand-desc { max-width: 280px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.6; }
.site-footer__col-title { margin-bottom: 16px; color: rgba(255,255,255,.55); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__col-link { display: block; padding: 4px 0; color: rgba(255,255,255,.5); font-size: 13px; transition: color .2s; }
.site-footer__col-link:hover { color: white; }
.site-footer__parent { width: 100%; max-width: var(--max-wide); padding-inline: var(--gutter); box-sizing: border-box; margin-inline: auto; padding-block: 24px; border-top: 1px solid rgba(255,255,255,.06); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 20px; }
.site-footer__parent-copy { color: rgba(255,255,255,.55); font-size: 11px; }
.site-footer__parent-center { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.site-footer__parent-logo { display: inline-flex; align-items: center; gap: 10px; transition: opacity .2s; }
.site-footer__parent-logo:hover { opacity: .7; }
.site-footer__parent-logo svg { flex-shrink: 0; }
.site-footer__parent-divider { width: 1px; height: 16px; background: rgba(255,255,255,.12); }
.site-footer__parent-text { color: rgba(255,255,255,.55); font-size: 12px; }
.site-footer__wordmark { width: 100%; max-width: var(--max-wide); padding-inline: var(--gutter); box-sizing: border-box; margin: 30px auto -.19em; color: white; font-size: clamp(90px, 16vw, 230px); font-weight: 390; letter-spacing: -.075em; line-height: 1; white-space: nowrap; user-select: none; }
@media (max-width: 820px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__parent { grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; }
  .site-footer__parent-center { grid-column: 1; gap: 10px 22px; }
  .site-footer__parent-divider { display: none; }
  .site-footer__parent-text { order: 9; flex-basis: 100%; margin-top: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIGNALS HERO · light ground + cropped product screen        [sg-* namespace]
   Signals only — the one light hero on the site. Replaces .page-hero on that
   page (the other product pages keep .page-hero and stay dark).

   The screen is Prism's .pp-embed mechanism: the app is authored on a fixed
   1920×1080 canvas and scaled with transform: scale(100cqw / 1920px). Authoring
   at true desktop dimensions is what makes it read as an application rather
   than a card drawn at card size — rail width, row heights and the type ramp
   are all real app-scale. It's then cropped: anchored bottom:-64px, bleeding
   off the right, top-only corner radius, so it reads as continuing past the
   fold. Content deliberately overruns the crop and is sliced mid-row.
   ══════════════════════════════════════════════════════════════════════════ */
.sg-hero {
  /* Copy column → screen. Prism ships 96px, but its copy column ends in a ragged
     button row (~440px) so 96 reads looser than it measures. Ours ends in a solid
     560px form with a filled button hard against its right edge, so it needs
     materially more air to read the same. Scales so the visible slice of the app
     stays ~1020/1920 canvas px from 1440 through 1880. */
  --screen-gap: clamp(112px, 9vw, 190px);
  position: relative; min-height: 100dvh; display: flex; flex-direction: column;
  overflow: hidden; color: var(--ink); background: var(--paper);
}
/* Same dot geometry as the dark heroes' .page-hero__matrix (18px grid, 1px dot,
   soft radial glow), recoloured: the mint reads as nothing on #f7f8fb, so dots
   step down to --gx-600 at low alpha. Mask fades in further right than the dark
   version (42% vs 32%) so it clears the copy column — it sits at ~10% effective
   opacity behind the copy at every width, and builds to full in the upper right. */
.sg-hero__matrix {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,137,94,.16) 1px, transparent 1.2px),
    radial-gradient(circle at 78% 40%, rgba(0,137,94,.07), transparent 30%);
  background-size: 18px 18px, 100% 100%;
  mask-image: linear-gradient(90deg, transparent 42%, black 74%);
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, black 74%);
}
/* flex, not grid — the screen is positioned against the hero, not a grid cell,
   so the copy column can hold a fixed measure like Prism's 560px. */
.sg-hero__in {
  position: relative; z-index: 3; width: 100%; max-width: var(--max-wide);
  margin: 0 auto; padding: calc(var(--nav-h) + var(--section-pad)) var(--gutter) 0;
  display: flex; align-items: flex-start;
}
.sg-hero__copy { width: 560px; max-width: 560px; flex-shrink: 0; }
.sg-hero__copy h1 {
  max-width: none; margin: 0 0 24px; font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 500; letter-spacing: -.032em; line-height: 1.05; text-wrap: balance;
}
.sg-hero__copy h1 em { color: var(--gx-600); font-style: normal; }
.sg-hero__lede {
  max-width: 520px; margin: 0 0 40px; color: var(--ink-muted);
  font-size: 18px; line-height: 1.62;
}
.sg-hero .hero-note { margin-top: 14px; }

/* ── the cropped screen ─────────────────────────────────────────────────── */
.sg-embed {
  position: absolute; z-index: 2; bottom: -64px;
  left: calc(max(var(--gutter), (100vw - var(--max-wide)) / 2 + var(--gutter)) + 560px + var(--screen-gap));
  width: min(80vw, 1600px); aspect-ratio: 1920 / 1080;
  overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0;
  container-type: inline-size;
  /* On a light ground the screen has no contrast field to sit against — it needs
     a hairline and a lighter-cast shadow or it dissolves into the background. */
  box-shadow: 0 40px 100px -44px rgba(6,29,21,.32), 0 8px 24px rgba(6,29,21,.10),
              inset 0 0 0 1px rgba(23,24,26,.09);
  /* Bottom fade — Prism's .pr-bento__visual--bleed-bottom ramp. A mask, not a
     white overlay: it dissolves the screen (shadow and hairline included) so the
     hero shows through, which survives any background change. The 4 stops ease
     the ramp; a 2-stop gradient reads as a flat wash.

     Stops are px-from-bottom, not Prism's percentages, because this box hangs
     64px below the hero and the hero clips it. On percentages the transparent
     end would land out of sight, so the fade would still be ~30% opaque where
     it actually gets cut — an unfinished fade meeting a hard edge. Anchoring to
     calc(100% - 64px) lands the finish exactly on the visible cut at every
     width, since the embed's height is aspect-driven but the overhang is not. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 260px),
              rgba(0,0,0,.55) calc(100% - 170px), rgba(0,0,0,.14) calc(100% - 100px),
              transparent calc(100% - 64px));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 260px),
              rgba(0,0,0,.55) calc(100% - 170px), rgba(0,0,0,.14) calc(100% - 100px),
              transparent calc(100% - 64px));
}
.sg-app {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform-origin: top left; transform: scale(calc(100cqw / 1920px));
  display: grid; grid-template-columns: 76px 340px 1fr;
  background: var(--white); color: var(--ink);
  font-family: var(--sans); text-align: left;
}

/* ── rail ───────────────────────────────────────────────────────────────── */
.sg-rail {
  background: var(--gx-950); display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 22px 0;
}
.sg-rail__mark {
  width: 34px; height: 34px; margin-bottom: 18px; border-radius: 9px;
  background: var(--gx-300); display: grid; place-items: center;
  color: var(--gx-950); font-size: 17px; font-weight: 600;
}
.sg-rail__mark svg { width: 23px; height: 23px; }
.sg-rail__btn {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  color: rgba(255,255,255,.4); font-size: 19px;
}
.sg-rail__btn.is-on { background: rgba(94,237,184,.14); color: var(--gx-300); }
.sg-rail__spacer { flex: 1; }
.sg-rail__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gx-700);
  display: grid; place-items: center; color: white; font-size: 14px; font-weight: 500;
}

/* ── briefings sidebar ──────────────────────────────────────────────────── */
.sg-side { background: var(--paper); border-right: 1px solid var(--line); padding: 22px 0 0; }
.sg-side__head { padding: 0 20px 16px; display: flex; align-items: center; justify-content: space-between; }
.sg-side__head b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.sg-side__head span { color: var(--ink-faint); font-size: 20px; }
.sg-side__search {
  margin: 0 20px 20px; height: 38px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--white); display: flex; align-items: center;
  gap: 9px; padding: 0 12px; color: var(--ink-faint); font-size: 14px;
}
.sg-side__group {
  padding: 0 20px 9px; color: var(--ink-faint); font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.sg-row { padding: 13px 20px; border-left: 2px solid transparent; display: grid; gap: 5px; }
.sg-row.is-on { background: var(--white); border-left-color: var(--gx-600); }
.sg-row__top { display: flex; align-items: center; gap: 8px; }
.sg-row__tag {
  padding: 2px 7px; border-radius: 4px; background: var(--gx-100);
  color: var(--gx-700); font-family: var(--mono); font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase;
}
.sg-row__time { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.sg-row__title {
  color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 450;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sg-row:not(.is-on) .sg-row__title { color: var(--ink-soft); }

/* ── main panel ─────────────────────────────────────────────────────────── */
.sg-main { position: relative; min-width: 0; display: flex; flex-direction: column; }
.sg-topbar {
  height: 68px; flex-shrink: 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 30px;
}
.sg-crumb { color: var(--ink-faint); font-size: 14px; }
.sg-crumb b { color: var(--ink); font-weight: 450; }
.sg-live {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 12px;
  color: var(--gx-700); font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
.sg-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gx-500);
  box-shadow: 0 0 0 3px rgba(18,168,115,.18);
}
.sg-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sg-faces { display: flex; }
.sg-faces i {
  width: 30px; height: 30px; margin-left: -8px; border-radius: 50%;
  border: 2px solid var(--white); display: grid; place-items: center;
  color: white; font-size: 12px; font-style: normal; font-weight: 500;
}
.sg-pill {
  height: 34px; padding: 0 15px; border: 1px solid var(--line-strong);
  border-radius: var(--r-full); display: grid; place-items: center;
  font-size: 13px; color: var(--ink-soft);
}
.sg-pill--go { border-color: transparent; background: var(--gx-950); color: white; }

.sg-body { flex: 1; min-height: 0; overflow: hidden; padding: 34px 30px 0; }
.sg-doc { max-width: 780px; }
.sg-chip {
  display: inline-block; margin-bottom: 20px; padding: 5px 11px; border-radius: 5px;
  background: var(--gx-100); color: var(--gx-700); font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.sg-doc h2 { margin: 0 0 20px; font-size: 42px; font-weight: 500; letter-spacing: -.024em; line-height: 1.16; }
.sg-doc__why { margin: 0 0 26px; color: var(--ink-soft); font-size: 19px; line-height: 1.55; }
.sg-doc__why b { color: var(--ink); font-weight: 500; }
.sg-card {
  margin-bottom: 13px; padding: 18px 20px; border-radius: 10px;
  background: var(--paper); display: flex; gap: 16px; align-items: baseline;
}
.sg-card--watch { background: transparent; border: 1px dashed var(--line-strong); }
.sg-card > span {
  flex-shrink: 0; color: var(--gx-700); font-family: var(--mono); font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase;
}
.sg-card > p { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.45; }
.sg-card--watch > p { color: var(--ink-soft); }
.sg-sep {
  margin: 30px 0 18px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.sg-ev { padding: 15px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
.sg-ev__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gx-500); flex-shrink: 0; }
.sg-ev__t { font-size: 17px; color: var(--ink); }
.sg-ev__m { margin-left: auto; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }

/* Context panel — sits beyond the right crop at desktop; visible once stacked. */
.sg-ctx {
  position: absolute; top: 68px; right: 0; bottom: 0; width: 360px;
  border-left: 1px solid var(--line); background: var(--paper); padding: 26px 24px;
}
.sg-ctx h3 {
  margin: 0 0 18px; color: var(--ink-faint); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
}
.sg-ctx__item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sg-ctx__item b { display: block; font-size: 15px; font-weight: 450; margin-bottom: 4px; }
.sg-ctx__item span { color: var(--ink-muted); font-size: 13px; }

/* Stacked below the design's max content width — copy on top, screen pinned to
   the bottom and cropped, matching Prism's own sub-1280 hero behaviour. */
@media (max-width: 1280px) {
  .sg-hero { justify-content: space-between; padding-bottom: 0; }
  /* --section-pad, not a constant: this is the whole gap under the nav here */
  .sg-hero__in { display: block; padding: calc(var(--nav-h) + var(--section-pad)) var(--gutter) 0; }
  .sg-hero__copy { width: auto; max-width: none; }
  /* Cap must stay above (1280 - gutter) or the screen stops short of the right
     edge at the breakpoint itself and reads as a floating panel instead of a
     cropped one. Prism's 1180 is tuned to their max width, not ours. */
  .sg-embed {
    position: relative; left: auto; bottom: auto; align-self: flex-start;
    width: min(135vw, 1400px); margin: 32px 0 0 var(--gutter); aspect-ratio: 1920 / 880;
    /* No 64px overhang once stacked — the box's own bottom IS the visible cut,
       so this can use Prism's percentages verbatim. It also has to: the embed is
       only ~241px tall at 390px wide, where the desktop rule's fixed 196px band
       would ghost 81% of the component. Percentages hold the band at 30% of
       whatever height the aspect-ratio produces. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%,
                rgba(0,0,0,.55) 84%, rgba(0,0,0,.14) 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%,
                rgba(0,0,0,.55) 84%, rgba(0,0,0,.14) 95%, transparent 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPECIFICATION COVER · /eds/                            [spec-cover-* scope]
   Ported from globodex-v3/eds-specification.html. Kept from the original: the
   40px blueprint graticule, double hairline rules framing the page, the
   corner-bracket mark, the wireframe globe, and copy anchored to the BOTTOM
   rather than centred — it reads as a document cover, not a product hero.

   Every hard-coded measurement in the original became a token:
     · 72px flat inset     → --edge (the container edge), so frame, mark, globe
                             and copy all land on 136 at 1440 like every page
     · rules at top 48/52  → cleared of the 64px overlay nav, which v3 lacked
     · --g900 #0A2E20      → --gx-900 (identical hex, already a palette token)
     · eyebrow 10px/.14em  → .eyebrow (11px/.18em)
     · title 72/1.0/-.04em → marquee tier, clamp(52px,7vw,96px)/1.02/-.038em
   The original's mint, rgba(94,237,184,·), is --gx-300 exactly — the graticule
   and rules needed no recolouring at all.
   ══════════════════════════════════════════════════════════════════════════ */
.spec-cover {
  /* single source of truth for the content edge — frame, mark, globe and copy
     all hang off this, so nothing can drift out of alignment */
  --edge: max(var(--gutter), calc((100vw - var(--max-wide)) / 2 + var(--gutter)));
  position: relative; min-height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--nav-h) + var(--section-pad)) clamp(72px, 9vh, 104px);
  color: white; background: var(--gx-900);
}
.spec-cover__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(94,237,184,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,237,184,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* v3 drew four absolutely-positioned divs for these; one element with borders
   plus two pseudos draws the same double rules with a quarter of the markup. */
.spec-cover__frame {
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--edge); right: var(--edge);
  top: calc(var(--nav-h) + 26px); bottom: 40px;
  border-top: 1px solid rgba(94,237,184,.15);
  border-bottom: 1px solid rgba(94,237,184,.15);
}
.spec-cover__frame::before,
.spec-cover__frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(94,237,184,.15);
}
.spec-cover__frame::before { top: 3px; }
.spec-cover__frame::after { bottom: 3px; }
.spec-cover__mark {
  position: absolute; z-index: 2; top: calc(var(--nav-h) + 58px); left: var(--edge);
}
.spec-cover__mark svg { width: clamp(38px, 3.6vw, 52px); height: auto; display: block; }
.spec-cover__diagram {
  position: absolute; z-index: 1; top: calc(var(--nav-h) + 64px); right: var(--edge);
  width: clamp(230px, 26vw, 380px); aspect-ratio: 1;
}
.spec-cover__diagram svg { width: 100%; height: 100%; display: block; }

.spec-cover__inner { position: relative; z-index: 3; }
.spec-cover__inner h1 {
  max-width: 15ch; margin: 0 0 16px;
  font-size: clamp(52px, 7vw, 96px); font-weight: 460;
  letter-spacing: -.038em; line-height: 1.02;
}
.spec-cover__lede {
  max-width: 620px; margin: 0 0 clamp(32px, 4vh, 48px);
  color: rgba(255,255,255,.55); font-size: 18px; line-height: 1.6;
}
.spec-cover__inner .button-row { margin-bottom: clamp(38px, 5vh, 60px); }

/* Version / scope / publisher — the document's colophon. */
.spec-cover__meta {
  display: flex; flex-wrap: wrap; gap: 20px clamp(38px, 5vw, 64px);
  margin: 0; font-family: var(--mono); text-transform: uppercase;
}
.spec-cover__meta > div { display: flex; flex-direction: column; gap: 6px; }
.spec-cover__meta dt,
.spec-cover__meta dd {
  margin: 0; font-size: 9px; letter-spacing: .14em; color: rgba(94,237,184,.34);
}
.spec-cover__meta dd { font-size: 11px; letter-spacing: .08em; color: rgba(94,237,184,.62); }

/* Bottom-RIGHT, not centred like v3. The original cover had no CTAs, so its
   centred cue cleared the copy; keeping the Download/Join buttons pushes the
   colophon straight into that space and the two collide. Bottom-right also
   completes the corner composition — mark, globe, copy, cue. */
.spec-cover__scroll {
  position: absolute; z-index: 3; bottom: clamp(72px, 9vh, 104px); right: var(--edge);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
}
.spec-cover__scroll span {
  color: rgba(94,237,184,.35); font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; transition: color .3s var(--ease);
}
.spec-cover__scroll i {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(94,237,184,.2);
  display: grid; place-items: center;
  animation: specBounce 2.4s ease-in-out infinite;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.spec-cover__scroll i svg { width: 13px; height: 13px; }
.spec-cover__scroll:hover span { color: rgba(94,237,184,.7); }
.spec-cover__scroll:hover i { border-color: rgba(94,237,184,.5); background: rgba(94,237,184,.06); }
@keyframes specBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (max-width: 1100px) {
  .spec-cover__diagram { width: 260px; opacity: .55; }
}
@media (max-width: 860px) {
  .spec-cover { padding-block: calc(var(--nav-h) + var(--section-pad)) 72px; }
  .spec-cover__diagram, .spec-cover__scroll { display: none; }
  .spec-cover__frame { top: calc(var(--nav-h) + 18px); bottom: 26px; }
  .spec-cover__mark { top: calc(var(--nav-h) + 44px); }
  .spec-cover__inner h1 { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS · /globodex/                             [hiw-* / gfx-* scope]
   Replaces the retired .globodex-pipeline. That section listed five stages
   (Acquire/Normalize/Resolve/Connect/Publish) whose distinctive claims were
   each already expanded in depth further down the same page — .globodex-state
   covers "without erasing history", .globodex-trust covers evidence and
   rights, .globodex-surfaces covers publishing to products/API/MCP. It was a
   summary strip of things the page says better later. This says the thing the
   page lacked: one real event traced end to end.

   Card system is Prism's .wf-fstep at its real metrics. Two mechanics carry it:
     · body height LOCKED to 224px, so every card's visual starts on the same
       line regardless of how long its copy runs
     · the graphic is sized WIDER than the card so it genuinely overruns, then
       a ::after gradient dissolves it into the card ground right and bottom.
       The crop is the whole look — a graphic that fits inside the frame just
       floats in dead space and the gradient has nothing to act on.
   Prism's #F0F2F7 ground is our --n100 exactly, and their --n500 is our
   --ink-muted, so no colour translation was needed.
   ══════════════════════════════════════════════════════════════════════════ */
.globodex-flow { padding-block: var(--section-pad); background: white; }
.hiw__grid { margin-top: var(--head-gap); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.hiw__step {
  position: relative; display: flex; flex-direction: column; background: var(--n100);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; container-type: inline-size;
}
.hiw__body { flex: 0 0 auto; height: 224px; padding: 26px 24px 0; box-sizing: border-box; }
.hiw__num { margin: 0 0 16px; font-size: 34px; font-weight: 400; line-height: 1; color: var(--ink-faint); letter-spacing: -.01em; font-feature-settings: 'tnum' 1, 'zero' 1; }
.hiw__h { margin: 0 0 8px; font-size: 1.05rem; font-weight: 500; line-height: 1.22; letter-spacing: -.015em; color: var(--ink); }
.hiw__p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.hiw__vis { position: relative; width: 100%; margin-top: 36px; height: calc(100cqw * .625 + 120px); overflow: hidden; }
.hiw__vis::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(to right, transparent 54%, var(--n100) 97%),
              linear-gradient(to bottom, transparent 72%, var(--n100) 100%);
}
.gfx { position: absolute; top: 0; left: 24px; transform-origin: top left; }

/* 01 · feed terminal */
.gfx-term {
  width: 520px; padding: 16px 18px; border-radius: 10px; background: var(--gx-950);
  box-shadow: 0 14px 32px rgba(6,29,21,.18);
  font-family: var(--mono); font-size: 10px; line-height: 1.85; color: rgba(255,255,255,.5); white-space: pre;
}
.gfx-term .on { color: var(--gx-300); }
.gfx-term .hi { color: rgba(255,255,255,.85); }
.gfx-term .dim { color: rgba(255,255,255,.26); }
.gfx-term .cur { display: inline-block; width: 6px; height: 11px; background: var(--gx-300); vertical-align: -1px; }

/* 02 · agents completing the record */
.gfx-enrich { width: 470px; display: grid; gap: 8px; }
.gfx-src { padding: 12px 14px; border-radius: 9px; background: white; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(23,24,26,.06); }
.gfx-src span { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.gfx-src p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.gfx-agent { padding: 9px 12px; border-radius: 8px; background: white; border: 1px solid var(--line); display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; }
.gfx-agent b { color: var(--gx-700); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.gfx-agent span { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.gfx-agent span em { color: var(--ink); font-style: normal; font-weight: 500; }
.gfx-conf { margin-top: 2px; padding: 9px 12px; border-radius: 8px; background: var(--gx-100); display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gx-700); }

/* 03 · the graph the event reaches through. Drawn at intrinsic size, never
   stretched — the nodes are positioned in absolute px, so scaling the svg
   would slide every edge off its node. */
.gfx-graph { width: 480px; height: 340px; position: relative; }
.gfx-graph svg { position: absolute; top: 0; left: 0; }
.gfx-node { position: absolute; padding: 7px 11px; border-radius: var(--r-full); background: white; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; box-shadow: 0 4px 12px rgba(23,24,26,.05); }
.gfx-node--root { background: var(--gx-950); border-color: var(--gx-950); color: var(--gx-300); }
.gfx-node--you { background: var(--gx-100); border-color: rgba(0,137,94,.3); color: var(--gx-700); }

/* 04 · one record, two readers. Stacked, not side by side: at a 280px card two
   columns would each be ~130px, and stacking also makes it tall enough to reach
   the crop. */
.gfx-two { width: 420px; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.gfx-brief, .gfx-api { border-radius: 9px; border: 1px solid var(--line); overflow: hidden; }
.gfx-brief { background: white; box-shadow: 0 10px 24px rgba(23,24,26,.06); }
.gfx-brief__bar { padding: 7px 10px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; }
.gfx-brief__b { padding: 10px; }
.gfx-brief__b b { display: block; font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.gfx-brief__b p { margin: 6px 0 0; font-size: 10px; line-height: 1.45; color: var(--ink-muted); }
.gfx-api { background: var(--gx-950); }
.gfx-api__bar { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; }
.gfx-api pre { margin: 0; padding: 10px; font-family: var(--mono); font-size: 9px; line-height: 1.7; color: rgba(255,255,255,.6); white-space: pre-wrap; }
.gfx-api .k { color: #8fd8ff; }
.gfx-api .s { color: var(--gx-300); }

/* Signals "how it works" graphics (sit in .hiw__vis via .gfx) */
.sig-search { width: 380px; }
.sig-search__box { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: white; box-shadow: 0 12px 28px rgba(23,24,26,.07); font-size: 15px; color: var(--ink); }
.sig-search__box svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.sig-cur { width: 2px; height: 16px; background: var(--gx-600); display: inline-block; animation: sig-blink 1.1s steps(1) infinite; }
@keyframes sig-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sig-cur { animation: none; } }
.sig-search__hint { margin: 11px 4px 16px; color: var(--ink-faint); font-size: 12px; }
.sig-search__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sig-search__chips span { padding: 5px 11px; border-radius: var(--r-full); background: var(--gx-100); color: var(--gx-700); font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.sig-search__chips .ghost { background: white; border: 1px dashed var(--line-strong); color: var(--ink-faint); }
.sig-lbl { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.sig-dossier { width: 430px; }
.sig-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sig-chips span { padding: 7px 12px; border-radius: var(--r-full); background: white; border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--ink-soft); box-shadow: 0 4px 12px rgba(23,24,26,.04); }
.sig-chips .edit { border-color: rgba(0,137,94,.3); color: var(--gx-700); background: var(--gx-100); }
.sig-thresh { width: 400px; }
.sig-thresh__rows { margin: 14px 0; display: grid; gap: 8px; }
.sig-thresh__rows > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 13px; color: var(--ink-soft); }
.sig-thresh__rows > div i { width: 30px; height: 17px; border-radius: 9px; background: var(--line-strong); position: relative; flex: none; }
.sig-thresh__rows > div i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: white; }
.sig-thresh__rows > div.on { border-color: rgba(0,137,94,.28); color: var(--ink); }
.sig-thresh__rows > div.on i { background: var(--gx-600); }
.sig-thresh__rows > div.on i::after { left: 15px; }
.sig-thresh__slide { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sig-thresh__track { flex: 1; height: 4px; border-radius: 2px; background: var(--gx-100); position: relative; }
.sig-thresh__track b { position: absolute; left: 66%; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gx-600); transform: translateX(-50%); box-shadow: 0 2px 6px rgba(0,137,94,.35); }
.sig-brief { width: 320px; border-radius: 11px; border: 1px solid var(--line); background: white; box-shadow: 0 16px 36px rgba(23,24,26,.09); overflow: hidden; }
.sig-brief__bar { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.sig-brief__b { padding: 15px 14px; }
.sig-brief__chip { display: inline-block; margin-bottom: 11px; padding: 3px 8px; border-radius: 5px; background: var(--gx-100); color: var(--gx-700); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.sig-brief__b b { display: block; font-size: 14px; font-weight: 500; line-height: 1.34; color: var(--ink); }
.sig-brief__b p { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
.sig-brief__b p strong { color: var(--ink); font-weight: 500; }
.sig-brief__row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.sig-brief__row span { margin-right: 8px; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sig-brief__src { margin-top: 12px; display: flex; align-items: center; gap: 7px; color: var(--gx-600); font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.sig-brief__src i { width: 5px; height: 5px; border-radius: 50%; background: var(--gx-600); flex: none; }

@media (max-width: 1024px) { .hiw__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .hiw__grid { grid-template-columns: 1fr; }
  .hiw__body { height: auto; padding-bottom: 8px; }
}

/* ── DEVELOPERS · dark page ───────────────────────────────────────────────────
   Sections carry no ground of their own; body.theme-dark provides it, so the
   page reads as one surface and the seam into the footer stays continuous. */
/* developers page tokens — provisional names, pending palette promotion */
:root { --carbon: #0C0F0E; --carbon-raised: #121715; --carbon-code: #070C0A; }
body.theme-dark { background: var(--carbon); }
/* Uniform ground, no dividers. v3 rules off each section, but that is a v3
   convention — our system separates sections by BACKGROUND, and where adjacent
   sections share a ground they simply flow (home-problem → home-thesis are both
   white with nothing between them). --section-pad does the separating; the
   panels carry the structure. */
.dv { position: relative; padding-block: var(--section-pad); color: white; }
.dv .section-header__body { color: rgba(255,255,255,.62); }
.dv h2 em { color: var(--gx-300); font-style: normal; }
/* shared dark panel */
.dv-panel {
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg);
  background: var(--carbon-raised);
}
.dv-panel__head {
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.45); font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
}
/* ══════════════════════════════════════════════════════════════════════════
   HERO · ported from globodex-v3/developers.html, same method as the EDS cover
   Kept from v3: the 56px graticule, the vignette that pulls the edges toward
   black, a scattered dot field, the status pill, the quiet mono jump-link, and
   the event-object card as the aside (NOT the code console — that was the
   biggest reason the first pass read wrong).

   Token mapping — the greens are exact matches, only the ground is not:
     --g300 #5EEDB8  → --gx-300   (identical)
     --g500 #00895E  → --gx-600   (identical)
     --ink  #0C0F0E  → --gx-950   (NOT identical: v3's is a near-black with a
                       faint green cast; ours is #061d15 and reads greener at
                       full-bleed. The vignette recovers most of it. See note.)
   Layout is on OUR grid — v3 used a flat 1080px/48px inset, this uses the
   container edge so the hero lines up with every other page.
   ══════════════════════════════════════════════════════════════════════════ */
.dv-hero {
  position: relative; min-height: 100dvh; display: flex; align-items: center;
  overflow: hidden; color: white; background: var(--carbon);
  background-image: linear-gradient(rgba(94,237,184,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(94,237,184,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  padding-block: calc(var(--nav-h) + var(--section-pad)) var(--section-pad);
}
/* vignette — pulls the edges to near-black so the mint carries */
.dv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 80% 90% at 50% 10%, transparent 40%, rgba(4,10,8,.92) 100%);
}
/* v3 ran an animated canvas here; a static scatter reads the same at rest and
   costs nothing. */
.dv-hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dv-hero__field i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--gx-300); opacity: .5;
}
/* Same model as the Signals hero: the copy is a fixed 560px measure and the
   screen is positioned against the SECTION, not a grid cell — so it can bleed
   off the right and bottom instead of being contained by a column. */
.dv-hero { --screen-gap: clamp(112px, 9vw, 190px); }
.dv-hero__inner {
  position: relative; z-index: 4; width: 100%; max-width: var(--max-wide);
  margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box;
  display: flex; align-items: flex-start;
}
.dv-hero__copy { width: 560px; max-width: 560px; flex-shrink: 0; }
/* the terminal — pinned so only its top-left corner is a finished edge */
/* Geometry matched to the Signals screen EXACTLY — bottom, width and aspect all
   feed the top edge, so any drift in one makes the two heroes sit at different
   heights. Earlier this used 1440/900 at bottom:-56 and stood 62px taller. */
.dv-term {
  position: absolute; z-index: 2; bottom: -64px;
  left: calc(max(var(--gutter), (100vw - var(--max-wide)) / 2 + var(--gutter)) + 560px + var(--screen-gap));
  width: min(80vw, 1600px); aspect-ratio: 1920 / 1080;
  overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--carbon-code);
  border-left: 1px solid rgba(255,255,255,.09); border-top: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.85);
}
.dv-term__bar {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02);
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32);
}
.dv-term__bar em { flex: 1; font-style: normal; }
.dv-term__dots { display: flex; gap: 5px; }
.dv-term__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.13); display: block; }
.dv-term__body {
  margin: 0; padding: 16px 18px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.95; color: rgba(255,255,255,.55); white-space: pre;
}
.dv-term__body .s { color: var(--gx-300); }
.dv-term__body .n { color: #ffcf70; }
.dv-term__body .c { color: rgba(255,255,255,.28); }
/* fade the cut edges so the crop dissolves rather than stopping dead */
.dv-term::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent 74%, rgba(7,12,10,.9) 100%),
              linear-gradient(to right, transparent 78%, rgba(7,12,10,.75) 100%);
}
.dv-hero h1 {
  max-width: 15ch; margin: 0; font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 500; letter-spacing: -.032em; line-height: 1.05; text-wrap: balance;
}
.dv-hero h1 em { color: var(--gx-300); font-style: normal; }
.dv-hero__lede {
  max-width: 560px; margin: 20px 0 0; color: rgba(255,255,255,.45);
  font-size: 16.5px; line-height: 1.7;
}
/* the event object — v3's .ecard */
/* Unpins at 1280 to match the Signals hero. Below that the 560px copy column
   plus the gap leaves too little terminal showing to be worth pinning — and if
   the two heroes stack at different widths they stop reading as one pattern. */
@media (max-width: 1280px) {
  /* flex-direction is the whole fix, and its absence is why this hero did not
     stack while /signals did. .dv-term is a SIBLING of .dv-hero__inner, and
     .dv-hero is display:flex with the default ROW direction — so unpinning the
     terminal to position:relative below only turned it into a flex item BESIDE
     the copy, squeezing the 560px measure instead of releasing it. The media
     query was firing the whole time; the container was laying it out sideways.
     .sg-hero avoids this by being flex-direction: column at base.

     justify-content + padding-bottom:0 then pin the terminal to the bottom of
     the 100dvh hero, which is .sg-hero's stacked behaviour exactly. */
  .dv-hero { flex-direction: column; align-items: stretch;
             justify-content: space-between;
             padding-block: calc(var(--nav-h) + var(--section-pad)) 0; }
  .dv-hero__inner { display: block; }
  .dv-hero__copy { width: auto; max-width: none; }
  .dv-term { position: relative; left: auto; bottom: auto; align-self: flex-start;
             width: min(135vw, 1400px); margin: 40px 0 0 var(--gutter); aspect-ratio: 1920 / 880; }
}
@media (max-width: 900px) {
  /* bottom stays 0 — the terminal's own cut edge is the bottom of the hero */
  .dv-hero { padding-block: calc(var(--nav-h) + var(--section-pad)) 0; }
}
/* The card stretches to the results column; the raw-object tail is flex:1 so it
   absorbs whatever height is left over. No fixed heights anywhere — a taller
   left column simply reveals more JSON, a shorter one reveals less, so the
   dead space at the bottom cannot come back at any viewport. */
.dv-evt { background: var(--carbon-raised); border: 1px solid rgba(255,255,255,.09); border-radius: 15px; padding: 6px; box-shadow: 0 18px 44px rgba(0,0,0,.5); display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
/* The tail must ABSORB height, never create it. Two things enforce that:
   min-height:0 lets the flex item shrink below its content, and the <pre> is
   absolutely positioned so its own height never feeds back into the card. Get
   this wrong and the card drives the row taller than the results column — the
   same dead space, just on the other side. */
.dv-evt__grp--tail { flex: 1; min-height: 64px; position: relative; overflow: hidden; margin-bottom: 0; }
.dv-evt__grp--tail > p { margin: 0; padding: 12px 14px 0; color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.dv-evt__grp--tail pre { position: absolute; top: 36px; left: 0; right: 0; margin: 0; padding: 0 14px; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: rgba(255,255,255,.5); white-space: pre; }
.dv-evt__grp--tail pre .k { color: #8fd8ff; }
.dv-evt__grp--tail pre .s { color: var(--gx-300); }
/* the fade must resolve to the tail's own ground so the JSON dissolves rather than
   being cut — the transparent stop is that same colour at alpha 0, or the ramp
   drifts through a different hue on the way down. */
.dv-evt__grp--tail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(to bottom, rgba(7,12,10,0), var(--carbon-code) 86%); }
.dv-evt__head { padding: 15px 15px 17px; }
.dv-evt__h { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.28; color: #fff; letter-spacing: -.018em; }
.dv-evt__grp { background: var(--carbon); border-radius: 10px; padding: 3px 0; margin-bottom: 6px; }
.dv-evt__grp:last-child { margin-bottom: 0; }
/* The tail carries a request line and raw JSON, so it is a code surface, not a
   reasoning row — it takes the code ground like the terminal and the call
   columns. This must stay BELOW .dv-evt__grp: both classes sit on the same
   element at equal specificity, so source order is what decides. */
.dv-evt__grp--tail { background: var(--carbon-code); }
.dv-evt__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dv-evt__row:last-child { border-bottom: 0; }
.dv-evt__row > i { width: 19px; flex-shrink: 0; text-align: center; font-style: normal; font-size: 12px; color: rgba(94,237,184,.65); }
.dv-evt__row > p { flex: 1; margin: 0; font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.4; }
.dv-evt__row--cut > i { color: rgba(255,156,133,.75); }
.dv-evt__row--cut > p { color: rgba(255,255,255,.55); }
.dv-evt__v { flex-shrink: 0; font-family: var(--mono); font-size: 10px; color: var(--gx-300); }
.dv-evt__v--cut { color: rgba(255,156,133,.75); }
.dv-evt__tail { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 14px; }
.dv-evt__tail > span:first-child { color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.dv-evt__chip { font-family: var(--mono); font-size: 9.5px; padding: 4px 9px; border-radius: 5px; background: rgba(94,237,184,.1); border: 1px solid rgba(94,237,184,.2); color: var(--gx-300); }
/* conformance meter — 3 of 4 lit */
.dv-seg { display: flex; gap: 2px; flex-shrink: 0; }
.dv-seg i { width: 13px; height: 4px; border-radius: 1px; background: rgba(255,255,255,.12); display: block; }
.dv-seg i.on { background: var(--gx-300); }
/* source marks — shared by both panels so the stack is readable */
.dv-av { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-family: var(--mono); font-size: 8px; font-weight: 700; flex-shrink: 0; }
.dv-evt .dv-av { border: 1.5px solid var(--carbon); }
.dv-evt .dv-av + .dv-av { margin-left: -5px; }
.dv-stack { display: flex; flex-shrink: 0; }
/* ── §1 · search vs state — the side-by-side ────────────────────────────── */
.dv-split { margin-top: var(--head-gap); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; align-items: stretch; }
/* minmax(0,1fr) above and min-width:0 here: a 1fr track still honours its
   content's min-content width, and the tail's white-space:pre makes that very
   wide. Without both, the JSON pushes the whole page into horizontal scroll. */
.dv-split > * { min-width: 0; }
/* Labels live OUTSIDE the bento now, flush to its left edge. Each column is a
   flex stack so the panel below still fills the row — that is what keeps the
   card and the results column the same height. */
.dv-split__col { display: flex; flex-direction: column; min-width: 0; }
.dv-split__col > .dv-panel, .dv-split__col > .dv-evt { flex: 1; }
.dv-split__label {
  margin: 0 0 11px; padding: 0 2px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
  color: rgba(255,255,255,.42); font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.dv-split__label--go { color: rgba(94,237,184,.75); }
/* Replaces the header row on the left: says where the five pages came from,
   which nothing on the page did before. */
.dv-query {
  padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 11px;
}
.dv-query > i { font-style: normal; color: rgba(255,255,255,.3); font-size: 11px; }
.dv-query > span:nth-child(2) { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.62); }
.dv-query > span:last-child { flex-shrink: 0; color: rgba(255,255,255,.26); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
/* Absorbs the id + entity + timestamp the removed header used to carry, so the
   group below sheds a row rather than repeating them. */
.dv-evt__ident { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; }
.dv-evt__ident span { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.6); }
.dv-evt__ident span.id { color: var(--gx-300); }
.dv-evt__ident i { width: 1px; height: 11px; background: rgba(255,255,255,.13); display: block; }
.dv-split__mid {
  width: clamp(64px, 7vw, 108px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.dv-split__arrow {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(94,237,184,.28); color: var(--gx-300); font-size: 15px;
}
.dv-split__op {
  writing-mode: vertical-rl; color: rgba(255,255,255,.32);
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
}
/* raw search results */
.dv-res { padding: 6px 0; }
.dv-res__row {
  padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.05);
  display: grid; grid-template-columns: 18px 1fr; gap: 4px 11px; align-items: baseline;
}
/* Source marks match the avatars in the event card — without them the card's
   C / B / S stack and struck-through F are unexplained letters. */
.dv-res__row .dv-av { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.dv-res__row:last-child { border-bottom: 0; }
/* Explicit placement on all three: without grid-column the tag auto-places into
   column 1 and shunts the title across, wrapping the URL. */
.dv-res__t { grid-column: 2; grid-row: 1; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.4; }
.dv-res__u { grid-column: 2; grid-row: 2; color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 10px; }
.dv-foot {
  padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.42); font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
}
/* the resolved event object */
/* ── §2 · three calls — request AND response ────────────────────────────── */
.dv-calls { margin-top: var(--head-gap); display: grid; gap: 16px; }
/* overflow clips the opaque code column to the panel radius — without it the
   square corner pokes out past the rounded card on the right edge. */
.dv-call { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); overflow: hidden; }
.dv-call__l { padding: 24px; border-right: 1px solid rgba(255,255,255,.07); }
.dv-call__n {
  color: rgba(255,255,255,.3); font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.dv-call__l h3 { margin: 12px 0 10px; font-size: 21px; font-weight: 500; letter-spacing: -.015em; }
.dv-call__l p { margin: 0 0 16px; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.55; }
.dv-call__req {
  padding: 11px 13px; border-radius: 8px; background: var(--carbon);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: rgba(255,255,255,.66); word-break: break-all;
}
.dv-call__req b { color: var(--gx-300); font-weight: 500; }
.dv-call__req i { color: rgba(255,255,255,.38); font-style: normal; }
.dv-call__r { padding: 20px 24px; background: var(--carbon-code); overflow: hidden; }
.dv-call__r pre {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.72;
  color: rgba(255,255,255,.6); white-space: pre-wrap; word-break: break-word;
}
.dv-call__r .k { color: #8fd8ff; }
.dv-call__r .s { color: var(--gx-300); }
.dv-call__r .n { color: #ffcf70; }
.dv-call__r .c { color: rgba(255,255,255,.3); }
.dv-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--r-full); border: 1px solid rgba(255,183,0,.3);
  background: rgba(255,183,0,.08); color: var(--amber);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
/* ── §3 · four agent patterns ───────────────────────────────────────────── */
.dv-viz {
  margin-top: auto; padding: 16px; border-radius: var(--r-md);
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.05);
  font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.55);
}
.dv-viz__label {
  color: rgba(255,255,255,.3); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px;
}
.dv-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-chip {
  padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72); font-size: 10.5px;
}
.dv-chip--go { background: rgba(94,237,184,.13); color: var(--gx-300); }
.dv-flow span { color: rgba(255,255,255,.28); }
/* /02 cited draft */
/* /03 edge changed */
/* /04 claim check */
/* ── bento · ported from Prism .pr-bento ──────────────────────────────────
   One bordered container, not four floating cards. Cards carry their own
   right/bottom hairlines and the nth-child rules strip the outer ones, so the
   dividers read as a grid drawn INSIDE one object.

   subgrid is what makes it work: each card is grid-row: span 2 over the
   parent's two rows, so every visual shares one height and every caption
   starts on one line — regardless of how long the copy runs.

   Visuals vary by crop, as Prism does:
     --paper         contained, centred, nothing cropped
     --bleed-bottom  graphic centred, oversized, cut at the bottom
     --bleed-corner  anchored top-left, cut at bottom AND right (two masks
                     composited with mask-composite: intersect)
   Adapted for dark: Prism's paper gradient becomes a faint white lift. */
.dv-bento { margin-top: var(--head-gap); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-lg); overflow: hidden; background: var(--carbon-raised); }
.dv-bento__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.dv-bento__card {
  position: relative; isolation: isolate; display: grid;
  grid-template-rows: subgrid; grid-row: span 2; overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.dv-bento__card:nth-child(2n) { border-right: none; }
.dv-bento__card:nth-last-child(-n+2) { border-bottom: none; }
.dv-bento__visual {
  position: relative; min-height: 300px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.dv-bento__visual--bleed-bottom {
  display: block; min-height: 330px;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.55) 84%,rgba(0,0,0,.14) 95%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.55) 84%,rgba(0,0,0,.14) 95%,transparent 100%);
}
.dv-bento__visual--bleed-bottom > * { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); }
.dv-bento__visual--bleed-corner {
  display: block; min-height: 330px;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.16) 94%,transparent 100%),linear-gradient(to right,#000 0%,#000 64%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.16) 94%,transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.16) 94%,transparent 100%),linear-gradient(to right,#000 0%,#000 64%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.16) 94%,transparent 100%);
  mask-composite: intersect;
}
.dv-bento__visual--bleed-corner > * { position: absolute; top: 28px; left: 28px; }
.dv-bento__cap { padding: 24px 26px 28px; }
.dv-bento__n { display: block; margin-bottom: 12px; color: var(--gx-300); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; opacity: .7; }
.dv-bento__h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -.016em; line-height: 1.25; color: #fff; }
.dv-bento__p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.58); max-width: 44ch; }
@media (max-width: 900px) {
  .dv-bento__grid { grid-template-columns: 1fr; }
  .dv-bento__card { grid-row: auto; display: block; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .dv-bento__card:last-child { border-bottom: none; }
}
/* ── client alerts · twin offset columns ──────────────────────────────────
   Pinned top-left by the --bleed-corner rule and given FIXED widths on purpose:
   fluid columns would reflow as the cell narrows, which destroys the crop. At a
   fixed 614px the right column runs past the frame and the masks fade it, so
   resizing only ever reveals or hides — it never re-lays-out.
   The second column is phase-shifted 48px so no two cards ever align; the eye
   finds no resting row and the feed reads as still arriving. */
.dv-alerts { display: grid; grid-template-columns: 300px 300px; gap: 14px; width: 614px; }
.dv-alerts__col { display: grid; gap: 12px; align-content: start; }
.dv-alerts__col--b { padding-top: 48px; }
.dv-alert {
  background: var(--carbon); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.dv-alert__c { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.dv-alert__c i { width: 5px; height: 5px; border-radius: 50%; background: var(--gx-300); display: block; flex-shrink: 0; }
.dv-alert__c span { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.dv-alert__c em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 8px; color: rgba(94,237,184,.75); }
.dv-alert p { margin: 0; font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.8); }
/* ── claim verdict card ───────────────────────────────────────────────────
   Sized to Prism's contained visual: even padding on the frame, graphic at
   full width. The old version was a 340px card adrift in a 583px frame.
   Three beats now — the claim, the ruling, and the correction to use instead.
   That last block is what the caption promises and the old card never showed. */
.dv-bento__visual:not([class*="--bleed"]) { padding: 26px; box-sizing: border-box; }
.dv-verdict { width: 100%; background: var(--carbon); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 20px 22px; box-sizing: border-box; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.dv-verdict__k { margin: 0; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.dv-verdict__claim { margin: 12px 0 0; font-family: var(--mono); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); font-style: italic; }
.dv-verdict__ruling { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: flex-start; gap: 11px; }
.dv-verdict__ruling > i { font-style: normal; color: #FF9C85; font-size: 13px; line-height: 1.2; flex-shrink: 0; }
.dv-verdict__ruling p { margin: 0; font-size: 13px; line-height: 1.5; color: #FF9C85; }
.dv-verdict__ruling p + p { margin-top: 7px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: rgba(255,255,255,.55); }
.dv-verdict__ruling b { font-weight: 400; color: var(--gx-300); }
.dv-verdict__fix { margin-top: 16px; padding: 12px 14px; border-radius: 9px; background: rgba(94,237,184,.07); border: 1px solid rgba(94,237,184,.18); }
.dv-verdict__fix .dv-verdict__k { color: rgba(94,237,184,.6); }
.dv-verdict__fix p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
/* ── dependency ego graph ─────────────────────────────────────────────────
   Replaces the stacked chip rows, which read as a table rather than a graph.
   your-sku sits at the centre with dashed hop rings around it, so distance
   carries meaning: the lit path runs INWARD from the rim, and the change is
   visibly travelling toward you rather than a caption saying so. */
.dv-graph { }
.dv-graph__l { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; fill: rgba(255,255,255,.5); }
.dv-graph__l--hi { fill: var(--gx-300); }
.dv-graph__l--dim { fill: rgba(255,255,255,.26); }
.dv-graph__ring { font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; fill: rgba(255,255,255,.22); }
.dv-graph__badge { font-family: var(--mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; fill: var(--gx-300); }
/* ── §4 · the receipts gate ─────────────────────────────────────────────── */
/* stretch, not start: the card was ending 82px above the copy, so both the top
   and bottom edges read as accidental. Stretching makes the card a flex column
   whose gate is pushed to the floor by margin-top:auto, and the slack in
   between is spent naming the three sources the card previously only counted. */
.dv-rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(40px, 6vw, 92px); align-items: stretch; }
.dv-rec > .dv-panel { display: flex; flex-direction: column; }
.dv-rec__srcs { margin-top: auto; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.06); display: grid; gap: 9px; }
.dv-rec__srcs > p { margin: 0 0 2px; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); }
.dv-rec__src { display: flex; align-items: center; gap: 10px; }
.dv-rec__src .dv-av { width: 15px; height: 15px; font-size: 7px; }
/* :not(.dv-av) matters — the source mark is itself a <span>, so a bare
   .dv-rec__src span rule gives it flex:1 and stretches the 15px square
   into a bar. */
.dv-rec__src .dv-av { flex: none; }
.dv-rec__src span:not(.dv-av) { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.55); }
.dv-rec__src em { flex-shrink: 0; font-style: normal; font-family: var(--mono); font-size: 8.5px; color: rgba(94,237,184,.7); }
.dv-rec__src em.is-sec { color: rgba(255,255,255,.38); }
.dv-rec__copy p { margin: 0 0 18px; color: rgba(255,255,255,.62); font-size: 18px; line-height: 1.65; }
.dv-rec__copy p b { color: white; font-weight: 450; }
.dv-rec__copy p:last-child { margin-bottom: 0; }
.dv-check { padding: 4px 0; }
.dv-check__row {
  padding: 14px 20px; display: grid; grid-template-columns: 20px 108px 1fr;
  gap: 12px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.05);
}
.dv-check__ok { color: var(--gx-300); font-size: 12px; }
.dv-check__k { color: rgba(255,255,255,.42); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.dv-check__v { color: rgba(255,255,255,.78); font-size: 13px; }
.dv-claimline { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.5; }
/* the punchline v3 had and the current page lost */
.dv-gate {
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(94,237,184,.18); background: rgba(94,237,184,.06);
  font-family: var(--mono); font-size: 12px; color: var(--gx-300);
}
.dv-gate b { color: white; font-weight: 500; }
/* §5 · early access is now .cta-suite--dark, in the design system */
@media (max-width: 1000px) {
  .dv-split { grid-template-columns: 1fr; }
  .dv-split__mid { width: auto; flex-direction: row; padding-block: 18px; }
  .dv-split__op { writing-mode: horizontal-tb; }
  .dv-call { grid-template-columns: 1fr; }
  .dv-call__l { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .dv-rec { grid-template-columns: 1fr; gap: 40px; }
}

/* ── GLOBODEX hero · the record's neighbourhood, bleeding past the right edge ──
   The graph leaves the content column entirely so more of it reveals on wider
   screens. Its left edge is masked rather than cut, so it dissolves toward the
   copy instead of ending in a wall of severed lines. */
.gfx-hero { --graph-gap: clamp(40px, 5vw, 96px); position: relative; overflow: hidden; }
/* .page-hero__stage already pads 64px to clear the fixed nav, so the inner block
   must subtract it — otherwise the section overshoots 100dvh and the graph, which
   centres on the section, drops its lower third below the fold. */
.gfx-hero__in { position: relative; z-index: 3; display: flex; align-items: center;
  min-height: calc(100dvh - var(--nav-h));
  padding-inline: max(var(--gutter), calc((100vw - var(--max-wide)) / 2 + var(--gutter))); }
.gfx-hero__copy { width: 560px; max-width: 560px; flex-shrink: 0; padding-block: 0; }
/* Bottom-anchored with overhang, cropped by .gfx-hero's overflow:hidden — the
   same treatment as .sg-embed on /signals, which uses an identical `left`
   expression and sits at bottom:-64px. Previously this was vertically centred
   (top:50% + translateY(-50%)), so it floated in the middle of the hero instead
   of reading as a large artefact bleeding off the corner. */
.gfx-hero__graph { position: absolute; z-index: 1; bottom: -64px;
  left: calc(max(var(--gutter), (100vw - var(--max-wide)) / 2 + var(--gutter)) + 560px + var(--graph-gap));
  width: min(80vw, 1420px);
  /* fade out where it is cropped — bottom and right — using the same stops as
     .dv-bento__visual--bleed-corner so every bleed on the site matches */
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.16) 94%,transparent 100%),linear-gradient(to right,#000 0%,#000 64%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.16) 94%,transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.16) 94%,transparent 100%),linear-gradient(to right,#000 0%,#000 64%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.16) 94%,transparent 100%);
  mask-composite: intersect; }
.gfx-rg { width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 15%); }
/* label coordinates inside the SVG are collision-solved against every node, edge
   and sibling label — changing these sizes invalidates that solve. */
.gfx-rg__t { font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; fill: rgba(255,255,255,.4); }
.gfx-rg__v { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -.008em; fill: rgba(255,255,255,.92); }
.gfx-rg__e { font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; fill: rgba(94,237,184,.78); }
/* Stacked — copy on top, graph below and cropped. Deliberately the same
   breakpoint and the same treatment as .sg-embed's stacked state on /signals:
   the two heroes are siblings in structure (a copy block and an oversized
   graphic, both children of the hero's stage) and are meant to read alike.

   1280, not Prism's 1180. .sg-embed's note explains why that number does not
   transfer — it is tuned to Prism's max content width, not ours. Written at
   1180 this left a 100px dead band (1181–1280) where the copy column had
   already dropped below its 560px measure but the graph was still in its
   desktop absolute position, so the graphic sat on top of the text. */
@media (max-width: 1280px) {
  /* The stage is a grid. align-content spreads its two rows, pinning the graph to
     the bottom of the hero the way .sg-hero's justify-content: space-between does
     on /signals. minmax(0, 1fr) is load-bearing: the implicit column would
     otherwise be sized to max-content — i.e. to the deliberately oversized graph —
     and the copy block, stretching to that same column, would run off the side of
     the viewport and be clipped by the hero's overflow: hidden instead of
     reflowing. The graph has a definite width so it still overhangs the column. */
  .gfx-hero .page-hero__stage { align-content: space-between; grid-template-columns: minmax(0, 1fr); }
  /* no nav-h here — .page-hero__stage already adds it; this is the gap below it */
  .gfx-hero__in { display: block; min-height: 0; padding-block: var(--section-pad) 0; }
  .gfx-hero__copy { width: auto; max-width: none; position: relative; z-index: 3; }
  .gfx-hero__graph {
    position: relative; inset: auto; transform: none;
    /* Cap held above (1280 - gutter) for the reason given on .sg-embed: below
       that the graph stops short of the right edge at the breakpoint itself and
       reads as a floating panel rather than a cropped one. */
    width: min(135vw, 1400px); max-width: none;
    margin: 32px 0 0 var(--gutter);
    /* Crop via aspect-ratio rather than a vw height: in flow the SVG's full
       1180×760 would be added to the hero and the section grew enormously tall.
       Keeps ~68% of the canvas, matching how .sg-embed keeps 880 of 1080. */
    aspect-ratio: 1180 / 520; overflow: hidden;
    /* Bottom only, and percentages — same ramp as .sg-embed's stacked state.
       The right edge is past the viewport once stacked, so the viewport makes
       that cut and a right-hand fade would only eat into the visible graph. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%,
                rgba(0,0,0,.55) 84%, rgba(0,0,0,.14) 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%,
                rgba(0,0,0,.55) 84%, rgba(0,0,0,.14) 95%, transparent 100%);
    /* must be reset with the mask: the base rule composites two layers, and
       leaving intersect/source-in on a single layer composites it against a
       transparent backdrop and blanks the element entirely. */
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}

/* ── Legal prose: elements the ported Channel 1 legal copy uses that the
   original .legal-page block (L536) never styled. Appended at end of file
   deliberately — this stylesheet has later base rules that defeat earlier
   media queries, so end-of-file placement guarantees these are not shadowed.
   Values derive from the existing .legal-page scale (16px / 1.75 / --ink-muted). */
.legal-page section ul { margin: 0 0 18px; padding-left: 22px; color: var(--ink-muted); font-size: 16px; line-height: 1.75; }
.legal-page section li { margin-bottom: 8px; }
.legal-page section li:last-child { margin-bottom: 0; }
.legal-page section h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 500; color: var(--ink); }
.legal-page section strong { font-weight: 520; color: var(--ink); }
/* the ported Privacy copy opens with a headerless intro section — drop its rule */
.legal-page section:first-of-type { border-top: 0; padding-top: 0; }

/* ── Form feedback + Turnstile (contact + Signals waitlist) ──
   Appended at end of file for the same reason as the legal rules above: this
   stylesheet has later base rules that defeat earlier media queries, so
   end-of-file placement is the only placement that cannot be shadowed. */
.contact-form__note { margin: 0; font-size: 13px; }
.form-success-note { margin: 0; padding: 12px 14px; border-radius: 8px; color: var(--gx-800, #04603f); background: rgba(94,237,184,.16); font-size: 13px; }
/* the waitlist pill sits inside .domain-capture-form; these siblings must not
   become flex children of it, hence the wrapper split in the markup */
.domain-capture-form { width: min(100%, 650px); }
.domain-capture-form .domain-capture { width: 100%; }
.domain-capture__note { min-height: 0; margin: 10px 0 0; color: var(--ink-muted); font-size: 13px; }
.domain-capture__note:empty { display: none; }
.domain-capture__note.form-error { color: #8f281e; }
/* Turnstile is configured invisible on the sitekey, so the container has no
   intrinsic size — keep it out of the layout but never display:none, which
   stops the widget rendering and would make every submit a 403. */
.cf-turnstile { margin: 0; line-height: 0; }
.cf-turnstile:empty { display: none; }

/* ── Home hero · world map pinned left of the copy, cropped off the right ──
   The map is a FIXED-SIZE element whose left edge sits a fixed distance from the
   text column. It never scales with the viewport — a narrower window simply crops
   more off its right-hand side (.home-hero clips it with overflow:hidden), so the
   artwork stays at one constant scale instead of shrinking into the type.

   No breakpoint: the map overlaps the headline at EVERY width (measured 49% even
   at 1440), so a media query only creates a cliff for some viewport to land on
   the wrong side of.

   --hero-copy-right accounts for .container-wide CENTRING: above --max-wide the
   text column is no longer --gutter from the viewport edge, it is centred.
   Ignoring that put the map behind the headline at 1440+.

   --hero-map-ink-inset: the artwork does not start at the SVG's left edge. Pixel-
   scanning the render, the first painted dot sits 73px inside the box at
   --hero-map-w, so the gap you SEE would otherwise be --hero-map-gap plus a slab
   of transparent artwork. Re-measure if --hero-map-w changes. */
:root {
  --hero-copy-max: 720px;
  --hero-map-w: 1040px;                 /* fixed render width — never a % */
  --hero-map-ink-inset: 73px;
  --hero-map-gap: 40px;
  --hero-copy-right: calc(
    max(var(--gutter), (100vw - var(--max-wide)) / 2 + var(--gutter))
    + var(--hero-copy-max));
}
@media (max-width: 1080px) { :root { --hero-copy-max: 640px; } }
@media (max-width: 900px)  { :root { --hero-copy-max: 620px; } }

.home-hero__map {
  left: calc(var(--hero-copy-right) + var(--hero-map-gap) - var(--hero-map-ink-inset));
  right: auto;
  width: var(--hero-map-w);
  max-width: none;
}
.home-hero__viz::after {
  background: linear-gradient(90deg, var(--wm-scrim) 0%, rgba(3,16,11,.35) 34%, rgba(3,16,11,0) 58%);
}

/* Under ~820px there is no room beside the copy, so the map moves ABOVE it: it
   peeks in from the top-right and the copy anchors to the bottom of the hero.
   They no longer overlap, so the map runs at full strength instead of being
   faded to a ghost, and the scrim becomes a vertical ramp.

   min-height is 100dvh, NOT calc(100dvh - var(--nav-h)): the nav is
   position:fixed and takes no layout space, so subtracting its height leaves
   exactly nav-height worth of the next (white) section showing below the fold. */
@media (max-width: 820px) {
  .home-hero {
    min-height: 100svh;
    display: flex; align-items: flex-end;
    padding-top: var(--nav-h); padding-bottom: clamp(32px, 5vh, 56px);
  }
  .home-hero__copy h1 { font-size: clamp(36px, 10.4vw, 46px); line-height: 1.02; margin-bottom: 20px; }
  .home-hero__copy > p:not(.eyebrow) { margin-bottom: 26px; font-size: 16.5px; line-height: 1.55; }
  .home-hero__map {
    top: -3%; right: -22%; left: auto; transform: none;
    width: 124%; max-width: none; opacity: 1;
  }
  .home-hero__viz::after {
    background:
      linear-gradient(180deg,
        rgba(3,15,10,0) 0%,
        rgba(3,15,10,.18) 26%,
        rgba(3,15,10,.75) 44%,
        var(--wm-scrim) 58%);
  }
  .home-hero__inner { width: 100%; }
}

/* Solutions holds two items. Keep the shared 760px panel — same width as Build,
   so the two dropdowns read as one component — and only change the track count,
   so the two items split the space evenly instead of leaving an empty third
   column. Every other Prism token is untouched. */
.nav-dropdown--2col { grid-template-columns: repeat(2, 1fr); }
/* Moving from one trigger to another is a CONTENT swap, not a close-then-open.
   Both panels occupy the identical box (same left/top/size), so with the fade
   suppressed for that one frame the panel reads as static furniture whose
   contents change — Stripe's behaviour — while opening from closed and closing
   keep the transition. */
.nav-menu.is-swapping .nav-dropdown { transition: none; }


/* ── Globodex Core · "what you build on it" ────────────────────────────────
   Reuses the /developers bento verbatim — .section-header--split for the header
   (h2 left, lede right) and .dv-bento > __grid > __card with the visual above
   .dv-bento__cap. Only the colour tokens are re-pointed: .dv-bento is authored
   against --carbon-raised on a dark ground, and this section sits on light.

   No bleed modifiers here on purpose. --bleed-corner ramps its mask from 62%,
   which suits the decorative texture it was built for on /developers; these
   artefacts carry their answer in a right-hand column, so the mask would delete
   the thing you are meant to read. Each artefact is sized to sit inside the card
   instead. ────────────────────────────────────────────────────────────────── */
.gx-build { color: var(--ink); background: var(--surface-warm); }   /* same band as .globodex-trust above it */
.gx-build .dv-bento { margin-top: var(--head-gap, 44px);
  border-color: var(--line); background: #fff; }
.gx-build .dv-bento__card { border-right-color: var(--line); border-bottom-color: var(--line); }
.gx-build .dv-bento__visual { background: linear-gradient(180deg, var(--paper) 0%, #fff 100%); }
.gx-build .dv-bento__h3 { color: var(--ink); }
.gx-build .dv-bento__p  { color: var(--ink-muted); }

/* the artefact inside each card: dark block on a light card, same idea as
   .product-glyph--code on the home page */
.gxb-art { border: 1px solid rgba(23,24,26,.10); border-radius: var(--r-md);
  background: var(--gx-950); box-shadow: 0 22px 50px rgba(23,24,26,.14); }
.gxb-art__head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.42); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; }
.gxb-art__head b { color: var(--gx-300); font-weight: 400; }
.gxb-art__rows { display: grid; }
.gxb-art__rows > div { display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.055);
  font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.55); }
.gxb-art__rows > div:last-child { border-bottom: 0; }
.gxb-art__rows em { font-style: normal; color: rgba(255,255,255,.85); }
.gxb-art__rows em.ok  { color: var(--gx-300); }
.gxb-art__rows em.off { color: rgba(255,255,255,.28); }
.gxb-art__rows em.no  { color: #ff6b5a; }
.gxb-art__code { padding: 14px 16px; color: var(--gx-300);
  font-family: var(--mono); font-size: 11px; line-height: 1.85; }
.gxb-art__code b { color: #fff; font-weight: 400; }
.gxb-art__code i { color: rgba(255,255,255,.38); font-style: normal; }


/* ── Globodex Core · "language is not part of the fact" ────────────────────
   A peer of .globodex-state directly above it: one more property of the record,
   stated the same way. Time IS part of the fact; language is not — the two
   sections are meant to be read as a pair.

   Every block is its own card rather than one ruled container. Containment was
   tried three ways and each turned the four panes into a single component with
   four rows, when the point is four SEPARATE readings of one record.

   The statement is filled --gx-800, the same value .home-platforms uses for a
   large green area — it is the claim the four panes are evidence for, and left
   white it read as an empty box rather than a peer. On the dark ground the
   gx-7f31 reference lands on --gx-300, matching the GX-7F31 labels in the panes,
   so the cross-reference reads as the same token. ─────────────────────────── */
.gx-lang { background: white; }

/* every block is a card in its own right */
.gx-lang .glcard { border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; overflow: hidden; }

.gx-lang .gltop { margin-top: var(--head-gap); display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 12px; align-items: stretch; }
.gx-lang .glsay { padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; justify-content: center; }
.gx-lang .glsay h3 { margin: 0 0 14px; font-size: clamp(1.5rem,2.3vw,2.05rem); font-weight: 500;
  letter-spacing: -.026em; line-height: 1.14; }
.gx-lang .glsay p { margin: 0; color: var(--ink-muted); font-size: clamp(14.5px,1.05vw,16.5px);
  line-height: 1.65; max-width: 44ch; }
.gx-lang .glsay b { font-weight: 400; font-family: var(--mono); font-size: .92em; color: var(--gx-600); }

.gx-lang .glgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gx-lang .glpane { background: var(--surface); display: flex; flex-direction: column; }
.gx-lang .glpane__h { display: flex; justify-content: space-between; padding: 11px 13px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.gx-lang .glpane__h b { color: var(--gx-600); font-weight: 400; }
.gx-lang .glpane__b { padding: 2px 13px 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.gx-lang .glpane__m { margin-top: auto; padding: 0 13px 13px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); }

/* border-top:0 / padding-top:0 explicitly: the implemented .gx-lang .glfoot in
   styles.css carries a --line-strong rule, and without resetting it here the
   old divider bleeds through into this variant. */
.gx-lang .glfoot { margin-top: 12px; padding-top: 0; border-top: 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.gx-lang .glfoot > div { padding: clamp(22px,2.2vw,30px); }
.gx-lang .glfoot h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.gx-lang .glfoot p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.62; }

@media (max-width: 1080px){ .gx-lang .gltop { grid-template-columns: 1fr; } }
@media (max-width: 820px){ .gx-lang .glfoot { grid-template-columns: 1fr; } }
@media (max-width: 640px){ .gx-lang .glgrid { grid-template-columns: 1fr; } }

.gx-lang .glsay { background: var(--gx-800); border-color: var(--gx-800); }
.gx-lang .glsay h3 { color: #fff; }
.gx-lang .glsay p  { color: rgba(255,255,255,.68); }
.gx-lang .glsay b  { color: var(--gx-300); }


/* ── Cookie consent banner (GA4 is consent-gated; logic in main.js) ── */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; max-width: 720px; margin: 0 auto; padding: 18px 22px; background: var(--paper); color: var(--ink); border: 1px solid rgba(23, 24, 26, .1); border-radius: 14px; box-shadow: 0 8px 32px rgba(23, 24, 26, .16); }
.cookie-banner__text { margin: 0; font-size: 13.5px; line-height: 1.55; flex: 1 1 320px; }
.cookie-banner__text a { color: inherit; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner__btn--ghost { background: transparent; border: 1px solid rgba(23, 24, 26, .22); color: var(--ink); }
.cookie-banner__btn--ghost:hover { border-color: var(--gx-600); color: var(--gx-600); }
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: cookie-in .4s var(--ease-out); }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}