/* ============================================================================
   MXTM · Surface S (Site) — компоненты и раскладка лендинга
   Токены — assets/css/tokens.css. Здесь ни одного «голого» цвета: любое
   значение цвета берётся токеном, иначе расхождение с ДС кабинета станет
   невидимым для гейта.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Сброс */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: var(--xf-font);
  font-size: var(--s-body);
  line-height: var(--mxtm-leading);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 3px;
  border-radius: var(--s-r-xs);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-sp-4); top: -100px; z-index: 200;
  background: var(--s-accent); color: var(--s-text-on-accent);
  padding: var(--s-sp-3) var(--s-sp-5); border-radius: var(--s-r-pill);
  font-weight: 700; transition: top var(--s-dur) var(--s-ease);
}
.skip-link:focus { top: var(--s-sp-4); }

/* ------------------------------------------------------- 2. Типографика */
/* Начертание и интерлиньяж — ПОРОЛЬНО, как у исходника, а не общим правилом:
   у него h1 набран 500-м, h2 — 400-м, и разница видна. Общее правило с одним
   весом стирало её и делало h2 плотнее и тяжелее исходного. */
/* Длинное слово в заголовке ПЕРЕНОСИТСЯ на узком экране. Без этого одно
   французское «téléchargement.» на 320 px расширяло документ на пиксель —
   ровно тот дефект, который прячет глобальный overflow-x и ловит только
   проверка переполнения. Правило общее для всех заголовков: длинное слово
   бывает в любом языке, и точечный фикс под одну локаль вернулся бы со
   следующим переводом. */
.h1, .h2, .h3, .h4, .h5 { font-family: var(--xf-display); overflow-wrap: break-word; }
.h1 { font-size: var(--s-h1); font-weight: 500; line-height: 1;    letter-spacing: normal; }
.h2 { font-size: var(--s-h2); font-weight: 400; line-height: 1.2;  letter-spacing: -.03em; }
.h3 { font-size: var(--s-h3); font-weight: 600; line-height: 1.2;  letter-spacing: -.03em; font-family: var(--xf-font); }
.h4 { font-size: var(--s-h4); font-weight: 500; line-height: 1;    letter-spacing: normal; }
.h5 { font-size: var(--s-h5); font-weight: 600; line-height: 1.3;  letter-spacing: -.72px; font-family: var(--xf-font); }

/* Подсвеченное слово в заголовке. Тег выбран <i> вслед за исходной витриной, но
   КУРСИВОМ он здесь не работает: у Unbounded наклонного начертания нет вовсе, и
   браузер подделал бы его наклоном контуров. Тег несёт смысл «выделено», начертание
   снимается явно, выделение делает цвет. */
.h1 i, .h2 i, .h3 i { font-style: normal; color: var(--s-accent); }

/* Подзаголовок — `subheading` исходника: Manrope 500, 24/1.3, ls -3%.
   Было clamp(16…22) при 400-м весе — легче и мельче, из-за чего подзаголовок
   не держал строку под 90-пиксельным заголовком. */
.lead   { font-size: var(--s-sub); font-weight: 500; line-height: 1.3; letter-spacing: -.03em; color: var(--s-text-2); }
.muted  { color: var(--s-text-2); }
.dim    { color: var(--s-text-3); }
.small  { font-size: var(--s-small); }
.tiny   { font-size: var(--s-tiny); }
.accent { color: var(--s-accent); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-sp-2);
  font-size: var(--s-tiny); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-accent);
  padding: 6px var(--s-sp-3); border-radius: var(--s-r-pill);
  background: var(--s-accent-dim); border: 1px solid var(--s-accent-glow);
}

/* --------------------------------------------------------- 3. Каркас */
.container {
  width: 100%;
  max-width: calc(var(--s-container) + var(--s-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

/* Вертикальный ритм — исходной витрины, и теперь он ДЕЙСТВИТЕЛЬНО такой.
   Прежняя редакция объявляла «140/60», а на экране давала 140 на любой ширине:
   `.section + .section { padding-top: 0 }` съедал верхний отступ у всех секций,
   кроме первой, и мобильного переопределения не было. Замер показал 140 против
   260 у исходника на десктопе (54 %) и 140 против 120 на телефоне (+17 %) —
   то есть блоки слипались там, где исходник дышит, и расходились там, где он
   собран. Значение 60 не встречалось ни на одной ширине. */
.section { padding-block: 120px; position: relative; scroll-margin-top: 96px; }

@media (max-width: 991px) { .section { padding-block: 60px; } }

/* Финальный призыв — единственная секция с несимметричным отступом, как у
   исходника: сверху вдвое меньше, потому что он идёт сразу за FAQ и читается
   как его продолжение, а не как новый раздел. */
.section--cta { padding-top: 60px; padding-bottom: 120px; }
@media (max-width: 991px) { .section--cta { padding-top: 60px; } }
/* Ширина шапки секции НЕ ограничивается: у исходника `max-width: none`, и
   заголовок занимает всю полезную ширину контейнера. Прежние 780 px были наши
   и ломали заголовок на две-три строки там, где у исходника одна, причём
   число строк менялось от локали к локали. */
.section__head { margin-bottom: 60px; }
.section__head.center { margin-inline: auto; text-align: center; }
.section__head .h2 + p { margin-top: var(--s-sp-4); }

/* --------------------------------------------------------- 4. Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-sp-2);
  /* Форма кнопки — исходной витрины: скруглённый прямоугольник 16 px с
     вертикальным паддингом, а не пилюля фиксированной высоты. Гарнитура тоже
     его — Unbounded: кнопка на этой витрине читается как элемент заголовочного
     слоя, и Manrope делал её частью набора. */
  padding: 20px 32px;
  border-radius: var(--s-r-md);
  font-family: var(--xf-display); font-weight: 600; font-size: 16px;
  line-height: 1.3; letter-spacing: -.72px;
  text-align: center; cursor: pointer;
  transition: background var(--s-dur) var(--s-ease),
              color var(--s-dur) var(--s-ease),
              border-color var(--s-dur) var(--s-ease),
              box-shadow var(--s-dur) var(--s-ease),
              transform var(--s-dur) var(--s-ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--s-accent); color: var(--s-text-on-accent); }
.btn--primary:hover { background: var(--s-accent-hi); box-shadow: var(--s-shadow-accent); }

.btn--ghost { border: 1px solid var(--s-accent); color: var(--s-accent); }
.btn--ghost:hover { background: var(--s-accent-dim); }

.btn--quiet { border: 1px solid var(--s-line); color: var(--s-text); }
.btn--quiet:hover { border-color: var(--s-text-3); background: var(--s-surface-2); }

.btn--lg { padding: 20px 32px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* ------------------------------------------------------- 5. Шапка */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding-block: 14px;          /* исходник: 14, у нас было 16 */
  transition: background var(--s-dur) var(--s-ease),
              backdrop-filter var(--s-dur) var(--s-ease),
              border-color var(--s-dur) var(--s-ease);
  /* Нижней линии у шапки НЕТ. У исходника прилипшая шапка отделяется от
     страницы только размытием, и это работает лучше: линия под полупрозрачным
     слоем читается как край второго блока поверх первого. */
}
.header.is-stuck {
  background: rgba(26, 25, 25, .70);
  backdrop-filter: blur(35.5px);   /* исходник: 35.5, у нас было 18 — вдвое слабее */
}
.header__inner { display: flex; align-items: center; gap: var(--s-sp-5); }

.logo { flex: 0 0 auto; display: block; color: var(--s-text); }
/* ЛОГОТИП — САМАЯ КРУПНАЯ ОДИНОЧНАЯ ДЕЛЬТА С ИСХОДНИКОМ, и она не мелочь:
   22 px против 14 давали площадь знака в 2,59 раза больше, а на 390 знак
   занимал 40 % ширины шапки против 30 %. Отношение «заголовок к логотипу»
   падало с 6,4 до 3,0 — то есть ровно то, из-за чего первый экран читался
   крупным при МЕНЬШЕМ заголовке. */
.logo svg { height: 14px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 24px; margin-inline: auto; }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--s-text-2);
  transition: color var(--s-dur) var(--s-ease);
  padding-block: var(--s-sp-2);
}
/* Наведение красит пункт В АКЦЕНТ, а не в белый: у исходника так, и это
   единственное место шапки, где цвет что-то сообщает. */
.nav a:hover, .nav a.is-current { color: var(--s-accent); }

.header__actions { display: flex; align-items: center; gap: var(--s-sp-3); }
.header__actions .btn {
  padding: 8px 20px; font-size: 16px; font-weight: 500;
  border-radius: var(--s-r-pill);   /* в шапке кнопка остаётся пилюлей: при высоте
                                       36 px радиус 32 у исходника даёт ровно её */
}
/* Вход у исходника ЛАЙМОВЫЙ, а не белый. Это не украшение: рядом стоит
   лаймовая кнопка регистрации, и одинаковый цвет связывает два входа в
   кабинет в одну группу, отделяя её от навигации. */
.header__login { font-size: 16px; font-weight: 500; color: var(--s-accent); padding: 8px 12px; }
.header__login:hover { color: var(--s-accent-hi); }

/* Переключатель языка */
.lang { position: relative; }
.lang__toggle {
  display: inline-flex; align-items: center; gap: var(--s-sp-2);
  padding: 0; font-size: 14px; font-weight: 500; text-transform: uppercase;
}
.lang__toggle img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.lang__toggle svg { width: 16px; height: 16px; transition: transform var(--s-dur) var(--s-ease); }
.lang.is-open .lang__toggle svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 10;
  min-width: 190px; padding: var(--s-sp-2);
  background: var(--s-surface-2); border: 1px solid var(--s-line);
  border-radius: var(--s-r-md); box-shadow: var(--s-shadow-card);
  display: none;
}
.lang.is-open .lang__menu { display: block; }
.lang__menu a {
  display: flex; align-items: center; gap: var(--s-sp-3);
  padding: var(--s-sp-3); border-radius: var(--s-r-sm); font-size: 15px;
}
.lang__menu a:hover { background: var(--s-surface-3); }
.lang__menu a[aria-current="true"] { color: var(--s-accent); }
.lang__menu img { width: 20px; height: 20px; border-radius: 50%; }

/* Бургер и мобильное меню */
.burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: var(--s-r-sm); border: 1px solid var(--s-line);
}
.burger svg { width: 22px; height: 22px; stroke: var(--s-accent); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--s-bg);
  padding: var(--s-sp-5) var(--s-gutter) var(--s-sp-7);
  display: flex; flex-direction: column; gap: var(--s-sp-6);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .38s var(--s-ease), visibility .38s;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__close { width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--s-line); border-radius: var(--s-r-sm); }
.mobile-menu__close svg { width: 20px; height: 20px; stroke: var(--s-text); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: var(--s-sp-2); }
.mobile-menu__nav a {
  font-family: var(--xf-display); font-size: 28px; font-weight: 500;
  padding: var(--s-sp-3) 0; border-bottom: 1px solid var(--s-line-soft);
}
.mobile-menu__actions { display: grid; gap: var(--s-sp-3); }
.mobile-menu__langs { display: flex; flex-wrap: wrap; gap: var(--s-sp-2); }
.mobile-menu__langs a {
  display: inline-flex; align-items: center; gap: var(--s-sp-2);
  min-height: 44px; padding: 0 var(--s-sp-4);
  border: 1px solid var(--s-line); border-radius: var(--s-r-pill); font-size: 15px;
}
.mobile-menu__langs a[aria-current="true"] { border-color: var(--s-accent); color: var(--s-accent); }
.mobile-menu__langs img { width: 20px; height: 20px; border-radius: 50%; }

/* ------------------------------------------------------- 6. Hero */
/* ВЫСОТА ПЕРВОГО ЭКРАНА ИДЁТ ОТ СОДЕРЖИМОГО, А НЕ ОТ ОКНА. Прежняя редакция
   тянула его на 94svh и добивала контент вниз через justify-content: flex-end —
   из-за этого над заголовком копилось 205 px воздуха вместо 170, а на низких
   окнах экран растягивался под окно, а не под то, что на нём написано.
   У исходника: секция 50 сверху, внутренний блок 120 сверху и снизу, между
   элементами один зазор 40. */
.hero {
  position: relative;
  padding-top: 50px;
  background: var(--s-bg) center top / cover no-repeat;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 25, 25,.86) 0%, rgba(26, 25, 25,.35) 34%, rgba(26, 25, 25,.92) 100%),
    radial-gradient(90% 60% at 20% 40%, rgba(26, 25, 25,.75) 0%, rgba(26, 25, 25,0) 70%);
}
.hero > * { position: relative; z-index: 1; }
/* Вертикаль собрана ОДНИМ зазором флексбокса, а не маргинами на каждом
   элементе: у исходника ровно так, и это единственное число, которое надо
   держать в голове, правя первый экран. */
.hero__inner {
  padding-block: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  text-align: center;
}
.hero .h1 { max-width: 900px; }
.hero__sub { max-width: 760px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-sp-3); justify-content: center; }
.hero__note { margin-top: calc(var(--s-sp-4) - 40px); }   /* примечание липнет к кнопке */

/* Бегущая строка инструментов */
/* ТРЕТИЙ, «МЕЛКИЙ» ЯРУС ТИПОГРАФИКИ. У исходника подписи ленты 12 и 10 px —
   заметно мельче навигации (14). У нас они были 15 и 13, то есть РАВНЫ ей, и
   ярус исчезал: 28 карточек на экране весили как текст, а не как фон. */
.ticker {
  margin-top: 0;
  position: relative;
  /* Дорожка шире окна по построению — 4420 px при окне 992 — и обязана
     обрезаться СВОИМ контейнером. Прежде её прятал только глобальный
     overflow-x: hidden у body, то есть общий глушитель, который заодно прячет
     любое БУДУЩЕЕ переполнение страницы. Собственная обрезка делает её
     локальной и наблюдаемой.

     ШИРИНА ЗАДАНА ЯВНО, и это не дубль: первый экран стал колоночным флексом с
     выравниванием по центру, а флекс-элемент берёт ширину по содержимому. Без
     этой пары строк сама .ticker раздувалась до 4420 px, и overflow обрезал
     её ДЕТЕЙ, не спасая страницу. Дефект проявлялся ровно на 992 — первой
     ширине выше брейкпоинта, — и глобальный глушитель прятал его на всех
     остальных. */
  width: 100%;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; gap: var(--s-sp-3);
  animation: ticker-scroll 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__item {
  display: flex; align-items: center; gap: var(--s-sp-3);
  padding: var(--s-sp-3) var(--s-sp-4);
  background: rgba(32, 32, 32, .72); border: 1px solid var(--s-line-soft);
  border-radius: var(--s-r-md); backdrop-filter: blur(8px);
  white-space: nowrap;
}
.ticker__item img { width: 28px; height: 28px; }
.ticker__sym { font-weight: 700; font-size: 12px; line-height: 1.065; }
.ticker__name { font-size: 10px; line-height: 1.095; color: var(--s-text-2); }

/* ------------------------------------------------------- 7. Why us */
.why__grid {
  display: grid; gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.why__list { display: grid; gap: var(--s-sp-5); }
.why__item { display: flex; gap: var(--s-sp-4); align-items: flex-start; }
.why__item img { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 2px; }
.why__item-title { font-weight: 700; margin-bottom: 4px; }
.why__media img { width: 100%; height: auto; }

/* ------------------------------------------------------- 8. Челленджи */
.plans__tabs {
  display: flex; gap: var(--s-sp-2); padding: 6px;
  background: var(--s-surface-1); border: 1px solid var(--s-line);
  border-radius: var(--s-r-pill); width: max-content; max-width: 100%;
  margin: 0 auto clamp(24px, 3vw, 40px);
  overflow-x: auto; scrollbar-width: none;
}
.plans__tabs::-webkit-scrollbar { display: none; }
.plans__tab {
  min-height: 52px; padding: 0 clamp(18px, 3vw, 44px);
  border-radius: var(--s-r-pill);
  font-family: var(--xf-display); font-size: clamp(14px, 1.4vw, 19px); font-weight: 500;
  color: var(--s-text-2); white-space: nowrap;
  transition: background var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease),
              box-shadow var(--s-dur) var(--s-ease);
}
.plans__tab:hover { color: var(--s-text); }
.plans__tab[aria-selected="true"] {
  background: var(--s-accent-dim); color: var(--s-text);
  box-shadow: inset 0 0 0 1px var(--s-accent), 0 0 32px var(--s-accent-glow);
}

.plan {
  border: 1px solid var(--s-accent);
  border-radius: var(--s-r-xl);
  padding: clamp(16px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(187,255,0,.05), rgba(187,255,0,0) 220px), var(--s-bg-alt);
}
.plan[hidden] { display: none; }

/* Размеры счёта */
.plan__sizes {
  display: flex; gap: var(--s-sp-2); padding: 6px;
  background: var(--s-surface-1); border: 1px solid var(--s-line);
  border-radius: var(--s-r-pill); margin-bottom: var(--s-sp-5);
  overflow-x: auto; scrollbar-width: none;
}
.plan__sizes::-webkit-scrollbar { display: none; }
.plan__size {
  flex: 1 0 auto; min-height: 52px; padding: 0 var(--s-sp-5);
  border-radius: var(--s-r-pill); font-weight: 700; font-size: 16px;
  color: var(--s-text-2); white-space: nowrap;
  transition: background var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease);
}
.plan__size:hover:not([disabled]) { color: var(--s-text); background: var(--s-surface-3); }
.plan__size[aria-selected="true"] { background: var(--s-accent); color: var(--s-text-on-accent); }
.plan__size[disabled] { color: var(--s-text-3); cursor: not-allowed; opacity: .55; }
.plan__size[disabled]::after {
  content: attr(data-soon); display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--s-text-3); margin-top: -4px;
}

/* Шапка выбранного продукта */
.plan__banner {
  display: flex; align-items: center; gap: var(--s-sp-4);
  padding: var(--s-sp-4) var(--s-sp-5);
  background: var(--s-surface-2); border-radius: var(--s-r-lg);
  margin-bottom: var(--s-sp-5);
}
.plan__banner-icon { width: 64px; height: 64px; flex: 0 0 auto; }
.plan__banner-text { flex: 1 1 auto; min-width: 0; }
.plan__banner-title { font-family: var(--xf-display); font-size: clamp(18px, 2vw, 24px); font-weight: 500; }
.plan__banner-sub { color: var(--s-text-2); font-size: var(--s-small); margin-top: 2px; }
.plan__banner-price {
  font-family: var(--xf-display); font-size: clamp(24px, 3.4vw, 44px); font-weight: 500;
  white-space: nowrap;
}
.plan__banner-price small { display: block; font-family: var(--xf-font); font-size: 12px;
  font-weight: 600; color: var(--s-text-3); text-align: right; letter-spacing: .04em; }

/* Таблица условий */
.plan__table { border-radius: var(--s-r-lg); overflow: hidden; }
.ptable { width: 100%; }
.ptable thead th {
  background: var(--s-surface-3); padding: var(--s-sp-4) var(--s-sp-5);
  font-size: var(--s-small); font-weight: 700; text-align: center;
  color: var(--s-text); white-space: nowrap;
}
.ptable thead th:first-child { text-align: left; }
.ptable tbody td {
  padding: var(--s-sp-4) var(--s-sp-5); text-align: center;
  border-bottom: 1px solid var(--s-line-soft); font-size: 15px;
}
.ptable tbody td:first-child { text-align: left; }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr:hover td { background: var(--s-surface-1); }
.ptable__label { display: inline-flex; align-items: center; gap: var(--s-sp-2); }
.ptable__hint {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--s-line); color: var(--s-text-3);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.ptable__hint:hover { border-color: var(--s-accent); color: var(--s-accent); }
.ptable__row-note td {
  padding: 0 var(--s-sp-5) var(--s-sp-4);
  text-align: left; color: var(--s-text-3); font-size: 13px;
  border-bottom: 1px solid var(--s-line-soft);
}
.ptable__row-note[hidden] { display: none; }
.ptable .is-none { color: var(--s-text-3); }
.ptable .is-yes { color: var(--s-accent); font-weight: 700; }

.plan__foot { margin-top: var(--s-sp-5); display: grid; gap: var(--s-sp-4); }
.plan__disclaimer { color: var(--s-text-3); font-size: 13px; }

/* Мобильный вид таблицы условий: стадия = карточка */
.pcards { display: none; }
.pcard {
  border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
  overflow: hidden; margin-bottom: var(--s-sp-4);
}
.pcard__head {
  background: var(--s-surface-3); padding: var(--s-sp-4);
  font-weight: 700; font-size: 15px;
}
.pcard__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sp-4);
  padding: var(--s-sp-3) var(--s-sp-4); border-top: 1px solid var(--s-line-soft);
  font-size: 15px;
}
.pcard__row dt { color: var(--s-text-2); }
.pcard__row dd { margin: 0; font-weight: 600; text-align: right; }

/* ------------------------------------------------------- 9. Шаги */
/* Числа блока сняты с исходной витрины браузером, а не подобраны: карточка
   410 px высотой, сетка 3 × 24 px, подпись Manrope 18/1.3 в 16 px от края,
   единственный брейкпоинт 991 px и сразу одна колонка (двухколоночного
   состояния у исходника нет — правило в CSS есть, но перебивается соседним в
   том же медиаблоке).

   Пропорция карточки здесь СВЯЗАНА С КАДРОМ: файлы 378 × 412, карточка на
   1440 — 384 × 410, то есть `cover` срезает 8,5 px сверху и ничего по бокам.
   Прежняя редакция держала карточку в 280 px высотой и landscape-пропорции, и
   портретный кадр в ней обрезался до неузнаваемости. */
.steps__grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.step {
  min-height: 410px;
  display: flex; align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-md);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
/* Подпись адресуется КЛАССОМ, а не тегом, — это осталось от времени, когда в
   карточке жил ещё и кружок с номером, тоже <span>: селектор по тегу накрывал
   оба и перебивал номеру position. Номера больше нет, но класс сохранён: он
   не даёт следующему вложенному <span> унаследовать стиль подписи. */
.step__text { font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--xf-fog); }

/* Кнопка блока — блочная во всю ширину, как в исходнике; форма и гарнитура
   тоже его: прямоугольник с радиусом 16 и Unbounded, а не наша пилюля с
   Manrope. Акцентный цвет при этом НАШ (`--s-accent`), и это сознательное
   отличие: токены витрины наследуют foundation ДС кабинета дословно, и
   подгонять их под чужой `#B6F802` нельзя — расхождение ловит гейт. */
.steps__cta {
  display: flex; width: 100%; min-height: 0;
  margin-top: 60px; padding: 20px 32px;
  border-radius: var(--s-r-md);
  font-family: var(--xf-display); font-size: 16px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.72px;
}

/* ------------------------------------------ 10. Выплаты и правила риска */
/* Число колонок НЕ задаётся числом в разметке, и это не стилистическая правка.
   Инлайновый --cards-cols:3 перебивал медиазапросы по специфичности: на 360 px
   ряд оставался трёхколоночным и расширял документ на 43 px, а прятал это
   overflow-x у body — то есть дефект был не устранён, а скрыт от глаза.
   auto-fit с минимумом колонки решает ту же задачу без второго носителя числа. */
.cards {
  display: grid; gap: var(--s-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cards-min, 320px), 100%), 1fr));
}
.card {
  background: var(--s-surface-1); border: 1px solid var(--s-line);
  border-radius: var(--s-r-lg); padding: clamp(20px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: var(--s-sp-3);
  transition: border-color var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease);
}
.card:hover { border-color: var(--s-accent-glow); transform: translateY(-2px); }
/* Кегль снижен, а перенос смягчён по находке снимка: при 44px и overflow-wrap:anywhere
   слово «Prohibited» рвалось посреди буквы («Prohibit / ed»). anywhere рвёт жадно и
   к тому же обнуляет минимальную ширину колонки, из-за чего сетка набирала лишнюю
   дорожку. break-word рвёт только когда иначе не помещается. */
.card__value {
  font-family: var(--xf-display); font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500; color: var(--s-accent); line-height: 1.05;
  overflow-wrap: break-word;
}
.card__title { font-weight: 700; font-size: 17px; }
.card__text { color: var(--s-text-2); font-size: 15px; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-sp-4); }
.fact {
  padding: var(--s-sp-5); border-radius: var(--s-r-lg);
  background: var(--s-surface-1); border: 1px solid var(--s-line);
}
.fact__value { font-family: var(--xf-display); font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500; color: var(--s-accent); line-height: 1.05; }
.fact__label { margin-top: var(--s-sp-2); color: var(--s-text-2); font-size: 14px; }


/* -------------------------------------------- 10b. «We invest in leaders»
   Геометрия снята с исходной витрины браузером: две равные колонки с зазором
   48, окно ленты 560 px (ровно пять карточек по 100 плюс четыре зазора по 15),
   шаг ленты 115 px, цикл восьми карточек 18,4 с.

   SWIPER НЕ ПЕРЕНЕСЁН НАМЕРЕННО. Исходник крутит ленту библиотекой на 150 КБ;
   у витрины правило «ни одного внешнего ресурса», и ради вертикальной
   карусели восьми строк библиотека не окупается. Тайминг воспроизведён
   @keyframes: держать 2000 мс, ехать 300 мс — это те же числа, что стоят в
   data-swiper исходника. Потеряны прокрутка колесом и перетаскивание;
   взамен лента замирает под курсором и под фокусом с клавиатуры. */
.leaders__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.leaders__feed { min-width: 0; }   /* без этого колонка грида распирается лентой */

.leaders__viewport { position: relative; height: 560px; overflow: hidden; }
/* Шторки берут ФОН СТРАНИЦЫ токеном. У исходника они залиты литералом его
   фона; скопированный литерал дал бы у нас светлые полосы сверху и снизу —
   шов, который замечают не сразу. */
.leaders__viewport::before,
.leaders__viewport::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100px;
  z-index: 2; pointer-events: none;
}
.leaders__viewport::before { top: 0; background: linear-gradient(180deg, var(--s-bg), transparent); }
.leaders__viewport::after  { bottom: 0; background: linear-gradient(0deg,  var(--s-bg), transparent); }

.leaders__track {
  display: flex; flex-direction: column;
  animation: leaders-step 18.4s ease infinite;
}
@keyframes leaders-step {
  0%,    10.87% { transform: translate3d(0, 0, 0); }
  12.5%, 23.37% { transform: translate3d(0, -115px, 0); }
  25%,   35.87% { transform: translate3d(0, -230px, 0); }
  37.5%, 48.37% { transform: translate3d(0, -345px, 0); }
  50%,   60.87% { transform: translate3d(0, -460px, 0); }
  62.5%, 73.37% { transform: translate3d(0, -575px, 0); }
  75%,   85.87% { transform: translate3d(0, -690px, 0); }
  87.5%, 98.37% { transform: translate3d(0, -805px, 0); }
  100%          { transform: translate3d(0, -920px, 0); }
}
.leaders__viewport:hover .leaders__track,
.leaders__viewport:focus-within .leaders__track { animation-play-state: paused; }

.leaders__slide {
  flex: 0 0 auto; height: 100px; margin-bottom: 15px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 0 24px;
  border-radius: var(--s-r-md);
  border: 1px solid var(--s-line-soft);
  background: var(--s-surface-2);
}
.leaders__slide-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.leaders__slide-who {
  font-family: var(--xf-display); font-size: 16px; font-weight: 500;
  line-height: 1.3; color: var(--xf-fog);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaders__slide-sum {
  font-family: var(--xf-display); font-size: 24px; font-weight: 500;
  line-height: 1; color: var(--s-text); flex: 0 0 auto;
}
.leaders__slide-where {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--s-text-2);
}
/* Флаг — квадрат со скруглением, как у исходника; `object-fit` обязателен:
   перенесённые SVG имеют РАЗНЫЕ исходные пропорции (от 1:1 до 3:2), и без него
   британский флаг растянулся бы, а японский сжался. */
.leaders__slide-where img {
  width: 16px; height: 16px; flex: 0 0 16px;
  border-radius: 4px; object-fit: cover;
}

.leaders__content { display: flex; flex-direction: column; gap: 40px; }
.leaders__lead { font-size: var(--s-body); line-height: 1.3; color: var(--s-text-2); }
/* ТРИ ПОКАЗАТЕЛЯ СТОЯТ В ОДНУ СТРОКУ — решение PO 23.09.2026. Сетка из трёх
   равных дорожек, как у исходника, а не flex с переносом: перенос давал 2 + 1
   и разное число строк по локалям.
   Чтобы строка держалась на всех пяти языках, укорочены ПОДПИСИ (упиралось в
   них, а не в значения) и разрешён перенос подписи внутри своей дорожки. Само
   значение по-прежнему неразрывно: «Up to 90%», разорванное по пробелу,
   читается как два разных числа. */
.leaders__numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.leaders__num { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.leaders__num-value {
  font-family: var(--xf-display); font-size: 26px; font-weight: 500;
  line-height: 1.3; color: var(--s-accent);
  /* РЯД ИЗ ТРЁХ ДОРОЖЕК ЖЁСТКИЙ, а значение внутри своей дорожки переносится.
     Раньше было наоборот — неразрывное значение и переносящийся ряд, — и это
     давало 2 + 1 с разным числом строк по локалям. Замер после укорочения
     подписей: при 26 px в одну строку умещаются четыре локали из пяти;
     французскому «Jusqu’à 90%» не хватает трёх пикселей. Перенос между
     оговоркой и числом безвреден, разрыв между числом и знаком процента —
     нет, поэтому неразрывен только он (в контенте стоит узкий неразрывный
     пробел там, где он нужен). */
  overflow-wrap: break-word;
}
.leaders__num-text {
  font-family: var(--xf-display); font-size: 16px; font-weight: 300;
  line-height: 1.3; color: var(--s-text);
}
.leaders__note {
  margin-top: 40px; font-size: var(--s-tiny); line-height: 1.5; color: var(--s-text-3);
}

@media (prefers-reduced-motion: reduce) {
  /* Глобальное правило сжимает длительность до .001 мс — лента без этой строки
     не замерла бы, а МГНОВЕННО прыгнула в конец. Нужна остановка, а не ускорение. */
  .leaders__track { animation: none; }
}

@media (max-width: 991px) {
  .leaders__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .leaders__content { order: -1; }          /* текст выше ленты, как в исходнике */
  .leaders__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaders__num-value { font-size: 24px; }
  .leaders__slide { padding: 0 16px; }
  .leaders__slide-sum { font-size: 18px; }
}

/* Секция терминала — ЧЕТЫРЕ дорожки, а не три: карточек четыре, и при
   умолчании 320 px последняя оставалась одна в ряду. Число дорожек не
   задаётся числом — задаётся минимальная ширина карточки, из которой сетка
   выводит его сама; это тот же приём, которым чинилось скрытое переполнение
   ряда карточек (урок defect-hidden-by-its-own-remedy). */
#terminal .cards { --cards-min: 250px; }

/* Правил риска — ЧЕТЫРЕ карточки (25.09.2026 сняты «2% на идею» и «Новости»),
   и при умолчании 320 px последняя оставалась одна в ряду. Четыре в ряд, как у
   терминала, здесь не годятся: текст карточек длинный, а у «Запрещено» — перечень
   в полтора десятка строк. Минимум 400 px даёт два ряда по два и одну колонку
   уже, чем влезли бы две; трёх дорожек не бывает ни на одной ширине. */
#rules .cards { --cards-min: 400px; }

/* Выплат — ПЯТЬ карточек (25.09.2026 снят лимит капитала), и сетка давала
   3 + 2 с пустой ячейкой. Пять не делится ни на какую ширину ряда, поэтому
   дорожек нет вовсе: flex с минимальной шириной карточки, и неполный последний
   ряд растягивается на ширину контейнера. 300 px выбраны замером, а не на глаз:
   больше 288 — иначе в ряд 1200 влезают четыре и пятая остаётся одна во всю
   ширину; не больше 317 — иначе три перестают помещаться уже на 1024.
   min-width: 0 — то, что в сетке делал min(…, 100%): без него длинное слово
   распёрло бы карточку. */
#payouts .cards { display: flex; flex-wrap: wrap; }
#payouts .card { flex: 1 1 300px; min-width: 0; }

/* ---------------------------------------------------- 11. FAQ */
.faq__list { display: grid; gap: var(--s-sp-3); max-width: 960px; margin-inline: auto; }
.acc {
  background: var(--s-surface-1); border: 1px solid var(--s-line);
  border-radius: var(--s-r-lg); overflow: hidden;
  transition: border-color var(--s-dur) var(--s-ease);
}
.acc.is-open { border-color: var(--s-accent-glow); }
.acc[hidden] { display: none; }
.acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-sp-4); padding: var(--s-sp-5); text-align: left;
  font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; min-height: 64px;
}
.acc__icon {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--s-line);
  transition: transform var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease),
              background var(--s-dur) var(--s-ease);
}
.acc__icon svg { width: 16px; height: 16px; stroke: currentColor; }
.acc.is-open .acc__icon { transform: rotate(180deg); background: var(--s-accent);
  border-color: var(--s-accent); color: var(--s-text-on-accent); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height .34s var(--s-ease); }
.acc__body-inner { padding: 0 var(--s-sp-5) var(--s-sp-5); color: var(--s-text-2); }
.acc__body-inner > * + * { margin-top: var(--s-sp-3); }
.acc__body-inner ul { display: grid; gap: var(--s-sp-2); }
.acc__body-inner li { padding-left: var(--s-sp-5); position: relative; }
.acc__body-inner li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--s-accent);
}
.acc__body-inner code {
  font-family: var(--xf-mono); font-size: .92em;
  background: var(--s-surface-3); padding: 2px 6px; border-radius: 6px;
}
.faq__more { margin: var(--s-sp-5) auto 0; display: flex; }

/* ---------------------------------------------------- 12. Финальный CTA */
/* КОЛЬЦА БЫЛИ ТРЕМЯ ПУСТЫМИ <span> И ДАВАЛИ 1100 px ПУСТОТЫ НАД ЗАГОЛОВКОМ.
   Механизм: `.cta__rings` объявлял `position: absolute`, а стоявшее НИЖЕ в этом
   же файле `.cta > * { position: relative }` имело ту же специфичность (0,1,0)
   — универсальный селектор веса не добавляет — и побеждало как более позднее.
   Декорация возвращалась в поток квадратом 1100 × 1100 (на 390 — 400 × 400),
   стояла первым потомком и выталкивала заголовок ровно на свою высоту.
   Ни один статический гейт этого не видел: разметка верна, CSS валиден,
   пустота — следствие порядка правил.

   Чинится не подпоркой, а снятием носителя: кольца теперь фон, как в исходной
   витрине. Она рисует их одним SVG (1180 × 365) — три концентрических дуги с
   градиентом и размытая подсветка снизу, — и этот файл перенесён дословно; в
   нём заменён только акцент, `#B6F802` → наш `#BBFF00`, девять вхождений.
   Заодно из разметки ушли три пустых <span>, у которых не было смысла и
   доступного имени. */
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--s-r-md);            /* 16px, как у исходника; было 32 */
  padding: 48px 32px;                      /* исходник: 48/32 на десктопе */
  text-align: center;
  background-color: var(--s-surface-2);
  background-image: url('../img/cta/rings.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid var(--s-line);
}
.cta > * { position: relative; z-index: 1; }
/* Типографика и ритм блока — числа исходника. Заголовок здесь легче и
   крупнее общего `.h2` витрины (400 против 500, 64 против 52 px), потому что
   исходник набирает финальный призыв именно так; переопределяется точечно,
   общий `.h2` не трогается — он обслуживает восемь других секций. */
.cta .h2 { font-size: 64px; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; }
.cta .lead { margin: 16px auto 60px; max-width: 620px; font-size: 16px; line-height: 1.3; color: var(--s-text); }
.cta .btn {
  display: flex; width: 100%; max-width: 500px; margin-inline: auto;
  padding: 20px 32px; min-height: 0; border-radius: var(--s-r-md);
  font-family: var(--xf-display); font-size: 16px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.72px;
}
@media (max-width: 991px) {
  .cta .h2 { font-size: 32px; }
  .cta .lead { margin-bottom: 32px; font-size: 14px; }
  .cta .btn { padding: 20px; }
}
@media (max-width: 767px) { .cta { padding: 32px 24px; } }

/* -------------------------------------------------------- 13. Подвал */
.footer {
  border-top: 1px solid var(--s-line);
  padding-block: clamp(40px, 5vw, 72px);
  margin-top: clamp(56px, 8vw, 120px);
  background: var(--s-bg-alt);
}
.footer__top {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr) auto;
  align-items: start;
}
.footer__brand .logo { margin-bottom: var(--s-sp-4); }
.footer__mail {
  display: inline-flex; align-items: center; gap: var(--s-sp-2);
  padding: var(--s-sp-3) var(--s-sp-4); border-radius: var(--s-r-pill);
  background: var(--s-surface-2); font-size: 15px;
}
.footer__mail svg { width: 18px; height: 18px; }
.footer__mail:hover { background: var(--s-surface-3); }
.footer__copy { margin-top: var(--s-sp-4); color: var(--s-text-3); font-size: 13px; }

.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sp-6); }
.footer__col-title { font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--s-text-3); margin-bottom: var(--s-sp-3); }
.footer__col ul { display: grid; gap: var(--s-sp-2); }
.footer__col a { font-size: 15px; color: var(--s-text-2); }
.footer__col a:hover { color: var(--s-accent); }

/* Значки соцсетей — размер и подача исходной витрины: 48 × 48, зазор 24, без
   подложки, без рамки и без радиуса. Сам значок несёт свой круг, поэтому
   вторая обводка вокруг него выглядела двойной рамкой, а 20 px внутри
   44-пиксельной кнопки делали ряд мелким и пустым.
   Цель нажатия при этом не пострадала: 48 × 48 больше минимальных 44. */
.socials { display: flex; flex-wrap: wrap; gap: 24px; }
.socials a {
  width: 48px; height: 48px; display: grid; place-items: center;
  transition: opacity var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease);
}
.socials a:hover { opacity: .8; transform: translateY(-2px); }
.socials img, .socials svg { width: 48px; height: 48px; }

.footer__legal {
  margin-top: clamp(32px, 4vw, 56px); padding-top: var(--s-sp-6);
  border-top: 1px solid var(--s-line);
  color: var(--s-text-3); font-size: 13px; line-height: 1.55;
}
.footer__legal h2, .footer__legal h3 {
  font-family: var(--xf-font); font-size: 14px; font-weight: 700;
  color: var(--s-text-2); margin-bottom: var(--s-sp-2);
}
.footer__legal > * + * { margin-top: var(--s-sp-4); }
.footer__legal p + p { margin-top: var(--s-sp-3); }

.risk-bar {
  background: var(--s-surface-2); border: 1px solid var(--s-line);
  border-left: 3px solid var(--s-accent);
  border-radius: var(--s-r-md); padding: var(--s-sp-4) var(--s-sp-5);
  color: var(--s-text-2); font-size: 13px;
}

/* --------------------------------------------- 14. Cookie-баннер */
.cookie {
  position: fixed; inset: auto var(--s-gutter) var(--s-gutter) var(--s-gutter); z-index: 120;
  max-width: 720px; margin-inline: auto;
  background: var(--s-surface-2); border: 1px solid var(--s-line);
  border-radius: var(--s-r-lg); box-shadow: var(--s-shadow-card);
  padding: var(--s-sp-5);
  display: none;
}
.cookie.is-visible { display: block; }
.cookie__text { font-size: 14px; color: var(--s-text-2); }
.cookie__text a { color: var(--s-accent); text-decoration: underline; }
.cookie__note { margin-top: var(--s-sp-2); font-size: 13px; color: var(--s-text-3); }
.cookie__actions {
  margin-top: var(--s-sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-3);
}
/* PCON-con-129: три кнопки в порядке «отклонить всё · настроить · принять всё»,
   отклонение и принятие ВИЗУАЛЬНО РАВНОПРАВНЫ и разделены одним и тем же
   разделителем. Поэтому «отклонить» — не текстовая ссылка, а кнопка той же
   геометрии, что «принять». */
.cookie__actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 15px; padding-inline: var(--s-sp-4); }
.cookie__sep { color: var(--s-text-3); user-select: none; }

.cookie-prefs { position: fixed; inset: 0; z-index: 130; display: none; }
.cookie-prefs.is-visible { display: grid; place-items: center; padding: var(--s-gutter); }
.cookie-prefs__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.cookie-prefs__dialog {
  position: relative; width: min(560px, 100%); max-height: 86svh; overflow-y: auto;
  background: var(--s-surface-2); border: 1px solid var(--s-line);
  border-radius: var(--s-r-lg); padding: var(--s-sp-6);
}
.cookie-prefs__row {
  display: flex; gap: var(--s-sp-4); align-items: flex-start;
  padding-block: var(--s-sp-4); border-top: 1px solid var(--s-line-soft);
}
.cookie-prefs__row:first-of-type { border-top: 0; }
.cookie-prefs__row input { width: 20px; height: 20px; accent-color: var(--s-accent); margin-top: 3px; }
.cookie-prefs__row strong { display: block; margin-bottom: 2px; }
.cookie-prefs__row span { color: var(--s-text-2); font-size: 14px; }
.cookie-prefs__actions { margin-top: var(--s-sp-5); display: flex; gap: var(--s-sp-3); }

/* -------------------------------------- 15. Липкая мобильная панель CTA */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 80;
  padding: var(--s-sp-3) var(--s-gutter) calc(var(--s-sp-3) + env(safe-area-inset-bottom));
  background: rgba(26, 25, 25, .92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--s-line);
  display: none; gap: var(--s-sp-3);
  transform: translateY(110%); transition: transform .32s var(--s-ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1 1 auto; }

/* --------------------------------------- 16. Страница правовых документов */
.legal-list { display: grid; gap: var(--s-sp-3); max-width: 860px; }
.legal-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sp-4);
  padding: var(--s-sp-4) var(--s-sp-5);
  background: var(--s-surface-1); border: 1px solid var(--s-line);
  border-radius: var(--s-r-md);
}
.legal-list__item span { font-weight: 600; }
.legal-list__item small { display: block; color: var(--s-text-3); font-weight: 400; font-size: 13px; }
.legal-list__state {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-text-3); white-space: nowrap;
}
a.legal-list__item:hover { border-color: var(--s-accent-glow); }
.page-head { padding-top: clamp(120px, 15vw, 180px); }

/* ================================================================
   17. АДАПТИВ. Порядок точек — сверху вниз по ширине.
   Мобильная версия — не «сжатый десктоп»: у неё свой состав шапки
   (бургер вместо меню), своя раскладка таблицы условий (карточка на
   стадию вместо горизонтальной таблицы) и липкая панель действия.
   ================================================================ */

@media (max-width: 1180px) {
  .nav { gap: var(--s-sp-4); }
  .footer__top { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); }
  .footer__socials { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__media { order: -1; max-width: 560px; margin-inline: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav, .header__actions .header__login, .header__actions .lang { display: none; }
  .burger { display: flex; }
  .header__inner { justify-content: space-between; }
  .header__actions { gap: var(--s-sp-2); margin-left: auto; }

  .steps__grid { grid-template-columns: minmax(0, 1fr); }
  /* Высота карточки на телефоне НЕ уменьшается — у исходника она 410 px на
     любой ширине, и кадр рассчитан на неё: при 200 px `cover` съедал бы
     две трети изображения. */
  .steps__cta { margin-top: 32px; padding: 20px; font-size: 20px; }

  /* Таблица условий на узком экране разворачивается в карточки-стадии:
     горизонтальная прокрутка таблицы на телефоне прячет колонку Funded,
     то есть именно ту, ради которой челлендж покупают. */
  .plan__table { display: none; }
  .pcards { display: block; }

  .plan { border-radius: var(--s-r-lg); }
  .plan__banner { flex-wrap: wrap; }
  .plan__banner-price { width: 100%; text-align: left; }
  .plan__banner-price small { text-align: left; }

  .sticky-cta { display: flex; }
  body { padding-bottom: 84px; }
}

@media (max-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: auto; padding-top: 118px; }
  .hero__cta .btn { width: 100%; }
  .cookie__actions { flex-direction: column; align-items: stretch; }
  .cookie__sep { display: none; }
}

@media (max-width: 420px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .footer__links { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: var(--s-sp-3); }
  .plan__banner { padding: var(--s-sp-4); }
  .plan__banner-icon { width: 48px; height: 48px; }
}

/* Печать: витрина печатается как документ условий — фон и интерактив не нужны. */
@media print {
  .header, .mobile-menu, .sticky-cta, .cookie, .cookie-prefs, .ticker, .hero::after { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .plan, .card, .acc { border-color: #ccc; }
}

/* ---------------------------------------------- 18. Крюк проверки рендера
   `html[data-shot]` снимает начальную прозрачность AOS и прячет баннер согласия.
   Нужен инструментам
   снимка (tools/proto-preview/shot.mjs --doc-attr data-shot=1): без него
   headless-браузер снимает страницу до срабатывания observer'а, и каждая
   секция уходит в снимок прозрачной — то есть проверка вёрстки смотрит не на
   вёрстку. В production атрибут никто не ставит, поэтому правило инертно. */
html[data-shot] [data-aos] { opacity: 1 !important; transform: none !important; }
html[data-shot] .cookie,
html[data-shot] .cookie-prefs { display: none !important; }

/* Плитка размера счёта: подпись «Soon» встаёт второй строкой, а не наезжает
   на сумму — кнопка раскладывается колонкой. */
.plan__size {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15;
}
.plan__size[disabled]::after { margin-top: 2px; }

/* ------------------------------------- 20. Правовая страница, публикуемая нами */
.legal-doc { max-width: 860px; }
.legal-doc__group { margin-top: var(--s-sp-6); }
.legal-doc__group h2 { margin-bottom: var(--s-sp-3); }
.legal-doc__group ul { display: grid; gap: var(--s-sp-2); }
.legal-doc__group li {
  position: relative; padding-left: var(--s-sp-5); color: var(--s-text-2);
}
.legal-doc__group li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--s-accent);
}

/* ------------------------------------- 21. Узкий телефон: шапка без действия
   Ниже 560px «Get funded» в шапке вставал в две строки рядом с леттерингом и
   бургером. Кнопка снимается, а не ужимается: действие на этой ширине уже
   есть дважды — главной кнопкой первого экрана и липкой панелью снизу, —
   и третья копия стоит только читаемости шапки. */
@media (max-width: 560px) {
  .header__actions > .btn { display: none; }
  /* На телефоне логотип НЕ уменьшается и НЕ растёт: у исходника он 14 px на
     любой ширине. Прежние 18 px здесь были остатком десктопных 22 — уменьшили
     пропорционально, хотя уменьшать было нечего. */
  .logo svg { height: 14px; }
  .header { padding-block: var(--s-sp-3); }
}

/* Монограмма инструмента в тикере — там, где собственного значка нет. */
.ticker__mono {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--s-surface-3);
  color: var(--s-text-2); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}

/* ------------------------------- 22. Находки браузерной проверки на 360 px
   node tools/proto-preview/check.mjs … --viewport 360x800 */

/* Бегущая строка обязана обрезать себя САМА. Без этого её дорожка шириной
   max-content расширяла документ: страница показывала 43 px горизонтального
   переполнения на 360 px, и прятал его только overflow-x у body — то есть
   дефект был не устранён, а спрятан. */
.ticker { overflow: hidden; }

/* Баннер согласия на узком экране накрывал главное действие первого экрана.
   Баннер обязан спрашивать, а не загораживать: на телефоне он ужимается и
   получает собственную прокрутку, если текста в языке больше, чем в английском. */
@media (max-width: 560px) {
  .cookie { padding: var(--s-sp-4); max-height: 46svh; overflow-y: auto; }
  .cookie .h5 { font-size: 16px; }
  .cookie__text { font-size: 13px; }
  .cookie__note { font-size: 12px; }
  .cookie__actions { margin-top: var(--s-sp-3); gap: var(--s-sp-2); }
  .cookie__actions .btn { min-height: 42px; font-size: 14px; }
}

/* ===================================================== 23. Страница без скриптов
   Правило `R-30`: без скриптов витрина остаётся читаемой ЦЕЛИКОМ. Обеспечивает
   это не пожелание, а порядок: всё, что прячет содержимое до вмешательства
   скрипта, включается только под `.js`, а класс ставит первый инлайновый скрипт
   страницы. Не поставился — значит скриптов нет, и содержимое видно.

   До этой правки страница без скриптов была ПУСТА ниже первого экрана:
   `aos.css` держит `[data-aos^=fade]{opacity:0}` безусловно и снимает
   прозрачность классом, который ставит только `aos.js`; аккордеон FAQ свёрнут
   `max-height: 0`. Вместе они прятали 14 800 знаков — всю витрину условий,
   правила риска, выплаты и весь FAQ. Тот же исход давал единственный
   незагрузившийся вендорный файл ПРИ РАБОТАЮЩЕМ скрипте. */
html:not(.js) [data-aos] { opacity: 1 !important; transform: none !important; }
html:not(.js) .acc__body { max-height: none !important; }
html:not(.js) .acc__icon { display: none; }
html:not(.js) .faq__more { display: none; }
html:not(.js) .plans__tabs { display: none; }
html:not(.js) .plan[hidden] { display: block; }
html:not(.js) .plan__sizes { display: none; }