/* Посадочные страницы: светлые, быстрые, без 3D на критическом пути. */
:root{
  --ink:#0D2039; --ink-2:#46586E; --ink-3:#616D7D;
  --bg:#FCFDFE; --card:#FFFFFF; --line:#E1E6EC; --hover:#F4F7FA;
  --accent:#C8412B;             /* штамп — единственный акцент интерфейса */
  --void:#05070B;               /* пустота кадра */
  --deep:#0A1A2F;               /* глубина: тёмные секции */
  --paper:#F2F0EC;              /* бумага: светлые секции */
  /* Служебный цвет прибора. НЕ интерфейсный: запрещён в кнопках, ссылках,
     подписях и любых элементах вне визуализации досмотра. */
  --scan:#4FD4E8;               /* рентген-просветка и полоса сканирования */
  --scan-core:#EAF7FF;          /* ядро свечения */
  --wrap:1312px; --col:900px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px;
  --t-cap:12px; --t-sm:14px; --t-body:16px; --t-lg:18px;
  --t-h3:clamp(19px,1.4vw,22px); --t-h2:clamp(24px,2.4vw,34px);
  --t-h1:clamp(30px,3.6vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Подпись — не значение. Моноширинный держим только там, где стоит число:
     ставка, срок, объём, тоннаж, номер лицензии, телефон, счётчик.
     Всё остальное — Onest с тем же трекингом и капсом, чтобы служебный слой
     читался, но не спорил с основным шрифтом. */
  --label:'Onest',system-ui,-apple-system,sans-serif;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Дисплейная гарнитура: только H1, H2 и крупные цифры. Контраст со шрифтом
     текста — то, что отличает характерную страницу от грамотной безликой. */
  --display:'Unbounded','Onest',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.03em}
/* длинные заголовки контентных страниц: Unbounded широкая, на 500 весе
   в три строки читается тяжело — держим их легче и мельче */
.hero h1{font-weight:300;font-size:clamp(28px,3vw,42px);line-height:1.08}
.tablewrap h2,.text h2,.faq h2,.rel h2,.boxes h2{font-size:clamp(22px,2vw,30px)}
h1{font-size:var(--t-h1);letter-spacing:-.03em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
/* контейнер 1312 + боковое поле 40 по стандарту: узкая колонка 1180
   посреди широкого экрана и давала остаточное «сайт внутри сайта» */
.wrap{width:min(var(--wrap),calc(100% - 80px));margin:0 auto}
@media (max-width:860px){.wrap{width:calc(100% - var(--s8))}}
.mono{font-family:var(--mono);font-size:var(--t-cap);letter-spacing:.06em}
/* класс .label — тот же служебный слой, но текстовой гарнитурой */
.label{font-family:var(--label);font-size:var(--t-cap);letter-spacing:.06em}
.mono,.proof__cell b,.scan__gauge b,table td,table th{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:#fff;padding:var(--s3) var(--s4);border:1px solid var(--ink)}

.hdr{position:sticky;top:0;z-index:50;background:rgba(252,253,254,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
/* поверх кадра шапка стеклянная и светлая по тексту; при прокрутке садится на фон */
body.has-scan .hdr{position:fixed;left:0;right:0;background:transparent;
  backdrop-filter:none;border-bottom-color:transparent;color:#fff}
body.has-scan .hdr .brand__mark{color:#fff}
body.has-scan .hdr .nav a{color:rgba(255,255,255,.72)}
body.has-scan .hdr .nav a:hover{color:#fff}
body.has-scan .hdr .cta{border-color:rgba(255,255,255,.42);color:#fff}
body.has-scan .hdr .cta:hover{background:#fff;color:var(--ink)}
body.has-scan .hdr.is-solid{background:rgba(252,253,254,.94);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);color:var(--ink)}
body.has-scan .hdr.is-solid .brand__mark{color:var(--ink)}
body.has-scan .hdr.is-solid .nav a{color:var(--ink-2)}
body.has-scan .hdr.is-solid .nav a:hover{color:var(--ink)}
body.has-scan .hdr.is-solid .cta{border-color:var(--ink);color:var(--ink)}
body.has-scan .hdr.is-solid .cta:hover{background:var(--ink);color:#fff}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);height:68px}
.brand__mark{width:128px;height:32px;color:var(--ink)}
.nav{display:flex;gap:var(--s6)}
.nav a{color:var(--ink-2);font-size:var(--t-sm);transition:color .2s var(--ease)}
.nav a:hover{color:var(--ink)}
.cta{font-family:var(--mono);font-size:var(--t-cap);border:1px solid var(--ink);
  padding:9px var(--s4);white-space:nowrap;transition:background .2s var(--ease),color .2s}
.cta:hover{background:var(--ink);color:#fff}

.crumbs{border-bottom:1px solid var(--line);padding:var(--s3) 0;
  font-family:var(--label);font-size:var(--t-cap);color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.5;margin:0 var(--s1)}

.hero{padding:var(--s16) 0 var(--s12);border-bottom:1px solid var(--line)}
.hero h1{max-width:20ch}
.lead{margin-top:var(--s4);max-width:65ch;color:var(--ink-2);font-size:var(--t-lg)}
.hero__proof{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s8)}
.hero__proof b{display:block;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.hero__proof span{font-family:var(--label);font-size:var(--t-cap);color:var(--ink-3)}
.hero__act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:13px var(--s6);font-weight:500;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(200,65,43,.55)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);box-shadow:none}
.btn--sm{padding:8px var(--s4);font-size:var(--t-sm)}

.text{padding:var(--s12) 0}
.text h2{margin:var(--s12) 0 var(--s4);max-width:24ch}
.text h2:first-child{margin-top:0}
.text p{max-width:65ch;color:var(--ink-2);margin-bottom:var(--s3)}

.tablewrap{padding:0 0 var(--s12)}
.tablewrap h2{margin-bottom:var(--s6)}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--label);font-size:var(--t-cap);color:var(--ink-3);font-weight:400;
  text-transform:uppercase;letter-spacing:.06em}
td:last-child{font-family:var(--mono);white-space:nowrap}

.steps{padding:var(--s12) 0;background:var(--hover);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s6)}
.step{background:var(--card);padding:var(--s6);display:grid;gap:var(--s2);align-content:start}
.step .mono{color:var(--accent)}
.step p{font-size:var(--t-sm);color:var(--ink-2)}
.steps__more{margin-top:var(--s4);font-size:var(--t-sm)}
.steps__more a{color:var(--accent);border-bottom:1px solid currentColor}

.faq{padding:var(--s12) 0}
.faq h2{margin-bottom:var(--s6)}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__btn{width:100%;background:none;border:0;padding:var(--s4) 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  text-align:left;font-size:var(--t-lg);font-weight:500;letter-spacing:-.01em}
.faq__btn span{flex:none;width:12px;height:12px;position:relative}
.faq__btn span::before,.faq__btn span::after{content:'';position:absolute;background:var(--ink-3);
  left:0;top:5px;width:12px;height:1px;transition:transform .25s var(--ease)}
.faq__btn span::after{transform:rotate(90deg)}
.faq__btn[aria-expanded="true"] span::after{transform:rotate(0)}
.faq__a{height:0;overflow:hidden;transition:height .3s var(--ease)}
.faq__a p{padding-bottom:var(--s4);max-width:65ch;color:var(--ink-2);font-size:var(--t-sm)}

.rel{padding:0 0 var(--s12)}
.rel ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s2) var(--s6);margin-top:var(--s4)}
.rel a{color:var(--ink-2);font-size:var(--t-sm);border-bottom:1px solid var(--line);padding-bottom:2px}
.rel a:hover{color:var(--ink);border-color:var(--ink)}

.form{padding:var(--s12) 0 var(--s16);background:var(--hover);border-top:1px solid var(--line)}
#lead-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);margin-top:var(--s6)}
/* Правая половина секции пустовала: рядом с формой встаёт то, что человек
   получит в ответ, — и блок перестаёт быть одиноким прямоугольником. */
.form__in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s16);align-items:start}
.f--wide{grid-column:1/-1}
.form__next{border-left:1px solid var(--line);padding-left:var(--s8);margin-top:var(--s6)}
.form__next-h{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-size:var(--t-cap)}
.form__steps{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s6);counter-reset:fs}
.form__steps li{counter-increment:fs;display:grid;gap:var(--s1)}
.form__steps b{font-weight:500;display:flex;gap:var(--s3);align-items:baseline}
.form__steps b::before{content:counter(fs,decimal-leading-zero);font-family:var(--mono);
  font-size:var(--t-cap);color:var(--accent);font-weight:400}
.form__steps span{color:var(--ink-2);font-size:var(--t-sm);line-height:1.5;padding-left:26px}
.form__next-call{margin-top:var(--s8);color:var(--ink-3)}
.form__next-call a{color:var(--ink);border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .form__in{grid-template-columns:minmax(0,1fr);gap:var(--s12)}
  .form__next{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--s8)}
}
.f{display:grid;gap:var(--s2);min-width:0}
/* поле не должно распирать колонку своей встроенной шириной */
#lead-form input,#lead-form select,#lead-form textarea{min-width:0;max-width:100%}
.f--full{grid-column:1/-1}
/* строка-действие раскладывается в ряд; поле с подписью остаётся сеткой */
.f--full:not(.f){display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
#lead-form textarea{width:100%;min-height:96px;resize:vertical}
.f label{font-family:var(--label);font-size:var(--t-cap);color:var(--ink-3)}
.f input,.f textarea,.f select{background:var(--card);border:1px solid var(--line);padding:12px var(--s3);
  font:inherit;color:inherit;border-radius:0;transition:border-color .2s var(--ease)}
/* нативная стрелка select выбивается из строгих полей — рисуем свою */
.f select{appearance:none;-webkit-appearance:none;padding-right:var(--s8);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{
  border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.agree{grid-column:1/-1;display:flex;gap:var(--s3);align-items:flex-start;
  font-size:var(--t-sm);color:var(--ink-2)}
.agree input{margin-top:4px;flex:none}
/* текст согласия — flex-элемент: без min-width:0 длинная ссылка не переносится */
.agree>span{min-width:0}
.agree a{color:var(--accent);border-bottom:1px solid currentColor}
.note{color:var(--ink-3)}
.ok{margin-top:var(--s4);color:var(--accent);font-weight:500}

.foot{border-top:1px solid var(--line);padding:var(--s12) 0 var(--s6);background:var(--ink);color:#fff}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s8)}
.foot__brand{font-weight:600;letter-spacing:.12em;margin-bottom:var(--s3)}
.foot .mono{color:rgba(255,255,255,.6);line-height:2}
.foot__links{display:grid;gap:2px}
.foot__links a:hover{color:#fff}
.foot__bar{max-width:var(--wrap);margin:var(--s8) auto 0;padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);
  width:min(var(--wrap),calc(100% - var(--s8)))}

/* Плашка cookie фиксирована снизу и накрывает ценовую строку первого экрана.
   Место под неё резервируем сразу (см. .scan__in ниже), а не по факту её
   появления: скрипт показывает плашку уже после первой отрисовки, и герой
   прыгал на её высоту. Класс consent-set ставит boot-scan.js до отрисовки. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:none;
  background:var(--card);border-top:1px solid var(--line);padding:12px var(--s4);
  display:flex;gap:var(--s4);align-items:center;justify-content:center;box-shadow:none}
.cookie p{font-size:13px;margin:0;color:var(--ink-2)}
.cookie a{color:var(--accent);border-bottom:1px solid currentColor}

@media (max-width:860px){
  .nav{display:none}
  .hero{padding:var(--s12) 0 var(--s8)}
  #lead-form{grid-template-columns:minmax(0,1fr)}
  .cookie{padding:10px var(--s3);gap:var(--s3);align-items:center;text-align:left}
  .cookie p{font-size:12px;line-height:1.4}
  .cookie .btn{padding:8px var(--s4);font-size:var(--t-sm);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Хабы разделов */
.hubs{padding:var(--s12) 0}
.hubs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s12) var(--s8);background:none;border:0}
.hcard{background:transparent;padding:0;display:flex;flex-direction:column;gap:var(--s2);
  transition:background .2s var(--ease)}
.hcard:hover .hcard__go{color:var(--accent)}
.hcard__tag{color:var(--accent)}
.hcard__go{margin-top:auto;padding-top:var(--s4)}
.hcard p{font-size:var(--t-sm);color:var(--ink-2)}
.hcard__go{margin-top:var(--s3);color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.hcard__go i{font-style:normal;transition:transform .2s var(--ease)}
.hcard:hover .hcard__go i{transform:translateX(3px)}

/* Калькуляторы */
.calc{padding:var(--s12) 0}
.calc__box{border:1px solid var(--line);background:var(--card);padding:var(--s6)}
.calc__form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4)}
.calc__out{margin-top:var(--s6)}
.calc__rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.calc__rows>div{background:var(--card);display:flex;justify-content:space-between;
  gap:var(--s4);padding:var(--s3) var(--s4);font-size:var(--t-sm)}
.calc__rows span{color:var(--ink-2)}
.calc__rows b{font-family:var(--mono);font-weight:500;white-space:nowrap}
.calc__rows .is-key{background:var(--hover)}
.calc__rows .is-key b{color:var(--accent)}
.calc__hint{margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-2);max-width:65ch}
.calc__cta{margin-top:var(--s6)}

/* Главная: первый экран и переход на страницу с кино */
.hero--home{padding:var(--s24) 0 var(--s16)}
.hero__kicker{color:var(--accent);margin-bottom:var(--s4)}
.hero--home h1{max-width:16ch}
.hubs--tools .hubs__grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.film-teaser{padding:var(--s12) 0;background:var(--ink);color:#fff}
.film-teaser__in{display:flex;gap:var(--s8);align-items:center;justify-content:space-between;flex-wrap:wrap}
.film-teaser h2{max-width:18ch}
.film-teaser p{margin-top:var(--s3);max-width:60ch;color:rgba(255,255,255,.72);font-size:var(--t-sm)}
.film-teaser .note{color:rgba(255,255,255,.45);display:block;margin-top:var(--s2)}

/* ══ ПЕРВЫЙ ЭКРАН — иллюминатор сканера ═══════════════════════════════
   Носитель: съёмка крана с просвеченным грузом на весь экран.
   Код рисует только приборную рамку и типографику поверх кадра. */
.scan {
  position: relative;
  min-height: 100svh;
  background: var(--void);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  isolation: isolate;
}
.scan__media { position: absolute; inset: 0; z-index: -2; }
.scan__media img,
.scan__media canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; }
/* канвас проявляется, когда текстура загружена: до этого виден тот же кадр картинкой */
.scan__media canvas { opacity: 0; transition: opacity .5s var(--ease); }
.scan__media.is-live canvas { opacity: 1; }
.scan__media.is-live img { visibility: hidden; }
/* к низу кадр гасится, чтобы текст читался без плашки */
.scan__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* под текстом кадр обязан уходить ниже 20% яркости — иначе заголовок
     теряется на светлом контейнере, а контраст падает ниже 4.5:1 */
  background:
    linear-gradient(to top, rgba(5,7,11,.97) 0%, rgba(5,7,11,.92) 30%, rgba(5,7,11,.55) 46%, rgba(5,7,11,0) 66%),
    linear-gradient(to bottom, rgba(5,7,11,.72) 0%, rgba(5,7,11,0) 24%),
    /* левая шторка: строка состояния попадала на светлую полосу сканера
       и уходила ниже 4.5:1 — под текстом кадр всегда тёмный */
    linear-gradient(to right, rgba(5,7,11,.88) 0%, rgba(5,7,11,.62) 34%, rgba(5,7,11,0) 62%);
}

/* приборная рамка: шкалы по краям кадра — подпись страницы */
.scan__gauge {
  position: absolute;
  top: 0; bottom: 0;
  width: 112px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.62);
}
.scan__gauge--l { left: 0; align-items: flex-start; padding-left: var(--s6); }
.scan__gauge--r { right: 0; align-items: flex-end; padding-right: var(--s6); text-align: right; }
.scan__tick { width: 14px; height: 1px; background: rgba(255,255,255,.28); }
.scan__tick--lg { width: 30px; background: rgba(255,255,255,.6); }
.scan__gauge b { font-weight: 500; color: #fff; letter-spacing: .06em; white-space: nowrap; }
.scan__gauge span { display: block; margin: var(--s1) 0 var(--s4);
  font-family: var(--label); letter-spacing: .1em; }

.scan__in {
  position: relative;
  z-index: 2;
  width: min(var(--wrap), calc(100% - 260px));
  margin: 0 auto;
  padding-bottom: calc(var(--s16) + 56px);   /* резерв под плашку cookie */
}
html.consent-set .scan__in { padding-bottom: var(--s16); }
/* строка состояния — не слоган, а показания сканера */
.scan__status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.scan__status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); font-style: normal; flex: none;
  box-shadow: 0 0 0 0 rgba(200,65,43,.55);
  animation: scanPulse 2.6s var(--ease) infinite;
}
@keyframes scanPulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,65,43,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(200,65,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,65,43,0); }
}
.scan h1 {
  margin: var(--s6) 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -.03em;
}
/* второй уровень вдвое мельче и другой гарнитурой — стык и держит характер */
.scan h1 em {
  display: block;
  margin-top: .12em;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: .5em;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.76);
}
.scan__lead {
  margin-top: var(--s6);
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: rgba(255,255,255,.76);
}
.scan__act { margin-top: var(--s8); display: flex; gap: var(--s3); flex-wrap: wrap; }
.scan__act .btn { border: 0; }
.scan__act .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
.scan__act .btn--ghost:hover { border-color: rgba(255,255,255,.7); }

/* лента показателей — примыкает к кадру снизу, но живёт отдельной секцией */
.proof { background: var(--bg); border-bottom: 1px solid var(--line); }
.proof__grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.2fr 1.2fr;
}
.proof__cell { padding: var(--s12) var(--s6) var(--s12) 0; }
.proof__cell + .proof__cell { padding-left: var(--s6); border-left: 1px solid var(--line); }
.proof__cell b {
  display: block;
  font-weight: 200;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -.035em;
}
.proof__cell--quiet b { font-size: clamp(25px, 2.8vw, 38px); }
.proof__cell span {
  display: block;
  margin-top: var(--s3);
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.proof__cell i {
  display: block;
  margin-top: var(--s1);
  font-style: normal;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-3);
}

@media (max-width: 980px) {
  .scan__gauge { display: none; }
  .scan__in { width: calc(100% - var(--s8)); padding-bottom: calc(var(--s12) + 84px); }
  html.consent-set .scan__in { padding-bottom: var(--s12); }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* узкий экран: кадр остаётся носителем, но текст и кнопки обязаны влезть без прокрутки */
@media (max-width: 560px) {
  .scan__more { display: none; }
  .scan__status { font-size: 10px; letter-spacing: .1em; align-items: flex-start; gap: var(--s2); }
  .scan__status i { margin-top: 5px; }
  .scan h1 { margin-top: var(--s4); font-size: clamp(34px, 10.2vw, 44px); }
  .scan__lead { margin-top: var(--s4); font-size: var(--t-body); max-width: 34ch; }
  .scan__act { margin-top: var(--s6); }
  .scan__act .btn { flex: 1 1 auto; text-align: center; }
  .scan__in { padding-bottom: var(--s8); }
  .scan__media img, .scan__media canvas { object-position: center 32%; }
}
@media (prefers-reduced-motion: reduce) {
  .scan__status i { animation: none; }
}


/* Карточка услуги с кадром: изображение — часть карточки, а не фон под текстом. */
.hcard--shot { overflow: visible; }
.hcard--shot picture { display: block; margin: 0 0 var(--s4); }
.hcard--shot img { width: 100%; height: 210px; object-fit: cover;
  background: var(--hover); border-radius: var(--r-md); }
@media (max-width: 900px) {
  .hubs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hubs__grid { grid-template-columns: minmax(0, 1fr); }
  .hcard--shot img { height: 190px; }
}

/* ══ МОБИЛЬНАЯ НАВИГАЦИЯ ══════════════════════════════════════════════
   До этой правки ниже 860px .nav просто скрывалась и разделы были недоступны. */
.burger { display: none; width: 44px; height: 44px; background: none; border: 0;
  padding: 0; cursor: pointer; position: relative; color: inherit; }
.burger span, .burger span::before {
  content: ''; position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: currentColor; transition: transform .24s var(--ease), opacity .18s linear; }
.burger span { top: 20px; }
.burger span::before { left: 0; top: 6px; }
.burger[aria-expanded="true"] span { transform: rotate(45deg) translate(2px, 2px); }
.burger[aria-expanded="true"] span::before { transform: rotate(-90deg) translate(-6px, 0); }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--void); color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: var(--s8);
  padding: 88px var(--s6) var(--s8); overflow-y: auto; }
.menu[hidden] { display: none; }
/* закрыть меню пальцем: бургер лежит под .menu, а Esc на телефоне не нажать */
.menu__close { position: absolute; top: 18px; right: 14px; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff; }
.menu__close span, .menu__close span::before { content: ''; position: absolute;
  left: 11px; top: 21px; width: 22px; height: 1.5px; background: currentColor; }
.menu__close span { transform: rotate(45deg); }
.menu__close span::before { left: 0; top: 0; transform: rotate(-90deg); }
.menu.is-in { animation: menuIn .24s var(--ease) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { font-size: 22px; font-weight: 500; letter-spacing: -.02em;
  padding: var(--s4) 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu__nav a:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.menu__foot { display: flex; flex-direction: column; gap: var(--s4); }
.menu__tel { font-family: var(--mono); font-size: var(--t-lg); letter-spacing: .04em; }
.menu__foot .btn { text-align: center; }

/* липкая панель действий — появляется после первого экрана */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 54; height: 64px;
  display: none; align-items: stretch; background: var(--card);
  border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .28s var(--ease); }
.dock.is-in { transform: none; }
/* min-width:auto не давал колонкам сжаться ниже длины номера — панель
   становилась шире экрана и рождала горизонтальную прокрутку на 375. */
/* Длинные русские слова в заголовках («конфиденциальности») не переносятся
   и рвут узкие экраны — разрешаем перенос внутри слова. */
h1, h2, h3, .hero h1 { overflow-wrap: break-word; }
@media (max-width: 480px) { h1 { hyphens: auto; } }
.dock__tel, .dock__cta { display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--s3); flex: 1 1 50%; min-width: 0; font-size: var(--t-sm); }
.dock__tel > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock__tel .mono { display: block; font-size: 10px; color: var(--ink-3); letter-spacing: .08em; }
.dock__cta { flex: 0 0 44%; background: var(--accent); color: #fff; align-items: center;
  font-weight: 500; }

@media (max-width: 860px) {
  .burger { display: block; }
  .hdr__in .cta { display: none; }
  .dock { display: flex; }
  body.menu-open { overflow: hidden; }
  /* форма и футер не должны прятаться под панелью */
  .form { padding-bottom: calc(var(--s16) + 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .menu.is-in { animation: none; }
  .dock { transition: none; }
}

/* ══ СТАВКИ, РИСКИ, КЕЙСЫ ═════════════════════════════════════════════ */
.rates { padding: var(--s24) 0; border-top: 1px solid var(--line); }
.rates__box { margin-top: var(--s8); }
.rate { width: 100%; border-collapse: collapse; }
.rate th { text-align: left; padding: 0 var(--s4) var(--s3) 0; font-family: var(--label);
  font-size: var(--t-cap); font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line); }
.rate td { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line);
  vertical-align: baseline; }
.rate tr:hover td { background: var(--hover); }
.rate td a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.rate tr:hover td a { border-bottom-color: var(--ink); }
.rate__price { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 500; }
.rate th:last-child { text-align: right; }
.rate--compact { margin-top: var(--s6); }
.rate--compact td { padding: var(--s3) 0; font-size: var(--t-sm); }
.rates__note { margin-top: var(--s4); max-width: 68ch; font-size: var(--t-sm); color: var(--ink-3); }

.split { padding: var(--s24) 0; border-top: 1px solid var(--line); }
.split__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); }
.split__col h2 { max-width: 18ch; }
.split__col p { margin-top: var(--s4); max-width: 46ch; color: var(--ink-2); }
.split__price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s6) !important; }
.split__price b { font-weight: 200; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; color: var(--ink); }
.split__price span { color: var(--ink-3); }
.split__col .btn { margin-top: var(--s6); display: inline-block; }

.hubs--risk { border-top: 1px solid var(--line); }
.hubs--risk .lead { margin-bottom: var(--s8); }

.cases { padding: var(--s24) 0; border-top: 1px solid var(--line); }
.cases .lead { color: var(--ink-2); max-width: 64ch; }
.cases__list { margin-top: var(--s12); display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s16); }
.cases__list li { display: flex; justify-content: space-between; gap: var(--s6);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.cases__list b { font-weight: 500; }
.cases__list span { font-family: var(--label); font-size: var(--t-cap); text-align: right;
  color: var(--ink-3); }
.cases__sectors { margin-top: var(--s12); color: var(--ink-3); letter-spacing: .08em; }
/* Строка «120 активных клиентов» висела в белой пустоте под списком.
   Стала опорой заголовка справа: секция закрывается цифрой, а не воздухом. */
.cases__head { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s16); align-items: end; margin-bottom: var(--s8); }
.cases__head .lead { margin-top: var(--s4); max-width: 62ch; }
.cases__count { margin: 0; text-align: right; }
.cases__count b { display: block; font-family: var(--display); font-weight: 200;
  font-size: clamp(48px, 6vw, 92px); line-height: .9; letter-spacing: -.045em; }
.cases__count figcaption { margin-top: var(--s2); color: var(--ink-3);
  font-size: var(--t-cap); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) {
  .cases__head { grid-template-columns: minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .cases__count { text-align: left; }
}

@media (max-width: 900px) {
  .split__in { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
  .cases__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .rate th:nth-child(2), .rate td:nth-child(2) { display: none; }
  .cases__list li { flex-direction: column; gap: var(--s1); }
  .cases__list span { text-align: left; }
}

/* Пальцем в 19-пиксельную строку таблицы не попасть: на сенсорных ширинах
   ссылка занимает всю ячейку и добирает высоту до 44 px. */
@media (max-width: 900px) {
  .rate td { padding-top: var(--s1); padding-bottom: var(--s1); }
  .rate td a { display: flex; align-items: center; min-height: 44px; }
  .steps__more a, .risk__more, .foot__links a, .form__next-call a,
  .scan__anchor a, .geo__cap a, figcaption a {
    display: inline-flex; align-items: center; min-height: 44px; }
  .foot__links { gap: 0; }
  .cookie .btn { min-height: 44px; }
}
/* Чекбокс согласия был 13×13 — ниже минимальной цели касания. */
.agree input { width: 24px; height: 24px; accent-color: var(--accent); }
.agree { align-items: center; }

/* вход в кадр: заголовок открывается по строкам, HUD проявляется следом */
.scan.is-enter h1 { animation: scanTitle .9s var(--ease) both .15s; }
.scan.is-enter .scan__status { animation: scanFade .6s var(--ease) both .05s; }
.scan.is-enter .scan__lead { animation: scanFade .7s var(--ease) both .45s; }
.scan.is-enter .scan__act { animation: scanFade .7s var(--ease) both .6s; }
.scan.is-enter .scan__gauge { animation: scanFade .8s var(--ease) both .7s; }
@keyframes scanTitle {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes scanFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scan.is-enter h1, .scan.is-enter .scan__status, .scan.is-enter .scan__lead,
  .scan.is-enter .scan__act, .scan.is-enter .scan__gauge { animation: none; }
}

/* Галереи контейнеров и ULD — переехали с общей страницы процесса,
   чтобы контент не конкурировал сам с собой в выдаче. */
.boxes { padding: var(--s24) 0; border-top: 1px solid var(--line); }
.boxes .lead { margin-bottom: var(--s12); }
.boxes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.boxes__grid--flat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.box { display: flex; flex-direction: column; gap: var(--s3); }
.box img { width: 100%; height: 172px; object-fit: cover; background: var(--hover); }
.box h3 { font-size: var(--t-h3); }
.box p { color: var(--ink-2); font-size: var(--t-sm); }
.box .mono { color: var(--ink-3); }
.box__spec { margin: 0; display: grid; gap: var(--s1); }
.box__spec div { display: flex; justify-content: space-between; gap: var(--s3);
  padding: 6px 0; border-bottom: 1px solid var(--line); }
.box__spec dt { font-family: var(--label); font-size: var(--t-cap); color: var(--ink-3); }
.box__spec dd { margin: 0; font-family: var(--mono); font-size: var(--t-cap);
  font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 900px) {
  .boxes__grid, .boxes__grid--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .boxes__grid, .boxes__grid--flat { grid-template-columns: minmax(0, 1fr); }
}

/* Ценовой якорь под кнопками: первое число на сайте должно быть ценой,
   а не количеством отгрузок — цену иначе видно только после прокрутки. */
.scan__anchor {
  margin-top: var(--s4);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.66);
}
.scan__anchor a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
/* Второй путь из первого экрана — ссылка, а не вторая кнопка:
   один экран — один главный призыв. */
.scan__second { color: #fff; font-size: var(--t-body); display: inline-flex; align-items: center;
  gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.45);
  transition: border-color .2s var(--ease), gap .2s var(--ease); }
.scan__second:hover { border-color: #fff; gap: var(--s3); }
.scan__second span { transition: transform .2s var(--ease); }
.scan__second:hover span { transform: translateX(3px); }
.rate tr.is-key td { font-weight: 500; }
.rate tr.is-key .rate__price { color: var(--accent); }
.rate tr.is-ref td { color: var(--ink-3); }

/* Место под фильм на странице процесса */
.film { padding: var(--s24) 0; background: var(--void); color: #fff; }
.film .lead { color: rgba(255,255,255,.72); max-width: 62ch; }
.film__frame { margin: var(--s12) 0 0; }
.film__frame img { width: 100%; height: auto; display: block; background: #000; }
.film__frame figcaption { margin-top: var(--s3); color: rgba(255,255,255,.5); letter-spacing: .06em; }

/* Короткий фильм в секции географии: носитель для таблицы, не отдельная секция.
   Постер лежит фоном на figure и виден с первого пейнта: до назначения
   источника видео здесь не должно быть ни пикселя пустоты. */
.geo__film { margin: var(--s12) 0; background-size: cover; background-position: center;
  border-radius: var(--r-lg); overflow: clip; aspect-ratio: 960 / 540; }
.geo__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
video.lazyvid { opacity: 0; transition: opacity .3s var(--ease); }
video.lazyvid.is-on { opacity: 1; }
.geo__film figcaption { margin-top: var(--s3); font-size: var(--t-cap);
  letter-spacing: .06em; color: var(--ink-3); }
.geo__film figcaption a { color: var(--ink); border-bottom: 1px solid var(--line); }
.film__frame video { width: 100%; height: auto; display: block; background: #000; }


/* ══ РИТМ БЕЗ СМЕНЫ ФОНА ═══════════════════════════════════════════════
   Тёмная полоса во всю ширину читается как граница документа, поэтому фон
   держим один, а разнообразие даём разрывом сетки и медиа за краем колонки. */
:root { --r-sm: 8px; --r-md: 14px; --r-lg: 24px; }

/* элемент выходит из колонки 1180 к краям экрана */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}
.bleed--pad { padding-left: var(--gutter, clamp(16px, 4vw, 56px));
  padding-right: var(--gutter, clamp(16px, 4vw, 56px)); }
/* секции с bleed режем по себе, иначе 50vw ловит полосу прокрутки */
.hubs, .rates, .geo, .cases, .split, .boxes { overflow: clip; }

/* широкая полоса показателей: не коробка по центру, а лента во всю страницу */
.proof .wrap, .proof__grid { width: 100%; max-width: none; }
.proof__grid { padding: 0 clamp(16px, 4vw, 56px); }

/* сетка услуг шире текстовой колонки — колонка перестаёт читаться как страница */
/* Сетка раньше вылезала на 130px вправо, чтобы казаться шире текстовой
   колонки. С контейнером 1312 и ведущей карточкой это давало обрез
   правого столбца — карточка «Агентские платежи» уезжала за экран. */
.hubs__grid { width: 100%; margin-left: 0; }

/* медиа за краем */
.geo__film { margin-top: var(--s12); }
.geo__film video { border-radius: var(--r-lg); }
.boxes__grid { width: min(1440px, 100% + 96px); }
.box img { border-radius: var(--r-md); }
.film__frame video { border-radius: var(--r-lg); }
.scan__media img, .scan__media canvas { border-radius: 0; }

/* еле заметная техническая сетка вместо перекраски фона */
.cases { position: relative; }
.cases::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: .28;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.cases > .wrap { position: relative; z-index: 1; }

@media (max-width: 1200px) {
  .hubs__grid, .boxes__grid { width: 100%; margin-left: 0; }
}

/* Шесть ситуаций в табах: сеткой карточек они занимали экран,
   а читают из них обычно одну — ту, что болит. */
.risk { padding: var(--s24) 0; border-top: 1px solid var(--line); }
.risk .lead { margin-bottom: var(--s12); }
/* Столбец из шести вкладок держал высоту секции, а панель под ним занимала
   две строки — справа оставалось около 350 px пустоты. Вкладки встали в ряд,
   ответ раскрывается на всю ширину: пустых ячеек не остаётся. */
.risk__box { display: grid; gap: var(--s8); }
.risk__tabs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.risk__tab { appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: var(--s3) var(--s6); text-align: left; font: inherit;
  font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; min-height: 44px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.risk__tab:hover { color: var(--ink); border-color: var(--ink-3); }
.risk__tab[aria-selected="true"] { color: #fff; background: var(--accent);
  border-color: var(--accent); font-weight: 500; }
.risk__panels { border-top: 1px solid var(--line); padding-top: var(--s8); }
.risk__panel p { max-width: 62ch; font-size: var(--t-lg); line-height: 1.55; }
.risk__more { display: inline-block; margin-top: var(--s6); color: var(--accent); }
.risk__more i { font-style: normal; }
@media (max-width: 860px) {
  .risk__tab { padding: var(--s2) var(--s4); font-size: var(--t-cap); }
  .risk__panel p { font-size: var(--t-body); }
}


/* заголовок секции не должен упираться в первую карточку */
.hubs h2, .rates h2, .geo h2, .risk h2, .cases h2, .boxes h2 { margin-bottom: var(--s8); }
.hubs .lead, .rates .lead, .geo .lead, .risk .lead, .cases .lead { margin-top: calc(var(--s8) * -1 + var(--s3)); }
.steps__more { margin-top: var(--s12); }

/* Кадр из фильма у каждого шага: показывает процесс, а не иллюстрирует его иконкой */
.step__loop { width: 100%; height: 132px; object-fit: cover; display: block;
  background: var(--void); border-radius: var(--r-sm); margin-bottom: var(--s4); }



/* ── ФОТОПОЛОСА ВО ВСЮ ШИРИНУ ─────────────────────────────────────────
   Единственные элементы, которые выходят за колонку: без них страница
   читается как документ, а не как сайт. Врастание градиентом сверху
   и снизу — фотография не лежит в странице плиткой. */
.strip {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(220px, 34vh, 460px);
  overflow: clip;
  display: grid;
  background: var(--ink);   /* до загрузки кадра — фирменный тёмно-синий, не чёрная дыра */
}
.strip img { grid-area: 1 / 1; width: 100%; height: 100%;
  min-height: clamp(220px, 34vh, 460px); object-fit: cover; display: block; }
.strip::before, .strip::after {
  content: ''; position: absolute; left: 0; right: 0; height: 90px;
  pointer-events: none; z-index: 1;
}
.strip::before { top: 0;    background: linear-gradient(var(--bg), transparent); }
.strip::after  { bottom: 0; height: 130px;
  background: linear-gradient(transparent, rgba(5, 7, 11, .8) 72%, rgba(5, 7, 11, .8) 88%, var(--bg)); }
/* Подпись лежала в той же ячейке сетки, что и кадр, и растягивала строку:
   кадр становился ниже полосы, а текст уезжал на светлый верх и переставал
   читаться. Теперь это накладка по низу — на высоту полосы не влияет
   и всегда лежит на тёмной подложке ::after. */
.strip__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  width: min(var(--wrap), 100%); margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px) clamp(14px, 2.4vw, 26px);
  color: #EAF7FF; font-size: var(--t-cap); letter-spacing: .08em;
  text-transform: uppercase; text-shadow: 0 1px 12px rgba(5, 7, 11, .9);
}
/* кадр занимает всю полосу целиком, без щели сверху */
.strip img { align-self: stretch; }
@media (max-width: 620px) {
  .strip { min-height: 200px; }
  .strip img { min-height: 200px; }
}

/* ── СЛУЖЕБНЫЙ СЛОЙ: где Mono, а где Onest ────────────────────────────
   Моноширинный почти сравнялся с основным шрифтом и перестал что-либо
   означать. Правило: Mono стоит только на значении — ставка, срок, объём,
   тоннаж, номер лицензии, телефон, счётчик. Подпись рядом со значением
   и любой лейбл — Onest с тем же трекингом. */
.label { font-family: var(--label); letter-spacing: .06em; }
.foot__links { font-family: var(--label); }
.foot__links a[href^="tel"] { font-family: var(--mono); }  /* телефон — значение */
.foot__bar { font-family: var(--label); }
.dock__tel .label { letter-spacing: .08em; }
.strip__cap.label { letter-spacing: .1em; }
/* значение внутри строки состояния остаётся приборным */
.scan__status { font-family: var(--label); }
.scan__status b, .scan__status .num { font-family: var(--mono); }
.scan__anchor a { font-family: var(--label); }


/* ── МОБИЛЬНАЯ ТИПОГРАФИКА ────────────────────────────────────────────
   Основной текст на телефоне — 16 px без исключений, подписи — 14 px.
   12 px и 10 px не используются нигде: это нарушение WCAG, а не «мелко». */
@media (max-width: 860px) {
  :root { --t-cap: 14px; --t-sm: 15px; }
  .proof__cell span, .proof__cell i { font-size: 14px; letter-spacing: .04em; }
  .scan__status { font-size: 14px; letter-spacing: .08em; }
  .scan__anchor, .scan__anchor a { font-size: 14px; }
  .dock__tel .label { font-size: 14px; }
  .dock__tel, .dock__cta { font-size: 15px; }
  .strip__cap { font-size: 14px; letter-spacing: .06em; }
  .foot .label, .foot__links, .foot__bar, .foot p { font-size: 14px; }
  .rate th, th, .f label, .cases__list span, .box__spec dt, .box__spec dd { font-size: 14px; }
  .risk__tab { font-size: 14px; }
  .cookie p { font-size: 14px; }
  .crumbs, .crumbs a { font-size: 14px; }
  .note, .label, .mono { font-size: 14px; }
  .form__steps span { font-size: 15px; }
  body { font-size: 16px; }
  p, li, td, .lead { font-size: 16px; }
  .lead { font-size: 17px; }
}
@media (max-width: 560px) {
  .scan__status { font-size: 14px; letter-spacing: .06em; }
}

/* ── КНОПКА COOKIE ────────────────────────────────────────────────────
   Плашка висит внизу на каждом экране, и её красная кнопка совпадала
   по цвету с «Рассчитать поставку». Красный на сайте означает одно:
   здесь оставляют заявку. Согласие с cookie — не целевое действие. */
.cookie .btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: none;
}
.cookie .btn:hover { background: var(--ink); color: #fff; }
/* ── РИТМ СЕТКИ КАРТОЧЕК ──────────────────────────────────────────────
   Девять карточек одинаковой ширины с одинаковым кадром сверху читаются
   как заготовка, даже когда кадры разные: глазу не за что зацепиться.
   Первая карточка ведёт ряд — шире и с более крупным кадром, остальные
   идут обычным ритмом. Сломанная симметрия и есть разница между
   каталогом и сеткой-заглушкой. */
.hubs__grid > .hcard--shot:first-child { grid-column: span 2; }
.hubs__grid > .hcard--shot:first-child img { height: 320px; }
.hubs__grid > .hcard--shot:first-child h3 { font-size: var(--t-lg); }
/* Последняя услуга шириной в две колонки закрывает ряд как акцент,
   рядом — служебная карточка «Все услуги и цены»: сетка без сирот. */
.hubs__grid > .hcard--span2 { grid-column: span 2; }
.hubs__grid > .hcard--span2 img { height: 320px; }
.hcard--all { justify-content: center; background: var(--hover);
  border-radius: var(--r-md); padding: var(--s6); }
.hcard--all h3 { max-width: 12ch; }

@media (max-width: 860px) {
  .hubs__grid > .hcard--shot:first-child { grid-column: span 1; }
  .hubs__grid > .hcard--shot:first-child img { height: 210px; }
  .hubs__grid > .hcard--span2 { grid-column: span 1; }
  .hubs__grid > .hcard--span2 img { height: 210px; }
  .hcard--all { grid-column: 1 / -1; padding: var(--s4) var(--s6); }
}

/* Кадр в карточке — не украшение сверху, а часть карточки:
   тонкая рамка и общий радиус связывают его с текстом. */
.hcard--shot picture { border-radius: 2px; overflow: hidden; display: block;
  margin: 0 0 var(--s4); background: var(--hover); }
.hcard--shot img { transition: transform .5s var(--ease); }
.hcard--shot:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .hcard--shot img, .hcard--shot:hover img { transition: none; transform: none; }
}

/* ── ПОДСКАЗКА ВНУТРИ СЦЕНЫ ───────────────────────────────────────────
   Не тултип и не оверлей: тонкая строка у приборной рейки. Появляется
   через 2 с и только если мышь так и не тронули; гаснет навсегда после
   первого движения. Без неё интерактив хиро невидим — человек не знает,
   что кадром можно управлять. */
.scan__hint {
  position: absolute; z-index: 3;
  left: clamp(16px, 4vw, 40px); bottom: clamp(74px, 9vh, 104px);
  margin: 0; padding: 0;
  color: rgba(234, 247, 255, .0);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(5, 7, 11, .9);
  pointer-events: none;
  transform: translateY(6px);
  transition: color .8s var(--ease), transform .8s var(--ease);
}
.scan__hint.is-on { color: rgba(234, 247, 255, .72); transform: none; }
.scan__hint.is-gone { color: rgba(234, 247, 255, 0); transform: translateY(-4px); }
.scan__hint::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 18px; height: 1px; margin-right: 10px;
  background: currentColor;
}
@media (hover: none), (max-width: 820px) { .scan__hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scan__hint { transition: none; }
}

/* ── КУРСОР-ПЕРЕКРЕСТИЕ ───────────────────────────────────────────────
   Системный курсор прячем только там, где есть свой: на тач и при
   reduced-motion класс has-cur не ставится и всё остаётся как было. */
.has-cur, .has-cur a, .has-cur button, .has-cur .btn, .has-cur summary { cursor: none; }
.cur {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 0; height: 0; pointer-events: none;
  will-change: transform;
  color: var(--ink);
}
.cur__h, .cur__v {
  position: absolute; background: currentColor; opacity: .55;
  transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.cur__h { left: -13px; top: -.5px; width: 26px; height: 1px; }
.cur__v { top: -13px; left: -.5px; width: 1px; height: 26px; }
.cur__ring {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px;
  border: 1px solid currentColor; border-radius: 50%; opacity: 0;
  transform: scale(.6);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cur.is-on-target { color: var(--accent); }
.cur.is-on-target .cur__ring { opacity: .8; transform: scale(1); }
.cur.is-on-target .cur__h { transform: scaleX(.55); }
.cur.is-on-target .cur__v { transform: scaleY(.55); }
.cur.is-down .cur__ring { transform: scale(.82); }
.cur.is-out { opacity: 0; }
/* на тёмном кадре перекрестие светлое: класс ставит cursor.js */
.cur.is-dark { color: var(--scan-core); }
.cur.is-dark.is-on-target { color: var(--accent); }

/* ── COOKIE: компактная плашка вместо полосы во всю ширину ────────────
   Полоса на всю ширину закрывала низ первого экрана и на мобильном
   давила на кнопку. Теперь карточка в правом нижнем углу шириной до
   380 px: не пересекает ни CTA, ни контент. */
.cookie {
  left: auto; right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  width: min(380px, calc(100vw - 24px));
  max-width: 380px;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--s4);
  gap: var(--s3);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  box-shadow: 0 8px 28px rgba(13, 32, 57, .1);
}
.cookie p { font-size: 13px; line-height: 1.45; }
.cookie .btn { align-self: flex-start; padding: 8px var(--s4); }

@media (max-width: 860px) {
  /* Плашка занимала ~35% высоты экрана на 390px (аудит 03.09.2026):
     колонка текст-над-кнопкой плюс двухфразовый текст. Текст сокращён
     (см. build/render.py), здесь — одна строка вместо колонки. */
  .cookie {
    left: 8px; right: 8px; bottom: 8px;
    width: auto; max-width: none;
    padding: 8px var(--s3);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: nowrap;
  }
  .cookie p { font-size: 13px; line-height: 1.3; white-space: nowrap; }
  .cookie .btn { padding: 8px var(--s3); flex-shrink: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cookie { animation: cookie-in .5s var(--ease) .8s both; }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(10px); } }
}

/* ── ПРЕЛОАДЕР: один проход просвета ──────────────────────────────────
   Открывает сайт, а не задерживает его. Показывается один раз за сессию:
   на второй странице ритуал превращается в помеху. */
.boot {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--void);
  pointer-events: none;
  transition: opacity .55s var(--ease);
}
.boot__beam {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 28vw; min-width: 220px;
  background: linear-gradient(90deg,
    transparent, rgba(79, 212, 232, .10) 42%, var(--scan-core) 50%,
    rgba(79, 212, 232, .10) 58%, transparent);
  opacity: .9;
  transform: translateX(-120%);
}
.boot.is-run .boot__beam {
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transform: translateX(360%);
}
.boot.is-out { opacity: 0; }
html.booting body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

/* ── ПОЛОСЫ ПОД ФОТОГРАФИЮ ────────────────────────────────────────────
   Кадры станут фотореалистичными и светлее нынешних, поэтому подложка
   под подписью больше не может зависеть от того, что на кадре.
   Плотность у самой строки — .92: даже на белом кадре текст #EAF7FF
   даёт больше 4.5:1. Проверяется по построению, а не замером на удачном фоне. */
.strip::after {
  height: 190px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(5, 7, 11, .35) 34%,
    rgba(5, 7, 11, .72) 62%,
    rgba(5, 7, 11, .92) 84%,
    rgba(5, 7, 11, .94) 100%);
}
/* верхняя растушёвка мягче: она только сшивает кадр со страницей */
.strip::before { height: 72px; background: linear-gradient(var(--bg), transparent); }

/* Кадр обязан заполнять полосу целиком при любой пропорции исходника.
   Белых карточек поверх кадра здесь быть не должно — текст живёт
   на подложке, а не на плашке, обрубающей фотографию. */
.strip picture { grid-area: 1 / 1; display: block; width: 100%; height: 100%; }
.strip img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.strip .card, .strip .box { background: transparent; border: 0; }

/* ── МОБИЛЬНЫЙ ХИРО: видео-луп вместо шейдера ─────────────────────────
   На тач-устройствах WebGL-просвет не имеет смысла (нет курсора),
   а горизонтальный кадр в портретном кропе терял сюжет. Вертикальный
   луп 720x1280, 833 КБ, постер равен первому кадру. */
.scan__loop { display: none; }
@media (max-width: 820px) {
  .scan__loop { display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; }
  .scan__media picture, .scan__media canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scan__loop { content-visibility: visible; }
}

/* кнопка звука: тот же служебный слой, что подсказка */
.scan__sound {
  position: absolute; z-index: 3;
  /* выше cookie-плашки (правый низ, до ~160px), иначе кнопка недоступна
     всю первую сессию, пока пользователь не нажал «Понятно» */
  right: clamp(16px, 4vw, 40px); bottom: clamp(200px, 24vh, 260px);
  background: none; border: 0; padding: 4px 0;
  color: rgba(234, 247, 255, .5); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: color .2s var(--ease);
}
.scan__sound:hover, .scan__sound[aria-pressed="true"] { color: rgba(234, 247, 255, .9); }
.scan__sound::before { content: ''; display: inline-block; vertical-align: middle;
  width: 14px; height: 1px; margin-right: 8px; background: currentColor; }
@media (max-width: 820px) { .scan__sound { bottom: 200px; right: 16px; } }

/* ── НИТЬ: горизонт в футере ──────────────────────────────────────────
   Та же линия SCAN, что выходит из просвета: тонкий градиент над футером
   на всех страницах — третья роль нити по концепции. */
.foot { position: relative; }
.foot::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 212, 232, .55) 30%,
    rgba(79, 212, 232, .55) 70%, transparent);
}

/* ── КРОССФЕЙД НАВИГАЦИИ ──────────────────────────────────────────────
   Тёмная вуаль 190 мс вместо белой вспышки между страницами. */
.veil-nav {
  position: fixed; inset: 0; z-index: 9997;
  background: var(--void); opacity: 0; pointer-events: none;
  transition: opacity .19s ease;
}
.veil-nav.is-on { opacity: 1; pointer-events: auto; }

/* ── БЛОК «ОТКУДА ВОЗИМ» ──────────────────────────────────────────────
   Полная карта направлений на каждой странице направления: со страницы
   Китая видны Аргентина и Африка, а не только соседний хаб. */
.dirs { padding: var(--s16) 0; border-top: 1px solid var(--line); }
.dirs__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s6); }
.dirs__list a {
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); font-size: var(--t-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dirs__list a:hover { border-color: var(--ink); background: var(--hover); }
.dirs__list a[aria-current="page"] {
  background: var(--ink); color: #fff; border-color: var(--ink); pointer-events: none;
}

/* «Понятно» ставит атрибут hidden, но авторский display:flex сильнее
   UA-правила [hidden] — плашка «принималась» и оставалась на экране.
   Возвращаем атрибуту его смысл. */
.cookie[hidden] { display: none; }

/* ── ГРАНУЛЯРНОЕ СОГЛАСИЕ (03.09.2026) ────────────────────────────────
   Вторая кнопка «Только необходимые» добавляется js/site.js в тот же
   ряд, что и «Понятно» (.cookie__actions), а не новой строкой — высота
   плашки не растёт. Второе действие — текстовая ссылка, а не заполненная
   кнопка: не конкурирует по весу с основным «Понятно».
   На ≤860px .cookie — строка (flex-direction:row, space-between,
   flex-wrap:nowrap, см. блок выше) с текстом в один непереносимый ряд:
   параллельная правка сжала баннер под ОДНУ кнопку, и на вторую в той же
   строке места не остаётся. Решение — не увеличивать высоту второй
   строкой, а отдать место обеим кнопкам (flex-shrink:0, чтобы никогда не
   переносились) и разрешить тексту слева усекаться многоточием: подробности
   всё равно доступны через ссылку в футере/политике. */
.cookie__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3, 12px);
  align-self: stretch; width: 100%;
}
@media (max-width: 860px) {
  .cookie p {
    overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1;
  }
  .cookie__actions { flex-shrink: 0; flex-wrap: nowrap; width: auto; }
}
.cookie__necessary {
  background: none; border: none; padding: 8px 0; margin: 0;
  font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
  flex-shrink: 0;
}
.cookie__necessary:hover, .cookie__necessary:focus-visible { color: var(--ink); }
.cookie__necessary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .cookie__necessary { min-height: 44px; } }
.cookie__necessary-short { display: none; }
@media (max-width: 400px) {
  /* Совсем узкий экран: даже усечённый текст толкает кнопки. Сокращаем
     видимый ярлык — полный вариант остаётся в разметке для скринридера. */
  .cookie__necessary-full { display: none; }
  .cookie__necessary-short { display: inline; }
}

/* ── СВЕТЛЫЙ HERO «ВЭД БЕЗ РАЗРЫВОВ» (28.08, разворот по ТЗ) ─────────
   Кремовая бумага, гигантская типографика, один живой элемент — нить
   контроля. Тёмный кадр сканера переехал в полосу досмотра ниже. */
.chainhero {
  background:
    radial-gradient(120% 90% at 50% -20%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
    var(--paper);
  padding: calc(68px + clamp(28px, 5vh, 56px)) 0 0;
  border-bottom: 1px solid var(--line);
}
.chainhero__eyebrow { color: var(--ink-3); letter-spacing: .12em;
  text-transform: uppercase; font-size: 12px; margin: 0 0 var(--s6); }
.chainhero h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: .96; letter-spacing: -.04em; font-weight: 200;
  margin: 0 0 var(--s6); max-width: 17ch;
}
.chainhero__lead { max-width: 56ch; font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55; color: var(--ink-2); margin: 0 0 var(--s8); }
.chainhero__act { display: flex; align-items: center; gap: var(--s8);
  margin-bottom: clamp(28px, 4.5vh, 48px); }
.chainhero__second { color: var(--ink); border-bottom: 1px solid var(--line);
  padding-bottom: 2px; }
.chainhero__second:hover { border-color: var(--ink); }

/* ── НИТЬ КОНТРОЛЯ ────────────────────────────────────────────────────*/
.chain { padding: var(--s8) 0 var(--s12); }
.chain__wrap { position: relative; }
.chain__track { position: absolute; left: 0; right: 0; top: 5px; height: 2px; }
.chain__line { position: absolute; inset: 0; background: var(--line); }
.chain__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--accent);
  animation: chain-run 14s linear infinite; }
@keyframes chain-run { from { width: 0 } to { width: 100% } }

.chain__steps { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s4); }
.chain__step { position: relative; padding-top: var(--s6); }
.chain__dot { position: absolute; top: 0; left: 0; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--ink-3); background: var(--paper);
  transition: background .3s var(--ease), border-color .3s var(--ease); }
.chain__step.is-on .chain__dot { background: var(--accent); border-color: var(--accent); }
.chain__step b { display: block; font-weight: 500; font-size: var(--t-sm);
  margin-bottom: 2px; }
.chain__step .mono { display: block; font-size: 11px; color: var(--ink-3);
  letter-spacing: .06em; margin-bottom: var(--s2); }
.chain__step p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.chain__step.is-on p { opacity: 1; transform: none; }

@media (hover: hover) {
  .chain__step:hover .chain__dot { background: var(--ink); border-color: var(--ink); }
  .chain__step:hover p { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .chainhero { padding-top: calc(60px + 40px); }
  .chainhero__act { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .chain__track { display: none; }
  .chain__steps { grid-template-columns: 1fr; gap: 0; }
  .chain__step { padding: var(--s4) 0 var(--s4) var(--s6);
    border-left: 2px solid var(--line); }
  .chain__step.is-on { border-left-color: var(--accent); }
  .chain__dot { left: -7px; top: var(--s4); }
  .chain__step p { opacity: 1; transform: none; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .chain__fill { animation: none; width: 100%; }
  .chain__step p { opacity: 1; transform: none; transition: none; }
  .chain__step .chain__dot { background: var(--accent); border-color: var(--accent); }
}

/* автор и свежесть материала справочника */
.byline { margin-top: var(--s4); color: var(--ink-3); font-size: 13px; }

/* ── «ОДНА ЦЕПОЧКА — ОДИН ОТВЕТСТВЕННЫЙ» ─────────────────────────────*/
.owner { padding: var(--s24) 0; }
.owner__list { list-style: none; margin: var(--s12) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s8); }
.owner__list li { padding: var(--s3) 0; }
.owner__list .owner__item--lead { grid-column: 1 / -1; border-left: 2px solid var(--line);
  padding: var(--s6) 0 var(--s6) var(--s6); transition: border-color .3s var(--ease); }
.owner__list .owner__item--lead:hover { border-left-color: var(--accent); }
.owner__list b { display: block; font-size: var(--t-lg); font-weight: 500;
  margin-bottom: var(--s2); }
.owner__list .owner__item--lead b { font-size: var(--t-xl); }
.owner__list .owner__item--lead p { max-width: 64ch; font-size: var(--t-body); }
.owner__list p { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--t-sm);
  line-height: 1.55; }
.owner__list .mono { font-size: 11px; color: var(--ink-3); letter-spacing: .05em; }
@media (max-width: 700px) {
  .owner__list { grid-template-columns: 1fr; }
  .owner__list .owner__item--lead { grid-column: auto; }
}

/* ── «СОБРАТЬ МАРШРУТ» ────────────────────────────────────────────────*/
.route { padding: var(--s24) 0; background: var(--paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.route__form { max-width: 760px; margin-top: var(--s8); }
.route__step { border: 0; padding: 0; margin: 0; }
.route__step legend { margin-bottom: var(--s6); color: var(--ink-3);
  letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.route__grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s4); margin-bottom: var(--s6); }
.route__opts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.route__opts label { cursor: pointer; }
.route__opts input { position: absolute; opacity: 0; }
.route__opts span { display: inline-block; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card);
  font-size: var(--t-sm); transition: border-color .2s, background .2s; }
.route__opts input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.route__opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.route__result { background: var(--card); border: 1px solid var(--line);
  padding: var(--s8); margin-top: var(--s6); }
.route__result b { display: block; margin-bottom: var(--s3); }
.route__result p { margin: 0 0 var(--s3); color: var(--ink-2); }
@media (max-width: 700px) { .route__grid { grid-template-columns: 1fr; } }

/* 07.09: строка пути вместо четырёх карточек «Как мы работаем» на страницах без карты */
.steps--line .steps__line { margin: var(--s6) 0 var(--s4); font-size: 13px; letter-spacing: .04em; color: var(--ink-2); line-height: 2; }
.steps--line .steps__line b { font-weight: 500; color: var(--accent); }
.steps--line .steps__line span { color: var(--ink-3); margin: 0 .35em; }

/* Справочник: статьи без кадра — отдельным компактным блоком под линией,
   а не в общей сетке: там пустота над текстом читалась как битое фото. */
.hubs__more { margin-top: var(--s16); padding-top: var(--s8); border-top: 1px solid var(--line); }
.hubs__more h2 { margin-bottom: var(--s8); }
.hubs__grid--text { row-gap: var(--s8); }
.hubs__grid--text .hcard { padding-top: var(--s4); border-top: 1px solid var(--line); }
.hubs__grid--text .hcard__go { margin-top: var(--s3); padding-top: 0; }