:root{
    --text:rgba(255,255,255,0.96);
    --muted:rgba(255,255,255,0.76);
    --line:rgba(255,255,255,0.08);
    --shadow:0 20px 60px rgba(0,0,0,0.58);
    --padX:clamp(16px,2.6vw,34px);
    --h:var(--topbar-h,68px);
  }

  *{
    box-sizing:border-box;
  }

  html,
  body{
    width:100%;
    min-height:100%;
  }

  body{
    margin:0;
    font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
    font-weight:500;
    color:var(--text);
    background:#000;
    overflow-x:hidden;
  }

  a{
    color:inherit;
    text-decoration:none;
  }

  button{
    font:inherit;
  }

  .downloadBackground{
    position:fixed;
    inset:0;
    z-index:-2;
    background:#000;
    overflow:hidden;
  }

  .downloadBackground::before{
    content:'';
    position:absolute;
    inset:-100px;
    background:
      linear-gradient(rgba(0,0,0,0.54),rgba(0,0,0,0.82)),
      url('https://cdn.midwesternroleplay.com/images/background-1.png') center / cover no-repeat;
    transform:scale(1.08) rotate(-2deg);
    filter:saturate(1.06) contrast(1.05);
  }

  .downloadBackground::after{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at center,rgba(255,255,255,0.05),transparent 30%),
      linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.78));
    z-index:1;
  }

  .downloadPage{
    min-height:calc(100vh - var(--h));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px var(--padX) 104px;
  }

  .downloadHero{
    width:100%;
    max-width:1100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .heroLogo{
    width:clamp(260px,38vw,520px);
    height:clamp(260px,38vw,520px);
    display:block;
    margin:-28px auto 6px;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 24px 52px rgba(0,0,0,0.62));
  }

  .heroTitle{
    margin:0;
    max-width:980px;
    font-size:clamp(46px,6.2vw,92px);
    line-height:.94;
    letter-spacing:-2.8px;
    font-weight:1000;
    color:#fff;
    text-shadow:0 12px 36px rgba(0,0,0,0.72);
  }

  .downloadActions{
    width:100%;
    max-width:670px;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:34px;
  }

  .windowsDownloadBtn{
    width:100%;
    min-height:58px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:0;
    border-radius:12px;
    background:#f2f2f3;
    color:#111;
    font-size:17px;
    font-weight:1000;
    box-shadow:0 18px 44px rgba(0,0,0,0.46);
    cursor:pointer;
    overflow:hidden;
    transition:transform .16s ease,background .16s ease,box-shadow .16s ease,opacity .16s ease;
  }

  .windowsDownloadBtn:hover{
    background:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 22px 56px rgba(0,0,0,0.56);
  }

  .windowsDownloadBtn:active{
    transform:translateY(0);
  }

  .windowsDownloadBtn.isLoading{
    pointer-events:none;
    background:#ffffff;
  }

  .downloadBtnContent{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    opacity:1;
    transform:translateY(0);
    transition:opacity .22s ease,transform .22s ease;
  }

  .windowsDownloadBtn.isLoading .downloadBtnContent{
    opacity:0;
    transform:translateY(-6px);
  }

  .downloadLoader{
    position:absolute;
    width:24px;
    height:24px;
    border-radius:999px;
    border:3px solid rgba(0,0,0,0.16);
    border-top-color:#111;
    opacity:0;
    transform:scale(.8);
    animation:none;
    transition:opacity .22s ease,transform .22s ease;
  }

  .windowsDownloadBtn.isLoading .downloadLoader{
    opacity:1;
    transform:scale(1);
    animation:spinLoader .75s linear infinite;
  }

  @keyframes spinLoader{
    to{
      transform:scale(1) rotate(360deg);
    }
  }

  .windowsIcon{
    width:22px;
    height:22px;
    display:block;
    fill:currentColor;
    flex:0 0 auto;
  }

  .deviceSection{
    width:100%;
    margin-top:28px;
  }

  .deviceGrid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }

  .deviceBadge{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:9px 15px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.42);
    background:rgba(0,0,0,0.56);
    color:#fff;
    font-weight:900;
    font-size:14px;
    box-shadow:0 14px 36px rgba(0,0,0,0.34);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:.86;
  }

  .deviceBadgeButton{
    cursor:pointer;
    font:inherit;
    transition:transform .16s ease,background .16s ease,border-color .16s ease;
  }

  .deviceBadgeButton:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.12);
    border-color:rgba(255,255,255,0.62);
  }

  .deviceBadge.isComingSoon{
    opacity:.58;
  }

  .deviceIcon{
    width:22px;
    height:22px;
    display:block;
    fill:currentColor;
    flex:0 0 auto;
  }

  .deviceSmall{
    display:block;
    font-size:10px;
    line-height:1;
    color:rgba(255,255,255,0.72);
    font-weight:800;
  }

  .deviceLarge{
    display:block;
    font-size:17px;
    line-height:1.05;
    font-weight:1000;
  }

  @media (max-width:900px){
    .downloadPage{
      padding-top:28px;
      padding-bottom:92px;
    }

    .heroLogo{
      width:clamp(220px,58vw,420px);
      height:clamp(220px,58vw,420px);
      margin:-18px auto 4px;
    }

    .heroTitle{
      font-size:clamp(38px,8vw,62px);
      letter-spacing:-1.8px;
      line-height:.98;
    }

    .downloadActions{
      margin-top:28px;
    }
  }

  @media (max-width:560px){
    .downloadPage{
      align-items:flex-start;
      padding-top:24px;
      padding-bottom:82px;
    }

    .heroLogo{
      width:clamp(190px,72vw,330px);
      height:clamp(190px,72vw,330px);
      margin:-10px auto 2px;
    }

    .heroTitle{
      font-size:36px;
      letter-spacing:-1.2px;
    }

    .windowsDownloadBtn{
      min-height:54px;
      font-size:15px;
    }

    .deviceGrid{
      gap:8px;
    }

    .deviceBadge{
      flex:1 1 calc(50% - 8px);
      min-width:140px;
      padding:8px 10px;
    }
  }