/* =============================================================================
   style.css — v2 «Досье», дизайн-направление «Кабинет» (ТЗ v3, §4).
   Тёмный редакторский нуар + бумажные документы. Сериф в заголовках,
   моно в метках, один акцент — брендовый красный #9B1616.

   Запрещено по концепции: галочки, кружочки-шаги, иконки, градиенты-украшения,
   пастельные карточки, стоковые образы. Бумага лежит на столе плоско.
   ========================================================================== */

/* ------------------------------------------------------------- ПЕРЕМЕННЫЕ */
:root {
  /* Палитра «Кабинет» */
  --desk: #15171B;          /* тёмный стол — основной фон */
  --desk-soft: #1C1F24;     /* приподнятая зона на столе */
  --paper: #F4F1EA;         /* бумага документов */
  --paper-shade: #EAE6DC;   /* подкладка/второй лист */
  --ink: #1A1A1A;           /* текст на бумаге */
  --ink-soft: #44423D;      /* вторичный текст на бумаге */
  --ink-on-dark: #E8E5DE;   /* текст на тёмном */
  --ink-on-dark-soft: #B9B6AE; /* вторичный текст на тёмном */
  --muted: #8A8F98;         /* моно-метки */
  --brand-red: #9B1616;     /* единственный акцент */
  --brand-red-dark: #7E1212;
  --line-dark: #2A2D33;     /* линейки на тёмном */
  --line-paper: #D8D3C6;    /* линейки на бумаге */

  /* Типографика */
  --serif: "Spectral", "Source Serif 4", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --logo-face: "Manrope", "Inter", sans-serif;

  --ease: cubic-bezier(.25,.46,.45,.94);
  --container: 1160px;
}

/* ------------------------------------------------------------------ БАЗА */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink-on-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }

img { max-width: 100%; display: block; }

.container {
  width: min(var(--container), 100% - 96px);
  margin-inline: auto;
}

/* Доступность */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: 10px 16px; z-index: 200; font-family: var(--mono); font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* Появление при прокрутке */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

body.nav-locked { overflow: hidden; }

/* ---------------------------------------------------------------- КНОПКИ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  line-height: 1.25; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 24px; background: none; color: inherit;
  white-space: nowrap; /* подпись кнопки не переносится на 2-ю строку */
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  border-radius: 0; /* бумага и штампы — без скруглений */
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--brand-red); color: #FFFFFF; border-color: var(--brand-red); }
.btn-primary:hover:not(:disabled) { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }

/* Все варианты одной высоты (как в шапке) — отличается только ширина. */
.btn-lg { padding: 10px 32px; }
.btn-small { padding: 10px 18px; }
.btn-block { width: 100%; }

.btn-text {
  border: none; padding: 14px 10px; color: inherit; opacity: .75;
  text-decoration: underline; text-underline-offset: 4px;
}
.btn-text:hover:not(:disabled) { opacity: 1; }

.link-quiet {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-on-dark-soft); text-decoration: underline; text-underline-offset: 5px;
}
.link-quiet:hover { color: var(--ink-on-dark); }

/* ----------------------------------------------------------------- ШАПКА */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--desk);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line-dark); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }

.logo { display: inline-flex; align-items: center; text-decoration: none; }

/* Шрифтовой знак в стиле nevskyiplaw.ru — переносится из v1 без изменений
   конструкции: две строки равной длины, красная «V». На тёмном фоне строки
   светлые (в v1 были чернильные на бумаге). */
.logo-wm { display: inline-flex; flex-direction: column; gap: 1px; line-height: 0.96; font-family: var(--logo-face); }
.logo-wm-1 {
  font-weight: 800; font-size: 24px; letter-spacing: 0.005em; color: var(--ink-on-dark);
  transform: scaleX(0.86); transform-origin: left center;
}
.logo-wm-2 {
  /* Нижняя строка растягивается выключкой ровно до ширины верхней (NEVSKY). */
  font-weight: 700; font-size: 9.5px; color: var(--ink-on-dark);
  transform: scaleX(0.86); transform-origin: left center;
  text-align: justify; text-align-last: justify; text-justify: inter-character;
}
.logo-v { color: var(--brand-red); }

.logo-wm-footer .logo-wm-1 { font-size: 19px; }
.logo-wm-footer .logo-wm-2 { font-size: 7.52px; }

.primary-nav {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  flex: 1 1 auto; min-width: 0; justify-content: flex-end;
}
/* Строка пунктов, которая «сворачивается»: никогда не переносится на 2-ю строку */
.nav-items {
  display: flex; align-items: center; gap: 30px;
  flex: 0 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow: hidden;
}
.primary-nav a:not(.btn) {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-on-dark-soft); text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}
.primary-nav a:not(.btn):hover { color: var(--ink-on-dark); }
.primary-nav .nav-soon {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-on-dark-soft); opacity: .45; cursor: default; user-select: none;
  white-space: nowrap; flex: 0 0 auto;
}

/* Бургер появляется, только когда часть пунктов не помещается (управляет JS через [hidden]) */
.nav-toggle {
  flex: 0 0 auto; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 10px; cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle:not([hidden]) { display: flex; }
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ink-on-dark); display: block; }

/* Выпадающая панель со свёрнутыми пунктами */
.nav-drawer {
  position: absolute; top: calc(100% + 1px); right: 0; z-index: 95;
  min-width: 210px;
  background: var(--desk); border: 1px solid var(--line-dark);
  padding: 18px 22px; gap: 18px;
  flex-direction: column; align-items: flex-start;
  display: none;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer.is-open { display: flex; }
.nav-drawer a:not(.btn), .nav-drawer .nav-soon { font-size: 13px; }

/* ------------------------------------------------------------------ HERO */
.hero { padding: 96px 0 96px; border-bottom: 1px solid var(--line-dark); }
.hero-inner { max-width: 880px; }

.hero-eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 34px;
}
.hero-title {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.08; letter-spacing: -0.015em;
  color: var(--ink-on-dark);
}
.hero-sub {
  margin-top: 30px; max-width: 640px;
  font-size: 18.5px; line-height: 1.7; color: var(--ink-on-dark-soft);
}
.hero-actions { margin-top: 40px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero-tags {
  margin-top: 72px;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 26px; row-gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); line-height: 1.6;
}
/* Каждый пункт — отдельная ссылка на пример из «Практики»; переносится целиком */
.hero-tag { white-space: nowrap; color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.hero-tag[href]:hover { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 4px; }

/* ----------------------------------------------------------- СЕКЦИИ: ОБЩЕЕ */
.section { padding: 96px 0; scroll-margin-top: 72px; /* высота sticky-шапки */ }
.section + .section { border-top: 1px solid var(--line-dark); }

.section-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-red); margin-bottom: 22px;
}
/* На тёмном фоне красный темноват для мелкого текста — высветляем только метку. */
.section-num { color: #C4574F; }

.section-title {
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink-on-dark); max-width: 820px;
}
.section-lead {
  margin-top: 26px; max-width: 680px;
  font-size: 17.5px; color: var(--ink-on-dark-soft);
}
.section-text {
  margin-top: 20px; max-width: 680px;
  font-size: 16.5px; line-height: 1.7; color: var(--ink-on-dark-soft);
}
.section-text strong { color: var(--ink-on-dark); font-weight: 600; }

/* ---------------------------------------------------------------- БУМАГА */
.paper {
  background: var(--paper); color: var(--ink);
  padding: 36px 38px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.35); /* одна жёсткая короткая тень */
}

/* Вымаранная строка. Никогда не раскрывается. */
.redact {
  background: var(--ink); color: var(--ink);
  letter-spacing: -0.06em; user-select: none;
  padding: 0 2px;
  word-break: break-all; /* длинный ряд ██ не должен распирать колонку на мобиле */
}

/* Подпись под артефактом-обрезом */
.iceberg-caption {
  margin-top: 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.8; letter-spacing: .03em;
  color: var(--muted); max-width: 560px;
}

/* ----------------------------------------------------------- 01 ПРОБЛЕМА */
.briefs {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
/* Единый стиль заголовка карточек (briefs «Тупик…» и pillars «Закон…») */
.brief-label, .pillar-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red); padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-paper);
}

/* Точки-индикаторы прокрутки карточек (показываются только в режиме ленты) */
.carousel-dots { display: none; justify-content: center; gap: 9px; margin-top: 22px; }
/* Точки видны всегда, когда есть прокрутка (JS снимает [hidden]), на любой ширине */
.carousel-dots:not([hidden]) { display: flex; }
.carousel-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--muted); opacity: .35; cursor: pointer;
  transition: opacity .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.carousel-dot:hover { opacity: .7; }
.carousel-dot.is-active { background: var(--brand-red); opacity: 1; transform: scale(1.3); }
.brief-text { font-size: 16px; line-height: 1.7; color: var(--ink); }
.brief-verdict {
  margin-top: 20px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);
}
.verdict-key {
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-red); font-weight: 500;
}

.problem-closer {
  margin-top: 64px; max-width: 780px;
  font-family: var(--serif); font-size: clamp(21px, 2.6vw, 28px); line-height: 1.45;
  color: var(--ink-on-dark);
}
/* Закрывающий абзац блока 01 — это связный текст, поэтому тот же шрифт (sans),
   что и у остального текста; компактный размер, приглушённый цвет (не чисто белый) */
#problem .problem-closer {
  max-width: 720px;
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  color: var(--ink-on-dark-soft);
}

/* ---------------------------------------------------- РАЗДЕЛ «СОЦИАЛЬНОЕ» */
/* Раздел живёт в языке верхних секций: стандартные .section-title / .section-lead /
   .section-text (одна колонка, выключка влево) + сильное закрывающее serif-
   утверждение .problem-closer (наследуется из базы). Кастома нет — только
   фирменный акцент на финальном слове вывода. */
.section-social .verdict-accent { color: #C4574F; }
/* Кнопка сворачивания соц-блока — только мобильная (на десктопе скрыта) */
.social-toggle { display: none; }

/* --------------------------------------------- БЛОК ЭКСПЕРТОВ (раздел «Кто мы») */
/* Три лица практики между лидом и основным текстом. Фото — ч-б, единый кадр/размер. */
.team { margin-top: 46px; }
.team-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #C4574F; margin-bottom: 24px;
}
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.expert { margin: 0; }
.expert-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  filter: grayscale(1); background: var(--paper);
}
.expert-name {
  margin-top: 16px; font-family: var(--serif); font-size: 20px; line-height: 1.2;
  color: var(--ink-on-dark);
}
.expert-role {
  margin-top: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #C4574F;
}
/* Регалия — короткая строка под ролью: serif-курсив, акцентно-белым.
   Это «лицо» эксперта (учёная степень / статус), описание ниже — дополняет. */
.expert-cred {
  margin-top: 10px;
  font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.35;
  color: var(--ink-on-dark);
}
.expert-desc {
  margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--ink-on-dark-soft);
}
.expert-desc em { color: var(--muted); font-style: italic; }

/* Блок «Лаборатория партнёрства» — что ещё мы делаем.
   Отделён от ряда фото разделительной линией и воздухом, чтобы не слипался. */
.lab {
  margin-top: 72px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.1);
  max-width: 760px;
}
.lab-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #C4574F; margin-bottom: 18px;
}
.lab-text {
  font-size: 16.5px; line-height: 1.7; color: var(--ink-on-dark-soft);
}
.lab-text strong { color: var(--ink-on-dark); font-weight: 600; }

@media (max-width: 820px) {
  .team-grid { grid-template-columns: 1fr; gap: 40px; }
  .expert-photo { max-width: 320px; }
  .lab { margin-top: 56px; padding-top: 32px; }
}
/* Телефоны: компактная горизонтальная карточка — небольшое фото слева,
   текст справа, чтобы фото не занимало весь экран по высоте. */
@media (max-width: 560px) {
  /* Хедер-CTA: чуть компактнее, чтобы подпись помещалась в одну строку */
  .site-header .btn-small { padding: 9px 13px; font-size: 11px; letter-spacing: .05em; }
  /* Только на телефоне бургер уходит правее кнопки «Запросить разбор».
     На десктопе он остаётся слева — видно, что там скрыты пункты меню. */
  .nav-toggle { order: 2; }
  .team-grid { gap: 26px; }
  .expert {
    display: grid; grid-template-columns: 124px 1fr; column-gap: 16px; align-items: start;
  }
  .expert-photo { max-width: none; width: 124px; height: auto; }
  .expert-name { margin-top: 0; font-size: 18px; }
  .expert-role { margin-top: 5px; }
  .expert-cred { margin-top: 7px; font-size: 14px; }
  .expert-desc { margin-top: 7px; font-size: 13.5px; line-height: 1.5; }
}

/* -------------------------------------------------------------- 02 МЕТОД */

/* Операция: полоса из четырёх вопросов квалификации */
.op-strip {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.op {
  border-top: 1px solid var(--line-dark); padding-top: 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.op-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #C4574F;
}
.op-q { font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--ink-on-dark); }
.op-note { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* Врезка «ситуация прежде формы» */
.method-aside {
  margin-top: 56px; max-width: 720px;
  border-left: 2px solid var(--brand-red); padding: 4px 0 4px 26px;
}
.method-aside p { font-size: 16px; line-height: 1.7; color: var(--ink-on-dark-soft); }
.method-aside p + p { margin-top: 14px; }

/* Три опоры — бумажные карточки (как сводки в 01) */
.pillars {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.pillar p:not(.pillar-label) { font-size: 16px; line-height: 1.7; color: var(--ink); }

/* Легенда семей перед картой */
.formmap-legend { margin-bottom: 30px; display: flex; flex-direction: column; gap: 12px; }
.legend-row { display: flex; align-items: flex-start; gap: 16px; }
.legend-tag {
  flex: 0 0 auto; min-width: 82px; text-align: center; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid currentColor; padding: 4px 9px; white-space: nowrap;
}
.legend-tag-warn { color: #C4574F; }
.legend-row p { margin: 0; flex: 1 1 auto; font-size: 15px; line-height: 1.6; color: var(--ink-on-dark-soft); }

/* Карта форм — артефакт-айсберг № 1 */
.formmap-wrap { margin-top: 72px; }
.formmap-head {
  max-width: 820px; margin-bottom: 16px;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; color: var(--ink-on-dark);
}
.formmap-divider {
  max-width: 720px; margin-bottom: 22px;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-on-dark-soft);
}
.formmap {
  background: var(--desk-soft);
  border: 1px solid var(--line-dark);
  padding: 30px 32px 8px;
  position: relative;
}
.formmap-family { margin-bottom: 26px; }
.formmap-family-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
/* Лента карточек: крупные карточки, горизонтальная прокрутка по каждой семье.
   Десктоп — видно ~3–4 карточки, при сужении меньше, на мобильном — 2; всегда листается. */
.formmap-grid {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.formmap-grid > .formcell { flex: 0 0 300px; scroll-snap-align: start; }
.formmap-grid::-webkit-scrollbar { height: 8px; }
.formmap-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 4px; }
.formmap-grid::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 4px; }
.formmap-grid::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.formcell {
  padding: 22px 22px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--paper); border: 1px solid var(--paper);
}
.formcell-num { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }
.formcell-name {
  font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--ink);
  margin-bottom: 2px;
}
.formcell-note { font-size: 13px; line-height: 1.5; color: var(--ink-soft); display: flex; flex-direction: column; }
/* Блок вопросов: один столбец; фикс. высота — чтобы линия «Особенности» была на одном уровне у всех карточек */
.qa-block { display: flex; flex-direction: column; gap: 7px; min-height: 180px; }

/* Сворачивание (эксперимент, семья A): кнопка в каждой карточке разворачивает ВСЕ сразу.
   Свёрнуто — одинаковая высота у всех: видно «вносят» (полутон) и 2 строки «Особенности» (полутон). */
.formcell.is-collapsible .qa-block,
.formcell.is-collapsible .cell-special { overflow: hidden; transition: max-height .35s var(--ease); }
.formmap-grid.cards-collapsed .qa-block {
  min-height: 0; max-height: 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
          mask-image: linear-gradient(to bottom, #000 50%, transparent);
}
.formmap-grid.cards-collapsed .cell-special {
  max-height: 46px;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
/* Развёрнуто: высота .qa-block = максимальной по гриду (--qa-h задаёт JS),
   чтобы линия «Особенность» была на одном уровне у всех карточек и в этом состоянии. */
.formmap-grid:not(.cards-collapsed) .qa-block { max-height: none; height: var(--qa-h, auto); }
.formmap-grid:not(.cards-collapsed) .cell-special { max-height: 1000px; }
/* Тоггл — тихое вторичное действие: приглушённый тон + пунктир, без красного,
   чтобы не спорить с акцентом «Особенность:» */
.cell-toggle {
  margin-top: auto; padding-top: 16px; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: none; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--line-paper);
  text-underline-offset: 5px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.cell-toggle:hover { color: var(--ink); text-decoration-color: var(--ink-soft); }
/* Пара «вопрос → ответ»: метка слева фиксированной ширины, ответ справа */
.qa { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: baseline; }
.qa-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .6;
}
.qa-v { color: var(--ink); }
.cell-special {
  display: block; margin-top: 3px; padding-top: 8px;
  border-top: 1px solid var(--line-paper); color: var(--ink);
}
.cell-special b { color: var(--brand-red); font-weight: 600; }

/* CTA на ячейке «ваша ситуация» — ведёт к чек-листу (7 вопросов) */
.ask-cta {
  margin-top: 14px; display: inline-block;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--brand-red); text-decoration: none;
  padding: 9px 16px; border-radius: 2px;
  transition: background-color .2s var(--ease);
}
.ask-cta:hover { background: var(--brand-red-dark); }

/* «?» — место вашей ситуации на карте */
.formcell-ask {
  background: rgba(0,0,0,.25); border: 1px dashed #3A3E45;
  align-items: center; justify-content: center; text-align: center; gap: 8px;
}
.formcell-q { font-family: var(--mono); font-size: 28px; line-height: 1; color: var(--muted); }
.formcell-ask-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------- 03 ПРАКТИКА */
.cases-note {
  margin-top: 18px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; color: var(--muted);
}
.cases-strip {
  margin-top: 52px;
  width: min(var(--container), 100% - 96px); margin-inline: auto;
  display: flex; align-items: stretch; gap: 28px;
  overflow-x: auto;
  padding: 8px 0 28px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cases-strip::-webkit-scrollbar { height: 6px; }
.cases-strip::-webkit-scrollbar-thumb { background: var(--line-dark); }
.cases-strip:focus-visible { outline-offset: -2px; }

.case {
  flex: 0 0 420px; max-width: 86vw;
  scroll-snap-align: start;
}
.case-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line-paper);
}
.case-num {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.case-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand-red); border: 1px solid currentColor; padding: 3px 8px;
  white-space: nowrap;
}
.case-body { margin: 0; }
.case-body dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 16px;
}
.case-body dd { margin: 5px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink); }

/* Сворачивание карточек практики: кнопка в любой карточке разворачивает ВСЕ разом;
   видно «шапку» и начало дела (≈половину). Развёрнутые карточки равны по высоте
   самой длинной (align-items: stretch у ленты), кнопка прижата к низу. */
.case.is-collapsible { display: flex; flex-direction: column; }
.case.is-collapsible .case-body { overflow: hidden; transition: max-height .4s var(--ease); }
.cases-strip.cases-collapsed .case-body {
  max-height: 132px;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
          mask-image: linear-gradient(to bottom, #000 58%, transparent);
}
.cases-strip:not(.cases-collapsed) .case-body { max-height: 1400px; }
.case-toggle {
  margin-top: auto; padding-top: 18px; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: none; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--line-paper);
  text-underline-offset: 5px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.case-toggle:hover { color: var(--ink); text-decoration-color: var(--ink-soft); }

.cases-cta {
  margin-top: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  font-family: var(--serif); font-size: 21px; color: var(--ink-on-dark);
}

/* -------------------------------------------------------------- 04 50/50 */
.section-fifty { background: var(--desk); }
.fifty-paper {
  max-width: 860px; margin-inline: auto;
  padding: 56px 64px;
}
.section-num-onpaper { color: var(--brand-red); margin-bottom: 18px; }
.section-title-onpaper {
  font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 28px;
}
.fifty-paper p:not(.section-num-onpaper) {
  font-size: 17px; line-height: 1.75; color: var(--ink);
}
.fifty-paper p + p { margin-top: 20px; }
.fifty-paper .fifty-cta { margin-top: 48px; }
/* Продолжение текста после первого видимого предложения. На десктопе — обычный
   поток (отбивка как у абзацев). */
.fifty-paper .fifty-more { margin-top: 20px; }
/* «Раскрыть» — только мобильная версия. На десктопе кнопки нет, текст виден весь. */
.fifty-toggle { display: none; }

/* --------------------------------------------------------- 05 ЗАКЛЮЧЕНИЕ */
.format-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start;
}
.format-grid > * { min-width: 0; } /* колонки могут сжиматься на узких экранах */
.services-line {
  margin-top: 44px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 2.1; color: var(--ink-on-dark);
  border-top: 1px solid var(--line-dark); padding-top: 24px;
}
.services-note {
  margin-top: 10px; font-size: 14.5px; color: var(--muted);
}

/* Раздел «Продукты»: спокойная сетка — 3 в ряд (десктоп), 2 (планшет),
   1 (узкий мобильный). Без жёстких рамок: мягкая панель, проявляющаяся
   на наведении. В карточке — только название, короткое описание и тихое
   «Подробнее». Результат, срок и цена — в модалке (карточка кликабельна). */
.products {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.product {
  display: flex; flex-direction: column;
  padding: 28px 26px 24px;
  background: transparent; border: none; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.product:hover,
.product:focus-within { background: rgba(255,255,255,.035); }
.product-name {
  font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--ink-on-dark);
  transition: color .2s var(--ease);
}
.product:hover .product-name { color: #fff; }
.product-desc {
  margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-on-dark-soft);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Результат, срок и цена в карточке не показываем — они в модалке */
.product .product-result,
.product .product-meta { display: none; }
/* «Подробнее» — тихая подпись со стрелкой, без рамок и подчёркиваний */
.product-more {
  margin-top: auto; align-self: flex-start; padding: 20px 0 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.product-more::after { content: " \2192"; }
.product:hover .product-more,
.product-more:focus-visible { color: #C4574F; }
@media (max-width: 920px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .products { grid-template-columns: 1fr; gap: 2px; }
  .product { padding: 22px 20px 20px; }
}

/* --- Модалка продукта (на «бумаге», как модалка лида) --- */
.pm-kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red);
}
.pm-name { font-family: var(--serif); font-size: 27px; line-height: 1.15; margin: 12px 0 16px; color: var(--ink); }
.pm-desc { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.pm-result {
  margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--brand-red);
  font-size: 15px; line-height: 1.55; color: var(--ink);
}
.pm-result > span:first-child {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red);
}
.pm-meta {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin: 22px 0 26px; padding-top: 20px; border-top: 1px solid var(--line-paper);
}
.pm-meta p { margin: 0; }
.pm-meta span {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.pm-meta b { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink); }
.pm-meta b.is-price { color: var(--brand-red); }

.conclusion-wrap { margin-top: 8px; }
.conclusion {
  position: relative; overflow: hidden;
  padding: 34px 36px 0; min-height: 420px;
}
.conclusion-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.8; color: var(--ink); border-bottom: 1px solid var(--ink);
  padding-bottom: 14px; margin-bottom: 22px;
}
.conclusion-line { font-size: 15px; line-height: 1.7; color: var(--ink); margin-bottom: 8px; }
.conclusion-key {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.conclusion-body { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); margin-top: 12px; }
.conclusion-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  background: linear-gradient(to bottom, rgba(244,241,234,0) 0%, var(--desk) 96%);
  pointer-events: none;
}

/* ----------------------------------------------------------- 06 ПРОТОКОЛ */
/* Заголовок секции — на общей левой линии (контейнер во всю ширину),
   а сам квиз остаётся по центру. */
.quiz { margin: 52px auto 0; max-width: 860px; }
.quiz-intro { padding: 44px 48px; }
.quiz-intro-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red); margin-bottom: 16px;
}
.quiz-intro-lead {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4;
  color: var(--ink); max-width: 620px; margin-bottom: 14px;
}
.quiz-intro-axes {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 7px;
}
.quiz-intro-axes li {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ink-soft); padding: 4px 9px 4px 8px;
  border: 1px solid var(--line-paper); background: var(--paper-shade);
}
.quiz-intro-axes .axis-n { font-size: 10px; color: var(--brand-red); letter-spacing: .05em; }
.quiz-intro-axes .axis-detector { border-style: dashed; }
.quiz-intro-text { font-size: 16.5px; line-height: 1.7; color: var(--ink); max-width: 600px; margin-bottom: 16px; }
#quiz-start { padding: 12px 30px; }
.quiz-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.quiz-share {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em;
  color: var(--brand-red);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(155, 22, 22, .35);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.quiz-share:hover { color: var(--brand-red-dark); text-decoration-color: var(--brand-red); }
.quiz-share .quiz-share-icon { font-size: 13px; }
.quiz-share.is-done { color: var(--brand-red); text-decoration: none; cursor: default; }
.quiz-intro-note {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  border-left: 2px solid var(--brand-red); padding-left: 14px;
  max-width: 560px; margin-bottom: 30px;
}

.quiz-stage { padding: 40px 48px 34px; }
.quiz-progress-row {
  display: flex; align-items: center; gap: 20px; margin-bottom: 34px;
}
.quiz-progress-label {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.quiz-progress { flex: 1; height: 2px; background: var(--line-paper); }
.quiz-progress-bar { height: 100%; width: 0; background: var(--brand-red); transition: width .25s var(--ease); }

.quiz-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red);
}
.quiz-q-text {
  font-family: var(--serif); font-size: clamp(21px, 2.6vw, 27px); line-height: 1.35;
  color: var(--ink); margin: 12px 0 6px;
}
.quiz-hint { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

.quiz-options { margin-top: 26px; display: flex; flex-direction: column; }
.quiz-option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 4px; cursor: pointer;
  border-top: 1px solid var(--line-paper);
}
.quiz-option:last-child { border-bottom: 1px solid var(--line-paper); }
.quiz-option input { position: absolute; opacity: 0; }
.quiz-option-mark {
  flex: 0 0 12px; height: 12px; margin-top: 6px;
  border: 1.5px solid var(--ink-soft);
}
.quiz-option.is-selected .quiz-option-mark { background: var(--brand-red); border-color: var(--brand-red); }
.quiz-option-label { font-size: 16px; line-height: 1.55; color: var(--ink); }
.quiz-option:hover .quiz-option-label { color: var(--brand-red-dark); }
.quiz-option:has(input:focus-visible) { outline: 2px solid var(--brand-red); outline-offset: 2px; }

.quiz-controls {
  margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.quiz-stage .btn-text { color: var(--ink); }

/* Результат — рабочая гипотеза */
.quiz-result .result-card {
  background: var(--paper); color: var(--ink);
  padding: 44px 48px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}
.result-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.result-name { margin: 18px 0 22px; }
/* Заголовок получает фокус программно (для скринридеров и aria-live), но он
   не интерактивный и по Tab недоступен — поэтому гасим видимую фокус-обводку,
   иначе она рисует лишнюю красную рамку во всю ширину рядом со штампом. */
.result-name:focus, .result-name:focus-visible { outline: none; }
.result-stamp {
  display: inline-block;
  font-family: var(--mono); font-size: clamp(22px, 3vw, 32px); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-red); border: 2px solid var(--brand-red);
  padding: 10px 20px; transform: rotate(-1deg);
}
.tone-good .result-stamp { color: var(--ink); border-color: var(--ink); }
.result-lead { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 640px; }
.result-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }

.result-block-title {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px;
}
.result-consequences { margin-top: 30px; border-top: 1px solid var(--line-paper); padding-top: 22px; }
.result-consequences ul { margin: 0; padding-left: 18px; }
.result-consequences li { font-size: 15.5px; line-height: 1.65; margin-bottom: 8px; }

.result-alternates { margin-top: 28px; border-top: 1px solid var(--line-paper); padding-top: 22px; }
.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alt-card { border: 1px solid var(--line-paper); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.alt-name { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.alt-lead { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.result-flags { margin-top: 28px; border-top: 1px solid var(--line-paper); padding-top: 22px; }
.result-flags .result-block-title { color: var(--brand-red); }
.result-flags-list { list-style: none; margin: 0; padding: 0; }
.result-flags-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.6; margin-bottom: 10px;
}
.flag-bar { flex: 0 0 18px; height: 8px; margin-top: 7px; background: var(--brand-red); }

.result-clean { margin-top: 28px; border-top: 1px solid var(--line-paper); padding-top: 22px; }
.result-clean p { font-size: 15.5px; color: var(--ink); }

.result-limit {
  margin-top: 30px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.8; letter-spacing: .03em;
  color: var(--ink-soft);
}
.result-actions { margin-top: 40px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.result-actions .btn-text { color: var(--ink); }
.result-actions [data-action="restart"] { flex-basis: 100%; margin-top: 8px; justify-content: flex-start; padding-left: 26px; }

/* ---------------------------------------------------------------- 07 FAQ */
.faq-container { max-width: 860px; }
.faq-list { margin-top: 48px; }
.faq-item { border-top: 1px solid var(--line-dark); }
.faq-item:last-child { border-bottom: 1px solid var(--line-dark); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 24px 40px 24px 0;
  font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--ink-on-dark);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 20px; color: var(--muted);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
  padding: 0 0 26px; max-width: 680px;
  font-size: 16px; line-height: 1.7; color: var(--ink-on-dark-soft);
}

/* -------------------------------------------------------------- 08 ФИНАЛ */
.section-contact { padding-bottom: 120px; }
.contact-inner { max-width: var(--container); }
.contact-sub {
  margin: 24px 0 36px;
  font-size: 18px; line-height: 1.7; color: var(--ink-on-dark-soft);
}
.contact-note {
  margin-top: 28px; max-width: 560px;
  font-size: 13px; line-height: 1.55; color: var(--muted);
  padding-left: 12px; border-left: 2px solid var(--brand-red);
}
.contact-disclaimer {
  margin-top: 28px; max-width: 600px;
  font-family: var(--mono); font-size: 12px; line-height: 1.9; letter-spacing: .02em;
  color: var(--muted);
}
/* Раздел контактов: слева призыв, справа карточка прямой связи.
   Заголовок секции — над сеткой, на общей левой линии. */
.contact-grid {
  margin-top: 36px; max-width: 940px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: 56px; align-items: stretch;
}
.contact-pitch { max-width: 560px; }
.contact-pitch .contact-sub { margin-top: 0; }
.contact-card {
  background: var(--desk-soft); border: 1px solid var(--line-dark);
  padding: 10px 30px;
}
.contact-card-label {
  margin: 0 0 6px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red);
}
.contact-card-list { margin: 0; }
.contact-card-list .contact-row { padding: 11px 0; border-top: 1px solid var(--line-dark); }
.contact-card-list .contact-row:last-child { padding-bottom: 0; }
.contact-card-list dt {
  margin-bottom: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.contact-card-list dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-on-dark); }
.contact-card-list a {
  color: var(--ink-on-dark);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(232, 229, 222, .3);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.contact-card-list a:hover { color: var(--brand-red); text-decoration-color: var(--brand-red); }

/* ---------------------------------------------------------------- ПОДВАЛ */
.site-footer { border-top: 1px solid var(--line-dark); padding: 48px 0 56px; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap;
}
.footer-services {
  margin-top: 18px; max-width: 460px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  line-height: 2; color: var(--muted);
}
/* Продукты в подвале — кликабельны, открывают модалку продукта */
.footer-product {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink-on-dark-soft);
  transition: color .2s var(--ease);
}
.footer-product:hover { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-meta { text-align: right; font-size: 13.5px; line-height: 1.7; }
.footer-meta p { margin: 0; }
/* Почта — заметная контактная строка */
.footer-contact { font-size: 14px; }
.footer-contact a {
  color: var(--ink-on-dark);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(232, 229, 222, .3);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.footer-contact a:hover { color: var(--brand-red); text-decoration-color: var(--brand-red); }
/* Юр-название и год — читаемое вторичное (а не самое бледное, как было) */
.footer-legal { margin-top: 12px; color: var(--ink-on-dark-soft); }
/* Политика и согласие — мелкий бледный «правовой» текст */
.footer-policy { margin-top: 16px; font-size: 12px; line-height: 1.8; }
.footer-policy a { color: var(--muted); text-decoration: none; }
.footer-policy a:hover { color: var(--ink-on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- МОДАЛКА */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(10,11,13,.8); }
.modal-dialog {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--paper); color: var(--ink);
  padding: 40px 44px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.5);
}
.modal-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft); padding: 8px;
}
.modal-close:hover { color: var(--ink); }

.modal-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-red);
}
.modal-title { font-size: 26px; margin: 12px 0 10px; color: var(--ink); }
.modal-sub {
  font-size: 13px; line-height: 1.55; color: var(--muted);
  margin-bottom: 26px; padding-left: 12px;
  border-left: 2px solid var(--brand-red);
}
.modal-intent { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }

.field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field .opt { text-transform: none; letter-spacing: 0; }
.req { color: var(--brand-red); }

.field input, .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: transparent;
  border: none; border-bottom: 1px solid var(--ink-soft);
  border-radius: 0; padding: 9px 2px;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-bottom-color: var(--brand-red); box-shadow: 0 1px 0 var(--brand-red);
}
.field textarea { resize: vertical; line-height: 1.55; }

.field-error { display: block; font-size: 13px; color: var(--brand-red); min-height: 18px; }

.field-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 6px 0 14px; cursor: pointer;
}
.field-consent input { width: 15px; height: 15px; margin-top: 3px; accent-color: var(--brand-red); }

.modal-disclaimer {
  margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.8; color: var(--ink-soft);
}

/* Состояния модалки */
.modal-success { display: none; text-align: left; }
.modal[data-state="success"] .modal-body { display: none; }
.modal[data-state="success"] .modal-success { display: block; }
.modal-success p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 14px 0 26px; }

.modal[data-state="error"] .modal-body::after {
  content: "Не удалось отправить. Попробуйте ещё раз или напишите на почту из подвала.";
  display: block; margin-top: 14px; font-size: 13.5px; color: var(--brand-red);
}

/* ---------------------------------------------------------------- АДАПТИВ */
@media (max-width: 1024px) {
  /* Карточки не складываются вертикально, а прокручиваются вбок;
     следующая карточка «подглядывает» у края, снизу — точки-индикаторы. */
  .briefs, .pillars {
    display: flex; grid-template-columns: none; gap: 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }
  .briefs > .brief, .pillars > .pillar { flex: 0 0 min(82%, 360px); scroll-snap-align: start; }
  .briefs::-webkit-scrollbar, .pillars::-webkit-scrollbar { height: 6px; }
  .briefs::-webkit-scrollbar-thumb, .pillars::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 3px; }
  .op-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .format-grid { grid-template-columns: 1fr; gap: 56px; }
  .formmap-grid > .formcell { flex-basis: 280px; }
  .qa-block { min-height: 200px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { width: min(var(--container), 100% - 48px); }
  .section { padding: 72px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 64px 0 56px; }
  .hero-tags { margin-top: 48px; }

  .paper { padding: 26px 22px; }
  .fifty-paper { padding: 36px 26px; }
  /* 50/50: на мобильном текст обрывается после первого видимого предложения —
     продолжение свёрнуто с градиентным затуханием, раскрывается по кнопке. */
  .fifty-paper .fifty-more {
    margin-top: 6px; overflow: hidden; max-height: 3.4em;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent);
            mask-image: linear-gradient(to bottom, #000 25%, transparent);
    transition: max-height .45s var(--ease);
  }
  .fifty-paper.is-open .fifty-more {
    max-height: 2200px;
    -webkit-mask-image: none; mask-image: none;
  }
  .fifty-toggle {
    display: block; margin: 14px 0 0;
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand-red); background: none; border: none; cursor: pointer; padding: 0;
    text-decoration: underline dotted; text-underline-offset: 5px;
  }
  /* Социальное: на мобильном текст свёрнут (≈половина и меньше) с затуханием,
     раскрывается по кнопке. */
  .social-more {
    overflow: hidden; max-height: 13em;
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent);
            mask-image: linear-gradient(to bottom, #000 52%, transparent);
    transition: max-height .45s var(--ease);
  }
  #social.is-open .social-more {
    max-height: 3000px;
    -webkit-mask-image: none; mask-image: none;
  }
  .social-toggle {
    display: block; margin: 16px 0 0;
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand-red); background: none; border: none; cursor: pointer; padding: 0;
    text-decoration: underline dotted; text-underline-offset: 5px;
  }
  .quiz-intro, .quiz-stage, .quiz-result .result-card { padding: 30px 24px; }
  .modal-dialog { padding: 30px 24px; }

  .case { flex-basis: 320px; }
  .cases-strip { width: min(var(--container), 100% - 48px); padding-left: 0; padding-right: 0; }

  .field-row { grid-template-columns: 1fr; }
  .alt-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
  .footer-meta { text-align: left; }

  .op-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  /* На телефонах: метка «Семья A/B/C» встроена в начало строки (инлайн), без рамки;
     описание идёт следом и переносится с висячим отступом. */
  .legend-row { display: block; padding-left: 76px; text-indent: -76px; }
  .legend-tag {
    display: inline; border: none; padding: 0; margin: 0; min-width: 0;
    text-align: left; vertical-align: baseline; letter-spacing: .08em;
  }
  .legend-tag::after { content: "  ·  "; color: var(--muted); }
  .legend-row p { display: inline; font-size: 14.5px; line-height: 1.6; }

  .formmap { padding: 22px 16px 8px; }
  /* Мобильный: одна карточка на экран, следующая подглядывает */
  .formmap-grid > .formcell { flex-basis: 86%; }
  .formcell { padding: 18px 18px; }
  /* Вопросы в один столбец; метка остаётся слева (карточка во всю ширину — места хватает) */
  .qa-block { grid-template-columns: 1fr; min-height: 0; }

  /* Мобильное меню: панель раскрывается во всю ширину под шапкой */
  .nav-drawer {
    left: 0; right: 0; min-width: 0;
    padding: 28px 24px; gap: 22px;
  }
  .nav-drawer a:not(.btn), .nav-drawer .nav-soon { font-size: 15px; }
}

/* ---- Перекручивающаяся CTA в шапке: «Отправить заявку» ⇄ «Пройти чек-лист» ---- */
.cta-flip-btn { overflow: hidden; }
.cta-flip { display: block; overflow: hidden; height: 1.25em; }
.cta-flip__track {
  display: flex; flex-direction: column;
  transition: transform .55s cubic-bezier(.66, 0, .2, 1);
  will-change: transform;
}
.cta-flip__face {
  height: 1.25em; line-height: 1.25em;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.cta-flip-btn.is-flipped .cta-flip__track { transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  .cta-flip__track { transition: none; }
}