/* ============================================================
   home.css — ЧИСТЫЙ СЛОЙ ГЛАВНОЙ (грузится последним)
   Фон: белый. Цвета: строго брендбук (landing-elya/css/style.css).
   Грамматика: Apple без анимаций — типографика, воздух, пилюли.
   Область действия: body.home-clean. Новые блоки — префикс .nx-*
   Отзывы (.reviews) и Reels (.stories) НЕ трогаем — живут своим CSS.
   ============================================================ */
/* палитра --nx-*, кнопка «наверх», развилка «задать вопрос» и выпадашка
   разделов в шапке вынесены в shell.css: они рисуются на каждой странице,
   а этот файл теперь подключается только там, где есть nx-разметка. */

body.home-clean{background:#fff!important}
/* шаг секций главной — половина канона (27.09.2026, правки Зины «убрать
   воздух»): стыки блоков были 215–262 px при 60–140 на внутренних страницах.
   Только главная (nx-seq): те же секции и переменные держат блог, каталог,
   статью и подарок. --nx-sec* объявлены через var(--sec) на :root и там же
   вычислены, поэтому объявляем их здесь заново — иначе они наследуют старое. */
body.nx-seq{--sec:clamp(38px,5vw,64px);--sec-half:clamp(22px,2.75vw,36px);
  --nx-sec:var(--sec);--nx-sec-sm:var(--sec-half)}
/* отзывы берут отступ не из переменных: вне облака — 88 px из redesign.css,
   в облаке (≥861) заголовок висит в сцене на top:9vh (refine.css) */
body.nx-seq .reviews:not(.rev-cloud-sec){padding-block:44px}
body.nx-seq .rev-cloud-sec .section-head{top:4.5vh}
/* низ облака — прежний канон: карточки сцены свисают за дорожку до ~40 px, и
   при половинном отступе overflow:hidden режет их прямой линией */
body.nx-seq .reviews.rev-cloud-sec{padding-bottom:clamp(44px,5.5vw,72px)}
/* гасим «театр» только на главной */
body.home-clean #moodveil,
body.home-clean nav.page-index{display:none!important}
body.home-clean::before{display:none!important}
@media(min-width:1200px){
  body.home-clean .container{margin-left:auto!important;margin-right:auto!important}
}

body.home-clean .nx{max-width:var(--nx-wrap);margin-inline:auto;padding-inline:var(--nx-pad)}
body.home-clean .nx-eyebrow{font-family:'Open Sans',sans-serif;font-weight:600;font-size:var(--fs-mini);
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-violet)}

/* кнопки: пилюли, одна система */
/* justify-content:center — иначе содержимое прижато к левому краю и
   разрядка на ховере растёт только вправо; из центра она расходится
   в обе стороны, как и просил заказчик */
.nx-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;font-family:'Open Sans',sans-serif;
  /* высота задана явно: раньше она складывалась из унаследованного
     line-height и плавала 53/57/58 у трёх кнопок одной страницы */
  font-weight:600;font-size:var(--btn-fs);line-height:1.2;height:var(--btn-h);
  padding:0 var(--btn-px);border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  /* 0.18с читались как мигание; канон сайта — 0.45-0.55с мягкой кривой */
  /* кривая мягче канона страницы: cubic-bezier(.16,1,.3,1) выбрасывает
     почти всё изменение в первые миллисекунды, и ховер читался рывком */
  transition-property:transform,box-shadow,background-color,border-color,color,letter-spacing;
  transition-duration:.55s;transition-timing-function:cubic-bezier(.4,.05,.2,1);
  white-space:nowrap;text-decoration:none}
.nx-btn:active{transform:translateY(1px)}
/* Ховер отзывается глубиной, а не заливкой. Сплошной #F0DCFF превращал
   кнопку в сиреневую плашку, а перекраска фиолетового в другой фиолетовый
   выглядела миганием. Теперь тон уходит в фирменные чернила, тень —
   растворённая лавандовая, без тёмного пятна под пилюлей. */
.nx-btn--primary{background:var(--nx-violet);color:#fff;
  border-color:var(--nx-violet);box-shadow:var(--gloss)}
.nx-btn:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
.nx-btn:disabled,.nx-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.nx-btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;
  box-shadow:var(--gloss),var(--lift)}
.nx-btn--ghost{background:transparent;color:var(--nx-violet);border-color:var(--nx-lavender)}
.nx-btn--ghost:hover{background:transparent;color:var(--nx-ink);
  border-color:var(--nx-violet);box-shadow:var(--lift)}
.nx-btn--light{background:#fff;color:var(--nx-violet);border-color:transparent}
.nx-btn--light:hover{background:#fff;color:var(--nx-ink);
  border-color:var(--nx-lavender);box-shadow:var(--lift)}

/* reveal */
/* Пункт 127: непроявленный блок ловил фокус. Замер на живой главной — 66
   ссылок и кнопок с накопленной прозрачностью 0, но в порядке обхода Tab:
   человек с клавиатуры уезжал в пустоту, а экранный диктор зачитывал то,
   чего на экране нет. `visibility:hidden` убирает их из обхода и снимается
   вместе с проявлением; в переходе он идёт отдельным свойством, иначе
   вернулся бы мгновенно и анимация проявления пропала бы. */
/* Скрываем только там, где проявлять будет чему: класс js ставит первый
   же inline-скрипт в head. Без JS правило не применяется вовсе — иначе 39
   блоков остаются скрытыми навсегда, и человек с отключёнными скриптами
   листает 8 тысяч пикселей пустоты вместо главной. */
/* Размытие из входа убрано 18.09. `filter: blur()` — не композитное
   свойство: кадр пересчитывается целиком, а среди .nx-rv есть портрет
   min(60vw,980px) x min(80vh,780px) с маской, то есть на Retina около двух
   тысяч пикселей по стороне. Пять таких переходов шли внахлёст с подъёмом
   занавеса, и вход первого экрана заметно рвало. Остались opacity и
   transform — обе едут на композиторе. */
html.js body.home-clean .nx-rv{opacity:0;visibility:hidden;transform:translateY(26px) scale(.988);
  transition:opacity 1.25s cubic-bezier(.16,1,.3,1),transform 1.25s cubic-bezier(.16,1,.3,1),
             visibility 1.25s}
html.js body.home-clean .nx-rv.in{opacity:1;visibility:visible;transform:none}
/* посадка на якорь внутри проявляющегося блока (?subscribe_error…#subscribeError):
   браузер прыгает к цели, пока блок ещё сдвинут, — статус садился под шапку
   (WebKit, критик 08.10). Блок с целью раскрыт сразу, как .dl-rv в refine.css */
html.js body.home-clean .nx-rv:is(:target,:has(:target)){opacity:1;visibility:visible;
  transform:none;transition:none}
/* Кнопка, участвующая в проявлении, теряла отклик целиком: правило выше
   переписывает transition, и «Посмотреть дипломы» на /about/ после
   проявления не отвечала на наведение вовсе. Держим оба набора. */
/* Длительность отклика — общая с ореолом (--btn-glow-dur), а не --dur-ui:
   правило переписывает transition ЦЕЛИКОМ и потому задаёт скорость кнопке
   после проявления. С --dur-ui свет на about/blog/article шёл .55s, пока
   соседние кнопки той же страницы разгорались .42s, и разница читалась. */
html.js body.home-clean .nx-btn.nx-rv{
  transition:opacity 1.25s var(--dl-ease),transform 1.25s var(--dl-ease),
             filter 1.25s var(--dl-ease),visibility 1.25s,
             box-shadow var(--btn-glow-dur) var(--ease-ui),
             background-color var(--btn-glow-dur) var(--ease-ui),
             border-color var(--btn-glow-dur) var(--ease-ui),
             color var(--btn-glow-dur) var(--ease-ui),
             letter-spacing var(--btn-glow-dur) var(--ease-ui)}
/* Тот же префикс html.js, что и у скрытия выше: без него правило
   проигрывает по специфичности, и просивший «без анимаций» получает
   полный въезд с блюром. visibility тоже снимаем — скрытие ставит её. */
/* .nx-btn.nx-rv назван отдельно: правило его отклика выше весит 0,4,2 и
   перебивало глушилку (0,3,2) — кнопка, участвующая в проявлении, у
   просившего «без анимаций» продолжала и въезжать, и разгораться. */
@media(prefers-reduced-motion:reduce){
  html.js body.home-clean .nx-rv,
  html.js body.home-clean .nx-btn.nx-rv{opacity:1;visibility:visible;transform:none;filter:none;transition:none}}
/* Печать: класс .in выдаёт экранный IntersectionObserver, поэтому всё, до
   чего человек не долистал, ушло бы в принтер пустыми блоками. */
@media print{html.js body.home-clean .nx-rv{opacity:1;visibility:visible;transform:none;filter:none;transition:none}}

/* 1. HERO: типографский манифест по центру (Apple-грамматика, без изображения).
   Первый экран заполняют текст + полоса доверия, прижатая к сгибу */
body.home-clean .nx-hero{padding:clamp(16px,2.5vw,34px) 0 clamp(24px,3vw,44px)}
body.home-clean .nx-hero__in{display:grid;grid-template-columns:1.04fr .96fr;
  grid-template-areas:"head media" "fork media";
  column-gap:clamp(24px,4vw,72px);align-items:center;
  min-height:calc(100vh - 390px)}                 /* топбар+шапка+кромка полосы цифр из-за сгиба */
@supports(height:100dvh){body.home-clean .nx-hero__in{min-height:calc(100dvh - 390px)}}
body.home-clean .nx-hero__head{grid-area:head;align-self:end;text-align:left}
body.home-clean .nx-hero h1{font-family:'Arsenal',Georgia,serif;font-weight:700;line-height:1.06;letter-spacing:-.015em;
  font-size:clamp(2.1rem,4.3vw,3.4rem);margin:24px 0 0;color:var(--nx-violet)}   /* потолок 3.4rem: «чем отсутствие болезней» (10,6em) влезает в колонку ~585px */
body.home-clean .nx-hero h1 em{font-style:italic;color:var(--nx-terra)}
body.home-clean .nx-hero__sub{margin:24px 0 0;font-size:clamp(16px,1.4vw,19px);color:var(--nx-muted);max-width:42ch;line-height:1.55}

/* портрет: тёмная студия уходит за правый край экрана, низ мягко уходит в белое.
   Растворение левого и верхнего краёв запечено В САМ ФАЙЛ, а не сделано масками:
   две маски сразу требуют mask-composite, которого нет в старых Safari и в
   webview телеграма. Края кадра — чистый #FFFFFF, фон здесь тоже белый, поэтому
   шва не существует и альфа не нужна. */
body.home-clean .nx-hero__in{position:relative}
body.home-clean .nx-hero__media{grid-area:media;align-self:stretch;margin:0;
  display:flex;align-items:flex-end;justify-content:center;
  /* высота — та же формула, что у min-height обёртки первого экрана: так низ
     портрета приходит к кромке экрана, а не свисает на 190px в полосу цифр */
  position:absolute;right:calc(50% - 50vw);top:0;height:calc(100vh - 390px);width:min(60vw,980px);overflow:hidden}
body.home-clean .nx-hero__media::before{content:"";position:absolute;left:0;top:0;bottom:0;width:190px;
  background:linear-gradient(90deg,transparent,rgba(46,34,71,.07));pointer-events:none;z-index:1}
body.home-clean .nx-hero__fig{display:block;width:100%;height:100%;max-height:none;max-width:none;
  object-fit:cover;object-position:50% 12%;
  -webkit-mask-image:linear-gradient(#000 88%,transparent 99.5%);mask-image:linear-gradient(#000 88%,transparent 99.5%)}

/* Портрет снят 17.09 до выбора снимка, но с 27.09 (правки Зины) сетка снова
   в две колонки: правая пустая — место под фото Эли. Вернуть фото = поставить
   .nx-hero__media с фигурой в page.html, правила выше готовы. */

/* развилка аудиторий: строки-полки с круглой кнопкой — как в каталоге */
body.home-clean .nx-hero__fork{grid-area:fork;align-self:start;margin-top:clamp(22px,3vw,40px)}
/* колонка подписи 140, а не 120: у каждой строки своя сетка, и «Специалистам»
   (124 px) сдвигало свой текст правее соседней строки */
body.home-clean .nx-way{display:grid;grid-template-columns:minmax(140px,auto) 1fr 46px;align-items:center;
  gap:clamp(14px,1.6vw,24px);padding:18px 0;border-top:1px solid var(--nx-line2);
  text-decoration:none;color:var(--nx-ink);transition:padding-left .55s cubic-bezier(.25,.8,.3,1)}
body.home-clean .nx-way:last-child{border-bottom:1px solid var(--nx-line2)}
body.home-clean .nx-way:hover{padding-left:8px}
body.home-clean .nx-way__rub{font-family:'Open Sans',sans-serif;font-weight:700;font-size:var(--fs-mini);
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-terra)}
body.home-clean .nx-way--doc .nx-way__rub{color:var(--nx-violet)}
body.home-clean .nx-way__say{font-size:var(--fs-sm);line-height:1.45;color:var(--nx-ink)}
body.home-clean .nx-way__arr{width:46px;height:46px;border-radius:50%;border:1px solid var(--nx-lavender);
  display:grid;place-items:center;color:var(--nx-violet);font-size:17px;justify-self:end;
  transition:background .45s cubic-bezier(.25,.8,.3,1),color .45s cubic-bezier(.25,.8,.3,1),
    border-color .45s cubic-bezier(.25,.8,.3,1),transform .55s cubic-bezier(.25,.8,.3,1)}
body.home-clean .nx-way:hover .nx-way__arr{background:var(--nx-violet);border-color:var(--nx-violet);color:#fff;transform:translateX(3px)}
body.home-clean .nx-way:focus-visible{outline:2px solid var(--nx-violet);outline-offset:4px}

@media(max-width:1000px){
  body.home-clean .nx-hero__in{grid-template-columns:1fr;grid-template-areas:"head" "media" "fork";
    min-height:0;column-gap:0}
  body.home-clean .nx-hero__head{text-align:center;align-self:auto}
  body.home-clean .nx-hero__sub{margin-inline:auto;max-width:46ch}
  /* на телефоне портал в поток: абсолютный блок перекрыл бы заголовок */
  body.home-clean .nx-hero__media{position:static;inset:auto;width:auto;height:auto;overflow:visible}
  body.home-clean .nx-hero__media::before{display:none}
  body.home-clean .nx-hero__fig{width:auto;height:auto;max-width:100%;object-fit:contain;
    max-height:min(46vh,420px);margin-top:18px}
  body.home-clean .nx-hero__fork{margin-top:8px}
}
@media(max-width:600px){
  body.home-clean .nx-hero h1{font-size:clamp(1.75rem,8.3vw,2.8rem)}   /* 8.3vw: две строки заголовка влезают в колонку телефона (0,9 ширины) */
  body.home-clean .nx-hero__sub{font-size:var(--fs-md)}
  body.home-clean .nx-way{grid-template-columns:1fr 46px;grid-template-areas:"rub arr" "say say";gap:8px;padding:20px 0}
  body.home-clean .nx-way__rub{grid-area:rub}
  body.home-clean .nx-way__say{grid-area:say}
  body.home-clean .nx-way__arr{grid-area:arr}
  body.home-clean .nx-way:hover{padding-left:0}
}

/* 2. ПОЛОСА ДОВЕРИЯ: на фоне страницы, лавандовые хэйрлайны */
/* Фон снят 18.09 по просьбе Дани: белая плашка перебивала фоновый рисунок
   страницы и читалась лентой поперёк первого экрана. Держать её белой было
   зачем — полоса закрывала собой низ портрета (замер 16.09: налезание
   62-168px на 1366-1920), иначе «10 000+» ложились прямо на розовую кофту.
   Теперь фигура кончается выше: высота её рамки считается по той же формуле,
   что и высота первого экрана (см. .nx-hero__media ниже), и маска растворяет
   низ ДО полосы. Обрезать портрет по низу секции через overflow нельзя —
   маска остаётся за кромкой, и получается грубый срез поперёк кофты. */
body.home-clean .nx-proof{border-block:1px solid var(--nx-line);position:relative;z-index:2}
/* цифр может быть 3, 4 или 5 (правятся в CMS) — колонки по числу карточек,
   полоса всегда заполнена целиком, без дыры справа */
body.home-clean .nx-proof__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;
  padding-block:38px}   /* padding:38px 0 затирал inline-отступы .nx — цифры сходили с рельса */
body.home-clean .nx-proof__i{padding-inline:clamp(16px,2.4vw,34px);border-left:1px solid var(--nx-line2);text-align:center}
body.home-clean .nx-proof__i:first-child{border-left:0}
body.home-clean .nx-proof__n{font-family:'Arsenal',Georgia,serif;font-weight:700;line-height:1;
  font-size:var(--fs-num);color:var(--nx-violet)}
body.home-clean .nx-proof__l{margin-top:10px;font-size:var(--fs-note);color:var(--nx-muted)}
body.home-clean .nx-proof__i.nx-rv{transition-delay:var(--d,0s)}
body.home-clean .nx-proof__i:nth-child(2){--d:.12s}
body.home-clean .nx-proof__i:nth-child(3){--d:.24s}
body.home-clean .nx-proof__i:nth-child(4){--d:.36s}
body.home-clean .nx-proof__i:nth-child(5){--d:.48s}
body.home-clean .nx-proof__bar{display:block;height:2px;width:100%;margin:12px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--nx-lavender),var(--nx-violet))}
body.home-clean .nx-proof__i{transition:opacity 1.2s cubic-bezier(.16,1,.3,1),
  transform .45s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1)}
body.home-clean .nx-proof__i:hover{transform:translateY(-3px)}
@media(max-width:720px){
  body.home-clean .nx-proof__in{grid-template-columns:1fr 1fr;gap:24px 8px}
  /* нечётная последняя карточка занимает всю строку, но держит ширину колонки —
     иначе её линейка тянется вдвое длиннее соседних и ряд смотрится кривым */
  body.home-clean .nx-proof__i:nth-child(odd):last-child{grid-column:1 / -1;border-left:0;
    width:min(100%,calc(50% - 4px));margin-inline:auto}
}

/* 3. ФЛАГМАНЫ СЕЗОНА: плита-карусель. Фото во весь слайд под тёмной вуалью,
   белый текст поверх, края соседних плит выглядывают в зазоре.
   Числа сняты с primefold.ai живьём — из пропсов их компонента, не на глаз:
   плита 1280x650 = 1,969:1, радиус 24, зазор 24 фиксом, поле 80 при 1440,
   переезд ленты 0,5 с по cubic-bezier(.42,0,0,1), точки 8 px по центру снизу
   с отступом 24, стрелки 40 px в 45 px от края контейнера. Из движения
   оригинала снято всё, кроме переезда: ни входа в кадр, ни хода фотографии.
   Автоход — наш, не оригинала: раз в 6 с маятником, JS в шаблоне страницы.
   Косой градиент вуали 108deg. Сплошной слой у них .56 — у нас .34: их фото
   вечернее и тёмное само по себе, наша живопись светлая, и при .56 контраст
   белого выходил 11,5-16,3:1 при пороге 4,5, то есть картинка тонула зря.
   При .34 худший из трёх слайдов даёт 8,7:1 — запас вдвое, живопись видна. */
body.home-clean .nx-flag{padding:var(--sec) 0;
  /* поле от края ОКНА до плиты, не от рельса: в оригинале плита занимает
     89 % экрана, и соседние режутся краем окна, а не висят обрезком внутри
     поля. Считаем поле от --edge — видимой полоски соседа: полоска у́же
     скругления читается прямым срезом, а не краем карточки. При 1440 →
     56 + 24 = 80, как было снято с оригинала */
  --slide-gap:24px;
  /* поле от края ОКНА до плиты. Нижний предел не произвольный: полоска соседа
     равна peek − gap, и если она у́же скругления 24, край карточки читается
     прямым срезом. Отсюда пол = gap + 24. 29.09.2026 Даня попросил флагманы
     меньше на 20 % по высоте и ширине (1280×650 → 1024×520, пропорция та же),
     поэтому плита теперь 1024, а формула с вычитанием из 100vw растит поле с
     окном: на 1440 оно 208 px, на 1024 и уже — пол 48 */
  --peek:max(calc(var(--slide-gap) + 24px),calc((100vw - 1024px) / 2));
  --slide-pad:clamp(28px,3.6vw,48px);
  --arw:40px;
  /* стрелка стоит на стыке: её центр ровно на середине зазора между плитой и
     соседом. Раньше она сидела посреди поля, но с плитой 1024 поле 208 px, и в
     нём лежит сосед с текстом — стрелка садилась на чужие буквы, а промах мимо
     неё открывал соседний продукт. Считаем от поля, а не от ширины окна */
  --arw-inset:calc(var(--peek) - var(--slide-gap) / 2 - var(--arw) / 2)}
/* окно кадрирует ленту; тень живёт на самой плите — здесь её срезал бы
   overflow. Фона у окна нет намеренно: у центральной плиты соседи есть
   всегда, зазор между ними не пуст, и прозрачное окно просто продолжает
   страницу */
/* окно во всю ширину экрана: выходим из рельса .nx, иначе плита остаётся
   на 75 % ширины, а кусок соседа висит обрезком посреди пустого поля */
/* край окна скруглён тем же радиусом, что и плита: полоска соседа доходит
   до края экрана, и без скругления её угол обрывался прямым срезом —
   карточка рядом с центральной выглядела сломанной */
body.home-clean .nx-slider{position:relative;overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw);
  border-radius:calc(var(--nx-r) + 6px);
  /* clip-path, а не один border-radius: в Safari скругление окна не режет
     потомка, у которого свой transform, — а лента едет именно трансформом,
     и полоски соседей там обрывались прямым срезом. clip-path обрезает по
     той же форме и до трансформированных детей доходит */
  clip-path:inset(0 round calc(var(--nx-r) + 6px))}
/* зазор лежит ВНУТРИ окна: flex:0 0 100% у слайда считается от content-box
   трека, поэтому padding-inline сам делает плиту у́же. Базис не трогать —
   calc(100% - 2*var(--peek)) вычтет зазор второй раз и схлопнет плиту */
body.home-clean .nx-slider__track{display:flex;gap:var(--slide-gap);
  padding-inline:var(--peek);transition:transform .5s cubic-bezier(.42,0,0,1)}
@media(prefers-reduced-motion:reduce){body.home-clean .nx-slider__track{transition:none}}
body.home-clean .nx-slide{flex:0 0 100%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:var(--slide-pad);border-radius:calc(var(--nx-r) + 6px);
  aspect-ratio:1280/650;min-height:360px;
  box-shadow:var(--shadow);text-decoration:none}
/* фото и вуаль режем их собственным clip-path, а не скруглением плиты:
   на ходу лента едет трансформом, плиты уезжают в отдельные слои, и
   overflow:hidden родителя до содержимого слоя не достаёт — верхние углы
   карточки на каждом перелистывании становились прямыми */
body.home-clean .nx-slide__bg{position:absolute;inset:0;z-index:0;
  border-radius:inherit;clip-path:inset(0 round calc(var(--nx-r) + 6px))}
body.home-clean .nx-slide__bg picture{display:block;width:100%;height:100%}
body.home-clean .nx-slide__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* квадрат обложки (13.10.2026, page.html): на ПК картинка встаёт целиком
   правее текста — центр на 68 % ширины плиты, сторона 167 % её высоты: так
   скульптура (27–75 % высоты квадрата) видна вся, а левый край самой широкой
   («Эндометриоз», 29 % квадрата) встаёт правее текста. Полоса из picture —
   фон: её левый верхний угол (там только фон картинки, без скульптуры)
   растянут на всю плиту и размыт; точка растяжения внутри кадра, чтобы
   размытый край ушёл за плиту. Левый край квадрата растушёван в этот фон.
   Телефон — прежний кадр 4:5, квадрат скрыт */
body.home-clean .nx-slide__bg .nx-slide__art{display:none}
@media(min-width:821px){
  body.home-clean .nx-slide__bg picture:not(.nx-slide__art) img{transform-origin:3% 3%;transform:scale(4);filter:blur(12px)}
  body.home-clean .nx-slide__bg .nx-slide__art{display:block;position:absolute;top:50%;left:68%;
    width:auto;height:167%;aspect-ratio:1;transform:translate(-50%,-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
    mask-image:linear-gradient(90deg,transparent,#000 22%)}
}
/* вуаль: косой градиент ровно с оригинала поверх сплошной подложки */
body.home-clean .nx-slide--img::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;border-radius:inherit;
  clip-path:inset(0 round calc(var(--nx-r) + 6px));
  background:linear-gradient(108deg,
    rgba(0,0,0,.56) 0%,rgba(0,0,0,0) 98.86%),rgba(0,0,0,.34)}
/* слайд без картинки: фирменный градиент вместо фото, иначе плита станет
   чёрным прямоугольником — в CMS картинку можно и не приложить */
body.home-clean .nx-slide:not(.nx-slide--img){
  background:linear-gradient(158deg,#4A3473 0%,var(--nx-violet) 55%,#3D2C63 100%)}
body.home-clean .nx-slide__text{position:relative;z-index:2;display:flex;
  flex-direction:column;align-items:flex-start;max-width:min(620px,62%)}
/* лейбл переопределяется адресно: базовое правило .nx-tile__lbl (капс,
   разрядка) живёт своей жизнью в других блоках */
body.home-clean .nx-slide .nx-tile__lbl{font-family:'Open Sans',sans-serif;
  text-transform:none;font-weight:500;font-size:16px;line-height:24px;
  letter-spacing:-.01em;color:#fff}
body.home-clean .nx-slide h2{font-family:'Arsenal',Georgia,serif;font-weight:700;
  line-height:1.06;font-size:clamp(1.9rem,3vw,2.9rem);margin:14px 0 12px;
  color:#fff;max-width:15ch;text-shadow:var(--text-shade)}
/* подпись сплошным белым: rgba(255,255,255,.84) на этой вуали даёт 3,77:1 */
body.home-clean .nx-slide p{margin:0 0 26px;font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.5;color:#fff;max-width:40ch}
/* точки стоят по центру плиты снизу, как в оригинале: метка 8 px, отступ 24.
   Но САМА кнопка крупнее метки — 24 px, и шаг ряда тоже 24: цель в 8 px
   нарушает WCAG 2.5.8 (24×24 либо интервал, при котором цели не задевают
   друг друга), а ширина экрана ничего не говорит о том, мышь у человека или
   палец — планшет в альбоме и ноут с сенсором шире 820. На телефоне зона
   ещё крупнее, 44 px.
   transition именно background-color, а не background: так свойство читается
   однозначно, и проверка может утверждать его имя */
body.home-clean .nx-slider__dots{position:absolute;left:50%;transform:translateX(-50%);
  bottom:16px;display:flex;gap:0;z-index:3}
body.home-clean .nx-dot{flex:0 0 24px;width:24px;height:24px;border:0;
  padding:0;cursor:pointer;position:relative;background:transparent}
body.home-clean .nx-dot::before{content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);
  transform:translate(-50%,-50%);transition:background-color .2s ease}
body.home-clean .nx-dot.active::before{background:#fff}
/* точка 8 px без фокус-кольца теряется под клавиатурой: сброс стилей кнопки
   съедает обводку браузера, которой обходится оригинал */
body.home-clean .nx-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* глушить надо метку: сам переход живёт на ::before, а не на кнопке */
@media(prefers-reduced-motion:reduce){body.home-clean .nx-dot::before{transition:none}}
/* стрелки стоят в поле между краем экрана и плитой, по его центру: overflow
   окна их не режет, по высоте они центрируются от самой плиты. 40 px — размер
   эталона; зона меньше 44, но листать есть чем и помимо них: точки с зоной 24
   (на телефоне 44) и свайп */
body.home-clean .nx-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:var(--arw);height:var(--arw);border-radius:999px;display:grid;place-items:center;
  background:#fff;border:0;color:rgb(19,19,19);box-shadow:var(--shadow-sm);
  cursor:pointer;padding:0;
  /* переход кнопке задаёт glow.css правилом с бо́льшим весом — своё правило
     здесь молча проигрывало каскаду. Подставляем ему свои числа переменными:
     так остаётся в силе и его глушилка для reduced-motion.
     Свой transition при этом оставлен фолбэком: правило glow.css заскоуплено
     `body:not(.no-glow):not(.studio-mode)`, и без него в Студии и при
     выключенном свечении нажатие щёлкало бы совсем без хода */
  transition:transform .15s ease,box-shadow .15s ease;
  --btn-glow-dur:.15s;--ease-ui:ease}
body.home-clean .nx-arw--prev{left:var(--arw-inset)}
body.home-clean .nx-arw--next{right:var(--arw-inset)}
/* нажатие — единственное движение кнопки в оригинале. Масштаб внутри общего
   transform, а не свойством scale: в списке glow.css есть transform, а scale
   нет, и отдельное свойство щёлкнуло бы без перехода */
body.home-clean .nx-arw:active{transform:translateY(-50%) scale(.9)}
body.home-clean .nx-arw:focus-visible{outline:2px solid var(--nx-violet);outline-offset:3px}
@media(prefers-reduced-motion:reduce){body.home-clean .nx-arw{transition:none}}
@media(max-width:820px){
  /* на телефоне плита стоячая, текст прижат вниз, над рядом управления
     оставлен воздух */
  /* поле и полоска соседа считаются той же формулой, что на десктопе:
     полоска ровно 24 px, не тоньше скругления — иначе край карточки читается
     прямым срезом, а не карточкой */
  /* своего поля на телефоне больше нет: 16 px съедали полоску соседа, а она
     тут единственный намёк, что плиту можно листать пальцем */
  body.home-clean .nx-flag{--slide-pad:clamp(22px,5vw,28px)}
  /* на телефоне плита 4:5 — ниже на четверть, чем было (3:5), по просьбе 29.09;
     совпадает с телефонным кадром картинки fill-480x600 */
  body.home-clean .nx-slide{aspect-ratio:4/5;min-height:370px;
    justify-content:flex-end;padding:clamp(22px,5vw,28px);padding-bottom:78px}
  body.home-clean .nx-slide__text{max-width:100%}
  body.home-clean .nx-slide h2{font-size:clamp(1.8rem,7vw,2.4rem)}
  /* стрелки остаются по бокам, как в оригинале: внизу справа они наезжали
     на ряд точек — при пяти слайдах ряд доходит до стрелки, и она
     перехватывала клик по последней точке (поймано гейтом) */
  /* выше середины: текст на телефоне прижат вниз, и стрелка по центру
     высоты ложилась ровно на лейбл */
  /* зона нажатия стрелки на телефоне обязана остаться 44 px (это сторожит
     гейт зон нажатия), а поле всего 48 — по центру она бы залезла на плиту.
     Прижимаем к краю экрана: 4 + 44 = 48, ровно до кромки плиты */
  body.home-clean .nx-arw{--arw:44px;--arw-inset:4px;top:28%}
  /* на телефоне точка остаётся под палец: метка те же 8 px, но лежит внутри
     зоны 44 px. Ряд стоит ниже ровно настолько, чтобы метка держала отступ 24 */
  body.home-clean .nx-slider__dots{bottom:6px}
  body.home-clean .nx-dot{flex:0 0 44px;width:44px;height:44px}
}

/* 4. ВЫБОР МАТЕРИАЛОВ.
   Блок-письмо: слева материалы строками с обложкой, справа конверт, который
   повторяет то, что человек собрал, — почта в строке «Кому», отмеченное
   ложится вложениями. Форма стоит по центру под обеими колонками.
   Бежевая заливка убрана 12.09: главная белая (body.home-clean), и бежевым
   был залит ровно один блок на всей странице — он читался чужим пятном.
   Цвет теперь даёт лавандовая гамма сайта. */
body.home-clean .nx-gifts{position:relative;isolation:isolate;display:flex;flex-direction:column;
  gap:clamp(22px,3vw,34px);margin-top:clamp(56px,6vw,84px);
  padding:0;border:0;border-radius:0;overflow:visible;scroll-margin-top:190px;
  background:transparent!important}
/* С 13.10 (просьба Дани) блок — тёмная плита, как «Лектор» на странице
   продукта (.pp-plate в product.css): тот же ночной градиент и скругление.
   !important и правило с id — sheet.css возвращает панелям свой фон.
   На тёмном всё, что было фиолетовым и серым, светлеет; кнопка — белая
   пилюля, как «Об эксперте» у лектора; свечение и фокус — светлые, как у
   .pr-plate. Карточки материалов и поле почты остаются белыми. */
body.home-clean #lead.nx-gifts{background:linear-gradient(155deg,var(--night),var(--night-2))!important;
  border-radius:calc(var(--r-panel) + clamp(12px,1.2vw,16px));padding:clamp(20px,3.4vw,48px);color:#fff;
  --focus:2px solid #fff;
  --glow:var(--btn-glow-light);--glow-off:var(--btn-glow-light-off);
  --glow-base:var(--btn-glow-light-base);--glow-base-off:var(--btn-glow-light-base-off)}
/* sheet.css снимает фон у .nx-gift ради узора под белыми блоками; на
   тёмной плите прозрачная карточка — тёмный текст на тёмном */
body.home-clean #lead.nx-gifts .nx-gift{background:#fff!important}
body.home-clean #lead.nx-gifts .nx-head h2{color:#fff}
body.home-clean #lead.nx-gifts .nx-head__sub{color:var(--lavender-2)}
body.home-clean #lead.nx-gifts .nx-gifts__law{color:rgba(255,255,255,.82)}
body.home-clean #lead.nx-gifts .nx-gifts__law-more{color:#fff}
body.home-clean #lead.nx-gifts .nx-gifts__status{color:var(--terra-soft)}
body.home-clean #lead.nx-gifts .nx-gifts__btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
body.home-clean #lead.nx-gifts .nx-gifts__btn:disabled{background:transparent;color:rgba(255,255,255,.6);
  border-color:rgba(255,255,255,.22);opacity:1}
body.home-clean #lead.nx-gifts .nx-gifts__btn.is-ready,
body.home-clean #lead.nx-gifts .nx-gifts__btn.is-ready:hover{background:#fff;color:var(--nx-violet);border-color:#fff}
body.home-clean #lead.nx-gifts .nx-gifts__btn.is-ready:hover{color:var(--nx-ink)}
body.home-clean #lead.nx-gifts .nx-gifts__btn.is-ready .ab-arr{background:var(--violet);color:#fff}
body.home-clean #lead.nx-gifts .nx-gifts__btn.is-loading::after{color:var(--nx-violet)}
body.home-clean #lead.nx-gifts .nx-gifts__done h3{color:#fff}
body.home-clean #lead.nx-gifts .nx-gifts__done p{color:var(--lavender-2)}
body.home-clean .nx-gifts > *{position:relative;z-index:1}
body.home-clean .nx-gifts__tag{display:inline-flex;align-items:center;align-self:flex-start;
  min-height:28px;padding:0 12px;border:1px solid var(--hair);border-radius:999px;
  background:rgba(240,220,255,.35);color:var(--nx-violet);
  font:700 var(--fs-tag)/1 'Open Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}
body.home-clean .nx-gifts__sub{margin:0;font-size:var(--fs-sm);line-height:1.62;
  max-width:46ch;color:var(--nx-muted)}
body.home-clean .nx-gifts__form{min-width:0}

/* Выбор и форма — один понятный маршрут. До широкого экрана идут друг за
   другом; справа от карточек форма появляется только когда ей хватает места. */
body.home-clean .nx-gifts__layout{display:grid;gap:clamp(24px,3vw,40px);align-items:start}
@media(min-width:1000px){
  body.home-clean .nx-gifts__layout{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}
}
body.home-clean .nx-gifts__set{min-width:0;margin:0;padding:0;border:0;display:flex}
body.home-clean .nx-gifts__rows{display:flex;flex-direction:column;gap:12px;width:100%}

/* карточка материала: кадр 8:5 слева, подпись справа, отметка на кадре */
body.home-clean .nx-gift{position:relative;display:flex;align-items:stretch;min-width:0;
  background:#fff;border:1px solid var(--hair-soft);border-radius:18px;overflow:hidden;cursor:pointer;
  transition:transform .38s var(--dl-ease),box-shadow .38s var(--dl-ease),border-color .25s}
/* Реальный checkbox лежит ровно на нарисованном кружке: его можно нажать
   мышью, сфокусировать Tab-ом и проверить ассистивными средствами, а вид
   по-прежнему рисует соседняя отметка. */
body.home-clean .nx-gift input{position:absolute;z-index:1;top:10px;right:10px;
  width:30px;height:30px;margin:0;opacity:0;cursor:pointer}
body.home-clean .nx-gift__shot{position:relative;flex:none;width:clamp(118px,28%,178px);
  aspect-ratio:8/5;overflow:hidden;background:var(--nx-lav-soft)}
body.home-clean .nx-gift__shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85);transition:filter .3s}
/* Обложки у материала может не быть — поле новое, владелица заполняет его
   постепенно. Плашка не пустая: тема, набранная как корешок книги, держит ту
   же геометрию 8:5 и читается обложкой, а не дырой. */
body.home-clean .nx-gift__plate{position:absolute;inset:0;display:grid;place-items:center;
  padding:12px;text-align:center;
  background:linear-gradient(150deg,var(--nx-lav-soft),#F7F0FF)}
body.home-clean .nx-gift__plate span{display:grid;place-items:center;width:56%;aspect-ratio:1;
  border:1px solid rgba(86,61,135,.18);border-radius:50%;
  font:400 1.9rem/1 'Arsenal',Georgia,serif;color:var(--violet-quiet)}
body.home-clean .nx-gift__mark{position:absolute;right:10px;top:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--hair);
  display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .3s var(--dl-ease)}
body.home-clean .nx-gift__mark svg{fill:none;stroke:var(--nx-violet);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;
  transition:stroke-dashoffset .34s var(--dl-ease) .05s,stroke .2s}
body.home-clean .nx-gift__copy{display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-width:0;padding:14px 18px}
body.home-clean .nx-gift__topic{display:block;font-family:'Open Sans',sans-serif;font-weight:700;
  font-size:var(--fs-tag);letter-spacing:.15em;text-transform:uppercase;color:var(--violet-quiet)}
body.home-clean .nx-gift__title{display:block;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--fs-lg);line-height:1.24;color:var(--nx-ink)}
body.home-clean .nx-gift__meta{display:block;font-size:var(--fs-mini);color:var(--nx-muted)}
body.home-clean .nx-gift.is-picked{border-color:var(--nx-lavender);
  box-shadow:0 0 0 1px var(--nx-lavender),var(--lift)}
body.home-clean .nx-gift.is-picked .nx-gift__mark{background:var(--nx-violet);border-color:var(--nx-violet);transform:scale(1.05)}
body.home-clean .nx-gift.is-picked .nx-gift__mark svg{stroke:#fff;stroke-dashoffset:0}
body.home-clean .nx-gift.is-picked .nx-gift__shot img{filter:saturate(1)}
@media(hover:hover){
  body.home-clean .nx-gift:hover{transform:translateY(-2px);box-shadow:var(--lift)}
  body.home-clean .nx-gift:hover .nx-gift__shot img{filter:saturate(1)}
}
/* Обводка только для клавиатуры. На :focus-within она вылезала и от мышиного
   клика — по всей карточке, поверх кадра: выбор и так виден рамкой и отметкой,
   а лишний контур читался ошибкой. Соседний селектор, а не :has(): его не
   знают Safari до 15.4 и вебвью телеграма, а там фокус нужен тем более. */
body.home-clean .nx-gift input:focus-visible ~ .nx-gift__shot{
  outline:2px solid var(--nx-violet);outline-offset:-2px}

/* Правая колонка — форма, а не второй объект для расшифровки. Все действия
   начинаются на одной вертикали и читаются сверху вниз. */
body.home-clean .nx-gifts__delivery{max-width:440px;width:100%;margin:0;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left}
body.home-clean .nx-gifts__row{width:100%}
body.home-clean .nx-gifts__field{display:block;width:100%;min-width:0;height:52px;padding:0 22px;
  border-radius:999px;border:1px solid rgba(86,61,135,.22);background:#fff;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  font-family:'Open Sans',sans-serif;font-size:var(--fs-sm);color:var(--nx-ink)}
body.home-clean .nx-gifts__field::placeholder{color:var(--nx-muted)}
body.home-clean .nx-gifts__field:focus{outline:none;border-color:var(--nx-violet);
  box-shadow:var(--field-ring)}
body.home-clean .nx-gifts__btn{position:relative;isolation:isolate;height:52px;min-width:214px;
  align-self:flex-start;justify-content:center;gap:.6em;background:#fff;color:var(--nx-violet);
  border:1.5px solid var(--nx-lavender);cursor:default;
  transition-property:transform,box-shadow,background-color,border-color,color;
  transition-duration:.55s;transition-timing-function:cubic-bezier(.4,.05,.2,1)}
body.home-clean .nx-gifts__btn:disabled{color:rgba(122,111,136,.62);
  border-color:var(--hair-soft);background:rgba(255,255,255,.46);opacity:.72}
body.home-clean .nx-gifts__btn.is-ready{background:var(--nx-violet);color:#fff;
  border-color:var(--nx-violet);cursor:pointer}
/* Тень и разрядку тут не трогаем: свет даёт glow.css, собственный box-shadow
   ломал его законом длин, а letter-spacing разгонял кнопку и толкал соседей. */
body.home-clean .nx-gifts__btn.is-ready:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;
  transform:translateY(-1px)}
body.home-clean .nx-gifts__btn-label{white-space:nowrap;transition:opacity .2s}
/* кружок-стрелка (glow.css): пока материалы не выбраны — бледный и на месте */
body.home-clean .nx-gifts__btn .ab-arr{opacity:.5;
  transition:opacity .5s cubic-bezier(.25,.8,.3,1),transform .5s cubic-bezier(.25,.8,.3,1)}
body.home-clean .nx-gifts__btn:not(.is-ready):hover .ab-arr{transform:none}
body.home-clean .nx-gifts__btn.is-ready .ab-arr{opacity:1;background:#fff;color:var(--nx-violet)}
body.home-clean .nx-gifts__btn.is-loading{cursor:default}
body.home-clean .nx-gifts__btn.is-loading :is(.nx-gifts__btn-label,i){opacity:0}
body.home-clean .nx-gifts__btn.is-loading::after{content:attr(data-loading);position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;color:#fff;font:600 13px/1 'Open Sans',sans-serif}
body.home-clean .nx-gifts__consent{display:flex;flex-direction:column;gap:4px;width:100%;max-width:80ch}
body.home-clean .nx-gifts__law{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:4px 0 0;
  font-size:var(--fs-mini);line-height:1.45;color:var(--nx-muted);max-width:80ch;cursor:pointer;text-align:left}
/* Текст согласия длинный по закону, но на странице он не должен быть стеной:
   держим две строки, остальное — по кнопке. В разметке текст целиком. */
body.home-clean .nx-gifts__law-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
body.home-clean .nx-gifts__consent.is-open .nx-gifts__law-text{display:block;overflow:visible}
body.home-clean .nx-gifts__law-more{align-self:flex-start;margin-left:30px;padding:4px 0;
  background:none;border:0;cursor:pointer;font:600 var(--fs-micro)/1.4 'Open Sans',sans-serif;
  color:var(--nx-violet);text-decoration:underline;text-underline-offset:3px}
body.home-clean .nx-gifts__law input{flex:none;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--nx-violet);cursor:pointer}
body.home-clean .nx-gifts__law a{color:inherit;text-decoration:underline}
body.home-clean .nx-gifts__status{min-height:1.45em;margin:0;font-size:var(--fs-mini);line-height:1.45;color:var(--terra-ink)}
/* ловушка для ботов — из потока и с глаз долой */
.nx-gifts__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* «спасибо» занимает место полки, а не схлопывает всю секцию. */
body.home-clean .nx-gifts__done{display:flex;align-items:flex-start;gap:18px;min-height:338px;padding-top:24px}
body.home-clean .nx-gifts__ok{flex:none;width:52px;height:52px;border-radius:50%;background:var(--nx-lav-soft);
  color:var(--nx-violet);display:grid;place-items:center;font-size:23px}
body.home-clean .nx-gifts__done h3{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-h3);margin:0;color:var(--nx-ink)}
body.home-clean .nx-gifts__done p{margin:6px 0 0;font-size:var(--fs-note);color:var(--nx-muted)}
@media(max-width:900px){
  body.home-clean .nx-gifts{gap:24px;margin-top:48px;padding:0;scroll-margin-top:150px}
  body.home-clean .nx-gifts__sub{max-width:52ch}
  body.home-clean .nx-gift__title{font-size:var(--fs-lg)}
  body.home-clean .nx-gifts__done{min-height:210px;padding-top:0}
}
@media(max-width:999px){
  body.home-clean .nx-gifts__delivery{max-width:none}
  body.home-clean .nx-gifts__btn{width:100%;min-width:0}
}
@media(max-width:520px){
  body.home-clean .nx-gifts{padding:0;scroll-margin-top:230px}
  body.home-clean .nx-gift{min-height:88px}
  body.home-clean .nx-gift__shot{width:clamp(104px,34%,132px)}
  body.home-clean .nx-gift__topic{font-size:var(--fs-micro)}
}
@media(max-width:600px){
  /* Разнесено по браузерам: невалидный селектор в СПИСКЕ отменяет всё
     правило, поэтому пара с `:has()` тянула за собой и ту половину, которую
     понимают все. В Safari до 15.4 и вебвью Telegram чат и «наверх» так и
     оставались поверх формы подарков. Первые два правила работают везде,
     последние два — там, где `:has()` есть. */
  body.lead-magnet-in-view #sup-chat:not(.sup-open){opacity:0!important;visibility:hidden!important;pointer-events:none}
  body.lead-magnet-in-view .to-top{opacity:0!important;visibility:hidden!important;pointer-events:none}
  body:has(.nx-gifts:focus-within) #sup-chat:not(.sup-open){opacity:0!important;visibility:hidden!important;pointer-events:none}
  body:has(.nx-gifts:focus-within) .to-top{opacity:0!important;visibility:hidden!important;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  body.home-clean .nx-gifts,body.home-clean .nx-gifts::after,
  body.home-clean .nx-gifts__delivery{transition:none!important;animation:none!important}
  body.home-clean .nx-gift :is(.nx-gift__copy,.nx-gift__topic,.nx-gift__title,.nx-gift__mark),
  body.home-clean .nx-gift__mark::after,body.home-clean .nx-gift::after,
  body.home-clean .nx-gift,body.home-clean .nx-gift__shot img,
  body.home-clean .nx-gifts__btn,body.home-clean .nx-gifts__btn::before,
  body.home-clean .nx-gifts__btn .ab-arr{transition:none!important}
}

/* 5. КАТАЛОГ: полки-витрины с веером реальных обложек.
   Белое поле спокойно продолжает фирменный узор. Опора здесь - сами обложки,
   типографика и воздух, без декоративных полос вокруг и между полками. */
body.home-clean #catalog{position:relative;isolation:isolate;padding:var(--nx-sec) 0}
body.home-clean #catalog>.nx{position:relative;z-index:1}
body.home-clean #catalog .nx-cat__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;margin-bottom:clamp(30px,4vw,48px)}
body.home-clean .nx-cat .nx-head{margin:0}
body.home-clean #catalog .nx-head h2{position:relative;padding-bottom:18px}
body.home-clean #catalog .nx-head h2::after{content:"";position:absolute;left:0;bottom:0;
  width:clamp(58px,6vw,82px);height:3px;border-radius:999px;background:var(--nx-terra)}
body.home-clean #catalog .nx-head__sub{max-width:58ch;color:var(--text-secondary)}
/* тумблер аудиторий: белая капсула, актив — фиолетовая пилюля
   (refine.css красит табы с !important — глушим тем же оружием) */
body.home-clean #catalog .aud-toggle{display:inline-flex;gap:4px;margin:0;padding:5px;border-radius:999px;
  background:var(--lav-card-2);border:1px solid var(--edge-mid);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--shadow-sm)}
body.home-clean #catalog .aud-toggle button{position:relative;min-height:46px;border:0;border-radius:999px;
  background:transparent!important;padding:11px 24px;cursor:pointer;
  font:600 13.5px/1 'Open Sans',sans-serif;letter-spacing:.02em;text-transform:none;
  color:var(--text-secondary)!important;transition:color .25s cubic-bezier(.16,1,.3,1),
  background .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}
body.home-clean #catalog .aud-toggle button::after{display:none}
body.home-clean #catalog .aud-toggle button:hover{color:var(--nx-violet)!important}
body.home-clean #catalog .aud-toggle button:focus-visible{outline:2px solid var(--nx-lavender);outline-offset:2px}
body.home-clean #catalog .aud-toggle button.active{background:var(--nx-violet)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-sm)!important}
/* полки */
body.home-clean #catalog .nx-shelves{position:relative;display:flex;flex-direction:column;
  overflow:visible}
body.home-clean #catalog .shelf{position:relative;display:flex;align-items:center;
  gap:clamp(20px,3.2vw,44px);padding:clamp(16px,2.2vw,24px) clamp(16px,2.2vw,28px);
  border-radius:var(--nx-r);text-decoration:none;
  transition:background .35s,box-shadow .35s,opacity 1.25s cubic-bezier(.16,1,.3,1),
             transform 1.25s cubic-bezier(.16,1,.3,1),filter 1.25s cubic-bezier(.16,1,.3,1)}
body.home-clean .nx-shelves .shelf:nth-child(2){transition-delay:.13s}
body.home-clean .nx-shelves .shelf:nth-child(3){transition-delay:.26s}
body.home-clean .nx-shelves .shelf:nth-child(4){transition-delay:.39s}
body.home-clean .nx-shelves .shelf:nth-child(n+5){transition-delay:.52s}
/* Между полками только структурный волосок: он начинается после веера
   и заканчивается перед стрелкой, чтобы не превращать каталог в таблицу. */
body.home-clean #catalog .shelf:not(:last-child)::before{content:"";position:absolute;
  left:calc(clamp(16px,2.2vw,28px) + 158px + clamp(20px,3.2vw,44px));
  right:calc(clamp(16px,2.2vw,28px) + 54px + clamp(20px,3.2vw,44px));
  bottom:0;height:1px;background:var(--edge-card);pointer-events:none}
body.home-clean #catalog .shelf:hover,body.home-clean #catalog .shelf:focus-visible{
  background-color:#fff;background-image:none;
  box-shadow:inset 0 -1px 0 rgba(86,61,135,.14),var(--shadow)}
/* веер обложек: три реальных продукта, на ховере расправляется */
body.home-clean .shelf__covers{position:relative;flex:0 0 auto;width:158px;height:122px}
body.home-clean .shelf__cover{position:absolute;top:6px;width:82px;height:110px;object-fit:cover;
  border-radius:10px;border:3px solid #fff;box-shadow:var(--shadow-sm);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
body.home-clean .shelf__cover:nth-child(1){left:0;transform:rotate(-7deg)}
body.home-clean .shelf__cover:nth-child(2){left:38px;transform:rotate(1deg) translateY(-5px);z-index:2}
body.home-clean .shelf__cover:nth-child(3){left:76px;transform:rotate(8deg);z-index:3}
body.home-clean .shelf:hover .shelf__cover:nth-child(1){transform:rotate(-11deg) translate(-7px,-3px)}
body.home-clean .shelf:hover .shelf__cover:nth-child(2){transform:rotate(0deg) translateY(-11px)}
body.home-clean .shelf:hover .shelf__cover:nth-child(3){transform:rotate(12deg) translate(7px,-3px)}
body.home-clean #catalog .shelf__info{display:flex;flex:1 1 auto;flex-direction:column;gap:9px;min-width:0}
/* Обёртка нужна только тематическим полкам на телефоне. На широком экране
   она не создаёт коробку, поэтому заголовок, счётчик и описание остаются
   в прежнем потоке и с прежней геометрией. */
body.home-clean #catalog .shelf__heading{display:contents}
body.home-clean .shelf__t{font-family:'Arsenal',Georgia,serif;font-weight:700;line-height:1.08;
  font-size:clamp(1.5rem,2.9vw,2.35rem);color:var(--nx-ink);transition:color .25s}
body.home-clean .shelf:hover .shelf__t{color:var(--nx-violet)}
body.home-clean #catalog .shelf__meta{font:600 12.5px/1.4 'Open Sans',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
body.home-clean #catalog .shelf--topic .shelf__desc{font:400 15px/1.55 'Open Sans',sans-serif;
  color:var(--nx-muted);max-width:54ch}
body.home-clean #catalog .shelf__arr{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;
  width:54px;height:54px;border-radius:50%;border:1px solid var(--edge-strong);
  color:var(--nx-violet);font-size:20px;
  transition:background .3s,color .3s,transform .5s cubic-bezier(.16,1,.3,1)}
body.home-clean .shelf:hover .shelf__arr{background:transparent;color:var(--nx-violet);transform:translateX(5px)}
body.home-clean .nx-cat__all{margin-top:clamp(24px,4vw,38px);text-align:center}
@media(max-width:760px){
  body.home-clean #catalog .nx-cat__head{flex-direction:column;align-items:flex-start;gap:22px}
  body.home-clean #catalog .aud-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;padding:4px}
  body.home-clean #catalog .aud-toggle button{width:100%;min-width:0;min-height:46px;padding:10px 8px}
  body.home-clean #catalog .nx-shelves{padding:0;border-radius:0;box-shadow:none}
  body.home-clean #catalog .shelf{gap:14px;padding:16px 10px 18px 8px;border-radius:14px}
  body.home-clean #catalog .shelf:not(:last-child)::before{left:126px;right:64px}
  body.home-clean .shelf__covers{width:104px;height:92px}
  body.home-clean .shelf__cover{width:56px;height:76px;border-width:2px;border-radius:7px}
  body.home-clean .shelf__cover:nth-child(2){left:24px}
  body.home-clean .shelf__cover:nth-child(3){left:48px}
  body.home-clean .shelf__arr{width:40px;height:40px;font-size:16px}
}
@media(max-width:600px){
  /* В тематической полке описание — самостоятельная строка: от веера
     обложек до стрелки. Остальные полки не имеют .shelf--topic и сохраняют
     прежнюю раскладку. */
  body.home-clean #catalog .shelf--topic{display:grid;
    grid-template-columns:104px minmax(0,1fr) 40px;
    grid-template-areas:"covers heading arrow" "desc desc desc";
    column-gap:14px;row-gap:12px}
  body.home-clean #catalog .shelf--topic .shelf__covers{grid-area:covers}
  body.home-clean #catalog .shelf--topic .shelf__info{display:contents}
  body.home-clean #catalog .shelf--topic .shelf__heading{grid-area:heading;
    display:flex;flex-direction:column;gap:9px;min-width:0}
  body.home-clean #catalog .shelf--topic .shelf__desc{grid-area:desc;max-width:none}
  body.home-clean #catalog .shelf--topic .shelf__arr{grid-area:arrow;margin-left:0;justify-self:end}
}
@media (prefers-reduced-motion: reduce){
  body.home-clean #catalog .shelf,body.home-clean #catalog .shelf__cover,
  body.home-clean #catalog .shelf__arr,body.home-clean #catalog .aud-toggle button{transition:none!important}
}

/* 6. ОБ ЭКСПЕРТЕ: тёплое бежевое поле, паспарту-фото, editorial-регалии */
body.home-clean .nx-exp{padding:var(--nx-sec) 0;
  border-top:1px solid var(--nx-line2)}
body.home-clean .nx-exp__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(36px,6vw,88px);align-items:start}
/* фото: сдвинутая лавандовая подложка-паспарту + тонкий кант */
/* фото тянется на высоту текстовой колонки: align-self растягивает фигуру
   по ряду сетки, а снимок внутри лежит абсолютом. Абсолют тут обязателен —
   у картинки свои width/height в разметке, и в потоке она задавала бы
   высоту ряда сама (1306px при колонке в 622: фото уезжало на два экрана
   ниже текста). Выпав из потока, она высоту ряда больше не считает. */
body.home-clean .nx-exp__media{position:relative;margin:26px 0 0;align-self:stretch}
body.home-clean .nx-exp__media::before{content:"";position:absolute;inset:-18px 18px 18px -18px;
  border-radius:calc(var(--nx-r) + 8px);background:var(--nx-lav-soft);z-index:0}
body.home-clean .nx-exp__media img{position:absolute;inset:0;z-index:1;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center top;
  border-radius:calc(var(--nx-r) + 4px);border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow)}
body.home-clean .nx-exp__name{font-family:'Arsenal',Georgia,serif;font-weight:700;line-height:1.02;
  font-size:clamp(2.5rem,4.6vw,3.9rem);color:var(--nx-violet);margin:16px 0 12px}
body.home-clean .nx-exp__role{font:600 12.5px/1.5 'Open Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-muted);margin:0 0 26px}
body.home-clean .nx-exp__quote{font-family:'Arsenal',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.4;color:var(--nx-ink);
  margin:0 0 34px;max-width:34ch}
body.home-clean .nx-exp__facts{list-style:none;margin:0 0 36px;padding:0}
body.home-clean .nx-exp__facts li:nth-child(2){transition-delay:.15s}
body.home-clean .nx-exp__facts li:nth-child(3){transition-delay:.3s}
body.home-clean .nx-exp__facts li{padding:15px 0;border-top:1px solid var(--nx-line2);
  font-size:var(--fs-sm);line-height:1.5;color:var(--muted-strong);max-width:52ch}
body.home-clean .nx-exp__facts li:last-child{border-bottom:1px solid var(--nx-line2)}
body.home-clean .nx-exp__more{margin:0 0 36px}
/* личный приём: editorial-строка с сериф-CTA */
body.home-clean .nx-exp__priem{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px 28px}
body.home-clean .nx-exp__priem-t{display:flex;flex-direction:column;gap:6px}
body.home-clean .nx-exp__priem-lbl{font:700 12px/1 'Open Sans',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nx-terra)}
body.home-clean .nx-exp__priem-sub{font-size:var(--fs-note);color:var(--nx-muted)}
body.home-clean .nx-exp__cta{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
body.home-clean .nx-exp__cta-lbl{font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--nx-ink);
  background:linear-gradient(var(--nx-violet),var(--nx-violet)) left bottom/0% 2px no-repeat;
  transition:background-size .4s cubic-bezier(.16,1,.3,1),color .25s}
body.home-clean .nx-exp__cta:hover .nx-exp__cta-lbl{color:var(--nx-violet);background-size:100% 2px}
body.home-clean .nx-exp__cta-arr{display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--nx-lavender);color:var(--nx-violet);font-size:18px;
  transition:background .3s,color .3s,transform .5s cubic-bezier(.16,1,.3,1)}
body.home-clean .nx-exp__cta:hover .nx-exp__cta-arr{background:var(--nx-violet);color:#fff;transform:translateX(5px)}
@media(max-width:860px){
  body.home-clean .nx-exp__grid{grid-template-columns:1fr}
  /* одна колонка: тянуться не за чем, фигура снова живёт по кадру снимка,
     поэтому картинка возвращается в поток со своей пропорцией */
  /* width:100% обязателен: auto-поля отключают растяжение ячейки, и ширина
     фигуры считается по содержимому — у картинки она width:100%, то есть
     ноль, пока файл не подгрузился (lazy). Без этого место под фото не
     резервируется и текст прыгает в момент загрузки. */
  body.home-clean .nx-exp__media{margin:0 auto;max-width:420px;width:100%;align-self:auto}
  body.home-clean .nx-exp__media img{position:relative;inset:auto;
    height:auto;aspect-ratio:4/5}
  body.home-clean .nx-exp__media::before{inset:-12px 12px 12px -12px}
}
@media (prefers-reduced-motion: reduce){
  body.home-clean .nx-exp__cta-lbl,body.home-clean .nx-exp__cta-arr{transition:none}
}

/* 13.09: волосяные линии между секциями сняты — они читались не границей
   секции, а ниткой, сшивающей карточки предыдущего блока снизу. Секции и так
   разделены воздухом.
   Белой заливки у ленты видео нет намеренно: ею гасили «фон чуть темнее», но
   тем фоном была обрезанная тень карточек (см. refine.css), а не полотно —
   заливка лишь превращала секцию в белую заплату посреди узора. */

/* 8. REELS: скин под прем-систему (механика аккордеона в refine.css не тронута) —
   play = белый круг с фиолетом (язык стрелок-кругов сайта), подписи в тон меты */
body.home-clean .story .play-sm{background:var(--glass);color:var(--nx-violet);
  backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow-sm);font-size:15px;padding-left:3px}
/* подпись живёт внутри кадра (см. refine.css): белым по затемнению, а не
   тёмным под кадром — перекраски на ховер больше нет, на градиенте она не
   читалась */
body.home-clean .story__cap{font-size:var(--fs-note);color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(26,18,42,.45)}
body.home-clean .stories__cta{display:flex;width:max-content;margin:38px auto 0}

/* 9. ДОКТОР ЭЛЯ В СМИ — газетный указатель.
   Прежняя лента карточек читалась пустой не от воздуха: логотип 152x66
   занимал четверть белой плашки, а вокруг было белое на белом. Массу даёт
   типографика — 20 заголовков с подводками в три колонки по хэйрлайнам,
   сгруппированные по изданию. Логотипы уходят в колофон внизу. */
body.home-clean .press-idx{padding:var(--nx-sec-sm) 0 var(--nx-sec)}
body.home-clean .nx-head--row,body.prod-clean .nx-head--row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
/* счётчик — журнальная табличка показателей: две ячейки через хэйрлайн, цифра
   над подписью. Прежний вариант ровнялся по правому краю, из-за чего 20 и 17
   стояли на разных осях, а предлог «в» висел отдельным словом слева от числа.
   Здесь числа флаговые в своих ячейках: связка «цифра + подпись» явная,
   и раскладка не зависит от длины слов из CMS */
body.home-clean .press-idx__count{flex:0 0 auto;margin:0 0 4px;display:flex;
  align-items:stretch}
body.home-clean .press-idx__stat{display:flex;flex-direction:column;
  align-items:flex-start;padding:0 clamp(18px,2vw,26px)}
body.home-clean .press-idx__stat:first-child{padding-left:0}
body.home-clean .press-idx__stat:last-child{padding-right:0}
body.home-clean .press-idx__stat+.press-idx__stat{border-left:1px solid var(--nx-line)}
/* tnum: у Arsenal цифры пропорциональные, и «17» рядом с «20» уезжало с оси */
body.home-clean .press-idx__count b{font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:clamp(1.7rem,2vw,2rem);line-height:1;color:var(--nx-violet);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1}
body.home-clean .press-idx__label{margin-top:9px;font:600 10.5px/1 'Open Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-muted);white-space:nowrap}

body.home-clean .pflow{margin-top:clamp(30px,3.4vw,44px);
  columns:3 250px;column-gap:clamp(26px,3.2vw,46px);
  column-rule:1px solid var(--nx-line2)}
body.home-clean .press-idx__more{margin-top:clamp(24px,3vw,36px)}
body.home-clean .pflow__g{break-inside:avoid;margin-bottom:34px}
body.home-clean .pflow__pub{display:block;font:700 11px/1 'Open Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-terra);
  padding-bottom:9px;border-bottom:1px solid var(--nx-line)}
/* границы строк должны читаться и БЕЗ наведения: на line2 (лаванда 20%)
   заголовок с подводкой сливались со следующей заметкой, и было не понять,
   на какую строку наводишься. Разделитель — line (38%), внутреннего воздуха
   больше. Линия есть и у последней заметки в группе: в большинстве изданий
   заметка одна, и без нижней границы зона наведения ничем не очерчена —
   сверху заметку держит хэйрлайн капса издания, снизу своя линия */
body.home-clean .pflow__a{display:block;position:relative;padding:15px 26px 16px 0;
  /* без border-radius: он загибает концы хэйрлайна-разделителя вверх.
     Скругление живёт на псевдоэлементах подсветки */
  text-decoration:none;border-bottom:1px solid var(--nx-line)}
/* строка указателя на наведении: тихая лавандовая подложка (тот же #FBF7FE,
   что у ленты статей — приём в сайте уже есть) плюс риска слева, как метка
   на полях в журнале. Подложка живёт в ::before и вылезает за границы строки
   отрицательным inset: padding не меняется, поэтому текст не прыгает.
   z-index: -1 не годится — ссылка не создаёт своего слоя, и подложка ушла бы
   под фон секции */
body.home-clean .pflow__a::before{content:"";position:absolute;
  inset:2px -12px 3px -12px;border-radius:10px;background:var(--lav-card-2);
  opacity:0;transition:opacity .38s cubic-bezier(.16,1,.3,1)}
body.home-clean .pflow__a::after{content:"";position:absolute;left:-12px;top:9px;bottom:10px;
  width:3px;border-radius:3px;background:var(--nx-violet);
  opacity:0;transform:scaleY(.35);transform-origin:center;
  transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
body.home-clean .pflow__a:hover::before,
body.home-clean .pflow__a:focus-visible::before{opacity:1}
/* под наведённой строкой разделитель гасим: подложка сама очерчивает зону,
   иначе линия режет её пополам по низу */
body.home-clean .pflow__a:hover,
body.home-clean .pflow__a:focus-visible{border-bottom-color:transparent}
body.home-clean .pflow__a:hover::after,
body.home-clean .pflow__a:focus-visible::after{opacity:1;transform:scaleY(1)}
/* текст и стрелка — над подложкой */
body.home-clean .pflow__t,body.home-clean .pflow__p,
body.home-clean .pflow__ext{position:relative;z-index:1}
body.home-clean .pflow__t{display:block;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--fs-lg);line-height:1.24;color:var(--nx-ink);transition:color .45s cubic-bezier(.16,1,.3,1)}
body.home-clean .pflow__p{display:block;margin-top:5px;font-size:var(--fs-fine);line-height:1.5;
  color:var(--nx-muted)}
body.home-clean .pflow__ext{position:absolute;right:2px;top:15px;font-style:normal;
  font-size:13px;color:var(--nx-lavender);
  transition:color .45s,transform .45s cubic-bezier(.16,1,.3,1)}
body.home-clean .pflow__a:hover .pflow__t,
body.home-clean .pflow__a:focus-visible .pflow__t{color:var(--nx-violet)}
body.home-clean .pflow__a:hover .pflow__ext,
body.home-clean .pflow__a:focus-visible .pflow__ext{color:var(--nx-violet);transform:translate(2px,-2px)}
body.home-clean .pflow__a:focus-visible{outline:2px solid var(--nx-violet);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  body.home-clean .pflow__a::before,body.home-clean .pflow__a::after{transition:none}
}

/* колофон: издания как знаки доверия. Монохром + multiply гасит собственные
   подложки логотипов, иначе на белом торчат серые прямоугольники */
body.home-clean .colophon{margin-top:clamp(34px,4vw,52px);padding-top:26px;
  border-top:1px solid var(--nx-line)}
body.home-clean .colophon__cap{display:block;font:600 12px/1 'Open Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-muted);margin-bottom:20px}
/* строка изданий работает как док: логотип под курсором вырастает, соседи
   подрастают слабее по мере удаления — масштаб считает JS по расстоянию.
   Логотипы цветные; multiply убирает их собственные белые подложки, не
   трогая цвет (умножение на белый фон = исходный пиксель) */
body.home-clean .colophon__row{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(18px,2.4vw,34px);padding:14px 0 18px;
  /* multiply без изоляции блендится с фоном всей страницы — на каждый кадр
     дока это лишняя работа композитора, особенно в Safari */
  isolation:isolate}
/* ЛЕНТА ИЗДАНИЙ. Без JS .colophon__row остаётся обычной строкой с переносом;
   класс ставит main.js только на главной и только если движение не отключено.
   У каждого знака свой правый отступ вместо gap: ширина полного набора тогда
   включает и зазор на стыке, так что -50% попадает ровно в начало его копии. */
body.home-clean .press-idx .colophon__rail{position:relative;width:100%}
body.home-clean .press-idx .colophon__rail.is-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
body.home-clean .press-idx .colophon__rail.is-rail .colophon__row{flex-wrap:nowrap;
  justify-content:flex-start;gap:0;width:max-content;
  animation:press-colophon-rail var(--press-cycle,34s) linear infinite;will-change:transform}
body.home-clean .press-idx .colophon__rail.is-rail .colophon__i{padding-right:clamp(18px,2.4vw,34px);
  transition:transform .4s var(--ease)}
body.home-clean .press-idx .colophon__rail.is-rail .colophon__i:hover,
body.home-clean .press-idx .colophon__rail.is-rail .colophon__i:focus-visible{transform:translateY(-3px)}
@keyframes press-colophon-rail{to{transform:translateX(-50%)}}
/* Наведение и клавиатурный фокус дают рассмотреть знак, не ловя его на ходу. */
body.home-clean .press-idx .colophon__rail.is-rail:hover .colophon__row,
body.home-clean .press-idx .colophon__rail.is-rail:focus-within .colophon__row{animation-play-state:paused}
/* transform НЕ анимируем через CSS: движок пишет его каждый кадр сам, а
   transition поверх покадровой записи стартует заново на каждом кадре — из-за
   этого волна шла рывками и «резинила». Плавность целиком на стороне JS */
body.home-clean .colophon__i{display:block;flex:0 0 auto;text-decoration:none;
  transform-origin:center center}
/* слои поднимаем только на время работы дока: 17 вечных слоёв держать незачем */
body.home-clean .colophon__row.dock-on .colophon__i{will-change:transform}
/* россыпь: знаки стоят полем, а не строчками — по такому облаку интереснее
   вести курсором. Раскладку считает скрипт (любое число изданий, любая
   ширина), поэтому режим включается только вместе с ним: без JS и на
   телефоне остаётся обычная строка с переносом */
body.home-clean .colophon__row.dock-field{display:block;position:relative;
  height:var(--field-h,260px);padding:6px 0 10px}
body.home-clean .colophon__row.dock-field .colophon__i{position:absolute;left:0;top:0}
body.home-clean .colophon__i img{height:28px;width:auto;display:block;
  mix-blend-mode:multiply}
body.home-clean .colophon__i:focus-visible{outline:2px solid var(--nx-violet);outline-offset:6px}
/* прозрачность знаков (дальние отступают в тень, ближние выходят на свет)
   пишет тот же кадровый цикл, что и transform. Раньше её тянули класс, ховер
   и dock-on тремя переходами разом: они перебивали друг друга, и за одну
   проводку курсора переход перезапускался под полсотни раз — знаки мерцали */
body.home-clean .colophon__i{opacity:.9}
body.home-clean .colophon__i--txt{font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--fs-md);color:var(--nx-muted);align-self:center}
@media(max-width:860px){
  body.home-clean .press-idx{padding-bottom:var(--nx-sec-sm)}
  /* перенеслось под заголовок — верхний отступ вместо нижнего */
  body.home-clean .press-idx__count{margin:4px 0 0}
  body.home-clean .pflow{columns:1;column-rule:0}
  body.home-clean .colophon__i img{height:22px!important}
}
@media (prefers-reduced-motion: reduce){
  body.home-clean .pflow__t,body.home-clean .pflow__ext,
  body.home-clean .colophon__i,body.home-clean .colophon__i img{transition:none}
  body.home-clean .colophon__row.dock-on .colophon__i{opacity:.9}
  body.home-clean .press-idx .colophon__rail.is-rail .colophon__row{animation:none}
}

/* 10а. РАЗВОРОТ СТАТЕЙ — ведущая + лента-колонка.
   На главной этой раскладки больше нет (там лента, блок 10б ниже), но те же
   классы держат /blog/ и низ страницы статьи: у них body тоже .home-clean. */
body.home-clean .blog{padding:var(--nx-sec-sm) 0 var(--nx-sec)}
/* вход в статью — настоящая пилюля, как кнопки каталога: текстовая ссылка
   на этом месте не читалась как действие */
/* это .nx-btn--primary, а не его копия: раньше геометрию канона переписывали
   здесь руками, и кнопка не получала ни магнитного смещения, ни мобильного
   размера — рядом с остальными пилюлями сайта она вела себя по-своему.
   Локально остаётся только посадка в колонку и правый паддинг на 4px меньше:
   стрелка легче текста по массе */
body.home-clean .press-feat__go{align-self:flex-start;margin-top:8px;
  padding-right:24px;gap:10px}
/* стрелка рисованная, а не глиф «→»: текстовая стрелка в Open Sans сидит по
   x-height и на фоне кириллицы висела выше оптического центра */
body.home-clean .press-feat__go svg{display:block;flex:0 0 auto;width:18px;height:18px;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
/* тёмный край градиента — тот же ховер, что у остальных пилюль; тень отсюда
   убрана: у канона её нет, а разница читалась как «другая кнопка» */
body.home-clean a.press-feat:hover .press-feat__go{background:#4A3473}
body.home-clean a.press-feat:hover .press-feat__go svg{transform:translateX(4px)}
/* замыкающая строка «Все статьи» вместо дыры под последней карточкой */
body.home-clean .press-row--all .press-row__t{color:var(--nx-violet);font-size:var(--fs-lg)}
body.home-clean .press-row--all{padding:18px 2px}
body.home-clean .nx-press{display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,4.5vw,64px);align-items:start}
body.home-clean .press-tag{font:700 11.5px/1 'Open Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-terra)}
/* ведущая публикация: полотно 16/10 + editorial-подпись */
body.home-clean .press-feat{display:block;text-decoration:none}
body.home-clean .press-feat__img{display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:calc(var(--nx-r) + 4px);background:var(--nx-lav-soft) center/cover no-repeat;
  box-shadow:var(--shadow)}
/* фото на наведении НЕ масштабируем: подъём карточки уже говорит, что это
   ссылка, а ползущий кроп по краям кадра дёргал глаз */
body.home-clean .press-feat__img img{width:100%;height:100%;object-fit:cover;display:block}
body.home-clean .press-feat__b{display:flex;flex-direction:column;gap:12px;padding:24px 6px 0}
body.home-clean .press-feat__t{font-family:'Arsenal',Georgia,serif;font-weight:700;line-height:1.12;
  font-size:clamp(1.6rem,2.7vw,2.25rem);color:var(--nx-ink);transition:color .25s}
body.home-clean a.press-feat:hover .press-feat__t{color:var(--nx-violet)}
body.home-clean .press-feat__p{font-size:var(--fs-sm);line-height:1.6;color:var(--nx-muted);max-width:52ch}
/* фото ведущей заметнее: чуть глубже тень и лёгкий подъём карточки на hover */
body.home-clean .press-feat__img{transition:box-shadow .55s cubic-bezier(.16,1,.3,1),
  transform .55s cubic-bezier(.16,1,.3,1)}
body.home-clean a.press-feat:hover .press-feat__img{transform:translateY(-4px);
  box-shadow:var(--float)}
/* лента: строки с мини-полотном и хэйрлайнами */
body.home-clean .press-rows{display:flex;flex-direction:column}
body.home-clean .press-rows .press-row:nth-child(2){transition-delay:.18s}
body.home-clean .press-rows .press-row:nth-child(n+3){transition-delay:.36s}
body.home-clean .press-row{position:relative;display:flex;align-items:center;gap:22px;
  padding:20px 14px 20px 12px;text-decoration:none;border-top:1px solid var(--nx-line2);
  border-radius:var(--nx-r);
  transition:background .45s cubic-bezier(.16,1,.3,1),padding-left .45s cubic-bezier(.16,1,.3,1)}
/* подсветка строки на наведении: видно, что это ссылка, а не просто список */
body.home-clean a.press-row:hover{background:var(--lav-card-2);padding-left:18px;border-top-color:transparent}
body.home-clean .press-rows .press-row:first-child{border-top:0;padding-top:6px}
body.home-clean .press-row__img{flex:0 0 auto;width:116px;height:116px;overflow:hidden;
  border-radius:var(--nx-rf);background:var(--nx-lav-soft) center/cover no-repeat}
/* по той же причине, что у ведущей: подсветки строки достаточно, кроп не ползёт */
body.home-clean .press-row__img img{width:100%;height:100%;object-fit:cover;display:block}
body.home-clean .press-row__b{display:flex;flex-direction:column;gap:7px;min-width:0}
body.home-clean .press-row__t{font-family:'Arsenal',Georgia,serif;font-weight:700;line-height:1.15;
  font-size:21px;color:var(--nx-ink);transition:color .25s}
body.home-clean a.press-row:hover .press-row__t{color:var(--nx-violet)}
body.home-clean .press-row__p{font-size:var(--fs-fine);line-height:1.5;color:var(--nx-muted)}
body.home-clean .press-row__arr{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--nx-lavender);
  color:var(--nx-violet);font-size:16px;
  transition:background .3s,color .3s,transform .5s cubic-bezier(.16,1,.3,1)}
body.home-clean a.press-row:hover .press-row__arr{background:var(--nx-violet);color:#fff;transform:translateX(5px)}
@media(max-width:860px){
  body.home-clean .nx-press{grid-template-columns:1fr;gap:8px}
  body.home-clean .press-feat__b{padding:16px 2px 14px}
  body.home-clean .press-row__img{width:84px;height:84px}
  body.home-clean .press-row__t{font-size:var(--fs-lg)}
}
@media (prefers-reduced-motion: reduce){
  body.home-clean .press-feat__img img,body.home-clean .press-row__img img,
  body.home-clean .press-row__arr{transition:none}
}

/* 10б. ЛЕНТА СТАТЕЙ НА ГЛАВНОЙ: два встречных ряда.
   Приём снят с voiceflow.com: набор карточек лежит в треке трижды, сдвиг —
   ровно на одну копию, поэтому на стыке кадр тот же и шва не видно. Второй
   ряд — та же анимация с animation-direction:reverse, как у них.
   Скорость у образца 30 px/с; у нас 18 — там карточка несёт одну фразу
   цитаты, а у нас заголовок с подводкой, и на 30 их не дочитать. */
body.home-clean .blog{padding:var(--sec) 0;
  /* ширина карточки = ровно половина окна: в каждой полосе помещаются две
     карточки, значит в кадре стоят все четыре статьи и ни одна не повторяется
     обрезком у края. Фикс 660px это ломал — на 1920 в полосу влезало 2,8
     карточки, и третьей приезжала копия первой. */
  --card-w:clamp(400px,calc(50vw - 26px),1200px); --card-h:344px;
  --card-gap:20px; --marq-speed:18}
body.home-clean .blog-marq{position:relative;overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw);
  /* воздух под приподнятую карточку: на :hover она едет на -3px, и её
     верхняя граница вместе с фиолетовой рамкой уходила под overflow:hidden —
     рамка была видна с трёх сторон. Отступ съедаем из внешнего, чтобы
     расстояние до заголовка и между полосами осталось прежним. */
  padding-block:10px;margin-top:calc(clamp(20px,2.4vw,30px) - 10px);
  /* края растворяются, иначе карточка обрывается ножом посреди воздуха */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  /* Свой слой полосе нужен из-за этой самой маски: маскированный слой
     растеризуется по видимой части, и при подъёме от подвала полоса успевала
     показаться наполовину — верх ещё не отрисован, картинка «доезжает» на
     глазах. Со своим слоем растр готов заранее и не пересобирается на каждом
     кадре прокрутки. translateZ, а не will-change: will-change на маску
     Chromium держит слой постоянно горячим, а нам нужна только стабильность.
     Fixed-потомков внутри полосы нет, containing block никому не мешает. */
  transform:translateZ(0)}
body.home-clean .blog-marq__track{display:flex;width:max-content;
  animation:blogMarq var(--marq-dur,150s) linear infinite}
/* нижняя полоса: те же карточки, встречное направление. На узких экранах она
   НЕ прячется, хотя раньше пряталась: тогда она повторяла верхнюю, а теперь
   несёт свою половину статей — спрятать значит потерять половину блога. */
body.home-clean .blog-marq--back{margin-top:calc(var(--card-gap) - 20px)}
body.home-clean .blog-marq--back .blog-marq__track{animation-direction:reverse}
body.home-clean .blog-marq__set{display:flex;gap:var(--card-gap);
  padding-right:var(--card-gap)}
/* сдвиг ровно на одну копию из трёх */
@keyframes blogMarq{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% / 3))}
}
/* курсор на ряду — ряд стоит. В образце паузы нет, у нас есть: заголовок
   с подписью на ходу читать неудобно, а карточка ещё и кликабельна */
body.home-clean .blog-marq:hover .blog-marq__track,
body.home-clean .blog-marq:focus-within .blog-marq__track,
body.home-clean .blog-marq.is-off .blog-marq__track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  body.home-clean .blog-marq__track{animation:none}
  body.home-clean .blog-marq{overflow-x:auto;scrollbar-width:none}
}

/* карточка: фото слева, текст справа — пропорция образца 1,89:1.
   Край обязателен: белая плашка на лавандовом фоне главной сливалась с ним,
   и лента читалась россыпью текста без границ. Линия + тень, не одна тень:
   на светлой секции мягкая тень почти не видна. */
body.home-clean .art-card{flex:0 0 var(--card-w);display:grid;
  grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);align-items:stretch;
  min-height:var(--card-h);background:#fff;border-radius:calc(var(--nx-r) + 6px);
  /* .16, а не токен-волосок: на лавандовом фоне главной волосок пропадает,
     и лента читалась россыпью текста без границ */
  border:1px solid rgba(86,61,135,.16);overflow:hidden;text-decoration:none;
  box-shadow:0 22px 44px -30px rgba(86,61,135,.5),0 2px 6px -3px rgba(86,61,135,.16);
  transition:box-shadow .45s cubic-bezier(.4,.05,.2,1),
             transform .45s cubic-bezier(.4,.05,.2,1),
             border-color .45s cubic-bezier(.4,.05,.2,1)}
body.home-clean .art-card:hover{transform:translateY(-3px);
  border-color:var(--nx-lavender);box-shadow:var(--shadow)}
body.home-clean .art-card:focus-visible{outline:var(--focus);outline-offset:3px}
body.home-clean .art-card__img{display:block;position:relative;overflow:hidden;
  background:var(--nx-lav-soft) center/cover no-repeat}
/* снимок лежит абсолютом, иначе он диктует высоту карточки: height:100% в
   ячейке без заданной высоты не работает, и картинка разворачивается по
   своей пропорции. Пока карточка была 660px, высота совпадала с --card-h
   случайно; с резиновой шириной на 1920 карточка вымахала до 495px, и две
   полосы перестали помещаться в экран — то есть все четыре статьи сразу
   опять не видны, теперь по вертикали. */
body.home-clean .art-card__img img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
body.home-clean .art-card:hover .art-card__img img{transform:scale(1.05)}
/* метка переехала на фото: в колонке текста она отнимала строку у заголовка,
   а на снимке работает подписью к кадру */
body.home-clean .art-card__chip{position:absolute;left:14px;top:14px;z-index:2;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.92);
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:var(--fs-tag);
  letter-spacing:.12em;text-transform:uppercase;color:var(--nx-violet);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.home-clean .art-card__b{display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(20px,2vw,28px);gap:10px}
body.home-clean .art-card__t{font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:clamp(1.25rem,1.5vw,1.6rem);line-height:1.16;color:var(--nx-ink);
  transition:color .45s cubic-bezier(.4,.05,.2,1)}
body.home-clean .art-card:hover .art-card__t{color:var(--nx-violet)}
body.home-clean .art-card__p{font-size:var(--fs-sm);line-height:1.5;color:var(--nx-muted);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* «Читать разбор» с кружком: стрелка в круге — тот же знак, что у строк
   каталога, лента не заводит собственного словаря */
body.home-clean .art-card__go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:var(--fs-sm);color:var(--nx-violet)}
body.home-clean .art-card__go i{display:grid;place-items:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:999px;border:1px solid var(--nx-lavender);
  transition:background-color .4s,color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
body.home-clean .art-card__go svg{width:15px;height:15px;display:block}
body.home-clean .art-card:hover .art-card__go i{background:var(--nx-violet);color:#fff;
  border-color:var(--nx-violet);transform:translateX(3px)}
@media(max-width:820px){
  body.home-clean .blog{--card-w:min(86vw,400px);--card-h:290px;--card-gap:12px}
  body.home-clean .art-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  body.home-clean .art-card__img{height:146px}
  body.home-clean .art-card__p{-webkit-line-clamp:3}
}
@media(prefers-reduced-motion:reduce){
  body.home-clean .art-card,
  body.home-clean .art-card__img img,
  body.home-clean .art-card__go i{transition:none}
}

/* 10. НИЗ ГЛАВНОЙ (слайд 12 Зины, 29.09.2026). Две равные карточки одного
   строя — боты-помощники на белом и прямая связь на --night, — под ними
   строка каталога с кнопкой. Строй у карточек общий: капс, заголовок одного
   кегля, строка текста, действие прижато к низу, поэтому низ списка ботов и
   кнопка «Написать» стоят на одной линии. Крупного заголовка больше нет:
   прежний финал «Выберите программу» читался вторым кругом страницы. */
body.home-clean .nx-final{padding:var(--sec) 0;border-top:1px solid var(--nx-line2)}
body.home-clean .nx-outro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px)}
/* ботов не завели — прямая связь занимает ряд одна, а не половину рядом с дырой */
body.home-clean .nx-outro--solo{grid-template-columns:minmax(0,1fr)}
body.home-clean .nx-outro__card{display:flex;flex-direction:column;min-width:0;
  border-radius:calc(var(--nx-r) + 6px);padding:clamp(28px,3.4vw,48px)}
body.home-clean .nx-outro__card--bots{background:#fff;border:1px solid var(--nx-line2)}
body.home-clean .nx-outro__card--ask{background:var(--night);color:#fff}
body.home-clean .nx-outro__eyebrow{margin:0 0 12px;font-size:var(--fs-tag);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terra-ink)}
body.home-clean .nx-outro__card--ask .nx-outro__eyebrow{color:var(--nx-lavender)}
body.home-clean .nx-outro__t{font-family:'Arsenal',Georgia,serif;font-weight:400;line-height:1.1;
  letter-spacing:-.01em;font-size:clamp(1.7rem,2.6vw,2.4rem);margin:0;color:var(--nx-ink);
  text-wrap:balance}
body.home-clean .nx-outro__card--ask .nx-outro__t{color:#fff}
body.home-clean .nx-outro__p{margin:12px 0 0;font-size:var(--fs-md);line-height:1.5;
  color:var(--nx-muted);max-width:44ch}
/* белый .8 на --night — контраст 9,6:1 */
body.home-clean .nx-outro__card--ask .nx-outro__p{color:rgba(255,255,255,.8)}
body.home-clean .nx-outro__act{margin-top:auto;padding-top:clamp(24px,2.8vw,34px)}
/* часы поддержки — вывеской: подпись и крупные цифры шрифтом заголовка.
   Ряд «Пн…Вс» снят (Даня, 13.10): плашки с кольцом на сегодняшнем
   читались как запись на день, а нажать их нельзя */
body.home-clean .nx-outro__week{display:grid;gap:14px;margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(18px,2.2vw,24px);border-top:1px solid rgba(255,255,255,.14)}
body.home-clean .nx-outro__hours{display:grid;gap:4px;margin:0;font-size:var(--fs-sm);color:rgba(255,255,255,.7)}
body.home-clean .nx-outro__hh{font-family:'Arsenal',Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.01em;color:#fff;
  font-variant-numeric:lining-nums tabular-nums}
/* display только у показанной строки: иначе он перебил бы атрибут hidden */
body.home-clean .nx-outro__now:not([hidden]){display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff}
body.home-clean .nx-outro__now::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}
body.home-clean .nx-outro__now[data-state="on"]::before{background:#7EE2A8;box-shadow:0 0 0 4px rgba(126,226,168,.18)}
body.home-clean .nx-outro__bot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:16px;padding:15px 4px;border-bottom:1px solid var(--nx-line2);
  text-decoration:none;color:var(--nx-ink)}
body.home-clean .nx-outro__bot:first-child{border-top:1px solid var(--nx-line2)}
body.home-clean .nx-outro__bot:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
body.home-clean .nx-outro__logo{display:grid;place-items:center;width:32px;height:32px}
body.home-clean .nx-outro__logo svg{width:100%;height:100%;display:block}
body.home-clean .nx-outro__bt{display:grid;gap:2px;font-weight:600;font-size:var(--fs-md)}
body.home-clean .nx-outro__bt small{font-weight:400;font-size:13px;color:var(--nx-muted)}
body.home-clean .nx-outro__bot i{font-style:normal;color:var(--nx-lavender);
  transition:color .45s var(--ease),transform .45s var(--ease)}
body.home-clean .nx-outro__bot:hover i,
body.home-clean .nx-outro__bot:focus-visible i{color:var(--nx-violet);transform:translate(2px,-2px)}
/* строка каталога: живые цифры мелким капсом и одна кнопка — обратная дорога
   к программам перед подвалом, без второго заголовка */
body.home-clean .nx-outro__cat{display:grid;justify-items:center;gap:16px;text-align:center;
  margin-top:clamp(36px,4.4vw,56px)}
body.home-clean .nx-outro__imprint{margin:0;font-size:var(--fs-tag);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--nx-muted);font-variant-numeric:tabular-nums}
body.home-clean .nx-outro__imprint b{color:var(--nx-violet);font-weight:600}
@media(max-width:860px){
  body.home-clean .nx-outro{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  body.home-clean .nx-outro__card--ask .nx-btn,
  body.home-clean .nx-outro__cat .nx-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  body.home-clean .nx-outro__bot i{transition:none}
}
/* ЖИВОЙ СЛОЙ (home-live.js): магнитные кнопки, свечение за курсором, глубина.
   Активен только на точной мыши без reduced-motion — переменные ставит JS,
   без него всё статично (нулевые дефолты). */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nx-btn{
    transform:translate3d(var(--magx,0px),var(--magy,0px),0);
    /* смещение к курсору отвечает чуть быстрее смены тона, но не рывком:
       на 0.22с кнопка дёргалась за мышью */
    transition-property:transform,box-shadow,background-color,border-color,color,letter-spacing;
    transition-duration:.4s,.55s,.55s,.55s,.55s,.55s;
    transition-timing-function:cubic-bezier(.4,.05,.2,1)}
  .nx-btn:active{
    transform:translate3d(var(--magx,0px),calc(var(--magy,0px) + 1px),0)}
  /* свечение, следующее за курсором (лаванда, едва заметное) */
  body.home-clean .shelf::after,
  body.home-clean .press-feat::after,
  body.home-clean .press-row::after{content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:0;transition:opacity .45s;
    background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),var(--lav-wash),transparent 72%)}
  body.home-clean .shelf:hover::after,
  body.home-clean .press-feat:hover::after,
  body.home-clean .press-row:hover::after{opacity:1}
  body.home-clean .press-feat,body.home-clean .press-row{position:relative}
  /* веер обложек подкручивается за мышью */
  body.home-clean .shelf__covers{transform:rotate(var(--tilt,0deg));
    transition:transform .5s cubic-bezier(.16,1,.3,1)}
  /* фото эксперта дышит против паспарту */
  body.home-clean .nx-exp__media img{
    transform:translate3d(var(--px,0px),var(--py,0px),0);
    transition:transform .7s cubic-bezier(.16,1,.3,1)}
  body.home-clean .nx-exp__media::before{
    transform:translate3d(calc(var(--px,0px) * -.7),calc(var(--py,0px) * -.7),0);
    transition:transform .7s cubic-bezier(.16,1,.3,1)}
}

/* заголовок секции для новых блоков; с 25.09 им же размечены секции
   страницы продукта — одна шапка на обе страницы, без копии */
body.home-clean .nx-head,body.prod-clean .nx-head{margin-bottom:clamp(28px,4vw,44px)}
body.home-clean .nx-head h2,body.prod-clean .nx-head h2{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);
  margin:10px 0 0;color:var(--nx-violet);max-width:22ch}
body.home-clean .nx-head__sub,body.prod-clean .nx-head__sub{margin:10px 0 0;color:var(--nx-muted);font-size:var(--fs-md);max-width:52ch}

/* ============================================================
   ЛОАД-СЕКВЕНЦИЯ (возврат «чертёжной» хореографии, белая версия):
   чернильная вуаль → чертёж штрихами (SVG dashoffset) → вордмарк →
   вуаль поднимается → hero построчно. Раз за сессию, скип по клику.
   Цвета: --nx-ink (вуаль), белый, --nx-lavender — брендбук.
   ============================================================ */
body.home-clean #intro{display:none!important} /* базовый логотип-занавес заменён секвенцией */
/* Разметка, стили и ключевые кадры вуали живут в templates/wagtailcore/page.html
   (критический инлайн): отсюда её задержки отсчитывались от момента прихода
   home.css, то есть примерно с секундным опозданием, и секвенция не успевала
   показать вордмарк до собственного подъёма. */

/* ============================================================
   Микро-живость ассетов (16.07):
   рабочий hover-зум обложек блога (они background-спаны — зумим
   псевдослоем с background:inherit, прямой transform спана двигал
   бы и рамку). Всё гаснет при reduced-motion.
   ============================================================ */
body.home-clean .press-feat__img,
body.home-clean .press-row__img{overflow:hidden;position:relative}
body.home-clean .press-feat__img::before,
body.home-clean .press-row__img::before{content:"";position:absolute;inset:0;
  background:inherit;background-size:cover;background-position:center}
/* слой-зум нужен только спанам-заглушкам (фон в style). У реальной статьи
   внутри <img> — без z-index псевдослой закрашивал обложку подложкой */
body.home-clean .press-feat__img img,
body.home-clean .press-row__img img{position:relative;z-index:1}
/* зум псевдослоя-заглушки убран вместе с зумом обложек: карточки без фото
   не должны вести себя иначе, чем карточки с фото */


/* ── ФИНАЛ СЕКЦИИ «ПОЛЕЗНЫЕ ВИДЕО»: переход в соцсети ───────────────────
   Прежняя ghost-пилюля тонула на белом. Заметность даём массой и сменой
   фактуры (бежевый «поднос» + хэйрлайн), а не новым цветом. Логотипов
   площадок нет: символику Meta показывать нельзя, а значок у части списка
   сделал бы одну площадку исключением.
   Панель держит два ряда: копия с кнопкой сверху, перечисление площадок под
   хэйрлайном — иначе на всю ширину экрана оставались два слова в пустоте. */
/* Плиты больше нет: тёплый «поднос» под лентой читался вторым объектом, а на
   телефоне — cookie-баннером (он висит на том же экране). Блок держат воздух,
   линия и лента логотипов. Ширина — как у ленты видео над ним: колонка по
   центру оставляла пустые поля там, где секция выше идёт во всю ширину. */
.nx-social{display:grid;row-gap:clamp(22px,2.6vw,30px);
  max-width:var(--nx-wrap);margin:clamp(38px,4.5vw,56px) auto 0;
  padding:clamp(26px,3vw,38px) 0 clamp(8px,1vw,14px)}
.nx-social__head{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;column-gap:clamp(20px,3vw,44px);row-gap:18px;
  padding-bottom:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--nx-line2)}
.nx-social__eyebrow{margin:0 0 10px;font-size:var(--fs-tag);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terra-ink)}
.nx-social__copy h3{font-family:'Arsenal',Georgia,serif;font-weight:400;line-height:1.15;
  font-size:clamp(1.45rem,2.2vw,1.95rem);margin:0;color:var(--nx-ink)}
.nx-social__copy p{margin:8px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--nx-muted);max-width:52ch}
/* перечисление площадок: не ссылки и не чипы — редакционная строка через
   лавандовые точки, поэтому её не тянет нажать */
.nx-social__names{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:6px 14px;margin:0;padding:0;list-style:none}
.nx-social__names li{display:flex;align-items:center;gap:10px;
  font-size:var(--fs-mini);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nx-muted)}
.nx-social__names li::after{content:"";width:3px;height:3px;
  border-radius:50%;background:var(--nx-lavender)}
.nx-social__names li:last-child::after{display:none}
/* ЛЕНТА. Без JS выше — обычная строка имён. Класс вешает скрипт, он же
   клонирует набор: в разметке список один и полный (его считает
   test_one_service_listed_once), бесшовность — дело браузера. */
.nx-social__rail{position:relative;width:100%}
.nx-social__rail.is-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.nx-social__rail.is-rail .nx-social__names{flex-wrap:nowrap;justify-content:flex-start;
  gap:0;width:max-content;animation:nx-social-rail var(--nx-cycle,34s) linear infinite}
.nx-social__rail.is-rail .nx-social__names li{flex:0 0 var(--nx-step,168px);
  flex-direction:column;justify-content:flex-start;gap:12px;padding:6px 0;
  font-size:var(--fs-tag);letter-spacing:.1em;color:var(--nx-muted)}
.nx-social__rail.is-rail .nx-social__names li::after{display:none}
.nx-social__logo{display:grid;place-items:center;width:46px;height:46px;
  color:var(--nx-violet);transition:transform .4s var(--ease)}
/* родные цвета марок: перекрашенные в один фиолетовый, они читались как
   наши иконки, а не как площадки, на которых нас можно найти. Цвета сняты
   13.09.2026 с самих сервисов — у MAX из градиента favicon (#8419FF), у
   Дзена из favicon.ico (#202022). Знак Rutube фирменно чёрный: красная
   точка у него отдельным цветом, а контур у нас один. */
.nx-social__logo--tg{color:#26A5E4}
.nx-social__logo--vk{color:#0077FF}
.nx-social__logo--max{color:#8419FF}
.nx-social__logo--dzen{color:#202022}
.nx-social__logo--ok{color:#EE8208}
.nx-social__logo--rutube{color:#0F0F0F}
.nx-social__logo--youtube{color:#FF0000}
.nx-social__logo svg{width:100%;height:100%;display:block}
.nx-social__names li:hover .nx-social__logo{transform:translateY(-3px)}
@keyframes nx-social-rail{to{transform:translateX(-50%)}}
/* наведение останавливает ход: имя и знак можно рассмотреть */
.nx-social__rail.is-rail:hover .nx-social__names{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .nx-social__rail.is-rail .nx-social__names{animation:none}
}
.nx-social__links{display:flex;gap:14px;flex:none}
.nx-social__act{display:grid;justify-items:center;gap:10px}
.nx-social__count{margin:0;font-size:var(--fs-tag);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nx-muted);
  font-variant-numeric:tabular-nums}
.nx-social__btn{flex:none;height:52px;padding:0 30px;gap:.6em}
/* своей перекраски у кнопки панели нет — ховер берётся от .nx-btn--primary */
.nx-social__btn i{font-style:normal;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.nx-social__btn:hover i{transform:translateX(4px)}
.nx-social__a{display:grid;justify-items:center;gap:8px;text-decoration:none}
.nx-social__ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--hair);color:var(--nx-violet);
  transition:background .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1),transform .18s ease}
.nx-social__lbl{font-family:'Open Sans',sans-serif;font-size:var(--fs-tag);letter-spacing:.12em;
  text-transform:uppercase;color:var(--nx-muted);transition:color .3s ease}
.nx-social__a:hover .nx-social__ic{background:var(--nx-violet);border-color:var(--nx-violet);color:#fff}
.nx-social__a:hover .nx-social__lbl{color:var(--nx-violet)}
.nx-social__a:active .nx-social__ic{transform:scale(.96)}
.nx-social__a:focus-visible .nx-social__ic{outline:2px solid var(--nx-violet);outline-offset:3px}
@media(max-width:820px){
  .nx-social{padding:24px 0 10px;--nx-step:132px}
  /* «Одноклассники» не влезали в ячейку и лезли на соседа */
  .nx-social__rail.is-rail .nx-social__names li{font-size:var(--fs-micro);letter-spacing:.06em}
  .nx-social__head{grid-template-columns:minmax(0,1fr);align-items:start}
  /* на узком экране соседние имена обрезались краем почти без растворения */
  .nx-social__rail.is-rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .nx-social__logo{width:38px;height:38px}
  .nx-social__copy p{font-size:var(--fs-note)}
  .nx-social__names{font-size:var(--fs-tag)}
}
@media(prefers-reduced-motion:reduce){.nx-social__ic{transition:none}}

/* ═══ ВИТРИНЫ РАЗДЕЛОВ: /products/ и /specialists/ ═══════════════════
   Те же полки, что на главной (стили выше держатся на #catalog), но без
   hero и переключателя аудитории: страница сама и есть выбор аудитории.
   Добавляется только строка описания раздела — она объясняет, что внутри,
   до перехода в раздел. */
body.shelf-page .shelf-page__body{padding-top:clamp(28px,5vw,64px);
  padding-bottom:clamp(40px,6vw,86px)}
body.shelf-page .nx-cat__head .crumbs{margin-bottom:14px}
body.shelf-page .nx-cat__head .crumbs a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--edge-strong)}
body.shelf-page .nx-cat__head .crumbs a:hover{color:var(--nx-violet)}
body.shelf-page .nx-cat__head h1{font-family:'Arsenal',Georgia,serif;font-weight:700;
  line-height:1.06;font-size:var(--fs-h1);letter-spacing:-.015em;
  color:var(--nx-ink);margin:0}
/* описание раздела: между названием и счётчиком материалов, узкой мерой —
   длинная строка на всю полку читается как абзац статьи, а не как подпись */
body.shelf-page #catalog .shelf__desc{font:400 15.5px/1.55 'Open Sans',sans-serif;
  color:var(--text-secondary);max-width:52ch}
body.shelf-page #catalog .shelf__info{gap:7px}
body.shelf-page .shelf-page__empty{margin:0;padding:28px 0 8px}
@media(max-width:760px){
  body.shelf-page #catalog .shelf__desc{font-size:var(--fs-note);max-width:none}
}

/* ═══ СТРАНИЦА БЛОГА ════════════════════════════════════════════════
   Секции .blog и .press-idx приезжают с главной вместе со стилями; здесь
   только шапка страницы, потому что hero у блога нет. */
body.blog-page .blog-page__head{padding-top:var(--sec-half);
  padding-bottom:clamp(8px,1.6vw,20px)}
body.blog-page .blog-page__head .crumbs{margin-bottom:14px}
body.blog-page .blog-page__head .crumbs a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--edge-strong)}
body.blog-page .blog-page__head .crumbs a:hover{color:var(--nx-violet)}
body.blog-page .blog-page__head h1{margin:0;font-family:'Arsenal',Georgia,serif;
  font-weight:700;line-height:1.06;font-size:var(--fs-h1);
  letter-spacing:-.015em;color:var(--nx-ink)}
body.blog-page .blog-page__sub{margin:12px 0 0;color:var(--nx-muted);
  font-size:var(--fs-md);max-width:52ch}

/* на главной между статьями и СМИ стоит воздух целой полосы — на странице
   блога это два соседних раздела одного архива, лишний экран пустоты */
body.blog-page .blog{padding-bottom:var(--sec-half)}
body.blog-page .press-idx{padding-top:clamp(24px,3.4vw,52px)}

/* ═══ ВИТРИНА КАТАЛОГА: «Все продукты» и страница раздела ════════════
   Одна раскладка на обе страницы. Прежде они были свёрстаны врозь —
   разная шапка, разные фильтры (ссылки против кнопок), разный вид. */
body.cat-page .cat-page__head{padding-top:var(--sec-half)}
body.cat-page .cat-page__head .crumbs{margin-bottom:16px}
body.cat-page .cat-page__head .crumbs a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--edge-strong)}
body.cat-page .cat-page__head .crumbs a:hover{color:var(--nx-violet)}
body.cat-page .cat-page__grid{display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(20px,4vw,60px);flex-wrap:wrap}
body.cat-page .cat-page__title h1{margin:12px 0 0;font-family:'Arsenal',Georgia,serif;
  font-weight:700;line-height:1.06;font-size:var(--fs-h1);
  letter-spacing:-.015em;color:var(--nx-ink)}
body.cat-page .cat-page__sub{margin:12px 0 0;color:var(--nx-muted);
  font-size:var(--fs-md);line-height:1.55;max-width:54ch}
/* счётчик держит правый край шапки, как на блоке публикаций */
body.cat-page .cat-page__count{margin:0;text-align:right;flex:0 0 auto}
body.cat-page .cat-page__count b{display:block;font-family:'Arsenal',Georgia,serif;
  font-weight:700;line-height:1;font-size:var(--fs-num);
  color:var(--nx-violet)}
body.cat-page .cat-page__count span{display:block;margin-top:6px;font-size:var(--fs-fine);
  letter-spacing:.1em;text-transform:uppercase;color:var(--nx-muted)}

/* фильтры: формат слева, сортировка справа — разные роли не смешиваем */
body.cat-page .cat-filters{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;
  margin:clamp(26px,3.6vw,44px) 0 clamp(22px,3vw,34px);
  padding-bottom:clamp(16px,2.2vw,24px);
  border-bottom:1px solid var(--hair-soft)}
body.cat-page .cat-filters__row{display:flex;flex-wrap:wrap;gap:6px}
/* Неактивные фильтры и сортировки были голым текстом на прозрачном фоне:
   отличить их от подписей нельзя, нажать никто не догадывался (F055).
   Даём каждому видимую рамку и лёгкую подложку — активный остаётся
   единственной тёмной пилюлей, иерархия не ломается. */
body.cat-page .cat-chip{padding:10px 20px;border-radius:var(--r-pill);text-decoration:none;
  font:600 14px/1 'Open Sans',sans-serif;color:var(--text-secondary);
  background:var(--lav-wash-soft);
  border:1px solid var(--hair);transition:background .25s,color .25s,border-color .25s}
body.cat-page .cat-chip:hover{background:var(--lav-wash);color:var(--nx-violet);
  border-color:var(--hair-active)}
body.cat-page .cat-chip.is-on{background:var(--nx-violet);color:#fff;
  border-color:var(--nx-violet);box-shadow:var(--shadow-sm)}
body.cat-page .cat-filters__sort{display:flex;gap:4px}
body.cat-page .cat-sort{padding:10px 14px;border-radius:var(--r-pill);text-decoration:none;
  font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.02em;color:var(--nx-muted);
  background:var(--lav-wash-soft);
  border:1px solid var(--hair);transition:color .25s,background .25s,border-color .25s}
body.cat-page .cat-sort:hover{color:var(--nx-violet);background:var(--lav-wash);
  border-color:var(--hair-active)}
body.cat-page .cat-sort.is-on{color:var(--nx-violet);background:var(--lav-wash);
  border-color:var(--nx-violet)}

body.cat-page .cat-page__body{padding-bottom:var(--sec)}
/* position нужен переходу фильтра: уходящая карточка на время затухания
   встаёт absolute на своё прежнее место внутри сетки (catalog-filter.js) */
body.cat-page .plist{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);align-items:stretch;position:relative}
body.cat-page .cat-page__empty{grid-column:1/-1;margin:0}
@media(max-width:1000px){
  body.cat-page .plist{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body.cat-page .plist{grid-template-columns:1fr}
  body.cat-page .cat-page__grid{align-items:flex-start}
  body.cat-page .cat-page__count{text-align:left}
  body.cat-page .cat-filters{align-items:flex-start}
}

/* ═══ СТРАНИЦА СТАТЬИ ═══════════════════════════════════════════════
   Разворот в грамматике блога: узкая колонка текста по центру, обложка
   во всю ширину, соседние материалы в конце. Прежняя версия жила на
   старом слое, и переход из блога читался как уход на другой сайт. */
body.article-page .art__head{padding-top:clamp(26px,4.4vw,58px);
  padding-bottom:clamp(20px,3vw,34px)}
body.article-page .art__head .crumbs{margin-bottom:18px;max-width:74ch}
body.article-page .art__head .crumbs a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--edge-strong)}
body.article-page .art__head .crumbs a:hover{color:var(--nx-violet)}
body.article-page .art__head h1{margin:12px 0 0;font-family:'Arsenal',Georgia,serif;
  font-weight:700;line-height:1.06;font-size:var(--fs-h1);
  letter-spacing:-.015em;color:var(--nx-ink);max-width:22ch}
body.article-page .art__lede{margin:18px 0 0;font-size:18px;line-height:1.6;
  color:var(--text-secondary);max-width:60ch}
body.article-page .art__cover{margin:0 0 clamp(28px,4vw,52px)}
body.article-page .art__cover img{display:block;width:100%;height:auto;
  border-radius:var(--nx-r);box-shadow:var(--shadow)}
/* мера строки под чтение: 68 знаков — дальше глаз теряет начало строки */
body.article-page .art__prose{max-width:68ch;font-size:var(--fs-lg);line-height:1.72;
  color:var(--ink)}
body.article-page .art__prose p{margin:0 0 1.15em}
body.article-page .art__prose h2{margin:1.9em 0 .6em;font-family:'Arsenal',Georgia,serif;
  font-weight:700;font-size:clamp(1.45rem,2.4vw,1.95rem);color:var(--nx-ink)}
body.article-page .art__prose h3{margin:1.6em 0 .5em;font-family:'Arsenal',Georgia,serif;
  font-weight:700;font-size:var(--fs-h4);color:var(--nx-ink)}
body.article-page .art__prose ul,body.article-page .art__prose ol{margin:0 0 1.2em;
  padding-left:1.2em}
body.article-page .art__prose li{margin:0 0 .5em}
body.article-page .art__prose a{color:var(--violet)}
body.article-page .art__prose img{max-width:100%;height:auto;border-radius:12px;
  margin:1.4em 0}
body.article-page .art__more{padding:var(--sec-half) 0 var(--sec);
  border-top:1px solid var(--hair-soft);
  margin-top:clamp(40px,5vw,72px)}
body.article-page .art__more-list{display:grid;gap:2px}

/* ═══ ПОДАРОК ═══════════════════════════════════════════════════════
   Дарят конкретный материал: покупка — со страницы материала, активация
   кода — на /gift/. Сертификатов на сумму и баланса аккаунта больше нет. */
body.gift-page .gp-head{padding-top:var(--sec-half)}
body.gift-page .gp-head .crumbs{margin-bottom:16px}
body.gift-page .gp-head .crumbs a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--edge-strong)}
body.gift-page .gp-head h1{margin:12px 0 0;font-family:'Arsenal',Georgia,serif;
  font-weight:700;line-height:1.04;font-size:clamp(2.2rem,4.6vw,3.6rem);
  color:var(--nx-ink)}
body.gift-page .gp-head__sub{margin:14px 0 0;color:var(--text-secondary);font-size:var(--fs-lg);
  line-height:1.6;max-width:56ch}

body.gift-page .gp-how{padding-top:var(--sec-half)}
body.gift-page .gp-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  column-gap:clamp(24px,4vw,64px)}
body.gift-page .gp-step{display:grid;grid-template-columns:52px minmax(0,1fr);
  align-items:baseline;gap:14px;padding:20px 0;
  border-top:1px solid var(--edge-card)}
body.gift-page .gp-step__n{font:400 clamp(1.35rem,1.8vw,1.7rem)/1 'Arsenal',Georgia,serif;
  color:var(--violet-quiet);font-variant-numeric:tabular-nums}
body.gift-page .gp-step__t{font-size:var(--fs-md);line-height:1.5;color:var(--nx-ink)}

/* активация: тёплое поле, как блок приёма на «Обо мне» */
body.gift-page .gp-redeem{padding-top:var(--sec-half)}
body.gift-page .gp-redeem__box{display:flex;align-items:center;
  justify-content:space-between;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  padding:clamp(26px,3.4vw,44px);border-radius:var(--nx-r);background:var(--cream-mist);
  border:1px solid var(--edge-card)}
body.gift-page .gp-redeem__copy h2{margin:10px 0 0;font-family:'Arsenal',Georgia,serif;
  font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--nx-ink)}
body.gift-page .gp-redeem__copy p{margin:10px 0 0;color:var(--text-secondary);max-width:46ch}
body.gift-page .gp-redeem__form{display:flex;gap:10px;flex-wrap:wrap;
  align-items:center}
body.gift-page .gp-redeem__field{height:52px;min-width:min(280px,72vw);
  padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--edge-mid);
  background:#fff;font:600 15px/1 'Open Sans',sans-serif;letter-spacing:.08em;
  color:var(--nx-ink);text-transform:uppercase}
body.gift-page .gp-redeem__field:focus{outline:2px solid var(--nx-violet);
  outline-offset:2px}
body.gift-page .gp-redeem__hint{flex:1 0 100%;margin:0;font-size:var(--fs-fine);
  color:var(--nx-muted)}
body.gift-page .gp-picks{padding:var(--sec-half) 0 var(--sec)}
body.gift-page .plist{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);align-items:stretch}
@media(max-width:1000px){body.gift-page .plist{grid-template-columns:1fr 1fr}}
@media(max-width:620px){body.gift-page .plist{grid-template-columns:1fr}}

/* блок «подарить» на странице материала */
.pgift{margin-top:22px;padding:20px 22px;border-radius:var(--radius-sm);
  border:1px dashed var(--edge-strong);background:rgba(251,246,240,.7);
  display:grid;gap:14px}
.pgift__copy{display:grid;gap:5px}
.pgift__t{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:18px;
  color:var(--ink)}
.pgift__p{font-size:var(--fs-note);line-height:1.5;color:var(--muted)}
.pgift__form{display:grid;gap:12px}
.pgift__law{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-fine);
  line-height:1.45;color:var(--muted)}
.pgift__law input{margin-top:2px;flex:0 0 auto}
.pgift__law a{color:var(--violet)}
/* акцепт условий стоит ПОД галочкой, а не внутри её текста: согласие на
   обработку данных с 01.09.2025 оформляется отдельно от документов */
.pgift__law-note{margin:6px 0 0 27px;font-size:var(--fs-mini);line-height:1.5;
                 color:var(--muted)}
.pgift__law-note a{color:var(--violet);text-decoration:underline}
.pgift__btn{justify-self:start}
/* «поделиться» у бесплатного: та же карточка, под ней ряд вариантов.
   Раскрытие — высотой строки сетки 0fr→1fr, с любого места прерывается.
   Отступ ряда — padding внутри, а не gap карточки: gap прыгал бы сразу. */
.pshare__opts{flex:1 1 100%;display:grid;grid-template-rows:1fr;opacity:1;
  margin-top:-14px;transition:grid-template-rows .3s ease,opacity .3s ease}
.pshare__opts.is-shut{grid-template-rows:0fr;opacity:0}
.pshare__in{min-height:0;overflow:hidden;display:flex;flex-wrap:wrap;gap:8px;
  padding-top:14px}
.pshare__opt{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--nx-lavender);border-radius:999px;background:#fff;
  color:var(--nx-violet);font:inherit;font-size:var(--fs-note);font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:color .2s,border-color .2s,box-shadow .2s}
.pshare__opt:hover{color:var(--nx-ink);border-color:var(--nx-violet);box-shadow:var(--lift)}
.pshare__opt:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
.pshare__url{flex:1 1 100%;min-width:0;min-height:44px;padding:0 14px;
  border:1px solid var(--nx-lavender);border-radius:12px;background:#fff;
  color:var(--ink);font:inherit;font-size:var(--fs-note)}
/* свой display у ряда (grid), кнопок (.btn, .pshare__opt) и поля перебивал
   браузерное [hidden]{display:none}: свёрнутый ряд невидимо ловил Tab */
.pshare [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.pshare__opts,.pshare__opt{transition:none}}
body.gift-page .gp-redeem__note{margin-top:10px;font-size:var(--fs-fine);line-height:1.5;
  color:var(--nx-muted);max-width:46ch}

/* Скрытие карточки фильтром. Собственный display у .pcard перебивает
   браузерное правило [hidden]{display:none}, и помеченная карточка
   продолжала отображаться — фильтр «работал» только в разметке. */
.pcard[hidden]{display:none!important}
body.gift-page .gp-msg{margin:0 0 16px;padding:12px 16px;border-radius:12px;
  background:var(--terra-wash);color:var(--terra-ink);font-size:var(--fs-note)}
body.gift-page .gp-msg.smart-note{background:var(--lav-wash);color:#4a3a63}

/* Раздел назвался бесплатным, но платные позиции в нём есть — оговорка над
   списком (F091). Тон спокойный: это не ошибка человека и не тревога. */
.cat-page__paidnote{margin:0 0 18px;padding:12px 16px;border-radius:12px;
  background:var(--beige);color:var(--ink);font-size:var(--fs-note);
  line-height:1.45}

/* Живой поиск не дозвонился: кнопка повтора под сообщением (F077) */
.qs__retry{margin-top:12px}
/* Страница поиска: тип и цена отделяют статьи от платных материалов. */
.search-results__list,
.search-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result__link,
.search-popular__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.search-result__title,
.search-popular__list span {
  color: var(--ink);
  font-weight: 600;
}

.search-result__meta,
.search-popular__list small {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: var(--fs-fine);
}

.search-empty {
  padding: 48px 20px;
}

.search-popular {
  margin-top: 42px;
}

.search-popular h2 {
  margin-bottom: 18px;
}

.search-popular__list li {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

@media (max-width: 640px) {
  .search-result__link,
  .search-popular__list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}