/*
  pricing.css — страница «Стоимость» (website/work_v5/pricing.html).

  ═══ ЧТО ЭТО ═══
  Реализация утверждённого макета Figma, выгруженного в
  `website/work_v5/стоимость.pdf` (два экрана, 1920 × 1080 каждый).
  Задача этапа — не адаптация и не переработка макета, а максимально
  точное воспроизведение. Все величины ниже сняты с PDF измерением
  векторной геометрии (координаты, размеры, радиусы, цвета заливок),
  а не подобраны на глаз.

  ═══ ЕДИНСТВЕННОЕ ОТСТУПЛЕНИЕ ОТ МАКЕТА ═══
  Фон страницы. В макете он белый с холодным диагональным градиентом
  слайда; по постановке этапа страница использует фирменный фон
  главной страницы — класс `.mq-page-bg` из `hero_component/hero.css`
  (белый → #f5f8fd). Этот файл фон не задаёт.

  Служебные элементы слайда (плашка-логотип «MEDIQ» в левом верхнем
  углу и номера страниц 07/08) не переносятся: это оформление
  презентации, а не элементы сайта — их роль на странице выполняют
  Header и Footer сайта.

  ═══ СИСТЕМА КООРДИНАТ ═══
  Макет свёрстан в «единицах макета»: `--u` равна 1 px при ширине
  контейнера 1920 px и пропорционально уменьшается на более узких
  экранах. Поэтому при любой ширине от 1200 px и выше пропорции,
  отступы и типографика совпадают с макетом один в один — меняется
  только масштаб. Ниже 1200 px включается перестроение в одну колонку
  (см. раздел 9), при котором `--u` пересчитывается от более узкой
  «расчётной ширины», чтобы текст оставался читаемым.

  ═══ ОБЛАСТЬ ДЕЙСТВИЯ ═══
  Все селекторы начинаются с `.pr-` либо вложены в `.pr-page`.
  Файл подключается только из pricing.html; ни один существующий файл
  проекта не изменён, на остальные страницы влияния нет.

  Разделы:
    1. Токены макета
    2. Каркас страницы и контейнер
    3. Типографика верхнего уровня (H1, подзаголовок)
    4. Информационная плашка (экран 1)
    5. Карточка «Клинические АРМ» (экран 1)
    6. Карточка «Дополнительные роли» (экран 1)
    7. Карточка «Базовый контур MedIQ» (экран 2)
    8. Карточки дополнительных ролей (экран 2)
    9. Адаптив
*/

/* ══════════════════════════════════════════════════════════════════
   1. ТОКЕНЫ МАКЕТА
   ══════════════════════════════════════════════════════════════════
   Палитра снята с заливок PDF (setFillRGBColor исходного документа),
   не подобрана визуально. */

.pr-page {
  /* Единица макета объявлена ниже, в разделе «Каркас страницы и
     контейнер»: она считается от контентной колонки сайта. */

  /* Цвета текста */
  --pr-ink: #131722;          /* заголовки, названия ролей, суммы   */
  --pr-ink-soft: #2b3648;     /* текст в чипах карточек ролей       */
  --pr-body: #54627c;         /* пояснительный текст                */
  --pr-body-2: #4c5b76;       /* подзаголовки экранов               */
  --pr-muted: #7c8cab;        /* надзаголовки (eyebrow) на белом    */
  --pr-muted-2: #8595b4;      /* подпись под ценой в плитке         */
  --pr-on-blue: #c6d6f5;      /* текст на синей поверхности         */
  --pr-chip-on-blue: #f2f6fe; /* текст чипа на синей поверхности    */

  /* Цвета поверхностей */
  --pr-accent: #3d62c4;       /* фирменный синий                    */
  --pr-surface: #ffffff;
  --pr-surface-1: #f4f7fd;    /* плитки цен, примечания, светлые чипы */
  --pr-surface-2: #e7eefb;    /* пример расчёта, врезка, тонированные карточки */
  --pr-track: #dce5f7;        /* дорожка индикатора                 */
  --pr-divider: var(--mq-border); /* разделители строк; было #e6ecf7 — 2026-08-13 единый цвет границ */

  /* Градиенты: конечные точки сняты пиксельной пробой рендера PDF */
  --pr-grad-h: linear-gradient(90deg, #6c8edb 0%, #4868c1 100%);
  --pr-grad-d: linear-gradient(135deg, #6d8fdc 0%, #4868c1 100%);

  /* Тени. Геометрия снята с растровых слоёв тени в PDF:
     смещение и радиус размытия — из габаритов слоя относительно
     самой фигуры, плотность — пиксельной пробой. */
  /* Правка 2026-08-12: тени страницы приведены к общему эталону сайта —
     тени блока «Онлайн-касса и эквайринг» (токен --v4-shadow-card).
     Три собственных значения страницы отличались и по плотности, и по
     цвету: синяя тень плашки была заметно сильнее всего остального.
     Переопределяются сами токены, поэтому правила ниже (строки с
     box-shadow) не дублируются и не переписываются.

     Исходные значения сохранены здесь для истории:
       --pr-shadow-card:        0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(31, 45, 80, .07)
       --pr-shadow-card-tinted: 0 calc(8 * var(--u))  calc(22 * var(--u)) rgba(31, 45, 80, .06)
       --pr-shadow-blue:        0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(61, 98, 196, .28) */
  --pr-shadow-card: var(--v4-shadow-card);
  --pr-shadow-card-tinted: var(--v4-shadow-card);
  --pr-shadow-blue: var(--v4-shadow-card);

  /* Радиусы */
  --pr-r-lg: calc(26 * var(--u));  /* карточки, плашка, врезка   */
  --pr-r-md: calc(18 * var(--u));  /* плитки цен, пример расчёта */
  --pr-r-sm: calc(16 * var(--u));  /* примечания                 */
  --pr-r-chip: calc(12 * var(--u));

  /* Шрифт макета. Inter подключается локально (fonts-inter.css);
     запасной вариант — общий шрифтовой стек сайта. */
  --pr-font: "Inter", var(--font-family-base, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* ══════════════════════════════════════════════════════════════════
   2. КАРКАС СТРАНИЦЫ И КОНТЕЙНЕР
   ══════════════════════════════════════════════════════════════════ */

/* ═══ ПРАВКА 2026-08-11: СТРАНИЦА ВЕРНУЛАСЬ В КОНТЕЙНЕР САЙТА ═══

   БЫЛО: `max-width: none; padding-inline: 0` — общий контейнер `main`
   отменялся, и макет разворачивался во всю ширину окна. При 1920 px это
   давало контентную колонку 1760 px против 1328 px на главной: страница
   «Стоимость» выглядела растянутой, её левая кромка стояла на 80 px,
   тогда как логотип в шапке — на 296 px. Сетки двух страниц не совпадали.

   СТАЛО: отмена снята. `main` даёт свои 1360 px и поля по 16 px, то есть
   контентную колонку 1328 px — ровно ту же, что у секций главной, с теми
   же левой и правой кромками. Никаких `width`, `transform` и подобранных
   margin: используется существующий контейнер сайта.

   Единица макета пересчитана соответственно. Раньше 100cqw отвечали
   полной ширине листа PDF (1920 единиц, включая его собственные поля по
   80). Теперь контейнер сайта сам даёт поля, а 100cqw — это уже
   контентная колонка, которой на листе соответствуют 1760 единиц
   (1920 − 80 − 80). Отсюда делитель 1760.

   Масштаб при этом получается 1328 / 1760 = 0,7545 — практически тот же,
   с которым страница и так отрисовывалась при 1440 px (0,75). То есть на
   широком мониторе она теперь выглядит как проверенный вариант 1440,
   а не растягивается вслед за окном. */
.pr-page {
  --u: min(1px, calc(100cqw / 1760));
  container-type: inline-size;
  font-family: var(--pr-font);
  color: var(--pr-ink);
  /* Все размеры внутри — производные от --u, поэтому наследуемый
     font-size роли не играет; фиксируем его, чтобы em-значения
     сторонних стилей сюда не протекали. */
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.pr-page *,
.pr-page *::before,
.pr-page *::after {
  box-sizing: border-box;
}

/* ── Нейтрализация общих правил сайта внутри макета ──
   `main`, заголовки и абзацы сайта несут собственную типографическую
   меру (`max-width` в ch), шрифтовой стек, отбивки и маркеры списков.
   Для страницы-макета они должны быть сняты: длина строки, кегль и
   ритм здесь заданы макетом, а не общей типографической шкалой.
   Правила ниже действуют только внутри `.pr-page`, ни один общий файл
   не изменён. Стили этого файла — вне слоёв (@layer), поэтому
   выигрывают у слоёв сайта порядком каскада, а не специфичностью.
   Селекторы намеренно записаны через `:where()` — нулевая
   специфичность оставляет приоритет за правилами макета ниже. */
:where(.pr-page) :where(h1, h2, h3, h4, p, ul, ol, li, div, span, section) {
  max-width: none;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-wrap: wrap;
}

:where(.pr-page) :where(h1, h2, h3, h4, p) {
  margin: 0;
  font-weight: inherit;
  color: inherit;
  border: 0;
}

:where(.pr-page) :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.pr-page) :where(ul, ol) > li::before,
:where(.pr-page) :where(ul, ol) > li::after {
  content: none;
}

/* Вертикальный ритм между блоками задают сами секции макета. */
:where(.pr-page) > * + * {
  margin-top: 0;
}

/* Контейнер макета. Собственные поля и предел ширины сняты: и то и другое
   теперь даёт контейнер сайта (`main`: 1360 px, поля по 16 px). Оставлять
   их значило бы сложить два набора полей — контентная колонка ушла бы
   внутрь на 113 px и перестала совпадать с колонкой главной. */
.pr-container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* Вертикальный ритм экранов повторяет слайды PDF: от верхней кромки
   слайда до строки заголовка — 130 px, от нижней кромки карточек до
   низа слайда — 104 px. */
.pr-screen {
  padding-block: calc(130 * var(--u)) calc(104 * var(--u));
}

.pr-screen + .pr-screen {
  padding-top: calc(131 * var(--u));
}

/* ══════════════════════════════════════════════════════════════════
   3. ТИПОГРАФИКА ВЕРХНЕГО УРОВНЯ
   ══════════════════════════════════════════════════════════════════ */

.pr-h1 {
  margin: 0;
  font-size: calc(58 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--pr-ink);
}

/* Экран 2: заголовок в две строки, кегль меньше. */
.pr-h1--two-line {
  font-size: calc(47 * var(--u));
  line-height: calc(53 / 47);
  letter-spacing: -0.033em;
}

.pr-h1 em {
  font-style: normal;
  color: var(--pr-accent);
}

.pr-lead {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(21 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  color: var(--pr-body-2);
}

.pr-h1--two-line + .pr-lead {
  margin-top: calc(16 * var(--u));
}

/* Надзаголовок карточки (eyebrow). Разрядка снята с макета. */
.pr-eyebrow {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--pr-muted);
}

/* ══════════════════════════════════════════════════════════════════
   4. ИНФОРМАЦИОННАЯ ПЛАШКА (экран 1)
   ══════════════════════════════════════════════════════════════════ */

.pr-banner {
  display: flex;
  align-items: center;
  margin-top: calc(24 * var(--u));
  min-height: calc(78.7 * var(--u));
  padding-inline: calc(34 * var(--u));
  border-radius: var(--pr-r-lg);
  background-image: var(--pr-grad-h);
  box-shadow: var(--pr-shadow-blue);
}

.pr-banner__label {
  flex: 0 0 auto;
  min-width: calc(314 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--pr-on-blue);
}

.pr-banner__text {
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   ОБЩАЯ ГЕОМЕТРИЯ КАРТОЧЕК
   ══════════════════════════════════════════════════════════════════ */

/* Ряд экрана 1: 932,8 + 22 + 805,2 = 1760. Доли повторяют макет. */
.pr-row {
  display: grid;
  grid-template-columns: 932.8fr 805.2fr;
  gap: calc(22 * var(--u));
  margin-top: calc(20 * var(--u));
}

.pr-card {
  display: flex;
  flex-direction: column;
  min-height: calc(610.3 * var(--u));
  padding: calc(30.5 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  border-radius: var(--pr-r-lg);
  background-color: var(--pr-surface);
  box-shadow: var(--pr-shadow-card);
}

.pr-card__title {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(26 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.011em;
  color: var(--pr-ink);
}

/* ══════════════════════════════════════════════════════════════════
   5. КАРТОЧКА «КЛИНИЧЕСКИЕ АРМ» (экран 1)
   ══════════════════════════════════════════════════════════════════ */

/* Четыре плитки: 205,7 × 141 с шагом 219,7 → зазор 14. */
.pr-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(14 * var(--u));
  margin-top: calc(20 * var(--u));
}

.pr-tier {
  padding: calc(21.2 * var(--u)) calc(18 * var(--u)) calc(15.6 * var(--u));
  border-radius: var(--pr-r-md);
  background-color: var(--pr-surface-1);
}

.pr-tier__price {
  margin: 0;
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.037em;
  color: var(--pr-accent);
}

.pr-tier__unit {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  color: var(--pr-muted-2);
}

/* Индикатор доли: дорожка 169,7 × 6, заливка — доля из макета. */
.pr-tier__bar {
  height: calc(6 * var(--u));
  margin-top: calc(1.6 * var(--u));
  border-radius: calc(3 * var(--u));
  background-color: var(--pr-track);
}

.pr-tier__bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--pr-accent);
}

.pr-tier__range {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  color: var(--pr-ink);
}

/* Пример расчёта: 864,8 × 86. */
.pr-example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  margin-top: calc(20 * var(--u));
  min-height: calc(86 * var(--u));
  padding: 0 calc(26 * var(--u));
  border-radius: var(--pr-r-md);
  background-color: var(--pr-surface-2);
}

.pr-example__title {
  margin: 0;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: calc(22 / 17);
  color: var(--pr-accent);
}

.pr-example__desc {
  margin: 0;
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1.35;
  color: var(--pr-body);
}

.pr-example__sum {
  flex: 0 0 auto;
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.037em;
  color: var(--pr-ink);
}

/* Примечания: два блока 425,4 × 76,8, прижаты к низу карточки. */
.pr-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(14 * var(--u));
  margin-top: auto;
  padding-top: calc(20 * var(--u));
}

/* Правое поле больше левого: в макете текстовый слой примечания
   уже блока, из-за этого первая строка переносится перед «и».
   Величина восстановлена по месту переноса. */
.pr-note {
  display: flex;
  gap: calc(13.2 * var(--u));
  min-height: calc(76.8 * var(--u));
  padding: calc(16 * var(--u)) calc(26 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  border-radius: var(--pr-r-sm);
  background-color: var(--pr-surface-1);
}

.pr-note__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: var(--pr-accent);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.pr-note__text {
  margin: 0;
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: calc(22 / 16);
  color: var(--pr-body);
}

.pr-note__text b {
  font-weight: 600;
  color: var(--pr-accent);
}

/* ══════════════════════════════════════════════════════════════════
   6. КАРТОЧКА «ДОПОЛНИТЕЛЬНЫЕ РОЛИ» (экран 1)
   ══════════════════════════════════════════════════════════════════ */

/* Строки роль/цена: шаг 74, разделитель 2 px входит в шаг. */
.pr-roles {
  margin-top: calc(21.2 * var(--u));
}

.pr-roles__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  height: calc(74 * var(--u));
  padding-inline: calc(4 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--pr-divider);
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}

.pr-roles__item:last-child {
  border-bottom: 0;
}

.pr-roles__price {
  letter-spacing: -0.018em;
  color: var(--pr-accent);
  white-space: nowrap;
}

/* Врезка про скидки: 737,2 × 128,3, прижата к низу карточки. */
.pr-callout {
  margin-top: auto;
  padding: calc(22.7 * var(--u)) calc(26 * var(--u)) calc(23.1 * var(--u));
  border-radius: var(--pr-r-lg);
  background-color: var(--pr-surface-2);
}

.pr-callout__title {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--pr-ink);
}

.pr-callout__text {
  margin: calc(8.5 * var(--u)) 0 0;
  font-size: calc(17 * var(--u));
  font-weight: 400;
  line-height: calc(24 / 17);
  letter-spacing: -0.006em;
  color: var(--pr-body);
}

/* ══════════════════════════════════════════════════════════════════
   7—8. СЕТКА ЭКРАНА 2
   ══════════════════════════════════════════════════════════════════
   457,6 + 22 + 629,2 + 22 + 629,2 = 1760. Левая карточка занимает
   обе строки, её высота (668,8) складывается из двух карточек ролей
   и зазора между ними — как в макете. */

.pr-grid {
  display: grid;
  grid-template-columns: 457.6fr 629.2fr 629.2fr;
  grid-template-rows: repeat(2, calc(323.4 * var(--u)));
  gap: calc(22 * var(--u));
  margin-top: calc(24 * var(--u));
}

.pr-base {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  padding: calc(28.5 * var(--u)) calc(26 * var(--u));
  border-radius: var(--pr-r-lg);
  background-image: var(--pr-grad-d);
  box-shadow: var(--pr-shadow-blue);
}

.pr-base__label {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--pr-on-blue);
}

.pr-base__title {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(26 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.011em;
  color: #fff;
}

.pr-base__sub {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: calc(22.1 / 17);
  color: var(--pr-on-blue);
}

/* 14 функций: две колонки, зазор 8, между рядами 11. */
.pr-base__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(11 * var(--u)) calc(8 * var(--u));
  margin: calc(17 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.pr-base__list li {
  padding: calc(9.2 * var(--u)) calc(12 * var(--u));
  border-radius: var(--pr-r-chip);
  background-color: rgba(255, 255, 255, .13);
  font-size: calc(15 * var(--u));
  font-weight: 400;
  line-height: calc(19 / 15);
  color: var(--pr-chip-on-blue);
}

/* Карточка дополнительной роли: 629,2 × 323,4. */
.pr-role {
  display: flex;
  flex-direction: column;
  padding: calc(24.5 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));
  border-radius: var(--pr-r-lg);
  background-color: var(--pr-surface);
  box-shadow: var(--pr-shadow-card);
}

/* Тонированный вариант — «шахматкой», как в макете. */
.pr-role--tinted {
  background-color: var(--pr-surface-2);
  box-shadow: var(--pr-shadow-card-tinted);
}

.pr-role__label {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--pr-muted);
}

/* Заголовок с ценой центрируется в свободном пространстве между
   надзаголовком и блоком чипов — поэтому в карточке с двустрочным
   чипом он стоит выше ровно на половину разницы высот. Это поведение
   макета, а не совпадение: смещение равно 10,2 px при разнице 20,4. */
.pr-role__head {
  /* Симметричные auto-поля центрируют строку в свободном
     пространстве; padding-bottom смещает её вверх на свою половину —
     ровно на ту величину, что и в макете. */
  margin-block: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding-bottom: calc(7 * var(--u));
}

.pr-role__title {
  margin: 0;
  font-size: calc(27 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--pr-ink);
}

.pr-role__price {
  flex: 0 0 auto;
  font-size: calc(21 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.016em;
  color: var(--pr-accent);
  white-space: nowrap;
}

.pr-role__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(9 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-role__list li {
  padding: calc(10.75 * var(--u)) calc(14 * var(--u));
  border-radius: var(--pr-r-chip);
  background-color: var(--pr-surface-1);
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: calc(21 / 16);
  color: var(--pr-ink-soft);
}

/* На тонированной карточке чипы белые — инверсия из макета. */
.pr-role--tinted .pr-role__list li {
  background-color: var(--pr-surface);
}

/* ══════════════════════════════════════════════════════════════════
   9. АДАПТИВ
   ══════════════════════════════════════════════════════════════════
   Три режима.

   1) От 1200 px и шире — макет воспроизводится один в один: меняется
      только масштаб (`--u`), пропорции, отступы и типографика
      совпадают с Figma.
   2) 900–1199 px — верхние сетки становятся одноколоночными, карточки
      получают полную ширину; масштаб считается от расчётной ширины
      1120 px, поэтому кегли возвращаются к значениям макета.
   3) Ниже 900 px — масштабирование выключается (`--u: 1px`),
      контейнер тянется по ширине окна, а кегли берутся фиксированные
      и читаемые. Ниже 600 px внутренние сетки блоков тоже
      схлопываются в одну колонку.

   Порядок блоков и содержимое во всех режимах одинаковы: адаптив не
   меняет состав макета, только его раскладку. */

/* ── 900–1199 px: одна колонка верхнего уровня ── */
@media (max-width: 1199.98px) {
  /* Тот же принцип, что и выше: 100cqw — контентная колонка сайта,
     а на листе ей отвечают 1120 − 40 − 40 = 1040 единиц. Поля контейнера
     макета сняты, их даёт `main`. */
  .pr-page {
    --u: min(1px, calc(100cqw / 1040));
  }

  .pr-container {
    max-width: none;
    padding-inline: 0;
  }

  .pr-row,
  .pr-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .pr-base {
    grid-row: auto;
  }

  .pr-card {
    min-height: 0;
  }

  /* Заголовок экрана 2 переносится по ширине контейнера, а не по
     жёсткому разрыву строки макета. */
  .pr-h1 br {
    display: none;
  }
}

/* ── Ниже 900 px: тянущийся контейнер, фиксированные кегли ── */
@media (max-width: 899.98px) {
  .pr-page {
    --u: 1px;
  }

  /* Поля контейнера макета сняты и здесь: их даёт `main`. Оставленные
     24 px складывались бы с полями сайта, и карточки фиксированной
     ширины переставали помещаться — замер при 375 px поймал вылет
     на 13 px за кромку контейнера. */
  .pr-container {
    max-width: 100%;
    padding-inline: 0;
  }

  .pr-screen {
    padding-block: 64px 56px;
  }

  .pr-screen + .pr-screen {
    padding-top: 56px;
  }

  .pr-h1 {
    font-size: 38px;
  }

  .pr-h1--two-line {
    font-size: 34px;
    line-height: 1.2;
  }

  .pr-lead {
    font-size: 18px;
  }

  /* Плашка перестаёт быть однострочной. */
  .pr-banner {
    display: block;
    padding: 22px 24px;
  }

  .pr-banner__label {
    display: block;
    min-width: 0;
    margin-bottom: 10px;
  }

  .pr-banner__text {
    font-size: 19px;
    line-height: 1.35;
  }

  .pr-card,
  .pr-base,
  .pr-role {
    padding: 26px 24px;
  }

  .pr-role__head {
    margin-block: 24px;
  }
}

/* ── Ниже 600 px: внутренние сетки в одну колонку ── */
@media (max-width: 599.98px) {
  /* Поля здесь тоже от `main`, см. комментарий в ветке 900 px. */
  .pr-container {
    padding-inline: 0;
  }

  .pr-h1 {
    font-size: 30px;
  }

  .pr-h1--two-line {
    font-size: 28px;
  }

  .pr-lead {
    font-size: 17px;
  }

  .pr-banner__text {
    font-size: 18px;
  }

  .pr-card,
  .pr-base,
  .pr-role {
    padding: 22px 18px;
  }

  /* Четыре ступени цены — в два столбца. */
  .pr-tiers {
    grid-template-columns: repeat(2, 1fr);
  }

  .pr-example {
    display: block;
    padding: 20px;
  }

  .pr-example__sum {
    display: block;
    margin-top: 12px;
  }

  .pr-notes,
  .pr-base__list,
  .pr-role__list {
    grid-template-columns: 1fr;
  }

  .pr-roles__item {
    height: auto;
    padding-block: 18px;
  }

  .pr-role__head {
    display: block;
    margin-block: 20px;
    padding-bottom: 0;
  }

  .pr-role__price {
    display: block;
    margin-top: 4px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   10. ТИПОГРАФИКА ПО СТАНДАРТУ ГЛАВНОЙ СТРАНИЦЫ
   ══════════════════════════════════════════════════════════════════
   Указание Product Owner: привести кегли страницы «Стоимость» к тем
   же значениям, что на главной.

   Замер главной страницы:

     main h1                39,31 px / 42,46 / 700
     main h2, main h3       34 px    / 39,1  / 700
     основной текст         18,06 px / 28,9  / 400   (--v4-fs-h3)
     меню                   18,06 px / 21,68 / 400
     кнопки CTA             14,875 px / 14,875 / 600
     заголовки подвала      12,75 px / 15,3  / 600

   ═══ 10.1. ЧТО УЖЕ СОВПАДАЛО ═══

   Меню, кнопка «Запросить демо» и заголовки подвала совпадали до
   правки до сотых: они приходят из общих файлов сайта, а не из этого.
   Правок не потребовалось.

   ═══ 10.2. ЗАГОЛОВКИ ═══

   Значения не пересчитываются в единицах макета (--u) намеренно: их
   задаёт главная страница, и они не должны «плыть» вместе с масштабом
   макета - иначе совпадение с главной держалось бы только на одной
   ширине экрана.

   ═══ 10.3. ЧТО ОСТАВЛЕНО В МАСШТАБЕ МАКЕТА ═══

   Не тронуты цифры цен, единицы («за 1 АРМ / мес»), диапазоны
   («1-5 АРМ»), надзаголовки («КЛИНИЧЕСКИЕ АРМ», «ДОПОЛНИТЕЛЬНАЯ
   РОЛЬ») и чипы списков функций.

   Это не описания и не пояснения, а служебная микротипографика
   макета - у неё нет соответствия на главной: там аналогичные подписи
   карточек первого экрана тоже живут по своей шкале (15,8 px), а не по
   18,06.

   Главное - замер: при переводе чипов на 18,06 px карточка «Базовый
   контур MedIQ» перестаёт вмещать свои 14 функций. Её высота 502 px
   снята с макета, и содержимое вываливается за нижнюю кромку. Это
   прямо нарушило бы запрет «не изменять размеры карточек», поэтому
   чипы оставлены как есть. */

.pr-page h1,
.pr-page .pr-h1,
.pr-page h2.pr-h1 {
  font-size: var(--v4-fs-display);
  line-height: var(--v4-lh-display);
  letter-spacing: -0.03em;
  font-weight: 700;
}

.pr-page h2,
.pr-page h3 {
  font-size: var(--v4-fs-h2);
  line-height: var(--v4-lh-head);
  letter-spacing: -0.022em;
  font-weight: 700;
}

/* Описания, пояснения и текстовые блоки - кегль основного текста
   главной страницы, теми же токенами. */
.pr-page .pr-lead,
.pr-page .pr-example__desc,
.pr-page .pr-callout__text,
.pr-page .pr-note__text,
.pr-page .pr-base__sub {
  font-size: var(--v4-fs-h3);
  line-height: var(--v4-lh-text);
}

.pr-page .pr-lead,
.pr-page .pr-example__desc,
.pr-page .pr-callout__text,
.pr-page .pr-note__text {
  font-weight: 400;
}

/* Строки сетки второго экрана сняты с макета жёстко - repeat(2, 323.4u).
   При кегле заголовков главной страницы содержимое карточки «Базовый
   контур MedIQ» перестаёт в них помещаться на ширинах около 1200 px:
   замер показал бокс 418 px против содержимого 464. minmax оставляет
   макетную высоту там, где содержимое влезает, и даёт строке вырасти
   только там, где иначе текст вываливался бы за кромку карточки. */
@media (min-width: 1200px) {
  .pr-grid {
    grid-template-rows: repeat(2, minmax(calc(323.4 * var(--u)), auto));
  }
}

/* ══════════════════════════════════════════════════════════════════
   11. ТИПОГРАФИКА: ОСТАВШИЙСЯ ОПИСАТЕЛЬНЫЙ ТЕКСТ

   Этап 2026-08-11. Раздел 10 перевёл на стандарт главной заголовки и
   основные абзацы, но часть текста осталась в масштабе макета. Замер
   страницы показал, что мельче эталона остаются два разных класса
   элементов, и обходиться с ними надо по-разному.

   ЭТАЛОН - основной текст главной, он же текст FAQ («MedIQ - это личный
   кабинет…», «AI в MedIQ ставит диагноз…»): --v4-fs-h3 = 18,0625 px,
   интерлиньяж --v4-lh-text.

   ═══ 11.1. ЧТО ПОДНЯТО И ПОЧЕМУ ═══

   Перечни функций - это содержательный текст, а не подписи к цифрам:
   тридцать формулировок вроде «Онлайн-запись через агрегаторы» и «ЭМК».
   Читать их с кегля 11-12 px невозможно, и мельче они были только
   потому, что достались из макета, а не потому, что так задумано.

     .pr-base__list li   11,25 -> 18,0625   14 функций базового контура
     .pr-role__list li   12,00 -> 18,0625   16 функций дополнительных ролей

   Два заголовка подняты по другой причине: они оказались МЕЛЬЧЕ
   собственного текста под ними, который раздел 10 уже перевёл на 18,06.
   Заголовок меньше своего абзаца читается как дефект вёрстки.

     .pr-callout__title  15,00 -> 18,0625   «Скидки суммируют эффект…»
     .pr-example__title  12,75 -> 18,0625   «Пример расчёта профиля»

   Насыщенность у обоих остаётся 600 - она их и отличает от текста.

   ═══ 11.2. ЧТО ОСТАВЛЕНО В МАСШТАБЕ МАКЕТА - ОСОЗНАННО ═══

   Цифры и микро-подписи вокруг них: цены (25,5 / 15,75 / 15), диапазоны
   «1–5 АРМ» (12,75), единицы «за 1 АРМ / мес» (9,75), надзаголовки
   (10,5), номера сносок (9,75), строки ролей «Администратор + цена» (15).

   Это не описания, а система цифр утверждённого макета Figma. У них нет
   соответствия на главной, поднимать их - значит менять не типографику,
   а саму ценовую таблицу. Отдельной типографической системы для pricing
   здесь тоже не заводится: единственное используемое значение -
   тот же токен --v4-fs-h3, что и на главной.

   ═══ 11.3. ПОБОЧНЫЙ ЭФФЕКТ ═══

   Карточка «Базовый контур MedIQ» вырастает: 14 функций крупнее занимают
   больше места. Переполнения нет - сетка второго экрана уже переведена
   на minmax(..., auto) (раздел 9), поэтому строка растягивается, а не
   обрезает содержимое. Замер: scrollHeight = clientHeight, ноль
   переполнения.
   ══════════════════════════════════════════════════════════════════ */

.pr-page .pr-base__list li,
.pr-page .pr-role__list li,
.pr-page .pr-callout__title,
.pr-page .pr-example__title {
  font-size: var(--v4-fs-h3);
  line-height: var(--v4-lh-text);
}

/* ══════════════════════════════════════════════════════════════════
   12. ВЕРХНИЙ БЛОК «ДЛЯ КРУПНЫХ КЛИНИК И СЕТЕЙ»

   Этап 2026-08-11. Над первым экраном добавлена секция TIER-02 -
   дословная копия одноимённого блока главной страницы.

   Само оформление блока НЕ дублируется: разметка стоит прямым потомком
   main, поэтому сетка, градиент, тень, скругление, типографика, кнопка
   и габариты слота под изображение приходят из общих файлов сайта,
   которые pricing.html и так подключает. Замер подтвердил совпадение
   с главной: 1328 x 560, поля 40, зазор 40, радиус 16, тот же
   радиальный градиент, заголовок 34/39,1/700, абзац 18,06/28,9/400,
   слот медиа 480 x 480.

   Здесь задаются только две вещи, которых общие файлы дать не могут.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ 12.1. ОТСТУП СВЕРХУ ═══
   На главной над этим блоком идут другие секции, здесь он первый на
   странице. Без отступа он вставал вплотную к верхней кромке main и
   уходил под закреплённую шапку - замер поймал верх секции на -73 px
   от нижней кромки шапки.

   Величина взята не произвольно: 130 единиц макета - это тот же
   отступ, с которым от верхней кромки листа начинается первый экран
   («.pr-screen», раздел 2). Блок встаёт ровно туда, где раньше
   начинался заголовок, и вертикальный ритм страницы не ломается. */

.pr-page > [data-component="tier-cta"][data-variant="wide"] {
  margin-block-start: calc(130 * var(--u));
}

/* ═══ 12.1a. ТОТ ЖЕ ОТСТУП НА МОБИЛЬНОМ ═══
   Ниже 900 px масштабирование выключено — `--u` равен 1px (раздел
   «Адаптив»), — и «130 единиц макета» превращаются в буквальные 130 px.
   Получалось, что на телефоне зазор от шапки до первого блока больше,
   чем на мониторе: замер 68 px при 375, 390 и 430 px против 25 px при
   1440 x 900.

   Значение задаётся явно и совпадает с верхним полем мобильного Hero
   главной страницы, поэтому обе страницы начинаются одинаково.
   Отрицательные отступы не применялись. Правило стоит ПОСЛЕ раздела
   12.1: селектор тот же, специфичность равная, и при обратном порядке
   мобильная ветка молча проигрывала бы — проверено замером. */
@media (max-width: 899.98px) {
  .pr-page > [data-component="tier-cta"][data-variant="wide"] {
    margin-block-start: 90px;
  }
}

/* ═══ 12.3. ОТСТУП ЗАГОЛОВКА ОТ АБЗАЦА ═══
   Замер: на главной у этого же компонента (тот же селектор
   [data-component="tier-cta"][data-variant="wide"], блок TIER-02)
   заголовок отделён от абзаца на 16 px — и на desktop, и на мобильном.
   Здесь расстояние было ровно 0: сброс страницы
   `:where(.pr-page) :where(h1, h2, h3, h4, p) { margin: 0 }` (раздел 2,
   строка 174) снимает у заголовка нижний отступ, а он на главной как
   раз этим отступом и задан.

   Величина не подбиралась: взято то же значение 16 px, что действует
   на главной. Правило адресовано только заголовку этого блока, поэтому
   на прочие заголовки и абзацы страницы не распространяется. */

.pr-page > [data-component="tier-cta"][data-variant="wide"] > [data-role="content"] > h3 {
  margin-block-end: 16px;
}

/* ═══ 12.2. ЦВЕТ АБЗАЦА ═══
   На главной абзац этого блока наследует rgba(255,255,255,0.95).
   Внутри .pr-page наследование перебивает собственный сброс страницы
   (`:where(.pr-page) :where(p) { color: inherit }`, раздел 2), и абзац
   получает чистый белый. Разница мизерная, но блок должен совпадать с
   эталоном, поэтому значение задаётся явно - тем же, что на главной. */

.pr-page > [data-component="tier-cta"][data-variant="wide"] > [data-role="content"] > p {
  color: rgba(255, 255, 255, 0.95);
}