/* Компоненты MWB (club и главная). Шкала типографики и отступов, этап 2, 06/10/2026: размеры шрифта, межстрочные, веса и отступы
   только из токенов tokens.css (--ty-*, --s-*, --pad-*, --gap-grid, --space-section, --head-gap, --r-*) и литералов шкалы 4/8/12/16/24/32/48/72/96.
   Размер заголовка следует уровню тега (base.css); тут размеры у заголовков не переопределяются, кроме мест, записанных в DESIGN.md
   (раздел «Исключения»). Брейкпоинты: 640, 960, 1280. Квиз (#quiz) стилизует quiz.css. */

/* ---------- Кнопки: liquid glass ---------- */
.btn {
  --tint: 242, 120, 92;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--btn-h); padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: var(--ty-btn); font-weight: var(--ty-btn-fw); line-height: var(--ty-btn-lh); text-decoration: none; text-align: center;
  color: var(--c-ink); cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}
/* блик по верхней кромке */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 55%);
}
/* основная: стекло с оттенком акцента. Без blur заливка плотнее (в списках, карточках) */
.btn--primary {
  background: linear-gradient(180deg, rgba(var(--tint), 0.52), rgba(232, 96, 66, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -10px 18px -10px rgba(255, 255, 255, 0.35),
    0 10px 30px -10px rgba(200, 67, 43, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px -12px rgba(120, 60, 40, 0.25), 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* настоящее размытие только у кнопок первого экрана, шапки и тарифов (не больше 6-8 в кадре) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero .btn, .site-header .btn, .tier .btn { -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
  .hero .btn--primary, .site-header .btn--primary, .tier .btn--primary { background: linear-gradient(180deg, rgba(var(--tint), 0.38), rgba(232, 96, 66, 0.46)); }
  .hero .btn--ghost, .site-header .btn--ghost, .tier .btn--ghost { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn--primary { background: #F4A58F !important; }
  .btn--ghost { background: #FFFBF6 !important; }
  .btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 18px -10px rgba(255, 255, 255, 0.4), 0 16px 36px -10px rgba(200, 67, 43, 0.45), 0 3px 8px rgba(0, 0, 0, 0.07); }
  .btn--ghost:hover { box-shadow: inset 0 1px 0 #fff, 0 14px 30px -12px rgba(120, 60, 40, 0.32), 0 3px 8px rgba(0, 0, 0, 0.05); }
}
.btn:active { transform: translateY(1px); transition-duration: 0.08s; }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--s-5); font-size: var(--ty-body); }
.btn__arrow { font-size: var(--ty-icon); line-height: var(--ty-icon-lh); transition: transform var(--t-base); }
.btn:hover .btn__arrow { transform: translateX(3px); }
/* очень медленное «парение» только у главной кнопки первого экрана */
@media (prefers-reduced-motion: no-preference) {
  .hero__actions .btn--primary { animation: btn-float 7s ease-in-out infinite; }
  .hero__actions .btn--primary:hover { animation-play-state: paused; }
}
@keyframes btn-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }

.badge { margin-left: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-mint-ink); }

/* ---------- Стеклянная карточка (общая) ---------- */
.glass {
  background: var(--c-glass); border: 1px solid var(--c-glass-border);
  border-radius: var(--r-24); box-shadow: var(--inset-glass);
}

/* ---------- Шапка и раскрывающаяся панель меню ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* над тёмным фото и скриншотом стекло не сереет: фон плотнее (0.93), насыщенность под размытием (аудит 15/10/2026, п. 14) */
  background: rgba(255, 248, 240, 0.93);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); /* blur №1 из двух */
  border-bottom: 1px solid var(--c-line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--c-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
/* знак бренда: размер роли h3 (22 на телефоне, 28 на 1440), отдельных размеров нет */
.logo {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  color: var(--c-ink); text-decoration: none; font-size: var(--ty-h3); font-weight: var(--ty-fw-med); letter-spacing: 0.02em;
}
.logo:hover { color: var(--c-ink); }
.logo__dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--c-coral), var(--c-peach-2)); flex: none; }
/* расшифровка всегда второй строкой под «MWB», мелко и без тире: один вид на всех страницах и экранах (Владимир 15/10/2026) */
.logo { flex-wrap: wrap; row-gap: 0; }
.logo__name { display: inline-flex; line-height: var(--ty-num-lh); }
.logo__dash { display: none; }
.logo__tag { display: block; flex-basis: 100%; margin: calc(var(--s-2) * -1) 0 0 calc(12px + var(--s-2)); font-size: var(--ty-small); font-weight: var(--ty-fw-body); line-height: var(--ty-icon-lh); letter-spacing: 0; white-space: nowrap; color: rgba(42, 38, 35, 0.66); }

.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  background: var(--c-glass); border: 1px solid var(--c-glass-border); box-shadow: var(--inset-glass);
  font-size: var(--ty-body); line-height: var(--ty-btn-lh); font-weight: var(--ty-fw-med);
}
.menu__burger { position: relative; width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px; }
/* логотип с подписью не влезает рядом с телефоном, «Входом» и «Меню» (до 375px везде, до 640px в шапке со «Входом»):
   кнопка меню остаётся значком 44x44, слово «Меню» только для скринридера (Владимир 15/10/2026, подпись логотипа на всех экранах) */
@media (max-width: 374px) {
  .menu__toggle { width: 44px; padding: 0; justify-content: center; }
  .menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 639px) {
  .header__inner:has(.header__login) .menu__toggle { width: 44px; padding: 0; justify-content: center; }
  .header__inner:has(.header__login) .menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .header__inner:has(.header__login) { gap: var(--s-2); }
}
.menu__burger::before, .menu__burger::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px;
  transition: transform var(--t-fast);
}
.menu__burger::before { top: -6px; }
.menu__burger::after { top: 6px; }
.menu[open] > .menu__toggle .menu__burger { background: transparent; }
.menu[open] > .menu__toggle .menu__burger::before { transform: translateY(6px) rotate(45deg); }
.menu[open] > .menu__toggle .menu__burger::after { transform: translateY(-6px) rotate(-45deg); }

/* Мобильное меню: полноширинная панель под шапкой, группы аккордеоном */
.menu__body {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-3) var(--gutter) var(--s-6);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  box-shadow: 0 24px 40px -28px rgba(120, 60, 40, 0.35);
}
.menu__list { display: flex; flex-direction: column; }
.menu__item { border-bottom: 1px solid var(--c-line); }
.menu__link, .menu__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; color: var(--c-ink); font-size: var(--ty-h4); line-height: var(--ty-h4-lh); text-decoration: none;
}
.menu__link:hover { color: var(--c-link); }
.menu__group > summary::after, .acc > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-fast), margin var(--t-fast);
}
.menu__group[open] > summary::after, .acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.menu__group[open] > summary { color: var(--c-link); }

.panel { padding: 0 0 var(--s-4); }
.panel__grid { display: grid; gap: var(--s-1); }
.panel__link {
  display: flex; flex-direction: column; gap: var(--s-1); min-height: 44px; justify-content: center;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-s); color: var(--c-ink); text-decoration: none;
  transition: background-color var(--t-fast);
}
.panel__link:hover { background: rgba(255, 217, 196, 0.55); color: var(--c-ink); }
.panel__label { font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.panel__hint { font-size: var(--ty-small); color: var(--c-ink-2); line-height: var(--ty-small-lh); }
.menu__cta { margin-top: var(--s-5); width: 100%; }
/* на мобильном панель на всю высоту под шапкой (непрозрачная, страница под ней не видна и не прокручивается):
   список прокручивается сам, кнопка звонка — неподвижный подвал панели (аудит 15/10/2026, п. 2).
   100% в height у абсолютного блока = высота шапки (у ЛК шапка в две строки, --header-h там не совпадает) */
@media (max-width: 959px) {
  .menu__body {
    height: calc(100dvh - var(--header-h)); height: calc(100dvh - 100%); max-height: none;
    display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--s-4);
  }
  .menu__body > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .menu__body :is(.menu__link, .menu__group > summary) { padding-inline: var(--s-3); } /* только в панели: шапку ЛК (.site-header--min) не задевать */
  .menu__cta { flex: none; margin: var(--s-4) 0 0; }
  html:has(#menu[open]) { overflow: hidden; }
}

@media (min-width: 960px) {
  .menu { flex: 1; }
  .menu > .menu__toggle { display: none; }
  /* Современные браузеры показывают содержимое закрытого details без JS; в остальных включает site.js */
  .menu::details-content { content-visibility: visible; display: contents; }
  .menu__body {
    position: static; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
    max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .menu__list { flex-direction: row; gap: var(--s-1); margin-left: var(--s-5); }
  .menu__item { border: 0; }
  .menu__link, .menu__group > summary {
    min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill);
    transition: background-color var(--t-fast);
  }
  .menu__link:hover, .menu__group > summary:hover { background: rgba(255, 217, 196, 0.5); }
  .menu__group[open] > summary { background: rgba(255, 217, 196, 0.7); }
  .menu__group > summary::after { margin-left: var(--s-1); }
  .menu__cta { margin-top: 0; width: auto; }
  /* Раскрывающаяся панель: на ширину контейнера под шапкой, ссылки с описаниями */
  .panel {
    position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
    width: min(100% - 2 * var(--gutter), var(--container));
    padding: var(--s-5);
    background: #FFFCF7; border: 1px solid var(--c-glass-border);
    border-radius: var(--r-panel); box-shadow: var(--inset-glass), 0 30px 60px -36px rgba(120, 60, 40, 0.4);
  }
  .panel__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-2) var(--s-4); }
  .panel__link { padding: var(--s-3) var(--s-4); border-radius: var(--r-24); }
}

/* ======== Первый экран club: единственное место, где объявлены .hero, .hero__grid, .hero__text, .hero h1, .hero-plate ======== */
/* Экран целиком (min-height по окну), контент по центру; выше окна растёт по содержимому. Колонки одной высоты (grid stretch):
   верх eyebrow = верх плашки, низ примечания = низ плашки. Размеры шрифта не зависят от высоты окна. */
.hero {
  /* фон уходит под прозрачную шапку; пастель по краям, центр остаётся чистым */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--s-5));
  padding-bottom: var(--s-7);
  min-height: calc(100svh - 1px); display: flex; flex-direction: column; justify-content: center; /* hero начинается с y=1 (граница шапки) */
  background:
    linear-gradient(180deg, transparent 78%, var(--c-bg) 100%), /* нижний край растворяется в фон, без шва */
    radial-gradient(52% 64% at 92% 10%, rgba(255, 184, 150, 0.70), transparent 70%),
    radial-gradient(34% 44% at 82% 62%, rgba(255, 170, 130, 0.55), transparent 70%), /* пятно за плашкой, чтобы стекло читалось */
    radial-gradient(24% 36% at 96% 88%, rgba(190, 232, 212, 0.7), transparent 70%),
    radial-gradient(46% 58% at 4% 96%, rgba(190, 232, 212, 0.65), transparent 72%),
    radial-gradient(36% 46% at 62% 100%, rgba(255, 214, 190, 0.55), transparent 70%),
    var(--c-bg);
}
.hero__grid { display: grid; gap: var(--hero-gap); } /* ширину и центр задаёт .container */
.hero__text { display: flex; flex-direction: column; }
.hero h1 { max-width: var(--ty-h1-ch); }
.hero__text .hero__lead { margin-top: var(--ty-gap-h1-lead); max-width: var(--ty-lead-ch); }
/* общий класс с home (hero__actions quiz__actions): базу дают gap и flex, отступ сверху у home в home.css */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.hero__text > .hero__actions { margin-top: var(--ty-gap-lead-actions); } /* селектор с > не трогает home */
.hero__text .btn { padding: 0 var(--s-5); }
@media (max-width: 639px) { .hero__text .hero__actions .btn { flex: 1 1 100%; } } /* две кнопки в столбик одной ширины (была вторая уже первой) */
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-3) 0; margin-top: var(--ty-gap-lead-actions); padding: 0; list-style: none; }
.hero__facts .fact { padding: 0 var(--s-5); gap: var(--s-1); }
.hero__facts .fact:first-child { padding-left: 0; }
.hero__facts .fact + .fact { border-left: 1px solid var(--c-glass-border); }
.hero__facts a.fact__value { position: relative; color: inherit; white-space: nowrap; text-decoration: underline; text-underline-offset: var(--s-1); }
@media (max-width: 1279px) { .hero__facts a.fact__value { line-height: var(--btn-h-sm); } } /* тап-цель не меньше 44 px, строка одна */
@media (max-width: 1279px) { /* узкая колонка: три факта столбиком, значение и подпись в строку */
  .hero__facts { flex-direction: column; gap: var(--s-2); }
  .hero__facts .fact, .hero__facts .fact:first-child { flex-direction: row; align-items: baseline; gap: var(--s-3); padding: 0; }
  .hero__facts .fact + .fact { border-left: 0; }
}
.hero__note { margin-top: var(--ty-gap-actions-note); font-size: var(--ty-small); line-height: var(--ty-small-lh); }

.hero-plate {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; padding: var(--pad-m);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36));
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--r-panel);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -22px 34px -22px rgba(255, 140, 100, 0.30),
    inset 0 0 28px rgba(255, 255, 255, 0.28), 0 34px 60px -36px rgba(150, 70, 40, 0.38);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-plate { -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-plate { background: rgba(255, 250, 244, 0.9); }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-plate { background: rgba(255, 252, 247, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hero-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 50% at 20% 0%, rgba(255, 255, 255, 0.7), transparent 60%); }
/* тег h2 (до правки шаблона T), вид роли h3: см. docs/STAGE2-TEMPLATE-NEEDS.md; после замены на p.t-h3 правило остаётся безвредным */
.hero-plate__title { font-size: var(--ty-h3); font-weight: var(--ty-h3-fw); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); }
.hero-plate__lead { margin-top: var(--s-2); color: var(--c-ink-2); font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.hero-plate__stage { position: relative; margin-block: var(--s-4); } /* высота по карусели: без flex:1 и min-height */
.hero-plate__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid rgba(42, 38, 35, 0.12); }
.hero-plate__foot p { font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.hero-plate__foot .btn { min-height: var(--btn-h); }
.hero-plate__foot--solo { justify-content: flex-start; } /* club: в подвале плашки одна кнопка, без подписи и значения */
@media (min-width: 960px) { .hero-plate__foot--solo { justify-content: flex-end; } }

/* строка-оффер под H1 */
.hero__offer span { display: block; }
.hero__offer-2 { color: var(--c-ink-2); font-weight: var(--ty-fw-body); }
/* Оффер как ссылка-панель с мягким свечением (без blur-фильтров, стекло имитацией градиентом) */
.hero__offer {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-4); padding: var(--s-3) var(--s-5); max-width: 40rem;
  border-radius: var(--r-card); color: var(--c-ink); text-decoration: none; cursor: pointer;
  font-size: var(--ty-h3); font-weight: var(--ty-fw-med); line-height: var(--ty-h3-lh);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 224, 205, 0.5));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 1.5px 0 #fff, 0 10px 28px -14px rgba(232, 96, 66, 0.45);
}
.hero__offer::after { /* рамка-градиент по периметру */
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(242, 120, 92, 0.55), rgba(255, 255, 255, 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.hero__offer::before { /* ореол акцента, дышит по opacity */
  content: ""; position: absolute; inset: -14px; z-index: -2; border-radius: 36px; pointer-events: none;
  background: radial-gradient(60% 90% at 30% 50%, rgba(242, 120, 92, 0.38), transparent 72%), radial-gradient(50% 80% at 85% 50%, rgba(255, 180, 130, 0.35), transparent 70%);
  opacity: 0.75;
}
@media (prefers-reduced-motion: no-preference) { .hero__offer::before { animation: offer-glow 3.6s ease-in-out infinite; } }
@keyframes offer-glow { 0%, 100% { opacity: 0.55; transform: scale(0.99); } 50% { opacity: 1; transform: scale(1.02); } }
.hero__offer-text > span { display: block; }
.hero__offer { flex-direction: column; align-items: flex-start; gap: var(--s-2); } /* club: подпись-ссылка под текстом плашки */
.hero__offer-go { min-height: var(--btn-h-sm); }
.hero__offer-go { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--ty-body); font-weight: var(--ty-btn-fw); line-height: var(--ty-btn-lh); color: var(--c-link); white-space: nowrap; }
.hero__offer-go i { font-style: normal; transition: transform var(--t-fast); }
.hero__offer:hover, .hero__offer:focus-visible { color: var(--c-ink); }
.hero__offer:hover::before, .hero__offer:focus-visible::before { opacity: 1; animation-play-state: paused; }
.hero__offer:hover .hero__offer-go i, .hero__offer:focus-visible .hero__offer-go i { transform: translateX(5px); }
.hero__offer:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
@media (max-width: 639px) { .hero__offer { flex-wrap: wrap; row-gap: var(--s-1); } .hero__offer-go { margin-left: auto; } }

@media (min-width: 640px) { .hero { padding-top: calc(var(--header-h) + var(--s-6)); } }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
  .hero__text, .hero-plate { justify-content: space-between; } /* запас высоты делится между всеми промежутками колонки, дыр нет */
  .hero__offer { max-width: none; }
}
.checklist { display: grid; gap: var(--s-3); }
.checklist li { position: relative; padding-left: var(--ty-list-indent); line-height: var(--ty-body-lh); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--c-ink); }

/* ---------- Квиз: только секция, внутренности в quiz.css ---------- */
.quiz { padding-block: var(--space-section); background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 20%, var(--c-bg-2) 80%, var(--c-bg) 100%); }
/* квиз-скрипт дописывает свой блок прямо в секцию, поэтому центрируем всех прямых детей */
.quiz > * { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.quiz__intro { margin-bottom: var(--s-6); }
.quiz__intro > * { max-width: 46rem; }
.quiz__intro .lead { margin-top: var(--s-4); }

/* ---------- Ряд фактов: одна стеклянная панель с тонкими разделителями ---------- */
/* отступ полосы 48 (не 96): полоса, не секция; исключение записано в DESIGN.md */
.facts { padding-block: var(--s-7); }
.facts__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: var(--s-3);
  background: rgba(255, 255, 255, 0.26); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--r-panel);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 5px 5px 15px -10px rgba(0, 0, 0, 0.12), inset -5px -5px 10px -5px rgba(255, 255, 255, 0.5), 0 24px 48px -32px rgba(150, 70, 40, 0.3);
}
.fact { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-4); }
.facts__grid .fact { background: none; border: 0; box-shadow: none; border-radius: 0; }
.facts__grid .fact:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.7); }
.fact__value { display: block; font-size: var(--ty-num-m); font-weight: var(--ty-num-fw); line-height: var(--ty-num-lh); letter-spacing: var(--ty-num-m-ls); overflow-wrap: normal; word-break: normal; } /* цены с неразрывными пробелами не рвутся посреди числа */
.fact__value--price { font-weight: var(--ty-price-fw); } /* цена в блоке фактов 700, дата и остальные цифры 500 (07/10/2026) */
.fact__label { display: block; font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
@media (max-width: 959px) { .fact:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* нечётный последний на всю ширину, без сироты */
@media (max-width: 400px) { .facts__grid { padding: var(--s-2); } .fact { padding-inline: var(--s-2); } } /* узкий экран: цена 700 в одну строку (07/10/2026) */
@media (min-width: 960px) {
  .facts__grid { grid-template-columns: repeat(5, 1fr); padding: var(--s-4); }
  .facts__grid .fact:nth-child(n + 3) { border-top: 0; }
  .facts__grid .fact + .fact { border-left: 1px solid rgba(255, 255, 255, 0.75); }
}
@media (min-width: 1280px) { .fact { padding: var(--s-4) var(--s-5); } }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .facts__grid { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .facts__grid { background: rgba(255, 250, 244, 0.85); }
}
@media (prefers-reduced-transparency: reduce) {
  .facts__grid { background: rgba(255, 252, 247, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.section__more { margin-top: var(--s-6); }
.textlink { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: var(--ty-fw-med); }

/* ---------- Раскладка «заголовок слева, список справа»: заголовок липнет (program, faq), пустой колонки нет ---------- */
.split { display: grid; gap: var(--s-6); }
.split .section__head { margin-bottom: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); align-items: start; }
  #program .split > .section__head, #faq .split > .section__head { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
}

/* ---------- Аккордеон (программа, FAQ) ---------- */
.acc-list { display: grid; gap: var(--s-3); }
.acc {
  background: var(--c-glass); border: 1px solid var(--c-glass-border);
  border-radius: var(--r-card); box-shadow: var(--inset-glass);
  transition: background-color var(--t-base);
}
.acc[open] { background: var(--c-glass-strong); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding: var(--s-3) var(--s-5); cursor: pointer; list-style: none;
  font-size: var(--ty-h4); font-weight: var(--ty-h4-fw); line-height: var(--ty-h4-lh);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc__body { padding: 0 var(--s-5) var(--s-5); color: var(--c-ink-2); }
.note { margin-top: var(--s-4); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3); }

/* ---------- Автор: колонки одной высоты (фото тянется до высоты текста) ---------- */
.author__grid { display: grid; gap: var(--s-6); align-items: center; }
.author__photo {
  /* телефон и планшет в портрете (до 959): фото над заголовком, на всю ширину контейнера, высота не больше половины экрана */
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; max-height: 50vh; max-height: 50svh; overflow: hidden;
  border-radius: var(--r-panel); border: 1px solid var(--c-glass-border); box-shadow: var(--inset-glass);
  background:
    radial-gradient(70% 60% at 80% 10%, rgba(255, 184, 150, 0.9), transparent 70%),
    radial-gradient(70% 60% at 10% 100%, rgba(190, 232, 212, 0.9), transparent 70%),
    var(--c-bg-2);
  color: var(--c-ink-3); font-size: var(--ty-num-l); line-height: var(--ty-num-lh); letter-spacing: 0.04em;
}
.author__photo { position: relative; }
.author__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.author__text { margin-top: var(--s-4); max-width: 40rem; font-size: var(--ty-lead); line-height: var(--ty-lead-lh); color: var(--c-ink-2); }
.author__cases { margin-top: var(--s-3); }
.author__cases a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.author__cases a:hover { text-decoration-thickness: 2px; }
.author .checklist { margin-top: var(--s-5); }
/* список проектов и «Все кейсы» (общий блок author, раньше жил в home.css; .author .author__works-title бьёт .card__label ниже по файлу) */
.author .author__works-title { margin-top: var(--s-5); margin-bottom: 0; }
.author__works { margin-top: var(--s-2); gap: 0; }
/* тире на уровне первой строки и при переносе ссылки (аудит 15/10/2026, п. 10): у ссылки отступ сверху (44 - строка) / 2,
   центр первой строки всегда на 22 px от верха пункта */
.author__works li { display: flex; align-items: flex-start; min-height: 44px; }
.author__works li::before { top: calc(var(--btn-h-sm) / 2); }
.author__works a { display: inline-flex; align-items: center; min-height: 44px; padding-block: calc((var(--btn-h-sm) - 1lh) / 2); }
.author__all { margin-top: var(--s-2); }
@media (min-width: 960px) {
  .author__grid { grid-template-columns: 300px 1fr; gap: var(--s-7); align-items: stretch; }
  .author__photo { width: 100%; height: 100%; min-height: 20rem; max-height: none; aspect-ratio: auto; }
}

/* ---------- Цена и условия, финальный CTA: крупные плоские пастельные блоки ---------- */
.price-card {
  display: grid; gap: var(--s-6); padding: var(--pad-xl);
  background: var(--card-3); border-radius: var(--r-panel);
}
.price-card__amount { font-size: var(--ty-num-l); font-weight: var(--ty-price-fw); line-height: var(--ty-num-lh); letter-spacing: var(--ty-num-l-ls); margin-top: var(--s-4); }
.price-card__note { margin-top: var(--s-4); color: var(--c-ink-2); max-width: 28rem; font-size: var(--ty-small); line-height: var(--ty-small-lh); }
.price-card .btn { margin-top: var(--s-5); }
.price-card h3 { margin-bottom: var(--s-4); }
@media (min-width: 960px) { .price-card { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: stretch; } }

.final__box { padding: var(--pad-xl); border-radius: var(--r-panel); background: var(--card-1); }
.final__box h2 { max-width: var(--ty-h2-ch); }
.final__box p { margin-top: var(--s-4); max-width: 36rem; font-size: var(--ty-lead); line-height: var(--ty-lead-lh); color: var(--c-ink); }
.final__box .btn { margin-top: var(--s-6); }

/* ---------- Футер: колонки без сирот (2 до 960, 4 от 960) ---------- */
.footer { background: var(--c-bg-2); padding-block: var(--s-7) var(--s-6); border-top: 1px solid var(--c-line); }
.footer__cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
.footer__title { font-size: var(--ty-small); font-weight: var(--ty-fw-med); line-height: var(--ty-small-lh); letter-spacing: var(--ty-eyebrow-ls); color: var(--c-ink-3); margin-bottom: var(--s-2); }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: var(--btn-h-sm); color: var(--c-ink); text-decoration: none; }
.footer__links a:hover { color: var(--c-link); text-decoration: underline; }
.footer__legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); font-size: var(--ty-small); color: var(--c-ink-3); line-height: var(--ty-small-lh); }
@media (min-width: 960px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
/* Строка юр.лица и соцсети (18/10/2026): линия переезжает с .footer__legal на общую строку; у footer--min всё как было */
.footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.footer__base .footer__legal { margin-top: 0; padding-top: 0; border-top: 0; }
.footer__social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--btn-h-sm); height: var(--btn-h-sm); border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-2); transition: color var(--t-fast); }
.footer__social a:hover { color: var(--c-accent); }
.footer__ic { width: var(--ty-icon); height: var(--ty-icon); fill: currentColor; }

/* Баннер cookie и поп-ап при уходе (19/10/2026): стили живут во фрагментах src/ui/cookie.html и src/ui/exitpop.html, site.js подгружает их сам */

/* «Уже купили? Войти в кабинет» под кнопками первого экрана витрин T1/T2/T3/Bundle (18/10/2026) */
.hero__bought { margin: var(--s-4) 0 0; font-size: var(--ty-body); }

/* ---------- Мобильные правки ---------- */
@media (max-width: 639px) {
  .price-card .btn, .final__box .btn { width: 100%; }
  .price-card .btn__arrow { display: none; }
}

/* ---------- Крупные цветные карточки (услуги, кейсы, чему научитесь, кому подойдёт) ---------- */
.bigcards { display: grid; gap: var(--gap-grid); grid-template-columns: 1fr; }
.bigcards > :nth-child(6n + 1) { --bg: var(--card-1); }
.bigcards > :nth-child(6n + 2) { --bg: var(--card-2); }
.bigcards > :nth-child(6n + 3) { --bg: var(--card-3); }
.bigcards > :nth-child(6n + 4) { --bg: var(--card-4); }
.bigcards > :nth-child(6n + 5) { --bg: var(--card-5); }
.bigcards > :nth-child(6n + 6) { --bg: var(--card-6); }
/* кейсы и «чему научитесь» начинают палитру с другого тона, чтобы не повторять услуги */
.bigcards--cases > :nth-child(6n + 1) { --bg: var(--card-5); }
.bigcards--cases > :nth-child(6n + 2) { --bg: var(--card-3); }
.bigcards--cases > :nth-child(6n + 3) { --bg: var(--card-2); }
.bigcards--cases > :nth-child(6n + 4) { --bg: var(--card-1); }
.bigcards--cases > :nth-child(6n + 5) { --bg: var(--card-6); }
.bigcards--cases > :nth-child(6n + 6) { --bg: var(--card-4); }
.bigcards--learn > :nth-child(6n + 1) { --bg: var(--card-2); }
.bigcards--learn > :nth-child(6n + 2) { --bg: var(--card-1); }
.bigcards--learn > :nth-child(6n + 3) { --bg: var(--card-5); }
.bigcards--learn > :nth-child(6n + 4) { --bg: var(--card-3); }
.bigcards--learn > :nth-child(6n + 5) { --bg: var(--card-4); }
.bigcards--learn > :nth-child(6n + 6) { --bg: var(--card-6); }

.bigcard {
  position: relative; display: flex; flex-direction: column;
  min-height: 27.5rem; padding: var(--pad-l);
  background: var(--bg, var(--card-1)); border-radius: var(--r-card); color: var(--c-ink);
  transition: transform var(--t-base);
}
.bigcard__top { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.bigcard__count, .bigcard__num { flex: none; font-variant-numeric: tabular-nums; letter-spacing: var(--ty-eyebrow-ls); }
.bigcard__num { font-size: var(--ty-h4); line-height: var(--ty-h4-lh); font-weight: var(--ty-fw-med); color: var(--c-ink); }
/* заголовок карточки по роли h3 (22-28), размер задаёт base.css; у «learn» и «aud» заголовок стоит сверху, не прижат к низу */
.bigcard__title { margin-top: auto; padding-top: var(--s-7); max-width: var(--ty-h3-ch); text-wrap: balance; }
.bigcard__title a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.bigcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bigcard__title a:focus-visible { outline: none; }
.bigcard__title a:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.bigcard__text { margin-top: var(--s-4); max-width: 46ch; font-size: var(--ty-body); line-height: var(--ty-body-lh); color: var(--c-ink-2); }
.bigcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(42, 38, 35, 0.14);
}
.bigcard__fact { font-size: var(--ty-body); line-height: var(--ty-body-lh); }
/* цена в карточке услуги и продукта: вес 700, не меньше заголовка карточки (GOLD-STANDARD 2.x п.3, Владимир 09/10/2026); на главной то же задано в home.css */
.bigcard__fact--price { font-size: var(--ty-h3); line-height: var(--ty-h3-lh); font-weight: var(--ty-fw-bold); letter-spacing: var(--ty-h3-ls); color: var(--c-ink); }
@media (min-width: 1280px) { .bigcard__fact--price { font-size: var(--ty-h2); line-height: var(--ty-h2-lh); letter-spacing: var(--ty-h2-ls); } }
/* блок products/howit: цена в списке ссылок вкладки по стандарту цен, вес 700, не меньше заголовка вкладки (Владимир 09/10/2026) */
/* строка «подпись, ниже цена»: подпись крупнее (размер заголовка h3), чёрточка по центру первой строки, цена под подписью с тем же отступом слева */
.howit__points li:has(.howit__price) .textlink { font-size: var(--ty-h3); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); }
.howit__points li:has(.howit__price)::before { top: calc(var(--ty-h3) * var(--ty-h3-lh) / 2 - 1px); }
.howit__price { display: block; margin-top: var(--s-1); font-size: var(--ty-h3); line-height: var(--ty-h3-lh); font-weight: var(--ty-fw-bold); letter-spacing: var(--ty-h3-ls); color: var(--c-ink); white-space: nowrap; }
@media (min-width: 1280px) { .howit__price { font-size: var(--ty-h2); line-height: var(--ty-h2-lh); letter-spacing: var(--ty-h2-ls); } }
/* ссылка-подпись высотой 44 (нажатие пальцем): чёрточка по центру этой строки */
.howit__points li:has(.howit__price):has(.textlink)::before { top: 21px; }
/* узкие телефоны: длинная цена во вкладке переносится по словам (иначе раздувает колонку), цена «по согласованию» в блоке «Заказать» на ступень мельче, чтобы остаться в одну строку (Владимир 10/10/2026) */
@media (max-width: 480px) {
  .howit__price { white-space: normal; }
  .howit__panel > * { min-width: 0; }
  #order .bigcard__fact--price { font-size: var(--ty-h4); line-height: var(--ty-h4-lh); letter-spacing: var(--ty-h4-ls); }
}
/* блок uslugi/more: тот же дизайн, что products/howit, одна панель без вкладок (Владимир 09/10/2026) */
.howit--static .howit__panel { display: grid; }
.howit__points li:has(.howit__price) .more__label { font-size: var(--ty-h3); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); color: var(--c-ink); }
#more .howit__price { font-size: var(--ty-num-l); line-height: var(--ty-num-lh); letter-spacing: var(--ty-num-l-ls); }
/* блок products/own «Сделать самому»: цена крупнее, ступень цены тарифа 32 -> 48 (Владимир 09/10/2026) */
#own .bigcard__foot { padding-top: var(--s-3); }
#own .bigcard__fact--price { font-size: var(--ty-num-l); line-height: var(--ty-num-lh); letter-spacing: var(--ty-num-l-ls); }
.row__title.row__title--price { font-size: var(--ty-h2); line-height: var(--ty-h2-lh); font-weight: var(--ty-fw-bold); letter-spacing: var(--ty-h2-ls); }
.bigcard__go {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(42, 38, 35, 0.28); font-size: var(--ty-icon); line-height: var(--ty-icon-lh);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bigcard:hover .bigcard__go { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.bigcards--learn .bigcard { min-height: 0; }
.bigcards--learn .bigcard__title { margin-top: 0; padding-top: var(--s-6); }
.bigcards--learn .bigcard__text { margin-bottom: var(--s-5); }
.bigcards--learn .card__inset { margin-top: auto; }
/* хаб /cases/ (15/10/2026): строка «Хотите так же» в карточке кейса, продукт по теме и вопрос в квиз; над ссылкой-подложкой карточки */
.bigcard__offer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.bigcard__offer .card__label { flex-basis: 100%; margin-bottom: 0; }
.bigcard__offer-name { flex: 1 1 14rem; font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.bigcard__offer-price { white-space: nowrap; font-weight: var(--ty-fw-bold); color: var(--c-ink); }
@media (max-width: 639px) { .bigcard__offer .btn { width: 100%; } }

@media (min-width: 640px) {
  .bigcard { min-height: 25rem; }
  .bigcards--learn .bigcard { min-height: 0; }
}
@media (min-width: 960px) {
  .bigcards { grid-template-columns: repeat(2, 1fr); gap: var(--gap-grid); }
  .bigcard { min-height: 28.75rem; }
  .bigcard__title { padding-top: var(--s-8); }
  /* кейсы (главная): ширина карточек чередуется 7/5 и 5/7, ритм другой, чем у услуг */
  .bigcards--cases { grid-template-columns: repeat(12, 1fr); }
  .bigcards--cases > * { grid-column: span 6; }
  .bigcards--cases > :nth-child(4n + 1), .bigcards--cases > :nth-child(4n + 4) { grid-column: span 7; }
  .bigcards--cases > :nth-child(4n + 2), .bigcards--cases > :nth-child(4n + 3) { grid-column: span 5; }
  /* чему научитесь: шесть карточек одного размера, две колонки */
  .bigcards--learn .bigcard { min-height: 21.25rem; }
  /* нечётное число карточек: последняя на всю ширину, без сироты */
  .bigcards--learn > :last-child:nth-child(odd), .bigcards--cases > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (hover: hover) { .bigcard:hover { transform: translateY(-3px); } }

/* Пустота над заголовком карточки (аудит 15/10/2026, п. 4). Каталог /cases/ (#catalog, #club-cases): высота по содержимому, заголовок сверху,
   с 960 строки карточки на общих линиях через subgrid, как #cases на главной (home.css). Карточка «Услуга по теме» (#related) тоже без пустоты. */
:is(#catalog, #club-cases) .bigcards--cases > .bigcard, #related .bigcard { min-height: 0; }
:is(#catalog, #club-cases) .bigcards--cases .bigcard__title, #related .bigcard__title { margin-top: 0; padding-top: 0; }
@media (min-width: 960px) {
  :is(#catalog, #club-cases) .bigcards--cases > .bigcard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  :is(#catalog, #club-cases) .bigcards--cases .bigcard__title { grid-row: 1; align-self: start; }
  :is(#catalog, #club-cases) .bigcards--cases .bigcard__title a { align-items: flex-start; }
  :is(#catalog, #club-cases) .bigcards--cases .bigcard__text { grid-row: 2; }
  :is(#catalog, #club-cases) .bigcards--cases .card__inset { grid-row: 3; align-self: stretch; } /* вставки ряда одной высоты: разница уходит внутрь вставки, а не дырой перед «Хотите так же» (16/10/2026) */
  :is(#catalog, #club-cases) .bigcards--cases .bigcard__offer { grid-row: 4; align-self: start; }
  :is(#catalog, #club-cases) .bigcards--cases .bigcard__foot { grid-row: 5; align-self: end; }
}
/* 960-1279: узкая карточка 5/12 переносит текст вдвое чаще соседки, строки subgrid расходятся на 100+ px; здесь колонки поровну, ритм 7/5 с 1280 */
@media (min-width: 960px) and (max-width: 1279px) {
  :is(#catalog, #club-cases) .bigcards--cases > :nth-child(n) { grid-column: span 6; }
  :is(#catalog, #club-cases) .bigcards--cases > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* цена «По согласованию» в карточке услуги по теме: ступень заголовка карточки (h3) на всех ширинах, не h2 (аудит 15/10/2026, п. 8) */
#related .bigcard__fact--price { font-size: var(--ty-h3); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); }

/* ---------- Списки строками (гайды, статьи) ---------- */
.rows { border-top: 1px solid var(--c-line); }
.row { border-bottom: 1px solid var(--c-line); }
.row__link {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-5) 0; color: var(--c-ink); text-decoration: none;
}
.row__title { grid-column: 1; font-size: var(--ty-h3); font-weight: var(--ty-h3-fw); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); }
.row__date { display: block; margin-top: var(--s-1); font-size: var(--ty-small); font-weight: var(--ty-fw-body); line-height: var(--ty-small-lh); letter-spacing: 0; color: var(--c-ink-3); }
.row__text { grid-column: 1; font-size: var(--ty-body); line-height: var(--ty-body-lh); color: var(--c-ink-2); max-width: var(--ty-small-ch); }
.row__go {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid rgba(42, 38, 35, 0.28); font-size: var(--ty-icon); line-height: var(--ty-icon-lh);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.row__link:hover .row__go { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.row__link:hover .row__title { color: var(--c-link); }
.row__link:focus-visible { outline-offset: -3px; }
@media (min-width: 960px) {
  .row__link { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; padding: var(--s-6) 0; }
  .row__title, .row__text { grid-column: auto; }
  .row__go { grid-column: auto; grid-row: auto; }
}
.cases__note { margin-top: var(--s-3); font-size: var(--ty-small); color: var(--c-ink-3); line-height: var(--ty-small-lh); overflow-wrap: anywhere; }

/* ---------- Тарифы: три ровные карточки, акцент цветом и ярлыком (решение по LAYOUT-AUDIT 6.1) ---------- */
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center h2 { margin-inline: auto; }
.tiers { display: grid; gap: var(--gap-grid); grid-template-columns: 1fr; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column; padding: var(--pad-l);
  background: #FFFDF9; border: 1px solid var(--c-line); border-radius: var(--r-card);
}
.tier--flag { background: var(--card-1); border-color: transparent; box-shadow: 0 0 0 2px var(--c-accent); }
/* ярлык лежит на верхней кромке карточки и не меняет её внутренний отступ: начало контента у всех трёх одинаковое */
.tier__badge {
  position: absolute; top: 0; left: var(--pad-l); transform: translateY(-50%);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-accent-ink);
  font-size: var(--ty-small); font-weight: var(--ty-eyebrow-fw); line-height: var(--ty-small-lh); white-space: nowrap;
}
.tier__name { font-size: var(--ty-small); font-weight: var(--ty-fw-body); line-height: var(--ty-small-lh); letter-spacing: 0.02em; color: var(--c-ink-2); } /* h3 с видом подписи: вес как у абзаца */
/* описание тарифа это абзац (p) с видом роли h4 (компактный заголовок карточки) */
.tier__summary { margin-top: var(--s-3); font-size: var(--ty-h4); font-weight: var(--ty-fw-med); line-height: var(--ty-h4-lh); letter-spacing: 0; text-wrap: balance; }
.tier__price { margin-top: var(--s-5); font-size: var(--ty-num-l); font-weight: var(--ty-price-fw); line-height: var(--ty-num-lh); letter-spacing: var(--ty-num-l-ls); }
.tier__note { margin-top: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.tier .btn { margin-top: var(--s-5); width: 100%; }
.tier__list { display: grid; align-content: start; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid rgba(42, 38, 35, 0.14); }
.tier__list li { position: relative; padding-left: var(--ty-list-indent); line-height: var(--ty-body-lh); }
/* нейтральные маркеры: точка у включённого, тире у невключённого (иконки подставит отдельный патч) */
.tier__list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--c-ink); }
.tier__list li.is-off { color: var(--c-ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.tier__list li.is-off::before { width: 8px; height: 1px; border-radius: 0; background: var(--c-ink-3); }
.tiers__note { margin: var(--s-6) auto 0; max-width: 46rem; text-align: center; color: var(--c-ink-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); }
/* телефон и планшет: колонка на ширину контейнера, флагман первым; сверху запас под ярлык */
@media (max-width: 959px) {
  .tier--flag { order: -1; }
  .tiers { padding-top: var(--s-3); }
}
@media (min-width: 960px) {
  .tiers { grid-template-columns: repeat(3, 1fr); padding-top: var(--s-3); }
}
/* общие «этажи» (название, описание, цена, примечание, кнопка, список): цена и кнопка на одной линии, где бы ни кончалось описание */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .tiers { grid-template-rows: repeat(6, auto); row-gap: 0; column-gap: var(--gap-grid); }
    .tier { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .tier > .tier__name { grid-row: 1; }
    .tier > .tier__summary { grid-row: 2; }
    .tier > .tier__price { grid-row: 3; }
    .tier > .tier__note { grid-row: 4; }
    /* тариф без цены (боковые у воронки, 16/10/2026): примечание «входит в цену» встаёт на линию цены и занимает её этаж, без дыры над кнопкой */
    .tier:not(:has(> .tier__price)) > .tier__note { grid-row: 3 / span 2; margin-top: var(--s-5); }
    .tier > .btn { grid-row: 5; align-self: start; }
    .tier > .tier__list { grid-row: 6; align-self: stretch; }
  }
}

/* ---------- Мобильное сокращение длинных списков (весь текст остаётся в HTML) ---------- */
.peek-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.peek-btn { display: none; }
@media (max-width: 639px) {
  .peek-btn {
    display: flex; align-items: center; justify-content: center; min-height: var(--btn-h); margin-top: var(--s-5);
    border: 1px solid rgba(42, 38, 35, 0.28); border-radius: var(--r-pill); cursor: pointer;
    font-size: var(--ty-body); font-weight: var(--ty-fw-med); line-height: var(--ty-btn-lh);
  }
  .peek-btn__off { display: none; }
  .peek-toggle:checked ~ .peek-btn .peek-btn__on { display: none; }
  .peek-toggle:checked ~ .peek-btn .peek-btn__off { display: inline; }
  .peek-toggle:focus-visible ~ .peek-btn { outline: 3px solid var(--c-focus); outline-offset: 3px; }
  .peek-toggle:not(:checked) + .bigcards--peek4 > :nth-child(n + 5),
  .peek-toggle:not(:checked) + .bigcards--peek3 > :nth-child(n + 4) { display: none; }
}
.tier--flag .tier__list li.is-off { color: var(--c-ink-2); }

/* ---------- Кому подойдёт: пять карточек одного размера, 3 + 2 по центру на десктопе ---------- */
.aud { min-height: 0; gap: 0; }
.aud .bigcard__title { margin-top: 0; padding-top: var(--s-6); max-width: var(--ty-h3-ch); }
.aud .bigcard__text { max-width: 52ch; }
.aud__tasks { margin-top: var(--s-5); }
.aud__label { display: block; margin-bottom: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); letter-spacing: 0.03em; color: var(--c-ink-2); }
.aud__list { display: grid; gap: var(--s-2); }
.aud__list li { position: relative; padding-left: var(--ty-list-indent); line-height: var(--ty-body-lh); }
.aud__list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--c-ink); }
.aud .bigcard__foot { display: block; margin-top: auto; }
.aud__tasks + .bigcard__foot { margin-top: auto; }
.aud__out { margin: 0; font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.aud__out .aud__label { margin-bottom: var(--s-1); }
.aud__not { margin-top: var(--s-4); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.bigcards--aud .aud__tasks { margin-bottom: var(--s-5); }
@media (min-width: 640px) {
  .bigcards--aud { display: flex; flex-wrap: wrap; justify-content: center; }
  .bigcards--aud > li { flex: 0 1 calc((100% - var(--gap-grid)) / 2); }
  .bigcards--aud > li:last-child:nth-child(odd) { flex-basis: 100%; } /* пятая карточка на всю ширину, без сироты */
}
@media (min-width: 960px) {
  .bigcards--aud > li { flex: 0 1 calc((100% - 2 * var(--gap-grid)) / 3); }
  .bigcards--aud > li:last-child:nth-child(odd) { flex-basis: calc((100% - 2 * var(--gap-grid)) / 3); }
}
/* акцентная чёрточка над категорией: ширина и цвет меняются от карточки к карточке. Только в блоке «Кому подойдёт» (#audience: клуб и
   продукты на его образце); на /about/, /brief/ и других карточках .aud не ставится, там выглядела обрезком (аудит 15/10/2026, п. 13) */
.aud::before { position: absolute; top: 0; left: var(--pad-l); width: 56px; height: 5px; border-radius: 0 0 5px 5px; background: var(--c-accent); }
.aud:nth-child(2)::before { width: 96px; background: var(--c-mint-ink); }
.aud:nth-child(3)::before { width: 32px; }
.aud:nth-child(4)::before { width: 72px; background: var(--c-ink); }
.aud:nth-child(5)::before { width: 120px; background: var(--c-mint-ink); }
#audience .aud::before { content: ""; } /* без content чёрточки нет: рисуется только в #audience */

/* ---------- С чем работаем: цветные карточки, список во вставке ---------- */
.stack { display: grid; gap: var(--gap-grid); }
.stack > :nth-child(5n + 1) { --bg: var(--card-2); }
.stack > :nth-child(5n + 2) { --bg: var(--card-1); }
.stack > :nth-child(5n + 3) { --bg: var(--card-5); }
.stack > :nth-child(5n + 4) { --bg: var(--card-3); }
.stack > :nth-child(5n + 5) { --bg: var(--card-4); }
.stack__group { padding: 0 var(--s-5); border-radius: var(--r-card); background: var(--bg, var(--card-2)); color: var(--c-ink); }
.stack__group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; cursor: pointer; list-style: none; font-size: var(--ty-h4); font-weight: var(--ty-h4-fw); line-height: var(--ty-h4-lh); }
.stack__group > summary::-webkit-details-marker { display: none; }
.stack__group > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform var(--t-fast); }
.stack__group[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.stack__list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); padding: var(--inset-pad); border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.45); background: color-mix(in oklab, var(--bg, var(--card-2)), #fff 45%); }
.stack__list li { display: grid; gap: var(--s-1); line-height: var(--ty-body-lh); }
.stack__list b { font-weight: var(--ty-fw-semi); }
.stack__list span { color: var(--c-ink-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); }
.stack__note { margin-top: var(--s-6); padding: var(--s-5) var(--s-6); border-radius: var(--r-inner); background: var(--card-3); border-left: 6px solid var(--c-accent); line-height: var(--ty-body-lh); font-size: var(--ty-body); }
@media (min-width: 640px) {
  .stack { grid-template-columns: repeat(2, 1fr); }
  .stack > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* пятая карточка на всю ширину, без сироты */
}
/* пять колонок на десктопе: цветная подложка тянется на всю высоту ряда, группы раскрыты всегда; слева самая большая */
@media (min-width: 1280px) {
  .stack { grid-template-columns: repeat(5, 1fr); }
  .stack > :last-child:nth-child(odd) { grid-column: auto; }
  .stack__group { padding: var(--s-5); }
  .stack__group > summary { min-height: 0; pointer-events: none; margin-bottom: var(--s-3); }
  .stack__group > summary::after { display: none; }
  .stack__group::details-content { content-visibility: visible; display: block; }
  .stack__list { margin: 0; }
}

/* ---------- Как это бывает: три спокойные карточки, строки «до / после» на общих линиях ---------- */
.stories { display: grid; gap: var(--gap-grid); }
.story { --bg: var(--card-2); padding: var(--pad-l); border-radius: var(--r-card); background: var(--bg); }
.story:nth-child(2) { --bg: var(--card-6); }
.story:nth-child(3) { --bg: var(--card-5); }
.story__kicker { font-size: var(--ty-small); line-height: var(--ty-small-lh); letter-spacing: 0.03em; color: var(--c-ink-2); }
.story__steps { display: grid; gap: var(--s-4); margin: var(--s-5) 0 0; padding: var(--s-2) var(--s-5) var(--s-4); border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.45); background: color-mix(in oklab, var(--bg), #fff 45%); }
.story__steps div { padding-top: var(--s-3); border-top: 1px solid rgba(42, 38, 35, 0.14); }
.story__steps dt { font-size: var(--ty-small); line-height: var(--ty-small-lh); letter-spacing: 0.03em; color: var(--c-ink-2); }
.story__steps dd { margin: var(--s-1) 0 0; line-height: var(--ty-body-lh); }
.story__after dd { font-size: var(--ty-lead); line-height: var(--ty-lead-lh); }
@media (min-width: 960px) { .stories { grid-template-columns: repeat(3, 1fr); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .stories { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .story { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .story__steps { grid-row: 2 / span 4; grid-template-rows: subgrid; row-gap: 0; }
    .story__steps div + div { margin-top: var(--s-4); }
  }
}

/* ======== Шапка на десктопе: логотип слева, меню посередине, CTA справа (решение Владимира 07/10/2026) ======== */
@media (min-width: 960px) {
  :root { --header-h: 88px; }
  .header__inner { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--s-6); }
  .menu, .menu__body { display: contents; }
  .menu__body > nav { grid-column: 2; grid-row: 1; justify-self: center; }
  .logo { grid-column: 1; grid-row: 1; }
  .menu__cta { grid-column: 3; grid-row: 1; justify-self: end; padding: 0 var(--s-5); }
  .menu__list { margin-left: 0; gap: var(--s-4); }
  .menu__link, .menu__group > summary { padding: 0; min-height: 44px; border-radius: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(42, 38, 35, 0.4); }
  .menu__link:hover, .menu__group > summary:hover, .menu__group[open] > summary { background: none; text-decoration-color: currentColor; }
}
/* 960-1279: подпись логотипа теперь видна (Владимир 15/10/2026), меню и колонки чуть плотнее; пока номер не влезает рядом с меню,
   у кнопки звонка только значок (номер остаётся для скринридера): до 1180, в шапке со «Входом» до 1280 */
@media (min-width: 960px) {
  .logo__tag { margin-top: calc(var(--s-1) * -1); }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .header__inner { column-gap: var(--s-4); }
  .menu__list { gap: var(--s-3); }
}
@media (min-width: 960px) and (max-width: 1179px) {
  .menu__cta { width: var(--btn-h); padding: 0; justify-content: center; }
  .menu__cta .cta-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .header__inner:has(.header__login) .menu__cta { width: var(--btn-h); padding: 0; justify-content: center; }
  .header__inner:has(.header__login) .menu__cta .cta-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1280px) {
  .menu__list { gap: var(--s-6); }
}

/* квиз и вкладки: общий вид кнопок */
.quiz .quiz-btn { background: linear-gradient(180deg, rgba(242, 120, 92, 0.52), rgba(232, 96, 66, 0.62)); color: var(--c-ink); font-weight: var(--ty-btn-fw); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 30px -10px rgba(200, 67, 43, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06); }
.quiz .quiz-btn:hover { background: linear-gradient(180deg, rgba(242, 120, 92, 0.62), rgba(232, 96, 66, 0.72)); color: var(--c-ink); }
.howit__round { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28)); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 #fff, 0 8px 24px -12px rgba(120, 60, 40, 0.25); }

/* ======== Светлая вставка внутри цветной карточки (единый компонент) ======== */
.card__inset {
  margin-top: var(--s-5); padding: var(--inset-pad); border-radius: var(--r-inner);
  background: rgba(255, 255, 255, 0.45);
  background: color-mix(in oklab, var(--bg, var(--card-1)), #fff 45%);
}
.card__label { margin-bottom: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); letter-spacing: 0.03em; color: var(--c-ink-2); }
.card__dash { display: grid; gap: var(--s-2); }
.card__dash li { position: relative; padding-left: var(--ty-list-indent); line-height: var(--ty-body-lh); }
.card__dash li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--c-ink); }
/* тарифы: вставка у флагмана ярче, у крайних спокойнее */
.tier { --bg: var(--card-6); }
.tier--flag { --bg: var(--card-1); }
.tier .tier__list.card__inset { margin-top: var(--s-5); border-top: 0; }
.tier--flag .tier__list.card__inset { background: color-mix(in oklab, var(--card-1), #fff 60%); }
/* вкладки «Как устроена программа»: пункты во вставке */
.howit__points { padding: var(--inset-pad); border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.5); }

/* ======== Стекло на насыщенном фоне (06/10/2026) ======== */
/* Фон: 4-6 мягких пятен из токенов, края растворяются в фон страницы без швов */
#audience, .quiz, .facts, .section:has(> .container > .facts__grid):not(#hero) {
  background:
    linear-gradient(180deg, var(--c-bg) 0%, transparent 14%, transparent 86%, var(--c-bg) 100%),
    radial-gradient(38% 46% at 8% 22%, rgba(255, 176, 140, 0.55), transparent 70%),
    radial-gradient(34% 44% at 92% 18%, rgba(214, 200, 240, 0.65), transparent 70%),
    radial-gradient(36% 46% at 78% 82%, rgba(190, 232, 212, 0.6), transparent 70%),
    radial-gradient(30% 40% at 24% 88%, rgba(251, 235, 181, 0.7), transparent 70%),
    radial-gradient(26% 36% at 52% 50%, rgba(255, 150, 125, 0.30), transparent 70%),
    var(--c-bg);
}

/* ======== Программа по неделям: стеклянные строки на градиенте, плавное раскрытие ======== */
#program {
  background:
    linear-gradient(180deg, var(--c-bg) 0%, transparent 12%, transparent 88%, var(--c-bg) 100%),
    radial-gradient(40% 50% at 90% 16%, rgba(255, 170, 130, 0.6), transparent 70%),
    radial-gradient(34% 44% at 10% 80%, rgba(214, 200, 240, 0.7), transparent 70%),
    radial-gradient(36% 46% at 78% 90%, rgba(190, 232, 212, 0.6), transparent 70%),
    radial-gradient(28% 40% at 30% 10%, rgba(251, 235, 181, 0.7), transparent 70%),
    var(--c-bg-2);
}
.acc--week {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--r-card);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 5px 5px 15px -10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px -5px rgba(255, 255, 255, 0.45), 0 14px 30px -22px rgba(150, 70, 40, 0.35);
  interpolate-size: allow-keywords;
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.acc--week[open] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.34));
  box-shadow: inset 0 1.5px 0 #fff, inset 5px 5px 15px -10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px -5px rgba(255, 255, 255, 0.5), 0 24px 48px -26px rgba(150, 70, 40, 0.4);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .acc--week[open] { -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
}
@media (prefers-reduced-transparency: reduce) { .acc--week, .acc--week[open] { background: rgba(255, 252, 247, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.acc--week > summary { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: var(--s-3); min-height: 72px; padding: var(--s-3) var(--s-4); }
.acc--week > summary::after { grid-column: 3; }
.acc__n { font-size: var(--ty-num-s); font-weight: var(--ty-num-fw); line-height: var(--ty-num-lh); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.acc__head { display: grid; gap: var(--s-1); min-width: 0; }
.acc__head b { font-weight: var(--ty-h4-fw); font-size: var(--ty-h4); line-height: var(--ty-h4-lh); }
.acc__sum { font-size: var(--ty-small); font-weight: var(--ty-fw-body); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.acc--week:not([open]) .acc__sum { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* на телефоне подзаголовок шага в две строки, многоточие только после второй (аудит 15/10/2026, п. 11) */
@media (max-width: 639px) {
  .acc--week:not([open]) .acc__sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
}
.acc--week::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
.acc--week[open]::details-content { block-size: auto; }
.acc__body--week { padding: 0 var(--s-4) var(--s-4); }
.acc__grid { display: grid; gap: var(--s-3); }
.acc__block { padding: var(--inset-pad); border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.55); line-height: var(--ty-body-lh); }
.acc__block p:last-child { color: var(--c-ink); }
.acc__block--result { background: color-mix(in oklab, var(--card-3), #fff 35%); }
.acc__needs { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-4); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.acc__needs a { display: inline-flex; align-items: center; min-height: 44px; } /* ссылка «Подробнее» в FAQ: цель касания 44 px */
.acc__needs-list { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.acc__needs-list li:not(:last-child)::after { content: ","; }
@media (min-width: 640px) {
  .acc__grid { grid-template-columns: 1fr 1fr; }
  .acc--week > summary { grid-template-columns: 4rem 1fr auto; padding: var(--s-4) var(--s-6); }
  .acc__body--week { padding: 0 var(--s-6) var(--s-6); }
}

/* ======== FAQ: тот же стеклянный аккордеон, что у программы ======== */
#faq {
  background:
    linear-gradient(180deg, var(--c-bg) 0%, transparent 12%, transparent 88%, var(--c-bg) 100%),
    radial-gradient(38% 46% at 8% 20%, rgba(214, 200, 240, 0.6), transparent 70%),
    radial-gradient(40% 50% at 92% 70%, rgba(255, 170, 130, 0.5), transparent 70%),
    radial-gradient(30% 40% at 40% 95%, rgba(190, 232, 212, 0.55), transparent 70%),
    var(--c-bg);
}
.acc--faq { background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2)); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--r-card);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 5px 5px 15px -10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px -5px rgba(255, 255, 255, 0.45), 0 14px 30px -22px rgba(150, 70, 40, 0.35); }
.acc--faq[open] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.34)); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .acc--faq[open] { -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); } }
@media (prefers-reduced-transparency: reduce) { .acc--faq, .acc--faq[open] { background: rgba(255, 252, 247, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.acc--faq > summary { min-height: 72px; padding: var(--s-3) var(--s-4); }
.acc--faq { interpolate-size: allow-keywords; } /* без этого auto не интерполируется и вопрос раскрывался скачком */
.acc--faq::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
.acc--faq[open]::details-content { block-size: auto; }
.acc__block--pain { background: color-mix(in oklab, var(--card-4), #fff 55%); }
.acc__block--fix { background: rgba(255, 255, 255, 0.72); }
#faq .section__head { margin-bottom: 0; }
@media (min-width: 640px) { .acc--faq > summary { padding: var(--s-4) var(--s-6); } }

/* ======== Метод: рабочее место одной командой ======== */
#method {
  background:
    linear-gradient(180deg, var(--c-bg) 0%, transparent 14%, transparent 86%, var(--c-bg) 100%),
    radial-gradient(40% 50% at 88% 30%, rgba(255, 170, 130, 0.5), transparent 70%),
    radial-gradient(34% 44% at 70% 90%, rgba(214, 200, 240, 0.6), transparent 70%),
    var(--c-bg);
}
.method { display: grid; gap: var(--s-6); align-items: start; }
.method__steps { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.method__steps li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-3); align-items: baseline; line-height: var(--ty-body-lh); }
.method__steps b { display: block; font-weight: var(--ty-fw-semi); font-size: var(--ty-body); }
.method__n { font-size: var(--ty-num-s); font-weight: var(--ty-num-fw); line-height: var(--ty-num-lh); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.method__note { margin-top: var(--s-4); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3); }
.method__lists { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.method__lists .card__inset { margin-top: 0; --bg: var(--card-2); }
.method__not { --bg: var(--card-6) !important; color: var(--c-ink-2); }
/* терминал: светлое стекло, blur только здесь; моноширинный стек и размер по роли small */
.term {
  max-height: 280px; overflow: hidden; padding: var(--pad-s); border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1.5px 0 #fff, inset 5px 5px 15px -10px rgba(0, 0, 0, 0.1), 0 30px 60px -36px rgba(150, 70, 40, 0.4);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--ty-small); line-height: var(--ty-small-lh);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .term { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } }
@media (prefers-reduced-transparency: reduce) { .term { background: rgba(255, 252, 247, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.term__bar { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.term__bar i { width: 10px; height: 10px; border-radius: 3px; background: rgba(42, 38, 35, 0.18); }
.term__cmd { color: var(--c-ink); }
.term__prompt { color: var(--c-link); }
.term__pw { color: var(--c-ink-3); }
.term__lines { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.term__lines li { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid rgba(42, 38, 35, 0.08); }
.term__lines b { font-weight: var(--ty-fw-med); color: var(--c-mint-ink); }
/* печать и последовательность: только если JS отметил блок и нет reduced-motion */
.term--js .term__typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; }
.term--js .term__pw, .term--js .term__lines li { opacity: 0; translate: 0 6px; }
.term--run .term__typed { width: 9ch; transition: width 0.9s steps(9); }
.term--run .term__pw { opacity: 1; translate: 0 0; transition: opacity 0.25s 1s, translate 0.25s 1s; }
.term--run .term__lines li { opacity: 1; translate: 0 0; transition: opacity 0.25s, translate 0.25s; }
.term--run .term__lines li:nth-child(1) { transition-delay: 1.4s; }
.term--run .term__lines li:nth-child(2) { transition-delay: 1.8s; }
.term--run .term__lines li:nth-child(3) { transition-delay: 2.2s; }
.term--run .term__lines li:nth-child(4) { transition-delay: 2.6s; }
.term--run .term__lines li:nth-child(5) { transition-delay: 3s; }
/* кадры установки: слайдшоу, один крупный кадр, смена по таймеру */
.method__media { display: grid; gap: var(--s-5); min-width: 0; }
.shot { flex: none; margin: 0; min-width: 0; }
.shot img, .shot video { display: block; }
.shot figcaption { margin-top: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.shot__frame { aspect-ratio: 16 / 10; padding: var(--s-2); border-radius: var(--r-card); background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: inset 0 1.5px 0 #fff, 0 24px 48px -30px rgba(150, 70, 40, 0.4); }
.shot__frame img, .shot__frame video { width: 100%; height: 100%; object-fit: contain; background: #0f1623; border-radius: var(--r-inner); }
.show--js { gap: var(--s-3); grid-template-columns: 1fr; grid-template-rows: auto auto; }
.show--js .shot { grid-area: 1 / 1; opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity 0.5s ease, translate 0.5s ease; }
.show--js .shot.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.show--js .show__stage { display: grid; }
.show__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.show__arrow { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: var(--ty-h3); line-height: var(--ty-icon-lh); color: var(--c-ink); cursor: pointer; }
.show__dot { position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.show__dot::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; border-radius: 2px; background: rgba(42, 38, 35, 0.25); transition: background-color 0.3s; }
.show__dot[aria-current="true"]::before { background: var(--c-ink); }
.show__arrow:focus-visible, .show__dot:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -2px; }
/* якорь method: отступ под шапку даёт scroll-padding-top у html (base.css); свой scroll-margin удваивал его (цель уезжала на 104 px ниже) */
#method-title:focus { outline: none; }
@media (min-width: 960px) {
  .method { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-8); align-items: center; }
  .method__lists { grid-template-columns: 1fr 1fr; }
  .method__media, .term { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* ======== Телефон в шапке ======== */
.menu__cta { white-space: nowrap; min-height: var(--btn-h); }
.menu__cta .ico-phone { display: none; }
.cta-num { white-space: nowrap; }
.header__phone {
  margin-left: auto; margin-right: var(--s-2); display: inline-grid; place-items: center; flex: none; width: 48px; min-width: 48px; height: 48px;
  border-radius: var(--r-pill); color: var(--c-ink); border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28)); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgba(150, 70, 40, 0.4);
}
/* Кнопка «Вход» в шапке (только club, флаг header_login): вторичная, не выше главной CTA; на телефоне между иконкой телефона и меню */
.header__login { flex: none; white-space: nowrap; margin-right: var(--s-2); }
/* до 640 компактный вид: значок 44x44, подпись «Вход» остаётся для скринридера (иначе шапка не влезает рядом с телефоном и «Меню») */
@media (max-width: 639px) {
  .header__login { width: 44px; min-width: 44px; padding: 0; }
  .header__login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 640px) {
  .header__login .ico-login { display: none; }
}
/* «Вход» не сдвигает навигацию (аудит 15/10/2026, п. 15): навигация занимает строку сетки по всей ширине (1 / -1) и стоит ровно
   по центру контейнера, логотип слева, звонок и «Вход» справа в своих колонках поверх той же строки. «Вход» вплотную к звонку (12).
   Боковым колонкам нужно место под звонок и «Вход»: до 1440 у звонка только значок (номер остаётся для скринридера).
   960-1179: логотип с подписью и меню по центру не помещаются, навигация как раньше, во второй колонке после логотипа */
@media (min-width: 960px) {
  .header__inner:has(.header__login) { grid-template-columns: auto 1fr auto auto; }
  .header__login { grid-column: 4; grid-row: 1; margin-right: 0; margin-left: calc(var(--s-3) - var(--s-4)); }
}
@media (min-width: 1180px) {
  .header__inner:has(.header__login) .menu__body > nav { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .header__login { margin-left: calc(var(--s-3) - var(--s-6)); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .header__inner:has(.header__login) .menu__cta { width: var(--btn-h); padding: 0; justify-content: center; }
  .header__inner:has(.header__login) .menu__cta .cta-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 960px) {
  .header__phone { display: none; }
  .cta-call { display: none; }
  .menu__cta .ico-phone { display: block; flex: none; }
  .menu__cta { gap: var(--s-2); }
}

/* ======== Форма обратной связи в финальном блоке: левая колонка по верху, кнопка у низа, колонки одной высоты ======== */
.final__box--form { display: grid; gap: var(--s-6); align-items: start; background: radial-gradient(50% 70% at 100% 0%, rgba(214, 200, 240, 0.7), transparent 70%), var(--card-1); }
.final__main { display: flex; flex-direction: column; align-items: flex-start; }
.cform { padding: var(--pad-m); border-radius: var(--r-card); background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.32)); border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1.5px 0 #fff, inset 5px 5px 15px -10px rgba(0, 0, 0, 0.1), 0 30px 60px -36px rgba(150, 70, 40, 0.4); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cform { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } }
@media (prefers-reduced-transparency: reduce) { .cform { background: rgba(255, 252, 247, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* размер и вес заголовка формы по роли h3 (base.css) */
.cform__lead { margin-top: var(--s-2); font-size: var(--ty-body); line-height: var(--ty-body-lh); color: var(--c-ink-2); }
.cform__note { margin-top: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.cform__row { margin-top: var(--s-4); }
.cform__row label:not(.cform__consent) { display: block; margin-bottom: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.cform input[type="text"], .cform textarea { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); border: 1px solid rgba(42, 38, 35, 0.2); background: rgba(255, 255, 255, 0.75); color: var(--c-ink); font: inherit; line-height: var(--ty-body-lh); }
.cform ::placeholder { color: var(--c-ink-2); opacity: 1; } /* #5C534D на белом около 7:1 (раньше системный #757575, 4.4:1) */
.cform textarea { min-height: 96px; resize: vertical; }
.cform input:focus-visible, .cform textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cform [aria-invalid="true"] { border-color: var(--c-accent); }
.cform__err { margin-top: var(--s-1); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: #9B2C18; }
.cform__consent { display: flex; gap: var(--s-3); align-items: center; min-height: var(--btn-h-sm); padding-block: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); cursor: pointer; }
.cform__consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--c-accent); }
.cform .btn { margin-top: var(--s-5); width: 100%; }
.cform .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__status { margin-top: var(--s-3); line-height: var(--ty-body-lh); }
.cform__status:empty, .cform--js .cform__nojs { display: none; }
.cform__nojs { margin-top: var(--s-3); font-size: var(--ty-small); line-height: var(--ty-small-lh); }
/* Анимация формы: поля проявляются по очереди, когда форма вошла в окно (form.js ставит .cform--in); фокус поля плавный;
   при отправке кнопка дышит; ответ и ошибки проявляются. Движение только из словаря эталона (quiz-in, offer-glow), без новых keyframes. */
.cform input[type="text"], .cform textarea { transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.cform input[type="text"]:focus, .cform textarea:focus { border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 var(--s-1) color-mix(in oklab, var(--c-accent), transparent 82%); }
.cform__status--ok { padding: var(--s-4) var(--s-5); border-radius: var(--r-s); background: var(--c-mint); color: var(--c-mint-ink); }
.cform__status.is-bad { color: #9B2C18; }
@media (prefers-reduced-motion: no-preference) {
  .cform--js:not(.cform--in) > * { opacity: 0; }
  .cform--in > * { animation: quiz-in 0.25s ease backwards; animation-delay: calc(var(--i, 0) * 0.08s); }
  .cform__err:not([hidden]), .cform__status:not(:empty) { animation: quiz-in 0.25s ease; }
  .cform .btn.is-busy { animation: offer-glow 1.8s ease-in-out infinite; }
}
@media (min-width: 960px) {
  .final__box--form { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: stretch; }
  .final__box--form .final__main .btn { margin-top: auto; }
  .final__box--form .final__main p { margin-bottom: var(--s-6); }
}
.final__box .cform p { margin-top: 0; max-width: none; font-size: var(--ty-small); line-height: var(--ty-small-lh); }
.final__box .cform p.cform__lead { font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.final__box .cform .cform__lead, .final__box .cform .cform__note { margin-top: var(--s-2); color: var(--c-ink-2); }
.final__box .cform .cform__err { margin-top: var(--s-1); color: #9B2C18; }
.final__box .cform .cform__status { margin-top: var(--s-3); font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.final__box .cform .btn { margin-top: var(--s-5); }

/* ---------- Игра в финальном CTA: значки нейросетей, физика на JS (assets/js/waiters.js) ---------- */
.wt-wrap { width: 100%; margin-top: var(--s-5); }
.wt { position: relative; height: 17rem; overflow: hidden; border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 1px var(--c-glass-border); display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--s-2); padding: var(--s-3); }
.wt__t { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--c-glass-strong); font-size: var(--ty-small); }
.wt__t b { font-weight: var(--ty-fw-semi); }
.wt--on { display: block; padding: 0; touch-action: none; }
.wt--on .wt__t { position: absolute; left: 0; top: 0; display: block; width: 56px; height: 56px; padding: 0; border-radius: 0; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.wt--on .wt__t svg { display: block; filter: drop-shadow(0 4px 8px rgba(42, 38, 35, 0.18)); transition: transform 0.15s ease; }
.wt--on .wt__t b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-size: var(--ty-small); line-height: 1.2; white-space: nowrap; color: var(--c-ink-2); pointer-events: none; }
.wt__t.is-say svg { transform: scale(1.1); }
.wt__t.is-grab { cursor: grabbing; z-index: 2; }
.wt__t.is-grab svg { transform: scale(1.18); filter: drop-shadow(0 10px 14px rgba(42, 38, 35, 0.28)); }
.wt__bub { position: absolute; left: 0; top: 0; z-index: 3; padding: 6px 12px; border-radius: 14px; background: #fff; color: var(--c-ink); font-size: var(--ty-small); font-weight: var(--ty-fw-semi); line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 14px rgba(42, 38, 35, 0.16); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.wt__bub.on { opacity: 1; }
.wt__bub--oops { background: var(--c-accent); color: var(--c-accent-ink); }
.wt__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.final__box .wt__hint { margin: 0; font-size: var(--ty-small); color: var(--c-ink-2); }
.wt__snd { min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: 999px; background: transparent; color: var(--c-ink-2); font: inherit; font-size: var(--ty-small); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wt__snd:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.final__box--form .final__main .wt-wrap + .btn { margin-top: var(--s-5); }

/* ======== Раздел /products/: общие правки (06/10/2026), только токены ======== */

/* Хлебные крошки: одна строка, тап-цель 44, текущая страница сжимается с многоточием, а не переносится */
.crumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.crumbs > * { flex: none; }
.crumbs > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a, .crumbs .textlink { display: inline-flex; align-items: center; min-height: 44px; }

/* Плашка первого экрана хаба: список цен вместо карусели; свободная высота колонки уходит списку, а не промежуткам */
.hero-plate__stage:last-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-plate__stage .checklist { gap: 0; }
.hero-plate__stage .checklist li { padding-block: var(--s-2); border-bottom: 1px solid rgba(42, 38, 35, 0.12); }
.hero-plate__stage .checklist li:last-child { border-bottom: 0; }
.hero-plate__stage .checklist li::before { top: calc(var(--s-2) + 0.8em); }

/* Заголовок финального блока с формой, когда разметка даёт p.t-h2: вид h2, а не лид (.final__box p) */
.final__box p.t-h2 { margin-top: 0; max-width: var(--ty-h2-ch); font-size: var(--ty-h2); line-height: var(--ty-h2-lh); font-weight: var(--ty-h2-fw); letter-spacing: var(--ty-h2-ls); }
.final__box--form .final__main p.t-h2 { margin-bottom: 0; }
.final__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.final__actions .btn { margin-top: 0; }

/* Строка кода доступа вне .cform: поле и кнопка не ниже 44, зазор между ними */
.access__form { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.access__form label { font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.access__form input[type="text"] { width: 100%; min-height: var(--btn-h-sm); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); border: 1px solid rgba(42, 38, 35, 0.2); background: rgba(255, 255, 255, 0.75); color: var(--c-ink); font: inherit; line-height: var(--ty-body-lh); }
.access__form input[type="text"]::placeholder { color: var(--c-ink-2); opacity: 1; }
.access__form input[type="text"]:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.access__form .btn { margin-top: var(--s-2); }
@media (min-width: 640px) {
  .access__form { grid-template-columns: minmax(0, 20rem) auto; justify-content: start; align-items: center; column-gap: var(--s-3); }
  .access__form label { grid-column: 1 / -1; }
  .access__form .btn { margin-top: 0; }
}

/* Три карточки без сироты: на 960+ три колонки (явно .bigcards--3 или ровно три элемента); кейсы и «кому подойдёт» свои */
@media (min-width: 960px) {
  .bigcards--3, .bigcards:not(.bigcards--cases):not(.bigcards--aud):has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* «С чем работаем»: второй span в пункте (needs) и четыре группы вместо пяти */
.stack__list b + span + span { color: var(--c-ink); font-weight: var(--ty-fw-med); }
@media (min-width: 1280px) {
  .stack:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}

/* Истории с тремя строками вместо четырёх: подсетка на четыре ряда, без пустого пятого */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .stories:has(.story__steps > :nth-child(3):last-child) { grid-template-rows: repeat(4, auto); }
    .stories:has(.story__steps > :nth-child(3):last-child) .story { grid-row: span 4; }
    .stories:has(.story__steps > :nth-child(3):last-child) .story__steps { grid-row: 2 / span 3; }
  }
}

/* Крошки в nowrap не раздувают одноколоночную сетку hero и ряды flex «кому подойдёт» (min-width: auto) */
@media (max-width: 959px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) { .bigcards--aud > li { min-width: 0; } }

/* Блок цифр с тремя или четырьмя фактами: колонок столько же, сколько фактов (пять колонок рвали значения) */
@media (min-width: 960px) {
  .facts__grid:has(> .fact:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .facts__grid:has(> .fact:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* «Кому подойдёт» на 960-1279: три узкие карточки, длинное слово в заголовке переносится, а не вылезает */
@media (min-width: 960px) and (max-width: 1279px) { .bigcards--aud .bigcard__title { hyphens: auto; overflow-wrap: break-word; } }

/* club, 07/10/2026 (решение Владимира): мелкий текст (до 16 px) на цветных плашках и стекле цветом --c-ink; токен --c-ink-2 не менялся.
   Только страница club (body[data-block="club"]): /products/, главная и /uslugi/ те же селекторы не затрагивает. */
body[data-block="club"] :is(#audience, #learn, #stack, #stories, #program, #pricing, #method, #facts, #cta) :is(.bigcard__top, .bigcard__kicker, .bigcard__count, .aud__label, .aud__not, .card__label, .story__kicker, .story__steps dt, .stack__list span, .shot figcaption, .tier__note, .fact__label, .cform__lead, .cform__note, .cform__row label:not(.cform__consent)) { color: var(--c-ink); }
/* все страницы кроме club (у него правило выше), 08/10/2026: блок формы #cta по эталону club (qa_gold CTA требует --c-ink); другие секции не затрагиваются */
body:not([data-block="club"]) #cta :is(.cform__lead, .cform__note, .cform__row label:not(.cform__consent)) { color: var(--c-ink); }
/* ярлык флагмана: белый на --c-accent давал 4.89:1, на --c-accent-hover около 6.3:1 */
body[data-block="club"] .tier__badge { background: var(--c-accent-hover); }
/* название тарифа это h3: размер и вес по роли карточки, не подпись 14 px / 400 */
body[data-block="club"] .tier__name { font-size: var(--ty-h3); font-weight: var(--ty-h3-fw); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); color: var(--c-ink); }
/* club, 07/10/2026: «С чем работаем» на 1280+: заголовки групп на общей линии (subgrid), светлая вставка тянется до низа цветной
   карточки, пункты равномерно по её высоте: пустоты внизу у короткой группы нет (группы 4/4/4/4/3 пункта, тексты разной длины) */
@media (min-width: 1280px) {
  body[data-block="club"] .stack { grid-template-rows: auto 1fr; row-gap: 0; }
  body[data-block="club"] .stack__group { display: grid; grid-row: span 2; grid-template-rows: auto 1fr; }
  @supports (grid-template-rows: subgrid) { body[data-block="club"] .stack__group { grid-template-rows: subgrid; } }
  body[data-block="club"] .stack__group > summary { align-self: start; }
  body[data-block="club"] .stack__group::details-content { display: grid; grid-template-rows: 1fr; }
  body[data-block="club"] .stack__list { align-content: space-between; }
}

/* Пустоты внутри выровненных блоков (08/10/2026, общие линии, GOLD-STANDARD 1.4 п.1): qa_layout void-uneven.
   Правила общие для всех страниц с этими блоками. */
/* .acc__grid оставлен на stretch: align-items:start даёт error row-height. FAQ «боль/решение»: ширина колонок пропорциональна длине текста
   (flex-basis = max-content, сжатие пропорционально ему), высоты почти равны, пустота внизу короткого блока уходит; программа 2x2 остаётся на сетке. */
@media (min-width: 640px) {
  .acc--faq .acc__grid { display: flex; }
  .acc--faq .acc__grid > .acc__block { flex: 1 1 auto; min-width: 36%; }
}
/* Тарифы: пункты списка ровно делят высоту вкладки, последний пункт у низа, пустоты внизу нет (как .stack__list у club) */
.tier__list { align-content: space-between; }
/* Финал с формой: колонка с текстом по центру высоты формы, а не растянута с пустым низом */
@media (min-width: 960px) {
  .final__box--form .final__main { align-self: center; }
  /* и наоборот: если текст выше формы (длинный заголовок, /cases/), форма по центру, без пустого низа (16/10/2026) */
  .final__box--form > .cform { align-self: center; }
}

/* /uslugi/ (18/10/2026): карточки услуг как home/services, общие линии те же, что в home.css:96-119 (home.css в бандл uslugi не входит).
   Метки над заголовком нет, поэтому 4 строки subgrid: заголовок, описание, «Когда нужна», цена. */
body[data-block="uslugi"] #services .bigcard { min-height: 0; }
body[data-block="uslugi"] #services .bigcard__title { padding-top: 0; margin-top: 0; }
@media (min-width: 960px) {
  body[data-block="uslugi"] #services .bigcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  body[data-block="uslugi"] #services .bigcard__title { grid-row: 1; align-self: start; }
  body[data-block="uslugi"] #services .bigcard__title a { align-items: flex-start; }
  body[data-block="uslugi"] #services .bigcard__text { grid-row: 2; }
  body[data-block="uslugi"] #services .card__inset { grid-row: 3; }
  body[data-block="uslugi"] #services .bigcard__foot { grid-row: 4; align-self: end; }
}
@media (max-width: 959px) {
  body[data-block="uslugi"] #services .bigcard__foot { margin-top: auto; }
  body[data-block="uslugi"] #services .bigcard__text { margin-bottom: var(--s-5); }
}