/* НефтеХимСырье — интерфейс: ссылка-пропуск, шапка-капсула, мега-меню, полноэкранное меню, кнопки, лоадер,
   форма запроса, подвал, карточка товара (общая для каталога и «похожих позиций»), появления.
   Химия только в лоадере «Цепь C₆» и в логотипе. Только токены из tokens.css. Владелец: UI. */

/* ======================================================================= пропуск */
.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: calc(var(--z-loader) + 1);
  display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--px-sm); border-radius: var(--r-pill);
  background: var(--amber); color: var(--bg); font-weight: 600; font-size: var(--fs-small); line-height: var(--lh-small);
  transform: translateY(calc(-100% - var(--s-5)));
  transition: transform var(--t-micro) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
.main:focus { outline: none; }

/* ======================================================================= логотип (финальный, раунд 4)
   Орсен 07.10: «лого не видно, увеличить»; в шапке — только знак (img/logo-mark.svg), в подвале — полный
   (img/logo-horizontal.svg). Знак в шапке 58 px (при капсуле 64, то есть до 1023, — 48), полный логотип в подвале 84 px (до 560 — 64).
   Не менять без Орсена. */
.ui-logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.ui-logo__img { display: block; height: 56px; width: auto; max-width: none; transition: opacity var(--t-hover) var(--ease-out); }
.ui-logo__img--mark { display: none; }
/* наведение — без свечения (Орсен 07.10): лёгкое приглушение */
@media (hover: hover) { .ui-logo:hover .ui-logo__img { opacity: .82; } }
.hdr__logo .ui-logo__img--full { display: none; }
/* знак в шапке (Орсен 10.10): видимая часть высотой --hdr-logo (40, как кнопка), поля до краёв капсулы — как у «Запросить цену».
   В logo-mark.svg вокруг знака поле под размытие подложки: сверху и снизу ~8, слева 8.99 из 389.07 единиц высоты (знак — 373.1).
   Картинка выше на эти поля. Слева хвост цепи — в самом низу, где капсула скруглена: знак вписан в пилюлю высотой
   --hdr-logo, концентричную капсуле, как кнопка (сдвиг на её полувысоту минус левое поле SVG) — до кривой края везде (H − 40) / 2 */
.hdr__logo .ui-logo__img--mark { display: block; height: calc(var(--hdr-logo) * 389.07 / 373.1); margin-left: calc(var(--hdr-logo) * (0.5 - 8.99 / 373.1)); /* optical; margin, а не translate — место учтено в раскладке (320) */ }
.ftr__brand .ui-logo__img--mark { display: none; }
/* полный логотип в подвале 48 (маленький подвал, Орсен 10.10; было 84 / 64). У SVG слева поле 50 из 481.55 единиц высоты под размытие подложки:
   сдвигаем картинку на него, чтобы хвост цепи стоял на линии текста панели (r1: был на 7–9 px правее). Сам знак не меняется */
.ftr__brand { --ftr-logo-h: 48px; }
.ftr__brand .ui-logo__img--full { display: block; height: var(--ftr-logo-h); translate: calc(var(--ftr-logo-h) * -50 / 481.55) 0; /* optical */ }

/* ======================================================================= шапка-капсула (SPACING.md §5)
   Ширина = контейнер: края капсулы совпадают с краями карточек и панелей. Верх 16, высота 72 (до 1023 — 64).
   Справа «пилюля в пилюле»: контролы 40, отступ сверху = справа = снизу = (H − 40) / 2, то есть 16 (12).
   Слева так же (Орсен 10.10): видимый знак 40, поля сверху, снизу и слева = полям кнопки. Свечений нет. --hdr-offset и --page-top — в tokens.css. */
/* шапка закреплена всегда (Орсен 08.10): при прокрутке не прячется; якоря встают под капсулу */
html { scroll-padding-top: var(--hdr-offset); }
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  padding-top: max(var(--hdr-top), env(safe-area-inset-top));
  pointer-events: none;
}
.hdr__capsule {
  pointer-events: auto; position: relative; isolation: isolate;
  width: min(100% - 2 * var(--gutter), var(--container)); height: var(--header-h); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  padding: 0 var(--hdr-pad-r) 0 var(--hdr-pad-l); border-radius: var(--r-pill);
}
/* стекло — на псевдоэлементе: у самой капсулы нет backdrop-filter, иначе стекло мега-панели не видит страницу */
.hdr__capsule::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--bg-2) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: background-color var(--t-reveal) var(--ease-out), border-color var(--t-reveal) var(--ease-out), opacity var(--t-micro);
}
.hdr.is-scrolled .hdr__capsule::before {
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.hdr__brand { justify-self: start; display: flex; align-items: center; min-width: 0; }
.hdr__actions { justify-self: end; display: flex; align-items: center; gap: var(--gap-row); }
.hdr__phone {
  display: inline-flex; align-items: center; min-height: var(--h-sm);
  font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink-2); /* телефон: +.02em допустимо (§13.4) */
  white-space: nowrap; transition: color var(--t-hover) var(--ease-out);
}
.hdr__phone:hover { color: var(--ink); }

/* ---- «Заявка · N»: список заявки (как корзина); без позиций скрыт (hidden ставит js/ui/header.js) */
.hdr__req {
  display: inline-flex; align-items: center; gap: var(--gap-icon); height: var(--h-sm); padding: 0 var(--px-sm);
  border-radius: var(--r-pill); border: 1px solid var(--amber-deep);
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  font-size: var(--fs-small); font-weight: 500; line-height: var(--lh-small); color: var(--ink); white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.hdr__req:hover { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: var(--amber); }
.hdr__req:active { background: var(--press-bg); }
.hdr__req-icon { width: var(--ico-sm); height: var(--ico-sm); flex: none; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hdr__req-dot { color: var(--muted); }
.hdr__req-n { min-width: 1ch; color: var(--amber-hi); }
.hdr__req:not([hidden]) { animation: ui-req-in var(--t-micro) var(--ease-out) both; }
/* позицию добавили: тон янтаря на миг гуще — без увеличения и свечения */
.hdr__req.is-bump, .menu__req.is-bump { animation: ui-req-bump var(--t-reveal) var(--ease-out); border-color: var(--amber); }
@keyframes ui-req-in { from { opacity: 0; } }
@keyframes ui-req-bump { 30% { background-color: color-mix(in srgb, var(--amber) 22%, transparent); } }

/* ---- навигация: пункты 40, зазор 4; наведение — фон-«бегунок» --hover-bg, без свечения */
.hdr__nav { position: relative; display: flex; align-items: center; gap: var(--s-1);
  translate: calc((var(--hdr-pad-r) - var(--hdr-pad-l)) / 2) 0; /* optical: при разных полях капсулы сдвиг на половину разницы ставит центр меню в центр капсулы (сейчас поля равны — 0) */ }
.nav__link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--gap-icon); height: var(--h-sm); padding: 0 var(--px-sm);
  border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); color: var(--ink-2); white-space: nowrap;
  transition: color var(--t-hover) var(--ease-out);
}
.nav__link:hover, .nav__item--mega:has(.is-open) > .nav__link { color: var(--ink); }
.nav__link[aria-current]::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: var(--r-round);
  background: var(--amber);
}
.nav__link[aria-current] { color: var(--ink); }
.nav__glider {
  position: absolute; top: 50%; left: 0; height: var(--h-sm); margin-top: calc(var(--h-sm) / -2); width: 0; z-index: 0;
  border-radius: var(--r-pill); pointer-events: none;
  background: var(--hover-bg);
  opacity: 0; transition: transform var(--t-micro) var(--ease-out), width var(--t-micro) var(--ease-out), opacity var(--t-hover) var(--ease-out);
}
.nav__glider.is-on { opacity: 1; }
.nav__item { position: static; display: flex; align-items: center; }
/* «Каталог» + стрелка подменю: одна пилюля 40 (бегунок меряет весь пункт) — подпись, 4, кнопка 32, отступ 4 = (40 − 32) / 2 */
.nav__item--mega > .nav__link { padding-right: var(--s-1); }
.nav__item--mega:hover > .nav__link { color: var(--ink); }
.nav__toggle {
  position: relative; z-index: 2; width: var(--h-xs); height: var(--h-xs); margin-right: var(--s-1); border-radius: var(--r-round);
  display: grid; place-items: center; color: var(--muted);
  transition: color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.nav__toggle:hover { color: var(--ink); background: var(--hover-bg); }
.nav__toggle:active { background: var(--press-bg); }
.nav__toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-micro) var(--ease-out); }
.nav__toggle[aria-expanded="true"] { color: var(--ink); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* тач-планшеты от 1024 (меню не в бургере): цель касания стрелки — 40 × 40, во всю высоту пилюли (видимый круг 32 тот же) */
@media (any-pointer: coarse) { .nav__toggle::before { content: ""; position: absolute; inset: calc(-1 * var(--s-1)); border-radius: var(--r-round); } }

/* без JS подменю не показываем — ссылка «Каталог» ведёт в каталог */
.nav__sub { display: none; }

/* ---- мега-меню: на 8 ниже капсулы, по её ширине (--mega-w ставит header.js), радиус 16, padding 24 (32 от 1024).
        Сверху строка-сводка (каталог · 65 позиций · 7 заводов · «Весь каталог»), под ней 5 плиток-разделов:
        номер и название, радиус 8, высота по содержимому. Числа позиций у разделов нет (Орсен 09.10) — только общее в сводке */
.hdr__nav.is-ready .nav__sub.mega {
  position: absolute; top: calc(100% + (var(--header-h) - var(--h-sm)) / 2 + var(--s-2)); left: 50%;
  width: var(--mega-w, min(100vw - 2 * var(--gutter), var(--container)));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  transform: translate3d(calc(-50% + var(--mega-x, 0px)), calc(-1 * var(--s-2)), 0);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--t-micro) var(--ease-out), opacity var(--t-micro) var(--ease-out), visibility 0s linear var(--t-micro);
}
/* мостик над панелью, чтобы курсор не «падал» в зазор */
.hdr__nav.is-ready .nav__sub.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--s-6); }
.hdr__nav.is-ready .nav__sub.mega.is-open {
  transform: translate3d(calc(-50% + var(--mega-x, 0px)), 0, 0);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform var(--t-micro) var(--ease-out), opacity var(--t-micro) var(--ease-out), visibility 0s;
}
.mega__intro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); min-height: var(--h-sm); }
.mega__fact { display: flex; align-items: baseline; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.mega__num { font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.mega__all { margin-left: auto; }
/* плитки — карточки с рамкой и padding 16, поэтому зазор между ними тоже 16 (SPACING §2: gap ≥ padding) */
.mega__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); align-content: start; }
.mega .nav__sublink {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-inner); border: 1px solid var(--line);
  color: var(--ink); transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.mega .nav__sublink:hover, .mega .nav__sublink:focus-visible { background: var(--surface-2); border-color: var(--line-2); }
.mega .nav__sublink:focus-visible { outline-offset: -2px; }
.mega .nav__sublink[aria-current] { background: var(--surface-2); border-color: var(--line-2); }
.mega .nav__sublink[aria-current] .mega__idx { color: var(--amber); }
.mega__idx { font-size: var(--fs-label); line-height: var(--lh-caption); letter-spacing: var(--track-label); color: var(--muted); }
/* название — 16/24, 500; место под две строки (2 × 24), чтобы плитки с переносом и без стояли ровно */
.mega__name { order: 2; min-height: calc(2 * var(--s-5)); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); text-wrap: balance; hyphens: manual; }
.mega__go {
  position: absolute; top: var(--s-4); right: var(--s-4); width: var(--ico-sm); height: var(--ico-sm); color: var(--ink-2);
  opacity: 0; transform: translateX(calc(-1 * var(--s-1))); transition: opacity var(--t-hover) var(--ease-out), transform var(--t-micro) var(--ease-out);
}
.mega__go svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mega .nav__sublink:hover .mega__go, .mega .nav__sublink:focus-visible .mega__go { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .hdr__nav.is-ready .nav__sub.mega { padding: var(--s-6); }
}

/* ---- бургер: кнопка-иконка 40, круг */
.hdr__burger {
  display: none; position: relative; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-round);
  background: var(--hover-bg);
  border: 1px solid var(--line-2);
  transition: background-color var(--t-hover) var(--ease-out);
}
.hdr__burger:hover { background: var(--press-bg); }
.hdr__burger i {
  position: absolute; left: var(--s-3); right: var(--s-3); height: 1.5px; border-radius: var(--r-pill); background: var(--ink);
  transition: transform var(--t-micro) var(--ease-out), opacity var(--t-hover);
}
.hdr__burger i:nth-of-type(1) { top: 15px; }
.hdr__burger i:nth-of-type(2) { top: 23px; right: var(--s-4); }
.hdr__burger[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(4px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] i:nth-of-type(2) { right: var(--s-3); transform: translateY(-4px) rotate(-45deg); }
/* тач: цели шапки 40 → поле касания 44 (невидимое, вид и шаг не меняются; 44 — минимум Apple HIG, не отступ):
   бургер, «Запросить цену», «Заявка · N», телефон, пункты меню на тач-планшетах от 1024. Соседей разделяет зазор ≥ 4 — поля не налезают */
@media (pointer: coarse) {
  .hdr__burger::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-round); }
  .hdr__req, .hdr__phone { position: relative; }
  .hdr__cta::after, .hdr__req::after, .hdr__phone::after, .nav__link::after { content: ""; position: absolute; inset: -2px 0; border-radius: var(--r-pill); }
}

/* ---- адаптив шапки
   Меню стоит ровно по центру капсулы при любом наборе действий (r2: «Заявка · 1» распирала правую колонку,
   меню уезжало на 41 влево). Правая колонка = (капсула − отступы − меню) / 2; действия в неё помещаются
   с зазором до меню не меньше 32 (16 сетки + 16 запаса):
   Меню: Главная · Каталог ▾ · О компании · Контакты (≈ 450; «Главная» — Орсен 09.10: «многие не понимают куда нажимать»).
   — от 1280: телефон + «Запросить цену»; с позициями в заявке телефон уступает место «Заявка · N»
     (телефон остаётся в подвале, на «Контактах» и в полноэкранном меню);
   — 1024–1279: телефона нет (с ним на 1200–1279 до меню 20–26: телефон читался пятым пунктом меню);
     «Заявка · N» сжимается до значка и числа (как и до 420), слово «Заявка» остаётся для скринридера;
   — до 1023 меню в бургере (ступень 1024, как высота капсулы 64): на 961–992 «Заявка» с «Запросить цену» подходили к меню ближе 32;
     421–1023 места хватает, «Заявка · N» целиком. */
@media (max-width: 1279px) { .hdr__phone { display: none; } }
/* аудит 09.10 просил телефон рядом с «Заявка · N» от 1440 — замер: капсула не шире --container (1280) на любой ширине окна,
   телефон 139 + «Заявка · 1» + «Запросить цену» распирают правую колонку, меню уезжает из центра, до меню 20 (< 32). Не вводим */
.hdr__capsule:has(.hdr__req:not([hidden])) .hdr__phone { display: none; }
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 420px) {
  .hdr__req-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr__req-dot { display: none; }
}
@media (max-width: 1023px) {
  .hdr__capsule { grid-template-columns: 1fr auto; }
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
}
@media (max-width: 600px) {
  .hdr .hdr__cta { display: none; }
  .hdr__actions { gap: var(--s-2); }
}
@media (max-width: 420px) {
  .hdr__req { padding: 0 var(--px-xs); }
}

/* меню открыто: капсула прозрачна, остаётся над меню */
.menu-open .hdr { z-index: calc(var(--z-menu) + 1); transform: none; }
.menu-open .hdr__capsule::before { opacity: 0; }
.menu-open .hdr .hdr__cta { visibility: hidden; }
html.menu-open { overflow: hidden; }

/* ======================================================================= хлебные крошки: поле касания (тач)
   Вид крошек — css/pages.css и css/product.css; здесь только невидимое поле касания на всех страницах (на товаре pages.css нет).
   Строка 16 → поле 44 по высоте (16 + 2 × 14; 44 — минимум Apple HIG, это не отступ, а невидимая зона), по 4 по бокам.
   Ссылка и строка не меняются: крошки → H1 по-прежнему 24. Межстрочный зазор 24 — при переносе поля соседних строк почти стыкуются */
@media (pointer: coarse) {
  ol.crumbs { row-gap: var(--s-5); }
  .crumbs .crumbs__link { position: relative; }
  .crumbs .crumbs__link::after { content: ""; position: absolute; inset: -14px calc(-1 * var(--s-1)); }
}

/* ======================================================================= полноэкранное меню (до 1023) */
.menu {
  --ox: calc(100% - 40px); --oy: 44px;
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--bg); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0;
  transition: opacity var(--t-micro) var(--ease-out);
}
.menu.is-open { opacity: 1; }
/* полоса под капсулой (до --hdr-offset): прокрученные пункты уходят под фон, а не под знак и крестик (окно ниже ~770, масштаб 200 %).
   Липкая, в потоке нулевой высоты: раскладку меню не сдвигает */
.menu::before {
  content: ""; position: sticky; top: 0; z-index: 1; display: block;
  height: var(--hdr-offset); margin-bottom: calc(-1 * var(--hdr-offset));
  background: linear-gradient(to bottom, var(--bg) calc(100% - var(--s-2)), transparent);
  pointer-events: none;
}
.menu__bg { display: none; }
.menu__inner {
  position: relative; min-height: 100%;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--page-top) var(--gutter) max(var(--s-5), env(safe-area-inset-bottom));
  width: min(100%, 720px); margin-inline: auto;
}
.menu__nav { display: flex; flex-direction: column; counter-reset: menu; }
.menu__link {
  display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) 0; /* 32 + 2 × 8 = 48, как подпункты (аудит 09.10: было 40 вплотную) */
  font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-h2); letter-spacing: var(--track-h2); color: var(--ink);
}
.menu__link::before {
  counter-increment: menu; content: counter(menu, decimal-leading-zero);
  flex: none; min-width: var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-caption); letter-spacing: var(--track-label); color: var(--muted);
}
.menu__link[aria-current]::before { color: var(--amber); }
.menu__mask { display: inline-block; vertical-align: top; }
.menu__txt { display: inline-block; opacity: 0; transform: translateY(var(--s-2)); transition: opacity var(--t-hover), transform var(--t-hover); }
.menu.is-open .menu__txt { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out) 80ms, transform var(--t-reveal) var(--ease-out) 80ms; }
/* разделы каталога — одна колонка: 5 строк по 48, линии во всю ширину (w1: в две колонки длинное имя ломалось, пятый пункт стоял один).
   Слева 32 = слот номера 24 + зазор 8 у .menu__link: подписи разделов стоят по тексту «Каталог» (токен, без суммы 36 вне шкалы) */
.menu__sub { display: grid; grid-template-columns: 1fr; padding: var(--s-2) 0 var(--s-4) var(--s-6); }
.menu__sublink { display: flex; align-items: center; min-height: var(--h-md); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); border-bottom: 1px solid var(--line); transition: color var(--t-hover) var(--ease-out); }
.menu__sublink[aria-current] { color: var(--ink); }
.menu__sublink:hover { color: var(--ink); }
.menu__foot { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.menu__foot > * { opacity: 0; transform: translateY(var(--s-2)); transition: opacity var(--t-hover), transform var(--t-hover); }
.menu.is-open .menu__foot > * { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out) 120ms, transform var(--t-reveal) var(--ease-out) 120ms; }
.menu__phone { font-family: var(--font-mono); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.menu__mail { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
/* тач: телефон 28 и почта 24 → поле касания 44 (как .preq__contacts a); раскладка подвала меню не меняется */
@media (pointer: coarse) {
  .menu__phone, .menu__mail { position: relative; }
  .menu__phone::after, .menu__mail::after { content: ""; position: absolute; }
  .menu__phone::after { inset: calc(-1 * var(--s-2)) 0; }
  .menu__mail::after { inset: -10px 0; }
}
.menu__foot .mbtn { margin-top: var(--s-2); }
.menu__note { font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
/* пункт «Список заявки · N» — пилюля 48 */
.menu__req {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--h-md); padding: 0 var(--px-md); margin-bottom: var(--s-1);
  border-radius: var(--r-pill); border: 1px solid var(--amber-deep);
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); color: var(--ink);
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.menu__req:hover { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: var(--amber); }
.menu__req-n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-pill);
  background: var(--amber); color: var(--bg); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500;
}
.menu__req svg { width: var(--ico-md); height: var(--ico-md); margin-left: auto; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================= Motion Button (SPACING.md §4)
   Круг-«атом» диаметром H у левого края, стрелка в его центре, подпись через gap; padding-left = H + gap.
   48 (основная) · 40 (--sm: шапка, карточки) · 56 (--lg: только первый экран). Наведение: круг растекается в заливку
   (выбор Орсена), стрелка сдвигается на 4 px. Без свечения, «магнита» и пружины. */
.mbtn {
  --h: var(--h-md); --pad: var(--px-md); --gap: var(--s-3);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; height: var(--h);
  padding: 0 var(--pad) 0 calc(var(--h) + var(--gap));
  border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); letter-spacing: 0;
  color: var(--ink); white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: scale var(--t-hover) var(--ease-out);
}
button.mbtn { border: 0; background: none; }
/* дорожка-пилюля: еле заметная, чтобы было видно касаемую область */
.mbtn::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  border: 1px solid var(--line-2);
  transition: border-color var(--t-hover) var(--ease-out);
}
/* «атом»: янтарный круг, при наведении растекается в фон всей кнопки */
.mbtn__circle {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--amber);
  clip-path: inset(0 calc(100% - var(--h)) 0 0 round var(--r-pill));
  transition: clip-path var(--t-reveal) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.mbtn__arrow {
  position: absolute; left: calc(var(--h) / 2 - var(--ico-md) / 2); top: 50%; width: var(--ico-md); height: var(--ico-md); margin-top: calc(var(--ico-md) / -2);
  fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-micro) var(--ease-out), opacity var(--t-hover);
}
.mbtn__label { position: relative; transition: color var(--t-micro) var(--ease-out); }
.mbtn__spin { position: absolute; left: calc(var(--h) / 2 - 11px); top: 50%; width: 22px; height: 22px; margin-top: -11px; overflow: visible; opacity: 0; }
.mbtn__spin circle { fill: none; stroke: var(--bg); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .28 .72; transform-origin: center; transform-box: fill-box; }

@media (hover: hover) {
  .mbtn:hover .mbtn__circle { clip-path: inset(0 0 0 0 round var(--r-pill)); }
  .mbtn:hover .mbtn__label { color: var(--bg); }
  .mbtn:hover .mbtn__arrow { transform: translateX(var(--s-1)); }
  .mbtn:hover::before { border-color: transparent; }
}
.mbtn:focus-visible .mbtn__circle, .mbtn.is-hover .mbtn__circle { clip-path: inset(0 0 0 0 round var(--r-pill)); }
.mbtn:focus-visible .mbtn__label, .mbtn.is-hover .mbtn__label { color: var(--bg); }
.mbtn:focus-visible .mbtn__arrow, .mbtn.is-hover .mbtn__arrow { transform: translateX(var(--s-1)); }
.mbtn:active, .mbtn.is-pressed { scale: .98; }
.mbtn:active .mbtn__circle, .mbtn.is-pressed .mbtn__circle { clip-path: inset(0 0 0 0 round var(--r-pill)); background: var(--amber-hi); }
.mbtn:active .mbtn__label, .mbtn.is-pressed .mbtn__label { color: var(--bg); }

.mbtn--sm { --h: var(--h-sm); --pad: var(--px-sm); --gap: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.mbtn--sm .mbtn__arrow { width: var(--ico-sm); height: var(--ico-sm); margin-top: calc(var(--ico-sm) / -2); left: calc(var(--h) / 2 - var(--ico-sm) / 2); }
.mbtn--lg { --h: var(--h-lg); --pad: var(--px-lg); --gap: var(--s-3); font-size: var(--fs-body); }
/* во всю ширину — подпись по центру кнопки: справа тот же H + gap, что слева под круг, поэтому подпись на одной оси
   с подписью .gbtn под ней (аудит 09.10: одна кнопка на сайте — одно поведение; так же стоят hero главной, первый экран
   товара и «О компании», подвал паспорта). Так же растягиваются кнопка формы на телефоне и «Запросить цену» в подвале < 640 */
.mbtn--wide { width: 100%; justify-content: center; padding-right: calc(var(--h) + var(--gap)); }
/* во всю ширину только на телефоне (< 640): кнопки первого экрана главной, товара и «О компании» встают столбцом */
@media (max-width: 639.98px) { .mbtn--wide-phone { width: 100%; justify-content: center; padding-right: calc(var(--h) + var(--gap)); } }
/* на светлом */
.mbtn--light { color: var(--bg); }
.mbtn--light::before { border-color: color-mix(in srgb, var(--bg) 18%, transparent); }
.mbtn--light .mbtn__circle { background: var(--bg); }
.mbtn--light .mbtn__arrow { stroke: var(--amber); }
@media (hover: hover) { .mbtn--light:hover .mbtn__label { color: var(--ink); } }
.mbtn--light:focus-visible .mbtn__label, .mbtn--light.is-hover .mbtn__label, .mbtn--light:active .mbtn__label { color: var(--ink); }
.mbtn--light:active .mbtn__circle { background: var(--surface-2); }

/* отправка: вместо стрелки — кольцо загрузки */
.mbtn.is-loading, .mbtn[aria-disabled="true"] { cursor: progress; }
.mbtn.is-loading .mbtn__circle { clip-path: inset(0 calc(100% - var(--h)) 0 0 round var(--r-pill)); background: var(--amber); }
.mbtn.is-loading .mbtn__label { color: var(--ink-2); }
.mbtn.is-loading .mbtn__arrow { opacity: 0; transform: none; }
.mbtn.is-loading .mbtn__spin { opacity: 1; }
.mbtn.is-loading .mbtn__spin circle { animation: ui-spin .9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(1turn); } }

/* ======================================================================= кнопка-призрак (вторичная)
   48 · 24/24 · gap 8 (--sm: 40 · 16/16). Наведение: фон --hover-bg и рамка светлее; стрелка сдвигается вбок на 4 px. */
.gbtn {
  display: inline-flex; align-items: center; gap: var(--gap-icon); height: var(--h-md); padding: 0 var(--px-md);
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); color: var(--ink); white-space: nowrap;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
button.gbtn { font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); }
.gbtn__icon {
  width: var(--ico-md); height: var(--ico-md); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-micro) var(--ease-out);
}
@media (hover: hover) {
  .gbtn:hover { border-color: var(--muted); background: var(--hover-bg); }
  .gbtn:hover .gbtn__icon { transform: translateX(var(--s-1)); }
}
.gbtn.is-hover { border-color: var(--muted); background: var(--hover-bg); }
.gbtn.is-hover .gbtn__icon, .gbtn:focus-visible .gbtn__icon { transform: translateX(var(--s-1)); }
.gbtn:active { background: var(--press-bg); }
.gbtn--sm { height: var(--h-sm); padding: 0 var(--px-sm); font-size: var(--fs-small); line-height: var(--lh-small); }
button.gbtn--sm { font-size: var(--fs-small); line-height: var(--lh-small); }
.gbtn--sm .gbtn__icon { width: var(--ico-sm); height: var(--ico-sm); }

/* ----------------------------------------------------------------------- заливка при наведении (Орсен 08.10)
   «Как у кнопки в шапке»: тот же приём, что у .mbtn — янтарь растекается слева во всю пилюлю (clip-path, --t-reveal,
   --ease-out), подпись и иконки → --bg, рамка → --amber. Только у пилюль-ссылок: ссылки-призраки a.gbtn
   («Запросить цену ↗», «Каталог ↗», «Весь каталог · 65», «Весь раздел»), разделы под hero главной (.hero__cat, hero.css),
   «Паспорт PDF» на «О компании» (.ab-pass__pdf). Кнопки-действия button.gbtn («Сбросить») — прежнее наведение.
   Без свечения, подъёма и масштаба; фокус — общая обводка 2px amber; на тач-экранах наведения нет. */
:is(a.gbtn, .hero__cat, .ab-pass__pdf) {
  position: relative; isolation: isolate;
  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out), color var(--t-micro) var(--ease-out);
}
:is(a.gbtn, .hero__cat, .ab-pass__pdf)::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--amber);
  clip-path: inset(0 100% 0 0 round var(--r-pill));
  transition: clip-path var(--t-reveal) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
@media (hover: hover) {
  :is(a.gbtn, .hero__cat, .ab-pass__pdf):hover { color: var(--bg); border-color: var(--amber); background-color: transparent; }
  :is(a.gbtn, .hero__cat, .ab-pass__pdf):hover::before { clip-path: inset(0 0 0 0 round var(--r-pill)); }
}
:is(a.gbtn, .hero__cat, .ab-pass__pdf):active { color: var(--bg); border-color: var(--amber-hi); background-color: transparent; }
:is(a.gbtn, .hero__cat, .ab-pass__pdf):active::before { clip-path: inset(0 0 0 0 round var(--r-pill)); background: var(--amber-hi); }

/* ======================================================================= лоадер «Цепь C₆» (утверждён) */
.ui-loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: none; place-items: center;
  background: var(--bg-2);
}
html.ui-loading .ui-loader, .ui-loader.is-out { display: grid; }
html.ui-loading { overflow: hidden; }
.ui-loader__inner { display: grid; justify-items: center; gap: var(--s-4); }
.nhs-loader { width: 220px; height: 80px; overflow: visible; }
.nhs-loader .bond {
  fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: nhs-bond 3s ease-in-out infinite;
}
.nhs-loader .atom {
  fill: var(--amber);
  transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: nhs-atom 3s ease-in-out infinite;
}
.nhs-loader .a1 { animation-delay: 0s; }
.nhs-loader .b1 { animation-delay: .12s; }
.nhs-loader .a2 { animation-delay: .3s; }
.nhs-loader .b2 { animation-delay: .42s; }
.nhs-loader .a3 { animation-delay: .6s; }
.nhs-loader .b3 { animation-delay: .72s; }
.nhs-loader .a4 { animation-delay: .9s; }
.nhs-loader .b4 { animation-delay: 1.02s; }
.nhs-loader .a5 { animation-delay: 1.2s; }
.nhs-loader .b5 { animation-delay: 1.32s; }
.nhs-loader .a6 { animation-delay: 1.5s; }
@keyframes nhs-bond {
  0%   { stroke-dashoffset: 36; opacity: 1; }
  15%  { stroke-dashoffset: 0; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  85%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes nhs-atom {
  0%   { transform: scale(0); opacity: 1; }
  8%   { transform: scale(1.3); }
  14%  { transform: scale(1); }
  70%  { transform: scale(1); opacity: 1; }
  85%, 100% { transform: scale(1); opacity: 0; }
}
/* уход: цепь достраивается… */
.nhs-loader.is-complete .bond { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .32s var(--ease-out), opacity .2s; }
.nhs-loader.is-complete .atom { transform: scale(1); opacity: 1; transition: transform .38s var(--ease-spring), opacity .2s; }
.nhs-loader.is-complete { filter: drop-shadow(0 0 10px var(--glow)); transition: filter .4s; }
/* …увеличивается и гаснет, фон растворяется */
.ui-loader.is-out { opacity: 0; pointer-events: none; transition: opacity .7s var(--ease-io) .18s; }
.ui-loader.is-out .ui-loader__inner { transform: scale(1.32); opacity: 0; filter: blur(2px); transition: transform .9s var(--ease-io), opacity .55s var(--ease-io) .1s, filter .6s; }

/* страница всплывает из-под лоадера: сдвиг 16, 400 мс (SPACING.md §9) */
html.ui-loading .main, html.ui-loading .ftr { opacity: 0; transform: translateY(var(--s-4)); }
html.ui-loading .hdr__capsule { opacity: 0; transform: translateY(calc(-1 * var(--s-2))); }
html.ui-entering .main, html.ui-entering .ftr { transition: opacity var(--t-reveal) var(--ease-out) .22s, transform var(--t-reveal) var(--ease-out) .22s; }
html.ui-entering .hdr__capsule { transition: opacity var(--t-reveal) var(--ease-out) .3s, transform var(--t-reveal) var(--ease-out) .3s; }

/* ======================================================================= форма запроса
   Понимает разметку всех страниц: поле .rform__field (широкое --wide/--full), ошибка .rform__error / .rform__err,
   согласие .rform__consent | .rform__field--check > input.rform__check, кнопка в .rform__foot | .rform__actions | div.rform__submit.
   Поля — пилюли 48 (16/16), textarea — радиус 16, чекбокс 24 · радиус 8. Фокус — обводка 2px amber, без ореола. */
.rform { position: relative; --field-h: var(--h-md); }
.rform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-field) var(--s-4); }
.rform__field { display: flex; flex-direction: column; gap: var(--gap-label); min-width: 0; }
.rform__field--full, .rform__field--wide { grid-column: 1 / -1; }
/* подпись поля — строчными Plex Sans 14/20 --ink-2, без капса и разрядки (SPACING.md §13.5) */
.rform__label {
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); color: var(--ink-2);
  transition: color var(--t-hover) var(--ease-out);
}
.rform__req { color: var(--amber); }
.rform__input {
  width: 100%; height: var(--field-h); padding: 0 var(--px-field);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.rform__input.t-mono { font-family: var(--font-mono); }
textarea.rform__input, .rform__textarea {
  height: auto; min-height: 112px; max-height: 288px; padding: var(--s-3) var(--px-field); line-height: var(--lh-body);
  border-radius: var(--r-card);
  /* без ручки браузера в углу (r1: квадратная деталь на скруглении 16): поле само растёт по тексту до 288, дальше прокрутка */
  resize: none; field-sizing: content; overflow-y: auto;
}
.rform__input::placeholder { color: var(--muted); }   /* контраст плейсхолдера на --surface-2 ≥ 4.5:1 (WCAG 1.4.3) */
@media (hover: hover) { .rform__input:hover { border-color: var(--muted); } }

.rform__input:focus-visible, .rform__input:focus {
  outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--line-2);
  background: color-mix(in srgb, var(--surface-2) 85%, var(--bg));
}
.rform__field:focus-within > .rform__label { color: var(--ink); }
/* выпадающий список: слот стрелки 48 */
.rform__select-wrap { position: relative; display: block; }
.rform__select-wrap::after {
  content: ""; position: absolute; right: var(--s-5); top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg);
  transition: border-color var(--t-hover) var(--ease-out);
}
.rform__select-wrap:focus-within::after { border-color: var(--ink-2); }
select.rform__input, .rform__select { padding-right: var(--h-md); cursor: pointer; text-overflow: ellipsis; }
.rform__select option, .rform__select optgroup { background: var(--surface-2); color: var(--ink); }
/* ---- выпадающий список сайта (js/ui/select.js; Орсен 09.10: «дропдауны… какой-то виндус 2000»). Поле — .rform__input 48 (пилюля),
        стрелка 16 в слоте 48 справа. Мышь: кнопка-поле + панель-список (surface, рамка --line-2, радиус 16, отступ 8; пункты 40, радиус 8 = 16 − 8;
        наведение и клавиатурный пункт — фон --hover-bg; выбранный — янтарная галочка, без свечения и тени). Тач — нативный select в том же поле */
.sel { position: relative; display: block; min-width: 0; }
.sel__arrow {
  position: absolute; right: var(--s-4); top: 50%; width: var(--ico-sm); height: var(--ico-sm); translate: 0 -50%; pointer-events: none;
  fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: rotate var(--t-micro) var(--ease-out), stroke var(--t-hover) var(--ease-out);
}
.sel:focus-within .sel__arrow, .sel.is-open .sel__arrow { stroke: var(--ink-2); }
.sel.is-open .sel__arrow { rotate: 180deg; }
.sel > select.rform__input { padding-right: var(--h-md); }
.sel--custom > select { display: none; }
.sel__btn { display: flex; align-items: center; padding-right: var(--h-md); text-align: left; cursor: pointer; }
.sel__btn[aria-expanded="true"] { border-color: var(--muted); }
.sel__btn:disabled { opacity: .4; cursor: default; }
.sel__btn.is-placeholder .sel__val { color: var(--muted); }
.sel__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__pop {
  position: fixed; z-index: calc(var(--z-modal) + 2); display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  opacity: 0; translate: 0 calc(-1 * var(--s-1));
  transition: opacity var(--t-micro) var(--ease-out), translate var(--t-micro) var(--ease-out);
}
.sel__pop.is-up { translate: 0 var(--s-1); }
.sel__pop.is-open { opacity: 1; translate: 0 0; }
.sel__pop.is-still { transition: none; }
.sel__opt {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--h-sm); padding: var(--s-2); border-radius: var(--r-inner);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); cursor: pointer; user-select: none;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.sel__opt.is-active { background: var(--hover-bg); color: var(--ink); }
.sel__opt:active { background: var(--press-bg); }
.sel__opt[aria-selected="true"] { color: var(--ink); font-weight: var(--fw-medium); }
.sel__opt[aria-disabled="true"] { opacity: .4; cursor: default; }
.sel__t { min-width: 0; }
.sel__check { flex: none; width: var(--ico-sm); height: var(--ico-sm); fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.sel__opt[aria-selected="true"] .sel__check { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sel__pop, .sel__arrow { transition: none; } }
/* ошибки */
.rform__field.is-invalid .rform__input, .rform__field.is-group-invalid .rform__input { border-color: var(--err); }
.rform__field.is-invalid > .rform__label { color: var(--err); }
.rform__error, .rform__err { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--err); }
.rform__error:empty, .rform__err:empty { display: none; }
.rform__hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); transition: color var(--t-hover) var(--ease-out); }
.rform__grid > .rform__hint { grid-column: 1 / -1; margin-top: calc(-1 * var(--s-3)); }
.rform__hint.is-error { color: var(--err); }

/* согласие: чекбокс 24, до подписи 12 */
.rform__consent, .rform__field--check, .rform__check-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: start; margin-top: var(--gap-field);
}
.rform__grid > .rform__field--check { margin-top: 0; }
.rform__consent > label, .rform__field--check > label, .rform__check-label { font-size: var(--fs-small); color: var(--ink-2); line-height: var(--lh-small); cursor: pointer; }
.rform__consent a, .rform__field--check a, .rform__check-label a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color var(--t-hover) var(--ease-out); }
.rform__consent a:hover, .rform__field--check a:hover, .rform__check-label a:hover { text-decoration-color: var(--ink-2); }
/* тач: ссылка в согласии (строка 18) → поле касания 44 по высоте (18 + 2 × 13), по бокам 0 — флажок не перекрывает */
@media (pointer: coarse) {
  .rform__consent a, .rform__field--check a, .rform__check-label a { position: relative; }
  .rform__consent a::after, .rform__field--check a::after, .rform__check-label a::after { content: ""; position: absolute; inset: -13px 0; }
}
.rform__consent > .rform__error, .rform__field--check > .rform__error, .rform__consent > .rform__err { grid-column: 2; }
input.rform__check, .rform__consent > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0; width: 24px; height: 24px; flex: none;
  border: 1px solid var(--muted); border-radius: var(--r-inner); background: var(--surface-2);   /* рамка ≥ 3:1 к фону (WCAG 1.4.11) */
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
input.rform__check::after, .rform__consent > input[type="checkbox"]::after {
  content: ""; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) scale(0); transition: transform var(--t-hover) var(--ease-out);
}
@media (hover: hover) { input.rform__check:hover { border-color: var(--ink-2); } }
input.rform__check:checked, .rform__consent > input[type="checkbox"]:checked { background: var(--amber); border-color: var(--amber); }
input.rform__check:checked::after, .rform__consent > input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.is-invalid > input.rform__check { border-color: var(--err); }

/* список заявки над полями (строит js/ui/form.js): вложен в панель формы — радиус 8, нейтральная рамка */
.rform__cart {
  margin-bottom: var(--gap-field); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-inner);
  background: var(--surface);
}
.rform__cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); border-bottom: 1px solid var(--line);
}
.rform__cart-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.rform__cart-n { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); }
.rform__cart-clear {
  display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 var(--px-xs); border-radius: var(--r-pill);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); transition: color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.rform__cart-clear:hover { color: var(--ink); background: var(--hover-bg); }
.rform__cart-list { list-style: none; margin: 0; padding: var(--s-1) 0; max-height: 228px; overflow-y: auto; overscroll-behavior: contain; }
.rform__cart-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 var(--s-3); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); }
.rform__cart-item + .rform__cart-item { border-top: 1px solid var(--line); }
.rform__cart-name { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--ink); }
a.rform__cart-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--t-hover) var(--ease-out); }
a.rform__cart-name:hover { text-decoration-color: var(--ink-2); }
.rform__cart-plant { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.rform__cart-x {
  display: grid; place-items: center; width: var(--h-xs); height: var(--h-xs); border-radius: var(--r-round); color: var(--muted);
  transition: color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.rform__cart-x:hover { color: var(--ink); background: var(--hover-bg); }
.rform__cart-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* форма товара: позиция страницы — первой строкой, вместо «×» пометка «эта позиция»; высота строки — как у строк с «×» (32 + 2 × 4) */
.rform__cart-item--current { min-height: calc(var(--h-xs) + 2 * var(--s-1)); padding-right: var(--s-4); }
.rform__cart-mark { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); white-space: nowrap; }
.rform__cart-note { margin: 0; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
/* тач: «×» и «Очистить» 32 → поле 44 (32 + 2 × 6), название 20 → 44 (20 + 2 × 12) — без смены вида, как .rq-item__x (pages.css);
   между названием и «×» зазор колонки --s-3 и строка завода, поля не сходятся */
@media (pointer: coarse) {
  .rform__cart-x, .rform__cart-clear, .rform__cart-name { position: relative; }
  .rform__cart-x::after, .rform__cart-clear::after { content: ""; position: absolute; inset: -6px; }
  a.rform__cart-name::after { content: ""; position: absolute; inset: calc(-1 * var(--s-3)) calc(-1 * var(--s-1)); }
}

/* ловушка для ботов */
.rform__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* кнопка и статус */
.rform__foot, .rform__actions, div.rform__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.rform__note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.rform__status { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.rform__status:empty { display: none; }
.rform > .rform__status { margin-top: var(--s-4); }
.rform__status[data-kind="error"] {
  flex-basis: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-inner);
  border: 1px solid color-mix(in srgb, var(--err) 45%, transparent);
  background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--ink);
}

/* отправка и успех */
.rform[data-state="sending"] .rform__grid, .rform[data-state="sending"] .rform__consent { opacity: .55; pointer-events: none; transition: opacity var(--t-hover); }
.rform.is-done > :not(.rform__done):not(.corner) { display: none !important; }
.rform__done {
  display: grid; justify-items: start; gap: var(--s-4);
  padding: var(--s-6); border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
}
.rform__done[hidden] { display: none; }
.rform__done:focus, .rform__done-title:focus { outline: none; }
.rform__done-title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); letter-spacing: var(--track-h3); color: var(--ink); text-wrap: balance; }
.rform__done p:not(.rform__done-title) { color: var(--ink-2); max-width: var(--measure-card); text-wrap: pretty; }
.rform__done-mark { width: 48px; height: 48px; overflow: visible; }
.rform__done-mark circle, .rform__done-mark path { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rform__done-mark circle { stroke-width: 1.5; opacity: .55; }
.rform.is-done .rform__done-mark circle { animation: ui-done-draw var(--t-reveal) var(--ease-out) .05s forwards; }
.rform.is-done .rform__done-mark path { animation: ui-done-draw var(--t-micro) var(--ease-out) .35s forwards; }
@keyframes ui-done-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 640px) {
  .rform__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .rform__grid > .rform__hint { margin-top: calc(-1 * var(--s-2)); }
  .rform .mbtn[type="submit"] { width: 100%; justify-content: center; padding-right: calc(var(--h) + var(--gap)); } /* как .mbtn--wide */
  .rform__foot, .rform__actions, div.rform__submit { gap: var(--s-4); }
  .rform__done { padding: var(--s-5); }
}

/* ======================================================================= две дуги «( )»: верх страницы ⌒ и подвал ⌣
   Орсен 08.10: «на главной верно… две большие — так (    )»; ≈21:15: «возьми полусферы с главной, размеры и т. д., всё 1 в 1
   на каждой странице, только на главной от мыши пузырь двигаться должен — единственное отличие».
   • Верх: на главной — «планета» hero (css/hero.css, .hero__horizon); на внутренних страницах — её копия 1 в 1 в шапке .pcap
     (чанк ui.pagecap, правила ниже: те же слои, радиус, кромка, свечение, блик; дуга ⌒, пузыри над ней — шейдер hero).
   • Низ: подвал — купол .dome (чанк ui.footer): дуга ⌣ над подвалом, пузыри под ней. Один на всех страницах.
   Геометрия купола подвала (:root):
   --dm-r    радиус «планеты» подвала;
   --dm-apex от вершины дуги до верха подвала (64 → 96 с 640, ступенями, без vw);
   --dm-pad  место со стороны пузырей для свечения; --dm-over — концы дуги за краем полосы (там кромка гаснет маской);
   --dm-sag-e прогиб дуги подвала у края экрана (CSS-тригонометрия: r − √(r² − c²), без JS — раскладка не прыгает).
   Геометрия верха внутренних страниц (:root) — значения hero.css, менять вместе с ними:
   --hz-r    радиус «планеты» hero (≥ 1025: max(1300, 125vw); 761–1024: max(1100, 130vw); ≤ 760: 118vw);
   --hz-pad  запас над дугой под свечение (280; ≤ 760: 200);
   --hz-sag  прогиб дуги hero у края контейнера; --hz-sag-e — у края экрана;
   --cap-lift текст шапки → вершина дуги (< 640: 24; 640–1023: 32; ≥ 1024: 64 — свечение дуги не ложится на текст, как на главной);
   --cap-gap отступ «текст шапки → содержимое» под дугой: --cap-lift + прогиб у края контейнера + --cap-tail (16; ≥ 1024: 24) до содержимого,
             вверх до кратного 4 (SPACING.md §3, исключение для страниц с дугой). Без CSS-тригонометрии — ступени 112 / 144 / 208. */
:root {
  --dm-r: max(900px, 125vw);
  --dm-apex: var(--s-8);
  --dm-pad: 300px;
  --dm-over: 300px;
  --dm-cy: calc(var(--dm-over) + var(--dm-apex) - var(--dm-r));   /* центр окружности в слое купола */
  --dm-sag-e: 64px;                                                  /* прогиб у края экрана */
  --hz-r: 118vw;
  --hz-pad: 200px;
  --hz-c: min(50vw - var(--gutter), var(--container) / 2);           /* край контейнера — от центра дуги */
  --hz-sag: 40px;
  --hz-sag-e: 48px;
  --cap-lift: var(--s-5);                                            /* < 640 компактнее (Орсен 09.10: «огромная пустая область» на телефоне) */
  --cap-tail: var(--s-4);                                            /* кромка у края контейнера → содержимое */
  --cap-gap: var(--s-9);
}
@media (min-width: 640px) { :root { --dm-apex: var(--s-9); --dm-sag-e: 128px; --hz-sag: 72px; --hz-sag-e: 96px; --cap-lift: var(--s-6); --cap-gap: var(--s-10); } }
@media (min-width: 761px) { :root { --hz-r: max(1100px, 130vw); --hz-pad: 280px; } }
@media (min-width: 1024px) { :root { --dm-sag-e: 160px; --hz-sag: 120px; --hz-sag-e: 200px; --cap-lift: var(--s-8); --cap-tail: var(--s-5); --cap-gap: calc(var(--s-10) + var(--s-9) - var(--s-4)); } }
@media (min-width: 1025px) { :root { --hz-r: max(1300px, 125vw); } }
@media (max-width: 760px) { :root { --dm-pad: 220px; } }
@supports (width: round(up, calc(1px * sqrt(cos(atan2(1px, 2px)))), 4px)) {
  :root {
    --dm-sag-e: calc(var(--dm-r) - var(--dm-r) * sqrt(cos(2 * atan2(50vw, var(--dm-r)))) / cos(atan2(50vw, var(--dm-r))));
    --hz-sag: calc(var(--hz-r) - var(--hz-r) * sqrt(cos(2 * atan2(var(--hz-c), var(--hz-r)))) / cos(atan2(var(--hz-c), var(--hz-r))));
    --hz-sag-e: calc(var(--hz-r) - var(--hz-r) * sqrt(cos(2 * atan2(50vw, var(--hz-r)))) / cos(atan2(50vw, var(--hz-r))));
    --cap-gap: round(up, var(--cap-lift) + var(--hz-sag) + var(--cap-tail), var(--s-1));
  }
}
/* низкое окно (телефон боком): ступени выше берутся по ширине, а высоты нет — подъём и хвост как < 640
   (аудит 09.10: на 844×390 под шапкой каталога 124 = 32 % окна). Радиус дуги не меняется — он 1 в 1 с главной */
@media (max-height: 500px) { :root { --cap-lift: var(--s-5); --cap-tail: var(--s-4); } }

/* ---- купол: свечение со стороны пузырей, тёмное тело «планеты», раскалённая кромка, блик в вершине.
   Слой — в координатах подвала: центр окружности над слоем, вершина дуги на --dm-over + --dm-apex от верха слоя,
   край полосы с шейдером — на --dm-over. Пока подвал въезжает в экран, кромка
   прорисовывается от центра к краям и разгорается: --dm-p (0..1) на .dome (ставит fx/liquid.js; без JS и при reduced-motion — 1).
   Концы дуги выходят за край полосы (кромка и свечение там гаснут маской), поэтому края полосы не видно: холст страницы
   переходит в тело «планеты» без шва. Тело обрезано по краю полосы (clip-path) — содержимое соседней секции не закрывает. */
.dome {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  height: calc(var(--dm-over) + var(--dm-apex) + var(--dm-pad));
}
.dome > * { position: absolute; inset: 0; }
/* тело — чистый холст (шейдер за дугой не виден); янтарный отсвет изнутри кромки — в слое кромки, под маской */
.dome__body {
  /* --ftr-cap — фон секции над подвалом (ставит fx/liquid.js), иначе холст */
  background: radial-gradient(circle var(--dm-r) at 50% var(--dm-cy), var(--ftr-cap, var(--bg)) calc(var(--dm-r) - 1px), transparent var(--dm-r));
  clip-path: inset(calc(var(--dm-over) - var(--dm-y, 0px)) 0 0 0);
}
.dome__rim {
  background: radial-gradient(circle var(--dm-r) at 50% var(--dm-cy),
    transparent calc(var(--dm-r) - 90px),
    color-mix(in srgb, var(--amber-deep) 22%, transparent) calc(var(--dm-r) - 6px),
    color-mix(in srgb, var(--amber-deep) 45%, transparent) calc(var(--dm-r) - 3px),
    var(--amber-hi) calc(var(--dm-r) - 1.5px),
    color-mix(in srgb, var(--ink) 80%, var(--amber-hi)) calc(var(--dm-r) - .25px),
    var(--amber-hi) calc(var(--dm-r) + 1.25px),
    color-mix(in srgb, var(--amber) 55%, transparent) calc(var(--dm-r) + 4px),
    color-mix(in srgb, var(--amber) 18%, transparent) calc(var(--dm-r) + 14px),
    transparent calc(var(--dm-r) + 34px));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
  /* прорисовка от центра: ширина маски растёт с --dm-p */
  -webkit-mask-size: calc(14% + 86% * var(--dm-p, 1)) 100%;
          mask-size: calc(14% + 86% * var(--dm-p, 1)) 100%;
  -webkit-mask-position: 50% 0; mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: calc(.35 + .65 * var(--dm-p, 1));
}
.dome__glow {
  background: radial-gradient(circle calc(var(--dm-r) + 240px) at 50% var(--dm-cy),
    transparent calc(var(--dm-r) - 3px),
    color-mix(in srgb, var(--amber-hi) 34%, transparent) calc(var(--dm-r) - 2px),
    color-mix(in srgb, var(--amber) 16%, transparent) calc(var(--dm-r) + 24px),
    color-mix(in srgb, var(--amber) 7%, transparent) calc(var(--dm-r) + 80px),
    color-mix(in srgb, var(--amber) 2%, transparent) calc(var(--dm-r) + 160px),
    transparent calc(var(--dm-r) + 240px));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
  -webkit-mask-size: calc(20% + 80% * var(--dm-p, 1)) 100%;
          mask-size: calc(20% + 80% * var(--dm-p, 1)) 100%;
  -webkit-mask-position: 50% 0; mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: calc(.3 + .7 * var(--dm-p, 1));
  animation: dome-breathe 8s var(--ease-io) infinite;
}
.dome__flare { mix-blend-mode: screen; opacity: var(--dm-p, 1); }
.dome__flare::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--dm-over) + var(--dm-apex));
  width: min(1100px, 92vw); height: 150px; translate: -50% -50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--amber-hi) 22%, transparent), color-mix(in srgb, var(--amber) 8%, transparent) 45%, transparent 72%);
  animation: dome-flare 8s var(--ease-io) infinite;
}
.dome__flare::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--dm-over) + var(--dm-apex));
  width: min(460px, 60vw); height: 3px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--ink), color-mix(in srgb, var(--amber-hi) 50%, transparent) 50%, transparent);
  filter: blur(.5px);
}
@media (max-width: 760px) { .dome__flare::before { height: 110px; } }
/* «дыхание» — через filter, чтобы не спорить с opacity хода дуги */
@keyframes dome-breathe { 0%, 100% { filter: brightness(.85); } 50% { filter: brightness(1); } }
@keyframes dome-flare { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* ---- верх внутренней страницы: копия «планеты» hero главной 1 в 1 (Орсен 08.10 ≈21:15)
   Чанк ui.pagecap — первым в <main> во всех шаблонах, кроме главной. Слои (снизу вверх) — как в .hero:
   0 шейдер (fx/liquid.js, тот же вариант hero: те же капли, размер, скорость, яркость; холст не ниже экрана, как hero) ·
   1 затемнение верха (как .hero__scrim) · 2 «планета»: .hero__horizon > .hero__horizon-in > __glow / __planet / __rim / __flare —
   те же слои и градиенты, что в hero.css §2 (менять вместе). Дуга выгнута ВВЕРХ ⌒, пузыри над ней, под ней — тёмное тело «планеты».
   Отличие от главной одно: капли за курсором здесь нет (data-cursor="0").
   Высота шапки — по содержимому: вершина дуги на --cap-lift ниже блоков шапки (--cap-text — их низ от верха страницы, ставит JS
   вместе с .is-on; до этого «планеты» нет). Холст и тело «планеты» уходят ниже концов дуги у края экрана (--hz-sag-e + 160),
   низ слоя — тело «планеты» цвета фона: со страницей без шва. z-index −1 без isolation на .main: над фоном body, под содержимым. */
.pcap {
  --cap-text: 280px;                                         /* запасное; точное ставит JS */
  --cap-apex: calc(var(--cap-text) + var(--cap-lift));       /* вершина дуги от верха страницы */
  position: absolute; top: 0; left: 0; right: 0; z-index: -1;
  height: max(100vh, 640px, var(--cap-apex) + var(--hz-sag-e) + 160px);
  height: max(100svh, 640px, var(--cap-apex) + var(--hz-sag-e) + 160px);
  overflow: clip;
  pointer-events: none;
  background: var(--bg);
}
.pcap__canvas { display: block; width: 100%; height: 100%; }
.pcap__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent 22%);
}
/* «планета»: вершина дуги — на --cap-apex от верха страницы; слой уходит ниже края .pcap (обрезается) */
.pcap .hero__horizon {
  position: absolute; left: 0; right: 0; z-index: 2;
  top: calc(var(--cap-apex) - var(--hz-pad));
  bottom: -160px;
  pointer-events: none;
}
.pcap:not(.is-on) .hero__horizon { visibility: hidden; }
.pcap .hero__horizon-in { position: absolute; inset: 0; }
.pcap .hero__horizon-in > * { position: absolute; inset: 0; }
.pcap .hero__planet {
  background: radial-gradient(circle var(--hz-r) at 50% calc(var(--hz-pad) + var(--hz-r)),
    var(--bg) calc(var(--hz-r) - 90px),
    color-mix(in srgb, var(--amber-deep) 22%, var(--bg)) calc(var(--hz-r) - 6px),
    color-mix(in srgb, var(--amber-deep) 45%, var(--bg)) calc(var(--hz-r) - 1.5px),
    transparent var(--hz-r));
}
.pcap .hero__rim {
  background: radial-gradient(circle var(--hz-r) at 50% calc(var(--hz-pad) + var(--hz-r)),
    transparent calc(var(--hz-r) - 3px),
    var(--amber-hi) calc(var(--hz-r) - 1.5px),
    color-mix(in srgb, var(--ink) 80%, var(--amber-hi)) calc(var(--hz-r) - .25px),
    var(--amber-hi) calc(var(--hz-r) + 1.25px),
    color-mix(in srgb, var(--amber) 55%, transparent) calc(var(--hz-r) + 4px),
    color-mix(in srgb, var(--amber) 18%, transparent) calc(var(--hz-r) + 14px),
    transparent calc(var(--hz-r) + 34px));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
}
.pcap .hero__glow {
  background: radial-gradient(circle calc(var(--hz-r) + 240px) at 50% calc(var(--hz-pad) + var(--hz-r)),
    color-mix(in srgb, var(--amber-hi) 55%, transparent) calc(var(--hz-r) - 2px),
    color-mix(in srgb, var(--amber) 30%, transparent) calc(var(--hz-r) + 24px),
    var(--glow-soft) calc(var(--hz-r) + 80px),
    color-mix(in srgb, var(--amber) 5%, transparent) calc(var(--hz-r) + 160px),
    transparent calc(var(--hz-r) + 240px));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
  animation: pcap-breathe 8s var(--ease-io) infinite;
}
.pcap .hero__flare { mix-blend-mode: screen; }
.pcap .hero__flare::before {
  content: ""; position: absolute; left: 50%; top: var(--hz-pad);
  width: min(1100px, 92vw); height: 150px;
  translate: -50% -50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--amber-hi) 42%, transparent), color-mix(in srgb, var(--amber) 14%, transparent) 45%, transparent 72%);
  animation: pcap-flare 8s var(--ease-io) infinite;
}
@media (max-width: 760px) { .pcap .hero__flare::before { height: 110px; } }
@keyframes pcap-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes pcap-flare { 0%, 100% { opacity: .8; transform: scaleX(.94); } 50% { opacity: 1; transform: scaleX(1.06); } }
@media (prefers-reduced-motion: reduce) { .pcap .hero__glow, .pcap .hero__flare::before { animation: none; } }
/* без WebGL2 или без JS: статичные контуры кольцами-градиентами — как заглушка hero */
.pcap.is-fallback,
html:not(.js) .pcap {
  background:
    radial-gradient(38% 52% at 14% 28%, transparent 62%, var(--glow-soft) 66%, color-mix(in srgb, var(--amber-hi) 70%, transparent) 69.4%, var(--glow) 70.4%, transparent 76%),
    radial-gradient(34% 46% at 90% 62%, transparent 60%, var(--glow-soft) 65%, color-mix(in srgb, var(--amber-hi) 60%, transparent) 69.2%, var(--glow) 70.2%, transparent 77%),
    radial-gradient(22% 30% at 64% 6%, transparent 58%, color-mix(in srgb, var(--amber) 55%, transparent) 68.6%, transparent 76%),
    radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--amber-deep) 12%, transparent), transparent 70%),
    var(--bg);
}

/* место под дугой: текст шапки → содержимое = --cap-gap (только на страницах с .pcap; специфичность выше правил страниц).
   Каталог и раздел, контакты, политика: отступ под шапкой; «О компании» — между текстом с цифрами и разделами каталога;
   товар («разделённый экран», 09.10) — в product.css: .pcap ~ .pp .pp-grid */
.pcap ~ .clist > .chero,
.pcap ~ .phero--contacts,
.pcap ~ .doc > .phero { padding-bottom: var(--cap-gap); }
.pcap ~ .ab-top .ab-cats { margin-top: var(--cap-gap); }
/* «шар» на короткой странице (Орсен 09.10: «сферы не одинаковый размер… слишком близко друг к другу — шар в глаз превращается»).
   1. Одна окружность: на страницах с .pcap купол подвала ⌣ берёт радиус «планеты» ⌒ (--hz-r) — один прогиб на каждой ширине.
      Главная не меняется: там .pcap нет, у подвала свой --dm-r.
   2. Зазор: концы дуг у края экрана — самые близкие точки ⌒ и ⌣ — не ближе --ball-gap (≥ 1024: 40 % высоты окна, не меньше 320;
      ниже — у краёв не меньше 128, --s-10, а между вершинами ⌒ и ⌣ не меньше 40 % высоты окна: на 390×844 было 215 между
      вершинами при 128 у краёв — обе дуги в одном экране, «линза»). Держит наименьшая высота <main>: вершина ⌒ (--cap-text от JS
      на <main> + --cap-lift) + прогиб ⌒ у края экрана + зазор + прогиб ⌣ у края экрана − --dm-apex (вершина ⌣ ниже верха подвала).
      Длинные страницы выше — пустоты не прибавляется */
:root {
  --ball-gap: max(var(--s-10), 40vh - var(--hz-sag-e) - var(--dm-sag-e));
  --ball-gap: max(var(--s-10), 40svh - var(--hz-sag-e) - var(--dm-sag-e));
}
@media (min-width: 1024px) { :root { --ball-gap: max(40vh, 320px); --ball-gap: max(40svh, 320px); } }
:root:has(.pcap) { --dm-r: var(--hz-r); --dm-sag-e: var(--hz-sag-e); }
.main:has(> .pcap) {
  min-height: calc(var(--cap-text, 280px) + var(--cap-lift) + var(--hz-sag-e) + var(--ball-gap) + var(--dm-sag-e) - var(--dm-apex));
}
/* 404: под текстом сразу подвал. Тело купола подвала непрозрачно от верха подвала, поэтому концы дуги ⌒ у края экрана
   и отсвет под ней (тело «планеты» тлеет на 90 px внутрь от кромки) должны закончиться выше верха подвала, иначе их
   срезает прямая линия. Снизу вверх: --cap-lift + прогиб ⌒ у края экрана + большее из двух: 96 под отсвет тела «планеты» ⌒ у края
   экрана (64 мало: на 1440 срез отсвета прямой линией у края) или подъём концов дуги подвала ⌣ над его верхом (прогиб ⌣ − --dm-apex):
   концы ⌣ у края экрана не выше концов ⌒ — «( )», дуги не сходятся. Аудит 09.10: было 96 + подъём ⌣: 368 → 312 на 1440, 464 → 372 на 1920 */
.pcap ~ .e404 { padding-bottom: max(var(--section), calc(var(--cap-lift) + var(--hz-sag-e) + max(var(--s-9), var(--dm-sag-e) - var(--dm-apex)))); }
@supports (width: round(up, calc(1px * sqrt(cos(atan2(1px, 2px)))), 4px)) {
  .pcap ~ .e404 { padding-bottom: max(var(--section), round(up, var(--cap-lift) + var(--hz-sag-e) + max(var(--s-9), var(--dm-sag-e) - var(--dm-apex)), var(--s-1))); }
}

/* ======================================================================= подвал: «полусфера закрывается»
   Зеркало hero (Орсен 07.10): в hero из-под низа экрана поднимается дуга «планеты»; здесь её нижняя кромка —
   янтарная дуга, выпуклая вниз, «закрывает» полусферу, а последний блок с подвалом стоит на шейдере-пузырях
   (fx/liquid.js, data-variant="footer"). Дуга — купол .dome (выше; верх внутренних страниц — копия hero, .pcap),
   центр окружности — над подвалом, концы дуги уходят вверх по углам секции выше. Пока подвал въезжает в экран,
   кромка прорисовывается от центра к краям (--dm-p). --dm-y на .ftr — сдвиг купола вниз на подходе к концу главной
   (зеркало дуги hero, fx/liquid.js); содержимое и затемнение едут с ним — дуга не заходит на надписи (Орсен 10.10). */
/* Коробка подвала начинается на --dm-over выше его видимого верха (margin −, padding +): купол над подвалом — внутри неё,
   и overflow: clip обрезает по низу то, что едет с куполом (--dm-y), — страница не удлиняется при прокрутке (10.10).
   Верхняя полоса --dm-over прозрачна и пропускает клики к секции над подвалом (pointer-events: none; содержимое — auto).
   Видимый верх подвала (край шейдера) = верх коробки + --dm-over — так его считают fx/liquid.js и scenes/product-page.js */
.ftr {
  position: relative; isolation: isolate; overflow: clip; pointer-events: none;
  margin-top: calc(-1 * var(--dm-over));
  color: var(--ink);
  padding-top: calc(var(--dm-over) + var(--dm-apex) + var(--s-6));   /* видимые 96 → 128 */
  /* зазор под панелью — внутри подвала, а не margin панели: иначе он выпадает за .ftr, и шейдер (inset: 0)
     кончается на 24 px выше конца страницы — прямой край тёмной полосы (r1) */
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
}

/* ---- 0. шейдер-пузыри */
.ftr__liquid { position: absolute; inset: var(--dm-over) 0 0 0; z-index: 0; pointer-events: none; background: var(--bg); }
.ftr__liquid-canvas { display: block; width: 100%; height: 100%; }
/* верх шейдера переходит в фон секции над подвалом (--ftr-cap): по краям, где дуга уходит вверх, нет шва */
.ftr__liquid::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; pointer-events: none;
  background: linear-gradient(var(--ftr-cap, var(--bg)), color-mix(in srgb, var(--ftr-cap, var(--bg)) 0%, transparent));
}
/* без WebGL2 (или без JS): статичные контуры кольцами-градиентами */
.ftr__liquid.is-fallback,
html:not(.js) .ftr__liquid {
  background:
    radial-gradient(30% 46% at 6% 62%, transparent 60%, var(--glow-soft) 65%, color-mix(in srgb, var(--amber-hi) 60%, transparent) 69%, var(--glow) 70%, transparent 76%),
    radial-gradient(28% 44% at 96% 48%, transparent 60%, var(--glow-soft) 65%, color-mix(in srgb, var(--amber-hi) 55%, transparent) 69%, var(--glow) 70%, transparent 76%),
    radial-gradient(24% 30% at 70% 104%, transparent 58%, color-mix(in srgb, var(--amber) 45%, transparent) 68.6%, transparent 76%),
    radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--amber-deep) 10%, transparent), transparent 70%),
    var(--bg);
}

/* ---- 1. дуга: общий купол .dome (свечение, тело «планеты», кромка, блик) — над краем подвала на --dm-over */
.ftr > .dome { top: 0; transform: translate3d(0, var(--dm-y, 0px), 0); }

/* ---- 2. затемнение под заголовком: контуры капель не спорят с текстом */
.ftr__scrim {
  position: absolute; inset: var(--dm-over) 0 0 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse min(46%, 620px) 150px at 50% calc(var(--dm-apex) + 146px), color-mix(in srgb, var(--bg) 70%, transparent), transparent 100%);
}

/* ---- 3. содержимое */
.ftr__in { position: relative; z-index: 3; pointer-events: auto; }
/* пузыри тоже едут с куполом: иначе у краёв экрана, где концы опущенной дуги ниже верха подвала, шейдер виден над дугой (Орсен 10.10) */
.ftr__liquid, .ftr__in, .ftr__scrim { transform: translate3d(0, var(--dm-y, 0px), 0); }
/* «Запросить цену…»: только на страницах без формы заявки #request (главная, каталог, разделы, «О компании», политика, 404).
   На товаре и в контактах блок не выводится: шаблоны передают &cta=`0` в чанк ui.footer. Запасной вариант — правило ниже.
   Блок по ширине содержимого: по нему шейдер приглушает контуры под текстом (focusEl в fx/liquid.js). */
/* метка → заголовок --gap-eyebrow (12), заголовок → кнопки --section-head (24 → 32): §13.7; отступы — margin у детей, gap 0 */
.ftr__cta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: fit-content; max-width: 100%; margin-inline: auto; padding-bottom: var(--block-gap);
  margin-top: var(--s-4);   /* от вершины дуги 32 + 16 = 48 (Орсен 10.10: «слишком близко к сфере») — только у блока, панель подвала без него не сдвигается */
}
body:has(#request) .ftr__cta { display: none; }
/* ступень H2 (28/32 → 32/36 → 40/44, 500): в чанке класс .t-h2; правило ниже — то же самое на случай старой разметки */
.ftr__title {
  margin-top: var(--gap-eyebrow);
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); letter-spacing: var(--track-h2);
  max-inline-size: var(--measure-h2); text-wrap: balance; hyphens: manual;
}
.ftr__title em { color: inherit; } /* старая разметка до выкладки чанка: выделения в H2 нет (§13.1) */
.ftr__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-row); margin-top: var(--section-head); }

/* маленький классический подвал (Орсен 10.10): стеклянная панель по краю контейнера, поле 24.
   Строка 1 — знак компании · контакты; строка 2 (волосяная линия) — ©, политика · «Сайт создан с помощью waawaa.ru» */
.ftr__panel {
  position: relative; isolation: isolate;
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.ftr__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6);
  padding-bottom: var(--s-4);
}
.ftr__brand { display: flex; align-items: center; }
.ftr__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); }
.ftr__link {
  position: relative; display: inline-flex; align-items: center; padding-block: var(--s-1);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); transition: color var(--t-hover) var(--ease-out);
}
/* подчёркивание при наведении — нейтральное, не янтарное (SPACING.md §8) */
.ftr__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--s-1); height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-micro) var(--ease-out);
}
@media (hover: hover) { .ftr__link:hover::after { transform: scaleX(1); transform-origin: left; } }
.ftr__link:hover, .ftr__link[aria-current] { color: var(--ink); }
.ftr__phone { font-family: var(--font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ftr__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted);
}
.ftr__legal .ftr__link { font-size: inherit; line-height: inherit; color: var(--muted); }
.ftr__legal .ftr__link:hover { color: var(--ink); }
.ftr__legal-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }

@media (max-width: 760px) {
  .ftr__scrim { background: radial-gradient(ellipse 80% 160px at 50% calc(var(--dm-apex) + 120px), color-mix(in srgb, var(--bg) 72%, transparent), transparent 100%); }
  .ftr__row { flex-direction: column; align-items: flex-start; }
  .ftr__legal { flex-direction: column; align-items: flex-start; }
}
/* тач: ссылки подвала — видимая строка 40, поле касания 44 (невидимое ::before, −2 сверху и снизу; ::after — подчёркивание) */
@media (pointer: coarse) {
  .ftr__link, .ftr__legal .ftr__link { padding-block: var(--s-2); min-height: var(--h-sm); }
  .ftr__link::after { bottom: var(--s-2); }
  .ftr__link::before { content: ""; position: absolute; inset: -2px 0; }
}
/* < 640: пара «Запросить цену / Каталог» — по краям контейнера (аудит 09.10: на 430 стояла по центру в 21 px от краёв,
   на 320 «Каталог» узкой пилюлей под широкой). Обе кнопки растут; при переносе каждая — во всю ширину */
@media (max-width: 639px) {
  .ftr__cta { width: 100%; }
  .ftr__actions { width: 100%; }
  .ftr__actions > :is(.mbtn, .gbtn) { flex: 1 1 auto; }
  .ftr__actions > .mbtn { justify-content: center; padding-right: calc(var(--h) + var(--gap)); } /* как .mbtn--wide */
  .ftr__actions > .gbtn { justify-content: space-between; }
}

/* ======================================================================= ЛИСТ ДАННЫХ (чанк catalog.card) + кнопка «В заявку»
   Главная («Популярные позиции») и товар («Похожие позиции»): там pages.css не подключён — действует эта копия.
   Источник правды — css/pages.css (владелец «Каталог»), синхронизировано 09.10 (типографика §13): текстовая карточка 16, padding --pad-card,
   без картинок, колб, оттенка и метки раздела; наведение — фон --surface-2 и рамка --line-2, без подъёма.
   Листы ряда стоят на общей сетке (subgrid): шапка / показатели / кнопки — на одних линиях, лист не тянется пустотой.
   Набор строк показателей у листов один: пустое значение — прочерк; строка, пустая во всех листах сетки, не выводится.
   Название — во всю ширину, до двух строк (полное — в title); под ним завод и справа метка группы API. */
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--grid-gap); }
.sheet {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--s-4); padding: var(--pad-card);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
/* лист целиком — ссылка на товар: поле ссылки-названия растянуто на лист, «Паспорт PDF» и «В заявку» — над ним;
   фокус ссылки — рамкой по листу. Наведение — только с мышью (на тач не «залипает»), нажатие — --press-bg */
.sheet { position: relative; }
@media (hover: hover) { .sheet:hover { background: var(--surface-2); border-color: var(--line-2); } }
.sheet:active { background: var(--press-bg); }
.sheet__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sheet__name a:focus-visible { outline: none; }
.sheet__name a:focus-visible::after { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--r-card); }
.sheet__foot > * { position: relative; z-index: 2; }
.sheet__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: var(--s-2) var(--s-3); }   /* H4 → текст листа 8 (§13.7) */
.sheet__name { grid-column: 1 / -1; min-width: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--ink); hyphens: none; }   /* ступень H4: 18/24 → 20/24, 600 */
.sheet__name a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: color var(--t-hover) var(--ease-out); }
.sheet__grp { grid-column: 2; grid-row: 2; align-self: center; }
.sheet__plant { grid-column: 1; grid-row: 2; align-self: center; min-width: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.sheet__plant:empty { display: none; }
/* тип продукта над маркой (kind, Орсен 09.10: «масло не масло ниче не понятно»): строка 14/20 --ink-2, до марки 12 (8 + 4: над заголовком больше, чем под ним); завод и группа — на ряд ниже */
.sheet__kind { grid-column: 1 / -1; grid-row: 1; min-width: 0; margin: 0 0 var(--s-1); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.sheet__head:has(> .sheet__kind) > .sheet__grp, .sheet__head:has(> .sheet__kind) > .sheet__plant { grid-row: 3; }
.sheet__head:has(> .sheet__kind) > .sheet__plant { color: var(--muted); }
.sheet__specs { align-self: start; margin: 0; border-top: 1px solid var(--line); }
.sheet__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.sheet__row dt { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.sheet__row dt small { font-size: inherit; color: var(--muted); }   /* ≥ 4.5:1: иерархия кеглем, не прозрачностью */
.sheet__row dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); text-align: right; }
/* документ — одной строкой, пока помещается; в узком листе (≈ 1180–1250 в три колонки) переносится, а не вылезает за лист */
.sheet__row dt { flex: none; }
.sheet__row--doc dd { min-width: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); overflow-wrap: anywhere; }
.sheet__row > dd:empty::before { content: "—"; color: var(--line-2); }
:has(> .sheet):not(:has(> .sheet .sheet__row--kv40 > dd:not(:empty))) > .sheet .sheet__row--kv40,
:has(> .sheet):not(:has(> .sheet .sheet__row--kv100 > dd:not(:empty))) > .sheet .sheet__row--kv100,
:has(> .sheet):not(:has(> .sheet .sheet__row--vi > dd:not(:empty))) > .sheet .sheet__row--vi,
:has(> .sheet):not(:has(> .sheet .sheet__row--cnt > dd:not(:empty))) > .sheet .sheet__row--cnt,
:has(> .sheet):not(:has(> .sheet .sheet__row--doc > dd:not(:empty))) > .sheet .sheet__row--doc { display: none; }
.sheet__foot { align-self: end; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-row); }
.sheet__foot > .reqbtn { margin-left: auto; }
/* прежняя разметка чанка (до выкладки раунда w1): метка раздела сверху — сетка на 4 строки; строка без модификатора поля пустой не выводится.
   После выкладки этим правилам соответствовать нечему — удалить вместе со следующей правкой блока */
.sheet:has(> .sheet__meta) { grid-row: span 4; }
.sheet__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.sheet__cat { font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-caption); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); }
.sheet__row:not([class*="sheet__row--"]):has(> dd:empty) { display: none; }
.stab__grp {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-xs); height: 24px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink);
}
.sheet__pdf { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-sm); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); transition: color var(--t-hover) var(--ease-out); }
@media (hover: hover) { .sheet__pdf:hover { color: var(--ink); } }
.sheet__pdf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* кнопка «В заявку» (список заявки — js/pages/reqlist.js). Главная кнопка: янтарь 8 % → 16 %, рамка → --amber */
.reqbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--h-sm); padding: 0 var(--px-sm); border: 1px solid var(--amber-deep); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  font-size: var(--fs-small); font-weight: 500; line-height: var(--lh-small); color: var(--ink); white-space: nowrap;
  transition: background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.reqbtn::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: var(--r-round); color: var(--amber);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
}
.reqbtn:active { background: var(--press-bg); }
.reqbtn.is-added { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.reqbtn.is-added::before { display: none; }
@media (hover: hover) {
  .reqbtn:hover { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: var(--amber); }
  .reqbtn.is-added:hover { background: var(--hover-bg); border-color: var(--line-2); color: var(--ink); }
}
.reqbtn.is-added:active { background: var(--press-bg); }
.reqbtn--sm { height: var(--h-xs); padding: 0 var(--px-xs); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.reqbtn--sm::before { width: 10px; height: 10px; }
/* тач: зона касания ≥ 44 без смены вида — «В заявку» и «Паспорт PDF» 40 → 44 (по 2 с каждой стороны), малая кнопка 32 → 44,
   название 24 → 44 (поле от h3: у ссылки overflow: hidden обрезал бы своё) */
@media (pointer: coarse) {
  .reqbtn, .sheet__pdf { position: relative; }
  .reqbtn::after, .sheet__pdf::after { content: ""; position: absolute; inset: -2px; }
  .reqbtn--sm::after { inset: -6px; }
}
/* ------------------------------------------------------------ конец листа данных */

/* ======================================================================= появления */
/* построчное появление: заголовок не мигает до разбиения */
.js [data-split]:not(.is-split) { visibility: hidden; }
.split-line { will-change: transform; }
[data-count] { font-variant-numeric: tabular-nums; }
.is-counting { display: inline-block; }

/* ======================================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js [data-split]:not(.is-split) { visibility: visible; }
  .nhs-loader .bond, .nhs-loader .atom { animation: none; }
  .nhs-loader .bond { stroke-dashoffset: 0; }
  .nhs-loader .atom { transform: scale(1); }
  .dome__glow, .dome__flare::before { animation: none; }
  .hdr__req, .hdr__req.is-bump, .menu__req.is-bump { animation: none; }
  .menu, .mega, .hdr__nav.is-ready .nav__sub.mega { transition: none; }
  .menu__txt, .menu__foot > *, .mega .nav__sublink { transform: none; opacity: 1; }
  .rform__done-mark circle, .rform__done-mark path { stroke-dashoffset: 0; animation: none !important; }
  .mbtn__circle, .mbtn__arrow, .gbtn__icon { transition: none; }
  :is(a.gbtn, .hero__cat, .ab-pass__pdf), :is(a.gbtn, .hero__cat, .ab-pass__pdf)::before, .hcat__go { transition: none; }
  html.ui-loading .main, html.ui-loading .ftr, html.ui-loading .hdr__capsule { transform: none; }
  .mbtn.is-loading .mbtn__spin circle { animation-duration: 2.4s; }
}