/* Оформление сайта продукта (T-OPS-028, docs/29_Website.md).

   Один файл, ни одного внешнего запроса: шрифты системные, скриптов нет. Это не
   только политика содержимого (Site/_headers) — страница про приватность не
   вправе тянуть чужие шрифты, чтобы рассказать о приватности.

   Тёмная основа, и только она. Продукт живёт в терминале, у него тёмная иконка,
   и работают с ним по вечерам; светлый лист бумаги выглядел бы чужим предметом.
   Светлого варианта нет намеренно: снимки в `assets/` сделаны на тёмном фоне и
   на белой странице читались бы как вставленные из другого места (решение
   владельца продукта, 14.09.2026).

   Два голоса. Продуктовый — системный гротеск, крупно и туго набранный;
   машинный — моноширинный, и появляется он ровно там, где говорит машина:
   вывод сборки, пути, состояния, значения.

   Цвет несёт состояние и взят из продукта: фиолетовый значит «соединено»,
   янтарный — «ждёт вашего ответа». Больше на странице цвета нет.

   Фон и акцент подобраны под снимки в `assets/`: у них глубокий фиолетовый фон,
   и сине-чёрная страница рядом с ними читалась бы как чужая вкладка. */

:root {
  color-scheme: dark;

  --bg: #0b0616;
  --bg-raised: #120b26;
  --surface: #1a1136;
  --ink: #f0ecfa;
  --dim: #a79bc4;
  --line: #2a1d4c;
  --brand: #a855f7;
  --brand-deep: #7c3aed;
  --wait: #e8a33d;
  --signal: var(--brand);
  --add: #62d39a;
  --del: #f2778d;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --xs: 0.8125rem;
  --s: 0.9375rem;
  --m: 1.25rem;
  --l: 1.75rem;
  --xl: 2.5rem;

  --gutter: 1.5rem;
  --wide: 92rem;
}

:lang(ja) {
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:lang(ja) body { line-height: 1.85; }

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.col { max-width: 52rem; }

a { color: var(--brand); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

/* MARK: - Шапка и подвал */

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

.top .name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 640;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

.top .name img { width: 28px; height: 28px; border-radius: 7px; display: block; }

.top nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

.top nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: var(--s);
  padding: 0.2rem 0;
}

.top nav a:hover { color: var(--ink); }
.top nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--brand); }

.bottom {
  margin-top: 6rem;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--s);
}

/* Подвал держится того же строя, что страница: ссылки по центру, а не прижаты
   к левому краю посреди центрированной вёрстки. */
.bottom { text-align: center; }

.bottom nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.75rem;
  margin-bottom: 1.5rem;
}
.bottom a { color: var(--dim); text-decoration: none; }
.bottom a:hover { color: var(--ink); }
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.5rem; }
.langs a[aria-current] { color: var(--ink); }

/* MARK: - Типографика */

h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 0 1.5rem;
  max-width: 24ch;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 660;
  margin: 0 0 1.25rem;
  max-width: 28ch;
}

h3 {
  font-size: var(--m);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 640;
  margin: 0 0 0.6rem;
}

p { margin: 0 0 1.15rem; }

.lede {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.45;
  color: var(--dim);
  max-width: 44rem;
}

:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0; line-height: 1.3; }
:lang(ja) h1 { max-width: 20ch; }

ul, ol { padding-left: 1.15rem; margin: 0 0 1.15rem; }
li { margin-bottom: 0.45rem; }
strong { font-weight: 640; color: var(--ink); }

section { padding: clamp(3rem, 6vw, 5rem) 0; }

/* Чередование фона вместо линеек: секции читаются как ритм, а не как список.
   Подложка растягивается за колонку псевдоэлементом — так разметка остаётся
   одной колонкой на всех сорока страницах, а фон идёт во всю ширину. */
section { position: relative; }

section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
  z-index: -1;
}

/* Секции идут одной колонкой по центру — тем же ритмом, что и сценарии.
   Двухколоночная раскладка «заголовок слева, текст справа» спорила с ними и
   растаскивала страницу на две манеры сразу. */
/* Центрирование задаётся всем секциям, а не только помеченным классом: секция
   с ценой класса не имела, и её карточки растянуло на всю ширину страницы, а
   заголовок остался у левого края. */
section > h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

section > .col,
section > .services,
section > .get,
section > .lede {
  margin-left: auto;
  margin-right: auto;
}

/* Блок с иконкой на странице загрузки шёл во всю ширину, а всё под ним — в
   колонку: два разных края на одной странице. Ширина у них теперь общая. */
.get { max-width: 52rem; }

.split { display: grid; justify-items: center; }

.split > h2 {
  text-align: center;
  max-width: none;
  margin-bottom: 1.5rem;
}

/* Строка по центру читается, пока она короткая. Шире этой меры центрированный
   абзац приходится ловить глазом с обоих краёв — и текст перестают читать. */
.split > .col { max-width: 52rem; }

.split > .col > p { text-align: center; }

.split > .col > ul,
.split > .col > ol {
  text-align: left;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.split > .note {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.split > .paths { margin-left: auto; margin-right: auto; }

/* MARK: - Первый экран */

/* Обложка идёт в край окна и растворяется в фоне снизу. В рамке с полями и
   скруглением она читалась картинкой, вставленной в текст, — а это первый
   экран, и он должен занимать экран. */
.cover {
  margin: 0 calc(50% - 50vw);
  padding: 0;
  position: relative;
}

.cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(180deg, #000 58%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 58%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 62rem) {
  .cover img { max-height: 86vh; object-fit: cover; object-position: center top; }
}

/* Обложка, открывающая страницу, начинается под шапкой — верх у неё резаный и
   так и должен быть. Стоящая перед финалом обложка упирается резаным верхом в
   секцию над собой, поэтому растворяется с обеих сторон. */
main > .cover:not(:first-child) img {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* Под обложкой сразу идёт первая секция: её верхний отступ подтянут, чтобы
   растворяющийся край изображения переходил в текст, а не висел в пустоте.
   Подтягивать есть смысл только на широком экране: на телефоне обложка низкая,
   и те же восемь процентов высоты окна кладут заголовок прямо на снимок. */
.cover + section { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* Подтягивание относится только к обложке, открывающей страницу. Когда снимок
   стоит в середине, следующая секция наезжала на него заголовком. */
@media (min-width: 62rem) { main > .cover:first-child + section { margin-top: -8vh; } }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.button {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.button:hover { filter: brightness(1.08); }

.button.quiet {
  background: none;
  border-color: var(--line);
  color: var(--ink);
}

.button.quiet:hover { border-color: var(--brand); color: var(--brand); filter: none; }

/* Снимок продукта во всю ширину окна посреди страницы: то же обращение с
   краями, что у обложки, но без обрезки по высоте — на нём показывают экран, а
   не создают настроение. */
.band {
  margin: clamp(1rem, 3vw, 2.5rem) calc(50% - 50vw) 0;
  padding: 0;
  position: relative;
}

.band img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 56rem) { .band img { max-height: 80vh; object-fit: contain; } }

/* Растушёванный низ снимка должен растворяться в фоне следующей секции, а не
   упираться в её край: секция подтянута под него, её подложка уходит под маску.

   Подтяжка задана в `rem`, а не в `vh`. Доля высоты окна растёт вместе с окном,
   и на высоком экране заголовок следующей секции въезжал прямо в снимок —
   особенно там, где он в две строки. Высота снимка от высоты окна не зависит,
   значит и подтяжка не должна. */
.band + section { padding-top: clamp(1rem, 3vw, 2.5rem); }

@media (min-width: 62rem) { .band + section { margin-top: -2rem; } }

.meta { font: var(--xs)/1.55 var(--mono); color: var(--dim); margin: 0 0 0.9rem; }

/* MARK: - Перечень сервисов */

.services {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 2.5rem 0 0;
}

@media (min-width: 46rem) {
  .services { grid-template-columns: repeat(2, 1fr); }
}

.service {
  background: var(--bg);
  padding: 1.5rem 1.4rem;
  display: block;
}

section:nth-of-type(even) .service { background: var(--bg-raised); }

.service dt {
  font: 600 var(--xs)/1.5 var(--mono);
  color: var(--brand);
  margin-bottom: 0.4rem;
}

.service dd { margin: 0; color: var(--dim); }

dl { margin: 0; }

/* MARK: - Врезка */

.note {
  border-left: 2px solid var(--brand);
  text-align: left;
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin: 2rem 0;
  max-width: 34rem;
  color: var(--ink);
}

.note p:last-child { margin-bottom: 0; }

/* MARK: - Вопросы и ответы */

.qa { max-width: 52rem; margin: 0 auto; }
.qa h3 { margin-top: 2.75rem; font-size: 1.35rem; }
.qa h3:first-of-type { margin-top: 0; }
.qa p { color: var(--dim); }

section > h1,
section > .updated,
.middled > h1,
.middled > .lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Дата правки юридической страницы — подпись под заголовком, а не абзац. */
.updated { color: var(--dim); font-size: var(--s); }

.middled > h1 { max-width: 26ch; }
.middled > .lede { max-width: 44rem; }

/* MARK: - Сценарии страницы Showcases */

/* Манера, заданная владельцем продукта как ориентир: экран — это заголовок,
   одна мысль и изображение во всю ширину. Текст по центру и покрупнее,
   изображение в край окна, между сценариями много воздуха. */
/* Колода — обычный поток, а не сетка: дорожка сетки считает свою ширину по
   содержимому, и снимок в край окна раздвигал её шире экрана — на телефоне
   заголовок уезжал за правый край. Промежутки между сценариями задаются
   полями. */
.deck { padding-top: clamp(3rem, 8vw, 7rem); }

.deck > .slide + .slide { margin-top: clamp(5rem, 12vw, 11rem); }

/* Сценарий — блок, а не сетка: в сетке снимок шириной `100vw` раздвигал дорожку
   шире окна, и на телефоне страница уезжала вбок вместе с заголовком. У блока
   `50%` в полях снимка считается от той же колонки, что и у текста. */
.slide { text-align: center; }

.slide > div {
  max-width: 56rem;
  margin: 0 auto;
}

.slide h3 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.slide p {
  color: var(--dim);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.5;
  margin: 0;
}

/* Изображение выходит к краям окна и растворяется книзу — рамка вокруг него
   превратила бы экран в страницу каталога. */
.slide figure {
  margin: clamp(2rem, 4vw, 3rem) calc(50% - 50vw) 0;
  position: relative;
}

/* Края растворяются в фоне. Снимок во всю ширину с резаным верхом и низом
   читается вклейкой; маска убирает границу кадра, и остаётся только то, что на
   нём изображено. По бокам растушёвка мягче — там снимок и так уходит за край
   окна. */
.slide figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 56rem) {
  .slide figure img { max-height: 76vh; object-fit: contain; }
}

/* Заголовку сценария ширина нужна, абзацу — нет: центрированную строку длиной
   в девятьсот пикселей глаз ловит с обоих краёв и бросает читать. */
.slide p { max-width: 44rem; margin-left: auto; margin-right: auto; }

/* Надзаголовок сценария стоит над заголовком и по тому же центру. */
.slide .eyebrow { margin-bottom: 0.85rem; }

/* Голос машины внутри сценария: то, что в эту минуту на экране. */
.slide > .mock {
  max-width: 44rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: left;
  font-size: var(--s);
}

.slide > .mock + .facts { margin-top: 1.25rem; }

/* Карточки фактов — тем же ритмом: по центру, не шире текста. */
.slide .facts {
  display: grid;
  gap: 1rem;
  max-width: 58rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  text-align: left;
}

/* MARK: - Карточки фактов */

/* Сценарий без снимка получает не пустоту, а несколько карточек: они всплывают
   на том же месте, где у соседей стоит телефон, и говорят то, что снимок сказал
   бы картинкой. Это не подделка интерфейса — это факты, набранные как факты. */
.facts { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.facts li {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  background: var(--surface);
}

.facts b {
  display: block;
  font: 600 var(--xs)/1.5 var(--mono);
  color: var(--brand);
  margin-bottom: 0.3rem;
}

.facts span { color: var(--dim); font-size: var(--s); }

/* MARK: - Финал страницы */

/* Последнее, что читают: одна фраза, одно действие и строка условия. Крупнее
   всего на странице после первого экрана — здесь человек либо уходит, либо
   нажимает. */
.closing {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.75rem;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}

.closing-line {
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 680;
  margin: 0;
  max-width: 20ch;
}

.closing .actions { margin: 0; }
.closing .meta { margin: 0; }

/* MARK: - Схема путей */

.paths { margin: 2.5rem auto 0; padding: 0; max-width: 38rem; color: var(--dim); }
.paths figcaption { text-align: center; }
.paths svg { width: 100%; height: auto; display: block; }
.paths figcaption { font-size: var(--s); color: var(--dim); margin-top: 0.75rem; }

/* MARK: - Загрузка */

.get { display: grid; gap: 2rem; align-items: start; padding: 0 0 1rem; }

@media (min-width: 46rem) { .get { grid-template-columns: 8rem 1fr; gap: 2.5rem; } }

.get img { width: 8rem; height: 8rem; border-radius: 22%; display: block; }

.checksum {
  font: var(--xs)/1.7 var(--mono);
  color: var(--dim);
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0 0 1.15rem;
}

/* MARK: - Таблицы и код */

table { border-collapse: collapse; width: 100%; margin: 0 0 1.75rem; text-align: left; }
th, td { border-bottom: 1px solid var(--line); padding: 0.8rem 1.25rem 0.8rem 0; vertical-align: top; }
th { font: 600 var(--s)/1.5 var(--mono); color: var(--ink); white-space: nowrap; }
td { color: var(--dim); }

code { font: 0.9em var(--mono); background: var(--surface); padding: 0.12em 0.4em; border-radius: 5px; }
pre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem; overflow-x: auto; font: var(--xs)/1.7 var(--mono); }
pre code { background: none; padding: 0; }

.spaced { margin-top: 1.75rem; }

/* MARK: - Движение */

/* Единственная анимация на сайте, и она не украшение: точки идут по трём путям
   с разной скоростью — локальная сеть быстрее прямого соединения через
   интернет, а через ретранслятор пакет ещё и ждёт в узле. Ровно это написано
   рядом словами.

   Только на настоящем указателе и на широком экране: на телефоне страницу
   листают, а не рассматривают, и движущаяся точка там мешает читать. */
.pulse { animation: none; }

@media (hover: hover) and (min-width: 62rem) {
  .pulse.local { animation: travel-direct 1.6s linear infinite; }
  .pulse.direct { animation: travel-direct 2.6s linear infinite; }
  .pulse.relayed { animation: travel-relayed 4.2s linear infinite; }
}

@keyframes travel-direct {
  from { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { transform: translateX(414px); opacity: 0; }
}

/* Плато на 38–52 % — стоянка в узле: ретранслятор принимает поток и отдаёт его
   дальше, и эта пауза — половина разницы в задержке. */
@keyframes travel-relayed {
  from { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.55; }
  38% { transform: translateX(144px); opacity: 0.55; }
  52% { transform: translateX(144px); opacity: 0.55; }
  54% { transform: translateX(272px); opacity: 0.55; }
  90% { opacity: 0.55; }
  to { transform: translateX(414px); opacity: 0; }
}

/* Появление по прокрутке — средствами браузера, без единой строки скрипта:
   политика содержимого их запрещает, и это к лучшему. `@supports` обязателен —
   без него в браузере, не знающем `view()`, содержимое осталось бы невидимым
   навсегда, а это худший способ украсить страницу.

   Сценарии на странице Showcases движения не получают: там экран и так занят
   снимком во всю ширину, и вход по прокрутке спорил бы с ним. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Отрезок — внутри фазы `entry`: целиком видимый факт проявлен целиком и
       на низком окне, где странице некуда прокручиваться. Лесенка — сдвигом
       начала, а не концом в `cover` (docs/29_Website.md, T-UI-059). */
    .facts li {
      animation: rise linear both;
      animation-timeline: view();
    }

    .facts li:nth-child(1) { animation-range: entry 0% entry 55%; }
    .facts li:nth-child(2) { animation-range: entry 8% entry 65%; }
    .facts li:nth-child(3) { animation-range: entry 16% entry 75%; }
    .facts li:nth-child(4) { animation-range: entry 24% entry 85%; }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* MARK: - Шапка держится наверху */

/* Страница длинная и читается сверху вниз; переход к другому разделу не должен
   стоить прокрутки к началу. Подложка полной ширины — псевдоэлементом, как у
   секций: сама шапка живёт внутри `.wrap` и до краёв окна не достаёт. */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
}

.top::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}

/* Полоса под шапкой рисуется подложкой; собственная граница дала бы вторую. */
.top { border-bottom: none; }

/* MARK: - Надзаголовок */

/* Моноширинная строка над заголовком: говорит, о чём раздел, до того как
   прочитан заголовок. Тот же голос, которым на страницах говорит машина. */
.eyebrow {
  font: 600 var(--xs)/1.5 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1rem;
}

/* MARK: - Первый экран словами */

/* Обложка представляет продукт картинкой, но первым читается обещание, а не
   картинка: человек пришёл узнать, что он получит. */
.lead {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.lead h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.25rem);
  max-width: 17ch;
  margin-bottom: 1.5rem;
}

.lead .lede { max-width: 46rem; color: var(--dim); }
.lead .actions { justify-content: center; margin-top: 1.5rem; }
.lead .meta { margin: 1.25rem 0 0; }

:lang(ja) .lead h1 { max-width: 15ch; }

/* MARK: - То, что в этот момент на экране */

/* Не поддельный интерфейс, а то, что машина в эту минуту пишет: команда,
   вопрос инструмента, строки diff. Голос машины на сайте один — моноширинный. */
.mock {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  padding: 0.95rem 1.05rem;
  margin: 0;
  font: var(--xs)/1.75 var(--mono);
  color: var(--dim);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.mock b { color: var(--ink); font-weight: 500; }
.mock i { color: var(--brand); font-style: normal; }
.mock u { color: var(--wait); text-decoration: none; }
.mock ins { color: var(--add); text-decoration: none; }
.mock del { color: var(--del); text-decoration: none; }

/* MARK: - Разбор одной возможности */

/* Карточка возможности: чем она полезна — строкой, которую можно проверить, а
   под ней то, что человек действительно делает пальцем. Прилагательных здесь
   нет, потому что проверить их нельзя. */
.cases {
  display: grid;
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 78rem;
  text-align: left;
}

@media (min-width: 58rem) { .cases { grid-template-columns: repeat(2, 1fr); } }

.case {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 1.75rem 1.6rem 1.6rem;
}

.case h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: 0.75rem; }
.case .claim { color: var(--ink); margin-bottom: 0; }

.case ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.case li {
  position: relative;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--dim);
  font-size: var(--s);
  line-height: 1.55;
}

.case li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--brand);
  font-weight: 700;
}

.case li b { color: var(--ink); font-weight: 600; }

/* MARK: - Движение по прокрутке */

/* Скриптов на сайте нет и не будет (политика содержимого запрещает их), поэтому
   всё движение — средствами браузера: таймлайны прокрутки, переходы и редкие
   бесконечные петли там, где петля что-то означает.

   Два правила, из которых ничего не выпадает:

   1. `@supports` обязателен. Без него браузер, не знающий `view()`, оставит
      содержимое прозрачным навсегда — худший способ украсить страницу.
   2. `prefers-reduced-motion` снимает всё до последней петли. Человек, которого
      движение укачивает, не должен платить за оформление. */

@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Вывод «печатается» сверху вниз — так же, как его печатает настоящая
   программа. Горизонтальное раскрытие на нескольких строках читалось бы
   шторкой, а это не шторка, а вывод. */
@keyframes print {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Снимок приходит чуть крупнее и садится на место. Полпроцента — весь эффект:
   больше похоже на дрожание страницы, чем на глубину. */
@keyframes ease-in-scale {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Первый экран появляется при открытии страницы, а не по прокрутке: он уже
   виден, и ждать от него нечего. Порядок тот же, в котором его читают. */
@media (prefers-reduced-motion: no-preference) {
  .lead > * { animation: enter 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .lead > .eyebrow { animation-delay: 0.04s; }
  .lead > h1 { animation-delay: 0.12s; }
  .lead > .lede { animation-delay: 0.24s; }
  .lead > .actions { animation-delay: 0.36s; }
  .lead > .meta { animation-delay: 0.46s; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Отрезок задаётся фазой `entry`, а не `cover`. Разница не косметическая:
       `cover` считает долю прохода элемента через экран целиком, и на короткой
       странице, которая не прокручивается, нижний блок до конца отрезка не
       доходит никогда — он так и остаётся полупрозрачным. `entry` считает, какая
       часть самого элемента уже вошла в экран: целиком видимый элемент — это
       сто процентов независимо от того, есть ли куда прокручивать. */

    /* Заголовок и подзаголовок секции появляются первыми, содержимое — следом:
       глаз всё равно идёт этим порядком, движение его не обгоняет. */
    section > h2,
    section > .lede,
    .middled > h1,
    .middled > .lede {
      animation: enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    /* Карточки — друг за другом. Задержка задаётся не временем, а отрезком
       прокрутки: страницу листают с разной скоростью, и привязка ко времени
       рассыпалась бы у того, кто листает быстро. */
    .cases .case,
    .services .service {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 62%;
    }

    .cases .case:nth-child(2n),
    .services .service:nth-child(2n) { animation-range: entry 12% entry 78%; }

    .services .service:nth-child(4n+3) { animation-range: entry 8% entry 70%; }

    /* Строки разбора внутри карточки — своим порядком, коротким отрезком. */
    .case li {
      animation: enter linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 80%;
    }

    /* Сценарий на странице Showcases: заголовок, мысль, факты. */
    .slide > div,
    .slide > .facts,
    .slide > .mock {
      animation: enter linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 66%;
    }

    /* Снимок садится из чуть большего масштаба — вместе с растушёвкой краёв это
       читается глубиной, а не выездом. Здесь `cover` допустим: застрявший на
       полпути масштаб ничего не прячет, в отличие от прозрачности. */
    .slide figure img,
    .band img,
    .cover img {
      animation: ease-in-scale linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* Вывод машины печатается по мере того, как до него доходит чтение. */
    .mock {
      animation: print linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 85%;
    }

    /* Финал страницы — последнее, что читают, и он приходит по порядку. */
    .closing-line,
    .closing .actions,
    .closing .meta {
      animation: enter linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 55%;
    }

    .closing .actions { animation-range: entry 8% entry 68%; }
    .closing .meta { animation-range: entry 14% entry 80%; }

    /* Врезка, схема путей и вопросы. */
    .note,
    .paths,
    .qa h3,
    .qa p {
      animation: enter linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 66%;
    }
  }
}

/* Полоса прочитанного под шапкой. Она не украшение: страница стала длинной, и
   это единственный ответ на вопрос «сколько ещё осталось», который можно дать
   без скрипта. По умолчанию полоса пуста — в браузере без таймлайнов её просто
   не видно. */
.top::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .top::after {
      animation: progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* MARK: - Движение под указателем */

/* Всё, что ниже, случается только там, где есть настоящий указатель: на
   телефоне наведения нет, а `:hover` от касания залипает. */

a, .button, .case, .facts li, .service, .top .name img {
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease,
              transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.22s ease,
              filter 0.18s ease;
}

/* Пункт шапки подчёркивается полоской, растущей от левого края, а не
   появляющейся целиком: рост показывает, что это одно и то же подчёркивание,
   которым отмечен текущий раздел. */
.top nav a { position: relative; }

.top nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .top nav a:hover::after { transform: scaleX(1); }

  .button:hover { transform: translateY(-2px); }

  .button:not(.quiet):hover {
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--brand) 85%, transparent);
  }

  .button:active { transform: translateY(0); }

  .case:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: 0 20px 46px -30px color-mix(in srgb, var(--brand) 75%, transparent);
  }

  .facts li:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  }

  .service:hover { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }

  .top .name:hover img { transform: rotate(-6deg) scale(1.06); }
}

/* MARK: - Главная (T-UI-056) */

/* Главная собрана из модулей продающей страницы: обещание и действие, снимок,
   перечень инструментов, возможности рядом со снимками, остальное карточками,
   настройка тремя шагами, сравнение, данные, цена, вопросы, финал. Правила ниже
   живут под `.home` и других страниц не касаются — кроме кнопки в шапке, которая
   общая.

   Чередование подложек общих секций здесь снято: плитки со снимками собраны на
   цвете страницы (`--bg`), и подложка другого тона обвела бы каждую
   прямоугольником. Приподнятые полосы стоят только там, где снимков нет. */

.home > section::before { content: none; }

.home > section.raised::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
  z-index: -1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Загрузка — единственное действие, ради которого сайт существует, поэтому в
   шапке она кнопкой, а не одним из пунктов. Шапку порождает
   scripts/site-chrome.py, и выделение задано адресом, а не классом: скрипт
   классов пунктам не пишет. */
.top nav a[href$="download/"] {
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  font-weight: 600;
}

.top nav a[href$="download/"]::after { content: none; }
.top nav a[href$="download/"]:hover { color: #fff; filter: brightness(1.1); }
.top nav a[href$="download/"][aria-current] { box-shadow: none; }

.home h2 { max-width: 22ch; }

/* Японский заголовок иначе рвётся посреди слова катаканой («エージェ/ント»):
   переносы — только по знакам препинания и пробелам у латиницы, а слишком
   длинный отрезок всё же переносится, а не вылезает за край. */
:lang(ja) .home :is(h1, h2, h3) { line-break: strict; }

:lang(ja) .home :is(h1, .features h2, .more h2, .setup h2, .compare h2, .privacy h2,
                    .pricing h2, .faq h2) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

:lang(ja) .home h2 { max-width: 20em; }
:lang(ja) .opening h1 { font-size: clamp(1.9rem, 5.6vw, 4rem); max-width: 17em; }
:lang(ja) .feature h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.home section > .lede { text-align: center; }

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

.opening {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.opening h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin-bottom: 1.6rem;
}

.opening h1 .accent {
  background: linear-gradient(100deg, #c89bff 0%, var(--brand) 55%, var(--brand-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.opening .lede { max-width: 40rem; color: var(--dim); margin-bottom: 0; }
.opening .actions { justify-content: center; margin-top: 2.25rem; }
.opening .meta { margin: 1.35rem 0 0; font-size: var(--xs); }
.opening .meta span { display: inline-block; }

.home .button { padding: 0.95rem 1.6rem; border-radius: 12px; }

/* Янтарный — цвет ожидания во всём продукте; здесь ждёт выпуск. */
.release {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0.35rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--wait) 35%, var(--line));
  border-radius: 999px;
  font-size: var(--xs);
  color: var(--dim);
  text-align: left;
}

.release::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wait);
}

.home .band { margin-top: clamp(0.5rem, 2vw, 1.5rem); }

/* MARK: Инструменты */

.agents { text-align: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.agents h2 {
  font-size: var(--xs);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  max-width: none;
  margin-bottom: 1.5rem;
}

.chips {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.25rem;
  max-width: 56rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.chips li {
  margin: 0;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, var(--bg));
  font: 500 var(--s)/1.3 var(--mono);
  color: var(--ink);
}

.agents .meta { margin: 0; }

/* MARK: Возможности рядом со снимками */

.feature {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 76rem;
  margin: clamp(3rem, 7vw, 6rem) auto 0;
}

@media (min-width: 60rem) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature.flip .copy { order: 2; }
}

.feature .copy { max-width: 34rem; justify-self: center; }

.feature h3 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 660;
  margin-bottom: 1rem;
}

.feature .copy > p { color: var(--dim); font-size: 1.125rem; }

.feature ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.feature li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-top: 1px solid var(--line);
  margin: 0;
  color: var(--ink);
}

.feature li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--brand);
  transform: rotate(45deg);
}

.shot { margin: 0; justify-self: center; width: 100%; max-width: 32rem; }
.shot img { display: block; width: 100%; height: auto; }

/* MARK: Остальное карточками */

.cards {
  list-style: none;
  padding: 0;
  margin: 2.5rem auto 0;
  max-width: 76rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
  padding: 0 0 1.5rem;
}

/* Плитка портретная, а в карточке нужен верх телефона крупно: там заголовок
   экрана, по которому экран и узнаётся. Картинка шире рамки в полтора раза,
   рамка квадратная и срезает низ. */
.card .pic { aspect-ratio: 1 / 1; overflow: hidden; }

.card .pic img {
  display: block;
  width: 150%;
  max-width: none;
  height: auto;
  margin: -8% 0 0 -25%;
}

/* Две пары часов в плитке шире телефона: крупный план срезал бы их края. */
.card .pic.whole img { width: 100%; margin: -10% 0 0; }

.card h3,
.card p { padding: 0 1.4rem; }

.card h3 { font-size: 1.25rem; margin: 1.1rem 0 0.45rem; }
.card p { color: var(--dim); font-size: var(--s); margin: 0; }

.also {
  max-width: 44rem;
  margin: 2.25rem auto 0;
  text-align: center;
  color: var(--dim);
}

/* MARK: Настройка */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 2.5rem auto 0;
  max-width: 68rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.steps li {
  counter-increment: step;
  margin: 0;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  font: 600 var(--xs)/1 var(--mono);
  letter-spacing: 0.09em;
  color: var(--brand);
  margin-bottom: 1rem;
}

.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--dim); margin: 0; }

/* MARK: Сравнение */

.table {
  max-width: 76rem;
  margin: 2.5rem auto 0;
  overflow-x: auto;
}

.compare table { margin: 0; font-size: var(--s); line-height: 1.5; }

.compare th,
.compare td { padding: 1rem; }

.compare tr > :first-child { padding-left: 0; }

.compare thead th {
  font: 640 var(--s)/1.3 var(--sans);
  white-space: normal;
  vertical-align: bottom;
  color: var(--ink);
}

.compare thead small {
  display: block;
  font: 400 var(--xs)/1.4 var(--mono);
  color: var(--dim);
  margin-top: 0.2rem;
}

.compare tbody th {
  font: 600 var(--xs)/1.5 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: normal;
  width: 13%;
}

.compare td { width: 21.75%; }

/* Наша колонка подсвечена полосой, а не рамкой: рамка вокруг одного столбца
   таблицы читается выделенным текстом, полоса — выбором. */
.compare .us {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--ink);
  padding-left: 1rem;
}

.compare thead .us { border-top: 2px solid var(--brand); border-radius: 12px 12px 0 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 12px 12px; }

.sources {
  max-width: 52rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: var(--xs);
  color: var(--dim);
}

.sources a { color: var(--dim); }

/* На узком экране таблица в пять колонок не читается: строка становится
   карточкой, а подпись колонки — строкой перед значением. */
@media (max-width: 47.99rem) {
  .compare table,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; width: auto; }

  .compare thead { display: none; }

  .compare tr {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
  }

  .compare tbody th { border: 0; padding: 0 0 0.5rem; width: auto; }

  .compare td {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 0.65rem 0;
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    font: 600 var(--xs)/1.4 var(--mono);
    color: var(--dim);
    margin-bottom: 0.15rem;
  }

  .compare td.us { padding: 0.65rem 0.75rem; border-radius: 10px; border-top: 0; }
  .compare td.us::before { color: var(--brand); }
}

/* MARK: Данные */

.home .paths { margin-top: 1.5rem; }

.trust {
  list-style: none;
  padding: 0;
  margin: 2.5rem auto 0;
  max-width: 76rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 44rem) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .trust { grid-template-columns: repeat(3, 1fr); } }

.trust li {
  margin: 0;
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  color: var(--dim);
  font-size: var(--s);
}

.trust b {
  display: block;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 640;
  margin-bottom: 0.45rem;
}

/* MARK: Цена */

.plans {
  display: grid;
  gap: 1.25rem;
  max-width: 60rem;
  margin: 2.5rem auto 0;
}

@media (min-width: 46rem) { .plans { grid-template-columns: repeat(2, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-raised);
}

.plan.pick {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 45%, var(--line) 100%) border-box;
  box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--brand) 90%, transparent);
}

.plan h3 {
  font: 600 var(--xs)/1.5 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
}

.plan .sum {
  font: 700 clamp(2.6rem, 5vw, 3.4rem)/1 var(--sans);
  letter-spacing: -0.04em;
  margin: 0 0 0.5rem;
}

.plan .sum span { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.plan .per { color: var(--dim); font-size: var(--s); margin-bottom: 1.5rem; }

.plan ul { list-style: none; padding: 0; margin: 0 0 1.75rem; flex: 1; }

.plan li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}

/* Галочка нарисована рамкой, а не знаком: знак в каждом шрифте свой. */
.plan li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35em;
  width: 0.35rem;
  height: 0.7rem;
  border: solid var(--add);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.plan .button { text-align: center; }

.fine {
  max-width: 44rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: var(--s);
  color: var(--dim);
}

/* MARK: Вопросы */

.qa-list { max-width: 48rem; margin: 2rem auto 0; border-top: 1px solid var(--line); }

.qa-list details { border-bottom: 1px solid var(--line); }

.qa-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

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

.qa-list summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border: solid var(--dim);
  border-width: 0 2px 2px 0;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.qa-list details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.qa-list summary:hover { color: var(--brand); }
.qa-list details p { color: var(--dim); margin: 0 0 1.35rem; max-width: 42rem; }

.more-link { text-align: center; margin: 1.75rem 0 0; }

.home .closing .actions { justify-content: center; }

/* MARK: Движение главной */

@media (prefers-reduced-motion: no-preference) {
  .opening > * { animation: enter 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .opening > h1 { animation-delay: 0.08s; }
  .opening > .lede { animation-delay: 0.18s; }
  .opening > .actions { animation-delay: 0.28s; }
  .opening > .meta { animation-delay: 0.36s; }
  .opening > .release { animation-delay: 0.44s; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature .copy,
    .feature .shot,
    .card,
    .steps li,
    .trust li,
    .plan,
    .chips,
    .table {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 60%;
    }

    .feature .shot,
    .card:nth-child(2n),
    .steps li:nth-child(2),
    .trust li:nth-child(2n),
    .plan:nth-child(2) { animation-range: entry 12% entry 72%; }
  }
}

@media (hover: hover) {
  .card, .trust li, .steps li {
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.18s ease;
  }

  .card:hover,
  .trust li:hover,
  .steps li:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  }
}