/* ============================================================================
   blog.css — блог «Реплики» (/blog/ + /blog/article.html).

   Держит бренд главной и партнёрской страниц (Onest, синий #3B82F6, тёмные
   секции #15161A, тёплые нейтрали, bento-скругления), но у блога своя задача:
   картинок нет — весь ритм задаётся типографикой, размером плитки и цветным
   акцентом по рубрике. Шапка/футер/кнопки — копия шелла partners.css, чтобы
   страница была самодостаточной и не тянула 34 КБ чужих секций.
   ============================================================================ */

/* ------------------------------- токены ----------------------------------- */
:root{
  --highlight:#3B82F6; --highlight-ink:#FFFFFF; --lime:#3B82F6; --lime-deep:#2F6FE0;
  --accent:#5B5BD6;
  --mint:#DFF3E4; --mint-ink:#15A06A;
  --bg:#F3F4F6; --surface:#FFFFFF; --surface-warm:#FFFFFF;
  --tile-blue:#EEF4FE; --tile-soft:#F7F8FA;
  --ink:#16181C; --ink-muted:#5C5C57; --border:#E5E7EB; --border-strong:#D1D5DB;
  --danger:#E0584F; --coral:#E8553A; --terra:#F15329; --onyx:#0E0E0E;
  --dark-bg:#15161A; --dark-2:#1D1F25; --on-dark:#FFFFFF;
  --font-display:'Onest',Arial,system-ui,sans-serif;
  --font-body:'Onest',Arial,system-ui,sans-serif; --font-sans:'Onest',Arial,system-ui,sans-serif;
  --radius-sm:12px; --radius:14px; --radius-btn:999px; --radius-pill:999px;
  --radius-tile:20px; --radius-bento:24px; --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(22,21,15,.04), 0 10px 30px rgba(22,21,15,.06);
  --shadow-hover:0 2px 4px rgba(22,21,15,.05), 0 22px 46px rgba(22,21,15,.12);
  --gap:14px;
  /* ширина колонки чтения — 68–72 знака, как в книжной вёрстке */
  --measure:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(96px + var(--offer-h,0px))}
body{margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-460px 0}100%{background-position:460px 0}}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ------------------------------ типографика ------------------------------- */
.eyebrow{display:inline-flex; align-items:center; gap:9px; padding:7px 14px;
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
  font:700 12.5px/1 var(--font-sans); letter-spacing:.02em; color:var(--ink-muted);}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 20%, transparent);}
.h1{font:500 clamp(32px,4.7vw,58px)/1.08 var(--font-display); letter-spacing:-.025em; color:var(--ink); margin:0;}
.h2{font:500 clamp(26px,3.2vw,42px)/1.14 var(--font-display); letter-spacing:-.025em; color:var(--ink); margin:0;}
.lead{font:400 clamp(16px,1.4vw,19px)/1.58 var(--font-sans); color:var(--ink-muted); margin:0;}
.muted{color:var(--ink-muted);}
.hl-ink{color:var(--highlight);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.hidden{display:none!important;}

.wrap{max-width:1240px; margin:0 auto;}
.section{padding:clamp(48px,6vw,88px) clamp(16px,5vw,40px);}
.sec-dark{background:var(--dark-bg); color:var(--on-dark);}

/* -------------------------------- кнопки ---------------------------------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:var(--radius-btn);
  text-decoration:none; font:700 16px/1 var(--font-sans); cursor:pointer; border:none;
  transition:background .15s ease, transform .15s ease, filter .15s ease, border-color .15s ease;}
.btn-dark{background:var(--ink); color:var(--on-dark);}
.btn-dark:hover{background:#2c2a23; transform:translateY(-1px);}
.btn-blue{background:var(--lime); color:var(--highlight-ink);}
.btn-blue:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--border-strong);}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface);}
.btn.on-dark.btn-ghost{color:#fff; border-color:rgba(255,255,255,.28);}
.btn.on-dark.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.btn.sm{padding:11px 20px; font-size:15px;}
.btn:active{transform:translateY(0);}

/* --------------------------------- шапка ---------------------------------- */
.hdr{position:sticky; top:var(--offer-h,0px); z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border); padding:var(--hpad,14px) clamp(16px,4vw,40px);
  transition:padding .22s ease;}
.hdr-in{max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:24px;}
.brandmark{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:0 0 auto;}
.brandmark span{font:800 21px/1 var(--font-sans); letter-spacing:-.02em;}
.nav{margin-left:auto; display:flex; align-items:center; gap:6px;}
.nav-links{display:flex; align-items:center; gap:2px; margin-right:8px;}
.nav-links a{padding:8px 13px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink);
  font:500 14px/1 var(--font-sans); transition:color .15s ease;}
.nav-links a:hover{color:var(--ink-muted);}
.nav-links a.is-current{color:var(--highlight);}
.nav-tel{display:flex; align-items:center; gap:7px; padding:9px 15px; border:1.5px solid var(--mint-ink);
  border-radius:var(--radius-pill); text-decoration:none; color:var(--mint-ink);
  font:700 14px/1 var(--font-sans); flex:0 0 auto; white-space:nowrap; transition:background .15s ease;}
.nav-tel:hover{background:var(--mint);}
.burger{margin-left:6px; width:42px; height:42px; border:1px solid var(--border-strong); background:var(--surface);
  border-radius:var(--radius-sm); cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center;}
.nav-mobile{max-width:1240px; margin:14px auto 2px; display:none; flex-direction:column; gap:2px;}
.nav-mobile.open{display:flex;}
.nav-mobile a{padding:13px 12px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink);
  font:600 17px/1 var(--font-sans); border-bottom:1px solid var(--border);}
.nav-mobile a:last-child{border-bottom:none;}
.only-mobile{display:none;}
@media(max-width:900px){ .only-desktop{display:none!important;} .only-mobile{display:flex;} }

/* ============================ ЛЕНТА /blog/ ================================= */

/* --- герой ленты: точечный фон как на партнёрском первом экране --- */
.blog-hero{padding:clamp(38px,5vw,70px) clamp(16px,5vw,40px) clamp(26px,3vw,40px);
  background-image:radial-gradient(circle, rgba(14,14,14,.05) 1.1px, transparent 1.1px);
  background-size:26px 26px; border-bottom:1px solid var(--border);}
.blog-hero .h1{max-width:15ch;}
.blog-hero .lead{margin:18px 0 0; max-width:56ch;}
.blog-hero-row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.blog-facts{display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap;}
.blog-fact b{display:block; font:600 clamp(28px,3.2vw,40px)/1 var(--font-sans);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.blog-fact span{display:block; margin:8px 0 0; font:500 13.5px/1.4 var(--font-sans); color:var(--ink-muted); max-width:16ch;}

/* --- панель рубрик --- */
.tagbar{position:sticky; top:calc(var(--offer-h,0px) + 66px); z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border); padding:12px clamp(16px,5vw,40px);}
.tagbar-in{max-width:1240px; margin:0 auto; display:flex; gap:12px; align-items:center; min-width:0;}
.tags{display:flex; gap:8px; align-items:center; min-width:0; flex:1 1 auto;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;}
.tags::-webkit-scrollbar{display:none;}

/* --- поиск --- */
.search{position:relative; flex:0 0 clamp(200px,22vw,290px); display:flex; align-items:center;}
.search-ic{position:absolute; left:13px; color:var(--ink-muted); pointer-events:none;}
.search input{width:100%; height:38px; padding:0 34px 0 36px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font:500 14px/1 var(--font-sans); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;}
.search input::placeholder{color:var(--ink-muted); font-weight:500;}
.search input:hover{border-color:var(--border-strong);}
.search input:focus{border-color:var(--highlight);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--highlight) 18%, transparent);}
/* нативный крестик Safari/Chrome убираем — свой умеет ещё и сбрасывать состояние */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{-webkit-appearance:none; appearance:none;}
.search-clear{position:absolute; right:6px; width:26px; height:26px; border:none; padding:0;
  border-radius:50%; background:transparent; color:var(--ink-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;}
.search-clear:hover{background:var(--tile-soft); color:var(--ink);}
@media(max-width:720px){
  .tagbar-in{flex-direction:column; align-items:stretch; gap:10px;}
  .search{flex:0 0 auto;}
}

/* --- строка результатов поиска --- */
.feed-status{margin:0 0 clamp(20px,2.4vw,28px); display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap; font:500 15px/1.5 var(--font-sans); color:var(--ink-muted);}
.feed-status b{color:var(--ink); font-weight:600;}
.feed-status button{border:none; background:none; padding:0; cursor:pointer; color:var(--highlight);
  font:500 15px/1.5 var(--font-sans); text-decoration:underline; text-underline-offset:3px;}
.feed-status button:hover{color:var(--lime-deep);}

/* подсветка совпадений */
mark{background:color-mix(in srgb, var(--highlight) 22%, transparent); color:inherit;
  border-radius:3px; padding:0 2px; margin:0 -2px;}
.pcard--feat mark{background:color-mix(in srgb, var(--highlight) 45%, transparent); color:#fff;}

/* фрагмент из тела статьи, когда совпадение нашлось только там */
.pcard-snippet{margin:12px 0 0; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--tile-soft); border:1px solid var(--border);
  font:400 13.5px/1.55 var(--font-sans); color:var(--ink-muted);}
.pcard--quote .pcard-snippet{background:var(--surface);}
.tag{flex:0 0 auto; padding:8px 15px; border-radius:var(--radius-pill); border:1px solid var(--border);
  background:var(--surface); color:var(--ink-muted); font:600 13.5px/1 var(--font-sans);
  cursor:pointer; white-space:nowrap; transition:border-color .15s ease, color .15s ease, background .15s ease;}
.tag:hover{border-color:var(--border-strong); color:var(--ink);}
.tag[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff;}
.tag i{font-style:normal; opacity:.55; margin-left:6px; font-variant-numeric:tabular-nums;}

/* --- сетка карточек --- */
.post-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,20px); align-items:stretch;}
.post-grid > *{min-width:0;}

.pcard{grid-column:span 4; position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-bento);
  padding:clamp(22px,2.3vw,30px); text-decoration:none; color:inherit; overflow:hidden;
  animation:fadeUp .5s cubic-bezier(.22,.61,.36,1) both;
  transition:transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .24s ease;}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-hover);
  border-color:color-mix(in srgb, var(--highlight) 45%, var(--border));}
/* цветная «шапка» рубрики вместо картинки */
.pcard::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--cat, var(--highlight)); opacity:.9; transform:scaleX(.18); transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);}
.pcard:hover::before{transform:scaleX(1);}

.pcard-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pcard-cat{display:inline-flex; align-items:center; gap:7px; font:700 12px/1 var(--font-sans);
  letter-spacing:.05em; text-transform:uppercase; color:var(--cat, var(--highlight));}
.pcard-cat::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.pcard-title{margin:16px 0 0; font:500 clamp(19px,1.55vw,23px)/1.26 var(--font-display);
  letter-spacing:-.02em; color:var(--ink);}
.pcard-excerpt{margin:12px 0 0; font:400 15px/1.6 var(--font-sans); color:var(--ink-muted);}
.pcard-meta{margin:auto 0 0; padding:20px 0 0; display:flex; align-items:center; gap:10px;
  font:500 13px/1 var(--font-sans); color:var(--ink-muted);}
.pcard-meta .sep{opacity:.4;}
.pcard-arrow{margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  color:var(--ink); transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}
.pcard:hover .pcard-arrow{background:var(--ink); border-color:var(--ink); color:#fff; transform:translateX(2px);}

/* featured — широкая плитка на всю строку, крупная типографика */
.pcard--feat{grid-column:span 12; flex-direction:row; align-items:stretch; gap:clamp(28px,4vw,64px);
  padding:clamp(28px,3.2vw,44px); background:var(--dark-bg); border-color:var(--dark-bg); color:#fff;}
.pcard--feat:hover{border-color:var(--dark-bg); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 26px 54px rgba(0,0,0,.34);}
.pcard--feat .pcard-title{color:#fff; font-size:clamp(26px,3.1vw,40px); line-height:1.12; max-width:19ch;}
.pcard--feat .pcard-excerpt{color:rgba(255,255,255,.72); font-size:16.5px; max-width:52ch;}
.pcard--feat .pcard-meta{color:rgba(255,255,255,.6);}
.pcard--feat .pcard-arrow{border-color:rgba(255,255,255,.25); color:#fff;}
.pcard--feat:hover .pcard-arrow{background:#fff; border-color:#fff; color:var(--ink);}
.pcard--feat::before{display:none;}
.pcard-feat-main{flex:1 1 auto; display:flex; flex-direction:column;}
.pcard-feat-side{flex:0 0 clamp(200px,20vw,268px); display:flex; flex-direction:column; justify-content:center;
  gap:14px; padding-left:clamp(28px,4vw,64px); border-left:1px solid rgba(255,255,255,.14);}
/* В боковой колонке — цитата самой статьи, а не абстрактная цифра:
   в ленте без картинок это единственный «крупный план» на всю страницу. */
.pcard-feat-side .feat-quote{font:500 clamp(17px,1.55vw,20px)/1.45 var(--font-display);
  letter-spacing:-.015em; color:#fff; position:relative;}
.pcard-feat-side .feat-quote::before{content:"«";}
.pcard-feat-side .feat-quote::after{content:"»";}
.pcard-feat-side .feat-read{font:500 13.5px/1.4 var(--font-sans); color:rgba(255,255,255,.55);}

/* Акцентная «цитатная» карточка — каждая 4-я. Размер тот же, что у обычной:
   плитка другой ширины красиво смотрится ровно на одном брейкпоинте, а на
   остальных оставляет дыру в сетке. Поэтому акцент даём цветом и врезкой. */
.pcard--quote{background:var(--tile-blue);
  border-color:color-mix(in srgb, var(--highlight) 22%, var(--border));}
.pcard--quote .pcard-pull{background:var(--surface);}

.pcard-pull{margin:18px 0 0; padding:16px 20px; border-left:3px solid var(--highlight);
  background:var(--surface); border-radius:0 var(--radius) var(--radius) 0;
  font:500 15.5px/1.55 var(--font-sans); color:var(--ink);}

@media(max-width:1080px){
  .pcard{grid-column:span 6;}
}
@media(max-width:860px){
  .pcard--feat{flex-direction:column; gap:26px;}
  .pcard-feat-side{flex:0 0 auto; padding:22px 0 0; border-left:none; border-top:1px solid rgba(255,255,255,.14);
    gap:12px;}
}
@media(max-width:660px){
  .pcard{grid-column:span 12;}
  .tagbar{top:calc(var(--offer-h,0px) + 62px);}
}

/* --- догрузка: скелетоны, сентинел, кнопка --- */
.skel{grid-column:span 4; border-radius:var(--radius-bento); border:1px solid var(--border);
  background:var(--surface); padding:clamp(22px,2.3vw,30px); pointer-events:none;}
.skel i{display:block; height:12px; border-radius:6px; margin-bottom:12px;
  background:linear-gradient(90deg, #EFF0F2 25%, #F7F8FA 37%, #EFF0F2 63%);
  background-size:920px 100%; animation:shimmer 1.25s linear infinite;}
.skel i:nth-child(1){width:34%; height:10px; margin-bottom:22px;}
.skel i:nth-child(2){width:92%; height:19px;}
.skel i:nth-child(3){width:70%; height:19px; margin-bottom:22px;}
.skel i:nth-child(4){width:100%;}
.skel i:nth-child(5){width:82%;}
.skel i:nth-child(6){width:44%; margin-top:24px; margin-bottom:0;}
@media(max-width:1080px){ .skel{grid-column:span 6;} }
@media(max-width:660px){ .skel:nth-child(n+2){display:none;} .skel{grid-column:span 12;} }
@media(prefers-reduced-motion:reduce){ .skel i{animation:none;} .pcard{animation:none;} }

.feed-foot{margin:clamp(34px,4vw,56px) 0 0; display:flex; flex-direction:column; align-items:center; gap:16px;}
.feed-end{display:inline-flex; align-items:center; gap:10px; font:500 14.5px/1 var(--font-sans); color:var(--ink-muted);}
.feed-end::before,.feed-end::after{content:""; width:34px; height:1px; background:var(--border-strong);}
.feed-empty{grid-column:span 12; padding:clamp(40px,6vw,72px) 24px; text-align:center;
  border:1px dashed var(--border-strong); border-radius:var(--radius-bento); color:var(--ink-muted);
  font:500 16px/1.5 var(--font-sans);}
#feed-sentinel{height:1px;}

/* ========================= СТАТЬЯ /blog/article.html ======================= */

/* прогресс чтения */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:80;
  background:linear-gradient(90deg, var(--highlight), var(--accent)); transition:width .1s linear;}

.art{padding:clamp(30px,3.6vw,54px) clamp(16px,5vw,40px) 0;}
.art-in{max-width:1240px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) 260px; gap:clamp(28px,4vw,64px); align-items:start;}
.art-in > *{min-width:0;}
@media(max-width:1040px){ .art-in{grid-template-columns:minmax(0,1fr);} .art-aside{display:none;} }

.crumbs{display:flex; align-items:center; gap:8px; font:500 13.5px/1 var(--font-sans); color:var(--ink-muted); flex-wrap:wrap;}
.crumbs a{color:var(--ink-muted); text-decoration:none;}
.crumbs a:hover{color:var(--ink);}
.crumbs .sep{opacity:.45;}

.art-head{max-width:var(--measure); padding-bottom:clamp(24px,3vw,34px); border-bottom:1px solid var(--border);}
.art-head .h1{margin:18px 0 0; font-size:clamp(29px,3.9vw,48px); line-height:1.1;}
.art-head .lead{margin:18px 0 0; font-size:clamp(17px,1.5vw,20px);}
.art-meta{margin:24px 0 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font:500 14px/1 var(--font-sans); color:var(--ink-muted);}
.art-meta .sep{opacity:.4;}
/* Аватар автора: круг с инициалами, поверх которого ложится фото.
   Нет файла — <img> убирает себя onerror'ом, инициалы остаются видны. */
.avatar{position:relative; width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--tile-blue); color:var(--highlight); font:700 14px/1 var(--font-sans);
  border:1px solid color-mix(in srgb, var(--highlight) 22%, var(--border));}
.avatar i{font-style:normal;}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.art-author{display:flex; align-items:center; gap:11px;}
.art-author b{display:block; font:600 14.5px/1.2 var(--font-sans); color:var(--ink);}
.art-author span{display:block; margin:3px 0 0; font:400 13px/1.2 var(--font-sans); color:var(--ink-muted);}

/* --- оглавление --- */
.art-aside{position:sticky; top:calc(var(--offer-h,0px) + 96px);}
.toc{border-left:2px solid var(--border); padding:2px 0 2px 18px;}
.toc h4{margin:0 0 14px; font:700 11.5px/1 var(--font-sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-muted);}
.toc a{display:block; padding:7px 0; font:500 14px/1.4 var(--font-sans); color:var(--ink-muted);
  text-decoration:none; transition:color .15s ease;}
.toc a:hover{color:var(--ink);}
.toc a.is-active{color:var(--highlight);}
.aside-cta{margin:26px 0 0; padding:20px; border-radius:var(--radius-lg); background:var(--dark-bg); color:#fff;}
.aside-cta b{display:block; font:600 16px/1.3 var(--font-sans);}
.aside-cta p{margin:9px 0 16px; font:400 13.5px/1.5 var(--font-sans); color:rgba(255,255,255,.7);}
.aside-cta .btn{width:100%; justify-content:center; padding:12px 18px; font-size:14.5px;}

/* ------------------------- рендер markdown (.md) --------------------------- */
.md{max-width:var(--measure); padding:clamp(26px,3.2vw,40px) 0 0;
  font:400 clamp(16.5px,1.35vw,18px)/1.72 var(--font-sans); color:var(--ink);}
.md > *:first-child{margin-top:0;}
.md p{margin:0 0 1.15em;}
.md h2{margin:clamp(38px,4vw,58px) 0 16px; font:500 clamp(23px,2.4vw,31px)/1.2 var(--font-display);
  letter-spacing:-.022em; scroll-margin-top:calc(var(--offer-h,0px) + 96px);}
.md h3{margin:clamp(28px,3vw,40px) 0 12px; font:600 clamp(18.5px,1.7vw,22px)/1.3 var(--font-sans);
  letter-spacing:-.015em; scroll-margin-top:calc(var(--offer-h,0px) + 96px);}
.md h4{margin:26px 0 10px; font:700 16.5px/1.4 var(--font-sans);}
.md a{color:var(--highlight); text-decoration:none;
  background-image:linear-gradient(color-mix(in srgb,var(--highlight) 34%,transparent),color-mix(in srgb,var(--highlight) 34%,transparent));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 92%;
  transition:background-size .2s ease, color .15s ease;}
.md a:hover{color:var(--lime-deep); background-size:100% 2px;}
.md strong{font-weight:700; color:var(--ink);}
.md em{font-style:italic;}
.md ul,.md ol{margin:0 0 1.2em; padding-left:0; list-style:none;}
.md li{position:relative; margin:0 0 .6em; padding-left:30px;}
.md ul > li::before{content:""; position:absolute; left:8px; top:.72em; width:7px; height:7px;
  border-radius:50%; background:var(--highlight); opacity:.75;}
.md ol{counter-reset:mdol;}
.md ol > li{counter-increment:mdol;}
.md ol > li::before{content:counter(mdol); position:absolute; left:0; top:.16em; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--tile-blue); color:var(--highlight); font:700 12px/1 var(--font-sans);
  font-variant-numeric:tabular-nums;}
.md li > ul,.md li > ol{margin:.55em 0 0;}
.md blockquote{margin:clamp(26px,3vw,36px) 0; padding:4px 0 4px 26px; border-left:3px solid var(--highlight);
  font:500 clamp(18px,1.7vw,21px)/1.55 var(--font-display); letter-spacing:-.012em; color:var(--ink);}
.md blockquote p:last-child{margin-bottom:0;}
.md blockquote cite{display:block; margin:14px 0 0; font:500 14px/1.4 var(--font-sans);
  font-style:normal; color:var(--ink-muted);}
.md hr{margin:clamp(34px,4vw,52px) 0; border:none; height:1px; background:var(--border);}
.md code{padding:2px 6px; border-radius:6px; background:var(--tile-soft); border:1px solid var(--border);
  font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink);}
.md pre{margin:0 0 1.4em; padding:20px 22px; border-radius:var(--radius-lg); background:var(--dark-bg);
  color:#E8EAED; overflow-x:auto; font:400 14px/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.md pre code{padding:0; border:none; background:none; color:inherit; font-size:inherit;}
.md .md-table{margin:0 0 1.5em; overflow-x:auto; border:1px solid var(--border);
  border-radius:var(--radius-lg); background:var(--surface);}
.md table{width:100%; border-collapse:collapse; font:400 15px/1.5 var(--font-sans);}
.md th,.md td{padding:13px 18px; text-align:left; border-bottom:1px solid var(--border);}
.md th{font:700 12.5px/1.3 var(--font-sans); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-muted); background:var(--tile-soft); white-space:nowrap;}
.md tr:last-child td{border-bottom:none;}
.md td b{font-variant-numeric:tabular-nums;}

/* врезки-колауты */
.callout{margin:clamp(26px,3vw,36px) 0; padding:20px 24px; border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--tile-soft);
  font:400 16px/1.62 var(--font-sans); color:var(--ink);}
.callout p:last-child{margin-bottom:0;}
.callout b.callout-lbl{display:block; margin:0 0 8px; font:700 12px/1 var(--font-sans);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted);}
.callout--tip{background:var(--tile-blue); border-color:color-mix(in srgb,var(--highlight) 22%,var(--border));}
.callout--tip b.callout-lbl{color:var(--highlight);}
.callout--warn{background:#FFF4F1; border-color:color-mix(in srgb,var(--coral) 26%,var(--border));}
.callout--warn b.callout-lbl{color:var(--coral);}

/* ---------- «читайте также» прямо в теле статьи (:::related …) ------------- */
.md-related{margin:clamp(30px,3.4vw,44px) 0; padding:22px 24px 20px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border); position:relative;}
.md-related::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px;
  border-radius:0 3px 3px 0; background:var(--highlight);}
.md-related h5{margin:0 0 14px; font:700 11.5px/1 var(--font-sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-muted);}
.md-related ul{margin:0; padding:0; list-style:none;}
.md-related li{margin:0; padding:0;}
.md-related li + li{margin-top:4px; padding-top:12px; border-top:1px solid var(--border);}
.md-related li::before{display:none;}
.md-related a{display:flex; align-items:center; gap:14px; text-decoration:none; background:none;
  padding:6px 0; color:var(--ink); transition:color .15s ease;}
.md-related a:hover{color:var(--highlight);}
.md-related a .rl-txt{flex:1 1 auto; min-width:0;}
.md-related a b{display:block; font:600 16px/1.35 var(--font-sans); color:inherit;}
.md-related a small{display:block; margin:5px 0 0; font:500 13px/1.3 var(--font-sans); color:var(--ink-muted);}
.md-related a .rl-go{flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-muted);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}
.md-related a:hover .rl-go{background:var(--highlight); border-color:var(--highlight); color:#fff; transform:translateX(2px);}

/* --------------------------- FAQ (:::faq) --------------------------------- */
/* Видимый блок, а не <details>: текст должен читаться и роботом, и человеком
   без клика — из него же генерится разметка FAQPage. */
.md .faq{margin:clamp(34px,4vw,52px) 0 0;}
.md .faq h2{margin-top:0; margin-bottom:18px;}
.md .faq-item{border-top:1px solid var(--border);}
.md .faq-item:last-child{border-bottom:1px solid var(--border);}
.md .faq-item summary{position:relative; list-style:none; cursor:pointer;
  padding:15px 34px 15px 0; font:600 16.5px/1.45 var(--font-sans); letter-spacing:-.01em;
  color:var(--ink); transition:color .15s ease;}
.md .faq-item summary::-webkit-details-marker{display:none;}
.md .faq-item summary:hover{color:var(--highlight);}
/* шеврон вместо нативного треугольника */
.md .faq-item summary::after{content:""; position:absolute; right:6px; top:50%;
  width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--ink-muted);
  border-bottom:2px solid var(--ink-muted); transform:rotate(45deg);
  transition:transform .22s ease, border-color .15s ease;}
.md .faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.md .faq-item summary:hover::after{border-color:var(--highlight);}
.md .faq-a{padding:0 34px 18px 0; margin-top:-2px;
  font-size:.97em; color:var(--ink-muted);}

/* ------------------- запись разговора в тексте (:::listen) ---------------- */
/* Настоящие записи с главной, встроенные прямо в статью: слушать пример
   убедительнее, чем читать про него. Волна декоративная. */
.md .listen{margin:clamp(28px,3.2vw,40px) 0; padding:18px 20px; display:grid;
  grid-template-columns:auto 1fr; gap:14px 16px; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);}
.md .listen-play{flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:none;
  cursor:pointer; background:var(--highlight); color:var(--highlight-ink);
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:filter .15s ease, transform .15s ease;}
.md .listen-play:hover{filter:brightness(1.08); transform:scale(1.05);}
.md .listen-body{display:flex; flex-direction:column; gap:8px; min-width:0;}
.md .listen-top{display:flex; align-items:baseline; gap:10px;}
.md .listen-top b{font:700 12px/1 var(--font-sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted);}
.md .listen-time{margin-left:auto; font:500 12.5px/1 var(--font-sans);
  color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
.md .listen-wave{display:flex; align-items:center; gap:2px; height:28px; overflow:hidden;}
.md .listen-wave i{flex:1 1 auto; min-width:2px; max-width:4px; border-radius:2px;
  background:color-mix(in srgb, var(--highlight) 34%, var(--border));
  transform-origin:center; transition:background .2s ease;}
.md .listen.is-playing .listen-wave i{background:var(--highlight);
  animation:eqbar 1s ease-in-out infinite;}
.md .listen figcaption{grid-column:1 / -1; margin:0; padding-top:2px;
  font:400 14.5px/1.55 var(--font-sans); color:var(--ink-muted);}
.md .listen.is-broken .listen-play{background:var(--border-strong); cursor:not-allowed;}
@keyframes eqbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){ .md .listen.is-playing .listen-wave i{animation:none;} }
@media(max-width:560px){
  .md .listen{padding:16px; gap:12px;}
  .md .listen-play{width:42px; height:42px;}
}

/* --------------------------- подвал статьи -------------------------------- */
.art-foot{max-width:var(--measure); margin:clamp(36px,4vw,56px) 0 0;
  padding:clamp(24px,3vw,32px) 0 0; border-top:1px solid var(--border);}
.art-tags{display:flex; gap:8px; flex-wrap:wrap;}
.art-tags a{padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--border);
  background:var(--surface); text-decoration:none; color:var(--ink-muted); font:600 13px/1 var(--font-sans);}
.art-tags a:hover{border-color:var(--border-strong); color:var(--ink);}
/* Финальный блок статьи. Текст в нём свой у каждой статьи (cta_title и
   cta_text во фронт-маттере) — это подводка от темы текста к действию,
   а не рекламная вставка. Действие одно и то же: собрать агента по своему
   сайту и позвонить ему. */
.art-cta{margin:clamp(28px,3.4vw,40px) 0 0; padding:clamp(26px,3vw,36px);
  border-radius:var(--radius-bento); background:var(--dark-bg); color:#fff;
  display:flex; align-items:center; gap:clamp(24px,3vw,40px); flex-wrap:wrap;}
.art-cta-main{flex:1 1 300px; min-width:0;}
.art-cta b{display:block; font:500 clamp(20px,2vw,26px)/1.25 var(--font-display);
  letter-spacing:-.02em; max-width:24ch;}
.art-cta p{margin:12px 0 0; font:400 15.5px/1.6 var(--font-sans);
  color:rgba(255,255,255,.72); max-width:46ch;}
.art-cta .art-cta-act{flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-start; gap:10px; max-width:280px;}
.art-cta-note{font:400 13px/1.5 var(--font-sans); color:rgba(255,255,255,.5);}
@media(max-width:700px){
  .art-cta .art-cta-act{width:100%; max-width:none;}
  .art-cta .btn{width:100%; justify-content:center;}
}

/* ------------- бесконечное чтение: следующая статья встык ------------------ */
.art-next-sep{max-width:var(--measure); margin:clamp(48px,6vw,86px) 0 0; display:flex;
  align-items:center; gap:16px; font:700 12px/1 var(--font-sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-muted);}
.art-next-sep::before,.art-next-sep::after{content:""; height:1px; background:var(--border); flex:1 1 auto;}
.art-loading{max-width:var(--measure); margin:34px 0 0; display:flex; align-items:center; gap:12px;
  font:500 14.5px/1 var(--font-sans); color:var(--ink-muted);}
.art-loading .sp{width:17px; height:17px; border-radius:50%; border:2px solid var(--border-strong);
  border-top-color:var(--highlight); animation:spin .8s linear infinite;}
.art-piece{padding-bottom:clamp(20px,2.4vw,32px);}
/* якорь догрузки: нулевая высота местами не попадает в IntersectionObserver */
#art-sentinel{height:1px;}

/* --------------------------------- футер ---------------------------------- */
.footer{background:var(--dark-bg); color:#fff; --ink:#fff; --ink-muted:rgba(255,255,255,.62); --border:rgba(255,255,255,.14);
  margin-top:clamp(56px,7vw,104px);
  padding:clamp(48px,5vw,72px) clamp(16px,5vw,40px) 36px; border-top:1px solid var(--border);}
.footer-grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px;}
.footer h3{font:700 13px/1 var(--font-sans); letter-spacing:.08em; text-transform:lowercase; color:var(--ink-muted); margin:0;}
.footer .fcol > div{margin:16px 0 0; display:flex; flex-direction:column; gap:11px;}
.footer a{text-decoration:none; color:#fff; font:500 15px/1 var(--font-sans);}
.footer-bottom{max-width:1240px; margin:36px auto 0; padding-top:24px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;}
.footer-bottom span{font:500 13px/1.5 var(--font-sans); color:var(--ink-muted);}

/* -------------------------- reveal-on-scroll ------------------------------ */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal[data-reveal]{opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);}
  html.js .reveal[data-reveal].is-in{opacity:1; transform:none;}
}