/* ═══════════════════════════════════════════════════════════════════════
   NEXLY — дизайн-система сайта
   ═══════════════════════════════════════════════════════════════════════

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

     • чернильный фон (ink) — рабочая среда, в которой живёт приложение;
     • индиго (indigo) — цвет щита Nexly. Им закрашиваются целые поля
       (карточка профиля, финальная полоса), а не только кнопки;
     • «бумага документа» (bone) — карточки личности и образцы данных.
       Холодная, не кремовая: это пластик удостоверения, а не книжная страница.

   Моноширинный шрифт — только для данных (значения отпечатка, код, MRZ),
   не как «технический костюм».

   Шрифт один — Geologica, у него есть ось остроты (SHRP): заголовки режутся
   острыми, текст остаётся мягким. Файлы лежат у нас (fonts/): внешний CDN
   шрифтов в РФ открывается через раз, а первый экран без шрифта — это
   первый экран чужого сайта.

   Файл идёт одним запросом на все публичные страницы. Кабинет, вход и
   панель статистики — в app.css, сканер — в scanner.css (грузится сам).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── шрифты ─── */
@font-face{
  font-family:"Geologica";
  src:url(/fonts/geologica-cyrillic.woff2) format("woff2");
  font-weight:100 900; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Geologica";
  src:url(/fonts/geologica-latin.woff2) format("woff2");
  font-weight:100 900; font-display:swap;
  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,U+2190-21FF,U+2200-22FF,U+25A0-25FF;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url(/fonts/jbmono-cyrillic.woff2) format("woff2");
  font-weight:400 800; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url(/fonts/jbmono-latin.woff2) format("woff2");
  font-weight:400 800; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212,U+2215,U+25A0-25FF;
}

/* ─── токены ─── */
:root{
  color-scheme:dark;

  --ink:#0B0E17;        /* фон страницы */
  --ink-2:#0E121D;      /* чередующаяся полоса */
  --panel:#141A2A;      /* поверхность */
  --panel-2:#1A2136;    /* поверхность над поверхностью */
  --line:#222A3F;       /* разделители, рамки структуры */
  --line-2:#303A55;     /* рамка кнопки, поля */

  --text:#EEF0F7;
  --text-2:#B3B9CB;
  --text-3:#848CA1;

  --indigo:#5B5CF0;
  --indigo-hi:#6F71F5;
  --indigo-lo:#4B4CDB;
  --indigo-ink:#2E2F9E;   /* текст на светлом индиго-фоне */
  --indigo-soft:rgba(91,92,240,.14);
  --peri:#AEB4FF;         /* ссылки и акценты на тёмном */

  --bone:#E8EAF2;
  --bone-2:#D8DCE8;
  --bone-ink:#151A2B;
  --bone-mute:#565D74;

  --pass:#3DD68C;
  --warn:#F2B53A;
  --fail:#F05A67;
  --tg:#2AABEE;

  --f:"Geologica",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* шкала: 13 · 15 · 17 · 20 · 24 · 32 · 44 · 60 · 76 */
  --t-xs:13px; --t-sm:15px; --t-md:17px; --t-lg:20px; --t-xl:24px;
  --t-2xl:32px; --t-3xl:clamp(32px,4.2vw,44px); --t-4xl:clamp(38px,5.4vw,60px); --t-5xl:clamp(42px,6.4vw,78px);

  /* радиусы: внешний = внутренний + отступ (концентричность) */
  --r-xs:4px; --r-sm:8px; --r-md:10px; --r-lg:16px; --r-xl:22px;

  --wrap:1240px;
  --gut:clamp(20px,4vw,40px);
  --nav-h:64px;

  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 8px 24px -8px rgba(0,0,0,.45);
  --shadow-2:0 2px 6px rgba(0,0,0,.35),0 24px 60px -16px rgba(0,0,0,.6);

  /* совместимость: старый JS кое-где пишет var(--t4), var(--r) и т.п. в
     инлайн-стилях. Сводим их к новым токенам, чтобы такие места не
     остались неокрашенными. */
  --bg:var(--ink); --bg2:var(--ink-2); --bg3:var(--panel); --bg4:var(--panel-2);
  --t1:var(--text); --t2:var(--text-2); --t3:var(--text-3); --t4:var(--text-3);
  --ac:var(--indigo); --ac2:var(--peri); --acl:var(--peri);
  --border:var(--line); --border-s:var(--line); --border-h:var(--line-2);
  --r:var(--r-md); --rl:var(--r-lg);
  --green:var(--pass); --red:var(--fail); --orange:var(--warn); --yellow:var(--warn);
  --font:var(--f); --fm:var(--mono);
  --card:var(--panel); --t:var(--text); --accent:var(--indigo); --accent2:var(--peri);
  --amber:var(--warn); --elevated:var(--panel-2); --shell:var(--ink-2); --surface:var(--panel); --base:var(--ink);
}

/* ─── база ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f); font-size:16px; line-height:1.6; font-weight:400;
  font-variation-settings:"SHRP" 0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}
img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--peri);text-decoration:none;text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.12;text-wrap:balance;font-variation-settings:"SHRP" 100}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
code,kbd,pre,samp{font-family:var(--mono)}
::selection{background:var(--indigo);color:#fff}
:focus-visible{outline:2px solid var(--peri);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* полосы прокрутки в цвет среды: браузерные серые — первое, что выдаёт сборку */
html{scrollbar-color:#2C3550 var(--ink);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2C3550;border-radius:10px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:#3A4568}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ─── раскладка ─── */
.wrap,.container{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:calc(820px + var(--gut)*2)}
main#app{display:block;min-height:70vh}

/* ─── кнопки ─── */
.btn{
  --h:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h);padding:0 20px;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;color:var(--text);
  font-size:var(--t-sm);font-weight:600;line-height:1;white-space:nowrap;
  text-decoration:none;cursor:pointer;user-select:none;
  transition-property:background-color,border-color,color,transform,opacity;
  transition-duration:.15s;transition-timing-function:var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.96)}
.btn svg{flex:none;width:16px;height:16px}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-hi)}
.btn-primary:active{background:var(--indigo-lo)}
.btn-ghost,.btn-outline,.btn-secondary{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover,.btn-outline:hover,.btn-secondary:hover{background:var(--panel);border-color:#3D4966}
.btn-light{background:var(--bone);color:var(--bone-ink)}
.btn-light:hover{background:#fff}
.btn-danger{background:transparent;border-color:rgba(240,90,103,.45);color:#FF8A94}
.btn-danger:hover{background:rgba(240,90,103,.1)}
.btn-lg{--h:52px;padding:0 26px;font-size:var(--t-md);border-radius:12px}
.btn-sm{--h:34px;padding:0 14px;font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn-full{width:100%}
.btn[disabled],.btn.btn-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-current{border-color:rgba(61,214,140,.4);color:var(--pass);cursor:default}
.btn-current:active{transform:none}

/* ─── шапка ─── */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(11,14,23,.86);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease-out);
}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;gap:32px;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:18px;letter-spacing:-.01em;font-variation-settings:"SHRP" 100}
.logo:hover{text-decoration:none}
.logo img{width:26px;height:30px}
.nav-links{display:flex;align-items:center;gap:4px;margin-right:auto}
.nav-links a{
  position:relative;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:var(--t-sm);font-weight:500;
  transition:color .15s var(--ease-out),background-color .15s var(--ease-out);
}
.nav-links a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-13px;height:2px;border-radius:2px;background:var(--indigo)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-login{color:var(--text-2);font-size:var(--t-sm);font-weight:500;padding:8px 10px;border-radius:var(--r-sm)}
.nav-login:hover{color:var(--text);background:var(--panel);text-decoration:none}
.btn-nav{--h:38px;padding:0 16px;font-size:var(--t-sm);border-radius:var(--r-sm);background:var(--indigo);color:#fff}
.btn-nav:hover{background:var(--indigo-hi)}
.nav-dash-link{display:none!important}

.lang-switcher{display:inline-flex;padding:3px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line)}
.lang-switcher button{
  height:26px;min-width:34px;padding:0 8px;border:0;border-radius:5px;background:transparent;
  color:var(--text-3);font-size:12px;font-weight:600;letter-spacing:.02em;
  transition:color .15s var(--ease-out),background-color .15s var(--ease-out);
}
.lang-switcher button:hover{color:var(--text)}
.lang-switcher button.active{background:var(--panel-2);color:var(--text)}

.burger{display:none;width:40px;height:40px;margin-left:4px;border:0;border-radius:var(--r-sm);background:transparent;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:49;
  display:flex;flex-direction:column;gap:2px;padding:12px var(--gut) 24px;
  background:var(--ink);border-bottom:1px solid var(--line);
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s linear .18s;
}
.mobile-menu.open{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.mobile-menu a{padding:12px 4px;color:var(--text);font-size:var(--t-lg);font-weight:600;border-bottom:1px solid var(--line)}
.mobile-menu a:hover{text-decoration:none;color:var(--peri)}
.mobile-menu .lang-switcher{align-self:flex-start;margin-bottom:8px}
.mobile-menu .btn{margin-top:16px;border-bottom:0}

@media (max-width:960px){
  .nav-links,.nav-right .nav-login,.nav-right .lang-switcher{display:none}
  .burger{display:block}
  .nav-right{margin-left:auto}
  .nav-in{gap:12px}
}
@media (min-width:961px){ .mobile-menu{display:none} }

/* ─── подвал ─── */
.site-footer{border-top:1px solid var(--line);margin-top:0;padding:56px 0 32px;color:var(--text-3);font-size:var(--t-sm)}
.footer-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:17px;font-variation-settings:"SHRP" 100}
.footer-brand img{width:22px;height:26px}
.footer-desc{margin-top:12px;max-width:34ch;line-height:1.6}
.site-footer h4{font-size:var(--t-sm);font-weight:600;color:var(--text);margin:0 0 12px;font-variation-settings:"SHRP" 0}
.site-footer nav a,.site-footer .footer-col a{display:block;padding:5px 0;color:var(--text-3)}
.site-footer nav a:hover,.site-footer .footer-col a:hover{color:var(--text);text-decoration:none}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;max-width:calc(var(--wrap) + var(--gut)*2);margin:48px auto 0;padding:20px var(--gut) 0;border-top:1px solid var(--line);font-size:var(--t-xs)}
.footer-bottom a{color:var(--text-3)}
@media (max-width:860px){ .footer-in{grid-template-columns:1fr 1fr} .footer-in>:first-child{grid-column:1/-1} }
@media (max-width:480px){ .footer-in{grid-template-columns:1fr} }

/* кнопка поддержки: цвет Telegram, потому что ведёт в Telegram */
#supportFab{
  position:fixed;right:20px;bottom:20px;z-index:40;
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tg);color:#fff;
  box-shadow:0 6px 20px -4px rgba(42,171,238,.5),0 2px 6px rgba(0,0,0,.3);
  transition:transform .15s var(--ease-out),background-color .15s var(--ease-out);
}
#supportFab:hover{background:#3DB5F2;text-decoration:none}
#supportFab:active{transform:scale(.96)}
@media (max-width:520px){ #supportFab{right:14px;bottom:14px;width:44px;height:44px} }

/* ─── общие куски страниц ─── */
.page-head{padding:72px 0 40px}
.page-head h1{font-size:var(--t-4xl);letter-spacing:-.03em;line-height:1.04;max-width:18ch}
.page-head .lead{margin-top:18px}
.lead{font-size:var(--t-lg);line-height:1.55;color:var(--text-2);max-width:56ch}
.muted{color:var(--text-3)}
.section{padding:96px 0}
.section-tight{padding:64px 0}
.sec-title{font-size:var(--t-3xl);letter-spacing:-.025em;line-height:1.08;max-width:22ch}
.sec-lead{margin-top:16px;font-size:var(--t-md);color:var(--text-2);max-width:60ch}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--peri)}
.link-more svg{display:none}
.link-more{text-decoration:underline;text-decoration-color:rgba(174,180,255,.35);text-underline-offset:.22em}
.link-more:hover{text-decoration-color:currentColor}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text-2);font-size:12px;font-weight:500;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex:none}
.dot.is-pass{background:var(--pass)} .dot.is-warn{background:var(--warn)} .dot.is-fail{background:var(--fail)}

/* окно приложения: рамка вокруг живых демо */
.window{border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-2);overflow:hidden}
.window-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:#111626;color:var(--text-3);font-size:var(--t-xs)}
.window-bar .wb-dots{display:flex;gap:6px}
.window-bar .wb-dots i{width:10px;height:10px;border-radius:50%;background:#2A3350}
.window-bar .wb-title{font-weight:500;color:var(--text-2)}
.window-bar .wb-right{margin-left:auto;display:flex;gap:6px}

/* ─── вопросы и ответы ─── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:20px 0;font-size:var(--t-md);font-weight:600;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;
  background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;
  color:var(--text-3);transition:transform .2s var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--peri)}
.faq .faq-a{padding:0 0 22px;color:var(--text-2);max-width:70ch}

/* ═══════════════════════════ ГЛАВНАЯ ═══════════════════════════ */

/* ─── первый экран ─── */
.hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
/* Порядок слоёв задан явно: затемнение (::before) идёт ПОВЕРХ поля клеток,
   иначе при равном z-index канва, стоящая в DOM позже, закрыла бы его. */
.hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
/* Слой отклика: волна от клика, клетка под курсором, вспышка новых клеток.
   Лежит НАД затемнением и ПОД текстом — ответ на действие человека не должен
   гаснуть в пятне, которое приглушает фоновые клетки ради читаемости. */
.hero-fx{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.hero-in{position:relative;z-index:1}
/* затемняем поле под текстом: клетки видны, но буквы не тонут в них */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* пятно под текстом, а не полоса: край поля и низ остаются живыми, и
     волна от клика там видна целиком */
  background:radial-gradient(ellipse 46% 58% at 24% 48%,rgba(11,14,23,.94) 0%,rgba(11,14,23,.82) 45%,rgba(11,14,23,.35) 75%,rgba(11,14,23,0) 100%);
}
.hero-in{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center;
  min-height:calc(100dvh - var(--nav-h));max-height:980px;padding-top:56px;padding-bottom:72px;
}
/* Заголовок — две фразы, каждая своей строкой: так он читается как пара
   «один — сотни», а не как абзац, случайно разорванный переносом. */
.hero h1{font-size:clamp(38px,3.95vw,57px);letter-spacing:-.035em;line-height:1.02}
.hero h1 span{display:block}
.hero .lead{margin-top:24px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;color:var(--text-3);font-size:var(--t-sm)}
.hero-note span{display:inline-flex;align-items:center;gap:8px}
.hero-note svg{width:16px;height:16px;color:var(--text-3)}
.hero-hint{margin-top:44px;color:var(--text-3);font-size:var(--t-xs);display:flex;align-items:center;gap:8px}
.hero-hint kbd{font-family:var(--f);font-size:11px;padding:2px 6px;border-radius:4px;border:1px solid var(--line-2);color:var(--text-2)}

/* колода удостоверений */
.id-deck{position:relative;height:650px}
.id-card{
  position:absolute;width:min(410px,92%);border-radius:var(--r-xl);padding:22px 22px 18px;
  box-shadow:var(--shadow-2);
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);
}
.id-card.is-visitor{top:0;left:0;background:var(--bone);color:var(--bone-ink);transform:rotate(-4deg)}
.id-card.is-profile{bottom:0;right:0;background:var(--indigo);color:#fff;transform:rotate(2.5deg)}
/* Призраки за профилем — «и ещё сотни таких». Выглядывают снизу, где
   не закрывают данных карточки посетителя. */
.id-card.is-ghost{bottom:-14px;right:-18px;background:#3E3FB8;transform:rotate(6deg);opacity:.55;height:330px;box-shadow:none}
.id-card.is-ghost.g2{bottom:-30px;right:-34px;background:#2D2E86;transform:rotate(9.5deg);opacity:.35}
.id-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.id-kind{font-size:12px;font-weight:500;opacity:.72}
.id-name{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin-top:2px;font-variation-settings:"SHRP" 100}
.id-serial{font-family:var(--mono);font-size:12px;opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}
.id-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;margin-top:16px;align-items:start}
.id-print{width:96px;height:118px;border-radius:12px;display:grid;place-items:center}
.is-visitor .id-print{background:#DADEEA}
.is-profile .id-print{background:rgba(255,255,255,.12)}
.id-print svg{width:78px;height:100px}
.id-rows{display:grid;gap:5px;min-width:0}
.id-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;font-size:12.5px;line-height:1.35}
.id-row dt{opacity:.62}
.id-row dd{margin:0;font-family:var(--mono);font-size:12px;overflow:hidden;font-variant-numeric:tabular-nums;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.id-mrz{
  margin-top:16px;padding-top:12px;border-top:1px dashed currentColor;
  font-family:var(--mono);font-size:11.5px;line-height:1.5;letter-spacing:.12em;
  white-space:nowrap;overflow:hidden;opacity:.62;
}
.is-visitor .id-mrz{border-color:rgba(21,26,43,.25)}
.is-profile .id-mrz{border-color:rgba(255,255,255,.3)}
.id-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.id-foot small{font-size:12px;opacity:.7;line-height:1.4}
.id-swap{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:9px;border:0;
  background:#fff;color:var(--indigo-ink);font-size:13px;font-weight:600;white-space:nowrap;
  transition:transform .15s var(--ease-out),background-color .15s var(--ease-out);
}
.id-swap:hover{background:var(--bone)}
.id-swap:active{transform:scale(.96)}
.id-swap svg{width:15px;height:15px;transition:transform .45s var(--ease-out)}
.id-swap.is-spin svg{transform:rotate(180deg)}
.id-card [data-roll]{transition:opacity .16s var(--ease-out),filter .16s var(--ease-out)}
.id-card [data-roll].is-rolling{opacity:.15;filter:blur(3px)}

/* первая сдача колоды — единственный оркестрованный момент страницы */
@media (prefers-reduced-motion:no-preference){
  .id-deck.is-dealing .id-card{opacity:0}
  .id-deck.is-dealt .id-card{animation:deal .7s var(--ease-out) both}
  .id-deck.is-dealt .is-visitor{animation-delay:.05s}
  .id-deck.is-dealt .is-ghost.g2{animation-delay:.15s}
  .id-deck.is-dealt .is-ghost{animation-delay:.2s}
  .id-deck.is-dealt .is-profile{animation-delay:.32s}
  @keyframes deal{from{opacity:0;translate:0 28px;filter:blur(6px)}to{opacity:var(--o,1);translate:0 0;filter:blur(0)}}
  .id-deck.is-dealt .is-ghost{--o:.55}
  .id-deck.is-dealt .is-ghost.g2{--o:.35}
}

@media (max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0;max-height:none;gap:40px;padding-top:48px}
  .hero::before{background:linear-gradient(180deg,var(--ink) 0%,rgba(11,14,23,.88) 45%,rgba(11,14,23,.55) 100%)}
  .id-deck{height:650px;max-width:600px}
}
@media (max-width:560px){
  .id-deck{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  .id-card{position:relative;inset:auto;width:100%}
  .id-card.is-visitor,.id-card.is-profile{transform:none}
  .id-card.is-ghost{display:none}
  .id-body{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .hero h1{font-size:34px}
  .hero h1 span{display:inline}
  .id-print{width:72px;height:92px}
  .id-print svg{width:58px;height:76px}
  .hero-hint{display:none}
}

/* ─── «сайт видит браузер» ─── */
.linkage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.linkage-copy p+p{margin-top:14px}
.linkage-copy .sec-lead{margin-top:18px}
.seg{display:inline-flex;padding:4px;margin-top:28px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.seg button{
  height:38px;padding:0 16px;border:0;border-radius:8px;background:transparent;color:var(--text-2);
  font-size:var(--t-sm);font-weight:600;transition:background-color .15s var(--ease-out),color .15s var(--ease-out);
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.linkage-verdict{margin-top:20px;display:flex;align-items:center;gap:10px;font-weight:600;min-height:26px}
.linkage-verdict[data-state="bad"]{color:#FF8A94}
.linkage-verdict[data-state="good"]{color:var(--pass)}
.linkage-fig{position:relative;border-radius:var(--r-xl);background:var(--ink-2);border:1px solid var(--line);padding:12px}
.linkage-fig svg{width:100%;height:auto}
.lk-line{fill:none;stroke-width:1.5;transition:d .7s var(--ease-io),stroke .4s var(--ease-out),opacity .4s var(--ease-out)}
.lk-acc rect{fill:var(--panel-2);stroke:var(--line-2)}
.lk-acc text{fill:var(--text);font:600 13px var(--f)}
.lk-acc .lk-sub{fill:var(--text-3);font:400 11px var(--mono)}
.lk-fp{transition:transform .7s var(--ease-io),opacity .5s var(--ease-out)}

/* ─── демо приложения ─── */
.demo-block{display:grid;gap:32px}
.demo-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.demo-head .sec-lead{max-width:54ch}
.demo-tip{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:var(--t-sm)}
.demo-tip svg{width:18px;height:18px;color:var(--peri)}

/* ─── человеческий ввод ─── */
.human{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:48px}
.trace{border-radius:var(--r-xl);border:1px solid var(--line);background:var(--ink-2);padding:22px;display:grid;gap:16px}
.trace.is-nexly{background:var(--bone);color:var(--bone-ink);border-color:transparent}
.trace-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trace-head b{font-size:var(--t-lg);font-variation-settings:"SHRP" 100}
.trace-head span{font-size:var(--t-xs);color:var(--text-3)}
.trace.is-nexly .trace-head span{color:var(--bone-mute)}
.trace svg{width:100%;height:auto;border-radius:12px}
.trace.is-bot svg{background:#0A0D16}
.trace.is-nexly svg{background:#DDE1EC}
.trace .tr-pt,.trace .tr-click{transition:opacity .12s var(--ease-out)}
.trace dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:var(--t-sm)}
.trace dt{color:var(--text-3)}
.trace.is-nexly dt{color:var(--bone-mute)}
.trace dd{margin:0;font-family:var(--mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.trace.is-bot dd{color:#FF8A94}
.trace.is-nexly dd{color:#0E7A4D}
.human-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:28px}
.human-foot p{color:var(--text-2);max-width:60ch}

/* редактор сценариев в рамке окна */
.editor-block{margin-top:96px;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:48px;align-items:start}
.editor-block .sec-lead{margin-top:14px}
.editor-points{margin-top:24px;display:grid;gap:14px;list-style:none}
.editor-points li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--text-2);font-size:var(--t-sm)}
.editor-points svg{width:18px;height:18px;margin-top:3px;color:var(--peri)}

/* ─── задачи ─── */
.tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin-top:48px;border-top:1px solid var(--line)}
.task{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.task h3{font-size:var(--t-lg);font-variation-settings:"SHRP" 100}
.task p{color:var(--text-2);font-size:var(--t-sm)}

/* ─── шифрование ─── */
.vault{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.vault-facts{margin-top:28px;display:grid;gap:18px;list-style:none}
.vault-facts li b{display:block;font-weight:600}
.vault-facts li span{color:var(--text-2);font-size:var(--t-sm)}
.vault-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.vault-card{background:var(--bone);color:var(--bone-ink);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-2)}
.vault-card h3{font-size:var(--t-lg)}
.vault-row{margin-top:18px}
.vault-row small{display:block;font-size:12px;color:var(--bone-mute);margin-bottom:6px}
.vault-row code{display:block;padding:12px 14px;border-radius:10px;background:#DCE0EB;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.vault-row.is-cipher code{background:var(--bone-ink);color:#9EA6FF}
.vault-step{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--bone-mute)}
.vault-step svg{width:18px;height:18px}
.vault-promise{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(21,26,43,.25);font-size:var(--t-sm);font-weight:600}

/* ─── финальная полоса ─── */
.closing{background:var(--indigo);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.closing-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end;padding-top:88px;padding-bottom:88px}
.closing h2{font-size:var(--t-4xl);letter-spacing:-.03em;line-height:1.02;max-width:15ch}
.closing p{margin-top:16px;color:rgba(255,255,255,.82);font-size:var(--t-md);max-width:46ch}
.closing-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.closing .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.closing .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.closing-cells{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none}

@media (max-width:1000px){
  .linkage,.vault,.editor-block,.closing-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .closing-actions{justify-content:flex-start}
  .tasks{grid-template-columns:1fr}
}
@media (max-width:720px){
  .section{padding:72px 0}
  .human{grid-template-columns:1fr}
  .task{grid-template-columns:1fr;gap:6px}
}

/* ═══════════════════════════ ДОКУМЕНТАЦИЯ ═══════════════════════════ */
.docs{display:grid;grid-template-columns:232px minmax(0,1fr);gap:56px;align-items:start;padding-bottom:96px}
.docs-toc{position:sticky;top:calc(var(--nav-h) + 24px);max-height:calc(100dvh - var(--nav-h) - 48px);overflow:auto;padding-bottom:16px}
.docs-toc p{font-size:var(--t-xs);color:var(--text-3);margin-bottom:10px}
.docs-toc ol{list-style:none;display:grid;gap:2px;counter-reset:toc}
.docs-toc a{
  display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:baseline;
  padding:7px 10px;border-radius:var(--r-sm);color:var(--text-2);font-size:var(--t-sm);
}
.docs-toc a::before{counter-increment:toc;content:counter(toc);font-family:var(--mono);font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.docs-toc a:hover{background:var(--panel);color:var(--text);text-decoration:none}
.docs-toc a.is-current{background:var(--panel);color:var(--text)}
.docs-toc a.is-current::before{color:var(--peri)}
.docs-toc .docs-toc-extra{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:6px}
.docs-toc .docs-toc-extra a{grid-template-columns:1fr}
.docs-toc .docs-toc-extra a::before{content:none}

.docs-main{min-width:0}
.docs-try{margin-bottom:72px}
.docs-try h2{font-size:var(--t-2xl);letter-spacing:-.02em}
.docs-try>p{margin-top:10px;color:var(--text-2);max-width:62ch}
.docs-try .window{margin-top:24px}

.doc{padding:56px 0;border-top:1px solid var(--line)}
.doc:first-of-type{border-top:0;padding-top:0}
.doc-head{display:flex;align-items:baseline;gap:16px}
.doc-head .doc-n{font-family:var(--mono);font-size:var(--t-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.doc h2{font-size:var(--t-2xl);letter-spacing:-.02em}
.doc>.doc-lead{margin-top:10px;font-size:var(--t-md);color:var(--text-2);max-width:62ch}
.doc h3{font-size:var(--t-lg);margin:36px 0 10px}
.doc p,.doc li{color:var(--text-2);max-width:68ch}
.doc p+p{margin-top:10px}
.doc ul,.doc ol{margin:10px 0 0 1.2em;display:grid;gap:6px}
.doc li::marker{color:var(--text-3)}
.doc strong{color:var(--text);font-weight:600}
.doc code{font-size:.92em;padding:1px 6px;border-radius:5px;background:var(--panel);border:1px solid var(--line);color:var(--text)}
.doc-shot{margin:18px 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--panel);outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.doc-shot img{width:100%}
.doc-shot figcaption{padding:10px 14px;font-size:var(--t-xs);color:var(--text-3);border-top:1px solid var(--line)}

/* видео раздела: место зарезервировано всегда, чтобы появление файла не двигало страницу */
.doc-video{
  position:relative;margin-top:24px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);aspect-ratio:16/9;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;
}
.doc-video video,.doc-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doc-video video{object-fit:contain;background:#05070C}
.doc-video .dv-poster{filter:saturate(.8) brightness(.55)}
.doc-video .dv-play{
  position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:0;
  display:grid;place-items:center;background:var(--indigo);color:#fff;box-shadow:0 10px 30px -6px rgba(91,92,240,.6);
  transition:transform .15s var(--ease-out),background-color .15s var(--ease-out);
}
.doc-video .dv-play:hover{background:var(--indigo-hi)}
.doc-video .dv-play:active{transform:scale(.96)}
.doc-video .dv-play svg{width:26px;height:26px;margin-left:4px}
.doc-video .dv-soon{
  position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;background:rgba(11,14,23,.82);color:var(--text-2);font-size:var(--t-xs);
}
.doc-video .dv-soon svg{width:14px;height:14px}
.doc-video .dv-len{position:absolute;right:14px;bottom:14px;padding:3px 8px;border-radius:6px;background:rgba(11,14,23,.82);font-family:var(--mono);font-size:12px;color:var(--text)}

@media (max-width:980px){
  .docs{grid-template-columns:1fr;gap:24px}
  .docs-toc{position:static;max-height:none;overflow:visible}
  .docs-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .docs-toc .docs-toc-extra{display:none}
}

/* ═══════════════════════════ ТАРИФЫ ═══════════════════════════ */
.pricing-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
#promoBanner:empty,#trialBanner:empty,#enterpriseNote:empty{display:none}
.promo-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:28px;padding:14px 18px;border-radius:var(--r-lg);background:var(--indigo);color:#fff}
.promo-pct{font-size:var(--t-xl);font-weight:800;font-variation-settings:"SHRP" 100}
.promo-text{font-weight:600}
.promo-only,.promo-seats{font-size:var(--t-sm);color:rgba(255,255,255,.8)}
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--ink-2)}
.price-loading{grid-column:1/-1;padding:64px 24px;text-align:center;color:var(--text-3)}
/* Верхние 60px карточки — место под бейдж. Оно зарезервировано у всех
   карточек, иначе карточка с бейджем съезжала бы вниз, и строки цен и
   списков переставали стоять вровень по всей сетке. */
.price-card{position:relative;display:flex;flex-direction:column;padding:60px 24px 24px;border-left:1px solid var(--line);min-width:0}
.price-card:first-child{border-left:0}
.price-card.featured{background:var(--indigo);color:#fff;border-left-color:transparent}
.price-card.featured+.price-card{border-left-color:transparent}
.price-card.current{background:var(--panel)}
.price-name{font-size:var(--t-lg);font-weight:700;font-variation-settings:"SHRP" 100}
.price-amount{margin-top:14px;font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;font-variation-settings:"SHRP" 100}
.price-amount span{font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--text-3);margin-left:4px}
.price-card.featured .price-amount span{color:rgba(255,255,255,.75)}
.price-was{font-size:17px;color:var(--text-3);font-weight:500;letter-spacing:0}
.price-card.featured .price-was{color:rgba(255,255,255,.6)}
.price-annual{margin-top:8px;font-size:var(--t-xs);color:var(--pass);font-weight:600;min-height:20px}
.price-card.featured .price-annual{color:#D9F8E8}
.price-annual.is-empty{visibility:hidden}
.price-sub{margin-top:10px;color:var(--text-2);font-size:var(--t-sm);min-height:3.2em}
.price-card.featured .price-sub{color:rgba(255,255,255,.85)}
.price-features{list-style:none;margin:20px 0 24px;display:grid;align-content:start;gap:9px;font-size:var(--t-sm);flex:1}
.price-features li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.price-features li::before{
  content:"";width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:var(--pass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230B0E17' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.price-card.featured .price-features li::before{background-color:#fff}
.price-features li.no{color:var(--text-3)}
.price-features li.no::before{background:transparent;border:1px solid var(--line-2)}
.price-card.featured .price-features li.no{color:rgba(255,255,255,.6)}
.price-card.featured .price-features li.no::before{border-color:rgba(255,255,255,.35)}
.price-card.featured .btn-primary{background:#fff;color:var(--indigo-ink)}
.price-card.featured .btn-primary:hover{background:var(--bone)}
.price-card.featured .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.price-card .btn+p{color:var(--text-3)}
.price-badge-trial,.price-badge-current{
  position:absolute;top:18px;left:20px;right:auto;max-width:calc(100% - 40px);
  padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.35;
  background:rgba(61,214,140,.14);color:var(--pass);
}
.price-card.featured .price-badge-trial{background:rgba(255,255,255,.18);color:#fff}
.price-more{margin-top:20px;color:var(--text-2)}
.price-more a{margin-left:6px;font-weight:600}
.pricing-matrix{margin-top:96px}
.pm-scroll{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:var(--r-lg)}
.plan-matrix{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px}
.plan-matrix th,.plan-matrix td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.plan-matrix thead th{font-weight:600;color:var(--text);background:var(--ink-2);position:sticky;top:0}
.plan-matrix tbody th{text-align:left;font-weight:500;color:var(--text-2)}
@media (max-width:760px){
  .plan-matrix th:first-child{position:sticky;left:0;z-index:1;background:var(--ink-2);box-shadow:1px 0 0 var(--line)}
  .plan-matrix tbody th{background:var(--ink)}
  .pm-scroll{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
.plan-matrix tr:last-child>*{border-bottom:0}
.plan-matrix .pm-featured{background:var(--indigo-soft)}
.plan-matrix thead .pm-featured{background:#20224F;color:#fff}
.pm-yes{color:var(--pass);font-weight:700}
.pm-no{color:var(--text-3)}
.pricing-notes{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.pricing-notes h3{font-size:var(--t-md);font-variation-settings:"SHRP" 0;font-weight:600}
.pricing-notes p{margin-top:8px;color:var(--text-2);font-size:var(--t-sm)}

/* окно покупки */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,7,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-card{width:min(440px,100%);border-radius:var(--r-xl);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-2);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:var(--t-lg)}
.modal-close{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text-3);font-size:22px;line-height:1}
.modal-close:hover{background:var(--panel-2);color:var(--text)}
.modal-body{padding:20px}
.purchase-plan-name{font-size:var(--t-xl);font-weight:700;font-variation-settings:"SHRP" 100}
.purchase-rows{margin:16px 0;display:grid}
.purchase-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--text-2)}
.purchase-row span:last-child{color:var(--text);font-variant-numeric:tabular-nums}
.purchase-row.total{font-weight:700;color:var(--text);font-size:var(--t-md)}
.purchase-select{height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--ink)}
.purchase-error{color:#FF8A94;font-size:var(--t-sm);min-height:0;margin-bottom:10px}
.purchase-error:empty{display:none}
.purchase-note{margin-top:12px;font-size:var(--t-xs);color:var(--text-3)}

@media (max-width:1060px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-card:nth-child(3){border-left:0}
  .price-card:nth-child(n+3){border-top:1px solid var(--line)}
  .pricing-notes{grid-template-columns:1fr}
}
@media (max-width:620px){
  .price-grid{grid-template-columns:1fr}
  .price-card{border-left:0;border-top:1px solid var(--line);padding-top:28px}
  /* в одну колонку выравнивать нечего: бейдж встаёт в поток над названием */
  .price-badge-trial,.price-badge-current{position:static;display:inline-block;margin-bottom:12px;align-self:flex-start}
  .price-card:first-child{border-top:0}
}

/* ═══════════════════════════ СКАЧАТЬ ═══════════════════════════ */
.dl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:start;padding-bottom:96px}
.dl-card{border-radius:var(--r-xl);background:var(--bone);color:var(--bone-ink);padding:32px;box-shadow:var(--shadow-2)}
.dl-card .dl-top{display:flex;align-items:center;gap:16px}
.dl-card .dl-top img{width:56px;height:56px}
.dl-card h2{font-size:var(--t-xl)}
.dl-card .dl-ver{font-family:var(--mono);font-size:var(--t-xs);color:var(--bone-mute);margin-top:4px}
.dl-card .btn{margin-top:24px}
.dl-card .btn-primary{background:var(--indigo)}
.dl-meta{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:var(--t-sm)}
.dl-meta dt{color:var(--bone-mute)}
.dl-meta dd{margin:0;font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.dl-error{margin-top:16px;padding:12px 14px;border-radius:10px;background:rgba(240,90,103,.1);color:#B4232F;font-size:var(--t-sm)}
.dl-error a{color:inherit;text-decoration:underline}
.dl-sha{margin-top:20px;padding-top:18px;border-top:1px dashed rgba(21,26,43,.22)}
.dl-sha-head{font-size:12px;color:var(--bone-mute);margin-bottom:6px}
.dl-sha code{display:block;padding:10px 12px;border-radius:9px;background:#DCE0EB;font-size:12px;line-height:1.5;overflow-wrap:anywhere;cursor:pointer}
.dl-sha code:hover{background:#D2D7E6}
.dl-sha p{margin-top:8px;font-size:12px;color:var(--bone-mute)}
.dl-steps{list-style:none;display:grid;gap:0;counter-reset:st;border-top:1px solid var(--line)}
.dl-steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.dl-steps li::before{counter-increment:st;content:counter(st);font-family:var(--mono);color:var(--peri);font-size:var(--t-sm);padding-top:2px}
.dl-steps b{display:block;font-weight:600}
.dl-steps span{color:var(--text-2);font-size:var(--t-sm)}
.dl-req{margin-top:40px}
.dl-req h3{font-size:var(--t-md);font-variation-settings:"SHRP" 0;font-weight:600}
.dl-req ul{list-style:none;margin-top:12px;display:grid;gap:8px;color:var(--text-2);font-size:var(--t-sm)}
@media (max-width:900px){ .dl{grid-template-columns:1fr;gap:40px} }

/* ═══════════════════════════ ТЕКСТОВЫЕ СТРАНИЦЫ ═══════════════════════════
   Правовые страницы и статьи базы знаний хранятся HTML-ом в словарях
   (pages.*) со своими классами. Здесь они получают вид длинного текста:
   одна колонка, мера строки 70 знаков, ясная лестница заголовков. */
.prose-page{padding:72px 0 96px}
.prose-page .section,.prose-page section{padding:0}
.prose-page .container{max-width:calc(820px + var(--gut)*2)}
.prose-page .tag,.prose-page .kb-tag,.prose-page .legal-tag{display:none}
.prose-page h1,.prose-page .page-title{font-size:var(--t-4xl);letter-spacing:-.03em;line-height:1.05;margin:0 0 16px}
.prose-page .page-desc,.prose-page .legal-meta,.prose-page .kb-meta{color:var(--text-3);font-size:var(--t-sm);margin-bottom:32px}
.prose-page h2{font-size:var(--t-xl);margin:48px 0 12px;letter-spacing:-.01em}
.prose-page h3{font-size:var(--t-lg);margin:32px 0 10px}
.prose-page h4{font-size:var(--t-md);margin:24px 0 8px;font-variation-settings:"SHRP" 0}
.prose-page p,.prose-page li{color:var(--text-2);font-size:var(--t-md);line-height:1.7;max-width:70ch}
.prose-page p{margin:0 0 14px}
.prose-page ul,.prose-page ol{margin:0 0 16px 1.2em;display:grid;gap:6px}
.prose-page li::marker{color:var(--text-3)}
.prose-page strong{color:var(--text);font-weight:600}
.prose-page a{text-decoration:underline;text-decoration-color:rgba(174,180,255,.4)}
.prose-page a:hover{text-decoration-color:currentColor}
.prose-page table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:var(--t-sm)}
.prose-page th,.prose-page td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose-page th{color:var(--text);font-weight:600}
.prose-page td{color:var(--text-2)}
.prose-page blockquote{margin:20px 0;padding:14px 18px;border-radius:var(--r-md);background:var(--panel);color:var(--text-2)}
.prose-page img{border-radius:var(--r-lg);margin:16px 0}
.prose-page nav,.prose-page .legal-toc,.prose-page .toc{margin:0 0 32px;padding:18px 20px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.prose-page nav a,.prose-page .legal-toc a,.prose-page .toc a{display:block;padding:3px 0;text-decoration:none;color:var(--text-2)}
.prose-page nav a:hover{color:var(--text)}
.prose-page .kb-grid,.prose-page .kb-cards{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);margin-top:24px}
.prose-page .kb-card{display:block;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;background:none;border-radius:0}
.prose-page .kb-card h3,.prose-page .kb-card h2{margin:0 0 6px;color:var(--text)}
.prose-page .kb-card p{margin:0;color:var(--text-2)}
.prose-page .kb-card:hover h3,.prose-page .kb-card:hover h2{color:var(--peri)}
.prose-page .cta-section,.prose-page .kb-cta{margin-top:48px;padding:28px;border-radius:var(--r-xl);background:var(--indigo);color:#fff}
.prose-page .cta-section p,.prose-page .kb-cta p{color:rgba(255,255,255,.85)}
.prose-page .btn{text-decoration:none}

/* база знаний: хаб статей — список, а не сетка одинаковых карточек */
.prose-hub .container{max-width:calc(var(--wrap) + var(--gut)*2)}
.prose-hub .section-head{margin:56px 0 0}
.prose-hub .section-head h2{margin:0 0 8px}
.prose-hub .section-head p{color:var(--text-2)}
.prose-page .use-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;margin-top:20px;border-top:1px solid var(--line)}
.prose-page .use-case{display:block;padding:22px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;background:none;border-radius:0}
.prose-page .use-case:hover{text-decoration:none}
.prose-page .use-case-icon{display:none}
.prose-page .use-case h3{margin:0 0 6px;font-size:var(--t-lg);color:var(--text);transition:color .15s var(--ease-out)}
.prose-page .use-case:hover h3{color:var(--peri)}
.prose-page .use-case p{margin:0;font-size:var(--t-sm)}
.prose-page .use-case p[style]{display:none}
.prose-page .page-title em,.prose-page h1 em{font-style:normal;color:inherit}
.prose-page .kb-breadcrumb{font-size:var(--t-sm);color:var(--text-3);margin-bottom:20px}
.prose-page .kb-breadcrumb a{text-decoration:none;color:var(--text-2)}
.prose-page .kb-updated{color:var(--text-3);font-size:var(--t-sm)}
.prose-page .kb-toc{margin:28px 0 8px;padding:18px 20px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.prose-page .kb-toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.prose-page .kb-toc b{grid-column:1/-1;margin-bottom:6px;color:var(--text)}
.prose-page .kb-toc a{text-decoration:none;color:var(--text-2);font-size:var(--t-sm);padding:3px 0}
.prose-page .kb-toc a:hover{color:var(--peri)}
@media (max-width:640px){ .prose-page .kb-toc{grid-template-columns:1fr} }
.prose-page .kb-related{margin-top:48px}
.prose-page .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.prose-page .cta-section h2,.prose-page .kb-cta h2,.prose-page .kb-cta h3{margin-top:0;color:#fff}
.prose-page .cta-section .btn-primary,.prose-page .kb-cta .btn-primary{background:#fff;color:var(--indigo-ink)}
.prose-page .cta-section .btn-ghost,.prose-page .kb-cta .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
@media (max-width:760px){ .prose-page .use-cases{grid-template-columns:1fr} }

/* реквизиты оператора */
.legal-card{display:grid;grid-template-columns:180px 1fr;margin:0;border-top:1px solid var(--line)}
.legal-card dt,.legal-card dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.legal-card dt{color:var(--text-3);font-size:var(--t-sm)}
.legal-card dd{color:var(--text)}
@media (max-width:560px){ .legal-card{grid-template-columns:1fr} .legal-card dt{border-bottom:0;padding-bottom:2px} }

/* страница контактов */
.contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:8px}
.contact{padding:28px 28px 28px 0;border-bottom:1px solid var(--line)}
.contact+.contact{padding-left:28px;border-left:1px solid var(--line)}
.contact h2{font-size:var(--t-lg);font-variation-settings:"SHRP" 100}
.contact p{margin-top:8px;color:var(--text-2);font-size:var(--t-sm);max-width:36ch}
.contact a.btn{margin-top:18px}
@media (max-width:860px){ .contacts{grid-template-columns:1fr} .contact,.contact+.contact{padding:24px 0;border-left:0} }

/* 404 */
.nf{padding:120px 0;min-height:60vh}
.nf h1{font-size:var(--t-4xl)}
.nf p{margin-top:14px;color:var(--text-2)}
.nf .btn{margin-top:28px}

/* загрузка страницы */
.page-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60vh;color:var(--text-3)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--peri);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Длинные русские слова («конфиденциальности») на телефоне шире экрана при
   крупном кегле. Переносы только на узких экранах: на десктопе они резали бы
   заголовки там, где места хватает. */
@media (max-width:560px){
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .page-head h1,.prose-page h1,.prose-page .page-title{font-size:34px}
}

/* движение: всё, что двигается само, выключается по просьбе системы */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* База знаний: блок «что дальше» из словаря. Разметка в тексте статьи, классы
   прежние, поэтому стиль здесь, а не в шаблоне. */
.prose-page .next-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:20px}
.prose-page .next-step{display:block;padding:20px 20px 20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.prose-page .next-step+.next-step{padding-left:20px;border-left:1px solid var(--line)}
.prose-page .next-step i{display:block;font-style:normal;font-size:12px;color:var(--text-3);margin-bottom:6px}
.prose-page .next-step b{display:block;color:var(--text);font-weight:600;margin-bottom:6px}
.prose-page .next-step span{display:block;color:var(--text-2);font-size:var(--t-sm)}
.prose-page .next-step:hover b{color:var(--peri)}
.prose-page .sec-head h2{margin-top:56px}
.prose-page .cta-section,.prose-page .kb-cta{text-align:left}
.prose-page .cta-section .hero-actions,.prose-page .kb-cta .hero-actions{justify-content:flex-start}
@media (max-width:860px){ .prose-page .next-steps{grid-template-columns:1fr 1fr} .prose-page .next-step:nth-child(3){padding-left:0;border-left:0} }
@media (max-width:520px){ .prose-page .next-steps{grid-template-columns:1fr} .prose-page .next-step,.prose-page .next-step+.next-step{padding-left:0;border-left:0} }