/* ============================================================
   POOLD page-level components (multi-page layout)
   Loaded after styles.css on every page.
   ============================================================ */

/* ---------- page header ---------- */
.pagehead{padding:64px 0 10px}
.crumb{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--lime)}
.crumb span{margin:0 8px;opacity:.5}
.h2--tight{max-width:19ch}
.section--tight{padding-top:38px}
.pagehead .lede{max-width:64ch;line-height:1.75}

/* ---------- capsule stepper control ---------- */
.capsule__ctrl{margin-top:14px}
.stepbtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(0,200,5,.4);background:rgba(0,200,5,.1);color:var(--lime);
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease)}
.stepbtn::after{content:"→";font-size:14px;transition:transform .3s var(--ease)}
.stepbtn:hover{background:rgba(0,200,5,.18);border-color:rgba(0,200,5,.7)}
.stepbtn:hover::after{transform:translateX(4px)}
.stepbtn:active{transform:scale(.985)}
.stepbtn.is-reset{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:var(--ink-2)}
.stepbtn.is-reset::after{content:"↺"}
.stepbtn.is-reset:hover::after{transform:rotate(-90deg)}

/* ---------- real artwork ---------- */
.art{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__visual{max-width:none}
.capsule__art{aspect-ratio:1/1}

/* ---------- compact level selector (replaces the image rail) ---------- */
.lvsel{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.lvsel__hint{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.lvsel__row{display:flex;flex-wrap:wrap;gap:8px}
.lvsel__btn{display:inline-flex!important;align-items:center;gap:8px;
  padding:9px 14px!important;border-radius:999px!important;cursor:pointer;
  border:1px solid var(--line)!important;background:rgba(255,255,255,.03)!important;
  transform:none!important;box-shadow:none!important;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.lvsel__btn::before,.lvsel__btn::after{display:none!important}
.lvsel__btn b{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);
  font-weight:500}
.lvsel__btn span{font-family:var(--ff-display);font-size:13px;font-weight:600;color:var(--ink-2);
  letter-spacing:-.01em}
.lvsel__btn:hover{border-color:rgba(0,200,5,.45)!important;background:rgba(0,200,5,.06)!important}
.lvsel__btn:hover span{color:var(--ink-1)}
.lvsel__btn.is-active{border-color:rgba(0,200,5,.65)!important;background:rgba(0,200,5,.13)!important}
.lvsel__btn.is-active b{color:var(--lime)}
.lvsel__btn.is-active span{color:var(--lime)}

/* ---------- X (twitter) link in nav ---------- */
.nav__x{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;
  border:1px solid var(--line);color:var(--ink-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.nav__x svg{width:15px;height:15px;fill:currentColor}
.nav__x:hover{border-color:rgba(0,200,5,.5);background:rgba(0,200,5,.08);color:var(--lime)}
@media (max-width:620px){.nav__x{width:32px;height:32px}.nav__x svg{width:13px;height:13px}}

/* quest button waits for the link to be opened */
.qcheck:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line);color:var(--ink-3)}
.qcheck:disabled:hover{border-color:var(--line);color:var(--ink-3)}

/* brand logo in nav + footer */
.brand__logo{display:block;width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.foot__brand .brand__logo{width:34px;height:34px}
@media (max-width:620px){.brand__logo{width:34px;height:34px}}

/* ---------- home nav cards ---------- */
.navcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.navcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px 20px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease)}
.navcard:hover{border-color:rgba(0,200,5,.4);transform:translateY(-4px);background:rgba(0,200,5,.05)}
.navcard__num{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.navcard h3{font-family:var(--ff-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.navcard p{font-size:13.5px;line-height:1.65;color:var(--ink-2);flex:1}
.navcard__go{font-family:var(--ff-mono);font-size:11.5px;color:var(--lime);letter-spacing:.06em}
.navcard__go i{transition:transform .3s var(--ease);display:inline-block}
.navcard:hover .navcard__go i{transform:translateX(4px)}
@media (max-width:1080px){.navcards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.navcards{grid-template-columns:1fr}}

/* ---------- preview split (nft page) ---------- */
.preview{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;margin-top:52px}
.preview__copy .h3{margin-bottom:10px}
.preview__copy .h3+p{margin-bottom:26px;color:var(--ink-2);font-size:14.5px;line-height:1.75}
.preview__copy .btn{margin-top:8px}
@media (max-width:1080px){.preview{grid-template-columns:1fr;gap:34px}}

/* ---------- full-size artwork gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.gcard{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.gcard:hover{border-color:rgba(0,200,5,.4);transform:translateY(-5px)}
.gcard img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  background:#05060a;transition:transform .6s var(--ease)}
.gcard:hover img{transform:scale(1.03)}
.gcard figcaption{padding:20px 22px 24px;border-top:1px solid var(--line)}
.gcard__lv{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime)}
.gcard h3{font-family:var(--ff-display);font-size:19px;font-weight:600;letter-spacing:-.015em;
  margin:9px 0 9px}
.gcard p{font-size:13px;line-height:1.7;color:var(--ink-2)}
.gcard--sealed .gcard__lv{color:var(--ink-3)}
.gcard--peak{border-color:rgba(228,178,60,.32)}
.gcard--peak:hover{border-color:rgba(228,178,60,.6)}
.gcard--peak .gcard__lv{color:#e4b23c}
@media (max-width:1080px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.gallery{grid-template-columns:1fr;gap:16px}}

/* ---------- how it works (3 steps) ---------- */
.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--line);overflow:hidden}
.explain__step{padding:30px 26px 32px;background:var(--bg);
  transition:background .4s var(--ease)}
.explain__step:hover{background:rgba(0,200,5,.045)}
.explain__n{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.2em;color:var(--lime)}
.explain__step h3{font-family:var(--ff-display);font-size:clamp(17px,1.7vw,20px);font-weight:600;
  letter-spacing:-.015em;margin:12px 0 10px}
.explain__step p{font-size:13.5px;line-height:1.75;color:var(--ink-2)}
@media (max-width:960px){.explain{grid-template-columns:1fr}}

/* ---------- threshold table ---------- */
.tablewrap{margin-top:52px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);overflow:hidden}
.ttable{width:100%;border-collapse:collapse;font-size:13.5px}
.ttable caption{text-align:left;padding:20px 24px 0;font-family:var(--ff-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ttable th,.ttable td{padding:15px 24px;text-align:left;border-bottom:1px solid var(--line)}
.ttable thead th{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.ttable tbody th{font-weight:500;color:var(--ink-1)}
.ttable tbody td{color:var(--ink-2);font-family:var(--ff-mono)}
.ttable tbody tr:hover{background:rgba(255,255,255,.02)}
.ttable tr.is-peak td,.ttable tr.is-peak th{color:var(--gold,#e4b23c)}
.tnote{padding:16px 24px;font-size:11.5px;color:var(--ink-3)}

/* ---------- perks (uniform grid, no ragged last row) ---------- */
.perks{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))!important;gap:16px!important;
  margin-top:40px!important}
.perk{display:flex;flex-direction:column;padding:26px 22px 28px!important}
.perk__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:rgba(0,200,5,.1);color:var(--lime);font-size:15px;margin-bottom:16px}
.perk h3{font-family:var(--ff-display);font-size:16px;font-weight:600;margin-bottom:8px}
.perk p{font-size:13px;line-height:1.65;color:var(--ink-2)}

/* ---------- section handoff band ---------- */
.handoff{display:grid;grid-template-columns:1.5fr .85fr;gap:40px;align-items:center;
  padding:38px 36px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(0,200,5,.06),transparent 62%),var(--panel)}
.handoff__main h2{margin:14px 0 12px}
.handoff__main p{font-size:14px;line-height:1.75;color:var(--ink-2);max-width:56ch;margin-bottom:22px}
.handoff__facts{display:grid;gap:12px}
.handoff__facts div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.handoff__facts div:last-child{padding-bottom:0;border-bottom:0}
.handoff__facts dt{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.handoff__facts dd{font-family:var(--ff-display);font-size:21px;font-weight:600}
@media (max-width:960px){.handoff{grid-template-columns:1fr;gap:28px;padding:28px 24px}}

/* real logo mark inside the token coin */
.coin__logo{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(0,200,5,.45));
  animation:coinfloat 9s var(--ease) infinite}

/* ---------- note panel ---------- */
.notepanel{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center;margin-top:52px;
  padding:34px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(0,200,5,.05),transparent 60%),var(--panel)}
.notepanel h3{font-family:var(--ff-display);font-size:clamp(19px,2vw,24px);font-weight:600;
  letter-spacing:-.02em;margin:14px 0 12px}
.notepanel p{font-size:14px;line-height:1.75;color:var(--ink-2);margin-bottom:20px;max-width:52ch}
@media (max-width:860px){.notepanel{grid-template-columns:1fr;padding:26px}}

.burnviz{display:grid;gap:14px}
.burnviz__row{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:12px}
.burnviz__row span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.burnviz .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.burnviz .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;
  background:linear-gradient(90deg,rgba(0,200,5,.5),var(--lime))}
.burnviz .bar--accent::after{background:linear-gradient(90deg,#e4b23c66,#e4b23c)}
.burnviz .bar--full::after{box-shadow:0 0 18px rgba(0,200,5,.45)}

/* ---------- roadmap ---------- */
.road{position:relative;display:grid;gap:14px;padding-left:38px;margin-top:8px}
.road::before{content:"";position:absolute;left:9px;top:16px;bottom:16px;width:1px;
  background:linear-gradient(180deg,var(--lime) 0%,rgba(0,200,5,.35) 34%,rgba(255,255,255,.08) 100%)}
.road__item{position:relative;padding:24px 26px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--panel);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.road__item:hover{border-color:var(--line-2)}
.road__item.is-done{opacity:.82}
.road__item.is-active{border-color:rgba(0,200,5,.4);background:rgba(0,200,5,.05)}
.road__dot{position:absolute;left:-34px;top:30px;width:11px;height:11px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);background:var(--bg)}
.road__list{display:grid;gap:7px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.road__list li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.road__list li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;
  border-radius:1px;background:rgba(0,200,5,.55);transform:rotate(45deg)}
.road__item.is-done .road__list li::before{background:rgba(255,255,255,.22)}
.tnote--bare{padding:22px 0 0;border-top:1px solid var(--line);margin-top:26px}
@media (max-width:620px){.road{padding-left:26px}.road__item{padding:20px 18px}.road__dot{left:-22px}}
.road__item.is-done .road__dot{background:var(--lime);border-color:var(--lime)}
.road__item.is-active .road__dot{background:var(--lime);border-color:var(--lime);
  box-shadow:0 0 0 5px rgba(0,200,5,.16)}
.road__phase{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.road__phase b{color:var(--lime);font-weight:500}
.road__body h3{font-family:var(--ff-display);font-size:clamp(17px,1.8vw,21px);font-weight:600;
  letter-spacing:-.015em;margin:9px 0 8px}
.road__body p{font-size:13.5px;line-height:1.7;color:var(--ink-2);max-width:60ch}

/* ============================================================
   WAITLIST
   ============================================================ */
.wlhead{padding:60px 0 6px}
.wlhead__in{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:end}
.wlstats{display:grid;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel)}
.wlstats div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.wlstats div:last-child{padding-bottom:0;border-bottom:0}
.wlstats dt{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.wlstats dd{font-family:var(--ff-display);font-size:19px;font-weight:600}
@media (max-width:1080px){.wlhead__in{grid-template-columns:1fr}}

.wl{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
@media (max-width:1080px){.wl{grid-template-columns:1fr}}
.wl__colhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.wl__prog{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3)}
.wl__prog b{color:var(--lime)}

.qbar{height:4px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:22px}
.qbar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(0,200,5,.55),var(--lime));
  box-shadow:0 0 14px rgba(0,200,5,.5);transition:width .5s var(--ease)}

/* ---------- quests ---------- */
.quests{display:grid;gap:12px;counter-reset:q}
.quest{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.quest.is-done{border-color:rgba(0,200,5,.42);background:rgba(0,200,5,.05)}
.quest__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.05);color:var(--ink-2);font-size:15px;transition:all .35s var(--ease)}
.quest.is-done .quest__ico{background:rgba(0,200,5,.15);color:var(--lime)}
.quest__body h3{font-family:var(--ff-display);font-size:15.5px;font-weight:600;margin-bottom:5px}
.quest__body p{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.quest__act{display:flex;align-items:center;gap:8px}
.qcheck{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-2);cursor:pointer;
  transition:all .3s var(--ease);white-space:nowrap}
.qcheck:hover{border-color:rgba(0,200,5,.5);color:var(--lime)}
.quest.is-done .qcheck{background:var(--lime);border-color:var(--lime);color:#04140a;font-weight:500}
@media (max-width:620px){
  .quest{grid-template-columns:auto 1fr;row-gap:14px}
  .quest__act{grid-column:1/-1;justify-content:flex-start}
}

/* ---------- registration form ---------- */
.wl__col--form{position:sticky;top:96px}
@media (max-width:1080px){.wl__col--form{position:static}}
.wlform{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(0,200,5,.06),transparent 55%),var(--panel-2,var(--panel))}
.field{margin-bottom:20px}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-1);margin-bottom:8px}
.field label em{font-family:var(--ff-mono);font-style:normal;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lime);margin-left:6px}
.field input[type=text]{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink-1);font-family:var(--ff-mono);font-size:13px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.field input[type=text]:focus{outline:none;border-color:rgba(0,200,5,.55);background:rgba(0,200,5,.05)}
.field input.is-error{border-color:rgba(255,92,92,.6)}
.field__prefixed{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .3s var(--ease)}
.field__prefixed:focus-within{border-color:rgba(0,200,5,.55)}
.field__prefixed span{padding:0 4px 0 15px;font-family:var(--ff-mono);font-size:13px;color:var(--ink-3)}
.field__prefixed input{border:0!important;background:transparent!important;padding-left:4px!important}
.field__hint{margin-top:7px;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.field__err{margin-top:6px;font-size:11.5px;color:#ff7a7a;min-height:0}
.field__err:empty{margin-top:0}

.field--check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.field--check input{width:16px;height:16px;margin-top:2px;accent-color:#00c805;cursor:pointer}
.field--check label{font-size:12px;line-height:1.6;color:var(--ink-2);margin:0;font-weight:400}
.field--check .field__err{grid-column:1/-1}

.gate{margin:0 0 12px;padding:11px 14px;border-radius:12px;border:1px dashed rgba(255,255,255,.16);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);text-align:center;
  transition:all .35s var(--ease)}
.gate.is-open{border-style:solid;border-color:rgba(0,200,5,.45);color:var(--lime);
  background:rgba(0,200,5,.07)}
.btn--full{width:100%;justify-content:center}
.btn--xs{padding:8px 13px;font-size:11px}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important}
.wlform__msg{margin-top:12px;font-size:12.5px;text-align:center;min-height:1em}
.wlform__msg.is-ok{color:var(--lime)}
.wlform__msg.is-error{color:#ff7a7a}
.wlform__notes{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.wlform__notes li{position:relative;padding-left:14px;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.wlform__notes li::before{content:"·";position:absolute;left:2px;color:var(--lime)}
