/* sokolapp.ru — воронка «выбор устройства → установка».
   Палитра и токены взяты 1:1 с витрины sokol-app.ru (тёмный + жёлтый),
   чтобы обе площадки читались как один бренд.

   ГЛАВНОЕ ОГРАНИЧЕНИЕ: экран 1 обязан помещаться в один экран телефона без
   скролла. Отсюда 100dvh (не vh — иначе адресная строка Safari срезает низ),
   flex-колонка и clamp() на все кегли: на iPhone SE (568px) текст ужимается,
   на больших экранах не растягивается. */
:root{
  --bg:#0a0b0d;
  --bg2:#111317;
  --card:#15181d;
  --border:#23272f;
  --border-hi:#33373f;
  --text:#e9eaec;
  --muted:#8b909a;
  --muted2:#6a6f78;
  --yellow:#ffd400;
  --yellow-dim:#c9a900;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(620px 320px at 50% -8%, rgba(255,212,0,.10), transparent 62%),
    linear-gradient(180deg,var(--bg2),var(--bg) 42%);
  background-attachment:fixed;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}

/* Каркас экрана: шапка сверху, смысл по центру, кнопки прижаты вниз —
   большой палец дотягивается без перехвата телефона. */
.screen{
  min-height:100dvh;
  max-width:460px;
  margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2.8vh,20px);
}

/* ---------- Шапка ---------- */
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--yellow);color:#0a0b0d;
  display:grid;place-items:center;font-size:18px;font-weight:900;
  box-shadow:0 0 22px rgba(255,212,0,.32);
}
.brand .name{font-weight:800;font-size:17px;letter-spacing:.3px}
.brand .kind{margin-left:auto;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted2);font-weight:700}

/* ---------- Смысловой блок ---------- */
/* Свободную высоту делим ПОПОЛАМ между двумя auto-margin: сверху (перед .core)
   и снизу (после кнопок). Раньше низ был прижат к краю, и весь остаток копился
   одной дырой перед «Какое у вас устройство?» — вопрос проваливался вниз.
   Теперь весь блок «смысл + действие» стоит по центру как одно целое. */
.core{flex:0 1 auto;margin-top:auto;display:flex;flex-direction:column;gap:clamp(11px,2.6vh,18px)}
.tail{margin-bottom:auto}
h1{
  font-size:clamp(23px,6.6vw,31px);
  line-height:1.14;
  letter-spacing:-.5px;
  font-weight:800;
  margin:0;
}
h1 .hl{color:var(--yellow)}
.lead{color:var(--muted);font-size:clamp(14px,3.8vw,15.5px);line-height:1.58;margin:0}
.lead b{color:var(--text);font-weight:600}

/* Плашки-доверие */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.badge{
  border:1px solid var(--border-hi);background:var(--card);border-radius:999px;
  padding:5px 11px;font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}

/* Цена — единственный акцентный блок, его нельзя пролистать мимо. */
.price{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  background:rgba(255,212,0,.06);
  border:1px dashed var(--yellow-dim);
  border-radius:12px;
  padding:13px 15px;
}
.price .free{font-size:clamp(15px,4.4vw,18px);font-weight:800;color:var(--yellow)}
.price .then{font-size:13.5px;color:var(--muted)}
.price .then b{color:var(--text);font-weight:700}

/* ---------- Действие ---------- */
.ask{font-size:13px;color:var(--muted2);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin:0 0 10px}
.actions{display:flex;flex-direction:column;gap:10px;margin-bottom:auto}
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--yellow);color:#0a0b0d;
  font-weight:700;font-size:clamp(15px,4.1vw,16px);
  padding:14px 18px;border-radius:12px;border:none;
  width:100%;cursor:pointer;
  transition:background .15s,transform .1s;
}
.btn:active{transform:scale(.99)}
.btn:hover{background:#ffe23f}
.btn.sec{background:var(--card);color:var(--text);border:1px solid var(--border-hi)}
.btn.sec:hover{background:#1b1f26;border-color:var(--yellow-dim)}
.btn .num{
  width:20px;height:20px;border-radius:6px;flex:none;
  display:grid;place-items:center;font-size:12px;font-weight:900;
  background:rgba(0,0,0,.16);
}
.btn.sec .num{background:rgba(255,255,255,.09);color:var(--yellow)}

.note{font-size:12px;color:var(--muted2);text-align:center;margin:2px 0 0;line-height:1.5}
.note a{color:var(--muted);border-bottom:1px solid var(--border-hi)}

/* ---------- Экран 2: шаги установки ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.steps li{
  counter-increment:s;position:relative;
  padding-left:32px;font-size:clamp(13.5px,3.7vw,15px);color:var(--muted);
}
.steps li b{color:var(--text);font-weight:600}
.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:7px;
  background:var(--card);border:1px solid var(--border-hi);color:var(--yellow);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;
}
.hint{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;font-size:13px;color:var(--muted);margin:0;
}
.hint b{color:var(--text)}
.back{display:inline-block;font-size:13px;color:var(--muted2);margin-top:2px}
.back:hover{color:var(--text)}

/* Низкие экраны (iPhone SE — видимая область ~553px): воздуха физически нет,
   поджимаем всё до нижних границ clamp'ов. Проверено рендером: без этого блока
   нижняя строка «Вопросы — поддержка…» уезжает за край. */
@media (max-height:610px){
  .screen{gap:9px;padding-top:12px;padding-bottom:12px}
  .core{gap:9px}
  h1{font-size:clamp(21px,5.6vw,26px)}
  .lead{line-height:1.5}
  .badge{padding:4px 10px}
  .price{padding:10px 13px}
  .ask{margin-bottom:7px}
  .actions{gap:8px}
  .btn{padding:12px 16px}
  .steps{gap:6px}
}

/* Совсем низкие экраны (SE в горизонте, старые андроиды) — отпускаем скролл,
   лучше проскроллить, чем получить обрезанную кнопку. */
@media (max-height:520px){
  .screen{min-height:0}
  .core{margin-top:0}
  .tail,.actions{margin-bottom:0}
}