/* =============================================================================
   MWA METHOD — тема поверх bulletproof-ядра (styles.css).
   Здесь ТОЛЬКО дизайн-токены, типографика и декоративные элементы.
   Механика вёрстки (grid, clamp, overflow, min-width:0) живёт в ядре
   и не переопределяется — поэтому ничего не разъезжается.

   Палитра по ТЗ: тёплый молочный, слоновая кость, песочный, taupe,
   серо-зелёный, графит, мягкий чёрный, бордово-коричневый (калла).
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* --- Акцент: глубокий тёмно-бордовый (по правке заказчика — сделать глубже;
       остальную гамму не трогаем). Не чёрный. --- */
  --accent:          #3A181E;
  --accent-strong:   #2A1015;
  --accent-contrast: #F6F4EE;
  --accent-soft:     #EDE4DC;

  /* --- Поверхности: по референсу заказчика — светлая штукатурка, нейтрально-серая
       с едва тёплым подтоном (не кремовая). Карточки светлее фона, альтернативные
       секции — на тон глубже того же семейства. --- */
  --bg:        #EDEBE7;
  --surface:   #F6F5F2;
  --surface-2: #E4E1DC;
  --surface-3: #D6D2CC;

  /* --- Текст: холодный графит и приглушённые тона --- */
  --ink:        #242322;
  --ink-muted:  #6A6763;
  --ink-faint:  #8D8A85;
  --border:        #DCD8D2;
  --border-strong: #C2BDB6;

  /* --- Доп. тона палитры MWA --- */
  --taupe: #9C948A;
  --sage:  #8B9083;
  /* Пыльно-розовый — цвет дымчатой каллы с референса (только декор) */
  --mauve:      #A87C86;
  --mauve-soft: #C9AEB3;

  /* --- Editorial-геометрия: почти прямые углы, никаких «пилюль» --- */
  --radius-sm: 2px; --radius: 2px; --radius-lg: 3px; --radius-xl: 4px;
  --radius-pill: 2px;

  /* --- Тени тише: бумага, а не пластик --- */
  --shadow-sm: 0 1px 2px rgba(38, 36, 34, .04);
  --shadow:    0 8px 24px rgba(38, 36, 34, .06);
  --shadow-lg: 0 28px 64px rgba(38, 36, 34, .10);
  --ring:      0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);

  /* --- Шрифты: элегантный serif + чистый sans --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  /* --- Журнальная типографика: крупнее и воздушнее, чем дефолт --- */
  --fs-hero: clamp(2.7rem, 1.5rem + 5vw, 4.9rem);
  --fs-h2:   clamp(2.05rem, 1.4rem + 2.7vw, 3.2rem);
  --fs-h3:   clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
  --fs-lead: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  --lh-tight: 1.06;

  --section-y: clamp(4rem, 10vw, 8.5rem);
  --container: 1320px;
}

/* --- Serif-заголовки по брендбуку: Cormorant Garamond Light (300).
       h3 держим на 400 — на малых кеглях 300 «тонковат» и хуже читается. --- */
h1, .h1, h2, .h2 { font-weight: 300; letter-spacing: .005em; }
h3, .h3 { font-weight: 400; letter-spacing: .01em; }

/* --- Надзаголовки: широкая разрядка, taupe --- */
.eyebrow { color: var(--taupe); font-weight: 500; letter-spacing: .22em; font-size: .72rem; }

/* --- Кнопки: тихие, прямоугольные, с разрядкой --- */
.btn { text-transform: uppercase; letter-spacing: .22em; font-size: .8rem; font-weight: 500; }
.btn--ghost { border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- Мобильное меню: чиним наложение ссылок и кнопки ---
   В ядре и .nav__links, и .nav__actions при открытии позиционируются absolute
   в одну точку (top:100%) и накладываются друг на друга — кнопка перекрывает
   верхнюю ссылку. Разворачиваем меню аккордеоном в обычном потоке:
   строка «бренд + бургер», ниже ссылки, ещё ниже кнопка. Наложения нет. */
@media (max-width: 860px) {
  .nav[data-open="true"] {
    flex-wrap: wrap;
    row-gap: var(--space-4);
    padding-bottom: var(--space-5);
  }
  .nav[data-open="true"] .nav__links,
  .nav[data-open="true"] .nav__actions {
    position: static;
    left: auto; right: auto; top: auto;
    flex-basis: 100%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  /* В раскрытом бургер-меню список разделов профиля встаёт в поток.
     Абсолютное меню шириной 14rem на узком экране вылезало бы за край
     панели — здесь оно просто занимает всю ширину. */
  .nav__account { flex-wrap: wrap; }
  .nav__menu { position: static; min-width: 0; width: 100%;
    margin-top: var(--space-2); box-shadow: none; }
}

/* --- Тёмные секции: тёплый графит, молочный текст --- */
.section--ink { background: #232120; color: #EFEAE0; }
.section--ink .lead { color: rgba(239, 234, 224, .68); }
.section--ink .muted { color: rgba(239, 234, 224, .58); }
.section--ink .eyebrow { color: var(--taupe); }
.section--ink .btn--ghost { border-color: rgba(239, 234, 224, .5); color: #EFEAE0; }
.section--ink .btn--ghost:hover { background: #EFEAE0; color: #232120; border-color: #EFEAE0; }
.section--ink .rule { background: rgba(239, 234, 224, .16); }

/* --- Цифры статистики и цен — серифом --- */
.stat__num, .price__num { font-family: var(--font-head); font-weight: 500; }
.stat__label { letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; }

/* --- Метка на выделенной карточке тарифа --- */
.card--featured::after { content: "Первый поток"; letter-spacing: .12em; text-transform: uppercase; }

/* --- Hero: свечение тише, песочно-бордовая дымка --- */
.hero__glow { background:
  radial-gradient(50% 55% at 78% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
  radial-gradient(45% 50% at 12% 8%, color-mix(in srgb, var(--taupe) 18%, transparent), transparent 72%); }

/* =============================================================================
   Декоративные editorial-элементы MWA (не влияют на поток вёрстки)
   ========================================================================== */

/* Тонкая линия-разделитель */
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Журнальная цитата */
.quote-xl { font-family: var(--font-head); font-style: italic; font-weight: 500;
            font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.3;
            text-wrap: balance; }

/* Порядковый номер направления — как в модном журнале */
.index-num { font-family: var(--font-head); font-size: 2.1rem; font-weight: 500;
             color: var(--taupe); line-height: 1; }

/* Строка-мета в hero: разрядка, маленькие капс-подписи */
.meta-line { letter-spacing: .22em; text-transform: uppercase; font-size: .72rem;
             color: var(--ink-faint); }

/* Двухъярусный hero-заголовок: имя метода + смысловая строка */
.hero-sub { display: block; font-size: .46em; line-height: 1.22; margin-top: .55em;
            font-weight: 500; letter-spacing: .01em; }

/* Логотип-строка [ MWA : ] — как в брендбуке (устаревшая, оставлена для совместимости) */
.brand-mark { font-family: var(--font-head); font-weight: 500; letter-spacing: .12em; }

/* --- Базовая связка знака и текстового вордмарка.
       Конкретная страница может показывать только один из элементов. --- */
.nav__brand { display: inline-flex; align-items: center; gap: .4rem; }
/* По умолчанию знак скрыт; обзорная тема включает его ниже. */
.brand-logo { display: none; }
.brand-word { font-family: var(--font-sans); font-weight: 300; letter-spacing: .34em;
              text-transform: uppercase; font-size: .84rem; color: var(--ink);
              line-height: 1; white-space: nowrap; }
/* Ссылка «Войти» в шапке — тихая, с разрядкой, ведёт в личный кабинет */
.nav__login { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.nav__login:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* .nav__login задаёт display сама (inline-flex) — атрибут hidden без этого
   правила ничем бы не перебивался и ссылка осталась бы видимой. */
.nav__login[hidden] { display: none; }
/* То же самое для кнопки в шапке: .btn задаёт display: inline-flex, который
   перебивает стандартное поведение атрибута hidden — без этого правила
   «Оставить заявку» осталась бы видимой у вошедшей участницы. */
.btn[hidden] { display: none; }

/* Круглый аватар-инициалы в шапке — заменяет «Войти» для вошедшей участницы.
   Видимость переключает initAuthNav() в assets/app.js по сессии кабинета
   (localStorage, демо-авторизация — без реальной защиты). Визуальный язык —
   как у .ava в cabinet/assets/cabinet.css, но переопределён здесь: cabinet.css
   на публичных страницах не подключён. */
/* Блок вошедшей участницы: подпись + иконка + выпадающее меню.
   position: relative — якорь для абсолютно позиционированного меню. */
.nav__account { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); }
.nav__account[hidden] { display: none; }

/* Подпись «Мой профиль» — ведёт сразу в кабинет, минуя меню. */
.nav__profile { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.nav__profile:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Круг чуть меньше кнопки «Оставить заявку» (у неё min-height 48px). */
.nav__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600; letter-spacing: 0;
  text-transform: uppercase; background: var(--accent); color: var(--accent-contrast);
  border: 1px solid transparent; padding: 0; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease; }
.nav__avatar:hover { background: var(--accent-strong); transform: translateY(-1px); }
.nav__avatar[hidden] { display: none; }

/* Выпадающее меню разделов кабинета */
.nav__menu { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 60;
  min-width: 14rem; padding: var(--space-3) 0;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.nav__menu[hidden] { display: none; }
.nav__menu-user { padding: 0 var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border); margin-bottom: var(--space-2);
  display: grid; gap: .15rem; }
.nav__menu-user strong { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; }
.nav__menu-user span { font-size: .8rem; color: var(--ink-faint); word-break: break-all; }
.nav__menu-item { display: block; width: 100%; text-align: left;
  padding: .55rem var(--space-4); font-family: var(--font-sans); font-size: .85rem;
  color: var(--ink-muted); background: none; border: 0; cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.nav__menu-item:hover { background: var(--surface-2); color: var(--accent); }
.nav__menu-item--danger { color: #b23842; }
.nav__menu-sep { height: 1px; background: var(--border); margin: var(--space-2) 0; }
/* display НЕ задаём здесь: пусть ядро скрывает .nav__actions на мобильном
   (@media max-width:860 → display:none) и раскрывает в бургер-меню. */
.nav__actions { align-items: center; gap: var(--space-4); }

/* В футере (тёмный графит) — вордмарк молочный */
.footer__brand { display: inline-flex; align-items: center; gap: .6rem; }
.footer__brand .brand-word { color: #EFEAE0; font-size: .92rem; }
@media (max-width: 480px) { .brand-word { font-size: .72rem; letter-spacing: .26em; } }

/* --- Многотоновый паттерн: фоновый элемент разделов (переход в несколько тонов).
       Нейтральная гамма + один бордовый акцент. Мотив каллы — опционально. --- */
.art-panel.art-panel--pattern { background:
    radial-gradient(75% 60% at 22% 14%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 55%),
    radial-gradient(70% 65% at 86% 22%, color-mix(in srgb, var(--taupe) 62%, transparent), transparent 58%),
    radial-gradient(85% 75% at 78% 100%, color-mix(in srgb, var(--sage) 55%, transparent), transparent 60%),
    radial-gradient(65% 55% at 42% 82%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(150deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface-3) 100%); }
.section--pattern { position: relative; background:
    radial-gradient(80% 60% at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(70% 70% at 92% 100%, color-mix(in srgb, var(--taupe) 20%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }

/* --- Плейсхолдер под фото: чистая рамка с подписью (вместо «пятна»).
       Заказчик заменит на реальное фото. --- */
.art-panel.art-panel--placeholder { display: grid; place-items: center;
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); }
.art-panel--placeholder::after { content: "ФОТО"; color: var(--ink-faint);
    font-family: var(--font-sans); font-size: .68rem; letter-spacing: .28em;
    border: 1px solid var(--border-strong); padding: .55rem 1.1rem; }

/* --- Калла как графический мотив: без рамки, часть фона (не в панели) --- */
.hero__calla { display: flex; align-items: center; justify-content: center;
    min-height: clamp(320px, 44vw, 560px); }
.hero__calla img { width: min(100%, 640px); height: auto; }
/* Производная декоративная графика на основе каллы: тише, полупрозрачная,
   для украшения вторичных блоков. Базовый элемент — дальше расширим набор. */
.deco-calla { display: flex; align-items: center; justify-content: center;
    min-height: clamp(280px, 40vw, 480px); }
.deco-calla img { width: min(46%, 200px); height: auto; opacity: .55;
    filter: saturate(.85); }
/* --- Декоративные паттерны из ассетов: тихие фоновые украшения секций.
       Не мешают контенту (за текстом, pointer-events:none, малая непрозрачность). --- */
.deco { position: relative; overflow: hidden; }
.deco > * { position: relative; z-index: 1; }
.deco::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    opacity: .05; width: clamp(240px, 32vw, 560px); aspect-ratio: 1 / 1; }
/* мотивы */
.d-calla::before  { background-image: url("img/pattern-bud.png"); }
.d-arch::before   { background-image: url("img/pattern-arch.png"); }
.d-ladder::before { background-image: url("img/pattern-ladder.png"); aspect-ratio: 1 / 2; }
.d-marks::before  { background-image: url("img/pattern-marks.png"); }
.d-spiral::before { background-image: url("img/pattern-spiral.png"); }
.d-thread::before { background-image: url("img/pattern-thread.png"); aspect-ratio: 1 / 2; }
/* положение */
.d-tr::before { right: -2%; top: -5%; }
.d-tl::before { left: -2%; top: -5%; }
.d-br::before { right: -2%; bottom: -5%; }
.d-bl::before { left: -2%; bottom: -5%; }
.d-lg::before { width: clamp(360px, 46vw, 760px); }
.d-ladder::before, .d-thread::before { width: clamp(150px, 20vw, 340px); }
/* россыпь крестиков «marks» на всю секцию — плотная текстура */
.d-spread::before { inset: 0; width: auto; height: auto; aspect-ratio: auto;
    background-size: min(560px, 46%); background-repeat: repeat; background-position: center; opacity: 0; }
/* Минимализм: второй «шумный» слой россыпи убран (был визуальный мусор). */
.deco::after { content: none; }
.deco__legacy-after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("img/pattern-marks.png") repeat; background-size: clamp(300px, 30vw, 440px);
    opacity: .05; }
/* на тёмных секциях мотив чуть заметнее, но всё равно тихо */
.section--ink.deco::before { opacity: .08; }

/* --- Панель-настроение (вместо стоковых фото): штукатурка, ткань, тело --- */
.art-panel { position: relative; border: 1px solid var(--border); background: var(--surface-2);
             min-height: clamp(320px, 46vw, 560px); overflow: hidden; }
.art-panel--plaster { background:
  radial-gradient(120% 90% at 20% 10%, rgba(251, 248, 242, .9), transparent 60%),
  radial-gradient(90% 70% at 80% 90%, rgba(201, 191, 173, .35), transparent 65%),
  var(--surface-2); }
/* Абстрактный «отпечаток тела» на стене — как на референсе */
.art-panel--bodyprint::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(38% 30% at 50% 30%, rgba(162, 149, 127, .5), transparent 70%),
  radial-gradient(30% 24% at 49% 55%, rgba(162, 149, 127, .38), transparent 72%),
  radial-gradient(40% 30% at 51% 80%, rgba(162, 149, 127, .45), transparent 70%);
  filter: blur(14px); }
/* Вертикальная световая ось — чакры как внутренняя архитектура */
.art-panel--axis::before { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%;
  width: 1px; background: linear-gradient(to bottom, transparent,
  color-mix(in srgb, var(--accent) 55%, transparent) 30%,
  color-mix(in srgb, var(--accent) 55%, transparent) 70%, transparent); }
.art-panel__caption { position: absolute; left: 1.25rem; bottom: 1rem;
  letter-spacing: .22em; text-transform: uppercase; font-size: .66rem; color: var(--ink-faint); }

/* Калла в hero */
.calla { width: min(58%, 240px); margin-inline: auto; }

/* --- Фото-панель настроения: реальное изображение в контейнере .art-panel --- */
.art-panel--photo { padding: 0; background: var(--surface-2); }
.art-panel--photo > img { position: absolute; inset: 0; width: 100%; height: 100%;
                          object-fit: cover; object-position: center; }
/* Мягкий scrim снизу — чтобы подпись читалась на любом фоне */
.art-panel--photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(38, 36, 34, .38), transparent); pointer-events: none; }
.art-panel--photo .art-panel__caption { color: #EFEAE0; z-index: 1;
  text-shadow: 0 1px 10px rgba(38, 36, 34, .55); }

/* --- Чакры: вертикальная ось с тонкой линией и мягкими точками --- */
.chakra { position: relative; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem);
          max-width: 620px; margin-inline: auto; padding-left: 2.6rem; }
.chakra::before { content: ""; position: absolute; left: .5rem; top: .8rem; bottom: .8rem;
  width: 1px; background: linear-gradient(to bottom,
  color-mix(in srgb, var(--taupe) 60%, transparent), color-mix(in srgb, var(--accent) 50%, transparent)); }
.chakra li { position: relative; }
.chakra li::before { content: ""; position: absolute; left: -2.35rem; top: .55rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, #fff);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }
.chakra__name { font-family: var(--font-head); font-size: 1.45rem; font-weight: 600; }
.chakra__desc { color: var(--ink-muted); margin-top: .25rem; }

/* --- Расписание недели: тонкие строки, как программа показа --- */
.schedule { display: grid; }
.schedule > li { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; align-items: baseline;
                 padding-block: 1.1rem; border-top: 1px solid var(--border); }
.schedule > li:last-child { border-bottom: 1px solid var(--border); }
.schedule__who { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; flex: 0 0 auto; }
.schedule__what { color: var(--ink-muted); flex: 1 1 320px; }

/* --- Список «болей» без галочек: тонкое тире, много воздуха --- */
.dashes { display: grid; gap: var(--space-3); }
.dashes li { position: relative; padding-left: 1.9rem; }
.dashes li::before { content: ""; position: absolute; left: 0; top: .78em; width: 1.1rem; height: 1px;
                     background: var(--taupe); }
.section--ink .dashes li::before { background: color-mix(in srgb, var(--taupe) 75%, transparent); }

/* Галочки в тональности темы: тихий контур вместо цветной подложки */
.checks li::before { background: transparent; border: 1px solid var(--border-strong);
                     color: var(--accent); }

/* Форма: поля на молочном фоне */
.field input, .field textarea, .field select { background: var(--surface); }

/* Футер: тёплый графит */
.site-footer { background: #201E1C; }

/* Cookie-баннер в тон */
.cookie { background: #201E1C; }

/* --- Ссылка «Подробнее →»: тихая, с разрядкой, подчёркивание при наведении --- */
.link-more { display: inline-flex; align-items: center; min-height: 44px;
             font-family: var(--font-sans); font-size: .8rem; font-weight: 500;
             letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
             border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; }
.link-more:hover { border-bottom-color: var(--accent); }
.section--ink .link-more { color: #EFEAE0; }
.section--ink .link-more:hover { border-bottom-color: #EFEAE0; }

/* --- Хлебные крошки / возврат на главную (внутренние страницы) --- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
          font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
          color: var(--ink-faint); margin-bottom: var(--space-6); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe);
            border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; }
.crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink-muted); }

/* --- Активный пункт основной навигации (текущая страница) --- */
.nav__links a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* =============================================================================
   Компоненты для обновлённого лендинга (новое ТЗ): равные эксперты,
   editorial-аккордеон возражений, био эксперта, сертификат, оплата.
   Все стили — поверх bulletproof-ядра, механику потока не трогают.
   ========================================================================== */

/* Разворот эксперта (номер+имя+портрет слева, длинная биография справа).
   Проблема: левая карточка короткая, биография очень длинная → на широком экране
   слева зияет пустота, а текст «набит» в узкую правую половину.
   Решение: левую колонку делаем узкой и ЛИПКОЙ (едет вместе с прокруткой),
   биографию ограничиваем удобной для чтения шириной. Всё выравниваем по верху. */
.split:has(> .expert-bio) { align-items: start; }

@media (min-width: 900px) {
  /* Узкая колонка-карточка слева + широкая колонка под текст. */
  .split:has(> .expert-bio) { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  /* Карточка эксперта следует за прокруткой длинной биографии (top = ниже шапки). */
  .split:has(> .expert-bio) > .stack-3 { position: sticky; top: 6rem; }
  /* Комфортная длина строки — текст не растягивается на всю ширину. */
  .split:has(> .expert-bio) > .expert-bio { max-width: 66ch; }
}

/* --- Равные карточки экспертов на главной: одинаковый вес и структура --- */
.expert-card { display: flex; flex-direction: column; gap: var(--space-3);
               height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem);
               background: var(--surface); border: 1px solid var(--border); }
.expert-card__name { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h3);
                     line-height: 1.1; }
.expert-card__role { color: var(--taupe); letter-spacing: .22em; text-transform: uppercase;
                     font-size: .68rem; line-height: 1.5; }
.expert-card__formula { font-family: var(--font-head); font-style: italic; color: var(--ink-muted);
                        font-size: 1.08rem; line-height: 1.35; margin-top: auto; }
.expert-card .index-num { font-size: 1.5rem; }

/* --- Editorial-аккордеон «Возражения»: тонкие линии, номера, без FAQ-крика --- */
.qa { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--border); }
.qa__item { border-bottom: 1px solid var(--border); }
.qa__item > summary { list-style: none; cursor: pointer; display: flex; gap: var(--space-4);
                       align-items: baseline; padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
                       font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
                       font-weight: 500; line-height: 1.25; color: var(--ink);
                       transition: color .15s ease; }
.qa__item > summary::-webkit-details-marker { display: none; }
.qa__item > summary:hover { color: var(--accent); }
.qa__item > summary::after { content: "+"; margin-left: auto; flex: 0 0 auto;
                              font-family: var(--font-sans); font-weight: 400; color: var(--taupe);
                              font-size: 1.5rem; line-height: 1; transition: transform .2s ease; }
.qa__item[open] > summary::after { content: "–"; }
.qa__num { flex: 0 0 auto; font-family: var(--font-head); color: var(--taupe);
            font-size: 1rem; letter-spacing: .06em; min-width: 2.2ch; }
.qa__body { padding: 0 0 var(--space-5) calc(2.2ch + var(--space-4)); }
.qa__body > * + * { margin-top: var(--space-3); }
.qa__formula { font-family: var(--font-head); font-style: italic; color: var(--accent);
                font-size: 1.1rem; line-height: 1.35; }
.section--ink .qa { border-top-color: rgba(239,234,224,.16); }
.section--ink .qa__item { border-bottom-color: rgba(239,234,224,.16); }
.section--ink .qa__item > summary { color: #EFEAE0; }
.section--ink .qa__item > summary:hover { color: #fff; }
.section--ink .qa__formula { color: #E7C9CE; }

/* --- Развёрнутое био эксперта (страница «Эксперты») --- */
.expert-portrait { position: relative; border: 1px solid var(--border); background: var(--surface-2);
                   aspect-ratio: 4 / 5; overflow: hidden; }
.expert-portrait > img { position: absolute; inset: 0; width: 100%; height: 100%;
                         object-fit: cover; object-position: center; }
.expert-portrait__mono { position: absolute; inset: 0; display: grid; place-items: center;
                         color: color-mix(in srgb, var(--accent) 26%, transparent); }
.expert-portrait__mono svg { width: 46%; height: auto; }
.expert-bio > * + * { margin-top: var(--space-4); }
.expert-quality { display: grid; gap: var(--space-2); }
.expert-quality li { position: relative; padding-left: 1.9rem; }
.expert-quality li::before { content: ""; position: absolute; left: 0; top: .72em; width: 1.1rem;
                             height: 1px; background: var(--taupe); }

/* --- Сертификат: рамка-паспарту, как в галерее --- */
.cert { max-width: 30rem; }
.cert figure { margin: 0; border: 1px solid var(--border-strong); background: var(--surface);
               padding: clamp(.6rem, 2vw, 1.1rem); box-shadow: var(--shadow-sm); }
.cert img { display: block; width: 100%; height: auto; }
.cert figcaption { margin-top: var(--space-3); color: var(--ink-faint); font-size: .78rem;
                   letter-spacing: .08em; }

/* --- Страница оплаты: сводка «шагов», статусы, поле кода доступа --- */
.pay-steps { display: grid; gap: var(--space-3); counter-reset: step; list-style: none; padding: 0; }
.pay-steps li { position: relative; padding-left: 2.6rem; color: var(--ink-muted); }
.pay-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero);
                        position: absolute; left: 0; top: 0; font-family: var(--font-head);
                        color: var(--accent); font-size: 1.05rem; letter-spacing: .04em; }
.pay-note { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-muted);
            font-size: .85rem; line-height: 1.5; }
.access-box { border: 1px dashed var(--border-strong); background: var(--surface);
              padding: var(--space-4); display: grid; gap: var(--space-2); }
.access-box code { font-family: var(--font-sans); font-size: 1rem;
                   background: var(--surface-2); padding: .25rem .5rem; border: 1px solid var(--border);
                   letter-spacing: .04em; }
.badge-secure { display: inline-flex; align-items: center; gap: .45rem; color: var(--sage);
                font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
#access-preview[data-show="true"] { display: grid; }

/* =============================================================================
   ПЕРВЫЙ ЭКРАН — светлый мрамор с пыльно-розовыми прожилками, поверх —
   минимальный типографический блок. Молочная вуаль сохраняет читаемость.
   ========================================================================== */
.hero--photo { position: relative; display: flex; align-items: flex-start;
  min-height: 100vh; min-height: 100svh; padding-block: 0; overflow: hidden; background: #EDE9E6;
  --hero-fg: #2B2726; --hero-fg-muted: rgba(43, 39, 38, .74); }
.hero__bg { position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Молочная вуаль: слева делает прожилки тише под текстом и мягко растворяется
   к выразительной правой части мрамора, не скрывая фактуру камня. */
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, rgba(246, 245, 242, .9) 0%, rgba(246, 245, 242, .72) 34%, rgba(246, 245, 242, .16) 62%, transparent 78%),
  linear-gradient(180deg, rgba(246, 245, 242, .22) 0%, transparent 34%, rgba(237, 235, 231, .08) 100%); }
.hero--photo .container { position: relative; z-index: 2; width: 100%; }
.hero--photo .hero__content { max-width: 34rem;
  padding-top: calc(var(--header-h, 68px) + clamp(.5rem, 1.5vh, 1rem));
  padding-bottom: clamp(2.5rem, 7vh, 5rem); }
/* Надзаголовок снят — заголовок стал первым. Верхний отступ обнуляем, а
   лишний воздух над прописной буквой (внутренний выносной элемент Cormorant)
   срезаем отрицательным margin — иначе визуально текст «висит» ниже padding. */
.hero--photo .hero__title:first-child { margin-top: -.14em; }

.hero__eyebrow { display: flex; align-items: center; gap: 1.25rem; color: var(--hero-fg);
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.hero__eyebrow::after { content: ""; height: 1px; flex: 0 0 clamp(48px, 6vw, 104px);
  background: currentColor; opacity: .4; }

.hero__title { font-family: var(--font-head); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.3rem, 1rem + 5.2vw, 5rem); line-height: 1.03; letter-spacing: .012em;
  margin-top: clamp(1.5rem, 4vw, 2.5rem); color: var(--hero-fg);
  overflow-wrap: normal; word-break: keep-all; text-wrap: balance; }

/* Длинный заголовок-фраза (не имя метода): без капса и чуть мельче, чтобы
   предложение читалось как фраза, а не как вывеска. */
.hero__title--sentence { text-transform: none; letter-spacing: .005em;
  font-size: clamp(2.1rem, 1rem + 4.2vw, 4.1rem); line-height: 1.08; max-width: 18ch;
  text-wrap: balance; }

/* Смысловая строка под именем метода — крупная, серифом, но тише заголовка */
.hero__claim { margin-top: clamp(.9rem, 2.4vw, 1.5rem); max-width: 26ch;
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); line-height: 1.26; color: var(--hero-fg); }

.hero__lead { margin-top: clamp(1rem, 2.6vw, 1.6rem); max-width: 30rem;
  font-size: var(--fs-lead); line-height: 1.62; color: var(--hero-fg-muted); }

/* Мета-строка первого экрана: количество встреч и направлений программы. */
.hero__meta { margin-top: clamp(1.6rem, 4vw, 2.5rem); padding-top: clamp(1rem, 2.5vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--hero-fg) 30%, transparent);
  display: flex; flex-wrap: wrap; gap: .4rem clamp(1rem, 3vw, 2.25rem); }
.hero__meta span { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--hero-fg-muted); }

.hero__link { display: inline-flex; align-items: center; gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--font-sans); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hero-fg); }
.hero__link-rule { width: clamp(44px, 6vw, 96px); height: 1px; background: currentColor; opacity: .55;
  transition: width .25s ease; }
.hero__link-arrow { font-size: 1rem; letter-spacing: 0; transition: transform .25s ease; }
.hero__link:hover .hero__link-rule { width: clamp(60px, 8vw, 128px); }
.hero__link:hover .hero__link-arrow { transform: translateX(4px); }

/* Мобильный: фото не режем кропом во весь экран, а показываем полосой под текстом */
@media (max-width: 720px) {
  /* Мобильный: текст на кремовом фоне, фото — полосой ниже → возвращаем тёмный текст */
  .hero--photo { display: block; min-height: 0; background: var(--bg);
    --hero-fg: var(--ink); --hero-fg-muted: var(--ink-muted); }
  .hero--photo .hero__content { max-width: none;
    padding-top: calc(var(--header-h, 60px) + clamp(1rem, 5vw, 1.75rem));
    padding-bottom: clamp(1.75rem, 6vw, 2.5rem); }
  .hero__bg { position: static; height: auto; aspect-ratio: 16 / 11; object-position: 72% 50%; }
  .hero__veil { display: none; }
}

/* =============================================================================
   Календарь событий «Тело vs. Деньги» — месячная сетка с выделенными днями.
   Механика: две grid-строки (дни недели + дни) с одинаковыми 7 колонками,
   поэтому колонки идеально совпадают. На узких экранах — горизонтальная
   прокрутка внутри своего контейнера (вёрстка не ломается).
   ========================================================================== */
/* Лист-календарь: кремовая бумага в винной рамке, вся сетка прочерчена
   бордовыми линиями. Заголовок сезона — рукописным курсивом, ключевые даты
   обведены от руки. Цвет берём от единственного акцента палитры. */
.cal { margin-top: clamp(1.75rem, 4vw, 2.75rem);
  --cal-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --cal-ink: var(--accent); }

.cal__season { font-family: var(--font-head); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1; color: var(--cal-ink);
  margin: 0 0 clamp(.75rem, 2vw, 1.25rem); }

.cal__sheet { background: var(--surface); border: 1px solid var(--cal-ink);
  padding: clamp(.9rem, 2.2vw, 1.6rem); }

.cal__weekdays,
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.cal__weekdays { margin-bottom: clamp(.5rem, 1.4vw, .9rem); }
.cal__weekdays span { font-family: var(--font-head); font-weight: 400;
  font-size: clamp(.82rem, 1.1vw, 1.05rem); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cal-ink); text-align: center; }

/* Полная бордовая решётка: линии рисуют сами ячейки */
.cal__grid { border-top: 1px solid var(--cal-line); border-left: 1px solid var(--cal-line); }
.cal__cell { position: relative; display: flex; flex-direction: column; align-items: center;
  min-height: clamp(84px, 10vw, 128px); padding: clamp(.5rem, 1.1vw, .8rem) .4rem;
  background: transparent;
  border: 0; border-right: 1px solid var(--cal-line); border-bottom: 1px solid var(--cal-line); }
.cal__num { align-self: flex-start; font-family: var(--font-head); font-weight: 400;
  line-height: 1; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--cal-ink); }
.cal__month { order: -1; align-self: flex-start; margin-bottom: .3rem;
  font-family: var(--font-sans); font-size: .52rem; letter-spacing: .22em;
  text-transform: uppercase; color: color-mix(in srgb, var(--cal-ink) 60%, transparent); }

/* Подпись события — плотный мелкий гротеск по центру, как на референсе */
.cal__event { margin-top: auto; padding-top: .45rem; text-align: center; line-height: 1.3;
  font-family: var(--font-sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cal-ink); }
.cal__time { display: block; margin-top: .2rem; font-family: var(--font-head);
  font-style: italic; font-size: .8rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: color-mix(in srgb, var(--cal-ink) 72%, transparent); }

/* Особые даты — рукописным курсивом, без капса */
.cal__event--script { font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(.86rem, 1.1vw, 1.05rem); letter-spacing: 0; text-transform: none; }

/* Ключевой день обведён от руки — эллипс строго по центру цифры */
.cal__cell--circled .cal__num { position: relative; margin-left: .4rem; }
.cal__cell--circled .cal__num::after { content: ""; position: absolute;
  left: 50%; top: 48%; width: 2.15em; height: 1.85em;
  transform: translate(-50%, -50%) rotate(-7deg);
  border: 1px solid var(--cal-ink); border-radius: 50%; pointer-events: none; }

@media (max-width: 560px) {
  .cal { overflow-x: auto; padding-bottom: .5rem; }
  .cal__sheet { min-width: 640px; }
  /* В узкой ячейке капс с широкой разрядкой рвётся посреди слова —
     ужимаем трекинг и запрещаем перенос внутри слова. */
  .cal__event { letter-spacing: .05em; word-break: keep-all; overflow-wrap: normal; }
}


/* =============================================================================
   МИНИМАЛ-ЭДИТОРИАЛ — общий графический язык сайта.
   Новое решение: крупный «призрачный» серифный номер над каждым разделом +
   тонкие волосяные линии и больше воздуха. Работает на всех страницах.
   ========================================================================== */

/* Крупный номер раздела — тихий серифный акцент над надзаголовком */
.section-num { display: block; font-family: var(--font-head); font-weight: 300;
  font-size: clamp(3.25rem, 7vw, 6.5rem); line-height: .82; letter-spacing: .02em;
  color: var(--ink); opacity: .09; margin-bottom: clamp(.35rem, 1.2vw, .8rem); }
.section--ink .section-num { color: #EFEAE0; opacity: .2; }

/* Тонкая волосяная линия под номером+надзаголовком секции — общий ритм */
.section-head { position: relative; }
.section-head .eyebrow { position: relative; display: inline-block; }

/* Волосяные разделители между секциями (editorial-ритм, очень тихо) */
.section + .section { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.section--ink + .section,
.section + .section--ink { border-top-color: transparent; }

/* Кнопки — тише и точнее: тонкая рамка, спокойный ховер (минимализм) */
.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn--primary { background: var(--accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* =============================================================================
   Навбар поверх фото-hero: на первом экране прозрачный (часть картинки),
   при скролле «проявляется» кремовой плашкой с блюром (как на Z5).
   Включается только на страницах с фото-hero — через body[data-hero-overlay],
   который ставит app.js. Внутренние страницы работают как раньше (sticky-плашка).
   ========================================================================== */
body[data-hero-overlay] .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .4s ease, border-color .4s ease,
              -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
body[data-hero-overlay] .site-header.is-solid {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
/* Пока навбар прозрачный над светлым мрамором (десктоп) — текст меню графитовый.
   Как только плашка «проявилась» (.is-solid) — цвета остаются в основной палитре. */
@media (min-width: 721px) {
  body[data-hero-overlay] .site-header:not(.is-solid) .brand-word,
  body[data-hero-overlay] .site-header:not(.is-solid) .brand-logo,
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__toggle,
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__links a,
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__login,
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__profile { color: var(--ink); }
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__links a:hover,
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__profile:hover,
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__login:hover { color: var(--accent); }
  /* Аватар остаётся заливным кругом и получает тихую обводку в тон прожилок. */
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__avatar {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mauve) 42%, transparent);
  }
  body[data-hero-overlay] .site-header:not(.is-solid) .nav__avatar:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 62%, transparent);
  }
}

/* =============================================================================
   ============  ФИРМЕННЫЙ СТИЛЬ MWA — «ТИХИЙ ЛЮКС»  ============================
   Набор editorial-графики: номера разделов, тонкие линии, регистрационные метки,
   линия-калла, вертикальные лейблы, бегущая строка, врезки-цитаты, спецификации,
   медиа-рамки, монограмма-watermark, номерные списки. Всё декоративное —
   в потоке не ломается (pointer-events/aria-hidden у чисто визуальных узлов).
   Работает на ВСЕХ страницах через общие классы.
   ========================================================================== */

/* — Тонкие линии (варианты к базовому .rule) — */
.rule--strong { background: var(--border-strong); }
.rule--v { width: 1px; align-self: stretch; background: var(--border); }
.rule--accent { background: color-mix(in srgb, var(--accent) 60%, transparent); }

/* — Регистрационные уголки (print crop marks) — фирменная деталь панелей — */
.ticks { position: relative; }
.ticks::before, .ticks::after { content: ""; position: absolute; width: 11px; height: 11px;
  border-color: var(--border-strong); border-style: solid; pointer-events: none; }
.ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.ticks::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.section--ink .ticks::before, .section--ink .ticks::after { border-color: rgba(239,234,224,.4); }

/* — Маркер раздела: [ 01 ] · ЛЕЙБЛ · линия (единый зачин секции) — */
.smark { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.35rem);
  color: var(--taupe); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.smark__num { font-family: var(--font-head); font-weight: 400; font-size: 1.05rem;
  letter-spacing: .06em; color: var(--accent); }
.smark__line { flex: 1 1 auto; height: 1px; background: var(--border); }
.section--ink .smark { color: var(--taupe); }
.section--ink .smark__line { background: rgba(239,234,224,.2); }
.section--ink .smark__num { color: #E7C9CE; }

/* — Линия-калла: тонкий разделитель-мотив между блоками/секциями — */
.calla-rule { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem);
  margin-inline: auto; max-width: 42rem; }
.calla-rule::before, .calla-rule::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
/* глиф — инлайн-svg <svg class="calla-rule__glyph" stroke="currentColor">…</svg> */
.calla-rule__glyph { flex: 0 0 auto; width: 24px; height: 34px; color: var(--taupe); }
.section--ink .calla-rule::before, .section--ink .calla-rule::after { background: rgba(239,234,224,.28); }
.section--ink .calla-rule__glyph { color: #C9BFAD; }

/* — Вертикальный лейбл (сбоку блока) — */
.vlabel { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap; }

/* — Бегущая строка-вордмарк: тихий editorial-баннер между секциями — */
.strip { overflow: hidden; border-block: 1px solid var(--border);
  padding-block: clamp(.85rem, 2vw, 1.35rem); background: var(--surface); }
.strip__track { display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap;
  font-family: var(--font-head); font-weight: 300; font-size: clamp(1.35rem, 3vw, 2.3rem);
  color: var(--ink); animation: mwa-strip 42s linear infinite; will-change: transform; }
.strip__track > span { display: inline-flex; align-items: center; gap: 3rem; }
.strip__track > span::after { content: "✦"; font-size: .5em; color: var(--taupe); }
@keyframes mwa-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* — Врезка-цитата (pull quote) с ведущей чертой — */
.pull { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); max-width: 42rem; }
.pull__mark { width: 48px; height: 1px; background: var(--accent); }
.pull q, .pull p { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem); line-height: 1.3; quotes: none; text-wrap: balance; }
.pull cite { font-style: normal; font-family: var(--font-sans); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

/* — Спецификация: тонкие строки  ЛЕЙБЛ ——— значение — */
.spec { display: grid; }
.spec > div { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; align-items: baseline;
  padding-block: clamp(.9rem, 2vw, 1.35rem); border-top: 1px solid var(--border); }
.spec > div:last-child { border-bottom: 1px solid var(--border); }
.spec__k { flex: 0 0 auto; min-width: 10rem; color: var(--ink-faint);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.spec__v { flex: 1 1 320px; color: var(--ink); }
.section--ink .spec > div { border-color: rgba(239,234,224,.18); }

/* — Медиа-врезка: рамка + подпись + уголки — */
.media { position: relative; border: 1px solid var(--border); background: var(--surface-2);
  overflow: hidden; aspect-ratio: 4 / 3; }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
.media__cap { position: absolute; left: 1rem; bottom: .85rem; z-index: 1;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }

/* — Монограмма-watermark (крона MWA) в углу секции — */
.monogram { position: absolute; z-index: 0; pointer-events: none; color: var(--accent);
  opacity: .05; width: clamp(150px, 20vw, 340px); height: auto; }
.monogram--tr { top: 5%; right: 3%; } .monogram--tl { top: 5%; left: 3%; }
.monogram--br { bottom: 5%; right: 3%; } .monogram--bl { bottom: 5%; left: 3%; }
.section--ink .monogram { color: #EFEAE0; opacity: .07; }
.section > .container { position: relative; z-index: 1; }

/* — Номерной список (шаги/принципы) — */
.numbered { display: grid; gap: clamp(1.25rem, 3.5vw, 2.25rem); counter-reset: mwa-n; }
.numbered > li { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem); align-items: start;
  border-top: 1px solid var(--border); padding-top: clamp(1rem, 2.5vw, 1.6rem); }
.numbered > li::before { counter-increment: mwa-n;
  content: counter(mwa-n, decimal-leading-zero); font-family: var(--font-head); font-weight: 300;
  font-size: clamp(1.8rem, 1rem + 3vw, 3.2rem); color: var(--taupe); line-height: .85; }
.numbered__t { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h3);
  line-height: 1.15; }
.numbered__d { color: var(--ink-muted); margin-top: .4rem; }

/* — Ряд кап-тегов через разделитель — */
.tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  color: var(--ink-faint); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.tagrow > * + *::before { content: "·"; margin-right: 1.1rem; color: var(--taupe); }

/* — Крупная заглавная-инициал (буквица) для лид-абзацев — */
.dropcap::first-letter { font-family: var(--font-head); font-weight: 300; float: left;
  font-size: 3.4em; line-height: .78; padding: .05em .12em 0 0; color: var(--accent); }

/* — Секция-зачин: усиливаем воздух и центр-лимит для .section-head — */
.section-head { max-width: 46rem; }

/* =============================================================================
   ============  ПРАВКИ ЗАКАЗЧИКА (референс-борд + разметка на скринах)  =======
   Логотип без короны и скобок, дымчатая калла как фоновый мотив секций,
   блок «MWA [moi] — три уровня», фото экспертов, объединённая секция
   «Участие + заявка».
   ========================================================================== */

/* — Дымчатая калла как фоновый мотив секции (замена «мультяшного» цветка).
     Ставится классом .veil на .section; сторона — .veil--l / .veil--r. — */
.veil { position: relative; overflow: hidden; }
.veil > * { position: relative; z-index: 1; }
.veil::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -10%; height: 120%; width: min(46%, 620px);
  background: url("img/calla-veil.svg") no-repeat center / contain;
  opacity: .85; }
.veil--r::before { right: -6%; }
.veil--l::before { left: -6%; transform: scaleX(-1); }
.section--ink.veil::before { opacity: .5; }
@media (max-width: 860px) { .veil::before { width: 72%; opacity: .45; } }

/* — Знак-калла: одиночная линия по рисунку заказчика (вместо короны/лотоса) — */
.calla-mark { display: block; width: auto; height: 2.6rem; color: var(--accent); }

/* — MWA [moi]: три уровня, которые невозможно разделить — */
.moi { font-family: var(--font-head); font-weight: 300; letter-spacing: .02em; }
.moi__gloss { font-family: var(--font-head); font-style: italic; color: var(--ink-muted);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); line-height: 1.4; margin-top: .6rem;
  max-width: 44ch; }

.pillars { display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: clamp(2rem, 5vw, 3.5rem); }
.pillar { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3); }
.pillar__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem;
  color: var(--accent); }
.pillar__icon svg { width: 100%; height: 100%; }
.pillar__name { font-family: var(--font-sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.pillar__desc { color: var(--ink-muted); font-size: .92rem; line-height: 1.55; max-width: 22ch; }

/* — Портрет в карточке эксперта на главной (по референсу — с фото) — */
.expert-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
  margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) 0; }
.expert-card__photo > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; }
/* Пока фото нет — тихая заглушка вместо «пятна» */
.expert-card__photo--empty { display: grid; place-items: center; }
.expert-card__photo--empty::after { content: "ФОТО"; color: var(--ink-faint);
  font-family: var(--font-sans); font-size: .62rem; letter-spacing: .28em;
  border: 1px solid var(--border-strong); padding: .5rem 1rem; }

/* — Объединённая секция «Участие + заявка» (правка: объединить страницы) — */
.join { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .join { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 4vw, 4.5rem); } }
.join__aside { position: relative; }
@media (min-width: 1000px) { .join__aside { position: sticky; top: 6rem; } }

/* — Блок «MWA BODY»: 6 недель, каждая — теория / практика / интеграция.
     ВНИМАНИЕ: класс .week есть и в кабинете (cabinet.css) с другой семантикой,
     поэтому все правила ниже строго вложены в .weeks — пересечения нет. — */
.weeks { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); max-width: 56rem;
  margin-inline: auto; counter-reset: mwa-week; }
.weeks .week { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr); align-items: start; background: none; border: 0;
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem); border-top: 1px solid var(--border); }
@media (min-width: 760px) { .weeks .week { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.weeks .week__num { counter-increment: mwa-week; font-family: var(--font-head); font-weight: 300;
  line-height: .85; color: var(--taupe); }
.weeks .week__num::before { content: "Неделя"; display: block;
  font-family: var(--font-sans); font-size: .64rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .4rem; }
.weeks .week__num::after { content: counter(mwa-week, decimal-leading-zero); display: block;
  font-size: clamp(2.4rem, 1rem + 3.4vw, 3.6rem); }
.weeks .week__title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h3);
  line-height: 1.15; }
.weeks .week__air { margin-top: .5rem; color: var(--ink-muted); }
.weeks .week__air b { font-family: var(--font-sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--taupe);
  display: block; margin-bottom: .3rem; }
.weeks .week__list { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.weeks .week__list li { position: relative; padding-left: 1.9rem; color: var(--ink-muted); }
.weeks .week__list li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: 1.1rem; height: 1px; background: var(--taupe); }
.weeks .week__out { margin-top: var(--space-4); display: grid; gap: var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--border); }
.weeks .week__out > div { display: grid; gap: .3rem; }
@media (min-width: 620px) { .weeks .week__out > div { grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4); align-items: baseline; } }
.weeks .week__k { font-family: var(--font-sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.weeks .week__v { color: var(--ink); }
.weeks .week__v--todo { color: var(--ink-faint); font-style: italic; }

/* — Дополнительные дымчатые паттерны: складка, свод, облако.
     Живут на ::after, потому что ::before у секций уже занят фирменным
     паттерном .deco — новые слои ДОБАВЛЯЮТСЯ, ничего не вытесняя.
     Существующая калла-вуаль (.veil на ::before) остаётся как была. — */
.smoke { position: relative; overflow: hidden; }
.smoke > * { position: relative; z-index: 1; }
.smoke::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -10%; height: 120%; width: min(46%, 620px);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: .85; }
.smoke--r::after { right: -6%; }
.smoke--l::after { left: -6%; transform: scaleX(-1); }
.smoke--fold::after  { background-image: url("img/veil-fold.svg"); }
.smoke--arch::after  { background-image: url("img/veil-arch.svg"); }
.smoke--cloud::after { background-image: url("img/veil-cloud.svg"); }
@media (max-width: 860px) { .smoke::after { width: 72%; opacity: .45; } }

/* — Раздел заявки по референсу: слева текст, справа форма без карточки.
     Поля идут в столбик на всю ширину колонки, кнопка во всю ширину,
     согласие — строкой под кнопкой. — */
.apply-split { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .apply-split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); }
  .apply-split__intro { padding-top: .5rem; }
}
.apply-split__intro .lead { max-width: 34ch; }

/* Форма без плашки: поля лежат прямо на фоне секции */
.form--bare { gap: var(--space-4); }
.form--bare .field input { background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-color: var(--border); }
.form--bare .field input:focus { background: var(--surface); }
.form--bare .field label { font-weight: 500; font-size: .82rem; color: var(--ink-muted); }

/* Согласие текстом вместо чекбокса — как на референсе */
.form__note { margin-top: var(--space-3); color: var(--ink-faint); font-size: .82rem;
  line-height: 1.55; text-align: center; }
.form__note a { color: var(--accent); text-decoration: underline; }

/* Дымка в левом нижнем углу — как на референсе заявки */
.smoke--bl::after { top: auto; bottom: -12%; height: 78%; width: min(58%, 700px); }

/* — Струйки дыма в левом нижнем углу раздела заявки (по референсу):
     широкая горизонтальная полоса, не вертикальный мазок. — */
.smoke--wisp::after { background-image: url("img/veil-wisp.svg"); }
.smoke--wisp.smoke--bl::after { left: -8%; right: auto; bottom: 4%; top: auto;
  width: min(80%, 1000px); height: 52%; transform: none; }
@media (max-width: 860px) { .smoke--wisp.smoke--bl::after { width: 128%; height: 34%; bottom: 2%; } }

/* — Пара цифр под «тремя уровнями» — строкой, а не столбиком.
     .grid--2 требует 320px на колонку и в узком контейнере схлопывался
     в один столбец, поэтому здесь своя раскладка. — */
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(2.5rem, 8vw, 6rem); margin-top: clamp(2rem, 5vw, 3.25rem); }
.stat-row .stat { text-align: center; }

/* =============================================================================
   ГЛАВНАЯ ПО РЕФЕРЕНСУ — КОМПОЗИЦИЯ ИЗ ОТДЕЛЬНЫХ «СТРАНИЦ»
   На широком экране секции собираются в editorial-панно с белыми швами.
   На мобильном сохраняется обычная последовательная лента.
   ========================================================================== */
body.landing-board {
  background: #F7F6F3;
}

body.landing-board main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: #FAF9F7;
}

body.landing-board #top {
  position: absolute;
}

body.landing-board main > .hero {
  order: 0;
  grid-column: 1 / -1;
}

body.landing-board main > .strip {
  display: none;
}

body.landing-board #experts {
  order: 1;
  grid-column: span 5;
}

body.landing-board #program {
  order: 2;
  grid-column: span 7;
}

body.landing-board #pricing {
  order: 3;
  grid-column: span 4;
}

body.landing-board #doubts {
  order: 4;
  grid-column: span 4;
}

body.landing-board #apply {
  order: 5;
  grid-column: span 4;
}

body.landing-board #method {
  order: 6;
  grid-column: 1 / -1;
}

body.landing-board #calendar {
  order: 7;
  grid-column: 1 / -1;
}

body.landing-board main > .section {
  min-width: 0;
  margin: 0;
  padding-block: clamp(2.8rem, 4.8vw, 5.25rem);
  border: 0;
  background: transparent;
}

body.landing-board main > .section:nth-of-type(even) {
  background: transparent;
}

body.landing-board #experts,
body.landing-board #pricing {
  background-position: 15% 50%;
}

body.landing-board #program,
body.landing-board #apply {
  background-position: 88% 50%;
}

body.landing-board #doubts,
body.landing-board #method {
  background-position: 50% 50%;
}

body.landing-board main > .section > .container {
  width: 100%;
  padding-inline: clamp(1.4rem, 3vw, 3.4rem);
}

body.landing-board main > .section .section-head {
  max-width: 36rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
  text-align: left;
}

body.landing-board main > .section .section-head .lead {
  margin-inline: 0;
}

body.landing-board main > .section h2 {
  font-size: clamp(1.8rem, 2.3vw, 2.8rem);
}

body.landing-board .section-num {
  margin-bottom: .35rem;
  font-size: clamp(2.5rem, 4vw, 4rem);
  opacity: .14;
}

/* Первый экран: спокойная зона под текст слева, дымка и монограмма справа. */
body.landing-board .hero--photo {
  min-height: 78vh;
  min-height: 78svh;
  isolation: isolate;
}

body.landing-board .hero--photo::before {
  content: "W";
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: -.2em;
  color: rgba(90, 65, 69, .07);
  font-family: var(--font-head);
  font-size: clamp(20rem, 42vw, 44rem);
  font-weight: 300;
  line-height: .72;
  pointer-events: none;
}

body.landing-board .hero--photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -8%;
  right: -5%;
  width: min(54%, 760px);
  height: 116%;
  background: url("img/veil-fold.svg") no-repeat center / contain;
  opacity: .64;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body.landing-board .hero--photo .hero__content {
  max-width: 38rem;
  padding-top: clamp(10rem, 25vh, 15rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

body.landing-board .hero__eyebrow {
  color: var(--ink-muted);
}

body.landing-board .hero__eyebrow::after {
  display: none;
}

body.landing-board .hero__title {
  max-width: none;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(4rem, 7.4vw, 7.6rem);
  line-height: .88;
  letter-spacing: .015em;
}

body.landing-board .hero__claim {
  max-width: 31ch;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem);
  font-weight: 300;
  line-height: 1.45;
}

body.landing-board .hero__lead {
  max-width: 48ch;
  font-size: clamp(.92rem, .87rem + .22vw, 1.05rem);
  line-height: 1.65;
}

body.landing-board .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

body.landing-board .hero__actions .btn {
  min-width: 10.8rem;
}

body.landing-board .hero__meta {
  max-width: 34rem;
}

/* Эксперты: три компактных портретных карточки, как в левой панели референса. */
body.landing-board #experts .grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.65rem, 1.4vw, 1.1rem);
}

body.landing-board #experts .expert-card {
  gap: .6rem;
  padding: 0;
  border: 0;
  background: rgba(246, 245, 242, .55);
}

body.landing-board #experts .expert-card__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
}

body.landing-board #experts .expert-card .index-num,
body.landing-board #experts .expert-card .rule,
body.landing-board #experts .expert-card > .muted,
body.landing-board #experts .expert-card__formula {
  display: none;
}

body.landing-board #experts .expert-card__name,
body.landing-board #experts .expert-card__role {
  padding-inline: .2rem;
}

body.landing-board #experts .expert-card__name {
  margin-top: .35rem;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
}

body.landing-board #experts .expert-card__role {
  font-size: .56rem;
  letter-spacing: .12em;
}

body.landing-board #experts .cluster {
  justify-content: flex-start;
}

/* Программа: четыре цифры и расписание в одной широкой панели. */
body.landing-board #program .section-head {
  margin-inline: auto;
  text-align: center;
}

body.landing-board #program .grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

body.landing-board #program .stat__num {
  font-size: clamp(2rem, 3vw, 3.4rem);
}

body.landing-board #program .stat__label {
  font-size: .58rem;
  letter-spacing: .14em;
}

body.landing-board #program .schedule > li {
  padding-block: .8rem;
}

body.landing-board #program .schedule__who {
  min-width: 6rem;
  font-size: 1.05rem;
}

body.landing-board #program .schedule__what {
  font-size: .82rem;
}

/* Нижний ряд: участие, вопросы и заявка — три самостоятельные страницы. */
body.landing-board #pricing .grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  max-width: none !important;
}

body.landing-board #pricing .card {
  padding: clamp(1rem, 1.7vw, 1.5rem);
}

body.landing-board #pricing .card__title {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

body.landing-board #pricing .price__num {
  font-size: clamp(1.55rem, 2.1vw, 2.2rem);
}

body.landing-board #pricing .checks {
  font-size: .78rem;
}

body.landing-board #pricing .btn {
  padding-inline: .75rem;
  font-size: .62rem;
  letter-spacing: .12em;
}

body.landing-board #doubts .qa {
  margin-inline: 0;
}

body.landing-board #doubts .qa__item > summary {
  gap: .65rem;
  padding-block: .9rem;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
}

body.landing-board #doubts .qa__num {
  display: none;
}

body.landing-board #doubts .qa__body {
  padding-left: 0;
  font-size: .85rem;
}

body.landing-board #apply .apply-split {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

body.landing-board #apply .apply-split__intro {
  padding-top: 0;
}

body.landing-board #apply .apply-split__intro .lead {
  font-size: 1rem;
}

body.landing-board #apply .form--bare {
  gap: .8rem;
}

body.landing-board #apply .field input,
body.landing-board #apply .field textarea {
  min-height: 42px;
  padding: .65rem .8rem;
  background: rgba(246, 245, 242, .72);
}

body.landing-board #apply .field textarea {
  min-height: 76px;
}

/* Широкий нижний блок метода: текст, три уровня и цифры в одну линию. */
body.landing-board #method .container {
  display: grid;
  grid-template-columns: minmax(15rem, 1.25fr) minmax(28rem, 2.5fr) minmax(12rem, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

body.landing-board #method .section-head,
body.landing-board #method .pillars,
body.landing-board #method .stat-row {
  margin: 0;
}

body.landing-board #method .section-head {
  text-align: left;
}

body.landing-board #method .pillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.landing-board #method .stat-row {
  gap: clamp(1.5rem, 3vw, 3rem);
}

body.landing-board #method .cluster {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* Календарь остаётся отдельной полноширинной страницей после основной мозаики. */
body.landing-board #calendar .section-head {
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 1180px) {
  body.landing-board #experts,
  body.landing-board #program,
  body.landing-board #pricing,
  body.landing-board #doubts {
    grid-column: span 6;
  }

  body.landing-board #apply {
    grid-column: 1 / -1;
  }

  body.landing-board #method .container {
    grid-template-columns: 1fr 2fr;
  }

  body.landing-board #method .stat-row {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body.landing-board main > .section {
    grid-column: 1 / -1 !important;
  }

  body.landing-board #method .container {
    grid-template-columns: minmax(0, 1fr);
  }

  body.landing-board #method .pillars,
  body.landing-board #method .stat-row,
  body.landing-board #method .cluster {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  body.landing-board main {
    gap: 4px;
    padding: 4px;
  }

  body.landing-board .hero--photo {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
  }

  body.landing-board .hero--photo .hero__content {
    max-width: 30rem;
    padding-top: clamp(8rem, 20vh, 11rem);
    padding-bottom: 4rem;
  }

  body.landing-board .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 68% 50%;
  }

  body.landing-board .hero__veil {
    display: block;
  }

  body.landing-board .hero--photo::before {
    right: -8%;
    font-size: clamp(15rem, 76vw, 24rem);
  }

  body.landing-board .hero--photo::after {
    right: -28%;
    width: 92%;
    opacity: .38;
  }

  body.landing-board .hero__title {
    font-size: clamp(3.4rem, 16vw, 5.5rem);
  }

  body.landing-board main > .section {
    padding-block: 3.25rem;
  }

  body.landing-board #experts .grid--3,
  body.landing-board #pricing .grid--2,
  body.landing-board #program .grid--4,
  body.landing-board #method .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  body.landing-board #experts .expert-card {
    max-width: 21rem;
  }

  body.landing-board #program .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================================
   ЕДИНОЕ ФОНОВОЕ ПОЛОТНО
   Одна вертикальная текстура растянута по всей странице и прокручивается вместе
   с контентом. Секции не рисуют собственные фоны, поэтому линии не обрываются.
   ========================================================================== */
body.landing-board {
  background-color: #E5E2E1;
  background-image:
    linear-gradient(rgba(239, 237, 235, .14), rgba(229, 226, 225, .14)),
    url("img/page-smoke-texture.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  background-attachment: scroll;
}

body.landing-board main {
  gap: 0;
  padding: 0;
  background: transparent;
}

body.landing-board main > .hero,
body.landing-board main > .section,
body.landing-board main > .section:nth-of-type(even) {
  background-color: rgba(241, 239, 237, .28);
  background-image: none;
  background-position: initial;
  background-size: auto;
}

body.landing-board main > .section {
  border-top: 1px solid rgba(58, 24, 30, .11);
}

body.landing-board #program,
body.landing-board #doubts,
body.landing-board #apply {
  border-left: 1px solid rgba(58, 24, 30, .11);
}

body.landing-board main > section::before,
body.landing-board main > section::after {
  display: none;
}

body.landing-board .hero__bg {
  display: none;
}

body.landing-board .hero__veil {
  background:
    linear-gradient(90deg, rgba(243, 241, 239, .76) 0%, rgba(243, 241, 239, .48) 35%, rgba(243, 241, 239, .08) 64%, transparent 78%),
    linear-gradient(180deg, rgba(243, 241, 239, .18), transparent 38%);
}

body.landing-board .site-header.is-solid {
  background: rgba(237, 234, 232, .78);
}

@media (max-width: 820px) {
  body.landing-board #program,
  body.landing-board #doubts,
  body.landing-board #apply {
    border-left: 0;
  }
}

@media (max-width: 720px) {
  body.landing-board {
    background-position: 42% center;
  }

  body.landing-board .hero__bg {
    display: none;
  }
}

/* =============================================================================
   ПАТТЕРНЫ ВНУТРЕННИХ СТРАНИЦ
   У каждой публичной страницы своё цельное вертикальное полотно. Фон движется
   вместе со страницей; секции и карточки лишь слегка приглушают линии под текстом.
   ========================================================================== */
body.pattern-page {
  --page-pattern: url("img/page-smoke-service.jpg");
  min-height: 100%;
  background-color: #E5E2E1;
  background-image:
    linear-gradient(rgba(239, 237, 235, .12), rgba(229, 226, 225, .12)),
    var(--page-pattern);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  background-attachment: scroll;
}

body.pattern-page--method {
  --page-pattern: url("img/page-smoke-method.jpg");
}

body.pattern-page--experts {
  --page-pattern: url("img/page-smoke-experts.jpg");
}

body.pattern-page--program {
  --page-pattern: url("img/page-smoke-program.jpg");
}

body.pattern-page--pricing {
  --page-pattern: url("img/page-smoke-commerce.jpg");
}

body.pattern-page--apply {
  --page-pattern: url("img/page-smoke-apply.jpg");
}

body.pattern-page--payment {
  --page-pattern: url("img/page-smoke-payment.jpg");
}

body.pattern-page--checkout {
  --page-pattern: url("img/page-smoke-checkout.jpg");
}

body.pattern-page--success {
  --page-pattern: url("img/page-smoke-success.jpg");
}

body.pattern-page--privacy {
  --page-pattern: url("img/page-smoke-service.jpg");
}

body.pattern-page main {
  background: transparent;
}

body.pattern-page main .hero,
body.pattern-page main .section {
  background-color: rgba(242, 240, 238, .34);
  background-image: none;
}

body.pattern-page main .section--tint {
  background-color: rgba(230, 227, 223, .45);
}

body.pattern-page main .section--ink {
  background-color: rgba(35, 33, 32, .92);
}

body.pattern-page main > section::before,
body.pattern-page main > section::after {
  display: none;
}

body.pattern-page .site-header {
  background: rgba(237, 234, 232, .74);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}

body.pattern-page .card,
body.pattern-page .showcase,
body.pattern-page .art-panel,
body.pattern-page .expert-card,
body.pattern-page .cal__sheet,
body.pattern-page .access-box {
  background-color: rgba(246, 245, 242, .78);
}

body.pattern-page .field input,
body.pattern-page .field textarea,
body.pattern-page .field select {
  background-color: rgba(246, 245, 242, .8);
}

/* =============================================================================
   REVIEW V1
   Тёплая зернистая тема поверх фоновой системы Дани. Публичные страницы
   используют существующее bulletproof-ядро и одну локальную шрифтовую семью.
   ========================================================================== */
:root {
  --bg: #F2E8DC;
  --surface: #FBF5EC;
  --surface-2: #E8D8CE;
  --surface-3: #D7C0BB;
  --ink: #211D1C;
  --ink-muted: #625956;
  --ink-faint: #877A75;
  --border: #D8C9BE;
  --border-strong: #BBA99F;
  --accent: #3A181E;
  --accent-strong: #2A1015;
  --accent-contrast: #F6F4EE;
  --accent-soft: #E6D0CD;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-sans);
  --review-inline: clamp(1.5rem, 6vw, 8rem);
  --fs-hero: clamp(2.65rem, 1.45rem + 5vw, 5.8rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2.4vw, 3.3rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .7vw, 1.65rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
}

h1,
.h1,
h2,
.h2 {
  font-weight: 500;
  letter-spacing: .015em;
}

h3,
.h3 {
  font-weight: 500;
  letter-spacing: .01em;
}

body.landing-board,
body.pattern-page {
  background-color: var(--bg);
  background-blend-mode: normal, multiply;
  background-size: auto, cover;
}

body.landing-board {
  background-image:
    linear-gradient(rgba(242, 232, 220, .42), rgba(228, 209, 201, .48)),
    url("img/page-smoke-texture.jpg");
}

body.pattern-page {
  background-image:
    linear-gradient(rgba(242, 232, 220, .72), rgba(228, 209, 201, .78)),
    var(--page-pattern);
}

body.review-page main > .section,
body.review-page main > .section:nth-of-type(even),
body.review-page main .section {
  background-image: none;
}

body.review-page .site-header,
body.review-page .site-header.is-solid {
  background: rgba(247, 238, 228, .42);
  -webkit-backdrop-filter: saturate(155%) blur(20px);
  backdrop-filter: saturate(155%) blur(20px);
  border-bottom-color: rgba(255, 255, 255, .46);
  box-shadow:
    inset 0 -1px 0 rgba(75, 15, 26, .08),
    0 12px 32px rgba(50, 10, 18, .04);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.review-page .site-header,
  body.review-page .site-header.is-solid {
    background: rgba(247, 238, 228, .9);
  }
}

body.pattern-page .nav,
body.review-page .nav {
  min-height: 76px;
}

body.pattern-page .site-header > .container,
body.review-page .site-header > .container,
body.review-page .review-page-hero > .container,
body.landing-board .review-hero > .container {
  max-width: none;
  padding-inline: var(--review-inline);
}

body.review-page .nav__links a[aria-current="page"] {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}

/* Активный раздел в меню подчёркивается линией. Рисуем псевдоэлементом, а не
   border-bottom: линия не влияет на высоту пункта, ложится с отступом под текст
   и раскрывается от центра. Ставим на все пункты, чтобы анимация была и при
   появлении, и при уходе. */
body.landing-board .nav__links a {
  position: relative;
}

body.landing-board .nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.35em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

body.landing-board .nav__links a[aria-current]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  body.landing-board .nav__links a::after {
    transition: none;
  }
}

/* В шапке остаётся только знак MWA. Текстовый вордмарк в футере не затрагиваем. */
.site-header .brand-word {
  display: none;
}

body.review-page .brand-logo,
body.pattern-page .brand-logo {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}

body.review-page .nav__brand,
body.pattern-page .nav__brand {
  min-width: 44px;
  min-height: 44px;
  justify-content: flex-start;
}

body.review-page .nav__login--disabled {
  display: inline-flex !important;
  cursor: not-allowed;
  opacity: .48;
}

body.landing-board.review-page main {
  display: block;
  padding: 0;
}

body.landing-board.review-page #method,
body.landing-board.review-page #experts,
body.landing-board.review-page #program,
body.landing-board.review-page #result,
body.landing-board.review-page #participation {
  order: initial;
  grid-column: auto;
}

body.landing-board.review-page #method .container {
  display: block;
}

.review-label,
.program-metrics,
.program-footer-line {
  margin: 0;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.review-marker {
  margin: 0;
}

.review-page-hero {
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  display: grid;
  align-items: center;
  padding-top: clamp(4.5rem, 10vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid rgba(58, 24, 30, .12);
}

.review-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

.review-page-hero__grid > * {
  min-width: 0;
}

.review-page-hero h1,
.participation-title {
  max-width: 17ch;
}

.review-copy {
  max-width: 52ch;
}

.review-copy p + p {
  margin-top: 1.1rem;
}

body.landing-board .review-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(75, 15, 26, .18);
}

body.landing-board .review-hero {
  background:
    linear-gradient(90deg, rgba(247, 238, 227, .52) 0%, rgba(241, 225, 215, .34) 54%, rgba(115, 53, 65, .08) 100%),
    url("img/page-smoke-texture.jpg") 64% center / cover no-repeat;
  background-blend-mode: normal, multiply;
}

body.landing-board .review-hero .container {
  max-width: none;
  padding-inline: var(--review-inline);
}

body.landing-board.review-page main > .review-section > .container {
  max-width: none;
  padding-inline: var(--review-inline);
}

/* Раздел больше не растянут на весь экран. Раньше `min-height: 100dvh` с
   центрированием делил остаток высоты поровну, и видимые зазоры зависели от
   объёма содержимого — от 106px у «Экспертов» до 245px у «Участия», хотя
   паддинги везде были одинаковые. Теперь высота считается по содержимому, и
   отступы сверху и снизу одинаковы во всех разделах: сверху — как было в
   «01 · Метод», снизу — как было в «02 · Эксперты».
   Высоту фиксированной шапки паддинг не компенсирует: её вычитает переход по
   якорю в app.js, а нативный переход по хешу учитывает scroll-margin-top. */
body.landing-board.review-page main > .review-section {
  display: grid;
  padding-top: clamp(1.5rem, 6dvh, 3.75rem);
  padding-bottom: clamp(2rem, 9.36dvh, 5.28rem);
  scroll-margin-top: var(--header-h, 76px);
}

body.landing-board.review-page > .site-footer {
  min-height: 0;
}

body.landing-board.review-page > .site-footer > .container {
  max-width: none;
  padding-inline: var(--review-inline);
}

.participation-frame {
  width: 100%;
  margin-inline: auto;
}

/* Hero-блок центрируется по высоте экрана. Чтобы опустить текст чуть ниже
   оптического центра, верхний паддинг увеличиваем на удвоенный сдвиг:
   бокс подрастает вверх на --review-hero-drop, а содержимое уезжает вниз
   ровно на --review-hero-drop. */
body.landing-board .review-hero .hero__content {
  --review-hero-pad: clamp(2rem, 4vh, 3.5rem);
  --review-hero-drop: clamp(1.9rem, 4.9svh, 3.55rem);
  max-width: min(52rem, 66vw);
  padding-block: calc(var(--review-hero-pad) + var(--review-hero-drop) * 2) var(--review-hero-pad);
}

.review-hero .hero__eyebrow,
.review-hero .hero__meta,
.review-marker {
  color: var(--ink-muted);
  font-size: clamp(.68rem, 1.5vw, .78rem);
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.landing-board .review-hero .hero__title {
  margin-top: clamp(1.75rem, 3.8vh, 2.6rem);
  max-width: none;
  font-size: clamp(3.5rem, 7.3vw, 7.5rem);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: .86;
}

body.landing-board .review-hero .hero__claim {
  max-width: 43rem;
  margin-top: clamp(1.4rem, 3vh, 2rem);
  font-size: clamp(1.15rem, 1.65vw, 1.65rem);
  font-weight: 550;
  line-height: 1.35;
}

body.landing-board .review-hero .hero__lead {
  max-width: 46rem;
  margin-top: 1rem;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}

.review-hero .hero__actions {
  margin-top: 2rem;
}

.review-hero .hero__meta {
  margin-top: 1.8rem;
  color: var(--accent);
}

.review-marker {
  color: var(--accent);
}

.review-hero .hero__veil {
  display: none;
}

.review-section {
  position: relative;
  border-top: 1px solid rgba(75, 15, 26, .13);
  background-color: rgba(248, 239, 228, .72) !important;
}

.review-section--soft {
  background-color: rgba(224, 201, 195, .68) !important;
}

.review-section--ink {
  background-color: rgba(35, 33, 32, .96) !important;
  color: #F5F4F1;
}

.review-section--ink .review-marker,
.review-section--ink .review-label {
  color: #C9BAB6;
}

.review-section--ink .lead,
.review-section--ink .muted {
  color: rgba(245, 244, 241, .74);
}

.review-section--ink .btn--ghost {
  border-color: rgba(245, 244, 241, .55);
  color: #F5F4F1;
}

.review-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(1.8rem, 4vw, 3.5rem);
}

.review-intro > * {
  min-width: 0;
}

/* Интро раздела «01 · Метод» повторяет сетку карточек под ним: заголовок в
   первой колонке, текст — со второй по третью. За счёт этого саммари начинается
   ровно по левому краю карточки «02 · Тело» и заканчивается по правому краю
   карточки «03 · Энергия». */
.method-review-intro {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.method-review-intro h2 {
  max-width: 17ch;
  font-size: clamp(2rem, 3.35vw, 3.75rem);
  font-weight: 500;
  line-height: 1.04;
  text-wrap: balance;
}

.method-review-summary {
  grid-column: 2 / -1;
  width: 100%;
  justify-self: stretch;
}

.method-review-summary p {
  margin: 0;
  color: var(--ink-muted);
  font-size: clamp(.95rem, 1.08vw, 1.08rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.method-review-summary p + p {
  margin-top: .9rem;
}

.method-review-summary strong {
  color: var(--ink);
  font-weight: 650;
}

.review-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  background: transparent;
  border: 0;
}

.review-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-card,
.expert-review-card,
.review-price-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .76);
  /* Фиксированный радиус вместо процентного: процент считается отдельно по
     ширине и высоте, поэтому углы получались эллиптическими и разными у каждой
     карточки — 40×35 в «Методе», 40×55 в «Программе», 62×32 у тарифов. */
  border-radius: 2.25rem;
  background:
    linear-gradient(132deg,
      rgba(255, 255, 255, .4) 0%,
      rgba(255, 255, 255, .05) 44%,
      rgba(214, 214, 214, .12) 100%),
    rgba(214, 214, 214, .28);
  -webkit-backdrop-filter: blur(26px) saturate(150%) brightness(1.04);
  backdrop-filter: blur(26px) saturate(150%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(52, 52, 52, .1),
    0 20px 48px rgba(35, 35, 35, .12);
}

.review-card::before,
.expert-review-card::before,
.review-price-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 24%, rgba(255, 255, 255, .3) 43%, transparent 62%),
    radial-gradient(72% 54% at 14% -8%, rgba(255, 255, 255, .72), transparent 72%),
    radial-gradient(52% 80% at 108% 112%, rgba(255, 255, 255, .28), transparent 76%);
}

.review-card > *,
.expert-review-card > *,
.review-price-card > * {
  position: relative;
  z-index: 1;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .review-card,
  .expert-review-card,
  .review-price-card {
    background: #d6d6d6;
  }
}

.review-card > span {
  color: var(--ink-faint);
  font-size: .75rem;
  letter-spacing: .16em;
}

.review-card h3,
.expert-review-card h3,
.review-price-card h2 {
  margin-top: 1.2rem;
}

.review-card p,
.expert-review-card p,
.review-price-card p {
  margin-top: .75rem;
  color: var(--ink-muted);
}

/* В карточках «Программы» текст прижат к верху: заголовок стал первым в блоке,
   поэтому свой верхний отступ ему не нужен. Паддинги симметричны — компенсация
   высоты больше не нужна, содержимое выросло на списки. Заголовок крупнее
   базового h3 на 20%: та же формула clamp, умноженная на 1.2. */
#program .review-card h3 {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.26rem + .96vw, 1.92rem);
}

/* Текст карточек «Программы» на 20% крупнее базового. Единица em — от кегля
   карточки, поэтому пропорция держится на всех брейкпоинтах. */
#program .review-card p,
#program .review-card .review-card-list {
  font-size: 1.2em;
}

/* Список направлений в карточке: маркеры слева, кегль и цвет как у обычного
   текста карточки. Селектор с типом обязателен: в ядре ul[class] сбрасывает
   маркеры и паддинг, и по специфичности он перебил бы один класс. */
ul.review-card-list {
  margin-top: .75rem;
  padding-left: 1.15em;
  list-style: disc;
  color: var(--ink-muted);
}

ul.review-card-list li + li {
  margin-top: .2rem;
}

ul.review-card-list li::marker {
  color: var(--ink-faint);
}

/* Подзаголовок из интро убран, поэтому заголовок занимает всю строку сетки и
   центрируется по контейнеру раздела. */
#program .review-intro h2 {
  grid-column: 1 / -1;
  text-align: center;
}

/* Заголовок «6 недель · 3 эксперта · 18 онлайн-встреч» должен идти одной
   строкой. Кегль подобран под ширину колонки интро; ниже 861px интро
   схлопывается в одну колонку и строка снова переносится по месту. */
@media (min-width: 861px) {
  #program .review-intro h2 {
    font-size: clamp(1.5rem, 2vw, 2.45rem);
    white-space: nowrap;
  }
}

/* =============================================================================
   Секция обратной связи: форма слева, контакты и соцсети справа.
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(1.8rem, 4vw, 3.5rem);
}

.contact-form {
  max-width: 34rem;
}

/* Поля лежат прямо на фоне раздела: прозрачная заливка вместо молочной, чтобы
   цвет совпадал с фоном сайта на любом фоне секции — включая текстуру. */
.contact-form .field input,
.contact-form .field textarea,
.contact-form .field select,
.contact-form .field input:focus,
.contact-form .field textarea:focus {
  background: transparent;
}

.contact-side__title {
  font-size: clamp(1.4rem, 1.9vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.contact-side__lead {
  margin-top: .75rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.contact-side__label {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ink-muted);
  font-size: clamp(.68rem, 1.5vw, .78rem);
  font-weight: 300;
  letter-spacing: .22em;
  line-height: 1.55;
  text-transform: uppercase;
}

ul.contact-mails {
  margin-top: .6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .35rem;
}

ul.contact-mails a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 24, 30, .28);
  transition: color .18s ease, border-color .18s ease;
}

ul.contact-mails a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* Иконки соцсетей: только контур, без плашек и обводок. Кликабельная зона
   всё равно 44px — минимальная комфортная цель для пальца, — но она невидима:
   сама иконка меньше и центрирована внутри. */
ul.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
  padding: 0;
  list-style: none;
}

.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  transition: color .18s ease, opacity .18s ease;
}

/* Заливку задаём атрибутом на самой иконке, а не здесь: CSS перебивает
   презентационный атрибут, и контурные иконки (fill="none") залились бы
   сплошняком. */
.social-link svg {
  width: 24px;
  height: 24px;
}

.social-link:hover {
  color: var(--accent);
}

/* Ссылка ещё не задана: показываем иконку приглушённой и не даём кликнуть,
   чтобы не уводить посетителя в никуда. */
.social-link.is-pending {
  opacity: .38;
  pointer-events: none;
  cursor: default;
}

/* В подвале иконки наследуют цвет текста подвала и чуть компактнее. */
.care-footer .social-link,
.site-footer .social-link {
  width: 40px;
  height: 40px;
  color: inherit;
}

.care-footer .social-link svg,
.site-footer .social-link svg {
  width: 22px;
  height: 22px;
}

.care-footer .social-link:hover,
.site-footer .social-link:hover {
  opacity: .65;
  color: inherit;
}

.footer__contacts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form {
    max-width: none;
  }
}

.method-review-grid {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  gap: clamp(1rem, 2vw, 1.75rem);
  background: transparent;
  border: 0;
}

.method-review-card {
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
}

.method-review-card > span {
  color: #5c5956;
}

.method-review-card h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  font-weight: 500;
}

.method-review-card p {
  max-width: 42ch;
  font-size: clamp(.92rem, 1vw, 1.02rem);
  line-height: 1.55;
  color: #555250;
  text-wrap: pretty;
}

.method-review-card p + p {
  margin-top: .9rem;
}

.expert-review-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform .62s cubic-bezier(.22, 1, .36, 1),
    background-color .45s ease,
    box-shadow .62s cubic-bezier(.22, 1, .36, 1);
}

.expert-review-card--link:hover {
  transform: translateY(-4px);
  background-color: rgba(214, 214, 214, .36);
  box-shadow: 0 24px 56px rgba(50, 10, 18, .08);
}

.expert-review-card--link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.review-link {
  display: inline-flex;
  margin-top: 2rem;
}

.expert-monogram {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(58, 24, 30, .2);
  background: rgba(58, 24, 30, .07);
  color: var(--accent);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1;
}

.expert-monogram--large {
  width: clamp(7rem, 15vw, 11rem);
  height: clamp(7rem, 15vw, 11rem);
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
}

.experts-review-list {
  display: grid;
  gap: 1px;
  background: rgba(58, 24, 30, .15);
  border: 1px solid rgba(58, 24, 30, .15);
}

.expert-profile {
  display: grid;
  grid-template-columns: minmax(8rem, .32fr) minmax(0, 1.68fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: rgba(250, 249, 247, .88);
  scroll-margin-top: clamp(6.5rem, 12vw, 9rem);
}

.expert-profile:target {
  position: relative;
  z-index: 1;
  box-shadow:
    inset 4px 0 0 var(--accent),
    0 22px 54px rgba(50, 10, 18, .08);
}

.expert-profile__copy h2 {
  max-width: 25ch;
  margin-top: .9rem;
  font-size: clamp(1.5rem, 2.5vw, 2.35rem);
}

.expert-profile__copy p:not(.review-label) {
  max-width: 72ch;
  margin-top: 1.2rem;
  color: var(--ink-muted);
}

.method-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(58, 24, 30, .15);
  border: 1px solid rgba(58, 24, 30, .15);
}

.method-card {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: rgba(250, 249, 247, .9);
}

.method-card--wide {
  grid-column: 1 / -1;
}

.method-card h2 {
  margin-top: 1rem;
}

.method-card p:not(.review-label) {
  max-width: 68ch;
  margin-top: 1rem;
  color: var(--ink-muted);
}

.program-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(58, 24, 30, .15);
  border: 1px solid rgba(58, 24, 30, .15);
}

.program-track {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2.75rem);
  background: rgba(250, 249, 247, .9);
}

.program-track h2 {
  margin-top: .8rem;
  margin-bottom: 1.5rem;
}

.program-track > p:not(.review-label) {
  color: var(--ink-muted);
}

.program-list,
.program-practices {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-list li,
.program-practices li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding-block: .9rem;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  line-height: 1.45;
  text-transform: uppercase;
}

.program-list li span {
  color: var(--ink-faint);
  font-size: .7rem;
  letter-spacing: .12em;
}

.program-practices {
  counter-reset: energy;
  margin-top: 1rem;
}

.program-practices li {
  counter-increment: energy;
}

.program-practices li::before {
  content: "0" counter(energy);
  color: var(--ink-faint);
  font-size: .7rem;
  letter-spacing: .12em;
}

.program-footer-line {
  margin-top: 2rem;
  text-align: center;
}

.review-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 7vw, 7rem);
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

.review-result h3 {
  margin-bottom: 1rem;
}

.review-list {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-list li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.55;
}

.review-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .42rem;
  height: .42rem;
  background: currentColor;
}

.pricing-preview .review-price-card {
  min-height: 20rem;
}

.review-price-card {
  display: flex;
  flex-direction: column;
}

.review-price-card h2 {
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  letter-spacing: -.05em;
}

.review-price-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.pricing-review .review-price-card {
  min-height: 38rem;
}

.review-price-card--featured {
  background: #2B2021;
  color: #F5F4F1;
}

.review-price-card--featured .review-label,
.review-price-card--featured p {
  color: #D6C8C4;
}

.review-list--light {
  margin-block: 2rem;
}

.price-actions {
  display: grid;
  gap: .7rem;
  margin-top: auto;
}

.price-actions .btn {
  width: 100%;
  margin: 0;
}

.btn:disabled,
.btn[data-release-disabled] {
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none;
}

.commerce-note {
  max-width: 56rem;
  margin: 1.5rem auto 0;
  color: var(--ink-muted);
  font-size: .9rem;
  text-align: center;
}

.participation-title {
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

@media (max-width: 860px) {
  body.review-page .nav[data-open="true"] {
    background: rgba(247, 238, 228, .88);
  }

  body.review-page .nav[data-open="true"] .nav__links,
  body.review-page .nav[data-open="true"] .nav__actions {
    gap: .35rem;
  }

  body.review-page .nav[data-open="true"] a {
    width: 100%;
    min-height: 44px;
    align-items: center;
  }

  .review-page-hero__grid,
  .review-intro,
  .review-result {
    grid-template-columns: minmax(0, 1fr);
  }

  .method-review-intro {
    gap: 1.35rem;
  }

  .method-review-summary {
    grid-column: auto;
    justify-self: start;
  }

  .review-page-hero h1 {
    max-width: 22ch;
  }

  .program-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  :root {
    --section-y: 3.75rem;
  }

  body.review-page .container {
    padding-inline: 1.1rem;
  }

  .btn {
    width: 100%;
    min-height: 50px;
    padding-inline: 1rem;
    white-space: normal;
  }

  body.landing-board .review-hero {
    min-height: 100dvh;
  }

  body.landing-board .review-hero .hero__content {
    max-width: none;
    padding-block: 2.75rem 3rem;
  }

  body.landing-board .review-hero .hero__title {
    font-size: clamp(3.2rem, 15vw, 4.5rem);
    letter-spacing: .015em;
    line-height: .88;
  }

  .review-hero .hero__meta {
    max-width: 28rem;
  }

  .review-grid--2,
  .review-grid--3,
  .method-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .method-review-intro h2 {
    max-width: 20ch;
    font-size: clamp(1.9rem, 9vw, 2.6rem);
  }

  .method-review-grid {
    margin-top: 2rem;
  }

  .method-card--wide {
    grid-column: auto;
  }

  .expert-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .expert-profile__visual {
    width: max-content;
  }

  .expert-monogram--large {
    width: 6.5rem;
    height: 6.5rem;
    font-size: 2.25rem;
  }

  .program-list li,
  .program-practices li {
    font-size: .82rem;
  }

  .pricing-review .review-price-card,
  .pricing-preview .review-price-card {
    min-height: 0;
  }

  .review-price-card .btn {
    align-self: stretch;
  }

  .cookie {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
  }
}

/* =============================================================================
   STONE CRACK V1 — экспериментальный и полностью обратимый визуальный слой.
   Для отката достаточно удалить этот блок и assets/img/stone-crack-line.svg.
   ========================================================================== */
:root {
  --stone-base: #DEDAD4;
  --stone-panel: rgba(239, 235, 230, .66);
  --stone-panel-soft: rgba(226, 220, 215, .68);
  --stone-panel-deep: rgba(208, 202, 196, .72);
  --stone-crack: url("img/stone-crack-line.svg?v=2");
  --stone-marble: url("img/mwa-marble-bg.png?v=1");
}

body.landing-board,
body.pattern-page {
  background-color: var(--stone-base);
  background-image: none;
}

body.landing-board .review-hero,
body.landing-board main > .review-section,
body.pattern-page main > section,
body.pattern-page main.section {
  --stone-current-panel: var(--stone-panel);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--stone-current-panel) !important;
  background-image:
    linear-gradient(var(--stone-current-panel), var(--stone-current-panel)),
    var(--stone-marble) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-blend-mode: normal, normal;
}

body.landing-board .review-hero {
  background-position: center, 50% 48%;
}

body.landing-board.review-page .review-hero {
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
}

/* На сверхшироких экранах текстура заполняет hero целиком, без видимого
   окончания исходного растра по правому краю. */
@media (min-width: 1200px) and (min-aspect-ratio: 16 / 9) {
  body.landing-board.review-page .review-hero {
    background-size: 100% 100%, 100% 100% !important;
  }
}

body.landing-board #method {
  background-position: center, 18% 50%;
}

body.landing-board #experts {
  background-position: center, 42% 50%;
}

body.landing-board #program {
  background-position: center, 68% 50%;
}

body.landing-board #result {
  background-position: center, 84% 50%;
}

body.landing-board #participation {
  background-position: center, 30% 50%;
}

body.landing-board .review-section--soft {
  --stone-current-panel: var(--stone-panel-soft);
}

body.landing-board .review-section--ink,
body.pattern-page main > .review-section--ink {
  --stone-current-panel: var(--stone-panel-deep);
  color: var(--ink);
}

body.landing-board .review-section--ink .review-marker,
body.landing-board .review-section--ink .review-label,
body.pattern-page main > .review-section--ink .review-marker,
body.pattern-page main > .review-section--ink .review-label {
  color: var(--accent);
}

body.landing-board .review-section--ink .lead,
body.landing-board .review-section--ink .muted,
body.pattern-page main > .review-section--ink .lead,
body.pattern-page main > .review-section--ink .muted {
  color: var(--ink-muted);
}

body.landing-board .review-section--ink .btn--ghost,
body.pattern-page main > .review-section--ink .btn--ghost {
  border-color: rgba(33, 29, 28, .58);
  color: var(--ink);
}

body.pattern-page main > .review-section--ink .btn--light {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

body.landing-board .review-hero::after,
body.landing-board main > .review-section::after,
body.pattern-page main > section::after,
body.pattern-page main.section::after {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  width: min(30vw, 430px);
  height: 74%;
  background-image: var(--stone-crack);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .34;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body.landing-board .review-hero::after {
  inset: -6% -4% -6% auto;
  width: min(52vw, 680px);
  height: 112%;
  opacity: .56;
}

body.landing-board #method::after {
  top: 8%;
  right: -7rem;
  transform: rotate(-8deg);
  opacity: .24;
}

body.landing-board #experts::after {
  left: -10rem;
  bottom: -24%;
  width: min(33vw, 470px);
  height: 82%;
  transform: scaleX(-1) rotate(9deg);
  opacity: .2;
}

body.landing-board #program::after {
  top: -22%;
  right: 8%;
  width: min(27vw, 390px);
  height: 67%;
  transform: rotate(-22deg);
  opacity: .19;
}

body.landing-board #result::after {
  right: -8rem;
  bottom: -18%;
  width: min(31vw, 450px);
  height: 78%;
  transform: scaleY(-1) rotate(6deg);
  opacity: .25;
}

body.landing-board #participation::after {
  top: 12%;
  left: -9rem;
  width: min(29vw, 420px);
  height: 70%;
  transform: scaleX(-1) rotate(-10deg);
  opacity: .21;
}

body.pattern-page main > section::after,
body.pattern-page main.section::after {
  top: -17%;
  right: -8rem;
  opacity: .28;
}

body.pattern-page main > section:nth-of-type(even)::after {
  top: auto;
  right: auto;
  bottom: -19%;
  left: -9rem;
  width: min(34vw, 470px);
  transform: scaleX(-1) rotate(8deg);
  opacity: .23;
}

body.pattern-page--experts main > section:first-child::after {
  top: 8%;
  right: -10rem;
  transform: rotate(-12deg);
}

body.pattern-page--program main > section:first-child::after {
  top: -28%;
  right: 10%;
  transform: rotate(-24deg);
  opacity: .22;
}

body.pattern-page--pricing main > section:first-child::after,
body.pattern-page--apply main > section:first-child::after {
  top: 15%;
  right: -9rem;
  transform: scaleY(-1) rotate(5deg);
}

body.pattern-page--privacy main.section::after {
  top: 1rem;
  right: -9rem;
  height: min(52rem, 72vh);
  transform: rotate(-7deg);
  opacity: .2;
}

body.landing-board .review-hero > *,
body.landing-board main > .review-section > *,
body.pattern-page main > section > *,
body.pattern-page main.section > * {
  position: relative;
  z-index: 1;
}

/* Мягкое проявление содержимого после завершения прокрутки к слайду. */
body.landing-board .review-section.is-section-arriving > .container,
body.landing-board .site-footer.is-section-arriving > .container {
  animation: section-content-arrive .82s .08s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes section-content-arrive {
  from {
    opacity: .48;
    transform: translateY(18px);
  }
}

/* Компактный финал ленты: служба заботы и открытый доступ к правовой странице. */
body.landing-board.review-page > .care-footer {
  min-height: 0;
  padding-block: clamp(2.25rem, 3.5vw, 3.5rem) clamp(1.75rem, 3vw, 2.75rem);
  scroll-margin-top: var(--header-h, 76px);
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, .045), transparent 34%),
    #201E1C;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.care-footer__intro {
  max-width: min(70rem, 84vw);
}

.care-footer__eyebrow {
  margin-bottom: .9rem;
  color: rgba(255, 255, 255, .56);
  font-size: .67rem;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.care-footer__intro h2 {
  max-width: 36ch;
  color: #F5F0E9;
  font-size: clamp(1.7rem, 2.65vw, 2.95rem);
  font-weight: 520;
  line-height: 1.08;
}

.care-footer__intro > p:not(.care-footer__eyebrow) {
  max-width: 60ch;
  margin-top: .9rem;
  color: rgba(255, 255, 255, .64);
  line-height: 1.6;
}

.care-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.15rem;
}

.care-footer .btn--light {
  color: #201E1C;
}

.care-footer .btn--ghost {
  border-color: rgba(255, 255, 255, .38);
  color: rgba(255, 255, 255, .88);
}

.care-footer .btn--ghost:hover {
  border-color: rgba(255, 255, 255, .82);
  color: #fff;
}

.care-footer__meta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(13rem, .7fr) minmax(13rem, .7fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.care-footer__meta .footer__brand {
  margin-bottom: .75rem;
}

.care-footer__meta .small {
  max-width: 42ch;
  color: rgba(255, 255, 255, .52);
}

.care-footer__legal-link {
  align-self: start;
}

.care-footer__legal-link a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  text-decoration-thickness: 1px;
  text-underline-offset: .35rem;
}

.care-footer .footer__legal {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  font-size: .76rem;
}

.care-footer .footer__req {
  max-width: 76ch;
}

/* Внутренние страницы используют единый режим чтения вместо общего меню. */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.site-header .brand-logo,
.reading-return__logo {
  view-transition-name: mwa-mark;
}

.reading-header {
  view-transition-name: reading-header;
  min-height: 86px;
  display: grid;
  place-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(242, 237, 231, .58);
  border-bottom: 1px solid rgba(75, 15, 26, .08);
  -webkit-backdrop-filter: saturate(145%) blur(22px);
  backdrop-filter: saturate(145%) blur(22px);
  box-shadow: 0 12px 34px rgba(50, 10, 18, .035);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .reading-header {
    background: rgba(242, 237, 231, .94);
  }
}

.reading-return {
  min-width: 9.5rem;
  min-height: 72px;
  padding: .55rem 1rem .45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.reading-return__logo {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
}

.reading-return__label {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: .72;
}

.reading-return__label::before {
  content: "←";
  display: inline-block;
  margin-right: .45rem;
  transition: transform .2s ease;
}

.reading-return:hover .reading-return__label::before,
.reading-return:focus-visible .reading-return__label::before {
  transform: translateX(-.25rem);
}

.reading-return:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

::view-transition-group(mwa-mark) {
  animation-duration: .96s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-image-pair(mwa-mark) {
  isolation: auto;
}

::view-transition-old(mwa-mark),
::view-transition-new(mwa-mark) {
  object-fit: contain;
  animation-duration: .96s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(root) {
  animation: page-lift-out .66s cubic-bezier(.4, 0, .2, 1) both;
}

::view-transition-new(root) {
  animation: page-lift-in .88s cubic-bezier(.22, 1, .36, 1) both;
}

::view-transition-old(site-header),
::view-transition-old(reading-header) {
  animation: reading-nav-out .52s cubic-bezier(.4, 0, .2, 1) both;
}

::view-transition-new(reading-header) {
  animation: reading-header-in .72s .34s cubic-bezier(.22, 1, .36, 1) both;
}

::view-transition-new(site-header) {
  animation: site-header-return .76s .48s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes page-lift-out {
  to {
    opacity: .72;
    transform: translateY(-5vh) scale(.992);
  }
}

@keyframes page-lift-in {
  from {
    opacity: .72;
    transform: translateY(14vh) scale(.992);
  }
}

@keyframes reading-nav-out {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes reading-header-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes site-header-return {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (max-width: 680px) {
  body.landing-board .review-hero::after,
  body.landing-board main > .review-section::after,
  body.pattern-page main > section::after,
  body.pattern-page main.section::after {
    width: min(68vw, 340px);
    height: 58%;
    opacity: .24;
  }

  body.landing-board .review-hero::after {
    inset: 8% -72% auto auto;
    width: min(115vw, 460px);
    height: 88%;
    opacity: .34;
  }

  body.landing-board #method::after,
  body.landing-board #result::after,
  body.pattern-page main > section::after,
  body.pattern-page main.section::after {
    right: -9rem;
    left: auto;
  }

  body.landing-board #experts::after,
  body.landing-board #participation::after,
  body.pattern-page main > section:nth-of-type(even)::after {
    right: auto;
    left: -10rem;
  }

  body.landing-board #program::after {
    top: -12%;
    right: -3rem;
  }

  .reading-header {
    min-height: 76px;
  }

  .reading-return {
    min-height: 68px;
  }

  .care-footer__intro {
    max-width: none;
  }

  body.landing-board.review-page > .care-footer {
    padding-top: calc(76px + 2rem);
  }

  .care-footer__meta {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .care-footer__actions .btn {
    flex: 1 1 100%;
  }

  .reading-page .review-page-hero {
    min-height: calc(100svh - 76px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .expert-review-card--link,
  .expert-profile,
  body.review-page main,
  body.review-page > .site-footer,
  body.review-page .nav__toggle,
  body.review-page .nav__toggle svg,
  body.review-page .nav__toggle .nav-toggle-line,
  body.review-page .nav__links,
  body.review-page .nav__links a {
    transition: none !important;
  }

  body.landing-board .review-section.is-section-arriving > .container,
  body.landing-board .site-footer.is-section-arriving > .container,
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(reading-header),
  ::view-transition-new(reading-header),
  ::view-transition-old(mwa-mark),
  ::view-transition-new(mwa-mark) {
    animation: none;
  }
}

/* =============================================================================
   MOBILE REVIEW HEADER + COOKIE
   Компактная плавающая шапка не участвует в высоте первого экрана. Раскрытое
   меню живёт отдельным полноэкранным glass-слоем и не сдвигает контент.
   ========================================================================== */
@media (max-width: 860px) {
  body.review-page {
    --mobile-menu-duration: .62s;
    --mobile-menu-ease: cubic-bezier(.22, .78, .24, 1);
  }

  body.review-page .site-header,
  body.review-page .site-header.is-solid {
    height: calc(76px + env(safe-area-inset-top, 0px));
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.review-page .site-header > .container {
    height: 100%;
    padding-inline: var(--review-inline);
  }

  body.review-page .nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: env(safe-area-inset-top, 0px);
    gap: 1rem;
  }

  body.review-page .nav__brand,
  body.review-page .nav__toggle {
    position: relative;
    z-index: 2;
  }

  body.review-page .nav__brand {
    grid-column: 1;
  }

  body.review-page .nav__toggle {
    grid-column: 3;
    display: inline-flex;
    background: rgba(248, 241, 232, .68);
    border-color: rgba(75, 15, 26, .22);
    box-shadow: 0 10px 28px rgba(50, 10, 18, .06);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    transition:
      transform var(--mobile-menu-duration) var(--mobile-menu-ease),
      background-color .42s ease,
      border-color .42s ease;
  }

  body.review-page .nav__toggle .nav-toggle-line {
    transform-box: fill-box;
    transform-origin: center;
    transition:
      transform var(--mobile-menu-duration) var(--mobile-menu-ease),
      opacity .36s ease;
  }

  body.review-page .nav .nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    padding:
      calc(76px + env(safe-area-inset-top, 0px) + 1.75rem)
      var(--review-inline)
      calc(2rem + env(safe-area-inset-bottom, 0px));
    gap: .35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(247, 238, 228, .68);
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: saturate(128%) blur(26px);
    backdrop-filter: saturate(128%) blur(26px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.75rem) scale(1.006);
    transform-origin: 50% 0;
    transition:
      opacity .5s ease,
      transform var(--mobile-menu-duration) var(--mobile-menu-ease),
      visibility 0s linear var(--mobile-menu-duration);
  }

  body.review-page .nav .nav__links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: .35rem 0;
    color: var(--ink);
    font-size: clamp(1.08rem, 4.5vw, 1.3rem);
    font-weight: 520;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .44s ease,
      transform .56s var(--mobile-menu-ease);
  }

  body.review-page .nav[data-open="true"] {
    flex-wrap: nowrap;
    row-gap: 0;
    padding-bottom: 0;
    background: transparent;
  }

  body.review-page .nav[data-open="true"] .nav__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  body.review-page .nav[data-open="true"] .nav__links a {
    opacity: 1;
    transform: none;
  }

  body.review-page .nav[data-open="true"] .nav__links a:nth-child(1) {
    transition-delay: .08s;
  }

  body.review-page .nav[data-open="true"] .nav__links a:nth-child(2) {
    transition-delay: .13s;
  }

  body.review-page .nav[data-open="true"] .nav__links a:nth-child(3) {
    transition-delay: .18s;
  }

  body.review-page .nav[data-open="true"] .nav__links a:nth-child(4) {
    transition-delay: .23s;
  }

  body.review-page .nav[data-open="true"] .nav__links a:nth-child(5) {
    transition-delay: .28s;
  }

  body.review-page .nav[data-open="true"] .nav__toggle {
    transform: scale(.96);
    background: rgba(251, 246, 238, .9);
    border-color: rgba(75, 15, 26, .32);
  }

  body.review-page .nav[data-open="true"] .nav-toggle-line--top {
    transform: translateY(5px) rotate(45deg);
  }

  body.review-page .nav[data-open="true"] .nav-toggle-line--middle {
    opacity: 0;
    transform: scaleX(0);
  }

  body.review-page .nav[data-open="true"] .nav-toggle-line--bottom {
    transform: translateY(-5px) rotate(-45deg);
  }

  html.nav-is-open,
  html.nav-is-open body.review-page {
    overflow: hidden;
  }

  body.review-page main,
  body.review-page > .site-footer {
    transition:
      filter var(--mobile-menu-duration) var(--mobile-menu-ease),
      opacity .5s ease;
    transform-origin: 50% 18%;
  }

  html.nav-is-open body.review-page main,
  html.nav-is-open body.review-page > .site-footer {
    filter: saturate(.88) blur(6px);
    opacity: .78;
    transform: none;
  }

}

@media (max-width: 680px) {
  body.landing-board.review-page .review-hero {
    min-height: 100vh;
    min-height: 100lvh;
  }

  body.landing-board .review-hero .hero__content {
    padding-top: clamp(5.25rem, 11svh, 6rem);
  }

  .cookie {
    left: .75rem;
    right: .75rem;
    bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 1.5rem);
    box-sizing: border-box;
    transform: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .75rem;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
  }

  .cookie[hidden] {
    display: none;
  }

  .cookie p {
    width: 100%;
    min-width: 0;
    flex: none;
    font-size: .875rem;
    line-height: 1.55;
  }

  .cookie .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: .85rem;
    font-size: .7rem;
    letter-spacing: .14em;
    white-space: normal;
  }
}

/* First screen: a single editorial column and the transparent MWA mark. */
body.review-page .site-header .brand-logo--w {
  display: block;
  width: 2.25rem;
  height: 1.46rem;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}

.reading-return__logo {
  width: 2.25rem;
  height: 1.46rem;
  object-fit: contain;
  object-position: center;
}

body.landing-board .review-hero .hero__content {
  width: min(100%, 28rem);
  max-width: 28rem;
  --review-hero-rule-width: min(100%, 24.35rem);
}

.review-hero .hero__eyebrow,
.review-hero .hero__actions,
.review-hero .hero__meta {
  width: var(--review-hero-rule-width);
  max-width: var(--review-hero-rule-width);
}

body.landing-board .review-hero .hero__title,
body.landing-board .review-hero .hero__claim,
body.landing-board .review-hero .hero__lead {
  width: 100%;
  max-width: none;
}

.review-hero .hero__meta,
.review-marker {
  letter-spacing: .22em;
}

body.landing-board .review-hero .hero__title {
  display: block;
  font-weight: 300;
  letter-spacing: -.025em;
  transform: scaleX(.855);
  transform-origin: left center;
  /* Оптическая выключка по левому краю. У крупного «M» левый боковой вынос
     0.122em, после scaleX(.855) — 0.104em; за вычетом выноса мелкого текста
     остаётся 0.102em. Блок стоит ровно, вправо уезжают именно чернила буквы,
     поэтому компенсируем в em — сдвиг держится на любом кегле. */
  margin-left: -.102em;
}

body.landing-board .review-hero .hero__claim,
body.landing-board .review-hero .hero__lead {
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.55;
  text-wrap: pretty;
}

body.landing-board .review-hero .hero__claim {
  font-weight: 650;
}

body.landing-board .review-hero .hero__lead {
  font-weight: 400;
}

body.landing-board .review-hero .hero__actions.hero-cta-group {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: clamp(.6rem, 1.2vw, .8rem);
  justify-content: start;
  width: 100%;
  max-width: 100%;
}

body.landing-board .review-hero .hero-cta-group .btn {
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 680px) {
  body.review-page .site-header .brand-logo--w {
    width: 2.35rem;
    height: 1.52rem;
  }

  .reading-return__logo {
    width: 2.35rem;
    height: 1.52rem;
  }

  body.landing-board .review-hero .hero__content {
    width: 100%;
    max-width: none;
  }

  body.landing-board .review-hero .hero__title {
    letter-spacing: -.035em;
  }

  body.landing-board .review-hero .hero__actions.hero-cta-group {
    grid-template-columns: minmax(0, max-content);
  }
}

/* A single veil canvas continues beneath every slide and reading page. */
body.landing-board,
body.pattern-page {
  position: relative;
  isolation: isolate;
  background-color: #d6d6d6;
  background-image: none;
}

body.landing-board::before,
body.pattern-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -20vh 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(214, 214, 214, .08), rgba(214, 214, 214, .08)),
    url("img/hero-veil-desktop-v1.png?v=2");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: contrast(1.02) opacity(.68);
  mix-blend-mode: multiply;
  transform: translate3d(0, var(--veil-parallax-y, 0px), 0) scale(1.02);
  transform-origin: center;
  will-change: transform;
}

body.landing-board .review-hero,
body.landing-board main > .review-section,
body.pattern-page main > section,
body.pattern-page main.section {
  --stone-current-panel: rgba(214, 214, 214, .08);
  background-color: var(--stone-current-panel) !important;
  background-image: none !important;
  background-position: center !important;
}

body.landing-board .review-section--soft,
body.landing-board .review-section--ink,
body.pattern-page main > .review-section--ink {
  --stone-current-panel: rgba(214, 214, 214, .14);
}

/* The old crack experiment is disabled without deleting its rollback asset. */
body.landing-board .review-hero::after,
body.landing-board main > .review-section::after,
body.pattern-page main > section::after,
body.pattern-page main.section::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

@media (max-width: 680px) {
  body.landing-board::before,
  body.pattern-page::before {
    inset: -14vh 0;
    background-image:
      linear-gradient(rgba(214, 214, 214, .08), rgba(214, 214, 214, .08)),
      url("img/hero-veil-mobile-v1.png?v=2");
    background-position: center top;
    transform: translate3d(0, var(--veil-parallax-y, 0px), 0) scale(1.035);
  }

  body.landing-board .review-hero .hero__title {
    transform: scaleX(.84);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-board::before,
  body.pattern-page::before {
    transform: none;
    will-change: auto;
  }
}

/* =============================================================================
   LIQUID GLASS NAVBAR
   Серый #d6d6d6 остаётся непрозрачным fallback. В современных браузерах
   полупрозрачные слои и backdrop-filter дают глубину без ухудшения контраста.
   ========================================================================== */
body.review-page .site-header,
body.review-page .site-header.is-solid,
body.pattern-page .site-header,
body[data-hero-overlay].review-page .site-header,
body[data-hero-overlay].review-page .site-header.is-solid {
  isolation: isolate;
  background: #d6d6d6;
  background:
    linear-gradient(112deg,
      rgba(255, 255, 255, .36) 0%,
      rgba(255, 255, 255, .04) 38%,
      rgba(214, 214, 214, .08) 68%,
      rgba(255, 255, 255, .18) 100%),
    rgba(214, 214, 214, .26);
  border-top: 1px solid rgba(255, 255, 255, .88);
  border-bottom-color: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(32px) saturate(160%) brightness(1.05);
  backdrop-filter: blur(32px) saturate(160%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(52, 52, 52, .1),
    0 14px 38px rgba(35, 35, 35, .12);
}

body.review-page .site-header::before,
body.pattern-page .site-header::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 24%, rgba(255, 255, 255, .3) 43%, transparent 62%),
    radial-gradient(44% 180% at 16% -42%, rgba(255, 255, 255, .92), transparent 74%),
    radial-gradient(38% 150% at 82% 180%, rgba(255, 255, 255, .42), transparent 76%);
}

body.review-page .site-header > .container,
body.pattern-page .site-header > .container {
  position: relative;
  z-index: 1;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.review-page .site-header,
  body.review-page .site-header.is-solid,
  body.pattern-page .site-header,
  body[data-hero-overlay].review-page .site-header,
  body[data-hero-overlay].review-page .site-header.is-solid {
    background: #d6d6d6;
  }
}

@media (max-width: 860px) {
  body.review-page .nav__toggle,
  body.review-page .nav[data-open="true"] .nav__toggle {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .48), rgba(214, 214, 214, .16)),
      rgba(214, 214, 214, .4);
    border-color: rgba(52, 52, 52, .2);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .82),
      0 8px 22px rgba(35, 35, 35, .1);
  }

  body.review-page .nav .nav__links {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(214, 214, 214, .1)),
      rgba(214, 214, 214, .5);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
    backdrop-filter: blur(32px) saturate(145%);
  }
}

/* =============================================================================
   UNIFIED ACCENT BUTTONS
   Все CTA используют один глубокий бордовый акцент. Ссылка в кабинет в спокойном
   состоянии контурная, а при наведении поддерживает общий акцент. Она намеренно
   переопределяет защитное скрытие из ядра: владелец вернул её в публичный navbar.
   ========================================================================== */
.btn,
.site-header .nav__login:not([hidden]) {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .15s ease;
}

.btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 10px 24px rgba(58, 24, 30, .16);
}

/* Наведение: кнопка мягко съезжает вбок, а не подпрыгивает. Вертикальный
   отскок из ядра (.btn:active { translateY(1px) }) заменён на тот же боковой
   сдвиг — иначе клик дёргал кнопку вверх-вниз поверх горизонтального движения. */
.btn {
  position: relative;
  will-change: transform;
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

/* Кнопка уезжает вправо и утаскивает свою левую границу из-под курсора: ховер
   слетает, кнопка возвращается, ховер снова срабатывает — получается дрожание.
   Невидимая зона слева шире сдвига, поэтому указатель остаётся внутри.
   Расширяем только влево: справа это перекрыло бы соседнюю кнопку в группе,
   где зазор всего ~10px. */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9px;
  right: 0;
}

.btn:hover,
.btn:focus-visible {
  transform: translateX(4px);
}

.btn:active {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:focus-visible,
  .btn:active {
    transform: none;
  }
}

body.landing-board .review-hero .hero-cta-group .hero-cta--secondary {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(33, 29, 28, .58) !important;
  color: var(--ink) !important;
  box-shadow: none;
}

/* Кнопки hero живут по общей метрике .btn (48px / .75rem 1.5rem / .8rem).
   Уменьшенный размер остаётся только у ссылки в кабинет — она подстраивается
   под высоту навбара. */
.site-header .nav__login:not([hidden]) {
  min-height: 44px;
  padding: .75rem 1.35rem;
  font-size: .72rem;
  letter-spacing: .22em;
}

.site-header .nav__login:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(33, 29, 28, .58);
  border-color: rgba(33, 29, 28, .58) !important;
  border-radius: var(--radius-pill);
  color: var(--ink) !important;
  box-shadow: none;
  cursor: pointer;
}

.site-header .nav__login[hidden] {
  display: none !important;
}

.btn:not(:disabled):not([data-release-disabled]):not([aria-disabled="true"]):hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 14px 32px rgba(42, 16, 21, .24);
}

.site-header .nav__login:not([hidden]):hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 12px 28px rgba(58, 24, 30, .22);
}

/* Ссылка в кабинет ведёт себя как кнопки: плавно съезжает вбок, без прыжка по
   вертикали. Слева — та же невидимая зона, чтобы сдвиг не выводил курсор за
   границу и ховер не мигал. */
.site-header .nav__login:not([hidden]) {
  position: relative;
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.site-header .nav__login:not([hidden])::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9px;
  right: 0;
}

.site-header .nav__login:not([hidden]):hover,
.site-header .nav__login:not([hidden]):focus-visible,
.site-header .nav__login:not([hidden]):active {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav__login:not([hidden]):hover,
  .site-header .nav__login:not([hidden]):focus-visible,
  .site-header .nav__login:not([hidden]):active {
    transform: none;
  }
}

.btn:disabled,
.btn[data-release-disabled],
.btn[aria-disabled="true"] {
  box-shadow: none;
}

@media (max-width: 860px) {
  body.review-page .nav[data-open="true"] .nav__actions {
    display: flex;
    position: static;
    flex: 1 0 100%;
    align-items: stretch;
  }

  .nav[data-open="true"] .nav__login:not([hidden]) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .site-header .nav__login {
    animation: none !important;
    translate: 0 0;
  }
}

/* Кнопка кабинета в полноэкранном мобильном меню. На десктопе остаётся
   прежняя кнопка справа в .nav__actions; на мобильном она идёт после разделов,
   а не растягивается поверх верхней строки между логотипом и крестиком. */
.site-header .nav__login--menu:not([hidden]) {
  display: none !important;
}

@media (max-width: 860px) {
  body.review-page .nav__actions,
  body.review-page .nav[data-open="true"] .nav__actions {
    display: none !important;
  }

  body.review-page .nav .nav__links .nav__login--menu:not([hidden]) {
    display: inline-flex !important;
    align-self: flex-start;
    width: auto !important;
    min-height: 44px;
    margin-top: 1rem;
    padding: .7rem 1.25rem;
    font-size: .72rem;
  }
}