/* ==========================================================================
   Секция 12 — цена

   Все размеры сняты линейкой с design/экран 12.png (экспорт 3344px,
   коэффициент 1.742, то есть вьюпорт 1920). Высота заглавных → кегль:
   для Golos Text коэффициент 0.705, для Oswald 0.843.

     бейдж «ИНТЕНСИВ»    заглавные 17.2 → 24     плашка 174x52
     «ИНТЕНСИВ —»        заглавные 23.6 → 33
     «$15»               высота цифр 120  → 142
     «ВМЕСТО»            заглавные 18.4 → 26
     «$115»              высота цифр 42.8 → 51
     «СКИДКА 87%»        заглавные 25.9 → 37    плашка 296x63
     обещание            заглавные 27.6 → 33    интерлиньяж 44.8
     кнопка              заглавные 25.8 → 36    кнопка 595x91
     «ЧТО ВХОДИТ:»       заглавные 24.1 → 34
     пункт списка        заглавные 18.9 → 27
     плашки внизу        заглавные 17.8 → 25 / текст 20, иконка 80

   Сетка макета при контенте 1771: колонки 597 / 375 / 683, промежуток 58.
   Карточка цены 597x372, полоса плашек 1771x161.

   Второй проход по docs/visual-language.md. Экран принятия решения, поэтому
   правки все про одно: чтобы кнопка была очевидным центром внимания.
   Карточка цены и полоса фактов перестали быть плоскими — две ступени тени
   вместо «всё лежит на бумаге»; контурная плашка скидки и плоские кружки
   значков переведены на перелив; под кнопкой появилось медленно дышащее
   свечение; свечение вокруг чёрной коробки, наоборот, приглушено — оно
   добавляло веса самому тяжёлому объекту страницы. Плюс шкала цены:
   скидку видно длиной отрезка, а не только цифрой процента.
   ========================================================================== */

.price {
  overflow: hidden;
}

/* ---------- Декор ----------
   Объект секции — коробка продукта, объект-силуэт, значит кольца ореолом
   по его оси (docs/visual-language.md, «Декор: два вопроса»).

   Было пятно света на .075 — в макете коробка стоит на светлом ореоле.
   На снимке 1440 его не видно вовсе, а поднимать плотность нельзя: это самый
   тёмный объект страницы, и подсветка вокруг него добавляет ему веса,
   отбирая его у кнопки. Ореол линией эту цену не платит — он не осветляет
   фон, а обводит фигуру, и попадает в тот же набор, что у роботов
   на экранах 1, 3, 4 и 9. Свет остаётся там, где он показывает действие:
   на самой кнопке (--glow-brand в .price__cta) и на финальном призыве
   (.cta__glow).

   Круг 691px при right 0 и top 16.1% занимает 749..1440 по горизонтали
   и 203..894 по вертикали, коробка — 877..1390 и 234..862: ореол её
   обнимает и сам целиком внутри секции. До верхней кромки 203px,
   до нижней 367 — обрезать нечего, маска не нужна.

   right: 0, а не 2%: круг должен стоять на оси коробки, а не в правом поле.
   При 2% его центр уезжал на 68px влево от центра коробки, и левая дуга
   заходила в колонку «что входит» глубже, чем на просвет между колонками. */
.price__rings {
  width: min(48vw, 700px);
  aspect-ratio: 1;
  top: 16.1%;
  right: 0;
}


/* ---------- Раскладка ----------
   Три колонки: цена слева, «что входит» по центру, коробка справа.
   Пропорции 597 / 375 / 683 — прямо с макета. */

.price__grid {
  display: grid;
  grid-template-columns: minmax(0, 597fr) minmax(0, 375fr) minmax(0, 683fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--s-7);
  /* 24, а не 8: вместе с нижним полем лида это даёт общие для лендинга
     48px от шапки до контента. */
  row-gap: var(--s-5);
  align-items: start;
}

/* Заголовок заходит на вторую колонку — она в первом ряду всё равно пустая,
   а иначе «ПО ДЕНЬГАМ» рвётся на три строки вместо макетных двух. */
.price__head     { grid-column: 1 / 3; grid-row: 1; }
.price__offer    { grid-column: 1; grid-row: 2 / span 2; }
.price__includes { grid-column: 2; grid-row: 2; }
/* Приписка в макете стоит под списком, справа от кнопки, и стрелка смотрит
   на кнопку — поэтому она отдельный элемент сетки, а не хвост CTA. */
.price__hand     { grid-column: 2; grid-row: 3; }
.price__box      { grid-column: 3; grid-row: 1 / span 3; align-self: center; }

/* ---------- Шапка секции ---------- */

.price__title {
  /* Без balance: макетная разбивка «БРО, ДАВАЙ СРАЗУ / ПО ДЕНЬГАМ»
     получается только обычным жадным переносом. */
  text-wrap: wrap;
  max-width: 9em;
  /* Ритм шапки общий для всех секций: бейдж → 40 → H2 → 24 → лид → 48 → контент */
  margin-block: calc(var(--s-6) + var(--s-2)) 0;
  /* В макете между строками 91.3 css при высоте заглавных 62.
     --lh-tight (1.02) рассчитан на шрифт с низкими заглавными, у Oswald
     они выше, поэтому тот же зазор даёт 1.3. */
  line-height: 1.3;
}

/* Кегль, интерлиньяж и мера — из .lead: подзаголовок секции один на весь
   сайт. Было 23.2px при снятой мере — самый крупный лид страницы. */
.price__lead {
  margin-block: var(--s-5) var(--s-5);
}

/* ---------- Карточка цены ---------- */

/* Поля карточки в макете неодинаковы: сверху 43, по бокам 46.5, снизу 34.

   Карточка была .card--flat — без тени, только контур. На экране принятия
   решения самый важный блок оказывался самым бесплотным: рядом с ним кнопка
   с брендовой тенью и полоса фактов, тоже плоская. --sh-lift — токен для
   приподнятых блоков; полоса фактов внизу получает обычную --sh-card, и две
   ступени тени выстраивают иерархию вместо прежнего «всё лежит на бумаге».
   Волосяная брендовая кромка вместо серой: карточка попадает в ту же отделку,
   что бейдж, плитки метрик и плашки-выводы. */
.price__card {
  padding: var(--s-7) var(--s-7) var(--s-6);
  border: 1px solid rgba(124, 59, 246, .14);
  box-shadow: var(--sh-lift);
  /* Карточка объявлена контейнером ради одной величины — потолка кегля цены
     (разбор у .price__now ниже). Больше container-type здесь ничего не меняет:
     абсолютно спозиционированного внутри карточки нет — единственный такой
     элемент секции, свечение кнопки .price__cta::before, лежит уже за ней;
     тень и кромка рисуются снаружи, содержимое не обрезается, а ширину
     контейнер не трогает — она и так приходит от колонки сетки. */
  container-type: inline-size;
}

/* Шапка карточки: метка и даты потока в одной строке.
   Даты идут строкой с меткой, а не под ней: строка свободна (метка
   «ИНТЕНСИВ» занимает 157px из 350 на 1440), а лишняя строка в самом
   верху отодвинула бы цену — главный объект экрана — вниз.

   Разгонять пару по краям карточки (justify-content: space-between)
   пробовали и отказались: «что» и «когда» — одна группа, а на широкой
   карточке выключка по краям разносила их на 287px (620px, одна колонка).
   Пространство внутри группы обязано быть меньше пространства вокруг неё,
   поэтому пара стоит слева одним блоком с зазором в одну ступень шкалы.

   Перенос настоящий, а не страховка: на 701-790 сетка уже двухколоночная,
   карточке достаётся 237px под содержимое, а паре нужно 240. Там даты
   встают под меткой с зазором 8px — та же группа, просто в две строки.
   На 375-700 и от 800 пара стоит в строку (замер: запас 45px на 375,
   57 на 900, 57 на 1440, 120 на 1920). */
.price__card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

/* Тише метки на ступень и серым: даты уточняют оффер, но спорить с ценой
   и кнопкой им нельзя — на этом экране всего один акцент. */
.price__card-dates {
  font-size: var(--fz-body);
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Цена и «вместо» стоят столбиком ----------

   Раньше они стояли в строку через вертикальную линейку, и строка не влезала
   в карточку никогда — дело не в узких экранах. Замер на 1280 (kz.html):
   под содержимое карточки 293px, а строке нужно 530 — число 310, два зазора
   по 48 и линейка. Чтобы «6 900 ₸» и «ВМЕСТО 52 900 ₸» встали рядом, числу
   осталось бы 73px при 95 положенных по шкале, то есть кегль около 24.
   Расширение экрана этого не лечит: число и карточка растут от одной и той же
   ширины окна, и заложенный разрыв просто едет вправо неизменным.

   Первая страница ломалась тем же механизмом, только тише: тогда на ней
   стояли доллары, и «ВМЕСТО $115» вылезало за край карточки на 26px
   с 720 по 1300 (замер tools/overflow.js). То есть правка нужна была обеим
   страницам, а не одной тенговой,
   и поломка не новая — её описывал ещё docs/audit-tech.md, пункт 1.

   Поэтому ряд стал столбиком: сверху цена, под ней «ВМЕСТО 52 900 ₸».
   Пара «сейчас — вместо» не разорвана — она осталась одной группой, просто
   группа теперь вертикальная, и порядок чтения тот же.

   flex-wrap отвергнут: решение о переносе принимает браузер по факту, а факт
   у двух валют разный — у короткой суммы вышла бы одна раскладка,
   у длинной другая,
   при том что страницы собираются из одних исходников. Плюс при переносе
   линейка становилась первым элементом второй строки: вертикальная черта
   слева от слова «ВМЕСТО», и погасить её нечем — состояние «перенеслось»
   в CSS не выражается.

   Линейка снята совсем, а не переведена в горизонтальную: на 24px ниже стоит
   шкала цены, и две горизонтальные линии подряд читаются как разметка
   таблицы. Цену от прежней цены и так разводят кегль, цвет и зачёркивание.
   Стоит заметить, что видно её всё равно не было: .divider--v задан width:1px
   без min-width, и флекс сжимал её в ноль ровно там, где строка ломалась
   (замер на 1280: ширина 0). Линия, которую видно только когда всё в порядке,
   не разделитель.

   Плата: карточка стала выше. Рост уходит в первую колонку сетки, но соседнюю
   всё-таки двигает — .price__box стоит grid-row: 1 / span 3 при
   align-self: center, то есть перецентровывается в выросшей сетке и опускается.
   Ореол .price__rings привязан к процентам высоты секции и потому слегка
   отстаёт от коробки. Ничего не обрезается и никуда не вылезает; если декор
   надо вернуть точно на ось коробки — это отдельная правка процентов
   в .price__rings. */
.price__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  margin-block: var(--s-5);
}

/* ---------- Кегль цены мерится карточкой, а не экраном ----------

   Столбик лечит строку, но не лечит само число: на 1190-1410 «6 900 ₸»
   вылезало из карточки в одиночку, без прежней цены рядом (замер: 22px).
   Причина в том, что --fz-price задан от ширины ОКНА, а карточка — доля
   сетки, и на границе раскладки их разносит скачком: на 1180 под содержимое
   карточки 427px, на 1181 уже 266 при том же кегле 87. Никакой другой
   коэффициент vw это не исправит — чинить надо скачок, а скачка vw не видит.
   Отсюда же и то, почему дефект не ловился глазами: он живёт узкой полосой
   сразу за границей раскладки, а на 1440 и 1920 его нет.

   Потолок берётся из самой карточки токеном --fz-price-cap (28cqi): 1cqi —
   процент ширины её содержимого. Разбор числа 28 и его привязки к длине
   строки цены — в css/tokens.css, рядом со шкалой. Числом здесь потолок
   стоять не может: в секциях у font-size разрешён только var(--fz-*).

   Фолбэк даёт @supports, а НЕ вторая строка font-size следом за первой.
   Пара объявлений подряд тут не спасает: в min() стоит var(), поэтому
   браузер без container queries принимает объявление при разборе и
   отбраковывает уже после подстановки — как invalid at computed-value time.
   Отката к предыдущей строке в этом случае нет, значение вычисляется
   в unset, а своего кегля у .price__now больше нигде нет: у .display
   font-size не задан, и цена унаследовала бы от body 16px — то есть стала бы
   мельче зачёркнутой цены под собой. @supports проверяет именно разбор,
   поэтому старый браузер в блок не заходит и остаётся на прежнем поведении. */
.price__now {
  font-size: var(--fz-price);
  color: var(--brand);
  line-height: 1;
}

@supports (font-size: 1cqi) {
  .price__now { font-size: min(var(--fz-price), var(--fz-price-cap)); }

}

/* «ВМЕСТО» и зачёркнутая цена теперь в строку, а не столбиком: сама пара уже
   уехала на второй ярус, и держать внутри неё ещё два яруса значило бы отдать
   под справку три яруса из четырёх. Выключка по базовой линии, а не по центру:
   метка и число разного кегля и обязаны стоять на одной линии, как в макете. */
.price__old-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.price__old-label {
  font-size: var(--fz-body);
  font-weight: 600;
  letter-spacing: var(--ls-caps-md);
  line-height: 1.2;
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
  color: var(--muted-2);
}

.price__old {
  font-family: var(--font-display);
  font-size: var(--fz-num-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--muted-2);
  text-decoration-thickness: 3px;
  text-decoration-color: var(--brand-light);
}

.price__scale {
  height: clamp(8px, .63vw, 12px);
  margin-bottom: var(--s-5);
  border-radius: var(--r-pill);
  background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .12);
}

.price__scale-fill {
  display: block;
  width: 13.04%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  box-shadow: var(--glow-brand);
}


.price__card-label {
  font-size: var(--fz-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
}

/* Линейка выше строки цены, но растягивать строку не должна.
   Не сплошная полоска, а линия, растворяющаяся к обоим концам: на высоте
   в полторы сотни пикселей ровный отрезок читается как обрезок таблицы. */
/* Пересчёт в другие валюты. Кегль на ступень меньше основной цены
   и цвет приглушённый: это справка, а не второе предложение. */
/* Плашка скидки была единственным контурным элементом на всём лендинге —
   двухпиксельная рамка на светлом фоне выглядела дешевле соседей.
   Теперь та же отделка, что у бейджей и плиток метрик: перелив, волосяная
   кромка, мягкая тень. Заливать её брендовым градиентом нельзя: рядом,
   в двух сантиметрах ниже, стоит главная кнопка, и второе плотное
   фиолетовое пятно отнимало бы у неё внимание. */
.price__discount {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: clamp(7px, .63vw, 12px) clamp(13px, 1.2vw, 23px);
  border: 1px solid rgba(124, 59, 246, .28);
  border-radius: var(--r-pill);
  background: var(--grad-soft);
  box-shadow: 0 1px 2px rgba(27, 22, 51, .04),
              0 8px 22px rgba(124, 59, 246, .14);
  color: var(--brand);
  font-size: var(--fz-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
}

/* Потолок кегля плашки. Стоит НИЖЕ самого правила, а не рядом с потолком цены:
   вес селекторов одинаковый (0,1,0), @supports его не поднимает, и выше по файлу
   правило проигрывало бы по порядку — проверено, вылет оставался тот же 18px.

   Плашка — inline-flex: ширину берёт от содержимого и карточку не спрашивает,
   поэтому на 1190-1340 выходила за её поле на 18px. Разбор и само число —
   в css/tokens.css, рядом со шкалой.

   Ниже 999 действует свой кегль (--fz-body, блок планшета в конце файла), и он
   обязан остаться главным — поэтому правило стоит выше того блока, а не после.

   Браузер без container queries сюда не заходит и получает плашку шире карточки
   в этой узкой полосе. Принято сознательно: он и так видит секцию иначе —
   subgrid, на котором стоит вёрстка сайта, появился в браузерах ПОЗЖЕ
   контейнерных запросов. */
@supports (font-size: 1cqi) {
  .price__discount { font-size: min(var(--fz-h3), var(--fz-price-badge-cap)); }
}

/* Молния в макете узкая и высокая: 15.5 x 31.6 css */
.price__discount .icon {
  width: clamp(13px, 1.15vw, 22px);
  height: clamp(18px, 1.65vw, 32px);
}

/* ---------- Обещание и кнопка ---------- */

.price__promise {
  margin-top: var(--s-6);
  font-size: var(--fz-h3);
  line-height: var(--lh-heading);
}

/* ---------- Кнопка ----------
   Это самая важная кнопка страницы после первого экрана, и на светлом фоне
   рядом с чёрной коробкой продукта одной брендовой тени ей не хватало.
   Под кнопку положено размытое пятно того же градиента — приём «свечение
   у акцентов» из docs/visual-language.md, тот же, что под акцентными
   кружками. Оно очень медленно дышит: 6 секунд на такт — движение на грани
   заметности, глаз ловит его боковым зрением и возвращается к кнопке.
   Пятно живёт на обёртке, а не на самой кнопке: у .btn--primary есть
   собственный фон, и псевдоэлемент внутри неё пришлось бы уводить
   за него отрицательным z-index. */

.price__cta {
  position: relative;
  margin-top: var(--s-4);
}

.price__cta::before {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: 0;
  border-radius: calc(var(--r-md) + 12px);
  background: var(--grad-brand);
  filter: blur(22px);
  opacity: .28;
  pointer-events: none;
  animation: price-aura 6s ease-in-out infinite alternate;
}

@keyframes price-aura {
  from { opacity: .20; transform: scale(.97); }
  to   { opacity: .40; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .price__cta::before { animation: none; opacity: .28; transform: none; }
}

/* На телефоне и планшете аура не дышит, а просто светит.
   Причина не вкусовая: из шести анимаций этих трёх секций price-aura
   единственная гоняет opacity и transform ПОВЕРХ filter: blur(22px) —
   то есть каждый кадр браузер пересобирает размытый слой размером
   с кнопку. На десктопе это незаметно, на телефоне это самый дорогой
   кадр экрана, а экран — тот, на котором человек платит.
   Свет остаётся: конечное значение то же .28, что и в состоянии покоя
   и в блоке prefers-reduced-motion. Гаснет только движение.

   Граница 999, а не 640: принятый десктоп начинается с 1000, и ниже него
   на странице нет ни одного устройства, которому это движение важнее
   плавной прокрутки. */
@media (max-width: 999px) {
  .price__cta::before { animation: none; opacity: .28; transform: none; }
}

/* Кнопка в макете во всю ширину карточки: 595x91 */
.price__btn {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: clamp(56px, 4.74vw, 91px);
  padding-inline: var(--s-5);
  gap: clamp(10px, .96vw, 18px);
  /* Кегль и трекинг подписи — общие для всех кнопок сайта (.btn в base.css).
     Было 27.1px против 16 у остальных кнопок и .01em трекинга на капсе. */
  font-size: var(--fz-lead);
  white-space: nowrap;
}

/* Отклика у кнопки здесь больше не объявлено, и это правка, а не пропуск.
   Подъём на 2px по наведению и просадка на 1px по нажатию переехали
   в base.css на .btn: раньше подъём был только у этой кнопки, и из
   двенадцати «Создать ИИ БРО» одна вела себя иначе, чем одиннадцать
   соседних. Числа не изменились — изменился адрес. */

.price__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 2.42vw, 46px);
  height: clamp(30px, 2.42vw, 46px);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--brand);
  flex: none;
}

.price__btn-icon .icon { width: 45%; height: 45%; }

/* Замена рукописной приписки из макета.
   В макете она в 3 строки шириной 323 css, стрелка слева смотрит на кнопку.
   Стрелка теперь своя, изогнутая (assets/icons/arrow-curve.svg): раньше
   тут стоял общий arrow-up-right, отражённый по горизонтали, — прямая
   стрелка на месте рисованной от руки читалась как чужая деталь.

   Курсив снят. Он был здесь единственным приёмом, отделявшим приписку
   от основного текста, и был поддельным: у Golos Text кириллического
   курсива нет, браузер наклонял прямое начертание. По своду (раздел
   «Курсив») в кириллице такой наклон читатель опознаёт сразу, а строить
   на нём смысловой акцент нельзя — акцент делают весом, цветом, размером.
   Роль приписки теперь несут рисованная стрелка на кнопку и приглушённый
   цвет: обе детали в макете и так были, курсив к ним ничего не добавлял. */
.price__hand {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin: 0;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--muted-2);
}

.price__hand .icon {
  width: clamp(20px, 1.72vw, 33px);
  height: clamp(20px, 1.72vw, 33px);
  margin-top: .15em;
  color: var(--brand);
}

/* Абзац про оплату и почту снят по правке заказчика — вместе с ним ушли
   правила .price__note.

   Подпись под кнопкой осталась одна и теперь идёт сразу за CTA, поэтому её
   верхний отступ вырос с 8 до 24px: в макете между низом кнопки и строкой
   «Мест мало» ровно этот зазор, а прежние 8px отсчитывались от снятого
   абзаца. Заодно строка выходит из-под свечения кнопки: аура .price__cta
   торчит на 12px ниже кнопки, при 8px подпись лежала бы прямо в ней. */
.price__small {
  margin-top: var(--s-5);
  font-size: var(--fz-body);
  /* Строка стоит внутри брендового свечения под кнопкой, и на этом фоне
     --muted-2 из .text-caption давал 4.27:1 при норме 4.5 (SC 1.4.3, AA).
     Ступень серого на одну темнее выводит на 5.8:1. */
  color: var(--muted);
}

/* ---------- Строка доверия ----------

   Экран принятия решения, и у кнопки должно стоять то, что снимает тревогу
   перед оплатой. Приём заказчика — значки платёжных систем под кнопкой, но
   формы оплаты на странице пока нет, поэтому в строке только проверяемые
   факты: оферта, чат после оплаты, поддержка (см. комментарий в разметке).

   Строка обязана оставаться тише кнопки и тише подписи «Мест мало»: кегль
   на ступень мельче, цвет --muted-2, ни фона, ни рамки, ни тени. Никаких
   плашек — «таких повторяющихся элементов уже много» (docs/visual-language.md).

   Значки серые, а не брендовые, намеренно: в двух сантиметрах выше стоит
   главная кнопка страницы, и три фиолетовых пятна под ней растащили бы
   единственный акцент экрана.

   Не сетка, а flex с переносом: на 1440 колонка цены выходит около 450px,
   три пункта в одну строку не встают и переносятся сами. Разделителей между
   пунктами нет — при переносе они повисают в конце строки. */

.price__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fz-caption);
  line-height: 1.35;
  /* 4.6:1 на общем фоне страницы — норма для мелкого текста выдержана */
  color: var(--muted-2);
}

.price__trust-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.price__trust .icon {
  width: clamp(15px, 1.04vw, 20px);
  height: clamp(15px, 1.04vw, 20px);
  flex: none;
}

/* Ссылки в строке не красим брендовым: подчёркивание уже говорит, что это
   ссылка, а фиолетовый здесь спорил бы с кнопкой. Цвет появляется только
   при наведении. */
/* Зона нажатия 24px по высоте (WCAG 2.5.8). Строка набрана 13-17px, сама
   ссылка выходила 18px — на телефоне в неё не попасть. Исключение стандарта
   «ссылка в потоке текста» здесь не работает: это три отдельных пункта списка,
   а не слова внутри абзаца. Растим не шрифт, а зону: inline-flex с min-height
   даёт 24px, при этом высота строки списка не меняется (gap между пунктами
   12px, запас есть) и подчёркивание остаётся на своём месте. */
.price__trust-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(114, 108, 135, .4);
  text-underline-offset: .18em;
  /* base.css переводит ссылке только цвет: без этой строки подчёркивание
     подставлялось рывком, а текст рядом ехал плавно — одна ссылка
     отзывалась двумя скоростями сразу. */
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

@media (hover: hover) {
  .price__trust-link:hover {
    color: var(--brand);
    text-decoration-color: currentColor;
  }
}

/* ---------- Слот под платёжные значки ----------
   Разметка в 12-price.html пока закрыта комментарием: значки платёжных систем
   обещают форму оплаты, которой на странице нет. Стили лежат готовыми, чтобы
   включение слота свелось к снятию комментария. Строка встаёт под строкой
   доверия и набрана ещё тише: это подпись к способу оплаты, а не аргумент. */

.price__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fz-caption);
  line-height: 1.35;
  color: var(--muted-2);
}

.price__pay-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.price__pay .icon {
  width: clamp(18px, 1.25vw, 24px);
  height: clamp(18px, 1.25vw, 24px);
  flex: none;
}

/* ---------- Что входит ---------- */

.price__includes-title {
  margin-bottom: var(--s-4);
  font-size: var(--fz-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
}

.price__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.price__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.08vw, 21px);
  padding-block: var(--s-3);
  font-size: var(--fz-body);
  line-height: 1.35;
}

.price__item + .price__item { border-top: 1px solid var(--line); }

.price__check {
  width: clamp(22px, 1.72vw, 33px);
  height: clamp(22px, 1.72vw, 33px);
  margin-top: .05em;
  color: var(--brand);
  flex: none;
}

/* ---------- Коробка ---------- */

.price__box { display: flex; justify-content: center; }

.price__box-img { width: 100%; }

/* ---------- Нижние плашки ---------- */

/* Полоса была .card--flat, то есть без тени, — а карточка цены над ней
   теперь приподнята. Соседи с тенью и без читаются как блоки из разных
   систем (docs/visual-language.md). Полосе достаётся базовая --sh-card:
   она лежит на поверхности, карточка цены над ней приподнята — разница
   в тенях и есть иерархия. */
.price__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--s-5) 0 0;
  padding: var(--s-6) 0;
  list-style: none;
}

.price__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-inline: var(--s-5);
}

.price__fact + .price__fact { border-left: 1px solid var(--line); }

/* Иконка живёт в кружке, как во всех остальных секциях: раньше она была
   единственной «голой» на лендинге. Габарит кружка равен прежнему размеру
   иконки (80 css в макете), сама иконка — 0.46 от кружка, как в base.css.
   Заливка кружка — перелив с волосяной кромкой вместо плоского --brand-soft.
   Акцентный градиент им не даём: четыре плотных фиолетовых кружка в ряд
   спорили бы с кнопкой, а эта полоса — справочная. */
.price__fact-icon {
  width: clamp(44px, 4.17vw, 80px);
  height: clamp(44px, 4.17vw, 80px);
  background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .14);
}

.price__fact-icon .icon {
  width: clamp(20px, 1.93vw, 37px);
  height: clamp(20px, 1.93vw, 37px);
}

/* Переносы у подписи гасятся здесь, а не в сквозном слое.
   В base.css в списке «что не переносится» стоит .price__feature-note —
   класса с таким именем в разметке этой секции нет ни одного (проверено
   поиском по sections/ и index.html), поэтому правило не срабатывало,
   и на 360 подпись выходила «минимум теории, макси-мум пользы»
   (замер tools/d-tap.js: перенесённое слово «максимум» в .price__fact-text).
   Роль ровно та же, ради которой список в base.css и заведён: подпись
   в три-четыре слова, ни одно из которых не выигрывает от разрыва,
   а рваное короткое слово читается браком. Место правила — рядом
   со своей ролью, как и сказано в комментарии базы. */
.price__fact-text {
  display: block;
  font-size: var(--fz-small);
  line-height: var(--lh-body);
  color: var(--muted);
  -webkit-hyphens: none;
  hyphens: none;
}

/* Заголовок держим в одну строку. «РЕАЛЬНЫЙ ПРОЕКТ» ломался на две,
   и описания в четырёх ячейках стартовали с разной высоты. */
.price__fact-title {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-caps-md);
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
  white-space: nowrap;
  color: var(--ink);
}

/* ---------- Адаптив ---------- */

/* Коробка — иллюстрация, поэтому первой уходит вниз, а текст остаётся в две колонки */
@media (max-width: 1180px) {
  .price__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s-6);
  }

  /* Ряды задаём явно: на автоматической раскладке приписка встаёт над списком
     и рвёт вторую колонку пополам. */
  .price__head     { grid-column: 1 / -1; grid-row: 1; }
  .price__offer    { grid-column: 1;      grid-row: 2 / span 2; }
  .price__includes { grid-column: 2;      grid-row: 2; }
  .price__hand     { grid-column: 2;      grid-row: 3; }
  .price__box      { grid-column: 1 / -1; grid-row: 4; align-self: start; }

  .price__box-img { max-width: 420px; }

  /* Коробка уходит в отдельный ряд под текстом и встаёт по центру — ореол
     едет за ней. Вертикаль задана через центр: середина круга садится
     на 68.5% высоты секции, там центр коробки на всём диапазоне
     (замер: 67.0% на 375, 67.7% на 768, 69.2% на 999, 69.8% на 1180).
     Размер тот же, что у ореолов экранов 3, 4 и 9 в одноколоночной
     раскладке: одинаковая ситуация — одинаковый ореол. */
  .price__rings {
    --rings-size: min(88vw, 560px);
    width: var(--rings-size);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: calc(68.5% - var(--rings-size) / 2);
  }
}

/* Самая узкая полоса из четырёх плашек — 1181-1400: тут «РЕАЛЬНЫЙ ПРОЕКТ»
   почти упирается в край ячейки. Ужимаем поля на шаг шкалы. */
@media (min-width: 1181px) and (max-width: 1400px) {
  .price__fact { padding-inline: var(--s-4); }
}

/* Порог тот же, что у самой сетки секции: ниже 1180 полоса из четырёх плашек
   становится настолько узкой, что «РЕАЛЬНЫЙ ПРОЕКТ» перестаёт помещаться
   в строку. Раньше порог стоял на 1000 и на 1024-1180 плашки были впритык. */
@media (max-width: 1180px) {
  .price__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .price__fact { padding: var(--s-5) var(--s-6); gap: var(--s-5); }
  .price__fact + .price__fact { border-left: 0; }
  .price__fact:nth-child(2n) { border-left: 1px solid var(--line); }
  .price__fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Самая узкая полоса из ДВУХ плашек — 621-700: шов между «две колонки»
   (блок ≤1180 выше) и «одна» (блок ≤620 ниже). Беда та же, что у полосы
   из четырёх на 1181-1400, и лечится тем же — поля на ступень вниз.

   Замер (index.html и kz.html дают одно и то же — цен в полосе нет):
   на 640 ячейка 296px, из неё 32+32 поля, 44 кружок и 24 зазор — под
   подпись остаётся 164. «РЕАЛЬНЫЙ ПРОЕКТ» в одну строку занимает 175:
   заголовку задан white-space: nowrap, значит это и есть min-content
   текстовой колонки, а она флекс-элемент без min-width: 0 — ужиматься
   нечему. Подпись выходит за правое поле ячейки на 21.4px при 621,
   11.9 при 640, 6.9 при 650, 1.9 при 660; чисто только с 664.
   Вторая плашка стоит в правой колонке, поэтому вылезает не к соседу,
   а за кромку самой карточки.

   Поля 32 → 24 и зазор 24 → 16 — не новая метрика: этими же числами
   полоса живёт ниже 620, и там же сказано, почему 24 по горизонтали
   резать дальше нельзя (значок прижмётся к кромке). Под подпись
   становится 178.5 в худшей точке диапазона против нужных 175.
   Бонусом на 621-629 уходит третья строка у «под задачи рынка»:
   высота полосы 271 → 247.

   Верхняя граница 700, а не измеренные 663. 663 — число из метрики
   шрифта, в вёрстке ему взяться неоткуда. 700 — собственный порог
   секции, там .price__grid уже становится одноколоночным. И на 664-700
   запас под тем же nowrap всего 1-19px (176 против 175 на 664, 193.5
   против 192.5 на 699) — то самое «почти упирается в край ячейки»,
   ради которого написано правило 1181-1400.

   Нижняя граница 621, а не «просто ≤700»: правило нужно только там,
   где колонок две. Порог 620 не сдвигаем — к нему привязан sizes
   у .price__box-img, разойдутся числа и srcset начнёт врать.

   padding-inline, а не padding: вертикальные 24 из блока ≤1180 остаются
   нетронутыми, высота ряда прежняя. */
@media (min-width: 621px) and (max-width: 700px) {
  .price__fact { padding-inline: var(--s-5); gap: var(--s-4); }
}



@media (max-width: 700px) {
  /* Ряды в одну колонку — это уже не «колонки рядом», а пять блоков
     столбиком, и 32 между ними на экране шириной 327 читаются тем же
     воздухом, что 48 на десктопе. 24 — ступень вниз; между секциями
     по-прежнему 96, так что группировка не ломается. */
  .price__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }

  /* grid-row обязательно сбросить: явные ряды из правила выше в одну колонку
     кладут «предложение» и «что входит» в одну ячейку — блоки наезжают. */
  .price__head,
  .price__offer,
  .price__includes,
  .price__hand,
  .price__box { grid-column: 1; grid-row: auto; }

  /* ---------- Порядок блоков на телефоне ----------

     ПРАВКА ЗАКАЗЧИКА: «тут ты макет унёс куда-то вниз, то есть цена в одном
     месте, макет вообще в другом. Макет и цена — это всё должно быть видно
     на одном экране. Должно быть так: „Бро, давай сразу по деньгам“, потом
     перечисление, вся информация про интенсив, макет, ля-ля-ля, и потом
     в конце вот эта уже белая красивая плашка с ценой. И потом уже под ней
     кнопка. И все подписи».

     Было (порядок разметки, он же порядок трёх- и двухколоночной сетки):
     заголовок → карточка с ценой и кнопкой → приписка → что входит → коробка.
     То есть цена стояла первой, а коробка — в 900px под ней: на 375 между
     ними полтора экрана, и «показать продукт» с «назвать цену» не встречались.

     Стало: заголовок → что входит → приписка → коробка → карточка с ценой,
     кнопка и подписи под ней. Коробка (294px) и карточка с ценой (281px)
     стоят вплотную, через один зазор 24 — 599px из 667 на iPhone SE, то есть
     макет и цена помещаются в одно поле зрения, как и просил заказчик.

     Сделано свойством order, а не перестановкой разметки: разметку держат
     десктопные ряды сетки (grid-row в блоках выше), и трогать её значило бы
     переписывать принятый десктоп. Порядок обхода с клавиатуры при этом
     не ломается: фокусируемые элементы на экране есть только внутри
     .price__offer (кнопка, оферта, поддержка), а он в обоих порядках идёт
     последним из своих соседей — в «что входит», приписке и коробке
     нажимать нечего. */
  .price__head     { order: 1; }
  .price__includes { order: 2; }
  .price__hand     { order: 3; }
  .price__box      { order: 4; }
  .price__offer    { order: 5; }

  .price__title { max-width: none; }

  /* ---------- Блок решения плотнее ----------

     Четыре зазора внутри одной группы «цена → обещание → кнопка» сжаты
     на ступень шкалы, каждая ступень стоит ровно одну строку:
       лид → карточка   24 + 32 (row-gap) → остаётся 32,
       строка цены      24/24 → 16/16,
       шкала → скидка   24 → 16,
       карточка → обещание 32 → 24.
     Итого −64px на блок. Закон близости не нарушается: внутри карточки
     расстояния стали 16, между карточкой и обещанием 24, между секциями 96 —
     три уровня по-прежнему растут.

     Раньше эти 64px были нужны, чтобы кнопка попадала в первый экран секции.
     После перестановки (см. order выше) кнопка стоит в конце по прямому
     указанию заказчика, и в первый экран она не метит — но сама плотность
     блока правильная и остаётся: она собирает цену, обещание и кнопку
     в одну группу. */
  .price__lead { margin-bottom: 0; }
  .price__promise { margin-top: var(--s-5); }

  /* Стрелка у приписки рисованная и направленная: в файле она идёт из
     правого верхнего угла в левый нижний, остриём вниз-влево. На двух
     и трёх колонках приписка стоит ПОД списком «что входит», а кнопка —
     слева и ниже, поэтому остриё смотрит ровно на кнопку, как в макете.

     Отражение по вертикали (scaleY(-1)) отсюда снято. Оно стояло, пока
     приписка на телефоне шла СРАЗУ ПОСЛЕ кнопки: остриё смотрело в пустое
     поле, и его разворачивали вверх. В новом порядке приписка стоит ВЫШЕ
     коробки и карточки с ценой, то есть остриё вниз-влево снова показывает
     на то, что идёт следом, — разворачивать нечего. */
}

/* ---------- Плашка скидки на узкой карточке ----------
   Ступень кегля вниз на всём, что ниже принятого десктопа.

   Замер до правки (ширина карточки внутри полей / число строк в плашке
   при --fz-h3 = 19px): 320 → 240px и ТРИ строки, 360…430 → 264…334px
   и две, 768 и 834 → 232px и снова ТРИ. То есть на самом узком телефоне
   и на обоих планшетах (там карточка стоит в колонке) таблетка с радиусом
   --r-pill несла три строки текста при ширине во всю карточку. Радиус-пилюля
   описывает ОДНУ короткую строку; на трёх это уже не таблетка, а плашка
   со случайно скруглёнными углами, и рядом с ней ровно та же беда,
   от которой уходили на экране 6, — форма обещает не то, что внутри.

   Кегль --fz-body — соседняя ступень закрытой шкалы, ниже не опускаемся.
   Трекинг переезжает на --ls-caps-md: по комментарию в tokens.css это
   ступень для капса 16–24px, а --ls-caps-lg рассчитан на 24+.
   На десктопе (от 1000px) не меняется ничего: карточка там 597px,
   строка одна, экран принят. */
@media (max-width: 999px) {
  .price__discount {
    font-size: var(--fz-body);
    letter-spacing: var(--ls-caps-md);
  }

  /* Поля карточки на планшете. Макетные 48 сняты линейкой с карточки
     шириной 597px — там это 16% ширины. На 768 и 834 та же карточка стоит
     в колонке 328 и 361, и 48 с каждой стороны съедали 29% и 27%:
     под содержимое оставалось 232 и 265px, то есть карточка платила полями
     больше, чем текстом. Именно из-за этого на 768 плашка скидки уходила
     в три строки при двух на соседних ширинах.
     32 — ступень шкалы вниз, и она же ставит планшет ровно между телефоном
     (24 ниже 620) и десктопом (48 от 1000): три ступени под три класса
     устройств, как у --container-pad и --section-y в tokens.css. */
  .price__card { padding: var(--s-6) var(--s-6) var(--s-5); }
}

@media (max-width: 620px) {
  .price__card { padding: var(--s-5); }

  .price__facts { grid-template-columns: minmax(0, 1fr); }
  /* Поля ячейки на ступень вниз по вертикали. Полоса фактов — справочная
     приписка под коробкой, а не карточка: 24 сверху и снизу вокруг двух
     строк текста давали 472px на четыре факта, то есть 0,7 экрана телефона
     на четыре короткие строки. По горизонтали 24 остаются — это поле
     карточки, и резать его значило бы прижать значок к кромке.
     Зазор «значок → текст» 24 → 16 по той же причине, и он же возвращает
     подписи 8px ширины: у двух фактов из четырёх строка «под задачи рынка»
     и «максимум пользы» переставала быть третьей. */
  .price__fact { padding: var(--s-4) var(--s-5); gap: var(--s-4); }
  .price__fact:nth-child(2n) { border-left: 0; }
  .price__fact + .price__fact { border-top: 1px solid var(--line); }

  /* Коробка. Замер до правки: 327×400 на 375, то есть 0,6 экрана под
     неподвижную картинку — больше, чем занимает вся карточка с ценой
     и кнопкой (281). Объект нужный: это единственный «продукт», который
     можно показать. Но показывает он себя целиком и в 240px: надпись
     «ИИ БРО» на боковине читается, бейдж «Интенсив» читается, силуэт
     робота читается. Проверено снимком, а не арифметикой.
     240×294 вместо 327×400 — минус 106px и минус те самые прозрачные
     поля вокруг коробки, из которых складывался «пустой ход» перед
     полосой фактов.
     Размер файла при этом не меняется: srcset отдаёт ту же ступень 660w
     (240 css × DPR 2 = 480, × DPR 3 = 720 — соседние кандидаты), а sizes
     ниже 360 и так считает по ширине экрана. Перерасход байтов был
     и остаётся заботой srcset, а не этого правила. */
  .price__box-img { max-width: 240px; }
}

/* ---------- Телефон боком ----------

   Замер до правки (852×393): шапка занимает 302px из 393 — 77% экрана,
   от карточки с ценой видно 59px, то есть верхнюю кромку и половину слова
   «ИНТЕНСИВ». Экран решения открывается заголовком «Бро, давай сразу
   по деньгам» и ничем больше.

   Правится тем же, чем и в портрете, только жёстче: отбивки шапки вдвое
   (24 → 12 над заголовком, 24 → 12 над лидом, 24 → 0 под ним) и ряд сетки
   24 вместо 32. Итого −60px, карточка входит в экран на 119px — видны
   метка, даты и строка цены целиком.

   Селектор `.badge + .price__title`, а не класс: отбивку метки в base.css
   задаёт `.badge + :is(h1, h2, h3, .display)` со специфичностью 0-2-0.

   Кегли здесь не трогаются: они сквозные (--fz-h2, --fz-lead), их ступень
   под альбомную ориентацию — работа для tokens.css, а не для секции. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .badge + .price__title { margin-block-start: var(--s-3); }
  .price__lead { margin-block: var(--s-3) 0; }
  .price__grid { row-gap: var(--s-5); }
  .price__promise { margin-top: var(--s-5); }

  /* ---------- Тот же порядок, что и в портрете ----------

     Правка заказчика про порядок блоков («макет и цена должны быть видны
     на одном экране») сделана в блоке ≤700, а телефон боком туда не попадает:
     там ширина 844-932 и работает двухколоночная раскладка от 1180, где
     карточка с ценой стоит слева вверху, а коробка — отдельным рядом под
     всем текстом. То есть при повороте телефона возвращалась ровно та беда,
     которую правка снимает.

     Одну колонку тут делать нечем: на 852 она дала бы блоки во всю ширину
     и секцию в две с лишним высоты окна. Поэтому порядок собран колонками:
     слева сверху вниз «что входит» → приписка → карточка с ценой и кнопкой,
     справа во всю высоту — коробка. Последовательность чтения та же, что
     просил заказчик, а макет и цена стоят рядом и видны разом. */
  .price__includes { grid-column: 1; grid-row: 2; }
  .price__hand     { grid-column: 1; grid-row: 3; }
  .price__offer    { grid-column: 1; grid-row: 4; }
  .price__box      { grid-column: 2; grid-row: 2 / span 3; align-self: center; }

  /* Ореол едет за коробкой: она вернулась в правую колонку, значит и кольца
     возвращаются туда же (docs/visual-language.md — «раскладка меняется,
     узор едет за объектом»). Центрирование по левому краю секции, которое
     стоит в блоке ≤1180, здесь снимается. */
     Числа сняты замером (tools/_iv-geom.js land): коробка занимает 454..907
     по вертикали при высоте секции 1457, то есть её центр на 47%; по
     горизонтали она стоит 446..790 при ширине окна 852, центр 618. Круг
     500px с прижимом вправо даёт 352..852 и центр 602 — ореол обнимает
     фигуру и до кромок секции не достаёт (430 сверху, 527 снизу). */
  .price__rings {
    --rings-size: min(60vw, 500px);
    width: var(--rings-size);
    left: auto;
    right: 0;
    transform: none;
    top: calc(47% - var(--rings-size) / 2);
  }
}


/* ===========================================================================
   ВАЛЮТНОГО ФОРКА В СЕКЦИИ БОЛЬШЕ НЕТ
   --------------------------------------------------------------------------
   Здесь стоял @media (max-width: 560px), который на тенговой странице ужимал
   строку цены своим кеглем и своим зазором: «6 900 ₸» вдвое длиннее
   тогдашних «$15» и в строку не помещалось.

   Причина ушла вместе со строкой — цена и «вместо» стоят столбиком, и числу
   на телефоне хватает места с запасом вдвое. Форк снят, а не оставлен
   «на всякий случай»: он давал тенге 41px против 48 у второй страницы
   на одном и том же телефоне, то есть одна роль звучала двумя громкостями —
   ровно то, против чего написана шкала в css/tokens.css.

   Селекторов [data-currency] в этом файле теперь нет ни одного, и сам
   атрибут снят с секции в разметке — читать его стало некому. Это
   проверяемое условие: index.html и kz.html обязаны отличаться только
   подставленной ценой. У калькулятора форк остался и он живой — там
   от валюты зависят ширина бегунка и кегль результата.
   ========================================================================== */