/* ============================================================
   Эмоции Landing Page — Styles
   Imports shared styles; page-specific near-white monochrome theme.
   Все переопределения — только для этого лендинга.
   ============================================================ */

@import url('../../../shared/css/shared.css');

/* --- Токены палитры ---
   Базовые токены приходят из темы через shared/css/shared.css →
   assets/css/design-system.css. Локальное переопределение одно — плотность
   белой «вуали» поверх паттернов: на этой странице все оверлеи белые на 95%
   (в теме muted-вариант — 84%). Стили лендинга подключаются после темы,
   поэтому :root ниже перекрывает токен именно здесь. */
:root {
  --pattern-veil-muted: rgba(255, 255, 255, 0.95);
}

/* Старые оверлеи-дивы больше не нужны: подложка рисуется фоном самого блока
   (фон всегда под контентом — текст и фото не перекрываются). */
.hero__overlay,
.for-whom__overlay,
.instructor-card__overlay,
.price-card__overlay,
.cta__overlay,
.logos-eros__overlay,
.video-section__overlay {
  display: none;
}

/* Общая геометрия слоёв подложки: [белый оверлей, паттерн] */
.hero,
.for-whom__column--men,
.for-whom__column--women,
.video-section,
.price-card,
.cta {
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-blend-mode: normal, saturation;
}

/* ============================================================
   HERO — крупное название курса + тег под ним, без разделения
   ============================================================ */
.hero {
  display: block;
  height: auto;
  /* Hero — чистый белый без подложки: паттерн переехал на полосу с кнопкой
     «Записаться в группу» (.join-panel). */
  background: var(--color-background);
  padding: 128px 40px 104px;
  text-align: center;
}

.hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(96px, 15vw, 240px);
  font-weight: 700;
  line-height: 0.9;
  color: var(--color-foreground);
}

.hero__tagline {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-foreground-muted);
  max-width: 860px;
}

/* --- Круг дня и ночи внутри hero ---
   Круг переехал в hero из секции «Круг дня и ночи» (parts/body.html,
   2026-10-02): ширина — как была у .lifewheel-variant (640px), плюс воздух
   сверх gap .hero__inner. Остальные правила круга — в блоке LIFEWHEEL ниже,
   они не зависят от секции-обёртки. */
.hero__wheel {
  width: 100%;
  max-width: 640px;
  margin-top: 24px;
}

@media (max-width: 960px) {
  .hero__wheel {
    margin-top: 16px;
  }
}

/* ============================================================
   JOIN PANEL — полоса с кнопкой «Записаться в группу»
   Фон перенесён с hero: оверлей 0.975 белым → серый слой в режиме
   saturation (alpha 0.5 = обесцвечивание наполовину) → pattern-dark.
   Прозрачность задана явно, а не токеном темы: на проде
   --pattern-veil может быть ещё 0.84. */
.join-panel {
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  /* Полоса отделена линиями с двух сторон: соседние секции белые,
     без нижней линии подложка обрывалась «в воздухе». */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.join-panel__cta:hover {
  background: var(--color-foreground);
  color: var(--color-foreground-light);
}

/* ============================================================
   FOR WHOM — светлые колонки вместо цветных
   ============================================================ */
.for-whom__column--men {
  background-color: var(--color-background);
  background-image: linear-gradient(var(--pattern-veil), var(--pattern-veil)), url('../../../shared/images/pattern-teal.webp');
  border-right: 1px solid var(--color-border);
}

.for-whom__column--women {
  background-color: var(--color-background-muted);
  background-image: linear-gradient(var(--pattern-veil-muted), var(--pattern-veil-muted)), url('../../../shared/images/pattern-warm.webp');
}

.for-whom__icon,
.for-whom__column--men .for-whom__icon {
  color: var(--color-primary);
}

.for-whom__column-title {
  color: var(--color-foreground);
}

.for-whom__description {
  color: var(--color-foreground-muted);
}

.for-whom__card-title {
  color: var(--color-foreground);
}

/* ============================================================
   VIDEO — светлая секция
   ============================================================ */
.video-section {
  background-color: var(--color-background-muted);
  background-image: linear-gradient(var(--pattern-veil-muted), var(--pattern-veil-muted)), url('../../../shared/images/pattern-video.webp');
}

.video-slider__dot {
  background: rgba(35, 32, 39, 0.15);
}

/* Ч/б обложки записей: цветные превью выбивались из монохромной гаммы
   (тот же приём, что у ч/б аватаров отзывов, §0 п.2). Глиф «плей» лежит
   поверх и остаётся белым — единственная разрешённая тень (§0 п.4). */
.video-card__thumb img {
  filter: grayscale(1);
}

/* Пустые ячейки ряда открытых занятий: белая плитка с рамкой и приглушённой
   иконкой часов — иерархия рамкой, без тени (§6, §9.5). Реальная запись
   сохраняет обычный тёмный превью-кадр. */
.video-card--empty .video-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

.video-card__empty-icon {
  width: 56px;
  height: 56px;
  color: var(--color-accent);
}

/* ============================================================
   AUTHORS / PROGRAM / RESULTS — светлые карточки с рамкой
   ============================================================ */
.author-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

/* ============================================================
   INSTRUCTORS — две белые колонки без подложек
   Паттерны сняты: секция стоит между белыми «Почему наш курс?» и
   «Отзывы», фактуры здесь только дробили ряд (§8 — подложки для крупных
   блоков, не для карточек-колонок). Колонки разделяет шов 1px.
   ============================================================ */
.instructor-card--oleg {
  background-color: var(--color-background);
  background-image: none;
  border-right: 1px solid var(--color-border);
}

.instructor-card--katya {
  background-color: var(--color-background);
  background-image: none;
}

/* Колонки уже: сетка 1000px по центру, колонки по 500px — как у реестра
   «Узнаёте себя?» (.for-whom--registry). В shared.css .instructors__columns
   идёт во всю ширину, и аватары с подписями разъезжались к краям экрана;
   содержимое по-прежнему центрируется в своей колонке. */
.instructors__columns {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Нижний отступ секции ведущих: в shared.css она идёт по рецепту «в обрез»
   (padding: 80px 0 0 0), а ниже — полоса «Оргвопросов» с подложкой и рамкой
   1px. Без зазора линия прилипала к карточкам ведущих — ритм 80px, как у
   остальных полос (у .program перед «Почему наш курс?»). */
.instructors {
  padding-bottom: 80px;
}

@media (max-width: 1300px) {
  .instructors {
    padding-bottom: 64px;
  }
}

@media (max-width: 960px) {
  .instructors {
    padding-bottom: 48px;
  }
}

/* ============================================================
   REVIEWS — равная сетка 2×3 (все ячейки одного размера) + кнопка
   ============================================================ */
.reviews__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
  align-items: stretch;
}

.reviews__actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.review-card {
  /* На треть светлее базового muted: color-mix берёт 2/3 #F7F6F5 и
     1/3 белого → #FAF9F8. Карточка остаётся отличимой от белой страницы,
     но перестаёт читаться серой плашкой. */
  background: color-mix(in srgb, var(--color-background-muted) 67%, #ffffff);
  border: 1px solid var(--color-border);
}

.review-card__title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-foreground);
}

/* Автор прижат к низу ячейки, рядом — аватар */
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  /* Ч/б аватар: цветные снимки выбивались из монохромной гаммы */
  filter: grayscale(1);
}

.reviews-group__button {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.reviews-group__button:hover {
  background: var(--color-primary);
  color: var(--color-foreground-light);
}

.price-card {
  /* Фон как у «Эмоциональное развитие» (CTA): оверлей 0.975 белым →
     серый слой в режиме saturation (alpha 0.5 = обесцвечивание наполовину)
     → pattern-dark. Раньше был veil из токена темы (на проде может быть 0.84). */
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  border: 1px solid var(--color-border);
}

.price-card__tier {
  color: var(--color-foreground);
}

.price-card__description {
  color: var(--color-foreground-muted);
}

.price-card__button {
  background: var(--color-primary);
  color: var(--color-foreground-light);
}

.price-card__button:hover {
  background: var(--color-primary-hover);
}

.price-card__contact {
  color: var(--color-foreground-muted);
}

/* ============================================================
   CTA — светлая полоса
   ============================================================ */
.cta {
  /* Фон как у «Почему наш курс?»: оверлей 0.975 белым → серый слой
     в режиме saturation (alpha 0.5 = обесцвечивание наполовину) →
     pattern-dark. Раньше здесь был muted-фон с тёплым pattern-warm. */
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   LESSONS — список уроков аккордеоном (динамика: курс на сайте)
   Секция повторяет рецепт FAQ дизайн-системы (§9.10):
   монохромная почти белая гамма, компонент .accordion-item.
   Содержимое собирает плагин satway-club из md-файлов урока —
   тот же алгоритм, что и дерево на /courses/{slug}/lessons/.
   ============================================================ */
.lessons {
  /* Белый фон: секция идёт между «Содержание курса» и «Почему наш курс?»,
     которые тоже белые, — серый островок в середине рвал страницу.
     Карточка тем (.lessons__topics) белая с рамкой 1px, поэтому на белом
     фоне не теряется; бейдж номера остаётся на muted — это рецепт
     бейджа (§9.8). Верхний паддинг меньше базовых 80px: обе секции
     белые, границы между ними нет, и 80+80 давали лишние 160px пустоты. */
  background: var(--color-background);
  padding: 48px 80px 80px;
  text-align: center;
}

.lessons__title {
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 700;
  color: var(--color-foreground);
}

.lessons__subtitle {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-foreground-muted);
  margin-top: 16px;
}

.lessons__list {
  max-width: 672px;
  margin: 48px auto 0;
  text-align: left;
}

/* Название урока — тот же кегль и вес, что у названий пунктов в колонках
   «Содержание курса» (Yanone 24px/400). Селектор ограничен .lessons__list:
   аккордеон FAQ остаётся на базовых 22px из shared.css. */
.lessons__list .accordion-item__question {
  font-size: 24px;
  font-weight: 400;
}

/* Строка урока: тоггл аккордеона + плашка «Пробный урок» справа. */
.lessons__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lessons__head .accordion-item__header {
  flex: 1 1 auto;
  min-width: 0;
}

/* Плашка-кнопка пробного урока: ведёт на страницу урока (/lessons/{N}/),
   поэтому это ссылка, а не элемент аккордеона. Зелёная — это «доступно». */
.lessons__trial {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-success, #23803f);
  background: var(--color-success, #23803f);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-foreground-light);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.lessons__trial:hover {
  color: var(--color-foreground-light);
  background: var(--color-success-hover, #1c6a33);
  border-color: var(--color-success-hover, #1c6a33);
}

/* Темы урока — одна колонка: белая карточка, строки с номером-маркером
   и тонкими разделителями 1px (дизайн-система §9.5, §6). */
.lessons__outline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lessons__section-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-foreground-muted);
  margin: 0 0 8px;
}

.lessons__topics {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

.lessons__topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.lessons__topic + .lessons__topic {
  border-top: 1px solid var(--color-border-light);
}

.lessons__topic-index {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-foreground-muted);
  background: var(--color-background-muted);
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.lessons__topic-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-foreground-alpha);
}

/* Урок без материалов (нет секций/подзаголовков): статичная строка
   вместо аккордеона — раскрывать нечего. */
.lessons__static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.lessons__list .lessons__static .accordion-item__question {
  font-size: 24px;
  font-weight: 400;
}

/* ============================================================
   FOOTER — светлый
   ============================================================ */
.footer {
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1300px) {
  .hero {
    padding: 96px 32px 80px;
  }

  .hero__tagline {
    font-size: 26px;
  }

  .lessons {
    padding: 40px 48px 64px;
  }

  .lessons__title {
    font-size: 40px;
  }
}

@media (max-width: 960px) {
  .hero {
    padding: 64px 24px 56px;
  }

  .hero__inner {
    gap: 20px;
  }

  .hero__eyebrow {
    font-size: 15px;
    letter-spacing: 0.18em;
  }

  .hero__title {
    font-size: clamp(72px, 22vw, 140px);
  }

  .hero__tagline {
    font-size: 21px;
  }

  .for-whom__column--men {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .instructor-card--oleg {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .reviews__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
  }

  .lessons {
    padding: 32px 24px 48px;
  }

  .lessons__title {
    font-size: 36px;
  }

  .lessons__subtitle {
    font-size: 18px;
  }

  .lessons__list {
    margin-top: 32px;
  }
}

/* ============================================================
   ABOUT (О чём?) — текстовый блок
   Секция белая (осознанное отклонение от серого фона .authors-word
   в shared.css): блок идёт сразу после hero и читается как разворот,
   а не как ещё одна карточная секция. Текст — столбец 672px по
   центру (§9.4), выравнивание текста внутри — тоже по центру
   (2026-10-02, было по левому краю); лид — Yanone 30 muted (§4),
   абзацы — Roboto 16/1.7.
   ============================================================ */
.authors-word {
  background: var(--color-background);
}

.about-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 672px;
  margin: 48px auto 0;
  text-align: center;
}

.about-text__lead {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-foreground-muted);
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-body p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-foreground-alpha);
}

/* Список тезисов «О чём?» — тот же рецепт, что у пунктов «Оргвопросов»
   (.format-detail-item): строки с разделителем 1px в колонке 672px.
   Отличия: в слоте маркера — номер тезиса, а не иконка; текст разбит
   на две колонки — вводные слова и пояснение, — поэтому при переносе
   строк пояснение не заезжает под вводные слова. */
.about-theses {
  text-align: left;
}

.about-theses .format-detail-item {
  display: grid;
  grid-template-columns: 20px 160px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.about-theses .format-detail-item__num {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-primary);
}

.about-theses .format-detail-item__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-foreground);
}

/* Узкий экран: пояснение уходит под вводные слова, но остаётся во
   второй колонке — номер по-прежнему слева. */
@media (max-width: 720px) {
  .about-theses .format-detail-item {
    grid-template-columns: 20px minmax(0, 1fr);
    row-gap: 4px;
  }

  .about-theses .format-detail-item__lead,
  .about-theses .format-detail-item__text {
    grid-column: 2;
  }
}

@media (max-width: 960px) {
  .about-block {
    margin-top: 32px;
  }

  .about-text__lead {
    font-size: 21px;
  }
}

/* ============================================================
   PROGRAM (Содержание курса) — раскладка как у «Узнаёте себя?»
   Две колонки не шире 500px (сетка 1000px по центру), равные ряды
   через subgrid, центрированный текст, тонкие разделители 1px,
   без карточек и значков. Отличие одно: фон белый, без паттерна.
   ============================================================ */
.program {
  background: var(--color-background);
  /* Full-bleed как у реестра «Узнаёте себя?»: без боковых паддингов, чтобы
     сетка колонок могла дойти до 1000px на планшете (в shared.css 80px
     со всех сторон). */
  padding: 80px 0;
}

.program__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Строки с запасом: заголовок колонки + до семи пунктов. Ряды общие для
     двух колонок (subgrid ниже), поэтому пустые строки имеют нулевую высоту
     и на вид не влияют. Раньше стояло repeat(4, auto)/span 4 — четвёртый
     пункт уезжал в ту же строку и накладывался на третий. */
  grid-template-rows: repeat(8, auto);
  row-gap: 0;
  /* Базовый column-gap: 24px из shared.css снимаем: разделяет шов 1px,
     как в реестре «Узнаёте себя?» — колонки ровно по 500px. */
  column-gap: 0;
  max-width: 1000px;
  margin: 48px auto 0;
}

/* Колонка = заголовок + ряды пунктов; subgrid держит равные высоты
   слева и справа, как в реестре «Узнаёте себя?». */
.program-block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
  background: none;
  background-image: none;
  padding: 0 48px;
  gap: 0;
  text-align: center;
  border: none;
}

.program-block:first-child {
  border-right: 1px solid var(--color-border);
}

/* Заголовок колонки — первый ряд реестра: без рамки, линию под ним даёт
   border-top первого пункта. */
.program-block__header {
  padding: 0 0 24px;
}

.program-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-light);
}

.program-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-foreground);
}

.program-card__description {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-foreground-alpha);
}

@media (max-width: 1300px) {
  .program {
    padding: 64px 0;
  }

  .program-block {
    padding: 0 32px;
  }
}

@media (max-width: 960px) {
  .program {
    padding: 48px 0;
  }

  .program__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 0;
    margin-top: 32px;
  }

  .program-block {
    /* В стопке общие треки не нужны — колонки идут одна под другой. */
    grid-template-rows: none;
    grid-row: auto;
    padding: 0 24px;
  }

  .program-block:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* --- «Оргвопросы» — фон как у «Узнаёте себя?» ---
   Тот же приём: белый veil (§8) + серый слой в режиме saturation,
   картинка обесцвечена. Отличие от соседей: pattern-video (на странице
   он лежит только в видео-секции, на сером фоне и с muted-veil),
   поэтому рядом с «Содержанием курса» фактура читается иначе.
   Правка в CSS лендинга: .results общий, в shared.css трогать нельзя.
   .results оставлен в селекторе: блок «Почему наш курс?» удалён из
   parts/body.html 2026-10-02, полосу на этой странице держит .format. */
.results,
.format {
  background-color: var(--color-background);
  /* Фон тот же, что у полосы с кнопкой «Записаться в группу»: оверлей
     0.975 белым → серый слой в режиме saturation (alpha 0.5 = обесцвечивание
     наполовину) → pattern-dark. Значения заданы явно, а не токеном темы
     (на проде --pattern-veil может быть ещё 0.84). */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  /* Линии сверху и снизу — как у других полос с подложкой (§6). */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   «ОРГВОПРОСЫ» (.format) — оформлен по аналогии с «Почему наш курс?»
   Заголовок секции (§9.4): h2 → разделитель → подзаголовок; ниже абзац
   и список пунктов с разделителями 1px (§6) в центральной колонке 672px
   (§5). Классы .format__subtitle / .format__list / .format__description —
   только этого лендинга; общий каркас .format лежит в shared.css.
   ============================================================ */
.format__subtitle {
  margin: 16px 0 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
  color: var(--color-foreground-muted);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.format__list {
  /* Единая длина строки текстовых блоков — как у .results__list (§5). */
  max-width: 672px;
  margin: 48px auto 0;
  text-align: left;
}

.format__description {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-foreground-alpha);
}

/* Пункты — рецепт списка результатов: разделитель 1px между строками,
   иконка в цвете акцента, без карточки и рамки. */
.format .format-detail-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.format .format-detail-item__icon {
  color: var(--color-primary);
}

@media (max-width: 960px) {
  .format__list {
    margin-top: 32px;
  }
}

/* ============================================================
   FOR-WHOM (Узнаёте себя?) — две центрированные колонки
   Пункты разделены тонкими линиями, без карточек и нумерации, текст
   по центру в обеих колонках. Подложка — паттерн под veil, как у hero
   (§8); выбран pattern-coral: pattern-dark занят hero, teal/warm —
   колонками этого блока в базовой вёрстке, pattern-video — видео-секцией.
   ============================================================ */
.for-whom--registry {
  background-color: var(--color-background);
  /* Третий слой — серый в режиме saturation: он забирает насыщенность
     у паттерна, оставляя его яркость, поэтому картинка читается ч/б.
     Прозрачность оверлея задана явно (0.975), а не токеном темы:
     на проде --pattern-veil может быть ещё 0.84. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(var(--color-foreground-muted), var(--color-foreground-muted)),
    url('../../../shared/images/pattern-coral.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  /* Линии сверху и снизу: подложка — полоса на белой странице,
     без них она обрывалась «в воздухе» (как у .join-panel). */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 80px 0;
}

/* Сетка строк общая для двух колонок (subgrid): ряды с запасом.
   Один трек = один ряд слева и справа, поэтому высоты ячеек слева
   и справа совпадают, а разделительные линии идут по одной оси.
   Число строк было жёстким (3 — ровно три пункта), и четвёртый пункт уезжал
   в строку третьего и рисовался поверх него. Пустые строки нулевой высоты,
   вид не меняют. */
.for-whom--registry .for-whom__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(8, auto);
  row-gap: 0;
  /* Пара колонок — максимум 1000px, то есть не шире 500px каждая;
     блок центрируется, подложка секции остаётся во всю ширину. */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  /* Базовый margin-top: 48px из shared.css задавал воздух под подзаголовком;
     здесь он сохраняется явно, а вертикальные паддинги колонок убраны —
     иначе воздух дублировался и сверху, и снизу. */
  margin-top: 48px;
}

/* Колонки прозрачные: подложка секции видна целиком, как в hero */
.for-whom--registry .for-whom__column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
  background: none;
  background-image: none;
  /* Вертикальных паддингов нет: воздух даёт margin-top сетки (сверху)
     и padding-bottom секции (снизу). */
  padding: 0 48px;
  gap: 0;
  text-align: center;
}

.for-whom--registry .for-whom__column--men {
  border-right: 1px solid var(--color-border);
}

/* Первый ряд колонок открывает шов под заголовком секции */
.for-whom--registry .for-whom__card:first-child {
  border-top: none;
}

.for-whom--registry .for-whom__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-light);
}

.for-whom--registry .for-whom__card-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-foreground);
}

.for-whom--registry .for-whom__card-text {
  font-size: 15px;
  line-height: 1.6;
  /* На подложке — графит с alpha, а не muted: veil добавляет ~10 единиц
     тёплого тона, и приглушённый серый на нём теряет контраст (§3). */
  color: var(--color-foreground-alpha);
}

@media (max-width: 1300px) {
  .for-whom--registry .for-whom__column {
    padding: 0 32px;
  }
}

@media (max-width: 960px) {
  .for-whom--registry {
    padding: 48px 0;
  }

  .for-whom--registry .for-whom__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: 32px;
  }

  .for-whom--registry .for-whom__column {
    /* В стопке общие треки не нужны — колонки идут одна под другой. */
    grid-template-rows: none;
    grid-row: auto;
    padding: 0 24px;
  }
  .for-whom--registry .for-whom__column--men {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ============================================================
   HERO-BUY — покупка участия в потоке (месяц / семестр)
   Разметка и копирайт карточек — в parts/org.html; satway-club
   (fill_hero_buy_slot) заполняет только данные (DYNAMIC_HERO_*)
   и переключает состояния классами is-hidden.
   Формы уходят напрямую в admin-post.php → ссылка на оплату
   без промежуточных шагов.
   ============================================================ */
.hero-buy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Равные ячейки: кнопки обеих карточек встают на одну линию (§9.6). */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 24px;
  max-width: 760px;
  /* Ритм секции: от подзаголовка до контента 48px (§5). */
  margin: 48px auto 0;
}

@media (max-width: 720px) {
  .hero-buy__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

.hero-buy__title {
  text-align: center;
}

.hero-buy__subtitle {
  margin: 16px 0 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
  color: var(--color-foreground-muted);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Карточка тарифа — рецепт §9.8: светлый фон с подложкой, рамка 1px,
   паддинг 32px 24px, гэп 20px, всё по центру. */
.hero-buy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 32px 24px;
  text-align: center;
  /* Как у .price-card этой страницы: белый + обесцвеченный pattern-dark. */
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  border: 1px solid var(--color-border);
  border-radius: 0;
}

.hero-buy-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-foreground);
}

.hero-buy-card__price {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}

.hero-buy-card__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-foreground-muted);
}

/* Форма прижата к низу карточки — кнопки в обеих карточках на одной линии. */
.hero-buy-card__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: auto;
}

/* Тумблер автопродления — общий рецепт §9.27 (.toggle в design-system.css). */

/* Кнопка — рецепт primary §9.12: заливка, Yanone 25px/300, радиус 0, без рамки. */
.hero-buy-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 32px;
  background-color: var(--color-primary);
  color: var(--color-foreground-light);
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-buy-card__button:hover,
.hero-buy-card__button:focus {
  background-color: var(--color-primary-hover);
  color: var(--color-foreground-light);
}

/* Тариф «месяц» после отсечки присоединения (две недели от старта занятий):
   карточка остаётся на месте — структура part'а не меняется, — но оформить её
   нельзя. Кнопка выключена билдером (`disabled`), форма приглушена; пояснение
   выводится в лист `.hero-buy__closed` под сеткой. */
.hero-buy-card.is-closed .hero-buy-card__price,
.hero-buy-card.is-closed .hero-buy-card__form {
  opacity: 0.55;
}

.hero-buy-card.is-closed .hero-buy-card__form {
  pointer-events: none;
}

.hero-buy-card__button:disabled,
.hero-buy-card__button:disabled:hover,
.hero-buy-card__button:disabled:focus {
  background-color: var(--color-border);
  color: var(--color-foreground-muted);
  cursor: not-allowed;
}

.hero-buy__note {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: var(--color-foreground-muted);
}

.hero-buy__closed {
  margin: 0;
  text-align: center;
  color: var(--color-foreground-muted);
}

/* Сообщение под видимой сеткой (закрытый «месяц») отделяем от карточек:
   без отбивки оно липнет к нижней границе. */
.hero-buy__grid:not(.is-hidden) + .hero-buy__closed {
  margin-top: 24px;
}

/* Состояния блока покупки: грид, карточка и примечание скрываются классами
   is-hidden, а не удалением из разметки — иначе сдвигаются координаты
   текстов, которые адресует инлайн-редактор лендинга (LANDING_EDITOR.md).
   Пустые сообщения о состоянии тоже убираются из потока. */
.hero-buy__grid.is-hidden,
.hero-buy-card.is-hidden,
.hero-buy__note.is-hidden,
.hero-buy__access.is-hidden,
.hero-buy__access-link.is-hidden,
.hero-buy__closed:empty,
.hero-buy__error:empty {
  display: none;
}

/* ============================================================
   HERO-BUY__ACCESS — доступ вместо покупки (курс уже куплен)
   Заголовок и подписи ссылок — в parts/org.html, builder
   (fill_hero_buy_slot) подставляет href и прячет ссылки, которых
   у курса нет. Показывается вместо сетки тарифов.
   ============================================================ */
.hero-buy__access {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* Ритм секции: от подзаголовка до контента 48px (§5). */
  margin: 48px auto 0;
}

.hero-buy__access-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  color: var(--color-foreground);
}

.hero-buy__access-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ============================================================
   LIFE WHEEL — круг дня и ночи (2×2 вокруг центральных осей)
   Подписи по часовой от левого-низа: утро → день → вечер → ночь.
   Метки стоят у перекрестия; в дальнем углу сектора проявляется
   текст — ровно когда в этот сектор входит солнце. Сектор с солнцем
   подсвечивается белым, сектор с луной затемняется штриховкой.
   У клеток нет рамок — только две центральные оси.
   Осознанное исключение из дизайн-системы (§12 — анимаций в языке
   нет): движение несёт смысл (цикл). Круг допустим — это
   орбита-диаграмма, а не скругление блока (§7). Анимации идут только
   когда блок в кадре (IntersectionObserver, parts/footer.html)
   и выключаются при prefers-reduced-motion.
   ============================================================ */
.lifewheel {
  background: var(--color-background);
  padding: 80px 40px;
  text-align: center;
  /* Круглый вариант выпускает светила за габарит холста (центр на риске),
     а повёрнутая орбита — квадрат на диагональ. Оба переполнения гасим
     здесь, не создавая скролл-контейнера. */
  overflow: hidden;
  overflow: clip;
}

.lifewheel__title {
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 700;
  color: var(--color-foreground);
}

.lifewheel__subtitle {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-foreground-muted);
}

.lifewheel__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  margin-top: 48px;
}

.lifewheel-variant {
  width: 100%;
  max-width: 640px;
}

/* --- Сцена --- */
.life-wheel {
  --life-duration: 20s;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Повёрнутый на диагональ орбитальный слой вылезал за габарит (до 1.41×).
     Светила идут по радиусу 24% и клипом не задеваются. */
  overflow: hidden;
}

/* --- Четыре сектора: без рамок, только фон и слои света/тени --- */
.life-wheel__cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.life-cell {
  position: relative;
  overflow: hidden;
  /* Сектор без светила — светлая полутень: заметно темнее белого
     (солнце), но сильно светлее графита (луна). */
  background: color-mix(in srgb, var(--color-accent) 45%, var(--color-background));
}

.life-cell--bl { grid-area: 2 / 1; }
.life-cell--tl { grid-area: 1 / 1; }
.life-cell--tr { grid-area: 1 / 2; }
.life-cell--br { grid-area: 2 / 2; }

/* Слои следуют за светилами: glow (солнце) — белый, shade (луна) — графит.
   --p / --d заданы инлайном на клетке (в долях периода), delay — в минус,
   чтобы цикл стартовал уже в нужной фазе и без рывка. */
.life-cell__glow,
.life-cell__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation-name: life-glow;
  animation-duration: var(--life-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.life-cell__glow {
  background: var(--color-background);
  animation-delay: calc((var(--p) - 1) * var(--life-duration));
}

.life-cell__shade {
  /* Сектор под луной уходит в плотный графит — светлый текст на нём. */
  background: var(--color-primary);
  animation-delay: calc((var(--d) - 1) * var(--life-duration));
}

.life-wheel.is-playing .life-cell__glow,
.life-wheel.is-playing .life-cell__shade {
  animation-play-state: running;
}

@keyframes life-glow {
  0%, 10% { opacity: 1; }
  16%, 84% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

/* --- Метка сектора: и под солнцем, и под луной — фраза в две строки
   с горизонтальным отчерком между словами; у луны посередине ещё
   курсивное «и». Два элемента на сектор фазами не пересекаются:
   солнце и луна приходят в один сектор через полцикла. --- */
.life-cell__reveal {
  position: absolute;
  z-index: 2;
  margin: 0;
  opacity: 0;
  animation-name: life-reveal;
  animation-duration: var(--life-duration);
  /* Только проявление — без сдвига; ease-in-out даёт мягкий вход и выход. */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/* Общая раскладка фразы: всё по одной центральной оси. */
.life-cell__reveal--day,
.life-cell__reveal--night,
.life-cell__reveal--mid {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}

.life-cell__reveal--day {
  --line: rgba(53, 49, 60, 0.35);
  --and-ink: rgba(53, 49, 60, 0.8);
  color: var(--color-foreground);
  animation-delay: calc((var(--p) - 1) * var(--life-duration));
}

.life-cell__reveal--night {
  --line: rgba(255, 255, 255, 0.45);
  --and-ink: rgba(255, 255, 255, 0.9);
  color: var(--color-foreground-light);
  animation-delay: calc((var(--d) - 1) * var(--life-duration));
}

/* Серая клетка (между солнцем и луной): тёмная тема сектора. Окно — две
   полосы по 25% цикла, между солнечным и лунным окнами. Шрифт — светло-серый
   (--color-foreground-muted), мягче фраз солнца и луны. */
.life-cell__reveal--mid {
  --line: rgba(122, 117, 128, 0.35);
  --and-ink: rgba(122, 117, 128, 0.9);
  color: var(--color-foreground-muted);
  animation-name: life-reveal-mid;
  animation-delay: calc((var(--p) - 1) * var(--life-duration));
}

.life-cell__word {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.life-cell__and {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(120px, 52%);
}

/* У дневной фразы отчерк сплошной — посередине нет «и». */
.life-cell__and:empty {
  gap: 0;
}

.life-cell__and::before,
.life-cell__and::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.life-cell__and i {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--and-ink);
}

/* Фразу сдвигаем к внешнему углу квадрата — так диск светила не ложится
   на текст (для солнца и луны геометрия одна). */
.life-cell--bl .life-cell__reveal--day,
.life-cell--bl .life-cell__reveal--night,
.life-cell--bl .life-cell__reveal--mid { transform: translate(-12%, 12%); }

.life-cell--tl .life-cell__reveal--day,
.life-cell--tl .life-cell__reveal--night,
.life-cell--tl .life-cell__reveal--mid { transform: translate(-12%, -12%); }

.life-cell--tr .life-cell__reveal--day,
.life-cell--tr .life-cell__reveal--night,
.life-cell--tr .life-cell__reveal--mid { transform: translate(12%, -12%); }

.life-cell--br .life-cell__reveal--day,
.life-cell--br .life-cell__reveal--night,
.life-cell--br .life-cell__reveal--mid { transform: translate(12%, 12%); }

.life-wheel.is-playing .life-cell__reveal {
  animation-play-state: running;
}

@keyframes life-reveal {
  0%, 7.5% { opacity: 1; }
  12.5%, 87.5% { opacity: 0; }
  92.5%, 100% { opacity: 1; }
}

@keyframes life-reveal-mid {
  0%, 12.5% { opacity: 0; }
  17.5%, 32.5% { opacity: 1; }
  37.5%, 62.5% { opacity: 0; }
  67.5%, 82.5% { opacity: 1; }
  87.5%, 100% { opacity: 0; }
}

/* --- Орбита и светила --- */
.life-wheel__orbit {
  position: absolute;
  inset: 0;
  animation: life-orbit var(--life-duration) linear infinite;
  animation-play-state: paused;
}

.life-wheel.is-playing .life-wheel__orbit {
  animation-play-state: running;
}

.life-wheel__light {
  position: absolute;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  display: grid;
  place-items: center;
  background: var(--color-background);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-primary);
  /* Контр-вращение: светило остаётся «лицом вверх» на любой фазе. */
  animation: life-counter var(--life-duration) linear infinite;
  animation-play-state: paused;
}

.life-wheel.is-playing .life-wheel__light {
  animation-play-state: running;
}

.life-wheel__light--sun {
  top: 26%;
  margin-top: -30px;
  /* Солнце — светлый диск, тёмная иконка (на белом секторе). */
  background: var(--color-background);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.life-wheel__light--moon {
  bottom: 26%;
  margin-bottom: -30px;
  /* Луна — тёмный диск, светлая иконка (на графитовом секторе). */
  background: var(--color-primary);
  border: 1px solid var(--color-background);
  color: var(--color-background);
}

.life-wheel__icon {
  width: 28px;
  height: 28px;
}

@keyframes life-orbit {
  from { transform: rotate(225deg); }
  to { transform: rotate(585deg); }
}

@keyframes life-counter {
  from { transform: rotate(-225deg); }
  to { transform: rotate(-585deg); }
}

/* ============================================================
   ВАРИАНТ «КРУГ»: светила идут по краю окружности, надписи внутри.
   Клетки те же (четвертькруги, обрезанные border-radius), меняется
   только форма сцены и радиус светил — они прижаты к краю.
   ============================================================ */
.life-wheel--circle {
  --disc: 52px;
  /* Общий диаметр — на 20% меньше квадратной сцены. */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  /* Холст не режет: клетки клипаются к окружности сами, а диск стоит
     на риске и выходит наружу. */
  overflow: visible;
}

.life-wheel--circle .life-wheel__cells {
  border: 1px solid var(--color-border);
  border-radius: 50%;
  overflow: hidden;
}

.life-wheel--circle .life-wheel__light {
  width: var(--disc);
  height: var(--disc);
  margin-left: calc(var(--disc) / -2);
}

/* Центр светила — ровно на линии окружности (на риске). */
.life-wheel--circle .life-wheel__light--sun {
  top: 0;
  margin-top: calc(var(--disc) / -2);
}

.life-wheel--circle .life-wheel__light--moon {
  bottom: 0;
  margin-bottom: calc(var(--disc) / -2);
}

/* Иконка внутри диска — доля от его диаметра, поэтому масштабируется
   вместе с --disc (в т.ч. на мобильном). */
.life-wheel--circle .life-wheel__icon {
  width: calc(var(--disc) * 0.58);
  height: calc(var(--disc) * 0.58);
}

/* В круге луна стоит на краю, поэтому фразу держим чуть ближе к центру,
   но не вплотную (кегль круга ведём отдельно — поле круга теснее). */
.life-wheel--circle .life-cell--bl .life-cell__reveal--day,
.life-wheel--circle .life-cell--bl .life-cell__reveal--night,
.life-wheel--circle .life-cell--bl .life-cell__reveal--mid { transform: translate(10%, -10%); }
.life-wheel--circle .life-cell--tl .life-cell__reveal--day,
.life-wheel--circle .life-cell--tl .life-cell__reveal--night,
.life-wheel--circle .life-cell--tl .life-cell__reveal--mid { transform: translate(10%, 10%); }
.life-wheel--circle .life-cell--tr .life-cell__reveal--day,
.life-wheel--circle .life-cell--tr .life-cell__reveal--night,
.life-wheel--circle .life-cell--tr .life-cell__reveal--mid { transform: translate(-10%, 10%); }
.life-wheel--circle .life-cell--br .life-cell__reveal--day,
.life-wheel--circle .life-cell--br .life-cell__reveal--night,
.life-wheel--circle .life-cell--br .life-cell__reveal--mid { transform: translate(-10%, -10%); }

.life-wheel--circle .life-cell__word { font-size: 32px; }
.life-wheel--circle .life-cell__and { width: min(130px, 56%); }
.life-wheel--circle .life-cell__and i { font-size: 22px; }

/* --- Адаптив --- */
@media (max-width: 1300px) {
  .lifewheel {
    padding: 64px 48px;
  }

  .lifewheel__list {
    gap: 64px;
  }
}

@media (max-width: 960px) {
  .lifewheel {
    padding: 48px 24px;
  }

  .lifewheel__title {
    font-size: 36px;
  }

  .lifewheel__subtitle {
    font-size: 18px;
  }

  .lifewheel__list {
    gap: 56px;
    margin-top: 32px;
  }

  .life-cell__reveal--night {
    padding: 8px;
    gap: 2px;
  }

  .life-cell--bl .life-cell__reveal--day,
  .life-cell--bl .life-cell__reveal--night,
  .life-cell--bl .life-cell__reveal--mid { transform: translate(-9%, 24%); }
  .life-cell--tl .life-cell__reveal--day,
  .life-cell--tl .life-cell__reveal--night,
  .life-cell--tl .life-cell__reveal--mid { transform: translate(-9%, -24%); }
  .life-cell--tr .life-cell__reveal--day,
  .life-cell--tr .life-cell__reveal--night,
  .life-cell--tr .life-cell__reveal--mid { transform: translate(9%, -24%); }
  .life-cell--br .life-cell__reveal--day,
  .life-cell--br .life-cell__reveal--night,
  .life-cell--br .life-cell__reveal--mid { transform: translate(9%, 24%); }

  .life-cell__word {
    font-size: 22px;
  }

  .life-cell__and {
    width: min(72px, 60%);
  }

  .life-cell__and i {
    font-size: 18px;
  }

  .life-wheel__light {
    width: 48px;
    height: 48px;
    margin-left: -24px;
  }

  .life-wheel__light--sun { margin-top: -24px; }
  .life-wheel__light--moon { margin-bottom: -24px; }

  .life-wheel__icon {
    width: 22px;
    height: 22px;
  }

  .life-wheel--circle {
    --disc: 44px;
  }


  .life-wheel--circle .life-cell--bl .life-cell__reveal--day,
  .life-wheel--circle .life-cell--bl .life-cell__reveal--night,
  .life-wheel--circle .life-cell--bl .life-cell__reveal--mid { transform: translate(13%, -13%); }
  .life-wheel--circle .life-cell--tl .life-cell__reveal--day,
  .life-wheel--circle .life-cell--tl .life-cell__reveal--night,
  .life-wheel--circle .life-cell--tl .life-cell__reveal--mid { transform: translate(13%, 13%); }
  .life-wheel--circle .life-cell--tr .life-cell__reveal--day,
  .life-wheel--circle .life-cell--tr .life-cell__reveal--night,
  .life-wheel--circle .life-cell--tr .life-cell__reveal--mid { transform: translate(-13%, 13%); }
  .life-wheel--circle .life-cell--br .life-cell__reveal--day,
  .life-wheel--circle .life-cell--br .life-cell__reveal--night,
  .life-wheel--circle .life-cell--br .life-cell__reveal--mid { transform: translate(-13%, -13%); }

  .life-wheel--circle .life-cell__word { font-size: 16px; }
  .life-wheel--circle .life-cell__and { width: min(80px, 64%); }
  .life-wheel--circle .life-cell__and i { font-size: 12px; }
}

/* Движение выключаем полностью: блок остаётся читаемой диаграммой —
   солнце в утреннем секторе (левый-низ) со своим тёмным текстом,
   луна в вечернем (правый-верх) со светлым текстом на графите. */
@media (prefers-reduced-motion: reduce) {
  .life-wheel__orbit,
  .life-wheel__light,
  .life-cell__glow,
  .life-cell__shade,
  .life-cell__reveal {
    animation: none !important;
  }

  .life-wheel__orbit { transform: rotate(225deg); }
  .life-wheel__light { transform: rotate(-225deg); }

  .life-wheel .life-cell--bl .life-cell__glow { opacity: 1; }
  .life-wheel .life-cell--tr .life-cell__shade { opacity: 1; }
  .life-wheel .life-cell--bl .life-cell__reveal--day { opacity: 1; }
  .life-wheel .life-cell--tl .life-cell__reveal--mid { opacity: 1; }
  .life-wheel .life-cell--tr .life-cell__reveal--night { opacity: 1; }
}

/* Сообщение — рецепт notice-card--error §9.17: серый фон, рамка 1px,
   состояние показано весом графита в шве слева (2px). */
.hero-buy__error {
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 16px;
  background: var(--color-background-muted);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
  color: var(--color-foreground-alpha);
}