/* Сайт Stockhoppers: лендинг и документация.

   Язык дизайна тот же, что в приложении, и это не лень. Человек
   приходит с сайта в приложение за один клик, и если там другие
   карточки, другой шрифт и другие углы, он решает, что попал
   не туда. Поэтому токены, радиусы и ритм повторены точь-в-точь.

   Отличий от приложения два, и оба по делу. Ширина колонки текста
   ограничена, потому что здесь читают, а не смотрят на цифры.
   И появился второй уровень заголовков с якорями, потому что
   документацию читают кусками и присылают друг другу ссылками. */

:root{
  --page:#ECEDF1;
  --card:#FFFFFF;
  --sunk:#F5F6F8;
  --ink:#15161A;
  --dim:#6B7078;
  --faint:#9CA1A9;
  --line:#E6E8ED;

  --accent:#A9C7FB;
  --accent-deep:#5E8FE0;
  --accent-soft:#EAF1FE;

  --up:#1E9E5A;
  --up-soft:#E6F6EC;
  --down:#D5485F;
  --gold:#C99700;
  --gold-soft:#FBF1D8;

  --ui:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --r:22px;
  --r-sm:14px;
  --r-xs:10px;
  --sh:0 2px 6px rgba(18,22,32,.04);
  --sh-lg:0 12px 30px rgba(18,22,32,.07);
  --gap:18px;
  --pad:clamp(20px,2.2vw,32px);
  --wide:1180px;
  --e:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;
  -webkit-tap-highlight-color:rgba(21,22,26,.06)}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  background:var(--page);scroll-behavior:smooth;scroll-padding-top:92px;
  overflow-x:clip}
/* Фон отдан слою неба, поэтому страница прозрачная. Цвет остаётся
   на html: он и подложка под видео, и единственный фон, если видео
   не запустится. */
body{color:var(--ink);background:transparent;font:400 16px/1.62 var(--ui)}

/* ------------------------------------------------------------ небо

   Слой прикреплён к окну, а не к документу. Это главное: привязанный
   к документу фон кончается там, где кончился его блок, и ниже первого
   экрана страница остаётся голой. Прикреплённый к окну закрывает его
   всегда и на любой прокрутке.

   Видео 640 на 360, растянутое на весь экран, показывает блоки сжатия,
   поэтому оно размыто и чуть увеличено: размытие прячет блоки, а запас
   масштаба прячет края, которые размытие иначе высветлило бы.

   Поверх лежит молочная пелена. Без неё тёмный текст заголовков стоит
   прямо на облаках, и читаемость зависит от того, какой кадр сейчас
   на экране. */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:var(--page) url("art/sky.jpg") center/cover no-repeat}
.sky video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.06);filter:blur(3px) saturate(.9)}
/* Плотность пелены подобрана по самому тёмному, что стоит прямо
   на небе: по серому тексту абзацев. Считается она под конкретный
   ролик, а не раз навсегда: у нынешнего, замедленного и с плотной
   синевой, на 0.82 небо превращалось в ровный серый, а текст держал
   запас. На 0.74 облака видно, и текст по-прежнему выше порога. */
.sky::after{content:"";position:absolute;inset:0;
  background:rgba(238,240,245,.74)}

a{color:inherit}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;
  border-radius:6px}
/* Родной ползунок убран, вместо него свой, разметкой. Родной нельзя
   ни спрятать на первом экране, ни показать плавно: у него нет
   состояний, а переходы на его псевдоэлементах браузеры применяют
   как придётся. Прокрутка колесом, клавишами и касанием при этом
   остаётся родной, своя тут только полоска и перетаскивание. */
html{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0}

.scroller{position:fixed;top:0;right:0;width:15px;height:100%;z-index:60;
  opacity:0;pointer-events:none;transition:opacity 260ms var(--e)}
.scroller.on{opacity:1;pointer-events:auto}
.thumb{position:absolute;right:4px;width:7px;min-height:44px;
  border-radius:99px;background:rgba(21,22,26,.26);
  transition:background 160ms var(--e),width 160ms var(--e),
  right 160ms var(--e)}
.scroller:hover .thumb,.scroller.drag .thumb{width:9px;right:3px;
  background:rgba(21,22,26,.46)}

/* На касании своего ползунка нет, и родной возвращается. Причина
   не в красоте: полоска шириной в пятнадцать пикселей вдоль всего
   правого края перехватывает касания, а у правого края стоит бургер.
   Тащить ползунок пальцем всё равно никто не будет. */
@media (hover:none){
  html{scrollbar-width:auto;-ms-overflow-style:auto}
  ::-webkit-scrollbar{width:initial;height:initial}
  .scroller{display:none}
}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gap)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ шапка

   Полоса во всю ширину, приклеенная к верху. Над первым экраном она
   прозрачная и светлая по содержимому, потому что лежит поверх тёмного
   кадра; ниже становится обычной светлой полосой.

   Состояние over ставится скриптом и только там, где первый экран есть.
   Делать его через :has или порядок в разметке нельзя: документация
   начинается сразу со светлой страницы, и белый текст на ней пропал бы. */
/* Полоса почти прозрачная и держится размытием, а не заливкой. Плотная
   заливка перекрывала небо и читалась как отдельная панель, приклеенная
   поверх страницы. Размытие даёт тот же эффект (под полосой ничего
   не разобрать, значит текст не спорит с фоном), но фон сквозь неё
   остаётся виден. Насыщенность поднята, иначе размытое небо сереет. */
header{position:sticky;top:0;z-index:40;background:rgba(243,245,249,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  transition:background 220ms var(--e)}
/* Над кадром шапка пустая совсем: ни заливки, ни затемнения. Своё
   затемнение ей больше не нужно, потому что сам кадр теперь гасится
   ровно по всей площади, и верх у него не светлее остального. */
header.over{background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.hd{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;
  font:700 18px/1 var(--ui);letter-spacing:-.035em}
.logo img{height:26px;width:auto;display:block}

/* Отметка сети рядом со знаком проекта. Разделитель, а не просто
   отступ: иначе два знака подряд читаются как один составной логотип,
   будто проект называется Stockhoppers Robinhood Chain. */
.chain{display:flex;align-items:center;gap:7px;padding-left:15px;
  margin-left:3px;border-left:1px solid var(--line);
  font:500 13px/1 var(--ui);letter-spacing:-.015em;color:var(--ink);
  border-left-color:currentColor;white-space:nowrap}
.chain svg{width:15px;height:15px;display:block;fill:currentColor}
header.over .chain{color:#fff}

/* Белый знак отдельным файлом, а не инверсией тёмного: у инверсии
   по краям сглаживания остаётся серая кайма. */
.logo .lt{display:none}
header.over .logo{color:#fff}
header.over .logo .dk{display:none}
header.over .logo .lt{display:block}
/* Плотнее обычного приглушённого: своего затемнения у шапки больше нет,
   и на 0.72 пункты меню падали до 3.4 контраста на светлых местах кадра. */
header.over .hnav a{color:rgba(255,255,255,.88)}
header.over .hnav a:hover{color:#fff;background:rgba(255,255,255,.14)}
header.over .hnav a.on{color:#fff;background:rgba(255,255,255,.16);
  box-shadow:none}
header.over .btn.dark{background:#fff;color:var(--ink)}
header.over .btn.dark:hover{background:rgba(255,255,255,.86)}
header.over .burger span{background:#fff}
.hnav{display:flex;gap:2px;margin-left:auto}
.hnav a{font:500 14.5px/1 var(--ui);letter-spacing:-.015em;color:var(--dim);
  padding:11px 14px;border-radius:var(--r-xs);text-decoration:none;
  transition:all 170ms var(--e)}
.hnav a:hover{color:var(--ink);background:rgba(255,255,255,.75)}
.hnav a.on{color:var(--ink);background:var(--card);box-shadow:var(--sh)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 14.5px/1 var(--ui);letter-spacing:-.015em;text-decoration:none;
  padding:14px 22px;border-radius:99px;border:0;cursor:pointer;
  transition:all 170ms var(--e);white-space:nowrap}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#2b2d35;transform:translateY(-1px)}
.btn.blue{background:var(--accent);color:var(--ink)}
.btn.blue:hover{background:#96BAF9;transform:translateY(-1px)}
.btn.plain{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.btn.plain:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)}
.burger{display:none;margin-left:auto;width:42px;height:42px;padding:11px 9px;
  flex-direction:column;justify-content:space-between;background:none;border:0;
  cursor:pointer}
.burger span{display:block;width:100%;height:2px;border-radius:2px;
  background:var(--ink)}

/* ------------------------------------------------------------ общее */
section{padding:clamp(44px,5vw,78px) 0}
h1{font:700 clamp(38px,5.6vw,68px)/1.04 var(--ui);letter-spacing:-.05em;
  max-width:16ch}
h2{font:700 clamp(26px,3vw,36px)/1.12 var(--ui);letter-spacing:-.045em;
  max-width:20ch}
h3{font:700 19px/1.25 var(--ui);letter-spacing:-.035em}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--dim);
  max-width:58ch;margin-top:20px}
p{max-width:64ch;color:var(--dim)}
p + p{margin-top:14px}
.eyebrow{font:600 11.5px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:16px}
.card{background:var(--card);border-radius:var(--r);padding:var(--pad);
  box-shadow:var(--sh)}
.card.dark{background:var(--ink);color:#fff}
.card.dark p,.card.dark .k{color:rgba(255,255,255,.62)}
.card.dark .eyebrow{color:rgba(255,255,255,.45)}

/* Карточка с кадром под текстом. Пелена 0.74: заголовок даёт 8.5
   контраста, абзац 6.0. Абзац ради этого набран плотнее обычного
   приглушённого, на 0.78 вместо 0.62: на однотонной карточке 0.62
   хватало, на кадре он падал до 4.4, то есть к самому порогу. */
.card.shot{position:relative;overflow:hidden;background:
  linear-gradient(rgba(12,14,18,.74),rgba(12,14,18,.74)),
  url("art/epoch.jpg") center/cover no-repeat,var(--ink)}
.card.shot p{color:rgba(255,255,255,.78)}
.card.shot .eyebrow{color:rgba(255,255,255,.62)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.head{margin-bottom:28px}
.head p{margin-top:14px}

/* ------------------------------------------------------------ первый экран */
.hero{position:relative;display:flex;align-items:center;
  min-height:clamp(480px,78vh,760px);
  /* Шапка стоит в потоке и отнимает свои 72 пикселя сверху. Кадр
     поднимается под неё отрицательным полем и возвращает их отступом,
     иначе над снимком осталась бы светлая полоса во всю ширину. */
  margin-top:-72px;padding-top:72px;
  background:#0C0E12 url("art/hero.jpg") center center/cover no-repeat}
/* Колонка внутри кадра это элемент флексбокса, и без ширины она
   съёживается по тексту, а margin:0 auto центрирует её остаток.
   Из-за этого заголовок стоял не по левому краю страницы, а посередине,
   и не совпадал со знаком в шапке. */
.hero > .wrap{width:100%}
/* Затемнение ровное по всей площади: кадр яркий целиком, небо в нём
   белое, и белый заголовок без него просто исчезает. */
.hero::before{content:"";position:absolute;inset:0;
  background:rgba(10,12,16,.58)}

.heroText{position:relative;padding:clamp(28px,4vw,64px) 0;max-width:660px}
.hero h1{color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.52)}
/* Подпись плотнее обычной приглушённой: затемнение кадра ровное, без
   клина под текстом, и на 0.76 она у края допустимого контраста.
   Поднять её непрозрачность дешевле, чем гасить картинку ещё сильнее. */
.hero .lede{color:rgba(255,255,255,.9);max-width:52ch}

/* ------------------------------------------------------------ шаги */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.step{background:var(--card);border-radius:var(--r);padding:var(--pad);
  box-shadow:var(--sh)}
.step h3{margin-bottom:10px}
.step p{font-size:14.5px}
.grid3 .card h3{margin-bottom:10px}
.grid3 .card p{font-size:14.5px}
h3.big{font-size:24px;margin-bottom:12px}

/* ------------------------------------------------------------ выплаты */
.payout{display:grid;gap:10px}
.prow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;
  align-items:center;padding:16px 20px;border-radius:var(--r-sm)}
.prow.p1{background:var(--ink);color:#fff}
.prow.p2{background:#454B55;color:#fff}
.prow.p3{background:#C6CAD2}
.prow.rest{background:var(--sunk)}
/* Кубок вместо цифры. Место читается с одного взгляда и по цвету,
   а порядковый номер приходится читать. Значок один на все три места,
   разводятся они металлом, а не рисунком: золото, серебро, бронза
   узнаются быстрее, чем три разных кубка. */
.prow .n{width:34px;height:34px;display:flex;align-items:center;
  justify-content:center}
.prow .n svg{width:100%;height:100%;display:block;fill:currentColor}
.prow.p1 .n{color:#E4B33C}
.prow.p2 .n{color:#CBD2DB}
.prow.p3 .n{color:#8A5527}
.prow.rest .n{color:#9199A3}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.prow .lbl{font:600 15px/1.3 var(--ui);letter-spacing:-.025em}
.prow .lbl small{display:block;font:400 12.5px/1.4 var(--ui);opacity:.65;
  margin-top:3px}
.prow .amt{font:700 19px/1 var(--ui);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------ тикеры */
/* Минимум вырос со 148 до 186 вместе с появлением котировки: на прежней
   ширине число прижималось к символу и читалось как его продолжение. */
.tick{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:10px}
.tick div{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh);
  font:600 14.5px/1 var(--ui);letter-spacing:-.03em}
.tick img{width:26px;height:26px;border-radius:8px;background:#fff;padding:3px;
  object-fit:contain;flex:0 0 auto}
.tick img.onDark{background:var(--ink)}

/* Котировка справа в плитке. Пока пул не ответил, клетка пуста и места
   не занимает: рисовать прочерк или нули значит обещать число, которого
   нет. Ширина фиксирована, иначе плитки дёргались бы на каждом
   обновлении, когда 1.20 сменяется на 12.00. */
.tick .pct{margin-left:auto;min-width:62px;text-align:right;
  font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--faint)}
.tick .pct.up{color:var(--up)}
.tick .pct.down{color:var(--down)}
.tick-flash{animation:pctFlash 900ms var(--e)}
@keyframes pctFlash{from{opacity:.25}to{opacity:1}}

/* Подпись под таблицей появляется только когда числа действительно
   пришли. Обещать живые котировки на странице, где их не видно,
   хуже, чем не обещать вовсе. */
.quoteNote{margin-top:14px;font-size:13.5px;color:var(--faint);
  opacity:0;transition:opacity 300ms var(--e)}
.quoteNote.on{opacity:1}

/* ------------------------------------------------------------ документация */
.docs{display:grid;grid-template-columns:232px minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:start;padding-top:36px}
.side{position:sticky;top:96px;display:grid;gap:2px}
.side a{font:500 14px/1.35 var(--ui);color:var(--dim);text-decoration:none;
  padding:9px 13px;border-radius:var(--r-xs);transition:all 150ms var(--e)}
.side a:hover{color:var(--ink);background:rgba(255,255,255,.75)}
.side a.on{color:var(--ink);background:var(--card);box-shadow:var(--sh)}
.side .grp{font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding:18px 13px 7px}

/* Ширину колонки держит сама колонка, а не каждый абзац. Пока предел
   стоял на абзаце, текст обрывался задолго до края карточки, а таблицы
   и врезки шли во всю ширину, и правый край страницы ходил туда-сюда. */
.doc{display:grid;gap:var(--gap);max-width:772px}
.doc section{padding:0;scroll-margin-top:96px}
.doc .card{display:grid;gap:14px}
.doc h2{max-width:24ch}
.doc h3{margin-top:6px}
.doc p,.doc ul{max-width:none}
.doc ul{margin:0;padding-left:20px;color:var(--dim)}
.doc li + li{margin-top:8px}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc th{text-align:left;font:600 11px/1 var(--ui);letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);padding:0 12px 12px 0}
.doc td{padding:12px 12px 12px 0;border-top:1px solid var(--line);
  color:var(--dim);vertical-align:top}
.doc td:first-child{color:var(--ink);font-weight:600;width:34%}
.doc td.mono,.doc td .mono{font-family:var(--mono);font-size:13px}
.note{background:var(--sunk);border-radius:var(--r-sm);padding:18px 20px;
  font-size:14.5px;color:var(--dim)}
.note b{color:var(--ink)}
.addr{font-family:var(--mono);font-size:12.5px;word-break:break-all;
  color:var(--dim)}

/* ------------------------------------------------------------ вопросы */
.faq{display:grid;gap:10px}
details{background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh);
  overflow:hidden}
summary{list-style:none;cursor:pointer;padding:20px 24px;
  font:600 16px/1.35 var(--ui);letter-spacing:-.03em;
  display:flex;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:10px;height:10px;flex:0 0 auto;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translateY(-3px);transition:transform 200ms var(--e)}
details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details p{padding:0 24px 22px;font-size:14.5px}

/* ------------------------------------------------- часы недели

   Обратный отсчёт неизбежно меняет цифры, и это нормально, а вот
   дёргать соседний текст ему нельзя. Поэтому цифры моноширинные
   и с табличными знаками: ширина строки не зависит от того, какие
   в ней стоят цифры, и блок стоит неподвижно всю минуту. */
.clock{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--gap);align-items:center}
.phaseName{font:700 30px/1.15 var(--ui);letter-spacing:-.02em}
.phaseWhat{margin-top:8px;color:var(--dim);max-width:52ch}
.clockLeft{text-align:right}
.cd{font:600 38px/1 var(--mono);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:8px}
.cdWhen{margin-top:8px;color:var(--dim);font-size:15px}

/* Полоса недели. Доли часов настоящие: окно перекладки 112.5 часа,
   эпоха 54.5, расчёт один. Рисовать их равными значило бы врать
   картинкой там, где текст говорит правду.
   Одна поблажка. Расчётный час это полпроцента недели, то есть
   шесть пикселей, в которые не влезает ни подпись, ни сам факт,
   что такая часть есть. Ему отдано 6%, а окно и эпоха ужаты на эти
   проценты в своей же пропорции, так что их отношение друг к другу
   осталось верным. Те же три числа лежат в clock.js, потому что
   по ним считается положение метки. */
/* Отступ снизу вдвое больше, чем сверху, и это не прихоть. Полоса
   и карточка часов над ней это одно целое, а тройка карточек ниже
   уже другой блок. При равных отступах всё это белое сливается
   в одну массу, и полоса читается как приклеенная к нижней карточке. */
.track{position:relative;display:flex;
  margin:var(--gap) 0 calc(var(--gap) * 2);
  border-radius:var(--r-sm);overflow:hidden;height:56px;
  box-shadow:var(--sh)}
.seg{display:flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--ui);color:var(--dim);background:var(--card);
  border-right:1px solid var(--line);min-width:0}
.seg span{padding:0 10px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.seg.swap{flex:0 0 62.94%}
.seg.run{flex:0 0 31.06%;background:var(--accent-soft);color:var(--accent-deep)}
.seg.set{flex:1 1 auto;background:var(--gold-soft);
  color:var(--gold);border-right:0}
/* Самому узкому сегменту поля не по карману: с ними слово не влезает
   и обрезается многоточием, а обрезанное слово хуже отсутствующего. */
.seg.set span{padding:0 4px}
.pin{position:absolute;top:0;bottom:0;width:3px;background:var(--ink);
  border-radius:2px;transition:left .4s var(--e)}
/* Кружок сидит внутри полосы, а не над ней: у полосы overflow скрыт,
   и вынесенный наверх кружок срезало бы ровно пополам. */
.pin::after{content:"";position:absolute;left:50%;top:0;width:11px;
  height:11px;margin-left:-5.5px;border-radius:50%;background:var(--ink)}

/* ------------------------------------------------- стартовый бонус */
.boost{display:grid;gap:10px}
.brow{display:grid;grid-template-columns:150px minmax(0,1fr) 78px;
  gap:16px;align-items:center;background:var(--card);
  border-radius:var(--r-sm);padding:14px var(--pad);box-shadow:var(--sh)}
.bk{font:600 16px/1.2 var(--ui)}
.bar{height:14px;border-radius:7px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;border-radius:7px;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep))}
.bx{font:600 18px/1 var(--mono);text-align:right;
  font-variant-numeric:tabular-nums}
.brow.flat .bar i{background:var(--faint)}
.brow.flat .bk,.brow.flat .bx{color:var(--dim)}
.boostNote{margin-top:14px;color:var(--dim);max-width:70ch}

/* ------------------------------------------------------------ подвал */
footer{padding:44px 0 56px;color:var(--faint);font-size:13.5px}
.fgrid{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:980px){
  .clock{grid-template-columns:1fr}
  .clockLeft{text-align:left}
  .grid2{grid-template-columns:1fr}
  .steps,.grid3{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .side{position:static;display:flex;gap:8px;overflow-x:auto;
    padding-bottom:6px;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .grp{display:none}
  .side a{white-space:nowrap;background:var(--card);box-shadow:var(--sh)}
}
/* Пунктов в меню стало шесть, и в строку они перестают влезать раньше,
   чем начинается телефон: на 800 пикселях "How it works" ломается
   на три строки. Поэтому меню уходит в бургер отдельным порогом,
   а знак чейна и остальная мелочь живут до прежнего. */
@media (max-width:860px){
  .burger{display:flex}
  .hnav{position:absolute;right:var(--gap);top:calc(100% - 4px);display:none;
    flex-direction:column;gap:2px;margin:0;padding:8px;border-radius:var(--r-sm);
    background:var(--card);box-shadow:var(--sh-lg);min-width:190px}
  header.open .hnav{display:flex}
  .hnav a{padding:13px 16px;white-space:nowrap}
}
@media (max-width:720px){
  /* Полоса на телефоне теряет подписи: в 42% узкого экрана слово
     не влезает, а обрезанное слово хуже, чем никакого. Цвет и метка
     остаются, что где, сказано карточками ниже. */
  .track{height:38px}
  .seg span{display:none}
  .phaseName{font-size:24px}
  .cd{font-size:32px}
  .brow{grid-template-columns:minmax(0,1fr) 72px;gap:10px 14px}
  .brow .bar{grid-column:1/-1;order:3}
  .burger{display:flex}
  .hnav{position:absolute;right:var(--gap);top:calc(100% - 4px);display:none;
    flex-direction:column;gap:2px;margin:0;padding:8px;border-radius:var(--r-sm);
    background:var(--card);box-shadow:var(--sh-lg);min-width:190px}
  header.open .hnav{display:flex}
  .hnav a{padding:13px 16px}
  .hd .btn{display:none}
  /* На телефоне в строку влезает знак и бургер, третьего места нет. */
  .chain{display:none}
  .prow{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 16px}
  .prow .n{width:30px;height:30px}
  .prow .amt{grid-column:2;margin-top:4px}

  /* На телефоне кадр становится вертикальным, заяц уходит вверх,
     а текст садится под ним. Клин слева тут не работает вовсе:
     ширины не хватает, чтобы фон успел проясниться. */
  /* Кадр обрезается по высоте, значит по вертикали двигать его нечем,
     и весь выбор в горизонтали. В узкое окно влезает меньше трети
     ширины, поэтому показываем правую часть: там заяц с планшетом
     и зелёные свечи, то есть ровно то, ради чего картинка нарисована.
     Клин слева на такой ширине не работает, фон не успевает проясниться,
     поэтому затемнение идёт сверху вниз, а текст садится под него. */
  .hero{min-height:88vh;align-items:flex-end;
    background-position:84% center}
  .hero::before{background:linear-gradient(180deg,rgba(10,12,16,.3) 0%,
    rgba(10,12,16,.55) 38%,rgba(10,12,16,.93) 70%)}
  .hero .lede{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* Небо остаётся, но замирает: кадр из того же ролика лежит подложкой
     под видео, так что достаточно видео убрать. */
  .sky video{display:none}
}