/* ==========================================================================
   MLT, Major League Trading
   Brand palette only: #1C3C36 dark green, #009163 green, logo red for losses.
   ========================================================================== */

:root{
  --bg:           #050807;
  --bg-2:         #080D0B;
  --surface:      #0C1211;
  --surface-2:    #111917;
  --line:         rgba(255,255,255,.08);
  --line-2:       rgba(255,255,255,.15);

  --green:        #009163;
  --green-br:     #12C47D;
  --green-deep:   #1C3C36;
  --red:          #E8455C;

  --text:         #F2F5F4;
  --dim:          #96A19E;
  --faint:        #66736F;

  --r:            10px;
  --wrap:         1180px;

  --display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  /* Always reserve the scrollbar gutter. Without this, a short page has no
     scrollbar and a long one does, so the viewport changes width by ~15px and
     the whole centred layout jumps as you move between them. */
  scrollbar-gutter:stable;
}

body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  /* Grain must tile seamlessly. The old inline feTurbulence tile did not wrap
     despite stitchTiles='stitch', so every 180px repeat drew a faint vertical
     line across the page. grain.png is per-pixel random, which has no spatial
     correlation and therefore cannot mismatch at the tile edges. */
  opacity:0; mix-blend-mode:overlay;
  background-image:url('art/grain.png');
  background-size:256px 256px;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, select{ font:inherit; }

main{ flex:1; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:38px 24px 76px; }
.center{ text-align:center; }

.display{
  font-family:var(--display); font-style:italic; font-weight:400;
  text-transform:uppercase; line-height:.95; letter-spacing:.01em;
}
.display.md{ font-size:50px; }
.display.sm{ font-size:30px; }
.display.xs{ font-size:19px; }
.dim{ color:var(--faint); }
.dim2{ color:rgba(255,255,255,.72); }
.hl{ color:#fff; }
.up{ color:var(--green-br); }
.down{ color:var(--red); }

/* small round coin logo, used everywhere */
.coin{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; background:var(--surface-2);
  border:1px solid rgba(255,255,255,.14);
}
.coin.sm{ width:17px; height:17px; }
.coin.lg{ width:26px; height:26px; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(5,8,7,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* three columns so the links sit dead centre regardless of brand width */
.nav-inner{
  max-width:1340px; margin:0 auto; padding:0 24px;
  height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand img{ height:36px; width:auto; }
.brand-word{
  font-family:var(--display); font-style:italic; font-size:31px;
  line-height:1; padding-bottom:3px; letter-spacing:.5px;
}
.nav-links{ display:flex; align-items:center; justify-self:center; }
/* right column of the nav grid, holds the wallet button */
.nav-actions{ display:flex; align-items:center; justify-content:flex-end; }
.nav-connect{ height:34px; padding:0 16px; white-space:nowrap; }
.nav-connect[disabled]{ pointer-events:none; }
.nav-link{
  display:flex; align-items:center; height:66px; padding:0 15px;
  font-size:14.5px; font-weight:600; color:var(--dim);
  border-bottom:3px solid transparent; transition:color .15s;
  white-space:nowrap;
}
.nav-link:hover{ color:var(--text); }
.nav-link.is-active{ color:#fff; border-bottom-color:var(--green); }

.btn-ghost{
  margin-left:auto; flex:0 0 auto;
  height:38px; padding:0 18px; border-radius:8px;
  border:1px solid var(--line-2); font-size:14px; font-weight:600;
  transition:border-color .15s, background .15s;
}
.btn-ghost:hover{ border-color:var(--green); background:rgba(0,145,99,.12); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 24px; border-radius:8px;
  background:linear-gradient(180deg,#00A870,#00754E); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5);
  font-size:14.5px; font-weight:700; white-space:nowrap;
  transition:filter .15s, transform .1s;
}
.btn-primary:hover{ filter:brightness(1.14); }
.btn-primary:active{ transform:translateY(1px); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 24px; border-radius:8px;
  border:1px solid var(--line-2); font-size:14.5px; font-weight:600;
  white-space:nowrap; transition:border-color .15s, background .15s;
}
.btn-outline:hover{ border-color:var(--green); background:rgba(0,145,99,.1); }

.btn-primary.sm, .btn-outline.sm{ height:34px; padding:0 15px; font-size:13px; border-radius:7px; }
.btn-primary.grow{ flex:1; }

/* the Magic Eden wordmark inside a button. Sized in em so it tracks the button
   text rather than needing a separate size per button. */
/* A third-party wordmark sitting inline in a sentence, e.g. FOMO. Sized in em
   so it tracks whatever text it lands in, and nudged onto the baseline.

   The source art is solid white. Masking it with currentColor makes it take the
   exact colour of the surrounding text, so it reads as part of the sentence
   rather than a brighter foreign object, and it stays correct wherever it is
   placed without a per-context override. */
.brand-mark{
  height:0.82em; aspect-ratio:398 / 250; display:inline-block;
  vertical-align:-0.08em; margin-left:.12em;
  background-color:currentColor;
  -webkit-mask:url("fomo-logo.png") no-repeat center / contain;
  mask:url("fomo-logo.png") no-repeat center / contain;
}

.me-mark{
  height:0.92em; width:auto; display:inline-block;
  vertical-align:-0.14em; margin-left:.42em;
}

/* ==========================================================================
   NOTIFICATION TICKER  (one notice, repeated, scrolling)
   ========================================================================== */
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(18,196,125,.55); }
  70%{ box-shadow:0 0 0 8px rgba(18,196,125,0); }
  100%{ box-shadow:0 0 0 0 rgba(18,196,125,0); }
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.notif{
  display:flex; align-items:center; height:44px;
  background:linear-gradient(90deg,#06120F,#0B1E19 50%,#06120F);
  border-bottom:1px solid rgba(0,145,99,.26);
  overflow:hidden;
}
.notif-viewport{
  flex:1; overflow:hidden; position:relative; height:100%;
  mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
}
.notif-track{ position:absolute; inset:0; }
.notif:hover .notice{ animation-play-state:paused; }

/* one notice only. It starts just off the right edge and travels the full
   width of the viewport plus its own width, so it is completely gone before
   the loop restarts. No overlap, no jump. */
@keyframes crossing{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-100vw - 100%)); }
}
.notice{
  position:absolute; left:100%; top:0; height:100%;
  display:flex; align-items:center; gap:16px;
  white-space:nowrap; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.06em;
  animation:crossing 24s linear infinite;
  will-change:transform;
}
.notice-text{ color:var(--text); font-weight:700; font-style:italic; }
.notice-cta{ color:var(--green-br); font-weight:700; font-style:normal; }
.notice-cta:hover{ text-decoration:underline; }

/* ==========================================================================
   RECENTLY MINTED STRIP
   ========================================================================== */
.recent{
  position:relative; display:flex; align-items:stretch;
  border-bottom:1px solid var(--line); background:var(--bg);
}
.recent-badge{
  flex:0 0 auto; align-self:center;
  display:inline-flex; align-items:center; gap:7px;
  height:24px; margin:0 18px 0 24px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(18,196,125,.4); background:rgba(0,145,99,.16);
  font-size:10.5px; font-weight:800; letter-spacing:.11em; color:var(--green-br);
}
.recent-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green-br); animation:pulse 2s infinite;
}
.recent-scroll{ flex:1; min-width:0; display:flex; overflow-x:auto; scrollbar-width:none; }
.recent-scroll::-webkit-scrollbar{ display:none; }

/* scroll arrows pinned to each edge, like Top Shot's strip */
.recent-nav{
  position:absolute; top:0; bottom:0; z-index:4;
  width:64px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:30px; line-height:1; padding-bottom:3px;
  transition:color .15s;
}
.recent-nav:hover{ color:var(--green-br); }
.recent-nav[hidden]{ display:none; }
.recent-next{
  right:0;
  background:linear-gradient(90deg, rgba(5,8,7,0), rgba(5,8,7,.9) 38%, var(--bg) 66%);
}
/* the back arrow starts where the scroller starts, so it never sits on the LIVE pill */
.recent-prev{
  left:var(--recent-inset, 106px);
  background:linear-gradient(270deg, rgba(5,8,7,0), rgba(5,8,7,.9) 38%, var(--bg) 66%);
}

.rcell{
  flex:0 0 202px; padding:9px 16px 11px;
  border-right:1px solid var(--line);
  transition:background .15s; cursor:pointer;
}
/* a cell becomes a link once its card is on a marketplace, and must not pick
   up any of the default anchor styling when it does */
a.rcell{ display:block; color:inherit; text-decoration:none; }
.rcell:hover{ background:var(--surface); }
.rcell-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:6px;
}
.rcell-when{ font-size:11px; color:var(--dim); font-weight:500; white-space:nowrap; }
.rcell-when.live{ color:var(--green-br); font-weight:800; letter-spacing:.04em; }
.rcell-num{
  font-family:var(--display); font-style:italic; font-size:13px; color:var(--faint);
}
.rrow{ display:flex; align-items:center; gap:9px; height:25px; }
.rthumb{
  flex:0 0 auto; width:18px; height:25px; border-radius:2px;
  object-fit:cover; object-position:top center; background:var(--surface-2);
}
.rrow-label{
  font-size:13.5px; font-weight:800; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rrow-delta{
  margin-left:auto; flex:0 0 auto;
  font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   HOME: HERO BANNER (own container, the keyed-out crew on the green backing)
   ========================================================================== */
.showcase{
  position:relative; overflow:hidden; isolation:isolate;
  /* same 1px edge as .panel and the tiles, so the hero sits in the same system */
  margin:0 0 26px; border:1px solid var(--line); border-radius:var(--r);
  aspect-ratio:1180 / 455; min-height:320px;
  /* backing reads through, but stays behind the crew */
  background:
    linear-gradient(180deg, rgba(4,7,6,.58) 0%, rgba(4,7,6,.66) 55%, rgba(4,7,6,.9) 100%),
    url('art/hero-backing.jpg?v=5') center/cover no-repeat,
    var(--bg-2);
  /* after the shorthand, which would otherwise reset it: keeps the green
     backing from showing through the translucent 1px border */
  background-clip:padding-box;
  /* column so the sub copy and the CA chip stack, both centred at the bottom */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
/* the title sits behind the crew, so the figures occlude the letters */
.showcase-wordmark{
  position:absolute; z-index:2; pointer-events:none; user-select:none;
  left:50%; top:24%;
  /* scaleY stretches the letterforms tall without widening the line */
  transform:translate(-50%,-50%) scaleY(1.45);
  width:100%; text-align:center; white-space:nowrap;
  font-family:var(--display); font-style:italic; font-weight:400;
  text-transform:uppercase; line-height:.9; letter-spacing:.01em;
  font-size:clamp(32px, 8.4vw, 108px);
  color:rgba(255,255,255,.9);
  text-shadow:0 4px 26px rgba(0,0,0,.6);
}
/* The crew sits ABOVE the vignette (z-index 3), so the grade falls on the
   backing only. Below it, the gradient laid a grey film over the figures. */
.showcase-crew{
  position:absolute; z-index:3; pointer-events:none; user-select:none;
  left:50%; bottom:3%; transform:translateX(-50%);
  height:80%; width:auto; max-width:none;
  filter:saturate(.94) contrast(1.03) drop-shadow(0 24px 44px rgba(0,0,0,.6));
  /* the source is cropped flat at the bottom, so dissolve that edge
     now the image no longer sits flush with the container */
  -webkit-mask-image:linear-gradient(180deg,#000 0 86%, transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 86%, transparent 100%);
}
/* the line in front, over the fade at the bottom */
/* contract address, centred under the hero copy, click to copy the full thing */
.ca-chip{
  position:relative; z-index:4;
  display:inline-flex; align-items:center; gap:10px;
  margin:0 auto 26px; padding:8px 14px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(4,7,6,.55); backdrop-filter:blur(6px);
  font:inherit; font-size:12.5px; color:var(--dim);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.ca-chip:hover{ border-color:var(--green); background:rgba(0,145,99,.14); }
.ca-label{
  font-size:10px; font-weight:800; letter-spacing:.11em; color:var(--green-br);
}
.ca-value{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; color:#fff; letter-spacing:.02em;
}
.ca-state{
  font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint);
}
.ca-chip.is-copied .ca-state{ color:var(--green-br); }

.showcase-sub{
  position:relative; z-index:4; text-align:center;
  margin:0; padding:0 28px 26px; max-width:62ch;
  font-size:14px; line-height:1.55;
  color:rgba(255,255,255,.82); text-shadow:0 1px 12px rgba(0,0,0,.9);
}
/* Corner vignette. It sits BELOW the wordmark and the crew so it grades the
   backing only. Above them it laid a gradient across the letters and figures,
   which read as a band cutting through the type. */
.showcase::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* the wave enters bottom left, so that corner gets its own falloff */
    radial-gradient(70% 80% at 0% 100%, rgba(4,7,6,.94) 0 18%, rgba(4,7,6,.6) 55%, transparent 100%),
    radial-gradient(70% 80% at 100% 100%, rgba(4,7,6,.9) 0 16%, rgba(4,7,6,.5) 52%, transparent 100%),
    radial-gradient(105% 115% at 50% 32%, transparent 0 30%, rgba(4,7,6,.6) 70%, rgba(4,7,6,.93) 100%),
    linear-gradient(180deg, transparent 0 52%, rgba(4,7,6,.55) 86%, rgba(4,7,6,.86));
}
/* no grain layer here on purpose: body::after already grains the whole page,
   and a second layer scoped to this box shows up as a hard rectangular seam */

/* ==========================================================================
   HOME: SEASON ONE DROP BLOCK (hero left, two stacked right)
   ========================================================================== */
.drops{ display:grid; grid-template-columns:1.08fr 1fr; gap:18px; align-items:start; }

.panel{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); overflow:hidden;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--dim);
}
.panel-head strong{ color:#fff; font-weight:700; }
.pill-hot{
  display:inline-flex; align-items:center; gap:7px;
  height:24px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(18,196,125,.4); background:rgba(0,145,99,.16);
  font-size:10px; font-weight:800; letter-spacing:.11em; color:var(--green-br);
  white-space:nowrap;
}
.pill-hot .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green-br); animation:pulse 2s infinite;
}
.pill-sold{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--dim); white-space:nowrap;
}
.pill-sold::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--faint); }

/* hero */
.hero-art{
  position:relative; display:grid; place-items:center; overflow:hidden;
  padding:34px 0 30px;
  background:
    linear-gradient(180deg, rgba(4,7,6,.9) 0 30%, rgba(4,7,6,.74) 60%, rgba(4,7,6,.9)),
    url('art/hero-season.jpg') center/cover no-repeat,
    var(--bg-2);
}
.hero-art::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:url('art/grain.png'); background-size:256px 256px;
  opacity:.13; mix-blend-mode:overlay;
}
.fan{ display:flex; align-items:center; filter:drop-shadow(0 16px 34px rgba(0,0,0,.7)); }
.fan img{ height:224px; width:auto; border-radius:6px; }
.fan img:nth-child(1){ transform:rotate(-9deg) translateX(46px); }
.fan img:nth-child(2){ transform:translateY(-12px); z-index:3; }
.fan img:nth-child(3){ transform:rotate(9deg) translateX(-46px); }

.hero-body{ padding:24px 26px 26px; }
.hero-title{
  font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.18;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
/* the S1 edition mark, matching the raised white one beside the handle on a card */
.s1-mark{
  flex:0 0 auto; align-self:flex-start; margin-top:1px;
  font-size:10px; font-weight:800; letter-spacing:.1em;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.hero-sub{ margin-top:10px; font-size:14px; color:var(--dim); }

.progress{ margin-top:20px; }
.progress-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; color:var(--dim); margin-bottom:7px;
}
.progress-label b{ color:#fff; font-weight:800; font-size:14px; }
.progress-pct{ color:var(--green-br); font-weight:800; }
.progress-bar{ height:7px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-br)); }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  margin-top:20px;
}
.stat{ padding:11px 13px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .k{
  font-size:9.5px; font-weight:800; letter-spacing:.11em;
  color:var(--faint); text-transform:uppercase;
}
.stat .v{ margin-top:5px; font-size:17px; font-weight:800; letter-spacing:-.01em; }

.hero-actions{ margin-top:22px; display:flex; gap:11px; flex-wrap:wrap; }

/* the two smaller panels */
.mini-col{ display:flex; flex-direction:column; gap:18px; }
.mini{ display:flex; }
.mini-art{
  flex:0 0 172px; display:grid; place-items:center; padding:20px 0;
  border-right:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 45%, rgba(0,145,99,.22), transparent 68%), var(--bg-2);
}
.mini-art img{ height:150px; width:auto; border-radius:4px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.mini-body{ flex:1; padding:18px 20px; display:flex; flex-direction:column; }
.mini-title{ font-size:19px; font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.mini-sub{ margin-top:7px; font-size:13px; color:var(--dim); }
.mini-meta{ margin-top:10px; font-size:12.5px; color:var(--dim); display:flex; gap:12px; }
.mini-meta b{ color:#fff; font-weight:700; }
.mini-meta .sep{ color:var(--line-2); }
.mini-actions{ margin-top:auto; padding-top:16px; display:flex; gap:9px; }

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.sec-title{ margin:62px 0 8px; }
.sec-sub{ font-size:14px; color:var(--dim); margin-bottom:22px; max-width:70ch; }
.sec-link{ font-size:13.5px; font-weight:700; color:var(--green-br); white-space:nowrap; }
.sec-link:hover{ text-decoration:underline; }

/* ==========================================================================
   GRAILS RAIL
   ========================================================================== */
.grails{ margin-top:66px; }
.grails h2{ font-size:36px; margin-bottom:22px; }

.rail-wrap{ position:relative; }
/* overflow-x:auto forces overflow-y to auto, so the box clips vertically too.
   The top padding is the headroom .gcard:hover's -3px lift needs. */
.rail{ display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding:8px 0 10px; }
.rail::-webkit-scrollbar{ display:none; }

.gcard{
  flex:0 0 268px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .18s, transform .18s; cursor:pointer;
}
/* a grail becomes a link once its card is on a marketplace */
a.gcard{ color:inherit; text-decoration:none; }
.gcard:hover{ border-color:rgba(0,145,99,.55); transform:translateY(-3px); }
.gcard-head{
  padding:12px 15px; font-size:14.5px; font-weight:700;
  border-bottom:1px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gcard-art{
  height:268px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,145,99,.16), transparent 66%), var(--bg-2);
}
.gcard-art img{ height:240px; width:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
.gcard-body{ padding:12px 15px 14px; }
.gcard-tier{ display:flex; align-items:baseline; gap:9px; font-size:12px; font-weight:800; letter-spacing:.07em; }
.gcard-tier .serial{ color:var(--dim); font-weight:700; letter-spacing:0; }
.gcard-line{ margin-top:7px; font-size:12.5px; color:var(--dim); display:flex; align-items:center; gap:9px; }
.gcard-line .sep{ color:var(--line-2); }
.gcard-desc{ margin-top:8px; font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gcard-foot{
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.gcard-foot .lbl{ font-size:10px; letter-spacing:.1em; color:var(--faint); font-weight:800; }
.gcard-foot .val{ font-size:14px; font-weight:800; }

.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(12,18,17,.95); border:1px solid var(--line-2);
  color:#fff; font-size:20px; line-height:1; display:grid; place-items:center; z-index:5;
  transition:background .15s;
}
.rail-btn:hover{ background:var(--green); border-color:var(--green); }
.rail-prev{ left:-14px; }
.rail-next{ right:-14px; }
.grails .center{ margin-top:30px; }

/* tier colours */
.t-gold{ color:#E8C25C; }   .t-silver{ color:#D3DAE0; }
.t-bronze{ color:#CE8B54; } .t-green{ color:var(--green-br); }
.t-diamond{ color:#4FD3E6; }.t-ruby{ color:#F0708F; }
.t-amethyst{ color:#B48BE8; }.t-emerald{ color:#12C47D; }
.t-founder{ color:#fff; }

/* ==========================================================================
   FEATURE TILES
   ========================================================================== */
.tiles{ margin-top:70px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tile-span{ grid-column:1 / -1; }
.tile{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r);
  padding:28px; min-height:176px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px;
}
.tile-tall{ min-height:380px; justify-content:space-between; }
.tile-copy{ position:relative; z-index:3; }
.tile-copy.top{ margin-top:30px; }

/* launch tile: even vertical rhythm between header, card and button */
.tile-launch{ justify-content:flex-start; gap:0; padding:28px 26px 34px; }
.tile-launch .tile-copy.top{ margin-top:14px; }
.tile .btn-primary, .tile .btn-outline{ position:relative; z-index:3; min-width:220px; }
.tile-tall .display{ text-shadow:0 3px 14px rgba(0,0,0,.8); }
.tile-art-d .display.sm{ font-size:17px; max-width:24ch; margin:8px auto 0; line-height:1.15; }

/* claim tile: copy sits dead centre, button pinned to the bottom */
.tile-art-d{ justify-content:center; position:relative; }
.tile-art-d .tile-copy.top{ margin-top:0; }
.tile-art-d .btn-outline.is-soon{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); }

.tile-art-a::before{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(0,145,99,.15) 0 3px, transparent 3px 22px),
    radial-gradient(circle at 18% 50%, rgba(28,60,54,.9), transparent 56%),
    radial-gradient(circle at 82% 50%, rgba(0,145,99,.38), transparent 56%),
    var(--bg-2);
}
/* Oversized ghosted type behind the copy, the way Top Shot layers a giant
   wordmark into its tiles. Brand greens only. */
.tile-ghost{ display:none;
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  line-height:.8; letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.05);
}
.tile-art-b .tile-ghost{ display:none;
  font-size:230px; left:-24px; top:50%; transform:translateY(-50%);
  -webkit-text-stroke-width:3px;
}
.tile-art-c .tile-ghost{ display:none;
  font-size:300px; right:-36px; bottom:-70px;
  -webkit-text-stroke-color:rgba(18,196,125,.09);
}
.tile-art-d .tile-ghost{ display:none;
  font-size:190px; left:50%; top:50%; transform:translate(-50%,-50%);
  -webkit-text-stroke-color:rgba(18,196,125,.08);
}

/* supplied artwork at full strength. The scrim sits in the same layer so the
   grain overlay on ::after never dims the image. */
.tile-art-b::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 86% at 50% 46%, rgba(4,7,6,.88), rgba(4,7,6,.66) 62%, rgba(4,7,6,.58)),
    url('art/tile-tiers.jpg') center/cover no-repeat,
    var(--bg-2);
}
.tile-art-b::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:url('art/grain.png'); background-size:256px 256px;
  opacity:.13; mix-blend-mode:overlay; pointer-events:none;
}

/* launch tile: supplied artwork, scrim in the same layer, grain on top */
.tile-art-c::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,6,.88) 0 34%, rgba(4,7,6,.72) 60%, rgba(4,7,6,.85)),
    url('art/tile-launch.jpg') center/cover no-repeat,
    var(--bg-2);
}
.tile-art-c::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:url('art/grain.png'); background-size:256px 256px;
  opacity:.13; mix-blend-mode:overlay; pointer-events:none;
}

/* claim tile: supplied artwork, scrim in the same layer, grain on top */
.tile-art-d::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,6,.94) 0 34%, rgba(4,7,6,.86) 60%, rgba(4,7,6,.93)),
    url('art/tile-call.jpg') center/cover no-repeat,
    var(--bg-2);
}
.tile-art-d::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:url('art/grain.png'); background-size:256px 256px;
  opacity:.13; mix-blend-mode:overlay; pointer-events:none;
}

/* locked teaser panel: the shape of a card and nothing else. Kept faint. */
.panel.is-locked{ border-style:dashed; opacity:.55; }
.panel.is-locked .panel-head{ min-height:47px; }
.panel.is-locked{ overflow:hidden; }
.panel.is-locked .mini-art{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(4,7,6,.93), rgba(4,7,6,.88) 60%, rgba(4,7,6,.94)),
    url('art/tile-call.jpg') center/cover no-repeat,
    var(--bg-2);
}
.panel.is-locked .mini-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url('art/grain.png'); background-size:256px 256px;
  opacity:.13; mix-blend-mode:overlay;
}
.panel.is-locked .mini-blank{ position:relative; z-index:2; }
/* zoom (unlike transform) shrinks the layout box too, so the card keeps its
   proportions and still sits inside the column */
.mini-blank{ zoom:.42; box-shadow:0 8px 20px rgba(0,0,0,.6); }

/* ==========================================================================
   PAGE HEADERS
   ========================================================================== */
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap; margin-bottom:28px;
}
.page-head h1{ font-size:48px; }
.page-sub{ margin-top:10px; font-size:14.5px; color:var(--dim); max-width:66ch; }
.page-head .stats{ margin-top:0; min-width:440px; background:var(--surface); }

/* ==========================================================================
   COLLECTION
   ========================================================================== */
.toolbar{ display:flex; gap:12px; flex-wrap:wrap; }
.search{ flex:1; min-width:290px; position:relative; display:flex; align-items:center; }
.search svg{
  position:absolute; left:14px; width:17px; height:17px;
  fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round;
}
.search input{
  width:100%; height:44px; padding:0 16px 0 40px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text);
  font-size:14px; outline:none; transition:border-color .15s;
}
.search input::placeholder{ color:var(--faint); }
.search input:focus{ border-color:var(--green); }

.select{
  height:44px; padding:0 36px 0 14px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text);
  font-size:14px; cursor:pointer; outline:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396A19E' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.select:focus{ border-color:var(--green); }

.chip-rows{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.chip-row{ display:flex; align-items:center; gap:14px; }
.chip-label{
  flex:0 0 40px; font-size:10px; font-weight:800; letter-spacing:.11em;
  color:var(--faint); text-transform:uppercase;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:31px; padding:0 13px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--surface);
  font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--dim);
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover{ color:#fff; }
.chip.on{ color:#fff; border-color:var(--green); background:rgba(0,145,99,.16); }
.chip-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }

.result-count{ margin:24px 0 14px; font-size:12.5px; color:var(--faint); font-weight:600; }

.coll-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(216px,1fr)); }
.ccard{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .18s, transform .18s;
}
.ccard:hover{ border-color:rgba(0,145,99,.5); transform:translateY(-2px); }
.ccard-art{
  height:250px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,145,99,.14), transparent 68%), var(--bg-2);
}
.ccard-art img{ height:224px; width:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }

.ccard-foot{
  padding:11px 12px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px;
}
.ccard-price{ font-size:14px; font-weight:800; white-space:nowrap; margin-right:auto; }
.ccard-price.muted{ color:var(--faint); font-size:12.5px; font-weight:700; }

/* solscan owner link, white icon, sits beside the buy button */
.solscan{
  flex:0 0 auto; width:34px; height:34px; border-radius:7px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); color:#fff;
  transition:border-color .15s, background .15s;
}
.solscan:hover{ border-color:var(--green); background:rgba(0,145,99,.14); }
.solscan svg{ width:16px; height:16px; }
/* same slot, but the owner is not known yet, so there is nowhere to send them */
.solscan.is-off{ color:var(--dim); border-color:var(--line); cursor:default; }
.solscan.is-off:hover{ border-color:var(--line); background:none; }

/* ==========================================================================
   STANDINGS
   ========================================================================== */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tab{
  height:40px; padding:0 18px; font-size:14.5px; font-weight:700; color:var(--dim);
  border-bottom:3px solid transparent; transition:color .15s;
}
.tab:hover{ color:var(--text); }
.tab.on{ color:#fff; border-bottom-color:var(--green); }

.board-head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:16px; flex-wrap:wrap;
}
.board-note{ font-size:12.5px; color:var(--faint); font-weight:600; }

.board{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.board-empty{ padding:38px 22px; text-align:center; color:var(--dim); font-size:14.5px; }
/* a tracked trader who has not earned a card yet */
.btier.is-none{ color:var(--faint); background:none; border-color:transparent; }
.bcards .muted{ color:var(--faint); }
.brow{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:44px 40px minmax(150px,1.5fr) 78px 90px 88px minmax(110px,auto);
  padding:11px 18px; border-top:1px solid var(--line);
  transition:background .15s;
}
.brow:first-child{ border-top:none; }
.brow:hover{ background:var(--surface-2); }

/* every rank the same weight and colour, no medal tinting */
.brank{
  font-family:var(--display); font-style:italic; font-size:19px;
  color:var(--dim); text-align:center;
}

.bpfp{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--surface-2); }
.bcard{ width:32px; height:45px; border-radius:3px; object-fit:cover; object-position:top center; }
.brow-card{ grid-template-columns:44px 32px minmax(150px,1.5fr) 78px 90px 88px minmax(110px,auto); }

/* pfp and name together open the trader's FOMO profile. The row itself is no
   longer a link, so these carry the affordance. */
.btrader{ display:contents; color:inherit; }
.btrader:hover .bname b{ text-decoration:underline; }
.bcards a{ color:inherit; }
.bcards a:hover{ text-decoration:underline; }

.bname{ min-width:0; display:flex; flex-direction:column; }
.bname b{ font-size:14.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bname i{ font-style:normal; font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.bcoins{ display:flex; }
.bcoins img{
  width:22px; height:22px; border-radius:50%; object-fit:cover;
  border:2px solid var(--surface); margin-left:-7px; background:var(--surface-2);
}
.bcoins img:first-child{ margin-left:0; }

.bcards{ font-size:12.5px; color:var(--dim); white-space:nowrap; }
.bcards b{ color:#fff; font-weight:800; }
.btier{ font-size:11px; font-weight:800; letter-spacing:.07em; }
.bpnl{ font-size:15px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ==========================================================================
   FOMO ALERT FEED
   ========================================================================== */
.feed{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.fitem{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:52px 1fr auto auto;
  padding:14px 18px; border-top:1px solid var(--line);
  transition:background .15s;
}
.fitem:first-child{ border-top:none; }
.fitem:hover{ background:var(--surface-2); }

.favatars{ position:relative; height:38px; }
.favatars img{
  position:absolute; width:24px; height:24px; border-radius:50%;
  object-fit:cover; border:2px solid var(--surface); background:var(--surface-2);
}
.favatars img:nth-child(1){ left:0;  top:0; }
.favatars img:nth-child(2){ left:15px; top:0; }
.favatars img:nth-child(3){ left:7px;  top:15px; }

.fline1{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fcount{ font-size:14.5px; font-weight:800; }
.fpill{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; border-radius:4px; padding:3px 8px;
}
.fpill.buy{ color:var(--green-br); background:rgba(0,145,99,.2); }
.fpill.sell{ color:var(--red); background:rgba(232,69,92,.16); }
.famt{ font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; }

.fline2{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:14px; }
.ftk{ font-weight:800; }
.fmc{ color:var(--faint); font-size:13px; }
.fmc b{ color:var(--dim); font-weight:700; }

.fthesis{
  margin-top:6px; font-size:13px; color:var(--dim); font-style:italic;
  max-width:64ch;
}
.fago{ font-size:12px; color:var(--faint); white-space:nowrap; }
.fstate{ text-align:right; white-space:nowrap; }
.fminted{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--green-br);
  border:1px solid rgba(18,196,125,.35); background:rgba(0,145,99,.14);
  border-radius:5px; padding:5px 9px;
}
.fminted b{ font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:.03em; }
.fwatch{
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--faint);
  border:1px solid var(--line-2); border-radius:5px; padding:5px 9px;
}

/* ==========================================================================
   TIERS AND BOT
   ========================================================================== */
.pipeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pstep{
  position:relative; padding:22px 20px 20px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.pnum{
  font-family:var(--display); font-style:italic; font-size:26px;
  color:var(--green); display:block; margin-bottom:8px;
}
.pstep h3{ font-size:16.5px; font-weight:800; letter-spacing:-.01em; }
.pstep p{ margin-top:8px; font-size:13.5px; color:var(--dim); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.split-card{
  display:flex; gap:20px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:22px;
}
.split-card img{ flex:0 0 auto; width:124px; border-radius:5px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
.split-card h3{ font-size:19px; font-weight:800; }
.split-kicker{
  margin-top:5px; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  color:var(--green-br); text-transform:uppercase;
}
.split-card p:last-child{ margin-top:10px; font-size:13.5px; color:var(--dim); }

.ladder{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.lrow{
  display:grid; align-items:center; gap:18px;
  grid-template-columns:16px 118px 74px 82px 1fr;
  padding:13px 20px; border-top:1px solid var(--line);
}
.lrow:first-child{ border-top:none; }
.lrow.head{
  background:var(--bg-2);
  font-size:9.5px; font-weight:800; letter-spacing:.11em; color:var(--faint);
  text-transform:uppercase;
}
.ldot{ width:12px; height:12px; border-radius:50%; background:currentColor; }
.lname{ font-size:13.5px; font-weight:800; letter-spacing:.06em; }
.lcount{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.ltype{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--dim); }
.lnote{ font-size:13px; color:var(--dim); }

/* ---- coming soon flag ---- */
.tile-flag{
  display:inline-block; margin-bottom:12px;
  font-size:10px; font-weight:800; letter-spacing:.14em;
  color:var(--green-br); background:rgba(0,145,99,.16);
  border:1px solid rgba(18,196,125,.35); border-radius:5px; padding:5px 10px;
}

/* ---- launch tile on the home page ---- */
.tile-launch{ overflow:hidden; text-align:center; }
.tile-launch .display.md{ font-size:38px; }
/* the blank example card, scaled down to sit inside the tile */
.tile-card{
  position:relative; z-index:3;
  height:196px; margin:34px 0 0;   /* height matches the scaled card, so gaps stay even */
  display:grid; place-items:start center;
  transition:transform .25s ease;
}
/* three blank cards, overlapped and fanned */
.blank-fan{ display:flex; align-items:flex-start; justify-content:center; }
.blank-fan .blank-card{ margin-left:-124px; }
.blank-fan .blank-card:first-child{ margin-left:0; transform:rotate(-9deg) translateY(10px); }
.blank-fan .blank-card:nth-child(2){ z-index:3; }
.blank-fan .blank-card:nth-child(3){ transform:rotate(9deg) translateY(10px); }
.tile-card .blank-fan{ transform:scale(.42); transform-origin:top center; }
.tile-launch:hover .tile-card{ transform:translateY(-8px); }
.tile-launch .btn-primary{ margin-top:34px; }

/* ---- locked / sealed blocks ---- */
.split-card.is-locked{ border-style:dashed; }
.locked-art{
  flex:0 0 auto; width:124px; height:174px; border-radius:6px;
  display:grid; place-items:center;
  border:1px dashed var(--line-2);
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 14px),
    var(--bg-2);
}
.locked-mark{
  font-family:var(--display); font-style:italic; font-size:44px; color:var(--faint);
}

.locked-panel{
  position:relative; overflow:hidden;
  border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--surface); padding:22px;
}
.locked-rows{ display:flex; flex-direction:column; gap:14px; filter:blur(5px); opacity:.5; }
.locked-row{ height:16px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 62%, transparent); }
.locked-row:nth-child(2){ width:88%; }
.locked-row:nth-child(3){ width:74%; }
.locked-row:nth-child(4){ width:81%; }
.locked-copy{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; text-align:center;
  background:radial-gradient(ellipse at 50% 50%, rgba(12,18,17,.9), rgba(12,18,17,.72));
}
.locked-copy p{ font-size:13.5px; color:var(--dim); max-width:52ch; }

/* ==========================================================================
   LAUNCH A COLLECTION
   ========================================================================== */
.launch-head{ text-align:center; max-width:760px; margin:0 auto 46px; }
.launch-head h1{ font-size:46px; }
.launch-kicker{
  margin-top:6px;
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-size:24px; color:var(--green-br);
}
/* left aligned text in a centred block, so its left edge is a real edge the
   bullets below can line up against */
.launch-head .page-sub{ margin:16px auto 0; max-width:620px; text-align:left; }

/* ---- the empty example card ---- */
.blank-wrap{ margin:44px 0 52px; text-align:center; }
.blank-card{
  width:252px; margin:0 auto;
  background:#0F1513; border:5px solid rgba(255,255,255,.82);
  border-radius:14px; overflow:hidden;
  filter:grayscale(1);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.blank-photo{
  position:relative; height:206px;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#2A2F2E,#171C1B);
}
.blank-avatar{ width:104px; height:104px; fill:rgba(255,255,255,.26); }
.blank-logo{ position:absolute; top:9px; left:9px; height:26px; width:auto; opacity:.5; }
.blank-num{
  position:absolute; top:8px; right:11px;
  font-family:var(--display); font-style:italic; font-size:21px;
  color:rgba(255,255,255,.34); letter-spacing:.04em;
}
.blank-band{
  padding:13px 14px 15px;
  background:linear-gradient(120deg,#3A3F3D,#5C6462 46%,#3A3F3D);
}
.blank-handle{
  display:flex; align-items:center; gap:5px;
  font-size:19px; font-weight:800; color:rgba(255,255,255,.5);
}
.blank-fill{
  display:inline-block; height:13px; border-radius:4px;
  background:rgba(255,255,255,.26);
}
.w-lg{ width:104px; } .w-sm{ width:52px; height:10px; }
.blank-pill{
  margin-top:11px; height:42px; padding:0 14px; border-radius:99px;
  background:#1E2422; box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:space-between;
}
.blank-q{
  font-family:var(--display); font-style:italic; font-size:25px;
  color:rgba(255,255,255,.34);
}
.blank-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:linear-gradient(120deg,#3A3F3D,#5C6462 46%,#3A3F3D);
  border-top:2px solid rgba(255,255,255,.42);
}
.blank-stats div{ padding:8px 0 11px; text-align:center; }
.blank-stats div + div{ border-left:2px solid rgba(255,255,255,.42); }
.blank-stats .k{
  display:block; font-size:7.5px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.blank-stats .v{ display:block; margin-top:3px; font-size:15px; font-weight:800; color:rgba(255,255,255,.55); }

.blank-cap{ margin-top:20px; font-size:13.5px; color:var(--faint); }

.launch{ display:block; }
.form, .form-done{ margin:0 auto; }

/* The four points share the paragraph's 620px block, so the dots sit on the
   same left edge as the copy above rather than floating in from max-content. */
.perks{
  list-style:none; margin:24px auto 0; width:100%; max-width:620px;
  text-align:left;
}
.perks li{
  position:relative; padding-left:20px; margin-bottom:13px;
  font-size:13.5px; color:var(--dim); line-height:1.55;
}
.perks li:last-child{ margin-bottom:0; }
.perks li::before{
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}

.form{ max-width:620px; }
.field{ margin-bottom:22px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim);
}
.field input, .field textarea{
  width:100%; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--text); font-size:14.5px;
  font-family:inherit; outline:none; transition:border-color .15s, background .15s;
}
.field input{ height:46px; padding:0 14px; }
.field textarea{ padding:13px 14px; resize:vertical; line-height:1.55; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field textarea:focus{ border-color:var(--green); background:var(--surface-2); }
.hint{ margin-top:7px; font-size:12px; color:var(--faint); }

.form-foot{ display:flex; align-items:center; gap:16px; margin-top:6px; }
.form-error{
  margin-top:16px; font-size:13.5px; color:var(--red);
  border:1px solid rgba(232,69,92,.35); background:rgba(232,69,92,.08);
  border-radius:8px; padding:11px 14px;
}
.form-error[hidden]{ display:none; }

.form-done{
  max-width:620px; margin:0 auto; padding:64px 0 40px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.form-done p{ margin:14px 0 26px; font-size:15px; color:var(--dim); }
.form-done[hidden]{ display:none; }



.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.wcard{ padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.wcard h3{ font-size:15.5px; font-weight:800; }
.wcard p{ margin-top:8px; font-size:13.5px; color:var(--dim); }

.guardrails{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.grail-card{ padding:20px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.grail-card h3{ font-size:15px; font-weight:800; margin-bottom:10px; }
.grail-card ul{ margin-left:17px; }
.grail-card li{ font-size:13.5px; color:var(--dim); margin-bottom:6px; }
.grail-card code{
  font-family:var(--mono); font-size:12px; color:var(--text);
  background:rgba(255,255,255,.07); border-radius:4px; padding:1px 5px;
}

.fineprint{ margin-top:30px; font-size:13px; color:var(--faint); max-width:70ch; }
.fineprint strong{ color:var(--dim); }

/* ==========================================================================
   ROSTER
   ========================================================================== */
.roster{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); }
.rost{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:16px 17px 14px;
  transition:border-color .18s, transform .18s;
}
.rost:hover{ border-color:rgba(0,145,99,.5); transform:translateY(-2px); }
.rost.is-quiet{ opacity:.62; }

.rost-top{ display:flex; align-items:center; gap:12px; }
.rost-pfp{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; background:var(--surface-2);
  border:1px solid rgba(255,255,255,.12);
}
.mono-lg{
  display:grid; place-items:center;
  font-size:14px; font-weight:800; color:var(--dim);
  background:linear-gradient(140deg,var(--green-deep),#0E1A17);
}
.rost-id{ min-width:0; display:flex; flex-direction:column; }
.rost-id b{ font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rost-id i{ font-style:normal; font-size:12.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rost-golds{ margin-left:auto; font-size:9px; letter-spacing:2px; color:#E8C25C; }

.rost-stats{
  margin-top:15px; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.rost-stats div{ padding:11px 0; }
.rost-stats div + div{ border-left:1px solid var(--line); padding-left:11px; }
.rost-stats .k{
  display:block; font-size:9px; font-weight:800; letter-spacing:.1em;
  color:var(--faint); text-transform:uppercase;
}
.rost-stats .v{ display:block; margin-top:4px; font-size:15px; font-weight:800; }

.rost-foot{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rost-coins{ display:flex; }
.rost-coins img{
  width:20px; height:20px; border-radius:50%; object-fit:cover;
  border:2px solid var(--surface); margin-left:-6px; background:var(--surface-2);
}
.rost-coins img:first-child{ margin-left:0; }
.rost-link{ font-size:12.5px; font-weight:700; color:var(--green-br); white-space:nowrap; }
.rost-link:hover{ text-decoration:underline; }
.rost-wait{ font-size:12px; color:var(--faint); white-space:nowrap; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; }
.about-lede{ font-size:16.5px; color:var(--text); line-height:1.6; }
.about-body{ margin-top:18px; font-size:14.5px; color:var(--dim); }
.pull{
  margin:26px 0; padding:18px 22px;
  border-left:3px solid var(--green);
  background:rgba(0,145,99,.07); border-radius:0 8px 8px 0;
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-size:21px; line-height:1.12; color:#fff;
}
.facts{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:22px 24px; }
.facts h3{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:16px;
}
.facts dt{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green-br); margin-top:16px;
}
.facts dt:first-of-type{ margin-top:0; }
.facts dd{ font-size:13.5px; color:var(--dim); margin-top:5px; }
.facts a{ color:var(--text); border-bottom:1px solid var(--line-2); }
.facts a:hover{ color:var(--green-br); border-color:var(--green); }
.facts .addr{ font-family:var(--mono); font-size:12.5px; }

.cta-strip{
  margin-top:56px; padding:28px 30px;
  border:1px solid rgba(0,145,99,.35); border-radius:var(--r);
  background:linear-gradient(100deg, rgba(0,145,99,.16), rgba(28,60,54,.3)), var(--surface);
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.cta-strip p{ margin-top:7px; font-size:14px; color:var(--dim); }
.cta-actions{ display:flex; gap:11px; }

/* ==========================================================================
   LEGAL
   ========================================================================== */
.legal{ display:grid; grid-template-columns:196px 1fr; gap:52px; align-items:start; }
.legal-nav{ position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; }
.legal-nav a{
  padding:8px 12px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--dim);
  border-left:2px solid transparent; transition:color .15s, background .15s;
}
.legal-nav a:hover{ color:#fff; background:var(--surface); }

.prose{ max-width:72ch; }
.prose h2{
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-size:28px; font-weight:400; margin:52px 0 4px; scroll-margin-top:96px;
}
.prose h2:first-child{ margin-top:0; }
.prose .updated{ font-size:12px; color:var(--faint); margin-bottom:18px; }
.prose h3{ font-size:15px; font-weight:800; margin:26px 0 7px; }
.prose p{ font-size:14.5px; color:var(--dim); margin-bottom:12px; }
.prose ul{ margin:0 0 14px 18px; }
.prose li{ font-size:14.5px; color:var(--dim); margin-bottom:7px; }
.prose strong{ color:var(--text); font-weight:700; }
.prose .callout{
  border:1px solid rgba(0,145,99,.35); background:rgba(0,145,99,.08);
  border-radius:8px; padding:16px 18px; margin:0 0 28px;
}
.prose .callout p{ margin:0; color:var(--text); font-size:14px; }

/* follow strip, sits above the footer */
.follow{
  position:relative; overflow:hidden;
  margin-top:22px; padding:30px 34px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.follow::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,7,6,.84) 0 40%, rgba(4,7,6,.66) 70%, rgba(4,7,6,.58)),
    url('art/tile-follow.jpg') left center/cover no-repeat,
    var(--bg-2);
}
.follow::after{
  content:''; position:absolute; inset:0;
  background-image:url('art/grain.png'); background-size:256px 256px;
  opacity:.13; mix-blend-mode:overlay; pointer-events:none;
}
/* marketplace strip: same shell as .follow, its own art, faded the same way */
.strip-market{ margin-top:18px; }
/* picked out of the strip's own art, so the link belongs to this block rather
   than reading as the site's green */
.strip-market .me-link{
  color:#FF2D87; font-weight:800; white-space:nowrap;
  border-bottom:1px solid rgba(255,45,135,.45); transition:color .15s, border-color .15s;
}
.strip-market .me-link:hover{ color:#FF5CA3; border-bottom-color:rgba(255,92,163,.8); }
.strip-market::before{
  background:
    linear-gradient(90deg, rgba(4,7,6,.86) 0 42%, rgba(4,7,6,.7) 72%, rgba(4,7,6,.62)),
    url('art/tile-market.jpg') left center/cover no-repeat,
    var(--bg-2);
}
.follow > *{ position:relative; z-index:2; }
.follow h3{ line-height:1; }
.follow p{ margin-top:9px; font-size:14px; color:var(--dim); }
.follow .btn-primary{ gap:9px; }
.x-glyph{ font-size:16px; line-height:1; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); margin-top:auto; }
.foot-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:22px;
}
.foot-copy{ font-size:12.5px; color:var(--faint); }
.foot-links{ display:flex; gap:22px; margin-left:auto; }
.foot-links a{ font-size:12.5px; color:var(--faint); transition:color .15s; }
.foot-links a:hover{ color:var(--green-br); }

.empty{ padding:64px 0; text-align:center; color:var(--faint); font-size:14px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .drops{ grid-template-columns:1fr; }
  .pipeline{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .showcase{ aspect-ratio:4 / 3; min-height:0; }
  /* on narrow screens fit the crew by width so nobody gets cropped out */
  .showcase-crew{ height:auto; width:106%; }
  .split, .tiles, .pipeline, .why, .guardrails{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; gap:26px; }
  .perks{ width:auto; }
  .field-row{ grid-template-columns:1fr; }
  .cta-strip{ flex-direction:column; align-items:flex-start; }
  .tile-launch .display.md{ font-size:30px; }
  .mini{ flex-direction:column; }
  .mini-art{ flex:0 0 auto; border-right:none; border-bottom:1px solid var(--line); }
  .page-head .stats{ min-width:0; width:100%; grid-template-columns:1fr 1fr; }
  .page-head .stat:nth-child(3){ border-left:none; }
  .page-head .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .legal{ grid-template-columns:1fr; gap:26px; }
  .legal-nav{ position:static; flex-direction:row; flex-wrap:wrap; }
  .brow, .brow-card{ grid-template-columns:34px 36px 1fr auto; gap:12px; }
  .bcoins, .bcards, .btier{ display:none; }
  .fitem{ grid-template-columns:52px 1fr auto; }
  .fago{ display:none; }
  .lrow{ grid-template-columns:14px 1fr 60px; }
  .ltype, .lnote{ display:none; }
  .display.md{ font-size:38px; }
  .page-head h1{ font-size:38px; }
  .grails h2{ font-size:28px; }
  .rail-prev{ left:2px; } .rail-next{ right:2px; }
}

/* faint variant of the coming-soon flag, for the locked teaser */
.tile-flag.is-faint{
  color:var(--faint);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:0;
}

/* not live yet: reads as inactive rather than a green call to action */
/* not live yet: a solid grey, plainly inactive button */
.btn-outline.is-soon{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--faint); cursor:not-allowed;
  font-size:13.5px; font-weight:600;
}
.btn-outline.is-soon:hover{
  border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.06);
}

/* Register Interest sits in brand red so it reads apart from the green CTAs */
.btn-primary.red{
  background:linear-gradient(180deg,#E8455C,#B32538);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.5);
}

/* ==========================================================================
   DOCS
   Sidebar on the left, one section at a time on the right. The sidebar sticks
   so the contents stay reachable however long a section runs.
   ========================================================================== */
.docs-wrap{ padding-top:30px; }
.docs{ display:grid; grid-template-columns:238px minmax(0,1fr); gap:46px; align-items:start; }

.docs-nav{ position:sticky; top:88px; }
.docs-nav-head{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding:0 12px 10px;
}
.docs-nav nav{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
.docs-nav a{
  padding:7px 12px; font-size:13.5px; color:var(--dim); cursor:pointer;
  border-left:2px solid transparent; margin-left:-1px; transition:color .14s, border-color .14s;
}
.docs-nav a:hover{ color:var(--text); }
.docs-nav a.on{ color:#fff; font-weight:650; border-left-color:var(--green); }

.docs-body{ min-width:0; max-width:760px; }
.docs-intro{ margin-bottom:26px; }

/* the section itself, reusing the prose rhythm from the legal page */
.doc-page h2{
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-size:31px; line-height:1; margin:0 0 18px; color:#fff;
}
.doc-page h3{ font-size:16px; font-weight:750; margin:26px 0 8px; }
.doc-page p{ color:var(--dim); font-size:15px; line-height:1.62; margin-bottom:14px; }
.doc-page strong{ color:var(--text); font-weight:650; }
.doc-page ul, .doc-page ol{ margin:0 0 14px 18px; }
.doc-page li{ color:var(--dim); font-size:15px; line-height:1.62; margin-bottom:6px; }
.doc-page a{ color:var(--green-br); }
.doc-page a:hover{ text-decoration:underline; }

.doc-lead{ font-size:17px !important; color:var(--text) !important; line-height:1.55 !important; }

.callout, .doc-note{
  border-left:2px solid var(--green); background:var(--surface);
  padding:14px 18px; border-radius:0 8px 8px 0; margin:20px 0;
}
.callout p, .doc-note p{ margin:0; }

.doc-quote{
  border-left:2px solid var(--line-2); padding:4px 0 4px 18px; margin:20px 0;
  font-style:italic; color:var(--dim);
}
.doc-quote p{ margin:0; }

.doc-anchor{
  display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;
}

.doc-table{ width:100%; border-collapse:collapse; margin:18px 0 22px; font-size:14px; }
.doc-table th{
  text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); font-weight:800; padding:0 14px 9px 0; border-bottom:1px solid var(--line);
}
.doc-table td{ padding:11px 14px 11px 0; border-bottom:1px solid var(--line); color:var(--dim); vertical-align:top; }
.doc-table td:first-child{ color:var(--text); font-weight:600; }
.doc-table tr:last-child td{ border-bottom:none; }

/* pager */
.doc-pager{ display:flex; gap:14px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); }
.doc-pager a{
  flex:1; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); padding:13px 16px;
  transition:border-color .15s, background .15s;
}
.doc-pager a:hover{ border-color:rgba(0,145,99,.55); background:var(--surface); }
.doc-pager span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.doc-pager b{ font-size:14.5px; font-weight:650; color:var(--text); }
.doc-next{ text-align:right; align-items:flex-end; }

@media (max-width:880px){
  .docs{ grid-template-columns:1fr; gap:26px; }
  .docs-nav{ position:static; }
  .docs-nav nav{ flex-direction:row; flex-wrap:wrap; border-left:none; gap:2px; }
  .docs-nav a{ border-left:none; border-bottom:2px solid transparent; margin-left:0; }
  .docs-nav a.on{ border-bottom-color:var(--green); }
}