/* ==========================================================================
   KOZYR — стили блога (kozyr-blog.css)
   Продолжение фирменной айдентики главной: светлая редакционная тема,
   Space Grotesk / Inter / Instrument Serif, синий акцент #2668FF,
   золото #9C6A18 только для смысловых акцентов (цифры/рейкбек).
   Токены совпадают с главной, чтобы блог читался как та же площадка.
   ========================================================================== */

:root {
  --bg: #FAFAFC;
  --surface: #FFFFFF;
  --surface-alt: #F5F7FB;
  --ink: #0A1128;
  --fg: #0A1128;              /* alias для шаблона */
  --ink-2: #5C6580;
  --fg-mute: #5C6580;        /* alias для шаблона */
  --ink-3: #667085;
  --accent: #2668FF;
  --accent-deep: #1E52D9;
  --accent-tint: #EBF1FF;
  --gold: #7E5512;           /* смысловой акцент (AA), НЕ декор */
  --border: #E5E7EE;
  --line: #E5E7EE;           /* alias для шаблона */
  --border-2: #D0D5E0;
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Золотые оттенки — раньше жили как fallback в var(); выносим в токены,
     чтобы премиум-блоки статьи (выводы, формулы, буллеты) были едины. */
  --gold-lt: #C88A2E;         /* золото для декора на светлом (ярче смыслового) */
  --gold-br: #E7BC56;         /* яркое золото для акцентов на тёмном (CTA) */
  --gold-deep: #7E5512;       /* золото-текст (AA) */
  --gold-tint: #F6EEDC;       /* золотая подложка */
  --surface-dark: #070C18;    /* тёмная поверхность (hero/формула) */
  --r-card: 14px;
  --r-lg: 16px;
  --r-xl: 24px;
  --maxw: 760px;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16.5px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ========== MOBILE OVERFLOW GUARDS (fix: hero img распирал страницу) ========== */
/* Ни одно изображение/медиа не может быть шире своего контейнера */
img, video, iframe, svg, table { max-width: 100%; }
img, video { height: auto; }
/* Страховка от любого горизонтального переполнения на всех страницах */
html, body { overflow-x: clip; }
/* ============================================================================ */

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

/* декоративный фон убираем — у KOZYR светлая тема */
.suit-pattern { display: none; }

/* Skip-link (доступность) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,252,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; display: inline-block; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-text { font-family: var(--f-display); font-size: 20px; letter-spacing: -.01em; }

.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-2); font-weight: 500; font-size: 14.5px; }
.nav a:hover { color: var(--ink); text-decoration: none; }

.header-cta {
  background: var(--accent); color: #fff !important;
  padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px;
}
.header-cta:hover { background: var(--accent-deep); text-decoration: none; }

/* мобильное меню */
.nav-toggle, .nav-burger, .nav-backdrop { display: none; }
@media (max-width: 860px) {
  /* Шапка с открытым меню должна перекрывать хлебные крошки и hero статьи */
  .header { z-index: 100; }
  .nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0;
    background: #ffffff; border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px; margin: 0;
    transform: translateY(-120%); transition: transform .25s ease;
    z-index: 90;
    box-shadow: 0 12px 28px rgba(10,17,40,.12);
  }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-burger {
    display: inline-flex; flex-direction: column; gap: 5px;
    margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 8px;
  }
  .nav-burger-line { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
  .header-cta { display: none; }
  .nav-toggle:checked ~ .nav { transform: translateY(0); }
  .nav-toggle:checked ~ .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(10,17,40,.3); z-index: 85;
  }
}

/* ---------- Хлебные крошки ---------- */
.breadcrumbs { border-bottom: 1px solid var(--border); background: var(--surface); }
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0; font-size: 13px; color: var(--ink-3);
}
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--ink-3); }
.breadcrumbs a { color: var(--ink-2); }

/* ---------- Статья ---------- */
.blog-post section { padding: 40px 0; }
.eyebrow {
  font-family: var(--f-display); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.blog-post h1 {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(28px, 4.5vw, 44px); line-height: 1.12; color: var(--ink);
  margin-bottom: 20px;
}
.lede {
  font-family: var(--f-serif); font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.5; color: var(--ink-2); margin: 8px 0 20px;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 13.5px; color: var(--ink-3); padding-bottom: 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}

/* герой-картинка */
.blog-post figure, .hero-image { margin: 24px 0 8px; }
.blog-post figure img, .hero-image img {
  width: 100%; height: auto; border-radius: var(--radius); display: block;
}
.blog-post figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

/* ---------- Тело статьи ---------- */
.post-body { color: var(--ink); }
.post-body h2 {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.2; color: var(--ink);
  margin: 40px 0 14px;
}
.post-body h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: 20px; color: var(--ink); margin: 28px 0 10px;
}
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a { border-bottom: 1px solid transparent; }
.post-body a:hover { border-bottom-color: var(--accent); text-decoration: none; }

/* таблицы */
.post-body table {
  width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.post-body th, .post-body td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border);
}
.post-body thead th {
  background: var(--surface-alt); font-family: var(--f-display);
  font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.post-body tbody tr:last-child td { border-bottom: none; }
.post-body tbody tr:hover { background: var(--accent-tint); }
.post-body blockquote {
  border-left: 3px solid var(--accent); background: var(--surface-alt);
  padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0; color: var(--ink-2);
}
/* горизонтальный скролл таблиц на узких экранах */
@media (max-width: 640px) {
  .post-body table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Key takeaways ---------- */
.key-takeaways {
  background: rgba(156,106,24,.06); border-left: 3px solid var(--gold);
  padding: 20px 24px; margin: 28px 0 36px; border-radius: 4px;
}
.key-takeaways .takeaways-label {
  font-family: var(--f-display); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 600;
}
.key-takeaways ul { margin: 0; padding-left: 20px; }
.key-takeaways li { margin-bottom: 8px; font-size: 15.5px; }

/* ---------- Оглавление ---------- */
.toc {
  background: var(--surface-alt); border: 1px solid var(--border);
  padding: 18px 24px; margin: 28px 0; border-radius: var(--radius);
}
.toc-label {
  font-family: var(--f-display); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; font-weight: 600;
}
.toc ol { margin: 0; padding-left: 22px; }
.toc li { margin-bottom: 6px; font-size: 14.5px; }
.toc a { color: var(--ink-2); }

/* ---------- Author box ---------- */
.author-box { color: var(--ink-2); }
.author-box p:first-child { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq-section { margin: 56px 0 8px; }
.faq-section h2 {
  font-family: var(--f-display); font-size: clamp(24px,3.2vw,30px);
  margin-bottom: 22px; letter-spacing: -.02em;
}
/* премиум-аккордеон: работает и с .faq-item, и с обычными <details> */
.faq-section details {
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px); margin-bottom: 12px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-section details:hover { border-color: var(--border-2, #C9D0E0); }
.faq-section details[open] {
  border-color: rgba(46,107,255,.28);
  box-shadow: 0 12px 30px rgba(10,17,40,.07);
}
.faq-section summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-family: var(--f-display); font-weight: 600;
  font-size: 17px; color: var(--ink); line-height: 1.4;
  transition: color .15s;
}
.faq-section summary:hover { color: var(--accent, #2E6BFF); }
.faq-section summary::-webkit-details-marker { display: none; }
/* иконка + в круге, поворачивается при открытии */
.faq-section summary::after {
  content: ""; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-tint, #E7EEFF);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%232E6BFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform .25s ease, background .2s;
}
.faq-section details[open] summary::after {
  transform: rotate(135deg); background-color: var(--accent, #2E6BFF);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq-section details > p,
.faq-section details > div {
  margin: 0; padding: 0 24px 22px; color: var(--ink-2); line-height: 1.65; font-size: 15.5px;
}
.faq-section details[open] > p { animation: faqReveal .3s ease; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Финальный CTA ---------- */
.final-cta {
  background: var(--ink); color: #fff; border-radius: 18px;
  padding: 40px 36px; text-align: center; margin-top: 12px;
}
.final-cta h2 {
  font-family: var(--f-display); font-size: clamp(24px,3.5vw,32px);
  margin-bottom: 12px; color: #fff;
}
.final-cta h2 em { color: #F0B44A; font-style: normal; }  /* золото на светлом фоне */
.final-cta p { color: rgba(255,255,255,.75); margin-bottom: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  padding: 12px 24px; border-radius: 999px; font-size: 15.5px;
}
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-deep); text-decoration: none; }

/* ---------- Похожие статьи ---------- */
.section-head { text-align: center; margin-bottom: 28px; }
.section-head h2 { font-family: var(--f-display); font-size: clamp(22px,3vw,30px); color: var(--ink); }
.section-head h2 em { color: var(--accent); font-style: normal; }
.grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1240px; margin: 0 auto;
}
/* Styling of .grid-3 children (surface, border, radius, hover, padding) is
   deliberately left to whatever component sits inside — .post-card already
   provides its own edge-to-edge cover + padded body. Adding another wrapper
   background + 20px of padding here fights with .post-card { overflow: hidden }
   and pushes the hero image inward. */
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Подвал ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); margin-top: 40px; padding: 48px 0 32px; }
.footer .logo, .footer .logo-text { color: #fff; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer h3 { font-family: var(--f-display); color: #fff; font-size: 14px; margin-bottom: 12px; }
.footer p { margin-bottom: 8px; font-size: 14px; }
.footer a { color: rgba(255,255,255,.7); }
.footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 20px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } }

/* фокус для клавиатуры */
a:focus-visible, summary:focus-visible, .nav-burger:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* ==========================================================================
   KOZYR — переоформление блога (2026-08)
   Блок 1: карточки блог-индекса (обложки, сетка, featured, hover).
   Блок 2: внутристатейные визуалы (обложка-герой, инфографика, схемы).
   Всё построено на уже существующих токенах (--accent, --gold, --ink…),
   чтобы блог читался как единая площадка с главной. Обложки — SVG,
   без внешних картинок: работают и для автогенерируемых статей.
   ========================================================================== */

/* ---------- Блог-индекс: интро ---------- */
/* ---------- Блог: премиум-hero (центрированный, масть-фон, синие акценты) ---------- */
.blog-index-intro {
  position: relative; overflow: hidden;
  padding: 68px 0 56px; margin-bottom: 8px; text-align: center;
  background:
    radial-gradient(120% 140% at 50% -20%, var(--accent-tint, #E7EEFF) 0%, transparent 60%),
    linear-gradient(180deg, #F6F8FE 0%, #FBFCFE 100%);
  border-bottom: 1px solid var(--border, #E3E7F1);
}
/* фоновая текстура мастей (синие, деликатные) */
.blog-index-intro::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%232E6BFF' fill-opacity='0.035'%3E%3Cpath d='M50 24c-8 9-19 16-19 27a9 9 0 0 0 17 5l-3 11h9l-3-11a9 9 0 0 0 17-5c0-11-11-18-19-27z'/%3E%3Cpath d='M150 54l14 18-14 18-14-18z'/%3E%3Cg%3E%3Ccircle cx='36' cy='150' r='8'/%3E%3Ccircle cx='47' cy='143' r='8'/%3E%3Ccircle cx='47' cy='157' r='8'/%3E%3Crect x='40' y='150' width='3' height='14'/%3E%3C/g%3E%3Cpath d='M150 140c9 0 16 6 16 13 0 9-11 14-16 22-5-8-16-13-16-22 0-7 7-13 16-13z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.blog-index-intro .container { position: relative; z-index: 1; }
/* декоративные игральные карты по бокам (покерный визуал, синие) */
.blog-index-intro .container::before,
.blog-index-intro .container::after {
  content: ""; position: absolute; top: 50%; width: 120px; height: 168px;
  background-size: contain; background-repeat: no-repeat; opacity: .9;
  pointer-events: none; z-index: 0;
}
.blog-index-intro .container::before {
  left: 2%; transform: translateY(-54%) rotate(-14deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='168' viewBox='0 0 120 168'%3E%3Crect x='2' y='2' width='116' height='164' rx='12' fill='white' stroke='%23E3E7F1' stroke-width='2'/%3E%3Ctext x='14' y='30' font-family='Georgia,serif' font-size='22' font-weight='bold' fill='%232E6BFF'%3EA%3C/text%3E%3Cpath d='M22 34c-4 4-9 8-9 13a4.5 4.5 0 0 0 9 2.5l-1.5 5.5h5l-1.5-5.5a4.5 4.5 0 0 0 9-2.5c0-5-5-9-9-13z' fill='%232E6BFF'/%3E%3Cpath d='M60 84c-11 11-26 22-26 37a13 13 0 0 0 25 7l-4 16h14l-4-16a13 13 0 0 0 25-7c0-15-15-26-26-37z' fill='%232E6BFF' opacity='.14'/%3E%3Ctext x='106' y='150' font-family='Georgia,serif' font-size='22' font-weight='bold' fill='%232E6BFF' transform='rotate(180 106 143)'%3EA%3C/text%3E%3C/svg%3E");
}
.blog-index-intro .container::after {
  right: 2%; transform: translateY(-46%) rotate(12deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='168' viewBox='0 0 120 168'%3E%3Crect x='2' y='2' width='116' height='164' rx='12' fill='white' stroke='%23E3E7F1' stroke-width='2'/%3E%3Ctext x='13' y='30' font-family='Georgia,serif' font-size='22' font-weight='bold' fill='%230A1128'%3EK%3C/text%3E%3Cpath d='M23 52l6 8-6 8-6-8z' fill='%230A1128'/%3E%3Crect x='40' y='60' width='40' height='48' rx='4' fill='%230A1128' opacity='.1'/%3E%3Cpath d='M60 66c-6 6-14 12-14 20a7 7 0 0 0 13 4l-2 9h7l-2-9a7 7 0 0 0 13-4c0-8-8-14-14-20z' fill='%232E6BFF' opacity='.5'/%3E%3Ctext x='107' y='150' font-family='Georgia,serif' font-size='22' font-weight='bold' fill='%230A1128' transform='rotate(180 107 143)'%3EK%3C/text%3E%3C/svg%3E");
}
@media (max-width: 960px) {
  .blog-index-intro .container::before,
  .blog-index-intro .container::after { display: none; }
}
.blog-index-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #2E6BFF);
}
.blog-index-intro .eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #2E6BFF); animation: kfpulse 2s ease-in-out infinite;
}
.blog-index-intro h1 {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; color: var(--ink);
  max-width: 20ch; margin: 0 auto 20px;
}
.blog-index-intro h1 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--accent, #2E6BFF);
}
.blog-index-intro .lede {
  font-family: var(--f-serif); font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.55; color: var(--ink-2); max-width: 54ch; margin: 0 auto;
}
/* статистика-акценты (числа) */
.blog-stats {
  display: inline-flex; align-items: stretch; gap: 0; margin-top: 34px;
  background: #fff; border: 1px solid var(--border, #E3E7F1);
  border-radius: 999px; padding: 6px; box-shadow: 0 12px 30px rgba(10,17,40,.06);
}
.blog-stats__item { padding: 10px 26px; display: flex; flex-direction: column; align-items: center; }
.blog-stats__item + .blog-stats__item { border-left: 1px solid var(--border, #E3E7F1); }
.blog-stats__num {
  font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--accent, #2E6BFF); letter-spacing: -.02em;
}
.blog-stats__lbl {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 6px;
}
@media (max-width: 560px) {
  .blog-index-intro { padding: 44px 0 40px; }
  /* На мобильном — 3 равные колонки в ряд (стабильно на любой ширине),
     разделители сохраняем, числа и подписи центрируем. Без wrap, чтобы
     цифры не «плыли» и не переносились. */
  .blog-stats {
    display: flex; flex-wrap: nowrap; gap: 0;
    border-radius: 16px; padding: 14px 8px;
    width: 100%; box-sizing: border-box;
  }
  .blog-stats__item {
    flex: 1 1 0; min-width: 0;
    padding: 4px 6px; align-items: center; text-align: center;
  }
  .blog-stats__item + .blog-stats__item {
    border-left: 1px solid var(--border, #E3E7F1);
  }
  .blog-stats__num { font-size: 26px; }
  .blog-stats__lbl {
    text-align: center; margin-top: 5px;
    font-size: 9.5px; letter-spacing: .06em;
    white-space: nowrap;
  }
}

/* ---------- Сетка карточек ---------- */
.post-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px; padding: 36px 0 64px;
}
@media (max-width: 780px) { .post-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Карточка */
.post-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  min-height: 100%;
}
.post-card:hover {
  transform: translateY(-3px); text-decoration: none;
  box-shadow: 0 14px 34px rgba(10,17,40,.10); border-color: var(--border-2);
}
.post-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Обложка (SVG внутри) */
.post-card__cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
/* лёгкое затемнение снизу, чтобы теги/подписи читались на любом фото */
.post-card__cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(10,17,40,.22) 100%);
}
.post-card__cover img { position: relative; z-index: 0; }
.post-card__cover svg { display: block; width: 100%; height: 100%; }
.post-card__tag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.92);
  padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px);
}

/* Тело карточки */
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.post-card__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--f-display); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-3); margin-bottom: 12px;
}
.post-card__meta time { color: var(--ink-3); }
.post-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: .6; }
.post-card__title {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em;
  font-size: 21px; line-height: 1.25; color: var(--ink); margin: 0 0 10px;
}
.post-card:hover .post-card__title { color: var(--accent-deep); }
.post-card__excerpt { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.post-card__more {
  margin-top: auto; font-family: var(--f-display); font-size: 13.5px; font-weight: 600;
  color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
}
.post-card__more svg { width: 15px; height: 15px; transition: transform .2s ease; }
.post-card:hover .post-card__more svg { transform: translateX(3px); }

/* ---------- Featured (крупная карточка сверху) ---------- */
.post-card--featured { grid-column: 1 / -1; flex-direction: row; }
.post-card--featured .post-card__cover {
  aspect-ratio: auto; flex: 0 0 46%; border-bottom: none; border-right: 1px solid var(--border);
}
.post-card--featured .post-card__body { justify-content: center; padding: 40px 40px 42px; }
.post-card--featured .post-card__title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.post-card--featured .post-card__excerpt { font-size: 16.5px; max-width: 52ch; }
@media (max-width: 780px) {
  .post-card--featured { flex-direction: column; }
  .post-card--featured .post-card__cover { flex: none; aspect-ratio: 16 / 9; border-right: none; border-bottom: 1px solid var(--border); }
  .post-card--featured .post-card__body { padding: 22px 22px 24px; }
}

/* ==========================================================================
   Внутристатейные визуалы
   ========================================================================== */

/* Обложка-герой, если у статьи нет фото-hero: рисованный SVG-баннер */
.article-cover {
  margin: 26px 0 8px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-alt);
}
.article-cover svg { display: block; width: 100%; height: auto; }

/* Инфографика: сетка «стат-карточек» (числа рейкбека, модели) */
.kz-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 30px 0; padding: 0;
}
@media (max-width: 620px) { .kz-stats { grid-template-columns: 1fr; } }
.kz-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 18px;
}
.kz-stat__num {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em;
  font-size: 34px; line-height: 1; color: var(--gold); margin-bottom: 8px;
}
.kz-stat__label { font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* Врезка-вывод (акцентный блок внутри текста) */
.kz-callout {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--accent-tint); border: 1px solid rgba(38,104,255,.18);
  border-radius: var(--radius); padding: 20px 22px; margin: 30px 0;
}
.kz-callout__icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: #fff; display: grid; place-items: center;
}
.kz-callout__icon svg { width: 19px; height: 19px; }
.kz-callout__text { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.kz-callout__text strong { color: var(--ink); }

/* Схема потока → ВЕРТИКАЛЬНЫЙ ТАЙМЛАЙН (2026-09).
   Раньше была горизонтальная flex-раскладка со стрелками, которая ломалась
   при 5+ шагах (перенос + «висящая» стрелка в никуда, особенно на мобиле).
   Таймлайн: нумерованные узлы, соединённые линией, описание справа — не
   ломается ни на какой ширине. Стрелки скрыты (последовательность задаёт
   сама линия + номера). Разметку не меняем — работает и для существующих
   статей, и для будущих. */
.kz-flow {
  margin: 30px 0; padding: 28px 26px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px); box-shadow: 0 10px 30px rgba(10,17,40,.06);
}
.kz-flow__row { display: block; position: relative; }
.kz-flow__arrow { display: none; }           /* стрелки-разделители не нужны */
.kz-flow__step {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  max-width: none; min-width: 0; padding: 0 0 26px; position: relative; text-align: left;
}
.kz-flow__step:last-child { padding-bottom: 0; }
/* соединительная линия между узлами (от центра номера до следующего) */
.kz-flow__step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: -2px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-tint));
}
.kz-flow__num {
  width: 44px; height: 44px; margin: 0; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-family: var(--f-display);
  font-weight: 700; font-size: 18px; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(38,104,255,.28); position: relative; z-index: 1;
}
/* когда у шага есть заголовок — номер выравниваем к нему; иначе к описанию */
.kz-flow__title { font-family: var(--f-display); font-weight: 600; font-size: 16px;
  line-height: 1.3; color: var(--ink); margin: 9px 0 4px; }
.kz-flow__desc { font-size: 15px; color: var(--ink-2); line-height: 1.55; padding-top: 11px; }
.kz-flow__title + .kz-flow__desc { padding-top: 0; }
@media (max-width: 600px) {
  .kz-flow { padding: 22px 18px; }
  .kz-flow__step { gap: 14px; grid-template-columns: 40px 1fr; }
  .kz-flow__step:not(:last-child)::before { left: 19px; top: 44px; }
  .kz-flow__num { width: 40px; height: 40px; font-size: 16px; }
  .kz-flow__desc { font-size: 14.5px; }
}

/* Формула (модель рейкбека) */
.kz-formula {
  margin: 26px 0; padding: 22px 24px; text-align: center;
  background: var(--ink); color: #fff; border-radius: var(--radius);
}
.kz-formula__expr {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 2.4vw, 22px);
  letter-spacing: -.01em; line-height: 1.5;
}
.kz-formula__expr .op { color: var(--ink-3); margin: 0 6px; }
.kz-formula__expr .out { color: #F0B44A; }
.kz-formula__note { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 10px; }

/* Подпись под любым визуалом */
.kz-figcaption { font-size: 13px; color: var(--ink-3); margin: 8px 2px 0; text-align: center; }

/* Сравнительная таблица «против» — базовое выравнивание.
   Цветную заливку колонок (col-a/col-b) убрали — в T3 колонки чистые,
   подсвечивается только «лучшее значение» (.best-cell). См. T3-блок ниже. */
.kz-vs thead th { text-align: center; }
.kz-vs thead th:first-child { text-align: left; }
.kz-vs td:not(:first-child) { text-align: center; }
.kz-vs .yes { color: #1E7A3D; font-weight: 600; }
.kz-vs .no { color: #B23B3B; font-weight: 600; }
/* ==========================================================================
   KOZYR — премиум-слой статьи блога (порт из образца, 2026-08)
   Добавляет: тёмный hero, прогресс чтения, scrollspy-оглавление,
   инфографику (формула/статы/таблица/врезка), партнёр-карточки,
   блок автора с фото, фоновую текстуру мастей, анимации появления.
   Использует существующие токены (--accent, --gold, --ink, --surface…).
   Ничего из старого не ломает — только добавляет новые классы.
   ========================================================================== */

/* ---------- reading progress ---------- */
.kf-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--gold-lt,#D9A93B));transition:width .1s linear}

/* ---------- фоновая текстура мастей ---------- */
.suit-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%230A1128' fill-opacity='0.022'%3E%3Cpath d='M55 30c-8 9-20 17-20 28a10 10 0 0 0 18 6l-3 12h10l-3-12a10 10 0 0 0 18-6c0-11-12-19-20-28z'/%3E%3Cpath d='M165 60c11 0 20 7 20 16 0 11-14 18-20 27-6-9-20-16-20-27 0-9 9-16 20-16z'/%3E%3Cpath d='M110 130l16 20-16 20-16-20z'/%3E%3Cg%3E%3Ccircle cx='40' cy='168' r='9'/%3E%3Ccircle cx='52' cy='160' r='9'/%3E%3Ccircle cx='52' cy='176' r='9'/%3E%3Crect x='44' y='168' width='4' height='16'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px}
body{position:relative}
.blog-post,.breadcrumbs,.footer{position:relative;z-index:1}
.header{position:relative;z-index:50}

/* ---------- HERO статьи (тёмный, премиум) ---------- */
.post-hero{position:relative;overflow:hidden;margin:14px 0 0;
  border-radius:var(--r-xl,24px);background:var(--surface-dark,#070C18);color:#fff;
  box-shadow:0 16px 40px rgba(10,17,40,.10)}
.post-hero__media{position:absolute;inset:0}
.post-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.post-hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,12,24,.55) 0%,rgba(7,12,24,.72) 55%,rgba(7,12,24,.92) 100%)}
.post-hero__suit{position:absolute;right:-2%;top:-8%;font-size:340px;line-height:1;
  font-family:var(--f-display);color:#fff;opacity:.06;transform:rotate(-8deg);pointer-events:none;z-index:1}
.post-hero__in{position:relative;z-index:2;padding:54px 56px 48px;max-width:960px}
.post-hero__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-lt,#D9A93B);margin-bottom:22px}
.post-hero__eyebrow .dotp{width:7px;height:7px;border-radius:50%;background:var(--gold-lt,#D9A93B);
  animation:kfpulse 2s ease-in-out infinite}
@keyframes kfpulse{0%,100%{opacity:1}50%{opacity:.3}}
.post-hero h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(32px,5vw,52px);line-height:1.06;margin:0 0 20px;color:#fff}
.post-hero h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--gold-lt,#D9A93B)}
.post-hero__lede{font-family:var(--f-serif);font-size:clamp(19px,2.4vw,24px);line-height:1.5;
  color:rgba(255,255,255,.82);margin:0 0 26px;max-width:60ch}
.post-hero__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;
  color:rgba(255,255,255,.6);font-family:var(--f-mono)}
.post-hero__meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
.post-hero__meta .tag{background:rgba(255,255,255,.12);color:#fff;padding:4px 11px;
  border-radius:999px;font-weight:600;letter-spacing:.04em}
@media(max-width:640px){.post-hero__in{padding:34px 24px 30px}}

/* ---------- layout: статья + оглавление ---------- */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start;margin-top:36px}
@media(max-width:960px){.article-shell{grid-template-columns:1fr;gap:0}}
.article-shell .post-body{max-width:820px;min-width:0}
@media(max-width:960px){.article-shell .post-body{max-width:100%}}
/* Grid-дети должны сжиматься ниже своего контента (иначе 1fr распирается длинным текстом) */
.article-shell > *{min-width:0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word}

/* оглавление sticky + scrollspy */
.toc-side{position:sticky;top:88px;font-size:14px}
@media(max-width:960px){.toc-side{display:none}}
.toc-side__label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.toc-side__list{list-style:none;margin:0;padding:0;border-left:2px solid var(--border)}
.toc-side__list a{display:block;padding:7px 0 7px 16px;margin-left:-2px;color:var(--ink-3);
  border-left:2px solid transparent;line-height:1.35;transition:color .15s,border-color .15s;text-decoration:none}
.toc-side__list a:hover{color:var(--ink)}
.toc-side__list a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* ---------- типографика тела (премиум-маркеры, буквица, цитата) ---------- */
.post-body .lede-lead::first-letter,.post-body > p:first-of-type::first-letter{
  font-family:var(--f-serif);font-size:3.4em;line-height:.8;float:left;
  margin:.05em .12em 0 0;color:var(--accent);font-weight:400}
.post-body ul{list-style:none;padding-left:0}
.post-body ul li{position:relative;padding-left:26px;margin-bottom:.6em}
.post-body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--gold-lt,#D9A93B);box-shadow:0 0 0 3px var(--gold-tint,#F5EEDD)}
.post-body ol{list-style:none;counter-reset:li;padding-left:0}
.post-body ol li{position:relative;padding-left:34px;margin-bottom:.6em;counter-increment:li}
.post-body ol li::before{content:counter(li);position:absolute;left:0;top:.05em;width:22px;height:22px;
  border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);font-family:var(--f-display);
  font-weight:700;font-size:12px;display:grid;place-items:center}
.post-body blockquote{margin:28px 0;padding:20px 26px;border-left:3px solid var(--gold);
  background:var(--gold-tint,#F5EEDD);border-radius:0 var(--r-lg,16px) var(--r-lg,16px) 0;
  font-family:var(--f-serif);font-size:20px;line-height:1.5;color:var(--ink);font-style:italic}

/* ---------- Ключевые выводы (премиум) ---------- */
.key-takeaways{position:relative;margin:36px 0;padding:28px 32px 26px;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--r-lg,16px);
  box-shadow:0 16px 40px rgba(10,17,40,.10);box-sizing:border-box;max-width:100%;
  overflow-wrap:break-word;word-wrap:break-word}
.key-takeaways .takeaways-label{font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#7E5512);margin:0 0 16px}
.key-takeaways ul{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.key-takeaways li{position:relative;padding-left:24px;font-size:16px;line-height:1.55;color:var(--ink)}
@media (max-width: 600px) {
  .key-takeaways { padding: 20px 18px; margin: 28px 0; }
  .key-takeaways li { font-size: 15px; padding-left: 22px; }
}
.key-takeaways li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--gold-lt,#D9A93B);box-shadow:0 0 0 4px var(--gold-tint,#F5EEDD)}

/* ---------- инфографика: формула ---------- */
.kf-formula{margin:28px 0;padding:26px;text-align:center;border-radius:var(--r-lg,16px);
  background:var(--surface-dark,#070C18);color:#fff;position:relative;overflow:hidden;box-shadow:0 16px 40px rgba(10,17,40,.10)}
.kf-formula::before{content:"\2660";position:absolute;right:14px;bottom:-30px;font-size:150px;color:#fff;opacity:.05;font-family:var(--f-display)}
.kf-formula__expr{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,3vw,26px);letter-spacing:-.01em;position:relative;z-index:1}
.kf-formula__expr .op{color:rgba(255,255,255,.45);margin:0 8px}
.kf-formula__expr .out{color:var(--gold-lt,#D9A93B)}
.kf-formula__note{font-size:13px;color:rgba(255,255,255,.55);margin-top:10px;font-family:var(--f-mono)}
/* инфографика: стат-карточки-фишки */
.kf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 32px}
@media(max-width:560px){.kf-stats{grid-template-columns:1fr}}
.kf-stat{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card,14px);
  padding:26px 20px 22px;text-align:center;transition:transform .22s,box-shadow .22s;overflow:hidden}
.kf-stat::before{content:"";position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:52px;height:52px;
  border-radius:50%;border:3px dashed var(--gold-lt,#D9A93B);opacity:.22}
.kf-stat:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(10,17,40,.10)}
.kf-stat__num{font-family:var(--f-display);font-weight:700;font-size:34px;line-height:1;color:var(--gold);letter-spacing:-.02em;margin-bottom:8px}
.kf-stat__lbl{font-size:14px;color:var(--ink-2);line-height:1.4}

/* инфографика: таблица */
.post-body .kf-tablewrap{margin:26px 0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg,16px);box-shadow:0 16px 40px rgba(10,17,40,.10)}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;margin:0}
.post-body table th,.post-body table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border)}
.post-body table thead th{font-family:var(--f-display);font-weight:600;background:var(--surface-alt);color:var(--ink);font-size:14px}
.post-body table tbody tr:last-child td{border-bottom:none}
.post-body table tbody tr{transition:background .15s}
.post-body table tbody tr:hover{background:var(--accent-tint)}
.post-body table td:first-child{font-weight:600;color:var(--ink)}

/* врезка-callout */
.kf-callout{display:flex;gap:16px;margin:28px 0;padding:20px 22px;border-radius:var(--r-lg,16px);
  background:var(--accent-tint);border:1px solid rgba(46,107,255,.18)}
.kf-callout__ic{flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}
.kf-callout p{margin:0;font-size:15.5px;line-height:1.6}

/* ---------- партнёр-блок (из partners.js) ---------- */
.partners-wrap{margin:30px 0}
.partners-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.partners-head__label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.partners-head__all{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.partners-note{font-size:12.5px;color:var(--ink-3);margin:12px 2px 0;font-style:italic}
.partners{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
@media(max-width:620px){.partners{grid-template-columns:1fr !important}}
.pcard,.pcard *{text-decoration:none !important}
/* Карточка партнёра — единый премиум-стиль (2026-09), в одном ключе со
   скроллером и C1: белая карточка, шапка с Kozyr Score, единый набор фактов,
   единая кнопка. Без синей обводки/линии сверху. */
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg,16px);padding:22px;box-shadow:0 4px 14px rgba(10,17,40,.05);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,17,40,.10);border-color:var(--border-2)}
/* шапка: лого + имя/тип + Kozyr Score, разделитель под ней */
.pcard__top{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;
  border-bottom:1px solid var(--border)}
.pcard__logo{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:19px;color:#fff;flex:0 0 48px;
  background:#fff;box-shadow:0 3px 10px rgba(10,17,40,.12),inset 0 0 0 1px var(--border)}
.pcard__logo--img{overflow:hidden}
.pcard__logo--img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__id{min-width:0;flex:1}
.pcard__name{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.1}
.pcard__badge{font-size:11px;font-family:var(--f-mono);color:var(--ink-3);margin-top:4px;letter-spacing:.02em}
/* Kozyr Score — как в скроллере: лейбл сверху, число золотом */
.pcard__score{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pcard__score i{font-family:var(--f-mono);font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.pcard__score b{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--gold,#7E5512);line-height:1}
.pcard__rows{display:grid;gap:10px;margin:0 0 18px}
.pcard__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.pcard__row:last-child{border-bottom:none;padding-bottom:0}
.pcard__k{color:var(--ink-3);min-width:0}
.pcard__v{color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
.pcard__v.hi{color:var(--gold,#7E5512);font-weight:700}
/* единая кнопка — синяя для всех (и румы, и клубы) */
.pcard__cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-display);font-weight:700;font-size:15px;padding:14px 18px;border-radius:12px;
  text-align:center;line-height:1.3;width:100%;box-sizing:border-box;
  background:linear-gradient(180deg,#4C89FF,#2668FF);color:#fff;
  box-shadow:0 10px 24px rgba(38,104,255,.32),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .15s,box-shadow .2s}
.pcard__cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(38,104,255,.42),inset 0 1px 0 rgba(255,255,255,.28)}

/* ---------- боковой виджет партнёра (sticky в статье) ---------- */
.toc-side__widget{margin-top:28px}
.side-widget__label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
/* компактнее основной карточки — колонка узкая (260px) */
/* компактная версия карточки для узкой боковой колонки (260px) */
.side-pcard .pcard__top{margin-bottom:14px;padding-bottom:14px;gap:10px}
.side-pcard .pcard__logo{width:40px;height:40px;flex:0 0 40px;font-size:16px;border-radius:11px}
.side-pcard .pcard__name{font-size:15px}
.side-pcard .pcard__badge{font-size:10px}
.side-pcard .pcard__score b{font-size:15px}
.side-pcard .pcard__score i{font-size:7.5px}
.side-pcard .pcard__rows{gap:9px;margin:0 0 14px}
.side-pcard .pcard__row{font-size:13px;padding-bottom:8px}
.side-pcard .pcard__cta{font-size:14px;padding:12px 14px}
/* боковой виджет не выделяем золотой ТОП-рамкой (он одиночный/контекстный) */
.toc-side__widget .pcard:first-child{border-color:var(--border);box-shadow:0 4px 14px rgba(10,17,40,.05)}
.toc-side__widget .pcard:first-child::before{display:none}

/* топ-карточка (первая = высший Kozyr Score) — деликатное золотистое
   выделение «лучший выбор», без синевы. Бейдж ТОП рисуется через ::before. */
.partners .pcard:first-child{border-color:rgba(199,138,46,.4);box-shadow:0 10px 32px rgba(199,138,46,.12)}
.partners .pcard:first-child:hover{box-shadow:0 18px 44px rgba(199,138,46,.18);border-color:rgba(199,138,46,.55)}
.partners .pcard:first-child::before{content:"ТОП";position:absolute;top:-9px;left:20px;z-index:2;
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.09em;color:#090D1A;
  background:var(--gold-br,#E7BC56);border-radius:6px;padding:3px 8px;box-shadow:0 4px 12px rgba(199,138,46,.35)}
/* сайдбар-версия компактная */
.side-pcard{padding:20px 18px}
/* на планшете/мобиле боковая колонка скрыта (toc-side уже display:none),
   поэтому виджет там не мешает; данные видны в основном partners-блоке */

/* ---------- мобильная липкая панель партнёра (внизу экрана) ---------- */
/* По умолчанию скрыта (десктоп использует боковой виджет). */
.partner-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--border,#E3E7F1);
  box-shadow:0 -6px 24px rgba(10,17,40,.10);
  transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
  display:none;
}
/* показываем только на мобильном/планшете (там где боковой виджет скрыт) */
@media(max-width:960px){ .partner-bar{display:block} }
.partner-bar.show{transform:translateY(0)}
.pbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-decoration:none;max-width:680px;margin:0 auto}
.pbar__info{display:flex;align-items:center;gap:10px;min-width:0}
.pbar__logo{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:14px;color:#fff}
.pbar__logo--img{background:none!important;overflow:hidden;border:1px solid var(--border)}
.pbar__logo--img img{width:100%;height:100%;object-fit:cover;display:block}
.pbar__txt{display:flex;flex-direction:column;min-width:0}
.pbar__name{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--ink);line-height:1.1}
.pbar__sub{font-size:12px;color:var(--gold-deep,#7E5512);font-weight:600;margin-top:1px}
.pbar__cta{flex:0 0 auto;background:var(--accent,#2668FF);color:#fff;
  font-family:var(--f-display);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:10px;white-space:nowrap}

/* ---------- блок автора (с фото) ---------- */
.author-premium{display:flex;gap:20px;align-items:flex-start;margin:48px 0 8px;padding:26px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg,16px);box-shadow:0 16px 40px rgba(10,17,40,.10)}
.author-premium__ava{flex:0 0 72px;width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--gold-lt,#D9A93B);background:var(--surface-alt)}
.author-premium__ava img{width:100%;height:100%;object-fit:cover;display:block}
.author-premium__name{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--ink)}
.author-premium__role{font-size:13px;color:var(--ink-3);font-family:var(--f-mono);margin:2px 0 10px}
.author-premium__bio{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0}
.author-premium__name a{color:inherit;text-decoration:none}
.author-premium__name a:hover{text-decoration:underline;text-underline-offset:2px}
.author-premium__link{display:inline-block;margin-top:12px;color:var(--accent);font-weight:600;font-size:13.5px;font-family:var(--f-mono);text-decoration:none}
.author-premium__link:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- масть-разделитель ---------- */
.suit-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:44px 0;color:var(--border-2)}
.suit-divider::before,.suit-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.suit-divider span{font-size:13px;letter-spacing:.4em;color:var(--gold);opacity:.7}

/* ---------- анимации появления ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- переключатель языка RU/UA в шапке статьи ---------- */
.lang{display:inline-flex;align-items:center;gap:0;padding:2px;background:rgba(128,128,128,0.08);
  border:1px solid var(--border);border-radius:999px;font-family:var(--f-mono);font-size:11px;
  font-weight:600;letter-spacing:0.06em}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:5px 10px;
  border-radius:999px;color:var(--ink-3);text-decoration:none;transition:color .15s,background .15s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="page"]{color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.08)}


/* Мобильные боковые отступы контента: 24px слишком много на узком экране */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
}

/* ==========================================================================
   KOZYR — полировка статьи (2026-09)
   Задача: премиальнее и информативнее внутренние блоки статьи, применяется
   ко ВСЕМ статьям сразу через общий файл (не трогая HTML каждой). Селекторы
   имеют повышенную специфичность (через .article-shell / .post-body), чтобы
   выигрывать у inline-<style> в шаблоне статьи, где остались упрощённые
   правила .key-takeaways/.toc. Ничего нового в разметку не требуется —
   существующие статьи получают новый вид после деплоя + сброса кэша.
   Дополнительно: классы для будущих блоков (TL;DR, глоссарий, плюсы/минусы),
   которые появятся у новых статей из pipeline.
   ========================================================================== */

/* ---------- «Главное» (key takeaways) — премиум-карточка ---------- */
/* Побеждаем inline .key-takeaways из шаблона за счёт .article-shell. */
.article-shell .key-takeaways {
  position: relative;
  margin: 0 0 40px;
  padding: 26px 30px 24px 30px;
  background:
    linear-gradient(180deg, var(--gold-tint) 0%, #FFFDF8 100%);
  border: 1px solid #EAD9B4;
  border-left: 4px solid var(--gold-lt);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 38px rgba(126, 85, 18, .10);
  box-sizing: border-box;
  overflow: hidden;
}
/* декоративная масть в углу — тихий брендовый штрих */
.article-shell .key-takeaways::after {
  content: "\2660"; position: absolute; right: 18px; top: -14px;
  font-family: var(--f-display); font-size: 96px; line-height: 1;
  color: var(--gold-lt); opacity: .07; pointer-events: none;
}
.article-shell .key-takeaways .takeaways-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 16px;
}
.article-shell .key-takeaways .takeaways-label::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237E5512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}
.article-shell .key-takeaways ul {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;
}
.article-shell .key-takeaways li {
  position: relative; padding-left: 28px; margin: 0;
  font-size: 16px; line-height: 1.55; color: var(--ink);
}
.article-shell .key-takeaways li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 16px; height: 16px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C88A2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
  .article-shell .key-takeaways { padding: 20px 18px; }
  .article-shell .key-takeaways li { font-size: 15px; padding-left: 26px; }
  .article-shell .key-takeaways::after { font-size: 72px; right: 10px; }
}

/* ---------- Сравнительные таблицы .kz-vs — T3 «сравнение с акцентом» (2026-09) ----------
   Отказ от пёстрой заливки колонок и тёмных шапок (выглядело перегружено).
   Чистая таблица: светлая шапка с логотипами площадок, тонкие разделители,
   значение «выгоднее игроку» помечено галочкой + мягкой зелёной подсветкой
   (.best / .best-cell — их проставляет пост-процессор из данных partners.json,
   только на объективных строках: рейкбек, скорость вывода). */
.post-body .kz-vs { background: var(--surface); }
.post-body .kz-vs thead th {
  background: var(--surface-alt); color: var(--ink); font-family: var(--f-display);
  font-weight: 600; letter-spacing: .005em; border-bottom: 1px solid var(--border);
  padding: 15px 16px; vertical-align: middle;
}
/* логотип площадки в шапке (чип-градиент из partners.json) */
.post-body .kz-vs .kzt-room { display: inline-flex; align-items: center; gap: 9px; justify-content: center; }
.post-body .kz-vs thead th:first-child .kzt-room { justify-content: flex-start; }
.post-body .kz-vs .kzt-logo {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  display: grid; place-items: center; font-family: var(--f-display);
  font-weight: 700; font-size: 12px; color: #fff;
  box-shadow: 0 3px 8px rgba(10,17,40,.14);
}
/* реальный лого-.webp в белой плитке */
.post-body .kz-vs .kzt-logo--img { background: #fff; overflow: hidden; box-shadow: 0 3px 8px rgba(10,17,40,.16), inset 0 0 0 1px var(--border); }
.post-body .kz-vs .kzt-logo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body .kz-vs .kzt-name { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.post-body .kz-vs tbody td:first-child {
  font-weight: 600; color: var(--ink); background: var(--surface-alt);
}
/* лёгкая вертикальная граница между колонками вместо заливки */
.post-body .kz-vs td:not(:first-child), .post-body .kz-vs th:not(:first-child) {
  border-left: 1px solid var(--border);
}
.post-body .kz-vs tbody tr:hover td { background: rgba(38,104,255,.025); }
.post-body .kz-vs tbody tr:hover td:first-child { background: var(--surface-alt); }
/* лучшее значение по критерию — галочка + подсветка */
.post-body .kz-vs td.best-cell { background: rgba(30,122,61,.06); }
.post-body .kz-vs tbody tr:hover td.best-cell { background: rgba(30,122,61,.09); }
.post-body .kz-vs .best { color: var(--ink); font-weight: 700; }
.post-body .kz-vs .best::after {
  content: ""; display: inline-block; width: 15px; height: 15px;
  margin-left: 7px; vertical-align: -2px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231E7A3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
/* да/нет — таблетки, а не голый цветной текст */
.post-body .kz-vs .yes, .post-body .kz-vs .no {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-weight: 600; font-size: 13px; line-height: 1.2;
}
.post-body .kz-vs .yes {
  color: #1E7A3D; background: rgba(30,122,61,.10);
}
.post-body .kz-vs .no {
  color: #B23B3B; background: rgba(178,59,59,.10);
}
.post-body .kz-vs .yes::before {
  content: ""; width: 12px; height: 12px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E7A3D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.post-body .kz-vs .no::before {
  content: ""; width: 12px; height: 12px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B23B3B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ---------- Схема шагов .kz-flow — соединительная линия ---------- */
.post-body .kz-flow {
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--surface-alt) 100%);
  box-shadow: 0 10px 30px rgba(10,17,40,.06);
}
.post-body .kz-flow__num {
  background: var(--accent); color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(38,104,255,.28);
}
/* цветная стрелка-акцент */
.post-body .kz-flow__arrow { color: var(--accent); opacity: .55; }

/* ---------- Врезка .kz-callout — крупнее иконка, мягче фон ---------- */
.post-body .kz-callout {
  background: linear-gradient(180deg, var(--accent-tint) 0%, #F4F8FF 100%);
  border-color: rgba(38,104,255,.22);
  box-shadow: 0 10px 30px rgba(38,104,255,.08);
}
.post-body .kz-callout__icon { box-shadow: 0 6px 16px rgba(38,104,255,.30); }

/* ---------- TL;DR (для будущих статей) ---------- */
.article-shell .kz-tldr {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 0 0 28px; padding: 20px 24px;
  background: var(--surface-dark); color: #fff;
  border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(10,17,40,.14);
  position: relative; overflow: hidden;
}
.article-shell .kz-tldr::after {
  content: "\2660"; position: absolute; right: 16px; bottom: -26px;
  font-family: var(--f-display); font-size: 120px; line-height: 1;
  color: #fff; opacity: .05; pointer-events: none;
}
.article-shell .kz-tldr__badge {
  flex: 0 0 auto; align-self: flex-start;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--surface-dark); background: var(--gold-lt);
  padding: 5px 10px; border-radius: 7px; margin-top: 2px;
}
.article-shell .kz-tldr__text {
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.92);
  position: relative; z-index: 1;
}
.article-shell .kz-tldr__text strong { color: var(--gold-lt); font-weight: 600; }
@media (max-width: 600px) {
  .article-shell .kz-tldr { flex-direction: column; gap: 10px; padding: 18px 18px; }
}

/* ---------- Глоссарий (для будущих статей) ---------- */
.article-shell .kz-glossary {
  margin: 30px 0; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
}
.article-shell .kz-glossary > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 16px 22px;
  font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink);
  background: var(--surface-alt);
}
.article-shell .kz-glossary > summary::-webkit-details-marker { display: none; }
.article-shell .kz-glossary > summary::after {
  content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--accent);
  transition: transform .2s;
}
.article-shell .kz-glossary[open] > summary::after { transform: rotate(45deg); }
.kz-glossary__list { margin: 0; padding: 8px 22px 18px; }
/* термины — строки с золотой точкой-маркером и разделителями (единый стиль).
   Без префикса .article-shell — блок может стоять и вне неё (после тела). */
.kz-glossary dl { margin: 0; padding: 6px 22px 20px; }
.kz-glossary dt {
  font-family: var(--f-display); font-weight: 700; color: var(--ink); font-size: 15px;
  padding-top: 14px; display: flex; align-items: center; gap: 9px;
}
.kz-glossary dt::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-br,#E7BC56), var(--gold-lt,#C88A2E));
}
.kz-glossary dd {
  margin: 5px 0 0 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.kz-glossary dd:last-child { border-bottom: none; padding-bottom: 0; }

/* ---------- Плюсы / минусы (для будущих статей) ---------- */
.article-shell .kz-proscons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0;
}
@media (max-width: 600px) { .article-shell .kz-proscons { grid-template-columns: 1fr; } }
.article-shell .kz-proscons__col {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 22px; background: var(--surface);
}
.article-shell .kz-proscons__col--pro { border-top: 3px solid #1E7A3D; }
.article-shell .kz-proscons__col--con { border-top: 3px solid #B23B3B; }
.article-shell .kz-proscons__h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  letter-spacing: .01em; margin: 0 0 12px;
}
.article-shell .kz-proscons__col--pro .kz-proscons__h { color: #1E7A3D; }
.article-shell .kz-proscons__col--con .kz-proscons__h { color: #B23B3B; }
.article-shell .kz-proscons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.article-shell .kz-proscons li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; margin: 0; color: var(--ink); }
.article-shell .kz-proscons li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.article-shell .kz-proscons__col--pro li::before { content: "+"; color: #1E7A3D; }
.article-shell .kz-proscons__col--con li::before { content: "\2212"; color: #B23B3B; }
/* убираем глобальные точки-буллеты .post-body ul li для этих списков */
.article-shell .kz-proscons li::marker { content: ""; }

/* ==========================================================================
   МОБИЛЬНАЯ РАСКЛАДКА СРАВНИТЕЛЬНЫХ ТАБЛИЦ .kz-vs (≤600px)
   Адаптивно по числу колонок-значений (data-cols на <table>):
     • 2 значения (PokerBet vs KlubOk) → «Лёгкие строки» M2: значения рядом в
       2 колонки, обе видны сразу.
     • 3+ значения → вертикальный СТЕК: параметр-заголовок карточки, ниже —
       список «Колонка: значение» (лого-метка + текст). Так широкие таблицы
       (4–6 колонок) читаются без тесноты и без горизонтального скролла.
   Общая обёртка-карточка для обоих случаев. Разметка одна (td[data-label]).
   ========================================================================== */
@media (max-width: 600px) {
  /* ── общее: обёртка-карточка на всю таблицу ── */
  .post-body .kf-tablewrap:has(.kz-vs td[data-label]) {
    overflow: visible; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 8px 24px rgba(10,17,40,.06); margin: 26px 0; background: var(--surface);
  }
  .post-body table.kz-vs:has(td[data-label]) {
    display: block; min-width: 0; width: 100%; border: none; background: none;
  }
  /* Сброс наследия «горизонтального скролла» (белый nowrap из ≤640px правила):
     в карточном виде весь текст переносится, ничего не вылезает за экран. */
  .post-body .kz-vs:has(td[data-label]) th,
  .post-body .kz-vs:has(td[data-label]) td {
    white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 0;
  }
  .post-body .kz-vs:has(td[data-label]) tbody { display: block; }
  .post-body .kz-vs:has(td[data-label]) tbody tr:hover td { background: none; }
  .post-body .kz-vs:has(td[data-label]) tbody td[data-label] {
    white-space: normal; text-align: left; background: none !important;
    overflow-wrap: anywhere; word-break: break-word;
  }
  .post-body .kz-vs:has(td[data-label]) tbody td[data-label] .yes,
  .post-body .kz-vs:has(td[data-label]) tbody td[data-label] .no { margin-top: 1px; }

  /* ═══════ ВАРИАНТ A: 2 значения → «Лёгкие строки» рядом ═══════ */
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead { display: block; }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead tr {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    background: var(--surface-alt); border-bottom: 1px solid var(--border);
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead th:first-child { display: none; }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead th {
    padding: 12px 14px; border: none; text-align: left;
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead th + th { border-left: 1px solid var(--border); }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead .kzt-room {
    justify-content: flex-start; min-width: 0; flex-wrap: wrap;
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead .kzt-logo { width: 26px; height: 26px; flex: 0 0 26px; font-size: 11px; }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) thead .kzt-name {
    font-size: 13px; min-width: 0; overflow-wrap: anywhere; word-break: break-word;
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody tr {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-bottom: 1px solid var(--border);
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody tr:last-child { border-bottom: none; }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody td:first-child {
    grid-column: 1 / -1; display: block; white-space: normal;
    background: none; color: var(--ink-3); font-family: var(--f-mono);
    font-weight: 600; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
    padding: 10px 14px 3px; border: none; text-align: left;
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody td[data-label] {
    display: block; padding: 2px 14px 11px; border: none;
    font-size: 13.5px; line-height: 1.4; color: var(--ink);
  }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody td[data-label]::before { content: none; }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody td.col-b { border-left: 1px solid var(--border); }
  .post-body .kz-vs[data-cols="2"]:has(td[data-label]) tbody td.best-cell[data-label] {
    background: rgba(30,122,61,.07) !important; font-weight: 700;
  }

  /* ═══════ ВАРИАНТ B: 3+ значения → вертикальный стек ═══════ */
  /* :not([data-cols="2"]) ловит 3,4,5,6… (и таблицы без data-cols на всякий) */
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) thead { display: none; }
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody tr {
    display: block; border-bottom: 1px solid var(--border);
  }
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody tr:last-child { border-bottom: none; }
  /* параметр → шапка карточки-параметра */
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody td:first-child {
    display: block; white-space: normal; background: var(--surface-alt);
    color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 14px;
    padding: 11px 16px; border: none; text-align: left;
  }
  /* значения → строки «Колонка: значение» */
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody td[data-label] {
    display: grid; grid-template-columns: minmax(84px,36%) minmax(0,1fr); gap: 12px; align-items: baseline;
    padding: 9px 16px; border-top: 1px solid var(--border);
    font-size: 14px; line-height: 1.4; color: var(--ink);
  }
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody td[data-label]::before {
    content: attr(data-label); font-family: var(--f-mono); font-size: 11.5px;
    font-weight: 600; color: var(--ink-3); letter-spacing: .02em;
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
  }
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody td.best-cell[data-label] {
    background: rgba(30,122,61,.06) !important;
  }
  .post-body .kz-vs:not([data-cols="2"]):has(td[data-label]) tbody td.best-cell[data-label] .best { font-weight: 700; }
}

/* Фолбэк для браузеров без :has() (старые): таблица остаётся скроллящейся —
   это рабочее поведение, просто без карточек. Современные мобильные браузеры
   (Safari 15.4+, Chrome 105+) :has() поддерживают, поэтому карточки увидит
   подавляющее большинство. */

/* ==========================================================================
   ПРЕМИУМ-СЛОЙ ТИПОГРАФИКИ СТАТЬИ (2026-09, доп. полировка)
   Тонкие детали, поднимающие «дороговизну»: акцент-маркеры у H2, аккуратные
   ссылки, засечная первая строка, усиленный sticky-TOC. Всё через
   .post-body/.article-shell — выигрываем у inline-стилей шаблона.
   ========================================================================== */

/* Акцент-маркер секции: короткая градиентная риска над каждым H2.
   Даёт ритм и «редакционность» без нумерации-клише. Маркер живёт в верхнем
   margin'е заголовка (top:-16px), поэтому не раздвигает ритм секций. */
.post-body h2 { position: relative; }
.post-body h2::before {
  content: ""; position: absolute; top: -16px; left: 0;
  width: 44px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold-lt));
}
.post-body h2:first-child::before { display: none; }

/* Ссылки в теле — деликатное золотистое подчёркивание, плотнее на hover. */
.post-body p a, .post-body li a {
  color: var(--accent-deep);
  background-image: linear-gradient(var(--gold-lt), var(--gold-lt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px; transition: background-size .18s ease, color .18s ease;
}
.post-body p a:hover, .post-body li a:hover {
  color: var(--accent); background-size: 100% 2px; text-decoration: none;
}

/* Первая строка вводного абзаца — лёгкий small-caps акцент рядом с буквицей. */
.post-body > p:first-of-type { font-size: 1.02em; }

/* Sticky-оглавление: активный пункт заметнее, мягкий фон при наведении. */
.toc-side__list a { border-radius: 0 6px 6px 0; padding-left: 18px; }
.toc-side__list a:hover { background: var(--surface-alt); }
.toc-side__list a.active {
  background: linear-gradient(90deg, var(--accent-tint), transparent);
}

/* Буквица: чуть глубже цвет + мягкая тень для «печатного» ощущения. */
.post-body .lede-lead::first-letter,
.post-body > p:first-of-type::first-letter {
  text-shadow: 0 2px 8px rgba(38,104,255,.14);
}

/* Блок-цитата: кавычка-акцент для «журнального» вида. */
.post-body blockquote { position: relative; }
.post-body blockquote::before {
  content: "\201C"; position: absolute; top: -6px; left: 10px;
  font-family: var(--f-serif); font-size: 56px; line-height: 1;
  color: var(--gold-lt); opacity: .35; pointer-events: none;
}

/* Тонкая линия-разделитель перед блоком автора — «конец статьи». */
.author-premium { position: relative; }
.author-premium::before {
  content: ""; position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}

@media (max-width: 600px) {
  .post-body h2::before { width: 36px; }
}

/* ==========================================================================
   ФИНАЛЬНЫЙ CTA — C1 (премиум-конверсия) / C2 (каталог). 2026-09.
   Стекло/глубина + реальные логотипы площадок. Данные — из partners.json
   (cta_builder.py), поэтому при смене партнёров вид пересобирается сам.
   Классы .cta1 / .cta2 переопределяют базовый .final-cta.
   ========================================================================== */
/* реальный лого в белой плитке; fallback-версия --txt = градиент с инициалами */
.cta-logo{border-radius:12px;background:#fff;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.6)}
.cta-logo img{width:100%;height:100%;object-fit:cover;display:block}
.cta-logo--txt{font-family:var(--f-display);font-weight:700;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28)}

/* ---------- C1 — премиум-конверсия (redesign 2026-09) ----------
   Многослойная глубина, чёткие зоны (шапка → заголовок → факты-сетка →
   действие), мягкий свет в углу вместо обрезанного символа. */
.final-cta.cta1{position:relative;overflow:hidden;border-radius:var(--r-xl,22px);padding:34px 34px 32px;text-align:left;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(199,138,46,.10) 0%,transparent 50%),
    radial-gradient(120% 120% at 85% -10%,#1E2C57 0%,transparent 55%),
    linear-gradient(180deg,#0E1428,#080C18);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 70px rgba(8,11,24,.45),inset 0 1px 0 rgba(255,255,255,.07);margin-top:12px}
/* мягкое световое пятно снизу-справа — глубина без обрезанных символов */
.cta1::after{content:"";position:absolute;right:-80px;bottom:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(38,104,255,.16),transparent 68%);pointer-events:none;z-index:0}
/* тонкая золотая линия по верхней кромке */
.cta1::before{content:"";position:absolute;top:0;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,rgba(231,188,86,.7),transparent);z-index:1}

/* ── шапка: лого-стикер + имя + Kozyr Score, с разделителем под ней ── */
.cta1__top{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding-bottom:20px;position:relative;z-index:1;
  border-bottom:1px solid rgba(255,255,255,.08)}
.cta1__top .cta-logo{width:56px;height:56px;border-radius:15px;font-size:20px}
.cta1__id{min-width:0;flex:1}
.cta1__name{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:#fff;line-height:1.1}
.cta1__sub{font-size:12px;color:rgba(255,255,255,.48);font-family:var(--f-mono);margin-top:4px}
.cta1__badge{margin-left:auto;flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  font-family:var(--f-mono);font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-br,#E7BC56);background:linear-gradient(180deg,rgba(231,188,86,.18),rgba(231,188,86,.05));
  border:1px solid rgba(231,188,86,.34);border-radius:14px;padding:8px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.24);white-space:nowrap}
.cta1__badge b{color:#fff;font-weight:700;font-size:17px;font-family:var(--f-display);letter-spacing:0}

/* ── заголовок + описание ── */
.final-cta.cta1 h2.cta1__h{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3.2vw,29px);line-height:1.16;margin:0 0 12px;color:#fff;position:relative;z-index:1;letter-spacing:-.01em;text-wrap:balance}
.cta1__h em{font-style:normal;background:linear-gradient(135deg,var(--gold-br,#E7BC56),var(--gold-lt,#C88A2E));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.cta1__p{color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.6;max-width:52ch;margin:0 0 22px;position:relative;z-index:1}

/* ── факты: аккуратная равновысокая сетка (не разнокалиберные теги) ── */
.cta1__chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 24px;position:relative;z-index:1}
.cta1__chip{display:flex;align-items:center;gap:10px;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px 14px;font-size:13px;color:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cta1__chip b{color:#fff;font-weight:700;font-family:var(--f-display);font-size:15px;letter-spacing:-.01em}
.cta1__chip--accent b{color:var(--gold-br,#E7BC56)}
.cta1__chip span{color:rgba(255,255,255,.55);overflow-wrap:anywhere}
/* нечётный последний чип (3,5,…) — на всю ширину ряда, чтобы не висел один
   слева с пустотой справа. Так сетка ровная при любом числе фактов. */
.cta1__chips > .cta1__chip:last-child:nth-child(odd){grid-column:1 / -1}

/* ── действие ── */
.cta1__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:1;
  background:linear-gradient(180deg,#4C89FF,#2668FF);color:#fff !important;font-family:var(--f-display);font-weight:700;font-size:16px;
  padding:16px 30px;border-radius:14px;text-decoration:none !important;
  box-shadow:0 14px 32px rgba(38,104,255,.5),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .16s,box-shadow .22s}
.cta1__btn span{transition:transform .18s}
.cta1__btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(38,104,255,.6),inset 0 1px 0 rgba(255,255,255,.32)}
.cta1__btn:hover span{transform:translateX(4px)}
.cta1__note{font-size:11px;color:rgba(255,255,255,.36);margin-top:14px;position:relative;z-index:1;line-height:1.4}

@media(max-width:600px){
  .final-cta.cta1{padding:26px 20px 24px}
  .cta1__top{gap:12px}
  .cta1__top .cta-logo{width:48px;height:48px}
  .cta1__name{font-size:18px}
  .cta1__badge{padding:6px 11px}
  .cta1__badge b{font-size:15px}
  .cta1__chips{grid-template-columns:1fr}
  .cta1__btn{width:100%}
}

/* ---------- C2 — каталог-CTA ---------- */
.final-cta.cta2{position:relative;overflow:hidden;border-radius:var(--r-xl,22px);padding:38px 34px;text-align:center;
  background:radial-gradient(130% 120% at 50% -25%,#1A2650 0%,transparent 58%),linear-gradient(180deg,#0D1226,#090D1A);
  color:#fff;box-shadow:0 30px 70px rgba(8,11,24,.4),inset 0 1px 0 rgba(255,255,255,.06);margin-top:12px}
.cta2::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,169,59,.8),transparent)}
.cta2__eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-br,#E7BC56);margin-bottom:16px}
.final-cta.cta2 h2.cta2__h{font-family:var(--f-display);font-weight:700;font-size:clamp(23px,3.5vw,31px);line-height:1.12;margin:0 auto 12px;max-width:18ch;color:#fff;letter-spacing:-.01em}
.cta2__p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.6;max-width:44ch;margin:0 auto 26px}
.cta2__rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
@media(max-width:560px){.cta2__rooms{grid-template-columns:1fr}}
.cta2__room{position:relative;display:flex;align-items:center;gap:11px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.22);transition:transform .18s,box-shadow .2s}
.cta2__room:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.3)}
.cta2__room .cta-logo{width:40px;height:40px}
.cta2__rn{font-family:var(--f-display);font-weight:600;font-size:14px;color:#fff;line-height:1.1}
.cta2__rv{font-family:var(--f-mono);font-size:11.5px;color:var(--gold-br,#E7BC56);font-weight:600;margin-top:3px;display:block}
.cta2__room--top{border-color:rgba(217,169,59,.5)}
.cta2__room--top::after{content:"ТОП";position:absolute;top:-9px;left:12px;font-family:var(--f-mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;color:#090D1A;background:var(--gold-br,#E7BC56);border-radius:5px;padding:2px 6px}
.cta2__btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(180deg,#4785FF,#2668FF);color:#fff !important;font-family:var(--f-display);font-weight:600;font-size:16px;padding:15px 30px;border-radius:13px;text-decoration:none;box-shadow:0 12px 30px rgba(38,104,255,.5),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s,box-shadow .2s}
.cta2__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(38,104,255,.6),inset 0 1px 0 rgba(255,255,255,.3);text-decoration:none}
.cta2__trust{font-size:11.5px;color:rgba(255,255,255,.38);margin-top:15px}
@media(max-width:600px){.final-cta.cta2{padding:30px 20px}}

/* ==========================================================================
   СКРОЛЛЕР РУМОВ — тёмная лента-подборка (2026-09).
   Горизонтальный scroll-snap с крупными премиальными карточками и стрелками.
   Данные — из partners.json (cta_builder.build_rooms_scroller), вид пере-
   собирается при смене партнёров. Единый тёмный язык с hero и C1.
   ========================================================================== */
/* Тёмная полоса — full-bleed на всю ширину секции; контент внутри лежит в
   стандартном .container блога (тот же ритм, что «Похожие статьи»).
   margin-bottom большой + мягкое затухание снизу (::after) — чтобы стык с
   светлой секцией «Похожие материалы» был плавным, а не резким обрывом. */
.kzrs{position:relative;margin:48px 0 56px;padding:40px 0 46px;
  background:linear-gradient(180deg,#F5F7FB,#EEF1F7)}
/* декоративное золотистое пятно-водяной знак */
.kzrs::before{content:"";position:absolute;right:-40px;top:-30px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(199,138,46,.10),transparent 70%);pointer-events:none;z-index:0}
/* мягкое затухание к фону страницы — плавный стык с «Похожими материалами» */
.kzrs::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg,#FAFAFC))}
/* .kzrs__wrap = .container (max-width+padding берём оттуда), тут только контекст */
.kzrs__wrap{position:relative;z-index:1}
.kzrs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.kzrs__eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold,#7E5512);margin-bottom:9px}
.kzrs__h{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,3.4vw,27px);color:var(--ink,#0A1128);margin:0;line-height:1.15;letter-spacing:-.01em}
.kzrs__sub{font-size:13.5px;color:var(--ink-2,#5C6580);margin:8px 0 0;line-height:1.4}
.kzrs__nav{display:flex;gap:10px;flex:0 0 auto}
.kzrs__arrow{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--border,#E5E7EE);color:var(--ink,#0A1128);
  box-shadow:0 4px 12px rgba(10,17,40,.06);transition:transform .15s,background .2s,opacity .2s}
.kzrs__arrow svg{width:20px;height:20px}
.kzrs__arrow:hover{background:var(--surface-alt,#F5F7FB);transform:translateY(-2px)}
.kzrs__arrow:disabled{opacity:.32;cursor:default;transform:none}
.kzrs__arrow:focus-visible{outline:2px solid var(--gold-br,#E7BC56);outline-offset:2px}

/* лента. Верхний padding 16px — чтобы ТОП-бейдж (top:-10px) не срезался
   overflow-x'ом у крайней карточки. Bleed на padding .container (24px), чтобы
   карточки красиво уходили к краю полосы, а не обрывались у гаттера. */
.kzrs__track{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding:16px 24px 8px;scrollbar-width:none;margin:0 -24px}
.kzrs__track::-webkit-scrollbar{display:none}

/* карточка — светлая, как каталог на главной */
.kzrs-card{position:relative;scroll-snap-align:start;flex:0 0 clamp(250px,78vw,290px);
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border,#E5E7EE);border-radius:18px;padding:20px 20px 22px;
  box-shadow:0 4px 14px rgba(10,17,40,.05);
  transition:transform .2s,box-shadow .22s,border-color .2s}
.kzrs-card:hover{transform:translateY(-4px);border-color:var(--border-2,#D0D5E0);
  box-shadow:0 18px 40px rgba(10,17,40,.10)}
.kzrs-top{position:absolute;top:-10px;left:18px;font-family:var(--f-mono);font-size:9px;font-weight:700;
  letter-spacing:.09em;color:#090D1A;background:var(--gold-br,#E7BC56);border-radius:6px;padding:3px 8px;
  box-shadow:0 4px 12px rgba(199,138,46,.4)}
.kzrs-card__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
/* лого — белая плитка, картинка целиком */
.kzrs-logo{flex:0 0 auto;width:52px;height:52px;border-radius:13px;background:#fff;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(10,17,40,.12),inset 0 0 0 1px var(--border,#E5E7EE)}
.kzrs-logo img{width:100%;height:100%;object-fit:cover;display:block}
.kzrs-logo--txt{font-family:var(--f-display);font-weight:700;font-size:17px;color:#fff}
.kzrs-card__id{min-width:0;flex:1}
.kzrs-name{display:block;font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--ink,#0A1128);line-height:1.1}
.kzrs-sub{display:block;font-size:11.5px;color:var(--ink-3,#667085);margin-top:3px}
.kzrs-score{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.kzrs-score i{font-family:var(--f-mono);font-size:8px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3,#667085);font-style:normal}
.kzrs-score b{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--gold,#7E5512);line-height:1}

/* плашка рейкбека — главный крючок (светлая тема) */
.kzrs-rake{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-radius:12px;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(38,104,255,.10),rgba(38,104,255,.04));border:1px solid rgba(38,104,255,.22)}
.kzrs-rake__n{font-family:var(--f-display);font-weight:700;font-size:28px;color:var(--ink,#0A1128);line-height:1}
.kzrs-rake__n span{font-size:16px;font-weight:600;margin-left:1px}
/* сумма бонуса длиннее процента → мельче, чтобы влезала в одну строку */
.kzrs-rake__n--sm{font-size:20px;letter-spacing:-.01em}
.kzrs-rake__l{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2,#5C6580)}
/* бонус вместо рейкбека: золотистый акцент (не синий рейкбек-крючок) */
.kzrs-rake--bonus{flex-direction:column;align-items:flex-start;gap:3px;
  background:linear-gradient(180deg,rgba(199,138,46,.14),rgba(199,138,46,.05));border-color:rgba(199,138,46,.30)}
.kzrs-rake--bonus .kzrs-rake__n--sm{color:var(--gold,#7E5512)}
.kzrs-rake--none{background:var(--surface-alt,#F5F7FB);border-color:var(--border,#E5E7EE);align-items:center}
.kzrs-rake--none .kzrs-rake__l{color:var(--ink-2,#5C6580)}

/* факты (светлая тема) */
.kzrs-facts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.kzrs-facts li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--border,#E5E7EE)}
.kzrs-facts li:last-child{border-bottom:none;padding-bottom:0}
.kzrs-facts li span{color:var(--ink-3,#667085);font-size:12px}
.kzrs-facts li b{color:var(--ink,#0A1128);font-weight:600;font-family:var(--f-mono);font-size:12.5px;text-align:right}

/* кнопка */
.kzrs-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#4785FF,#2668FF);color:#fff !important;font-family:var(--f-display);
  font-weight:600;font-size:14.5px;padding:12px 18px;border-radius:12px;text-decoration:none !important;
  box-shadow:0 10px 24px rgba(38,104,255,.45),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .15s,box-shadow .2s}
.kzrs-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(38,104,255,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.kzrs-btn span{transition:transform .18s}
.kzrs-btn:hover span{transform:translateX(3px)}

@media (max-width:600px){
  .kzrs{margin:34px 0 8px;padding:30px 0 32px}
  .kzrs__head{flex-direction:column;align-items:flex-start;gap:14px}
  .kzrs__nav{display:none} /* на телефоне листаем свайпом, стрелки не нужны */
  .kzrs__track{padding-left:16px;padding-right:16px;margin:0 -16px}
  .kzrs-card{flex-basis:82vw}
}
@media (prefers-reduced-motion:reduce){
  .kzrs__track{scroll-behavior:auto}
  .kzrs-card,.kzrs-btn,.kzrs__arrow{transition:none}
}

/* Inline каталог-CTA в СЕРЕДИНЕ статьи (перенесён из низа). Отступы, чтобы блок
   дышал в потоке текста; ширину держит .post-body (max-width:820px). */
.kz-midcta{margin:40px 0 44px}
@media (max-width:600px){.kz-midcta{margin:30px 0 34px}}


/* ==========================================================================
   INLINE-CTA — тонкая полоска-баннер в середине статьи (2026-09).
   Одна строка: иконка + текст-крючок + кнопка. Лёгкий акцент, не вывеска.
   Ширину держит .post-body (max-width:820px), в потоке текста.
   ========================================================================== */
.kz-inline-cta{display:flex;align-items:center;gap:14px;margin:34px 0;padding:14px 18px;
  border-radius:14px;text-decoration:none !important;
  background:linear-gradient(180deg,var(--accent-tint,#EBF1FF),rgba(235,241,255,.55));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  transition:transform .16s,box-shadow .2s,border-color .2s}
.kz-inline-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(38,104,255,.16);
  border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.kz-inline-cta__ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(180deg,#4C89FF,#2668FF);color:#fff;box-shadow:0 6px 16px rgba(38,104,255,.3)}
.kz-inline-cta__ic svg{width:20px;height:20px}
.kz-inline-cta__txt{flex:1;min-width:0;font-family:var(--f-display);font-weight:600;font-size:15.5px;
  color:var(--ink,#0A1128);line-height:1.3}
.kz-inline-cta__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-display);font-weight:700;font-size:14.5px;color:var(--accent,#2668FF);white-space:nowrap}
.kz-inline-cta__btn span{transition:transform .18s}
.kz-inline-cta:hover .kz-inline-cta__btn span{transform:translateX(4px)}
@media (max-width:600px){
  .kz-inline-cta{flex-wrap:wrap;gap:10px;padding:14px 16px}
  .kz-inline-cta__txt{flex:1 1 100%;order:1;font-size:15px}
  .kz-inline-cta__ic{order:0}
  .kz-inline-cta__btn{order:0;margin-left:auto}
}