/* ==================================================================
   GAS, Robinhood Chain memecoin
   Aesthetic: trading terminal. Pure black, Robinhood chartreuse,
   hazard orange. Anton for the shouting, Martian Mono for anything
   that reads as data.
   ================================================================== */

/* -------------------------------- tokens ------------------------- */
/* Palette pulled from robinhood.com's live computed styles, not inferred:
   brand green #CCFF00 on pure #000000. The accent is rationed on purpose,
   it appears on CTAs, the live dot and the tape bar, and nowhere else at
   full strength. */
:root{
  --rh:        #CCFF00;
  --rh-hi:     #E4FF66;
  --rh-dim:    #7FA000;
  --rh-ghost:  rgba(204,255,0,.12);
  --on-rh:     #000000;   /* text on a green fill, green is too light for white */

  --flame:     #FF4A1C;

  --ink:       #000000;
  --ink-2:     #0A0A0A;
  --ink-3:     #121212;
  --line:      #1F1F1F;
  --line-hi:   #2E2E2E;

  --bone:      #F5F5F3;
  --dim:       #8A8A86;
  --dimmer:    #5A5A57;

  --f-display: 'Anton', 'Impact', sans-serif;
  --f-body:    'Archivo', 'Segoe UI', sans-serif;
  --f-mono:    'Martian Mono', ui-monospace, 'Menlo', monospace;

  --gut:       clamp(1.25rem, 4vw, 4.5rem);
  --maxw:      1520px;
  --ease:      cubic-bezier(.2,.7,.25,1);
}

/* -------------------------------- reset -------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--rh); color:#000; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--line-hi); border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--rh-dim); }

:focus-visible{ outline:2px solid var(--rh); outline-offset:3px; }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--rh); color:#000; padding:.6rem 1rem;
  font:600 .8rem/1 var(--f-mono); text-decoration:none;
}
.skip:focus{ top:1rem; }

/* --------------------------- launch states ----------------------- */
body[data-launched="false"] .only-post{ display:none !important; }
body[data-launched="true"]  .only-pre { display:none !important; }
[data-hide-if-empty]{ display:none; }

/* ------------------------------ atmosphere ----------------------- */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:80; }

.fx--grain{
  z-index:90; opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.fx--scan{
  opacity:.5;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 2px,
    rgba(0,0,0,.35) 2px 3px
  );
}
.fx--vignette{
  background:radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.75) 100%);
}

/* ------------------------------- tape ---------------------------- */
.tape{
  position:relative; z-index:60;
  border-bottom:1px solid var(--line);
  background:var(--rh);
  color:var(--on-rh);
  overflow:hidden;
  height:34px;
  display:flex; align-items:center;
}
.tape__rail{
  display:flex; gap:0; white-space:nowrap;
  animation:slide 42s linear infinite;
}
.tape__rail span{
  font:700 .68rem/1 var(--f-mono);
  letter-spacing:.14em;
  padding:0 1.5rem;
  position:relative;
}
.tape__rail span::after{
  content:'\25C6'; position:absolute; right:-.35rem; top:50%;
  transform:translateY(-50%); font-size:.5rem; opacity:.55;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* -------------------------------- nav ---------------------------- */
.nav{
  position:sticky; top:0; z-index:70;
  padding-block:.85rem;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
/* The bar bleeds full width, the contents do not. Without this the logo
   sits at the gutter while the headline sits at the grid edge, and the
   mismatch reads as the page being off-centre. */
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
}
.nav.is-stuck{ border-color:var(--rh-dim); }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
/* The lockup is roughly 2:1 and carries fine blackletter detail, so it is
   sized on height and set a little larger than a typical nav mark. Below
   about 30px the letterforms close up and it reads as a smudge. */
.brand__mark{ height:38px; width:auto; flex:none; }
.brand__mark--lg{ height:64px; }
.brand__word{
  font-family:var(--f-display);
  font-size:1.35rem; letter-spacing:.04em;
  line-height:1;
}
.brand:hover .brand__mark{ animation:jolt .4s var(--ease); }
@keyframes jolt{ 50%{ transform:translateY(-3px) rotate(-4deg); } }

.nav__links{ display:flex; gap:1.75rem; }
.nav__links a{
  font:500 .78rem/1 var(--f-mono);
  letter-spacing:.06em;
  text-decoration:none; color:var(--dim);
  position:relative; padding-block:.4rem;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--rh);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); }

/* ------------------------------ buttons -------------------------- */
.btn{
  --bg:transparent; --fg:var(--bone); --bd:var(--line-hi);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.1rem;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font:600 .75rem/1 var(--f-mono);
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn--solid{ --bg:var(--rh); --fg:var(--on-rh); --bd:var(--rh); }
.btn--solid:hover{ --bg:var(--rh-hi); --bd:var(--rh-hi); box-shadow:0 0 0 1px var(--rh), 0 8px 30px -10px var(--rh); }
.btn--line:hover{ --bd:var(--rh); --fg:var(--rh); }
.btn--ghost{ --bd:var(--line-hi); --fg:var(--rh); }
.btn--ghost:hover{ --bd:var(--rh); }
.btn--lg{ padding:.95rem 1.5rem; font-size:.8rem; }
.btn:active{ transform:translateY(1px); }

/* ------------------------------- hero ---------------------------- */
/* Full-bleed plate with the copy layered on top. One video, message on
   screen immediately, no scroll required to reach the buy button. */
.hero{
  position:relative;
  display:flex; align-items:center;
  min-height:min(94vh,940px);
  padding:clamp(3rem,7vw,5rem) 0 clamp(3rem,6vw,5rem);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
}

.hero__bg{
  position:absolute; z-index:0; inset:0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      rgba(204,255,0,.035) 11px 12px),
    var(--ink-2);
}
.hero__bg video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:0; transition:opacity 1s var(--ease);
}
.hero__bg.is-playing video{ opacity:1; }
.hero__bg::after{
  content:attr(data-ph);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:700 clamp(1rem,3vw,2rem)/1 var(--f-mono);
  letter-spacing:.36em;
  color:rgba(204,255,0,.16);
}
.hero__bg.is-playing::after,
.hero__bg.is-playing .media__path{ display:none; }

/* Heavy on the left where the copy sits, fading to solid black at the
   bottom so the section hands off without a seam. Type over video needs
   more scrim than looks necessary on a still frame. */
.hero__scrim{
  position:absolute; z-index:1; inset:0;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.93) 0%,
      rgba(0,0,0,.88) 34%,
      rgba(0,0,0,.62) 62%,
      rgba(0,0,0,.34) 100%),
    linear-gradient(to top,
      var(--ink) 0%,
      rgba(0,0,0,.5) 20%,
      transparent 52%);
}

.hero__stage{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
}
.hero__copy{ max-width:54rem; }

@media (max-width:560px){
  .hero{ min-height:auto; }
  .hero__scrim{
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,.72) 0%, rgba(0,0,0,.86) 42%, var(--ink) 92%);
  }
}

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font:600 .7rem/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
  margin-bottom:1.4rem;
}
.eyebrow .sep, .kicker .sep{ color:var(--dimmer); }
.dot{
  width:7px; height:7px; background:var(--rh); border-radius:50%;
  box-shadow:0 0 0 0 var(--rh);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(204,255,0,.6); }
  70%{ box-shadow:0 0 0 9px rgba(204,255,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(204,255,0,0); }
}

/* The wordmark and the hand sit on one baseline. The hand is sized in `em`
   off the headline so it tracks the clamp instead of needing its own. */
/* The clamp lives on the title so the wordmark and the hand share one
   font-size context. Sizing the hand in `em` off the h1 default instead
   leaves it at roughly a third of the letters. */
.hero__title{
  /* line-height .82 is tighter than the font's own metrics, so the baseline
     ends up BELOW the box bottom; add the offset shadow and the ink overhangs
     by about .18em. Padding makes the box contain its own ink, so the line
     below can never collide no matter the font size. Measured, not guessed:
     rasterised ink descent .069em + shadow .11em. */
  margin:0 0 1.25rem; line-height:.82;
  padding-bottom:.24em;
  font-size:clamp(5.5rem,18vw,15rem);
}
.hero__word{
  display:block;
  font-family:var(--f-display);
  font-size:1em;   /* the clamp now lives on .hero__title */
  letter-spacing:-.02em;
  color:var(--bone);
  text-shadow:
    .06em .06em 0 var(--rh-dim),
    .11em .11em 0 rgba(204,255,0,.22);
  position:relative;
}
.hero__word::after{
  content:attr(data-cfg-echo);
  position:absolute; inset:0; color:var(--rh);
  clip-path:inset(0 0 62% 0);
  opacity:0; transition:opacity .2s;
}
.hero__title:hover .hero__word::after{ opacity:1; animation:glitch .3s steps(2) infinite; }
@keyframes glitch{ 50%{ transform:translate(-3px,2px); } }

.hero__lede{
  font-family:var(--f-display);
  font-size:clamp(1.1rem,2.2vw,1.6rem);
  letter-spacing:.01em;
  line-height:1.15;
  color:var(--bone);
  max-width:22ch;
  margin-bottom:1rem;
}
.hero__sub{
  color:var(--dim);
  max-width:44ch;
  margin-bottom:1.9rem;
}

/* Contract box. Label sits above the address, copy button beside it, so a
   full 42-char address gets the whole row and never truncates. */
.ca{ margin-bottom:1.4rem; max-width:min(100%,44rem); }
.ca__label{
  display:block; margin-bottom:.5rem;
  font:600 .62rem/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}
.ca__row{ display:flex; gap:.6rem; align-items:stretch; }
.ca__value{
  flex:1; min-width:0;
  display:flex; align-items:center;
  padding:.85rem 1rem;
  border:1px solid var(--line-hi); border-radius:10px;
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(6px);
  font:400 .82rem/1 var(--f-mono);
  color:var(--bone);
}
.ca__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca.is-empty .ca__value{ color:var(--dim); }

.ca__copy{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  padding:.85rem 1.15rem;
  border:1px solid var(--rh); border-radius:10px;
  background:var(--rh-ghost);
  font:600 .72rem/1 var(--f-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--rh);
  transition:background .2s var(--ease), transform .15s var(--ease);
}
.ca__copy svg{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ca__copy:hover{ background:var(--rh); color:var(--on-rh); }
.ca__copy:active{ transform:translateY(1px); }
.ca.is-empty .ca__copy{
  border-color:var(--line-hi); background:transparent;
  color:var(--dimmer); cursor:not-allowed;
}
.ca.is-empty .ca__copy:hover{ background:transparent; color:var(--dimmer); }

/* Four actions: one primary swap plus three destinations. */
.actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.act{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.35rem;
  border:1px solid var(--line-hi); border-radius:999px;
  background:rgba(18,18,18,.78);
  backdrop-filter:blur(6px);
  font:600 .78rem/1 var(--f-body);
  letter-spacing:.01em;
  color:var(--bone); text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s, transform .15s var(--ease);
}
.act__i{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.act__out{
  width:13px; height:13px; flex:none; margin-left:-.15rem;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.act:hover{ border-color:var(--rh); color:var(--rh); }
.act:active{ transform:translateY(1px); }

.act--go{
  background:var(--rh); border-color:var(--rh); color:var(--on-rh);
  padding-inline:1.6rem;
}
.act--go:hover{
  background:var(--rh-hi); border-color:var(--rh-hi); color:var(--on-rh);
  box-shadow:0 12px 40px -14px var(--rh);
}
.act--go:hover .act__out{ transform:translate(2px,-2px); }

/* No destination yet: visibly inert rather than a link to nowhere. */
.act.is-pending{
  background:transparent; border-color:var(--line-hi); color:var(--dimmer);
  cursor:not-allowed;
  position:relative; overflow:hidden;
}
.act.is-pending::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    -45deg, transparent 0 7px, rgba(255,255,255,.03) 7px 14px);
}
.act.is-pending:hover{
  background:transparent; border-color:var(--line-hi);
  color:var(--dimmer); box-shadow:none; transform:none;
}
.act.is-pending:hover .act__out{ transform:none; }

.actions__note{
  margin-top:1rem; max-width:46ch;
  font:400 .74rem/1.6 var(--f-mono);
  color:var(--dimmer);
}
.actions__note[hidden]{ display:none; }

/* -------------------------- hero art / frames -------------------- */

.frame{
  position:relative;
  border:1px solid var(--line-hi);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      rgba(204,255,0,.045) 9px 10px),
    var(--ink-2);
  overflow:hidden;
}
.frame--post{ aspect-ratio:5/4; }
.frame img{
  position:relative; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:1; transition:opacity .35s var(--ease);
}
/* frames start in the missing state and reveal the image once it loads,
   so a placeholder is never replaced by a broken-image icon */
.frame.is-missing img{ opacity:0; }
.frame::after{
  content:attr(data-ph);
  position:absolute; z-index:1; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:700 clamp(1rem,2.4vw,1.6rem)/1 var(--f-mono);
  letter-spacing:.3em;
  color:rgba(204,255,0,.3);
}
.frame__path{
  position:absolute; z-index:3; left:0; bottom:0;
  padding:.3rem .55rem;
  background:var(--rh); color:var(--on-rh);
  font:600 .58rem/1 var(--f-mono); letter-spacing:.08em;
}
.frame:not(.is-missing) .frame__path{ display:none; }

/* ----------------------------- sections -------------------------- */
.sec{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4rem,10vw,7.5rem) var(--gut);
}
.sec__head{ margin-bottom:clamp(2rem,5vw,3.5rem); }
.kicker{
  font:600 .68rem/1 var(--f-mono); letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
  margin-bottom:1rem;
}
.sec__title{
  font-family:var(--f-display);
  font-size:clamp(2.5rem,7vw,5rem);
  line-height:.92; letter-spacing:-.015em;
}
.sec__sub{
  margin-top:1.1rem; max-width:46ch; color:var(--dim);
}
.lead{
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.5; max-width:52ch; color:var(--bone);
}

/* --------------------------- lore video panel -------------------- */
/* Height drives width via aspect-ratio. Setting width and capping height
   instead lets max-height fight the ratio, which quietly reintroduces the
   crop this panel exists to avoid. */
.media{
  position:relative;
  aspect-ratio:9/16;             /* the source's native shape, so no crop */
  height:min(58vh,32rem);
  width:auto; max-width:100%;
  overflow:hidden;
  border:1px solid var(--line-hi);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      rgba(204,255,0,.04) 11px 12px),
    var(--ink-2);
}
.media video{
  width:100%; height:100%;
  object-fit:cover;              /* identical aspect, so this is a no-op crop */
  display:block;
  opacity:0; transition:opacity .8s var(--ease);
}
.media.is-playing video{ opacity:1; }
.media::after{
  content:attr(data-ph);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:700 clamp(.85rem,2vw,1.2rem)/1 var(--f-mono);
  letter-spacing:.3em;
  color:rgba(204,255,0,.22);
}
.media.is-playing::after,
.media.is-playing .media__path{ display:none; }
.media__path{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.3rem .55rem;
  background:var(--rh); color:var(--on-rh);
  font:600 .58rem/1 var(--f-mono); letter-spacing:.08em;
}

.crop{
  position:absolute; z-index:4; width:14px; height:14px;
  border:2px solid var(--rh);
}
.crop--tl{ top:8px; left:8px; border-right:0; border-bottom:0; }
.crop--tr{ top:8px; right:8px; border-left:0; border-bottom:0; }
.crop--bl{ bottom:8px; left:8px; border-right:0; border-top:0; }
.crop--br{ bottom:8px; right:8px; border-left:0; border-top:0; }

/* -------------------------------- lore --------------------------- */
/* The banner sits behind the whole section, knocked well back so the type
   stays readable, and fades out top and bottom so it does not butt against
   the neighbouring sections. */
.lore{ position:relative; }

/* Full-bleed banner band with the lockup centred on it. The section is
   width-constrained, so this breaks out to the viewport edges; body already
   clips overflow-x, which keeps 100vw from adding a scrollbar. */
.markplate{
  position:relative;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  min-height:clamp(280px,32vw,560px);
  display:grid; place-items:center;
  isolation:isolate;
  overflow:hidden;
}
.markplate::before{
  content:''; position:absolute; z-index:-2; inset:0;
  background:url('../assets/gangbanner.webp') center/cover no-repeat;
  opacity:.55;
}
/* Darkest under the mark, fading to black at every edge so the band has no
   hard seam against the sections above and below. */
.markplate::after{
  content:''; position:absolute; z-index:-1; inset:0;
  background:
    radial-gradient(58% 62% at 50% 50%, rgba(0,0,0,.78), transparent 72%),
    linear-gradient(to bottom, var(--ink), transparent 26%, transparent 74%, var(--ink)),
    linear-gradient(to right, var(--ink), transparent 18%, transparent 82%, var(--ink));
}

.sec__mark{
  position:relative; z-index:1;
  width:min(46%,34rem); height:auto;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.95));
}
/* 46% of a phone is too timid; the mark is the whole section header now. */
@media (max-width:700px){
  .sec__mark{ width:74%; }
  .markplate{ min-height:230px; }
}

.lore__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.beat{
  position:relative;
  padding:1.6rem 0;
  border-top:1px solid var(--line);
}
.beat:last-child{ border-bottom:1px solid var(--line); }

.beat h3{
  font-family:var(--f-display);
  font-size:1.5rem; letter-spacing:.01em;
  margin-bottom:.5rem;
}
.beat p{ color:var(--dim); max-width:52ch; }
.beat::after{
  content:''; position:absolute; left:0; top:-1px;
  width:0; height:1px; background:var(--rh);
  transition:width .5s var(--ease);
}
.beat:hover::after{ width:100%; }

.caption{
  margin-top:.9rem;
  font:400 .72rem/1.5 var(--f-mono);
  color:var(--dimmer);
}

/* ------------------------------- market -------------------------- */
/* No headline here on purpose. The numbers are the headline; a slab of
   display type above them just pushes the thing people came for down. */
.market__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.25rem 2rem; flex-wrap:wrap;
  margin-bottom:clamp(1.2rem,2.4vw,1.8rem);
}
.market__sub{
  margin:.85rem 0 0; max-width:48ch;
  font:400 clamp(.9rem,1.4vw,1.02rem)/1.6 var(--f-body);
  color:var(--dim);
}
.market__open{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.5rem;
  font:400 .8rem/1 var(--f-mono); color:var(--bone);
  text-decoration:none;
  padding-bottom:.35rem; border-bottom:1px solid var(--line-hi);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.market__open:hover{ color:var(--rh); border-bottom-color:var(--rh); }
.market__open svg{
  width:11px; height:11px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.market__open.is-pending{
  color:var(--dimmer); border-bottom-color:var(--line); cursor:default;
}

/* Separated cards rather than one joined table: each figure is its own
   object, which survives the fold to two columns without the border
   bookkeeping a shared grid needs. */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.55rem,1.1vw,.9rem);
}
.stat{
  padding:clamp(1.1rem,2.4vw,1.7rem);
  border:1px solid var(--line-hi);
  border-radius:10px;
  background:var(--ink-2);
  position:relative; overflow:hidden;
}
.stat__k{
  display:block;
  font:600 .6rem/1 var(--f-mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dimmer);
  margin-bottom:.8rem;
}
.stat__v{
  display:block;
  font:700 clamp(1.2rem,3vw,2rem)/1 var(--f-mono);
  color:var(--bone);
}
.stat__v.is-up{ color:var(--rh); }
.stat__v.is-down{ color:var(--flame); }
.stat__v.is-tick{ animation:tick .5s var(--ease); }
@keyframes tick{ 0%{ color:var(--rh); transform:translateY(-3px); } }

body[data-launched="false"] .stat__v{
  color:transparent;
  background:repeating-linear-gradient(90deg,var(--line-hi) 0 6px, transparent 6px 10px);
  -webkit-background-clip:text; background-clip:text;
  user-select:none;
}
/* Height is set, not derived from aspect-ratio: a candlestick chart needs a
   floor of vertical space to be readable, and 16/9 on a phone gives it
   about 200px, which is a smear. */
.chart{
  margin-top:clamp(.55rem,1.1vw,.9rem);
  height:clamp(360px,42vw,600px);
  border:1px solid var(--line-hi);
  border-radius:10px;
  background:var(--ink-2);
  overflow:hidden;
  display:grid; place-items:center;
}
.chart.is-live{ place-items:stretch; }
.chart iframe{ width:100%; height:100%; border:0; display:block; }
.chart__ph{
  padding:1rem; text-align:center;
  font:600 .6rem/1.6 var(--f-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dimmer);
}

.market__note{
  margin-top:1.4rem; max-width:56ch;
  font:400 .78rem/1.6 var(--f-mono); color:var(--dim);
}
.market__note a{ color:var(--rh); }

/* --------------------------------- buy --------------------------- */
/* One primary action in a single card, with the manual route folded into a
   disclosure. Replaces the old four-step grid: the steps were never really
   a sequence people read, they were a wall between someone and the swap. */
.sec__head--mid{ text-align:center; }
.sec__head--mid .kicker{ justify-content:center; }
.sec__title em{ font-style:normal; color:var(--rh); }

.onebtn{
  max-width:44rem; margin-inline:auto;
  padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,3vw,2.5rem);
  border:1px solid var(--line-hi);
  border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(204,255,0,.05), transparent 60%),
    var(--ink-2);
  text-align:center;
}

.onebtn__chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; margin-bottom:1.35rem;
  border:1px solid var(--line-hi); border-radius:999px;
  background:var(--ink-3);
  font:600 .68rem/1 var(--f-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.onebtn__chip svg{
  width:14px; height:14px; flex:none;
  fill:none; stroke:var(--rh); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* the one button */
.onebtn__go{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  width:100%; padding:1.25rem 1.5rem;
  border-radius:12px;
  background:var(--rh); color:var(--on-rh);
  font-family:var(--f-display);
  font-size:clamp(1.15rem,3vw,1.7rem);
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .18s var(--ease), background .2s, box-shadow .25s;
}
.onebtn__go svg{
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.onebtn__go:hover{
  background:var(--rh-hi);
  box-shadow:0 14px 44px -16px var(--rh);
}
.onebtn__go:hover svg{ transform:translateX(5px); }
.onebtn__go:active{ transform:translateY(1px); }

/* pending: no swap URL yet, so it must not look clickable */
.onebtn__go.is-pending{
  background:transparent;
  color:var(--dim);
  border:1px solid var(--line-hi);
  cursor:not-allowed;
  position:relative; overflow:hidden;
}
.onebtn__go.is-pending::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    -45deg, transparent 0 8px, rgba(255,255,255,.035) 8px 16px);
}
.onebtn__go.is-pending:hover{ background:transparent; box-shadow:none; }
.onebtn__go.is-pending:hover svg{ transform:none; }

.onebtn__note{
  margin:1.1rem auto 0; max-width:42ch;
  font-size:.9rem; line-height:1.6;
  color:var(--dim);
}
.onebtn__note[hidden]{ display:none; }

.onebtn__net{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.5rem; padding:.85rem 1.35rem;
  border:1px solid var(--line-hi); border-radius:999px;
  background:var(--ink-3);
  font:600 .72rem/1 var(--f-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone);
  transition:border-color .2s, color .2s, background .2s;
}
.onebtn__net svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.onebtn__net:hover{ border-color:var(--rh); color:var(--rh); }
.onebtn__net[disabled]{ opacity:.45; cursor:not-allowed; }
.onebtn__net[disabled]:hover{ border-color:var(--line-hi); color:var(--bone); }

.onebtn__neterr{
  margin-top:.75rem;
  font:400 .72rem/1.5 var(--f-mono);
  color:var(--dim);
}
.onebtn__neterr[hidden]{ display:none; }
.onebtn__neterr.is-bad{ color:var(--flame); }

/* manual fallback */
.manual{ margin-top:2rem; border-top:1px solid var(--line); padding-top:1.25rem; }
.manual summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 .7rem/1 var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dimmer);
  transition:color .2s;
}
.manual summary::-webkit-details-marker{ display:none; }
.manual summary::after{
  content:''; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s var(--ease);
}
.manual[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.manual summary:hover{ color:var(--bone); }

.manual__steps{
  display:grid; gap:1.5rem;
  margin-top:1.5rem; text-align:left;
  counter-reset:manual;
}
.manual__steps li{
  position:relative; padding-left:2.4rem;
  counter-increment:manual;
}
.manual__steps li::before{
  content:counter(manual,decimal-leading-zero);
  position:absolute; left:0; top:.1em;
  font:700 .72rem/1 var(--f-mono);
  letter-spacing:.06em; color:var(--dimmer);
}
.manual__steps h3{
  font-family:var(--f-display); font-size:1.1rem;
  margin-bottom:.3rem;
}
.manual__steps p{ color:var(--dim); font-size:.92rem; }
.step__link{
  display:inline-block; margin-top:.6rem;
  font:600 .65rem/1 var(--f-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--rh);
  text-decoration:none;
  border-bottom:1px solid var(--rh-dim); padding-bottom:2px;
}
.step__link:hover{ border-color:var(--rh); }

/* -------------------------------- footer ------------------------- */
.foot{
  border-top:1px solid var(--line);
  background:var(--ink-2);
  padding-block:clamp(2.5rem,6vw,4rem);
}
.foot__top{
  max-width:var(--maxw); margin:0 auto 2rem;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.foot__brand{ display:flex; align-items:center; gap:.75rem; }
.foot__word{
  font-family:var(--f-display); font-size:2rem; letter-spacing:.03em;
}
.foot__links{ display:flex; gap:1.5rem; }
.foot__links a{
  font:600 .72rem/1 var(--f-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
  text-decoration:none;
}
.foot__links a:hover{ color:var(--rh); }

.foot__ca{
  max-width:var(--maxw); margin:0 auto 1.5rem;
  padding-inline:var(--gut);
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:baseline;
  font:400 .72rem/1.5 var(--f-mono);
  color:var(--dim); word-break:break-all;
}
.foot__calabel{
  color:var(--dimmer); letter-spacing:.18em; text-transform:uppercase;
  font-size:.6rem; font-weight:600;
}
.foot__legal{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
  font-size:.78rem; line-height:1.65; color:var(--dimmer);
  border-top:1px solid var(--line); padding-top:1.4rem;
}

/* -------------------------------- toast -------------------------- */
.toast{
  position:fixed; z-index:200;
  left:50%; bottom:2rem; transform:translate(-50%,150%);
  background:var(--rh); color:var(--on-rh);
  padding:.7rem 1.2rem;
  font:700 .72rem/1 var(--f-mono); letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .35s var(--ease);
}
.toast.is-on{ transform:translate(-50%,0); }

/* ------------------------------- reveal -------------------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ------------------------------ responsive ----------------------- */
@media (max-width:960px){
  .media{ height:min(62vh,32rem); }
  .lore__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .nav__links{ display:none; }
}
@media (max-width:560px){
  .foot__top{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------- motion opt-out --------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}