/* ============================================================
   AVS CRM — дизайн-ревизия основного лендинга (не визард/калькулятор)
   Изолированный файл: не подключён к живому index.html, пока
   идёт ревью — подключается только из index.preview.html.
   Каскадом переопределяет правила из styles.css (грузится после
   него), сам styles.css не трогаем, чтобы не публиковать заранее.

   Правки по итогам дизайн-ревью 2026-09-11:
   1) Убраны декоративные кубики в FAQ (faq__cube-1/2/3,
      faq__cta-cube) — .faq__cta-card держит overflow:hidden ради
      backdrop-filter, а кубик стоял с отрицательным отступом
      (top/right:-30px) поверх скруглённого угла — обрезался жёстким
      прямым срезом вместо мягкого "выглядывания". Правили бы
      overflow — сломался бы blur по скруглению. Проще убрать сам
      кубик: декоративных кубиков и так много по странице.
   2) Все карточки на странице (табы/цены/FAQ/extras/model) были
      визуально одинаковы — один и тот же радиус+тень+рамка независимо
      от важности содержимого. Цены — главная точка принятия решения —
      получили более выраженный вес; FAQ-список, наоборот, разгружен
      до простого списка с разделителями, чтобы не спорить с ценами
      за внимание.
   3) Нумерация 01/02/03 у табов (альтернативы, не шаги) и у карточек
      "Как это работает" (параллельные факты, не процесс) намекала на
      последовательность там, где её нет — убрана. У FAQ (1-10) и
      extras (категория) нумерация/лейбл честная — не трогали.
   4) Левая колонка FAQ пустовала рядом с длинным списком вопросов —
      добавлена карточка с реальной цифрой (те же ~80 клиентов, что
      уже фигурируют в блоке "Как это работает изнутри" — не новая
      непроверенная цифра, а переиспользование существующей).
   ============================================================ */

/* --- 1) Убранные декорации — компенсирующих правил не нужно,
   просто меньше элементов в разметке (faq__cube-*, faq__cta-cube). --- */

/* --- 2а) Цены — сильнее визуальный вес, чем у соседних карточек --- */
.prices__table {
  background: linear-gradient(180deg, rgba(79,93,224,.07), rgba(255,255,255,.78));
  border: 1px solid rgba(79,93,224,.3);
  box-shadow: 0 60px 110px -50px rgba(48,45,120,.6), 0 0 0 6px rgba(79,93,224,.07);
}

/* --- 2б) FAQ-список — плоский список с разделителями, а не стопка
   одинаковых карточек-стекла --- */
.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(25,24,42,.1);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.faq-item:last-child { border-bottom: none; }
.faq-item.is-open { background: rgba(79,93,224,.045); box-shadow: none; }

/* --- 3а) Убранные номера у табов/dcard — компактная замена дот-маркером
   у dcard, чтобы блок не читался как пустой список --- */
.dcard::before {
  content: ""; display: block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent-2); margin: 0 0 20px;
}

/* --- 3б) extras: категория осталась одна — вернуть ей акцентный вид
   (в styles.css этот стиль жил на паре :first-child/:last-child,
   при одном ребёнке побеждал более поздний :last-child — блёклый) --- */
.extra-card__meta span:only-child {
  font-family: var(--mono); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

/* --- 4) FAQ — цифра в пустующей левой колонке --- */
.faq__rail-stat {
  display: flex; align-items: center; gap: 14px;
  margin: 32px 0 0; padding: 18px 20px; max-width: 34ch;
  border-radius: 16px; background: rgba(79,93,224,.06); border: 1px solid rgba(79,93,224,.16);
}
.faq__rail-stat b {
  flex-shrink: 0; font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -.02em; color: var(--accent);
}
.faq__rail-stat span { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ============================================================
   5) Заголовки/подписи — единая мера ширины и отступ (ревью 2026-09-11)

   Схема на сайте уже была: заголовок ограничен по ширине в ch
   (символах, не %  — "ch" держит длину строки читаемой на любом
   экране, % на широком мониторе просто растягивает строку дальше;
   это и есть тот "60-70%", только считается правильной для типографики
   единицей), подпись — своим, более широким ch, между ними
   margin-top. Но встречалось и не везде:
   - у калькулятора подпись (.section-lead) вообще без max-width —
     тянулась на всю карточку, а заголовок "казался" компактным
     только из-за ручного <br> (calc__title-break), без реальной
     меры; margin-top между ними не задан вовсе (0);
   - то же у формы демо-показа: .section-lead без max-width, а
     отступ держался на margin-bottom заголовка в 14px — заметно
     меньше принятых на странице ~20px;
   - у цен (.h2--gap) и у рельса FAQ заголовок был без max-width
     (у FAQ — тоже только ручной <br>, без меры на случай, когда
     рельс станет на всю ширину, как на мобильном).
   Приводим все четыре к уже существующей на странице норме (HOW/
   MODEL уже делали это правильно), вместо новой отдельной схемы.
   ============================================================ */

.h2 { text-wrap: balance; }

.section--calc .h2 { max-width: 24ch; }
.section--calc .section-lead { max-width: 50ch; margin: 22px 0 0; }

.h2--gap { max-width: 20ch; }

.faq__rail h2 { max-width: 16ch; }

.demo__inner h2 { max-width: 20ch; margin-bottom: 20px; }
.demo__inner .section-lead { max-width: 50ch; }

/* ============================================================
   6) Размерная шкала шрифтов — сведена к 8 значениям (ревью 2026-09-12)

   До правки на странице было ~20 разных font-size — почти для
   каждого компонента придумывался свой (11/12/13/14 для одинаковых
   по роли мелких лейблов; 15/16/17/18/19 вразнобой для параграфов
   внутри карточек; 5 разных clamp() для, по сути, одного и того же
   "заголовка внутри модалки/уведомления"). Ощущение "текст разного
   размера" — это оно: роль одна, чисел под неё — много.
   Свели к 8 работающим размерам по роли (не по компоненту):
     12px            — микро-лейблы (моно, капс: eyebrow, бейджи, теги)
     14px            — второстепенный текст (хинты, сноски, мелкие подписи)
     15px            — базовый UI-текст (нав, кнопки) — не трогали, уже ровно
     16px            — текст в полях ввода (сознательно крупнее — не даёт
                        мобильному Safari зумить инпут при фокусе; это не
                        "расхождение", а функциональная причина, оставили)
     16-18px (clamp)  — параграф внутри карточки/компонента
     18-21px (clamp)  — вводный абзац секции (.section-lead) — было и раньше,
                        просто не все лид-абзацы на него ссылались
     21px            — подзаголовок внутри карточки (dcard/extra-card/
                        model-card/цена — эти четыре уже совпадали, довели
                        до той же цифры ещё два, что "вроде похожи, но нет")
     24-28px (clamp)  — самостоятельный заголовок (уведомление/модалка/
                        CTA-карточка FAQ) — крупнее карточного, у них больше
                        воздуха вокруг и они не соседствуют с другим текстом
   Начертания (font-weight) не трогали — там как раз всё было дисциплинированно
   (400/500/600/700 по роли), проблема была только в размерах.
   ============================================================ */

/* — 12px: микро-лейблы — */
.brand__tag,
.hero__note,
.faq-item__num,
.extra-card__meta span:only-child,
.notice__tag,
.form--line .field__label,
.form--line .method__label,
.wizard__badge {
  font-size: 12px;
}

/* — 14px: второстепенный текст — */
.method__label,
.form-check span,
.footer__sub {
  font-size: 14px;
}

/* — 16px: инпуты — единственное сознательное отклонение от общей
   шкалы (см. комментарий выше), .form--line был на 17px без причины */
.form--line .input--line {
  font-size: 16px;
}

/* — 16-18px: параграф внутри карточки/компонента — */
.step__text,
.dcard__text,
.screen-card p,
.price-row__desc,
.extra-card__text,
.model-list p,
.faq-item__body p,
.faq__cta-card > .form-intro,
.notice__text,
.faq-item__q,
.wizard__offer {
  font-size: clamp(16px, 1.6vw, 18px);
}

/* — 18-21px: вводный абзац секции — тот же .section-lead, что уже
   верно используют HOW/PRICES/MODEL; подтягиваем hero и FAQ-рельс */
.hero__lead,
.faq__rail p {
  font-size: clamp(18px, 2.2vw, 21px);
}

/* — 21px: подзаголовок внутри карточки — */
.price-row__name,
.screen-card h3 {
  font-size: 21px;
}

/* — 24-28px: самостоятельный заголовок (уведомление/модалка) — */
.notice__title,
.notice__title--lg,
.faq__cta-card h3,
.modal__card h3 {
  font-size: clamp(24px, 2.8vw, 28px);
}

/* — цена в прайс-листе: единственная сознательно "числовая" крупная
   величина на странице, оставлена отдельной ролью, но диапазон сужен —
   было clamp(22,3,28), почти как у заголовков уведомлений */
.price-row__price {
  font-size: clamp(22px, 2.4vw, 26px);
}

/* ============================================================
   7) Прямые кнопки "Написать в Telegram/MAX" в карточке FAQ-CTA
      (2026-09-14) — быстрый путь рядом с формой, не вместо неё.
      Кнопки нарочно не заливные (accent-fill уже занят кнопкой
      отправки формы ниже) — окантовка, чтобы не спорить за внимание.
   ============================================================ */
.faq__direct { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.faq__direct-btn {
  flex: 1 1 180px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--accent);
  border: 1.5px solid rgba(79,93,224,.35); border-radius: 12px;
  padding: 11px 16px; transition: all .18s ease;
}
.faq__direct-btn:hover { background: rgba(79,93,224,.08); border-color: var(--accent); }
.faq__direct-or { margin: 14px 0 22px; font-size: 13px; color: var(--muted); text-align: center; }