@charset "UTF-8";
/* NauchObzor home (HOME-1). Island CSS: every rule scoped under .home-v2 so that
   shared names (.section/.container/.hero etc.) do not collide with Bulma/app.css.
   Generated from the reference mockup. Edit the mockup and regenerate, not by hand. */

@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/manrope/manrope-cyrillic-ext-400-normal.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/manrope/manrope-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/manrope/manrope-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/manrope/manrope-cyrillic-ext-600-normal.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/manrope/manrope-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/manrope/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('/fonts/manrope/manrope-cyrillic-ext-800-normal.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('/fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('/fonts/manrope/manrope-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('/fonts/manrope/manrope-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

.home-v2 {
      --teal: #1F6F78;
      --teal-dark: #175861;
      --teal-soft: #DCEBEC;
      --accent-soft: #B8AA73; 
      --dark: #1A1D1E;
      --text: #1A1D1E;
      --muted: #5C676A;
      --line: #D6DEDF;
      --line-dark: #9DA9AB;
      --tint: #F2F7F7;
      --white: #FFFFFF;
      --focus-ring: #1F6F78;
      --container: 1200px;
      --text-measure: 680px;
      --radius-lg: 28px;
      --radius-md: 18px;
      --radius-sm: 12px;
      --shadow-soft: 0 18px 50px rgba(26, 29, 30, 0.08);

      /* HOME-4.1: вертикальный ритм страницы — ШКАЛА ИЗ ЧЕТЫРЁХ ЗНАЧЕНИЙ. До неё в файле
         жило восемь разных чисел на 1280 и десять на 390, причём четыре из них (26, 34,
         38, 42) были жёсткими пикселями и на телефоне стояли ровно теми же, что на 1440,
         то есть занимали вдвое большую долю экрана.

         L  — поля секции сверху и снизу (расстояние МЕЖДУ секциями = два L);
         M  — между смысловыми блоками внутри секции;
         S  — заголовок секции до её содержимого;
         XS — мелкий шаг: хвостовые элементы вроде подвала витрины.

         Порядок намеренно L > M > S > XS: заголовок должен держаться СВОЕГО содержимого
         крепче, чем блоки держатся друг друга. Раньше было наоборот — заголовок отходил
         на 60 при кегле h2 = 40 (полторы высоты заголовка) и зрительно отклеивался,
         а часть внутренних стыков была теснее него (26-42).

         Нижние границы clamp дают телефону 52/32/24/16 — это 0,65 от десктопных
         80/48/36/22, одна и та же доля на всех четырёх ступенях. */
      --space-l: clamp(52px, 5vw, 80px);
      --space-m: clamp(32px, 3.4vw, 48px);
      --space-s: clamp(24px, 2.8vw, 36px);
      --space-xs: clamp(16px, 1.6vw, 22px);
      --section-space: var(--space-l);
    }

.home-v2, .home-v2 *,
.home-v2 *::before,
.home-v2 *::after {
      box-sizing: border-box;
    }

.home-v2 {
      scroll-behavior: smooth;
      background: var(--white);
    }

.home-v2 {
      margin: 0;
      color: var(--text);
      background: var(--white);
      font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 18px;
      line-height: 1.6;
      font-weight: 400;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

.home-v2 a,
.home-v2 button,
.home-v2 input,
.home-v2 summary {
      font: inherit;
    }

.home-v2 a {
      color: var(--teal);
      text-underline-offset: 0.18em;
      text-decoration-thickness: 1px;
    }

.home-v2 a:hover {
      color: var(--teal-dark);
    }

.home-v2 a:focus-visible,
.home-v2 button:focus-visible,
.home-v2 input:focus-visible,
.home-v2 summary:focus-visible,
.home-v2 [tabindex]:focus-visible {
      outline: 3px solid var(--focus-ring, #1F6F78);
      outline-offset: 2px;
    }

.home-v2 img,
.home-v2 svg {
      display: block;
      max-width: 100%;
    }

.home-v2 button {
      border: 0;
    }

.home-v2 p,
.home-v2 h1,
.home-v2 h2,
.home-v2 h3,
.home-v2 blockquote {
      margin-top: 0;
    }

.home-v2 p:last-child {
      margin-bottom: 0;
    }

.home-v2 .section {
      padding: var(--section-space) 24px;
      position: relative;
    }

.home-v2 .section--white {
      background: var(--white);
    }

.home-v2 .section--tint {
      background: var(--tint);
    }

.home-v2 .container {
      width: min(100%, var(--container));
      margin-inline: auto;
    }

.home-v2 .text-measure {
      max-width: var(--text-measure);
    }

/* HOME-4.6: 820 -> 900. «Информации всё больше. Ясности — меньше.» переносился так,
   что во второй строке оставалось одно слово «меньше.» — висячая строка, читается
   как сбой вёрстки. Переносился он НЕ из-за нехватки контейнера (1200 на 1440), а из-за
   этого ограничения: заголовку нужно 883,42 для одной строки, давалось 820.
   Правка затрагивает ровно ОДИН заголовок из восьми — замерено: следующему по длине
   («Начните с открытых материалов») нужно 641,17, то есть у него запас 179 px до старого
   значения и 259 до нового. Остальные шесть требуют от 152 до 499.
   900 помещается в контейнер на всех ширинах: 1200 на 1440+, 1152 на 1216-1439. */
.home-v2 .section-heading {
      max-width: 900px;
      margin-bottom: var(--space-s);
    }

/* HOME-4.6: там, где заголовок всё-таки переносится (узкие ширины), строки делятся
   поровну вместо «длинная плюс одно слово». Поддержка проверена фактом на стенде,
   а не предположением: CSS.supports('text-wrap','balance') === true, и строки того же
   заголовка стали 500,11 / 376,05 вместо 710,39 / 165,77.
   Свойство без поддержки просто игнорируется — деградация молчаливая и безопасная. */
.home-v2 .section-heading h2 {
      text-wrap: balance;
    }

.home-v2 .section-heading h2,
.home-v2 .section h2 {
      margin-bottom: 20px;
      font-size: clamp(36px, 3.4vw, 40px);
      line-height: 1.15;
      letter-spacing: -0.018em;
      font-weight: 800;
    }

.home-v2 .section h3 {
      margin-bottom: 16px;
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: -0.01em;
      font-weight: 800;
    }

.home-v2 .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--teal);
      font-size: 13px;
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.home-v2 .eyebrow::before {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-soft);
      box-shadow: none;
      content: "";
      flex: 0 0 auto;
    }

.home-v2 .small {
      font-size: 15px;
      line-height: 1.5;
    }

.home-v2 .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

.home-v2 .muted {
      color: var(--muted);
    }

.home-v2 .primary-button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      padding: 13px 22px;
      border: 1px solid var(--teal);
      border-radius: 999px;
      color: var(--white);
      background: var(--teal);
      font-size: 16px;
      line-height: 1.3;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
    }

.home-v2 .primary-button:hover {
      color: var(--white);
      background: var(--teal-dark);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(31, 111, 120, 0.2);
    }

.home-v2 .text-link {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: rgba(31, 111, 120, 0.35);
    }

/* HOME-4.5: первый экран собран в одну колонку и устроен как остальные секции страницы.
   Требование «заполнять окно» СНЯТО решением владельца: min-height по высоте окна и
   центрирование содержимого во флексе удалены, ряд карточек может уходить под сгиб —
   это принято как приглашение прокрутить. Вместе с ними исчезли четыре механизма,
   которых не было больше нигде на странице: константа выравнивания -12px, центрирование
   группы по высоте, строчный режим витрины на 980-1216 и планшетный режим 768-980. */
/* HOME-4.6: верхний отступ секции 28 -> --space-xs. Первый экран поднимается целиком,
   чтобы блок кнопок помещался в РЕАЛЬНУЮ видимую область (~740 px), а не в высоту окна:
   её съедают вкладки, адресная строка, панель закладок и системная навигация, и владелец
   видел кнопки срезанными во всех четырёх браузерах при формально «помещающемся» окне.
   Нижний отступ секции не тронут — он на стыке со следующей секцией, а не внутри экрана. */
.home-v2 .hero {
      padding-top: var(--space-xs);
      padding-bottom: clamp(28px, 3vh, 56px);
      overflow: hidden;
      display: block;
    }

/* HOME-4.5: одна колонка. Порядок «текст - карточки - кнопки - числа» задан ПОРЯДКОМ
   УЗЛОВ в разметке, а не свойством order: речь о главной кнопке страницы, и видимый
   порядок обязан совпадать с порядком фокуса и чтения. В блоке цен расхождение уже
   приходилось чинить отдельно.
   row-gap нулевой намеренно: вертикальные интервалы задают собственные отступы блоков
   (см. .hero-covers и .hero-actions ниже), иначе к ним прибавился бы ещё и зазор сетки. */
.home-v2 .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }

.home-v2 .hero-copy {
      position: relative;
      z-index: 1;
    }

.home-v2 .hero h1 {
      max-width: 820px;
      margin-bottom: 20px;
      font-size: clamp(30px, 1.05rem + 2.9vw, 52px);
      line-height: 1.12;
      letter-spacing: -0.02em;
      font-weight: 800;
    }

/* Подзаголовок остаётся в читаемой ширине (680) и НЕ растягивается на полосу.
   HOME-4.5: нижний отступ снят — подзаголовок стал последним в .hero-copy, и расстояние
   до ряда карточек задаёт сам ряд (margin-top у .hero-covers). Иначе интервалы сложились
   бы: 28 + --space-m. */
.home-v2 .hero-subtitle {
      max-width: var(--text-measure);
      margin-bottom: 0;
      font-size: 19px;
      line-height: 1.58;
    }

.home-v2 .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 20px;
      align-items: center;
      /* HOME-4.5: было 24 жёстко. Отступ до строки чисел, самый мелкий шаг шкалы. */
      margin-bottom: var(--space-xs);
    }

.home-v2 .trust-markers {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.5;
      font-weight: 600;
    }

.home-v2 .trust-markers span:not(:last-child)::after {
      margin-left: 12px;
      color: var(--line-dark);
      content: "·";
    }

/* HOME-2.0: декоративная подложка под группой карточек удалена целиком (была
   псевдоэлементом ::before, отдельной разметки не имела). Залитый прямоугольник
   просвечивал в зазорах, вариант с полосами давал оторванную полосу под короткой
   левой карточкой — приём не сработал ни в одном из двух исполнений. */
/* HOME-4.5: три РАВНЫЕ карточки в ряд вместо мозаики «одна большая плюс стопка».
   Ширину задаёт не число, а тот же механизм, что у витрины открытых материалов:
   контейнер секции — обычный .container, и полоса совпадает с ней на любой ширине
   по построению. Зазор 20 тот же, что у .catalog-grid, — сетки должны читаться
   как один компонент. Отступы сверху и снизу из шкалы. */
.home-v2 .hero-covers {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      /* HOME-2.7: 20 вместо 14 — на 14 три карточки читались как один слитый объект. */
      gap: 20px;
      /* HOME-4.6: отступы РАЗНЫЕ, и это не небрежность. Сверху --space-s: воздух между
         подзаголовком и карточками виден и нужен, там первый экран «дышит». Снизу
         --space-xs: тесный зазор под карточками не читается как теснота, он читается как
         «кнопка относится к этой группе». Симметричные --space-m стоили 26 лишних пикселей
         на стыке, где они не работают, и уводили блок кнопок под сгиб. */
      margin-top: var(--space-s);
      margin-bottom: var(--space-xs);
    }

/* HOME-1.7: витрина реальных обложек. Карточка = обложка 16:9 во всю ширину +
   строка формата + название. Ничего кликабельного внутри. */
.home-v2 .hero-cover {
      display: flex;
      z-index: 1;
      flex-direction: column;
      min-height: 0;
      margin: 0; /* figure */
      padding: 0; /* обложка встык к краям карточки */
      overflow: hidden;
      border: 1px solid rgba(31, 111, 120, 0.18);
      border-radius: 20px;
      background: var(--white);
      box-shadow: 0 10px 28px rgba(26, 29, 30, 0.06);
      text-align: left;
    }

.home-v2 .hero-cover__img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      /* HOME-2.3: подложки под картинкой нет — она читалась как светлая плашка,
         пока обложка не отрисовалась. */
    }

.home-v2 .hero-cover__meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 13px 15px 15px;
    }

.home-v2 .hero-cover__format {
      color: var(--teal);
      font-size: 11.5px;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.home-v2 .hero-cover__title {
      color: var(--text);
      font-size: 14px;
      line-height: 1.28;
      font-weight: 600; /* HOME-2.0: см. .member-name — 700 подменялся на 800 */
    }

/* HOME-4.5: все отличия первой карточки сняты — три карточки равны во всём.
   Было: grid-row: 1 / 3 и align-self: center (она занимала оба ряда мозаики),
   border-radius 24 против 20, отступы подписи 16/18 против 13/15, кегль метки формата
   12 против 11,5 и кегль заголовка 18 против 14. Из-за последнего заголовок первой
   карточки стоял на 4,7 px ниже соседних — при равных по размеру карточках это читалось
   как сбой, а не как иерархия. Класс .hero-cover--lead в разметке ОСТАВЛЕН намеренно:
   он ничего не задаёт, но остаётся готовым крючком.
   Правила для узких телефонов (блоки 390 и 360) не тронуты: там .hero-cover__meta
   и .hero-cover--lead .hero-cover__meta и раньше стояли в одном селекторе с общим
   значением, отличий между карточками они не создавали. */

.home-v2 .audience-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin-bottom: var(--space-xs); /* HOME-4.1: было 26 жёстко */
    }

.home-v2 .audience-card,
.home-v2 .solution-card {
      padding: 28px;
      border: 1px solid rgba(31, 111, 120, 0.16);
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.76);
    }

.home-v2 .solution-card {
      max-width: 860px;
      border-left: 4px solid var(--teal);
      background: var(--white);
    }

/* HOME-4.6: тексты обеих карточек «Информации всё больше» разбиты на два абзаца.
   Слова не менялись — поставлен только разрыв. Отступ из шкалы: --space-xs, самый мелкий
   шаг (22 на десктопе, 16 на телефоне). Собственного margin у абзаца в карточке нет —
   его снимает базовое правило p:last-child, — поэтому без этой строки абзацы слиплись бы. */
.home-v2 .audience-card p + p {
      margin-top: var(--space-xs);
    }

/* HOME-5.2: три предложения «Откуда берутся разборы» разделены интервалом.
   Разметку НЕ трогали — абзацы и так были тремя отдельными <p>, но с нулевым
   вертикальным отступом: его снимает базовое правило страницы, и блок читался
   сплошным пятистрочным куском, без границы между мыслями.
   Значение то же, что у .audience-card p + p (HOME-4.6) — другого приёма
   разделения абзацев на странице нет, новой величины в систему не вводим.
   Дочерний комбинатор > намеренно: абзац «Как устроен разбор» в конце того же
   блока отделён от третьего предложения полосой шагов, соседства p + p там
   не возникает, и его собственный отступ 30 остаётся нетронутым. */
.home-v2 .method-intro > p + p {
      margin-top: var(--space-xs);
    }

.home-v2 .method-subsection + .method-subsection {
      margin-top: var(--space-m); /* HOME-4.1: было clamp(54px, 7vw, 88px) */
    }

/* HOME-4.6: ограничение 780 снято. Из-за него полоса пяти шагов метода стояла в узкой
   колонке: подписи получали по 141,6 px и разваливались на 3-5 строк. Это доказательство
   метода, и читалось оно хуже всего на странице, при том что справа оставалась пустота.
   Ширину теперь задаёт контейнер секции — тот же механизм, что у остальных блоков
   страницы, а не число. Абзацы подблока при этом НЕ растягиваются: у них собственное
   max-width: var(--text-measure) = 680 в правиле ниже, и оно уже было уже 780.
   Итог: подпись 141,6 -> 225,6, строк 3/4/5/3/5 -> 2/2/2/2/3, подблок стал НИЖЕ. */
.home-v2 .method-intro {
      max-width: none;
    }

.home-v2 .method-intro p {
      max-width: var(--text-measure);
    }

.home-v2 .stepper-wrap {
      /* HOME-4.6: было 34 жёстко — тот же шаг шкалы, что «заголовок до содержимого». */
      margin-top: var(--space-s);
    }

/* HOME-4.7: широкий SVG с кружками ОТКЛЮЧЁН на всех ширинах. После растягивания полосы
   в HOME-4.6 кружки и подписи оказались в РАЗНЫХ сетках: подписи — в текучей сетке из пяти
   колонок во всю полосу, а кружки — внутри SVG с системой координат viewBox 0 0 1000 78.
   Совпасть они не могут в принципе: при preserveAspectRatio по умолчанию SVG, ставший шире
   1000 px, перестаёт масштабироваться (упирается в высоту 78) и просто ЦЕНТРИРУЕТСЯ —
   отсюда шаг кружков 205 px против шага колонок 243,6 и «кружок не над своей фразой».
   Признак был виден ещё в отчёте HOME-4.6: линия 820 при полосе 1200.
   Кружки переехали в ту же сетку — теперь это маркер внутри каждого шага, и совпадение
   с подписью обеспечено построением, а не подбором координат. */
.home-v2 .stepper-desktop {
      display: none;
    }

.home-v2 .stepper-desktop line {
      stroke: var(--line);
      stroke-width: 2;
    }

.home-v2 .stepper-desktop circle {
      fill: var(--white);
      stroke: var(--teal);
      stroke-width: 2;
    }

.home-v2 .stepper-desktop text {
      fill: var(--teal);
      font-family: "Manrope", sans-serif;
      font-size: 18px;
      font-weight: 800;
      dominant-baseline: middle;
      text-anchor: middle;
    }

.home-v2 .stepper-items {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
      margin-top: 8px;
    }

.home-v2 .stepper-item {
      /* HOME-4.7: система координат для соединительной линии — она рисуется от кружка
         этого шага до кружка следующего. */
      position: relative;
      font-size: 15px;
      line-height: 1.52;
    }

/* HOME-4.7: маркер теперь работает и на десктопе — он лежит ВНУТРИ ячейки шага, поэтому
   встаёт по её левому краю, ровно там же, где начинается текст. Имя класса осталось
   прежним (…-mobile-marker), чтобы не плодить классы; смысл у него теперь общий.
   52 px = прежний диаметр кружка широкого SVG (r = 26), то есть размер не изменился. */
.home-v2 .stepper-item-mobile-marker {
      display: block;
      width: 52px;
      height: 52px;
      margin-bottom: 12px;
      position: relative;
      z-index: 1; /* кружок поверх линии: его белая заливка перекрывает её концы */
    }

.home-v2 .stepper-item-mobile-marker circle {
      fill: var(--white);
      stroke: var(--teal);
      stroke-width: 2;
    }

.home-v2 .stepper-item-mobile-marker text {
      fill: var(--teal);
      font-family: "Manrope", sans-serif;
      font-size: 16px;
      font-weight: 800;
      dominant-baseline: middle;
      text-anchor: middle;
    }

/* HOME-4.7: соединительная линия. Каждый шаг, кроме последнего, рисует отрезок от центра
   СВОЕГО кружка до центра СЛЕДУЮЩЕГО: влево 26 = половина кружка, вправо -44 = зазор
   сетки 18 плюс те же 26. Отрезки стыкуются встык, разрыва нет по построению, и линия
   тянется ровно от первого кружка до пятого — дальше рисовать некому.
   Прежний вариант (одна линия внутри SVG) не мог этого: её концы жили в чужой сетке. */
.home-v2 .stepper-item:not(:last-child)::after {
      position: absolute;
      top: 25px; /* центр кружка 26 минус половина толщины линии */
      left: 26px;
      right: -44px;
      height: 2px;
      background: var(--line);
      content: "";
    }

.home-v2 .method-microline {
      margin-top: 30px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

.home-v2 .independence-box {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
      /* HOME-4.9: было 28 жёстко. Зазор взят из шкалы, потому что теперь он единственный,
         что разделяет колонки: прежде к нему добавлялись черта 3 и отступ до текста 24,
         и суммарный просвет составлял 55. --space-m даёт 48 на 1440 — ближе к прежним 55,
         чем оставшиеся 28, и без жёсткого числа. */
      gap: var(--space-m);
      padding: clamp(28px, 4vw, 46px);
      border-radius: var(--radius-lg);
      background: var(--tint);
    }

/* HOME-4.9: вертикальная черта слева от «Почему надёжнее нейросети» удалена вместе
   с отступом, который под неё расчищался (border-left: 3px solid var(--teal) и
   padding-left: 24px). Причина не косметическая: такого приёма больше нет нигде
   на странице, а вертикальная линия слева от текста в типографике означает ЦИТАТУ.
   Задумана она была разделителем колонок, но колонки разделены зазором и без неё.
   Светлый бокс, его радиус, фон и внутренние поля не тронуты — они согласованы
   с карточками выше. */

.home-v2 .demo-card {
      padding: clamp(28px, 5vw, 54px);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--shadow-soft);
    }

.home-v2 .demo-card .eyebrow {
      margin-bottom: 12px;
    }

.home-v2 .demo-title {
      max-width: 820px;
      margin-bottom: 36px;
      font-size: clamp(22px, 2.4vw, 29px);
      line-height: 1.34;
      font-weight: 600;
    }

.home-v2 .demo-fields {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      max-width: 860px;
    }

.home-v2 .demo-field + .demo-field {
      padding-top: 26px;
      border-top: 1px solid var(--line);
    }

.home-v2 .demo-field-label,
.home-v2 .format-label {
      display: block;
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.home-v2 .demo-field--action p {
      font-weight: 600;
    }

.home-v2 .confidence {
      margin-top: 34px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

.home-v2 .confidence-chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      margin-bottom: 10px;
      padding: 6px 14px;
      border-radius: 999px;
      color: var(--white);
      background: var(--teal);
      font-size: 14px;
      line-height: 1.3;
      font-weight: 800;
    }

.home-v2 .demo-link {
      margin-top: 22px;
    }

.home-v2 .product-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      margin-bottom: var(--space-m); /* HOME-4.1: было 34 жёстко */
    }

.home-v2 .product-card {
      min-height: 220px;
      padding: 28px;
      border: 1px solid rgba(31, 111, 120, 0.16);
      border-radius: var(--radius-md);
      background: var(--white);
    }

.home-v2 .product-card::before {
      display: block;
      width: 42px;
      height: 3px;
      margin-bottom: 24px;
      border-radius: 999px;
      background: var(--teal);
      content: "";
    }

/* A: equal heading height so descriptions start on one line when cards are in a row.
   Two lines at .section h3 desktop metrics (24px/1.25). Reset in the 1-column mobile layout. */
@media (min-width: 769px) {
.home-v2 .product-card h3 {
        min-height: 2.5em;
      }

}

/* HOME-4.8: перечисление тем стало набором плашек. Разделительные линии сверху и снизу
   и внутренние поля 18 сохранены — рамка блока не менялась. Типографика потока (16/1.65)
   ушла отсюда в сами плашки: текста прямо в этом контейнере больше нет. */
.home-v2 .topic-line {
      margin-bottom: var(--space-m); /* HOME-4.1: было 38 жёстко */
      padding: 18px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

/* Подпись над набором. Значения один в один с .course-note-kicker — это уже принятый
   на странице вид служебной подписи, новых кеглей и цветов не вводим. Отступ до плашек
   из шкалы. Заглавные здесь уместны и НЕ конфликтуют с требованием «плашки обычным
   регистром»: это подпись к набору, а не сама плашка. */
.home-v2 .topic-label {
      display: block;
      margin-bottom: var(--space-xs);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

.home-v2 .topic-set {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin: 0;
      padding: 0;
      list-style: none;
    }

/* Плашка. Геометрия и типографика взяты у .included-list li из блока цен — тот же
   набор-ярлыков, уже принятый на странице: те же 9/14, та же рамка var(--line),
   тот же радиус 999 и тот же кегль 14/600. Новых значений нет.
   НАМЕРЕННО ОТСУТСТВУЮТ: :hover, box-shadow, transition, cursor и любой вид кнопки.
   На странице действует правило «подсветка обещает клик», а фильтра по темам нет —
   плашка здесь ярлык. По той же причине это <li>, а не <a> и не <button>.
   От меток «Бесплатно» и «Рекомендуем» отличается всем, что делает их метками:
   обычный регистр вместо заглавных, 14 вместо 12, цвет текста обычный вместо
   бирюзового, рамка серая вместо бирюзовой.
   inline-flex + gap — задел под иконку 16-20 px слева: при единственном ребёнке gap
   не даёт ничего, места под иконку сейчас НЕ резервируется, а когда иконка появится,
   она встанет по центру строки без переверстки. 10 — шаг из .eyebrow, тоже не новый. */
.home-v2 .topic-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--white);
      font-size: 14px;
      line-height: 1.4;
      font-weight: 600;
    }

.home-v2 .benefit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
    }

.home-v2 .benefit-card {
      padding: 30px;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.68);
    }

.home-v2 .team-featured {
      width: min(100%, 360px);
      margin-bottom: 42px;
    }

/* HOME-4.2: блок команды идёт в ТОЙ ЖЕ полосе, что витрина открытых материалов.
   Прежние 808 px (3 x 248 + 2 x 32, HOME-1.9 + HOME-2.2) делали его заметно уже
   остального: на 1280 левые края шли 56,5 у секций, 72,5 у витрины и 228,5 у портретов —
   край страницы получался рваный.

   HOME-4.3: собственной ширины у сетки больше нет вообще — она заполняет контейнер
   секции, и полоса у ВСЕХ сеток карточек страницы стала одна. Ограничение 1120,
   введённое здесь в HOME-4.2, снято вместе с таким же у витрины: пока оно существовало,
   полос на странице было четыре (1152 у обычных секций, 1120 у витрины и команды,
   1060 у блока цен, 920 у FAQ). Ширину в этой полосе задаёт теперь только Bulma
   из app.css (960 с 1024, 1152 с 1216, 1344 с 1408) — ровно как у всех остальных
   секций. Своей ширины поверх Bulma не вводим: это отдельная задача после прода.

   Зазор берётся из шкалы: --space-l, то же значение, что между секциями. Горизонтальный
   и вертикальный зазоры равны по построению — их задаёт одно свойство gap.
   Мобильный зазор возвращается в блоке <=768. */
.home-v2 .team-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-l);
    }

.home-v2 .team-grid .team-card:nth-child(n + 9) {
      display: none;
    }

.home-v2 .team-more {
      display: none;
      margin-top: 24px;
    }

.home-v2 .team-grid:has(.team-card:nth-child(9)) + .team-more {
      display: inline-flex;
    }

/* HOME-1.8: карточка команды = квадратный портрет + имя + роль.
   Колонка flex, а не grid-rows: портрет во всех карточках ряда одной высоты (одна
   ширина колонки и жёсткое 1:1), поэтому имена стартуют на одной линии, а разная
   длина роли не растягивает фото — свободное место остаётся снизу карточки.
   Высота самих карточек в ряду одинаковая: grid-элементы по умолчанию stretch. */
.home-v2 .team-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

.home-v2 .team-photo {
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: 8px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 24px;
      background: var(--tint);
    }

.home-v2 .member-name {
      margin: 0 0 3px;
      color: var(--text);
      font-size: 16px;
      line-height: 1.22;
      /* HOME-2.0: 700 не загружен (есть 400/600/800), браузер подменял его на 800 —
         имя выглядело как заголовок. 600 загружен и даёт настоящую среднюю ступень. */
      font-weight: 600;
    }

.home-v2 .member-role {
      margin: 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.38;
      font-weight: 400; /* HOME-2.0: 500 не загружен, фактически всегда рисовался 400 */
    }

.home-v2 .responsibility-line {
      max-width: 900px;
      margin-top: var(--space-m); /* HOME-4.1: было 42 жёстко */
      padding-top: 26px;
      border-top: 1px solid var(--line);
      font-size: 16px;
      line-height: 1.65;
      font-weight: 600;
    }

.home-v2 .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

.home-v2 .testimonial-card {
      display: flex;
      min-height: 200px;
      flex-direction: column;
      justify-content: space-between;
      padding: 22px;
      border: 1px solid rgba(31, 111, 120, 0.16);
      border-radius: var(--radius-md);
      background: var(--white);
    }

.home-v2 .testimonial-card blockquote {
      margin-inline: 0;
      margin-bottom: 20px;
      font-size: 18px;
      line-height: 1.6;
    }

/* HOME-2.0: подпись автора отзыва — круглая аватарка слева, имя и роль справа. */
.home-v2 .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

.home-v2 .testimonial-avatar {
      display: block;
      width: 52px;
      height: 52px;
      flex: 0 0 auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 50%;
      background: var(--tint);
    }

.home-v2 .testimonial-author-text {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 1px;
    }

.home-v2 .testimonial-card cite {
      color: var(--text);
      font-size: 15px;
      line-height: 1.3;
      font-style: normal;
      font-weight: 600;
    }

.home-v2 .author-role {
      /* HOME-2.3: 13.5 -> 14 px и темнее приглушённого — на приёмке подпись читалась
         как продолжение имени, а не как отдельная строка. Светлее имени (var(--text)),
         чтобы иерархия сохранилась. */
      color: rgba(26, 29, 30, 0.78);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 400;
    }

.home-v2 #subscription {
      scroll-margin-top: 24px;
    }

/* HOME-4.3: ограничение max-width: 1060px снято. Оно жило здесь с ПЕРВОГО коммита файла —
   пришло из эталонного мокапа и ни разу не пересматривалось, хотя блок цен с тех пор
   перестраивали дважды (HOME-2.3 и HOME-3.4). Из-за него блок обрывался справа на 140 px
   раньше остальных секций (92 на 1280 и 1216), причём левый край совпадал: ограничение
   было без центрирования.
   Полосу теперь задаёт контейнер секции — та же, что у отзывов, первого экрана
   и финального призыва. Объявление УДАЛЕНО, а не обнулено в max-width: none: none —
   начальное значение свойства, и мёртвое объявление только заставляло бы следующего
   читателя искать, что оно переопределяет. Правило осталось бы пустым, поэтому убрано
   целиком вместе с ним. */

.home-v2 .payment-region-heading {
      /* HOME-3.1: 24, а не 16 — метка «Рекомендуем» выступает над карточкой на 13,8 px,
         и при 16 под подписью оставалось 2,2 px просвета. Отступ общий для обеих подписей
         ряда, поэтому карточки опускаются на 8 px симметрично.
         !important нужен по той же причине, что у кегля ниже: .home-v2 .section h3 —
         на один элемент специфичнее и без него навязывает свой margin-bottom: 16px.
         Свойства разведены намеренно: в сокращённой записи !important обнулял бы и
         margin-top, а он на телефоне нужен зарубежной подписи (22px в блоке 768). */
      margin: 0;
      margin-bottom: 24px !important;
      color: var(--text);
      font-size: 17px !important;
      line-height: 1.4 !important;
      font-weight: 800;
    }

/* HOME-2.3: два пути оплаты в один ряд. Левая зона шире — рублёвой картой платят
   примерно 85 % аудитории; правая уже и легче. Раньше зарубежная оплата была
   отдельным блоком ниже по странице, и весь блок цен занимал 1557 px на 1280. */
.home-v2 .pricing-layout {
      display: grid;
      /* HOME-3.0: 1.9 перепроверена после переноса бонус-бокса из левой зоны. Высоту ряда
         теперь задают карточки (369,6 против 297,2 у Tribute на 1280), а не бонус-бокс.
         Замер высоты ряда: 1.62 -> 432,6; 1.9 / 2.1 / 2.3 -> 409,4 на 1216-1440. Плато
         минимума начинается ровно на 1.9; шире — выигрыш только на 1100 (23 px) ценой
         Tribute-колонки в 283 px. Оставляем 1.9. */
      grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
      /* HOME-3.0: первый ряд сетки — две подписи путей оплаты, второй — карточки. Отступ
         между рядами даёт margin-bottom подписи (16 px), поэтому row-gap нулевой.
         HOME-3.4: пять строк карточек переехали сюда с .pricing-grid. Причина: зарубежная
         карточка — элемент ЭТОГО ряда, а не левой зоны, и встать в одни строки с рублёвыми
         она может только здесь. Строка 1 — подписи путей оплаты, строки 2-6 — подпись
         тарифа, цена, пояснение, сноска с разделительной линией, кнопка. Последняя 1fr:
         остаток высоты собирается над кнопками. Пропорция колонок не тронута. */
      grid-template-rows: auto auto auto auto auto 1fr;
      column-gap: 26px;
      row-gap: 0;
      align-items: start;
      margin-bottom: 22px;
    }

.home-v2 .pricing-main {
      min-width: 0;
      /* HOME-3.4: зона пропускает строки ряда внутрь (второй уровень subgrid), но остаётся
         НАСТОЯЩИМ боксом: на телефоне она один элемент потока со своим margin-bottom.
         Именно поэтому не display: contents — contents сломал бы мобильный порядок. */
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 2 / -1;
    }

/* Правая зона: та же светлая подложка, что была у прежнего зарубежного блока, но
   колонка заметно уже основной, заголовок мельче, кнопка остаётся вторичной. */
.home-v2 .pricing-intl {
      /* HOME-3.4: карточка встала в строки ряда — та же сетка, что у двух рублёвых, поэтому
         её разделительная линия совпадает с их линиями точно, а не на подобранном отступе.
         Пять детей ложатся в пять строк по порядку: подписи, цены, пояснение, сноска
         с линией, кнопка. gap убран НАМЕРЕННО: ось строк теперь общая с рублёвыми
         карточками, любой row-gap раздвинул бы и их внутренности.
         padding-block 22, как у рублёвых карточек, и это не косметика: первая строка
         subgrid отступает на padding самой карточки, и при 18 подписи зарубежной вставали
         на 4 px выше рублёвых — замер показал ровно 4. */
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 2 / -1;
      justify-items: start;
      padding: 22px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #F7F8F8;
      color: #4F595C;
    }

.home-v2 .pricing-intl p {
      margin-bottom: 0;
    }

/* HOME-3.1: цена зарубежной карточки — жирным, но на ступень мельче рублёвых 30 px.
   Пояснение про экономию остаётся обычным текстом, вторичным по цвету. */
.home-v2 .intl-price {
      color: var(--text);
      /* HOME-3.6: кегли цен сближены на полступени — евро поднимается до 26 там, где
         помещается. Не жёсткая медиа-полоса, а непрерывный переход: при полосе на стыке
         980/981 кегль прыгал 20 -> 26 от одного пикселя ширины окна.
         Наклон посчитан по двум точкам, не подобран: 26 на 980 и 20 на 800, где столбик
         даёт 96,6 при потребности «329 €/год» 94,5.
         СТАРТ 820, А НЕ 800, И ЭТО ВАЖНО: 100vw включает полосу прокрутки (в Chrome
         на Windows ~15 px), а колонки считаются от раскладки БЕЗ неё. При старте 800
         в узком конце оставалось 2,1-2,6 px запаса — замерено на стенде с настоящей
         полосой. Со старта 820 полка 20 px держится, пока раскладке реально не станет
         805+, и запас там 4,6-5,5 px. Медиа-запросы, кстати, считают от окна ВМЕСТЕ
         с полосой (проверено: на окне 995 при раскладке 980 правило <=980 не срабатывает),
         поэтому формула и границы полос согласованы между собой. */
      font-size: clamp(20px, calc(20px + (100vw - 820px) * 0.0375), 26px);
      line-height: 1.2;
      letter-spacing: -0.02em;
      font-weight: 800;
    }

/* HOME-3.4: два столбика внутри строк «подписи», «цены» и «пояснение». Сетка вложена
   в ячейку строки, сами строки остаются общими с рублёвыми карточками — иначе выравнивание
   рассыпалось бы. width: 100% нужен из-за justify-items: start у карточки. */
.home-v2 .intl-pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 20px;
      width: 100%;
    }

/* Пояснение живёт только в правом столбике: у месячного тарифа экономии нет. */
.home-v2 .intl-pair--details > * {
      grid-column: 2;
    }

/* HOME-3.6: подписи тарифов в зарубежной карточке наследовали приглушённый цвет карточки
   (#4F595C) и выглядели легче рублёвых при том же классе. Служебные слова одинакового
   смысла должны выглядеть одинаково; вес совпадал и раньше — 800 у всех четырёх.
   Вес карточки держат меньший кегль цены и светлая подложка — они не тронуты. */
.home-v2 .pricing-intl .price-title {
      color: var(--text);
    }

/* HOME-3.4: разделительная линия зарубежной карточки — ровно те же значения, что
   у .price-footnote в рублёвых. Линия лежит во ВНУТРЕННЕЙ строке ряда, поэтому её уровень
   не зависит от padding карточек и совпадает с рублёвыми точно.
   width: 100% из-за justify-items: start у карточки (и из-за align-items: flex-start
   на телефоне): без него бокс сноски сжался бы по тексту и линия вышла короче карточки. */
.home-v2 .pricing-intl .tribute-note {
      width: 100%;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

/* Кнопка прижата к низу последней строки и растянута по ширине карточки — тем же приёмом
   и теми же значениями, что у рублёвых карточек (.price-card .primary-button). */
.home-v2 .pricing-intl .primary-button {
      width: 100%;
      margin-top: auto;
    }

.home-v2 .pricing-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* HOME-3.4: строки больше не объявляются здесь — они приходят из .pricing-layout
         через .pricing-main (третий уровень subgrid). Свои две колонки и внутренний
         зазор 20 сохраняются, поэтому пропорция и вид рублёвой зоны не меняются. */
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
      column-gap: 20px;
      /* ВНИМАНИЕ: row-gap здесь ноль НЕ по забывчивости. Ось строк этого ряда общая с
         subgrid-строками карточек, и любой row-gap раздвинул бы внутренности карточки:
         20px дали бы +80px к её высоте. Вертикальный зазор между карточками нужен только
         там, где они стоят друг под другом, — он задан в блоке (max-width: 768px). */
      row-gap: 0;
      /* HOME-3.0: margin-bottom убран — бонус-бокс уехал из левой зоны, и этот отступ
         только добавлял ей высоты. На телефоне зазор до бонуса даёт .pricing-main.
         HOME-3.4: height: 100% убран — высоту зоны теперь задаёт grid-row: 1 / -1. */
    }

/* HOME-3.1: общая нижняя линия трёх карточек — обе зоны ряда растягиваются на его высоту,
   а не заканчиваются каждая на своём содержимом. */
.home-v2 .pricing-main,
.home-v2 .pricing-intl {
      align-self: stretch;
    }

.home-v2 .price-card {
      /* HOME-3.1: карточка — subgrid-элемент: её содержимое стоит в строках РЯДА, а не в
         своих собственных. Браузер без поддержки subgrid игнорирует это правило и
         раскладывает карточку как прежде — зоны не выровнены, но ничего не ломается. */
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
      position: relative; /* якорь для метки «Рекомендуем» */
      padding: 22px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
    }

/* HOME-2.6: кнопка живёт внутри карточки тарифа. margin-top: auto прижимает её к низу,
   поэтому у обеих карточек кнопки стоят на одной линии, даже если текста разное количество. */
.home-v2 .price-card .primary-button {
      width: 100%;
      margin-top: auto;
    }

.home-v2 .price-card .price-footnote {
      margin-bottom: 16px;
    }

.home-v2 .price-card--recommended {
      border-color: rgba(31, 111, 120, 0.48);
      box-shadow: inset 0 3px 0 var(--accent-soft);
    }

/* HOME-2.6: отклик при наведении у трёх карточек блока цен — только тень и цвет рамки.
   Ни transform, ни keyframes: у проекта принцип «микро-интеракции без спецэффектов».
   Переход 140 ms нужен, чтобы смена цвета не выглядела рывком; движения в нём нет. */
.home-v2 .price-card,
.home-v2 .pricing-intl {
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }

.home-v2 .price-card:hover,
.home-v2 .pricing-intl:hover {
      border-color: rgba(31, 111, 120, 0.55);
      box-shadow: 0 10px 26px rgba(26, 29, 30, 0.07);
    }

/* У рекомендованной карточки сверху акцентная полоса — её тень при наведении сохраняем. */
.home-v2 .price-card--recommended:hover {
      box-shadow: inset 0 3px 0 var(--accent-soft), 0 10px 26px rgba(26, 29, 30, 0.07);
    }

/* HOME-3.1: метка сидит на верхней границе карточки как ярлычок и в потоке не участвует —
   раньше она была первым элементом и толкала вниз подпись с ценой, из-за чего годовая
   карточка ехала на 41 px ниже месячной. Фон белый и непрозрачный: под меткой проходит
   и рамка, и золотая полоса --accent-soft. left равен боковому padding карточки, чтобы
   метка стояла по текстовой оси её содержимого. */
.home-v2 .recommended-badge {
      position: absolute;
      top: 0;
      left: 24px;
      transform: translateY(-50%);
      padding: 6px 10px;
      border: 1px solid var(--teal);
      border-radius: 999px;
      color: var(--teal);
      background: var(--white);
      white-space: nowrap;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

.home-v2 .price-title {
      margin-bottom: 16px;
      font-size: 20px;
      line-height: 1.3;
      font-weight: 800;
    }

.home-v2 .price-main {
      margin-bottom: 12px;
      /* HOME-3.6: 28, а не 30 — разрыв с евро-ценой читался слишком заметным. Полного
         равенства быть не может: евро живёт в колонке вдвое уже рублёвой карточки. */
      font-size: 28px;
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 800;
    }

.home-v2 .price-details {
      margin-bottom: 14px;
      font-size: 15px;
      line-height: 1.55;
    }

.home-v2 .price-footnote {
      /* HOME-3.1: margin-top: auto убран. Он прижимал сноску к низу карточки, и
         разделительная линия оказывалась там, где случайно осталось место. Теперь высоту
         зоны держит строка ряда, а линия стоит по её верху в обеих карточках. */
      padding-top: 18px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

/* HOME-3.5: контурный класс .secondary-button удалён вместе со своим единственным
   применением — кнопка зарубежной карточки теперь .primary-button, ровно как две рублёвые.
   Заливка, цвет, размер и посадка приходят из общего правила, а не описываются заново:
   так «такая же кнопка» гарантирована по построению. Контраст белого на var(--teal)
   5.83:1 — выше порога 4.5:1. Различают дорожки подпись столбца и сноска про Telegram. */
/* HOME-2.4: примечание под кнопкой теперь одно — два коротких съедали высоту
   правой зоны и повторяли друг друга по смыслу. */
.home-v2 .tribute-note {
      /* HOME-3.4: ограничение 46ch снято — длину строки задаёт колонка ряда (~316 px = 45
         знаков), а max-width обрезал бы разделительную линию по ширине текста. */
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

/* HOME-3.0: коробка идёт во всю ширину блока (бонус относится к обоим путям оплаты), но
   строка внутри не растягивается: две колонки — кикер с заголовком слева, описание и
   правило справа. Самая длинная строка 71 знак вместо 109 при тексте во всю ширину, и
   правая половина коробки не остаётся пустой. Вариант с ограничением абзаца в 70ch даёт
   ту же длину строки, но коробку на 73 px выше (263,7 против 190,9 на 1280). */
.home-v2 .course-note {
      display: grid;
      /* HOME-3.3: три зоны — схема, кикер с заголовком, описание. Высоту коробки задаёт
         колонка описания: уже ~578 px абзац добирает строку и коробка растёт на 28,8 px,
         зато внутри этой ступеньки схема бесплатно растёт до 316 px. Поэтому взят максимум
         ступени: 1.58fr даёт 316x178 на 1280 — схема ровно во всю высоту содержимого.
         Доли, а не пиксели: на узких ширинах схема сужается вместе с коробкой. */
      grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr) minmax(0, 2.23fr);
      column-gap: 26px;
      align-items: start;
      margin-bottom: 22px;
      padding: 20px 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #F7F8F8;
      /* HOME-3.5: та же золотая полоса, что у годовой карточки — те же 3 px и тот же
         var(--accent-soft), новых оттенков не вводим. Бонус относится только к годовой
         подписке, и полоса связывает его с ней визуально. Работает без наведения,
         значит видна и на телефоне. */
      box-shadow: inset 0 3px 0 var(--accent-soft);
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }

/* HOME-3.5: наведение на годовую карточку подсвечивает бонус-блок так же, как карточки.
   :has() на общем родителе — единственная связь между ними, ни разметка, ни JS не нужны;
   браузер без :has() просто ничего не делает. Золотая полоса сохраняется в тени, как
   и у самой годовой карточки. */
.home-v2 .pricing-form:has(.price-card--recommended:hover) .course-note {
      border-color: rgba(31, 111, 120, 0.55);
      box-shadow: inset 0 3px 0 var(--accent-soft), 0 10px 26px rgba(26, 29, 30, 0.07);
    }

/* HOME-3.3: схема семинара. Пропорции держит браузер (width: 100% + height: auto плюс
   атрибуты 900x506), object-fit: contain — страховка на случай заданной высоты: обрезать
   схему нельзя, по краям подписи осей, поэтому cover исключён. Рамка не для красоты:
   край файла #F3F3F3 против подложки коробки #F7F8F8 даёт контраст 1,04 — без рамки схема
   растворяется в фоне. Радиус --radius-sm, как у самой коробки: вложенный элемент не должен
   быть мягче контейнера. */
.home-v2 .course-note-figure {
      width: 100%;
      height: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      object-fit: contain;
    }

/* Заголовок — последний в левой колонке, его нижний отступ здесь лишний. На телефоне
   колонка одна, и этот отступ возвращает row-gap (см. блок max-width: 768px). */
.home-v2 .course-note-head h3 {
      margin-bottom: 0;
    }

.home-v2 .course-note-body p:last-child {
      margin-bottom: 0;
    }

.home-v2 .course-note-kicker {
      display: block;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

.home-v2 .included-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      /* HOME-2.3: список общий для обеих зон и идёт во всю ширину — ограничение 940
         разбивало пять пунктов на две строки и добавляло блоку высоты. */
      margin: 0 0 24px;
      padding: 0;
      list-style: none;
    }

.home-v2 .included-list li {
      padding: 9px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--white);
      font-size: 14px;
      line-height: 1.4;
      font-weight: 600;
    }

.home-v2 .included-list li::before {
      margin-right: 8px;
      color: var(--teal);
      content: "✓";
      font-weight: 800;
    }

.home-v2 .payment-actions {
      max-width: 760px;
    }

.home-v2 .payment-compensator {
      margin-top: 16px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

.home-v2 .post-pricing-link {
      margin-top: 8px;
    }

/* HOME-4.3: ограничение max-width: 1120px (HOME-4.2) снято — витрина и команда встают
   в полосу ОБЫЧНЫХ секций, как все остальные сетки карточек страницы. Ориентиром выбрана
   именно она, а не своя новая ширина: при таком выборе большинство секций не двигается
   вообще, и правка остаётся минимальной перед переносом на прод.
   Классы catalog-shell и team-shell в разметке ОСТАВЛЕНЫ намеренно: они больше ничего
   не задают, но остаются готовыми крючками, если полосу сеток когда-нибудь понадобится
   развести с полосой текста.
   Принятая владельцем цена: в полосе 1024-1215 витрина и команда сужаются с 1037 до 960 —
   там у Bulma собственный max-width на .container, и без нашего 1120 он снова связывает.
   Портреты команды на этих ширинах мельчают (309 -> 285 на 1100). Одна линия важнее
   77 px ширины на планшетной полосе; пересмотр узких 960 у Bulma — отдельная задача
   после прода.
   Текстовые ограничения НЕ тронуты: .faq-list (920) и .payment-actions (760) остаются —
   это ширина строки для чтения, а не дефект полосы. */

.home-v2 .catalog-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      /* HOME-4.1: содержимое карточек ряда сведено в ОБЩИЕ строки — тем же приёмом, что
         в блоке цен. Три строки на карточку: обложка, метка формата, текстовый блок
         (заголовок вместе с описанием). Метки и заголовки встают на одни линии, а описание
         остаётся под СВОИМ заголовком — четвёртой общей строки для него намеренно НЕТ:
         с ней у карточки с коротким заголовком открывалась дыра до 61 px между заголовком
         и его описанием (замерено), а это хуже, чем несовпадение верхов описаний.

         Полос три, а не две: на 981+ карточки идут по три в ряд (две полосы), в полосе
         769-980 — по две (три полосы). Лишние строки пустые и весят ровно 0.

         Все строки auto, ни одной 1fr, и это НЕ мелочь: все fr-строки одного шаблона
         получают ОДИН размер, поэтому пустая строка неиспользованной полосы раздувалась бы
         до высоты самой длинной колонки — замерено, +126,75 px к блоку на 1280.

         row-gap здесь ноль: ось строк общая с subgrid-строками карточек, любой row-gap
         раздвинул бы внутренности карточки. Вертикальный зазор 20 между полосами даёт
         margin-bottom самих карточек, он же отделяет последнюю полосу от карточки
         калькулятора. Горизонтальный зазор 20 из gap выше не тронут. */
      grid-template-rows: repeat(3, auto auto auto);
      row-gap: 0;
    }

.home-v2 .catalog-card {
      --card-pad: 20px;
      display: flex;
      min-height: 190px;
      flex-direction: column;
      padding: var(--card-pad);
      border: 1px solid rgba(31, 111, 120, 0.16);
      border-radius: var(--radius-md);
      background: var(--white);
    }

/* HOME-4.1: карточка пропускает строки ряда внутрь (второй уровень subgrid). Калькулятор
   исключён: у него нет обложки, своя двухколоночная раскладка и он стоит один во всю
   ширину ряда. display: flex и flex-direction из правила выше при display: grid не
   действуют, высоту карточки держит теперь сетка ряда; min-height остаётся страховкой.
   Браузер без subgrid просто отбросит grid-template-rows: карточка станет обычной
   колонкой из трёх строк, выравнивание не произойдёт, но ничего не наложится
   и не обрежется (проверено отдельным прогоном). */
.home-v2 .catalog-card:not(.catalog-card--tool) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      margin-bottom: 20px;
    }

/* HOME-3.9: девять карточек обеих витрин кликабельны ЦЕЛИКОМ. Приём — растянутая ссылка:
   у настоящей <a> внутри карточки псевдоэлемент во всю карточку, карточка — position: relative.
   Обёртка всего содержимого в <a> отвергнута: она ломает выделение текста везде в карточке
   (протаскивание по тексту начинает перетаскивание ссылки) и склеивает в имя ссылки обложку,
   метку формата, заголовок и описание — скринридер читает такую карточку одним длинным пунктом.
   Ссылку НЕ добавляем там, где она уже есть: в блоке открытых материалов слой висит на
   «Читать бесплатно →», поэтому число остановок Tab не меняется.
   Островков выделяемого текста НЕТ намеренно: подъём z-index у описания и метки сделал бы
   середину карточки мёртвой зоной, а защищал бы наименее нужный текст. */
.home-v2 .hero-cover,
.home-v2 .catalog-card {
      position: relative;
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }

/* Заголовок карточки первого экрана стал ссылкой — цвет и подчёркивание оставляем прежние. */
.home-v2 a.hero-cover__title {
      color: var(--text);
      text-decoration: none;
    }

/* Кликовый слой. inset: 0 = padding-box карточки, то есть вся площадь внутри рамки,
   включая обложку, которая выходит в край отрицательными полями. */
.home-v2 .hero-cover__title::after,
.home-v2 .catalog-card > .text-link::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      content: "";
    }

/* Подсветка = обещание клика, поэтому она только у витрин. Карточкам команды и отзывов
   её НЕ давать: там кликать не по чему, и подсветка сделала бы их ложно кликабельными.
   Значения те же, что у карточек блока цен: рамка и мягкая тень, без движения. */
.home-v2 .hero-cover:hover,
.home-v2 .catalog-card:hover {
      border-color: rgba(31, 111, 120, 0.55);
      box-shadow: 0 10px 26px rgba(26, 29, 30, 0.07);
    }

/* HOME-1.9: обложка материала в карточке витрины. Выходит в край карточки
   отрицательными полями на величину внутреннего отступа (--card-pad), поэтому при
   смене padding на мобильном достаточно поменять переменную. Кадр строго 16:9,
   object-fit: cover — не растягивается. Радиус верхних углов = радиус карточки
   минус её рамка 1 px. Карточка калькулятора (.catalog-card--tool) обложки не имеет. */
/* HOME-4.0: оболочка обложки. Вылет в край карточки переехал сюда с самой картинки —
   иначе метку не от чего позиционировать: контейнером absolute-элемента стала бы карточка,
   а «низ обложки» в CSS не выражается: высота обложки считается от её ширины через
   aspect-ratio, а проценты в top/bottom считаются от высоты контейнера. */
.home-v2 .catalog-cover-shell {
      position: relative;
      width: calc(100% + var(--card-pad) * 2);
      margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 16px;
    }

/* HOME-4.0: метка «Бесплатно» ВНУТРИ обложки, в левом нижнем углу. На верхней границе
   карточки она садилась бы поверх композиции кадра; внизу слева у всех шести обложек фон.
   Оформление один в один с .recommended-badge из блока цен — новых цветов и кеглей нет.
   Левый отступ = var(--card-pad), а не 12: обложка выходит за поля карточки, и при 12 px
   метка встала бы левее текста и разорвала вертикальную линию «метка — СТАТЬЯ — заголовок».
   Нижний отступ 12 = --radius-sm, вдвое больше собственного padding метки (6).
   Тень — готовое значение от .primary-button:hover, единственная в файле с заметной
   непрозрачностью (0.2) и в фирменном тоне: на светлых обложках (анатомия 0.86, креатин
   0.71 по яркости участка) белая заливка почти сливается со снимком, рамки там мало. */
.home-v2 .free-badge {
      position: absolute;
      bottom: 12px;
      left: var(--card-pad);
      padding: 6px 10px;
      border: 1px solid var(--teal);
      border-radius: 999px;
      color: var(--teal);
      background: var(--white);
      box-shadow: 0 10px 22px rgba(31, 111, 120, 0.2);
      white-space: nowrap;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

/* HOME-4.0: нижние строки «Читать бесплатно →» удалены, кликовый слой переехал
   на заголовок карточки. Приём тот же, что у карточек витрины первого экрана. */
.home-v2 a.catalog-card__link {
      color: var(--text);
      text-decoration: none;
    }

.home-v2 .catalog-card__link::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      content: "";
    }

.home-v2 .catalog-cover {
      display: block;
      width: 100%;
      max-width: none; /* иначе базовый сброс .home-v2 img{max-width:100%} обрежет вылет */
      height: auto;
      /* HOME-4.0: вылет и нижний отступ переехали на .catalog-cover-shell */
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 17px 17px 0 0;
      background: var(--tint);
    }

.home-v2 .catalog-card[hidden] {
      display: none;
    }

.home-v2 .catalog-card h3 {
      margin-bottom: 10px;
      font-size: 19px;
      line-height: 1.32;
    }

.home-v2 .catalog-card p {
      margin-bottom: 16px;
      font-size: 15px;
      line-height: 1.55;
    }

.home-v2 .catalog-card .text-link {
      margin-top: auto;
      align-self: flex-start;
    }

.home-v2 .catalog-card--tool {
      grid-column: 1 / -1;
      min-height: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
    }

.home-v2 .catalog-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 24px;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-xs); /* HOME-4.1: было 26 жёстко */
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

.home-v2 .faq-list {
      max-width: 920px;
      border-top: 1px solid var(--line);
    }

.home-v2 .faq-item {
      border-bottom: 1px solid var(--line);
    }

.home-v2 .faq-question {
      display: grid;
      width: 100%;
      grid-template-columns: minmax(0, 1fr) 26px;
      gap: 22px;
      align-items: center;
      padding: 24px 0;
      color: var(--text);
      background: transparent;
      text-align: left;
      font-size: 18px;
      line-height: 1.45;
      font-weight: 800;
      cursor: pointer;
    }

.home-v2 .faq-icon {
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border: 1px solid var(--line-dark);
      border-radius: 50%;
      color: var(--teal);
      transition: transform 160ms ease;
    }

.home-v2 .faq-question[aria-expanded="true"] .faq-icon {
      transform: rotate(45deg);
    }

.home-v2 .faq-answer {
      max-width: var(--text-measure);
      padding: 0 46px 26px 0;
    }

.home-v2 .faq-answer[hidden] {
      display: none;
    }

.home-v2 .final-cta {
      --focus-ring: #FFFFFF;
      /* HOME-4.1: не пятая ступень шкалы, а L, ослабленный на десятую — ровно то
         соотношение, что было до шкалы (70/76 и 112/124). Отдельными числами больше
         не задаётся: меняется L — меняется и здесь. */
      padding-top: calc(var(--space-l) * 0.9);
      padding-bottom: calc(var(--space-l) * 0.9);
      color: var(--white);
      background: var(--dark);
    }

.home-v2 .final-cta-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 42px;
      align-items: end;
    }

.home-v2 .final-cta h2 {
      max-width: 820px;
      margin-bottom: 20px;
      color: var(--white);
    }

.home-v2 .final-cta-copy {
      max-width: 780px;
      color: var(--white);
    }

.home-v2 .final-cta .primary-button {
      min-width: 210px;
      border-color: rgba(255, 255, 255, 0.72);
      color: var(--white);
      background: var(--teal);
    }

.home-v2 .final-cta-note {
      margin-top: 14px;
      color: var(--white);
      font-size: 14px;
      line-height: 1.5;
    }

.home-v2 #hero-title,
.home-v2 #method-title,
.home-v2 #catalog-title,
.home-v2 #subscription {
      scroll-margin-top: 76px;
    }

/* Short desktop viewports (incl. 125% zoom): keep the whole hero above the fold.
   Priority: button + trust markers stay visible; shrink h1 and rhythm as needed. */
@media (min-width: 769px) and (max-height: 800px) {
.home-v2 .hero {
        padding-top: 20px;
        padding-bottom: 20px;
      }

.home-v2 .hero .eyebrow {
        margin-bottom: 12px;
      }

.home-v2 .hero h1 {
        margin-bottom: 12px;
        font-size: clamp(26px, 0.6rem + 2.4vw, 40px);
        line-height: 1.1;
      }

.home-v2 .hero-subtitle {
        margin-bottom: 16px;
        font-size: 17px;
        line-height: 1.5;
      }

.home-v2 .hero-actions {
        margin-bottom: 16px;
      }

.home-v2 .hero-cover--lead .hero-cover__title {
        font-size: 17px;
      }
}

/* HOME-2.7: вся двухколоночная раскладка первого экрана, где текст и стопка карточек
   стоят в ряд. Граница 981, а не 1216: .hero-grid распадается в одну колонку только на
   <=980, поэтому внутри 981-1216 раскладка та же самая, и разные правила выравнивания
   там дали бы двум посетителям с окнами 1200 и 1250 два разных макета. Ряд прижат к
   верху вместо центрирования — «НАУЧОБЗОР · БЕЗ ПСЕВДОНАУКИ» встаёт на линию верха
   верхней карточки. Ни растягивания зон, ни распределения по высоте: разница высот
   (57 px на 1440, 125 на 1280) в стопке из двух карточек ушла бы в зазор между ними
   и раздула бы его до 139 px — замер это подтвердил. Освободившаяся высота уходит
   вниз ряда, min-height секции не тронут.

   Компенсация -12px складывается из двух межстрочных, оба посчитаны, не подобраны:
     1) .eyebrow — inline-flex внутри блока с line-height 1.6 при font-size 18px, то есть
        строка родителя 28,8 px против 18,2 px у самой плашки: бокс плашки опускается на
        ~8 px от верха колонки;
     2) внутри плашки 13px/1.4: полуинтерлиньяж 0,1 + (ascender 14 - высота заглавных 10)
        = 4,1 px до верха букв.
   Итого 12,1 -> -12px. Величина зависит только от кеглей и межстрочных, не от ширины
   окна: остаток проверен на 1440, 1280, 1216, 1100 и 1000 — одинаковый на всех.
   В px, а не в em: константа складывается из двух РАЗНЫХ кеглей (страйк родителя 18px
   и собственный 13px), поэтому доля от одного кегля её не описывает. Обе величины
   в полосе 981+ неизменны: переопределение базового кегля на 17px живёт в @media
   (max-width: 768px), то есть ниже этого блока, а у .eyebrow в полосе меняется только
   margin-bottom (блок max-height: 800px), что верхнюю линию не двигает.

   HOME-2.9: ряд больше не растягивается на высоту секции, а центрируется в ней.
   Почему растягивался: .hero — флекс, но flex-direction: column приходит из app.css
   (Bulma), то есть главная ось вертикальная, а у Bulma-шного .container стоит
   flex-grow: 1 — ряд вырастал на всю свободную высоту, прижимал контент к верху
   и оставлял снизу пустую полосу (235 px на 1280). flex-grow: 0 возвращает ряду
   высоту по контенту, justify-content: center делит остаток поровну сверху и снизу
   (у .hero ровно один ребёнок). Подобранных отступов здесь нет — обе величины
   считает браузер. Выравнивание зон по верху и компенсация -12px не затронуты:
   линия «НАУЧОБЗОР» / верх первой карточки остаётся на месте.
   При контенте выше секции делить нечего — правка становится бездействующей,
   верх не обрезается (проверено на 1280x420).
   ОТКАТ: удалить блок @media (min-width: 981px) ЦЕЛИКОМ, все строки. Возврата
   одного align-items: center недостаточно — margin-top: -12px сдвигает колонку
   и при центрировании. */
/* HOME-4.5: три правила первого экрана из этого блока УДАЛЕНЫ — .hero{justify-content},
   .hero-grid{align-items,flex-grow} и .hero-copy{margin-top:-12px}. Всё описанное выше
   относилось к двухколоночной раскладке: константа -12px сводила метку «НАУЧОБЗОР»
   с верхом первой карточки, а карточки больше не стоят справа от текста.
   Сам блок ОСТАВЛЕН: в нём живут колонки бонус-блока (.course-note), а это блок цен —
   принят и закрыт. Удалить блок «целиком» было нельзя именно поэтому. */
@media (min-width: 981px) {
/* HOME-3.6: заголовок бонус-блока рвался на четыре строки. Перераспределение долей в чистом
   виде не спасало: на 1100 заголовку нужно не меньше 287 px (иначе четыре строки), описанию —
   не меньше 390 (иначе шестая строка), и вместе они в ряд не влезали. Поэтому у средней
   и правой колонок стоят МИНИМУМЫ по этим замеренным порогам, а сжатие отдано схеме: она
   уходит с 249 до 185 px на 1100 и высоту коробки за собой не тянет. Итог: заголовок 2 строки
   на 1216-1440 и 3 на 1100, описание везде 5, коробка стала НИЖЕ (220,5 -> 186).
   Числа — пороги переноса, а не подобранные отступы; если тексты изменятся, порог сместится,
   но деградация мягкая — лишняя строка, без поломки. Полоса 769-980 намеренно не тронута:
   там заголовок остаётся четырёхстрочным при любой ширине колонки, а схема потеряла бы 79 px. */
.home-v2 .course-note {
        grid-template-columns: minmax(0, 1.2fr) minmax(287px, 1.44fr) minmax(390px, 2fr);
      }
}

@media (max-width: 980px) {
.home-v2 .hero-grid,
.home-v2 .independence-box,
.home-v2 .final-cta-inner {
        grid-template-columns: 1fr;
      }

/* HOME-4.5: витрина первого экрана (.hero-covers) добавлена сюда и в список одной колонки
   ниже — её адаптив теперь ровно тот же, что у витрины открытых материалов: 3 -> 2 -> 1.
   Собственных режимов у первого экрана не осталось. */
.home-v2 .product-grid,
.home-v2 .testimonials-grid,
.home-v2 .hero-covers,
.home-v2 .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

/* HOME-1.8: команда держит сетку 3x2 до 768 px. Прежнее правило рвало её на две
   колонки уже с 980, и с настоящими портретами 1:1 это давало снимки по 446 px и
   блок в полтора экрана высотой. На телефонах две колонки включает блок ниже. */

.home-v2 .catalog-card--tool {
        grid-column: 1 / -1;
      }

.home-v2 .final-cta-inner {
        align-items: start;
      }

/* HOME-3.6: жёсткое правило «20 px в этой полосе» снято — его заменил непрерывный clamp
   в базовом правиле .intl-price. Причина замены: на стыке 980/981 кегль прыгал 20 -> 26
   от одного пикселя ширины окна. Границы полосы менять не понадобилось. */

/* HOME-3.4: внутренний зазор столбиков 20 -> 10 в этой же полосе. Кегля 20 на 800 px
   не хватило: столбик там 91,6, а «329 €/год» требует 94,5 и «На месяц» 93,8 (замер
   невидимым клоном с теми же метриками). Зазор 10 даёт столбику 96,6 — обе строки
   в одну линию с запасом. Типографику это не трогает. */
.home-v2 .intl-pair {
        column-gap: 10px;
      }
}

@media (max-width: 768px) {
.home-v2 {
        font-size: 17px;
      }

.home-v2 .section {
        padding-right: 18px;
        padding-left: 18px;
      }

.home-v2 .section-heading h2,
.home-v2 .section h2 {
        font-size: clamp(26px, 7.4vw, 28px);
      }

.home-v2 .section h3 {
        font-size: 20px;
      }

.home-v2 .small {
        font-size: 14px;
      }

.home-v2 .hero {
        padding-top: 28px;
        padding-bottom: 24px;
      }

/* HOME-4.5: было gap: 16px. Правило НЕ бездействующее, как я сперва решил: оно стоит
   ниже базового и перебило бы row-gap: 0, добавив по 16 px к каждому из трёх стыков
   колонки. Обнуляем явно — интервалы задают отступы самих блоков. */
.home-v2 .hero-grid {
        row-gap: 0;
      }

.home-v2 .hero h1 {
        margin-bottom: 18px;
      }

.home-v2 .hero-subtitle {
        margin-bottom: 0;
        font-size: 17px;
        line-height: 1.56;
      }

/* HOME-4.5: на телефоне ряд карточек прижат к блоку кнопок минимальным шагом шкалы.
   Причина не косметическая: кнопки переехали ПОД карточки, и на 390x844 «Смотреть
   тарифы» оказывалась срезана сгибом на 2,3 px. --space-xs вместо --space-m возвращает
   16 px и поднимает кнопку целиком над сгибом. Верхний отступ ряда не тронут. */
.home-v2 .hero-covers {
        margin-bottom: var(--space-xs);
      }

.home-v2 .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        /* HOME-4.5: было 18 жёстко — тот же мелкий шаг шкалы, что на десктопе. */
        margin-bottom: var(--space-xs);
      }

.home-v2 .hero-actions .primary-button {
        width: 100%;
      }

.home-v2 .hero-actions .text-link {
        justify-self: start;
      }

.home-v2 .trust-markers {
        gap: 3px 8px;
        font-size: 14px;
      }

.home-v2 .trust-markers span:not(:last-child)::after {
        margin-left: 8px;
      }

.home-v2 .audience-grid,
.home-v2 .product-grid,
.home-v2 .benefit-grid,
.home-v2 .testimonials-grid,
.home-v2 .pricing-grid,
.home-v2 .hero-covers,
.home-v2 .catalog-grid,
.home-v2 .team-grid {
        grid-template-columns: 1fr;
      }

/* HOME-3.1: на телефоне карточки тарифов идут друг под другом, поэтому subgrid-ряд здесь
   ОТКЛЮЧАЕТСЯ: иначе обе карточки легли бы в одни и те же строки и наложились. Вместе с
   ним возвращается вертикальный зазор 20 px — тот же, что был у прежнего gap: 20px.
   Метка «Рекомендуем» выступает над карточкой примерно на 15 px, то есть внутри этого
   зазора, и до карточки выше не доходит. */
.home-v2 .pricing-grid {
        grid-template-rows: none;
        grid-row: auto;
        row-gap: 20px;
        height: auto;
      }

.home-v2 .price-card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
      }

/* B: на телефоне портреты команды остаются парами, чтобы блок не растягивался.
   HOME-2.0: отзывы из этого правила ВЫВЕДЕНЫ — на ~150 px колонки текст рвался по два
   слова в строку, поэтому отзывы идут одной колонкой (правило выше, 1fr). */
.home-v2 .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* HOME-4.2: было 24 жёстко (HOME-2.2: 32 на телефоне съедает ширину портрета).
           На всей полосе <=768 --space-s равен ровно 24 — 2.8vw там ниже нижней границы
           clamp, — поэтому телефон не изменился ни на пиксель, а жёсткое число ушло
           из файла в шкалу. */
        gap: var(--space-s);
      }

/* HOME-1.8: в двух колонках на телефоне на подпись остаётся ~165 px, поэтому имя и роль
   мельче — иначе имя рвётся на две строки, а роль уходит в три-четыре. */
.home-v2 .team-photo {
        margin-bottom: 11px;
      }

/* HOME-1.9: имя и роль на телефоне остаются точно как были до уменьшения десктопных
   карточек — базовые межстрочный и отступ там теперь другие, поэтому фиксируем явно. */
.home-v2 .member-name {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 4px;
      }

.home-v2 .member-role {
        font-size: 13px;
        line-height: 1.4;
      }

.home-v2 .audience-card,
.home-v2 .solution-card,
.home-v2 .product-card,
.home-v2 .benefit-card,
.home-v2 .testimonial-card,
.home-v2 .catalog-card {
        padding: 24px;
      }

/* HOME-2.0: аватарка автора на телефоне чуть меньше. */
.home-v2 .testimonial-avatar {
        width: 46px;
        height: 46px;
      }

/* HOME-1.9: на мобильном внутренний отступ карточки 24 — обложке нужно выходить в край
   ровно на столько же, иначе появятся белые поля по бокам. */
.home-v2 .catalog-card {
        --card-pad: 24px;
      }

/* HOME-4.1: на телефоне карточки идут одной колонкой — гасим ВСЕ уровни subgrid явно,
   как в блоке цен: общие строки ряда положили бы карточки друг на друга. Сброс на каждом
   уровне отдельно, .catalog-grid и .catalog-card. Вертикальный зазор 20 возвращается
   через row-gap сетки, собственный margin карточки при этом убирается — иначе снизу
   витрины набежало бы лишних 20. Селектор тот же, что в базовом правиле, поэтому
   специфичности хватает и !important не нужен. */
.home-v2 .catalog-grid {
        grid-template-rows: none;
        row-gap: 20px;
      }

.home-v2 .catalog-card:not(.catalog-card--tool) {
        display: flex;
        grid-template-rows: none;
        grid-row: auto;
        margin-bottom: 0;
      }

.home-v2 .stepper-desktop {
        display: none;
      }

.home-v2 .stepper-items {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
      }

.home-v2 .stepper-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        min-height: 94px;
        position: relative;
      }

/* HOME-4.7: на телефоне линия ВЕРТИКАЛЬНАЯ, поэтому горизонтальные значения из базового
   правила сбрасываются ЯВНО. Без этого height: 2px из базы пережил бы top+bottom
   (при заданных top, bottom и height выигрывает height), а right: -44px увёл бы линию
   вбок — вертикальный соединитель шагов сломался бы. */
.home-v2 .stepper-item:not(:last-child)::after {
        position: absolute;
        top: 42px;
        right: auto;
        bottom: 0;
        left: 21px;
        width: 2px;
        height: auto;
        background: var(--line);
        content: "";
      }

/* HOME-4.7: на телефоне маркер стоит в своей колонке сетки шага, отступ снизу не нужен —
   сбрасываем базовые 12 px. Размер 44 сохранён: на телефоне кружок был и остаётся мельче. */
.home-v2 .stepper-item-mobile-marker {
        display: block;
        width: 44px;
        height: 44px;
        margin-bottom: 0;
      }

.home-v2 .stepper-item-mobile-marker circle {
        fill: var(--white);
        stroke: var(--teal);
        stroke-width: 2;
      }

.home-v2 .stepper-item-mobile-marker text {
        fill: var(--teal);
        font-family: "Manrope", sans-serif;
        font-size: 16px;
        font-weight: 800;
        dominant-baseline: middle;
        text-anchor: middle;
      }

.home-v2 .stepper-item p {
        padding-top: 7px;
      }

.home-v2 .independence-note {
        padding-top: 22px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
      }

.home-v2 .team-featured {
        width: 100%;
        margin-bottom: 34px;
      }

/* HOME-2.5: разметку не меняли: .pricing-layout получает display: contents, его дети
   становятся прямыми элементами flex-колонки .pricing-form, и порядок задаётся ТОЛЬКО
   значениями order.

   HOME-4.1: порядок на телефоне — три карточки подряд, потом всё общее:
   подпись РФ -> месяц -> год -> подпись зарубежной -> зарубежная -> бонус ->
   «Что входит» -> автопродление -> ссылка на открытые материалы.
   Было: бонус, список и условия автосписания стояли ПЕРЕД зарубежной карточкой, и
   человек, дочитав состав подписки, считал блок законченным и натыкался ещё на одну цену.
   Общее для всех трёх дорожек должно идти после них, а не разрывать их.

   Побочный эффект HOME-2.5 снят: раньше видимый порядок расходился с порядком узлов
   (скринридер читал зарубежную карточку до списка и кнопок, глаз видел её после).
   Теперь порядки совпадают везде, кроме одной перестановки: подпись зарубежной дорожки
   стоит в разметке второй, потому что на десктопе она элемент ПЕРВОГО ряда сетки.

   Селектор .pricing-form > h3 попадает ТОЛЬКО в «Что входит»: подписи путей оплаты лежат
   внутри .pricing-layout, а display: contents структуру DOM не меняет — дочерним
   комбинатором они не достаются. */
.home-v2 .pricing-form {
        display: flex;
        flex-direction: column;
      }

.home-v2 .pricing-layout {
        display: contents;
      }

/* HOME-3.4: гасим ВСЕ уровни subgrid. На телефоне карточки идут одной колонкой, и общие
   строки ряда положили бы их друг на друга — на этом я уже спотыкался в HOME-3.1, поэтому
   сброс явный на каждом уровне: .pricing-main, .pricing-grid, .price-card, .pricing-intl. */
.home-v2 .pricing-main {
        margin-bottom: 22px;
        order: 1;
        display: block;
        grid-template-rows: none;
        grid-row: auto;
      }

/* HOME-4.1: подпись и карточка зарубежной дорожки встают сразу после рублёвых карточек.
   Отступ 22 px до подписи снова даёт margin-bottom у .pricing-main выше, поэтому
   собственный margin-top подписи (HOME-3.0) убран — иначе на стыке вышло бы 44 вместо 22.
   Ровно те же 22 переехали ВНИЗ зарубежной карточки: там они отделяют её от бонус-бокса
   так же, как раньше отделял его .pricing-main. Набор из восьми зазоров блока не изменился
   ни по составу, ни по величинам — блок только переставлен, высота та же до десятых. */
.home-v2 .payment-region-heading--intl {
        order: 2;
      }

.home-v2 .pricing-intl {
        order: 3;
        margin-bottom: 22px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        grid-template-rows: none;
        grid-row: auto;
      }

/* HOME-3.0: бонус-бокс на телефоне снова в одну колонку. row-gap 16 — ровно тот отступ,
   который в одноколоночном потоке давал margin-bottom заголовка: геометрия коробки
   совпадает с прежней до десятых (кикер 21, заголовок 47,8, описание 113,8, правило 292,9). */
.home-v2 .course-note {
        grid-template-columns: 1fr;
        row-gap: 16px;
        order: 4;
      }

/* HOME-4.1: заголовок «Что входит». См. оговорку про > h3 в комментарии к порядку выше. */
.home-v2 .pricing-form > h3 {
        order: 5;
      }

.home-v2 .post-pricing-link {
        order: 8;
      }

.home-v2 .pricing-intl {
        width: 100%;
      }

/* HOME-3.6: на телефоне карточка идёт во всю ширину, столбик там 118-153 px — снова
   помещается 24. Ниже 24 не опускаемся и выше не поднимаемся: на 320 «329 €/год» требует
   113,4 при столбике 118, при 26 понадобилось бы 122,9 и цена ушла бы в две строки. */
.home-v2 .intl-price {
        font-size: 24px;
      }

.home-v2 .included-list {
        display: grid;
        grid-template-columns: 1fr;
        order: 6;
      }

.home-v2 .payment-actions {
        order: 7;
      }

.home-v2 .catalog-card--tool {
        display: flex;
        grid-column: auto;
      }

.home-v2 .faq-question {
        padding: 21px 0;
        font-size: 17px;
      }

.home-v2 .faq-answer {
        padding-right: 0;
      }

.home-v2 .final-cta .primary-button {
        width: 100%;
      }
}

/* HOME-1.7: витрина обложек строками «миниатюра слева + формат и название справа».
   Обложка кадрируется (object-fit: cover), не растягивается; название переносится целиком.

   HOME-4.5: диапазон 980-1216 из условия УБРАН — там первый экран больше не двухколоночный,
   витрина идёт во всю полосу и помещается обычными карточками. Строчный режим остался
   ТОЛЬКО для телефонов (<=768), и это не остаток, а необходимость: кнопки переехали под
   карточки, и тремя полноразмерными карточками (по 252 px) ряд отодвинул бы «Смотреть
   тарифы» на 1386 px от верха — кнопка ушла бы с первого экрана совсем. Со строками
   карточка 82 px, и кнопка остаётся над сгибом. Замерено: 390x844, низ кнопки 830 при
   строках против 1438 при полных карточках.

   Прежнее предупреждение про целые границы и перекрытие с блоком 768-980 снято вместе
   с самим блоком 768-980 (см. ниже): спорить теперь не с чем, диапазон один. */
@media (max-width: 768px) {
.home-v2 .hero-covers {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 12px; /* HOME-2.7: было 8 — строки сливались */
      }

.home-v2 .hero-cover,
.home-v2 .hero-cover--lead {
        display: grid;
        grid-row: auto;
        grid-template-columns: 40% minmax(0, 1fr);
        align-self: stretch;
        min-height: 0;
        padding: 0;
        border-radius: 12px;
        /* HOME-2.3: полоса под колонкой миниатюры была светлой (var(--tint)) и
           читалась как подложка за карточкой. Теперь белая: добирает высоту, когда
           название заняло три строки, но визуально ничего не добавляет. */
        background: linear-gradient(to right, var(--white) 40%, var(--white) 40%);
      }

/* Кадр остаётся ровно 16:9 при любой высоте строки. */
.home-v2 .hero-cover__img {
        align-self: center;
        height: auto;
      }

.home-v2 .hero-cover__meta,
.home-v2 .hero-cover--lead .hero-cover__meta {
        gap: 3px;
        padding: 10px 12px;
      }

.home-v2 .hero-cover__format,
.home-v2 .hero-cover--lead .hero-cover__format {
        font-size: 9.5px;
      }

.home-v2 .hero-cover__title,
.home-v2 .hero-cover--lead .hero-cover__title {
        font-size: 13px;
        line-height: 1.25;
      }
}

@media (max-width: 390px) {
.home-v2 .section {
        padding-right: 16px;
        padding-left: 16px;
      }

.home-v2 .hero {
        padding-top: 28px;
        padding-bottom: 30px;
      }

.home-v2 .hero h1 {
        font-size: 30px;
      }

.home-v2 .hero-subtitle {
        line-height: 1.48;
      }

/* HOME-2.0: узкие телефоны — фиксированную ширину миниатюры сняли, её считает доля 40 %
   из блока строк (на 320 это ~115 px). Здесь остаются только отступы подписи. */
.home-v2 .hero-cover__meta,
.home-v2 .hero-cover--lead .hero-cover__meta {
        padding: 9px 11px;
      }

.home-v2 .demo-card,
.home-v2 .independence-box {
        padding: 24px;
      }
}

/* B: on the narrowest phones a 2-column team grid gets cramped -> back to 1 column. */
@media (max-width: 360px) {
.home-v2 .team-grid {
        grid-template-columns: 1fr;
      }

/* HOME-2.0: на 320 px ширину миниатюры тоже считает доля 40 %, фиксированные 88 px сняты.
   Название здесь уже 13 px из блока строк — отдельного размера не нужно. */
.home-v2 .hero-cover__meta,
.home-v2 .hero-cover--lead .hero-cover__meta {
        padding: 8px 10px;
      }
}

@media (prefers-reduced-motion: reduce) {
.home-v2 {
        scroll-behavior: auto;
      }

.home-v2, .home-v2 *,
.home-v2 *::before,
.home-v2 *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
}