/* ─────────────────────────────────────────────────────────────
   Дизайн-кит pawetta.com — токены из проекта Claude Design
   «Pawetta UI Kit», раздел A. Ставится поверх styles.css и
   действует только там, где разметка помечена классом .kit.
   Старые страницы не задеваются: имена переменных новые.
   ───────────────────────────────────────────────────────────── */

/* Golos Text — переменный, веса 400–700 в одном файле на диапазон.
   Три файла на весь сайт вместо двенадцати: кириллица 22 КБ,
   латиница 38 КБ, расширенная латиница 19 КБ (нужна для имён
   вроде «Patryk Rumiński» в карточках каталога). */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.kit {
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --surface-3: #EEF0F4;
  --border: #E4E7EC;

  --ink: #12141A;
  --text: #3E434F;
  --muted: #6B7280;
  --faint: #9AA1AE;

  --brand: #3B4FD8;   --brand-ink: #2B3AA8;  --brand-bg: #EEF1FE;
  --ok: #0F8A4D;      --ok-ink: #0B6B3C;     --ok-bg: #E6F7EE;
  --warn: #B26A00;    --warn-ink: #8A5100;   --warn-bg: #FFF4E0;
  --bad: #D22B3F;     --bad-ink: #A81E2F;    --bad-bg: #FDECEE;
  --info: #0A7DA6;    --info-ink: #08607F;   --info-bg: #E3F4FB;
  --pick: #7A45D6;    --pick-ink: #6134BC;   --pick-bg: #F2EBFE;

  --font: 'Golos Text', system-ui, sans-serif;
  --num: tabular-nums;

  --fs-h1: 52px;  --fs-h2: 34px;   --fs-h3: 22px;
  --fs-lead: 20px; --fs-body: 17px; --fs-sm: 15px; --fs-micro: 12px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(18,20,26,.06);
  --sh-2: 0 2px 4px rgba(18,20,26,.05), 0 10px 24px -14px rgba(18,20,26,.20);
  --sh-3: 0 4px 8px rgba(18,20,26,.06), 0 24px 48px -20px rgba(18,20,26,.28);

  --sp-1: 4px; --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --wrap: 1200px;
  --measure: 760px;
  --section-gap: 64px;
  --card-pad: 24px;
  --ring: 0 0 0 3px #A9B5F7;
}

@media (max-width: 700px) {
  .kit {
    --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 19px;
    --fs-lead: 18px; --fs-body: 16px;
    --section-gap: 44px;
    --card-pad: 18px;
  }
}

/* ── база ───────────────────────────────────────────────────── */
.kit {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
.kit *,
.kit *::before,
.kit *::after { box-sizing: border-box; }

.kit h1, .kit h2, .kit h3, .kit h4 { color: var(--ink); margin: 0; }
.kit h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.kit h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.kit h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
.kit p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.kit p:last-child { margin-bottom: 0; }

.kit a { color: var(--brand); text-decoration: none; }
/* Подчёркивание только у ссылок внутри прозы. Кнопки, чипы, карточки,
   пункты меню и подвала при наведении не подчёркиваются. */
.kit a:hover { color: var(--brand-ink); text-decoration: none; }
.kit p a:hover,
.kit li a:hover,
.kit dd a:hover,
.kit figcaption a:hover,
.kit blockquote a:hover,
.kit .kit-faq .a a:hover,
.kit .measure a:hover { text-decoration: underline; }
.kit .kbtn:hover, .kit .chip:hover, .kit .kit-src:hover,
.kit .kit-alt:hover, .kit .kit-rate:hover { text-decoration: none; }
.kit :focus-visible { outline: 0; box-shadow: var(--ring); border-radius: var(--r-sm); }
.kit ::selection { background: #DDE3FE; }

/* Цифры, коды и адреса — тем же шрифтом, но с табличными цифрами:
   колонки в таблицах выравниваются, вторая гарнитура не нужна. */
.kit .num, .kit code, .kit time, .kit th, .kit td.num {
  font-variant-numeric: var(--num);
  letter-spacing: .01em;
}
.kit code {
  background: var(--surface-3);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .94em;
}

/* ── обёртки и ритм ─────────────────────────────────────────── */
.kit .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }
@media (max-width: 700px) { .kit .wrap { padding: 0 var(--sp-4); } }
.kit .measure { max-width: var(--measure); }
.kit .stack { display: flex; flex-direction: column; }
.kit .sec { padding: calc(var(--section-gap) / 2) 0; }

/* ── карточки и плашки ──────────────────────────────────────── */
.kit .card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--card-pad);
}
.kit .flat {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: var(--card-pad);
}
.kit .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.kit .chip--brand { background: var(--brand-bg); color: var(--brand-ink); }
.kit .chip--ok    { background: var(--ok-bg);    color: var(--ok-ink); }
.kit .chip--warn  { background: var(--warn-bg);  color: var(--warn-ink); }
.kit .chip--bad   { background: var(--bad-bg);   color: var(--bad-ink); }
.kit .chip--info  { background: var(--info-bg);  color: var(--info-ink); }
.kit .chip--pick  { background: var(--pick-bg);  color: var(--pick-ink); font-weight: 600; }

/* ── кнопки: кликабельная зона всегда ≥ 44px ────────────────── */
.kit .kbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kit .kbtn--primary { background: var(--brand); color: #fff; }
.kit .kbtn--primary:hover { background: var(--brand-ink); color: #fff; text-decoration: none; }
.kit .kbtn--secondary { background: var(--surface-3); color: var(--ink); }
.kit .kbtn--secondary:hover { background: var(--border); color: var(--ink); text-decoration: none; }
.kit .btn[disabled], .kit .kbtn--disabled {
  background: var(--surface-3); color: var(--faint); cursor: not-allowed;
}

/* ── таблицы ────────────────────────────────────────────────── */
.kit .tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.kit table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kit thead th {
  background: var(--surface-3);
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px var(--sp-4);
}
.kit tbody td { padding: 14px var(--sp-4); border-top: 1px solid var(--border); vertical-align: top; }

/* ── смысловые блоки ────────────────────────────────────────── */
.kit .note {
  display: flex;
  gap: var(--sp-3);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.kit .note--warn { background: var(--warn-bg); color: var(--warn-ink); }
.kit .note--ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.kit .note--bad  { background: var(--bad-bg);  color: var(--bad-ink); }
.kit .note--info { background: var(--info-bg); color: var(--info-ink); }

.kit .ico { flex: none; display: block; }

/* Флаги стран — только свои SVG 20×14. Эмодзи-флаги запрещены:
   на части Windows они не отрисовываются. */
.kit .flag { width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(18,20,26,.1); flex: none; }

@media print {
  .kit { background: #fff; }
  .kit .card, .kit .flat { box-shadow: none; border: 1px solid var(--border); }
}

/* ═══════════════════════════════════════════════════════════════
   Раздел Б макета — компоненты карточки сервиса.
   Значения сняты с проекта «Pawetta UI Kit», атрибут style-hover
   из Design Components переведён в обычные :hover-правила.
   ═══════════════════════════════════════════════════════════════ */

/* Страница во весь экран: белый фон, никаких скруглённых «карточек-контейнеров»
   и обрезки по краям. Ширину держат только внутренние обёртки. */
/* Страница во весь экран: серое поле от края до края, без скруглённых
   «контейнеров» и обрезки. Содержимое лежит на нём белыми карточками —
   на сплошном белом они не читались и страница выглядела пустой. */
/* Страница во весь экран и сплошная: без серого поля, без коробок
   вокруг блоков. Ритм держат отступы и тонкая линия между секциями. */
.kit-page { background: var(--surface); min-height: 100vh; padding-bottom: var(--sp-8); }
.kit-sheet { background: transparent; }

.kit-body { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-5) var(--sp-5) 0;
  display: flex; flex-direction: column; }
@media (max-width: 700px) { .kit-body { padding: var(--sp-4) var(--sp-4) var(--sp-7); } }

/* хлебные крошки */
.kit-crumbs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 14px; padding-bottom: 20px; }
.kit-crumbs a { color: var(--muted); }
.kit-crumbs i { color: var(--faint); font-style: normal; }
.kit-crumbs b { color: var(--ink); font-weight: 600; }

/* шапка карточки */
.kit-hero { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.kit-hero-main { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.kit-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.kit-hero p { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 640px; margin: 0; }
.kit-ico { width: 72px; height: 72px; border-radius: 18px; flex: none; box-shadow: inset 0 0 0 1px var(--border);
  background: var(--surface); object-fit: contain; padding: 10px; }
.kit-rate { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
  border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; font-size: var(--fs-sm); }
.kit-rate:hover { background: #FFEDCB; color: var(--warn-ink); text-decoration: none; }
.kit-rate b { font-size: 22px; font-weight: 700; color: var(--ink); }
.kit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); font-size: 14px; color: var(--muted); }

/* спецпредложение — единственный яркий блок */
.kit-offer { position: relative; overflow: hidden; margin-top: 32px; padding: 32px;
  border-radius: 24px; color: #fff; display: flex; flex-direction: column; gap: var(--sp-3);
  background: linear-gradient(135deg, #2B3AA8 0%, #3B4FD8 46%, #7A45D6 100%); box-shadow: var(--sh-3); }
.kit-offer h3 { color: #fff; font-size: 32px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; max-width: 620px; }
.kit-offer p { color: #DDE3FE; max-width: 700px; font-size: var(--fs-body); line-height: 1.6; margin: 0; }
.kit-offer .tag { align-self: flex-start; display: inline-flex; align-items: center; padding: 6px 12px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.18); color: #fff; font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.kit-offer .fine { font-size: var(--fs-micro); color: #A9B5F7; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.22); font-variant-numeric: var(--num); }
.kit-offer .blob { position: absolute; border-radius: 999px; background: rgba(255,255,255,.06); pointer-events: none; }

/* заголовки секций карточки */
.kit-body h2 { margin: 56px 0 20px; }
.kit-body h2:first-of-type { margin-top: 40px; }
.kit-sub { margin: -12px 0 20px; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 700px) { .kit-body h2 { margin: 40px 0 16px; } }

/* сетки */
.kit-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kit-2--tight { gap: 20px; }
.kit-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kit-1 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (max-width: 860px) { .kit-2, .kit-3 { grid-template-columns: 1fr; gap: 20px; } }

/* список возможностей */
.kit-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.kit-feat > div { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text); }
@media (max-width: 860px) { .kit-feat { grid-template-columns: 1fr; } }

/* цитаты разработчика */
.kit-quote { margin: 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-2);
  font-size: 16px; line-height: 1.5; color: var(--ink); }

/* плюсы и минусы */
.kit-pc { border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-pc--pro { background: var(--ok-bg); }
.kit-pc--con { background: var(--bad-bg); }
.kit-pc h3 { font-size: 19px; margin-bottom: var(--sp-3); }
.kit-pc--pro h3 { color: var(--ok-ink); }
.kit-pc--con h3 { color: var(--bad-ink); }
.kit-pc div { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 16px; line-height: 1.5; }
.kit-pc--pro div { color: #234; }
.kit-pc--con div { color: #432; }

/* сценарии */
.kit-case { border-radius: var(--r-lg); padding: var(--sp-5); background: var(--surface-2); }
.kit-case h3 { font-size: 19px; margin-bottom: var(--sp-2); }
.kit-case p { font-size: 16px; line-height: 1.55; color: var(--text); margin: 0; }

/* порог входа */
.kit-score { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start;
  padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); }
.kit-score-big { border-radius: var(--r-lg); background: var(--ok-bg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: 10px; }
.kit-score-big .v { display: flex; align-items: baseline; gap: 6px; color: var(--ok); }
.kit-score-big .v span:first-child { font-size: 76px; line-height: .9; font-weight: 700;
  letter-spacing: -.04em; font-variant-numeric: var(--num); }
.kit-score-big .v span:last-child { font-size: 26px; font-weight: 600; opacity: .6; }
.kit-score-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.kit-bar .t { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.kit-bar .t span:last-child { color: var(--muted); font-variant-numeric: var(--num); }
.kit-bar .r { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.kit-bar .r i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
@media (max-width: 860px) { .kit-score { grid-template-columns: 1fr; } .kit-score-bars { grid-template-columns: 1fr; } }

/* источники */
.kit-src { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-md);
  background: var(--surface-2); min-width: 0; }
.kit-src:hover { background: var(--surface-3); text-decoration: none; }
.kit-src span { min-width: 0; }
.kit-src b { display: block; font-size: 14px; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: var(--num); }
.kit-src i { display: block; font-size: 12px; color: var(--faint); font-style: normal; }

/* отзывы */
.kit-rev-head { display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.kit-rev-big { font-size: 56px; font-weight: 700; line-height: .95; color: var(--warn);
  letter-spacing: -.03em; font-variant-numeric: var(--num); }
.kit-rev-dist { flex: 1; min-width: 260px; }
.kit-rev-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; color: var(--muted); }
.kit-rev-row .r { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.kit-rev-row .r i { display: block; height: 100%; background: var(--warn); border-radius: 999px; }
.kit-rev-row .n { width: 26px; text-align: right; font-variant-numeric: var(--num); }
.kit-rev { border-radius: var(--r-md); padding: 18px 20px; background: var(--surface-2); }
.kit-rev--bad { background: var(--bad-bg); }
.kit-rev-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.kit-rev-top b { font-size: 15px; color: var(--ink); }
.kit-rev-top time { font-size: 13px; color: var(--faint); }
.kit-rev p { font-size: 16px; line-height: 1.55; color: var(--text); margin: 0; }
.kit-reply { margin-top: 14px; padding: 13px 15px; background: var(--surface); border-radius: var(--r-md);
  box-shadow: inset 3px 0 0 var(--pick); }
.kit-reply b { font-size: 14px; color: var(--ink); }
.kit-reply p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; }

/* альтернативы */
.kit-alt { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.kit-alt:hover { box-shadow: inset 0 0 0 1px var(--brand); text-decoration: none; }
.kit-alt img { width: 38px; height: 38px; border-radius: 11px; flex: none; object-fit: contain; }
.kit-alt b { display: block; font-size: 15px; color: var(--ink); }
.kit-alt i { display: block; font-size: 13px; color: var(--muted); font-style: normal; line-height: 1.35; }

/* FAQ */
.kit-faq { border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.kit-faq + .kit-faq { margin-top: 10px; }
.kit-faq summary { cursor: pointer; list-style: none; min-height: 44px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px;
  font-weight: 600; font-size: 17px; color: var(--ink); }
.kit-faq summary::-webkit-details-marker { display: none; }
.kit-faq summary:hover { color: var(--brand-ink); }
.kit-faq .a { padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: var(--text); }
.kit-faq svg { transition: transform .15s ease; flex: none; }
.kit-faq[open] svg { transform: rotate(90deg); }

/* таблица характеристик */
.kit-spec div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0;
  border-bottom: 1px solid var(--border); font-size: 16px; }
.kit-spec div:last-child { border-bottom: 0; }
.kit-spec dt, .kit-spec .k { color: var(--muted); }
.kit-spec .v { color: var(--ink); font-weight: 500; text-align: right; }

/* подвал */
.kit-foot { max-width: var(--wrap); margin: var(--sp-6) auto 0; padding: 0 var(--sp-5);
  display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-size: 14px; color: var(--muted); }
.kit-foot a { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   Родные шапка и подвал сайта на страницах кита.
   Разметка берётся с боевой страницы как есть — меняется только
   цвет: топбар из бежевого становится белым, кнопка «Бриф» —
   синей из кита. Подвал остаётся тёмным, как на всём сайте.
   ═══════════════════════════════════════════════════════════════ */

/* Шапка и подвал набираются тем же Golos Text, что и страница */
.kit .nav, .kit .footer, .kit .mobile-menu { font-family: var(--font); }

.kit .nav {
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--border);
}
.kit .nav.scrolled, .kit .nav[data-scrolled] { border-bottom-color: var(--border); }
.kit .nav-inner { max-width: var(--wrap); }
.kit .brand .name { color: var(--ink); }
.kit .nav-links a, .kit .nav-dd-t { color: var(--text); }
.kit .nav-links a:hover, .kit .nav-dd-t:hover { color: var(--brand-ink); }
.kit .nav-links a.active {
  color: var(--brand-ink);
  font-weight: 600;
  background: var(--brand-bg);
  border-radius: var(--r-sm);
}
.kit .nav-dd-m { background: var(--surface); border-color: var(--border); box-shadow: var(--sh-2); }
.kit .nav-dd-m a { color: var(--text); }
.kit .nav-dd-m a:hover { background: var(--surface-2); color: var(--brand-ink); }

/* кнопка «Бриф» — фирменный синий кита вместо терракоты */
.kit .nav .btn--brand,
.kit .mobile-menu .mob-cta {
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-pill);
}
.kit .nav .btn--brand:hover,
.kit .mobile-menu .mob-cta:hover { background: var(--brand-ink); color: #fff; }
.kit .burger { color: var(--ink); }

.kit .mobile-menu { background: var(--surface); border-color: var(--border); }
.kit .mobile-menu a { color: var(--text); }
.kit .mobile-menu a.active { color: var(--brand-ink); }

/* подвал: ширина под кит, остальное родное */
.kit .footer-inner { max-width: var(--wrap); }
.kit .footer-cta { background: var(--brand); color: #fff; }
.kit .footer-cta:hover { background: var(--brand-ink); color: #fff; }

/* ── подвал: все ссылки белые, ничего красного ─────────────────
   Родной подвал красит ссылки в тёплый серый, при наведении — в
   коралловый, и подводит их растущей чертой того же цвета. Плюс
   две терракотовые засечки над брендом и колонками. На страницах
   кита красного нет: ссылки белые, черта снята, засечки синие. */
.kit .footer-link,
.kit .footer-bottom-links a,
.kit .footer-copy,
.kit .footer-copy b,
.kit .footer-desc { color: #fff; }
.kit .footer-link:hover,
.kit .footer-bottom-links a:hover { color: #fff; text-decoration: none; }
.kit .footer-link::after { display: none; content: none; }
/* Засечки-плашки над брендом и над колонками подвала сняты целиком:
   ни терракотовых, ни синих. */
.kit .footer-inner::before,
.kit .footer-col::before { display: none; content: none; }
.kit .footer-cta:focus-visible { outline-color: var(--brand); }

/* ── ссылки в прозе: перебиваем правило сайта ──────────────────
   В styles.css живёт `main p a:not([class])` с терракотовым цветом
   и подчёркиванием (специфичность 0,2,1) — оно перекрашивало ссылки
   кита в оранжевый. Здесь тот же селектор со своим цветом. */
.kit main p a:not([class]),
.kit main li a:not([class]),
.kit main figcaption a:not([class]) {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: rgba(59, 79, 216, .35);
  text-underline-offset: 3px;
}
.kit main p a:not([class]):hover,
.kit main li a:not([class]):hover,
.kit main figcaption a:not([class]):hover {
  color: var(--brand-ink);
  text-decoration-color: var(--brand);
}

/* адрес сайта в строке меты — чип, а не ссылка в тексте */
.kit .kit-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 500;
  white-space: nowrap;
}
.kit .kit-host:hover { color: var(--brand-ink); text-decoration: none; }
.kit .kit-hero p { max-width: var(--measure); }

/* ── наклонный ценник в спецпредложении ────────────────────────
   Правая половина блока пустовала — там встаёт штамп из макета. */
.kit .kit-stamp { position: absolute; right: 32px; top: 28px; transform: rotate(-7deg);
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 18px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
@media (max-width: 860px) { .kit .kit-stamp { position: static; transform: none; align-self: flex-start; margin-bottom: 4px; } }

/* ── «Основное»: проза плюс выжимка, чтобы справа не было пустоты ── */
.kit-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.kit-facts { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-facts h3 { font-size: 17px; margin-bottom: 10px; }
.kit-facts .kit-spec div { padding: 10px 0; font-size: 15px; }
@media (max-width: 900px) { .kit-main { grid-template-columns: 1fr; } }

/* ── поддержка: три колонки-карточки ──────────────────────────── */
.kit-sup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kit-supcol { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-supcol h3 { font-size: 15px; color: var(--muted); font-weight: 600; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .07em; font-size: var(--fs-micro); }
.kit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-line { display: flex; align-items: center; gap: 9px; padding: 9px 0;
  border-bottom: 1px solid var(--border); min-height: 44px; }
.kit-line:last-child { border-bottom: 0; }
.kit-line:hover { text-decoration: none; }
.kit-line b { font-size: 15px; font-weight: 500; color: var(--ink); }
.kit-line:hover b { color: var(--brand-ink); }
.kit-line i { font-style: normal; font-size: 13px; color: var(--faint); margin-left: auto;
  text-align: right; }
.kit-line .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
@media (max-width: 900px) { .kit-sup { grid-template-columns: 1fr; } }

/* ── видео-фасад ──────────────────────────────────────────────── */
.kit-video { position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #0d0f14; box-shadow: var(--sh-2); aspect-ratio: 16 / 9; }
.kit-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kit-video.on img, .kit-video.on .kit-play, .kit-video.on .kit-video-cap { display: none; }
.kit-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  border: 0; border-radius: 999px; background: rgba(59,79,216,.92); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
  transition: transform .15s ease, background .15s ease; }
.kit-play:hover { background: var(--brand); transform: scale(1.06); }
.kit-video-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; }
.kit-video-cap b { display: block; font-size: 17px; }
.kit-video-cap i { display: block; font-style: normal; font-size: 14px; opacity: .82; margin-top: 3px; }

/* ── смежная услуга ───────────────────────────────────────────── */
.kit-svc { background: var(--brand-bg); border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-svc h3 { color: var(--brand-ink); font-size: 17px; margin-bottom: 8px; }
.kit-svc p { color: var(--text); font-size: 16px; margin-bottom: 16px; }

/* ── фавиконка в официальном ответе ───────────────────────────── */
.kit-reply-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kit-reply-h img { width: 22px; height: 22px; border-radius: 6px; flex: none; object-fit: contain; }

/* ── мокапы из карточек (data.py["blocks"]["html"]) ─────────────
   Разметка приезжает из боевого генератора с классами .sv-mock*,
   их стили жили в css_service. Здесь тот же мокап на токенах кита. */
.kit .sv-mock { border-radius: var(--r-lg); background: var(--surface); padding: 18px 20px;
  margin: 20px 0 0; box-shadow: inset 0 0 0 1px var(--border); }
.kit .sv-mock > b { display: block; font-size: var(--fs-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 13px; }
.kit .sv-mock-w { display: grid; grid-template-columns: 1.9fr 1fr; gap: 11px; }
.kit .sv-mock-v { position: relative; border-radius: var(--r-md); min-height: 200px; padding: 13px;
  background: linear-gradient(135deg, #1b2140, #3b2f66); }
.kit .sv-mock-v .tag, .kit .sv-mock-c .tag { font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.55); }
.kit .sv-mock-c .tag { color: var(--faint); }
.kit .sv-mock-v .ban { position: absolute; left: 13px; right: 13px; bottom: 44px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; background: var(--brand);
  border-radius: 9px; padding: 9px 12px; }
.kit .sv-mock-v .ban span { font-size: 13.5px; color: #fff; font-weight: 600; }
.kit .sv-mock-v .ban em { font-style: normal; font-size: 12px; color: var(--brand-ink);
  background: #fff; border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.kit .sv-mock-v .bar { position: absolute; left: 13px; right: 13px; bottom: 13px;
  display: flex; align-items: center; gap: 9px; }
.kit .sv-mock-v .bar .live { font-style: normal; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: var(--bad); border-radius: 4px; padding: 2px 6px; }
.kit .sv-mock-v .bar .ln { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.kit .sv-mock-v .bar .t { font-style: normal; font-size: 11px; color: rgba(255,255,255,.72);
  font-variant-numeric: var(--num); }
.kit .sv-mock-c { border-radius: var(--r-md); background: var(--surface-2); padding: 13px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1px var(--border); }
.kit .sv-mock-c .msg { display: flex; gap: 8px; align-items: flex-start; }
.kit .sv-mock-c .msg i { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3);
  flex: none; margin-top: 1px; }
.kit .sv-mock-c .msg span { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.kit .sv-mock-c .fld { margin-top: auto; border: 1px dashed var(--border); border-radius: var(--r-sm);
  padding: 7px 10px; font-size: 12px; color: var(--faint); }
.kit .sv-mock-l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 13px; }
.kit .sv-mock-l > div { border-radius: var(--r-md); background: var(--surface-2); padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--border); }
.kit .sv-mock-l b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
.kit .sv-mock-l span { font-size: 13px; line-height: 1.5; color: var(--text); }
@media (max-width: 860px) { .kit .sv-mock-w, .kit .sv-mock-l { grid-template-columns: 1fr; } }

/* ── секция: сплошной контент, без карточек и рамок ────────────
   Каждый блок отбивается только воздухом и волосяной линией. */
.kit-sec { padding: var(--sp-6) 0; }
.kit-sec--hero { padding-top: var(--sp-3); }
.kit-sec > h2:first-child { margin-top: 0; }
.kit-sec h2 { margin: 36px 0 18px; }
.kit-sec h2:first-child { margin-top: 0; }
@media (max-width: 700px) { .kit-sec { padding: var(--sp-5) 0; } }

/* шапка карточки: своя черта снизу больше не нужна — её даёт секция */
.kit-sec--hero .kit-hero { padding-bottom: var(--sp-5); border-bottom: 0; }

/* «Кому подходит» и «Что важно знать» — тонированными плитками */
.kit-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kit-split > div { border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-split .who { background: var(--brand-bg); }
.kit-split .who h2 { color: var(--brand-ink); }
.kit-split .note-b { background: var(--warn-bg); }
.kit-split .note-b h2 { color: var(--warn-ink); }
.kit-split h2 { margin: 0 0 12px; font-size: var(--fs-h3); }
.kit-split p { font-size: 16px; margin: 0; }
@media (max-width: 860px) { .kit-split { grid-template-columns: 1fr; } }

/* возможности плотнее: три колонки на широком экране */
@media (min-width: 1100px) { .kit-feat { grid-template-columns: repeat(3, 1fr); } }

/* ── «Что есть у нас по теме»: одинаковые карточки в ряд ───────
   Было две неравные колонки: слева одна строка с подписью, уехавшей
   к правому краю, и полпустой карточки под ней. */
.kit-owns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kit-own { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-5);
  border-radius: var(--r-lg); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border); min-height: 100%; }
.kit-own:hover { background: var(--surface-3); text-decoration: none; box-shadow: inset 0 0 0 1px var(--brand); }
.kit-own b { font-size: 17px; color: var(--ink); line-height: 1.3; }
.kit-own i { font-style: normal; font-size: 15px; line-height: 1.5; color: var(--muted); }
.kit-own-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--brand); }
.kit-own--svc { background: var(--brand-bg); box-shadow: none; }
.kit-own--svc:hover { background: #E3E7FD; box-shadow: inset 0 0 0 1px var(--brand); }
.kit-own--svc b { color: var(--brand-ink); }
.kit-own--svc i { color: var(--text); }
@media (max-width: 900px) { .kit-owns { grid-template-columns: 1fr; } }

/* ── альтернативы: весь раздел сеткой ─────────────────────────── */
.kit-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .kit-alts { grid-template-columns: 1fr; } }

/* ── ссылка на площадку отзывов с её фавиконкой ────────────────── */
.kit-revsrc { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.kit-revsrc:hover { text-decoration: none; }

/* ── тарифы: таблица не растягивается на высоту соседней колонки ──
   У .kit-2 элементы по умолчанию тянутся на всю высоту строки, и под
   последней строкой таблицы оставалось пустое поле в пол-экрана. */
.kit-price { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.kit-price > .tbl-wrap { align-self: start; }
@media (max-width: 900px) { .kit-price { grid-template-columns: 1fr; } }

/* та же болезнь у остальных двухколоночных блоков, где содержимое разной высоты */
.kit-2--top { align-items: start; }

/* Внутренние элементы держат цвет сами — раньше это делало правило
   .kit-block, которого больше нет. */
.kit .kit-facts, .kit .kit-case, .kit .kit-supcol, .kit .kit-src,
.kit .kit-quote, .kit .kit-score, .kit .kit-rev { background: var(--surface-2); }
.kit .kit-rev--bad { background: var(--bad-bg); }
.kit .card { box-shadow: inset 0 0 0 1px var(--border); }

/* ── оглавление ────────────────────────────────────────────────
   Страница длинная, и человек чаще всего приходит за одним блоком —
   обычно за ценами. Чипы ведут прямо туда. */
.kit-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--sp-4) 0 var(--sp-5); }
.kit-toc .chip { background: var(--surface-2); color: var(--text); }
.kit-toc .chip:hover { background: var(--brand-bg); color: var(--brand-ink); text-decoration: none; }

/* ── сравнение с разделом ─────────────────────────────────────── */
.kit-cmp td { font-size: 15px; }
.kit-cmp td:first-child { font-weight: 500; color: var(--ink); }
.kit-cmp tr.is-here { background: var(--brand-bg); }
.kit-cmp tr.is-here td { border-top-color: #D9DFFB; }

/* ── три плитки: подходит / не подойдёт / важно знать ──────────── */
.kit-split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-split .not-who { background: var(--bad-bg); }
.kit-split .not-who h2 { color: var(--bad-ink); }
.kit-split .not-who ul { margin: 0; padding-left: 18px; }
.kit-split .not-who li { font-size: 16px; line-height: 1.5; color: var(--text); padding: 4px 0; }
@media (max-width: 1000px) { .kit-split--3 { grid-template-columns: 1fr; } }

/* якорь под липкой шапкой сайта */
.kit [id] { scroll-margin-top: 80px; }

/* ── звёзды в строку ───────────────────────────────────────────
   ⚠️ В styles.css есть глобальное `img, svg { display: block }` —
   после подключения родных шапки и подвала оно добралось и до наших
   иконок, и звёзды встали столбиком. Обёртка делает их строкой. */
.kit .kit-stars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.kit .kit-stars svg { display: block; flex: none; height: auto; }

/* ── ценник в спецпредложении крупнее ─────────────────────────── */
.kit .kit-stamp { padding: 26px 40px; border-radius: 26px; gap: 6px; }
.kit .kit-stamp b { line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.kit .kit-stamp i { font-style: normal; font-weight: 600; text-transform: uppercase; }
.kit .kit-stamp b { font-size: 76px; }
.kit .kit-stamp i { font-size: 15px; letter-spacing: .08em; }
@media (max-width: 1100px) { .kit .kit-stamp b { font-size: 56px; } }
@media (max-width: 860px) { .kit .kit-stamp { padding: 18px 26px; } .kit .kit-stamp b { font-size: 44px; } }

/* флажок в таблице сравнения не растягивается */
.kit-cmp .flag { width: 20px; height: 14px; }

/* ── карточка юрлица и соответствия ────────────────────────────
   Была плоская пара «ключ — значение». Стала карточка компании
   с реквизитами, проверками соответствия и ссылками на документы. */
.kit-org-wrap { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .kit-org-wrap { grid-template-columns: 1fr; } }

.kit-org { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-org-t { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.kit-org-name { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 23px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.kit-org-name .flag { width: 24px; height: 17px; }
.kit-org .chip b { font-weight: 600; color: var(--ink); }
.kit-org-addr { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px;
  line-height: 1.5; color: var(--text); }

.kit-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) { .kit-checks { grid-template-columns: 1fr; } }
.kit-chk { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--r-md); background: var(--surface-2); }
.kit-chk--ok { background: var(--ok-bg); }
.kit-chk b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.kit-chk i { display: block; font-style: normal; font-size: 14px; line-height: 1.45;
  color: var(--muted); margin-top: 3px; }
.kit-chk--ok i { color: var(--ok-ink); }

.kit-techs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kit-tech { padding: 14px 16px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--border); }
.kit-tech span { display: block; font-size: 13px; color: var(--muted); }
.kit-tech b { display: block; font-size: 16px; color: var(--ink); font-weight: 600; margin-top: 3px; }
@media (max-width: 900px) { .kit-techs { grid-template-columns: 1fr 1fr; } }

/* адрес юрлица — ссылка на поиск по Яндекс Картам */
.kit a.kit-org-addr { color: var(--text); }
.kit a.kit-org-addr:hover { color: var(--brand-ink); text-decoration: none; }
.kit a.kit-org-addr:hover span { text-decoration: underline; }
.kit .kit-org-addr svg:last-child { display: inline; vertical-align: baseline; margin-left: 5px; opacity: .6; }

/* ── калькулятор оплаты по факту ───────────────────────────────
   Цены посегментные, и «от 700 ₽» ничего не говорит: считаем
   по опубликованным ступеням прямо на странице. */
.kit-calc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px;
  align-items: center; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); }
.kit-calc input[type=range] { width: 100%; height: 6px; border-radius: 999px; appearance: none;
  background: var(--surface-3); outline: none; }
.kit-calc input[type=range]::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px;
  border-radius: 999px; background: var(--brand); cursor: pointer; border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(18,20,26,.25); }
.kit-calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px;
  background: var(--brand); cursor: pointer; border: 4px solid #fff; }
.kit-calc-out { background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--sh-2); text-align: center; }
.kit-calc-out > span { display: block; font-size: 13px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); }
.kit-calc-out b { display: block; font-size: 40px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; margin: 6px 0 8px; }
.kit-calc-out i { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .kit-calc { grid-template-columns: 1fr; } }

/* ── матрица «возможность × тариф» ─────────────────────────────── */
.kit-mx thead th { vertical-align: top; }
.kit-mx thead th i { display: block; font-style: normal; text-transform: none;
  letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--brand); margin-top: 4px; }
.kit-mx th[scope=row] { text-align: left; padding: 14px var(--sp-4); font-size: 15px;
  font-weight: 600; color: var(--ink); background: var(--surface-2); border-top: 1px solid var(--border);
  text-transform: none; letter-spacing: 0; }
.kit-mx td { font-size: 15px; }
.kit-mx-yes { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
.kit-mx-no { color: var(--faint); font-size: 14px; }

/* ── соседние разделы ──────────────────────────────────────────── */
.kit-nb { display: flex; flex-direction: column; gap: 7px; padding: var(--sp-5);
  border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.kit-nb:hover { background: var(--brand-bg); box-shadow: inset 0 0 0 1px var(--brand); text-decoration: none; }
.kit-nb b { font-size: 17px; color: var(--ink); }
.kit-nb i { font-style: normal; font-size: 15px; line-height: 1.5; color: var(--muted); }
.kit-nb-ico { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.kit-nb-ico img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain;
  background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.kit-nb-ico em { font-style: normal; font-size: 13px; color: var(--faint); margin-left: 4px; }

/* виджеты сайта на странице кита: оценка и отзывы */
.kit [data-rate-here] .pw-rate, .kit .pw-rev { font-family: var(--font); }
.kit .pw-views--crumb { margin-left: 10px; }

/* ── отзывы: свои и со стороны в одном блоке ───────────────────
   Сводка сверху, следом форма «Ваш отзыв» — чтобы написать можно было
   не долистывая, — и уже потом цитаты с внешней площадки. */
.kit-own-rev { margin-top: 22px; padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--brand-bg); }
.kit-own-rev h3 { font-size: 19px; color: var(--brand-ink); }
.kit-own-rev .kit-sub { margin: 6px 0 14px; color: var(--text); }
.kit-own-rev .pw-rev-form input, .kit-own-rev .pw-rev-form textarea { background: #fff; }
.kit-own-rev .btn { min-height: 44px; border-radius: var(--r-md); background: var(--brand);
  color: #fff; font-weight: 600; padding: 0 var(--sp-5); border: 0; }
.kit-own-rev .btn:hover { background: var(--brand-ink); color: #fff; }

.kit-ext-rev { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.kit-ext-rev h3 { display: flex; align-items: center; gap: 9px; font-size: 19px; margin-bottom: 16px; }

/* ── виджеты оценки и отзывов в дизайне кита ────────────────────
   rate.js и reviews.js рисуют свою бежевую вёрстку с рамками и
   вставляют её после загрузки. Перекрываем токенами кита и жмём
   по высоте: панель должна быть строкой, а не блоком в пол-экрана. */
.kit .kit-own-rev { padding: var(--sp-4) var(--sp-5); }
.kit .kit-own-rev .wrap { max-width: none; padding: 0; }

/* оценка звёздами */
.kit .pw-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0; padding: 0; border: 0; background: none; }
.kit .pw-rate-t { font-size: 16px; font-weight: 600; color: var(--brand-ink); }
.kit .pw-star { width: 30px; height: 30px; padding: 0; color: var(--border);
  background: none; border: 0; cursor: pointer; }
.kit .pw-star svg { width: 26px; height: 26px; display: block; }
.kit .pw-star.on { color: #E8A33D; }
.kit .pw-star:focus-visible { outline: 0; box-shadow: var(--ring); border-radius: var(--r-sm); }
.kit .pw-rate-avg { font-size: 14px; color: var(--muted); }
.kit .pw-rate-thanks { font-size: 15px; color: var(--ok-ink); font-weight: 600; }

/* отзывы: список и форма */
.kit .pw-rev { margin: 14px 0 0; }
.kit .pw-rev-empty { border: 0; border-radius: var(--r-md); background: #fff; padding: 14px 16px;
  text-align: left; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kit .pw-rev-empty b { font-size: 16px; color: var(--ink); margin: 0; }
.kit .pw-rev-empty p { margin: 0; flex: 1; min-width: 220px; font-size: 14px; line-height: 1.5;
  color: var(--muted); }
.kit .pw-rev-list { gap: 10px; margin-bottom: 12px; }
.kit .pw-rev-i { border: 0; border-radius: var(--r-md); background: #fff; padding: 13px 16px; }
.kit .pw-rev-i .n { font-size: 15px; color: var(--ink); }
.kit .pw-rev-i .d { font-size: 13px; color: var(--faint); }
.kit .pw-rev-i .s { color: #E8A33D; }
.kit .pw-rev-i p { font-size: 15px; line-height: 1.55; color: var(--text); }
.kit .pw-rev-form { border: 0; border-radius: var(--r-md); background: #fff;
  padding: 16px 18px; margin-top: 10px; }
.kit .pw-rev-form label { font-size: 13px; color: var(--muted); }
.kit .pw-rev-form input, .kit .pw-rev-form textarea { border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 15px; color: var(--ink); }
.kit .pw-rev-form textarea { min-height: 92px; }
.kit .pw-rev-form input:focus, .kit .pw-rev-form textarea:focus { outline: 0;
  border-color: var(--brand); box-shadow: var(--ring); }
.kit .pw-rev-msg { font-size: 14px; color: var(--muted); }

/* кнопки виджетов — кнопки кита */
.kit .kit-own-rev .btn, .kit .pw-rev .btn {
  min-height: 44px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-md);
  font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--brand); color: #fff; display: inline-flex; align-items: center; }
.kit .kit-own-rev .btn:hover, .kit .pw-rev .btn:hover { background: var(--brand-ink); color: #fff; }

/* картинка блока в правой колонке — вровень с колонкой чтения */
.kit-side-shot { margin: 0; }
.kit-side-shot img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); display: block; }
.kit-side-shot figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 10px; }

/* ── калькулятор: ровная сетка ─────────────────────────────────
   Было: значение прижималось к правому краю через margin-left:auto,
   у строк разной длины числа не выстраивались в колонку. Стало —
   явная сетка «название / значение», и обе строки совпадают. */
.kit-calc { align-items: stretch; }
.kit-calc-rows { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.kit-calc-row label { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 12px; margin-bottom: 10px; }
.kit-calc-row label b { font-size: 16px; color: var(--ink); }
.kit-calc-row label > span { text-align: right; white-space: nowrap; }
.kit-calc-row label > span span { font-size: 22px; font-weight: 700; color: var(--brand); }
.kit-calc-row label > span i { font-style: normal; font-size: 14px; color: var(--muted); }
.kit-calc-row + .kit-calc-row { margin-top: 0; }
.kit-calc-scale { display: flex; justify-content: space-between; margin-top: 6px; }
.kit-calc-scale i { font-style: normal; font-size: 12px; color: var(--faint);
  font-variant-numeric: var(--num); }
.kit-calc-out { display: flex; flex-direction: column; justify-content: center; }

/* ── авторская врезка ─────────────────────────────────────────
   Компактная строка: портрет, имя, одна фраза о методе и соцсети.
   Ни подписи-рубрики, ни должности — только то, что читателю нужно. */
.kit-author { display: flex; gap: 16px; align-items: center; padding: 14px 18px;
  border-radius: var(--r-lg); background: var(--surface-2); }
.kit-author img { width: 56px; height: 56px; border-radius: 999px; flex: none; object-fit: cover; }
.kit-author-b { flex: 1; min-width: 0; }
.kit-author b { display: block; font-size: 17px; line-height: 1.2; }
.kit-author b a { color: var(--ink); }
.kit-author b a:hover { color: var(--brand-ink); text-decoration: none; }
.kit-author p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 4px 0 0;
  max-width: 62ch; }

.kit-socs { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.kit-soc { display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
  padding: 0 14px; border-radius: var(--r-pill); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border); color: var(--text);
  font-size: 14px; font-weight: 500; }
.kit-soc svg { color: var(--soc); display: block; }
.kit-soc:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--soc);
  color: var(--ink); text-decoration: none; }
.kit-sec--author { padding-top: 0; padding-bottom: var(--sp-5); }
@media (max-width: 860px) { .kit-author { flex-wrap: wrap; } .kit-socs { width: 100%; } }


/* ── маркер в прозе ────────────────────────────────────────────
   Подсвечиваем только числа с единицами и названия протоколов и
   программ — то, что человек и так выхватывает глазами. Не больше
   трёх на абзац, иначе подсветка перестаёт что-либо значить. */
.kit mark.kit-mark { background: #FFF0B8; color: var(--ink); padding: 1px 5px;
  border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  font-weight: 500; }
@media print { .kit mark.kit-mark { background: none; text-decoration: underline; } }

/* длинные адреса и токены не рвут вёрстку на узком экране */
.kit p, .kit li, .kit td, .kit .kit-line b, .kit .kit-chk i { overflow-wrap: anywhere; }

/* печать: без интерфейса, все вопросы раскрыты */
@media print {
  .kit .nav, .kit .footer, .kit .mobile-menu, .kit .kit-own-rev,
  .kit .pwtg-ov, .kit .kit-video, .kit .kit-calc, .kit .kit-toc { display: none !important; }
  .kit .kit-faq .a { display: block !important; }
  .kit .kit-sec { padding: 14px 0; break-inside: avoid; }
  .kit-org, .kit-chk, .kit-case, .kit-supcol { background: none !important;
    box-shadow: inset 0 0 0 1px var(--border) !important; }
}

/* ── наши материалы про сервис ─────────────────────────────────── */
.kit-rel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--surface-2); }
.kit-rel:hover { background: var(--brand-bg); text-decoration: none; }
.kit-rel b { font-size: 16px; color: var(--ink); line-height: 1.4; }
.kit-rel:hover b { color: var(--brand-ink); }
.kit-rel i { font-style: normal; font-size: 13px; color: var(--faint); }

/* ── иконки сетей в строках поддержки ──────────────────────────── */
.kit .kit-line-ico { display: inline-flex; color: var(--soc, var(--muted)); flex: none; }
.kit .kit-line-ico svg { display: block; }

/* ── схема экрана эфира ────────────────────────────────────────
   Переверстано с нуля: раньше это были три плитки под тёмным
   прямоугольником и читалось как набор случайных карточек. */
.kit-mock { margin: 22px 0 0; }
.kit-mock-screen { display: grid; grid-template-columns: 1.85fr 1fr; gap: 12px;
  padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.kit-mock-player { position: relative; border-radius: var(--r-md); min-height: 236px;
  background: radial-gradient(120% 120% at 20% 0%, #2A3168 0%, #171B33 55%, #10121F 100%); }
.kit-mock-banner { position: absolute; left: 16px; right: 16px; bottom: 52px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border-radius: 10px; background: var(--brand); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); }
.kit-mock-banner span { font-size: 14px; font-weight: 600; color: #fff; }
.kit-mock-banner em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--brand-ink);
  background: #fff; border-radius: 7px; padding: 5px 10px; white-space: nowrap; }
.kit-mock-bar { position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 10px; }
.kit-mock-bar .live { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--bad); border-radius: 4px; padding: 3px 7px; }
.kit-mock-bar .ln { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.24); }
.kit-mock-bar .ln i { display: block; width: 62%; height: 100%; border-radius: 99px; background: #fff; }
.kit-mock-bar time, .kit-mock-bar b { font-size: 11.5px; color: rgba(255,255,255,.78);
  font-variant-numeric: var(--num); font-weight: 500; }
.kit-mock-bar b { padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.14); }

.kit-mock-chat { border-radius: var(--r-md); background: var(--surface); padding: 12px;
  display: flex; flex-direction: column; gap: 9px; box-shadow: inset 0 0 0 1px var(--border); }
.kit-mock-chat-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kit-mock-chat .msg { display: flex; gap: 8px; align-items: flex-start; }
.kit-mock-chat .msg i { width: 22px; height: 22px; border-radius: 999px; flex: none; }
.kit-mock-chat .msg span { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.kit-mock-chat .msg b { display: block; font-size: 12px; color: var(--ink); }
.kit-mock-field { margin-top: auto; border: 1px dashed var(--border); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; color: var(--faint); }

.kit-mock-pin { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
  font-variant-numeric: var(--num); }
.kit-mock-pin--1 { position: absolute; left: 16px; top: 16px; }
/* вторая метка стоит в потоке, в заголовке чата — модификатор нужен,
   чтобы её нельзя было случайно оторвать вслед за первой */
.kit-mock-pin--2 { position: static; margin-right: 8px; vertical-align: middle; }

.kit-mock-legend { list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kit-mock-legend li { display: flex; gap: 10px; align-items: flex-start; }
.kit-mock-legend li > span { display: inline-grid; place-items: center; width: 22px; height: 22px;
  flex: none; border-radius: 999px; background: var(--brand-bg); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; margin-top: 2px; }
.kit-mock-legend b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.kit-mock-legend div { font-size: 14px; line-height: 1.5; color: var(--muted); }
.kit-mock figcaption { font-size: 14px; color: var(--faint); margin-top: 14px; }
@media (max-width: 860px) {
  .kit-mock-screen { grid-template-columns: 1fr; }
  .kit-mock-legend { grid-template-columns: 1fr; }
}

/* ── новости из телеграм-канала сервиса ────────────────────────── */
.kit-tg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  align-items: start; }
.kit-tg iframe { width: 100%; min-height: 300px; border: 0; border-radius: var(--r-lg);
  background: var(--surface-2); display: block; }
@media (max-width: 1000px) { .kit-tg { grid-template-columns: 1fr; } }

/* ── кнопка на спецпредложении ─────────────────────────────────────────
   Белая на градиенте: любая заливка из палитры на синем фоне тонет. */
.kit .kbtn--offer { align-self: flex-start; margin-top: var(--sp-2);
  background: #fff; color: var(--pick-ink); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.kit .kbtn--offer:hover { background: #F2EBFE; color: var(--pick-ink); text-decoration: none; }
.kit .kbtn--offer svg { flex: none; }

/* ── «Спросите нейросети» ──────────────────────────────────────────────
   Диалог, а не форма: ответ приходит в ленту, вопросы-подсказки рядом. */
.kit-ask { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FBFAFF 0%, var(--surface) 60%);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.kit-ask-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.kit-ask-head svg { flex: none; margin-top: 2px; }
.kit-ask-head span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

/* лента появляется только когда есть о чём: пустая коробка выглядит поломкой */
.kit-ask-log { display: none; flex-direction: column; gap: var(--sp-3);
  max-height: 420px; overflow-y: auto; scroll-behavior: smooth; }
.kit-ask.on .kit-ask-log { display: flex; }
.kit-msg { max-width: 88%; padding: 12px 16px; border-radius: var(--r-md);
  font-size: var(--fs-body); line-height: 1.6; white-space: pre-wrap; }
.kit-msg--u { align-self: flex-end; background: var(--brand); color: #fff;
  border-bottom-right-radius: var(--r-sm); }
.kit-msg--a { align-self: flex-start; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); border-bottom-left-radius: var(--r-sm); }
.kit-msg--a.wait { color: var(--faint); }
.kit-msg--a.err { background: var(--bad-bg); border-color: #F6C9CF; color: var(--bad-ink); }

.kit-ask-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kit-ask-chip { font: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); transition: background .15s, border-color .15s; }
.kit-ask-chip:hover { background: var(--pick-bg); border-color: #D8C6FA; color: var(--pick-ink); }

.kit-ask-form { display: flex; gap: var(--sp-3); align-items: flex-end; }
.kit-ask-form textarea { flex: 1; min-height: 46px; max-height: 140px; resize: vertical;
  font: inherit; font-size: var(--fs-body); color: var(--ink); padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.kit-ask-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.kit-ask-form textarea::placeholder { color: var(--faint); }
.kit .kit-ask-send { flex: none; }
.kit .kit-ask-send[disabled] { background: var(--surface-3); color: var(--faint); cursor: progress; }
.kit .kit-ask-send[disabled] svg { display: none; }
@media (max-width: 600px) {
  .kit-ask { padding: var(--sp-4); }
  .kit-ask-form { flex-direction: column; align-items: stretch; }
  .kit-msg { max-width: 100%; }
}

/* ── правки после вычитки ──────────────────────────────────────────────
   1. Ценник в таблице тарифов рвался посреди суммы: «от 700» на одной
   строке, «₽/мес» на другой. Колонка узкая, потому что справа стоит
   длинное «Что входит» — запрещаем перенос там, где число со знаком. */
.kit-price td.nb, .kit-price th:nth-child(2),
.kit-price td:first-child b.nb { white-space: nowrap; }
.kit-price .kit-spec .v.nb { white-space: nowrap; }
/* длинные ячейки, наоборот, рвём где угодно: у некоторых сервисов в поле
   цены лежит целое предложение, и оно распирало таблицу за контейнер */
.kit-price td, .kit-price th { overflow-wrap: anywhere; }
.kit-price table { table-layout: auto; width: 100%; }

/* 2. Калькулятор дёргался при протяжке ползунка: строка расшифровки
   меняла число строк (одна → три), а колонка результата центрирована
   по вертикали — от этого прыгала и сумма. Резервируем место под
   расшифровку и фиксируем ширину цифр. */
.kit-calc-out b { font-variant-numeric: tabular-nums; }
.kit-calc-out i { min-height: 4.5em; }
.kit-calc-row label > span span { display: inline-block; min-width: 3.6em;
  text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kit-calc-out i { min-height: 0; } }

/* ── защита от распирания контейнера ───────────────────────────────────
   У грид-элементов min-width по умолчанию auto: широкая таблица или
   длинный адрес внутри колонки растягивают всю сетку за края страницы.
   На карточке CDNvideo это разносило вёрстку целиком. */
.kit-2 > *, .kit-3 > *, .kit-feat > *, .kit-split > *, .kit-split--3 > *,
.kit-price > *, .kit-main > *, .kit-score > *, .kit-score-bars > *,
.kit-sup > *, .kit-calc > *, .kit-owns > *, .kit-alts > *, .kit-org-wrap > *,
.kit-checks > *, .kit-techs > *, .kit-tg > *, .kit-mock-screen > * { min-width: 0; }
.kit .tbl-wrap { max-width: 100%; }
.kit p, .kit li, .kit td, .kit th, .kit dd, .kit dt,
.kit .kit-spec .v, .kit .kit-alt i, .kit figcaption { overflow-wrap: break-word; }

/* группирующая строка в таблице тарифов: у части сервисов тарифы идут
   семьями («Трансляции», «Видеохостинг»), и без разделителя таблица
   читается как один сплошной список несопоставимых пакетов */
.kit-price tr.grp td { background: var(--surface-2); font-weight: 600; color: var(--ink);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-top: 14px; }

/* подпись поверх ролика не должна перерастать сам кадр: у части сервисов
   описание длиной в абзац, а высота у .kit-video жёстко 16:9 */
.kit-video-cap { max-height: 100%; overflow: hidden; }
.kit-video-cap i { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
@media (max-width: 560px) {
  .kit-video-cap { padding: 26px 14px 12px; }
  .kit-video-cap b { font-size: 15px; }
  .kit-video-cap i { -webkit-line-clamp: 2; font-size: 13px; }
}
.kit-video-out { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* ── хронология сервиса ────────────────────────────────────────────────
   Вертикальная лента: слева дата, справа что произошло. Линия рисуется
   псевдоэлементом, чтобы не плодить пустых узлов под каждую точку. */
.kit-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.kit-tl::before { content: ""; position: absolute; left: 148px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border); }
.kit-tl-i { display: grid; grid-template-columns: 132px 34px minmax(0, 1fr); align-items: start;
  padding: 0 0 26px; }
.kit-tl-i:last-child { padding-bottom: 0; }
/* ⚠️ Колонку задаём КАЖДОМУ элементу. Псевдоэлемент — первый в потоке грида,
   и если явную колонку получает только он, курсор автораскладки уезжает
   вперёд: дата встаёт в третью колонку, а текст падает на вторую строку. */
.kit-tl-i time { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 600;
  color: var(--brand); font-variant-numeric: var(--num); text-align: right; padding-top: 2px; }
.kit-tl-i::before { content: ""; grid-column: 2; grid-row: 1; width: 12px; height: 12px;
  border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 3px var(--brand);
  margin: 6px auto 0; }
.kit-tl-i > div { grid-column: 3; grid-row: 1; }
.kit-tl-i b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.kit-tl-i p { margin: 0; font-size: 16px; line-height: 1.6; }
@media (max-width: 700px) {
  .kit-tl::before { left: 5px; }
  .kit-tl-i { grid-template-columns: 12px minmax(0, 1fr); gap: 0 14px; }
  .kit-tl-i time { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 4px; }
  .kit-tl-i::before { grid-column: 1; grid-row: 1 / span 2; }
  .kit-tl-i > div { grid-column: 2; grid-row: 2; }
}

/* ── цитата из пресс-релиза ────────────────────────────────────────── */
.kit-pq { margin: 0; background: var(--surface-2); border-radius: var(--r-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: 14px; }
.kit-pq blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink);
  position: relative; padding-left: 22px; }
.kit-pq blockquote::before { content: "«"; position: absolute; left: 0; top: -6px;
  font-size: 34px; line-height: 1; color: var(--brand); opacity: .5; }
.kit-pq figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.kit-pq figcaption b { font-size: 15px; color: var(--ink); }
.kit-pq figcaption i { font-style: normal; font-size: 13px; color: var(--muted); }
.kit-pq figcaption a { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 13px; color: var(--brand); }

/* ── схемы из боевых карточек: разбор адреса плеера и цепочка событий ──
   ⚠️ Эти классы приехали из старой вёрстки вместе с полем html у блоков,
   а стилей под них в ките не было вообще — на RUTUBE, VK Видео и YouTube
   схемы вываливались голыми div'ами. */
.kit .sv-url { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface-2); }
.kit .sv-url > b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 12px; }
.kit .sv-url-line { overflow-x: auto; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.kit .sv-url-line code { white-space: nowrap; font-size: 14px; color: var(--muted); background: none;
  padding: 0; }
.kit .sv-url-line em { font-style: normal; font-weight: 600; color: var(--brand); }
.kit .sv-url-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 20px; margin-top: 16px; }
.kit .sv-url-g > div { min-width: 0; }
.kit .sv-url-g b { display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kit .sv-url-g span { display: block; font-size: 14px; line-height: 1.5; color: var(--muted);
  margin-top: 2px; }
.kit p.sv-tnote, .kit .sv-tnote { font-size: 13px; line-height: 1.5; color: var(--faint); }

.kit .sv-flow { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface-2); }
.kit .sv-flow > b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 14px; }
.kit .sv-flow-r { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; }
.kit .sv-flow-r > div { display: flex; gap: 11px; align-items: flex-start; min-width: 0;
  background: var(--surface); border-radius: var(--r-md); padding: 13px 15px;
  box-shadow: inset 0 0 0 1px var(--border); }
.kit .sv-flow-r i { flex: none; width: 24px; height: 24px; border-radius: 999px; font-style: normal;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  display: grid; place-items: center; }
.kit .sv-flow-r span { display: block; min-width: 0; font-size: 14px; line-height: 1.5;
  color: var(--muted); }
.kit .sv-flow-r span b { display: block; font-size: 14px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── поддержка: колонок ровно столько, сколько блоков ──────────────────
   Было жёстко три, а у девяти карточек из двенадцати колонка одна —
   узкий столбик с шестью длинными чипами выглядел поломкой. */
.kit-sup--1 { grid-template-columns: minmax(0, 1fr); }
.kit-sup--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-sup--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .kit-sup, .kit-sup--1, .kit-sup--2, .kit-sup--3 { grid-template-columns: 1fr; }
}

/* ── вертикальные ролики (Shorts, Клипы) ───────────────────────────────
   Тот же фасад, что у обычного видео, но контейнер 9:16: в 16:9 шортс
   встаёт с чёрными полями по бокам и читается как ошибка вёрстки. */
.kit-shorts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  margin-top: 22px; }
.kit-short { margin: 0; min-width: 0; }
.kit .kit-video--v { aspect-ratio: 9 / 16; }
.kit .kit-video--v .kit-play { width: 56px; height: 56px; }
.kit-short figcaption { margin-top: 11px; }
.kit-short figcaption b { display: block; font-size: 15px; color: var(--ink); }
.kit-short figcaption span { display: block; font-size: 14px; line-height: 1.5;
  color: var(--muted); margin-top: 3px; }
.kit-short figcaption a { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 13px; color: var(--brand); }
@media (max-width: 1000px) { .kit-shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit-shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kit .kit-video--v .kit-play { width: 44px; height: 44px; } }

/* готовый код вставки: то, что можно скопировать и положить на страницу */
.kit-code { margin-top: 18px; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border); background: var(--surface-2); }
.kit-code > b { display: block; padding: 13px 18px; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--border); }
.kit-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; background: var(--surface); }
.kit-code code { font-size: 13px; line-height: 1.7; color: var(--text); background: none;
  padding: 0; white-space: pre; }
.kit-code em { font-style: normal; color: var(--brand); font-weight: 600; }
.kit-code > span { display: block; padding: 0 18px 14px; font-size: 13px; color: var(--muted); }

/* ══ СТРАНИЦА РАЗДЕЛА КАТАЛОГА ═══════════════════════════════════════════
   Пара к карточке сервиса: те же токены, свои компоненты. */

/* шапка раздела — единственный цветной блок на странице, как оффер у карточки */
.kit-cat-hero { position: relative; overflow: hidden; border-radius: 24px; color: #fff;
  padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px;
  align-items: center; box-shadow: var(--sh-3);
  background: linear-gradient(135deg, #2B3AA8 0%, #3B4FD8 46%, #7A45D6 100%); }
.kit-cat-hero .blob { position: absolute; border-radius: 999px;
  background: rgba(255,255,255,.07); pointer-events: none; }
.kit-cat-hero-t { position: relative; min-width: 0; }
.kit-cat-hero h1 { color: #fff; font-size: 42px; line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 14px; }
.kit-cat-hero p { color: #DDE3FE; font-size: var(--fs-lead); line-height: 1.55; margin: 0;
  max-width: 620px; }
.kit-cat-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 26px; }
.kit .kit-cat-cta .kbtn--secondary { background: rgba(255,255,255,.16); color: #fff; }
.kit .kit-cat-cta .kbtn--secondary:hover { background: rgba(255,255,255,.26); color: #fff; }
.kit-cat-stats { position: relative; display: flex; flex-direction: column; gap: 14px; }
.kit-cat-stat { background: rgba(255,255,255,.12); border-radius: var(--r-md); padding: 14px 18px; }
.kit-cat-stat b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: var(--num); }
.kit-cat-stat span { display: block; font-size: 13px; line-height: 1.45; color: #C9D3F7;
  margin-top: 4px; }
@media (max-width: 900px) {
  .kit-cat-hero { grid-template-columns: 1fr; padding: 28px; gap: 26px; }
  .kit-cat-hero h1 { font-size: 32px; }
}

/* витрина сервисов раздела */
.kit-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kit .kit-svc { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5);
  background: var(--surface); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.kit .kit-svc:hover { border-color: #C7CEFA; box-shadow: var(--sh-2); text-decoration: none;
  transform: translateY(-2px); }
.kit-svc-h { display: flex; gap: 12px; align-items: center; min-width: 0; }
.kit-svc-h img { border-radius: 9px; flex: none; object-fit: contain; }
.kit-svc-h b { display: block; font-size: 17px; color: var(--ink); }
.kit-svc-h i { display: block; font-style: normal; font-size: 13px; color: var(--faint); }
.kit .kit-svc p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.kit-svc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.kit-svc-chips .chip { min-height: 26px; font-size: 12px; padding: 3px 10px; }
.kit-cat-more { margin: 20px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.kit-cat-more b { color: var(--ink); }
@media (max-width: 1000px) { .kit-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kit-svcs { grid-template-columns: 1fr; } }

/* сводная таблица раздела */
.kit-cmp td a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
  color: var(--ink); }
.kit-cmp td a img { border-radius: 6px; flex: none; object-fit: contain; }

/* ссылки на соседние разделы */
.kit-catlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kit .kit-catlink { display: block; min-width: 0; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 18px; background: var(--surface); }
.kit .kit-catlink:hover { border-color: #C7CEFA; background: var(--brand-bg);
  text-decoration: none; }
.kit-catlink b { display: block; font-size: 15px; color: var(--ink); }
.kit-catlink i { display: block; font-style: normal; font-size: 13px; color: var(--faint);
  margin-top: 2px; }
@media (max-width: 900px) { .kit-catlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit-catlinks { grid-template-columns: 1fr; } }

/* длинные разделы приезжают из cat_copy: своих классов там ровно два */
.kit .cx-p { max-width: var(--measure); font-size: var(--fs-body); line-height: 1.65;
  color: var(--text); margin: 0 0 14px; }
.kit .art-fig { margin: 22px 0 0; }
.kit .art-fig figcaption { font-size: 14px; line-height: 1.55; color: var(--muted);
  margin-top: 11px; }

/* ── длинные разделы страницы категории ────────────────────────────────
   Разметка приезжает из cat_copy как есть: инлайновые сетки и флексы.
   У их детей min-width по умолчанию auto — широкая ячейка распирает
   схему за края страницы, поэтому обнуляем скопом внутри .kit-long. */
/* ⚠️ Одна колонка на весь длинный текст, ровно как в макете (860px).
   Пока проза стояла в 760px, а схемы уходили во всю ширину листа, блоки
   не сходились ни левым, ни правым краем и читались как сбитая вёрстка. */
.kit-long { max-width: 860px; }
.kit-long .cx-p, .kit-long .cx-note, .kit-long p { max-width: 100%; }
.kit-long > p:first-child { margin-top: 0; }
.kit-long [style*="display:grid"] > *, .kit-long [style*="display:flex"] > * { min-width: 0; }
.kit-long table { width: 100%; border-collapse: collapse; }
.kit-long > table, .kit-long figure > table { display: block; overflow-x: auto; }
.kit-long img, .kit-long svg { max-width: 100%; }
/* проза держит ту же колонку чтения, что и на карточке сервиса,
   схемы под ней идут во всю ширину — как «Как это выглядит внутри» */
.kit .cx-p { max-width: 860px; }
.kit .cx-note { max-width: 860px; font-size: var(--fs-sm); line-height: 1.6;
  color: var(--muted); }
.kit .art-fig { margin: 22px 0 24px; max-width: 100%; }
.kit .art-fig + .cx-p { margin-top: 24px; }

/* балл порога входа на карточке раздела */
.kit-svc-score { margin-left: auto; flex: none; display: inline-grid; place-items: center;
  min-width: 38px; height: 38px; border-radius: 999px; background: var(--brand-bg);
  color: var(--brand-ink); font-size: 15px; font-weight: 700;
  font-variant-numeric: var(--num); }

/* срез по юрлицам и соответствию */
.kit-legal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kit-legal-i { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px 18px; background: var(--surface); }
.kit-legal-i b { display: flex; align-items: baseline; gap: 6px; font-size: 30px;
  font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: var(--num); }
.kit-legal-i b span { font-size: 13px; font-weight: 500; color: var(--faint); }
.kit-legal-i i { display: block; font-style: normal; font-size: 15px; color: var(--ink);
  margin-top: 10px; }
.kit-legal-i > span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted);
  margin-top: 3px; }
@media (max-width: 1000px) { .kit-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit-legal { grid-template-columns: 1fr; } }

/* выноска сбоку от колонки чтения: без неё узкий текст висит
   посреди пустой секции и читается как сбитая вёрстка */
.kit-callout { display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  background: var(--warn-bg); border-radius: var(--r-lg); padding: var(--sp-5); }
.kit-callout svg { flex: none; margin-top: 2px; }
.kit-callout b { display: block; font-size: 15px; color: var(--warn-ink); margin-bottom: 6px; }
.kit-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }

/* ── куда уходит рекламный бюджет ──────────────────────────────────────
   Подписи вынесены из полосы в легенду: в сегменте на 18% они не помещались
   и текст лип к краям, а цвет сегмента перестал совпадать со словом в тексте. */
.kit-budget { margin: 22px 0 24px; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface); }
.kit-budget-t { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; }
/* ⚠️ Класс .kit-bar уже занят полосками «порога входа» на карточке сервиса.
   Первая версия этой схемы его переиспользовала и сломала блок на всех
   183 карточках: каждый критерий встал полосой в 46px со скрытым переполнением. */
.kit-bd { display: flex; height: 46px; border-radius: 12px; overflow: hidden;
  box-shadow: var(--sh-1); }
.kit-bd-s { display: grid; place-items: center; color: #fff; min-width: 0; }
.kit-bd-s b { font-size: 15px; font-weight: 700; font-variant-numeric: var(--num); }
.kit-bd-s--ok { background: linear-gradient(135deg, #0F8A4D, #17A85F); }
.kit-bd-s--warn { background: linear-gradient(135deg, #C88A12, #E0A72B); }
.kit-bd-s--bad { background: linear-gradient(135deg, #C2233A, #DC4055); }
.kit-bd-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin-top: 18px; }
.kit-bd-l { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.kit-bd-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; margin-top: 5px; }
.kit-bd-dot--ok { background: #0F8A4D; }
.kit-bd-dot--warn { background: #C88A12; }
.kit-bd-dot--bad { background: #C2233A; }
.kit-bd-l b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 15px; color: var(--ink); }
.kit-bd-l b span { font-size: 14px; font-weight: 600; color: var(--muted);
  font-variant-numeric: var(--num); }
.kit-bd-l p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.kit-budget-n { max-width: var(--measure); margin: 20px 0 0; font-size: 15px; line-height: 1.6;
  color: var(--text); padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  .kit-bd-legend { grid-template-columns: 1fr; gap: 12px; }
  .kit-bd { height: 38px; }
}

/* выноска внутри колонки — отдельным блоком, а не колонкой справа */
.kit-long .kit-callout { margin-top: 20px; }
.kit-budget, .kit-budget-n { max-width: 100%; }

/* лица раздела в плитке «Другие разделы каталога» */
.kit-catlink-ico { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.kit-catlink-ico img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain;
  background: var(--surface-2); flex: none; }
.kit-catlink-n { font-size: 12px; font-weight: 600; color: var(--faint);
  font-variant-numeric: var(--num); }
.kit .kit-catlink { padding: 16px 18px; }

/* таблицы внутри длинных разделов приезжают со своими классами из cat_copy */
.kit .cx-tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); margin: 20px 0 4px;
  box-shadow: inset 0 0 0 1px var(--border); }
.kit table.cx-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.kit table.cx-tbl th { text-align: left; font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); padding: 12px 16px; white-space: nowrap; }
.kit table.cx-tbl td { padding: 13px 16px; border-top: 1px solid var(--border);
  line-height: 1.55; color: var(--text); vertical-align: top; }
.kit table.cx-tbl td:first-child { color: var(--ink); font-weight: 500; }
.kit p.cx-hint { margin: 18px 0 0; font-size: 13px; color: var(--faint); }
@media (min-width: 900px) { .kit p.cx-hint { display: none; } }

/* ══ ХАБ КАТАЛОГА ════════════════════════════════════════════════════════ */

/* поиск и фильтр по разделам */
.kit-find { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.kit-find input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-body);
  color: var(--ink); padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
.kit-find input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.kit-find input::placeholder { color: var(--faint); }
.kit-find-n { font-size: 14px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: var(--num); }

.kit-chipbar { display: flex; flex-wrap: wrap; gap: 8px; }
.kit .chip--f { font: inherit; font-size: 14px; cursor: pointer; gap: 7px;
  background: var(--surface-2); color: var(--text); border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s; }
.kit .chip--f span { font-size: 12px; color: var(--faint); font-variant-numeric: var(--num); }
.kit .chip--f:hover { background: var(--brand-bg); color: var(--brand-ink); }
.kit .chip--f.active { background: var(--brand); color: #fff; }
.kit .chip--f.active span { color: #C9D3F7; }

.kit-none { display: none; margin: 22px 0 0; font-size: var(--fs-body); color: var(--muted); }
.kit-none.on { display: block; }

/* раздел внутри витрины каталога */
.kit-sec-cat { margin-top: var(--sp-7); }
.kit-sec-cat[hidden] { display: none; }
.kit-sec-cat-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  margin-bottom: 6px; }
.kit-sec-cat-h h3 { display: flex; align-items: baseline; gap: 10px; margin: 0;
  font-size: 24px; letter-spacing: -.01em; }
.kit .kit-sec-cat-h h3 a { color: var(--ink); }
.kit .kit-sec-cat-h h3 a:hover { color: var(--brand); text-decoration: none; }
.kit-sec-cat-h h3 span { font-size: 15px; font-weight: 500; color: var(--faint);
  font-variant-numeric: var(--num); }
.kit .kit-sec-cat-go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; color: var(--brand); white-space: nowrap; }
.kit-sec-cat-l { max-width: 860px; margin: 0 0 18px; font-size: var(--fs-sm);
  line-height: 1.6; color: var(--muted); }
.kit .kit-svc[hidden] { display: none; }
@media (max-width: 700px) {
  .kit-sec-cat-h h3 { font-size: 20px; }
  .kit .kit-sec-cat-go { margin-left: 0; }
}

/* выжимка «Коротко» строкой — для карточек с коротким описанием */
/* ── выжимка «Коротко» строкой ─────────────────────────────────────────
   Отдельная фигура для карточек с коротким описанием: не боковая панель
   и не список «ключ — значение», а спек-полоса. Равные колонки, тонкие
   разделители, подпись капителью над значением. Кнопка живёт под полосой:
   внутри она читалась как шестая колонка неизвестно чего. */
.kit-facts--row { margin-top: 22px; }
.kit-facts--row .kit-spec { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); }
.kit-facts--row .kit-spec div { display: block; padding: 16px 20px; border: 0;
  border-left: 1px solid var(--border); min-width: 0; }
.kit-facts--row .kit-spec div:first-child { border-left: 0; }
.kit-facts--row .kit-spec .k { display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint); line-height: 1.3; }
.kit-facts--row .kit-spec .v { display: block; margin-top: 6px; text-align: left;
  font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.kit .kit-facts--row .kbtn { margin-top: 16px; }
@media (max-width: 860px) {
  .kit-facts--row .kit-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-facts--row .kit-spec div { border-left: 0; border-top: 1px solid var(--border); }
  .kit-facts--row .kit-spec div:nth-child(2n) { border-left: 1px solid var(--border); }
  .kit-facts--row .kit-spec div:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 480px) {
  .kit-facts--row .kit-spec { grid-template-columns: 1fr; }
  .kit-facts--row .kit-spec div { border-left: 0; border-top: 1px solid var(--border); }
  .kit-facts--row .kit-spec div:first-child { border-top: 0; }
  .kit .kit-facts--row .kbtn { width: 100%; }
}

/* развёрнутое ограничение — карточкой, а не пунктом списка */
.kit-case--con { background: var(--bad-bg); }
.kit-case--con h3 { color: var(--bad-ink); }
.kit-case--con p { color: var(--ink); }

/* источники: колонок ровно столько, сколько карточек (до трёх) */
.kit-srcs { display: grid; gap: 16px; }
.kit-srcs--1 { grid-template-columns: minmax(0, 1fr); }
.kit-srcs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-srcs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .kit-srcs, .kit-srcs--2, .kit-srcs--3 { grid-template-columns: 1fr; } }

/* ── поддержка: длинные значения не рвутся посреди слова ───────────────
   Почтовый адрес ломался как «support@pixel / tools.ru», а подписи каналов
   в правой колонке — «Справ / ка и FAQ»: виновато overflow-wrap: anywhere
   на .kit-line b вместе с колонкой в треть ширины. */
.kit .kit-line { flex-wrap: wrap; }
.kit .kit-line b { overflow-wrap: normal; word-break: normal; min-width: 0; }
.kit .kit-line i { margin-left: auto; max-width: 62%; }
@media (max-width: 1100px) {
  .kit .kit-line { align-items: flex-start; }
  .kit .kit-line i { margin-left: 0; flex: 1 0 100%; text-align: left; padding-left: 26px; }
}
/* название юрлица: флаг после имени и приклеен к последнему слову */
.kit-org-name { display: block; }
.kit-org-name .flag { display: inline-block; width: 24px; height: 17px; margin-left: 9px;
  vertical-align: -2px; }

/* ── схема шагов ───────────────────────────────────────────────────────
   Своя фигура кита для «как это устроено»: пронумерованные карточки в ряд,
   у каждой может быть крупная цифра-показатель снизу. */
.kit-steps { margin: 22px 0 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface-2); }
.kit-steps > figcaption { font-size: 13px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.kit-steps ol { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kit-step { display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  background: var(--surface); border-radius: var(--r-md); padding: 16px 18px;
  box-shadow: inset 0 0 0 1px var(--border); }
.kit-step > i { flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--brand); color: #fff; font-style: normal; font-size: 13px;
  font-weight: 700; display: grid; place-items: center; font-variant-numeric: var(--num); }
.kit-step > div { min-width: 0; }
.kit-step b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 5px; }
.kit-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.kit-step-n { display: block; margin-top: 10px; font-size: 20px; font-weight: 700;
  color: var(--brand-ink); line-height: 1.1; font-variant-numeric: var(--num); }
.kit-steps-note { max-width: var(--measure); margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6;
  color: var(--muted); }

/* ранжированный график: подпись — полоса — значение */
.kit-rank { margin: 26px 0 0; padding: 26px 28px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.kit-rank > figcaption { font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.kit-rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  counter-reset: none; }
.kit-rk { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto;
  align-items: center; gap: 14px; margin: 0; padding: 0; }
.kit-rk::before { content: none; }
.kit-rk > b { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0;
  overflow-wrap: anywhere; }
.kit-rk-bar { display: block; height: 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
  min-width: 0; }
.kit-rk-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-ink)); }
.kit-rk-v { font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: var(--num); white-space: nowrap; }
.kit-rank-note { max-width: var(--measure); margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border); font-size: 15px; line-height: 1.6; color: var(--text); }
@media (max-width: 640px) {
  .kit-rank { padding: 20px 18px 18px; }
  .kit-rk { grid-template-columns: 1fr auto; row-gap: 6px; }
  .kit-rk-bar { grid-column: 1 / -1; }
}

/* шкала порогов: хорошо / надо улучшить / плохо */
.kit-bands { margin: 26px 0 0; padding: 26px 28px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.kit-bands > figcaption { font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.kit-bands ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.kit-band { margin: 0; padding: 0; }
.kit-band::before { content: none; }
.kit-band > b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.kit-band-d { display: block; margin: 3px 0 10px; font-size: 14px; line-height: 1.5;
  color: var(--muted); }
.kit-bands .kit-bd { height: 40px; }
.kit-bands .kit-bd-s b { font-size: 14px; padding: 0 8px; text-align: center; }
.kit-bands .kit-bd-legend { margin-top: 20px; }
.kit-bands .kit-bd-l b { font-size: 14px; }
@media (max-width: 640px) {
  .kit-bands { padding: 20px 18px 18px; }
  .kit-bands .kit-bd { height: 34px; }
  .kit-bands .kit-bd-s b { font-size: 12px; padding: 0 4px; }
}

/* было / стало — две колонки с примерами */
.kit-ba { margin: 26px 0 0; padding: 26px 28px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.kit-ba > figcaption { font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.kit-ba-h { display: grid; grid-template-columns: minmax(96px, 148px) 1fr 1fr; gap: 12px;
  padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.kit-ba-h span { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }
.kit-ba ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  margin-top: 10px; }
.kit-ba-r { display: grid; grid-template-columns: minmax(96px, 148px) 1fr 1fr; gap: 12px;
  align-items: stretch; margin: 0; padding: 0; }
.kit-ba-r::before { content: none; }
.kit-ba-r > b { align-self: center; font-size: 13px; font-weight: 600; color: var(--muted);
  min-width: 0; overflow-wrap: anywhere; }
.kit-ba-c { display: block; padding: 10px 14px; border-radius: var(--r-md);
  font-size: 15px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.kit-ba-c--was { background: var(--bad-bg); color: var(--bad-ink); }
.kit-ba-c--now { background: var(--ok-bg); color: var(--ok-ink); }
.kit-ba-c b { font-weight: 700; }
@media (max-width: 700px) {
  .kit-ba { padding: 20px 18px 18px; }
  .kit-ba-h { display: none; }
  .kit-ba-r { grid-template-columns: 1fr; gap: 6px; }
  .kit-ba-r > b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--faint); margin-top: 6px; }
}

/* карточка инструмента на витрине /instrumenty/ */
.kit-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kit .kit-tool { display: flex; flex-direction: column; gap: 10px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5);
  background: var(--surface); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.kit .kit-tool:hover { border-color: #C7CEFA; box-shadow: var(--sh-2); text-decoration: none;
  transform: translateY(-2px); }
.kit-tool-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 14px; background: var(--ti-bg); color: var(--ti);
  box-shadow: inset 0 0 0 1px var(--ti-ring), 0 2px 6px var(--ti-ring);
  transition: transform .18s ease, box-shadow .18s ease; }
.kit-tool-ico svg { width: 22px; height: 22px; display: block;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kit .kit-tool:hover .kit-tool-ico { transform: translateY(-1px) scale(1.05);
  box-shadow: inset 0 0 0 1px var(--ti-ring), 0 6px 14px var(--ti-ring); }
.kit .kit-tool > b { font-size: 17px; line-height: 1.35; color: var(--ink); }
.kit .kit-tool p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* ⚠️ Никакой разделительной черты над «Открыть»: на сетке из ста карточек
   сто линий превращаются в рябь. Отступ достаточно отделяет футер. */
.kit-tool-f { display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding-top: 10px; }
.kit-tool-f i { display: inline-flex; align-items: center; gap: 5px; font-style: normal;
  font-size: 14px; font-weight: 600; color: var(--ti); }
.kit .kit-tool:hover .kit-tool-f i { gap: 8px; }
.kit .kit-tool:hover { border-color: var(--ti-bd); }

/* цвет по разделу: девять пар «заливка + штрих». Живёт на классе .tint,
   поэтому одну и ту же палитру берут и карточки, и строки топа, и плитки. */
.kit .tint { --ti: #3B4FD8; --ti-bg: linear-gradient(145deg, #EEF1FE, #DFE5FD);
  --ti-ring: rgba(59, 79, 216, .16); --ti-bd: rgba(59, 79, 216, .42); }
.kit .tint[data-cat="seo"] { --ti: #6C3FD4;
  --ti-bg: linear-gradient(145deg, #F3ECFE, #E6DBFC); --ti-ring: rgba(108, 63, 212, .16); --ti-bd: rgba(108, 63, 212, .42); }
.kit .tint[data-cat="text"] { --ti: #A8410F;
  --ti-bg: linear-gradient(145deg, #FDEEE4, #FADFCE); --ti-ring: rgba(194, 81, 31, .16); --ti-bd: rgba(194, 81, 31, .42); }
.kit .tint[data-cat="spiski"] { --ti: #0A6069;
  --ti-bg: linear-gradient(145deg, #E4F6F7, #CFEDEF); --ti-ring: rgba(14, 124, 134, .16); --ti-bd: rgba(14, 124, 134, .42); }
.kit .tint[data-cat="reklama"] { --ti: #8F5400;
  --ti-bg: linear-gradient(145deg, #FFF3DF, #FCE7C2); --ti-ring: rgba(178, 106, 0, .18); --ti-bd: rgba(178, 106, 0, .44); }
.kit .tint[data-cat="kartinki"] { --ti: #A32565;
  --ti-bg: linear-gradient(145deg, #FEEAF3, #FBD8E8); --ti-ring: rgba(192, 50, 124, .16); --ti-bd: rgba(192, 50, 124, .42); }
.kit .tint[data-cat="doc"] { --ti: #0F613D;
  --ti-bg: linear-gradient(145deg, #E6F6EE, #D2EEE0); --ti-ring: rgba(20, 122, 77, .16); --ti-bd: rgba(20, 122, 77, .42); }
.kit .tint[data-cat="utils"] { --ti: #55700D;
  --ti-bg: linear-gradient(145deg, #F2F7E4, #E6EFCF); --ti-ring: rgba(85, 112, 13, .18); --ti-bd: rgba(85, 112, 13, .44); }
.kit .tint[data-cat="testy"] { --ti: #085B96;
  --ti-bg: linear-gradient(145deg, #E5F2FC, #CFE6F9); --ti-ring: rgba(11, 111, 184, .16); --ti-bd: rgba(11, 111, 184, .42); }

@media (max-width: 1000px) { .kit-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kit-tools { grid-template-columns: 1fr; } }

/* ── подборки, топ по просмотрам и цифры проекта на витрине инструментов ── */
.kit-sels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kit-sel { position: relative; border-radius: var(--r-lg); padding: 20px 22px 18px;
  background: var(--ti-bg); box-shadow: inset 0 0 0 1px var(--ti-ring); min-width: 0; }
.kit-sel > b { display: block; font-size: 18px; line-height: 1.3; color: var(--ink); }
.kit-sel > p { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.kit-sel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.kit-sel li { margin: 0; padding: 0; }
.kit-sel li::before { content: none; }
.kit .kit-sel a { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px var(--ti-ring); font-size: 13px; font-weight: 600;
  color: var(--ti); transition: background .15s ease, box-shadow .15s ease; }
.kit .kit-sel a:hover { background: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ti-bd); }

.kit-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kit .kit-top a { display: flex; gap: 12px; align-items: center; min-width: 0;
  padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease; }
.kit .kit-top a:hover { border-color: var(--ti-bd); box-shadow: var(--sh-1);
  text-decoration: none; }
.kit-top i { flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 9px; background: var(--ti-bg); color: var(--ti); font-style: normal;
  font-size: 13px; font-weight: 700; font-variant-numeric: var(--num);
  box-shadow: inset 0 0 0 1px var(--ti-ring); }
.kit-top b { font-size: 14px; font-weight: 600; line-height: 1.35; min-width: 0;
  overflow-wrap: anywhere; }

.kit-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kit .kit-num { display: block; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--ti-bg); box-shadow: inset 0 0 0 1px var(--ti-ring); min-width: 0;
  transition: box-shadow .15s ease, transform .15s ease; }
.kit .kit-num:hover { box-shadow: inset 0 0 0 1px var(--ti-bd), var(--sh-1);
  transform: translateY(-2px); text-decoration: none; }
.kit-num b { display: block; font-size: 30px; line-height: 1.05; font-weight: 700;
  color: var(--ti); font-variant-numeric: var(--num); }
.kit-num span { display: block; margin-top: 3px; font-size: 15px; font-weight: 600;
  color: var(--ink); }
.kit-num i { display: block; margin-top: 3px; font-style: normal; font-size: 13px;
  line-height: 1.45; color: var(--muted); }
@media (max-width: 1000px) {
  .kit-sels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kit-sels, .kit-top, .kit-nums { grid-template-columns: 1fr; }
}

/* чип раздела в цвете своего раздела — панель фильтров работает легендой */
.kit .chip--f.tint { background: var(--ti-bg); color: var(--ti);
  box-shadow: inset 0 0 0 1px var(--ti-ring); }
.kit .chip--f.tint:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ti-bd); }
.kit .chip--f.tint.active { background: var(--ti); color: #fff;
  box-shadow: inset 0 0 0 1px var(--ti); }
/* цветная метка у заголовка раздела */
.kit-sec-cat.tint .kit-sec-cat-h h3 { position: relative; padding-left: 16px; }
.kit-sec-cat.tint .kit-sec-cat-h h3::before { content: ''; position: absolute;
  left: 0; top: .28em; width: 6px; height: .95em; border-radius: 3px;
  background: var(--ti); }
.kit-sec-cat.tint .kit-sec-cat-go { color: var(--ti); }