/* Регистрация на сайте. Отдельный файл: страница живёт сама по себе,
   до кабинета, и таскать ради неё стили кабинета незачем. */
:root {
  --ink: #072442;
  --muted: #6E6E6E;
  --line: #E7E1DD;
  --warm: #F4E8E3;
  --ground: #F8F7F6;
  --accent: #C0745C;
}
*, *:before, *:after { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: "Jost", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh; display: flex; justify-content: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
}
a { color: var(--ink); }
.wrap { width: 100%; max-width: 460px; align-self: center; }
.brand { height: 26px; width: auto; display: block; margin: 0 0 34px; }

h1 { margin: 0 0 12px; font-size: 30px; font-weight: 600; line-height: 1.15;
     letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 0 0 26px; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Выбор роли: две крупные карточки, промахнуться пальцем невозможно. */
.picks { display: flex; flex-direction: column; gap: 12px; }
.pick {
  width: 100%; text-align: left; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; font-family: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s ease, transform .06s ease;
}
.pick:hover { border-color: var(--accent); }
.pick:active { transform: scale(.995); }
.pick b { font-size: 18px; font-weight: 600; }
.pick span { font-size: 14.5px; color: var(--muted); line-height: 1.4; }

.tgbox { min-height: 54px; display: flex; justify-content: center; margin-bottom: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input {
  width: 100%; height: 54px; padding: 0 16px;
  border: 1px solid #D9D9D9; border-radius: 10px; background: #FFFFFF;
  font-family: inherit; font-size: 17px; color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--accent); }

.go {
  width: 100%; height: 56px; margin-top: 8px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--ink); color: #FFFFFF;
  font-family: inherit; font-size: 16.5px; font-weight: 600;
}
.go[disabled] { opacity: .55; }
.go.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.back {
  margin-top: 18px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--muted);
}
.fine { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.err { margin: 14px 0 0; font-size: 14.5px; color: #B4462F; }
.legal { margin: 34px 0 0; font-size: 12.5px; line-height: 1.5; color: #9A9490; }

/* Шаги установки — те же, что в кабинете: человек уже их видел. */
.steps { margin: 0 0 6px; padding: 0; list-style: none; counter-reset: step;
  display: flex; flex-direction: column; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding-left: 38px;
  font-size: 15.5px; line-height: 1.5; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--warm); color: #8A5A46; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.steps-hint { margin: 10px 0 0 38px; font-size: 13.5px; color: var(--muted); }

/* Будущий адрес страницы — под полем имени и меняется, пока человек
   печатает. Заполненное поле люди проскакивают глазами; шевелящаяся
   строка под ним — нет. А адрес выдаётся навсегда. */
/* Селектор с .field — иначе .field > span перебивает по весу и адрес
   печатается капслоком, как подпись поля. */
.field > .addr {
  /* Это не подпись поля, а строка адреса: капслок и разрядка от .field > span
     здесь только мешают читать. */
  font-size: 13.5px; color: var(--muted); line-height: 1.4;
  text-transform: none; letter-spacing: normal; word-break: break-all;
}
.field > .addr b { color: var(--accent); font-weight: 600; }

/* Кнопка «Открыть кабинет» — ссылка, а не кнопка: это переход, и человек
   должен видеть адрес в строке состояния и уметь открыть в новой вкладке. */
a.go {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-sizing: border-box;
}

/* Рисунок под шагом установки. Не скриншот: на настоящем снимке экрана
   видны часы, заряд и — в листе «Поделиться» — аватарки и имена из
   адресной книги. Рисунок ничего этого не показывает и не устаревает
   от смены обоев или языка системы. */
.step-art { margin: 8px 0 4px; }
.step-art svg { display: block; width: 100%; max-width: 300px; height: auto; }