/* шрифт с моего сервера: roboto flex, подмножества cyrillic-ext, cyrillic и latin из google fonts v30, лицензия assets/fonts/OFL.txt */
/* порядок блоков важен: ґ (U+0490-0491) и ұ (U+04B0-04B1) объявлены у cyrillic и одновременно попадают
   внутрь U+0460-052F у cyrillic-ext, а по правилам css для общего символа побеждает объявленный ниже.
   cyrillic-ext стоит первым, поэтому эти буквы берёт на себя основной кириллический файл, который на
   странице и так загружен, — порядок тот же, что в css у google. как пересобрать — docs/design-tokens.md */
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:300 900;font-stretch:100% 151%;font-display:swap;
  src:url("/assets/fonts/roboto-flex-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:300 900;font-stretch:100% 151%;font-display:swap;
  src:url("/assets/fonts/roboto-flex-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:300 900;font-stretch:100% 151%;font-display:swap;
  src:url("/assets/fonts/roboto-flex-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#F7F7F5; --ink:#141414; --mut:#6E6E69; --line:#E4E4E0; --line2:#CFCFC9;
  --red:#D22D22;
  --f:'Roboto Flex',system-ui,-apple-system,sans-serif;

  /* сетка */
  --max:1080px;
  --pad:clamp(20px,4vw,48px);
  --gap:clamp(24px,2.8vw,40px);
  --sec:clamp(72px,8.5vw,128px);

  /* шрифтовая шкала */
  --fs-body:clamp(16px,15px + .21vw,18px);   /* 16 → 18 */
  --fs-lead:clamp(18px,16px + .42vw,22px);   /* 18 → 22 */
  --fs-meta:clamp(15px,14.4px + .12vw,16px); /* 15 → 16 */
  --fs-h1:clamp(34px,calc(22px + 3.8vw),76px);
  --fs-h2:clamp(30px,calc(17px + 1.95vw),46px);
  --fs-h3:clamp(22px,1.95vw,28px);
  --fs-wm:clamp(22px,1.8vw,26px);
  --dt:5em; /* общая ширина ключа в строках ключ–значение */

  /* линии */
  --rail:2px dotted var(--line2); /* точечная: только строки заголовков, шкала шагов, черта первого экрана */
  --rule:1px solid var(--line);   /* сплошная: разделители строк внутри разделов */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* точки фона: 2px в углу плитки 16px, отсчёт от левого верхнего угла страницы — по ним выровнены клетки змеи */
body{margin:0;color:var(--ink);font-family:var(--f);
  background:var(--bg) url("/assets/dots.svg") repeat 0 0/16px 16px;
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:var(--fs-body);line-height:1.62;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;text-transform:lowercase}
.wrap{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding-inline:var(--pad)}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-family:var(--f);font-weight:inherit;letter-spacing:-.018em;line-height:1.06}
h1{font-variation-settings:'wdth' 151,'wght' 800;font-size:var(--fs-h1);line-height:1.02}
h2{font-variation-settings:'wdth' 151,'wght' 800;font-size:var(--fs-h2);line-height:1.04}
h3{font-variation-settings:'wdth' 148,'wght' 700;font-size:var(--fs-h3);line-height:1.14;text-wrap:balance}
.nb{white-space:nowrap}

/* каретка: одна на сайте, в конце заголовка первого экрана, растёт вместе с ним */
.caret{display:inline-block;width:.09em;height:.8em;background:var(--red);vertical-align:-.04em;margin-left:.12em;
  animation:blink 1.05s step-end infinite}
/* пока идёт набор, каретка горит ровно и начинает мигать после него */
.typing .caret{animation:none}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}

/* змея-глиф вместо s */
.sg{display:inline-block;width:0.7524em;height:0.7182em;vertical-align:-0.1628em;margin-left:-0.0839em;margin-right:-0.0378em;background:url("/assets/snake.svg") no-repeat center/100% 100%}
.sg-inv{background-image:url("/assets/snake-inverted.svg")}
.wm{display:inline;white-space:nowrap;font-variation-settings:'wdth' 151,'wght' 800;letter-spacing:-.018em}

/* первый экран: холст змеи лежит под шапкой и заголовком, текст всегда поверх */
.stage{position:relative}
.snake-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.stage>.wrap{position:relative}

/* шапка */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:26px 0 0}
.mark{font-size:var(--fs-wm);line-height:1.2}
.top nav{display:flex;flex-wrap:wrap;gap:2px 20px;font-size:var(--fs-meta);color:var(--mut)}
.top nav a{padding:6px 0}
@media(hover:hover){.top nav a:hover{color:var(--red)}}
@media(max-width:759px){
  /* на телефоне пять разделов в сетке 3×2, а не рваный перенос. шапка поджата: первый экран телефона короткий */
  .top{padding-top:18px;row-gap:8px}
  .top nav{width:100%;display:grid;grid-template-columns:repeat(3,max-content);column-gap:clamp(20px,7vw,36px);row-gap:0;padding-top:4px;border-top:var(--rule)}
  .top nav a{padding:4px 0}
}
@media(min-width:760px){.top nav{gap:30px}}

/* заголовок раздела как папка: косая черта вплотную к слову и точечная черта до края. знак ~ только перед именем на первом экране */
.sec-h{display:flex;align-items:baseline;margin-bottom:clamp(32px,4vw,56px)}
.sec-h .ps{color:var(--mut);font-variation-settings:'wdth' 100,'wght' 400}
.sec-h::after{content:"";flex:1 1 0;min-width:20px;margin-left:.52em;border-bottom:var(--rail);transform:translateY(-.12em)}

/* первый экран: с 760px снизу полоса, по которой змея ползает под кнопками. на телефоне полоса над точечной чертой, ниже.
   вертикальные отступы берут меньшее из vw и vh: на низком окне ноутбука кнопки и полоса змеи остаются на первом экране */
.hero{padding:clamp(40px,min(6vw,9vh),88px) 0 clamp(112px,8vw,128px)}
#u{padding-top:clamp(32px,3.4vw,48px)}
.who{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1em;font-size:var(--fs-body);line-height:1.4}
.who-n{font-variation-settings:'wdth' 148,'wght' 700;letter-spacing:-.01em}
.who .ps{color:var(--mut);font-variation-settings:'wdth' 100,'wght' 400;margin-right:.4em}
/* косая черта пути на служебных страницах стоит вплотную: «/404» */
.who .ps-dir{margin-right:0}
.who-c{color:var(--mut)}
h1.type{position:relative;margin-top:clamp(22px,min(2.8vw,4.4vh),40px);max-width:15.2em}
h1.type .ghost{visibility:hidden}
h1.type .tw{position:absolute;left:0;top:0;right:0}
.hero-foot{margin-top:clamp(36px,min(4.4vw,6.6vh),60px);padding-top:clamp(24px,min(2.8vw,4vh),36px);border-top:var(--rail);
  display:grid;gap:28px}
.hero-foot .sub{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.hero-foot .sub span+span{color:var(--mut)}
@media(min-width:900px){
  .hero-foot{grid-template-columns:1fr auto;align-items:end}
  /* строка состояния прилипает к низу окна. заголовок «/услуги» никогда не режется ею: первый экран растягивается так,
     что заголовок встаёт целиком над строкой (--fold: строка, зазор 16px, отступ раздела и высота h2), а на низком окне
     уходит целиком ниже края. полоса змеи под кнопками при этом не меньше 80px */
  /* --stage-max: на высоком окне полоса под кнопками не шире ~128px, заголовок стоит выше строки */
  :root{--fold:calc(45px + env(safe-area-inset-bottom,0px) + 16px + clamp(32px,3.4vw,48px) + var(--fs-h2)*1.04);
    --stage-max:clamp(660px,386px + 27.5vw,783px)}
  .hero{padding-bottom:80px}
  .stage{min-height:min(calc(100vh - var(--fold)),var(--stage-max));min-height:min(calc(100svh - var(--fold)),var(--stage-max))}
}
/* окно ниже, чем нужно первому экрану с заголовком над строкой: первый экран во всю высоту окна, заголовок целиком ниже края.
   пороги — наименьшая высота окна, при которой кнопки, полоса 80px и заголовок помещаются, с запасом 2px, по полосам ширины.
   на 988px заголовок первого экрана перестраивается на другие строки, поэтому граница полосы 996 */
@media(min-width:900px) and (max-width:995.98px) and (max-height:775.98px),
      (min-width:996px) and (max-width:1059.98px) and (max-height:766.98px),
      (min-width:1060px) and (max-width:1179.98px) and (max-height:808.98px),
      (min-width:1180px) and (max-width:1299.98px) and (max-height:845.98px),
      (min-width:1300px) and (max-width:1399.98px) and (max-height:872.98px),
      (min-width:1400px) and (max-height:880.98px){
  .stage{min-height:100vh;min-height:100svh}
}
@media(max-width:759px){
  /* на телефоне змея живёт между заголовком и точечной чертой: полоса под кнопками уходила за край экрана высотой 550–670px.
     полосы под кнопками нет (56px меньше клетки отступа и трёх рядов), остальные отступы поджаты, кнопки стоят там же где раньше */
  .hero{padding:24px 0 56px}
  h1.type{margin-top:16px}
  .hero-foot{margin-top:112px;padding-top:18px;gap:20px}
  .hero-foot .sub{gap:2px;line-height:1.42}
}
.sub{display:grid;gap:4px;color:var(--mut)}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;
  font-size:var(--fs-body);font-variation-settings:'wdth' 100,'wght' 400;border:1px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s;border-radius:0}
.b1{background:var(--ink);color:var(--bg)}
@media(hover:hover){.b1:hover{background:var(--red)}}
.b2{border-color:var(--line2);color:var(--ink);background:var(--bg)}
@media(hover:hover){.b2:hover{border-color:var(--red);color:var(--red)}}

/* разделы */
section{padding-block:var(--sec) 0}
section:last-of-type{padding-bottom:var(--sec)}
.sec-tight{padding-top:clamp(64px,7vw,104px)}

/* списки с квадратной меткой */
.list{display:grid;gap:6px;align-content:start}
.list li{padding-left:1.1em;position:relative;line-height:1.45;text-wrap:balance}
.list li::before{content:"";position:absolute;left:0;top:.6em;width:.32em;height:.32em;background:var(--ink)}

/* строки ключ–значение */
.kv{display:grid;grid-template-columns:var(--dt) minmax(0,1fr);gap:8px 14px;font-size:var(--fs-meta);line-height:1.45;align-content:start}
.kv>div{display:contents}
.kv dt{color:var(--mut)}
.kv dd{display:grid;gap:2px}
.kv dd span,.for dd span,.sd span{text-wrap:balance}

/* услуги */
.svc{display:grid;gap:22px var(--gap);padding:clamp(28px,3.2vw,44px) 0;border-top:var(--rule)}
.svc:first-of-type{border-top:0;padding-top:0}
.svc-h h3{max-width:13em}
.for{margin-top:16px;font-size:var(--fs-meta);line-height:1.45}
.for dt{color:var(--mut);margin-bottom:4px}
.for dd{display:grid;gap:1px}
@media(min-width:900px){
  .svc{grid-template-columns:3fr 4fr 3fr}
  .svc>.list,.svc>.kv{padding-top:5px}
}

.more-link{margin-top:14px;font-size:var(--fs-meta)}

/* ещё задачи */
.more{display:grid;font-size:var(--fs-lead);line-height:1.45;margin:0 0 clamp(24px,3vw,40px)}
.more span{text-wrap:balance}
.more span+span{color:var(--mut)}
.cat{border-top:var(--rule)}
.grp{display:grid;gap:12px;padding:22px 0;border-bottom:var(--rule)}
.gh{font-size:var(--fs-body);font-variation-settings:'wdth' 148,'wght' 700;letter-spacing:-.01em;line-height:1.45}
@media(min-width:900px){
  /* вводная стоит в первой колонке услуг, группы строками справа: пункты помещаются в одну строку */
  .cat-wrap{display:grid;grid-template-columns:calc((100% - 2*var(--gap))*.3) minmax(0,1fr);column-gap:var(--gap);align-items:start}
  .more{margin:0;padding-top:18px}
  .grp{grid-template-columns:12.5em minmax(0,1fr);column-gap:24px;padding:24px 0}
  .grp .list{row-gap:6px}
}

/* хвосты разделов: «ещё делал» под проектами и «что не входит» под шагами */
.cat-more{border-top:0;margin-top:clamp(20px,2.4vw,32px)}
.more-tail{margin:clamp(24px,3vw,40px) 0 0}

/* проекты */
.projs{display:grid;border-top:var(--rule);border-bottom:var(--rule)}
.proj{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,36px) 0}
.proj+.proj{border-top:var(--rule)}
.tag{color:var(--mut);font-size:var(--fs-meta)}
.pn{font-variation-settings:'wdth' 148,'wght' 700;font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.018em;transition:color .15s;text-wrap:balance}
.pd{color:var(--mut);display:grid;gap:3px}
.pd>span{text-wrap:balance}
.inl{display:flex;flex-wrap:wrap;column-gap:1.1em}
.inl span{position:relative;padding-left:.85em}
.inl span::before{content:"";position:absolute;left:0;top:.62em;width:.28em;height:.28em;background:var(--mut)}
/* ссылка только на названии проекта, остальная карточка не ссылка */
.pn-a{text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:2px;text-underline-offset:.16em;transition:color .15s,text-decoration-color .15s}
@media(hover:hover){.pn-a:hover{color:var(--red);text-decoration-color:var(--red)}}
@media(min-width:900px){
  .projs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proj{padding-inline:var(--gap)}
  .proj:first-child{padding-left:0}
  .proj:last-child{padding-right:0}
  .proj+.proj{border-top:0;border-left:var(--rule)}
}

/* как работаем: пять шагов на одной шкале */
.steps{display:grid;border-top:var(--rule)}
.step{display:grid;grid-template-columns:3.6em minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:baseline;
  padding:18px 0 20px;border-bottom:var(--rule)}
.sn{color:var(--mut);font-size:var(--fs-meta);font-variant-numeric:tabular-nums;white-space:nowrap}
.st{font-variation-settings:'wdth' 148,'wght' 700;font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.018em}
.sd{grid-column:2;display:grid;gap:2px;line-height:1.45}
@media(min-width:1000px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));border-top:0}
  .step{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:0;border:0}
  .sn{display:flex;align-items:center}
  .sn::after{content:"";flex:1;margin:0 14px 0 12px;border-bottom:var(--rail)}
  .steps{padding-bottom:32px;border-bottom:var(--rule)}
  .st,.sd{padding-right:16px}
  .sd{font-size:var(--fs-body)}
}

/* две колонки */
.two{display:grid;gap:24px var(--gap)}
.big{font-variation-settings:'wdth' 148,'wght' 700;font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.018em;max-width:14em;text-wrap:balance}
.two>.sub{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.two>.sub>span{text-wrap:balance}
.two>.sub>span+span{color:var(--mut)}
.two>.sub .list{margin-top:10px;font-size:var(--fs-body);gap:4px}
@media(min-width:900px){
  .two-o{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .two-o>.sub{padding-top:2px}
}

/* контакты */
.rows{margin-top:clamp(28px,3vw,40px);border-top:var(--rule)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 0;border-bottom:var(--rule);
  font-size:var(--fs-lead);transition:color .15s}
@media(hover:hover){.row:hover{color:var(--red)}}
.row span:first-child{color:var(--mut);font-size:var(--fs-meta)}
.send{margin-top:clamp(28px,3vw,40px)}
.send-h{font-variation-settings:'wdth' 148,'wght' 700;letter-spacing:-.01em;margin-bottom:8px}

/* форма */
.form{display:grid;gap:18px;align-content:start;background:var(--bg);border:1px solid var(--line2);padding:clamp(20px,2.6vw,36px)}
.form label{display:block;font-size:var(--fs-meta);color:var(--mut)}
.form input,.form textarea{display:block;width:100%;margin-top:8px;background:var(--bg);color:var(--ink);
  border:1px solid var(--mut);padding:14px 16px;font:inherit;font-size:var(--fs-body);border-radius:0;
  font-variation-settings:'wdth' 100,'wght' 400}
.form input:focus,.form textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.form [aria-invalid="true"]{border-color:var(--red)}
.form textarea{resize:vertical;min-height:140px}
.form .b{border:0;cursor:pointer;font-family:inherit;width:100%}
.form .b:disabled{background:var(--mut);cursor:default}
/* ловушка для ботов: за экраном, скринридер и tab её не видят */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:var(--fs-meta);min-height:1.5em;color:var(--mut)}
.form-status span{display:block}
/* в поле зрения один красный объект: ошибка поля — красная рамка у поля и тёмный текст, ошибка без поля — красный текст.
   пока форма показывает ошибку, кнопка при наведении не краснеет */
.form-status.err{color:var(--red)}
.form-status.err-f{color:var(--ink)}
@media(hover:hover){.form.is-err .b1:not(:disabled):hover{background:var(--ink)}}

/* согласие: квадрат без скруглений, отметка пиксельной галкой */
.check{position:relative;padding-left:38px;font-size:var(--fs-meta);line-height:1.45}
.form .check-i{position:absolute;left:0;top:0;width:24px;height:24px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:var(--bg) no-repeat center/14px 12px;
  border:1px solid var(--mut);border-radius:0;cursor:pointer}
.form .check-i:focus{outline:0;border-color:var(--mut)}
.form .check-i:checked{border-color:var(--ink);background-image:url("/assets/check.svg")}
.form .check-i:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.form .check-i[aria-invalid="true"]{border-color:var(--red)}
.form .check-l{display:block;color:var(--ink);cursor:pointer}
/* каждая часть согласия своей строкой, не длиннее 60 знаков */
.check-l>span{display:block;text-wrap:balance}
.check-a{display:inline-block;margin-top:4px;color:var(--mut);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.22em}
@media(hover:hover){.check-a:hover{color:var(--red);text-decoration-color:var(--red)}}
#ts-widget:empty{display:none}
/* окно проверки не расширяет рамку формы и колонку: размер окна под ширину выбирает main.js (flexible от 300px, иначе compact) */
.form,#ts-widget{min-width:0}

@media(min-width:620px){
  .form{grid-template-columns:1fr 1fr}
  .form .wide,.form .b,.form-status,.form .check,#ts-widget,.form noscript{grid-column:1/-1}
}
@media(min-width:900px){
  .two-k{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
  /* поле задачи тянется до низа левой колонки: под кнопкой нет пустой полосы */
  .form{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;align-content:stretch}
  .form .wide{display:flex;flex-direction:column}
  .form .wide textarea{flex:1}
}
@media(min-width:1100px){
  .form{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* подвал */
footer{padding:28px 0 36px;border-top:var(--rule);color:var(--mut);font-size:var(--fs-meta);
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 24px}
.foot-wm{font-size:20px;color:var(--ink)}
.foot-r{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 28px}
.foot-r a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.22em;transition:color .15s}
@media(hover:hover){.foot-r a:hover{color:var(--red);text-decoration-color:var(--red)}}

/* строка состояния: только на широких экранах, на телефоне не занимает высоту и не спорит с клавиатурой */
.status{display:none}
@media(min-width:900px){
  /* 45px строки с линией + отступ: браузер докручивает поле в фокусе выше неё */
  html{scroll-padding-bottom:calc(45px + env(safe-area-inset-bottom,0px) + 16px)}
  .status{display:block;position:sticky;bottom:0;z-index:10;background:var(--bg);border-top:1px solid var(--line2);
    padding-bottom:env(safe-area-inset-bottom,0px)}
}
.status-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  font-size:var(--fs-meta);line-height:1.3}
.st-l{display:flex;align-items:center;gap:.6em;color:var(--mut);min-width:0}
.st-r{display:flex;gap:26px}
.st-r a{padding:10px 0;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.24em}
@media(hover:hover){.st-r a:hover{color:var(--red);text-decoration-color:var(--red)}}

/* страница персональных данных */
.doc-hero{padding:clamp(40px,6vw,88px) 0 clamp(40px,5vw,72px)}
.doc-hero h1{margin-top:clamp(22px,2.8vw,40px);max-width:15.2em;text-wrap:balance}
.doc-lead{display:grid;gap:4px;margin-top:clamp(24px,2.8vw,36px);font-size:var(--fs-lead);line-height:1.5}
/* только прямые потомки: text-wrap сбрасывает nowrap у вложенного .nb, и «ip-адрес» рвался по дефису */
.doc-lead>span{text-wrap:balance}
.doc-lead>span+span{color:var(--mut)}
.doc .doc-s{display:grid;gap:16px var(--gap);padding:clamp(28px,3.2vw,44px) 0;border-top:var(--rule)}
.doc .doc-s:last-of-type{padding-bottom:var(--sec)}
.doc-h{font-variation-settings:'wdth' 148,'wght' 700;font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.018em;text-wrap:balance;max-width:13em}
.doc-b{display:grid;gap:18px;align-content:start;max-width:40em}
.doc-g{display:grid;gap:8px}
/* два абзаца одной группы разделены так же, как блоки раздела */
.doc-g>.lines+.lines{margin-top:10px}
/* одно утверждение — один <span>. перенос внутри него уходит с отступом, а между утверждениями зазор больше межстрочного:
   на телефоне продолжение строки не читается как следующее утверждение */
.lines{display:grid;gap:.5em;line-height:1.45}
.lines>span{text-wrap:balance;padding-left:1.1em;text-indent:-1.1em}
.lines.mut{color:var(--mut)}
.kv-doc{--dt:10em;font-size:var(--fs-body)}
.ul{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.22em;transition:color .15s}
@media(hover:hover){.ul:hover{color:var(--red);text-decoration-color:var(--red)}}
.foot-r a[aria-current="page"]{color:var(--ink)}
@media(min-width:900px){
  .doc .doc-s{grid-template-columns:3fr 7fr}
  .doc-b{padding-top:4px}
}
@media(max-width:479px){
  .kv-doc{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .kv-doc dd{margin-bottom:10px}
}

/* страница 404: nginx отдаёт её на любой несуществующий адрес, поэтому все пути абсолютные */
.nf{padding-block:clamp(56px,9vw,140px) clamp(72px,10vw,160px)}
.nf h1{margin-top:clamp(22px,2.8vw,40px);max-width:15.2em;text-wrap:balance}
.nf-cta{margin-top:clamp(32px,4vw,56px)}