/* ------------------------------------------------------------------
   СЕКЦИЯ ВОПРОСОВ · написана ПО ЭТАЛОНУ, а не собрана зеркалом кита.

   Решение владельца 07.09.2026: пакета Claude Design у этой секции нет,
   вёрстка снимается прямо с эталона. Прецедент в дереве - секция
   контактов, выведенная из цепочки зеркал тем же решением.

   Цена названа вслух и записана долгом: `sc_adopt_radius()` этот файл
   не видит, сверки «напечатанный класс есть в ките» у него нет, и
   расхождение с эталоном ловится только замером. Числа ниже сняты в
   живом редакторе эталона 07.09.2026; условия съёма у каждого -
   docs/konkurent/voprosy-zamer.md.

   Раскладок две, и они вариации ОДНОГО набора эталона:
     top   - шапка сверху по центру, лента 768 под ней
     side  - шапка слева, лента справа, две равные колонки

   RTL: только логические свойства, физических нет ни одного.
   ------------------------------------------------------------------ */

/*
 * КОНТЕЙНЕР ОБЪЯВЛЯЕТСЯ ЗДЕСЬ ЖЕ, И ЭТО НЕ ЛИШНЯЯ КОПИЯ.
 *
 * Весь масштаб этой секции считается в `cqi` - процентах ширины
 * КОНТЕЙНЕРА. Если контейнера над секцией не окажется, `cqi` по правилам
 * CSS молча становится процентом ОКНА: числа останутся правдоподобными и
 * разойдутся ровно на планшете - это класс 6 свода грабель («замер в
 * неверных условиях даёт правдоподобные числа»).
 *
 * Сегодня `.ls-w` объявляют контейнером четыре соседних кита (hero,
 * offer, stats, testimonials), и все четыре подключаются безусловно той
 * же цепочкой, что этот файл. То есть контейнер есть - но держится он на
 * ЧУЖОМ файле, который никто не обязан подключать завтра. Своя строка
 * стоит ноль и снимает зависимость; значение то же самое, спорить двум
 * объявлениям не о чем.
 */
.ls-w {
  container-type: inline-size;
  container-name: ls;
}

.ls-faq {
  /*
   * ПЛАВНАЯ ЕДИНИЦА ОТСТУПА - ГЛАВНОЕ, ЧТО ВЗЯТО У ЭТАЛОНА.
   *
   * У него на корне секции объявлено ровно это (снято в режиме Preview
   * 07.09.2026), и все отступы кратны единице: поле секции - двадцать
   * единиц, зазор шапки - четыре, поле складки - шесть.
   *
   * Развёрнутая формула: 0.2011rem = 3.2176px, и она догоняет 0.25rem
   * при бумаге 360, а 0.375rem - при 1280. То есть единица равна 4px на
   * узкой бумаге, 6px на широкой и едет ПЛАВНО между ними. Замер трёх
   * ширин это подтвердил: бумага 1482/753/433 дала поле секции
   * 120/97.67/67.
   *
   * ЗАЧЕМ ТАК, А НЕ ЧИСЛАМИ. Прежняя редакция этого файла писала
   * 120/72/36/24 и переключала их ступенькой в контейнерном запросе. На
   * десктопе она совпадала с эталоном, а между порогами расходилась - и
   * заметнее всего ровно на планшете, то есть там, где сверять труднее
   * всего.
   */
  --ls-faq-unit: clamp(.25rem, .2011rem + .2174cqi, .375rem);

  /*
   * МЕРЫ ШИРИНЫ ПЛАВНЫМИ НЕ ЯВЛЯЮТСЯ, И ЭТО ТОЖЕ ЗАМЕР, А НЕ ЗАБЫВЧИВОСТЬ.
   * У эталона предел секции и поле по бокам объявлены в rem
   * (`--section-max-width: 1536px`, `--section-gutter: 1.5rem`), а меры
   * блоков - ступени его шкалы ширин (576 и 768). Их единица не трогает:
   * плавной у него объявлена ШКАЛА ОТСТУПОВ, а не всё подряд.
   */
  --ls-faq-max: 1536px;
  --ls-faq-gut: 24px;
  --ls-faq-head-max: 576px;
  --ls-faq-list-max: 768px;

  /*
   * ОТСТУПЫ - ТОЛЬКО МНОЖИТЕЛЬ НА ЕДИНИЦУ. Справа от каждого - что это
   * даёт на бумаге 1482, где единица упёрлась в потолок 6px, то есть
   * ровно то, что снято у эталона.
   */
  --ls-faq-pad: calc(20 * var(--ls-faq-unit));         /* 120 */
  --ls-faq-gap: calc(12 * var(--ls-faq-unit));         /*  72 */
  --ls-faq-head-gap: calc(4 * var(--ls-faq-unit));     /*  24 */
  --ls-faq-eyebrow-gap: calc(3 * var(--ls-faq-unit));  /*  18 */
  --ls-faq-item-pad: calc(6 * var(--ls-faq-unit));     /*  36 */
  --ls-faq-item-gap: calc(4 * var(--ls-faq-unit));     /*  24 */
  --ls-faq-mark: calc(4 * var(--ls-faq-unit));         /*  24 */
  --ls-faq-answer-pad: calc(6 * var(--ls-faq-unit));   /*  36 */
  --ls-faq-invite-pad: calc(6 * var(--ls-faq-unit));   /*  36 */

  /*
   * ТИПОГРАФИКА У ЭТАЛОНА ТОЖЕ ПЛАВНАЯ, И У КАЖДОГО УЗЛА СВОЯ ФОРМУЛА.
   * Две сняты дословно и перенесены знак в знак - заголовок и вопрос;
   * обе идут от той же пары порогов 360 и 1280, что и единица отступа.
   *
   * ОТВЕТ И АБЗАЦ ШАПКИ ИДУТ ФОРМУЛОЙ ВОПРОСА, И ЭТО ВЫВОД, А НЕ ЗАМЕР:
   * у эталона все три на широкой бумаге равны 20/28, а своя формула
   * снята только у вопроса. Разойдётся - будет видно на узкой бумаге, и
   * чинить надо здесь.
   */
  --ls-faq-title: clamp(2.4883rem, 1.9693rem + 2.3067cqi, 3.8147rem);
  --ls-faq-title-lh: 1.15;
  --ls-faq-q: clamp(1rem, .9022rem + .4348cqi, 1.25rem);
  --ls-faq-q-lh: 1.4;
  --ls-faq-lede: var(--ls-faq-q);

  /*
   * НАДНАДПИСЬ ОСТАЁТСЯ ЧИСЛОМ - её формулы у эталона не снято, а
   * вывести её из соседних нечем: шкала кеглей у него на широкой бумаге
   * идёт с шагом 1.25, на узкой с 1.2, и мелкая ступень при таком
   * пересчёте выходит БОЛЬШЕ своего потолка. Число, взятое на глаз, и
   * число, взятое замером, выглядят одинаково - поэтому здесь замер, а
   * пробел объявлен вслух.
   */
  --ls-faq-label: 12.8px;
  --ls-faq-label-lh: 1.4;

  /* Роли палитры. Линия у эталона идёт РОЛЬЮ ЛИНИИ, а не чернилами:
     на плоскости #F9F9F9 она rgb(50,52,61), то есть отдельный тон. */
  --ls-faq-ink: var(--ls-ink, #23201c);
  --ls-faq-muted: var(--ls-muted, #6d675f);
  --ls-faq-line: var(--ls-line, rgba(0, 0, 0, .14));

  position: relative;
  padding-block: var(--ls-faq-pad);
  background: var(--ls-paper, #f7f4ef);
  color: var(--ls-faq-ink);
}

.ls-faq__wrap {
  box-sizing: border-box;
  max-inline-size: var(--ls-faq-max);
  margin-inline: auto;
  padding-inline: var(--ls-faq-gut);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ls-faq-gap);
}

/* ------------------------------------------------------------------
   РАСКЛАДКА `side` · шапка слева, лента справа.

   ДВЕ КОЛОНКИ - СОСТОЯНИЕ ШИРОКОЙ БУМАГИ, А НЕ УМОЛЧАНИЕ. Снято с
   классов эталона 08.09.2026: у него это `grid-cols-1
   @desktop:grid-cols-2`, то есть одна колонка везде и две только на
   бумаге ШИРЕ 1280. Поэтому база здесь одноколоночная, а вторая колонка
   приезжает ниже, в ветке широкой бумаги; прежняя редакция делала
   наоборот и держала две колонки до самых 700 точек.

   Замер эталона на бумаге 1482: колонки по 681 при зазоре 72, шапка
   остаётся мерой 576 ВНУТРИ своей колонки и выравнивается по началу
   строки, а не по центру.
   ------------------------------------------------------------------ */
/*
 * МЕРУ ЧТЕНИЯ СНИМАЕТ НАБОР, А НЕ ПРИЗНАК ШАПКИ - и это снято с классов
 * эталона 08.09.2026. У его двухколоночных наборов лента объявлена без
 * `max-w` вовсе, а у второй вариации первого набора она СОХРАНЯЕТ
 * `max-w-3xl`. Правило по признаку `data-head="side"` сняло бы меру у всех
 * троих разом, и вариация разъехалась бы с эталоном на широкой бумаге.
 */
.ls-faq[data-set="A2"] .ls-faq__list,
.ls-faq[data-set="A3"] .ls-faq__list {
  max-inline-size: none;
}

/* ------------------------------------------------------------------
   ЗАГОЛОВОЧНЫЙ БЛОК
   ------------------------------------------------------------------ */
.ls-faq__head {
  inline-size: 100%;
  max-inline-size: var(--ls-faq-head-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ls-faq-head-gap);
  text-align: center;
}

/*
 * НАДНАДПИСЬ НАБРАНА ПРОПИСНЫМИ В ДАННЫХ, А НЕ ПРЕВРАЩЕНА СТИЛЕМ.
 * Замерено у эталона: `text-transform: none`, а в разметке уже стоит
 * «COMMON QUESTIONS». Поставь мы `uppercase` - строка, набранная
 * строчными, выглядела бы у нас иначе, чем у него.
 */
.ls-faq__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ls-faq-eyebrow-gap);
  font-size: var(--ls-faq-label);
  line-height: var(--ls-faq-label-lh);
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--ls-faq-ink);
}

/* Черта справа от слова - замер эталона: 50 точек в одну линию. Числом,
   а не единицами: 50 на неё не делится, и подгонять замер под красивый
   множитель значило бы переписать его. */
.ls-faq__eyebrow::after {
  content: "";
  flex: 0 0 50px;
  block-size: 1px;
  background: currentColor;
}

/*
 * ЗАГОЛОВОК ЕДЕТ ПО БУМАГЕ, А НЕ ПО ОКНУ. Прежняя редакция считала его
 * как `clamp(34px, 3.8vw, 61px)`, то есть по ширине ОКНА - при узком
 * холсте в широком окне заголовок оставался десктопным, а правило 4
 * свода секций говорит ровно обратное: узость решает бумага.
 */
.ls-faq__title {
  margin: 0;
  font-family: var(--ls-head-face, inherit);
  font-size: var(--ls-faq-title);
  line-height: var(--ls-faq-title-lh);
  font-weight: 600;
  letter-spacing: -.02em;
}

.ls-faq__lede {
  margin: 0;
  font-size: var(--ls-faq-lede);
  line-height: var(--ls-faq-q-lh);
  color: var(--ls-faq-muted);
}

/* ------------------------------------------------------------------
   ЛЕНТА ВОПРОСОВ
   ------------------------------------------------------------------ */
.ls-faq__list {
  inline-size: 100%;
  max-inline-size: var(--ls-faq-list-max);
}

/*
 * РАЗДЕЛИТЕЛЬ - ГРАНИЦА СВЕРХУ У КАЖДОГО ПУНКТА, ВКЛЮЧАЯ ПЕРВЫЙ.
 * Замер эталона: линий семь при семи пунктах, то есть линия стоит НАД
 * каждым, а не между ними. У него это отдельный узел `div.w-full`
 * высотой 0.994; повторить узлом нельзя - первым ребёнком `details`
 * обязан стоять `summary`, - и разница на экране нулевая.
 */
.ls-faq__item {
  border-block-start: 1px solid var(--ls-faq-line);
}

.ls-faq__q {
  display: flex;
  align-items: center;
  gap: var(--ls-faq-item-gap);
  padding-block: var(--ls-faq-item-pad);
  cursor: pointer;
  list-style: none;
  font-size: var(--ls-faq-q);
  line-height: var(--ls-faq-q-lh);
  font-weight: 600;
  transition: color .2s;
}

/*
 * ТРЕУГОЛЬНИК БРАУЗЕРА СНИМАЕТСЯ ДВУМЯ СПОСОБАМИ, И НУЖНЫ ОБА.
 * `list-style: none` выше закрывает Chrome и Firefox, `::-webkit-details-marker`
 * - Safari, который его игнорирует. Без второго рядом с нашим значком
 * стоял бы чужой.
 */
.ls-faq__q::-webkit-details-marker {
  display: none;
}

.ls-faq__qt {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/*
 * ЗНАЧОК НАРИСОВАН ГРАНИЦАМИ, А НЕ ШРИФТОМ И НЕ КАРТИНКОЙ. У темы
 * клиентских сайтов шрифта значков нет вовсе - записанная грабля: там
 * лигатура печатается СЛОВОМ. Поворот на 45 градусов даёт стрелку вниз,
 * на 225 - вверх.
 *
 * ВНУТРЕННОСТИ ЗНАЧКА - ДОЛИ КАДРА, А НЕ ЧИСЛА: кадр теперь плавный, и
 * числа 7/6/10, снятые при кадре 24, на узкой бумаге вылезли бы за него.
 *
 * ТОЛЩИНА ЛИНИИ ОСТАЁТСЯ ЧИСЛОМ, И ЭТО ОБЪЯВЛЕННОЕ РАСХОЖДЕНИЕ С ЭТАЛОНОМ.
 * У него значок - SVG, и штрих сжимается вместе с кадром непрерывно. Мы
 * рисуем границами, а БРАУЗЕР ОКРУГЛЯЕТ ТОЛЩИНУ ГРАНИЦЫ ВНИЗ ДО ЦЕЛОЙ
 * ТОЧКИ: попытка сделать её плавной (`max(1.5px, .1em)`) замерена
 * 07.09.2026 - на бумаге 375 получилась РОВНО одна точка вместо 1.6, то
 * есть стрелка вышла бледнее эталонной, а не точнее. Между одной и двумя
 * точками у границы состояний нет; из двух промахов выбран тот, при
 * котором вес стрелки не спорит с весом той же стрелки на десктопе.
 */
.ls-faq__mark {
  flex: 0 0 var(--ls-faq-mark);
  block-size: var(--ls-faq-mark);
  position: relative;
  color: var(--ls-faq-ink);
}

.ls-faq__mark::before {
  content: "";
  position: absolute;
  inset-block-start: 29.2%;
  inset-inline-start: 25%;
  inline-size: 41.6%;
  block-size: 41.6%;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}

.ls-faq__item[open] > .ls-faq__q > .ls-faq__mark::before {
  transform: rotate(225deg);
}

.ls-faq__a {
  padding-block-end: var(--ls-faq-answer-pad);
}

/*
 * ОТВЕТ ИДЁТ ТЕМ ЖЕ КЕГЛЕМ, ЧТО ВОПРОС, И ОТЛИЧАЕТСЯ ВЕСОМ. Замер
 * эталона: и вопрос, и ответ 20/28, вес 600 против 400. Цвет ответа у
 * него rgb(26,27,36) при чернилах заголовка rgb(5,6,13) - то есть роль
 * приглушённого текста, а не чернила.
 */
.ls-faq__at {
  margin: 0;
  font-size: var(--ls-faq-lede);
  line-height: var(--ls-faq-q-lh);
  font-weight: 400;
  color: var(--ls-faq-muted);
}

/* ==================================================================
   ВОСЕМЬ НАБОРОВ ПОВЕРХ ОДНОГО КАРКАСА

   Разметка у всех наборов одна (правило проекта: слой печатает классы,
   а не геометрию), различия живут здесь и адресуются признаками корня:

     data-head  top | side | top-narrow | top-wide   - устройство шапки
     data-cols  1 | 2 | 3                            - колонок в ленте
     data-fold  1 | 0                                - складки или нет
     data-num                                        - нумерация пунктов
     data-set   A1..A8                               - что осталось своим

   ЧТО ЗДЕСЬ ЗАМЕР, А ЧТО РЕКОНСТРУКЦИЯ - СКАЗАНО У КАЖДОГО НАБОРА.
   Полностью, число в число, снят только набор A1. У остальных снято
   СТРОЕНИЕ (дети корня, высота пункта, кегль и вес вопроса, размер
   карточки, число колонок) - оно и перенесено; ритм отступов взят у A1,
   потому что единица у эталона одна на секцию. Наборы A7 и A8 сняты
   первым заходом и не переподтверждены - об этом написано в отчёте
   разведки, и переснять их надо раньше, чем считать эти числа верными.
   ================================================================== */

/* ------------------------------------------------------------------
   ШАПКА: четыре устройства
   ------------------------------------------------------------------ */

/* Узкая шапка - замер набора A4: `max-w-lg`, то есть 512. */
.ls-faq[data-head="top-narrow"] .ls-faq__head {
  max-inline-size: 512px;
}

/*
 * ШИРОКАЯ ШАПКА ИДЁТ ВО ВСЮ БУМАГУ, А НЕ В МЕРУ ЧТЕНИЯ. Замер наборов A7
 * и A8: заголовок 1434 при бумаге 1482, то есть меры у него нет вовсе -
 * он ограничен только полем секции. Выравнивание при этом остаётся по
 * началу строки, а не по центру: у обоих наборов заголовок прижат влево.
 */
.ls-faq[data-head="top-wide"] .ls-faq__head {
  max-inline-size: none;
  align-items: start;
  text-align: start;
}

/* ------------------------------------------------------------------
   ЛЕНТА: одна, две и три колонки
   ------------------------------------------------------------------ */

/*
 * МНОГОКОЛОНОЧНАЯ ЛЕНТА ТЕРЯЕТ МЕРУ ЧТЕНИЯ. Мера 768 существует ради
 * одной колонки: строка длиннее плохо читается. У двух и трёх колонок
 * ширину задаёт сетка, и остаток меры прижал бы их к середине бумаги.
 */
.ls-faq[data-cols="2"] .ls-faq__list,
.ls-faq[data-cols="3"] .ls-faq__list {
  max-inline-size: none;
  display: grid;
  gap: var(--ls-faq-item-gap);
}

/*
 * КОЛОНОК ПО УМОЛЧАНИЮ ОДНА - У ВСЕХ. Число колонок у эталона объявлено
 * ступенями снизу вверх (`grid-cols-1 @tablet:grid-cols-2
 * @desktop:grid-cols-3`), и написать это надо тем же порядком: узкая
 * бумага - основание, широкая - надстройка. Иначе новая раскладка с
 * колонками выйдет многоколоночной на телефоне по умолчанию.
 */
.ls-faq[data-cols="2"] .ls-faq__list,
.ls-faq[data-cols="3"] .ls-faq__list {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * `min-inline-size: auto` У ЭЛЕМЕНТА СЕТКИ РАСПИРАЕТ КОЛОНКУ ДО СВОЕГО
 * САМОГО ШИРОКОГО РЯДА - записанная грабля проекта, стоившая раскладки
 * дважды. Длинный вопрос без пробелов растянул бы колонку и увёл бумагу
 * в горизонтальную прокрутку.
 */
.ls-faq[data-cols="2"] .ls-faq__item,
.ls-faq[data-cols="3"] .ls-faq__item {
  min-inline-size: 0;
}

/* ------------------------------------------------------------------
   НАБОР БЕЗ СКЛАДОК
   ------------------------------------------------------------------ */

/*
 * ВОПРОС БЕЗ СКЛАДКИ - НЕ ОРГАН, И ВЫГЛЯДЕТЬ ОРГАНОМ ОН НЕ ДОЛЖЕН.
 * Курсор руки над неподвижным текстом обещает нажатие, которого нет, -
 * это тот же класс, что курсор захвата над лентой без тяги.
 */
.ls-faq[data-fold="0"] .ls-faq__q {
  cursor: default;
}

/* ------------------------------------------------------------------
   A2 · шапка слева, лента в рамке, первый пункт открыт
   Замер: корень сеткой 717+717, у ленты боковые границы, вопрос 20/400.
   ------------------------------------------------------------------ */
/*
 * ВЕС ВОПРОСА У ЭТОГО НАБОРА 400, А НЕ 600 - ЗАМЕР, А НЕ ОПЕЧАТКА.
 * Кегль тот же (20/28), различает наборы именно вес; на глаз это видно,
 * а в таблице чисел терялось бы, поэтому названо отдельной строкой.
 */
.ls-faq[data-set="A2"] .ls-faq__q {
  font-weight: 400;
}

/* ------------------------------------------------------------------
   A3 · та же рамка, но вопрос мельче и колонки вплотную
   Замер: вопрос 16/400/24, зазор корня 0, пункт 96 закрытый.
   ------------------------------------------------------------------ */
.ls-faq[data-set="A3"] .ls-faq__wrap {
  column-gap: 0;
}

/*
 * МЕЛКИЙ ВОПРОС ЕДЕТ ТОЙ ЖЕ ЕДИНИЦЕЙ, ЧТО И КРУПНЫЙ. Замер даёт 16 при
 * широкой бумаге, то есть ровно НИЖНИЙ край общей формулы вопроса
 * (`clamp(1rem, ...)`). Поэтому здесь не второе число, а тот же самый
 * минимум: набор берёт нижний край шкалы, а не свою шкалу.
 */
.ls-faq[data-set="A3"] .ls-faq__q,
.ls-faq[data-set="A3"] .ls-faq__at {
  font-size: 1rem;
  line-height: 1.5;
}

.ls-faq[data-set="A3"] .ls-faq__q {
  font-weight: 400;
}

/* ------------------------------------------------------------------
   A4 · карточки на подложке
   Замер: шапка 512, карточка 488 в подложке 512, зазор корня 72.
   ------------------------------------------------------------------ */

/*
 * ПОДЛОЖКА СЧИТАЕТСЯ ИЗ ЧЕРНИЛ, А НЕ ОБЪЯВЛЯЕТСЯ ЦВЕТОМ. Эталон берёт её
 * из своей переменной набора; у нас палитра приезжает ролями, и своё
 * значение разошлось бы с темой сайта при первой смене палитры.
 * `color-mix` от чернил даёт тон, который лежит на любой плоскости.
 */
.ls-faq[data-set="A4"] .ls-faq__item {
  border-block-start: 0;
  border-radius: calc(16px * var(--ls-r-k, 1));
  background: color-mix(in oklab, var(--ls-faq-ink) 6%, transparent);
  padding-inline: var(--ls-faq-item-pad);
}

/*
 * ЛЕНТА КАРТОЧЕК УЖЕ ОБЫЧНОЙ, И ЭТО ЗАМЕР: подложка 512, карточка внутри
 * неё 488, то есть по двенадцать точек с боков. Мера чтения 768 здесь не
 * действует - её задаёт сам набор.
 */
.ls-faq[data-set="A4"] .ls-faq__list {
  max-inline-size: 512px;
  padding-inline: calc(2 * var(--ls-faq-unit));
  display: grid;
  gap: calc(2 * var(--ls-faq-unit));
}

/* ------------------------------------------------------------------
   A5 · складки-карточки в две колонки
   Замер: карточка 669x100 при бумаге 1482, шапка по центру.
   ------------------------------------------------------------------ */
/*
 * ЗАЗОР МЕЖДУ КОЛОНКАМИ СЧИТАЕТСЯ ИЗ ЗАМЕРА, А НЕ БЕРЁТСЯ ОБЩИЙ. Карточка
 * эталона 669 при бумаге 1482: содержимое 1434 = 669 + 669 + 96, то есть
 * зазор ровно шестнадцать единиц. Общий зазор пунктов (четыре) дал бы
 * колонки по 705 и разъехался бы с эталоном на семьдесят точек.
 */
.ls-faq[data-set="A5"] .ls-faq__list {
  /* Четыре стиля раскладки различаются этим зазором (16 / 10 / 6 / 3 единицы, владелец
     05.10.2026); число печатает реестр раскладки, запас - прежний замер эталона. */
  gap: var(--ls-faq-duo-gap, calc(16 * var(--ls-faq-unit)));
}

.ls-faq[data-set="A5"] .ls-faq__item {
  border: 1px solid var(--ls-faq-line);
  border-radius: calc(16px * var(--ls-r-k, 1));
  padding-inline: var(--ls-faq-item-pad);
}

/* ------------------------------------------------------------------
   A6 · три колонки, ответ виден всегда
   Замер: карточка 462x280, зазор корня 96, потолок ШЕСТЬ пунктов.
   ------------------------------------------------------------------ */
.ls-faq[data-set="A6"] {
  --ls-faq-gap: calc(16 * var(--ls-faq-unit));
}

.ls-faq[data-set="A6"] .ls-faq__item {
  border-block-start: 0;
  border: 1px solid var(--ls-faq-line);
  border-radius: calc(16px * var(--ls-r-k, 1));
  padding: var(--ls-faq-item-pad);
  display: flex;
  flex-direction: column;
  gap: var(--ls-faq-item-gap);
}

/* Ответ в карточке снизу поля не добирает - его держит поле карточки. */
.ls-faq[data-set="A6"] .ls-faq__a {
  padding-block-end: 0;
}

/* ------------------------------------------------------------------
   A7 · нумерованные вопросы, широкая шапка
   Замер: пункт 108, вопрос 25/600/35.
   ------------------------------------------------------------------ */

/*
 * НОМЕР РИСУЕТ СЧЁТЧИК CSS, А НЕ РАЗМЕТКА. Номер - это оформление
 * порядка, а не содержание: печатай его слой - он попал бы в схему
 * `FAQPage`, в правимый текст и в буфер обмена читателя. Счётчик же
 * пересчитывается сам при удалении пункта.
 */
.ls-faq[data-num] .ls-faq__list {
  counter-reset: ls-faq;
}

.ls-faq[data-num] .ls-faq__item {
  counter-increment: ls-faq;
}

.ls-faq[data-num] .ls-faq__q::before {
  content: counter(ls-faq) ".";
  flex: 0 0 auto;
  color: var(--ls-faq-muted);
  font-variant-numeric: tabular-nums;
}

/*
 * КРУПНЫЙ ВОПРОС - ДОЛЯ ОБЩЕЙ ФОРМУЛЫ, А НЕ ВТОРАЯ ШКАЛА. Замер даёт 25
 * при широкой бумаге, то есть ровно четверть сверху над общими двадцатью;
 * множитель сохраняет плавность, а второе `clamp` пришлось бы сверять
 * отдельно на каждой ширине. Строка 1.4 даёт замеренные 35.
 */
.ls-faq[data-set="A7"] .ls-faq__q {
  font-size: calc(var(--ls-faq-q) * 1.25);
}

/*
 * ЗАГОЛОВОК У ЭТОГО НАБОРА НА СТУПЕНЬ КРУПНЕЕ ОБЩЕГО - ПЕРЕСНЯТО 08.09.2026:
 * 76.2944 против 61.0352 при бумаге 1482. Шкала кеглей эталона на широкой
 * бумаге идёт с шагом 1.25, и 76.2944 = 61.0352 x 1.25 ровно; поэтому здесь
 * тот же множитель, а не второе `clamp` со своими порогами.
 *
 * Поле складки у него шесть единиц, а зазор до значка ТОЖЕ шесть (`py-6
 * gap-6`), а не четыре, как у соседей: пункт выходит 108 = 36 + 35 + 36 + 1.
 */
.ls-faq[data-set="A7"] {
  --ls-faq-item-gap: calc(6 * var(--ls-faq-unit));
}

.ls-faq[data-set="A7"] .ls-faq__title {
  font-size: calc(var(--ls-faq-title) * 1.25);
}

/* ------------------------------------------------------------------
   A8 · широкая шапка слева, вопросы под ней
   Пересъём 08.09.2026: `flex` 1482x1299, шапка `flex flex-col gap-4`
   1434x344 с наднадписью, заголовком и абзацем, лента `flex flex-col
   gap-8` 1434x643 - внутри вопросы 1434x539 и полоса кнопок 1434x56.
   ------------------------------------------------------------------ */

/*
 * ПУНКТ У ЭТОГО НАБОРА ТЕСНЕЕ ОБЩЕГО: `py-4 gap-4`, то есть четыре единицы
 * вместо шести. Замер: складка 76 = 24 + 28 + 24, тогда как у первого набора
 * 100 = 36 + 28 + 36. Число получено делением на единицу, а не на глаз.
 */
.ls-faq[data-set="A8"] {
  --ls-faq-item-pad: calc(4 * var(--ls-faq-unit));
  --ls-faq-item-gap: calc(4 * var(--ls-faq-unit));
}

/* ------------------------------------------------------------------
   ПРАВКА · складка раскрыта сервером, переключение погашено.
   ------------------------------------------------------------------ */

/*
 * НАЖАТИЕ ПО СКЛАДКЕ В ПРАВКЕ НЕ ПЕРЕКЛЮЧАЕТ ЕЁ, А ПО ТЕКСТУ ВОПРОСА -
 * СТАВИТ КАРЕТКУ. Без этой пары нажатие по правимому тексту схлопывало
 * бы пункт прямо под кареткой: `summary` переключается от щелчка по
 * ЛЮБОМУ своему потомку. Значок и пустое место складки остаются
 * мёртвыми, текст - живым.
 */
.ls-faq[data-edit] .ls-faq__q {
  pointer-events: none;
  cursor: default;
}

.ls-faq[data-edit] .ls-faq__qt {
  pointer-events: auto;
}

/*
 * ПРИГЛАШЕНИЕ ВИДНО ТОЛЬКО В ПРАВКЕ - у посетителя секция при недоборе
 * вопросов не печатается вовсе. Одевается ролью приглушённого текста,
 * рамка пунктиром - тот же приём, что у приглашения контактов.
 */
.ls-faq__invite {
  inline-size: 100%;
  padding: var(--ls-faq-invite-pad);
  border: 1px dashed var(--ls-faq-line);
  border-radius: calc(12px * var(--ls-r-k, 1));
  text-align: center;
  color: var(--ls-faq-muted);
}

/* ==================================================================
   ТРИ ШИРИНЫ · ПОРОГОВ У ЭТАЛОНА ДВА, И ОНИ РАЗНЫЕ ДЛЯ РАЗНЫХ СВОЙСТВ

   Сняты 08.09.2026 прямо из его таблиц стилей, а не подобраны:

     `@tablet:`  = `@container root not (max-width: 40rem)` - шире 640
     `@desktop:` = `@container root not (max-width: 80rem)` - шире 1280

   Верхний порог совпадает с потолком плавной единицы (она упирается в
   6 точек ровно на 1280), и это не совпадение: одна и та же ширина
   означает у него «бумага стала настольной».

   ЧТО ПЕРЕКЛЮЧАЕТСЯ НА КАКОМ. Поле секции - на 640 (`py-16
   @tablet:py-20`). Колонки - на 1280 (`@desktop:grid-cols-2`), а у
   набора с карточками ступеней две: `grid-cols-1 @tablet:grid-cols-2
   @desktop:grid-cols-3`. Зазоры и кегли не переключаются вовсе - за них
   отвечает сама единица.

   ПРЕЖНИЙ ПОРОГ 700 БЫЛ НАШ И ДЕЛАЛ ОБЕ РАБОТЫ СРАЗУ - и обе не там:
   поле переключалось на шестьдесят точек позже, а колонки схлопывались
   на пятьсот восемьдесят точек раньше, то есть весь планшет наши
   двухколоночные наборы стояли в две колонки там, где эталон давно
   свернул их в одну.
   ================================================================== */

/* Поле секции: двадцать единиц на широкой бумаге, шестнадцать на узкой. */
@container ls (width <= 640px) {
  .ls-faq {
    --ls-faq-pad: calc(16 * var(--ls-faq-unit));
  }
}

/* Средняя ступень: у набора с карточками две колонки уже с 640. */
@container ls (width > 640px) {
  .ls-faq[data-cols="3"] .ls-faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * ШИРОКАЯ БУМАГА · всё, что у эталона стоит под `@desktop:`.
 *
 * Правила написаны парой «класс плюс признак» (0,2,0), а не одиночным
 * классом: одиночный проиграл бы базовому правилу и молча не сработал бы -
 * ровно та грабля, что уже стоила двухколоночного набора контактов.
 */
@container ls (width > 1280px) {
  .ls-faq[data-head="side"] .ls-faq__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: var(--ls-faq-gap);
  }

  .ls-faq[data-head="side"] .ls-faq__head {
    text-align: start;
    align-items: start;
  }

  .ls-faq[data-cols="2"] .ls-faq__list,
  .ls-faq[data-cols="3"] .ls-faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ls-faq[data-cols="3"] .ls-faq__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /*
   * БОКОВЫЕ РАМКИ ПРИХОДЯТ ВМЕСТЕ С ДВУМЯ КОЛОНКАМИ. У эталона они и
   * объявлены под `@desktop:border-x`: рамка объясняет границу между
   * шапкой и лентой, а в одну колонку обводит ленту с боков и читается
   * как обрезанная коробка.
   */
  .ls-faq[data-set="A2"] .ls-faq__list,
  .ls-faq[data-set="A3"] .ls-faq__list {
    border-inline: 1px solid var(--ls-faq-line);
    padding-inline: var(--ls-faq-item-pad);
  }
}