/* Стоимость: "Оплата и условия" (pc-oplata.tpl + pc-oplata-item.tpl).
   Макет: секции vkhmY (десктоп 1440) и Gxt3L (телефон 390). Коробки и
   все размеры шрифта совпали с готовым pg-kak.css до пикселя (см. шапку
   pc-oplata.tpl) - значения здесь те же, но файл свой: pg-kak принадлежит
   страницам программ и своему полю, здесь страница и поле свои. */

[data-section="oplata"] {
  background: var(--paper);
  padding-block: 100px;   /* мерки: padding [100, 56] у vkhmY */
}

@media (max-width: 860px) {
  [data-section="oplata"] { padding-block: var(--section-y-m); }   /* мерки: padding [52, 20] у Gxt3L = токену */
}

.pc-oplata__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);   /* мерки: gap 44 у vkhmY/Gxt3L = токену */
}

/* ─── Заголовок ──────────────────────────────────────────────── */

.pc-oplata__head {
  display: flex;
  flex-direction: column;
  gap: 14px;   /* мерки: gap "Заголовок" 14 */
}

.pc-oplata__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--kicker);        /* 12 */
  line-height: 15px;               /* 12 x 1.21 (метрика Inter) */
  letter-spacing: 3px;             /* дамп: 3 и на телефоне тоже - надстрочник не сужают на мобильной версии (как у pg-kak) */
  color: var(--magenta-text);
}

.pc-oplata__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--h2-sm);         /* 48 */
  line-height: 55px;               /* 48 x 1.14 */
  letter-spacing: var(--h2-sm-ls); /* -1.6px */
  color: var(--ink);
}

/* ─── Пункты ─────────────────────────────────────────────────── */

.pc-oplata__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;   /* мерки: 4 x 312,5 + 3 x 26 = 1328 */
}

.pc-oplata__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pc-oplata__num {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  line-height: 46px;     /* 34 x 1.36 (метрика Manrope) */
  letter-spacing: -1px;
  color: var(--sun);
}

.pc-oplata__item-h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 25px;        /* 19 x 1.3 */
  letter-spacing: var(--h3-ls); /* -0.4px */
  color: var(--ink);
}

.pc-oplata__item-p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-sm); /* 15 */
  line-height: 26px;          /* дамп: 15 x 1.75, не токен --body-sm-lh (1.70) */
  color: var(--muted);
}

@media (max-width: 860px) {
  .pc-oplata__kicker { font-size: var(--m-kicker); line-height: 13px; }   /* 11 x 1.21 */

  .pc-oplata__h2 {
    font-size: 30px;   /* дамп: 30, не токен --m-h2 (28) - своя шкала, как у pg-cena/pg-kak */
    line-height: 34px; /* 30 x 1.14 */
    letter-spacing: -0.9px;
  }

  .pc-oplata__items {
    grid-template-columns: 1fr;
    gap: 26px;   /* тот же зазор, что на десктопе */
  }

  .pc-oplata__num {
    font-size: 23px;
    line-height: 31px;   /* 23 x 1.36 */
    letter-spacing: -0.6px;
  }

  .pc-oplata__item-h3 {
    font-size: 17px;
    line-height: 22px;   /* 17 x 1.3 */
    letter-spacing: -0.3px;
  }

  .pc-oplata__item-p {
    font-size: 14px;
    line-height: 25px;   /* 14 x 1.75 */
  }
}