/* pricing.css — блок «Стоимость»: три пакета. Десктоп — в ряд одной высоты,
   телефон — свайп-лента со snap. Появление по скроллу и пункты по одному
   включает pricing.js классами .is-js / .is-in; без скрипта и при
   prefers-reduced-motion всё видно сразу. Кнопки — общие .btn страницы,
   здесь только их заливка при наведении на карточку. */

.pricing {
  --pr-card: var(--bg-card, #15181c);
  --pr-line: var(--line, #24282e);
  --pr-ink: var(--ink, #f2efe9);
  --pr-soft: var(--ink-soft, #b4b1aa);
  --pr-faint: var(--ink-faint, #8f8d85);
  --pr-acc: var(--accent, #c9a961);
  --pr-acc-hi: var(--accent-deep, #e0c98c);
  --pr-on-acc: var(--on-accent, #0b0c0e);
  --pr-fh: var(--font-head, "Manrope", system-ui, sans-serif);
  --pr-fb: var(--font-body, "Onest", system-ui, sans-serif);
  --pr-pad: var(--space-3, 1.5rem);
  --pr-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  padding-block: var(--space-5, 4rem);
  color: var(--pr-ink);
  font-family: var(--pr-fb);
}
.pricing__inner { width: 100%; max-width: var(--maxw, 1100px); margin-inline: auto; padding-inline: var(--pr-pad); }

/* ---------- шапка ---------- */
.pricing__head { max-width: 46rem; margin: 0 0 var(--space-4, 2.5rem); }
.pricing__head h2 { margin: 0; font-family: var(--pr-fh); font-weight: 800; font-size: clamp(1.7rem, 3.3vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; }
.pricing__head p { margin: var(--space-2, 1rem) 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--pr-soft); }

/* ---------- лента (телефон): свайп со snap, полоса прокрутки спрятана; выходит на поля секции ---------- */
.pricing__track {
  display: flex; gap: var(--space-2, 1rem);
  margin-inline: calc(-1 * var(--pr-pad));
  padding: 1rem var(--pr-pad) 1.5rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pr-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pricing__track::-webkit-scrollbar { display: none; }

/* ---------- карточка ---------- */
.pricing__card {
  --pr-d: 0s;                                   /* задержка появления; читает и pricing.js */
  position: relative; display: flex; flex-direction: column;
  flex: 0 0 min(84%, 360px); scroll-snap-align: start;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2.2vw, 1.75rem);
  background: linear-gradient(180deg, rgba(242, 239, 233, .035), transparent 32%), var(--pr-card);
  border: 1px solid var(--pr-line); border-radius: var(--radius-lg, 24px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .28);
  transition: transform .25s var(--pr-ease), box-shadow .25s var(--pr-ease), border-color .25s var(--pr-ease);
}
.pricing__card:nth-child(2) { --pr-d: .15s; }
.pricing__card:nth-child(3) { --pr-d: .15s; }   /* на телефоне третья приезжает свайпом, ждать ей нечего */

.pricing__card--featured {
  border-color: rgba(201, 169, 97, .45);
  background: linear-gradient(180deg, rgba(201, 169, 97, .1), transparent 38%), var(--pr-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(201, 169, 97, .12);
}
.pricing__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: .5em 1em; border-radius: 999px;
  background: linear-gradient(180deg, var(--pr-acc-hi), var(--pr-acc)); color: var(--pr-on-acc);
  font: 700 .68rem/1 var(--pr-fh); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(201, 169, 97, .25);
}

.pricing__name { margin: 0; font-family: var(--pr-fh); font-size: 1.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.pricing__price {
  display: flex; align-items: baseline; gap: .1em; margin: .75rem 0 .65rem;
  font-family: var(--pr-fh); font-weight: 800; font-size: clamp(2.1rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* Под числом невидимо лежит итог той же ширины (цифры + неразрывный пробел): ₽ не ездит, пока бежит счётчик */
.pricing__num { display: inline-grid; }
.pricing__num::after { content: attr(data-price) "\a0"; height: 0; overflow: hidden; visibility: hidden; }
.pricing__cur { font-size: .58em; font-weight: 600; letter-spacing: 0; color: var(--pr-acc-hi); }
.pricing__desc { margin: 0 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--pr-line); font-size: .95rem; line-height: 1.5; color: var(--pr-soft); }

/* ---------- список: тонкая галочка; то, чего нет в пакете дешевле, — «+» в латунном кружке и ярче ---------- */
.pricing__list { list-style: none; margin: 0 0 var(--space-3, 1.5rem); padding: 0; display: grid; gap: .55rem; }
.pricing__item { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: var(--pr-soft); }
.pricing__item--new { color: var(--pr-ink); }
.pricing__mark { position: relative; flex: 0 0 20px; width: 20px; height: 20px; margin-top: .05em; border-radius: 50%; }
.pricing__mark::before {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid var(--pr-faint); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.pricing__item--new .pricing__mark { border: 1px solid rgba(201, 169, 97, .65); background: rgba(201, 169, 97, .1); box-shadow: 0 0 0 3px rgba(201, 169, 97, .06); }
.pricing__item--new .pricing__mark::before,
.pricing__item--new .pricing__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px;
  border: 0; background: var(--pr-acc-hi); transform: translate(-50%, -50%);
}
.pricing__item--new .pricing__mark::after { width: 1.5px; height: 9px; }

.pricing .pricing__btn { margin-top: auto; align-self: stretch; transition-duration: .25s; }

/* ---------- сноска ---------- */
.pricing__note { max-width: 46rem; margin: var(--space-2, 1rem) 0 0; }
.pricing__note p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--pr-faint); }
.pricing__note p + p { margin-top: .5rem; }

/* ---------- наведение (только там, где есть мышь): карточка приподнимается, кнопка заливается латунью ---------- */
@media (hover: hover) {
  .pricing__card:hover {
    transform: translateY(-4px); border-color: var(--line-strong, #363b43);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .55);
  }
  .pricing__card--featured:hover {
    border-color: rgba(201, 169, 97, .7);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 169, 97, .2), 0 20px 60px rgba(201, 169, 97, .14);
  }
  .pricing .pricing__card:hover .btn--outline { background: var(--pr-acc); border-color: var(--pr-acc); color: var(--pr-on-acc); }
  .pricing .pricing__card:hover .btn--primary { background: var(--pr-acc-hi); color: var(--pr-on-acc); }
}

/* ---------- десктоп: три в ряд одной высоты ---------- */
@media (min-width: 900px) {
  .pricing__track {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3, 1.5rem);
    margin-inline: 0; padding: 1rem 0 0; overflow: visible; scroll-snap-type: none;
  }
  .pricing__card:nth-child(3) { --pr-d: .3s; }
  .pricing__note { margin-top: var(--space-4, 2.5rem); }
}

/* ---------- появление: прячем только при .is-js, который ставит скрипт ----------
   backwards: во время задержки элемент держит первый кадр (скрыт), после конца
   анимации возвращается к обычным стилям — поэтому hover-подъём работает. */
@keyframes pricing-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pricing-item { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pricing-fade { from { opacity: 0; } to { opacity: 1; } }

.pricing.is-js .pricing__card:not(.is-in) { opacity: 0; transform: translateY(28px); }
.pricing.is-js .pricing__card.is-in { animation: pricing-rise .5s var(--pr-ease) var(--pr-d) backwards; }
.pricing.is-js .pricing__card.is-in .pricing__item { animation: pricing-item .35s ease-out calc(var(--pr-d) + .3s + var(--pr-n, 0) * .08s) backwards; }
.pricing__item:nth-child(2) { --pr-n: 1; }
.pricing__item:nth-child(3) { --pr-n: 2; }
.pricing__item:nth-child(4) { --pr-n: 3; }
.pricing__item:nth-child(5) { --pr-n: 4; }
.pricing__item:nth-child(6) { --pr-n: 5; }
.pricing.is-js .pricing__note:not(.is-in) { opacity: 0; }
.pricing.is-js .pricing__note.is-in { animation: pricing-fade .6s ease .7s backwards; }

@media (prefers-reduced-motion: reduce) {
  .pricing.is-js .pricing__card, .pricing.is-js .pricing__item, .pricing.is-js .pricing__note { opacity: 1; transform: none; animation: none; }
  .pricing__card, .pricing .pricing__btn { transition: none; }
  .pricing__card:hover { transform: none; }
}