/* ════════════════════════════════════════════════════════════════════
   06 — Тарифы. Три плана, средний выделен: акцентная рамка, ms-glow
   и бейдж. Цены Plus и Family остаются заглушкой «[цена] ₽ / мес».

   Появление: data-reveal висит на обёртке .s-pricing__cell, а карточка
   внутри свободна для собственного transition наведения. Пункты списка
   догоняют карточку каскадом от .is-revealed на обёртке — задержка
   складывается из --reveal-delay обёртки и --feature-delay пункта,
   поэтому третья карточка не стартует раньше первой.
   ════════════════════════════════════════════════════════════════════ */

.s-pricing__halo {
  top: 28%;
  left: 50%;
  width: min(86vw, 860px);
  height: min(60vw, 480px);
  transform: translate(-50%, -20%);
  opacity: 0.85;
}

.s-pricing__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

/* Три плана — тот случай, когда auto-fit врёт: на средних ширинах он
   роняет третью карточку в пустой ряд слева. Поэтому стадии заданы явно,
   и «сирота» в двухколоночном ряду встаёт по центру шириной в колонку.
   Пороги выбраны так, чтобы колонка не стала уже ~300px: ниже подпись
   кнопки (у .btn white-space: nowrap) перестаёт помещаться в строку
   внутри падингов карточки — см. запас в .s-pricing__cta. */
.s-pricing__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .s-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-pricing__cell:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--sp-6)) / 2);
  }
}

@media (min-width: 72rem) {
  .s-pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-pricing__cell:last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* Обёртка-ревил: тянется на всю высоту трека, карточка тянется за ней. */
.s-pricing__cell { display: flex; }

.s-pricing .card {
  gap: var(--sp-6);
}

.s-pricing__plan {
  flex: 1;
  min-width: 0;
}

/* ── Шапка плана ───────────────────────────────────────────────────── */

.s-pricing__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.s-pricing__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}
.s-pricing__name--accent   { color: var(--c-accent); }
.s-pricing__name--accent-2 { color: var(--c-accent-2); }

.s-pricing__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.s-pricing__period {
  font-size: var(--fs-xs);
  color: var(--c-dim);
}

/* ── Состав плана ──────────────────────────────────────────────────── */

.s-pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}

.s-pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.s-pricing__tick {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-accent);
  transition: transform var(--t-base) var(--ease-out);
}

/* Кнопка тянется во всю ширину карточки, поэтому её padding-inline
   работает не как отступ (подпись и так по центру), а как нижняя
   граница min-content: с дефолтными 24px подпись «Получить ранний
   доступ» с .btn { white-space: nowrap } переставала помещаться в
   строку и распирала карточку — на 360px наружу из сетки, а в
   трёхколоночной стадии оставляла запас в пару пикселей. */
.s-pricing__cta {
  margin-top: auto;
  padding-inline: var(--sp-4);
}

/* ── Выделенный план ───────────────────────────────────────────────── */

.s-pricing__plan--featured {
  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
}
.s-pricing__plan--alt {
  border-color: color-mix(in srgb, var(--c-accent-2) 35%, transparent);
}

/* ── Наведение ─────────────────────────────────────────────────────── */
/* .card--hover тянет рамку в основной акцент — у лилового плана
   оставляем его собственный цвет. */
@media (hover: hover) {
  .s-pricing__plan--featured.card--hover:hover {
    border-color: color-mix(in srgb, var(--c-accent) 65%, transparent);
  }
  .s-pricing__plan--alt.card--hover:hover {
    border-color: color-mix(in srgb, var(--c-accent-2) 55%, transparent);
  }
  .s-pricing__plan:hover .s-pricing__tick { transform: scale(1.12); }
}

/* ── Каскад пунктов после появления карточки ───────────────────────── */

.s-pricing__cell[data-reveal] .s-pricing__feature {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity var(--t-base) var(--ease-out)
      calc(var(--reveal-delay, 0s) + var(--feature-delay, 0s)),
    transform var(--t-base) var(--ease-out)
      calc(var(--reveal-delay, 0s) + var(--feature-delay, 0s));
}
.s-pricing__cell.is-revealed .s-pricing__feature {
  opacity: 1;
  transform: none;
}

.s-pricing__feature:nth-child(1) { --feature-delay: 0.24s; }
.s-pricing__feature:nth-child(2) { --feature-delay: 0.32s; }
.s-pricing__feature:nth-child(3) { --feature-delay: 0.4s; }
.s-pricing__feature:nth-child(4) { --feature-delay: 0.48s; }

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

.s-pricing__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.s-pricing__home { flex-shrink: 0; }

/* ── Доступность ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .s-pricing__cell[data-reveal] .s-pricing__feature {
    opacity: 1;
    transform: none;
  }
}