/* Страница поста базы знаний (/kb/p/…) — статья в стиле воронки.

   Подключается после nf-funnel.css: каркас (.nff-page/.nff-shell/.nff-list) и
   палитра оттуда, здесь — обложка и типографика статьи.
   Размеры — в единицах эталона 853 × масштаб --s, как во всей воронке. */

/* Внизу страницы висит плавающая кнопка «Спросить» — оставляем под неё место,
   иначе она закрывает последние строки статьи. */
.nff-page .nff-list { padding-bottom: calc(200 * var(--s)); }

/* ── Обложка ─────────────────────────────────────────────────────────────── */
.kbc-cover {
  position: relative;
  margin-bottom: calc(28 * var(--s));
  border-radius: calc(32 * var(--s));
  overflow: hidden;
  background: #04070f;
  box-shadow:
    0 0 calc(30 * var(--s)) rgba(37,231,255,.16),
    0 0 calc(34 * var(--s)) rgba(240,79,255,.14);
  isolation: isolate;
}
.kbc-cover::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; padding: calc(1.4 * var(--s) + 0.6px);
  background: linear-gradient(115deg, rgba(37,231,255,.6), rgba(63,147,255,.34) 40%,
                              rgba(118,88,255,.4) 72%, rgba(240,79,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.kbc-cover img, .kbc-cover .kbc {
  display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
}

/* Обложка «дышит»: сама картинка чуть раздувается и сдувается внутри рамки,
   а свечение по краю пульсирует в такт — как у кнопок с .nf-btn--breathe.
   Масштабируем именно картинку, а не блок: рамка стоит на месте, вёрстка
   вокруг не дёргается. */
.kbc-cover img { animation: kbcBreath 4.8s ease-in-out infinite; will-change: transform; }
.kbc-cover { animation: kbcGlow 4.8s ease-in-out infinite; }
/* Вдох глубокий: картинка наезжает почти на десятую часть кадра.
   Стартуем с 1.005, чтобы в самой нижней точке не проступал край. */
@keyframes kbcBreath {
  0%, 100% { transform: scale(1.005); }
  50%      { transform: scale(1.09); }
}
@keyframes kbcGlow {
  0%, 100% {
    box-shadow: 0 0 calc(26 * var(--s)) rgba(37,231,255,.12),
                0 0 calc(30 * var(--s)) rgba(240,79,255,.10);
  }
  50% {
    box-shadow: 0 10px calc(68 * var(--s)) rgba(37,231,255,.48),
                0 10px calc(74 * var(--s)) rgba(240,79,255,.40);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kbc-cover, .kbc-cover img { animation: none; }
}
/* Бейдж на обложке — название ветки. */
.kbc-badge {
  position: absolute; z-index: 4;
  left: calc(26 * var(--s)); bottom: calc(24 * var(--s));
  display: inline-flex; align-items: center; gap: calc(12 * var(--s));
  max-width: calc(100% - 52 * var(--s));
  padding: calc(12 * var(--s)) calc(22 * var(--s));
  border-radius: 999px;
  background: rgba(4,7,15,.62);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(37,231,255,.42);
  font-size: calc(24 * var(--s)); font-weight: 500; color: #d7f6fb;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbc-badge svg { width: calc(28 * var(--s)); height: calc(28 * var(--s)); flex: none; }

/* ── Шапка статьи ────────────────────────────────────────────────────────── */
.kba-eyebrow { margin: 0 0 calc(10 * var(--s)); font-size: calc(26 * var(--s));
               font-weight: 400; color: #63667d; line-height: 1; }
.kba-title {
  margin: 0 0 calc(24 * var(--s));
  font-size: calc(46 * var(--s)); font-weight: 650;
  letter-spacing: -.015em; line-height: 1.14; color: #f7f7f8;
}

/* ── Тело статьи ─────────────────────────────────────────────────────────── */
.kba { padding-bottom: calc(30 * var(--s)); }
.kba-p {
  margin: 0 0 calc(22 * var(--s));
  font-size: calc(29 * var(--s)); font-weight: 400; line-height: 1.62; color: #c8cfdd;
}
.kba-lat { font-style: italic; color: #8fbfff; }
.kba-link { color: #4fd4e8; text-decoration: underline; word-break: break-word; }

/* Заголовок раздела: иконка в плитке + текст. */
.kba-h {
  display: flex; align-items: flex-start; gap: calc(16 * var(--s));
  margin: calc(34 * var(--s)) 0 calc(18 * var(--s));
  font-size: calc(33 * var(--s)); font-weight: 600; line-height: 1.24; color: #f2f5fb;
}
.kba-h__ico {
  flex: none; width: calc(60 * var(--s)); height: calc(60 * var(--s));
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(18 * var(--s));
  background: radial-gradient(circle at 50% 45%, rgba(37,231,255,.20), rgba(6,11,22,1) 74%);
  box-shadow: inset 0 0 0 1px rgba(37,231,255,.3), 0 0 calc(16 * var(--s)) rgba(37,231,255,.16);
}
.kba-h__ico svg { width: 58%; height: 58%; display: block; }
/* Подзаголовок раздела — вторая строка «Мышьяк: формы, метаболизм и риски». */
.kba-h__txt { display: flex; flex-direction: column; gap: calc(6 * var(--s)); min-width: 0; }
.kba-h__sub {
  font-size: calc(25 * var(--s)); font-weight: 400; line-height: 1.35;
  color: #9aa3b8; letter-spacing: 0;
}
/* Тон блока по смыслу: предупреждение / дозировки / сочетания. */
.kba-h--warn .kba-h__ico {
  background: radial-gradient(circle at 50% 45%, rgba(255,184,77,.22), rgba(6,11,22,1) 74%);
  box-shadow: inset 0 0 0 1px rgba(255,184,77,.42), 0 0 calc(16 * var(--s)) rgba(255,184,77,.18);
}
.kba-h--warn { color: #ffd9a3; }
.kba-h--dose .kba-h__ico {
  background: radial-gradient(circle at 50% 45%, rgba(118,88,255,.26), rgba(6,11,22,1) 74%);
  box-shadow: inset 0 0 0 1px rgba(118,88,255,.42), 0 0 calc(16 * var(--s)) rgba(118,88,255,.2);
}
.kba-h--mix .kba-h__ico {
  background: radial-gradient(circle at 50% 45%, rgba(240,79,255,.22), rgba(6,11,22,1) 74%);
  box-shadow: inset 0 0 0 1px rgba(240,79,255,.42), 0 0 calc(16 * var(--s)) rgba(240,79,255,.18);
}

/* Список: галочки вместо дефисов. */
.kba-ul { list-style: none; margin: 0 0 calc(24 * var(--s)); padding: 0; }
.kba-ul li {
  position: relative;
  padding: calc(13 * var(--s)) calc(20 * var(--s)) calc(13 * var(--s)) calc(62 * var(--s));
  margin-bottom: calc(10 * var(--s));
  border-radius: calc(20 * var(--s));
  background: linear-gradient(100deg, rgba(37,231,255,.07), rgba(2,4,10,0) 60%, rgba(240,79,255,.07));
  background-color: #05080f;
  box-shadow: inset 0 0 0 1px rgba(120,150,200,.14);
  font-size: calc(28 * var(--s)); line-height: 1.48; color: #d3d9e6;
}
.kba-ul li::before {
  content: ''; position: absolute;
  left: calc(20 * var(--s)); top: calc(18 * var(--s));
  width: calc(26 * var(--s)); height: calc(26 * var(--s));
  border-radius: 50%;
  background:
    linear-gradient(#04070f, #04070f) padding-box,
    linear-gradient(115deg, #25e7ff, #7658ff 60%, #f04fff) border-box;
  border: calc(2 * var(--s) + .5px) solid transparent;
}
.kba-ul li::after {
  content: ''; position: absolute;
  left: calc(27 * var(--s)); top: calc(25 * var(--s));
  width: calc(11 * var(--s)); height: calc(6 * var(--s));
  border-left: calc(2 * var(--s) + .5px) solid #7fe9f2;
  border-bottom: calc(2 * var(--s) + .5px) solid #7fe9f2;
  transform: rotate(-45deg);
}

/* «Метка: значение» — строка-определение. */
.kba-def {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--s)) calc(14 * var(--s));
  margin: 0 0 calc(16 * var(--s));
  padding: calc(18 * var(--s)) calc(22 * var(--s));
  border-radius: calc(22 * var(--s));
  background-color: #05080f;
  box-shadow: inset 0 0 0 1px rgba(120,150,200,.16);
}
.kba-def__k {
  flex: none; font-size: calc(24 * var(--s)); font-weight: 600; color: #8ee9f2;
  text-transform: uppercase; letter-spacing: .04em;
}
.kba-def__v { flex: 1 1 auto; min-width: calc(180 * var(--s));
              font-size: calc(28 * var(--s)); line-height: 1.5; color: #d3d9e6; }
.kba-def--warn { box-shadow: inset 0 0 0 1px rgba(255,184,77,.34); }
.kba-def--warn .kba-def__k { color: #ffd08a; }
.kba-def--mix { box-shadow: inset 0 0 0 1px rgba(240,79,255,.32); }
.kba-def--mix .kba-def__k { color: #ff9bd6; }
.kba-def--dose { box-shadow: inset 0 0 0 1px rgba(118,88,255,.34); }
.kba-def--dose .kba-def__k { color: #b9a6ff; }

/* ── Действия под статьёй ────────────────────────────────────────────────── */
.kba-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--s));
  margin: calc(10 * var(--s)) 0 calc(40 * var(--s));
}
.kba-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--s));
  padding: calc(16 * var(--s)) calc(28 * var(--s));
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: calc(27 * var(--s)); font-weight: 500; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.kba-btn:active { transform: scale(.96); }
.kba-btn--like {
  color: #ff9bd6; background: rgba(240,79,255,.10);
  box-shadow: inset 0 0 0 1px rgba(240,79,255,.44);
  font-variant-numeric: tabular-nums;
}
.kba-btn--like.on { color: #fff; background: linear-gradient(135deg, #f04fff, #b85fa3); }
.kba-btn--like svg { width: calc(28 * var(--s)); height: calc(28 * var(--s));
                     fill: none; stroke: currentColor; stroke-width: 2; }
.kba-btn--like.on svg { fill: #fff; }
.kba-btn--ask { color: #04121a; background: linear-gradient(115deg, #25e7ff, #3f93ff); }
.kba-btn--shop { color: #1b0418; background: linear-gradient(115deg, #b85fa3, #f04fff); }

/* ── Списки базы знаний (/kb и /kb/b/…) ──────────────────────────────────────
   Тот же приём, что в воронке «Подбор»: верхний уровень — крупные карточки,
   дальше вглубь пункты становятся компактнее. Все три уровня — это .nff-item
   из nf-funnel.css с модификатором размера, поэтому свечение, градиентная
   рамка и поведение при нажатии везде одинаковые. */

.nfk-ico {
  flex: none; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(26 * var(--s));
  background: radial-gradient(circle at 50% 42%, rgba(37,231,255,.18), rgba(6,11,22,1) 74%);
  box-shadow: inset 0 0 0 1px rgba(120,150,220,.30), 0 0 calc(18 * var(--s)) rgba(37,231,255,.14);
}
.nfk-ico svg { width: 56%; height: 56%; display: block; }

.nfk-count {
  flex: none; z-index: 3;
  font-variant-numeric: tabular-nums;
  color: #7f8aa3; font-weight: 500;
}
.nfk-chev { flex: none; z-index: 3; color: #4fd4e8; display: flex; }
.nfk-chev svg { display: block; }
.nfk-off { display: block; margin-top: calc(8 * var(--s)); font-size: calc(22 * var(--s)); color: #ff8fdc; }

/* ── Фото и текст на страницах подбора ──────────────────────────────────────
   Детальная страница подбора живёт в своей вёрстке, поэтому масштаб --s
   задаём здесь же: без него calc(N * var(--s)) в стилях статьи и рамки
   не работает. */
.kbc-cover--fit { --s: calc(min(100vw, 560px) / 853); }

/* Фото инструкции нельзя ни кадрировать, ни обрезать: там текст, дозировки и
   плашки по самым углам. Пропорции сохраняем полностью. */
.kbc-cover--fit img { aspect-ratio: auto; object-fit: contain; height: auto; }

/* Дышит РАМКА ЦЕЛИКОМ, а не картинка внутри неё.
   Так снимок в спокойной фазе занимает всю рамку (а не уменьшен, как было),
   на вдохе увеличивается вместе с рамкой и при этом физически не может быть
   обрезан. Поле по краям — запас, чтобы растущая рамка не упёрлась в карточку. */
.kbc-cover--fit {
  margin: calc(24 * var(--s));
  animation: kbcFitBreath 4.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.kbc-cover--fit > img, .kbc-cover--fit > .nf-helpd-photos { animation: none !important; }
.kbc-cover--fit > .nf-helpd-photos img { animation: none !important; }
@keyframes kbcFitBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 calc(26 * var(--s)) rgba(37,231,255,.14),
                0 0 calc(30 * var(--s)) rgba(240,79,255,.12);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 10px calc(64 * var(--s)) rgba(37,231,255,.46),
                0 10px calc(70 * var(--s)) rgba(240,79,255,.38);
  }
}
@media (prefers-reduced-motion: reduce) { .kbc-cover--fit { animation: none; } }

/* Перечень, размеченный эмодзи в самом тексте: свой маркер уже есть,
   галочку не рисуем и отступ под неё не оставляем. */
.kba-ul--emoji li { padding-left: calc(22 * var(--s)); }
.kba-ul--emoji li::before, .kba-ul--emoji li::after { content: none; }

/* ── Страница подбора: фон и кнопка покупки ──────────────────────────────────
   Раньше здесь был экран входа с тремя цветными «орбами», включая золотой —
   он выпадал из палитры. Теперь фон тот же, что у воронки и базы знаний. */
.nfd-screen {
  background:
    radial-gradient(circle at 14% 8%, rgba(37,231,255,.16), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(240,79,255,.15), transparent 32%),
    radial-gradient(circle at 50% 96%, rgba(118,88,255,.13), transparent 42%),
    #02040a;
}

/* Кнопка «Купить сейчас» — главная кнопка страницы: фирменный градиент и
   то же дыхание, что у «Магазина» на главной. */
.nfd-buy {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(115deg, #0aafd0 0%, #126dae 34%, #5128a5 72%, #8b18e8 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 30px rgba(37,231,255,.30),
    0 8px 30px rgba(240,79,255,.24);
  animation: nfdBuyBreath 2.85s ease-in-out infinite !important;
  will-change: transform, box-shadow;
}
@keyframes nfdBuyBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
                0 6px 22px rgba(37,231,255,.24), 0 6px 22px rgba(240,79,255,.20);
  }
  50% {
    transform: scale(1.022);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20),
                0 10px 46px rgba(37,231,255,.52), 0 10px 46px rgba(240,79,255,.42);
  }
}
.nfd-buy:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .nfd-buy { animation: none !important; } }

/* Круглая кнопка «назад» уже висит слева вверху — старая строчная ссылка
   «‹ Назад» оказывалась ровно под ней и просвечивала из-под кружка. */
.nfd-screen .nf-helpd-back { display: none; }

/* ── Десктоп: страница поста ─────────────────────────────────────────────────
   Статью в несколько колонок раскладывать нельзя — читать пришлось бы
   зигзагом. Поэтому здесь колонка одна, но комфортной ширины и по центру,
   а обложка занимает всю её ширину. */
@media (min-width: 900px) {
  .nff-page .nff-list { padding-bottom: 120px; }
  .kba, .kba-title, .kbc-cover, .kba-actions {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  .kbc-cover { margin-bottom: 26px; }
  .kba-title { font-size: 40px; margin-bottom: 20px; }
  .kba-p { font-size: 18px; margin-bottom: 16px; }
  .kba-h { font-size: 24px; margin: 30px 0 14px; gap: 12px; }
  .kba-h__ico { width: 44px; height: 44px; border-radius: 13px; }
  .kba-h__sub { font-size: 16px; }
  .kba-ul li { font-size: 17px; padding: 11px 16px 11px 46px; border-radius: 14px; }
  .kba-ul li::before { left: 15px; top: 13px; width: 19px; height: 19px; border-width: 2px; }
  .kba-ul li::after { left: 20px; top: 18px; width: 8px; height: 4px; border-width: 2px; }
  .kba-def { padding: 14px 18px; border-radius: 16px; }
  .kba-def__k { font-size: 14px; }
  .kba-def__v { font-size: 17px; }
  .kba-btn { font-size: 16px; padding: 12px 22px; }
  .kba-btn--like svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Кнопка «Купить сейчас» в конце поста базы знаний.
   Вид тот же, что у кнопки на страницах подбора, чтобы человек узнавал её
   на всём сайте. Ссылка та же самая — поэтому Яндекс.Метрика засчитывает
   её той же целью shop_click.
   ═══════════════════════════════════════════════════════════════════════════ */
.kba-buy-wrap { margin: calc(40 * var(--s)) 0 calc(16 * var(--s)); }
.kba-buy {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  width: 100%;
  min-height: calc(104 * var(--s));
  padding: 0 calc(30 * var(--s));
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 700;
  font-size: calc(28 * var(--s));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #2fc6e6 0%, #6a5cf0 52%, #9b3df0 100%);
  box-shadow: 0 calc(14 * var(--s)) calc(44 * var(--s)) rgba(80, 90, 240, .34);
  animation: kbaBuyGlow 3.4s ease-in-out infinite;
}
.kba-buy:hover { filter: brightness(1.12); }
.kba-buy__ic { display: inline-flex; width: calc(40 * var(--s)); height: calc(40 * var(--s)); flex: none; }
.kba-buy__ic svg { width: 100%; height: 100%; }
.kba-buy__lbl { flex: 1 1 auto; min-width: 0; text-align: center; }
.kba-buy__chev { display: inline-flex; width: calc(28 * var(--s)); height: calc(28 * var(--s)); flex: none; opacity: .85; }
.kba-buy__chev svg { width: 100%; height: 100%; }
@keyframes kbaBuyGlow {
  0%, 100% { box-shadow: 0 calc(12 * var(--s)) calc(36 * var(--s)) rgba(80, 90, 240, .28); }
  50%      { box-shadow: 0 calc(16 * var(--s)) calc(56 * var(--s)) rgba(80, 90, 240, .46); }
}
@media (prefers-reduced-motion: reduce) { .kba-buy { animation: none; } }
.kba-buy-note {
  margin: calc(16 * var(--s)) 0 0;
  font-size: calc(22 * var(--s));
  line-height: 1.5;
  color: #7c8496;
  text-align: center;
}

@media (min-width: 900px) {
  .kba-buy { min-height: 74px; padding: 0 28px; font-size: 17px; gap: 14px; }
  .kba-buy__ic { width: 26px; height: 26px; }
  .kba-buy__chev { width: 18px; height: 18px; }
  .kba-buy-note { font-size: 13px; margin-top: 12px; }
  .kba-buy-wrap { margin: 34px 0 14px; }
}

/* Кнопка «Получить инструкцию в Telegram» — посты ветки «Инструкции
   по применению». Форма та же, что у «Купить сейчас», но заливка тёмная
   с градиентной обводкой: это не покупка, а получение материала. */
.kba-dose { margin: calc(30 * var(--s)) 0 calc(10 * var(--s)); }
.kba-dose__btn {
  position: relative;
  color: #dff6fd;
  background: linear-gradient(180deg, rgba(9, 16, 28, .92), rgba(7, 12, 22, .92));
  box-shadow: 0 0 calc(34 * var(--s)) rgba(61, 212, 224, .16);
  animation: none;
}
.kba-dose__btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(120deg, #3dd4e0 0%, #6f7bff 52%, #ff66d0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.kba-dose__btn .kba-buy__ic { color: #3dd4e0; }
.kba-dose__btn .kba-buy__lbl { font-size: .92em; }