:root{
  --navy:#121A22; --navy-2:#0B0E0B; --lime:#B8FF3D; --violet:#9B7BFF;
  --coral:#FF6070; --paper:#F3F6EF; --muted:#9BA8A0;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0; background:var(--navy-2); color:var(--paper);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 96px}
header{
  border-bottom:1px solid rgba(184,255,61,.18);
  background:linear-gradient(180deg,rgba(184,255,61,.10),transparent);
  margin-bottom:40px;
}
header .wrap{padding-top:36px;padding-bottom:28px}
.brand{
  font-family:Bangers,Impact,"Haettenschweiler",sans-serif; letter-spacing:.06em;
  font-size:40px; color:var(--lime); text-decoration:none; display:inline-block;
}
.tagline{color:var(--muted);margin:2px 0 0}
h1{font-family:Bangers,Impact,sans-serif;letter-spacing:.04em;font-size:38px;line-height:1.15;margin:0 0 6px}
h2{font-size:20px;margin:40px 0 10px;color:var(--lime)}
h2 span{color:var(--muted);font-weight:400;font-size:15px}
p,li{color:#DCE4DA}
a{color:var(--lime)}
a:hover{color:var(--paper)}
.updated{color:var(--muted);font-size:14px;margin:0 0 28px}
.lang{float:right;font-size:14px;margin-top:14px}
.lang a{margin-left:12px;text-decoration:none;color:var(--muted)}
.lang a[aria-current]{color:var(--lime);font-weight:600}
.card{
  background:rgba(255,255,255,.04); border:1px solid rgba(184,255,61,.16);
  border-radius:14px; padding:18px 22px; margin:26px 0;
}
.card strong{color:var(--lime)}
table{width:100%;border-collapse:collapse;table-layout:fixed;margin:14px 0;font-size:15px}
th,td{overflow-wrap:anywhere;text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top}
th{color:var(--lime);font-weight:600}
.no li::marker{content:"✕  ";color:var(--coral)}
.yes li::marker{content:"•  ";color:var(--lime)}
footer{border-top:1px solid rgba(255,255,255,.09);margin-top:56px;padding-top:24px;color:var(--muted);font-size:14px}

/* Landing pages */
.landing .wrap{max-width:1080px}
.landing header{margin-bottom:0}
.hero{text-align:center;padding:76px 0 54px}
.hero h1{color:var(--lime);font-size:clamp(42px,12.5vw,148px);line-height:.86;letter-spacing:.02em;margin:0 0 20px;overflow-wrap:break-word}
.hero-hook{font-size:clamp(23px,4vw,34px);font-weight:700;line-height:1.2;margin:0 auto 10px;max-width:620px}
.hero-sub{color:var(--muted);margin:0 auto;max-width:580px}
.store-buttons{display:flex;gap:12px;justify-content:center;margin-top:26px}
.play-button{align-items:center;background:var(--lime);border-radius:999px;color:var(--navy-2);display:inline-flex;font-size:16px;font-weight:800;gap:10px;line-height:1;padding:14px 22px;text-decoration:none}
.play-button:hover{background:var(--paper);color:var(--navy-2)}
.play-button svg{height:18px;width:18px;fill:currentColor}
.landing-section{padding:48px 0;border-top:1px solid rgba(255,255,255,.09)}
.section-kicker{color:var(--lime);font-size:13px;font-weight:800;letter-spacing:.12em;margin:0 0 7px;text-transform:uppercase}
.landing h2{font-family:Bangers,Impact,sans-serif;letter-spacing:.03em;color:var(--paper);font-size:clamp(34px,5.4vw,52px);line-height:1.05;margin:0 0 26px}
.steps{display:grid;gap:12px;grid-template-columns:1fr}
.step{background:rgba(255,255,255,.04);border:1px solid rgba(184,255,61,.16);border-radius:14px;padding:18px}
.step-number{color:var(--lime);display:block;font-size:13px;font-weight:800;letter-spacing:.12em;margin-bottom:8px}
.step h3{font-size:18px;line-height:1.25;margin:0 0 6px}
.step p{color:var(--muted);font-size:15px;line-height:1.5;margin:0}
.pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0}
.pill{border:1px solid rgba(184,255,61,.3);border-radius:999px;color:var(--lime);font-size:14px;padding:6px 13px}
.feature-strip{padding:28px 0}
.shots{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.shot{background:var(--navy);border:1px solid rgba(184,255,61,.3);border-radius:25px;margin:0 auto;max-width:280px;overflow:hidden;padding:7px;width:100%}
.shot img{border-radius:19px;display:block;height:auto;width:100%}
.shot figcaption{color:var(--muted);font-size:13px;line-height:1.35;padding:9px 5px 3px}
.faq{display:grid;gap:10px}
details{background:rgba(255,255,255,.04);border:1px solid rgba(184,255,61,.16);border-radius:12px;padding:0 16px}
summary{color:var(--paper);cursor:pointer;font-weight:700;padding:14px 22px 14px 0}
summary::marker{color:var(--lime)}
details p{color:var(--muted);font-size:15px;margin:0 0 14px}
.landing footer{text-align:center}
.footer-links{margin:0 0 8px}
.not-found{padding-top:90px;text-align:center}
.not-found h1{color:var(--lime);font-size:72px}
.step h3{font-family:Bangers,Impact,sans-serif;letter-spacing:.03em;font-size:22px;color:var(--lime)}

@media(min-width:640px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .shot{border-radius:22px;padding:6px}
  .shot img{border-radius:16px}
}
@media(max-width:639px){
  .store-buttons{align-items:center;flex-direction:column}
}
@media(max-width:560px){
  h1{font-size:30px}.brand{font-size:32px}.lang{float:none;display:block;margin:12px 0 0}.lang a{margin:0 14px 0 0}
  .hero{padding:55px 0 40px}.landing-section{padding:40px 0}.shots{grid-template-columns:1fr}.shot{max-width:280px}
}