/* ========================================================================
   КЦ ИНСАЙД — editorial-редизайн статей (kd- дизайн-система).
   Скоуп ТОЛЬКО под .kd-article (обёртка шорткода [kd_article]).
   Не конфликтует с темой и с существующими kc-модулями вне .kd-article.
   Палитра мягкая (152-ФЗ safe: шрифты self-host через тему).
   ===================================================================== */

:root{
  --kd-bg:#FAF8F4; --kd-surface:#FFFFFF; --kd-text:#18202B; --kd-text2:#5A6472; --kd-light:#9AA1A8;
  --kd-cobalt:#6E8BC4; --kd-cobalt-d:#4F6FA6; --kd-slate:#9DB2D9; --kd-pale:#EAF0FF;
  --kd-sand:#D9C7A3; --kd-graphite:#5A6472; --kd-line:#E2E4E0; --kd-line-soft:#ECEEEA;
  --kd-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --kd-sans:'Manrope',system-ui,-apple-system,sans-serif;
}
.kd-article *{box-sizing:border-box}
.kd-article{background:var(--kd-bg); color:var(--kd-text); font-family:var(--kd-serif); font-size:19px; line-height:1.72; -webkit-font-smoothing:antialiased; margin:0}
.kd-article a{color:var(--kd-cobalt-d); text-decoration:none; border-bottom:1px solid var(--kd-slate)}
.kd-article a:hover{border-bottom-color:var(--kd-cobalt-d)}
.kd-article h2{font-family:var(--kd-sans); font-weight:800; letter-spacing:-.01em; font-size:1.7rem; line-height:1.2; margin:3.2rem 0 1rem; color:var(--kd-text)}
.kd-article h3{font-family:var(--kd-sans); font-weight:800; font-size:1.25rem; line-height:1.3; margin:2.4rem 0 .8rem; color:var(--kd-text)}
.kd-article p{margin:0 0 1.25rem}
.kd-article ul{margin:1.2rem 0; padding:0; list-style:none}
.kd-article ul li{position:relative; padding-left:1.4em; margin-bottom:.5rem; color:var(--kd-text2)}
.kd-article ul li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--kd-cobalt)}
.kd-article blockquote{margin:1.4rem 0; font-family:var(--kd-serif); font-weight:600; font-size:1.25rem; line-height:1.45; color:var(--kd-text); border-left:3px solid var(--kd-sand); padding-left:20px}
.kd-article strong{color:var(--kd-text); font-weight:700}
.kd-wrap{width:min(760px, calc(100% - 40px)); margin-inline:auto}
.kd-lede{font-size:1.22rem; line-height:1.65; color:var(--kd-text)}

/* kd_statement — ФУНКЦИЯ ≠ РОЛЬ */
.kd-statement{margin:3rem auto; padding:0}
.kd-statement .kd-sub{font-family:var(--kd-sans); font-weight:700; color:var(--kd-cobalt-d); letter-spacing:.04em; text-transform:uppercase; font-size:13px; margin-bottom:14px}
.kd-statement .kd-big{font-family:var(--kd-sans); font-weight:900; letter-spacing:-.01em; line-height:.98; color:var(--kd-text); display:flex; align-items:center; gap:.3em; flex-wrap:wrap; font-size:clamp(2.1rem,7vw,3.4rem)}
.kd-statement .kd-big .kd-neq{color:var(--kd-cobalt); font-weight:900}
.kd-statement .kd-note{font-family:var(--kd-serif); color:var(--kd-text2); max-width:60ch; margin-top:20px; font-size:1.12rem}

/* kd_vs — конфликт операционка vs важные задачи */
.kd-vs{display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; margin:2.6rem auto; border:1px solid var(--kd-line); border-radius:14px; overflow:hidden; background:var(--kd-surface)}
.kd-vs .kd-col{padding:24px 20px}
.kd-vs .kd-col h4{font-family:var(--kd-sans); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
.kd-vs .kd-col.a h4{color:var(--kd-graphite)}
.kd-vs .kd-col.b h4{color:var(--kd-cobalt-d)}
.kd-vs .kd-col ul{margin:0}
.kd-vs .kd-col li{font-family:var(--kd-serif); font-size:1.02rem; padding:7px 0; border-bottom:1px solid var(--kd-line-soft); color:var(--kd-text2)}
.kd-vs .kd-col.b{background:var(--kd-pale)}
.kd-vs .kd-mid{display:grid; place-items:center; font-family:var(--kd-sans); font-weight:900; color:var(--kd-cobalt); font-size:1.3rem; padding:0 12px; border-left:1px solid var(--kd-line); border-right:1px solid var(--kd-line)}
@media(max-width:620px){.kd-vs{grid-template-columns:1fr}.kd-vs .kd-mid{display:none}.kd-vs .kd-col.b{border-top:1px solid var(--kd-line)}}

/* Таблицы в теле статьи — единый премиум-стиль (как в прототипе поста 9) */
.article__body table{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; margin:1.8rem 0; font-family:var(--kd-sans); font-size:.95rem; border:1px solid var(--kd-line); border-radius:12px; overflow:hidden; background:var(--kd-surface)}
.article__body th{background:var(--kd-bg); color:var(--kd-text); font-weight:800; text-align:left; padding:11px 14px; border-bottom:1px solid var(--kd-line)}
.article__body td{padding:11px 14px; border-bottom:1px solid var(--kd-line-soft); color:var(--kd-text2)}
.article__body tbody tr:last-child td{border-bottom:0}
.article__body tbody tr:last-child{background:var(--kd-pale)}
.article__body tbody tr:last-child td{font-family:var(--kd-sans); font-weight:800; color:var(--kd-text)}

/* kd_pause — визуальная пауза */
.kd-pause{margin:3.6rem auto; text-align:center; padding:1.4rem 0}
.kd-pause .kd-q{font-family:var(--kd-serif); font-weight:600; font-size:clamp(1.8rem,5.5vw,2.8rem); line-height:1.25; color:var(--kd-text); max-width:18ch; margin-inline:auto}
.kd-pause .kd-q em{color:var(--kd-cobalt); font-style:normal}

/* kd_fn — шесть функций нумерованными блоками */
.kd-fn{margin:2.4rem auto}
.kd-fn .kd-idx{font-family:var(--kd-sans); font-weight:900; font-size:clamp(2.4rem,8vw,3.6rem); color:var(--kd-cobalt); line-height:1; letter-spacing:-.02em}
.kd-fn .kd-ttl{font-family:var(--kd-sans); font-weight:800; font-size:1.4rem; color:var(--kd-text); margin:.1rem 0 .5rem}
.kd-fn .kd-roles{font-family:var(--kd-sans); font-size:13px; color:var(--kd-cobalt-d); letter-spacing:.04em; text-transform:uppercase; margin:.4rem 0 1rem}
.kd-fn .kd-divider{height:1px; background:var(--kd-line); margin:2rem 0 0}

/* kd_datastory — data storytelling (+20 сек AHT) */
.kd-data{margin:2.6rem auto; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:14px; padding:28px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center}
.kd-data .kd-num{font-family:var(--kd-sans); font-weight:900; font-size:clamp(3rem,11vw,5rem); color:var(--kd-cobalt); line-height:.9; letter-spacing:-.03em}
.kd-data .kd-num small{display:block; font-size:.32em; font-weight:800; letter-spacing:.06em; color:var(--kd-graphite); text-transform:uppercase; margin-top:6px}
.kd-data .kd-calc{font-family:var(--kd-sans); font-size:1.02rem; color:var(--kd-text2); line-height:1.5}
.kd-data .kd-calc b{color:var(--kd-text)}
.kd-data .kd-calc .kd-line{display:flex; align-items:baseline; gap:.6em; padding:6px 0; border-bottom:1px dashed var(--kd-line)}
.kd-data .kd-calc .kd-line .kd-r{margin-left:auto; font-weight:800; color:var(--kd-cobalt-d); white-space:nowrap}
@media(max-width:560px){.kd-data{grid-template-columns:1fr; text-align:left}}

/* kd_qa — 72/100 как диагностический сигнал */
.kd-qa{margin:2.6rem auto; display:flex; gap:24px; align-items:flex-start; border-left:3px solid var(--kd-cobalt); padding:6px 0 6px 24px}
.kd-qa .kd-score{font-family:var(--kd-sans); font-weight:900; line-height:.85; white-space:nowrap}
.kd-qa .kd-score b{font-size:clamp(3.4rem,12vw,5.5rem); color:var(--kd-text)}
.kd-qa .kd-score span{font-size:1.4rem; color:var(--kd-light); font-weight:700}
.kd-qa .kd-qa-txt{font-family:var(--kd-serif); color:var(--kd-text2); font-size:1.05rem}
.kd-qa .kd-qa-txt b{color:var(--kd-text)}
@media(max-width:560px){.kd-qa{flex-direction:column; gap:10px}}

/* kd_chain — причинно-следственная цепь */
.kd-chain{margin:2.6rem auto; border-top:1px solid var(--kd-line); border-bottom:1px solid var(--kd-line); padding:24px 0}
.kd-chain ol{list-style:none; counter-reset:kdchain; margin:0; padding:0}
.kd-chain li{counter-increment:kdchain; position:relative; padding:10px 0 10px 44px; font-family:var(--kd-serif); color:var(--kd-text2); font-size:1.05rem}
.kd-chain li::before{content:counter(kdchain); position:absolute; left:0; top:9px; width:28px; height:28px; border-radius:50%; border:2px solid var(--kd-cobalt); color:var(--kd-cobalt-d); display:grid; place-items:center; font-family:var(--kd-sans); font-weight:800; font-size:13px}
.kd-chain li::after{content:""; position:absolute; left:13px; top:37px; bottom:-9px; width:2px; background:var(--kd-slate)}
.kd-chain li:last-child::after{display:none}
.kd-chain li b{color:var(--kd-text)}

/* kd_fte — переход на бизнес-язык (+10 FTE) */
.kd-fte{margin:2.6rem auto; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:14px; padding:24px}
.kd-fte .kd-step{display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--kd-line-soft); font-family:var(--kd-serif)}
.kd-fte .kd-step:last-child{border-bottom:0}
.kd-fte .kd-step .kd-n{font-family:var(--kd-sans); font-weight:800; color:var(--kd-cobalt); font-size:28px; min-width:40px}
.kd-fte .kd-step .kd-t{color:var(--kd-text2); font-size:1.03rem}
.kd-fte .kd-step.kd-biz .kd-t{color:var(--kd-text); font-weight:600}

/* kd_pull — крупная цитата-тезис */
.kd-pull{margin:2.6rem auto; font-family:var(--kd-serif); font-weight:600; font-size:1.5rem; line-height:1.4; color:var(--kd-text); border-left:3px solid var(--kd-sand); padding-left:22px; max-width:60ch}
.kd-pull em{color:var(--kd-cobalt); font-style:normal}

/* kd_author */
.kd-author{margin:3.2rem auto 0; border-top:1px solid var(--kd-line); padding-top:24px; display:flex; gap:18px; align-items:flex-start}
.kd-author .kd-who{font-family:var(--kd-sans); font-weight:700; color:var(--kd-text)}
.kd-author p{margin:0; color:var(--kd-text2); font-size:1rem; font-family:var(--kd-serif)}

/* kd-hero — двухколоночный hero (текст слева, схема справа, как в прототипе) */
.kd-hero{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; padding:18px 0 56px; border-bottom:1px solid var(--kd-line); overflow:hidden; margin-bottom:2.4rem}
.kd-hero .kd-kicker{font-family:var(--kd-sans); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--kd-cobalt-d)}
.kd-hero h1{font-family:var(--kd-sans); font-weight:900; letter-spacing:-.02em; line-height:.96; margin:14px 0 0; color:var(--kd-text); font-size:clamp(2.2rem,5vw,3.6rem)}
.kd-hero h1 .kd-soft{color:var(--kd-cobalt)}
.kd-hero .kd-lead{font-size:1.1rem; line-height:1.6; color:var(--kd-text2); margin-top:20px; max-width:42ch}
.kd-hero .kd-byline{font-family:var(--kd-sans); font-size:13px; color:var(--kd-light); margin-top:16px; letter-spacing:.02em}
.kd-hero .kd-heroart{position:relative; width:100%; max-width:300px; margin-left:auto; aspect-ratio:400/360; overflow:hidden}
@media(max-width:760px){.kd-hero{grid-template-columns:1fr; gap:20px; text-align:left}.kd-hero .kd-heroart{order:-1; max-width:260px; margin:0 auto}}

/* kd-sys — схема «Шесть функций КЦ» (без центральной полосы, как просил заказчик) */
.kd-sys{position:relative; margin:42px auto; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:14px; padding:30px 26px}
.kd-sys__spine{display:none}
.kd-sys__row{display:flex; justify-content:center}
.kd-sys__row--mid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0}
.kd-sys__cap{font-family:var(--kd-sans); font-size:11px; font-weight:700; color:var(--kd-light); letter-spacing:.1em; text-transform:uppercase; text-align:center; margin:6px 0}
.kd-sys__box{background:var(--kd-surface); border:1.5px solid var(--kd-slate); border-radius:12px; padding:16px; text-align:center}
.kd-sys__box--wide{max-width:300px; margin-inline:auto}
.kd-sys__box--core{background:var(--kd-pale); border-color:var(--kd-cobalt)}
.kd-sys__box b{display:block; font-family:var(--kd-sans); font-weight:800; font-size:15px; color:var(--kd-cobalt-d); line-height:1.2; margin-bottom:6px}
.kd-sys__box span{font-family:var(--kd-sans); font-size:12px; color:var(--kd-text2); line-height:1.35}
.kd-sys figcaption{font-family:var(--kd-sans); font-size:12px; letter-spacing:.06em; color:var(--kd-light); margin-top:18px; text-align:center}
@media(max-width:620px){.kd-sys__row--mid{grid-template-columns:1fr}}

/* reveal на блоки kd-reveal и абзацы/заголовки статьи (плавная подгрузка при скролле).
   ВАЖНО: обёртка .kd-article НЕ является родителем блоков на проде (тема выводит
   the_content в .article__body), поэтому селекторы БЕЗ префикса .kd-article.
   БЕЗОПАСНОСТЬ: базово контент ВИДИМ (opacity:1). Стартовое opacity:0 ставится ТОЛЬКО
   через JS-класс .kd-pre, который добавляется синхронно при загрузке. Если JS не сработал —
   блоки остаются видимыми, текст не пропадает ("мрак" исключён). */
.kd-reveal,
.article__body > p,
.article__body > h2,
.article__body > h3{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
  .kd-reveal.kd-pre,
  .article__body > p.kd-pre,
  .article__body > h2.kd-pre,
  .article__body > h3.kd-pre{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .kd-reveal.kd-in,
  .article__body > p.kd-in,
  .article__body > h2.kd-in,
  .article__body > h3.kd-in{opacity:1; transform:none}
}

/* kd-emph — крупная фраза с воздухом (перелом статьи) */
.kd-emph{margin:72px auto; text-align:center; padding:20px 0}
.kd-emph .kd-emph-q{font-family:var(--kd-sans); font-weight:800; letter-spacing:-.01em; line-height:1.15; color:var(--kd-text); font-size:clamp(1.9rem,5.5vw,3rem); max-width:16ch; margin-inline:auto}
.kd-emph .kd-emph-q em{color:var(--kd-cobalt); font-style:normal}

/* kd-framework — спокойный финальный блок-чеклист */
.kd-framework{margin:48px auto; border-top:2px solid var(--kd-cobalt); border-bottom:2px solid var(--kd-cobalt); padding:26px 0}
.kd-framework .kd-fw-title{font-family:var(--kd-sans); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:13px; color:var(--kd-cobalt-d); text-align:center; margin-bottom:18px}
.kd-framework ol{list-style:none; margin:0; padding:0; counter-reset:fw; max-width:620px; margin-inline:auto}
.kd-framework li{counter-increment:fw; position:relative; padding:10px 0 10px 52px; font-family:var(--kd-serif); color:var(--kd-text2); font-size:1.08rem; border-bottom:1px solid var(--kd-line-soft)}
.kd-framework li:last-child{border-bottom:0}
.kd-framework li::before{content:counter(fw,decimal-leading-zero); position:absolute; left:0; top:8px; font-family:var(--kd-sans); font-weight:900; font-size:1.05rem; color:var(--kd-cobalt)}
@media(max-width:560px){.kd-framework li{padding-left:44px; font-size:1rem}}
.kd-compare{margin:40px auto; display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--kd-line); border-radius:14px; overflow:hidden; background:var(--kd-surface)}
.kd-compare .kd-padd{padding:24px}
.kd-compare .kd-padd h4{font-family:var(--kd-sans); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
.kd-compare .kd-bad h4{color:var(--kd-graphite)}
.kd-compare .kd-good{border-left:1px solid var(--kd-line); background:var(--kd-pale)}
.kd-compare .kd-good h4{color:var(--kd-cobalt-d)}
.kd-compare .kd-padd p{font-family:var(--kd-serif); color:var(--kd-text2); margin:0; font-size:1.04rem}
@media(max-width:560px){.kd-compare{grid-template-columns:1fr}.kd-compare .kd-good{border-left:0; border-top:1px solid var(--kd-line)}}

/* kd-hero-diagram — радиальная схема КЦ-система (HTML/CSS, текст переносится) */
.kd-hero-diagram{position:relative; width:100%; max-width:360px; margin:1.4rem auto 0; aspect-ratio:400/360; overflow:visible}
.kd-hero-diagram__svg{position:absolute; inset:0; width:100%; height:100%}
.kd-hero-diagram__svg line{stroke:var(--kd-slate); stroke-width:1.4}
.kd-hero-diagram__node{position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; text-align:center; font-family:var(--kd-sans); font-weight:700; font-size:12px; color:var(--kd-graphite); background:var(--kd-surface); border:1.5px solid var(--kd-slate); border-radius:999px; padding:7px 11px; min-width:58px; max-width:94px; line-height:1.12}
.kd-hero-diagram__node--core{background:var(--kd-pale); border-color:var(--kd-cobalt); color:var(--kd-cobalt-d); font-weight:800; font-size:14px; min-width:84px; max-width:116px; padding:11px 13px}
.kd-hero-diagram__node b{display:block}

/* ===== Оверрайды СУЩЕСТВУЮЩИХ kc-модулей ВНУТРИ .kd-article (чтобы они вписались в editorial-стиль) ===== */
.kd-article .kc-module{margin:2.4rem 0; padding:0; border:0; background:transparent; font-family:var(--kd-serif); color:var(--kd-text); line-height:1.6}
.kd-article .kc-module__title{font-family:var(--kd-sans); font-size:18px; color:var(--kd-cobalt-d); margin-bottom:6px}
.kd-article .kc-module__source{font-size:13px; color:var(--kd-light); margin-top:10px}
.kd-article .kc-compare table{border-collapse:collapse; width:100%; font-size:16px; margin:0}
.kd-article .kc-compare th, .kd-article .kc-compare td{border:1px solid var(--kd-line); padding:10px 14px; text-align:left; vertical-align:top}
.kd-article .kc-compare thead th{background:var(--kd-pale); color:var(--kd-cobalt-d); font-family:var(--kd-sans); font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.04em}
.kd-article .kc-map__layout{display:flex; flex-direction:column; gap:12px}
.kd-article .kc-map__node{border:1.5px solid var(--kd-slate); border-radius:12px; padding:14px 16px; background:var(--kd-surface)}
.kd-article .kc-map__label{display:block; font-family:var(--kd-sans); font-weight:800; font-size:15px; color:var(--kd-cobalt-d); line-height:1.2; margin-bottom:5px}
.kd-article .kc-map__detail{display:block; font-family:var(--kd-sans); font-size:12px; color:var(--kd-text2); line-height:1.35}
.kd-article .kc-map--hierarchy .kc-map__node:first-child,
.kd-article .kc-map--hierarchy .kc-map__node:last-child{background:var(--kd-pale); border-color:var(--kd-cobalt); align-self:center; max-width:340px}
.kd-article .kc-callout{border:0 !important; border-block:1px solid var(--kd-line) !important; border-radius:0; padding:18px 0 !important; background:transparent}
.kd-article .kc-callout__label{font-family:var(--kd-sans); font-weight:700; font-size:13px; color:var(--kd-cobalt-d); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px}
.kd-article .kc-callout__text{font-family:var(--kd-serif); font-weight:600; font-size:1.15rem; color:var(--kd-text); margin:0}
.kd-article .kc-callout__context{font-family:var(--kd-serif); font-size:1rem; color:var(--kd-text2); margin:10px 0 0}
.kd-article .kc-cards__grid{grid-template-columns:1fr; gap:12px}
.kd-article .kc-cards__item{border:1.5px solid var(--kd-slate); border-radius:12px; padding:16px 18px; background:var(--kd-surface)}
.kd-article .kc-cards__title{font-family:var(--kd-sans); font-weight:800; font-size:15px; color:var(--kd-cobalt-d)}
.kd-article .kc-cards__text{font-family:var(--kd-serif); font-size:1rem; margin-top:6px}
@container (min-width:560px){.kd-article .kc-cards__grid{grid-template-columns:repeat(3,1fr)}}
.kd-article .kc-media--split .kc-media__content{display:none}
.kd-article .kc-media--split .kc-media__art{float:none; width:100%; max-width:100%; margin:0 0 14px; aspect-ratio:4/3}

/* ===== скрыть штатный hero темы на статье с .kd-article (пилот) =====
   Безопасно: :has() целится только на пост, где есть .kd-article,
   остальные 14 статей не задеваются. */
.article:has(.kd-article) .hero,
.article:has(.kd-article) .article__tag,
.article:has(.kd-article) .article__title{display:none}

/* убрать авто-нумерацию H2 (01 / 02 / ...) — старый пережиток; только для статей КЦ Инсайд (.kd-article).
   H2 лежат в .article__body (обёртка [kd_article] не родитель), поэтому целимся через :has(.kd-article). */
.article:has(.kd-article) .article__body h2{counter-reset:none !important}
.article:has(.kd-article) .article__body h2::before{content:none !important}

/* Ссылки в теле статей КЦ Инсайд: стандартный цвет ссылок (кобальт) + подчёркивание,
   видимы СРАЗУ (не только при наведении). Тема перебивает цвет своим .article__body a,
   поэтому целимся через :has(.kd-article) с тем же механизмом, что и для H2. */
.article:has(.kd-article) .article__body a,
.article:has(.kd-article) .article__body p a{color:var(--kd-cobalt-d); text-decoration:underline; text-decoration-color:var(--kd-slate); text-underline-offset:2px}
.article:has(.kd-article) .article__body a:hover{color:var(--kd-cobalt); text-decoration-color:var(--kd-cobalt)}

/* внутри kd- блоков не ставим синие маркеры (VS, цепочка и т.п.) */
.kd-vs ul{margin:0; padding:0}
.kd-vs li{list-style:none}
.kd-vs li::before{display:none}
.kd-chain ol{list-style:none}

/* ===== kd-system — схема «Шесть функций КЦ» (HTML/CSS, текст переносится) ===== */
.kd-system{margin:2.8rem auto; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:16px; padding:28px 22px; text-align:center}
.kd-system__title{font-family:var(--kd-sans); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--kd-graphite); margin-bottom:22px}
.kd-system__grid{display:flex; flex-direction:column; gap:10px; max-width:520px; margin-inline:auto}
.kd-system__row{display:flex; justify-content:center}
.kd-system__cell{flex:1 1 0; min-width:0; background:var(--kd-pale); border:1.5px solid var(--kd-slate); border-radius:12px; padding:14px 12px; font-family:var(--kd-sans); color:var(--kd-cobalt-d); font-weight:700}
.kd-system__cell .kd-system__name{font-size:15px; line-height:1.15}
.kd-system__cell .kd-system__sub{display:block; margin-top:5px; font-weight:500; font-size:11.5px; color:var(--kd-text2); line-height:1.3}
.kd-system__cell--top{background:var(--kd-surface); border-color:var(--kd-cobalt)}
.kd-system__cell--core{background:var(--kd-graphite); border-color:var(--kd-graphite); color:#fff; font-weight:800; font-size:16px}
.kd-system__cell--core .kd-system__sub{color:rgba(255,255,255,.82)}
.kd-system__connector{color:var(--kd-slate); font-family:var(--kd-sans); font-weight:800; line-height:1; margin:2px 0; font-size:14px}
@media (max-width:560px){
  .kd-system__cell .kd-system__name{font-size:13.5px}
  .kd-system__cell .kd-system__sub{font-size:10.5px}
}

/* ===== kc-compare в стиле прототипа (тонкие линии, без тяжёлых рамок) ===== */
.kd-article .kc-compare table{border-collapse:collapse; width:100%; font-size:16px; margin:0; border:0}
.kd-article .kc-compare th, .kd-article .kc-compare td{border:0; border-bottom:1px solid var(--kd-line); padding:12px 14px; text-align:left; vertical-align:top}
.kd-article .kc-compare thead th{border-bottom:2px solid var(--kd-cobalt); background:transparent; color:var(--kd-cobalt-d); font-family:var(--kd-sans); font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.04em}
.kd-article .kc-compare tbody tr:last-child td{border-bottom:0}

/* ===== kd-hero2: компактный типографический hero (структура на 120) =====
   ВАЖНО: базовый .kd-hero имеет display:grid (2 колонки под схему), а hero2 — одноколоночный.
   Переопределяем display:block, иначе контент-обёртка <div> попадает в левую колонку grid,
   а справа остаётся пустое место (выглядит как неподгрузившаяся картинка). */
.kd-hero2{display:block; width:min(1100px,calc(100% - 40px)); margin:28px auto 0; padding:8px 0 28px; border-bottom:1px solid var(--kd-line)}
.kd-hero2 .kd-kicker{font-family:var(--kd-sans); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--kd-cobalt-d)}
.kd-hero2 h1{font-family:var(--kd-sans); font-weight:900; letter-spacing:-.02em; line-height:1.0; margin:12px 0 0; font-size:clamp(2.2rem,5vw,3.4rem); max-width:18ch}
.kd-hero2 .kd-lead{font-size:1.08rem; line-height:1.6; color:var(--kd-text2); margin-top:16px; max-width:none}
/* мини-строка статистики вместо пустой гигантской цифры */
.kd-stats{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; font-family:var(--kd-sans); font-size:13px; font-weight:700; color:var(--kd-cobalt-d)}
.kd-stats span{display:inline-flex; align-items:center; gap:8px}
.kd-stats span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--kd-cobalt)}
.kd-hero2 .kd-byline{font-family:var(--kd-sans); font-size:13px; color:var(--kd-light); margin-top:18px; letter-spacing:.02em}
.kd-hero2 .kd-count{font-family:var(--kd-sans); font-weight:900; color:var(--kd-cobalt); font-size:clamp(3.5rem,12vw,7rem); line-height:.9; letter-spacing:-.03em; margin-top:24px}
.kd-hero2 .kd-count small{display:block; font-size:.22em; font-weight:800; letter-spacing:.08em; color:var(--kd-graphite); text-transform:uppercase; margin-top:8px}

/* ===== kd-orgtree: дерево структуры (главный визуал статьи 2, поднят в первый экран) ===== */
.kd-blueprint{width:min(1100px,calc(100% - 40px)); margin:28px auto 0; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:16px; padding:22px 22px; display:flex; flex-direction:column; align-items:center; gap:8px}
.kd-blueprint .kd-bp-cap{font-family:var(--kd-sans); font-size:10px; font-weight:700; color:var(--kd-text-light); letter-spacing:.1em; text-transform:uppercase; margin:6px 0 1px}
.kd-blueprint .box{border-radius:12px; padding:10px 16px; text-align:center; font-family:var(--kd-sans); font-weight:700; font-size:13px; color:var(--kd-graphite); background:var(--kd-surface); border:1.5px solid var(--kd-slate); width:min(320px,100%)}
.kd-blueprint .box.top{background:var(--kd-pale); border-color:var(--kd-cobalt); color:var(--kd-cobalt-d); font-size:15px; padding:12px 18px}
.kd-blueprint .box.ops{border:2.5px solid var(--kd-cobalt-d); color:var(--kd-cobalt-d); font-size:15px; padding:14px; width:min(520px,100%)}
.kd-blueprint .row{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; width:min(640px,100%)}
.kd-blueprint .row .box{font-size:11px; padding:10px 5px}
.kd-blueprint .staff{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; width:min(640px,100%)}
.kd-blueprint .staff .box{border-style:dashed; font-size:11px; padding:9px 5px}

.kd-card, .kd-blueprint, .kd-cards, .kd-rolegroup, .kd-hero2, .kd-pull, .kd-chain, .kd-framework, .kd-author, .kd-emph, .kd-statement, .kd-vs, .kd-data, .kd-qa, .kd-fte, .kd-sys, .kd-system, .kc-compare, .kd-compare, .kd-hero-diagram{
  box-sizing:border-box;
}
/* ===== kd-rolecard: карточки ролей (full — на всю ширину, grid2 — 2x2) ===== */
.kd-rolegroup{margin:2.6rem auto 0; max-width:1100px; width:calc(100% - 40px)}
.kd-rolegroup .kd-grouptitle{font-family:var(--kd-sans); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--kd-cobalt-d); margin-bottom:1rem; padding-bottom:.4rem; border-bottom:2px solid var(--kd-slate)}
.kd-cards.full{display:grid; grid-template-columns:1fr; gap:36px; margin:1.8rem 0 2.4rem; max-width:1100px; width:calc(100% - 40px)}
.kd-cards.full .kd-card{position:relative}
.kd-cards.full .kd-card:not(:last-child)::after{content:""; position:absolute; left:0; right:0; bottom:-18px; border-bottom:1px dashed var(--kd-line)}
.kd-cards.grid2{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:1.8rem 0 2.4rem; max-width:1100px; width:calc(100% - 40px)}
.kd-card{background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:14px; padding:18px 20px; page-break-inside:avoid}
.kd-card.support{border-style:dashed; border-color:var(--kd-slate)}
.kd-card .kd-rt{font-family:var(--kd-sans); font-weight:800; font-size:1.18rem; color:var(--kd-text); margin:0 0 .2rem}
.kd-card .kd-rz{font-family:var(--kd-sans); font-size:11px; color:var(--kd-cobalt-d); letter-spacing:.04em; text-transform:uppercase; margin:.1rem 0 .6rem}
.kd-card p{font-size:1rem; line-height:1.55; color:var(--kd-text2); margin:0 0 .6rem}
.kd-card ul{list-style:none; margin:.3rem 0 0; padding:0; columns:2; column-gap:2rem}
.kd-card ul li{position:relative; padding-left:1.1em; margin-bottom:.3rem; color:var(--kd-text2); font-family:var(--kd-sans); font-size:13.5px}
.kd-card ul li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--kd-cobalt)}

@media (max-width:760px){
  .kd-blueprint .row, .kd-blueprint .staff{grid-template-columns:1fr 1fr}
  .kd-cards.grid2{grid-template-columns:1fr; max-width:100%; width:calc(100% - 32px)}
  .kd-cards.full{max-width:100%; width:calc(100% - 32px)}
  .kd-rolegroup{width:calc(100% - 32px)}
  .kd-card ul{columns:1}
  .kd-hero2 .kd-count{font-size:4rem}
  /* фикс адаптива виджета «Связанные материалы» (тема): карточки не вылазят за экран */
  .rel__carousel{overflow:hidden}
  .rel__track{display:flex; gap:12px; overflow-x:auto; padding:0 0 6px; -webkit-overflow-scrolling:touch}
  .rel__a{flex:0 0 auto; width:78vw; max-width:320px; min-width:0}
  .rel__img{height:150px}
  .rel__m{display:none}
}

/* ===== ПРАВКИ ПОСТА 9 (2026-09-28): холст 820, компактная карта, спокойные формулы, пирамида ===== */
/* Холст статьи = 820px (реальный замер на проде). Все широкие блоки привязаны к колонке. */
.kd-hero2{display:block; max-width:820px; width:100%; margin:28px auto 0; padding:8px 0 28px; border-bottom:1px solid var(--kd-line)}
.kd-formula{margin:2.2rem auto; max-width:820px; width:100%; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:14px; padding:24px 26px}
.kd-rolegroup, .kd-cards.full, .kd-cards.grid2{max-width:820px; width:100%}

/* Карта классификации метрик (kd_metricsmap) — умеренный воздух (компромисс: не раздута, но не сжата) */
.kd-metricsmap{margin:2.4rem auto; max-width:820px; width:100%; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:16px; padding:22px 18px 22px}
.kd-metricsmap .kd-mm-cap{font-family:var(--kd-sans); font-weight:800; font-size:1.05rem; color:var(--kd-text); margin:0 0 4px; letter-spacing:.01em}
.kd-mm-sub{font-family:var(--kd-serif); font-size:.98rem; color:var(--kd-text2); margin:0 0 22px}
.kd-mm-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; position:relative}
.kd-mm-grid::before{content:""; position:absolute; left:7%; right:7%; top:42px; height:2px; background:linear-gradient(90deg,var(--kd-cobalt),var(--kd-slate),var(--kd-graphite),var(--kd-sand),var(--kd-cobalt-d)); opacity:.45; z-index:0}
.kd-mg{position:relative; z-index:1; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:12px; padding:16px 13px 18px; display:flex; flex-direction:column; min-width:0}
.kd-mg--cobalt{border-top:3px solid var(--kd-cobalt)}
.kd-mg--slate{border-top:3px solid var(--kd-slate)}
.kd-mg--graphite{border-top:3px solid var(--kd-graphite)}
.kd-mg--sand{border-top:3px solid var(--kd-sand)}
.kd-mg--pale{border-top:3px solid var(--kd-cobalt-d)}
.kd-mg__num{font-family:var(--kd-sans); font-weight:900; font-size:1.5rem; color:var(--kd-light); line-height:1; margin-bottom:8px}
.kd-mg__head{display:flex; align-items:center; gap:.45em; font-family:var(--kd-sans); font-weight:800; font-size:.85rem; color:var(--kd-text); line-height:1.15; margin-bottom:10px; hyphens:auto}
.kd-mg__dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.kd-mg--cobalt .kd-mg__dot{background:var(--kd-cobalt)}
.kd-mg--slate .kd-mg__dot{background:var(--kd-slate)}
.kd-mg--graphite .kd-mg__dot{background:var(--kd-graphite)}
.kd-mg--sand .kd-mg__dot{background:var(--kd-sand)}
.kd-mg--pale .kd-mg__dot{background:var(--kd-cobalt-d)}
.kd-mg__chips{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px}
.kd-mg__chips span{font-family:var(--kd-sans); font-size:11.5px; font-weight:700; color:var(--kd-cobalt-d); background:var(--kd-pale); border-radius:6px; padding:3px 8px; white-space:nowrap; overflow-wrap:break-word; max-width:100%}
.kd-mg__desc{font-family:var(--kd-serif); font-size:.92rem; line-height:1.45; color:var(--kd-text2); margin:0; hyphens:auto}
@media (max-width:900px){.kd-mm-grid{grid-template-columns:repeat(3,1fr)}.kd-mm-grid::before{display:none}}
@media (max-width:560px){.kd-mm-grid{grid-template-columns:1fr 1fr}.kd-mm-grid::before{display:none}}
@media (max-width:420px){.kd-mm-grid{grid-template-columns:1fr}}

/* Сравнение двух формул бок о бок (kd_formula + .kd-pair) — спокойная типографика */
.kd-formula__title{font-family:var(--kd-sans); font-weight:800; font-size:1.05rem; color:var(--kd-text); margin:0 0 18px}
.kd-pair{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--kd-line); border-radius:12px; overflow:hidden}
.kd-pair__col{padding:20px 22px}
.kd-pair__col + .kd-pair__col{border-left:1px solid var(--kd-line)}
.kd-pair__label{font-family:var(--kd-sans); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--kd-cobalt-d); margin-bottom:10px}
.kd-pair__expr{font-family:var(--kd-sans); font-weight:600; font-size:1.02rem; color:var(--kd-graphite); line-height:1.45; margin-bottom:12px; letter-spacing:.01em}
.kd-pair__body{font-family:var(--kd-serif); font-size:.98rem; line-height:1.55; color:var(--kd-text2); margin-bottom:14px}
.kd-pair__body strong{color:var(--kd-cobalt-d); font-weight:700}
.kd-bar{height:10px; border-radius:6px; background:var(--kd-line-soft); overflow:hidden; margin:4px 0 6px}
.kd-bar__fill{height:100%; background:var(--kd-cobalt); border-radius:6px}
.kd-bar__cap{font-family:var(--kd-sans); font-size:11px; color:var(--kd-text2); margin-bottom:14px; display:block}
.kd-pair__note{font-family:var(--kd-sans); font-size:12.5px; color:var(--kd-graphite); background:var(--kd-bg); border-radius:8px; padding:9px 12px; display:inline-block}
@media (max-width:620px){.kd-pair{grid-template-columns:1fr}.kd-pair__col + .kd-pair__col{border-left:0; border-top:1px solid var(--kd-line)}}

/* Иерархия-пирамида (kd_hier) — слои без треугольников */
.kd-hier{margin:2.4rem auto; max-width:820px; width:100%; display:flex; flex-direction:column; align-items:center}
.kd-hier__lvl{width:100%; border:1px solid var(--kd-line); border-radius:12px; padding:16px 22px; background:var(--kd-surface); text-align:center; position:relative}
.kd-hier__lvl--top{width:56%}
.kd-hier__lvl--mid{width:78%}
.kd-hier__lvl--base{width:100%}
.kd-hier__lvl:not(:last-child){margin-bottom:18px}
.kd-hier__lvl:not(:last-child)::after{content:""; position:absolute; left:50%; bottom:-18px; width:2px; height:18px; background:var(--kd-slate); transform:translateX(-50%)}
.kd-hier__lvl--top{border-top:3px solid var(--kd-cobalt-d)}
.kd-hier__lvl--base.kd-hier__lvl--core{background:var(--kd-pale); border-color:var(--kd-cobalt); border-top:3px solid var(--kd-cobalt)}
.kd-hier__name{font-family:var(--kd-sans); font-weight:800; font-size:1.05rem; color:var(--kd-text); margin-bottom:.4rem}
.kd-hier__items{font-family:var(--kd-sans); font-size:14px; color:var(--kd-text2); line-height:1.5}

/* ===== kd-flow: классическая воронка (infographic), главный объект статьи ===== */
.kd-flow{margin:2.4rem auto; max-width:820px; width:100%}
.kd-flow__cap{font-family:var(--kd-sans); font-weight:800; font-size:1.05rem; color:var(--kd-text); margin:0 0 4px; text-align:center}
.kd-flow__sub{font-family:var(--kd-serif); font-size:.98rem; color:var(--kd-text2); margin:0 0 14px; text-align:center}
.kd-flow__funnel{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:14px; width:100%}
.kd-flow__labels,.kd-flow__metrics{display:flex; flex-direction:column; gap:0; flex:0 0 auto; max-width:23%}
.kd-flow__labels{text-align:right; align-items:flex-end}
.kd-flow__metrics{text-align:left; align-items:flex-start}
.kd-flow__label{height:64px; display:flex; flex-direction:column; justify-content:center}
.kd-flow__label-t{font-family:var(--kd-sans); font-weight:800; font-size:1.02rem; color:var(--kd-text); line-height:1.05}
.kd-flow__stack{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0 auto; clip-path:polygon(0 0,100% 0,62% 100%,38% 100%)}
.kd-flow__seg{height:64px; display:flex; align-items:center; justify-content:center; width:100%; box-shadow:0 4px 14px rgba(79,111,166,.18), inset 0 1px 0 rgba(255,255,255,.18)}
.kd-flow__seg span{font-family:var(--kd-sans); font-weight:900; font-size:1.5rem; color:#fff; letter-spacing:-.01em; text-shadow:0 1px 3px rgba(24,32,43,.3); white-space:nowrap}
.kd-flow__seg--1{background:linear-gradient(135deg,#7E97C4,#6E8BC4)}
.kd-flow__seg--2{background:linear-gradient(135deg,#6E8BC4,#5E7FB6)}
.kd-flow__seg--3{background:linear-gradient(135deg,#5E7FB6,#4F6FA6)}
.kd-flow__metric{height:64px; display:flex; flex-direction:column; justify-content:center}
.kd-flow__mrate{font-family:var(--kd-sans); font-size:12px; font-weight:600; color:var(--kd-text2); line-height:1.05}
.kd-flow__mval{font-family:var(--kd-sans); font-weight:900; font-size:1.4rem; color:var(--kd-text); line-height:1.02}
.kd-flow__msub{font-family:var(--kd-sans); font-size:11px; color:var(--kd-text2); margin-top:1px}
.kd-flow__out{display:flex; flex-wrap:nowrap; gap:14px; margin-top:18px; max-width:820px; margin-left:auto; margin-right:auto}
.kd-flow__oborot,.kd-flow__share{flex:1 1 0; min-width:0; border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.kd-flow__oborot{background:linear-gradient(135deg,#6E8BC4,#4F6FA6); color:#fff}
.kd-flow__share{background:var(--kd-pale); border:1px solid var(--kd-cobalt); color:var(--kd-text)}
.kd-flow__out-l{font-family:var(--kd-sans); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.85}
.kd-flow__oborot .kd-flow__out-l{color:rgba(255,255,255,.85)}
.kd-flow__out-v{font-family:var(--kd-sans); font-weight:900; font-size:1.5rem; letter-spacing:-.01em}
.kd-flow__out-n{font-family:var(--kd-sans); font-size:12px}
.kd-flow__oborot .kd-flow__out-n{color:rgba(255,255,255,.82)}
.kd-flow__share .kd-flow__out-n{color:var(--kd-text2)}

/* kd_chainflow: горизонтальная цепочка контакт→результат со стрелками */
.kd-chainflow{margin:2.2rem auto; max-width:820px; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 3px}
.kd-chainflow__step{display:flex; align-items:center; gap:3px; flex:0 0 auto}
.kd-chainflow__node{font-family:var(--kd-sans); font-weight:600; font-size:.76rem; color:var(--kd-text); background:var(--kd-pale); border:1px solid var(--kd-slate); border-radius:999px; padding:4px 9px; line-height:1.1; white-space:nowrap}
.kd-chainflow__arrow{color:var(--kd-cobalt-d); font-weight:800; font-size:.9rem; padding:0 1px; flex:0 0 auto}
@media (max-width:760px){
  .kd-chainflow{display:grid; grid-template-columns:1fr auto; gap:4px 8px; justify-items:start}
  .kd-chainflow__step{grid-column:1; justify-self:start}
  .kd-chainflow__arrow{grid-column:2; justify-self:center}
  .kd-chainflow__node{font-size:.8rem; padding:5px 10px}
}
@media (max-width:620px){
  .kd-flow__funnel{flex-direction:column; gap:4px}
  .kd-flow__labels,.kd-flow__metrics{flex:0 0 auto; max-width:100%; align-items:center; text-align:center}
  .kd-flow__label,.kd-flow__metric{height:auto; margin:2px 0}
  .kd-flow__stack{flex:0 0 100%; max-width:100%; clip-path:polygon(4% 0,96% 0,70% 100%,30% 100%)}
  .kd-flow__out{flex-direction:column}
}

/* H2 без авто-нумерации «01/», ссылки кобальтовые (для всех статей КЦ Инсайд) */
.article:has(.kd-article) .article__body h2::before{content:none}
.article:has(.kd-article) .article__body a,
.article:has(.kd-article) .article__body p a{color:var(--kd-cobalt-d); text-decoration:underline; text-decoration-color:var(--kd-slate); text-underline-offset:2px}
.article:has(.kd-article) .article__body a:hover{color:var(--kd-cobalt); text-decoration-color:var(--kd-cobalt)}

/* kd_datastory: число и единица измерения — в одну строку, без «оторванной» подписи */
.kd-data .kd-num{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .35em; line-height:1}
.kd-data .kd-num small{display:inline; font-size:.42em; font-weight:600; letter-spacing:.01em; color:var(--kd-text2); white-space:normal}
.kd-data .kd-calc{font-family:var(--kd-sans)}
