/* MOTTE — landing. Bright, chunky, warm. Not dark-neon, not crypto-glass.
   Fonts are loaded from index.html (<link>, not @import — @import blocks the
   stylesheet's own parse and delays first paint).

   TYPE SYSTEM — two voices, deliberately:
     Alfa Slab One  → wordmark-adjacent display: headings, buttons, eyebrows, figures
     Rubik      → everything you actually read: body, list copy, fine print
   Alfa Slab One ships a single weight, so anything set in it stays font-weight 400;
   asking for 700 only triggers ugly synthetic bold.

   COMPOSITION — every section uses a different shape, so the page does not read as
   one template repeated six times:
     hero     ASYMMETRIC, anchored bottom-left against the keyart
     how      three stepped cards climbing left to right — the mound, as layout
     chain    full-bleed dark band, circular nodes on a dashed rail
     build    left-aligned header, bento grid with featured tiles
     token    asymmetric split, one oversized figure
     roadmap  VERTICAL milestone rail
     faq      two-column accordion
     closer   full-bleed keyart band

   The hero and the roadmap were both centred/horizontal in the sibling project this
   was re-skinned from. Changing their axis is most of what stops the two sites reading
   as the same page with new words — a re-skin that keeps the silhouette is still
   recognisably the same template.
*/

:root{
  --cream:#fff6e3; --sand:#e8d5a3; --sand-d:#c9ad76;
  --teal:#134e58;  --teal-d:#0b333b; --teal-l:#1c6b78;
  --gold:#f5c451;  --gold-d:#c99a2e;
  --sea:#3fb0c8;   --ink:#2a2018;
  --green:#5fbf7a;
  --wrap:1140px; --r:18px;
  --display:'Alfa Slab One', Impact, system-ui, sans-serif;
  --body:Rubik, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-weight:400; line-height:1.65; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.08; margin:0; letter-spacing:.005em}
a{color:inherit}

.skip{position:absolute; left:-9999px; top:0; background:var(--gold); padding:12px 18px; border-radius:0 0 12px 0; z-index:200}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:400; text-decoration:none; cursor:pointer;
  border:0; border-radius:var(--r); padding:13px 24px; font-size:16px;
  letter-spacing:.02em; white-space:nowrap; transition:transform .12s ease;
}
.btn.big{padding:17px 34px; font-size:19px}
.btn.primary{background:var(--gold); color:var(--ink); border-bottom:4px solid var(--gold-d)}
.btn.ghost{background:rgba(255,246,227,.14); color:var(--cream); border:2px solid rgba(255,246,227,.5); backdrop-filter:blur(6px)}
.sec:not(.alt) .btn.ghost{background:transparent; color:var(--teal); border-color:var(--teal)}
.btn:active{transform:translateY(2px)}
.btn.primary:active{border-bottom-width:2px}

/* ---------------------------------------------------------------------- nav */
#nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:20px;
  padding:12px max(16px, env(safe-area-inset-left));
  background:rgba(19,78,88,.92); backdrop-filter:blur(12px);
  color:var(--cream); border-bottom:1px solid rgba(255,246,227,.14);
}
.logo{display:flex; align-items:center; flex:0 0 auto; padding:5px 0}
.logo img{width:auto; height:34px}
.navLinks{display:flex; gap:24px; margin-left:8px; font-size:14.5px; font-weight:600}
.navLinks a{text-decoration:none; opacity:.82; transition:opacity .15s}
.navLinks a:hover{opacity:1}
.navRight{margin-left:auto; display:flex; align-items:center; gap:10px}

.caChip{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:rgba(255,246,227,.1); border:1px solid rgba(255,246,227,.3);
  color:var(--cream); font-family:var(--body); font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:99px; max-width:260px;
}
.caLabel{opacity:.6; font-size:11px; letter-spacing:.08em}
.caVal{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.caIcon{opacity:.65}
.burger{display:none; background:none; border:0; color:var(--cream); font-size:22px; cursor:pointer; padding:4px 8px}

/* --------------------------------------------------------------------- hero */
/* place-items:center START — the hero content hugs the left edge of the wrap instead of
   sitting dead centre, which is the single biggest change to the page's silhouette. */
.hero{position:relative; min-height:100svh; display:grid; place-items:center start; overflow:hidden; isolation:isolate}
.slides{position:absolute; inset:0; z-index:-2}
.slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.5s ease;
  animation:drift 22s ease-in-out infinite alternate;
}
.slide.on{opacity:1}
@keyframes drift{from{transform:scale(1.04)} to{transform:scale(1.14)}}
/* The scrim is weighted LEFT to match where the copy now sits, so the right-hand
   two-fifths of the keyart stays bright and the valley is actually visible. */
.heroScrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(11,51,59,.90) 0%, rgba(11,51,59,.72) 34%, rgba(11,51,59,.24) 68%, rgba(11,51,59,.34) 100%),
    linear-gradient(180deg, rgba(11,51,59,.58) 0%, rgba(11,51,59,.10) 30%, rgba(11,51,59,.52) 76%, rgba(11,51,59,.88) 100%);
}
/* Sized so wordmark → tagline → CTA → countdown all clear the fold on a
   720px-tall laptop. The gaps scale with viewport height, not just width.
   The left padding tracks the site wrap so the wordmark lines up with the nav logo. */
.heroInner{
  text-align:left; color:var(--cream);
  padding:clamp(56px,8vh,84px) 24px clamp(72px,10vh,100px)
          max(24px, calc((100vw - var(--wrap)) / 2));
  width:min(100%,760px); display:flex; flex-direction:column; align-items:flex-start;
}
.heroWord{width:min(70vw,clamp(250px,32vh,380px)); height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.tag{font-family:var(--display); font-size:clamp(20px,3vw,30px); margin:clamp(10px,1.6vh,16px) 0 0; letter-spacing:.005em; line-height:1.12}
.sub{font-size:clamp(14.5px,1.8vw,16.5px); opacity:.9; margin:clamp(8px,1.3vh,13px) 0 0; max-width:46ch}
.sub em{font-style:normal; color:var(--gold); font-weight:700}
.cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; margin-top:clamp(16px,2.6vh,26px)}

.countWrap{margin-top:clamp(20px,3.4vh,36px); width:auto}
.countLabel{font-family:var(--display); font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.75}
.count{display:flex; gap:9px; justify-content:flex-start; margin-top:9px}
.unit{
  background:rgba(255,246,227,.12); border:1px solid rgba(255,246,227,.28);
  border-radius:14px; padding:clamp(6px,1.1vh,10px) 4px; min-width:74px; backdrop-filter:blur(6px);
}
.unit b{font-family:var(--display); font-weight:400; display:block; font-size:clamp(24px,4vh,34px); line-height:1.05; font-variant-numeric:tabular-nums}
.unit span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; font-weight:600}
.countWhen{margin-top:10px; font-size:14.5px; font-weight:700; color:var(--gold)}
.count.live{gap:0}
.liveNow{font-family:var(--display); background:var(--green); color:var(--teal-d); font-size:24px; padding:14px 32px; border-radius:14px}

.caWide{
  margin-top:clamp(16px,2.6vh,28px); display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  background:rgba(255,246,227,.1); border:1px solid rgba(255,246,227,.3); color:var(--cream);
  font-family:var(--body); font-size:14px; padding:13px 20px; border-radius:99px; max-width:100%;
}
.caWide b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; overflow:hidden; text-overflow:ellipsis}
.caWide span:first-child{opacity:.6; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.warn{font-size:12px; opacity:.6; margin:clamp(8px,1.4vh,14px) 0 0; max-width:48ch}

/* Short laptops: drop the two lowest-priority lines rather than push the
   countdown under the fold. The CA stays one tap away in the sticky nav. */
@media (min-width:761px) and (max-height:760px){
  .sub{display:none}
  .warn{display:none}
}

/* The visible pill stays 9px, but the BUTTON is 45×45 so a thumb can actually hit it.
   content-box + padding grows the hit area without growing the art, and
   background-clip:content-box keeps the paint inside the 9px content box. The wrapper's
   `bottom` is pulled in by half the added height so the dots look where they always did. */
/* Dots move to the RIGHT edge now that the copy owns the left — centred dots under
   left-aligned copy read as a leftover from the old layout. */
.dots{position:absolute; bottom:8px; right:max(8px, calc((100vw - var(--wrap)) / 2)); left:auto;
      transform:none; display:flex; gap:0; z-index:2}
.dot{box-sizing:content-box; width:9px; height:9px; padding:18px; border-radius:99px;
     border:0; cursor:pointer; background:rgba(255,246,227,.4); background-clip:content-box;
     transition:width .25s, background .25s}
.dot.on{width:26px; background:var(--gold); background-clip:content-box}

/* ------------------------------------------------------------------ marquee */
.marquee{background:var(--gold); color:var(--ink); overflow:hidden; padding:12px 0;
         font-family:var(--display); font-size:14px; letter-spacing:.14em}
.mtrack{display:flex; width:max-content; animation:slide 34s linear infinite}
.mtrack span{padding-right:18px; white-space:nowrap}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ section shell */
.sec{max-width:var(--wrap); margin:0 auto; padding:96px 20px}
.sec.alt{max-width:none; background:var(--teal); color:var(--cream)}
.sec.alt > *{max-width:var(--wrap); margin-left:auto; margin-right:auto}
.h2{font-size:clamp(30px,5vw,50px)}
.lede{font-size:clamp(15px,2vw,18px); opacity:.75; margin:14px auto 0; max-width:58ch}
.eyebrow{display:block; font-family:var(--display); font-size:12.5px; letter-spacing:.2em;
         text-transform:uppercase; color:var(--gold-d); margin-bottom:10px}
.eyebrow.gold{color:var(--gold)}

.secHead.centre{text-align:center}
.secHead.centre .lede{margin-inline:auto}
.secHead.tight{margin-bottom:-8px}
.secHead.split{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap}
.splitNote{margin:0; opacity:.7; font-size:16px; max-width:34ch; text-align:right}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ------------------------------------------------ how · three stepped cards
   Not a zigzag. The three cards climb left to right, each one starting lower than
   the last — the section is shaped like the mound the game is named after, and it
   is the clearest signal that this is not the sibling project's layout with new copy. */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start}
.how .secHead{grid-column:1/-1}
.story{display:block; margin:0}
.story:nth-of-type(1){margin-top:104px}
.story:nth-of-type(2){margin-top:52px}
.story:nth-of-type(3){margin-top:0}
.storyArt{border-radius:22px; overflow:hidden; box-shadow:0 16px 34px rgba(42,32,24,.16); aspect-ratio:4/3}
.storyArt img{width:100%; height:100%; object-fit:cover}
/* The copy panel rides up over the bottom of its own art, so each card is one
   interlocked object rather than a picture with a caption under it. */
.storyText{
  position:relative; z-index:2; background:#fff; border:2px solid var(--sand-d);
  border-radius:20px; padding:30px 26px 26px; margin:-42px 14px 0;
  box-shadow:0 10px 28px rgba(42,32,24,.10);
}
.ghostNum{
  position:absolute; top:-30px; right:18px; font-family:var(--display); font-size:74px;
  line-height:1; color:transparent; -webkit-text-stroke:2px var(--sand-d);
  opacity:.55; pointer-events:none;
}
.storyText h3{font-size:clamp(24px,3vw,32px); margin-bottom:12px}
.storyText p{margin:0; opacity:.78; font-size:16px}

/* ------------------------------------------------------ chain · dark rail band */
.band{background:var(--teal-d); color:var(--cream); padding:72px 20px}
.chainRail{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  max-width:960px; margin:0 auto; position:relative;
}
/* Dashed rail sits behind the node circles and stops short of both ends. */
.chainRail::before{
  content:''; position:absolute; top:35px; left:9%; right:9%; height:3px;
  background:repeating-linear-gradient(90deg, rgba(255,246,227,.34) 0 9px, transparent 9px 19px);
}
.cnode{flex:1 1 120px; min-width:112px; text-align:center; position:relative; z-index:1}
.cnode b{
  display:grid; place-items:center; width:72px; height:72px; margin:0 auto 12px;
  border-radius:50%; background:var(--teal); border:3px solid rgba(255,246,227,.3); font-size:31px;
}
.cnode.gold b{background:var(--gold); border-color:var(--gold-d)}
.cnode span{font-family:var(--display); font-size:14px; letter-spacing:.02em}
.chainNote{text-align:center; max-width:56ch; margin:34px auto 0; font-size:15px; opacity:.72}

/* ------------------------------------------------------- build · bento grid */
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; grid-auto-flow:dense; margin-top:44px}
.bldg{
  background:#fff; border:2px solid var(--sand-d); border-radius:18px; padding:18px 19px;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:150px;
}
.bldg .cat{font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-d)}
.bldg h4{margin:8px 0 0; font-size:19px; display:flex; align-items:center; gap:9px}
.bldg p{margin:8px 0 0; font-size:14px; opacity:.72; line-height:1.5}
.bldg .io{margin-top:12px; font-size:13px; font-weight:700; background:var(--sand); border-radius:9px; padding:5px 10px; align-self:flex-start}

/* Tiles that span extra grid cells carry artwork. Without it the spanned cards
   were mostly empty gradient above the copy, which reads as a failed image
   rather than as deliberate space. The picture bleeds to the card's top edges
   (negative margins cancel the padding) and flex-grows to eat whatever height
   the span gives it, so the same rule works at every breakpoint. */
.bldg.feat{justify-content:flex-start; overflow:hidden}
.bArt{
  flex:1 1 auto; min-height:150px; width:calc(100% + 38px);
  margin:-18px -19px 15px; object-fit:cover;
  border-radius:16px 16px 0 0;      /* 18px card radius minus the 2px border */
}
/* Featured tiles: the extraction hero, the money-maker, and the crew anchor.
   grid-auto-flow:dense back-fills whatever holes the spans leave. */
.bento .bldg:nth-child(1){grid-column:span 2; grid-row:span 2; background:linear-gradient(160deg,#fff,var(--sand))}
.bento .bldg:nth-child(1) h4{font-size:26px}
.bento .bldg:nth-child(1) p{font-size:15.5px}
.bento .bldg:nth-child(7){grid-column:span 2; background:linear-gradient(160deg,var(--gold),#f7d98c)}
.bento .bldg:nth-child(7) .cat{color:var(--ink); opacity:.6}
.bento .bldg:nth-child(9){grid-column:span 2}
.buildCta{text-align:center; margin-top:44px}

/* ------------------------------------------------------------ board · ledger */
.boardBand{background:var(--teal-d); color:var(--cream)}
.boardWrap{max-width:var(--wrap); margin:0 auto}
.boardHead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.livePill{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  background:rgba(95,191,122,.16); border:1px solid rgba(95,191,122,.5);
  color:#8fe0a5; padding:8px 15px; border-radius:99px;
}
.livePill::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--green);
                  box-shadow:0 0 0 4px rgba(95,191,122,.25)}
.ledger{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 28px}
.ledger li{
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px;
  padding:11px 4px; border-bottom:1px solid rgba(255,246,227,.12); font-size:15px;
}
.ledger .rk{font-family:var(--display); opacity:.5; font-size:14px}
/* The name truncates; the `house` tag never does.
   min-width:0 on both is what actually lets the flex child shrink — without it a long
   name refuses to compress and pushes the tag out of the cell instead. */
.ledger .nm{display:flex; align-items:baseline; gap:7px; min-width:0}
.ledger .nmT{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ledger .sc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; color:var(--gold);
            font-variant-numeric:tabular-nums}
.ledger .tag{flex:none; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.42}
.ledger li:nth-child(1) .rk,.ledger li:nth-child(2) .rk,.ledger li:nth-child(3) .rk{opacity:1; color:var(--gold)}
/* `.ledger li` is a 34px/1fr/auto grid and out-specifies a bare `.ledgerSkel`, so the
   placeholder's text was being squeezed into the 34px rank column one word per line.
   Qualify the selector and span both columns of the outer grid. This only became
   visible once the board started shipping empty — before, seeded rows always replaced
   it within a frame. */
.ledger li.ledgerSkel{display:block; grid-column:1/-1; opacity:.55; padding:16px 4px;
                      border:0; font-size:14.5px}
.boardNote{margin:26px 0 0; font-size:13.5px; opacity:.6; max-width:62ch}

/* ------------------------------------------------------ token · split panel */
.tokSplit{display:grid; grid-template-columns:.92fr 1.08fr; gap:52px; align-items:start}
.tokLeft .h2{margin-bottom:18px}
.bigNum{
  font-family:var(--display); font-size:clamp(36px,5.4vw,62px); line-height:1;
  color:var(--gold); letter-spacing:-.005em; font-variant-numeric:tabular-nums;
}
.bigNumSub{margin:12px 0 26px; opacity:.8; font-size:16px}
.bigNumSub b{color:var(--gold)}
.tokH3{font-size:23px; margin-bottom:18px}
.perks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:p}
.perks li{
  position:relative; padding-left:46px; font-size:15.5px; opacity:.92; counter-increment:p;
}
.perks li::before{
  content:counter(p); position:absolute; left:0; top:1px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(245,196,81,.16); border:1.5px solid var(--gold);
  color:var(--gold); font-family:var(--display); font-size:14px;
}
.perks li b{color:var(--gold)}
.honest{
  margin:26px 0 0; font-size:14.5px; opacity:.82; background:rgba(0,0,0,.2);
  padding:18px 20px; border-radius:14px; border-left:4px solid var(--gold);
}

/* --------------------------------------------------- roadmap · horizontal rail */
/* VERTICAL rail, not a horizontal one. Four milestones side by side gave every entry
   the same weight and squeezed each into a 1/4 column; stacked, they read in order and
   the copy gets room. It also stops the section echoing the sibling project's timeline. */
.timeline{
  list-style:none; margin:52px auto 0; padding:0; position:relative;
  display:grid; grid-template-columns:1fr; gap:0; max-width:640px;
}
.timeline::before{content:''; position:absolute; top:14px; bottom:22px; left:12px; width:3px; background:var(--sand-d)}
.timeline li{position:relative; padding:0 0 34px 52px}
.timeline li:last-child{padding-bottom:0}
.tDot{
  position:absolute; top:2px; left:0; width:26px; height:26px; border-radius:50%;
  background:var(--cream); border:4px solid var(--sand-d);
}
.timeline li.done .tDot{background:var(--green); border-color:var(--green)}
.timeline li.now .tDot{background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 7px rgba(245,196,81,.26)}
.timeline li b{display:block; font-family:var(--display); font-weight:400; font-size:19px; margin-bottom:7px}
.timeline li.done b{color:#3f9b58}
.timeline li.now b{color:var(--gold-d)}
.timeline li span{font-size:14.5px; opacity:.74}

/* ---------------------------------------------------------- faq · two column */
.faqCols{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; margin-top:46px}
.faqCols details{background:rgba(255,246,227,.07); border:1px solid rgba(255,246,227,.22); border-radius:16px; overflow:hidden}
.faqCols summary{
  padding:17px 20px; cursor:pointer; font-family:var(--display); font-weight:400; font-size:17px;
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.faqCols summary::-webkit-details-marker{display:none}
.faqCols summary::after{content:'+'; font-size:23px; opacity:.5; line-height:1}
.faqCols details[open] summary::after{content:'−'}
.faqCols p{margin:0; padding:0 20px 19px; opacity:.78; font-size:14.5px}
.faqCols details[open]{background:rgba(255,246,227,.12)}

/* --------------------------------------------------- closer · full-bleed band */
.closer{
  position:relative; isolation:isolate; text-align:center; color:var(--cream);
  padding:110px 20px; background:url('/assets/img/keyart.jpg') center/cover no-repeat;
}
.closerScrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,51,59,.86), rgba(11,51,59,.93))}
.closerInner{max-width:var(--wrap); margin:0 auto}
.social{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:38px}

footer{background:var(--teal-d); color:var(--cream); text-align:center; padding:56px 20px 64px}
footer img{width:auto; height:40px; margin:0 auto 14px}
footer p{margin:6px auto; opacity:.8}
footer .fine{font-size:12.5px; opacity:.5; max-width:56ch; line-height:1.6}

.copied{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px);
  background:var(--teal-d); color:var(--cream); padding:12px 22px; border-radius:12px;
  font-weight:700; font-size:14px; opacity:0; pointer-events:none; z-index:150;
  max-width:min(92vw,520px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:opacity .25s, transform .25s;
}
.copied.show{opacity:1; transform:translate(-50%,0)}

/* ------------------------------------------------------------------ tablet */
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .bldg:nth-child(1){grid-column:span 2; grid-row:auto}
  .bento .bldg:nth-child(7),.bento .bldg:nth-child(9){grid-column:span 2}
  .tokSplit{grid-template-columns:1fr; gap:38px}
  /* The vertical rail already works at any width, so the timeline needs nothing here. */
  .how{grid-template-columns:repeat(2,1fr); gap:24px}
  .how .story:nth-of-type(1){margin-top:64px}
  .how .story:nth-of-type(2){margin-top:0}
  .how .story:nth-of-type(3){margin-top:0}
}
@media (max-width:860px){
  /* The stair needs three columns to read as a stair. Below that it is just three
     cards at random heights, so drop to one column and even the margins out. */
  .how{grid-template-columns:1fr; gap:0}
  .how .story{margin-top:44px}
  .how .story:nth-of-type(1),
  .how .story:nth-of-type(2),
  .how .story:nth-of-type(3){margin-top:44px}
  .storyText{margin:-34px 16px 0; padding:30px 24px 28px}
  .storyArt{aspect-ratio:16/9}
  .ghostNum{font-size:70px; top:-22px}
  .faqCols{grid-template-columns:1fr}
  .splitNote{text-align:left}
}
@media (max-width:760px){
  .navLinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--teal-d); padding:8px 0;
    border-bottom:1px solid rgba(255,246,227,.14);
  }
  .navLinks.open{display:flex}
  .navLinks a{padding:14px 20px; font-size:16px}
  .burger{display:block}
  .caChip{display:none}
  .navRight .btn{padding:10px 17px; font-size:15px}
  .sec{padding:66px 18px}
  .band{padding:52px 18px}
  .closer{padding:76px 18px}
  .unit{min-width:66px; padding:9px 3px}
  .count{gap:7px}
  .chainRail::before{display:none}
  .cnode{flex:1 1 44%}
  .honest{padding:16px 17px}
  /* The hero's left inset collapses to the section gutter — a wrap-derived inset on a
     375px screen leaves the wordmark hugging the bezel. */
  .heroInner{padding-left:18px; padding-right:18px; width:100%}
  .ledger{grid-template-columns:1fr}
  .dots{right:14px}
  .burger{padding:11px 14px; font-size:22px; line-height:1}
}
/* Short phones. On a 375×812 the hero lands with the anti-scam line ending EXACTLY on
   the fold — zero margin, so an iPhone SE, a landscape-ish window, or a browser with a
   taller URL bar pushes it under. Tighten the biggest offenders rather than let the one
   line that warns about fake contract addresses fall off the screen. */
@media (max-width:760px) and (max-height:780px){
  .heroWord{width:min(58vw,240px)}
  .heroInner{padding-top:clamp(36px,5vh,56px); padding-bottom:clamp(44px,6vh,64px)}
  .btn.big{padding:14px 26px; font-size:17px}
  .cta{gap:9px; margin-top:14px}
  .countWrap{margin-top:16px}
  .unit{padding:7px 3px}
  .caWide{margin-top:14px}
}
/* Below ~700px tall there is no arrangement that keeps everything. Drop the descriptive
   paragraph — the same trade the desktop short-viewport rule already makes. The line
   that stays is the one warning about fake contract addresses, because that one costs
   a reader money if they miss it. */
@media (max-width:760px) and (max-height:700px){
  .sub{display:none}
}
@media (max-width:460px){
  .bento{grid-template-columns:1fr}
  /* Four countdown boxes on one row at 375px leaves each ~78px wide; that still fits
     because .unit drops its min-width below and flexes. Keep them on ONE row — the
     countdown wrapping to two lines is what makes a launch page look unfinished. */
  .bento .bldg:nth-child(1),.bento .bldg:nth-child(7),.bento .bldg:nth-child(9){grid-column:span 1}
  .cta{flex-direction:column; width:100%}
  .cta .btn{width:100%}
  .unit{min-width:0; flex:1}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide{animation:none; transition:opacity .3s}
  .mtrack{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .btn{transition:none}
}