/*
 * Базовые примитивы и сквозные компоненты дизайн-системы Easy Peasy School.
 * Грузится ГЛОБАЛЬНО на каждой странице (после tokens.css, до посекционных).
 * Содержит: :root-алиасы, типографику/секции, кнопки, формы, бейджи/чипы,
 * карточки-основу, шапку/подвал, hero-примитивы, cta-баннер, общий финальный CTA,
 * FAQ-аккордеон и другие компоненты, используемые на нескольких страницах.
 * НЕ дописывать сюда стили одной страницы — см. assets/css/pages/*.css.
 *
 * @package easy-peasy
 */
/*
 * Компоненты и секции дизайн-системы Easy Peasy School (Фаза 1).
 *
 * Источник истины по визуалу — прототипы темы (home.html / ui-kit.html, автор: designer).
 * Здесь — перенос их стилей в реальную тему. Цвета/типографика/спейсинг/радиусы/тени
 * НЕ хардкодятся: ниже алиас-слой коротких имён (--primary, --surface, --r-md, ...),
 * который ссылается на единый источник токенов — assets/css/tokens.css + theme.json
 * (переменные --eps-*). Тёмная тема переключается автоматически: под [data-theme="dark"]
 * меняются --eps-*, а алиасы тянут их по ссылке. Точечные дарк-твики компонентов
 * оставлены инлайн там, где это часть самого компонента.
 */

:root {
	/* --- Алиасы цветов → tokens.css (--eps-color-*) --- */
	--primary: var(--eps-color-primary);
	--primary-hover: var(--eps-color-primary-hover);
	--primary-active: var(--eps-color-primary-active);
	--btn-primary-bg: var(--eps-btn-primary-bg);
	--btn-primary-bg-hover: var(--eps-btn-primary-bg-hover);
	--btn-primary-bg-active: var(--eps-btn-primary-bg-active);
	--accent-strong: var(--eps-accent-strong);
	--ink: var(--eps-color-ink);
	--muted: var(--eps-color-muted);
	--blue: var(--eps-color-blue);
	--violet: var(--eps-color-violet);
	--amber: var(--eps-color-amber);
	--green: var(--eps-color-green);
	--teal: var(--eps-color-teal);
	--red: var(--eps-color-red);
	--paper: var(--eps-color-paper);
	--surface-soft: var(--eps-color-surface-soft);
	--surface-blue: var(--eps-color-surface-blue);
	--surface-violet: var(--eps-color-surface-violet);
	--surface-amber: var(--eps-color-surface-amber);
	--line: var(--eps-color-line);

	/* доступный текст цветных бейджей и чипов; переключается вместе с темой (WCAG AA) */
	--badge-green-text: var(--eps-badge-green-text);
	--badge-teal-text: var(--eps-badge-teal-text);
	--badge-blue-text: var(--eps-badge-blue-text);
	--badge-violet-text: var(--eps-badge-violet-text);
	--badge-amber-text: var(--eps-badge-amber-text);
	--badge-coral-text: var(--eps-badge-coral-text);

	/* семантические алиасы поверхностей/текста */
	--bg: var(--eps-color-background);
	--surface: var(--eps-color-paper);
	--surface-2: var(--eps-color-surface-soft);
	--text: var(--eps-color-ink);
	--text-muted: var(--eps-color-muted);
	--on-primary: var(--eps-on-primary);

	/* --- Радиусы → tokens.css (--eps-radius-*) --- */
	--r-sm: var(--eps-radius-sm);
	--r-md: var(--eps-radius-md);
	--r-lg: var(--eps-radius-lg);
	--r-xl: var(--eps-radius-xl);
	--r-pill: var(--eps-radius-pill);

	/* --- Тени / кольцо / градиент → tokens.css (--eps-shadow-*, --eps-ring, ...) --- */
	--sh-sm: var(--eps-shadow-sm);
	--sh-md: var(--eps-shadow-md);
	--sh-lg: var(--eps-shadow-lg);
	--sh-brand: var(--eps-shadow-brand);
	--sh-brand-strong: var(--eps-shadow-brand-strong);
	--ring: var(--eps-ring);
	--grad-brand: var(--eps-grad-brand);
	--brand-soft-glow: var(--eps-brand-soft-glow);

	/* --- Отступы → tokens.css (--eps-space-*) --- */
	--s-1: var(--eps-space-20);
	--s-2: var(--eps-space-30);
	--s-3: var(--eps-space-35);
	--s-4: var(--eps-space-40);
	--s-6: var(--eps-space-50);
	--s-10: var(--eps-space-60);
	--s-16: var(--eps-space-70);
	--s-24: var(--eps-space-80);

	/* --- Layout → tokens.css --- */
	--content: var(--eps-content);
	--wide: var(--eps-wide);
	--bleed: var(--eps-bleed);

	/* --- Шрифты → tokens.css (--eps-font-*) --- */
	--font-head: var(--eps-font-heading);
	--font-body: var(--eps-font-body);

	/* --- Баннер согласия на cookie (Complianz; блок в конце файла) --- */
	--cc-gap: 24px;      /* отступ карточки от края экрана */
	--cc-card-w: 420px;  /* ширина карточки на двухколоночном десктопе */
	--cc-bar-h: 176px;   /* высота верхней полосы == резерв body{padding-top} */

	/* --- Размеры шрифта → tokens.css (--eps-fs-*) --- */
	--fs-display: var(--eps-fs-display);
	--fs-h1: var(--eps-fs-h1);
	--fs-h2: var(--eps-fs-h2);
	--fs-h3: var(--eps-fs-h3);
	--fs-body-lg: var(--eps-fs-body-lg);
	--fs-body: var(--eps-fs-body);
	--fs-small: var(--eps-fs-small);
}

/* ---------- БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top — чтобы sticky-шапка не прятала цель прокрутки: и якорной
   (#anchor), и программной (element.focus(), scrollIntoView). Величина считается
   из ФАКТИЧЕСКОЙ высоты липкой обёртки шапки: --eps-header-h ставит app-core.js
   по замеру (ResizeObserver), потому что высота разная по ширинам (до 768px —
   только брендовая строка, выше — плюс утилитарная) и меняется при прокрутке.
   Значения ниже — фолбэк без JS, и он точный: без JS шапка не ужимается вовсе,
   поэтому её липкая высота так и остаётся 73px / 115px.
   --eps-scroll-gap — «воздух» между низом шапки и целью: без него цель липнет
   к кромке шапки и читается как обрезанная. */
:root{--eps-header-h:73px;--eps-scroll-gap:16px}
@media(min-width:768px){:root{--eps-header-h:115px}}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--eps-header-h) + var(--eps-scroll-gap))}
body{
  max-width:100%; overflow-x:hidden;
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:400;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--text); line-height:1.12; margin:0; letter-spacing:-.01em; font-weight:700}
p{margin:0}
a{color:var(--blue); text-decoration:none}
img{max-width:100%; display:block}
svg{display:block}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}

/* ---------- LAYOUT ---------- */
/* Гасим авто-отступ WP block-gap (theme.json blockGap = spacing-40 = 16px),
   который WP вешает на прямых детей .wp-site-blocks и flow/constrained-групп.
   На лендингах вертикальный ритм задаётся padding-block самих секций/hero,
   поэтому эти margin создают паразитные швы: под шапкой, над футером и между
   секциями. Правило :where(...) от WP имеет нулевую специфичность — классовые
   селекторы ниже перебивают его без !important. Generic-шаблоны (page/single/
   archive) НЕ используют .hero/.section, их blockGap для абзацев сохраняется. */
.wp-site-blocks > *{margin-block-start:0; margin-block-end:0}
.hero,.section{margin-block:0}
/* Контейнер контента расширен до ширины хрома (--bleed=1536), чтобы левый/правый
   край контента совпадал с шапкой/подвалом. Горизонтальный паддинг — единый с
   шапкой/утилити-баром/подвалом: clamp(16px,4vw,40px). Читаемость длинной прозы
   защищается ch-мерами на самих текстовых блоках (лиды/описания ~48–68ch), а не
   сужением контейнера. --wide (1320) остаётся для generic wideSize в theme.json. */
.wrap{max-width:var(--bleed); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.section{padding-block:clamp(48px,7vw,88px)}
.section--alt{background:var(--surface-2)}
.section--tight{padding-block:clamp(36px,5vw,60px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.78rem;
  /* бренд-коралл «как лого» вместо фиолетового; --accent-strong = AA для мелкого
     uppercase-текста на светлых фонах (#c9343a: на белом 5.20:1, на surface-soft
     4.89:1) и авто-ярче в тёмной теме (#ff6b70 на тёмном ~5.9:1) */
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong);
}
.sec-head{display:flex; align-items:flex-end; gap:18px; margin-bottom:36px; flex-wrap:wrap}
.sec-num{
  font-family:var(--font-head); font-weight:800; font-size:.8rem; letter-spacing:.12em;
  color:var(--on-primary); background:var(--primary); padding:7px 14px; border-radius:var(--r-pill);
  box-shadow:var(--sh-brand); flex:none;
}
.sec-title{font-size:var(--fs-h2); font-weight:800; overflow-wrap:break-word; hyphens:auto}
.sec-desc{color:var(--text-muted); max-width:60ch; font-size:var(--fs-body); overflow-wrap:break-word}
.sec-head-text{display:flex; flex-direction:column; gap:8px}
.sec-head--center{justify-content:center; text-align:center; flex-direction:column; align-items:center}
.sec-head--center .sec-head-text{align-items:center}
/* В flex-column c align-items:center текстовые дети берут max-content-ширину и переполняют
   контейнер вместо переноса — ограничиваем шириной родителя (фикс горизонтального оверфлоу). */
.sec-head--center > *{max-width:100%}
.sec-head--center .sec-desc{max-width:min(100%,60ch)}
.sec-head--split{justify-content:space-between; align-items:flex-end}
.sec-head--split .sec-cta{flex:none}

.grid{display:grid; gap:var(--s-6)}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn{
  --btn-pad-y:12px; --btn-pad-x:22px; --btn-fs:1rem;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:var(--btn-fs);
  line-height:1.1; padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer;
  min-height:48px; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:20px; height:20px; flex:none}
.btn-sm{--btn-pad-y:8px; --btn-pad-x:16px; --btn-fs:.875rem; min-height:40px}
.btn-sm svg{width:17px;height:17px}
.btn-lg{--btn-pad-y:16px; --btn-pad-x:30px; --btn-fs:1.0625rem; min-height:56px}
.btn-lg svg{width:22px;height:22px}
.btn-primary{background:var(--btn-primary-bg); color:var(--on-primary); box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--btn-primary-bg-hover); transform:translateY(-2px); box-shadow:var(--sh-brand-strong)}
.btn-primary:active{background:var(--btn-primary-bg-active); transform:translateY(0)}
.btn-primary:focus-visible{box-shadow:var(--ring),var(--sh-brand)}
.btn-secondary{background:var(--surface); color:var(--text); border-color:var(--line); box-shadow:var(--sh-sm)}
.btn-secondary:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-2px); box-shadow:var(--sh-md)}
.btn-secondary:active{transform:translateY(0); background:var(--surface-soft)}
/* Явное фокус-кольцо: собственный box-shadow (--sh-sm) перебивал бы глобальный
   :focus-visible, поэтому дублируем кольцо вместе с тенью (как у .btn-primary). */
.btn-secondary:focus-visible{box-shadow:var(--ring),var(--sh-sm)}
.btn-ghost{background:transparent; color:var(--text); border-color:transparent}
.btn-ghost:hover{background:var(--surface-soft); color:var(--primary)}
.btn-ghost:active{background:var(--line)}
.btn[disabled],.btn.is-disabled{opacity:.45; cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none; filter:grayscale(.15)}
.btn-icon{width:48px; height:48px; min-height:48px; padding:0; border-radius:var(--r-md)}
.btn-icon.btn-sm{width:40px;height:40px;min-height:40px}

/* мессенджеры */
.btn-msg{width:46px;height:46px;min-height:46px;padding:0;border-radius:var(--r-md);border:none;color:#fff;box-shadow:var(--sh-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease, box-shadow .18s ease}
.btn-msg:hover{transform:translateY(-3px) scale(1.04); box-shadow:var(--sh-md)}
.btn-msg svg{width:22px;height:22px}
.msg-tg{background:#2AABEE}
.msg-wa{background:#25D366}
.msg-vb{background:#7360F2}
.msg-fb{background:#0866FF}

/* on-color (на градиентном фоне) */
.btn-on-color{background:#fff; color:var(--primary); box-shadow:0 12px 28px rgba(0,0,0,.18)}
.btn-on-color:hover{background:#fff; transform:translateY(-2px); box-shadow:0 18px 34px rgba(0,0,0,.24); color:var(--primary-active)}
.btn-ghost-color{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost-color:hover{background:rgba(255,255,255,.24)}

/* ============================================================
   ФОРМЫ
   ============================================================ */
.field{display:flex; flex-direction:column; gap:7px}
.field-label{font-weight:600; font-size:.9rem; color:var(--text)}
.field-label .req{color:var(--primary); margin-left:3px}
.field-help{font-size:.8rem; color:var(--text-muted)}
.input,.textarea,.select{
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-md);
  padding:13px 16px; min-height:50px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--text-muted); opacity:.75}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--blue); box-shadow:var(--ring)}
.select-wrap{position:relative}
.select{appearance:none; padding-right:46px; cursor:pointer}
.select-wrap::after{content:""; position:absolute; right:18px; top:50%; width:11px; height:11px; margin-top:-7px; border-right:2.5px solid var(--text-muted); border-bottom:2.5px solid var(--text-muted); transform:rotate(45deg); pointer-events:none}
.check{display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:.95rem; line-height:1.45}
.check input{position:absolute; opacity:0; width:0; height:0}
.check .box{flex:none; width:24px; height:24px; border:2px solid var(--line); background:var(--surface); transition:all .16s ease; margin-top:1px; display:grid; place-items:center; border-radius:7px}
.check input:checked + .box{background:var(--primary); border-color:var(--primary)}
.check .box svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.5);transition:all .16s ease}
.check input:checked + .box svg{opacity:1;transform:scale(1)}
.check input:focus-visible + .box{box-shadow:var(--ring)}
.phone-group{display:flex;gap:10px}
.phone-code{flex:none;width:96px}

/* лид-карточка */
.lead-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(24px,4vw,38px); box-shadow:var(--sh-lg); position:relative; overflow:hidden;
  /* как grid/flex-элемент карточка должна ужиматься ниже min-content своей формы,
     иначе строка телефона даёт горизонтальный скролл на 360px (см. .hero-grid) */
  min-width:0;
}
.lead-card::before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft-glow),transparent 70%)}
.lead-head{position:relative}
.lead-card .lead-title{font-size:var(--fs-h3);font-weight:800;margin-bottom:6px}
.lead-card .lead-sub{color:var(--text-muted);margin-bottom:22px;font-size:.95rem}
.lead-grid{display:flex;flex-direction:column;gap:15px;position:relative}

/* ============================================================
   БЕЙДЖИ / ЧИПЫ
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:var(--r-pill);line-height:1.2}
.badge svg{width:14px;height:14px}
.badge-green{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--badge-green-text)}
.badge-amber{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--badge-amber-text)}
.badge-gray{background:var(--surface-2);color:var(--text-muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;padding:7px 14px;border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line);color:var(--text);transition:all .16s ease;cursor:default}
/* Метки CEFR. ТЕКСТ — только через --badge-*-text (правка 16.08.2026, дефект D-2):
   бренд-цвета --green/--teal/--blue/--violet/--amber на своей же тинт-подложке дают
   2.7–4.1:1, а метка идёт кеглем 12–17px весом 700–800, т.е. это normal text и порог
   4.5:1. Токены переключаются вместе с темой, поэтому точечные [data-theme="dark"]
   оверрайды больше не нужны — не возвращать их и не хардкодить hex здесь. */
.chip-level{font-family:var(--font-head);font-weight:700;letter-spacing:.02em}
.chip-a1{background:color-mix(in srgb,var(--green) 14%,transparent);border-color:transparent;color:var(--badge-green-text)}
.chip-a2{background:color-mix(in srgb,var(--teal) 16%,transparent);border-color:transparent;color:var(--badge-teal-text)}
.chip-b1{background:var(--surface-blue);border-color:transparent;color:var(--badge-blue-text)}
.chip-b2{background:var(--surface-violet);border-color:transparent;color:var(--badge-violet-text)}
.chip-c1{background:color-mix(in srgb,var(--amber) 20%,transparent);border-color:transparent;color:var(--badge-amber-text)}

/* языковая метка-пилюля с флагом */
.lang-tag{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.76rem;
  padding:5px 11px 5px 6px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
}
.lang-tag .flag{width:20px;height:15px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover}
.online-chip{
  display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.74rem;
  color:var(--badge-green-text);background:color-mix(in srgb,var(--green) 14%,transparent);
  border-radius:var(--r-pill);padding:5px 11px;
}
.online-chip svg{width:13px;height:13px;flex:none}

/* ============================================================
   КАРТОЧКИ (общие)
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}

/* преподаватель */
.card-teacher{padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:#fff;margin-bottom:8px}
.av-1{background:linear-gradient(135deg,#FF5A5F,#FF8A5B)}
.av-2{background:linear-gradient(135deg,#7C5CFC,#A593FF)}
.av-3{background:linear-gradient(135deg,#2563EB,#43C6E8)}
.av-4{background:linear-gradient(135deg,#16A34A,#4ADE80)}
.teacher-name{font-size:1.1rem;font-weight:800}
.teacher-spec{color:var(--text-muted);font-size:.88rem}
.teacher-langs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:6px 0 2px}
.lang-flag{font-size:.74rem;font-weight:700;padding:4px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-muted)}
.teacher-exp{font-size:.84rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}
.teacher-exp svg{width:15px;height:15px;color:var(--amber)}

/* отзыв */
.card-review{padding:24px;display:flex;flex-direction:column;gap:14px}
.review-top{display:flex;align-items:center;gap:12px}
.review-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;color:#fff;font-size:1.05rem;flex:none}
.review-who{display:flex;flex-direction:column;gap:2px}
.review-name{font-weight:700;font-size:.96rem}
.review-date{font-size:.78rem;color:var(--text-muted)}
.stars{display:inline-flex;gap:2px;color:var(--amber)}
.stars svg{width:18px;height:18px}
.review-text{font-size:.94rem;line-height:1.6;color:var(--text)}
.review-src{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--text-muted);padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.review-src svg{width:18px;height:18px}

/* сегмент аудитории */
.card-seg{padding:26px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.seg-icon{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;color:#fff}
.seg-icon svg{width:28px;height:28px}
.seg-title{font-size:1.2rem;font-weight:800}
.seg-desc{color:var(--text-muted);font-size:.92rem;line-height:1.5;flex:1}
.seg-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--primary);font-size:.9rem}
.seg-link svg{width:18px;height:18px;transition:transform .2s ease}
.card-seg:hover .seg-link svg{transform:translateX(4px)}

/* фича */
.card-feature{padding:24px;display:flex;flex-direction:column;gap:12px}
.feat-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.feat-icon svg{width:26px;height:26px}
.feat-title{font-size:1.1rem;font-weight:800}
.feat-text{color:var(--text-muted);font-size:.9rem;line-height:1.55}

/* ============================================================
   ШАПКА — UTILITY-BAR + ОСНОВНАЯ
   ============================================================ */
/* Шапка липкая. Sticky вешаем на template-part-обёртку шапки (её containing block
   — весь .wp-site-blocks, поэтому шапка держится всю страницу; на самом .site-shell
   или .site-header sticky «отлипал» бы — их containing block высотой всего в шапку).
   :has(> .site-shell) бьёт только по шапочному part (в подвале .site-footer, не shell).
   При скролле утилитарная строка (.utility-bar) схлопывается, брендовая строка
   (.site-header) остаётся прижата к верху. z-index ниже мобильного оверлея (100). */
.wp-block-template-part:has(> .site-shell){position:sticky;top:0;z-index:50}
.site-shell{position:relative}
.utility-bar{display:none;
  align-items:center;gap:16px;flex-wrap:nowrap;min-width:0;
  background:var(--ink);color:#fff;
  padding:0;min-height:42px;font-size:.84rem;
  max-height:48px;overflow:hidden;transition:max-height .25s ease,opacity .22s ease;
}
[data-theme="dark"] .utility-bar{background:#0E0C20}
@media(min-width:768px){.utility-bar{display:flex}}
/* При скролле утилитарная строка «уезжает» (схлопывается), брендовая строка шапки
   остаётся прижатой к верху. На мобильных строки и так нет (display:none). */
.eps-scrolled .utility-bar{max-height:0;min-height:0;opacity:0;pointer-events:none}
/* reduced-motion: без схлопывания (иначе мгновенный скачок) — строка остаётся. */
@media(prefers-reduced-motion:reduce){.eps-scrolled .utility-bar{max-height:48px;min-height:42px;opacity:1;pointer-events:auto}}
/* Единая box-модель контейнеров: капнутый inner (--bleed) с ВНУТРЕННИМ паддингом,
   как у .wrap и .footer-top. Паддинг на самом inner (а не на full-bleed родителе),
   иначе на широких экранах край хрома = (vw-1536)/2, а край контента = +паддинг —
   рассинхрон 40px. Так логотип шапки, контент и подвал совпадают на ЛЮБОЙ ширине. */
/* Отступы бара — компактные по умолчанию, полные с 1280px (mobile-first): до
   1280px место в строке дефицитно, см. блок приоритетов ниже. */
.ub-inner{display:flex;align-items:center;gap:12px;width:100%;max-width:var(--bleed);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.ub-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
@media(min-width:1280px){
  .ub-inner{gap:16px}
  .ub-left{gap:18px}
}
.ub-right{display:flex;align-items:center;gap:14px;flex:none}
.ub-item{display:inline-flex;align-items:center;gap:7px;color:#fff;white-space:nowrap;min-height:42px;font-weight:600}
.ub-item svg{width:16px;height:16px;flex:none;color:#fff;opacity:.9}
a.ub-item{transition:color .16s ease}
a.ub-item:hover{color:var(--amber)}
a.ub-item:hover svg{color:var(--amber);opacity:1}
.ub-phone{font-family:var(--font-head);font-weight:700;font-size:.9rem;letter-spacing:.01em}
.ub-muted{color:#B7B2D6;font-weight:500}
.ub-muted svg{color:#B7B2D6;opacity:.85}
.ub-rating{display:inline-flex;align-items:center;gap:6px;color:#fff;white-space:nowrap}
.ub-rating .stars-mini{display:inline-flex;gap:1px;color:var(--amber)}
.ub-rating .stars-mini svg{width:13px;height:13px;opacity:1}
.ub-rating b{font-weight:700}
.ub-sep{width:1px;height:18px;background:rgba(255,255,255,.18);flex:none}
.ub-msgs{display:inline-flex;align-items:center;gap:4px}
.ub-msg{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:#fff;transition:transform .16s ease,background .16s ease;position:relative}
.ub-msg::after{content:"";position:absolute;inset:-4px}
.ub-msg svg{width:18px;height:18px;color:#fff;opacity:1}
.ub-msg:hover{transform:translateY(-1px)}
.ub-msg.is-tg{background:#2AABEE}
.ub-msg.is-wa{background:#25D366}
.ub-msg.is-vb{background:#7360F2}
.ub-msg:focus-visible{box-shadow:var(--ring)}
.ub-callback{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;white-space:nowrap;min-height:42px;border-bottom:1.5px solid transparent;transition:border-color .16s ease,color .16s ease}
.ub-callback svg{width:16px;height:16px;color:var(--amber)}
.ub-callback:hover{color:var(--amber);border-color:var(--amber)}
.ub-callback:focus-visible{box-shadow:var(--ring);border-radius:4px}
/* Строка доверия («Гарантия результата · бесплатный пробный урок») — уникальное
   соцдоказательство шапки, поэтому на десктопных ширинах её не прячем, а ужимаем:
   кегль плавно съезжает 13.44px → 12px (ниже 12px не опускаемся; максимум
   достигается уже на ~1264px, так что на 1280 нет скачка). */
.ub-trust{font-size:clamp(.75rem,.54rem + .38vw,.84rem)}
/* Приоритет элементов бара — по вкладу в конверсию: телефон > строка доверия >
   мессенджеры и обратный звонок > часы работы. Часы — единственное, что
   продублировано в подвале и на странице контактов, поэтому до 1280px именно они
   уступают место строке доверия (иначе на 1024 строка наезжала на мессенджеры:
   137px нахлёста в ru, 155px в uk). Разделитель уходит вместе с часами — иначе
   после телефона встали бы два разделителя подряд. */
@media(max-width:1279.98px){
  .ub-hours,.ub-sep.ub-hours{display:none}
}
@media(min-width:768px) and (max-width:1023.98px){
  .ub-rating{display:none}
  /* Подпись «Обратный звонок» убираем визуально, но НЕ через display:none:
     иначе у ссылки-иконки не остаётся доступного имени (WCAG 2.4.4 / 4.1.2).
     Свойства — как у .sr-only. */
  .ub-callback .ub-cb-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* Ниже 900px в баре остаются только телефон и мессенджеры: у .ub-item стоит
   white-space:nowrap, а высота бара 42–48px — переносить строку доверия некуда,
   и даже ужатой ей не хватает ~50px (uk-перевод длиннее ru). Уходит вместе с
   разделителем после телефона. С 900px и выше строка видна всегда. */
@media(max-width:899.98px){
  .ub-trust,.ub-sep.ub-hide-md{display:none}
}

.site-header{display:flex;align-items:center;gap:16px;padding:12px 0;background:var(--surface);min-width:0;border-bottom:1px solid var(--line);transition:padding .22s ease,box-shadow .24s ease,border-color .2s ease}
/* Компактное состояние при скролле (класс на <html> из app-core.js): чуть меньше
   вертикальный паддинг + тень/сплошной фон для читаемости над контентом. Переход —
   плавный; смещение контента компенсируется анимацией (без резкого «прыжка»). */
.eps-scrolled .site-header{padding:7px 0;box-shadow:var(--sh-md);border-bottom-color:transparent}
/* reduced-motion: без ужатия (сохраняем полный паддинг, чтобы не было мгновенного
   скачка контента); остаётся только статичная тень для читаемости. */
@media(prefers-reduced-motion:reduce){.eps-scrolled .site-header{padding:12px 0}}
.header-inner{display:flex;align-items:center;gap:16px;width:100%;max-width:var(--bleed);margin-inline:auto;min-width:0;padding-inline:clamp(16px,4vw,40px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--text);flex:none}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--primary);display:grid;place-items:center;color:#fff;box-shadow:var(--sh-brand);font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.56rem;letter-spacing:.085em;text-transform:uppercase;white-space:nowrap;color:var(--text-muted);margin-top:1px}
.main-nav{display:none;gap:2px;margin-left:14px;margin-right:auto}
.main-nav a{padding:8px 11px;border-radius:var(--r-pill);font-weight:600;font-size:.9rem;color:var(--text);transition:background .16s ease,color .16s ease;white-space:nowrap}
.main-nav a:hover{background:var(--surface-soft);color:var(--accent-strong)}
.main-nav a.is-current{color:var(--accent-strong);background:var(--surface-soft)}
@media(min-width:1180px){.main-nav{display:flex}}
/* на тесных десктопах прячем второстепенные пункты, чтобы шапка влезала без overflow */
@media(min-width:1180px) and (max-width:1399.98px){.main-nav a.nav-opt{display:none}.main-nav a{padding:8px 9px;font-size:.86rem}}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
@media(min-width:1180px){.header-actions{margin-left:0}}
@media(min-width:1360px){.header-actions{gap:10px}}
.site-header .header-actions > .btn-primary{flex:none;padding:11px 18px;display:none}
@media(min-width:600px){.site-header .header-actions > .btn-primary{display:inline-flex}}
@media(min-width:1360px){.site-header .header-actions > .btn-primary{padding:12px 20px}}
/* Вторичный CTA «Онлайн-тест» (ghost/outline) слева от primary. Скрыт на самых
   узких — там доступен в бургер-меню; primary остаётся главным на всех ширинах.
   С 768px помещается в строку рядом с primary; на ≥1180 (бургер скрыт) обязателен
   в баре как единственная точка входа к тесту. */
.site-header .header-actions > .btn-secondary{flex:none;padding:11px 16px;display:none}
@media(min-width:768px){.site-header .header-actions > .btn-secondary{display:inline-flex}}
@media(min-width:1360px){.site-header .header-actions > .btn-secondary{padding:12px 18px}}
/* Тесный десктоп-тир (nav в строке, но бургера ещё нет): два переключателя +
   два CTA + меню не помещаются на всю ширину → компактный режим, чтобы primary
   CTA не подрезался. Переключатели без микроподписи (иконка + значение + каретка),
   отступы кнопок и меню слегка ужаты. С ≥1400px возвращается полная типографика. */
@media(min-width:1180px) and (max-width:1399.98px){
  .site-header .header-actions{gap:6px}
  .site-header .header-actions .sw-micro{display:none}
  .site-header .header-actions .sw-meta{justify-content:center}
  .site-header .header-actions .sw-btn{padding:7px 9px;gap:6px}
  .site-header .header-actions .sw-btn .sw-ico{width:17px;height:17px}
  .site-header .header-actions .sw-caret{width:12px;height:12px}
  .site-header .header-actions > .btn-secondary{padding:10px 12px;font-size:.86rem}
  .site-header .header-actions > .btn-primary{padding:10px 14px;font-size:.86rem}
  .main-nav{margin-left:6px;gap:0}
  .main-nav a{padding:8px 7px}
}

/* переключатели */
.switcher{position:relative}
.sw-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:6px 11px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease;min-height:44px;font-family:var(--font-body)}
.sw-btn:hover{border-color:var(--primary)}
.sw-btn .sw-ico{width:18px;height:18px;color:var(--text-muted);flex:none}
.sw-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.08;text-align:left}
.sw-micro{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.sw-val{font-weight:700;font-size:.9rem;color:var(--text)}
.sw-caret{width:14px;height:14px;color:var(--text-muted);transition:transform .2s ease}
.switcher.is-open .sw-caret{transform:rotate(180deg)}
.sw-locale{display:none}
@media(min-width:980px){.sw-locale{display:block}}
.sw-locale .sw-ico{color:var(--blue)}
.sw-locale .sw-val{font-size:.82rem}
.sw-flag{width:22px;height:16px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.sw-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:8px;min-width:220px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.switcher.is-open .sw-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sw-menu.sw-menu-narrow{min-width:150px}
.sw-menu-title{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px 6px}
.sw-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:var(--r-sm);border:none;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:.92rem;font-weight:600;color:var(--text);text-align:left;transition:background .14s ease}
.sw-item:hover{background:var(--surface-soft)}
.sw-item.is-active{background:var(--surface-soft);color:var(--accent-strong)}
.sw-item .sw-check{margin-left:auto;color:var(--primary);width:18px;height:18px;flex:none}
.sw-item.is-active .sw-check{color:var(--accent-strong)}
.sw-item .sw-check[hidden]{visibility:hidden}

/* Пункт основного меню с выпадающим подменю (языки обучения) — навигация, не
   настройка. Триггер оформлен как пункт .main-nav; подменю переиспользует .sw-menu
   (карточка + анимация показа по .switcher.is-open), но выравнивается по левому краю. */
.main-nav-dd{display:inline-flex;position:relative}
.main-nav-dd-toggle{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border:none;background:transparent;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--text);white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease}
.main-nav-dd-toggle:hover,.main-nav-dd.is-open .main-nav-dd-toggle{background:var(--surface-soft);color:var(--accent-strong)}
.nav-dd-caret{width:14px;height:14px;color:var(--text-muted);transition:transform .2s ease;flex:none}
.main-nav-dd.is-open .nav-dd-caret{transform:rotate(180deg)}
.sw-menu.nav-dd-menu{left:0;right:auto}
@media(min-width:1180px) and (max-width:1399.98px){.main-nav-dd-toggle{padding:8px 9px;font-size:.86rem}}

.burger{width:48px;height:48px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--text);flex:none}
.burger svg{width:24px;height:24px}
@media(min-width:1180px){.burger{display:none}}

/* мобильное меню (оффканвас) */
.mobile-overlay{position:fixed;inset:0;z-index:100;background:rgba(20,18,43,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;display:flex;justify-content:flex-end;overflow:hidden}
.mobile-overlay.is-open{opacity:1;visibility:visible}
.mobile-nav{width:360px;max-width:90vw;height:100%;background:var(--surface);box-shadow:var(--sh-lg);overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.mobile-overlay.is-open .mobile-nav{transform:translateX(0)}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.mnav-close{width:42px;height:42px;border-radius:50%;border:none;background:var(--surface-2);display:grid;place-items:center;cursor:pointer;color:var(--text)}
.mnav-close svg{width:22px;height:22px}
.mnav-body{padding:18px 20px;display:flex;flex-direction:column;gap:20px}
.mnav-links{display:flex;flex-direction:column;gap:2px}
.mnav-links a{padding:13px 14px;border-radius:var(--r-md);font-weight:600;color:var(--text);font-size:1rem}
.mnav-links a.is-current{background:var(--surface-soft);color:var(--accent-strong)}
/* Раскрывающийся пункт «Языки обучения» в мобильном меню (native <details>). */
.mnav-dd>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px;border-radius:var(--r-md);font-weight:600;font-size:1rem;color:var(--text);cursor:pointer;list-style:none}
.mnav-dd>summary::-webkit-details-marker{display:none}
.mnav-dd[open]>summary{color:var(--accent-strong)}
.mnav-dd[open]>summary .nav-dd-caret{transform:rotate(180deg)}
/* Явный контроль показа: display на прямом потомке <details> переопределяет
   UA-скрытие закрытого details, поэтому свёрнутое состояние задаём сами. */
.mnav-dd-list{display:none;flex-direction:column;gap:2px;padding:2px 0 2px 12px}
.mnav-dd[open] .mnav-dd-list{display:flex}
.mnav-block-title{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.seg-toggle{display:flex;background:var(--surface-2);border-radius:var(--r-pill);padding:4px;gap:4px}
.seg-toggle button,.seg-toggle a{flex:1;border:none;background:transparent;padding:9px;border-radius:var(--r-pill);font-weight:700;font-size:.88rem;color:var(--text-muted);text-decoration:none;text-align:center;cursor:pointer;font-family:var(--font-body)}
.seg-toggle button.is-active,.seg-toggle a.is-active{background:var(--surface);color:var(--accent-strong);box-shadow:var(--sh-sm)}
/* Пара CTA (primary + ghost) в мобильном меню — уплотняем, чтобы читались как группа. */
.mnav-body .btn-primary.btn-lg + .btn-secondary.btn-lg{margin-top:-10px}
.mnav-msgs{display:flex;gap:9px}

/* ============================================================
   HERO ГЛАВНОЙ
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(36px,6vw,72px)}
.hero::before{content:"";position:absolute;top:-180px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft-glow),transparent 68%);pointer-events:none;z-index:0}
.hero::after{content:"";position:absolute;bottom:-160px;left:-100px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--violet) 18%,transparent),transparent 70%);pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,56px);align-items:center}
/* grid-элементы по умолчанию имеют min-width:auto (= min-content), из-за чего
   узкие лид-формы (строка телефона «+48» + номер) не сжимались ниже ~357px и
   давали горизонтальный скролл на 360px. Разрешаем трекам ужиматься. */
.hero-grid>*{min-width:0}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hero-pill{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.hero-pill svg{width:15px;height:15px;flex:none}
.hero-pill .flag{width:18px;height:13px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.hero-pill.is-online{color:var(--green)}
.hero-pill.is-online svg{color:var(--green)}
.hero h1{font-size:clamp(1.85rem, 1.0rem + 4.4vw, 4.25rem);font-weight:800;max-width:18ch;letter-spacing:-.02em;overflow-wrap:normal;hyphens:manual}
.hero h1 .grad{background-image:linear-gradient(100deg,var(--primary),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{margin-top:20px;font-size:var(--fs-body-lg);color:var(--text-muted);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* на очень узких экранах кнопки hero — на всю ширину, без обрезки текста */
@media(max-width:419.98px){
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;white-space:normal;text-align:center}
}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.hero-trust-item{display:flex;align-items:center;gap:10px}
.hero-trust-num{font-family:var(--font-head);font-weight:800;font-size:1.45rem;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.hero-trust-lab{font-size:.78rem;color:var(--text-muted);line-height:1.25;max-width:14ch}
.hero-trust-sep{width:1px;height:34px;background:var(--line);flex:none}
.hero-trust-faces{display:flex}
.hero-trust-faces .face{width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);margin-left:-10px;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.72rem;color:#fff}
.hero-trust-faces .face:first-child{margin-left:0}

/* лид-карточка в hero — акцентная рамка-«купон» */
.hero-lead{position:relative}
.hero-lead .lead-card{border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.lead-ribbon{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);padding:6px 13px;border-radius:var(--r-pill);box-shadow:var(--sh-brand);margin-bottom:14px}
.lead-ribbon svg{width:15px;height:15px}
/* На самых узких экранах длинные локализации бейджа (напр. UK «Безкоштовно · 60 хвилин») переносились на 2 строки — поджимаем трекинг/отступы, чтобы держать одну строку. Короткие строки (ru) не затрагивает. */
@media (max-width:400px){.lead-ribbon{gap:6px;letter-spacing:.02em;padding-left:11px;padding-right:11px}}
.lead-foot-note{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-muted);justify-content:center;margin-top:2px}
.lead-foot-note svg{width:15px;height:15px;color:var(--green);flex:none}

/* ============================================================
   ЦИФРЫ ДОВЕРИЯ
   ============================================================ */
.stats-band{background:linear-gradient(120deg,var(--violet),#6E97FF);border-radius:var(--r-xl);padding:clamp(28px,5vw,52px);color:#fff;position:relative;overflow:hidden}
.stats-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.stats-grid{display:grid;gap:24px;position:relative}
@media(min-width:560px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat-num{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);line-height:1;letter-spacing:-.02em}
.stat-num .u{color:#FFE08A}
.stat-label{margin-top:8px;font-weight:600;font-size:.92rem;opacity:.92}
.logos-band{margin-top:32px}
.logos-cap{text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.logos{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.logo-chip{height:60px;min-width:140px;flex:1;max-width:190px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;color:var(--muted);letter-spacing:.04em;filter:grayscale(1);opacity:.8;transition:opacity .2s ease,filter .2s ease}
.logo-chip:hover{filter:grayscale(0);opacity:1}

/* ============================================================
   СЕГМЕНТАЦИЯ АУДИТОРИЙ
   ============================================================ */
.seg-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:600px){.seg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.seg-grid{grid-template-columns:repeat(3,1fr)}}
/* акцентная карточка легализации — занимает 2 колонки на десктопе */
.card-seg.is-feature{grid-column:1 / -1;background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--sh-brand)}
@media(min-width:980px){.card-seg.is-feature{grid-column:span 1}}
.card-seg.is-feature .seg-icon{background:rgba(255,255,255,.2)}
.card-seg.is-feature .seg-title{color:#fff}
.card-seg.is-feature .seg-desc{color:rgba(255,255,255,.92)}
.card-seg.is-feature .seg-link{color:#fff}
.card-seg.is-feature .seg-tag{position:absolute;top:18px;right:18px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.22);color:#fff;padding:5px 10px;border-radius:var(--r-pill)}

/* ============================================================
   КУРСЫ
   ============================================================ */
.courses-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:28px}
.courses-filter .cf-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:4px;flex:none}
.cf-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cf-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:600;font-size:.86rem;color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;min-height:42px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease,box-shadow .16s ease}
.cf-tab .cf-count{font-size:.74rem;font-weight:700;color:var(--text-muted);transition:color .16s ease}
.cf-tab:hover{border-color:var(--primary);color:var(--primary)}
.cf-tab:hover .cf-count{color:var(--primary)}
.cf-tab.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cf-tab.is-active .cf-count{color:var(--paper);opacity:.7}
[data-theme="dark"] .cf-tab.is-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
[data-theme="dark"] .cf-tab.is-active .cf-count{color:var(--on-primary)}
.cf-tab:focus-visible{box-shadow:var(--ring)}
.courses-foot{display:flex;justify-content:center;margin-top:32px}

/* ============================================================
   ЗАЧЕМ УЧИТЬ ПОЛЬСКИЙ (новый компонент)
   ============================================================ */
.why-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.why-card .why-num{font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.06em;color:var(--text-muted);opacity:.6}
.why-ico{width:54px;height:54px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:2px}
.why-ico svg{width:27px;height:27px}
.why-card h3{font-size:1.12rem;font-weight:800;line-height:1.25}
.why-card p{color:var(--text-muted);font-size:.92rem;line-height:1.55}
.why-i-coral{background:var(--surface-soft);color:var(--primary)}
.why-i-blue{background:var(--surface-blue);color:var(--blue)}
.why-i-violet{background:var(--surface-violet);color:var(--violet)}
.why-i-green{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
/* первая карточка — легализация, акцент */
.why-card.is-accent{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--sh-brand)}
.why-card.is-accent .why-num{color:rgba(255,255,255,.7);opacity:1}
.why-card.is-accent .why-ico{background:rgba(255,255,255,.2);color:#fff}
.why-card.is-accent h3{color:#fff}
.why-card.is-accent p{color:rgba(255,255,255,.92)}

/* ============================================================
   МЕТОДИКА (шаги + фичи)
   ============================================================ */
.method-grid{display:grid;gap:clamp(28px,4vw,48px);align-items:start}
@media(min-width:1024px){.method-grid{grid-template-columns:1fr 1fr}}
.cd-steps{display:flex;flex-direction:column;gap:0;counter-reset:step;list-style:none;margin:0;padding:0}
.cd-steps li{display:flex;gap:18px;padding-bottom:24px;position:relative}
.cd-steps li:last-child{padding-bottom:0}
.cd-steps li::before{counter-increment:step;content:counter(step);flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.05rem;background:var(--surface-soft);color:var(--primary);z-index:1}
.cd-steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:42px;bottom:6px;width:2px;background:linear-gradient(var(--line),transparent)}
.cd-step-body{display:flex;flex-direction:column;gap:4px;padding-top:6px}
.cd-step-body b{font-size:1.02rem;font-weight:800;color:var(--text)}
.cd-step-body span{font-size:.92rem;color:var(--text-muted);line-height:1.55}
.method-features{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:520px){.method-features{grid-template-columns:1fr 1fr}}
.cd-mcard{display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.cd-mcard .mc-ico{width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center}
.cd-mcard .mc-ico svg{width:22px;height:22px}
.cd-mcard b{font-size:1.02rem;font-weight:800}
.cd-mcard span{font-size:.9rem;color:var(--text-muted);line-height:1.55}
.mc-blue{background:var(--surface-blue);color:var(--blue)}
.mc-violet{background:var(--surface-violet);color:var(--violet)}
.mc-amber{background:var(--surface-amber);color:#C77F0A}
.mc-green{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
[data-theme="dark"] .mc-amber{color:var(--amber)}
.method-media{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(135deg,var(--surface-blue),var(--surface-violet));border:1px solid var(--line);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:20px;min-height:100%}
[data-theme="dark"] .method-media{background:linear-gradient(135deg,var(--surface-2),var(--surface-violet))}
.method-media-head{display:flex;align-items:center;gap:12px}
.method-play{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-brand);flex:none;border:none;cursor:pointer;transition:transform .18s ease}
.method-play:hover{transform:scale(1.06)}
.method-play svg{width:24px;height:24px;margin-left:3px}
.method-media-head b{font-family:var(--font-head);font-weight:800;font-size:1.05rem}
.method-media-head span{display:block;font-size:.84rem;color:var(--text-muted);font-family:var(--font-body);font-weight:600}

/* ============================================================
   ПРЕПОДАВАТЕЛИ
   ============================================================ */
.teachers-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:520px){.teachers-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.teachers-grid{grid-template-columns:repeat(4,1fr)}}
/* ============================================================
   CTA-БАННЕРЫ
   ============================================================ */
.cta-banner{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(32px,5vw,60px);background:var(--grad-brand);color:#fff;box-shadow:var(--sh-lg);display:grid;gap:28px;align-items:center}
@media(min-width:880px){.cta-banner{grid-template-columns:1.3fr .7fr}}
.cta-banner::before{content:"";position:absolute;bottom:-80px;left:-40px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12)}
.cta-banner::after{content:"";position:absolute;top:-60px;right:10%;width:140px;height:140px;border-radius:38px;background:rgba(255,255,255,.10);transform:rotate(18deg)}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{color:#fff;font-size:var(--fs-h1);font-weight:800;max-width:20ch}
.cta-banner p{font-size:var(--fs-body-lg);max-width:48ch;opacity:.95;margin-top:14px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.cta-side{display:flex;flex-direction:column;gap:14px}
.cta-side-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);padding:16px 18px}
.cta-side-item .csi-ico{width:42px;height:42px;border-radius:var(--r-md);background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.cta-side-item .csi-ico svg{width:22px;height:22px}
.cta-side-item b{display:block;font-family:var(--font-head);font-weight:700;font-size:1rem}
.cta-side-item span{font-size:.84rem;opacity:.9}

/* финальный CTA + лид-форма */
.final-grid{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
/* grid-элементы могут ужиматься ниже min-content лид-формы — иначе колонка с
   формой (строка телефона) даёт горизонтальный скролл на 360px (см. .hero-grid) */
.final-grid>*{min-width:0}
@media(min-width:980px){.final-grid{grid-template-columns:1fr 1fr}}
.final-points{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.final-point{display:flex;align-items:flex-start;gap:12px}
.final-point .fp-ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--surface-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.final-point .fp-ico svg{width:21px;height:21px}
.final-point b{display:block;font-weight:800;font-size:1rem;color:var(--text)}
.final-point span{font-size:.9rem;color:var(--text-muted);line-height:1.5}
.final-msgs{display:flex;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.final-msgs-label{font-size:.88rem;font-weight:600;color:var(--text-muted)}
.final-msgs .row{display:flex;gap:9px}

/* ============================================================
   FAQ (новый аккордеон)
   ============================================================ */
.faq-wrap{max-width:880px;margin-inline:auto}
.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.faq-item.is-open{border-color:color-mix(in srgb,var(--primary) 40%,var(--line));box-shadow:var(--sh-md)}
.faq-q{display:flex;align-items:center;gap:16px;width:100%;padding:20px clamp(18px,3vw,26px);background:transparent;border:none;cursor:pointer;font-family:var(--font-body);text-align:left;color:var(--text);transition:background .16s ease}
.faq-q:hover{background:var(--surface-soft)}
.faq-q:focus-visible{box-shadow:var(--ring);border-radius:var(--r-lg)}
.faq-q-text{font-weight:700;font-size:1.02rem;line-height:1.35;margin-right:auto}
.faq-icon{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--primary);display:grid;place-items:center;flex:none;transition:transform .25s ease,background .18s ease}
.faq-icon svg{width:18px;height:18px}
.faq-item.is-open .faq-icon{transform:rotate(45deg);background:var(--primary);color:var(--on-primary)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-a-inner p{padding:0 clamp(18px,3vw,26px) 22px;color:var(--text-muted);font-size:.95rem;line-height:1.65;max-width:68ch}
.faq-a-inner p a{font-weight:600}
.faq-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:30px;text-align:center}
.faq-cta p{color:var(--text-muted);font-size:.95rem}

/* ============================================================
   ФУТЕР
   ============================================================ */
.site-footer{background:#14122B;color:#CFCAE6}
.footer-top{padding:clamp(36px,5vw,60px) clamp(16px,4vw,40px);display:grid;gap:36px;max-width:var(--bleed);margin-inline:auto}
@media(min-width:760px){.footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-brand .brand{color:#fff}
.footer-brand .brand small{color:#8a84ad}
.footer-slogan{margin:16px 0 22px;color:#9a94bd;font-size:.94rem;line-height:1.6;max-width:34ch}
.footer-msgs{display:flex;gap:9px;margin-bottom:18px}
.fcol h4{color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-head);font-weight:700;margin-bottom:16px}
.fcol a{display:block;color:#b4afd0;padding:6px 0;font-size:.92rem;transition:color .16s ease}
.fcol a:hover{color:#fff}
.footer-sw{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.footer-sw .sw-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.footer-sw .sw-micro{color:#8a84ad}
.footer-sw .sw-val{color:#fff}
.footer-sw .sw-ico,.footer-sw .sw-caret{color:#b4afd0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-inner{padding:20px clamp(16px,4vw,40px);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.84rem;color:#8a84ad;max-width:var(--bleed);margin-inline:auto}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px}
.footer-legal a{color:#8a84ad}
.footer-legal a:hover{color:#fff}

/* плавающая кнопка темы (dark/light).
   Стоит в ЛЕВОМ нижнем углу: правый низ занят сторонним виджетом чата
   HelpCrunch (кнопка + разворачивающаяся вверх/влево панель), который мы не
   двигаем. Левый угол свободен на всех брейкпоинтах, поэтому пересечения нет
   ни с кнопкой чата, ни с открытой панелью. z-index держим ниже мобильного
   меню (100) и заведомо ниже виджета чата (у него сверх-высокий z-index).
   Инсеты через max(env(safe-area-inset-*)) — чтобы на устройствах с вырезами
   и жест-баром (в т.ч. в ландшафте) кнопка не липла к самому краю. */
.theme-fab{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:80;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-lg);transition:transform .18s ease,border-color .16s ease}
.theme-fab:hover{transform:translateY(-3px) rotate(-8deg);border-color:var(--primary)}
/* фокус-кольцо не должно «съедать» подъёмную тень (глобальный :focus-visible
   заменяет box-shadow) — дублируем кольцо вместе с sh-lg, как у кнопок */
.theme-fab:focus-visible{box-shadow:var(--ring),var(--sh-lg);border-color:var(--primary)}
.theme-fab svg{width:24px;height:24px}
/* НА ТЕЛЕФОНЕ ТУМБЛЕРА НЕТ (решение владельца 13.08.2026).
   После перестройки первого экрана языкового хаба кнопка отправки лид-формы
   поднялась в фолд — и оказалась ровно под этим FAB: на 360–390px он накрывал
   её левый край примерно на 40px, то есть клик в этот угол переключал тему
   вместо отправки заявки. Прежний комментарий выше («левый угол свободен на
   всех брейкпоинтах») перестал быть верным именно с этой правки.
   Почему скрыть, а не подвинуть: на 360px свободного угла больше нет — правый
   низ занят виджетом чата, левый теперь занят главным CTA. При этом потери
   функциональности нет: тема по умолчанию следует системной (prefers-color-scheme),
   а ручной выбор остаётся доступен с 600px и выше и переживает переход между
   устройствами через localStorage['eps-theme'].
   display:none, а не visibility/opacity: невидимая кнопка не должна оставаться
   в таб-порядке и в дереве доступности (WCAG 2.4.3). Обработчик в app-core.js
   защищён проверкой наличия элемента, JS от этого не ломается. */
@media(max-width:599.98px){.theme-fab{display:none}}
.theme-fab .ico-dark{display:none}
[data-theme="dark"] .theme-fab .ico-light{display:none}
[data-theme="dark"] .theme-fab .ico-dark{display:block}

/* Кнопка «Наверх» — вертикальный СТЕК над переключателем темы в ЛЕВОМ нижнем углу.
   Правый нижний угол занят сторонним виджетом чата HelpCrunch (кнопка + панель,
   разворачивается вверх/влево) — его не двигаем, поэтому оба наших FAB держим слева
   с зазором. Отступ снизу = инсет + высота .theme-fab (52) + зазор (12) = +64px, так
   кнопки никогда не пересекаются. z-index ниже мобильного оверлея (100) и заведомо
   ниже виджета чата; над контентом. Инсеты через max(env(...)) — как у .theme-fab.
   Базово скрыта (opacity/visibility/pointer-events) — показывается классом .is-visible
   из app-core.js; без JS не мешает (скрыта и некликабельна).
   КОГДА ИМЕННО ВИДНА. С 19.08.2026 условие двойное: пройдено 1.4 экрана И
   прокрутка идёт ВВЕРХ. Причина — кнопка накрывала текст: на телефоне свободного
   угла нет, строки начинаются в 16px от края, а кнопка занимает 18..70px (замер
   на 390x844, /english/: под кнопкой P.seg-desc). Пока читают — то есть листают
   вниз — кнопки на экране нет; пошли вверх, значит собрались возвращаться, —
   появляется. Разбор и пороги — в app-core.js, у обработчика прокрутки. */
.to-top{position:fixed;left:max(18px,env(safe-area-inset-left));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + 64px);
  z-index:80;width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);color:var(--text);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.92);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,border-color .16s ease}
.to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.to-top:hover{transform:translateY(-3px);border-color:var(--primary)}
.to-top:focus-visible{box-shadow:var(--ring),var(--sh-lg);border-color:var(--primary)}
.to-top svg{width:24px;height:24px}
/* Ниже 600px тумблера темы под кнопкой уже нет (см. .theme-fab), поэтому стек
   схлопывается: «Наверх» занимает нижнюю позицию, а не висит на 64px выше
   с пустотой под собой. Правило стоит ПОСЛЕ базового .to-top намеренно —
   специфичность у них одинаковая, побеждает порядок. */
@media(max-width:599.98px){
  .to-top{bottom:max(18px,env(safe-area-inset-bottom))}
}

/* появление секций при скролле — прогрессивное улучшение:
   базово контент ВИДЕН (важно без JS и для full-page скриншотов);
   эффект «прячем-показываем» включается только когда JS активен (html.js) */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ============================================================
   ФАЗА 2 — MONEY-PAGE ЛЕГАЛИЗАЦИЯ + эталонные блоки главной
   Новые компоненты на тех же токенах/алиасах, что и Фаза 1.
   ============================================================ */

/* ---------- Хлебные крошки ---------- */
.crumbs{padding-block:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px 8px;margin:0;padding:0;font-size:.84rem}
.crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.crumbs a{color:var(--text-muted);font-weight:600;transition:color .16s ease}
.crumbs a:hover{color:var(--primary)}
.crumbs .crumb-sep{width:14px;height:14px;color:var(--text-muted);opacity:.55;flex:none}
.crumbs [aria-current="page"]{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}

/* ---------- Hero: честные опорные точки + измеримое обещание + «80% речи» ---------- */
.hero-promise{display:flex;gap:11px;align-items:center;margin-top:20px;padding:13px 17px;border-radius:var(--r-md);background:var(--surface-blue);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);font-weight:700;font-size:.92rem;line-height:1.4;color:var(--text);max-width:46ch}
.hero-promise svg{width:22px;height:22px;color:var(--blue);flex:none}
.hero-promise .hp-fine{display:block;font-weight:600;font-size:.78rem;color:var(--text-muted);margin-top:2px}
.hero-speech{display:flex;gap:11px;align-items:flex-start;margin-top:14px;font-size:.96rem;line-height:1.5;color:var(--text);max-width:48ch}
.hero-speech svg{width:21px;height:21px;color:var(--primary);flex:none;margin-top:1px}
.hero-speech b{font-weight:800}
.hero-assure{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.hero-assure-item{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;color:var(--text)}
.hero-assure-item svg{width:18px;height:18px;color:var(--green);flex:none}

/* ---------- Полоса опорных точек (замена фейковых цифр) ---------- */
.assure-grid{display:grid;gap:22px 24px;position:relative}
@media(min-width:560px){.assure-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.assure-grid{grid-template-columns:repeat(4,1fr)}}
.assure-cell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.assure-ico{width:56px;height:56px;border-radius:var(--r-md);background:rgba(255,255,255,.18);display:grid;place-items:center;color:#fff}
.assure-ico svg{width:28px;height:28px}
.assure-cell b{font-family:var(--font-head);font-weight:800;font-size:1.18rem;line-height:1.15;color:#fff}
.assure-cell span{font-weight:600;font-size:.88rem;line-height:1.35;opacity:.92;color:#fff;max-width:22ch}

/* B2B-оффер вместо фейковых логотипов */
.b2b-offer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px;padding:22px 26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.b2b-offer .bo-ico{width:52px;height:52px;border-radius:var(--r-md);background:var(--surface-amber);color:#C77F0A;display:grid;place-items:center;flex:none}
[data-theme="dark"] .b2b-offer .bo-ico{color:var(--amber)}
.b2b-offer .bo-ico svg{width:26px;height:26px}
.b2b-offer .bo-text{flex:1;min-width:230px}
.b2b-offer .bo-text b{font-family:var(--font-head);font-weight:800;font-size:1.12rem;display:block;color:var(--text)}
.b2b-offer .bo-text span{font-size:.9rem;color:var(--text-muted)}
.b2b-offer .btn{flex:none}
.level-badge{font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.02em;width:56px;height:48px;display:grid;place-items:center;border-radius:var(--r-md);flex:none;z-index:1}

/* ---------- Гарантия результата ---------- */
.guarantee{display:grid;gap:clamp(22px,3vw,40px);border-radius:var(--r-xl);padding:clamp(26px,4vw,46px);background:linear-gradient(135deg,var(--surface-soft),var(--surface-amber));border:1px solid var(--line);position:relative;overflow:hidden}
[data-theme="dark"] .guarantee{background:linear-gradient(135deg,var(--surface-2),var(--surface-amber))}
.guarantee::before{content:"";position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft-glow),transparent 70%);pointer-events:none}
@media(min-width:920px){.guarantee{grid-template-columns:1.05fr .95fr;align-items:center}}
.guarantee > *{position:relative;z-index:1;min-width:0}
.guarantee-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.guarantee-eyebrow svg{width:18px;height:18px}
.guarantee-title{font-size:var(--fs-h2);font-weight:800;margin-top:14px;text-wrap:balance}
.guarantee-lede{margin-top:14px;font-size:var(--fs-body-lg);color:var(--text-muted);max-width:44rem}
.guarantee-trump{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.guarantee-trump .gt-ico{width:42px;height:42px;border-radius:var(--r-md);background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);display:grid;place-items:center;flex:none}
.guarantee-trump .gt-ico svg{width:22px;height:22px}
.guarantee-trump p{font-size:.92rem;line-height:1.55;color:var(--text)}
.guarantee-trump b{font-weight:800}
.guarantee-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(24px,3vw,32px)}
.guarantee-seal{width:60px;height:60px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-brand);margin-bottom:16px}
.guarantee-seal svg{width:32px;height:32px}
.gc-title{font-size:var(--fs-h3);font-weight:800;margin-bottom:16px}
.gc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.gc-list li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;line-height:1.5;color:var(--text)}
.gc-tk{width:24px;height:24px;border-radius:50%;flex:none;margin-top:1px;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.gc-tk svg{width:14px;height:14px}
.gc-tk-info{background:var(--surface-blue);color:var(--blue)}
.gc-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.55;color:var(--text-muted)}
.gc-foot b{color:var(--text);font-weight:700}

/* ---------- Особые условия (4 фичи) ---------- */
.cond-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px){.cond-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cond-grid{grid-template-columns:repeat(4,1fr)}}
.cond-card{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .2s ease,box-shadow .2s ease}
.cond-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.cond-ico{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center}
.cond-ico svg{width:26px;height:26px}
.cond-card h3{font-size:1.06rem;font-weight:800;line-height:1.25}
.cond-card p{font-size:.9rem;line-height:1.55;color:var(--text-muted)}

/* ---------- «Вам подойдёт, если…» + результат ---------- */
.fit{max-width:900px;margin-inline:auto}
.fit-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.fit-list{grid-template-columns:1fr 1fr;gap:14px 22px}}
.fit-list li{position:relative;font-size:1rem;line-height:1.55;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 18px 15px 52px;box-shadow:var(--sh-sm)}
.fit-tk{position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.fit-tk svg{width:15px;height:15px}
.fit-list li b{font-weight:800;color:var(--text)}
.fit-result{display:flex;gap:16px;align-items:center;margin-top:22px;padding:22px 26px;border-radius:var(--r-xl);background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.fit-result .fr-ico{width:54px;height:54px;border-radius:var(--r-md);background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.fit-result .fr-ico svg{width:28px;height:28px}
.fit-result b{font-weight:800;font-size:var(--fs-body-lg);display:block;line-height:1.3}
.fit-result p{font-size:.92rem;opacity:.95;margin-top:5px;line-height:1.5}

/* ---------- «С чего начать» — точки входа ----------
   Все правила .entry-* собраны ниже, в блоке «Точки входа (S7)».
   Здесь раньше лежала вторая, более ранняя копия того же компонента вместе
   с контрольной точкой «3 колонки с 680px». Точка была мертва и до слияния:
   базовое `.entry-grid{grid-template-columns:1fr}` из нижнего блока стоит
   после неё при равной специфичности и перебивало её на всех ширинах. */
/* ---------- Узкие телефоны: длинный лейбл кнопки не должен вылезать за вьюпорт ---------- */
/* .btn по умолчанию white-space:nowrap. Точечно для кнопки-ссылки с длинным
   предложением-лейблом («Не знаете свой уровень? Пройдите тест» в .courses-foot)
   разрешаем перенос на узких экранах — иначе горизонтальный скролл на 360/375.
   Короткие CTA (hero и пр.) не трогаем, чтобы не плодить лишние двухстрочные кнопки. */
@media(max-width:600px){
  .courses-foot .btn{white-space:normal;max-width:100%;text-wrap:balance}
}
/* Hero страницы «Программа» — центрированный, одноколоночный, без лид-формы.
   Важно: перебиваем 2-колоночную .hero-grid (grid-template-columns:1.15fr .85fr
   с min-width:1024px) — у program-hero нет правой колонки, иначе H1 зажимается
   в 1.15fr и встаёт «столбиком», а справа зияет пустая колонка. */
.hero--program .hero-grid{grid-template-columns:1fr;max-width:900px;margin-inline:auto;text-align:center;justify-items:center}
.hero--program .hero-pills,
.hero--program .hero-cta{justify-content:center}
.hero--program .hero-copy{display:flex;flex-direction:column;align-items:center}
.hero--program h1{font-size:clamp(1.7rem, 1rem + 2.05vw, 2.7rem);line-height:1.08;max-width:30ch;text-wrap:balance;margin-inline:auto}
.hero--program .hero-lede{max-width:58ch;margin-top:16px}
.hero--program .hero-speech{text-align:left;margin-top:12px}
/* Облегчение конверсионного героя: кегль H1 уже модест (42px @1280, потолок 43px —
   меньше, чем у .hero--page), поэтому трогаем не размер шрифта, а вертикальный ритм —
   чтобы оба CTA и строка доверия (.hero-assure) поднялись к сгибу. Всё изолировано
   классом .hero--program: базовый .hero главной и служебный .hero--page не затронуты.
   Mobile-first, значения на 4pt-сетке. */
.hero--program{padding-block:clamp(28px,4.2vw,52px)}
.hero--program .hero-cta{margin-top:24px}
.hero--program .hero-assure{margin-top:20px;padding-top:18px}

/* --- Переключатель языков обучения (ARIA tablist) --- */
.lang-switch{max-width:940px;margin:0 auto 26px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.lang-switch-label{font-size:.92rem;line-height:1.55;color:var(--text-muted);max-width:60ch}
.lang-switch-label b{color:var(--text);font-weight:700}
.lang-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:6px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}
.lang-tab{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--text);background:transparent;border:1.5px solid transparent;border-radius:var(--r-pill);padding:10px 18px;min-height:44px;cursor:pointer;transition:color .16s ease,background .16s ease,box-shadow .16s ease,border-color .16s ease}
.lang-tab .lang-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--lang-accent,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--lang-accent,var(--primary)) 18%,transparent)}
.lang-tab:hover{color:var(--lang-accent,var(--primary));background:var(--surface)}
.lang-tab[aria-pressed="true"]{color:var(--on-primary);background:var(--lang-accent,var(--primary));border-color:transparent;box-shadow:var(--sh-sm)}
.lang-tab[aria-pressed="true"] .lang-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.lang-tab:focus-visible{outline:none;box-shadow:var(--ring)}
/* Языковые акценты */
.lang-tab[data-lang="polish"]{--lang-accent:#DC2647}
.lang-tab[data-lang="english"]{--lang-accent:var(--blue)}
.lang-tab[data-lang="german"]{--lang-accent:#C7920A}
.lang-tab[data-lang="spanish"]{--lang-accent:var(--violet)}
.lang-tab[data-lang="french"]{--lang-accent:var(--green)}

/* --- Точки входа (S7 главной, программа, легализация) --- */
.entry-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.entry-grid{grid-template-columns:repeat(2,1fr)}}
.entry-card{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,32px);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden}
.entry-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.entry-card.is-primary{background:linear-gradient(135deg,var(--surface-soft),var(--surface-amber));border-color:color-mix(in srgb,var(--primary) 28%,var(--line))}
.entry-card.is-soon{opacity:.92}
.entry-num{position:absolute;top:14px;right:20px;font-family:var(--font-head);font-weight:800;font-size:2.4rem;line-height:1;color:var(--line)}
.entry-ico{width:54px;height:54px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.entry-ico svg{width:28px;height:28px}
.entry-card h3{font-size:1.2rem;font-weight:800;line-height:1.25}
.entry-card p{font-size:.95rem;line-height:1.6;color:var(--text-muted);flex:1 1 auto}
.entry-card .entry-soon{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);border-radius:var(--r-pill);padding:6px 13px}
.entry-card .btn{margin-top:4px;align-self:flex-start}
@media(max-width:479.98px){.entry-card .btn{align-self:stretch;width:100%;justify-content:center;white-space:normal;text-wrap:balance}}
.thr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.thr-step{position:relative;display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:16px 18px}
.thr-step-n{position:absolute;top:-10px;left:-10px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-family:var(--font-head);font-weight:800;font-size:.8rem;box-shadow:var(--sh-sm)}
.thr-step-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface-soft);color:var(--primary)}
.thr-step-ic svg{width:22px;height:22px}
.thr-step-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.thr-step-body b{font-family:var(--font-head);font-weight:800;font-size:.98rem;color:var(--text)}
.thr-step-body span{font-size:.88rem;line-height:1.5;color:var(--text-muted)}

/* ==========================================================================
   Глобальные «полезные» страницы Волны 1 (about / teachers / reviews /
   contacts / faq). Переиспользуют токены и базовые компоненты выше; ниже —
   только новые паттерны этих страниц. Mobile-first, тёмная тема, a11y.
   ========================================================================== */

/* --- Hero контентной страницы (центрированный, без второй колонки) ---
   Компактная шапка: заметно срезанный кегль H1 и подтянутый вертикальный ритм,
   чтобы функционал (поиск/фильтры/CTA) поднимался ближе к сгибу. H1 главной,
   курсов и программы это НЕ затрагивает — там свои классы (.hero без --page,
   .hero--program). Mobile-first: floor читаемый, ceiling умеренный. */
.hero--page{padding-block:clamp(14px,2.6vw,32px) clamp(20px,3.4vw,40px)}
.hero--page .hero-inner{position:relative;z-index:1;max-width:820px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero--page .hero-pills{justify-content:center;margin-bottom:14px}
/* Профиль преподавателя НЕ наследует .hero--page: его правила центрируют
   h1 и лид (margin-inline:auto), что на левоприжатой карточке даёт заголовок,
   плавающий посреди пустого поля. */
.hero--profile{padding-block:clamp(14px,2.6vw,32px) clamp(24px,4vw,48px)}
.hero--page h1{font-size:clamp(1.6rem,1.05rem + 2.4vw,2.75rem);max-width:28ch;margin-inline:auto;text-wrap:balance;overflow-wrap:break-word}
.hero--page .hero-lede{margin-top:14px;margin-inline:auto;max-width:60ch}
.hero--page .hero-cta{justify-content:center;margin-top:22px}
.hero--page.hero--lead .hero-inner{max-width:940px}

/* крошки внутри hero — прижаты влево над контентом */
.hero .crumbs{position:relative;z-index:1;padding-top:0;margin-bottom:14px}


/* --- Сетка принципов на 3 колонки (6 карточек) --- */
@media(min-width:640px){.why-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.why-grid--3{grid-template-columns:repeat(3,1fr)}}

/* --- Врезка доверия «как подбираем» (3 плашки) --- */
.trust-strip{display:grid;gap:18px;grid-template-columns:1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px)}
@media(min-width:820px){.trust-strip{grid-template-columns:repeat(3,1fr);gap:28px}}
.trust-cell{display:flex;flex-direction:column;gap:10px}
.trust-ico{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;color:#fff;background:var(--grad-brand)}
.trust-ico.t-blue{background:linear-gradient(135deg,#2563EB,#6E97FF)}
.trust-ico.t-violet{background:linear-gradient(135deg,#7C5CFC,#a593ff)}
.trust-ico svg{width:26px;height:26px}
.trust-cell b{font-size:1.06rem;font-weight:800}
.trust-cell p{color:var(--text-muted);font-size:.92rem;line-height:1.55}

/* --- Карточка преподавателя: расширения архива --- */
.card-teacher .teacher-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:8px;box-shadow:var(--sh-sm)}
.teacher-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.tt-badge{font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-muted);display:inline-flex;align-items:center;gap:5px}
.tt-badge svg{width:12px;height:12px}
.tt-badge.is-native{background:color-mix(in srgb,var(--green) 15%,var(--surface));color:var(--badge-green-text)}
.tt-badge.is-exam{background:var(--surface-blue);color:var(--blue)}
.tt-badge.is-kids{background:var(--surface-violet);color:var(--badge-violet-text)}
.teacher-speaks{font-size:.82rem;color:var(--text-muted);margin-top:6px;display:flex;align-items:center;gap:6px;justify-content:center}
.teacher-speaks svg{width:14px;height:14px;flex:none;opacity:.7}

/* --- Пустое состояние фильтра --- */
.filter-empty{display:none;text-align:center;padding:clamp(32px,6vw,64px) 24px;border:1px dashed var(--line);border-radius:var(--r-xl);background:var(--surface-2)}
.filter-empty .fe-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:var(--surface);color:var(--primary);box-shadow:var(--sh-sm)}
.filter-empty .fe-ico svg{width:30px;height:30px}
.filter-empty h3{font-size:1.25rem;font-weight:800;margin-bottom:8px}
.filter-empty p{color:var(--text-muted);max-width:44ch;margin:0 auto 20px}

/* --- Общий блок «остался вопрос» / связь (компактный) --- */
.help-band{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line);padding:clamp(26px,4vw,44px);text-align:center}
.help-band h2{font-size:var(--fs-h2);max-width:22ch;margin:0 auto 12px}
.help-band p{color:var(--text-muted);max-width:52ch;margin:0 auto 24px;font-size:var(--fs-body-lg)}
.help-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.help-msgs{display:inline-flex;gap:10px}

/* --- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  .msg-card,.msg-card .mc-action svg,.rev-play,.social-btn,.card-lang:hover .seg-link svg{transition:none}
}

/* --- Утилита: доступное скрытие (для label поиска и т.п.) --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   ВОЛНА 2 — глобальные страницы: Гарантии / Вакансии / Акции / Блог.
   Новые паттерны на тех же токенах/алиасах, что Волна 1. Mobile-first,
   тёмная тема на семантических токенах, a11y (фокус, клавиатура, aria).
   ========================================================================== */

/* ---------- Общая «section-note»: честная пометка демо/оформления ---------- */
.section-note{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;line-height:1.4;color:var(--text-muted);background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-pill);padding:8px 15px}
.section-note svg{width:16px;height:16px;color:var(--primary);flex:none}

/* ---------- Условия гарантии: нумерованный честный список ---------- */
.terms-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:820px}
.terms-list li{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 20px}
.terms-list .tn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-soft);color:var(--primary);font-family:var(--font-head);font-weight:800;font-size:.98rem}
.terms-list .tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.terms-list .tt b{font-weight:800;font-size:1rem;color:var(--text)}
.terms-list .tt span{font-size:.92rem;line-height:1.55;color:var(--text-muted)}
.terms-list .tt span b{color:var(--text);font-weight:700}
.terms-list li.is-note{background:var(--surface-blue);border-color:color-mix(in srgb,var(--blue) 22%,transparent)}
.terms-list li.is-note .tn{background:var(--blue);color:#fff}
.terms-note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;max-width:820px;font-size:.88rem;line-height:1.55;color:var(--text-muted)}
.terms-note svg{width:18px;height:18px;color:var(--amber);flex:none;margin-top:1px}

/* ---------- Гарантии: пакет из 5 карточек (cond-grid до 5) ---------- */
@media(min-width:1024px){.cond-grid.is-5{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.cond-grid.is-5{grid-template-columns:repeat(5,1fr)}}
.cond-ico.ci-coral{background:var(--surface-soft);color:var(--primary)}
.cond-ico.ci-blue{background:var(--surface-blue);color:var(--blue)}
.cond-ico.ci-violet{background:var(--surface-violet);color:var(--violet)}
.cond-ico.ci-green{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.cond-ico.ci-amber{background:var(--surface-amber);color:#C77F0A}
[data-theme="dark"] .cond-ico.ci-amber{color:var(--amber)}

/* --- reduced motion для новых компонентов --- */
@media(prefers-reduced-motion:reduce){
  .vac-card,.promo-card,.post-card,.feat-post,.blog-chip,.fp-arrow svg{transition:none}
}

/* --- Карточка статьи (сквозная: «Читайте также» в статье, «Статьи автора»
       на странице преподавателя) --- */
.bs-rel-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:600px){.bs-rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.bs-rel-grid{grid-template-columns:repeat(3,1fr)}}
.bs-rel-card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.bs-rel-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);
  border-color:color-mix(in srgb,var(--primary) 26%,var(--line))}
.bs-rel-card:focus-within{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.bs-rel-cover{position:relative;aspect-ratio:16/10;background:var(--rc-bg,linear-gradient(135deg,#7C5CFC,#6E97FF));
  overflow:hidden}
.bs-rel-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 55%)}
/* Блик и глиф рассчитаны на градиентную заглушку: поверх настоящей обложки
   они размывают угол с бейджем языка. */
.bs-rel-cover.has-img::after{display:none}
/* Обложка статьи — 1200×630 с заголовком на ней. Кроп в 16:10 срезает текст по
   краям, поэтому у настоящей картинки соотношение своё; заглушка-градиент
   остаётся 16:10, ей кропаться нечем. */
.bs-rel-cover.has-img{aspect-ratio:1200/630}
.bs-rel-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bs-rel-cover .rc-glyph{position:absolute;right:-6px;bottom:-12px;color:rgba(255,255,255,.28)}
.bs-rel-cover .rc-glyph svg{width:88px;height:88px}
.bs-rel-badge{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);
  color:#1E1B3A;box-shadow:var(--sh-sm)}
.bs-rel-badge .bs-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--bs-accent,var(--primary))}
.bs-rel-body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1}
.bs-rel-cat{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary)}
.bs-rel-title{font-family:var(--font-head);font-weight:800;font-size:1.05rem;line-height:1.3;color:var(--text)}
.bs-rel-title a{color:var(--text);text-decoration:none}
.bs-rel-title a::after{content:"";position:absolute;inset:0}
.bs-rel-title a:hover{color:var(--primary)}
.bs-rel-meta{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;
  border-top:1px solid var(--line);font-size:.78rem;color:var(--text-muted)}
.bs-rel-meta svg{width:14px;height:14px;opacity:.7}

/* ==========================================================================
   ПОДПИСКА НА РАССЫЛКУ — форма и её состояния (.subf)
   --------------------------------------------------------------------------
   Сквозной компонент ТРЁХ страниц (потому и здесь, а не в pages/*):
     • /blog/ — большой блок (pages/blog.css задаёт только обрамление),
     • хвост статьи — компактный вариант (pages/blog-single.css),
     • страница подтверждения — повторная подписка (pages/subscribe-confirm.css).

   Состояние переключается ОДНИМ классом на <form class="subf">: is-loading /
   is-success / is-error. Видимость всех панелей описана здесь, чтобы developer
   не дублировал показ/скрытие в JS и чтобы без JS форма оставалась в idle.
   ========================================================================== */
/* Форма — контейнер запросов: стакать поле и кнопку нужно по ширине САМОЙ формы,
   а не вьюпорта (в двухколоночном блоке /blog/ колонка узкая уже на 1024). */
.subf{display:flex;flex-direction:column;gap:15px;min-width:0;container-type:inline-size}
.subf-body{display:flex;flex-direction:column;gap:15px;min-width:0}
.subf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.subf-row{display:flex;gap:10px;flex-wrap:wrap;min-width:0}

/* Поле email: иконка внутри инпута — левый паддинг под неё считаем от 16px базы */
.subf-input-wrap{position:relative;display:block;flex:1 1 210px;min-width:0}
.subf-input{padding-left:46px}
.subf-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  color:var(--text-muted);pointer-events:none;transition:color .18s ease}
.subf-ico svg{width:100%;height:100%}
.subf-input:focus ~ .subf-ico{color:var(--blue)}
.subf-btn{flex:none}
/* Не хватает ширины на «поле + кнопка» — кладём их в столбец, и кнопка занимает
   всю строку. Иначе flex-wrap переносил кнопку и оставлял её сиротой слева. */
@container (max-width:439px){
  .subf-row{flex-direction:column}
  /* Сбрасываем flex-basis: в колонке он читается как ВЫСОТА и растягивал
     обёртку поля до 210px, из-за чего иконка уезжала под инпут. */
  .subf-input-wrap{flex:0 0 auto;width:100%}
  .subf-btn{width:100%}
}
/* Фолбэк для браузеров без container queries (и для самых узких экранов) */
@media(max-width:479.98px){.subf-btn{width:100%}}

/* Подпись кнопки: обе подписи лежат в одной ячейке грида, поэтому ширина
   кнопки равна максимальной из них и при переходе в is-loading не прыгает. */
.subf-btn-labels{display:grid;place-items:center}
.subf-btn-labels > *{grid-area:1/1}
.subf-btn-label--loading{visibility:hidden}
.subf.is-loading .subf-btn-label{visibility:hidden}
.subf.is-loading .subf-btn-label--loading{visibility:visible}
.subf-spin{display:none;width:18px;height:18px;flex:none;border-radius:50%;
  border:2.5px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;
  animation:subf-spin .7s linear infinite}
.subf.is-loading .subf-spin{display:block}
@keyframes subf-spin{to{transform:rotate(360deg)}}
/* Глобальное правило reduced-motion гасит длительность у ВСЕХ анимаций (*), из-за
   чего спиннер замирал бы намертво. Индикатор прогресса — исключение по WCAG:
   оставляем вращение, но заметно медленнее и без резкости. */
@media(prefers-reduced-motion:reduce){.subf .subf-spin{animation-duration:1.6s!important}}
.subf.is-loading .subf-body{opacity:.72;transition:opacity .18s ease}
.subf.is-loading .subf-input{pointer-events:none}

/* Ошибка поля: показывается классом .has-error на .subf-field */
.subf-err{display:none;align-items:flex-start;gap:7px;font-size:.82rem;line-height:1.45;color:var(--red)}
.subf-err svg{width:16px;height:16px;flex:none;margin-top:1px}
.subf-field.has-error .subf-err{display:flex}
.subf .input[aria-invalid="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--surface))}
.subf .input[aria-invalid="true"]:focus{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 24%,transparent)}
.subf .check input[aria-invalid="true"] + .box{border-color:var(--red)}
.subf-field--consent .subf-err{padding-left:35px}

/* Согласие и мелкий текст */
.subf-consent{font-size:.85rem;color:var(--text-muted);line-height:1.5}
.subf-consent .box{width:22px;height:22px}
.subf-fine{font-size:.82rem;color:var(--text-muted);line-height:1.5}
.subf-fine a{font-weight:600;color:var(--blue)}
.subf-fine a:hover{text-decoration:underline}
/* Дисклеймер Google обязателен, но не должен спорить с CTA: ссылки приглушены
   до цвета вторичного текста (на белом 7:1 — AA с запасом) и опознаются
   подчёркиванием, а не цветом. */
.subf-fine--legal{font-size:.76rem}
.subf-fine--legal a{color:var(--text-muted);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.subf-fine--legal a:hover{color:var(--blue)}

/* Общая ошибка (сеть/сервер): показывается классом .is-error на форме */
.subf-alert{display:none;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);
  font-size:.86rem;line-height:1.5;color:var(--text);
  background:color-mix(in srgb,var(--red) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 34%,transparent)}
.subf-alert svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--red)}
.subf.is-error .subf-alert{display:flex}

/* Успех: тело формы уступает место панели «проверьте почту» */
.subf-done{display:none;flex-direction:column;align-items:flex-start;gap:9px;
  padding:clamp(18px,2.6vw,22px);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--green) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.subf.is-success .subf-body{display:none}
.subf.is-success .subf-done{display:flex;animation:subf-in .32s ease-out}
@keyframes subf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.subf-done-ico{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--green) 16%,var(--surface));color:var(--green)}
.subf-done-ico svg{width:24px;height:24px}
.subf-done-title{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--text)}
.subf-done-text{font-size:.92rem;line-height:1.55;color:var(--text-muted)}
.subf-done-text b{color:var(--text);font-weight:700;overflow-wrap:anywhere}
.subf-done-hint{font-size:.82rem;line-height:1.5;color:var(--text-muted)}
.subf-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--blue);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.subf-link:hover{color:var(--primary)}
.subf-link:focus-visible{outline:none;box-shadow:var(--ring);border-radius:5px}
/* Плавающий бейдж reCAPTCHA v3: скрыт (правила Google это допускают при условии,
   что дисклеймер напечатан текстом — он выше, .subf-fine--legal). Именно
   visibility, а не display:none — скрипт капчи опирается на размеры узла.
   Селектор чужой (Google), потому и живёт здесь, рядом с формой-владельцем. */
.grecaptcha-badge{visibility:hidden}

/* Компактные варианты (хвост статьи, страница подтверждения) */
.subf--inline,.subf--confirm{gap:12px}
.subf--inline .subf-body,.subf--confirm .subf-body{gap:12px}
/* Метку в компактных вариантах НЕ прячем (placeholder меткой не является) —
   только уменьшаем: строка в 18px дешевле, чем поле без видимого лейбла. */
.subf--inline .field-label,.subf--confirm .field-label{font-size:.82rem;color:var(--text-muted)}
.subf--inline .subf-consent,.subf--confirm .subf-consent{font-size:.8rem}
.subf--inline .subf-fine--legal,.subf--confirm .subf-fine--legal{font-size:.72rem}

/* Карточка преподавателя в каталоге кликабельна целиком: без этого страница
   профиля была сиротой — попасть на неё можно было только из статьи. */
.card-teacher .tc-link{color:inherit;text-decoration:none}

.card-teacher .tc-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-teacher .tc-link:focus-visible{outline:none}
.card-teacher:focus-within{border-color:color-mix(in srgb,var(--primary) 40%,var(--line));box-shadow:var(--ring)}

/* ============================================================
   БАННЕР СОГЛАСИЯ НА COOKIE (Complianz) — размещение и облик
   ============================================================
   Селекторы чужие (плагин), но живут здесь: баннер печатается на КАЖДОЙ
   странице, поэтому это сквозной компонент base.css, а не посекционный файл.

   ЗАЧЕМ. Плавающая карточка плагина (bottom-right, 526x226) ложилась ровно
   на лид-форму hero: на 1366x768 закрывала телефон, чекбокс согласия и кнопку
   отправки — клики физически не доходили (elementFromPoint возвращал узел
   баннера). Поднимать форму над баннером нельзя: запрос согласия обязан
   оставаться поверх. Значит, баннер должен занимать область, где формы нет.

   ГЕОМЕТРИЯ (замеры на /polish/, до принятия согласия). Три режима, границы
   не по вкусу, а по замерам первого экрана:
   1. НИЖНИЙ ЛИСТ (база, mobile-first) — телефоны и любые вьюпорты ниже 900px,
      где hero одноколоночный: форма стоит на y>=1092, то есть заведомо ниже
      сгиба, и нижний лист ничего не закрывает. Палец у нижнего края — родная
      для мобильных раскладка.
   2. ВЕРХНЯЯ ПОЛОСА + резерв body{padding-top} — от 768px ширины и от 900px
      высоты. На высоких вьюпортах форма достаёт до нижнего края (1024x1366:
      между последним полем и краем ~60px), и снизу баннер не помещается
      НИКАК. Полоса сверху с резервом — единственный вариант, где не
      перекрыто ничего: страница просто начинается ниже. На >=1200px полоса
      ниже (--cc-bar-h:136px): строка широкая, текст укладывается в 2-3
      строки, и кнопка отправки формы (низ на y=744) остаётся в первом
      экране при vh>=900.
   3. КАРТОЧКА В ЛЕВОМ НИЖНЕМ УГЛУ — от 1200px ширины при высоте <900px
      (ноутбучные 1280x720/800, 1366x768, 1536x864). Здесь hero
      двухколоночный: лид-форма занимает правую половину, её левый край
      стабильно ~0.51*vw (654px на 1280, 979px на 1920), а CTA-кнопки левой
      колонки лежат ниже сгиба (y=863 при vh=768, y=844 при vh=864). Карточка
      420px + отступ 24px = правый край 444px — левее формы даже в самом
      узком случае (612px при 1200px), а нижний край (vh-24) выше CTA-строки.
      Под карточкой оказывается только текст лида.
   Полноширинная нижняя полоса (частый совет) задачу НЕ решает: на 1366x768
   кнопка отправки заканчивается в 24px от нижнего края — полоса любой
   разумной высоты её накроет.

   УСТОЙЧИВОСТЬ К ДЛИНЕ ТЕКСТА. Тексты баннера переводятся на ru/uk (длиннее
   английских). Поэтому: ширина карточки не зависит от длины строки, высота
   ограничена max-height, а переполнение уезжает во внутренний скролл
   .cmplz-body; у верхней полосы высота фиксирована и равна резерву — так
   резерв не рассинхронизируется с фактической высотой. Подписи кнопок
   переносятся по словам (white-space:normal вместо nowrap плагина).

   Стилизация — токены темы (Manrope/Unbounded, коралловый CTA, --line,
   --ring), тёмная тема получается автоматически через алиасы. Собственные
   переменные плагина (--cmplz_*) перебиваем адресно: у его правил
   специфичность классов, у наших — id-контейнер + !important.
   Переменные --cc-* объявлены в :root в начале файла (рядом с остальными
   алиасами), чтобы не плодить второй блок :root. */

/* ВАЖНО про состояния. Видимостью баннера управляет ПЛАГИН через классы:
   .cmplz-hidden — до инициализации, .cmplz-show — показан, .cmplz-dismissed —
   выбор сделан (у плагина на нём display:none БЕЗ !important). Поэтому:
   1) вся наша раскладка висит на .cmplz-show — в состоянии dismissed ни одно
      наше !important не действует и баннер честно скрывается;
   2) ниже — явный предохранитель на случай, если состояние переключат другим
      классом или порядок стилей изменится.
   Без этого display:flex/grid !important перебивал display:none плагина, и
   баннер оставался на экране после «Принять» — согласие записано, а панель
   висит поверх страницы. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden:not(.cmplz-show){display:none !important}

/* --- База (mobile-first): нижний лист во всю ширину --- */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  width:100% !important; min-width:0 !important; max-width:none !important;
  height:auto !important;
  /* Потолок листа. Высота всё равно auto — лист вырастает ровно под контент,
     потолок включается только когда контента больше, поэтому поднятый потолок
     НЕ делает лист выше там, где текст и так помещался. 80dvh, а не 56dvh:
     при 56dvh боевой русский текст (351 знак) на 360x640 обрезался на 36px,
     на 375x667 — на 20px, и за прокруткой оказывалась ЗАМЫКАЮЩАЯ фраза про
     последствия отказа («…не будет статистики и не откроется чат»). Для
     баннера согласия это не косметика: человек обязан видеть, что теряет,
     без дополнительных действий, иначе согласие не информированное.
     Фактические высоты: 390px на 360x640 и 375x667 (61% и 58% экрана),
     347px на 480x854. Потолок в 80dvh нужен только самым узким телефонам:
     на 320x568 тот же текст занимает 434px, и при 74dvh обрезался на 14px. */
  max-height:min(80dvh,520px) !important;
  margin:0 !important;
  /* Горизонтальные отступы повторяют .wrap (bleed-контейнер + clamp), поэтому
     текст полосы/листа стоит на той же вертикали, что и контент страницы. */
  padding-block:16px calc(16px + env(safe-area-inset-bottom)) !important;
  padding-inline:calc(max(0px,(100% - var(--bleed)) / 2) + clamp(16px,4vw,40px)) !important;
  display:flex !important; flex-direction:column !important;
  gap:0 !important; grid-gap:0 !important;
  overflow:hidden !important;
  border-top:1px solid var(--line) !important; border-right:1px solid var(--line) !important;
  border-bottom:0 !important; border-left:1px solid var(--line) !important;
  border-radius:var(--r-lg) var(--r-lg) 0 0 !important;
  /* брендовая волосинка сверху вместо «системного» серого блока */
  background-color:var(--surface) !important;
  background-image:linear-gradient(90deg,var(--primary),var(--violet)) !important;
  background-repeat:no-repeat !important;
  background-size:100% 3px !important;
  background-position:top left !important;
  color:var(--text) !important;
  box-shadow:0 -14px 40px rgba(30,27,58,.18) !important;
  font-family:var(--font-body) !important;
  animation:cc-in .28s ease-out both;
}
@keyframes cc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- СЛОЙ: БАННЕР СОГЛАСИЯ ВЫШЕ ВИДЖЕТА ЧАТА ---
   ЗАМЕР 19.08.2026, 390x844, /english/: лист согласия занимает 0..375 x 388..844,
   плашка HelpCrunch — iframe 50..355 x 626..824, то есть лежит ЦЕЛИКОМ внутри
   листа и по слою оказывается сверху: у баннера z-index 99999 (значение плагина),
   у виджета — 16777000, и это число ставит инлайном их sdk.js на сам iframe.
   elementFromPoint в центре «Принять» (275, 643) и «Отклонить» (100, 643)
   возвращал IFRAME: ОБЕ кнопки согласия физически не нажимались.
   Отсюда же рос второй симптом — «баннер не закрывается по „Принять“». Плагин
   исправен: программный btn.click() гасит лист и ставит все четыре кукиса
   категорий; до обработчика просто не доходил живой тап.
   Цена дефекта не косметическая: пока согласия нет, Complianz держит аналитику
   и рекламные теги выключенными, а согласие, которое сайт обязан собрать по
   RODO, собрать нечем.
   ПОЧЕМУ z-index, А НЕ «ПОДВИНУТЬ ПЛАШКУ». Положение виджета задаётся в кабинете
   HelpCrunch и приезжает их скриптом при каждой перерисовке — наш сдвиг он
   переживёт, наш слой перебить не может. 2147483000 — под потолком int32
   (2147483647) и с запасом над 16777000: даже если виджет поднимет свой слой ещё
   раз, баннер останется сверху. Правило висит на .cmplz-show, как и вся остальная
   раскладка: в состоянии dismissed баннера на экране нет и спорить не с чем. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show{z-index:2147483000 !important}

/* Телефон, режим нижнего листа: на время показа листа гасим сам виджет чата.
   Одного z-index мало — он решает спор за пиксель, но не решает случай, когда
   посетитель успел ОТКРЫТЬ чат: развёрнутая панель HelpCrunch на телефоне
   занимает весь экран, лист согласия ложится на её нижнюю половину вместе с
   полем ввода, и человек оказывается в переписке, в которой нечем писать. Пока
   согласие не дано, чата на телефоне нет — ровно тот же размен, что уже сделан
   для лид-формы (охрана в inc/chat-widget.php: пока форма на экране, плашки нет).
   С липкой панелью хаба не путать: там размен обратный — плашку не прячут, а
   поднимают над панелью, и это записано в inc/chat-widget.php как осознанный
   выбор. Гасит саму панель на время показа листа уже pages/english-hero.css.
   visibility, а не display: DOM виджета трогать нельзя (их скрипт считает
   геометрию iframe и чинит собственный сдвиг), а visibility и клик забирает, и
   из таб-порядка убирает — то есть заодно закрывает WCAG 2.4.11 по фокусу.
   ГАСИМ И ОБЁРТКУ, И САМ iframe. Одной обёртки мало: HelpCrunch пишет на iframe
   инлайновый `visibility: visible` (проверено — в атрибуте style рядом с
   position/z-index), и наследование от скрытого родителя он перебивает. Наш
   `!important` перебивает инлайн без !important — это единственный способ,
   не трогая чужой DOM. Селектор берёт любые iframe обёртки: у виджета их два
   состояния — тизер и развёрнутая панель.
   В режимах полосы (верх экрана) и карточки (левый край) правило не нужно: там
   угол виджета свободен и чат остаётся доступен. */
@media (max-width:767.98px){
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .helpcrunch-iframe-wrapper,
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .helpcrunch-iframe-wrapper iframe{visibility:hidden !important}
}

/* Служебные разделители и пустые ряды ссылок плагина: в flex-раскладке они
   давали бы паразитные строки. Вертикальный ритм задаём маржинами детей. */
#cmplz-cookiebanner-container .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-links.cmplz-information{display:none !important}
#cmplz-cookiebanner-container .cmplz-documents{margin:0 !important;justify-content:flex-start !important}
#cmplz-cookiebanner-container .cmplz-documents .cmplz-link:empty{display:none}
/* Пустые ссылки мы гасим строкой выше, но САМ ряд оставался — и это не косметика.
   Ряд документов плагин печатает прямым ребёнком баннера, месту в нашем гриде он
   не назначен, поэтому в режиме полосы уезжает в НЕЯВНЫЙ ряд и съедает высоту у
   ряда minmax(0,1fr), где живёт текст согласия. Замер 19.08.2026 на 1440x900:
   ряд документов 116px (три маркера списка от пустых ссылок), .cmplz-body при
   этом 0px — то есть сообщение баннера на десктопе не видно ВООБЩЕ, а на его
   месте три пустых буллета. С этим правилом .cmplz-body получает свои 71px,
   ровно те, под которые считался бюджет полосы (152 - 32 отступов - 40 шапки -
   8 её отступа), и сообщение помещается целиком.
   Условие узкое намеренно: ряд исчезает, только если в нём НЕТ ни одной ссылки
   с текстом и без .cmplz-hidden. Настроенный баннер со ссылками на политику
   правило не трогает — ссылки на документы прятать нельзя, они часть требования
   к информированному согласию. */
#cmplz-cookiebanner-container .cmplz-documents:not(:has(.cmplz-link:not(:empty):not(.cmplz-hidden))){display:none !important}

/* Шапка: заголовок слева, крестик справа (у плагина заголовок по центру
   в сетке 100px/1fr/100px — под наш узкий формат это ломается). */
#cmplz-cookiebanner-container .cmplz-header{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important; margin:0 0 10px !important;
}
/* display:block — плагин прячет заголовок уже с 425px; на узком экране это
   оставляло в шапке один крестик без контекста. */
#cmplz-cookiebanner-container .cmplz-title{
  display:block !important;
  justify-self:start !important; text-align:left !important;
  font-family:var(--font-head) !important; font-weight:700 !important;
  font-size:1rem !important; line-height:1.25 !important; color:var(--text) !important;
}
/* 44x44 — минимальная зона касания (Apple HIG / WCAG 2.5.5); у плагина было
   20x20. Отрицательный внешний отступ возвращает иконку к краю карточки. */
#cmplz-cookiebanner-container .cmplz-close{
  width:44px !important; height:44px !important; margin-right:-10px !important;
  display:grid !important; place-items:center !important;
  border-radius:var(--r-pill); color:var(--text-muted) !important;
  transition:background .16s ease,color .16s ease;
}
#cmplz-cookiebanner-container .cmplz-close:hover{background:var(--surface-2);color:var(--text) !important;font-size:20px !important}
#cmplz-cookiebanner-container .cmplz-close:focus-visible{outline:none;box-shadow:var(--ring)}
/* Не на пальце цель 40px: WCAG 2.5.8 (AA) требует 24px, 44px — это критерий
   2.5.5 (AAA) для касания. Четыре высвобожденных пикселя идут телу баннера
   в режимах с ЖЁСТКОЙ высотой (полоса), где высоту шапки задаёт именно
   крестик, а не заголовок в 20px. Условие отрицательное — «указатель НЕ
   грубый», а не «указатель точный»: headless-браузеры и часть киосков
   отвечают pointer:none, и при (pointer:fine) правило молча не применялось
   бы ни в тестах, ни у них. На тач-устройствах остаётся 44px. */
@media not all and (pointer:coarse){
  #cmplz-cookiebanner-container .cmplz-close{width:40px !important;height:40px !important;margin-right:-8px !important}
}

/* Тело: единственная скроллящаяся область — сюда уходит и длинный перевод,
   и раскрытый список категорий. */
#cmplz-cookiebanner-container .cmplz-body{
  width:auto !important; min-width:0 !important; min-height:0 !important;
  max-height:none !important; overflow-y:auto !important;
}
#cmplz-cookiebanner-container .cmplz-message{
  width:auto !important; margin:0 !important;
  font-size:.875rem !important; line-height:1.55 !important; color:var(--text-muted) !important;
}
#cmplz-cookiebanner-container .cmplz-message a,
#cmplz-cookiebanner-container .cmplz-link{
  color:var(--blue) !important; font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
#cmplz-cookiebanner-container .cmplz-body::-webkit-scrollbar-thumb{background-color:var(--line)}

/* Категории (раскрываются по «Настроить») */
#cmplz-cookiebanner-container .cmplz-categories{width:auto !important;margin-top:12px}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category{
  background-color:var(--surface-2) !important; border-radius:var(--r-sm);
}
#cmplz-cookiebanner-container .cmplz-category-title,
#cmplz-cookiebanner-container .cmplz-description{color:var(--text) !important}
#cmplz-cookiebanner-container .cmplz-always-active{color:var(--badge-green-text) !important}
#cmplz-cookiebanner-container .cmplz-category-toggle:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* Кнопки. Порядок визуальный, а не DOM: «Отклонить» и «Принять» равны по весу
   (EDPB: отказ не должен быть спрятан), «Настроить» — третичная строка ниже. */
/* flex-direction:row перебивает плагин (у него до 768px кнопки в столбик —
   три полноширинные плашки съедали пол-экрана телефона). max-width держит
   блок кнопок соразмерным на широком листе (планшет в альбоме). */
#cmplz-cookiebanner-container .cmplz-buttons{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  gap:10px !important; margin:14px 0 0 !important; max-width:560px;
}
/* position+z-index у САМИХ кнопок — страховка кликабельности, не украшение.
   В режиме полосы раскладка баннера собрана гридом из трёх именованных рядов
   (шапка, тело, кнопки), а плагин печатает внутри баннера ещё и .cmplz-documents
   (ряд ссылок на политику) со своим `grid-column: span 3`. Места в гриде мы ему
   не назначали, поэтому при фиксированной высоте полосы он уезжает в НЕЯВНЫЙ ряд
   и ложится на ряд кнопок. Замер 19.08.2026 на 1280x960: .cmplz-documents занимает
   41..1224 x 64..180, elementFromPoint в центре «Принять» (1180, 64) возвращает
   ЕГО — живой клик по согласию не доходил до кнопки, баннер оставался на экране.
   Симптом тот же, что от плашки чата на телефоне, а причина своя.
   ПОЧЕМУ СЛОЙ НА КНОПКАХ, А НЕ НА ИХ КОНТЕЙНЕРЕ. Контейнер .cmplz-buttons шире
   самих кнопок (до 560px, а в широкой полосе ещё и justify-content:flex-end),
   и подняв его, мы забрали бы клики и на ПУСТОМ месте между кнопками — то есть
   там, где под ним лежат ссылки на политику. Ссылку на политику перехватывать
   нельзя: это часть информированного согласия. Подняты ровно пилюли — они и так
   непрозрачны, ничего нового они не закрывают.
   Правило снимает класс дефектов: что бы плагин ни добавил внутрь баннера в
   следующей версии, кнопки согласия рисуются поверх и принимают клик. Раскладку
   это не двигает — меняется только порядок отрисовки. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{
  position:relative; z-index:1;
  width:auto !important; min-height:44px !important; padding:10px 18px !important;
  border-radius:var(--r-pill) !important;
  font-family:var(--font-body) !important; font-weight:700 !important;
  font-size:.9rem !important; line-height:1.25 !important;
  white-space:normal !important; text-decoration:none !important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny{
  order:1; flex:1 1 calc(50% - 5px);
  background:var(--surface) !important; color:var(--text) !important;
  border:2px solid var(--line) !important; box-shadow:var(--sh-sm);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept{
  order:2; flex:1 1 calc(50% - 5px);
  background:var(--btn-primary-bg) !important; color:var(--on-primary) !important;
  border:2px solid transparent !important; box-shadow:var(--sh-brand);
}
/* Третичное действие — текстовая ссылка, а не пилюля: ни фона, ни рамки у неё
   нет, поэтому и пилюльный отступ 18px ей не нужен — он только раздувал ширину.
   8px хватает, чтобы подчёркивание не липло к соседней кнопке. Это заодно
   лечит перенос ряда на кириллице: «Налаштувати» была на 18px шире
   «Настроить» и в карточке 378px ряд не складывался. Высота 44px сохранена —
   цель касания от размера отступов не зависит. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences{
  order:3; flex:1 1 100%;
  padding-inline:8px !important;
  background:transparent !important; color:var(--text-muted) !important;
  border:2px solid transparent !important;
  text-decoration:underline !important; text-underline-offset:3px;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:hover{border-color:var(--primary) !important;color:var(--primary) !important;transform:translateY(-1px)}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover{background:var(--btn-primary-bg-hover) !important;transform:translateY(-1px);box-shadow:var(--sh-brand-strong)}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover{background:var(--surface-2) !important;color:var(--text) !important}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* Нижний лист накрывает левый стек плавающих кнопок (переключатель темы,
   «Наверх»): лист во всю ширину. Под листом они не видны, но остаются в порядке
   табуляции — фокус уезжал бы под баннер (WCAG 2.4.11 Focus Not Obscured). Пока
   согласие не дано, убираем их из потока фокуса; в режимах полосы и карточки
   (ниже) они не перекрыты и возвращаются. */
body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .theme-fab,
body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .to-top{visibility:hidden}
/* Симметрично scroll-padding-top у верхней полосы: пока нижний лист висит,
   переход по якорю и прокрутка к получившему фокус элементу обязаны выносить
   цель ИЗ-ПОД листа, иначе Tab уводит фокус под него (WCAG 2.4.11 Focus Not
   Obscured). Значение — потолок высоты листа: точную высоту CSS не знает,
   она считается под контент. Правило живёт только в режиме листа: у полосы
   и карточки низ экрана свободен. */
@media (max-width:767.98px){
  :root:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show){scroll-padding-bottom:min(80dvh,520px)}
}

/* От 600px кнопки укладываются в одну строку: и широкий лист (планшет в
   альбоме), и десктопная карточка становятся на 54px ниже, то есть закрывают
   меньше страницы. На телефоне остаётся раскладка 50/50 + «Настроить» строкой
   ниже: три кнопки в ряд там не помещаются без обрезки подписей. */
@media (min-width:600px){
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences{flex:0 1 auto}
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences{order:0}
}

/* Вкладка «Управлять согласием» (после выбора) — тоже уводим влево, чтобы не
   висеть над кнопкой отправки формы. */
#cmplz-manage-consent .cmplz-manage-consent{
  left:24px !important; right:auto !important;
  border-top:1px solid var(--line) !important; border-right:1px solid var(--line) !important;
  border-bottom:0 !important; border-left:1px solid var(--line) !important;
  border-radius:var(--r-md) var(--r-md) 0 0 !important;
  background-color:var(--surface) !important; color:var(--text) !important;
  font-family:var(--font-body); font-weight:700; font-size:.85rem;
  box-shadow:var(--sh-md) !important;
}
#cmplz-manage-consent .cmplz-manage-consent:focus-visible{outline:none;box-shadow:var(--ring)}

/* --- ВЫСОКИЙ вьюпорт от планшета и выше: верхняя полоса + резерв ---
   Гейт по ширине (>=768px) оставляет телефонам родной нижний лист: полоса на
   360px шириной не вместит текст и три кнопки, да и палец там у нижнего края.
   Гейт по высоте (>=900px) — там, где форма первого экрана достаёт до низа.
   Высота полосы фиксирована и равна резерву body: длинный перевод уходит во
   внутренний скролл .cmplz-body, а не в рассинхрон резерва.
   До 1200px кнопки идут ПОД текстом: боковая колонка кнопок (~360px) съедала
   бы половину планшетной ширины, и сообщение рвалось бы на 8-10 строк.
   240px — высота, при которой на 768px ширины виден целиком САМЫЙ ДЛИННЫЙ
   из известных текстов: временная редакция §7 (ru 351 знак / uk 340) даёт
   4 строки по 21.7px. Считаем: отступы 32 + шапка 44 + её отступ 8 + кнопки
   44 + их отступ 12 = 140, телу остаётся 100 против 87 занятых. Прежние 232
   были посчитаны под целевую редакцию §2 (ru 318 / uk 301) и оставляли 4px
   запаса — на длинной строке этого не хватало бы. Бюджет текста здесь тоже
   ограничен константой высоты: замер даёт скролл на 383 знаках, то есть
   потолок ~380, как и у широкой полосы. */
@media (min-width:768px) and (min-height:900px){
  :root{--cc-bar-h:240px}
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show{
    inset:0 0 auto 0 !important;
    height:var(--cc-bar-h) !important;
    max-height:var(--cc-bar-h) !important;
    padding-block:16px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    align-items:stretch !important;
    border-top:0 !important; border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important; border-left:1px solid var(--line) !important;
    border-radius:0 0 var(--r-lg) var(--r-lg) !important;
    background-position:bottom left !important;
    box-shadow:0 14px 40px rgba(30,27,58,.18) !important;
    animation-name:cc-in-top;
  }
  @keyframes cc-in-top{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  #cmplz-cookiebanner-container .cmplz-header{grid-column:1 !important;grid-row:1 !important;align-self:center !important;margin-bottom:8px !important}
  /* align-self:stretch обязателен: при start высота элемента = высоте текста,
     overflow-y:auto не срабатывает и длинное сообщение наезжает на кнопки. */
  #cmplz-cookiebanner-container .cmplz-body{grid-column:1 !important;grid-row:2 !important;align-self:stretch !important}
  /* В полосе все три кнопки в одну строку: стопка (как на телефоне) съедала
     бы 100px высоты, и на сообщение оставалась бы полторы строки. */
  #cmplz-cookiebanner-container .cmplz-buttons{
    grid-column:1 !important; grid-row:3 !important;
    margin:12px 0 0 !important; align-self:end !important;
  }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept{flex:0 1 auto}
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences{order:0;flex:0 1 auto}
  /* Резерв под полосу: страница начинается ниже, поэтому не перекрыт НИ ОДИН
     элемент — ни в hero, ни в шапке. Условие на .cmplz-show: после выбора
     баннер получает .cmplz-dismissed + display:none, и резерв снимается.
     Второе условие — .eps-consent-pending на <html>: класс ставит инлайн-скрипт
     в <head> (inc/consent-gate.php) ещё ДО первой отрисовки, пока ответа на
     баннер нет. Без него резерв появлялся только вместе с .cmplz-show, то есть
     после отрисовки, и страница прыгала вниз (CLS 0.24 на 1440x900). */
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show),
  html.eps-consent-pending body{padding-top:var(--cc-bar-h)}
  :root:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show){scroll-padding-top:calc(var(--eps-header-h) + var(--eps-scroll-gap) + var(--cc-bar-h))}
  /* Липкая шапка (base.css, .wp-block-template-part с .site-shell) прилипает к
     top:0 и при прокрутке уезжала бы ПОД полосу. Сдвигаем её на высоту полосы,
     пока согласие не дано, — навигация остаётся видимой и кликабельной. */
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .wp-block-template-part:has(> .site-shell){top:var(--cc-bar-h)}
  /* Полоса вверху — низ экрана свободен, плавающие кнопки видны и доступны. */
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .theme-fab{visibility:visible}
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .to-top.is-visible{visibility:visible}
  /* Раскрытые категории не влезают в полосу — на время настройки она растёт
     вниз (действие пользователя, состояние временное). */
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:has(.cmplz-categories.cmplz-fade-in){
    height:auto !important; max-height:min(72dvh,560px) !important;
  }
}

/* Широкая полоса (>=1200px): кнопки встают сбоку от текста — строка длинная,
   сообщение укладывается в 3-4 строки, и полоса становится вдвое ниже
   планшетной. Потолок высоты здесь жёсткий: кнопка отправки формы обязана
   остаться в первом экране на самом низком вьюпорте режима — при полосе
   152px её низ приходится на y=847 < 900. Мера строки ограничена: во всю
   ширину 1920px текст читался бы «простынёй».
   БЮДЖЕТ ТЕКСТА. Высота полосы — константа (иначе рассинхрон с резервом
   body{padding-top}), поэтому тело вмещает ровно 3 строки: 152 - 32 отступов
   - 40 шапки - 8 её отступа = 71px против 65px занятых. В строке ~117 знаков,
   значит потолок сообщения здесь ~380 знаков. Обе редакции помещаются:
   временная §7 — 351 знак (ru) и 340 (uk), целевая §2 — 318 и 301. Замер:
   скролл появляется на 383 знаках. Если текст когда-нибудь перевалит за 380,
   крутить надо --cc-bar-h, а не размер шрифта: 176px дают четвёртую строку и
   бюджет ~500 знаков, а запас по нижнему краю позволяет дойти до 205px
   (847 + 53 = 900). Сейчас 152 намеренно: лишние пиксели растут вниз на
   КАЖДОЙ десктопной загрузке, а нужны они тексту, которого ни в одной из
   двух согласованных редакций нет. */
@media (min-width:1200px) and (min-height:900px){
  :root{--cc-bar-h:152px}
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show{grid-template-columns:minmax(0,1fr) auto !important}
  /* Шапка через обе колонки — крестик встаёт по правому краю контейнера,
     а не по границе текстовой колонки. */
  #cmplz-cookiebanner-container .cmplz-header{grid-column:1 / -1 !important}
  #cmplz-cookiebanner-container .cmplz-message{max-width:120ch}
  #cmplz-cookiebanner-container .cmplz-body{padding-right:24px}
  #cmplz-cookiebanner-container .cmplz-buttons{
    grid-column:2 !important; grid-row:2 !important;
    margin:0 !important; justify-content:flex-end !important; align-self:center !important;
    max-width:420px;
  }
  /* Раскрытые категории: кнопки возвращаются под текст, полоса растёт вниз. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:has(.cmplz-categories.cmplz-fade-in){grid-template-columns:minmax(0,1fr) !important}
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:has(.cmplz-categories.cmplz-fade-in) .cmplz-buttons{
    grid-column:1 !important; grid-row:3 !important; max-width:560px; margin-top:14px !important;
  }
}

/* --- Широкий экран с НИЗКИМ вьюпортом (от 900px ширины): карточка у левого
   края, по вертикали — по центру экрана.
   Порог по ширине 768, а не 1200: на 1024x768 и 768x800 hero ещё
   одноколоночный, но полноширинный нижний лист ложился там на CTA-кнопки
   (y=714..772 и y=596..652). Ниже 768 карточка уже не имеет смысла: при
   width:min(420px,50vw-80px) она сжалась бы до 160px.
   По горизонтали: левый отступ = колонка плавающих кнопок (.theme-fab /
   .to-top: 18px инсет + 52px кнопка + 18px зазор), правый край (88 + 420 =
   508px) заведомо левее лид-формы (её левый край ~0.51*vw, минимум 612px
   при 1200px).
   По вертикали центр, а не низ: в нижней трети первого экрана у левой колонки
   стоят CTA-кнопки («Бесплатный пробный урок» / «Пройти тест») — на главной
   они на y=681..811, на 1536x864 уже на 642..700. Любая прижатая к низу
   карточка их накрывала бы, а перекрывать ИНТЕРАКТИВНЫЙ элемент нельзя
   (и конверсия, и WCAG 2.4.11). По центру карточка ложится на заголовок и
   лид — текст, который читается сразу после закрытия баннера. Крошки
   (y~190) остаются выше карточки. */
@media (min-width:768px) and (max-height:899.98px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show{
    inset:50% auto auto calc(max(18px,env(safe-area-inset-left)) + 70px) !important;
    transform:translateY(-50%);
    width:min(var(--cc-card-w),calc(50vw - 80px)) !important;
    max-height:min(62dvh,420px) !important;
    padding:18px 20px !important;
    padding-inline:20px !important;
    border:1px solid var(--line) !important;
    border-radius:var(--r-lg) !important;
    box-shadow:var(--sh-lg) !important;
    animation-name:cc-in-side;
  }
  @keyframes cc-in-side{from{opacity:0;transform:translate(-16px,-50%)}to{opacity:1;transform:translateY(-50%)}}
  /* Карточка лежит на заголовке, поэтому подложку делаем чуть прозрачной с
     размытием: текст под ней читается силуэтом, перекрытие выглядит слоем, а
     не «дырой» в вёрстке. 92% непрозрачности — контраст собственного текста
     карточки остаётся AA. Без поддержки backdrop-filter подложка сплошная. */
  @supports (backdrop-filter:blur(2px)){
    #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show{
      background-color:color-mix(in srgb,var(--surface) 92%,transparent) !important;
      backdrop-filter:blur(10px) saturate(1.1);
    }
  }
  /* Карточка сдвинута правее колонки плавающих кнопок и не достаёт до правого
     края (её правый край ≤508px) — левый стек не перекрыт. */
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .theme-fab{visibility:visible}
  body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .to-top.is-visible{visibility:visible}
  /* Сжатый ритм ряда кнопок — только в карточке: её ширина фиксирована
     (420px, из них 378px контента) и от ширины экрана не растёт, поэтому
     запас здесь самый тонкий во всей раскладке. Кириллица длиннее латиницы
     на 15-20%: uk-ряд «Налаштувати + Відхилити + Прийняти» при 10px зазоре
     и 18px отступах давал 379px против 378px доступных — «Прийняти»
     уезжала во второй ряд. 8px зазор + 14px отступ у пилюль (плюс базовое
     правило для текстовой ссылки) дают ряду 63px запаса в свёрнутом
     состоянии и 14px в раскрытом — там подпись меняется на самую длинную
     из всех, «Сохранить выбор» (146px), и запас считаем именно по ней.
     Пилюли остаются 44px высотой, зазор 8px — минимум по touch-spacing. */
  #cmplz-cookiebanner-container .cmplz-buttons{gap:8px !important}
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept{padding-inline:14px !important}
}

/* Узкая карточка (768-999px: её ширина = 50vw-80px, то есть 304-420px) не
   держит три кнопки в строку — возвращаем телефонную раскладку 50/50 +
   «Настроить» строкой ниже. Правило @media(min-width:600px) выше смотрит на
   ширину ЭКРАНА, а здесь важна ширина карточки. */
@media (min-width:768px) and (max-width:999.98px) and (max-height:899.98px){
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept{flex:1 1 calc(50% - 5px)}
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences{order:3;flex:1 1 100%}
}