:root{--accent:#edb451;--muted:#afb8bd;--line:#535b60;background:#242b30;color:#e4e8eb;font-family:Tahoma,'Segoe UI',sans-serif}
body{background:#242b30}
.masthead{background:linear-gradient(#dbe0e2,#949ea4);color:#1c262d;border-block:2px ridge #cbd2d5;padding:14px 5%;gap:14px}
.masthead nav{font-size:12px}.wordmark strong{font-style:italic;font-weight:800}
.action{border:2px outset #d0d4d6;border-radius:3px;background:linear-gradient(#d8dcdf,#9da6ac);color:#1c252b;box-shadow:0 2px 2px #0005;font-size:13px;padding:12px 18px}
.action:active{border-style:inset;transform:translateY(1px)}
.hero{padding:34px 20px 0;min-height:0;background:#171f23;overflow:hidden;border-bottom:3px ridge #a7b0b5}
.hero-copy{padding:0;margin:0 auto;text-align:center}.hero h1{font-size:56px;line-height:1.05;color:#edb451;text-shadow:0 2px #000}
.hero-line{font-size:19px;margin-top:14px}.eyebrow{font:11px Consolas,monospace;color:#a9b5bc}.hero-actions{justify-content:center;margin:20px 0}
.hero-product{width:420px;max-width:100%;margin:22px auto 0;padding:0;border:0;border-radius:0;box-shadow:0 10px 28px #0008;max-height:340px;overflow:hidden}
.hero-product img{width:100%;height:auto;border-radius:0}.text-link{color:#edb451;font-size:12px}
.band{padding:42px max(5%,20px);border-bottom:1px solid #596167}
.intro{background:#c2c9cd;color:#202a31}.intro h2{font-size:30px}.intro p{color:#34434d;font-size:15px}.section-label{color:inherit;font:11px Consolas,monospace}
.feature-band{background:#293239}.feature-band h3{font-size:17px;color:#edb451}.feature-band p{font-size:14px;color:#b9c2c9}.number{color:#98a6b0}
.platforms{background:#1b252b}.platform-heading h2{font-size:32px}.platform-list a{border-block:1px solid #53616a;padding:20px 0}.platform-name{font-size:23px}.platform-name small{font-size:12px;color:#afbac3}.platform-arrow{color:#edb451}
.membership{background:#bac3c9;color:#202b32}.membership h2{font-size:34px}.membership p{color:#34434d}.membership .action{color:#202b32;background:#e0e4e6}.footer{background:#171e23;color:#aebac3}.footer a:hover{color:#edb451}
@media(max-width:600px){.masthead{padding:10px 14px;flex-wrap:wrap}.masthead .wordmark strong{font-size:17px}.masthead .action{font-size:11px;padding:9px}.hero{padding:24px 14px 0}.hero h1{font-size:42px}.hero-line{font-size:16px}.hero-product{width:300px;max-height:295px}.hero-actions{gap:14px}.band{padding:28px 18px}.intro h2,.platform-heading h2{font-size:25px}.membership h2{font-size:29px}}