/*
 *  download.css
 *  ochat-web
 *
 *  Страница `/download/`: выбор магазина. Кнопки — те же `.btn .btn-primary`
 *  из `common.css`, что и на лендинге, чтобы магазин здесь выглядел так же,
 *  как там, откуда о нём узнали.
 */

.dl-main { padding: 96px 0 120px; }

.dl-card {
    max-width: 520px;
    text-align: center;
}

.dl-card h1 {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--text);
}

.dl-lead {
    color: var(--text2);
    margin: 0 0 32px;
}

.dl-stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* На узком экране кнопки встают друг под другом во всю ширину карточки:
   две кнопки разной длины рядом на телефоне переносились бы криво. */
@media (max-width: 480px) {
    .dl-stores { flex-direction: column; }
    .dl-stores .btn { justify-content: center; }
}

.dl-note {
    color: var(--text3);
    font-size: .88rem;
    margin: 24px 0 0;
}

/* Строка ухода в магазин. Без скрипта её не видно вовсе: без скрипта никто
   никуда не уходит, и обещать «открываем» было бы неправдой. */
.dl-opening {
    display: none;
    color: var(--text2);
    margin: 0 0 24px;
}

/* Состояние ухода в магазин. Атрибуты ставит `redirect.js` ещё в <head>,
   до появления тела, поэтому выбор из двух кнопок не мелькает. */
html[data-download="redirect"] .dl-opening { display: block; }
html[data-download="redirect"] .dl-choose { display: none; }
html[data-store="play"] .dl-store[data-for="appstore"],
html[data-store="appstore"] .dl-store[data-for="play"] { display: none; }