/* PriceFrontline — общие стили всех страниц.
 *
 * ОДИН ФАЙЛ НА ВЕСЬ САЙТ, И ЭТО ГЛАВНОЕ. Сначала стили были скопированы в
 * каждую страницу: сборки нет, так проще. За неделю копии разъехались —
 * появились три варианта меню, два набора имён переменных, три подвала и
 * контейнеры разной ширины. Единство нельзя поддерживать вручную в пяти
 * файлах, поэтому стили здесь, а страницы их подключают.
 *
 * Шаг сборки при этом не появился: это обычный <link> на статический файл.
 *
 * Правила бренда, которые видно прямо в коде (DESIGN-BRIEF.md):
 *   - зелёный и красный означают ДАННЫЕ (покупатели/продавцы), а не «успех» и
 *     «ошибку». Зелёная кнопка отправки читалась бы как рыночный сигнал;
 *   - золото означает «за это заплатили» — магазин, цена юнита, оплачено;
 *   - фон всегда тёмный, светлой темы у бренда нет;
 *   - скруглений нет вовсе, тень — сдвиг сплошного блока, не размытие.
 */

@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/rajdhani-600-latin.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/rajdhani-700-latin.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/share-tech-mono-400-latin.woff2') format('woff2')}

:root{
  --green:#46c26a;--red:#e5484d;--gold:#f2b135;
  --bg:#0b0d16;--deep:#0a0c14;--panel:#10131f;
  --hair:#1b2132;--line:#262d42;--line2:#3a445f;
  --text:#e3e8f2;--muted:#8b94ac;
  /* Контраст на фоне #0b0d16 измерен, а не подобран на глаз:
       --muted 6.40:1, --dim 4.55:1 — проходят для текста любого размера.
     Важно: --dim проверен не только на основном фоне, но и на самом светлом,
     где он встречается (#161b2a — неактивная кнопка оплаты, #10131f —
     выбранная карточка товара). На них он давал 4.02:1, то есть подписи
     кнопки и описания товаров не проходили именно там, где важнее всего.
     Прежние значения давали 3.45:1 и 2.00:1: описания товаров, пункты меню и
     плейсхолдеры были нечитаемы на телефоне при дневном свете. */
  --dim:#7683a7;--faint:#59647f;
  /* Отдельный тон для «призрачных» крупных номеров: раньше они были набраны
     цветом линий (#262d42, 1.42:1) и выглядели не приглушённо, а сломанно. */
  --ghost:#4f5d89;
  --ui:'Rajdhani','Segoe UI',system-ui,sans-serif;
  --num:'Share Tech Mono',ui-monospace,'Courier New',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:17px;line-height:1.5;overflow-x:hidden}
img,svg{image-rendering:pixelated;max-width:100%}
a{color:var(--text)}a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Первая ссылка на странице, видна только с клавиатуры. Без неё человек на
   Tab каждый раз проходит всю шапку заново — на пяти страницах это пять
   лишних обходов одного и того же меню. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--gold);color:#1a1204;padding:14px 20px;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* Один контейнер на весь сайт. Раньше страницы делились на «широкие» (1180)
   и «узкие» (820), из-за чего логотип в шапке прыгал по горизонтали при
   переходе между ними. Ширину теперь задаёт содержимое: узкие страницы
   сужают не контейнер, а свой текстовый блок. */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.narrow{max-width:820px}
.hair{border-bottom:1px solid var(--hair)}

/* --- статусная строка и шапка: одинаковые на всех страницах --- */
.status{border-bottom:1px solid var(--hair);background:var(--deep)}
.status .in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;padding:7px 0;font-family:var(--num);font-size:12px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.status .on{display:flex;align-items:center;gap:7px;color:var(--muted)}
.status .on i{width:7px;height:7px;background:var(--red);display:block;animation:pulse 1.6s steps(2,end) infinite}
/* Разделители рисуются рамкой, а не символом «/».
   Раньше это был текст: он требовал контраста наравне с содержательными
   надписями (и не набирал его), а скринридер зачитывал каждый как «слэш».
   Украшение не должно быть текстом. */
.status .in>span{padding-right:18px}
.status .in>span+span{border-left:1px solid var(--line);padding-left:18px}
.status .in>span:last-child{padding-right:0}
@keyframes pulse{50%{opacity:.15}}

/* Шапка липкая, поэтому её высота — это плата, которую человек вносит на
   каждой странице и при каждой прокрутке. Перенос строки здесь запрещён
   намеренно: на 375 px четыре пункта не помещались рядом с логотипом и
   уезжали на вторую строку, и шапка занимала 100 px — восьмую часть экрана
   телефона. Ниже 640 px три пункта уходят в кнопку (см. блок узких экранов). */
.top{border-bottom:1px solid var(--hair);background:var(--bg);position:sticky;top:0;z-index:30}
.top .in{display:flex;align-items:center;gap:14px clamp(14px,2.4vw,26px);padding:12px 0}
.lock{text-decoration:none;display:block;flex:0 0 auto}
.lock .a{display:block;font-weight:700;font-size:10px;line-height:1;letter-spacing:.34em;color:var(--dim);text-transform:uppercase}
.lock .b{display:block;font-weight:700;font-size:19px;line-height:1;letter-spacing:.16em;color:var(--text);text-transform:uppercase;margin-top:5px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.top nav .links{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px)}
.top nav a{color:var(--dim);text-decoration:none;padding:8px 0;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{color:var(--text)}
/* Единственная кнопка в шапке, поэтому она и выглядит кнопкой: рамка того же
   веса, что у кнопки меню, только золотом. Золото здесь по правилу бренда —
   это ссылка на оплату, а не акцент ради акцента. Заливки нет: сплошная
   золотая плашка в шапке спорила бы с золотой кнопкой на самой странице. */
.top nav a.shop{color:var(--gold);background:var(--deep);border:1px solid #6d5215;padding:9px 12px;display:inline-flex;align-items:center}
.top nav a.shop:hover{color:var(--gold);border-color:var(--gold);background:var(--panel)}
.top nav a.shop[aria-current]{color:var(--gold);border-color:var(--gold)}

/* Кнопка меню. На широком экране её нет вовсе — ссылки стоят в строку. */
/* 44 px в обе стороны — не круглое число, а порог, ниже которого палец
   промахивается мимо кнопки. Без него иконка без подписи давала 39x26. */
.burger{display:none;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;background:var(--deep);border:1px solid var(--line);color:var(--text);font:inherit;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:11px 13px;cursor:pointer;border-radius:0}
/* Три полосы собраны сдвигом сплошного блока, а не размытием: у бренда
   размытых теней нет вовсе, и иконка живёт по тому же правилу. */
.burger i{display:block;width:15px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.top nav.open .burger{border-color:var(--text);background:var(--panel)}

/* --- типографика --- */
h1{margin:0;font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:.88;letter-spacing:.02em;text-transform:uppercase}
h2{margin:0;font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:.04em;text-transform:uppercase}
p{margin:0 0 12px;text-wrap:pretty}
.kick{font-family:var(--num);font-size:12px;letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.lede{color:var(--muted);font-size:19px;max-width:46ch}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.mono{font-family:var(--num)}
/* ТОЛЬКО вертикальные отступы, и только длинной записью.
   Сокращённое `padding: A 0` выглядит как «сверху и снизу A», но означает
   ещё и «по бокам 0» — то есть стирает боковые поля, заданные в .wrap.
   Восемь блоков на трёх страницах из-за этого прижимались к самому краю
   экрана: заголовок и лид на /how-it-works и /for-projects, плеер эфира,
   обе ведомости. На телефоне текст упирался в стекло, а на широком экране
   эти секции стояли на 44 px левее соседних, и страница ехала зигзагом. */
.pad{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(36px,5vw,64px)}
.pad-l{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(36px,5vw,60px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* --- кнопки: белый блок основное, подчёркнутая ссылка второе, золото магазин --- */
.btn{display:inline-block;background:var(--text);color:var(--bg);text-decoration:none;padding:15px 26px;font-family:inherit;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer;border-radius:0}
.btn:hover{background:#fff;color:var(--bg)}
.lnk{position:relative;color:var(--text);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line2);padding-bottom:4px}
.lnk:hover{border-color:var(--text)}
/* Строчка текста высотой 27 px — это промах пальцем через раз. Область
   нажатия растягивается до 44 px невидимым слоем, чтобы не сдвинуть при этом
   ни саму надпись, ни подчёркивание под ней. */
.lnk::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.btn.gold{background:var(--gold);border:2px solid #a8791f;color:#1a1204}
.btn.gold:hover{background:#ffc766;color:#1a1204}
.acts{display:flex;flex-wrap:wrap;gap:24px;align-items:center}

/* --- колонки, разделённые линейкой --- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));border-top:1px solid var(--hair)}
.cols>div{padding:30px 32px 40px}
.cols>div:not(:last-child){border-right:1px solid var(--hair)}
.cols>div:first-child{padding-left:0}
.cols>div:last-child{padding-right:0}
.num{font-family:var(--num);font-size:28px;line-height:1;color:var(--ghost)}
.cols .ttl{font-weight:700;font-size:20px;letter-spacing:.05em;text-transform:uppercase;margin:14px 0 8px}
.cols .ds{color:var(--muted);font-size:16px;max-width:34ch}

/* --- строки-ведомость --- */
.rows{border-top:1px solid var(--hair)}
.row{display:grid;gap:clamp(12px,3vw,32px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hair)}
.row.m3{grid-template-columns:52px minmax(0,1fr) minmax(0,1.5fr)}
.row.m2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.row.step{grid-template-columns:64px minmax(0,1fr) minmax(0,2fr)}
.row.spec{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr)}
.row .n{font-family:var(--num);font-size:13px;color:var(--dim)}
.row .n.big{font-size:24px;line-height:1;color:var(--ghost)}
.row .sig{font-size:17px;color:var(--text);font-weight:700;letter-spacing:.03em}
.row .sub{color:var(--dim);font-size:15px}
.row .val{font-family:var(--num);font-size:17px}
.row .cap{font-family:var(--num);font-size:12px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.row b{font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.row .hd{font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
.head{display:grid;gap:clamp(12px,3vw,32px);padding-bottom:12px;border-bottom:1px solid var(--line);font-family:var(--num);font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.head.m3{grid-template-columns:52px minmax(0,1fr) minmax(0,1.5fr)}

/* --- эфир --- */
.player{position:relative;width:100%;aspect-ratio:16/9;background:var(--deep);border:2px solid var(--line);display:grid;place-items:center;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .off{text-align:center;padding:24px;max-width:440px}
.player .off-kick{font-family:var(--num);font-size:12px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.player .off-ttl{font-weight:700;font-size:19px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.player .off-txt{margin:8px 0 0;font-size:15px}
.player .off-btn{margin-top:18px}
.player .plate{position:absolute;left:14px;bottom:14px;background:var(--bg);border:2px solid var(--line);padding:5px 9px;font-family:var(--num);font-size:13px;letter-spacing:.06em}

/* --- схема фронта на главной --- */
.field{position:relative;min-height:440px;overflow:hidden;background:#080a11;border-left:1px solid var(--hair)}
.field .grid{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,#111624 0 1px,transparent 1px 72px),repeating-linear-gradient(180deg,#111624 0 1px,transparent 1px 72px)}
.field .rank{position:absolute;height:4px}
.field .front{position:absolute;left:0;right:0;top:54%;height:2px;background:var(--text)}
.field .tag{position:absolute;background:var(--bg);border:2px solid var(--text);padding:6px 10px;font-family:var(--num);font-size:14px;letter-spacing:.06em;right:clamp(16px,3vw,28px);top:54%;transform:translateY(-50%)}
.field .lbl{position:absolute;left:clamp(16px,3vw,28px);font-family:var(--num);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.field .lbl.up{top:clamp(16px,4vw,28px);color:var(--green)}
.field .lbl.down{bottom:clamp(34px,5vw,44px);color:var(--red)}
.field .cap{position:absolute;left:0;bottom:0;padding:10px 14px;font-family:var(--num);font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}

/* --- форма заявки --- */
form.brief{border:2px solid var(--line);background:var(--deep);padding:clamp(18px,3vw,28px)}
label{display:block;font-family:var(--num);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:22px 0 8px}
label.req{color:var(--muted)}
input[type=text],textarea{width:100%;background:var(--bg);border:0;border-bottom:2px solid var(--line);border-radius:0;color:var(--text);font:inherit;font-size:17px;padding:10px 2px}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--text)}
/* Плейсхолдер — информация, а не украшение: читается тем же тоном, что и подсказки. */
::placeholder{color:var(--dim)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:16px}
.two label{margin-top:0}
/* Ловушка для ботов: вне экрана и вне обхода с клавиатуры. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.send{width:100%;margin-top:28px;padding:16px;font-size:16px;letter-spacing:.16em}
.msg{display:none;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px}
.msg.on{display:block}

/* --- подвал: одинаковый на всех страницах --- */
footer.site{padding:34px 0 calc(56px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px 32px;align-items:start;border-top:1px solid var(--hair)}
footer.site p{margin:0;color:var(--muted);font-size:15px;max-width:52ch}
footer.site p b{color:var(--text);font-weight:700}
footer.site .stamp{font-family:var(--num);font-size:12px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;justify-self:start}
/* Все четыре страницы перечислены в подвале каждой из них. Это нужно и
   человеку, который дочитал до конца и не хочет мотать наверх, и роботу:
   на сайте из четырёх страниц перелинковка — единственный способ показать
   поисковику, что они связаны. */
footer.site .fnav{display:flex;flex-direction:column;align-items:flex-start;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
footer.site .fnav a{color:var(--dim);text-decoration:none;padding:9px 0}
footer.site .fnav a:hover,footer.site .fnav a[aria-current]{color:var(--text)}

/* =========================================================
   Страница покупки. Живёт в общем файле, а не отдельно: раньше у неё был
   свой набор переменных (--font-ui вместо --ui), и правка палитры в одном
   месте её молча не касалась.
   ========================================================= */
.shop{max-width:820px}
.shop-head{padding:clamp(32px,5vw,56px) 0 clamp(24px,4vw,36px);border-bottom:1px solid var(--hair)}
.shop h1{font-size:clamp(34px,7vw,64px);line-height:.9}
.shop .sub{margin:20px 0 0;color:var(--muted);max-width:46ch}
/* Тег h2 с этим классом: иерархия h1 -> h2 -> h3 без пропусков.
   Класс перебивает общие стили h2 по специфичности. */
.step-h{display:flex;align-items:baseline;gap:14px;margin:clamp(26px,4vw,40px) 0 18px;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.step-h i{font-style:normal;font-family:var(--num);font-size:13px;letter-spacing:0;color:var(--dim)}

/* Две карточки в ряд на любой ширине: покупатель приходит с телефона, и
   листать семь товаров до кнопки оплаты он не станет. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;cursor:pointer;font:inherit;color:var(--text);background:var(--deep);border:1px solid var(--hair);border-radius:0}
.card:hover{border-color:var(--line2)}
.card[aria-pressed="true"]{background:var(--panel);border-color:var(--text)}
.card.strike[aria-pressed="true"]{border-color:var(--gold)}
.card .ico{flex:0 0 30px;width:30px;height:30px}
.card .bd{flex:1;min-width:0}
.card .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card .ttl{font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.card .pr{font-family:var(--num);font-size:16px;color:var(--muted)}
.card.strike .pr{color:var(--gold)}
.card .ds{display:block;color:var(--dim);font-size:14.5px;line-height:1.35;margin-top:4px}
.card .ico svg,.pawn svg{display:block;width:100%;height:100%}

.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.side{padding:16px;text-align:left;cursor:pointer;font:inherit;color:var(--text);background:var(--deep);border:1px solid var(--hair);border-radius:0;font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.side small{display:block;font-family:var(--num);font-weight:400;font-size:13px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-top:4px}
.side[data-side="green"][aria-pressed="true"]{background:#0f1a14;border-color:var(--green)}
.side[data-side="red"][aria-pressed="true"]{background:#1a1013;border-color:var(--red)}
.side[disabled]{opacity:.35;cursor:not-allowed}

.namefield{position:relative}
.namefield input[type=text]{border-bottom-color:var(--line2);font-size:21px;padding:12px 68px 12px 2px}
.namefield input[type=text].bad{border-bottom-color:var(--red)}
.count{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:var(--num);font-size:15px;color:var(--dim);pointer-events:none}
.count.bad{color:var(--red)}
.hint{margin:10px 0 0;font-size:15px;color:var(--dim)}
.hint.bad{color:#ef7b7f}

/* Превью таблички — ровно как над юнитом в игре. */
.preview{display:none;margin-top:22px}
.preview.on{display:block}
.preview .lbl{font-family:var(--num);font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.stage{margin-top:10px;padding:20px 12px 12px;text-align:center;border:1px solid var(--hair);background:linear-gradient(180deg,#0f1320 0%,#0f1320 62%,#171c2b 62%,#171c2b 100%)}
.plate{font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:19px;color:#fff;letter-spacing:.02em;overflow-wrap:anywhere;text-shadow:-2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,2px 0 0 #000,2px 2px 0 #000,0 2px 0 #000,-2px 2px 0 #000,-2px 0 0 #000}
.pawn{display:block;margin:8px auto 0;width:36px;height:36px}
.masked{display:none;margin:10px 0 0;color:var(--gold);font-size:14.5px}
.masked.on{display:block}

/* Нижний отступ считается с env(): на айфоне без него кнопка оплаты лежит
   ровно под «домашней полоской», и половина нажатий уходит системе. */
.checkout{position:sticky;bottom:0;z-index:20;margin-top:clamp(26px,4vw,40px);padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total .what{font-family:var(--num);font-size:13px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.total b{font-family:var(--num);font-weight:400;font-size:30px;color:var(--gold)}
.pay{width:100%;margin-top:12px;padding:17px;font:inherit;font-weight:700;font-size:17px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:var(--gold);border:0;color:#1a1204;border-radius:0}
.pay:hover:not(:disabled){background:#ffc766}
.pay:disabled{background:#161b2a;color:var(--dim);cursor:not-allowed}
.pay .spin{display:inline-block;width:12px;height:12px;margin-right:9px;background:#1a1204;animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}
.why{margin:10px 0 0;text-align:center;color:var(--dim);font-size:14.5px;min-height:20px}
.err{display:none;margin:12px 0 0;padding:12px 14px;font-size:15.5px;background:#1c1013;border-left:2px solid var(--red);color:#f4b3b5}
.err.on{display:block}
.aside{margin-top:clamp(26px,4vw,40px);padding-top:clamp(26px,4vw,40px);border-top:1px solid var(--hair)}
.aside h3{margin:0;font-weight:400;font-family:var(--num);font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.aside .cols3{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.aside p{margin:0;color:var(--muted);font-size:15.5px}

/* =========================================================
   Узкие экраны. Не «уменьшенный десктоп»: раскладки, рассчитанные на ширину,
   на телефоне перестраиваются, а не сжимаются.
   ========================================================= */

@media (max-width:860px){
  /* Колонки встали друг под друга — значит разделять их должна нижняя
     граница, а не правая. Иначе у блоков висит вертикальная черта в никуда.
     Отступы тоже выравниваются: в столбик разные поля читаются как сбой. */
  .cols>div{padding:26px 0 28px}
  .cols>div:not(:last-child){border-right:0;border-bottom:1px solid var(--hair)}
  .cols>div:first-child{padding-left:0}
  .cols>div:last-child{padding-right:0;padding-bottom:34px}
}

/* Блок выше написан для колонок, вставших друг под друга, — и убирает у них
   боковые поля. Но auto-fit до 860 px всё ещё раскладывает три пункта в ДВЕ
   колонки, и, лишившись полей, они стояли вплотную: последнее слово левой
   упиралось в первое слово правой, зазора не было вовсе.
   Здесь число колонок задано явно, а не угадывается: только тогда можно
   сказать, у какой из них рисовать разделитель. Чётная — всегда правая. */
@media (min-width:561px) and (max-width:860px){
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols>div{padding:26px 32px 28px}
  .cols>div:nth-child(odd){padding-left:0}
  .cols>div:nth-child(even){padding-right:0;border-left:1px solid var(--hair)}
}

@media (max-width:760px){
  /* Схема сжимается по высоте (440 -> 320 -> 280), а шеренги отмерены в
     пикселях от линии фронта — то есть низ строя не сжимается вместе с ней.
     На 280 px последняя красная шеренга приходилась ровно на надпись
     «Sellers», а сама надпись налезала на подпись-плашку внизу. Снимаем
     самую дальнюю шеренгу (она и так самая бледная, opacity .32) и поднимаем
     надпись выше плашки. Глубина строя — украшение, а не смысл. */
  .field .rank.deep{display:none}
  /* Обе подписи прибиты к краю фиксированно, а не через clamp с vw: на 540 px
     верхняя отъезжала вниз ровно настолько, чтобы лечь на первую шеренгу. */
  .field .lbl.up{top:16px}
  .field .lbl.down{bottom:46px}
  /* Ведомости на телефоне становятся карточками: три колонки по 52-64 px
     превращали текст в вертикальные струйки по два слова. */
  .row,.row.m3,.row.m2,.row.step,.row.spec{display:block;padding:18px 0}
  .row>*+*{margin-top:8px}
  .row .n{display:block;font-size:12px;letter-spacing:.16em}
  .row .n.big{font-size:13px;color:var(--faint)}
  /* Шапка таблицы описывает колонки, которых на телефоне уже нет. */
  .head{display:none}
  /* Схема поля занимала пол-экрана до того, как человек дойдёт до сути. */
  .field{min-height:320px;border-left:0;border-top:1px solid var(--hair)}
}

/* Порог меню измерен, а не выбран на глаз: строка «логотип + три пункта +
   магазин» занимает 506 px, и до 640 px она умещается в контейнер с запасом,
   а на 620 уже начинает жать. */
@media (max-width:640px){
  .burger{display:inline-flex}
  /* Панель абсолютная и во всю ширину шапки: .top липкая, то есть уже
     позиционированный элемент, и служит для неё системой координат. */
  .top nav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .top nav.open .links{display:flex}
  .top nav .links a{padding:15px clamp(20px,4vw,44px);border-top:1px solid var(--hair);color:var(--text)}
  /* Текущая страница помечается подложкой, а не полосой сбоку: полоса
     сдвинула бы надпись относительно остальных на два пикселя. */
  .top nav .links a[aria-current]{background:var(--panel)}
}

/* Ниже этой ширины подпись у кнопки меню уже не влезает: логотип, кнопка с
   подписью и ссылка магазина требуют 329 px при 280 доступных на экране в
   320 px, и «Deploy a unit» ломается на две строки прямо в шапке. Иконку из
   трёх полос читают и без подписи; имя кнопки для читалки остаётся в
   aria-label. */
/* Низкий экран — это почти всегда телефон лёжа. Высота там расходуется вся:
   на /pay липкая шапка (61 px) и липкая панель оплаты (179 px) съедали 240 из
   360, и на сам товар оставалось 120 px — карточки и итоговую сумму нельзя
   было увидеть одновременно. Шапка перестаёт липнуть, панель ужимается. */
@media (max-height:520px){
  .top{position:static}
  .checkout{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .total b{font-size:24px}
  .pay{margin-top:8px;padding:12px}
  .why{min-height:0;margin-top:6px}
}

/* Шапка ужимается в два приёма, а не в один, и пороги посчитаны, а не
   выбраны на глаз. Полный набор — знак (110) + кнопка оплаты (130) + меню с
   подписью (91) + зазоры (24) — требует 355 px, а поля контейнера съедают
   40. Значит, полный набор живёт от 395 px, и ставить порог на 400 значило
   держать 5 px запаса: любая другая отрисовка шрифта — и «Deploy a unit»
   снова ломается на две строки. */

/* Первый приём: у кнопки меню исчезает подпись (нужно от 344 px). */
@media (max-width:480px){
  .burger .word{display:none}
  .burger{padding:11px}
  .top .in,.top nav{gap:10px}
}

/* Второй приём: ужимаются знак, кнопка оплаты и статусная строка. Втроём
   знак, кнопка и меню требуют 304 px при 280 доступных на экране в 320. */
@media (max-width:380px){
  .top .in,.top nav{gap:8px}
  .lock .a{font-size:9px;letter-spacing:.28em}
  .lock .b{font-size:17px;letter-spacing:.10em}
  .top nav a.shop{padding:9px 9px;letter-spacing:.10em}
  /* Статусная строка «On air | Binance futures | BTCUSDT» требует 316 px и
     ниже 356 переносилась на вторую строку, утаскивая с собой разделитель —
     тот оказывался слева от первого слова, в пустоте. Перенос оставлен
     страховкой, но доходить до него больше некуда. */
  .status .in{font-size:11px;letter-spacing:.08em}
  .status .in>span{padding-right:10px}
  .status .in>span+span{padding-left:10px}
}

@media (max-width:560px){
  .field{min-height:280px}
  footer.site{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:420px){
  /* Иконка над текстом освобождает карточке всю ширину: на 320 px слово
     BOMBARDMENT требует 109 px при доступных 69 и выдавливает цену за край.
     Отказаться от двух карточек в ряд нельзя — см. выше. */
  .card{flex-direction:column;gap:8px;padding:12px}
  .card .ico{flex-basis:26px;width:26px;height:26px}
  .card .ttl{font-size:14px;letter-spacing:.02em}
  .card .pr{font-size:15px}
  .card .ds{font-size:13.5px}
  .grid,.sides{gap:8px}
}