/* Shared by every page: brand tokens, reset, sticky header + nav, buttons.
   Page layout stays in each page's <style>; the text pages add doc.css. */
:root{
  /* Ground/text mirror the app's light chrome (packages/core surfaceTokens);
     orange is the Electric brand hue (packages/core brandPalettes). --faint
     darkens the app's #999 textMuted so caption-size text holds WCAG AA. */
  --paper:#F5F5F5; --card:#FFFFFF; --soft:#FAFAFA;
  --ink:#333333; --muted:#666666; --faint:#767676;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.16);
  --orange:#FF5A00; --orange-ink:#E8590C; --orange-wash:#FFF1EA;
  --green:#1F9D5B; --amber:#E07B00; --red:#E0413A;
  --display:'Bricolage Grotesque',-apple-system,sans-serif;
  --body:'Hanken Grotesk',-apple-system,sans-serif;
  --r:14px; --r-lg:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
picture{display:block}
input,button{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.accent{color:var(--orange-ink)}
.mark{color:var(--orange);font-style:normal}

/* translateZ(0): own GPU layer for the blurred sticky header, against scroll flicker. */
header{position:sticky;top:0;z-index:40;background:rgba(245,245,245,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transform:translateZ(0)}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:70px}
/* Wordmark matches the app's BrandWordmark (@next/ui): system bold `next▸game`,
   ▸ in the brand hue; the squircle badge is the app-icon mark (Electric). */
.logo{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:27px;letter-spacing:.02em;display:inline-flex;align-items:center;white-space:nowrap}
.logo-badge{width:1.26em;height:1.26em;flex:none;margin-right:.4em}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--ink)}
.navlinks a[aria-current=page]{font-weight:600}
/* .navlinks a out-specifies .btn-primary — keep the filled CTA white. */
.navlinks a.btn-primary,.navlinks a.btn-primary:hover{color:#fff}
@media(max-width:720px){.navlinks .lnk{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  border-radius:999px;padding:12px 24px;cursor:pointer;border:1px solid transparent;transition:transform .18s,background .2s,border-color .2s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{transform:translateY(-1px);background:#F25200}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn svg{transition:transform .2s}
.btn:hover svg.arr{transform:translateX(3px)}
.nav-cta{padding:9px 18px;font-size:14px}