/* Демо v3: наши экраны (вход, оплата, кабинет, API, документы, поддержка) на системе Сергея (ng.css).
   Новых цветов нет: только токены ng.css и серые из его страниц (#585858, #D9D9D9, #E5E5E5). */
.app .lg,.app .foot-brand .lg{font-size:20px}
.app main{min-height:60vh}
[hidden]{display:none!important}
#cont:empty{display:none}
.app .foot{padding-top:72px}
.nav-links a[aria-current=page]{color:var(--ink)}
.nav-login.is-in{background:var(--ink);color:var(--paper);box-shadow:none}
.nav-login.is-in:hover{background:#282827;color:var(--paper)}
@media (max-width:900px){.nav-links a[aria-current=page]{font-weight:500}}

/* ——— шапка страницы ——— */
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:36px}
.crumbs a{color:#585858}.crumbs a:hover{color:var(--ink)}
.crumbs span{color:#8A8A8A}
.p-head{padding:28px 0 56px}
.p-head h1{margin-top:18px;font:500 clamp(40px,4.4vw,64px)/1.02 var(--f-head);letter-spacing:-.01em;color:var(--ink)}
.p-head h1 .fade-paper{display:block}
.p-head .text-l{margin-top:20px;max-width:640px}
.p-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
@media (max-width:760px){.p-head--row{flex-direction:column;align-items:flex-start}.p-head{padding-bottom:40px}}
.sec{padding:var(--sec) 0;position:relative}
.sec--tight{padding:64px 0}
.h3{font:500 26px/32px var(--f-head);color:var(--ink)}
[data-theme=dark] .h3{color:var(--on-ink)}
.muted{color:var(--text-min)}
.small{font-size:14px;line-height:20px}
.ink{color:var(--ink)}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.u:hover{text-decoration-thickness:2px}

/* ——— кнопки: добавки к листу 28 ——— */
.btn--block{width:100%;justify-content:center}
.btn--sm{height:44px;padding:0 20px;font-size:15px;gap:8px}
.btn--soft{background:var(--paper-cool);color:var(--ink)}
.btn--soft:hover{background:#E5E5E5}
.btn--out{box-shadow:inset 0 0 0 1.5px #C8C8C8;color:var(--ink);background:transparent}
.btn--out:hover{box-shadow:inset 0 0 0 1.5px #585858}
.btn.off{opacity:.32;cursor:not-allowed}
.btn.off:hover svg{transform:none}
.cbtn{height:30px;padding:0 12px;border-radius:99px;background:var(--paper);color:var(--ink);font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cbtn--ink{background:var(--ink);color:var(--paper)}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.between{display:flex;justify-content:space-between;align-items:center;gap:16px}
.vstack{display:flex;flex-direction:column}

/* ——— поля ——— */
.fld{display:flex;flex-direction:column;gap:10px}
.fld>.label{color:#585858}
.inp{height:56px;width:100%;border-radius:99px;border:1.5px solid #C8C8C8;padding:0 22px;font:400 17px/1 var(--f-text);background:#fff;color:var(--ink);outline:none;transition:border-color var(--t-base),box-shadow var(--t-base)}
.inp::placeholder{color:#989898}
.inp:focus{border-color:var(--ink)}
textarea.inp{height:auto;min-height:140px;border-radius:22px;padding:16px 22px;line-height:26px;resize:vertical}
select.inp{appearance:none;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23080808' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 22px center;padding-right:48px}
.fld .hint{font-size:13px;line-height:18px;color:#6E6E6E;padding:0 22px}
.fld.err .inp{border-color:var(--ink);box-shadow:0 0 0 4px #E5E5E5}
.fld.err .hint{color:var(--ink)}
.fld.err .hint::before{content:"! ";font-weight:500}
.pass{position:relative}
.pass .inp{padding-right:110px}
.pass button{position:absolute;right:8px;top:8px;height:40px;padding:0 14px;border-radius:99px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#585858}
.pass button:hover{color:var(--ink);background:var(--paper-cool)}
.agree{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;line-height:20px;color:var(--text);cursor:pointer;text-align:left}
.agree input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border-radius:7px;box-shadow:inset 0 0 0 1.5px #8A8A8A;background:#fff;cursor:pointer;transition:background var(--t-fast),box-shadow var(--t-fast)}
.agree input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%23FBFBFB' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;box-shadow:none}
.agree input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.agree a{text-decoration:underline;text-underline-offset:3px}
.agree .opt{color:#6E6E6E}
.agrees{display:flex;flex-direction:column;gap:14px}
.switch{position:relative;width:46px;height:28px;flex:none;border-radius:99px;background:#D9D9D9;transition:background var(--t-base)}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--t-base) var(--ease-out)}
.switch[aria-checked=true]{background:var(--ink)}
.switch[aria-checked=true]::after{transform:translateX(18px)}

/* ——— сегменты и вкладки ——— */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:99px;background:var(--paper-cool)}
.seg button{height:40px;padding:0 18px;border-radius:99px;font:500 14px/1 var(--f-text);color:var(--text);transition:background var(--t-base),color var(--t-base)}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.seg--mono button{font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.tg{height:40px;padding:0 16px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);box-shadow:inset 0 0 0 1px #D9D9D9;background:#fff;transition:box-shadow var(--t-base)}
.tg:hover{box-shadow:inset 0 0 0 1px #8A8A8A}
.tg[aria-selected=true],.tg.on{background:var(--ink);color:var(--paper);box-shadow:none}

/* ——— коробки ——— */
.box{position:relative;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px #E5E5E5;padding:28px 30px}
.box--cool{background:var(--paper-cool);box-shadow:none}
.box--ink{background:var(--ink);color:var(--on-ink);box-shadow:none}
.box--ink .label{color:var(--on-ink-min)}
.box h3{font:500 24px/30px var(--f-head);color:var(--ink)}
.box--ink h3{color:var(--on-ink)}
@media (max-width:640px){.box{padding:22px 20px;border-radius:20px}}
.cornered{position:relative;border-radius:20px;padding:30px 32px}
.cornered::before{content:"";position:absolute;inset:0;border-radius:20px;border:1.5px solid #353535;pointer-events:none;
  -webkit-mask:radial-gradient(60% 120% at 0 0,#000 10%,transparent 58%),radial-gradient(60% 120% at 100% 100%,#000 10%,transparent 58%);
          mask:radial-gradient(60% 120% at 0 0,#000 10%,transparent 58%),radial-gradient(60% 120% at 100% 100%,#000 10%,transparent 58%)}
.cornered h3{margin-top:14px;font:500 26px/32px var(--f-head);color:var(--ink)}
.cornered p{margin-top:12px;color:var(--text)}
.folder-l{position:relative;padding:40px 28px 26px;isolation:isolate}
.folder-l .contour .fill{fill:#fff}.folder-l .contour .line{stroke:#D4D4D4}
.folder-d{position:relative;padding:40px 28px 26px;isolation:isolate;color:var(--on-ink)}
.folder-d .contour .fill{fill:#0B0B0B}.folder-d .contour .line{stroke:#2C2C2C}
.help{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 34px;border-radius:24px;background:#EFEFEF}
.help h3{font:500 26px/32px var(--f-head);color:var(--ink)}
.help p{margin-top:6px;color:var(--text-min)}
@media (max-width:900px){.help{flex-direction:column;align-items:flex-start;padding:24px 22px}}

/* ——— цифры и статусы ——— */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:20px 22px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #E5E5E5}
.kpi b{display:block;margin-top:10px;font:500 32px/1 var(--f-head);color:var(--ink)}
.kpi small{display:block;margin-top:8px;font-size:13px;line-height:18px;color:#6E6E6E}
.kpi--ink{background:var(--ink);box-shadow:none}.kpi--ink b{color:var(--on-ink)}.kpi--ink .label{color:var(--on-ink-min)}.kpi--ink small{color:var(--on-ink-2)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stt{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;background:var(--paper-cool);color:#585858}
.stt::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.stt--ok{background:var(--ink);color:var(--paper)}
.stt--out{background:transparent;box-shadow:inset 0 0 0 1px #C8C8C8}
.chip--l{background:var(--paper-cool);color:var(--text)}
.bar{height:6px;border-radius:6px;background:#E5E5E5;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width var(--t-mid) var(--ease-out)}
.loadbar{height:4px;border-radius:4px;background:#E5E5E5;overflow:hidden;position:relative}
.loadbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);animation:load 2s var(--ease-io) forwards}
@keyframes load{to{width:100%}}

/* ——— таблицы ——— */
.tbl-wrap{overflow-x:auto;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scrollbar-width:thin}
.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
.tbl th{text-align:left;font:500 11.5px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;padding:0 16px 14px 0;border-bottom:1px solid #D9D9D9;white-space:nowrap}
.tbl td{padding:16px 16px 16px 0;border-bottom:1px solid #E5E5E5;vertical-align:middle;color:var(--text)}
.tbl td b{font-weight:500;color:var(--ink)}
.tbl .r{text-align:right}
.tbl .mono{font:500 13px/20px var(--f-mono);letter-spacing:.04em;color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl-act{display:flex;gap:6px;justify-content:flex-end}
.ibtn{height:34px;padding:0 12px;border-radius:99px;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#585858;box-shadow:inset 0 0 0 1px #D9D9D9;white-space:nowrap}
.ibtn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px #8A8A8A}

/* ——— код ——— */
.code{position:relative;border-radius:16px;background:#101010;box-shadow:inset 0 0 0 1px #1E1E1E;overflow:hidden;color:#D0D0D0}
.code-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid #1E1E1E}
.code-bar .label{color:#BDBDBD}
.code-tabs{display:flex;gap:4px}
.code-tabs button{height:30px;padding:0 12px;border-radius:99px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A}
.code-tabs button[aria-selected=true]{background:#232323;color:var(--on-ink)}
.code pre{margin:0;padding:18px 20px 22px;font:400 13px/21px var(--f-mono);white-space:pre;overflow-x:auto;tab-size:2}
.code pre .c{color:#6E6E6E}.code pre .s{color:#FBFBFB}.code pre .k{color:#A3A3A3}
code.inl{font:500 13px/1 var(--f-mono);background:var(--paper-cool);color:var(--ink);padding:3px 7px;border-radius:6px;white-space:nowrap}
.keyline{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:99px;background:var(--ink);color:var(--on-ink);font:500 14px/1 var(--f-mono);letter-spacing:.02em}
.keyline span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ——— модальное окно, тост, cookie ——— */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(8,8,8,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--t-base)}
.modal.show{opacity:1}
.mbox{position:relative;width:min(540px,100%);max-height:calc(100svh - 32px);overflow:auto;border-radius:28px;background:var(--paper);padding:32px 34px 30px;box-shadow:0 30px 80px rgba(8,8,8,.25);transform:translateY(10px);transition:transform var(--t-mid) var(--ease-out)}
.modal.show .mbox{transform:none}
.mbox h2{margin-top:18px;font:500 34px/38px var(--f-head);color:var(--ink)}
.mbox h2 .fade-paper{display:block}
.mbox p{color:var(--text)}
.m-x{height:34px;padding:0 12px;border-radius:99px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#585858;box-shadow:inset 0 0 0 1px #D9D9D9}
.m-x:hover{color:var(--ink)}
.mline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--paper-cool);color:var(--ink);font:500 16px/22px var(--f-text)}
.mline b{font:500 22px/1 var(--f-text);white-space:nowrap}
.m-fine{font-size:13px;line-height:19px;color:#585858}
.m-fine a{text-decoration:underline;text-underline-offset:2px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mgrid button{height:48px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #D9D9D9;font:500 15px/1 var(--f-text);color:var(--ink)}
.mgrid button[aria-selected=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.okmark{width:72px;height:72px;border-radius:20px;background:var(--ink);display:grid;place-items:center;color:var(--paper)}
.okmark svg{width:34px;height:34px}
@media (max-width:640px){.modal{place-items:end center;padding:0}.mbox{width:100%;border-radius:24px 24px 0 0;padding:24px 20px 28px;max-height:92svh}.mbox h2{font-size:28px;line-height:32px}.mgrid{grid-template-columns:repeat(2,1fr)}}
.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,16px);opacity:0;pointer-events:none;height:44px;padding:0 18px;border-radius:99px;display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity var(--t-base),transform var(--t-base) var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.cookie{position:fixed;left:16px;bottom:16px;z-index:70;width:min(520px,calc(100% - 32px));padding:22px 24px;border-radius:22px;background:rgba(8,8,8,.94);backdrop-filter:blur(10px);color:var(--on-ink-2);font-size:14px;line-height:21px}
.cookie b{display:block;margin-bottom:6px;color:var(--on-ink);font:500 12px/16px var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.cookie a{color:var(--on-ink);text-decoration:underline;text-underline-offset:3px}
.cookie .hrow{margin-top:16px}
.cookie .btn--line{color:var(--on-ink)}
@media (max-width:640px){.cookie{left:8px;bottom:8px;width:calc(100% - 16px);padding:18px}.cookie .btn{flex:1;justify-content:center}}
.static .cookie,.static .demo-bar{display:none}
.demo-bar{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(8,8,8,.86);backdrop-filter:blur(8px)}
.demo-bar a,.demo-bar button{height:30px;padding:0 12px;border-radius:99px;display:inline-flex;align-items:center;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#BDBDBD}
.demo-bar .on{background:var(--paper);color:var(--ink)}

/* ——— вход ——— */
.auth{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:start;padding:28px 0 var(--sec)}
.auth-side{position:relative;min-height:560px;border-radius:28px;overflow:hidden;background:var(--ink);color:var(--on-ink);padding:36px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
  background-image:radial-gradient(circle at center,#1A1A1A 1.1px,transparent 1.4px);background-size:28px 28px}
.auth-side canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.auth-side h2{font:500 40px/44px var(--f-head)}
.auth-side ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px;color:var(--on-ink-2)}
.auth-side li{display:grid;grid-template-columns:26px 1fr;gap:8px}
.auth-side .br{width:22px;height:22px;color:var(--on-ink)}
.auth-form h1{font:500 clamp(36px,3.6vw,52px)/1.02 var(--f-head);color:var(--ink);margin-top:18px}
.auth-form form{margin-top:32px;display:flex;flex-direction:column;gap:18px}
.or{display:flex;align-items:center;gap:14px;color:#8A8A8A}
.or::before,.or::after{content:"";flex:1;height:1px;background:#E5E5E5}
.sso{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sso .btn{justify-content:center;padding:0 16px}
.sso .ini{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:500 11px/1 var(--f-head)}
@media (max-width:1100px){.auth{grid-template-columns:1fr;gap:40px}.auth-side{min-height:0;order:2}}
@media (max-width:640px){.sso{grid-template-columns:1fr}.auth-side{padding:28px 22px}.auth-side h2{font-size:30px;line-height:34px}}

/* ——— кабинет ——— */
.acc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start;padding:28px 0 var(--sec)}
.side{position:sticky;top:24px;display:flex;flex-direction:column;gap:28px}
.side .grp{display:flex;flex-direction:column;gap:2px}
.side .grp>.label{margin-bottom:10px;color:#8A8A8A}
.side a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 14px;margin-left:-14px;border-radius:12px;font:500 12px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#585858;transition:background var(--t-base),color var(--t-base)}
.side a:hover{color:var(--ink);background:var(--paper-cool)}
.side a.on{color:var(--paper);background:var(--ink)}
.side a .n{font-size:11px;letter-spacing:.08em;opacity:.7}
.side .me{padding-top:20px;border-top:1px solid #E5E5E5;font-size:14px;line-height:20px;color:var(--text-min)}
.side .me b{display:block;color:var(--ink);font-weight:500}
.pane{display:none}
.pane.on{display:block}
.pane-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.pane-head h1{font:500 clamp(34px,3.4vw,48px)/1.04 var(--f-head);color:var(--ink);margin-top:14px}
.pane-head p{margin-top:12px;color:var(--text-min);max-width:560px}
.pane+.pane{margin-top:0}
.blk+.blk{margin-top:48px}
.blk>.between{margin-bottom:20px}
@media (max-width:1100px){.acc{grid-template-columns:minmax(0,1fr);gap:28px}.side{position:static;flex-direction:row;overflow-x:auto;gap:4px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 4px;scrollbar-width:none}.side::-webkit-scrollbar{display:none}.side .grp{flex-direction:row;gap:4px}.side .grp>.label,.side .me{display:none}.side a{margin:0;white-space:nowrap;box-shadow:inset 0 0 0 1px #D9D9D9}.side a.on{box-shadow:none}}
@media (max-width:640px){.pane-head{flex-direction:column;align-items:flex-start;margin-bottom:24px}}
.owned{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.own{display:flex;flex-direction:column;min-height:250px;color:var(--ink)}
.own h3{margin-top:12px;font:500 24px/29px var(--f-head);width:fit-content;max-width:100%}
.own p{margin-top:8px;color:var(--text-min);font-size:15px;line-height:22px}
.own .progress{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:14px}
.own .progress .bar{flex:1}
.own .acts{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px){.owned{grid-template-columns:1fr}}
.void{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:44px 40px;border-radius:24px;background:var(--paper-cool)}
.void h3{font:500 28px/34px var(--f-head);color:var(--ink)}
.void p{color:var(--text-min);max-width:480px}
.prof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prow{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #E5E5E5}
.prow:last-child{border-bottom:0}
.prow b{display:block;font-weight:500;color:var(--ink)}
.prow span.small{display:block;color:var(--text-min);margin-top:2px}
@media (max-width:900px){.prof{grid-template-columns:1fr}}
.chart{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:12px}
.chart i{flex:1;min-width:4px;border-radius:6px 6px 2px 2px;background:#D9D9D9;position:relative;transition:background var(--t-base)}
.chart i:hover,.chart i.hi{background:var(--ink)}
.chart-x{display:flex;justify-content:space-between;margin-top:10px}

/* ——— API ——— */
.api-hero{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:center;padding:28px 0 96px}
.api-hero h1{margin-top:18px;font:500 clamp(44px,5vw,76px)/.98 var(--f-head);letter-spacing:-.012em;color:var(--ink)}
.api-hero .text-l{margin-top:22px;max-width:560px}
.api-hero .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (max-width:1100px){.api-hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:72px}}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.model{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px #E5E5E5;transition:box-shadow var(--t-base)}
.model:hover{box-shadow:inset 0 0 0 1px #8A8A8A}
.model h3{font:500 21px/26px var(--f-head);color:var(--ink)}
.model .id{font:500 12px/16px var(--f-mono);color:#6E6E6E;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model .pr{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px;border-top:1px solid #EFEFEF}
.model .pr b{display:block;margin-top:4px;font:500 18px/1 var(--f-text);color:var(--ink)}
.model .tags{display:flex;flex-wrap:wrap;gap:6px}
.model .tags span{height:24px;padding:0 9px;border-radius:99px;display:inline-flex;align-items:center;font-size:12.5px;background:var(--paper-cool);color:var(--text)}
@media (max-width:1100px){.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.models{grid-template-columns:1fr}}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps3 h3{margin-top:14px;font:500 22px/28px var(--f-head);color:var(--ink)}
.steps3 p{margin-top:10px;color:var(--text);font-size:16px;line-height:24px}
@media (max-width:1100px){.steps3{grid-template-columns:minmax(0,1fr)}}

/* ——— документы ——— */
.docs{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:start;padding:28px 0 var(--sec)}
.dtoc{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px}
.dtoc>.label{margin-bottom:12px;color:#8A8A8A}
.dtoc a{padding:10px 14px;margin-left:-14px;border-radius:12px;font-size:15px;line-height:20px;color:var(--text);transition:background var(--t-base)}
.dtoc a:hover{background:var(--paper-cool)}
.dtoc a.on{background:var(--ink);color:var(--paper)}
.doc{max-width:780px}
.doc h1{font:500 clamp(32px,3.2vw,46px)/1.06 var(--f-head);color:var(--ink);margin:14px 0 28px}
.doc h2{font:500 24px/30px var(--f-head);color:var(--ink);margin:40px 0 14px}
.doc h3{font:500 19px/26px var(--f-text);color:var(--ink);margin:28px 0 10px}
.doc p,.doc li{font-size:16.5px;line-height:27px;color:var(--text)}
.doc p+p{margin-top:12px}
.doc ul,.doc ol{margin:10px 0 12px 22px;display:flex;flex-direction:column;gap:6px}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc table{width:100%;border-collapse:collapse;margin:16px 0}
.doc td,.doc th{border-bottom:1px solid #E5E5E5;padding:10px 12px 10px 0;text-align:left;font-size:15px;line-height:22px;vertical-align:top}
.doc .ph{background:#E5E5E5;color:var(--ink);border-radius:4px;padding:0 5px;font:500 .86em/1.5 var(--f-mono)}
.doc blockquote{margin:16px 0;padding:16px 20px;border-radius:16px;background:var(--paper-cool)}
.doc-note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--paper-cool);font-size:14px;line-height:20px;color:#585858;margin-bottom:28px}
@media (max-width:1100px){.docs{grid-template-columns:minmax(0,1fr);gap:28px}.dtoc{position:static;flex-direction:row;overflow-x:auto;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 4px;scrollbar-width:none}.dtoc::-webkit-scrollbar{display:none}.dtoc>.label{display:none}.dtoc a{margin:0;white-space:nowrap;box-shadow:inset 0 0 0 1px #D9D9D9;border-radius:99px;font-size:14px}.dtoc a.on{box-shadow:none}}

/* ——— поддержка, FAQ, заглушки ——— */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.sup{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;padding:28px 0 var(--sec)}
.sup form{display:flex;flex-direction:column;gap:18px}
.sup .ctx{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1100px){.sup{grid-template-columns:minmax(0,1fr);gap:40px}}
.faq-page .faq{padding:24px 0 var(--sec)}
.faq-page .faq-list+.label{margin-top:48px}
.faq-cat{margin:44px 0 16px}
.faq-cat:first-child{margin-top:0}
.big404{font:500 clamp(140px,22vw,320px)/.84 var(--f-head);letter-spacing:-.03em;background:linear-gradient(90deg,#080808 0%,#8A8A8A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.soon-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.soon-cards .folder-l h3{margin-top:12px;font:500 26px/32px var(--f-head);color:var(--ink)}
.soon-cards .folder-l p{margin-top:10px;color:var(--text-min);font-size:16px;line-height:24px}
@media (max-width:1100px){.soon-cards{grid-template-columns:1fr}}
.notify{display:flex;gap:10px;flex-wrap:wrap}
.notify .inp{width:320px;max-width:100%}
.pay-state{text-align:left}
.steps3>*,.api-hero>*,.acc>*,.calc>*,.docs>*,.sup>*,.auth>*{min-width:0}
.doc p.label{font:500 12px/16px var(--f-mono);color:var(--text-min)}
.ibtn{display:inline-flex;align-items:center;justify-content:center}
.ibtn:disabled{opacity:.5;cursor:default}

/* ——— профиль: тёмная «папка» + разделы-паспорта ——— */
.pf-card{position:relative;isolation:isolate;padding:52px 36px 30px;color:var(--on-ink)}
.pf-card .contour .fill{fill:var(--ink)}.pf-card .contour .line{stroke:var(--ink)}
.pf-id{display:flex;align-items:center;gap:28px}
.pf-ava{flex:none;width:104px;height:104px;border-radius:28px;display:grid;place-items:center;background:var(--paper);color:var(--ink);font:500 52px/1 var(--f-head)}
.pf-id .label{color:var(--on-ink-min)}
.pf-id h1{margin-top:12px;font:500 clamp(28px,3vw,42px)/1.05 var(--f-head);color:var(--on-ink);width:fit-content;max-width:100%;overflow-wrap:anywhere}
.pf-since{margin-top:10px;color:var(--on-ink-2);font-size:15px;line-height:22px}
.pf-stats{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #1E1E1E}
.pf-stats a{display:flex;flex-direction:column;gap:8px;padding:22px 20px 4px 0;transition:opacity var(--t-base)}
.pf-stats a+a{padding-left:20px;border-left:1px solid #1E1E1E}
.pf-stats a:hover{opacity:.75}
.pf-stats b{font:500 30px/1 var(--f-head);color:var(--on-ink);white-space:nowrap}
.pf-stats .label{color:var(--on-ink-min)!important}
.pf-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;padding:48px 0 8px;margin-top:40px;border-top:1px solid #E5E5E5}
.pf-sec-h h3{margin-top:14px;font:500 26px/32px var(--f-head);color:var(--ink)}
.pf-sec-h p:not(.label){margin-top:10px;color:var(--text-min);font-size:15px;line-height:22px;max-width:300px}
.pf-rows{display:flex;flex-direction:column}
.pf-row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid #EFEFEF}
.pf-row:first-child{padding-top:0}
.pf-row:last-child{border-bottom:0}
.pf-row>.label{color:#6E6E6E;align-self:start;padding-top:3px}
.pf-row b{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 17px/24px var(--f-text);color:var(--ink)}
.pf-row small{display:block;margin-top:2px;font-size:14px;line-height:20px;color:var(--text-min)}
.pf-dev small+b{margin-top:12px}
.pf-dev em{font-style:normal}
.pf-dots{letter-spacing:.12em}
.pf-sec--quiet .pf-row b{color:var(--text)}
.ibtn--quiet{color:#585858;box-shadow:none;text-decoration:underline;text-underline-offset:3px;padding:0 4px}
.ibtn--quiet:hover{box-shadow:none;color:var(--ink)}
@media (max-width:1100px){.pf-sec{grid-template-columns:1fr;gap:24px}}
@media (max-width:640px){.pf-card{padding:44px 20px 20px}.pf-id{flex-direction:column;align-items:flex-start;gap:18px}.pf-ava{width:72px;height:72px;border-radius:20px;font-size:36px}.pf-stats{grid-template-columns:1fr 1fr}.pf-stats a:nth-child(3){padding-left:0;border-left:0}.pf-stats a:nth-child(n+3){border-top:1px solid #1E1E1E}.pf-stats b{font-size:24px}.pf-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}.pf-row>.label{grid-column:1/-1}}
