/* INFORM powered by PULSE - design system v2: tokens, base and shared components.
   Values are the handoff's exact values (README "Design tokens", component designs).
   Page layouts use the generated classes in inform-v2-gen.css. */

/* ---------- Tokens ---------- */
:root {
  --accent: #5fd3e6;
  --accent-hover: #8fe3f2;
  --bg: #0a1530;
  --bg-deep: #071226;
  --bg-panel: #081228;
  --bg-panel-2: #0b1733;
  --bg-input: #0e1c3d;
  --bg-footer: #081127;
  --text-h1: #f5f7ff;
  --text-h2: #f2f5ff;
  --text: #eaeefb;
  --text-2: #dfe6f3;
  --text-3: #b7c0d8;
  --lede: #b3bcd8;
  --muted: #9aa4c2;
  --label: #8b95b5;
  --faint: #7f8aa8;
  --faint-2: #7d87a8;
  --italic: #a9b8d8;
  --amber: #e0b066;
  --amber-legacy: #d8a24a;
  --ev-observed: #6fe0ad;
  --ev-documented: #8fd9c8;
  --ev-literature: #7fb6ff;
  --ev-target: #e0b066;
  --ev-unknown: #ff9d9d;
  --ev-concept: #9fb4e0;
  --ev-boundary: #c2cae3;
  --font-serif: 'Spectral', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Aliases for the interim legacy-bridge.css (older token names). */
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --cyan: var(--accent);
  --cyan-2: var(--accent-hover);
  --white: var(--text-h1);
  --body: var(--text-3);
  --line: rgba(255, 255, 255, .1);
  --line-soft: rgba(255, 255, 255, .065);
  --radius: 16px;
}

/* ---------- Base ----------
   No global box-sizing reset: the designs use the default content-box model
   (max-width + padding), and the generated layout classes depend on it. */
.legacy-page, .legacy-page *, .legacy-page *::before, .legacy-page *::after { box-sizing: border-box; }
/* Legacy V3 pages (via partials/head.php): the typography the previous stylesheet gave them. */
.legacy-page { color: #b7c2dc; font-size: 16px; line-height: 1.6; }
.legacy-page h1, .legacy-page h2, .legacy-page h3 { color: #f5f8ff; text-wrap: balance; }
.legacy-page h1 { margin: 0; max-width: 1000px; font: 400 clamp(38px, 5vw, 64px)/1.02 var(--font-serif); letter-spacing: -.025em; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg, canvas, video { max-width: 100%; }
a { color: var(--accent); }
/* :where() keeps this at element weight, so a link's own colour class wins on hover, as the designs'
   inline styles do. */
a:where(:hover) { color: var(--accent-hover); }
/* Form controls keep browser defaults (as in the designs); legacy pages inherit fonts as before. */
.legacy-page button, .legacy-page input, .legacy-page select, .legacy-page textarea { font: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(95, 211, 230, .25); }
:focus-visible { outline: 2px solid #5fd3e6; outline-offset: 3px; border-radius: 4px; transition: outline-offset .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(95, 211, 230, .55) !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.site-mast { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Designed page roots: never scroll sideways (decorative/positioned labels can overhang by a pixel). */
.page-root { overflow-x: clip; }

/* Shell for older-style pages (site_start/site_end) - same root as the designed pages. */
.page-shell { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); overflow-x: clip; }

/* ---------- Brand lockup ---------- */
.lockup-host { display: block; }
.lockup { display: inline-flex; align-items: center; gap: .62em; line-height: 1; white-space: nowrap; }
.lockup--sm { font-size: 14px; }
.lockup--md { font-size: 17px; }
.lockup--lg { font-size: 22px; }
.lockup--xl { font-size: 34px; }
.lockup__mark { display: grid; grid-template-columns: repeat(3, .38em); grid-auto-rows: .38em; gap: .085em; padding: .1em; border-radius: .12em; background: rgba(4, 10, 24, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 .6em rgba(95, 211, 230, .12); }
.lockup__mark > span { border-radius: .07em; background: linear-gradient(180deg, #f3f5f9 0%, #cdd3dd 55%, #a3adbd 100%); box-shadow: inset 0 .03em 0 rgba(255, 255, 255, .75), inset 0 -.03em 0 rgba(0, 0, 0, .25), 0 .03em .06em rgba(0, 0, 0, .45); }
.lockup__mark > span.is-blue { background: linear-gradient(180deg, #5eaaf0 0%, #3386d6 58%, #2b70bd 100%); }
.lockup__inform { font-family: 'Michroma', 'Eurostile', 'Arial Black', sans-serif; font-size: 1em; letter-spacing: .05em; background: linear-gradient(180deg, #ffffff 0%, #e3e8ef 46%, #9ea9ba 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .05em .05em rgba(0, 0, 0, .55)); }
.lockup__by { font-family: 'Poppins', 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: .56em; letter-spacing: .01em; color: #c3ccda; }
.lockup__pulse { position: relative; display: inline-block; font-family: 'Orbitron', 'Michroma', sans-serif; font-weight: 800; font-size: 1.06em; letter-spacing: .07em; background: linear-gradient(90deg, #2fb6e2 0%, #4fcfd9 48%, #94e9c5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 .32em rgba(70, 205, 228, .45)); }
.lockup__flare { position: absolute; left: -1.1em; right: -1.1em; top: 54%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(120, 230, 245, .95) 12%, rgba(120, 230, 245, 0) 30%, rgba(120, 230, 245, 0) 70%, rgba(120, 230, 245, .95) 88%, transparent 100%); box-shadow: 0 0 .3em rgba(95, 211, 230, .9); z-index: -1; }

/* ---------- Status dot ---------- */
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); flex: none; }
.status-dot--legacy { background: var(--amber-legacy); box-shadow: 0 0 8px var(--amber-legacy); }

/* ---------- Masthead (every page, as on Home: includes/site.php site_masthead) ----------
   Home's design classes carry the layout (lockup row over the waveform line, then the nav bar).
   These add the band behind it on inner pages, the current page, and the line's pause button. */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 10px 16px; border-radius: 6px; background: #5fd3e6; color: #06121f; font-family: var(--font-mono); font-size: 12px; text-decoration: none; }
.skip-link:focus { left: 12px; color: #06121f; }
.site-mast-band { position: relative; z-index: 2; background: #000a21; }
.site-mast [data-mast-wave] { max-width: none; } /* the line runs 24px past the bar at both ends (the base canvas cap cut off the right end) */
.site-mast a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 7px; }
.mast-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mast-motion { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; font: 11px/1 var(--font-mono); color: #9aa4c2; background: rgba(8, 17, 39, .6); border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; cursor: pointer; transition: color .18s ease, border-color .18s ease; }
.mast-motion:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.no-js .mast-motion { display: none; }
/* Wide screens: the links and the portal button sit on the lockup's row, over the waveform line
   (owner request, 1 Oct 2026). Narrower screens keep the bar on its own row under the lockup. */
@media (min-width: 1280px) {
  .site-mast.site-mast { flex-wrap: nowrap; gap: 24px; }
  .site-mast .home-mast__brand .lockup--lg { font-size: clamp(18px, 1.4vw, 22px); }
  .site-mast .home-mast__bar { flex: 1 1 auto; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-mast .home-mast__bar nav { flex-wrap: nowrap; gap: clamp(12px, 1.25vw, 22px); }
}

/* ---------- Inner-page hero artwork (owner request, 2 Oct 2026) ----------
   Two concept illustrations behind the page title, cross-fading like Home's hero. Wide screens:
   the artwork fills the right of the hero, fades out under the text and runs out towards the
   window edge; the notice box under the title keeps the full width. Narrow screens: the artwork
   sits under the title block. */
.hero-art { position: relative; margin: 28px 0 0; height: clamp(220px, 74vw, 460px); }
.hero-art__frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1.6s; }
.hero-art__frame.is-on { opacity: 1; }
.hero-art__frame picture { display: contents; }
/* The labels inside the artwork are part of the picture: lifted a little so they read (owner request, 2 Oct 2026). */
.hero-art__frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; filter: brightness(1.16) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Home: the inline copy of the hero pictures, shown only where the large right-hand hero is hidden. */
.home-hero-inline { display: none; }
.home-hero-inline .hero-art__frame img { filter: none; }
/* Full container width (the intro column itself stops at 560px), as a landscape picture. */
@media (max-width: 1179.98px) {
  .home-hero-inline { display: block; margin: 24px 0 4px; width: calc(100vw - 48px); max-width: 1132px; }
  .home-hero-inline .hero-art__frame img { width: 100%; height: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
}
/* Below the desktop layout the first picture sets the height (full width, its own proportions); the second fits inside it. */
@media (max-width: 979.98px) {
  .hero-art { height: auto; }
  .hero-art__frame:first-child { position: relative; }
  .hero-art__frame:first-child img { width: 100%; max-height: none; }
}
.hero-art__note { position: absolute; right: 0; bottom: -18px; font: 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #7d87a8; }
@media (min-width: 980px) {
  .has-hero-art { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr; }
  .has-hero-art > * { grid-column: 1; position: relative; z-index: 1; }
  .has-hero-art > :nth-child(1) { grid-row: 1; } .has-hero-art > :nth-child(2) { grid-row: 2; } .has-hero-art > :nth-child(3) { grid-row: 3; }
  .has-hero-art > :nth-child(4) { grid-row: 4; } .has-hero-art > :nth-child(5) { grid-row: 5; }
  .has-hero-art > .hero-art { grid-column: 1 / -1; grid-row: 1 / span 6; z-index: 0; justify-self: end; width: 60%; height: auto; min-height: 560px; margin: -24px calc(-1 * clamp(0px, (100vw - 1180px) / 2, 300px)) 0 0; }
  .has-hero-art > .s934f7a { grid-column: 1 / -1; grid-row: 7; }
  .hero-art__frame { justify-content: flex-end; }
  /* A short edge fade only: a long one dimmed the labels on the left of the artwork. */
  .hero-art__frame img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent); }
  .hero-art__note { right: clamp(0px, (100vw - 1180px) / 2, 300px); }
}
@media (prefers-reduced-motion: reduce) { .hero-art__frame { transition: none; } }

/* ---------- Hero artwork motion (owner request, 3 Oct 2026) ----------
   A slow drift on each picture under the cross-fade: the first pushes in while it shows, the second
   pulls back. One pass lasts as long as a picture shows (7.2 s, see inform-core.js), so each picture
   turns round while it is faded out. Typeset labels move with their picture (.hero-art__fit).
   The masthead pause button holds it (.motion-paused on <html>); reduced motion: still pictures. */
@keyframes hero-drift-a { from { transform: scale(1); } to { transform: scale(1.055) translate3d(-.6%, -.5%, 0); } }
@keyframes hero-drift-b { from { transform: scale(1); } to { transform: scale(1.055) translate3d(.6%, .5%, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-art__frame img, .hero-art__fit { animation: hero-drift-a 7.2s ease-in-out infinite alternate; will-change: transform; }
  .hero-art__frame:nth-child(2) img, .hero-art__frame:nth-child(2) .hero-art__fit { animation-name: hero-drift-b; }
  .hero-art__fit img { animation: none; }
  .motion-paused .hero-art__frame img, .motion-paused .hero-art__fit { animation-play-state: paused; }
  /* Home's inline picture fills its box, so the drift stays inside it. */
  .home-hero-inline .hero-art__frame { overflow: hidden; }
}
/* Wide screens: the artwork runs to the window edge, so it grows from that edge. */
@media (min-width: 980px) { .hero-art__frame img, .hero-art__fit { transform-origin: 100% 50%; } }

/* ---------- Hero background (owner request, 4 Oct 2026) ----------
   The pictures fill the whole hero, window edge to window edge, and sit behind the title block;
   a veil on the left keeps the text readable and the bottom melts into the page. Each picture
   shows for 6 s (data-hero-interval). Narrow screens: the picture sits under the title block,
   full width, cut to its illustrated part. */
.hero-art--bg { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.hero-art--bg .hero-art__frame { transition-duration: 1.8s; container-type: size; }
.hero-art--bg .hero-art__frame img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; filter: none; -webkit-mask-image: none; mask-image: none; animation: none; transform: none; }
.hero-art--bg .hero-art__note { right: 16px; bottom: 10px; z-index: 2; color: #b3bcd8; text-shadow: 0 0 6px #071226, 0 0 2px #071226; }
@media (max-width: 979.98px) {
  .hero-art--bg .hero-art__frame:first-child { aspect-ratio: 16 / 10; }
  .hero-art--bg .hero-art__frame--labels:first-child { aspect-ratio: 4 / 3; }
}
@media (min-width: 980px) {
  /* Tall enough to show most of the picture; spare height goes under the text (last row). A notice box
     (Investors) stays in the text column, so the picture runs behind it too. */
  .has-hero-bg { min-height: clamp(470px, 38vw, 640px); border-bottom: 0; grid-template-rows: repeat(6, auto) 1fr; }
  /* Governance: its pictures are strips along the top and its text is short, so the hero is lower and the picture keeps to the top edge. */
  .has-hero-bg--short { min-height: clamp(380px, 27vw, 470px); }
  .hero-art--bg.hero-art--top .hero-art__frame .hero-art__fit { top: 0; }
  .has-hero-bg > .s934f7a { grid-column: 1; grid-row: 6; }
  /* The title a little smaller than on other pages below 1600px, so it stays clear of the illustration. */
  .has-hero-bg > h1 { font-size: clamp(36px, 3.7vw, 64px); }
  .has-hero-bg > h1, .has-hero-bg > p { text-shadow: 0 1px 14px rgba(7, 18, 38, .9); }
  .has-hero-bg > .hero-art { grid-row: 1 / span 7; justify-self: start; width: 100vw; min-height: 0; margin: -64px 0 -58px calc(50% - 50vw); }
  .s968d00.has-hero-bg > .hero-art { margin-top: -72px; margin-bottom: -50px; } /* Research: its hero has its own padding */
  /* Never wider than the window: where the hero is taller than the picture (2.1:1), the picture
     keeps its full width at the top and the text runs on below it. On very wide windows the picture
     starts a little left of the text column, not at the window edge, so the illustration stays beside the title. */
  .hero-art--bg .hero-art__frame { left: max(0px, calc(50vw - 760px)); bottom: auto; height: min(100%, calc(47.6vw - .476 * max(0px, 50vw - 760px)));
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, transparent, #000 9%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero-art--bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 21, 48, .9), rgba(10, 21, 48, .72) 27%, rgba(10, 21, 48, .3) 42%, rgba(10, 21, 48, 0) 57%); }
  .hero-art--bg .hero-art__note { right: max(32px, calc(50vw - 590px)); bottom: 22px; }
  /* Illustration along the bottom, under a short text block (Architecture): the veil stops below the
     text and the picture keeps more of its lower edge. */
  .hero-art--low::after { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 78%); mask-image: linear-gradient(180deg, #000 60%, transparent 78%); }
  .hero-art--low .hero-art__frame { -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent), linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(180deg, #000 90%, transparent), linear-gradient(90deg, transparent, #000 9%); }
}
/* The pictures hold still at their largest size (owner request, 4 Oct 2026: no zoom in and out).
   Each sits in a .hero-art__fit box: the whole picture, placed exactly as object-fit: cover would place it
   (right edge, a quarter of the spare height above), so things can be pinned to places on the picture. */
.hero-art--bg .hero-art__frame .hero-art__fit { --w: max(100cqw, calc(100cqh * var(--ar, 2.1))); position: absolute; right: 0; top: calc((100cqh - var(--w) / var(--ar, 2.1)) * .25);
  width: var(--w); height: calc(var(--w) / var(--ar, 2.1)); animation: none; transform: scale(1.055); transform-origin: 72% 50%; }
/* ---------- Network sweep (owner request, 4 Oct 2026) ----------
   Where a picture shows a conductive network in concrete, <page>-x-net.webp holds just those lit lines,
   cut to the box they occupy (--gx/--gy/--gw/--gh, written by hero_art.py with each picture's --ar).
   A band of light crosses it from left to right, as on Home's hero (veinSweep): the lines brighten as the
   band passes and return to the picture's own level behind it. Nothing else in the picture moves.
   One pass takes 3 s and a picture shows for 6 s, so each picture gets two passes and is handed over with
   the band off the concrete. The masthead pause button holds it; without scripts or with reduced motion
   there is no sweep. */
.hero-art--bg .hero-art__frame img.hero-art__glow { position: absolute; left: var(--gx, 0%); top: var(--gy, 0%); width: var(--gw, 0%); height: var(--gh, 0%); pointer-events: none;
  filter: brightness(2) saturate(1.15) drop-shadow(0 0 6px rgba(70, 222, 255, .75));
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, #000 42%, #000 58%, transparent 100%); mask-image: linear-gradient(102deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
  -webkit-mask-size: 52% 100%; mask-size: 52% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -110% 0; mask-position: -110% 0; }
@keyframes hero-sweep { from { -webkit-mask-position: -110% 0; mask-position: -110% 0; } to { -webkit-mask-position: 210% 0; mask-position: 210% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-art--bg .hero-art__frame img.hero-art__glow { animation: hero-sweep 3s linear infinite paused; }
  .hero-art--bg .hero-art__frame.is-on img.hero-art__glow { animation-play-state: running; }
  .motion-paused .hero-art--bg .hero-art__frame img.hero-art__glow { animation-play-state: paused; }
  .no-js .hero-art--bg .hero-art__frame img.hero-art__glow { animation: none; }
}
/* hero-fit:start (written by _local/tools/hero_art.py: each picture's shape, and where its network glow sits on it) */
.hero-art__fit--overview-a { --ar: 2.1005; --gx: 50.78%; --gy: 44.10%; --gw: 28.17%; --gh: 27.51%; }
.hero-art__fit--overview-b { --ar: 2.1058; --gx: 46.59%; --gy: 22.17%; --gw: 52.51%; --gh: 56.93%; }
.hero-art__fit--technology-a { --ar: 2.1005; --gx: 63.28%; --gy: 33.79%; --gw: 9.93%; --gh: 25.00%; }
.hero-art__fit--technology-b { --ar: 2.1005; --gx: 77.39%; --gy: 40.70%; --gw: 20.16%; --gh: 36.18%; }
.hero-art__fit--technology-c { --ar: 2.3750; --gx: 18.12%; --gy: 0.00%; --gw: 51.50%; --gh: 97.73%; }
.hero-art__fit--research-collaboration-a { --ar: 2.1005; --gx: 39.53%; --gy: 43.22%; --gw: 27.81%; --gh: 39.20%; }
.hero-art__fit--research-collaboration-b { --ar: 2.1005; }
.hero-art__fit--research-collaboration-c { --ar: 2.0874; --gx: 43.54%; --gy: 29.84%; --gw: 50.90%; --gh: 26.97%; }
.hero-art__fit--investors-a { --ar: 2.1005; --gx: 79.07%; --gy: 22.36%; --gw: 17.22%; --gh: 53.64%; }
.hero-art__fit--investors-b { --ar: 2.2842; --gx: 44.68%; --gy: 50.96%; --gw: 52.69%; --gh: 31.83%; }
.hero-art__fit--investors-c { --ar: 2.3030; }
.hero-art__fit--architecture-a { --ar: 2.0979; }
.hero-art__fit--architecture-b { --ar: 2.4023; --gx: 46.53%; --gy: 59.91%; --gw: 50.24%; --gh: 34.48%; }
.hero-art__fit--architecture-c { --ar: 2.0979; --gx: 62.68%; --gy: 29.49%; --gw: 22.01%; --gh: 17.44%; }
.hero-art__fit--validation-roadmap-a { --ar: 2.1005; --gx: 45.22%; --gy: 23.62%; --gw: 39.29%; --gh: 32.79%; }
.hero-art__fit--validation-roadmap-b { --ar: 2.1005; --gx: 60.83%; --gy: 36.68%; --gw: 28.35%; --gh: 21.98%; }
.hero-art__fit--validation-roadmap-c { --ar: 2.1005; }
.hero-art__fit--pilot-pathway-a { --ar: 2.1005; }
.hero-art__fit--pilot-pathway-b { --ar: 2.0874; --gx: 47.67%; --gy: 48.69%; --gw: 33.25%; --gh: 28.34%; }
.hero-art__fit--pilot-pathway-c { --ar: 2.1005; --gx: 71.11%; --gy: 46.61%; --gw: 28.89%; --gh: 26.63%; }
.hero-art__fit--standards-governance-a { --ar: 2.1005; --gx: 77.27%; --gy: 37.44%; --gw: 12.68%; --gh: 19.60%; }
.hero-art__fit--standards-governance-b { --ar: 2.1005; --gx: 60.59%; --gy: 19.22%; --gw: 17.34%; --gh: 24.87%; }
.hero-art__fit--standards-governance-c { --ar: 2.1005; }
.hero-art__fit--overview-c { --ar: 2.1058; --gx: 44.44%; --gy: 17.76%; --gw: 55.56%; --gh: 37.03%; }
/* hero-fit:end */

/* ---------- Hero artwork with typeset labels (owner request, 2 Oct 2026; background heroes 4 Oct) ----------
   Wording that was part of a picture is covered or taken out and set again here as page text, so it
   stays sharp at any size. .hero-art__labels covers the part of the picture's .hero-art__fit box that the
   labels refer to (--lx/--ly/--lw/--lh); label positions are % of that part and sizes are cqw of its width.
   A labelled picture carries its edge fade itself, so the labels over it stay whole. */
.hero-art__labels { position: absolute; inset: 0; pointer-events: none; -webkit-font-smoothing: antialiased; }
.hero-art--bg .hero-art__frame--labels { -webkit-mask-image: none; mask-image: none; }
.hero-art--bg .hero-art__labels { inset: auto; left: var(--lx, 0%); top: var(--ly, 0%); width: var(--lw, 100%); height: var(--lh, 100%); container-type: inline-size; }
@media (min-width: 980px) {
  .hero-art--bg .hero-art__frame--labels picture img { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, transparent, #000 9%); -webkit-mask-composite: source-in; mask-composite: intersect; }
}
.hl { position: absolute; white-space: nowrap; font-family: "IBM Plex Sans", system-ui, sans-serif; color: #dbe2f2; }
.hl > * { display: block; font-style: normal; }
.hl-box { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 0 2.3cqw; font: 500 2.3cqw/1.5 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #f2f5ff; background: #0a1a33; border: 1px solid rgba(120, 214, 232, .75); border-radius: .9cqw; }
.hl-checks { justify-content: flex-start; padding: 2.6cqw 3.2cqw; font: 400 2.25cqw/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #dbe2f2; background: rgba(10, 24, 46, .97); }
.hl-checks b { font: 600 2cqw/1.3 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #f2f5ff; margin-bottom: 1.9cqw; }
.hl-checks span { position: relative; padding-left: 5cqw; line-height: 2.15; }
.hl-checks span::before { content: "\2713"; position: absolute; left: .4cqw; color: #5fd3e6; font-weight: 700; }
/* Pilot, picture 1 (two checklists) and picture 3 (three label boxes): the scene is the right-hand part of the canvas;
   its boxes are small in it, so the label type is scaled down to match. */
.hero-art__fit--pilot-pathway-a { --lx: 18.47%; --lw: 81.53%; }
.hero-art__fit--pilot-pathway-c { --lx: 33.11%; --lw: 66.89%; --lh: 89.9%; } /* 8 Oct: scene moved nearer the title (hero_art.py pad 520 -> 400) */
.hl-pb1 { left: 42.7%; top: 6.6%; width: 27.4%; height: 29%; } .hl-pb2 { left: 74%; top: 6.6%; width: 24.6%; height: 29%; }
.hero-art__fit--pilot-pathway-a .hl-checks { padding: 1.5cqw 1.7cqw; font-size: 1.3cqw; border-radius: .5cqw; }
.hero-art__fit--pilot-pathway-a .hl-checks b { font-size: 1.12cqw; margin-bottom: 1cqw; }
.hero-art__fit--pilot-pathway-a .hl-checks span { padding-left: 2.8cqw; }
.hero-art__fit--pilot-pathway-a .hl-checks span::before { left: .3cqw; }
.hl-pa1 { left: 59.7%; top: 22.8%; width: 18.2%; height: 8.6%; } .hl-pa2 { left: 53.3%; top: 76.2%; width: 19.4%; height: 6.6%; } .hl-pa3 { left: 71.2%; top: 91.4%; width: 22.6%; height: 8.6%; }
.hero-art__fit--pilot-pathway-c .hl-box { padding: 0 1.1cqw; font-size: 1.1cqw; border-radius: .45cqw; }
/* Pilot, picture 2: the small wording on the two tilted glass panels, each line turned to its panel's slope. */
.hl-pn, .hl-pv, .hl-pl { line-height: 1; transform-origin: 0 0; transform: rotate(var(--r, 3deg)); }
.hl-pn { font: 500 .78cqw/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #e6edf9; }
.hl-pv { font: 400 1.08cqw/1 "IBM Plex Sans", system-ui, sans-serif; color: #8fe3f2; }
.hl-pl { font: 400 .73cqw/1 "IBM Plex Sans", system-ui, sans-serif; color: #dbe2f2; }
.hl-pn1 { left: 51.6%; top: 5.9%; font-size: .95cqw; --r: 5.5deg; } .hl-pn5 { left: 74.2%; top: 11.7%; --r: 5.4deg; } .hl-pn6 { left: 74.2%; top: 29.2%; }
.hl-pn2 { left: 68.24%; top: 14.4%; } .hl-pv1 { left: 68.24%; top: 17.3%; } .hl-pn3 { left: 68.24%; top: 23.4%; } .hl-pv2 { left: 68.24%; top: 26.1%; }
.hl-pn4 { left: 68.24%; top: 32.3%; } .hl-pv3 { left: 68.24%; top: 35.1%; }
.hl-pl1 { left: 82.8%; top: 17.7%; --r: 3.7deg; } .hl-pl2 { left: 82.8%; top: 20.7%; --r: 3.7deg; } .hl-pl3 { left: 82.8%; top: 23.5%; --r: 3.7deg; }

/* ---------- Command palette (⌘K) ---------- */
.palette { position: fixed; inset: 0; z-index: 100; background: rgba(3, 8, 20, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; font-family: var(--font-sans); }
.palette__dialog { width: 100%; max-width: 620px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: #0b1733; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); overflow: hidden; }
.palette__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.palette__key { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.palette__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #eef1fb; font-size: 16px; font-family: var(--font-sans); }
.palette__esc { font-family: var(--font-mono); font-size: 10px; color: #7d87a8; border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; padding: 2px 6px; }
.palette__results { max-height: 52vh; overflow: auto; padding: 6px; }
.palette__results:empty { display: none; }
.palette__option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; text-decoration: none; background: transparent; }
.palette__option[aria-selected="true"] { background: rgba(95, 211, 230, .12); }
.palette__kind { flex: 0 0 76px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8b95b5; }
.palette__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.palette__title { font-size: 14.5px; color: #eef1fb; }
.palette__sub { font-size: 12.5px; color: #8b95b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__empty { padding: 18px 12px; font-size: 14px; color: #8b95b5; }

/* ---------- Site footer ---------- */
.site-footer { background: var(--bg-footer); border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--font-sans); color: #9aa4c2; }
.site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 54px 32px 44px; }
.site-footer__top { display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between; }
.site-footer__brand { max-width: 340px; }
.site-footer__lockup { margin-bottom: 18px; }
.site-footer__lockup a { text-decoration: none; }
.site-footer__expand { font-family: var(--font-mono); font-size: 11px; line-height: 1.85; letter-spacing: .03em; color: #7a85a6; }
.site-footer__expand div + div { margin-top: 4px; }
.site-footer__expand span { color: #aeb8d8; }
.site-footer__status { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8b95b5; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 36px 48px; flex: 1; min-width: 280px; }
.site-footer__heading { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #7d87a8; margin-bottom: 14px; }
.site-footer__links { display: flex; flex-direction: column; gap: 9px; }
.site-footer__links a { font-size: 13px; color: #9aa4c2; text-decoration: none; }
.site-footer__links a:hover { color: #fff; }
.site-footer__bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .06); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .04em; color: #7d87a8; }

/* ---------- EvidenceTag + Term (tooltip is one shared element, see inform-core.js) ---------- */
.etag { --tone: #e0b066; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 8%, transparent); color: var(--tone); cursor: help; white-space: nowrap; outline-offset: 2px; text-decoration: none; }
a.etag { cursor: pointer; }
a.etag:hover { color: var(--tone); }
.etag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex: none; }
.etag--observed { --tone: #6fe0ad; }
.etag--documented { --tone: #8fd9c8; }
.etag--literature { --tone: #7fb6ff; }
.etag--target { --tone: #e0b066; }
.etag--unknown { --tone: #ff9d9d; }
.etag--concept { --tone: #9fb4e0; }
.etag--boundary { --tone: #c2cae3; }
.term { text-decoration: underline dotted color-mix(in srgb, #5fd3e6 70%, transparent); text-underline-offset: 3px; cursor: help; }
.tip { --tone: #5fd3e6; position: fixed; z-index: 200; width: 300px; max-width: calc(100vw - 62px); padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: #0b1733; box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 10px; font-family: var(--font-sans); font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; white-space: normal; cursor: default; }
.tip--term { width: 280px; max-width: calc(100vw - 58px); padding: 14px 16px; gap: 8px; }
.tip__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tone); }
.tip--term .tip__k { letter-spacing: .14em; color: #5fd3e6; }
.tip__p { font-size: 13px; line-height: 1.5; color: #dfe6f3; }
.tip__row { display: flex; flex-direction: column; gap: 3px; }
.tip__l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8b95b5; }
.tip__v { font-size: 12.5px; line-height: 1.45; color: #b7c0d8; }
.tip__rev { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: #7d87a8; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 9px; }
.tip__go { font-family: var(--font-mono); font-size: 11px; color: #5fd3e6; text-decoration: none; }
.tip__go:hover { color: #5fd3e6; text-decoration: underline; }

/* ---------- Validation roadmap: Stage 1 gate board (Fig 6.2) ---------- */
.gates { margin-top: 30px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; overflow: hidden; background: #081228; scroll-margin-top: 24px; }
.gates__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.gates__decision { display: inline-flex; align-items: center; gap: 9px; color: #dfe6f3; }
.gates__decision i { width: 8px; height: 8px; border-radius: 50%; background: #e0b066; box-shadow: 0 0 10px #e0b066; }
.gates__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: #8b95b5; }
.gates__all { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 6px; padding: 5px 9px; }
.gates__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gate { --gate: #e0b066; --gate-glow: 0 0 10px #e0b066; display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); background: #0b1733; scroll-margin-top: 24px; }
.gate.is-open { background: rgba(95, 211, 230, .05); }
.gate--future { --gate: #7d87a8; --gate-glow: none; }
.gate--closed { --gate: #6fe0ad; --gate-glow: 0 0 10px #6fe0ad; }
.gate__btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; }
.gate__btn:focus-visible { outline: 2px solid #5fd3e6; outline-offset: -2px; }
.no-js .gate__btn { cursor: default; }
.no-js .gate__caret { display: none; }
.gate__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gate__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.gate__state { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gate); }
.gate__state i { width: 8px; height: 8px; border-radius: 50%; background: var(--gate); box-shadow: var(--gate-glow); }
.gate__name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; color: #eef1fb; }
.gate__foot { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8b95b5; }
.gate__caret { color: var(--accent); }
.gate__detail { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; }
.gate__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8b95b5; }
.gate__q { font-size: 13.5px; line-height: 1.5; color: #dfe6f3; margin-top: 4px; }
.gate__ev { font-size: 13.5px; line-height: 1.5; color: #b7c0d8; margin-top: 4px; }
.gates__note { padding: 12px 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: #7f8aa8; border-top: 1px solid rgba(255, 255, 255, .06); }

/* ---------- Technology: Fig 3.1 compare two classes ---------- */
.cmp { padding: 26px 26px 22px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: linear-gradient(160deg, rgba(95, 211, 230, .06), rgba(255, 255, 255, .01)); }
.cmp__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.cmp__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.cmp__sub { font-size: 13.5px; color: #9aa4c2; margin-top: 6px; }
.cmp__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp__select { background: #0e1c3d; color: #eef1fb; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; padding: 8px 10px; font-family: var(--font-sans); font-size: 13.5px; }
.cmp__vs { font-family: var(--font-mono); font-size: 11px; color: #7d87a8; }
.cmp__axis { position: relative; margin-top: 26px; padding-bottom: 26px; }
.cmp__line { position: relative; height: 1px; background: rgba(255, 255, 255, .14); }
.cmp__tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmp__tick span:first-child { width: 1px; height: 8px; background: rgba(255, 255, 255, .25); }
.cmp__tick span:last-child { font-family: var(--font-mono); font-size: 10px; color: #7d87a8; }
.cmp__rows { display: flex; flex-direction: column; gap: 14px; }
.cmp__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px 22px; align-items: center; }
.cmp__track { position: relative; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.cmp__bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--c); box-shadow: 0 0 14px var(--c); }
.cmp__none { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: #8b95b5; }
.cmp__text { display: flex; flex-direction: column; gap: 4px; }
.cmp__label { font-size: 14px; font-weight: 600; color: #eef1fb; }
.cmp__range { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--c); }
.cmp__note { font-size: 12.5px; line-height: 1.45; color: #9aa4c2; }
.cmp__foot { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: #7f8aa8; }
.cmp__fig { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #7f8aa8; }

/* ---------- Architecture: Fig 5.1 interactive register ---------- */
.amap-tools { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8b95b5; }
.amap-tools__left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.amap-search { width: 200px; max-width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: 8px 11px; color: #eef1fb; font-family: var(--font-sans); font-size: 13px; text-transform: none; letter-spacing: 0; }
.amap-chip { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; padding: 7px 10px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #9aa4c2; }
.amap-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: #f2f5ff; }
.amap-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.amap-legend span { display: inline-flex; align-items: center; gap: 7px; }
.amap-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.amap-legend i.is-adj { background: none; border: 1px solid var(--accent); }
.amap { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; align-items: flex-start; }
.amap-aside { flex: 1 1 260px; min-width: 0; position: static; z-index: 2; padding: 22px 22px 20px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; background: linear-gradient(165deg, rgba(95, 211, 230, .08), rgba(8, 18, 40, .9)); }
/* Anchor targets from the design allowed for a pinned header (160px / 140px); the masthead now scrolls away. */
main .s89b87a, main .sdc0c4f { scroll-margin-top: 24px; }
/* The masthead scrolls away (it is not pinned), so the aside sticks near the top edge. */
.amap.is-side .amap-aside { position: sticky; top: 24px; }
.amap-aside__top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.amap-aside__band { color: var(--accent); }
.amap-aside__wp { color: #8b95b5; }
.amap-aside__id { font-family: var(--font-mono); font-size: 34px; line-height: 1; margin-top: 16px; color: #f2f5ff; }
.amap-aside__name { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.15; margin: 8px 0 0; color: #f2f5ff; }
.amap-aside__desc { font-size: 14px; line-height: 1.55; color: #b7c0d8; margin: 8px 0 0; }
.amap-aside__block { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.amap-aside__block + .amap-aside__block { margin-top: 16px; }
.amap-aside__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8b95b5; }
.amap-aside__if { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: #9aa4c2; }
.amap-aside__if b { font-weight: 400; font-family: var(--font-mono); color: var(--accent); }
.amap-govs { display: flex; flex-wrap: wrap; gap: 6px; }
.amap-gov { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .14); color: #c2cae3; }
.amap-grid { flex: 3 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
/* 8 Oct 2026 (owner): Band E sits beside Band D, so the five bands read A to E in one row. Beside the selected-layer
   panel the grid was about 770px wide, 20px short of five 150px columns, and Band E wrapped under Band A.
   From 1180px: five equal columns and a slightly narrower panel. From 900px to 1179px there is no room for the panel
   and five bands side by side, so the panel takes its own row above them and the bands keep one row.
   Below 900px the bands wrap as before (auto-fit), ending in one column on phones. */
@media (min-width: 1180px) {
  .amap-aside { flex-basis: 230px; }
  .amap-grid { flex: 4 1 560px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1179.98px) {
  .amap-aside { flex-basis: 100%; }
  .amap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.amap-band { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .015); transition: border-color .2s ease, background .2s ease; }
.amap-band.is-active { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 5%, rgba(255, 255, 255, .015)); }
.amap-band__head { padding: 4px 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.amap-band__top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.amap-band__tag { color: var(--accent); }
.amap-band__wp { color: #8b95b5; }
.amap-band__title { font-family: var(--font-serif); font-weight: 500; font-size: 17px; line-height: 1.2; margin: 8px 0 0; color: #f2f5ff; }
.amap-layer { all: unset; box-sizing: border-box; cursor: pointer; opacity: 1; scroll-margin-top: 24px; display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); transition: background .18s ease, border-color .18s ease; }
.amap-layer:focus-visible { outline: 2px solid #5fd3e6; outline-offset: 2px; }
.amap-layer.is-dim { opacity: .28; }
.amap-layer.is-adj { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.amap-layer.is-sel { border-color: var(--accent); background: var(--accent); }
.amap-layer__id { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--accent); }
.amap-layer__name { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #eef1fb; }
.amap-layer__desc { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: #8b95b5; }
.amap-layer.is-sel .amap-layer__id, .amap-layer.is-sel .amap-layer__name { color: #06121f; }
.amap-layer.is-sel .amap-layer__desc { color: rgba(6, 18, 31, .78); }

/* ---------- Scroll reveals (inform-core.js; off under reduced motion) ---------- */
[data-reveal].reveal-pending { opacity: 0; transform: translateY(18px); }
[data-reveal][data-reveal-blur].reveal-pending { filter: blur(7px); }
[data-reveal].reveal-in { transition: opacity .85s cubic-bezier(.22, .61, .36, 1), transform .85s cubic-bezier(.22, .61, .36, 1), filter .7s ease; }

/* ---------- Mobile gutters (16px, no horizontal scroll) ---------- */
@media (max-width: 600px) {
  .site-footer__inner { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Home hero motion (vein pulse / sweep) ---------- */
@keyframes veinPulse { 0%, 100% { opacity: .42; } 50% { opacity: 1; } }
@keyframes veinSweep {
  0% { -webkit-mask-position: -55% 0; mask-position: -55% 0; }
  100% { -webkit-mask-position: 155% 0; mask-position: 155% 0; }
}
@keyframes floatHint { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
[data-paused="true"] .has-veinpulse, [data-paused="true"] .has-veinsweep { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .has-veinpulse, .has-veinsweep { animation: none !important; }
}
/* Without JavaScript the pause control cannot work, so nothing moves (WCAG 2.2.2). */
.no-js .has-veinpulse, .no-js .has-veinsweep { animation: none !important; }
.no-js [data-hero-pause] { display: none; }
.no-js .story__visual { display: none; }

/* ---------- Home: small screens ----------
   The Home design is drawn at desktop width only (its prototype scrolls sideways
   below ~600px). These rules keep 360-719px usable; desktop is unchanged. */
.home-mast__brand .lockup--lg { font-size: min(22px, calc((100vw - 48px) / 17.6)); }
/* Below 1180px the hero art is a sliver over the menu bar (it starts 640px from the left; phones in
   desktop-site mode report 980px): hide it there. The inline copy under the intro shows instead. */
@media (max-width: 1179.98px) {
  [data-hero-root] .home-hero-art { display: none; }
}
@media (max-width: 719.98px) {
  [data-hero-root] .home-chain { grid-template-columns: 1fr; gap: 22px; padding: 64px 0 52px; }
  [data-hero-root] .home-chain__link { display: none; }
}
/* The masthead bar (every page) wraps the portal button under the links on phones. */
@media (max-width: 599.98px) {
  .home-mast__bar { flex-wrap: wrap; }
  .home-mast__bar > a, .mast-actions > a { margin-left: 0; }
}
@media (max-width: 479.98px) {
  [data-hero-root] .home-cta { gap: 20px; padding: 17px 20px; }
}

/* ---------- Responsive tables (labelled cards below 720px) ---------- */
@media (max-width: 720px) {
  [data-reflow-table] { min-width: 0 !important; }
  [data-reflow-head] { display: none !important; }
  [data-reflow-row]:not([hidden]) { padding: 8px 0; display: block !important; }
  [data-reflow-row] > [data-label] { padding: 6px 16px !important; }
  [data-reflow-row] > [data-label]::before { content: attr(data-label); display: block; font: 500 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #8b95b5; margin-bottom: 2px; }
}

/* ---------- SpecimenStory - Fig 1.1 (Home, Programme logic) ---------- */
.story { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: flex-start; margin-top: 36px; font-family: var(--font-sans); }
.story__visual { flex: 1 1 460px; min-width: 0; position: static; z-index: 1; align-self: flex-start; }
.story.is-side .story__visual { position: sticky; top: 118px; }
.story__frame { position: relative; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #0f2146 0%, #081228 70%); }
.story__canvas { display: block; width: 100%; height: 460px; cursor: ns-resize; touch-action: none; outline-offset: -3px; }
.story__canvas.is-dragging { cursor: grabbing; }
.story__hud { position: absolute; top: 12px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10.5px; pointer-events: none; }
.story__hud--l { left: 14px; letter-spacing: .1em; text-transform: uppercase; }
.story__hud--l .story__fig { color: #dfe6f3; }
.story__hud--l .story__state { color: var(--accent); }
.story__hud--r { right: 14px; align-items: flex-end; letter-spacing: .08em; color: #8b95b5; }
.story__load.is-high { color: #e0b066; }
.story__decision { position: absolute; right: 14px; bottom: 14px; width: min(250px, calc(100% - 28px)); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 10px; background: rgba(8, 18, 40, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.story__decision-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.story__decision-t { font-size: 14px; font-weight: 600; color: #eef1fb; margin-top: 6px; }
.story__decision-p { font-size: 12.5px; line-height: 1.45; color: #9aa4c2; margin-top: 4px; }
.story__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: #7f8aa8; }
.story__pause { cursor: pointer; font: inherit; color: #9aa8c0; background: transparent; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; padding: 3px 8px; }
.no-js .story__pause { display: none; }
.story__steps { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
/* Steps sit in normal flow, one under the other. (They were 62vh each, which left most of the section empty.) */
.story__step { display: flex; flex-direction: column; }
.story__card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .015); transition: border-color .3s ease, background .3s ease, opacity .3s ease; opacity: .55; }
.story__card[aria-current="step"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, rgba(255, 255, 255, .02)); opacity: 1; }
.story__card:focus-visible { outline: 2px solid #5fd3e6; outline-offset: 2px; }
.no-js .story__card { opacity: 1; cursor: default; }
.story__card-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.story__card-t { font-family: var(--font-serif); font-size: 24px; line-height: 1.15; color: #f2f5ff; }
.story__card-p { font-size: 14.5px; line-height: 1.55; color: #b7c0d8; }
.story__card-s { font-size: 13px; line-height: 1.5; color: #8b95b5; }
.story__layer { align-self: flex-start; margin: 8px 0 0 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--accent); text-decoration: none; }
.story__layer:hover { text-decoration: underline; }
@media (max-width: 899.98px) {
  .story__steps { gap: 12px; }
  .story__canvas { height: 360px; }
  .story__card { opacity: 1; }
}
/* Home, Programme logic: the Evidence boundary note stacks label over text on phones (side by side it left ~70px for the text). */
@media (max-width: 599.98px) {
  #programme-logic .s194718 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .story__card { transition: none; }
}

/* ---------- Filtered lists (evidence ledger, glossary, governance matrix) ---------- */
.ledger-row:target { background: rgba(95, 211, 230, .08); }
.list-empty { padding: 24px 4px; color: #8b95b5; }
/* Search boxes and filter chips do nothing without JavaScript. */
.no-js [data-js-only] { display: none; }

/* ---------- Labs (labs.php) ---------- */
.lab-span.is-yes { border-color: rgba(95, 211, 230, .5); background: rgba(95, 211, 230, .08); }
.lab-span.is-yes .lab-span__label { color: #5fd3e6; }
.lab-noscript { margin: 0; padding: 10px 12px; font-size: 13px; color: #8b95b5; }
/* The labels are uppercase; keep the microstrain unit (µε) from turning into Greek capitals. */
.lab-unit { text-transform: none; }

/* ---------- Forms (contact, overview access, data room, sign in; includes/forms.php) ---------- */
.form-errors { margin-bottom: 22px; padding: 14px 16px; border: 1px solid rgba(255, 107, 107, .45); border-radius: 10px; background: rgba(255, 107, 107, .08); }
.form-errors__title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #ff9d9d; }
.form-errors__list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.form-errors__item { font-size: 13.5px; color: #ffd0d0; }
.form-sent { margin-bottom: 22px; padding: 14px 16px; border: 1px solid rgba(111, 224, 173, .45); border-radius: 10px; background: rgba(111, 224, 173, .08); font-size: 14px; line-height: 1.55; color: #cdf3e2; }
.form-errors, .form-sent, .signin-alert, [data-form-card] { scroll-margin-top: 24px; }
/* Data room: the stakeholder type is native radios drawn as the design's cards. */
.dr-type { display: flex; flex: 1 1 150px; min-width: 0; }
.dr-type > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dr-type > input:checked + span { border-color: #5fd3e6; background: rgba(95, 211, 230, .12); }
.dr-type > input:focus-visible + span { outline: 2px solid #5fd3e6; outline-offset: 3px; }
.dr-form .sc6ea10[aria-invalid="true"] { border-color: rgba(255, 107, 107, .6); }
/* Sign in: messages from the auth code (errors) and session notices. */
.signin-alert { margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(255, 107, 107, .45); border-radius: 10px; background: rgba(255, 107, 107, .08); font-size: 13.5px; color: #ffd0d0; }
.signin-alert--notice { border-color: rgba(216, 162, 74, .45); background: rgba(216, 162, 74, .06); color: #e9d3a6; }

/* ---------- Legal pages (includes/legal.php): inner-page pattern, contents column, review date ---------- */
.legal-meta { margin: 24px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8b95b5; }
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; padding: 44px 0 0; }
.legal-toc { position: sticky; top: 24px; }
.legal-toc__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8b95b5; }
.legal-toc ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid rgba(255, 255, 255, .09); }
.legal-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 1px solid transparent; font-size: 13px; line-height: 1.45; color: #9aa4c2; text-decoration: none; transition: color .18s ease, border-color .18s ease; }
.legal-toc a:hover { color: #fff; border-left-color: rgba(255, 255, 255, .3); }
.legal-body { max-width: 720px; }
.legal-sec { padding: 0 0 30px; scroll-margin-top: 24px; }
.legal-sec + .legal-sec { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .07); }
.legal-sec h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: #f2f5ff; }
.legal-sec p, .legal-sec li { font-size: 15.5px; line-height: 1.7; color: #b7c0d8; }
.legal-sec p { margin: 12px 0 0; }
.legal-sec ul { margin: 12px 0 0; padding-left: 20px; }
.legal-sec li + li { margin-top: 6px; }
.legal-sec code { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .05); font-family: var(--font-mono); font-size: .88em; color: #dfe6f3; }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; }
  .legal-toc { position: static; }
}

/* ---------- Investors: Two Divisions (generated by _local/tools/build_divisions.py) ---------- */
.divisions { scroll-margin-top: 24px; }
.divisions [role="img"] + div { overflow-wrap: anywhere; }
.dv-1 { max-width:760px; font-size:16px; line-height:1.62; color:#b3bcd8; margin:16px 0 0; text-wrap:pretty; }
.dv-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,400px), 1fr)); gap:16px; margin-top:32px; }
.dv-3 { position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 28px 24px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:linear-gradient(162deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); overflow:hidden; }
.dv-4 { position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#f3f5f9,#a3adbd); }
.dv-5 { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.dv-6 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#cdd3dd; }
.dv-7 { font-family:'Spectral',Georgia,serif; font-weight:500; font-size:clamp(24px,2.4vw,30px); line-height:1.12; margin:0; color:#f2f5ff; }
.dv-8 { font-size:14.5px; line-height:1.58; color:#aab4cb; margin:0; text-wrap:pretty; }
.dv-9 { display:flex; flex-wrap:wrap; gap:8px; }
.dv-10 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:8px 13px; border-radius:30px; border:1px solid rgba(205,211,221,.3); color:#e6ebf5; background:rgba(255,255,255,.035); }
.dv-11 { display:flex; flex-direction:column; gap:14px; margin-top:4px; padding:20px 20px 18px; border:1px solid rgba(205,211,221,.22); border-radius:12px; background:rgba(4,10,26,.45); }
.dv-12 { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#cdd3dd; }
.dv-13 { margin:0; font-family:'Spectral',Georgia,serif; font-weight:500; font-size:22px; line-height:1.2; color:#f2f5ff; }
.dv-14 { margin:0; font-size:14px; line-height:1.58; color:#aab4cb; text-wrap:pretty; }
.dv-15 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,150px), 1fr)); gap:8px; }
.dv-16 { display:flex; flex-direction:column; gap:6px; padding:12px 12px 13px; border:1px solid rgba(205,211,221,.16); border-radius:9px; background:rgba(255,255,255,.025); }
.dv-17 { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#cdd3dd; }
.dv-18 { font-size:13px; line-height:1.45; color:#b7c0d8; text-wrap:pretty; }
.dv-19 { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:#7f8aa8; }
.dv-20 { color:#cdd3dd; text-decoration:none; }
.dv-21 { margin:auto 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); font-family:'Spectral',Georgia,serif; font-size:19px; line-height:1.35; color:#b7c0d8; }
.dv-22 { font-style:italic; color:#f2f5ff; }
.dv-23 { position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 28px 24px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:linear-gradient(162deg, rgba(95,211,230,.05), rgba(255,255,255,.008)); overflow:hidden; }
.dv-24 { position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#2fb6e2,#4fcfd9 48%,#94e9c5); }
.dv-25 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent,#5fd3e6); }
.dv-26 { display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; }
.dv-27 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:7px 11px; border-radius:30px; border:1px solid rgba(205,211,221,.35); color:#cdd3dd; background:rgba(255,255,255,.03); }
.dv-28 { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#7d87a8; }
.dv-29 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:7px 11px; border-radius:30px; border:1px solid rgba(95,211,230,.28); color:#b9dfe8; background:rgba(95,211,230,.04); }
.dv-30 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:7px 11px; border-radius:30px; border:1px solid rgba(95,211,230,.42); color:#a6e3ee; background:rgba(95,211,230,.06); }
.dv-31 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:7px 11px; border-radius:30px; border:1px solid rgba(95,211,230,.6); color:#9be6f2; background:rgba(95,211,230,.08); }
.dv-32 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:7px 11px; border-radius:30px; border:1px solid rgba(148,233,197,.7); color:#bff3dc; background:rgba(148,233,197,.1); box-shadow:0 0 14px rgba(95,211,230,.18); }
.dv-33 { display:flex; flex-direction:column; gap:14px; margin-top:4px; padding:20px 20px 18px; border:1px solid rgba(95,211,230,.22); border-radius:12px; background:rgba(4,10,26,.45); }
.dv-34 { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent,#5fd3e6); }
.dv-35 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; align-items:end; height:150px; padding-top:6px; }
.dv-36 { display:flex; flex-direction:column; justify-content:flex-end; gap:6px; height:100%; }
.dv-37 { font-family:'IBM Plex Mono',monospace; font-size:13px; color:#94e9c5; }
.dv-38 { height:22%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#94e9c5,rgba(148,233,197,.25)); box-shadow:0 0 14px rgba(148,233,197,.35); }
.dv-39 { font-family:'IBM Plex Mono',monospace; font-size:13px; color:#5fd3e6; }
.dv-40 { height:44%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#5fd3e6,rgba(95,211,230,.2)); }
.dv-41 { font-family:'IBM Plex Mono',monospace; font-size:13px; color:#e0b066; }
.dv-42 { height:66%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#e0b066,rgba(224,176,102,.2)); }
.dv-43 { font-family:'IBM Plex Mono',monospace; font-size:13px; color:#ff9d9d; }
.dv-44 { height:88%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#ff9d9d,rgba(255,157,157,.2)); }
.dv-45 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:-4px; font-size:11.5px; line-height:1.35; color:#9aa4c2; }
.dv-46 { color:var(--accent,#5fd3e6); text-decoration:none; }
.dv-47 { margin-top:64px; }
.dv-48 { font-family:'Spectral',Georgia,serif; font-weight:400; font-size:clamp(24px,2.6vw,32px); line-height:1.18; margin:0; color:#f2f5ff; text-wrap:balance; }
.dv-49 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,400px), 1fr)); gap:16px; margin-top:24px; }
.dv-50 { display:flex; flex-direction:column; gap:12px; padding:26px 28px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.02); }
.dv-51 { margin:0; font-family:'Spectral',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(19px,1.9vw,23px); line-height:1.38; color:#e6ebf5; text-wrap:pretty; }
.dv-52 { display:flex; flex-direction:column; gap:12px; padding:26px 28px; border:1px solid rgba(95,211,230,.2); border-radius:14px; background:rgba(95,211,230,.035); }
.dv-53 { margin:40px 0 0; font-size:16px; line-height:1.62; color:#b3bcd8; }
.dv-54 { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px), 1fr)); gap:30px 0; }
.dv-55 { display:flex; flex-direction:column; gap:14px; }
.dv-56 { position:relative; height:2px; background:linear-gradient(90deg,#e3e8ef,#b9c7d6); }
.dv-57 { position:absolute; left:0; top:-5px; width:12px; height:12px; border-radius:50%; background:#e3e8ef; box-shadow:0 0 10px rgba(227,232,239,.45); }
.dv-58 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#8b95b5; }
.dv-59 { padding-right:22px; font-family:'Spectral',Georgia,serif; font-size:clamp(20px,1.9vw,24px); line-height:1.25; color:#f2f5ff; text-wrap:balance; }
.dv-60 { position:relative; height:2px; background:linear-gradient(90deg,#b9c7d6,#5fd3e6); }
.dv-61 { position:absolute; left:0; top:-5px; width:12px; height:12px; border-radius:50%; background:#a9d4e2; box-shadow:0 0 10px rgba(169,212,226,.45); }
.dv-62 { position:relative; height:2px; background:linear-gradient(90deg,#5fd3e6,#5fd3e6); }
.dv-63 { position:absolute; left:0; top:-5px; width:12px; height:12px; border-radius:50%; background:#5fd3e6; box-shadow:0 0 12px rgba(95,211,230,.6); }
.dv-64 { position:relative; height:2px; background:linear-gradient(90deg,#5fd3e6,#94e9c5); }
.dv-65 { position:absolute; left:0; top:-5px; width:12px; height:12px; border-radius:50%; background:#94e9c5; box-shadow:0 0 14px rgba(148,233,197,.65); }
.dv-66 { margin-top:24px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#7f8aa8; }
.dv-20:hover { text-decoration:underline; }
.dv-46:hover { text-decoration:underline; }
/* ---------- /Investors: Two Divisions ---------- */