/* ------------------------------------------------------------------
   coin.css — everything below the fold.
   Built from the original page's own tokens so it reads as one site:
   secondary teal rgb(0 124 117), 1px #e5e7eb hairlines, Inter, white.

   Deliberately box-free: the 2023 page has exactly one card on it (the
   invite form). Stacking more cards under it looked like a different
   site, so sections are separated by whitespace and a single hairline.
   Nothing here touches pump.css (that file is the archived original).
   ------------------------------------------------------------------ */

:root{
  --pf-teal:      rgb(0 124 117);
  --pf-green-ink: rgb(8 130 68);
  --pf-ink:       #000;
  --pf-mute:      #6b7280;
  --pf-mute-2:    #9ca3af;
  --pf-line:      #e5e7eb;
  --pf-line-soft: #f1f2f4;
  --pf-slate:     rgb(2 6 23);      /* the hero pill's black, reused */
  --pf-radius:    0.5rem;
}

/* --------------------------------------------------------- the lore
   The archive IS the pitch, so this gets the loudest treatment on the
   page. Black rather than teal: it echoes the one dark element the 2023
   page already has (the "Some examples" pill) instead of competing with
   the Buy button further down. */
.pf-lore{ display:flex; justify-content:center; margin-top:-2.5rem; padding:0 16px; }
.pf-lore-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--pf-slate); color:#fff; text-decoration:none;
  font-size:clamp(1rem,2.6vw,1.25rem); font-weight:700; letter-spacing:.07em;
  padding:1.05rem 2.75rem; border-radius:9999px;
  box-shadow:0 8px 24px -10px rgb(2 6 23 / .55);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf-lore-btn:hover{
  background:#0e1527; transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgb(2 6 23 / .6);
}
.pf-lore-btn:active{ transform:translateY(0); }
.pf-lore-btn svg{ opacity:.75; }
@media (prefers-reduced-motion:reduce){ .pf-lore-btn{ transition:none; } }
@media (max-width:640px){
  .pf-lore{ margin-top:-1.5rem; }
  .pf-lore-btn{ width:100%; max-width:420px; justify-content:center; padding:1rem 1.5rem; }
}

/* the original page is `min-h-screen` with no scroll past the form; the cue
   is the only hint that there is anything below, so it fades out once you go. */
.pf-scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--pf-mute-2); padding-bottom:2.25rem; margin-top:1.35rem;
  transition:opacity .35s ease;
}
.pf-scrollcue span{ width:1px; height:34px; background:linear-gradient(to bottom,transparent,var(--pf-line)); }
.pf-scrollcue svg{ animation:pf-bob 2.2s ease-in-out infinite; }
.pf-scrollcue.is-hidden{ opacity:0; pointer-events:none; }
@keyframes pf-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@media (prefers-reduced-motion:reduce){ .pf-scrollcue svg{animation:none} }

.pf-section{ border-top:1px solid var(--pf-line); background:#fff; padding:4rem 0 0; }
.pf-wrap{ max-width:1000px; margin:0 auto; padding:0 16px; }

/* ---------------------------------------------------------- header */
.pf-head{ display:flex; align-items:center; gap:1rem; }
.pf-coin-img{
  width:52px; height:52px; border-radius:9999px; object-fit:cover;
  border:1px solid var(--pf-line); flex:0 0 auto; background:#fafafa;
}
.pf-head-txt{ min-width:0; flex:1 1 auto; }
.pf-h2{ font-size:1.5rem; line-height:1.2; font-weight:700; letter-spacing:-.015em; margin:0 0 .35rem; }
.pf-tick{ color:var(--pf-mute); font-weight:500; }
.pf-h3{ font-size:1rem; font-weight:600; margin:0; letter-spacing:-.005em; }

.pf-ca{
  display:inline-flex; align-items:center; gap:.4rem; max-width:100%;
  font:inherit; font-size:.8125rem; color:var(--pf-mute);
  background:transparent; border:1px solid var(--pf-line);
  border-radius:9999px; padding:.22rem .65rem; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:background .15s, color .15s;
}
.pf-ca:hover{ background:var(--pf-line-soft); color:var(--pf-ink); }
.pf-ca span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-ca.is-copied{ border-color:var(--pf-teal); color:var(--pf-teal); }
.pf-ca svg{ flex:0 0 auto; opacity:.7; }

.pf-actions{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }

.pf-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto; color:var(--pf-ink);
  border:1px solid var(--pf-line); border-radius:var(--pf-radius);
  transition:background .15s, border-color .15s;
}
.pf-icon-btn:hover{ background:var(--pf-line-soft); border-color:#d8dade; }
/* no X url in config yet — visible, obviously unset, not a dead link */
.pf-icon-btn[aria-disabled="true"]{ color:var(--pf-mute-2); pointer-events:none; }

.pf-buy{
  display:inline-flex; align-items:center; justify-content:center; height:38px;
  background:var(--pf-teal); color:#fff; text-decoration:none;
  font-size:.875rem; font-weight:500; padding:0 1.15rem;
  border-radius:var(--pf-radius); transition:filter .15s;
}
.pf-buy:hover{ filter:brightness(1.5); }

/* -------------------------------------------- price + market cap
   Two numbers, set big. This is the anchor of the whole section, so it
   borrows the hero's typography rather than sitting in a widget. */
.pf-stats{
  display:flex; justify-content:center; gap:clamp(2.5rem,9vw,7rem);
  padding:4rem 0 4.5rem;
}
.pf-stat{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.pf-stat-k{
  font-size:.8125rem; color:var(--pf-mute); letter-spacing:.01em;
}
.pf-stat-v{
  font-size:clamp(1.875rem,5.5vw,3rem); line-height:1; font-weight:700;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.pf-stat-v.is-loading{ color:var(--pf-line); }

/* --------------------------------------------------------- blocks */
.pf-block{ padding:2.5rem 0; border-top:1px solid var(--pf-line); }
.pf-block-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.pf-head-right{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }

/* ---------------------------------------------------------- chart */
.pf-chart{
  position:relative; width:100%; aspect-ratio:16/9; min-height:320px; max-height:460px;
  border:1px solid var(--pf-line); border-radius:var(--pf-radius);
  overflow:hidden; background:#fcfcfd;
}
.pf-chart.is-empty{ aspect-ratio:auto; height:240px; min-height:0; }
.pf-chart iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.pf-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.4rem; text-align:center; padding:1.5rem;
}
.pf-empty p{ margin:0; font-size:.9375rem; color:var(--pf-ink); }
.pf-empty span{ font-size:.8125rem; color:var(--pf-mute); }

/* -------------------------------------------------- creator rewards
   The single loudest number below the fold — bigger than price and market
   cap, because it is the whole pitch. Centred and given room. */
.pf-shared{ text-align:center; padding:4rem 0 3.5rem; }
.pf-shared-k{
  font-size:clamp(.875rem,2vw,1rem); font-weight:500; color:var(--pf-mute);
  margin:0 0 1rem; letter-spacing:.01em;
}
.pf-shared-v{
  font-size:clamp(2.75rem,9vw,5rem); line-height:1; font-weight:700;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.pf-shared-usd{
  margin-top:.75rem; font-size:clamp(1rem,2.4vw,1.25rem);
  color:var(--pf-teal); font-weight:600; font-variant-numeric:tabular-nums;
}
.pf-shared-usd:empty{ display:none; }
.pf-shared-meta{
  margin-top:1.25rem; display:flex; justify-content:center; align-items:center;
  gap:.5rem 1rem; flex-wrap:wrap; font-size:.8125rem; color:var(--pf-mute-2);
}
.pf-shared-meta span:empty{ display:none; }
.pf-shared-pending b{ font-weight:600; color:var(--pf-mute); font-variant-numeric:tabular-nums; }
.pf-shared .pf-note{ margin-left:auto; margin-right:auto; }
.pf-note{
  margin:1.5rem 0 0; font-size:.75rem; line-height:1.6; color:var(--pf-mute-2); max-width:640px;
}
.pf-note:empty{ display:none; }

/* ---------------------------------------------------------- holders */
.pf-count{ font-size:.8125rem; color:var(--pf-mute); font-variant-numeric:tabular-nums; }
.pf-search{
  font:inherit; font-size:.8125rem; padding:.35rem .7rem; width:190px; max-width:45vw;
  border:1px solid var(--pf-line); border-radius:var(--pf-radius); background:#fff; color:var(--pf-ink);
}
.pf-search:focus{ outline:2px solid var(--pf-teal); outline-offset:-1px; }
.pf-search::placeholder{ color:var(--pf-mute-2); }

.pf-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pf-table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.pf-table th{
  text-align:left; font-weight:500; font-size:.75rem; color:var(--pf-mute);
  padding:0 .6rem .6rem; border-bottom:1px solid var(--pf-line); white-space:nowrap;
}
.pf-table td{ padding:.65rem .6rem; border-bottom:1px solid var(--pf-line-soft); vertical-align:middle; }
.pf-table tbody tr:last-child td{ border-bottom:0; }
.pf-table tbody tr:hover{ background:#fafbfc; }
.pf-c-rank{ width:2.75rem; }
/* `.pf-table th` outranks a bare `.pf-c-num`, so the numeric headers have
   to be qualified or they sit left of the numbers they label. */
.pf-c-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.pf-table th.pf-c-num,
.pf-table td.pf-c-num{ text-align:right; }
.pf-c-bar{ width:120px; }
@media (max-width:640px){ .pf-c-bar,.pf-table td:nth-child(5){ display:none; } }
/* on a phone the raw amount is the first thing to go — % of supply is
   what a holder actually reads, and four columns overflow at 390px */
@media (max-width:540px){
  .pf-table th:nth-child(3),.pf-table td:nth-child(3){ display:none; }
  .pf-table td,.pf-table th{ padding-left:.4rem; padding-right:.4rem; }
}

.pf-rank{ color:var(--pf-mute-2); font-variant-numeric:tabular-nums; }
.pf-who{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.pf-av{ width:24px; height:24px; border-radius:9999px; flex:0 0 auto; }
.pf-addr{
  color:var(--pf-ink); text-decoration:none; font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-addr:hover{ color:var(--pf-teal); text-decoration:underline; }
.pf-tag{
  flex:0 0 auto; font-size:.6875rem; line-height:1; padding:.25rem .45rem;
  border-radius:9999px; background:var(--pf-line-soft); color:var(--pf-mute); white-space:nowrap;
}
.pf-tag--curve{ background:#ecfdf5; color:var(--pf-green-ink); }
.pf-tag--lp{    background:#eef2ff; color:#4338ca; }
.pf-tag--dev{   background:#fff1f2; color:#be123c; }

.pf-barwrap{ height:5px; border-radius:9999px; background:var(--pf-line-soft); overflow:hidden; }
.pf-barfill{ height:100%; border-radius:9999px; background:var(--pf-teal); }

.pf-tfoot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; font-size:.75rem; color:var(--pf-mute);
}
.pf-more{
  font:inherit; font-size:.75rem; color:var(--pf-teal); background:transparent;
  border:1px solid var(--pf-line); border-radius:var(--pf-radius);
  padding:.35rem .8rem; cursor:pointer;
}
.pf-more:hover{ background:var(--pf-line-soft); }

/* ----------------------------------------------------------- footer */
.pf-footer{
  margin-top:1rem; padding:3rem 0; border-top:1px solid var(--pf-line);
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
}
.pf-foot-logo{ width:36px; height:36px; border-radius:9999px; opacity:.8; }
.pf-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem; }
.pf-links a{ font-size:.875rem; color:var(--pf-mute); text-decoration:none; }
.pf-links a:hover{ color:var(--pf-ink); text-decoration:underline; }
.pf-fine{ margin:0; max-width:620px; font-size:.75rem; line-height:1.6; color:var(--pf-mute-2); }
.pf-fine:empty{ display:none; }

@media (max-width:640px){
  .pf-section{ padding-top:2.5rem; }
  .pf-head{ flex-wrap:wrap; }
  .pf-actions{ order:3; width:100%; }
  .pf-buy{ flex:1 1 auto; }
  .pf-h2{ font-size:1.25rem; }
  .pf-stats{ padding:3rem 0 3.5rem; gap:2rem; }
  .pf-block{ padding:2rem 0; }
  .pf-chart{ aspect-ratio:auto; height:400px; }
}