/* ============================================================
   base.css
   ============================================================ */
/* base — A.ION-FIT: сброс, каркас, шапка, футер, общие компоненты.
   Цвет/типографика — ТОЛЬКО var(--токен) из tokens.css. Грузится ПОСЛЕ tokens.css. */

/* ------------------------------------------------------------
   1. Сброс (минимальный)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Страховка: горизонтальный скролл не допускается ни при каких условиях */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  font-synthesis: none;
}

img, svg, video, picture { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; }
button { padding: 0; }

/* Ссылки: :where() — нулевая специфичность, любые классы перекрывают */
:where(a) { color: var(--text-link); }
:where(a:hover) { color: var(--text-link-hover); }

/* [hidden] на svg не гасится UA-стилями (SVG-неймспейс) — гасим сами */
svg[hidden] { display: none; }

/* Браузерное [hidden]{display:none} слабее любого авторского display:
   элемент с display:grid/flex (например tabpanel, совмещённый с .grid-2)
   продолжает показываться. Форсируем — иначе неактивная вкладка видна. */
[hidden] { display: none !important; }

/* Зерно: путь относительно out/site.css (base.css сшивается в него) → out/img/.
   (tokens.css задаёт корневой /img/ — для file:// и подпапок нужен относительный) */
:root { --noise-tile: url("./img/noise-128.png"); }

/* Все числа, цены, проценты — табличные цифры */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------------
   2. Каркас секции
   ------------------------------------------------------------ */
/* base: каркас */
.sec { padding-block: var(--section-y); }
.sec--tight { padding-block: var(--section-y-sm); }
.sec--deep {
  background-color: var(--surface-deep);
  background-image: var(--surface-deep-gradient);
}
.sec--full { min-height: 100vh; display: flex; align-items: center; }

.wrap {
  width: 100%;
  /* calc с гаттером — как в dist: полезная ширина ровно var(--container-page) */
  max-width: calc(var(--container-page) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.wrap--content { max-width: calc(var(--container-content) + var(--gutter) * 2); }
.wrap--narrow  { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* ------------------------------------------------------------
   3. Шапка секции (надзаголовок + двухцветный h2)
   ------------------------------------------------------------ */
/* base: шапка секции */
.sec-head { max-width: var(--measure-lead); margin: 0 0 var(--space-8); }
.overline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-secondary); /* на градиенте — только этот или var(--text-heading) */
}
.overline--accent { color: var(--text-accent); } /* ТОЛЬКО внутри .card / на --surface. На градиенте запрещён */
.t2 {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}
.t2__a, .t2__b { display: block; }
.t2__b { color: var(--text-heading); }

.sec-lead {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   4. Кнопки
   ------------------------------------------------------------ */
/* base: кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-6);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: var(--t-color);
}
/* Оранжевая. Лейбл ТОЛЬКО тёмный: --accent-contrast = neutral-900 в обеих темах.
   Белый текст на оранжевом ЗАПРЕЩЁН (3.0:1).
   clip-path: none гасит срез, зашитый в .btn--primary токенов — срез только у .btn--cut. */
.btn--primary { background: var(--accent); color: var(--accent-contrast); clip-path: none; }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.btn--primary:active { background: var(--accent-active); color: var(--accent-contrast); }
/* Фирменный срез угла — там, где он есть в dist (hero, s16, карточки цен).
   Добавляется К .btn--primary. */
.btn--cut {
  border-radius: var(--radius-xs);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
/* Фиолетовая заливка. В dark инвертируется сама — токены action уже это умеют.
   box-shadow: none гасит обводку из .btn--secondary токенов. */
.btn--secondary { background: var(--action); color: var(--action-contrast); box-shadow: none; }
.btn--secondary:hover { background: var(--action-hover); color: var(--action-contrast); }
.btn--secondary:active { background: var(--action-active); color: var(--action-contrast); }
/* Обводка. */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--stroke-thin) var(--border-strong);
}
.btn--ghost:hover { background: var(--action-subtle); color: var(--text-primary); }

/* Фокус — только клавиатурная навигация по кнопкам/ссылкам (мышью
   :focus-visible на них не срабатывает). Текстовые поля исключены: Chromium
   вешает на них кольцо и от клика — заказчик попросил убрать подсветку. */
:where(a, button, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring, var(--violet-700));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:where(input, textarea):focus-visible {
  outline: none; /* и дефолтное кольцо браузера; фокус виден по каретке */
}

/* Текстовая ссылка-CTA с шевроном */
.link-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; text-decoration: none; color: var(--text-link);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-button); letter-spacing: var(--ls-button); text-transform: uppercase;
}
.link-cta:hover { color: var(--text-link-hover); }
.chev {
  display: inline-block; width: .6em; height: .6em; background: currentColor;
  clip-path: polygon(0 0, 28% 0, 100% 50%, 28% 100%, 0 100%, 72% 50%);
}

/* ------------------------------------------------------------
   5. Карточка
   ------------------------------------------------------------ */
/* base: карточка */
.card {
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card--lift { transition: var(--t-transform), var(--t-shadow); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------
   6. Списки с маркерами: «да» — оранжевая галка, «нет» — фиолетовый крестик.
      Красного в контенте НЕТ.
   ------------------------------------------------------------ */
/* base: списки да/нет */
.list-check, .list-no { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.list-check li, .list-no li {
  position: relative;
  padding-inline-start: calc(var(--space-4) + 1em);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.list-check li::before, .list-no li::before {
  position: absolute; inset-inline-start: 0; top: 0;
  font-weight: var(--fw-bold);
  line-height: inherit;
}
.list-check li::before { content: "✓"; color: var(--marker-yes, var(--text-accent)); }
.list-no li::before    { content: "✕"; color: var(--marker-no, var(--text-heading)); }

/* Одиночный маркер вне списка */
.mark-yes, .mark-no { flex: none; font-weight: var(--fw-bold); font-size: var(--fs-h5); line-height: 1.3; }
.mark-yes { color: var(--marker-yes, var(--text-accent)); }
.mark-no  { color: var(--marker-no, var(--text-heading)); }

/* ------------------------------------------------------------
   7. Сетки
   ------------------------------------------------------------ */
/* base: сетки */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
/* Для лент карточек переменного количества */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   8. Пилюля-переключатель (табы, тумблер, чипы).
      Состояние — ТОЛЬКО через aria-атрибуты.
   ------------------------------------------------------------ */
/* base: пилюля-переключатель */
.pill {
  border: var(--stroke-thin) solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  transition: var(--t-color);
}
.pill[aria-selected="true"], .pill[aria-pressed="true"] {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-contrast);
}
@media (max-width: 720px) {
  .pill, .faq-item summary { min-height: 44px; }
  .faq-item summary { display: flex; align-items: center; }
}

/* ------------------------------------------------------------
   9. Skip-link и заглушка
   ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-toast);
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-standard);
  background: var(--action); color: var(--action-contrast); text-decoration: none;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-overline);
}
.skip-link:focus { transform: translateY(0); color: var(--action-contrast); }

/* Заглушка под материал, которого пока нет. Не загрузчик — честный бокс. */
.slot-stub {
  width: 100%; height: 100%; min-height: 180px; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: var(--space-5); border: var(--stroke-thin) dashed var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-sunken);
  color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.45;
}

/* ------------------------------------------------------------
   10. Шапка сайта (стекло, fixed) + навигация + бургер + мобильное меню
   ------------------------------------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-bottom: var(--stroke-hair) solid var(--border);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__in {
  width: 100%;
  max-width: calc(var(--container-page) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
}
.site-header__logo { display: flex; align-items: center; text-decoration: none; }
[data-logo] { display: block; }
.header-spacer { height: var(--header-h); }

.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  transition: var(--t-color);
}
.site-nav a:hover { color: var(--text-heading); }

/* Скролл-спай: активный пункт (app.js ставит aria-current="true") */
.site-nav a[aria-current="true"],
.mobile-nav a[aria-current="true"] {
  color: var(--text-link);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }

.theme-toggle {
  border: 0; cursor: pointer; background: transparent;
  width: 2.75rem; height: 2.75rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  transition: var(--t-color);
}
.theme-toggle:hover { color: var(--text-heading); }

.header-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: var(--space-2) var(--space-5);
  background: var(--action); color: var(--action-contrast);
  text-decoration: none; border-radius: var(--radius-xs);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-overline); letter-spacing: var(--ls-button);
  text-transform: uppercase;
  transition: var(--t-color);
}
.header-cta:hover { background: var(--action-hover); color: var(--action-contrast); }

/* Бургер (виден только ≤720px) */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary);
}
.burger span {
  display: block; width: 18px; height: 2px; background: currentColor;
  position: relative; transition: background var(--dur-fast) var(--ease-standard);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-standard);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Мобильное меню: открытость — только data-open */
.mobile-nav {
  position: fixed; inset: var(--header-h-mobile) 0 auto 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--surface);
  border-bottom: var(--stroke-hair) solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5) var(--space-6);
  display: none; flex-direction: column; gap: var(--space-1);
}
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav a {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--ls-overline); font-size: var(--fs-h4);
  color: var(--text-primary); text-decoration: none;
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm);
  display: flex; align-items: center; min-height: 48px;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: var(--action-subtle); }

@media (max-width: 960px) {
  .site-header { height: var(--header-h-mobile); }
  .header-spacer { height: var(--header-h-mobile); }
}
@media (max-width: 720px) {
  .burger { display: flex; }
  .site-nav { display: none; }
  [data-cta-long] { display: none; }
  [data-logo] { width: 150px; height: auto; }
  .site-header__logo { min-height: 44px; }
}
@media (max-width: 480px) {
  .site-header__in { gap: var(--space-3); padding-inline: var(--space-4); }
  [data-logo] { width: 128px; }
}
@media (max-width: 380px) {
  .site-header__in { gap: var(--space-2); padding-inline: var(--space-3); }
  [data-logo] { width: 108px; }
}
@media (min-width: 721px) {
  /* специфичность не ниже .mobile-nav[data-open="true"] — меню не «зависает» при ресайзе */
  .mobile-nav, .mobile-nav[data-open="true"] { display: none; }
}

/* ------------------------------------------------------------
   11. Футер (тёмная поверхность: sec--deep + surface-deep на самом футере)
   ------------------------------------------------------------ */
.site-footer { border-top: var(--stroke-hair) solid var(--border); }
.site-footer__in { padding-block: var(--section-y-sm); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: var(--grid-gap);
}
.footer-badge { margin-top: var(--space-5); }
.footer-col__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-col__links { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
/* Футер всегда тёмный в обеих темах — примитивы здесь намеренно (SPEC §8.5) */
.footer-col__links a {
  font-size: var(--fs-body-sm);
  text-decoration: none;
  color: var(--violet-200);
  transition: var(--t-color);
}
.footer-col__links a:hover { color: var(--orange-300); }
.footer-note { font-size: var(--fs-caption); color: var(--text-muted); }
.footer-bottom {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: var(--stroke-hair) solid var(--divider);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  color: var(--text-muted);
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* Компактный футер: логотип на всю ширину, три колонки ссылок в 2 ряда,
     ссылки без раздутой высоты. Тач-цель держим через вертикальный padding. */
  .footer-grid { gap: var(--space-6) var(--space-5); }
  .footer-badge { margin-top: var(--space-4); }
  .footer-col__links { margin-top: var(--space-2); gap: 0; }
  .footer-col__links a { padding-block: var(--space-2); min-height: 40px; display: inline-flex; align-items: center; }
  .footer-bottom { margin-top: var(--space-6); padding-top: var(--space-4); }
}

/* ------------------------------------------------------------
   12. Смена темы: глушение переходов (баг Chromium с пересчётом var()).
       Единственное разрешённое !important; класс вешает только app.js.
   ------------------------------------------------------------ */
html.theme-switching, html.theme-switching *,
html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* ============================================================
   s01-hero.css
   ============================================================ */
/* s01 hero */

/* Модификатор секции (свой для s01, см. SPEC §1) */
.sec--hero {
  padding-block: 0;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

/* Верхний блок: занимает свободную высоту, контент по центру */
.hero-main {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  padding-block: var(--space-8);
}

/* Сетка 55/45 */
.hero-grid {
  display: grid;
  grid-template-columns: 11fr 9fr;
  gap: clamp(var(--space-6), 5vw, calc(var(--space-9) + var(--space-2)));
  align-items: center;
}

/* Бейдж на surface */
.hero-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.hero-badge__text {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* H1 построчно */
.hero-title {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}
.hero-title__ln { display: block; }
.hero-title__ln--h { color: var(--text-heading); }

/* Подзаголовок */
.hero-lead {
  margin: var(--space-5) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.hero-lead strong {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Кнопки */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}

/* Фото */
.hero-media {
  justify-self: end;
  width: 100%;
  max-width: 30rem;
}
.hero-photo {
  position: relative;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.hero-photo__frame {
  border-radius: inherit;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunken);
}
.hero-photo__frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hairline-линия с искрой */
.hero-line {
  position: relative;
  height: 1px;
  background: var(--grad-hairline);
  overflow-x: clip;
  overflow-y: visible;
}
.hero-spark {
  position: absolute;
  top: -1px;
  left: -80px;
  width: 72px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  animation: aion-spark 6s var(--ease-inout) 1.2s infinite;
}
@keyframes aion-spark {
  0%        { left: -80px; opacity: 0; }
  6%        { opacity: 1; }
  44%       { opacity: 1; }
  50%, 100% { left: 100%; opacity: 0; }
}

/* Лента формулы */
.hero-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
}
.hero-formula__label {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hero-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.hero-stat__num {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  color: var(--text-primary);
}
.hero-stat__cap {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.hero-formula__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-link);
  transition: var(--t-color);
}
.hero-formula__link:hover { color: var(--text-link-hover); }

/* Планшет: фото после текста, одна колонка */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { justify-self: start; }
}

/* Мобильный */
@media (max-width: 720px) {
  .hero-formula__link { min-height: 44px; align-items: center; }
  /* Основная кнопка + текстовая ссылка «Как проходит работа» — в один ряд (ссылка справа от кнопки) */
  .hero-cta { flex-wrap: nowrap; gap: var(--space-4); }
  .hero-cta > * { min-width: 0; }
}

/* ============================================================
   s01b-why.css
   ============================================================ */
/* s01b why — «Почему прошлые попытки не удержались».
   Двухколоночная: слева тезис, справа визуал «половина работы» (сделано / пропущено). */

.why-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: center;
}
.why-copy { min-width: 0; }
.why-copy .overline { margin: 0; }
.why-copy .t2 { margin: var(--space-4) 0 0; }
.why-lead { margin: var(--space-5) 0 0; max-width: var(--measure-lead); }
.why-lead strong { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* --- Визуал: две половины (сделано / пропущено) --- */
.why-visual { min-width: 0; }
.why-visual__cap {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.why-halves { display: grid; gap: var(--space-3); }
.why-half {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
}
.why-half__pct {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-flat);
}
.why-half__label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.why-half__note {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* Сделанная половина — сплошная фиолетовая плашка со срезом угла (фирменный) */
.why-half--done {
  background: var(--violet-600);
  color: var(--violet-50);
  box-shadow: var(--shadow-md);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}
.why-half--done .why-half__note { color: var(--violet-100); }

/* Пропущенная половина — «призрак»: пунктирная рамка, приглушённый текст */
.why-half--skip {
  background: transparent;
  border: var(--stroke-thin) dashed var(--border-strong);
  color: var(--text-secondary);
}
.why-half--skip .why-half__label { color: var(--text-primary); }

/* Планшет/мобайл: одна колонка, визуал под текстом */
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .why-lead { max-width: none; }
}

/* ============================================================
   s02-manifest.css
   ============================================================ */
/* s02 manifest */
#manifest {
  min-height: 40vh;
  display: flex;
  align-items: center;
}

.manifest-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}

.manifest-row {
  display: block;
}

/* Число 168 — акцент; внутри .surface-deep токен --text-accent
   уже ремапится на контрастный для тёмной полосы оттенок */
.manifest-count {
  color: var(--text-accent);
}

/* Подпись под манифестом — обычный текст (не капс), спокойный тон */
.manifest-sub {
  margin: var(--space-5) 0 0;
  max-width: var(--measure-lead);
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
}

/* ============================================================
   s03-pains.css
   ============================================================ */
/* s03 pains */

.pains-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.pains-quote {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.pains-coda {
  margin: var(--space-7) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.pains-coda strong {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ============================================================
   s04-formula.css
   ============================================================ */
/* s04 formula */

/* Сцена-скроллителлинг: слева sticky-полоса 50/15/10/10/10/5, справа карточки-шаги.
   Ступени полосы — намеренно НЕтематизируемые примитивы (--violet-700…200, --white,
   --neutral-900, --neutral-300): одинаковы в обеих темах, как в dist.
   Полоса не скруглённая (--radius-none) — единственное намеренно жёсткое место сайта.
   Высоты шагов (~250vh сцены) включаются только при живом JS: formula.js ставит
   data-live="true" на [data-s4-scene]. Без JS и при prefers-reduced-motion
   карточки читаются обычным потоком, полоса статична и разрезана. */

.formula-scene {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: start;
}

/* --- Sticky-вьюпорт --- */
.formula-sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--space-9));
}

/* --- Полоса --- */
.formula-bar {
  position: relative;
  height: var(--space-10);
}
.formula-track {
  display: flex;
  height: 100%;
  gap: var(--space-2);
}
.formula-seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  min-width: calc(var(--space-4) + var(--space-1));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    opacity var(--dur-base) var(--ease-standard);
}
/* Ширины без JS — из data-pct; formula.js переопределяет flex-grow по кадрам */
.formula-seg[data-pct="50"] { flex-grow: 50; }
.formula-seg[data-pct="15"] { flex-grow: 15; }
.formula-seg[data-pct="10"] { flex-grow: 10; }
.formula-seg[data-pct="5"]  { flex-grow: 5; }
/* Фиолетовая шкала ступеней */
.formula-seg[data-seg="0"] { background: var(--violet-700); }
.formula-seg[data-seg="1"] { background: var(--violet-600); }
.formula-seg[data-seg="2"] { background: var(--violet-500); }
.formula-seg[data-seg="3"] { background: var(--violet-400); }
.formula-seg[data-seg="4"] { background: var(--violet-300); }
.formula-seg[data-seg="5"] { background: var(--violet-200); }

.formula-seg__num {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--neutral-900);
  transition: opacity var(--dur-base) var(--ease-standard);
}
.formula-seg[data-seg="0"] .formula-seg__num,
.formula-seg[data-seg="1"] .formula-seg__num,
.formula-seg[data-seg="2"] .formula-seg__num { color: var(--white); }

/* Состояния из formula.js.
   Активный сегмент — оранжевый, цифра ТОЛЬКО тёмная (железное правило 2) */
.formula-seg.is-dim { opacity: 0.38; }
.formula-seg.is-active { background: var(--accent); opacity: 1; }
/* Активный процент — тёмный (железное правило 2) и жирнее: бледные по умолчанию, ярче на активном */
.formula-seg.is-active .formula-seg__num { color: var(--neutral-900); font-weight: var(--fw-bold); }
/* Кадр 0: слитая серая полоса. */
.formula-track.is-united .formula-seg { background: var(--neutral-300); }
/* Пока показан бейдж «100% работы над результатом» (слитый/финальный кадр), цифры
   сегментов прячем — иначе 50%/5% торчат из-за плашки. Появляются при развороте полосы. */
.formula-track.is-badge .formula-seg__num { opacity: 0; }

/* --- Бейдж «100% результата» --- */
.formula-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-raised);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.formula-badge.is-on { opacity: 1; }

/* --- Легенда под полосой: ОДНА подпись — активное слово, меняется синхронно
       с подсветкой сегмента (одинаково на десктопе и мобиле). --- */
.formula-legend {
  display: block;
  margin-top: var(--space-5);
  min-height: 1.7em; /* фикс высоты — подпись меняется, не прыгает */
}
.formula-leg {
  display: none; /* показываем только активную (см. is-active ниже) */
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  letter-spacing: var(--ls-h4);
  text-transform: uppercase;
  transition: var(--t-color);
}
.formula-leg__num { display: none; } /* только слово, без процента */
.formula-leg.is-active { display: inline-flex; }
/* до входа в сцену активного нет — показываем первую подпись */
.formula-legend:not(:has(.is-active)) .formula-leg:first-child { display: inline-flex; }

/* Ридаут удалён: под полосой оставляем только строку слов (легенду). */

/* --- Колонка шагов --- */
.formula-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.formula-step {
  display: flex;
  align-items: center;
  scroll-margin-block-start: calc(var(--header-h) + var(--space-4));
}
/* Высоты шагов — только при живой сцене (formula.js). Держим их близко к высоте
   карточки: этого хватает, чтобы сегмент успевал подсветиться при скролле, но без
   полупустых экранов между карточками. Шаг 1 «Тренировки» чуть выше — держится два кадра. */
.formula-scene[data-live="true"] .formula-step[data-step] { min-height: 24vh; }
.formula-scene[data-live="true"] .formula-step[data-step="0"] { min-height: 26vh; }
.formula-scene[data-live="true"] .formula-step[data-step="1"] { min-height: 34vh; }
.formula-scene[data-live="true"] .formula-step[data-step="7"] { min-height: 28vh; }

/* --- Карточки опор --- */
.formula-card {
  width: 100%;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.formula-card.is-away { opacity: 0.55; }
.formula-card--final { background: var(--surface-cool); }

.formula-card__pct {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-flat);
  color: var(--text-accent-lg);
}
.formula-card__pct--total { color: var(--text-heading); }
.formula-card__name {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  letter-spacing: 0.05em; /* как в dist; токена под этот трекинг нет */
  text-transform: uppercase;
  color: var(--text-primary);
}
.formula-card__text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.formula-card__aside {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: var(--stroke-hair) dashed var(--border);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-heading);
}
/* .formula-card__punch удалён: финальная карточка теперь .formula-card__text + .formula-card__aside. */

/* --- Мобайл: полоса 44px липнет под шапкой, легенда под полосой --- */
@media (max-width: 720px) {
  .formula-scene { display: block; }

  .formula-sticky {
    position: sticky;
    top: var(--header-h-mobile, var(--header-h, 64px));
    z-index: var(--z-sticky);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-2) var(--gutter);
    background: var(--surface-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    backdrop-filter: var(--blur-glass);
  }

  .formula-bar { height: 2.75rem; } /* 44px — шкала = тач-цель */
  /* Проценты видны и на мобиле — мелким кеглем, чтобы влезали даже в узкую ячейку 5% */
  .formula-seg__num { font-size: 0.625rem; letter-spacing: 0; }

  /* Легенда — та же одна меняющаяся подпись, что и на десктопе (базовые правила выше),
     на мобиле только уменьшаем отступ под липкой полосой. */
  .formula-legend { margin-top: var(--space-3); }

  .formula-steps { margin-top: var(--space-5); }
  .formula-scene[data-live="true"] .formula-step[data-step] { min-height: 0; }
}

/* --- Reduced motion: сцена без sticky, карточки обычным потоком --- */
@media (prefers-reduced-motion: reduce) {
  .formula-sticky { position: static; }
  .formula-scene[data-live="true"] .formula-step[data-step] { min-height: 0; }
}

/* ============================================================
   s05-price-fork.css
   ============================================================ */
/* s05 price-fork */

/* В dist верхний отступ секции уменьшен до --space-2 (нижний остаётся section-y-sm
   из .sec--tight). Локальный класс грузится после base.css и уточняет только верх. */
.price-fork-sec { padding-block-start: var(--space-2); }

.price-fork-hairline {
  height: var(--stroke-hair);
  background: var(--grad-hairline);
  margin-bottom: var(--space-6);
}

.price-fork-line {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.price-fork-range {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.price-fork-link {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-hair);
  text-underline-offset: 3px;
}
.price-fork-link:hover { color: var(--text-link-hover); }

/* ============================================================
   s06-online.css
   ============================================================ */
/* s06 online */

/* Секция «Как устроена онлайн-работа». Пять шагов — стили .online-steps / .online-step2* ниже. */

/* --- Пять шагов онлайн-работы: вертикальный нумерованный список (заменил 3 карточки) --- */
.online-steps {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.online-step2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-5);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: var(--stroke-hair) solid var(--divider);
}
.online-step2:last-child { padding-bottom: 0; border-bottom: 0; }
.online-step2__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 0.9;
  color: var(--text-heading);
  min-width: 2ch;
}
.online-step2__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.online-step2__text {
  margin: 0;
  max-width: var(--measure-prose);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Абзац в колонках «В зале»/«Онлайн» (заменил маркированный список) */
.online-col__text {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
/* Короткая фраза под колонками */
.online-deep__caption {
  margin: var(--space-6) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* Приватность — одна фраза вместо списка галочек */
.online-shy__text {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* Тёмный блок-возражение «А как ты проследишь за техникой…» */
.online-deep {
  margin-top: var(--space-9);
  background-color: var(--surface-deep);
  background-image: var(--surface-deep-gradient);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-6), 4vw, var(--space-9));
}
.online-deep__overline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-muted);
}
.online-deep__title {
  margin: var(--space-3) 0 0;
  max-width: var(--measure-display);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}
.online-deep__cols { margin-top: var(--space-6); }

/* Колонки «В зале» / «Онлайн» — фон violet-900 намеренно одинаков в обеих темах, как в dist */
.online-col {
  background: var(--violet-900);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.online-col__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Колонки «В зале»/«Онлайн» — теперь абзац .online-col__text (см. выше). */

/* Абзац-вывод про честное ограничение */
.online-deep__note {
  margin: var(--space-6) 0 0;
  max-width: var(--measure-lead);
  padding-inline-start: var(--space-5);
  border-inline-start: var(--stroke-heavy) solid var(--border-accent);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

/* Карточка «Мне неловко снимать себя» */
.online-shy { margin-top: var(--space-7); }
.online-shy__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h4);
  text-transform: uppercase;
  color: var(--text-primary);
}
/* Приватность — теперь одна фраза .online-shy__text (см. выше). */

/* ============================================================
   s07-first-week.css
   ============================================================ */
/* s07 first-week */

/* Одна карточка-таймлайн: строки разделены hairline, как в dist */
.first-week-timeline {
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.first-week-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--stroke-hair) solid var(--divider);
}
.first-week-row:last-child { border-bottom: 0; }

/* Метка дня: h6-размер, uppercase, фиолетовый заголовочный; tabular-nums даёт .num */
.first-week-day {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-heading);
}

.first-week-step {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.first-week-text {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ============================================================
   s08-training.css
   ============================================================ */
/* s08 training */
.training-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.training-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.training-row--focus {
  box-shadow: var(--shadow-md);
}
.training-row__num {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
}
.training-row__body {
  padding: var(--space-5) var(--space-6);
}
.training-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.training-row__text {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.training-note {
  margin: var(--space-4) 0 0;
  background: var(--surface-cool);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-primary);
}
.training-freq {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ============================================================
   s09-difference.css
   ============================================================ */
/* s09 difference */

/* Флекс-колонка нужна, чтобы details (в DOM — до таблицы, ради селектора ~)
   визуально встал под таблицу через order */
.difference-wrap {
  display: flex;
  flex-direction: column;
}

.difference-head {
  margin-bottom: var(--space-7);
}

/* Карточка-таблица сравнения */
.difference-table {
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.difference-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.difference-row + .difference-row {
  border-top: var(--stroke-hair) solid var(--divider);
}

.difference-cell {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
}

.difference-cell--no {
  background: var(--bg);
}

.difference-cell--yes {
  border-inline-start: var(--stroke-hair) solid var(--divider);
}

.difference-mark {
  flex: none;
  font-weight: var(--fw-bold);
}

.difference-cell--no .difference-mark { color: var(--marker-no); }
.difference-cell--yes .difference-mark { color: var(--marker-yes); }

.difference-text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.difference-cell--yes .difference-text {
  color: var(--text-primary);
}

/* Скрытые шесть строк: без JS раскрываются нативным details */
.difference-more ~ .difference-table .difference-row--extra { display: none; }
.difference-more[open] ~ .difference-table .difference-row--extra { display: grid; }

.difference-more {
  order: 2;
  align-self: flex-start;
  margin-top: var(--space-6);
}

.difference-more-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--action);
  box-shadow: inset 0 0 0 var(--stroke-thin) var(--border-strong);
  cursor: pointer;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  transition: var(--t-color);
}

.difference-more-toggle::-webkit-details-marker { display: none; }

.difference-more-toggle:hover {
  background: var(--action-subtle);
}

.difference-more-open { display: none; }
.difference-more[open] .difference-more-open { display: inline; }
.difference-more[open] .difference-more-closed { display: none; }

@media (max-width: 720px) {
  .difference-row {
    grid-template-columns: 1fr;
  }
  .difference-cell--yes {
    border-inline-start: 0;
  }
}

/* ============================================================
   s11-about.css
   ============================================================ */
/* s11 about */

/* Сетка 40/60: слева портрет, справа текст. Гаттер — как в dist: 2rem → 4.5rem */
.about-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(var(--space-6), 5vw, calc(var(--space-8) + var(--space-5)));
  align-items: start;
}

/* Портрет: рамка с тенью, внутри — срез левого нижнего угла */
.about-media { max-width: 26rem; }
.about-portrait {
  position: relative;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.about-portrait-clip {
  border-radius: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface-sunken);
}
.about-portrait-clip picture {
  display: block;
  width: 100%;
  height: 100%;
}
.about-portrait-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Текст */
.about-p {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.about-body .t2 + .about-p { margin-top: var(--space-5); }

/* Карточка «Дипломов на стену у меня нет» */
.about-card { margin-top: var(--space-6); }
.about-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-h4);
  text-transform: uppercase;
  color: var(--text-primary);
}
.about-card-text {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Полоса с главным вопросом системы */
.about-question {
  margin-top: var(--space-9);
  border-block: var(--stroke-hair) solid var(--divider);
  padding-block: var(--space-8);
}
.about-question-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}
.about-question-b { color: var(--text-heading); }
.about-question-note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   s12-pricing.css
   ============================================================ */
/* s12 pricing */

/* Ряд управления: табы формата + тумблер отчёта */
.pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
}
.pricing-tabs,
.pricing-report {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Пояснение скидки за отчёт */
.pricing-note {
  margin: 0 0 var(--space-6);
  max-width: var(--measure-lead);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Карточка тарифа: колонка, чтобы приписки прижимались к низу */
.pricing-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
}
/* Выделенный тариф — толстая оранжевая рамка и тень погуще, как в dist */
.pricing-card--featured {
  border: var(--stroke-bold) solid var(--border-accent);
  box-shadow: var(--shadow-md);
}

.pricing-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.pricing-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  letter-spacing: 0.05em; /* как в dist: разрядка капса имён тарифов */
  text-transform: uppercase;
  color: var(--text-heading);
}
/* Частота тренировок — приписка под названием тарифа (перенесена из «1-2/3-4»,
   раньше висевших в имени). Мельче и не капсом, акцентным цветом — визуально
   отличается от заголовка. */
.pricing-card__freq {
  margin: calc(var(--space-1) + 2px) 0 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.pricing-badge {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  border: var(--stroke-hair) solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: calc(var(--space-1) / 2) var(--space-3);
}

.pricing-card__price {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-flat);
  color: var(--text-primary);
}
.pricing-card__per {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.pricing-card__cycle {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.pricing-card__list { margin-top: var(--space-5); }

/* Акцентная приписка «Зал не нужен…» — над ней пунктирная линия */
.pricing-card__note {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--stroke-hair) dashed var(--border);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-accent);
}

/* Мелкие приписки */
.pricing-card__fine {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-muted);
}
.pricing-card__fine--push {
  margin-top: auto;
  padding-top: var(--space-4);
}
.pricing-card__fine--rule { border-top: var(--stroke-hair) dashed var(--border); }

/* Низ секции: кнопка квиза + альтернатива */
.pricing-footer {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}
.pricing-alt {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.pricing-alt-link {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-hair);
  text-underline-offset: 3px;
}
.pricing-alt-link:hover { color: var(--text-link-hover); }

/* ============================================================
   s13-offline.css
   ============================================================ */
/* s13 offline */
.offline-panel {
  background: var(--surface-cool);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-6), 4vw, var(--space-9));
}

.offline-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}

.offline-lead {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.offline-format {
  margin-top: var(--space-6);
}

.offline-format-title {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-h4);
  color: var(--text-primary);
}

.offline-format-text {
  margin: var(--space-3) 0 0;
  max-width: var(--measure-prose);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.offline-note {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.offline-note a {
  color: var(--text-link);
  text-decoration-thickness: var(--stroke-hair);
  text-underline-offset: 3px;
  transition: var(--t-color);
}

.offline-note a:hover {
  color: var(--text-link-hover);
}

/* ============================================================
   s14-fit.css
   ============================================================ */
/* s14 fit */

/* Заголовок карточки: h6-размер, uppercase — как в dist */
.fit-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6);
  letter-spacing: 0.05em; /* как в dist */
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Локальный список вместо base .list-check/.list-no:
   контент требует маркеры-спаны с role="img" и aria-label — как в dist */
.fit-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
/* Висячий маркер, НЕ flex: в flex-контейнере текстовые узлы вокруг <span class="num">
   становятся отдельными flex-элементами и текст разрывается на колонки. */
.fit-list li {
  position: relative;
  padding-left: 1.7em;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* «Да» — оранжевая галка, «нет» — фиолетовый крестик. Красного нет */
.fit-mark {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--fw-bold);
}
.fit-mark--yes { color: var(--marker-yes, var(--text-accent)); }
.fit-mark--no  { color: var(--marker-no, var(--text-heading)); }

/* Медицинский дисклеймер под hairline-разделителем */
.fit-note {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--stroke-hair) solid var(--divider);
}
.fit-note p {
  margin: 0;
  max-width: var(--measure-prose);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ============================================================
   s15-faq.css
   ============================================================ */
/* s15 faq */

/* Чипы-фильтры: вид — .pill из base, состояние — только aria-pressed (app.js) */
.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

.faq-list {
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-item {
  border-bottom: var(--stroke-hair) solid var(--divider);
}
.faq-item:last-child {
  border-bottom: 0;
}

.faq-item summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--text-primary);
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  min-width: 0;
}

.faq-plus {
  flex: none;
  color: var(--text-accent);
  font-size: var(--fs-h4);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-item[open] .faq-plus {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  max-width: var(--measure-prose);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .faq-item summary {
    min-height: 44px;
    align-items: center;
  }
}

/* ============================================================
   s16-start.css
   ============================================================ */
/* s16 start */

#start {
  position: relative;
  overflow: hidden;
}

/* Фоновое фото на всю секцию */
.start-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.start-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.start-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ровное затемнение поверх фото: surface-deep с непрозрачностью 58%, как в dist */
.start-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--surface-deep);
  opacity: .58;
}

/* Плюс градиентный скрим к низу секции */
.start-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grad-scrim-deep);
}

.start-inner {
  position: relative;
  z-index: var(--z-raised);
  text-align: center;
}

/* Заголовок размера h1, построчно; внутри .surface-deep
   --text-primary = violet-50, --text-secondary = violet-200 в обеих темах — как в dist */
.start-title {
  margin: 0 auto;
  max-width: var(--measure-display);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}

.start-title__ln {
  display: block;
}

.start-title__ln--soft {
  color: var(--text-secondary);
}

.start-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Вторичная кнопка-обводка на тёмном фото.
   --violet-300 намеренно одинаков в обеих темах (рамка поверх фото), как в dist. */
.start-btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 var(--stroke-thin) var(--violet-300);
}

/* --border внутри .surface-deep — полупрозрачный светлый токен, работает в обеих темах */
.start-btn-outline:hover {
  background: var(--border);
}

.start-note {
  margin: var(--space-8) auto 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-caption);
  line-height: 1.45;
  letter-spacing: var(--ls-caption);
  color: var(--text-muted);
}

/* ============================================================
   quiz.css
   ============================================================ */
/* quiz — start.html («Подобрать формат») */

/* Каркас страницы */
.quiz { min-height: calc(100vh - var(--header-h)); }
.quiz-wrap {
  width: 100%;
  max-width: calc(var(--container-prose) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-y-sm) var(--section-y);
}

/* Всё, что скрыто атрибутом hidden, скрыто и у flex/grid-контейнеров */
.quiz [hidden] { display: none; }

/* Заголовок */
.quiz-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}
.quiz-title__a, .quiz-title__b { display: block; }
/* Кратка над Й у второй строки выступает выше капители — даём ей запас,
   иначе она наезжает на первую строку (Oswald + русская диакритика). */
.quiz-title__b { color: var(--text-heading); padding-top: 0.2em; }

/* Прогресс */
.quiz-progress { margin-top: var(--space-7); }
.quiz-progress__track {
  height: 0.25rem;
  background: var(--bg-subtle);
  overflow: hidden;
}
.quiz-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.quiz-progress__bar[data-p="1"] { width: 25%; }
.quiz-progress__bar[data-p="2"] { width: 50%; }
.quiz-progress__bar[data-p="3"] { width: 75%; }
.quiz-progress__bar[data-p="4"] { width: 100%; }
.quiz-progress__counter {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-muted);
}

/* Вопрос */
.quiz-q {
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.quiz-q__legend { padding: 0; }
.quiz-q__title {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h4);
  color: var(--text-primary);
}
/* Заголовок — программная цель фокуса при смене вопроса (не интерактивный): обводки не рисуем. */
.quiz-q__title:focus { outline: none; }
.quiz-q__opts {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

/* Вариант ответа: радио скрыто, «кнопкой» служит подпись */
.quiz-opt { position: relative; display: block; }
.quiz-opt__input {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.quiz-opt__label {
  display: block;
  min-height: 44px;
  background: var(--surface);
  border: var(--stroke-thin) solid var(--border-input);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--t-color);
}
.quiz-opt:hover .quiz-opt__label { border-color: var(--action); }
.quiz-opt__input:checked + .quiz-opt__label {
  border-color: var(--action);
  background: var(--action-subtle);
}
.quiz-opt__input:focus-visible + .quiz-opt__label {
  outline: 3px solid var(--focus-ring, var(--violet-700));
  outline-offset: 3px;
}

/* Экран результата: карточка со срезанным углом (двухслойно — тень не режется клипом) */
.quiz-results { margin-top: var(--space-7); }
.quiz-card {
  position: relative;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}
.quiz-card__inner {
  border-radius: inherit;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
  background: var(--surface);
  border: var(--stroke-hair) solid var(--border);
  padding: var(--space-7);
}
.quiz-card__name {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--text-primary);
}
.quiz-card__price {
  margin: var(--space-5) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.quiz-card__month {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-flat);
  color: var(--text-primary);
}
.quiz-card__period {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.quiz-card__cycle {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.quiz-notes {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.quiz-note {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.quiz-note__dot { flex: none; color: var(--marker-neutral); }
.quiz-card__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.quiz-result__foot {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-muted);
}

/* Нижние кнопки: Назад / Пройти заново */
.quiz-nav {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.quiz-nav__btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: var(--space-2) 0;
  color: var(--text-link);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  transition: var(--t-color);
}
.quiz-nav__btn:hover { color: var(--text-link-hover); }

/* CTA-финал для режима без JS */
.quiz-cta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .quiz-nav__btn { min-height: 44px; }
}