/* ==========================================================================
   Метод Карпович: каркас сайта, прототип 2026-10
   Визуал ЖИВОГО сайта karpovichlogoped.ru: молочно-кремовый фон, фиолет
   (бренд, панели), мёд (главная кнопка, акценты), сирень (мягкие плашки),
   Manrope и Inter, кнопки-таблетки с плотной нижней тенью.
   Старый вариант (лендинг v4: invitro, coral, navy): style.v4-backup.css.
   Имена переменных остались прежними (--navy, --invitro, --coral): они
   теперь указывают на цвета живого сайта, чтобы разметка не менялась.

   Mobile-first: базовые стили для 375 px, расширение через min-width
   (640, 900, 1100). Минимальный тап 44 px. Контраст не ниже AA.

   ОГЛАВЛЕНИЕ (поиск по номеру раздела)
    1. Шрифты
    2. Токены (:root)
    3. База и типографика
    4. Раскладка: container, section, grid, split, stack
    5. Кнопки: .btn, .btn--primary, .btn--secondary, .btn--link
    6. Шапка и меню: .site-header, .nav, .nav-toggle
    7. Липкая кнопка на телефоне: .sticky-cta
    8. Карточки: .card, .phrase, .program, .pos
    9. Плитки фактов: .facts / .fact
   10. Аккордеон: details.acc
   11. Шкала-таблица: .scale
   12. Плашка «блок-дверь»: .door
   13. Плашка-проба и пометки: .callout, .tag, .pill
   14. Тёмные полосы: .band
   15. Подвал: .site-footer
   16. Служебное для прототипа: .proto-panel, .proto-flag, .proto-zone
   17. Утилиты

   ЧТО КОПИРОВАТЬ ДРУГИМ СТРАНИЦАМ
   Шапка, подвал и липкая кнопка берутся дословно из _шаблон-страницы.html.
   Каталог всех компонентов с разметкой: _каталог-компонентов.html.
   ========================================================================== */


/* ---------- 1. Шрифты ----------
   Файлы в fonts/ содержат только кириллицу. Латиница и цифры берутся из
   Google Fonts (ссылка в <head>), а без интернета из системного шрифта.
   Caveat только для подписи Виктории (.signature). */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-podpis.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* ---------- 2. Токены ----------
   Значения взяты из src/styles/tokens.css живого сайта. */
:root {
  --white: #FFFFFF;
  --milk: #FBF8F3;        /* фон страницы */
  --cream: #F4EEE3;       /* чередующиеся секции, подвал */
  --ink: #241B33;         /* текст, заголовки */
  --violet: #6D3CC9;      /* бренд, тёмные панели */
  --violet-d: #50249E;
  --violet-lit: #7848D4;
  --honey: #F4B62C;       /* главная кнопка, акценты */
  --honey-lit: #FFD569;   /* акцент на фиолете */
  --honey-d: #C9860F;     /* нижняя тень кнопки */
  --honey-tint: #FFF3D1;
  --lilac: #D9C7F2;       /* мягкие плашки */
  --tint: #F1EAFB;

  /* старые имена, указывающие на цвета живого сайта */
  --navy: var(--ink);
  --invitro: var(--violet);
  --coral: var(--honey);
  --mist: var(--cream);
  --border: #E0D4BF;
  --sky-soft: var(--lilac);
  --invitro-ink: var(--violet);       /* ссылки и eyebrow: 6.3:1 на белом, 5.4:1 на кремовом */
  --coral-action: var(--honey);       /* фон главной кнопки; текст на нём чернильный, 9:1 */
  --coral-action-hover: #FFC247;
  --text: var(--ink);
  --text-2: #5E5670;                  /* 6.6:1 на белом, 5.4:1 на кремовом */

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* тени на базе чернильно-фиолетового 52,36,96 */
  --sh-1: 0 1px 2px rgba(52,36,96,.04), 0 3px 8px rgba(52,36,96,.05);
  --sh-2: 0 2px 4px rgba(52,36,96,.05), 0 10px 24px rgba(52,36,96,.08);
  --sh-3: 0 4px 10px rgba(52,36,96,.07), 0 22px 48px rgba(52,36,96,.14);
  --sh-coral: 0 12px 26px -12px rgba(201,134,15,.55);
  --sh-violet: 0 14px 32px -12px rgba(109,60,201,.5);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;

  --f-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-script: 'Caveat', 'Segoe Script', cursive;

  --page: 1180px;
  --gutter: 20px;
  --header-h: 64px;
}


/* ---------- 3. База и типографика ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--milk);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--invitro-ink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
::selection { background: var(--lilac); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: var(--s2); top: -64px; z-index: 300;
  background: var(--navy); color: var(--white); padding: 12px 16px;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s2); color: var(--white); }

/* Заголовки. Размеры растут через clamp, отдельные точки не нужны. */
.h1, .h2, .h3 { font-family: var(--f-display); color: var(--ink); letter-spacing: -.02em; text-wrap: balance; }
.h1 { font-size: clamp(32px, 7vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; }
.h2 { font-size: clamp(27px, 5vw, 46px); line-height: 1.08; font-weight: 800; }
.h3 { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--f-body); font-size: 12px; line-height: 1.3; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--invitro-ink);
}
.lead { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.55; color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: 14px; line-height: 1.5; }
.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Длинный текст: абзацы по 1 или по 3 и более предложения (правило сайта). */
.prose > * + * { margin-top: var(--s2); }
.prose p { max-width: 66ch; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: 8px; }

.signature { font-family: var(--f-script); font-weight: 600; font-size: 34px; line-height: 1; color: var(--violet); }


/* ---------- 4. Раскладка ---------- */
.container { width: 100%; max-width: calc(var(--page) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--s6); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: var(--s5); }
.section__head { max-width: 760px; margin-bottom: var(--s4); display: grid; gap: 12px; }
.section__foot { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.grid { display: grid; gap: var(--s2); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.split { display: grid; gap: var(--s4); align-items: center; }

.stack > * + * { margin-top: var(--s2); }
.stack--lg > * + * { margin-top: var(--s3); }

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid { gap: var(--s3); }
}
@media (min-width: 900px) {
  :root { --header-h: 72px; }
  .section { padding-block: var(--s7); }
  .section--tight { padding-block: var(--s6); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1.1fr .9fr; gap: var(--s6); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--rev > :first-child { order: 2; }
}


/* ---------- 5. Кнопки ----------
   Главная кнопка страницы одна: .btn--primary (coral). Вторая дверь:
   .btn--secondary. Третья: .btn--link. Тап не меньше 48 px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-full);
  font-family: var(--f-body); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center;
  text-decoration: none; border: 2px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn { font-weight: 600; border-width: 1.5px; }
.btn--primary { background: var(--honey); color: var(--ink); box-shadow: 0 4px 0 var(--honey-d), var(--sh-coral); }
.btn--primary:hover { background: var(--honey); color: var(--ink); transform: translateY(2px); box-shadow: 0 2px 0 var(--honey-d), var(--sh-coral); }
.btn--primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--honey-d); }
.btn--secondary { background: var(--violet); color: var(--white); box-shadow: 0 4px 0 var(--violet-d), var(--sh-violet); }
.btn--secondary:hover { background: var(--violet); color: var(--white); transform: translateY(2px); box-shadow: 0 2px 0 var(--violet-d), var(--sh-violet); }
.btn--secondary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--violet-d); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }

/* текстовая ссылка со стрелкой, стрелка нарисована границами */
.btn--link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
  font-weight: 600; color: var(--invitro-ink); text-decoration: underline; text-decoration-thickness: 1.5px;
}
.btn--link::after {
  content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.btn--link:hover { color: var(--violet-d); }

/* на тёмном фоне */
.on-dark .btn--secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); box-shadow: none; }
.on-dark .btn--secondary:hover { background: rgba(255,255,255,.12); color: var(--white); transform: none; box-shadow: none; }
.on-dark .btn--link { color: var(--white); }
.on-dark .btn--link:hover { color: var(--honey-lit); }

.btn-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) { .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; } }


/* ---------- 6. Шапка и меню ----------
   На телефоне: логотип и бургер. Пять пунктов уходят в выпадающую панель.
   От 1100 px: пункты в строку, справа кнопка «Подобрать программу».
   Без JS (класс no-js на <html>) пункты видны всегда, в строку с переносом. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,248,241,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); min-height: 44px; min-width: 0; }
.logo__mark { flex: none; width: 34px; height: 34px; }
.logo__name { display: flex; flex-direction: column; font: 800 15px/1.15 var(--f-display); color: var(--ink); }
.logo__name small { display: block; margin-top: 1px; font: 500 13px/1.3 var(--f-body); color: var(--text-2); }
@media (max-width: 479px) { .logo__name small { display: none; } .logo__name { font-size: 13px; } }
@media (max-width: 339px) { .logo__name { display: none; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--white);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s, background-color .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav__link:hover { background: var(--cream); color: var(--ink); }
.nav__link[aria-current="page"] { background: var(--tint); color: var(--violet-d); }
.nav__cta { display: none; }

/* мобильная панель меню (только когда JS работает) */
.js .nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: var(--s1) var(--gutter) var(--s2); background: var(--white);
  border-bottom: 1px solid var(--border); box-shadow: var(--sh-3);
}
.js .nav.is-open { display: flex; }
.js .nav__link { border-radius: var(--r-sm); min-height: 52px; font-size: 17px; color: var(--navy); border-bottom: 1px solid var(--border); }
.nav .nav__cta { margin-top: var(--s1); }
.js .nav.is-open .nav__cta { display: flex; }

.no-js .nav-toggle { display: none; }
.no-js .site-header__inner { flex-wrap: wrap; padding-block: 8px; }

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .js .nav, .nav {
    display: flex; position: static; flex-direction: row; align-items: center; gap: 4px;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .js .nav__link { min-height: 44px; font-size: 15px; color: var(--text-2); border-bottom: 0; border-radius: var(--r-full); }
  .js .nav__link { color: var(--ink); }
  .js .nav__link:hover { color: var(--ink); }
  .js .nav__link[aria-current="page"] { color: var(--violet-d); }
  .nav .nav__cta, .js .nav .nav__cta { display: inline-flex; margin: 0 0 0 var(--s1); }
}


/* ---------- 7. Липкая кнопка на телефоне ----------
   Разметка из шаблона: <div class="sticky-cta" data-sticky-cta>. app.js показывает её
   после прокрутки и прячет, когда на экране элемент с data-sticky-hide.
   От 1100 px не показывается: там кнопка в шапке. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(252,248,241,.96); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(52,36,96,.08);
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.sticky-cta.is-visible { transform: none; visibility: visible; }
.no-js .sticky-cta { display: none; }
body.has-sticky-cta { padding-bottom: 76px; }
@media (min-width: 1100px) {
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
}
/* короткая и длинная подпись: <span class="cta-short"> и <span class="cta-long"> */
.cta-long { display: none; }
@media (min-width: 420px) { .cta-short { display: none; } .cta-long { display: inline; } }


/* ---------- 8. Карточки ---------- */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s3); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 12px;
}
.card--flat { box-shadow: none; }
.section--mist .card { border-color: var(--border); box-shadow: var(--sh-1); }
a.card { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
a.card:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.card__actions { margin-top: auto; padding-top: 8px; }

/* «Фраза мамы»: реплика в кавычках и короткий ответ. Нумерация автоматическая. */
.phrases { counter-reset: phrase; }
.phrase { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s3); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 12px; }
.phrase::before {
  counter-increment: phrase; content: "0" counter(phrase);
  font: 800 13px/1 var(--f-display); color: var(--violet); letter-spacing: .06em;
}
.phrase__said { font: 700 clamp(19px, 2.6vw, 22px)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--navy); }
.phrase__answer { color: var(--text-2); }

/* Программа по возрасту */
.program { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s3); box-shadow: var(--sh-1); }
.program__age { align-self: flex-start; }
.program .proto-flag { align-self: flex-start; }
.program__title { font: 700 clamp(21px, 2.6vw, 26px)/1.2 var(--f-display); letter-spacing: -.01em; }
.program__who { color: var(--text-2); }
.program__price { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--border); display: grid; gap: 4px; }
.program__price .num { font-size: 26px; line-height: 1.1; color: var(--navy); }
.program__price .small { color: var(--text-2); }
.program .btn { margin-top: 8px; }

/* Карточка пособия: обложка, название, «кому», цена, кнопка */
.pos { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-1); }
.pos__cover { aspect-ratio: 8 / 5; background: var(--mist); display: block; width: 100%; object-fit: cover; }
/* заглушка, когда обложки ещё нет: плоская заливка и код пособия, без картинки */
.pos__cover--empty { display: grid; place-items: center; background: var(--lilac); color: var(--ink); font: 800 28px/1 var(--f-display); letter-spacing: .08em; }
.pos__body { padding: var(--s3); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pos__title { font: 700 19px/1.25 var(--f-display); letter-spacing: -.01em; }
.pos__komu { color: var(--text-2); font-size: 15px; }
.pos__foot { margin-top: auto; padding-top: 8px; display: grid; gap: 12px; }
.pos__price { font-size: 22px; color: var(--navy); }


/* ---------- 9. Плитки фактов ---------- */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fact { background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-1); border-radius: var(--r-xl); padding: 20px; display: grid; gap: 4px; align-content: start; }
.fact__num { font: 800 clamp(28px, 6.4vw, 40px)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact__label { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.facts .fact:first-child { background: var(--tint); border-color: transparent; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); gap: var(--s2); } .fact { padding: 24px; } }

/* Строки списка фактов (экран «Виктория»): что и подпись */
.dl-facts { display: grid; gap: 0; border-top: 1px solid var(--border); }
.dl-facts > div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.dl-facts dt { font-weight: 700; color: var(--navy); }
.dl-facts dd { color: var(--text-2); font-size: 15px; }
@media (min-width: 640px) { .dl-facts > div { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s3); align-items: baseline; } }


/* ---------- 10. Аккордеон ----------
   <details class="acc"><summary class="acc__q">Вопрос</summary><div class="acc__a">...</div></details>
   Работает без JS. Якорь на вопрос открывает его (app.js). */
.acc { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-1); }
.acc + .acc { margin-top: 12px; }
.acc__q {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 16px 56px 16px 20px; min-height: 56px; font: 700 17px/1.35 var(--f-display); color: var(--navy);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.5px solid var(--violet); border-bottom: 2.5px solid var(--violet);
  transform: rotate(45deg); transition: transform .2s;
}
.acc[open] > .acc__q::after { transform: rotate(-135deg); margin-top: -2px; }
.acc[open] { border-color: var(--violet); }
.acc__a { padding: 0 20px 20px; color: var(--text); max-width: 70ch; }
.acc__a > * + * { margin-top: 12px; }


/* ---------- 11. Шкала-таблица ----------
   <div class="scale"><table class="scale__table">: возраст в первой ячейке (th scope=row),
   признак, срок обращения. На телефоне каждая строка становится карточкой,
   от 760 px обычная таблица. Классы сроков: .tag--days, .tag--weeks, .tag--now. */
.scale { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--white); overflow: hidden; box-shadow: var(--sh-1); }
.scale__table { width: 100%; border-collapse: collapse; }
.scale__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scale__table tr { display: block; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.scale__table tr:last-child { border-bottom: 0; }
.scale__table th, .scale__table td { display: block; padding: 0; text-align: left; font-weight: 400; }
.scale__table th[scope="row"] { font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--invitro-ink); margin-bottom: 6px; }
.scale__table td + td { margin-top: 10px; }
@media (min-width: 760px) {
  .scale__table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .scale__table thead th { background: var(--mist); font: 600 13px/1.3 var(--f-body); color: var(--text-2); padding: 14px 20px; border-bottom: 1px solid var(--border); }
  .scale__table tr { display: table-row; padding: 0; }
  .scale__table th, .scale__table td { display: table-cell; padding: 16px 20px; vertical-align: top; }
  .scale__table tbody th[scope="row"] { width: 21%; margin: 0; }
  .scale__table td + td { margin: 0; }
  .scale__table td:last-child { width: 24%; }
  .scale__table tbody tr { border-bottom: 1px solid var(--border); }
}
.scale__notes { padding: 16px 18px; background: var(--mist); display: grid; gap: 8px; font-size: 15px; color: var(--text-2); }
.scale__notes li { padding-left: 18px; position: relative; }
.scale__notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

/* Метка срока: форма и текст различают смысл, цвет только усиливает */
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full); font: 600 13px/1.2 var(--f-body); white-space: nowrap; }
.tag::before { content: ""; width: 8px; height: 8px; flex: none; }
.tag--days { background: var(--honey); color: var(--ink); }
.tag--days::before { background: var(--ink); border-radius: 50%; }
.tag--weeks { background: var(--white); color: var(--ink); border: 2px solid var(--violet); }
.tag--weeks::before { background: var(--violet); border-radius: 2px; }
.tag--now { background: var(--lilac); color: var(--ink); }
.tag--now::before { background: var(--violet-d); clip-path: polygon(50% 0, 100% 100%, 0 100%); }


/* ---------- 12. Плашка «блок-дверь» ----------
   Одна дверь в конце статьи или экрана: что дальше и одна кнопка.
   Модификаторы задают цвет полосы слева: --test, --tg (invitro), --marafon (coral), --posobie, --consult (navy).
   <aside class="door door--test"> <p class="door__eyebrow">…</p> <h3 class="door__title">…</h3> <p class="door__text">…</p> <div class="door__actions">…</div> </aside> */
.door {
  position: relative; display: grid; gap: 8px; align-items: start;
  background: var(--white); border: 1px solid var(--border); border-left: 6px solid var(--violet);
  border-radius: var(--r-xl); padding: var(--s3); box-shadow: var(--sh-1);
}
.door--marafon { border-left-color: var(--honey); }
.door--posobie, .door--consult { border-left-color: var(--violet-d); }
.door__eyebrow { font: 600 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--invitro-ink); }
.door__title { font: 700 clamp(20px, 2.6vw, 24px)/1.25 var(--f-display); letter-spacing: -.01em; color: var(--navy); }
.door__text { color: var(--text-2); max-width: 62ch; }
.door__actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 900px) {
  .door { grid-template-columns: 1fr auto; column-gap: var(--s5); align-items: center; padding: var(--s4); }
  .door > :not(.door__actions) { grid-column: 1; }
  .door__actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}


/* ---------- 13. Плашка-проба и пометки ---------- */
.callout { max-width: 820px; background: var(--cream); border-left: 4px solid var(--invitro); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s3); display: grid; gap: 8px; }
.callout__title { font: 700 17px/1.3 var(--f-display); color: var(--navy); }
.callout--navy { background: var(--violet); color: var(--white); border-left-color: var(--honey); }
.callout--navy .callout__title { color: var(--white); }

.pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--r-full); background: var(--lilac); color: var(--ink); font: 600 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.pill--outline { background: var(--milk); border: 1px solid var(--ink); }

.checklist li { position: relative; padding-left: 28px; }
.checklist li + li { margin-top: 10px; }
.checklist li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 6px; height: 11px; border-right: 2.5px solid var(--invitro-ink); border-bottom: 2.5px solid var(--invitro-ink); transform: rotate(40deg); }

/* Портрет и подпись на нём: фиолетовая панель, фото прижато к низу, цитата стеклом (как на живом) */
.portrait { position: relative; border-radius: var(--r-xl); background: linear-gradient(165deg, var(--violet-lit), var(--violet-d)); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; box-shadow: var(--sh-2), var(--sh-violet); }
.portrait img { width: 100%; max-width: 460px; margin-inline: auto; }
.portrait--cutout { padding: var(--s5) var(--s3) 0; }
.portrait__badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: rgba(255,255,255,.85); }
.portrait__quote {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; margin: 0; padding: 14px 16px;
  border-radius: var(--r-md); background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); font: 500 15px/1.45 var(--f-body);
}
.portrait__quote cite { display: block; margin-top: 6px; font: 500 13px/1.3 var(--f-body); font-style: normal; color: var(--text-2); }
@media (max-width: 759px) { .portrait { min-height: 0; } .portrait__quote { position: relative; left: auto; right: auto; bottom: auto; margin: 0 14px 14px; } }
@media (min-width: 760px) { .portrait__quote { left: 20px; right: 20px; bottom: 20px; max-width: 42ch; } }


/* ---------- 14. Тёмные полосы ----------
   Фиолетовая панель живого сайта, две мягкие сиреневые окружности. */
.band { position: relative; overflow: hidden; background: var(--violet); color: var(--white); padding-block: var(--s6); }
.band::before, .band::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; opacity: .16; }
.band::before { background: var(--lilac); right: -120px; top: -140px; }
.band::after { background: var(--honey-lit); left: -140px; bottom: -200px; opacity: .12; }
.band > .container { position: relative; z-index: 1; }
.band .h2, .band .h3 { color: var(--white); }
.band .h2 em, .band .h1 em { color: var(--honey-lit); font-style: normal; }
.band .eyebrow { color: var(--honey-tint); }
.band .lead, .band p { color: rgba(255,255,255,.92); }
.band a:not(.btn) { color: var(--white); }
@media (min-width: 900px) { .band { padding-block: var(--s7); } }

/* Плашка клуба */
.club { background: var(--violet); color: var(--white); border-radius: var(--r-xl); padding: var(--s4) var(--s3); display: grid; gap: var(--s2); position: relative; overflow: hidden; box-shadow: var(--sh-2), var(--sh-violet); }
.club .h3 { color: var(--white); }
.club .eyebrow { color: var(--honey-tint); }
.club p { color: rgba(255,255,255,.92); }
.club__meta { font-size: 15px; line-height: 1.5; color: var(--honey-tint); }
@media (min-width: 900px) { .club { grid-template-columns: 1.4fr 1fr; align-items: center; padding: var(--s5); gap: var(--s5); } }


/* ---------- 15. Подвал ----------
   Кремовый, как на живом сайте. HTML дословно из _шаблон-страницы.html. */
.site-footer { background: var(--cream); color: var(--ink); padding-block: var(--s6) var(--s4); border-top: 1px solid var(--border); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--violet-d); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s5); }
.footer__title { font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.footer__list { display: grid; gap: 0; }
.footer__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.footer__about { max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--text-2); margin-top: 12px; }
.footer__legal { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--text-2); display: grid; gap: 8px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--s6); } }


/* ---------- Первый экран главной ---------- */
.hero { padding-block: var(--s4) var(--s6); }
.hero__grid { display: grid; gap: var(--s4); align-items: center; }
.hero__text { display: grid; gap: var(--s2); }
.hero__text .btn-row { margin-top: 8px; }
.hero__facts { margin-top: var(--s5); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s6) var(--s7); }
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s6); }
}


/* ---------- 16. Служебное для прототипа ----------
   Эти классы не часть дизайна сайта. Выглядят иначе нарочно: серый фон,
   пунктирная рамка, моноширинный шрифт. В боевую вёрстку не переносятся. */
.proto-panel, .proto-zone {
  background: #ECEEF1; color: #2B2F36; border: 2px dashed #6B7280; border-radius: var(--r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; padding: var(--s2);
}
.proto-panel { margin-block: var(--s2) var(--s3); display: grid; gap: 12px; }
.proto-panel__title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.proto-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.proto-tab {
  min-height: 44px; padding: 8px 14px; border: 1px solid #6B7280; border-radius: var(--r-sm);
  background: #FFFFFF; color: #2B2F36; font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.proto-tab[aria-selected="true"] { background: #2B2F36; color: #FFFFFF; border-color: #2B2F36; }
.proto-visp { display: grid; gap: 4px; font-size: 12px; line-height: 1.5; }
.proto-visp[hidden] { display: none; }
.proto-more > summary { cursor: pointer; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 44px; display: flex; align-items: center; }
.proto-more[open] > summary { margin-bottom: 8px; }
.proto-visp b { display: inline-block; min-width: 1.6em; }
.proto-flag { display: inline-block; padding: 1px 6px; border: 1px dashed #6B7280; border-radius: 4px; background: #ECEEF1; color: #2B2F36; font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; vertical-align: middle; }
.proto-zone { margin-block: var(--s5); }
.proto-zone > h2 { font: 700 15px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }


/* ---------- 17. Утилиты ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--s1) !important; } .mt-2 { margin-top: var(--s2) !important; }
.mt-3 { margin-top: var(--s3) !important; } .mt-4 { margin-top: var(--s4) !important; } .mt-5 { margin-top: var(--s5) !important; }
.hide-mobile { display: none !important; } .show-mobile { display: block; }
@media (min-width: 900px) { .hide-mobile { display: revert !important; } .show-mobile { display: none !important; } }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .site-header, .sticky-cta, .proto-panel { display: none !important; }
}


/* ---------- 18. Витрина главной (только новые классы) ----------
   .vit-facts / .vit-fact: три нумерованных факта на первом экране.
   .step: карточка шага лестницы (номер, название, одна строка, формат, цена, кнопка).
   .step__row: строка внутри карточки (название слева, цена справа).
   .step--wide: карточка на две колонки. .hero--vitrina: компактный первый экран. */
.hero--vitrina { padding-block: var(--s3) var(--s4); }
.hero--vitrina .hero__grid { gap: var(--s3); }
.hero--vitrina .portrait img { max-height: 260px; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.hero--vitrina .portrait__quote { display: none; }
.vit-facts { display: grid; gap: 8px; margin-top: var(--s3); }
.vit-fact { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 16px; box-shadow: var(--sh-1); }
.vit-fact__n { font: 800 26px/1 var(--f-display); letter-spacing: -.02em; color: var(--violet); font-variant-numeric: tabular-nums; }
.vit-fact__t { font-size: 15px; line-height: 1.35; color: var(--ink); }
.vit-fact__t .proto-flag { margin-left: 4px; }

.shagi { padding-block: var(--s4) var(--s5); }
.shagi__head { margin-bottom: var(--s2); display: grid; gap: 4px; }
.shagi__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.step { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; box-shadow: var(--sh-1); }
.step__top { display: flex; align-items: center; gap: 10px; }
.step__title { font: 700 20px/1.2 var(--f-display); letter-spacing: -.01em; }
.step__who { color: var(--text-2); font-size: 15px; line-height: 1.4; }
.step__fmt { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.step__rows { display: grid; }
.step__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.3; }
.step__row a { color: var(--ink); text-decoration: none; }
.step__row a:hover { color: var(--violet); }
.step__row .num { white-space: nowrap; color: var(--navy); font-size: 17px; }
.step__row small { display: block; color: var(--text-2); font-size: 13px; }
.step__buy { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.step__price { font-size: 26px; line-height: 1.1; color: var(--navy); }
.step__note { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.step__btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.step__sub + .step__sub { padding-top: 10px; border-top: 1px solid var(--border); }
.step__sub { display: grid; gap: 6px; }
.step__sub-title { font: 700 16px/1.25 var(--f-display); }
.shagi__foot { margin-top: var(--s2); }
@media (min-width: 640px) {
  .shagi__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .step--wide { grid-column: span 2; }
}
@media (min-width: 900px) {
  .hero--vitrina { padding-block: var(--s5) var(--s5); }
  .hero--vitrina .portrait img { max-height: none; width: 100%; }
  .hero--vitrina .portrait__quote { display: block; }
  .vit-facts { grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); }
  .shagi { padding-block: var(--s5) var(--s6); }
  .shagi__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Витрина: компактные подвал и финальная полоса, только на странице с модификаторами */
.step__top .step__title { margin: 0; }
.site-footer--compact { padding-block: var(--s4) var(--s3); }
.site-footer--compact .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); }
.site-footer--compact .footer__grid > :first-child { grid-column: 1 / -1; }
.site-footer--compact .footer__about { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.site-footer--compact .footer__list a { min-height: 36px; }
.site-footer--compact .footer__legal { margin-top: var(--s3); padding-top: var(--s2); font-size: 13px; }
.band--compact { padding-block: var(--s4); }
.band--compact .stack--lg > * + * { margin-top: var(--s2); }
@media (min-width: 960px) {
  .site-footer--compact { padding-block: var(--s5) var(--s3); }
  .site-footer--compact .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--s5); }
  .site-footer--compact .footer__grid > :first-child { grid-column: auto; }
  .band--compact { padding-block: var(--s5); }
}
.step .pill { white-space: nowrap; }
.hero--vitrina .portrait img { max-height: 210px; }
@media (min-width: 900px) { .hero--vitrina .portrait img { max-height: none; } }
@media (min-width: 900px) {
  .hero--vitrina .portrait img { max-height: 330px; width: auto; margin-inline: auto; }
  .hero--vitrina { padding-block: var(--s4) var(--s4); }
  .step { padding: 16px; }
}


/* ==========================================================================
   19. Кнопка «Подобрать программу» в шапке, огонёк по ободку, тест в конце
   Шапка sticky, поэтому кнопка закреплена вверху на телефоне и планшете.
   Огонёк: тот же приём, что .btn-ogon в живом tokens.css (вращающийся
   конический градиент под заливкой, видна только светящаяся точка).
   ========================================================================== */
.header-cta { flex: 0 0 auto; margin-left: auto; margin-right: 8px; padding-inline: 14px; }
.header-cta__long { display: none; }
@media (min-width: 480px) {
  .header-cta { padding-inline: 18px; }
  .header-cta__long { display: inline; }
  .header-cta__short { display: none; }
}
@media (min-width: 1100px) { .header-cta { display: none; } }
@media (max-width: 479px) {
  .logo__name { font-size: 15px; line-height: 1.1; }
  .logo__name small { display: none; }
  .logo__mark { width: 30px; height: 30px; }
}

@keyframes probeg { to { transform: rotate(1turn); } }
.btn-ogon { position: relative; z-index: 0; overflow: hidden; isolation: isolate; }
.btn-ogon::before {
  content: ""; position: absolute; z-index: -2;
  left: 50%; top: 50%; width: 180%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0turn, transparent 0turn 0.78turn, rgba(255,255,255,.35) 0.9turn, #fff 0.96turn, rgba(255,255,255,.35) 0.99turn, transparent 1turn);
  animation: probeg 2.8s linear infinite;
}
.btn-ogon::after { content: ""; position: absolute; z-index: -1; inset: 3px; border-radius: inherit; background: var(--honey); }
@media (prefers-reduced-motion: reduce) { .btn-ogon::before { animation: none; } }

/* Нижней липкой плашки больше нет: её роль у кнопки в шапке. */
.sticky-cta { display: none !important; }
body.has-sticky-cta { padding-bottom: 0 !important; }

.test-end { padding-block: var(--s4); }
.test-end__box { max-width: 560px; margin-inline: auto; text-align: center; display: grid; gap: 12px; justify-items: center; }

/* ===== Реакция на ступень (stupen.js): подсветка карточки шага ===== */
.step.is-aktiv { position: relative; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet), var(--sh-1); }
.step.is-aktiv::before {
  content: "Вам сюда"; position: absolute; top: -12px; right: 16px;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--violet); color: var(--white);
  font: 700 13px/1.2 var(--f-display);
}

/* ===== Служебная страница ssylki.html ===== */
.ssylki-tabwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ssylki-tab { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.ssylki-tab th, .ssylki-tab td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--border); }
.ssylki-tab th { font-weight: 700; color: var(--ink); background: var(--tint); border-top: 0; }
.ssylki-tab code { font-size: 12.5px; word-break: break-all; }
@media (max-width: 719px) {
  .ssylki-tab, .ssylki-tab tbody, .ssylki-tab tr, .ssylki-tab td { display: block; width: 100%; }
  .ssylki-tab thead { display: none; }
  .ssylki-tab tr { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; padding: 6px 0; background: var(--white); }
  .ssylki-tab td { border-top: 0; padding: 4px 14px; }
  .ssylki-tab td::before { content: attr(data-l); display: block; font-size: 12px; color: var(--text-2); }
}

/* 20. Порядок витрины: программы на всю ширину, ниже по одному блоку в ряд.
   Планшет (2 колонки): программы на две колонки, консультация и клуб в ряд, марафон на две. */
@media (min-width: 640px) and (max-width: 899px) {
  #shag-4 { grid-column: span 2; }
}
@media (min-width: 900px) {
  #shag-4, #shag-1 { grid-column: 1 / -1; }
  #shag-2 { grid-column: span 2; }
}


/* 21. Служебное для прототипа скрыто на демонстрации.
   Показать: добавить ?sluzhebnoe=1 к адресу или включить переключатель в сравнение.html.
   Скрыть снова: ?sluzhebnoe=0. */
html:not(.show-service) .proto-panel,
html:not(.show-service) .proto-zone,
html:not(.show-service) .proto-flag,
html:not(.show-service) .state-panel,
html:not(.show-service) #izmeneniya,
html:not(.show-service) .container:has(> .proto-zone) { display: none !important; }


/* 22. Строка без цены в шаге «Программы» (индивидуальное сопровождение): подпись под названием. */
.step__row--note { display: grid; gap: 2px; }


/* 23. Описание марафона внутри карточки шага: спокойный текст, список с галочками. */
.step__text { display: grid; gap: 10px; font-size: 15px; line-height: 1.55; }
.step__text p { margin: 0; }
.step__text .checklist { margin: 0; }

/* ===== 24. Фоновый декор из прежнего дизайна: круги, точки, пирамидка ===== */
.has-dekor { position: relative; overflow: hidden; }
.has-dekor > *:not(.dekor) { position: relative; z-index: 1; }
.dekor { position: absolute; z-index: 0; pointer-events: none; }
.dekor-blob { border-radius: 50%; }
.dekor-dots { background-image: radial-gradient(currentColor 1.6px, transparent 1.7px); background-size: 18px 18px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.d-lilac { width: 340px; height: 340px; right: -130px; top: -120px; background: var(--lilac); opacity: .38; }
.d-dots  { width: 140px; height: 140px; right: 24px; top: 420px; color: var(--lilac); opacity: .45; }
.f-krug, .f-setka, .f-kolco { position: absolute; z-index: 0; pointer-events: none; }
.f-krug { border-radius: 50%; background: radial-gradient(closest-side, var(--lilac), transparent 82%); opacity: .78; }
.f-krug.med { background: radial-gradient(closest-side, var(--honey), transparent 82%); opacity: .5; }
.f-kolco { border-radius: 50%; border: 12px solid var(--lilac); opacity: .42; }
.f-setka { background-image: radial-gradient(var(--lilac) 1.5px, transparent 1.6px); background-size: 20px 20px; opacity: .62;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.f-lt { left: -80px;  top: -60px;    width: 260px; height: 260px; }
.f-rt { right: -90px; top: -70px;    width: 300px; height: 300px; }
.f-lb { left: -70px;  bottom: -70px; width: 240px; height: 240px; }
.f-rb { right: -90px; bottom: -80px; width: 280px; height: 280px; }
.f-s1 { right: 30px;  top: 100px;    width: 170px; height: 170px; }
.f-s2 { left: 26px;   bottom: 80px;  width: 160px; height: 160px; }
@media (max-width: 760px) {
  .f-lt, .f-rt, .f-lb, .f-rb { width: 180px; height: 180px; }
  .f-s1, .f-s2 { width: 110px; height: 110px; }
  .d-lilac { width: 260px; height: 260px; right: -110px; top: -90px; }
}
.igra { position: absolute; z-index: 0; pointer-events: none; background: var(--lilac); opacity: .5; }
.i-piramidka { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%228%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2240%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2247%22%20width%3D%2256%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2264%22%20width%3D%2272%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2281%22%20width%3D%2284%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%228%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2240%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2247%22%20width%3D%2256%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2264%22%20width%3D%2272%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2281%22%20width%3D%2284%22%20height%3D%2211%22%20rx%3D%225.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }
.ig-rb { right: -34px; bottom: -26px; width: 160px; height: 160px; transform: rotate(-8deg); }
.ig-lb { left: -26px;  bottom: -30px; width: 140px; height: 140px; transform: rotate(7deg); }
.igra.med { background: var(--honey); opacity: .42; }
.on-dark .igra { background: #fff; opacity: .16; }

/* ===== 25. Кнопки возрастов программ ===== */
.age-btns { display: grid; gap: 10px; margin: 12px 0 6px; }
@media (min-width: 700px) { .age-btns { grid-template-columns: repeat(3, 1fr); } }
.age-btn { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--white); border: 2px solid var(--lilac);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.age-btn:hover { border-color: var(--violet); transform: translateY(-2px); box-shadow: var(--sh-2); }
.age-btn__age { font: 800 20px/1.1 var(--f-display, var(--f-body)); color: var(--violet-d); }
.age-btn__name { font-size: 14px; line-height: 1.3; color: var(--text-2); }
.age-btn__price { margin-top: 2px; font: 700 15px/1 var(--f-body); color: var(--navy); }
.age-btn::after { content: "Подробнее \2192"; font-size: 13px; font-weight: 600; color: var(--violet); }
.age-btns--hero { margin: 18px 0 4px; }

/* Документы в подвале */
.footer__docs { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__docs a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.footer__docs a:hover { color: var(--violet); }

/* ===== Окна заявки и оплаты (виджеты GetCourse) ===== */
.okno { width: min(720px, 94vw); max-height: 92vh; padding: 0; border: none; border-radius: var(--r-xl); background: var(--white); box-shadow: var(--sh-3); overflow: hidden; }
.okno::backdrop { background: rgba(28, 16, 54, .55); }
.okno-telo { max-height: 92vh; overflow: auto; padding: 28px 20px 20px; }
.okno-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: 50%;
  background: var(--lilac); color: var(--ink); font: 400 26px/1 var(--f-body); cursor: pointer; }
.okno-x:hover { background: var(--honey-tint); }
@media (min-width: 760px) { .okno-telo { padding: 32px 32px 28px; } }

/* Реквизиты на главной */
.rekv { display: grid; gap: 10px 32px; margin-top: var(--s2); }
@media (min-width: 760px) { .rekv { grid-template-columns: repeat(3, auto); justify-content: start; } }
.rekv dt { font: 600 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rekv dd { margin: 2px 0 0; font-size: 16px; color: var(--ink); }
.rekv a { color: var(--violet); }