/* =========================================================
   PRICING (экран 11) — 4 тарифа + правила работы клуба
   Композиция повторяет первый mockup: chip → headline →
   row из 4 карточек (активная — Лето 3 мес с gradient frame) →
   lock-note → 6 правил в pill-сетке 3×2.
   ========================================================= */

.pricing {
  display: flex;
  flex-direction: column;
  gap: clamp(31px, 4.5vw, 48px);
}

/* ---------- HEAD ---------- */

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* Countdown-chip сверху — наследует .chip из shared.css
   (gradient-border ::before mask + прозрачный фон + 12px / 8px 17px).
   Локально только: pulse-dot слева + gradient text-clip на счётчике дней. */
.pricing__chip {
  /* немного увеличиваем gap чтобы pulse-точка не липла к тексту */
  gap: 8px;
  /* левый padding уже потому что слева стоит pulse-точка как "иконка" */
  padding-left: 12px;
}
.pricing__pulse {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g2);
  flex-shrink: 0;
}
.pricing__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--g2);
  opacity: 0.4;
  animation: pricing-pulse 1.8s ease-out infinite;
}
@keyframes pricing-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  70%  { transform: scale(1.7); opacity: 0;   }
  100% { transform: scale(1.7); opacity: 0;   }
}
.pricing__chip-sep { color: var(--ink-mute); opacity: 0.5; }
.pricing__chip-days {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

/* Headline — согласован с .payment__title в v4 (max ~54px) */
.pricing__title {
  max-width: 748px;
  text-align: center;
  font-size: clamp(29px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

/* ---------- CARDS ROW ---------- */

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Базовая карточка (1м / 6м / 12м) — padding согласован с .payment-card (28 равно) */
.pcard {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  box-shadow: var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard:hover:not(.pcard--active) {
  transform: translateY(-3px);
  border-color: rgba(28,34,54,0.16);
  box-shadow: 0 20px 41px -19px rgba(28,34,54,0.28), 0 4px 8px -4px rgba(28,34,54,0.06);
}

/* Card eyebrow — согласован с .eyebrow-2 (12px), letter-spacing 0.24em
   как компромисс: на "Летний сезон · 3 месяца" 0.32em ломает на 2 строки */
.pcard__eyebrow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pcard__eyebrow--strong {
  color: var(--ink);
  letter-spacing: 0.18em;  /* у активной — чуть теснее, чтоб "Летний сезон · 3 месяца" влез */
}

/* Decorative thin divider with center diamond */
.pcard__divider {
  display: block;
  height: 1px;
  position: relative;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(28,34,54,0.10) 18%,
    rgba(28,34,54,0.10) 82%,
    transparent 100%
  );
  margin: 2px 0 4px;
}
.pcard__divider::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  border-radius: 1.5px;
  background: var(--g1);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pcard__divider--grad::after {
  background: var(--grad);
}

/* Цена: старая + новая */
.pcard__price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.pcard__price {
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcard__cur {
  font-weight: 600;
  font-size: 0.7em;
  color: var(--ink-soft);
  margin-left: 2px;
}
.pcard__price-old {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.pcard__price--grad {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pcard__price--grad .pcard__cur {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Per-month chip */
.pcard__permonth {
  display: inline-flex;
  align-self: center;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(28,34,54,0.05);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.pcard__permonth--ghost {
  background: transparent;
  color: var(--ink-mute);
}
.pcard__permonth--accent {
  background: rgba(255,122,69,0.10);
  color: var(--g1);
}

/* Bank installment badge — peachy */
.pcard__bank {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,122,69,0.08);
  color: var(--g1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* CTA — согласован с .btn в shared.css (11px / 15-27 padding) */
.pcard__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 19px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcard__cta:hover {
  border-color: rgba(28,34,54,0.22);
  transform: translateY(-1px);
}
.pcard__cta--primary {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(233,74,161,0.55);
}
.pcard__cta--primary:hover {
  box-shadow: 0 15px 31px -12px rgba(233,74,161,0.65);
  transform: translateY(-2px);
}
.pcard__cta-arrow {
  display: inline-flex;
  width: 15px; height: 15px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  font-size: 12px;
}

/* ---------- ACTIVE CARD (Лето · 3 месяца) ---------- */

/* Gradient frame трюк: gradient background + inner white card */
.pcard--active {
  padding: 0;
  background: var(--grad);
  border: 0;
  border-radius: calc(var(--radius-lg) + 4px);
  box-shadow:
    0 26px 51px -19px rgba(233,74,161,0.4),
    0 10px 20px -8px rgba(155,95,223,0.22);
  transform: translateY(-5px);
  z-index: 1;
}
.pcard--active .pcard__inner {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 26px 20px 24px;
  margin: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100% - 7px);
  position: relative;
}

/* "Идёт набор" pill badge — over the frame at top */
.pcard__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 7px 17px -8px rgba(233,74,161,0.55);
  z-index: 2;
}
.pcard__badge svg { flex-shrink: 0; }

/* ---------- PREMIUM CARD (12 месяцев) ----------
   Залита gradient-fill (orange→pink→purple), весь текст белый.
   Эффект «премиум»: визуально самый ярко выделенный тариф, читается как
   главный аккорд (наряду с горящим 3-мес — но с другой стилистикой,
   тот gradient-frame с белым inner, этот — solid gradient fill). */
.pcard--premium {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 30px 56px -22px rgba(155, 95, 223, 0.45),
    0 10px 20px -8px rgba(233, 74, 161, 0.30);
}
/* Тексты — белые на gradient-фоне */
.pcard--premium .pcard__eyebrow,
.pcard--premium .pcard__price,
.pcard--premium .pcard__cur,
.pcard--premium .pcard__permonth,
.pcard--premium .pcard__bank {
  color: #fff;
}
/* Старая цена — полупрозрачная белая */
.pcard--premium .pcard__price-old {
  color: rgba(255, 255, 255, 0.55);
}
/* Перебиваем gradient-clip на price, иначе на gradient-фоне текст невидим */
.pcard--premium .pcard__price--grad,
.pcard--premium .pcard__price--grad .pcard__cur {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
/* Permonth pill — стеклянная белая подложка */
.pcard--premium .pcard__permonth {
  background: rgba(255, 255, 255, 0.18);
}
.pcard--premium .pcard__permonth--accent {
  background: rgba(255, 255, 255, 0.22);
}
/* «Рассрочка от банка» — белый pill */
.pcard--premium .pcard__bank {
  background: rgba(255, 255, 255, 0.20);
}
/* Divider — белый полупрозрачный */
.pcard--premium .pcard__divider {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 18%,
    rgba(255, 255, 255, 0.35) 82%,
    transparent 100%);
}
.pcard--premium .pcard__divider::after {
  background: #fff;
}
/* CTA «Выбрать» — белый pill с тёмным текстом, hover усиливаем тень */
.pcard--premium .pcard__cta {
  background: #fff;
  color: var(--ink);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(28, 34, 54, 0.30);
}
.pcard--premium .pcard__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -14px rgba(28, 34, 54, 0.45);
  border-color: transparent;
}

/* «+1 месяц в подарок» бейдж — на gradient-фоне выглядит хорошо как
   светлая капсула с тёмной обводкой. Перебиваем gradient-background
   на белый bg и тёмный текст, чтобы badge читался поверх gradient-карты. */
.pcard--premium .pcard__badge--gift {
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 8px 18px -8px rgba(28, 34, 54, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.40);
}
.pcard--premium .pcard__badge--gift svg {
  stroke: var(--g3);
}

/* ---------- SELECTED CARD (пользователь нажал «Выбрать») ----------
   Отличается от .pcard--active тем, что выделение — пользовательский
   выбор, а не «текущий горящий тариф». Делаем рамку gradient + check-badge
   в верхнем правом углу. На .pcard--active.pcard--selected — outline снаружи
   gradient-рамки, чтобы оба состояния были видны одновременно. */
.pcard--selected {
  position: relative;
  box-shadow:
    0 24px 56px -22px rgba(233,74,161,0.40),
    0 0 0 2px var(--g2),
    0 0 0 8px rgba(233,74,161,0.10);
  transition: box-shadow .3s ease;
}
.pcard--selected.pcard--active {
  /* gradient-frame уже снаружи; ring снаружи него */
  box-shadow:
    0 26px 51px -19px rgba(233,74,161,0.50),
    0 10px 20px -8px rgba(155,95,223,0.30),
    0 0 0 3px rgba(233,74,161,0.30),
    0 0 0 8px rgba(233,74,161,0.10);
}
.pcard--selected::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center/16px no-repeat,
    var(--grad);
  box-shadow: 0 8px 18px -6px rgba(233,74,161,0.55);
  z-index: 3;
  animation: pcardCheckPop .35s cubic-bezier(.4,1.4,.6,1) both;
}
.pcard--selected.pcard--active::after {
  top: 18px; right: 18px;   /* учитываем 4px gradient-frame + 14px inset */
}
@keyframes pcardCheckPop {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}
/* Кнопка после выбора — инверт-стиль «Выбран» */
.pcard--selected .pcard__cta:not(.pcard__cta--primary) {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}

/* ---------- LOCK NOTE ---------- */

.pricing__lock {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  padding: 10px 19px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: var(--card-shadow);
  font-size: 12px;
  color: var(--ink-soft);
  margin: -7px auto 0;
}
.pricing__lock-ico {
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,122,69,0.10);
  color: var(--g1);
  flex-shrink: 0;
}
.pricing__lock em {
  font-family: 'Playfair Display', 'Inter', serif;
  font-style: italic;
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- 6 RULES — "Как работает Клуб" ---------- */

.pricing__rules {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 7px;
}
.pricing__rules-head { display: flex; justify-content: center; }

.rules {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 918px;
}

.rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 19px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rule:hover {
  transform: translateY(-2px);
  border-color: rgba(28,34,54,0.16);
  box-shadow: 0 15px 31px -19px rgba(28,34,54,0.22);
}
.rule__text { flex: 1; }
.rule__text b {
  color: var(--ink);
  font-weight: 700;
}

/* Цветные иконки-bullet: цикл peach → pink → purple */
.rule__ico {
  display: inline-flex;
  width: 31px; height: 31px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 12px;
}
.rule:nth-child(6n+1) .rule__ico { background: rgba(255,122,69,0.10); color: var(--g1); }
.rule:nth-child(6n+2) .rule__ico { background: rgba(233,74,161,0.10); color: var(--g2); }
.rule:nth-child(6n+3) .rule__ico { background: rgba(155,95,223,0.10); color: var(--g3); }
.rule:nth-child(6n+4) .rule__ico { background: rgba(255,122,69,0.10); color: var(--g1); }
.rule:nth-child(6n+5) .rule__ico { background: rgba(233,74,161,0.10); color: var(--g2); }
.rule:nth-child(6n+6) .rule__ico { background: rgba(155,95,223,0.10); color: var(--g3); }

/* Локальный glow `::before` удалён — секция теперь использует общую
   зебра-подложку из shared.css. */

/* ---------- RESPONSIVE ---------- */

@media (max-width: 918px) {
  .pricing__cards { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .pcard--active { transform: none; }
}
@media (max-width: 544px) {
  /* Тарифы — оставляем 2×2 (не 1 колонка) для компактности на мобиле.
     column-gap поменьше, row-gap побольше — чтобы badge «+1 месяц в подарок»
     наверху 12-мес карточки не наезжал на 3-мес из верхней строки. */
  .pricing__cards {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    /* row-gap побольше: между строками должен помещаться badge, который
       висит на верхней границе карточки на top: -12px. Иначе badge
       наезжает на нижний край соседки сверху. */
    row-gap: 38px;
  }
  /* :not(.pcard--active) — не трогаем active, иначе пихнём padding в
     gradient-frame трюк и получим жирную «двойную рамку». */
  .pcard:not(.pcard--active) { padding: 18px 14px 16px; }

  /* Active остаётся со своим padding: 0 (gradient-frame), а inner card
     получает margin 2px (тонкая аккуратная рамка). height: auto — иначе
     дефолтное height: calc(100% - 7px) даёт +3px gap снизу = рамка снизу
     визуально толще. translateY убираем — выравнивание 2×2. */
  .pcard--active {
    border-radius: calc(var(--radius-lg) + 2px);
    transform: none;
  }
  .pcard--active .pcard__inner {
    padding: 18px 14px 16px;
    margin: 2px;
    /* Парная компенсация под margin (2px×2 = 4px со всех сторон) — inner
       заполняет весь outer-frame в высоту, и снизу не вылезает кусок
       gradient'а. height: auto тут не годится в grid'е, где outer
       растягивается по высоте самой высокой карточки в строке. */
    height: calc(100% - 4px);
  }

  /* Badge сидит на верхней границе карточки (top: -12px, как на десктопе) —
     наполовину снаружи, наполовину внутри. Row-gap 38px даёт ему место. */
  .pcard__badge {
    padding: 4px 10px;
    font-size: 10.5px;
  }

  .pcard__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
  .pcard__price { font-size: clamp(22px, 6vw, 28px); }
  .pcard__price-old { font-size: 11px; }
  .pcard__permonth, .pcard__bank { font-size: 11px; padding: 4px 10px; }
  .pcard__cta { padding: 10px 14px; font-size: 11px; }

  .rules { grid-template-columns: 1fr; }
  .pricing__lock { font-size: 12px; padding: 12px 14px; }
}

/* ============================================================
   PRICING MODAL — всплывает над тарифами при клике «Выбрать».
   Содержит чип-подсказку с выбранным тарифом, email-форму
   и чекбоксы согласия (стили чекбоксов наследуем из payment.css —
   используем те же классы .payment__check). Закрывается по × /
   overlay / Escape.
   ============================================================ */
.pricing-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .22s ease;
  overflow-y: auto;
}
.pricing-modal[hidden] { display: none; }
.pricing-modal.is-open { opacity: 1; }

.pricing-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 34, 54, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pricing-modal__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 24px;
  padding: 34px clamp(22px, 4vw, 38px) 30px;
  box-shadow:
    0 60px 120px -40px rgba(28, 34, 54, 0.45),
    0 14px 30px -10px rgba(28, 34, 54, 0.16);
  border: 1px solid var(--hairline);
  transform: scale(.94) translateY(8px);
  transition: transform .25s cubic-bezier(.4, 1.4, .6, 1);
}
.pricing-modal.is-open .pricing-modal__card { transform: scale(1) translateY(0); }

.pricing-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.pricing-modal__close:hover {
  background: rgba(28, 34, 54, 0.06);
  color: var(--ink);
}

.pricing-modal__chip {
  margin-bottom: 14px;
  font-size: 11px;
  padding: 7px 14px;
}
.pricing-modal__title {
  font-size: clamp(26px, 3.5vw, 34px);
  line-height: 1.06;
  margin-bottom: 8px;
}
.pricing-modal__lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

/* Чип выбранного тарифа */
.pricing-modal__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      rgba(255, 122, 69, 0.07) 0%,
      rgba(233, 74, 161, 0.09) 50%,
      rgba(155, 95, 223, 0.10) 100%);
  border: 1px solid rgba(233, 74, 161, 0.18);
  margin-bottom: 20px;
}
.pricing-modal__plan-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pricing-modal__plan-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pricing-modal__plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.pricing-modal__plan-period {
  font-size: 12px;
  color: var(--ink-soft);
}
.pricing-modal__plan-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.pricing-modal__plan-price {
  font-size: 19px;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.pricing-modal__plan-change {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px dashed rgba(28, 34, 54, 0.25);
  transition: color .2s ease, border-color .2s ease;
}
.pricing-modal__plan-change:hover {
  color: var(--g2);
  border-bottom-color: var(--g2);
}

/* Форма */
.pricing-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pricing-modal__field { display: flex; flex-direction: column; gap: 8px; }
.pricing-modal__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pricing-modal__input {
  appearance: none;
  width: 100%;
  padding: 14px 17px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pricing-modal__input::placeholder { color: var(--ink-mute); font-weight: 400; }
.pricing-modal__input:focus {
  outline: none;
  border-color: var(--g2);
  box-shadow: 0 0 0 4px rgba(233, 74, 161, 0.12);
}

/* Мобиль: модалка ≈ полноэкранно, поджатые радиусы */
@media (max-width: 544px) {
  .pricing-modal { padding: 0; align-items: stretch; }
  .pricing-modal__card {
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    padding: 56px 20px 28px;
  }
}

/* ============================================================
   PRICING PROMO — сегментное промо-предложение над тарифами.
   Виден только если в URL есть ?from=webinar / ?from=alumni / ?ref=
   (или сохранён в sessionStorage от прошлого визита).
   ============================================================ */
.pricing-promo[hidden] { display: none; }
.pricing-promo {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 18px;
  background:
    linear-gradient(135deg,
      rgba(255, 122, 69, 0.10) 0%,
      rgba(233, 74, 161, 0.12) 50%,
      rgba(155, 95, 223, 0.14) 100%);
  border: 1px solid rgba(233, 74, 161, 0.25);
  box-shadow: 0 18px 38px -22px rgba(233, 74, 161, 0.40);
  max-width: 720px;
  margin: -8px auto 0;
  position: relative;
  animation: pricingPromoFade .35s ease-out both;
}
@keyframes pricingPromoFade {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.pricing-promo__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(233, 74, 161, 0.45);
}
.pricing-promo__icon svg { width: 22px; height: 22px; }
.pricing-promo__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}
.pricing-promo__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pricing-promo__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.pricing-promo__deadline {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--g2);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pricing-promo {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 14px 16px;
  }
  .pricing-promo__deadline { align-self: stretch; text-align: center; }
}