@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/onest-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/onest-lat.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}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/onest-ext.woff2) format("woff2");unicode-range:U+20BD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/jbmono-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/jbmono-lat.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}
@font-face{font-family:"Onest Fallback";src:local("Arial");size-adjust:102.2%;ascent-override:94.9%;descent-override:29.8%;line-gap-override:0%}
:root{color-scheme:light;--navy:#0e1b2b;--font:"Onest","Onest Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--fs-12:.75rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-24:1.5rem;--fs-30:1.875rem;--fs-40:2.5rem;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;--r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;--gutter:32px;--brand:#0e1b2b;--brand-text:#1f4e79;--brand-deep:#0e1b2b;--brand-ink:#0e1b2b;--accent:#f2a900;--accent-hover:#e09d00;--on-accent:#0e1b2b;--accent-soft:#ffe9b0;--ground:#f3f4f6;--card:#ffffff;--tint:#eceff3;--ink:#191f26;--muted:#5f6b78;--line:#e2e5e9;--line-strong:#d3d8de;--control:#7d8894;--ok:#1e7a46;--ok-ink:#155c35;--ok-bg:#e3f3e9;--warn:#b45309;--warn-ink:#7a3a06;--warn-bg:#fdf0e1;--warn-line:#f2c9a0;--bad:#b3261e;--bad-ink:#8a1c17;--bad-bg:#fdecea;--bad-line:#f5c6c2;--neutral-ink:#4a5562;--neutral-bg:#edf0f3;--code-bg:#0e1b2b;--code-fg:#e8edf2;--code-line:#26394f;--code-muted:#98a6b5;--shadow:0 1px 2px rgba(14,27,43,.05);--shadow-lg:0 16px 40px rgba(14,27,43,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--brand:#e6ebf0;--brand-text:#9cc3e6;--brand-deep:#e6ebf0;--brand-ink:#e6ebf0;--accent-soft:#3a2f12;--ground:#0b1218;--card:#131c25;--tint:#1b2631;--ink:#e6ebf0;--muted:#98a6b5;--line:#24313e;--line-strong:#33424f;--control:#6b7a88;--ok:#5cc08a;--ok-ink:#8fd6ad;--ok-bg:rgba(92,192,138,.14);--warn:#f0a35e;--warn-ink:#f4bd8a;--warn-bg:rgba(240,163,94,.13);--warn-line:rgba(240,163,94,.4);--bad:#ef9a9a;--bad-ink:#f4b4b4;--bad-bg:rgba(239,154,154,.12);--bad-line:rgba(239,154,154,.35);--neutral-ink:#b4c2ce;--neutral-bg:#22303c;--code-bg:#070d13;--code-fg:#dfe7ef;--code-line:#1f2d3a;--code-muted:#8796a5;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 16px 40px rgba(0,0,0,.55)}}
:root[data-theme="dark"]{color-scheme:dark;--brand:#e6ebf0;--brand-text:#9cc3e6;--brand-deep:#e6ebf0;--brand-ink:#e6ebf0;--accent-soft:#3a2f12;--ground:#0b1218;--card:#131c25;--tint:#1b2631;--ink:#e6ebf0;--muted:#98a6b5;--line:#24313e;--line-strong:#33424f;--control:#6b7a88;--ok:#5cc08a;--ok-ink:#8fd6ad;--ok-bg:rgba(92,192,138,.14);--warn:#f0a35e;--warn-ink:#f4bd8a;--warn-bg:rgba(240,163,94,.13);--warn-line:rgba(240,163,94,.4);--bad:#ef9a9a;--bad-ink:#f4b4b4;--bad-bg:rgba(239,154,154,.12);--bad-line:rgba(239,154,154,.35);--neutral-ink:#b4c2ce;--neutral-bg:#22303c;--code-bg:#070d13;--code-fg:#dfe7ef;--code-line:#1f2d3a;--code-muted:#8796a5;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 16px 40px rgba(0,0,0,.55)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px;scrollbar-gutter:stable}
body{margin:0;font:400 var(--fs-16)/1.55 var(--font);color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h3,h4{font-size:var(--fs-18)}
p{margin:0}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* ссылки внутри текста отличаются не только цветом (U64) */
p a,li a,dd a,.hint a,.consent a,.lead a,.note a,.sub a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
b,strong{font-weight:600}
code,kbd,pre{font-family:var(--mono);font-size:var(--fs-14)}
:not(pre)>code{background:var(--tint);color:var(--ink);padding:.1em .4em;border-radius:var(--r-xs);overflow-wrap:anywhere;font-size:.9em}
pre{background:var(--code-bg);color:var(--code-fg);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:0;overflow-x:auto;line-height:1.6}
pre code{background:none;color:inherit;padding:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* раскладка */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.wrap.wide{max-width:1240px}
.tnum,.num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:var(--fs-14)}
.lead{color:var(--ink);font-size:var(--fs-18);line-height:1.55;max-width:64ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--sp-2);top:-100px;z-index:100;background:var(--card);color:var(--brand-deep);
  border:2px solid var(--brand);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-4);font-weight:600}
.skip:focus{top:var(--sp-2)}
main{display:block}

/* заголовок секции (v2): слева, крупный, подводка под ним; надзаголовок обычным регистром,
   без капса и цвета (структура, а не украшение) */
.eyebrow{display:block;font-size:var(--fs-14);font-weight:500;line-height:1.35;color:var(--muted)}
.sec-head{max-width:72ch;margin:0 0 var(--sp-6)}
.sec-head h1,.sec-head h2{font-size:clamp(1.625rem,3.2vw,2.5rem);line-height:1.08;letter-spacing:-.03em;margin-top:var(--sp-2)}
.sec-head>p{color:var(--ink);font-size:var(--fs-18);line-height:1.55;margin:var(--sp-3) 0 0;max-width:64ch}
.sec-head>p+p{margin-top:var(--sp-2);font-size:var(--fs-16);color:var(--muted)}
.sec{padding:72px 0}
.sec+.sec{padding-top:0}
/* у последнего раздела нижний отступ даёт margin подвала, иначе воздух двойной */
main>.sec:last-child{padding-bottom:0}

/* кнопки: три высоты, обычный регистр (v2). Янтарь только у главного действия */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:10px 20px;
  border:1.5px solid var(--accent);border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);
  font:500 var(--fs-16)/1.15 var(--font);text-align:center;
  text-decoration:none;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none}
.btn.lg{min-height:52px;padding:14px 26px;font-size:var(--fs-16)}
.btn.sm{min-height:36px;padding:7px 14px;font-size:var(--fs-14)}
.btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--tint);border-color:var(--ink);color:var(--ink)}
.btn.ghost.cur{background:var(--tint)}
/* вторая кнопка первого экрана: первый экран теперь светлый, вид как у контурной */
.btn.on-dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.on-dark:hover{background:var(--tint);border-color:var(--ink)}
/* тёмная кнопка: второе по важности действие, не главное (в тёмной теме светлая) */
.btn.dark,.hdr-cta{background:var(--ink);border-color:var(--ink);color:var(--card)}
.btn.dark:hover,.hdr-cta:hover{background:var(--ink);border-color:var(--ink);opacity:.88}
.btn.danger{background:transparent;border-color:var(--control);color:var(--bad)}
.btn.danger:hover{background:transparent;border-color:var(--bad)}
.btn.block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{background:var(--accent);border-color:var(--accent)}
.lnkbtn{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.lnkbtn:hover{color:var(--bad)}

/* поля: 44 px, шрифт 16 px (iOS не увеличивает), рамка --control 3:1 */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),select,textarea){
  min-height:44px;padding:10px 14px;border:1px solid var(--control);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font-size:var(--fs-16);line-height:1.4}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
/* переключатель: Chrome не скругляет обводку стандартного radio, рамка выходила квадратной. Фокус
   с клавиатуры показываем рамкой вокруг подписи-карточки, после клика мышью рамки нет */
input[type=radio]:focus-visible{outline:none}
label:has(>input[type=radio]:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
/* поле с ошибкой: после попытки отправить форму (:user-invalid) или когда ошибку поставил сервер или
   скрипт (aria-invalid). Красные рамка, фон, обводка фокуса и подпись поля: подсказка браузера одна
   легко теряется, а красное поле видно сразу */
:where(input:not([type=checkbox]):not([type=radio]),select,textarea):is(:user-invalid,[aria-invalid="true"]){
  border-color:var(--bad);background-color:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad)}
:where(input,select,textarea):is(:user-invalid,[aria-invalid="true"]):focus{outline-color:var(--bad)}
:is(.field,.fld):has(:is(input,select,textarea):is(:user-invalid,[aria-invalid="true"]))>label,
label:has(+ :is(input,select,textarea):is(:user-invalid,[aria-invalid="true"])){color:var(--bad-ink)}
textarea{resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:16px;height:16px}
.field{margin-top:var(--sp-3)}
.field>label{display:block;font-size:var(--fs-14);color:var(--muted);margin-bottom:var(--sp-1)}
.field :where(input,select,textarea){width:100%}
.chk{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-14);line-height:1.45;margin-top:var(--sp-2);cursor:pointer}
.chk input{margin-top:2px;flex:none}

/* карточка — только для предметов: набор, тариф, ключ, заказ, форма */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) 28px}
/* плашка (v2): плоская заливка без рамки и тени; на белой странице серая, на серой белая */
.tile{background:var(--ground);border-radius:var(--r-lg);padding:28px}
.card h3{margin:0 0 var(--sp-3)}

/* таблица; .rtable на телефоне выводит строки карточками «подпись: значение» (td[data-label]) */
table{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
th{text-align:left;color:var(--muted);font-size:var(--fs-12);font-weight:500;padding:var(--sp-2) 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th.num,td.num{text-align:right}
.tscroll{overflow-x:auto}

/* статус: пилюля 12 px обычным регистром */
.pill{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-12);font-weight:600;line-height:1.35;
  border-radius:var(--r-pill);padding:3px 10px;background:var(--neutral-bg);color:var(--neutral-ink);white-space:nowrap;vertical-align:middle}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink);box-shadow:inset 0 0 0 1px var(--warn-line)}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill.info{background:var(--tint);color:var(--ink)}
.pill.accent{background:var(--accent);color:var(--on-accent)}

/* вкладки и фильтры: один вид, сегменты */
.seg{display:inline-flex;gap:2px;max-width:100%;overflow-x:auto;background:var(--card);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:3px;vertical-align:middle}
.seg>a,.seg>button,.seg>label{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:36px;
  padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font:500 var(--fs-14)/1.2 var(--font);
  white-space:nowrap;cursor:pointer;text-decoration:none}
.seg>a:hover,.seg>button:hover,.seg>label:hover{color:var(--ink);text-decoration:none}
.seg>.on,.seg>[aria-pressed="true"],.seg>[aria-selected="true"]{background:var(--ink);color:var(--card)}
.seg>.on:hover,.seg>[aria-pressed="true"]:hover{color:var(--card)}
.seg.full{display:flex}.seg.full>*{flex:1}

/* уведомления */
.notice{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-14);line-height:1.5;
  margin-bottom:var(--sp-4);background:var(--card)}
.notice.info{background:var(--tint);border-color:transparent;color:var(--ink)}
.notice.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.notice.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--ink)}
/* обязательная галочка не отмечена, а форму пытались отправить (:user-invalid): плашка и подпись
   красные, чтобы бросалось в глаза; подсказка браузера одна легко теряется */
.notice:has(input[type=checkbox]:user-invalid){background:var(--bad-bg);border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.chk:has(input:user-invalid)>span{color:var(--bad-ink);font-weight:500}
/* «Подробнее» в плашке: длинный текст по запросу */
.notice details.more{margin-top:var(--sp-1)}
.notice details.more>summary{cursor:pointer;font-weight:500;width:max-content}
.notice details.more>p{margin-top:var(--sp-1)}
.notice.err{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.notice p+p{margin-top:var(--sp-1)}
.notice details{margin-top:var(--sp-2)}.notice summary{cursor:pointer;color:var(--brand-text)}

/* первый экран (v2): светлое серое поле, крупный заголовок; тёмная только панель с данными */
.hero{position:relative;overflow:hidden;color:var(--ink);background:var(--ground);border-bottom:1px solid var(--line)}
.hero .eyebrow{display:inline-block;padding:6px 14px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);
  color:var(--ink);font-size:var(--fs-14);font-weight:400}
.hero h1{color:var(--ink);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.035em;margin:var(--sp-4) 0 0}
.hero .sub{color:var(--ink);font-size:var(--fs-18);line-height:1.55;max-width:52ch;margin:var(--sp-4) 0 0}
.hero p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--control)}
.hero p a:hover{text-decoration-color:var(--ink)}
.cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
/* hero с примером запроса (главная и лендинги): текст слева, окно терминала справа */
.hero>.wrap{position:relative;z-index:1;padding:56px var(--gutter) 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-grid h1{max-width:18ch}
.trial-note{color:var(--muted);font-size:var(--fs-14);margin-top:var(--sp-3);max-width:52ch}
.preview{min-width:0}
/* панель данных: единственная тёмная плоскость первого экрана (данные и код) */
.pv-card{background:var(--code-bg);border:1px solid var(--code-line);border-radius:var(--r-lg);overflow:hidden;font-family:var(--mono)}
.pv-top{display:flex;align-items:center;gap:7px;padding:14px 20px;border-bottom:1px solid var(--code-line);color:var(--code-muted);font-size:var(--fs-14)}
.pv-top i{display:none}
.pv-top b{color:var(--code-fg);font-weight:600}
.pv-body{padding:var(--sp-4) 20px;color:var(--code-fg);font-size:var(--fs-14);line-height:1.6;white-space:pre;overflow-x:auto}
.pv-body .k{color:#fff;font-weight:600}.pv-body .s{color:#b9d2e6}.pv-body .n{color:#cfe0ee}.pv-body .c{color:var(--code-muted)}

/* шапка (D3) */
.top{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--line)}
.top>.wrap{display:flex;align-items:center;gap:var(--sp-3);height:68px}
.logo{display:inline-flex;align-items:center;color:var(--ink);flex:none}
.logo:hover{text-decoration:none}
.logo .logo-svg{height:28px;width:auto;display:block}
.top .sep{color:var(--line-strong)}
.top .prod{color:var(--ink);font-weight:600;font-size:var(--fs-16);white-space:nowrap}
.hnav{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto}
.navlnk{color:var(--ink);font-size:var(--fs-14);font-weight:500;white-space:nowrap}
.navlnk:hover,.navlnk[aria-current="page"]{color:var(--ink);text-decoration:none}
.navlnk[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ink)}
.navlnk.ask{color:var(--muted);font-weight:400}
.hmail{display:inline-flex;align-items:center;gap:2px}
.hmail .cpy-tip{bottom:auto;top:calc(100% + 6px)}   /* в шапке подсказка «Скопировано» снизу: сверху край окна */
/* ширина блока входа одна для гостя и вошедшего: пункты меню не сдвигаются после входа */
.hauth{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);margin-left:var(--sp-5);min-width:228px}
.navds{position:relative;display:inline-flex}
.navds-btn{display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink);font:500 var(--fs-14)/1.5 var(--font)}
.navds-btn::after{content:"\25BE";font-size:var(--fs-12);opacity:.6}
.navds-btn:hover,.navds-btn[aria-expanded="true"]{color:var(--ink)}
.navds-menu{position:absolute;top:calc(100% + 18px);left:-12px;min-width:240px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:var(--sp-1);display:none;flex-direction:column;z-index:50}
.navds-menu.open{display:flex}
.navds-menu a{display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-14)}
.navds-menu a:hover{background:var(--ground);color:var(--ink);text-decoration:none}
.navds-menu .mtag{display:block;font-size:var(--fs-12);color:var(--muted)}
.hdr-me{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;max-width:168px;padding:3px 12px 3px 4px;
  border:0;border-radius:var(--r-pill);background:var(--ground);color:var(--ink);
  font-size:var(--fs-14);font-weight:500;line-height:1.2;white-space:nowrap}
.hdr-me:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.hdr-me svg{width:26px;height:26px;flex:none;border-radius:var(--r-pill);background:var(--navy);color:#fff;padding:5px}
.hdr-me .em{overflow:hidden;text-overflow:ellipsis}
.hdr-me .sh{display:none}
.hdr-out{display:inline;margin:0}
.hdr-outb{background:none;border:0;padding:var(--sp-2) var(--sp-1);cursor:pointer;color:var(--muted);font-size:var(--fs-14);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.hdr-outb:hover{color:var(--ink)}
/* админка: своя строка навигации под общей шапкой */
.subnav{background:var(--card);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;align-items:center;gap:var(--sp-5);min-height:48px;overflow-x:auto}
.subnav nav{display:flex;gap:var(--sp-5)}
.adm-badge{font-size:var(--fs-12);font-weight:600;color:#fff;background:var(--navy);
  border-radius:var(--r-sm);padding:3px var(--sp-2);flex:none}
.subnav a{color:var(--muted);font-size:var(--fs-14);padding:13px 0;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.subnav a:hover{color:var(--ink);text-decoration:none}

/* подвал */
.site-foot{background:var(--ground);border-top:1px solid var(--line);margin-top:var(--sp-8);color:var(--muted);font-size:var(--fs-14)}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--ink)}
.site-foot .group{border-bottom:1px solid var(--line)}
.site-foot .group-in{max-width:1180px;margin:0 auto;padding:var(--sp-4) var(--gutter);display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);
  align-items:baseline;color:var(--ink)}
.site-foot .group-in a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* колонки после первой (продукт, наборы, компания) делят место поровну, сколько бы их ни было */
.site-foot .sf-in{max-width:1180px;margin:0 auto;padding:var(--sp-6) var(--gutter) var(--sp-5);display:grid;
  grid-template-columns:1.5fr;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--sp-6)}
.site-foot .sf-in>*{min-width:0}
.site-foot .brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.site-foot .brand b{color:var(--ink);font-size:var(--fs-18);font-weight:600}
.site-foot .brand p{max-width:min(40ch,100%)}
.site-foot .ghbtn{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);min-height:36px;padding:0 var(--sp-3);
  border:1.5px solid var(--ink);border-radius:var(--r-sm);color:var(--ink);font-weight:500}
.site-foot .ghbtn:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.site-foot .ghbtn svg{flex:none}
.site-foot .lic{font-size:var(--fs-12)}
.site-foot .col{display:flex;flex-direction:column;gap:10px}
.site-foot .col h4{margin:0 0 2px;color:var(--ink);font-size:var(--fs-14);font-weight:600}
.site-foot .col a{overflow-wrap:anywhere}
.site-foot .mail{display:inline-flex;align-items:center;gap:var(--sp-1);margin:-6px 0;min-width:0}
.site-foot .ext::after{content:"\2197";margin-left:3px}
.site-foot .bottom{border-top:1px solid var(--line)}
.site-foot .bottom-in{max-width:1180px;margin:0 auto;padding:var(--sp-4) var(--gutter);display:flex;gap:var(--sp-2) var(--sp-5);
  justify-content:space-between;flex-wrap:wrap;align-items:baseline;font-size:var(--fs-12)}
.site-foot .req{max-width:90ch}
.site-foot.short{margin-top:var(--sp-6)}
.site-foot.short .bottom{border-top:0}
.site-foot.short .bottom-in{max-width:1240px;justify-content:flex-start}

/* cookie-баннер (app/cookie_banner.py) */
#ckbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(16,40,60,.08)}
#ckbar.ckbar-docked{position:absolute;bottom:auto}
#ckbar .ckbar-in{max-width:1180px;margin:0 auto;padding:var(--sp-2) var(--gutter);display:flex;align-items:center;justify-content:center;
  gap:var(--sp-3);font-size:var(--fs-12);line-height:1.4;color:var(--muted)}
#ckbar span{min-width:0}
#ckbar a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
#ckbar .btn{flex:none}

@media (max-width:1140px){.top .prod,.top .sep{display:none}}
@media (max-width:860px){
  .hnav .navlnk{display:none}.hnav .hmail{display:none}
  .site-foot .sf-in{grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:var(--sp-5)}.site-foot .brand{grid-column:1/-1}
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}.hero .hero-grid h1{max-width:100%}
}
@media (max-width:560px){
  :root{--gutter:16px;--r-lg:20px}
  .hnav{display:none}
  .hauth{margin-left:auto;min-width:0}
  .hdr-me{max-width:none;padding-right:10px}.hdr-me .em{display:none}.hdr-me .sh{display:inline}
  .sec{padding:48px 0}
  .site-foot{margin-top:var(--sp-7)}
  .sec-head>p{font-size:var(--fs-16)}
  .card,.tile{padding:20px}
  /* hero на телефоне примерно в один экран (U15): кнопки во всю ширину, в превью только ответ */
  .hero>.wrap{padding:24px var(--gutter) 40px}.hero-grid{gap:var(--sp-5)}
  .hero .sub{font-size:var(--fs-16)}
  .hero .cta{margin-top:var(--sp-4);gap:10px}.hero .cta .btn{flex:1 1 100%}
  .pv-req{display:none}.pv-body{padding:var(--sp-3)}
  .site-foot .sf-in{grid-template-columns:1fr}
  #ckbar .ckbar-in{justify-content:space-between}
  /* таблица карточками: строка — блок, ячейка — «подпись | значение» */
  .rtable thead{display:none}
  .rtable,.rtable tbody{display:block;width:100%}
  .rtable tr{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--line)}
  .rtable tr:last-child{border-bottom:0}
  .rtable td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:3px 0;border:0;white-space:normal;
    text-align:left;overflow-wrap:anywhere}
  .rtable td::before{content:attr(data-label);color:var(--muted);font-size:var(--fs-12);padding-top:2px}
  .rtable td.num{text-align:left}
}
@media (max-width:380px){
  .card{padding:var(--sp-4)}
  .hauth{gap:var(--sp-1)}
  .hauth .btn.sm{padding:7px 10px}
}
@media print{.top,.subnav,.site-foot,#ckbar,.skip{display:none!important}body{background:#fff}}

dialog.cfm{border:0;padding:0;border-radius:var(--r-md);width:calc(100% - 32px);max-width:440px;background:var(--card);color:var(--ink);
  font-family:inherit;box-shadow:var(--shadow-lg)}
dialog.cfm[open]{animation:cfm-in .14s ease-out}
dialog.cfm::backdrop{background:rgba(4,20,36,.5);backdrop-filter:blur(2px)}
@keyframes cfm-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.cfm-box{padding:var(--sp-5)}
.cfm-ic{width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;margin-bottom:var(--sp-3);
  background:var(--tint);color:var(--brand-deep)}
.cfm-ic svg{width:22px;height:22px}.cfm-ic .i-d{display:none}
.cfm.danger .cfm-ic{background:var(--bad-bg);color:var(--bad)}
.cfm.danger .cfm-ic .i-d{display:block}.cfm.danger .cfm-ic .i-n{display:none}
.cfm-title{font-size:var(--fs-18);line-height:1.3;margin:0 0 var(--sp-2)}
.cfm-text{color:var(--muted);font-size:var(--fs-16);line-height:1.5;margin:0;white-space:pre-line}
.cfm-text:empty{display:none}
.cfm-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--sp-5)}
.cfm-btns .btn{margin:0;width:auto;white-space:nowrap}
.cfm.danger .cfm-ok{background:var(--bad);color:#fff;border-color:var(--bad)}
.cfm.danger .cfm-ok:hover{background:color-mix(in srgb,var(--bad) 85%,#000);border-color:var(--bad)}
@media (max-width:560px){.cfm-box{padding:20px var(--sp-4) var(--sp-4)}.cfm-btns{flex-direction:column-reverse}.cfm-btns .btn{width:100%}}

.cpy{position:relative;display:inline-flex;vertical-align:middle;flex:none}
.cpy-b{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);cursor:pointer;transition:color .12s,border-color .12s,background-color .12s}
.cpy-b:hover{color:var(--brand-text);border-color:var(--line-strong);background:var(--card)}
.cpy-b svg{grid-area:1/1}
.cpy-ok{display:none}
.cpy.done .cpy-i{display:none}.cpy.done .cpy-ok{display:block}
.cpy.done .cpy-b{color:var(--ok)}
.cpy-tip{position:absolute;right:0;bottom:calc(100% + 6px);background:var(--ink);color:var(--card);font-size:var(--fs-12);
  font-weight:500;line-height:1.2;padding:5px 8px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(2px);transition:opacity .12s,transform .12s}
.cpy-tip:empty{display:none}
.cpy.done .cpy-tip{opacity:1;transform:none}

dialog.crq{border:0;padding:0;border-radius:var(--r-md);width:calc(100% - 32px);max-width:600px;max-height:calc(100dvh - 32px);
  background:var(--card);color:var(--ink);font-family:inherit;box-shadow:var(--shadow-lg);overflow:auto;overscroll-behavior:contain}
dialog.crq[open]{animation:cfm-in .14s ease-out}
dialog.crq::backdrop{background:rgba(4,20,36,.5);backdrop-filter:blur(2px)}
html:has(dialog.crq[open]){overflow:hidden}
.crq-box{padding:var(--sp-5)}
.crq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.crq-head h2{font-size:var(--fs-24);line-height:1.25;margin:0}
.crq-x{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-6px -8px 0 0;padding:0;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);cursor:pointer}
.crq-x:hover{color:var(--ink);background:var(--ground)}
.crq-lead{color:var(--muted);margin:var(--sp-2) 0 var(--sp-2)}
.crq-form .notice{margin:var(--sp-3) 0 0}
.crq-form .field>label{color:var(--ink);font-weight:500}
.crq-req{color:var(--bad)}
.crq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
.crq-err{color:var(--bad-ink);font-size:var(--fs-14);line-height:1.4;margin-top:var(--sp-1)}
.crq-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.crq-consent{margin-top:var(--sp-4)}
.crq-consent .chk{margin-top:0}
.crq-note{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-14);line-height:1.45}
.crq-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--sp-5)}
.crq-btns .btn{margin:0;white-space:nowrap}
.crq-done{text-align:center;padding:var(--sp-5) 0 var(--sp-2)}
.crq-done-t{font-size:var(--fs-18);line-height:1.45;max-width:40ch;margin:0 auto var(--sp-5);overflow-wrap:anywhere}
.crq-done-t:focus{outline:0}
.crq-ic{width:52px;height:52px;border-radius:var(--r-pill);display:grid;place-items:center;margin:0 auto var(--sp-4);
  background:var(--ok-bg);color:var(--ok)}
.crq-ic svg{width:26px;height:26px}
.crq-page{max-width:680px}.crq-page .sec-head{text-align:center;margin-left:auto;margin-right:auto}
.crq-page .cta{text-align:center}
.crq-page .card{margin-top:var(--sp-5)}
@media (max-width:560px){
  .crq-box{padding:20px var(--sp-4) var(--sp-4)}
  .crq-head h2{font-size:var(--fs-18)}
  .crq-grid{grid-template-columns:minmax(0,1fr)}
  .crq-btns{flex-direction:column-reverse}.crq-btns .btn{width:100%}
}
