/* ============================================================
   MOONPAD — shared app shell
   The homepage is the benchmark; every app page loads this so the nav,
   background, type scale, cards, and buttons are one system. Tokens and values
   mirror landing.css. Load this AFTER the page's own reset if any.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Instrument+Sans:wght@400;500;600&family=Silkscreen&family=Space+Mono:wght@400;700&display=swap");

:root{
  --bg:#08090D; --panel:#15171d; --panel-2:#1a1d24;
  --line:rgba(232,236,228,.08); --line-strong:rgba(232,236,228,.16);
  --text:#E9ECE4; --dim:#8B9094; --faint:#5A5F64;
  --phos:#C9F53F; --phos-soft:rgba(201,245,63,.14); --phos-line:rgba(201,245,63,.35);
  --display:'Archivo',system-ui,sans-serif; --body:'Instrument Sans',system-ui,sans-serif;
  --px:'Silkscreen',monospace; --mono:'Space Mono',monospace;
  --gutter:clamp(20px,4vw,64px); --max:1440px;
}
body{background:var(--bg);color:var(--text);font-family:var(--body)}
/* prose/content links use the lime accent, never the browser's default blue.
   Nav links, buttons and the footer set their own colour and are unaffected. */
a{color:var(--phos)}
a:hover{color:var(--text)}

/* ---------- shared background ---------- */
#field-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 20%,transparent 78%);
}

/* ---------- shared nav (pixel-identical to the homepage) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.nav.scrolled{background:rgba(8,9,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:76px;display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--px);font-size:15px;letter-spacing:.14em;color:var(--text)}
.logo img{display:block}
.nav-links{display:flex;gap:34px;margin-left:16px}
.nav-links a{font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--dim);position:relative;transition:color .2s ease;padding:6px 0;white-space:nowrap}
.nav-links a.here,.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--phos);transition:left .22s ease,right .22s ease}
.nav-links a:hover::after,.nav-links a.here::after{left:0;right:0}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:28px}
.xlink{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--faint);flex:none;transition:color .2s ease}
.xlink:hover{color:var(--text)}
.xlink svg{display:block;width:16px;height:16px;fill:currentColor}

/* ---------- shared type scale ---------- */
.eyebrow{font-family:var(--px);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--phos);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--phos-line)}
.h-xl,.app-main h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-.03em}
.h-lg,.app-main h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1.05;letter-spacing:-.025em}
.lede{color:var(--dim);font-size:clamp(16px,1.2vw,19px);line-height:1.65;max-width:60ch}
.mono-note{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.02em}

/* ---------- shared buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:14px;padding:14px 26px;border-radius:2px;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .25s;
  /* reset native button chrome so <button class="btn"> isn't a white UA button */
  background:transparent;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;text-decoration:none;color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--phos);color:#0A0C08}
/* color restated: the generic a:hover above outranks .btn-solid on hover and
   was turning the label white — the "glow" was white text smearing on lime */
.btn-solid:hover{background:#daff52;color:#0A0C08}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--phos-line);color:var(--phos)}
.btn .arrow{transition:transform .2s;display:inline-block}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- shared card language ---------- */
.card{position:relative;background:linear-gradient(180deg,#191b21,#131519);border:1px solid var(--line);transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--phos-line);transform:translateY(-3px)}

/* ---------- FAQ accordion (shared) ---------- */
.faq-groups{max-width:760px}
.faq-sub{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:36px 0 4px}
.faq-sub:first-child{margin-top:0}
.acc{border-top:1px solid var(--line)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;text-align:left;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--text);transition:color .2s ease;background:none;border:0;cursor:pointer}
.acc-q:hover{color:var(--phos)}
.acc-mark{font-family:var(--mono);font-size:18px;color:var(--phos);flex:none;transition:transform .3s ease;line-height:1}
.acc.open .acc-mark{transform:rotate(45deg)}
.acc-a{height:0;overflow:hidden}
.acc-a-in{padding:2px 0 20px;color:var(--dim);font-size:15px;line-height:1.62;max-width:60ch}

/* ---------- shared footer ---------- */
.app-foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:26px var(--gutter);
  text-align:center;color:var(--faint);font:12px var(--mono);letter-spacing:.04em}
.app-foot a{color:var(--dim)}
.app-foot a:hover{color:var(--phos)}

/* ---------- app main shell ---------- */
.app-main{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:clamp(120px,15vh,180px) var(--gutter) clamp(80px,10vw,140px)}
.app-main .eyebrow{margin-bottom:22px}
.app-main h1{margin-bottom:18px}
.app-main .lede{margin-bottom:clamp(40px,5vw,64px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--phos);outline-offset:3px}

/* ---------- page transitions (cross-document View Transitions) ---------- */
@view-transition{navigation:auto}
/* nav, field and grid persist as their own groups — never crossfaded */
.nav{view-transition-name:site-nav}
#field-canvas{view-transition-name:site-field}
.bg-grid{view-transition-name:site-grid}
::view-transition-group(site-nav),::view-transition-group(site-grid){animation-duration:.01ms}
::view-transition-old(site-field),::view-transition-new(site-field){animation:none;mix-blend-mode:normal}
/* everything else (the content) gets the swap */
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .35s ease .05s both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media (max-width:720px){ .nav-links{display:none} }