/* Только страница цены: плашка про тестовый премиум, панели режимов оплаты и карточки
   тарифов. Секция «что даёт премиум» своих стилей не имеет - это .hm-cards из ui.css как
   есть, сам переключатель режимов - .hm-tabs оттуда же.

   Карточка тарифа отдельная, а не .hm-card: у той содержимое идёт сверху вниз подряд, а
   здесь кнопка обязана стоять по нижнему краю независимо от длины описания - иначе в ряду
   из трёх карточек кнопки встают лесенкой. */

/* Плашка про 3 дня премиума при регистрации. Стоит в шапке страницы, а не в карточке
   тарифа: она про аккаунт, а не про режим оплаты, и в старой странице висела только над
   вкладкой «по времени» - хотя к поштучной относится ровно так же. */
.hm-price__trial {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hm-ink-2);
}

.hm-price__trial svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--hm-signal);
}

/* ============ панели режимов ============ */
/* Сам переключатель живёт в ui.css (.hm-tabs): тем же выбирает вид статистики
   stat_devices, и компонент, нужный второй странице, копировать нельзя - раздел 9. */

/* hidden на неактивной панели вешает шаблон, а снимает скрипт. Правило нужно, потому что
   display из авторского стиля перебивает [hidden] { display: none } браузера, где бы тот
   ни стоял: авторские стили всегда сильнее. Стоит панели получить свой display - и она
   покажется вместе с активной, при этом атрибут в разметке будет выглядеть исправным. */
.hm-price__panel[hidden] {
    display: none;
}

/* ============ карточки тарифов ============ */
.hm-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.hm-plan {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 22px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 11px;
}

.hm-plan__name {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--hm-ink);
}

/* Обёртка цены. font-size здесь, а не только на .hm-plan__sum: строка держит высоту от
   собственного шрифта, и карточки в ряду не разъезжаются, если цену однажды уберут или
   заменят на прочерк. */
.hm-plan__price {
    font-size: 30px;
}

/* Шрифт основной, а не моноширинный, хотя цена - это цифры. В моно точка занимает целую
   ячейку, и на 30px «$6.99» читается как «$6 . 99». Моно остаётся там, где он и нужен, -
   у надзаголовков и номеров шагов. tabular-nums всё равно ставим: цены стоят в ряд, и
   цифры должны быть одной ширины. */
.hm-plan__sum {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    color: var(--hm-ink);
}

.hm-plan__sub {
    font-size: 14.5px;
    line-height: 1.58;
    color: var(--hm-ink-2);
}

/* Кнопку прижимаем к низу карточки: описания у тарифов разной длины. Пара классов, а не
   .hm-btn - тому margin задавать нечего, он живёт и вне карточки. */
.hm-plan .hm-btn {
    margin-top: auto;
    padding-top: 11px;
    padding-bottom: 11px;
}

/* Сноска режима: для «по времени» - что сумма посчитана на два устройства, для
   «поштучно» - что считаются и входящие.

   Цвет вторичный (--hm-ink-2), а не приглушённый --hm-ink-3, хотя по размеру это подпись:
   --hm-ink-3 на белом даёт 3.05:1 при норме AA 4.5:1 (замер на этой странице), а здесь
   лежит условие покупки - на сколько устройств посчитана сумма и что считается
   сообщением. Текст, который меняет цену, обязан быть читаемым. */
.hm-plan__note {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--hm-ink-2);
}

@media (max-width: 992px) {
    .hm-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .hm-plans {
        grid-template-columns: 1fr;
        margin-top: 22px;
    }
}