/* happ-app.pics — тема «модульная сетка».

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

   Типографика делит роли жёстко:
     PoiretOne  — заголовки: тонкая геометрия, ровные круги и прямые;
     Jura       — весь текст и интерфейс: гротеск с квадратными формами;
     RobotoMono — данные: длины, версии, номера, куски строк.

   Цвет почти отсутствует. Чёрный, белый, три серых — и один ультрамарин
   на активный модуль: им подсвечено ровно то, что сейчас важно, и ничего
   больше. Зелёный, янтарный и кирпичный работают только как состояния.

   Радиусов нет вовсе: у модуля углов не скругляют. Тени тоже нет — глубину
   держит контраст плашки и поля. */

@import url('/fonts/faces.css');

:root {
  /* поле и модули */
  --bg:     #E9EAF0;
  --panel:  #FFFFFF;
  --panel2: #F4F5F9;
  --ink:    #0B0C10;
  --ink2:   #4B5062;
  --ink3:   #7B8093;
  --line:   #C7CAD8;
  --line2:  #DFE1EA;

  /* активный модуль */
  --acc:    #2733E6;
  --acc-in: #FFFFFF;
  --acc-bg: #E7E9FE;
  --acc-ln: #B9BEFB;

  /* состояния */
  --ok:     #0E7345;
  --ok-bg:  #E3F4EB;
  --warn:   #8A5200;
  --warn-bg:#FBF0DD;
  --bad:    #A81C2A;
  --bad-bg: #FBE7E8;

  /* ряд модулей вместо линейки */
  --pix: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px);
  --pix-ink: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
  --pix-acc: repeating-linear-gradient(90deg, var(--acc) 0 4px, transparent 4px 8px);

  /* глаз кода: три таких стоят по углам любой крупной плашки */
  --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath fill='%23C7CAD8' d='M0 0h7v7H0V0zm1 1v5h5V1H1z'/%3E%3Crect fill='%23C7CAD8' x='2' y='2' width='3' height='3'/%3E%3C/svg%3E");

  --f-disp: 'PoiretOne', Georgia, serif;
  --f-text: 'Jura', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'RobotoMono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #0A0B10;
    --panel:  #14161F;
    --panel2: #1B1E29;
    --ink:    #EDEFF7;
    --ink2:   #A7ACBE;
    --ink3:   #767C91;
    --line:   #2C3040;
    --line2:  #232733;

    --acc:    #8E97FF;
    --acc-in: #090A10;
    --acc-bg: #1A1E3C;
    --acc-ln: #3A4270;

    --ok:     #4FCB8E;
    --ok-bg:  #10281E;
    --warn:   #E0A44B;
    --warn-bg:#2A2013;
    --bad:    #FF8189;
    --bad-bg: #2C1418;

    --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath fill='%232C3040' d='M0 0h7v7H0V0zm1 1v5h5V1H1z'/%3E%3Crect fill='%232C3040' x='2' y='2' width='3' height='3'/%3E%3C/svg%3E");
  }
}

/* --- основа ---------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 var(--f-text);
  font-feature-settings: 'tnum' 1;
}

img { max-width: 100%; height: auto; }

a { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc-ln); }
a:hover { border-bottom-color: var(--acc); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, canvas:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}

code {
  font: 400 .88em/1.4 var(--f-mono);
  background: var(--panel2);
  border: 1px solid var(--line2);
  padding: 1px 5px;
  word-break: break-word;
}

pre {
  font: 400 13px/1.6 var(--f-mono);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px;
  overflow-x: auto;
}

mark { background: var(--acc-bg); color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: var(--bg); padding: 10px 16px;
  font: 600 12px/1 var(--f-mono);
}
.skip:focus { left: 8px; top: 8px; }

.page { max-width: 1340px; margin: 0 auto; padding: 0 24px 64px; }

/* --- кнопки ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 13px/1 var(--f-text);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 20px; border: 2px solid var(--ink); background: var(--panel);
  color: var(--ink); cursor: pointer; border-radius: 0; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--panel); border-bottom-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--acc); border-color: var(--acc); color: var(--acc-in); }
.btn--go:hover { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn--do { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn--do:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-in); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink2); }
.btn--ghost:hover { background: var(--panel2); color: var(--ink); border-color: var(--ink); }

/* --- шапка ----------------------------------------------------------------- */
.hdr {
  position: relative;
  padding: 18px 0 0;
  margin-bottom: 28px;
  background:
    var(--pix-ink) left bottom / 100% 4px no-repeat;
  padding-bottom: 14px;
}

.hdr__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.brand {
  display: grid;
  grid-template-columns: auto max-content 1fr;
  grid-template-areas: 'logo mark rest' 'logo tag tag';
  align-items: center;
  column-gap: 12px;
  border: 0; color: var(--ink);
}
.brand__badge { grid-area: logo; display: block; color: var(--ink); }
.brand__svg { display: block; }
.brand__acc { fill: var(--acc); }
.brand__word { display: contents; }
.brand__row { grid-area: mark; display: flex; align-items: baseline; gap: 8px; }
.brand__row b {
  font: 400 30px/1 var(--f-disp);
  letter-spacing: .16em;
}
.brand__row em {
  font: 600 12px/1 var(--f-mono);
  font-style: normal; letter-spacing: .18em;
  color: var(--acc-in); background: var(--acc);
  padding: 4px 7px;
}
.brand__tag {
  grid-area: tag;
  font: 400 10px/1.4 var(--f-mono);
  letter-spacing: .14em; color: var(--ink3);
  margin-top: 4px;
}

.hdr__nav { display: flex; align-items: center; gap: 22px; justify-self: center; }
.hdr__links { display: flex; gap: 20px; }
.hdr__links a {
  font: 700 13px/1 var(--f-text);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink2); border: 0; padding: 6px 0;
  border-bottom: 3px solid transparent;
}
.hdr__links a:hover { color: var(--ink); border-bottom-color: var(--line); }
.hdr__links a[aria-current] { color: var(--ink); border-bottom-color: var(--acc); }

.searchbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink2);
  font: 400 13px/1 var(--f-text); padding: 9px 12px; cursor: pointer;
}
.searchbtn:hover { border-color: var(--ink); color: var(--ink); }
.searchbtn kbd {
  font: 600 10px/1 var(--f-mono); border: 1px solid var(--line);
  padding: 3px 5px; color: var(--ink3);
}

.hdr__go { padding: 12px 18px; }
.hdr__go-s { display: none; }

.burger {
  display: none;
  font: 700 12px/1 var(--f-mono); letter-spacing: .14em;
  background: var(--panel); border: 2px solid var(--ink); color: var(--ink);
  padding: 10px 12px; cursor: pointer;
}

.mnav { display: none; }

/* --- сетка страницы --------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.wrap { max-width: 1240px; margin: 0 auto; }

/* --- сайдбар ---------------------------------------------------------------- */
.side { position: sticky; top: 18px; }
.side__grp { margin-bottom: 26px; }
.side__ttl {
  display: block;
  font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); padding-bottom: 10px;
  background: var(--pix) left bottom / 100% 4px no-repeat;
  margin-bottom: 12px;
}
.side__list { list-style: none; margin: 0; padding: 0; }
.side__list li { margin-bottom: 2px; }
.side__list a {
  display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: baseline;
  padding: 7px 8px; border: 0; color: var(--ink2); font-size: 15px; line-height: 1.35;
}
.side__list a:hover { background: var(--panel); color: var(--ink); }
.side__i { font: 600 10px/1.4 var(--f-mono); color: var(--ink3); letter-spacing: .06em; }
.side__list a[aria-current] { background: var(--ink); color: var(--panel); }
.side__list a[aria-current] .side__i { color: var(--panel); }

.side__flat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.side__flat a {
  display: inline-block; border: 1px solid var(--line); padding: 5px 9px;
  font: 400 13px/1 var(--f-text); color: var(--ink2);
}
.side__flat a:hover { border-color: var(--ink); color: var(--ink); }

.side__cta { border: 2px solid var(--ink); background: var(--panel); padding: 16px; }
.side__cta-tag {
  display: block; font: 600 10px/1.3 var(--f-mono); letter-spacing: .12em;
  color: var(--acc-in); background: var(--acc); padding: 5px 7px; margin-bottom: 10px;
}
.side__cta-ttl { margin: 0 0 6px; font: 400 20px/1.2 var(--f-disp); }
.side__cta-txt { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.side__cta .btn { width: 100%; }

/* --- крошки и статья --------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font: 400 12px/1.4 var(--f-mono); color: var(--ink3); margin-bottom: 18px;
}
.crumbs a { color: var(--ink3); border: 0; }
.crumbs a:hover { color: var(--acc); }
.crumbs i { font-style: normal; color: var(--line); }

.art { max-width: 900px; }
.art h1 {
  font: 400 clamp(30px, 3.6vw, 46px)/1.1 var(--f-disp);
  letter-spacing: .01em; margin: 0 0 14px;
}
.art__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 20px; }
.art__upd, .art__rt {
  font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); border: 1px solid var(--line2); padding: 6px 8px;
}
.art__lead {
  font-size: 19px; line-height: 1.65; color: var(--ink);
  border-left: 6px solid var(--acc); padding-left: 16px; margin: 0 0 26px;
}

.art h2 {
  font: 700 clamp(21px, 2.2vw, 26px)/1.25 var(--f-text);
  margin: 40px 0 14px; padding-bottom: 12px;
  background: var(--pix) left bottom / 100% 4px no-repeat;
}
.art h3 { font: 700 18px/1.35 var(--f-text); margin: 28px 0 10px; }
.art p { margin: 0 0 16px; }
.art ul:not([class]), .art ol:not([class]) { margin: 0 0 18px; padding-left: 0; list-style: none; }
.art ul:not([class]) li, .art ol:not([class]) li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.art ul:not([class]) li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 9px; height: 9px; background: var(--acc);
}
.art ol:not([class]) { counter-reset: n; }
.art ol:not([class]) li::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .18em;
  font: 600 11px/1.6 var(--f-mono); color: var(--ink3);
}

/* --- SIGNATURE: кодер -------------------------------------------------------- */
.coder {
  border: 2px solid var(--ink);
  background: var(--panel);
  padding: 20px;
  margin: 0 0 28px;
  background-image: var(--eye), var(--eye), var(--eye);
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px);
  background-repeat: no-repeat;
  background-size: 13px 13px;
}
.coder__hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; }
.coder__cap {
  font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.coder__sig { display: inline-flex; gap: 4px; }
.coder__sig i { width: 8px; height: 8px; background: var(--ink); display: block; }
.coder__sig i:last-child { background: var(--acc); }
.coder__lead { margin: 12px 22px 18px; font-size: 15px; line-height: 1.6; color: var(--ink2); }

/* Кодер живёт в двух местах: узкой колонкой на первом экране главной
   и в полную ширину на своей странице. По умолчанию он складывается
   в одну колонку, две появляются только там, где для них есть место. */
.coder__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 0 6px 6px;
}
.coder__view { max-width: 380px; }

@media (min-width: 1000px) {
  .art .coder__body, .coder--wide .coder__body {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 24px;
  }
}

.coder__screen { min-width: 0; }
.coder__view {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.coder__cv { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.coder__empty {
  margin: 0; text-align: center;
  font: 600 13px/1.6 var(--f-mono); letter-spacing: .2em; color: #B9BDCB;
}
.coder__empty span {
  display: block; font: 400 12px/1.5 var(--f-text); letter-spacing: normal;
  color: #9AA0B0; margin-top: 6px;
}

.coder__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 12px 0 0; background: var(--line2); border: 1px solid var(--line2); }
.coder__meta div { background: var(--panel); padding: 8px 6px; text-align: center; }
.coder__meta dt { font: 600 9px/1.2 var(--f-mono); letter-spacing: .1em; color: var(--ink3); }
.coder__meta dd { margin: 4px 0 0; font: 600 14px/1 var(--f-mono); color: var(--ink); }

.coder__panel { display: flex; flex-direction: column; min-width: 0; }
.coder__lbl, .chk__lbl {
  font: 600 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink3);
  margin-bottom: 8px;
}
.coder__in, .chk__in {
  width: 100%; resize: vertical;
  font: 400 14px/1.5 var(--f-mono);
  color: var(--ink); background: var(--panel2);
  border: 1px solid var(--line); padding: 12px;
  word-break: break-all;
}
.coder__in:focus, .chk__in:focus { border-color: var(--acc); background: var(--panel); }
.coder__row, .chk__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.coder__row .btn, .chk__row .btn { padding: 11px 14px; font-size: 12px; }
.coder__msg { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.coder__warn {
  margin: auto 0 0; font-size: 13px; line-height: 1.55; color: var(--ink2);
  border-left: 4px solid var(--warn); background: var(--warn-bg); padding: 10px 12px;
}
@media (prefers-color-scheme: dark) { .coder__warn { color: var(--ink); } }

.coder--compact { padding: 14px; }

/* --- разбор строки ----------------------------------------------------------- */
.chk {
  border: 2px solid var(--ink); background: var(--panel); padding: 20px; margin: 0 0 28px;
  background-image: var(--eye), var(--eye), var(--eye);
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px);
  background-repeat: no-repeat; background-size: 13px 13px;
}
.chk__hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; }
.chk__cap { font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.chk__lead { margin: 12px 22px 16px; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.chk__out { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.chk__i {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px;
  border-left: 5px solid var(--line); background: var(--panel2); padding: 9px 12px;
}
.chk__i b { font: 600 12px/1.4 var(--f-mono); letter-spacing: .04em; }
.chk__i span { font-size: 14px; line-height: 1.5; color: var(--ink2); }
.chk__i--ok { border-left-color: var(--ok); }
.chk__i--warn { border-left-color: var(--warn); }
.chk__i--bad { border-left-color: var(--bad); }
.chk__fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink3); }

/* --- SIGNATURE: карта переездов ---------------------------------------------- */
.hops { margin: 0 0 32px; }
.hops__cap {
  display: block; font: 600 11px/1 var(--f-mono); letter-spacing: .16em;
  color: var(--ink3); padding-bottom: 12px;
  background: var(--pix) left bottom / 100% 4px no-repeat; margin-bottom: 16px;
}
.hops__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hop__in {
  display: flex; flex-direction: column; height: 100%;
  border: 2px solid var(--ink); background: var(--panel); padding: 16px; color: var(--ink);
  border-bottom-color: var(--ink);
}
.hop__in:hover { background: var(--ink); color: var(--panel); }
.hop__in:hover .hop__note, .hop__in:hover .hop__go { color: var(--panel); }
.hop__in:hover .hop__path b { border-color: var(--panel); }
.hop__path { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.hop__path b {
  font: 600 9px/1 var(--f-mono); letter-spacing: .1em;
  border: 1px solid var(--line); padding: 5px 6px; color: inherit;
}
.hop__path i { width: 22px; height: 4px; background: var(--pix-acc) left center / 8px 4px repeat-x; display: block; }
.hop__nm { font: 400 24px/1.15 var(--f-disp); margin-bottom: 8px; }
.hop__note { font-size: 14px; line-height: 1.5; color: var(--ink2); margin-bottom: 14px; }
.hop__go { margin-top: auto; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--acc); }
.hop.is-here .hop__in { background: var(--acc-bg); border-color: var(--acc); }
/* На широком экране плашки переездов тянутся к квадрату: это тот же модуль
   кода, только крупный. Жёсткого соотношения не ставим — текст важнее формы,
   и на узкой колонке статьи плашек в ряду две, а не четыре. */
@media (min-width: 1100px) { .hop__in { min-height: 220px; } }
.art .hops__grid { grid-template-columns: repeat(2, 1fr); }

/* --- ячейки доступа ---------------------------------------------------------- */
.slots { margin: 0 0 26px; border: 1px solid var(--line); background: var(--panel); padding: 16px; }
.slots__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink3); margin-bottom: 12px; }
.slots__row { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { border: 2px solid var(--line); padding: 12px; text-align: center; background: var(--panel2); }
.slot__n { display: block; font: 600 20px/1 var(--f-mono); color: var(--ink3); }
.slot__l { display: block; font: 600 10px/1.3 var(--f-mono); letter-spacing: .1em; margin: 8px 0 4px; }
.slot__s { display: block; font-size: 13px; color: var(--ink3); }
.slot.is-on { border-color: var(--acc); background: var(--acc-bg); }
.slot.is-on .slot__n, .slot.is-on .slot__s { color: var(--acc); }
.slots__fine { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink2); }

/* --- лента разделов ---------------------------------------------------------- */
.strack { margin: 0 0 26px; }
.strack__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.strack__c a {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); padding: 8px 12px; color: var(--ink2);
  font: 700 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .06em;
}
.strack__c a:hover { border-color: var(--ink); color: var(--ink); }
.strack__i { font: 600 10px/1 var(--f-mono); color: var(--ink3); }
.strack__c.is-here a { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.strack__c.is-here .strack__i { color: var(--acc); }

/* --- каталог разделов -------------------------------------------------------- */
.cat { display: grid; gap: 10px; margin: 0 0 30px; }
.cat__i {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border: 1px solid var(--line); background: var(--panel); padding: 16px; color: var(--ink);
}
.cat__i:hover { border-color: var(--ink); background: var(--panel2); }
.cat__code {
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--ink); color: var(--panel);
  font: 400 26px/1 var(--f-disp);
}
.cat__i:hover .cat__code { background: var(--acc); color: var(--acc-in); }
.cat__ttl { display: block; font: 700 19px/1.2 var(--f-text); }
.cat__sub { display: block; font-size: 14px; line-height: 1.5; color: var(--ink2); margin-top: 4px; }
.cat__sample { display: block; font: 400 11px/1.5 var(--f-mono); color: var(--ink3); margin-top: 6px; }
.cat__n { font: 600 22px/1 var(--f-mono); color: var(--ink); text-align: center; }
.cat__n small { display: block; font: 400 10px/1 var(--f-mono); color: var(--ink3); margin-top: 4px; }

/* --- блоки статьи ------------------------------------------------------------ */
.ans {
  border: 2px solid var(--ink); background: var(--panel); padding: 18px; margin: 0 0 24px;
  background-image: var(--eye), var(--eye);
  background-position: calc(100% - 9px) 9px, 9px calc(100% - 9px);
  background-repeat: no-repeat; background-size: 11px 11px;
}
.ans__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.ans__cap { font: 600 10px/1 var(--f-mono); letter-spacing: .16em; background: var(--ink); color: var(--panel); padding: 5px 7px; }
.ans__take { font: 600 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--acc); border: 1px solid var(--acc-ln); padding: 5px 7px; }
.ans__txt { margin: 0; font-size: 18px; line-height: 1.6; }
.ans__list { margin: 12px 0 0; padding-left: 0; list-style: none; counter-reset: a; }
.ans__list li { position: relative; padding-left: 26px; margin-bottom: 7px; font-size: 15px; }
.ans__list li::before {
  counter-increment: a; content: counter(a, decimal-leading-zero);
  position: absolute; left: 0; top: .2em; font: 600 11px/1.5 var(--f-mono); color: var(--acc);
}

.move { margin: 0 0 26px; }
.move__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink3); margin-bottom: 10px; }
.move__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.move__c { border: 2px solid var(--line); background: var(--panel); padding: 14px; }
.move__c--b { border-color: var(--acc); background: var(--acc-bg); }
.move__n { display: block; font: 600 9px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink3); margin-bottom: 8px; }
.move__c b { display: block; font: 700 16px/1.25 var(--f-text); }
.move__s { display: block; font-size: 13px; line-height: 1.5; color: var(--ink2); margin-top: 6px; }

.both { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 26px; }
.both__col { border: 1px solid var(--line); background: var(--panel); padding: 14px; }
.both__col--yes { border-top: 5px solid var(--ok); }
.both__col--no { border-top: 5px solid var(--bad); }
.both__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .14em; margin-bottom: 10px; }
.both__col--yes .both__cap { color: var(--ok); }
.both__col--no .both__cap { color: var(--bad); }
.both__col ul { margin: 0; padding-left: 0; list-style: none; }
.both__col li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
.both__col li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: currentColor; opacity: .5; }
.both__col--yes li::before { background: var(--ok); opacity: 1; }
.both__col--no li::before { background: var(--bad); opacity: 1; }

.fix { margin: 0 0 26px; border: 1px solid var(--line); background: var(--panel); }
.fix__cap {
  display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em;
  background: var(--ink); color: var(--panel); padding: 10px 14px;
}
.fix__list { list-style: none; margin: 0; padding: 0; }
.fix__i {
  display: grid; grid-template-columns: 38px 1fr 1fr 1fr; gap: 14px;
  padding: 14px; border-top: 1px solid var(--line2); align-items: start;
}
.fix__n { font: 600 12px/1.5 var(--f-mono); color: var(--acc); }
.fix__sign { font-weight: 700; font-size: 15px; line-height: 1.45; }
.fix__why { font-size: 14px; line-height: 1.5; color: var(--ink2); }
.fix__do { font-size: 14px; line-height: 1.5; }

.wall { margin: 0 0 26px; }
.wall__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink3); margin-bottom: 10px; }
.wall__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.wall__list a {
  display: block; border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; height: 100%; color: var(--ink);
}
.wall__list a:hover { border-color: var(--acc); background: var(--acc-bg); }
.wall__list b { display: block; font: 700 15px/1.3 var(--f-text); }
.wall__list span { display: block; font-size: 13px; line-height: 1.45; color: var(--ink2); margin-top: 5px; }

.rows { list-style: none; margin: 0 0 26px; padding: 0; }
.row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border: 1px solid var(--line); background: var(--panel); padding: 13px 16px; margin-bottom: 6px; color: var(--ink);
}
.row:hover { border-color: var(--ink); background: var(--panel2); }
.row__idx { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--acc); }
.row__ttl { display: block; font: 700 16px/1.3 var(--f-text); }
.row__sub { display: block; font-size: 14px; line-height: 1.45; color: var(--ink2); margin-top: 3px; }
.row__go { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink3); }
.row:hover .row__go { color: var(--acc); }

.steps { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: s; }
.steps > li {
  position: relative; padding: 0 0 20px 60px; margin-bottom: 4px;
  border-left: 4px solid var(--line2); margin-left: 16px;
}
.steps > li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: -20px; top: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--panel);
  font: 600 13px/1 var(--f-mono);
}
.steps > li:last-child { border-left-color: transparent; }
.step__ttl { display: block; font: 700 17px/1.35 var(--f-text); margin-bottom: 6px; }
.steps p { margin: 0 0 10px; }
.steps ul { margin: 0 0 10px; padding-left: 0; list-style: none; }
.steps ul li { position: relative; padding-left: 20px; margin-bottom: 6px; font-size: 15px; }
.steps ul li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--acc); }

.tw { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--line); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: left; font: 600 10px/1.3 var(--f-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--panel); background: var(--ink);
  padding: 10px 12px; vertical-align: bottom;
}
td { padding: 11px 12px; border-top: 1px solid var(--line2); vertical-align: top; line-height: 1.5; }
tbody tr:nth-child(even) td { background: var(--panel2); }

.note { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--line); border-left: 6px solid var(--ink3); background: var(--panel); }
.note p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.note p:last-child { margin-bottom: 0; }
.note ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.note li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: 15px; }
.note li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: currentColor; }
.note__ttl { display: block; font: 600 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.note--info { border-left-color: var(--acc); }
.note--info .note__ttl { color: var(--acc); }
.note--ok { border-left-color: var(--ok); background: var(--ok-bg); }
.note--ok .note__ttl { color: var(--ok); }
.note--warn { border-left-color: var(--warn); background: var(--warn-bg); }
.note--warn .note__ttl { color: var(--warn); }
.note--down { border-left-color: var(--bad); background: var(--bad-bg); }
.note--down .note__ttl { color: var(--bad); }

.faq { margin: 0 0 26px; border-top: 1px solid var(--line); }
.faq h3 {
  margin: 0; padding: 16px 0 6px; font: 700 17px/1.35 var(--f-text);
}
.faq p { margin: 0 0 14px; color: var(--ink2); font-size: 15px; line-height: 1.6; }
.faq p:last-child { padding-bottom: 8px; border-bottom: 1px solid var(--line2); }

.bill { border: 2px solid var(--ink); background: var(--panel); padding: 16px; margin: 0 0 24px; }
.bill__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink3); margin-bottom: 12px; }
.bill__rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line2); margin: 0; border: 1px solid var(--line2); }
.bill__rows div { background: var(--panel); padding: 10px; text-align: center; }
.bill__rows dt { font: 600 9px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink3); }
.bill__rows dd { margin: 6px 0 0; font: 600 18px/1 var(--f-mono); }
.bill__fine { margin: 12px 0 0; font-size: 14px; color: var(--ink2); }

/* --- скриншоты ---------------------------------------------------------------- */
.shot { margin: 0 0 24px; }
.shot__frame {
  display: grid; place-items: center; min-height: 190px;
  border: 2px dashed var(--line); background: var(--panel2);
}
.shot__code { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink3); }
.shot img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: var(--panel); border: 1px solid var(--line); }
.shot__link { display: block; border: 0; position: relative; }
.shot__zoom { display: block; font: 400 11px/1 var(--f-mono); color: var(--ink3); margin-top: 6px; }
.shot__cap { font-size: 14px; line-height: 1.5; color: var(--ink2); margin-top: 8px; }
.shot__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot__part { position: relative; }
.shot__part img { max-height: 400px; }
.shot__mark {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--ink); color: var(--panel); font: 600 11px/1 var(--f-mono); padding: 5px 7px;
}
.shot__partcap { display: block; font-size: 13px; color: var(--ink3); margin-top: 6px; }

/* --- предложения ------------------------------------------------------------- */
.spark {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  border: 2px solid var(--acc); background: var(--acc-bg); padding: 12px 14px; margin: 0 0 26px;
}
.spark__tag { font: 600 10px/1.2 var(--f-mono); letter-spacing: .1em; background: var(--acc); color: var(--acc-in); padding: 6px 8px; }
.spark__txt { margin: 0; font-size: 15px; line-height: 1.5; }
.spark .btn { padding: 11px 16px; font-size: 12px; }

.cta {
  border: 2px solid var(--ink); background: var(--panel); padding: 22px; margin: 30px 0;
  background-image: var(--eye), var(--eye), var(--eye);
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px);
  background-repeat: no-repeat; background-size: 13px 13px;
}
.cta__tag { display: inline-block; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; background: var(--ink); color: var(--panel); padding: 6px 8px; margin: 0 0 12px 22px; }
.cta__ttl { margin: 0 0 10px; font: 400 clamp(22px, 2.4vw, 28px)/1.2 var(--f-disp); }
.cta__txt { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.cta__pts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cta__pts li { font: 600 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); padding: 6px 8px; color: var(--ink2); }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta__fine { font: 400 12px/1.4 var(--f-mono); color: var(--ink3); }
.cta--trial { border-color: var(--acc); }
.cta--trial .cta__tag { background: var(--acc); color: var(--acc-in); }

.goto { border: 1px solid var(--line); border-left: 6px solid var(--ink); background: var(--panel); padding: 16px; margin: 26px 0; }
.goto__tag { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink3); margin-bottom: 8px; }
.goto__txt { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }

.foot-go {
  border: 2px solid var(--acc); background: var(--panel); padding: 20px; margin: 36px 0 26px;
  background-image: var(--eye), var(--eye), var(--eye);
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px);
  background-repeat: no-repeat; background-size: 13px 13px;
}
.foot-go__tag { display: inline-block; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; background: var(--acc); color: var(--acc-in); padding: 6px 8px; margin: 0 0 12px 22px; }
.foot-go__txt { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink2); }

.also { margin: 0 0 24px; }
.also__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink3); padding-bottom: 10px; background: var(--pix) left bottom / 100% 4px no-repeat; margin-bottom: 12px; }
.also__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.also__list a { display: block; border: 1px solid var(--line2); padding: 10px 12px; font-size: 15px; color: var(--ink); }
.also__list a:hover { border-color: var(--acc); color: var(--acc); }

.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.helpful__q { font: 600 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink3); }
.helpful__btns { display: flex; gap: 6px; }
.helpful button {
  font: 600 11px/1 var(--f-mono); letter-spacing: .1em; background: var(--panel);
  border: 1px solid var(--line); color: var(--ink2); padding: 8px 14px; cursor: pointer;
}
.helpful button:hover { border-color: var(--ink); color: var(--ink); }
.helpful__thanks { font-size: 14px; color: var(--ok); }
.helpful[data-done] .helpful__btns { display: none; }

/* --- подвал ------------------------------------------------------------------ */
.ftr { margin-top: 56px; padding-top: 24px; background: var(--pix-ink) left top / 100% 4px no-repeat; }
.ftr__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 24px; }
.ftr__ttl { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink3); margin-bottom: 10px; }
.ftr__grid ul { list-style: none; margin: 0; padding: 0; }
.ftr__grid li { margin-bottom: 6px; }
.ftr__grid a { font-size: 14px; color: var(--ink2); border: 0; }
.ftr__grid a:hover { color: var(--acc); }
.ftr__disc { font-size: 13px; line-height: 1.6; color: var(--ink3); border: 1px solid var(--line2); padding: 14px; margin: 0 0 18px; }
.ftr__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; }
.ftr__bar a { color: var(--ink2); border: 0; }
.ftr__bar a:hover { color: var(--acc); }
.ftr__cp { margin-left: auto; color: var(--ink3); }

/* --- поиск -------------------------------------------------------------------- */
.sdlg { position: fixed; inset: 0; z-index: 70; display: none; }
.sdlg.is-open { display: block; }
.sdlg__bd { position: absolute; inset: 0; background: rgba(11, 12, 16, .55); }
.sdlg__box {
  position: relative; max-width: 660px; margin: 8vh auto 0;
  background: var(--panel); border: 2px solid var(--ink); padding: 16px;
}
.sdlg__box input {
  width: 100%; font: 400 17px/1.4 var(--f-text); padding: 12px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
}
.sres { list-style: none; margin: 12px 0 0; padding: 0; max-height: 54vh; overflow-y: auto; }
.sres a { display: block; padding: 10px 12px; border: 0; color: var(--ink); }
.sres a.is-sel, .sres a:hover { background: var(--acc-bg); }
.sres__t { display: block; font-weight: 700; font-size: 15px; }
.sres__q { display: block; font-size: 13px; color: var(--ink2); margin-top: 3px; }
.sres__p { display: block; font: 600 9px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink3); margin-top: 5px; }
.sdlg__foot { font: 400 11px/1 var(--f-mono); color: var(--ink3); margin-top: 12px; }

.finder { border: 2px solid var(--ink); background: var(--panel); padding: 18px; margin: 0 0 30px; }
.finder__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink3); margin-bottom: 10px; }
.finder__in {
  width: 100%; font: 400 17px/1.4 var(--f-text); padding: 13px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
}
.finder__in:focus { border-color: var(--acc); }
.finder__try { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.finder__try button {
  font: 400 13px/1 var(--f-text); background: transparent; border: 1px solid var(--line);
  color: var(--ink2); padding: 7px 10px; cursor: pointer;
}
.finder__try button:hover { border-color: var(--acc); color: var(--acc); }
.finder__out { margin-top: 14px; }
.fres__cap { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink3); margin-bottom: 8px; }
.fres__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fres__list a { display: block; border: 1px solid var(--line2); padding: 10px 12px; color: var(--ink); }
.fres__list a:hover { border-color: var(--acc); background: var(--acc-bg); }
.fres__grp { display: block; font: 600 9px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink3); margin-bottom: 4px; }
.fres__t { display: block; font-weight: 700; font-size: 15px; }
.fres__q { display: block; font-size: 13px; color: var(--ink2); margin-top: 3px; }
.fres__none-t { margin: 0 0 6px; font-weight: 700; }
.fres__none-s { margin: 0; font-size: 14px; color: var(--ink2); }
.finder__idle { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink3); }

/* --- нижняя панель ------------------------------------------------------------ */
.gobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(105%); transition: transform .2s; }
.gobar.is-on { transform: none; }
.gobar__in {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--panel); padding: 10px 12px;
}
.gobar__txt { display: flex; flex-direction: column; min-width: 0; }
.gobar__txt b { font-size: 14px; }
.gobar__txt span { font-size: 12px; color: #A9AEC0; }
.gobar .btn { margin-left: auto; padding: 10px 14px; font-size: 11px; }
.gobar__x { background: transparent; border: 0; color: #A9AEC0; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
body.has-gobar { padding-bottom: 64px; }

/* --- главная ------------------------------------------------------------------ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 560px); gap: 36px; align-items: start; margin-bottom: 36px; }
.hero__tag { display: inline-block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; background: var(--ink); color: var(--panel); padding: 6px 8px; margin-bottom: 14px; }
.hero h1 { font: 400 clamp(32px, 4.4vw, 54px)/1.06 var(--f-disp); margin: 0 0 16px; }
.hero__lead { font-size: 19px; line-height: 1.6; color: var(--ink2); margin: 0 0 20px; }
.hero__facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero__facts li { border: 1px solid var(--line); background: var(--panel); padding: 12px; }
.hero__facts b { display: block; font: 600 20px/1 var(--f-mono); }
.hero__facts span { display: block; font-size: 13px; line-height: 1.4; color: var(--ink2); margin-top: 6px; }

.home__sec { margin: 0 0 42px; }
.home__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font: 700 clamp(20px, 2.2vw, 26px)/1.2 var(--f-text);
  padding-bottom: 12px; background: var(--pix) left bottom / 100% 4px no-repeat; margin: 0 0 16px;
}
.home__cap span { font: 400 12px/1.4 var(--f-mono); color: var(--ink3); text-align: right; }
.home__lead { margin: -4px 0 18px; font-size: 16px; line-height: 1.6; color: var(--ink2); max-width: 760px; }

/* --- страница оплаты ----------------------------------------------------------- */
.pay { display: grid; gap: 26px; }
.pay__head { max-width: 860px; }
.pay__head h1 { font: 400 clamp(30px, 3.6vw, 46px)/1.1 var(--f-disp); margin: 0 0 14px; }
.pay__lead { font-size: 18px; line-height: 1.6; color: var(--ink2); margin: 0; }
.pay__panel {
  border: 2px solid var(--ink); background: var(--panel); padding: 18px;
  background-image: var(--eye), var(--eye), var(--eye);
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px);
  background-repeat: no-repeat; background-size: 13px 13px;
}
.pay__hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 14px; }
.pay__cap { font: 600 11px/1 var(--f-mono); letter-spacing: .16em; }
.pay__tag { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; background: var(--acc); color: var(--acc-in); padding: 6px 8px; }
.pay__box { min-height: 320px; }
.pay__fb { font-size: 15px; line-height: 1.6; color: var(--ink2); margin: 0; }
.pay__pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pay__pts li { border: 1px solid var(--line); background: var(--panel); padding: 12px; }
.pay__pts b { display: block; font: 700 15px/1.3 var(--f-text); }
.pay__pts span { display: block; font-size: 13px; line-height: 1.45; color: var(--ink2); margin-top: 5px; }
.pay__art { max-width: 900px; }

/* --- адаптив ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 236px minmax(0, 1fr); gap: 30px; }
  .hero { grid-template-columns: 1fr; }
  .hops__grid { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: repeat(3, 1fr); }
  .pay__pts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .burger { display: inline-block; }
  .hdr__in { grid-template-columns: auto 1fr auto; }
  .brand__tag { display: none; }
  .mnav { display: none; }
  .mnav.is-open { display: block; margin-top: 14px; }
  .mnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .mnav a {
    display: block; border: 1px solid var(--line); background: var(--panel);
    padding: 12px; color: var(--ink); font-weight: 700; text-transform: uppercase;
    font-size: 13px; letter-spacing: .06em;
  }
  .layout { grid-template-columns: 1fr; }
  .side { position: static; display: none; }
  .side.is-open { display: block; margin-bottom: 24px; }
  .coder__body { grid-template-columns: 1fr; }
  .coder__hd, .coder__lead, .chk__hd, .chk__lead, .pay__hd { padding-left: 16px; padding-right: 16px; }
  .fix__i { grid-template-columns: 30px 1fr; }
  .fix__why, .fix__do { grid-column: 2; }
  .move__row { grid-template-columns: 1fr; }
  .chk__i { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 680px) {
  .page { padding: 0 14px 56px; }
  body { font-size: 16px; }
  .hops__grid { grid-template-columns: 1fr; }
  .both { grid-template-columns: 1fr; }
  .hero__facts { grid-template-columns: 1fr; }
  .slots__row { grid-template-columns: 1fr; }
  .coder__meta { grid-template-columns: repeat(2, 1fr); }
  .bill__rows { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); }
  .cat__i { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .cat__code { width: 44px; height: 44px; font-size: 20px; }
  .cat__n { display: none; }
  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row__go { display: none; }
  .spark { grid-template-columns: 1fr; }
  .shot__pair { grid-template-columns: 1fr; }
  .shot img { max-height: none; }
  .pay__pts { grid-template-columns: 1fr; }
  .brand__row b { font-size: 24px; }
  .art__lead { font-size: 17px; }
  .steps > li { padding-left: 44px; margin-left: 12px; }
  .steps > li::before { width: 30px; height: 30px; left: -17px; font-size: 11px; }
}

/* Узкий телефон: шапка ужимается целиком — знак, вордмарк, бургер и кнопка.
   Иначе три элемента в ряд дают горизонтальную прокрутку уже на 360 px. */
@media (max-width: 480px) {
  .hdr__in { gap: 8px; }
  .hdr__go-l { display: none; }
  .hdr__go-s { display: inline; }
  .hdr__go { padding: 10px 11px; font-size: 10px; letter-spacing: .04em; }
  .brand__tag { display: none; }
  .brand { column-gap: 8px; }
  .brand__svg { width: 26px; height: 26px; }
  .brand__row { gap: 6px; }
  .brand__row b { font-size: 22px; letter-spacing: .12em; }
  .brand__row em { font-size: 10px; padding: 3px 5px; letter-spacing: .12em; }
  .burger { font-size: 10px; padding: 9px 10px; letter-spacing: .06em; }
}

@media print {
  .hdr, .side, .gobar, .sdlg, .cta, .foot-go, .spark { display: none; }
}