*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#071833;color:#f7f4ee;line-height:1.5}
a{color:#f5b82e}
img{max-width:100%;height:auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#082037;border-bottom:3px solid #f5b82e}
.brand{display:flex;align-items:center;gap:8px;color:#f7f4ee;text-decoration:none;font-weight:900;font-size:20px}
.brand span{color:#f5b82e}
.brand img{width:36px;height:36px;border-radius:50%}
.pill{display:inline-block;background:#f5b82e;color:#3a2212;font-weight:800;font-size:12px;border-radius:999px;padding:4px 10px;text-decoration:none}
.hero .pill{position:absolute;left:16px;top:18px}
.links{display:none;gap:14px;font-size:14px;font-weight:700}
.links a{color:#f7f4ee;text-decoration:none}
.subnav{display:flex;flex-wrap:wrap;gap:8px 12px;padding:8px 16px;background:#0b2444;font-size:13px;font-weight:700}
.subnav a{color:#d7e4f2;text-decoration:none}
.sky{background:radial-gradient(ellipse at 70% 18%,#1f5f99 0,#0b2a4a 58%,#071a2e 100%);position:relative;overflow:hidden}
.hero{padding:22px 16px 28px;min-height:420px}
.jet{width:min(340px,92vw);position:absolute;right:-8px;top:28px}
h1{font-size:34px;line-height:1.05;font-weight:900;margin:0}
.hero h1{margin:148px 0 0}
.prose{max-width:42rem}
.prose p,.prose li{color:#e4ecf3}
.prose h2{font-size:20px;margin:18px 0 6px}
.step{display:flex;gap:12px;margin-top:12px;align-items:flex-start}
.n{flex:0 0 38px;height:38px;border-radius:50%;background:#f5b82e;color:#3a2212;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center}
.step h3{margin:4px 0 2px;font-size:17px}
.step p{margin:0;color:#d7e4f2;font-size:14px}
.meter{margin-top:16px;height:140px;border-radius:16px;background:linear-gradient(#1f5f99,#0b2a4a);position:relative;overflow:hidden}
.meter .x{position:absolute;left:16px;top:14px;font-size:38px;font-weight:900;color:#ffd25a}
.meter .jet{width:190px;right:0;bottom:-6px;top:auto}
.panel{background:#fdfaf3;color:#3a2212;border-radius:16px;padding:14px}
.panel p,.panel li,.panel h3,.panel .step p,.panel .step h3{color:#3a2212}
.note{background:#123e66;border-radius:12px;padding:12px;margin-top:10px}
.note b{display:block;color:#ffd25a}
.gold{color:#f5b82e}
.lead{margin:12px 0 18px;font-size:16px;color:#e4ecf3;max-width:38rem}
.stake{margin:-8px 0 16px;font-weight:800;color:#ffd25a;max-width:36rem}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn,.btn2{display:inline-block;font-weight:900;border-radius:999px;text-decoration:none;text-align:center}
.btn{background:linear-gradient(#ffd25a,#f0a91b);color:#3a2212;padding:14px 22px;box-shadow:0 4px 0 #8a5a24}
.btn2{border:2px solid #fdfaf3;color:#fdfaf3;padding:12px 20px}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:16px 14px;background:#0b2a4a}
.card{background:#fdfaf3;color:#3a2212;border-radius:16px;padding:12px 8px;text-align:center;font-size:13px;font-weight:700}
.card b{display:block;font-size:22px;color:#c0841f}
.wrap{padding:16px 14px;max-width:1100px;margin:0 auto}
.lp{background:#123e66;border-radius:16px;padding:14px;border:2px solid #f5b82e}
.small{font-size:13px;color:#c9d6e3}
.grid{display:grid;gap:10px}
.langs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.langs a,.langs span{border:1px solid #f5b82e;color:#f7f4ee;border-radius:999px;padding:6px 10px;text-decoration:none;font-size:13px;font-weight:700}
.langs span{background:#f5b82e;color:#3a2212}
.rg{background:#3a2212;color:#fdfaf3;font-size:12px;padding:12px 16px;text-align:center}
.rg a{color:#ffd25a}
details{background:#0b2444;border-radius:12px;padding:10px 12px;margin:8px 0}
summary{cursor:pointer;font-weight:800}
ol.play{padding-left:1.2rem}
ol.play li{margin:8px 0}
footer.site{padding:8px 16px 18px;font-size:13px;color:#c9d6e3}
footer.site nav{display:flex;flex-wrap:wrap;gap:10px 14px}
@media(min-width:800px){
  .links{display:flex}
  .subnav{display:none}
  .hero{padding:48px 48px 56px;min-height:520px}
  .hero .pill{left:48px;top:48px}
  .hero h1{font-size:64px;max-width:14ch;margin-top:120px}
  h1{font-size:44px}
  .jet{width:460px;right:40px;top:70px}
  .lead{font-size:18px}
  .grid.four{grid-template-columns:repeat(4,1fr)}
  .wrap{padding:28px 40px 40px}
}