/* $KASCOV standalone landing page.
   Everything is page-scoped so the explorer's shared card/nav rules cannot
   quietly change this composition. */

/* ------------------------------------------------------------ palette
   The trailer's ten colours are the only pigments on this page and on the
   six holder pages that link this file. Everything else is black, white,
   or an alpha of one of the ten; the explorer's own variables are rebound
   below so no shared rule can leak an off-palette colour in. */
.token-page {
  --ground: #05100e;
  --teal: #49eacb;
  --teal-deep: #70c7ba;
  --lime: #d8ff57;
  --amber: #ffb067;
  --blue: #8ab4ff;
  --green: #5be49b;
  --gold: #ffd479;
  --mint: #a0f4e5;
  --violet: #9d8cff;

  --film: #000;
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.5);
  --line: rgba(160, 244, 229, 0.16);
  --glass: rgba(5, 16, 14, 0.72);
  --glass-strong: rgba(5, 16, 14, 0.92);
  --teal-glow: rgba(73, 234, 203, 0.22);
  --teal-soft: rgba(73, 234, 203, 0.12);
  --lime-soft: rgba(216, 255, 87, 0.14);
  --amber-soft: rgba(255, 176, 103, 0.15);
  --blue-soft: rgba(138, 180, 255, 0.15);
  --green-soft: rgba(91, 228, 155, 0.15);
  --gold-soft: rgba(255, 212, 121, 0.1);
  --violet-soft: rgba(157, 140, 255, 0.15);
  --mint-soft: rgba(160, 244, 229, 0.06);

  --text: var(--ink);
  --muted: var(--ink-2);
  --faint: var(--ink-3);
  --accent: var(--teal);
  --accent-soft: var(--teal-soft);
  --born: var(--green);
  --born-soft: var(--green-soft);
  --watch: var(--gold);
  --watch-soft: var(--gold-soft);
  --watch-border: rgba(255, 212, 121, 0.35);
  --move: var(--blue);
  --move-soft: var(--blue-soft);
  --burn: var(--amber);
  --burn-soft: var(--amber-soft);
  --markets-lime: var(--lime);
  --bg: var(--ground);
  --card: var(--glass);
  --border: var(--line);
  --border-strong: rgba(73, 234, 203, 0.36);

  --token-shell: min(1480px, calc(100% - 2.4rem));
  --token-copy: 760px;
  --token-panel: var(--glass);
  --token-panel-strong: var(--glass-strong);
  --token-line: var(--line);
  --token-glow: var(--teal-glow);
  overflow-x: clip;
  background: var(--ground);
  text-wrap: pretty;
}

/* one colour per role, reachable from markup without a literal */
.token-page .tone-teal { color: var(--teal); }
.token-page .tone-lime { color: var(--lime); }
.token-page .tone-amber { color: var(--amber); }
.token-page .tone-blue { color: var(--blue); }
.token-page .tone-green { color: var(--green); }
.token-page .tone-gold { color: var(--gold); }
.token-page .tone-violet { color: var(--violet); }

.token-page a { text-underline-offset: 0.18em; }
.token-page img,
.token-page video { max-width: 100%; }

.token-page .skip-link { z-index: 100; }

.token-dag {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}

.token-pointer-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(160, 244, 229, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(73, 234, 203, 0.24), inset 0 0 10px rgba(73, 234, 203, 0.1);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.token-pointer-ring::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--mint);
  transform: translate(-50%, -50%);
}

.token-pointer-active .token-pointer-ring { opacity: 0.72; }

[data-magnetic] {
  --mag-x: 0px;
  --mag-y: 0px;
  --mag-lift: 0px;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--mag-lift)), 0);
  will-change: transform;
}

.token-pointer-surface {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-alpha: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.token-pointer-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(73, 234, 203, 0.13), transparent 56%);
  opacity: var(--spot-alpha);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.token-pointer-surface > * { position: relative; z-index: 1; }

.token-nav-wrap,
.token-landing,
.token-footer {
  position: relative;
  z-index: 1;
}

.token-shell {
  width: var(--token-shell);
  margin-inline: auto;
}

/* -------------------------------------------------------------- nav */

.token-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.token-nav {
  width: var(--token-shell);
  min-height: 68px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.token-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
  color: var(--text);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.token-brand:hover { color: var(--text); text-decoration: none; }

.token-brand-mark {
  position: relative;
  width: 25px;
  height: 25px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(73, 234, 203, 0.34);
}

.token-brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.token-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  margin-left: auto;
}

.token-nav-links a {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.token-nav-links a:hover { color: var(--text); text-decoration: none; }

/* the trade pill is the one lime-filled surface: it leads to the market */
.token-nav-cta {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0.55rem 1rem;
  border: 1px solid var(--lime);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ground);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
}

.token-nav-cta:hover {
  --mag-lift: -1px;
  color: var(--ground);
  text-decoration: none;
  box-shadow: 0 0 24px rgba(216, 255, 87, 0.28);
}

/* ------------------------------------------------------------- hero */

/* one trailer shot, full-bleed, behind the title. The page's ground shows
   through the scrim, so the hero carries no frame, wash or grid of its own. */
.token-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: calc(100svh - 68px);
  display: grid;
  align-items: center;
}

/* the scrim: left to right so the copy side stays legible, and a fade at
   the bottom so the signals row sits on ground rather than on footage */
.token-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 16, 14, 0.92) 0%, rgba(5, 16, 14, 0.55) 55%, rgba(5, 16, 14, 0.25) 100%),
    linear-gradient(180deg, transparent 58%, rgba(5, 16, 14, 0.9) 100%);
}

html.dag-snapping .token-hero { scroll-snap-align: start; }

.token-hero-media {
  --hero-x: 0px;
  --hero-y: 0px;
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  overflow: hidden;
}

/* the press strikes right of centre in its clip and the title owns the left
   of the screen: 62% keeps the strike in view beside the words at 1512 wide */
.token-hero-media video,
.token-hero-media .motion-fallback {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 62% 50%;
  transform: translate3d(var(--hero-x), var(--hero-y), 0) scale(1.05);
  will-change: transform, opacity;
}

.token-hero-media .motion-fallback { z-index: 0; }

/* the poster stands in until the loop plays, and for good when motion is off */
.token-hero-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.72s ease;
}

.token-hero-media video.is-playing { opacity: 1; }

.motion-fallback {
  position: absolute;
  inset: 0;
}

.token-hero-copy {
  width: var(--token-shell);
  margin-inline: auto;
  padding: clamp(5rem, 11vh, 8.5rem) 0 clamp(8.5rem, 16vh, 11rem);
}

.token-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.6rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.token-eyebrow::before {
  content: "";
  width: 38px;
  height: 1px;
  flex: none;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.token-hero h1 {
  max-width: 9.8ch;
  margin: 0;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(4rem, 7.7vw, 8.7rem);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.84;
}

.token-hero h1 span { display: block; }
.token-hero h1 .token-symbol { color: var(--accent); }
.token-hero h1 .token-promise { color: var(--ink-2); font-size: 0.72em; letter-spacing: -0.055em; }

.token-hero-lede {
  max-width: 58ch;
  margin: 2rem 0 0;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.6;
}

.token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.token-action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--token-line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.token-action:hover {
  --mag-lift: -2px;
  color: var(--text);
  text-decoration: none;
  border-color: rgba(112, 199, 186, 0.5);
}

.token-action--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ground);
  box-shadow: 0 12px 40px rgba(73, 234, 203, 0.15);
}

.token-action--primary:hover {
  color: var(--ground);
  box-shadow: 0 14px 46px rgba(73, 234, 203, 0.26);
}

/* the trade action is lime on the ground wherever it appears: by its own
   modifier, or by leading to the market */
.token-action--trade,
.token-page .token-action--primary[href="/kascov"] {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--ground);
  box-shadow: 0 12px 40px rgba(216, 255, 87, 0.14);
}

.token-action--trade:hover,
.token-page .token-action--primary[href="/kascov"]:hover {
  color: var(--ground);
  box-shadow: 0 14px 46px rgba(216, 255, 87, 0.24);
}

/* the trailer: a mint hairline and the film's own teal, never a fill */
.token-action--film {
  border-color: rgba(160, 244, 229, 0.42);
  color: var(--teal);
}

.token-action--film:hover {
  color: var(--teal);
  border-color: var(--mint);
}

.token-hero-signals {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: max(0px, calc((100% - var(--token-shell)) / 2));
  border-top: 1px solid var(--line);
  background: rgba(5, 16, 14, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.token-signal {
  min-height: 92px;
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  border-right: 1px solid var(--line);
}

.token-signal:last-child { border-right: 0; }
.token-signal strong { color: var(--text); font-size: 0.95rem; }
.token-signal span { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; }

/* -------------------------------------------------------- proof strip */

.token-proof-strip {
  width: var(--token-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--glass);
}

.token-contract {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.token-contract-label {
  flex: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.token-contract code {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-copy-button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
}

.token-copy-button:hover { color: var(--accent); }

.token-proof-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.9rem; }
.token-proof-links a { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; }
.token-proof-links a:hover { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------- sections */

.token-section {
  width: var(--token-shell);
  margin-inline: auto;
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}

.token-section h2[id] { scroll-margin-top: 164px; }

.token-section + .token-section { border-top: 1px solid var(--line); }

.token-section-heading {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.token-section-heading .token-eyebrow { margin-top: 0.65rem; }

.token-heading-copy h2,
.token-section > h2 {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(2.8rem, 5.5vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-transform: none;
}

.token-heading-copy h2::before,
.token-heading-copy h2::after,
.token-section > h2::before,
.token-section > h2::after { display: none; }

.token-heading-copy p {
  max-width: 68ch;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.token-kicker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ frames
   A frame is one rail panel painted like a trailer shot: the footage at
   z 0, everything else above it. Rail mode lays the panel out itself; this
   only stacks the layers and gives the stacked page the same grid. */

.frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: clamp(1rem, 2.4vh, 1.8rem);
}

.frame > :not(.frame-media) { position: relative; z-index: 1; }

/* copy beside a console, a still or the doors: each frame sets its own
   proportion through the custom property */
.frame-split {
  display: grid;
  grid-template-columns: var(--frame-split, minmax(0, 0.36fr) minmax(0, 0.64fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

/* full-bleed footage, dimmed toward the copy side. The poster stands in
   until the loop plays and for good when motion is off. */
.frame-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  background: var(--film);
  pointer-events: none;
}

.frame-media video,
.frame-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--frame-focus, 50% 50%);
}

.frame-media video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.frame-media video.is-playing { opacity: 1; }

.frame-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 16, 14, 0.94) 0%, rgba(5, 16, 14, 0.8) 42%, rgba(5, 16, 14, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 16, 14, 0.3), transparent 30%, transparent 70%, rgba(5, 16, 14, 0.7));
}

/* the copy sits on the right of this frame, so the dark side flips */
.frame-media--flip::after {
  background:
    linear-gradient(270deg, rgba(5, 16, 14, 0.94) 0%, rgba(5, 16, 14, 0.8) 42%, rgba(5, 16, 14, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 16, 14, 0.3), transparent 30%, transparent 70%, rgba(5, 16, 14, 0.7));
}

/* the wall's footage is a field of lit portrait tiles, busiest on the
   right where the glass holder cards sit: that side takes one more step of
   ground than the other frames so the cards and the doors read over it */
[data-dag-panel="wall"] .frame-media::after {
  background:
    linear-gradient(90deg, rgba(5, 16, 14, 0.94) 0%, rgba(5, 16, 14, 0.84) 42%, rgba(5, 16, 14, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 16, 14, 0.35), transparent 30%, transparent 70%, rgba(5, 16, 14, 0.75));
}

/* the frame's one proof number: the figure in ink, its unit in teal. The
   element is left empty until the receipt or the chain supplies the figure. */
.frame-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.55rem;
  margin: 0;
  color: var(--ink);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(3rem, 8vh, 5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.frame-lead small,
.frame-lead .frame-unit {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.frame-lead--gold { color: var(--gold); }
.frame-lead--lime { color: var(--lime); }
.frame-lead--violet { color: var(--violet); }

/* ------------------------------------------------------- live numbers */

.token-data-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 660px;
  padding: clamp(1rem, 3vw, 2.4rem);
  display: grid;
  align-items: end;
  border: 1px solid var(--token-line);
  border-radius: 30px;
  background: var(--film);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
}

.token-data-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 16, 14, 0.1) 0%, rgba(5, 16, 14, 0.76) 58%, rgba(5, 16, 14, 0.98) 100%);
}

.token-data-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.token-data-media video,
.token-data-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.token-data-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.token-data-media video.is-playing { opacity: 0.9; }

.token-page .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.token-page .tile {
  min-height: 154px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  color: var(--text);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.token-page .tile::after {
  content: "↗";
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.token-page .tile:hover {
  transform: translateY(-4px);
  border-color: rgba(112, 199, 186, 0.46);
  background: var(--glass-strong);
  text-decoration: none;
}

.token-page .tile-label {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.token-page .tile-n {
  margin-top: 1.4rem;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(1.45rem, 2.5vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.token-page .tile-n.soft { color: var(--faint); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.token-page .tile-prove { margin-top: 1.15rem; color: var(--accent); font-family: var(--mono); font-size: 0.66rem; }
.token-page .freshness { margin: 1rem 0 0; color: var(--faint); font-family: var(--mono); font-size: 0.72rem; }
.token-page .caveat { max-width: 84ch; margin: 1rem 0 0; color: var(--faint); font-size: 0.84rem; line-height: 1.6; }

/* --------------------------------------------------------- graduation */

.token-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.token-story-grid h2 {
  display: block;
  margin: 0;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(2.8rem, 5vw, 5.8rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-transform: none;
}

.token-story-grid h2::before,
.token-story-grid h2::after { display: none; }

.token-story-copy > p {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.token-progress-card {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--token-line);
  border-radius: 18px;
  background: var(--glass);
}

.token-page .gradbar {
  height: 10px;
  margin: 0 0 0.9rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--mint-soft);
}

.token-page .gradbar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-deep), var(--accent), var(--mint));
  box-shadow: 0 0 22px var(--token-glow);
  transition: width 0.7s ease;
}

.token-page .gradline { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 0.76rem; line-height: 1.6; }

/* ----------------------------------------------------------- treasury */

.token-section--treasury {
  position: relative;
  isolation: isolate;
}

.token-treasury-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(420px, 0.64fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.token-treasury-copy h2 {
  display: block;
  margin: 0;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(3rem, 5.5vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.94;
  text-transform: none;
}

.token-treasury-copy h2::before,
.token-treasury-copy h2::after { display: none; }

.token-treasury-copy > p {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.72;
}

.token-cinema {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--token-line);
  border-radius: 26px;
  background: var(--film);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), 0 0 70px rgba(73, 234, 203, 0.08);
}

.token-cinema video,
.token-cinema img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.token-cinema video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.token-cinema video.is-playing { opacity: 1; }

.token-cinema figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 0.65rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.45;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.token-cinema-state {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  flex: none;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.token-cinema-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.token-treasury-live { margin-top: clamp(1.2rem, 3vw, 2rem); }

.token-page .token-treasury {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(160, 244, 229, 0.19);
  border-radius: 18px;
  background: var(--glass-strong);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28), inset 0 1px var(--mint-soft);
  font-variant-numeric: tabular-nums;
}

.tt-console-head {
  min-height: 54px;
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--mint-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tt-console-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: var(--ink);
}

.tt-live-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
}

/* armed means live: the green of every shipped thing */
.tt-live-dot--armed {
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}

.tt-console-seq {
  padding-left: 0.7rem;
  border-left: 1px solid var(--token-line);
  color: var(--faint);
}

.tt-ledger-link { color: var(--accent); white-space: nowrap; }

.tt-allocation {
  padding: clamp(1.4rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: end;
}

.tt-allocation-copy { display: grid; gap: 0.3rem; }

.tt-allocation-copy > span,
.tt-metrics article > span,
.tt-pulse > span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-allocation-copy strong {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(3rem, 5vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.tt-allocation-copy strong small {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.tt-allocation-copy em {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
}

.tt-allocation-rail { min-width: 0; padding-bottom: 0.35rem; }

.tt-rail-track {
  position: relative;
  height: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mint-soft);
}

.tt-rail-track > span {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: var(--tt-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-deep), var(--mint));
  box-shadow: 0 0 18px rgba(73, 234, 203, 0.58);
}

/* the receipted subset, drawn brighter ON TOP of the at-work fill: what the
   machine can prove sits inside what the position represents */
.tt-rail-track > b {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: var(--tt-progress);
  min-width: 3px;
  border-radius: inherit;
  background: var(--lime);
  box-shadow: 0 0 16px rgba(216, 255, 87, 0.75);
}

.tt-rail-track > i {
  position: absolute;
  top: 50%;
  left: clamp(2px, var(--tt-progress), calc(100% - 2px));
  width: 15px;
  height: 15px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 0 22px rgba(73, 234, 203, 0.65);
  transform: translate(-50%, -50%);
}

.tt-rail-scale {
  margin-top: 0.7rem;
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tt-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.tt-metrics article {
  min-width: 0;
  min-height: 132px;
  padding: 1.25rem clamp(1rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.42rem;
}

.tt-metrics article + article { border-left: 1px solid var(--line); }

.tt-metrics strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(1.5rem, 2.5vw, 2.8rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.tt-metrics small { color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

.tt-receipt {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--mint-soft);
}

/* a receipt is a trade the machine can prove: lime, like the traded subset */
.tt-receipt-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--lime);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tt-receipt-mark > span {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 10px currentColor;
}

.tt-receipt p { margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: 0.69rem; line-height: 1.5; }
.tt-receipt .tt-next { color: var(--faint); }

.tt-programme-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 clamp(1rem, 2.4vw, 2rem);
}

.tt-stage {
  position: relative;
  min-height: 92px;
  padding: 1rem 0.8rem 1rem 1.3rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 0.2rem 0.75rem;
  border-top: 2px solid var(--line);
  color: var(--faint);
}

.tt-stage + .tt-stage { border-left: 1px solid var(--line); }
.tt-stage-on { border-top-color: var(--green); background: linear-gradient(180deg, var(--green-soft), transparent); }
.tt-stage-index { grid-row: 1 / span 2; color: inherit; font-family: var(--mono); font-size: 0.6rem; }
.tt-stage-name { color: var(--ink); font-size: 0.82rem; font-weight: 650; text-transform: uppercase; }
.tt-stage-state { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tt-stage-on .tt-stage-index,
.tt-stage-on .tt-stage-state { color: var(--green); }

.tt-pulse {
  min-height: 54px;
  padding: 0.75rem clamp(1rem, 2.4vw, 2rem) 1rem;
  display: flex;
  align-items: end;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.tt-pulse-bars { height: 30px; display: flex; align-items: flex-end; gap: 4px; }
.token-page .tt-pulse .tt-bar { width: 5px; min-height: 3px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 8px rgba(73, 234, 203, 0.25); }
.token-page .tt-pulse .tt-bar-dry { background: rgba(160, 244, 229, 0.14); box-shadow: none; }

@media (max-width: 820px) {
  .tt-allocation { grid-template-columns: minmax(0, 1fr); }
  .tt-metrics { grid-template-columns: minmax(0, 1fr); }
  .tt-metrics article { min-height: 108px; }
  .tt-metrics article + article { border-top: 1px solid var(--line); border-left: 0; }
  .tt-receipt { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .tt-console-head { align-items: flex-start; }
  .tt-console-title { align-items: flex-start; flex-wrap: wrap; }
  .tt-console-seq { width: 100%; padding: 0; border: 0; }
  .tt-allocation { padding: 1.2rem 1rem 1.5rem; }
  .tt-allocation-copy strong { font-size: 3.4rem; }
  .tt-programme-track { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .tt-stage { margin-inline: 1rem; }
  .tt-stage + .tt-stage { border-left: 0; }
  .token-cinema figcaption { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}

/* ---------------------------------------------------------- doctrine */

.token-section--doctrine {
  width: 100%;
  padding-inline: max(1.2rem, calc((100% - 1480px) / 2));
  background: var(--glass);
}

.token-doctrine-intro {
  max-width: 980px;
  margin-bottom: 3rem;
}

.token-doctrine-intro h2 {
  display: block;
  margin: 0;
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.92;
  text-transform: none;
}

.token-doctrine-intro h2::before,
.token-doctrine-intro h2::after { display: none; }

.token-doctrine-intro p { max-width: 64ch; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

.token-page .cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--token-line);
  border-radius: 24px;
  background: var(--token-line);
}

.token-page .card {
  min-height: 260px;
  padding: clamp(1.3rem, 2.6vw, 2.2rem);
  border: 0;
  border-radius: 0;
  background: var(--glass-strong);
  box-shadow: none;
  transform: none;
}

.token-page .card:hover { transform: none; box-shadow: none; }
.token-page .card h3 { margin: 0 0 1.2rem; color: var(--text); font-size: 1.15rem; }
.token-page .card h3::before { content: "0" counter(doctrine); display: block; margin-bottom: 2.8rem; color: var(--accent); font-family: var(--mono); font-size: 0.68rem; }
.token-page .cards { counter-reset: doctrine; }
.token-page .card { counter-increment: doctrine; }
.token-page .card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

/* the doctrine as a strip on the roadmap frame: four rules, a heading and
   one sentence each, hairlines between them and nothing else */
.token-page .rules {
  counter-reset: rule;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.2rem, 2.5vw, 2.4rem);
  margin: 0;
  padding: clamp(1rem, 2.4vh, 1.6rem) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.token-page .rules > * {
  counter-increment: rule;
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line);
}

.token-page .rules > :first-child { padding-left: 0; border-left: 0; }

.token-page .rules h3 {
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-size: 0.98rem;
}

.token-page .rules h3::before {
  content: "0" counter(rule) " ";
  color: var(--teal);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.token-page .rules p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------ utility */

.token-page .slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.token-page .slot {
  min-height: 225px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 1.35rem;
  border: 1px solid var(--token-line);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--mint-soft), transparent 60%), var(--glass);
}

.token-page .slot:nth-child(1),
.token-page .slot:nth-child(2) { grid-column: span 2; }

.token-page .slot-name {
  max-width: calc(100% - 6rem);
  color: var(--text);
  font-family: "Bricolage Grotesque", var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.token-page .slot-desc {
  max-width: 58ch;
  margin: auto 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.token-page .slot .chip { position: absolute; top: 1.2rem; right: 1.2rem; }

.token-page .chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0.25rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* live is green, building is gold, planned is blue: the chip's colour is
   its status, and the status comes from the utilities file, never from data */
.token-page .chip-live { border-color: rgba(91, 228, 155, 0.35); background: var(--green-soft); color: var(--green); }
.token-page .chip-building { border-color: var(--watch-border); background: var(--gold-soft); color: var(--gold); }
.token-page .chip-planned { border-color: rgba(138, 180, 255, 0.35); background: var(--blue-soft); color: var(--blue); }

/* ------------------------------------------------------------ roadmap */

.token-page .roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
}

.token-page .rm-col {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--token-line);
  border-radius: 20px;
  background: var(--glass);
}

/* the column bar reads the same as the chips: shipped green, building
   gold, and the third column, what comes next, blue */
.token-page .rm-col::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-bottom: 2rem;
  border-radius: 99px;
  background: var(--blue);
  box-shadow: 0 0 16px var(--blue-soft);
}

.token-page .rm-shipped::before { background: var(--green); box-shadow: 0 0 16px var(--green-soft); }
.token-page .rm-building::before { background: var(--gold); box-shadow: 0 0 16px var(--gold-soft); }
.token-page .rm-col h3 { min-height: 52px; margin: 0 0 0.5rem; color: var(--text); font-size: 1.08rem; }
.token-page .rm-note { margin: 0 0 1.2rem; color: var(--faint); font-family: var(--mono); font-size: 0.66rem; }
.token-page .rm-list { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.token-page .rm-list li { position: relative; margin: 0; padding-left: 1rem; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.token-page .rm-list li::before { content: ""; position: absolute; top: 0.62em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.token-page .rm-list .rm-when { color: var(--faint); font-family: var(--mono); font-size: 0.64rem; }

/* the shipped column shows the newest five; the rest are one line pointing
   at the changelog, not another bullet */
.token-page .rm-list .rm-earlier {
  padding-left: 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.token-page .rm-list .rm-earlier::before { display: none; }
.token-page .rm-earlier a { color: var(--teal); }

/* ------------------------------------------------------------- verify */

.token-page .steps {
  counter-reset: holder-step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--token-line);
  border-radius: 22px;
  background: var(--token-line);
  list-style: none;
}

.token-page .steps li {
  counter-increment: holder-step;
  min-height: 260px;
  margin: 0;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.token-page .steps li::before {
  content: "0" counter(holder-step);
  position: static;
  width: auto;
  height: auto;
  margin-bottom: auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
}

.token-page .steps strong { display: block; margin-bottom: 0.45rem; color: var(--text); font-size: 1rem; }

.token-honesty-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  margin-top: 0.8rem;
}

/* what the token never does is the page's one caution: amber */
.token-page .never {
  margin: 0;
  padding: 1.35rem;
  border: 1px solid rgba(255, 176, 103, 0.28);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--amber-soft), transparent 70%), var(--glass);
}

.token-page .never p,
.token-page .never li { color: var(--ink-2); font-size: 0.88rem; line-height: 1.65; }
.token-page .never strong { color: var(--amber); }
.token-page .never ul { margin: 0; padding-left: 1.1rem; }

.token-proof-card {
  padding: 1.35rem;
  border: 1px solid var(--token-line);
  border-radius: 20px;
  background: var(--glass);
}

.token-proof-card h3 { margin: 0 0 0.8rem; color: var(--text); font-size: 1rem; }
.token-proof-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.88rem; line-height: 1.65; }

.token-page .curl {
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--token-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.token-page .copybtn {
  min-height: 36px;
  margin-top: 0.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--token-line);
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
}

/* ------------------------------------------------------------- footer */

.token-footer {
  width: var(--token-shell);
  margin-inline: auto;
  padding: 2rem 0 4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.token-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ----------------------------------------------------------- motion */

.token-reveals-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.78s cubic-bezier(0.16, 1, 0.3, 1), transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
}

.token-reveals-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .token-dag,
  .token-pointer-ring,
  .token-page video { display: none; }
  .token-reveals-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-magnetic] { transform: none; }
  .token-action,
  .token-page .tile { transition: none; }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .token-nav-links { gap: 0.8rem; }
  .token-nav-links a:nth-child(3),
  .token-nav-links a:nth-child(4) { display: none; }
  .token-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-page .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem clamp(1.2rem, 2.5vw, 2.4rem); }
  .token-page .rules > :nth-child(odd) { padding-left: 0; border-left: 0; }
  .token-page .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-page .slot:nth-child(1),
  .token-page .slot:nth-child(2) { grid-column: span 1; }
  .token-page .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .token-page { --token-shell: min(1480px, calc(100% - 1.2rem)); }
  .token-hero { min-height: calc(100svh - 62px); }
  .token-nav { min-height: 62px; }
  .token-nav-links { display: none; }
  /* stacked: the copy sits at the bottom, so the scrim runs top to bottom */
  .token-hero::before {
    background:
      linear-gradient(180deg, rgba(5, 16, 14, 0.3) 0%, rgba(5, 16, 14, 0.72) 52%, rgba(5, 16, 14, 0.98) 86%),
      linear-gradient(90deg, rgba(5, 16, 14, 0.8), rgba(5, 16, 14, 0.16));
  }
  .token-hero-media video,
  .token-hero-media .motion-fallback { object-position: 50% 35%; }
  .token-hero-copy {
    align-self: end;
    padding: 17rem 0 10rem;
  }
  .token-hero h1 { max-width: 9ch; font-size: clamp(3.5rem, 13vw, 6.3rem); }
  .token-hero-lede { max-width: 52ch; }
  .token-hero-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-signal { min-height: 74px; padding: 0.85rem 1rem; }
  .token-signal:nth-child(2) { border-right: 0; }
  .token-signal:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .token-proof-strip { grid-template-columns: minmax(0, 1fr); }
  .token-proof-links { justify-content: flex-start; }
  .token-section-heading,
  .token-story-grid,
  .token-treasury-layout,
  .frame-split { grid-template-columns: minmax(0, 1fr); }
  .frame-media::after,
  .frame-media--flip::after,
  [data-dag-panel="wall"] .frame-media::after {
    background: linear-gradient(180deg, rgba(5, 16, 14, 0.6), rgba(5, 16, 14, 0.9));
  }
  .token-section-heading { gap: 1.2rem; }
  .token-section-heading .token-eyebrow { margin: 0; }
  .token-treasury-layout { gap: 2rem; }
  .token-page .roadmap { grid-template-columns: minmax(0, 1fr); }
  .token-page .rm-col h3 { min-height: 0; }
}

@media (max-width: 700px) {
  .token-page .tiles,
  .token-page .cards,
  .token-page .slots,
  .token-page .steps,
  .token-page .rules,
  .token-honesty-grid { grid-template-columns: minmax(0, 1fr); }
  .token-page .rules > * { padding-left: 0; border-left: 0; }
  .token-data-stage { min-height: 880px; border-radius: 22px; }
  .token-page .tile { min-height: 124px; }
  .token-page .card,
  .token-page .steps li { min-height: 210px; }
  .token-page .tt-grid { grid-template-columns: minmax(0, 1fr); }
  .token-page .tt-ringwrap { width: 170px; }
  .token-footer { flex-direction: column; }
}

@media (max-width: 520px) {
  .token-nav-cta { padding-inline: 0.8rem; font-size: 0.68rem; }
  .token-brand span:last-child { display: none; }
  .token-hero-copy { padding-top: 13rem; }
  .token-hero-signals { position: static; margin-top: auto; }
  .token-hero { display: flex; flex-direction: column; justify-content: flex-end; }
  .token-contract { align-items: flex-start; }
  .token-contract-label { padding-top: 0.1rem; }
  .token-contract code { white-space: normal; overflow-wrap: anywhere; }
  .token-proof-links { gap: 0.65rem 0.9rem; }
  .token-section { padding-block: 4.5rem; }
  .token-section--doctrine { padding-inline: 0.6rem; }
  .token-heading-copy h2,
  .token-story-grid h2,
  .token-treasury-copy h2,
  .token-doctrine-intro h2 { font-size: clamp(2.55rem, 13vw, 4.2rem); }
}

/* ------------------------------------------------------- the holder wall */
/* the cult's numbers are gold: the count here, the holder numbers on the
   cards, the 10k tier */
.wall-count {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; font-family: var(--mono);
}
.wall-count strong { font-size: 2.4rem; color: var(--gold); font-family: var(--display); line-height: 1; }
.wall-count-sub { color: var(--faint); font-size: 0.8rem; }
.wall-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem;
}
.wall-card {
  display: flex; gap: 0.9rem; align-items: center;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--card); padding: 0.85rem 1rem;
}
/* the mark is the fallback face when no identicon draws: one colour, no
   per-holder hue */
.wall-mark {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  color: var(--teal);
  background: var(--teal-soft);
  border: 2px solid rgba(73, 234, 203, 0.45);
}
.wall-body { display: grid; gap: 0.2rem; min-width: 0; }
.wall-addr { font-family: var(--mono); font-size: 0.85rem; color: var(--text); text-decoration: none; }
.wall-addr:hover { color: var(--accent); }
.wall-meta { color: var(--faint); font-size: 0.76rem; }
.wall-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.15rem; }
.wall-badge {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); background: var(--teal-soft);
  border-radius: 999px; padding: 0.12rem 0.5rem;
}
.wall-badge--voted { color: var(--violet); background: var(--violet-soft); }

/* ── the wall face: the explorer's identicon at card scale ──────────────── */
.wall-face { position: relative; flex: 0 0 auto; width: 56px; height: 56px; }
.wall-face svg { width: 56px; height: 56px; border-radius: 50%; display: block; }
.wall-face .wall-mark { width: 56px; height: 56px; }
.wall-no {
  position: absolute;
  right: -6px;
  bottom: -6px;
  font: 600 0.62rem/1 var(--mono, ui-monospace, monospace);
  color: var(--ground);
  background: var(--gold);
  border-radius: 999px;
  padding: 0.2rem 0.4rem;
  letter-spacing: 0.02em;
}
.wall-kns { color: var(--teal-deep); font-weight: 650; }

/* ── the wall at scale: uniform cards whatever they carry ────────────────
   A card with three badges and a card with none used to sit at different
   heights and centres, which read as clutter the moment the row filled.
   Every card now has the same footprint: face top-aligned, body stacked,
   the badge row simply empty when a holder has none. */
.wall-card { align-items: flex-start; min-height: 124px; }
.wall-body { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.wall-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-card-more {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
}
.wall-card-more .wall-addr { color: var(--teal); font-weight: 650; }

/* ── the cult's doors: every room in the house, one glance ──────────────── */
.cult-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1.1rem;
}
.cult-doors a {
  display: flex; flex-direction: column; gap: 0.15rem;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  background: var(--card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cult-doors a:hover { border-color: var(--teal-deep); transform: translateY(-1px); }
.cult-doors strong { color: var(--ink); font-size: 0.92rem; }
.cult-doors span { color: var(--faint); font-size: 0.78rem; }
/* the vote door is the holder's voice: violet, the only door with a colour */
.cult-doors a[href="/vote"] { border-color: rgba(157, 140, 255, 0.35); }
.cult-doors a[href="/vote"]:hover { border-color: var(--violet); }
.cult-doors a[href="/vote"] strong { color: var(--violet); }
@media (max-width: 700px) { .cult-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the bracket tiles say WHAT they meter, in both layouts: the compact rail
   tiles lost the row explainers, and 30-an-hour without a unit read as
   anything at all */
.token-page .brackets-title {
  grid-column: 1 / -1;
  margin: 0 0 0.15rem;
  font: 500 0.72rem/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── the doors in the nav: every room reachable from the top of any page ─ */
.token-nav-doors {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-left: 0.9rem; padding-left: 0.9rem;
  border-left: 1px solid var(--border);
}
.token-nav-doors a { opacity: 0.78; }
.token-nav-doors a:hover { opacity: 1; }
@media (max-width: 900px) {
  .token-nav-doors { border-left: 0; margin-left: 0; padding-left: 0; flex-wrap: wrap; }
}

/* ── the trailer dialog ─────────────────────────────────────────────────── */
.token-trailer {
  border: 0; padding: 3rem 0 0; background: var(--ground); border-radius: 16px;
  width: min(1200px, 94vw); max-width: none; overflow: hidden;
  /* the top strip is the dialog's own: the close button lives there, never
     over the player's chrome */
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.7);
}
.token-trailer::backdrop { background: rgba(5, 16, 14, 0.86); backdrop-filter: blur(6px); }
.token-trailer-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--film); overflow: hidden; }
.token-trailer-frame iframe,
.token-trailer-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.token-trailer-poster { object-fit: contain; }
.token-trailer-frame iframe { background: var(--film); }
.token-trailer-close {
  position: absolute; top: 0.45rem; right: 0.6rem; z-index: 1;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0;
  background: var(--glass); color: var(--ink); font-size: 1.3rem; cursor: pointer;
}
/* the line under the player: where the film lives, and when it is fetched */
.token-trailer-note { margin: 0; padding: 0.7rem 1rem 0.9rem; text-align: center; font-size: 0.82rem; color: var(--muted); }
.token-trailer-note a { color: var(--accent); }