@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════════
   «ВСЕ 32» — частые вопросы + блок цен.       подключается после style.css
   ───────────────────────────────────────────────────────────────────
   ЧЕМ ЭТОТ АККОРДЕОН ОТЛИЧАЕТСЯ ОТ АККОРДЕОНА УСЛУГ

   Услуги (.svc-acc*) — вертикальный реестр во всю ширину: нумерация
   01–11, знак «+/−», строка заливается тоном --band, панель раскрывается
   вниз и двигает страницу.

   Здесь другое, и различий три:
   1) ФОРМА. От 992px список вопросов остаётся слева узкой колонкой,
      а ответ стоит справа отдельной белой карточкой во всю высоту
      списка — «список / деталь». Ничего не прыгает, высота секции
      не меняется при переключении вопросов.
   2) СЛОВАРЬ. Ни нумерации, ни «плюс-минуса» — это опознавательные
      знаки услуг, и повторять их нельзя: иначе на телефоне, где обе
      секции всё равно становятся вертикальными, они сольются в одно.
      Здесь шеврон и заливка мятой.
   3) НАБОР. Вопрос набран Onest (текстовая гарнитура), а не Unbounded,
      как названия направлений: это реплика пациента, а не заголовок.

   БЕЗ JS секция читается целиком: .is-live ставит faq.js, и только он
   включает интерактив. Пока класса нет — обычный список Q&A в две
   колонки, все ответы открыты (aria-expanded="true" в разметке — правда).

   КОНТРАСТ. Пастель нигде не идёт текстом — только заливки, клинья
   и полосы. Замеры по вычисленным стилям — в отчёте по секции.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── каркас доски ───────────────────────────────────────────────── */
.faq-board{position:relative}

/* <ol>: глобальный сброс списков бьёт только по ul */
.faq-rail{margin:0;padding:0;list-style:none}

.faq-item{border-bottom:1px solid var(--rule)}
.faq-item:first-child{border-top:1px solid var(--rule)}

.faq-h{margin:0;font:inherit;letter-spacing:normal;line-height:inherit}

.faq-btn{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,1.6vw,20px);
  width:100%;padding:clamp(15px,1.7vw,20px) clamp(12px,1.4vw,18px);
  background:none;border:0;border-radius:var(--r);
  text-align:start;cursor:default;position:relative;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}

.faq-q{
  font-weight:600;font-size:clamp(1rem,1.28vw,1.1rem);line-height:1.3;
  letter-spacing:-.015em;min-width:0}

/* Шеврон вниз → вверх. Именно шеврон, а не «+/−»: «плюс-минус» уже
   занят строками услуг, и повторять его — значит стереть разницу между
   двумя секциями ровно там, где её и так труднее всего увидеть. */
.faq-mark{
  position:relative;width:16px;height:16px;flex:none;color:var(--ink-2);
  transition:color var(--t-fast) var(--ease)}
.faq-mark::before{
  content:"";position:absolute;left:3px;top:2px;width:9px;height:9px;
  border-inline-end:2px solid currentColor;
  border-block-end:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--t) var(--ease)}
.faq-item.is-open .faq-mark::before{transform:rotate(-135deg)}

.faq-panel{padding:0 clamp(12px,1.4vw,18px) clamp(18px,2vw,24px)}
.faq-panel p{color:var(--ink-2);font-size:1rem;margin:0;max-width:60ch}
/* страховка: ни одно правило ниже не должно перебить hidden */
.faq-panel[hidden]{display:none}

/* ─── статичный вид: JS нет или ещё не отработал ─────────────────── */
/* Две колонки обычного Q&A. Кнопочных признаков нет — нажимать нечего,
   и притворяться, что есть, не нужно. */
.faq-board:not(.is-live) .faq-mark{display:none}
@media (min-width:768px){
  .faq-board:not(.is-live) .faq-rail{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(28px,4vw,64px)}
  .faq-board:not(.is-live) .faq-item{border-top:0}
  .faq-board:not(.is-live) .faq-item:nth-child(-n+2){border-top:1px solid var(--rule)}
}

/* ─── живой аккордеон: общее для всех ширин ──────────────────────── */
.faq-board.is-live .faq-btn{cursor:pointer}
/* Ховер и подложки — БЕЛЫЕ, а не --band: секция сама стоит на --band
   (style.css: .faq{background:var(--band)}), и подсветка тем же тоном
   была бы невидимой. */
@media (hover:hover){
  .faq-board.is-live .faq-item:not(.is-open) .faq-btn:hover{background:var(--bg)}
  .faq-board.is-live .faq-item:not(.is-open) .faq-btn:hover .faq-mark{color:var(--accent)}
}
.faq-board.is-live .faq-item.is-open .faq-btn{background:var(--mint);color:var(--ink)}
.faq-board.is-live .faq-item.is-open .faq-mark{color:var(--ink)}

/* Появление панели. Показ идёт атрибутом hidden, поэтому это анимация,
   а не переход. Глобальное prefers-reduced-motion в style.css гасит её.

   ОПАЦИТИ ЗДЕСЬ НЕТ — намеренно, и это не вкусовщина. Пока вкладка не
   отрисовывается, таймлайн анимаций стоит: замер показал playState
   "running" при currentTime 0 через секунду после раскрытия. Кадр from
   при этом продолжает применяться. С opacity:0 в нём ответ висел бы
   полностью прозрачным — то есть читаемость текста зависела бы от того,
   успел ли браузер отрисовать кадр. Снятие fill-mode эту дыру не
   закрывает: анимация уже в активной фазе, а не до неё.
   Осталось только смещение. Худший случай теперь — ответ стоит на 6px
   выше и полностью читается. */
@keyframes faq-in{from{transform:translateY(-6px)}to{transform:none}}

/* ─── < 992px: вертикальная гармошка ─────────────────────────────── */
@media (max-width:991px){
  .faq-board.is-live .faq-panel{
    margin:0 clamp(12px,1.4vw,18px) clamp(16px,2vw,22px);
    padding:clamp(15px,2vw,20px) clamp(16px,2.2vw,22px);
    background:var(--bg);border-radius:var(--r);
    border-inline-start:4px solid var(--mint);
    animation:faq-in var(--t) var(--ease)}
}

/* ─── ≥ 992px: «список слева — ответ справа» ─────────────────────── */
@media (min-width:992px){
  /* Правая половина отдана под ответ отступом контейнера, сама панель
     ставится в неё абсолютно: так высоту секции задаёт список вопросов
     и она не скачет при переключении. */
  /* Замер высоты панели приходит из faq.js переменной --faq-panel-h, и
     min-height по ней объявлен ВНУТРИ этого медиазапроса намеренно.
     Инлайновый style.minHeight на контейнере жил бы на всех ширинах: при
     сужении окна замер с широкого экрана оставлял под свёрнутой гармошкой
     пустой провал в полсотни строк. Проверено — событие resize до
     обработчика доходит не всегда, поэтому полагаться на его уборку нельзя.
     Так стухший замер просто перестаёт действовать вместе с раскладкой. */
  .faq-board.is-live{
    padding-inline-end:calc(53% + clamp(28px,3.4vw,56px));
    min-height:var(--faq-panel-h, 0px)}

  /* Список превращается в меню: линейки убираем, выбор показывает мята.
     У услуг линейки как раз есть — ещё одно различие, которое видно. */
  .faq-board.is-live .faq-item,
  .faq-board.is-live .faq-item:first-child{border:0}
  .faq-board.is-live .faq-item + .faq-item{margin-top:2px}

  /* min-height:100% — карточка ответа дотягивается до низа списка,
     поэтому справа не остаётся пустой дыры под коротким ответом.
     Не height:100%: длинный ответ должен уметь вырасти, а не обрезаться
     (панель с overflow:hidden обрезала бы текст). */
  .faq-board.is-live .faq-panel{
    position:absolute;top:0;right:0;width:53%;min-height:100%;
    padding:clamp(28px,3vw,40px);
    background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg);
    overflow:hidden;animation:faq-in var(--t) var(--ease)}
  .faq-board.is-live .faq-panel p{
    color:var(--ink);font-size:clamp(1.02rem,1.32vw,1.16rem);line-height:1.58;
    max-width:40ch}

  /* гранёный угол из знака — тихая цитата логотипа, чистая заливка */
  .faq-board.is-live .faq-panel::after{
    content:"";position:absolute;right:-46px;bottom:-46px;width:120px;height:120px;
    background:var(--mint);opacity:.22;transform:rotate(45deg)}

  /* клин от выбранной строки к её ответу */
  .faq-board.is-live .faq-item.is-open .faq-btn::after{
    content:"";position:absolute;inset-inline-end:-9px;top:50%;
    width:0;height:0;transform:translateY(-50%);
    border-block:9px solid transparent;
    border-inline-start:9px solid var(--mint)}

  .faq-board.is-live .faq-mark{display:none}
  .faq-board.is-live .faq-btn{grid-template-columns:minmax(0,1fr)}
}

/* ─── запасной ход под списком ───────────────────────────────────── */
.faq-more{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px clamp(20px,2.6vw,34px);
  margin:clamp(20px,2.4vw,30px) 0 0;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,26px);
  background:var(--bg);border-radius:var(--r-lg);
  color:var(--ink-2);font-size:.97rem;line-height:1.5}
.faq-more span{max-width:58ch;min-width:0}
.faq-more .btn{flex:none;white-space:nowrap}

/* ─── блок цен ───────────────────────────────────────────────────── */
/* Плашки под блоком нет намеренно: секция сама на --band, плашка того же
   тона была бы невидима, а белая — спорила бы с двумя белыми карточками
   внутри. Отбивку даёт линия сверху, «предметность» — сами карточки. */
.price{
  margin-top:clamp(52px,6.5vw,96px);
  padding-top:clamp(34px,4.2vw,60px);
  border-top:1px solid var(--rule)}
.price-head h3{font-size:clamp(1.45rem,2.6vw,2.15rem)}
.price-head p{margin:14px 0 0;color:var(--ink-2);max-width:58ch}

.price-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(18px,2.4vw,32px);align-items:start;
  margin-top:clamp(24px,3.2vw,42px)}

.price-fix,.price-rest{
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg)}
.price-fix{overflow:hidden}

/* мятная полоса — ровно та роль, что у мяты в фирменном стиле: заливка */
.price-tag{
  margin:0;background:var(--mint);color:var(--ink);
  font-weight:600;font-size:.83rem;line-height:1.3;
  padding:11px clamp(18px,2.2vw,28px)}
.price-fix-in{padding:clamp(20px,2.6vw,30px) clamp(18px,2.2vw,28px) clamp(22px,2.6vw,30px)}

.price-kicker{margin:0 0 10px;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.price-num{
  margin:0 0 16px;font-family:Unbounded,Onest,sans-serif;font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--accent);
  font-size:clamp(1.3rem,2vw,1.7rem)}
.price-num span{font-size:clamp(2.3rem,4.2vw,3.1rem)}

.price-txt{margin:0 0 18px;color:var(--ink-2);font-size:.97rem}

.price-list{display:grid;gap:11px;margin:0 0 24px}
.price-list li{position:relative;padding-inline-start:27px;font-size:.95rem;
  line-height:1.45}
.price-list li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;
  width:14px;height:8px;border-inline-start:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}

.price-rest{padding:clamp(20px,2.6vw,30px) clamp(18px,2.2vw,28px)}
/* Число отдельной строкой, а не в строку с подписью. Вживую 43px «266»
   и 16px «позиций» на одной базовой линии слипались в «266позиций»:
   пробел набирается мелким кеглем и тонет в боковых свесах цифр.
   Заодно ушла нелепица, когда из двух чисел («266» и «11») крупным
   набрано только первое. Теперь блок рифмуется с «49 000 ₽» слева. */
.price-stat{
  margin:0 0 16px;font-weight:500;line-height:1.35;
  font-size:clamp(.98rem,1.25vw,1.05rem);color:var(--ink-2)}
.price-stat span{
  display:block;margin-bottom:4px;
  font-family:Unbounded,Onest,sans-serif;font-weight:600;color:var(--accent);
  font-size:clamp(2.3rem,4.2vw,3.1rem);line-height:1;letter-spacing:-.045em}

.price-why{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,1.6vw,18px);row-gap:13px;margin:0 0 4px}
.price-why dt{
  background:var(--band);border-radius:var(--r);padding:4px 11px;
  font-size:.82rem;font-weight:600;white-space:nowrap;align-self:start;
  justify-self:start}
.price-why dd{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.5}

.price-call{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:.97rem}
.price-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:18px}
.price-act .btn{white-space:nowrap}

@media (max-width:991px){
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:559px){
  /* подпись + текст в одну строку на 360px уже не живут */
  .price-why{grid-template-columns:1fr;row-gap:6px}
  .price-why dd{margin-bottom:10px}
  .price-act{gap:14px}
  .faq-more .btn,
  .price-act .btn{width:100%}
}