/* ──────────────────────────────────────────────────────────────────────────
   NetherBorn — витрина

   Палитра из docs/стиль.md. Здесь названы только те цвета, которые вёрстка
   правда берёт: остальные оттенки сезона лежат в документе, а не мёртвыми
   строчками тут. Правило оттуда действует и на витрине — одно яркое пятно на
   блок, градиент редкость. Фиолетовый несёт всё главное, банановый только
   светит в подложке первого экрана, остальное держится на белом и лавандовом
   листе — не на тенях и не на обводках.

   Движение — по правилам скилла animate: только transform и opacity, кривые
   не выдуманные, длительность интерфейса до 300 мс, выход быстрее входа.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Палитра сезона */
  --violet:      #8B5CF6;
  /* Заливка кнопок глубже палитрового фиолетового: на светлом листе и на
     снимке первого экрана #8B5CF6 выцветает и читается бледнее, чем он есть. */
  --violet-btn:  #7A46EB;
  --green:       #17A45F;   /* только для отметки «скопировано» */

  /* Поверхности.
     Обводок у блоков нет вовсе, поэтому лист под ними заметно глубже белого:
     карточка отделяется от страницы собственным цветом, а не рамкой. */
  --bg:        #F2EFF8;
  --bg-sunk:   #E6E1F1;
  --surface:   #FFFFFF;
  --surface-2: #F1EDF9;

  /* Текст */
  --ink:      #191428;
  --ink-2:    #6B6480;
  --ink-3:    #A29AB4;

  /* Скругления */
  --r-lg: 24px;
  --r-xl: 30px;

  /* Кривые. Взяты готовыми, не подобраны на глаз. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-pop:    cubic-bezier(.34, 1.42, .64, 1);   /* лёгкий перелёт, только для отметки */

  --wrap: 1120px;
  --pad: 24px;
  /* Столбец каталога и соцсетей. Уже рамы страницы и стоит по центру:
     товару не нужна вся ширина, ему нужно, чтобы его было удобно читать. */
  --col: 860px;
}

/* ── Сброс ─────────────────────────────────────────────────────────────── */

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

html {
  /* Серая вспышка под пальцем — то же наведение, только на телефоне.
     Раз состояний нет нигде, нет и её. */
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  /* Место под полосу прокрутки занято всегда. Без этого страница под открытой
     модалкой становится шире на её толщину, строки перевёрстываются, и текст
     прыгает — при том, что человек всего лишь нажал кнопку. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: Onest, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.011em;
  /* Текст не выделяется: витрину читают, а не растаскивают по кускам. Поле
     ввода — исключение, там без выделения не поправишь опечатку. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Табличные цифры тут были лишними: они выравнивают знаки по одинаковой
     клетке, и в крупной цене узкая единица получала клетку в ширину девятки —
     между цифрами появлялись дыры. Ровные столбцы чисел на витрине не нужны. */
  font-variant-numeric: proportional-nums;
}

body.is-locked {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3 { margin: 0; letter-spacing: -.028em; line-height: 1.14; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
/* Команда без подложки. С плашкой её внутреннее поле отбивало следующую
   запятую или точку, и знак повисал сам по себе: «/menu , и набранное».
   Отличает команду моноширинный набор и цвет основного текста; цвет
   ссылок сюда не годится, команда не ссылка. */
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--ink);
  letter-spacing: 0;
}

button, input {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 8px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Видно только читалке с экрана */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Картинки не отдаются: их нельзя ни перетащить, ни выделить, ни вызвать на
   них меню — при выключенных событиях указателя браузер не считает их целью
   нажатия и не предлагает «Сохранить изображение». Обход есть всегда (адрес
   файла, снимок экрана, инструменты разработчика), но случайное сохранение
   это закрывает. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}


.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 24px -10px rgba(74, 30, 107, .4);
  transform: translate(-50%, -160%);
  transition: transform 220ms var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

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

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.014em;
  cursor: pointer;
  user-select: none;
}
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 17px; }
.btn--block { width: 100%; }

.btn--primary {
  --btn-bg: var(--violet-btn);
  --btn-fg: #fff;
}
/* Знак на кнопке заливается цветом её надписи — значит, белым */
.btn__mark {
  width: 21px; height: 21px;
  flex: none;
  fill: currentColor;
  stroke: none;
}
/* Заглушки. Якорь без адреса никуда не ведёт — значит, и вести себя должен как
   текст: руки под курсором быть не должно, иначе кнопка обещает нажатие, за
   которым ничего нет. Фокус такой якорь и так не берёт, это браузер делает сам. */
a:not([href]) { cursor: default; }

/* Крестик шторки. Подложки нет: на белой шапке она была лишней плашкой, и
   держит крестик теперь только собственный размер. Клетка шире значка —
   палец попадает по 44 пикселям, глаз видит 23. */
.sheet__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: -6px -10px -6px 0;
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.sheet__close .icon { width: 23px; height: 23px; stroke-width: 2; }

/* ── Копирование: значок переходит в галочку и возвращается ───────────────
   Два значка в одной клетке. Меняются прозрачностью и масштабом, поэтому
   переход можно оборвать на середине — он продолжится с текущего вида, а не
   дёрнется в начало. */

.swap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  flex: none;
}
.swap .icon {
  position: absolute;
  width: 19px; height: 19px;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.swap__from { color: var(--violet); }
.swap__to {
  color: var(--green);
  stroke-width: 2.6;
  opacity: 0;
  transform: scale(.5);
}
.is-copied .swap__from { opacity: 0; transform: scale(.5); }
.is-copied .swap__to   { opacity: 1; transform: scale(1); }

/* ── Шапка ─────────────────────────────────────────────────────────────── */

/* Шапка не полосой во всю ширину, а плашкой: она плывёт над страницей, и под
   ней видно и снимок мира, и то, что прокручивается. Полоса от края до края
   разрезала бы картинку пополам ровно там, где та светлее всего. */
/* Плашка — это сама шапка, а не блок внутри неё. Размытие подложки должно
   лежать на том же элементе, что и прилипание: разнесённые по двум узлам, они
   в Chrome перестают рисоваться, стоит странице отъехать. */
.topbar {
  position: sticky;
  top: 12px;
  z-index: 60;
  width: min(var(--wrap), calc(100% - var(--pad) * 2));
  margin: 12px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  transition:
    background-color 320ms var(--ease-out),
    opacity 420ms var(--ease-out);
}
/* Отъехали от начала страницы — плашка плотнее: под ней уже не светлая
   подложка первого экрана, а заголовки и кнопки, которые она перекрывает.
   0.88, а не 0.78: размытие подложки есть не везде и не всегда — в старых
   браузерах и при включённом «понижении прозрачности» его нет вовсе, — и
   тогда фиолетовая кнопка первого экрана просвечивала бы сквозь плашку. */
.topbar.is-stuck { background: rgba(255, 255, 255, .88); }
/* Дошли до каталога — плашка растворяется. Дальше по странице она только
   закрывает товар: смотреть в ней нечего, а вернуться наверх можно прокруткой. */
.topbar.is-gone { opacity: 0; pointer-events: none; }

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 9px 9px 22px;
}

.brand { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav a { padding: 8px 14px; }

.addr {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

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

.hero { position: relative; padding: 72px 0 100px; }

/* Свет из-под заголовка. Уходит выше первого экрана — под шапку: обрежь его
   по её нижнему краю, и на месте среза встанет заметная полоса. */
.hero__glow {
  position: absolute;
  top: -120px; left: 0; right: 0;
  height: 820px;
  pointer-events: none;
  /* Свет гаснет книзу маской. Без неё он кончается ровной горизонталью на
     нижней границе блока — под заголовком каталога появляется шов. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.55) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.55) 62%, transparent 100%);
  background:
    radial-gradient(620px 440px at 16% 40%, rgba(139, 92, 246, .16), transparent 70%),
    radial-gradient(540px 400px at 84% 32%, rgba(255, 209, 92, .22), transparent 68%),
    radial-gradient(760px 360px at 50% 80%, rgba(196, 167, 255, .14), transparent 72%);
}

/* Картинка первого экрана. Наклонена чуть-чуть и растворяется с обоих концов:
   сверху — чтобы под шапкой не было видно её края, снизу — чтобы она уходила
   в каталог без шва. Это фон в стилях, а не <img>: его нельзя ни перетащить,
   ни сохранить из меню. */
.hero__art {
  position: absolute;
  top: -170px; left: 0; right: 0;
  height: 1000px;
  /* Обрезка по бокам обязательна: наклонённая картинка шире экрана, и без неё
     страница получает горизонтальную прокрутку на десятки пикселей. */
  overflow: clip;
  pointer-events: none;
  opacity: .32;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 42%, rgba(0, 0, 0, .4) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 42%, rgba(0, 0, 0, .4) 72%, transparent 100%);
}
/* Сам снимок с запасом по краям: наклон съедает углы, и запас их закрывает. */
.hero__art::before {
  content: "";
  position: absolute;
  inset: -7% -9%;
  background: url(hero.webp?v=a1302b6f3e) 50% 44% / cover no-repeat;
  transform: rotate(-2.5deg);
}

.hero__inner { position: relative; text-align: center; }

.hero__logo { margin: 0; font-size: 0; }
.hero__logo img {
  display: block;
  width: min(560px, 100%);
  height: auto;
  margin-inline: auto;
}

.hero__lead {
  margin: 28px auto 0;
  max-width: 58ch;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
/* Кнопка одна на весь экран — ей и вес побольше */
.hero__actions .btn { padding: 0 44px; }

/* ── Страница, которой нет ─────────────────────────────────────────────────
   Тот же снимок и то же свечение, что и на первом экране: человек ошибся
   адресом, а не ушёл с сайта, и выглядеть это должно так же. */

.miss {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 40px 0 80px;
}
.miss__inner { position: relative; text-align: center; }

/* Число — картинка, набранная тем же шрифтом, что и заголовок в самой игре.
   Ширина в vw, высота из соотношения сторон: место под неё занято ещё до
   загрузки, поэтому строка ниже не подпрыгивает, когда картинка придёт. */
.miss__code {
  display: block;
  width: clamp(230px, 56vw, 410px);
  height: auto;
  margin: 0 auto;
}

/* ── Отметка об удачной покупке ────────────────────────────────────────
   Круг с галочкой над заголовком на странице возврата. Показывается,
   только когда касса подтвердила выдачу.

   Рисуется линией, а не появляется готовой: круг обводится, следом
   проходит галочка. Это занимает полсекунды и читается как «сделано
   сейчас», а не «так и лежало». Ничего не мигает и не отскакивает -
   движение одно, в одну сторону, и на этом заканчивается.

   Длины штрихов заданы числами: у круга r=34 это 2*пи*34, у галочки
   сумма двух отрезков. SVG не даёт взять их из CSS, а считать в скрипте
   ради двух чисел, которые не меняются, - лишний код на странице.

   Заливка круга не анимируется отдельно: она приходит вместе с самим
   значком и служит мягкой подложкой, чтобы линия не висела в пустоте. */
.done {
  display: block;
  width: clamp(76px, 19vw, 96px);
  height: auto;
  margin: 0 auto 20px;
  animation: done-in 560ms cubic-bezier(.2, .8, .3, 1) both;
}
.done[hidden] { display: none; }

.done__ring {
  fill: rgba(122, 70, 235, .07);
  stroke: var(--violet-btn);
  stroke-width: 4;
  stroke-dasharray: 213.63;
  stroke-dashoffset: 213.63;
  /* От верхней точки, по часовой. Без поворота круг начинал бы обводиться
     справа, и получалось бы движение вбок, а не вокруг. */
  transform: rotate(-90deg);
  transform-origin: 48px 48px;
  animation: done-draw 760ms cubic-bezier(.3, .7, .2, 1) 60ms forwards;
}

.done__tick {
  fill: none;
  stroke: var(--violet-btn);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: done-draw 400ms cubic-bezier(.3, .7, .2, 1) 580ms forwards;
}

@keyframes done-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes done-draw {
  to { stroke-dashoffset: 0; }
}

.miss__lead {
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-2);
}
.miss__actions { margin-top: 34px; }

/* ── Страницы документов ───────────────────────────────────────────────
   Оферта, политика, возврат. Ни снимка, ни свечения за текстом: это то
   немногое на сайте, что читают подряд и внимательно, и картинка под
   строками мешала бы. Столбец узкий нарочно — длинная строка теряется на
   переносе, и глаз соскакивает на соседнюю. */

/* Снимок и подсветка те же, что на первом экране: человек ушёл читать
   документ, а не покинул сайт, и выглядеть это должно так же. Оба слоя
   гаснут книзу маской, так что длинный текст читается по чистому листу. */
.doc { position: relative; padding: 40px 0 96px; }
.doc__inner { position: relative; max-width: 720px; }

/* Снимок тут ниже и тише, чем на первом экране, и кончается раньше. Там под
   ним крупный логотип, здесь мелкий сплошной текст: по нему видно каждую
   ветку на картинке, и читать становится тяжело. Держится он у заголовка,
   а сам документ идёт по чистому листу. */
.doc .hero__art { height: 560px; opacity: .2; }
.doc .hero__glow { height: 520px; opacity: .7; }

.doc__back {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--violet-btn);
}

.doc__title { font-size: clamp(28px, 4vw, 38px); font-weight: 600; letter-spacing: -.02em; }

.doc__stamp {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-3);
}

.doc__inner > h2 {
  margin-top: 34px;
  font-size: 19px;
  font-weight: 600;
}

.doc__inner > p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.doc__inner > ul {
  margin-top: 12px;
  padding-left: 20px;
  list-style: disc;
}

.doc__inner > p a {
  color: var(--violet-btn);
  font-weight: 500;
}

.doc__inner > li {
  margin-top: 7px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── Правила ───────────────────────────────────────────────────────────
   Восемьдесят пунктов подряд на плоском листе читаются как простыня, поэтому
   каждый раздел лежит на своей белой карточке, как товары в каталоге.

   Отступы взяты из одного ряда: 8, 16, 24, 32. Ничего промежуточного, иначе
   блоки расходятся на пару пикселей, и глаз это ловит, даже не понимая чем.

   Столбец номера один на всю страницу: 34 пикселя под номер плюс 14 зазора.
   На эти же 48 отбит и заголовок раздела, и перечни, и лестница, и таблица,
   так что весь текст стоит на одной вертикали.
   ────────────────────────────────────────────────────────────────────── */

.doc__lead {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.doc__lead:first-of-type { font-size: 19px; color: var(--ink); }

/* Оглавление: разделы ищут глазами чаще, чем читают подряд. */
.toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 32px;
}
.toc__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
}
.toc__num {
  flex: none;
  width: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--violet-btn);
  text-align: right;
}

.rule {
  margin-top: 16px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.rule:first-of-type { margin-top: 32px; }

/* margin: 0 обязателен. Заголовки документов выше по файлу задают h2 отступ
   сверху, и он складывался с полем карточки: над номером раздела получалась
   пустая полоса в шесть десятков пикселей. */
/* margin: 0 обязателен. Заголовки документов выше по файлу задают h2 отступ
   сверху, и он складывался с полем карточки: над номером раздела получалась
   пустая полоса в шесть десятков пикселей. */
.rule__head {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -.01em;
}
/* Номер в строку с названием, как «1. Вход и аккаунт». Подложки нет: кружок
   рядом с крупным заголовком читался как отдельный значок, а не как номер. */
/* Табличных цифр тут быть не должно. Они делают все знаки одной ширины, и
   узкая единица получает такие поля, что «11.» читается как «1 1 .». В
   столбце номеров это нужно, чтобы колонка не плыла, а в строке заголовка
   вредит. */
.rule__num { color: var(--violet-btn); }

/* Высота строки числом, а не множителем: у номера и у текста разный кегль,
   и при множителе их первые строки вставали с разницей в пару пикселей. */
.rule__item {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-2);
}
.rule__id {
  flex: none;
  width: 34px;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  color: var(--ink-3);
  /* Табличных цифр тут нет нарочно. Колонку держит своя ширина и
     выравнивание вправо, а не одинаковая ширина знаков; зато с ними узкая
     единица получала такие поля, что «11.5» читалось вразрядку. */
  text-align: right;
}
/* min-width: 0 обязателен: без него длинное слово не переносится и распирает
   колонку, а вместе с ней и карточку. */
.rule__text { flex: 1; min-width: 0; }

.rule__item a { color: var(--violet-btn); font-weight: 500; }

/* Можно и нельзя. Подпись стоит НАД перечнем, а не сбоку: сбоку она уводила
   плашки во второй отступ, и они не совпадали с текстовым столбцом. */
.allow {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.allow__body { display: grid; gap: 8px; }
.allow__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
}
.allow--yes .allow__label { color: var(--green); }
.allow--no  .allow__label { color: #C0392B; }
.allow__list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Плашки перечня и лестницы одного размера: разные читались бы как разные
   по смыслу, хотя это просто списки. */
.chip,
.ladder__step {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* Лестница наказаний. Стрелка стоит рядом с плашкой, а не внутри неё, но
   лежит с ней в одной обёртке: внутри она распирала плашку на две строки,
   а сама по себе начинала новую строку со стрелки. */
.ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  margin-left: 48px;
}
.ladder__pair { display: inline-flex; align-items: center; gap: 8px; }
.ladder__arrow { color: var(--ink-3); font-size: 15px; line-height: 20px; }
/* Последняя ступень цветом: до неё лестница ещё поправима, дальше нет. */
.ladder__step--end {
  background: #F6E7E4;
  color: #A8382A;
  font-weight: 500;
}

/* За что и сколько. Подложка глубже белого: карточка раздела уже белая, а
   обводок на сайте нет. */
.tariff {
  margin-top: 16px;
  margin-left: 48px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  overflow: hidden;
}
.tariff__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 22px;
}
/* Разделитель градиентом, а не линией: сплошная черта у краёв упирается в
   скругление и торчит. */
.tariff__row + .tariff__row {
  background-image: linear-gradient(to right,
    rgba(74, 30, 107, 0), rgba(74, 30, 107, .1) 6%,
    rgba(74, 30, 107, .1) 94%, rgba(74, 30, 107, 0));
  background-size: 100% 1px;
  background-repeat: no-repeat;
}
.tariff__what { color: var(--ink-2); }
.tariff__how { color: var(--ink); font-weight: 500; text-align: right; }

/* ── Секции ────────────────────────────────────────────────────────────── */

.section { padding: 76px 0; }
.section--last { padding-bottom: 96px; }

.section__head {
  max-width: 620px;
  margin: 0 auto 34px;
  text-align: center;
}
.section__title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; }
.section__lead { margin-top: 12px; color: var(--ink-2); }

.note {
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--ink-3);
}
.note a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: rgba(139, 92, 246, .4);
  text-underline-offset: 3px;
}

/* ── Сегменты ──────────────────────────────────────────────────────────── */

.segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  padding: 3px;
  margin: 0 auto 30px;
  border-radius: 999px;
  background: var(--bg-sunk);
  --seg-count: 2;
  --seg-index: 0;
}
.segmented__pill {
  position: absolute;
  top: 3px; left: 3px; bottom: 3px;
  width: calc((100% - 6px) / var(--seg-count));
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(74, 30, 107, .14);
  transform: translateX(calc(var(--seg-index) * 100%));
  transition: transform 320ms var(--ease-in-out);
}
.segmented__btn {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 240ms var(--ease-out);
}
.segmented__btn.is-active { color: var(--ink); }

/* ── Панели каталога ───────────────────────────────────────────────────── */

.panel[hidden] { display: none; }
.panel.is-entering { animation: panelIn 300ms var(--ease-out) both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Карточки ──────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
/* Две карточки не должны становиться вдвое шире трёх */
.cards--two { max-width: var(--col); margin-inline: auto; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.card__top { display: flex; align-items: center; gap: 16px; }

/* Капсула нарисована крупными пикселями, и мельчить её незачем: она тут не
   значок при заголовке, а сам товар. */
.card__art {
  width: 68px;
  height: 69px;
  flex: none;
  object-fit: contain;
}
.card__head { min-width: 0; }
.card__title { font-size: 19px; }
.card__sub { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }


/* Зазоры внутри ценника заданы каждый отдельно, а не общим gap. Разрядка у
   крупного числа отрицательная, и последняя цифра утягивает за собой пробел:
   при общем зазоре расстояние до знака рубля гуляло от цены к цене. */
.price {
  display: flex;
  align-items: baseline;
  margin-top: 20px;
}
.price__num {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.price__cur {
  margin-left: 6px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
}
.price__note {
  margin-left: 12px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-3);
}

.feats { margin: 20px 0 24px; display: grid; gap: 11px; }
.feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-2);
}
.feats .icon { width: 18px; height: 18px; stroke-width: 2.4; color: var(--violet); }

/* Особое: строка в цвете приставки, которую даёт этот срок. Цвет переходит —
   при смене срока строка перекрашивается, а не подменяется. */
/* Селектор с li нарочно: у строки списка свой цвет, и без него он перебивает
   особое обратно в серый. */
.feats li.feats__special {
  color: var(--tone, var(--violet));
  font-weight: 600;
  transition: color 320ms var(--ease-out);
}
.feats .feats__special .icon { color: inherit; }

/* Кнопка всегда у нижнего края: в ряду карточки выходят вровень.
   Отступ сверху даёт нижнее поле соседа, а не сама кнопка. */
.card .btn { margin-top: auto; }
.cards--two .price { margin-bottom: 24px; }

/* ── Срок подписки ─────────────────────────────────────────────────────────
   Одна карточка и линия с тремя точками. Возможности у сроков одни и те же:
   меняется только сам срок, поэтому он и вынесен в отдельный орган
   управления, а список возможностей стоит рядом неподвижно. */

.tier {
  position: relative;
  display: grid;
  gap: 30px;
  max-width: var(--col);
  margin-inline: auto;
  padding: 30px;
  border-radius: var(--r-xl);
  background: var(--surface);
}
@media (min-width: 720px) {
  .tier { grid-template-columns: 1.06fr 1fr; gap: 36px; }
}

.tier__cap {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}

/* Новый срок показывается сразу, а не после проводов старого: текст меняется
   в тот же кадр и мягко всплывает. Ждать полсекунды ради красивого исчезания
   значит отвечать на нажатие с задержкой. */
.tier__info { margin-top: 12px; }
.tier__info.is-fresh { animation: freshIn 300ms var(--ease-out); }
@keyframes freshIn {
  from { opacity: .2; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Название срока и приставка к нику стоят на одной строке и на одной базовой
   линии: приставка — не подпись к сроку, а то, что человек получит. */
/* Приставка — не слово, а картинка, и на базовую линию она садится нижним
   краем: получается, что она висит выше строчных букв и ниже прописных.
   Поэтому выравнивание по середине названия. */
.tier__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tier__name { font-size: 25px; }
.tier__sub { margin-top: 4px; font-size: 14px; color: var(--ink-3); }

.tier__side { display: flex; flex-direction: column; }
.tier__side .feats { margin: 0 0 24px; }
.tier__side .btn { margin-top: auto; }

/* Линия с точками */

.track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  --i: 0;
}
.track__line {
  position: absolute;
  top: 15px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 3px;
  border-radius: 999px;
  background: var(--bg-sunk);
}
.track__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--violet);
  transform: scaleX(calc(var(--i) / 2));
  transform-origin: left;
  transition: transform 380ms var(--ease-in-out);
}

.dot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 8px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dot__mark {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px rgba(74, 30, 107, .16), 0 0 0 0 rgba(139, 92, 246, 0);
  transition:
    background-color 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out),
    transform 380ms var(--ease-out);
}
.dot__cap {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 260ms ease;
}

/* Пройденные точки закрашены, но спокойны: горит только та, на которой стоишь */
.dot.is-passed .dot__mark {
  background: var(--violet);
  box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 0 rgba(139, 92, 246, 0);
}
.dot[aria-checked="true"] .dot__mark {
  background: var(--violet);
  box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 7px rgba(139, 92, 246, .15);
  transform: scale(1.18);
}
.dot[aria-checked="true"] .dot__cap { color: var(--ink); font-weight: 600; }


/* ── Список-группа (iOS) ───────────────────────────────────────────────── */

.list {
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
/* Разделители едва видны и уходят слева направо от серого к фиолетовому:
   линия не должна спорить со строкой, которую она отделяет. */
.row + .row::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(107, 100, 128, .07), rgba(139, 92, 246, .17));
}
.row--input { cursor: text; padding: 4px 18px; }

.row__main { flex: 1; min-width: 0; }
/* Выбранная строка темнеет цветом, а не начертанием. Переход по font-weight
   браузер не доигрывает — вес остаётся на исходном, и вместо перехода выходит
   щелчок. Цвет переходит честно, а темнеет ровно то же самое. */
.row__title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 300ms var(--ease-out);
}
.row__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.row__price { font-size: 16px; font-weight: 600; white-space: nowrap; }
/* Выгода — зелёным. Банановый на витрине означает награду, а не экономию, и
   рядом с ценой читался бы как предупреждение. */
.row__save {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(23, 164, 95, .13);
  color: #10794A;
  font-size: 12px;
  font-weight: 700;
}

/* Отметка выбора — та же точка, что на линии сроков: кольцо заливается, и в
   нём появляется белая середина. Она приходит с лёгким перелётом, поэтому
   выбор ощущается щелчком, а не подменой картинки. */
.pick {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.7px rgba(74, 30, 107, .18);
  transition:
    background-color 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}
.pick__in {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #fff;
  opacity: 0;
  transform: scale(.35);
  transition:
    opacity 200ms var(--ease-out),
    transform 440ms var(--ease-pop);
}
.row[aria-checked="true"] .pick {
  background: var(--violet);
  box-shadow: inset 0 0 0 1.7px var(--violet);
}
.row[aria-checked="true"] .pick__in { opacity: 1; transform: scale(1); }
.row[aria-checked="true"] .row__title { color: var(--ink); }

/* Значок способа оплаты. Без плитки под ним: логотипы стоят прямо на строке. */
.pay {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
}
.pay img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
/* Пояснение к оплате всегда одной длины строки — значки и точки выбора в
   обеих строках стоят на одной высоте. */
.row .row__sub { min-height: 18px; }

.input {
  width: 100%;
  min-height: 46px;
  border: 0;
  background: none;
  font-size: 16.5px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.input::placeholder { color: var(--ink-3); }

/* Ошибка: набранный ник плавно краснеет и так же плавно возвращается к своему
   цвету. Одна волна на полторы секунды, симметричная — вход и выход одинаковы.
   Ничего не двигается и ничего не появляется: разметка стоит на месте. */
.input.is-bad { animation: nickBad 1500ms ease-in-out; }
.input.is-bad::placeholder { animation: nickBadHint 1500ms ease-in-out; }

@keyframes nickBad {
  0%   { color: var(--ink); }
  50%  { color: #E0313E; }
  100% { color: var(--ink); }
}
@keyframes nickBadHint {
  0%   { color: var(--ink-3); }
  50%  { color: #E0313E; }
  100% { color: var(--ink-3); }
}

/* Отказ кассы над кнопкой. Серым, а не красным: красное на витрине это
   ошибка в том, что набрал человек, и о ней уже сказало само поле. Здесь же
   говорит сервер, и говорит спокойно. */
.snag {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Кнопка на время отправки. Не жмётся и заметно тише, но остаётся на месте:
   исчезни она, лист прыгнул бы. */
.btn:disabled {
  opacity: .55;
  pointer-events: none;
}

/* ── Соцсети ───────────────────────────────────────────────────────────── */

.socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: var(--col);
  margin-inline: auto;
}

.social {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
}

.social__logo {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
}
.social__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.social__name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.social__go {
  width: 18px; height: 18px;
  flex: none;
  color: var(--ink-3);
}
/* Наведение на адрес сервера и на соцсети ничего не меняет. Это ссылки, а не
   органы управления: у них нет состояния, которое стоило бы показывать
   заранее. Ответ приходит на нажатие. */

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

.footer {
  padding: 44px 0 calc(52px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
}
/* Подвал в два столбца: слева то, куда можно пойти, справа то, что положено
   написать. Одной колонкой это шло сплошным списком, где ссылки и правовая
   строка стояли вперемешку. */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 22px 48px;
}
.footer__side { display: grid; gap: 14px; }
.footer__top { display: flex; align-items: center; gap: 26px; }
.footer__nav { display: flex; gap: 22px; font-size: 15px; color: var(--ink-2); }
.footer__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--ink-2);
}
.footer__docs a {
  text-decoration: underline;
  text-decoration-color: rgba(139, 92, 246, .35);
  text-underline-offset: 3px;
}

.footer__legal {
  display: grid;
  gap: 6px;
  max-width: 38ch;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  color: var(--ink-3);
}

/* ── Затемнение и модалка ──────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(35, 22, 55, .32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.scrim.is-open { opacity: 1; }

.sheet-wrap[hidden] { display: none; }

.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: 0 40px 80px -28px rgba(52, 26, 84, .38);
  pointer-events: auto;
  overflow: hidden;

  /* Вход по центру. Масштаб мелкий и слой готовится заранее: без will-change
     браузер перерисовывает текст и значки на каждом кадре масштабирования, и
     крестик в углу — он дальше всех от центра — заметно дрожит. */
  opacity: 0;
  transform: scale(.985);
  will-change: transform, opacity;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.sheet:focus { outline: none; }
.sheet.is-open { opacity: 1; transform: scale(1); }
/* Выход быстрее входа */
.sheet.is-closing { transition-duration: 190ms; }

.sheet__grip { display: none; }

.sheet__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px 20px;
}
.sheet__title { flex: 1; min-width: 0; font-size: 21px; }

.sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 22px 10px;
  -webkit-overflow-scrolling: touch;
}

.field + .field { margin-top: 24px; }

/* display: block обязателен. У поля ника подпись — это <label>, а он строчный,
   и вертикальные поля у строчного элемента просто не применяются: заголовок
   «НИК В ИГРЕ» прилипал к полю, а «СРОК» стоял в десяти пикселях от списка. */
.field__label {
  display: block;
  margin: 0 0 10px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}

.sheet__foot {
  position: relative;
  padding: 16px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
/* Не линия, а рассеивание: содержимое уходит под подбородок, растворяясь в
   нём. Линия тут резала бы список ровно там, где он ещё продолжается. */
.sheet__foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(248, 246, 252, .92), rgba(248, 246, 252, 0));
}

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.total__label { font-size: 15px; color: var(--ink-2); }
.total__value { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
/* Новая сумма показывается сразу и мягко всплывает — та же лесенка, что у
   срока в каталоге. Прятать старую перед показом новой значило бы отвечать
   на нажатие с задержкой. */
.total__value.is-fresh { animation: freshIn 300ms var(--ease-out); }

/* ── Шторка на узком экране ────────────────────────────────────────────── */

@media (max-width: 620px) {
  .sheet-wrap { padding: 0; place-items: end stretch; }

  .sheet {
    width: 100%;
    max-height: 92dvh;
    border-radius: 26px 26px 0 0;
    /* Уходит вниз и возвращается вниз — тем же путём */
    opacity: 1;
    transform: translateY(100%);
    transition: transform 460ms var(--ease-drawer);
  }
  .sheet.is-open { transform: translateY(0); }
  .sheet.is-closing { transition-duration: 300ms; }
  .sheet.is-dragging { transition: none; }

  .sheet__grip {
    display: grid;
    place-items: center;
    padding: 10px 0 2px;
    touch-action: none;
    cursor: grab;
  }
  .sheet__grip span {
    width: 38px; height: 5px;
    border-radius: 999px;
    background: rgba(74, 30, 107, .18);
  }
  /* Шапку листа тянут пальцем, поэтому прокрутке она не отдаётся */
  .sheet__head { padding-top: 10px; touch-action: none; }
}

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

/* Спрятано только там, где скрипт работает: без него страница читается сразу */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

/* ── Меньше движения ───────────────────────────────────────────────────── */

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

  /* Остаётся то, что помогает понять смену состояния: прозрачность и цвет.
     Убирается всё, что двигает и масштабирует. */
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .sheet, .sheet.is-open, .sheet.is-closing { transform: none; transition: opacity 200ms ease; }
  .swap .icon { transition: opacity 200ms ease; }
  .swap__to, .is-copied .swap__from { transform: none; }
  .track__fill, .dot__mark { transition: background-color 200ms ease, box-shadow 200ms ease; }
  .pick__in { transition: opacity 200ms ease; transform: none; }
  .row[aria-checked="true"] .pick__in { transform: none; }
  .dot[aria-checked="true"] .dot__mark { transform: none; }
  .row__title { transition: none; }
  .total__value.is-fresh { animation: none; }
  /* Значок остаётся, но приходит готовым: смысл в нём, а не в рисовании. */
  .done { animation: none; }
  .done__ring, .done__tick { animation: none; stroke-dashoffset: 0; }
  .panel.is-entering, .tier__info.is-fresh { animation: none; }
  .segmented__pill { transition: none; }
}

/* ── Мелкие экраны ─────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav { display: none; }
  .addr { margin-left: auto; }
}

@media (max-width: 620px) {
  :root { --pad: 18px; }
  body { font-size: 16px; }

  .topbar { top: 8px; margin-top: 8px; }
  .topbar__inner { padding: 7px 7px 7px 16px; gap: 10px; }

  /* Адрес сервера длиннее домена сайта — play.netherborn.ru против
     netherborn.ru, пять лишних знаков. На 320 точках прежние размеры выносили
     кнопку за плашку шапки, к самому краю экрана. Сжимаем и надпись, и кнопку:
     обрезать адрес нельзя, его затем и показывают, чтобы прочесть целиком. */
  .brand { font-size: 16px; }
  .addr { height: 36px; padding: 0 11px; gap: 7px; font-size: 13px; }
  .addr .swap { width: 17px; height: 17px; }
  .addr .icon { width: 17px; height: 17px; }
  .hero { padding: 40px 0 64px; }
  .hero__glow { height: 620px; opacity: .72; }
  .hero__art { top: -140px; height: 780px; opacity: .26; }
  .hero__actions { justify-content: stretch; }
  .hero__actions .btn { flex: 1 1 auto; }

  .section { padding: 56px 0; }
  .section--last { padding-bottom: 72px; }

  /* Правила: номер в строку, а не отдельным столбцом. В столбце 48
     пикселей на телефоне тексту остаётся полоска, и каждый пункт
     вытягивается в лесенку из одного-двух слов. Отступы те же 8 и 16. */
  .rule { padding: 20px 18px; border-radius: var(--r-lg); }
  .rule__head { font-size: 19px; line-height: 26px; }
  .rule__item, .allow { display: block; margin-top: 16px; }
  .rule__id { display: inline; width: auto; margin-right: 8px; text-align: left; }
  .rule__text { display: inline; }
  .allow__body { display: block; margin-top: 8px; }
  .allow__label { display: block; margin-bottom: 8px; line-height: 20px; }
  .ladder, .tariff { margin-left: 0; }
  .tariff__row { grid-template-columns: 1fr; gap: 4px; }
  .tariff__how { text-align: left; }
  .toc { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr; gap: 20px; }
  .footer__legal { max-width: none; text-align: left; }
  .footer__top { gap: 20px; }

  .segmented { display: grid; width: 100%; }
  .segmented__btn { padding: 0 12px; }

  .cards--two { max-width: none; }
  .card { padding: 22px; }
  .social { padding: 20px; }
}