/* ── Шапка, навигация, липкая полоса ───────────────────────────── */

.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 0;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
}
.skip:focus { inset-block-start: 0; z-index: 100; }

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--bg);
  border-block-end: 1px solid var(--hairline);
}

.header__in {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--header-h);
}

.header__id { display: flex; flex-direction: column; line-height: 1.2; }
.header__name { font-weight: 600; }
.header__desc {
  font-size: var(--step--1);
  color: var(--text-muted);
  white-space: nowrap;
}
/* Дескриптор длинный: если ему тесно, он выдавливает меню в перенос */
@media (max-width: 72rem) { .header__desc { display: none; } }

.header__nav { display: flex; gap: var(--space-2); margin-inline-start: auto; }
.header__cta { white-space: nowrap; padding-inline: 1rem; }
.header__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  /* Пункт меню не переносится и не разрывается дефисом: «Про-дукт» в шапке
     читается как опечатка. Полосу лучше отдать по ширине, чем ломать слова. */
  white-space: nowrap;
  hyphens: none;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--text-muted);
}
.header__nav a[aria-current="true"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Пункт меню ведёт к разделу, а не к целевому действию: на наведении он
   доходит до цвета основного текста и не окрашивается в акцент, иначе
   спутается с активным разделом. */
@media (hover: hover) and (pointer: fine) {
  .header__nav a:hover { color: var(--text); }
}

/* Переключатель темы — служебный, а не второе целевое действие:
   рамка рядом с CTA читалась как ещё одна кнопка */
.header__theme {
  padding: 0.5rem;
  border-color: transparent;
  white-space: nowrap;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@media (hover: hover) and (pointer: fine) {
  /* Рамку на наведении гасим: переключатель — .btn--secondary, и общее
     правило проявило бы её, вернув ту самую «вторую кнопку» рядом с CTA. */
  .header__theme:hover { color: var(--text); border-color: transparent; }
}

.sticky-cta { display: none; }

@media (max-width: 60rem) {
  /* На мобильном липкая только нижняя полоса: две липкие зоны съедают пятую часть экрана */
  .header { position: static; }
  /* CTA в шапке на мобиле скрыт: его роль выполняет нижняя липкая полоса.
     Навигация и переключатель темы, наоборот, возвращаются (см. ниже). */
  .header__cta { display: none; }

  body { padding-block-end: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }

  /* Шапка на мобиле в две строки: лого и переключатель темы сверху,
     навигация по разделам — лентой во всю ширину снизу. Лента скроллится
     вбок, чтобы шесть пунктов не переносились и не растили высоту шапки.
     Активный раздел подсвечивается тем же скролл-спаем, что и на десктопе. */
  .header__in { flex-wrap: wrap; gap: var(--space-2); }
  .header__theme { display: inline-flex; order: 2; margin-inline-start: auto; }

  .header__nav {
    display: flex;
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-block-start: 0.25rem;
    border-block-start: 1px solid var(--hairline);
  }
  .header__nav::-webkit-scrollbar { display: none; }

  .sticky-cta {
    display: flex;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 30;
    block-size: var(--sticky-h);
    padding-block-end: env(safe-area-inset-bottom);
    border-radius: 0;
  }
  /* Полоса лежит вплотную к краям экрана: сжатие увело бы её от границ
     и открыло фон снизу. Отклик на нажатие даёт подложка. */
  .sticky-cta:active { transform: none; background: var(--accent-hover); }
}

/* ── Колонка текста ────────────────────────────────────────────── */
/* Контейнер страницы 72rem, а строка текста ограничена мерой набора —
   без этого правила проза занимала левую половину, а половина ширины
   пустовала. Проза идёт колонкой по центру, сетки карточек и схемы
   остаются во всю ширину. Первый экран исключён: там своя сетка. */

main section:not(#hero) > .wrap > * {
  margin-inline: auto;
  max-inline-size: 44rem;
}

main section:not(#hero) > .wrap > .symptoms,
main section:not(#hero) > .wrap > .demo {
  max-inline-size: none;
}

/* Выносная фраза уже́ меры набора: на длине обычного абзаца крупный кегль
   читается просто как абзац покрупнее, а не как отдельное высказывание. */
main section:not(#hero) > .wrap > .pull {
  max-inline-size: 34ch;
}

/* ── Выключка прозы по формату ──────────────────────────────────── */
/* Ровный правый край вместо рваного. Опирается на hyphens: auto из
   base.css: без переносов выключка растаскивает пробелы в дыры, и на
   узкой колонке это заметно сильнее, чем неровный край, который она
   лечит.

   Из-под правила выведено всё, что набрано не прозой: моноширинные
   строки фактов, номер этапа, итог, формула, подпись под кнопкой.
   Там правый край и так короткий, а выключка на строке в пару слов
   только растягивает пробелы. Выносная фраза, врезка и вводные абзацы
   набраны крупно — на большом кегле дыры видны сразу, поэтому они
   остаются с рваным краем. */

/* Выключка по формату — только от планшета (≥48rem). На узкой колонке
   телефона justify даже с переносами растаскивает пробелы в «реки»,
   которые читаются хуже ровного левого края; там оставляем left. */
@media (min-width: 48rem) {
  main section:not(#hero) :is(p, li):not(
    .eyebrow, .facts, .mono, .step-num, .total, .formula,
    .btn-note, .pull, .bridge, .lead, .cta-inline, .hero__actions
  ) {
    text-align: justify;
  }
}

/* Ширину внутри колонки задаёт сама колонка: иначе пункт списка
   обрезается прежней мерой и внутри колонки снова появляется пустота */
main section:not(#hero) > .wrap > ul > li,
main section:not(#hero) > .wrap > ol > li,
main section:not(#hero) > .wrap > .notdo :is(p, ul, li),
main section:not(#hero) > .wrap > .faq :is(p, li) {
  max-inline-size: none;
}

/* ── Нумерация разделов ────────────────────────────────────────── */
/* Номер уходит на левое поле — то самое, что простаивало между краем
   контейнера в 72rem и текстовой колонкой в 44rem. Финальный экран не
   нумеруется: он не раздел, а призыв, и уже отделён своей палитрой. */

main { counter-reset: sec; }

main section:not(#hero, #cta) > .wrap > h2 {
  position: relative;
  counter-increment: sec;
}

@media (min-width: 72rem) {
  main section:not(#hero, #cta) > .wrap > h2::before {
    content: counter(sec, decimal-leading-zero);
    /* Вторая запись гасит озвучивание номера скринридером. Браузеры без
       поддержки alt-текста в content берут первую и просто читают цифру. */
    content: counter(sec, decimal-leading-zero) / "";
    position: absolute;
    inset-inline-end: calc(100% + var(--space-3));
    inset-block-start: 0.9em;
    font-family: "Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    font-size: var(--step--1);
    font-weight: 400;
    color: var(--text-muted);
  }
}

/* ── Ритм секций ───────────────────────────────────────────────── */
/* Одинаковый отступ у всех девяти секций сообщал, что они равнозначны.
   Две пары связаны по смыслу — «что делаю» → «как работаю» и «обо мне»
   → «принцип», — и второй в паре начинается плотнее, чтобы читалось
   продолжением, а не новой темой. */

#kak-rabotayu,
#princip { padding-block-start: var(--space-4); }

/* ── Первый экран ──────────────────────────────────────────────── */

.hero { padding-block-start: var(--space-5); }

.hero__in { display: grid; gap: var(--space-4); }
@media (min-width: 60rem) {
  .hero__in { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
}

.hero h1 { max-inline-size: 17ch; }
.hero .lead { color: var(--text-muted); }

.facts {
  font-size: var(--step--1);
  color: var(--text-muted);
  border-block-start: 1px solid var(--hairline);
  padding-block-start: var(--space-2);
  max-inline-size: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: none;
}
.hero__mail { color: var(--text-muted); }

.hero__portrait { margin: 0; }
.hero__portrait img {
  inline-size: 100%;
  max-inline-size: 22rem;
  block-size: auto;
  border-radius: 2px;
}
.hero__portrait figcaption {
  display: flex;
  flex-direction: column;
  max-inline-size: 22rem;
  margin-block-start: var(--space-2);
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--accent);
}
.hero__portrait-name { font-weight: 600; font-size: var(--step-1); }
.hero__portrait-role {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Схема движения денег — в блоке диагноза */
.flow { margin: var(--space-4) 0 0; color: var(--text-muted); }
.flow img { inline-size: min(100%, 32rem); block-size: auto; }
.flow figcaption { font-size: var(--step--1); margin-block-start: var(--space-1); max-inline-size: 48ch; }

@media (max-width: 60rem) {
  .hero .eyebrow { display: none; }        /* дублирует дескриптор шапки */
  .hero__portrait img { max-inline-size: 14rem; }
}

/* ── Диагноз ───────────────────────────────────────────────────── */

.symptoms {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin-block: var(--space-4) 0;
  list-style: none;
  counter-reset: s;
}
@media (min-width: 48rem) { .symptoms { grid-template-columns: 1fr 1fr; } }

.symptoms li {
  counter-increment: s;
  padding: var(--space-3);
  background: var(--surface);
  border-inline-start: 3px solid var(--accent);
  max-inline-size: none;
}
.symptoms li::before {
  content: counter(s);
  display: block;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-block-end: var(--space-1);
}

.bridge {
  margin-block-start: var(--space-4);
  font-size: var(--step-1);
  border-inline-start: 3px solid var(--hairline);
  padding-inline-start: var(--space-3);
}

.jump { color: var(--accent); font-weight: 600; }

/* ── Что я делаю ───────────────────────────────────────────────── */

.compose { display: grid; gap: var(--space-3); padding: 0; margin-block: var(--space-4) 0; list-style: none; }
.compose li { max-inline-size: var(--measure); }
.compose strong { color: var(--text); }

.rhythm { margin: var(--space-4) 0; color: var(--text-muted); }
.rhythm img { inline-size: min(100%, 30rem); block-size: auto; }
.rhythm figcaption { font-size: var(--step--1); margin-block-start: var(--space-1); max-inline-size: 48ch; }

.notdo {
  margin-block-start: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--hairline);
}
.notdo h3 { font-size: var(--step-1); margin-block-end: var(--space-1); }
.notdo ul { margin: 0; padding-inline-start: 1.2em; color: var(--text-muted); }

/* ── Как я работаю ─────────────────────────────────────────────── */

/* Шаги идут строго сверху вниз, а не сеткой 2×2: в квадрате порядок
   01→02→03→04 читается неоднозначно — вправо или вниз, — и это спорит
   с самим содержанием, где у каждого этапа свой срок и свой результат.
   Подложки нет намеренно: карточками уже набран блок «Диагноз» выше,
   и повтор приёма делает две секции подряд одинаковыми на вид. */
.steps { display: grid; padding: 0; margin-block: var(--space-4) 0; list-style: none; }

.step {
  position: relative;
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--hairline);
  max-inline-size: none;
}
.step:last-child { border-block-end: 1px solid var(--hairline); }
.step h3 { margin-block: var(--space-1) var(--space-2); }
.step p { max-inline-size: none; }
.step p + p { margin-block-start: var(--space-2); }

.step-num {
  display: flex;
  gap: 0.75em;
  align-items: baseline;
  margin: 0 0 var(--space-1);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.step-n { color: var(--accent); font-weight: 600; }

/* От 72rem по бокам колонки освобождается по 13rem — номер уходит туда
   и перестаёт занимать строку внутри текста. Ниже этой ширины поля не
   хватает, и номер со сроком возвращаются в строку над заголовком. */
@media (min-width: 72rem) {
  .step-num {
    position: absolute;
    inset-inline-end: calc(100% + var(--space-3));
    inset-block-start: calc(var(--space-3) + 0.25em);
    flex-direction: column;
    align-items: end;
    gap: 0.2em;
    margin: 0;
    text-align: end;
  }
  .step-n { font-size: var(--step-2); line-height: 1; }
  .step-when { max-inline-size: 8rem; }
}

.total {
  margin-block-start: var(--space-3);
  font-size: var(--step-1);
  color: var(--text);
}

.cta-inline { margin-block-start: var(--space-4); max-inline-size: none; }

/* ── Продукт, биография, метод ─────────────────────────────────── */

.callout {
  margin-block-start: var(--space-4);
  padding: var(--space-3);
  border-inline-start: 3px solid var(--ai);
  background: var(--surface);
  font-size: var(--step-1);
  max-inline-size: none;
}

/* Один столбец, а не два: экраны контура — широкие и плоские таблицы,
   в половине ширины их колонки становятся нечитаемыми. */
.demo { display: grid; gap: var(--space-4); margin-block-start: var(--space-4); }
.demo figure { margin: 0; color: var(--text-muted); }

/* Подложка под скриншотом белая в обеих темах: сам кадр снят со светлого
   интерфейса, и на тёмном фоне он выглядел бы вырезанным из другой страницы.
   Рамка отделяет белое поле таблицы от белого поля страницы в светлой теме. */
.demo img {
  inline-size: 100%;
  block-size: auto;
  background: #fff;
  border: 1px solid var(--hairline);
}

/* Подпись объясняет, что на кадре важно, поэтому держится меры набора,
   а не растягивается на всю ширину скриншота. */
.demo figcaption {
  font-size: var(--step--1);
  margin-block-start: var(--space-1);
  max-inline-size: 60ch;
}

.bio .facts { margin-block-start: var(--space-4); }

/* Ни рамки, ни линеек: полосой слева на странице набрано уже пять блоков,
   а линейки сверху-снизу заняты формулой в соседней секции. Здесь работает
   только кегль и воздух — приём, который больше нигде не повторяется.
   Гротеск обычного начертания: антиква у нас только в 600, и фраза стала
   бы неотличима от подзаголовка. */
.pull {
  margin-block: var(--space-4);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.formula {
  margin-block: var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--step-1);
  border-block: 1px solid var(--hairline);
  max-inline-size: none;
}

#princip h3 { margin-block-start: var(--space-4); }

/* ── Данные и NDA, FAQ, финальный экран, футер ─────────────────── */

.security-list { display: grid; gap: var(--space-2); padding: 0; margin-block: var(--space-4) 0; list-style: none; }
.security-list li { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--ai); }

.faq { border-block-start: 1px solid var(--hairline); margin-block-start: var(--space-4); }
.faq details { border-block-end: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding-block: var(--space-2);
  font-family: "Source Serif", Georgia, serif;
  font-size: var(--step-1);
  cursor: pointer;
}
.faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* display: flex выше отменяет стандартный треугольник раскрытия, и вопрос
   остаётся без признака того, что он разворачивается. Шеврон рисуем сами —
   заодно он одинаков во всех браузерах, в отличие от системного маркера. */
.faq summary::after {
  content: "";
  flex: none;
  inline-size: 0.45em;
  block-size: 0.45em;
  margin-inline-start: auto;
  border-inline-end: 2px solid var(--text-muted);
  border-block-end: 2px solid var(--text-muted);
  rotate: 45deg;
  translate: 0 -0.12em;
  transition: rotate var(--t-state) var(--ease-out),
              border-color var(--t-state) var(--ease-out);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 0.12em; }

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--accent-hover); }
  .faq summary:hover::after { border-color: var(--accent-hover); }
}
.faq summary { transition: color var(--t-state) var(--ease-out); }

/* Раскрытие содержимого не анимируется намеренно: высота считается на
   каждом кадре и обходится дорого, а список вопросов открывают подряд —
   на прерывании такая анимация дёргается. Поворот шеврона отвечает за то,
   что состояние изменилось. */
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: border-color var(--t-state); }
}
.faq details p { margin-block-start: 0; padding-block-end: var(--space-2); color: var(--text-muted); }

.cta-list { display: grid; gap: var(--space-1); margin-block: var(--space-4); padding-inline-start: 1.2em; }
#cta .btn-note { margin-block-start: var(--space-2); }

.footer {
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--step--1);
}
.footer p { margin-block: 0.25rem; }