/* Kizora — главная страница.
 *
 * Загружается поверх docs.css и только на «/». Токены, шапка, подвал,
 * кнопки и фоновый слой — общие и живут в docs.css; здесь только то, что
 * существует на одной странице.
 *
 * Композиция намеренно разная от секции к секции. Восемь одинаковых сеток
 * из трёх карточек — это не страница, это список, и читатель перестаёт
 * различать секции уже на третьей. Здесь: разбитый надвое экран, полоса
 * фактов, рельс модулей, тёмная лента, разворот с графиком, терминал,
 * правила, лента шагов, вопросы. Ни одна секция не повторяет форму
 * соседней.
 *
 * Фоновых полей на всю страницу три: первый экран, лента модерации и
 * последний призыв. Между ними — обычный фон сайта. Поле под каждым
 * блоком означает, что поля нет нигде: глаз перестаёт его замечать через
 * два экрана.
 */

/* Ни одна секция не выходит за экран по горизонтали, но у первого экрана
 * есть повёрнутый макет панели, и на узком окне его тень может задеть край.
 * `clip`, а не `hidden`: `hidden` на body отменил бы `position: sticky` у
 * шапки. */
body.landing {
  overflow-x: clip;
}

/* Полоса содержимого. Шире колонки документации (её читают строками, а
 * тут раскладывают блоки), но не во всю ширину: 1200px композиции на
 * мониторе 1920 — это композиция, а 1920 — это таблица. */
.landing main {
  max-width: none;
  padding: 0;
}

.wrap {
  width: min(100% - 3rem, var(--page-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
  position: relative;
}

/* Волосяная линия между секциями вместо отступа-пропасти: она держит ритм
 * страницы и показывает, что секции — части одного документа. */
.section + .section {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* --- заголовок секции ---------------------------------------------------
 *
 * Надзаголовок, заголовок, одна поясняющая строка. Заголовок ограничен по
 * ширине в символах, а не в пикселях: на широком экране он иначе
 * растягивается в одну строку длиной в экран, которую невозможно охватить
 * взглядом.
 */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head .tagline {
  color: var(--muted);
}

.section-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  max-width: 22ch;
}

.section-head p {
  font-size: var(--fs-lede);
  color: var(--text-dim);
  margin: 0;
  max-width: 58ch;
}

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

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5.5rem);
  isolation: isolate;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 1.15rem;
  /* Заголовок в две-три строки. Одна строка на весь экран не читается, а
   * пять — это уже абзац, набранный кеглем заголовка. */
  max-width: 15ch;
  text-wrap: balance;
}

/* Вторая половина мысли — тем же кеглем, но приглушённо. Не второй цвет и
 * не градиент по буквам: контраст здесь смысловой, а не декоративный. */
.hero h1 .soft {
  color: var(--text-dim);
}

.hero .lede {
  margin: 0;
  max-width: 46ch;
  color: var(--text-dim);
  font-size: var(--fs-lede);
  line-height: 1.55;
}

.hero .cta-row {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Три факта под кнопками. Не «преимущества» и не отзывы — проверяемые
 * свойства продукта, каждое в одну строку. */
.hero-facts {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.hero-facts li {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-facts li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
}

/* --- макет панели -------------------------------------------------------
 *
 * Не снимок экрана: снимок пришлось бы переснимать при каждом изменении
 * панели, он был бы мылом на 4K и весил бы больше всей страницы. Это
 * разметка, собранная из тех же токенов, что и настоящая панель, и
 * показывающая ровно то, о чём страница: список модулей с
 * переключателями. Цифр здесь нет намеренно — выдуманное число на главной
 * читается как заявление, а не как макет.
 */
.hero-visual {
  position: relative;
}

.panel-mock {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Едва заметный поворот: макет читается как объект на столе, а не как
   * вторая колонка вёрстки. Больше двух градусов — и это уже трюк. */
  transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
  transform-origin: left center;
}

.panel-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
}

.panel-mock-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}

.panel-mock-bar b {
  margin-left: 0.5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.panel-mock ul {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.panel-mock li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1rem;
  max-width: none;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.panel-mock li:last-child {
  border-bottom: 0;
}

.panel-mock li b {
  color: var(--text);
  font-weight: 550;
  margin-right: auto;
}

.panel-mock li .state {
  font-size: var(--fs-label);
  color: var(--muted);
}

/* Переключатель. Тот же силуэт, что и в панели, но нарисованный двумя
 * элементами: это картинка состояния, а не элемент управления, и он не
 * должен ловить ни фокус, ни указатель. */
.switch {
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  position: relative;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
}

.switch.on {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.switch.on::after {
  left: auto;
  right: 2px;
  background: var(--accent-hot);
}

/* =======================================================================
 * Полоса фактов
 * ======================================================================= */

.strip {
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}

.strip dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0;
}

.strip div {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-left: 1px solid var(--border);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

.strip div:first-child {
  border-left: 0;
  padding-left: 0;
}

.strip dt {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.strip dd {
  margin: 0.55rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 24ch;
}

/* =======================================================================
 * Два пути — намеренно неравные
 * ======================================================================= */

.paths {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
}

.path {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Главный путь — не ярче, а полнее: у него верхняя грань светится, и он
 * шире соседа. Одинаковые карточки рядом означают, что выбор безразличен,
 * а он не безразличен: девяти серверам из десяти нужен левый. */
.path.lead {
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.path h3 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

.path p {
  margin: 0;
  color: var(--text-dim);
  max-width: none;
}

.path .path-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-weight: 600;
  align-self: flex-start;
  /* Ссылка-действие в конце карточки: цель нажатия настоящая, а не высота
   * строки. Отрицательный отступ слева, чтобы текст остался на одной
   * вертикали с абзацами над ним. */
  min-height: var(--tap-min);
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--radius-xs);
}

.path .path-link:hover {
  text-decoration: underline;
}

.path .path-link .arrow {
  transition: transform var(--dur) var(--ease-out);
}

.path .path-link:hover .arrow {
  transform: translateX(3px);
}

/* =======================================================================
 * Рельс модулей
 * ======================================================================= */

/* Не карточки. Десять карточек с рамками — это десять объектов; десять
 * ячеек одной сетки с общими линиями — это один список из десяти пунктов,
 * чем модули и являются. */
.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}

.rail li {
  max-width: none;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease);
}

.rail li:hover {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.rail b {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-body);
  font-weight: 620;
  margin-bottom: 0.4rem;
}

/* Номер модуля, а не иконка. Десять разных пиктограмм на одном экране
 * читаются как десять брендов; порядковый номер — это просто порядок. */
.rail b::before {
  content: counter(module, decimal-leading-zero);
  counter-increment: module;
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  font-weight: 600;
}

.rail {
  counter-reset: module;
}

.rail span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 34ch;
}

/* Последняя ячейка — не модуль, а вход в документацию: список должен
 * заканчиваться дверью, а не обрывом. */
.rail li.rail-more {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  display: flex;
  align-items: center;
}

.rail li.rail-more a {
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: var(--tap-min);
}

.rail li.rail-more a:hover {
  text-decoration: underline;
}

/* =======================================================================
 * Тёмная лента: модерация
 * ======================================================================= */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-sunken);
  border-block: 1px solid var(--border);
}

.band > .wrap {
  position: relative;
  z-index: 1;
}

.band-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.band .section-head {
  margin-bottom: 1.75rem;
}

/* Список свойств с висячей меткой: три строки текста, каждая со своим
 * коротким названием слева. Плотнее карточек и читается как спецификация,
 * а не как реклама. */
.spec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.spec li {
  max-width: none;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: baseline;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.spec li:first-child {
  padding-top: 0;
  border-top: 0;
}

.spec dt,
.spec b {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
}

.spec span {
  color: var(--text-dim);
}

/* --- макет дела ---------------------------------------------------------
 * Как выглядит запись модерации: номер, действие, причина, кто и когда.
 * Оформление то же, что в панели, потому что это и есть та же сущность.
 */
.case {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.case-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-head .num {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.case-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.7rem 1.1rem;
  font-size: var(--fs-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.case-row:last-child {
  border-bottom: 0;
}

.case-row dt {
  color: var(--muted);
}

.case-row dd {
  margin: 0;
  color: var(--text);
}

/* Значок состояния всегда несёт слово. Цвет только усиливает его — правило
 * из DESIGN.md, и на публичной странице оно действует так же. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--tone-line, var(--border-strong));
  background: var(--tone-soft, transparent);
  color: var(--tone-ink, var(--text-dim));
  text-transform: none;
}

.pill.warn {
  --tone-soft: color-mix(in srgb, var(--tone-attention) 16%, transparent);
  --tone-line: color-mix(in srgb, var(--tone-attention) 36%, transparent);
  --tone-ink: color-mix(in srgb, var(--tone-attention) 78%, var(--text));
}

.pill.good {
  --tone-soft: color-mix(in srgb, var(--tone-good) 15%, transparent);
  --tone-line: color-mix(in srgb, var(--tone-good) 34%, transparent);
  --tone-ink: color-mix(in srgb, var(--tone-good) 76%, var(--text));
}

/* =======================================================================
 * Разворот с графиком
 * ======================================================================= */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.split.reverse .split-figure {
  order: -1;
}

.split-figure {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.figure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.split-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Цвета графика заданы правилами, а не атрибутами: `fill="var(--accent)"`
 * как атрибут представления не разворачивается — переменная в атрибуте
 * остаётся строкой, и фигура выходит чёрной. */
.split-figure .grid line {
  stroke: var(--border);
  stroke-width: 1;
}

.split-figure .bar-top {
  stop-color: var(--accent-hot);
}

.split-figure .bar-foot {
  stop-color: var(--accent);
  stop-opacity: 0.25;
}

.split-figure .bars rect {
  fill: url("#bar");
}

.split-figure .trend {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =======================================================================
 * Терминал
 * ======================================================================= */

.terminal {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.terminal-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.terminal-head span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}

.terminal-head b {
  margin-left: 0.4rem;
  font-weight: 600;
}

.terminal ol {
  list-style: none;
  margin: 0;
  padding: 0.85rem 0;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  /* Горизонтальная прокрутка внутри блока, а не всей страницы: длинная
   * команда не должна уводить документ вбок. */
  overflow-x: auto;
}

.terminal li {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(16rem, auto) minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 0.4rem 1rem;
  white-space: nowrap;
}

.terminal .cmd {
  color: var(--text);
}

.terminal .cmd::before {
  content: "/";
  color: var(--accent-2);
}

.terminal .what {
  color: var(--muted);
  font-family: var(--font);
  white-space: normal;
}

/* =======================================================================
 * Правила приватности
 * ======================================================================= */

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
}

.rules li {
  max-width: none;
  padding-top: 1.1rem;
  border-top: 2px solid var(--accent-line, color-mix(in srgb, var(--accent) 45%, transparent));
}

.rules b {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 620;
}

.rules span {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* =======================================================================
 * Лента шагов
 * ======================================================================= */

.timeline {
  list-style: none;
  counter-reset: stepline;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 46rem;
}

.timeline li {
  counter-increment: stepline;
  max-width: none;
  position: relative;
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem) 3.5rem;
}

.timeline li:last-child {
  padding-bottom: 0;
}

/* Линия проходит между кружками, а не сквозь них, и обрывается на
 * последнем шаге: она соединяет шаги, а не тянется в никуда. */
.timeline li::before {
  content: "";
  position: absolute;
  left: 1.03rem;
  top: 1.9rem;
  bottom: 0.35rem;
  width: 1px;
  background: linear-gradient(180deg, var(--border-strong), color-mix(in srgb, var(--border) 40%, transparent));
}

.timeline li:last-child::before {
  display: none;
}

.timeline li::after {
  content: counter(stepline);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}

.timeline h3 {
  margin: 0 0 0.3rem;
  font-size: var(--fs-body);
  font-weight: 620;
}

.timeline p {
  margin: 0;
  color: var(--text-dim);
  max-width: 54ch;
}

/* =======================================================================
 * Вопросы
 * ======================================================================= */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  position: relative;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
  transform: translateY(-20%) rotate(-135deg);
}

.faq summary:hover {
  color: var(--text);
}

.faq p {
  margin: 0 0 1.15rem;
  color: var(--text-dim);
  max-width: 62ch;
}

/* =======================================================================
 * Последний призыв
 * ======================================================================= */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--border);
  text-align: center;
}

.cta-band > .wrap {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  margin: 0 auto 0.85rem;
  max-width: 20ch;
  text-wrap: balance;
}

.cta-band p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--text-dim);
  font-size: var(--fs-lede);
}

.cta-band .cta-row {
  justify-content: center;
}

/* =======================================================================
 * Появление при прокрутке
 * ======================================================================= */

/* Шесть пикселей и прозрачность. Этого достаточно, чтобы секция «пришла», и
 * недостаточно, чтобы страница ощущалась медленной.
 *
 * Два условия, и оба обязательны. `prefers-reduced-motion: no-preference` --
 * потому что при выключённой анимации всё должно быть видно сразу.
 * `[data-reveal="on"]` -- потому что прятать содержимое имеет право только
 * тот, кто умеет его показать: атрибут ставит landing.js первой же строкой,
 * и если скрипт не загрузился, не выполнился или в браузере нет
 * IntersectionObserver, страница просто читается целиком. Скрывать секции
 * стилями, а показывать скриптом -- это лендинг, который у части людей
 * оказывается пустым. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="on"] .landing .reveal,
  [data-reveal="on"].landing .reveal {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity var(--dur-enter) var(--ease-out),
      transform var(--dur-enter) var(--ease-out);
  }

  [data-reveal="on"] .landing .reveal.is-in,
  [data-reveal="on"].landing .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* =======================================================================
 * Узкие экраны
 * ======================================================================= */

@media (max-width: 1080px) {
  .hero-inner,
  .band-split,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    max-width: 18ch;
  }

  /* Макет панели перестаёт быть вторым столбцом и становится картинкой
   * под текстом — без поворота, который в одной колонке читается как
   * съехавшая вёрстка. */
  .panel-mock {
    transform: none;
  }

  .split.reverse .split-figure {
    order: 0;
  }

  .paths {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .wrap {
    width: min(100% - 2rem, var(--page-max));
  }

  .strip div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-block: 1.1rem;
  }

  .strip div:first-child {
    border-top: 0;
  }

  .spec li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .case-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .terminal li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    white-space: normal;
  }

  .terminal .cmd {
    white-space: nowrap;
  }

  .timeline li {
    padding-left: 3rem;
  }
}

@media (max-width: 380px) {
  .hero-facts {
    gap: 0.45rem 1rem;
  }
}