/*
 * Pons' own design language.
 *
 * The coin lives on Pons and the site sits next to their launchpad, so the two
 * should read as one product rather than as a memecoin page bolted onto it.
 * The palette, radii, shadows and easing below are lifted from ponsfamily.com's
 * published tokens.
 *
 * One deliberate split: `--accent` is the lime, and it is only ever a surface.
 * At 4.5:1 against white it is not a legible text colour, so anything written
 * in "accent" uses `--green`, which is a real green chosen to pass contrast.
 */
:root {
  --bg: #f4f4f4;
  --panel: #fff;
  --line: rgba(17, 17, 17, 0.1);
  --text: #111;
  --muted: rgba(17, 17, 17, 0.55);
  --subtle: rgba(17, 17, 17, 0.4);

  --accent: #d4fc50;
  --accent-hover: #c4ef3c;
  --accent-soft: #f3ffd4;
  --accent-mid: #e5f99a;

  --green: #2f9e44;
  --green-dim: #c4ef3c;
  --amber: #b45309;
  --amber-soft: #fef3c7;

  --radius-card: 24px;
  --radius-panel: 20px;
  --radius-sm: 14px;
  --pill: 999px;

  --shadow-card: 0 2px 12px rgba(17, 17, 17, 0.04);
  --shadow-soft: 0 4px 24px rgba(17, 17, 17, 0.05);
  --shadow-float:
    0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06),
    0 24px 48px rgba(17, 17, 17, 0.04);
  --glow: 0 8px 24px rgba(212, 252, 80, 0.5);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A wash of the accent behind the fold, so the grey does not read as blank. */
body::before {
  content: "";
  position: fixed;
  inset: -20% 0 auto 0;
  height: 70vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(212, 252, 80, 0.5), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

main, .nav, footer { position: relative; z-index: 1; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }

a { color: inherit; }

code { font-family: var(--mono); }

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

/* Floats over the page rather than sitting on it, the way Pons' own does.
   Backdrop blur keeps it legible once content scrolls underneath. */
.nav {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--wrap);
  margin: 14px auto 0;
  padding: 10px 12px 10px 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--pill);
  box-shadow: var(--shadow-float);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  font-size: 15px;
}

.nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.nav nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.nav nav a:hover { color: var(--text); }

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

.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px 24px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 18px;
}

.hero h1 {
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
}

.lede {
  color: var(--muted);
  font-size: 17px;
  max-width: 46ch;
  margin: 22px 0 32px;
}

.lede strong { color: var(--text); font-weight: 600; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--pill);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.28s var(--ease), background 0.18s;
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: var(--glow);
}

.btn-ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.btn-ghost:hover { background: var(--panel); border-color: var(--text); box-shadow: var(--shadow-soft); }

.btn-sm { padding: 9px 18px; font-size: 14px; }

.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Coming, not gone. Muted enough to read as unavailable, but still a link:
   a dead control that swallows the click tells people less than a live one
   that takes them to the paragraph explaining why it is not open yet. */
.btn-soon {
  color: var(--muted);
  border-style: dashed;
  box-shadow: none;
}

.btn-soon:hover { color: var(--text); transform: none; box-shadow: none; }

.btn-soon i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: var(--pill);
  background: var(--amber-soft);
  color: var(--amber);
}

/* ------------------------------------------------------------- chart --- */

.hero-mark {
  margin: 0;
  display: grid;
  place-items: center;
}

/* Capped at 368 rather than stretched to the column. The source render is
   735px square once trimmed, so this is the largest size that still lands two
   real pixels per CSS pixel on a retina screen - past it the glass goes soft,
   which is the one thing a logo cannot afford. */
.hero-mark img {
  width: min(100%, 368px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 38px rgba(17, 17, 17, 0.16));
  animation: float 7s var(--ease) infinite;
}

@keyframes float {
  50% { transform: translateY(-9px); }
}

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

.strip {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.strip > div {
  background: var(--panel);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strip b {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.strip span { color: var(--muted); font-size: 13px; }

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

.live-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.live-head h2 { margin: 0; }

.badge {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.badge.on {
  color: var(--text);
  background: var(--accent);
  border-color: transparent;
}

.badge.off { color: var(--amber); background: var(--amber-soft); border-color: transparent; }

/* Sawtooth gauge: the band the balance actually lives in, floor to cap. */
.gauge-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-top: 18px;
}

.track {
  position: relative;
  height: 40px;
  background: #ececec;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.track .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent-mid), var(--accent));
  transition: width 0.6s var(--ease);
}

.track .mark { position: absolute; top: 0; bottom: 0; width: 2px; }
.track .mark.rest { background: rgba(17, 17, 17, 0.25); }
.track .mark.cap { background: var(--text); }

.legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
}

.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 7px;
}

/* The pending buy, and the reasoning behind it. */
.next-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-top: 18px;
}

.next-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.next-label { color: var(--muted); font-size: 14px; }

.next-amount {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.zone {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--pill);
  padding: 3px 10px;
}

.zone.surge { background: var(--accent); color: var(--text); }
.zone.take, .zone.survive { background: #ececec; color: var(--muted); }
.zone.idle { background: #f0f0f0; color: var(--subtle); }

/* The derivation. Deliberately plain: it is evidence, not decoration. */
details.math { margin-top: 14px; }

details.math > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13.5px;
  user-select: none;
  list-style: none;
}

details.math > summary::-webkit-details-marker { display: none; }
details.math > summary::before { content: "▸ "; }
details.math[open] > summary::before { content: "▾ "; }
details.math > summary:hover { color: var(--text); }

.math-body {
  margin-top: 12px;
  padding: 16px 18px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  font-size: 13.5px;
}

.math-body table { width: 100%; border-collapse: collapse; }
.math-body td { padding: 4px 0; vertical-align: top; }
.math-body td:first-child { color: var(--muted); padding-right: 18px; }

.math-body td:last-child {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.math-body .rule { border-top: 1px solid var(--line); margin: 10px 0; }
.math-body .total td { color: var(--text); font-weight: 600; }
.math-body .total td:last-child { color: var(--text); }
.math-body .why { color: var(--muted); margin-top: 12px; line-height: 1.65; }

/* ------------------------------------------------------------ the feed --- */
/* A social tracker, not a blog: dense rows, the author first, and the buy it
   caused sitting on the same row rather than in a separate report. */

.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 46px 0 14px;
}

.feed-head h3 { font-size: 19px; font-weight: 650; margin: 0; }

#feed-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* The feed scrolls inside a fixed height rather than growing the page: it is
   the middle of the page, and fifty mentions would otherwise push everything
   below it out of reach. */
.feed {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0 20px;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.feed-wrap { position: relative; }

/* Cut off mid-row, so it is obvious the list continues. */
.feed-wrap::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 56px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: linear-gradient(to top, var(--panel) 20%, transparent);
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

.feed-wrap.at-end::after { opacity: 0; }

.feed-more {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 2px 0;
}

.feed .empty { color: var(--muted); font-size: 15px; padding: 26px 0; margin: 0; }

.fire {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.fire:first-child { border-top: 0; }

/* Only rows that arrived while the page was open, so a reload is not a party. */
@keyframes arrive {
  from { opacity: 0; transform: translateY(-6px); background: var(--accent-soft); }
  to   { opacity: 1; transform: none; background: transparent; }
}

.fire.is-new { animation: arrive 0.7s ease-out; }

.fire-av {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #ececec;
  border: 1px solid var(--line);
}

.fire-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fire-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 650;
  color: var(--muted);
}

.fire-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.fire-name {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

.check { color: var(--green); flex: none; }

.fire-handle,
.fire-followers {
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
}

.fire-followers::before { content: "· "; }

.fire-when {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--mono);
  text-decoration: none;
  white-space: nowrap;
}

.fire-when:hover { color: var(--green); }

.fire-post {
  margin: 6px 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.55;
}

.fire-post mark {
  background: var(--accent);
  color: var(--text);
  border-radius: 6px;
  padding: 0 4px;
  font-weight: 600;
}

.fire-post mark.ca {
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}

.fire-post .link { color: var(--muted); }

.fire-media {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}

.fire-media img {
  width: 108px;
  height: 78px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.fire-out {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.fire-eth {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fire-burn { color: var(--green); font-size: 14px; }
.fire-miss { color: var(--muted); font-size: 14px; }

.fire-tx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
}

.fire-tx:hover { color: var(--text); border-color: var(--text); }

.warn { color: var(--amber); font-size: 13px; margin-top: 10px; }

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

.band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 88px 24px 0;
}

.band h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  margin-bottom: 18px;
}

.band-lede {
  color: var(--muted);
  font-size: 17px;
  max-width: 62ch;
  margin: 0 0 36px;
}

.band-lede b { color: var(--text); font-weight: 600; }

.cards, .rules {
  display: grid;
  gap: 18px;
}

.cards { grid-template-columns: repeat(3, 1fr); }

.rules { grid-template-columns: repeat(2, 1fr); }

.cards article, .rules article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}

.cards article:hover, .rules article:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-2px);
}

.step {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--accent);
  border-radius: var(--pill);
  padding: 3px 10px;
  letter-spacing: 0.1em;
}

.cards h3, .rules h3 {
  font-size: 19px;
  font-weight: 650;
  margin: 10px 0 10px;
}

.cards p, .rules p { color: var(--muted); margin: 0; font-size: 15px; }

/* ------------------------------------------------------- coin pages --- */

/* The identity block on /c/<id>. The landing page has a hero instead: a coin
   page has to say what it is in one line and then get out of the way, because
   the tracker below it is the reason anybody followed the link. */
.coin-head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px 24px 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.coin-logo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  flex: none;
}

/* A coin with no logo, or one whose logo has stopped resolving. The letter is
   drawn with a pseudo-element because the element is still an <img>: swapping
   it for a <span> would move it in the layout every time the tracker
   refreshed. */
.coin-logo-blank {
  background: var(--accent-soft);
  display: grid;
  place-items: center;
}

.coin-logo-blank::after {
  content: attr(data-letter);
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 650;
  color: var(--text);
}

.coin-head h1 {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  margin: 0 0 14px;
}

.coin-head .lede { margin-bottom: 26px; }

/* The fee split. Percentages are the thing being read, so they lead the row
   and everything else explains them. */
.split {
  display: grid;
  gap: 14px;
}

.split-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
}

.split-pct {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}

.split-row b { font-size: 17px; font-weight: 650; }
.split-row p { color: var(--muted); margin: 6px 0 0; font-size: 15px; }

.split-note {
  color: var(--muted);
  font-size: 14px;
  max-width: 62ch;
  margin: 20px 0 0;
}

@media (max-width: 720px) {
  .coin-head {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 32px 20px 40px;
  }
  .split-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ------------------------------------------------------- coin directory --- */

/* One card per launched coin. Whole card is the link, so there is no small
   target to aim at on a phone. */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.coin-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.coin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, var(--shadow-card));
}

.coin-card img,
.coin-card-blank {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--line);
  display: block;
  flex: none;
}

/* Coins launched before uploads existed have no logo, and a linked one can
   404. Either way the reader gets the ticker's initial rather than a grey
   hole, which at least identifies the row. */
.coin-card-blank {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--text);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 650;
}

.coin-card-body strong { display: block; font-size: 17px; font-weight: 650; }

.coin-card-tag {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.coin-card-body p {
  color: var(--muted);
  font-size: 14.5px;
  margin: 8px 0 0;
  /* Descriptions are creator-supplied and can be any length. Clamp so one
     verbose coin cannot stretch the whole row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coin-card-fires {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* ------------------------------------------------------------ create --- */

/* The heading carries the "not yet" label so the section cannot be skimmed as
   something you can use today. */
.create-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.create-head h2 { margin-bottom: 0; }

.soon-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--amber-soft);
  color: var(--amber);
}

.create .cards article { opacity: 0.82; }
.create .cards article:hover { opacity: 1; }

/* -------------------------------------------------------------- spec --- */

.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.spec > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px;
  background: var(--panel);
}

.spec b {
  display: block;
  font-family: var(--mono);
  font-size: 28px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}

.spec span { color: var(--muted); font-size: 13.5px; }

.note {
  color: var(--muted);
  font-size: 14.5px;
  margin: 26px 0 0;
  max-width: 70ch;
}

.note code {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 13px;
  /* Keep the identity on one line; broken across a wrap it reads as noise. */
  display: inline-block;
  white-space: nowrap;
}

/* --------------------------------------------------------------- buy --- */

.buy { padding-bottom: 96px; }

.addr { margin-bottom: 28px; max-width: 620px; }

.addr label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.addr-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.addr-row code {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 13px 16px;
  font-size: 14px;
  color: var(--muted);
  overflow-x: auto;
  white-space: nowrap;
}

.addr-row button {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--pill);
  padding: 0 22px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.addr-row button:hover:not(:disabled) { background: var(--accent); border-color: transparent; }
.addr-row button:disabled { opacity: 0.4; cursor: default; }

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

footer {
  max-width: var(--wrap);
  margin: 88px auto 0;
  padding: 28px 24px 56px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

footer p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  max-width: 78ch;
}

.foot-links {
  margin-left: auto;
  display: flex;
  gap: 18px;
  white-space: nowrap;
}

.foot-links a { text-decoration: none; transition: color 0.15s; }
.foot-links a:hover { color: var(--text); }

/* ---------------------------------------------------------- search ----- */

.coin-search { margin: 0 0 22px; }

.coin-search input {
  width: 100%;
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  outline: none;
}

.coin-search input:focus { border-color: var(--text); }
.coin-search input::placeholder { color: var(--muted); }

/* ---------------------------------------------------------- 404 -------- */

.lost {
  max-width: 620px;
  margin: 0 auto;
  padding: 120px 24px 140px;
  text-align: center;
}

.lost h1 { font-size: clamp(38px, 7vw, 62px); margin: 10px 0 18px; letter-spacing: -0.03em; }
.lost .eyebrow { justify-content: center; }
.lost-why { color: var(--text); font-size: 18px; margin: 0 0 14px; }
.lost-help { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 32px; }
.lost .cta { justify-content: center; }

/* ---------------------------------------------------------- docs ------- */

.docs .band { max-width: 760px; margin-inline: auto; }
.docs .band + .band { padding-top: 56px; }

/* The header is sticky, so a section jumped to from the contents would
   otherwise land with its heading underneath it. */
.docs [id] { scroll-margin-top: 90px; }

.docs h3 {
  margin: 36px 0 12px;
  font-size: 18px;
  font-weight: 650;
}

.docs p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.docs p strong, .docs li strong { color: var(--text); font-weight: 600; }

.docs code {
  font-size: 14px;
  padding: 2px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.docs-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.docs-list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* A square rather than a bullet, to match the cards and the split key. */
.docs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--accent);
}

/* Three across, so the rows land as $MENTION's band then a new coin's rather
   than four and two with no meaning to the break. */
.docs-spec {
  margin: 24px 0 8px;
  grid-template-columns: repeat(3, 1fr);
}

.docs-spec b { white-space: nowrap; }

/* Contents. Wraps into as many rows as it needs rather than scrolling, since
   this is read once on the way in and then ignored. */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.toc a {
  padding: 7px 14px;
  font-size: 14px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  text-decoration: none;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.toc a:hover { color: var(--text); border-color: var(--text); }

.docs .addr { margin-bottom: 16px; }

/* ---------------------------------------------------------- create ----- */

.muted { color: var(--muted); }

.create-page .band { max-width: 720px; }

.pad-closed {
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  text-align: center;
}

/* Form controls do not inherit the page font on their own, and neither do
   legends inside a fieldset. Without this the whole form renders mono. */
.create-page form,
.create-page legend,
.create-page label,
.create-page .hint,
.create-page input,
.create-page textarea,
.create-page select { font-family: var(--sans); }

/* Narrowing the column has to re-centre it; the site's own width comes from a
   wrapper this page is deliberately narrower than. */
.create-page .band { margin-inline: auto; }

.create-page fieldset.step {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin: 0 0 20px;
}

.create-page legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font-size: 17px;
  font-weight: 600;
}

/* The numbered pill is a block in the marketing cards and inline here. */
.create-page legend .step {
  position: static;
  display: inline-block;
  margin: 0;
}

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }

.field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
}

.field input[type="text"],
.field input[type="url"],
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field textarea { resize: vertical; min-height: 76px; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--subtle); }

/* Ticker and payout are read back character by character when checking a
   launch, so they get the mono face rather than the prose one. */
.create-page #f-symbol,
.create-page #f-payout { font-family: var(--mono); letter-spacing: 0.02em; }

.prefixed {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prefixed > span {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--muted);
}

.hint {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-row .field { margin-bottom: 20px; }

/* ---- the logo ---- */

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

/* A square placeholder from the start, so choosing a file changes what is in
   the box rather than pushing the rest of the form down. */
.logo-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  background: var(--bg) center / cover no-repeat;
  display: block;
}

.logo-preview.has-logo { border-style: solid; border-color: var(--line); }

.logo-pick-body input[type="file"] {
  width: 100%;
  font-size: 14px;
  color: var(--muted);
}

.logo-pick-body input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.logo-pick-body input[type="file"]::file-selector-button:hover {
  border-color: var(--text);
  box-shadow: var(--shadow-soft);
}

.logo-pick-body .hint { margin-top: 10px; }

/* ---- the split ---- */

.field input[type="range"] {
  width: 100%;
  accent-color: var(--text);
  margin: 4px 0 14px;
}

.split-bar {
  display: flex;
  height: 12px;
  border-radius: var(--pill);
  overflow: hidden;
  background: var(--bg);
}

.split-bar span { transition: width 0.18s var(--ease); }
.split-engine { background: var(--accent); }
.split-creator { background: var(--text); }
.split-platform { background: var(--accent-mid); }

.split-key {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 14px;
  color: var(--muted);
}

.split-key li { display: flex; align-items: center; gap: 9px; }
.split-key strong { color: var(--text); font-weight: 600; }

.split-key i {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  flex: none;
}

.split-key .k-engine { background: var(--accent); }
.split-key .k-creator { background: var(--text); }
.split-key .k-platform { background: var(--accent-mid); }

/* ---- problems and payment ---- */

.problems {
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--amber-soft);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: var(--radius-sm);
  color: var(--amber);
  font-size: 14px;
}

.problems ul { margin: 0; padding-left: 20px; }
.problems li + li { margin-top: 6px; }

.pay-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pay-panel {
  padding: 28px;
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
}

.pay-panel h3 { margin: 0 0 12px; font-size: 20px; }
.pay-panel p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.pay-panel .addr { margin: 20px 0; }
.pay-panel .cta { margin-top: 20px; }

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

@media (max-width: 900px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .create-page fieldset.step, .pay-panel { padding: 22px 18px; }

  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
  .cards, .rules { grid-template-columns: 1fr; }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  /* The anchors are only scroll positions on the page already open, so they
     are the ones a phone can afford to lose. The links to other pages stay:
     most people arrive here from a post, on a phone, and hiding these left
     them with no way to reach the coins or the docs at all. */
  .nav nav a:not(.btn) { display: none; }
  .nav nav a.nav-key { display: inline; }
  .nav nav { gap: 14px; }
  .nav { padding-left: 14px; gap: 12px; }
  .nav .btn { white-space: nowrap; }

  /* Two buttons plus the wordmark does not fit a phone. Buy wins; the Create
     section is still reachable by scrolling. */
  .nav .btn-soon { display: none; }
  .band { padding-top: 64px; }
  footer { flex-wrap: wrap; }
  .foot-links { margin-left: 0; flex-basis: 100%; }
}

/* On a narrow phone the wordmark is the one thing in the bar that is not a
   destination, and dropping it is exactly the width the links need. The mark
   stays, and still goes home. */
@media (max-width: 520px) {
  .nav .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-mark img { animation: none; }
  .btn:hover { transform: none; }
}