/* =========================================================
   ВАРИАНТ 03 · ALTITUDE — секции лендинга.
   Структура держится на hairline-границах (как тени в других системах),
   surface-стек #181→#1f→#26→#32, единственный акцент — синий, только функционально.
   ========================================================= */

/* ===================== Терминальное окно (продуктовый визуал) ===================== */
.terminal {
  background: var(--graphite-card);
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--slate-elevated);
  background: var(--obsidian);
}
.terminal__dots { display: flex; gap: 7px; }
.terminal__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.terminal__dots i:nth-child(1) { background: #ff5f57; }
.terminal__dots i:nth-child(2) { background: #febc20; }
.terminal__dots i:nth-child(3) { background: #28c840; }
.terminal__title {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: 0.06em;
  color: var(--fog);
}
.terminal__body { padding: var(--space-16); }

/* ===================== Дата-таблица ===================== */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td {
  text-align: left;
  padding: 13px var(--space-16);
  border-bottom: 1px solid var(--slate-elevated);
  font-size: var(--text-small);
}
.dtable thead th {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
}
.dtable tbody tr:nth-child(even) { background: var(--slate-elevated); }
.dtable td .num { font-family: var(--font-mono); color: var(--bone); }
.dtable td.pos .num { color: var(--bone); }

/* ============ 1. HERO ============ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(64px + var(--space-80)) var(--space-64);
  position: relative;
  text-align: center;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 880px; margin-inline: auto; }
.hero__kicker { margin-bottom: var(--space-24); justify-content: center; }
.hero__title { margin-bottom: var(--space-24); }
.hero__title .em { font-style: italic; color: var(--bone); }
.hero__sub {
  font-size: var(--text-body-lg);
  color: var(--fog);
  max-width: 60ch;
  margin: 0 auto var(--space-32);
}
.hero__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 720px;
  margin: 0 auto var(--space-32);
}
.hero__points li {
  font-size: var(--text-small);
  color: var(--fog);
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
}
.hero__points li b { color: var(--bone); font-weight: var(--w-medium); }
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero__note { font-size: var(--text-small); color: var(--smoke); }

/* Линия-хребет (SVG) во всю ширину у низа героя — единственный декор */
.hero__ridge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero__ridge svg { width: 100%; height: auto; display: block; }
.hero__ridge path { fill: none; stroke: var(--fog); stroke-width: 1; opacity: 0.5; }
.hero__ridge .fill { fill: var(--obsidian); opacity: 0.35; stroke: none; }

/* Полоса-доказательство: реальные кейсы (счётчики) */
.proof {
  margin-top: var(--space-64);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-md);
  background: var(--graphite-card);
  text-align: left;
}
.proof--single { grid-template-columns: 1fr; text-align: center; }
.proof__item { padding: var(--space-24); border-right: 1px solid var(--slate-elevated); }
.proof__item:last-child { border-right: 0; }
.proof__num {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: var(--track-serif);
  color: var(--bone);
  margin-bottom: 8px;
}
.proof__num .u { font-size: 0.6em; color: var(--fog); }
.proof__label { font-size: var(--text-small); color: var(--fog); }
.proof__label b { color: var(--bone); font-weight: var(--w-medium); }

/* ============ 1b. ФОТО-ФОН ГЕРОЯ ============
   Фото ниши уже приглушено на этапе сборки картинок (ч/б-дуотон к холсту #181818),
   скрим сверху добирает контраст: самая светлая точка фото под ним ≈ L50, текст --bone
   ≈ L238 — с запасом выше требований к контрасту. */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(24, 24, 24, 0.95) 0%,
      rgba(24, 24, 24, 0.62) 30%,
      rgba(24, 24, 24, 0.70) 62%,
      rgba(24, 24, 24, 0.96) 100%),
    radial-gradient(90% 70% at 50% 46%, rgba(24, 24, 24, 0.55) 0%, rgba(24, 24, 24, 0.82) 100%);
}
/* Сноска под кнопкой (--smoke) поверх фото уходит ниже AA — на фото-герое поднимаем до --fog */
.hero.has-photo .hero__note { color: var(--fog); }
/* Плашка-доказательство поверх фото — глушим фон, чтобы цифра читалась */
.hero.has-photo .proof { background: rgba(31, 31, 31, 0.86); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* ============ 1c. ВИЗУАЛЬНЫЙ БЛОК НИШИ (band) ============
   Широкая полоса с тематическим фото; текст лежит на затемнённой стороне. */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid var(--slate-elevated);
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(24, 24, 24, 0.97) 0%,
    rgba(24, 24, 24, 0.88) 42%,
    rgba(24, 24, 24, 0.58) 74%,
    rgba(24, 24, 24, 0.42) 100%);
}
.band .container { position: relative; z-index: 1; }
.band__text { max-width: 44ch; padding-block: clamp(56px, 9vw, 104px); }
.band__title {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--text-heading-lg);
  line-height: var(--lead-heading);
  letter-spacing: var(--track-serif);
  color: var(--bone);
}
.band__lead { margin-top: var(--space-16); color: var(--fog); font-size: var(--text-body-lg); }

/* ============ 2. ВЫ УЗНАЁТЕ СЕБЯ? ============ */
.pains__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--slate-elevated);
  border-left: 1px solid var(--slate-elevated);
}
.pain {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-24);
  border-right: 1px solid var(--slate-elevated);
  border-bottom: 1px solid var(--slate-elevated);
  transition: background-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .pain:hover { background: var(--slate-elevated); } }
.pain__check {
  flex: none;
  width: 20px; height: 20px;
  border: 1px solid var(--pewter);
  border-radius: var(--radius-sm);
  position: relative;
  margin-top: 2px;
}
.pain__check::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--fog);
  border-bottom: 1.5px solid var(--fog);
  transform: translateY(-1px) rotate(-45deg);
}
.pain__text { font-size: var(--text-body); color: var(--bone); }
.pain__text b { color: var(--bone); }

.pains__verdict {
  margin-top: var(--space-32);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-32);
  align-items: center;
  padding: var(--space-32);
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-md);
  background: var(--graphite-card);
}
.pains__verdict .big {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--track-serif);
  color: var(--bone);
  white-space: nowrap;
}
.pains__verdict p { font-size: var(--text-body-lg); color: var(--fog); max-width: 64ch; }
.pains__verdict p strong { color: var(--bone); }

/* ============ 3. ЧТО ПОЛУЧИТЕ ЧЕРЕЗ МЕСЯЦ ============ */
.results__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
  align-items: start;
}
.results__grid { display: grid; gap: var(--space-12); }
.result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  padding: var(--card-pad);
  background: var(--graphite-card);
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .result:hover { border-color: var(--pewter); transform: translateY(-3px); } }
.result__num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fog);
  letter-spacing: var(--track-serif);
}
.result h3 { color: var(--bone); margin-bottom: 6px; }
.result p { color: var(--fog); font-size: var(--text-small); margin-bottom: 10px; }
.result .badge { margin-top: 2px; }

/* Терминал-визуал результатов (понятные таблицы) */
.results__visual { position: sticky; top: 88px; }
.tcaption { margin-top: var(--space-12); font-size: var(--text-small); color: var(--smoke); text-align: center; }
.dtable td.amt { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.dtable td.amt.neg { color: var(--fog); }
.dtable tr.total td { border-bottom: 0; color: var(--bone); font-weight: var(--w-medium); }
.dtable tr.total td.amt { color: var(--bone); }

/* ============ 4. ТАЙМЛАЙН ============ */
.timeline { position: relative; }
/* top/bottom = 16px — половина точки (32px): линия начинается и кончается ровно
   в центрах первой и последней точки, поэтому не зависит от числа шагов (сейчас 7). */
.timeline__line { position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--slate-elevated); }
.timeline__line span { display: block; width: 100%; height: 100%; background: var(--fog); transform: scaleY(0); transform-origin: top; }
.step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-24);
  padding-block: var(--space-24);
  position: relative;
}
.step:first-child { padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step__dot {
  width: 32px; height: 32px;
  border: 1px solid var(--pewter);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--fog);
  background: var(--carbon-canvas);
  position: relative; z-index: 1;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.step.is-active .step__dot { color: var(--bone); border-color: var(--fog); }
.step__day {
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 8px;
}
.step__content h3 { color: var(--bone); margin-bottom: 6px; }
.step__content p { color: var(--fog); font-size: var(--text-body); }

.process__lead { color: var(--bone); }

/* ============ 5. АУТСОРС vs ШТАТ ============ */
.compare__table {
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--graphite-card);
}
.compare__table .dtable th:first-child, .compare__table .dtable td:first-child { color: var(--fog); }
.compare__table .dtable .col-good { color: var(--bone); }
.compare__table .dtable thead .col-good { color: var(--bone); }
.compare__table .dtable td .ic { color: var(--fog); margin-right: 8px; }
.compare__table .dtable td.col-good .ic { color: var(--voltage-blue); }

/* ── Кто мы (общая главная) ───────────────────────────────────────────────────
   Объяснение, а не витрина: обычный текст в узкой колонке, без карточек.
   Размер тот же, что у вводных абзацев (.lead), — это по-прежнему подводка. */
.about__body { display: grid; gap: var(--space-16); }
.about__body p { color: var(--fog); font-size: var(--text-body-lg); max-width: 62ch; }

/* ── Два входа в ниши (общая главная) ────────────────────────────────────────
   Те же hairline-карточки, что в .accfin__card и .price-mini__card: рамка,
   скругление, подложка. Новых приёмов нет намеренно.
   Карточка — колонка, кнопка прижата к низу (margin-top: auto), чтобы у карточек
   разной высоты текста ссылки стояли на одной линии, а не плясали. */
.niche__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.niche__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--slate-elevated); border-radius: var(--radius-md);
  padding: var(--space-24); background: var(--graphite-card);
  transition: border-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .niche__card:hover { border-color: var(--pewter); } }
.niche__card h3 { color: var(--bone); margin-bottom: 12px; }
.niche__text { color: var(--fog); font-size: var(--text-body); margin-bottom: var(--space-16); }
.niche__cta { margin-top: var(--space-24); align-self: flex-start; }

.accfin { margin-top: var(--space-24); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.accfin__card { border: 1px solid var(--slate-elevated); border-radius: var(--radius-md); padding: var(--space-24); background: var(--graphite-card); }
.accfin__card.is-key { border-color: var(--pewter); }
.accfin__card h3 { color: var(--bone); margin-bottom: 12px; }
.qlist { display: grid; gap: 9px; }
.qlist li { position: relative; padding-left: 18px; color: var(--fog); font-size: var(--text-body); }
.qlist li::before { content: "›"; position: absolute; left: 0; color: var(--voltage-blue); }

.price-mini { margin-top: var(--space-24); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.price-mini__card { border: 1px solid var(--slate-elevated); border-radius: var(--radius-md); padding: var(--space-24); background: var(--graphite-card); }
.price-mini__amt { font-family: var(--font-serif); font-size: var(--text-heading); line-height: 1; letter-spacing: var(--track-serif); color: var(--fog); margin-bottom: 10px; }
/* Каждая строка подписи — отдельный span на своей строке. Перенос делает вёрстка,
   а не <br/> из контент-файла: тогда текст можно экранировать целиком (находка L-3). */
.price-mini__sub { font-size: var(--text-small); color: var(--smoke); }
.price-mini__sub span { display: block; }
/* Добро и Финансы — акцентный, яркий блок (наш) */
.price-mini__card.is-good { border-color: var(--pewter); background: var(--slate-elevated); }
.price-mini__card.is-good .price-mini__amt { color: var(--bone); }
.price-mini__card.is-good .price-mini__sub { color: var(--fog); }

.gains { margin-top: var(--space-32); padding: var(--space-24); border: 1px solid var(--slate-elevated); border-radius: var(--radius-md); }
.gains h3 { color: var(--bone); margin-bottom: var(--space-16); }
.gains__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.gains__list li { display: flex; gap: 10px; color: var(--fog); font-size: var(--text-body); }
.gains__list .ic { color: var(--voltage-blue); flex: none; }

.compare__cta { margin-top: var(--space-48); text-align: center; display: grid; gap: var(--space-20); justify-items: center; }
.compare__cta h3 { font-family: var(--font-serif); font-weight: var(--w-regular); font-size: var(--text-heading); color: var(--bone); max-width: 26ch; letter-spacing: var(--track-serif); }

/* ============ 6. ИСТОРИИ (аккордеон) ============ */
.stories__list { display: grid; gap: var(--space-12); }
.story { border: 1px solid var(--slate-elevated); border-radius: var(--radius-md); background: var(--graphite-card); transition: border-color var(--dur-base) var(--ease-out); }
.story.is-open { border-color: var(--pewter); }
.story__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-20); padding: var(--space-24); background: transparent; border: 0; cursor: pointer; text-align: left;
}
.story__quote { font-family: var(--font-serif); font-size: var(--text-heading-sm); color: var(--bone); letter-spacing: var(--track-serif); }
.story__toggle {
  flex: none; width: 30px; height: 30px;
  border: 1px solid var(--pewter); border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--fog); font-size: 18px; line-height: 1;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.story.is-open .story__toggle { transform: rotate(45deg); color: var(--bone); }
.story__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.story.is-open .story__panel { grid-template-rows: 1fr; }
.story__panel-inner { overflow: hidden; }
.story__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); padding: 0 var(--space-24) var(--space-24); }
.story__cell { display: grid; gap: 6px; align-content: start; }
.story__cell .k { font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); }
.story__cell .v { color: var(--bone); font-size: var(--text-body); }
.story__cell.is-result .v span { font-family: var(--font-mono); color: var(--voltage-blue); }

/* ============ 7. ОСНОВАТЕЛЬ ============
   Один человек, а не сетка карточек: фото слева, текст справа.
   Портрет — PNG с вырезанным фоном, поэтому вместо «карточки с картинкой» под ним
   подложка холста с hairline-границей — фигура стоит прямо на фоне сайта, как и
   задумано в Altitude (глубина через контраст поверхностей, не через тени). */
.founder__grid { display: grid; grid-template-columns: 330px 1fr; gap: var(--space-48); align-items: start; }

.founder__photo {
  margin: 0;
  position: relative;
  border: 1px solid var(--slate-elevated);
  border-radius: var(--radius-md);
  /* Градиент от карточной поверхности к холсту: фигура «выходит» из фона,
     а не лежит на плашке. Прозрачность PNG работает именно за счёт этого. */
  background: linear-gradient(180deg, var(--graphite-card) 0%, var(--carbon-canvas) 100%);
  overflow: hidden;
}
/* Тонкая линия-основание под фигурой — тот же приём, что hairline у карточек */
.founder__photo::after {
  content: "";
  position: absolute; left: var(--space-16); right: var(--space-16); bottom: 0;
  height: 1px; background: var(--slate-elevated);
}
.founder__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Портрет снят до пояса и обрезан по фигуре: пустых полей вокруг нет,
     поэтому масштабируем по ширине колонки без кадрирования. */
}

.founder__body { display: grid; gap: var(--space-24); }
.founder__id { display: grid; gap: 4px; }
.founder__name {
  font-family: var(--font-serif); font-weight: var(--w-regular);
  font-size: var(--text-heading); line-height: 1.1; letter-spacing: var(--track-serif);
  color: var(--bone); margin: 0;
}
.founder__role {
  font-size: var(--text-caption); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fog);
}

/* Обещание — единственная выделенная строка блока. Засечки и светлая поверхность,
   как у ключевой карточки в сравнении (.accfin__card.is-key), без нового языка. */
.founder__promise {
  margin: 0;
  padding: var(--space-24);
  border: 1px solid var(--pewter);
  border-radius: var(--radius-md);
  background: var(--slate-elevated);
  font-family: var(--font-serif); font-weight: var(--w-regular);
  font-size: var(--text-heading-sm); line-height: var(--lead-heading);
  letter-spacing: var(--track-serif); color: var(--bone);
}
.founder__promise::before { content: "«"; color: var(--fog); }
.founder__promise::after { content: "»"; color: var(--fog); }

.founder__text { display: grid; gap: var(--space-16); }
.founder__p { color: var(--fog); font-size: var(--text-body); max-width: 68ch; }

/* Мостик от биографии к клиенту — светлее абзацев, это вывод блока */
.founder__bridge {
  color: var(--bone); font-size: var(--text-body-lg); max-width: 62ch;
  padding-left: var(--space-16); border-left: 1px solid var(--iron-peak);
}

.founder__facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px var(--space-24);
  padding-top: var(--space-24); border-top: 1px solid var(--slate-elevated);
}
.founder__facts li { display: flex; gap: 10px; color: var(--fog); font-size: var(--text-small); }
.founder__facts .ic { color: var(--voltage-blue); flex: none; }

/* ============ 8. СТОИМОСТЬ ============ */
.pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
/* Единая услуга (PRD-03 п.6) — одна карточка по центру вместо пары "внедрение/ведение" */
.pricing__grid.is-single { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
.plan {
  border: 1px solid var(--slate-elevated); border-radius: var(--radius-md); background: var(--graphite-card);
  padding: var(--space-48) var(--space-32); display: grid; gap: 14px; text-align: center;
}
.plan.is-featured { border-color: var(--pewter); background: var(--slate-elevated); }
.plan__label { font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); }
.plan__price { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.plan__amt { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1; letter-spacing: var(--track-serif); color: var(--bone); }
.plan__from { font-size: 0.42em; color: var(--fog); }
.plan__per { font-size: var(--text-body); color: var(--fog); }
.plan__desc { color: var(--fog); font-size: var(--text-body); margin-inline: auto; }
.pricing__note { margin-top: var(--space-32); text-align: center; color: var(--smoke); font-size: var(--text-small); max-width: 56ch; margin-inline: auto; }

/* ============ 9. FAQ (аккордеон) ============ */
.faq__list { border-top: 1px solid var(--slate-elevated); }
.qa { border-bottom: 1px solid var(--slate-elevated); }
.qa__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-20);
  padding: var(--space-24) 0; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-serif); font-size: var(--text-heading-sm); letter-spacing: var(--track-serif); color: var(--bone);
  transition: color var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .qa__q:hover { color: var(--fog); } }
.qa__q .plus { flex: none; position: relative; width: 18px; height: 18px; }
.qa__q .plus::before, .qa__q .plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--fog); }
.qa__q .plus::before { width: 100%; height: 1px; }
.qa__q .plus::after { width: 1px; height: 100%; transition: transform var(--dur-base) var(--ease-out); }
.qa.is-open .qa__q .plus::after { transform: scaleY(0); }
.qa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.qa.is-open .qa__panel { grid-template-rows: 1fr; }
.qa__panel-inner { overflow: hidden; }
.qa__a { color: var(--fog); font-size: var(--text-body); max-width: 84ch; padding-bottom: var(--space-24); }
.qa__a b { color: var(--bone); }

/* ============ 10. КОНТАКТ + ФОРМА ============ */
/* Блок контактов лежит в разметке ПОСЛЕ формы — так на мобильном форма идёт первой,
   а порядок фокуса при табуляции совпадает с тем, что человек видит. Десктопная
   картинка от этого не меняется: сетка возвращает контакты под текст оффера в левую
   колонку, а форма занимает правую целиком.
   row-gap: 0 — отступ между оффером и контактами задают собственные поля блоков
   (margin-bottom списка + padding-top контактов), ровно как было, когда контакты
   лежали внутри .contact__intro.
   Вторая строка — 1fr: если форма окажется выше левой колонки, лишняя высота уходит
   ПОД контакты, а не в разрыв между ними и текстом. */
.contact__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--space-64);
  row-gap: 0;
  align-items: start;
}
.contact__intro { grid-column: 1; grid-row: 1; }
.contact__wrap .form { grid-column: 2; grid-row: 1 / span 2; }
.contact__wrap > .contacts { grid-column: 1; grid-row: 2; }
.contact__title { margin: var(--space-16) 0 var(--space-24); }
.contact__get { display: grid; gap: 11px; margin-bottom: var(--space-32); }
.contact__get li { display: flex; gap: 10px; color: var(--fog); font-size: var(--text-body); }
.contact__get .ic { color: var(--voltage-blue); flex: none; }

/* Прямые контакты — видимые */
.contacts { display: grid; gap: 12px; padding-top: var(--space-24); border-top: 1px solid var(--slate-elevated); }
.contacts__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.contacts__k { font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--smoke); min-width: 78px; }
.contacts a { color: var(--bone); border-bottom: 1px solid var(--pewter); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .contacts a:hover { color: var(--voltage-blue); border-color: var(--voltage-blue); } }
/* MAX — кнопка-копирование */
.contacts__copy { font: inherit; color: var(--bone); background: transparent; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 10px; }
.contacts__num { border-bottom: 1px solid var(--pewter); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .contacts__copy:hover .contacts__num { color: var(--voltage-blue); border-color: var(--voltage-blue); } }
.contacts__state { font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--smoke); }
.contacts__state .s-done { display: none; color: var(--voltage-blue); }
.contacts__copy.is-copied .s-idle { display: none; }
.contacts__copy.is-copied .s-done { display: inline; }

/* Форма */
.form { position: relative; border: 1px solid var(--slate-elevated); border-radius: var(--radius-md); background: var(--graphite-card); padding: var(--space-32); }

/* Без JavaScript поля прячем совсем: отправить их всё равно некуда, а видимая форма,
   которая на нажатие отвечает страницей с ошибкой, — худший из вариантов.
   Вместо неё показывается блок <noscript> с прямыми контактами (находка L-4).
   Класс .js ставит js/js-flag.js первым же скриптом. */
html:not(.js) .form__fields { display: none; }
.form__noscript { display: grid; gap: var(--space-16); }
.form__noscript h3 { font-family: var(--font-serif); font-weight: var(--w-regular); font-size: var(--text-heading-sm); color: var(--bone); letter-spacing: var(--track-serif); }
.form__noscript p { color: var(--fog); font-size: var(--text-body); }
.form__noscript .contacts { padding-top: var(--space-16); }
/* Копирование в буфер — это JS. Здесь его нет, поэтому подпись «копировать для MAX»
   обещала бы несуществующее действие. Сам номер остаётся видимым текстом. */
.form__noscript .contacts__state { display: none; }
.form__fields { display: grid; gap: var(--space-16); transition: opacity var(--dur-slow) var(--ease-out); }

/* Кнопка отправки неактивна, пока не введён телефон и не отмечено согласие.
   Вид обязателен: неотличимая от рабочей кнопка, которая не нажимается, читается
   как поломка сайта. cursor: not-allowed подсказывает причину до клика. */
.form__fields .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.form__fields .btn[disabled] .btn__arrow { transform: none; }
.field { display: grid; gap: 7px; }
.field label { font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fog); }
/* Пометка «необязательно» рядом с подписью поля. Своим стилем — строчными буквами
   и тусклее подписи, — чтобы читалась как примечание, а не как часть названия поля.
   Обязательные поля ничем не помечаем: помечать исключение дешевле, чем правило. */
.field__opt { text-transform: lowercase; letter-spacing: 0; color: var(--smoke); }
.field input, .field select {
  width: 100%; background: var(--carbon-canvas); border: 1px solid var(--iron-peak); border-radius: var(--radius-sm);
  padding: 11px 12px; color: var(--bone); font-size: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field input::placeholder { color: var(--smoke); }
.field input:focus, .field select:focus { outline: none; border-color: var(--voltage-blue); box-shadow: 0 0 0 2px rgba(43,127,255,0.35); }
.field select option { background: var(--graphite-card); color: var(--bone); }
.form__legal { font-size: var(--text-caption); color: var(--smoke); line-height: 1.5; }
.form__legal a { color: var(--voltage-blue); }
/* honeypot: скрыт от людей визуально, но не display:none (боты его читают) — PRD-05 п.4.3 */
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__consent { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-caption); color: var(--smoke); line-height: 1.5; cursor: pointer; }
.form__consent input { margin-top: 3px; accent-color: var(--voltage-blue); }
.form__consent a { color: var(--voltage-blue); }

/* Экраны результата: успех и ошибка (PRD-05 п.7). Оба перекрывают поля целиком
   и оба дублируют прямой контакт — человек не остаётся без следующего шага. */
.form__result {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  padding: var(--space-32); background: var(--graphite-card); border-radius: var(--radius-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.form.is-sent .form__fields,
.form.is-failed .form__fields { opacity: 0; pointer-events: none; }
.form.is-sent .form__result--ok,
.form.is-failed .form__result--fail { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.form__result .check {
  width: 46px; height: 46px; border: 1px solid var(--voltage-blue); border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--voltage-blue); font-size: 22px;
}
/* Ошибка не красная: агрессивный сигнал тут ни к чему, человек не виноват (PRD-03, тон) */
.form__result .check--fail { border-color: var(--fog); color: var(--fog); }
.form__result h3 { font-family: var(--font-serif); font-weight: var(--w-regular); color: var(--bone); }
.form__result p { color: var(--fog); font-size: var(--text-body); max-width: 42ch; }
.form__contacts-note { font-size: var(--text-small); color: var(--smoke); }
.form__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16); }
.form__contacts a { color: var(--bone); border-bottom: 1px solid var(--pewter); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .form__contacts a:hover { color: var(--voltage-blue); border-color: var(--voltage-blue); } }
.form__result [data-retry] { margin-top: var(--space-8); }
/* Кнопка на время отправки — неактивна, но текст «Отправляем…» должен читаться */
.form button[disabled] { opacity: 0.6; cursor: progress; }


/* ============ Счётчик с резервом ширины ============
   scenes.js крутит число от нуля до конечного. Невидимый двойник конечного значения
   держит ширину, поэтому растущая цифра не двигает соседний текст (CLS = 0). */
.count { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.count__sizer { visibility: hidden; }
.count__value { position: absolute; inset: 0; text-align: center; }

/* Пиксель Метрики для браузеров без JS. Отдельный класс, а не инлайн-стиль:
   CSP запрещает style-атрибуты (PRD-06 п.4). */
.metrika-pixel { position: absolute; left: -9999px; }

/* ============ Служебные страницы (404, политика ПД) ============ */
.simple { padding-block: calc(64px + var(--section-gap)) var(--section-gap); }
.simple__title { font-family: var(--font-serif); font-weight: var(--w-regular); font-size: var(--text-heading-lg); line-height: var(--lead-heading); letter-spacing: var(--track-serif); color: var(--bone); margin-bottom: var(--space-24); }
.simple__lead { color: var(--fog); font-size: var(--text-body-lg); margin-bottom: var(--space-24); max-width: 62ch; }
.simple__lead a { color: var(--voltage-blue); }
.simple__nav { display: grid; gap: 10px; margin-bottom: var(--space-32); }
.simple__nav a { color: var(--bone); border-bottom: 1px solid var(--pewter); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .simple__nav a:hover { color: var(--voltage-blue); border-color: var(--voltage-blue); } }

/* Заголовок-обёртка вопроса FAQ: нужен для иерархии h2 -> h3, но выглядеть должен
   ровно как раньше — размеры и вес берёт кнопка внутри. */
.qa__h { margin: 0; font: inherit; font-weight: inherit; }

/* ============ Адаптив ============ */
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav-toggle { display: inline-flex; }
  .results__split { grid-template-columns: 1fr; }
  .results__visual { position: static; }
  /* Одна колонка — порядок берётся из разметки: оффер → ФОРМА → контакты.
     Форма не уезжает под контакты, как было раньше. */
  .contact__wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 0;
    row-gap: var(--space-32);
  }
  .contact__intro,
  .contact__wrap .form,
  .contact__wrap > .contacts { grid-column: auto; grid-row: auto; }
  .gains__list { grid-template-columns: 1fr; }

  /* Основатель в одну колонку: сначала фото, под ним текст (порядок из разметки).
     Портрет ограничен по ширине — на телефоне он не должен занимать весь экран,
     и заодно не растягивается выше своего исходного разрешения (330px). */
  .founder__grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .founder__photo { max-width: 260px; }
}
@media (max-width: 680px) {
  /* Кикер с длинным перечнем площадок — переносим, чтобы не вылезал за экран */
  .kicker { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .hero__points li { font-size: var(--text-caption); }
  .proof { grid-template-columns: 1fr; }
  .proof__item { border-right: 0; border-bottom: 1px solid var(--slate-elevated); }
  .proof__item:last-child { border-bottom: 0; }
  .pains__grid { grid-template-columns: 1fr; }
  .pains__verdict { grid-template-columns: 1fr; gap: var(--space-16); }
  .accfin, .pricing__grid, .niche__grid { grid-template-columns: 1fr; }
  /* В одну колонку кнопка во всю ширину карточки: на узком экране так проще попасть */
  .niche__cta { align-self: stretch; justify-content: center; }
  /* На узком экране текста некуда отступать — скрим делаем вертикальным и плотнее */
  .band__text { max-width: none; }
  .band__scrim { background: linear-gradient(180deg, rgba(24, 24, 24, 0.76) 0%, rgba(24, 24, 24, 0.92) 45%, rgba(24, 24, 24, 0.97) 100%); }
  .story__head { padding: var(--space-16); }
  .story__body { grid-template-columns: 1fr; padding: 0 var(--space-16) var(--space-16); }

  /* ---------- «Аутсорс vs штат»: таблица разбирается на карточки ----------
     Три колонки в 360px не помещаются никак, а боковой скролл внутри страницы
     владелец на телефоне просто не замечает — половина сравнения оставалась
     невидимой. Поэтому на узких экранах каждая строка таблицы становится
     отдельной карточкой: сверху критерий, под ним два варианта друг под другом.
     Подписи вариантов берутся из data-label ячейки — тех же слов, что стоят
     в шапке таблицы на десктопе. Горизонтального скролла больше нет вообще. */
  .compare__scroll { overflow: visible; }
  .compare__table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .compare__table .dtable,
  .compare__table .dtable tbody,
  .compare__table .dtable tr,
  .compare__table .dtable td { display: block; width: 100%; }
  /* Шапка не нужна: её слова переехали в подписи ячеек (data-label) */
  .compare__table .dtable thead { position: absolute; left: -9999px; }
  .compare__table .dtable tr,
  .compare__table .dtable tbody tr:nth-child(even) {
    background: var(--graphite-card);
    border: 1px solid var(--slate-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-16);
    margin-bottom: var(--space-12);
  }
  .compare__table .dtable tr:last-child { margin-bottom: 0; }
  .compare__table .dtable td { border-bottom: 0; padding: 0; font-size: var(--text-body); }
  /* Первая ячейка — название критерия, работает как заголовок карточки */
  .compare__table .dtable td:first-child {
    font-size: var(--text-caption);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--fog);
    margin-bottom: var(--space-12);
  }
  .compare__table .dtable td[data-label] {
    padding-left: var(--space-12);
    border-left: 1px solid var(--iron-peak);
    margin-bottom: var(--space-12);
  }
  .compare__table .dtable td[data-label]:last-child { margin-bottom: 0; }
  .compare__table .dtable td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-caption);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 4px;
  }
  /* Наш вариант — светлее и с более заметной линией слева, как и на десктопе */
  .compare__table .dtable td.col-good { border-left-color: var(--fog); }
  .compare__table .dtable td.col-good::before { color: var(--fog); }

  /* ---------- Сравнение цен: остаётся ДВУМЯ колонками ----------
     Если поставить карточки друг под друга, пропадает сам смысл блока — цифры
     перестают сопоставляться взглядом. Поэтому вместо переноса в столбик
     ужимаем типографику: суммы масштабируются от ширины экрана и на 360px
     помещаются в строку. Штат — приглушённый, наш — акцентный (как на десктопе). */
  .price-mini { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: stretch; }
  .price-mini__card { padding: var(--space-16) var(--space-12); }
  .price-mini__amt { font-size: clamp(0.95rem, 4.2vw, 1.35rem); margin-bottom: 8px; }
  .price-mini__sub { font-size: var(--text-caption); line-height: 1.45; }

  /* ---------- Основатель: факты в одну колонку ---------- */
  .founder__facts { grid-template-columns: 1fr; }
  .founder__promise { padding: var(--space-16); }
}

/* ---------- Самые узкие экраны (телефоны 360–430px) ---------- */
@media (max-width: 430px) {
  /* Форме нужнее ширина, чем поля карточки */
  .form { padding: var(--space-20); }
  .plan { padding: var(--space-32) var(--space-20); }
  .gains, .accfin__card { padding: var(--space-16); }

  /* Контакты: подпись над значением. В строку «MAX» подпись, номер и слово
     «копировать» вместе уже не помещались и переносились вразнобой. */
  .contacts__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .contacts__k { min-width: 0; }
  .contacts__copy { flex-wrap: wrap; gap: 4px 10px; }
}