/* База знаний: блоки поверх общего styles.css. Токены и шрифты берём из основного стиля сайта. */
/* хлебные крошки над героем */
.kb-crumbs{max-width:1180px;margin:18px auto 0;padding:0 22px;font-size:13.5px;font-weight:600;color:var(--mut)}
.kb-crumbs a{color:var(--mut);text-decoration:none}
.kb-crumbs a:hover{color:var(--blue)}
.kb-crumbs i{font-style:normal;margin:0 8px;opacity:.55}
/* Коротко: быстрый ответ */
.kb-tldr{background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:var(--r-sm);padding:22px 24px;margin:0 0 26px}
.kb-tldr b{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.kb-tldr ul{list-style:none;padding:0;margin:0}
.kb-tldr li{position:relative;padding-left:26px;margin-bottom:11px;font-size:16.5px;line-height:1.55;color:var(--ink2)}
.kb-tldr li:last-child{margin-bottom:0}
.kb-tldr li:before{content:"";position:absolute;left:3px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
/* содержание */
.kb-toc{border:1px solid var(--line);border-radius:var(--r-sm);padding:22px 24px;margin:0 0 34px;background:#fff;box-shadow:var(--sh)}
.kb-toc b{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.kb-toc ol{margin:0;padding-left:22px}
.kb-toc li{margin-bottom:9px;font-size:16px;line-height:1.45}
.kb-toc li:last-child{margin-bottom:0}
.kb-toc a{color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}
.kb-toc a:hover{color:var(--blue);border-bottom-color:rgba(47,107,255,.4)}
/* врезки */
.kb-call{border:1px solid var(--line);border-left:5px solid var(--blue);background:#fff;border-radius:var(--r-sm);padding:20px 24px;margin:26px 0;box-shadow:var(--sh)}
.kb-call b{display:block;font-weight:800;color:var(--ink);margin-bottom:8px}
.kb-call p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.kb-call.tip{border-left-color:var(--body)}
.kb-call.med{border-left-color:#d64545;background:#fff6f6;border-color:#f3d9d9}
.kb-call.med b{color:#b03535}
/* таблица */
.kb-tbl{margin:28px 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh);background:#fff}
/* 12.09.2026: на телефоне широкая таблица листается пальцем, но обрезалась ровно по рамке
без намёка на продолжение (в 11 статьях из 12 проверенных). Правый край мягко гаснет. */
@media(max-width:640px){.kb-tbl{scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}}
.kb-tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
.kb-tbl th{background:var(--soft);text-align:left;font-weight:800;color:var(--ink);padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.kb-tbl td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink2);line-height:1.55;vertical-align:top}
.kb-tbl tr:last-child td{border-bottom:0}
.kb-tbl caption{caption-side:bottom;text-align:left;padding:12px 16px;font-size:13.5px;color:var(--mut)}
/* практика */
.kb-practice{background:linear-gradient(135deg,#f2f6ff,#eef1fb);border:1px solid #dde5fb;border-radius:var(--r-md);padding:26px 28px;margin:30px 0}
.kb-practice b{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.kb-practice p{margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.kb-practice ol{margin:0 0 14px;padding-left:22px}
.kb-practice li{margin-bottom:10px;font-size:16.5px;line-height:1.6;color:var(--ink2)}
.kb-practice .chk{margin:0;font-size:15.5px;color:var(--ink);font-weight:600}
/* источники */
.kb-src{border-top:1px solid var(--line);margin:44px 0 0;padding-top:24px}
.kb-src b{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.kb-src ol{margin:0;padding-left:22px}
.kb-src li{margin-bottom:11px;font-size:15px;line-height:1.55;color:var(--mut)}
.kb-src a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(47,107,255,.35)}
.kb-src a:hover{border-bottom-color:var(--blue)}
/* автор */
.kb-author{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;margin:30px 0 0;background:var(--soft)}
.kb-author .av{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:.02em}
.kb-author b{display:block;color:var(--ink);font-weight:800;margin-bottom:5px}
.kb-author small{display:block;color:var(--mut);font-size:14px;line-height:1.55}
/* FAQ поверх общего .faq: делаем ширину как у текста */
.kb-faq{max-width:780px;margin:0 auto}
.kb-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;box-shadow:var(--sh);overflow:hidden}
.kb-faq summary{padding:20px 24px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:16.5px;color:var(--ink)}
.kb-faq summary::-webkit-details-marker{display:none}
.kb-faq summary:after{content:"+";color:var(--blue);font-weight:800;font-size:24px;line-height:1;transition:.2s}
.kb-faq details[open] summary:after{transform:rotate(45deg)}
.kb-faq .fa{padding:0 24px 22px}
.kb-faq .fa p{margin:0 0 12px;color:var(--ink2);line-height:1.68;font-size:16.5px}
.kb-faq .fa p:last-child{margin-bottom:0}
/* обновлено */
.kb-upd{font-size:13.5px;color:var(--mut);margin:34px 0 0}
@media(max-width:720px){
.kb-practice{padding:22px 20px}
.kb-toc,.kb-tldr,.kb-call{padding:18px 18px}
.kb-author{flex-direction:column;gap:12px}
}
/* ===== хаб раздела ===== */
.kb-hero{padding:34px 0 8px}
.kb-hero .eyebrow{display:inline-block;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.kb-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(28px,4vw,50px);line-height:1.05;letter-spacing:-.025em;margin:0 0 16px;max-width:20ch;text-wrap:balance}
.kb-hero p{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--ink2);max-width:70ch;margin:0}
.kb-rubs{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 6px}
.kb-rubs a{padding:9px 16px;border:1px solid var(--line2);border-radius:100px;font-size:14.5px;font-weight:600;color:var(--ink2);text-decoration:none;background:#fff}
.kb-rubs a:hover{border-color:var(--blue);color:var(--blue)}
.kb-sec{margin:44px 0 0}
.kb-sec h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;margin:0 0 6px}
.kb-sec .cnt{font-size:14px;color:var(--mut);margin:0 0 20px}
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kb-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;box-shadow:var(--sh);transition:.18s}
.kb-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#cfd8f5}
.kb-card .ph{aspect-ratio:16/9;overflow:hidden;background:var(--soft2)}
.kb-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.kb-card .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.kb-card .rk{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.kb-card .tt{font-family:var(--display);font-weight:800;font-size:18.5px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.kb-card .ds{font-size:15px;line-height:1.55;color:var(--mut);flex:1}
.kb-card .mt{font-size:13px;color:var(--mut);font-weight:600}
.kb-soon{border:1px dashed var(--line2);border-radius:var(--r-md);padding:26px;color:var(--mut);font-size:15.5px;line-height:1.6;background:var(--soft)}
@media(max-width:980px){.kb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kb-grid{grid-template-columns:1fr}.kb-hero{padding:22px 0 4px}}
/* ===== продающий блок в конце статьи ===== */
.kb-offer-w{max-width:1180px;margin:56px auto 0;padding:0 22px}
.kb-offer{position:relative;display:grid;grid-template-columns:300px 1fr;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh2);background:#fff;border:1px solid var(--line)}
.kb-offer .of-l{background:linear-gradient(160deg,#2f6bff,#221a5e 70%);color:#fff;padding:34px 30px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.kb-offer .of-tag{display:inline-flex;align-self:flex-start;padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.kb-offer .of-big{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.03em}
.kb-offer .of-nm{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.kb-offer .of-facts{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:9px}
.kb-offer .of-facts li{font-size:14px;line-height:1.35;color:#cfe0ff;padding-left:18px;position:relative}
.kb-offer .of-facts li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#8fb4ff}
.kb-offer .of-r{padding:34px 36px 32px}
.kb-offer .of-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.kb-offer h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,29px);line-height:1.16;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);padding:0}
.kb-offer h2:before{display:none}
.kb-offer .of-brg{font-size:16.5px;line-height:1.6;color:var(--ink2);margin:0 0 18px}
.kb-offer .of-list{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.kb-offer .of-list li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.45;color:var(--ink2)}
.kb-offer .of-list li:before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:rgba(47,107,255,.12);
background-image:url("data:image/svg+xml;utf8,");
background-size:11px 11px;background-position:center;background-repeat:no-repeat}
.kb-offer .of-buy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.kb-offer .of-old{font-size:16px;color:var(--mut);text-decoration:line-through}
.kb-offer .of-price{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.kb-offer .of-note{margin:14px 0 0;font-size:13.5px;color:var(--mut)}
.kb-step2{max-width:1180px;margin:16px auto 0;padding:18px 24px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);font-size:15.5px;line-height:1.6;color:var(--ink2)}
.kb-step2 b{color:var(--ink)}
.kb-step2 a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(47,107,255,.35)}
@media(max-width:900px){
.kb-offer{grid-template-columns:1fr}
.kb-offer .of-l{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:24px}
.kb-offer .of-facts{flex-direction:row;flex-wrap:wrap;gap:8px 18px;width:100%}
.kb-offer .of-r{padding:26px 22px 24px}
.kb-offer .of-list{grid-template-columns:1fr}
.kb-offer .of-big{font-size:36px}
}
/* ===== что ещё посмотреть: рекомендации ===== */
.kb-rec-w{max-width:1180px;margin:26px auto 0;padding:0 22px}
.kb-rec-t{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.kb-rec{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kb-rec a{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;box-shadow:var(--sh);transition:.18s}
.kb-rec a:hover{border-color:#cfd8f5;transform:translateY(-2px);box-shadow:var(--sh2)}
.kb-rec .ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--soft2);display:flex;align-items:center;justify-content:center}
.kb-rec .tx b{display:block;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
.kb-rec .tx span{display:block;font-size:14.5px;line-height:1.5;color:var(--mut)}
.kb-rec .tx em{display:block;font-style:normal;margin-top:9px;font-size:13.5px;font-weight:700;color:var(--blue)}
@media(max-width:760px){.kb-rec{grid-template-columns:1fr}}
/* ===== графика в статье ===== */
/* круг тревоги: шаги со стрелками */
.kb-flow{margin:30px 0;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh);padding:24px 22px}
.kb-flow .ft{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.kb-flow .row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.kb-flow .st{flex:1 1 150px;min-width:150px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 14px 15px;display:flex;flex-direction:column;gap:8px}
.kb-flow .st .ic{width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.kb-flow .st b{font-size:14.5px;line-height:1.3;color:var(--ink);font-weight:800}
.kb-flow .st span{font-size:13.5px;line-height:1.45;color:var(--mut)}
/* Карточка схемы узкая (130..150px), а слова в ней бывают длиннее: после подъёма
кегля «Микропробуждение» просило 163 при ширине 139 и вылезало наружу.
Разрешаем перенос внутри слова, иначе кегль пришлось бы вернуть обратно. */
.kb-flow .st b,.kb-flow .st span{overflow-wrap:break-word;hyphens:auto}
.kb-flow .ar{flex:0 0 auto;align-self:center;color:#b9c3e8}
.kb-flow .back{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--blue);font-weight:600}
.kb-flow .back svg{flex:0 0 auto}
/* схема дыхания */
.kb-breath{margin:26px 0;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(135deg,#f2f6ff,#eef1fb);padding:22px 24px}
.kb-breath .bt{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.kb-breath .ln{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.kb-breath .lb{flex:0 0 92px;font-size:14.5px;font-weight:700;color:var(--ink)}
.kb-breath .bar{height:14px;border-radius:100px;position:relative}
.kb-breath .bar.in{width:30%;background:linear-gradient(90deg,#8fb4ff,#2f6bff)}
.kb-breath .bar.hold{width:16%;background:#cfd8f5}
.kb-breath .bar.out{width:62%;background:linear-gradient(90deg,#2f6bff,#221a5e)}
.kb-breath .nt{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:14px 0 0}
/* иконка у подзаголовка причины */
.article h3.kb-cause{display:flex;align-items:center;gap:11px;margin:30px 0 10px;font-size:19px}
.article h3.kb-cause .ic{flex:0 0 auto;width:36px;height:36px;border-radius:11px;background:rgba(47,107,255,.09);display:flex;align-items:center;justify-content:center}
@media(max-width:640px){
.kb-flow .ar{display:none}
.kb-breath .lb{flex:0 0 78px;font-size:13.5px}
}
/* источники компактно и свёрнуто */
details.kb-src{border-top:1px solid var(--line);border-bottom:0;margin:40px 0 0;padding-top:18px}
details.kb-src summary{list-style:none;cursor:pointer;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
details.kb-src summary::-webkit-details-marker{display:none}
details.kb-src summary:after{content:"+";font-size:18px;line-height:1;color:var(--blue)}
details.kb-src[open] summary:after{content:"–"}
details.kb-src ol{margin:14px 0 0;padding-left:20px}
details.kb-src li{margin-bottom:7px;font-size:13px;line-height:1.5;color:var(--mut)}
/* шкала маршрута в оффере */
.of-track{margin:0 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.of-track .tr{display:flex;align-items:center;gap:0}
.of-track .dot{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #c3cdf0;flex:0 0 auto}
.of-track .dot.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.16)}
.of-track .seg{flex:1;height:3px;background:linear-gradient(90deg,var(--blue),#c3cdf0)}
.of-track .lb{display:flex;justify-content:space-between;gap:16px;margin-top:11px}
.of-track .lb span{font-size:13px;line-height:1.4;color:var(--mut);max-width:46%}
.of-track .lb span:last-child{text-align:right}
.of-track .lb b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.kb-bridge{border-left:3px solid var(--blue);padding-left:18px;margin:30px 0 0}
.kb-bridge p{margin:0;font-size:17px;line-height:1.7;color:var(--ink2)}
@media(max-width:640px){
.of-track .lb{flex-direction:column;gap:10px}
.of-track .lb span,.of-track .lb span:last-child{max-width:100%;text-align:left}
}
/* ===== ВАРИАНТ Б: самодиагностика перед оффером ===== */
.kb-diag{max-width:1180px;margin:56px auto 0;padding:28px 30px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh)}
.kb-diag .dg-e{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.kb-diag h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,28px);letter-spacing:-.02em;margin:10px 0 6px;padding:0;color:var(--ink)}
.kb-diag h2:before{display:none}
.kb-diag .dg-s{font-size:16px;color:var(--mut);margin:0 0 20px}
.kb-diag .dg-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-bottom:22px}
.kb-diag label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);cursor:pointer;font-size:15.5px;line-height:1.45;color:var(--ink2);transition:.15s}
.kb-diag label:hover{border-color:#c3cdf0}
.kb-diag input{appearance:none;flex:0 0 auto;width:20px;height:20px;border:2px solid #c3cdf0;border-radius:6px;background:#fff;margin-top:1px;position:relative;cursor:pointer}
.kb-diag input:checked{background:var(--blue);border-color:var(--blue)}
.kb-diag input:checked:after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.kb-diag label:has(input:checked){background:rgba(47,107,255,.06);border-color:#b9c9f7;color:var(--ink)}
.kb-diag .dg-res{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kb-diag .dg-cnt{font-family:var(--display);font-weight:900;font-size:34px;letter-spacing:-.02em;color:var(--blue);line-height:1}
.kb-diag .dg-msg{font-size:16px;line-height:1.55;color:var(--ink2);flex:1;min-width:240px}
@media(max-width:760px){.kb-diag{padding:22px 20px}.kb-diag .dg-list{grid-template-columns:1fr}}
/* ===== ВАРИАНТ В: два пути ===== */
.kb-two{max-width:1180px;margin:56px auto 0;padding:0 22px}
.kb-two .tw-h{text-align:left;margin-bottom:20px}
.kb-two .tw-e{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.kb-two h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,30px);letter-spacing:-.02em;margin:10px 0 0;padding:0;color:var(--ink)}
.kb-two h2:before{display:none}
.kb-two .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kb-two .col{border:1px solid var(--line);border-radius:var(--r-md);padding:24px 24px 26px;background:#fff}
.kb-two .col.hi{background:linear-gradient(160deg,#2f6bff,#221a5e 75%);border-color:transparent;color:#fff;box-shadow:var(--sh2)}
.kb-two .col .ttl{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:4px;color:var(--ink)}
.kb-two .col.hi .ttl{color:#fff}
.kb-two .col .sub{font-size:14px;color:var(--mut);margin-bottom:16px}
.kb-two .col.hi .sub{color:#cfe0ff}
.kb-two ul{list-style:none;padding:0;margin:0 0 18px}
.kb-two li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.kb-two .col.hi li{color:#e6eeff}
.kb-two li:before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:50%;background:#c3cdf0}
.kb-two .col.hi li:before{background:#8fb4ff}
.kb-two .foot{border-top:1px solid var(--line);padding-top:16px;font-size:15px;color:var(--mut)}
.kb-two .col.hi .foot{border-top-color:rgba(255,255,255,.22);color:#cfe0ff;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kb-two .pr{font-family:var(--display);font-weight:900;font-size:26px;color:#fff;letter-spacing:-.02em}
.kb-two .old{text-decoration:line-through;font-size:15px;color:#9fb6ee}
@media(max-width:820px){.kb-two .cols{grid-template-columns:1fr}}
/* ================== МОБИЛЬНЫЙ UX (проработано 15.08.2026) ================== */
/* 1. Якоря не прячутся под липкой шапкой */
.article h2[id],.article h3[id]{scroll-margin-top:86px}
/* 2. Полоса прогресса чтения */
.kb-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#2f6bff,#221a5e);z-index:120;transition:width .12s linear}
/* 3. Кнопка наверх */
.kb-up{position:fixed;right:14px;bottom:16px;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line2);box-shadow:var(--sh2);display:none;align-items:center;justify-content:center;z-index:110;color:var(--ink)}
.kb-up.on{display:flex}
/* 4. Подсказка, что таблица листается */
.kb-tbl{position:relative}
.kb-tbl:after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));border-radius:0 var(--r-sm) var(--r-sm) 0;opacity:0;transition:.2s}
.kb-tbl.scrollable:after{opacity:1}
.kb-tbl-hint{display:none;font-size:13px;color:var(--mut);margin:0 0 8px;padding-left:2px}
.kb-tbl-hint.on{display:block}
@media(max-width:640px){
/* 5. Читаемость текста: крупнее и просторнее */
.article{padding-left:18px;padding-right:18px}
.article p{font-size:17.5px;line-height:1.72;margin:0 0 18px}
.article .lead{font-size:19px;line-height:1.55}
.article h2{font-size:22px;line-height:1.2;margin:34px 0 12px;padding-left:14px}
.article h2::before{width:4px}
.article h3.kb-cause{font-size:17.5px;gap:10px;margin:26px 0 8px}
.article h3.kb-cause .ic{width:32px;height:32px;border-radius:9px}
.article ul.pts li{font-size:17px;line-height:1.6}
/* 6. Герой ниже, заголовок читаемый, метаданные не рвутся */
.arthero{min-height:330px;border-radius:22px;margin-top:14px}
/* Заголовок обложки на телефоне (перемерено браузером 27.08.2026).
Сначала думали на text-wrap:balance из styles.css и выключили его. Замер
показал другое: слова просто НЕ ВЛЕЗАЮТ. «ЧУВСТВО ОДИНОЧЕСТВА:» при кегле
25 занимает 110 процентов полосы на экране 360 и 103 на 390, поэтому любая
раскладка обязана их разнести. На 430 и шире сирот не было вовсе.
Запас берём тремя источниками сразу, чтобы не рубить кегль в одиночку:
плавный кегль 22..25, поля 18 -> 14 и межбуквенное -.035em.
Баланс всё равно выключен: на узкой полосе он ровняет строки в ущерб делу. */
.arthero .in{padding:22px 14px 24px}
.arthero h1{font-size:clamp(22px,6.1vw,25px);line-height:1.12;max-width:100%;text-wrap:normal;letter-spacing:-.035em;overflow-wrap:break-word}
.artmeta{font-size:12px;gap:8px;margin-bottom:10px}
/* 7. Оглавление складывается, чтобы не съедать экран */
.kb-toc{padding:0;border-radius:14px}
.kb-toc>b{display:block;padding:16px 18px;margin:0}
.kb-toc ol{padding:0 18px 8px 34px}
.kb-toc li{margin-bottom:0}
.kb-toc a{display:block;padding:11px 0;font-size:16px}
/* 8. Пальцевые зоны: FAQ и ссылки не меньше 48px */
.kb-faq summary{min-height:56px;align-items:center;padding:16px 18px;font-size:16.5px}
.kb-faq .fa{padding:0 18px 18px}
.kb-faq .fa p{font-size:16.5px}
/* 9. Плашки с цифрами в одну колонку, крупная цифра */
.artstats .stats{grid-template-columns:1fr;gap:10px}
.artstats .stat{padding:16px 18px}
/* 10. Врезки и практика без лишних отступов */
.kb-call{padding:16px 18px;margin:22px 0}
.kb-call p{font-size:16.5px}
.kb-practice{padding:20px 18px;border-radius:18px}
.kb-practice li,.kb-practice p{font-size:16.5px}
/* 11. Таблицы: шире экран, мельче шрифт, но читаемо */
/* Читаемость мелкого на телефоне (замерено браузером 27.08.2026).
Поднимаем только то, что человек ЧИТАЕТ: тело таблиц, подписи схем,
подписи плашек-цифр, состав продукта. Надзаголовки блоков (.kb-practice b,
.kb-flow .ft) оставлены как есть: 13px капсом с разрядом .12em это
осознанный набор надзаголовка, а не мелкий текст. */
.kb-tbl table{min-width:520px;font-size:15.5px}
.kb-flow .st b{font-size:16px}
.kb-flow .st span{font-size:15px}
.artstats .stat span{font-size:15px}
.kb-author small{font-size:15px}
.kb-offer .of-facts li{font-size:15px}
/* Условия покупки человек читает ПЕРЕД оплатой, это не мелкий шрифт в подвале. */
.kb-offer .of-note{font-size:14.5px;line-height:1.5}
.kb-tbl th,.kb-tbl td{padding:12px 13px}
/* 12. Источники и автор */
details.kb-src summary{min-height:48px;align-items:center}
.kb-author{padding:18px}
/* 13. Оффер: кнопка на всю ширину, цена крупно */
.kb-offer-w{padding:0 18px;margin-top:40px}
.kb-offer{border-radius:22px}
.kb-offer .of-buy{gap:12px}
.kb-offer .of-buy .btn{width:100%;justify-content:center;min-height:52px;font-size:16.5px}
.kb-offer .of-price{font-size:28px}
.kb-offer .of-list li{font-size:16px}
.kb-bridge{padding-left:14px;margin-top:26px}
.kb-bridge p{font-size:17px}
}
/* оглавление как сворачиваемый блок */
details.kb-toc{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;box-shadow:var(--sh);margin:0 0 34px;padding:0}
details.kb-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
details.kb-toc summary::-webkit-details-marker{display:none}
details.kb-toc summary:after{content:"";width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);margin-top:-4px;transition:.2s}
details.kb-toc[open] summary:after{transform:rotate(-135deg);margin-top:2px}
details.kb-toc ol{margin:0;padding:0 22px 16px 42px}
details.kb-toc li{margin-bottom:2px;font-size:16px;line-height:1.4}
details.kb-toc a{display:block;padding:9px 0;color:var(--ink2);text-decoration:none}
details.kb-toc a:hover{color:var(--blue)}
@media(max-width:640px){
details.kb-toc summary{min-height:56px;padding:16px 18px}
details.kb-toc ol{padding:0 18px 12px 36px}
details.kb-toc a{padding:11px 0}
}
/* ================== ХАБ РАЗДЕЛА, версия 2 ================== */
.hb-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(150deg,#2f6bff 0%,#221a5e 70%);color:#fff;padding:46px 48px 42px;margin:22px 0 0;box-shadow:var(--sh2)}
.hb-hero:before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(143,180,255,.35),transparent 68%)}
.hb-hero .eb{position:relative;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a9c4ff}
.hb-hero h1{position:relative;font-family:var(--display);font-weight:900;font-size:clamp(28px,4.2vw,52px);line-height:1.03;letter-spacing:-.03em;margin:14px 0 16px;max-width:17ch;text-wrap:balance}
.hb-hero p{position:relative;font-size:clamp(16.5px,1.7vw,19px);line-height:1.6;color:#d7e2ff;max-width:60ch;margin:0}
.hb-feat{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hb-feat span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);font-size:14px;font-weight:600;color:#fff}
.hb-feat svg{flex:0 0 auto}
.hb-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
.hb-nav a{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;text-decoration:none;box-shadow:var(--sh);transition:.16s;min-height:76px}
.hb-nav a:hover{border-color:#c3cdf0;transform:translateY(-2px);box-shadow:var(--sh2)}
.hb-nav .ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:rgba(47,107,255,.09);display:flex;align-items:center;justify-content:center}
.hb-nav b{display:block;font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.hb-nav small{display:block;font-size:13.5px;line-height:1.45;color:var(--mut)}
.hb-nav .cnt{margin-left:auto;align-self:center;font-size:13px;font-weight:800;color:var(--blue);background:rgba(47,107,255,.1);border-radius:100px;padding:4px 10px}
/* большая карточка свежего разбора */
.hb-lead{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh);margin-top:18px}
.hb-lead .ph{position:relative;min-height:260px}
.hb-lead .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-lead .bd{padding:30px 32px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.hb-lead .rk{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.hb-lead h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.1vw,26px);line-height:1.2;letter-spacing:-.02em;margin:0;color:var(--ink)}
.hb-lead p{margin:0;font-size:16px;line-height:1.6;color:var(--mut)}
.hb-lead .mt{display:flex;gap:14px;align-items:center;font-size:13.5px;color:var(--mut);font-weight:600}
.hb-lead .go{margin-top:6px;font-weight:800;color:var(--blue);font-size:15.5px}
.hb-lead a.cov{position:absolute;inset:0}
@media(max-width:980px){.hb-nav{grid-template-columns:repeat(2,1fr)}.hb-lead{grid-template-columns:1fr}.hb-lead .ph{min-height:200px}}
@media(max-width:640px){
.hb-hero{padding:28px 20px 26px;border-radius:22px;margin-top:14px}
.hb-hero h1{font-size:29px;max-width:100%}
.hb-hero p{font-size:16.5px}
.hb-feat{gap:8px;margin-top:20px}
.hb-feat span{font-size:13px;padding:8px 13px}
.hb-nav{grid-template-columns:1fr;gap:10px}
.hb-nav a{min-height:64px;padding:15px 16px}
.hb-lead .bd{padding:20px 18px 22px}
.hb-lead .ph{min-height:180px}
.kb-sec{margin-top:34px}
.kb-card .bd{padding:16px 18px 18px}
.kb-soon{padding:18px 18px;font-size:15px}
}
/* пальцевые зоны на телефоне: доводим до 44px там, где отвечаем за раздел */
@media(max-width:640px){
.kb-crumbs{padding-top:6px}
.kb-crumbs a{display:inline-block;padding:13px 0}
.artmeta a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.fnav .flinks a{min-height:54px;display:flex;align-items:center;justify-content:center}
.bot a{display:inline-block;padding:12px 0}
header .burger{min-height:44px;min-width:44px}
}
/* компактный список разборов внутри рубрики (масштабируется на сотни статей) */
.kb-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.kb-list a{display:flex;align-items:center;gap:16px;padding:18px 22px;text-decoration:none;border-bottom:1px solid var(--line);transition:.14s;min-height:64px}
.kb-list a:last-child{border-bottom:0}
.kb-list a:hover{background:var(--soft)}
.kb-list .tx{flex:1;min-width:0}
.kb-list .tt{display:block;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.kb-list .mt{display:block;font-size:13.5px;color:var(--mut);margin-top:4px}
.kb-list .ar{flex:0 0 auto;color:#b9c3e8}
.kb-list a:hover .ar{color:var(--blue)}
@media(max-width:640px){
/* убираем провал между крошками и героем */
.kb-crumbs{margin-top:10px}
.hb-hero{margin-top:8px}
section>.wrap{padding-top:0}
/* плашки-фичи компактнее, помещаются по две в ряд */
.hb-feat span{font-size:12.5px;padding:7px 11px;gap:6px}
/* список разборов */
.kb-list a{padding:15px 16px;min-height:60px}
.kb-list .tt{font-size:16.5px}
}
/* ===== хаб: кликабельность и плотность (правка 15.08.2026) ===== */
a.hb-lead{display:grid;text-decoration:none;transition:.18s}
a.hb-lead:hover{box-shadow:var(--sh2);border-color:#cfd8f5;transform:translateY(-2px)}
a.hb-lead:hover .go{background:var(--blue-d)}
.hb-lead .go{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:8px;background:var(--blue);color:#fff;font-weight:700;font-size:15.5px;padding:13px 22px;border-radius:12px;min-height:48px;transition:.16s}
.hb-lead .ph{overflow:hidden}
a.hb-lead:hover .ph img{transform:scale(1.03)}
.hb-lead .ph img{transition:transform .5s ease}
/* рубрика без статей: не ссылка, а спокойная плашка */
.hb-nav .soon{cursor:default;background:var(--soft);border-style:dashed;box-shadow:none}
.hb-nav .soon:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.hb-nav .soon b{color:var(--ink2)}
.hb-nav .soon .cnt{background:transparent;color:var(--mut);padding-left:0}
/* заголовок раздела списка */
.hb-all{margin-top:34px}
.hb-all .hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.hb-all h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;margin:0}
.hb-all .sub{font-size:14.5px;color:var(--mut)}
.kb-list .rk{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:5px}
@media(max-width:640px){
.hb-all .hd{flex-direction:column;gap:4px;align-items:flex-start}
.hb-lead .go{width:100%;justify-content:center;margin-top:12px}
}
/* ================== ПРЕМИУМ-ХАБ v3 ================== */
.hb3{max-width:1180px;margin:0 auto;padding:0 22px}
.hb3-hero{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(145deg,#1b2a6b 0%,#2f6bff 42%,#1a1550 100%);color:#fff;padding:54px 56px 46px;margin-top:18px;box-shadow:0 30px 70px rgba(31,26,94,.28)}
.hb3-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;opacity:.5;mask-image:radial-gradient(120% 90% at 80% 0%,#000,transparent 70%)}
.hb3-hero:after{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(143,180,255,.42),transparent 65%)}
.hb3-hero>*{position:relative;z-index:1}
.hb3-eb{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#bcd0ff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:100px}
.hb3-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.4vw,54px);line-height:1.02;letter-spacing:-.035em;margin:20px 0 16px;max-width:18ch;text-wrap:balance}
.hb3-hero .ld{font-size:clamp(16.5px,1.65vw,19px);line-height:1.6;color:#d9e3ff;max-width:58ch;margin:0}
.hb3-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.hb3-stats div b{display:block;font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.02em}
.hb3-stats div span{font-size:13.5px;color:#b9cbff}
/* поиск */
.hb3-search{position:relative;margin:26px 0 0}
.hb3-search input{width:100%;height:60px;border-radius:16px;border:1px solid var(--line2);background:#fff;padding:0 52px 0 52px;font-family:var(--sans);font-size:16.5px;color:var(--ink);box-shadow:var(--sh);outline:none;transition:.16s}
.hb3-search input::placeholder{color:#9aa2bd}
.hb3-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.14)}
.hb3-search .mg{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:#9aa2bd;pointer-events:none}
.hb3-search .clr{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:var(--soft2);color:var(--mut);display:none;align-items:center;justify-content:center;cursor:pointer}
.hb3-search .clr.on{display:flex}
/* фильтры */
.hb3-chips{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
.hb3-chips button{border:1px solid var(--line2);background:#fff;color:var(--ink2);font-family:var(--sans);font-weight:600;font-size:14.5px;padding:10px 16px;border-radius:100px;cursor:pointer;min-height:44px;transition:.15s}
.hb3-chips button:hover{border-color:#b9c9f7;color:var(--blue)}
.hb3-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.hb3-chips button .n{opacity:.55;margin-left:6px;font-weight:700}
/* сетка рубрик */
.hb3-rubs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.hb3-rub{display:flex;gap:14px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;text-decoration:none;box-shadow:var(--sh);transition:.16s;min-height:80px}
.hb3-rub:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#cfd8f5}
.hb3-rub .ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:linear-gradient(140deg,#eaf0ff,#dfe7ff);display:flex;align-items:center;justify-content:center}
.hb3-rub b{display:block;font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.hb3-rub small{display:block;font-size:13.5px;color:var(--mut);margin-top:2px;line-height:1.4}
.hb3-rub .n{margin-left:auto;font-size:13px;font-weight:800;color:var(--blue);background:rgba(47,107,255,.1);border-radius:100px;padding:5px 11px}
.hb3-rub.empty{background:var(--soft);border-style:dashed;box-shadow:none;cursor:default}
.hb3-rub.empty:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.hb3-rub.empty .ic{background:#fff}
.hb3-rub.empty .n{background:transparent;color:var(--mut);padding-right:0}
/* заголовок секции */
.hb3-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:44px 0 16px}
.hb3-h h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,29px);letter-spacing:-.025em;margin:0}
.hb3-h span{font-size:14.5px;color:var(--mut)}
/* карточка-обложка */
a.hb3-lead{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;text-decoration:none;box-shadow:var(--sh);transition:.2s}
a.hb3-lead:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#cfd8f5}
a.hb3-lead .ph{position:relative;min-height:300px;overflow:hidden}
a.hb3-lead .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a.hb3-lead:hover .ph img{transform:scale(1.04)}
a.hb3-lead .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,50,.28),transparent 55%)}
a.hb3-lead .bd{padding:34px 36px;display:flex;flex-direction:column;gap:12px;justify-content:center}
a.hb3-lead .rk{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
a.hb3-lead h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.2vw,28px);line-height:1.18;letter-spacing:-.025em;margin:0;color:var(--ink);text-wrap:balance}
a.hb3-lead p{margin:0;font-size:16px;line-height:1.6;color:var(--mut)}
a.hb3-lead .mt{font-size:13.5px;color:var(--mut);font-weight:600}
a.hb3-lead .go{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:6px;background:var(--blue);color:#fff;font-weight:700;font-size:15.5px;padding:0 22px;height:50px;border-radius:13px;transition:.16s}
a.hb3-lead:hover .go{background:var(--blue-d)}
/* список */
.hb3-list{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--sh)}
.hb3-list a{display:flex;align-items:center;gap:18px;padding:20px 24px;text-decoration:none;border-bottom:1px solid var(--line);transition:.14s;min-height:72px}
.hb3-list a:last-child{border-bottom:0}
.hb3-list a:hover{background:linear-gradient(90deg,rgba(47,107,255,.05),transparent)}
.hb3-list .num{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--mut);font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center}
.hb3-list .tx{flex:1;min-width:0}
.hb3-list .rk{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.hb3-list .tt{display:block;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3;color:var(--ink);letter-spacing:-.012em}
.hb3-list .mt{display:block;font-size:13.5px;color:var(--mut);margin-top:4px}
.hb3-list .ar{flex:0 0 auto;color:#c3cdf0;transition:.14s}
.hb3-list a:hover .ar{color:var(--blue);transform:translateX(3px)}
.hb3-empty{padding:34px 24px;text-align:center;color:var(--mut);font-size:15.5px;display:none}
.hb3-empty.on{display:block}
@media(max-width:980px){.hb3-rubs{grid-template-columns:repeat(2,1fr)}a.hb3-lead{grid-template-columns:1fr}a.hb3-lead .ph{min-height:210px}}
@media(max-width:640px){
.hb3{padding:0 18px}
.hb3-hero{padding:30px 22px 28px;border-radius:24px;margin-top:10px}
.hb3-hero h1{font-size:31px;max-width:100%}
.hb3-stats{gap:22px;margin-top:22px;padding-top:20px}
.hb3-stats div b{font-size:23px}
.hb3-rubs{grid-template-columns:1fr;gap:10px}
.hb3-rub{min-height:70px;padding:15px 16px}
.hb3-h{margin:34px 0 12px;flex-direction:column;align-items:flex-start;gap:4px}
a.hb3-lead .bd{padding:22px 20px 24px}
a.hb3-lead .go{width:100%;justify-content:center;margin-top:10px}
.hb3-list a{padding:16px 16px;gap:14px}
.hb3-list .num{display:none}
.hb3-list .tt{font-size:16.5px}
.hb3-search input{height:56px;font-size:16px}
}
@media(max-width:640px){
/* фильтры одной строкой со свайпом, как в дорогих медиа */
.hb3-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-snap-type:x proximity}
.hb3-chips::-webkit-scrollbar{display:none}
.hb3-chips button{flex:0 0 auto;scroll-snap-align:start}
}
/* плитки рубрик без статей выглядят ровно как остальные, просто не кликаются */
.hb-nav .soon{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh);min-height:76px;cursor:default;border-style:solid}
.hb-nav .soon:hover{transform:none;box-shadow:var(--sh);border-color:var(--line)}
.hb-nav .soon b{display:block;font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.hb-nav .soon small{display:block;font-size:13.5px;line-height:1.45;color:var(--mut)}
.hb-nav .soon .ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:rgba(47,107,255,.09);display:flex;align-items:center;justify-content:center}
.hb-nav .soon .cnt{margin-left:auto;align-self:center;font-size:13px;font-weight:800;color:var(--mut);background:var(--soft2);border-radius:100px;padding:5px 11px;white-space:nowrap}
@media(max-width:640px){.hb-nav .soon{min-height:64px;padding:15px 16px}}
/* низ хаба выравниваем по сетке сайта и убираем провалы */
.hb3{max-width:1520px;padding:0 34px}
.hb3-h{margin:34px 0 14px}
.hb3-h:first-child{margin-top:8px}
section>.hb3{padding-top:0}
.hb-nav{margin-bottom:6px}
@media(max-width:640px){.hb3{padding:0 18px}.hb3-h{margin:26px 0 10px}}
/* ритм по вертикали внизу хаба */
section.kb-lower{padding-top:0;padding-bottom:0}
section.kb-cta{padding-top:52px;padding-bottom:64px}
@media(max-width:640px){section.kb-cta{padding-top:34px;padding-bottom:40px}}
/* ================== ЖУРНАЛЬНОЕ НАЧАЛО СТАТЬИ ================== */
.article .lead{font-size:clamp(20px,2.05vw,23.5px);line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.014em;max-width:64ch;margin:0 0 20px}
.article .lead.kb-drop::first-letter{float:left;font-family:var(--display);font-weight:900;font-size:78px;line-height:.76;padding:9px 15px 0 0;color:var(--blue)}
.kb-byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin:22px 0 30px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.kb-byline b{color:var(--ink);font-weight:800;text-transform:none;letter-spacing:-.01em;font-size:14.5px}
.kb-byline .dot{width:4px;height:4px;border-radius:50%;background:#c3cdf0}
.kb-byline .tag{color:var(--blue)}
@media(max-width:640px){
.article .lead{font-size:19.5px;line-height:1.55;max-width:100%}
.article .lead.kb-drop::first-letter{font-size:60px;padding:6px 11px 0 0}
.kb-byline{gap:5px 14px;font-size:11.5px;letter-spacing:.09em;margin:18px 0 24px}
.kb-byline b{font-size:13.5px}
}
/* ================== ЖУРНАЛЬНАЯ ВЁРСТКА ВСЕЙ СТАТЬИ ================== */
/* нумерованные разделы: линейка, номер, заголовок */
.article{counter-reset:kbsec}
.article h2{padding-left:0}
.article h2::before{content:none}
.article h2[id^="s"]{counter-increment:kbsec;border-top:1px solid var(--line);margin:52px 0 16px;padding-top:30px;position:relative}
.article h2[id^="s"]::before{content:counter(kbsec,decimal-leading-zero);display:block;position:absolute;top:16px;left:0;font-family:var(--display);font-weight:900;font-size:12.5px;letter-spacing:.16em;color:var(--blue);background:none;width:auto;height:auto;border-radius:0}
.article h2#itog,.article h2#faq{border-top:1px solid var(--line);margin:52px 0 16px;padding-top:30px}
/* первый абзац раздела крупнее: журнальный ввод */
.article h2 + p{font-size:18.5px;line-height:1.66;color:var(--ink2)}
/* выносная цитата */
.kb-pull{position:relative;margin:38px 0;padding:6px 0 6px 30px;border-left:4px solid var(--blue)}
.kb-pull p{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.1vw,25px);line-height:1.28;letter-spacing:-.025em;color:var(--ink);margin:0;text-wrap:balance}
.kb-pull cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
/* подписи под схемами */
.kb-cap{font-size:13.5px;color:var(--mut);margin:-14px 0 26px;padding-left:2px}
@media(max-width:640px){
.article h2[id^="s"]{margin:40px 0 12px;padding-top:26px}
.article h2[id^="s"]::before{top:13px;font-size:11.5px}
.article h2#itog,.article h2#faq{margin:40px 0 12px;padding-top:26px}
.article h2 + p{font-size:17.5px}
.kb-pull{padding-left:20px;margin:30px 0}
.kb-pull p{font-size:20px}
}
/* цифры над заголовками убраны: остаётся волосяная линейка и воздух */
.article h2[id^="s"]::before{content:none !important}
.article h2[id^="s"]{padding-top:26px;margin:48px 0 14px}
.article h2#itog,.article h2#faq{padding-top:26px;margin:48px 0 14px}
@media(max-width:640px){
.article h2[id^="s"],.article h2#itog,.article h2#faq{padding-top:22px;margin:38px 0 12px}
}
/* крупная контурная цифра раздела вместо мелкой подписи */
.article h2[id^="s"]::before{
content:counter(kbsec,decimal-leading-zero) !important;
display:block !important;position:static !important;
margin:0 0 4px !important;
font-family:var(--display);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.04em;
color:transparent;-webkit-text-stroke:1.6px rgba(47,107,255,.6);
width:auto !important;height:auto !important;background:none !important;border-radius:0 !important;
}
@media(max-width:640px){
.article h2[id^="s"]::before{font-size:32px;-webkit-text-stroke-width:1.3px}
}
/* цифра раздела: чуть крупнее и заметнее */
.article h2[id^="s"]::before{font-size:46px;-webkit-text-stroke:2px rgba(47,107,255,.72);letter-spacing:.01em;margin-bottom:2px !important}
@media(max-width:640px){.article h2[id^="s"]::before{font-size:36px;-webkit-text-stroke-width:1.6px}}
/* цифра раздела не должна прятаться под шапкой при переходе по оглавлению */
.article h2[id^="s"]{scroll-margin-top:120px}
/* счётчик разборов в обложке раздела */
/* Кнопка стояла inline-flex с нулевым верхним отступом и прижималась вплотную
к последней строке лида (поймано 12.09.2026). Блочный flex по ширине содержимого
убирает призрачную строку от базовой линии, отступы считаются предсказуемо.
Ритм обложки: бейдж 14 → h1 16 → лид 26 → кнопка 24 → плашки. */
.hb-count{display:flex;width:fit-content;align-items:center;gap:9px;margin:26px 0 0;padding:9px 16px;border-radius:100px;
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;
font-size:14.5px;font-weight:600;transition:.16s;min-height:44px}
.hb-count:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45)}
.hb-count b{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-.01em}
@media(max-width:640px){.hb-count{font-size:13.5px;padding:8px 14px;margin-top:20px}}
/* заголовок раздела не жмём: на десктопе он занимает всю ширину обложки */
.hb-hero h1{max-width:none;text-wrap:balance}
@media(min-width:981px){.hb-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.02;max-width:26ch}}
@media(max-width:640px){.hb-hero h1{max-width:100%}}
/* плашки «что внутри разбора»: стекло, иконка в кружке, живой ховер */
.hb-feat{gap:12px;margin-top:24px}
.hb-feat span{position:relative;display:inline-flex;align-items:center;gap:11px;padding:11px 20px 11px 12px;border-radius:100px;
background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.34);color:#fff;font-size:15px;font-weight:600;letter-spacing:-.01em;
box-shadow:0 8px 24px rgba(8,12,40,.28), inset 0 1px 0 rgba(255,255,255,.22);
backdrop-filter:blur(6px);transition:.18s;cursor:default}
.hb-feat span:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border-color:rgba(255,255,255,.5)}
.hb-feat span i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);flex:0 0 auto}
.hb-feat span svg{display:block}
@media(max-width:640px){
.hb-feat{gap:9px;margin-top:20px}
.hb-feat span{font-size:13.5px;padding:9px 15px 9px 9px;gap:9px}
.hb-feat span i{width:26px;height:26px}
}
/* плашки ровной сеткой: восемь штук, ряды одинаковой длины */
.hb-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.hb-feat span{justify-content:flex-start;width:100%;padding:12px 18px 12px 12px}
@media(max-width:1100px){.hb-feat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.hb-feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
.hb-feat{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}
.hb-feat span{font-size:12.5px;padding:9px 11px 9px 8px;gap:8px;line-height:1.25}
.hb-feat span i{width:24px;height:24px}
.hb-feat span svg{width:13px;height:13px}
.hb-feat span.opt{display:none}
}
@media(max-width:640px){.hb-feat span{min-height:46px;align-items:center}}
/* ===== финальный блок раздела: премиум-версия ===== */
.kb-final{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#16205a 0%,#2f6bff 58%,#1a1550 100%);
box-shadow:0 30px 70px rgba(31,26,94,.30);display:grid;grid-template-columns:300px 1fr;color:#fff}
.kb-final:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px;opacity:.45;
-webkit-mask-image:radial-gradient(90% 80% at 85% 10%,#000,transparent 72%)}
.kb-final:after{content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;
background:radial-gradient(circle,rgba(143,180,255,.36),transparent 66%)}
.kb-final>*{position:relative;z-index:1}
.kb-final .lf{padding:38px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px;border-right:1px solid rgba(255,255,255,.16);
background:linear-gradient(180deg,rgba(10,14,44,.34),rgba(10,14,44,.10))}
.kb-final .tag{align-self:flex-start;padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.kb-final .big{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;letter-spacing:-.03em}
.kb-final .nm{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.kb-final ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.kb-final ul li{position:relative;padding-left:17px;font-size:14px;color:#cfe0ff;line-height:1.35}
.kb-final ul li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#8fb4ff}
.kb-final .rt{padding:38px 40px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.kb-final .eb{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#bcd0ff}
.kb-final h2{font-family:var(--display);font-weight:900;font-size:clamp(24px,2.7vw,36px);line-height:1.08;letter-spacing:-.03em;margin:0;text-transform:none;text-wrap:balance;max-width:24ch}
.kb-final p{margin:0;font-size:16.5px;line-height:1.6;color:#dbe5ff;max-width:60ch}
.kb-final .buy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.kb-final .old{font-size:16px;color:#9fb6ee;text-decoration:line-through}
.kb-final .price{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.02em}
.kb-final .go{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;background:#fff;color:#161a2c;
font-weight:800;font-size:16px;text-decoration:none;transition:.16s;box-shadow:0 12px 30px rgba(6,10,40,.32)}
.kb-final .go:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(6,10,40,.42)}
.kb-final .note{font-size:13.5px;color:#b9cbff;margin-top:2px}
@media(max-width:900px){
.kb-final{grid-template-columns:1fr;border-radius:24px}
.kb-final .lf{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:24px 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
.kb-final ul{flex-direction:row;flex-wrap:wrap;gap:8px 18px;width:100%}
.kb-final .big{font-size:36px}
.kb-final .rt{padding:24px 22px 26px}
.kb-final .go{width:100%;justify-content:center}
}
/* ===== разборы блоками по рубрикам ===== */
.kb-group{margin:38px 0 0}
.kb-group .gh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 4px}
.kb-group .gh h3{font-family:var(--display);font-weight:800;font-size:clamp(19px,2vw,24px);letter-spacing:-.025em;margin:0;color:var(--ink)}
.kb-group .gh span{font-size:13.5px;color:var(--mut);font-weight:600;white-space:nowrap}
.kb-group .rule{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),rgba(47,107,255,.12));margin:0 0 18px}
.kb-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kb-rows a{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px 16px 22px;background:#fff;border:1px solid var(--line);
border-radius:14px;text-decoration:none;box-shadow:var(--sh);transition:.16s;min-height:64px;overflow:hidden}
.kb-rows a:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue),var(--indigo));
border-radius:14px 0 0 14px;transition:.16s}
.kb-rows a:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#cfd8f5}
.kb-rows a:hover:before{width:6px}
.kb-rows .tx{flex:1;min-width:0}
.kb-rows .tt{display:block;font-weight:700;font-size:16.5px;line-height:1.3;color:var(--ink);letter-spacing:-.012em}
.kb-rows .mt{display:block;font-size:13px;color:var(--mut);margin-top:4px}
/* Стрелка карточки рисуется маской из CSS, а не вшитым svg в каждой из 291 карточек
(12.09.2026: 305 копий по 202 байта = 60 КБ). Цвет через background:currentColor,
поэтому ховер красит её так же, как раньше. */
.kb-rows .ar{flex:0 0 auto;width:20px;height:20px;color:#c3cdf0;background:currentColor;transition:.16s;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.kb-rows a:hover .ar{color:var(--blue);transform:translateX(3px)}
@media(max-width:820px){.kb-rows{grid-template-columns:1fr}}
@media(max-width:640px){
.kb-group{margin-top:28px}
.kb-rows a{padding:14px 14px 14px 18px;min-height:60px}
.kb-rows .tt{font-size:16px}
}
/* ===== блоки рубрик: свой цвет, иконка, карточки ===== */
.kb-group{margin:44px 0 0}
.kb-group .gh{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.kb-group .gh .ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
color:var(--rub,#2f6bff);background:color-mix(in srgb, var(--rub,#2f6bff) 12%, #fff);
border:1px solid color-mix(in srgb, var(--rub,#2f6bff) 22%, #fff)}
.kb-group .gh h3{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(19px,2vw,25px);letter-spacing:-.025em;color:var(--ink)}
.kb-group .gh .cn{margin-left:auto;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--rub,#2f6bff);
background:color-mix(in srgb, var(--rub,#2f6bff) 10%, #fff);border-radius:100px;padding:6px 13px;white-space:nowrap}
.kb-group .rule{height:3px;border-radius:3px;margin:0 0 18px;
background:linear-gradient(90deg, var(--rub,#2f6bff), color-mix(in srgb, var(--rub,#2f6bff) 12%, #fff))}
.kb-rows a:before{background:linear-gradient(180deg, var(--rub,#2f6bff), color-mix(in srgb, var(--rub,#2f6bff) 55%, #221a5e))}
.kb-rows a:hover{border-color:color-mix(in srgb, var(--rub,#2f6bff) 35%, #fff)}
.kb-rows a:hover .ar{color:var(--rub,#2f6bff)}
.kb-rows .tt{font-size:17px}
@media(max-width:640px){
.kb-group{margin-top:32px}
.kb-group .gh .ic{width:34px;height:34px}
.kb-group .gh h3{font-size:19px}
}
/* инфографика в правом углу обложки раздела */
.hb-art{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:min(46%,560px);pointer-events:none;z-index:0;opacity:.9}
.hb-art svg{width:100%;height:auto;display:block}
.hb-hero>*:not(.hb-art){position:relative;z-index:1}
@media(max-width:1100px){.hb-art{width:52%;right:-60px;opacity:.7}}
@media(max-width:820px){.hb-art{width:70%;right:-110px;top:auto;bottom:-40px;transform:none;opacity:.35}}
@media(max-width:640px){.hb-art{width:88%;right:-90px;bottom:-30px;opacity:.28}}
/* шкала нагрузки: полосы разной длины с подписью величины (добавлено 16.08.2026) */
.kb-load{margin:26px 0;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(135deg,#f2f6ff,#eef1fb);padding:22px 24px}
.kb-load .bt{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.kb-load .ln{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.kb-load .lb{flex:0 0 62px;font-size:14.5px;font-weight:700;color:var(--ink)}
.kb-load .bar{height:14px;border-radius:100px;background:linear-gradient(90deg,#8fb4ff,#2f6bff);flex:0 0 auto}
.kb-load .bar.w1{width:16%}
.kb-load .bar.w2{width:34%}
.kb-load .bar.w3{width:48%}
.kb-load .bar.w4{width:57%}
.kb-load .bar.w5{width:68%}
.kb-load .vl{font-size:14px;color:var(--ink2);white-space:nowrap}
.kb-load .nt{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:14px 0 0}
@media(max-width:640px){
.kb-load{padding:20px 16px}
.kb-load .ln{gap:9px}
.kb-load .lb{flex:0 0 42px;font-size:13.5px}
.kb-load .vl{font-size:12.5px;white-space:normal}
.kb-load .bar.w1{width:11%}
.kb-load .bar.w2{width:24%}
.kb-load .bar.w3{width:33%}
.kb-load .bar.w4{width:39%}
.kb-load .bar.w5{width:46%}
}
/* ─── Плашки шапки: ровная сетка (16.08.2026) ───────────────────────────
Было: колонки 140px и 108px при заданном repeat(2,1fr) и высоты 67 и 51.
Причина: 1fr это minmax(auto,1fr), и колонка раздувается под свой текст,
а ряд с двухстрочной подписью выше ряда с однострочной. Отсюда кривизна.
Лечим двумя вещами: minmax(0,1fr) для строго равных колонок и общая
минимальная высота, чтобы все плашки стояли одной линейкой. */
.hb-feat{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.hb-feat span{min-height:52px;height:100%}
@media(max-width:1100px){.hb-feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.hb-feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
.hb-feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.hb-feat span{min-height:56px;height:100%;padding:10px 12px 10px 9px;
font-size:13px;line-height:1.22;align-items:center}
.hb-feat span i{width:26px;height:26px}
}
/* ─── Обложка статьи по ширине текста (16.08.2026) ──────────────────────
На телефоне обложка сидела в контейнере с полями 34px, а текст статьи
в контейнере с 18px: картинка выходила на 32px уже текста и смотрелась
вставленной внутрь колонки. Вытягиваем её до той же линии, что и текст. */
@media(max-width:640px){
.arthero{margin-left:-16px;margin-right:-16px}
}
/* ─── Цифра на цветной плашке статистики белая (17.08.2026) ─────────────
.stat.hi задаёт color:#fff, но цифра внутри тёмная: правило
.article b{color:var(--ink)} бьёт по напрямую, а прямое правило
всегда сильнее унаследованного цвета родителя. Отсюда тёмные проценты
на синем фоне. Возвращаем белый с нужным весом, для всех трёх окрасок. */
.article .stat.hi b,
.article .stat.hi.t b,
.article .stat.hi.m b{color:#fff}
/* Подвал статьи: две колонки навигации одинаковой ширины, чтобы плашки
«Разделов» и «Проекта» совпадали по размеру. Без этого auto-fill даёт
в одной колонке три плашки, в другой две, и рядом они читаются разнокалиберно. */
/* 22.08.2026: правило было безусловным и перебивало мобильные сетки сайта
(1000px две колонки, 560px одна), из-за чего подвал на телефоне вылезал
за экран на 5 пикселей. Теперь оно только для десктопа. */
@media(min-width:1001px){footer .fgrid{grid-template-columns:1.4fr 1.3fr 1.3fr}}
@media(min-width:901px){.fnav .flinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ── Поиск по разборам ─────────────────────────────────────────────
Разборов стало сто, плоский список ими уже не управляет. Ищет по
заголовку, описанию и ВОПРОСАМ FAQ: человек приходит со своим
симптомом («ком в горле», «просыпаюсь в три»), а не с названием.
Всё считается в браузере, поэтому работает и на копии сайта. */
.kb-pole input::placeholder{color:#9aa1b8}
.kb-pole input::-webkit-search-cancel-button{display:none}
.kb-clr{position:relative;flex:none;border:0;background:#eef1f8;color:#4d5470;width:34px;height:34px;
border-radius:50%;font-size:21px;line-height:1;cursor:pointer;transition:.18s}
.kb-clr:after{content:"";position:absolute;inset:-7px}
.kb-clr:hover{background:#e2e7f5;color:#141a33}
.kb-itog{min-height:22px;margin:10px 2px 0;font-size:14px;color:#6b7290;font-weight:600}
.kb-itog.pusto{color:#c0562f}
.kb-group[hidden],.kb-rows a[hidden]{display:none}
@media(max-width:700px){
.kb-poisk{margin:28px 0 2px}
.kb-pole{height:54px;padding:0 13px;gap:9px;border-radius:14px}
.kb-pole input{font-size:16px}
}
/* ПОЛ ШРИФТА НА ТЕЛЕФОНЕ */
/* Метки рубрик и подпись автора набраны в 11-11,5 пикселя. На десктопе это
уместно, на телефоне уже мелко, а мобильную пригодность Яндекс смотрит
отдельно. Десктоп не тронут. */
@media(max-width:768px){
.kb-list .rk{font-size:12px}
a.hb3-lead .rk{font-size:12px}
.hb3-list .rk{font-size:12px}
.kb-byline{font-size:12px}
.kb-final .tag{font-size:12px}
.article .tag,.kb-hero .tag{font-size:12px}
}
/* ── Поиск, премиальный вид (25.08.2026) ───────────────────────────
Было: плоская строка в 60 пикселей на белом фоне, владелец её
не замечал на странице. Стало: своя панель с мягким градиентом,
крупное поле, живые плашки частых запросов. Плашка подставляет
слово в поле и подсвечивается, повторный клик снимает фильтр. */
.kb-poisk{margin:46px 0 6px}
.kb-poisk-in{position:relative;overflow:hidden;padding:30px 32px 24px;border-radius:26px;
border:1px solid #e4e9f7;background:linear-gradient(158deg,#f8faff 0%,#eef2fc 100%);
box-shadow:0 18px 44px rgba(24,32,72,.07)}
.kb-poisk-in:before{content:"";position:absolute;top:-130px;right:-60px;width:430px;height:430px;
border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.16),rgba(47,107,255,0) 68%);
pointer-events:none}
.kb-poisk-t{position:relative;margin:0 0 15px;font-family:var(--display),inherit;font-weight:800;
font-size:clamp(19px,2vw,23px);line-height:1.15;letter-spacing:-.02em;color:#141a33}
.kb-pole{position:relative;display:flex;align-items:center;gap:14px;height:66px;max-width:880px;
padding:0 12px 0 12px;border-radius:18px;border:1.5px solid #dfe4f2;background:#fff;
box-shadow:0 10px 30px rgba(24,32,72,.07);transition:border-color .18s,box-shadow .18s}
.kb-pole:focus-within{border-color:#2f6bff;
box-shadow:0 0 0 4px rgba(47,107,255,.13),0 16px 36px rgba(47,107,255,.15)}
.kb-ico{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:13px;background:#eef2fd;color:#2f6bff;transition:.18s}
.kb-pole:focus-within .kb-ico{background:#2f6bff;color:#fff}
.kb-pole input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;
font-size:18px;font-weight:500;color:#141a33;-webkit-appearance:none}
.kb-pole input::placeholder{color:#6b7280;font-weight:400}
.kb-pole input::-webkit-search-cancel-button{display:none}
.kb-tags{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;max-width:900px}
/* На широком экране поле во всю ширину оставляло справа полметра пустой панели,
и блок читался как незаконченный. Ставим две колонки: слева поле, справа
плашки в два ряда по правому краю. Панель заполнена и стала ниже. */
@media(min-width:1180px){
.kb-poisk-in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:44px;align-items:center;padding:30px 32px}
.kb-poisk-t{grid-column:1;grid-row:1}
.kb-pole{grid-column:1;grid-row:2;max-width:none}
.kb-itog{grid-column:1;grid-row:3}
.kb-tags{grid-column:2;grid-row:1/span 3;max-width:440px;margin:0;justify-content:flex-end}
}
.kb-tags>span{font-size:13px;font-weight:700;color:#636a88;letter-spacing:.02em;margin-right:2px}
.kb-tags button{border:1px solid #dde3f2;background:#fff;color:#414b6c;font:inherit;font-size:14px;
font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;
transition:border-color .16s,color .16s,background .16s}
.kb-tags button:hover{border-color:#b9c8ef;color:#2f6bff;background:#f6f9ff}
.kb-tags button.on{background:#2f6bff;border-color:#2f6bff;color:#fff;
box-shadow:0 6px 16px rgba(47,107,255,.28)}
.kb-itog{position:relative;min-height:22px;margin:14px 2px 0;max-width:880px;font-size:14px;
color:#5b6280;font-weight:600}
.kb-itog:empty{min-height:0;margin:0}
.kb-itog.pusto{color:#ad4520}
#vse[hidden]{display:none}
@media(max-width:700px){
.kb-poisk{margin:30px 0 2px}
.kb-poisk-in{padding:20px 18px 18px;border-radius:20px}
.kb-poisk-in:before{width:250px;height:250px;top:-110px;right:-60px}
.kb-poisk-t{margin:0 0 12px}
.kb-pole{height:58px;gap:10px;padding:0 9px 0 9px;border-radius:15px}
.kb-ico{width:36px;height:36px;border-radius:11px}
.kb-pole input{font-size:16px}
.kb-tags{gap:7px;margin:13px 0 0}
/* Палец промахивается по плашке в 36 пикселей, поэтому под ней невидимая
зона нажатия до 46. Сами плашки при этом остаются лёгкими. */
.kb-tags button{position:relative;font-size:13px;padding:9px 12px}
.kb-tags button:after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.kb-clr{width:32px;height:32px;font-size:20px}
}
/* На телефоне семь плашек в перенос давали последний ряд из одной «деньги»,
а поджать поля не помогало: ширины разные, перенос всё равно оставлял сироту.
Кладём их в одну строку с прокруткой пальцем. Строка доходит до самого края
панели и мягко гаснет справа, поэтому видно, что дальше есть ещё. */
@media(max-width:700px){
.kb-tags{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
margin:13px -18px 0;padding:3px 18px;max-width:none;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.kb-tags::-webkit-scrollbar{display:none}
.kb-tags>span,.kb-tags button{flex:none}
}
@media(max-width:380px){
.kb-poisk-in{padding:18px 14px 16px}
.kb-tags{margin:13px -14px 0;padding:3px 14px}
}
/* ─── ПОСАДКА ОБЛОЖКИ СТАТЬИ (27.08.2026, перемерено браузером) ────────────
Общее правило живёт в styles.css: object-position:50% 20%.
Здесь две вещи, которых там быть не может.
1. На телефоне обрезается НЕ ВЫСОТА, А ШИРИНА. Картинка 1920x1080 в блоке
330 высотой при экране уже 587 накрывает блок по высоте целиком, а по
ширине не влезает. Замер браузером: при 390 видны столбцы 381..1539,
при 360 видны 430..1490. Герой по макету стоит справа, около 1150..1750,
значит на узком экране ему режет правый бок. Сдвигаем показ вправо.
По вертикали на этих ширинах обрезки нет вовсе, поэтому второе число
ниже 587 ни на что не влияет и стоит для ширин 587..640.
2. Личные посадки отдельных статей раньше стояли строкой style прямо в
index.html. Инлайн нельзя переопределить медиазапросом, поэтому на
телефоне такие статьи оставались с посадкой 50% и теряли героя.
Теперь это классы, и у каждого есть свой мобильный вариант. */
.arthero img.bg.p-y8 {object-position:50% 8%}
.arthero img.bg.p-y10 {object-position:50% 10%}
.arthero img.bg.p-y15 {object-position:50% 15%}
.arthero img.bg.p-x80y8 {object-position:80% 8%}
.arthero img.bg.p-x85 {object-position:85% 20%}
/* Ниже посадки для кадров, где смысл лежит ВНИЗУ: ноги и опора в статьях про
ходьбу и цигун, узор 80 на 20 у Парето, нижний ряд стикеров у матрицы.
Общие 20% подняли верх и тем самым срезали им низ, поэтому им нужен обратный
ход. Значения померены глазами на живых страницах 27.08.2026. */
.arthero img.bg.p-y40 {object-position:50% 40%}
.arthero img.bg.p-y32 {object-position:50% 32%}
.arthero img.bg.p-y45 {object-position:50% 45%}
/* Сдвиг вправо нужен НЕ ТОЛЬКО на телефоне. Замер браузером показал, что
обрезка идёт по ширине везде до 1024 включительно: при 641 видны столбцы
387..1533, при 768 столбцы 260..1660. То есть весь планшет выглядел так же,
как телефон до правки. Диапазон 641..1024 получает то же лечение.
По вертикали на этих ширинах обрезки нет вовсе, второе число там не работает. */
@media(max-width:1024px){
.arthero img.bg {object-position:70% 20%}
.arthero img.bg.p-y8,.arthero img.bg.p-x80y8 {object-position:70% 8%}
.arthero img.bg.p-y10 {object-position:70% 10%}
.arthero img.bg.p-y15 {object-position:70% 15%}
.arthero img.bg.p-y40 {object-position:70% 40%}
.arthero img.bg.p-y32 {object-position:70% 32%}
.arthero img.bg.p-y45 {object-position:70% 45%}
.arthero img.bg.p-x85 {object-position:80% 20%}
/* p-x20: увести кадр ВЛЕВО на узких экранах. Заведено 01.09.2026.
У vyuchennaya-bespomoshchnost заголовок в пять строк, и на 430 плашка рубрики
легла ровно по линии глаз (плашка 27.9-37.2% высоты, глаза 27.5-30.0%).
Подъёмом героя не лечится: макушка уже на 2%, воздуха над головой нет.
Общий сдвиг вправо 70% эту пару только сближает, поэтому нужен обратный ход:
герой уходит влево, под плашку попадает поднятая ладонь, а не лицо.
Замерено верстальщиком в браузере: 430 и 390 чисто, 360/640/768/1024 не сломались. */
.arthero img.bg.p-x20 {object-position:20% 20%}
}
/* ДЛИННЫЙ ТЕРМИН В ЗАГОЛОВКЕ. Заведено 01.09.2026.
Глобальное .arthero h1{max-width:22ch} в styles.css ломает «ВЫУЧЕННАЯ
БЕСПОМОЩНОСТЬ» на пять строк, из которых две это одинокие слова: сам термин
24 знака и в 22ch не влезает. Глобально ширину не трогаем, там на ней сидят
210 статей. Точечный класс на заголовки с длинным термином: 25ch даёт три
строки без сирот (замерено верстальщиком в браузере). Вешать классом h1,
а не переписывать согласованный заголовок. */
.arthero h1.dlinnyy{max-width:25ch}
/* То же плюс pretty: у части заголовков одного 25ch мало, последняя строка
остаётся одиноким словом. Проверено верстальщиком в браузере на 390 и 1440.
⚠️ pretty подходит НЕ всем: у vyuchennaya-bespomoshchnost он роняет предлог
«через» в конец строки, там нужен чистый .dlinnyy. Вешать по замеру, не наугад. */
.arthero h1.dlinnyy-pretty{max-width:25ch;text-wrap:pretty}
/* читайте также: перелинковка базы, 01.09.2026 */
.kb-more{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.kb-more>b{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.kb-more-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kb-more-g a{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);text-decoration:none;font-weight:650;font-size:16px;line-height:1.42;transition:border-color .18s,background .18s,transform .18s}
.kb-more-g a::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--blue);opacity:.5;transition:opacity .18s}
.kb-more-g a span{display:block;min-width:0;text-wrap:balance}
.kb-more-g a:hover{border-color:#c3d2fb;background:var(--soft);transform:translateY(-1px)}
.kb-more-g a:hover::before{opacity:1}
@media(max-width:720px){
.kb-more{margin-top:36px;padding-top:22px}
.kb-more-g{grid-template-columns:1fr;gap:10px}
.kb-more-g a{padding:14px 16px;font-size:15.5px}
}