/* site-v2 self-hosted fonts — Oswald 500, полная кириллица (замена Bebas Neue) */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/oswald-500-cyrillic-ext.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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/oswald-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/oswald-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/oswald-500-latin-ext.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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/oswald-500-latin.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;
}

/* Inter (400/500/600/700) и JetBrains Mono (500/600) — переехали из
   fonts/landing-v2/fonts.css планом 81.2-11 при удалении прежнего
   лендингового контура (D-07). Полный набор шрифтов интерфейса
   публичного контура (site-v2) теперь живёт в одном месте. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/site-v2/inter-400-latin.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/inter-500-latin.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/inter-600-latin.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/site-v2/inter-700-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-500-cyrillic-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-500-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-500-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-600-cyrillic-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-600-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/site-v2/jetbrains-mono-600-latin.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;
}

@charset "UTF-8";
/* =============================================================
 * sbor.team — каркас публичного сайта (site-v2)
 * Source: docs/design/mockups/styles/site-v2.css (171 строка, перенесено дословно)
 * Расширение палитры прежнего одностраничника (удалён планом 81.2-11,
 * D-07): нейтральные токены сохранены, зелёная шкала пересобрана от
 * логотипа (шаг 6, пять ролей акцента).
 * ============================================================= */
/* ── Self-hosted fonts ───────────────────────────────────── */
:root {
  /* — палитра, унаследованная без изменений — */
  --v2-bg: #fdfbf4;
  --v2-canvas: #f2f1ec;
  --v2-ink: #0e1411;
  --v2-ink-2: #3a4641;
  --v2-ink-3: #6a7570;
  --v2-line: #dfddd4;
  --v2-line-2: #c8c5b9;
  --v2-white: #fff;
  /* — палитра, пересобранная от логотипа (шаг 6) — */
  --v2-green: #8fbd56; /* Brand — логотип, акценты, плашки под тёмным текстом · 6,70:1 */
  --v2-brand-hover: #7cb342; /* Brand Hover — наведение, тоже под тёмным · 5,86:1 */
  --v2-brand-line: #689f38; /* Brand Line — рамки и иконки на белом, не текст · 3,18:1 */
  --v2-green-ink: #33691e; /* Brand Ink — кнопки и ссылки с белым текстом · 6,60:1 */
  --v2-green-ink-2: #2b5719; /* нажатие и наведение на Brand Ink · 8,42:1 с белым */
  --v2-green-soft: #f1f8e9; /* Brand Soft — подложки · 13,52:1 с основным текстом */
  --v2-green-soft-2: #dcedc8; /* наведение на подложке */
  --v2-green-line: #c5e1a5; /* границы зелёных плашек на подложке */
  --v2-warn-soft: #fdf3e0;
  --v2-warn-line: #eccf94;
  --v2-warn-ink: #8a5a12;
  /* — деструктив формы: канон из site-demo.html (план 81.2-13, 6,93:1 на белом) —
     заменил придуманные --v2-error/--v2-error-soft плана 81.2-01, введённые до
     появления канона; свод произведён планом 81.2-13 (обязательная часть плана) — */
  --v2-err: #b3261e;
  --v2-err-soft: #fdecea;
  --v2-err-line: #f0c2bd;
  --v2-shadow-card: 0 1px 2px rgba(14, 20, 17, .03), 0 6px 24px rgba(14, 20, 17, .05);
  --v2-shadow-lift: 0 24px 60px rgba(14, 20, 17, .14), 0 2px 8px rgba(14, 20, 17, .06);
  --v2-radius: 14px;
  /* — новые токены длинных текстов — */
  --v2-measure: 68ch; /* комфортная длина строки статьи */
  --v2-measure-narrow: 58ch; /* юридический текст, врезки */
  --v2-prose-size: 17px;
  --v2-prose-lh: 1.72;
  --v2-h1: 52px;
  --v2-h2: 32px;
  --v2-h3: 22px;
  --v2-h4: 16px;
  --v2-caption: 13px;
  --v2-eyebrow: 11px;
  --v2-space-prose: 22px; /* между абзацами */
  --v2-space-h2: 44px;
  --v2-space-h3: 30px;
  --v2-shell-max: 1240px;
  --v2-shell-pad: 56px;
}

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

.v2 {
  margin: 0;
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.v2 a {
  color: var(--v2-green-ink);
  text-decoration: none;
}

.v2 a:hover {
  color: var(--v2-green-ink-2);
  text-decoration: underline;
}

.v2 :focus-visible {
  outline: 2px solid var(--v2-green-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── SR-only (a11y) ──────────────────────────────────────── */
/* Переехало из таблицы стилей прежнего одностраничника планом 81.2-11
   (D-07) — ссылка «перейти к содержимому» (layouts/site-app.blade.php)
   была единственным потребителем и без .sr-only была видна постоянно.
   Правило :focus добавлено тем же переносом: до этого нигде в
   репозитории не было раскрытия по фокусу, поэтому skip-ссылка была
   недоступна с клавиатуры. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: static !important;
  width: auto;
  height: auto;
  padding: 8px 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--v2-white);
  color: var(--v2-ink);
  border-radius: 8px;
  box-shadow: var(--v2-shadow-lift);
  z-index: 100;
}

.dsp {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Контраст .eyebrow: класс используется на десятках секций трёх страниц
   этой волны, часть которых имеет фон --v2-canvas (D-03, чередующиеся
   подложки). Мокап держит --v2-ink-3, что на --v2-canvas даёт 4,23:1 —
   ниже порога 4,5:1 (план 81.2-12, задача 3, npm run check:contrast).
   Точечная замена на --v2-ink-2 безопасна на обоих фонах, которые
   реально встречаются на живых страницах. */
.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--v2-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-ink-2);
}

.shell {
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  padding: 0 var(--v2-shell-pad);
}

/* ── Шапка ───────────────────────────────────────────────── */
.hdr {
  background: var(--v2-bg);
  border-bottom: 1px solid var(--v2-line);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 0;
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  padding-left: var(--v2-shell-pad);
  padding-right: var(--v2-shell-pad);
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.logo img {
  display: block;
  height: 26px;
  width: auto;
}

.logo__slogan {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--v2-ink-3);
  border-left: 1px solid var(--v2-line-2);
  padding-left: 11px;
  line-height: 1.1;
  max-width: 82px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.v2 .nav a, .v2 .nav button, .nav a, .nav button {
  font: 500 14px/1 "Inter", sans-serif;
  color: var(--v2-ink-2);
  background: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.v2 .nav a:hover, .nav a:hover, .nav button:hover {
  background: var(--v2-canvas);
  color: var(--v2-ink);
  text-decoration: none;
}

.nav .is-open {
  background: var(--v2-canvas);
  color: var(--v2-ink);
}

.nav .cur {
  color: var(--v2-ink);
  box-shadow: inset 0 -2px 0 var(--v2-green);
}

.chev {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.hdr__act {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 14px/1 "Inter", sans-serif;
  font-family: inherit;
  border-radius: 10px;
  padding: 12px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  text-decoration: none;
}

.v2 .btn--pri, .btn--pri {
  background: var(--v2-green-ink);
  color: #fff;
}

.v2 .btn--pri:hover, .btn--pri:hover {
  background: var(--v2-green-ink-2);
  color: #fff;
  text-decoration: none;
}

.v2 .btn--ghost, .btn--ghost {
  background: transparent;
  color: var(--v2-ink-2);
  border-color: var(--v2-line-2);
}

.v2 .btn--ghost:hover, .btn--ghost:hover {
  background: var(--v2-canvas);
  color: var(--v2-ink);
  text-decoration: none;
}

.v2 .btn--brand, .btn--brand {
  background: var(--v2-green);
  color: var(--v2-ink);
} /* фирменный + тёмный текст, 8,5:1 */
.v2 .btn--brand:hover, .btn--brand:hover {
  background: var(--v2-brand-hover);
  color: var(--v2-ink);
  text-decoration: none;
}

.btn--sm {
  padding: 9px 14px;
  font-size: 13px;
  min-height: 38px;
  border-radius: 8px;
}

.btn--lg {
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 700;
  min-height: 52px;
  border-radius: 12px;
}

/* выпадающее меню */
.mega {
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-white);
  box-shadow: var(--v2-shadow-card);
}

.mega__in {
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  padding: 26px var(--v2-shell-pad) 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  gap: 36px;
}

.mega__col h4 {
  font: 600 12px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  margin: 0 0 14px;
}

.mega__list {
  display: grid;
  gap: 2px;
}

.v2 .mega__item, .mega__item {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 500;
}

.v2 .mega__item:hover, .mega__item:hover {
  background: var(--v2-canvas);
  color: var(--v2-ink);
  text-decoration: none;
}

.mega__item span {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--v2-ink-3);
  padding-top: 3px;
}

.mega__promo {
  background: var(--v2-green-soft);
  border: 1px solid var(--v2-green-line);
  border-radius: 12px;
  padding: 20px;
}

/* поисковая строка каталога */
.search {
  flex: 1;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--v2-white);
  border: 1px solid var(--v2-line-2);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
  color: var(--v2-ink-3);
  font-size: 14px;
}

.search svg {
  flex-shrink: 0;
}

/* ── Хлебные крошки ──────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--v2-ink-3);
  padding: 18px 0;
}

.v2 .crumbs a, .crumbs a {
  color: var(--v2-ink-3);
}

.v2 .crumbs a:hover, .crumbs a:hover {
  color: var(--v2-green-ink);
}

.crumbs i {
  font-style: normal;
  color: var(--v2-line-2);
}

.crumbs b {
  font-weight: 500;
  color: var(--v2-ink-2);
}

/* ── Проза ───────────────────────────────────────────────── */
.prose {
  max-width: var(--v2-measure);
  font-size: var(--v2-prose-size);
  line-height: var(--v2-prose-lh);
  color: var(--v2-ink-2);
  text-wrap: pretty;
}

.prose > * {
  margin: 0;
}

.prose > * + * {
  margin-top: var(--v2-space-prose);
}

.prose h2 {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  font-size: var(--v2-h2);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--v2-ink);
  margin-top: var(--v2-space-h2);
}

.prose h3 {
  font: 600 var(--v2-h3)/1.3 "Inter", sans-serif;
  color: var(--v2-ink);
  margin-top: var(--v2-space-h3);
  letter-spacing: -0.01em;
}

.prose h4 {
  font: 600 var(--v2-h4)/1.4 "Inter", sans-serif;
  color: var(--v2-ink);
  margin-top: 24px;
}

.prose ul, .prose ol {
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.prose li::marker {
  color: var(--v2-green-ink);
}

.prose strong {
  color: var(--v2-ink);
  font-weight: 600;
}

.prose figure {
  margin-top: 30px;
}

.prose figcaption {
  font-size: var(--v2-caption);
  line-height: 1.5;
  color: var(--v2-ink-3);
  padding-top: 10px;
  border-top: 1px solid var(--v2-line);
  margin-top: 12px;
}

/* Контраст .shot: в мокапе (docs/design/mockups/styles/site-v2.css:100) текст
   заглушки скриншота набран --v2-ink-3 на --v2-canvas — 4,23:1, ниже порога
   4,5:1 для обычного текста (план 81.2-12, задача 3, критерий приёмки 6,
   npm run check:contrast). Точечная замена на --v2-ink-2 (8,71:1) — та же
   построчная логика, что и обязательная замена --v2-green под белым текстом
   в UI-SPEC §5: не слепой find-replace токена, а адресная правка одного
   применения, где готовый мокап давал недостаточный контраст. */
.shot {
  background: var(--v2-canvas);
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-ink-2);
  font-size: 12.5px;
  text-align: center;
  padding: 20px;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}

.prose th, .prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--v2-line);
  vertical-align: top;
}

.prose th {
  font: 600 12px/1.3 "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  border-bottom: 1px solid var(--v2-line-2);
}

.callout {
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.6;
  max-width: var(--v2-measure);
}

.callout--note {
  background: var(--v2-green-soft);
  border: 1px solid var(--v2-green-line);
}

.callout--warn {
  background: var(--v2-warn-soft);
  border: 1px solid var(--v2-warn-line);
}

.callout b {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--v2-ink);
  margin-bottom: 5px;
}

.prose .callout--warn b {
  color: var(--v2-warn-ink);
}

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--v2-ink-2);
  max-width: var(--v2-measure);
}

.anchor-list {
  display: grid;
  gap: 9px;
  font-size: 14.5px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: a;
}

.anchor-list li {
  counter-increment: a;
  display: flex;
  gap: 11px;
}

.anchor-list li::before {
  content: counter(a);
  font: 500 11px/1.6 "JetBrains Mono", monospace;
  color: var(--v2-ink-3);
  min-width: 16px;
}

/* оглавление и боковая навигация раздела */
.toc {
  position: -webkit-sticky;
  position: sticky;
  top: 24px;
  border-left: 2px solid var(--v2-line);
  padding-left: 16px;
  display: grid;
  gap: 9px;
}

.toc__t {
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  margin-bottom: 4px;
}

.v2 .toc a, .toc a {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--v2-ink-3);
}

.v2 .toc a.cur, .toc a.cur {
  color: var(--v2-ink);
  font-weight: 600;
  box-shadow: -18px 0 0 -16px var(--v2-green);
}

.sidenav {
  display: grid;
  gap: 22px;
  font-size: 14px;
}

.sidenav__g > div {
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  margin-bottom: 10px;
}

.v2 .sidenav__g a, .sidenav__g a {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--v2-ink-2);
  font-size: 14px;
}

.v2 .sidenav__g a:hover, .sidenav__g a:hover {
  background: var(--v2-canvas);
  text-decoration: none;
  color: var(--v2-ink);
}

.v2 .sidenav__g a.cur, .sidenav__g a.cur {
  background: var(--v2-green-soft);
  color: var(--v2-ink);
  font-weight: 600;
}

/* ── Карточки, списки, фильтры ───────────────────────────── */
.card {
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  padding: 22px;
}

a.card:hover {
  border-color: var(--v2-brand-line);
  box-shadow: 0 4px 16px rgba(104, 159, 56, 0.1);
  text-decoration: none;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Контраст .tag: в мокапе текст --v2-ink-3 на --v2-canvas — 4,23:1, ниже
   порога 4,5:1 обычного текста (тот же дефект, что у .shot выше, план
   81.2-12, задача 3, npm run check:contrast). Точечная замена на
   --v2-ink-2 (8,71:1). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--v2-canvas);
  color: var(--v2-ink-2);
}

.tag--brand {
  background: var(--v2-green-soft);
  color: #33691e;
  border: 1px solid var(--v2-green-line);
} /* 6,08:1 — прежний #6d9e3a на подложке давал 3,04:1 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--v2-line-2);
  background: var(--v2-white);
  font-size: 13.5px;
  color: var(--v2-ink-2);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--v2-ink-3);
}

.chip.on {
  background: var(--v2-green);
  border-color: var(--v2-green);
  color: var(--v2-ink);
  font-weight: 600;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pager {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 14px;
}

.v2 .pager a, .pager a, .pager span {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-line);
  border-radius: 9px;
  color: var(--v2-ink-2);
}

.v2 .pager .cur, .pager .cur {
  background: var(--v2-ink);
  border-color: var(--v2-ink);
  color: #fff;
  font-weight: 600;
}

/* ── Подвал ──────────────────────────────────────────────── */
.ftr {
  background: var(--v2-ink);
  color: #c9d2cc;
}

.v2 .ftr a, .ftr a {
  color: #c9d2cc;
}

.v2 .ftr a:hover, .ftr a:hover {
  color: var(--v2-green);
  text-decoration: none;
}

.ftr__in {
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  padding: 52px var(--v2-shell-pad) 26px;
}

.ftr__map {
  display: grid;
  grid-template-columns: 230px repeat(4, 1fr);
  gap: 34px;
}

.ftr__t {
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d8a83;
  margin-bottom: 14px;
}

.ftr__col {
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  align-content: start;
}

.ftr__col span.off, .ftr__col span {
  color: var(--v2-ink-3);
}

.ftr__slogan {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--v2-green);
  margin-top: 16px;
}

.ftr__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: #7d8a83;
  margin-top: 14px;
  max-width: 210px;
}

.v2 .store, .store {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #2c3733;
  border-radius: 10px;
  font-size: 13px;
  color: #c9d2cc;
}

.v2 .store:hover, .store:hover {
  border-color: var(--v2-green);
  color: var(--v2-green);
}

.ftr__legal {
  border-top: 1px solid #232e29;
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  color: #7d8a83;
}

/* ── Мобильная версия ────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --v2-shell-pad: 20px;
    --v2-h1: 38px;
    --v2-h2: 26px;
    --v2-h3: 19px;
    --v2-prose-size: 16.5px;
    --v2-measure: 100%;
  }
  .hdr__in {
    gap: 12px;
    padding: 12px 20px;
  }
  .nav, .hdr__act .btn--ghost, .logo__slogan {
    display: none;
  }
  .grid-3, .grid-2, .ftr__map, .mega__in {
    grid-template-columns: 1fr;
  }
  .ftr__map {
    gap: 26px;
  }
}
.burger {
  width: 44px;
  height: 44px;
  border: 1px solid var(--v2-line-2);
  border-radius: 10px;
  background: var(--v2-white);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.burger i {
  width: 16px;
  height: 1.6px;
  background: var(--v2-ink);
  display: block;
}

@media (max-width: 900px) {
  .burger {
    display: flex;
  }
}
.msheet {
  background: var(--v2-white);
  border-top: 1px solid var(--v2-line);
}

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

.msheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--v2-ink);
  min-height: 52px;
}

.msheet__sub {
  padding: 0 20px 14px;
  display: grid;
  gap: 2px;
}

.v2 .msheet__sub a, .msheet__sub a {
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--v2-canvas);
  font-size: 14.5px;
  color: var(--v2-ink-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mtoc {
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  background: var(--v2-white);
  overflow: hidden;
}

.mtoc__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font: 600 13px/1 "Inter", sans-serif;
  min-height: 48px;
}

.mfilter {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--v2-bg);
  border-bottom: 1px solid var(--v2-line);
  padding: 12px 20px;
  display: flex;
  gap: 9px;
  overflow: hidden;
}

/* ── Форма — ошибки валидации (D-28/D-30, токен --v2-err) ─
   .err-msg — flex-обёртка текста и иконки (site-demo.html, состояние 02:
   «текстом под полем и иконкой, не только цветом рамки»). Иконка общая
   разметка для обоих вариантов формы (план 81.2-16), но СКРЫТА для
   варианта «Для академий» — та страница уже прошла посекционную
   скриншот-сверку без иконки (план 81.2-09), менять принятый визуал вне
   объёма этого плана нельзя; текстовый контент и раскладка при этом
   идентичны (display:flex с одним видимым ребёнком не отличается от
   display:block визуально). */
.fld .has-error {
  border-color: var(--v2-err) !important;
}

.err-msg {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: var(--v2-err);
  margin-top: 6px;
}

.err-msg svg {
  flex-shrink: 0;
  margin-top: 1px;
}

#public-lead-form[data-variant=academies] .err-msg svg {
  display: none;
}

/* ── Форма запроса условий — общая для «Для академий» и будущей страницы
   демо (D-24, D-12/§9.3 UI-SPEC). Прячется позиционированием, НЕ
   display:none — боты, заполняющие видимые поля, должны попадаться. */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v2-ink-2);
  cursor: pointer;
}

.consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.consent a {
  color: var(--v2-green-ink);
}

/* ── Постраничные части ──────────────────────────────────── */
/* =============================================================
 * site-v2 — Главная (/)
 * Владелец: план 81.2-10 (Главная — 8 секций по site-home.html)
 * ============================================================= */
/* ── Классы каркаса секций (docs/design/mockups/site-home.html <style>,
   перенесены дословно) — .sec/.sec--soft задают альтернирующую подложку,
   .sq — квадрат-иконку карточек рабочих мест. Не переопределены другими
   страницами (grep по resources/assets/scss/site/ на .sec{ дал 0
   совпадений до этого плана) — конфликта каскада нет. */
.sec {
  padding: 72px 0;
}

.sec--soft {
  background: var(--v2-canvas);
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}

.sq {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--v2-green);
  flex-shrink: 0;
}

/* ── Заголовки .h2/.dsp Главной — СВОИ классы, не переиспользуют общий
   .h2 (объявлен в site/_academies.scss как 40px — секция 4 Главной
   ожидает 44px, секции 2/6 ожидают 38px, оба расходятся с общим
   значением). Общий .h2 остаётся собственностью тарифов/академий;
   Главная самодостаточна на обоих брейкпоинтах, чтобы не зависеть от
   порядка @import других файлов (design-mockup-fidelity, дословный
   перенос значений из site-home.html, а не подгонка под чужой класс). */
.h2-home-lg {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-size: 44px;
  line-height: 1.02;
  margin: 0;
}

.h2-home-sm {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-size: 38px;
  line-height: 1.02;
  margin: 0;
}

.h1-home-hero {
  font-size: 64px;
  line-height: 0.98;
  margin: 20px 0 18px;
}

.h2-home-diff {
  font-size: 52px;
  line-height: 1;
  margin: 14px 0 18px;
}

.h2-home-cta {
  font-size: 48px;
  line-height: 1;
  margin: 0 0 12px;
}

/* ── Слоты под скриншоты продукта (D-04) — резервируют заявленный
   макетом размер через aspect-ratio НЕЗАВИСИМО от наличия файла: слот
   не схлопывается при отсутствующей картинке (UI-SPEC E6 «пусто»), а
   при подключённом файле изображение заполняет тот же прямоугольник
   через object-fit — пропорции задаёт CSS, не сам файл. min-height —
   подстраховка для браузеров без поддержки aspect-ratio (тот же слот
   не проваливается в 0 высоты). */
.shot--hero, .shot--diff, .shot--app {
  /* Базовый .shot (site-v2.scss) — display:flex без flex-direction (row
     по умолчанию): подпись-заглушка состоит из двух span (label/desc),
     и без явного column они вставали бы в одну строку рядом, а не друг
     под другом, как в мокапе. */
  flex-direction: column;
  gap: 6px;
  /* width:100% + min-width:0 — без них грид-блоуаут: аспект-рэйшо
     вместе с min-height даёт intrinsic-ширину слота (min-height ×
     соотношение сторон), которая на узком вьюпорте больше доступной
     колонки грида (Rule 1, найдено скриншот-сверкой на 390 — слот
     распирал контейнер до 400px при доступных ~350px, вызывая
     горизонтальный скролл страницы). */
  width: 100%;
  min-width: 0;
}

.shot--hero {
  aspect-ratio: 1200/780;
  min-height: 260px;
  height: auto;
  border-radius: 18px;
  padding: 24px;
}

.shot--diff {
  aspect-ratio: 620/380;
  min-height: 170px;
  height: auto;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  padding: 20px;
}

.shot--app {
  aspect-ratio: 380/330;
  min-height: 200px;
  height: auto;
  border-radius: 18px;
  padding: 24px;
}

.shot--hero img, .shot--diff img, .shot--app img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
}

.shot__label {
  display: block;
  font-weight: 600;
}

.shot__desc {
  display: block;
  margin-top: 2px;
}

/* ── Сеточные обёртки секций — класс вместо инлайн grid-template-columns
   (тот же приём планов 81.2-07/08/09), чтобы одна media-точка ≤900px
   схлопывала все секции Главной разом. */
.grid-home-hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
}

.grid-home-problem {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.problem-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-ink-2);
}

.problem-facts > div {
  display: flex;
  gap: 12px;
}

.problem-facts > div > span {
  width: 3px;
  background: var(--v2-brand-line);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Секция 4 — заголовок + кнопка «Все возможности по ролям» + карточки.
   Разметка в DOM-порядке мобильного кадра (кнопка ПОСЛЕ карточек, во всю
   ширину); на десктопе flex + order поднимает кнопку в строку заголовка
   справа, как на кадре 1440 мокапа — без дублирования разметки под два
   вьюпорта (тот же приём, что план 81.2-08 применил к .cta-final). */
.roles-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
}

.roles-title {
  max-width: 620px;
  order: 1;
}

.roles-cta {
  background: var(--v2-white);
  order: 2;
  margin-left: auto;
}

.grid-home-roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  flex-basis: 100%;
  order: 3;
  margin-top: 30px;
}

.role-card .sq {
  margin-bottom: 14px;
}

.grid-home-apps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: center;
}

.grid-home-tarify {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}

.tarify-rows {
  display: grid;
  gap: 0;
  font-size: 16.5px;
  color: var(--v2-ink-2);
}

.tarify-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--v2-line-2);
}

.tarify-rows > div:last-child {
  border-bottom: 0;
}

.grid-home-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 22px;
}

/* Мобильная версия — тот же брейкпоинт, что у общего каркаса (site-v2.scss) */
@media (max-width: 900px) {
  .h2-home-lg, .h2-home-sm {
    font-size: 30px;
  }
  .h1-home-hero {
    font-size: 40px;
    line-height: 1;
    margin: 16px 0 14px;
  }
  .h2-home-diff {
    font-size: 34px;
    line-height: 1.04;
    margin: 12px 0 14px;
  }
  .h2-home-cta {
    font-size: 34px;
    line-height: 1.02;
    margin: 0 0 10px;
  }
  .grid-home-hero,
  .grid-home-problem,
  .grid-home-roles,
  .grid-home-apps,
  .grid-home-tarify,
  .grid-home-trust,
  .problem-facts {
    grid-template-columns: 1fr;
  }
  .grid-home-trust {
    gap: 16px;
  }
  .role-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
  }
  .role-card .sq {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    margin-bottom: 0;
  }
  .roles-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .roles-title {
    max-width: none;
  }
  .grid-home-roles {
    order: 2;
    margin-top: 18px;
    gap: 12px;
  }
  .roles-cta {
    order: 3;
    width: 100%;
    margin: 14px 0 0;
  }
  .grid-home-tarify .btn {
    width: 100%;
    margin-top: 4px;
  }
}
/* =============================================================
 * site-v2 — Тарифы (/pricing)
 * Владелец: план 81.2-01 (hero) → план 81.2-07 (остальные секции)
 * Source: docs/design/mockups/site-pricing.html — блок <style>, часть hero
 * ============================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--v2-green-soft);
  border: 1px solid var(--v2-green-line);
  font: 600 11.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-green-ink);
}

/* Карточки тарифов (задача 1, план 81.2-07) */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

.plan {
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

.plan[data-on="1"] {
  border-color: var(--v2-brand-line);
  box-shadow: 0 0 0 2px var(--v2-green-soft), 0 8px 28px rgba(104, 159, 56, 0.12);
}

.plan__n {
  font: 600 12px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
}

.plan__lim {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--v2-ink);
}

.plan__lim span {
  display: block;
  font: 400 12.5px/1.4 "Inter", sans-serif;
  color: var(--v2-ink-3);
  padding-top: 5px;
}

.plan__p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.plan__p b {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  color: var(--v2-ink);
}

.plan__p s {
  font-size: 15px;
  color: var(--v2-ink-3);
}

.plan__p i {
  font-style: normal;
  font-size: 13px;
  color: var(--v2-ink-3);
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v2-ink-2);
}

.plan li {
  display: flex;
  gap: 9px;
}

.plan li em {
  font-style: normal;
  color: var(--v2-green-ink);
  font-weight: 700;
  flex-shrink: 0;
}

.plan li.off {
  color: var(--v2-ink-3);
}

.plan li.off em {
  color: var(--v2-line-2);
}

.plan .btn {
  margin-top: auto;
  width: 100%;
}

/* Контраст .mnote: используется в т.ч. внутри секций с фоном --v2-canvas
   (D-03) — --v2-ink-3 там даёт 4,23:1, ниже порога 4,5:1 (план 81.2-12,
   задача 3, npm run check:contrast). */
.mnote {
  font-size: 12.5px;
  color: var(--v2-ink-2);
  line-height: 1.5;
}

/* Тумблер периода оплаты (задача 2, план 81.2-07) */
.tog {
  display: inline-flex;
  padding: 4px;
  background: var(--v2-canvas);
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  gap: 4px;
}

.tog button {
  font: 600 13.5px/1 "Inter", sans-serif;
  font-family: inherit;
  border: 0;
  background: none;
  color: var(--v2-ink-2);
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tog button[aria-pressed=true] {
  background: var(--v2-white);
  color: var(--v2-ink);
  box-shadow: 0 1px 3px rgba(14, 20, 17, 0.08);
}

.tog .save {
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  color: var(--v2-green-ink);
  background: var(--v2-green-soft);
  border: 1px solid var(--v2-green-line);
  border-radius: 999px;
  padding: 4px 7px;
}

/* Подсказка «какой тариф мой» (задача 3, план 81.2-07) */
.picker {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--v2-white);
  border: 1px solid var(--v2-line-2);
  border-radius: 14px;
  padding: 14px 18px;
}

.picker label {
  font-size: 14.5px;
  color: var(--v2-ink-2);
}

.picker input {
  width: 110px;
  height: 44px;
  border: 1px solid var(--v2-line-2);
  border-radius: 10px;
  padding: 0 14px;
  font: 600 16px/1 "Inter", sans-serif;
  font-family: inherit;
  color: var(--v2-ink);
  background: var(--v2-bg);
}

.picker input:focus {
  outline: 2px solid var(--v2-green-ink);
  outline-offset: 1px;
  border-color: var(--v2-green-ink);
}

.picker .out {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--v2-ink-2);
}

.picker .out b {
  color: var(--v2-ink);
}

/* «О бесплатном тарифе» (задача 1, план 81.2-08) — двухколоночная сетка 1440-кадра
   мокапа с фиксированной боковой колонкой 420px. На 390 у мокапа отдельная одноколоночная
   разметка кадра; здесь та же единая responsive-разметка, что план 81.2-07 применил
   к карточкам тарифов — одна свёрстанная сетка, схлопывается в колонку по брейкпоинту
   каркаса. Без этого правила фиксированные 420px на 390px viewport ломали перенос строк
   (обнаружено скриншот-сверкой, Rule 1). */
.freetier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: start;
}

/* Таблица возможностей и сравнение с конкурентами (задача 1, план 81.2-08).
   .ftab-wrap — overflow-x: auto: на 390 прокручивается таблица внутри своего
   контейнера, а не вся страница (UI-SPEC §8.2/E10 и E14 «переполнение контейнера»). */
.ftab-wrap {
  overflow-x: auto;
}

.ftab {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.ftab th, .ftab td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--v2-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.ftab thead th {
  font: 600 12px/1.3 "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  border-bottom: 1px solid var(--v2-line-2);
}

.ftab td:not(:first-child), .ftab th:not(:first-child) {
  text-align: center;
  width: 150px;
}

.ftab tr.grp td {
  background: var(--v2-canvas);
  font: 600 12px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-2);
  padding: 11px 14px;
}

.yes {
  color: var(--v2-green-ink);
  font-weight: 700;
}

/* Контраст .no: мокап держит --v2-line-2 (#c8c5b9) — 1,73:1 на белом/1,53:1
   на --v2-canvas, глубоко ниже порога для смыслонесущего глифа «✕» в
   таблице возможностей (план 81.2-12, задача 3, критерий приёмки 6,
   npm run check:contrast). Заменён на --v2-ink-2 (визуально приглушённый,
   но читаемый; остаётся различим от --v2-green-ink «✓»). */
.no {
  color: var(--v2-ink-2);
}

/* Сравнение с конкурентами — колонка «Здесь» на подложке Brand Soft.
   #1f2937 не совпадает ни с одним объявленным токеном --v2-* — оставлен литералом
   по прецеденту плана 81.2-07 (замена только на совпадающий токен, не слепая замена). */
.cmp td:first-child {
  font-weight: 600;
  color: var(--v2-ink);
}

.cmp .our {
  background: var(--v2-green-soft);
  font-weight: 600;
  color: #1f2937;
}

/* Финальный призыв .cta-final (задача 2, план 81.2-08) — на 1440 текст и кнопки
   в один ряд (48px gap из мокапа); фиксированный gap без переноса ломался на 390
   (обнаружено скриншот-сверкой, Rule 1) — на ≤900px колонка, кнопки друг под другом. */
.cta-final {
  display: flex;
  align-items: center;
  gap: 48px;
}

.cta-final__btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* Вопросы и ответы .faq (задача 2, план 81.2-08) */
.faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.faq details {
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  padding: 18px 22px;
}

.faq summary {
  font: 600 17px/1.4 "Inter", sans-serif;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  color: var(--v2-ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--v2-green-ink);
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--v2-ink-2);
  max-width: 70ch;
}

/* Мобильная версия — тот же брейкпоинт, что у общего каркаса (site-v2.scss) */
@media (max-width: 900px) {
  .plans {
    grid-template-columns: 1fr;
  }
  .tog {
    width: 100%;
  }
  .tog button {
    flex: 1;
    justify-content: center;
  }
  .picker {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .picker input {
    width: 100%;
  }
  .freetier {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cta-final {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    text-align: center;
  }
  .cta-final__btns {
    flex-direction: column;
  }
}
/* =============================================================
 * site-v2 — Для академий (/academies)
 * Владелец: план 81.2-09 (10 секций по site-academies.html)
 * Классы перенесены из блока <style> docs/design/mockups/site-academies.html
 * дословно (design-mockup-fidelity, шаг 2). .pill и .mnote уже объявлены
 * в site/_pricing.scss (общие для продающего шаблона, §6 UI-SPEC) —
 * не дублируются здесь.
 * ============================================================= */
.h2 {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-size: 40px;
  line-height: 1.02;
  margin: 0;
}

/* Секция «Интеграции» — заголовок короче на десктопе по мокапу (36px вместо
   базовых 40px), на мобильном сходится с остальными .h2-секциями. */
.h2--sm {
  font-size: 36px;
}

/* Заголовки .dsp этой страницы различаются размером по секциям в обоих
   опорных вьюпортах (1440/390) — мокап задаёт их инлайн-стилем на каждом
   из двух статичных кадров отдельно. Значения ниже перенесены дословно из
   обоих кадров и сведены в классы с точкой перелома ≤900px, чтобы держать
   ОДНУ responsive-разметку вместо дублирования под два вьюпорта (тот же
   принцип, что план 81.2-07 применил к карточкам тарифов). */
.dsp--hero {
  font-size: 60px;
  line-height: 0.99;
  margin: 20px 0 18px;
}

.dsp--lg {
  font-size: 48px;
  line-height: 1;
  margin: 14px 0 16px;
}

.dsp--md {
  font-size: 44px;
  line-height: 1.02;
  margin: 14px 0 16px;
}

.dsp--form {
  font-size: 40px;
  line-height: 1.02;
  margin: 0 0 12px;
}

.lede-ac {
  font-size: 18.5px;
  line-height: 1.58;
  color: var(--v2-ink-2);
  margin: 0;
}

/* Вопросы читателя в hero (.qlist) */
.qlist {
  display: grid;
  gap: 0;
  counter-reset: q;
  max-width: 640px;
}

.qlist div {
  counter-increment: q;
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--v2-line);
  font-size: 16px;
  line-height: 1.5;
  color: var(--v2-ink-2);
}

.qlist div::before {
  content: counter(q);
  font: 500 11px/1.7 "JetBrains Mono", monospace;
  color: var(--v2-ink-3);
  min-width: 14px;
}

/* Три числа SLA (секция «Ответственность») */
.sla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sla__n {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 0.95;
  color: var(--v2-ink);
}

/* Поля формы запроса условий (§9 UI-SPEC) */
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.f-row > * {
  min-width: 0;
}

/* Строка «Активных игроков / Команд / Филиалов» — три поля (мокап задаёт
   grid-template-columns:1fr 1fr 1fr инлайн-стилем на этой конкретной
   строке; вынесено в модификатор-класс, а не инлайн-стиль, чтобы медиа-
   запрос ниже мог перекрыть три колонки одной на ≤900 — инлайн-стиль
   специфичность медиа-правила перебить не даёт). */
.f-row--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fld label {
  font: 500 13px/1.3 "Inter", sans-serif;
  color: var(--v2-ink-2);
}

.fld label i {
  font-style: normal;
  color: var(--v2-green-ink);
}

.fld input, .fld select, .fld textarea {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 1px solid var(--v2-line-2);
  border-radius: 10px;
  background: var(--v2-white);
  padding: 0 14px;
  font: 400 15px/1 "Inter", sans-serif;
  font-family: inherit;
  color: var(--v2-ink);
}

.fld textarea {
  height: 86px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: 2px solid var(--v2-green-ink);
  outline-offset: 1px;
  border-color: var(--v2-green-ink);
}

/* Схема замены модели оценки (E13 UI-SPEC): две карточки .crit + стрелка .arrow */
.crit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.crit div {
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--v2-ink-2);
}

.crit div b {
  display: block;
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  margin-bottom: 6px;
}

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  color: var(--v2-brand-line);
  transition: transform 0.2s ease;
}

/* Обёртка схемы «Базовая модель → Модель академии» — класс добавлен поверх
   буквального мокапа (там это инлайн grid-template-columns:1fr 60px 1fr на
   div-обёртке без класса), чтобы задать точку перелома на ≤900px без
   дублирования разметки под два вьюпорта (тот же принцип, что план 81.2-07
   применил к карточкам тарифов). */
.model-scheme {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 20px;
  margin-top: 34px;
  align-items: center;
}

/* Сеточные обёртки остальных секций — тот же приём (класс вместо инлайн-
   стиля), чтобы одна media-точка ≤900px схлопывала все секции разом. */
.grid-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.grid-scaut {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.integration-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.integration-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-ink-2);
}

.terms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 52px;
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

/* Заглушка скриншота фиксированного размера в углу карточки «Своя
   методика» (мокап задаёт 360×210 инлайн-стилем) — вынесена в класс,
   чтобы медиа-запрос мог ограничить ширину на узких вьюпортах и не
   создавать горизонтальный скролл страницы. */
.shot--corner {
  width: 360px;
  height: 210px;
  flex-shrink: 0;
}

/* Мобильная версия — тот же брейкпоинт, что у общего каркаса (site-v2.scss) */
@media (max-width: 900px) {
  .model-scheme {
    grid-template-columns: 1fr;
  }
  .arrow {
    transform: rotate(90deg);
  }
  .sla {
    grid-template-columns: 1fr;
  }
  .crit {
    grid-template-columns: 1fr;
  }
  .f-row {
    grid-template-columns: 1fr;
  }
  .grid-hero, .grid-scaut, .grid-4, .integration-grid, .integration-list, .terms-grid, .form-grid {
    grid-template-columns: 1fr;
  }
  .shot--corner {
    width: 100%;
    max-width: 360px;
  }
  .h2, .h2--sm {
    font-size: 30px;
  }
  .dsp--hero {
    font-size: 38px;
    line-height: 1.02;
    margin: 14px 0 12px;
  }
  .dsp--lg {
    font-size: 34px;
    line-height: 1.03;
    margin: 12px 0 12px;
  }
  .dsp--md {
    font-size: 32px;
    line-height: 1.04;
    margin: 12px 0 12px;
  }
  .dsp--form {
    font-size: 32px;
    line-height: 1.04;
    margin: 0 0 10px;
  }
  .lede-ac {
    font-size: 16px;
    line-height: 1.6;
  }
}
/* =============================================================
 * site-v2 — Возможности (7 страниц ролей/модулей + демо)
 * Владелец: контрольная точка ожидания макетов (D-02), волна после паузы
 * ============================================================= */
/* ── Три страницы ролей (план 81.2-14): тренеру, родителю, директору.
   Классы ниже перенесены дословно из общего блока <style>, повторяющегося
   во всех трёх макетах ролей (design-mockup-fidelity, шаг 2), и объявлены
   ОДИН раз здесь — страницы используют одни и те же классы, дублирования
   трижды нет (план 81.2-14, задача 2). .pill уже объявлен в
   site/_pricing.scss (общий для продающего шаблона, §6 UI-SPEC), .cta-final
   /.cta-final__btns — там же (план 81.2-08) и .grid-scaut (двухколоночная
   пара «текст + скриншот», 1fr 1fr, gap 52px, схлопывается в 1fr на
   ≤900px) — в site/_academies.scss: значения байт-в-байт совпадают с
   мокапами ролей, повторно не объявляются. */
/* .h2 секций ролей — 38px в мокапе, расходится с общим .h2 (40px,
   site/_academies.scss) — тот же принцип самодостаточности заголовков,
   что уже применён Главной (.h2-home-*) и «Для академий» (.h2--sm):
   страница не зависит от порядка @import других файлов site/*.scss. */
.h2-feat {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-size: 38px;
  line-height: 1.03;
  margin: 0;
}

/* Дисплейные заголовки hero и финального CTA — значения дословно из
   инлайн-стилей обоих опорных кадров (1440/390) каждого макета роли. */
.dsp-feat--hero {
  font-size: 58px;
  line-height: 1;
  margin: 20px 0 18px;
}

.dsp-feat--cta {
  font-size: 42px;
  line-height: 1.02;
  margin: 0 0 12px;
}

@media (max-width: 900px) {
  .h2-feat {
    font-size: 29px;
  }
  .dsp-feat--hero {
    font-size: 37px;
    line-height: 1.02;
    margin: 14px 0 12px;
  }
  .dsp-feat--cta {
    font-size: 31px;
    line-height: 1.04;
    margin: 0 0 10px;
  }
}
/* Список с левой чертой бренда — переиспользуется во всех парах
   «текст + скриншот» на трёх страницах ролей. */
.blist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-ink-2);
}

.blist li {
  display: block;
  padding-left: 15px;
  border-left: 3px solid var(--v2-brand-line);
}

.blist b {
  color: var(--v2-ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .blist {
    font-size: 15.5px;
  }
}
/* Строка-упоминание «Ещё в кабинете…» — на страницах тренера и родителя;
   у директора её нет (решение самого мокапа: у него уже четыре полноценные
   секции, добавлять пятую строку было бы шумом). */
.oneline {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--v2-ink-2);
}

.oneline i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v2-green);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .oneline {
    font-size: 15px;
  }
}
/* Слоты под скриншоты продукта (D-04) — тот же проверенный контракт, что
   у Главной (план 81.2-10, .shot--hero/.shot--diff в site/_home.scss):
   aspect-ratio + min-height держат заявленный размер независимо от
   наличия файла, width:100%+min-width:0 не дают intrinsic-ширине слота
   распереть грид-колонку на узких вьюпортах (Rule 1, найдено скриншот-
   сверкой Главной). Объявлены СВОИМИ классами, не переиспользуют
   .shot--hero/.shot--diff Главной — та же самодостаточность страницы, что
   и у заголовков выше. .shot__label/.shot__desc (подпись-заглушка) уже
   объявлены в site/_home.scss и переиспользуются как есть — это просто
   стиль текста подписи, не размерная константа страницы. */
.shot--feat-hero, .shot--feat-diff {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.shot--feat-hero {
  aspect-ratio: 1200/780;
  min-height: 260px;
  height: auto;
  border-radius: 18px;
  padding: 24px;
}

.shot--feat-diff {
  aspect-ratio: 620/380;
  min-height: 170px;
  height: auto;
  border-radius: 16px;
  padding: 20px;
}

.shot--feat-hero img, .shot--feat-diff img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ── Четыре страницы модулей (план 81.2-15): матч-день, посещаемость и
   расписание, взносы и оплаты, карточки развития. Классы ниже перенесены
   из общего блока <style>, повторяющегося во всех четырёх макетах, тем же
   приёмом, что и .h2-feat/.blist/.oneline/.shot--feat-* выше. */
/* Карточки состава модели развития (4 блока × число критериев) — на hero
   страницы «Карточки развития». СВОЙ класс .crit-feat, не .crit из
   site/_academies.scss: та раскладка — 2 колонки, простой текст в строку,
   без <span>/<em>; мокап этой страницы даёт 4 колонки (2 на ≤900px) с
   отдельно стилизованным числом (Oswald 26px) и подписью — совпадение
   имени класса дало бы конфликт правил между двумя разными страницами,
   собранными в один бандл site-v2.css. */
.crit-feat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.crit-feat div {
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  padding: 14px;
}

.crit-feat b {
  display: block;
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  margin-bottom: 7px;
}

.crit-feat span {
  font-family: "Oswald", "PT Sans Narrow", sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--v2-ink);
}

.crit-feat em {
  font-style: normal;
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--v2-ink-2);
  padding-top: 6px;
}

@media (max-width: 900px) {
  .crit-feat {
    grid-template-columns: 1fr 1fr;
  }
}
/* =============================================================
 * site-v2 — Запрос демо (/demo)
 * Владелец: план 81.2-16 (docs/design/mockups/site-demo.html)
 * Классы перенесены дословно из блока <style> мокапа
 * (design-mockup-fidelity, шаг 2). .pill/.mnote/.card/.eyebrow/.dsp уже
 * объявлены в site-v2.scss/site/_pricing.scss — не дублируются здесь.
 * .f-row/.fld/.hp/.consent (форма) — в site/_academies.scss, компонент
 * club::public-lead-form общий для обеих страниц (план 81.2-09/16).
 * ============================================================= */
/* Hero: текст + карточка формы фиксированной ширины 620px (мокап задаёт
   grid-template-columns:minmax(0,1fr) 620px инлайн-стилем) — своя сетка,
   не .grid-hero «Для академий» (там 1.05fr .95fr, другая пропорция). */
.grid-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 620px;
  gap: 64px;
  align-items: start;
}

/* Заголовок hero — 56px на 1440, 36px на 390 (оба значения дословно из
   инлайн-стилей опорных кадров мокапа). Собственный класс, не .dsp--hero
   «Для академий» (там 60px/38px — другая страница, другие числа). */
.dsp--demo-hero {
  font-size: 56px;
  line-height: 1;
  margin: 20px 0 18px;
}

/* Три шага «что произойдёт на встрече» — нумерованный список с зелёными
   плашками-цифрами вместо маркеров (мокап: counter-reset/counter-increment
   на <li>, не обычный <ol> с браузерными числами). */
.steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: s;
}

.steps li {
  counter-increment: s;
  display: flex;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-ink-2);
}

.steps li::before {
  content: counter(s);
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--v2-green-soft);
  border: 1px solid var(--v2-green-line);
  color: var(--v2-green-ink);
  font: 600 12px/24px "JetBrains Mono", monospace;
  text-align: center;
}

@media (max-width: 900px) {
  .grid-demo {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .dsp--demo-hero {
    font-size: 36px;
    line-height: 1.02;
    margin: 14px 0 12px;
  }
}