/* ============================================================
   CURVEPAD — the look.

   The page is black. Not near-black: #000, matte, with no
   wallpaper behind it. Everything on it is a dark surface a
   shade off the page with a hairline of white at 13%, a pill
   nav floating in the middle of the header, white pill buttons,
   Geist for words and Geist Mono for every number.

   Every colour lives in the tokens below and nowhere else — the
   canvas and SVG drawings read them back through DP.paint, so
   the charts follow the theme instead of repeating it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  --bg: #000000;
  --card: #0d0d0f;
  --card-2: #17171a;
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.075);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --mute: rgba(255, 255, 255, 0.5);
  --faint: rgba(255, 255, 255, 0.3);

  --blue: #8aa2ff;
  --blue-soft: rgba(138, 162, 255, 0.15);
  --cream: rgba(255, 209, 102, 0.16);
  --cream-ink: #ffd98a;
  --amber: #ffcf6b;
  --green: #3ddc84;
  --green-soft: rgba(61, 220, 132, 0.15);
  --red: #ff7b7b;
  --red-soft: rgba(255, 123, 123, 0.15);
  --grey-soft: rgba(255, 255, 255, 0.12);

  --radius: 16px;
  --radius-sm: 12px;
  --pill: 999px;

  --shell: 1180px;
  --bar: 64px;

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* the brand: the logo orb's three stops, used as one gradient */
  --g1: #ffd166;
  --g2: #ff5c7a;
  --g3: #3b5bff;
  --grad: linear-gradient(115deg, var(--g1), var(--g2) 46%, var(--g3));
  --night: #0c0c0e;   /* a slab: a hair off the page, so it still reads as a block */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* no wallpaper: the page is black, and that is the point */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: rgba(138, 162, 255, 0.35); color: #fff; }

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

/* ---------- type ------------------------------------------- */

.display {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin: 0;
}

.mono {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.sub {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 64ch;
}

.hint { font-family: var(--mono); font-size: 0.7rem; color: var(--mute); }

.accent-mag { color: var(--blue); }
.accent-blue { color: var(--blue); }

/* ---------- shell ------------------------------------------- */

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

section { padding: 60px 0; }
section + section { padding-top: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.035em; }
.section-head .sub { font-size: 0.95rem !important; margin-top: 10px !important; }

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

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(1.2) blur(12px);
}

.top-in {
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mark i { font-style: normal; font-weight: 700; }
.mark i + i { font-weight: 500; color: var(--ink-2); }

.mark-logo {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  display: inline-grid;
  place-items: center;
}
.mark-logo svg { width: 24px; height: 24px; }

/* the pill nav, centred in the bar regardless of what sits either side */
.nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}
.nav a {
  padding: 6px 13px;
  border-radius: var(--pill);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--card-2); }
.nav a[aria-current='page'] {
  color: var(--bg);
  background: var(--ink);
}

.top-side { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- buttons ----------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--card);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: -0.005em;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  white-space: nowrap;
  color: var(--ink);
}
.btn:hover { background: var(--card-2); border-color: rgba(255, 255, 255, 0.26); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-ink:hover { background: #e6e6e6; border-color: #e6e6e6; }
.btn-blue { background: var(--blue); color: #08080a; border-color: var(--blue); }
.btn-blue:hover { background: #a3b6ff; border-color: #a3b6ff; }
.btn-mag { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-mag:hover { background: #e6e6e6; border-color: #e6e6e6; }
.btn-yellow { background: var(--cream); color: var(--cream-ink); border-color: rgba(255, 209, 102, 0.4); }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-lg { padding: 11px 20px; font-size: 0.9rem; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--card); }
.btn-block { width: 100%; }
.btn-dashed { border-style: dashed; color: var(--ink-2); }

.icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--pill);
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.icon-btn:hover { background: var(--card-2); }

.menu-btn { display: none; }

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

.hero { padding: 18px 0 32px; }

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 44px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.9vw, 3.65rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  margin: 0;
  max-width: 17ch;
}
.hero h1 span { display: inline; }
.hero h1 em { font-style: normal; }

.hero .sub {
  margin: 24px 0 0;
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 54ch;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.pip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mute);
  max-width: 100%;
  text-align: right;
}
.pip i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* the counters: filling · graduated · buyers */
.tally { display: inline-flex; gap: 26px; margin: 0; }
.tally div { text-align: center; }
.tally dt {
  font-size: 0.72rem;
  color: var(--mute);
  margin: 0 0 2px;
  font-weight: 500;
}
.tally dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 1.35rem; line-height: 1.1; }

.wall { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pip i { animation: none; }
}

/* ---------- recent strip ------------------------------------ */

.recent {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.recent-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.recent-row:hover { border-color: rgba(255, 255, 255, 0.26); background: var(--card-2); }
.recent-ic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--card-2);
  display: grid;
  place-items: center;
  color: var(--mute);
}
.recent-ic img { width: 100%; height: 100%; object-fit: cover; }
.recent-txt { min-width: 0; flex: 1; }
.recent-txt b { display: flex; justify-content: space-between; gap: 8px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.recent-txt b u { text-decoration: none; font-family: var(--mono); font-weight: 400; font-size: 0.68rem; color: var(--mute); flex: 0 0 auto; }
.recent-txt span { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-txt span i { font-style: normal; color: var(--ink); font-weight: 500; }
.recent-txt span em { font-style: normal; color: var(--ink); font-weight: 500; }

/* ---------- filters ----------------------------------------- */

.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--card);
  padding: 0 14px;
  height: 40px;
  flex: 1 1 320px;
  min-width: 220px;
}
.search input[type='text'] { border: 0; background: none; padding: 0; box-shadow: none; font-size: 0.86rem; height: 100%; }
.search input[type='text']:focus { box-shadow: none; outline: none; border: 0; }
.search svg { color: var(--mute); flex: 0 0 auto; }

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--card);
  padding: 0 34px 0 14px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 150px;
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 0;
  width: 100%;
  cursor: pointer;
  box-shadow: none;
  color: var(--ink);
}
.select select:focus { outline: none; box-shadow: none; }
.select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}
.chip {
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); background: var(--card-2); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.chip small { font-family: var(--mono); font-size: 0.66rem; color: var(--mute); }
.chip[aria-pressed='true'] small { color: rgba(0, 0, 0, 0.55); }

.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.filters .rule { display: none; }

/* stand-alone chips (the buy panel's 25/50/75/max) keep a border */
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-sm { border: 1px solid var(--line); background: var(--card); padding: 5px 12px; font-size: 0.76rem; }
.chip-sm[aria-pressed='true'] { border-color: var(--ink); }

/* ---------- offering grid ------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.card:hover { border-color: rgba(255, 255, 255, 0.26); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }

/* the offering at the top of the list, given the room it deserves */
.card-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.card-wide .poster { aspect-ratio: auto; flex: 0 0 44%; min-height: 320px; }
.card-wide .card-body { padding: 30px 34px; gap: 14px; justify-content: center; }
.card-wide .card-title h3 { font-size: 1.85rem; letter-spacing: -0.035em; }
.card-wide .tick { font-size: 0.86rem; }
.card-wide .card-desc {
  line-height: 1.65; -webkit-line-clamp: 4; font-size: 0.95rem; max-width: 58ch; }
.card-wide .stat dd { font-size: 1.3rem; }
.card-wide .stat dd .usd { font-size: 0.72rem; }
.card-wide .stats { gap: 22px; padding: 4px 0; }
.card-wide .feat-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.card-wide .feat-cta svg { transition: transform 0.2s ease; }
.card-wide:hover .feat-cta svg { transform: translateX(4px); }
@media (max-width: 860px) {
  .card-wide { flex-direction: column; }
  .card-wide .poster { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .card-wide .card-body { padding: 18px 18px 20px; }
  .card-wide .card-title h3 { font-size: 1.35rem; }
}

/* the token's picture is the whole top of the card */
.poster {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--card-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster .glyph { display: grid; place-items: center; color: var(--faint); }
.poster .glyph svg { width: min(88px, 30%); height: auto; }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.badge svg { width: 11px; height: 11px; flex: 0 0 auto; }
.badge-right { left: auto; right: 10px; top: auto; bottom: 10px; background: rgba(10, 10, 12, 0.72); color: rgba(255, 255, 255, 0.82); }
.badge-bottom { top: auto; bottom: 10px; }
.badge-sample { left: auto; right: 10px; top: 10px; bottom: auto; background: rgba(10, 10, 12, 0.66); color: rgba(255, 255, 255, 0.6); font-size: 0.66rem; padding: 3px 8px; }
.badge-filling { background: rgba(10, 10, 12, 0.72); color: #fff; }
.badge-filled { background: rgba(10, 10, 12, 0.72); color: #fff; }
.badge-launched { background: rgba(10, 10, 12, 0.72); color: #fff; }
.badge-expired { background: rgba(10, 10, 12, 0.72); color: rgba(255, 255, 255, 0.6); }
.badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2.4s ease-in-out infinite;
}
.badge-filling i { background: var(--amber); }
.badge-filled i { background: var(--blue); }

.card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-title h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tick {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--mute);
  flex: 0 0 auto;
}

.card-desc {
  color: var(--ink-2);
  font-size: 0.82rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.55em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.stat { min-width: 0; }
.stat + .stat { border-left: 0; }
.stat dt {
  font-size: 0.68rem;
  color: var(--mute);
  margin: 0 0 1px;
  white-space: nowrap;
}
.stat dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat dd small { font-family: var(--sans); font-weight: 400; font-size: 0.68rem; color: var(--mute); margin-left: 3px; }
.stat dd .usd { display: block; font-size: 0.66rem; color: var(--mute); font-weight: 400; }
.up { color: var(--green); }
.down { color: var(--red); }

.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 2px;
}
.card-foot .when {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
  margin-left: auto;
  text-align: right;
}

/* ---------- the fill meter ------------------------------------ */

.meter { display: flex; flex-direction: column; gap: 6px; }
.meter-bar {
  height: 6px;
  border-radius: var(--pill);
  background: var(--grey-soft);
  overflow: hidden;
}
.meter-bar i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: var(--pill);
  transition: width 0.4s ease;
}
.meter-bar.is-launched i { background: var(--green); }
.meter-bar.is-filled i { background: var(--blue); }
.meter-bar.is-expired i { background: var(--faint); }
.meter { --h: 6px; }
.meter-bar { height: var(--h); }
.meter-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mute);
}
.meter-row b { color: var(--ink); font-weight: 500; }

/* ---------- steps ------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 20px 18px 22px;
}
.step .n {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-block;
  margin-bottom: 12px;
}
.step h3 { margin: 0 0 9px; font-size: 1rem; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--ink-2); font-size: 0.86rem; line-height: 1.7; }

/* ---------- page head --------------------------------------- */

/* every inner page opens on the same dark slab the home page does */
.page-head { padding: 18px 0 30px; }
.page-head > .shell {
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  overflow: hidden;
  padding: 48px 46px;
  background: var(--night);
}
.page-head > .shell::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 0;
  display: none;
}
.page-head > .shell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
}
.page-head > .shell > * { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -0.032em; line-height: 1.12; }
.page-head .sub { margin-top: 16px; font-size: 1rem; line-height: 1.75; max-width: 62ch; }

/* ---------- empty state ------------------------------------- */

.empty {
  border: 1px dashed var(--faint);
  border-radius: var(--radius);
  padding: 56px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
}
.empty h3 { margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -0.01em; }
.empty p { margin: 0 auto 20px; color: var(--ink-2); max-width: 48ch; }

.skeleton {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  height: 380px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.05) 50%, transparent 80%);
  animation: sweep 1.3s linear infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- activity list ----------------------------------- */

.feed { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.feed-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}
.feed-row + .feed-row { border-top: 1px solid var(--line-2); }
.feed-row:hover { background: var(--card-2); }
.feed-ic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--card-2);
  color: var(--mute);
  overflow: hidden;
}
.feed-ic svg { width: 16px; height: 16px; }
.feed-ic img { width: 100%; height: 100%; object-fit: cover; }
.feed-txt { min-width: 0; }
.feed-txt strong { font-weight: 600; }
.feed-txt p { margin: 0; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-txt span { font-family: var(--mono); font-size: 0.68rem; color: var(--mute); }
.feed-amt { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; flex: 0 0 auto; text-align: right; }
.feed-amt small { display: block; color: var(--mute); font-size: 0.66rem; }

/* ---------- forms ------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 500; }
.field label small { font-weight: 400; color: var(--mute); margin-left: 6px; }
.field .hint { font-family: var(--sans); font-size: 0.78rem; color: var(--mute); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

input[type='text'], input[type='url'], input[type='number'], textarea, select {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}
textarea { resize: vertical; min-height: 84px; }
input::placeholder, textarea::placeholder { color: var(--faint); }

.unit-input { position: relative; }
.unit-input input { padding-right: 64px; }
.unit-input span {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink);
  background: var(--card-2);
  border-radius: var(--pill);
  padding: 4px 9px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.unit-input.prefix input { padding-left: 30px; padding-right: 13px; }
.unit-input.prefix span { right: auto; left: 12px; background: none; padding: 0; font-size: 0.9rem; color: var(--mute); }

/* the buy panel's amount box, big and quiet */
.amount-box {
  background: var(--card-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.amount-box:focus-within { border-color: rgba(255, 255, 255, 0.34); background: var(--card); }
.amount-box input[type='number'] {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 500;
  box-shadow: none;
  min-width: 0;
}
.amount-box input[type='number']:focus { box-shadow: none; }
.amount-box .unit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 0.74rem;
}

.drop-zone {
  border: 1px dashed var(--faint);
  border-radius: var(--radius);
  background: var(--card);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--mute);
  font-size: 0.8rem;
  padding: 12px;
}
.drop-zone:hover, .drop-zone.over { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.drop-zone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop-zone svg { width: 24px; height: 24px; margin: 0 auto 8px; }

.logo-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--card);
}
.segmented button {
  border: 0;
  background: none;
  border-radius: var(--pill);
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
}
.segmented button + button { border-left: 0; }
.segmented button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.segmented button[aria-pressed='true'] .pair-mark { color: var(--bg); }

.note {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.84rem;
  background: var(--card-2);
  color: var(--ink-2);
}
.note-warn { background: var(--cream); color: var(--cream-ink); }
.note-bad { background: var(--red-soft); color: #ffb0b0; }
.note-good { background: var(--green-soft); color: #8ff0bb; }
.note-info { background: var(--blue-soft); color: #b9c7ff; }
.note b { display: block; margin-bottom: 2px; color: inherit; font-weight: 600; }

/* ---------- panels + kv ------------------------------------ */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-head h2 { margin: 0; font-size: 0.98rem; letter-spacing: -0.01em; font-weight: 600; }
.panel-head .spacer { margin-left: auto; }
.panel-head > span:first-child { color: var(--mute); display: inline-flex; }
.panel-body { padding: 18px; }

.kv { display: flex; flex-direction: column; margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; align-items: baseline; }
.kv div + div { border-top: 1px solid var(--line-2); }
.kv dt { color: var(--ink-2); font-size: 0.84rem; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 0.78rem; text-align: right; overflow-wrap: anywhere; }
.kv dd b { font-weight: 500; color: var(--ink); }
.kv dd .usd { color: var(--mute); margin-left: 6px; }

.addr {
  font-family: var(--mono);
  font-size: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 10px;
  background: var(--card-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.addr button { border: 0; background: none; cursor: pointer; opacity: 0.5; display: inline-flex; }
.addr button:hover { opacity: 1; }

/* the pair, stamped: the Ethereum mark in blue, PONS as type */
.pair-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
}
.pair-mark svg { width: 12px; height: 12px; }
.pair-sol { color: #14f195; }   /* Solana's green */
.pair-pons { color: #ff9ad6; }
.badge-right .pair-mark { color: var(--ink-2); }
.badge-right .pair-sol svg { color: #14f195; }

/* ---------- offering page ----------------------------------- */

.offer-head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 22px; }
.offer-logo {
  position: relative;
  width: 88px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card-2);
  display: grid;
  place-items: center;
  color: var(--faint);
}
.offer-logo img { width: 100%; height: 100%; object-fit: cover; }
.offer-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.offer-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); letter-spacing: -0.04em; }
.offer-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-family: var(--mono); font-size: 0.78rem; color: var(--mute); }
.offer-line .dot { color: var(--faint); }
.offer-line .tick { color: var(--ink); }

.market {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.7fr);
  gap: 20px;
  align-items: start;
}
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.big-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); margin: 0; }
.big-stat { padding: 14px 18px; min-width: 0; }
.big-stat + .big-stat { border-left: 1px solid var(--line-2); }
.big-stat dt { font-size: 0.72rem; color: var(--mute); margin: 0 0 4px; }
.big-stat dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 1.15rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-stat dd small { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.66rem; color: var(--mute); margin-top: 3px; }

/* the curve */
.curve-wrap { position: relative; }
.curve-chart { width: 100%; height: auto; display: block; }
.curve-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
  margin-top: 10px;
}
.curve-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.curve-legend .l-filled i { background: var(--ink); }
.curve-legend .l-you i { background: var(--blue); }
.curve-legend .l-curve i { background: var(--grey-soft); border: 1px solid var(--line); }

.curve-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.curve-top .big { font-family: var(--mono); font-weight: 500; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1; }
.curve-top .side { display: flex; gap: 18px; flex-wrap: wrap; text-align: right; }
.curve-top .side .eyebrow { display: block; }
.curve-top .side .mono { font-size: 0.78rem; }

/* the buyers table */
.table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.table th {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-2);
  font-weight: 500;
}
.table td { padding: 10px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-size: 0.78rem; }
.table .you td { background: var(--blue-soft); }
.table .tag {
  font-family: var(--sans);
  font-size: 0.66rem;
  border-radius: var(--pill);
  padding: 2px 8px;
  margin-left: 8px;
  background: var(--cream);
  color: var(--cream-ink);
  font-weight: 500;
}
.table .tag.you-tag { background: var(--blue); color: #08080a; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); padding: 6px 10px 0; }
.tabs button {
  border: 0;
  background: none;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.tabs button small { font-family: var(--mono); font-size: 0.66rem; background: var(--card-2); border-radius: var(--pill); padding: 1px 7px; color: var(--mute); }
.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }

/* the buy panel's live quote */
.quote {
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  font-size: 0.84rem;
  margin: 0;
}
.quote div { min-width: 0; }
.quote dt { font-size: 0.68rem; color: var(--mute); margin: 0 0 2px; }
.quote dd { margin: 0; font-family: var(--mono); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote dd small { font-weight: 400; font-family: var(--sans); font-size: 0.7rem; color: var(--mute); margin-left: 4px; }
.quote .wide { grid-column: 1 / -1; }

.fill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fill-head b { font-family: var(--mono); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; }
.fill-head span { font-family: var(--mono); font-size: 0.74rem; color: var(--mute); }

/* ---------- file page --------------------------------------- */

.file-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 20px;
  align-items: start;
}
.file-layout .sticky { position: sticky; top: calc(var(--bar) + 16px); }
.form-block { display: flex; flex-direction: column; gap: 18px; }
.form-block h3 { margin: 0; font-size: 1.1rem; letter-spacing: -0.01em; }

.preview-head { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.preview-logo {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-2);
  display: grid;
  place-items: center;
  color: var(--faint);
  flex: 0 0 auto;
}
.preview-logo img { width: 100%; height: 100%; object-fit: cover; }
.preview-head b { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.preview-head span { font-family: var(--mono); font-size: 0.72rem; color: var(--mute); }

/* ---------- long-page sections ------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
}
.split h2 { font-size: 1.45rem; margin: 0 0 18px; }
.split p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.75; margin: 0 0 18px; max-width: 58ch; }
.split .btn { margin-top: 4px; }

.exits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.exit {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 20px 18px 22px;
}
.exit-n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.74rem;
  margin-bottom: 12px;
}
.exit h3 { margin: 0 0 9px; font-size: 1rem; }
.exit p { margin: 0; color: var(--ink-2); font-size: 0.86rem; line-height: 1.7; }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 12px 14px;
}
.check-ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-soft);
  color: #137a37;
  display: inline-grid;
  place-items: center;
  margin-top: 1px;
}
.checks b { display: block; font-weight: 600; font-size: 0.9rem; }
.checks span { font-size: 0.84rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- how page ---------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 { font-size: 1.35rem; margin: 46px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.75; margin: 0 0 18px; }
.prose ul { margin: 0 0 14px; padding: 0; list-style: none; }
.prose li { border-top: 1px solid var(--line); padding: 12px 0; }
.prose li b { display: block; margin-bottom: 3px; font-weight: 600; }
.prose li span { color: var(--ink-2); font-size: 0.92rem; }

.numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.number {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 14px 16px;
}
.number dt { font-size: 0.72rem; color: var(--mute); margin: 0 0 4px; }
.number dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 1.15rem; }
.number dd small { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.7rem; color: var(--mute); margin-top: 3px; }

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

.foot {
  margin-top: 64px;
  padding: 56px 0 34px;
  position: relative;
  overflow: hidden;
}
.foot::before {
  content: '';
  position: absolute;
  inset: -60% -10% auto;
  height: 340px;
  display: none;
}
.foot .shell { position: relative; z-index: 1; }
.foot-in { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { margin-right: auto; max-width: 34ch; }
.foot-brand p { color: var(--ink-2); font-size: 0.86rem; margin: 10px 0 0; }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot nav a { color: var(--ink-2); font-size: 0.86rem; }
.foot nav a:hover { color: var(--ink); }
.foot h4 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.foot-fine {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ---------- mobile tab bar ---------------------------------- */

.tabbar { display: none; }

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

.toasts {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(92vw, 380px);
}
.toast {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(20, 16, 14, 0.12);
  padding: 12px 14px;
  font-size: 0.86rem;
  animation: pop 0.18s ease;
}
.toast b { display: block; margin-bottom: 2px; }
.toast-bad { border-color: rgba(255, 123, 123, 0.5); }
.toast-good { border-color: rgba(61, 220, 132, 0.5); }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

/* ---------- dark slabs ---------------------------------------
   The page is paper, and three things on it are not: the hero,
   the snipe argument and the footer. A slab flips every token
   the components already read, so nothing inside it needs to
   know it has gone dark. The white cards that must stay white
   (the stage, a poster) set the tokens back on themselves. */

.band-dark,
.page-head > .shell {
  --bg: var(--night);
  --card: rgba(255, 255, 255, 0.055);
  --card-2: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.09);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.74);
  --mute: rgba(255, 255, 255, 0.52);
  --faint: rgba(255, 255, 255, 0.34);
  --grey-soft: rgba(255, 255, 255, 0.14);
  --blue: #8aa2ff;
  --blue-soft: rgba(138, 162, 255, 0.16);
  color: #fff;
  background: var(--night);
}

.slab {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.slab-in { position: relative; z-index: 2; padding: 52px 48px; }


/* the light inside a slab: three soft blooms of the brand gradient,
   drifting slowly, over a fine grain so the dark is not flat */
.slab-glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 78% 8%, rgba(255, 255, 255, 0.13), transparent 72%);
  display: none;
}
@keyframes bloom {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
.slab::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}

/* buttons, badges and marks inside a slab */
.band-dark .btn { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.band-dark .btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); }
.band-dark .btn-ink { background: #fff; color: #0a0a0a; border-color: #fff; }
.band-dark .btn-ink:hover { background: #e6e6e6; border-color: #e6e6e6; }
.band-dark .mark i + i { color: rgba(255, 255, 255, 0.68); }
.band-dark .note-warn { background: rgba(255, 209, 102, 0.14); color: #ffd98a; }

/* the whole page is dark now, so a slab only needs its own surface */

/* the eyebrow pill above a headline */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 8px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--card);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.kicker b { font-weight: 500; color: var(--ink); }
.kicker > span { min-width: 0; }
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
/* ---------- the moving parts ---------------------------------
   The arcs drift, sections arrive, meters fill, cards lift, and
   the hero replays a curve. All of it stops under
   prefers-reduced-motion. */

@keyframes drift {
  from { transform: scale(1.06) rotate(-1.2deg); }
  to { transform: scale(1.12) rotate(1.2deg); }
}
body::before { inset: -6%; animation: drift 80s ease-in-out infinite alternate; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

.card { transition: border-color 0.12s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover { transform: translateY(-2px); }
.poster img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .poster img { transform: scale(1.045); }
.meter-bar i { transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* the hero, with the stage beside the words */
.hero-in { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); align-items: center; gap: 40px; }
.hero-meta { flex-direction: row; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.hero-meta .pip { text-align: left; }
.hero-stage { min-width: 0; }

.stage {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
}
.stage-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.stage-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-2);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--faint);
  box-shadow: 0 0 0 0 rgba(23, 163, 74, 0);
  transition: box-shadow 0.4s ease;
}
.stage-logo img { width: 100%; height: 100%; object-fit: cover; }
.stage.is-launched .stage-logo { box-shadow: 0 0 0 2px var(--green); }
.stage-name { min-width: 0; flex: 1; }
.stage-name b { display: block; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-name .mono { display: block; color: var(--mute); font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-badge { position: static; flex: 0 0 auto; }
.stage-chart { padding: 12px 10px 0; }
.stage-svg { width: 100%; height: auto; display: block; }
.stage-area { fill: #ffffff; fill-opacity: 0.12; transition: fill 0.5s ease; }
.stage.is-full .stage-area { fill: var(--blue); fill-opacity: 0.16; }
.stage.is-launched .stage-area { fill: var(--green); fill-opacity: 0.18; }
.stage.is-launched .stage-marker { fill: var(--green); }
.stage-dot {
  fill: #ffffff;
  stroke: var(--card);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: dotpop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes dotpop { from { transform: scale(0); opacity: 0; } }
.stage-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line-2);
}
.stage-row dt { font-size: 0.68rem; color: var(--mute); margin: 0 0 2px; }
.stage-row dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-feed { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; min-height: 96px; }
.stage-chip {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  background: var(--card-2);
  border-radius: var(--pill);
  padding: 5px 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: chipin 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.stage-chip u { text-decoration: none; color: var(--mute); }
.stage-chip b { font-weight: 500; color: var(--ink); }
.stage-chip.is-launch { background: var(--green-soft); color: #8ff0bb; }
.stage-chip.is-launch b { color: #8ff0bb; }
@keyframes chipin { from { transform: translateY(-6px); opacity: 0; } }
.stage-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px 10px; border-top: 1px solid var(--line-2); background: var(--bg); }

/* the race */
.race-svg { width: 100%; height: auto; display: block; }

/* the offering page's curve: the bought area draws in, every buy is a bead */
@keyframes growx { from { width: 0; } }
.curve-grow { animation: growx 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bead {
  fill: #ffffff;
  stroke: var(--card);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: dotpop 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  cursor: help;
}
.bead:hover { fill: var(--blue); }
.bead-you { fill: var(--blue); stroke-width: 1.6; }

/* the playground */
.play {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.play-controls { padding: 18px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 16px; }
.play-chart { padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.play-out dt { flex: 0 0 auto; white-space: nowrap; }
.play-out dd { text-align: right; }
.play-out dd b { font-weight: 500; color: var(--ink); }
.play-out dd .usd { display: block; margin: 2px 0 0; font-size: 0.66rem; color: var(--mute); }
.play input[type='range'] { width: 100%; accent-color: var(--ink); margin: 6px 0 0; }
.play .field label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.play .field label b { font-weight: 400; color: var(--mute); font-size: 0.72rem; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  body::before, .slab-glow, .page-head > .shell::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .poster img, .meter-bar i { transition: none; }
  .stage-dot, .stage-chip, .badge i { animation: none; }
}

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

@media (max-width: 1040px) {
  .play { grid-template-columns: minmax(0, 1fr); }
  .play-controls { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .hero-stage { max-width: 560px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .exits { grid-template-columns: minmax(0, 1fr); }
  .market, .file-layout { grid-template-columns: minmax(0, 1fr); }
  .file-layout .sticky { position: static; }
  .recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-2); }
  .big-stat:nth-child(4) { border-top: 1px solid var(--line-2); }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-meta { align-items: flex-start; }
  .pip { text-align: left; }
}

@media (max-width: 860px) {
  .slab-in { padding: 34px 26px; }
  .page-head > .shell { padding: 36px 26px; }
  .nav, .top-side .btn-hide { display: none; }
  .menu-btn { display: inline-grid; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .top-in { gap: 12px; }
  .offer-head { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .offer-logo { width: 72px; border-radius: 14px; }
  .logo-row { grid-template-columns: 120px minmax(0, 1fr); }
  .field-row-3 { grid-template-columns: minmax(0, 1fr); }

  .nav.open {
    display: flex;
    position: absolute;
    top: calc(var(--bar) - 8px);
    left: 0;
    right: 0;
    transform: none;
    flex-direction: column;
    border-radius: var(--radius);
    padding: 8px;
    gap: 2px;
    box-shadow: 0 10px 30px rgba(20, 16, 14, 0.1);
  }
  .nav.open a { padding: 10px 12px; font-size: 0.92rem; }
}

@media (max-width: 480px) {
  .mark i { display: none; }

  body { padding-bottom: 66px; }
  section { padding: 36px 0; }
  .hero { padding: 30px 0 20px; }
  .field-row, .logo-row, .recent { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .quote { grid-template-columns: minmax(0, 1fr); }
  .table th:nth-child(4), .table td:nth-child(4) { display: none; }
  .big-stat dd { white-space: normal; font-size: 1rem; }
  .card-body { padding: 11px 12px 12px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tally { gap: 18px; }
  .stage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-foot { flex-direction: column; gap: 2px; }
  .hero-in { gap: 24px; }
  .slab, .page-head > .shell { border-radius: 20px; }
  .slab-in { padding: 28px 20px; }
  .page-head > .shell { padding: 30px 22px; }

  .tabbar {
    display: flex;
    position: fixed;
    z-index: 80;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--mute);
    border-radius: var(--radius-sm);
  }
  .tabbar a svg { width: 19px; height: 19px; }
  .tabbar a[aria-current='page'] { color: var(--ink); }
  .toasts { bottom: 78px; }
}

/* ---------- the orb ------------------------------------------
   The wireframe geodesic in the hero's top-left, turning, with
   light running its edges. It sits under the words, and the
   pointer tilts it. */

.orb {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-16%, -20%);
  width: min(46%, 560px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.orb canvas { width: 100%; height: 100%; display: block; }

.hero-copy { position: relative; }
.hero-copy h1, .hero-copy .sub, .hero-copy .kicker { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8); }

@media (max-width: 1040px) {
  .orb { width: min(62%, 460px); transform: translate(-18%, -16%); }
}
@media (max-width: 480px) {
  .orb { width: 92%; transform: translate(-24%, -14%); }
}

/* ---------- the plotter --------------------------------------
   The closing slab rules an axis and plots the curve behind the
   call to action, the way a pen plotter would. It has that whole
   panel to itself, so it is drawn large and left alone. */

.plot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.plot canvas { width: 100%; height: 100%; display: block; }

.hero .slab-in { padding-top: 148px; }

@media (max-width: 860px) {
  .plot { opacity: 0.5; }
}