/*!
 * Risk Scanner · tokens.css v1.0
 * Design tokens — colour, radius, spacing, elevation, motion.
 * Swap this file to retheme the entire kit.
 * --------------------------------------------------------------------- */

:root {
  --ink: #212529;
  --ink-2: #3a3f44;
  --mute: #6a6f78;  /* darkened from #9097a1 for WCAG AA (2.95 → 5.0:1) */
  --line: #e6e8ec;
  --bg: #ffffff;
  --bg-2: #f4f4f6;
  --bg-3: #eef0f3;

  --purple: #8942fe;
  --purple-2: #d4cdff;
  --purple-3: #eeeaff;

  --yellow: #fed728;
  --yellow-2: #ffeba2;
  --yellow-3: #fff6cf;

  /* — Semantic state colours — */
  /* Two-tone system:
       --safe / --danger   → brand mark, fills, large text, text on dark surfaces
       --safe-text / --danger-text → WCAG AA-compliant text on light surfaces */
  --danger:      #e84858;   /* fresh coral — for mascot, mark, fills */
  --danger-text: #b3001b;   /* deeper red — for text on white, passes AA 7.15:1 */
  --danger-2:    #fde7ea;
  --danger-3:    #fff5f6;
  --safe:        #22a055;   /* fresh green — for mascot, mark, dark surfaces */
  --safe-text:   #1a7f3a;   /* deeper green — for text on white, passes AA 4.99:1 */
  --safe-2:      #e6f6e8;
  --safe-3:      #f3fbf5;

  /* — Font stacks — */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* — Spacing scale (8px base) — */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* — Elevation — */
  --e-1: 0 1px 1px rgba(0,0,0,.03), 0 0 0 1px rgba(33,37,41,.04);
  --e-2: 0 2px 4px rgba(0,0,0,.04), 0 0 0 1px rgba(33,37,41,.05);
  --e-3: 0 8px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(33,37,41,.05);
  --e-4: 0 24px 64px rgba(0,0,0,.10), 0 0 0 1px rgba(33,37,41,.06);

  /* — Motion (consistent easing across kit) — */
  --t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --t-base: 280ms cubic-bezier(.4,0,.2,1);
  --t-slow: 600ms cubic-bezier(.4,0,.2,1);
}
/*!
 * Risk Scanner · components.css v4.0
 * Vanilla CSS class library — no runtime, no inline styles.
 * Depends on tokens.css.
 * --------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-subset.woff2') format('woff2-variations'),
       url('../fonts/Inter-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* RESET & BASE ============================================ */
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
html { scroll-behavior: smooth }
/* Универсальный fix: `.btn-ink`/`.btn-ghost`/`.tab` имеют `display: inline-flex`,
   что переопределяет UA-стиль `[hidden] { display: none }`. Без !important
   `previewBtn.hidden = true` в JS не скроет элемент. Это базовое поведение —
   живёт в RESET. См. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden */
[hidden] { display: none !important }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  font-size: 16px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0 }
hr.hr { border: 0; border-top: 1px solid var(--line); margin: 0 }
img { max-width: 100%; display: block }

/* LAYOUT ================================================== */
.page { max-width: 1480px; margin: 0 auto; padding: 32px 40px 120px }
.section { margin-top: 120px }
.section--tight { margin-top: 80px }
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px }
@media (max-width: 900px) { .page { padding: 24px 20px 80px } .row { grid-template-columns: repeat(6, 1fr) } }
@media (max-width: 600px) {
  .row { grid-template-columns: 1fr }
  .section { margin-top: 48px }         /* было 80px — слишком много на mobile */
  .section--tight { margin-top: 24px }  /* tight = почти впритык к шапке */
}

.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-12{grid-column:span 12}
@media (max-width: 900px) { .col-3,.col-4,.col-5,.col-7,.col-8,.col-9{grid-column:span 6} }
@media (max-width: 600px) { [class^="col-"]{grid-column:span 1} }

/* TYPOGRAPHY ==============================================
 * ⛔ HARD RULE — НЕ ВЫДУМЫВАТЬ font-size В КОДЕ
 *
 * Полный свод правил: Docs/CLAUDE.md → «⛔ Типографика».
 *
 * Базовая иерархия:
 *   .h-display  clamp(56-140) — мега-hero (редко)
 *   .h-1        clamp(40-80)  — hero landing / название документа
 *   .h-2        clamp(28-48)  — landing section title
 *   .h-3        24px          — sub-heading в LK, callout
 *   .body       17px / lh 1.55 — стандартный параграф
 *   .small      13px / lh 1.5 — caption, дата, footnote
 *   .eyebrow    13px uppercase — pill-надзаголовок
 *
 * Document-overrides (внутри .prose-контейнера, mobile ≤700px):
 *   .prose .h-1  32 / lh 1.2  / ls -.02em
 *   .prose .h-2  26 / lh 1.25 / ls -.02em
 *   .prose .h-3  22 / lh 1.3  / ls -.01em
 *   .prose .body 16 / lh 1.6
 *   .prose .small 13 / lh 1.5
 *
 * Запрещено:
 *   - inline `style="font-size: NNpx"` в HTML
 *   - <h1>/<h2>/<h3> без kit-класса (browser-defaults reset'нуты)
 *   - .h-1/.h-2 для разделов внутри документа (hero-размеры)
 *   - custom font-size в новых CSS правилах без обоснования
 * ============================================================ */
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); display: inline-block; margin: 0 }
.h-display { font-size: clamp(56px, 8vw, 140px); font-weight: 600; line-height: .95; letter-spacing: -.05em; margin: 0 }
.h-1 { font-size: clamp(40px, 5.2vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.045em; margin: 0 }
.h-2 { font-size: clamp(28px, 3.8vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; margin: 0 }
.h-3 { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 0 }
.body { font-size: 17px; line-height: 1.55; margin: 0 }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' }
.mute { color: var(--mute) }
.text-purple { color: var(--purple) }
.text-yellow { color: var(--yellow) }
.dot-p { color: var(--purple) }
.dot-y { color: var(--yellow) }
.text-center { text-align: center }

/* Prose typography — для длинных документов (оферта, политика, DPA).
   Добавляет вертикальный ритм между параграфами / заголовками / списками,
   которого нет в kit-defaults (.body margin:0, .h-3 margin:0).
   Использование: <article class="prose">...тонна <p class="body"> и <h3>...</article>
   Применяется к ПРЯМЫМ потомкам — не каскадирует вглубь.
*/
.prose > * + * { margin-top: 16px }
.prose > h3 + * { margin-top: 12px }   /* плотнее под подзаголовком */
.prose > * + h3 { margin-top: 40px }   /* большой break перед новой секцией */
.prose > * + ul,
.prose > * + ol { margin-top: 12px }
.prose ul, .prose ol { padding-left: 24px }
.prose li + li { margin-top: 6px }
.prose li { line-height: 1.55 }

/* Tag-selectors для markdown-rendered content (без kit-классов).
   Используется для /privacy + /dpa + /offer (backend markdown→HTML wrapper).
   Дублирует значения .h-1/.h-2/.h-3/.body на чистых тэгах — чтобы можно
   было обернуть markdown body в <article class="prose"> и получить
   единую типографику без custom .policy-content стилей.

   ВАЖНО: НЕ ставить `margin: 0` здесь — иначе перебьёт `.prose > * + *`
   margin-top: 16px (этот селектор имеет спецификс 0,0,1,0, а tag-rule
   `.prose p` — 0,0,1,1, выше). Вместо этого reset через :where() (низкая
   специфичность 0,0,0,0). */
:where(.prose) h1, :where(.prose) h2, :where(.prose) h3,
:where(.prose) h4, :where(.prose) p,
:where(.prose) ul, :where(.prose) ol { margin: 0 }

.prose h1 { font-size: clamp(40px, 5.2vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.045em }
.prose h2 { font-size: clamp(28px, 3.8vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em }
.prose h3 { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em }
.prose h4 { font-size: 18px; font-weight: 600; line-height: 1.3 }
.prose p { font-size: 17px; line-height: 1.55 }
.prose a { color: var(--purple); text-decoration: underline }
.prose a:hover { text-decoration: none }
.prose strong { color: var(--ink); font-weight: 600 }
.prose code {
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
  font-family: "SF Mono", Monaco, monospace;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 }
.prose table { border-collapse: collapse; margin: 16px 0; width: 100%; font-size: 14px; display: block; overflow-x: auto }
.prose td, .prose th { border: 1px solid var(--line); padding: 10px 14px; text-align: left }
.prose th { background: var(--bg-2); font-weight: 600 }

/* Mobile-типографика для документов (оферта, политика, DPA).
   Modular scale ratio ~1.4 от baseline 16px → ясная иерархия:

     H1   32px / lh 1.2 / ls -.02em  — document title, dominant
     H3   22px / lh 1.3 / ls -.01em  — section heading
     body 16px / lh 1.6              — comfortable reading на 320-414px
     li   16px / lh 1.6              — пункты списков
     small 13px / lh 1.5             — дата редакции, footnote

   Применяется ТОЛЬКО к .prose-контейнеру — landing/LK hero (.h-1/.h-2)
   остаются крупными (clamp 40-80px), у них visual-impact appeal, не reading.

   !important на font-size перебивает существующий `@media ≤380px {
   .h-1 !important: 24px }` (это правило для landing iPhone SE,
   нам в документе нужен другой scale). */
@media (max-width: 700px) {
  /* Версия для kit-классов (HTML вручную написан с .h-1/.h-3/.body) */
  .prose .h-1,
  .prose h1 { font-size: 32px !important; line-height: 1.2;  letter-spacing: -.02em }
  .prose .h-2,
  .prose h2 { font-size: 26px !important; line-height: 1.25; letter-spacing: -.02em }
  .prose .h-3,
  .prose h3 { font-size: 22px !important; line-height: 1.3;  letter-spacing: -.01em }
  .prose h4 { font-size: 17px !important; line-height: 1.35; font-weight: 600 }
  .prose .body,
  .prose p,
  .prose li,
  .prose ul,
  .prose ol        { font-size: 16px !important; line-height: 1.6 }
  .prose .small    { font-size: 13px !important; line-height: 1.5 }
}

/* Visibility utilities (added Sub.5 offer page).
   Используются для responsive — например, sticky TOC прятать на mobile
   когда col-* стэкаются и TOC оказывается под документом (бесполезно). */
.hide-md { /* hidden ≤700px (TOC/sidebar/secondary on tablet+mobile) */ }
@media (max-width: 700px) { .hide-md { display: none !important } }
.hide-sm { /* hidden ≤500px (только phone) */ }
@media (max-width: 500px) { .hide-sm { display: none !important } }
.show-md { /* visible только ≤700px (mobile-only элементы) */ display: none }
@media (max-width: 700px) { .show-md { display: revert !important } }

/* TOPBAR ================================================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar__brand { display: flex; align-items: center; gap: 12px }
.topbar__meta { display: flex; align-items: center; gap: 32px }
@media (max-width: 700px) { .topbar__meta { gap: 16px } .topbar__meta .small { display: none } }

/* LOGO ==================================================== */
.logo {
  font-family: 'Inter', sans-serif;
  font-weight: 600; letter-spacing: -.06em;
  color: var(--ink); line-height: 1;
  display: inline-flex; align-items: baseline; white-space: nowrap;
}
.logo--dark { color: #fff }
.logo--sm { font-size: 18px }
.logo--md { font-size: 24px }
.logo--lg { font-size: 32px }
.logo--xl { font-size: 48px }
.logo--xxl { font-size: 120px }

.logo-square {
  width: 80px; height: 80px; border-radius: 17.6px;
  background: var(--purple); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 40px; font-weight: 600;
  letter-spacing: -.06em; line-height: 1;
}
.logo-square .dot-y { margin-left: -5px }
/* Optical centering — same rule as .app-icon-squircle .mascot */
.logo-square .mascot { color: #fff; transform: translateY(-4%) }

/* BUTTONS ================================================= */
.btn-ink, .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  border: 0; cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
  font-family: inherit; text-decoration: none;
}
.btn-ink { background: var(--ink); color: #fff }
.btn-ink:hover { background: #000; transform: translateY(-1px) }
.btn-ink--red { background: #b3001b }
.btn-ink--red:hover { background: #8d0015 }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line) }
.btn-ghost:hover { background: var(--bg-2) }
.btn--sm { padding: 10px 18px; font-size: 14px }
.btn--lg { padding: 18px 28px; font-size: 16px }
.btn--icon { padding: 0; width: 36px; height: 36px; border-radius: 50%; justify-content: center }
.btn[disabled] { opacity: .4; pointer-events: none }
.btn--block { width: 100%; justify-content: center }

/* TAGS / PILLS / CHIPS ==================================== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.tag--ink { background: var(--ink); color: #fff; border-color: var(--ink) }
.tag--purple { background: var(--purple); color: #fff; border-color: var(--purple) }
.tag--yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow) }
.tag--purple-2 { background: var(--purple-2); border-color: transparent; color: var(--ink) }
.tag--on-purple { background: rgba(255,255,255,.18); color: #fff; border: 0 }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 13px; font-weight: 500;
}
.pill--purple { background: var(--purple); color: #fff; border-color: var(--purple) }
.pill .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--purple) }
.pill .dot--y { background: var(--yellow) }
.pill .dot--g { background: #1a7f3a }

.chip {
  background: var(--bg-2); border-radius: 999px;
  padding: 18px 26px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 220px;
}
.chip__v { font-size: 28px; font-weight: 500; letter-spacing: -.02em }
.chip__l { font-size: 13px; color: var(--mute) }

/* CARDS =================================================== */
.card { background: var(--bg-2); border-radius: var(--r-lg); padding: 28px }
/* Compact card модификатор — для вложенных action/CTA блоков внутри другого
   .card. Уменьшает padding (28→18) и border-radius (28→14) чтобы не было
   эффекта «card-in-card 56px суммарного отступа». */
.card.action-compact { padding: 18px; border-radius: 14px; margin-top: 12px }
.card.finding-ok { padding: 16px 20px }
.card--white { background: #fff; border: 1px solid var(--line) }
.card--ink { background: var(--ink); color: #fff }
.card--purple { background: var(--purple); color: #fff }
.card--purple-2 { background: var(--purple-2); color: var(--ink) }
.card--purple-3 { background: var(--purple-3); color: var(--ink) }
.card--yellow { background: var(--yellow); color: var(--ink) }
.card--yellow-2 { background: var(--yellow-2); color: var(--ink) }
.bento { background: var(--bg-2); border-radius: var(--r-xl); padding: 24px }

/* SWATCH ================================================== */
.swatch {
  border-radius: var(--r-lg); padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 240px;
}
.swatch__hex { font-size: 24px; font-weight: 500; letter-spacing: -.01em }
.swatch__desc { font-size: 13px; line-height: 1.45; max-width: 220px; opacity: .85; margin: 0 }

/* HERO ==================================================== */
.hero-stage { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap }
.hero-body { flex: 1 1 600px }
.hero-tags { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap }
.hero-lede { max-width: 560px; margin-top: 32px }
.hero-product { flex: 0 0 360px; display: flex; justify-content: flex-end }
.hero-product-card {
  background: var(--purple); color: #fff;
  border-radius: 32px; padding: 32px 36px;
  min-width: 320px; min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
}

/* MANIFESTO =============================================== */
.manifesto { text-align: center; max-width: 1100px; margin: 0 auto; line-height: 1.15 }
.manifesto-highlight {
  display: inline-flex; align-items: center;
  padding: 4px 18px; border-radius: 999px;
  vertical-align: middle;
}
.mh--purple { background: var(--purple-2); color: var(--ink) }
.mh--yellow { background: var(--yellow); color: var(--ink) }

/* LOGO SYSTEM ============================================= */
.logo-tile {
  background: var(--bg-2); border-radius: var(--r-lg);
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.logo-tile--ink { background: var(--ink) }
.logo-tile-meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--mute) }

/* TYPOGRAPHY SPEC ========================================= */
.type-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.type-spec-text { font-size: 22px; line-height: 1.5; letter-spacing: -.015em; margin: 0 }

/* FORMS =================================================== */
.field { display: flex; flex-direction: column; gap: 6px }
.label { font-size: 13px; font-weight: 500; color: var(--ink-2) }
.input, .select, .textarea {
  padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 15px; font-family: inherit; color: var(--ink);
  width: 100%; outline: none;
  transition: background .15s, border-color .15s;
}
.input:focus, .select:focus, .textarea:focus { background: #fff; border-color: var(--purple) }
.input.has-error { border-color: #b3001b; background: #fff5f5 }
.textarea { min-height: 100px; resize: vertical }
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  padding-right: 40px;
}
.error-msg { font-size: 12px; color: #b3001b; display: inline-flex; align-items: center; gap: 6px }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; padding: 20px } }
.field--full { grid-column: 1 / -1 }
.form-actions { display: flex; gap: 10px; padding-top: 8px }
.form-toggles { display: flex; gap: 24px; align-items: center; padding-top: 8px; flex-wrap: wrap }

/* TOGGLE ================================================== */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.toggle-track {
  position: relative; width: 44px; height: 24px;
  background: #c4cad3; border-radius: 999px;
  transition: background .2s;
  flex: 0 0 auto;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  transition: left .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.toggle.is-on .toggle-track { background: var(--purple) }
.toggle.is-on .toggle-thumb { left: 22px }
.toggle-label { font-size: 14px; color: var(--ink); font-weight: 500 }

/* SEARCH ================================================== */
.search {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  max-width: 480px;
}
.search-icon { color: var(--mute); flex: 0 0 auto }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px }
.search-kbd { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--mute); font-size: 11px }

/* BUTTON STATES DEMO ====================================== */
.btn-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.btn-states > div { display: flex; flex-direction: column; gap: 8px }
.btn-states .btn-ink { width: 100% }
.demo-focused { outline: 2px solid var(--purple); outline-offset: 2px }
.demo-hover { background: #000 !important; transform: translateY(-1px) }

/* TABS ==================================================== */
.tabs { display: flex; flex-direction: column; gap: 24px }
.tabs-list { display: flex; gap: 4px; border-bottom: 1px solid var(--line) }
.tab {
  padding: 12px 18px; background: none; border: 0;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--mute); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink) }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink) }
.tab-panel[hidden] { display: none }

/* TOAST =================================================== */
.toast-row { display: flex; gap: 8px; flex-wrap: wrap }
.toast {
  padding: 12px 16px; border-radius: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
}
.toast--ink { background: var(--ink); color: #fff }
.toast--warn { background: var(--yellow); color: var(--ink) }
.toast--err { background: #b3001b; color: #fff }

/* FOUNDATIONS ============================================= */
.spacing-list { display: flex; flex-direction: column; gap: 12px }
.spacing-row {
  display: grid; grid-template-columns: 80px 80px 1fr;
  align-items: center; gap: 16px;
  font-size: 14px; font-weight: 500;
}
.spacing-bar { height: 10px; background: var(--purple); border-radius: 999px }

.radius-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.radius-tile {
  aspect-ratio: 1; background: var(--purple-3);
  padding: 16px;
  display: flex; align-items: flex-end;
  font-size: 13px; font-weight: 500; color: var(--ink);
}

.elev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 16px }
.elev-tile {
  aspect-ratio: 1.2; background: #fff; border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 12px; font-weight: 500;
}
.elev-1 { box-shadow: 0 1px 1px rgba(0,0,0,.03), 0 0 0 1px rgba(33,37,41,.04) }
.elev-2 { box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 0 0 1px rgba(33,37,41,.05) }
.elev-3 { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(33,37,41,.05) }
.elev-4 { box-shadow: 0 24px 64px rgba(0,0,0,.10), 0 0 0 1px rgba(33,37,41,.06) }

.motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }

.bp-table { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid var(--line) }
.bp-row {
  display: grid; grid-template-columns: 60px 140px 1fr 60px 60px;
  gap: 16px; align-items: center;
  padding: 12px 0; font-size: 14px;
}
.bp-row + .bp-row { border-top: 1px solid var(--line) }
.bp-row code {
  background: var(--bg-2); padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-family: inherit; font-weight: 500;
}

/* ANALYTICS =============================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 500px) { .kpi-grid { grid-template-columns: 1fr } }

.kpi-tile {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.kpi-tile-head { display: flex; justify-content: space-between; align-items: center }
.kpi-tile-label { font-size: 13px; font-weight: 500; color: var(--ink-2) }
.kpi-tile-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.kpi-tile-trend--up { background: #e8f5ec; color: #1a7f3a }
.kpi-tile-trend--down { background: #fdebee; color: #b3001b }
.kpi-tile-v {
  font-size: 32px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-tile-spark { width: 100%; height: 44px; display: block }
.kpi-tile-spark .area { fill: var(--purple-3) }
.kpi-tile-spark .line { stroke: var(--purple); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round }

.chart-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px }
.chart-h-info { display: flex; flex-direction: column; gap: 2px }
.chart-h-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em }
.chart-h-sub { font-size: 13px; color: var(--mute); margin-top: 4px }
.chart-h-value { margin-top: 12px; display: flex; align-items: baseline; gap: 8px }
.chart-h-value strong { font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums }
.delta-up { color: #1a7f3a; font-weight: 500; font-size: 13px }
.delta-down { color: #b3001b; font-weight: 500; font-size: 13px }

.chart-svg { width: 100%; height: 200px; display: block }
.chart-svg .grid line { stroke: var(--line); stroke-dasharray: 2 4 }
.chart-svg .area { fill: var(--purple-3) }
.chart-svg .line { stroke: var(--purple); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round }
.chart-svg .point { fill: #fff; stroke: var(--purple); stroke-width: 2 }
.chart-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums }

.seg-control { display: inline-flex; background: var(--bg-2); padding: 2px; border-radius: 9px }
.seg-control button {
  padding: 6px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: transparent;
}
.seg-control button.is-on { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.08) }

.bar-chart {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px; align-items: end; height: 160px;
}
.bar { background: var(--purple-3); border-radius: 6px 6px 0 0; position: relative; transition: background .15s }
.bar:hover { background: var(--purple-2) }
.bar--active { background: var(--purple) }
.bar-label {
  position: absolute; top: 100%; left: 0; right: 0;
  text-align: center; margin-top: 8px;
  font-size: 11px; color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.bar--active .bar-label { color: var(--ink); font-weight: 500 }
.bar-foot {
  margin-top: 56px; padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.bar-peak-v { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }

.funnel { display: flex; flex-direction: column; gap: 6px }
.funnel-stage {
  padding: 12px 14px; border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 500;
  flex-wrap: nowrap;
}
.funnel-stage > span:last-child {
  display: inline-flex; gap: 6px; align-items: baseline; flex: 0 0 auto;
  white-space: nowrap;
}
.funnel-stage-pct { opacity: .7; font-variant-numeric: tabular-nums }
.funnel-stage-val { font-variant-numeric: tabular-nums }
.funnel-1 { background: var(--purple); color: #fff; width: 100% }
.funnel-2 { background: rgba(137,66,254,.7); color: #fff; width: 92% }
.funnel-3 { background: rgba(137,66,254,.45); color: var(--ink); width: 78% }
.funnel-4 { background: rgba(137,66,254,.25); color: var(--ink); width: 55% }
.funnel-5 { background: rgba(137,66,254,.15); color: var(--ink); width: 28% }

.activity-feed { display: flex; flex-direction: column }
.activity-item { display: flex; gap: 12px; padding: 12px 0 }
.activity-item + .activity-item { border-top: 1px solid var(--line) }
.activity-icon-box {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.activity-icon--green { background: #e8f5ec }
.activity-icon--red { background: #fdebee }
.activity-icon--warn { background: #fff6cf }
.activity-icon--accent { background: var(--purple-3) }
.activity-body { flex: 1; min-width: 0 }
.activity-title { font-size: 14px; font-weight: 500; color: var(--ink) }
.activity-meta { font-size: 13px; color: var(--mute); margin-top: 2px }
.activity-time {
  font-size: 13px; color: var(--mute);
  flex: 0 0 auto; margin-top: 9px;
  font-variant-numeric: tabular-nums;
}

.data-table-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px }
.data-table-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px }
.data-table th {
  text-align: left; padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
}
.data-table th:first-child { padding-left: 0 }
.data-table th:last-child { padding-right: 0; text-align: right }
.data-table td {
  padding: 12px; border-bottom: 1px solid var(--bg-2);
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: 0 }
.data-table td:first-child { padding-left: 0; font-weight: 500 }
.data-table td:last-child { padding-right: 0; text-align: right; font-weight: 500 }
.source { display: inline-flex; align-items: center; gap: 10px }
.source-favicon {
  width: 20px; height: 20px;
  background: var(--purple-3); color: var(--ink);
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
}
.trend-up { color: #1a7f3a }
.trend-down { color: #b3001b }

/* OVERLAYS — DIALOG / SHEET ============================== */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(33,37,41,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
}
.dialog-backdrop[hidden] { display: none }
.dialog {
  background: #fff; border-radius: 22px;
  padding: 24px;
  max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  animation: dialog-in .28s cubic-bezier(.4,0,.2,1);
}
/* Sub.22: широкая модалка для multi-step wizard'ов (create-widget). 720px влезает
   на любой ноутбук-экран; max-height: 90vh + overflow-y чтобы scan-step с прогрессом
   и step4 с embed-snippet не вылезали при низком viewport (например 13" MacBook). */
.dialog--wide { max-width: 720px; max-height: 90vh; overflow-y: auto }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.98) }
  to { opacity: 1; transform: translateY(0) scale(1) }
}
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px }
.dialog-h { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 0 }
.dialog-body { color: var(--ink-2); margin: 0 0 24px; font-size: 15px; line-height: 1.55 }
.dialog-foot { display: flex; gap: 8px; justify-content: flex-end }
.dialog-close {
  padding: 0; width: 28px; height: 28px;
  border-radius: 50%; background: none; cursor: pointer;
  color: var(--ink); font-size: 22px; line-height: 1;
  display: grid; place-items: center;
}
.dialog-close:hover { background: var(--bg-2) }

/* ONBOARDING WIZARD ======================================
   Sub.15+22: 4-step state machine для создания виджета.
   Используется и на standalone странице /lk/onboarding/, и в модалке
   /lk/widgets/?create=1. Поэтому жёстко в kit (был дублирован inline). */
.ob-steps {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 32px; justify-content: center;
}
.ob-step {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; color: var(--mute);
  background: var(--bg-2);
}
.ob-step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--mute);
  font-size: 11px; font-weight: 600;
}
.ob-step.is-active { background: var(--purple-3); color: var(--ink); font-weight: 500 }
.ob-step.is-active .num { background: var(--purple); color: #fff }
.ob-step.is-done { background: var(--safe-2); color: var(--safe-text) }
.ob-step.is-done .num { background: var(--safe); color: #fff }
.ob-step.is-done .num::after { content: '✓'; font-size: 12px }
.ob-step.is-done .num-text { display: none }
.ob-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 32px;
  max-width: 640px; margin: 0 auto;
}
.ob-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px }
.ob-card .lead { color: var(--mute); margin: 0 0 24px; font-size: 14px }
/* Sub.22: в модалке max-width 640px не нужен (.dialog--wide уже 720px),
   убираем границу+padding card'a — модалка сама даёт фон. */
.dialog .ob-card { background: transparent; border: 0; padding: 0; max-width: none }
.ob-progress {
  height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden;
  margin: 24px 0;
}
.ob-progress-bar {
  height: 100%; background: var(--purple); transition: width .4s;
  width: 0;
}
.ob-progress-log { font-size: 13px; color: var(--mute); line-height: 1.7 }
.ob-progress-log .done { color: var(--safe-text) }
.ob-facts {
  background: var(--bg-2); border-radius: 10px; padding: 14px 18px;
  margin-bottom: 20px; font-size: 13px; line-height: 1.7;
}
.ob-facts strong { color: var(--ink) }
.ob-facts .ok { color: var(--safe-text) }
.ob-facts .miss { color: var(--danger-text) }
.ob-doc-list {
  list-style: none; padding: 0; margin: 16px 0;
  display: grid; gap: 6px;
}
.ob-doc-list li {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
}
.ob-doc-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple); flex-shrink: 0;
}
.ob-snippet-box {
  background: var(--ink); color: #fff; border-radius: 10px;
  padding: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  overflow-x: auto; word-break: break-all; white-space: pre-wrap;
  margin: 12px 0;
}
.ob-features {
  background: var(--safe-2); border-radius: 10px; padding: 16px 20px;
  margin-top: 24px;
}
.ob-features strong { color: var(--safe-text); display: block; margin-bottom: 6px }
.ob-features ul { padding-left: 20px; margin: 0; font-size: 13px; line-height: 1.7; color: var(--safe-text) }

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(33,37,41,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 99;
}
.sheet-backdrop[hidden] { display: none }
.sheet {
  position: fixed; top: 0; right: 0;
  height: 100vh; width: 420px; max-width: 90vw;
  background: #fff;
  border-left: 1px solid var(--line);
  z-index: 100;
  display: flex; flex-direction: column;
  animation: sheet-in .3s cubic-bezier(.4,0,.2,1);
}
.sheet[hidden] { display: none }
@keyframes sheet-in {
  from { transform: translateX(100%) }
  to { transform: translateX(0) }
}
.sheet-head { padding: 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start }
.sheet-body { padding: 24px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 16px }
.sheet-foot { padding: 24px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end }

/* TOOLTIP & HOVERCARD ===================================== */
.tip { position: relative; display: inline-block }
.tip-text {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: #fff;
  padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 60;
}
.tip:hover .tip-text, .tip:focus-within .tip-text {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

.hcard { position: relative; display: inline-block }
.hcard-trigger {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer; font-weight: 500;
}
.hcard-pop {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  opacity: 0; pointer-events: none;
  transition: opacity .28s, transform .28s;
  z-index: 55;
}
.hcard:hover .hcard-pop, .hcard:focus-within .hcard-pop {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: auto; transition-delay: 200ms;
}
.hcard-pop-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px }
.hcard-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--purple-3); color: var(--ink);
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
  flex: 0 0 auto;
}

/* MENU & COMBOBOX ======================================== */
.menu { position: relative; display: inline-block }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 6px;
  z-index: 50;
  display: none;
}
.menu.is-open .menu-pop { display: block }
.menu-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--bg-2) }
.menu-item--danger { color: #b3001b }
.menu-item--danger:hover { background: #fdebee }
.menu-shortcut { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums }
.menu-divider { height: 1px; background: var(--line); margin: 4px 0 }

.combobox { position: relative }
.combobox-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 6px; max-height: 200px; overflow: auto;
  z-index: 10;
  display: none;
}
.combobox.is-open .combobox-pop { display: block }
.combobox-item {
  width: 100%; padding: 8px 12px;
  border-radius: 8px; background: none; border: 0;
  font-family: inherit; font-size: 14px;
  text-align: left; cursor: pointer; color: var(--ink);
}
.combobox-item:hover { background: var(--bg-2) }
.combobox-item.is-selected { background: var(--purple-3) }

/* CALENDAR =============================================== */
.calendar { display: inline-block; user-select: none }
.calendar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.calendar-month { font-size: 15px; font-weight: 600 }
.calendar-nav { display: flex; gap: 4px }
.calendar-nav button {
  width: 28px; height: 28px; padding: 0;
  border-radius: 8px;
  display: grid; place-items: center;
}
.calendar-nav button:hover { background: var(--bg-2) }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px }
.calendar-week { text-align: center; font-size: 11px; color: var(--mute); padding: 6px 0; font-weight: 500 }
.calendar-day {
  width: 36px; height: 36px;
  border-radius: 8px;
  font-family: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink); position: relative;
}
.calendar-day:hover { background: var(--bg-2) }
.calendar-day--muted { color: #c4cad3 }
.calendar-day--today { font-weight: 600 }
.calendar-day--today::after {
  content: ""; position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; background: var(--purple); border-radius: 50%;
}
.calendar-day--in-range { background: var(--purple-3) }
.calendar-day--selected { background: var(--ink); color: #fff; font-weight: 500 }
.calendar-day--selected::after { background: #fff }

/* PROGRESS =============================================== */
.progress {
  height: 6px; background: var(--line);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.progress-bar { height: 100%; background: var(--purple); border-radius: inherit; transition: width .3s }
.progress--indeterm .progress-bar {
  width: 30%; position: absolute;
  animation: indeterm 1.5s infinite cubic-bezier(.4,0,.2,1);
}
@keyframes indeterm { 0%{left:-30%} 100%{left:100%} }

.progress-ring-wrap { position: relative; display: inline-grid; place-items: center }
.progress-ring { width: 60px; height: 60px; transform: rotate(-90deg) }
.progress-ring .track { fill: none; stroke: var(--line); stroke-width: 4 }
.progress-ring .bar { fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round }
.progress-ring-label { position: absolute; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums }

/* PAGINATION & BREADCRUMBS ============================== */
.pagination { display: inline-flex; gap: 2px }
.pagination button {
  width: 32px; height: 32px; padding: 0;
  border-radius: 8px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink);
  display: inline-grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.pagination button:hover { background: var(--bg-2) }
.pagination button.is-active { background: var(--ink); color: #fff }
.pagination-gap { color: var(--mute); padding: 0 6px; align-self: center }

.breadcrumbs {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--mute);
}
.breadcrumbs a { color: var(--mute); padding: 4px 6px; border-radius: 4px }
.breadcrumbs a:hover { background: var(--bg-2); color: var(--ink) }
.breadcrumbs-sep { color: #c4cad3 }
.breadcrumbs .is-current { color: var(--ink); padding: 4px 6px; font-weight: 500 }

.slider { width: 100%; accent-color: var(--purple) }

/* MOTION ================================================= */
@keyframes fadeup { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation: fadeup .8s cubic-bezier(.4,0,.2,1) both }
.motion-lift {
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
}
.motion-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(33,37,41,.05);
}

/* APPLICATIONS ========================================== */
.phone-frame {
  width: 100%; max-width: 280px; margin: 0 auto;
  aspect-ratio: 9/19;
  border-radius: 44px; padding: 32px 24px;
  border: 8px solid var(--ink);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -20px rgba(33,37,41,.15);
  background: #fff;
}
.phone-frame--dark { background: var(--ink); color: #fff }
.phone-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
@media (max-width: 800px) { .phone-app-grid { grid-template-columns: 1fr } }
.phone-progress-ring {
  width: 140px; height: 140px; margin: 32px auto 0;
  border-radius: 50%; background: var(--purple-3);
  display: grid; place-items: center;
  font-size: 32px; font-weight: 600;
  letter-spacing: -.03em; color: var(--purple);
}

.email-frame { background: var(--bg-2); padding: 40px; border-radius: 20px }
.email-card { background: #fff; max-width: 560px; margin: 0 auto; padding: 32px; border-radius: 16px; border: 1px solid var(--line) }
.email-progress { background: var(--bg-2); padding: 16px; border-radius: 12px; margin-bottom: 24px }

.empty { text-align: center; padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg) }
.empty-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 16px; background: var(--purple-3); color: var(--purple);
  display: grid; place-items: center;
}
.empty-title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 8px }

/* SKELETON =============================================== */
.sk {
  background: linear-gradient(90deg, var(--bg-2) 0%, #fafafb 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: sk-shim 1.5s infinite linear;
  display: block;
}
.sk--avatar { width: 40px; height: 40px; border-radius: 50% }
.sk--title { height: 16px; width: 60%; margin-bottom: 8px }
.sk--text { height: 12px; width: 100%; margin-bottom: 6px }
.sk--box { height: 60px }
@keyframes sk-shim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; background: var(--bg-2) } }

/* PRICING =============================================== */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr } }
.tier {
  background: #fff; border: 1px solid var(--line);
  border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.tier--featured { background: var(--ink); color: #fff; border-color: var(--ink) }
.tier-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
}
.tier--featured .tier-name { color: var(--purple-2) }
.tier-badge {
  background: var(--purple); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
}
.tier-price { display: flex; align-items: baseline; gap: 8px }
.tier-price strong {
  font-size: 56px; font-weight: 600;
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier-price small { font-size: 13px; color: var(--mute) }
.tier--featured .tier-price small { color: rgba(255,255,255,.5) }
.tier-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 }
.tier--featured .tier-desc { color: rgba(255,255,255,.7) }
.tier-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px }
.tier-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px }
.tier-check { color: var(--purple); flex: 0 0 auto; margin-top: 2px }
.tier--featured .tier-check { color: var(--yellow) }
.tier-cta-wrap { margin-top: auto }
.tier .btn-ink, .tier .btn-ghost { width: 100%; justify-content: center }
.tier--featured .btn-ghost { background: #fff; color: var(--ink); border: 0 }

/* FAQ ==================================================== */
.faq-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden }
.faq-item + .faq-item { border-top: 1px solid var(--line) }
.faq-toggle {
  width: 100%; padding: 20px 24px;
  text-align: left; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.faq-plus { font-size: 24px; color: var(--mute); line-height: 1; transition: transform .2s }
.faq-item.is-open .faq-plus { transform: rotate(45deg) }
.faq-body { padding: 0 24px 20px; font-size: 15px; line-height: 1.55; color: var(--ink-2); display: none }
.faq-item.is-open .faq-body { display: block }

/* TONE OF VOICE ========================================= */
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
@media (max-width: 700px) { .voice-grid { grid-template-columns: 1fr } }
.voice-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; height: 100% }
.voice-num { font-size: 13px; color: var(--mute); font-weight: 500; letter-spacing: .06em }
.voice-name { font-size: 28px; font-weight: 600; letter-spacing: -.025em; margin: 12px 0 12px }

.do-pair { display: flex; gap: 10px; padding: 20px; border-radius: 16px; height: 100% }
.do-pair--do { background: #e8f5ec }
.do-pair--dont { background: #fdebee }
.do-pair--do span { font-size: 15px; font-weight: 500; color: var(--ink) }
.do-pair--dont span { font-size: 15px; color: var(--ink-2); text-decoration: line-through }

.glossary { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.glossary-row {
  display: grid; grid-template-columns: 1fr 24px 1fr;
  align-items: center; padding: 16px 24px; gap: 16px;
}
.glossary-row + .glossary-row { border-top: 1px solid var(--line) }
.glossary-from { font-size: 14px; color: var(--mute); text-decoration: line-through }
.glossary-to { font-size: 14px; color: var(--ink); font-weight: 500 }

/* WEB MOCK ============================================== */
.webmock {
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(33,37,41,.18), 0 0 0 1px var(--line);
  background: #fff;
}
.webmock-chrome {
  background: var(--bg-2);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.webmock-dots { display: flex; gap: 6px }
.webmock-dot { width: 11px; height: 11px; border-radius: 50%; background: #c4cad3 }
.webmock-url {
  flex: 1; background: #fff;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; color: var(--mute);
}
.webmock-body { padding: 60px 40px; min-height: 360px }
.webmock-input-row {
  display: flex; gap: 8px; max-width: 560px; margin: 24px auto 0;
}
.webmock-input {
  flex: 1; padding: 16px 20px;
  border-radius: 999px; border: 1px solid var(--line);
  font-size: 16px; font-family: inherit;
  background: var(--bg-2);
}

/* CARD BLOCKS (Section 04) ============================== */
.giant-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 600; letter-spacing: -.06em;
  color: var(--ink); pointer-events: none;
}
.cards-stage { position: relative; height: 540px }
.float-card {
  position: absolute;
  border-radius: 24px; padding: 24px;
  box-shadow: 0 24px 60px -20px rgba(33,37,41,.15);
}
.float-card--scan { top: 0; left: 0; width: 360px; background: var(--purple-3) }
.float-card--stat { top: 40px; right: 80px; width: 320px; background: #fff; border: 1px solid var(--line) }
.float-card--ink { top: 280px; left: 100px; width: 320px; background: var(--ink); color: #fff }
.float-card--yellow { top: 320px; right: 0; width: 280px; background: var(--yellow); color: var(--ink) }
.scan-bars { margin-top: 20px; display: flex; gap: 4px; align-items: flex-end }
.scan-bar { width: 8px; border-radius: 2px; background: var(--purple) }
.scan-bar--muted { background: rgba(137,66,254,.4) }

/* Card Blocks hero wrapper — relative-контейнер для giant-word
   (absolute inset:0) и cards-stage (position:absolute children).
   Высота 560px чтобы giant-word растянулся на всю композицию. */
.cards-hero { position: relative; min-height: 560px }

/* Card Blocks — мобильный адаптив (≤900px).
   Pattern исходно desktop-only из brand-case. На мобиле:
   - .cards-hero сбрасывает min-height (не нужна пустота)
   - .cards-stage становится flex column (карточки в столбик)
   - .float-card перестают быть absolute, ширина 100%
   - .giant-word уменьшается и встаёт над карточками inline (не фон) */
@media (max-width: 900px) {
  .cards-hero { min-height: auto }
  .cards-stage { position: static; height: auto; display: flex; flex-direction: column; gap: 16px }
  .float-card { position: static; width: 100%; max-width: 100%; top: auto; left: auto; right: auto }
  .giant-word {
    position: static;
    inset: auto;
    font-size: clamp(48px, 12vw, 96px);
    margin-bottom: 16px;
    display: block;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .float-card { padding: 20px; border-radius: 20px }
  .cb-scan-h, .cb-ink-h { font-size: 18px }
  .cb-stat-num { font-size: 56px }
  .cb-yellow-num { font-size: 44px }
  .scan-bars { gap: 3px }
  .scan-bar { width: 6px }
}

/* SOCIAL MEDIA ========================================== */
.sm-card {
  border-radius: 24px; padding: 28px;
  display: flex; flex-direction: column;
  min-height: 360px;
  position: relative; overflow: hidden;
}
.sm-card--white { background: #fff; border: 1px solid var(--line) }
.sm-card--purple { background: var(--purple); color: #fff }
.sm-card--yellow { background: var(--yellow); color: var(--ink) }
.sm-h {
  font-size: 32px; font-weight: 600;
  letter-spacing: -.035em; line-height: 1.05;
  margin: 28px 0 0;
}
.sm-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center }
.sm-card-meta { display: flex; justify-content: space-between }
/* ACCESSIBILITY ========================================= */
/* Focus ring via box-shadow — perfectly follows border-radius cross-browser.
   Soft 22%-alpha glow keeps the shape (rounded stays rounded), purple identifies focus. */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus { outline: none }
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(137, 66, 254, .22);
}
/* When the element already has a box-shadow (e.g. elevated card), append the ring. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(137, 66, 254, .18);
}
/* Bare inputs inside focus-aware containers — suppress inner rectangle ring,
   let the container handle focus highlighting via :focus-within below. */
.wm-input:focus-visible,
.scan-input-url:focus-visible,
.search input:focus-visible {
  box-shadow: none;
}
/* Container-level focus rings — parity with .scan-input:focus-within. */
.wm-input-row:focus-within {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(137, 66, 254, .18);
}
.search:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(137, 66, 254, .18);
}
/* Scan-row в /lk/: чтобы row был кликабельным с visual feedback. */
.lk-scan-row { cursor: pointer; transition: background .15s }
.lk-scan-row:hover { background: var(--bg-2) }

/* Inverse button для tёмных поверхностей (card --ink / --purple).
   Kit-расширение: bg transparent, text/border белые с alpha. */
.btn-ghost--on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
.btn-ghost--on-dark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5) }

/* Cookie banner — bottom-fixed strip с .card --ink внутри. Только layout,
   цвета/border-radius/padding наследуем от kit'овой .card --ink. */
.gh-cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 9000;
  max-width: 920px; margin: 0 auto;
}
.gh-cookie-card {
  display: flex; gap: 24px; align-items: center;
  flex-wrap: wrap; padding: 20px 24px;
}
.gh-cookie-text { flex: 1; min-width: 280px }
.gh-cookie-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 600px) {
  .gh-cookie-banner { left: 8px; right: 8px; bottom: 8px }
  .gh-cookie-card { padding: 16px 18px; gap: 14px }
  /* На mobile — кнопки одна под другой во всю ширину.
     Иначе wraps в 2 ряда + tight wrap текста («Только необходимые») */
  .gh-cookie-actions {
    width: 100%; flex-direction: column; gap: 8px;
  }
  .gh-cookie-actions > * {
    width: 100%; justify-content: center; padding: 12px 16px;
  }
}
/* Расширение kit — compact icon-only button (для urna в table row, action в card).
   Kit .btn-ghost имеет нормальный padding, не подходит для inline-в-строке.
   Цвет наследуется от mute (var --mute), на hover становится ink. */
.icon-btn {
  background: none; border: 0; padding: 4px;
  cursor: pointer; color: var(--mute);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--ink); background: var(--bg-2) }

/* Scan-state box (loading / error) для /lk/scans/{ulid}/ — центрирование
   контента + увеличенный padding (48px vs дефолтные 28px у .card). */
.scan-state-box {
  padding: 48px;
  text-align: center;
}

/* CSS Grid gotcha: child <main> внутри `grid-template-columns: 240px 1fr`
   по умолчанию имеет min-width: auto → не shrink'ается ниже intrinsic
   content width → правая колонка вылезает за viewport если содержимое
   широкое (TLDR card--ink, KPI grid 4-up, table со scroll).
   Все LK-страницы используют шаблон 240px sidebar + main → fix applied
   inline через minmax(0, 1fr) в grid-template-columns. На случай если
   где-то забыли — этот универсальный fallback. */
.section main { min-width: 0 }

/* .ai-pre — единственный kit-extension class в отчётах. Используется и для
   AI-сгенерированного code snippet и для multi-line security recommendations.
   Зачем нужен: scrollable <pre> с max-height (без него длинный JSON-LD /
   nginx-config растягивает страницу на километры) + тонкий webkit-scrollbar
   styling который нельзя inline. Кит-классы для этого паттерна не предлагают.
   Используется поверх .card --ink action-compact (родитель даёт тёмный фон,
   .ai-pre — только code-block внутри). */
.ai-pre {
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px; line-height: 1.55;
  color: #fff;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;  /* wrap long lines — recommendation чаще plain text */
  word-break: break-word;
}
.ai-pre::-webkit-scrollbar { width: 6px; height: 6px }
.ai-pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 999px }
.ai-pre::-webkit-scrollbar-track { background: transparent }


/* Phase 5.5 LK tabs + type badge — переведены 2026-05-23 на canonical kit:
   .tabs/.tab (frontend/snippets/tabs.html) + .tag --variant
   (frontend/snippets/tag.html). Свои классы lk-type-tab*/lk-type-badge*
   удалены. */

/* Расширение kit .card --white — интерактивный radio-картинка.
   Используется на /lk/scan/ для выбора scan_type. Базовая .card даёт фон+border,
   .radio-card добавляет :has(input:checked) → фиолетовый border + purple-3 фон,
   compact padding и cursor: pointer. */
.radio-card {
  position: relative; cursor: pointer;
  padding: 16px;
  border-width: 2px;
  transition: border-color .15s, background .15s;
}
.radio-card:hover { border-color: var(--purple) }
.radio-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.radio-card:has(input:checked) {
  border-color: var(--purple); background: var(--purple-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
.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;
}
@media (forced-colors: active) {
  .btn-ink, .btn-ghost, .card, .kpi-tile, .chart-card { border: 1px solid CanvasText }
}


/* CARD BLOCKS — refined content classes ===================== */
.cb-head { display: flex; justify-content: space-between; align-items: center }
.cb-scan-h { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 18px 0 8px; color: var(--ink); line-height: 1.2 }
.cb-scan-desc { color: var(--ink-2) }
.cb-stat-row { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between }
.cb-stat-num { font-size: 72px; font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums }
.cb-stat-pills { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto }
.check-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  font-family: inherit;
  /* «Не проверено» / «Предупреждение» — длинные строки, не должны переноситься */
  white-space: nowrap;
  flex-shrink: 0;
}
.check-pill--ok   { background: #e8f5ec; color: #1a7f3a }
.check-pill--warn { background: #fff6cf; color: #8a6d00 }
.check-pill--risk { background: #fdebee; color: #b3001b }
.cb-stat-desc { margin-top: 14px; font-size: 14px; color: var(--ink-2); max-width: 220px; line-height: 1.4 }

.cb-ink-chrome { display: flex; justify-content: space-between; align-items: center }
.cb-ink-brand  { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: rgba(255,255,255,0.08); border-radius: 999px }
.cb-mini-logo {
  width: 20px; height: 20px; background: var(--purple); color: #fff;
  border-radius: 5px; display: grid; place-items: center;
  font-weight: 600; font-size: 12px; letter-spacing: -.06em;
}
.cb-ink-brand-name { font-size: 13px; font-weight: 500 }
.cb-ink-controls { display: flex; gap: 6px; align-items: center }
.pill--on-ink {
  background: rgba(255,255,255,0.10);
  color: #fff; border: 0;
  padding: 5px 10px; font-size: 12px;
}
.cb-ink-h { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 20px 0 6px; color: #fff }
.cb-ink-desc { color: rgba(255,255,255,.7); margin: 0; font-size: 14px; line-height: 1.5 }

.cb-yellow-avatars { display: flex; align-items: center }
.cb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #fff;
  display: grid; place-items: center;
  background: var(--purple-2); color: var(--ink);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0;
}
.cb-avatar + .cb-avatar { margin-left: -10px }
.cb-avatar--purple { background: var(--purple); color: #fff }
.cb-avatar--ink    { background: var(--ink); color: #fff }
.cb-yellow-num { font-size: 56px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: 18px; font-variant-numeric: tabular-nums }
.cb-yellow-desc { margin-top: 8px; font-size: 14px; line-height: 1.4 }

/* WEB MOCK v2 — full landing layout ========================= */
.webmock--big { padding: 0 }
.wm-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 8px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 24px; flex-wrap: wrap;
}
/* Mascot обёрнут в dark squircle (как brand-mark в Chrome extension) */
.wm-nav-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  transition: transform .15s;
}
.wm-nav-mark:hover { transform: translateY(-1px) }
.wm-nav-mark .mascot {
  color: #fff; font-size: 18px;
  transform: translateY(-4%); line-height: .95;
}

/* ЛК sidebar — единый паттерн для всех /lk/* страниц.
   До этого 14 файлов имели идентичный inline-стиль для <aside> + nav-links.
   Канонический паттерн (см. lk/index.html):
     <aside class="lk-sidebar">
       <a href="/lk/" class="wm-nav-mark" aria-label="Дашборд">...</a>
       <a href="/lk/" class="lk-sidebar-link is-active"><i ...>...</a>
       <a href="/lk/widgets/" class="lk-sidebar-link"><i ...>...</a>
       ...
       <div class="lk-aside-foot">...</div>
     </aside>
*/
.lk-sidebar {
  background: #fff; border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 480px;
}
.lk-sidebar > .wm-nav-mark { margin-bottom: 20px }
.lk-sidebar-link {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 8px;
  color: var(--ink-2); font-size: 14px;
  text-decoration: none;
  transition: background .15s;
}
.lk-sidebar-link:hover { background: var(--bg-2) }
.lk-sidebar-link.is-active {
  background: var(--purple-3);
  color: var(--ink);
  font-weight: 500;
}
.wm-nav-links {
  display: flex; gap: 28px;
  flex: 1; justify-content: center;
}
.wm-nav-links a {
  font-size: 14px; color: var(--mute);
  font-weight: 400; text-decoration: none;
  transition: color .15s;
}
.wm-nav-links a:hover { color: var(--ink) }
.wm-nav-links a.is-active { color: var(--ink); font-weight: 500 }
.wm-nav-cta { display: flex; gap: 8px }
.wm-nav-cta .btn-ink, .wm-nav-cta .btn-ghost { padding: 10px 18px; font-size: 14px }
.wm-nav-cta .btn-ghost { border-color: transparent }

.wm-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  padding: 56px 28px;
}
@media (max-width: 900px) { .wm-hero { grid-template-columns: 1fr } }
.wm-h {
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 600; line-height: 1; letter-spacing: -.045em;
  margin: 24px 0 0;
}
.wm-lede { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.55; color: var(--ink-2) }
.wm-input-row {
  display: flex; gap: 8px; margin-top: 32px; max-width: 520px;
  background: var(--bg-2); border-radius: 999px; padding: 6px 6px 6px 22px;
  align-items: center;
}
.wm-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0;
}
.wm-helper { margin-top: 12px; color: var(--mute); font-size: 13px }

.wm-scan-card {
  background: var(--ink); color: #fff;
  border-radius: 28px; padding: 28px;
  min-height: 460px;
  display: flex; flex-direction: column;
}
.wm-scan-head { display: flex; justify-content: space-between; align-items: center }
.wm-scan-counter {
  font-size: clamp(80px, 11vw, 140px);
  font-weight: 600; letter-spacing: -.05em; line-height: 1;
  margin: 24px 0 12px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.wm-scan-num { color: #fff }
.wm-scan-pct { color: rgba(255,255,255,.4); font-size: .5em; margin-left: 6px }
.wm-scan-prompt { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5; margin: 0 0 20px }
.wm-scan-divider { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 0 0 14px }
.wm-scan-list { display: flex; flex-direction: column; gap: 4px }
.wm-scan-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  font-size: 13px; color: rgba(255,255,255,.7);
  transition: background .2s, color .2s;
}
.wm-scan-item span { color: rgba(255,255,255,.3); transition: color .2s }
/* Активный — пока чекается, лёгкий пульс через увеличенную яркость */
.wm-scan-item.is-active {
  background: rgba(137, 66, 254, .15);
  color: rgba(255,255,255,.9);
}
.wm-scan-item.is-active span:last-child { color: var(--purple) }
/* Завершён — зелёная галочка, текст ярче */
.wm-scan-item.is-done {
  background: rgba(46, 196, 132, .12);
  color: rgba(255,255,255,.95);
}
.wm-scan-item.is-done span:last-child { color: #2EC484; font-weight: 600 }

/* Расширение kit .progress-bar — состояние «is-done» (зелёный после завершения).
   Сам .progress / .progress-bar — из kit (см. snippets/progress.html). */
.progress-bar.is-done { background: #2EC484 }

.wm-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 36px 28px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .wm-kpi { grid-template-columns: repeat(2, 1fr); gap: 24px } }
.wm-kpi-v {
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wm-kpi-l { margin-top: 10px; color: var(--ink-2); font-size: 14px }

/* REPORT CARDS ============================================== */
.report-card {
  border-radius: 28px; padding: 28px;
  height: 100%;
  display: flex; flex-direction: column; gap: 16px;
}
.report-card--grey { background: var(--bg-2) }
.report-card--purple-2 { background: var(--purple-2); color: var(--ink) }
.report-card--yellow { background: var(--yellow); color: var(--ink) }
.report-card-head { display: flex; justify-content: space-between; align-items: center }
.report-badge {
  background: var(--ink); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.report-checklist { display: flex; flex-direction: column; gap: 8px }
/* 2-колоночный вариант для admin-view чек-листа — экономит вертикаль.
   Items наследуют все стили .report-check, только меняется layout родителя. */
.report-checklist.checklist-2col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
@media (max-width: 800px) {
  .report-checklist.checklist-2col { grid-template-columns: 1fr }
}
.report-check {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: #fff;
  border-radius: 14px;
  font-size: 14px; color: var(--ink);
}
.report-priorities { display: flex; flex-direction: column; gap: 10px }
.report-priority {
  background: #fff;
  border-radius: 14px; padding: 14px 16px;
}
.report-priority strong { display: block; font-size: 13px; margin-bottom: 4px; font-variant-numeric: tabular-nums }
.report-priority span { font-size: 14px; color: var(--ink); display: block; line-height: 1.4 }
.report-code {
  background: var(--ink); color: #fff;
  padding: 16px; border-radius: 14px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
}
.report-code .code-tag { color: #ffc66d }
.report-code .code-attr { color: #aeb8ff }
.report-code .code-str { color: #88e0a5 }
.report-code .code-comm { color: rgba(255,255,255,.4) }
.report-card .btn-ink { margin-top: auto; width: 100%; justify-content: center }


/* SOCIAL — additional formats =============================== */
/* Story (9:16) */
.sm-card--story {
  background: var(--purple);
  color: #fff;
  aspect-ratio: 9/16;
  min-height: 480px;
  padding: 24px;
  display: flex; flex-direction: column;
}
.sm-story-progress {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; margin-bottom: 16px;
}
.sm-story-bar {
  height: 3px; background: rgba(255,255,255,.25); border-radius: 999px;
}
.sm-story-bar--active { background: #fff }
.sm-story-top {
  display: flex; justify-content: space-between; align-items: center;
}
.sm-story-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}

/* Banner (16:9 horizontal) */
.sm-card--banner {
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px;
  min-height: 320px;
}
@media (max-width: 700px) { .sm-card--banner { grid-template-columns: 1fr } }
/* Banner без обводки — для случаев когда блок стоит на фоне страницы
   как самостоятельный hero-блок, а не как карточка с ободом. */
.sm-card--flat { border: none }

/* Bubble stage — центральная большая карточка + 3 анимированных
   круглых бабла вокруг. Используется как альтернатива .sm-banner-grid
   для блоков где хочется визуально выделить главную фичу.
   Stage даёт ~60px paddings по краям чтобы баблы (110x110) встали
   полностью за пределы центра и не наезжали на него. */
.bubble-stage {
  position: relative; min-height: 400px;
  /* compact stage: 320 центр + ~50px по краям для overlap-bubbles.
     min-height ровно «по высоте центра» — баблы прижаты к углам
     карточки, а не висят далеко в свободном пространстве. */
  width: 100%; max-width: 420px;
  margin: 0 auto;
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
}
.bubble-center {
  position: relative; z-index: 2;
  width: 100%; max-width: 320px;
  padding: 24px; border-radius: 24px;
  background: var(--purple-3); color: var(--ink);
}
/* Варианты центральной карточки по аналогии с .float-card--* из brand-case:
   --stat (white + border), --ink (dark), --yellow.
   На ink-фоне переопределяем дефолтные цвета .cb-scan-h / .cb-scan-desc / .tnum. */
.bubble-center--stat   { background: #fff; border: 1px solid var(--line); color: var(--ink) }
.bubble-center--yellow { background: var(--yellow); color: var(--ink) }
.bubble-center--ink    { background: var(--ink); color: #fff }
.bubble-center--ink .cb-scan-h    { color: #fff }
.bubble-center--ink .cb-scan-desc { color: rgba(255,255,255,.7) }
.bubble-center--ink .tnum         { color: rgba(255,255,255,.7) !important }
.bubble-center--ink .scan-bar       { background: var(--yellow) }
.bubble-center--ink .scan-bar--muted { background: rgba(254,215,40,.35) }
/* Bubble — pill-кнопка с иконкой и подписью в строку.
   Шейп как у .btn-ink / .pill из kit (border-radius 999px), но
   с фиксированным фоном (yellow/lavender/ink) и анимацией покачивания.
   Размер по контенту (inline-flex), не задаётся width/height. */
.bubble {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(33,37,41,.25);
  animation: bubble-float 5s ease-in-out infinite;
}
.bubble--yellow   { background: var(--yellow);   color: var(--ink) }
.bubble--purple-2 { background: var(--purple-2); color: var(--ink) }
.bubble--purple   { background: var(--purple);   color: #fff }
.bubble--ink      { background: var(--ink);      color: #fff }
.bubble--white    { background: #fff; color: var(--ink); border: 1px solid var(--line) }
.bubble--tl { top: 0;     left: 0 }
.bubble--tr { top: 0;     right: 0; animation-delay: -1.5s }
.bubble--bl { bottom: 0;  left: 0;  animation-delay: -3s }
.bubble--br { bottom: 0;  right: 0; animation-delay: -4s }
@keyframes bubble-float {
  0%, 100% { transform: translateY(0)    rotate(-2deg) }
  50%      { transform: translateY(-10px) rotate(2deg) }
}
@media (max-width: 700px) {
  /* На мобиле stage сохраняет absolute-баблы, но они вешаются на
     углы центральной карточки (overlapping), а не отлетают в углы
     stage'а. Центральная карточка занимает 100% ширины, баблы
     прижаты к её углам с лёгким нависанием. */
  .bubble-stage {
    min-height: auto; padding: 20px 6px;
  }
  .bubble-center { max-width: 100% }
  .bubble {
    padding: 8px 14px; font-size: 13px;
    animation: bubble-float-mobile 4s ease-in-out infinite;
  }
  /* Углы центральной карточки — баблы наплывают над ней */
  .bubble--tr { top: 8px;    right: 12px;  left: auto; bottom: auto }
  .bubble--bl { bottom: 8px; left: 12px;   top: auto; right: auto }
  .bubble--br { bottom: 8px; right: 12px;  top: auto; left: auto }
}
@keyframes bubble-float-mobile {
  0%, 100% { transform: translateY(0)   rotate(-1deg) }
  50%      { transform: translateY(-4px) rotate(1deg) }
}
.sm-banner-left {
  display: flex; flex-direction: column;
}
.sm-banner-right {
  display: flex; align-items: center;
}
.sm-banner-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; width: 100%;
}
.sm-banner-tile {
  aspect-ratio: 1;
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
}


/* ICON SIZE UTILITIES ====================================== */
[data-lucide]{ display: inline-block; vertical-align: -2px }
.ic-11 { width: 11px; height: 11px }
.ic-12 { width: 12px; height: 12px }
.ic-14 { width: 14px; height: 14px }
.ic-16 { width: 16px; height: 16px }
.ic-18 { width: 18px; height: 18px }
.ic-20 { width: 20px; height: 20px }
.ic-24 { width: 24px; height: 24px }

/* Spin animation для loader-иконок (data-lucide="loader" + class="ic-spin").
   Используется на кнопках в processing-state (Сканируем…, Создаём платёж…).
   prefers-reduced-motion: stop — accessibility. */
@keyframes ic-spin { to { transform: rotate(360deg) } }
.ic-spin { animation: ic-spin .9s linear infinite; transform-origin: center }
@media (prefers-reduced-motion: reduce) {
  .ic-spin { animation: none }
}

/* BUTTON KIT (demo layout — 4 labeled rows) ================ */
.btn-kit {
  padding: var(--s-6);
  display: flex; flex-direction: column;
  gap: 14px;
}
.btn-kit-row {
  display: flex; align-items: center; gap: 12px;
}
.btn-kit-row-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--mute);
  letter-spacing: .04em;
  width: 70px; flex-shrink: 0;
}
.btn-kit-row-items {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* MASCOT ================================================== */
/* Typographic brand character `{"}` — eyes on a face.
   Form variants encoded as text content; colour encoded in --state modifier.
   Glyph map:
     default/neutral → {"}    safe → {"}        scan → {ʹʹ}
     warn → {!}              danger → {ˣˣ}      shock → {°°}
     off → { }               happy → {^^}       curious → {?}     wink → {ˉˈ}      */
.mascot {
  font-family: var(--font-family-base);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .95;
  color: var(--ink);
  display: inline-block;
  white-space: pre;
  user-select: none;
}
.mascot--xs { font-size: 14px }
.mascot--sm { font-size: 18px }
.mascot--md { font-size: 26px }
.mascot--lg { font-size: 48px }
.mascot--xl { font-size: 96px }
.mascot--xxl { font-size: 132px }
.mascot--ink    { color: var(--ink) }
.mascot--scan   { color: var(--purple) }
.mascot--safe   { color: var(--safe) }
.mascot--warn   { color: var(--yellow) }
.mascot--danger { color: var(--danger) }
.mascot--on-dark { color: #fff }

/* EXPRESSIONS LIBRARY ===================================== */
.expressions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.expression-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 10px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  gap: 6px;
  min-height: 110px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.expression-cell.is-active { transform: scale(1.03); box-shadow: var(--e-3) }
/* Mascot inside cell — 44px + optical centering (mass below geometric centre) */
.expression-cell .mascot { font-size: 44px; transform: translateY(-4%) }
.expression-cell-name {
  font-size: 12px; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em;
}
.expression-cell-key {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  color: var(--mute); letter-spacing: .04em;
}
/* Tone tint variants — bg + border + name colour */
.expression-cell--scan   { background: var(--purple-3); border-color: rgba(137,66,254,.16) }
.expression-cell--safe   { background: var(--safe-2);   border-color: rgba(34,160,85,.18) }
.expression-cell--danger { background: var(--danger-2); border-color: rgba(232,72,88,.18) }
.expression-cell--danger .expression-cell-name { color: var(--danger-text) }  /* AA */
.expression-cell--safe   .expression-cell-name { color: var(--safe-text) }    /* AA */
/* Yellow rule — warn cell sits on ink */
.expression-cell--warn { background: var(--ink); border-color: rgba(255,255,255,.06) }
.expression-cell--warn .expression-cell-name { color: #fff }
.expression-cell--warn .expression-cell-key  { color: rgba(255,255,255,.5) }

/* BUTTON — semantic state variants (extend existing .btn-ink) ===== */
.btn-ink--safe {
  background: var(--safe-2);   color: var(--safe-text);  /* WCAG AA 4.99:1 */
  border: 1px solid rgba(34,160,85,.18);
}
.btn-ink--safe:hover  { background: #d8efdc }
.btn-ink--warn {
  background: var(--yellow-3); color: var(--ink);
  border: 1px solid rgba(33,37,41,.08);
}
.btn-ink--warn:hover  { background: var(--yellow-2) }
.btn-ink--danger {
  background: var(--danger-2); color: var(--danger-text); /* WCAG AA 7.15:1 */
  border: 1px solid rgba(232,72,88,.18);
}
.btn-ink--danger:hover { background: #fbd5da }
.btn-ink--purple {
  background: var(--purple); color: #fff;
  border: 0;
}
.btn-ink--purple:hover { background: #6f30e0; transform: translateY(-1px) }
.btn-ink--purple-tint {
  background: var(--purple-3); color: var(--ink);
  border: 0;
}
.btn-ink--purple-tint:hover { background: var(--purple-2) }
.btn-ink--outline {
  background: transparent; color: var(--purple);
  border: 1px solid var(--purple);
}
.btn-ink--outline:hover { background: var(--purple-3) }
.btn-ink--soft {
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ink--soft:hover { background: var(--bg-3) }

/* STATUS PILL ============================================= */
/* Pill with mascot inside. Bigger than .pill — used in scan feeds, headers. */
.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-size: 13px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.status-pill .mascot { font-size: 14px; line-height: .8 }
.status-pill-dots {
  font-family: var(--font-mono);
  display: inline-block; min-width: 18px;
  margin-left: 2px;
}
.status-pill--scan   { background: var(--purple-3); border-color: rgba(137,66,254,.20); color: var(--purple) }
.status-pill--scan .mascot { color: var(--purple) }
.status-pill--safe   { background: var(--safe-2);   border-color: rgba(34,160,85,.18); color: var(--safe-text) }
.status-pill--safe .mascot { color: var(--safe) }
.status-pill--danger { background: var(--danger-2); border-color: rgba(232,72,88,.22); color: var(--danger-text) }
.status-pill--danger .mascot { color: var(--danger) }
/* Yellow rule — warn pill flips to ink surface */
.status-pill--warn   { background: var(--ink); border-color: var(--ink); color: #fff }
.status-pill--warn .mascot { color: var(--yellow) }
/* Emphasised danger — solid red, white text */
.status-pill--emphasized.status-pill--danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.status-pill--emphasized.status-pill--danger .mascot { color: #fff }

/* CODE CHIP =============================================== */
/* Two-column chip: monospace code + label. Used for finding codes (152-ФЗ, GDPR-04). */
.code-chip {
  display: inline-flex; align-items: stretch;
  background: var(--danger-2);
  border: 1px solid rgba(232,72,88,.18);
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
}
.code-chip-code {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 11px;
  color: var(--danger-text);   /* AA 7.15:1 on danger-2 bg */
  padding: 6px 10px;
  border-right: 1px solid rgba(232,72,88,.18);
  letter-spacing: .02em;
  display: inline-flex; align-items: center;
}
.code-chip-text {
  font-family: var(--font-family-base);
  font-size: 12px; font-weight: 500;
  color: var(--ink);
  padding: 6px 12px;
  display: inline-flex; align-items: center;
  letter-spacing: -.01em;
}
.code-chip--warn {
  background: var(--yellow-3);
  border-color: rgba(33,37,41,.10);
}
.code-chip--warn .code-chip-code {
  color: var(--ink);
  border-right-color: rgba(33,37,41,.10);
}

/* SCAN INPUT ============================================== */
/* Hero search input — mascot prefix + URL input + CTA suffix. */
.scan-input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 12px 12px 18px;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.scan-input:focus-within {
  background: #fff;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(137, 66, 254, .18);
}
.scan-input .mascot { font-size: 26px; flex-shrink: 0 }
.scan-input-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  border: 0; background: transparent; outline: none;
  padding: 0;
}
.scan-input-url::placeholder { color: var(--mute) }
.scan-input-caret {
  display: inline-block; width: 2px; height: 16px;
  background: var(--purple); vertical-align: -2px;
  margin-left: 2px;
  animation: scan-input-caret 1s steps(2) infinite;
}
@keyframes scan-input-caret { 50% { opacity: 0 } }
.scan-input-hint {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--mute); font-weight: 500;
  margin-top: 8px;
}
.scan-input-kbd { color: var(--purple); font-weight: 600 }

/* INLINE LOADER =========================================== */
/* Live scan card — pill + timer + progress bar + terminal log. */
.inline-loader {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: 14px;
}
.inline-loader-head {
  display: flex; justify-content: space-between; align-items: center;
}
.inline-loader-timer {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.inline-loader-bar {
  height: 4px;
  background: var(--purple-3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.inline-loader-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--purple);
  transition: width var(--t-base);
}
.inline-loader-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.inline-loader-term {
  background: var(--ink); color: rgba(255,255,255,.85);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  display: flex; flex-direction: column; gap: 6px;
}
.inline-loader-line { display: flex; align-items: center; gap: 10px }
.inline-loader-line-tag { font-weight: 700 }
.inline-loader-line-tag--ok   { color: var(--safe) }
.inline-loader-line-tag--scan { color: var(--purple) }
.inline-loader-line-path { color: rgba(255,255,255,.95) }
.inline-loader-line-sep  { color: rgba(255,255,255,.35) }
.inline-loader-line-status--ok   { color: var(--safe) }
.inline-loader-line-status--scan { color: var(--purple) }

/* APP ICON SQUIRCLE ======================================= */
/* Dark squircle with mascot inside — iOS app icon style. */
.app-icon-squircle {
  width: 220px; height: 220px;
  background: var(--ink);
  border-radius: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 24px 60px -20px rgba(33,37,41,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.app-icon-squircle .mascot {
  color: #fff;
  font-size: 132px;
  /* Optical centering: {"} glyph has visual mass below its geometric centre
     (open space inside braces, "-mark sits at top). Lift to compensate. */
  transform: translateY(-4%);
}
.app-icon-squircle--sm { width: 96px;  height: 96px;  border-radius: 22px }
.app-icon-squircle--sm .mascot { font-size: 58px }
.app-icon-squircle--md { width: 160px; height: 160px; border-radius: 36px }
.app-icon-squircle--md .mascot { font-size: 96px }
.app-icon-squircle--light {
  background: #fff;
  box-shadow:
    0 24px 60px -20px rgba(33,37,41,.18),
    inset 0 0 0 1px var(--line);
}
.app-icon-squircle--light .mascot { color: var(--ink) }

/* FAVICON RAMP ============================================ */
/* Used in docs to show size ramp; not for production rendering. */
.favicon-ramp {
  display: flex; align-items: flex-end; gap: 32px;
  flex-wrap: wrap;
}
.favicon-tile {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.favicon-tile-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.favicon-tile img,
.favicon-tile svg { display: block }

/* ==========================================================
   MOBILE ADAPTATIONS — overrides для /lk/* и wizards (v0.3.0).
   Применяются ПОВЕРХ inline-стилей в HTML (kit-only принцип
   сохраняет desktop layout как inline, mobile fallback — через
   class + !important). См. ARCHITECTURE §1.9.
   ========================================================== */

/* === 0. Global: anti horizontal overflow на узких viewport === */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; max-width: 100% }
  .page { padding-left: 16px; padding-right: 16px }
}

/* === 0a. Landing hero (.wm-*): уменьшить шрифты, переверстать input-row === */
@media (max-width: 600px) {
  /* Top nav: гасим ссылки (Сканер/Тарифы/...), оставляем только mark + CTA */
  .wm-nav {
    padding: 8px 12px !important;
    gap: 10px !important;
  }
  .wm-nav-links { display: none !important }
  .wm-nav-cta .btn-ink,
  .wm-nav-cta .btn-ghost {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Hero h1: убираем огромный клэмп (5.2vw → 40px floor) — слишком крупно
     на 375px. Тот же текст лучше читается на 28px с relaxed letter-spacing. */
  .h-1, .wm-h {
    font-size: 28px !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
  }
  .h-3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em !important;
  }
  .wm-lede { font-size: 15px !important; margin-top: 16px !important }
  .wm-hero { padding: 24px 0 !important; gap: 24px !important }
  .wm-helper { font-size: 12px !important }

  /* Input + button — стэкаем в столбик, full-width, без pill-shape */
  .wm-input-row {
    flex-direction: column !important;
    border-radius: 16px !important;
    padding: 12px !important;
    gap: 8px !important;
    align-items: stretch !important;
    max-width: 100% !important;
  }
  .wm-input-row .wm-input,
  .wm-input-row .scan-input,
  .wm-input-row .search {
    width: 100% !important;
    padding: 10px 12px !important;
  }
  .wm-input-row .btn-ink,
  .wm-input-row button {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
  }

  /* Scan card (правая колонка hero) — компактнее, шрифт счётчика меньше */
  .wm-scan-card {
    padding: 20px !important;
    border-radius: 20px !important;
    min-height: 340px !important;
  }
  .wm-scan-counter {
    font-size: 56px !important;
    margin: 12px 0 8px !important;
  }
  .wm-scan-prompt { font-size: 13px !important }
  .wm-scan-item { font-size: 12px !important; padding: 8px 12px !important }

  /* KPI 4-up: на узких экранах уже было repeat(2,1fr) на 700px,
     сейчас доп. сокращаем шрифт цифры */
  .wm-kpi {
    padding: 24px 0 !important;
    gap: 16px !important;
  }
  .wm-kpi-v { font-size: 32px !important }
  .wm-kpi-l { font-size: 12px !important; margin-top: 6px !important }

  /* Cookies banner (cookie-banner.js): дать обычный radius, уменьшить
     padding, сжать textsize — на 375px иначе занимает 50% экрана */
  .gh-cb,
  .gh-cookie-banner {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }
  .gh-cb button,
  .gh-cookie-banner button {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* === 0b. Очень узкие экраны (iPhone SE ~320px) — ещё компактнее === */
@media (max-width: 380px) {
  .h-1, .wm-h { font-size: 24px !important }
  .wm-scan-counter { font-size: 48px !important }
  .wm-input-row { padding: 10px !important }
  .page { padding-left: 12px; padding-right: 12px }
}

/* === 0c. Key-value grid (Профиль settings, сводка детали политики) ===
   Desktop: label слева 160px + value flex 1fr.
   Mobile: стэкаем в столбик, label становится eyebrow-стилем (мелкий mute). */
.lk-kv-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px 14px;
  align-items: baseline;
  font-size: 14px;
}
@media (max-width: 600px) {
  .lk-kv-grid {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .lk-kv-grid > *:nth-child(odd) {
    font-size: 12px;
    color: var(--mute);
    margin-top: 10px;
  }
  .lk-kv-grid > *:nth-child(odd):first-child {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .lk-shell {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 16px !important;
  }
  .lk-shell > aside {
    padding: 12px 14px !important;
    min-height: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Brand-mark (clickable logo → /lk/) сохраняет 32×32 squircle вид
     и НЕ подпадает под general nav-link override ниже */
  .lk-shell > aside > .wm-nav-mark {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .lk-shell > aside > a:not(.wm-nav-mark),
  .lk-shell > aside > button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .lk-shell > aside > .lk-aside-foot {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-left: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .lk-content-2col {
    grid-template-columns: 1fr !important;
  }
  /* sticky preview становится static, иначе залипает поверх формы */
  .lk-content-2col > .lk-sticky-preview,
  .lk-content-2col > .card--ink {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 700px) {
  .lk-kpi-3,
  .lk-form-row-2,
  .lk-form-row-3 {
    grid-template-columns: 1fr !important;
  }

  .lk-table-header {
    display: none !important;
  }
  .lk-table-rows > * {
    display: block !important;
    grid-template-columns: none !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .lk-table-rows > * > * + * {
    margin-top: 4px !important;
  }
  .lk-table-rows > * > *:first-child {
    font-weight: 600 !important;
    font-size: 14px !important;
  }
  .lk-table-rows > * > *:not(:first-child) {
    font-size: 12px !important;
    color: var(--mute) !important;
  }
  .lk-table-rows > * > .btn-ghost,
  .lk-table-rows > * > button {
    display: inline-flex !important;
    margin-top: 8px !important;
    margin-right: 6px !important;
  }
}

/* ============================================================
 * Универсальные responsive grid-классы для /lk/* и публичных страниц.
 * Используй вместо inline `style="display:grid;grid-template-columns:repeat(N,1fr)"`
 * — иначе на mobile сетка не свернётся.
 *
 * Точки преломления:
 *   ≤700px (планшет→мобильный): 4/3/2-кол → 2-кол
 *   ≤500px (узкий мобильный):   2-кол    → 1-кол
 * ============================================================ */
.lk-grid-2,
.lk-grid-3,
.lk-grid-4 {
  display: grid;
  gap: 16px;
}
.lk-grid-2 { grid-template-columns: repeat(2, 1fr) }
.lk-grid-3 { grid-template-columns: repeat(3, 1fr) }
.lk-grid-4 { grid-template-columns: repeat(4, 1fr) }

@media (max-width: 700px) {
  .lk-grid-3,
  .lk-grid-4 { grid-template-columns: repeat(2, 1fr) !important }
  .lk-grid-2 { grid-template-columns: 1fr !important }
}
@media (max-width: 500px) {
  .lk-grid-2,
  .lk-grid-3,
  .lk-grid-4 { grid-template-columns: 1fr !important }
}