/* Премиум-статьи LaWEra — СВЕТЛАЯ тема (24.09.2026, правка Вити).
   Подключается ПОСЛЕ stati.css и только на страницах статей
   (body.statya) и списков статей (body.statya-spisok). Страницы
   приземления, «О нас», калькуляторы этот файл не грузят — их вид не меняется.

   ⚠️ Правится РУКАМИ: сборщик `_sloi/_stati_sborka.py` этот файл не пишет,
      только требует, чтобы он был. Выкладка ставит на ссылку метку `?v=`
      (REF_HTML) — lawera.ae отдаёт css через Cloudflare на год.
   ⚠️ Палитра — из презентации компании (замер пикселей слайдов):
      тёмно-зелёный #132c1f / #142c20, золото #ebb32e / #dba318,
      тёмное золото #a27a0d, крем #f2e8cb. Основа — бумага #faf6ec,
      текст тёмно-зелёный, шрифт наш Montserrat (свой файл).
   ⚠️ КОНТРАСТ ≥ AA (замер 24.09): золото #dba318/#ebb32e на светлом —
      2.1:1, поэтому ТЕКСТОМ оно не бывает никогда: только линии, маркеры,
      полоса прогресса и фон кнопки (тёмно-зелёный на золоте 6.6:1).
      Золотой ТЕКСТ — только тёмный #7c5c07 (5.7:1 на бумаге, 5.1 на креме).
      Приглушённый текст #4a5a4f (6.8:1). Основной #1d3327 (12.5:1).
   ⚠️ Шапка и подвал сайта — тёмно-зелёные, как слайды презентации: золотой
      логотип на креме читался бы блёкло (1.8:1), а зелёная рамка с золотой
      нитью на стыке держит бумагу как дорогой бланк. Переменные stati.css
      (--fon, --tekst, --tusklo, --zoloto, --karta) переопределены: на
      бумаге — светлый набор, внутри шапки и подвала — тёмный.
   ⚠️ Без JavaScript страница ПОЛНАЯ: скрывать до появления можно только то,
      на что скрипт сам повесил `.poyav` (и только ниже первого экрана). */

body.statya, body.statya-spisok {
  --zel: #132c1f;
  --zel-2: #142c20;
  --zel-tekst: #1d3327;
  --tusk: #4a5a4f;
  --zol: #dba318;
  --zol-sv: #ebb32e;
  --zol-t: #a27a0d;
  --zol-tekst: #7c5c07;
  --krem: #f2e8cb;
  --bumaga: #faf6ec;
  --bumaga-sv: #fffdf8;
  --liniya: rgba(19, 44, 31, 0.11);
  --ten: 0 26px 56px -38px rgba(19, 44, 31, 0.42);
  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  --shapka: 66px;
  /* переменные общего stati.css — светлый набор */
  --fon: var(--bumaga);
  --tekst: var(--zel-tekst);
  --tusklo: var(--tusk);
  --zoloto: var(--zol-tekst);
  --karta: var(--bumaga-sv);
  overflow-x: clip;
  color-scheme: light;
}
html:has(body.statya), html:has(body.statya-spisok) { background: var(--bumaga, #faf6ec); }
@media (prefers-reduced-motion: no-preference) { html:has(body.statya) { scroll-behavior: smooth; } }
body.statya ::selection, body.statya-spisok ::selection { background: rgba(235, 179, 46, 0.42); color: var(--zel); }
body.statya :focus-visible, body.statya-spisok :focus-visible { outline: 2px solid var(--zol-t); outline-offset: 3px; border-radius: 6px; }

/* фон: бумага с тёплым золотым отсветом сверху, как свет над площадью в игре */
body.statya::before, body.statya-spisok::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 620px at 92% -14%, rgba(235, 179, 46, 0.13), transparent 62%),
    radial-gradient(760px 520px at -14% 42%, rgba(242, 232, 203, 0.55), transparent 64%),
    linear-gradient(180deg, #fbf8f1 0%, #faf6ec 40%, #f7f1e3 100%);
}

/* ── шапка сайта: тёмно-зелёная, липкая, золотая нить снизу ─────────── */
.statya .verh, .statya-spisok .verh {
  --tekst: #f2e8cb; --tusklo: #b9c2b4; --zoloto: var(--zol-sv); --fon: var(--zel);
  position: sticky; top: 0; z-index: 40; max-width: none; margin: 0;
  min-height: var(--shapka); padding: 10px max(clamp(16px, 4vw, 40px), calc((100vw - 1060px) / 2));
  color: var(--tekst);
  /* ⚠️ почти непрозрачно: где backdrop-filter не работает, бумага со
     статьёй не должна просвечивать сквозь шапку (снимок 24.09) */
  background: rgba(19, 44, 31, 0.97);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(235, 179, 46, 0.42);
  box-shadow: 0 10px 30px -22px rgba(19, 44, 31, 0.55);
}
.statya .yazyki, .statya-spisok .yazyki {
  gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(242, 232, 203, 0.06); box-shadow: inset 0 0 0 1px rgba(242, 232, 203, 0.16);
}
.statya .yazyki a, .statya-spisok .yazyki a {
  min-height: 36px; padding: 6px 11px; border-radius: 999px; font-weight: 500; font-size: 0.8rem;
  color: #e9dfc0; transition: color 0.25s, background 0.25s;
}
.statya .yazyki a:hover, .statya-spisok .yazyki a:hover { color: #fff6dc; background: rgba(242, 232, 203, 0.08); }
.statya .yazyki a.tek, .statya-spisok .yazyki a.tek { color: var(--zel); background: var(--zol-sv); font-weight: 600; }
.statya .verh :focus-visible, .statya-spisok .verh :focus-visible { outline-color: var(--zol-sv); }
@media (max-width: 380px) {
  .statya .yazyki a, .statya-spisok .yazyki a { padding: 6px 8px; font-size: 0.76rem; }
}

/* ── полоса прогресса чтения: золото поверх зелёной шапки ─────────── */
.progress-chteniya { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress-chteniya span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--zol-t), var(--zol) 50%, var(--zol-sv));
  box-shadow: 0 0 12px rgba(235, 179, 46, 0.55);
}

/* ── сетка: колонка текста + боковое оглавление ─────────────────── */
.statya .statya-polosa { max-width: 1180px; padding: 0 clamp(18px, 4.5vw, 40px) 80px; }
.statya-setka { display: grid; grid-template-columns: minmax(0, 1fr); }
.statya-bok { display: none; }
.statya-kolonka { width: 100%; max-width: 720px; margin: 0 auto; min-width: 0; }
@media (min-width: 1160px) {
  .statya-setka { grid-template-columns: 236px minmax(0, 720px); column-gap: clamp(48px, 5.5vw, 88px); justify-content: center; }
  .statya-setka.bez-oglavleniya { grid-template-columns: minmax(0, 720px); }
  .statya-setka.bez-oglavleniya .statya-bok { display: none; }
  .statya-bok { display: block; padding-top: clamp(34px, 7vw, 76px); }
  .statya-bok .oglavlenie-bok { position: sticky; top: calc(var(--shapka) + 30px); max-height: calc(100vh - var(--shapka) - 60px); overflow: auto; padding: 0 4px 10px 0; scrollbar-width: thin; scrollbar-color: rgba(162, 122, 13, 0.35) transparent; }
  .statya .oglavlenie-mob { display: none; }
  .statya-kolonka { margin: 0; }
}

/* ── первый экран статьи ─────────────────────────────────────────── */
.statya-shapka { position: relative; padding: clamp(34px, 7vw, 72px) 0 0; }
.statya-shapka::after {
  content: ""; display: block; height: 1px; margin-top: clamp(28px, 4vw, 40px);
  background: linear-gradient(90deg, var(--zol), rgba(219, 163, 24, 0.22) 55%, transparent);
}
.statya-krohi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5;
}
.statya-krohi a { color: var(--zol-tekst); text-decoration: none; transition: color 0.25s; }
.statya-krohi a:first-child { color: var(--tusk); }
.statya-krohi a:hover { color: var(--zel); }
.statya-krohi span { color: var(--zol-tekst); }
.statya .statya-shapka h1 {
  margin: 18px 0 22px; font-weight: 600; letter-spacing: -0.024em; line-height: 1.1;
  font-size: clamp(1.9rem, 1.05rem + 2.9vw, 3.05rem); text-wrap: balance; color: var(--zel);
}
.statya-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tusk); font-size: 0.86rem; }
.meta-punkt { display: inline-flex; align-items: center; gap: 9px; }
.meta-punkt::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--zol); flex: none; }
.meta-punkt time { color: var(--zel); font-weight: 500; }
.statya-ekspert {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; max-width: 100%;
  padding: 7px 20px 7px 7px; border-radius: 30px; text-decoration: none; color: var(--zel-tekst);
  background: var(--bumaga-sv); box-shadow: inset 0 0 0 1px rgba(162, 122, 13, 0.3), 0 12px 28px -22px rgba(19, 44, 31, 0.5);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.statya-ekspert:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(162, 122, 13, 0.6), 0 16px 32px -20px rgba(19, 44, 31, 0.5); transform: translateY(-1px); }
.statya-ekspert img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px var(--zol); background: var(--krem); }
.statya-ekspert > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.statya-ekspert small { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tusk); }
.statya-ekspert b { font-weight: 600; font-size: 0.93rem; color: var(--zel); }
.statya-ekspert em { font-style: normal; font-size: 0.8rem; color: var(--tusk); }

/* ── картинки: главная в шапке и иллюстрации внутри ─────────────── */
/* ⚠️ width/height стоят в разметке — место под картинку занято заранее,
   текст не прыгает, пока она грузится (CLS). Фон — крем: пока файла нет,
   видна спокойная плашка, а не дыра. */
.statya-foto { margin: 30px 0 0; }
.statya-foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 22px; background: linear-gradient(135deg, #efe4c4, #f6efdc);
  box-shadow: var(--ten), 0 0 0 1px rgba(19, 44, 31, 0.06);
}
.statya-foto figcaption {
  display: block; margin-top: 11px; padding: 0 4px;
  font-size: 0.74rem; line-height: 1.45; color: var(--tusk);
}
.statya-foto figcaption a { color: var(--tusk); text-decoration: underline; text-decoration-color: rgba(74, 90, 79, 0.35); text-underline-offset: 2px; }
.statya-foto figcaption a:hover { color: var(--zel); text-decoration-color: var(--zol); }
.statya-telo .statya-foto { margin: 2.2em 0 2.4em; }
.statya-telo .statya-foto img { border-radius: 18px; }
@media (max-width: 560px) {
  .statya-foto { margin-top: 24px; }
  .statya-foto img, .statya-telo .statya-foto img { border-radius: 16px; }
}

/* ── оглавление ─────────────────────────────────────────────────── */
.oglavlenie ol { list-style: none; margin: 0; padding: 0; counter-reset: og; }
.oglavlenie li { counter-increment: og; margin: 0; }
.oglavlenie a { display: flex; gap: 12px; text-decoration: none; line-height: 1.4; transition: color 0.25s, border-color 0.25s; }
.oglavlenie a::before {
  content: counter(og, decimal-leading-zero); flex: none; min-width: 1.7em; padding-top: 0.18em;
  color: var(--zol-tekst); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.oglavlenie-metka { margin: 0 0 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zol-tekst); }
.oglavlenie-bok a { padding: 8px 0 8px 14px; font-size: 0.84rem; color: var(--tusk); border-left: 1px solid var(--liniya); }
.oglavlenie-bok a:hover { color: var(--zel); }
.oglavlenie-bok a.tek { color: var(--zel); font-weight: 500; border-left: 2px solid var(--zol); padding-left: 13px; }
.oglavlenie-mob {
  margin: 28px 0 6px; border-radius: 18px; background: var(--bumaga-sv);
  box-shadow: inset 0 0 0 1px var(--liniya), 0 14px 34px -28px rgba(19, 44, 31, 0.45);
}
.oglavlenie-mob summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 12px 20px; border-radius: 18px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zol-tekst);
}
.oglavlenie-mob summary::-webkit-details-marker { display: none; }
.oglavlenie-chislo {
  margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 0.72rem; letter-spacing: 0;
  color: var(--zol-sv); background: var(--zel);
}
.oglavlenie-mob summary::after {
  content: ""; width: 8px; height: 8px; flex: none; margin: 0 2px 4px 4px;
  border-right: 1.6px solid var(--zol-t); border-bottom: 1.6px solid var(--zol-t);
  transform: rotate(45deg); transition: transform 0.3s var(--ease), margin 0.3s;
}
.oglavlenie-mob[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.oglavlenie-mob ol { padding: 0 20px 12px; }
.oglavlenie-mob a { padding: 11px 0; color: var(--zel-tekst); font-size: 0.93rem; border-top: 1px solid var(--liniya); }

/* ── текст статьи ───────────────────────────────────────────────── */
.statya-telo {
  margin-top: 34px; font-size: 1.0625rem; line-height: 1.78; color: var(--zel-tekst);
  overflow-wrap: break-word; counter-reset: razdel;
}
@media (min-width: 720px) { .statya-telo { font-size: 1.125rem; } }
/* первая фраза — вводка крупнее: это обещание статьи */
.statya-telo > p:first-child { font-size: 1.16em; line-height: 1.62; color: var(--zel); margin-bottom: 1.4em; }
.statya-telo p, .statya-telo li { margin: 0 0 1.05em; }
.statya-telo strong { color: #0d2217; font-weight: 600; }
.statya-telo a {
  color: var(--zol-tekst); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(219, 163, 24, 0.6); text-underline-offset: 3px;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.statya-telo a:hover { color: var(--zel); text-decoration-color: var(--zol); }
/* ⚠️ Длинные адреса источников (dlp.dubai.gov.ae/…%20…) не переносились и
   давали горизонтальную прокрутку на 390 px (замер 24.09: документ 1602 px). */
.statya-telo a[href^="http"] { overflow-wrap: anywhere; }

/* подзаголовки: номер раздела + золотая черта */
.statya-telo h2, .statya-telo h3 {
  position: relative; counter-increment: razdel; scroll-margin-top: calc(var(--shapka) + 24px);
  margin: 2.4em 0 0.8em; padding-top: 1.2em; font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.3rem, 1.02rem + 1vw, 1.6rem); line-height: 1.25; color: var(--zel); text-wrap: balance;
}
.statya-telo h2::before, .statya-telo h3::before {
  content: counter(razdel, decimal-leading-zero); display: block; margin-bottom: 0.7em;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; color: var(--zol-tekst); font-variant-numeric: tabular-nums;
}
.statya-telo h2::after, .statya-telo h3::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--zol) 0, var(--zol) 48px, var(--liniya) 48px);
}
.statya-telo h4, .statya-telo h5 { font-size: 1.08em; font-weight: 600; color: var(--zel); margin: 1.8em 0 0.6em; }

/* списки: ромб у маркированного, кружок с номером у шагов */
.statya-telo ul { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.statya-telo ul > li { position: relative; padding-left: 1.7em; }
.statya-telo ul > li::before {
  content: ""; position: absolute; left: 0.3em; top: 0.72em; width: 6px; height: 6px;
  transform: rotate(45deg); border: 1.5px solid var(--zol-t); background: rgba(235, 179, 46, 0.35);
}
.statya-telo ol { list-style: none; padding-left: 0; margin: 0 0 1.4em; counter-reset: shag; }
.statya-telo ol > li { position: relative; counter-increment: shag; padding-left: 2.7em; min-height: 1.9em; margin-bottom: 0.85em; }
.statya-telo ol > li::before {
  content: counter(shag); position: absolute; left: 0; top: 0.08em; width: 1.85em; height: 1.85em;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 0.78em; font-weight: 600; color: var(--zol-sv); font-variant-numeric: tabular-nums;
  background: var(--zel); box-shadow: 0 6px 14px -8px rgba(19, 44, 31, 0.6);
}

/* таблицы: белая карточка, кремовая шапка */
.statya-telo .tablica-obertka {
  position: relative; margin: 1.9em 0; border-radius: 18px;
  background: var(--bumaga-sv);
  box-shadow: inset 0 0 0 1px var(--liniya), 0 24px 52px -40px rgba(19, 44, 31, 0.5);
  scrollbar-width: thin; scrollbar-color: rgba(162, 122, 13, 0.4) transparent;
}
.statya-telo .tablica-obertka.est-prokrutka:not(.v-kontse) {
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.statya-telo table { min-width: 500px; font-size: 0.9em; line-height: 1.55; }
.statya-telo th {
  padding: 16px 18px 13px; white-space: normal; vertical-align: bottom;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zel);
  background: var(--krem); border-bottom: 1px solid rgba(162, 122, 13, 0.4);
}
.statya-telo td { padding: 13px 18px; vertical-align: top; border-bottom: 1px solid rgba(19, 44, 31, 0.08); }
.statya-telo tr:nth-child(even) td { background: rgba(242, 232, 203, 0.28); }
.statya-telo td:first-child { color: var(--zel); font-weight: 500; }
.statya-telo th:first-child { border-top-left-radius: 18px; }
.statya-telo th:last-child { border-top-right-radius: 18px; }
/* ⚠️ Телефон (24.09.2026): таблица из ДВУХ колонок (23 из 52 в статьях)
   влезает в 390 px целиком — min-width 500 уводил её в прокрутку, и маска
   резала вторую колонку посреди слова. Прокрутка остаётся только у таблиц
   в три-четыре колонки, там без неё текст сжимается в столбик по слову. */
@media (max-width: 560px) {
  .statya-telo table:not(:has(th:nth-child(3), td:nth-child(3))) { min-width: 0; }
  .statya-telo th { padding: 14px 14px 11px; }
  .statya-telo td { padding: 12px 14px; }
}

/* цитата и врезка «важно» */
.statya-telo blockquote {
  margin: 2em 0; padding: 22px 26px; border: 0; border-radius: 18px; color: var(--zel-tekst);
  background: var(--bumaga-sv); box-shadow: inset 0 0 0 1px var(--liniya);
}
.statya-telo blockquote.vazhno {
  position: relative; padding: 22px 26px 22px 30px;
  background: linear-gradient(135deg, #f6ebcd 0%, #fbf5e6 70%);
  box-shadow: inset 4px 0 0 var(--zol), inset 0 0 0 1px rgba(162, 122, 13, 0.28), 0 22px 48px -38px rgba(162, 122, 13, 0.55);
}
.statya-telo blockquote.vazhno::before {
  content: "Важно"; display: block; margin-bottom: 10px; padding-left: 30px; min-height: 20px; line-height: 20px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zol-tekst);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5c07' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") no-repeat left center / 20px 20px;
}
html[lang="en"] .statya-telo blockquote.vazhno::before { content: "Important"; }
html[lang="es"] .statya-telo blockquote.vazhno::before,
html[lang="it"] .statya-telo blockquote.vazhno::before { content: "Importante"; }
.statya-telo blockquote.vazhno p { font-size: 0.95em; line-height: 1.66; color: var(--zel-tekst); }
.statya-telo blockquote p:last-child { margin-bottom: 0; }

/* вопросы FAQ: зелёный кружок с золотым знаком вопроса */
.statya-telo p.vopros { position: relative; margin: 1.7em 0 0.5em; padding-left: 2.3em; font-size: 1.03em; line-height: 1.5; color: var(--zel); }
.statya-telo p.vopros::before {
  content: "?"; position: absolute; left: 0; top: 0.02em; width: 1.6em; height: 1.6em;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 0.82em; font-weight: 700; color: var(--zol-sv); background: var(--zel);
}

/* ── блок «Получить консультацию» ───────────────────────────────── */
.konsult {
  position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: calc(var(--shapka) + 24px);
  margin: 68px 0 44px; padding: clamp(28px, 5.5vw, 50px); border-radius: 28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(235, 179, 46, 0.2), transparent 55%),
    linear-gradient(160deg, #fffdf8 0%, #f6eed8 100%);
  box-shadow: 0 40px 80px -52px rgba(19, 44, 31, 0.55);
}
/* золотая рамка-градиент */
.konsult::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--zol-sv), rgba(219, 163, 24, 0.28) 38%, rgba(219, 163, 24, 0.14) 62%, var(--zol));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* кольцо — эхо знака LaWEra */
.konsult::after {
  content: ""; position: absolute; z-index: -1; right: -130px; top: -130px; width: 330px; height: 330px;
  border-radius: 50%; border: 1px solid rgba(162, 122, 13, 0.22); pointer-events: none;
  box-shadow: 0 0 0 42px rgba(235, 179, 46, 0.05), 0 0 0 84px rgba(235, 179, 46, 0.03);
}
.konsult-metka { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zol-tekst); }
.konsult-zagol {
  margin: 12px 0 14px; max-width: 18ch; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem); color: var(--zel); text-wrap: balance;
}
.konsult-tekst { margin: 0 0 12px; max-width: 54ch; color: var(--tusk); }
.konsult-besplatno { display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 26px; font-size: 0.88rem; font-weight: 600; color: var(--zel); }
.konsult-besplatno::before {
  content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--zel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebb32e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
.konsult-vybor > summary { list-style: none; }
.konsult-vybor > summary::-webkit-details-marker { display: none; }
.konsult-knopka {
  position: relative; overflow: hidden; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 30px; border-radius: 999px;
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; color: var(--zel);
  background: linear-gradient(135deg, #f0c24a, var(--zol-sv) 42%, var(--zol));
  box-shadow: 0 18px 36px -16px rgba(162, 122, 13, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(162, 122, 13, 0.25);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.konsult-knopka .strelka { width: 20px; height: 20px; flex: none; transition: transform 0.35s var(--ease); }
.konsult-knopka::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
}
.konsult-knopka:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -18px rgba(162, 122, 13, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(162, 122, 13, 0.3); }
.konsult-knopka:hover .strelka { transform: translateX(4px); }
.konsult-vybor[open] > .konsult-knopka .strelka { transform: rotate(90deg); }
.konsult-panel { margin-top: 24px; }
.konsult-gde { margin: 0 0 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tusk); }
/* ⚠️ Мессенджеры СТОЛБИКОМ, а не в ряд: в ряд из трёх (ru) на 620 px номер
   телефона и пояснение ломались на три строки (снимок 24.09). */
.konsult-ryad { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.mess {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 18px;
  text-decoration: none; color: var(--zel-tekst);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(19, 44, 31, 0.12), 0 12px 26px -22px rgba(19, 44, 31, 0.5);
  transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s;
}
.mess-znak {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: #f5efe0; box-shadow: inset 0 0 0 1px rgba(19, 44, 31, 0.06);
}
.mess-znak svg, .mess-znak img { width: 28px; height: 28px; display: block; }
.mess-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mess-tekst b { font-weight: 600; font-size: 1rem; color: var(--zel); }
.mess-tekst small { font-size: 0.8rem; color: var(--tusk); }
.mess .strelka { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--zol-t); transition: transform 0.3s var(--ease), color 0.3s; }
.mess:hover, .mess:focus-visible { transform: translateY(-3px); background: #fffdf8; }
.mess:hover .strelka { transform: translateX(3px); color: var(--zel); }
.mess.whatsapp:hover { box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.6), 0 18px 34px -18px rgba(37, 211, 102, 0.45); }
.mess.telegram:hover { box-shadow: inset 0 0 0 1px rgba(38, 165, 228, 0.6), 0 18px 34px -18px rgba(38, 165, 228, 0.45); }
.mess.max:hover { box-shadow: inset 0 0 0 1px rgba(112, 96, 255, 0.6), 0 18px 34px -18px rgba(112, 96, 255, 0.4); }
.mess.nazhata { transform: scale(0.98); }
.konsult-bufer { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--tusk); }
.konsult-podskazka { min-height: 1.4em; margin: 8px 0 0; font-size: 0.88rem; font-weight: 600; color: var(--zol-tekst); opacity: 0; transition: opacity 0.3s; }
.konsult-podskazka.vidno { opacity: 1; }
.konsult-razbor {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 6px 0;
  color: var(--tusk); font-size: 0.9rem; text-decoration: none; transition: color 0.25s;
}
.konsult-razbor .strelka { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.konsult-razbor:hover { color: var(--zel); }
.konsult-razbor:hover .strelka { transform: translateX(3px); }
@media (max-width: 560px) {
  .konsult { border-radius: 24px; padding: 30px 22px 26px; }
  .konsult-knopka { display: flex; width: 100%; padding: 0 22px; font-size: 0.98rem; white-space: nowrap; }
  .mess { padding: 12px 14px; gap: 12px; }
}

/* ── читайте также: карточки с картинкой ────────────────────────── */
.statya .eshchyo-karty { margin: 12px 0 10px; }
.statya .eshchyo-karty .eshchyo-metka { margin: 0 0 16px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; color: var(--zol-tekst); }
.statya .eshchyo-karty ul { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); }
.statya .eshchyo-karty li { border: 0; margin: 0; }
.statya .eshchyo-karty a {
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; overflow: hidden;
  padding: 0 22px 50px; border-radius: 18px; color: var(--zel-tekst); line-height: 1.4; text-decoration: none;
  background: var(--bumaga-sv); box-shadow: inset 0 0 0 1px var(--liniya), 0 18px 40px -34px rgba(19, 44, 31, 0.55);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.35s;
}
.statya .eshchyo-karty a > :nth-child(2) { margin-top: 18px; }
.statya .eshchyo-karty a.bez-foto > :first-child { margin-top: 20px; }
.kartochka-foto {
  display: block; width: calc(100% + 44px); height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin: 0 -22px; background: linear-gradient(135deg, #efe4c4, #f6efdc);
  transition: transform 0.6s var(--ease);
}
.eshchyo-napr { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zol-tekst); }
.statya .eshchyo-karty b { font-weight: 600; font-size: 0.98rem; line-height: 1.38; color: var(--zel); }
.eshchyo-opis {
  font-size: 0.84rem; line-height: 1.5; color: var(--tusk);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.statya .eshchyo-karty .strelka { position: absolute; right: 20px; bottom: 18px; width: 20px; height: 20px; color: var(--zol-t); transition: transform 0.35s var(--ease); }
.statya .eshchyo-karty a:hover { transform: translateY(-4px); background: #fff; box-shadow: inset 0 0 0 1px rgba(162, 122, 13, 0.45), 0 26px 50px -30px rgba(19, 44, 31, 0.55); }
.statya .eshchyo-karty a:hover .strelka { transform: translateX(4px); }
.statya .eshchyo-karty a:hover .kartochka-foto { transform: scale(1.03); }
.statya .nazad { margin: 34px 0 0; }
.statya .nazad a { color: var(--tusk); text-decoration: none; font-size: 0.9rem; transition: color 0.25s; }
.statya .nazad a:hover { color: var(--zel); }

/* ── подвал: тёмно-зелёный, во всю ширину ────────────────────────── */
.statya .niz, .statya-spisok .niz {
  --tekst: #f2e8cb; --tusklo: #b9c2b4; --zoloto: var(--zol-sv);
  max-width: none; margin: 0; gap: 14px 18px;
  padding: 34px max(clamp(18px, 4.5vw, 40px), calc((100vw - 1100px) / 2)) 40px;
  color: var(--tusklo); background: var(--zel);
  border-top: 1px solid rgba(235, 179, 46, 0.42);
}
.statya .niz a, .statya-spisok .niz a { color: #d9d0b3; }
.statya .niz a:hover, .statya-spisok .niz a:hover { color: var(--zol-sv); }
.statya .niz :focus-visible, .statya-spisok .niz :focus-visible { outline-color: var(--zol-sv); }

/* ── список статей ─────────────────────────────────────────────── */
.statya-spisok .polosa { max-width: 1100px; padding-bottom: 80px; }
.statya-spisok .polosa > h1 {
  margin: clamp(34px, 7vw, 72px) 0 16px; font-weight: 600; letter-spacing: -0.026em; line-height: 1.05;
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.6rem); color: var(--zel);
}
.statya-spisok .vstup { max-width: 60ch; font-size: 1.06rem; line-height: 1.65; color: var(--tusk); margin-bottom: 18px; }
.statya-spisok .razdel { margin: 46px 0 16px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; color: var(--zol-tekst); }
.statya-spisok .razdel::after { content: ""; display: block; height: 1px; margin-top: 12px; background: linear-gradient(90deg, var(--zol), transparent 70%); }
.statya-spisok .spisok { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.statya-spisok .spisok li { margin: 0; }
.statya-spisok .spisok a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0 22px 20px; border-radius: 18px;
  background: var(--bumaga-sv); color: var(--zel-tekst);
  border: 0; box-shadow: inset 0 0 0 1px var(--liniya), 0 18px 40px -34px rgba(19, 44, 31, 0.55);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.35s;
}
.statya-spisok .spisok a > b { margin-top: 18px; }
.statya-spisok .spisok a:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px rgba(162, 122, 13, 0.45), 0 24px 48px -30px rgba(19, 44, 31, 0.55); }
.statya-spisok .spisok a:hover .kartochka-foto { transform: scale(1.03); }
.statya-spisok .spisok b { color: var(--zel); font-weight: 600; line-height: 1.38; margin-bottom: 8px; }
.statya-spisok .spisok span { line-height: 1.5; color: var(--tusk); }

/* ── движение: только если человек его не выключил ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .statya-shapka > *, .statya-spisok .polosa > h1, .statya-spisok .vstup { animation: statya-vshod 0.95s var(--ease) backwards; }
  .statya-shapka > h1 { animation-delay: 0.08s; }
  .statya-shapka > .statya-meta { animation-delay: 0.2s; }
  .statya-shapka > .statya-ekspert { animation-delay: 0.3s; }
  .statya-shapka > .statya-foto { animation-name: statya-foto; animation-delay: 0.36s; animation-duration: 1.2s; }
  .statya-spisok .vstup { animation-delay: 0.12s; }
  .poyav { opacity: 0; transform: translateY(22px); filter: blur(5px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
  .poyav.vidno { opacity: 1; transform: none; filter: none; }
  .konsult-vybor[open] > .konsult-panel { animation: statya-raskryt 0.5s var(--ease) backwards; }
  .konsult-knopka:hover::after { transition: transform 0.9s var(--ease); transform: translateX(120%); }
}
@keyframes statya-vshod { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } }
/* ⚠️ картинку проявляем без blur: размытие большой картинки на телефоне
   стоит кадров, а красоты не добавляет */
@keyframes statya-foto { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes statya-raskryt { from { opacity: 0; transform: translateY(-8px); } }

/* ── печать: только текст ──────────────────────────────────────── */
@media print {
  .progress-chteniya, .statya .verh, .statya-bok, .oglavlenie-mob, .konsult, .eshchyo-karty, .niz { display: none !important; }
  body.statya::before { display: none; }
  body.statya { background: #fff; color: #000; }
  .statya .statya-shapka h1 { color: #000; }
  .statya-telo { color: #000; }
  .statya-foto img { box-shadow: none; }
}