/* Короткий гид: вход и карта приложения.
   Общее с подробным - в shell.css. Здесь только своё: герой, шаги входа
   полосами и плитки «где что лежит». */

.hero-start {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-10) 0 var(--sp-11); flex-wrap: wrap;
}
/* Ритм внутри героя: правило сайта перечисляет свои блоки поимённо,
   и этот в список не входит. */
.hero-start__text > * + * { margin-top: var(--sp-3); }
.hero-start img { width: 68px; height: 68px; border-radius: 16px; flex: none; }
.hero-start .hero-start__text { min-width: 0; }

/* ── шаги входа ─────────────────────────────────────────────
   Полосы, а не ряд карточек: в ряду из пяти экран сжимался до
   ста пикселей и разобрать на нём было нечего. Полосы идут
   через одну - снимок то слева, то справа, - и экран стоит во
   всю высоту полосы. */

.getapp {
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card);
  padding: var(--sp-8) var(--pad-card);
}
.getapp img { width: 64px; height: 64px; border-radius: 15px; flex: none; }
.getapp__num { color: rgba(20, 20, 27, .14); font-family: var(--font-display);
  font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.getapp__text { min-width: 0; }
.getapp__text > * + * { margin-top: var(--sp-2); }

.flowsteps { display: grid; gap: var(--sp-11); margin-top: var(--sp-9); }

.flowstep {
  display: grid; gap: var(--sp-9); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Через одну снимок уходит вправо: ряд перестаёт читаться таблицей. */
@media (min-width: 900px) { .flowstep--flip .flowstep__art { order: 2; } }

/* Три слоя, как на лендинге: белая карточка на холсте, тинт внутри неё,
   экран на тинте. Тинт сам по себе бледный, и на таком же бледном холсте
   он не читался - контраст даёт белое поле вокруг. */
.flowstep__art { padding: var(--sp-7); display: grid; }
.flowstep__plate {
  border-radius: var(--r-tile); display: grid; place-items: center;
  padding: var(--sp-9) var(--sp-7);
}
.flowstep__plate--blue { background: var(--tint-blue); }
.flowstep__plate--violet { background: var(--tint-violet); }
.flowstep__plate--green { background: var(--tint-green); }
.flowstep__plate--pink { background: var(--tint-pink); }

.flowstep__text > * + * { margin-top: var(--sp-4); }
.flowstep__num {
  font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1;
  letter-spacing: -.03em; color: rgba(20, 20, 27, .12);
}
.flowstep__text .done { color: var(--green, #3EA36B); font-weight: 700; }

/* ── где что лежит ──────────────────────────────────────── */
.whereto {
  display: grid; gap: var(--gap-card); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(4, 1fr);
}
.whereto li { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: var(--sp-6); }
.whereto .dest {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; background: var(--tint-blue); color: var(--blue);
  margin-bottom: var(--sp-3);
}
.whereto b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.whereto span.note { display: block; margin-top: 2px; font-size: 14px; color: var(--cap); font-weight: 500; }

/* ── адаптив ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .whereto { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .flowstep { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .flowsteps { gap: var(--sp-10); }
}
@media (max-width: 700px) {
  .hero-start img { width: 54px; height: 54px; }
  .flowstep__art { padding: var(--sp-5); }
  .flowstep__plate { padding: var(--sp-6) var(--sp-4); }
}

/* Последняя секция кончается синей полосой, а за ней подвала нет:
   без этого она упиралась в самый низ окна. */
main > .section:last-child { padding-bottom: var(--sp-12); }