/* ======================================================================
   Страницы тарифов «Продвижение» и «Под ключ» (наряд «Дизайн-28»).
   Общий каркас страницы тарифа: первый экран «текст + карточка цены»,
   нумерованный список «каждый месяц», карточки-причины, таблица
   «Что важно знать до старта».
   Замеры — из SVG Figma (Tariff Promotion / Tariff Turnkey, 1440 и 390).
   Макета 768 в Figma нет: на планшете раскладка резиновая между 1440 и 390.
   Правило проекта: tokens.css и components.css не трогаем — всё здесь.
   ====================================================================== */

.tf{
  --tf-r-card:30px;   /* скругление карточки цены (замер по краю в screens/*_1440.png) */
  --tf-r-note:24px;   /* скругление плашки-подсказки под карточкой цены */
  --tf-col:400px;     /* колонка карточки цены на 1440 */
  --tf-colgap:80px;   /* зазор между колонками первого экрана на 1440 */
}

/* ---------- Первый экран: две колонки ---------- */
.tf-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tf-col));column-gap:var(--tf-colgap);align-items:start}
.tf-main{grid-column:1;min-width:0}
.tf-side{grid-column:2;grid-row:1}

/* Хлебные крошки: 15/18, активный раздел серый */
.tf-crumbs{font-size:15px;line-height:18px;color:var(--gray-2)}
.tf-crumbs a{color:var(--blue);font-weight:700}
.tf-crumbs span{color:var(--gray)}

/* H1 первого экрана тарифа: 58/64 на 1440 (замер ширины строк по SVG) */
.tf-h1{margin-top:20.9px}
.tf-lead{margin-top:29.6px;max-width:none}

/* Надзаголовок «КАЖДЫЙ МЕСЯЦ» над списком шагов */
.tf-kicker{margin-top:46.3px}

/* ---------- Нумерованный список шагов ---------- */
.tf-rows{margin-top:14.2px}
.tf-rows .rows__item{border-top:1px solid var(--line);padding:19.7px 0 22.3px;gap:18px;align-items:flex-start}
.tf-rows .rows__item:first-child{border-top:1px solid var(--line);padding-top:19.7px}
.tf-rows .rows__item:last-child{padding-bottom:0}
.tf-rows .rows__num{flex:0 0 32px;width:32px;height:32px;margin-top:-1.2px;background:var(--bg-soft);color:var(--ink);font-size:15px;font-weight:700}
.tf-rows .rows__item p{margin-top:4px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray)}

/* ---------- Карточка цены ---------- */
.tf-card{background:var(--bg-soft);border-radius:var(--tf-r-card);padding:36px}
.tf-card .title{margin-top:7.4px}
.tf-price{display:flex;align-items:flex-end;gap:var(--tf-price-gap,80px);margin-top:11.3px;
  font-size:var(--fs-price-s);line-height:var(--lh-price-s);font-weight:700;color:var(--ink)}
.tf-price__per{white-space:nowrap;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;color:var(--gray);padding-bottom:3px}
.tf-card__desc{margin-top:4.3px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray)}
.tf-card__list{margin-top:20.2px;border-top:1px solid var(--line-2);padding-top:19.7px;display:flex;flex-direction:column;gap:8.1px}
.tf-card__list li{display:flex;align-items:center;gap:14px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.tf-card__list .i-check{width:14.6px;height:10.3px}
.tf-card .btn{margin-top:28.3px}

/* ---------- Плашка-подсказка под карточкой цены ---------- */
.tf-note{margin-top:24.5px;background:var(--bg);border-radius:var(--tf-r-note);
  box-shadow:inset 0 0 0 1px var(--line);padding:26.2px 28px 26.7px}
.tf-note p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray)}
.tf-note b{color:var(--ink)}
.tf-note .link{margin-top:8.1px}

/* ---------- Карточки-причины (секция на сером фоне) ---------- */
.tf-reasons .head,.tf-steps .head{margin-bottom:42.3px}
.tf-reasons .eyebrow,.tf-steps .eyebrow{margin-bottom:15.15px}
.tf-reasons .card{padding:32px 30px 32.6px}
.tf-ico{width:40px;height:40px;border-radius:50%;background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center}
.tf-ico svg{width:20px;height:20px;display:block}
.tf-reasons .card .title{margin-top:18px}
.tf-reasons .card p{margin-top:9.4px;font-size:var(--fs-small);line-height:var(--lh-small)}
/* Карточки «Как проходит месяц» — без иконки */
.tf-steps .card{padding:30px 30px 32.6px}
.tf-steps .card p{margin-top:9.4px;font-size:var(--fs-small);line-height:var(--lh-small)}

/* ---------- Таблица «Что важно знать до старта» ---------- */
.tf-facts{margin-top:48.3px;border-bottom:1px solid var(--line)}
.tf-facts__row{display:grid;grid-template-columns:minmax(0,301px) minmax(0,1fr);
  border-top:1px solid var(--line);padding:20.8px 0 22.2px}
.tf-facts__k{font-size:15px;line-height:20px;color:var(--gray)}
.tf-facts__v{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.tf-facts__v b{font-weight:700}
.tf-facts__v a{color:var(--blue)}
.tf-after{display:flex;margin-top:48.7px}

/* Компенсация переносов двухцветных заголовков — только на ширинах макета 1440.
   На 768–1279 макета нет, там заголовки и отбивки идут естественно. */
@media (min-width:1280px){
  .tf-lead{margin-top:calc(29.6px + var(--tf-h1-gap,0px))}
  .tf-reasons .head,.tf-steps .head{margin-bottom:calc(42.3px + var(--tf-h2-gap,0px))}
}

/* ---------- Планшет и узкий десктоп ---------- */
@media (max-width:1279px){
  .tf{--tf-colgap:48px;--tf-col:360px}
  .tf-price{gap:24px}   /* в узкой колонке «/ мес» прижимается к цене */
}
@media (max-width:1023px){
  .tf-hero__in{display:flex;flex-direction:column;align-items:stretch}
  /* components.css ограничивает H1 главной 420 px и трекингом −1; на тарифах H1 свой */
  .tf-h1{max-width:none;letter-spacing:0}
  .tf-main,.tf-side{display:contents}
  .tf-crumbs{order:1}
  .tf-h1{order:2}
  .tf-lead{order:3}
  .tf-card{order:4;margin-top:32px}
  .tf-kicker{order:5;margin-top:40px}
  .tf-rows{order:6}
  .tf-note{order:7;margin-top:32px}
  .tf-facts{margin-top:32px}
  .tf-facts__row{grid-template-columns:minmax(0,1fr);padding:20px 0 21px}
  .tf-facts__k{margin-bottom:5.8px}
}

/* ---------- Телефон (макет 390) ---------- */
@media (max-width:767px){
  .tf{--tf-r-card:30px;--tf-r-note:24px}
  .tf-crumbs{font-size:15px;line-height:18px}
  /* H1 на 390: 35/40, трекинг 0 — замер ширины строк по SVG «Mobile 390» */
  .tf-h1{font-size:35px;line-height:40px;margin-top:17.4px}
  /* В макете 390 подзаголовка первого экрана и списка в карточке цены нет */
  .tf-lead{display:none}
  .tf-card__list{display:none}
  .tf-card{order:4;margin-top:calc(28.5px + var(--tf-h1-gap-m,0px));padding:23.9px 24px 24px}
  .tf-card .title{margin-top:6.9px}
  .tf-price{margin-top:11px;gap:var(--tf-price-gap-m,36px)}
  .tf-price__per{padding-bottom:2px}
  .tf-card__desc{margin-top:3.6px}
  .tf-card .btn{margin-top:24.6px}
  .tf-kicker{order:5;margin-top:37.7px}
  .tf-rows{margin-top:14.15px}
  .tf-rows .rows__item{padding:19.8px 0 22.2px;gap:14px}
  .tf-rows .rows__item:first-child{padding-top:19.8px}
  .tf-note{order:7;margin-top:var(--tf-note-mt-m,32.65px);padding:20.2px 21px 22.3px}
  .tf-note .link{margin-top:8.5px}
  .tf-reasons .head,.tf-steps .head{margin-bottom:calc(var(--gap-head) + var(--tf-h2-gap-m,0px))}
  .tf-reasons .eyebrow,.tf-steps .eyebrow{margin-bottom:12.3px}
  .tf-reasons .grid,.tf-steps .grid{gap:var(--gap)}
  .tf-reasons .card{padding:24px 22px 24.6px}
  .tf-reasons .card .title{margin-top:18.7px}
  .tf-reasons .card p{margin-top:8.7px}
  .tf-steps .card{padding:22.7px 22px 24.4px}
  .tf-steps .card p{margin-top:8.9px}
  .tf-after{margin-top:39.5px}
  .tf-facts{margin-top:27.9px}
  .tf-facts__row{padding:19.6px 0 20.6px}
  .tf-facts__k{margin-bottom:5.8px}
}