@media(max-width:520px){
  html,body{margin:0;padding:0}
  body{align-items:flex-start;padding:6px 0}

  .card{
    width:calc(100% - 12px);
    border-radius:20px;
    overflow:hidden;
  }

  .inner{padding:9px 14px 6px}

  .brand{margin-bottom:5px}
  .logo{width:23px;height:23px;font-size:11px}
  .help{font-size:12px;padding:5px 10px}

  h1{font-size:18px;line-height:1.12;margin:0 0 3px}
  p{font-size:12px;line-height:1.18;margin:0 0 5px}

  .tabs{margin:5px 0;padding:2px}
  .tab{padding:5px 4px;font-size:12px}

  .info{font-size:10.5px;padding:4px 8px;margin-bottom:5px}

  .download{
    padding:8px 11px;
    margin:2px 0 6px;
    border-radius:12px;
    min-height:46px;
  }
  .download .ico{width:30px;height:30px;font-size:14px}
  .download strong{font-size:15px;line-height:1.05}
  .download span{font-size:11px}

  .step{
    padding:6px 9px;
    margin:3px 0;
    border-radius:10px;
    font-size:11.5px;
    line-height:1.15;
  }

  .note{
    font-size:11px;
    line-height:1.12;
    margin:4px 0;
  }

  .bottom{
    padding:5px 12px;
    gap:8px;
  }

  .btn{
    padding:8px 5px;
    font-size:12px;
    border-radius:11px;
  }

  .green{font-size:12px}
}

/* final fit - экономим около 35px */
@media (max-width:520px){

  /* Зеленая карточка */
  .download{
    padding:7px 11px!important;
    min-height:42px!important;
    margin:2px 0 4px!important;
  }

  .download .ico{
    width:28px!important;
    height:28px!important;
  }

  .download strong{
    font-size:14px!important;
    margin:0!important;
  }

  .download span{
    font-size:10.5px!important;
  }

  /* Три шага */
  .step{
    padding:5px 10px!important;
    margin:2px 0!important;
    min-height:auto!important;
    line-height:1.15!important;
    font-size:11.5px!important;
  }

  /* Строка "Установили приложение?" */
  .note{
    margin:3px 0!important;
    font-size:11px!important;
    line-height:1.1!important;
  }

  /* Нижняя панель */
  .bottom{
    padding:4px 12px!important;
  }

  .btn{
    padding:7px 6px!important;
    min-height:38px!important;
    font-size:12px!important;
  }
}

/* balanced premium layout */
@media (max-width:520px){
  .download{
    padding:9px 12px!important;
    min-height:48px!important;
    margin:3px 0 6px!important;
  }
  .download .ico{
    width:30px!important;
    height:30px!important;
    font-size:14px!important;
  }
  .download strong{
    font-size:15px!important;
  }
  .download span{
    font-size:11px!important;
  }
  .step{
    padding:7px 10px!important;
    margin:3px 0!important;
    font-size:12px!important;
    line-height:1.22!important;
    border-radius:12px!important;
  }
  .note{
    margin:5px 0!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  .bottom{
    padding:6px 12px!important;
  }
  .btn{
    min-height:42px!important;
    padding:9px 8px!important;
    font-size:13px!important;
  }
}

/* немного увеличить расстояние после App Store */
@media (max-width:520px){
  .download{
    margin-bottom:10px!important;
  }
}

/* увеличить отступ после карточки App Store */
@media (max-width:520px){
  .download{
    margin-bottom:12px!important;
  }
}

/* увеличить отступ после карточки App Store до 16px */
@media (max-width:520px){
  .download{
    margin-bottom:16px!important;
  }
}

/* увеличить расстояние между шагами инструкции */
@media (max-width:520px){
  .step{
    margin-top:6px!important;
    margin-bottom:6px!important;
  }
}

/* увеличить расстояние между шагами до 9px */
@media (max-width:520px){
  .step{
    margin-top:9px!important;
    margin-bottom:9px!important;
  }
}

/* увеличить отступ между шагом 3 и кнопкой "Я установил Happ" */
@media (max-width:520px){
  .step:last-of-type{
    margin-bottom:16px!important;
  }
}

/* сделать название App Store немного крупнее */
@media (max-width:520px){
  .download strong{
    font-size:17px!important;
    line-height:1.1!important;
    font-weight:700!important;
  }
}

/* увеличить все шрифты примерно на 10%, не меняя размеры блоков */
@media (max-width:520px){

  h1{
    font-size:20px!important;
  }

  p{
    font-size:13px!important;
    line-height:1.24!important;
  }

  .tab{
    font-size:13px!important;
  }

  .info{
    font-size:11.5px!important;
  }

  .download strong{
    font-size:17px!important;
  }

  .download span{
    font-size:12px!important;
  }

  .step{
    font-size:13px!important;
    line-height:1.25!important;
  }

  .note{
    font-size:13px!important;
    line-height:1.25!important;
  }

  .btn{
    font-size:14px!important;
  }

  .smalllink{
    font-size:12px!important;
  }
}

/* Премиальный режим: всё чуть крупнее без изменения высоты страницы */
@media (max-width:520px){

  .download{
    padding:10px 13px!important;
  }

  .download .ico{
    width:32px!important;
    height:32px!important;
    font-size:15px!important;
  }

  .download strong{
    font-size:18px!important;
  }

  .download span{
    font-size:12.5px!important;
  }

  .step{
    font-size:13px!important;
    line-height:1.28!important;
    padding:8px 11px!important;
  }

  .btn{
    font-size:14px!important;
    padding:10px 8px!important;
  }

  .tab{
    font-size:14px!important;
  }

  h1{
    font-size:21px!important;
  }
}

/* Глобальное увеличение интерфейса примерно на 10% */
@media (max-width:520px){

  h1{
    font-size:22px!important;
    margin-bottom:4px!important;
  }

  p{
    font-size:14px!important;
    line-height:1.3!important;
  }

  .help{
    font-size:13px!important;
    padding:6px 11px!important;
  }

  .tab{
    font-size:14px!important;
    padding:6px 6px!important;
  }

  .info{
    font-size:12px!important;
    padding:6px 10px!important;
  }

  .download{
    padding:10px 14px!important;
    border-radius:14px!important;
  }

  .download .ico{
    width:34px!important;
    height:34px!important;
    font-size:16px!important;
  }

  .download strong{
    font-size:18px!important;
  }

  .download span{
    font-size:12.5px!important;
  }

  .step{
    padding:8px 11px!important;
    font-size:13px!important;
    line-height:1.28!important;
    border-radius:12px!important;
  }

  .note{
    font-size:13px!important;
    line-height:1.28!important;
  }

  .btn{
    font-size:14px!important;
    padding:10px 10px!important;
    border-radius:12px!important;
  }

  .smalllink{
    font-size:12px!important;
  }
}

/* ===== Premium зеленые кнопки ===== */
.green,
.green:link,
.green:visited,
.green:hover,
.green:active,
.download{
    color:#fff !important;
}

.green *,
.download *{
    color:#fff !important;
}

.download strong{
    color:#fff !important;
    font-weight:800;
    letter-spacing:.2px;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.download span{
    color:rgba(255,255,255,.94)!important;
}

.green{
    font-weight:800;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.download{
    background:linear-gradient(135deg,#18c77a 0%,#0ea765 100%)!important;
    box-shadow:
        0 12px 28px rgba(16,185,129,.24),
        inset 0 1px 0 rgba(255,255,255,.20);
    border:1px solid rgba(255,255,255,.12);
    transition:.2s;
}

.download:hover{
    transform:translateY(-1px);
    box-shadow:
        0 16px 34px rgba(16,185,129,.30),
        inset 0 1px 0 rgba(255,255,255,.20);
}


/* ===== Белый текст на всех зеленых кнопках ===== */

a.green,
.green,
.green:link,
.green:visited,
.green:hover,
.green:active,
button.green,
.download{
    color:#ffffff !important;
}

a.green *,
.green *,
button.green *,
.download *{
    color:#ffffff !important;
    fill:#ffffff !important;
}

.download strong,
.download span{
    color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.green{
    color:#ffffff !important;
    font-weight:800;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* Если текст находится внутри span/div/p */
.green span,
.green div,
.green p,
.green b,
.green strong,
.green small{
    color:#ffffff !important;
}


/* ===== Белый текст на кнопках "Продлить VPN" и "Подключить устройство" ===== */

.blue,
a.blue,
.blue:link,
.blue:visited,
.blue:hover,
.blue:active{
    color:#ffffff !important;
    font-weight:800 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.blue *,
a.blue *{
    color:#ffffff !important;
    fill:#ffffff !important;
}