*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030303;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
.poster-page{min-height:100vh;background:#030303}
.poster-stage{position:relative;width:min(100vw,1536px);margin:0 auto;aspect-ratio:1536/1024;background:#030303}
.poster-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}

/* The page itself is the approved artwork. These are invisible click targets only. */
.hotspot{position:absolute;z-index:5;border:0;background:transparent!important;color:transparent!important;cursor:pointer;padding:0;margin:0;text-decoration:none;outline:none;border-radius:10px}
.hotspot:focus-visible{outline:3px solid rgba(255,214,92,.95);outline-offset:2px;background:rgba(255,214,92,.05)!important}
.hotspot:hover{box-shadow:0 0 20px rgba(255,214,92,.18)}

/* Coordinates are percentages of the approved 1536 × 1024 artwork */
.mobile-download{left:5.53%;top:77.35%;width:19.40%;height:4.47%}
.mobile-how{left:5.53%;top:82.34%;width:19.40%;height:4.44%}

.fire-download{left:27.98%;top:77.35%;width:19.58%;height:4.47%}
.fire-how{left:27.98%;top:82.34%;width:19.58%;height:4.44%}

.legacy-download{left:50.72%;top:77.35%;width:19.27%;height:4.47%}
.legacy-how{left:50.72%;top:82.34%;width:19.27%;height:4.44%}

.ios-download{left:73.24%;top:77.35%;width:21.10%;height:4.47%}
.ios-how{left:73.24%;top:82.34%;width:21.10%;height:4.44%}

/* Guide opens over the fixed visual, so the approved page never gets replaced by another design. */
.guide-panel[hidden]{display:none}
.guide-panel{position:fixed;inset:0;z-index:50;overflow-y:auto;background:rgba(0,0,0,.84);backdrop-filter:blur(7px);padding:42px 18px}
.guide-shell{position:relative;max-width:1180px;margin:0 auto;border:1px solid #81201b;border-radius:24px;background:linear-gradient(155deg,rgba(28,28,28,.99),rgba(3,3,3,.99));box-shadow:0 30px 90px #000,0 0 45px rgba(139,0,0,.32);padding:36px}
.guide-close{position:absolute;right:20px;top:12px;border:0;background:none;color:#aaa;font-size:40px;cursor:pointer}
.guide-close:hover{color:#fff}
.guide-title{font-size:clamp(30px,4vw,52px);margin:0 50px 5px 0;line-height:1}
.guide-sub{color:#ccc;font-size:17px}
.guide-chooser{display:flex;gap:10px;flex-wrap:wrap;margin:23px 0}
.choice-btn{border:1px solid #7b2420;background:#101010;color:#fff;border-radius:999px;padding:11px 17px;font-weight:900;cursor:pointer}
.choice-btn.active{background:#bd120a;border-color:#ff4b40;box-shadow:0 0 18px rgba(211,23,15,.4)}
.progress-wrap{margin:18px 0 24px}
.progress-text{font-size:12px;color:#e6bd50;font-weight:900;letter-spacing:1px;margin-bottom:8px}
.progress-track{height:7px;background:#262626;border-radius:20px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#b60b05,#ff4035,#f2bd38);transition:width .35s ease}
.step-card{display:grid;grid-template-columns:1fr 1.15fr;gap:25px;min-height:355px;border:1px solid #303030;border-radius:18px;background:#0b0b0b;overflow:hidden}
.visual-screen{position:relative;min-height:355px;padding:24px;background:radial-gradient(circle at 50% 45%,#3d0909,#090909 55%);display:flex;align-items:center;justify-content:center}
.mock-device{width:88%;max-width:430px;border:8px solid #252525;border-radius:13px;background:#181818;box-shadow:0 18px 35px #000;overflow:hidden}
.mock-top{padding:11px 14px;background:#222;color:#aaa;font-size:11px}
.mock-menu{padding:12px}
.mock-row{position:relative;margin:8px 0;padding:11px 12px;border-radius:7px;background:#252525;color:#bbb;font-size:13px}
.mock-row.selected{background:linear-gradient(90deg,#b50b05,#6e0704);color:#fff;border:1px solid #f04b42;box-shadow:0 0 18px rgba(232,37,28,.35)}
.mock-row.selected:after{content:"← SELECT THIS";position:absolute;right:10px;color:#ffd65e;font-size:9px;font-weight:900}
.phone-mock{max-width:230px;border-radius:26px;border-width:9px}
.step-copy{padding:35px 34px;display:flex;flex-direction:column;justify-content:center;text-align:left}
.step-number{color:#eab93d;font-weight:1000;letter-spacing:2px;font-size:12px}
.step-copy h3{font-size:32px;margin:8px 0 13px;line-height:1.05}
.step-copy p{color:#d0d0d0;font-size:17px;line-height:1.55;margin:0}
.tip{margin-top:20px;padding:13px 14px;border-left:4px solid #e9b633;background:#211a08;color:#eee;font-size:14px}
.server-box{display:inline-block;margin-top:15px;padding:14px 17px;border:1px solid #d3a62f;border-radius:9px;background:#111;color:#ffd65e;font-family:monospace;font-size:21px;font-weight:bold}
.step-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.nav-btn{min-width:160px;padding:14px 18px;border-radius:9px;border:1px solid #ef4137;background:linear-gradient(#e72a20,#a70803);color:#fff;font-weight:1000;cursor:pointer}
.nav-btn.secondary{border-color:#444;background:#111;color:#ccc}
.nav-btn:disabled{opacity:.35;cursor:not-allowed}
.complete{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:355px;text-align:center;padding:40px;background:radial-gradient(circle,#421000,#080808 60%)}
.check{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:#b9130b;border:4px solid #ff5148;font-size:48px;box-shadow:0 0 35px rgba(255,45,34,.45)}
.complete h3{font-size:34px;margin:20px 0 8px}
.complete p{color:#ccc;font-size:17px}

@media(max-width:760px){
  .poster-stage{width:100vw;aspect-ratio:1536/1024}
  .guide-panel{padding:14px 8px}
  .guide-shell{padding:28px 14px 20px;border-radius:16px}
  .step-card{display:block}
  .visual-screen{min-height:260px}
  .step-copy{padding:25px 20px}
  .step-copy h3{font-size:26px}
  .step-copy p{font-size:15px}
  .step-nav{position:sticky;bottom:6px;background:rgba(0,0,0,.9);padding:8px;border-radius:12px}
  .nav-btn{min-width:0;flex:1}
}
.whatsapp-support{
  width:min(100% - 28px,1100px);margin:24px auto 44px;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  border:1px solid #7b1712;border-radius:18px;
  background:linear-gradient(135deg,rgba(22,22,22,.98),rgba(5,5,5,.99));
  box-shadow:0 0 30px rgba(190,20,12,.18),0 20px 50px #000;
}
.wa-copy{flex:1}.wa-kicker{color:#e8b630;font-size:12px;font-weight:1000;letter-spacing:2px}
.wa-copy h2{font-size:28px;margin:7px 0;color:#fff}.wa-copy p{color:#c7c7c7;line-height:1.45;margin:0 0 16px;max-width:650px}
.wa-button{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:9px;
  background:linear-gradient(#28d66b,#119c49);border:1px solid #54ed8d;color:#fff;text-decoration:none;
  font-weight:1000;box-shadow:0 8px 24px rgba(20,180,80,.25)}
.wa-button:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(20,200,90,.38)}
.wa-icon{font-size:19px}.wa-copy small{display:block;color:#8f8f8f;margin-top:10px}
.wa-qr-wrap{width:170px;flex:0 0 170px;padding:10px;border-radius:14px;background:#fff;text-decoration:none;text-align:center;box-shadow:0 0 22px rgba(255,255,255,.12)}
.wa-qr-wrap img{display:block;width:150px;height:150px;image-rendering:pixelated}
.wa-qr-wrap strong{display:block;color:#111;font-size:11px;letter-spacing:1px;margin-top:5px}
@media(max-width:650px){
 .whatsapp-support{flex-direction:column;text-align:center;padding:22px 16px}
 .wa-copy h2{font-size:22px}.wa-button{width:100%;justify-content:center}
}

.ios-download::after{
  content:"DOWNLOAD";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font:900 1.05vw/1 Arial,Helvetica,sans-serif;
  letter-spacing:.02em;
  text-shadow:0 1px 2px #7a0000;
  pointer-events:none;
}
@media(max-width:760px){
  .ios-download::after{font-size:2.1vw}
}