/* Тарифы v1 — секция лендинга FBS·MPmetr.
   Дизайн-база Данила (knowledge/playbooks/design-base-premium-ui.md): тёплая
   палитра MPmetr, Liquid Glass, скролл-хореография, движение по ease-out-quint.
   Все цвета — ТОЛЬКО из токенов landing.css. Своих hex тут нет: детектор
   impeccable ловит самодельные цвета, а синий и оранжевый из присланных
   референсов противоречат фирменной терракоте.

   Что взято из двух присланных React-компонентов (и чем заменено):
   — переключатель месяц/год со скользящей пилюлей: было framer-motion layoutId,
     стало transform у одного элемента (без библиотек, стек тут ванильный);
   — «Save 20%» бейджем внутри переключателя;
   — цена, которая перекатывается при переключении: было @number-flow/react,
     стал count-up на requestAnimationFrame (тот же приём, что у цифр хиро);
   — популярная карта с кольцом и подсветкой фона;
   — два списка: короткий «что умеет» с иконками и длинный «что входит» с
     галочками в кружке;
   — вторая, тихая кнопка под основной. */

.pricing {
  position: relative;
  isolation: isolate;             /* свечение не должно вылезать на соседние секции */
}

/* Свечение за карточками. В референсе стоял синий radial-gradient с
   mix-blend-mode:multiply на всю секцию — на тёплой бумаге это даёт грязь,
   поэтому две мягкие радиалки в терракоте и чирке, без смешивания. */
.pricing::before {
  content: "";
  position: absolute;
  inset: -6% 4% auto;
  height: 72%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 12%, color-mix(in srgb, var(--act) 16%, transparent), transparent 70%),
    radial-gradient(42% 50% at 82% 42%, color-mix(in srgb, var(--link) 10%, transparent), transparent 72%);
  background:
    radial-gradient(58% 62% at 50% 12%, rgba(194, 98, 44, .16), transparent 70%),
    radial-gradient(42% 50% at 82% 42%, rgba(47, 124, 138, .10), transparent 72%);
  filter: blur(2px);
}

/* ---------- переключатель месяц / год ---------- */

.pr-switch {
  display: flex;
  justify-content: center;
  margin: 22px 0 6px;
}

/* Дорожка — ГРИД с равными колонками, а не inline-flex по содержимому.
   Так обе кнопки одинаковой ширины (по самой широкой), и пилюле не нужно
   менять размер на переключении — только ехать.
   Почему это важно, а не косметика: сначала кнопки были по содержимому, и
   пилюля подгоняла ширину анимацией. Это анимация свойства раскладки —
   браузер пересчитывает геометрию каждый кадр. Плюс ширину приходилось мерить
   из JS, и она отставала на всякое изменение без события resize: догрузился
   шрифт, сменилась тема, карточка переехала в другую колонку. На 375px это
   резало бейдж «−25%» пополам. Равные колонки убирают и анимацию раскладки,
   и измерения, и весь класс этих расхождений разом. */
.pr-switch-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: 14px;
  background: var(--card-bg);
  border: var(--border-card);
  box-shadow: var(--shadow-btn);
}

/* Пилюля ровно в одну колонку: 50% ширины дорожки минус её отступ. Едет на
   свою ширину — translateX(100%), никакой арифметики в JS. */
.pr-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  transform: translateX(var(--thumb-x, 0));
  border-radius: 10px;
  background: linear-gradient(to top, var(--act), var(--act-2));
  box-shadow: 0 1px 2px rgba(63, 48, 32, .18), 0 6px 14px -6px rgba(194, 98, 44, .55);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
}

.pr-opt {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: var(--w-btn);
  color: var(--sub);
  padding: 11px 18px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: color .28s ease;
}

.pr-opt[aria-selected="true"] { color: var(--act-ink); }
.pr-opt:hover:not([aria-selected="true"]) { color: var(--ink); }
.pr-opt:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }

/* Бейдж скидки: на выбранной вкладке становится светлым на терракоте */
.pr-save {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: var(--pill);
  background: var(--mint-wash);
  color: var(--mint);
  transition: background .28s ease, color .28s ease;
}

.pr-opt[aria-selected="true"] .pr-save {
  background: rgba(255, 255, 255, .22);
  color: var(--act-ink);
}

/* ---------- сетка карточек ---------- */

.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin-top: 26px;
}

.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 24px;
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: var(--border-card);
  box-shadow: var(--shadow-panel);
}

/* Популярный тариф: кольцо + тёплая подложка + стекло.
   В референсе было ring-2 ring-blue-500 bg-blue-50 — та же идея в нашей палитре. */
.pr-card.is-hot {
  background: var(--act-wash);
  border-color: var(--act-wash-line);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--act) 38%, transparent),
    var(--shadow-panel);
  box-shadow: 0 0 0 2px rgba(194, 98, 44, .38), var(--shadow-panel);
}

@supports (backdrop-filter: blur(8px)) {
  .pr-card.is-hot {
    backdrop-filter: blur(14px) saturate(1.5);
  }
}

.pr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pr-name {
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: var(--w-head);
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
}

.pr-flag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--pill);
  background: var(--act);
  color: var(--act-ink);
}

.pr-for {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mut);
  min-height: 3em;              /* три карточки держат одну линию цены */
}

/* ---------- цена ---------- */

.pr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;          /* подпись уходит на свою строку, а не ломает цену */
  gap: 0 6px;
  margin: 18px 0 4px;
}

/* Цену рвать нельзя ни при какой ширине: на узкой карте «18 700» разъезжалось
   на «18» и «700» (поймано глазами 07.09.2026). */
.pr-num, .pr-cur { white-space: nowrap; }

.pr-num {
  font-size: clamp(34px, 4.2vw, 44px);
  font-weight: var(--w-value);
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;   /* цифры не прыгают при перекате */
  font-feature-settings: "tnum" 1;
}

.pr-cur { font-size: 26px; font-weight: var(--w-value); color: var(--ink); }
.pr-per { font-size: 15px; color: var(--mut); }

.pr-note {
  min-height: 1.4em;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--mint);
  font-weight: 600;
}

.pr-note:empty { visibility: hidden; }

/* ---------- кнопки ---------- */

.pr-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: var(--w-btn);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease, filter .18s ease;
}

.pr-cta-main {
  background: linear-gradient(to top, var(--act), var(--act-2));
  border-color: var(--act);
  color: var(--act-ink);
  box-shadow: 0 8px 18px -8px rgba(194, 98, 44, .75), var(--shadow-btn);
}

.pr-cta-dark {
  background: linear-gradient(to top, var(--ink), var(--sub));
  border-color: var(--ink);
  color: var(--act-ink);
  box-shadow: 0 8px 18px -10px rgba(43, 38, 32, .6), var(--shadow-btn);
}

.pr-cta:hover { transform: translateY(-1px); filter: saturate(1.06); }
.pr-cta:active { transform: translateY(0); }
.pr-cta:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }

/* Вторая, тихая кнопка — из второго референса («Click to Sale»),
   у нас это «задать вопрос», без давления. */
.pr-cta-quiet {
  margin-top: 9px;
  background: var(--card-bg);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-btn);
  font-size: 15px;
  padding: 12px 18px;
}

.pr-cta-quiet:hover { background: var(--band-bg); }

/* ---------- списки ---------- */

.pr-feats {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.pr-feats li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sub);
}

/* Duotone-иконка как в остальных секциях: мягкий силуэт + контур */
.pr-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--ink);
}

.pr-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-ico .ico-soft { fill: color-mix(in srgb, var(--act) 16%, transparent); stroke: none; }
.pr-ico .ico-soft { fill: rgba(194, 98, 44, .16); stroke: none; }
.pr-ico .ico-accent { stroke: var(--act); }

.pr-incl-head {
  margin: 22px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}

.pr-incl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.pr-incl li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sub);
}

.pr-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--pill);
  background: var(--mint-wash);
  border: 1px solid var(--mint-line);
  display: grid;
  place-content: center;
}

.pr-check svg { width: 11px; height: 11px; fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Чего в тарифе нет — говорим честно, это снимает вопросы до покупки */
.pr-incl li.is-off { color: var(--mut); }
.pr-incl li.is-off .pr-check { background: var(--band-bg); border-color: var(--line); }
.pr-incl li.is-off .pr-check svg { stroke: var(--mut); }

.pr-foot {
  margin-top: auto;
  padding-top: 20px;
}

.pr-badge {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 13px;
  border-radius: var(--pill);
  background: var(--mint-wash);
  color: var(--mint);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- подпись под сеткой ---------- */

.pr-after {
  margin: 26px auto 0;
  max-width: 780px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
}

.pr-after a { color: var(--link); }

/* ---------- адаптив ---------- */

@media (max-width: 1024px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Популярный тариф на планшете встаёт первым — иначе он теряется третьим */
  .pr-card.is-hot { order: -1; grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pr-card.is-hot { grid-column: auto; }
  .pr-card { padding: 22px 18px 20px; }
  .pr-for { min-height: 0; }
  .pr-switch-track { width: 100%; }
  .pr-opt { padding: 11px 8px; font-size: 14px; }
  .pr-save { font-size: 10px; padding: 2px 5px; }
}

@media (max-width: 380px) {
  .pr-opt { font-size: 13px; gap: 5px; }
}

/* ---------- движение выключается по просьбе системы ---------- */

@media (prefers-reduced-motion: reduce) {
  .pr-thumb { transition: none; }
  .pr-cta { transition: none; }
  .pr-cta:hover { transform: none; }
}

/* ===================== «Подойдёт ли вашему складу» =====================
   Секция, которая даёт пользу ДО того, как просить контакты (правило Данила
   07.09.2026, дизайн-база §3а). Живёт в этом же файле, потому что появилась
   тем же заходом и делит с тарифами и палитру, и логику порогов. */

.fit-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  margin-top: 26px;
  align-items: start;
}

.fit-form,
.fit-out {
  padding: 26px 24px;
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: var(--border-card);
  box-shadow: var(--shadow-panel);
}

.fit-out {
  background: var(--act-wash);
  border-color: var(--act-wash-line);
}

.fit-q + .fit-q { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }

.fit-q label,
.fit-q .fit-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

/* ---- ползунок ---- */

.fit-range output {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: var(--mut);
}

.fit-range output b {
  font-size: 26px;
  font-weight: var(--w-value);
  color: var(--act);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.fit-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--pill);
  background: var(--band-bg);
  outline: none;
  cursor: pointer;
}

.fit-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--pill);
  background: var(--act);
  border: 3px solid var(--card-bg);
  box-shadow: 0 2px 6px rgba(63, 48, 32, .28);
  cursor: grab;
}

.fit-range input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--pill);
  background: var(--act);
  border: 3px solid var(--card-bg);
  box-shadow: 0 2px 6px rgba(63, 48, 32, .28);
  cursor: grab;
}

.fit-range input[type="range"]:focus-visible { outline: 2px solid var(--act); outline-offset: 4px; }

/* ---- да/нет ---- */

.fit-choice { display: flex; gap: 8px; flex-wrap: wrap; }

.fit-choice label { margin: 0; cursor: pointer; }

/* Кружок радиокнопки прячем визуально, но НЕ от клавиатуры и скринридера:
   display:none выбросил бы его из фокуса и группа перестала бы управляться
   стрелками. */
.fit-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.fit-choice span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--card-bg);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sub);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.fit-choice label:hover span { border-color: var(--act-2); color: var(--ink); }
.fit-choice input:checked + span { background: var(--act); border-color: var(--act); color: var(--act-ink); }
.fit-choice input:focus-visible + span { outline: 2px solid var(--act); outline-offset: 3px; }

/* ---- ответ ---- */

.fit-verdict { margin: 0 0 14px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.fit-verdict b.yes { color: var(--mint); }
.fit-verdict b.no { color: var(--act); }

.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.fit-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sub);
}

.fit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background: var(--act);
  opacity: .55;
}

.fit-tier {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--act-wash-hair);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.fit-tier:empty { display: none; }
.fit-tier b { color: var(--act); }

.fit-cta { margin-top: 20px; }
.fit-cta .btn { width: 100%; }

@media (max-width: 900px) {
  .fit-box { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .fit-form, .fit-out { padding: 20px 17px; }
  .fit-choice span { padding: 9px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fit-choice span { transition: none; }
}