/*
 * Единый лендинг одиночного курса (шаблон single-eps_course, CPT eps_course).
 * Грузится после base.css; опирается на общие примитивы hero (.hero / .hero-grid /
 * .hero-copy / .hero-lead / .lead-card), чипы (.hero-pills / .hero-pill), бейдж
 * уровня (.level-badge / .chip-*), крошки (.crumbs), ассюрансы (.hero-assure),
 * секции (.section / .sec-head). Здесь — ТОЛЬКО уникальное для сингла: кикер-строка
 * (иконка курса + метка + порог уровня), языковой акцент hero и секция
 * кросс-навигации «Что дальше». Префикс — csingle-*.
 *
 * Per-language акцент — через --lang-accent на корне hero (data-lang), той же
 * палитрой, что «Программа» (program.css) и «Вакансии» (careers.css): единая
 * система цветов языков обучения.
 *
 * @package easy-peasy
 */

/* ===========================================================================
   Плотность hero сингла курса (уплотнение вертикального footprint).
   Цель: ключевой контент и форма выше/у сгиба, крошки — тонкая строка-ориентир,
   а не самостоятельный блок. Всё изолировано классом .hero--course, чтобы НЕ
   задеть standard-course (.hero--sc), легализацию (.hero) и программу
   (.hero--program) — они делят те же примитивы, но свой ритм.
   ---------------------------------------------------------------------------
   1) Главный источник пустот на десктопе: базовая .hero-grid центрирует
      (align-items:center) низкую колонку-копирайт относительно высокой
      лид-формы → большие «дыры» над кикером и под ассюрансами. Прижимаем
      колонки к верху (start) — копирайт стартует сразу под крошками.
   2) Срезаем вертикальный padding секции и межблочный ритм копирайта.
   =========================================================================== */
.hero--course{padding-block:clamp(18px,3vw,38px) clamp(26px,3.8vw,46px);--lang-accent:var(--primary)}
@media(min-width:1024px){
  .hero--course .hero-grid{align-items:start;gap:clamp(28px,3.4vw,44px)}
}

/* Узкий двухколоночный диапазон (1024–1279): базовый clamp H1 считает кегль от
   ШИРИНЫ ОКНА (4.4vw), а заголовок живёт в колонке 1.15fr — на 1024px это ~61px
   в колонке ~520px, и длинное слово упиралось в карточку лид-формы, съедая
   воздух между колонками. Свой clamp привязывает кегль к реальной колонке:
   ~44px на 1024 → ~53px на 1280, дальше подхватывает базовая шкала. */
@media(min-width:1024px) and (max-width:1279.98px){
  .hero--course .hero-copy > h1{font-size:clamp(2.1rem,0.6rem + 3.4vw,2.95rem)}
}

/* Крошки как тонкая строка-ориентир: мельче кегль, приглушённый цвет, компактный
   отступ снизу, без верхнего padding (перебиваем базовый .crumbs padding-block).
   Текущая страница — читаемая, но без «жирного» веса, чтобы не спорить с H1. */
.hero--course .crumbs{padding-block:0;margin-bottom:clamp(12px,1.6vw,16px)}
.hero--course .crumbs ol{font-size:.78rem;gap:5px 6px}
.hero--course .crumbs .crumb-sep{width:12px;height:12px;opacity:.5}
.hero--course .crumbs [aria-current="page"]{font-weight:600;color:var(--text-muted)}

/* Порог входа CEFR («Старт с уровня A2») больше НЕ отрывной угловой бейдж
   (был прижат margin-left:auto к правому краю колонки и читался как случайный).
   Делаем его связанным чипом на идентификационной строке курса — сразу за
   меткой (иконка · метка · [Старт с уровня A2]), одним визуальным языком с
   мета-чипами ниже. Так порог воспринимается как атрибут курса. CSS-only:
   разметку не трогаем, только гасим margin-left:auto и переодеваем в пилюлю. */
.hero--course .csingle-level{
  margin-left:0;gap:8px;padding:4px 6px 4px 12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);box-shadow:var(--sh-sm)
}
.hero--course .csingle-level-lab{
  max-width:none;white-space:nowrap;text-align:left;
  font-size:.76rem;color:var(--text-muted)
}
.hero--course .csingle-level .level-badge{
  height:28px;min-width:34px;padding-inline:10px;font-size:.88rem
}

/* Уплотнённый ритм копирайта: кикер ↔ H1 ↔ лид ↔ чипы ↔ ассюрансы. */
.hero--course .csingle-kicker{margin-bottom:clamp(12px,1.6vw,16px)}
.hero--course .hero-lede{margin-top:clamp(12px,1.6vw,16px)}
.hero--course .csingle-meta{margin-top:clamp(14px,1.8vw,18px)}
.hero--course .hero-assure{margin-top:clamp(14px,1.8vw,18px);padding-top:clamp(14px,1.6vw,16px)}

/* ===========================================================================
   ПЕРВЫЙ ЭКРАН НА УЗКИХ ШИРИНАХ (<1024px) — целевое действие выше сгиба.
   ---------------------------------------------------------------------------
   Диагностика 16.08.2026 (PostHog+GA4, 15.08): /courses/standard-course/ ест 60%
   дневного бюджета, 94% расхода — мобильные; медианная глубина скролла 8,8%,
   НОЛЬ кликов по чему-либо за день. Замер на 393px показал причину: до подъёма
   лид-карточка начиналась на 730px, кнопка отправки — на 1303px, то есть на 166%
   высоты экрана. Выше сгиба не было ни одной кликабельной цели: в шапке до 600px
   скрыта .btn-primary, до 768px — .btn-secondary и утилити-бар с телефоном, а в
   hero кнопок нет в принципе (единственный CTA — submit формы).
   ---------------------------------------------------------------------------
   Решение композиционное, без нового контента: на <1024px порядок ставим тот же,
   что читается на десктопе (там форма справа, визуально на уровне H1) —
   H1 → лид → мета-чипы → ЛИД-ФОРМА → ассюрансы. Ассюрансы («живая речь…») —
   подкрепление, их место под действием, а не перед ним (Hero-Centric: одна
   первичная цель, hero занимает 60–80% сгиба, иерархия на мобильном та же).
   Механика: .hero-grid → flex-колонка с gap:0 (вертикальный ритм задают
   собственные margin-top элементов), .hero-copy → display:contents, чтобы её
   дети стали элементами того же потока и получили order. На ≥1024px всё
   возвращается к исходной двухколоночной сетке — десктоп не меняется.
   =========================================================================== */
@media(max-width:1023.98px){
  /* align-items:stretch обязателен: базовая .hero-grid — это grid с
     align-items:center (вертикальное центрирование колонок), но в flex-колонке
     то же свойство центрирует детей ПО ГОРИЗОНТАЛИ и ужимает их до ширины
     содержимого — H1 и карточка съезжали от левого края (видно с 768px). */
  .hero--course .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero--course .hero-copy{display:contents}
  .hero--course .csingle-kicker{order:1}
  .hero--course .hero-copy > h1{order:2}
  .hero--course .hero-lede{order:3}
  .hero--course .csingle-meta{order:4}
  /* Цена стоит между чипами и формой — последнее, что человек читает перед
     действием, и первое, что он ищет на коммерческой странице. */
  .hero--course .csingle-price{order:5}
  .hero--course .hero-lead{order:6;margin-top:clamp(18px,3vw,26px)}
  .hero--course .hero-assure{order:7;margin-top:clamp(18px,3vw,24px)}
}

/* Уплотнение вертикали до формы на телефонах (<560px): каждый сэкономленный
   блок пикселей — это строка формы, попавшая в первый экран. Трогаем ТОЛЬКО
   плотность, ни один смысловой элемент не скрыт и не обрезан. */
@media(max-width:559.98px){
  /* ПОРЯДОК НА ТЕЛЕФОНЕ: лид уходит ПОД форму (замер 16.08.2026).
     До правки на 393×780 выходило так: шапка 73 + крошки + H1 75 + лид 120 +
     чипы 75 + цена 44 → карточка начиналась на 486, кнопка отправки — на 989,
     то есть на 209px ниже сгиба даже при щедрой высоте окна. Соседняя страница
     (хаб языка) ту же задачу решила иначе и успешно: выше формы стоят только
     H1 и ценовая строка, лид и пиллы идут под ней, и кнопка помещается в экран
     даже на 360×640. Переносим приём сюда, но с одной поправкой — чипы
     остаются НАД формой: у курса про формат первый из них («5 языков на
     выбор») отвечает на вопрос «а мой язык тут есть», и уводить его под кнопку
     нельзя. Лид — развёрнутое пояснение того же самого, ему место под
     действием.
     Нумерация продолжает порядок из блока <1024px, здесь меняются только
     номера лида и чипов. */
  .hero--course .csingle-meta{order:3}
  .hero--course .csingle-price{order:4}
  .hero--course .hero-lead{order:5}
  .hero--course .hero-lede{order:6;margin-top:clamp(18px,3vw,22px)}
  .hero--course .hero-assure{order:7}

  .hero--course{padding-block:8px clamp(24px,5vw,32px)}
  .hero--course .crumbs{margin-bottom:10px}
  /* Лид: с --fs-body-lg (~17px/1.6 → 8 строк, 222px = 28% экрана 393px) на
     базовый корпус. Кегль остаётся выше минимума 16px, длина строки — в
     комфортных 45–60 знаков, но абзац отдаёт ~70px. */
  .hero--course .hero-lede{font-size:1rem;line-height:1.5;text-wrap:pretty}
  /* Мета-чипы: чуть плотнее, чтобы 4 чипа складывались в 2 ровные строки. */
  .hero--course .csingle-meta{gap:7px}
  .hero--course .csingle-meta .hero-pill{padding:6px 11px;font-size:.78rem}
  /* Лид-карточка: сжимаем «шапку» карточки (лента → заголовок → пояснение),
     чтобы первое поле формы поднялось в зону видимости.
     Плотность взята с хаба языка один в один (pages/home.css, блок «бюджет
     первого экрана на телефоне»): она там уже прошла приёмку и держит нижние
     пределы доступности — поля 44px и кнопка 48px (WCAG 2.5.5), чекбокс
     согласия штатный 24px (2.5.8 AA), кегль подписей не ниже 12px. Замер до
     переноса: карточка 615px высотой против 394px у хаба на той же ширине —
     разница шла целиком на воздух, посчитанный под десктоп. */
  .hero--course .lead-card{padding:12px 15px 16px}
  .hero--course .lead-ribbon{margin-bottom:6px;padding-top:5px;padding-bottom:5px}
  .hero--course .lead-card .lead-title{font-size:1rem;line-height:1.18;margin-bottom:3px;text-wrap:balance}
  .hero--course .lead-card .lead-sub{font-size:.82rem;line-height:1.38;margin-bottom:11px}
  .hero--course .lead-grid{gap:9px}
  /* Основной источник воздуха внутри формы — gap самого fieldset (Fluent
     Forms, 15px), а не margin групп. */
  .hero--course .lead-grid fieldset{gap:5px}
  .hero--course .lead-grid .ff-el-group{margin-bottom:0}
  .hero--course .lead-grid .ff-el-input--label{margin-bottom:1px}
  .hero--course .lead-grid .ff-el-input--label label{font-size:.78rem;line-height:1.2}
  .hero--course .lead-grid input[type=text],
  .hero--course .lead-grid input[type=tel],
  .hero--course .lead-grid .ff-el-form-control{min-height:44px;height:44px;padding-top:8px;padding-bottom:8px}
  .hero--course .lead-grid .eps-phone input,
  .hero--course .lead-grid .eps-phone__btn{min-height:44px;height:44px}
  .hero--course .lead-grid .eps-phone__combo{gap:8px}
  .hero--course .lead-grid .eps-phone__hint,
  .hero--course .lead-grid .ff-el-help-message{font-size:.75rem;line-height:1.3;margin-top:2px;margin-bottom:0}
  /* Текст согласия юридический, сокращать его нельзя — только кегль и
     интерлиньяж; чекбокс остаётся штатным 24×24 (WCAG 2.5.8 AA). */
  .hero--course .lead-grid .eps-rodo .ff-el-form-check-label,
  .hero--course .lead-grid .eps-rodo label{font-size:.75rem;line-height:1.25}
  .hero--course .lead-grid .eps-submit{margin-bottom:0}
  .hero--course .lead-grid .ff-btn-submit,
  .hero--course .lead-grid .ff-btn{min-height:48px;height:48px;padding-top:12px;padding-bottom:12px}
  .hero--course .lead-foot-note{font-size:.78rem;line-height:1.35;margin-top:8px}
  /* Подступы к форме: отступы между блоками копи-колонки посчитаны под десктоп,
     на телефоне каждый из них — пиксель, отнятый у кнопки. */
  /* Три чипа обязаны лечь в ОДИН ряд: вторая строка чипов стоит 35px, а на
     390–412px кнопка отправки упирается в кромку экрана с запасом меньше
     этого. Замер: на 390px три чипа при padding 10px не помещались в 358px
     доступных и переносились, на 393px — помещались; сжатие боков до 9px
     и зазора до 5px убирает эту границу — с 390px ряд один.
     375px и 360px сжатие НЕ втягивает: в ru ряду нужно 352,5px, доступно
     343 и 328 — там чипы по-прежнему в двух рядах. В uk ряд короче (323,3px)
     и укладывается в один уже с 360px (перемерено 16.08.2026). Кегль 12px —
     нижний предел для подписей, ниже не опускаемся. */
  .hero--course .csingle-meta{margin-top:10px;gap:5px}
  .hero--course .csingle-meta .hero-pill{padding:5px 9px;font-size:.75rem}
  .hero--course .csingle-price{margin-top:10px;font-size:.9375rem;line-height:1.4}
  .hero--course .hero-lead{margin-top:12px}
  .hero--course .crumbs{margin-bottom:6px;padding-bottom:6px}
  /* Ассюрансы под формой — компактный подвал первого экрана. */
  .hero--course .hero-assure{gap:8px 16px;padding-top:16px}
}

/* ===========================================================================
   ЧИП «5 языков на выбор» и ЦЕНОВАЯ СТРОКА — первый экран курса про формат.
   ---------------------------------------------------------------------------
   Оба элемента появляются только у языконезависимой карточки (см.
   eps_course_is_language_agnostic в inc/courses-data.php). Чип встал на место
   снятого языкового — он ровно там же, первым в ряду мета-чипов, и потому
   оформлен как соседи: та же капсула .hero-pill, отличается лишь тем, что
   несёт акцент темы, а не языка (языка у страницы нет).
   =========================================================================== */
.hero--course .csingle-anypill{
  color:var(--text);
  border-color:color-mix(in srgb, var(--violet) 34%, var(--line));
  background:color-mix(in srgb, var(--violet) 7%, var(--surface));
}
.hero--course .csingle-anypill svg{width:15px;height:15px;color:var(--violet)}

/* Ценовая строка: ранг «факт», а не «сноска». Тот же приём, что у .hero-facts
   на хабе языка, — акцентная линейка слева вместо капсулы: капсулу на первом
   экране путают с кнопкой, а линейка стоит ноль пикселей вертикали.
   tabular-nums не даёт «9 000» скакать по ширине при смене состояния. */
.hero--course .csingle-price{
  margin:clamp(14px,1.8vw,18px) 0 0;
  padding-left:11px;
  border-left:3px solid color-mix(in srgb, var(--primary) 65%, transparent);
  max-width:36rem;
  font-size:clamp(.9375rem,.85rem + .25vw,1.0625rem);
  font-weight:600;
  line-height:1.45;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
}

/* ===========================================================================
   Языковой акцент hero (совпадает с program.css / careers.css).
   Дефолт --lang-accent задан выше, в базовом правиле .hero--course.
   =========================================================================== */
.hero--course[data-lang="polish"]{--lang-accent:#DC2647}
.hero--course[data-lang="english"]{--lang-accent:var(--blue)}
.hero--course[data-lang="german"]{--lang-accent:#A5730A}
.hero--course[data-lang="spanish"]{--lang-accent:var(--violet)}
.hero--course[data-lang="french"]{--lang-accent:var(--green)}
[data-theme="dark"] .hero--course[data-lang="polish"]{--lang-accent:#FF6B70}
[data-theme="dark"] .hero--course[data-lang="german"]{--lang-accent:#E0A93C}

/* Верхний ореол hero перекрашиваем в акцент языка курса (в base — фирменный). */
.hero--course::before{
  background:radial-gradient(circle,color-mix(in srgb,var(--lang-accent) 20%,transparent),transparent 68%)
}

/* ===========================================================================
   Кикер-строка: иконка курса · метка · порог уровня.
   Мелкие элементы (icon 44px, метка .9rem, компактный бейдж) — намеренно
   контрастируют по размеру с крупным H1, чтобы не спорить за внимание.
   =========================================================================== */
.csingle-kicker{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:20px
}
.csingle-icon{
  flex:none;width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--lang-accent) 14%,transparent);color:var(--lang-accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lang-accent) 22%,transparent)
}
.csingle-icon svg{width:24px;height:24px}
.csingle-tag{
  font-family:var(--font-head);font-weight:700;font-size:.9rem;line-height:1.25;
  letter-spacing:.01em;color:var(--text)
}
/* Порог уровня прижимаем вправо; на узких — переносится на свою строку. */
.csingle-level{display:inline-flex;align-items:center;gap:9px;margin-left:auto}
.csingle-level-lab{
  font-size:.74rem;font-weight:600;line-height:1.15;color:var(--text-muted);
  text-align:right;max-width:8ch
}
/* Бейдж уровня в кикере компактнее «лестничного» (base 56×48) — под чип-бар. */
.csingle-level .level-badge{width:auto;min-width:44px;height:34px;padding-inline:12px;font-size:.95rem}

/* ===========================================================================
   Мета-чипы (переиспользуют .hero-pills / .hero-pill): длительность · формат ·
   Онлайн · язык обучения. Убираем нижний отступ .hero-pills (тут строка снизу).
   =========================================================================== */
.csingle-meta{margin:24px 0 0}
.csingle-meta .hero-pill svg{color:var(--text-muted)}
.csingle-meta .hero-pill.is-online,
.csingle-meta .hero-pill.is-online svg{color:var(--green)}
/* Языковой чип: текст — нейтральный (--text, гарантированный AA-контраст),
   связь с языком несёт цветная точка-акцент (декоративная, aria-hidden). */
.csingle-langpill .csingle-langdot{
  width:9px;height:9px;border-radius:50%;background:var(--lang-accent);flex:none
}

/* ===========================================================================
   «Что дальше» — компактная кросс-навигация карточками-ссылками:
   формат/цены (/standard-course/), уровни CEFR (/program/), все курсы
   (/courses/). Вся карточка кликабельна (крупная цель), фокус-кольцо сохранено.
   =========================================================================== */
.csingle-path-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:4px}
@media(min-width:680px){.csingle-path-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.csingle-nav{
  display:flex;flex-direction:column;gap:12px;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);padding:clamp(20px,2.6vw,26px);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.csingle-nav:hover{
  transform:translateY(-4px);box-shadow:var(--sh-lg);
  border-color:color-mix(in srgb,var(--primary) 34%,var(--line))
}
.csingle-nav:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.csingle-nav-ic{
  flex:none;width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)
}
.csingle-nav-ic svg{width:23px;height:23px}
.csingle-nav-h{font-family:var(--font-head);font-weight:800;font-size:1.1rem;line-height:1.25;color:var(--text)}
.csingle-nav-desc{font-size:.92rem;line-height:1.55;color:var(--text-muted);flex:1}
.csingle-nav-more{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:var(--primary)
}
.csingle-nav-more svg{width:16px;height:16px;transition:transform .2s ease}
.csingle-nav:hover .csingle-nav-more svg{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  .csingle-nav,.csingle-nav-more svg{transition:none}
}

/* ===========================================================================
   «О курсе» — редакторская проза (per-course rich-text: p/ul/ol/h3/h4/
   strong/em/a). Первая контентная секция после hero, plain-фон. Одноколоночный
   читаемый набор ~68ch, левое выравнивание под центрированным .sec-head.
   Ритм абзацев/списков/подзаголовков согласован с секциями курса (sc-inc, path).
   Mobile-first, тёмная тема и WCAG AA — на токенах (--text/--blue/--primary).
   =========================================================================== */
.csingle-prose{
  max-width:68ch;
  margin-inline:auto;
  color:var(--text);
  font-size:var(--fs-body);
  line-height:1.75;
  text-align:left;
  text-wrap:pretty;
}
/* Единый вертикальный ритм между блоками прозы; края секции — без лишних отступов
   (внешний ритм задаёт .section padding-block). */
.csingle-prose > * + *{margin-top:1.15em}
.csingle-prose > :first-child{margin-top:0}
.csingle-prose > :last-child{margin-bottom:0}
.csingle-prose p{overflow-wrap:break-word}

/* Лид-абзац: чуть крупнее для editorial-входа, перекликается с .hero-lead. */
.csingle-prose > p:first-child{
  font-size:var(--fs-body-lg);
  line-height:1.6;
  color:var(--text);
}

/* Подзаголовки внутри прозы: крупный отступ сверху (новый смысловой раздел),
   компактный снизу (привязка к своему тексту). Коралловый маркер-акцент связывает
   прозу с системой цветов курса, но не перегружает набор. */
.csingle-prose h3,
.csingle-prose h4{
  font-family:var(--font-head);
  color:var(--text);
  line-height:1.2;
  letter-spacing:-.01em;
  scroll-margin-top:96px;
  overflow-wrap:break-word;hyphens:auto;
}
/* Коралловый маркер якорим к первой строке (absolute), чтобы при переносе
   заголовка на 2+ строки на мобильных он не «уплывал» в вертикальный центр. */
.csingle-prose h3{
  font-size:var(--fs-h3);font-weight:800;
  position:relative;padding-left:1.05em;
}
.csingle-prose h3::before{
  content:"";position:absolute;left:0;top:.5em;
  width:.5em;height:.5em;border-radius:3px;
  background:var(--primary);
}
.csingle-prose h4{font-size:1.125rem;font-weight:700}
.csingle-prose > h3{margin-top:1.9em}
.csingle-prose > h4{margin-top:1.6em}
.csingle-prose > h3 + *,
.csingle-prose > h4 + *{margin-top:.6em}
.csingle-prose > :is(h3,h4):first-child{margin-top:0}

/* Списки: собственные маркеры в акценте, комфортный ритм пунктов, читаемая
   строка. list-style снимаем — рисуем маркеры сами. */
.csingle-prose ul,
.csingle-prose ol{list-style:none;padding-left:0;margin-left:0}
.csingle-prose li{position:relative;padding-left:1.9em;line-height:1.7}
.csingle-prose li + li{margin-top:.6em}
/* Вложенные списки: чуть плотнее и с отступом сверху. */
.csingle-prose li > ul,
.csingle-prose li > ol{margin-top:.6em}

/* Маркер ul — коралловая точка, отцентрованная по первой строке пункта. */
.csingle-prose ul > li::before{
  content:"";position:absolute;left:.3em;top:calc(.85em - .3em);
  width:.5em;height:.5em;border-radius:50%;
  background:var(--primary);
}
/* Маркер ol — фирменный номер в тинт-плашке (перекликается с чипами уровня). */
.csingle-prose ol{counter-reset:csingle-ol}
.csingle-prose ol > li{counter-increment:csingle-ol;padding-left:2.4em}
.csingle-prose ol > li::before{
  content:counter(csingle-ol);
  position:absolute;left:0;top:.08em;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.65em;height:1.65em;padding-inline:.3em;
  font-family:var(--font-head);font-weight:800;font-size:.82em;line-height:1;
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent);
  border-radius:var(--r-sm);
}

/* Акценты внутри текста. strong — вес, а не цвет (сохраняем спокойный набор). */
.csingle-prose strong,
.csingle-prose b{font-weight:800;color:var(--text)}
.csingle-prose em,
.csingle-prose i{font-style:italic}

/* Ссылки: подчёркнуты (не только цветом — WCAG), синий акцент доверия,
   на hover — фирменный коралл. Фокус-кольцо наследуется из base (:focus-visible). */
.csingle-prose a{
  color:var(--blue);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent);
  font-weight:600;
  transition:color .16s ease,text-decoration-color .16s ease;
}
.csingle-prose a:hover{
  color:var(--primary);
  text-decoration-color:currentColor;
}

@media(prefers-reduced-motion:reduce){
  .csingle-prose a{transition:none}
}