/* ==========================================================================
   CLAIM — design system
   Dark mode, built on GoFundMe's design language: flat, clean, modern.
   No gradients, no glows, no neon. Generous whitespace, bold friendly type,
   one green accent reserved for action, pill buttons, cards with progress bars.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --bg:        #0E0E0E;
  --bg-2:      #141414;
  --surface:   #1A1A1A;
  --surface-2: #212121;
  --surface-3: #2A2A2A;
  --line:      #2A2A2A;
  --line-2:    #3A3A3A;

  /* text */
  --ink:       #F5F5F5;
  --ink-2:     #B3B3B3;
  --ink-3:     #808080;
  --ink-4:     #5C5C5C;

  /* accent — one green, reserved for action, as GoFundMe does.
     Sampled from the CLAIM logo (a mint box with a cent sign): the dominant
     pixel value is #76F5CA. The old #00B964 was a much deeper green, and the
     logo's is light enough that it inverts the contrast problem — white on it
     fails badly, so --green-ink is a near-black now instead of white, and every
     place that put text on the accent reads from that token rather than #fff. */
  --green:      #76F5CA;   /* brand fill (buttons, progress) */
  --green-ink:  #06120C;   /* text on green — dark, because the green is light */
  --green-text: #76F5CA;   /* green that reads on a dark surface (14.8:1 — no lift needed) */
  --green-soft: rgba(118, 245, 202, .13);

  --amber: #F5A524;
  --rose:  #F04438;
  --blue:  #4E9CFF;

  /* radii — GoFundMe rounds generously; buttons are fully pill */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --pill: 999px;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow: 0 4px 14px rgba(0,0,0,.4);

  --maxw: 1200px;
  --nav-h: 68px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--green); color: var(--green-ink); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
main { position: relative; }
section { position: relative; }
.sec { padding: 96px 0; }
.sec--tight { padding: 64px 0; }

/* ---------- the full-screen tabbed shell ----------
   The site is an app, not a scroll: one screen at a time, each filling the
   viewport, each with its OWN internal scroll. That is the whole difference
   between "a long page" and "a desktop app", and it is what makes switching
   tabs feel instant — nothing below the fold has to be laid out.

   Sections SHARE a screen by carrying the same `data-screen`. The hero and the
   stat strip are both `home`; the fee flow and how-it-works are both `how`. So
   the grouping lives in the markup where it can be read, rather than in a JS
   map that has to be kept in sync with the HTML. */
main {
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}
main > .screen {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
main > .screen.is-active { display: block; }

/* The footer lives inside the FAQ screen (it is the last thing anyone reads),
   so it is toggled by the same rule but is not a full-height scroller. */
.screen { display: none; }
.screen.is-active { display: block; }

/* A screen whose content is short should still sit like a page, not hug the
   top of the window. */
.screen > .sec:only-of-type { min-height: 100%; }
.hairline { height: 1px; background: var(--line); }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.1; letter-spacing: -.028em; }
.h-xxl { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.06; letter-spacing: -.035em; }
.h-xl  { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
.h-lg  { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.h-md  { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.lead  { font-size: clamp(1rem, 1.4vw, 1.11rem); color: var(--ink-2); line-height: 1.7; }
.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }
.mono  { font-family: var(--mono); font-variant-ligatures: none; font-size: .88em; }
strong, b { font-weight: 700; color: var(--ink); }

/* one flat accent — no gradient text */
.accent { color: var(--green-text); }

/* section label — small, bold, uppercase, green. GoFundMe's eyebrow style. */
.eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--green-text);
}

.sec-head { max-width: 660px; margin-bottom: 44px; }
.sec-head .h-xl { margin: 12px 0 0; }
.sec-head p { margin-top: 14px; }

/* ---------- pills / chips / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.pill--green   { border-color: transparent; background: var(--green-soft); color: var(--green-text); }
.pill--soft    { border-color: transparent; background: var(--green-soft); color: var(--green-text); }
.pill--neutral { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-3); }
.pill--amber   { border-color: transparent; background: rgba(245,165,36,.14); color: var(--amber); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot-live { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* category chips — GoFundMe's selected state is a high-contrast inversion */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button {
  height: 38px; padding: 0 18px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: transparent;
  font-size: .87rem; font-weight: 600; color: var(--ink-2);
  transition: background .16s, color .16s, border-color .16s;
}
.chips button:hover { color: var(--ink); border-color: #4A4A4A; background: var(--surface-2); }
.chips button.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: var(--pill);
  border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap;
}
.tag--stream    { color: var(--green-text); border-color: transparent; background: var(--green-soft); }
.tag--milestone { color: var(--blue); border-color: transparent; background: rgba(78,156,255,.14); }
.tag--lock      { color: var(--amber); border-color: transparent; background: rgba(245,165,36,.14); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: var(--pill);
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, transform .12s;
}
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--green); color: var(--green-ink); }
.btn--primary:hover { background: #00CE6F; }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); border-color: #4A4A4A; }
.btn--soft { background: var(--green-soft); color: var(--green-text); }
.btn--soft:hover { background: rgba(118,245,202,.2); }
.btn--sm { height: 38px; padding: 0 18px; font-size: .86rem; }
.btn--lg { height: 54px; padding: 0 32px; font-size: 1rem; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .38; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--green); }

.btnlink {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .9rem; font-weight: 600; color: var(--green-text);
}
.btnlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav.is-stuck { background: rgba(14,14,14,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The mark is the real logo image, not a drawn SVG. `object-fit: contain` keeps
   it from distorting if the asset is ever replaced with a different aspect
   ratio, and the size is a touch larger than the old drawn mark because the
   glow around the box reads as padding — at 30px the box itself looked small. */
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
.brand__name { font-size: 1.14rem; font-weight: 800; letter-spacing: .02em; }
/* The nav is a TAB BAR now, not a set of jump links. Nine of them plus the
   wallet button and the CTA is more than fits at 1200px, so the strip scrolls
   horizontally rather than wrapping onto a second line — a wrapping nav changes
   the header height, which would change every screen's height with it. */
.nav__links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav__links::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 12px; border-radius: var(--pill); border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .87rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: color .16s, background .16s;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
/* Selection by INVERSION, the same rule the chips use — --ink fill, --bg text. */
.tab.is-on { background: var(--ink); color: var(--bg); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: var(--pill); border: 1px solid var(--line-2); align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink); }
.nav__burger span::before { top: -5px; } .nav__burger span::after { top: 5px; }

.wbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent;
  font-size: .86rem; font-weight: 600; transition: background .16s, border-color .16s, color .16s;
}
.wbtn:hover { background: var(--surface-2); border-color: #4A4A4A; }
.wbtn.is-connected { border-color: transparent; background: var(--green-soft); color: var(--green-text); }
.wbtn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.wbtn.is-connected .wbtn__dot { background: var(--green-text); }

/* ---------- hero ---------- */
.hero { padding: calc(var(--nav-h) + 72px) 0 88px; }
.hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__badge {
  display: inline-block; padding: 7px 16px; border-radius: var(--pill);
  background: var(--green-soft); color: var(--green-text);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
.hero h1 { margin-top: 22px; max-width: 16ch; }
.hero__lead { max-width: 62ch; margin-top: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  margin-top: 22px; font-size: .85rem; color: var(--ink-3);
}
.hero__trust svg { color: var(--ink-4); flex-shrink: 0; }

/* ---------- live claims feed ---------- */
.feed {
  width: 100%; max-width: 800px; margin: 56px auto 0; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden;
}
.feed__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.feed__t { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.feed__s { font-size: .8rem; color: var(--ink-3); margin-top: 2px; }
.feed__rows { padding: 6px 0; }
.frow { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--line); transition: background .14s; }
.frow:last-child { border-bottom: 0; }
.frow:hover { background: var(--surface-2); }
.frow__av { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }

/* A claim row has no coin image — it has a wallet and an amount — so its avatar
   slot carries a tick instead of an <img>. Same box, so the rows still line up. */
.frow__av--ic { display: grid; place-items: center; background: var(--green-soft); color: var(--green-text); }
.frow__main { flex: 1; min-width: 0; }
.frow__t { font-size: .91rem; font-weight: 700; letter-spacing: -.012em; }
.frow__tk { color: var(--ink-3); font-weight: 500; font-size: .84rem; }
.frow__s { font-size: .77rem; color: var(--ink-4); margin-top: 2px; }
.frow__amt { text-align: right; flex-shrink: 0; }
.frow__v { display: block; font-size: .97rem; font-weight: 700; color: var(--green-text); }
.frow__d { display: block; font-size: .73rem; color: var(--ink-4); margin-top: 1px; }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
}
.stat { padding: 28px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__k { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.stat__v { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; margin-top: 12px; color: var(--ink); }

/* The fee wallet is a 44-character address, so it cannot use the same 2rem
   display size as the numeric stats. Mono and smaller keeps it legible without
   breaking the row's rhythm. */
.stat__v--sm { font-size: .78rem !important; font-family: var(--mono); word-break: break-all; line-height: 1.4; }
.stat__v .u { font-size: .95rem; color: var(--ink-3); margin-left: 1px; }
.stat__d { font-size: .79rem; color: var(--ink-3); margin-top: 6px; }
.stat--primary .stat__v { color: var(--green-text); }
.stat--secondary .stat__v { color: var(--ink); }
.stat--amber .stat__v { color: var(--amber); }

/* ---------- board: search + chips + card grid ---------- */
.board__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.search input {
  width: 100%; height: 48px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: var(--surface); padding: 0 20px 0 46px;
  font-size: .93rem; transition: border-color .16s, background .16s;
}
.search input::placeholder { color: var(--ink-4); }
.search input:focus { outline: none; border-color: var(--green); background: var(--surface-2); }
.search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }

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

.gcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.gcard:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.gcard__banner { position: relative; height: 104px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.gcard__av { width: 56px; height: 56px; border-radius: var(--r); }
.gcard__mode { position: absolute; top: 10px; left: 10px; }
.gcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.gcard__name { font-size: 1.03rem; font-weight: 700; letter-spacing: -.022em; }
.gcard__tk { font-size: .78rem; color: var(--ink-3); margin-top: 3px; margin-bottom: 14px; }
.gcard__nums { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; margin-bottom: 16px; }
.gcard__v { display: block; font-size: 1.16rem; font-weight: 800; letter-spacing: -.028em; }
.gcard__l { display: block; font-size: .73rem; color: var(--ink-4); margin-top: 2px; }
.gcard__r { text-align: right; }
.gcard__r .gcard__v { color: var(--green-text); }
.gcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }
.gcard__meta { font-size: .77rem; color: var(--ink-3); }

.prog { height: 8px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: var(--pill); background: var(--green); transition: width .6s cubic-bezier(.2,.8,.2,1); }

.board__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-size: .8rem; }
.board__foot .btnlink { margin-left: auto; }

/* ---------- holders ---------- */
/* ONE column now. The claim card that used to sit beside the leaderboard is
   gone, and a two-column grid with a single child squeezes the table into
   400px — which is how the leaderboard ended up unreadable. */
.epoch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }

/* ---------- leaderboard ---------- */
.lbcard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.lbcard__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.lbwrap { overflow-x: auto; }
.lbcard__f { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--line); font-size: .78rem; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; padding: 13px 14px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 14px; border-bottom: 1px solid var(--line); font-size: .88rem; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .14s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl--lb { min-width: 940px; }
.tbl--lb th:first-child, .tbl--lb td:first-child { padding-left: 24px; }
.tbl--lb th:last-child, .tbl--lb td:last-child { padding-right: 24px; }
.tbl--lb td { font-size: .85rem; }
.tbl--lb tbody tr.is-you { background: var(--green-soft); box-shadow: inset 2px 0 0 var(--green); }
.tbl--lb tbody tr.is-you:hover { background: rgba(118,245,202,.18); }

.num { font-weight: 600; font-variant-numeric: tabular-nums; }
.amber { color: var(--amber); } .mint { color: var(--green-text); } .neon { color: var(--green-text); }

.lb-rank {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm);
  font-size: .75rem; font-weight: 700; border: 1px solid var(--line-2); color: var(--ink-3);
}
.lb-rank--1 { background: #F5C542; color: #2A2000; border-color: transparent; }
.lb-rank--2 { background: #C9CFD8; color: #24282E; border-color: transparent; }
.lb-rank--3 { background: #D08A55; color: #2E1900; border-color: transparent; }

.lb-w { display: flex; align-items: center; gap: 9px; }
.lb-w__av { width: 26px; height: 26px; border-radius: var(--r-sm); flex-shrink: 0; }
.lb-w__a { font-family: var(--mono); font-size: .78rem; }
.lb-w__you { font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--pill); background: var(--green); color: var(--green-ink); }
.lb-w__sim { font-size: .62rem; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--ink-4); }

.streak { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.streak--hot { color: var(--green-text); }

/* ---------- launches board ----------
   The dense listing: rank, token, liquidity, volume, market cap, holders. The
   platform token is the one row that is visually distinguished, because it is
   the one row that is not a user launch. */
.lwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.tbl--launches { min-width: 820px; }
.tbl--launches th { padding: 16px 14px; background: var(--surface-2); }
.tbl--launches th:first-child, .tbl--launches td:first-child { padding-left: 22px; }
.tbl--launches th:last-child, .tbl--launches td:last-child { padding-right: 22px; }
.tbl--launches td { padding: 13px 14px; }
.tbl--launches tbody tr.is-featured { background: var(--green-soft); box-shadow: inset 2px 0 0 var(--green); }
.tbl--launches tbody tr.is-featured:hover { background: rgba(118,245,202,.18); }

.lcoin { display: flex; align-items: center; gap: 12px; }
.lcoin__av { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; object-fit: cover; background: var(--surface-3); }
.lcoin__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lcoin__n { font-weight: 700; font-size: .93rem; letter-spacing: -.015em; }
a.lcoin__n:hover { color: var(--green-text); }
.lcoin__sub { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
a.lcoin__t { color: var(--ink-4); }
a.lcoin__t:hover { color: var(--green-text); }
.lcoin__b { font-size: .58rem; font-weight: 800; letter-spacing: .07em; padding: 2px 7px; border-radius: var(--pill); }
.lcoin__b--plat { background: var(--green); color: var(--green-ink); }
.lcoin__b--demo { border: 1px solid var(--line-2); color: var(--ink-4); }
.lcoin__b--live { background: var(--green-soft); color: var(--green-text); }

/* ---------- the per-coin page (/coin/<mint>) ---------- */
.coincard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 32px; max-width: 900px; margin: 0 auto; }
.coincard__h { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.coincard__av { width: 72px; height: 72px; border-radius: var(--r-lg); flex-shrink: 0; object-fit: cover; background: var(--surface-3); }
.coincard__id { min-width: 0; flex: 1 1 240px; }
.coincard__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.coincard__desc { margin-top: 22px; color: var(--ink-2); font-size: .95rem; line-height: 1.65; }
.coinstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.coinstat { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 16px; }
.coinstat__v { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; margin-top: 8px; color: var(--ink); }
.coincard__rows { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 6px; }
.coincard__note { margin-top: 26px; border: 1px solid var(--line); border-left: 2px solid var(--green); border-radius: var(--r); background: var(--surface-2); padding: 16px 18px; font-size: .85rem; color: var(--ink-3); line-height: 1.6; }
.coincard__note b { color: var(--ink-2); }

/* ---------- launch wizard ---------- */
.launch { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; align-items: start; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 26px; transition: border-color .22s; }
.step.is-active { border-color: rgba(118,245,202,.4); }
.step__head { display: flex; align-items: center; gap: 14px; }
.step__num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-size: .88rem; font-weight: 800; border: 1px solid var(--line-2); color: var(--ink-3);
}
.step.is-active .step__num, .step.is-done .step__num { background: var(--green); color: var(--green-ink); border-color: transparent; }
.step__title { font-size: 1.14rem; font-weight: 700; letter-spacing: -.022em; }
.step__sub { font-size: .78rem; color: var(--ink-4); margin: 2px 0 0 46px; }
.step__body { margin: 18px 0 0 46px; }
.step__body > p { font-size: .92rem; color: var(--ink-2); }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode {
  text-align: left; padding: 16px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: transparent; transition: border-color .16s, background .16s; position: relative;
}
.mode:hover { background: var(--surface-2); border-color: #4A4A4A; }
.mode.is-on { border-color: var(--green); background: var(--green-soft); }
.mode__ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); margin-bottom: 11px; }
.mode.is-on .mode__ic { background: var(--green); color: var(--green-ink); }
.mode__t { font-size: .93rem; font-weight: 700; }
.mode__d { font-size: .78rem; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.mode__badge { position: absolute; top: 14px; right: 14px; font-size: .6rem; font-weight: 800; letter-spacing: .07em; color: var(--green-text); }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field__l { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.field__l .cnt { color: var(--ink-4); font-weight: 600; }
.field input[type=text], .field textarea, .field select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 12px 14px; font-size: .93rem; transition: border-color .16s;
}
.field textarea { resize: vertical; min-height: 82px; font-family: var(--sans); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field__h { font-size: .76rem; color: var(--ink-4); line-height: 1.5; }

.upload {
  display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; cursor: pointer;
  border: 1px dashed var(--line-2); border-radius: var(--r); padding: 28px; transition: border-color .16s, background .16s;
}
.upload:hover { border-color: var(--green); background: var(--green-soft); }
.upload__ic { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; color: var(--ink-2); }
.upload__t { font-size: .9rem; font-weight: 600; }
.upload__d { font-size: .76rem; color: var(--ink-4); }
.upload.has-img { padding: 16px; border-style: solid; border-color: rgba(118,245,202,.5); }
.upload__prev { width: 88px; height: 88px; border-radius: var(--r); object-fit: cover; }

.seg { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--bg-2); }
.seg button { flex: 1; height: 36px; border-radius: var(--pill); font-size: .84rem; font-weight: 600; color: var(--ink-3); transition: background .16s, color .16s; }
.seg button.is-on { background: var(--green); color: var(--green-ink); }
.seg button:hover:not(.is-on) { color: var(--ink); }

.preview { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 14px; }
.pcard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.pcard__h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard__h .t { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.pcard__b { padding: 20px; }
.pcoin { display: flex; align-items: center; gap: 13px; }
.pcoin__av { width: 54px; height: 54px; border-radius: var(--r); flex-shrink: 0; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; font-size: 1.3rem; font-weight: 800; color: var(--ink-4); }
.pcoin__av img { width: 100%; height: 100%; object-fit: cover; }
.pcoin__n { font-size: 1.04rem; font-weight: 700; letter-spacing: -.022em; }
.pcoin__t { font-size: .83rem; color: var(--green-text); font-weight: 600; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.prow:last-child { border-bottom: 0; }
.prow__k { color: var(--ink-3); }
.prow__v { font-weight: 700; font-variant-numeric: tabular-nums; }
.prow__v.primary { color: var(--green-text); }
.prow__v.secondary { color: var(--ink); }
.prow__v.amber { color: var(--amber); }
.psplit { display: flex; height: 8px; border-radius: var(--pill); overflow: hidden; margin: 4px 0 12px; background: var(--surface-3); }
.psplit i { display: block; height: 100%; }
.psplit i.a { background: var(--green); }
.psplit i.b { background: var(--surface-3); }

.checkline { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--ink-3); line-height: 1.5; }
.checkline input { margin-top: 3px; accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.checkline a { color: var(--green-text); font-weight: 600; }
.launchbar { display: flex; flex-direction: column; gap: 10px; }

/* A value the form shows but does not let you change — the SOL pair. Styled to
   look inert on purpose, so it does not read as a disabled control. */
.lockedfield {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  padding: 11px 14px; font-size: .9rem; color: var(--ink-3);
}

/* The permanent fee routing, stated where the launcher will read it. This is the
   one thing in the form that cannot be undone, so it gets its own block rather
   than a line of hint text. */
.feenote {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 20px;
  border: 1px solid var(--line); border-left: 2px solid var(--green);
  border-radius: var(--r); background: var(--surface-2); padding: 16px 18px;
}
.feenote__ic { color: var(--green-text); flex-shrink: 0; margin-top: 2px; }
.feenote__k { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.feenote__a { font-size: .82rem; color: var(--ink); margin-top: 7px; word-break: break-all; }
.feenote__d { font-size: .78rem; color: var(--ink-3); line-height: 1.55; margin-top: 8px; }

/* Launch progress and result. Lives inside the launch bar so the state of a
   multi-step, money-moving flow is never off screen. */
.launchstep {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  padding: 14px 16px; font-size: .84rem; color: var(--ink-2); line-height: 1.55;
}
.launchstep--ok { border-color: rgba(118,245,202,.45); }
.launchstep--err, .launchstep--err strong { color: var(--rose); }
.launchstep__t { font-weight: 800; color: var(--ink); font-size: .95rem; letter-spacing: -.02em; }
.launchstep__d { margin-top: 4px; color: var(--ink-3); }
.launchstep__rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.launchstep__r { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: .76rem; }
.launchstep__r span { color: var(--ink-4); flex-shrink: 0; }
.launchstep__r code, .launchstep__r a { font-family: var(--mono); font-size: .74rem; word-break: break-all; text-align: right; }
.launchstep__r a { color: var(--green-text); }
.launchstep__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.launchstep__warn { margin-top: 12px; font-size: .76rem; color: var(--amber); line-height: 1.5; }

/* ---------- token ---------- */
.token { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: stretch; }
.tokencard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 34px; }
.tokencard__badge { font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; }
.ca {
  display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 15px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2);
  font-family: var(--mono); font-size: .76rem; color: var(--ink-2); word-break: break-all;
}
.ca button { margin-left: auto; flex-shrink: 0; color: var(--ink-3); }
.ca button:hover { color: var(--green-text); }
.buymeter { margin-top: 26px; }
.buymeter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.buymeter__v { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; color: var(--amber); }
.buymeter__bar { height: 8px; border-radius: var(--pill); background: var(--surface-3); margin-top: 12px; overflow: hidden; }
.buymeter__bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--amber); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.sidecard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 30px; display: flex; flex-direction: column; }

/* ---------- how it works ---------- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.howcard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 30px; transition: border-color .2s, transform .2s; }
.howcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.howcard__n {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: var(--green-ink); font-size: .95rem; font-weight: 800;
}
.howcard__t { font-size: 1.16rem; font-weight: 700; margin: 18px 0 10px; letter-spacing: -.024em; }
.howcard__d { font-size: .92rem; color: var(--ink-2); line-height: 1.65; }
.howcard__d b { color: var(--ink); }

/* ---------- fee flow ---------- */
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.flowcard { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 26px; }
.flowcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.flowcard__amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.flowcard__amount small { font-size: 1.05rem; color: var(--ink-3); font-weight: 700; margin-left: 2px; }
.flowcard--primary .flowcard__amount { color: var(--green-text); }
.flowcard--secondary .flowcard__amount { color: var(--ink); }
.flowcard__to { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.flowcard__wallet { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); }
.flowcard__arrow { margin: 16px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.flowcard__res { font-size: .94rem; color: var(--ink-2); }
.flowcard__res b { color: var(--ink); }
.flow__source {
  grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.flow__source .n { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-4); }
.flow__resolver {
  grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); padding: 24px; display: flex; gap: 16px; align-items: flex-start;
}
.flow__resolver .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; color: var(--green-text); flex-shrink: 0; }

/* ---------- tiers ---------- */
.tiers { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.tier { display: grid; grid-template-columns: 130px 1fr 110px 150px; gap: 18px; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line); transition: background .14s; }
.tier:last-child { border-bottom: 0; }
.tier:hover { background: var(--surface-2); }
.tier--top { background: var(--green-soft); }
.tier__day { font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.tier__name { font-size: .96rem; font-weight: 700; }
.tier__name small { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-4); margin-top: 3px; }
.tier__mult { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--green-text); }
.tier__bar { height: 8px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.tier__bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--green); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.fitem { border-bottom: 1px solid var(--line); }
.fq { width: 100%; display: flex; align-items: center; gap: 20px; padding: 24px 4px; text-align: left; }
.fq__t { flex: 1; font-size: 1.04rem; font-weight: 700; letter-spacing: -.022em; }
.fq__ic { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex-shrink: 0; color: var(--ink-3); transition: background .2s, color .2s, transform .2s, border-color .2s; }
.fq:hover .fq__ic { border-color: var(--green); color: var(--green-text); }
.fitem.is-open .fq__ic { background: var(--green); border-color: transparent; color: var(--green-ink); transform: rotate(45deg); }
.fa { max-height: 0; overflow: hidden; transition: max-height .34s cubic-bezier(.3,.8,.3,1); }
.fa__in { padding: 0 4px 26px; max-width: 78ch; font-size: .95rem; color: var(--ink-2); line-height: 1.72; }
.fa__in b { color: var(--ink); }
.fa__in code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: 2px 7px; border-radius: 6px; color: var(--green-text); }

/* ---------- cta band ---------- */
.band {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface);
  padding: 56px 40px; text-align: center;
}
.band h2 { max-width: 22ch; margin: 12px auto 0; }
.band p { max-width: 52ch; margin: 16px auto 0; }
.band__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 60px 0 40px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.foot__h { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 16px; }
.foot__l { display: flex; flex-direction: column; gap: 11px; }
.foot__l a { font-size: .89rem; color: var(--ink-2); }
.foot__l a:hover { color: var(--green-text); }
.foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.foot__bottom p { font-size: .8rem; color: var(--ink-4); max-width: 64ch; line-height: 1.65; }

/* ---------- empty state ---------- */
.empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--ink-4); font-size: .92rem; }

/* ---------- toast ---------- */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 300px; max-width: 370px; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  padding: 16px 18px; box-shadow: var(--shadow); animation: toastIn .3s cubic-bezier(.2,.9,.3,1);
}
.toast.is-out { animation: toastOut .26s forwards; }
.toast__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.toast--ok .toast__ic { background: var(--green-soft); color: var(--green-text); }
.toast--warn .toast__ic { background: rgba(245,165,36,.16); color: var(--amber); }
.toast--err .toast__ic { background: rgba(240,68,56,.16); color: var(--rose); }
.toast--info .toast__ic { background: var(--surface-3); color: var(--ink-2); }
.toast__t { font-size: .9rem; font-weight: 700; }
.toast__d { font-size: .8rem; color: var(--ink-3); margin-top: 3px; line-height: 1.5; word-break: break-all; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.rv.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .launch { grid-template-columns: 1fr; }
  .preview { position: static; }
  .epoch { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3) { border-right: 0; }
  .stat:nth-child(4), .stat:nth-child(5) { border-top: 1px solid var(--line); }
  .token { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .ringwrap { width: 170px; height: 170px; }
}
@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--nav-h); left: 12px; right: 12px; padding: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow);
  }
  /* The dropdown stacks the same tab buttons. `overflow-x: auto` is switched
     back off here, because a vertical menu that also scrolls sideways is a way
     to lose a tab off the edge on a phone. */
  .nav__links.is-open { overflow: visible; }
  .nav__links.is-open .tab { padding: 14px 16px; border-radius: var(--r); text-align: left; width: 100%; }
}
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .sec { padding: 72px 0; }
  .tier { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px 20px; }
  .tier__bar { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wrap, .nav__in { padding: 0 18px; }
  .nav__cta { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(2n) { border-right: 0; }
  .fgrid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .board__bar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
  .chips { overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; }
  .grid { grid-template-columns: 1fr; }
  .band { padding: 40px 22px; }
  .toasts { left: 14px; right: 14px; }
  .toast { min-width: 0; }
  .step__body, .step__sub { margin-left: 0; }
  .hero__cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}