/* tarify.css - блок выбора формата Отчета на лендингах (/men-me/, /decision/).

   Раньше это был файл воронки: сюда монтировался пошаговый экран из funnel/app.js, и
   имена классов были про воронку. Воронку сняли, живым остался только тарифный экран,
   поэтому файл и классы переименованы под то, чем они на самом деле являются. Заодно
   убраны правила снятых экранов (демо, стена, кнопка «назад») и класс .tariff, которого
   нет ни в одной разметке: карточки давно рисует .price-card из landing-pages.css.

   Зависит от tokens + base + components. Сетку карточек и сами карточки не трогает:
   .pricing-grid и .price-card* остаются общими со страницей /pricing/. */

/* ════ КОНТЕЙНЕР БЛОКА ════
   Определен отдельно, а не через общий .section: у блока своя полноширинная поверхность
   с подложкой и границами сверху и снизу. */
#tarify {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Отступ объявлен переменной, чтобы правило scroll-margin в base.css могло его
     вычесть: иначе якорь #tarify приводит к верхнему краю секции, и заголовок
     оказывается на 48 пикселей ниже, чем нужно. */
  --sec-pad-top: var(--space-7);
  padding: var(--sec-pad-top) var(--gutter);
}

/* Запасной текст при отключенных скриптах. */
#tarify > noscript p { color: var(--ink-2); font-size: var(--fs-small); }

/* ════ ЭКРАН ════ */
.tarify-screen { animation: tarify-fade calc(220ms * var(--motion)) ease; }
.tarify-screen[hidden] { display: none; }
@keyframes tarify-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ════ ЗАГОЛОВОК БЛОКА ════ */
.tarify-head { margin: 0 auto 1.75rem; max-width: 820px; text-align: center; }
.tarify-head h3 { font-family: var(--serif); font-size: clamp(1.9rem,4vw,2.75rem); font-weight: 600; }
.tarify-head p { margin-top: .7rem; color: var(--ink-2); line-height: 1.6; }
/* Заголовок получает фокус после перехода по якорю, рамку фокуса при этом не рисуем:
   переход сделан мышью или ссылкой, а не клавиатурной навигацией. */
.tarify-head h3[tabindex="-1"] { outline: none; }

.tarify-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .75rem; color: var(--terra-text); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.tarify-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--cta); }

/* ════ СЕТКА КАРТОЧЕК ════ */
.tarify-grid { margin-top: 0; }
.tarify-grid .price-card button { width: 100%; }

/* ════ ШИРОКАЯ ПОВЕРХНОСТЬ ════
   Блок выходит из колонки текста на всю ширину экрана, а содержимое внутри снова
   собирается по широкому контейнеру. */
#tarify:has(> .tarify-screen) {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--container-wide)) / 2 + var(--gutter)));
  background: var(--surface);
  border-block: 1px solid var(--line);
}
#tarify:has(> .tarify-screen) > .tarify-screen {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  #tarify { max-width: var(--container-wide); }
  .tarify-screen { max-width: var(--container-wide); margin-inline: auto; }
}