/* Apollo Technology — site styles, direction A (Graphite and Signal), brand guide v0.1.
   Layout: 12-column grid inside a 1200px measure; dark graphite bands with paper reading sections; hairlines, no shadows. */
:root {
  color-scheme: dark;
  /* colour — dark ground */
  --surface-000: #0e1116;
  --surface-100: #141820;
  --surface-200: #1b2029;
  --line: #2a313c;
  --line-strong: #3b4452;
  --ink: #f4f4f1;
  --ink-muted: #a7aeb8;
  /* colour — paper */
  --paper-000: #f5f4f0;
  --paper-100: #ffffff;
  --paper-200: #ecebe6;
  --paper-line: #d9d7d0;
  --paper-line-strong: #b9b6ad;
  --paper-ink: #111318;
  --paper-ink-muted: #5b6068;
  /* accent */
  --accent: #d7262e;
  --on-accent: #ffffff;
  --accent-text-dark: #f24850; /* red for text on the dark ground: 4.5:1 on cards */
  --accent-text-paper: #b8202a;
  --focus: #7a98ff;
  /* type */
  --font-sans: "Suisse Int'l", "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Suisse Int'l Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  /* layout */
  --max: 1200px;
  --measure: 720px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  /* live tokens for the current band */
  --bg: var(--surface-000);
  --bg-raised: var(--surface-100);
  --bg-card: var(--surface-200);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --accent-text: var(--accent-text-dark);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--surface-000);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
picture { display: contents; } /* the <img> inside stays the flex item, so the phone order rules still apply to it */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* bands */
.band { background: var(--bg); color: var(--fg); padding-block: clamp(72px, 9vw, 120px); }
.band--tight { padding-block: clamp(48px, 6vw, 80px); }
.band--raised { --bg: var(--surface-100); }
.band--paper {
  color-scheme: light;
  --bg: var(--paper-000); --bg-raised: var(--paper-100); --bg-card: var(--paper-100);
  --rule: var(--paper-line); --rule-strong: var(--paper-line-strong);
  --fg: var(--paper-ink); --fg-muted: var(--paper-ink-muted);
  --accent-text: var(--accent-text-paper);
}
.band + .band { border-top: 1px solid var(--line); }
.band--paper + .band--paper { border-top-color: var(--paper-line); }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
@media (min-width: 900px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }

/* type scale */
.display-1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.display-2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }
.h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.h4 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.lead { font-size: 20px; line-height: 1.5; }
.small { font-size: 14px; line-height: 1.5; }
.caption { font-size: 13px; line-height: 1.4; }
.muted { color: var(--fg-muted); }
.measure { max-width: var(--measure); }
.measure-s { max-width: 560px; }
.label { font-family: var(--font-mono); font-size: 13px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.prose > * + * { margin-top: 16px; }
.prose p { max-width: var(--measure); }
.prose ul { padding-left: 20px; list-style: disc; max-width: var(--measure); }
.prose li + li { margin-top: 6px; }
.prose h3, .prose .h3 { margin-top: 40px; }

/* eyebrow */
.eyebrow { display: flex; align-items: center; gap: 16px; color: var(--fg-muted); }
.eyebrow::after { content: ""; width: 48px; height: 1px; background: var(--rule-strong); }
.eyebrow--accent::after { background: var(--accent); }
.section-head { display: flex; flex-direction: column; gap: 24px; max-width: var(--measure); }
.section-head .lead { color: var(--fg-muted); max-width: 640px; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; font-size: 16px; font-weight: 500; line-height: 1.2; border-radius: 2px; white-space: nowrap; transition: filter 150ms ease; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--ghost { border: 1px solid var(--rule-strong); color: var(--fg); }
.band--paper .btn--ghost { border-color: var(--paper-ink); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--accent-text); }
.link-arrow .arrow { color: var(--accent-text); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.label.accent { color: var(--accent-text); }

/* grids */
.grid { display: grid; gap: 40px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.col-7-12 { grid-column: 7 / -1; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-4 { grid-column: span 4; } .span-8 { grid-column: span 8; }
.grid > * { min-width: 0; }
@media (max-width: 960px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-12 { grid-template-columns: minmax(0, 1fr); } .cols-12 > * { grid-column: auto; } }
@media (max-width: 600px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } .grid { gap: 28px; } }

/* hairline card grids */
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cards > * { background: var(--bg-card); padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cards .card-body { color: var(--fg-muted); flex-grow: 1; }
.cards .h3, .cards .h4 { margin-top: 4px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); } }
.cards .link-arrow { margin-top: 8px; }

/* figures row */
.figures { display: grid; gap: 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures > div { border-top: 1px solid var(--rule-strong); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.figures .data { font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
@media (max-width: 960px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .figures { grid-template-columns: minmax(0, 1fr); } }

/* definition rows */
.dl { border-top: 1px solid var(--rule); }
.dl > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.dl dt { font-weight: 500; }
.dl dd { color: var(--fg-muted); max-width: var(--measure); }
.dl dt .label { display: block; margin-top: 6px; color: var(--fg-muted); font-weight: 500; }
@media (max-width: 700px) { .dl > div { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* list with rules */
.rules { border-top: 1px solid var(--rule); }
.rules li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rules--muted li { color: var(--fg-muted); }
.rules strong { color: var(--fg); font-weight: 500; }

/* image slots (placeholders until the generated imagery lands) */
.slot { position: relative; width: 100%; max-width: 100%; overflow: hidden; color: var(--fg-muted); border: 1px solid var(--rule);
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,0.045), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--bg-raised), var(--bg)); }
.band--paper .slot { background: radial-gradient(120% 90% at 30% 20%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%), linear-gradient(180deg, var(--paper-100), var(--paper-200)); }
.slot::after { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px; background: var(--rule); opacity: .6; }
.slot figcaption { position: absolute; left: 20px; bottom: 14px; right: 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; z-index: 1; opacity: .85; }
.slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot--photo { background-image: none; }
.slot--photo::after { display: none; }
.slot--photo figcaption { display: none; }
.ar-21-9 { aspect-ratio: 21 / 9; } .ar-16-9 { aspect-ratio: 16 / 9; } .ar-3-2 { aspect-ratio: 3 / 2; } .ar-4-5 { aspect-ratio: 4 / 5; } .ar-1-1 { aspect-ratio: 1 / 1; }

/* placeholder marker for figures awaiting the CTO */
.tbc { font-family: var(--font-mono); font-size: 0.85em; color: var(--fg-muted); border-bottom: 1px dashed var(--rule-strong); padding: 0 2px; }

/* header */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(14, 17, 22, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface-000); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.brand { font-weight: 600; letter-spacing: -0.01em; font-size: 17px; padding: 12px 0; display: inline-flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 15px; line-height: 1.4; padding: 12px 0; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); text-decoration: none; }
.nav .btn { padding: 0 18px; min-height: 40px; font-size: 15px; }
.nav-toggle { display: none; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 2px; }
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 16px; border-top: 1px solid var(--line); }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 12px; width: auto; border-bottom: 0; }
}

/* section sub-navigation */
.subnav { border-bottom: 1px solid var(--line); background: var(--surface-000); }
.subnav .wrap { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { font-size: 14px; padding: 16px 0; white-space: nowrap; color: var(--ink-muted); }
.subnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); text-decoration: none; }

/* hero */
.hero { padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 80px); }
.hero .display-1 { max-width: 760px; }
.hero .lead { color: var(--ink-muted); max-width: 620px; }
.hero-stack { display: flex; flex-direction: column; gap: 28px; }
.strap { margin-top: 8px; color: var(--ink-muted); }
.hero-media { margin-top: clamp(40px, 5vw, 64px); }

/* page hero (inner pages) */
.page-hero { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.page-hero .display-2 { max-width: 820px; }
.page-hero .lead { color: var(--ink-muted); max-width: 680px; }

/* diagram */
.diagram { border: 1px solid var(--rule); background: var(--bg-raised); padding: 24px; overflow-x: auto; }
.diagram svg { display: block; width: 100%; height: auto; min-width: 640px; font-family: var(--font-mono); }
.diagram-note { margin-top: 12px; color: var(--fg-muted); max-width: var(--measure); }

/* questions */
.faq { border-top: 1px solid var(--rule); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 24px; font-weight: 500; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--fg-muted); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 0 24px; color: var(--fg-muted); max-width: var(--measure); }
.faq .answer p + p { margin-top: 12px; }

/* forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; color: var(--fg-muted); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--fg); background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: 2px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); opacity: 0.8; }
.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.notice { border: 1px solid var(--rule-strong); padding: 16px 20px; color: var(--fg); }
.notice[hidden] { display: none; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--bg-card); }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 500; }
thead th { color: var(--fg-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }

/* footer */
.footer { background: var(--surface-000); color: var(--ink); border-top: 1px solid var(--line); padding-block: 72px 40px; }
.footer .cols { display: grid; gap: 40px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.footer .col-brand { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
.footer .col { grid-column: span 2; }
.footer .col--wide { grid-column: span 2; }
.footer .label { color: var(--ink-muted); }
.footer ul { margin-top: 12px; }
.footer li a { display: block; padding: 10px 0; font-size: 14px; }
.footer .legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; }
.footer .disclaimer { margin-top: 24px; color: var(--ink-muted); font-size: 14px; max-width: var(--measure); }
@media (max-width: 960px) { .footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .footer .col-brand { grid-column: 1 / -1; } .footer .col, .footer .col--wide { grid-column: auto; } }
@media (max-width: 600px) { .footer .cols { grid-template-columns: minmax(0, 1fr); } }

/* review badge (removed at hand-over) */
.review-badge { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 12px; background: var(--surface-100); border: 1px solid var(--line-strong); color: var(--ink-muted); padding: 8px 10px 8px 14px; border-radius: 2px; }
.review-badge button { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border: 1px solid var(--line); border-radius: 2px; }

/* utilities */
.stack-xs > * + * { margin-top: 8px; }
.stack-s > * + * { margin-top: 16px; }
.stack-m > * + * { margin-top: 32px; }
.stack-l > * + * { margin-top: 64px; }
.mt-section { margin-top: clamp(40px, 5vw, 64px); }
.split { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.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; }
.photo-frame { border: 1px solid var(--rule); background: var(--bg-raised); overflow: hidden; max-width: 100%; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quote { font-size: 24px; line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; max-width: 760px; }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 14px; color: var(--fg-muted); }
.copy-row { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy-row code { font-family: var(--font-mono); font-size: 15px; }
.chip { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--rule-strong); color: var(--fg-muted); border-radius: 2px; }

/* dropdown menus */
.nav-item { position: relative; display: flex; align-items: center; gap: 4px; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 44px; color: var(--ink-muted); border-radius: 2px; }
.menu-toggle svg { width: 12px; height: 12px; transition: transform 150ms ease; }
.nav-item.is-open .menu-toggle svg { transform: rotate(180deg); }
.menu { position: absolute; top: 100%; left: -16px; display: none; min-width: 320px; padding: 12px; background: var(--surface-100); border: 1px solid var(--line); box-shadow: none; z-index: 30; }
.has-menu--wide .menu { min-width: 640px; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; left: 50%; transform: translateX(-50%); }
.nav-item.is-open .menu { display: block; }
.has-menu--wide.is-open .menu { display: grid; }
.menu-col ul { display: flex; flex-direction: column; }
.menu-head { padding: 8px 12px 6px; color: var(--ink-muted); }
.menu li a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 2px; }
.menu li a:hover { background: var(--surface-200); text-decoration: none; }
.menu-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.menu-desc { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .nav-item { width: 100%; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-item > a { flex: 1 1 auto; border-bottom: 0 !important; }
  .menu, .has-menu--wide .menu { position: static; min-width: 0; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 4px 0 8px 12px; transform: none; }
  .has-menu--wide .menu { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* solutions explorer */
.explorer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.explorer > * { min-width: 0; }
.explorer-tabs { background: var(--bg-card); display: flex; flex-direction: column; }
.explorer-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; width: 100%; padding: 18px 24px; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 500; color: var(--fg-muted); }
.explorer-tabs button:last-child { border-bottom: 0; }
.explorer-tabs button[aria-selected="true"] { color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); background: var(--bg-raised); }
.explorer-tabs button .label { font-weight: 500; }
.explorer-panel { background: var(--bg-raised); padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.explorer-panel[hidden] { display: none; }
.explorer-panel .slot { margin: 0; }
.explorer-quote { font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; }
.explorer-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid var(--rule); background: var(--bg-card); grid-column: 1 / -1; }
.explorer-controls .arrows { display: flex; gap: 8px; }
.explorer-controls button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: 2px; }
.explorer.is-auto .explorer-progress { display: inline-block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 960px) { .explorer { grid-template-columns: minmax(0, 1fr); } .explorer-panel { grid-template-columns: minmax(0, 1fr); padding: 24px; } .explorer-tabs { flex-direction: row; overflow-x: auto; } .explorer-tabs button { white-space: nowrap; border-bottom: 0; border-right: 1px solid var(--rule); padding: 14px 18px; font-size: 15px; } .explorer-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); } }

/* platform architecture figure */
.arch-stack { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.arch-stack > * { background: var(--bg-card); min-width: 0; }
.arch-side { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.arch-layers { display: flex; flex-direction: column; gap: 1px; background: var(--rule); }
.arch-layer { background: var(--bg-card); padding: 18px 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.arch-layer.is-top { background: var(--bg-raised); }
.arch-layer .small { text-align: right; }
@media (max-width: 900px) { .arch-stack { grid-template-columns: minmax(0, 1fr); } .arch-layer { flex-direction: column; gap: 4px; } .arch-layer .small { text-align: left; } }
.arch-layer { position: relative; }
.arch-layer::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--accent); transition: width .36s cubic-bezier(.2,.7,.2,1); }
.arch-layer:hover, .arch-layer:focus-visible { text-decoration: none; background: var(--bg-raised); }
.arch-layer:hover::before, .arch-layer:focus-visible::before { width: 100%; }

/* hero schematic: the signer network drawn in code (fallback for the hero film) */
.hero-net { position: relative; width: 100%; aspect-ratio: 21 / 9; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-100), var(--surface-000)); overflow: hidden; }
.hero-net canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-net figcaption { position: absolute; left: 20px; bottom: 14px; right: 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; color: var(--ink-muted); z-index: 1; }

/* full-bleed film hero */
.hero--film { position: relative; overflow: hidden; padding-block: clamp(140px, 16vw, 220px) clamp(72px, 8vw, 120px); isolation: isolate; }
.hero-film { position: absolute; inset: -5%; width: 110%; max-width: none; height: 110%; object-fit: cover; object-position: 72% 50%; z-index: -2; transform-origin: 72% 78%; transform: scale(1.27); }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,17,22,0.94) 0%, rgba(14,17,22,0.82) 38%, rgba(14,17,22,0.35) 70%, rgba(14,17,22,0.15) 100%), linear-gradient(180deg, rgba(14,17,22,0.55) 0%, rgba(14,17,22,0.1) 35%, rgba(14,17,22,0.75) 100%); }
.hero--film .wrap { position: relative; }
.hero--film .hero-stack { max-width: 720px; }
.hero-note { position: absolute; right: max(40px, env(safe-area-inset-right, 0px)); bottom: -40px; color: var(--ink-muted); opacity: .8; }
@media (max-width: 900px) {
  .hero--film { display: flex; flex-direction: column; padding-top: 96px; padding-bottom: 0; overflow: visible; }
  .hero--film .wrap { order: 1; }
  .hero-film { order: 2; position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 72% 50%; margin-top: 40px; z-index: auto; transform: none; animation: none; }
  .hero-shade, .hero-note { display: none; }
}

/* photo bands: the picture fills the band, dark and soft on the text side, sharp on the other */
.band--photo { position: relative; overflow: hidden; isolation: isolate; }
.band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%; }
.band-photo--blur { z-index: -3; filter: blur(22px) brightness(0.55); transform: scale(1.1); }
.band-photo--sharp { z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 60%); mask-image: linear-gradient(90deg, transparent 28%, #000 60%); }
.band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,17,22,0.97) 0%, rgba(14,17,22,0.95) 36%, rgba(14,17,22,0.6) 56%, rgba(14,17,22,0.18) 76%, rgba(14,17,22,0.06) 100%), linear-gradient(180deg, rgba(14,17,22,0.45) 0%, rgba(14,17,22,0) 22%, rgba(14,17,22,0) 78%, rgba(14,17,22,0.45) 100%); }
.band--photo .wrap { position: relative; }
.band--photo .rules { border-top-color: var(--line-strong); }
@media (max-width: 900px) {
  .band--photo { display: flex; flex-direction: column; padding-bottom: 0; }
  .band--photo .wrap { order: 1; }
  .band-photo--blur, .band-shade { display: none; }
  .band-photo--sharp { order: 2; position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; margin-top: 40px; z-index: auto; -webkit-mask-image: none; mask-image: none; }
}

/* chapter bands: text, then the picture across the full width */
.band--chapter { padding-bottom: 0; }
.band-bleed { margin: clamp(48px, 6vw, 88px) 0 0; width: 100%; height: clamp(260px, 34vw, 560px); overflow: hidden; }
.band-bleed img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* code-drawn hero figures */
.hero-fig { position: relative; width: 100%; aspect-ratio: 21 / 9; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-100), var(--surface-000)); overflow: hidden; margin: 0; }
.hero-fig svg { display: block; width: 100%; height: 100%; }
.hero-fig figcaption { position: absolute; left: 20px; bottom: 14px; right: 20px; color: var(--ink-muted); font-size: 13px; }
.hero-fig figcaption { display: none; }

/* the enclave figure, staged: the lid lifts, then the labels reveal in order */
.hero-fig .ef-lid { transform: translateY(var(--lid-drop, 176px)); transition: transform 1.8s cubic-bezier(.2,.7,.15,1) .4s; }
.hero-fig .ef-guides, .hero-fig .ef-cluster, .hero-fig .ef-mem, .hero-fig .ef-path, .hero-fig .ef-lbl { opacity: 0; transition: opacity .8s ease; }
.hero-fig .ef-leader { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease; }
.hero-fig.is-on .ef-lid { transform: translateY(0); }
.hero-fig.is-on .ef-guides { opacity: 1; transition-delay: 1.2s; }
.hero-fig.is-on .ef-lbl-1 { opacity: 1; transition-delay: 1.8s; }
.hero-fig.is-on .ef-lbl-1 .ef-leader { stroke-dashoffset: 0; transition-delay: 1.8s; }
.hero-fig.is-on .ef-cluster { opacity: 1; transition-delay: 3.2s; animation: ef-pulse 1.6s ease 3.4s 2; }
.hero-fig.is-on .ef-lbl-2 { opacity: 1; transition-delay: 3.5s; }
.hero-fig.is-on .ef-lbl-2 .ef-leader { stroke-dashoffset: 0; transition-delay: 3.5s; }
.hero-fig.is-on .ef-mem, .hero-fig.is-on .ef-path { opacity: 1; transition-delay: 5s; }
.hero-fig.is-on .ef-path { animation: ef-march 1.1s linear 5.4s infinite; }
.hero-fig.is-on .ef-lbl-3 { opacity: 1; transition-delay: 5.3s; }
.hero-fig.is-on .ef-lbl-3 .ef-leader { stroke-dashoffset: 0; transition-delay: 5.3s; }
@keyframes ef-pulse { 50% { fill-opacity: .7; } }
@keyframes ef-march { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) {
  .hero-fig .ef-lid, .hero-fig .ef-guides, .hero-fig .ef-cluster, .hero-fig .ef-mem, .hero-fig .ef-path, .hero-fig .ef-lbl, .hero-fig .ef-leader { transition: none; animation: none; }
  .hero-fig .ef-lid { transform: none; }
  .hero-fig .ef-guides, .hero-fig .ef-cluster, .hero-fig .ef-mem, .hero-fig .ef-path, .hero-fig .ef-lbl { opacity: 1; }
  .hero-fig .ef-leader { stroke-dashoffset: 0; }
}
.fig-legend { display: none; list-style: none; margin: 20px 0 0; padding: 0; }
.fig-legend li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--rule); }
.fig-legend li strong { font-weight: 500; }
.fig-legend li span:last-child { grid-column: 2; color: var(--fg-muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 700px) {
  .hero-fig .ef-lbl, .hero-fig .ef-cap { display: none; }
  .fig-legend { display: block; }
}

/* steps: a numbered line of three, revealed in order */
.steps { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.steps::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--accent); transition: width 2.4s cubic-bezier(.2,.7,.15,1); }
.steps.is-on::after { width: 100%; }
.step { padding-top: 28px; position: relative; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; }
.step::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--accent); }
.steps.is-on .step { opacity: 1; transform: none; }
.steps.is-on .step:nth-child(1) { transition-delay: .2s; } .steps.is-on .step:nth-child(2) { transition-delay: 1s; } .steps.is-on .step:nth-child(3) { transition-delay: 1.8s; }
.step p { color: var(--fg-muted); margin: 0; }
.steps-foot { margin-top: 8px; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps.is-on .step:nth-child(4) { transition-delay: 2.6s; }
@media (max-width: 1100px) and (min-width: 901px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .step, .steps::after { transition: none; } .step { opacity: 1; transform: none; } .steps.is-on::after { width: 100%; } }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 0; } .steps::before, .steps::after { display: none; } .step { border-top: 1px solid var(--rule); padding: 24px 0; } .step::before { top: -3px; } }

/* photo band anchored on the right-hand part of the picture */
.band--photo-right .band-photo { object-position: 72% 50%; }

/* the hero camera: three moves to choose from; the move ends on today's framing */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero--film.cam-1 .hero-film { animation: cam-push 9s cubic-bezier(.22,.61,.21,1) both; }
  .hero--film.cam-2 .hero-film { animation: cam-drift 10s both; }
  .hero--film.cam-3 .hero-film { animation: cam-swing 7.5s both; }
}
@keyframes cam-push { from { transform: scale(1); } to { transform: scale(1.27); } }
@keyframes cam-drift {
  0% { transform: scale(1) translateX(3%); animation-timing-function: cubic-bezier(.4,.1,.5,1); }
  50% { transform: scale(1.14) translate(-1.5%, .6%); animation-timing-function: cubic-bezier(.3,.2,.2,1); }
  100% { transform: scale(1.27); }
}
@keyframes cam-swing {
  0% { transform: scale(1) translateX(-3.5%); animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
  28% { transform: scale(1.1) translateX(2.2%); animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
  62% { transform: scale(1.22) translateX(-1%); animation-timing-function: cubic-bezier(.25,.5,.2,1); }
  100% { transform: scale(1.27); }
}
.hero-note button, .review-switch button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hero-note button[aria-pressed="true"], .review-switch button[aria-pressed="true"] { color: var(--fg); text-decoration: none; }
.review-switch { margin-top: 28px; color: var(--fg-muted); }
.review-switch button { color: var(--fg-muted); }
/* a photo band whose picture is still to be made */
.band--photo-empty { background: radial-gradient(90% 80% at 72% 50%, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%), var(--surface-000); }
.band-brief { position: absolute; right: 40px; bottom: 20px; max-width: 420px; color: var(--ink-muted); text-align: right; z-index: 1; opacity: .85; }
@media (max-width: 900px) { .band-brief { position: static; order: 2; text-align: left; padding: 24px 16px; } }

/* cards: the whole card is the link */
.cards > article { position: relative; transition: box-shadow .22s ease, transform .22s ease, background-color .22s ease; }
.cards > article .link-arrow::after { content: ""; position: absolute; inset: 0; }
.cards > article .link-arrow .arrow { display: inline-block; transition: transform .22s ease; }
.cards > article:hover .link-arrow .arrow, .cards > article:focus-within .link-arrow .arrow { transform: translateX(4px); }
.cards > article:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.cards > article .link-arrow:focus { outline: none; }
.cards > article .link-arrow:hover { text-decoration: none; }
/* on hover a rule draws along the top edge, in the brand's own red */
.cards > article::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--accent); transition: width .36s cubic-bezier(.2,.7,.2,1); }
.cards > article:hover::before, .cards > article:focus-within::before { width: 100%; }
.cards > article:not(:has(a))::before { display: none; }
@media (prefers-reduced-motion: reduce) { .cards > article, .cards > article .link-arrow .arrow, .cards > article::before { transition: none; } }

/* the assembled stack: slabs settle, then the line through all of them draws */
.hero-fig--stack { aspect-ratio: 1200 / 560; }
.hero-fig--narrow { max-width: none; }
.hero-fig--stack .st-slab, .hero-fig--stack .st-op, .hero-fig--stack .st-side-t { transition: transform 1.4s cubic-bezier(.2,.7,.15,1); transition-delay: calc(.2s + var(--i, 0) * .12s); }
.hero-fig--stack.is-on .st-slab, .hero-fig--stack.is-on .st-op, .hero-fig--stack.is-on .st-side-t { transform: translateY(var(--drop)); }
.hero-fig--stack .st-rod { transition: stroke-dashoffset 1.2s ease 2.2s; }
.hero-fig--stack.is-on .st-rod { stroke-dashoffset: 0; }
.hero-fig--stack .st-rodlabel { opacity: 0; transition: opacity .6s ease 3.2s; }
.hero-fig--stack.is-on .st-rodlabel { opacity: 1; }
.hero-fig--stack .st-slab polygon { transition: fill .2s ease; }
.hero-fig--stack .st-slab:hover polygon:nth-of-type(3) { fill: #4b5464; }
.hero-fig--stack .st-slab:hover text { fill: #f4f4f1; }
.hero-fig--stack .st-slab text:first-of-type { fill: #f24850 !important; }
@media (prefers-reduced-motion: reduce) { .hero-fig--stack .st-slab, .hero-fig--stack .st-op, .hero-fig--stack .st-side-t, .hero-fig--stack .st-rod, .hero-fig--stack .st-rodlabel { transition: none; } .hero-fig--stack .st-slab, .hero-fig--stack .st-op, .hero-fig--stack .st-side-t { transform: translateY(var(--drop)); } .hero-fig--stack .st-rod { stroke-dashoffset: 0; } .hero-fig--stack .st-rodlabel { opacity: 1; } }
@media (max-width: 700px) { .hero-fig--stack text { display: none; } }

/* one instruction through the layers */
.flow { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); background: var(--rule); display: grid; gap: 1px; position: relative; }
.flow-band { background: var(--bg-card); position: relative; }
.flow-band > a, .flow-band--edge { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 24px; align-items: baseline; padding: 20px 24px; color: inherit; text-decoration: none; }
.flow-band--edge { background: var(--bg-raised); }
.flow-band .flow-what { color: var(--fg-muted); opacity: 0; transform: translateX(-6px); transition: opacity .6s ease, transform .6s ease; }
.flow-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: 1; }
.flow.is-on .flow-band::before { transform: scaleY(1); }
.flow.is-on .flow-band .flow-what { opacity: 1; transform: none; }
.flow.is-on .flow-band:nth-child(1)::before, .flow.is-on .flow-band:nth-child(1) .flow-what { transition-delay: .1s; }
.flow.is-on .flow-band:nth-child(2)::before, .flow.is-on .flow-band:nth-child(2) .flow-what { transition-delay: .55s; }
.flow.is-on .flow-band:nth-child(3)::before, .flow.is-on .flow-band:nth-child(3) .flow-what { transition-delay: 1s; }
.flow.is-on .flow-band:nth-child(4)::before, .flow.is-on .flow-band:nth-child(4) .flow-what { transition-delay: 1.45s; }
.flow.is-on .flow-band:nth-child(5)::before, .flow.is-on .flow-band:nth-child(5) .flow-what { transition-delay: 1.9s; }
.flow.is-on .flow-band:nth-child(6)::before, .flow.is-on .flow-band:nth-child(6) .flow-what { transition-delay: 2.35s; }
.flow.is-on .flow-band:nth-child(7)::before, .flow.is-on .flow-band:nth-child(7) .flow-what { transition-delay: 2.8s; }
.flow-band > a:hover { background: var(--bg-raised); }
@media (max-width: 900px) { .flow-band > a, .flow-band--edge { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .flow-band::before, .flow-band .flow-what { transition: none; } .flow-band::before { transform: none; } .flow-band .flow-what { opacity: 1; transform: none; } }

/* the record of one transaction */
.record { border: 1px solid var(--rule); background: var(--bg-card); margin-top: 40px; }
.record-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--rule); }
.record-lines { list-style: none; margin: 0; padding: 0; }
.record-lines li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.record-lines li:first-child { border-top: 0; }
.record-lines li span:nth-child(2) { color: var(--fg); }
.record.is-on .record-lines li { opacity: 1; transform: none; }
.record.is-on .record-lines li:nth-child(1) { transition-delay: .2s; } .record.is-on .record-lines li:nth-child(2) { transition-delay: 1s; } .record.is-on .record-lines li:nth-child(3) { transition-delay: 1.6s; } .record.is-on .record-lines li:nth-child(4) { transition-delay: 2.4s; } .record.is-on .record-lines li:nth-child(5) { transition-delay: 3.2s; } .record.is-on .record-lines li:nth-child(6) { transition-delay: 4s; }
.stamp { display: inline-block; padding: 3px 8px; border: 1px solid var(--accent); color: var(--accent-text); letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; transform: scale(1.4); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.stamp--ink { border-color: var(--fg); color: var(--fg); }
.record.is-on .stamp { transform: none; opacity: 1; }
.record.is-on li:nth-child(1) .stamp { transition-delay: .6s; } .record.is-on li:nth-child(2) .stamp { transition-delay: 1.4s; } .record.is-on li:nth-child(3) .stamp { transition-delay: 2s; } .record.is-on li:nth-child(4) .stamp { transition-delay: 2.8s; } .record.is-on li:nth-child(5) .stamp { transition-delay: 3.6s; } .record.is-on li:nth-child(6) .stamp { transition-delay: 4.4s; }
@media (max-width: 700px) { .record-lines li { grid-template-columns: 32px minmax(0, 1fr); } .record-lines li .stamp { grid-column: 2; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .record-lines li, .stamp { transition: none; opacity: 1; transform: none; } }

/* links in running text: the underline turns red on hover, the word stays */
a:hover, a:focus-visible { text-decoration-color: var(--accent); }
.dl dt a:hover, .dl dd a:hover, .prose a:hover, .footer a:hover, .subnav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* the building in section */
.hero-fig--section { aspect-ratio: 1200 / 500; }
.hero-fig--section .sf-shaft { transition: stroke-dashoffset 1s ease .2s; }
.hero-fig--section.is-on .sf-shaft { stroke-dashoffset: 0; }
.hero-fig--section .sf-room { opacity: .35; transition: opacity .5s ease; transition-delay: calc(1.3s + var(--i, 0) * .9s); }
.hero-fig--section .sf-level { --i: 0; }
.hero-fig--section.is-on .sf-level .sf-room { opacity: 1; }
.hero-fig--section .sf-cab { transform: translateY(0); }
.hero-fig--section.is-on .sf-cab { animation: sf-cab 6s cubic-bezier(.4,0,.2,1) 1.1s forwards; }
@keyframes sf-cab {
  0% { transform: translateY(0); } 10% { transform: translateY(0); }
  18% { transform: translateY(calc(var(--travel) * .16)); } 26% { transform: translateY(calc(var(--travel) * .16)); }
  34% { transform: translateY(calc(var(--travel) * .33)); } 42% { transform: translateY(calc(var(--travel) * .33)); }
  50% { transform: translateY(calc(var(--travel) * .50)); } 58% { transform: translateY(calc(var(--travel) * .50)); }
  66% { transform: translateY(calc(var(--travel) * .67)); } 74% { transform: translateY(calc(var(--travel) * .67)); }
  82% { transform: translateY(calc(var(--travel) * .84)); } 90% { transform: translateY(calc(var(--travel) * .84)); }
  100% { transform: translateY(var(--travel)); }
}
.hero-fig--section .sf-level .sf-floor { transition: fill .2s ease; }
.hero-fig--section .sf-level:hover .sf-floor { fill: #1b2029; }
.hero-fig--section .sf-level:hover text { fill: #f4f4f1; }
.hero-fig--section .sf-level .sf-num { fill: #f24850 !important; }
@media (prefers-reduced-motion: reduce) { .hero-fig--section .sf-shaft, .hero-fig--section .sf-room { transition: none; } .hero-fig--section .sf-shaft { stroke-dashoffset: 0; } .hero-fig--section .sf-room { opacity: 1; } .hero-fig--section.is-on .sf-cab { animation: none; transform: translateY(var(--travel)); } }
@media (max-width: 700px) { .hero-fig--section text { display: none; } }

/* the data-centre map: fills the right column, no frame, fades under the facts */
.grid--stretch { align-items: stretch; }
.map-row { position: relative; }
.map-facts { position: relative; z-index: 1; }
.map-col { position: relative; min-height: 420px; }
.map-col [data-variant-panel] { position: absolute; top: 0; bottom: 0; right: -40px; left: -34%; }
.map-fig { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 40%); }
.map-fig svg { width: 100%; height: 100%; display: block; }
.map-fig .mp-arc { animation: ef-march 1.2s linear infinite; }
.map-fig .mp-pulse { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .map-fig .mp-arc { animation: none; } .map-fig .mp-pulse { display: none; } }
@media (max-width: 960px) { .map-col { min-height: 0; aspect-ratio: 3 / 2; } .map-col [data-variant-panel] { left: 0; right: 0; } .map-fig { -webkit-mask-image: none; mask-image: none; } }

/* launch version */
.nav--launch { display: flex; }
.cols--launch { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 960px) { .cols--launch { grid-template-columns: minmax(0, 1fr); } }