/* ==========================================================================
   TrekPay site
   Colours from the Kerrigan palette, plus the cyan of Transparent Delta.
   html[data-world] is the page's Transparent / Shielded view.
   ========================================================================== */

:root {
  --p: #8341ed;
  --p-mid: #5a2da8;
  --p-deep: #2a1052;
  --p-light: #bd81fb;
  --g: #43de78;
  --g-light: #86f0a8;
  --c: #6fe3f0;
  --c-deep: #1b8fa6;

  --t1: #efedf5;
  --t2: #bfb9cf;
  --t3: #938ca8;

  --f-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --bar: 68px;
  --notch: 12px;
}

html[data-world='shielded'] {
  --a: var(--p-light);
  --a-solid: var(--p);
  --a2: var(--g);
  --panel: rgba(20, 8, 40, 0.62);
  --panel-2: rgba(131, 65, 237, 0.1);
  --line: rgba(131, 65, 237, 0.34);
  --line-strong: rgba(189, 129, 251, 0.7);
  --glow: rgba(131, 65, 237, 0.45);
  --btn: linear-gradient(90deg, #8341ed, #bd81fb);
  --btn-ink: #fff;
}

html[data-world='transparent'] {
  --a: var(--c);
  --a-solid: var(--c-deep);
  --a2: var(--g);
  --panel: rgba(7, 32, 46, 0.62);
  --panel-2: rgba(111, 227, 240, 0.08);
  --line: rgba(111, 227, 240, 0.3);
  --line-strong: rgba(111, 227, 240, 0.72);
  --glow: rgba(111, 227, 240, 0.34);
  --btn: linear-gradient(90deg, #43de78, #6fe3f0);
  --btn-ink: #03140c;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  background: #050208;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--t1);
  font-family: var(--f-body);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
code { font-family: var(--f-mono); }

:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 60;
  padding: 8px 14px;
  background: #000;
  border: 1px solid var(--a);
}
.skip:focus { top: 12px; }

/* World helpers: text that belongs to one view only */
html[data-world='shielded'] .w-t,
html[data-world='transparent'] .w-s { display: none; }

/* ---------- Backdrop ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  transition: opacity 0.6s ease;
}
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 80%);
}
.bg--s {
  background:
    radial-gradient(60% 55% at 18% 8%, rgba(131, 65, 237, 0.3), transparent 70%),
    radial-gradient(55% 45% at 85% 95%, rgba(67, 222, 120, 0.12), transparent 70%),
    #050208;
}
.bg--t {
  opacity: 0;
  background:
    radial-gradient(60% 55% at 18% 8%, rgba(70, 200, 225, 0.24), transparent 70%),
    radial-gradient(55% 45% at 85% 95%, rgba(131, 65, 237, 0.2), transparent 70%),
    #03101a;
}
html[data-world='transparent'] .bg--t { opacity: 1; }

.stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

/* The sweep across the page when the view changes */
.scan {
  position: fixed;
  top: -3px;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  height: 3px;
  background: linear-gradient(90deg, var(--p), var(--p-light) 30%, #fff 50%, var(--c) 70%, var(--g));
  box-shadow: 0 0 22px 6px var(--glow);
  pointer-events: none;
  view-transition-name: scan;
}
html.is-wiping .scan { display: block; }

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-group(scan),
::view-transition-old(scan),
::view-transition-new(scan) { animation: none; }
::view-transition-group(root) { z-index: 1; }
::view-transition-group(scan) { z-index: 2; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--bar);
  padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.topbar.is-stuck {
  background: rgba(5, 3, 10, 0.78);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.brand em { color: var(--a); font-style: normal; transition: color 0.3s; }

.nav {
  display: flex;
  gap: 26px;
  margin-right: auto;
  padding-left: 18px;
}
.nav a {
  color: var(--t2);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav a:hover { color: var(--t1); }

.topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* The switch */
.cloak {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--t3);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cloak__track {
  position: relative;
  display: block;
  width: 50px;
  height: 24px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  transition: border-color 0.3s, background-color 0.3s;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.cloak__thumb {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--a);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
  transition: transform 0.35s cubic-bezier(0.6, 0, 0.2, 1), background-color 0.3s;
}
.cloak[aria-checked='true'] .cloak__thumb { transform: translateX(24px); }
.cloak__side { transition: color 0.3s; }
.cloak[aria-checked='true'] .cloak__side--s,
.cloak[aria-checked='false'] .cloak__side--t { color: var(--a); }

.lang-switch { position: relative; }
.lang-switch__code { color: var(--t2); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; }
.lang-switch__select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Buttons: notched like kerrigan.network ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 26px;
  color: var(--btn-ink);
  background: var(--btn);
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  transition: filter 0.2s, transform 0.2s;
}
.btn:hover { filter: brightness(1.14); transform: translateY(-1px); }
.btn--sm { --notch: 9px; min-height: 40px; padding: 8px 16px; font-size: 0.72rem; white-space: nowrap; }
.btn--ghost { color: var(--t1); background: var(--line-strong); z-index: 0; }
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #0a0612;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
}

/* ---------- Shared bits ---------- */
.eyebrow {
  color: var(--a);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.eyebrow::before { content: '// '; color: var(--a2); }

.section { padding-block: clamp(72px, 10vw, 128px); }

.sec-head { text-align: center; }
.sec-head h2,
.arrival__copy h2 {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 3.5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.16;
  text-transform: uppercase;
}
.sec-head > p:not(.eyebrow) {
  max-width: 62ch;
  margin: 16px auto 0;
  color: var(--t2);
}

/* HUD panel with two corner brackets */
.panel {
  position: relative;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: border-color 0.3s, background-color 0.3s;
}
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--a2);
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.panel__title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--t2);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.panel__title b { color: var(--a2); text-align: right; }
.panel__note { margin-top: 14px; color: var(--t3); font-size: 0.98rem; line-height: 1.35; }

.fine { margin-top: 14px; color: var(--t3); font-size: 1rem; line-height: 1.35; }

/* Delta in both forms, stacked */
.art { position: relative; aspect-ratio: 1; }
.art img,
.flyer__bob img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html[data-world='shielded'] .art__t,
html[data-world='transparent'] .art__s { opacity: 0; transform: scale(0.94); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--bar);
}
/* Where the hero ends: the beam again, lying down. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 -14px;
  height: 28px;
  background:
    linear-gradient(90deg, transparent, var(--p) 16%, var(--p-light) 36%, #fff 50%, var(--c) 64%, var(--g) 84%, transparent) center / 100% 1px no-repeat,
    radial-gradient(50% 50% at 50% 50%, var(--glow), transparent);
  pointer-events: none;
}
.hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-block: 16px 44px;
}
.hero__title {
  margin-top: 16px;
  font-family: var(--f-display);
  font-size: clamp(1.72rem, 3.95vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__l1 {
  background: linear-gradient(90deg, #dffbff, #6fe3f0 55%, #43de78);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__l2 {
  background: linear-gradient(90deg, #8341ed, #bd81fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead { max-width: 54ch; margin-top: 20px; color: var(--t2); font-size: 1.28rem; line-height: 1.42; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.stage {
  --x: 50%;
  position: relative;
  width: min(100%, 62vh, 620px);
  aspect-ratio: 1;
  margin-inline: auto;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: 8px;
}
.stage__img {
  position: absolute;
  inset: 5%;
  width: 90%;
  height: 90%;
  pointer-events: none;
}
.stage__img--light { clip-path: inset(-5% calc(100% - var(--x)) -5% -5%); }
.stage__img--dark { clip-path: inset(-5% -5% -5% var(--x)); }

.stage__rings { position: absolute; inset: 0; pointer-events: none; }
.stage__rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(189, 129, 251, 0.3);
  animation: spin 70s linear infinite;
}
.stage__rings i:nth-child(2) { inset: 9%; border: 1px solid rgba(111, 227, 240, 0.16); animation: none; }
.stage__rings i:nth-child(3) { inset: 18%; border-color: rgba(67, 222, 120, 0.26); animation-direction: reverse; animation-duration: 46s; }
@keyframes spin { to { transform: rotate(360deg); } }

.stage__beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, #fff 14%, #fff 86%, transparent);
  box-shadow: 0 0 16px 3px rgba(255, 255, 255, 0.5), 0 0 40px 8px var(--glow);
}
.stage__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #120822;
  background: #fff;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transform: translate(-50%, -50%);
}
.stage:not(.was-used) .stage__grip { animation: grip 2.2s ease-in-out infinite; }
@keyframes grip { 50% { transform: translate(-50%, -50%) scale(1.12); } }

.stage__tag {
  position: absolute;
  bottom: 4%;
  color: var(--c);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.stage__tag--t { left: 0; }
.stage__tag--s { right: 0; color: var(--p-light); }
.stage__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  color: var(--t3);
  font-size: 0.95rem;
  text-align: center;
  transform: translateY(100%);
  transition: opacity 0.3s;
}
.stage.was-used .stage__hint { opacity: 0; }

/* ---------- The route ---------- */
.section--route { padding-bottom: 40px; }

.route {
  position: relative;
  max-width: 1240px;
  margin: clamp(32px, 6vw, 72px) auto 0;
  padding-inline: var(--gutter);
}
.route__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.route__base {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 3 12;
  stroke-linecap: round;
}
.route__glow {
  fill: none;
  stroke: var(--a);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--a));
  transition: stroke 0.3s;
}

.flyer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 96px;
  height: 96px;
  pointer-events: none;
  will-change: transform;
}
.flyer__bob { position: absolute; inset: 0; animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 0 16px var(--glow)); }
@keyframes bob { 50% { transform: translateY(-7px); } }

.wp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  align-items: center;
  min-height: min(92vh, 720px);
  padding-block: 56px;
}
.wp__copy { grid-column: 1; grid-row: 1; }
.wp__visual { grid-column: 3; grid-row: 1; }
.wp:nth-of-type(even) .wp__copy { grid-column: 3; }
.wp:nth-of-type(even) .wp__visual { grid-column: 1; }

.wp__node {
  position: absolute;
  top: 50%;
  left: calc(50% - 40px);
  z-index: 3;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: #0a0612;
  border: 2px solid var(--line-strong);
  transform: rotate(45deg);
  transition: background-color 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.wp:nth-of-type(even) .wp__node { left: calc(50% + 40px); }
.wp.is-reached .wp__node {
  background: var(--a);
  border-color: #fff;
  box-shadow: 0 0 18px 3px var(--a);
}

.wp__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--a);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.wp__tag b {
  padding: 1px 8px;
  color: var(--a2);
  border: 1px solid var(--a2);
  font-family: var(--f-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.wp h3 {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: clamp(1.28rem, 2.35vw, 1.85rem);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.wp__copy > p:not(.wp__tag):not(.fine) { margin-top: 14px; color: var(--t2); }

.ticks { display: grid; gap: 7px; margin-top: 16px; }
.ticks li { position: relative; padding-left: 22px; line-height: 1.32; }
.ticks li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--a2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.wp__visual { position: relative; display: flex; flex-direction: column; align-items: center; }
.wp__visual > .art { width: min(310px, 74%); margin-bottom: -46px; }
.wp__visual > .art--sm { width: min(210px, 52%); margin-bottom: -30px; }
.wp__visual > .panel,
.wp__visual > .nodes { position: relative; z-index: 2; width: 100%; }

/* Recovery phrase */
.seed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; counter-reset: w; }
.seed li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  counter-increment: w;
  color: var(--t3);
  font-family: var(--f-mono);
  font-size: 0.72rem;
}
.seed li::before { content: counter(w, decimal-leading-zero); }
.seed li::after {
  content: '';
  flex: 1;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--a) 0 7px, transparent 7px 11px);
  opacity: 0.75;
}

/* Ledger */
.ledger__rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ledger__rows > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #0b0714;
}
.ledger__rows dt {
  color: var(--t3);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ledger__rows dd {
  color: var(--t1);
  font-family: var(--f-mono);
  font-size: 0.92rem;
  text-align: right;
  overflow-wrap: anywhere;
}
html[data-world='shielded'] .ledger__rows dd { color: var(--a); }
.ledger__foot { display: flex; justify-content: center; margin-top: 14px; }

/* Video feed */
.panel--video { padding: 0; }
.feed { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.art--corner {
  position: absolute;
  top: -68px;
  right: -22px;
  z-index: 3;
  width: min(190px, 34%);
}
.race { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.race__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
  color: var(--t2);
  font-size: 0.92rem;
  font-weight: 600;
}
.race__row b { color: var(--t1); text-align: right; }
.race__bar { position: relative; height: 6px; background: var(--panel-2); overflow: hidden; }
.race__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--a);
  transform: scaleX(0);
  transform-origin: left;
  animation: race 7s linear infinite;
}
.race__bar--fast::after { background: var(--a2); animation-name: race-fast; }
@keyframes race { to { transform: scaleX(1); } }
@keyframes race-fast { 0% { transform: scaleX(0); } 8%, 100% { transform: scaleX(1); } }

/* KNS */
.kns__input {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 12px;
  background: #0b0714;
  border: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 1rem;
}
.kns__caret { width: 2px; height: 1.1em; margin-left: 2px; background: var(--a); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.kns__link { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 12px; color: var(--t3); font-size: 0.92rem; }
.kns__link i { width: 1px; height: 18px; background: var(--a2); }
.kns__addr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--panel-2); }
.kns__addr code { font-size: 0.92rem; }
.kns__ok { color: var(--g); font-size: 0.92rem; }
.kns__ok::before { content: '✓ '; }
.kns__zones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kns__zones li {
  padding: 1px 8px;
  color: var(--t2);
  border: 1px solid color-mix(in srgb, var(--z) 55%, transparent);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  transition: color 0.25s, background-color 0.25s;
}
.kns__zones li.is-on { color: #fff; background: color-mix(in srgb, var(--z) 58%, transparent); }

/* Nodes */
.nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.node__name { color: var(--t2); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.node__coll { margin-top: 4px; font-family: var(--f-display); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 800; white-space: nowrap; }
.node__coll small { color: var(--t3); font-size: 0.6em; }
.node__vote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; color: var(--t2); font-size: 0.98rem; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 12px; height: 12px; background: var(--a2); clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); }

/* Phone */
.phone { width: min(400px, 100%); }

/* Locks */
.locks { display: grid; gap: 8px; }
.locks li { position: relative; padding-left: 30px; line-height: 1.3; }
.locks li::before {
  content: '';
  position: absolute;
  top: 0.08em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--a2);
  clip-path: polygon(50% 0, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%);
}

/* HUD pill while on the route */
.trekhud {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 7px 14px;
  background: rgba(6, 4, 12, 0.86);
  border: 1px solid var(--line-strong);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s, transform 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.trekhud.is-on { opacity: 1; transform: translate(-50%, 0); }
.trekhud__wp { color: var(--t3); }
.trekhud__wp b { color: var(--a2); }
.trekhud__name { color: var(--a); transition: color 0.3s; }
.trekhud__bar { width: 84px; height: 3px; background: var(--panel-2); }
.trekhud__bar i { display: block; height: 100%; background: var(--a); transform: scaleX(0); transform-origin: left; }

/* ---------- Delta ---------- */
.modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.mode {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  opacity: 0.62;
  transition: opacity 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .mode.reveal.is-in { opacity: 0.62; }
html[data-world='transparent'] .mode--t,
html[data-world='shielded'] .mode--s,
html.js[data-world='transparent'] .mode--t.reveal.is-in,
html.js[data-world='shielded'] .mode--s.reveal.is-in {
  opacity: 1;
  border-color: var(--line-strong);
  box-shadow: 0 0 34px -8px var(--glow);
}
.mode__kicker { color: var(--a); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.mode--t .mode__kicker { color: var(--c); }
.mode--s .mode__kicker { color: var(--p-light); }
.mode h3 {
  margin-top: 2px;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
}
.mode p:not(.mode__kicker):not(.fine) { margin-top: 10px; color: var(--t2); line-height: 1.36; }

.fuel { margin-top: clamp(44px, 6vw, 72px); }
.fuel__copy { max-width: 66ch; margin-inline: auto; text-align: center; }
.fuel__copy h3 { font-family: var(--f-display); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; }
.fuel__copy p { margin-top: 8px; color: var(--t2); }
.tiers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}
.tiers li {
  color: var(--t2);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
.tiers .art { margin-bottom: 4px; transition: transform 0.25s; }
.tiers li:hover .art { transform: translateY(-5px); }

/* ---------- Cockpit ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 1320px;
  margin: 36px auto 0;
  padding-inline: var(--gutter);
}
.shots figure:nth-child(even) { margin-top: 44px; }
.shots figcaption {
  margin-top: 4px;
  color: var(--t2);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------- Arrival ---------- */
.section--arrival { position: relative; }
.arrival {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}
.art--arrival { width: 100%; max-width: 480px; justify-self: center; }
.arrival__copy p:not(.eyebrow) { margin-top: 12px; color: var(--t2); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.store.btn {
  flex: 1 1 176px;
  gap: 12px;
  justify-content: flex-start;
  min-height: 60px;
  padding: 9px 16px;
  font-family: var(--f-body);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.store svg { flex: none; width: 24px; height: 24px; fill: var(--a); transition: fill 0.3s; }
.store span { display: grid; line-height: 1.2; }
.store small { color: var(--t3); font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
.store b { font-size: 1.05rem; font-weight: 700; }
.store--soon { opacity: 0.62; cursor: default; }
.store--soon.btn:hover { filter: none; transform: none; }

/* The docking bays: one tab per platform */
.bays { margin-top: clamp(32px, 5vw, 56px); }
.bays__tabs { display: flex; gap: 6px; }
html:not(.js) .bays__tabs { display: none; }
.bay-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 8px 10px;
  color: var(--t3);
  background: transparent;
  border: 1px solid var(--line);
  border-bottom: 0;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color 0.2s, background-color 0.2s;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.bay-tab:hover { color: var(--t1); }
.bay-tab[aria-selected='true'] { color: var(--a); background: var(--panel); border-color: var(--line-strong); }
.bay-tab__you {
  display: none;
  color: var(--a2);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bay-tab.is-yours .bay-tab__you { display: block; }

.bay { padding-block: 6px 16px; }
.bay + .bay { margin-top: 14px; }
.js .bay { margin-top: 0; }
.js .bay:not(.is-open) { display: none; }
.bay__name { padding-block: 10px 4px; font-family: var(--f-display); font-size: 1rem; font-weight: 800; text-transform: uppercase; }
.js .bay__name { display: none; }

.pkgs { margin: 0; padding: 0; list-style: none; }
.pkg {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 12px 0;
  color: var(--t1);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.pkgs li:last-child .pkg { border-bottom: 0; }
.pkg__id { display: grid; line-height: 1.25; }
.pkg__id b { font-family: var(--f-mono); font-size: 0.92rem; font-weight: 600; }
.pkg__id small { color: var(--t3); font-size: 0.92rem; }
.pkg--top .pkg__id small { color: var(--a2); }
.pkg__file { color: var(--t2); font-family: var(--f-mono); font-size: 0.82rem; overflow-wrap: anywhere; transition: color 0.2s; }
.pkg:hover .pkg__file { color: var(--a); }
.pkg__get {
  padding: 7px 12px;
  color: var(--a);
  border: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.pkg--top .pkg__get { color: var(--btn-ink); background: var(--btn); border-color: transparent; }
.bay__note { padding-top: 12px; color: var(--t3); font-size: 1rem; line-height: 1.42; border-top: 1px solid var(--line); }
.bay__note strong { color: var(--t2); }
.bay__note code,
.verify code { font-family: var(--f-mono); font-size: 0.84em; overflow-wrap: anywhere; }
.bay--soon { padding-block: 22px; text-align: center; }
.bay--soon p { color: var(--t2); }
.bay--soon .btn { margin-top: 14px; }
.bay__soon { color: var(--a) !important; font-family: var(--f-display); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; }

.verify { margin-top: 16px; }
.verify__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.verify h3 { font-family: var(--f-display); font-size: 1rem; font-weight: 800; text-transform: uppercase; }
.verify__cmd {
  margin: 12px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  color: var(--a);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.88rem;
}
.verify p { margin-top: 12px; color: var(--t2); font-size: 1.02rem; line-height: 1.42; }
.verify a { color: var(--a); }

.notices { display: grid; gap: 10px; margin-top: 16px; }
.notice {
  padding: 14px 18px;
  color: var(--t3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--a2);
  font-size: 1rem;
  line-height: 1.42;
}
.notice strong { color: var(--t1); }
.notice p + p { margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 8px; max-width: 860px; margin-top: 36px; }
.faq details { background: var(--panel); border: 1px solid var(--line); transition: border-color 0.3s; }
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  position: relative;
  padding: 14px 44px 14px 18px;
  cursor: pointer;
  font-size: 1.16rem;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq a { color: var(--a); }
.faq summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--a2);
  font-family: var(--f-display);
  font-size: 1.2rem;
  transform: translateY(-50%);
}
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 18px 16px; color: var(--t2); }

/* ---------- Footer ---------- */
.footer {
  padding-block: 40px 28px;
  background: rgba(0, 0, 0, 0.42);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 170px repeat(2, minmax(0, 220px));
  justify-content: space-between;
  align-items: start;
  gap: 24px;
}
.art--thanks { width: 150px; }
.footer__stack { display: grid; gap: 22px; }
.footer__col { display: grid; gap: 5px; }
.footer__col h3 {
  margin-bottom: 4px;
  color: var(--a);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer__col a { color: var(--t2); text-decoration: none; }
.footer__col a:hover { color: var(--t1); }
.footer__base {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  color: var(--t3);
  font-size: 0.98rem;
  line-height: 1.35;
}
.footer__base address { font-style: normal; }
.footer__base strong { color: var(--t2); }

/* ---------- Legal pages ---------- */
.legal {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding: calc(var(--bar) + 40px) var(--gutter) 72px;
}
.legal__head { margin-bottom: 28px; }
.legal__title {
  margin-top: 10px;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
}
.legal__updated { margin-top: 8px; color: var(--t3); font-family: var(--f-mono); font-size: 0.86rem; }
.legal__lang-note { margin-top: 8px; color: var(--t2); }
.legal__card { margin-bottom: 12px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); }
.legal__card--notice { border-color: var(--line-strong); }
.legal__card h2 { margin-bottom: 10px; font-size: 1.32rem; font-weight: 700; color: var(--a); }
.legal__card p, .legal__card li { color: var(--t2); line-height: 1.45; }
.legal__card p + p, .legal__card ul + p, .legal__card p + ul { margin-top: 10px; }
.legal__card ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.legal__card a { color: var(--a); }
.legal__card strong { color: var(--t1); }
.legal__card code { font-size: 0.9em; overflow-wrap: anywhere; }
.legal__back { color: var(--t2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.legal__back:hover { color: var(--t1); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: 28px 60px; }
  .hero__copy { text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .stage { width: min(100%, 520px); }
  .shots {
    display: flex;
    gap: 8px;
    margin-inline: 0;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots figure { flex: 0 0 min(72vw, 320px); scroll-snap-align: center; }
  .shots figure:nth-child(even) { margin-top: 0; }
  .js .shots .reveal { opacity: 1; transform: none; }
  .tiers {
    display: flex;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tiers::-webkit-scrollbar { display: none; }
  .tiers li { flex: 0 0 130px; scroll-snap-align: center; }
}

@media (max-width: 900px) {
  .route { padding-left: calc(var(--gutter) + 38px); }
  .wp {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    min-height: 0;
    padding-block: 44px;
  }
  .wp .wp__copy, .wp:nth-of-type(even) .wp__copy,
  .wp .wp__visual, .wp:nth-of-type(even) .wp__visual { grid-column: 1; grid-row: auto; }
  .wp .wp__node, .wp:nth-of-type(even) .wp__node { top: 58px; left: -19px; }
  .flyer { width: 52px; height: 52px; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .arrival { grid-template-columns: minmax(0, 1fr); }
  .art--arrival { max-width: 320px; }
}

@media (max-width: 640px) {
  body { font-size: 1.125rem; }
  :root { --bar: 60px; }
  .topbar { gap: 10px; }
  .brand { font-size: 1rem; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .topbar__right { gap: 10px; }
  .topbar .cloak { font-size: 0.74rem; letter-spacing: 0.08em; gap: 6px; }
  .topbar .cloak[aria-checked='true'] .cloak__side--t,
  .topbar .cloak[aria-checked='false'] .cloak__side--s { display: none; }
  .topbar .btn { display: none; }
  .hero { overflow-x: clip; }
  .hero__lead { font-size: 1.2rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .art--corner { right: -6px; }
  .stage__tag { font-size: 0.76rem; letter-spacing: 0.12em; }
  .ledger__rows > div { grid-template-columns: 74px minmax(0, 1fr); padding: 8px 10px; }
  .ledger__rows dd { font-size: 0.84rem; }
  .cloak--inline { font-size: 0.78rem; letter-spacing: 0.08em; }
  .panel { padding: 14px; }
  .panel--video { padding: 0; }
  .race__row { grid-template-columns: 84px minmax(0, 1fr) 76px; font-size: 0.84rem; }
  .nodes { grid-template-columns: minmax(0, 1fr); }
  .mode { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .bays__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bay-tab { font-size: 0.92rem; letter-spacing: 0.02em; border-bottom: 1px solid var(--line); clip-path: none; }
  .bay-tab[aria-selected='true'] { border-bottom-color: var(--line-strong); }
  .js .bay { margin-top: 6px; }
  .pkg { grid-template-columns: minmax(0, 1fr) auto; }
  .pkg__file { grid-column: 1 / -1; grid-row: 2; }
  .verify__cmd { font-size: 0.78rem; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; justify-self: center; }
  .trekhud { font-size: 0.78rem; letter-spacing: 0.08em; gap: 8px; padding: 6px 10px; }
  .trekhud__bar { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}