*,*::before,*::after{box-sizing:border-box}
html{background:#000}
body{margin:0;background:#000;color:#fff;font-family:system-ui,"Segoe UI",sans-serif;line-height:1.5}
a{color:#fff}
img{display:block;max-width:100%;height:auto}
.site-header,.site-footer,main{width:min(1080px,calc(100% - 32px));margin-inline:auto}
.site-header{padding:28px 0 8px}
.brand{display:inline-block}
.brand img{width:min(220px,58vw);height:auto}
.hero{padding:28px 0 12px}
.hero img{width:min(920px,100%);margin:8px auto 28px}
h1{margin:0 0 16px;font-size:clamp(32px,8vw,64px);line-height:.95;letter-spacing:-.03em;font-weight:700}
.lead{margin:0 0 18px;font-size:clamp(18px,3vw,24px);max-width:28em}
.intro p{margin:0 0 12px;max-width:40em;color:#f2f2f2}
.features{display:grid;gap:18px;padding:36px 0}
.feature{border-top:1px solid #fff;padding-top:16px}
.feature h2{margin:0 0 12px;font-size:22px;letter-spacing:.08em}
.feature ul{margin:0;padding-left:18px}
.feature li{margin:6px 0}
.note-pro{margin:8px 0 0;color:#d0d0d0}
.stores{padding:12px 0 48px}
.stores h2{margin:0 0 8px;font-size:clamp(28px,6vw,42px);letter-spacing:-.03em}
.store-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.store{appearance:none;border:1px solid #fff;background:#000;color:#fff;min-height:64px;min-width:180px;padding:10px 16px;font:inherit;text-align:left}
.store strong{display:block;font-size:16px}
.store span{display:block;font-size:13px;letter-spacing:.04em}
.legal{padding:12px 0 36px}
.legal h1{font-size:clamp(28px,6vw,44px);margin-bottom:20px}
.legal h2{margin:28px 0 8px;font-size:20px}
.legal p,.legal li{max-width:46em}
.legal .note{color:#d0d0d0}
.site-footer{padding:8px 0 40px;border-top:1px solid #fff}
.site-footer p{margin:6px 0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
@media (min-width:800px){
  .features{grid-template-columns:repeat(3,1fr);gap:28px}
}