/* =========================================================================
   WISP — Firelit Games
   Palette and type are lifted from the game build (starmap-569) so the site
   and the client read as one thing.
   ========================================================================= */

:root{
  /* surfaces */
  --void:#070b14;
  --bg:#0a0f1c;
  --panel:#101a2e;
  --panel-2:#152340;
  --line:rgba(245,239,227,.14);
  --line-2:rgba(245,239,227,.26);

  /* ink */
  --cream:#f5efe3;              /* off-white, not #fff — less halation */
  --dim:rgba(245,239,227,.62);
  --dim-2:rgba(245,239,227,.44);

  /* accents, straight from the game's CSS custom properties */
  --gold:#f2a65a;
  --gold-l:#ffcf8a;
  --accent:#7fd1b9;
  --violet:#9d8fd6;
  --deep:#0f2e38;

  --measure:64ch;
  --radius:18px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
}

/* =========================================================================
   CROSS-BROWSER RESET (net-029)
   [stated] "zero out the css for all browsers, so the website appears the
   same in all browsers."

   Every rule below exists because one engine disagrees with the others about
   a default. Grouped by what they fix, with the offending engine named, so
   this stays maintainable rather than becoming a pile of copied boilerplate.
   ========================================================================= */

/* ---- the box model, once, for everything ---- */
*, *::before, *::after{ box-sizing:border-box; }

/* ---- margins nobody asked for ---- */
/* Every engine ships a different UA stylesheet for headings, lists,
   paragraphs, figure, fieldset and blockquote. Zero them and let the
   design own the spacing. */
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote,
dl, dd, ol, ul, fieldset, legend, pre{ margin:0; padding:0; }
ol, ul{ list-style:none; }

/* ---- text sizing under mobile rotation ---- */
/* Safari/iOS inflates text when a phone turns landscape unless told not to.
   -webkit- for Safari, -moz- for older Gecko, the standard property last. */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;   /* Safari's grey flash on tap */
}

/* ---- font rendering ---- */
/* Chrome/Safari on macOS render this palette noticeably heavier than Firefox
   does without these, which is the single most visible cross-browser
   difference on a dark background. */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---- media ---- */
/* Inline images sit on the text baseline by default, which leaves a few
   stray pixels under every one. display:block removes it everywhere. */
img, picture, video, canvas, svg, iframe{ display:block; max-width:100%; }
img, video{ height:auto; }
iframe{ border:0; }

/* ---- form controls ---- */
/* Controls do NOT inherit type from their ancestors in any engine, and each
   applies its own padding, border-radius and colours on top. */
button, input, select, textarea, optgroup{
  font:inherit; color:inherit; margin:0; background:transparent;
  letter-spacing:inherit;
}
button, [type='button'], [type='submit'], [type='reset']{
  -webkit-appearance:none; appearance:none;
  border:0; cursor:pointer; text-align:inherit;
}
/* Firefox draws a dotted inner focus ring on buttons that no other engine
   has, and adds its own inner border. */
::-moz-focus-inner{ border:0; padding:0; }
button::-moz-focus-inner, [type='button']::-moz-focus-inner,
[type='submit']::-moz-focus-inner, [type='reset']::-moz-focus-inner{
  border-style:none; padding:0;
}
/* Safari refuses to style date/search/number inputs without this. */
input{ -webkit-appearance:none; appearance:none; border-radius:0; }
[type='search']{ -webkit-appearance:textfield; outline-offset:-2px; }
::-webkit-search-decoration, ::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* Chrome's number spinners; Firefox's equivalent. */
::-webkit-outer-spin-button, ::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
[type='number']{ -moz-appearance:textfield; appearance:textfield; }
textarea{ resize:vertical; overflow:auto; }
/* Firefox dims disabled controls with its own opacity; match the others. */
:disabled{ opacity:1; cursor:default; }
/* Chrome's autofill paints a bright yellow box over dark fields. There is no
   way to set the background directly, so an inset shadow stands in for it. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
  caret-color:var(--cream);
  transition:background-color 9999s ease-out 0s;
}
::placeholder{ color:var(--dim-2); opacity:1; }   /* Firefox dims placeholders by default */

/* ---- focus ---- */
/* One visible ring, the same in every engine, and only for keyboard users.
   Firefox's own :-moz-focusring is folded in so older builds match. */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }
:-moz-focusring{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- tables, rules, small type ---- */
table{ border-collapse:collapse; border-spacing:0; }
hr{ height:0; color:inherit; border-top-width:1px; }
small{ font-size:80%; }
sub, sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sub{ bottom:-.25em; } sup{ top:-.5em; }
abbr[title]{ text-decoration:underline dotted; }
b, strong{ font-weight:bolder; }
code, kbd, samp, pre{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1em; }

/* ---- links ---- */
a{ color:inherit; text-decoration:none; background-color:transparent; }

/* ---- scrollbars ---- */
/* Firefox has the standard properties; Chrome/Safari need the -webkit-
   pseudo-elements. Both are given, so the page scrolls the same everywhere. */
*{ scrollbar-width:thin; scrollbar-color:rgba(245,239,227,.26) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(245,239,227,.22); border-radius:10px;
  border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(245,239,227,.34); background-clip:content-box; }

/* ---- selection ---- */
::selection{ background:rgba(242,166,90,.30); color:var(--cream); }
::-moz-selection{ background:rgba(242,166,90,.30); color:var(--cream); }

/* ---- the honeypot (net-029) ---- */
/* Taken out of the layout entirely rather than display:none — some bots
   skip anything with display:none or visibility:hidden, and the point is
   for it to look like an ordinary field to a script. */
.hp{ position:absolute!important; left:-9999px!important; top:-9999px!important;
  width:1px!important; height:1px!important; overflow:hidden!important;
  opacity:0!important; pointer-events:none!important; }

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}


*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font:400 17px/1.68 'Quicksand','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 0%,rgba(157,143,214,.16),transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 12%,rgba(127,209,185,.11),transparent 62%);
  background-attachment:fixed;
}

h1,h2,h3,h4{font-family:'Fredoka','Quicksand',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;margin:0}
p{margin:0}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace}
.wrap{width:min(1220px,100% - 64px);margin-inline:auto}
.measure{max-width:var(--measure)}

/* --- accessibility furniture ------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 22px;background:var(--gold);color:#241202;
  font:700 13px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  border-radius:0 0 10px 0;
}
.skip:focus{left:0}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- eyebrows and section headings -------------------------------------- */
.eyebrow{
  font:600 11px/1 ui-monospace,monospace;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);
}
.sec-head{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:clamp(24px,4vw,54px);margin-bottom:34px}
.sec-head h2{font-size:clamp(30px,3.4vw,42px);line-height:1.08;max-width:20ch}
.sec-head p{color:var(--dim);font-size:15.5px;max-width:46ch}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  font:700 13px/1.35 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
  min-height:48px;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* the primary fill is used for nothing else on the site */
.btn--steam{
  background:linear-gradient(135deg,var(--gold-l),var(--gold));
  color:#241202;box-shadow:0 12px 38px rgba(242,166,90,.34);
}
.btn--steam:hover{box-shadow:0 16px 46px rgba(242,166,90,.46)}

.btn--ghost{
  border-color:var(--line-2);background:rgba(16,26,46,.7);color:var(--cream);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

.btn--sm{padding:12px 20px;font-size:11.5px;min-height:44px}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:13.5px;color:var(--dim-2);margin-top:14px}

/* --- header ------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(7,11,20,.78);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line);background:rgba(7,11,20,.94)}
.site-head .wrap{display:flex;align-items:center;gap:26px;min-height:62px;padding-block:8px}
.wordmark{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font:700 15px/1 'Fredoka','Quicksand',system-ui,sans-serif;letter-spacing:.36em;text-transform:uppercase;
}
.wordmark img{width:26px;height:26px;border-radius:7px}
.site-nav{display:flex;gap:24px;margin-left:auto}
.site-nav a{
  text-decoration:none;color:var(--dim);
  font:600 11.5px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
}
.site-nav a:hover{color:var(--cream)}
/* [stated] "Make the enter the Alpha button always visible."
   It used to start at opacity:0 and fade in only once .is-stuck was set,
   which happens after 70vh of scrolling — so the one button the whole site
   exists to get pressed was invisible for the entire first screen. Three
   pages (press, privacy, terms) had already been given inline overrides to
   undo it, which is the tell that the default was wrong rather than that
   those pages were special. The transition stays for the hover/focus states
   the .btn rules bring with them. */
.head-cta{opacity:1;transform:none;pointer-events:auto;transition:.25s ease}
@media (max-width:900px){
  .site-nav{display:none}
  .head-cta{margin-left:auto}
}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;padding:clamp(38px,6vw,74px) 0 clamp(52px,7vw,86px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,66px);align-items:center}
.hero__eyebrow{margin-bottom:22px}
.hero h1{
  font-size:clamp(50px,7.4vw,94px);line-height:.98;letter-spacing:-.038em;margin-bottom:20px;
}
.hero h1 .spark{
  background:linear-gradient(98deg,var(--gold-l) 0%,var(--gold) 32%,var(--violet) 72%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{font-size:clamp(18px,1.5vw,21px);line-height:1.62;color:var(--dim);max-width:46ch;margin-bottom:30px}

/* fanned cards */
.fan{position:relative;aspect-ratio:1/.86;display:grid;place-items:center}
.fan__card{
  position:absolute;width:56%;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.66);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.fan__card img{width:100%;display:block}
.fan__card--l{left:2%;top:11%;transform:rotate(-10deg)}
.fan__card--c{z-index:3;transform:rotate(1deg) scale(1.08);box-shadow:0 40px 100px rgba(0,0,0,.72),0 0 60px rgba(127,209,185,.14)}
.fan__card--r{right:2%;top:13%;transform:rotate(10deg)}
@media (prefers-reduced-motion:no-preference){
  .fan:hover .fan__card--l{transform:rotate(-14deg) translate(-5%,-3%)}
  .fan:hover .fan__card--r{transform:rotate(14deg) translate(5%,-3%)}
  .fan:hover .fan__card--c{transform:rotate(0deg) scale(1.12) translateY(-2%)}
}

/* drifting motes — decorative only, killed under reduced motion */
.motes{position:absolute;inset:0;pointer-events:none;z-index:0}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:.5;
  animation:drift linear infinite}
@keyframes drift{
  from{transform:translate3d(0,14vh,0);opacity:0}
  12%{opacity:.55}
  88%{opacity:.4}
  to{transform:translate3d(2vw,-16vh,0);opacity:0}
}
@media (prefers-reduced-motion:reduce){.motes{display:none}}

/* --- what is wisp: the literal, server-rendered fact band ---------------- */
.facts{border-block:1px solid var(--line);background:rgba(7,11,20,.5)}
.facts .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,56px);padding-block:clamp(34px,4vw,48px)}
.facts h2{font-size:26px;margin-bottom:12px}
.facts p{color:var(--dim);font-size:16.5px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:0;
  font:12.5px/1.5 ui-monospace,monospace;align-content:start}
.facts dt{color:var(--dim-2);letter-spacing:.14em;text-transform:uppercase;font-size:11px;align-self:center}
.facts dd{margin:0;color:var(--cream);text-align:right}

/* --- trailer facade ----------------------------------------------------- */
.trailer{padding:clamp(52px,7vw,86px) 0}
.facade{
  position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;
  border-radius:var(--radius);overflow:hidden;background:#000;
  box-shadow:var(--shadow);aspect-ratio:16/9;
}
.facade img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .3s ease,transform .5s ease}
.facade:hover img{opacity:.86;transform:scale(1.02)}
.facade__play{
  position:absolute;inset:0;display:grid;place-items:center;gap:14px;align-content:center;
}
.facade__play > span:first-child{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  background:rgba(242,166,90,.94);color:#241202;font-size:28px;padding-left:6px;
  box-shadow:0 14px 44px rgba(0,0,0,.5);transition:transform .25s ease;
}
.facade:hover .facade__play > span:first-child{transform:scale(1.08)}
.facade__label{
  font:700 12px/1 ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- feature beats ------------------------------------------------------ */
.beats{padding:clamp(20px,3vw,34px) 0 clamp(52px,7vw,80px);display:grid;gap:clamp(52px,7vw,92px)}
.beat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.beat:nth-child(even) .beat__art{order:-1}
.beat__n{margin-bottom:16px}
.beat h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;margin-bottom:16px}
.beat p{color:var(--dim);font-size:17px;line-height:1.72;max-width:44ch}
.beat p + p{margin-top:14px}
.beat__stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.beat__stats div{font:600 11px/1.4 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.beat__stats b{display:block;font:600 30px/1 'Fredoka','Quicksand',sans-serif;letter-spacing:-.02em;
  color:var(--accent);text-transform:none;margin-bottom:5px}

.panel{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(168deg,var(--panel),#0a1220);box-shadow:var(--shadow);
}

/* brain viewer */
.brainviz{padding:22px}
.brainviz__grid{display:grid;grid-template-columns:repeat(16,1fr);gap:5px}
.brainviz__grid i{aspect-ratio:1;border-radius:3px;background:rgba(127,209,185,.09)}
.brainviz__meta{display:flex;justify-content:space-between;gap:16px;margin-top:16px;
  font:11.5px/1.5 ui-monospace,monospace;color:var(--dim-2);letter-spacing:.08em}
.brainviz__meta b{color:var(--accent);font-weight:600}

/* lexicon */
.lex{padding:24px;display:grid;gap:12px}
.lex__row{display:grid;grid-template-columns:96px 1fr 46px;gap:14px;align-items:center;
  font:12.5px/1 ui-monospace,monospace}
.lex__row span:first-child{color:var(--cream);letter-spacing:.06em}
.lex__bar{height:7px;border-radius:4px;background:rgba(245,239,227,.09);overflow:hidden}
.lex__bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--gold))}
.lex__row em{font-style:normal;color:var(--dim-2);text-align:right}
.lex__row.is-new span:first-child{color:var(--gold)}
.lex__note{border-top:1px dashed var(--line);padding-top:14px;margin-top:4px;
  font:12px/1.7 ui-monospace,monospace;color:var(--dim-2)}
.lex__note b{color:var(--cream);font-weight:400}

/* lineage */
.lineage{padding:24px}
.lineage__row{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.lineage__row .cell{width:72px}
.lineage__rule{height:1px;background:var(--line);margin:6px 0 16px}
.cell{background:radial-gradient(ellipse at 50% 38%,#173d4b,#0a1725 74%);border-radius:12px;
  border:1px solid var(--line);display:grid;place-items:center;aspect-ratio:1;overflow:hidden}
.cell svg{width:88%}

/* --- shared worlds ------------------------------------------------------ */
.shared{
  position:relative;padding:clamp(56px,7vw,92px) 0;border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(157,143,214,.10),transparent 60%);
}
.shared .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.shared h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;margin-bottom:16px}
.shared p{color:var(--dim);font-size:17px;line-height:1.72;max-width:46ch}
.shared__art{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  position:relative;aspect-ratio:16/10;background:#060b14}
.shared__art img{width:100%;height:100%;object-fit:cover;opacity:.9}
.shared__pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%)}
.pin i{display:block;width:12px;height:12px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(127,209,185,.2),0 0 18px var(--accent)}
.pin b{position:absolute;left:20px;top:-4px;white-space:nowrap;
  font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:rgba(7,11,20,.8);border:1px solid var(--line);
  padding:5px 8px;border-radius:7px}

/* --- the codex ---------------------------------------------------------- */
.codex{padding:clamp(56px,7vw,86px) 0}
.codex__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
.spec{border-radius:16px;padding:1.5px;
  background:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.04) 44%,rgba(255,255,255,.22));
  transition:transform .24s ease,box-shadow .24s ease}
@media (prefers-reduced-motion:no-preference){
  .spec:hover{transform:translateY(-7px) rotate(-1.1deg);box-shadow:0 26px 58px rgba(0,0,0,.58)}
}
.spec__in{border-radius:15px;background:linear-gradient(176deg,#132038,#0a1220);overflow:hidden}
.spec__art{aspect-ratio:1/1.06;display:grid;place-items:center;position:relative;
  background:radial-gradient(ellipse at 50% 36%,#1a4353,#0a1725 74%)}
.spec__art::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:linear-gradient(116deg,transparent 34%,rgba(255,255,255,.22) 47%,transparent 57%)}
.spec__art svg{width:82%;position:relative;z-index:2}
.spec__rar{position:absolute;top:8px;right:8px;z-index:3;
  font:700 8.5px/1 ui-monospace,monospace;letter-spacing:.15em;
  padding:5px 7px;border-radius:5px;background:rgba(7,11,20,.86);color:var(--accent)}
.spec__rar[data-r="rare"]{color:var(--gold-l)}
.spec__rar[data-r="mythic"]{color:var(--violet)}
.spec__meta{padding:11px 12px 14px}
.spec__meta b{display:block;font:600 13.5px/1.2 'Fredoka','Quicksand',sans-serif;letter-spacing:0;margin-bottom:5px}
.spec__meta span{display:block;font:9.5px/1.55 ui-monospace,monospace;color:var(--dim-2);letter-spacing:.05em}
.spec__genes{display:flex;gap:2px;margin-top:9px}
.spec__genes i{height:4px;flex:1;border-radius:2px}

/* --- scale rail --------------------------------------------------------- */
.scale{border-block:1px solid var(--line);background:rgba(7,11,20,.5)}
.scale .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:30px;flex-wrap:wrap}
.scale__step{display:flex;align-items:center;gap:12px;
  font:600 11.5px/1.3 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.scale__step i{border-radius:50%;flex:none}
.scale__step:nth-of-type(1) i{width:9px;height:9px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.scale__step:nth-of-type(2) i{width:14px;height:14px;background:var(--gold);box-shadow:0 0 16px var(--gold)}
.scale__step:nth-of-type(3) i{width:20px;height:20px;background:var(--violet);box-shadow:0 0 20px var(--violet)}
.scale__step:nth-of-type(4) i{width:26px;height:26px;
  background:radial-gradient(circle,#fff,var(--accent) 38%,transparent 72%)}
.scale__arrow{color:var(--dim-2)}

/* --- waitlist ----------------------------------------------------------- */
.waitlist{padding:clamp(56px,7vw,92px) 0}
.waitlist__card{
  border:1px solid var(--line);border-radius:26px;padding:clamp(32px,5vw,58px);
  background:linear-gradient(158deg,var(--panel-2),#080d18);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;
}
.waitlist h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;margin-bottom:14px}
.waitlist p{color:var(--dim);max-width:48ch}
.waitlist ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.waitlist li{position:relative;padding-left:20px;font-size:15px;color:var(--dim);line-height:1.6}
.waitlist li::before{content:'';position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--accent)}
.form{display:grid;gap:12px}
.form label{font:600 11px/1 ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.form input{
  padding:17px 20px;border-radius:14px;border:2px solid var(--line);
  background:rgba(7,11,20,.7);color:var(--cream);font:16px/1.2 inherit;width:100%;min-height:48px;
}
.form input::placeholder{color:var(--dim-2)}
.form input:focus{border-color:var(--accent);outline:none}
.form small{font-size:12.5px;color:var(--dim-2);line-height:1.6}
.form__ok,.form__err{display:none;padding:16px 18px;border-radius:14px;font-size:15px;line-height:1.55}
.form__ok{border:1px solid rgba(127,209,185,.4);background:rgba(127,209,185,.1);color:var(--accent)}
.form__err{border:1px solid rgba(242,166,90,.45);background:rgba(242,166,90,.1);color:var(--gold-l)}
.form__err a{color:inherit}
.form.is-done .form__ok{display:block}
.form.is-failed .form__err{display:block}
.form.is-done > :where(label,input,button,small,p[hidden]){display:none}

/* ---- the note shown after applying (net-028) ----
   It replaces the form in place rather than opening anything, so the answer
   to "did that work" is exactly where the button was. */
.ok__title{font-size:21px;line-height:1.25;margin:0 0 8px;color:var(--accent)}
.ok__lede{margin:0 0 14px;color:var(--ink)}
/* The numbers ARE the markers here, so the section's dot bullet is dropped —
   and the reset's blanket `ol,ul{list-style:none}` has to be put back for
   this one list, or the steps lose the numbering they are written around. */
.ok__steps{margin:0 0 16px;padding-left:22px;display:grid;gap:9px;color:var(--ink);
  list-style:decimal outside}
.ok__steps::marker,.ok__steps li::marker{color:var(--accent)}
.ok__steps li::before{content:none !important}
.ok__steps li{position:static;padding-left:0}
.ok__steps li{line-height:1.5}
.ok__steps b{color:var(--accent)}
.ok__cta{margin:0 0 12px}
.ok__foot{display:block;opacity:.7;font-size:13px}
.form__ok .btn{display:inline-block}
.form button[disabled]{opacity:.6;cursor:progress}

/* --- studio note -------------------------------------------------------- */
.studio{padding:0 0 clamp(56px,7vw,86px)}
.studio__card{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3.5vw,40px);
  background:rgba(16,26,46,.55);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.studio__card img{width:78px;height:78px;border-radius:16px;border:1px solid var(--line)}
.studio h2{font-size:24px;margin-bottom:12px}
.studio p{color:var(--dim);font-size:16px;max-width:70ch}
.studio p + p{margin-top:12px}

/* --- footer ------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);background:var(--void);padding:clamp(40px,5vw,58px) 0 34px}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.site-foot h3{font:600 11px/1 ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:16px}
.site-foot ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.site-foot a{color:var(--dim);text-decoration:none;font-size:14.5px}
.site-foot a:hover{color:var(--cream);text-decoration:underline}
.legal{border-top:1px solid var(--line);margin-top:36px;padding-top:24px;
  font:11.5px/1.75 ui-monospace,monospace;color:var(--dim-2);max-width:96ch}

/* --- reveal on scroll ---------------------------------------------------
   Gated on .js (set by an inline script in <head>) so that with JavaScript
   blocked or broken the content is simply visible rather than invisible. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .js .reveal.is-in{opacity:1;transform:none}
}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .codex__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .wrap{width:min(1220px,100% - 40px)}
  .hero .wrap,.facts .wrap,.beat,.shared .wrap,.waitlist__card{grid-template-columns:1fr}
  .beat:nth-child(even) .beat__art{order:0}
  .facts dl{margin-top:6px}
  .facts dd{text-align:left}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
  .studio__card{grid-template-columns:1fr}
  /* Text first on small screens: the hero CTA has to clear the fold, and a
     full-width card fan would push it a screen and a half down. */
  .hero .fan{max-width:430px;margin:8px auto 0;width:100%}
}
@media (max-width:560px){
  .codex__grid{grid-template-columns:repeat(2,1fr)}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .site-foot .wrap{grid-template-columns:1fr}
  .site-head .wrap{gap:12px}
  .btn--sm{padding:11px 15px;font-size:10.5px;letter-spacing:.1em}
  .wordmark{font-size:13px;letter-spacing:.24em}
  .shots{grid-template-columns:1fr}
}