/* ================================================================
   IMPAUER NETWORK — PROTOCOL MANIFESTO design system
   Deep blue near-black · ice white · Impauer blue accent
   ================================================================ */
/* the approved site type system: Geist for display and body, Geist Mono for technical text */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');

:root {
  /* official Impauer brand */
  --impauer-black: #000000;
  --impauer-white: #F5F7FA;
  --impauer-silver-light: #D8DCE3;
  --impauer-silver: #A7B0BD;
  --impauer-silver-dark: #737D8C;
  --impauer-divider: #252A32;
  --impauer-blue-dark: #3D8DE3;
  --impauer-blue: #5A9BEA;
  --impauer-blue-light: #70A9EE;
  /* palette */
  --core-dark: #000000;
  --midnight: #000000;
  --navy: #000000;
  --panel: #000000;
  --surface: #000000;
  --mineral: #000000;
  --white: #F5F7FA;
  --cold-white: #060D1C;
  --ink: #F5F7FA;
  --sec-light: #A7B0BD;
  --sec-dark: #A7B0BD;
  --blue: var(--impauer-blue);        /* Impauer blue — the single accent */
  --blue-hi: var(--impauer-blue-light);
  --signal-blue: var(--impauer-blue-light);
  --blue-deep: var(--impauer-blue-dark);
  --signal: #DFF0FF;
  --live: #22D3A6;
  --warn: #FF626D;
  --border-light: #252A32;
  --border-dark: #252A32;
  --border-active: rgba(90, 155, 234, 0.55);
  --grid-line: rgba(190, 214, 255, 0.045);
  /* type — one system, promoted from the approved homepage */
  --font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-technical: "Geist Mono", ui-monospace, monospace;
  --f-display: var(--font-display);
  --f-sans: var(--font-body);
  --f-mono: var(--font-technical);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-display: -0.045em;
  --tracking-heading: -0.035em;
  --tracking-body: -0.01em;
  --tracking-technical: 0.14em;
  /* principle-label states — Impauer palette only, no magenta */
  --principle-inactive: rgba(170, 188, 211, 0.62);
  --principle-upcoming: rgba(126, 145, 171, 0.42);
  --principle-active: #F7FBFF;
  --principle-completed: #70B3FF;
  --principle-blue: #3F8DEB;
  --principle-ice: #DCEBFF;
  /* hero typography — the exact homepage #hero h1 values, shared by every page */
  --hero-title-family: var(--f-display);
  --hero-title-size: clamp(50px, 4.6vw, 82px);
  --hero-title-line-height: 0.98;
  --hero-title-weight: 600;
  --hero-title-letter-spacing: -0.045em;
  /* shared scroll-stage typography scale (reusable across all pages) */
  --stage-measure: 760px;
  --stage-copy-measure: 680px;
  --stage-descriptor-measure: 720px;
  --stage-title-size: clamp(46px, 4.4vw, 76px);
  --stage-title-line-height: 1;
  --stage-title-weight: 550;
  --stage-title-tracking: -0.04em;
  --stage-description-size: clamp(21px, 1.45vw, 27px);
  --stage-copy-line-height: 1.4;
  --stage-descriptor-size: clamp(12px, 0.75vw, 14px);
  --stage-descriptor-tracking: 0.14em;
  --stage-title-gap: clamp(24px, 2vw, 34px);
  --stage-copy-gap: clamp(26px, 2.2vw, 38px);
  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #000000; }
body { margin: 0; background: #000000; color: var(--white); font: 400 17px/1.62 var(--font-body); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hi); }

/* ---- layout ---- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
@media (max-width: 900px) {
  html, body { overflow-x: clip; }
  .wrap, .wrap-wide { padding-inline: max(clamp(20px, 5.5vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right)); }
}
.wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.section { padding: clamp(120px, 14vw, 220px) 0; position: relative; }
.section.tight { padding: clamp(72px, 9vw, 130px) 0; }

/* themes — the entire site lives in the dark world */
.on-light, .on-white { background: var(--navy); color: var(--white); }
.on-dark { background: var(--core-dark); color: var(--white); }
.on-navy { background: var(--navy); color: var(--white); }

/* one hero scale for the whole site */
.site-hero-title {
  font-family: var(--hero-title-family);
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  line-height: var(--hero-title-line-height);
  letter-spacing: var(--hero-title-letter-spacing);
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.site-hero-copy { width: min(100%, 980px); position: relative; z-index: 2; }

/* ---- typography ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px;
  font: var(--weight-medium) clamp(12px, 0.75vw, 14px)/1.2 var(--font-technical); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue); }
.eyebrow::before { content: "◆"; font-size: 8px; color: var(--blue); flex-shrink: 0; }
.h-display { font: 700 clamp(56px, 9vw, 150px)/0.92 var(--f-display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; text-transform: uppercase; }
.h1 { font: var(--weight-semibold) clamp(50px, 4.6vw, 82px)/0.98 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.h2 { font: var(--weight-semibold) clamp(44px, 4vw, 72px)/1 var(--font-display); letter-spacing: -0.038em; margin: 0; text-wrap: balance; }
.h3 { font: 550 clamp(28px, 2.3vw, 42px)/1.12 var(--font-display); letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.lede { font: var(--weight-medium) clamp(21px, 1.45vw, 27px)/1.4 var(--font-body); letter-spacing: -0.015em; color: var(--sec-light); margin: 0; max-width: 58ch; }

/* one page-name / section / body scale for every route */
.bh { font: var(--weight-semibold) clamp(44px, 4vw, 72px)/1 var(--font-display); letter-spacing: -0.038em; margin: 0; text-wrap: balance; }
.bsub { font: 550 clamp(28px, 2.3vw, 42px)/1.12 var(--font-display); letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.bcopy { font: var(--weight-regular) clamp(18px, 1.15vw, 22px)/1.58 var(--font-body); letter-spacing: var(--tracking-body);
  color: var(--sec-light); margin: 0; max-width: 62ch; text-wrap: pretty; }
.slabel, .tagline { font-family: var(--font-technical); font-size: clamp(12px, 0.75vw, 14px);
  font-weight: var(--weight-medium); line-height: 1.2; letter-spacing: var(--tracking-technical); text-transform: uppercase; }

/* wrapping: complete ideas stay together, words never break */
h1, h2, h3, .h-display, .h1, .h2, .h3, .bh, .bsub, .site-hero-title, .display-heading, .section-heading, .chapter-title {
  text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; }
p, .bcopy, .lede, .supporting-copy, .body-copy { text-wrap: pretty; overflow-wrap: normal; word-break: normal; hyphens: none; }
.hl { color: var(--blue); }
.mono-label { font: var(--weight-medium) clamp(12px, 0.75vw, 14px)/1.2 var(--font-technical);
  letter-spacing: var(--tracking-technical); text-transform: uppercase; color: var(--sec-light); }
.sec-head { display: flex; flex-direction: column; gap: 22px; max-width: 840px; margin-bottom: clamp(52px, 6vw, 88px); }

/* ---- components ---- */
.panel { background: var(--panel); border: 1px solid var(--border-dark); border-radius: 2px; padding: 30px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: border-color .22s var(--ease); }
.panel:hover { border-color: var(--border-active); }
.panel h3 { font: 600 19px/1.25 var(--f-display); letter-spacing: -0.012em; margin: 0; }
.panel .idx { font: 500 11px var(--f-mono); letter-spacing: 0.16em; color: var(--blue); }

.dmod { background: var(--panel); border: 1px solid var(--border-dark); border-radius: 2px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: border-color .22s var(--ease); }
.dmod:hover { border-color: var(--border-active); }
.dmod .dlabel { font: 500 10.5px var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sec-light); }
.dmod .dval { font: 500 clamp(26px, 2.4vw, 36px)/1 var(--f-mono); letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.dmod .dval .u { font: 500 0.5em var(--f-mono); color: var(--sec-light); margin-left: 6px; letter-spacing: 0.04em; }
.dmod .dval.accent { color: var(--blue); }

/* numbered list — mono index instead of bullets */
.dlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: dl; }
.dlist li { display: flex; align-items: baseline; gap: 14px; font-size: 15.5px; color: var(--sec-light); line-height: 1.55; }
.dlist li::before { counter-increment: dl; content: counter(dl, decimal-leading-zero); font: 500 11px var(--f-mono); letter-spacing: 0.08em; color: var(--blue); flex-shrink: 0; transform: none; width: auto; height: auto; background: none; }

/* ── action rail ───────────────────────────────────────────────────────────
   Actions sit on the page rather than inside a box: label, a fine blue line,
   and a circular arrow node. One element, one target, no filled rectangle. */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: auto; min-height: 44px; padding: 0; border: 0; background: none; border-radius: 0;
  font: var(--weight-semibold) clamp(12.5px, 0.78vw, 14px)/1.2 var(--font-technical); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--white); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color .34s var(--ease);
}
.btn::before {
  content: ""; order: 1; flex: none; width: 72px; height: 1px; align-self: center;
  background-image: linear-gradient(90deg, rgba(230,242,255,.9), rgba(230,242,255,0) 40%), linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-size: 26px 1px, 100% 1px;
  background-position: -30px 0, 0 0;
  transition: width .34s var(--ease), background-position .42s var(--ease);
}
.btn::after {
  content: "→"; order: 2; flex: none; box-sizing: border-box;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #02060F; border: 1px solid var(--blue);
  font-size: 16px; line-height: 1; padding-left: 0;
  transition: padding-left .34s var(--ease), background .34s var(--ease), box-shadow .34s var(--ease), transform .12s var(--ease), color .34s var(--ease);
}
.btn:hover { color: var(--blue); }
.btn:hover::before { width: 86px; background-position: 100px 0, 0 0; }
.btn:hover::after { padding-left: 8px; box-shadow: 0 0 0 4px rgba(61,141,227,.16); }
.btn:active::after { transform: scale(.96); transition-duration: .08s; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
@media (max-width: 480px) {
  .btn { min-height: 52px; width: 100%; justify-content: space-between; }
  .btn::before { flex: 1; width: auto; }
}
/* the arrow now lives in the node, so any inline glyph steps aside */
.btn .arr { display: none; }
.btn-primary { background: none; color: var(--white); border: 0; }
.btn-primary:hover { filter: none; color: var(--blue); }
/* secondary reads lighter: shorter titanium line, outlined node */
.btn-secondary { background: none; color: rgba(233,240,250,.86); border: 0; }
.btn-secondary::before { width: 44px;
  background-image: linear-gradient(90deg, rgba(230,242,255,.7), rgba(230,242,255,0) 40%), linear-gradient(rgba(120,150,196,.85), rgba(120,150,196,.85)); }
.btn-secondary::after { background: transparent; color: var(--blue); border-color: rgba(120,150,196,.75); width: 38px; height: 38px; font-size: 15px; }
.btn-secondary:hover { color: var(--blue); }
.btn-secondary:hover::before { width: 54px; }
.btn-secondary:hover::after { border-color: var(--blue); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { background-image: linear-gradient(var(--blue), var(--blue)); background-size: 100% 1px; }
  .btn, .btn::before, .btn::after { transition: none; }
}
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.link-arrow .arr { transition: transform .2s var(--ease); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 2px; border: 1px solid var(--border-dark); background: rgba(190,214,255,0.02); font: 500 10.5px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sec-light); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #55503F; }
.pill.live { color: var(--live); border-color: rgba(34, 211, 166, 0.3); }
.pill.live .dot, .pill.on .dot { background: var(--live); animation: pulse 2s ease-out infinite; }
.pill.err { color: var(--warn); border-color: rgba(255, 98, 109, 0.3); }
.pill.err .dot { background: var(--warn); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 166, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(34, 211, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 166, 0); } }

/* grid backgrounds */
.gridbg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000, transparent 78%); mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000, transparent 78%); }

.rule { border: none; border-top: 1px solid var(--border-dark); margin: 0; }

/* ================= NAV — terminal control bar ================= */
.site-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: #000000; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-dark); }
.site-nav .nav-inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
@media (max-width: 900px) {
  .site-nav .nav-inner { padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}
.site-nav .logo-chip { display: inline-flex; background: transparent; border: none; border-radius: 0; padding: 0; flex-shrink: 0; }
.site-nav .logo-chip img { width: clamp(125px, 12vw, 170px); height: auto; object-fit: contain; display: block; }
.site-nav .nav-links { display: flex; gap: 4px; align-items: center; }
.site-nav .nav-links a { position: relative; padding: 8px 15px; white-space: nowrap;
  font: var(--weight-medium) clamp(12px, 0.75vw, 13.5px)/1.2 var(--font-technical); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec-light); border-radius: 2px; transition: color .2s; }
.site-nav .nav-links a:hover { color: var(--white); }
.site-nav .nav-links a.active { color: var(--white); }
.site-nav .nav-links a.active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 2px; background: var(--blue); }
/* navigation: same rail, compact — outlined node that fills on hover */
.site-nav .nav-cta { height: 44px; min-height: 44px; padding: 0; letter-spacing: 0.13em; gap: 9px; }
.site-nav .nav-cta::before { width: 22px; }
.site-nav .nav-cta:hover::before { width: 30px; }
.site-nav .nav-cta::after { width: 32px; height: 32px; font-size: 13.5px; background: transparent; color: var(--blue); }
.site-nav .nav-cta:hover::after { background: var(--blue); color: #02060F; }
/* the longer JOIN THE NETWORK label keeps the nav single-line at tight desktop
   widths by dropping the rail and leaving the arrow node */
@media (max-width: 1100px) {
  .site-nav .nav-cta { letter-spacing: 0.09em; gap: 7px; }
  .site-nav .nav-cta::before { display: none; }
}
.site-nav .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--border-dark); border-radius: 2px; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; }
.site-nav .menu-btn span { display: block; width: 18px; height: 1.6px; background: var(--white); transition: transform .25s var(--ease), opacity .2s; }
body.menu-open .site-nav .menu-btn span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
body.menu-open .site-nav .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .site-nav .menu-btn span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* mobile menu — full-screen terminal */
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; background: #000000; display: flex; flex-direction: column; padding: 32px clamp(20px, 6vw, 48px); gap: 4px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; overflow-y: auto; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 20px 4px; font: 600 28px var(--f-display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--white); border-bottom: 1px solid var(--border-dark); }
.mobile-menu a .mn { font: 500 11px var(--f-mono); letter-spacing: 0.16em; color: var(--sec-light); }
.mobile-menu a.active { color: var(--blue); }
.mobile-menu .btn { margin-top: 28px; min-height: 56px; }
.mobile-menu { padding-bottom: max(32px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.mobile-menu a { min-height: 56px; }
.mobile-menu a:active { color: var(--blue); }
.mobile-menu a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (max-width: 900px) {
  .site-nav .nav-links, .site-nav .nav-cta { display: none; }
  .site-nav .menu-btn { display: flex; }
}
@media (min-width: 901px) { .mobile-menu { display: none; } }

/* ================= PAGE CTA + PRE-FOOTER + GLOBAL FOOTER ================= */
.pcta { padding: clamp(96px, 12vw, 190px) 0; background: #000000; }
.pcta .pcta-inner { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }
.pcta h2 { margin: 0; font: 800 clamp(36px, 4.8vw, 76px)/0.98 var(--f-display); letter-spacing: -0.032em; color: var(--white); text-wrap: balance; }
.pcta .pcta-sub { margin: 0; font: 400 clamp(17px, 1.4vw, 21px)/1.6 var(--f-sans); color: var(--sec-light); max-width: 720px; }
.pcta .pcta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.pcta .btn { height: auto; min-height: 48px; padding: 0; }
.pcta .btn::before { width: 96px; }
.pcta .btn:hover::before { width: 112px; }
/* ── global footer — one shared component, centred and compact ─────────────
   Rendered once per page by initGlobalFooter() in site.js; these are the only
   footer styles in the system, so every route is identical. */
.gfooter, .gfooter.site-footer { position: relative; overflow: hidden; color: #AAB5C6;
  border-top: 1px solid rgba(112,179,255,.15);
  padding: clamp(72px, 7vw, 104px) 0 clamp(28px, 3vw, 44px);
  background:
    radial-gradient(circle at 78% 15%, rgba(63,141,235,.07), transparent 34%),
    linear-gradient(180deg, #07101A 0%, #030507 26%, #020304 100%); }
/* a light section above the footer fades through charcoal, never a hard edge */
.section-light + .gfooter::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(120px, 14vw, 180px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #F2F6FB 0%, #DCE1E7 28%, #72777D 55%, #171A1E 78%, #030507 100%); }
.gfooter .gf-cube { position: absolute; top: clamp(8px, 2vw, 42px); right: clamp(-220px, -10vw, -110px);
  width: clamp(420px, 34vw, 680px); height: auto; opacity: .045; pointer-events: none; user-select: none; z-index: 0;
  mask-image: linear-gradient(145deg, transparent 0%, rgba(0,0,0,.6) 30%, #000 58%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(145deg, transparent 0%, rgba(0,0,0,.6) 30%, #000 58%, #000 78%, transparent 100%); }
.gfooter .wrap-wide { position: relative; z-index: 1; width: min(1440px, calc(100% - 96px)); max-width: none;
  margin-inline: auto; padding: 0; }
.gfooter .gf-grid { display: grid; justify-content: center; align-items: start;
  grid-template-columns: minmax(300px, 1.3fr) minmax(max-content, .85fr) minmax(max-content, .85fr);
  gap: clamp(40px, 5vw, 96px); }
.gfooter .gf-brand { display: grid; gap: 18px; text-align: left; max-width: 46ch; }
.gfooter .gf-brand h3 { margin: 0; font-family: var(--f-display); font-size: clamp(1.25rem, 1.5vw, 1.65rem);
  line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; color: #F2F7FF; }
.gfooter .gf-brand p { margin: 0; font-family: var(--f-sans); font-size: clamp(1rem, 1.05vw, 1.2rem);
  line-height: 1.65; font-weight: 400; color: #AAB5C6; max-width: 46ch; }
.gfooter .gf-col { text-align: center; }
.gfooter .gf-col h4 { margin: 0 0 22px; font-family: var(--f-mono); font-size: clamp(0.72rem, 0.78vw, 0.9rem);
  font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #7FA8DA; }
.gfooter .gf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 22px; align-items: center; }
.gfooter .gf-col a { font-size: clamp(0.95rem, 1vw, 1.05rem); color: #B8C4D4; white-space: nowrap; transition: color 200ms var(--ease); }
.gfooter .gf-col a:hover { color: #70B3FF; }
.gfooter .gf-col a:active { color: #FFFFFF; }
.gfooter .gf-col a:focus-visible { outline: 2px solid #70B3FF; outline-offset: 3px; color: #FFFFFF; }
.gfooter .gf-bar { position: relative; z-index: 1; width: min(1440px, calc(100% - 96px)); margin: 0 auto;
  margin-top: clamp(56px, 6vw, 88px); padding: 26px 0 0; border-top: 1px solid rgba(112,179,255,.13);
  display: flex; justify-content: center; align-items: center; gap: 14px clamp(24px, 3vw, 48px);
  flex-wrap: wrap; font-size: 13px; color: #7E8EA6; }
.gfooter .gf-status { display: inline-flex; align-items: center; gap: 9px; font: 500 12px var(--f-mono);
  letter-spacing: 0.12em; color: #AAB5C6; }
.gfooter .gf-status .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 2s ease-out infinite; display: none; }
.gfooter .gf-status.live .sdot { display: inline-block; }
.gfooter .gf-legal { display: flex; gap: clamp(18px, 2vw, 28px); flex-wrap: wrap; align-items: center; justify-content: center; }
.gfooter .gf-legal a { color: #8E9CB2; font-size: 13px; transition: color 200ms var(--ease); }
.gfooter .gf-legal a:hover { color: #70B3FF; }
.gfooter .gf-legal a:focus-visible { outline: 2px solid #70B3FF; outline-offset: 3px; color: #FFFFFF; }
/* social links: monochrome mark and label, no card, no branded colour */
.gfooter .gf-social { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
.gfooter .gf-social a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-size: clamp(14px, 0.85vw, 16px); font-weight: 500; color: #8E9CB2;
  transition: color 200ms var(--ease), transform 200ms var(--ease); }
.gfooter .gf-social a svg { display: block; flex: none; }
.gfooter .gf-social a:hover { color: #70B3FF; transform: translateY(-2px); }
.gfooter .gf-social a:focus-visible { outline: 2px solid #70B3FF; outline-offset: 3px; color: #FFFFFF; }
/* the mobile footer component is inert everywhere except phone widths, where
   mobile.css reveals it and hides the grid above — desktop is never affected */
.gfooter .gf-m { display: none; }
@media (max-width: 720px) {
  /* copyright and legal first, the social row beneath them */
  .gfooter .gf-social { justify-content: center; gap: 20px; width: 100%; }
}
@media (max-width: 1080px) {
  .gfooter .wrap-wide, .gfooter .gf-bar { width: min(1440px, calc(100% - 48px)); }
  .gfooter .gf-grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: clamp(40px, 5vw, 64px); }
  .gfooter .gf-brand { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 900px) {
  .gfooter .gf-grid a, .gfooter .gf-bar a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 620px) {
  .gfooter .gf-grid { grid-template-columns: 1fr; }
  .gfooter .gf-brand { text-align: center; justify-items: center; margin-inline: auto; }
  .gfooter .gf-brand p { margin-inline: auto; }
  .gfooter .gf-cube { width: clamp(280px, 60vw, 380px); opacity: .035; }
  .gfooter .gf-bar { flex-direction: column; gap: 14px; }
}
@media (max-width: 480px) { .gfooter .gf-cube { display: none; } }
@media (prefers-reduced-motion: reduce) { .gfooter .gf-status .sdot { animation: none; } }

/* ================= FOOTER ================= */
.site-footer { background: var(--core-dark); color: var(--sec-light); padding: clamp(56px, 7vw, 88px) 0 40px; position: relative; overflow: hidden; border-top: 1px solid var(--border-dark); }
.site-footer .fgrid { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer .fcol { display: flex; flex-direction: column; gap: 13px; }
.site-footer .fcol .ftitle { font: 500 10.5px var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #64789A; margin-bottom: 4px; }
.site-footer .fcol a { font-size: 14px; color: var(--sec-light); }
.site-footer .fcol a:hover { color: var(--white); }
.site-footer .fbase { border-top: 1px solid var(--border-dark); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #64789A; }

/* ================= MOTION ================= */
/* When the document timeline never advances (backgrounded or embedded views),
   site.js sets .anim-stalled: motion is dropped and every gated element paints
   its finished state, so nothing is left invisible waiting for a frame. */
html.anim-stalled *, html.anim-stalled *::before, html.anim-stalled *::after {
  animation-duration: 0s !important; animation-delay: 0s !important;
  transition-duration: 0s !important; transition-delay: 0s !important; }
html.anim-stalled [data-rv],
html.anim-stalled .subpage-hero__eyebrow, html.anim-stalled .subpage-hero__title,
html.anim-stalled .subpage-hero__product, html.anim-stalled .subpage-hero__subtitle,
html.anim-stalled .subpage-hero__body, html.anim-stalled .subpage-hero__tagline,
html.anim-stalled .subpage-hero__actions, html.anim-stalled .subpage-hero__visual {
  opacity: 1 !important; transform: none !important; }
[data-rv] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
[data-rv].in { opacity: 1; transform: none; }
[data-rv="left"] { transform: translateX(-28px); }
[data-rv="right"] { transform: translateX(28px); }
[data-rv="left"].in, [data-rv="right"].in { transform: none; }
[data-rv="fade"] { transform: none; }
[data-rv="line"] { transform: scaleX(0); transform-origin: left; }
[data-rv="line"].in { transform: none; }
/* mask box must be taller than the ink box — sub-1 line-heights otherwise crop glyphs.
   Padding clears the ascender/descender; the negative margin keeps the optical leading. */
/* Masked line reveal.
   Driven by a keyframe animation with fill-mode forwards — NOT a transition — so the
   finished state is authoritative even if the animation is created mid-layout-change.
   Padding lives on the span so the ink clearance and the 110% travel share one box. */
/* Line reveal removed: the masked-slide mechanism could latch at currentTime 0 and hold
   the pre-reveal offset, hiding headlines permanently. Headlines now always render. */
.lineclip { display: block; }
.lineclip > span { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rv], .lineclip > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* focus */
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }


/* ================= SECTION ATMOSPHERES =================
   .atm — low-opacity meaning-driven backdrops. Decorative only. */
.hp-section { position: relative; }
header#hero { position: relative; }
header#hero > *:not(.atm):not(.hfx) { position: relative; z-index: 1; }
.section > .wrap, .section > .wrap-wide, .hp-section > .wrap, .hp-section > .wrap-wide { position: relative; z-index: 1; }
.atm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.atm::before, .atm::after { content: ""; position: absolute; inset: 0; }

/* activity field — sparse node dots + soft haze */
.atm-field::before { background-image: radial-gradient(circle, rgba(90,155,234,0.16) 1px, transparent 1.6px); background-size: 92px 92px; -webkit-mask-image: radial-gradient(ellipse 75% 85% at 55% 45%, #000, transparent 80%); mask-image: radial-gradient(ellipse 75% 85% at 55% 45%, #000, transparent 80%); animation: atmPan 46s linear infinite; }
.atm-field::after { background: radial-gradient(ellipse 42% 55% at 68% 42%, rgba(61,141,227,0.07), transparent 72%); }
@keyframes atmPan { to { background-position: 92px 46px; } }

/* intelligence field — node dots + slow diagonal signal sweep */
.atm-intel::before { background-image: radial-gradient(circle, rgba(90,155,234,0.14) 1px, transparent 1.6px), radial-gradient(circle, rgba(216,220,227,0.07) 1px, transparent 1.5px); background-size: 118px 118px, 74px 74px; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 62% 40%, #000, transparent 82%); mask-image: radial-gradient(ellipse 80% 90% at 62% 40%, #000, transparent 82%); animation: atmPan 52s linear infinite; }
.atm-intel::after { background: linear-gradient(105deg, transparent 46%, rgba(90,155,234,0.05) 50%, transparent 54%), radial-gradient(ellipse 40% 55% at 70% 38%, rgba(61,141,227,0.07), transparent 72%); background-size: 300% 100%, 100% 100%; animation: atmSweep 26s ease-in-out infinite; }
@keyframes atmSweep { 0%, 12% { background-position: 120% 0, 0 0; } 55%, 100% { background-position: -30% 0, 0 0; } }

/* live field — horizontal light movement + soft depth, no lattice */
.atm-grid::before { background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(61,141,227,0.06), transparent 70%), radial-gradient(ellipse 80% 60% at 80% 90%, rgba(10,19,34,0.8), transparent 75%); }
.atm-grid::after { background: linear-gradient(100deg, transparent 40%, rgba(90,155,234,0.05) 50%, transparent 60%); background-size: 320% 100%; animation: atmBand 24s ease-in-out infinite; }
@keyframes atmBand { 0%, 10% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

/* convergence — radial spokes drawing toward one point */
.atm-converge::before { inset: -30% -20%; border: 1px solid rgba(90,155,234,0.055); border-radius: 50%; -webkit-mask-image: linear-gradient(115deg, #000 30%, transparent 60%); mask-image: linear-gradient(115deg, #000 30%, transparent 60%); animation: atmOrbit 110s linear infinite; }
.atm-converge::after { background: radial-gradient(ellipse 26% 34% at 50% 52%, rgba(61,141,227,0.09), transparent 70%); animation: atmBreathe 18s ease-in-out infinite; }
@keyframes atmBreathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* old/new split — fragmented left, flowing right */
.atm-split::before { background: radial-gradient(ellipse 26% 40% at 12% 30%, rgba(10,19,34,0.9), transparent 70%), radial-gradient(ellipse 20% 30% at 30% 72%, rgba(7,12,22,0.85), transparent 68%), radial-gradient(ellipse 18% 26% at 8% 78%, rgba(167,176,189,0.03), transparent 70%); }
.atm-split::after { background: radial-gradient(ellipse 46% 66% at 88% 50%, rgba(61,141,227,0.08), transparent 74%), radial-gradient(ellipse 30% 44% at 72% 34%, rgba(90,155,234,0.04), transparent 70%); animation: atmBreathe 24s ease-in-out infinite; }

/* open field — unrestricted space, lines running past the viewport */
.atm-open::before { background:
  linear-gradient(7deg, transparent 49.8%, rgba(167,176,189,0.07) 50%, transparent 50.2%),
  linear-gradient(-4deg, transparent 49.85%, rgba(90,155,234,0.06) 50%, transparent 50.15%); }
.atm-open::after { background: radial-gradient(ellipse 60% 70% at 30% 60%, rgba(61,141,227,0.05), transparent 75%); animation: atmBreathe 26s ease-in-out infinite; }

/* layered stack — horizontal system strata */
.atm-layers::before { background: linear-gradient(180deg, transparent 8%, rgba(10,19,34,0.55) 30%, transparent 46%, rgba(7,12,22,0.6) 66%, transparent 88%), radial-gradient(ellipse 60% 40% at 50% 18%, rgba(90,155,234,0.035), transparent 72%); }
.atm-layers::after { background: linear-gradient(180deg, transparent, rgba(90,155,234,0.045) 50%, transparent), radial-gradient(ellipse 36% 50% at 50% 50%, rgba(61,141,227,0.06), transparent 72%); background-size: 100% 340px, 100% 100%; background-repeat: no-repeat; background-position: 0 -340px, 0 0; animation: atmDrift 28s linear infinite; }
@keyframes atmDrift { 0%, 40% { background-position: 0 -340px, 0 0; } 100% { background-position: 0 calc(100% + 340px), 0 0; } }

/* economic loop — slow circulating orbits */
.atm-loop::before { inset: -20% -10%; border: 1px solid rgba(90,155,234,0.06); border-radius: 50%; transform-origin: 50% 50%; animation: atmOrbit 90s linear infinite; }
.atm-loop::after { inset: -6% 12% -30% 12%; border: 1px solid rgba(167,176,189,0.055); border-radius: 50%; animation: atmOrbit 130s linear infinite reverse; }
@keyframes atmOrbit { to { transform: rotate(360deg); } }

/* stillness — one quiet light source */
.atm-still::after { background: radial-gradient(ellipse 44% 55% at 50% 62%, rgba(61,141,227,0.09), transparent 72%); animation: atmBreathe 22s ease-in-out infinite; }
.atm-still::before { background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.5)); }

@media (max-width: 760px) { .atm::before { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .atm::before, .atm::after { animation: none !important; } }

/* footer navigation */
.site-footer .fgrid { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 90px); justify-content: space-between; }
.site-footer .fnav { display: flex; flex-direction: column; gap: 12px; }
.site-footer .fnav a { font: 500 11px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8CA0BE; text-decoration: none; transition: color 300ms var(--ease); }
.site-footer .fnav a:hover { color: var(--impauer-blue); }


/* ================================================================
   PURE BLACK FOUNDATION
   Phase reset: every page and section sits on one continuous #000000.
   Brand tokens are retained for FOREGROUND accents only — no background
   gradients, glows, ambient fields, or section-to-section transitions.
   ================================================================ */
:root {
  /* ---- colour tokens (blue values sampled from the official logo) ---- */
  --env-blue: #5A9BEA;            /* primary  — logo mid blue          */
  --env-blue-electric: #3D8DE3;   /* electric — logo deep blue         */
  --env-blue-ice: #BFDBFF;        /* icy highlight                     */
  --env-navy: #000000;            /* deep navy atmosphere              */
  --env-black: #000000;           /* near-black                        */
  --env-surface: #000000;         /* surface black                     */
  --env-white: #F5F7FA;           /* soft white                        */
  --env-silver: #C9D2DE;          /* metallic silver                   */
  --env-ink: #05080E;             /* type colour on light environments */
  --env-border: rgba(190, 214, 255, 0.10);
  --env-border-strong: rgba(190, 214, 255, 0.20);

  /* ---- material tokens ---- */
  --env-glass: transparent;
  --env-glass-strong: transparent;
  --env-glass-blur: 18px;
  --env-glow: 0.5;                /* master glow intensity 0–1         */
  --env-motion: 1;                /* master motion intensity 0–1       */

  /* ---- rhythm tokens ---- */
  --env-pad: clamp(120px, 14vw, 210px);
  --env-bleed: 30vh;              /* how far light spills between envs */
  --env-radius: clamp(24px, 3.6vw, 64px);
  --env-t: 1200ms;
  --env-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* every environment resolves to the same pure black */
[data-env] { position: relative; background: #000000 !important; color: var(--env-white); }
[data-env="soft-white"] { color: var(--env-white); }

/* decorative background layers are fully removed from the render */
.env-light,
.env-seam,
.atm,
#hero .hbg, #hero .hglow, #hero .hveil, #hero .lum, #hero .refract, #hero .glass, #hero .dataline,
#hero .hfx > *:not(canvas),
#fly-bg, .fly-glow,
#future .fut-field, #future .fut-aura,
#freedom .haze, #lib,
#foundation .farch::before,
#oe-canvas, #orings,
/* hero decorative artwork layers (product pages) */
#hero .hfx, #hero canvas, #hero .veil, #hero .plx,
/* glow fields sitting behind diagrams */
.g-halo, .m-halo, .f-halo, .i-halo, .o-halo, .eco-halo, .sp-glow, .exp-halo, .exp-grid,
.eco-rings, .fut-aura,
/* noise / texture overlays */
.amb-tex, .noise, .grain { display: none !important; }

/* foreground panels: true black with structural borders only */
.fut-panel, .panel, .card, .dmod, .fcell, .stat-card, .pf-wrap {
  background: #000000 !important; background-image: none !important; box-shadow: none !important;
}
.feature-row { background: var(--border-dark) !important; background-image: none !important; }

/* no alternating fills, no banding, no section-level colour */
.hp-section, .section, .rvsec { background: #000000; }
.hp-section + .hp-section { border-top: 0; }

/* foreground surfaces: true black, structure from borders only */
.glass { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--env-border); }

.lineclip { display: block; }
.lineclip > span { display: block; }

/* ── mobile story reveals: stages fade up as they enter, mute once passed ── */
@media (max-width: 900px) {
  .m-rv > * { opacity: 0 !important; transform: translateY(16px) !important;
    transition: opacity .6s var(--ease), transform .6s var(--ease) !important; }
  .m-rv > *:nth-child(2) { transition-delay: .08s !important; }
  .m-rv > *:nth-child(n+3) { transition-delay: .16s !important; }
  .m-rv.m-in > * { opacity: 1 !important; transform: none !important; }
  .m-rv.m-in.m-past > * { opacity: .55 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .m-rv > *, .m-rv.m-in > * { opacity: 1 !important; transform: none !important; transition: opacity .3s linear !important; }
  .m-rv.m-in.m-past > * { opacity: 1 !important; }
}

/* ═════════════════ JOIN THE NETWORK — conversion layer ═════════════════
   One form component, three placements (primary section, pre-footer band,
   modal). Every instance posts to the same endpoint and the same lead store.
   Built from the existing action-rail grammar: mono label, fine blue line,
   circular arrow node — no marketing buttons, no newsletter cards. */

.jn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- the form ---- */
.jn-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  align-items: center; width: 100%; max-width: 560px; margin: 0; }
.jn-form .jn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jn-field { position: relative; display: flex; align-items: center; min-width: 0; }
.jn-input { width: 100%; min-width: 0; min-height: 58px; box-sizing: border-box;
  padding: 0 172px 0 18px; -webkit-appearance: none; appearance: none;
  background: rgba(190, 214, 255, 0.028); border: 1px solid var(--border-dark); border-radius: 2px;
  color: var(--white); font: 400 16px/1.2 var(--font-body); letter-spacing: -0.005em;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.jn-input::placeholder { color: #6D7F99; opacity: 1; }
.jn-input:hover { border-color: var(--border-active); }
.jn-input:focus { outline: none; border-color: var(--blue);
  background: rgba(61, 141, 227, 0.05); box-shadow: 0 0 0 3px rgba(61, 141, 227, 0.13); }
.jn-input:focus-visible { outline: none; }
.jn-input[aria-invalid="true"] { border-color: #D9714C; }
.jn-input[aria-invalid="true"]:focus { border-color: #D9714C; box-shadow: 0 0 0 3px rgba(217, 113, 76, 0.16); }
.jn-input:disabled { opacity: .55; cursor: default; }
/* the submit lives inside the field: a quiet label and a small outlined arrow
   node — secondary to the page's Join the Network rail by design */
.jn-submit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 0 0 12px;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8CA0BE;
  transition: color .3s var(--ease); }
.jn-submit .jn-submit-a { flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(109, 166, 240, 0.55); color: var(--blue);
  font-size: 15px; line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .12s var(--ease); }
.jn-submit:hover { color: var(--white); }
.jn-submit:hover .jn-submit-a { background: var(--blue); color: #02060F; border-color: var(--blue); }
.jn-submit:active .jn-submit-a { transform: scale(.94); }
.jn-submit:focus-visible { outline: none; }
.jn-submit:focus-visible .jn-submit-a { box-shadow: 0 0 0 3px rgba(61, 141, 227, 0.3); }
.jn-submit[data-busy="1"] { color: var(--sec-light); pointer-events: none; }
.jn-submit[data-busy="1"] .jn-submit-a { animation: jn-node-pulse 1.15s var(--ease) infinite; }
@keyframes jn-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 141, 227, 0.34); }
  50% { box-shadow: 0 0 0 7px rgba(61, 141, 227, 0); }
}

/* ---- supporting lines under the form ---- */
.jn-under { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 560px; }
.jn-note { margin: 0; font: 400 12.5px/1.5 var(--f-mono); letter-spacing: 0.07em;
  text-transform: uppercase; color: #6F819B; }
.jn-note a { color: #8CA0BE; border-bottom: 1px solid rgba(140, 160, 190, .32); }
.jn-note a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.jn-msg { margin: 0; min-height: 0; font: 400 13.5px/1.5 var(--font-body); color: #E3946F;
  opacity: 0; transform: translateY(-3px); transition: opacity .26s var(--ease), transform .26s var(--ease); }
.jn-msg.on { opacity: 1; transform: none; }

/* ---- success state ---- */
.jn-done { display: none; align-items: flex-start; gap: 18px; max-width: 660px; }
.jn-done.on { display: flex; }
.jn-done .jn-node { flex: none; width: 44px; height: 44px; margin-top: 2px; }
.jn-done .jn-node .ring { fill: none; stroke: var(--blue); stroke-width: 1.2; opacity: 0;
  transform-origin: 22px 22px; }
.jn-done .jn-node .core { fill: var(--blue); opacity: 0; }
.jn-done .jn-node .wire { fill: none; stroke: var(--blue); stroke-width: 1.2;
  stroke-dasharray: 30; stroke-dashoffset: 30; opacity: .85; }
.jn-done.on .jn-node .core { animation: jn-core-in .5s var(--ease) .05s forwards; }
.jn-done.on .jn-node .wire { animation: jn-wire-in .6s var(--ease) .18s forwards; }
.jn-done.on .jn-node .ring { animation: jn-ring-out 1.1s var(--ease) .34s forwards; }
@keyframes jn-core-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jn-wire-in { to { stroke-dashoffset: 0; } }
@keyframes jn-ring-out {
  0% { opacity: .8; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1); }
}
.jn-done .jn-done-txt { display: flex; flex-direction: column; gap: 8px; }
.jn-done .jn-done-h { margin: 0; font: 600 clamp(21px, 1.5vw, 26px)/1.2 var(--font-display);
  letter-spacing: -0.02em; color: var(--white); }
.jn-done .jn-done-p { margin: 0; max-width: 42ch; font: 400 15.5px/1.6 var(--font-body); color: #93A6C2; }
.jn-form, .jn-under { transition: opacity .3s var(--ease); }
.jn-mount.done .jn-form, .jn-mount.done .jn-under { display: none; }

/* ═════ pre-footer capture band (all pages) ═════ */
.jn-band { position: relative; background: #000000; padding-block: clamp(52px, 6vw, 84px);
  border-top: 1px solid rgba(109, 166, 240, 0.1); }
.jn-band .jn-band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  max-width: 1600px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.jn-band .jn-band-h { margin: 14px 0 0; font: 600 clamp(24px, 2.05vw, 34px)/1.14 var(--font-display);
  letter-spacing: -0.024em; color: var(--white); text-wrap: balance; }
.jn-band .jn-band-p { margin: 12px 0 0; max-width: 44ch;
  font: 400 15.5px/1.62 var(--font-body); color: #8FA2BE; text-wrap: pretty; }
.jn-band .jn-eyebrow { font: 500 11px/1.2 var(--f-mono); letter-spacing: 0.2em;
  text-transform: uppercase; color: #6DA6F0; }
.jn-band .jn-form { max-width: 100%; }
.jn-band .jn-under { margin-top: 16px; }
@media (max-width: 1023px) {
  .jn-band .jn-band-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .jn-band .jn-band-p { max-width: 52ch; }
}

/* ═════ contextual CTA row (inline, after a content block) ═════ */
.jn-cta-row { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap; margin-top: clamp(46px, 5vw, 76px); padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(109, 166, 240, 0.13); }
.jn-cta-row .jn-cta-label { flex: 1 1 300px; min-width: 0; margin: 0;
  font: 400 15.5px/1.6 var(--font-body); color: #8FA2BE; text-wrap: pretty; }
@media (max-width: 640px) {
  .jn-cta-row { flex-direction: column; align-items: stretch; gap: 22px; }
  .jn-cta-row .jn-cta-label { flex: none; }
}

/* ═════ modal (pages without the primary section) ═════ */
.jn-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 40px); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.jn-modal.open { opacity: 1; visibility: visible; }
.jn-modal .jn-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
.jn-modal .jn-panel { position: relative; width: 100%; max-width: 560px; box-sizing: border-box;
  padding: clamp(30px, 4vw, 46px); background: #04070D;
  border: 1px solid rgba(109, 166, 240, 0.24); border-radius: 2px;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6) inset;
  transform: translateY(14px) scale(.985); opacity: 0;
  transition: transform .34s var(--ease), opacity .34s var(--ease);
  max-height: calc(100vh - 2 * clamp(18px, 4vw, 40px));
  max-height: calc(100dvh - 2 * clamp(18px, 4vw, 40px)); overflow-y: auto; overscroll-behavior: contain; }
.jn-modal.open .jn-panel { transform: none; opacity: 1; }
.jn-modal .jn-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 84% 0%, rgba(61, 141, 227, 0.11), transparent 66%); }
.jn-modal .jn-panel > * { position: relative; }
.jn-modal .jn-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; border-radius: 2px;
  color: #8CA0BE; font-size: 19px; line-height: 1; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease); }
.jn-modal .jn-close:hover { color: var(--white); background: rgba(190, 214, 255, .05); }
.jn-modal .jn-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.jn-modal .jn-m-h { margin: 14px 0 0; font: 600 clamp(25px, 2.2vw, 33px)/1.14 var(--font-display);
  letter-spacing: -0.026em; color: var(--white); text-wrap: balance; }
.jn-modal .jn-m-p { margin: 14px 0 28px; font: 400 15.5px/1.62 var(--font-body); color: #93A6C2;
  text-wrap: pretty; }
.jn-modal .jn-eyebrow { font: 500 11px/1.2 var(--f-mono); letter-spacing: 0.2em;
  text-transform: uppercase; color: #6DA6F0; }
.jn-modal .jn-form { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 100%; }
body.jn-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .jn-modal, .jn-modal .jn-panel, .jn-msg, .jn-form, .jn-under { transition: none; }
  .jn-done .jn-node .core, .jn-done .jn-node .wire, .jn-done .jn-node .ring,
  .jn-submit[data-busy="1"] .jn-submit-a { animation: none; }
  .jn-done .jn-node .core { opacity: 1; }
  .jn-done .jn-node .wire { stroke-dashoffset: 0; }
}

/* ---- one-column form on small viewports (phones and narrow tablets) ---- */
@media (max-width: 640px) {
  .jn-form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}