/* Itos Technologies, site styles.
   Layout: one long page told as chapters. Deep hero, then a light "anatomy" walkthrough with a sticky
   isometric figure of a vault, then who it is for, the team, and a Deep request-access close.
   Colour and type come from the Itos design system (Ledger green and brass). */

/* Light enterprise theme: white ground, near-black ink, one blue accent. Single theme by choice. */
:root {
  color-scheme: light;
  /* Surfaces */
  --ground: #ffffff; --card: #ffffff; --panel: #f7f8fa; --line: #e5e7eb; --line-strong: #cfd4dc;
  /* Text */
  --ink: #0b0d12; --muted: #5b6271; --faint: #9aa1ad;
  /* Accent (blue): buttons, links, the one highlight per view */
  --green: #0b0d12; --green-hover: #252a33; --green-text: #2251cc; --green-tint: #eaf0fd; --on-green: #ffffff;
  --brass: #2251cc; --focus: #2251cc;
  /* Design-system names used by the shared components (NavBar, Mark, Preloader) */
  --primary: #0b0d12; --primary-hover: #252a33; --on-primary: #ffffff; --accent: #2251cc; --accent-tint: #eaf0fd;
  --inverse: #0b0d12; --inverse-line: #2a2f3a; --on-inverse: #f5f7fa; --on-inverse-muted: #9aa1ad; --accent-on-inverse: #7aa2ff;
  --shadow-float: 0 1px 2px rgba(11, 13, 18, 0.05), 0 8px 24px -12px rgba(11, 13, 18, 0.12);
  /* Former "deep" tokens now resolve to light values, so every section shares one ground */
  --deep: #ffffff; --tide: #e5e7eb; --on-deep: #0b0d12; --on-deep-muted: #5b6271; --brass-on-deep: #2251cc;
  /* Figure tones: white tops, two cool greys, ink edges */
  --fig-top: #ffffff; --fig-left: #eef1f5; --fig-right: #dbe1ea; --fig-ink: #0b0d12; --fig-floor: #d3d9e2;
  --fig-venue-a: #f4f6f9; --fig-venue-b: #e8ecf2; --fig-venue-c: #f7f8fa;
  /* Type */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans: var(--font-body);
  --font-wordmark: "Inter Tight", Inter, system-ui, sans-serif;
  /* Space, radius, stroke */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-24: 96px; --space-40: 160px;
  --radius-0: 0; --radius-sm: 6px; --radius-pill: 999px;
  --stroke-hairline: 1px; --stroke-rule: 1px; --stroke-bracket: 1.5px;
  /* Motion */
  --dur-quick: 240ms; --dur-settle: 480ms; --dur-reveal: 800ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ground); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.eyebrow { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-text); margin: 0; }
.deep .eyebrow { color: var(--on-deep-muted); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.02; }
h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--muted); max-width: var(--measure); margin: 0; }
.deep .lead { color: var(--on-deep-muted); }
p { margin: 0; }

/* ---------------------------------------------------------------- Deep chapters */
.deep { background: var(--deep); color: var(--on-deep); }
.tide { background: var(--ground); }
.hero.tide {
  background:
    radial-gradient(900px 420px at 78% 18%, rgba(34, 81, 204, 0.07), transparent 70%),
    linear-gradient(var(--ground), var(--ground));
  border-bottom: 1px solid var(--line);
}
.hero.tide::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 35%, #000 20%, transparent 75%);
}
.hero__inner { position: relative; }
.access.tide { background: var(--panel); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; overflow: hidden; }
.hero__inner { padding-block: clamp(112px, 13vw, 152px) clamp(56px, 7vw, 96px); display: grid; gap: clamp(40px, 6vw, 72px); transform-origin: 50% 0; will-change: transform; }
.hero h1 { font-size: clamp(46px, 8.4vw, 116px); line-height: 0.94; letter-spacing: -0.04em; max-width: 11.5ch; }
@media (min-width: 1040px) { .hero h1 { font-size: clamp(60px, 5.8vw, 92px); max-width: 11ch; } }
.hero h1 .turn { display: block; color: var(--brass-on-deep); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: var(--radius-pill);
  font: 600 14px/1 var(--font-display); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 0;
  transition: background-color var(--dur-quick) var(--ease-settle), color var(--dur-quick) var(--ease-settle), border-color var(--dur-quick) var(--ease-settle);
}
.btn--light { background: var(--ink); color: #ffffff; box-shadow: 0 1px 2px rgba(11, 13, 18, 0.12); }
.btn--light:hover { background: #252a33; }
.btn--ghost { background: #ffffff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--green { background: var(--green); color: var(--on-green); }
.btn--green:hover { background: var(--green-hover); }
.deep :focus-visible { outline-color: var(--on-deep); }


/* Hero scene: the vault between two chains, drawn in the same isometric language as Fig. 1 */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-8); } }
.hero__copy { display: grid; gap: var(--space-6); align-content: center; }
.hero__copy .eyebrow { margin-bottom: var(--space-2); }
.scene { margin: 0; position: relative; }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1039px) { .scene { max-width: 640px; margin-inline: auto; width: 100%; } }
.s-floor circle { fill: #d3d9e2; }
.s-top { fill: #ffffff; } .s-left { fill: #eef1f5; } .s-right { fill: #dbe1ea; }
.s-edge { fill: none; stroke: #0b0d12; stroke-width: 0.9; stroke-linejoin: round; opacity: 0.28; }
.s-vault .s-top { fill: #ffffff; } .s-vault .s-left { fill: #e3e7ee; } .s-vault .s-right { fill: #cbd2dd; }
.s-vault .s-edge { opacity: 0.55; }
.s-held { fill: #0b0d12; }
.s-brass { fill: #2251cc; }
.s-settled { fill: #2251cc; opacity: 0.9; }
.s-pipe { fill: none; stroke: #0b0d12; stroke-width: 1.1; opacity: 0.18; }
.s-flow { fill: none; stroke: #0b0d12; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 13; opacity: 0.7; animation: flow 1.2s linear infinite; }
.s-flow--yield { stroke: #2251cc; stroke-width: 2.8; opacity: 1; }
.s-coin { fill: #2251cc; }
.s-coin-edge { fill: none; stroke: #ffffff; stroke-width: 0.8; }
.s-label { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; fill: #93a19a; text-transform: uppercase; }

/* ---------------------------------------------------------------- Anatomy */
.anatomy { position: relative; padding-block: clamp(64px, 8vw, 112px) var(--space-24); }
.anatomy__head { display: grid; gap: var(--space-6); max-width: 46rem; padding-top: var(--space-6); }
@media (min-width: 960px) { .chapter:first-of-type { margin-top: 34vh; } }
/* Chapters fade and rise in as they reach the reader (only once the script has run). */
.reveal .chapter { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease-settle), transform 900ms var(--ease-settle); }
.reveal .chapter.is-in { opacity: 1; transform: none; }
.anatomy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 960px) { .anatomy__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); } }

.figure-col { order: -1; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 2; align-self: start; background: var(--ground); padding-block: var(--space-2); }
@media (min-width: 960px) { .figure-col { order: 0; top: calc(env(safe-area-inset-top, 0px) + 96px); background: transparent; padding-block: 0; } }

.chapters { display: grid; }
.chapter { min-height: 82vh; padding-block: clamp(32px, 6vh, 64px); display: grid; align-content: center; gap: var(--space-6); scroll-margin-top: 96px; }
@media (max-width: 959px) { .chapter { min-height: 0; padding-block: 56px; } }
.chapter__num { font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--muted); display: flex; align-items: center; gap: var(--space-3); }
.chapter__num::after { content: ""; flex: 0 0 40px; height: 1px; background: var(--line-strong); }
.chapter h3 { color: var(--muted); transition: color var(--dur-reveal) var(--ease-settle); }
.chapter.is-active h3 { color: var(--ink); }
.chapter .body { color: var(--muted); max-width: var(--measure); font-size: 17px; line-height: 1.6; }
.chapter.is-active .body { color: var(--ink); }
.chapter .body { transition: color var(--dur-reveal) var(--ease-settle); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); max-width: 36rem; }
.facts > div { padding: var(--space-4) var(--space-4) var(--space-4) 0; display: grid; gap: 6px; align-content: start; }
.facts > div + div { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.facts b { font: 600 14px/1.25 var(--font-display); letter-spacing: -0.005em; }
.facts span { font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 560px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div { padding: var(--space-3) 0; }
  .facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
.note { font-size: 13px; line-height: 1.55; color: var(--muted); max-width: var(--measure); padding-left: var(--space-4); border-left: 1px solid var(--line-strong); }
.note sup { font: 500 10px/1 var(--font-mono); color: var(--green-text); margin-right: 4px; }

/* ---------------------------------------------------------------- Figure */
.fig { position: relative; display: grid; gap: var(--space-4); }
.fig__stage { position: relative; width: 100%; }
.fig svg { display: block; width: 100%; height: auto; max-height: 64vh; }
@media (max-width: 959px) { .fig svg { max-height: 38vh; } }
.fig__caption { display: flex; justify-content: space-between; gap: var(--space-4); font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.fig__caption output { color: var(--ink); }

/* ---------------------------------------------------------------- For whom */
.forwho { padding-block: var(--space-24); border-top: 1px solid var(--line); }
.forwho__head { display: grid; gap: var(--space-6); max-width: 44rem; margin-bottom: var(--space-12); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.cols > div { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: grid; gap: var(--space-3); align-content: start; }
.cols > div + div { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.cols h4 { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.cols p { color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 820px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > div { padding: var(--space-6) 0; }
  .cols > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- Team */
.team { padding-block: var(--space-24); background: var(--panel); }
.team__head { display: grid; gap: var(--space-6); max-width: 44rem; margin-bottom: var(--space-12); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.person { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.person .role { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-text); }
.person h4 { font: 600 22px/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.person p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.person__link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); font: 600 13px/1 var(--font-display); color: var(--green-text); text-decoration: none; padding: 8px 12px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); transition: border-color var(--dur-quick) var(--ease-settle), background-color var(--dur-quick) var(--ease-settle); }
.person__link svg { width: 14px; height: 14px; fill: currentColor; }
.person__link span { font-weight: 500; opacity: 0.7; }
.person__link:hover { border-color: var(--green-text); background: var(--green-tint); }
.person { grid-template-rows: auto auto 1fr auto; }
.vendor { margin-top: var(--space-3); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-6); display: grid; gap: var(--space-2); max-width: 100%; }
.vendor b { font: 600 15px/1.3 var(--font-display); }
.vendor p { font-size: 14px; color: var(--muted); max-width: 52rem; }
@media (max-width: 860px) { .people { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Access */
.access { padding-block: var(--space-40) var(--space-24); }
.access__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: start; }
@media (min-width: 900px) { .access__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.access__copy { display: grid; gap: var(--space-6); }
.access h2 { font-size: clamp(38px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.035em; }
.access h2 .turn { color: var(--brass-on-deep); }
.form { display: grid; gap: var(--space-4); background: rgba(0, 0, 0, 0); border-top: 1px solid var(--tide); padding-top: var(--space-6); }
.form .field { display: grid; gap: 6px; }
.form label { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-deep-muted); }
.form input, .form select {
  width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--on-deep); background: transparent;
  border: 0; border-bottom: 1px solid var(--tide); border-radius: 0; padding: 10px 0; outline: none;
}
.form select option { color: #0b0d12; background: #ffffff; }
.form input:focus, .form select:focus { border-bottom-color: var(--on-deep); }
.form input::placeholder { color: var(--on-deep-muted); opacity: 0.7; }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .form .row2 { grid-template-columns: minmax(0, 1fr); } }
.form .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding-top: var(--space-2); }
.form .status { font-size: 14px; color: var(--on-deep-muted); min-height: 1.4em; }
.form .status.is-ok { color: var(--brass-on-deep); }
.form .error { font-size: 13px; color: #b42318; min-height: 0; }
.hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- Footer */
.foot { padding-block: var(--space-12) var(--space-12); border-top: 1px solid var(--line); background: var(--ground); }
.foot__row { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: space-between; align-items: flex-start; }
.foot__brand { text-decoration: none; color: var(--on-deep); display: flex; align-items: center; gap: 12px; --itos-mark-ink: var(--on-deep); --itos-mark-brass: var(--brass-on-deep); }
.foot__brand .w { display: grid; gap: 5px; }
.foot__brand .w b { font: 600 18px/1 var(--font-wordmark); letter-spacing: -0.02em; }
.foot__brand .w span { font: 600 8px/1 var(--font-wordmark); letter-spacing: 0.22em; color: var(--on-deep-muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; font-size: 14px; }
.foot__links a { color: var(--on-deep-muted); text-decoration: none; }
.foot__links a:hover { color: var(--on-deep); }
.disclaimer { margin-top: var(--space-8); font-size: 12px; line-height: 1.6; color: var(--on-deep-muted); max-width: 60rem; }

/* ---------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero__inner { transform: none !important; }
}
@media (max-width: 600px) { .fig__caption > span { display: none; } .fig__caption { justify-content: flex-end; } }

/* Phones and narrow tablets: no pinned figure. Each chapter carries its own copy of Fig. 1,
   already focused on that chapter's part, so the page reads figure, text, figure, text. */
.chapter__fig { display: none; }
@media (max-width: 959px) {
  .figure-col { display: none; }
  .chapter { padding-block: 40px 48px; gap: var(--space-4); border-top: 1px solid var(--line); }
  .anatomy__head + .chapter { border-top: 0; }
  .chapter__fig { display: block; margin: 0 calc(-1 * var(--space-2)) var(--space-2); }
  .chapter__fig svg { display: block; width: 100%; height: auto; max-height: 300px; }
  .chapter h3, .chapter .body { color: var(--ink); }
  .anatomy__head { padding-top: 0; padding-bottom: var(--space-8); }
}

/* Light theme overrides for the design-system components */
.itos-nav .itos-nav__word { text-transform: none; font-size: 17px; letter-spacing: -0.02em; }
.itos-nav__bar { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 8px 24px -12px rgba(11, 13, 18, 0.12); }
.itos-nav__mark, .foot__brand, .itos-preloader { --itos-mark-ink: #0b0d12; --itos-mark-brass: #2251cc; }
.itos-preloader { background: #ffffff; }
.itos-preloader.is-relay { background: transparent; }
.itos-preloader__num, .itos-preloader__stage-label { color: #0b0d12; }
.itos-preloader__count { color: #5b6271; }
.itos-preloader__br { border-color: #cfd4dc; }
.itos-preloader__stage-label { border-left-color: #e5e7eb; }
.chip { color: var(--ink); border-color: var(--line); }

/* ---------------------------------------------------------------- Anatomy: a pinned figure, chapters that scroll */
.explorer {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.explorer__aside { position: sticky; top: 76px; align-self: start; display: grid; padding: 24px 32px 0 0; }
.explorer__fig { margin: 0; display: grid; gap: 12px; }
.explorer__fig .fig__stage { position: relative; }
.explorer__panels { border-left: 1px solid var(--line); }
.explorer .panel.chapter {
  min-height: 78vh; margin: 0; padding: 48px 0 48px clamp(24px, 4vw, 56px); border: 0; display: grid; align-content: center; gap: 16px;
  opacity: 0.28; transform: none; visibility: visible;
  transition: opacity 500ms var(--ease-settle);
}
.explorer .panel.chapter + .panel.chapter { border-top: 1px solid var(--line); }
.explorer .panel.chapter.is-active { opacity: 1; }
.explorer .panel h3 { color: var(--ink); font-size: clamp(24px, 2.4vw, 32px); }
.explorer .panel .body { color: var(--ink); font-size: 16px; max-width: 34rem; }
.explorer .facts { grid-template-columns: minmax(0, 1fr); max-width: 34rem; border-top: 0; }
.explorer .facts > div { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-left: 0; border-top: 1px solid var(--line); }
.explorer .facts > div + div { padding-left: 0; border-left: 0; }
.panel__next { justify-self: start; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; text-decoration: none; font: 600 14px/1 var(--font-display); color: var(--green-text); }
.panel__next:hover { text-decoration: underline; text-underline-offset: 3px; }
.tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--line); }
.tab {
  position: relative; display: grid; gap: 6px; padding: 14px 10px 16px 0; text-decoration: none;
  font: 600 14px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--muted);
  transition: color var(--dur-quick) var(--ease-settle);
}
.tab::before { content: ""; position: absolute; left: 0; right: 12px; top: -1px; height: 2px; background: transparent; transition: background-color var(--dur-settle) var(--ease-settle); }
.tab__n { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; }
.tab:hover { color: var(--ink); }
.tab[aria-current] { color: var(--ink); }
.tab[aria-current]::before { background: var(--green-text); }
.tab[aria-current] .tab__n { color: var(--green-text); }
.tab:focus-visible { outline-offset: 2px; }
@media (max-width: 899px) {
  .explorer { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .explorer__aside { top: 64px; z-index: 5; padding: 8px 0 0; background: var(--ground); border-bottom: 1px solid var(--line); }
  .explorer__fig .fig__caption { display: none; }
  .fig .fig__stage svg { max-height: 30vh; }
  .tabs { margin-top: 8px; }
  .tab { padding: 10px 6px 12px 0; font-size: 12px; gap: 4px; }
  .tab::before { right: 6px; }
  .tab__n { font-size: 10px; }
  .explorer__panels { border-left: 0; }
  .explorer .panel.chapter { min-height: 62vh; padding: 40px 0; align-content: start; }
  .explorer .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 420px) { .tab__t { font-size: 11px; } }

/* ---------------------------------------------------------------- Soft frame, after Stripe
   Two hairline rails run the full height of the page at the edges of the content column, and
   each section opens with a hairline between them that carries a short blue lead-in. */
body { position: relative; }
body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  --rail: min(1200px, 100%);
  background:
    linear-gradient(var(--line), var(--line)) no-repeat calc(50% - var(--rail) / 2) 0 / 1px 100%,
    linear-gradient(var(--line), var(--line)) no-repeat calc(50% + var(--rail) / 2 - 1px) 0 / 1px 100%;
}
.anatomy, .forwho, .team, .access, .foot { position: relative; border-top: 0 !important; }
.anatomy::before, .forwho::before, .team::before, .access::before, .foot::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, 100%); height: 1px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(34, 81, 204, 0) 0, rgba(34, 81, 204, 0.6) 6%, rgba(34, 81, 204, 0) 28%),
    var(--line);
}
.hero.tide { border-bottom: 0; }
.team { background: linear-gradient(180deg, #f8fafd, var(--ground)); }
.access.tide { background: radial-gradient(900px 380px at 50% 100%, rgba(34, 81, 204, 0.08), transparent 70%), #f8fafd; }
@media (max-width: 1231px) { body::after { display: none; } }
@media (max-width: 1231px) and (min-width: 720px) {
  body::after { display: block; --rail: calc(100% - 32px); }
}

/* Hero field */



@media (min-width: 900px) { .explorer__fig { align-content: center; } }

/* ---------------------------------------------------------------- Fig. 1, the isometric vault */
.fig svg { overflow: visible; }
.f-floor circle { fill: var(--fig-floor); }
.f-top { fill: var(--fig-top); } .f-left { fill: var(--fig-left); } .f-right { fill: var(--fig-right); }
.f-edge { fill: none; stroke: var(--fig-ink); stroke-width: 1; stroke-linejoin: round; opacity: 0.55; }
.f-held { fill: var(--fig-ink); }
.f-brass { fill: var(--green-text); }
.f-code { stroke: var(--fig-ink); stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.f-tether { stroke: var(--fig-ink); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.45; }
.f-bracket { fill: none; stroke: var(--green-text); stroke-width: 2; stroke-linecap: round; }
.f-pipe { fill: none; stroke: var(--fig-ink); stroke-width: 1.25; opacity: 0.18; transition: stroke var(--dur-settle) var(--ease-settle), opacity var(--dur-settle) var(--ease-settle); }
.f-flow { fill: none; stroke: var(--fig-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1.5 14; opacity: 0.5; }
.f-flow--yield { stroke: var(--green-text); opacity: 0.8; }
.f-va { fill: var(--fig-venue-a); } .f-vb { fill: var(--fig-venue-b); } .f-vc { fill: var(--fig-venue-c); }
.f-glyph { fill: none; stroke: var(--fig-ink); stroke-width: 1.5; stroke-linecap: round; opacity: 0.7; }
.f-coin { fill: var(--green-text); }
.f-tag circle { fill: var(--ground); stroke: var(--line-strong, #cfd4dc); stroke-width: 1; transition: fill var(--dur-quick) var(--ease-settle), stroke var(--dur-quick) var(--ease-settle); }
.f-tag text { font: 500 10px/1 var(--font-mono); fill: var(--muted); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.04em; transition: fill var(--dur-quick) var(--ease-settle); }
.f-tag line { stroke: var(--fig-ink); stroke-width: 1; opacity: 0.25; }
/* Packets: a dot with a soft halo easing along each pipe. */
.f-pkt__dot { fill: var(--fig-ink); }
.f-pkt__halo { fill: var(--fig-ink); opacity: 0.08; }
.f-pkt--yield .f-pkt__dot { fill: var(--green-text); }
.f-pkt--yield .f-pkt__halo { fill: var(--green-text); opacity: 0.18; }
@keyframes flow { to { stroke-dashoffset: -31; } }
.is-live .f-flow, .is-live .s-flow { animation: flow 1.6s linear infinite; }
.s-flow { animation: none; }
.s-pkt .f-pkt__dot { fill: #0b0d12; }
.s-pkt .f-pkt__halo { fill: #0b0d12; opacity: 0.07; }

/* Focus: the part in view lifts and takes the accent; the rest settle back. */
.fig .part { transition: opacity 600ms var(--ease-settle), transform 600ms var(--ease-settle), filter 600ms var(--ease-settle); }
.fig[data-focus]:not([data-focus="all"]) .part { opacity: 0.22; }
.fig[data-focus="signals"] .part.p-vault, .fig[data-focus="rules"] .part.p-vault,
.fig[data-focus="venues"] .part.p-vault, .fig[data-focus="yield"] .part.p-vault { opacity: 0.7; }
.fig[data-focus="vault"] .part.p-vault, .fig[data-focus="signals"] .part.p-signals, .fig[data-focus="rules"] .part.p-rules,
.fig[data-focus="venues"] .part.p-venues, .fig[data-focus="yield"] .part.p-yield {
  opacity: 1; transform: translateY(-5px); filter: drop-shadow(0 14px 18px rgba(34, 81, 204, 0.12));
}
.fig[data-focus="vault"] .p-vault .f-tag circle, .fig[data-focus="signals"] .p-signals .f-tag circle, .fig[data-focus="rules"] .p-rules .f-tag circle,
.fig[data-focus="venues"] .p-venues .f-tag circle, .fig[data-focus="yield"] .p-yield .f-tag circle { fill: var(--green-text); stroke: var(--green-text); }
.fig[data-focus="vault"] .p-vault .f-tag text, .fig[data-focus="signals"] .p-signals .f-tag text, .fig[data-focus="rules"] .p-rules .f-tag text,
.fig[data-focus="venues"] .p-venues .f-tag text, .fig[data-focus="yield"] .p-yield .f-tag text { fill: #fff; }
.fig[data-focus="signals"] .p-signals .f-pipe, .fig[data-focus="venues"] .p-venues .f-pipe { stroke: var(--green-text); opacity: 0.4; }
.fig[data-focus="signals"] .p-signals .f-pkt__dot, .fig[data-focus="venues"] .p-venues .f-pkt__dot { fill: var(--green-text); }
.fig[data-focus="signals"] .p-signals .f-pkt__halo, .fig[data-focus="venues"] .p-venues .f-pkt__halo { fill: var(--green-text); opacity: 0.18; }
/* The rules plate hovers above the vault, then drops and locks from chapter 03 on. */
.rules-plate { transition: transform 900ms var(--ease-settle); transform: translateY(-26px); }
.fig[data-focus="rules"] .rules-plate, .fig[data-focus="venues"] .rules-plate, .fig[data-focus="yield"] .rules-plate, .fig[data-focus="all"] .rules-plate { transform: translateY(0); }
.f-bracket { opacity: 0; transition: opacity 600ms var(--ease-settle) 300ms; }
.fig[data-focus="rules"] .f-bracket, .fig[data-focus="venues"] .f-bracket, .fig[data-focus="yield"] .f-bracket, .fig[data-focus="all"] .f-bracket { opacity: 1; }
@keyframes hover-plate { 50% { transform: translateY(-31px); } }
.fig[data-focus="vault"] .is-live .rules-plate, .fig[data-focus="signals"] .is-live .rules-plate { animation: hover-plate 3.2s var(--ease-settle) infinite; }
@media (prefers-reduced-motion: reduce) { .fig .part, .rules-plate { transition: none; } .is-live .f-flow, .is-live .s-flow, .rules-plate { animation: none !important; } }
/* Team: one hairline grid instead of separate cards. */
.people { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.person { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: var(--space-8) var(--space-6) var(--space-8) 0; }
.person + .person { border-left: 1px solid var(--line); padding-left: var(--space-6); }
@media (max-width: 860px) {
  .person, .person + .person { padding: var(--space-6) 0; border-left: 0; }
  .person + .person { border-top: 1px solid var(--line); }
}
@media (max-width: 899px) { .explorer__aside { top: 0; padding-top: 72px; } }