/* ============================================================
   WEBIT DESIGN SYSTEM — ВЕБ-СЛОЙ (сайты / лендинги, десктоп + мобайл)
   Собран из инвентарей 02 (WebitAiLanding) и 03 (LegalScanner).
   Все цвета/радиусы/тени — ТОЛЬКО из tokens/webit-tokens.css
   (плюс литералы, задокументированные в инвентарях).
   Подключение: <link rel="stylesheet" href="webit-web.css">
   Логотип: символ #logo-webit (viewBox 0 0 92.105 23), currentColor.
   ============================================================ */

@import url("webit-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ============================================================
   0. ВЕБ-ПЕРЕМЕННЫЕ И АДАПТИВ
   Фирменный приём лендинга: адаптив реализован переопределением
   CSS-переменных в @media, компоненты ссылаются на var(...).
   Брейкпоинты: 1439 / 1279 / 1023 / 767 / 479.
   ============================================================ */

:root{
  /* база текста (переопределяется на смартфоне) */
  --fs-body:18px;

  /* сеточные утилиты (схлопываются в @media) */
  --gap-grid:18px;
  --g-2:repeat(2,1fr);
  --g-3:repeat(3,1fr);
  --g-4:repeat(4,1fr);
  --g-footer:1.6fr 1fr 1fr;
  --flag-cols:1.05fr 0.95fr;       /* превью + список / CTA-баннер */

  /* display-переключатели шапки / CTA */
  --nav-disp:flex;                 /* меню в шапке */
  --num-disp:inline-flex;          /* номер телефона текстом */
  --num-icon-disp:none;            /* иконка-трубка вместо номера */
  --cta-disp:inline-flex;          /* CTA-кнопка в шапке */
  --burger-disp:none;              /* бургер */
  --sticky-disp:none;              /* sticky-CTA на смартфоне */
  --hdr-sub:inline-block;          /* подпись у логотипа */
  --hdr-gap:30px;
  --hdr-nav-gap:22px;
  --hdr-act-gap:14px;
}

/* ноутбук */
@media (max-width:1439px){
  :root{
    --maxw:1140px;
    --g-4:repeat(3,1fr);
    --hdr-sub:none;
  }
}

/* малый ноутбук */
@media (max-width:1279px){
  :root{
    --num-disp:none;
    --num-icon-disp:inline-flex;
    --hdr-gap:22px;
  }
}

/* планшет */
@media (max-width:1023px){
  :root{
    --pad:32px;
    --g-3:repeat(2,1fr);
    --g-4:repeat(2,1fr);
    --g-footer:1fr 1fr;
    --flag-cols:1fr;
    --nav-disp:none;
    --burger-disp:inline-flex;
  }
}

/* смартфон */
@media (max-width:767px){
  :root{
    --pad:18px;
    --header-h:60px;
    --fs-body:16.5px;
    --g-2:1fr;
    --g-3:1fr;
    --g-4:1fr;
    --g-footer:1fr;
    --cta-disp:none;
    --sticky-disp:block;
  }
}

/* ============================================================
   1. БАЗА: reset, типографика документа, контейнер, доступность
   ============================================================ */

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 14px);
  scrollbar-gutter:stable;
  overflow-x:clip; /* clip, а не hidden: не создаёт scroll-контейнер и не ломает sticky-шапку */
}

body{
  margin:0;
  overflow-x:clip;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{margin:0; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
button{font:inherit;}

::placeholder{color:var(--ink-40);}

/* видимый фокус — норма системы */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--accent-ink);
  outline-offset:2px;
}

/* контейнер */
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* моно-утилита */
.mono{font-family:var(--font-mono);}

/* скрыто визуально, доступно скринридеру */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* skip-link: первая ссылка страницы, видна только по фокусу */
.skip-link{
  position:absolute; left:-9999px; top:16px; z-index:100;
  display:inline-flex; align-items:center;
  padding:12px 20px; border-radius:var(--radius-s);
  background:var(--dark); color:#fff;
  font-weight:700; font-size:15px; text-decoration:none;
}
.skip-link:focus-visible{left:16px;}

/* появление при скролле: гард html.js — без JS контент не прячется */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s ease, transform .65s ease;
}
html.js [data-reveal].in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  html.js [data-reveal]{opacity:1; transform:none; transition:none;}
}

/* ============================================================
   2. СЕТОЧНЫЕ УТИЛИТЫ
   .grid.g-2 / .g-3 / .g-4 схлопываются через переменные из §0
   ============================================================ */

.grid{display:grid; gap:var(--gap-grid);}
.g-2{grid-template-columns:var(--g-2);}
.g-3{grid-template-columns:var(--g-3);}
.g-4{grid-template-columns:var(--g-4);}
.grid--flag{grid-template-columns:var(--flag-cols); gap:clamp(30px,4vw,56px); align-items:start;}

/* ============================================================
   3. ТИПОГРАФИКА
   Шкала лендинга (clamp), веса: 800 заголовки, 700 подзаголовки,
   500–600 mono. Трекинг −0.018…−0.02em у заголовков.
   ============================================================ */

.h1{
  font-size:clamp(36px,5vw,68px);
  font-weight:800; line-height:1.05; letter-spacing:-0.02em;
  text-wrap:balance;
}
.h2{
  font-size:clamp(30px,3.9vw,52px);
  font-weight:800; line-height:1.07; letter-spacing:-0.018em;
  text-wrap:balance;
}
.h3{
  font-size:23px;
  font-weight:700; line-height:1.18;
}
.lead{
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.5; color:var(--ink-70); max-width:60ch;
}
.sub{
  font-size:18px; line-height:1.5; color:var(--ink-70); max-width:62ch;
}

/* акцентная фраза внутри заголовка */
.h1 .accent, .h2 .accent{color:var(--accent);}
/* акцентная строка с переносом (приём LegalScanner) */
.accent-line{display:block; color:var(--accent); text-wrap:balance;}

/* кикер-пилл: конвенция контента — [ текст в квадратных скобках ] */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:13.5px; font-weight:500;
  color:var(--ink-70);
  white-space:nowrap;
}
.pill.on-dark{
  border-color:var(--white-28);
  color:var(--white-80);
}
/* залитый вариант на тёмном (статусная пилюля) */
.pill--filled{
  background:rgba(255,255,255,.08); /* литерал из инвентаря 03 (.pill--on-dark) */
  border:1px solid var(--white-16);
  color:var(--white-80);
}

/* mono-микролейбл (uppercase-подпись) */
.mlabel{
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-60);
}
.mlabel--accent{color:var(--accent-ink);}
.mlabel--faint{color:var(--ink-40);}

/* mono-заметка-строка («обычно 20–60 секунд») */
.mnote{
  font-family:var(--font-mono);
  font-size:14px; line-height:1.7;
  color:var(--ink-60);
}
.mnote--accent{color:var(--accent-ink); font-weight:600;}

/* ============================================================
   4. СЕКЦИИ И ЗАГОЛОВОЧНЫЙ ПАТТЕРН
   Ритм страницы: white → --bg-soft → --dark → --bg-cream
   ============================================================ */

.section{padding-block:clamp(56px,8vw,116px);}
.section--tight{padding-block:clamp(48px,6vw,92px);}

.section--soft{background:var(--bg-soft);}
.section--cream{background:var(--bg-cream);}
.section--dark{background:var(--dark); color:#fff;}

/* автоматическая адаптация базовых элементов на тёмном */
.section--dark .sub,
.section--dark .lead{color:var(--white-80);}
.section--dark .pill{border-color:var(--white-28); color:var(--white-80);}
.section--dark .mlabel{color:var(--white-60);}
.section--dark .mnote{color:var(--white-60);}
.section--dark .mnote--accent,
.section--dark .mlabel--accent{color:var(--accent-on-dark);}

/* заголовок секции: кикер-пилл + H2 + сабтайтл */
.section-head{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:16px;
  margin-bottom:clamp(34px,4vw,56px);
  max-width:760px;
}
.section-head--center{
  align-items:center; text-align:center;
  margin-inline:auto;
}
.section-head--wide{max-width:840px;}

/* ============================================================
   5. КНОПКИ
   Шкала: s 46px / m 52px / l 58px; радиусы 12 (s) и 14 (m, l).
   Hover — всегда --accent-hover; primary — цветная тень.
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 28px;
  border:none; border-radius:var(--radius-s);
  font-family:var(--font-sans);
  font-size:17px; font-weight:700; line-height:1.2;
  color:var(--ink); background:transparent;
  text-decoration:none; cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease, color .18s ease,
             box-shadow .18s ease, transform .12s ease, opacity .18s ease;
}
.btn:active{transform:scale(.98);}
.btn .arr{font-weight:700;}

/* размеры */
.btn--s{min-height:46px; padding:11px 20px; font-size:15px; border-radius:12px;} /* 12px — из инвентаря 02 (hdr-cta) */
.btn--l{min-height:58px; padding:16px 32px; font-size:17.5px;}
.btn--block{width:100%;}

/* primary: акцент + фирменная цветная тень */
.btn--primary{
  color:#fff; background:var(--accent);
  box-shadow:var(--shadow-accent-s);
}
.btn--primary.btn--l{box-shadow:var(--shadow-accent);}
.btn--primary:hover{background:var(--accent-hover);}

/* secondary: контурная с инверсией на hover */
.btn--secondary{
  box-shadow:inset 0 0 0 2px var(--ink);
}
.btn--secondary:hover{background:var(--ink); color:#fff;}
/* на тёмном фоне — белый контур, инверсия в белую заливку */
.section--dark .btn--secondary,
.hero .btn--secondary,
.btn--secondary.on-dark{
  color:#fff;
  box-shadow:inset 0 0 0 1.5px var(--white-28);
}
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover,
.btn--secondary.on-dark:hover{background:#fff; color:var(--ink); box-shadow:none;}

/* ghost: без рамки, лёгкая подложка на hover */
.btn--ghost{color:var(--ink);}
.btn--ghost:hover{background:var(--bg-soft);}
.section--dark .btn--ghost,
.btn--ghost.on-dark{color:#fff;}
.section--dark .btn--ghost:hover,
.btn--ghost.on-dark:hover{background:var(--white-12);}

/* on-accent: чёрная кнопка на оранжевом баннере */
.btn--on-accent{background:var(--dark); color:#fff;}
.btn--on-accent:hover{background:#fff; color:var(--ink);}
/* контурная на акцентном фоне (телефон в баннере) */
.btn--on-accent-line{
  color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); /* литерал из инвентаря 03 (btn-bridge-phone) */
}
.btn--on-accent-line:hover{background:#fff; color:var(--accent-ink); box-shadow:none;}

/* состояния */
.btn[disabled],
.btn.is-disabled{
  opacity:.5; cursor:not-allowed; pointer-events:none;
  box-shadow:none;
}
.btn.is-loading{pointer-events:none; opacity:.88; cursor:progress;}
.btn .spinner{display:none;}
.btn.is-loading .spinner{display:inline-block;}
.btn.is-loading .arr{display:none;}

/* группа кнопок */
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}

/* ссылка-стрелка (standalone) */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color:var(--ink); text-decoration:none;
  transition:color .18s ease;
}
.link-arrow:hover{color:var(--accent-ink);}
.link-arrow .arr{color:var(--accent-ink); transition:transform .18s ease;}
.link-arrow:hover .arr{transform:translateX(4px);}

/* ============================================================
   6. ШАПКА (sticky + blur + скролл-тень)
   JS вешает .is-scrolled при scrollY > 8
   ============================================================ */

.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); /* литерал из инвентаря 02 */
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hdr.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-header);
}
.hdr-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hdr-gap);
  height:var(--header-h);
}
.hdr-logo{
  display:inline-flex; align-items:center; gap:13px;
  text-decoration:none; color:var(--ink); flex:0 0 auto;
}
.hdr-logo .logo{width:100px; height:auto; display:block;}
.hdr-sub{
  display:var(--hdr-sub);
  font-family:var(--font-mono);
  font-size:12px; font-weight:500; letter-spacing:.02em;
  color:var(--ink-60);
  border-left:1px solid var(--line);
  padding-left:13px; line-height:1.25;
}
.hdr-nav{
  display:var(--nav-disp);
  flex:1 1 auto; min-width:0;
  align-items:center; justify-content:center;
  gap:var(--hdr-nav-gap);
}
.hdr-nav-link{
  position:relative;
  font-size:15px; font-weight:600;
  text-decoration:none; color:var(--ink); white-space:nowrap;
  padding:6px 1px;
  transition:color .18s ease;
}
.hdr-nav-link::after{
  content:""; position:absolute; left:1px; right:1px; bottom:1px; height:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s ease;
}
.hdr-nav-link:hover{color:var(--accent-ink);}
.hdr-nav-link:hover::after{transform:scaleX(1);}
.hdr-actions{
  display:inline-flex; align-items:center;
  gap:var(--hdr-act-gap); flex:0 0 auto;
}
.hdr-phone{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--ink);
  font-size:16px; font-weight:700; white-space:nowrap;
  transition:color .18s ease;
}
.hdr-phone:hover{color:var(--accent-ink);}
.hdr-phone-num{display:var(--num-disp);}
.hdr-phone-icon{
  display:var(--num-icon-disp); align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:box-shadow .18s ease;
}
.hdr-phone:hover .hdr-phone-icon{box-shadow:inset 0 0 0 1.5px var(--accent-ink);}
.hdr-phone-icon svg{width:20px; height:20px; display:block;}
.hdr-cta{display:var(--cta-disp);}

/* ============================================================
   7. БУРГЕР (морф в крест по .is-open)
   ============================================================ */

.burger{
  display:var(--burger-disp); align-items:center; justify-content:center;
  width:46px; height:46px; padding:0; margin:0;
  border:none; border-radius:12px;
  background:transparent; color:var(--ink); cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background-color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.burger:hover{box-shadow:inset 0 0 0 1.5px var(--ink);}
.burger-box{position:relative; width:22px; height:16px; display:block;}
.burger-bar{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.burger-bar:nth-child(1){top:0;}
.burger-bar:nth-child(2){top:7px;}
.burger-bar:nth-child(3){top:14px;}
.burger.is-open .burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open .burger-bar:nth-child(2){opacity:0;}
.burger.is-open .burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   8. МОБИЛЬНОЕ МЕНЮ (drawer справа, тёмная панель + скрим)
   ============================================================ */

.mnav{position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none;}
.mnav.is-open{visibility:visible; pointer-events:auto;}
.mnav-scrim{
  position:absolute; inset:0;
  background:rgba(8,8,8,.55); /* литерал из инвентаря 02 */
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s ease;
}
.mnav.is-open .mnav-scrim{opacity:1;}
.mnav-panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(420px,87vw);
  display:flex; flex-direction:column;
  background:var(--dark); color:#fff;
  box-shadow:-24px 0 60px rgba(0,0,0,.5); /* литерал из инвентаря 02 */
  padding:16px clamp(20px,5vw,30px);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  padding-right:calc(clamp(20px,5vw,30px) + env(safe-area-inset-right));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.mnav.is-open .mnav-panel{transform:translateX(0);}
.mnav-head{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h); margin-bottom:6px;
}
.mnav-logo{width:104px; height:auto; color:#fff;}
.mnav-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:none; border-radius:12px;
  background:rgba(255,255,255,.06); /* литерал из инвентаря 02 */
  color:#fff; cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--white-12);
  transition:background-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.mnav-close:hover{background:var(--white-12);}
.mnav-close svg{width:20px; height:20px; display:block;}
.mnav-links{display:flex; flex-direction:column;}
.mnav-link{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:58px; padding:8px 2px;
  font-size:20px; font-weight:600; line-height:1.2;
  color:#fff; text-decoration:none;
  border-bottom:1px solid var(--white-12);
  transition:color .18s ease, padding-left .18s ease;
}
.mnav-link:hover{color:var(--accent); padding-left:8px;}
.mnav-link-arrow{
  color:var(--white-60); font-size:18px;
  transition:transform .18s ease, color .18s ease;
}
.mnav-link:hover .mnav-link-arrow{color:var(--accent); transform:translateX(4px);}
.mnav-foot{margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:14px;}
.mnav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:14px 24px; border-radius:var(--radius-s);
  font-size:17px; font-weight:700;
  color:#fff; background:var(--accent); text-decoration:none;
  box-shadow:var(--shadow-accent-s);
  transition:background-color .18s ease;
}
.mnav-cta:hover{background:var(--accent-hover);}
.mnav-phone{
  display:inline-flex; align-items:center; align-self:flex-start;
  min-height:44px;
  font-size:22px; font-weight:800; letter-spacing:-0.01em;
  color:#fff; text-decoration:none; white-space:nowrap;
}
.mnav-phone:hover{color:var(--accent);}
.mnav-hours{font-family:var(--font-mono); font-size:12.5px; color:var(--white-60);}

@media (min-width:1024px){ .mnav{display:none;} }

/* ============================================================
   9. HERO (тёмный по умолчанию + светлый вариант)
   ============================================================ */

.hero{
  position:relative; overflow:hidden;
  background:var(--dark); color:#fff;
  padding-block:clamp(48px,6vw,92px) clamp(40px,5vw,64px);
}
.hero--light{background:var(--bg); color:var(--ink);}

/* радиальное акцент-свечение (декор, aria-hidden) */
.hero-glow{
  position:absolute; top:-30%; right:-12%; width:60%; height:150%;
  background:radial-gradient(closest-side, rgba(244,80,30,.24), rgba(244,80,30,0) 72%); /* литерал из инвентаря 02 */
  pointer-events:none;
}
.hero .wrap{position:relative;}
.hero-copy{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:26px; max-width:960px;
}
.hero .h1 .accent{color:var(--accent);}
.hero .lead{color:var(--white-80);}
.hero--light .lead{color:var(--ink-70);}
.hero--light .pill{border-color:var(--line); color:var(--ink-70);}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:4px;}

/* нижняя полоса hero (схема, факты) */
.hero-strip{
  margin-top:clamp(40px,6vw,72px);
  padding-top:26px;
  border-top:1px solid var(--white-12);
}
.hero--light .hero-strip{border-top-color:var(--line);}

/* ============================================================
   10. СХЕМА «ПУТЬ ДЕНЕГ» (mono-чипы со стрелками)
   ============================================================ */

.path-label{
  display:block;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white-60);
  margin-bottom:16px;
}
.path{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 8px;
  font-family:var(--font-mono); font-size:13.5px;
}
.path-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  border:1px solid var(--white-28);
  border-radius:10px; /* радиус чипов из инвентаря 02 */
  color:var(--white-80);
}
.path-chip--loss{
  border:1.5px solid var(--accent);
  color:var(--accent-on-dark);
}
.path-chip--loss .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
}
.path-chip--final{
  border:none;
  background:var(--accent); color:#fff; font-weight:600;
}
.path-arrow{color:var(--white-60);}
.path-arrow--accent{color:var(--accent);}

/* светлый контекст схемы */
.section--soft .path-chip, .hero--light .path-chip{border-color:var(--line); color:var(--ink-70);}
.section--soft .path-chip--loss, .hero--light .path-chip--loss{border-color:var(--accent); color:var(--accent-ink);}
.section--soft .path-chip--final, .hero--light .path-chip--final{color:#fff;}
.section--soft .path-arrow, .hero--light .path-arrow{color:var(--ink-40);}
.section--soft .path-label, .hero--light .path-label{color:var(--ink-60);}

/* ============================================================
   11. ПОЛОСА ДОВЕРИЯ, ЛОГОБАР, ЧИПЫ
   ============================================================ */

/* узкая полоса под hero: mono-факты через акцентные точки */
.trustbar{
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.trustbar-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:20px var(--pad);
  display:flex; flex-direction:column; gap:14px;
}
.trustbar-facts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 24px;
  font-family:var(--font-mono); font-size:13.5px; color:var(--ink-70);
}
.trustbar-facts .dot{color:var(--accent);} /* символ · между фактами */
.trustbar-chips{display:flex; flex-wrap:wrap; gap:12px;}

/* текстовый логобар клиентов */
.logobar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:22px 48px;
}
.logobar span{
  font-weight:800; font-size:19px; letter-spacing:.08em;
  color:var(--ink-40); text-transform:uppercase; white-space:nowrap;
}

/* чипы и пиллы */
.chip{
  display:inline-flex; align-items:center;
  padding:6px 14px;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius-pill);
  font-size:13.5px; color:var(--ink-60);
}
.chip--big{ /* пилл отрасли */
  padding:13px 22px;
  background:var(--bg-soft); border:none;
  font-size:16.5px; font-weight:600; color:var(--ink);
}
.chip--line{ /* контурный пилл-факт */
  padding:12px 20px;
  background:transparent; border:1px solid var(--line);
  font-size:15.5px; color:var(--ink-70);
}
.chip--mono{ /* белый mono-пилл на крем-фоне */
  padding:10px 18px;
  background:var(--bg); border:none;
  font-family:var(--font-mono); font-size:14px; color:var(--ink-70);
}
.chip-row{display:flex; flex-wrap:wrap; gap:12px;}

/* наградной пилл */
.award{
  display:inline-flex; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:12px 22px; font-size:16px;
}
.award b{color:var(--accent-ink);}

/* ============================================================
   12. КАРТОЧКИ
   База: белая с рамкой, hover — рамка --ink + подъём (-3px).
   Радиус карточек: var(--radius-card) = 22px (веб-канон).
   ============================================================ */

.card{
  display:flex; flex-direction:column; gap:14px;
  padding:30px 26px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .card.is-hoverable:hover{border-color:var(--ink); transform:translateY(-3px);}
}

/* шапка карточки: номер + лейбл */
.card-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.card-num{font-family:var(--font-mono); font-size:13px; color:var(--ink-60);}

/* --- тёмная карточка («ядро» зон потерь) --- */
.card--dark{
  background:var(--dark); color:#fff; border-color:var(--dark);
}
.card--dark .card-num{color:var(--white-60);}
.card--dark .h3{color:var(--accent-on-dark);}
.card--dark p{color:var(--white-80);}
.card--dark .mlabel{color:var(--accent-on-dark);}

/* --- кремовая карточка с тёплой inset-полосой (канонный .findings) --- */
.card--loss{
  padding-left:30px;
  background:var(--bg-cream);
  border:1px solid var(--accent-line);
  box-shadow:inset 5px 0 0 var(--accent-warm);
}
.card--loss .card-num,
.card--loss .mlabel{color:var(--accent-warm);}
.card--loss .h3{color:var(--accent-warm);}
.card--loss p{color:var(--ink-70);}

/* --- карточка кейса: зум-превью + строки «боль/решаем/у вас» --- */
.card--case{padding:0; gap:0; overflow:hidden;}
.case-media{
  position:relative; display:block; width:100%;
  margin:0; padding:0; border:none;
  border-bottom:1px solid var(--line);
  background:var(--bg-cream);
  cursor:zoom-in;
}
.case-media .ratio{display:block; width:100%; padding-bottom:62.5%;}
.case-media .img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-size:cover; background-position:center;
}
.case-media .zoom-badge{
  position:absolute; right:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--radius-pill);
  background:var(--ink-70); color:#fff;
  font-family:var(--font-mono); font-size:11.5px;
}
.case-body{display:flex; flex-direction:column; gap:11px; padding:24px 22px; flex:1;}
.case-body .h3{font-size:20px; line-height:1.22;}
.case-row{display:flex; gap:12px;}
.case-lbl{
  flex:0 0 50px;
  font-family:var(--font-mono); font-size:11px;
  color:var(--ink-40); text-transform:uppercase;
  padding-top:3px;
}
.case-lbl--accent{color:var(--accent-ink);}
.case-row p{margin:0; font-size:15px; line-height:1.5; color:var(--ink-70);}
.case-row--solve p{color:var(--ink);}
.case-row--result{
  margin-top:auto; padding-top:13px;
  border-top:1px solid var(--line-2);
}
.case-row--result p{font-size:14.5px; font-weight:600; color:var(--ink);}

/* --- карточка шага «как работаем» (номер-пилл + стрелка) --- */
.card--step{gap:16px; padding:32px 28px; border-color:transparent;}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:58px; height:38px; padding:0 14px;
  border:2px solid var(--ink); border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:15px; font-weight:700;
}
.step-arrow{font-size:24px; font-weight:700; color:var(--accent); line-height:1;}
.card--step:last-child .step-arrow{visibility:hidden;}
.card--step p{color:var(--ink-70); font-size:16.5px;}

/* --- авто-карточка «что автоматизируем» (медиа-зона / призрачный номер) --- */
.card--auto{padding:0; gap:0; overflow:hidden; border-radius:var(--radius-s);}
.auto-media{
  position:relative; width:100%; padding-bottom:56.28%;
  background:var(--bg-cream);
  border-bottom:1px solid var(--line);
  background-size:cover; background-position:center;
}
.auto-media--ghost{padding-bottom:40%;}
.auto-media--ghost .ghost-num{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:clamp(34px,4vw,52px); font-weight:600;
  color:rgba(12,12,12,.1); /* «призрачный» номер, литерал из инвентаря 02 */
}
.auto-body{display:flex; flex-direction:column; gap:12px; padding:24px 22px; flex:1;}
.auto-kicker{font-family:var(--font-mono); font-size:12px; color:var(--accent-ink);}
.auto-body .h3{font-size:18.5px; line-height:1.26;}
.auto-body>p{font-size:15px; line-height:1.5; color:var(--ink-70); flex:1;}
.auto-result{
  margin:0; padding-top:14px;
  border-top:1px solid var(--line-2);
  font-size:14.5px; font-weight:600; line-height:1.4; color:var(--ink);
}
.auto-result .mlabel{display:block; margin-bottom:5px; font-size:11px; color:var(--ink-40);}
.auto-result .arr{color:var(--accent-ink); font-weight:700;}

/* --- карточка регалии (лавровый венок + место) --- */
.card--regalia{
  align-items:center; gap:12px;
  padding:26px 18px;
  background:var(--bg-soft); border-color:transparent;
  text-align:center;
  border-radius:var(--radius-m);
}
.laurel{position:relative; width:92px; height:82px; display:grid; place-content:center;}
.laurel svg{position:absolute; top:0; left:0; width:100%; height:100%; color:var(--accent);}
.laurel b{
  position:relative;
  font-family:var(--font-sans); font-weight:800; font-size:33px;
  letter-spacing:-0.02em; color:var(--ink);
}
.card--regalia p{font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink);}

/* --- карточка лидера (портрет + имя/роль/тег) --- */
.card--leader{
  flex-direction:row; align-items:center; gap:18px;
  padding:22px 24px;
  background:var(--bg-soft); border-color:transparent;
}
.leader-photo{
  flex:0 0 auto; width:76px; height:76px;
  border-radius:var(--radius-s);
  background-color:var(--bg-cream);
  background-size:cover; background-position:center;
}
.leader-name{font-size:19px; font-weight:700; line-height:1.2;}
.leader-role{font-size:15.5px; color:var(--ink-70);}
.leader-tag{font-size:13.5px; color:var(--accent-ink);}

/* --- стат-плитка (KPI-число) --- */
.card--stat{gap:8px; padding:28px 24px; background:var(--bg-soft); border-color:transparent;}
.card--stat b{
  font-size:clamp(32px,3.2vw,48px); font-weight:800;
  letter-spacing:-0.02em; line-height:1.02;
}
.card--stat b.accent{color:var(--accent-ink);}
.card--stat span{font-size:16px; line-height:1.4; color:var(--ink-70);}
.card--stat.card--dark b{color:var(--accent-on-dark);}
.card--stat.card--dark span{color:var(--white-80);}

/* стат-плитки .tnum (алиас-имя из LegalScanner) */
.tnum{display:grid; gap:8px; padding:28px 24px; border-radius:var(--radius-card); background:var(--bg-soft);}
.tnum b{font-size:clamp(32px,3.2vw,48px); font-weight:800; letter-spacing:-0.02em; line-height:1.02;}
.tnum span{font-size:16px; line-height:1.4; color:var(--ink-70);}

/* ============================================================
   13. КРЕМ-ЗАМЕТКА И CTA-БАННЕР
   ============================================================ */

/* горизонтальная крем-заметка («Почему сейчас») */
.note{
  display:flex; gap:16px; align-items:flex-start;
  max-width:760px;
  padding:22px 26px;
  background:var(--bg-cream);
  border-radius:var(--radius-m);
}
.note .mlabel{flex:0 0 auto; font-weight:600; color:var(--accent-ink); padding-top:3px;}
.note p{font-size:17px; line-height:1.5; color:var(--ink-70);}
.note strong{color:var(--ink);}

/* акцентный CTA-баннер */
.banner{
  background:var(--accent); color:#fff;
  border-radius:var(--radius-banner);
  padding:clamp(32px,4vw,64px);
  display:grid; grid-template-columns:var(--flag-cols);
  gap:clamp(30px,4vw,56px); align-items:start;
}
.banner .h2{font-size:clamp(27px,3.2vw,44px); line-height:1.12; letter-spacing:-0.015em;}
.banner p{font-size:18px; line-height:1.55; color:rgba(255,255,255,.92);} /* литерал из инвентаря 02 */
.banner-note{font-size:15px; color:rgba(255,255,255,.88); max-width:46ch;} /* литерал из инвентаря 02 */
.banner-actions{display:grid; gap:10px; justify-items:stretch; align-content:center;}

/* ============================================================
   14. FAQ-АККОРДЕОН
   Кнопка-вопрос + круглый шеврон «+»: при .is-open поворот 45°
   и заливка акцентом. Высоту ответа ставит JS (max-height).
   ============================================================ */

.faq-list{max-width:860px; display:flex; flex-direction:column; gap:14px;}
.faq-item{
  background:var(--bg);
  border-radius:18px; /* радиус FAQ из инвентарей 02/03 */
  border:1.5px solid transparent;
  overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item:hover{border-color:var(--line);}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 28px;
  background:none; border:none;
  font-family:var(--font-sans);
  font-size:clamp(17px,1.5vw,21px); font-weight:700; line-height:1.35;
  text-align:left; color:var(--ink); cursor:pointer;
}
.faq-q .chev{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-content:center;
  border-radius:50%;
  border:2px solid var(--ink-40);
  font-size:20px; font-weight:400; line-height:1;
  transition:transform .25s ease, background-color .2s ease,
             color .2s ease, border-color .2s ease;
}
.faq-item.is-open .chev{
  transform:rotate(45deg);
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.faq-a{overflow:hidden; max-height:0; transition:max-height .3s ease;}
.faq-a p{
  padding:0 28px 26px;
  font-size:16.5px; line-height:1.55;
  color:var(--ink-70); max-width:64ch;
}

/* ============================================================
   15. МОДАЛКА, ЛАЙТБОКС, COOKIE-БАР
   ============================================================ */

/* универсальная модалка */
.modal{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  padding:20px;
  visibility:hidden; pointer-events:none;
}
.modal.is-open{visibility:visible; pointer-events:auto;}
.modal-scrim{
  position:absolute; inset:0;
  background:rgba(8,8,8,.55); /* литерал из инвентаря 02 */
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.modal.is-open .modal-scrim{opacity:1;}
.modal-card{
  position:relative;
  width:min(560px,100%);
  max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--bg); color:var(--ink);
  border-radius:var(--radius-l);
  padding:clamp(24px,3vw,36px);
  box-shadow:var(--shadow-card);
  display:grid; gap:18px;
  opacity:0; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease;
}
.modal.is-open .modal-card{opacity:1; transform:none;}
.modal-title{font-size:clamp(21px,2vw,26px); font-weight:800; letter-spacing:-0.01em; padding-right:44px;}
.modal-close{
  position:absolute; top:18px; right:18px;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:none; border-radius:12px;
  background:transparent; color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:box-shadow .18s ease;
}
.modal-close:hover{box-shadow:inset 0 0 0 1.5px var(--ink);}

/* лайтбокс просмотра изображений */
.lightbox{
  position:fixed; inset:0; z-index:80;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  padding:clamp(16px,3vw,52px);
  background:rgba(8,8,8,.93); /* литерал из инвентаря 02 */
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  cursor:zoom-out;
}
.lightbox.is-open{display:flex;}
.lightbox-img{
  width:min(1280px,100%); max-height:80vh;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.6); /* литерал из инвентаря 02 */
}
.lightbox-caption{
  display:flex; align-items:center; gap:18px;
  color:#fff; font-size:16.5px; font-weight:600; max-width:60ch;
}
.lightbox-close{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5); /* литерал из инвентаря 02 */
  background:transparent; color:#fff;
  font-size:24px; line-height:1; cursor:pointer;
}

/* cookie-баннер */
.cookie-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  background:var(--bg);
  border-top:1.5px solid var(--line);
  box-shadow:0 -8px 32px rgba(12,12,12,.12); /* литерал из инвентаря 03 */
  padding:18px 0;
}
.cookie-bar[hidden]{display:none;}
.cookie-inner{display:flex; align-items:center; gap:24px;}
.cookie-inner p{font-size:16px; color:var(--ink-70); flex:1;}
.cookie-inner a{color:var(--ink); font-weight:600;}
.cookie-actions{display:flex; gap:12px; flex:0 0 auto;}
.cookie-btn{
  min-height:48px; min-width:130px;
  padding:12px 22px; font-size:16px;
}
@media (max-width:767px){
  .cookie-inner{flex-direction:column; align-items:stretch; gap:14px;}
  .cookie-actions .btn{flex:1;}
}

/* ============================================================
   16. ФОРМЫ
   Инпуты 54px на --bg-soft с прозрачной рамкой 2px;
   фокус — акцентный бордер + белый фон; ошибки — --danger.
   ============================================================ */

.form{display:flex; flex-direction:column; gap:16px;}

/* белая карточка формы (на тёмном/акцентном фоне) */
.form-card{
  width:100%;
  background:var(--bg); color:var(--ink);
  border-radius:var(--radius-l);
  padding:clamp(24px,2.6vw,36px);
  box-shadow:var(--shadow-card);
  display:grid; gap:20px;
}
.form-card-head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.form-card-head .h3{font-size:clamp(21px,1.8vw,24px); font-weight:800; letter-spacing:-0.01em;}

/* поле */
.field{display:flex; flex-direction:column; gap:7px;}
.field>label{font-size:15px; font-weight:700; color:var(--ink);}
.field-opt{ /* пометка «— по желанию» */
  font-size:13.5px; font-weight:400; line-height:1.35;
  color:var(--ink-40); white-space:nowrap;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%; min-height:54px;
  padding:14px 16px;
  border:2px solid transparent;
  border-radius:12px; /* радиус инпутов из инвентаря 02 */
  font-family:var(--font-sans);
  font-size:16.5px; color:var(--ink);
  background:var(--bg-soft);
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:120px; resize:vertical; line-height:1.5;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--bg);
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent), transparent 82%);
}

/* select со стрелкой-шевроном (цвет = --ink) */
.field select{
  appearance:none; -webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px;
  cursor:pointer;
}

/* невалидное состояние: класс .is-invalid (ставит JS) или :invalid после касания */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:var(--danger);
  background:color-mix(in oklab, var(--danger), white 96%);
}
.field.is-invalid input:focus,
.field.is-invalid textarea:focus{
  box-shadow:0 0 0 4px color-mix(in oklab, var(--danger), transparent 84%);
}
.field-error{
  font-size:14.5px; font-weight:600; color:var(--danger);
}
.field-error[hidden]{display:none;}
.field-hint{font-size:14px; color:var(--ink-60);}

/* кастомный чекбокс 24×24 с рисованной галочкой */
.check{
  display:flex; align-items:flex-start; gap:12px;
  font-size:15px; line-height:1.45;
  color:var(--ink-70); cursor:pointer;
}
.check input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  width:24px; height:24px; margin:0;
  border:2px solid var(--ink-40);
  border-radius:7px; /* радиус чекбокса из инвентаря 03 */
  cursor:pointer;
  display:grid; place-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.check input::after{
  content:"";
  width:12px; height:7px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(-45deg) translate(1px,-1.5px);
  opacity:0;
}
.check input:checked{background:var(--accent); border-color:var(--accent);}
.check input:checked::after{opacity:1;}
.check.is-invalid input{border-color:var(--danger);}
.check a{color:var(--ink); font-weight:600;}
.check a:hover{color:var(--accent-ink);}

/* кастомный radio (в стиле чекбокса, круглый) */
.radio{
  display:flex; align-items:flex-start; gap:12px;
  font-size:15px; line-height:1.45;
  color:var(--ink-70); cursor:pointer;
}
.radio input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  width:24px; height:24px; margin:0;
  border:2px solid var(--ink-40);
  border-radius:50%;
  cursor:pointer;
  display:grid; place-content:center;
  transition:border-color .15s ease;
}
.radio input::after{
  content:"";
  width:10px; height:10px; border-radius:50%;
  background:var(--accent);
  transform:scale(0);
  transition:transform .15s ease;
}
.radio input:checked{border-color:var(--accent);}
.radio input:checked::after{transform:scale(1);}

/* двухколоночные необязательные поля */
.form-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"l1 l2" "i1 i2";
  gap:7px 12px; align-items:end;
}
.form-2col>.fld-l1{grid-area:l1;} .form-2col>.fld-l2{grid-area:l2;}
.form-2col>.fld-i1{grid-area:i1;} .form-2col>.fld-i2{grid-area:i2;}
@media (max-width:479px){
  .form-2col{grid-template-columns:1fr; grid-template-areas:"l1" "i1" "l2" "i2";}
  .form-2col>.fld-l2{margin-top:9px;}
}

/* алерт результата отправки */
.form-alert{
  padding:14px 18px;
  border-radius:var(--radius-field);
  background:color-mix(in oklab, var(--danger), white 90%);
  border:1.5px solid color-mix(in oklab, var(--danger), white 55%);
  color:var(--danger);
  font-size:16px; font-weight:600;
}
.form-alert--ok{
  background:var(--ok-bg);
  border-color:var(--ok);
  color:var(--ok-ink);
}
.form-alert[hidden]{display:none;}

/* серая mono-заметка формы */
.form-note{
  padding:14px 18px;
  border-radius:var(--radius-field);
  background:var(--bg-soft);
  font-family:var(--font-mono);
  font-size:14px; color:var(--ink-70);
}

/* mono-микродоверие под формой */
.micro-trust{
  font-family:var(--font-mono);
  font-size:14px; line-height:1.7;
  color:var(--ink-60);
}

/* honeypot-антибот: поле невидимо и недоступно человеку */
.hp{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* экран успеха формы */
.form-success{
  display:flex; flex-direction:column; gap:12px;
  min-height:300px; justify-content:center; align-items:flex-start;
}
.form-success .ok-circle{
  width:52px; height:52px;
  display:grid; place-content:center;
  border-radius:50%;
  background:var(--bg-cream); color:var(--accent-ink);
  font-size:26px;
}
.form-success .h3{font-size:24px; font-weight:800;}
.form-success p{font-size:16.5px; line-height:1.5; color:var(--ink-70);}

/* ============================================================
   17. ОБРАТНАЯ СВЯЗЬ: алерты, тост, спиннер, прогресс, скелетон
   ============================================================ */

/* alert на странице (info / ok / warn / error) */
.alert{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 20px;
  border-radius:var(--radius-field);
  border:1.5px solid var(--line);
  background:var(--bg-soft);
  font-size:16px; line-height:1.5; color:var(--ink-70);
}
.alert b{color:var(--ink);}
.alert::before{
  content:"";
  flex:0 0 auto;
  width:9px; height:9px; margin-top:8px;
  border-radius:50%;
  background:var(--ink-40);
}
.alert--ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok-ink);}
.alert--ok b{color:var(--ok-ink);}
.alert--ok::before{background:var(--ok);}
.alert--warn{background:var(--warn-bg); border-color:var(--warn); color:var(--warn-ink);}
.alert--warn b{color:var(--warn-ink);}
.alert--warn::before{background:var(--warn);}
.alert--error{background:var(--neg-bg); border-color:var(--danger); color:var(--neg-ink);}
.alert--error b{color:var(--neg-ink);}
.alert--error::before{background:var(--danger);}

/* toast — короткое подтверждение действия */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:70;
  transform:translate(-50%, 16px);
  display:inline-flex; align-items:center; gap:12px;
  max-width:min(480px, calc(100vw - 32px));
  padding:14px 22px;
  background:var(--dark); color:var(--white-80);
  border-radius:var(--radius-s);
  box-shadow:var(--shadow-card);
  font-size:15.5px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toast::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
}
.toast.is-visible{opacity:1; transform:translate(-50%,0); pointer-events:auto;}
.toast--ok::before{background:var(--ok-on-dark);}

/* спиннер (в кнопках — белый; отдельный на светлом — .spinner--ink) */
.spinner{
  width:20px; height:20px;
  border:3px solid rgba(255,255,255,.35); /* литерал из инвентаря 03 */
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.spinner--ink{
  border-color:var(--line);
  border-top-color:var(--ink);
}
@keyframes spin{to{transform:rotate(360deg);}}

/* прогресс-бар */
.progress{
  position:relative;
  height:12px;
  border-radius:var(--radius-pill);
  background:var(--line);
  overflow:hidden;
}
.progress i{
  position:absolute; inset-block:0; left:0;
  border-radius:var(--radius-pill);
  background:var(--accent);
  transition:width .5s ease;
}
.progress--thin{height:8px;}
.section--dark .progress{background:var(--white-12);}

/* скелетон-плейсхолдеры с shimmer */
.sk{
  border-radius:var(--radius-field);
  background:linear-gradient(
    100deg,
    var(--bg-soft) 30%,
    color-mix(in oklab, var(--bg-soft), white 40%) 50%,
    var(--bg-soft) 70%
  );
  background-size:200% 100%;
  animation:sk-shimmer 1.3s ease-in-out infinite;
}
.sk-pill{width:180px; height:36px; border-radius:var(--radius-pill);}
.sk-title{width:70%; height:44px;}
.sk-text{width:100%; height:18px;}
.sk-bar{width:100%; height:14px; border-radius:var(--radius-pill);}
.sk-card{width:100%; height:180px; border-radius:var(--radius-card);}
@keyframes sk-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

@media (prefers-reduced-motion: reduce){
  .sk{animation:none;}
  .spinner{animation-duration:1.6s;}
  .progress i, .faq-a, .toast, .mnav-panel, .mnav-scrim,
  .burger-bar, .hdr-nav-link::after, .modal-scrim, .modal-card{transition:none;}
}

/* ============================================================
   18. ДАННЫЕ: таблица, бейджи
   Фирменная таблица: тёмная mono-шапка, зебра --bg-soft,
   на мобиле — горизонтальный скролл внутри .table-wrap.
   ============================================================ */

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:16px; line-height:1.45;
}
.table th, .table td{padding:14px 18px; text-align:left; vertical-align:top;}
.table thead th{
  background:var(--dark); color:var(--white-80);
  font-family:var(--font-mono);
  font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
}
.table tbody td{border-top:1px solid var(--line-2); color:var(--ink-70);}
.table tbody tr:nth-child(even){background:var(--bg-soft);}
.table tbody b, .table tbody strong{color:var(--ink);}
/* числа — вправо, табличные цифры */
.table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
/* строка итога */
.table tfoot td, .table tr.total td{
  border-top:1.5px solid var(--ink);
  font-weight:700; color:var(--ink);
  background:var(--bg-cream);
}
.table-wrap{min-width:0;}
.table{min-width:560px;} /* на мобиле включается скролл обёртки */

/* бейджи статусов и severity */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px 8px;
  border-radius:var(--radius-pill);
  background:var(--accent); color:#fff;
  font-size:14px; font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap;
}
.badge--high{background:var(--danger);}
.badge--medium{background:var(--accent);}
.badge--low{background:var(--ink);}
.badge--ok{background:var(--ok);}
.badge--warn{background:var(--warn);}
/* компактный mono-каунтер */
.badge--count{
  padding:6px 12px;
  background:var(--bg-soft); color:var(--ink-70);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.02em; text-transform:none;
}

/* ============================================================
   19. ПРАЙС-КАРТОЧКИ (3 тарифа, выделенный средний)
   Новый компонент по чек-листу — в стиле Webit:
   тёмная featured-панель, mono-кикеры, акцентные точки.
   ============================================================ */

.price{
  display:grid;
  grid-template-columns:var(--g-3);
  gap:var(--gap-grid);
  align-items:stretch;
}
.price-card{
  display:flex; flex-direction:column; gap:16px;
  padding:32px 28px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  transition:border-color .2s ease, transform .2s ease;
}
@media (hover:hover){
  .price-card:hover{border-color:var(--ink); transform:translateY(-3px);}
}
.price-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.price-kicker{
  font-family:var(--font-mono);
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-ink);
}
.price-flag{ /* бейдж «популярный» на featured */
  display:inline-flex; align-items:center;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  background:var(--accent); color:#fff;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
}
.price-name{font-size:23px; font-weight:800; line-height:1.18;}
.price-sum{
  font-size:clamp(32px,3vw,44px); font-weight:800;
  letter-spacing:-0.02em; line-height:1.05;
  color:var(--ink);
}
.price-sum .unit{
  display:inline-block;
  font-size:15px; font-weight:500; letter-spacing:0;
  color:var(--ink-60);
  white-space:nowrap; /* «/ месяц» не разрывается при переносе */
}
.price-desc{font-size:15.5px; line-height:1.5; color:var(--ink-70);}
.price-feats{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  font-size:15.5px; line-height:1.5; color:var(--ink-70);
}
.price-feats li{display:flex; gap:12px; align-items:flex-start;}
.price-feats li::before{
  content:"";
  flex:0 0 auto;
  width:7px; height:7px; margin-top:9px;
  border-radius:50%;
  background:var(--accent);
}
.price-card .btn{margin-top:auto;}

/* выделенный (средний) тариф — тёмная панель */
.price-card--featured{
  background:var(--dark); color:#fff;
  border-color:var(--dark);
}
@media (hover:hover){
  .price-card--featured:hover{border-color:var(--accent);}
}
.price-card--featured .price-kicker{color:var(--accent-on-dark);}
.price-card--featured .price-sum{color:var(--accent-on-dark);}
.price-card--featured .price-sum .unit{color:var(--white-60);}
.price-card--featured .price-desc,
.price-card--featured .price-feats{color:var(--white-80);}

/* ============================================================
   20. ЦИТАТА-ОТЗЫВ (testimonial) — новый компонент по чек-листу
   ============================================================ */

.quote{
  display:flex; flex-direction:column; gap:22px;
  padding:32px 30px;
  background:var(--bg-soft);
  border-radius:var(--radius-l);
}
.quote .mlabel{color:var(--accent-ink); font-weight:600;}
.quote-text{
  font-size:clamp(18px,1.8vw,22px); font-weight:600;
  line-height:1.45; letter-spacing:-0.01em;
  color:var(--ink); text-wrap:pretty;
  max-width:56ch;
}
.quote-person{display:flex; align-items:center; gap:14px;}
.quote-name{font-size:16.5px; font-weight:700; line-height:1.25;}
.quote-role{font-size:14.5px; color:var(--ink-60);}
/* крем-вариант с тёплой полосой (для сильного отзыва) */
.quote--cream{
  background:var(--bg-cream);
  border:1px solid var(--accent-line);
  box-shadow:inset 5px 0 0 var(--accent-warm);
}

/* ============================================================
   21. АВАТАР — новый компонент по чек-листу
   ============================================================ */

.avatar{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  overflow:hidden;
  background:var(--bg-cream);
  display:inline-grid; place-content:center;
  font-family:var(--font-mono);
  font-size:14px; font-weight:600;
  color:var(--accent-ink);
}
.avatar img{width:100%; height:100%; object-fit:cover;}
.avatar--s{width:32px; height:32px; font-size:11.5px;}
.avatar--l{width:76px; height:76px; font-size:20px;}
.avatar--square{border-radius:var(--radius-s);} /* портрет лидера */
.avatar-group{display:inline-flex; padding-left:10px;}
.avatar-group .avatar{margin-left:-10px; border:2px solid var(--bg);}

/* ============================================================
   22. ХЛЕБНЫЕ КРОШКИ — новый компонент по чек-листу
   ============================================================ */

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 10px;
  font-family:var(--font-mono);
  font-size:13.5px;
  list-style:none; margin:0; padding:0;
}
.crumbs a{color:var(--ink-60); text-decoration:none; transition:color .18s ease;}
.crumbs a:hover{color:var(--accent-ink);}
.crumbs li{display:inline-flex; align-items:center; gap:10px;}
.crumbs li+li::before{content:"/"; color:var(--ink-40);}
.crumbs [aria-current]{color:var(--ink); font-weight:600;}
.section--dark .crumbs a{color:var(--white-60);}
.section--dark .crumbs a:hover{color:var(--accent-on-dark);}
.section--dark .crumbs li+li::before{color:var(--white-28);}
.section--dark .crumbs [aria-current]{color:#fff;}

/* ============================================================
   23. ТАБЫ — новый компонент по чек-листу
   Активный таб — приём селектора инструментов лендинга:
   акцентная подсветка --accent-tint + акцентная рамка.
   ============================================================ */

.tabs{
  display:flex; flex-wrap:wrap; gap:10px;
}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 20px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
  background:transparent;
  font-family:var(--font-sans);
  font-size:15px; font-weight:600;
  color:var(--ink-70); cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tab:hover{border-color:var(--ink); color:var(--ink);}
.tab.is-active,
.tab[aria-selected="true"]{
  background:var(--accent-tint);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.tab-panels{margin-top:22px;}
.tab-panel[hidden]{display:none;}

/* вертикальный селектор-таб на тёмном (из лендинга «Это уже работает») */
.tool-tab{
  width:100%; text-align:left;
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px;
  background:rgba(255,255,255,.04); /* литерал из инвентаря 02 */
  border:1px solid var(--white-12);
  border-radius:var(--radius-s);
  color:#fff; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.tool-tab .dot{
  flex:0 0 auto; width:8px; height:8px; margin-top:8px;
  border-radius:50%; background:var(--accent);
}
.tool-tab b{display:block; font-size:17px; font-weight:700; line-height:1.25;}
.tool-tab span{display:block; font-size:14.5px; line-height:1.45; color:var(--white-80);}
.tool-tab.is-active,
.tool-tab[aria-pressed="true"]{
  background:var(--accent-tint);
  border-color:var(--accent);
}

/* ============================================================
   24. ПАГИНАЦИЯ — новый компонент по чек-листу
   ============================================================ */

.pager{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; margin:0; padding:0;
}
.pager a, .pager span{
  display:inline-grid; place-content:center;
  min-width:46px; height:46px; padding:0 10px;
  border-radius:12px;
  border:1.5px solid var(--line);
  font-family:var(--font-mono);
  font-size:15px; font-weight:600;
  color:var(--ink-70); text-decoration:none;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pager a:hover{border-color:var(--ink); color:var(--ink);}
.pager [aria-current]{
  background:var(--dark); border-color:var(--dark); color:#fff;
}
.pager .gap{border:none; color:var(--ink-40); min-width:24px;}
.pager .arrow{font-family:var(--font-sans);}

/* ============================================================
   25. РАЗДЕЛИТЕЛЬ — новый компонент по чек-листу
   ============================================================ */

.rule{
  border:0; margin:clamp(24px,3vw,40px) 0;
  border-top:1px solid var(--line);
}
.rule--thin{border-top-color:var(--line-2);}
/* короткая акцентная черта (маркер начала блока) */
.rule--accent{
  width:56px; border:0; margin:0;
  border-top:3px solid var(--accent);
}
/* разделитель с mono-лейблом по центру */
.rule--label{
  display:flex; align-items:center; gap:16px;
  border:0; margin:clamp(24px,3vw,40px) 0;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-40);
}
.rule--label::before,
.rule--label::after{
  content:""; flex:1; border-top:1px solid var(--line);
}
.section--dark .rule{border-top-color:var(--white-12);}

/* ============================================================
   26. EMPTY STATE и СТРАНИЦЫ СОСТОЯНИЙ (404 / спасибо)
   Новые компоненты по чек-листу
   ============================================================ */

.empty{
  display:grid; justify-items:center; gap:14px;
  padding:clamp(40px,6vw,72px) 28px;
  background:var(--bg-soft);
  border-radius:var(--radius-l);
  text-align:center;
}
.empty-sign{
  font-family:var(--font-mono);
  font-size:clamp(34px,4vw,52px); font-weight:600;
  color:rgba(12,12,12,.1); /* «призрачный» приём из инвентаря 02 */
  line-height:1;
}
.empty .h3{font-size:20px; font-weight:800;}
.empty p{font-size:16px; line-height:1.5; color:var(--ink-60); max-width:44ch;}
.empty .btn{margin-top:8px;}

/* страница состояния: 404 / 500 / «спасибо за заявку» */
.state-page{
  min-height:60vh;
  display:grid; place-content:center; justify-items:center;
  gap:18px; text-align:center;
  padding-block:clamp(56px,8vw,116px);
}
.state-code{
  font-family:var(--font-mono);
  font-size:clamp(64px,10vw,120px); font-weight:600;
  line-height:1; letter-spacing:-0.02em;
  color:var(--accent);
}
.state-page .h2{max-width:18ch;}
.state-page .lead{max-width:52ch; margin-inline:auto;}
.state-check{ /* круг с галочкой для «спасибо» */
  width:64px; height:64px;
  display:grid; place-content:center;
  border-radius:50%;
  background:var(--bg-cream); color:var(--accent-ink);
  font-size:30px;
}
.state-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px;}

/* ============================================================
   27. TOOLTIP — новый компонент по чек-листу
   Показ по hover и по фокусу с клавиатуры.
   ============================================================ */

.tip{
  position:relative;
  display:inline-block;
  border-bottom:1.5px dotted var(--ink-40);
  cursor:help;
}
.tip::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:260px;
  padding:9px 13px;
  border-radius:var(--radius-field-sm);
  background:var(--dark); color:var(--white-80);
  font-family:var(--font-mono);
  font-size:12.5px; font-weight:400; line-height:1.45;
  text-align:left; white-space:normal;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:20;
}
.tip::before{ /* стрелка */
  content:"";
  position:absolute; left:50%; bottom:calc(100% + 4px);
  transform:translateX(-50%) translateY(4px);
  border:6px solid transparent;
  border-top-color:var(--dark);
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:20;
}
.tip:hover::after, .tip:focus-visible::after,
.tip:hover::before, .tip:focus-visible::before{
  opacity:1;
  transform:translateX(-50%);
}

/* ============================================================
   28. СТЕП-ИНДИКАТОР (progress tracker) — новый по чек-листу
   Номер в пилюле (приём step-num) + соединительные линии.
   ============================================================ */

.stepper{
  display:flex; align-items:center; gap:12px;
  list-style:none; margin:0; padding:0;
}
.stepper li{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.stepper li.grow{flex:1 1 auto;} /* служебный: линия-распорка */
.stepper-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:34px; padding:0 12px;
  border:2px solid var(--ink-40);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:14px; font-weight:700;
  color:var(--ink-60);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.stepper-label{font-size:14.5px; font-weight:600; color:var(--ink-60); white-space:nowrap;}
.stepper-line{flex:1 1 24px; min-width:24px; height:2px; background:var(--line);}
/* пройденный шаг */
.stepper li.is-done .stepper-num{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.stepper li.is-done .stepper-label{color:var(--ink);}
.stepper li.is-done+li .stepper-line,
.stepper .stepper-line.is-done{background:var(--accent);}
/* текущий шаг */
.stepper li.is-active .stepper-num{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.stepper li.is-active .stepper-label{color:var(--ink);}
@media (max-width:767px){
  .stepper-label{display:none;} /* на смартфоне остаются только номера */
}

/* ============================================================
   29. STICKY-CTA (смартфон) И ФУТЕР
   ============================================================ */

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:var(--sticky-disp);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, rgba(255,255,255,.97) 72%, rgba(255,255,255,0)); /* литерал из инвентаря 02 */
  pointer-events:none;
}
.sticky-cta .btn{
  width:100%; min-height:56px; font-size:17px;
  transform:translateY(120%);
  transition:transform .25s ease;
  pointer-events:auto;
}
.sticky-cta.is-visible .btn{transform:none;}
@media (prefers-reduced-motion: reduce){
  .sticky-cta .btn{transition:none;}
}

/* футер: тёмный, сетка 1.6fr 1fr 1fr */
.footer{
  background:var(--dark); color:var(--white-80);
  padding-block:clamp(52px,6vw,84px) 36px;
  font-size:16px; line-height:1.6;
}
.footer-grid{
  display:grid;
  grid-template-columns:var(--g-footer);
  gap:40px 48px;
}
.footer-brand{display:grid; gap:16px; align-content:start; justify-items:start;}
.footer-brand .logo{width:112px; height:auto; color:#fff;}
.footer-brand p{color:var(--white-80); max-width:42ch;}
.footer-req{font-size:13.5px; line-height:1.6; color:var(--white-60);}
.footer-col{display:grid; gap:12px; align-content:start;}
.footer-col h4{
  margin:0 0 6px;
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--white-60);
}
.footer a{color:#fff; text-decoration:none;}
.footer a[href^="tel"]{white-space:nowrap;}
.footer a:hover{text-decoration:underline;}
.footer .muted{color:var(--white-60);}
.footer-legal{
  margin-top:clamp(34px,4vw,56px);
  padding-top:26px;
  border-top:1px solid var(--white-16);
  display:grid; gap:12px;
  font-size:14px; color:var(--white-60);
}

/* ============================================================
   КОНТЕНТНЫЙ БЛОК .prose — статьи, кейсы, внутренние страницы
   (списки, in-text ссылки, description list, цитата)
   ============================================================ */
.prose{max-width:72ch;}
.prose p{margin:0 0 var(--sp-4); color:var(--ink-70);}
.prose p.lead{font-size:clamp(19px,1.6vw,22px); color:var(--ink); line-height:1.5;}
.prose h2,.prose h3{color:var(--ink); letter-spacing:-.015em; text-wrap:balance;}
.prose h2{font-size:clamp(26px,2.6vw,34px); font-weight:800; margin:var(--sp-7) 0 var(--sp-4);}
.prose h3{font-size:clamp(20px,1.9vw,24px); font-weight:700; margin:var(--sp-6) 0 var(--sp-3);}
/* in-text ссылка: акцентный цвет + подчёркивание, hover темнее */
.prose a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--accent-line); transition:color .15s ease, text-decoration-color .15s ease;}
.prose a:hover{color:var(--accent-hover); text-decoration-color:currentColor;}
/* маркированный список: фирменная точка-кольцо */
.prose ul{list-style:none; margin:0 0 var(--sp-4); padding:0;}
.prose ul>li{position:relative; padding-left:26px; margin:var(--sp-2) 0; color:var(--ink-70);}
.prose ul>li::before{content:""; position:absolute; left:2px; top:.52em; width:8px; height:8px;
  border-radius:50%; border:2.5px solid var(--accent);}
.prose ul.tick>li::before{border:0; top:.28em; width:14px; height:14px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.3 2.9 8l1.2-1.2 2.1 2.1 5-5L12.4 5z' fill='%23F4501E'/%3E%3C/svg%3E");}
/* нумерованный список: mono-номер акцентом */
.prose ol{list-style:none; margin:0 0 var(--sp-4); padding:0; counter-reset:pn;}
.prose ol>li{position:relative; padding-left:34px; margin:var(--sp-2) 0; color:var(--ink-70); counter-increment:pn;}
.prose ol>li::before{content:counter(pn,decimal-leading-zero); position:absolute; left:0; top:.12em;
  font-family:var(--font-mono); font-size:.82em; font-weight:600; color:var(--accent-ink);}
.prose li b,.prose li strong{color:var(--ink);}
/* вложенные уровни */
.prose li>ul,.prose li>ol{margin:var(--sp-2) 0 0;}
.prose li>ul>li::before{width:5px; height:5px; border-width:2px; top:.62em;}
/* description list: mono-термин + описание */
.prose dl,.dlist{margin:0 0 var(--sp-4); display:grid; grid-template-columns:max-content 1fr; gap:var(--sp-2) var(--sp-5);}
.prose dt,.dlist dt{font-family:var(--font-mono); font-size:.86em; font-weight:600; color:var(--accent-ink);
  text-transform:uppercase; letter-spacing:.04em; padding-top:2px;}
.prose dd,.dlist dd{margin:0; color:var(--ink-70);}
/* контентная цитата */
.prose blockquote{margin:var(--sp-5) 0; padding:var(--sp-3) var(--sp-5);
  border-left:5px solid var(--accent); background:var(--bg-soft);
  border-radius:0 var(--radius-m) var(--radius-m) 0; color:var(--ink); font-size:1.05em;}
.prose blockquote p{margin:0; color:inherit;}
.prose hr{border:0; height:1px; background:var(--line); margin:var(--sp-6) 0;}

/* ============================================================
   ИКОНКИ — конвенция: инлайн-SVG, stroke/fill = currentColor,
   размеры строго 16/20/24 (см. COMPONENTS.md)
   ============================================================ */
.icon{display:inline-block; vertical-align:-.12em; flex:0 0 auto;}
.icon-16{width:16px; height:16px;}
.icon-20{width:20px; height:20px;}
.icon-24{width:24px; height:24px;}