/* =============================================================
   AKU WORLD — MOON GOD COVER CLAIM  (/collect/moongodcover)
   Page-specific layer. Consumes tokens.css + styles.css primitives
   (.btn .hud-line .hud-tag .chip .chassis .starfield .hud-corners
   .finale .nav .footer). Only the page-unique pieces live here.
   ============================================================= */

/* ---------- shared section rhythm ---------- */
.mgsec{ padding-block:var(--section-y); }
.mgsec--tight{ padding-block:clamp(48px,8vh,96px); }
.mghead{ max-width:62ch; margin-bottom:clamp(28px,4vh,46px); }
.mghead h2{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  line-height:.96; font-size:clamp(1.9rem,4.4vw,3.2rem); margin:14px 0 0; letter-spacing:-.01em; }
.mghead p{ color:var(--ink-2); font-size:var(--t-lede); line-height:1.5; margin:14px 0 0; max-width:56ch; }

/* =============================================================
   HERO  (dark)
   ============================================================= */
.mghero{ background:#030712; color:#fff; overflow:hidden; }
.mghero__grid{ position:relative; z-index:1;
  width:100%; max-width:calc(var(--wrap) + var(--gut)*2); margin-inline:auto; padding-inline:var(--gut);
  padding-block:clamp(56px,11vh,128px);
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,64px); align-items:center; }
.mghero__hud{ color:var(--blue-glow); width:min(440px,100%); margin-bottom:24px; }
.mghero__hud::before,.mghero__hud::after{ background:rgba(255,255,255,.16); }
.mghero__eyebrow{ color:var(--blue-glow); display:block; margin-bottom:10px; }
.mghero__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  line-height:.92; font-size:clamp(2.6rem,6.4vw,5.2rem); letter-spacing:-.015em;
  text-shadow:0 0 60px rgba(63,180,255,.22); }
.mghero__sub{ margin:22px 0 0; color:rgba(255,255,255,.74); font-size:var(--t-lede); line-height:1.55; max-width:50ch; }
.mghero__sub em{ font-style:italic; color:#fff; }
.mghero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.mghero__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.mghero__meta b{ color:#fff; font-weight:400; }
.mghero__meta span{ display:inline-flex; align-items:center; gap:9px; }
.mghero__meta i{ width:5px; height:5px; border-radius:50%; background:var(--blue-glow); box-shadow:0 0 8px var(--blue-glow); }

/* ---------- full flat cover ---------- */
/* hero cover (portrait front) */
.coverwrap{ position:relative; }
.coverwrap--portrait{ width:min(420px,100%); margin-inline:auto; }
.coverframe{ position:relative; display:block; width:100%; line-height:0;
  background:#0a1430; border:1px solid rgba(159,227,255,.38);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.8); }
.coverframe img{ display:block; width:100%; height:auto; }
.coverframe__ph{ position:absolute; top:14px; left:16px; z-index:4; font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(159,227,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.75); }
.covertag{ position:absolute; left:50%; bottom:-13px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; white-space:nowrap;
  background:#030712; border:1px solid rgba(159,227,255,.4);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.covertag .dot{ width:6px; height:6px; border-radius:50%; background:#12B886; box-shadow:0 0 8px #12B886; }

/* ---------- full flat showcase + zoom ---------- */
.flatshow{ position:relative; display:block; width:100%; line-height:0; cursor:zoom-in;
  background:#0a1430; border:1px solid var(--line-2); box-shadow:var(--shadow-card); }
.flatshow img{ display:block; width:100%; height:auto; }
.flatshow__cue{ position:absolute; right:14px; bottom:14px; z-index:4;
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  background:rgba(3,7,18,.78); border:1px solid rgba(159,227,255,.45); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--dur-fast), border-color var(--dur-fast); }
.flatshow:hover .flatshow__cue{ background:var(--blue); border-color:var(--blue); }
.felt__points{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  background:rgba(3,7,18,.95); padding:clamp(16px,4vw,48px); overscroll-behavior:contain; }
.lightbox.is-open{ display:flex; }
.lightbox__img{ max-width:96vw; max-height:90vh; width:auto; height:auto; cursor:zoom-in;
  border:1px solid rgba(159,227,255,.4); box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transition:transform .28s var(--ease-out); transform-origin:center; will-change:transform; }
.lightbox__img.is-zoomed{ transform:scale(2.4); cursor:zoom-out; }
.lightbox__close{ position:fixed; top:18px; right:18px; z-index:2; appearance:none; cursor:pointer;
  background:transparent; border:0; color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:6px 4px; }
.lightbox__close:hover{ color:var(--blue-glow); }

/* =============================================================
   FACT GRID
   ============================================================= */
.factgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1vw,16px); }
.fact{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:9px; }
.fact__n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--blue); }
.fact__h{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.5rem;
  line-height:1; color:var(--ink); }
.fact__p{ color:var(--ink-2); font-size:.95rem; line-height:1.45; }

/* =============================================================
   TIMELINE
   ============================================================= */
.timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1vw,16px); position:relative; }
.tl{ position:relative; padding:24px 22px 26px; background:#fff; border:1px solid var(--line-2); }
.tl__node{ position:absolute; top:-7px; left:22px; width:13px; height:13px; border-radius:50%;
  background:var(--paper); border:2px solid var(--blue); }
.tl--live .tl__node{ background:var(--blue); box-shadow:0 0 0 4px rgba(19,85,185,.18); }
.tl__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.tl__date{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.95;
  font-size:clamp(1.7rem,2.6vw,2.3rem); margin:10px 0 8px; color:var(--ink); letter-spacing:-.01em; }
.tl__p{ color:var(--ink-2); font-size:.95rem; line-height:1.45; }

/* =============================================================
   STEPS — how it works
   ============================================================= */
.steps{ display:grid; gap:clamp(10px,1vw,16px); }
.step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,40px); align-items:start;
  padding:clamp(20px,3vw,32px) clamp(20px,3vw,34px); background:var(--paper-2); border:1px solid var(--line); }
.step__n{ font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,5vw,3.6rem); line-height:.8;
  color:var(--blue); opacity:.85; }
.step__h{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.35rem; color:var(--ink); margin:0 0 8px; }
.step__p{ color:var(--ink-2); font-size:1rem; line-height:1.55; max-width:60ch; }
.step__p a{ color:var(--blue); border-bottom:1px solid var(--line-2); }
.step__p a:hover{ border-bottom-color:var(--blue); }

/* =============================================================
   SAFETY CALLOUT — hot wallet / delegate.xyz
   ============================================================= */
.safebox{ background:var(--blue-night); color:#fff; padding:clamp(28px,4vw,48px); position:relative; overflow:hidden; }
.safebox__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.safebox__hud{ color:var(--blue-glow); width:min(360px,100%); margin-bottom:18px; }
.safebox__hud::before,.safebox__hud::after{ background:rgba(255,255,255,.16); }
.safebox h2{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1; margin:0 0 16px; color:#fff; }
.safebox p{ color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.6; margin:0 0 14px; max-width:48ch; }
.safebox p:last-of-type{ margin-bottom:0; }
.safebox a.btn{ margin-top:22px; }
.safeways{ display:grid; gap:12px; }
.safeway{ background:rgba(255,255,255,.05); border:1px solid rgba(159,227,255,.28); padding:18px 20px; }
.safeway__k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-glow); }
.safeway__v{ margin-top:8px; color:#fff; font-size:.98rem; line-height:1.5; }
.safeway__v b{ font-weight:700; }

/* =============================================================
   FAQ
   ============================================================= */
.faq{ max-width:820px; display:flex; flex-direction:column; gap:10px; }
.faq details{ background:#fff; border:1px solid var(--line-2); transition:border-color var(--dur-fast); }
.faq details[open]{ border-color:var(--blue); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(.95rem,1.5vw,1.1rem); color:var(--ink);
  transition:color var(--dur-fast), background var(--dur-fast); }
.faq summary:hover{ color:var(--blue); background:var(--paper-2); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:0 0 auto; font-family:var(--mono); font-weight:400; font-size:1.5rem; line-height:1; color:var(--blue);
  transition:transform var(--dur-fast); }
.faq details[open] summary{ color:var(--blue); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__a{ padding:2px 20px 20px; color:var(--ink-2); font-size:1rem; line-height:1.6; }
.faq__a a{ color:var(--blue); border-bottom:1px solid var(--line-2); }
.faq__a a:hover{ border-bottom-color:var(--blue); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:960px){
  .factgrid{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:1fr; }
  .tl__node{ display:none; }
  .safebox__grid{ grid-template-columns:1fr; }

  /* HERO: single column, reorder so the cover sits between the copy and the buttons */
  .mghero__grid{ display:flex; flex-direction:column; gap:0; padding-block:clamp(40px,7vh,72px); }
  .mghero__copy{ display:contents; }
  .mghero__hud{ order:1; margin-bottom:16px; }
  .mghero__eyebrow{ order:2; margin-bottom:8px; }
  .mghero__title{ order:3; margin:0; }
  .mghero__sub{ order:4; margin:16px 0 0; max-width:none; }
  .coverwrap{ order:5; margin:26px auto 22px; }
  .coverwrap--portrait{ width:75%; max-width:316px; }   /* 25% smaller, centered */
  .mghero__ctas{ order:6; margin:0; flex-direction:column; align-items:stretch; gap:12px; }
  .mghero__ctas .btn{ width:100%; justify-content:center; }
  /* 4 blue dots, balanced 2x2, centered */
  .mghero__meta{ order:7; margin:26px 0 0; display:grid; grid-template-columns:repeat(2,auto);
    justify-content:center; gap:14px 28px; }
}

/* tighter vertical rhythm + full-width equal buttons on phones */
@media (max-width:720px){
  .mgsec{ padding-block:clamp(40px,6vh,52px); }
  .mgsec--tight{ padding-block:clamp(36px,5vh,46px); }
  .mghead{ margin-bottom:22px; }
  .factgrid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:6px; }
  .finale__ctas{ flex-direction:column; align-items:stretch; width:100%; }
  .finale__ctas .btn{ width:100%; justify-content:center; }
}