/* Цены — стили страницы (скоуп prices.html).
Главная и общие файлы заморожены: components.css/tokens.css не трогаем,
всё, что отличается от эталона, — классы страницы здесь.
Значения — замер по SVG Figma «Prices - Desktop 1440 / Tablet 768 / Mobile 390». */
/* ——— 01 · Тарифы ————————————————————————————————————————
Правки 65 (D-28…D-36): вместо большого заголовка — H1 «Цены и тарифы»
в виде маленькой синей надписи, как на «Оформлении заказа».
Шапка → надпись 48/48/28, надпись → карточки 16 на всех ширинах. */
.pr-hero{padding-top:48px}
.pr-h1{margin-bottom:16px} /* D-32: до карточек 16 на всех ширинах */
.pr-tariffs .tariff{padding-bottom:26px}
.pr-tariffs .tariff .title{margin-top:9px}
.pr-tariffs .tariff__list{margin-bottom:41px}
.pr-tariffs .btn--sm{height:48px}
/* Плашка «Бесплатно…» — серая, как на главной (D-34…D-36).
Скругление 22/20/20 и поля плашки в tokens.css отсутствуют — значения из таблицы автора. */
.pr-free{display:flex;align-items:center;justify-content:space-between;gap:24px;
margin-top:var(--gap); /* D-36: карточки → плашка 16/12/12 — это --gap на 768/390; на 1440 ниже 16 */
background:var(--bg-soft);border-radius:22px;padding:19px 32px 20px 28px}
.pr-free__text{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.pr-free__link{flex:0 0 auto}
@media (min-width:1024px){.pr-free{margin-top:16px}} /* D-36: на ПК 16, а не --gap 24 */
/* ——— 02 · Сравнение тарифов —————————————————————————————
Сетка 360 + 4×210 = 1200 (доли, чтобы тянулась на 1024–1279).
Тёмная подсветка — фон самих ячеек колонки «Продвижение», без absolute. */
.pr-compare .head{margin-bottom:37px}
.ptab{--ptab-cols:minmax(0,360fr) repeat(4,minmax(0,210fr))}
.ptab__head,.ptab__row{display:grid;grid-template-columns:var(--ptab-cols)}
.ptab__cell{display:flex;align-items:center;justify-content:center;text-align:center;
padding:0 8px;border-top:1px solid var(--line)}
.ptab__cell--row{justify-content:flex-start;text-align:left;padding-left:0;
font-size:var(--fs-body);line-height:24px;color:var(--ink)}
.ptab__cell b{font-size:15px;line-height:20px;font-weight:700;color:var(--ink)}
.ptab__cell--dark{background:var(--tariff-dark);border-top-color:transparent;color:#fff}
.ptab__cell--dark b{color:#fff}
.ptab__cell--dark .i-check{background:var(--blue-on-dark)}
.ptab__tbd{color:var(--blue)}
/* шапка таблицы: колонки прижаты вниз, высота 128 */
.ptab__head .ptab__cell{flex-direction:column;align-items:center;justify-content:flex-end;
min-height:128px;border-top:0;padding-bottom:14px}
.ptab__head .ptab__cell--dark{border-radius:16px 16px 0 0;padding-top:22px}
.ptab__name{font-size:20px;line-height:25px;font-weight:700;color:var(--ink)}
.ptab__head .ptab__cell--dark .ptab__name{color:#fff}
.ptab__price{margin-top:5px;font-size:15px;line-height:18px;color:var(--gray)}
.ptab__head .ptab__cell--dark .ptab__price{color:var(--gray-2)}
.ptab__more{margin-top:8px;font-size:15px;line-height:18px}
.ptab__head .ptab__cell--dark .ptab__more{color:var(--blue-on-dark)}
/* подпись группы — отдельная строка таблицы (тёмная колонка не прерывается) */
.ptab__group{font-size:var(--fs-label);line-height:16px;font-weight:700;
text-transform:uppercase;color:var(--gray)}
.ptab__row--nb .ptab__cell{border-top:0}
.ptab__row .ptab__cell{min-height:45px}
.ptab__row--glabel .ptab__cell{min-height:43px;align-items:flex-end;padding-bottom:5px}
.ptab__dash{display:inline-block;width:12px;height:1.5px;background:var(--line-2)}
.ptab__cell--dark .ptab__dash{background:var(--gray)}
.ptab__row:last-child .ptab__cell--dark{border-radius:0 0 16px 16px}
/* ——— 03 · Дополнительные услуги ——————————————————————————— */
.pr-extra .head{margin-bottom:38px}
.pr-addons{list-style:none;margin:0;padding:0}
.card--addon{border-radius:var(--r-xl);padding:37px 36px 38px}
.card--addon .addon__cap{margin:0;font-size:15px;line-height:18px;font-weight:700;color:var(--gray)}
.addon__cap b{color:var(--blue)}
.addon__cap + .title{margin-top:14px}
.addon__list{margin:20px 0 0;padding:0;list-style:none}
.addon__list li{display:flex;align-items:baseline;gap:16px;
font-size:var(--fs-body);line-height:24px;color:var(--gray)}
.addon__list li + li{margin-top:10px}
.addon__btn{margin-top:33px;align-self:flex-start;height:43.5px;padding:0 30px}
/* ——— Брейкпоинты ——————————————————————————————————————— */
@media (max-width:1023px){
/* Правки 7, задача 2 (наряд «Дизайн-101», ТЗ [С] 21.10, image10/image11):
раздел «Сравнение / Что входит в каждый тариф.» — только для ПК,
на планшете и телефоне скрыт целиком вместе с отступами секции
(--section-y сверху и снизу), поэтому зазор от плашки «Бесплатно»
до «Если нужно больше» становится обычным для двух соседних секций:
80 + 80 на 768 и 56 + 56 на 390. Это отменяет решение Правок 65, Н-3
(наряд «Дизайн-94»), где блок был показан с прокруткой таблицы
по горизонтали внутри .ptab; те правила вместе с ним больше не нужны. */
.pr-compare{display:none}
.pr-addons{grid-template-columns:1fr}
/* D-36 (доработка Н-1): карточки → плашка 12 на 768 и 390; --gap на 768 даёт 16. */
.pr-free{margin-top:12px;gap:20px;border-radius:20px;padding:17px 27px 19px 25px}
.card--addon{padding:30px 30px 31px}
.addon__cap + .title{margin-top:10px}
.addon__list{margin-top:18px}
}
@media (max-width:767px){
.pr-hero{padding-top:28px} /* D-31: на мобильном шапка → надпись 28 */
.pr-free{display:block;padding:17px 20px 20px} /* D-35: ссылка уходит под текст */
.pr-free__link{margin-top:4px}
.pr-extra .head{margin-bottom:28px}
.card--addon{padding:23.85px 23px 26.7px}
.addon__cap + .title{margin-top:11.05px}
.addon__list{margin-top:17.5px}
.addon__list li{gap:14.9px} /* текст 17/24, колонка 278 — переносы как в макете */
.addon__btn{margin-top:23.4px}
/* 390 — доводка по SVG «Prices - Mobile 390» (замер, не подбор).
Зазор карточек — 12 из --gap (Правки 65, D-33), прежние 13 сняты. */
.pr-tariffs .tariff{padding:25.2px 23px 25.4px}
.pr-tariffs .tariff .title{margin-top:7.1px}
.pr-tariffs .tariff__price{margin-top:10.1px}
.pr-tariffs .tariff__desc{margin-top:8px}
.pr-tariffs .tariff__list{margin-top:18.1px;padding-top:16.8px;margin-bottom:24.8px}
}
/* 768 — доводка по SVG «Prices - Tablet 768» (замер, не подбор) */
@media (min-width:768px) and (max-width:1023px){
/* Зазор карточек — 16 из --gap (Правки 65, D-33), прежние 17 сняты. */
.pr-tariffs .tariff{padding:25.2px 23px 24.5px}
.pr-tariffs .tariff .title{margin-top:7.4px}
.pr-tariffs .tariff__price{margin-top:9.8px}
.pr-tariffs .tariff__desc{margin-top:7.8px}
.pr-tariffs .tariff__list{margin-top:18.3px;padding-top:16.7px;margin-bottom:27.3px}
.pr-extra .head{margin-bottom:28.8px}
.pr-extra .h2{max-width:590px} /* строки H2 как в макете: «Если нужно больше.» / «Добавьте…» */
.card--addon{padding:23.8px 22.5px 24.45px}
.card--addon .title{max-width:440px} /* в макете заголовки карточек в 2 строки */
.addon__cap + .title{margin-top:11.5px}
.addon__list{margin-top:16.9px}
.addon__btn{margin-top:29.85px}
}