/* ══ THE FRONT DOOR ═══════════════════════════════════════════════
   The page Ido sends to a stranger. It has one job: make them open
   the game. Everything here is either proof or an answer to the
   question that stops people from starting.
   ═══════════════════════════════════════════════════════════════ */

/* style.css paints two FIXED layers on body::before/::after and lifts #app
   above them with z-index:2. This page has no #app, so it must lift itself
   or every word lands underneath the world-light. */
.st{ position:relative; z-index:2; }
.skip{ z-index:3; }

.st-wrap{ max-inline-size:min(1080px, 92vw); margin-inline:auto; }

/* ── hero ─────────────────────────────────────────────────────── */
.st-hero{ padding-block:clamp(40px,9vh,90px) clamp(30px,6vh,54px); text-align:center; }
.st-mark{
  inline-size:clamp(78px,18vw,104px); aspect-ratio:1; object-fit:contain; margin-inline:auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 0 93%,transparent 99%);
          mask-image:radial-gradient(closest-side,#000 0 93%,transparent 99%);
  mix-blend-mode:screen; filter:drop-shadow(0 0 26px rgba(46,123,255,.42));
}
.st-kick{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-3); margin-block:16px 10px;
}
.st-hero h1{
  font-size:clamp(1.9rem,6.6vw,3.5rem); line-height:1.1; margin:0 0 18px; text-wrap:balance;
}
.st-hero h1 span{ color:var(--neon); }
.st-lead{
  font-size:clamp(1rem,2.4vw,1.18rem); color:var(--txt-2);
  max-inline-size:44ch; margin:0 auto 30px;
}
.st-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; }
.st-note{ font-size:.84rem; color:var(--txt-3); margin-block-start:14px; }

/* ── the wall of work ─────────────────────────────────────────── */
.st-sec{ padding-block:clamp(38px,7vh,68px); }
.st-sec h2{
  font-size:clamp(1.35rem,4vw,2rem); margin:0 0 10px; text-align:center; text-wrap:balance;
}
.st-sub{ text-align:center; color:var(--txt-3); max-inline-size:52ch; margin:0 auto 30px; }

.st-wall{
  display:grid; gap:12px;
  /* nine tiles: 300px keeps it at three columns on a desktop, so they land
     3-3-3 instead of 4-4-and-one-lonely-tile */
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
}
.st-tile{
  position:relative; border-radius:var(--r-m); overflow:hidden;
  border:1px solid var(--line); background:#080a14; aspect-ratio:16/10;
}
.st-tile video, .st-tile img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
}
.st-tile b{
  position:absolute; inset-block-end:0; inset-inline:0; padding:22px 14px 10px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:#dce6fb; background:linear-gradient(0deg, rgba(4,6,12,.9), transparent);
}

/* ── the three fears ──────────────────────────────────────────── */
.st-fears{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.st-fear{
  border:1px solid var(--line); border-radius:var(--r-l); padding:24px 22px;
  background:linear-gradient(165deg,#0d1122,#080a14);
}
.st-fear b{ display:block; font-family:var(--f-display); font-size:1.05rem; margin-block-end:8px; }
.st-fear p{ margin:0; color:var(--txt-2); font-size:.95rem; }

/* ── how it works ─────────────────────────────────────────────── */
.st-steps{ counter-reset:st; display:grid; gap:12px; max-inline-size:640px; margin-inline:auto; }
.st-step{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line-soft); border-radius:var(--r-m); padding:18px 20px; background:#0a0d1a;
}
.st-step::before{
  counter-increment:st; content:counter(st);
  font-family:var(--f-mono); font-weight:700; font-size:.82rem; color:var(--neon);
  background:rgba(77,168,255,.12); border:1px solid var(--line);
  inline-size:30px; block-size:30px; border-radius:9px; display:grid; place-items:center; flex:none;
}
.st-step div{ flex:1; }
.st-step b{ display:block; margin-block-end:3px; }
.st-step p{ margin:0; color:var(--txt-3); font-size:.92rem; }

/* ── faq ──────────────────────────────────────────────────────── */
.st-faq{ max-inline-size:680px; margin-inline:auto; display:grid; gap:10px; }
.st-q{
  border:1px solid var(--line); border-radius:var(--r-m); background:#0a0d1a; overflow:hidden;
}
.st-q summary{
  cursor:pointer; padding:17px 20px; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.st-q summary::-webkit-details-marker{ display:none; }
.st-q summary::after{ content:"+"; color:var(--neon); font-family:var(--f-mono); flex:none; }
.st-q[open] summary::after{ content:"−"; }
.st-q p{ margin:0; padding:0 20px 18px; color:var(--txt-2); font-size:.95rem; }
.st-q summary:focus-visible{ outline:2px solid var(--neon); outline-offset:-2px; }

/* ── the close ────────────────────────────────────────────────── */
.st-end{
  text-align:center; border:1px solid rgba(77,168,255,.4); border-radius:var(--r-xl);
  padding:clamp(30px,6vw,52px) 24px; margin-block:20px 40px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(46,123,255,.13), transparent 66%), #0a0d1a;
}
.st-end h2{ margin-block-end:12px; }
.st-help{
  font-size:.9rem; color:var(--txt-3); margin-block-start:22px;
  padding-block-start:18px; border-block-start:1px solid var(--line-soft);
}
.st-help a{ color:var(--neon); text-decoration:underline; text-underline-offset:3px; }

.st-foot{
  text-align:center; color:var(--txt-3); font-size:.8rem;
  padding-block:26px 46px; border-block-start:1px solid var(--line-soft);
}
.st-foot a{ color:var(--txt-2); text-decoration:underline; text-underline-offset:3px; }

/* Reduced motion gets the still frame, not an empty hole: a paused <video>
   keeps showing its poster, so nothing needs hiding — the script just never
   presses play. */