/* ───────────────────────────────────────────────────────────────
   Perplo — stock perps on Solana. Shell kept from perplo.org:
   near-black ink on white, one pale blue band, and no accent hue:
   colour is spent only where it means something — the gap column.
   Nothing is boxed. Every panel is transparent, separated by space
   and type weight instead of chrome.
   ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #ffffff;
  --ink: #222326;
  --ink-2: rgba(31, 32, 37, 0.6);
  --ink-3: rgba(31, 32, 37, 0.4);
  --rule: rgba(31, 32, 37, 0.1);
  --dark: #1f2025;
  --band: #ebf0f8;
  --band-2: #f3f6f7;
  /* Semantic only, for the gap column — not an accent. */
  --up: #16a34a;
  --down: #dc2626;

  --gutter: clamp(20px, 4.5vw, 64px);
  --measure: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ─────────────────────────── Pills ─────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0) scale(0.985); }

.pill-dark { background: var(--dark); color: #fff; }
.pill-dark:hover { background: #2c2d33; }
.pill-light { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-light:hover { background: var(--ink); color: #fff; }


/* ─────────────────────────── Nav ─────────────────────────── */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.3s ease;
}
.nav.stuck { background: rgba(255, 255, 255, 0.92); }

.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark { width: 22px; height: 22px; flex: none; display: block; }

.nav-links { display: flex; gap: 4px; margin-left: 18px; }
.nav-links a { padding: 10px 14px; border-radius: 999px; font-size: 17px; color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

/* The mark sits between the links and the CTA, and keeps its own left auto on
   phones so it — not the button — is what takes up the slack when the links go. */
.nav-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-x:hover { color: var(--ink); background: rgba(31, 32, 37, 0.06); }
.nav-x svg { display: block; }

.nav-cta { margin-left: 10px; height: 44px; padding: 0 20px; }

@media (max-width: 720px) {
  .nav { left: var(--gutter); right: var(--gutter); transform: none; padding-left: 18px; }
  .nav-links { display: none; }
  .nav-x { margin-left: auto; }
  .nav-cta { margin-left: 6px; }
}

/* ─────────────────────────── Hero ─────────────────────────── */

.hero {
  position: relative;
  padding: 168px var(--gutter) 0;
  text-align: center;
  overflow: hidden;
  background: var(--paper);
}

/*
  The blossom now sits at its own colour rather than being driven to red, and
  the clip is masked so it dissolves into the page along the bottom edge
  instead of ending on a hard line. `saturate` cannot tint a neutral, so the
  white it was shot on stays exactly the page white.
*/
.petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.02);
  pointer-events: none;
  opacity: 1;
  transition: opacity 900ms linear;
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
}

/* Keeps the type on paper without greying it. */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 42%, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.72) 55%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0) 24%),
    linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0) 30%);
}

.hero-copy { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: clamp(46px, 7.4vw, 96px); letter-spacing: -0.03em; line-height: 1; }
/* The second line carries the weight; no accent colour on the page. */
.hero h1 em { font-style: normal; color: var(--ink); }

.hero-sub {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.35;
  color: var(--ink-2);
}
.hero-btn { margin-top: 34px; }

/*
  The contract address. People copy it far more often than they read it, so the
  whole row is the button and the label sits in the same pill rather than above
  it. Mono digits keep the string scannable against a forgery.
*/
.ca {
  position: relative;
  z-index: 2;
  /* Block-level so it takes its own line under the button rather than sitting
     beside it on the hero's centred line. */
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 32, 37, 0.05);
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ca:hover { background: rgba(31, 32, 37, 0.09); color: var(--ink); }
.ca-label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.ca-addr {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.5vw, 13.5px);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-action {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.ca.copied { background: rgba(31, 32, 37, 0.09); color: var(--ink); }

.ca-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.ca-foot:hover { color: var(--ink); }

.rating { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }

.hero-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 20px auto -2px;
  max-width: 760px;
  /*
    Taller than the handsets need, because they are rotated: the corners of a
    rotated box reach past its own height, and a mask is sized to the element's
    box — anything outside it is masked away. Too short a stage and the tops get
    sliced flat. The slack sits above them; `flex-end` keeps them on the floor.
  */
  height: clamp(380px, 56vw, 580px);
  /*
    Masking the stage — shadows included — lets the handsets dissolve into the
    page instead of meeting the section edge on a hard horizontal line.
    `no-repeat` matters: the default would tile the gradient and band them.
  */
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}
.phone {
  position: relative;
  border-radius: 42px;
  background: #0f1013;
  padding: 7px;
  box-shadow: 0 30px 70px rgba(31, 32, 37, 0.2);
  overflow: hidden;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 36px; }
.phone-back { width: clamp(190px, 25vw, 270px); height: clamp(300px, 44vw, 460px); transform: rotate(-7deg) translate(34px, -14px); }
.phone-front { width: clamp(210px, 27vw, 296px); height: clamp(300px, 46vw, 470px); transform: rotate(4deg) translate(-24px, 6px); z-index: 2; }

/* ────────────────────────── Ticker strip ──────────────────── */

.strip { padding: 56px 0 8px; background: var(--paper); }
.strip-label { text-align: center; font-size: 15px; color: var(--ink-3); margin-bottom: 24px; }
.strip-rail {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: marquee 42s linear infinite; }
.strip-track img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.strip-track span { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 500; color: var(--ink-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────────────────────── Sections ──────────────────────── */

.section { max-width: var(--measure); margin: 0 auto; padding: clamp(76px, 9vw, 132px) var(--gutter); }
.center-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.center-head h2, .split h2, .get h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.03em; }
.section-sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--ink-2); }

.fine { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.fine.center { max-width: 620px; margin: 30px auto 0; text-align: center; }

.band-soft { max-width: none; background: var(--band-2); }
.band-soft > * { max-width: var(--measure); margin-inline: auto; }

.status {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(31, 32, 37, 0.06);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* ────────────────────────── Table ────────────────────────── */

.table { border-top: 1px solid var(--ink); }
.thead, .row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) 1fr 1fr 0.8fr 0.9fr 1fr 0.8fr;
  gap: 16px;
  align-items: center;
}
.thead { padding: 14px 0; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.tick { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tick img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.tick .sym { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tick .co { font-size: 15px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.num { text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.num.muted { color: var(--ink-3); }
.gap-pos { color: var(--up); font-weight: 500; }
.gap-neg { color: var(--down); font-weight: 500; }

.skeleton {
  height: 12px; border-radius: 4px; margin-left: auto; width: 68%;
  background: linear-gradient(90deg, rgba(31,32,37,0.06) 25%, rgba(31,32,37,0.03) 50%, rgba(31,32,37,0.06) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ───────────── Product trio — no plate, just the phone ────── */

.cards { display: grid; gap: 40px 28px; grid-template-columns: repeat(3, 1fr); }

.card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.card p { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

.card-shot { margin-top: 26px; display: flex; justify-content: center; }
.card-shot img {
  width: 74%;
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(31, 32, 37, 0.14);
  display: block;
}

/* ─────── Feature grid — transparent, three across, ruled ──── */

.grid { display: grid; gap: 44px 40px; grid-template-columns: repeat(3, 1fr); }
.cell { background: transparent; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.cell h4 { font-size: 20px; letter-spacing: -0.02em; }
.cell p { margin-top: 10px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }

/* ───────────────────────── Split section ─────────────────── */

.split { display: grid; gap: clamp(36px, 6vw, 80px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--ink-2); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

/* Also transparent: a ruled list, not four filled tiles. */
.facts { display: grid; gap: 0; margin: 0; background: transparent; border-radius: 0; }
.facts > div { background: transparent; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts > div:first-child { border-top: 1px solid var(--rule); }
.facts dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 7px 0 0; font-size: 17px; }

/* ─────────────────────────── Get ─────────────────────────── */

.get { text-align: center; padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--band); }
.get .section-sub { max-width: 560px; margin-inline: auto; }
.get-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }

/* ────────────────────────── Footer ───────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
  border-top: 1px solid var(--rule);
}
.footer .fine { max-width: 62ch; }

.x-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.x-link:hover { color: var(--ink); }

/* ───────────────────────── Reveals ───────────────────────── */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .row { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────── Responsive ────────────────────── */

@media (max-width: 900px) {
  .thead, .row { grid-template-columns: minmax(0, 2fr) 1fr 0.8fr 1fr 0.8fr; }
  .tablet-hide { display: none; }
  .cards, .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .thead, .row { grid-template-columns: minmax(0, 1.6fr) 1fr 0.8fr; }
  .phone-hide { display: none; }
  .tick .co { display: none; }
  .cards, .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 132px; }
}

/* ═══════════════════════════════════════════════════════════════
   PERPLO ADDITIONS — perps, the fan, the verifier, the board.
   Same rules as above: ink on paper, colour only where it means
   something (up / down), panels separated by space, not chrome.
   ═══════════════════════════════════════════════════════════════ */

:root { --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; --soft: rgba(31, 32, 37, 0.32); }
::selection { background: #1f2025; color: #fff; }
h1, h2, h3 { text-wrap: balance; }
.soft { color: var(--soft); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.up { color: var(--up); }
.down { color: var(--down); }

.brand-mark { width: 24px; height: 24px; }
.ca-chain { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--ink); }
.ca-chain img { display: block; }
.ca-addr.pending { font-family: inherit; font-size: 13px; color: var(--ink-3); }

/* ─────────────── Hero handsets, rendered live in HTML ─────────────── */

.phone { background: #0f1013; }
.scr {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden;
  background: #f5f6f8; color: #111; text-align: left;
  font-size: 11px; line-height: 1.3; padding: 0 14px;
}
.scr-top { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.scr-top i { width: 64px; height: 18px; border-radius: 99px; background: #0f1013; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); }

.mk-head { padding: 10px 2px 8px; }
.mk-head h5 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.mk-head small { display: block; margin-top: 3px; color: #8a8f99; font-size: 10.5px; }
.mk-search { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 99px; background: #fff; color: #9aa0aa; font-size: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.mk-rows { margin-top: 8px; }
.mk-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 7px 0; }
.mk-row img, .mk-row .ph { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #e6e8ec; }
.mk-row b { display: block; font-size: 12px; letter-spacing: -0.01em; }
.mk-row small { display: block; color: #9aa0aa; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row .r { text-align: right; font-variant-numeric: tabular-nums; }
.mk-row .r b { font-size: 12px; }
.mk-row .r small { font-weight: 600; }
.mk-tab { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 22px; padding: 10px 22px; border-radius: 99px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.mk-tab i { width: 16px; height: 16px; border-radius: 5px; background: #c9cdd4; }
.mk-tab i.on { background: #1f2025; }

.dt-head { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 10px 2px 4px; }
.dt-head .lg { width: 28px; height: 28px; border-radius: 8px; }
.dt-head b { display: block; font-size: 12px; }
.dt-head small { display: block; color: #9aa0aa; font-size: 9.5px; }
.dt-head .x { color: #9aa0aa; font-size: 16px; }
.dt-px { margin-top: 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dt-sub { margin-top: 2px; font-size: 10px; color: #8a8f99; }
.dt-sub b { font-weight: 600; }
.tk-side { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; padding: 3px; border-radius: 99px; background: #e9ebef; }
.tk-side span { text-align: center; padding: 6px 0; border-radius: 99px; font-weight: 600; color: #8a8f99; }
.tk-side .on { background: #fff; color: var(--up); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tk-lev { display: flex; justify-content: space-between; margin-top: 14px; color: #8a8f99; }
.tk-lev b { color: #111; }
.tk-bar { height: 4px; margin-top: 7px; border-radius: 9px; background: #e2e5ea; }
.tk-bar i { display: block; height: 100%; border-radius: 9px; background: #1f2025; }
.tk-kv { display: flex; justify-content: space-between; margin-top: 10px; color: #8a8f99; font-variant-numeric: tabular-nums; }
.tk-kv b { color: #111; font-weight: 600; }
.tk-thesis { margin-top: 12px; padding: 10px 11px; border-radius: 14px; background: #fff; }
.tk-thesis small { color: #9aa0aa; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.tk-thesis p { margin-top: 4px; font-size: 10.5px; line-height: 1.4; color: #333; }
.tk-btn { margin-top: 12px; padding: 10px 0; border-radius: 99px; background: #1f2025; color: #fff; text-align: center; font-weight: 600; }

/* ───────────────────────── Ticker strip ───────────────────────── */
.strip-track span em { font-style: normal; color: var(--ink-3); font-size: 13px; }

/* ───────────────────── One ticker, many markets ───────────────────── */

.fan { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-bottom: clamp(80px, 9vw, 120px); }
.fan-copy p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); }
.fan-copy p.strong { margin-top: 16px; color: var(--ink); font-weight: 600; }
.fan-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.fan-pick button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 6px;
  border: 0; border-radius: 999px; background: rgba(31,32,37,.05); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background .2s, color .2s;
}
.fan-pick button img { width: 24px; height: 24px; border-radius: 7px; }
.fan-pick button:hover { color: var(--ink); }
.fan-pick button[aria-selected="true"] { background: var(--dark); color: #fff; }
.fan-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0 0; border-top: 1px solid var(--rule); }
.fan-stats div { padding: 16px 0 0; }
.fan-stats dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fan-stats dd { margin: 6px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.fan-viz { position: relative; display: grid; grid-template-columns: 1fr 150px; align-items: center; min-height: 420px; }
.fan-root { grid-column: 2; grid-row: 1; justify-self: end; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 12px 18px 12px 12px; border-radius: 20px; background: var(--dark); color: #fff; box-shadow: 0 24px 50px -18px rgba(31,32,37,.45); }
.fan-root img { width: 36px; height: 36px; border-radius: 10px; }
.fan-root b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.fan-root small { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.fan-leaves { grid-column: 1; grid-row: 1; display: grid; gap: 8px; z-index: 2; padding-right: 64px; }
.leaf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center;
  padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 8px 22px -14px rgba(31,32,37,.25);
  opacity: 0; transform: translateX(-10px); animation: leafIn .55s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s);
}
@keyframes leafIn { to { opacity: 1; transform: none; } }
.leaf .v { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; min-width: 0; }
.leaf .v img { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.leaf .v span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaf .p { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.leaf .m { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.leaf .g { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.leaf.best { box-shadow: 0 0 0 1.5px var(--ink), 0 10px 26px -14px rgba(31,32,37,.35); }
.leaf.best .v::after { content: 'mark'; margin-left: 2px; padding: 1px 7px; border-radius: 99px; background: var(--dark); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.fan-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.fan-lines path { fill: none; stroke: rgba(31,32,37,.16); stroke-width: 1.5; }
.fan-lines path.best { stroke: var(--ink); stroke-width: 2; }

.table-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.table-head h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.025em; }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.status.live i { background: var(--up); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

.row { cursor: pointer; transition: background .2s; }
.row:hover { background: rgba(31,32,37,.025); }
.row .tick .chev { margin-left: 4px; color: var(--ink-3); font-size: 12px; transition: transform .25s; }
.row.open .tick .chev { transform: rotate(90deg); }
.row.dead { cursor: default; }
.row.dead .sym, .row.dead .num { color: var(--ink-3); }
.row-detail { display: none; padding: 4px 0 20px 52px; border-bottom: 1px solid var(--rule); }
.row-detail.open { display: block; }
.pools { display: grid; gap: 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1.6fr) 1.1fr 0.9fr 0.8fr 0.9fr 0.7fr; gap: 14px; padding: 9px 0; font-size: 14.5px; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; align-items: center; }
.prow:first-child { border-top: 0; color: var(--ink-3); font-size: 12px; }
.prow .num { font-size: 14.5px; }
.prow a { color: var(--ink-2); }
.prow a:hover { color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(31,32,37,.05); font-size: 12.5px; color: var(--ink-2); }
.chk::before { content: '✓'; font-weight: 700; color: var(--up); }
.chk.no::before { content: '×'; color: var(--down); }
.issuer { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: rgba(31,32,37,.06); font-size: 11px; font-weight: 600; color: var(--ink-2); vertical-align: 2px; }

/* ───────────────────────────── Verify ───────────────────────────── */

.verify .ticks li { display: grid; gap: 2px; }
.verify .ticks li b { color: var(--ink); font-weight: 600; }
.verify .ticks li span { font-size: 15px; color: var(--ink-3); }
.section-sub.small { margin-top: 28px; font-size: 17px; }
.vcard { padding: 22px; border-radius: 28px; background: var(--band-2); }
.vcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.vq { font-size: 14px; color: var(--ink-3); }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchips button { height: 32px; padding: 0 13px; border: 0; border-radius: 99px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; box-shadow: 0 0 0 1px var(--rule); }
.vchips button[aria-selected="true"] { background: var(--dark); color: #fff; box-shadow: none; }
.vsum { margin: 18px 2px 12px; font-size: 15px; color: var(--ink-2); }
.vsum b { color: var(--ink); }
.vlist { display: grid; gap: 6px; max-height: 420px; overflow: auto; padding-right: 2px; }
.vrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; opacity: 0; animation: rise .45s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
.vrow img, .vrow .ph { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: #eceef1; display: grid; place-items: center; font-weight: 700; color: var(--ink-3); font-size: 13px; }
.vrow b { display: block; font-size: 15px; }
.vrow small { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.vrow .tag { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.vrow .tag.ok { background: rgba(22,163,74,.1); color: var(--up); }
.vrow .tag.no { background: rgba(31,32,37,.05); color: var(--ink-3); }
.vrow.rej b { color: var(--ink-3); font-weight: 500; }
.vfoot { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }

/* ───────────────────────────── Board ───────────────────────────── */

.board { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.board-feed { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.feed-empty { padding: 48px 0; text-align: center; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.feed-empty b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 20px; letter-spacing: -0.02em; }
.th { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.th > img { width: 40px; height: 40px; border-radius: 11px; grid-row: span 2; }
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ink-3); }
.th-meta b { color: var(--ink); font-size: 16px; }
.side { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.side.L { background: rgba(22,163,74,.1); color: var(--up); }
.side.S { background: rgba(220,38,38,.09); color: var(--down); }
.th-pnl { text-align: right; font-variant-numeric: tabular-nums; }
.th-pnl b { display: block; font-size: 17px; }
.th-pnl small { font-size: 12.5px; color: var(--ink-3); }
.th-text { grid-column: 2 / -1; font-size: 17px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.th-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); }
.th-foot a:hover { color: var(--ink); }
.th.void { opacity: .55; }
.board-side h4 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.leaders { display: grid; }
.leaders p { padding: 14px 0; font-size: 15px; }
.ld { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; font-variant-numeric: tabular-nums; }
.ld i { font-style: normal; color: var(--ink-3); }
.ld span { font-family: var(--mono); font-size: 13.5px; }
.reg { margin-top: 28px; padding: 18px; border-radius: 20px; background: var(--band-2); }
.reg small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.reg a { display: block; margin-top: 6px; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.reg p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* ─────────────────────── Product cards (mini UI) ─────────────────────── */

.card { text-align: left; }
.card .step { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.card p { min-height: 3em; }
.mini { margin-top: 24px; padding: 14px; border-radius: 24px; background: var(--band-2); display: grid; gap: 7px; font-size: 14px; }
.mini-search { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); font-weight: 500; }
.mini-search i { width: 1.5px; height: 16px; background: var(--ink); animation: blink 1s steps(1) infinite; margin-right: auto; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.mini-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: #fff; }
.mini-row img, .mini-row .mono { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #eceef1; color: var(--ink-3); font-weight: 700; }
.mini-row em { font-style: normal; font-size: 12px; font-weight: 600; }
.mini-row.ok em { color: var(--up); }
.mini-row.no { opacity: .62; }
.mini-row.no b { font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(31,32,37,.35); }
.mini-row.no em { color: var(--ink-3); font-weight: 500; }
.mini-ref { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--dark); color: #fff; font-variant-numeric: tabular-nums; }
.mini-ref span { color: rgba(255,255,255,.65); }
.mc { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 14px; border-radius: 14px; background: #fff; font-variant-numeric: tabular-nums; }
.mc span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc small { color: var(--ink-3); font-size: 12.5px; }
.mc b { font-size: 13px; }
.mini-swap { gap: 8px; }
.ms-side { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; align-items: center; padding: 4px; border-radius: 99px; background: #fff; }
.ms-side span { text-align: center; padding: 7px 0; border-radius: 99px; font-weight: 600; color: var(--ink-3); }
.ms-side span.on { background: rgba(22,163,74,.1); color: var(--up); }
.ms-side b { padding: 0 12px; }
.ms-box { padding: 12px 14px; border-radius: 16px; background: #fff; }
.ms-box small { font-size: 12px; color: var(--ink-3); }
.ms-box > div { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ms-box b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ms-box p { margin-top: 4px; font-size: 14px; line-height: 1.4; }
.tok { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--band-2); font-size: 13px; font-weight: 600; }
.tok img { width: 20px; height: 20px; border-radius: 50%; }
.ms-route { padding: 2px 4px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ms-btn { padding: 13px 0; border-radius: 99px; background: var(--dark); color: #fff; text-align: center; font-weight: 600; }

/* ─────────────────────────── Get / footer ─────────────────────────── */

.get-mark { display: block; margin: 0 auto 26px; width: 56px; height: 56px; }
.foot-brand { display: grid; gap: 4px; }
.foot-tag { font-size: 14px; color: var(--ink-3); }

@media (max-width: 980px) {
  .fan, .board { grid-template-columns: 1fr; }
  .fan-viz { min-height: 0; grid-template-columns: 1fr 120px; }
}
@media (max-width: 620px) {
  .fan-viz { grid-template-columns: 1fr; gap: 18px; }
  .fan-root { grid-column: 1; grid-row: 1; justify-self: start; }
  .fan-leaves { grid-row: 2; padding-right: 0; }
  .fan-lines { display: none; }
  .row-detail { padding-left: 0; }
  .prow { grid-template-columns: minmax(0, 1.4fr) 1fr 0.8fr; }
  .prow > :nth-child(n+4) { display: none; }
  .th { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .th > img { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf, .vrow { animation: none; opacity: 1; transform: none; }
  .status.live i, .mini-search i { animation: none; }
}

/* fixes */
.thead .num { font-size: 13px; }
.band-soft > * { max-width: calc(var(--measure) - 2 * var(--gutter)); }
.fan-viz { grid-template-columns: 1fr 200px; }
.fan-root small { white-space: nowrap; }
@media (max-width: 980px) { .fan-viz { grid-template-columns: 1fr 190px; } }
@media (max-width: 980px) { .fan, .board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .fan-viz { grid-template-columns: minmax(0, 1fr); } .fan-stats dd { font-size: 20px; } }
.mk-row b, .dt-head b { white-space: nowrap; }
@media (max-width: 620px) { .scr { zoom: 0.8; } }

/* ═══════════════════════════════════════════════════════════════
   NATURE — the logo artwork brought onto the page: a branch in the
   top-left, out-of-focus grass in the bottom-right, a few leaves
   drifting between them. Cut from the artwork as transparent WebP,
   so the page white stays the page white.
   ═══════════════════════════════════════════════════════════════ */

.nature { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.n-branch {
  position: absolute; left: 0; top: 0; width: clamp(300px, 44vw, 700px); height: auto;
  transform-origin: 0 0; animation: branchSway 9s ease-in-out infinite alternate;
}
.n-grass {
  position: absolute; right: 0; bottom: 0; width: clamp(320px, 50vw, 820px); height: auto;
  transform-origin: 100% 100%; animation: grassSway 7s ease-in-out infinite alternate;
}
@keyframes branchSway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg) translateY(4px); } }
@keyframes grassSway { from { transform: skewX(-0.8deg); } to { transform: skewX(0.9deg) scaleY(1.01); } }
.n-leaves { position: absolute; inset: 0; }
.n-leaf { position: absolute; top: 0; left: 0; will-change: transform; }

.hero .nature { z-index: 0; }
.hero .n-grass { bottom: 0; mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.hero-veil {
  background:
    radial-gradient(46% 36% at 50% 30%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0) 14%);
}
.hero-stage { z-index: 1; }

.get { position: relative; overflow: hidden; background: #fff; }
.get > :not(.nature) { position: relative; z-index: 1; }
.nature-get .n-branch { width: clamp(240px, 30vw, 460px); opacity: .95; }
.nature-get .n-grass { width: clamp(260px, 34vw, 560px); }

@media (max-width: 620px) {
  .n-branch { width: 64vw; }
  .hero .n-grass { width: 90vw; }
  .nature-get .n-branch { width: 52vw; }
  .nature-get .n-grass { width: 70vw; }
}
@media (prefers-reduced-motion: reduce) { .n-branch, .n-grass { animation: none; } }
.nature-get .n-branch { top: 40px; mask-image: linear-gradient(to bottom, transparent 0, #000 120px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px); }
.nature-get .n-grass { mask-image: linear-gradient(to bottom, transparent 0, #000 30%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }