/*
 * RENSU Extracts — standalone site layer
 * Loaded AFTER styles.css. Adds: base reset outside .rx-site,
 * модальное окно заявки и подстраницы (правовые, «спасибо»).
 * Brand tokens mirror docs/06_DESIGN_SYSTEM.md.
 */

:root {
  --rx-ink: #14211c;
  --rx-forest: #173c31;
  --rx-forest-deep: #0f2a22;
  --rx-moss: #5c735f;
  --rx-tea: #b97428;
  --rx-tea-dark: #7e4a17;
  --rx-bone: #f2eee4;
  --rx-sand: #e6dcc9;
  --rx-milk: #faf8f2;
  --rx-white: #ffffff;
  --rx-danger: #9b2c2c;
  --rx-success: #2f684b;
  --rx-line: rgba(20, 33, 28, 0.16);
  --rx-radius-sm: 14px;
  --rx-radius-md: 24px;
  --rx-radius-lg: 40px;
}

/* --- Base reset (only outside .rx-site; production-safe for a standalone site) --- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--rx-milk);
  color: var(--rx-ink);
  font-family: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 3px solid var(--rx-tea);
  outline-offset: 2px;
}

/* =========================================================
   Модальное окно заявки — доступная форма прямо на странице
   ========================================================= */
.rx-modal[hidden] { display: none !important; }

.rx-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 42, 34, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.rx-modal.is-open { opacity: 1; }

.rx-modal-dialog {
  position: relative;
  width: min(660px, 100%);
  max-height: min(880px, calc(100vh - 40px));
  overflow: auto;
  padding: 40px clamp(20px, 4vw, 44px);
  border-radius: var(--rx-radius-md);
  background: var(--rx-milk);
  color: var(--rx-ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.32);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rx-modal.is-open .rx-modal-dialog { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rx-modal,
  .rx-modal-dialog { transition: none; }
  .rx-modal-dialog { transform: none; }
}

.rx-modal-kicker {
  margin: 0 0 10px;
  color: var(--rx-tea);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rx-modal-dialog h2 {
  margin: 0 48px 8px 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.03;
}

.rx-modal-sub {
  margin: 0 0 22px;
  max-width: 46ch;
  color: var(--rx-moss);
  font-size: 15px;
  line-height: 1.5;
}

.rx-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--rx-forest);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.rx-modal-close:hover { background: var(--rx-forest-deep); transform: rotate(90deg); }

.rx-form { display: grid; gap: 15px; }

.rx-field { display: grid; gap: 7px; }

.rx-field > label,
.rx-field-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rx-field .rx-req { color: var(--rx-tea); }

.rx-form input,
.rx-form select,
.rx-form textarea {
  width: 100%;
  border: 1px solid var(--rx-sand);
  border-radius: var(--rx-radius-sm);
  padding: 13px 14px;
  background: #fff;
  color: var(--rx-ink);
  font: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.rx-form input::placeholder,
.rx-form textarea::placeholder { color: #9aa39c; }

.rx-form input:focus,
.rx-form select:focus,
.rx-form textarea:focus {
  outline: none;
  border-color: var(--rx-forest);
  box-shadow: 0 0 0 3px rgba(23, 60, 49, 0.16);
}

.rx-form textarea { resize: vertical; min-height: 96px; }

.rx-form input[aria-invalid="true"],
.rx-form select[aria-invalid="true"],
.rx-form textarea[aria-invalid="true"] {
  border-color: var(--rx-danger);
  box-shadow: 0 0 0 3px rgba(155, 44, 44, 0.14);
}

.rx-field-error {
  min-height: 0;
  color: var(--rx-danger);
  font-size: 12.5px;
  font-weight: 600;
}

.rx-field-row {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 520px) {
  .rx-field-row { grid-template-columns: 1fr; }
}

.rx-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--rx-moss);
}

.rx-consent input {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  accent-color: var(--rx-forest);
}

.rx-consent a { color: var(--rx-tea-dark); text-decoration: underline; }

/* Honeypot — off-screen, not display:none (bots skip hidden) */
.rx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rx-form-submit {
  min-height: 54px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--rx-radius-sm);
  background: var(--rx-forest);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.rx-form-submit:hover { background: var(--rx-forest-deep); }
.rx-form-submit:active { transform: translateY(1px); }
.rx-form-submit[disabled] { opacity: 0.6; cursor: progress; }

.rx-form-status {
  min-height: 1.4em;
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 650;
}
.rx-form-status[data-state="error"] { color: var(--rx-danger); }
.rx-form-status[data-state="success"] { color: var(--rx-success); }
.rx-form-status[data-state="pending"] { color: var(--rx-moss); }

.rx-form-note {
  margin: 6px 0 0;
  color: var(--rx-moss);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Success panel (shown after submit when not redirecting) */
.rx-form-done[hidden],
[data-rx-form-view][hidden] { display: none !important; }
.rx-form-done { display: grid; gap: 14px; text-align: left; }
.rx-form-done .rx-done-badge {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(47, 104, 75, 0.14);
  color: var(--rx-success);
}
.rx-form-done h3 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.rx-form-done p { margin: 0; color: var(--rx-moss); line-height: 1.55; }

/* =========================================================
   Legal / thanks subpage shell
   ========================================================= */
.rx-subhead {
  padding: calc(var(--rx-header-h, 78px) + 40px) 0 40px;
  background: var(--rx-forest-deep);
  color: #fff;
}
.rx-subhead .rx-eyebrow { color: #c9d4cc; }
.rx-subhead h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1.0;
}
.rx-subhead .rx-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: #c9d4cc;
  font-size: 14px;
  font-weight: 600;
}
.rx-subhead .rx-back:hover { color: #fff; }

.rx-doc { padding: 64px 0 88px; }
.rx-doc-inner { max-width: 760px; }
.rx-doc h2 {
  margin: 44px 0 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.rx-doc h2:first-child { margin-top: 0; }
.rx-doc h3 { margin: 26px 0 10px; font-size: 18px; font-weight: 700; }
.rx-doc p,
.rx-doc li { color: #34423b; font-size: 16px; line-height: 1.62; }
.rx-doc p { margin: 0 0 14px; }
.rx-doc ul,
.rx-doc ol { margin: 0 0 18px; padding-left: 22px; }
.rx-doc li { margin-bottom: 8px; }
.rx-doc a { color: var(--rx-tea-dark); text-decoration: underline; }
.rx-doc strong { color: var(--rx-ink); }

.rx-fill {
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(185, 116, 40, 0.14);
  color: var(--rx-tea-dark);
  font-weight: 600;
  font-style: normal;
}

.rx-notice {
  display: grid;
  gap: 6px;
  margin: 0 0 36px;
  padding: 18px 20px;
  border: 1px solid rgba(185, 116, 40, 0.4);
  border-left: 4px solid var(--rx-tea);
  border-radius: var(--rx-radius-sm);
  background: rgba(185, 116, 40, 0.07);
}
.rx-notice strong { color: var(--rx-tea-dark); font-size: 14px; letter-spacing: 0.01em; }
.rx-notice p { margin: 0; font-size: 14px; color: #5a5142; line-height: 1.55; }

/* Thanks page centerpiece */
.rx-thanks {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 120px 0 100px;
  text-align: center;
}
.rx-thanks-inner { max-width: 620px; }
.rx-thanks .rx-badge {
  width: 84px; height: 84px;
  margin: 0 auto 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(47, 104, 75, 0.12);
  color: var(--rx-success);
}
.rx-thanks h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 630;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.rx-thanks p { margin: 0 auto 28px; max-width: 46ch; color: var(--rx-moss); font-size: 17px; line-height: 1.6; }
.rx-thanks .rx-thanks-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   Ускорение появления секций
   =========================================================
   Переопределяет тайминги reveal из styles.css (там 620ms + задержки
   до 240ms). При скролле это давало почти секунду ожидания на каждой
   секции — контент читался как «долго загружается», хотя он уже был
   в браузере.

   docs/02_DESIGN_SYSTEM.md требует: «нет долгих задержек появления,
   скрывающих контент». Здесь это требование и восстанавливается.

   styles.css намеренно не правится — он заморожен (CLAUDE.md, 2.2).
   Порядок подключения: styles.css → site.css, поэтому переопределение
   при равной специфичности выигрывает.
   ========================================================= */
.rx-site [data-rx-reveal] {
  /* Сдвиг тоже уменьшен: с 24px до 14px — меньше ход, меньше ощущения задержки */
  transform: translateY(14px);
  transition: opacity 300ms cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 300ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* Задержки нужны для лёгкого каскада внутри секции, но втрое короче */
.rx-site [data-rx-reveal="delay-1"] { transition-delay: 30ms; }
.rx-site [data-rx-reveal="delay-2"] { transition-delay: 60ms; }
.rx-site [data-rx-reveal="delay-3"] { transition-delay: 90ms; }

/* =========================================================
   Мобильные касания
   =========================================================
   Ссылки в подвале были 18px высотой с шагом 33px — попасть пальцем
   трудно, а там лежат правовые документы, которые человек ищет осознанно.
   Рекомендация Apple и Google — минимум 44px по каждой стороне.

   Увеличиваем область касания отступами, а не размером шрифта: внешне
   подвал почти не меняется, но промахнуться уже сложно.
   ========================================================= */
@media (max-width: 720px) {
  .rx-site .rx-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .rx-site .rx-footer-links li {
    margin: 0;
  }

  .rx-site .rx-footer-links a {
    display: block;
    /* 18px строка + по 13px сверху и снизу = 44px */
    padding: 13px 0;
  }

  /* Логотип в шапке и подвале — тоже цель для пальца */
  .rx-site .rx-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Длинные значения в правовых таблицах (адреса, реквизиты) не должны
   растягивать страницу: если не помещается — таблица прокручивается сама. */
.rx-site .rx-legal table,
.rx-site .rx-journal table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* =========================================================
   Закреплённая шапка
   =========================================================
   Шапка была position: absolute — уезжала вверх при первой же прокрутке,
   и на длинной странице клиент оставался без навигации и без кнопки заявки.
   Теперь она держится сверху: переход между разделами и обращение доступны
   с любого места страницы.

   Переопределяем в site.css — styles.css заморожен (CLAUDE.md, 2.2).

   Фон непрозрачный: под шапкой проезжает контент, полупрозрачная накладка
   давала бы кашу из текста. На тёмных секциях фон тоже светлый — так шапка
   читается одинаково по всей странице.
   ========================================================= */
.rx-site .rx-header {
  position: sticky;
  background: var(--rx-milk);
  /* мягкая тень появляется только когда под шапкой что-то есть */
  box-shadow: 0 1px 0 rgba(20, 33, 28, 0.06), 0 6px 18px rgba(20, 33, 28, 0.05);
}

/* Якорные переходы не должны прятать заголовок секции под шапкой */
.rx-site [id^="rx-"] {
  scroll-margin-top: calc(var(--rx-header-h) + 12px);
}

/* Открытое мобильное меню перекрывает страницу целиком, поэтому
   тень под шапкой в этот момент лишняя */
@media (max-width: 920px) {
  .rx-site .rx-header:has(.rx-nav.is-open) {
    box-shadow: none;
  }
}

/* Пометка необязательности рядом с подписью поля.
   Обязательные поля помечены звёздочкой, необязательные — словами:
   так посетитель сразу видит, что форма короткая, и не бросает её. */
.rx-site .rx-optional {
  font-weight: 500;
  color: var(--rx-moss);
  opacity: 0.8;
}

/* Подводка в шапке коммерческих страниц. Отдельный класс, потому что
   в rx-subhead правовых страниц подводки нет — там сразу заголовок. */
.rx-site .rx-subhead-lead {
  max-width: 54ch;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.rx-site .rx-subhead .rx-breadcrumbs {
  margin-bottom: 18px;
}

.rx-site .rx-section-action {
  margin-top: 26px;
}

/* =========================================================
   Исправления после закрепления шапки
   =========================================================
   rx-subhead компенсировал высоту шапки верхним отступом — это было верно,
   пока шапка была position: absolute и не занимала места в потоке. После
   перевода её в sticky отступ стал лишним: сверху появлялась пустая полоса
   почти в высоту экрана. Касается всех подстраниц с тёмной шапкой.
   ========================================================= */
.rx-site .rx-subhead {
  padding-top: 48px;
}

/* Хлебные крошки на тёмном фоне: базовый цвет — тёмно-зелёный,
   на rx-subhead он практически не читался. */
.rx-site .rx-subhead .rx-breadcrumbs,
.rx-site .rx-subhead .rx-breadcrumbs a,
.rx-site .rx-subhead .rx-crumb-sep {
  color: rgba(255, 255, 255, 0.62);
}

.rx-site .rx-subhead .rx-breadcrumbs a:hover {
  color: #fff;
}

.rx-site .rx-subhead .rx-breadcrumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
   Шапка: короткий ряд действий вместо длинного меню
   =========================================================
   Раньше все разделы лежали строкой. После появления коммерческих страниц
   их стало девять, и на десктопе они переносились на две строки.

   Теперь в шапке только то, что нужно постоянно: каталог, контакты
   и заявка. Остальное — за кнопкой меню, которая работает на любом
   размере экрана, а не только на мобильном.
   ========================================================= */
.rx-site .rx-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.rx-site .rx-header-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rx-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease;
}

.rx-site .rx-header-link:hover {
  background: rgba(20, 33, 28, 0.06);
}

/* ---------- Контакты ---------- */
.rx-site .rx-contacts {
  position: relative;
}

.rx-site .rx-contacts-toggle svg {
  transition: transform 0.18s ease;
}

.rx-site .rx-contacts.is-open .rx-contacts-toggle svg {
  transform: rotate(180deg);
}

.rx-site .rx-contacts-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-sm);
  background: var(--rx-white);
  box-shadow: 0 18px 44px rgba(15, 42, 34, 0.14);
}

.rx-site .rx-contacts-panel a {
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--rx-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.rx-site .rx-contacts-panel a:hover {
  background: var(--rx-bone);
}

/* Пустой телефон скрывается: строка «—» доверия не добавляет */
.rx-site .rx-contacts-panel a:empty {
  display: none;
}

/* ---------- Меню разделов ---------- */
/* Кнопка была только для мобильного (в styles.css у неё display: none,
   а во внутреннем span рисуются полоски). Теперь это основной вход
   в разделы на любом экране, поэтому показываем её всегда. */
.rx-site .rx-menu-toggle {
  display: inline-flex !important;
  flex: 0 0 auto;
}

.rx-site .rx-header .rx-nav {
  position: absolute;
  z-index: 55;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  /* В базовых стилях список рассчитан на мобильный полноэкранный вид:
     пункты по центру и с промежутком 26px. В выпадающем списке это
     превращается в редкую лесенку — растягиваем на всю ширину. */
  align-items: stretch;
  gap: 2px;
  min-width: 236px;
  padding: 8px;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-sm);
  background: var(--rx-white);
  box-shadow: 0 18px 44px rgba(15, 42, 34, 0.14);
}

.rx-site .rx-header .rx-nav.is-open {
  display: flex;
}

.rx-site .rx-header .rx-nav .rx-nav-link {
  /* В базовых стилях ссылки меню отцентрованы и разнесены под мобильный
     полноэкранный список. В выпадающем списке это читается как разнобой. */
  display: block;
  margin: 0;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}

.rx-site .rx-header .rx-nav .rx-nav-link:hover {
  background: var(--rx-bone);
}

.rx-site .rx-header-inner {
  position: relative;
}

@media (max-width: 720px) {
  /* На узком экране в ряду остаётся заявка и меню — остальное внутри меню */
  .rx-site .rx-header-actions .rx-header-link[href] { display: none; }
  .rx-site .rx-contacts-panel,
  .rx-site .rx-header .rx-nav { right: 0; left: auto; }
}

/* Разделитель в меню: группы «кому» / «что и как» / «справка».
   Список из восьми пунктов без пауз читается как свалка. */
.rx-site .rx-header .rx-nav .rx-nav-sep {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rx-line);
  border-radius: 0 0 10px 10px;
}

/* =========================================================
   Вертикальный ритм на телефоне
   =========================================================
   Отступы секций рассчитаны на десктоп: 70–92px сверху и снизу. На экране
   390px это половина высоты экрана впустую — между блоками остаются пустые
   поля, и читать приходится рывками.

   Уменьшаем до 44–52px. Воздух остаётся, но блоки перестают отрываться
   друг от друга. Внутритекстовые промежутки не трогаем — они в норме.
   ========================================================= */
@media (max-width: 720px) {
  .rx-site .rx-section {
    padding: 48px 0;
  }

  .rx-site .rx-final-cta {
    padding: 48px 0 56px;
  }

  .rx-doc {
    padding: 40px 0 52px;
  }

  .rx-site .rx-subhead {
    padding: 32px 0 32px;
  }

  /* Заголовки внутри текста: на узком экране 48px до h2 читается как разрыв */
  .rx-site .rx-article-body h2 {
    margin-top: 36px;
  }

  .rx-site .rx-article-body h3 {
    margin-top: 26px;
  }
}

/* =========================================================
   Контраст: доводка до WCAG AA
   -------------------------------------------------------
   Аудит вычисленных стилей по всем типам страниц показал восемь
   мест, где элемент физически на месте, но глазом не читается.
   Правки собраны здесь, потому что styles.css заморожена.

   Нормы: 4.5:1 для обычного текста, 3:1 для крупного и для
   границ интерактивных элементов (WCAG 1.4.3 и 1.4.11).
   ========================================================= */

/* 1. Кнопка-обводка была невидима: рамка rgba(20,33,28,.16) давала
   1.38:1, а полупрозрачный белый фон почти совпадал с подложкой
   (1.00 на белом). Кнопка держится на рамке — значит рамка обязана
   проходить 3:1. При .52 получается 3.15–3.45 на всех фонах сайта. */
.rx-site .rx-button--outline {
  border-color: rgba(20, 33, 28, 0.52);
  background: rgba(255, 255, 255, 0.86);
}

.rx-site .rx-button--outline:hover {
  border-color: rgba(20, 33, 28, 0.72);
  background: var(--rx-white);
}

/* 2. Кнопка на тёмном финальном блоке. Заливка primary — #173c31,
   и градиент секции начинается ровно с него: зелёное на зелёном,
   отличие 1.00. На тёмном нужна инверсия. */
.rx-site .rx-button--invert {
  border-color: transparent;
  color: var(--rx-forest);
  background: var(--rx-white);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.rx-site .rx-button--invert:hover {
  color: #0f3128;
  background: #f2eee4;
}

/* 3. Надзаголовок. Цвет --rx-moss рассчитан на светлый фон, но
   .rx-final-cta и .rx-jhero тёмные, и там он падал до 2.36:1.
   У .rx-section--dark такое правило уже есть — распространяем. */
.rx-site .rx-final-cta .rx-eyebrow,
.rx-site .rx-jhero .rx-eyebrow {
  color: #c9d4cc;
}

/* На светлом фоне moss давал 4.45 — граница нормы. Затемняем. */
.rx-site .rx-eyebrow {
  color: #45604e;
}

.rx-site .rx-section--dark .rx-eyebrow,
.rx-site .rx-subhead .rx-eyebrow,
.rx-site .rx-final-cta .rx-eyebrow,
.rx-site .rx-jhero .rx-eyebrow {
  color: #c9d4cc;
}

/* 4. Приглушённый текст: .48 давал 2.81–3.02, .58 — 4.08,
   .62 — 4.46. Общий тон поднимаем до .70 (5.7–6.0). */
.rx-site .rx-muted,
.rx-site .rx-outcome-card p,
.rx-site .rx-process-step p,
.rx-site .rx-feature-list span,
.rx-site .rx-faq-aside p,
.rx-site .rx-form-card > p,
.rx-site .rx-modal-subtitle,
.rx-site .rx-native-benefits small,
.rx-site .rx-hero-scroll {
  color: rgba(20, 33, 28, 0.7);
}

/* В исходнике объявлено через !important — перебиваем тем же весом. */
.rx-site .rx-native-note {
  color: rgba(20, 33, 28, 0.7) !important;
}

/* 5. Подвал. Заголовки колонок .42 давали 4.07, нижняя строка
   с реквизитами .38 — 3.56. Реквизиты по 149-ФЗ должны читаться. */
.rx-site .rx-footer-col h3 {
  color: rgba(255, 255, 255, 0.62);
}

.rx-site .rx-footer-bottom {
  color: rgba(255, 255, 255, 0.6);
}

/* Приписка Extracts в логотипе: moss на почти чёрном — 3.46. */
.rx-site .rx-footer .rx-logo span {
  color: #8fa894;
}

/* 6. Нумерация карточек направлений: белый .36 на тёмном — 3.23. */
.rx-site .rx-application-card b {
  color: rgba(255, 255, 255, 0.58);
}

/* 7. Счётчик статей в чипе журнала: белый на --rx-tea даёт 3.76.
   Тёмный текст на этом же фоне упирается в 4.4 — не хватает,
   поэтому затемняем саму плашку, оставаясь в оранжевом тоне. */
.rx-site .rx-jchip b {
  background: #a2641f;
}

/* =========================================================
   Отступы: мёртвая зона под первым экраном
   -------------------------------------------------------
   При ≤920px герой получал padding-bottom: 88px — больше, чем
   68px на десктопе. Эти 88px держали подсказку «Листайте», но она
   в том же медиазапросе скрыта (display: none). Получалась пустая
   полоса в 88px на самом узком экране — ровно тот разрыв, который
   было видно на телефоне. Приводим к ритму соседних секций.
   ========================================================= */
@media (max-width: 920px) {
  .rx-site .rx-hero {
    padding-bottom: 56px;
  }
}

/* Крайние отступы внутри текста складывались с паддингом секции:
   первый h2 добавлял свои 36px к 40px .rx-doc — сверху получалось 76px,
   последний абзац давал 72px снизу. Внутри текста эти отступы нужны,
   на краях блока — нет. */
.rx-site .rx-article-body > *:first-child {
  margin-top: 0;
}

.rx-site .rx-article-body > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  /* Подвал: 48px сверху и 92px снизу — низ выглядел провалом.
     Выравниваем по верхнему отступу. */
  .rx-site .rx-footer {
    padding-bottom: 48px;
  }
}

@media (max-width: 720px) {
  /* Страница «спасибо» центрируется по вертикали, но 120px сверху и
     100px снизу на экране 844px съедали четверть высоты. Верхний
     отступ считаем от шапки — она фиксированная и перекрывает контент. */
  .rx-thanks {
    padding: calc(var(--rx-header-h, 78px) + 32px) 0 56px;
  }
}

/* =========================================================
   Первый экран и подвал: лишняя пустота
   -------------------------------------------------------
   Замеры на боевом сайте: от низа шапки до первого текста было
   256px на десктопе (экран 800) и 176px на 375px. Подвал —
   686px на десктопе и 1292px на телефоне, то есть больше экрана.
   ========================================================= */

/* --- Герой ---
   Пустота складывалась из двух источников: padding-top в 88px сверх
   высоты шапки и сетки с min-height: 660px при align-items: center —
   текст занимает 528px, остаток раздавался поровну сверху и снизу.
   Плюс min-height: 850px у самой секции: первый экран не помещался
   в окно 800px целиком. */
.rx-site .rx-hero {
  min-height: auto;
  padding: calc(var(--rx-header-h) + 32px) 0 56px;
}

.rx-site .rx-hero-grid {
  min-height: 520px;
}

/* Иллюстрация держала высоту сетки снизу — 620px не давали ей сжаться.
   Только на десктопе: без медиазапроса это правило перебивало меньшие
   мобильные значения из styles.css, и герой на телефоне становился выше. */
@media (min-width: 921px) {
  .rx-site .rx-hero-visual {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .rx-site .rx-hero {
    padding-top: calc(var(--rx-header-h) + 24px);
  }
}

/* --- Подвал ---
   В сетке объявлено три колонки: minmax(0,1fr) repeat(2, …).
   Детей же четыре — бренд и три колонки ссылок, поэтому последняя
   переносилась на второй ряд и удваивала высоту блока. Это касалось
   всех страниц, а не только главной. Объявляем четыре дорожки. */
.rx-site .rx-footer-top {
  padding-bottom: 32px;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(150px, 1fr));
  gap: 40px;
}

.rx-site .rx-footer {
  padding-top: 40px;
  padding-bottom: 28px;
}

@media (max-width: 920px) {
  /* Бренд на всю ширину, три колонки ссылок в один ряд —
     раньше здесь было 1fr 1fr, и третья колонка снова уезжала вниз. */
  .rx-site .rx-footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .rx-site .rx-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  /* Одна колонка растягивала подвал до 1292px — длиннее экрана.
     Разложить сами блоки в два столбца не вышло: на 375px колонка
     сужается до 164px, «Политика обработки данных» переносится на две
     строки, и выигрыш съедается. Плюс ряд сетки тянется по самому
     высокому блоку — колонка с двумя ссылками занимала столько же,
     сколько соседняя с девятью.

     Поэтому блоки оставляем на всю ширину (тексты не переносятся),
     а в два столбца раскладываем списки ссылок внутри них. */
  .rx-site .rx-footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .rx-site .rx-footer-brand {
    grid-column: auto;
  }

  /* Перебиваем flex-колонку из блока про размер зоны касания:
     отступы ссылок в 13px сохраняются, меняется только раскладка. */
  .rx-site .rx-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }

  .rx-site .rx-footer {
    padding-top: 36px;
    padding-bottom: 32px;
  }
}

@media (max-width: 640px) {
  /* Заголовок колонки отделён и без большого отступа: ниже идут
     ссылки с собственными полями в 13px. */
  .rx-site .rx-footer-col h3 {
    margin-bottom: 8px;
  }
}

@media (max-width: 920px) {
  /* На узких экранах текстовый блок героя добавлял свои 32px сверху
     к паддингу секции — два отступа подряд на одном и том же месте.
     Секция уже отбивает контент от шапки, второй отступ лишний. */
  .rx-site .rx-hero-copy {
    padding-top: 0;
  }

  /* Минимальная высота сетки нужна только там, где герой в две колонки.
     В одну колонку содержимое всё равно выше — правило ничего не держит. */
  .rx-site .rx-hero-grid {
    min-height: 0;
  }
}