/* ==========================================================================
   Сайт Круга: раскладка, телефон, главы, установка.
   Цвета, отступы, шрифт и тени — токены прототипа (tokens.css, копия —
   tools/sync.js). Сначала телефон: так сайт открывают по ссылке из чата;
   шире 960 px — телефон слева, главы справа.
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); }

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Переход по «Как установить» — плавно, кроме тех, кто просил без движения */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Фон: пятна и знаки Круга ---------------------------------------------
   Холст во всё окно позади страницы; пятна, обручи, сеть «своих людей»,
   значки и круги на воде в нём рисует и двигает js/site.js. Цвета — teal-500
   и gold-500 палитры, полупрозрачные: в обеих темах это лёгкий свет, а не
   краска */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Копия в полосе телефона закрывает уходящий под полосу текст тем же фоном
   и гаснет под ней (site.js рисует её в том же кадре) */
.backdrop--band {
  -webkit-mask-image: linear-gradient(#000 var(--phone-band), transparent calc(var(--phone-band) + var(--space-8)));
  mask-image: linear-gradient(#000 var(--phone-band), transparent calc(var(--phone-band) + var(--space-8)));
}

h1, h2, h3, p { margin: 0; }
a { color: var(--color-text-brand); }
img { display: block; }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Шапка --------------------------------------------------------------- */

/* Шапка лежит поверх первого экрана и места не занимает: иначе она сдвигала
   бы вниз и первый экран, и телефон, и середина окна уезжала бы на её высоту */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
}

/* Логотип: знак «К» и «РУГ» шрифтом сайта, заглавные ровно в рост К, по
   одной линии, жирным (выбор пользователя). Размер — один, высота знака
   --logo-h: сам знак — 535 из 547 её единиц, заглавная Inter — 0,72 кегля,
   отсюда кегль «РУГ». Золото — сверху светлее, к низу темнее; в тёмной теме
   светлее, иначе тонет в фоне. «РУГ» — ровным светлым золотом, без
   перехода: жирное в тёмном золоте читалось тяжело (замечания пользователя) */
.brand {
  --logo-h: 31px;
  --logo-1: var(--palette-gold-500);
  --logo-2: var(--palette-gold-600);
  --logo-3: var(--palette-gold-800);
  --name: var(--palette-gold-500);
  display: inline-flex;
  align-items: baseline;
}
:root[data-appearance="dark"] .brand {
  --logo-1: var(--palette-gold-200);
  --logo-2: var(--palette-gold-500);
  --logo-3: var(--palette-gold-700);
  --name: var(--palette-gold-200);
}
.brand__mark { display: block; width: auto; height: var(--logo-h); }
#brandGold stop:nth-child(1) { stop-color: var(--logo-1); }
#brandGold stop:nth-child(2) { stop-color: var(--logo-2); }
#brandGold stop:nth-child(3) { stop-color: var(--logo-3); }
.brand__name {
  margin-left: 0.06em;
  font-size: calc(var(--logo-h) * 535 / 547 / 0.72);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--name);
}

/* ---- Кнопки -------------------------------------------------------------- */

/* Золото — одно главное действие экрана, как в приложении
   (doc_project/design-tokens.md): «Скачать»; остальное — контуром */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-accent, var(--shadow-sm));
  transition: background var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: scale(0.97); }
.btn[aria-busy="true"] { opacity: 0.7; }

.btn--quiet {
  background: transparent;
  color: var(--color-text-brand);
  border-color: var(--color-brand-border);
  box-shadow: none;
}
.btn--quiet:hover { background: var(--color-brand-soft); }

.btn--small {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: 14px;
  background: transparent;
  color: var(--color-text-accent);
  border-color: var(--color-accent-border);
  box-shadow: none;
}
.btn--small:hover { background: var(--color-accent-soft); }

/* «Скачать» всегда под рукой — закреплена вверху справа, где стоит в шапке.
   Подложка и тень: под кнопкой идут фон и телефон */
.topbar .btn--small {
  position: fixed;
  top: max(var(--space-4), env(safe-area-inset-top));
  z-index: 4;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}
.topbar .btn--small:hover { background: var(--color-accent-soft); }
/* На компьютере — у правого края рабочей области (1240 px), как в шапке */
@media (min-width: 960px) {
  .topbar .btn--small { right: max(var(--space-5), calc((100% - 1240px) / 2 + var(--space-5))); }
}
/* На телефоне — в одной колонке со стрелками, посередине поля справа от
   телефона (--side): в углу наезжала бы на его угол */
@media (max-width: 959px) {
  .topbar .btn--small {
    right: calc(var(--side) / 2 - 42px);
    width: 84px;
    padding: 0;
  }
}

/* ---- История: телефон и главы -------------------------------------------- */

/* Телефон — закреплён сверху, глава — ровно под ним: верхняя половина
   экрана — кадр, нижняя — его текст. Прокрутка доводит главу под телефон
   и по одной за жест (scroll-snap ниже). Строка, по которой
   глава становится активной, — чуть ниже телефона (js/site.js, activeLine) */
.story {
  --phone-band: 50svh;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1240px;
  margin: 0 auto;
}

/* Свечение за телефоном — цветом главы: бирюза и золото по очереди
   (js/site.js ставит data-glow). Цвет — регистрируемое свойство: так
   градиент перетекает, а не перескакивает */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
/* Пятно — полупрозрачные бирюза и золото палитры (teal-500, gold-500):
   «мягкие» токены сплошные и на фоне экрана почти не видны */
.story { --glow: rgba(23, 163, 158, 0.18); transition: --glow 700ms var(--easing-standard); }
.story[data-glow="accent"] { --glow: rgba(201, 154, 60, 0.2); }

/* Один жест — один экран: прокрутка встаёт только на главы и не проскакивает
   их (scroll-snap-stop). Колесо и тачпад на компьютере листает js/site.js:
   щелчок колеса привязка возвращала бы на тот же экран */
html { scroll-snap-type: y mandatory; }
.chapter { scroll-snap-align: start; scroll-snap-stop: always; }
.install { scroll-snap-align: start; }
.footer { scroll-snap-align: end; }
@media (max-width: 959px) {
  .chapter:not(.chapter--hero) { scroll-margin-top: var(--phone-band); }
}

.story__phone {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--phone-band);
  padding: var(--space-2) 0 var(--space-3);
  /* Текст глав уходит под телефон, растворяясь, — без резкой кромки. Полоса
     закрыта копией фона страницы (.backdrop--band), а не сплошным цветом:
     иначе пятна фона обрывались бы на её краю. Копия гаснет за --space-8
     под полосой; окно ниже — чтобы не обрезать тень телефона */
  clip-path: inset(0 0 calc(-1 * var(--space-12)) 0);
}

/* Поле справа от телефона — для «Скачать» и стрелок, они посередине него.
   Поле не уже 104 px: на маленьком экране кнопка 84 не ближе 10 px к
   телефону и краю (замечания пользователя). Телефон — высотой в полосу (50svh, --phone-band)
   без её полей, шириной по пропорции 360×780. Поле справа уже колонки —
   телефон сдвигается влево ровно на недостающее (поле полосы справа вдвое
   больше сдвига), иначе он по центру. Ширина страницы — --page-w (js/site.js,
   без полосы прокрутки): в 100vw она входит, и в узком окне компьютера
   отступ съезжал; а проценты в отступе полосы замыкаются сами на себя —
   колонка сетки раздувалась шире экрана */
@media (max-width: 959px) {
  :root {
    --phone-w: calc((50svh - var(--space-2) - var(--space-3)) * 360 / 780);
    --side: max(calc((var(--page-w, 100vw) - var(--phone-w)) / 2), 104px);
  }
  .story__phone { padding-right: max(0px, calc(2 * var(--side) - (var(--page-w, 100vw) - var(--phone-w)))); }
}

/* Свечение за телефоном — поверх копии фона */
.story__phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, var(--glow), transparent) center / 120% 100% no-repeat;
}

.phone {
  position: relative;
  height: 100%;
  aspect-ratio: 360 / 780;
  padding: 1.6%;
  border-radius: 13% / 6%;
  background: #0f1a19;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow-lg);
}
/* На тёмном фоне корпус почти того же цвета: контур светлее, иначе рамки нет */
:root[data-appearance="dark"] .phone { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.16), var(--shadow-lg); }

.phone__screen {
  /* Сцены рисуются в 360×780 и сжимаются под рамку: --k ставит site.js */
  --k: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 11% / 5.2%;
  /* Цвет корпуса: на скруглённом краю фон экрана подмешивается в крайний
     пиксель сцены, и светлый давал белую нить по краю. Сам фон не виден —
     сцены сменяются поверх друг друга (scenes.css, is-leaving) */
  background: #0f1a19;
}

/* Глава на телефоне — ровно нижняя половина экрана, текст по её середине:
   одна глава на кадр */
.chapter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-height: calc(100svh - var(--phone-band));
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* Над заголовком — номер и тема главы: где ты в рассказе */
.chapter__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-brand);
}
.chapter__eyebrow span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}
/* Черта после номера — распрямлённый обруч, как на заставке приложения */
.chapter__eyebrow span::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--palette-gold-500), transparent);
}

.chapter__title {
  font-size: 27px;
  line-height: 1.16;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Главные слова — золотым маркером снизу; маркер дорисовывается, когда
   глава становится активной */
.chapter__title em {
  --marker: rgba(201, 154, 60, 0.3);
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  transition: background-size 700ms var(--easing-decelerate) 200ms;
}
:root[data-appearance="dark"] .chapter__title em { --marker: rgba(201, 154, 60, 0.34); }
.js .chapter:not(.is-active) .chapter__title em { background-size: 0% 100%; }

.chapter__text {
  max-width: 32em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.chapter__note {
  font-size: 14px;
  color: var(--color-text-tertiary);
}

/* ---- Пункты главы: загораются в такт сцене -------------------------------
   Сцена зажигает пункт номером (data-beat) ровно тогда, когда телефон его
   показывает. Линия слева — ход сцены: заполняется до последнего горящего */
.points {
  --progress: 0;
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
.points::before,
.points::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 1px;
  background: var(--color-border);
}
.points::after {
  background: var(--color-brand);
  transform-origin: top;
  transform: scaleY(var(--progress));
  transition: transform 500ms var(--easing-standard);
}

.point {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--color-text-primary);
  transition: color var(--duration-slow) var(--easing-standard), opacity var(--duration-slow) var(--easing-standard);
}
.point__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  box-shadow: 0 0 0 4px var(--color-bg-app);
  transition: background var(--duration-slow) var(--easing-standard), color var(--duration-slow) var(--easing-standard), transform var(--duration-slow) var(--easing-standard);
}
.point__icon svg { width: 17px; height: 17px; }

/* Со скриптом пункт ждёт своего кадра: приглушён, пока сцена до него не
   дошла. Без скрипта — горят все: текст важнее анимации */
.js .point:not(.is-lit) { color: var(--color-text-tertiary); }
.js .point:not(.is-lit) .point__icon { background: var(--color-bg-sunken); color: var(--color-text-tertiary); transform: scale(0.88); }
.js .point.is-lit .point__icon { animation: point-lit 520ms var(--easing-standard); }
@keyframes point-lit {
  40% { transform: scale(1.18); }
}

/* В первой главе пункты — строкой таблеток, без линии хода */
.points--chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.points--chips::before,
.points--chips::after { display: none; }
.points--chips .point {
  display: inline-flex;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}
.points--chips .point__icon { width: 26px; height: 26px; box-shadow: none; }
.points--chips .point__icon svg { width: 15px; height: 15px; }

/* «Ещё в Круге» — тихая строка значков, не пункты главы */
.extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-secondary);
}
.extras__label { width: 100%; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.extra { display: inline-flex; align-items: center; gap: 6px; }
.extra svg { width: 16px; height: 16px; color: var(--color-text-brand); }

/* Соседние главы приглушены: глаз идёт за той, что сейчас в телефоне */
.js .chapter { transition: opacity 500ms var(--easing-standard); }
.js .chapter:not(.is-active) { opacity: 0.32; }

@media (prefers-reduced-motion: reduce) {
  .js .chapter:not(.is-active) { opacity: 1; }
  .chapter__title em, .points::after, .point, .point__icon { transition: none; animation: none !important; }
}

.chapter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Сколько раз нажали «Скачать» — значок человека и число под кнопкой:
   мелко и бледно, чтобы не спорить с ней */
.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.download__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.download__count[hidden] { display: none; }
.download__count svg { width: 13px; height: 13px; }

/* Первый экран телефона — заголовок и кнопки во всё окно, по его середине;
   поля сверху и снизу равны (сверху под ними шапка) — середина не уезжает.
   Телефон начинается со второго экрана */
.chapter--hero {
  min-height: 100svh;
  gap: var(--space-4);
  padding-top: calc(56px + var(--space-3));
  padding-bottom: calc(56px + var(--space-3));
}
.chapter--hero .chapter__title { font-size: 34px; }
/* Логотип открывает первый экран вместо слова «Круг» в заголовке */
.chapter--hero .brand { --logo-h: 36px; }
.js .chapter--hero:not(.is-active) { opacity: 1; }

@media (min-width: 960px) {
  .story {
    grid-template-columns: minmax(380px, 46%) 1fr;
    column-gap: var(--space-8);
    padding: 0 var(--space-6);
  }

  /* Телефон слева на всю историю: закреплён и стоит, пока идут главы.
     Строк — по числу глав (13): новая глава — новое число здесь */
  .story__phone {
    grid-column: 1;
    grid-row: 1 / span 13;
    align-self: start;
    height: 100vh;
    padding: 6vh 0;
    clip-path: none;
  }

  /* Свечение за телефоном — пятно позади рамки. Текст под телефон не
     уходит: копия фона не нужна */
  .story__phone::before { background-size: 90% 80%; }
  .story__phone .backdrop { display: none; }

  .chapter {
    grid-column: 2;
    justify-content: center;
    gap: var(--space-4);
    min-height: 100vh;
    padding: var(--space-12) 0;
  }
  .chapter__eyebrow { font-size: 14px; }
  .chapter__title { font-size: clamp(34px, 3.4vw, 50px); }
  .chapter__text { font-size: 20px; max-width: 28em; }
  .points { gap: var(--space-3); max-width: 30em; margin-top: var(--space-2); }
  .point { font-size: 17.5px; grid-template-columns: 36px 1fr; }
  .point__icon { width: 36px; height: 36px; }
  .points::before, .points::after { left: 17px; top: 18px; bottom: 18px; }
  .chapter--hero { min-height: 100vh; }
  .chapter--hero .chapter__title { font-size: clamp(42px, 4.4vw, 62px); }
  .chapter--hero .brand { --logo-h: clamp(40px, 3.6vw, 52px); }
}

/* ---- Листание экранов ------------------------------------------------------
   Таблетка: вверх, ход рассказа, вниз. Ход — та же линия, что у пунктов
   главы; его ставит js/site.js (--progress). На компьютере — справа от
   рабочей области (1240 px), окно уже — у края окна, а главы оставляют ей
   поле справа. На телефоне — справа от закреплённого телефона */
.pager {
  --pager-btn: var(--size-touch);
  --pager-track: 56px;
  position: fixed;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  transition: opacity var(--duration-base) var(--easing-standard), visibility 0s;
}

@media (min-width: 960px) {
  .pager {
    top: 50%;
    right: max(var(--space-4), calc((100% - 1240px) / 2 - 76px));
  }
}

/* На телефоне таблетка — посередине поля справа от телефона (--side), по
   середине полосы. Кнопки и линия хода — от высоты экрана: на низком экране
   таблетка сжимается, но кнопка не меньше 36 px */
@media (max-width: 959px) {
  .pager {
    --pager-btn: clamp(36px, 7svh, 44px);
    --pager-track: clamp(16px, 6svh, 56px);
    top: 25svh;
    right: calc(var(--side) / 2 - (var(--pager-btn) + 10px) / 2);
  }
  /* Первый экран и «Как установить» — без телефона: стрелкам не у чего стоять */
  .pager.is-away {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--easing-standard), visibility 0s var(--duration-base);
  }
}

@media (min-width: 960px) and (max-width: 1331px) {
  .chapter { padding-right: 64px; }
}

.pager__btn {
  display: grid;
  place-items: center;
  width: var(--pager-btn);
  height: var(--pager-btn);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-brand);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.pager__btn:hover { background: var(--color-brand-soft); }
.pager__btn:active { transform: scale(0.92); }
.pager__btn span { display: grid; }
.pager__btn svg { width: 22px; height: 22px; }
/* Значок один — шеврон вправо из набора приложения, повёрнутый */
.pager__btn[data-page="prev"] svg { transform: rotate(-90deg); }
.pager__btn[data-page="next"] svg { transform: rotate(90deg); }
/* Край рассказа: кнопка на месте, но тихая и не нажимается */
.pager__btn[aria-disabled="true"] { color: var(--color-text-tertiary); opacity: 0.5; cursor: default; }
.pager__btn[aria-disabled="true"]:hover { background: transparent; }
.pager__btn[aria-disabled="true"]:active { transform: none; }

.pager__track {
  position: relative;
  width: 2px;
  height: var(--pager-track);
  overflow: hidden;
  border-radius: 1px;
  background: var(--color-border);
}
.pager__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
  transition: transform 500ms var(--easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .pager__btn, .pager__track::after { transition: none; }
}

/* ---- Установка ----------------------------------------------------------- */

.install {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-5) var(--space-10);
}

/* На компьютере «Как установить» — свой экран во всё окно: листание
   встаёт на него, и сверху не торчит низ телефона прошлой главы */
@media (min-width: 960px) {
  .install {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
}

.install__title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.install__lead {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}

.steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-bold);
}

.step__body {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  color: var(--color-text-secondary);
}

.step__title {
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.step .btn { margin-top: var(--space-2); }

code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunken);
}

/* ---- Подвал -------------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-10);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 14px;
  color: var(--color-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}