/* ============================================================
   Продвижение на Авито - дизайн-система «Смена сцен», редакция 3
   (финальный rework 27.07.2026).

   Принципы этой редакции:
   1. Один контейнер, одна 12-колоночная база, одна шкала отступов.
   2. Три радиуса, одна толщина линий, одна высота кнопок.
   3. Волнистый переход ровно в двух местах, остальные переходы прямые.
   4. Unbounded только для H1, заголовков секций и крупных чисел.
   5. Секции разделяются сценой, отступом, линией и сеткой, а не декором.

   Старые блоки (PROCESS, TOOLS, FINAL CTA, CASE SLIDER v2) удалены
   целиком, а не перекрыты новыми правилами.
   ============================================================ */

/* ===== BLOCK: TOKENS START ===== */
:root {
  --av-g: #0B0D0C;            /* графит */
  --av-milk: #E8EAED;         /* холодный светло-серый, был молочный #F3F2ED */
  --av-white: #FFFFFF;
  --av-lime: #B9FF2C;         /* лайм */
  --av-cobalt: #3847E8;       /* кобальт */
  --av-lav: #DCDAF8;          /* лаванда */
  --av-ink: #111311;          /* текст на светлом */
  --av-ink-dim: #565A54;      /* вторичный на светлом */
  --av-milk-dim: #A6AAB0;     /* вторичный на темном */
  --av-danger: #C0341F;       /* ошибки формы, контраст на белом 6,1:1 */
  --av-gold: #C08A1E;         /* звезды отзывов, приглушенное золото */

  /* Алиасы старых имен (--av-bg, --av-text, --av-accent и другие) удалены:
     единственная страница, которая их использовала, - policy.html -
     переведена на общие токены и общий блок стилей POLICY PAGE. */

  /* Линии: одна толщина, два цвета по сцене */
  --av-line-light: rgba(17, 19, 17, 0.14);
  --av-line-dark: rgba(255, 255, 255, 0.24);

  /* Радиусы: ровно три размера на весь проект */
  --av-r-s: 10px;   /* поля ввода, мелкие метки */
  --av-r-m: 16px;   /* кнопки, средние плоскости */
  --av-r-l: 24px;   /* крупные плоскости и карточки */

  /* Шкала отступов */
  --av-s1: 4px;  --av-s2: 8px;  --av-s3: 12px; --av-s4: 20px;
  --av-s5: 32px; --av-s6: 48px; --av-s7: 72px; --av-s8: 104px;

  --av-font-display: Unbounded, "Arial Black", Arial, sans-serif;
  --av-font-body: Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --av-font-mono: "IBM Plex Mono", Consolas, Menlo, monospace;
  /* Цифры набираются Manrope с табличными знаками: у моноширинных нулей
     есть точка или косая черта, владелец их не принимает.
     Моно остается только для служебных текстовых меток. */
  --av-font-num: var(--av-font-body);

  --av-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --av-section-pad: clamp(48px, 4.4vw, 72px);
  --av-btn-h: 52px;
  --av-container: 1200px;
  --av-gutter: 32px;
}
@media (max-width: 768px) { :root { --av-gutter: 20px; } }
/* ===== BLOCK: TOKENS END ===== */

/* ===== BLOCK: BASE START ===== */
.av-page, .av-page *, .av-page *::before, .av-page *::after { box-sizing: border-box; }
.av-page {
  margin: 0;
  background: var(--av-milk);
  color: var(--av-ink);
  font: 400 17px/1.65 var(--av-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.av-page button, .av-page a, .av-page summary, .av-page label {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* color-scheme: сайт только светлый. Без этой строки системная темная тема
   Windows и Android перекрашивает поля ввода, чекбокс и полосу прокрутки */
/* Отступ прокрутки считается от фактической высоты шапки: она закреплена
   жестко и иначе накрывала бы заголовок секции при переходе по якорю */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--av-header-h, 100px) + 8px); background: var(--av-milk); color-scheme: light; }

/* :where - нулевая специфичность: классовые отступы всегда сильнее сброса */
.av-page :where(h1, h2, h3, p, ul, ol, dl, dd, dt, figure, blockquote) { margin: 0; padding: 0; }
.av-page img { max-width: 100%; height: auto; display: block; }
.av-page a { color: inherit; }
.av-page ::selection { background: var(--av-lime); color: var(--av-ink); }
.av-page :focus-visible { outline: 2px solid var(--av-cobalt); outline-offset: 3px; border-radius: 4px; }
/* На темной и кобальтовой сцене кобальтовый контур не читается: там лаймовый.
   ВАЖНО: у правила должен быть собственный блок объявлений. Когда его не было,
   селектор склеивался со следующим правилом и focus-visible получал кегль H1. */
.av-sc-dark :focus-visible, .av-sc-cobalt :focus-visible { outline-color: var(--av-lime); }

/* Типографическая иерархия.
   Unbounded: H1, заголовки секций и крупные числа. Manrope: H3, текст,
   интерфейс. IBM Plex Mono: служебные метки. */
.av-page h1 {
  font: 600 clamp(1.9rem, 1.35rem + 2.4vw, 3.5rem)/1.08 var(--av-font-display);
  letter-spacing: -0.022em; text-wrap: balance;
}
.av-page h2 {
  font: 600 clamp(1.5rem, 1.15rem + 1.85vw, 2.6rem)/1.14 var(--av-font-display);
  letter-spacing: -0.015em; text-wrap: balance;
}
.av-page h3 { font: 600 1.1875rem/1.35 var(--av-font-body); letter-spacing: -0.005em; }
.av-num { font-family: var(--av-font-num); font-variant-numeric: tabular-nums; }

/* Сцены секций */
.av-section { padding: var(--av-section-pad) 0; position: relative; }
.av-sc-dark { background: var(--av-g); color: var(--av-milk); }
.av-sc-white { background: var(--av-white); color: var(--av-ink); }
.av-sc-milk { background: var(--av-milk); color: var(--av-ink); }
.av-sc-cobalt { background: var(--av-cobalt); color: var(--av-white); }
.av-sc-lav { background: var(--av-lav); color: var(--av-ink); }
.av-sc-lime { background: var(--av-lime); color: var(--av-ink); }
.av-clip { overflow: hidden; }

/* Волнистый переход. Осталось ровно два места на всю страницу:
   лента ниш -> главный кейс и автор -> бесплатный разбор.
   Класс вешается на НИЖНЮЮ секцию, модификатор --from-* задает цвет верхней. */
.av-wave::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 48px;
  z-index: 3; pointer-events: none; background-color: var(--wave-color, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='52' viewBox='0 0 1200 52' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,28 Q75,6 150,28 T300,28 T450,28 T600,28 T750,28 T900,28 T1050,28 T1200,28 L1200,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat top / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='52' viewBox='0 0 1200 52' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,28 Q75,6 150,28 T300,28 T450,28 T600,28 T750,28 T900,28 T1050,28 T1200,28 L1200,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat top / 100% 100%;
}
/* Используются ровно два модификатора: других переходов на сайте нет */
@media (max-width: 768px) { .av-wave::before { height: 32px; } }
/* ===== BLOCK: BASE END ===== */

/* ===== BLOCK: UTILITIES START ===== */
.av-container { max-width: var(--av-container); margin: 0 auto; padding: 0 var(--av-gutter); }
.av-sprite { display: none; }
.av-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.av-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--av-lime); color: var(--av-ink); padding: 12px 20px;
  border-radius: var(--av-r-m); font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--av-ease);
}
.av-skip:focus { top: 16px; }

/* Общая шапка секции: заголовок и вводка на одной левой границе */
.av-head h2 + .av-intro { margin-top: 14px; }
/* Центрированный заголовок секции: подача по утвержденному образцу */
.av-head--center { text-align: center; }
.av-head--center .av-intro { margin-left: auto; margin-right: auto; }
.av-intro { max-width: 46em; font-size: 1.0625rem; line-height: 1.6; }
.av-sc-white .av-intro, .av-sc-milk .av-intro, .av-sc-lav .av-intro { color: var(--av-ink-dim); }
.av-sc-dark .av-intro { color: var(--av-milk-dim); }
.av-sc-cobalt .av-intro { color: rgba(255, 255, 255, 0.88); }

/* Блоки .av-lbl (служебная метка) и .av-fig b (крупный показатель) удалены:
   после rework 27.07 их не осталось в разметке, а селекторы у них потерялись -
   браузер выбрасывал объявления как ошибку разбора. */

/* Юридическая оговорка: минимум 14px, длина строки до 62em */
.av-disclaimer {
  margin-top: var(--av-s5); padding-top: var(--av-s4);
  border-top: 1px solid var(--av-line-light);
  max-width: 62em; font-size: 0.875rem; line-height: 1.6; color: var(--av-ink-dim);
}
.av-disclaimer--dark { border-top-color: var(--av-line-dark); color: rgba(255, 255, 255, 0.82); }

/* Текстовая ссылка со стрелкой: спокойная альтернатива кнопке */
.av-link {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 0.9375rem/1 var(--av-font-body); text-decoration: none;
  padding: 7px 0 5px; box-shadow: inset 0 -1px 0 var(--av-line-light);
}
.av-page a.av-link:hover { color: var(--av-cobalt); box-shadow: inset 0 -1px 0 var(--av-cobalt); }
/* ===== BLOCK: UTILITIES END ===== */

/* ===== BLOCK: COMPONENTS START ===== */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--av-r-m);
  font: 600 1rem/1.2 var(--av-font-body);
  cursor: pointer; border: none; text-decoration: none;
  min-height: var(--av-btn-h); padding: 8px 26px; text-align: center;
  transition: filter 0.15s var(--av-ease), border-color 0.15s var(--av-ease),
              color 0.15s var(--av-ease), transform 0.12s var(--av-ease);
}
.av-btn:active { transform: scale(0.985); }
.av-btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.av-arr { display: block; flex: none; transition: transform 0.15s var(--av-ease); }
.av-btn:hover .av-arr, .av-link:hover .av-arr { transform: translateX(4px); }

.av-btn--lime { background: var(--av-lime); color: var(--av-ink); }
.av-btn--lime:hover { filter: brightness(1.06); }
.av-btn--dark { background: var(--av-g); color: var(--av-milk); }
.av-btn--dark:hover { filter: brightness(1.45); }
.av-btn--outline { background: transparent; color: var(--av-ink); border: 1px solid rgba(17, 19, 17, 0.3); }
.av-btn--outline:hover { border-color: var(--av-cobalt); color: var(--av-cobalt); }

/* Специфичность выше `.av-page a`: цвет кнопки-ссылки не наследуется от сцены */
.av-page a.av-btn--lime { color: var(--av-ink); }
.av-page a.av-btn--dark { color: var(--av-milk); }
.av-page a.av-btn--outline { color: var(--av-ink); }
.av-page a.av-btn--outline:hover { color: var(--av-cobalt); }
.av-page a.av-skip { color: var(--av-ink); }

/* Блоки .av-shot и .av-shot__zoom удалены по той же причине, что .av-lbl:
   разметки под них нет с 27.07, а селекторы были потеряны. Отчет кейса
   оформляет .av-case1__shot в блоке MAIN CASE. */

/* Зона нажатия на тач-экранах.
   Текстовые ссылки-действия имели 19-33px по высоте: пальцем попадать тяжело.
   Там, где подчеркивание держит смысл (Telegram, отчет, политика), высоту
   добирает невидимая область ::after - линия остается прижатой к тексту.
   Строчным ссылкам внутри абзацев хватает вертикальных полей: у инлайновых
   элементов они расширяют зону нажатия, не двигая соседние строки. */
@media (hover: none) and (pointer: coarse) {
  .av-link, .av-page .av-screens__open { min-height: 44px; }

  .av-page a.av-hero__tg, .av-page a.av-proj__link, .av-page .av-footer__policy { position: relative; }
  .av-page a.av-hero__tg::after, .av-page a.av-proj__link::after, .av-page .av-footer__policy::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 44px;
  }

  .av-contacts__line a { padding: 11px 0; }
  .av-consent__txt a, .av-faq__a a { padding: 12px 0; }
  .av-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .av-footer__legal summary { padding: 11px 0; }
  /* «Наверх» под статьей блога был 14px высотой */
  .av-post__back, .av-policy__back { min-height: 44px; align-items: center; }
}
/* ===== BLOCK: COMPONENTS END ===== */

/* ===== BLOCK: PRELOADER START (шторки расходятся) =====
   Анимация раскрытия задана сразу, но с задержкой 2,6 с. Скрипт,
   когда страница готова, обнуляет задержку - и шторки уходят раньше.
   Поэтому без скрипта прелоадер все равно откроется сам. */
.av-preloader { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; }
.av-preloader-seen .av-preloader { display: none; }
.av-preloader__shade { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--av-g); }
.av-preloader__shade--t { top: 0; animation: av-pre-up 0.7s cubic-bezier(0.7, 0, 0.2, 1) 2.6s forwards; }
.av-preloader__shade--b { bottom: 0; animation: av-pre-down 0.7s cubic-bezier(0.7, 0, 0.2, 1) 2.6s forwards; }
.av-preloader__mark {
  position: absolute; left: 50%; top: 50%; width: clamp(64px, 8vw, 92px); height: auto;
  transform: translate(-50%, -50%);
  animation: av-pre-mark 0.5s cubic-bezier(0.7, 0, 0.2, 1) 2.6s forwards;
}
/* Скрипт снял задержку: то же движение, но сразу */
.av-preloader--off .av-preloader__shade--t,
.av-preloader--off .av-preloader__shade--b,
.av-preloader--off .av-preloader__mark { animation-delay: 0s; }
@keyframes av-pre-up { to { transform: translateY(-100%); } }
@keyframes av-pre-down { to { transform: translateY(100%); } }
@keyframes av-pre-mark { to { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } }
/* При системной настройке «уменьшить движение» прелоадера нет */
@media (prefers-reduced-motion: reduce) { .av-preloader { display: none; } }
/* ===== BLOCK: PRELOADER END ===== */

/* ===== BLOCK: HEADER START (черная капсула с лаймовым знаком) =====
   Шапка не полоса, а скругленная плашка внутри контейнера: та же
   форма, что у карточек всей страницы. Фон обертки прозрачный,
   поэтому при прокрутке капсула плывет над секциями, а не тащит
   за собой молочный прямоугольник. */
/* Закреплена жестко, а не липко. Причина: в Тильде шапка живет отдельной
   страницей, и ее запись по высоте равна самой шапке. Липкому позиционированию
   в такой коробке некуда двигаться, и шапка просто уезжает вверх с контентом.
   Место в потоке держит распорка .av-header__spacer. */
.av-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: transparent; padding: 14px 0; }
.av-header__spacer { height: var(--av-header-h, 100px); }
/* Обертка блока шапки не должна обрезать содержимое: с обрезкой мобильное
   меню во весь экран открывалось, но было не видно. z-index держит шапку
   и меню выше блоков контента: в Тильде каждый блок - отдельная обертка,
   и без этого меню уходило под первый экран. */
.av-page--chrome { overflow: visible; position: relative; z-index: 40; }
.av-header__in {
  display: flex; align-items: center; gap: 32px;
  background: var(--av-ink); color: var(--av-milk);
  border-radius: 999px; padding: 12px 14px 12px 26px;
  transition: box-shadow 0.25s var(--av-ease);
}
/* Тень появляется только когда под шапку заходит контент */
.av-header--compact .av-header__in { box-shadow: 0 10px 30px rgba(17, 19, 17, 0.22); }
.av-logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.av-logo svg { display: block; }
/* Знак лаймовый, название белое: два лаймовых элемента подряд
   перетянули бы внимание с кнопки первого экрана */
.av-page .av-header a.av-logo { color: var(--av-lime); }
.av-header .av-logo__name { font: 600 1rem/1.25 var(--av-font-body); letter-spacing: 0.01em; color: var(--av-white); }
.av-nav { display: flex; gap: 30px; margin-left: auto; }
.av-page .av-nav a { color: rgba(255, 255, 255, 0.86); text-decoration: none; font: 500 1rem/1 var(--av-font-body); padding: 6px 0; }
.av-page .av-nav a:hover { color: var(--av-lime); box-shadow: inset 0 -2px 0 var(--av-lime); }
.av-header .av-btn { flex: none; min-height: 48px; padding: 10px 22px; font-size: 1rem; }
/* Заметное состояние фокуса: на черном контур лаймовый, на молочном кобальтовый */
.av-header a:focus-visible, .av-header button:focus-visible { outline: 3px solid var(--av-lime); outline-offset: 3px; border-radius: 8px; }
.av-hero a:focus-visible { outline: 3px solid var(--av-cobalt); outline-offset: 3px; border-radius: 8px; }
.av-burger {
  display: none; margin-left: auto; flex: none;
  width: 46px; height: 46px; border-radius: var(--av-r-s);
  background: transparent; border: none;
  color: var(--av-white); cursor: pointer; position: relative;
}
.av-burger:hover { color: var(--av-lime); }
.av-burger span, .av-burger span::before, .av-burger span::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 2px;
  background: currentColor; transition: transform 0.25s var(--av-ease), opacity 0.2s;
}
.av-burger span { top: 50%; margin-top: -1px; }
/* left/right у псевдоэлементов считаются от самой полоски, а не от кнопки */
.av-burger span::before, .av-burger span::after { left: 0; right: 0; }
.av-burger span::before { top: -7px; }
.av-burger span::after { top: 7px; }
.av-burger[aria-expanded="true"] span { transform: rotate(45deg); }
.av-burger[aria-expanded="true"] span::before { transform: rotate(-90deg) translateX(-7px); }
.av-burger[aria-expanded="true"] span::after { opacity: 0; }
@media (max-width: 900px) {
  .av-nav { display: none; }
  .av-header .av-btn { display: none; }
  .av-burger { display: block; }
  .av-header__in { padding: 10px 10px 10px 20px; }
}
@media (max-width: 700px) { .av-header { padding: 10px 0; } }
/* ===== BLOCK: HEADER END ===== */

/* ===== BLOCK: MOBILE MENU START ===== */
/* Меню занимает весь экран, поэтому учитывает вырез и домашнюю полосу:
   без env() нижний пункт на iPhone уезжает под индикатор жеста */
.av-menu {
  position: fixed; inset: 0; z-index: 20;
  background: var(--av-milk); color: var(--av-ink);
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  padding: calc(32px + env(safe-area-inset-top)) calc(32px + env(safe-area-inset-right))
           calc(32px + env(safe-area-inset-bottom)) calc(32px + env(safe-area-inset-left));
  overscroll-behavior: contain; overflow-y: auto;
}
.av-menu--open { display: flex; }
.av-page .av-menu a:not(.av-btn) {
  color: var(--av-ink); text-decoration: none;
  font: 600 clamp(1.45rem, 5.6vw, 1.95rem)/1.2 var(--av-font-display);
  padding: 13px 8px; border-radius: var(--av-r-s);
}
.av-page .av-menu a:not(.av-btn):hover { color: var(--av-cobalt); }
.av-menu .av-btn { margin-top: 24px; }
/* ===== BLOCK: MOBILE MENU END ===== */

/* ===== BLOCK: HERO START (две колонки в одной сетке) ===== */
.av-hero { background: var(--av-milk); color: var(--av-ink); padding: clamp(24px, 2.8vw, 44px) 0 clamp(28px, 3.2vw, 50px); }
/* Верх обеих колонок на одной оси, высоту задает содержимое */
.av-hero__grid {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 54fr);
  gap: clamp(24px, 4%, 56px); align-items: stretch;
}
/* Левая колонка: обычный поток, никаких распорок */
.av-hero__col { display: flex; flex-direction: column; align-items: flex-start; }
.av-hero__h1 {
  margin: 0 0 clamp(26px, 2.6vw, 40px);
  font: 600 clamp(1.9rem, 1.05rem + 2vw, 2.75rem)/1.1 var(--av-font-display);
  letter-spacing: -0.024em; color: var(--av-ink);
}
/* Единственный лаймовый акцент в тексте. Поля в em, поэтому не разъезжаются
   при смене кегля; clone держит выделение при переносе строки. */
.av-hero__mark {
  background: var(--av-lime); color: var(--av-ink);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0.04em 0.13em 0.09em; border-radius: var(--av-r-s);
}
/* Кнопка и Telegram - одна группа действий на общей базовой линии */
.av-hero__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: clamp(28px, 2.8vw, 40px) 0 0; }
.av-hero__act .av-btn { min-height: 58px; padding: 13px 22px; font-size: 1rem; }
.av-page a.av-hero__tg {
  color: var(--av-ink); text-decoration: none;
  font: 600 0.9375rem/1 var(--av-font-body); padding: 10px 0 8px; white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(17, 19, 17, 0.22);
}
.av-page a.av-hero__tg:hover { color: var(--av-cobalt); box-shadow: inset 0 -2px 0 var(--av-cobalt); }
.av-hero__note {
  margin: clamp(22px, 2.1vw, 30px) 0 0;
  font: 500 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.5 var(--av-font-body);
  color: var(--av-ink);
}
/* Правая колонка: вторая половина экрана, а не приставной виджет */
.av-hero__card {
  background: var(--av-ink); color: var(--av-milk); border-radius: var(--av-r-l);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px);
}
/* flex: 1 отдает портрету свободную высоту карточки, но сам ее не создает */
/* Поля по бокам держат кольцо, в котором живут летающие предметы:
   без них они легли бы поверх данных на скриншоте */
.av-hero__art { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
/* Селектор через picture: иначе правило накрывает и летающие предметы */
.av-hero__art > picture { position: relative; z-index: 1; display: block; width: 100%; }
/* В первом экране стоит настоящий скриншот кабинета, поэтому скругление
   и тонкая рамка: без них белый прямоугольник висит на графите обрубком */
.av-hero__art > picture img {
  display: block; width: 100%; height: auto;
  border-radius: var(--av-r-m); border: 1px solid rgba(255, 255, 255, 0.14);
}

.av-hero__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px);
}
/* Факты пилюлями, как метки времени и цены в остальных блоках */
/* Ряд по центру карточки и с переносом. Раньше стоял nowrap с выключкой
   влево: тройка не влезала в карточку по ширине (нужно 578 px, есть 558),
   вылезала за правый край, и вся группа сидела левее середины. Кегль 15 px
   и поля 11 дают запас 16 px: до 1200 px ряд держится одной строкой,
   ниже переносится и все равно стоит по центру, ничего не обрезается. */
.av-hero__facts { grid-template-columns: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.av-hero__facts li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  font: 600 clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem)/1.2 var(--av-font-body);
}
.av-hero__facts li::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--av-lime);
}

/* Ниши: сразу за сеткой, в том же контейнере. Разделительной линейки нет. */
.av-niches {
  margin-top: clamp(28px, 3vw, 52px);
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(16px, 2vw, 30px); align-items: start;
}
/* Моноширинный тут по назначению: служебная подпись, а не контент */
.av-niches__cap { margin: 0; padding-top: 8px; font: 500 0.8125rem/1.5 var(--av-font-mono); color: var(--av-ink-dim); }
.av-niches__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.av-niches__list li {
  background: var(--av-white); color: var(--av-ink);
  border: 1px solid var(--av-line-light); border-radius: 999px;
  padding: 9px 16px; font: 500 0.9375rem/1.2 var(--av-font-body);
}

@media (max-width: 1000px) {
  .av-hero__grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
  .av-hero__art img { max-width: min(360px, 52vw); }
}
@media (max-width: 700px) {
  .av-hero__act { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 26px; }
  .av-hero__act .av-btn { width: 100%; min-height: 56px; }
  .av-hero__tg { align-self: flex-start; }
  .av-hero__card { padding: 20px 18px 22px; gap: 18px; }
  /* Снимок уже кольца, поэтому центрируем сам рисунок: при выключке влево
     справа оставалось 79px пустоты и карточка выглядела кривой */
  .av-hero__art img { max-width: min(300px, 66vw); margin-inline: auto; }
  /* Перенос и центр заданы выше, здесь только поля пилюль: на узкой карточке
     каждая стоит отдельной строкой, и с полями 11 они выглядят обрубками */
  .av-hero__facts li { padding: 9px 13px; }
  .av-niches { grid-template-columns: 1fr; gap: 13px; margin-top: 28px; }
  .av-niches__cap { padding-top: 0; }
  .av-niches__list { gap: 7px; }
  .av-niches__list li { padding: 8px 14px; font-size: 0.875rem; }
}
/* ===== BLOCK: HERO END ===== */

/* ===== BLOCK: SERVICES START (шесть форматов с ценами) =====

   Шесть форматов равными карточками в два ряда, остальной
   прайс - оформление профиля, дизайн, массовая загрузка -
   свернут в одну строку «Полный прайс». Состав работ у каждой
   услуги тоже свернут: у ведения их 23 пункта.

   Цены оформлены одинаково у всех карточек: один кегль,
   цвет наследуется от карточки, единица измерения приглушена.
   ========================================================== */

/* Заголовку задана высота в две строки: без этого плашка с ценой
   съезжает по вертикали в карточках с однострочным названием */
/* hyphens, а не break-word: «Сопровождение» длиннее своей колонки на широких
   экранах, и разрыв без переноса рвал слово посреди («Сопровождени/е») */
.av-svc .av-card h3 { min-height: 2.5em; padding-left: 0; min-width: 0; hyphens: auto; }
/* Объект стоит внутри карточки слева от названия и не забирает
   отдельную строку внизу */

/* Подвал карточки. В разметке цена идет первой: она важнее и читается
   раньше. column-reverse ставит «Подробнее» выше, а цену в самый низ. */
.sv-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column-reverse; }
.sv-foot .sv-more { margin-top: 0; padding-top: 0; }

/* Цена строкой внизу карточки, отделена линией: единица слева, сумма справа.
   Плашка не годилась - единица измерения стояла внутри цены и делала
   плашки разной длины и разного веса. */
.sv-price {
  margin-top: 16px; padding-top: 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--av-line-light);
}
.av-card--cobalt .sv-price, .av-card--dark .sv-price { border-top-color: rgba(255, 255, 255, 0.24); }
.sv-price__unit { font: 500 0.9375rem/1.2 var(--av-font-body); opacity: 0.72; }
.sv-price__sum {
  font: 600 clamp(1.25rem, 1rem + 0.7vw, 1.5rem)/1 var(--av-font-num);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.sv-for { margin-top: 12px !important; }

/* Прозрачность настоящая, подложка не нужна ни на кобальте,
   ни на графите, ни на светлом */
/* Значок и название стоят одной строкой. Абсолютного позиционирования
   нет намеренно: при нем объект наезжал на абзац под заголовком. */
.sv-head { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 16px); }
/* Верхняя граница объекта 74px, а не 90px: на 1280 и шире объект отбирал
   у названия те 15px, которых не хватало самому длинному слову */
.sv-art { flex: none; width: clamp(64px, 5.2vw, 74px); pointer-events: none; }
.sv-art img { display: block; width: 100%; height: auto; }

/* Состав работ в раскрывашке: иначе блок превращается в стену текста */
.sv-more { margin-top: 14px; padding-top: 0; }
.sv-more summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 9px;
  font: 600 0.9375rem/1.2 var(--av-font-body); color: var(--av-cobalt);
  padding: 8px 0; min-height: 40px;
}
.sv-more summary::-webkit-details-marker { display: none; }
.sv-more summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.16s var(--av-ease);
}
.sv-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.av-card--cobalt .sv-more summary, .av-card--dark .sv-more summary { color: var(--av-white); }
.sv-more ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.sv-more li { position: relative; padding-left: 16px; font-size: 0.9375rem; line-height: 1.5; }
.sv-more li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.av-card--milk .sv-more li, .av-card--line .sv-more li { color: var(--av-ink-dim); }
.sv-more .av-btn { margin-top: 18px; }

/* Полный прайс: одна свернутая строка на всю ширину.
   Отступ сверху равен зазору в сетке карточек, чтобы плашка
   читалась как отдельный элемент, а не как приклеенный к ряду. */
.sv-all { margin-top: 20px; border: 1px solid var(--av-line-light); border-radius: var(--av-r-l); background: var(--av-white); }
.sv-all > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px clamp(20px, 2vw, 28px); min-height: 60px;
  font: 600 1.0625rem/1.3 var(--av-font-body);
}
.sv-all > summary::-webkit-details-marker { display: none; }
.sv-all > summary span { font-weight: 400; font-size: 0.9375rem; color: var(--av-ink-dim); }
.sv-all > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--av-cobalt); border-bottom: 2px solid var(--av-cobalt);
  transform: rotate(45deg) translateY(-3px); transition: transform 0.16s var(--av-ease);
}
.sv-all[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.sv-all__in { padding: 0 clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 30px); display: grid; gap: clamp(24px, 3vw, 38px); }
/* h3, а не h4: уровни заголовков внутри секции идут подряд, без пропуска */
.sv-all h3 { margin: 0 0 14px; font: 600 1.0625rem/1.3 var(--av-font-display); letter-spacing: -0.01em; }

.sv-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.sv-tier__t { margin: 0; font: 600 1rem/1.3 var(--av-font-body); }
.sv-tier__p { margin: 5px 0 0; font: 600 1.125rem/1 var(--av-font-num); font-variant-numeric: tabular-nums; }
.sv-tier ul { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 7px; }
.sv-tier li { position: relative; padding-left: 15px; font-size: 0.9375rem; line-height: 1.45; color: var(--av-ink-dim); }
.sv-tier li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--av-cobalt); }

.sv-rows { list-style: none; margin: 0; padding: 0; }
.sv-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--av-line-light); font-size: 0.9375rem; }
.sv-rows li:first-child { border-top: 0; }
.sv-rows b { flex: none; font: 600 0.9375rem/1 var(--av-font-num); font-variant-numeric: tabular-nums; }

/* Условия работы вынесены в подвал, в блок «Правовая информация».
   Здесь остается только строка про рекламный бюджет: она меняет
   смысл самой цены и должна стоять рядом с ней. */
.sv-budget { margin: clamp(18px, 2vw, 26px) 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--av-ink-dim); }

@media (max-width: 900px) { .sv-tiers { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .av-svc .av-card h3 { min-height: 0; }
  .sv-art { width: 62px; }
}
/* На 320px длинное слово «Сопровождение» рядом с объектом не помещалось
   и обрезалось краем карточки: значок встает над названием, строка целая */
@media (max-width: 400px) {
  .sv-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* Окно 1025-1200: карточки уже стоят по три в ряду, а контейнер еще не дорос
   до 1200 - самому длинному слову рядом с объектом не хватает места.
   Раскладка та же, что на узких экранах: объект над названием.
   На автоперенос не рассчитываем: словарь переносов есть не везде. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .sv-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ===== BLOCK: SERVICES END ===== */

/* ===== BLOCK: HELP START (бенто-сетка по образцу) ===== */
.av-bento {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(216px, auto); gap: 20px; margin-top: var(--av-s5);
}
.av-bento__card {
  position: relative; overflow: hidden; border-radius: var(--av-r-l);
  display: flex; min-width: 0;
}
.av-bento__txt { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; align-items: flex-start; }
.av-bento__txt h3 { font: 600 1.25rem/1.25 var(--av-font-display); letter-spacing: -0.01em; }
.av-bento__txt p { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
.av-bento__txt .av-link { margin-top: auto; padding-top: 16px; }
.av-bento__art { display: block; align-self: end; flex: none; }
.av-bento__art img { display: block; }

/* Большая темная карточка: текст слева, иллюстрация справа.
   Фон #111311 совпадает с фоном картинки, поэтому шва не видно */
.av-bento__card--wide { grid-column: span 2; background: var(--av-ink); color: var(--av-milk); }
.av-bento__card--wide .av-bento__txt { flex: 1; }
.av-bento__card--wide .av-bento__txt p { color: rgba(243, 242, 237, 0.82); max-width: 26em; }
.av-bento__card--wide .av-bento__art { align-self: center; }
.av-bento__card--wide .av-bento__art img { width: 300px; height: auto; }

/* Высокая карточка справа: текст сверху, иллюстрация снизу */
.av-bento__card--tall {
  grid-column: 3; grid-row: 1 / span 2;
  background: var(--av-white); border: 1px solid var(--av-line-light); flex-direction: column;
}
.av-bento__card--tall .av-bento__txt p { color: var(--av-ink-dim); }
.av-bento__card--tall .av-bento__art { width: 100%; margin-top: auto; }
.av-bento__card--tall .av-bento__art img { width: 100%; height: auto; }

/* Малые карточки: текст сверху, иллюстрация в правом нижнем углу */
.av-bento__card--sm { background: var(--av-milk); flex-direction: column; }
.av-bento__card--sm .av-bento__txt { padding-bottom: 8px; }
.av-bento__card--sm .av-bento__txt h3 { font-size: 1.125rem; }
.av-bento__card--sm .av-bento__txt p { color: var(--av-ink-dim); font-size: 0.9375rem; }
.av-bento__card--sm .av-bento__art { align-self: flex-end; margin-top: auto; }
/* Объект крупный: высоту нижнего ряда задает соседняя высокая карточка,
   и при 168px под текстом оставался провал в сотню пикселей */
.av-bento__card--sm .av-bento__art img { width: clamp(180px, 17vw, 250px); height: auto; }
.av-page a.av-link--light { color: var(--av-milk); box-shadow: inset 0 -1px 0 rgba(243, 242, 237, 0.4); }
.av-page a.av-link--light:hover { color: var(--av-lime); box-shadow: inset 0 -1px 0 var(--av-lime); }
@media (max-width: 1024px) {
  .av-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av-bento__card--wide { grid-column: span 2; }
  .av-bento__card--tall { grid-column: auto; grid-row: auto; }
  .av-bento__card--tall .av-bento__art img { max-width: 320px; margin: 0 auto; }
}
/* На телефоне объекты уходят наверх слева и уменьшаются до размера
   служебной иконки. В прежнем виде картинка занимала до 451px высоты,
   то есть половину экрана, и текст проваливался под нее. */
@media (max-width: 700px) {
  .av-bento { grid-template-columns: 1fr; }
  .av-bento__card { flex-direction: column; }
  .av-bento__card--wide { grid-column: auto; }
  .av-bento__card--wide .av-bento__art,
  .av-bento__card--tall .av-bento__art,
  .av-bento__card--sm .av-bento__art,
  .av-bento__art {
    order: -1; align-self: flex-start; width: auto; margin: 0;
    padding: clamp(18px, 4.6vw, 24px) 0 0 clamp(18px, 4.6vw, 24px);
  }
  .av-bento__card--wide .av-bento__art img,
  .av-bento__card--tall .av-bento__art img,
  .av-bento__card--sm .av-bento__art img,
  .av-bento__art img { width: 64px; max-width: none; height: auto; margin: 0; }
  .av-bento__txt { padding-top: 14px; }
}
/* ===== BLOCK: HELP END ===== */

/* ===== BLOCK: START START (три карточки с фото) ===== */
.av-start__grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: var(--av-s5);
}
.av-start__card { background: var(--av-white); border-radius: var(--av-r-l); overflow: hidden; display: flex; flex-direction: column; }
/* Пропорция кадра ровно 3:2, как у исходных фотографий: обрезки нет */
.av-start__shot { position: relative; aspect-ratio: 3 / 2; }
.av-start__shot img { width: 100%; height: 100%; object-fit: cover; }
/* Подпись на фото - обычный текст, а не запеченная в картинку надпись */
.av-start__chip {
  position: absolute; left: 16px; top: 16px;
  background: var(--av-white); color: var(--av-ink);
  font: 500 0.8125rem/1 var(--av-font-mono);
  padding: 9px 13px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(17, 19, 17, 0.14);
}
.av-start__txt { padding: 20px 22px 24px; }
.av-start__txt h3 { font-size: 1.125rem; }
.av-start__txt p { margin-top: 9px; font-size: 0.9375rem; line-height: 1.5; color: var(--av-ink-dim); }
@media (max-width: 900px) { .av-start__grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
/* ===== BLOCK: START END ===== */

/* ===== BLOCK: CARD SYSTEM START =====
   Единая карточная система. Вся страница собрана из скругленных плашек
   на спокойной сцене: заголовок, короткий текст, картинка внутри карточки.
   Сетка одна на все секции - 12 колонок с зазором 20px. */
.av-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px; margin-top: var(--av-s5);
}
.av-col-3 { grid-column: span 3; }
.av-col-4 { grid-column: span 4; }
.av-col-5 { grid-column: span 5; }
.av-col-6 { grid-column: span 6; }
.av-col-7 { grid-column: span 7; }
.av-col-8 { grid-column: span 8; }
.av-col-9 { grid-column: span 9; }
.av-col-12 { grid-column: span 12; }

/* Цвет текста задается явно: иначе светлая карточка на кобальтовой
   или графитовой сцене наследует белый текст и перестает читаться */
.av-card {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--av-white); color: var(--av-ink); border-radius: var(--av-r-l);
  padding: clamp(22px, 2.2vw, 30px);
  display: flex; flex-direction: column;
}
.av-card--milk { background: var(--av-milk); color: var(--av-ink); }
.av-card--dark { background: var(--av-ink); color: var(--av-milk); }
.av-card--cobalt { background: var(--av-cobalt); color: var(--av-white); }
.av-card--line { border: 1px solid var(--av-line-light); }
/* Карточка, целиком занятая изображением */
.av-card--flush { padding: 0; }
/* Карточка в две колонки: текст слева, картинка справа */
.av-card--row { flex-direction: row; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.av-card--row > .av-card__body { flex: 1; min-width: 0; }

/* Крупный номер этапа: лаймовый, в верхнем правом углу карточки, рядом
   с иконкой. Набран Manrope, а не моноширинным: у моноширинных нулей
   есть точка или косая черта внутри, владелец их не принимает. */
.av-card__num {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(10px, 1.4vw, 18px); top: clamp(4px, 0.8vw, 10px);
  font: 800 clamp(3.5rem, 2.2rem + 4.4vw, 6.5rem)/0.9 var(--av-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em; color: var(--av-lime); opacity: 0.6;
}
.av-card--dark .av-card__num, .av-card--cobalt .av-card__num { opacity: 0.7; }
.av-card h3, .av-card__t { font: 600 1.25rem/1.25 var(--av-font-display); letter-spacing: -0.012em; }
.av-card p { margin-top: 12px; font-size: 1rem; line-height: 1.52; }
.av-card--milk p, .av-card--line p { color: var(--av-ink-dim); }
.av-card--dark p { color: rgba(243, 242, 237, 0.82); }
.av-card--cobalt p { color: rgba(255, 255, 255, 0.88); }
.av-card__foot { margin-top: auto; padding-top: 18px; font-size: 0.9375rem; }
.av-card__foot b { font-weight: 600; }

/* Крупное число внутри карточки */
.av-card__n {
  display: block; font: 600 clamp(2rem, 1.2rem + 2.2vw, 3rem)/1.05 var(--av-font-num);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.av-card__n small { font-size: 0.46em; font-weight: 500; }
.av-card--milk .av-card__n, .av-card--line .av-card__n { color: var(--av-cobalt); }
.av-card--dark .av-card__n, .av-card--cobalt .av-card__n { color: var(--av-lime); }
.av-card__cap { margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; color: var(--av-ink-dim); }
.av-card--dark .av-card__cap, .av-card--cobalt .av-card__cap { color: rgba(255, 255, 255, 0.85); }

/* Список внутри карточки: без линеек, с галочками */
.av-card__list { list-style: none; display: grid; gap: 11px; margin-top: 16px; }
.av-card__list li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.5; }
.av-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--av-cobalt); border-bottom: 2.5px solid var(--av-cobalt);
  transform: rotate(-45deg);
}
.av-card--dark .av-card__list li::before, .av-card--cobalt .av-card__list li::before { border-color: var(--av-lime); }
.av-card--dark .av-card__list li, .av-card--cobalt .av-card__list li { color: rgba(255, 255, 255, 0.9); }

/* Плашка поверх изображения, как в блоке «Начнем за 10 минут» */
.av-pill {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  background: var(--av-white); color: var(--av-ink);
  font: 500 0.8125rem/1 var(--av-font-mono);
  padding: 9px 13px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(17, 19, 17, 0.14);
}
/* Чипы внутри карточки */
.av-card__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.av-card__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--av-milk); color: var(--av-ink); border-radius: 999px;
  padding: 9px 14px; font-size: 0.9375rem; line-height: 1.2;
}
.av-card__chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--av-cobalt); flex: none; }
.av-card--cobalt .av-card__chips li { background: rgba(255, 255, 255, 0.14); color: var(--av-white); }
.av-card--cobalt .av-card__chips li::before { background: var(--av-lime); }

@media (max-width: 1024px) {
  .av-col-3, .av-col-4, .av-col-5 { grid-column: span 6; }
  .av-col-7, .av-col-8, .av-col-9 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .av-grid { gap: 14px; }
  .av-col-3, .av-col-4, .av-col-5, .av-col-6, .av-col-7, .av-col-8, .av-col-9 { grid-column: span 12; }
  .av-card--row { flex-direction: column; align-items: flex-start; }
}
/* ===== BLOCK: CARD SYSTEM END ===== */

/* ===== BLOCK: MAIN CASE START (белая сцена, рассказ и доказательство) ===== */
/* Заголовок по центру, как у всех остальных секций */
.av-case1__head { margin-bottom: clamp(26px, 2.8vw, 44px); text-align: center; }
.av-case1__label { margin: 0 0 12px; font: 500 0.8125rem/1 var(--av-font-mono); color: var(--av-cobalt); }
.av-case1__head h2 { margin: 0; font: 600 clamp(1.9rem, 1.2rem + 2vw, 3rem)/1.08 var(--av-font-display); letter-spacing: -0.022em; }

/* Колонки одной высоты: карточка слева тянется под высоту отчета */
.av-case1__grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 56fr); gap: clamp(24px, 2%, 32px); align-items: stretch; }
/* Рассказ лежит в карточке: раньше это был единственный текст
   прямо на сцене, без карточки вокруг */
.av-case1__col { align-items: flex-start; }
.av-case1__problem { margin: 0; font: 400 clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem)/1.55 var(--av-font-body); }
.av-case1__col h3 { margin: clamp(26px, 2.6vw, 38px) 0 0; font: 600 1.125rem/1.25 var(--av-font-display); letter-spacing: -0.01em; }
.av-case1__did { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.av-case1__did li { position: relative; padding-left: 26px; font-size: 1.0625rem; line-height: 1.5; }
.av-case1__did li::before {
  content: ""; position: absolute; left: 0; top: 0.44em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--av-cobalt); border-bottom: 2.5px solid var(--av-cobalt);
  transform: rotate(-45deg);
}
/* Строка расходов прижата к низу: иначе внизу растянутой карточки пустота */
.av-case1__spend { margin-top: auto; padding-top: clamp(24px, 2.4vw, 34px); font-size: 1.0625rem; line-height: 1.5; color: var(--av-ink-dim); }
.av-case1__spend b { color: var(--av-ink); font-weight: 600; }

/* Отчет показан на экране ноутбука: у картинки своя форма, поэтому
   ни рамки, ни фона, ни скругления у карточки нет. Ссылка осталась:
   без JavaScript браузер откроет файл, с JavaScript перехватит dialog. */
.av-case1__shot { display: block; align-self: center; }
.av-page a.av-case1__shot { color: inherit; text-decoration: none; }
.av-case1__shot img { display: block; width: 100%; height: auto; }
.av-case1__shot:focus-visible { outline: 3px solid var(--av-cobalt); outline-offset: 6px; border-radius: 8px; }
.av-case1__shot img { transition: transform 0.2s var(--av-ease); }
.av-case1__shot:hover img { transform: translateY(-4px); }

/* Полоса результатов вплотную к отчету: она его продолжение, а не отдельный блок */
.av-case1__res {
  margin-top: clamp(12px, 1.1vw, 15px);
  background: var(--av-ink); color: var(--av-milk); border-radius: var(--av-r-l);
  padding: clamp(26px, 2.8vw, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px);
}
.av-case1__res b {
  display: block; font: 600 clamp(2.25rem, 1.4rem + 2.8vw, 4rem)/1 var(--av-font-num);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--av-lime); white-space: nowrap;
}
.av-case1__res b small { font-size: 0.42em; font-weight: 500; }
.av-case1__res span { display: block; margin-top: 14px; font: 600 1.1875rem/1.35 var(--av-font-body); color: var(--av-white); }

.av-case1 .av-disclaimer { margin-top: clamp(18px, 2vw, 26px); }

@media (max-width: 1000px) {
  .av-case1__grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 34px); }
  .av-case1__res { grid-template-columns: 1fr 1fr; }
  .av-case1__res > :last-child { grid-column: 1 / -1; }
}
/* В одну колонку показатели читаются по центру: при выключке влево цифра
   и подпись начинались на 40px, а снимок отчета над ними - на 20px,
   и колонка выглядела сдвинутой. */
@media (max-width: 700px) {
  .av-case1__res { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; text-align: center; }
  .av-case1__res > :last-child { grid-column: auto; }
  .av-case1__shot { width: 100%; }
  .av-case1__shot img { margin-inline: auto; }
}
/* ===== BLOCK: MAIN CASE END ===== */

/* ===== BLOCK: METHOD START (молочная сцена, четыре карточки и панель) ===== */
/* Иконка и метка времени в одной строке сверху карточки */
.av-step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* Иконка этапа: фон совпадает с белой карточкой, подложка не нужна */
.av-step__art { display: block; position: relative; z-index: 1; }
.av-step__art img { width: 76px; height: 76px; }
/* Моноширинный тут по назначению: это служебная подпись, а не контент */
.av-step__when {
  flex: none; background: var(--av-milk); color: var(--av-cobalt);
  border-radius: 999px; padding: 7px 12px; white-space: nowrap;
  font: 500 0.8125rem/1 var(--av-font-mono);
}
.av-method .av-card h3 { position: relative; z-index: 1; font-size: 1.125rem; }
.av-method .av-card p { position: relative; z-index: 1; }
.av-kit__art { display: block; flex: none; }
.av-kit__art img { width: clamp(160px, 18vw, 230px); height: auto; }
/* На телефоне объект в 160px висел внизу слева отдельно от текста и читался
   как случайная картинка. Уводим наверх и приравниваем к иконке этапа. */
@media (max-width: 700px) {
  .av-kit__art { order: -1; align-self: flex-start; margin-bottom: 14px; }
  .av-kit__art img { width: 64px; }
}
.av-kit__price { margin-top: 22px; font-size: 1.0625rem; font-weight: 600; }
/* Не заливка на треть строки, а линия под текстом: маркерная подсветка
   налезала на нижние выносные элементы букв */
.av-kit__price b {
  font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--av-lime);
  text-decoration-thickness: 3px; text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}
/* ===== BLOCK: METHOD END ===== */

/* ===== BLOCK: PROJECTS START (лента проектов) =====
   Слева заголовок и управление, справа горизонтальная лента.
   Прокрутка нативная: scroll-snap плюс smooth behavior, без библиотек. */
.av-proj__panel {
  background: var(--av-white); border-radius: var(--av-r-l);
  padding: clamp(24px, 3vw, 46px) 0 clamp(24px, 3vw, 46px) clamp(24px, 3vw, 46px);
  display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 73fr);
  gap: clamp(20px, 2.4vw, 36px); align-items: stretch; overflow: hidden;
}
.av-proj__side { display: flex; flex-direction: column; align-items: flex-start; padding-right: clamp(0px, 1vw, 16px); }
.av-proj__side h2 { font: 600 clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem)/1.1 var(--av-font-display); letter-spacing: -0.02em; }
.av-proj__intro { margin-top: 16px; font-size: 1rem; line-height: 1.55; color: var(--av-ink-dim); }
.av-proj__ctrl { margin-top: auto; padding-top: clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 12px; }
.av-proj__count { margin-right: 6px; font: 500 0.9375rem/1 var(--av-font-mono); color: var(--av-ink-dim); }
.av-proj__nav {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 1px solid rgba(17, 19, 17, 0.2); background: var(--av-white); color: var(--av-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.15s var(--av-ease), border-color 0.15s, color 0.15s, opacity 0.15s;
}
.av-proj__nav:hover { border-color: var(--av-cobalt); color: var(--av-cobalt); }
.av-proj__nav:active { transform: scale(0.94); }
.av-proj__nav[disabled] { opacity: 0.32; cursor: default; }

/* Лента. Правый край уходит под обрез панели: видно, что дальше есть еще. */
.av-proj__track {
  display: flex; gap: clamp(14px, 1.4vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 2px clamp(24px, 3vw, 46px) 14px 0;
  scrollbar-width: none;
}
.av-proj__track::-webkit-scrollbar { display: none; }
.av-proj__track:focus-visible { outline: 3px solid var(--av-cobalt); outline-offset: 4px; border-radius: var(--av-r-m); }

.av-proj__c {
  flex: 0 0 clamp(220px, 22vw, 288px); scroll-snap-align: start;
  background: var(--av-g); color: var(--av-milk); border-radius: var(--av-r-l);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.av-proj__c h3 { font: 600 1.0625rem/1.28 var(--av-font-body); min-height: 2.56em; }
.av-proj__n {
  display: block; margin-top: 10px; color: var(--av-lime);
  font: 600 clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem)/1 var(--av-font-num);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
/* 14px, а не 8: у числа line-height 1, поэтому подпись липла к цифрам */
.av-proj__cap { display: block; margin-top: 14px; margin-bottom: 16px; font-size: 0.9375rem; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
/* Пилюля прижата к низу, ссылка под ней: иначе в карточках с разной
   длиной названия плашки стояли на разной высоте */
/* margin-top: auto прижимает пилюлю к низу карточки, но когда свободного
   места нет, она вставала вплотную к подписи. 16px - это минимум. */
.av-proj__cpc {
  margin-top: auto; padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: var(--av-white);
  font: 500 0.875rem/1.2 var(--av-font-body);
}
/* Пустая пилюля держит строку там, где стоимость контакта не считалась */
.av-proj__cpc--none { visibility: hidden; }
.av-page a.av-proj__link {
  margin-top: 16px; padding-top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.9375rem/1.2 var(--av-font-body); color: var(--av-lime); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.av-page a.av-proj__link:hover { border-bottom-color: currentColor; }
.av-proj .av-disclaimer { margin-top: var(--av-s5); }

@media (max-width: 1000px) {
  .av-proj__panel { grid-template-columns: 1fr; padding-right: 0; }
  .av-proj__side { padding-right: clamp(24px, 3vw, 46px); }
  .av-proj__ctrl { margin-top: clamp(20px, 2.4vw, 28px); padding-top: 0; }
}
@media (max-width: 700px) {
  .av-proj__c { flex-basis: min(260px, 76vw); }
  .av-proj__nav { width: 44px; height: 44px; }
}
/* ===== BLOCK: PROJECTS END ===== */

/* ===== BLOCK: FIT START (две карточки одного веса) ===== */
.av-fit__art { display: block; align-self: flex-start; margin-bottom: 4px; }
.av-fit__art img { width: 128px; height: 128px; }
.av-fit .av-card h3 { font-size: 1.5rem; }
.av-fit .av-card__list { gap: 13px; margin-top: 18px; }
.av-fit .av-card__list li { font-size: 1.0625rem; line-height: 1.6; }
/* ===== BLOCK: FIT END ===== */

/* ===== BLOCK: REVIEWS START (карточки одной системы) ===== */
.av-rev__top { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.av-rev__ctrl { margin-left: auto; display: flex; gap: 10px; }
.av-rev__btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(17, 19, 17, 0.22); background: var(--av-white); color: var(--av-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.15s var(--av-ease), border-color 0.15s, color 0.15s, opacity 0.15s;
}
.av-rev__btn svg { display: block; }
.av-rev__btn:hover { border-color: var(--av-cobalt); color: var(--av-cobalt); }
.av-rev__btn:active { transform: scale(0.94); }
.av-rev__btn[disabled] { opacity: 0.35; cursor: default; }
.av-rev__track {
  display: flex; align-items: stretch; gap: var(--av-s4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; touch-action: pan-x pan-y;
  margin-top: var(--av-s5); padding: 2px 0 16px;
  scrollbar-width: thin; scrollbar-color: rgba(17, 19, 17, 0.25) transparent;
}
.av-rev__track--more:not(:focus-visible) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
.av-rev__track--back:not(:focus-visible) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
          mask-image: linear-gradient(90deg, transparent, #000 72px);
}
.av-rev__track--back.av-rev__track--more:not(:focus-visible) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.av-rev__card {
  flex: 0 0 calc((100% - 114px) / 2.175); scroll-snap-align: start;
  background: var(--av-white); border-radius: var(--av-r-l); padding: 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.av-rev__card--lead { flex-basis: calc((100% - 114px) / 2.175 + 74px); background: var(--av-ink); color: var(--av-milk); }
/* Звезда - одна картинка, повторенная пять раз. Просить у генератора
   сразу пять бесполезно: сбивается количество и шаг между ними. */
.av-stars { display: inline-flex; gap: 3px; }
.av-stars i {
  width: 15px; height: 15px; flex: none;
  background: image-set(url("https://static.tildacdn.com/tild6637-6464-4266-a530-356532393833/star.webp") type("image/webp"),
                        url("https://static.tildacdn.com/tild6637-6464-4266-a530-356532393833/star.webp")) center / contain no-repeat;
}
.av-rev__card blockquote { font-size: 1.0625rem; line-height: 1.6; }
.av-rev__card--lead blockquote { font-size: 1.125rem; line-height: 1.58; }
.av-rev__card footer { margin-top: auto; padding-top: 8px; }
.av-rev__who { font-weight: 700; font-size: 1rem; }
.av-rev__who span { font-weight: 400; font-size: 0.9375rem; color: var(--av-ink-dim); }
.av-rev__card--lead .av-rev__who span { color: var(--av-milk-dim); }
.av-rev__src { margin-top: 9px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 0.875rem/1.4 var(--av-font-mono); color: var(--av-ink-dim); }
.av-rev__card--lead .av-rev__src { color: var(--av-milk-dim); }
.av-deal { display: inline-flex; align-items: center; gap: 6px; }
.av-deal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--av-lime); flex: none; }
.av-rev__note { margin-top: 18px; font-size: 0.875rem; color: var(--av-ink-dim); max-width: 44em; }
@media (max-width: 1100px) {
  .av-rev__card { flex-basis: min(520px, 70vw); }
  .av-rev__card--lead { flex-basis: min(580px, 78vw); }
}
/* Карточки тянулись до высоты самого длинного отзыва, и на телефоне вся
   лента становилась 836px: один отзыв на полтора экрана. Снимаем растяжение
   и уменьшаем кегль цитаты - текст остается целиком, ничего не обрезается. */
@media (max-width: 640px) {
  .av-rev__track { gap: 14px; align-items: flex-start; }
  .av-rev__card, .av-rev__card--lead { flex-basis: calc(100% - 26px); padding: 22px; gap: 12px; }
  .av-rev__card blockquote,
  .av-rev__card--lead blockquote { font-size: 0.9375rem; line-height: 1.5; }
  /* Высоту ленты задает самый длинный отзыв, поэтому длинные показываем
     первыми десятью строками. Кнопка «читать целиком» разворачивает
     карточку на месте: текст никуда не пропадает. */
  .av-rev__card blockquote {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10;
    overflow: hidden;
  }
  .av-rev__card--open blockquote { display: block; -webkit-line-clamp: none; }
  .av-rev__more {
    display: inline-block; align-self: flex-start; margin-top: -6px; padding: 6px 0;
    background: none; border: 0; cursor: pointer;
    font: 500 0.875rem/1.3 var(--av-font-body); color: var(--av-cobalt);
    box-shadow: inset 0 -1px 0 currentColor;
  }
  .av-rev__card--lead .av-rev__more { color: var(--av-lime); }
}
/* На широком экране отзыв виден целиком, кнопка не нужна */
.av-rev__more { display: none; }
/* ===== BLOCK: REVIEWS END ===== */

/* ===== BLOCK: AUTHOR START (одна широкая карточка) ===== */
/* Карточка графитовая, поэтому под фигурой светлая плашка:
   на темном фоне вырезка без подложки теряет силуэт */
.av-author__photo { position: relative; flex: none; display: flex; align-items: flex-end; }
/* Плашка ниже фигуры по высоте: голова и плечи выходят за верхний край,
   иначе получается просто прямоугольник с человеком внутри */
.av-author__photo::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  background: var(--av-milk); border-radius: var(--av-r-l);
}
.av-author__photo img { position: relative; z-index: 1; width: clamp(200px, 24vw, 280px); height: auto; display: block; }
.av-author__name { margin-top: 12px; font: 700 1.125rem/1.3 var(--av-font-body); letter-spacing: -0.01em; }
/* Селектор с элементом: правило .av-card--dark p иначе перебивает цвет */
.av-card--dark p.av-author__name { color: var(--av-lime); }
.av-author h3 { font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)/1.18 var(--av-font-display); letter-spacing: -0.015em; }
.av-author h3 i { font-style: normal; box-shadow: inset 0 -0.16em 0 rgba(185, 255, 44, 0.85); }
/* На телефоне карточка становится колонкой, и фигура вставала у левого края.
   Центрируем только фотографию: текст под ней остается по левому краю. */
/* На телефоне подложка растянута на всю ширину карточки, а фигура стоит
   на ней по центру: узкая плашка под фигурой висела островом посреди
   графита и не совпадала по краям с текстом под ней. */
@media (max-width: 700px) {
  .av-author__photo { align-self: stretch; width: 100%; justify-content: center; }
  .av-author__photo::before { height: 74%; }
  .av-author__photo img { width: 200px; }
}
/* ===== BLOCK: AUTHOR END ===== */

/* ===== BLOCK: AUDIT START (лаймовая сцена, две карточки) ===== */
.av-audit__what .av-card__list { margin-top: 20px; }
.av-audit__what .av-card__list li { font-size: 1.0625rem; }
/* Строка честности отделена линией: это не седьмой пункт списка */
.av-audit__after {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.45;
}
/* Объект широкий и лежит во всю ширину карточки: вертикальный оставлял
   под текстом пустую полосу, а по бокам от себя - воздух */
.av-audit__art { display: block; width: 100%; margin-top: auto; padding-top: clamp(18px, 2vw, 28px); }
.av-audit__art img { display: block; width: 100%; height: auto; }
/* Заголовок формы называет действие, а не повторяет заголовок секции */
.av-form-card h3 + .av-form__note { margin: 6px 0 22px; font-size: 0.9375rem; line-height: 1.5; color: var(--av-ink-dim); }
.av-form-card h3 { font: 600 1.3rem/1.25 var(--av-font-display); letter-spacing: -0.01em; margin-bottom: 6px; }
.av-field { margin-bottom: 18px; }
.av-field label { display: block; font: 500 0.875rem/1.4 var(--av-font-body); color: var(--av-ink); margin-bottom: 8px; }
.av-field input {
  width: 100%; min-height: 56px; padding: 0 16px;
  background: var(--av-milk); color: var(--av-ink);
  border: 1px solid rgba(17, 19, 17, 0.2); border-radius: var(--av-r-s);
  font: 400 1rem/1.4 var(--av-font-body);
  transition: border-color 0.15s var(--av-ease), box-shadow 0.15s var(--av-ease), background 0.15s;
}
.av-field input:focus { outline: none; background: var(--av-white); border-color: var(--av-cobalt); box-shadow: 0 0 0 3px rgba(56, 71, 232, 0.18); }
.av-field--invalid input { border-color: var(--av-danger); box-shadow: 0 0 0 3px rgba(192, 52, 31, 0.14); }
.av-field__error { display: none; color: var(--av-danger); font-size: 0.875rem; font-weight: 500; margin-top: 8px; }
.av-field--invalid .av-field__error { display: block; }
.av-consent { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; cursor: pointer; position: relative; }
.av-consent input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: -10px 0 0 -10px; cursor: pointer; }
.av-consent__box {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border: 1px solid rgba(17, 19, 17, 0.32); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.av-consent__box svg { opacity: 0; transition: opacity 0.15s; }
.av-consent input:checked ~ .av-consent__box { background: var(--av-cobalt); border-color: var(--av-cobalt); }
.av-consent input:checked ~ .av-consent__box svg { opacity: 1; }
.av-consent input:focus-visible ~ .av-consent__box { outline: 2px solid var(--av-cobalt); outline-offset: 3px; }
.av-consent__txt { color: var(--av-ink-dim); font-size: 0.875rem; line-height: 1.5; }
.av-consent__txt a { color: var(--av-cobalt); }
.av-consent--invalid .av-consent__box { border-color: var(--av-danger); }
.av-consent__error { display: none; color: var(--av-danger); font-size: 0.875rem; font-weight: 500; margin: -14px 0 18px; }
.av-consent--invalid + .av-consent__error { display: block; }
.av-form-card .av-btn { width: 100%; }
.av-form__status { margin-top: 16px; font-size: 0.9375rem; display: none; }
.av-form__status--error { display: block; color: var(--av-danger); font-weight: 500; }
.av-form__demo { margin-top: 14px; font-size: 0.8125rem; line-height: 1.5; color: var(--av-ink-dim); }
.av-form__success { display: none; }
.av-form__success--visible { display: block; }
.av-form__success h3 { margin-bottom: 10px; }
.av-form__success p { color: var(--av-ink-dim); }
.av-form-card .av-form__success-btn { margin-top: 20px; }
/* ===== BLOCK: AUDIT END ===== */

/* ===== BLOCK: FAQ START (вопросы в общей сетке, блог полосой снизу) ===== */
.av-faq__q { background: var(--av-milk); color: var(--av-ink); border-radius: var(--av-r-m); }
.av-faq__q summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 1.8vw, 22px) clamp(20px, 2vw, 26px); cursor: pointer;
  font: 600 1.0625rem/1.4 var(--av-font-body); list-style: none;
  transition: color 0.15s var(--av-ease);
}
.av-faq__q summary::-webkit-details-marker { display: none; }
.av-faq__q summary:hover { color: var(--av-cobalt); }
.av-faq__q summary:focus-visible { outline: 2px solid var(--av-cobalt); outline-offset: -2px; border-radius: var(--av-r-m); }
/* Знак раскрытия кобальтовый, а не серый: это единственный
   интерактивный элемент внутри карточки */
.av-faq__icon {
  flex: none; position: relative; width: 26px; height: 26px; margin-top: 1px;
  border-radius: 50%; background: var(--av-cobalt);
}
.av-faq__icon::before, .av-faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--av-white);
  transform: translate(-50%, -50%); transition: opacity 0.16s var(--av-ease);
}
.av-faq__icon::before { width: 12px; height: 2px; }
.av-faq__icon::after { width: 2px; height: 12px; }
.av-faq__q[open] .av-faq__icon::after { opacity: 0; }
/* Ссылка внутри ответа: единственная ссылка в этом блоке */
.av-page .av-faq__a a { color: var(--av-cobalt); text-underline-offset: 3px; }
.av-faq__a {
  margin: 0; padding: 0 clamp(20px, 2vw, 26px) clamp(20px, 2vw, 24px);
  font-size: 1rem; line-height: 1.55; color: var(--av-ink-dim); max-width: 46em;
}

/* Блог широкой полосой под вопросами */
.av-blog { gap: 0; }
.av-blog__top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.av-blog__list {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px); margin-top: 22px;
}
.av-page a.av-blog__a { display: block; color: inherit; text-decoration: none; }
.av-blog__name { display: block; font: 600 1.0625rem/1.4 var(--av-font-body); }
.av-page a.av-blog__a:hover .av-blog__name { color: var(--av-lime); }
.av-blog__meta { display: block; margin-top: 8px; font: 500 0.8125rem/1 var(--av-font-mono); color: var(--av-milk-dim); }
@media (max-width: 700px) { .av-blog__list { grid-template-columns: 1fr; gap: 20px; } }
/* ===== BLOCK: FAQ END ===== */

/* ===== BLOCK: CONTACTS START (графитовая сцена, карточки) ===== */
.av-contacts { padding: var(--av-s6) 0 var(--av-s5); }
.av-contacts__line { font-size: 1rem; }
/* Карточка молочная, поэтому ссылка графитовая: молочным по молочному
   контакты становились невидимыми */
.av-page .av-contacts__line a { color: var(--av-ink); text-decoration: underline; text-underline-offset: 3px; }
.av-page .av-contacts__line a:hover { color: var(--av-cobalt); }
.av-contacts .av-card--lime .av-btn { margin-top: auto; align-self: flex-start; }
/* На широком экране кнопку отжимает вниз свободным местом, на телефоне его
   нет и кнопка прилипала к строке про рабочий день. Задаем минимум. */
.av-contacts .av-card--lime p { margin-bottom: 20px; }
.av-contacts__links { display: grid; gap: 12px; margin-top: 16px; }
/* .av-contacts__req удален 31.07 вместе с карточкой реквизитов: текст переехал
   в «Правовую информацию» в подвале и живет на стилях этого блока */
/* ===== BLOCK: CONTACTS END ===== */

/* ===== BLOCK: REPORT MODAL START ===== */
.av-report-modal {
  background: var(--av-white); color: var(--av-ink);
  border: none; border-radius: var(--av-r-l);
  padding: 14px; max-width: min(94vw, 1060px); margin: auto;
  overscroll-behavior: contain;
}
.av-report-modal::backdrop { background: rgba(11, 13, 12, 0.78); }
.av-report-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 12px; }
.av-report-modal__title { font: 600 0.9375rem/1.3 var(--av-font-body); }
.av-report-modal__title small { display: block; font: 400 0.8125rem/1.5 var(--av-font-mono); color: var(--av-ink-dim); }
.av-report-modal__close {
  flex: none; min-height: 44px; padding: 6px 18px; border-radius: var(--av-r-m);
  background: transparent; border: 1px solid rgba(17, 19, 17, 0.3);
  color: var(--av-ink); font: 600 0.9rem/1.2 var(--av-font-body); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.av-report-modal__close:hover { border-color: var(--av-cobalt); color: var(--av-cobalt); }
.av-report-modal img { width: 100%; height: auto; border-radius: var(--av-r-s); border: 1px solid var(--av-line-light); }
.av-scroll-lock { overflow: hidden; }
/* ===== BLOCK: REPORT MODAL END ===== */

/* ===== BLOCK: FOOTER START ===== */
.av-footer { background: var(--av-g); color: var(--av-milk); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.av-footer__z1 { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 20px; }
.av-page .av-footer a.av-logo { color: var(--av-lime); }
.av-footer .av-logo__name { color: var(--av-milk); }
.av-footer nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.av-page .av-footer nav a { color: var(--av-milk-dim); text-decoration: none; font-size: 0.9375rem; }
.av-page .av-footer nav a:hover { color: var(--av-lime); }
.av-footer__z2 { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; padding-bottom: 14px; }
.av-footer__meta { color: var(--av-milk-dim); font-size: 0.9375rem; }
.av-page .av-footer__policy { margin-left: auto; color: var(--av-milk-dim); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; }
.av-page .av-footer__policy:hover { color: var(--av-lime); }
/* Правовая информация примыкает ко второй зоне: отдельной линией строку
   не выделяем, конкурирующих полос в футере становится меньше.
   Приглушено, но не ниже AA: 0.6 и 0.55 давали контраст около 3,6:1 */
/* Нижнее поле учитывает домашнюю полосу iPhone: иначе последняя строка
   подвала оказывается под индикатором жеста */
.av-footer__legal { padding: 0 0 calc(26px + env(safe-area-inset-bottom)); color: rgba(169, 171, 166, 0.9); font-size: 0.875rem; line-height: 1.6; }
.av-footer__legal summary { cursor: pointer; list-style: none; color: rgba(169, 171, 166, 0.9); font-size: 0.875rem; user-select: none; }
.av-footer__legal summary::-webkit-details-marker { display: none; }
.av-footer__legal summary::before { content: "+ "; }
.av-footer__legal[open] summary::before { content: "– "; }
.av-footer__legal summary:hover { color: var(--av-milk); }
.av-footer__legal p { max-width: 62em; margin-top: 10px; }
@media (max-width: 768px) {
  .av-footer__z1 { flex-direction: column; align-items: flex-start; gap: 20px; }
  .av-footer nav { margin-left: 0; flex-direction: column; gap: 12px; }
  .av-footer__z2 { flex-direction: column; align-items: flex-start; gap: 10px; }
  .av-page .av-footer__policy { margin-left: 0; }
}
/* ===== BLOCK: FOOTER END ===== */

/* ===== BLOCK: BLOG PAGE START (blog.html) ===== */
.av-blog-hero { background: var(--av-milk); color: var(--av-ink); }
.av-blog-hero .av-container { padding-top: var(--av-s7); padding-bottom: var(--av-s6); }
.av-blog-hero h1 { max-width: 16em; }
.av-blog-hero__lead { max-width: 40em; margin-top: 20px; font-size: 1.125rem; line-height: 1.55; color: var(--av-ink-dim); }

.av-toc { max-width: 720px; margin: 0 auto var(--av-s6); display: grid; }
.av-page .av-toc a { display: flex; gap: 16px; align-items: baseline; padding: 15px 2px; text-decoration: none; border-top: 1px solid var(--av-line-light); transition: color 0.15s; }
.av-toc a:last-child { border-bottom: 1px solid var(--av-line-light); }
.av-toc__num { font: 500 0.8125rem/1 var(--av-font-mono); color: var(--av-cobalt); flex: none; }
.av-toc__name { font: 600 1.0625rem/1.4 var(--av-font-body); }
.av-page .av-toc a:hover .av-toc__name { color: var(--av-cobalt); }

.av-posts { max-width: 720px; margin: 0 auto; display: grid; gap: var(--av-s7); }
.av-post { scroll-margin-top: 96px; }
.av-post__cover { display: block; margin-bottom: 22px; }
.av-post__cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--av-r-l); }
.av-post__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; font: 400 0.8125rem/1 var(--av-font-mono); color: var(--av-ink-dim); }
.av-post h2 { margin-top: 16px; font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); }
.av-post p { margin-top: 16px; color: var(--av-ink-dim); line-height: 1.72; }
.av-post h3 { margin-top: 28px; font-size: 1.125rem; color: var(--av-ink); }
.av-post ul { margin: 14px 0 0; padding-left: 22px; color: var(--av-ink-dim); line-height: 1.7; }
.av-post ul li { margin-top: 8px; }
.av-post__back { display: inline-flex; margin-top: 22px; font: 500 0.875rem/1 var(--av-font-mono); color: var(--av-cobalt); text-decoration: none; }
.av-post__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.av-post + .av-post { border-top: 1px solid var(--av-line-light); padding-top: var(--av-s7); }
.av-blog-cta { max-width: 720px; margin: 0 auto; }
.av-blog-cta .av-btn { margin-top: 26px; }
/* ===== BLOCK: BLOG PAGE END ===== */

/* ===== BLOCK: POLICY PAGE START (policy.html) ===== */
.av-policy { max-width: 720px; margin: 0 auto; padding: var(--av-s7) var(--av-gutter) var(--av-s8); }
.av-policy h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.av-policy h2 { font: 600 1.0625rem/1.35 var(--av-font-body); letter-spacing: 0; margin: var(--av-s5) 0 10px; }
.av-policy p, .av-policy li { color: var(--av-ink-dim); margin-bottom: 10px; line-height: 1.7; }
.av-policy ul { padding-left: 22px; }
/* Рамка сплошная, а не цветная полоса слева: боковая полоса-акцент -
   узнаваемый штамп шаблонных страниц */
.av-policy__draft {
  border: 1px solid rgba(56, 71, 232, 0.35); background: rgba(56, 71, 232, 0.06);
  border-radius: var(--av-r-s);
  padding: 14px 18px; margin: 20px 0 var(--av-s5); font-size: 0.9375rem;
}
.av-page .av-policy__draft { color: var(--av-ink); }
.av-policy__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--av-s5); font: 500 0.875rem/1 var(--av-font-mono); color: var(--av-cobalt); text-decoration: none; }
.av-policy__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.av-page a.av-policy__back { color: var(--av-cobalt); }
/* ===== BLOCK: POLICY PAGE END ===== */

/* ===== BLOCK: REVEAL START =====
   Появляются только ключевые блоки секций, а не каждый абзац */
.av-js .av-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--av-ease), transform 0.5s var(--av-ease); }
.av-js .av-reveal.av-inview { opacity: 1; transform: none; }
/* ===== BLOCK: REVEAL END ===== */

/* ===== BLOCK: REDUCED MOTION START ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .av-js .av-reveal { opacity: 1; transform: none; transition: none; }
  .av-btn, .av-arr, .av-rev__btn, .av-faq__icon, .av-burger span,
  .av-burger span::before, .av-burger span::after { transition: none; }
}
/* ===== BLOCK: REDUCED MOTION END ===== */

/* ===== BLOCK: SCREENS MODAL START (галерея экранов кабинета) ===== */
.av-screens {
  width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: clamp(22px, 2.6vw, 34px); border: 0; border-radius: var(--av-r-l);
  background: var(--av-white); color: var(--av-ink); overflow: auto;
  /* Прокрутка галереи не утягивает за собой страницу под ней */
  overscroll-behavior: contain;
}
.av-screens::backdrop { background: rgba(11, 13, 12, 0.72); }
.av-screens h2 { font: 600 clamp(1.35rem, 1rem + 1.2vw, 1.75rem)/1.2 var(--av-font-display); letter-spacing: -0.015em; padding-right: 48px; }
.av-screens > p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--av-ink-dim); max-width: 54em; }
.av-screens__list { display: grid; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(18px, 2vw, 26px); }
.av-screens figure { margin: 0; border: 1px solid var(--av-line-light); border-radius: var(--av-r-m); overflow: hidden; }
.av-screens img { display: block; width: 100%; height: auto; }
.av-screens__close {
  position: absolute; right: clamp(16px, 1.8vw, 24px); top: clamp(16px, 1.8vw, 24px);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--av-milk); border: 0; color: var(--av-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.av-screens__close:hover { background: var(--av-ink); color: var(--av-white); }
/* Кнопка внутри карточки выглядит как ссылка: это действие, а не переход.
   Цвет и подчеркивание наследуются от .av-link, поэтому переопределяем
   только то, что приносит с собой сам тег button. */
.av-page .av-screens__open {
  background: none; border: 0; cursor: pointer;
  color: inherit; font: 600 0.9375rem/1 var(--av-font-body);
  padding: 7px 0 5px;
}
.av-page .av-screens__open:hover { color: var(--av-lime); box-shadow: inset 0 -1px 0 var(--av-lime); }
.av-page .av-screens__open:focus-visible { outline: 3px solid var(--av-lime); outline-offset: 3px; }
/* ===== BLOCK: SCREENS MODAL END ===== */

/* ===== Правки для Тильды ===== */
/* Записи блоков не должны добавлять свои отступы: секции идут полосами от края до края */
.t-rec, .t-rec > .t-container, .t-rec > div { padding: 0 !important; margin: 0 !important; }
/* Без z-index: иначе каждая обертка блока становится отдельным слоем,
   и мобильное меню из шапки уходит под первый экран */
.av-page { position: relative; }
/* Под подписью Тильды светилась ее бежевая заливка */
body, .t-body { background: #E8EAED; }