/* ============================================================
   Вчасно.Бізнес — сторінка тарифів (/business/taryfy/)
   Підключається ТІЛЬКИ на цій сторінці, після tokens.css + main.css.
   Усі кольори/розміри — з tokens.css, сирих значень тут немає.
   Префікс класів: .pr-*
   ============================================================ */

/* ============================================================
   HERO — заголовок + промо-смуга зі знижкою
   ============================================================ */
/* Тло світлих секцій — --color-surface-2 (#F5F6FA), як у решти сайту
   (.niches, .ff-faq). Спершу тут був щільніший --color-bg (#E2E4ED), але на
   ньому --muted дає лише 4.21:1 при потрібних 4.5 — підзаголовок хіро та
   примітка під картками не проходили AA. */
.pr-hero {
  background: var(--color-surface-2);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.pr-hero__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.pr-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: balance;
}

.pr-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* ── промо-смуга: єдиний «гучний» елемент сторінки ── */
.pr-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

.pr-promo__off {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--acid);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pr-promo__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.pr-promo__text strong { font-weight: var(--fw-bold); white-space: nowrap; }

/* Тестовий період — другий за важливістю факт після промо-плашки. Тому не друга
   «гучна» плашка (гучний елемент має лишитись один), а рядок із тим самим
   acid-чеком, що в переліках можливостей у картках. Спільний для хіро сторінки
   тарифів і для скороченого блоку — звідси нейтральна назва без __hero.
   Вертикальні відступи дає gap батьківського контейнера, власних margin немає. */
.pr-trial {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-align: left;
}

.pr-trial::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231E1E21' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,10.5 8.5,14 15,6.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

@media (max-width: 560px) {
  .pr-promo {
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }
  /* Рядок тріалу переходить у два — чек тримаємо на верхній лінії тексту,
     інакше він «плаває» по центру двох рядків. */
  .pr-trial { align-items: flex-start; }
  .pr-trial::before { margin-top: .1em; }
}

/* ============================================================
   PLANS — сітка тарифних карток
   ============================================================ */
.pr-plans {
  background: var(--color-surface-2);
  padding-bottom: clamp(var(--space-10), 7vw, var(--space-16));
}

.pr-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

/* Нижче 1200px колонка в 4-колонковій сітці стає вужчою за найдовший
   надпис тарифу (.pr-plan__for тримається в одному рядку) — переходимо на 2. */
@media (max-width: 1200px) {
  .pr-plans__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 700px) {
  .pr-plans__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

/* ── картка ── */
.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.pr-plan:hover {
  border-color: var(--on-light-10);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* рекомендований тариф — акцентна рамка (єдиний «гучний» акцент у сітці) */
.pr-plan--featured {
  border-color: var(--acid);
  box-shadow: 0 0 0 1px var(--acid), var(--shadow-lg);
}
.pr-plan--featured:hover {
  border-color: var(--acid);
  box-shadow: 0 0 0 1px var(--acid), var(--shadow-lg);
}

.pr-plan__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-1) var(--space-4);
  background: var(--acid);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── шапка картки: однакова висота рядків у всіх 4 картках ── */
/* Надпис тарифу тримаємо в ОДНОМУ рядку на всіх ширинах: у 4-колонковій сітці
   колонка найвужча (~195px при 1101px в'юпорта), тому 11px + менший трекінг.
   Тексти підібрані так, щоб найдовший вміщався з запасом; nowrap гарантує,
   що перенесення не з'явиться й голови карток лишаться вирівняними. */
.pr-plan__for {
  min-height: 1.4em;
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.pr-plan__name {
  margin-top: var(--space-2);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* рядок старої ціни — зарезервований навіть коли порожній, щоб ціни всіх карток були на одній лінії */
.pr-plan__old {
  display: block;
  min-height: 1.6em;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pr-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 3rem;
}

.pr-plan__amount {
  font-size: 2.5rem;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.pr-plan__amount--sm { font-size: 1.75rem; font-weight: var(--fw-bold); }

.pr-plan__per {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* рядок промо-приміток — теж зарезервований */
.pr-plan__save {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.9em;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.pr-plan__off {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--acid);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pr-plan__seats {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

/* ── перелік можливостей ── */
.pr-plan__inherit {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.pr-plan__features {
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

.pr-plan__features li {
  position: relative;
  padding-left: calc(var(--space-5) + var(--space-1));
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

.pr-plan__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .15em;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231E1E21' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,10.5 8.5,14 15,6.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

/* ── підвал картки: аддон + разом + CTA (притиснутий донизу) ── */
.pr-plan__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Вертикальне компонування: підпис на всю ширину, під ним ціна + лічильник.
   У 4-колонковій сітці картка вузька — горизонтальний варіант рвав підпис на 3 рядки. */
.pr-addon {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 86px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.pr-addon__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 38px;
}

.pr-addon__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.pr-addon__price,
.pr-addon__na {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* лічильник кількості кас */
.pr-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.pr-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.pr-stepper__btn:hover:not(:disabled) { background: var(--acid); }
.pr-stepper__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acid-glow); }
.pr-stepper__btn:disabled { color: var(--color-text-muted); opacity: .4; cursor: not-allowed; }

.pr-stepper__value {
  min-width: 1.6em;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.pr-plan__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 1.6em;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pr-plan__total-sum {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* CTA Enterprise — <button> (відкриває попап), решта — <a>. Спільний .btn не
   задає line-height, тож кнопка успадковувала UA-шне `normal` і була на ~3.5px
   нижча за посилання, через що підвал цієї картки з'їжджав. Фіксуємо явно. */
.pr-plan__cta {
  width: 100%;
  line-height: var(--lh-normal);
}

.pr-plan__login {
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--color-text-muted);
}
.pr-plan__login a {
  display: inline-block;
  padding-block: 4px;        /* 18px → 26px: мінімальна ціль 24×24 */
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--acid);
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur);
}
.pr-plan__login a:hover { color: var(--pink); text-decoration-color: var(--pink); }
.pr-plan__login a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acid-glow); border-radius: var(--radius-sm); }

.pr-plans__note {
  max-width: 720px;
  margin: var(--space-6) auto 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  text-align: center;
  text-wrap: balance;
}

/* Примітка про ПДВ — найтихіший рівень на сторінці: стосується і карток
   тарифів, і пакетів Viber/SMS, тому стоїть під обома блоками. */
.pr-plans__vat {
  margin: clamp(var(--space-5), 3vw, var(--space-6)) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  text-align: center;
}

/* ============================================================
   СПІЛЬНА ШАПКА СЕКЦІЇ (використовує блок порівняння тарифів)
   ============================================================ */
.pr-section__header {
  max-width: 640px;
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.pr-section__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.pr-section__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* Тач-пристрої: кнопки лічильника мають дотягувати до --tap-min (44px).
   Рядок аддона підростає в УСІХ чотирьох картках однаково, тож підвали
   лишаються вирівняними. */
@media (pointer: coarse) {
  .pr-stepper__btn { width: var(--tap-min); height: var(--tap-min); }
  .pr-addon__row { min-height: var(--tap-min); }
  /* Лічильник із власним padding вищий за 44px, тож картки Solo/Pro мали б
     вищий блок, ніж Free/Enterprise. Фіксуємо спільну висоту блока. */
  .pr-addon { min-height: 104px; }
}

/* ============================================================
   ПАКЕТИ VIBER / SMS — довідкова панель усередині секції тарифів.
   Свідомо тихіший рівень: не окрема секція, без вибору й кнопки оплати
   (пакет докуповується в кабінеті) — лише перелік із цінами.
   ============================================================ */
.pr-packs {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 1.7fr);
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  align-items: center;
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .pr-packs { grid-template-columns: 1fr; align-items: start; }
}

.pr-packs__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.pr-packs__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.pr-packs__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@media (max-width: 520px) {
  .pr-packs__grid { grid-template-columns: repeat(2, 1fr); }
}

/* плашка — довідкова, не клікабельна: ховер лише підсвічує, без підйому */
.pr-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-4) var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: center;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.pr-pack:hover {
  background: var(--color-surface);
  border-color: var(--acid);
}

.pr-pack__name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pr-pack__count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pr-pack__unit {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pr-pack__price {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   ПОРІВНЯЛЬНА ТАБЛИЦЯ
   ============================================================ */
/* Біле тло — щоб зберегти чергування секцій після переходу хіро й тарифів
   на --color-surface-2. Сама таблиця лишається в рамці, тож не «розтікається». */
.pr-compare {
  background: var(--color-surface);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

/* горизонтальний скрол лише всередині цієї обгортки — сторінка вбік не їде */
.pr-compare__scroll {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.pr-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.pr-table th,
.pr-table td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.pr-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
}

.pr-table__plan {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.pr-table__plan-price {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Перша колонка — назва рядка, липка при горизонтальному скролі.
   Селектор двокласовий (.pr-table .pr-table__rowhead), щоб перебити
   text-align:center із `.pr-table th, .pr-table td` вище — інакше
   заголовок «Функціонал» у thead лишався центрованим. */
.pr-table .pr-table__rowhead,
.pr-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 260px;
  background: var(--color-surface);
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.pr-table thead .pr-table__rowhead { z-index: 3; }

/* Заголовок групи рядків. Сам th статичний: він розтягнутий на всю ширину
   таблиці (colspan=5), тож sticky на ньому не має куди зсуватись і підпис
   їхав би вбік разом із таблицею. Липне вкладений span — підпис лишається
   на місці при горизонтальному скролі. Горизонтальний відступ теж на span,
   інакше при залипанні текст стрибав би до самого краю. */
.pr-table .pr-table__group th {
  position: static;
  background: var(--color-surface-2);
  text-align: left;
  padding: var(--space-3) 0;
}

.pr-table__group th > span {
  position: sticky;
  left: 0;
  display: inline-block;
  padding-inline: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pr-table tbody tr:hover .pr-table__rowhead,
.pr-table tbody tr:hover td { background: var(--on-light-03); }

/* колонка рекомендованого тарифу */
.pr-table__col--featured { background: var(--acid-glow-soft); }
.pr-table thead .pr-table__col--featured { background: var(--acid-glow-soft); }

.pr-table__yes,
.pr-table__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
}
.pr-table__yes { background: var(--acid); color: var(--color-on-accent); }
.pr-table__no { background: var(--on-light-06); color: var(--color-text-muted); }

.pr-table__val {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.pr-compare__hint {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
@media (min-width: 900px) { .pr-compare__hint { display: none; } }

/* На вузьких екранах липка перша колонка з'їдала пів-ширини — стискаємо її
   та таблицю, щоб поруч було видно щонайменше дві колонки тарифів. */
@media (max-width: 700px) {
  .pr-table { min-width: 620px; font-size: var(--fs-xs); }
  .pr-table th,
  .pr-table td { padding: var(--space-3) var(--space-3); }
  .pr-table .pr-table__rowhead,
  .pr-table th[scope="row"] { min-width: 175px; }
  .pr-table__group th > span { padding-inline: var(--space-3); }
  .pr-table__plan { font-size: var(--fs-body); }
}

/* ============================================================
   МОТИВИ ДЛЯ ДРУКУ / reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pr-plan,
  .pr-pack__box,
  .pr-stepper__btn { transition: none; }
  .pr-plan:hover,
  .pr-pack__box:hover { transform: none; }
}

/* ============================================================
   TEASER — скорочений блок тарифів для інших сторінок
   Стоїть на головній і 6 ринкових сторінках (з 08.09.2026 — замість блоку
   акції «Ранній доступ»). Перевикористовує картки .pr-plan* цієї ж таблиці —
   дизайн тарифів лишається в ОДНОМУ місці, тут лише перефарбування під ТЕМНЕ тло.
   Тому pricing.css підключений і на цих сторінках (див. docs/structure.md).
   Свідомо БЕЗ лічильника кас, рядка «Разом» і блоку аддонів: вони потребують
   JS та зайві в тизері — повна механіка живе на сторінці тарифів.

   Чому темна: блок успадкував роль колишнього блоку акції — темний акцент після
   світлого блоку соцдоказів. Фон без фіолетового свічення в лівому нижньому куті,
   щоб один і той самий фон працював і на головній, і на ринкових сторінках без
   page-specific override.
   ============================================================ */
.pr-teaser {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 500px at 90% 8%,   rgba(187, 227, 11, .10) 0%, transparent 65%),
    radial-gradient(ellipse 400px 300px at 50% 110%, rgba(131, 65, 193, .12) 0%, transparent 70%),
    var(--ink);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.pr-teaser__header {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-10));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.pr-teaser__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-on-dark);
  text-wrap: balance;
}

.pr-teaser__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-on-dark-muted);
  text-wrap: balance;
}

/* Промо-плашка акції: на світлій сторінці вона темна, тут темне на темному
   зникло б — тому скляна з acid-обведенням. Сам «−50%» лишається acid-пілюлею. */
.pr-teaser .pr-promo {
  background: var(--acid-glow-soft);
  border: 1px solid rgba(187, 227, 11, .25);
  color: var(--color-on-dark);
  box-shadow: none;
}

/* ── картки на темному ── */
.pr-teaser .pr-plan {
  background: var(--ink-2b);
  border-color: var(--on-dark-10);
}

.pr-teaser .pr-plan:hover {
  border-color: var(--on-dark-40);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* рекомендований тариф — той самий acid-акцент, що й у старому блоці */
.pr-teaser .pr-plan--featured,
.pr-teaser .pr-plan--featured:hover {
  background: linear-gradient(165deg, rgba(187, 227, 11, .07) 0%, var(--ink-2b) 38%);
  border-color: var(--acid);
  box-shadow:
    0 0 0 1px var(--acid),
    0 0 80px rgba(187, 227, 11, .10),
    0 32px 80px rgba(0, 0, 0, .45);
}

.pr-teaser .pr-plan__name,
.pr-teaser .pr-plan__amount,
.pr-teaser .pr-plan__seats,
.pr-teaser .pr-plan__features li {
  color: var(--color-on-dark);
}

.pr-teaser .pr-plan__for,
.pr-teaser .pr-plan__per,
.pr-teaser .pr-plan__save,
.pr-teaser .pr-plan__inherit,
.pr-teaser .pr-plan__old {
  color: var(--color-on-dark-muted);
}

.pr-teaser .pr-plan__old { text-decoration-color: var(--on-dark-40); }
.pr-teaser .pr-plan__seats { border-top-color: var(--on-dark-10); }

/* Контурна кнопка на темному: .btn--ghost зі світлої палітри тут була б
   білою плашкою й забирала увагу в рекомендованого тарифу. */
.pr-teaser .btn--ghost {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--on-dark-40);
}

.pr-teaser .btn--ghost:hover {
  background: var(--acid-glow-soft);
  border-color: var(--acid);
  color: var(--acid);
}

.pr-teaser .pr-plans__vat { color: var(--color-on-dark-muted); }

/* Той самий рядок тріалу на темному тлі блоку */
.pr-teaser .pr-trial { color: var(--color-on-dark); }

/* Ряд дій під сіткою: перехід на повну сторінку тарифів */
.pr-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

/* На вузьких екранах кнопки в колонку на всю ширину картки-сітки */
@media (max-width: 560px) {
  .pr-teaser__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 440px;
    margin-inline: auto;
  }
}