/* Статья блога МедЧата. Стоит ПОСЛЕ стилей главной и home-reference.css:
   берёт их токены, кнопки, карточки, выноски, FAQ и форму, добавляет только
   то, чего на главной нет, — типографику длинного текста, таблицу, оглавление,
   квиз-игру, лид-форму, цитату и плашку cookie. Размеры заданы в единицах холста 1920: на 1181–1599
   страница уменьшается zoom .677, поэтому текст статьи там крупнее, чем
   на главной, — иначе абзац читается кеглем 12 px. */

:root { --art-fs: 22px; --art-lh: 34px; }
@media (min-width: 1181px) and (max-width: 1599px) { :root { --art-fs: 25px; --art-lh: 38px; } }

.art-hero { position: relative; padding: clamp(28px, calc(4*var(--vw)), 72px) 0 clamp(28px, calc(3*var(--vw)), 56px); }
.art-hero .glow--hero { opacity: .7; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; font-size: var(--fs-sm); color: var(--muted-ui); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.art-hero h1 { max-width: 1120px; }
.art-lead { max-width: 1040px; margin: 30px 0 0; font-size: calc(var(--art-fs) + 2px); line-height: calc(var(--art-lh) + 2px); color: var(--ink-2); }
.art-lead b { color: var(--ink); font-weight: 600; }
.art-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.art-meta span { padding: 8px 16px; border-radius: var(--radius-chip); background: var(--teal-100); font-size: var(--fs-sm); color: var(--teal-800); }

/* ---- тело статьи ---- */
.art { padding-bottom: clamp(24px, calc(3*var(--vw)), 60px); }
.art__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 80px; align-items: start; }
.art__body { max-width: 980px; }
.art__body > p, .art__body li { font-size: var(--art-fs); line-height: var(--art-lh); color: var(--ink-2); }
.art__body > p { margin: 22px 0 0; }
.art__body h2 { margin-top: 72px; font-size: 48px; line-height: 52px; letter-spacing: -.03em; scroll-margin-top: 150px; }
.art__body a:not(.btn) { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.art__body a:not(.btn):hover { color: var(--accent-strong); }

.art-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 32px 0 0; }
.art-cta p { margin: 0; }
.art-cta .btn { flex: none; }

.tbl-wrap { margin-top: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-base); line-height: var(--lh-base); }
.tbl th, .tbl td { padding: 18px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--teal-100); font-family: var(--font-h); font-weight: 700; color: var(--teal-800); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; color: var(--ink); width: 38%; }
.tbl td { color: var(--ink-2); }

.art-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 30px; }
.art-cards .card { min-height: 0; }
.art-cards ul { margin: 16px 0 0; padding-left: 22px; }
.art-cards li { margin-top: 8px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-2); }

.art-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: st; }
.art-steps li { position: relative; counter-increment: st; padding: 0 0 22px 72px; }
.art-steps li::before { content: counter(st); position: absolute; left: 0; top: -4px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-100); color: var(--teal-800); font: 700 20px/1 var(--font-h); }
.art-steps b { color: var(--ink); font-weight: 600; }

.art__body .faq { margin-top: 28px; }

/* ---- оглавление ---- */
.art__side { position: sticky; top: 150px; }
.toc { display: grid; gap: 4px; padding: 28px; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.toc__h { margin: 0 0 10px; font: 700 var(--fs-lg)/1 var(--font-h); color: var(--ink); }
.toc a:not(.btn) { padding: 8px 0; color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.toc a:not(.btn):hover { color: var(--accent); }
.toc__btn { margin-top: 16px; text-align: center; }


/* ---- первый экран: текст + вход в игру ---- */
.art-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 64px; align-items: end; }
.quiz-teaser { position: relative; display: grid; gap: 10px; padding: 32px; border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-dialog); color: var(--ink); text-decoration: none; transition: transform .18s var(--ease-out); }
.quiz-teaser:hover { transform: translateY(-3px); text-decoration: none; }
.quiz-teaser img { position: absolute; right: 18px; top: -40px; width: 96px; height: 96px; }
.quiz-teaser__k { justify-self: start; padding: 6px 14px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font: 700 var(--fs-sm)/1 var(--font-h); }
.quiz-teaser b { font: 700 var(--fs-h4)/var(--lh-h4) var(--font-h); }
.quiz-teaser > span:not(.btn):not(.quiz-teaser__k) { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-2); }
.quiz-teaser .btn { justify-self: start; margin-top: 8px; }

/* ---- разбор конкурентов ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.stat { position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 26px 22px 0; border-radius: var(--radius-m); background: var(--teal-100); overflow: hidden; }
.stat b { font: 700 64px/1 var(--font-h); letter-spacing: -.03em; color: var(--teal-800); }
.stat b small { font-size: var(--fs-base); letter-spacing: 0; color: var(--teal-700); }
.stat p { margin: 12px 0 0; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-2); }
.stat img { align-self: flex-end; width: 96px; height: 96px; margin: auto -8px -6px 0; }
.art-quote { margin: 36px 0 0; padding: 30px 36px 30px 42px; border-radius: var(--radius-m); background: var(--accent-soft); box-shadow: inset 6px 0 0 var(--accent); }
.art-quote p { margin: 0; font: 600 calc(var(--art-fs) + 4px)/1.35 var(--font-h); color: var(--ink); }
.art-quote cite { display: block; margin-top: 14px; font-weight: 400; font-style: normal; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.tag { display: inline-block; margin: 0 6px 4px 0; padding: 5px 14px; border-radius: var(--radius-chip); background: var(--gray-2); color: var(--ink-2); font: 600 var(--fs-sm)/1.2 var(--font-h); }
.tag--ai { background: var(--accent-soft); color: var(--accent-strong); }

/* ---- квиз-игра ---- */
.quiz { margin-top: 72px; padding: clamp(24px, calc(3*var(--vw)), 52px); border-radius: var(--radius-l); background: linear-gradient(160deg, var(--teal-100), #fff 70%); box-shadow: var(--shadow-card); scroll-margin-top: 150px; }
.quiz__k { margin: 0; font: 700 var(--fs-sm)/1 var(--font-h); color: var(--teal-700); text-transform: uppercase; letter-spacing: .06em; }
.art__body .quiz h2 { margin-top: 12px; }
.quiz__lead { margin: 14px 0 0; font-size: var(--art-fs); line-height: var(--art-lh); color: var(--ink-2); }
.quiz__bar { height: 8px; margin: 28px 0; border-radius: var(--radius-chip); background: rgba(202,183,254,.3); overflow: hidden; }
.quiz__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); transition: width .35s var(--ease-out); }
.quiz__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 600 var(--fs-sm)/1.2 var(--font-h); color: var(--ink-2); }
.quiz__saved { color: var(--teal-700); }
.quiz__msg { max-width: 640px; margin-top: 18px; padding: 20px 24px; border-radius: 6px var(--radius-s) var(--radius-s) var(--radius-s); background: #fff; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.quiz__meta { margin: 0; font-size: var(--fs-sm); color: var(--muted-ui); }
.quiz__meta b { color: var(--teal-700); }
.quiz__text { margin: 8px 0 0; font: 600 calc(var(--art-fs) + 2px)/1.35 var(--font-h); color: var(--ink); }
.quiz__opts { display: grid; gap: 12px; margin-top: 22px; }
.quiz__opt { min-height: 60px; padding: 14px 24px; border: 2px solid var(--line-h); border-radius: var(--radius-s); background: #fff; font: 600 var(--fs-base)/1.35 var(--font-h); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s var(--ease-out); }
.quiz__opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(4px); }
.quiz__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.quiz__opt:disabled { cursor: default; opacity: .55; }
.quiz__opt.is-good, .quiz__opt.is-best { opacity: 1; border-color: var(--teal-500); background: var(--teal-50); }
.quiz__opt.is-mid { opacity: 1; border-color: var(--accent-mid); background: var(--accent-soft); }
.quiz__opt.is-bad { opacity: 1; border-color: var(--err); background: #fff; }
.quiz__why { margin-top: 18px; padding: 20px 24px; border-radius: var(--radius-s); background: #fff; border: 1px solid var(--line); animation: quizIn .3s var(--ease-out); }
.quiz__why b { font: 700 var(--fs-lg)/1.2 var(--font-h); }
.quiz__why.is-good b { color: var(--teal-700); }
.quiz__why.is-mid b { color: var(--accent-strong); }
.quiz__why.is-bad b { color: var(--err); }
.quiz__why p { margin: 8px 0 16px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-2); }
@keyframes quizIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz__why { animation: none; } .quiz__bar i { transition: none; } }
.quiz__result { text-align: center; padding: 10px 0 6px; }
.quiz__score { margin: 0; font: 700 96px/1 var(--font-h); letter-spacing: -.04em; color: var(--teal-800); }
.quiz__score-l { margin: 4px 0 0; font-size: var(--fs-base); color: var(--ink-2); }
.quiz__result h3 { margin-top: 18px; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.quiz__result p:last-child { max-width: 620px; margin: 12px auto 0; font-size: var(--art-fs); line-height: var(--art-lh); color: var(--ink-2); }
.quiz__form { max-width: 620px; margin: 28px auto 0; }
.quiz__gift { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-2); }
.quiz__gift b { color: var(--ink); }

/* ---- лид-форма вместо бланка ---- */
.offer { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; margin-top: 64px; padding: clamp(24px, calc(3*var(--vw)), 48px); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--teal-700), var(--teal-900)); scroll-margin-top: 150px; }
.offer__k { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font: 700 var(--fs-sm)/1 var(--font-h); }
.offer h3 { color: #fff; font-size: var(--fs-h3); line-height: 38px; }
.offer__txt p { margin: 14px 0 0; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-dark); }
.offer__txt ul { margin: 18px 0 0; padding-left: 22px; color: #fff; }
.offer__txt li { margin-top: 8px; font-size: var(--fs-base); line-height: var(--lh-base); color: #fff; }

.lf .form__consent span { font-size: var(--fs-xs); line-height: 1.45; }
.lf .form__consent a { color: var(--accent); font-weight: 600; }
.lf__captcha { padding: 12px 16px; border: 1px dashed var(--line-h); border-radius: var(--radius-xs); font-size: var(--fs-xs); color: var(--muted-ui); }
.lf__msg { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.lf__msg:empty { display: none; }
.lf__msg.is-ok { color: var(--teal-700); }
.lf__msg.is-bad { color: var(--err); }

/* ---- cookie ---- */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 18px; max-width: 640px; padding: 18px 22px; border-radius: var(--radius-s); background: #fff; box-shadow: 0 20px 46px rgba(0,57,58,.18); border: 1px solid var(--line); }
.cookie p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.cookie a { color: var(--accent); }
.cookie .btn { flex: none; }

/* ---- первый экран v2: обложка + форма (как у ИМО: форма справа от заголовка) ---- */
.art-hero__grid { grid-template-columns: minmax(0,1fr) 520px; gap: 32px; align-items: stretch; }
.art-hero__cover { position: relative; padding: clamp(28px, calc(3.2*var(--vw)), 60px); padding-bottom: 150px; border-radius: var(--radius-hero); background: var(--teal-100); overflow: hidden; }
.art-hero__cover .art-lead { max-width: 900px; }
.art-hero__ill { position: absolute; right: 36px; bottom: 20px; width: 150px; height: 150px; }
.art-meta a { padding: 8px 16px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.art-meta a:hover { background: var(--accent-bright); }
.art-meta span { background: #fff; }
.art-hero__form { padding: clamp(24px, calc(2.4*var(--vw)), 44px); border-radius: var(--radius-hero); background: #fff; box-shadow: var(--shadow-dialog); scroll-margin-top: 150px; }
.art-hero__form .form { padding: 0; box-shadow: none; gap: 14px; }
.art-hero__form-k { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font: 700 var(--fs-sm)/1 var(--font-h); }
.art-hero__form-h { margin-bottom: 22px; font-size: var(--fs-h4) !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
.td__kicker { margin: 0 0 12px; font: 700 var(--fs-sm)/1 var(--font-h); color: var(--teal-700); text-transform: uppercase; letter-spacing: .06em; }
#faq .faq { max-width: 1170px; }

/* Крупнее мелкого текста главной: на 1181–1599 он уменьшается zoom до ~12 px. */
.quiz__opt, .quiz__why p, .quiz__gift { font-size: calc(var(--art-fs) - 1px); line-height: 1.4; }
.quiz__top, .quiz__meta { font-size: calc(var(--art-fs) - 4px); }
.tbl, .art-cards li, .stat p, .offer__txt p, .offer__txt li, .quiz-teaser > span:not(.btn):not(.quiz-teaser__k) { font-size: calc(var(--art-fs) - 2px); line-height: 1.45; }
.lf .form__consent span, .lf__captcha { font-size: max(13px, calc(var(--art-fs) - 7px)); }
.lf__msg, .art-quote cite, .crumbs, .art-meta span { font-size: max(13px, calc(var(--art-fs) - 5px)); }

@media (max-width: 1180px) {
  .art__grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .art__side { display: none; }
  .art__body { max-width: none; }
  :root { --art-fs: 18px; --art-lh: 28px; }
  .art__body h2 { margin-top: 56px; font-size: 34px; line-height: 38px; }
  .art-hero__grid { grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; }
  .art-hero__cover { border-radius: var(--radius-l); padding-bottom: 110px; }
  .art-hero__ill { width: 96px; height: 96px; right: 20px; bottom: 12px; }
  .art-hero__form { border-radius: var(--radius-l); }
  .quiz-teaser { max-width: 520px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .offer { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .cookie { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; }
  .art-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  :root { --art-fs: 16px; --art-lh: 25px; }
  .art-cards { grid-template-columns: minmax(0,1fr); }
  .art__body h2 { margin-top: 44px; font-size: 26px; line-height: 30px; }
  .tbl th, .tbl td { padding: 12px 14px; font-size: 15px; line-height: 21px; }
  .tbl { min-width: 520px; }
  .art-steps li { padding-left: 56px; }
  .art-steps li::before { width: 40px; height: 40px; font-size: 17px; }
  .offer h3, .quiz__result h3 { font-size: 22px; line-height: 27px; }
  .stat-grid { grid-template-columns: minmax(0,1fr); }
  .stat { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 14px; padding: 20px; }
  .stat b { font-size: 44px; }
  .stat p { flex: 1 1 100%; margin-top: 6px; padding-right: 76px; }
  .stat img { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 64px; margin: 0; }
  .quiz__score { font-size: 64px; }
  .quiz__opt { padding: 12px 16px; font-size: 16px; }
  .quiz-teaser { padding: 24px; }
  .quiz-teaser img { width: 72px; height: 72px; top: -28px; }
  .art-quote { padding: 20px; }
  .art-lead { font-size: 17px; line-height: 26px; }
  .art-cta .btn, .lf .btn, .quiz-teaser .btn, .quiz__next { width: 100%; justify-self: stretch; text-align: center; }
}

/* Поле почты: на главной его не было, оформляем так же, как имя и телефон. */
.form input[type=email] { width: 100%; height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--teal-50); font: inherit; color: var(--ink); }
.offer__txt .offer__k { margin: 0 0 14px; color: var(--accent-strong); }
@media (max-width: 640px) {
  .art-cards .card { padding: 22px; }
  .art-cards .card--tall .card__ico { width: 64px; height: 64px; margin: 6px -4px 0 0; }
}

/* Документы (политика, согласие): одна колонка без оглавления. */
.art--doc .art__body { max-width: 980px; }
.art--doc .art__body h2 { margin-top: 48px; font-size: 36px; line-height: 40px; }
.art-list { margin: 16px 0 0; padding-left: 26px; }
.art-list li { margin-top: 8px; }
@media (max-width: 640px) { .art--doc .art__body h2 { margin-top: 36px; font-size: 24px; line-height: 28px; } }
.art-hero__form { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1181px) { .art-hero__cover h1 { font-size: 62px; line-height: 66px; } }

/* ---- иллюстрации статьи (gpt-image, палитра макета) ---- */
.art-hero__cover { padding-right: 300px; padding-bottom: clamp(28px, calc(3.2*var(--vw)), 60px); }
.art-hero__ill { right: 10px; bottom: 10px; width: 300px; height: auto; }
.art-float { float: right; width: 240px; height: auto; margin: -10px 0 10px 24px; }
.sect__head + .art-float, .art__body .tbl-wrap { clear: both; }
.quiz__head { position: relative; padding-right: 200px; }
.quiz__ill { position: absolute; right: -10px; top: -20px; width: 190px; height: auto; }
@media (max-width: 1180px) {
  .art-hero__cover { padding-right: clamp(28px, calc(3.2*var(--vw)), 60px); padding-bottom: 210px; }
  .art-hero__ill { width: 200px; }
}
@media (max-width: 640px) {
  .art-hero__cover { padding-bottom: 170px; }
  .art-hero__ill { width: 160px; }
  .art-float { width: 120px; margin: 0 0 6px 12px; }
  .quiz__head { padding-right: 0; padding-top: 96px; }
  .quiz__ill { width: 110px; right: -6px; top: -16px; }
}
@media (min-width: 1181px) {
  .art-hero__grid { grid-template-columns: minmax(0,1fr) 470px; }
  .art-hero__cover { padding-right: 250px; }
  .art-hero__ill { width: 250px; right: 6px; bottom: 6px; }
  .art-hero__cover .art-meta { margin-right: 0; }
}
/* display:flex у плашки перебивал атрибут hidden — «Понятно» не закрывало её. */
.cookie[hidden] { display: none !important; }

/* ---- список статей /blog/ ---- */
.blog-list { padding-top: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.blog-card { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: var(--radius-l); background: var(--teal-100); color: var(--ink); text-decoration: none; transition: transform .18s var(--ease-out); }
.blog-card:hover { transform: translateY(-4px); text-decoration: none; }
.blog-card img { justify-self: end; width: 200px; height: auto; }
.blog-card__k { justify-self: start; padding: 6px 14px; border-radius: var(--radius-chip); background: #fff; color: var(--teal-800); font: 600 max(13px, calc(var(--art-fs) - 6px))/1 var(--font-h); }
.blog-card b { font: 700 var(--fs-h4)/1.2 var(--font-h); }
.blog-card > span:last-child { font-size: calc(var(--art-fs) - 2px); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 1180px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: minmax(0,1fr); } .blog-card img { width: 140px; } }

/* Прямой ответ под вопросным H2 — его берут в ответы ИИ-поиска. */
.art__body > .art-answer { margin-top: 18px; padding: 20px 24px; border-radius: var(--radius-s); background: var(--gray); color: var(--ink); }
/* Только десктоп: правило стоит ниже мобильных и раньше затирало их 26/30 —
   на телефоне H2 шёл десктопным кеглем по слову в строке. */
@media (min-width: 1181px) { .art__body h2 { font-size: 44px; line-height: 48px; } }

/* Нумерованный список ошибок под вопросным H2. */
.err-list { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: er; display: grid; gap: 12px; }
.err-list li { position: relative; counter-increment: er; padding: 18px 22px 18px 76px; border-radius: var(--radius-s); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.err-list li::before { content: counter(er); position: absolute; left: 20px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font: 700 20px/1 var(--font-h); }
.err-list b { display: block; font: 700 calc(var(--art-fs) + 1px)/1.3 var(--font-h); color: var(--ink); }
.err-list span { display: block; margin-top: 4px; font-size: calc(var(--art-fs) - 2px); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 640px) { .err-list li { padding: 16px 16px 16px 62px; } .err-list li::before { left: 14px; width: 34px; height: 34px; font-size: 16px; } }

/* ---- карточки шаблонов с копированием ---- */
.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.tpl { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: var(--radius-m); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.tpl__k { margin: 0; font: 700 max(13px, calc(var(--art-fs) - 6px))/1.2 var(--font-h); color: var(--teal-700); text-transform: uppercase; letter-spacing: .04em; }
.tpl__t { margin: 0; flex: 1; padding: 14px 16px; border-radius: 6px var(--radius-s) var(--radius-s) var(--radius-s); background: var(--teal-50); font-size: calc(var(--art-fs) - 2px); line-height: 1.45; color: var(--ink); }
.tpl__copy { align-self: flex-start; min-height: 40px; padding: 8px 18px; border: 1.5px solid var(--accent); border-radius: var(--radius-chip); background: #fff; color: var(--accent-strong); font: 600 max(14px, calc(var(--art-fs) - 5px))/1 var(--font-h); cursor: pointer; }
.tpl__copy:hover { background: var(--accent-soft); }
.tpl__copy:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tpl__copy.is-done { border-color: var(--teal-500); color: var(--teal-700); background: var(--teal-50); }
@media (max-width: 900px) { .tpl-grid { grid-template-columns: minmax(0,1fr); } }
/* Вертикальные иллюстрации выше квадратных: запас под них на узких экранах. */
@media (max-width: 1180px) { .art-hero__cover { padding-bottom: 250px; } .art-hero__ill { width: auto; height: 220px; } }
@media (max-width: 640px) { .art-hero__cover { padding-bottom: 196px; } .art-hero__ill { width: auto; height: 170px; } }

/* Выноска-CTA с главной: её margin и выравнивание не рассчитаны на поток статьи. */
.art__body .art-cta { margin-top: 32px; margin-bottom: 8px; }
@media (max-width: 640px) { .art-quote { padding: 20px 20px 20px 26px; } .art__body .art-cta { margin-top: 24px; } }

/* ---- подзаголовок H3 внутри статьи ---- */
.art__body .art-h3 { margin: 44px 0 0; font: 700 calc(var(--art-fs) + 8px)/1.25 var(--font-h); letter-spacing: -.02em; color: var(--ink); scroll-margin-top: 150px; }
.tbl--3 td:first-child { width: 30%; }
.tbl--3 td:nth-child(2) { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl a { color: var(--accent); font-weight: 600; }

/* ---- калькулятор потерь от неявок ---- */
.ncalc { margin-top: 30px; padding: clamp(24px, calc(2.6*var(--vw)), 44px); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--teal-700), var(--teal-900)); color: #fff; scroll-margin-top: 150px; }
.art__body .ncalc h3 { margin: 0; color: #fff; font-size: var(--fs-h4); line-height: 1.2; }
.ncalc__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; margin-top: 24px; }
.ncalc__in { display: grid; gap: 14px; }
.ncalc__in label { display: grid; gap: 6px; font: 600 calc(var(--art-fs) - 4px)/1.3 var(--font-h); color: var(--ink-dark); }
.ncalc__in input, .ncalc__in select { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius-s); background: #fff; font: 600 calc(var(--art-fs) - 2px)/1 var(--font-h); color: var(--ink); }
.ncalc__in input:focus-visible, .ncalc__in select:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 1px; }
.ncalc__out { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--radius-m); background: #fff; color: var(--ink); }
.ncalc__out p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px dashed var(--line-h); font-size: calc(var(--art-fs) - 3px); line-height: 1.35; color: var(--ink-2); }
.ncalc__out p:last-child { border-bottom: 0; }
.ncalc__out b { flex: none; font: 700 calc(var(--art-fs) + 2px)/1.2 var(--font-h); color: var(--ink); white-space: nowrap; }
.ncalc__out .ncalc__loss { flex-direction: column; align-items: stretch; gap: 6px; padding: 18px 20px; border: 0; border-radius: var(--radius-s); background: linear-gradient(90deg, var(--grad-a-h), var(--grad-b-h)); color: #fff; }
.ncalc__out .ncalc__loss b { font-size: 40px; line-height: 1.1; color: #fff; }
.ncalc__src { margin: 20px 0 0; font-size: max(13px, calc(var(--art-fs) - 6px)); line-height: 1.5; color: var(--ink-dark); }
@media (max-width: 900px) { .ncalc__grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) { .ncalc__out { padding: 16px; } .ncalc__out .ncalc__loss b { font-size: 30px; } .tbl--3 td:nth-child(2) { white-space: normal; } }
/* Текст выноски-CTA — кеглем статьи: на 1181–1599 главная уменьшает его до ~11 px. */
.art__body .art-cta p { font-size: calc(var(--art-fs) - 2px); line-height: 1.45; }

/* ---- история из жизни ---- */
.art-story { position: relative; margin: 32px 0 0; padding: 32px 36px; border-radius: var(--radius-l); background: linear-gradient(135deg, var(--teal-700), var(--teal-900)); color: #fff; scroll-margin-top: 150px; }
.art-story::before { content: '“'; position: absolute; right: 28px; top: -6px; font: 800 160px/1 var(--font-h); color: var(--accent-bright); opacity: .35; pointer-events: none; }
.art-story__k { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font: 700 max(13px, calc(var(--art-fs) - 6px))/1 var(--font-h); }
.art-story blockquote { margin: 0; }
.art-story blockquote p { margin: 0; font: 600 calc(var(--art-fs) + 4px)/1.4 var(--font-h); color: #fff; }
.art-story figcaption { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(215,246,241,.25); font-size: calc(var(--art-fs) - 2px); line-height: 1.45; color: var(--ink-dark); }
.art-story figcaption b { display: block; margin-bottom: 4px; color: #fff; }
@media (max-width: 640px) { .art-story { padding: 22px 20px; } .art-story::before { font-size: 110px; right: 14px; } }

/* Иллюстрация с обтеканием — поверх подложки ответа: анимация появления (translate)
   поднимает .art-answer в свой слой, и фон ответа закрывал картинку. */
.art-float { position: relative; z-index: 2; }