/* style-v2.css — новая сквозная система (Этап 2, эталон prototip-a.html),
   подключена к реальной странице впервые на Подэтапе 3.3 (index.html).

   Режим перехода (осознанный, временный — раздел 13/17 CLAUDE.md):
   действующий assets/style.css НЕ удаляется и продолжает обслуживать все
   страницы, ещё не переведённые на новую систему. style-v2.css подключают
   только страницы, уже пересобранные под новый дизайн (пока — index.html).
   Обе таблицы стилей будут объединены на Этапе 11, когда весь сайт перейдёт
   на новую систему.

   Состав файла:
     1–9.  Полное содержимое assets/prototip-a.css (дизайн-токены, сбросы,
           доступность, header, мобильная навигация, композиционные секции
           эталона, footer, базовые компоненты) — практически без изменений;
           единственная точечная правка внутри раздела 1 — добавлены токены
           --v2-reading/--v2-lead/--v2-container (Подэтап 3.3.1, раздел 13).
     10. Сетка шести карточек ситуаций (блок 2 главной, Подэтап 3.3) —
         новая, не было в эталоне, т.к. эталон демонстрировал только 4.
     11. Перенесённые стили технических компонентов действующего сайта
         (assets/style.css) — cookie-баннер, реальная форма подписки,
         сообщения формы, Turnstile — под классами/id, на которые опираются
         cookie-consent.js и newsletter.js. Имена этих классов не менять.
     12. (в разделе 9) card-grid-3, card-way-grid и т.д. — дополнительные
         блоки главной, которых не было в витрине компонентов эталона.
     13. Композиция блоков главной (Подэтап 3.3.1, расширено на 3.3.2) — три
         рабочие ширины, .ph-container — единый внутренний контейнер блоков
         2–10 (одна ширина/padding/центрирование вместо разных механизмов у
         светлых и тёмных секций), двухколоночные смысловые блоки, сетка
         "три карточки" — расположение и ширина элементов, тексты не
         менялись.
     14. Адаптивность. */

/* ============================================================
   1. ДИЗАЙН-ТОКЕНЫ
   ============================================================ */
:root{
  /* --- цвет: основа --- */
  --a-navy-deep:#030a18;      /* фон страницы */
  --a-navy-mid:#0a1830;       /* фон секций-полос, футера, header при скролле */
  --a-navy-card:#0d1f3d;      /* фон карточек */
  --a-navy-card-raised:#102344; /* фон приподнятых/hover-карточек */
  --a-line:#24406e;           /* границы, разделители */
  --a-line-soft:#1a2f52;      /* более тихая граница (внутри карточек) */

  /* --- цвет: акцент --- */
  --a-copper:#ff9626;
  --a-copper-deep:#c46e2d;    /* hover тёмных акцентных состояний */
  --a-copper-soft:#ffb877;    /* мягкий акцент, подписи, hover ссылок */
  --a-copper-active:#b86530;  /* нажатое/:active состояние медной кнопки — темнее copper-deep;
                                  контраст с тёмным текстом (--a-navy-deep) ≈4.66:1, проходит WCAG AA (≥4.5:1).
                                  Старое значение #a85d24 давало только ≈4.02:1 — не проходило */

  /* --- цвет: текст --- */
  --a-text:#f4f2ec;           /* основной текст на тёмном фоне */
  --a-muted:#a9b6cc;          /* второстепенный текст */
  --a-muted-dim:#7c8aa3;      /* третичный текст (подписи, метки) */

  /* --- цвет: служебные состояния (форма, сообщения) --- */
  --a-success:#8fd0a0;
  --a-success-bg:rgba(143,208,160,0.12);
  --a-error:#f0857a;
  --a-error-bg:rgba(240,133,122,0.12);
  --a-focus-ring:#ffb877;     /* цвет кольца фокуса — медный, не синий, чтобы не спорить с акцентом */

  /* --- типографика --- */
  --a-font-display:'Oswald', sans-serif;   /* крупные заголовки, названия карточек, kicker, короткие акценты */
  --a-font-voice:'Lora', serif;            /* основной читаемый текст */
  --font-ui: "Inter", Arial, sans-serif;   /* меню, кнопки, интерактивные ссылки (Подэтап 3.4, раздел 22 CLAUDE.md) */

  /* --- цвет: текст навигации (Подэтап 3.4) ---
     заметно светлее приглушённого --a-muted, но не полностью белый — резерв
     "почти белого" (--a-text) остаётся за hover/active/focus-состояниями,
     чтобы у них было куда расти по яркости */
  --a-nav-text:#dde3ef;
  /* модульная шкала ~1.2, зажата clamp() между мобильным и десктопным размером */
  --a-fs-h1:clamp(32px, 2.4vw + 22px, 52px);
  --a-fs-h2:clamp(24px, 1.4vw + 18px, 34px);
  --a-fs-h3:clamp(19px, 0.6vw + 16px, 21px);
  --a-fs-h4:clamp(16px, 0.3vw + 14px, 17px);
  --a-fs-body-lg:19px;
  --a-fs-body:17.5px;
  --a-fs-small:15px;
  --a-fs-caption:13px;
  --a-lh-heading:1.2;
  --a-lh-body:1.7;

  /* --- контейнеры и сетка --- */
  --a-container:1180px;       /* максимальная ширина страницы */
  --a-container-header:1480px; /* отдельный, более широкий контейнер только для строки header —
                                   семи пунктам навигации, бренду и CTA нужно больше воздуха,
                                   чем текстовым секциям; --a-container контентных секций не трогается.
                                   Поднят с 1280 на 1480px на Подэтапе 3.4 (раздел 22 CLAUDE.md) —
                                   после перевода меню/кнопок на Inter реальная минимальная ширина
                                   строки header выросла до ≈1441px (измерено), старый контейнер
                                   обрезал бы её даже на сверхширoких экранах */
  --a-text-col:640px;         /* ширина колонки для длинного текста (~72 символа) */
  --a-text-col-wide:760px;    /* чуть шире — для вводных абзацев секций */
  --a-grid-gap:28px;          /* базовый gap сетки карточек */

  /* --- три рабочие ширины композиции (Подэтап 3.3.1, раздел 20.9 CLAUDE.md) ---
     не один max-width на все типы контента: обычный текст, вводный текст и
     полноширинные композиционные блоки используют разные токены. */
  --v2-reading:780px;   /* обычный длинный текст — комфортная длина строки */
  --v2-lead:900px;      /* вводный текст раздела, смысловой вывод */
  --v2-container:var(--a-container); /* композиция, карточки, схемы — вся ширина контейнера */

  /* --- интервалы (шкала 4px) --- */
  --a-space-1:4px;
  --a-space-2:8px;
  --a-space-3:12px;
  --a-space-4:16px;
  --a-space-5:24px;
  --a-space-6:32px;
  --a-space-7:48px;
  --a-space-8:64px;
  --a-space-9:96px;
  --a-section-pad-desktop:90px;
  --a-section-pad-tablet:64px;
  --a-section-pad-mobile:48px;

  /* --- радиусы --- */
  --a-radius-sm:3px;          /* кнопки, поля */
  --a-radius-md:6px;          /* карточки */
  --a-radius-lg:10px;         /* крупные блоки, модальные панели */
  --a-radius-pill:999px;      /* точки, чипы */

  /* --- границы --- */
  --a-border-width:1px;
  --a-border:var(--a-border-width) solid var(--a-line);

  /* --- тени (тёмная тема — плотнее и темнее обычного) --- */
  --a-shadow-sm:0 2px 8px rgba(0,0,0,0.28);
  --a-shadow-md:0 12px 32px rgba(0,0,0,0.38);
  --a-shadow-lg:0 24px 64px rgba(0,0,0,0.5);

  /* --- анимация --- */
  --a-ease:cubic-bezier(.2,.7,.3,1);
  --a-duration-fast:120ms;
  --a-duration-base:200ms;
  --a-duration-slow:320ms;

  /* --- z-index шкала --- */
  --a-z-header:50;
  --a-z-dropdown:60;
  --a-z-mobile-panel:100;
}

/* ============================================================
   2. БАЗОВЫЕ СБРОСЫ И ТИПОГРАФИКА
   ============================================================ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--a-navy-deep);
  color:var(--a-text);
  font-family:var(--a-font-voice);
  font-size:var(--a-fs-body);
  line-height:var(--a-lh-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font:inherit; color:inherit;}
h1,h2,h3,h4{font-family:var(--a-font-display); font-weight:500; letter-spacing:0.01em; line-height:var(--a-lh-heading);}
h1{font-size:var(--a-fs-h1);}
h2{font-size:var(--a-fs-h2);}
h3{font-size:var(--a-fs-h3);}
h4{font-size:var(--a-fs-h4);}

/* ============================================================
   3. ДОСТУПНОСТЬ
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--a-focus-ring);
  outline-offset:3px;
  border-radius:var(--a-radius-sm);
}
.ph-dropdown a:focus-visible{outline-offset:-2px;}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   4. HEADER (desktop)
   ============================================================ */
.ph{position:sticky; top:0; z-index:var(--a-z-header); background:rgba(4,11,24,0.92); backdrop-filter:blur(10px); border-bottom:var(--a-border);}
/* Подэтап 3.4.1 (раздел 22.12 CLAUDE.md): шапка пересобрана как три области —
   бренд / навигация / CTA — с более плотными, но не тесными промежутками,
   чтобы вернуть полноценное desktop-меню на 1366/1440px без уменьшения
   шрифта. padding и gap сокращены сильнее, чем на Подэтапе 3.4. */
.ph-nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 24px; max-width:var(--a-container-header); margin:0 auto;}
.ph-brand{display:flex; align-items:center; gap:10px; font-family:var(--a-font-display); font-weight:600; font-size:18px; letter-spacing:0.02em; min-height:44px; white-space:nowrap; flex-shrink:0;}
.ph-brand img{width:36px; height:36px;}
/* Кавычки вокруг «Феникс» — приём со старого сайта: цвет как у акцентной
   кнопки (var(--a-copper)), сам текст остаётся полужирным, кавычки — нет. */
.ph-brand .ph-sep{color:var(--a-copper); font-weight:400;}

/* Подэтап 3.4: пункты меню переведены с Oswald на Inter (--font-ui) — узкий
   Oswald в мелком размере читался слабее основного текста; нормальный
   регистр, без искусственного letter-spacing (раздел 22 CLAUDE.md). */
.ph-links{display:flex; gap:4px; font-family:var(--font-ui); font-size:15px; font-weight:600; line-height:1.35;}
.ph-item{position:relative;}
/* горизонтальный padding сокращён до 7px на Подэтапе 3.4.1 (было 10px на
   3.4, 12px в эталоне) — экономия ширины строки без потери площади клика
   (высота не менялась); gap до подписи-стрелки сокращён с 6 до 4px —
   «стрелка ближе к подписи» (раздел 22.12 CLAUDE.md) */
.ph-link{
  display:flex; align-items:center; gap:4px; padding:10px 7px; border-radius:var(--a-radius-sm);
  color:var(--a-nav-text); background:none; border:none; cursor:pointer; white-space:nowrap;
  transition:color var(--a-duration-base) var(--a-ease), background-color var(--a-duration-base) var(--a-ease);
}
.ph-links a.ph-link{padding:10px 7px;}
.ph-link:hover, .ph-link:focus-visible{color:var(--a-text);}
.ph-item.is-open .ph-link{color:var(--a-text); background:rgba(255,150,38,0.08);}
.ph-caret{width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--a-duration-base) var(--a-ease);}
.ph-item.is-open .ph-caret{transform:rotate(225deg) translateY(1px);}

/* --- выпадающее меню --- */
.ph-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:280px;
  background:var(--a-navy-card); border:var(--a-border); border-radius:var(--a-radius-md);
  box-shadow:var(--a-shadow-md); padding:10px; z-index:var(--a-z-dropdown);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--a-duration-base) var(--a-ease), transform var(--a-duration-base) var(--a-ease), visibility 0s linear var(--a-duration-base);
}
.ph-item.is-open .ph-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--a-duration-base) var(--a-ease), transform var(--a-duration-base) var(--a-ease);
}
.ph-dropdown a{
  display:block; padding:12px 14px; border-radius:var(--a-radius-sm);
  font-family:var(--font-ui); font-size:15px; font-weight:500; line-height:1.4;
  color:var(--a-text); transition:background-color var(--a-duration-fast) var(--a-ease);
}
.ph-dropdown a:hover{background:rgba(255,150,38,0.10); color:var(--a-copper-soft);}

/* Визуальное отделение «Сопровождения» от трёх проектных участков —
   разделитель + подпись «Постоянная форма помощи» (раздел 4.1 CLAUDE.md) */
.ph-dropdown-divider{
  margin:8px 6px 6px; padding-top:10px; border-top:1px dashed var(--a-line);
  font-family:var(--a-font-display); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--a-muted-dim);
}

/* CTA шапки — 15px вместо общего кнопочного 16px (раздел 22 CLAUDE.md,
   допустимое исключение для самого тесного по месту участка интерфейса);
   ниже 15px не уменьшать. */
.ph-cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:15px; font-weight:600; line-height:1.25;
  background:var(--a-copper); color:var(--a-navy-deep); padding:12px 16px; min-height:48px; border-radius:var(--a-radius-sm);
  white-space:nowrap; flex-shrink:0; transition:background-color var(--a-duration-base) var(--a-ease); border:1px solid transparent;
}
.ph-cta:hover{background:var(--a-copper-deep);}

.ph-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px;
  background:none; border:none; cursor:pointer; padding:6px; border-radius:var(--a-radius-sm);
}
.ph-burger span{width:22px; height:2px; background:var(--a-text); transition:transform var(--a-duration-base) var(--a-ease), opacity var(--a-duration-base) var(--a-ease);}

/* ============================================================
   5. МОБИЛЬНАЯ НАВИГАЦИЯ (панель, аккордеон)
   ============================================================ */
.ph-overlay{
  display:none; position:fixed; inset:0; background:rgba(3,10,24,0.6); z-index:var(--a-z-mobile-panel);
}
.ph-overlay.is-open{display:block;}

.ph-mobile-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(360px, 88vw); z-index:calc(var(--a-z-mobile-panel) + 1);
  background:var(--a-navy-mid); border-left:var(--a-border); box-shadow:var(--a-shadow-lg);
  transform:translateX(100%); transition:transform var(--a-duration-slow) var(--a-ease);
}
.ph-mobile-panel:not([hidden]){display:flex; flex-direction:column;}
.ph-mobile-panel.is-open{transform:translateX(0);}

.ph-mobile-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:var(--a-border);}
.ph-mobile-close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--a-text); cursor:pointer; border-radius:var(--a-radius-sm); font-size:22px;
}
.ph-mobile-close:hover{color:var(--a-copper-soft);}

.ph-mobile-scroll{flex:1 1 auto; overflow-y:auto; padding:8px 12px;}

.ph-accordion-item{border-bottom:1px solid var(--a-line-soft);}
.ph-accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; color:var(--a-text); text-align:left; cursor:pointer;
  padding:16px 8px; min-height:44px; font-family:var(--font-ui); font-size:17px; font-weight:600; line-height:1.3;
}
.ph-accordion-trigger .ph-caret{flex:none;}
.ph-accordion-trigger[aria-expanded="true"] .ph-caret{transform:rotate(225deg) translateY(1px); color:var(--a-copper-soft);}
.ph-accordion-panel{overflow:hidden; max-height:0; transition:max-height var(--a-duration-slow) var(--a-ease);}
/* Открытая высота панели больше не фиксированная константа (Подэтап 11.7,
   §29.7 CLAUDE.md) — задаётся inline-стилем из assets/navigation-v2.js по
   фактическому scrollHeight конкретной панели в момент открытия. */
.ph-accordion-panel-inner{padding:2px 8px 14px 8px; display:flex; flex-direction:column; gap:2px;}
.ph-accordion-panel-inner a{padding:10px 12px; border-radius:var(--a-radius-sm); font-family:var(--font-ui); font-size:16px; font-weight:500; line-height:1.4; color:var(--a-muted); min-height:44px; display:flex; align-items:center;}
.ph-accordion-panel-inner a:hover{background:rgba(255,150,38,0.08); color:var(--a-copper-soft);}
.ph-accordion-note{font-size:11.5px; color:var(--a-muted-dim); padding:0 12px 8px;}

.ph-mobile-cta-wrap{flex:none; padding:16px; border-top:var(--a-border); background:var(--a-navy-mid);}
/* min-height 48px, а не общий мобильный минимум 44px — это настоящая кнопка
   (.btn), для кнопок раздел 22 CLAUDE.md требует 48px независимо от того,
   что расположена она в мобильной панели */
.ph-mobile-cta{display:block; text-align:center; width:100%; padding:15px; min-height:48px;}

/* ============================================================
   6. ПЕРВЫЙ ЭКРАН
   ============================================================ */
.ph-hero{padding:var(--a-section-pad-desktop) 32px 90px; background:linear-gradient(180deg, var(--a-navy-mid), var(--a-navy-deep) 70%); text-align:center;}
.ph-hero-inner{max-width:var(--a-text-col-wide); margin:0 auto;}
.ph-eyebrow{font-family:var(--a-font-display); font-size:var(--a-fs-caption); letter-spacing:0.1em; color:var(--a-copper-soft); margin-bottom:20px; text-transform:none;}
.ph-hero-inner h1{margin-bottom:24px; color:var(--a-text);}
.ph-lead{font-size:var(--a-fs-body-lg); color:var(--a-muted); margin:0 auto 34px; max-width:640px;}
.ph-actions{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}

/* ============================================================
   7. СЕКЦИИ
   ============================================================ */
/* Секция задаёт только вертикальный ритм и (для тёмных секций) фон на всю
   ширину экрана. Ширина и центрирование содержимого — задача .ph-container
   (Подэтап 3.3.2, раздел 20.10 CLAUDE.md): раньше секция сама была сразу и
   контейнером (max-width+margin auto прямо на <section>) для светлых блоков,
   а тёмные секции пытались воссоздать то же самое отдельным правилом на
   каждого прямого потомка — два разных механизма давали разный левый отступ
   контента (расхождение ~32px на десктопе) и, отдельно, некоторые прямые
   потомки тёмных секций (например .ph-head, у которого не было собственного
   margin-left/right) неожиданно получали margin:auto и визуально
   центрировались вместо выравнивания по левому краю. */
.ph-section{padding:var(--a-section-pad-desktop) 0;}
.ph-section-dark{background:var(--a-navy-mid); border-top:var(--a-border); border-bottom:var(--a-border);}

/* единый внутренний контейнер для блоков 2–10: одна и та же ширина, padding
   и центрирование в каждом блоке — независимо от фона секции. Левая граница
   контейнера совпадает у всех блоков 2–10 с точностью до 1px (проверено
   раздел 20.10.7 CLAUDE.md). Блоки 1 и 11 (первый экран и финальный CTA)
   используют свою собственную центрированную композицию (.ph-hero-inner/
   .ph-final-inner) и .ph-container не используют — они остаются
   центрированными по замыслу (раздел 20.10 CLAUDE.md). */
.ph-container{max-width:var(--a-container); margin:0 auto; padding:0 32px;}

.ph-head{max-width:var(--v2-lead); margin-bottom:48px; margin-left:0; margin-right:auto;}
/* .ph-head-left исторически задавал более широкую колонку (760px) для
   заголовка+вводного абзаца в некоторых блоках; после унификации трёх
   уровней ширины (раздел 20.10.3) оба варианта используют одну и ту же
   ширину — var(--v2-lead) — из правила .ph-head выше, отдельное правило
   для -left больше не нужно. Класс оставлен в разметке (безвреден). */
.ph-kicker{font-family:var(--a-font-display); font-size:12.5px; letter-spacing:0.1em; color:var(--a-copper); margin-bottom:12px;}
.ph-wide-text{font-size:var(--a-fs-body-lg); color:var(--a-muted); max-width:var(--a-text-col-wide); margin:0 0 40px;}
.ph-wide-text-tight{margin-top:36px; margin-bottom:0; font-family:var(--a-font-voice); font-style:italic; font-size:18px; max-width:600px;}

/* ---------- причинная цепочка ---------- */

/* ---------- финальный CTA ---------- */
.ph-final{padding:110px 32px; text-align:center; background:radial-gradient(ellipse 800px 500px at 50% 30%, rgba(255,150,38,0.10), transparent 65%);}
.ph-final-inner{max-width:640px; margin:0 auto;}
.ph-final h2{margin-bottom:20px; color:var(--a-text);}
.ph-final p{color:var(--a-muted); font-size:17px; margin-bottom:32px;}

/* ============================================================
   8. FOOTER
   ============================================================ */
.ph-footer{background:var(--a-navy-mid); border-top:var(--a-border); padding:56px 32px 28px;}
.ph-footer-grid{max-width:var(--a-container); margin:0 auto 40px; display:grid; grid-template-columns:repeat(5,1fr); gap:28px;}
.ph-footer-col h5{font-family:var(--a-font-display); font-size:12.5px; letter-spacing:0.06em; color:var(--a-copper-soft); margin-bottom:14px; text-transform:uppercase;}
.ph-footer-col a{display:block; color:var(--a-muted); font-size:14px; margin-bottom:9px; min-height:24px;}
.ph-footer-col a:hover{color:var(--a-copper-soft);}
.ph-footer-bottom{max-width:var(--a-container); margin:0 auto; padding-top:22px; border-top:1px solid var(--a-line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 24px; color:var(--a-muted); font-size:13px;}
.ph-footer-legal{display:inline-flex; gap:20px; flex-wrap:wrap;}
.ph-footer-legal a{color:var(--a-muted); min-height:24px; display:inline-flex; align-items:center;}
.ph-footer-legal a:hover{color:var(--a-copper-soft);}

/* ---------- подписка (в новом footer — реальная рабочая форма, раздел 13) ---------- */
.ph-newsletter{
  max-width:var(--a-container); margin:0 auto 40px; padding:30px 32px; background:var(--a-navy-card);
  border:var(--a-border); border-radius:var(--a-radius-md); display:grid; grid-template-columns:1fr 1.3fr; gap:32px; align-items:start;
}
.ph-newsletter h5{font-family:var(--a-font-display); font-size:14px; letter-spacing:0.05em; text-transform:uppercase; color:var(--a-copper-soft); margin-bottom:10px;}
.ph-newsletter p{color:var(--a-muted); font-size:14.5px;}
.ph-newsletter-row{flex-direction:row; gap:12px; flex-wrap:wrap;}
.ph-newsletter-row input{flex:1 1 200px; min-width:0;}
.ph-newsletter-row .btn{flex:none;}
.ph-newsletter-form{display:flex; flex-direction:column; gap:18px;}
.ph-newsletter-consent{display:flex; flex-direction:column; gap:12px;}

/* ============================================================
   9. БАЗОВЫЕ КОМПОНЕНТЫ
   ============================================================ */

/* --- кнопки ---
   Подэтап 3.4: переведены с Oswald на Inter — узкий Oswald в 14px читался
   заметно слабее основного текста Lora. Без letter-spacing (нормальный
   регистр и так не требует расширения), min-height увеличен 44→48px,
   font-size 14→16px (раздел 22 CLAUDE.md). */
.btn{
  font-family:var(--font-ui); font-size:16px; font-weight:600; line-height:1.25; padding:14px 26px;
  border-radius:var(--a-radius-sm); display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; border:1px solid transparent; cursor:pointer;
  transition:background-color var(--a-duration-base) var(--a-ease), border-color var(--a-duration-base) var(--a-ease), color var(--a-duration-base) var(--a-ease), opacity var(--a-duration-base) var(--a-ease);
}
.btn-solid{background:var(--a-copper); color:var(--a-navy-deep);}
.btn-solid:hover{background:var(--a-copper-deep);}
.btn-solid:active{background:var(--a-copper-active);}
.btn-solid:disabled{background:var(--a-navy-card); color:var(--a-muted-dim); cursor:not-allowed; opacity:0.6;}

.btn-line{border-color:var(--a-line); color:var(--a-text); background:transparent;}
.btn-line:hover{border-color:var(--a-copper); color:var(--a-copper-soft);}
.btn-line:active{border-color:var(--a-copper-deep); color:var(--a-copper-deep);}
.btn-line:disabled{border-color:var(--a-line-soft); color:var(--a-muted-dim); cursor:not-allowed; opacity:0.6;}

/* --- текстовые ссылки ---
   Подэтап 3.4: Inter вместо Oswald, 15px вместо 14.5px, добавлен явный
   font-weight и line-height — узкий Oswald в мелком размере читался как
   подпись, а не как действие (раздел 22 CLAUDE.md). */
.link-arrow{display:inline-block; margin-top:32px; font-family:var(--font-ui); font-size:15px; font-weight:600; line-height:1.4; color:var(--a-copper-soft); border-bottom:1px solid transparent; transition:border-color var(--a-duration-base) var(--a-ease), color var(--a-duration-base) var(--a-ease); min-height:24px;}
.link-arrow:hover{border-color:var(--a-copper-soft);}

.link-text{color:var(--a-copper-soft); border-bottom:1px solid rgba(255,184,119,0.35); transition:border-color var(--a-duration-base) var(--a-ease);}
.link-text:hover{border-color:var(--a-copper-soft);}

/* --- хлебные крошки --- */
.crumbs{display:flex; align-items:center; gap:8px; font-family:var(--a-font-display); font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--a-muted-dim); flex-wrap:wrap; margin-bottom:28px;}
.crumbs a{color:var(--a-muted); min-height:24px; display:inline-flex; align-items:center;}
.crumbs a:hover{color:var(--a-copper-soft);}
.crumbs .crumbs-sep{color:var(--a-line);}
.crumbs .crumbs-current{color:var(--a-copper);}

/* --- карточки: базовый класс + подтипы --- */
.card{
  background:var(--a-navy-card); border:var(--a-border); border-radius:var(--a-radius-md); padding:28px 26px;
  transition:transform var(--a-duration-base) var(--a-ease), border-color var(--a-duration-base) var(--a-ease), box-shadow var(--a-duration-base) var(--a-ease);
}
/* Подъём/акцентная граница/тень — только у карточки-ссылки (a.card).
   Статические карточки (div) не кликабельны и не должны визуально
   обещать интерактивность через hover-эффект. */
a.card:hover{transform:translateY(-4px); border-color:var(--a-copper); box-shadow:var(--a-shadow-sm);}
.card h3{margin-bottom:10px; color:var(--a-text);}
.card p{color:var(--a-muted); font-size:15.5px;}

/* три карточки (три пути людей — блок 4 главной) */
.card-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--a-grid-gap); margin-bottom:40px;}

/* карточки способов помощи (участки + сопровождение) и самостоятельного пути —
   сетка 2×2 (Подэтап 3.3.1): четыре длинные карточки в один ряд давали
   слишком короткие строки текста; на 1180px-контейнере с gap 28px карточка
   получает ≈576px, что близко к целевым 540–575px */
.card-way-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--a-grid-gap);}
.card-way{display:flex; flex-direction:column; gap:12px;}
/* Обложки книг (Подэтап 11К.9, knigi.html, блок «Библиотека») — доказанная
   необходимость: глобальное img{max-width:100%} не трогает height, поэтому
   HTML-атрибут height="2592" применяется буквально как CSS-высота и растягивает
   карточку; height:auto здесь восстанавливает пропорциональное масштабирование
   по атрибутам width/height (защита от layout shift сохраняется). */
.card-way img{width:100%; height:auto; border-radius:var(--a-radius-sm);}
.card-way .card-tag{font-family:var(--a-font-display); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--a-muted-dim);}
.card-way.card-way-ongoing{border-style:dashed;}
.card-way.card-way-ongoing .card-tag{color:var(--a-copper-soft);}

/* карточки материалов (переиспользуется на Материалах/Самостоятельном пути) */
.card-material-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--a-grid-gap);}
.card-material .card-tag{font-family:var(--a-font-display); font-size:12px; letter-spacing:0.08em; color:var(--a-copper); margin-bottom:12px; display:block;}
.card-material.card-material-tool{border-style:dashed;}
.card-material-boundary{margin-top:14px; font-family:var(--a-font-voice); font-style:italic; color:var(--a-muted); font-size:14px;}

/* --- блок границы помощи --- */
.boundary-block{background:var(--a-navy-mid); border:var(--a-border); border-radius:var(--a-radius-lg); padding:36px 34px;}
.boundary-block h3{margin-bottom:18px;}
.boundary-list{list-style:none;}
.boundary-list li{display:flex; gap:14px; padding:10px 0; font-size:15.5px; color:var(--a-text);}
.boundary-list .mark{flex:none; width:20px; color:var(--a-muted);}
.boundary-list .mark.is-yes{color:var(--a-copper);}

/* --- смысловой акцент названий (Подэтап 11К.2, раздел 30.8 CLAUDE.md) ---
   Точечный класс для названий элементов внутри согласованных групп
   (шесть ситуаций, три пути, три способа движения, четыре формы помощи,
   карточки самостоятельного пути и далее по мере распространения на
   другие страницы) — не глобальное правило по тегу h2/h3/strong.
   Раньше здесь стояли три отдельных правила (h3.accent-name/
   h2.accent-name/strong.accent-name), каждое специфичностью «1 класс +
   1 элемент» — рассчитанные на перевес порядком в файле над конкретными
   уже известными на момент их добавления компонентными правилами
   (.card h3, .move-text h3 и т. д.). При проверке Подэтапа 11К.10
   обнаружено, что этот расчёт не сработал для .mk-level-text h3
   (та же специфичность, но правило расположено в файле позже) — семь
   уровней и семь результатов на уже принятом metod.html фактически не
   подсвечивались, хотя класс на них стоял (проверка при 11К.8 смотрела
   на наличие класса, не на реальный computed-цвет каждого элемента).
   Исправлено переходом на приём «удвоенный класс» — специфичность
   (0,2,0) заведомо выше любого будущего правила вида «1 класс + 1 тег»
   (0,1,1), поэтому больше не зависит от того, где в файле окажется
   очередное компонентное правило, и не требует !important. Цвет не
   менялся — тот же принятый акцент --a-copper: контраст 7.53:1 на фоне
   карточки (--a-navy-card) и 8.13:1 на фоне тёмной секции (--a-navy-mid),
   оба значения проходят WCAG AAA (≥7:1) для обычного текста. */
.accent-name.accent-name{color:var(--a-copper);}

/* ============================================================
   10. КАРТОЧКИ СИТУАЦИЙ (блок 2 главной, Подэтап 3.3)
   В эталоне (раздел 19) была только демонстрация из 4 карточек
   (.card-grid). Для реальных шести ситуаций (раздел 3 CLAUDE.md) нужна
   отдельная сетка 3×2 / 2×3 / 1 — задание Подэтапа 3.3, раздел 20.7.
   ============================================================ */
.situ-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--a-grid-gap);}
.card-situation{position:relative;}
.card-situation p{margin-bottom:10px;}
.card-situation .link-arrow{margin-top:6px;}
@media (max-width:1024px){
  .situ-card-grid{grid-template-columns:repeat(2,1fr);} /* планшет — 2×3 */
}
@media (max-width:767px){
  .situ-card-grid{grid-template-columns:1fr;} /* телефон — одна колонка */
}

/* ============================================================
   11. ТЕХНИЧЕСКИЕ КОМПОНЕНТЫ (перенесены из assets/style.css)
   Классы/id ниже используются существующими скриптами
   (cookie-consent.js, newsletter.js) — не переименовывать.
   ============================================================ */

/* --- кнопка cookie-баннера: cookie-consent.js вставляет class="cta-btn solid" --- */
.cta-btn{
  font-family:var(--a-font-display); text-transform:uppercase; letter-spacing:0.06em; font-size:13px;
  background:transparent; color:var(--a-copper); border:1px solid var(--a-copper);
  padding:11px 26px; border-radius:var(--a-radius-sm); transition:all var(--a-duration-base) var(--a-ease);
  white-space:nowrap; cursor:pointer;
}
.cta-btn:hover{background:var(--a-copper); color:var(--a-navy-deep);}
.cta-btn.solid{background:var(--a-copper); color:var(--a-navy-deep);}
.cta-btn.solid:hover{background:var(--a-copper-deep); border-color:var(--a-copper-deep);}

/* --- cookie-баннер (разметку строит cookie-consent.js) ---
   z-index ниже мобильной панели (var(--a-z-mobile-panel), см. раздел 1) —
   иначе баннер перекрывал закреплённый CTA внизу открытой мобильной панели. */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--a-navy-mid); border-top:1px solid rgba(255,150,38,0.25);
  padding:18px 32px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,0.35);
  transform:translateY(120%); transition:transform var(--a-duration-slow) var(--a-ease);
}
#cookie-banner.visible{transform:translateY(0);}
#cookie-banner p{color:var(--a-text); font-size:14px; max-width:760px; margin:0;}
#cookie-banner a{color:var(--a-copper-soft); text-decoration:underline; text-underline-offset:2px;}
#cookie-banner a:hover{color:var(--a-copper);}
#cookie-banner button{flex:none; font-size:12.5px; padding:10px 22px;}
@media (max-width:600px){
  #cookie-banner{padding:16px 20px; justify-content:center; text-align:center;}
}

/* --- согласия (форма подписки) --- */
.consent-check{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13.5px; color:var(--a-muted); line-height:1.5;}
.consent-check input[type="checkbox"]{
  flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--a-copper);
  cursor:pointer; background:var(--a-navy-deep); border:1px solid var(--a-line);
}
.consent-check a{color:var(--a-copper-soft); text-decoration:underline; text-underline-offset:2px;}
.consent-check a:hover{color:var(--a-copper);}

/* --- Cloudflare Turnstile: обычно невидим (appearance:'interaction-only',
   assets/turnstile-init.js) — контейнер не должен занимать видимое место,
   пока Cloudflare не запросит интерактивное подтверждение --- */
.cf-turnstile{margin-bottom:0;}
.cf-turnstile:has(iframe){margin-bottom:16px;}

/* --- поле email реальной формы подписки --- */
.ph-newsletter-form input[type="email"]{
  background:var(--a-navy-deep); border:var(--a-border); border-radius:var(--a-radius-sm);
  padding:13px 14px; color:var(--a-text); font-family:var(--a-font-voice); font-size:15px; min-height:44px;
  transition:border-color var(--a-duration-base) var(--a-ease);
}
.ph-newsletter-form input[type="email"]:focus{outline:none; border-color:var(--a-copper);}

/* --- сообщения формы (успех/ошибка) — по умолчанию скрыты,
   newsletter.js показывает нужное через style.display='block' --- */
#newsletter-success, #newsletter-error{display:none;}
.message{border-radius:var(--a-radius-sm); padding:14px 16px; font-size:14.5px;}
.message-success{background:var(--a-success-bg); color:var(--a-success); border:1px solid rgba(143,208,160,0.35);}
.message-error{background:var(--a-error-bg); color:var(--a-error); border:1px solid rgba(240,133,122,0.35);}

/* ============================================================
   13. КОМПОЗИЦИЯ БЛОКОВ ГЛАВНОЙ (Подэтап 3.3.1, расширено на 3.3.2)
   Корректировка расположения и ширины — тексты не менялись (разделы 20.9,
   20.10 CLAUDE.md). Три рабочие ширины вместо одной на весь контент, все —
   от одной и той же левой границы .ph-container (единая внешняя сетка,
   раздел 20.10.1):
     --v2-reading (780px) — обычный длинный текст;
     --v2-lead (900px) — заголовок, вводная часть и смысловой вывод;
     --v2-container (= --a-container, 1180px) — композиция, карточки, схемы
     (сами не имеют собственного max-width — просто заполняют .ph-container).
   Правило выравнивания (раздел 20.10.2): margin-left:0; margin-right:auto —
   не margin-inline:auto — у всех сужаемых текстовых элементов ниже.
   ============================================================ */

/* обычный длинный текст — 780px вместо прежних 760px (--a-text-col-wide);
   правило намеренно идёт здесь отдельной строкой, а не правкой раздела 7,
   чтобы разделы 1–11 остались текстуально тем же, что в принятом эталоне */
.ph-wide-text{max-width:var(--v2-reading); margin-left:0; margin-right:auto;}

/* заголовок, вводный текст раздела / смысловой вывод — до 900px */
.ph-lead-text{font-size:var(--a-fs-body-lg); color:var(--a-muted); max-width:var(--v2-lead); margin-top:0; margin-right:auto; margin-bottom:24px; margin-left:0;}

/* заголовок + первый абзац сразу после него внутри .ph-head — единый отступ
   независимо от блока (2, 5, 6, 8 — везде, где вводный абзац лежит внутри
   .ph-head, а не отдельно на уровне секции); последний абзац в .ph-head —
   без нижнего отступа, т.к. сам .ph-head уже задаёт отступ до следующего
   содержимого блока (margin-bottom:48px выше). Заменяет точечные inline
   margin-top/margin-bottom, которые были в разметке до Подэтапа 3.3.2. */
.ph-head h2 + .ph-lead-text{margin-top:20px;}
.ph-head > .ph-lead-text:last-child{margin-bottom:0;}

/* закрывающая заметка блока (после строк/сетки/сплита — блоки 5, 9, 10) —
   единый отступ вместо разных точечных inline-стилей */
.ph-lead-text-note{margin-top:32px; margin-bottom:0;}

/* .ph-actions по умолчанию центрирует кнопки (justify-content:center) — это
   нужно для первого экрана и финального CTA (блоки 1 и 11), но не для
   кнопок внутри блоков 2–10, где всё содержимое выравнивается по левому
   краю контейнера (раздел 20.10.2 CLAUDE.md). */
.ph-actions-left{justify-content:flex-start;}
/* блок 8: отступ кнопок от сетки карточек — было inline-стилем */
.ph-actions-spaced{margin-top:40px;}

/* --- блок 2: немного шире внутренний текст карточек ситуаций без изменения
   сетки 3×2/2×3/1 — за счёт чуть меньших внутренних отступов карточки --- */
.card-situation{padding:26px 22px;}

/* ============================================================
   14. АДАПТИВНОСТЬ
   Проверено на: 360, 390, 768, 1024, 1220, 1280, 1440 —
   раздел 20 CLAUDE.md, Подэтап 3.3 и 3.3.1.
   ============================================================ */
@media (max-width:1024px){
  .ph-footer-grid{grid-template-columns:repeat(3,1fr);}

  .card-material-grid{grid-template-columns:1fr 1fr;}
  .card-grid-3{grid-template-columns:1fr 1fr;}
  /* планшет и телефон — одна колонка для карточек 2×2 (блоки 6 и 8) */
  .card-way-grid{grid-template-columns:1fr;}
}
/* Переключение header на мобильный режим — критерий финальной визуальной
   корректировки Этапа 2 (раздел 19.7 CLAUDE.md): не отсутствие overflow,
   а однострочное свободное расположение всех пунктов + бренда + CTA.
   Брейкпоинт 1360px (раздел 22.12 CLAUDE.md) — desktop-меню помещается на
   1366/1440px. Это же значение используется в assets/navigation-v2.js и в
   инлайновом скрипте prototip-a.html (matchMedia) — не менять здесь без
   синхронного изменения там. */
@media (max-width:1360px){
  .ph-links{display:none;}
  .ph-burger{display:flex;}
}

@media (max-width:768px){
  .ph-section{padding:var(--a-section-pad-tablet) 0;}
  .ph-container{padding:0 24px;}
  .ph-hero{padding:56px 24px 64px;}
  .card-material-grid{grid-template-columns:1fr;}
  .card-grid-3{grid-template-columns:1fr;}
  .ph-newsletter{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .ph-cta{display:none;}
  .ph-footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:390px){
  .ph-nav{padding:14px 18px;}
  .ph-hero{padding:44px 18px 52px;}
  .ph-section{padding:var(--a-section-pad-mobile) 0;}
  .ph-container{padding:0 18px;}

  .ph-footer-grid{grid-template-columns:1fr; gap:22px;}
}
@media (max-width:360px){
  .ph-nav{padding:12px 14px; gap:10px;}
  .ph-cta{padding:11px 14px; font-size:12.5px;}
  .card-material-grid, .card-way-grid{grid-template-columns:1fr;}

}

/* ============================================================
   15. СЕМЕЙСТВО «ВАША СИТУАЦИЯ» (Подэтап 4.10 CLAUDE.md)
   Общие классы для situacii.html и шести детальных страниц —
   один набор компонентов, переиспользуемый на всех семи страницах,
   вместо отдельных стилей на каждой. Тексты — разделы 21.9.2–21.15.2.
   ============================================================ */

/* --- крупный список наблюдений/вопросов (детальные страницы, блоки 2/3/5) —
   тот же принцип маркера, что и .boundary-list, но без обёртки-карточки,
   т.к. эти списки лежат прямо в теле секции --- */
.situ-mark-list-lg{list-style:none; margin:20px 0 0; max-width:var(--v2-lead); display:flex; flex-direction:column; gap:0;}
.situ-mark-list-lg li{display:flex; gap:14px; padding:12px 0; font-size:16px; color:var(--a-text); border-bottom:1px solid var(--a-line-soft);}
.situ-mark-list-lg li:first-child{border-top:1px solid var(--a-line-soft);}
.situ-mark-list-lg .mark{flex:none; width:18px; color:var(--a-muted);}

/* --- нумерованные различения (детальные страницы, блок 4) — номер вынесен
   в маркер-кружок по тому же принципу, что .situ-num/.ladder-index, а не
   оставлен литералом «1.» внутри текста --- */
.situ-diff-list{list-style:none; margin:24px 0 0; max-width:var(--v2-lead); display:flex; flex-direction:column; gap:22px;}
.situ-diff-list li{display:flex; gap:16px; color:var(--a-text); font-size:16px; line-height:1.65;}
.situ-diff-num{flex:none; width:30px; height:30px; margin-top:2px; border-radius:50%; border:1px solid var(--a-copper); color:var(--a-copper); font-family:var(--a-font-display); font-size:13px; display:flex; align-items:center; justify-content:center;}

/* --- две действия-ссылки блока 6 (связанная ситуация + обзор), стопкой --- */
.situ-links-stack{display:flex; flex-direction:column; gap:8px; margin-top:28px;}
.situ-links-stack .link-arrow{margin-top:0;}

/* --- дефект Подэтапа 4.11: якорь #shest-situaciy (блок 1 → блок 2 на
   situacii.html) без scroll-margin-top прокручивался ровно под sticky-шапку
   (73–81px) и полностью скрывался под ней. index.html не содержит
   внутристраничных якорей, поэтому это новый дефект именно этой страницы,
   не унаследованное поведение --- */
#shest-situaciy{scroll-margin-top:96px;}

/* ============================================================
   16. СЕМЕЙСТВО «ИНДИВИДУАЛЬНАЯ ПОМОЩЬ» (Подэтап 5.8 CLAUDE.md)
   Все содержательные формы (card-grid-3, card-way-grid, boundary-block,
   situ-mark-list-lg, situ-diff-list, flow) уже существуют и переиспользуются
   без изменений — новых компонентных классов это семейство не потребовало.
   Единственное необходимое дополнение — scroll-margin-top для четырёх новых
   внутристраничных якорей, по тому же принципу, что и #shest-situaciy выше:
   без него цель прокрутки скрывается под sticky-шапкой (73–81px).
   ============================================================ */
#chetyre-formy{scroll-margin-top:96px;}
#logika-issledovaniya{scroll-margin-top:96px;}
#perenos-v-rabotu{scroll-margin-top:96px;}
#ot-zamysla-k-proverke{scroll-margin-top:96px;}

/* ============================================================
   17. СЕМЕЙСТВО «ОБУЧЕНИЕ И СОБЫТИЯ» (Подэтап 6.7 CLAUDE.md)
   Все содержательные формы (card-way-grid, card-grid-3, situ-diff-list,
   situ-mark-list-lg) уже существуют и переиспользуются без изменений —
   новых компонентных классов это семейство не потребовало. Единственное
   необходимое дополнение — scroll-margin-top для одного нового
   внутристраничного якоря (obuchenie.html, блок 1 → блок 2), по тому же
   принципу, что и якоря выше: без него цель прокрутки скрывается под
   sticky-шапкой (73–81px).
   ============================================================ */
#formaty-obucheniya{scroll-margin-top:96px;}

/* ============================================================
   18. СЕМЕЙСТВО «МАТЕРИАЛЫ И СООБЩЕСТВО» (Подэтап 7.6 CLAUDE.md)
   biblioteka.html переиспользует уже существующий, ранее не применённый
   компонент .card-material/.card-material-grid (эталон prototip-a.html) —
   добавлена только строка тегов трёх осей. soobshestvo.html переиспользует
   .card-way-grid/.card/.situ-links-stack без изменений. Остальные пункты
   ниже — новые компоненты для структурных элементов 13 детальных страниц
   (статьи и инструменты), которых не было ни в одной из прежних семей:
   калькуляторы с полями ввода, шаблоны для заполнения, матрицы 2×2, список
   слоёв с цветными точками, таблицы метрик, двухколоночное упражнение,
   карточки шагов с полями «Делать/Не делать/Фраза».
   ============================================================ */

/* --- строка тегов трёх осей на карточке материала (раздел 25.8 CLAUDE.md) --- */
.card-material-tags{margin:12px 0 4px; font-size:13px; line-height:1.6; color:var(--a-muted-dim);}
.card-material-tags strong{color:var(--a-muted); font-weight:600;}

/* --- калькулятор: карточка с формулой, полями ввода и результатом ---
   переиспользуется на двух интерактивных инструментах (LTV, смета потерь) */
.mat-calc-card{background:var(--a-navy-card); border:var(--a-border); border-radius:var(--a-radius-md); padding:28px 30px; margin-bottom:22px; max-width:var(--v2-lead);}
.mat-calc-card h3{font-size:18px; margin-bottom:6px; color:var(--a-text);}

.mat-calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.mat-calc-field label{display:block; font-family:var(--a-font-display); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--a-muted); margin-bottom:6px;}
.mat-calc-field input{
  width:100%; background:var(--a-navy-deep); border:var(--a-border); border-radius:var(--a-radius-sm);
  padding:11px 12px; color:var(--a-text); font-family:var(--a-font-voice); font-size:15px; min-height:44px;
  transition:border-color var(--a-duration-base) var(--a-ease);
}
.mat-calc-field input:focus{outline:none; border-color:var(--a-copper);}
.mat-calc-result{display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid var(--a-line-soft); font-family:var(--a-font-display); text-transform:uppercase; font-size:13px; color:var(--a-muted); flex-wrap:wrap; gap:10px;}
.mat-calc-result .mat-val{font-size:22px; color:var(--a-copper); font-family:var(--a-font-display); text-transform:none;}

@media (max-width:600px){ .mat-calc-grid{grid-template-columns:1fr;} }

/* --- упражнение в две колонки (зеркало культуры) --- */
.mat-exercise-box{background:var(--a-navy-card); border:1px solid var(--a-copper); border-radius:var(--a-radius-md); padding:32px 34px; max-width:var(--v2-lead); margin-bottom:32px;}
.mat-exercise-box p{color:var(--a-text); font-size:15.5px; margin-bottom:14px;}
.mat-exercise-box p:last-child{margin-bottom:0;}

/* --- дефект-предупреждение по уже принятому паттерну: внутристраничные
   якоря первого экрана biblioteka.html без scroll-margin-top скрываются
   под sticky-шапкой (73–81px) --- */
#stati-materialy{scroll-margin-top:96px;}
#instrumenty-materialy{scroll-margin-top:96px;}

/* ============================================================
   19. СЕМЬЯ «МЕТОД И КНИГА» (Подэтап 8.7 CLAUDE.md)
   ============================================================ */

/* внутристраничные якоря первого экрана — тот же паттерн, что и в
   прежних семьях (раздел 21.18.6 CLAUDE.md): без scroll-margin-top
   заголовок целевого блока скрывается под sticky-шапкой */
#urovni, #chasti, #knigi, #glavy, #fragment{scroll-margin-top:96px;}

/* --- нумерованный список с заголовком (семь уровней metod.html,
   семь частей knigi-proektirovanie.html, пять глав knigi-piramida.html) --- */
.mk-level-list{list-style:none; margin:24px 0 0; display:flex; flex-direction:column;}
.mk-level-item{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--a-line);}
.mk-level-item:last-child{border-bottom:none;}
.mk-level-num{flex:none; width:46px; font-family:var(--a-font-display); font-size:22px; color:var(--a-copper);}
.mk-level-text h3{font-family:var(--a-font-display); font-size:17px; margin-bottom:6px; color:var(--a-text);}
.mk-level-text p{color:var(--a-muted); font-size:15px; line-height:1.65; margin:0;}

/* --- метаданные книжного первого экрана (подзаголовок/автор/статус) --- */
.mk-subtitle{font-family:var(--a-font-voice); font-style:italic; color:var(--a-muted); font-size:18px; margin:6px 0 4px;}
.mk-author{font-family:var(--a-font-display); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--a-copper-soft); margin:0 0 22px;}

/* ============================================================
   20. СЕМЬЯ «КОНТАКТ И КВАЛИФИКАЦИЯ» (Подэтап 10.6 CLAUDE.md)
   ============================================================ */

/* внутристраничный якорь формы обращения (kontakty.html) — тот же паттерн, что
   и в прежних семьях: без scroll-margin-top заголовок целевого блока
   скрывается под sticky-шапкой. Якоря #sposoby-dvizheniya (nachnem.html) и
   #pervoe-obrashenie убраны 2026-09-29: страница удалена, второй якорь на
   страницах не встречается. */
#forma-obrasheniya{scroll-margin-top:96px;}

/* --- форма обращения (kontakty.html, блок 3) --- */
.kt-form-card{
  background:var(--a-navy-card); border:var(--a-border); border-radius:var(--a-radius-lg);
  padding:40px; max-width:640px; margin:0 auto;
}
.kt-field{margin-bottom:22px;}
.kt-field label{display:block; font-family:var(--a-font-display); font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--a-muted); margin-bottom:6px;}
.kt-hint{font-size:13.5px; color:var(--a-muted-dim); margin:0 0 8px;}
.kt-field input, .kt-field textarea{
  width:100%; background:var(--a-navy-deep); border:var(--a-border); border-radius:var(--a-radius-sm);
  padding:13px 14px; color:var(--a-text); font-family:var(--a-font-voice); font-size:15px; min-height:44px;
  transition:border-color var(--a-duration-base) var(--a-ease);
}
.kt-field textarea{min-height:150px; resize:vertical;}
.kt-field input:focus, .kt-field textarea:focus{outline:none; border-color:var(--a-copper);}
.kt-form-card .consent-check{margin:20px 0;}
.kt-form-actions .btn{width:100%;}
#kt-form-success, #kt-form-error{display:none; margin-top:18px;}

@media (max-width:600px){
  .kt-form-card{padding:28px 22px;}
}

/* ============================================================
   21. ЮРИДИЧЕСКИЕ СТРАНИЦЫ (Подэтап 11.3 CLAUDE.md)
   ============================================================ */
/* Перенос со старой оболочки (politika-obrabotki-pd.html,
   polzovatelskoe-soglashenie.html) — только переименование переменных
   под токены новой системы (--a-*), без изменения визуальной логики
   и без изменения юридического текста, который эти правила оформляют. */

/* короткая курсивная строка с номером редакции под H1 (дата — часть
   защищённого юридического содержания, класс только оформляет её) */
.legal-date{font-family:var(--a-font-voice); font-style:italic; color:var(--a-muted); font-size:16px; margin:0;}

.legal-body{max-width:var(--a-text-col-wide); margin:0 auto;}
.legal-body h2{
  font-family:var(--a-font-display); text-transform:uppercase; font-size:19px; letter-spacing:0.02em;
  color:var(--a-copper-soft); margin:44px 0 18px; padding-bottom:10px; border-bottom:var(--a-border);
}
.legal-body h2:first-of-type{margin-top:0;}
.legal-body p{color:var(--a-text); font-size:15.5px; line-height:1.8; margin-bottom:14px;}
.legal-body ul{margin:0 0 18px 0; padding-left:0; list-style:none;}
.legal-body ul li{color:var(--a-text); font-size:15.5px; line-height:1.75; margin-bottom:9px; padding-left:22px; position:relative;}
.legal-body ul li::before{content:"—"; position:absolute; left:0; color:var(--a-copper);}
.legal-body a{color:var(--a-copper-soft); text-decoration:underline; text-underline-offset:2px;}
.legal-body a:hover{color:var(--a-copper);}

.legal-requisites{
  background:var(--a-navy-card); border:var(--a-border); border-left:3px solid var(--a-copper);
  border-radius:var(--a-radius-sm); padding:20px 24px; margin:0 0 18px;
}
.legal-requisites p{margin-bottom:4px; font-size:15px; color:var(--a-muted);}
.legal-requisites p:first-child{color:var(--a-text); font-family:var(--a-font-display); font-size:15px; letter-spacing:0.01em; margin-bottom:8px;}

.legal-crossref{
  max-width:var(--a-text-col-wide); margin:40px auto 0; padding:26px 30px; background:var(--a-navy-card);
  border:1px solid var(--a-copper); border-radius:var(--a-radius-md); text-align:center;
}
.legal-crossref p{color:var(--a-text); font-size:15px; margin-bottom:16px;}

@media (max-width:600px){
  .legal-body h2{font-size:17px;}
  .legal-body p, .legal-body ul li{font-size:15px;}
}

/* =====================================================================
   22. КНОПКИ КАНАЛОВ НА kontakty.html
   Ссылки на группы в блоке «Мы в сети» оформлены как кнопки, а не как
   текстовые .link-arrow — по прямой просьбе пользователя. Компонент .btn
   переиспользован без изменений; здесь только раскладка (перенос по
   строкам) и чуть более компактный размер, чем у основных CTA страницы,
   чтобы 2–3 канала внутри карточки не спорили с кнопкой «Описать
   ситуацию» на первом экране.
   ===================================================================== */
.kt-channels{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
/* Темнее, чем базовый прозрачный .btn-line (просьба пользователя
   2026-09-12) — фон как у самого блока «Мы в сети» (.ph-section-dark,
   var(--a-navy-mid)), а не у карточки (var(--a-navy-card)), в которой
   кнопки лежат — так кнопка визуально «утоплена» в фон секции. */
.kt-channel-btn{padding:10px 20px; min-height:42px; font-size:15px; background:var(--a-navy-mid);}

/* =====================================================================
   23. ФИЛЬТРАЦИЯ МАТЕРИАЛОВ (biblioteka.html)
   Поиск по запросу + фильтр по типу материала. Работает поверх уже
   существующих карточек .card-material — сами карточки не переопределяются.
   ===================================================================== */
.mat-filter-bar{
  background:var(--a-navy-card); border:var(--a-border); border-radius:var(--a-radius-md);
  padding:22px 24px; margin-bottom:36px;
}
.mat-filter-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.mat-search{
  flex:1 1 280px; min-width:0; font-family:var(--font-ui); font-size:15px; line-height:1.4;
  padding:12px 16px; min-height:46px; color:var(--a-text); background:var(--a-navy-deep);
  border:1px solid var(--a-line); border-radius:var(--a-radius-sm);
  transition:border-color var(--a-duration-base) var(--a-ease);
}
.mat-search::placeholder{color:var(--a-muted-dim);}
.mat-search:focus{outline:none; border-color:var(--a-copper);}
.mat-search:focus-visible{outline:2px solid var(--a-focus-ring); outline-offset:2px;}

.mat-filter-btns{display:flex; flex-wrap:wrap; gap:8px;}
.mat-filter-btn{
  font-family:var(--font-ui); font-size:14px; font-weight:600; line-height:1.2;
  padding:11px 18px; min-height:46px; display:inline-flex; align-items:center;
  color:var(--a-muted); background:transparent; border:1px solid var(--a-line);
  border-radius:var(--a-radius-pill); cursor:pointer;
  transition:color var(--a-duration-base) var(--a-ease), border-color var(--a-duration-base) var(--a-ease), background-color var(--a-duration-base) var(--a-ease);
}
.mat-filter-btn:hover{color:var(--a-text); border-color:var(--a-copper);}
.mat-filter-btn[aria-pressed="true"]{
  color:var(--a-navy-deep); background:var(--a-copper); border-color:var(--a-copper);
}

.mat-count{
  font-family:var(--font-ui); font-size:14px; color:var(--a-muted-dim);
  margin-top:14px; margin-bottom:0;
}
.mat-empty{
  border:1px dashed var(--a-line); border-radius:var(--a-radius-md);
  padding:34px 28px; text-align:center; color:var(--a-muted); font-size:15.5px;
}
.card-material.is-hidden{display:none;}

@media (max-width:600px){
  .mat-filter-bar{padding:18px 16px;}
  .mat-filter-btn{font-size:13.5px; padding:10px 14px;}
}

/* =====================================================================
   24. ВРЕМЕННЫЙ ПРЕДПРОСМОТР ТИПОГРАФИКИ — ТОЛЬКО ДЛЯ СРАВНЕНИЯ
   Действует исключительно под body.typo-preview, то есть сейчас только
   на uslugi-diagnostika.html. Остальные 44 страницы не затронуты.

   Что проверяем:
   1. Кегль абзацев становится адаптивным. Было жёсткие 19px на любой
      ширине — на телефоне это давало всего ~32 символа в строке при
      норме 35–45, текст рвался на короткие обрывки. Стало: 17px на
      390px (~36 символов) и те же 19px от ~890px и шире — на десктопе
      не меняется ничего.
   2. Списки наблюдений сужаются с 900px до 780px, как обычные абзацы:
      ~97 символов в строке → ~84 при типографской норме 50–75.

   Заголовки (H1/H2) намеренно не трогаются.

   Если правка принимается — значения переносятся в :root и в сам
   компонент .situ-mark-list-lg, а этот раздел и класс на <body>
   удаляются. Если нет — удаляется только этот раздел и класс.
   ===================================================================== */
body.typo-preview{--a-fs-body-lg:clamp(17px, 0.45vw + 15px, 19px);}
body.typo-preview .situ-mark-list-lg{max-width:var(--v2-reading);}