/* =====================================================================
   Страницы тарифов (Проверка бренда, План, далее Продвижение / под ключ).
   Общий скелет первого экрана: слева хлебные крошки + H1 + лид + список
   «что будет», справа серая карточка тарифа и белая плашка-подсказка.

   Правки 65, этап Н-2 (наряд «Дизайн-93»): размеры и отступы приведены
   к Таблицам 1–2 из `Правки_65.docx` (ПК 1440 / мобильный 390).
   768 макета нет — берём токены планшета, они ложатся между 1440 и 390
   (и совпадают с Таблицами 3–4 для «Плана»).
   Скоуп страницы — .tpage. Общие файлы не трогаем.
   ===================================================================== */

/* ---------- Сетка первого экрана ---------- */
/* Правки 65, Н-3: на ≤1023 одна колонка.
   Правки 7, задача 2 (наряд «Дизайн-101», ТЗ [С] 21.10): порядок блоков
   на планшете и телефоне — заголовок → карточка тарифа → список
   «ЧТО БУДЕТ В …» → плашка-подсказка (image5 «Проверка бренда»,
   image6/8/9 «План»). Карточка поднялась с order 3 на order 2.
   ПК (≥1024) собирается грид-областями ниже, order там не действует. */
.tpage .trf-grid{display:flex;flex-direction:column}
.tpage .trf-main,.tpage .trf-side{display:contents}
.tpage .trf-head{order:1}
.tpage .trf-card{order:2}
.tpage .trf-list{order:3}
.tpage .trf-note{order:4}

/* Подписи верхним регистром («ЧТО БУДЕТ В ОТЧЁТЕ», «УЗНАТЬ», «ПОНЯТЬ»)
   в Таблице 1 одинаковы на всех ширинах — 13/16 Bold (токен на ≤1023 даёт 12/15). */
.tpage .label{font-size:13px;line-height:16px}

/* ---------- Хлебные крошки ---------- */
.tpage .crumbs{display:flex;flex-wrap:wrap;align-items:baseline;
  font-size:var(--fs-small);line-height:20px;color:var(--gray)}
.tpage .crumbs a{color:var(--blue);font-weight:700}
.tpage .crumbs a:hover{opacity:.9}
.tpage .crumbs__sep{color:var(--gray-2);margin:0 7.4px}

/* ---------- Заголовок и вводный абзац ---------- */
/* Трекинг H1 в макетах этой страницы отрицательный: ширина строки
   «Советуют ли вас» 485,2 при 60 px (1440) и 291,1 при 36 px (390)
   — это −0,0176em (как −1 px у .h1--hero главной). */
.tpage .trf-h1{margin-top:15.6px;letter-spacing:-.0176em}
.tpage .trf-lead{display:block;margin-top:24px}

/* Правки 7: хлебные крошки и вводный абзац на ≤1023 скрыты — первым идёт
   заголовок (image5, image6/8/9). Скрываем целиком, вместе с их отступами,
   поэтому верх секции остаётся обычным --section-y, а заголовку больше
   нечего отбивать от крошек — margin-top 0. Блок идёт ПОСЛЕ базовых
   .crumbs{display:flex} и .trf-lead{display:block} — иначе при равной
   специфичности побеждали бы они. */
@media (max-width:1023px){
  .tpage .crumbs{display:none}
  .tpage .trf-lead{display:none}
  .tpage .trf-h1{margin-top:0}
}

/* ---------- Список «Что будет в отчёте / в плане» ---------- */
/* Правки 7, таблица отступов: карточка → список 40 (телефон) / 48 (планшет). */
.tpage .trf-list{margin-top:40px}
/* Табл. 2: подпись → пункт 1 — 16, линии под подписью нет. */
.tpage .trf-list__cap{color:var(--gray);margin-bottom:16px}
.tpage .trf-rows{border-bottom:0}
/* Табл. 2: между пунктами 24 сверху и снизу + линия 1 px #E8E8ED
   (на телефоне 20). У первого пункта линии и верхнего отступа нет. */
.tpage .trf-rows .rows__item{gap:14.5px;padding:20px 0;
  border-top:1px solid var(--line)}
.tpage .trf-rows .rows__item:first-child{border-top:0;padding-top:0}
.tpage .trf-rows .rows__item:last-child{padding-bottom:0}
/* Табл. 1: цифра 17 Bold тёмная, кружок 36 #F5F5F7 (новый макет отменяет
   прежние 15 Regular в кружке 32). */
.tpage .trf-rows .rows__num{flex:0 0 36px;width:36px;height:36px;
  background:var(--bg-soft);color:var(--ink);font-size:17px;font-weight:700;
  margin-top:0}
.tpage .trf-rows .rows__body{min-width:0}
/* Табл. 1: заголовок пункта 22/28 ПК, 20/26 планшет и телефон. */
.tpage .trf-rows .rows__item .title{font-size:var(--fs-title-m);
  line-height:var(--lh-title-m)}
.tpage .trf-rows .rows__item p{margin-top:2.3px;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--gray)}

/* ---------- Карточка тарифа ---------- */
/* Табл. 2: поля / скругление 36/36 на ПК и 24×22/28 на телефоне —
   это ровно токены --card-lg-* и --r-xl. */
/* Правки 7: карточка идёт сразу за заголовком — заголовок → карточка
   24 (телефон) / 32 (планшет) по таблице отступов ТЗ [С] 21.10.
   Прежние 64 / 72 (зазор «список → карточка» из Н-3) отменены. */
.tpage .trf-card{display:flex;flex-direction:column;align-items:stretch;
  background:var(--bg-soft);border-radius:var(--r-xl);
  padding:var(--card-lg-py) var(--card-lg-px);margin-top:24px}
/* Табл. 2: «УЗНАТЬ» → название → цена → подпись = 8 → 4 → 2. */
.tpage .trf-card .title{margin-top:8px;font-size:var(--fs-title-s);
  line-height:var(--lh-title-s)}
/* Табл. 1: цена 48/58 ПК, 40/48 планшет и телефон — токен --fs-price. */
.tpage .trf-card__price{margin-top:4px;font-size:var(--fs-price);
  line-height:var(--lh-price);font-weight:700;color:var(--ink)}
.tpage .trf-card__note{margin-top:2px;font-size:var(--fs-small);
  line-height:var(--lh-small);color:var(--gray)}
/* Табл. 2: подпись → линия → пункты = 24 → 24, линия #D2D2D7. */
.tpage .trf-card__line{display:block;height:1px;border:0;
  background:var(--line-2);margin-top:24px}
.tpage .trf-card__list{display:flex;flex-direction:column;gap:12px;
  margin-top:24px}
.tpage .trf-card__list li{display:flex;align-items:flex-start;gap:14px;
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink)}
.tpage .trf-card__list .i-check{width:15px;height:10.5px;margin-top:4.75px}
/* Табл. 2: пункты → кнопка 32 / 28 / 24 (токен --gap-actions), кнопка → ссылка 20.
   Высота кнопки 60 / 58 / 56 — базовый --btn-h, 17 Bold. */
.tpage .trf-card .btn{margin-top:var(--gap-actions);width:100%}
.tpage .trf-card__link{margin-top:20px;align-self:center;
  font-size:var(--fs-small);line-height:var(--lh-small)}

/* ---------- Белая плашка-подсказка ---------- */
/* Табл. 2: поля / скругление 32×30/32 на ПК и 24×22/28 на телефоне —
   токены --card-* и --r-lg. Рамка #E8E8ED. */
/* Правки 7: плашка идёт за списком — список → доплата 32 (телефон) /
   40 (планшет) по таблице отступов ТЗ [С] 21.10. Прежние 20 (зазор
   «карточка → плашка» из Н-3) отменены. На ПК ниже 24, как было. */
.tpage .trf-note{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--bg);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:var(--card-py) var(--card-px);margin-top:32px}
.tpage .trf-note p{font-size:var(--fs-small);line-height:var(--lh-small);
  color:var(--gray)}
.tpage .trf-note p b{color:var(--ink)}
.tpage .trf-note p + p{margin-top:6.2px;color:var(--ink)}
.tpage .trf-note .link{margin-top:9.3px;font-size:var(--fs-small);
  line-height:var(--lh-small)}

/* =====================================================================
   Планшет и широкий телефон: 768–1023. Макета нет — одна колонка,
   как на 390, размеры берут токены 768.
   ===================================================================== */
@media (min-width:768px) and (max-width:1023px){
  /* Между пунктами списка — 24, как на ПК (Табл. 4 «Плана»: планшет 24). */
  .tpage .trf-rows .rows__item{padding:24px 0}
  /* Табл. 4: поля страницы на планшете 40 (общий токен даёт 48).
     Меняем только внутри .tpage — шапка и подвал остаются общими. */
  .tpage{--gutter:40px}
  /* Правки 7, таблица отступов (планшет): заголовок → карточка 32,
     карточка → список 48, список → доплата 40. */
  .tpage .trf-card{margin-top:32px}
  .tpage .trf-list{margin-top:48px}
  .tpage .trf-note{margin-top:40px}
}

/* =====================================================================
   Десктоп: от 1024 — две колонки. На 1280+ контейнер 1200,
   левая колонка 720, правая 400, зазор 80 — как в макете 1440.
   ===================================================================== */
@media (min-width:1024px){
  .tpage .trf-grid{display:grid;align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:40px}
  .tpage .trf-main,.tpage .trf-side{display:flex;flex-direction:column;min-width:0}
  .tpage .trf-side{grid-column:2;grid-row:1}
  .tpage .trf-main{grid-column:1;grid-row:1}

  /* Табл. 1: заголовок 56/60 (было 60/64).
     Правки 7 (ТЗ [С] 21.10): вводный абзац на ПК 20/32 → 22/32 — это ровно
     токен --fs-lead / --lh-lead (tokens.css, :root = 22/32), поэтому
     магические px убраны, tokens.css не меняем. Один кегль с заголовками
     пунктов списка (22/28). Остальное на ПК не трогаем. */
  .tpage .trf-h1{margin-top:19.6px;font-size:56px;line-height:60px}
  .tpage .trf-lead{margin-top:29.4px;font-size:var(--fs-lead);
    line-height:var(--lh-lead);max-width:none}
  .tpage .trf-list{margin-top:48px}

  .tpage .trf-rows .rows__item{gap:18.8px;padding:24px 0}
  .tpage .trf-rows .rows__item p{margin-top:3.2px}

  .tpage .trf-card{margin-top:0}
  .tpage .trf-note{margin-top:24px}
}

@media (min-width:1280px){
  .tpage .trf-grid{column-gap:80px}
}