/* AION Companion: the concept page's stylesheet, shared by the fan hub pages (extracted by gen_site.py). */

/* =====================================================================================
   TOKENS. Default = ELYOS DAWN (pearl, navy ink, azure to press, Daeva gold filigree).
   ASMODIAN NIGHT (aubergine, silver-violet ink, crimson to press, silver filigree) follows
   the system's dark mode unless the visitor picks a side; the picker writes data-theme.
   Values are the app skin's own (games/aion2/theme.css).
   ===================================================================================== */
:root{
  --bg:#eef2f8; --bg-2:#fbfcfe; --bg-3:#dee5f0;
  --ink:#121a33; --ink-2:#3b4766; --ink-3:#4a5572;
  --rule:rgba(30,80,160,.16); --rule-2:rgba(30,80,160,.32);
  --accent:#1f8fe0; --accent-ink:#0f5fae; --link-hover:#0a447f;
  --name:#7d5a17;                                  /* gold dark enough to read on pearl */
  --orn:rgba(176,138,62,.62); --spark:#d4ab52;     /* filigree + the spark on a rule */
  --hot:#1f8fe0; --hot-rgb:31,143,224;
  --card:linear-gradient(180deg,rgba(255,255,255,.88),rgba(247,249,253,.80));
  --card-b:rgba(30,80,160,.22); --card-hover:rgba(30,110,210,.38);
  --soft:rgba(30,90,170,.05); --soft-2:rgba(30,90,170,.10);
  --shadow:0 10px 26px rgba(20,40,90,.10);
  --pr-fill:linear-gradient(180deg,#b0ebff 0%,#56cfff 42%,#2aa6ee 100%); --pr-ink:#04142a;
  --pr-ring:linear-gradient(180deg,#fff5d8,#c9a24f); --pr-band:#04142a;
  --gh-fill:rgba(255,255,255,.72); --gh-ring:linear-gradient(180deg,rgba(30,80,160,.45),rgba(176,138,62,.7)); --gh-ink:#16305a;
  --pill-ink:#5e430c; --pill-bg:linear-gradient(180deg,#fffbf0,#f3e0b0); --pill-b:rgba(176,138,62,.8); --pill-dot:#c9a24f;
  --nav-bg:rgba(238,242,248,.86);
  --sky:
    radial-gradient(420px 220px at 6% -40px, rgba(255,248,228,1), rgba(255,234,186,.55) 44%, transparent 76%),
    radial-gradient(520px 34px at 62% 46px, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(360px 22px at 86% 96px, rgba(255,255,255,.42), transparent 72%),
    radial-gradient(1200px 140px at 50% 100%, rgba(255,226,164,.42), transparent 72%),
    linear-gradient(180deg,#9ccaf2 0%,#bcdcf6 16%,#dde9f6 40%,#e8eff8 72%,#eeebe3 100%);
  color-scheme:light;
}
:root[data-theme="asmodian"]{
  --bg:#120a1e; --bg-2:#1a0f28; --bg-3:#251637;
  --ink:#eeeaf7; --ink-2:#c4bad6; --ink-3:#a99dc0;
  --rule:rgba(190,160,240,.16); --rule-2:rgba(190,160,240,.32);
  --accent:#a88bff; --accent-ink:#c8b6ff; --link-hover:#e8ddff;
  --name:#ff95a3;
  --orn:rgba(206,196,232,.50); --spark:#ff5470;
  --hot:#e0405c; --hot-rgb:224,64,92;
  --card:linear-gradient(180deg,rgba(46,27,68,.78),rgba(24,14,38,.80));
  --card-b:rgba(190,160,240,.24); --card-hover:rgba(168,139,255,.46);
  --soft:rgba(190,160,240,.06); --soft-2:rgba(190,160,240,.12);
  --shadow:0 14px 34px rgba(0,0,0,.46);
  --pr-fill:linear-gradient(180deg,#e8576d 0%,#bb2340 40%,#86122c 100%); --pr-ink:#fff4f5;
  --pr-ring:linear-gradient(180deg,rgba(246,238,255,.95),rgba(186,170,226,.75)); --pr-band:#fff1f3;
  --gh-fill:rgba(26,15,40,.72); --gh-ring:linear-gradient(180deg,rgba(206,196,232,.6),rgba(168,139,255,.5)); --gh-ink:#eeeaf7;
  --pill-ink:#ffd0d8; --pill-bg:rgba(224,64,92,.12); --pill-b:rgba(224,64,92,.55); --pill-dot:#e0405c;
  --nav-bg:rgba(18,10,30,.84);
  --sky:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(236,228,255,.55), transparent 100%),
    radial-gradient(1px 1px at 131px 89px, rgba(236,228,255,.4), transparent 100%),
    radial-gradient(1.6px 1.6px at 187px 17px, rgba(255,190,210,.45), transparent 100%),
    radial-gradient(1px 1px at 71px 151px, rgba(236,228,255,.3), transparent 100%),
    radial-gradient(700px 180px at 94% -40px, rgba(190,40,100,.30), transparent 72%),
    radial-gradient(1100px 520px at 8% -10%, rgba(130,80,230,.24), transparent 62%),
    radial-gradient(900px 520px at 104% 110%, rgba(180,30,84,.34), transparent 64%),
    linear-gradient(170deg,#1d1030 0%,#120a1e 52%,#0b0613 100%);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="elyos"]){
    --bg:#120a1e; --bg-2:#1a0f28; --bg-3:#251637;
    --ink:#eeeaf7; --ink-2:#c4bad6; --ink-3:#a99dc0;
    --rule:rgba(190,160,240,.16); --rule-2:rgba(190,160,240,.32);
    --accent:#a88bff; --accent-ink:#c8b6ff; --link-hover:#e8ddff;
    --name:#ff95a3;
    --orn:rgba(206,196,232,.50); --spark:#ff5470;
    --hot:#e0405c; --hot-rgb:224,64,92;
    --card:linear-gradient(180deg,rgba(46,27,68,.78),rgba(24,14,38,.80));
    --card-b:rgba(190,160,240,.24); --card-hover:rgba(168,139,255,.46);
    --soft:rgba(190,160,240,.06); --soft-2:rgba(190,160,240,.12);
    --shadow:0 14px 34px rgba(0,0,0,.46);
    --pr-fill:linear-gradient(180deg,#e8576d 0%,#bb2340 40%,#86122c 100%); --pr-ink:#fff4f5;
    --pr-ring:linear-gradient(180deg,rgba(246,238,255,.95),rgba(186,170,226,.75)); --pr-band:#fff1f3;
    --gh-fill:rgba(26,15,40,.72); --gh-ring:linear-gradient(180deg,rgba(206,196,232,.6),rgba(168,139,255,.5)); --gh-ink:#eeeaf7;
    --pill-ink:#ffd0d8; --pill-bg:rgba(224,64,92,.12); --pill-b:rgba(224,64,92,.55); --pill-dot:#e0405c;
    --nav-bg:rgba(18,10,30,.84);
    --sky:
      radial-gradient(1.4px 1.4px at 22px 34px, rgba(236,228,255,.55), transparent 100%),
      radial-gradient(1px 1px at 131px 89px, rgba(236,228,255,.4), transparent 100%),
      radial-gradient(1.6px 1.6px at 187px 17px, rgba(255,190,210,.45), transparent 100%),
      radial-gradient(1px 1px at 71px 151px, rgba(236,228,255,.3), transparent 100%),
      radial-gradient(700px 180px at 94% -40px, rgba(190,40,100,.30), transparent 72%),
      radial-gradient(1100px 520px at 8% -10%, rgba(130,80,230,.24), transparent 62%),
      radial-gradient(900px 520px at 104% 110%, rgba(180,30,84,.34), transparent 64%),
      linear-gradient(170deg,#1d1030 0%,#120a1e 52%,#0b0613 100%);
    color-scheme:dark;
  }
}

/* =====================================================================================
   BASE
   ===================================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--accent-ink); text-decoration:none}
a:hover{color:var(--link-hover)}
h1,h2,h3{font-family:"Marcellus","Palatino Linotype",Georgia,serif; font-weight:400; margin:0; letter-spacing:.01em; text-wrap:balance}
p{margin:0}
svg{display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{max-width:1220px; margin:0 auto; padding:0 56px}
section{padding:96px 0; position:relative}
.band{background:var(--bg-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
h2{font-size:clamp(34px,4.2vw,52px); line-height:1.08}
h3{font-size:21px; line-height:1.2}
.col{max-width:64ch}
.lede{font-size:19px; color:var(--ink-2); margin-top:18px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* the eyebrow: small caps between two filigree hairlines */
.eyebrow{display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; font-family:"Marcellus SC","Marcellus",serif;
  font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--name)}
.eyebrow::before{content:""; width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--orn) 40%,var(--spark))}

/* a title's rule: a filigree hairline with a diamond at its heart */
.orn{display:flex; align-items:center; gap:12px; max-width:420px; margin:26px 0}
.orn i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--orn) 55%,var(--spark))}
.orn i.r{background:linear-gradient(270deg,transparent,var(--orn) 55%,var(--spark))}
.orn b{width:7px; height:7px; transform:rotate(45deg); background:var(--spark); box-shadow:0 0 10px rgba(var(--hot-rgb),.45)}

/* buttons: the elongated hexagon every AION-style button wears, a 1.5px ring, the fill inside it */
.btn,.btn-ghost{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 34px;
  font-family:"Marcellus SC","Marcellus",serif; font-size:17px; letter-spacing:.1em; line-height:1; text-transform:uppercase; cursor:pointer; border:0;
  clip-path:polygon(0 50%,14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%);
  transition:transform .18s ease, filter .18s ease}
.btn{color:var(--pr-ink); background:var(--pr-ring)}
.btn::before,.btn-ghost::before{content:""; position:absolute; inset:1.5px; z-index:0;
  clip-path:polygon(0 50%,13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%)}
.btn::before{background:var(--pr-fill); box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.btn-ghost{color:var(--gh-ink); background:var(--gh-ring)}
.btn-ghost::before{background:var(--gh-fill)}
.btn > *,.btn-ghost > *{position:relative; z-index:1}
.btn:hover,.btn-ghost:hover{transform:translateY(-1px); filter:brightness(1.07)}
.btn:hover{color:var(--pr-ink)} .btn-ghost:hover{color:var(--gh-ink)}
/* clip-path clips an outline, so focus shows as a band inside the fill */
.btn:focus-visible,.btn-ghost:focus-visible{outline:none}
.btn:focus-visible::before{box-shadow:inset 0 0 0 2px var(--pr-band)}
.btn-ghost:focus-visible::before{box-shadow:inset 0 0 0 2px var(--accent)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

.soon{display:inline-flex; align-items:center; gap:9px; padding:6px 14px; border-radius:999px; border:1px solid var(--pill-b); background:var(--pill-bg);
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--pill-ink)}
.soon i{width:7px; height:7px; border-radius:50%; background:var(--pill-dot); animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(var(--hot-rgb),.5)}70%{box-shadow:0 0 0 9px rgba(var(--hot-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--hot-rgb),0)}}

/* =====================================================================================
   NAV
   ===================================================================================== */
.navbar{position:sticky; top:0; z-index:60; background:var(--nav-bg); border-bottom:1px solid var(--rule);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:11px; color:var(--ink); min-height:44px; flex:none}
.brand:hover{color:var(--ink)}
.brand b{font-family:"Cinzel",Georgia,serif; font-weight:700; font-size:19px; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap}
.brand small{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding-top:3px; white-space:nowrap}
.navlinks{display:flex; align-items:center; gap:24px}
.navlinks a{font-family:"Marcellus SC","Marcellus",serif; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; padding:6px 0}
.navlinks a:hover{color:var(--ink)}
.navlinks a.acct{color:var(--accent-ink)}
.navlinks .s{display:none}
.side{display:inline-flex; border:1px solid var(--rule-2); border-radius:999px; padding:3px; background:var(--soft); flex:none}
.side button{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border:0; border-radius:999px; background:none; cursor:pointer;
  font-family:"Marcellus SC","Marcellus",serif; font-size:13px; letter-spacing:.08em; color:var(--ink-3)}
.side button svg{width:15px; height:15px}
.side button[aria-pressed="true"]{background:var(--bg-2); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.14), inset 0 0 0 1px var(--rule-2)}
.side button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* =====================================================================================
   HERO
   ===================================================================================== */
.hero{position:relative; overflow:hidden; background:var(--sky); border-bottom:1px solid var(--rule)}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--orn) 20%,var(--spark) 50%,var(--orn) 80%,transparent)}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:56px; align-items:center; padding-top:62px; padding-bottom:82px}
.hero .prod{display:block; margin-top:22px; font-family:"Marcellus SC","Marcellus",serif; font-size:18px; letter-spacing:.22em; text-transform:uppercase; color:var(--name)}
.hero h1{font-size:clamp(46px,5.6vw,78px); line-height:1.02; margin-top:10px}
.hero h1 em{font-style:normal; color:var(--accent-ink)}
:root[data-theme="asmodian"] .hero h1 em{color:#ff8a99}
@media (prefers-color-scheme: dark){ :root:not([data-theme="elyos"]) .hero h1 em{color:#ff8a99} }
.hero .sub{font-size:19.5px; color:var(--ink-2); margin-top:22px; max-width:33em}
.hero .sub b{color:var(--ink); font-weight:600}
.hero .note{font-size:13.5px; color:var(--ink-3); margin-top:14px}
.shot{margin:0; position:relative}
.screen{border-radius:14px; overflow:hidden; border:1px solid var(--card-b); box-shadow:var(--shadow), 0 0 0 6px var(--soft)}
.screen svg{width:100%; height:auto}
.shot figcaption{font-size:13px; color:var(--ink-3); margin-top:12px; text-align:center}
/* The illustration's HUD text is drawn for ~560px. On a phone it would render at ~4-6px, so there the fine text
   (hud-d) steps aside and each dashed box gets one large label instead (hud-m). */
.screen .hud-m{display:none}
@media (max-width:640px){ .screen .hud-d{display:none} .screen .hud-m{display:inline} }

/* =====================================================================================
   SECTIONS
   ===================================================================================== */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:46px}
.card{position:relative; padding:24px 24px 22px; border-radius:12px; background:var(--card); border:1px solid var(--card-b); box-shadow:var(--shadow);
  transition:border-color .2s ease, transform .2s ease}
.card::before{content:""; position:absolute; left:18px; right:18px; top:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--hot) 50%,transparent); opacity:.8}
.card:hover{border-color:var(--card-hover); transform:translateY(-2px)}
.card .ic{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent-ink);
  background:var(--soft-2); border:1px solid var(--rule-2); margin-bottom:16px}
.card .ic svg{width:21px; height:21px}
.card p{font-size:15.5px; color:var(--ink-2); margin-top:8px}
.card .k{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:12px}
.aside{margin-top:26px; font-size:15px; color:var(--ink-3); max-width:70ch}

.flow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:44px; counter-reset:step}
.flow > div{position:relative; padding:22px 22px 20px 64px; border-radius:12px; border:1px solid var(--rule-2); background:var(--soft)}
.flow > div::before{counter-increment:step; content:counter(step); position:absolute; left:20px; top:20px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:"Marcellus",serif; font-size:16px; color:var(--pr-ink); background:var(--pr-fill);
  box-shadow:0 0 0 1.5px var(--spark)}
.flow b{display:block; font-family:"Marcellus",serif; font-weight:400; font-size:19px; color:var(--ink)}
.flow p{font-size:15px; color:var(--ink-2); margin-top:6px}

.fair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.never{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.never li{display:flex; gap:14px; align-items:flex-start; padding:15px 18px; border-radius:10px; background:var(--card); border:1px solid var(--card-b)}
.never li svg{width:20px; height:20px; flex:none; margin-top:3px; color:var(--hot)}
.never li b{display:block; font-weight:600; color:var(--ink)}
.never li span{font-size:15px; color:var(--ink-2)}
.fair .small{font-size:14px; color:var(--ink-3); margin-top:22px}

.oa{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center}
.games{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.games a,.games .here{display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 16px; border-radius:12px; border:1px solid var(--card-b); background:var(--card); color:var(--ink);
  transition:border-color .2s ease, transform .18s ease}
.games a:hover{border-color:var(--card-hover); transform:translateY(-1px); color:var(--ink)}
.games .here{border-color:var(--hot); box-shadow:0 0 0 1px rgba(var(--hot-rgb),.35), var(--shadow)}
.games b{font-family:"Marcellus",serif; font-weight:400; font-size:19px; line-height:1.2}
.games small{font-size:13.5px; color:var(--ink-3)}
.st{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.st i{width:6px; height:6px; border-radius:50%; background:var(--ink-3)}
.st.live{color:var(--name)} .st.live i{background:#c9a24f}
.oa .links{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; font-size:15.5px}

.soonbox{text-align:center; overflow:hidden}
.soonbox h2{max-width:16ch; margin:22px auto 0}
.soonbox .lede{max-width:52ch; margin:18px auto 0}
.soonbox .cta-row{justify-content:center}
.soonbox .note{font-size:13.5px; color:var(--ink-3); margin-top:16px}

.faq{max-width:820px; margin-top:40px; display:flex; flex-direction:column; gap:10px}
.faq details{border-radius:10px; border:1px solid var(--card-b); background:var(--card)}
.faq summary{cursor:pointer; list-style:none; padding:17px 20px; min-height:44px; font-family:"Marcellus",serif; font-size:19px; color:var(--ink); display:flex; gap:12px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:""; width:8px; height:8px; flex:none; border-right:1.5px solid var(--accent-ink); border-bottom:1.5px solid var(--accent-ink); transform:rotate(-45deg); transition:transform .2s ease}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px 40px; font-size:15.5px; color:var(--ink-2)}

footer{border-top:1px solid var(--rule); padding:48px 0 56px; background:var(--bg)}
.footrow{display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap}
.footbrand{max-width:52ch}
.footbrand b{font-family:"Marcellus SC","Marcellus",serif; font-weight:400; font-size:20px; letter-spacing:.12em; text-transform:uppercase}
.footbrand p{font-size:14px; color:var(--ink-3); margin-top:10px}
.footcols{display:flex; gap:48px; flex-wrap:wrap}
.footcol{display:flex; flex-direction:column; gap:9px; font-size:14px}
.footcol .h{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px}
.footcol a{color:var(--ink-2)} .footcol a:hover{color:var(--ink)}

/* reveal on scroll: set by JS, so without it everything is simply there */
.js .reveal{opacity:0; transform:translate3d(0,24px,0); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
.js .reveal.show{opacity:1; transform:none}
.js .reveal.s2{transition-delay:.08s} .js .reveal.s3{transition-delay:.16s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .soon i{animation:none}
  .card,.btn,.btn-ghost,.games a{transition:none}
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* =====================================================================================
   SMALLER SCREENS
   ===================================================================================== */
@media (max-width:1100px){
  .navlinks{gap:18px} .navlinks a{font-size:14px}
  .navlinks .wide{display:none}
  .brand small{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
  .nav{flex-wrap:wrap; gap:8px 12px; padding:10px 0 8px}
  .navlinks{order:3; width:100%; justify-content:space-between; gap:6px; border-top:1px solid var(--rule); padding-top:6px}
  .navlinks a{font-size:14px; padding:8px 0; min-height:40px; display:inline-flex; align-items:center}
  .hero-in{grid-template-columns:minmax(0,1fr); gap:34px; padding-top:34px; padding-bottom:52px}
  .flow,.fair,.oa{grid-template-columns:minmax(0,1fr); gap:24px}
  .fair{gap:30px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .brand b{font-size:17px}
  .side button{padding:0 10px; font-size:12px}
  .side button .t{display:none}
  .side button{min-width:40px; justify-content:center}
  .navlinks a{font-size:13px; letter-spacing:.05em}
  .navlinks .wide,.navlinks .l{display:none} .navlinks .s{display:inline}
  .hero .prod{font-size:15px}
  .hero .sub{font-size:17.5px}
  .lede{font-size:17.5px}
  .cards{grid-template-columns:minmax(0,1fr); gap:12px}
  .games{grid-template-columns:minmax(0,1fr); gap:10px}
  .games a,.games .here{position:relative; gap:2px; padding:14px 132px 14px 16px}
  .games .st{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:11.5px}
  .btn,.btn-ghost{width:100%}
  .faq summary{font-size:17.5px}
  .faq details p{padding-left:20px}
  .footcols{gap:28px 40px}
  .footcol a{display:block; padding:9px 0}
  .footcol{gap:0}
}