@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Palette lifted from the neurodiversity infinity mark: seven rainbow stops on a light ground. */
:root {
  --page-max: 1200px;
  --content-pad: 28px;

  --page: #f5f3fb;
  --paper: #ffffff;
  --ink: #17141f;
  --ink-soft: #5b5670;
  --ink-faint: #8b869c;
  --line: #e6e2f0;
  --line-strong: #d3cde4;

  --c1: #e0447c;
  --c2: #9b5de5;
  --c3: #3aa5e0;
  --c4: #35b9a6;
  --c5: #8dc63f;
  --c6: #f5c542;
  --c7: #f08b3a;

  --rainbow: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c7));
  --rainbow-soft: linear-gradient(90deg, rgba(224, 68, 124, 0.16), rgba(155, 93, 229, 0.16), rgba(58, 165, 224, 0.16), rgba(53, 185, 166, 0.16), rgba(141, 198, 63, 0.16), rgba(245, 197, 66, 0.16), rgba(240, 139, 58, 0.16));

  --up: #1f9d63;
  --down: #d9455b;
  --focus: var(--c3);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(23, 20, 31, 0.04), 0 8px 24px rgba(23, 20, 31, 0.07);
  --shadow-lg: 0 2px 6px rgba(23, 20, 31, 0.06), 0 20px 48px rgba(23, 20, 31, 0.13);

  --skeleton-base: rgba(23, 20, 31, 0.06);
  --skeleton-highlight: rgba(23, 20, 31, 0.11);

  /* Lemniscate the hero faces ride. offset-path resolves in CSS pixels, NOT the SVG viewBox, so the
     stage size and the path string must always be overridden together. Every breakpoint below is the
     same curve scaled uniformly, keeping the 1140:405 aspect so the SVG on top stays registered. */
  --loop: path("M95,202.5 C95,60 350,60 570,202.5 C790,345 1045,345 1045,202.5 C1045,60 790,60 570,202.5 C350,345 95,345 95,202.5 Z");
  --loop-w: 1140px;
  --loop-h: 405px;
  --face: 64px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  scroll-behavior: smooth;
}

html.is-script-scrolling {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--page);
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Slow rainbow wash behind everything, so the page never reads as flat corporate white. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(224, 68, 124, 0.24), transparent) 12% 16% / 46% 46% no-repeat,
    radial-gradient(closest-side, rgba(155, 93, 229, 0.24), transparent) 84% 8% / 44% 44% no-repeat,
    radial-gradient(closest-side, rgba(58, 165, 224, 0.22), transparent) 72% 58% / 50% 50% no-repeat,
    radial-gradient(closest-side, rgba(141, 198, 63, 0.20), transparent) 20% 74% / 46% 46% no-repeat,
    radial-gradient(closest-side, rgba(245, 197, 66, 0.20), transparent) 50% 96% / 42% 42% no-repeat;
  filter: blur(30px);
  animation: aurora 34s ease-in-out infinite alternate;
}

@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

img,
svg {
  max-width: 100%;
}

button,
a,
input {
  font: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ---- shared bits ------------------------------------------------------------------------- */

.wall-street-clock,
.countdown-value,
.stat-value,
.wallet-copy {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Rainbow fill for display type. */
.gradient-text {
  background: var(--rainbow);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-slide 16s linear infinite;
}

@keyframes hue-slide {
  to { background-position: 240% 0; }
}

.button-primary,
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.button-primary {
  position: relative;
  color: var(--paper);
  background: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.button-primary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rainbow);
  background-size: 240% 100%;
  animation: hue-slide 6s linear infinite;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--line-strong);
  color: var(--ink);
}

.button-ghost:hover {
  transform: translateY(-2px);
  background: var(--paper);
  border-color: var(--c2);
}

/* ---- geofence banner --------------------------------------------------------------------- */

.geo-banner {
  padding: 11px var(--content-pad);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid transparent;
  border-image: var(--rainbow) 1;
}

.geo-banner p {
  max-width: var(--page-max);
  margin: 0 auto;
  font-size: 14px;
}

.geo-banner-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- header ------------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 243, 251, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  width: 54px;
  height: auto;
  flex: none;
  animation: mark-breathe 6s ease-in-out infinite;
}

@keyframes mark-breathe {
  50% { transform: scale(1.07) rotate(-2deg); }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-symbol {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.brand-name {
  font-size: 13px;
  color: var(--ink-soft);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-button {
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.nav-button:hover {
  color: var(--ink);
  background: var(--rainbow-soft);
}

.portal-button {
  position: relative;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.portal-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rainbow);
  background-size: 240% 100%;
  animation: hue-slide 6s linear infinite;
}

.portal-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ---- layout ------------------------------------------------------------------------------ */

.dashboard {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--content-pad) 72px;
}

.panel {
  position: relative;
  margin-top: 28px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 100px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--rainbow);
  background-size: 240% 100%;
  animation: hue-slide 18s linear infinite;
}

.panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.panel.is-arriving {
  animation: panel-pulse 1200ms ease;
}

@keyframes panel-pulse {
  0% { box-shadow: 0 0 0 0 rgba(155, 93, 229, 0.45); }
  100% { box-shadow: 0 0 0 22px rgba(155, 93, 229, 0); }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.panel-head h2 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.panel-sub {
  margin: 8px 0 0;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: 15px;
}

.link-out {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, transform 160ms ease;
}

.link-out:hover {
  border-color: var(--c2);
  transform: translateY(-1px);
}

/* Lighter ships its mark as a full-colour rounded tile, so it is shown as-is rather than
   flattened to a silhouette (brightness(0) turned it into a solid black square). */
.link-out img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.link-out.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

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

.hero {
  padding: 40px 0 8px;
  text-align: center;
}

.hero-eyebrow {
  margin: 0 0 16px;
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--rainbow-soft);
  border: 1px solid var(--line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transform: rotate(-1.2deg);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-eyebrow:hover {
  transform: rotate(1.2deg) scale(1.04);
}

.hero h1 {
  margin: 0 auto;
  max-width: 18ch;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  background: var(--rainbow);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-slide 16s linear infinite;
}

/* Sits under the cast now: title and faces carry the hero, the thesis explains what you just saw. */
.hero-lede {
  margin: 26px auto 0;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 17px;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

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

.hero-loop {
  position: relative;
  width: var(--loop-w);
  height: var(--loop-h);
  max-width: 100%;
  margin: -14px auto -10px;
}

.hero-loop-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-loop-dash {
  animation: dash-flow 3.2s linear infinite;
}

@keyframes dash-flow {
  to { stroke-dashoffset: -36; }
}

.orbit {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orbit-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --n is the slot count, set by buildOrbit(), and is always ODD on purpose. A lemniscate passes
     through its own centre twice, exactly 50% of the path apart, so an even slot count welds faces
     i and i + n/2 together every time they cross the middle — which is what read as the animation
     glitching. With an odd n no pair can ever be antipodal. The cost is one wider gap in the ring.

     Static spread is the base state and the animation overrides it, so prefers-reduced-motion can
     switch the animation off without stacking every face on one point. */
  offset-path: var(--loop);
  offset-distance: calc(var(--i) * 100% / var(--n, 7));
  offset-rotate: 0deg;
  animation: orbit 34s linear infinite;
  animation-delay: calc(var(--i) * -34s / var(--n, 7));
  will-change: offset-distance;
}

/* The `from` is load-bearing. Without it the implicit start is each element's OWN computed
   offset-distance (its static slot), so every face travels a different arc in the same duration —
   ten different speeds, constant overtaking and pile-ups. Explicit 0%→100% makes the motion
   identical for all of them and leaves the negative animation-delay to do the spacing. */
@keyframes orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.hero-loop:hover .orbit-item {
  animation-play-state: paused;
}

.orbit-face {
  position: relative;
  width: var(--face);
  height: var(--face);
  border-radius: 999px;
  background: linear-gradient(140deg, var(--face-a, var(--c1)), var(--face-b, var(--c3)));
  box-shadow: 0 6px 18px rgba(23, 20, 31, 0.18), 0 0 0 3px var(--paper);
  transition: transform 200ms ease;
}

/* Each face gets its own slice of the palette so ten monograms don't read as ten clones. */
.orbit-item:nth-child(1) .orbit-face { --face-a: var(--c1); --face-b: var(--c2); }
.orbit-item:nth-child(2) .orbit-face { --face-a: var(--c2); --face-b: var(--c3); }
.orbit-item:nth-child(3) .orbit-face { --face-a: var(--c3); --face-b: var(--c4); }
.orbit-item:nth-child(4) .orbit-face { --face-a: var(--c4); --face-b: var(--c5); }
.orbit-item:nth-child(5) .orbit-face { --face-a: var(--c5); --face-b: var(--c6); }
.orbit-item:nth-child(6) .orbit-face { --face-a: var(--c6); --face-b: var(--c7); }
.orbit-item:nth-child(7) .orbit-face { --face-a: var(--c7); --face-b: var(--c1); }
.orbit-item:nth-child(8) .orbit-face { --face-a: var(--c1); --face-b: var(--c3); }
.orbit-item:nth-child(9) .orbit-face { --face-a: var(--c2); --face-b: var(--c5); }
.orbit-item:nth-child(10) .orbit-face { --face-a: var(--c4); --face-b: var(--c7); }

/* Monogram sits under the portrait layer, so setting --portrait covers it automatically. */
.orbit-face::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: calc(var(--face) * 0.32);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(23, 20, 31, 0.35);
}

.orbit-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background-image: var(--portrait, none);
  background-size: cover;
  background-position: center top;
}

.orbit-item:hover .orbit-face {
  transform: scale(1.12);
}

/* The card's own z-index only orders it INSIDE its .orbit-item. The items themselves are positioned
   with z-index auto, so a later sibling's face paints over an earlier sibling's card — which at the
   crossover means the card opens underneath somebody's head. Lift the whole hovered item instead. */
.orbit-item:hover,
.orbit-item:focus-within {
  z-index: 10;
}

/* Identity moves into a hover card instead of a permanent label under every face — ten always-on
   tags collided with each other and with the faces at the crossover, which is what read as glitchy. */
.orbit-card {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--face-a, var(--c1)), var(--face-b, var(--c3)));
  box-shadow: 0 10px 28px rgba(23, 20, 31, 0.25);
  color: #fff;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.94);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.orbit-card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--face-b, var(--c3));
}

.orbit-item:hover .orbit-card,
.orbit-item:focus-visible .orbit-card {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Bigger repeat of the face, so the hover reveal reads as a card being flipped over rather than a
   tooltip. Falls back to the monogram exactly like the circles do. */
.orbit-card-portrait {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  background-image: var(--portrait, none);
  background-size: cover;
  background-position: center top;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.orbit-card-portrait::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  opacity: var(--monogram-opacity, 1);
}

/* Once a real photo lands, the monogram underneath would show through the card thumb. */
.orbit-card-portrait[style*="--portrait"]::after {
  --monogram-opacity: 0;
}

.orbit-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.orbit-card-name {
  font-weight: 600;
  font-size: 14px;
}

.orbit-card-company {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.85;
}

/* ---- founders ---------------------------------------------------------------------------- */

.founders {
  /* Sticker strip, not a grid of cards. Seven chips centre-wrap into a tidy 4 + 3 on desktop and
     stack two-up on phones, so the whole cast fits above the fold at any standard viewport. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: 4px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* Laptop-sticker treatment: chunky coloured outline, hard offset shadow, and a lazy tilt that
   straightens when you poke it. Alternating the tilt sign keeps the row from leaning one way. */
.founder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 2px solid var(--tint, var(--c1));
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--tint, var(--c1)) 38%, transparent);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease, background-color 180ms ease;
}

.founder:nth-child(odd) { --tilt: -1.4deg; }
.founder:nth-child(even) { --tilt: 1.4deg; }

.founder:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.04);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--tint, var(--c1)) 55%, transparent);
  background: color-mix(in srgb, var(--tint, var(--c1)) 7%, var(--paper));
}

/* Currently in the treasury — the chip fills in with its own colour so the hero doubles as a live
   holdings read-out. Driven by renderFounderHoldings() off real Lighter positions. */
.founder.is-held {
  background: color-mix(in srgb, var(--tint, var(--c1)) 13%, var(--paper));
}

.founder.is-held .founder-name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--tint, var(--c1));
  vertical-align: 1px;
  animation: held-pulse 2.4s ease-in-out infinite;
}

@keyframes held-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.78); }
}

.founder-face {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--face-a, var(--c1)), var(--face-b, var(--c3)));
  overflow: hidden;
}

.founder-face::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(23, 20, 31, 0.35);
}

.founder-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--portrait, none);
  background-size: cover;
  background-position: center top;
}

.founder-text {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.founder-name {
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

/* The company name is for the orbit hover card and for app.js; on the chip only the ticker shows,
   which is what keeps seven people inside two rows. */
.founder-company {
  font-size: 0;
}

.founder-company em {
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tint, var(--c1));
}

/* Same palette slice as the orbiting face for the same person, so the chip and the flying head
   always read as one identity. */
.founder:nth-child(1) { --tint: var(--c1); --face-a: var(--c1); --face-b: var(--c2); }
.founder:nth-child(2) { --tint: var(--c2); --face-a: var(--c2); --face-b: var(--c3); }
.founder:nth-child(3) { --tint: var(--c3); --face-a: var(--c3); --face-b: var(--c4); }
.founder:nth-child(4) { --tint: var(--c4); --face-a: var(--c4); --face-b: var(--c5); }
.founder:nth-child(5) { --tint: var(--c5); --face-a: var(--c5); --face-b: var(--c6); }
.founder:nth-child(6) { --tint: var(--c6); --face-a: var(--c6); --face-b: var(--c7); }
.founder:nth-child(7) { --tint: var(--c7); --face-a: var(--c7); --face-b: var(--c1); }

.founders-note {
  max-width: 88ch;
  margin: 22px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--rainbow-soft);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
  text-align: left;
}

.founders-note strong {
  color: var(--ink);
}

.founders-note em {
  font-style: italic;
}

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

.treasury-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 32px;
  padding: 32px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.treasury-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--rainbow);
  background-size: 240% 100%;
  animation: hue-slide 12s linear infinite;
}

.treasury-band::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -60%;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(155, 93, 229, 0.45), transparent);
  pointer-events: none;
}

.treasury-main {
  position: relative;
  z-index: 1;
}

.treasury-main h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.treasury-total {
  margin-top: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  background: var(--rainbow);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-slide 16s linear infinite;
}

.treasury-note {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.treasury-sub {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  margin: 0;
}

.treasury-sub div {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.treasury-sub dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.treasury-sub dd {
  margin: 5px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 21px;
}

.treasury-sub dd.is-up { color: #6ee7a8; }
.treasury-sub dd.is-down { color: #ff8fa0; }

/* ---- stat strip -------------------------------------------------------------------------- */

/* Four loose HUD tiles rather than one hairline-divided slab — same sticker language as the hero
   chips, so the numbers read as a scoreboard instead of a reporting table. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 2px solid var(--tint, var(--c1));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tint, var(--c1)) 8%, var(--paper));
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--tint, var(--c1)) 32%, transparent);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}

.stat:nth-child(1) { --tint: var(--c1); --tilt: -0.6deg; }
.stat:nth-child(2) { --tint: var(--c3); --tilt: 0.6deg; }
.stat:nth-child(3) { --tint: var(--c5); --tilt: -0.6deg; }
.stat:nth-child(4) { --tint: var(--c7); --tilt: 0.6deg; }

.stat:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--tint, var(--c1)) 48%, transparent);
}

.stat-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tint, var(--c1)) 72%, var(--ink));
}

.stat-value {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wall-street-clock em {
  font-style: normal;
  font-size: 0.62em;
  color: var(--ink-faint);
}

/* ---- portfolio table --------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.portfolio-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.portfolio-table th {
  padding: 0 14px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.portfolio-table th:first-child,
.portfolio-table td:first-child {
  padding-left: 0;
}

.portfolio-table th:last-child,
.portfolio-table td:last-child {
  padding-right: 0;
}

.portfolio-table .th-num,
.portfolio-table .notional-cell,
.portfolio-table .pnl-cell {
  text-align: right;
}

.portfolio-table tbody tr {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 160ms ease;
  animation: row-in 460ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: var(--row-delay, 0ms);
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.portfolio-table tbody tr:hover {
  background: var(--rainbow-soft);
}

.portfolio-table td {
  padding: 16px 14px;
  vertical-align: middle;
}

.asset-cell {
  min-width: 168px;
}

.asset-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

/* Each row's ticker wears its constituent colour, the same one the conviction bar uses, so the
   table is scannable by hue the way the hero chips are. --asset-color is set per row by app.js. */
.asset-ticker {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--asset-color, var(--c1)) 16%, var(--paper));
  color: color-mix(in srgb, var(--asset-color, var(--c1)) 78%, var(--ink));
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.asset-company {
  font-size: 13px;
  color: var(--ink-faint);
}

.asset-link:hover .asset-ticker {
  background: var(--asset-color, var(--c1));
  color: #fff;
}

.venue-cell {
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 14px;
}

.venue-cell img {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 4px;
}

.weight-cell {
  min-width: 190px;
}

.weight-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weight-pct {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  min-width: 52px;
}

.bar-track {
  position: relative;
  flex: 1;
  height: 8px;
  min-width: 60px;
  border-radius: 999px;
  background: rgba(23, 20, 31, 0.07);
  overflow: hidden;
}

.bar-track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar-start, 0%);
  border-radius: 999px;
  background: var(--bar-color, var(--c3));
  animation: bar-grow 700ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: var(--bar-delay, 0ms);
}

@keyframes bar-grow {
  from { width: 0; }
}

.notional-cell,
.pnl-cell {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pnl-cell.is-up { color: var(--up); }
.pnl-cell.is-down { color: var(--down); }

.portfolio-empty-row td {
  padding: 34px 0;
  text-align: center;
  color: var(--ink-faint);
}

/* ---- spectrum ---------------------------------------------------------------------------- */


/* ---- steps + key stats ------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Soft tinted blocks with a big round number, rather than three columns under a hairline rule. */
.steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tint, var(--c1)) 9%, var(--paper));
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.steps li:hover {
  transform: translateY(-3px) rotate(var(--tilt, 0deg));
}

.steps li:nth-child(1) { --tint: var(--c1); --tilt: -0.7deg; }
.steps li:nth-child(2) { --tint: var(--c3); --tilt: 0.7deg; }
.steps li:nth-child(3) { --tint: var(--c5); --tilt: -0.7deg; }

.step-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--tint, var(--c1));
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.steps strong {
  font-size: 18px;
  font-weight: 600;
}

.steps span:last-child {
  color: var(--ink-soft);
  font-size: 15px;
}

/* The rulebook numbers, as collectible badges. Each cycles the palette so the block reads as a
   set you could tick off rather than a spec sheet. */
.key-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin: 30px 0 0;
}

.key-stats div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 17px;
  border: 2px dashed color-mix(in srgb, var(--tint, var(--c1)) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tint, var(--c1)) 7%, var(--paper));
  transition: border-color 180ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.key-stats div:hover {
  transform: translateY(-2px);
  border-color: var(--tint, var(--c1));
  border-style: solid;
}

.key-stats div:nth-child(7n + 1) { --tint: var(--c1); }
.key-stats div:nth-child(7n + 2) { --tint: var(--c2); }
.key-stats div:nth-child(7n + 3) { --tint: var(--c3); }
.key-stats div:nth-child(7n + 4) { --tint: var(--c4); }
.key-stats div:nth-child(7n + 5) { --tint: var(--c5); }
.key-stats div:nth-child(7n + 6) { --tint: var(--c6); }
.key-stats div:nth-child(7n) { --tint: var(--c7); }

.key-stats dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tint, var(--c1)) 72%, var(--ink));
}

.key-stats dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

/* ---- redemption panel -------------------------------------------------------------------- */

.redeem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(268px, 1fr);
  gap: 30px;
  align-items: start;
}

.redeem-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0 0 0 28px;
  counter-reset: redeem;
}

.redeem-steps li {
  position: relative;
  list-style: none;
  counter-increment: redeem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.redeem-steps li::before {
  content: counter(redeem);
  position: absolute;
  left: -28px;
  top: 1px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.redeem-steps li:nth-child(1)::before { background: var(--c1); }
.redeem-steps li:nth-child(2)::before { background: var(--c3); }
.redeem-steps li:nth-child(3)::before { background: var(--c5); }
.redeem-steps li:nth-child(4)::before { background: var(--c7); }

.redeem-steps strong {
  font-size: 16px;
  font-weight: 600;
}

.redeem-steps span {
  color: var(--ink-soft);
  font-size: 15px;
}

.redeem-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px;
  background: var(--rainbow-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.redeem-cta-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.redeem-cta .button-primary {
  width: 100%;
}

.redeem-cta-note {
  margin: 0;
  color: var(--ink-faint);
  font-size: 12px;
}

.redemption-countdown-target {
  margin: 0;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---- countdown --------------------------------------------------------------------------- */

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.countdown-cell {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.countdown-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.countdown-label {
  color: var(--ink-faint);
}

.countdown-inline {
  justify-content: flex-start;
  gap: 10px;
}

.countdown-inline .countdown-label {
  font-size: 13px;
}

/* Arcade cabinet, not a dashboard widget: dark digit tiles with the seconds ticking in colour. */
.countdown-large {
  gap: 8px;
  align-items: center;
}

.countdown-large .countdown-cell {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.countdown-large .countdown-value {
  display: block;
  min-width: 74px;
  padding: 10px 8px 8px;
  border-radius: 14px;
  background: #17141f;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(23, 20, 31, 0.22);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 36px;
  line-height: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--digit, var(--c3)) 85%, transparent);
}

.countdown-large .countdown-cell:nth-child(1) { --digit: var(--c2); }
.countdown-large .countdown-cell:nth-child(3) { --digit: var(--c3); }
.countdown-large .countdown-cell:nth-child(5) { --digit: var(--c1); }

/* Only the seconds tile pulses — three blinking tiles would be a slot machine. */
.countdown-large .countdown-cell:nth-child(5) .countdown-value {
  animation: digit-tick 1s steps(1) infinite;
}

@keyframes digit-tick {
  0%, 55% { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(23, 20, 31, 0.22), 0 0 0 0 color-mix(in srgb, var(--digit) 40%, transparent); }
  56%, 100% { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(23, 20, 31, 0.22), 0 0 0 5px color-mix(in srgb, var(--digit) 20%, transparent); }
}

.countdown-large .countdown-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--digit, var(--c3)) 70%, var(--ink));
}

.countdown-sep {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 28px;
  color: var(--ink-faint);
}

/* The digit tiles already separate themselves; a colon between them just floats off-baseline. */
.countdown-large .countdown-sep {
  display: none;
}

/* ---- wallets ----------------------------------------------------------------------------- */

.wallets {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.wallets h3 {
  margin: 0 0 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.wallet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wallet-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 14px;
  border: 2px solid var(--c4);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--c4) 30%, transparent);
  font-size: 14px;
  transform: rotate(-0.8deg);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease;
}

.wallet-item:nth-child(even) {
  border-color: var(--c2);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--c2) 30%, transparent);
  transform: rotate(0.8deg);
}

.wallet-item:hover {
  transform: rotate(0deg) translateY(-2px);
}

.wallet-item img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.wallet-copy {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--rainbow-soft);
  border: 1.5px solid var(--line-strong);
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.wallet-copy:hover {
  border-color: var(--c2);
  color: var(--c2);
}

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

.site-legal-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--content-pad) 56px;
}

.legal-disclaimer {
  margin: 0 0 10px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.6;
}

/* ---- skeletons --------------------------------------------------------------------------- */

.skeleton-box {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  background: var(--skeleton-base);
  overflow: hidden;
  color: transparent !important;
}

.skeleton-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);
  animation: shimmer 1250ms infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.metric-skeleton {
  width: var(--skeleton-width, 90px);
  min-height: 1em;
  vertical-align: middle;
}

.treasury-band .metric-skeleton {
  background: rgba(255, 255, 255, 0.16);
}

.treasury-band .metric-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
}

.portfolio-skeleton-row td {
  padding: 16px 14px;
}

.skeleton-line {
  display: block;
  height: 12px;
  width: 100%;
}

.skeleton-line-asset { width: 110px; }
.skeleton-line-venue { width: 84px; }
.skeleton-line-weight { width: 150px; }
.skeleton-line-notional { width: 78px; margin-left: auto; }
.skeleton-line-pnl { width: 62px; margin-left: auto; }

/* ---- modals ------------------------------------------------------------------------------ */

dialog {
  padding: 0;
  border: 0;
  background: none;
}

dialog::backdrop {
  background: rgba(23, 20, 31, 0.55);
  backdrop-filter: blur(4px);
}

.modal-card {
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: 28px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.rules-card {
  width: min(760px, calc(100vw - 32px));
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 3px solid transparent;
  border-image: var(--rainbow) 1;
}

.modal-header h2 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
}

.modal-header button {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  cursor: pointer;
}

.modal-header button:hover {
  border-color: var(--c2);
}

.rules-document section {
  margin-bottom: 26px;
}

.rules-document h3 {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 600;
}

.rules-document p,
.rules-document li {
  color: var(--ink-soft);
  font-size: 15px;
}

.rules-document p {
  margin: 0 0 10px;
}

.rules-document ul,
.rules-document ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.rules-document li {
  margin-bottom: 5px;
}

.rules-document strong {
  color: var(--ink);
}

.rule-formula {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--rainbow-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-align: center;
}

.rule-closing {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}

/* ---- redeem modal internals -------------------------------------------------------------- */

.redeem-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background: var(--rainbow-soft);
  font-size: 14px;
}

.redeem-status-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: var(--ink-faint);
}

.redeem-status[data-state="connected"] .redeem-status-dot { background: var(--up); }
.redeem-status[data-state="closed"] .redeem-status-dot,
.redeem-status[data-state="error"] .redeem-status-dot { background: var(--down); }
.redeem-status[data-state="wrongChain"] .redeem-status-dot { background: var(--c6); }

.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

#redeemAmount {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 20px;
}

#redeemAmount:focus {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: transparent;
}

.redeem-amount-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.redeem-slider {
  flex: 1;
  accent-color: var(--c2);
}

.redeem-max {
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  cursor: pointer;
}

.redeem-max:disabled,
.redeem-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.redeem-balance {
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-size: 13px;
}

.estimate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.estimate-grid div {
  padding: 15px 16px;
  background: var(--paper);
}

.estimate-grid dt {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.estimate-grid dd {
  margin: 6px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 21px;
}

.redeem-reason {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(217, 69, 91, 0.09);
  color: var(--down);
  font-size: 14px;
}

.redeem-action {
  position: relative;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
}

.redeem-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rainbow);
}

.redeem-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.redeem-note,
.redeem-contract {
  margin: 14px 0 0;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.6;
}

.redemption-closed-lead {
  margin: 0 0 20px;
  color: var(--ink-soft);
}

.redemption-closed-card .countdown {
  margin-bottom: 14px;
}

.redemption-closed-target {
  text-align: center;
}

.redemption-closed-note {
  margin: 18px 0 0;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---- copy toast -------------------------------------------------------------------------- */

.copy-status {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.copy-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- landing ----------------------------------------------------------------------------- */

.landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 56px var(--content-pad) 32px;
  text-align: center;
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-mark {
  width: min(240px, 62vw);
  height: auto;
  animation: mark-breathe 6s ease-in-out infinite;
}

.landing-title {
  margin: 18px 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  background: var(--rainbow);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-slide 16s linear infinite;
}

.landing-tagline {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 17px;
  text-wrap: balance;
}

.intro-actions {
  margin-top: 30px;
}

.intro-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.intro-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rainbow);
  background-size: 240% 100%;
  animation: hue-slide 6s linear infinite;
}

.intro-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.intro-action.is-checking,
.intro-action.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.region-status {
  margin: 14px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  opacity: 0;
  transition: opacity 200ms ease;
}

.region-status.is-visible {
  opacity: 1;
}

.landing-disclaimer {
  max-width: 74ch;
  margin: 0 auto;
  text-align: center;
}

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

/* The loop stage gets its own ladder of breakpoints, separate from the layout ones below. Each step
   is the base curve scaled uniformly; the stage must never be wider than the content box, because
   max-width would shrink the box without shrinking the path and knock the faces off the track. */
@media (max-width: 1180px) {
  :root {
    --loop: path("M75,159.9 C75,47.4 276.3,47.4 450,159.9 C623.7,272.4 825.1,272.4 825.1,159.9 C825.1,47.4 623.7,47.4 450,159.9 C276.3,272.4 75,272.4 75,159.9 Z");
    --loop-w: 900px;
    --loop-h: 320px;
    --face: 56px;
  }
}

@media (max-width: 940px) {
  :root {
    --loop: path("M55,117.2 C55,34.7 202.6,34.7 330,117.2 C457.3,199.7 605,199.7 605,117.2 C605,34.7 457.3,34.7 330,117.2 C202.6,199.7 55,199.7 55,117.2 Z");
    --loop-w: 660px;
    --loop-h: 235px;
    --face: 44px;
  }
}

@media (max-width: 700px) {
  :root {
    --loop: path("M36.7,78.2 C36.7,23.2 135.1,23.2 220,78.2 C304.9,133.2 403.4,133.2 403.4,78.2 C403.4,23.2 304.9,23.2 220,78.2 C135.1,133.2 36.7,133.2 36.7,78.2 Z");
    --loop-w: 440px;
    --loop-h: 156px;
    --face: 34px;
  }
}

@media (max-width: 500px) {
  :root {
    --loop: path("M26.7,56.8 C26.7,16.8 98.2,16.8 160,56.8 C221.8,96.8 293.3,96.8 293.3,56.8 C293.3,16.8 221.8,16.8 160,56.8 C98.2,96.8 26.7,96.8 26.7,56.8 Z");
    --loop-w: 320px;
    --loop-h: 114px;
    --face: 28px;
  }
}

@media (max-width: 1000px) {
  .treasury-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .treasury-sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .redeem-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --content-pad: 16px;
  }

  /* No hover on touch, and a card on a face near the edge of a narrow stage overflows the viewport.
     The founders list directly below carries the same names, so nothing is lost. */
  .orbit-card {
    display: none;
  }

  /* Centre-wrapping seven chips of different name lengths goes ragged on a phone. One even column
     of equal-width stickers reads as deliberate and keeps the whole cast on screen. */
  .founders {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    max-width: 330px;
  }

  .founder {
    padding: 6px 12px 6px 7px;
  }

  .founder:nth-child(odd) { --tilt: -0.8deg; }
  .founder:nth-child(even) { --tilt: 0.8deg; }

  .founder-face {
    width: 30px;
    height: 30px;
  }

  .founder-name {
    font-size: 14px;
  }

  .founders-note {
    font-size: 13px;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .primary-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .panel {
    padding: 22px;
  }

  .panel-head h2 {
    font-size: 26px;
  }

  .treasury-band {
    padding: 24px;
  }

  /* Drop the two lowest-value columns before the table can force a horizontal scrollbar. */
  .portfolio-table .venue-cell,
  .portfolio-table thead th:nth-child(2),
  .portfolio-table .weight-cell,
  .portfolio-table thead th:nth-child(3) {
    display: none;
  }

  .countdown-large .countdown-value {
    font-size: 28px;
  }
}

@media (max-width: 420px) {
  .stat-strip,
  .treasury-sub {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Zeroing the duration would land every face on offset-distance 100% (all stacked at one point).
     Switching the animation off instead falls back to the static per-index spread. */
  .orbit-item {
    animation: none !important;
  }
}