/* ============================================================
   Персональный аудит — современный слой оформления (2026-07-28)
   Загружается последним и переопределяет legacy-стили шаблона.
   Два независимых порога:
     --nav-bp     1100px — верхнее меню переключается в бургер
     content-bp   1000px — колонки перестраиваются в одну
   ============================================================ */

:root {
  --pa-blue: #2681bf;
  --pa-blue-dark: #1b5f8f;
  --pa-blue-deep: #10344d;
  --pa-blue-light: #eaf3fa;
  --pa-ink: #1f2d3a;
  --pa-muted: #5b6b7a;
  --pa-line: #dce5ec;
  --pa-radius: 10px;
  --pa-shadow: 0 2px 10px rgba(16, 52, 77, .08);
  --pa-container: 1240px;
  --pa-pad: clamp(16px, 3vw, 32px);

  /* --- D2: типографика и вертикальный ритм ------------------ */
  --pa-measure: 80ch;
  --pa-fs-prose: 17px;
  --pa-lh-prose: 1.6;
  --pa-fs-ui: 15px;
  --pa-lh-ui: 1.55;
  --pa-lh-heading: 1.25;
  --pa-flow: 1.1em;
  --pa-flow-h2: 2em;
  --pa-flow-h3: 1.55em;
  /* объединено с дублирующим :root (было ниже по файлу, D2) */
  --pa-header-h: 72px;

  /* --- D3: геометрия общих компонентов ---------------------- */
  --pa-radius-sm: 6px;
  --pa-ctl-pad-y: .62em;
  --pa-ctl-pad-x: 1.2em;
  --pa-ctl-fw: 600;
  --pa-ctl-tap: 44px;
  --pa-ctl-transition: background .15s ease, border-color .15s ease, color .15s ease;
  --pa-card-pad: 14px 16px;
  --pa-cell-pad: .6em .75em;

  /* --- D4: раскладка оболочки -------------------------------- */
  --pa-shell-top: 0px;
  --pa-shell-hmin: 96px;
  --pa-focus-gap: 16px;
  --pa-shell-safe: calc(var(--pa-shell-top) + max(var(--pa-header-h), var(--pa-shell-hmin)) + var(--pa-focus-gap));
  --pa-aside-w: 300px;
  --pa-aside-gap: clamp(24px, 3vw, 48px);

  /* --- D5: поля шаблонных форм ------------------------------- */
  --pa-field-pad: .55em .75em;
}

/* --- база --------------------------------------------------- */
/* Наследие шаблона: overflow-x:hidden и height:100% на html/body ломают position:sticky —
   sticky прилипает только в пределах 100% высоты окна. Снимаем оба ограничения. */
html, body { overflow-x: visible !important; height: auto !important; min-height: 100%; }
body {
  font: 400 16px/1.6 -apple-system, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--pa-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--pa-blue-dark); }
h1, h2, h3 { color: var(--pa-blue-deep); line-height: 1.25; text-transform: none; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; margin: 0 0 .6em; }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); font-weight: 600; margin: 1.8em 0 .5em; }
h3 { font-size: 1.1rem; font-weight: 600; margin: 1.4em 0 .4em; }

/* --- шапка --------------------------------------------------- */
.pa-header {
  position: relative; z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--pa-line);
  box-shadow: 0 1px 0 rgba(16, 52, 77, .04);
}
.pa-header__bar {
  max-width: var(--pa-container); margin: 0 auto; padding: 14px var(--pa-pad);
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px;
  gap: clamp(12px, 2vw, 40px);
}

/* Липнет только верхняя строка (решение владельца), меню уезжает вместе со страницей.
   sticky ограничен боксом родителя, поэтому на desktop обёртка шапки убирается из потока
   через display:contents — тогда строка липнет относительно body на всю длину страницы. */
@media (min-width: 1101px) {
  .pa-header { display: contents; }
  .pa-header__bar {
    position: sticky; top: 0; z-index: 910;
    max-width: none;
    padding-left: max(var(--pa-pad), calc((100% - var(--pa-container)) / 2));
    padding-right: max(var(--pa-pad), calc((100% - var(--pa-container)) / 2));
    background: #fff;
    border-bottom: 1px solid var(--pa-line);
    box-shadow: 0 1px 0 rgba(16, 52, 77, .04);
  }
  .pa-nav { border-bottom: 1px solid var(--pa-line); box-shadow: 0 1px 0 rgba(16, 52, 77, .04); }
}
@media (max-width: 1100px) {
  /* на мобильном липнет вся шапка вместе с выпадающей панелью меню */
  .pa-header { position: sticky; top: 0; }
}

.pa-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: 0 0 auto; }
/* размеры заданы заранее: иначе высота шапки скачет при загрузке и ломает отступ якоря */
.pa-logo img { width: 54px; height: auto; aspect-ratio: 150 / 177; display: block; }
.pa-logo__name { font-size: 1.05rem; font-weight: 700; color: var(--pa-blue-deep); line-height: 1.15; }
.pa-logo__tagline { font-size: .8rem; color: var(--pa-muted); margin-top: 2px; }
.pa-header__spacer { flex: 1 1 auto; }
.pa-header__contacts { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.pa-phone { text-decoration: none; line-height: 1.15; display: block; }
.pa-phone__num { font-size: 1.18rem; font-weight: 700; color: var(--pa-blue-deep); white-space: nowrap; }
.pa-phone__note { display: block; font-size: .75rem; color: var(--pa-muted); }
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 11px 20px; border-radius: var(--pa-radius);
  background: var(--pa-blue-dark); color: #fff !important; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 1px solid var(--pa-blue-dark);
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}
.pa-btn:hover { background: var(--pa-blue-deep); border-color: var(--pa-blue-deep); }
.pa-btn:active { transform: translateY(1px); }
.pa-btn--ghost { background: #fff; color: var(--pa-blue-dark) !important; border-color: var(--pa-line); }
.pa-btn--ghost:hover { background: var(--pa-blue-light); border-color: var(--pa-blue); }

/* --- навигация ---------------------------------------------- */
.pa-nav { border-top: 1px solid var(--pa-line); background: #fff; }
.pa-nav__inner { max-width: var(--pa-container); margin: 0 auto; padding: 0 var(--pa-pad); }
#menu_top { padding: 0; clear: none; }
#menu_top #menu_items { display: flex; flex-wrap: wrap; gap: 2px 4px; }
#menu_top .toplink {
  position: relative; float: none; display: flex; align-items: center;
  flex: 0 0 auto;                       /* не растягивать пункты по строке */
  width: auto; height: auto; margin: 0; background: none; text-align: left; line-height: 1.3;
}
#menu_top .toplink > a, #menu_top .toplink__link {
  display: block; width: auto; height: auto; padding: 12px 10px;
  color: var(--pa-ink); font: 600 .875rem/1.3 inherit; text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
#menu_top .toplink > a:hover, #menu_top .toplink__link:hover { color: var(--pa-blue-dark); }
#menu_top .active, #menu_top .toplink:hover { background: none; }
/* P1-18: --pa-blue даёт 4.22 к белому; текст пунктов переведён на --pa-blue-dark (6.82) */
#menu_top .active > a, #menu_top .active .toplink__link { color: var(--pa-blue-dark); border-bottom-color: var(--pa-blue); }
#menu_top .last { margin-right: 0 !important; }

.toplink__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -4px;
  background: none; border: 0; cursor: pointer; color: var(--pa-muted);
}
.toplink__toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.toplink--open > .toplink__toggle svg { transform: rotate(180deg); }
@media (min-width: 1101px) {
  .toplink__toggle { display: inline-flex; width: 26px; height: 44px; }
}

#menu_top .sub_container {
  position: absolute; left: 0; top: 100%; z-index: 1000; display: none;
  box-sizing: border-box;              /* max-height от JS должен учитывать padding и рамку */
  min-width: 280px; max-width: min(92vw, 380px); padding: 8px;
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--pa-line); border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
}
#menu_top .toplink--open > .sub_container { display: block !important; }
#menu_top .sub_container ul { margin: 0; padding: 0; list-style: none; }
#menu_top .sub_container li {
  display: block; float: none; width: auto; margin: 0; padding: 0;
  background: none; border: 0; text-align: left; line-height: 1.4;
}
#menu_top .sub_container li a {
  display: block; height: auto; padding: 10px 12px; border-radius: 6px;
  color: var(--pa-ink); font-size: .9rem; text-decoration: none;
}
#menu_top .sub_container li a:hover { background: var(--pa-blue-light); color: var(--pa-blue-dark); }
#menu_top .sub_container li:hover, #menu_top .sub_container li.active { background: none; }
#menu_top .sub_container li.active > a { color: var(--pa-blue); font-weight: 600; }
/* выравнивание вправо ставит JS, когда карточка не помещается */
#menu_top .sub_container.submenu--align-right { left: auto; right: 0; }

/* бургер */
.menu-burger {
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--pa-line); border-radius: var(--pa-radius);
  background: #fff; color: var(--pa-ink); font-weight: 600; font-size: .9rem; cursor: pointer;
  min-height: 44px;
}
.menu-burger .burger-lines { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-burger .burger-lines span { display: block; width: 20px; height: 2px; background: var(--pa-blue-deep); border-radius: 2px; }

/* P2-20: обход блоков. Ссылка не видна, пока не получит фокус с клавиатуры. */
.pa-skip {
  position: absolute; left: 8px; top: -100px; z-index: 1200;
  padding: 12px 18px; border-radius: 0 0 var(--pa-radius) var(--pa-radius);
  background: var(--pa-blue-deep); color: #fff; text-decoration: none; font-weight: 600;
}
.pa-skip:focus { top: 0; }
/* P2-22: при выключенном JS панель меню оставалась display:none, а бургер ничего не
   делал — навигация была мертва. Пока на <html> нет класса js, показываем меню
   развёрнутым и прячем бургер. */
@media (max-width: 1100px) {
  html:not(.js) .pa-nav { display: block; }
  html:not(.js) .menu-burger { display: none; }
}
/* фон не прокручивается под открытой панелью меню */
body.pa-nav-locked { overflow: hidden; }

@media (max-width: 1100px) {
  .menu-burger { display: inline-flex; }
  .pa-nav { display: none; border-top: 1px solid var(--pa-line); }
  .pa-nav.is-open { display: block; max-height: calc(100vh - 76px); overflow-y: auto; }
  #menu_top #menu_items { display: block; }
  #menu_top .toplink { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--pa-line); }
  #menu_top .toplink > a, #menu_top .toplink__link { flex: 1 1 auto; padding: 14px 4px; min-height: 44px; display: flex; align-items: center; border-bottom: 0; }
  .toplink__toggle { display: inline-flex; }
  #menu_top .sub_container {
    position: static; display: none; width: 100%; flex-basis: 100%;
    min-width: 0; max-width: none; margin: 0 0 8px; padding: 0 0 6px 12px;
    border: 0; border-left: 2px solid var(--pa-blue-light); border-radius: 0; box-shadow: none;
  }
  #menu_top .toplink--open > .sub_container { display: block !important; }
  #menu_top .sub_container li a { padding: 12px; min-height: 44px; display: flex; align-items: center; }
  #menu_top .sub_container.submenu--align-right { right: auto; left: 0; }
}

/* компактная шапка на узких экранах: телефон остаётся видимым */
.pa-nav__cta { display: none; }
/* кнопка заявки в шапке уступает место телефону и бургеру раньше, чем начнётся переполнение */
@media (max-width: 1100px) {
  /* дубль кнопки заявки внутри раскрытого меню — на всём мобильном диапазоне */
  .pa-nav__cta { display: flex; margin: 14px 0 18px; }
}
@media (max-width: 900px) {
  .pa-header__bar > .pa-header__contacts > .pa-btn { display: none; }
  .menu-burger .burger-text { display: none; }
  .menu-burger { padding: 10px 12px; }
}
@media (max-width: 760px) {
  .pa-header__bar { padding: 10px var(--pa-pad); gap: 10px; }
  .pa-logo img { width: 42px; }
  .pa-logo__name { font-size: .95rem; }
  .pa-logo__tagline { display: none; }
  .pa-header__contacts { gap: 10px; }
  .pa-phone__note { display: none; }
  .pa-phone__num { font-size: 1.02rem; }
  .pa-header__bar > .pa-header__contacts > .pa-btn { display: none; }
  .menu-burger { padding: 10px 12px; }
  .menu-burger .burger-text { display: none; }
  .pa-nav__cta { display: flex; margin: 14px 0 18px; }
}
@media (max-width: 560px) {
  /* телефон не должен обрезаться: шапка переносится в две строки */
  .pa-header__bar { flex-wrap: wrap; row-gap: 8px; }
  .pa-logo { order: 1; }
  .pa-header__spacer { order: 2; }
  .pa-header__contacts { order: 3; width: 100%; justify-content: space-between; }
  .pa-phone__num { font-size: 1.05rem; }
  .pa-logo__name { font-size: .92rem; }
  .pa-logo { gap: 8px; }
}

/* --- hero главной ------------------------------------------- */
.pa-hero { background: linear-gradient(180deg, var(--pa-blue-light) 0%, #fff 100%); }
.pa-hero__inner {
  max-width: var(--pa-container); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--pa-pad);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.pa-hero h1 { margin: 0 0 .5em; }
.pa-hero__lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--pa-muted); margin: 0 0 1.4em; max-width: 46ch; }
.pa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.6em; }
.pa-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 0; margin: 0; list-style: none; }
.pa-hero__facts li { font-size: .9rem; color: var(--pa-muted); display: flex; align-items: baseline; gap: 8px; }
.pa-hero__facts b { color: var(--pa-blue-deep); font-size: 1.05rem; }
.pa-hero__media { justify-self: end; max-width: 420px; }
.pa-hero__media img {
  width: 100%; border-radius: 16px; display: block;
  box-shadow: 0 18px 40px rgba(16, 52, 77, .16);
}
@media (max-width: 860px) {
  .pa-hero__inner { grid-template-columns: 1fr; }
  .pa-hero__media { display: none; }
}

/* --- макет страницы ----------------------------------------- */
#layout {
  max-width: var(--pa-container) !important; width: 100%;
  margin: 0 auto; padding: 0 var(--pa-pad) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3vw, 48px);
  align-items: start; height: auto;
}
#content { grid-column: 1; grid-row: 1; margin: 24px 0 40px !important; min-width: 0; max-width: 900px; }
#column_right { grid-column: 2; grid-row: 1; float: none; width: auto; clear: none; padding-top: 24px; font-size: .9rem; }
#layout > .clear_float, #content + .clear_float { display: none; }
@media (max-width: 1000px) {
  #layout { grid-template-columns: 1fr; }
  #content { grid-column: 1; grid-row: 1; }
  #column_right { grid-column: 1; grid-row: 2; }
  #column_right { border-top: 1px solid var(--pa-line); padding-top: 24px; }
}

/* правая колонка: причёсываем legacy-блоки */
#column_right .title {
  background: var(--pa-blue-light); color: var(--pa-blue-deep); border-radius: 8px;
  margin: 18px 0 10px; padding: 10px 14px; font-weight: 600;
}
#column_right #progress {
  background: var(--pa-blue-light); border-radius: var(--pa-radius); padding: 14px; margin-bottom: 8px;
}
/* P2-21: сумма в сайдбаре была <h2> и стояла до <h1> страницы — структура заголовков
   ломалась на каждой странице. Теперь это абзац, вид сохранён стилями. */
.pa-progress__sum {
  margin: .4em 0; text-align: center; font-size: 1.3em; font-weight: 700;
  color: #c00; text-decoration: underline;
}
.adaptive-banner-container { margin: 0 0 20px; }
.adaptive-banner-image { width: 100%; border-radius: var(--pa-radius); display: block; }

/* --- футер --------------------------------------------------- */
#footer {
  background: var(--pa-blue-deep); color: #cddbe6; margin: 0; padding: 0;
  font-size: .9rem; text-align: left; border: 0;
}
.pa-footer__inner {
  max-width: var(--pa-container); margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--pa-pad);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
.pa-footer__col .pa-footer__h { color: #fff; font-size: .95rem; font-weight: 600; margin: 0 0 14px; text-transform: none; }
.pa-footer__col ul { list-style: none; margin: 0; padding: 0; }
.pa-footer__col li { margin: 0 0 9px; }
.pa-footer__col a { color: #cddbe6; text-decoration: none; }
.pa-footer__col a:hover { color: #fff; text-decoration: underline; }
.pa-footer__contact { line-height: 1.7; }
.pa-footer__phone { display: inline-block; color: #fff !important; font-size: 1.15rem; font-weight: 700; text-decoration: none; margin-bottom: 6px; }
.pa-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.pa-footer__bottom-inner {
  max-width: var(--pa-container); margin: 0 auto; padding: 18px var(--pa-pad) 28px;
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  font-size: .82rem; color: #9db3c4;
}
.pa-footer__bottom a { color: #9db3c4; }
@media (max-width: 900px) { .pa-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pa-footer__inner { grid-template-columns: 1fr; } }

/* --- контентные страницы волны 1 ----------------------------- */
.pa-page { max-width: 100%; font-size: 1rem; }
.pa-page table { display: block; overflow-x: auto; white-space: normal; }
@media (min-width: 700px) { .pa-page table { display: table; } }

/* --- якоря: цель не должна прятаться под липкой шапкой ------- */
/* --pa-header-h перенесён в основной :root выше (D2, без дубля) */
/* Один механизм отступа: scroll-padding-top на html складывался бы с этим значением. */
[id] { scroll-margin-top: calc(var(--pa-header-h) + 16px); }

/* --- служебное ---------------------------------------------- */
:focus-visible { outline: 2px solid var(--pa-blue); outline-offset: 2px; }
.pa-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --- нейтрализация legacy-правил redesign.css (там стоит !important) --- */
/* бургер в legacy-стилях был position:absolute; top:50% — при открытом меню уезжал вниз */
.menu-burger { position: static !important; top: auto !important; right: auto !important; transform: none !important; }
#menu_top .toplink:hover { background: none !important; box-shadow: none !important; }
#menu_top .toplink:hover > a,
#menu_top .toplink:hover .toplink__link { color: var(--pa-blue-dark) !important; text-shadow: none !important; }
#menu_top .active { box-shadow: none !important; }
#menu_top .sub_container { box-shadow: var(--pa-shadow); border-radius: var(--pa-radius); }
#menu_top .sub_container li:hover { background: none !important; box-shadow: none !important; }
#menu_top .sub_container li a:hover { background: var(--pa-blue-light) !important; color: var(--pa-blue-dark) !important; }
@media (max-width: 1100px) {
  #menu_top .sub_container { position: static !important; box-shadow: none; border-radius: 0; }
  #menu_top .toplink { border-radius: 0; }
}


/* --- scroll-reveal: не прячем шапку, футер и навигацию ---------
   redesign.css выставляет opacity:0 до срабатывания IntersectionObserver.
   Для служебных блоков это риск: при ошибке JS они остаются невидимыми. */
#footer, #footer.rd-fade-up, #footer.rd-fade-left,
.pa-header, .pa-hero, #menu_top, #column_right .title, #progress {
  opacity: 1 !important;
  transform: none !important;
}
/* Заголовки текста тоже не прячем: задержки rd-delay-2…4 держали h2/h3 невидимыми
   до секунды после появления на экране, а без JS — навсегда. */
#content .rd-fade-up, #content .rd-fade-left, #content .rd-fade-right {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- страховка для старых страниц ------------------------------
   Раньше переполнение прятал overflow-x:hidden на html/body; он снят
   (ломал position:sticky), поэтому длинные ссылки и жёсткие размеры
   старых страниц приводятся в порядок явно. */
#content { overflow-wrap: anywhere; }

/* калькулятор пеней: поля были content-box с фиксированной шириной */
#content .td-calculator input,
#content .td-calculator select,
#content .td-calculator textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* его же инлайновая сетка с колонками по 152 px не помещалась в 320 px */
#content .td-calculator [style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
}
/* широкие таблицы старых страниц не должны расширять документ */
#content table { max-width: 100%; }

/* --- P1-17/P1-18/P1-19: форма и список договоров -------------- */
.pa-field { margin: 0 0 14px; }
.pa-field__label { display: block; margin: 0 0 4px; font-size: .95rem; color: #333; }
.pa-field__req { color: #d40000; }                 /* было #f00 — 4.0 к белому */
.pa-field-note { font-size: .88rem; color: #4a5560; margin: 0 0 12px; }
/* Обязательные поля Bitrix отдаёт как <font color='red'> — CSS перекрывает атрибут. */
.form-required, .starrequired, font[color="red"] .starrequired { color: #d40000; }
#layout input[type=text], #layout input[type=email], #layout textarea,
input.inputtext, textarea.inputtextarea { color: #333; }
input.inputtext::placeholder, textarea.inputtextarea::placeholder,
#layout input::placeholder, #layout textarea::placeholder { color: #5e6b78; opacity: 1; }
.choose-contract__label { display: block; margin: 0 0 4px; font-size: .95rem; color: #333; }
.choose-contract__go {
  margin-top: 8px; padding: 8px 16px; min-height: 40px; cursor: pointer;
  background: var(--pa-blue-dark); color: #fff; border: 1px solid var(--pa-blue-dark);
  border-radius: 3px; font-size: .95rem; font-weight: 600;
}
.choose-contract__go:hover { background: #144a70; border-color: #144a70; }
/* P1-18: инлайновый #ff0000 в описании формы даёт 4.0 к белому. Правится оттенок,
   текст и разметка контента не трогаются — правило переживёт редактирование в админке. */
[style*="color: #ff0000"], [style*="color:#ff0000"] { color: #d40000 !important; }

/* --- P3-35: уважение к системным настройкам и зуму ------------------ */
/* Пользователь просил меньше движения — отключаем плавную прокрутку, появления
   и любые переходы. Без этого блоки rd-* всё равно ехали 0.55s, а якоря
   доскроллировались анимацией. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* появление по прокрутке не должно оставлять текст невидимым при отключённой анимации */
  .rd-fade-up, .rd-fade-left, .rd-fade-right, .rd-scale-in {
    opacity: 1 !important; transform: none !important;
  }
}

/* Зум текста до 200% не должен давать горизонтальной прокрутки: длинные слова
   и цепочки &nbsp; в редактируемых включениях переносим принудительно. */
#column_right, #column_right * { overflow-wrap: anywhere; }
#progress b, #progress strong { white-space: normal; }
/* При 200% текста кнопки первого экрана не помещались в 390px: .pa-btn запрещает
   перенос (нужно в шапке), а grid-колонка не сжималась. В hero перенос разрешаем. */
.pa-hero__text, .pa-hero__media { min-width: 0; }
.pa-hero__actions .pa-btn { white-space: normal; }
.pa-hero__facts li, .pa-hero__lead, .pa-hero h1 { overflow-wrap: anywhere; }
/* На 320px с 200% текста название рядом с логотипом переставало помещаться:
   .pa-logo не сжимался (flex:0 0 auto), а название не переносилось. */
/* Правила без медиазапроса: при обычном размере шрифта элементы помещаются и
   не переносятся, перенос включается только когда места действительно нет. */
.pa-logo { flex: 0 1 auto; min-width: 0; }
.pa-logo > span { min-width: 0; }
.pa-logo__name { overflow-wrap: anywhere; }
/* flex:0 0 auto держал ширину блока по max-content, поэтому внутренний перенос
   не срабатывал и телефон с кнопкой уезжали за экран. */
.pa-header__contacts { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }

/* переполнял именно футерный .pa-btn: он вне .pa-header, правило было слишком узким */
.pa-btn { white-space: normal; max-width: 100%; }
.pa-phone__num { white-space: normal; overflow-wrap: anywhere; }
.pa-header__bar { min-width: 0; }
#menu_top .toplink > a, #menu_top .toplink__link { white-space: normal; overflow-wrap: anywhere; }
/* Длинные однословные пункты футера («Предпринимательские риски») при 200% текста
   не помещались в колонку сетки и уезжали за экран. */
.pa-footer__col li, .pa-footer__col a, .pa-footer__contact { overflow-wrap: anywhere; }

/* === D2 TYPOGRAPHY CANARY BEGIN === */
/*
 * typography-canary.css — Delivery 2. Локальный canary, НЕ выложенный код.
 *
 * Что это. Секция, которую поставка D2 добавляет в конец `modern.css` между
 * маркерами `D2 TYPOGRAPHY CANARY BEGIN/END`. Здесь она лежит отдельным файлом,
 * потому что записи на staging заблокированы RD-01/RD-02/RD-03. Перенос —
 * `proposed-production-diff.patch`, собранный из этого же файла.
 *
 * Токены. Файл НЕ объявляет своего `:root`. Все переменные `--pa-*` объявлены
 * в единственном существующем блоке `:root` в `modern.css`; D2 пополняет этот
 * блок и сливает в него второй, дублирующий `:root` (`--pa-header-h`).
 * Карта токенов и разбор трёх параллельных систем — `token-map.md`.
 *
 * Границы (MASTER-PLAN §2, DECISIONS.md, RD-04 от 30.07.2026):
 *   - тексты, `href`, H1 и изображения не меняются;
 *   - HTML-структура не меняется: ни `<details>`, ни обёртки таблицы,
 *     ни ценового блока CSS не создаёт;
 *   - палитра не меняется: новых цветов не вводится;
 *   - новых `!important` нет — ни одного;
 *   - иерархия CTA и оформление компонентов (кнопки, карточки, таблицы,
 *     цитаты) — это D3, здесь их нет. D2 = только типографика и ритм.
 *
 * Специфичность. Страницы волны 1 (RC-3) и главная (RC-2) несут инлайновый
 * `<style>` в теле документа: при равной специфичности он побеждает внешний
 * файл. Префикс `body` даёт (0,1,1) против (0,1,0) и снимает конфликт без
 * единого `!important`. Это и есть механика риска RC-2/RC-3.
 *
 * Canary scope — три кластера из D1:
 *   RC-3  `.pa-page`      длинный экспертный материал (основная цель GOALS §2)
 *   RC-2  `.pa-wrap`      главная, инлайновый `<style>`
 *   RC-1  `#column_right` правый сайдбар глобальной оболочки
 * Остальные кластеры (RC-4…RC-9) D2 не затрагивает: расширение — после
 * приёмки canary, по §7 плана.
 */

/* ============================================================
   RC-3 · Длинный экспертный материал: мера строки и ритм
   DECISIONS §5 разрешает размеры шрифта, интерлиньяж, вертикальный
   ритм и читаемость длинных страниц.

   Мера строки. Инлайновый `<style>` страницы задаёт колонке 860px, но в
   реальной сетке шаблона (#layout: #content + #column_right) на 1440 колонка
   получается 833px при 16px — это 77 знаков в строке. Прототип D1 сужал её
   до 68ch и удлинял страницу на +43%; решением RD-04 §2 это признано
   чрезмерным, а 68ch объявлено верхней границей сужения, не целью.
   D2 берёт `--pa-measure: 80ch` — заметно шире границы D1: 70 знаков в строке
   при +17.8% высоты на 1440 (замеры — `measurements.md`). Значение живёт в
   токене, поэтому пересмотр не требует правки правил.
   ============================================================ */

body .pa-page {
  max-width: var(--pa-measure);
  font-size: var(--pa-fs-prose);
  line-height: var(--pa-lh-prose);
}

body .pa-page p,
body .pa-page ul,
body .pa-page ol {
  margin: 0 0 var(--pa-flow);
}

body .pa-page li {
  margin: .3em 0;
}

/* Отступ сверху больше, чем снизу: заголовок притягивается к своему разделу,
   а не висит ровно между двумя абзацами. */
body .pa-page h2 {
  line-height: var(--pa-lh-heading);
  margin: var(--pa-flow-h2) 0 .5em;
}

body .pa-page h3 {
  line-height: var(--pa-lh-heading);
  margin: var(--pa-flow-h3) 0 .4em;
}

body .pa-page h1 {
  line-height: 1.2;
  margin: 0 0 .5em;
}

/* Лид — первый абзац после h1. Разметка уже есть, новая не создаётся. */
body .pa-page h1 + p {
  font-size: 1.05em;
  line-height: 1.55;
}

/* ============================================================
   RC-2 · Главная: читаемость описаний
   Карточки, сетки и кнопки главной — предмет D3. Здесь только текст.
   Инлайновый `<style>` задаёт описаниям 14px, вводке подбора 13px, отзывам
   13px — мельче основного текста сайта. Приводим их к `--pa-fs-ui`.
   Ширина колонки главной не трогается: она карточная, а не текстовая, и
   сужение здесь было бы изменением раскладки, а не типографики (D3/D4).
   `.pa-card-list` (12px внутри карточек) сознательно не трогаем: это
   внутренняя плотность компонента, её пересматривает D3.
   ============================================================ */

body .pa-wrap .pa-desc,
body .pa-wrap .pa-select-intro,
body .pa-wrap .pa-review-text {
  font-size: var(--pa-fs-ui);
  line-height: var(--pa-lh-prose);
}

body .pa-wrap .pa-h2,
body .pa-wrap .pa-card-title,
body .pa-wrap .pa-ret-title {
  line-height: var(--pa-lh-heading);
}

/* ============================================================
   RC-1 · Правый сайдбар: интерлиньяж мелкого текста
   DECISIONS §4: сайдбар сохраняется целиком. Здесь не меняется ни один
   блок и ни одна ссылка — только межстрочный интервал и размер шрифта
   списков, которые в legacy-шаблоне слипаются.
   Красный inline-акцент не переопределяется: по RD-04 п. 3 новых
   `!important` не добавляем, а без него inline-стиль не перебить.
   ============================================================ */

#column_right {
  font-size: var(--pa-fs-ui);
  line-height: var(--pa-lh-ui);
}

#column_right li {
  margin: .3em 0;
}

#column_right .title {
  line-height: var(--pa-lh-heading);
}
/* === D2 TYPOGRAPHY CANARY END === */

/* === D3 COMPONENTS BEGIN === */
/*
 * components.css — Delivery 3. Локальная секция, НЕ выложенный код.
 *
 * Что это. Секция, которую поставка D3 добавляет в конец `modern.css` между
 * маркерами `D3 COMPONENTS BEGIN/END`, поверх секции D2. Здесь она лежит
 * отдельным файлом, потому что записи на staging заблокированы
 * RD-01/RD-02/RD-03. Перенос — `proposed-production-diff.patch`, собранный из
 * этого же файла и применяемый ПОСЛЕ патча D2.
 *
 * Токены. Файл НЕ объявляет своего `:root`. Все переменные `--pa-*` объявлены
 * в единственном существующем блоке `:root` в `modern.css`; D3 пополняет этот
 * блок восемью геометрическими токенами и ни одного цвета не вводит
 * (правило `token-map.md` §4).
 *
 * Границы (MASTER-PLAN §2 и §7 D3, DECISIONS.md, RD-04 от 30.07.2026):
 *   - только уже существующая разметка: ни одного нового элемента, обёртки
 *     или псевдоэлемента с `content:`;
 *   - тексты, `href`, H1 и изображения не меняются;
 *   - палитра не меняется: ни одного литерального цвета, только `var(--pa-*)`,
 *     `transparent` и `currentColor`;
 *   - новых `!important` нет — ни одного;
 *   - шесть пунктов RD-04 не исправляются: FAQ, обёртка таблицы, красный
 *     инлайновый акцент в сайдбаре, ценовой блок, CTA на хабах волны 1,
 *     тело RC-4 — см. `delivery-notes.md`;
 *   - иерархия CTA не строится: по RD-04 п. 5 это Delivery 6.
 *
 * Специфичность. Главная (RC-2) и 21 страница волны 1 (RC-3) несут инлайновый
 * `<style>` в теле документа: при равной специфичности он побеждает внешний
 * файл. Префикс `body` даёт (0,1,1) и выше против (0,1,0) и снимает конфликт
 * без единого `!important` — та же механика, что в D2.
 *
 * Принцип D3. Компонент = один геометрический контракт (скругление, поле,
 * рамка, толщина начертания, размер зоны нажатия, переход). Цвет каждого
 * варианта сохраняется как есть: смена цвета — изменение фирменной гаммы,
 * прямой запрет `DECISIONS.md` §2. Полный список — `component-spec.md`.
 */

/* ============================================================
   K-1 · Кнопка: единый геометрический контракт
   Сегодня одно и то же действие оформлено четырьмя способами:
     .pa-btn            modern.css        радиус 10px, поле 11px 20px
     .pa-cta            инлайн волны 1    радиус  3px, поле .6em 1.1em
     .pa-btn-primary    инлайн главной    радиус  3px, поле 13px 16px, без рамки
     .pa-select-go      инлайн главной    радиус  3px, поле  9px 16px
   D3 приводит их к одному контракту и не трогает ни один цвет.
   ============================================================ */

.pa-btn,
.choose-contract__go,
body .pa-page a.pa-cta,
body .pa-wrap .pa-btn-primary,
body .pa-wrap .pa-btn-secondary,
body .pa-wrap .pa-select-go {
  padding: var(--pa-ctl-pad-y) var(--pa-ctl-pad-x);
  font-weight: var(--pa-ctl-fw);
  border-width: 1px;
  border-style: solid;
  text-decoration: none;
}

/* Скругление и переход — всем, КРОМЕ двух `<button type="submit">`.
   `redesign.css` (стр. 153–157) задаёт `input[type=submit], button[type=submit],
   .btn, .button` радиус и переход через `!important`. Перебить это можно только
   новым `!important`, а он в D3 запрещён. Именованный выброс:
   `.pa-select-go` и `.choose-contract__go` сохраняют радиус 4px и переход
   legacy-слоя. Разбор существующих `!important` — D7 (§8.5 плана). */
.pa-btn,
body .pa-page a.pa-cta,
body .pa-wrap .pa-btn-primary,
body .pa-wrap .pa-btn-secondary {
  border-radius: var(--pa-radius-sm);
  transition: var(--pa-ctl-transition);
}

/* Заливные варианты рамки не имели, поэтому были на 2px ниже контурных при
   одинаковом поле. Прозрачная рамка выравнивает бокс, не добавляя цвета:
   фон элемента рисуется под рамкой и вид не меняется. */
body .pa-page a.pa-cta,
body .pa-wrap .pa-btn-primary {
  border-color: transparent;
}

/* Контурный вариант в волне 1: цвет рамки возвращается токеном, равным
   прежнему литералу #1b5f8f. */
body .pa-page a.pa-cta.pa-cta--phone {
  border-color: var(--pa-blue-dark);
}

/* Блочные кнопки главной получают минимальную зону нажатия 44px и центрируют
   подпись. `.pa-cta` в текст волны 1 сюда не входит: это inline-block внутри
   абзаца, и min-height сместил бы базовую линию строки. Его высота уже 48px
   за счёт поля.

   D7-C1 (31.07.2026). `.choose-contract__go` здесь не хватало. Это второй из
   двух `<button type="submit">` селектора договоров (§8 component-spec.md), он
   стоит в одном контракте с `.pa-select-go` в правиле полей и рамки выше, но
   собственное `min-height: 40px` из базовой секции оставляло его на 40px, тогда
   как соседний `select` того же виджета — 44px. Довод исключения `.pa-cta` к
   нему не относится: он не внутри абзаца, и его высота НИЖЕ порога, а не выше.
   Замер до/после на 390/768/1024/1440 — ops/relaunch/delivery-7/evidence. */
.pa-btn,
.choose-contract__go,
body .pa-wrap .pa-btn-primary,
body .pa-wrap .pa-btn-secondary,
body .pa-wrap .pa-select-go {
  min-height: var(--pa-ctl-tap);
}

body .pa-wrap .pa-btn-primary,
body .pa-wrap .pa-btn-secondary,
body .pa-wrap .pa-select-go {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   K-2 · Карточка: единая поверхность
   Сегодня: .pa-card и .pa-ret-card — рамка #ddd, радиус 4px, поле 10–11px;
   .pa-section — рамка #ddd, радиус 4px, поле 16px; .pa-select-block — #e0e0e0,
   радиус 4px, поле 12px; #progress и #column_right .title — свои радиусы.
   Приводим рамку к --pa-line, радиус к двухступенчатой шкале
   (--pa-radius для панели, --pa-radius-sm для плотной карточки), поле — к
   --pa-card-pad. Фон каждой карточки сохраняется: он часть гаммы.
   ============================================================ */

body .pa-wrap .pa-section {
  border-color: var(--pa-line);
  border-radius: var(--pa-radius);
  padding: var(--pa-card-pad);
}

body .pa-wrap .pa-card,
body .pa-wrap .pa-ret-card,
body .pa-wrap .pa-select-block {
  border-color: var(--pa-line);
  border-radius: var(--pa-radius-sm);
  padding: var(--pa-card-pad);
}

/* У блока сайдбара рамки нет — только заливка; правило про цвет рамки было бы
   мёртвым, поэтому здесь только скругление и поле. */
#column_right #progress {
  border-radius: var(--pa-radius-sm);
  padding: var(--pa-card-pad);
}

/* Заголовок блока сайдбара — та же скруглённая плашка, что и карточки.
   Поле не трогаем: плашка однострочная, 14px по вертикали её раздули бы. */
#column_right .title {
  border-radius: var(--pa-radius-sm);
}

/* ============================================================
   K-3 · Врезка: цитата волны 1 и отзыв на главной
   Оба компонента — «текст с акцентной полосой слева». Сегодня у них разные
   поля, радиусы и толщина полосы. Выравниваем геометрию; акцентный цвет
   каждого остаётся своим (в волне 1 он равен --pa-blue).
   ============================================================ */

body .pa-page blockquote,
body .pa-wrap .pa-review-item {
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 0 var(--pa-radius-sm) var(--pa-radius-sm) 0;
  padding: var(--pa-card-pad);
  margin: var(--pa-flow) 0;
}

body .pa-page blockquote {
  border-left-color: var(--pa-blue);
  background: var(--pa-blue-light);
}

/* ============================================================
   K-4 · Таблица волны 1
   `display` не трогаем: механизм горизонтальной прокрутки узкого экрана уже
   есть в modern.css (`.pa-page table{display:block;overflow-x:auto}` и
   возврат к `display:table` от 700px). Новая обёртка не создаётся — RD-04 п. 2.
   Legacy-таблицы (`#content table` на /pages/* и в списках) сюда не входят:
   их вёрстка подогнана под старые размеры и проверить её нечем — это D5.
   ============================================================ */

body .pa-page table {
  border-collapse: collapse;
  margin: var(--pa-flow-h3) 0;
}

body .pa-page th,
body .pa-page td {
  border: 1px solid var(--pa-line);
  padding: var(--pa-cell-pad);
  text-align: left;
  vertical-align: top;
}

body .pa-page th {
  background: var(--pa-blue-light);
  color: var(--pa-blue-dark);
  font-weight: var(--pa-ctl-fw);
}

/* ============================================================
   K-5 · Разделитель
   ============================================================ */

body .pa-page hr {
  border: 0;
  border-top: 1px solid var(--pa-line);
  margin: var(--pa-flow-h2) 0;
}

/* ============================================================
   K-6 · Хлебные крошки
   В каскаде живут два независимых оформления одного компонента:
   `ul.breadcrumb-navigation` (template_styles.css, 85%, span #1b5f8f) и
   `.breadcrumb-items`/`.breadcrumb_items` (redesign.css, .88em, var(--muted)).
   Приводим оба к одному виду. НОВЫХ селекторов не вводим: фактическая разметка
   компонента `bitrix:breadcrumb .default` в репозитории отсутствует, и угадывать
   её нельзя. Визуальное подтверждение блокируется RD-01/RD-02 —
   см. `delivery-notes.md`.
   ============================================================ */

ul.breadcrumb-navigation,
.breadcrumb-items,
.breadcrumb_items {
  padding: 6px 0 10px;
  font-size: .88em;
  line-height: var(--pa-lh-ui);
  color: var(--pa-muted);
}

ul.breadcrumb-navigation a,
.breadcrumb-items a,
.breadcrumb_items a {
  color: var(--pa-blue-dark);
  text-decoration: none;
}

ul.breadcrumb-navigation a:hover,
.breadcrumb-items a:hover,
.breadcrumb_items a:hover {
  text-decoration: underline;
}

ul.breadcrumb-navigation span {
  color: var(--pa-muted);
}
/* === D3 COMPONENTS END === */

/* === D4 SHELL BEGIN === */
/*
 * shell.css — Delivery 4. Локальная секция, НЕ выложенный код.
 *
 * Что это. Секция, которую поставка D4 добавляет в конец `modern.css` между
 * маркерами `D4 SHELL BEGIN/END`, поверх секций D2 и D3. Здесь она лежит
 * отдельным файлом, потому что записи на staging заблокированы
 * RD-01/RD-02/RD-03. Перенос — `proposed-production-diff.patch`, собранный из
 * этого же файла и применяемый ПОСЛЕ патчей D2 и D3.
 *
 * Область. Только оболочка (RC-1) и служебные состояния (RC-9) по матрице
 * `delivery-1/manifest.json`: шапка, липкая строка, верхнее меню, правый
 * сайдбар, футер, сетка `#layout`, состояние `admin:showpanel` и короткая
 * страница ошибки. Содержимое страниц D4 не трогает: главная — D6, волна 1 —
 * D6, legacy и формы — D5.
 *
 * Токены. Файл НЕ объявляет своего `:root`. Все переменные `--pa-*` объявлены в
 * единственном существующем блоке `:root` в `modern.css`; D4 пополняет тот же
 * блок шестью токенами раскладки и ни одного цвета не вводит (`token-map.md` §4).
 *
 * Второй файл поставки. Смещение под административную панель включает
 * `shell-offset.js` — блок, который D4 добавляет в конец `template/redesign.js`.
 * Здесь объявлен только токен и правила, которые его читают; включение —
 * там. Разделение сознательное: CSS не умеет измерить панель, а глобальное
 * ненулевое значение в `:root` дало бы пустую полосу обычному посетителю.
 *
 * Границы (MASTER-PLAN §7 D4, DECISIONS.md, RD-04 от 30.07.2026):
 *   - PHP-шаблоны оболочки не меняются: `header.php`, `footer.php`,
 *     `menu_top2_template.php`, включаемые файлы остаются как есть;
 *   - тексты, пункты меню, `href`, H1, изображения и IA не меняются;
 *   - палитра не меняется: ни одного литерального цвета;
 *   - новых `!important` нет — ни одного; существующие 38 не пересматриваются;
 *   - ни одного нового элемента, обёртки или псевдоэлемента с `content:`;
 *   - ничего не скрывается: `display:none` в секции нет.
 *
 * Всё, что ниже, опирается на замер стенда, а не на предположение: числа — в
 * `measurements.json` и `D4-REPORT.md` §4.
 */

/* ============================================================
   S-1 · Липкая оболочка и административная панель  (RC-9 admin:showpanel)
   Липкая строка шапки прибита к `top: 0`. Административная панель Bitrix
   (`$APPLICATION->ShowPanel()`) стоит в самом верху окна, поэтому редактор
   получает шапку ПОД панелью: строка с логотипом, телефоном и бургером
   оказывается перекрыта, а «Правка» — недоступна.
   Смещение вынесено в токен `--pa-shell-top`. В `:root` он объявлен как `0px` и
   таким остаётся навсегда: для обычного посетителя не меняется НИЧЕГО — ни
   пикселя, ни одного computed style. Ненулевое значение ставит только
   `shell-offset.js` и только на той странице, где панель фактически отрисована;
   значение он берёт из замера самой панели, а не из объявленного числа.
   Правки `:root` руками после выкладки не требуется — и она запрещена: `:root`
   глобален, ненулевое значение в нём дало бы пустую полосу под липкой шапкой
   всем посетителям без панели.
   Механика проверена на стенде: вид `rc9-admin-panel` имитирует панель 48px и
   НЕ объявляет токен — значение целиком приходит из замера.
   ============================================================ */

@media (min-width: 1101px) {
  /* на desktop липнет только верхняя строка (см. modern.css, «шапка») */
  .pa-header__bar { top: var(--pa-shell-top); }
}
@media (max-width: 1100px) {
  /* на мобильном липнет вся шапка вместе с панелью меню */
  .pa-header { top: var(--pa-shell-top); }
}
/* ссылка «Перейти к основному содержанию» появляется по фокусу в самом верху —
   под панелью её не видно, а это единственный обход блоков (WCAG 2.4.1) */
.pa-skip:focus { top: var(--pa-shell-top); }

/* ============================================================
   S-2 · Фокус и якорь не уходят под липкую строку
   Замер «до» (пять видов × четыре ширины, 984 фокусируемых элемента): 44 из них
   после `focus()` оказывались ФАКТИЧЕСКИ перекрыты липкой шапкой — проверено не
   пересечением прямоугольников, а `elementFromPoint`. Больше всего страдают
   ссылки футера у конца страницы: прокручивать дальше некуда, элемент остаётся
   в верхних 93…125px окна, а они закрыты липкой строкой. `scroll-margin-top`
   стоял только на `[id]`, то есть на якорях; у ссылок, кнопок и полей его нет.
   После правила — 0 перекрытых из тех же 984.
   Запас считается одним выражением `--pa-shell-safe`. `max()` в нём страхует
   период до срабатывания JS: `--pa-header-h` объявлен со значением 72px, а
   фактическая липкая строка — 92…124px (замер), и до `syncHeaderHeight()`
   якорь уезжал под шапку на 20…52px.
   ============================================================ */

[id],
a[href], area[href], button, input, select, textarea, summary,
[tabindex]:not([tabindex="-1"]) {
  scroll-margin-top: var(--pa-shell-safe);
}

/* ============================================================
   S-3 · Оболочка без JS не занимает весь экран
   P2-22 показывает меню развёрнутым, пока на `<html>` нет класса `js`, —
   иначе без JS навигация мертва. Но шапка на ширинах <=1100px липкая, и
   развёрнутое меню делает липкий блок выше окна: замер «до» — 1066…1071px
   при окне 900px. Пока JS не отработал (или отключён), страница закрыта
   меню целиком. Пока класса `js` нет — шапка обычная, не липкая.
   Селектор `html:not(.js)` уже используется в `modern.css`, новых нет.
   ============================================================ */

@media (max-width: 1100px) {
  html:not(.js) .pa-header { position: static; }
}

/* ============================================================
   S-4 · Высота раскрытой панели меню — от фактической высоты шапки
   Было `max-height: calc(100vh - 76px)`, где 76px — константа. Фактическая
   липкая шапка на 390px — 124px, на 768px — 92px, то есть панель получалась
   выше окна на 48px и нижние пункты уезжали за нижний край. Во время работы JS
   размер всё равно переписывает inline-стилем (`sizePanel()`), но до его
   срабатывания и при ошибке скрипта работает именно это значение.
   ============================================================ */

@media (max-width: 1100px) {
  .pa-nav.is-open {
    max-height: calc(100vh - var(--pa-shell-top) - max(var(--pa-header-h), var(--pa-shell-hmin)));
  }
}

/* ============================================================
   S-5 · Геометрия раскладки вынесена в токены
   Значения те же, что стоят в `modern.css` (`300px` и `clamp(24px, 3vw, 48px)`),
   поэтому computed styles обязаны совпасть до пикселя — это проверяется
   машинно на всех четырёх ширинах. Смысл правила один: ширина колонки
   сайдбара перестаёт быть константой в двух местах и становится точкой
   настройки для D6 и D7.
   Правило ограничено `min-width: 1001px`: ниже порога контента раскладка
   перестроена в одну колонку (`modern.css`, `@media (max-width: 1000px)`),
   и трогать её D4 не должна.
   ============================================================ */

@media (min-width: 1001px) {
  #layout {
    grid-template-columns: minmax(0, 1fr) var(--pa-aside-w);
    column-gap: var(--pa-aside-gap);
  }
}
/* === D4 SHELL END === */

/* === D5 TEMPLATES BEGIN === */
/*
 * templates.css — Delivery 5. Локальная секция, НЕ выложенный код.
 *
 * Что это. Секция, которую поставка D5 добавляет в конец `modern.css` между
 * маркерами `D5 TEMPLATES BEGIN/END`, поверх секций D2, D3 и D4. Здесь она
 * лежит отдельным файлом, потому что записи на staging заблокированы
 * RD-01/RD-02/RD-03. Перенос — `proposed-production-diff.patch`, собранный из
 * этого же файла и применяемый ЧЕТВЁРТЫМ.
 *
 * Токены. Файл НЕ объявляет своего `:root`. Все переменные `--pa-*` объявлены
 * в единственном существующем блоке `:root` в `modern.css`; D5 пополняет его
 * ОДНИМ токеном (`--pa-field-pad`) и ни одного цвета не вводит.
 *
 * Границы (MASTER-PLAN §2 и §7 D5, DECISIONS.md, RD-04 от 30.07.2026):
 *   - только уже существующая разметка: ни одного нового элемента, обёртки
 *     или псевдоэлемента с `content:`;
 *   - тексты, `href`, H1 и изображения не меняются;
 *   - палитра не меняется: ни одного литерального цвета;
 *   - новых `!important` нет — ни одного;
 *   - ни один селектор не изобретён: каждый либо находится на стенде в
 *     подлинной разметке репозитория, либо уже присутствует в боевом каскаде
 *     (проверяется машинно, `verify_templates.py`, проверка «происхождение
 *     селекторов»).
 *
 * Область (матрица «поставка → кластеры», D1):
 *   RC-7  формы     `.pa-field` — обёртка поля во ВСЕХ трёх шаблонах форм
 *                   (`form.result.new`, `iblock.element.add.form` faq и reviews),
 *                   `.button` — кнопка отправки тех же форм;
 *   RC-6  договоры  `#choose_contract` — компонент выбора договора;
 *   RC-5  списки    `#paging` — постраничная навигация.
 *
 * Чего здесь НЕТ и почему — `delivery-notes.md` §5. Коротко: RC-5 (`.item_list`),
 * RC-6 (`news.detail`) и RC-8 (`/pages/*`) правятся только после RD-01 — их
 * разметки в репозитории нет, а править вслепую вёрстку, подогнанную под legacy,
 * значит менять то, что нечем проверить.
 *
 * Специфичность. Legacy-правило `#layout form input, #layout textarea,
 * #layout select` (template_styles.css, стр. 378) имеет вес (1,0,2) и
 * побеждает `redesign.css`. Здесь используется `#layout .pa-field <тег>` —
 * (1,1,2), то есть на один класс выше, без единого `!important`. Класс
 * `.pa-field` выбран не ради веса: он ограничивает правило ровно полями форм
 * и не достаёт `<select class="pa-select">` на главной (RC-2, инлайновый
 * `<style>`, отдельный change set D6).
 */

/* ============================================================
   F-1 · Поле формы: семейство, поле, зона нажатия
   Сегодня поле ввода наследует от template_styles.css (стр. 378) связку
   `font: 1em Verdana` + отсутствие внутреннего поля: текст прижат к рамке,
   а высота однострочного поля — 22px при 16px шрифта. Семейство Verdana
   осталось от старого шаблона и не совпадает ни с одним другим текстом
   страницы. Цвет текста поля не трогаем: его уже задаёт modern.css (стр. 398).
   ============================================================ */

/* Перечислять типы полей поимённо нельзя: в трёх шаблонах форм сегодня
   встречаются только `text`, `email`, `textarea` и `checkbox`, а состав полей
   формы №1 задаётся в админке — завтра там появится `tel`, и поимённый список
   оставит его без оформления. Поэтому правило описывает поле как «любое поле
   ввода, кроме флажка, переключателя и кнопки». Проверка «происхождение
   селекторов» (`verify_templates.py`) требует, чтобы селектор находил элемент
   на стенде, — этот находит. */
#layout .pa-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
#layout .pa-field textarea {
  font-family: inherit;
  font-size: 1em;
  padding: var(--pa-field-pad);
}

/* Интерлиньяж поля НЕ переопределяется намеренно. `--pa-lh-ui` (1.55) в
   `<textarea rows="10">` форм faq и reviews поднял бы высоту поля с 186px до
   268px — четверть экрана телефона под пустой рамкой. Введённый текст читается
   и при интерлиньяже браузера по умолчанию; поставка D5 меняет геометрию
   контрола, а не набор внутри него. */

/* Зона нажатия однострочных полей — та же величина, что у блочных кнопок D3.
   `textarea` сюда не входит: его высоту задаёт `rows`, и она заведомо больше. */
#layout .pa-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]) {
  min-height: var(--pa-ctl-tap);
}

/* ============================================================
   F-2 · Ритм формы: один интервал вместо двух
   `.pa-field` уже даёт 14px снизу (modern.css, стр. 392), а legacy-правило
   добавляет полю собственные `margin: 11px 0`. Между двумя полями получается
   14 + 11 + 11 = 36px, а между подписью и её полем — 11px: подпись визуально
   отрывается от своего поля. Снимаем margin у самого поля; интервал остаётся
   один и принадлежит обёртке.
   ============================================================ */

#layout .pa-field input,
#layout .pa-field textarea {
  margin: 0;
}

/* Флажок «не публиковать вопрос» стоит в одной строке со своей подписью.
   `width: auto` из legacy оставляет ему 13px — меньше зоны нажатия и мельче
   строки. Задаём явный размер и выравнивание по середине строки. */
#layout .pa-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 .5em 0 0;
  vertical-align: middle;
}

/* ============================================================
   F-3 · Кнопка отправки: геометрия
   `<input class="button" type="submit">` — единственная кнопка отправки всех
   трёх форм. Сегодня: `padding: 6px 16px`, `min-height: 30px`
   (template_styles.css, стр. 514) и подчёркивание от той же строки, где
   `.button` описан как ссылка (стр. 392). Приводим к контракту контрола D3:
   поле, зона нажатия 44px, начертание подписи. ЦВЕТ НЕ ТРОГАЕМ — ни фон, ни
   подпись: см. `delivery-notes.md` §6, вопрос владельцу о ведущем действии.
   Скругление приходит из `redesign.css` (стр. 152–157) через `!important`;
   перебить его можно только новым `!important`, а он в D5 запрещён — тот же
   именованный выброс, что в D3.
   ============================================================ */

.button,
#layout form .button {
  padding: var(--pa-ctl-pad-y) var(--pa-ctl-pad-x);
  min-height: var(--pa-ctl-tap);
  font-family: inherit;
  font-size: 1em;
  font-weight: var(--pa-ctl-fw);
  text-decoration: none;
}

/* ============================================================
   F-4 · Выбор договора (компонент what_contract, RC-6)
   `#choose_contract select` (template_styles.css, стр. 399) — свой список без
   зоны нажатия и без внутреннего поля; кнопку «Перейти» рядом уже привела к
   контракту D3. Выравниваем список по той же высоте, чтобы пара «список +
   кнопка» стояла в одну линию. Цвет `#929da5` не трогаем: он же — цвет
   выбранного пункта, и это вопрос гаммы (`delivery-notes.md` §6).
   ============================================================ */

#choose_contract select {
  min-height: var(--pa-ctl-tap);
  padding: var(--pa-field-pad);
  font-family: inherit;
  font-size: 1em;
}

/* ============================================================
   F-5 · Постраничная навигация (RC-5)
   Правило `#paging a, #paging span` с зоной нажатия 44px уже есть в
   template_styles.css (стр. 759), но живёт внутри `@media (max-width: 768px)`:
   на планшете и десктопе ссылки страниц остаются высотой в строку текста.
   Поднимаем ту же геометрию на все ширины — ничего нового не вводится, правило
   переносится из мобильной ветки в общую.

   Разметку `#paging` подтвердить осмотром нельзя: шаблонов
   `system.pagenavigation` в репозитории нет (RD-01). Правило безопасно ровно
   потому, что оно аддитивно: если селектор на боевом сайте не встречается,
   оно ничего не делает; если встречается — даёт зону нажатия, которой сейчас
   нет. Проверка после RD-01 — `delivery-notes.md` §4.
   ============================================================ */

#paging a,
#paging span {
  display: inline-flex;
  align-items: center;
  min-height: var(--pa-ctl-tap);
  padding: 4px 8px;
}
/* === D5 TEMPLATES END === */