/* @import Onest убран: шрифт подключает сама платформа по designSettings.fonts —
   иначе один и тот же Onest грузился двумя запросами (заказчик 2026-08-04). */

/* ============================================================================
   DS FOUNDATION (Figma «Design system» 55:2 / Design Tokens 187:3736).
   Единый слой токенов + базовые компоненты .pxl-*. НЕ переопределяет
   article-2 / шапку-подвал (у них свои .pxlv-* классы) — только новые классы.
   Типо-размеры — vw на базе 1440 (fluid vw = каноничная шкала DS 1440/1920/2560,
   т.к. значения DS пропорциональны вьюпорту). Mobile <1200 — фикс px из DS.
   ============================================================================ */
:root{
  /* цвета */
  --pxl-accent:#d8f953; --pxl-dark:#1a1a1a; --pxl-light:#f6f6f6; --pxl-elevated:#2b2b2b;
  --pxl-border:#e6e6e6; --pxl-text:#262626; --pxl-muted:#767676; --pxl-on-dark:#fff; --pxl-on-dark-muted:#f6f6f6;
  --pxl-grad:linear-gradient(90deg,#d8f953,#22d48d);
  /* типо-размеры (desktop vw@1440) */
  --pxl-fs-hero:3.611111vw; --pxl-fs-section:2.986111vw; --pxl-fs-h1:2.222222vw;
  --pxl-fs-h2:1.666667vw; --pxl-fs-h3:1.180556vw; --pxl-fs-lead:1.388889vw;
  --pxl-fs-intro:1.111111vw; --pxl-fs-body:0.972222vw; --pxl-fs-small:0.833333vw;
  --pxl-fs-caption:0.694444vw; --pxl-fs-btn:0.972222vw;
  /* label — навигация, чипы-фильтры, ссылки-разделы: на десктопе = body, на мобиле 14 (НЕ 16) */
  --pxl-fs-label:0.972222vw;
  /* line-height */
  --pxl-lh-hero:1.05; --pxl-lh-section:1.0; --pxl-lh-h1:1.1; --pxl-lh-h2:1.15;
  --pxl-lh-h3:1.2; --pxl-lh-lead:1.4; --pxl-lh-intro:1.5; --pxl-lh-body:1.55;
  /* радиусы */
  --pxl-r-card:1.25vw; --pxl-r-btn:1.041667vw; --pxl-r-pill:999px;
  /* spacing */
  --pxl-sp-1:.555556vw; --pxl-sp-2:.833333vw; --pxl-sp-3:1.111111vw; --pxl-sp-4:1.388889vw;
  --pxl-sp-5:1.666667vw; --pxl-sp-6:2.083333vw; --pxl-sp-8:2.777778vw;
  /* иконка + кнопка */
  --pxl-ico:1.666667vw; --pxl-btn-h:3.125vw; --pxl-btn-px:1.944444vw;
  /* тени/ховеры DS */
  --pxl-glow:0 3px 4.8px rgba(229,255,105,.25);
  --pxl-glow-hover:0 6px 16px -6px rgba(216,249,83,.55);
}
/* иконка */
.pxl-ico{width:var(--pxl-ico);height:var(--pxl-ico);display:inline-block;flex:0 0 auto;vertical-align:middle}
/* кнопка — единая (DS Button state: h45 pad16/28 r15 текст18/500) */
.pxl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--pxl-sp-2);min-height:var(--pxl-btn-h);padding:0 var(--pxl-btn-px);border-radius:var(--pxl-r-btn);font-family:inherit;font-size:var(--pxl-fs-btn);font-weight:500;line-height:1.1;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease}
.pxl-btn .pxl-ico{width:1.25vw;height:1.25vw}
.pxl-btn--primary{background:var(--pxl-dark);color:var(--pxl-on-dark-muted)}
.pxl-btn--primary:hover{background:var(--pxl-elevated)}
.pxl-btn--accent{background:var(--pxl-accent);color:var(--pxl-text)}
.pxl-btn--accent:hover{box-shadow:var(--pxl-glow-hover)}
.pxl-btn--ghost{background:#fff;color:var(--pxl-text);border:1px solid var(--pxl-border)}
.pxl-btn--ghost:hover{border-color:var(--pxl-dark)}
.pxl-btn--on-dark{background:var(--pxl-elevated);color:var(--pxl-on-dark)}
.pxl-btn--on-dark:hover{background:#3a3a3a}
/* тег/чип — единый (DS Tag/Small: пилюля pad6/10 текст12/400) */
.pxl-tag{display:inline-flex;align-items:center;gap:.416667vw;padding:.416667vw .694444vw;border-radius:var(--pxl-r-pill);font-size:var(--pxl-fs-small);font-weight:400;line-height:1;background:var(--pxl-accent);color:var(--pxl-text);white-space:nowrap}
.pxl-tag--white{background:#fff}
.pxl-tag--ghost{background:transparent;border:1px solid var(--pxl-border);color:var(--pxl-muted)}
.pxl-tag--muted{background:#f0f0f0;color:var(--pxl-muted)}
/* крупный тег-бейдж (макет 404 CardBadge: r20 pad8/14 текст 12/500) */
.pxl-tag--lg{padding:.555556vw .972222vw;border-radius:1.388889vw;font-weight:500}
/* ряд чипов-фильтров: базовый стиль (без него чипы шли без отступов) */
.pxlv-feed-chipsrow{display:flex;align-items:center;gap:.833333vw;flex-wrap:wrap}
/* клон липких табов существует ТОЛЬКО на мобиле: иначе на десктопе он попадает в поток
   и добавляет высоту страницы (поймано воротами check_desktop_frozen) */
.pxlv-chips-clone{display:none}
/* чип-фильтр (интерактивный тег) */
.pxl-chip{display:inline-flex;align-items:center;gap:.416667vw;padding:.555556vw 1.111111vw;border-radius:var(--pxl-r-pill);font-family:inherit;font-size:var(--pxl-fs-label);font-weight:500;line-height:1;background:#fff;border:1px solid var(--pxl-border);color:var(--pxl-text);cursor:pointer;transition:background .15s,border-color .15s}
.pxl-chip:hover{border-color:var(--pxl-dark)}
.pxl-chip[aria-pressed="true"]{background:var(--pxl-accent);border-color:var(--pxl-accent)}
/* карточка — единая (DS cards state: r18). Ховер = подъём+мягкая тень,
   КАК у карточек статей (канон related, заказчик 2026-07-17), не контур.
   Контейнеры вокруг карточек не клипать (журнал №12). */
.pxl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--pxl-border);border-radius:var(--pxl-r-card);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.pxl-card:hover{transform:translateY(-.416667vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08)}
.pxl-card--dark{background:var(--pxl-dark);border-color:transparent;color:var(--pxl-on-dark)}
/* типо-утилиты */
.pxl-t-hero{font-size:var(--pxl-fs-hero);line-height:var(--pxl-lh-hero);font-weight:900}
.pxl-t-section{font-size:var(--pxl-fs-section);line-height:var(--pxl-lh-section);font-weight:600}
.pxl-t-h1{font-size:var(--pxl-fs-h1);line-height:var(--pxl-lh-h1);font-weight:700}
.pxl-t-h2{font-size:var(--pxl-fs-h2);line-height:var(--pxl-lh-h2);font-weight:700}
.pxl-t-h3{font-size:var(--pxl-fs-h3);line-height:var(--pxl-lh-h3);font-weight:600}
.pxl-t-lead{font-size:var(--pxl-fs-lead);line-height:var(--pxl-lh-lead);font-weight:400}
.pxl-t-body{font-size:var(--pxl-fs-body);line-height:var(--pxl-lh-body);font-weight:400}
.pxl-t-small{font-size:var(--pxl-fs-small);line-height:1.4;font-weight:400}
.pxl-t-caption{font-size:var(--pxl-fs-caption);line-height:1.35;font-weight:400}
.pxl-t-muted{color:var(--pxl-muted)}
@media(max-width:1199px){
  :root{
    --pxl-fs-hero:36px; --pxl-fs-section:30px; --pxl-fs-h1:26px; --pxl-fs-h2:21px;
    --pxl-fs-h3:20px; --pxl-fs-lead:18px; --pxl-fs-intro:16px; --pxl-fs-body:16px;
    --pxl-fs-small:13px; --pxl-fs-caption:12px; --pxl-fs-btn:15px; --pxl-fs-label:14px;
    --pxl-r-card:16px; --pxl-r-btn:14px; --pxl-ico:22px; --pxl-btn-h:50px; --pxl-btn-px:24px;
    --pxl-sp-1:8px; --pxl-sp-2:12px; --pxl-sp-3:16px; --pxl-sp-4:20px; --pxl-sp-5:24px; --pxl-sp-6:28px; --pxl-sp-8:32px;
  }
  .pxl-btn .pxl-ico{width:18px;height:18px}
  .pxl-tag--lg{padding:8px 14px;border-radius:20px}
  .pxl-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
  /* ⚠ МОБИЛЬНЫЕ оверрайды компонентов, чьи ДЕСКТОПНЫЕ правила объявлены НИЖЕ по
     файлу (democta, modal, search, chub, feed-meta), живут в ФИНАЛЬНОМ мобильном
     блоке в КОНЦЕ файла — иначе поздние десктопные правила той же специфичности
     перебивают их каскадом (корень «немого CTA» K2, кв-иконок S2, чипов S7 —
     мобильный дефект-раунд 2026-07-20). Сюда НЕ добавлять. */
}

:root {
  --pxlv-bg:#f6f6f6;
  --pxlv-surface:#fff;
  --pxlv-text:#262626;
  --pxlv-body:#1f1f1f;
  --pxlv-muted:#767676;
  --pxlv-line:#e6e6e6;
  --pxlv-accent:#d8f953;
  --pxlv-dark:#1a1a1a;
  --pxlv-container:83.333333vw;
  --pxlv-main:62.083333vw;
  --pxlv-side:19.861111vw;
  --pxlv-gap:1.388889vw;
  --pxlv-radius:1.041667vw;
  /* Штатный offset = оригинальные 7.5vw: ВСЕГДА ниже фиксированной шапки (шапка
     ~6.2vw). Уменьшать потолком НЕЛЬЗЯ (урок: clamp 120px прятал заголовок ToC под
     шапку 157px на 2560). Невысокие окна обрабатывает JS sticky-guard ступенями. */
  --pxlv-sticky-top:7.5vw;
}

html,body{margin:0;background:var(--pxlv-bg);color:var(--pxlv-text)}
.pxlv-block,.pxlv-block *,.pxlv-site-header,.pxlv-site-header *,.pxlv-site-footer,.pxlv-site-footer *{box-sizing:border-box}
.pxlv-block{width:100%;background:var(--pxlv-bg);font-family:Onest,Arial,sans-serif}
/* Onest everywhere incl. the global header/footer site entities (they otherwise
   fall back to the platform default Roboto — reviewer #1/#31). */
.pxlv-site-header,.pxlv-site-header *,.pxlv-site-footer,.pxlv-site-footer *{font-family:Onest,Arial,sans-serif}
.pxlv-shell{width:var(--pxlv-container);margin-inline:auto}
.pxlv-card{background:var(--pxlv-surface);border:1px solid var(--pxlv-line);border-radius:var(--pxlv-radius)}
.pxlv-main{display:block;width:100%}
/* breadcrumbs — Figma 678:15338: f14/400 #767676, sep chevron #969696, 20px gap to hero */
.pxlv-breadcrumbs{display:flex;gap:.694444vw;align-items:center;padding:1.111111vw 2.083333vw 1.111111vw;color:var(--pxlv-muted);font-size:.972222vw;line-height:1.571;white-space:nowrap;overflow:hidden}
.pxlv-breadcrumbs a{color:inherit;text-decoration:none}
.pxlv-breadcrumbs a:hover{color:var(--pxlv-text)}
.pxlv-crumb-sep{color:#969696}
.pxlv-crumb-current{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--pxlv-muted)}
.pxlv-layout{display:grid;grid-template-columns:minmax(0,var(--pxlv-main)) var(--pxlv-side);gap:var(--pxlv-gap);align-items:stretch}
.pxlv-content{display:flex;min-width:0;flex-direction:column;gap:2.083333vw;padding-bottom:2.777778vw}
/* body wrapper (Figma 1535:42814): white card, #e6e6e6 border, r25, padding 30/22, gap 30 */
.pxlv-body-card{display:flex;flex-direction:column;gap:2.083333vw;padding:2.083333vw 1.527778vw;background:var(--pxlv-surface);border:1px solid var(--pxlv-line);border-radius:1.736111vw}
.pxlv-sidebar{position:relative;display:flex;min-width:0;flex-direction:column;gap:var(--pxlv-gap);padding-bottom:5.555556vw}
.pxlv-sidebar-track{flex:1 1 auto;min-height:0}
/* sticky ToC+CTA — NO max-height/overflow cap: it was clipping the CTA card
   (text + button) on tall-content / short-window 2560 (reviewer #9). Sticks at top;
   if taller than the viewport it simply scrolls with the page near the article end. */
.pxlv-sidebar-sticky{position:sticky;top:var(--pxlv-sticky-top);display:flex;flex-direction:column;gap:var(--pxlv-gap)}
/* HARD RESET vs stale site-wide baseline copy (contract §16/§33): the old CSS in
   "Интеграции и код" sets overflow-y:auto + max-height on .pxlv-sidebar-sticky, which
   creates an inner scrollbar that clips the dark CTA card on 2560 (round 3). We must
   EXPLICITLY set these (removing is not enough) with specificity >= the stale selector,
   loaded last -> wins. Also neutralise any max-height/overflow leak on the track. */
.pxlv-sidebar .pxlv-sidebar-sticky{overflow:visible;max-height:none}
.pxlv-sidebar .pxlv-sidebar-track{overflow:visible;max-height:none}
/* Fallback (JS sticky-guard): группа ToC+CTA не помещается в высоту окна даже с
   clamp-offset -> sticky отключается ЦЕЛИКОМ, группа остаётся в потоке сайдбара
   (CTA достижим обычной прокруткой). Внутренний скролл запрещён приёмкой. */
.pxlv-sidebar.pxlv-sticky-off .pxlv-sidebar-sticky{position:static}
/* Ступени JS-guard'а для невысоких окон (минимальный top = фактическая шапка + 12px,
   ставится JS-ом в --pxlv-tight-top; фолбэк — расчётная шапка 6.2vw):
   TIGHT   — вся группа ToC+CTA липнет с прижатым (но НЕ под шапку) отступом;
   TOCONLY — липнет только «Содержание», CTA переносится в низ сайдбара (обычный поток);
   OFF     — ничего не липнет. */
.pxlv-sidebar.pxlv-sticky-tight .pxlv-sidebar-sticky{top:var(--pxlv-tight-top,calc(6.2vw + 12px))}
/* display:contents (НЕ position:static): sticky работает в пределах ПРЯМОГО родителя;
   статичная группа высотой с ToC не даёт диапазона прилипания — распускаем бокс группы,
   ToC становится потомком высокого .pxlv-sidebar-track и липнет по всей его длине. */
.pxlv-sidebar.pxlv-sticky-toconly .pxlv-sidebar-sticky{display:contents}
.pxlv-sidebar.pxlv-sticky-toconly .pxlv-sidebar-sticky>.pxlv-toc{position:sticky;top:var(--pxlv-tight-top,calc(6.2vw + 12px))}
.pxlv-sidebar-bottom{display:flex;flex-direction:column;gap:var(--pxlv-gap);margin-top:auto}
.pxlv-mobile-only{display:none}

.pxlv-hero{display:grid;grid-template-columns:minmax(0,1fr) 28.888889vw;gap:1.388889vw;align-items:stretch;overflow:hidden;border-radius:1.736111vw}
.pxlv-hero-copy{display:flex;flex-direction:column;gap:1.25vw;padding:2.083333vw 0 2.083333vw 2.083333vw;min-height:100%}
.pxlv-hero-top{display:flex;align-items:center;flex-wrap:nowrap;gap:.833333vw}
.pxlv-hero-kind{display:inline-flex;align-items:center;color:var(--pxlv-muted);font-size:.833333vw;white-space:nowrap}
.pxlv-hero-kind::before{content:"•";margin-right:.555556vw;color:var(--pxlv-muted)}
/* Дата перенесена из верхней строки вниз, к времени чтения (заказчик 07.08.2026):
   одна группа, иконки размером со шрифт, цвет как у подписи автора, всё на одной оси. */
/* Дата и время чтения стоят на одной линии со строкой рубрики под именем автора
   (решение оператора 10.08.2026). Отступ снизу 11px на 1440 = 0.763889vw: при прежних 19px
   дата была на 8px выше центра строки рубрики. Число выведено замером, а не на глаз. */
.pxlv-meta.pxlv-hero-meta{margin-left:auto;margin-bottom:.763889vw;flex:0 0 auto;flex-wrap:nowrap;align-items:center;
  gap:.833333vw;color:var(--pxlv-muted)}
.pxlv-hero-meta .pxlv-meta-item{align-items:center;gap:.416667vw;white-space:nowrap;line-height:1.35}
.pxlv-hero-meta .pxlv-ic{width:1em;height:1em;color:currentColor}
/* margin-top:auto прижимает подвал к низу карточки, padding-top держит
   минимальный зазор от лида (раньше в правиле было два margin-top подряд,
   и второй перебивал auto — подвал висел в середине при коротком лиде). */
.pxlv-hero-foot{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:nowrap;gap:.833333vw;margin-top:auto;padding-top:1.736111vw}

.pxlv-tags{display:flex;flex-wrap:wrap;gap:.694444vw}
.pxlv-tag{display:inline-flex;min-height:1.944444vw;align-items:center;justify-content:center;padding:.416667vw 1.388889vw;border:1px solid var(--pxlv-body);border-radius:170px;background:#fff;font-size:.833333vw;line-height:1.4}
.pxlv-tag:first-child{border-color:var(--pxlv-accent);background:var(--pxlv-accent)}
.pxlv-meta{display:flex;flex-wrap:wrap;gap:1.388889vw;color:var(--pxlv-body);font-size:.833333vw;line-height:1.4}
.pxlv-hero h1{margin:0;font-size:calc(2.222222vw * var(--pxl-fit,1));line-height:1.1;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pxlv-hero-lead{margin:0;color:var(--pxlv-body);font-size:1.111111vw;line-height:1.5}
.pxlv-author-row{display:flex;gap:1.388889vw;align-items:center}
.pxlv-avatar{display:grid;width:3.819444vw;height:3.819444vw;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--pxlv-accent);font-size:1.111111vw;font-weight:700}
/* строки имени/роли — плотно, чтобы блок текста был короче аватара и optically
   центрировался напротив него (align-items:center у ряда), а не «прибит» к верху */
.pxlv-author-row strong{display:block;font-size:.972222vw;font-weight:700;line-height:1.3;color:var(--pxlv-body)}
.pxlv-hero-foot .pxlv-author-row{flex:0 1 auto;min-width:0}
.pxlv-hero-foot .pxlv-author-row strong{white-space:nowrap}
.pxlv-author-row span{display:block;margin-top:.208333vw;color:var(--pxlv-muted);font-size:.833333vw;line-height:1.35}
.pxlv-hero-media{align-self:stretch;min-height:0;aspect-ratio:1/.92;overflow:hidden;border-radius:1.041667vw}
.pxlv-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.pxlv-lead-hook{margin:0;color:var(--pxlv-body);font-size:.972222vw;line-height:1.42}
.pxlv-summary{display:flex;flex-direction:column;gap:1.388889vw;padding:1.666667vw 1.944444vw;border:2px solid var(--pxlv-accent);border-radius:var(--pxlv-radius);background:#fff}
.pxlv-summary h2,.pxlv-section h2,.pxlv-faq h2{margin:0;font-size:1.944444vw;line-height:1.29;font-weight:600}
.pxlv-summary p,.pxlv-summary li,.pxlv-section p,.pxlv-section li{font-size:.972222vw;line-height:1.42}
.pxlv-summary p{margin:0}
.pxlv-summary ul,.pxlv-checklist{display:grid;gap:1.388889vw;margin:0;padding:0;list-style:none}
.pxlv-summary li,.pxlv-checklist li{position:relative;padding-left:2.083333vw}
/* check bullet — accent circle + a clean VECTOR tick (reviewer #11: use vector, not the buggy ✓ glyph) */
.pxlv-summary li::before,.pxlv-checklist li::before{content:'';position:absolute;left:0;top:.05em;width:1.388889vw;height:1.388889vw;border-radius:50%;background:var(--pxlv-accent) center/.833333vw no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.7 8.8 9.8 3.3' fill='none' stroke='%23262626' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pxlv-mobile-toc{display:none}
.pxlv-toc,.pxlv-side-cta,.pxlv-author-card,.pxlv-social-card{padding:2.083333vw 1.388889vw}
/* «Об авторе» stays a real heading; the service-block titles (ToC/side-CTA/subscribe/
   related/bottom-CTA) are non-heading div elements (reviewer B4) — same visual, so give
   them font-weight:700 that the UA no longer supplies. */
.pxlv-author-card h2,.pxlv-author-card .pxlv-author-h{margin:0 0 1.388889vw;font-size:1.388889vw;line-height:1.2}
.pxlv-toc-title,.pxlv-side-cta-title,.pxlv-social-title{margin:0 0 1.388889vw;font-size:1.388889vw;line-height:1.2;font-weight:700}
.pxlv-side-cta{position:relative;min-height:20.138889vw;overflow:hidden;color:#fff;background:#0b0b0a}
.pxlv-side-cta p{font-size:.833333vw;line-height:1.4}
.pxlv-button{display:inline-flex;min-height:3.333333vw;align-items:center;justify-content:center;padding:.972222vw 1.388889vw;border:0;border-radius:1.041667vw;font-family:inherit;font-size:.972222vw;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.pxlv-button--accent{color:var(--pxlv-text);background:var(--pxlv-accent)}
.pxlv-button--ghost{color:#fff;border:1px solid #f6f6f6;background:transparent}
.pxlv-side-cta .pxlv-button{position:absolute;right:1.388889vw;bottom:1.388889vw;left:1.388889vw}
.pxlv-author-card{text-align:center}
.pxlv-author-card .pxlv-avatar{margin:0 auto 1.388889vw}
.pxlv-author-card p,.pxlv-social-card p{font-size:.833333vw;line-height:1.4}
/* the only <a> in the author card is «Все статьи автора»; unify to button token
   14px(.972222vw)/500 — this (0,2,0) rule out-specifies .pxlv-author-link (0,1,0) */
.pxlv-author-card a{color:inherit;font-size:.972222vw;font-weight:500}

.pxlv-section{display:flex;flex-direction:column;gap:1.388889vw;color:var(--pxlv-body)}
.pxlv-section p{margin:0}
.pxlv-steps,.pxlv-scenarios{display:grid;gap:.833333vw}
.pxlv-step,.pxlv-scenario{display:grid;grid-template-columns:1.944444vw 1fr;gap:1.111111vw;padding:1.388889vw}
.pxlv-number{display:grid;width:1.944444vw;height:1.944444vw;place-items:center;border-radius:50%;background:var(--pxlv-accent);font-size:.972222vw;font-weight:700}
.pxlv-step h3,.pxlv-scenario h3{margin:0 0 .694444vw;font-size:1.180556vw;line-height:1.2}
.pxlv-callout{display:flex;gap:.833333vw;padding:1.388889vw;border:1px solid #f5d58e;border-radius:var(--pxlv-radius);background:#fff7e6}
.pxlv-callout-mark{display:grid;width:2.222222vw;height:2.222222vw;flex:0 0 auto;place-items:center;border-radius:50%;background:#f59e0b;font-weight:700}
.pxlv-callout a{color:inherit;font-weight:600}
.pxlv-faq{display:flex;flex-direction:column;gap:1.388889vw;padding:2.083333vw;border-radius:1.736111vw}
/* Статья: внешняя белая подложка снята — по аналогии с блоком расчёта (заказчик
   07.08.2026). Карточки вопросов лежат на фоне страницы. Рубрики и подборки
   используют тот же .pxlv-faq и остаются с подложкой. */
.pxlv-block .pxlv-faq{padding:0;background:transparent;border:0}

.pxlv-related{padding:0 0 2.083333vw}
.pxlv-related-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.083333vw}
.pxlv-related-title{margin:0;font-size:1.666667vw;line-height:1.15;font-weight:700}
.pxlv-related-header a{color:inherit;font-size:.972222vw;font-weight:600;text-decoration:none}
/* no overflow:hidden here — it would clip the card hover shadow + lift */
.pxlv-related-track{display:flex;gap:var(--pxlv-gap)}
.pxlv-related-card{display:flex;min-width:0;flex:1 1 0;flex-direction:column;overflow:hidden;border-radius:1.278472vw}
/* cover slot: real article cover, cover-fit + centred, clipped by card radius */
.pxlv-related-media{aspect-ratio:387/219;overflow:hidden;background:#161616}
.pxlv-related-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.pxlv-related-copy{display:flex;flex:1;flex-direction:column;gap:.833333vw;padding:1.111111vw}
.pxlv-related-copy h3{margin:0;font-size:1.180556vw;line-height:1.2}
.pxlv-related-copy a{color:inherit;text-decoration:none}
.pxlv-related-meta{margin-top:auto;color:var(--pxlv-muted);font-size:.763889vw}
.pxlv-bottom-cta{padding-bottom:2.083333vw}
.pxlv-bottom-cta-card{display:grid;grid-template-columns:minmax(0,1fr) 34.930556vw;gap:.694444vw;align-items:center;min-height:20.208333vw;padding-left:2.083333vw;overflow:hidden;border-radius:1.736111vw;color:#fff;background:var(--pxlv-dark)}
.pxlv-bottom-cta-copy{display:flex;flex-direction:column;gap:2.083333vw;padding-block:2.083333vw}
.pxlv-bottom-cta-title{margin:0;font-size:2.222222vw;line-height:1.1;font-weight:700}
.pxlv-bottom-cta p{margin:0;font-size:1.388889vw;line-height:1.4}
.pxlv-actions{display:flex;gap:1.388889vw}
/* real art: dashboard scene, cover-fit + centred; left edge FADES into the dark card
   via a mask so the image blends with #1a1a1a instead of a hard seam (reviewer #24 — Figma «Mask group») */
.pxlv-cta-media{height:100%;min-height:20.208333vw;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%);mask-image:linear-gradient(to right,transparent 0,#000 18%)}
.pxlv-cta-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* bottom-CTA buttons — Figma 678:15361: primary 45px 18/500; secondary outline
   (1px #f6f6f6, transparent) 42px 14/500, in a row with gap20 (.pxlv-actions) */
/* BOTH bottom-CTA buttons share ghost sizing per customer request (primary was 18/500
   in Figma; unified to 14/500, 42px so «Скачать инструкцию» matches «Посмотреть
   возможности…» — reviewer #6). */
.pxlv-bottom-cta .pxlv-button--gradient{min-height:2.916667vw;padding-block:.833333vw;font-size:.972222vw;font-weight:500}
.pxlv-bottom-cta .pxlv-button--ghost{min-height:2.916667vw;padding-block:.833333vw;font-size:.972222vw;font-weight:500}

/* ===== Страница 404 (Figma 1245:42578) ===== */
.pxlv-404{padding:2.083333vw 0 4.166667vw}
.pxlv-404-hero{display:flex;flex-direction:column;gap:2.777778vw;margin-bottom:4.166667vw}
.pxlv-404-hero-top{display:grid;grid-template-columns:minmax(0,1fr) 39.791667vw;gap:4.166667vw;align-items:center}
.pxlv-404-hero-text{display:flex;flex-direction:column;gap:1.25vw}
.pxlv-404-code{font-size:11.111111vw;line-height:1;font-weight:900;letter-spacing:-.02em}
.pxlv-404-title{margin:0}
.pxlv-404-lead{margin:0}
/* Hero 404: арт заказчика (2026-07-30) КВАДРАТНЫЙ, а бокс ниже колонки текста → height:auto резал
   верх/правый край. Вписываем целиком: бокс тянется по высоте строки, картинка contain по центру. */
.pxlv-404-hero-media{border-radius:1.666667vw;overflow:hidden;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:100%}
.pxlv-404-hero-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.pxlv-404-actions{display:flex;gap:1.388889vw;align-items:stretch}
.pxlv-404-search{display:flex;align-items:center;gap:.694444vw;flex:1;min-width:0;padding:.972222vw 1.25vw;border:1px solid var(--pxl-border);border-radius:var(--pxl-r-btn);background:#fff}
.pxlv-404-search .pxl-ico{width:1.25vw;height:1.25vw;color:var(--pxl-muted)}
.pxlv-404-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:inherit;font-size:var(--pxl-fs-body);color:var(--pxl-text)}
.pxlv-404-search input::placeholder{color:var(--pxl-muted)}
.pxlv-404-explore{margin-bottom:4.166667vw}
.pxlv-404-explore-title{margin:0 0 1.944444vw}
.pxlv-cards2{display:grid;grid-template-columns:1fr 1fr;gap:1.666667vw}
.pxlv-info-card{display:grid;grid-template-columns:minmax(0,1fr) 20.416667vw;gap:1.666667vw;color:inherit;text-decoration:none}
.pxlv-info-card-body{display:flex;flex-direction:column;gap:.972222vw;padding:1.944444vw;align-self:center}
.pxlv-info-card-title{margin:0}
.pxlv-info-card-text{margin:0}
.pxlv-info-badge{align-self:flex-start;margin-top:.277778vw}
/* Кнопки карточек 404 — В ЕДИНОМ СТИЛЕ С ХЕДЕРОМ (.pxlv-site-cta): те же высота, паддинги,
   радиус, кегль и вес. Стрелка появляется на ховере карточки (заказчик 2026-08-04).
   Подъём карточки при этом убран — ховер показывает только стрелку. */
.pxlv-info-btn{align-self:flex-start;margin-top:.277778vw;display:inline-flex;align-items:center;
  height:2.916667vw;padding:0 1.944444vw;border-radius:1.041667vw;background:var(--pxl-accent);
  color:var(--pxl-text);font-size:.972222vw;font-weight:500;white-space:nowrap;padding-top:.06em;
  transition:filter .15s ease,padding-right .18s ease}
.pxlv-info-btn-ico{display:grid;place-items:center;width:0;overflow:hidden;opacity:0;
  transition:width .18s ease,opacity .18s ease,margin-left .18s ease;margin-left:0}
.pxlv-info-btn-ico .pxl-ico{width:1.111111vw;height:1.111111vw;flex:0 0 auto}
.pxlv-info-card:hover .pxlv-info-btn{filter:brightness(1.04)}
.pxlv-info-card:hover .pxlv-info-btn-ico{width:1.111111vw;opacity:1;margin-left:.555556vw}
/* карточки 404 не поднимаются (заказчик 2026-08-04) — .pxl-card:hover перебиваем адресно */
.pxl-card.pxlv-info-card:hover{transform:none;box-shadow:none}
/* Арты карточек 404 — КВАДРАТНЫЕ 3D-иконки на почти белом фоне (#fefefe, ассеты заказчика 2026-07-30).
   contain (НЕ cover): иконку нельзя кропать — обрежет объект. Фон = фон самих картинок, стык не виден. */
.pxlv-info-card-media{align-self:center;overflow:hidden;background:#fefefe}
.pxlv-info-card-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* нижний промо-баннер (тёмный) — 3 фичи + 2 кнопки + дашборд */
.pxlv-promo{display:grid;grid-template-columns:minmax(0,1fr) 41.666667vw;align-items:center;overflow:hidden;border-radius:1.666667vw;background:var(--pxlv-dark);color:#fff}
.pxlv-promo-copy{display:flex;flex-direction:column;gap:2.083333vw;padding:2.777778vw}
.pxlv-promo-title{margin:0;max-width:37.5vw}
.pxlv-promo-accent{color:var(--pxl-accent)}
.pxlv-promo-features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.388889vw}
.pxlv-promo-feature{display:flex;flex-direction:column;gap:.555556vw}
.pxlv-promo-fhead{display:flex;align-items:center;gap:.555556vw}
.pxlv-promo-ficon{display:grid;place-items:center;width:2.083333vw;height:2.083333vw;flex:0 0 auto;border:1px solid rgba(255,255,255,.28);border-radius:.555556vw}
.pxlv-promo-ficon .pxl-ico{width:1.388889vw;height:1.388889vw;color:var(--pxl-accent)}
.pxlv-promo-fhead strong{line-height:1.2}
.pxlv-promo-feature p{margin:0;color:rgba(255,255,255,.6)}
.pxlv-promo-actions{display:flex;gap:1.388889vw;margin-top:.694444vw}
.pxlv-promo-media{align-self:stretch;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%)}
/* object-position:right — ноутбук/телефон в исходнике справа; center показывал пустую
   середину и резал технику. Right держит объект внимания в кадре (заказчик 2026-07-16). */
.pxlv-promo-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}

@media(max-width:1199px){
  :root{--pxlv-container:100%;--pxlv-main:100%;--pxlv-side:0;--pxlv-radius:15px;--pxlv-gap:20px}
  .pxlv-shell{width:min(calc(100% - 32px),960px)}
  /* --- Страница 404 mobile (Figma 1324:41874): всё в столбик, кнопки на всю ширину,
     карточка = картинка сверху + контент снизу --- */
  .pxlv-404{padding:20px 0 40px}
  .pxlv-404-hero{gap:24px;margin-bottom:32px}
  .pxlv-404-hero-top{grid-template-columns:1fr;gap:20px}
  .pxlv-404-hero-text{gap:12px}
  .pxlv-404-code{font-size:84px;line-height:.95}
  .pxlv-404-hero-media{border-radius:15px}
  .pxlv-404-actions{flex-direction:column}
  .pxlv-404-search .pxl-ico{width:20px;height:20px}
  .pxlv-404-search{padding:14px 18px;border-radius:14px}
  .pxlv-404-explore{margin-bottom:32px}
  .pxlv-404-explore-title{margin-bottom:20px}
  .pxlv-cards2{grid-template-columns:1fr;gap:20px}
  .pxlv-info-card{grid-template-columns:1fr}
  .pxlv-info-card-body{order:2;padding:20px;gap:12px}
  .pxlv-info-card-media{order:1;aspect-ratio:16/9}
  .pxlv-info-badge{margin-top:4px}
  /* мобильные размеры кнопки — как у .pxlv-site-cta в шапке */
  .pxlv-info-btn{margin-top:4px;height:auto;padding:10px 16px;border-radius:12px;font-size:13px}
  .pxlv-info-btn-ico .pxl-ico{width:16px;height:16px}
  .pxlv-info-card:hover .pxlv-info-btn-ico{width:16px;margin-left:6px}
  .pxlv-promo{grid-template-columns:1fr;border-radius:20px}
  .pxlv-promo-copy{order:2;padding:24px;gap:20px}
  .pxlv-promo-media{order:1;aspect-ratio:16/10;-webkit-mask-image:none;mask-image:none}
  .pxlv-promo-title{max-width:none}
  .pxlv-promo-features{grid-template-columns:1fr;gap:16px}
  .pxlv-promo-ficon{width:40px;height:40px;border-radius:10px}
  .pxlv-promo-ficon .pxl-ico{width:22px;height:22px}
  .pxlv-promo-features{grid-template-columns:1fr;gap:16px}
  .pxlv-promo-ficon{width:28px;height:28px;border-radius:8px}
  .pxlv-promo-ficon svg{width:14px;height:14px}
  .pxlv-promo-fhead strong{font-size:15px}
  .pxlv-promo-feature p{font-size:13px}
  .pxlv-promo-actions{flex-direction:column}
  .pxlv-promo .pxlv-button{min-height:52px;padding:14px 24px;font-size:16px;justify-content:center}
  .pxlv-breadcrumbs{padding:24px 0 12px;font-size:12px;gap:8px}
  .pxlv-layout{display:block}
  .pxlv-content{gap:20px;padding-bottom:30px}
  /* dissolve the desktop white body-card wrapper on mobile/tablet — macet has each
     section as its own block on the grey bg, no extra inset (reviewer M4) */
  .pxlv-body-card{display:contents}
  .pxlv-sidebar{display:none}
  .pxlv-mobile-only,.pxlv-mobile-toc{display:block}
  /* hero = white card (image top + copy), macet mobile Hero Section fill #fff (reviewer M1) */
  .pxlv-hero{grid-template-columns:1fr;border-radius:15px;background:#fff;overflow:hidden}
  .pxlv-hero-media{order:1;min-height:280px;border-radius:0}
  .pxlv-hero-copy{order:2;padding:24px;gap:24px}
  .pxlv-tags{gap:8px}.pxlv-tag{min-height:34px;padding:6px 20px;font-size:12px}
  .pxlv-meta{gap:10px 16px;font-size:12px}
  .pxlv-meta .pxlv-ic{width:16px;height:16px}
  .pxlv-hero h1{font-size:34px}.pxlv-hero-lead{font-size:16px}
  .pxlv-avatar{width:55px;height:55px;font-size:16px}.pxlv-author-row strong{font-size:14px}.pxlv-author-row span{font-size:12px}
  .pxlv-lead-hook,.pxlv-summary p,.pxlv-summary li,.pxlv-section p,.pxlv-section li{font-size:16px}
  .pxlv-summary,.pxlv-faq{gap:20px;padding:24px}
  /* prose is plain text on the grey bg (no card) on mobile — matches macet Text/Hedline sections */
  .pxlv-section{gap:20px;padding:0}
  .pxlv-summary h2,.pxlv-section h2,.pxlv-faq h2{font-size:28px}
  .pxlv-summary ul,.pxlv-checklist{gap:12px}.pxlv-summary li,.pxlv-checklist li{padding-left:32px}
  .pxlv-summary li::before,.pxlv-checklist li::before{width:22px;height:22px;font-size:12px}
  .pxlv-mobile-toc .pxlv-toc{padding:20px}.pxlv-mobile-toc .pxlv-toc-title{font-size:20px}.pxlv-toc a{padding:10px 0;font-size:14px}
  .pxlv-step,.pxlv-scenario{grid-template-columns:32px 1fr;gap:12px;padding:16px}
  .pxlv-number{width:32px;height:32px;font-size:14px}.pxlv-step h3,.pxlv-scenario h3{font-size:18px}
  .pxlv-callout{gap:12px;padding:20px}.pxlv-callout-mark{width:32px;height:32px}
  /* A2: removed the old `.pxlv-faq summary,.pxlv-faq details p{16px}` — it forced the
     answer to 16px (bigger than the question). Sizes now set per element below. */
  .pxlv-mobile-author{display:flex;flex-direction:column;gap:16px;padding:24px;text-align:center}
  .pxlv-mobile-author .pxlv-avatar{margin-inline:auto;width:80px;height:80px}
  .pxlv-related-title{font-size:24px}.pxlv-related-header a{font-size:14px}
  /* vertical padding gives the card hover shadow/lift room inside the x-scroller (overflow-y clips only outside the padding box) */
  .pxlv-related-track{overflow-x:auto;overflow-y:hidden;padding-block:6px 24px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pxlv-related-track::-webkit-scrollbar{display:none}.pxlv-related-card{flex:0 0 280px;scroll-snap-align:start;border-radius:18.41px}
  .pxlv-related-copy{gap:12px;padding:16px}.pxlv-related-copy h3{font-size:17px}.pxlv-related-meta{font-size:11px}
  .pxlv-bottom-cta-card{grid-template-columns:1fr;min-height:0;padding:40px 30px;border-radius:25px}
  .pxlv-bottom-cta-copy{gap:24px;padding:0}.pxlv-bottom-cta-title{font-size:28px}.pxlv-bottom-cta p{font-size:16px}.pxlv-cta-media{display:none}
  .pxlv-button{min-height:48px;padding:14px 24px;border-radius:15px;font-size:14px;font-weight:500}
  /* bottom-CTA buttons: desktop vw rules «.pxlv-bottom-cta .pxlv-button--gradient/--ghost»
     are (0,2,0) and out-specify the plain «.pxlv-button» (0,1,0) mobile rule above, so
     without this the vw size (.972vw ≈ 3.6px @375) leaks onto mobile. Match here at equal
     specificity (macet 679:17013 bottom CTA ~16px; both buttons identical — reviewer R4.1). */
  .pxlv-bottom-cta .pxlv-button--gradient,.pxlv-bottom-cta .pxlv-button--ghost{min-height:48px;padding:14px 24px;font-size:14px;font-weight:500}
}

@media(max-width:520px){
  .pxlv-shell{width:100%;padding-inline:16px}
  .pxlv-breadcrumbs{padding:12px 0}
  /* uniform 30px gaps between every content block via flex gap — no впритык / no double (reviewer M9) */
  .pxlv-content{gap:30px;padding-bottom:0}
  .pxlv-hero-media{height:220px;min-height:220px}
  .pxlv-hero-copy{gap:30px;padding:20px}
  .pxlv-hero h1{font-size:26px;line-height:1.1}.pxlv-hero-lead{color:var(--pxlv-muted);font-size:16px;line-height:1.55}
  .pxlv-author-row{gap:12px}.pxlv-author-row .pxlv-avatar{width:48px;height:48px}
  .pxlv-lead-hook{margin:0 10px;font-size:16px;line-height:1.55}
  /* only the component cards (Abstract, FAQ) get a white surface; prose stays plain on grey (matches macet) */
  .pxlv-summary,.pxlv-faq{padding:20px;border-radius:15px;background:#fff;border:1px solid var(--pxlv-line)}
  .pxlv-summary{border:2px solid var(--pxlv-accent)}
  .pxlv-summary h2,.pxlv-section h2,.pxlv-faq h2{font-size:21px;line-height:1.15}
  .pxlv-mobile-toc .pxlv-toc{padding:20px}
  .pxlv-mobile-author{margin:0}
  .pxlv-related{padding:16px 0 30px}
  .pxlv-related>.pxlv-shell{width:100%;padding-right:0;padding-left:16px}
  .pxlv-related-header{margin-bottom:20px;padding-right:16px}
  .pxlv-related-track{gap:16px;padding-right:16px}
  .pxlv-related-card{flex-basis:230.4px}
  .pxlv-related-media{aspect-ratio:230.4/130}
  /* A3: mobile card is only 230.4px wide — the 2nd (topic) chip overflowed/was clipped.
     Show a single rubric chip (macet 679:17013 ambiguous → fallback: 1 rubric chip),
     cards keep equal flex-basis so nothing is cut. */
  .pxlv-related-card .pxlv-tags--sm .pxlv-tag--ghost{display:none}
  .pxlv-bottom-cta{padding:0}
  .pxlv-bottom-cta>.pxlv-shell{width:100%;padding:0}
  .pxlv-bottom-cta-card{gap:32px;padding:48px 16px;border-radius:0;background:#2b2b2b}
  .pxlv-bottom-cta-title{font-size:26px;line-height:1.2}
  .pxlv-actions{flex-direction:column;gap:12px}
  .pxlv-button{width:100%}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* A11y (QA-2): видимый фокус ТОЛЬКО для клавиатуры (:focus-visible — мышь/тап не
   затрагивает, визуал страницы не меняется). currentColor подстраивается под
   поверхность: тёмный текст -> тёмный контур, белый на тёмных картах -> белый. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ============================================================================
   Klub-podpiska macet — component styles (678:15335). Geometry tokens above
   are untouched; these only add/adjust component appearance to match Figma.
   ============================================================================ */

/* --- meta with inline icons --- */
.pxlv-meta-item{display:inline-flex;align-items:center;gap:.694444vw}
/* meta icons (calendar/clock) 24px @1440, scale with viewport width so they grow
   on 2560 instead of staying 16px (reviewer #6). Figma 678:17085 icon = 24x24 #262626. */
.pxlv-ic{width:1.666667vw;height:1.666667vw;flex:0 0 auto;color:inherit}

/* --- hero avatar as image --- */
.pxlv-avatar{overflow:hidden;background:var(--pxlv-bg)}
.pxlv-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}

/* --- abstract «Если коротко» head --- */
.pxlv-summary-head{display:flex;align-items:center;gap:.833333vw}
/* «Если коротко» thunder badge — Figma 678:17121: 36px CIRCLE (r20 on 36) not rounded square (reviewer #10) */
.pxlv-summary-icon{display:grid;place-items:center;width:2.5vw;height:2.5vw;flex:0 0 auto;border-radius:50%;background:var(--pxlv-accent);color:var(--pxlv-text)}
.pxlv-summary-icon svg{width:1.388889vw;height:1.388889vw}
.pxlv-summary-head h2{margin:0;font-size:1.666667vw;line-height:1.15}

/* --- zebra table (2-col light) --- */
.pxlv-table{width:100%;overflow-x:auto;border:1px solid var(--pxlv-line);border-radius:var(--pxlv-radius);background:#fff}
.pxlv-table table{width:100%;border-collapse:collapse}
.pxlv-table th,.pxlv-table td{padding:.833333vw 1.111111vw;text-align:left;vertical-align:top;font-size:.972222vw;line-height:1.42;color:var(--pxlv-body)}
.pxlv-table thead th{background:var(--pxlv-bg);font-size:.972222vw;font-weight:500;line-height:1.29}
.pxlv-table tbody td{font-size:.833333vw;line-height:1.4}
.pxlv-table tbody tr:nth-child(odd){background:#fff}
.pxlv-table tbody tr:nth-child(even){background:var(--pxlv-bg)}
.pxlv-table .pxlv-tbl-key{width:16.666667vw}
.pxlv-tbl-link{color:inherit;text-decoration:underline;font-weight:600}

/* --- numbered cards --- */
.pxlv-ncards{display:flex;flex-direction:column;gap:.833333vw;margin:0;padding:0;list-style:none}
.pxlv-ncard{padding:1.388889vw;border:1px solid var(--pxlv-line);border-radius:var(--pxlv-radius);background:#fff}
.pxlv-ncard-head{display:flex;align-items:center;gap:.694444vw;margin-bottom:1.388889vw}
.pxlv-ncard-num{display:grid;place-items:center;width:1.944444vw;height:1.944444vw;flex:0 0 auto;border-radius:50%;background:var(--pxlv-accent);font-size:.972222vw;font-weight:700;color:var(--pxlv-text)}
.pxlv-ncard-head h3{margin:0;font-size:1.180556vw;line-height:1.2;font-weight:600}
.pxlv-ncard p{margin:0;font-size:.972222vw;line-height:1.55;color:var(--pxlv-body)}

/* --- FAQ accordion cards — Figma 678:17423 --- */
/* title 24/700; question 14 BOLD (reviewer #16 — node style reports 400 but the
   macet RENDERS bold, visual is the acceptance criterion); answer 12; chevron ›/⌄ 12px */
.pxlv-faq h2{font-size:1.666667vw}
.pxlv-faq-list{display:flex;flex-direction:column;gap:.694444vw}
.pxlv-faq-item{border:1px solid var(--pxlv-line);border-radius:var(--pxlv-radius);padding:1.388889vw;background:#fff}
/* line-height:1 → the closed card is a tight 20+14+20≈54px (Figma 678:17423 = 52px)
   and align-items:center now centres the em-box, so the question sits optically in
   the middle with equal air top/bottom (reviewer #1 — leading 1.571 pushed it low). */
/* user-select:none = поведение эталона /article (там вопрос — <button>, текст не
   выделяется при клике; у <summary> без этого мигает выделение) */
.pxlv-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:.694444vw;padding:0;cursor:pointer;list-style:none;font-size:.972222vw;font-weight:500;line-height:1.29;color:var(--pxlv-body);user-select:none;-webkit-user-select:none}
.pxlv-faq-item summary::-webkit-details-marker{display:none}
.pxlv-faq-chevron{width:.833333vw;height:.833333vw;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%232b2b2b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transform:rotate(-90deg);transition:transform .2s}
/* шеврон синхронён с контентом: при закрытии (класс .pxlv-faq-closing) сразу
   поворачивается назад, не дожидаясь снятия [open] в конце анимации */
.pxlv-faq-item[open]:not(.pxlv-faq-closing) .pxlv-faq-chevron{transform:rotate(0)}
/* Раскрытие/скрытие ответа — приём grid-template-rows 0fr↔1fr: СИММЕТРИЧНО в обе
   стороны, без измерения scrollHeight (фикс «открытие мгновенно / закрытие рывком»
   2026-07-16). Управляет анимацией [open] + класс .pxlv-faq-closing (его ставит JS,
   чтобы контент оставался виден до конца закрытия). Трёхуровневая структура:
   wrap (грид-клиппер, transition) > clip (overflow:hidden, BFC — глушит схлопывание
   margin) > answer (серая подложка по ноде 678:17423: #f6f6f6, r15, pad10, отступ 10). */
.pxlv-faq-answer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s ease}
.pxlv-faq-item[open]:not(.pxlv-faq-closing) .pxlv-faq-answer-wrap{grid-template-rows:1fr}
.pxlv-faq-answer-clip{min-height:0;overflow:hidden}
.pxlv-faq-answer{margin-top:.694444vw;padding:.694444vw;border-radius:1.041667vw;background:#f6f6f6}
@media(prefers-reduced-motion:reduce){.pxlv-faq-answer-wrap{transition:none}}
.pxlv-faq-answer p{margin:0;font-size:.972222vw;line-height:1.42}
.pxlv-faq-answer--empty p{color:var(--pxlv-muted);font-style:italic}

/* --- sidebar ToC (dot markers + guide line) --- */
/* ToC — Figma 678:15356: vertical guide line (#d9d9d9), dots SITTING ON the line,
   NO horizontal separators, tight 15px gaps (reviewer #8/S6/M5). */
.pxlv-toc-title{font-size:1.666667vw}
.pxlv-toc-items{position:relative;display:flex;flex-direction:column;gap:.694444vw;margin-top:1.388889vw;margin-left:.555556vw;padding-left:1.666667vw;border-left:0}
.pxlv-toc-item{position:relative;display:block;padding:0;border:none;color:var(--pxlv-body);font-size:.833333vw;line-height:1.4;text-decoration:none}
/* dot centred on the item's first text line; dot centre X = -1.736111vw */
.pxlv-toc-dot{position:absolute;left:-2.013889vw;top:.3125vw;width:.555556vw;height:.555556vw;flex:0 0 auto;border-radius:50%;background:#d9d9d9}
/* guide line built per-item: each item (except the last) draws a 2px segment from
   its own dot centre down to the NEXT dot centre (item height + 15px gap). Result:
   the line starts exactly at the FIRST dot centre and ends at the LAST — no overshoot
   above/below (Figma 678:15356, reviewer #3). */
.pxlv-toc-item:not(:last-child)::before{content:'';position:absolute;left:-1.736111vw;top:.590278vw;width:2px;height:calc(100% + .694444vw);transform:translateX(-50%);background:#d9d9d9}
/* Neutralise a STALE platform-injected baseline still living in the pilot's <head>:
   its `.pxlv-toc a{padding:.625vw 0;border-bottom:1px}` (0,1,1) drew separators + extra
   item padding. This higher-specificity reset (0,2,0) always wins (stale has no !important). */
.pxlv-toc .pxlv-toc-item,.pxlv-mobile-toc .pxlv-toc-item{padding:0;border:0}
.pxlv-toc-item:hover{color:var(--pxlv-text)}
/* scroll-spy: JS ставит aria-current="location" на пункт секции, до которой доскроллили.
   Подсветка без bold (без reflow/переноса строки): тёмный текст + лаймовая крупная точка. */
.pxlv-toc-item{transition:color .2s ease}
.pxlv-toc-dot{transition:background-color .2s ease,transform .2s ease}
.pxlv-toc-item[aria-current="location"]{color:var(--pxlv-text)}
.pxlv-toc-item[aria-current="location"] .pxlv-toc-dot{background:var(--pxlv-accent);transform:scale(1.45)}

/* --- sidebar lead-magnet CTA (dark) --- */
/* Figma 678:15357: 286×327 card, title+subtext pinned top, accent button pinned
   bottom, robot art fills the gap between. min-height + space-between reserve room
   so the button is FULLY visible and the art sits in the gap (reviewer #8 — card was
   collapsing to content height and the bottom-anchored art got cut). */
.pxlv-side-cta{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.041667vw;min-height:17.5vw;padding:1.388889vw;color:#f6f6f6;background:#0b0b0a;overflow:hidden}
/* real robot art: full-bleed, anchored to the card bottom (its black blends with the card) */
.pxlv-side-cta-media{position:absolute;left:0;right:0;bottom:0}
/* Робот уменьшен и прижат вправо-вниз — карточка ужата по правилу заказчика
   (сокращать CTA, а не выносить из sticky), единообразно на всех вьюпортах */
.pxlv-side-cta-media img{display:block;width:80%;margin-left:auto;height:auto;object-fit:cover;object-position:right bottom}
.pxlv-side-cta-copy{position:relative;display:flex;flex-direction:column;gap:.972222vw;z-index:1}
.pxlv-side-cta-title{margin:0;font-size:1.388889vw;line-height:1.4}
.pxlv-side-cta p{margin:0;max-width:72%;font-size:.833333vw;line-height:1.4}
/* side-CTA button — Figma 678:15357: SOLID accent (not gradient), 42px, 14/700 */
.pxlv-side-cta .pxlv-button{position:relative;right:auto;bottom:auto;left:auto;width:100%;min-height:2.916667vw;padding-block:.833333vw;font-size:.972222vw;font-weight:500;z-index:1}

/* --- author bio — Figma 678:15358: heading/name/role/bio LEFT-aligned, photo centred (reviewer #18) --- */
.pxlv-author-card{display:flex;flex-direction:column;align-items:stretch;gap:1.388889vw;text-align:left;padding:2.083333vw 1.388889vw}
.pxlv-author-card h2,.pxlv-author-card .pxlv-author-h{margin:0;align-self:stretch;text-align:left;font-size:1.666667vw;line-height:1.15}
.pxlv-author-photo{width:10.416667vw;height:10.416667vw;flex:0 0 auto;margin:0 auto;overflow:hidden;border-radius:50%;background:var(--pxlv-bg)}
.pxlv-author-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.pxlv-author-card strong{font-size:.972222vw;font-weight:700;line-height:1.35;color:var(--pxlv-body)}
.pxlv-author-role{margin:0;color:var(--pxlv-muted);font-size:.833333vw;line-height:1.4}
.pxlv-author-namebox{display:flex;flex-direction:column;gap:.694444vw}
.pxlv-author-bio{margin:0;font-size:.972222vw;line-height:1.55;color:var(--pxlv-body)}
/* «Все статьи автора» — plashka (customer preference) + arrow → (Figma 678:15358: 16px #2b2b2b, gap10) */
.pxlv-author-link{display:flex;align-items:center;justify-content:center;gap:.694444vw;align-self:stretch;min-height:3.125vw;padding:.833333vw 1.388889vw;border:1.5px solid var(--pxlv-line);border-radius:1.041667vw;color:var(--pxlv-text);font-size:.972222vw;font-weight:500;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.pxlv-author-link .pxlv-arrow{width:1.111111vw;height:1.111111vw}
.pxlv-author-link:hover{border-color:var(--pxlv-body);background:var(--pxlv-bg)}
.pxlv-arrow{flex:0 0 auto}

/* --- subscribe card (VK + MAX only) --- */
.pxlv-social-card{display:flex;flex-direction:column;gap:2.083333vw;padding:2.083333vw 1.388889vw}
.pxlv-social-head{display:flex;flex-direction:column;gap:1.388889vw}
.pxlv-social-title{margin:0;font-size:1.666667vw;line-height:1.15}
.pxlv-social-card p{margin:0;font-size:.833333vw;line-height:1.4;color:var(--pxlv-body)}
.pxlv-social-btns{display:flex;flex-direction:column;gap:.694444vw}
.pxlv-social-btn{display:flex;align-items:center;justify-content:center;gap:.694444vw;padding:1.111111vw 1.944444vw;border-radius:var(--pxlv-radius);color:#f6f6f6;font-size:.972222vw;font-weight:500;text-decoration:none}
.pxlv-social-btn svg{flex:0 0 auto}
/* brand icon sizing (Figma 678:15359: VK 24×14, MAX 18×18) */
.pxlv-social-ic{flex:0 0 auto}
.pxlv-social-ic--vk{width:1.666667vw;height:auto}
.pxlv-social-ic--max{width:1.25vw;height:1.25vw;object-fit:contain}
.pxlv-social-btn--vk{background:#2586fd}
.pxlv-social-btn--max{background:#8542fb}

/* --- related cards (link, chips one row, hover) --- */
.pxlv-related-title{font-size:1.666667vw}
.pxlv-related-header a{display:inline-flex;align-items:center;gap:.416667vw}
.pxlv-related-card{background:#fff;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.pxlv-related-card:hover{transform:translateY(-.416667vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08)}
.pxlv-related-media{transition:transform .3s ease}
.pxlv-related-card:hover .pxlv-related-media{transform:scale(1.05)}
.pxlv-related-copy h3{font-size:1.180556vw;line-height:1.2;font-weight:600}
.pxlv-tags--sm{flex-wrap:nowrap}
.pxlv-tags--sm .pxlv-tag{min-height:auto;padding:.277778vw .694444vw;font-size:.833333vw;white-space:nowrap}
.pxlv-tag--ghost{border-color:var(--pxlv-line);background:#fff}
.pxlv-related-meta{display:flex;gap:1.020833vw;margin-top:auto;color:var(--pxlv-muted);font-size:.694444vw}
.pxlv-related-meta .pxlv-meta-item{gap:.277778vw}
.pxlv-related-meta .pxlv-ic{width:.902778vw;height:.902778vw}

/* --- bottom CTA gradient button --- */
.pxlv-button--gradient{color:var(--pxlv-text);background:linear-gradient(193deg,#deff3f 6%,#22d48d 110%)}

/* --- download-icon buttons (any «Скачать» CTA — R6) --- */
/* 18px @1440, fluid so it grows on 2560 like the «Войти» login icon; gap 8px icon→text */
.pxlv-btn-dl{width:1.25vw;height:1.25vw;flex:0 0 auto}
.pxlv-side-cta .pxlv-button,.pxlv-bottom-cta .pxlv-button--gradient{gap:.555556vw}

/* --- ховеры кнопок: ЕДИНЫЙ стиль, БЕЗ подъёма и тени (замечание заказчика) ---
   Как у «Войти»: только «свет» + «контур». Заливные (VK/MAX/лайм-accent/градиент,
   включая шапочную «Зарегистрироваться» = .pxlv-button--accent) — лёгкое затемнение.
   Контурные («Посмотреть возможности» = ghost) — как «Войти»: контур + чуть заливки. */
.pxlv-button,.pxlv-social-btn{transition:filter .15s ease,background-color .15s ease,border-color .15s ease}
.pxlv-social-btn:hover,.pxlv-button--accent:hover,.pxlv-button--gradient:hover{filter:brightness(1.06);box-shadow:0 .416667vw 1.111111vw rgba(216,249,83,.35);transform:translateY(-1px)}
.pxlv-button--gradient,.pxlv-button--accent{transition:filter .15s ease,box-shadow .15s ease,transform .15s ease}
.pxlv-button--ghost:hover{border-color:#fff;background:rgba(246,246,246,.1)}

/* --- site header (Figma 1500:43469) --- */
/* fixed (not sticky): the platform wraps the entity in an 88px section, so sticky
   can't traverse the page — fixed + an in-flow spacer keeps it pinned without layout shift. */
.pxlv-site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid #d9d9d9}
.pxlv-header-spacer{height:6.111111vw}
.pxlv-site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.388889vw;width:var(--pxlv-container);height:6.111111vw;margin-inline:auto}
.pxlv-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--pxlv-text)}
/* real DS vector logo «Dark logo» 438:9075; height 46px @1440 (mark size), width auto */
.pxlv-logo-svg{display:block;height:3.194444vw;width:auto}
/* nav на всю высоту шапки: панель дропдауна открывается от НИЗА шапки, а не от
   пункта — раньше панель+мостик ложились на строку меню и «липли» к курсору
   над соседними пунктами (заказчик 2026-07-17) */
/* зазор между плашками навигации = 16px по макету (было 28 — с плашками ряд разъезжался) */
.pxlv-site-nav{display:flex;align-items:stretch;align-self:stretch;gap:1.111111vw}
.pxlv-site-nav>.pxlv-nav-item{align-self:center}
/* Пункт навигации — плашка (макет Desktop Header): высота 40, r10, серый фон на наведении. */
.pxlv-nav-item{display:inline-flex;align-items:center;gap:.277778vw;height:2.777778vw;padding:0 .694444vw;
  flex:0 0 auto;white-space:nowrap;
  border-radius:.694444vw;color:var(--pxlv-text);font-size:.972222vw;font-weight:500;text-decoration:none;
  transition:background .14s ease,color .14s ease}
.pxlv-nav-item:hover{color:#000;background:#eee}
.pxlv-nav-group:hover>.pxlv-nav-item{background:#eee}
/* «Написать статью» — это ДЕЙСТВИЕ (открывает попап с формой), а не раздел: показываем
   его кнопкой-контуром, а не текстом. Иконка-карандаш убрана — она была маркером
   «ссылка ещё не задана», а пункт давно рабочий (заказчик 2026-08-04). */
.pxlv-nav-item[href="#"]{border:1.5px solid #c9c9c9;padding:0 1.111111vw;color:#262626}
.pxlv-nav-item[href="#"]:hover{background:#eee;border-color:#8a8a8a}
/* nav chevron — Figma header Icon/chevron-down (1369:42790): 14×14 frame, balanced
   rounded "bird-down" (NOT the old flat 8×4). Chevron arms span the frame with round
   caps/joins; drawn at full 14px box (fluid vw) so it reads larger/centred (R5 header). */
.pxlv-nav-chev{width:.972222vw;height:.972222vw;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75 10.5 5.25' fill='none' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pxlv-nav-search{display:inline-flex;align-items:center;justify-content:center;width:1.25vw;height:1.25vw;padding:0;border:0;background:none;color:var(--pxlv-text);cursor:pointer}
.pxlv-nav-search svg{width:100%;height:100%}
.pxlv-nav-search:hover{color:#000}

/* --- header dropdowns (Figma 1369:42790 «Главная ▾» mega-menu + «Рубрики ▾») --- */
.pxlv-nav-group{position:relative;display:inline-flex;align-items:center}
.pxlv-nav-group:hover .pxlv-nav-chev{transform:rotate(180deg)}
.pxlv-nav-chev{transition:transform .18s ease}
/* Neutralise the STALE baseline still in the pilot's <head>: it renders chevrons as
   rotated border-corners (.pxlv-nav-chev/.pxlv-faq-chevron/.pxlv-mmenu-chev with
   border-right/border-bottom + rotate(45deg)). Our clean SVG-bg chevrons inherit that
   leaked border + base transform → «bent bow». Reset border (+ base transform on
   nav-chev, which is the only one without its own base transform) so the SVG wins
   (reviewer #4; live-only stale interference, no !important in stale = order wins). */
.pxlv-nav-chev{border:0;transform:none}
.pxlv-faq-chevron,.pxlv-mmenu-chev{border:0}
/* закрытая панель НЕ ловит курсор (pointer-events:none + мгновенный visibility):
   раньше 180мс исчезающая панель перехватывала hover соседнего пункта — «дёргалось» */
.pxlv-dropdown{position:absolute;top:100%;left:-1.111111vw;z-index:1100;padding:1.666667vw;background:#fff;border:1px solid #d9d9d9;border-radius:1.111111vw;box-shadow:0 1.111111vw 2.777778vw rgba(0,0,0,.1);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(.416667vw);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
/* invisible hover bridge so the pointer can travel from the item to the panel */
.pxlv-nav-group:hover .pxlv-dropdown,.pxlv-nav-group:focus-within .pxlv-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}
.pxlv-dropdown--mega{width:38.888889vw}
.pxlv-dropdown--rubrics{width:25vw;padding:1.111111vw}
.pxlv-dd-modules{display:grid;grid-template-columns:1fr 1fr;gap:.277778vw}
.pxlv-dd-mod,.pxlv-dd-row{display:flex;align-items:center;gap:.833333vw;padding:.694444vw;border-radius:.833333vw;text-decoration:none;color:var(--pxlv-text);transition:background .14s ease}
.pxlv-dd-mod:hover,.pxlv-dd-row:hover{background:var(--pxlv-bg)}
/* «Переезд на XL» (star item): no permanent fill — grey appears on hover only,
   like every other row via .pxlv-dd-row:hover above (reviewer). */
.pxlv-dd-ico{display:grid;place-items:center;width:2.777778vw;height:2.777778vw;flex:0 0 auto;border-radius:.694444vw;background:#e6e6e6}
.pxlv-dd-ico svg{width:1.527778vw;height:1.527778vw;color:#2b2b2b}
.pxlv-dd-txt{display:flex;min-width:0;flex-direction:column;gap:.138889vw}
.pxlv-dd-txt strong{font-size:1.111111vw;font-weight:400;line-height:1.4;color:#262626}
.pxlv-dd-txt small{font-size:.694444vw;line-height:1.35;color:var(--pxlv-muted)}
.pxlv-dd-list{display:flex;flex-direction:column;gap:.277778vw}
.pxlv-dd-divider{height:1px;margin:.833333vw 0;background:var(--pxlv-line)}
.pxlv-dd-foot{display:inline-flex;align-items:center;gap:.416667vw;font-size:.972222vw;font-weight:500;color:#262626;text-decoration:none}
.pxlv-dd-foot svg{width:1.111111vw;height:1.111111vw}
/* Пункты выпадашки — по макету Dropdown/Item: высота 64, r12, плитка иконки 40x40 r11,
   заголовок 14/700, подпись 12/400 #767676 (было: 16/400 и подпись 10px). */
.pxlv-dropdown--rubrics .pxlv-dd-row{gap:.833333vw;min-height:4.444444vw;padding:.694444vw .833333vw;border-radius:.833333vw}
.pxlv-dropdown--rubrics .pxlv-dd-ico{width:2.777778vw;height:2.777778vw;border-radius:.763889vw;background:#eee}
.pxlv-dropdown--rubrics .pxlv-dd-txt strong{font-size:.972222vw;font-weight:700;line-height:1.4}
.pxlv-dropdown--rubrics .pxlv-dd-txt small{font-size:.833333vw;line-height:1.35;color:#767676}

/* ⏸ «О продукте» временно НЕ раскрывается: страницы продукта ещё не готовы (заказчик 2026-08-04).
   Вернуть = удалить эти два правила. */
.pxlv-dropdown--mega{display:none !important}
.pxlv-nav-item[href^="https://xl.ru"] .pxlv-nav-chev,
.pxlv-mmenu-acc--product .pxlv-mmenu-chev{display:none}

/* ══ РУБРИКА v2 · блок 01 — хлебные крошки ══════════════════════════════════════
   Макет 593:7874: полоса во всю ширину, белый фон, 12/400 #6e6e6e, шеврон 14, зазор 7.
   Роли типографики — общие (--pxl-fs-*), как на главной. Мобильные отступы в px (журнал §54). */
/* Полоса во всю ширину ЭКРАНА: блок конструктора даёт свои поля и центрирует контент —
   фиксированные отступы их не перекрывают (журнал §50). 100vw не зависит от вложенности. */
.pxlr-crumbs{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#fff}
.pxlr-crumbs-list{display:flex;flex-wrap:wrap;align-items:center;gap:.486111vw;
  width:83.333333vw;margin:0 auto;padding:1.111111vw 0;list-style:none;
  font-size:var(--pxl-fs-small);line-height:1.4;color:#6e6e6e}
.pxlr-crumbs-item{display:inline-flex;align-items:center;gap:.486111vw;min-width:0}
.pxlr-crumbs-item a{color:#6e6e6e;text-decoration:none;transition:color .15s ease}
.pxlr-crumbs-item a:hover{color:#262626}
.pxlr-crumbs-item [aria-current]{color:#262626}
.pxlr-crumbs-sep{display:inline-flex;flex:0 0 auto}
.pxlr-crumbs-sep svg{width:.972222vw;height:.972222vw;color:#a8a8a8}
/* ЩИТ: конструктор красит любые <a> своим синим #4a90e2 — перебиваем повышенной специфичностью
   (тот же приём, что для карточек ленты; журнал §29з). Проверять ЦВЕТ ссылок в каждом новом блоке. */
.ez-wrapper .ez .pxlr-crumbs a,.pxlv-block .pxlr-crumbs a{color:#6e6e6e}
.ez-wrapper .ez .pxlr-crumbs a:hover,.pxlv-block .pxlr-crumbs a:hover{color:#262626}

/* ══ РУБРИКА v2 · блок 02 — hero ════════════════════════════════════════════════
   Макет 593:7874: белая карточка 1200x378 r28, слева контент 510, справа арт 600x320,
   подтемы в строку с вертикальными разделителями. Типографика — роли главной. */
/* Верхний воздух: заказчик выбрал вариант B (2026-08-05) — было 112px от крошек до H1 на 1440
   и 205 на 2560 (в долях ширины отступ растёт быстрее контента), стало 78 и 143.
   Меньше не делаем намеренно: крошки должны читаться как отдельная строка пути, а не как часть hero. */
.pxlr-hero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:.694444vw 0 0;background:#fff}
.pxlr-hero-card{display:grid;grid-template-columns:minmax(0,510fr) minmax(0,600fr);align-items:center;
  gap:1.527778vw;width:83.333333vw;margin:0 auto;padding:1.388889vw 0 1.944444vw;
  border-radius:1.944444vw;background:#fff;box-sizing:border-box}
/* Боковых паддингов у карточки НЕТ намеренно (заказчик 2026-08-05: «не по сетке, глаза режет»).
   Фон hero и фон карточки одинаково белые — рамка карточки визуально не читается, а внутренний
   отступ 44px сдвигал H1 и подтемы вправо от колонки 83.333vw, по которой стоят крошки,
   «Популярное» и все карточки ниже. Обнуление боковых полей ставит текст ровно на сетку. */
.pxlr-hero-copy{display:flex;flex-direction:column;gap:.972222vw;min-width:0}
.pxlr-hero-h1{margin:0;font-size:var(--pxl-fs-hero);line-height:var(--pxl-lh-hero);font-weight:900;color:#1b1b1b}
.pxlr-hero-lead{margin:0;font-size:var(--pxl-fs-body);line-height:1.5;color:#575757;max-width:34.722222vw}
/* подтемы рубрики */
.pxlr-topics{display:flex;align-items:stretch;gap:0;margin:.694444vw 0 0;padding:0;list-style:none}
/* иконка СЛЕВА от названия, подпись под ними (макет: Icon 30 + Title в ряд, Label ниже) */
.pxlr-topic{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:.486111vw;row-gap:.347222vw;flex:1 1 0;min-width:0;padding:0 1.25vw}
.pxlr-topic-txt{display:contents}
.pxlr-topic-txt strong{grid-area:1/2}
.pxlr-topic-txt small{grid-column:1/-1}
.pxlr-topic:first-child{padding-left:0}
.pxlr-topic:last-child{padding-right:0}
.pxlr-topic+.pxlr-topic{border-left:1px solid #e3e3e3}
.pxlr-topic-ic{display:inline-flex;align-items:center;justify-content:center;width:2.083333vw;height:2.083333vw;flex:0 0 auto}
.pxlr-topic-ic svg{width:1.666667vw;height:1.666667vw;color:#262626}

.pxlr-topic-txt strong{font-size:var(--pxl-fs-body);font-weight:600;line-height:1.3;color:#262626}
.pxlr-topic-txt small{font-size:var(--pxl-fs-small);line-height:1.35;color:#575757}
.pxlr-hero-art{position:relative;border-radius:1.388889vw;overflow:hidden;aspect-ratio:600/320}
.pxlr-hero-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}

/* ─── рубрика v2 · блок 04 «Свежие материалы» — КЛАДКА 2+3 ──────────────────────
   Ритм задаётся МАСШТАБОМ карточек, а не разной обрезкой картинок: окно медиа
   везде 16:9 — ровно пропорция наших обложек (замер: 774x438, 1672x941), поэтому
   кадр не режется (в крупной карточке «Популярного» окно 1.03 и теряется 42% ширины).
   Высота карточки НЕ задана: текст занимает сколько нужно, ряд выравнивается по самой
   высокой карточке — многоточий не возникает в принципе (журнал §47).
   Ряды по 2 и по 3 всегда полные; неполный остаток выводится широкими строками. */
.pxlf-rows{display:flex;flex-direction:column;gap:1.388889vw}
.pxlf-grid{display:grid;gap:1.388889vw}
/* ⚠ ОБЯЗАТЕЛЬНО: любой заданный классом display перебивает браузерное [hidden]{display:none}
   (у встроенного правила специфичность ниже класса). Без этой строки скрытые ряды ленты
   оставались на экране, кнопка «Показать ещё» щёлкала вхолостую — заказчик 2026-08-05:
   «кнопку ещё не вижу работающую». */
.pxlf-grid[hidden]{display:none}
.pxlf-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pxlf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pxlf-grid--rows{grid-template-columns:minmax(0,1fr)}
.pxlf-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--pxl-border);
  border-radius:1.041667vw;overflow:hidden;text-decoration:none;color:var(--pxl-text);
  transition:transform .2s ease,box-shadow .2s ease}
.pxlf-card:hover{transform:translateY(-.277778vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08)}
.pxlf-media{display:block;aspect-ratio:16/9;background:#161616;overflow:hidden}
.pxlf-media img{display:block;width:100%;height:100%;object-fit:cover}
.pxlf-copy{display:flex;flex-direction:column;gap:.555556vw;padding:1.111111vw 1.388889vw 1.25vw;flex:1}
.pxlf-h{font-size:var(--pxl-fs-h3);line-height:1.2;font-weight:600}
.pxlf-lead{font-size:var(--pxl-fs-small);line-height:1.5;color:#575757}
.pxlf-card .pxlh-meta:last-child{margin-top:auto;padding-top:.694444vw}
/* Широкая строка — «хвост» неполного ряда: медиа слева, та же пропорция 16:9.
   Доля медиа 22%: при 26% строка по площади обгоняла крупную карточку «Популярного»,
   а витрина обязана оставаться главнее ленты (заказчик 2026-08-05).
   margin-top у меты сброшен: иначе время улетало вниз и под коротким лидом висела пустота. */
.pxlf-card--row{display:grid;grid-template-columns:minmax(0,22fr) minmax(0,78fr);align-items:stretch}
.pxlf-card--row .pxlf-media{height:100%}
.pxlf-card--row .pxlf-copy{padding:1.111111vw 1.666667vw;justify-content:center}
.pxlf-card--row .pxlh-meta:last-child{margin-top:0;padding-top:.277778vw}
/* ─── рубрика v2 · блок 05 «Подборки» ─────────────────────────────────────────
   Карточки — те же, что на главной (.pxlh-pick). Отличие одно: у рубрики подборок
   3-4, а не девять, поэтому колонок ДВЕ — при трёх колонках четвёртая карточка
   оставалась одна в ряду, а растягивать её на всю ширину значило спорить по весу
   с лентой выше. Две колонки дают ровный прямоугольник при 4 подборках. */
/* ─── рубрика v2 · блок 07 FAQ ─────────────────────────────────────────────────
   Макет: сетка 2 колонки по 2 вопроса, плашка r15, вопрос слева, шеврон справа.
   <details> вместо скрипта: аккордеон работает без JS, а ответ лежит в разметке —
   поиск и языковые модели видят его, даже когда он свёрнут. */
.pxlr-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.833333vw;align-items:start}
.pxlr-faq-item{background:#fff;border:1px solid var(--pxl-border);border-radius:1.041667vw;
  padding:1.388889vw 1.666667vw}
.pxlr-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1.111111vw;
  cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none}
.pxlr-faq-item summary::-webkit-details-marker{display:none}
.pxlr-faq-q{font-size:var(--pxl-fs-body);line-height:1.5;font-weight:500;color:#262626}
.pxlr-faq-ic{display:grid;place-items:center;flex:0 0 auto;width:2.222222vw;height:2.222222vw;
  border-radius:.555556vw;background:var(--pxl-light);transition:transform .2s ease}
.pxlr-faq-ic .pxl-ico{width:1.111111vw;height:1.111111vw;color:#262626}
.pxlr-faq-item[open] .pxlr-faq-ic{transform:rotate(180deg)}
.pxlr-faq-a{padding-top:.694444vw}
.pxlr-faq-a p{margin:0;font-size:var(--pxl-fs-small);line-height:1.6;color:#575757}
/* ссылка на статью внутри ответа: подчёркнутая, тем же цветом — не спорит с текстом.
   ⚠ щит от синего цвета ссылок конструктора (§65) */
.pxlr-faq-link,.ez-wrapper .ez .pxlr-faq-link,.pxlv-block .pxlr-faq-link{
  color:#262626;text-decoration:underline;text-underline-offset:.138889vw;
  text-decoration-color:rgba(38,38,38,.35);transition:text-decoration-color .15s ease}
.pxlr-faq-link:hover{text-decoration-color:#262626}

/* ─── рубрика v2 · КАРТОЧКА ПЛАНИРУЕМОЙ СТАТЬИ ─────────────────────────────────
   Страница рубрики обязана показывать полный состав материалов (12-13 статей),
   но вести на ненаписанные адреса нельзя. Поэтому карточка ненаписанной статьи —
   не ссылка, а блок: без ховера, без курсора-руки, с меткой «Скоро» вместо даты
   и приглушённым текстом. Как только статья выходит, генератор сам делает её ссылкой. */
.pxlr-card--soon{cursor:default}
.pxlr-card--soon:hover{transform:none;box-shadow:none}
.pxlr-card--soon .pxlh-mbig-h,.pxlr-card--soon .pxlh-mrow-h,.pxlr-card--soon .pxlf-h{color:#4a4a4a}
/* Чип «Скоро». ⚠ Специфичность повышена намеренно: правило .pxlf-card .pxlh-meta:last-child
   ставит padding-top:10px нижней мете карточки, а чип — тоже .pxlh-meta и тоже последний
   у своего родителя. Из-за этого он получал 10px сверху и 3 снизу: текст сидел не по центру,
   высота 30px против 24 у соседней пилюли (замер 2026-08-06). Держим ту же геометрию,
   что у .pxl-tag, чтобы чип и пилюля стояли в одну линию. */
.pxlh-meta--soon,
.pxlf-card .pxlh-row .pxlh-meta--soon,
.pxlh-mbig .pxlh-row .pxlh-meta--soon,
.pxlh-mrow .pxlh-row .pxlh-meta--soon{display:inline-flex;align-items:center;justify-content:center;
  padding:.416667vw .694444vw;margin:0;border-radius:999px;background:var(--pxl-light);color:#767676;
  font-size:var(--pxl-fs-small);font-weight:500;line-height:1;white-space:nowrap}
/* Заглушка обложки — СВЕТЛАЯ, а не тёмная: пока статей нет, тёмных плашек на странице
   больше десятка, и они перетягивают на себя всю страницу. Светлая читается как
   «изображения пока нет» и не спорит с настоящими обложками, когда те появятся. */
/* ⚠ двойные классы: у .pxlh-mbig-media / .pxlh-mrow-media / .pxlf-media свой тёмный фон,
   объявленный НИЖЕ в файле, — одиночный класс он перебивал (тот же класс ошибок, что §71) */
.pxlr-media--empty,
.pxlh-mbig-media.pxlr-media--empty,.pxlh-mrow-media.pxlr-media--empty,
.pxlf-media.pxlr-media--empty,.pxlr-coll-media.pxlr-media--empty{
  background:repeating-linear-gradient(135deg,#f2f2f2 0 8px,#ededed 8px 16px);position:relative}
.pxlr-media--empty::after{content:"";position:absolute;left:50%;top:50%;width:1.666667vw;height:1.666667vw;
  transform:translate(-50%,-50%);border-radius:50%;background:#d8f953;opacity:.55}
/* бейдж «Рекомендуем» на первой карточке ленты (макет + документ) */
.pxlf-badge{background:#d8f953;color:#1f1f1f;font-weight:600}

/* ─── рубрика v2 · блок 06 CTA «Написать статью» ───────────────────────────────
   Плашка по макету: слева текст и кнопка, справа арт. Кнопка лаймовая — единственный
   акцентный элемент страницы, поэтому в блоках выше кнопки намеренно светлые. */
.pxlr-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:1.666667vw;background:#fff;border:1px solid var(--pxl-border);border-radius:1.527778vw;
  padding:1.111111vw 3.472222vw 1.111111vw 1.388889vw;min-height:9.166667vw}
/* Арт БЕЗ выступа за плашку, хотя в макете он выступает: у присланной картинки
   фон белый и непрозрачный, поэтому выступающая часть читалась как белый прямоугольник
   на сером фоне страницы. Белые поля срезаны при конвертации (trim), картинка ложится
   на белую плашку без видимой рамки. */
.pxlr-cta-art{display:block;width:20.833333vw;flex:0 0 auto}
.pxlr-cta-art img{display:block;width:100%;height:auto}
.pxlr-cta-copy{display:flex;flex-direction:column;gap:.416667vw;min-width:0}
.pxlr-cta-h{margin:0;font-size:var(--pxl-fs-h3);line-height:1.27;font-weight:600;color:#181818}
.pxlr-cta-text{margin:0;font-size:var(--pxl-fs-small);line-height:1.38;color:#5c5c5c}
/* кнопка справа в одну строку с текстом (макет 184x48 r14 #c7fa21) */
.pxlr-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.555556vw;flex:0 0 auto;
  height:3.333333vw;padding:0 1.388889vw;border:0;border-radius:.972222vw;background:#c7fa21;color:#181818;
  font-family:inherit;font-size:var(--pxl-fs-small);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s ease}
.pxlr-cta-btn:hover{background:#b9ec12}
.pxlr-cta-btn .pxl-ico{width:1.25vw;height:1.25vw}

/* Карточка подборки: строка как в шаблоне подборки (картинка слева, текст справа),
   но в ДВЕ колонки, с описанием, счётчиком материалов и кнопкой (заказчик 2026-08-05).
   Медиа 16:9 — обложка первой статьи подборки, кадр не режем. */
.pxlr-colls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.388889vw}
.pxlr-coll{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);align-items:stretch;
  background:#fff;border:1px solid var(--pxl-border);border-radius:1.041667vw;overflow:hidden;
  text-decoration:none;color:var(--pxl-text);transition:transform .2s ease,box-shadow .2s ease}
.pxlr-coll:hover{transform:translateY(-.277778vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08)}
/* ⚠ БЕЗ aspect-ratio при height:100%: растянутая по высоте карточка считала бы ширину
   из пропорции и медиа вылезало поверх текста (тот же механизм, что ловил на 375 в блоке 04).
   Пропорцию держим долей колонки 38% — замер даёт ~1.7 против исходных 1.78, потеря кадра 5%. */
.pxlr-coll-media{width:100%;height:100%;background:#161616;overflow:hidden;display:grid;place-items:center}
.pxlr-coll-media img{display:block;width:100%;height:100%;object-fit:cover}
.pxlr-coll-ic .pxl-ico{width:2.222222vw;height:2.222222vw;color:#c7fa21}
.pxlr-coll-copy{display:flex;flex-direction:column;gap:.416667vw;padding:1.111111vw 1.388889vw}
.pxlr-coll-h{font-size:var(--pxl-fs-h3);line-height:1.2;font-weight:600}
.pxlr-coll-text{font-size:var(--pxl-fs-small);line-height:1.45;color:#767676;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pxlr-coll-foot{display:flex;align-items:center;justify-content:space-between;gap:.694444vw;
  margin-top:auto;padding-top:.694444vw}
.pxlr-coll-cnt{font-size:var(--pxl-fs-small);color:#767676;white-space:nowrap}
/* кнопка светлая: четыре тёмные плашки в блоке перетянули бы вес на себя */
.pxlr-coll-btn{display:inline-flex;align-items:center;gap:.277778vw;padding:.486111vw .833333vw;
  border-radius:.694444vw;background:var(--pxl-light);font-size:var(--pxl-fs-small);font-weight:500;
  white-space:nowrap;transition:background .15s ease}
.pxlr-coll-btn .pxl-ico{width:.972222vw;height:.972222vw}
.pxlr-coll:hover .pxlr-coll-btn{background:#e9e9e9}
.ez-wrapper .ez a.pxlr-coll,.pxlv-block a.pxlr-coll{color:var(--pxl-text)}
/* подзаголовок секции — роль body, приглушённый (по макету 14/400 #5c5c5c) */
.pxlr-sec-lead{margin:-.833333vw 0 1.666667vw;font-size:var(--pxl-fs-body);line-height:1.5;color:#5c5c5c}
/* кнопка догрузки + счётчик остатка */
.pxlf-more{display:flex;align-items:center;justify-content:center;gap:.833333vw;margin-top:1.388889vw}
.pxlf-more-btn{appearance:none;border:0;cursor:pointer;background:#0f0f0f;color:#fff;font-family:inherit;
  font-size:var(--pxl-fs-small);font-weight:500;padding:.833333vw 1.666667vw;border-radius:.833333vw;
  transition:background .15s ease}
.pxlf-more-btn:hover{background:#262626}
.pxlf-more-cnt{font-size:var(--pxl-fs-small);color:#7a7a7a}
/* щит от синего цвета ссылок конструктора (журнал §65) */
.ez-wrapper .ez a.pxlf-card,.pxlv-block a.pxlf-card{color:var(--pxl-text)}

.pxlv-site-actions{display:flex;align-items:center;gap:1.388889vw}
/* header buttons — new Desktop Header: both buttons EQUAL height 42px (2.916667vw @1440);
   unified text token Onest 14px(.972222vw)/500; «Войти» has a log-in icon on the left */
/* row-reverse — иконка входа СПРАВА от слова «Войти» (по просьбе заказчика 2026-07-16) */
.pxlv-btn-outline{display:inline-flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:.555556vw;height:2.916667vw;padding:0 1.944444vw;border:1.5px solid #c9c9c9;border-radius:1.041667vw;background:#fff;color:var(--pxlv-text);font-size:.972222vw;font-weight:500;text-decoration:none;white-space:nowrap;transition:border-color .15s ease}
.pxlv-btn-outline svg{width:1.111111vw;height:1.111111vw;flex:0 0 auto}
.pxlv-btn-outline:hover{border-color:var(--pxlv-text)}
.pxlv-site-login{color:var(--pxlv-text);font-size:.972222vw;font-weight:500;text-decoration:none;white-space:nowrap}
.pxlv-site-login:hover{color:#000}
.pxlv-site-cta{min-height:auto;height:2.916667vw;gap:.694444vw;padding:0 1.944444vw;border-radius:1.041667vw;font-size:.972222vw;font-weight:500;white-space:nowrap;transition:filter .15s ease}
/* Вертикальное выравнивание кнопок шапки: методика — центр CAPS-зоны текста ==
   центр кнопки (сверена с видео заказчика 2026-07-16; замер ink_text_only.js).
   Чистый flex-центр даёт caps-текст на ~1.5px@2560 ВЫШЕ центра (метрики Onest) —
   компенсация .06em ВНИЗ. Менять только по ink-замеру, не на глаз. */
.pxlv-btn-outline,.pxlv-site-cta{padding-top:.06em}
.pxlv-site-cta svg{width:1.388889vw;height:1.388889vw}
.pxlv-site-cta:hover{filter:brightness(.95)}
/* burger + mobile dropdown menu (shown only < 1200) */
.pxlv-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border:0;background:none;cursor:pointer}
.pxlv-burger span{display:block;height:2px;width:100%;background:var(--pxlv-text);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.pxlv-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pxlv-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.pxlv-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pxlv-mobile-menu{display:none;border-top:1px solid var(--pxlv-line);background:#fff}
.pxlv-mobile-menu[hidden]{display:none}
/* mobile accordion (Figma 1369:42790 «Mobile Menu Panel Opened») */
.pxlv-mmenu-acc{border-bottom:1px solid var(--pxlv-line)}
.pxlv-mmenu-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;border:0;background:none;color:var(--pxlv-text);font-family:Onest,Arial,sans-serif;font-size:17px;font-weight:600;text-align:left;cursor:pointer}
.pxlv-mmenu-chev{width:12px;height:12px;flex:0 0 auto;background:no-repeat center/12px 7px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1.5 1.5 6 5.5 10.5 1.5' fill='none' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .2s ease}
.pxlv-mmenu-toggle[aria-expanded="true"] .pxlv-mmenu-chev{transform:rotate(180deg)}
/* Раскрытая секция меню — на своей подложке (макет Mobile 375 / Menu States, 2026-08-04):
   серый блок r12, внутри карточки-пункты 60px с иконкой в белой плитке 36x36. */
.pxlv-mmenu-sub{display:flex;flex-direction:column;gap:8px;padding:8px;margin:2px 0 8px;
  background:#f7f7f7;border-radius:12px}
.pxlv-mmenu-sub[hidden]{display:none}
.pxlv-mmenu-mod{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  text-decoration:none;color:var(--pxlv-text);background:transparent;transition:background .15s ease}
.pxlv-mmenu-mod:active{background:#eef0ee}
.pxlv-mmenu-mod .pxlv-dd-ico{width:36px;height:36px;border-radius:10px;background:#fff}
.pxlv-mmenu-mod .pxlv-dd-ico svg{width:20px;height:20px}
.pxlv-mmenu-mod .pxlv-dd-txt{gap:2px}
.pxlv-mmenu-mod .pxlv-dd-txt strong{font-size:14px;font-weight:700;line-height:1.35}
.pxlv-mmenu-mod .pxlv-dd-txt small{font-size:11px;line-height:1.35;color:#767676}
.pxlv-mmenu-item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--pxlv-line);color:var(--pxlv-text);font-size:17px;font-weight:600;text-decoration:none}
.pxlv-mobile-menu-actions{display:flex;flex-direction:column;gap:12px;padding:20px 0}
.pxlv-mmenu-login{display:flex;align-items:center;justify-content:center;padding:12px 0;border:1px solid #d9d9d9;border-radius:999px;color:var(--pxlv-text);font-size:14px;font-weight:500;text-decoration:none}
.pxlv-mobile-menu-actions .pxlv-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:auto;padding:14px 20px;border-radius:999px;font-size:14px;font-weight:500}
.pxlv-mobile-menu-actions .pxlv-button svg{width:20px;height:20px;flex:0 0 auto}
/* ToC anchor offset so targets clear the sticky header */
.pxlv-section[id],[id].pxlv-faq{scroll-margin-top:7.5vw}

/* --- site footer (Figma 678:15362) --- */
/* full-bleed: the platform wraps the footer entity in a container capped at the
   1200-grid (83vw ≈ 2133px @2560), so the dark bar stopped short of the edges
   (reviewer #29). Break out to the viewport with the centred negative-margin trick. */
.pxlv-site-footer{background:var(--pxlv-dark);color:#fff;margin-inline:calc(50% - 50vw)}
.pxlv-site-footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5vw;width:var(--pxlv-container);margin-inline:auto;padding:4.444444vw 0}
.pxlv-foot-col{display:flex;flex-direction:column}
.pxlv-foot-brand{gap:1.666667vw;width:13.888889vw;flex:0 0 auto}
.pxlv-foot-logo{display:inline-flex;text-decoration:none}
/* real DS vector logo «White logo» 438:9077; mark height 41px @1440 */
.pxlv-foot-logo-svg{display:block;height:2.847222vw;width:auto}
/* real badge assets (Sk «Участник» + Реестр российского ПО) — align-self:flex-start
   + width:auto so the flex column's default `stretch` can't distort their aspect (reviewer #28/M7) */
.pxlv-foot-badge-img{display:block;align-self:flex-start;height:1.944444vw;width:auto;max-width:none;flex:0 0 auto;object-fit:contain}
.pxlv-foot-social{display:flex;gap:.833333vw;margin-top:.277778vw}
.pxlv-foot-social a{display:inline-flex;width:1.666667vw;height:1.666667vw;color:#fff;text-decoration:none}
.pxlv-foot-social a img{width:100%;height:100%;object-fit:contain}
.pxlv-foot-reqs{gap:1.388889vw;width:18.75vw;color:#f6f6f6;font-size:.833333vw;line-height:1.4}
.pxlv-foot-reqs p{margin:0}
.pxlv-foot-legal p{margin:0}
.pxlv-foot-links{gap:1.111111vw}
.pxlv-foot-contacts{width:22.916667vw}
.pxlv-foot-docs{width:20.138889vw}
.pxlv-foot-links h3{margin:0;font-size:1.180556vw;font-weight:600;color:#fff;line-height:1.2}
.pxlv-foot-links a{color:#fff;font-size:.972222vw;line-height:1.55;text-decoration:none}
.pxlv-foot-links a:hover{text-decoration:underline}
.pxlv-foot-addr{margin:0;color:#f6f6f6;font-size:.833333vw;line-height:1.4}

/* win over the platform default anchor colour (#4a90e3) that leaks into the
   site header/footer entities — links must be dark (header) / white (footer). */
.pxlv-site-header a,.pxlv-site-header .pxlv-nav-item,.pxlv-site-header .pxlv-site-login,.pxlv-site-header .pxlv-nav-search,.pxlv-btn-outline{color:var(--pxlv-text)!important}
.pxlv-site-cta,.pxlv-site-cta:hover,.pxlv-mobile-menu .pxlv-mmenu-item,.pxlv-mobile-menu .pxlv-site-login{color:var(--pxlv-text)!important}
.pxlv-site-footer a,.pxlv-foot-links a,.pxlv-foot-links h3,.pxlv-foot-social a,.pxlv-foot-logo{color:#fff!important}
.pxlv-foot-addr,.pxlv-foot-reqs{color:#f6f6f6!important}

/* --- responsive (<=1199) --- */
@media(max-width:1199px){
  .pxlv-summary-icon{width:36px;height:36px;border-radius:50%}
  .pxlv-summary-icon svg{width:20px;height:20px}
  .pxlv-summary li::before,.pxlv-checklist li::before{background-size:12px}
  .pxlv-table th,.pxlv-table td{padding:12px 16px}
  .pxlv-table thead th{font-size:14px}
  .pxlv-table tbody td{font-size:13px}
  .pxlv-table .pxlv-tbl-key{width:38%}
  .pxlv-ncards{gap:12px}
  .pxlv-ncard{padding:20px}
  .pxlv-ncard-head{gap:10px;margin-bottom:16px}
  .pxlv-ncard-num{width:28px;height:28px;font-size:14px}
  .pxlv-ncard-head h3{font-size:17px;font-weight:600}
  .pxlv-ncard p{font-size:15px}
  .pxlv-summary-head h2,.pxlv-faq h2,.pxlv-mobile-toc .pxlv-toc-title{font-size:24px}
  .pxlv-faq-list{gap:10px}
  .pxlv-faq-item{padding:20px}
  /* mobile FAQ hierarchy (reviewer A2): question 16/700 > answer 14/400 (was inverted).
     question weight 700 comes from the base .pxlv-faq-item summary rule. */
  .pxlv-faq-item summary{font-size:16px;gap:16px}
  .pxlv-faq-chevron{width:8px;height:8px}
  .pxlv-faq-answer{margin-top:10px;padding:10px;border-radius:15px}
  /* (0,2,1) beats any stale `.pxlv-faq details p` (0,1,2) that could pin the answer to 16px */
  .pxlv-faq-list .pxlv-faq-answer p{font-size:14px}
  .pxlv-toc-items{gap:14px;margin-top:16px;padding-left:16px}
  .pxlv-toc-item{gap:16px;font-size:14px}
  .pxlv-toc-dot{left:-16px;top:5px;width:8px;height:8px}
  .pxlv-toc-item:not(:last-child)::before{left:-12px;top:9px;width:2px;height:calc(100% + 14px);transform:translateX(-50%)}
  .pxlv-mobile-sidebar{display:flex;flex-direction:column;gap:20px}
  .pxlv-author-card,.pxlv-social-card{padding:24px}
  /* R5.4 — mobile inner spacing: base gaps are vw (collapse to 5.2/2.6px @375, cramped/uneven).
     Restore the DESKTOP macet rhythm as fixed px (mobile node 679:17013 is error-content →
     D/M parity: author 20px between elements + 10px name/role; subscribe 30/20/10). Scope under
     .pxlv-mobile-sidebar (0,2,0) so it beats the vw base AND any stale head copy (§16). */
  .pxlv-mobile-sidebar .pxlv-author-card{gap:20px}
  .pxlv-mobile-sidebar .pxlv-author-namebox{gap:10px}
  .pxlv-mobile-sidebar .pxlv-social-card{gap:30px}
  .pxlv-mobile-sidebar .pxlv-social-head{gap:20px}
  .pxlv-mobile-sidebar .pxlv-social-btns{gap:10px}
  .pxlv-author-card h2,.pxlv-author-card .pxlv-author-h,.pxlv-social-title{font-size:22px}
  .pxlv-author-photo{width:150px;height:150px}
  .pxlv-author-card strong{font-size:16px}
  /* author role/bio use vw sizes on desktop (≈3px @375); scope the mobile px override
     under .pxlv-author-card so it out-specifies the base .pxlv-author-role/.pxlv-author-bio
     rules AND any stale head copy (macet 679:17013: role muted ~13px, bio ~14px — R4.1) */
  .pxlv-author-card .pxlv-author-role,.pxlv-social-card p{font-size:13px}
  .pxlv-author-card .pxlv-author-bio{font-size:14px}
  /* scope under .pxlv-author-card so it out-specifies the base .pxlv-author-link
     (0,1,0) vw rule AND any stale head copy — plain (0,1,0) leaked .972vw≈3px @375 */
  .pxlv-author-card .pxlv-author-link{font-size:14px;font-weight:500}
  .pxlv-author-link .pxlv-arrow{width:16px;height:16px}
  .pxlv-social-btn{font-size:14px;font-weight:500;padding:16px 28px}
  .pxlv-social-ic--vk{width:24px;height:auto}
  .pxlv-social-ic--max{width:18px;height:18px}
  .pxlv-related-title{font-size:24px}
  .pxlv-related-copy h3{font-size:17px}
  .pxlv-related-meta{font-size:11px}
  .pxlv-related-meta .pxlv-ic{width:14px;height:14px}
  .pxlv-tags--sm .pxlv-tag{padding:6px 10px;font-size:12px}
  .pxlv-site-header-inner{height:64px;width:min(calc(100% - 32px),960px)}
  .pxlv-header-spacer{height:64px}
  .pxlv-site-nav,.pxlv-site-actions{display:none}
  .pxlv-burger{display:flex}
  .pxlv-mobile-menu{display:block;position:absolute;left:0;right:0;top:64px;max-height:calc(100vh - 64px);overflow-y:auto;padding:8px 16px 24px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .pxlv-mobile-menu[hidden]{display:none}
  .pxlv-logo-svg{height:32px}
  .pxlv-site-footer-inner{flex-wrap:wrap;gap:32px 24px;width:min(calc(100% - 32px),960px);padding:40px 0}
  .pxlv-foot-brand,.pxlv-foot-reqs,.pxlv-foot-contacts,.pxlv-foot-docs{width:calc(50% - 12px)}
  .pxlv-foot-logo-svg{height:38px}
  .pxlv-foot-badge-img{height:26px}
  .pxlv-foot-social a{width:24px;height:24px}
  .pxlv-foot-reqs{font-size:12px;gap:16px}
  .pxlv-foot-links{gap:14px}
  .pxlv-foot-links h3{font-size:17px}
  .pxlv-foot-links a{font-size:14px}
  .pxlv-foot-addr{font-size:12px}
  /* R6 — mobile inner-gap repair (customer: «увеличить отступ иконка→текст, привести
     мобильные отступы в порядок»). Base icon→text / chip / element gaps are vw and
     collapse to 1–4px @375. Restore readable fixed px; scoped ≥ (0,2,0) where a same-name
     base/stale rule sets the vw ghost, so the px wins (§16). Mobile/tablet only — desktop
     (≥1200) keeps the vw rhythm. */
  .pxlv-meta .pxlv-meta-item{gap:8px}              /* hero meta: calendar/clock → date/time (2.6→8) */
  .pxlv-summary .pxlv-summary-head{gap:10px}       /* «Если коротко»: bolt badge → title (3.1→10) */
  .pxlv-social-card .pxlv-social-btn{gap:10px}     /* subscribe: VK/MAX icon → text (2.6→10) */
  .pxlv-related-card .pxlv-related-meta{gap:8px}   /* related card: gap between date/time chips (3.8→8) */
  .pxlv-related-meta .pxlv-meta-item{gap:6px}      /* related card: icon → text inside each chip (1.0→6) */
  .pxlv-author-card .pxlv-author-link{gap:8px}     /* «Все статьи автора»: text → arrow (2.6→8) */
  .pxlv-related-header a{gap:8px}                  /* «Все статьи»: text → arrow (1.6→8) */
  .pxlv-foot-social{gap:8px}                       /* footer: social icons row (3.1→8) */
  .pxlv-btn-dl{width:18px;height:18px}             /* «Скачать» download glyph — fixed px on mobile */
  .pxlv-bottom-cta .pxlv-button--gradient{gap:8px} /* bottom «Скачать»: icon → text (side-cta hidden on mobile) */
}

@media(max-width:520px){
  .pxlv-table{font-size:13px}
  .pxlv-table .pxlv-tbl-key{width:42%}
  .pxlv-site-header-inner{width:100%;padding-inline:16px;gap:12px}
  .pxlv-site-login{display:none}
  .pxlv-site-cta{gap:4px;padding:10px 16px;font-size:13px;border-radius:12px}
  .pxlv-site-cta svg{width:14px;height:14px}
  .pxlv-site-footer-inner{width:100%;padding:40px 16px;flex-wrap:nowrap;flex-direction:column;gap:28px}
  .pxlv-foot-brand,.pxlv-foot-reqs,.pxlv-foot-contacts,.pxlv-foot-docs{width:100%}
  /* R6 — mobile-only text bump for the LARGE pills: 14→16px. Onest + weight 500
     unchanged (ONLY size, ONLY ≤520). Desktop keeps 14/500. Specificity (0,2,0)
     out-specifies the 14px mobile rules (.pxlv-social-btn / .pxlv-button) and, loaded
     last, wins over the stale head copy (§16). Burger «Войти»/«Зарегистрироваться»
     are NOT large pills → left at 14 (untouched). */
  .pxlv-social-card .pxlv-social-btn{font-size:16px;font-weight:500}
  .pxlv-bottom-cta .pxlv-button--gradient,.pxlv-bottom-cta .pxlv-button--ghost{font-size:16px;font-weight:500}
}

@media(max-width:390px){
  .pxlv-logo-svg{height:30px}
}


/* ===== ЛИСТИНГИ (feed) — единый компонент карточки; перенесено из прототипа после утверждения модели (2026-07-16) ===== */
/* Контейнер листингов. В блочном режиме платформа зажимает контент в
   .ez-section-container{max-width:1200px;margin:auto} → на широких экранах наш
   83.3vw прижимался к ЛЕВОМУ краю 1200-контейнера (диагностика 2560: left 680
   вместо 213). margin-left:calc(50% - 41.667vw) центрует по ВЬЮПОРТУ из любого
   центрованного родителя: 1440→0, 1920→-200, 2560→-466. */
.pxlv-feedwrap{width:83.333333vw;margin-left:calc(50% - 41.666667vw);margin-right:0;font-family:Onest,Arial,sans-serif;color:#262626}
.pxlv-feed-crumbs{display:flex;gap:.694444vw;align-items:center;padding:2.777778vw 0 1.388889vw;color:#767676;font-size:.972222vw}
.pxlv-feed-crumbs a{color:inherit;text-decoration:none}
.pxlv-feed-crumbs a:hover{color:#262626}
.pxlv-feed-hero{padding:1.388889vw 0 .694444vw}
.pxlv-feed-hero h1{margin:0 0 .694444vw;font-size:2.777778vw;line-height:1.1;font-weight:700}
.pxlv-feed-hero p{margin:0;max-width:62vw;font-size:1.111111vw;line-height:1.5;color:#767676}
.pxlv-proto-badge{display:inline-block;margin-bottom:.694444vw;padding:.277778vw .833333vw;border-radius:1.388889vw;background:#1a1a1a;color:#d8f953;font-size:.763889vw;font-weight:600;letter-spacing:.04em}
.pxlv-feed-chips{display:flex;flex-wrap:wrap;gap:.694444vw;padding:1.388889vw 0}
.pxlv-chip{display:inline-flex;align-items:center;min-height:2.361111vw;padding:.416667vw 1.388889vw;border:1px solid #e6e6e6;border-radius:1.388889vw;background:#fff;color:#262626;font-size:.972222vw;font-weight:500;cursor:pointer;font-family:inherit;transition:border-color .15s ease,background-color .15s ease}
.pxlv-chip:hover{border-color:#262626}
.pxlv-chip[aria-pressed="true"]{background:#d8f953;border-color:#d8f953}
.pxlv-feed{padding:.694444vw 0 1.388889vw}
.pxlv-feed-title{margin:0 0 1.388889vw;font-size:1.944444vw;font-weight:600}
.pxlv-feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.388889vw}
/* цвет задан ЯВНО с усиленной специфичностью: внутри ez-блока платформенный стиль
   ссылок красит заголовки карточек в синий (урок прототипа 2026-07-16; ср. косяк №14) */
.pxlv-feed-card{text-decoration:none;color:#262626}
a.pxlv-feed-card,a.pxlv-feed-card:hover,a.pxlv-feed-card:visited{color:#262626;text-decoration:none}
.pxlv-feed-card h3,a.pxlv-feed-card h3{color:#262626}

.pxlv-feed-media{aspect-ratio:387/219;overflow:hidden;background:#161616}
.pxlv-feed-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.pxlv-feed-card:hover .pxlv-feed-media img{transform:scale(1.05)}
.pxlv-feed-copy{display:flex;flex:1;flex-direction:column;gap:.833333vw;padding:1.111111vw}
.pxlv-feed-tags{display:flex;flex-wrap:wrap;gap:.416667vw}
.pxlv-feed-tag{display:inline-flex;align-items:center;padding:.277778vw .833333vw;border-radius:1.388889vw;background:#d8f953;font-size:.763889vw;font-weight:500}
.pxlv-feed-tag--ghost{background:#fff;border:1px solid #e6e6e6}
.pxlv-feed-copy h3{margin:0}
.pxlv-feed-meta{display:flex;gap:1.020833vw;margin-top:auto}
.pxlv-feed-status{margin:1.388889vw 0 0;color:#767676;font-size:.972222vw}
.pxlv-feed-pager{display:flex;gap:.694444vw;align-items:center;padding:1.388889vw 0;font-size:.972222vw}
.pxlv-feed-pager a,.pxlv-feed-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:2.361111vw;min-height:2.361111vw;border:1px solid #e6e6e6;border-radius:.833333vw;background:#fff;color:#262626;text-decoration:none}
.pxlv-feed-pager [aria-current="page"]{background:#d8f953;border-color:#d8f953}
.pxlv-feed-pager a:hover{border-color:#262626}
.pxlv-feed-seo{padding:1.388889vw 0;color:#767676;font-size:.972222vw;line-height:1.55;max-width:62vw}

/* ===== Страница рубрики (Figma 413:167; контент-канон blog_site_structure.md §C) ===== */
.pxlv-rsec{padding:1.041667vw 0}
.pxlv-rsec-title{margin:0 0 1.666667vw;font-size:var(--pxl-fs-h2);line-height:1.1;font-weight:700}
/* hero: тёмная карточка r24 #262626 pad30 gap40; текст-колонка 520 gap24 */
.pxlv-rhero{display:flex;gap:2.777778vw;border-radius:1.666667vw;background:#262626;color:#fff;padding:2.083333vw}
.pxlv-rhero-text{display:flex;flex-direction:column;gap:1.666667vw;max-width:38vw}
.pxlv-rhero h1{margin:0;font-size:var(--pxl-fs-h1);line-height:var(--pxl-lh-h1);font-weight:700}
.pxlv-rhero p{margin:0;font-size:1.111111vw;line-height:1.5;color:rgba(255,255,255,.75)}
.pxlv-rhero-badges{display:flex;flex-wrap:wrap;gap:1.666667vw 2.083333vw}
.pxlv-rhero-badge{display:flex;align-items:center;gap:.555556vw;font-size:.972222vw;font-weight:500}
.pxlv-rhero-badge svg{width:1.25vw;height:1.25vw;color:#d8f953;flex:0 0 auto}
/* featured «С чего начать»: белая карточка r25, картинка слева / текст справа */
.pxlv-rfeat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;border-radius:1.736111vw;background:#fff;border:1px solid #e6e6e6}
.pxlv-rfeat-media{min-height:26.25vw;background:#161616}
.pxlv-rfeat-media img{display:block;width:100%;height:100%;object-fit:cover}
.pxlv-rfeat-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.111111vw;padding:2.777778vw;align-self:center}
.pxlv-rfeat-copy h3{margin:0}
.pxlv-rfeat-copy p{margin:0}
/* ЩИТЫ ЦВЕТА ССЫЛОК в блочном режиме. Точный источник синего (найден CSSOM/сетью,
   2026-07-16): idx.xl.ru/site/site/site.min.css → `.ez-wrapper .ez a{color:#4a90e3}`
   специфичность (0,2,1). Перебиваем ТЕМ ЖЕ префиксом → (0,4,1)+. При новых ссылочных
   элементах в ez-блоках — добавлять сюда. */
.ez-wrapper .ez a.pxl-btn--primary{color:#f6f6f6}
.ez-wrapper .ez a.pxl-btn--accent{color:#262626}
.ez-wrapper .ez a.pxl-btn--ghost{color:#262626}
.ez-wrapper .ez a.pxl-btn--on-dark{color:#fff}

.ez-wrapper .ez .pxlv-rcta a.pxlv-button--accent{color:#262626}
.ez-wrapper .ez .pxlv-rcta a.pxlv-button--ghost{color:#fff}
.ez-wrapper .ez .pxlv-rcol-list a{color:#767676}
.ez-wrapper .ez .pxlv-rcol-list a:hover{color:#262626}
.ez-wrapper .ez nav.pxlv-feed-crumbs a{color:#767676}
.ez-wrapper .ez nav.pxlv-feed-crumbs a:hover{color:#262626}
.ez-wrapper .ez a.pxlv-author-soc{color:#262626}
.ez-wrapper .ez nav.pxlv-feed-pager a{color:#262626}
.ez-wrapper .ez a.pxlv-feed-card,.ez-wrapper .ez a.pxlv-feed-card h3{color:#262626}
.ez-wrapper .ez .pxlv-feed-chipsrow a{color:#262626}
/* подборки: 4 карточки 285×380 r15 pad24 gap20 */
.pxlv-rcols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.388889vw}
.pxlv-rcol{display:flex;flex-direction:column;gap:1.388889vw;padding:1.666667vw;border-radius:1.041667vw;background:#fff;border:1px solid #e6e6e6}
.pxlv-rcol-icon{display:grid;place-items:center;width:2.777778vw;height:2.777778vw;border-radius:.694444vw;background:#f6f6f6}
.pxlv-rcol-icon svg{width:1.388889vw;height:1.388889vw;color:#262626}
.pxlv-rcol h3{margin:0;font-size:1.180556vw;line-height:1.2;font-weight:700}
.pxlv-rcol-list{display:flex;flex-direction:column;gap:.833333vw;margin:0;padding:0;list-style:none;flex:1;color:#767676}
/* специфичность (0,1,2)+ — платформенный .ez-html a (0,1,1) красит ссылки в синий (урок №14/прототипа) */
.pxlv-rcol-list li a{color:inherit;font-size:.902778vw;line-height:1.35;text-decoration:none}
.pxlv-rcol-list li a:hover{color:#262626}
.pxlv-rcol-btn{align-self:flex-start}
/* CTA аудит: тёмный r25, текст слева (560) + дашборд справа */
.pxlv-rcta{display:grid;grid-template-columns:minmax(0,1fr) 41.666667vw;align-items:center;overflow:hidden;border-radius:1.736111vw;background:#262626;color:#fff}
.pxlv-rcta-copy{display:flex;flex-direction:column;gap:1.666667vw;padding:3.333333vw 3.472222vw}
.pxlv-rcta-copy h2{margin:0;font-size:1.944444vw;line-height:1.2;font-weight:700}
.pxlv-rcta-copy p{margin:0;font-size:1.111111vw;line-height:1.5;color:rgba(255,255,255,.75)}
.pxlv-rcta-actions{display:flex;gap:1.111111vw;flex-wrap:wrap}
.pxlv-rcta-media{align-self:stretch;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%)}
.pxlv-rcta-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
/* FAQ рубрики: 2 колонки items r15 pad20/24 — реюз .pxlv-faq-item/details */
.pxlv-rfaq{display:grid;grid-template-columns:1fr 1fr;gap:.833333vw 1.388889vw;align-items:start}
@media(max-width:1199px){
  .pxlv-rsec{padding:8px 0}
  .pxlv-rsec-title{margin-bottom:16px;font-size:24px}
  .pxlv-rhero{flex-direction:column;gap:20px;border-radius:20px;padding:24px}
  .pxlv-rhero-text{gap:16px;max-width:none}
  .pxlv-rhero h1{font-size:30px}
  .pxlv-rhero p{font-size:15px}
  .pxlv-rhero-badges{flex-direction:column;gap:12px}
  .pxlv-rhero-badge{font-size:14px}
  .pxlv-rhero-badge svg{width:18px;height:18px}
  .pxlv-rfeat{grid-template-columns:1fr;border-radius:15px}
  .pxlv-rfeat-media{order:1;min-height:0;aspect-ratio:16/9}
  .pxlv-rfeat-copy{order:2;padding:20px;gap:12px}
  .pxlv-rcols{grid-template-columns:1fr;gap:16px}
  .pxlv-rcol{padding:20px;border-radius:15px;gap:16px}
  .pxlv-rcol-icon{width:40px;height:40px;border-radius:10px}
  .pxlv-rcol-icon svg{width:20px;height:20px}
  .pxlv-rcol h3{font-size:17px}
  .pxlv-rcol-list{gap:10px}
  .pxlv-rcol-list a{font-size:14px}
  .pxlv-rcta{grid-template-columns:1fr;border-radius:20px}
  .pxlv-rcta-copy{order:2;padding:24px;gap:16px}
  .pxlv-rcta-media{order:1;aspect-ratio:16/10;-webkit-mask-image:none;mask-image:none}
  .pxlv-rcta-copy h2{font-size:24px}
  .pxlv-rcta-copy p{font-size:15px}
  .pxlv-rfaq{grid-template-columns:1fr;gap:12px}
}

/* воздух между чипами-фильтрами и сеткой (замечание 2026-07-17) */
/* Отступ под лентой фильтров = 20px, шаг сетки карточек. Селектор был привязан только
   к [data-pxl-feed]; на хабе подборок лента помечена data-pxl-colfilter, правило не
   применялось и карточки прилипали к чипам вплотную (зазор 0). */
[data-pxl-feed] .pxlv-feed-chipsrow,[data-pxl-colfilter].pxlv-feed-chipsrow,.pxlv-feed-toolbar{margin-bottom:1.388889vw}
/* иконки в мете карточек (calendar/clock) */
.pxlv-feed-meta span{display:inline-flex;align-items:center;gap:.347222vw}
.pxlv-feed-meta .pxl-ico,.pxlv-rfeat-meta .pxl-ico{width:1.041667vw;height:1.041667vw}
.pxlv-rfeat-meta{display:inline-flex;align-items:center;gap:1.111111vw}
.pxlv-rfeat-meta span{display:inline-flex;align-items:center;gap:.347222vw}
/* поиск с подсказками (главная + 404) */
.pxl-searchbox{position:relative}
.pxl-search-drop{position:absolute;top:calc(100% + .416667vw);left:0;right:0;z-index:30;display:none;flex-direction:column;background:#fff;border:1px solid var(--pxl-border);border-radius:1.041667vw;box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.1);overflow:hidden}
.pxl-search-drop.is-open{display:flex}
.pxl-search-item{display:flex;flex-direction:column;gap:.208333vw;padding:.833333vw 1.111111vw;text-decoration:none;color:var(--pxl-text);border-bottom:1px solid #f0f0f0}
.pxl-search-item:last-child{border-bottom:0}
.pxl-search-item:hover{background:var(--pxl-light)}
.pxl-search-item strong{font-size:var(--pxl-fs-body);font-weight:600;line-height:1.3}
.pxl-search-item small{font-size:var(--pxl-fs-small);color:var(--pxl-muted)}
.pxl-search-empty{padding:.833333vw 1.111111vw;font-size:var(--pxl-fs-body);color:var(--pxl-muted)}
.ez-wrapper .ez a.pxl-search-item,.ez-wrapper .ez a.pxl-search-item strong{color:#262626}
.ez-wrapper .ez a.pxlv-info-card,.ez-wrapper .ez a.pxlv-info-card h3,.ez-wrapper .ez a.pxlv-info-card .pxlv-info-card-title{color:#262626}
.ez-wrapper .ez .pxl-democta button.pxl-btn--accent{color:#262626}

/* ===== Demo-CTA (единый нижний CTA всех страниц, 2026-07-17) =====
   Фон = фон арта (тёмный рендер) — перехода не видно. */
.pxl-democta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;overflow:hidden;border-radius:1.736111vw;background:#0f0f0f;color:#fff}
.pxl-democta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.388889vw;padding:2.083333vw 2.777778vw}
.pxl-democta-copy h2{margin:0;font-size:var(--pxl-fs-h2);line-height:var(--pxl-lh-h2);font-weight:700}
.pxl-democta-copy p{margin:0;font-size:var(--pxl-fs-body);line-height:1.5;color:rgba(255,255,255,.75)}
.pxl-democta-list{display:flex;gap:1.666667vw;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.pxl-democta-list li{display:inline-flex;align-items:center;gap:.555556vw;font-size:var(--pxl-fs-body);color:rgba(255,255,255,.85)}
.pxl-democta-list .pxl-ico{width:1.388889vw;height:1.388889vw;color:#d8f953}
/* фейд арта в фон CTA — как в нижнем CTA статьи (эталон заказчика 2026-07-17) */
.pxl-democta-art{align-self:stretch;background:#0f0f0f;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%);mask-image:linear-gradient(to right,transparent 0,#000 18%)}
.pxl-democta-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* модальная форма записи */
.pxl-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.pxl-modal[hidden]{display:none}
.pxl-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.6)}
.pxl-modal-card{position:relative;width:min(92vw,34.722222vw);max-height:88vh;overflow:auto;background:#fff;border-radius:1.388889vw;padding:2.083333vw;display:flex;flex-direction:column;gap:.833333vw}
.pxl-modal-card h3{margin:0}
.pxl-modal-card>p{margin:0}
.pxl-modal-x{position:absolute;top:1.041667vw;right:1.041667vw;display:grid;place-items:center;width:2.5vw;height:2.5vw;border:0;border-radius:50%;background:var(--pxl-light);cursor:pointer;color:var(--pxl-text)}
.pxl-modal-x .pxl-ico{width:1.111111vw;height:1.111111vw}
.pxl-demo-form{display:flex;flex-direction:column;gap:.694444vw;margin-top:.416667vw}
.pxl-demo-label{font-size:var(--pxl-fs-small);font-weight:600;color:var(--pxl-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.416667vw}
.pxl-demo-days,.pxl-demo-slots{display:flex;gap:.555556vw;flex-wrap:wrap}
.pxl-demo-contacts{display:grid;grid-template-columns:1fr 1fr;gap:.833333vw}
.pxl-demo-contacts input{border:1px solid var(--pxl-border);background:var(--pxl-light);border-radius:.833333vw;padding:.972222vw 1.111111vw;font:inherit;font-size:var(--pxl-fs-body);outline:none}
.pxl-demo-contacts input:focus{border-color:var(--pxl-dark)}
.pxl-demo-form .pxl-btn{margin-top:.694444vw;justify-content:center}
.pxl-demo-note{margin:0}

/* ===== Хаб: единая сетка подборок с чипами (redesign 2026-07-17) ===== */
.pxlv-chub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.388889vw}
.pxlv-chub-grid .pxlv-chub-card{flex:none}

/* ===== Хаб подборок (Figma 587:10706) ===== */
/* hero: белая карточка r25, pad-left 30, копирайт слева (570) + тёмный арт справа */
.pxlv-chub-hero{display:grid;grid-template-columns:minmax(0,570fr) minmax(0,570fr);gap:2.083333vw;align-items:center;border-radius:1.736111vw;background:#fff;border:1px solid #e6e6e6;padding-left:2.083333vw;overflow:hidden}
.pxlv-chub-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.944444vw;padding:2.777778vw 0}
.pxlv-chub-hero h1{margin:0;font-size:var(--pxl-fs-h1);line-height:var(--pxl-lh-h1);font-weight:700;color:var(--pxl-text)}
.pxlv-chub-hero-copy p{margin:0;font-size:var(--pxl-fs-intro);line-height:1.5;color:var(--pxl-muted)}
/* Высота шапки приведена к шапке рубрики (решение оператора 10.08.2026): там арт задан
   ПРОПОРЦИЕЙ 600/320, а не растяжкой. Прежние align-self:stretch + min-height 30.4vw
   давали 571px против 398 у рубрики. Тёмная подложка убрана — арт теперь светлый,
   и при contain фон #161616 вылезал бы полями. */
.pxlv-chub-hero-art{align-self:center;aspect-ratio:600/320;border-radius:1.388889vw;overflow:hidden}
.pxlv-chub-hero-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* преимущества: 4 белые карточки r16 pad24 */
.pxlv-chub-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1.666667vw}
.pxlv-chub-badge{display:flex;flex-direction:column;gap:1.111111vw;padding:1.666667vw;border-radius:1.111111vw;background:#fff;border:1px solid #e6e6e6}
.pxlv-chub-badge-head{display:flex;align-items:center;gap:1.111111vw}
.pxlv-chub-badge-ic{display:grid;place-items:center;flex:0 0 auto;width:2.916667vw;height:2.916667vw;border-radius:50%;background:#d8f953}
.pxlv-chub-badge-ic svg{width:1.527778vw;height:1.527778vw;color:#262626}
.pxlv-chub-badge-title{font-size:1.180556vw;line-height:1.2;font-weight:600}
.pxlv-chub-badge p{margin:0;font-size:.972222vw;line-height:1.45;color:#767676}
/* группа рубрики: заголовок + карусель-строка */
.pxlv-chub-group{display:flex;flex-direction:column;gap:1.666667vw;margin-top:1.666667vw}
.pxlv-chub-ghead{display:flex;align-items:center;justify-content:space-between;gap:1.111111vw}
.pxlv-chub-ghead h3{margin:0;font-size:1.666667vw;line-height:1.1;font-weight:700}
.pxlv-chub-nav{display:flex;gap:.833333vw}
.pxlv-chub-navbtn{display:grid;place-items:center;width:3.333333vw;height:3.333333vw;border-radius:50%;border:1px solid #e6e6e6;background:#fff;color:#262626;cursor:pointer;transition:border-color .15s ease}
.pxlv-chub-navbtn:hover{border-color:#262626}
.pxlv-chub-navbtn svg{width:1.666667vw;height:1.666667vw}
.pxlv-chub-navbtn[disabled]{opacity:.35;cursor:default;border-color:#e6e6e6}
.pxlv-chub-track{display:flex;gap:1.666667vw;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.694444vw;scrollbar-width:none}
.pxlv-chub-track::-webkit-scrollbar{display:none}
.pxlv-chub-card{flex:0 0 26.666667vw;scroll-snap-align:start;gap:1.388889vw;padding:1.666667vw;text-decoration:none;color:#262626;align-items:flex-start}
.pxlv-chub-card .pxlv-chub-card-art{align-self:stretch}
.pxlv-chub-card-art{display:grid;place-items:center;height:12.5vw;border-radius:1.111111vw;background:radial-gradient(120% 120% at 70% 20%,#2b2b2b 0,#141414 70%)}
.pxlv-chub-card-ico{display:grid;place-items:center;width:4.444444vw;height:4.444444vw;border-radius:50%;background:rgba(216,249,83,.12)}
.pxlv-chub-card-ico svg{width:2.222222vw;height:2.222222vw;color:#d8f953}
.pxlv-chub-card h3{margin:0;font-size:var(--pxl-fs-h2);line-height:var(--pxl-lh-h2);font-weight:700}
.pxlv-chub-card p{margin:0;flex:1;font-size:var(--pxl-fs-body);line-height:1.45;color:var(--pxl-muted)}
/* квиз-навигатор: белая карточка r25 pad40/48 */
.pxlv-chub-quiz{display:flex;align-items:center;justify-content:space-between;gap:2.222222vw;border-radius:1.736111vw;background:#fff;border:1px solid #e6e6e6;padding:2.777778vw 3.333333vw}
.pxlv-chub-quiz-left{display:flex;align-items:center;gap:1.666667vw}
.pxlv-chub-quiz-ic{display:grid;place-items:center;flex:0 0 auto;width:4.444444vw;height:4.444444vw;border-radius:50%;background:#d8f953}
.pxlv-chub-quiz-ic svg{width:2.222222vw;height:2.222222vw;color:#262626}
.pxlv-chub-quiz-txt{display:flex;flex-direction:column;gap:.694444vw}
.pxlv-chub-quiz-txt h2{margin:0;font-size:1.666667vw;line-height:1.15;font-weight:700}
.pxlv-chub-quiz-txt p{margin:0;font-size:1.111111vw;line-height:1.45;color:#767676}
.pxlv-chub-quiz-btn{flex:0 0 auto;white-space:nowrap}
/* тёмный CTA-баннер: #1a1a1a r25, текст слева (517) + дашборд справа */
.pxlv-chub-dcta{display:grid;grid-template-columns:minmax(0,517fr) minmax(0,653fr);align-items:stretch;overflow:hidden;border-radius:1.736111vw;background:#1a1a1a;color:#fff}
.pxlv-chub-dcta-copy{display:flex;flex-direction:column;gap:2.083333vw;padding:2.083333vw}
.pxlv-chub-dcta-copy h2{margin:0;font-size:2.222222vw;line-height:1.15;font-weight:700}
.pxlv-chub-dcta-list{display:flex;flex-direction:column;gap:1.388889vw;margin:0;padding:0;list-style:none}
.pxlv-chub-dcta-list li{display:flex;align-items:flex-start;gap:.694444vw;font-size:1.111111vw;line-height:1.4;color:rgba(255,255,255,.85)}
.pxlv-chub-dcta-list svg{flex:0 0 auto;width:1.527778vw;height:1.527778vw;color:#d8f953;margin-top:.1vw}
.pxlv-chub-dcta-btns{display:flex;gap:.833333vw;flex-wrap:wrap}
.pxlv-chub-dcta-ghost{background:#2b2b2b;color:#fff}
.pxlv-chub-dcta-ghost:hover{background:#3a3a3a}
.pxlv-chub-dcta-art{align-self:stretch;overflow:hidden;background:#111}
.pxlv-chub-dcta-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
/* популярные подборки: заголовок + ссылка, 2-колоночная сетка строк */
.pxlv-chub-pop-head{display:flex;align-items:center;justify-content:space-between;gap:1.111111vw;margin-bottom:1.666667vw}
.pxlv-chub-pop-head .pxlv-rsec-title{margin:0}
.pxlv-chub-pop-all{display:inline-flex;align-items:center;gap:.555556vw;font-size:.972222vw;font-weight:500;color:#262626;text-decoration:none}
.pxlv-chub-pop-all svg{width:1.388889vw;height:1.388889vw}
/* Нумерация читается СВЕРХУ ВНИЗ по столбцам (1-2-3-4 слева, 5-6-7-8 справа),
   а не змейкой по строкам — решение оператора 10.08.2026.
   Число строк = половина списка: 8 пунктов → 4 строки. */
.pxlv-chub-pop-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;gap:.833333vw 1.666667vw}
.pxlv-chub-pop-item{display:flex;align-items:center;gap:1.111111vw;padding:1.111111vw;border-radius:1.041667vw;background:#fff;border:1px solid #e6e6e6;text-decoration:none;color:#262626;transition:border-color .15s ease}
.pxlv-chub-pop-item:hover{border-color:#262626}
.pxlv-chub-pop-num{display:grid;place-items:center;flex:0 0 auto;width:2.777778vw;height:2.777778vw;border-radius:50%;background:#d8f953;font-size:1.111111vw;font-weight:700}
.pxlv-chub-pop-txt{display:flex;flex-direction:column;gap:.208333vw;flex:1;min-width:0}
.pxlv-chub-pop-txt strong{font-size:1.111111vw;font-weight:600}
.pxlv-chub-pop-txt small{font-size:.902778vw;color:#767676}
.pxlv-chub-pop-arr{flex:0 0 auto;color:#262626}
.pxlv-chub-pop-arr svg{width:1.666667vw;height:1.666667vw}
/* щиты цвета ссылок (ez-режим) для хаба */
.ez-wrapper .ez a.pxlv-chub-card,.ez-wrapper .ez a.pxlv-chub-card h3{color:#262626}
.ez-wrapper .ez .pxlv-chub-dcta a.pxl-btn--accent{color:#262626}
.ez-wrapper .ez .pxlv-chub-dcta a.pxl-btn--on-dark{color:#fff}
.ez-wrapper .ez a.pxlv-chub-pop-item,.ez-wrapper .ez a.pxlv-chub-pop-item strong{color:#262626}
.ez-wrapper .ez a.pxlv-chub-pop-all{color:#262626}
.ez-wrapper .ez a.pxlv-chub-quiz-btn{color:#262626}
.ez-wrapper .ez .pxlv-chub-dcta a.pxlv-button--accent{color:#262626}
.ez-wrapper .ez .pxlv-chub-dcta a.pxlv-chub-dcta-ghost{color:#fff}
@media(max-width:1199px){
  .pxlv-chub-hero{grid-template-columns:1fr;padding-left:0;border-radius:20px}
  .pxlv-chub-hero-copy{order:2;padding:24px;gap:16px}
  .pxlv-chub-hero-art{order:1;min-height:0;aspect-ratio:16/11}
  .pxlv-chub-hero h1{font-size:26px}
  .pxlv-chub-hero-copy p{font-size:16px}
  .pxlv-chub-badges{grid-template-columns:1fr;gap:12px}
  .pxlv-chub-badge{padding:20px;border-radius:15px;gap:12px}
  .pxlv-chub-badge-ic{width:48px;height:48px}
  .pxlv-chub-badge-ic svg{width:24px;height:24px}
  .pxlv-chub-badge-title{font-size:17px}
  .pxlv-chub-badge p{font-size:14px}
  .pxlv-chub-group{gap:16px;margin-top:8px}
  .pxlv-chub-ghead h3{font-size:22px}
  .pxlv-chub-nav{display:none}
  .pxlv-chub-track{gap:16px;margin:0 -16px;padding:0 16px 8px}
  .pxlv-chub-card{flex:0 0 80vw;max-width:320px;padding:20px;gap:12px}
  .pxlv-chub-card-art{height:180px}
  .pxlv-chub-card-ico{width:64px;height:64px}
  .pxlv-chub-card-ico svg{width:32px;height:32px}
  .pxlv-chub-quiz{flex-direction:column;align-items:flex-start;gap:20px;padding:24px;border-radius:20px}
  .pxlv-chub-quiz-ic{width:56px;height:56px}
  .pxlv-chub-quiz-ic svg{width:28px;height:28px}
  .pxlv-chub-quiz-txt h2{font-size:22px}
  .pxlv-chub-quiz-txt p{font-size:15px}
  .pxlv-chub-quiz-btn{align-self:stretch;text-align:center;justify-content:center}
  .pxlv-chub-dcta{grid-template-columns:1fr;border-radius:20px}
  .pxlv-chub-dcta-copy{order:2;padding:24px;gap:20px}
  .pxlv-chub-dcta-copy h2{font-size:24px}
  .pxlv-chub-dcta-list li{font-size:15px}
  .pxlv-chub-dcta-list svg{width:20px;height:20px}
  .pxlv-chub-dcta-art{order:1;aspect-ratio:16/10}
  .pxlv-chub-dcta-btns .pxlv-button{flex:1;justify-content:center}
  .pxlv-chub-pop-grid{grid-template-columns:1fr;gap:10px}
  .pxlv-chub-pop-item{padding:14px;border-radius:15px}
  .pxlv-chub-pop-num{width:40px;height:40px;font-size:16px}
  .pxlv-chub-pop-txt strong{font-size:16px}
  .pxlv-chub-pop-txt small{font-size:13px}
  .pxlv-chub-pop-arr svg{width:24px;height:24px}
}

/* ===== Страница подборки (Figma 533:10108) ===== */
/* hero: тёмная карточка #1a1a1a r25 pad-left30 gap40; текст 565 gap30 + арт справа */
.pxlv-col-hero{display:grid;grid-template-columns:minmax(0,565fr) minmax(0,565fr);gap:2.777778vw;align-items:center;border-radius:1.736111vw;background:#1a1a1a;color:#fff;padding-left:2.083333vw;overflow:hidden}
.pxlv-col-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.666667vw;padding:2.083333vw 0}
.pxlv-col-hero-pill{display:inline-flex;align-items:center;padding:.486111vw .972222vw;border-radius:3.472222vw;background:#d8f953;font-size:.972222vw;font-weight:600;color:#262626;text-decoration:none}
.pxlv-col-hero h1{margin:0;font-size:var(--pxl-fs-h1);line-height:var(--pxl-lh-h1);font-weight:700}
.pxlv-col-hero-copy>p{margin:0;font-size:var(--pxl-fs-intro);line-height:1.5;color:#f6f6f6;max-width:37.5vw}
.pxlv-col-hero-meta{display:flex;gap:1.666667vw;flex-wrap:wrap}
.pxlv-col-hero-meta span{display:inline-flex;align-items:center;gap:.416667vw;font-size:.972222vw;color:rgba(255,255,255,.8)}
.pxlv-col-hero-meta svg{width:1.111111vw;height:1.111111vw;color:#d8f953}
.pxlv-col-hero-badges{display:flex;gap:1.666667vw 2.222222vw;flex-wrap:wrap}
.pxlv-col-hero-badges span{display:inline-flex;align-items:center;gap:.555556vw;font-size:.902778vw;color:rgba(255,255,255,.7)}
.pxlv-col-hero-badges svg{width:1.111111vw;height:1.111111vw;color:#d8f953;flex:0 0 auto}
.pxlv-col-hero-art{align-self:stretch;min-height:24.861111vw;border-radius:1.388889vw;overflow:hidden;background:#111}
.pxlv-col-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
/* что внутри: 4 белые карточки r16 pad24 */
.pxlv-col-inside{display:grid;grid-template-columns:repeat(4,1fr);gap:1.666667vw}
.pxlv-col-inside-card{display:flex;flex-direction:column;gap:1.111111vw;padding:1.666667vw;border-radius:1.111111vw;background:#fff;border:1px solid #e6e6e6}
.pxlv-col-inside-ic{display:grid;place-items:center;width:3.333333vw;height:3.333333vw;border-radius:50%;background:#d8f953}
.pxlv-col-inside-ic svg{width:1.666667vw;height:1.666667vw;color:#262626}
.pxlv-col-inside-card p{margin:0;font-size:.972222vw;line-height:1.45;color:#767676}
/* материалы подборки: светлый контейнер r25, строки с разделителем */
.pxlv-colmat{background:#f6f6f6;border-radius:1.736111vw;padding:0 1.666667vw}
.pxlv-colmat-row{display:grid;grid-template-columns:11.111111vw minmax(0,1fr) auto;gap:1.666667vw;align-items:center;padding:1.666667vw 0;text-decoration:none;color:#262626}
.pxlv-colmat-thumb{width:11.111111vw;height:7.638889vw;border-radius:.833333vw;overflow:hidden;background:#1a1a1a;flex:0 0 auto}
.pxlv-colmat-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pxlv-colmat-body{display:flex;flex-direction:column;gap:.694444vw;min-width:0}
.pxlv-colmat-body h3{margin:0;font-size:1.25vw;line-height:1.2;font-weight:600}
.pxlv-colmat-body p{margin:0;font-size:.972222vw;line-height:1.45;color:#767676}
.pxlv-colmat-soonbadge{display:inline-flex;align-items:center;padding:.208333vw .625vw;border-radius:1.388889vw;background:#e6e6e6;color:#767676;font-size:.833333vw;font-weight:500}
.pxlv-colmat-meta{display:inline-flex;align-items:center;gap:.347222vw;white-space:nowrap;color:#767676;font-size:.902778vw}
.pxlv-colmat-meta svg{width:1.041667vw;height:1.041667vw}
.pxlv-colmat-row--soon{opacity:.85}
/* обложки «Скоро» — та же заглушка, что на рубриках: светлая штриховка + лаймовая точка.
   Правило стоит ПОСЛЕ .pxlv-colmat-thumb и специфичнее одиночного .pxlr-media--empty,
   поэтому фон задаём здесь, иначе тёмная плашка молча перекроет штриховку. */
.pxlv-colmat-row--soon .pxlv-colmat-thumb{background:repeating-linear-gradient(135deg,#f2f2f2 0 8px,#ededed 8px 16px);position:relative}
.pxlv-colmat-sep{display:block;height:1px;background:#e6e6e6}
/* с чего начать: 3 карточки #f6f6f6 r15 pad28 + стрелки */
.pxlv-colsteps{display:flex;align-items:stretch;gap:1.388889vw}
.pxlv-colstep{flex:1;display:flex;flex-direction:column;gap:.972222vw;padding:1.944444vw;border-radius:1.041667vw;background:#f6f6f6}
.pxlv-colstep-head{display:flex;align-items:center;gap:.972222vw}
.pxlv-colstep-num{display:grid;place-items:center;flex:0 0 auto;width:2.777778vw;height:2.777778vw;border-radius:50%;background:#d8f953;font-size:1.111111vw;font-weight:700}
.pxlv-colstep-head strong{font-size:1.111111vw;line-height:1.2;font-weight:600}
.pxlv-colstep p{margin:0;font-size:.972222vw;line-height:1.45;color:#767676}
.pxlv-colsteps-arrow{display:grid;place-items:center;flex:0 0 auto;align-self:center;color:#262626}
.pxlv-colsteps-arrow svg{width:1.666667vw;height:1.666667vw}
/* для каких задач: 4 колонки */
.pxlv-coltasks{display:grid;grid-template-columns:repeat(4,1fr);gap:1.666667vw}
.pxlv-coltask{display:flex;flex-direction:column;gap:.972222vw}
.pxlv-coltask-ic{display:grid;place-items:center;width:2.777778vw;height:2.777778vw;border-radius:.694444vw;background:#f6f6f6}
.pxlv-coltask-ic svg{width:1.527778vw;height:1.527778vw;color:#262626}
.pxlv-coltask p{margin:0;font-size:.972222vw;line-height:1.4;color:#767676}
/* CTA аудит: светлый r25, слева иллюстрация-бокс, справа текст+кнопка */
.pxlv-col-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.777778vw;align-items:stretch;border-radius:1.736111vw;background:#f6f6f6;padding:1.666667vw}
.pxlv-col-cta-art{display:grid;place-items:center;border-radius:1.111111vw;background:#fff;min-height:12.5vw}
.pxlv-col-cta-ic{display:grid;place-items:center;width:4.444444vw;height:4.444444vw;border-radius:50%;background:#f6f6f6}
.pxlv-col-cta-ic svg{width:2.222222vw;height:2.222222vw;color:#262626}
.pxlv-col-cta-copy{display:flex;flex-direction:column;justify-content:center;gap:1.111111vw;padding:1.111111vw 0}
.pxlv-col-cta-copy h2{margin:0;font-size:1.666667vw;line-height:1.2;font-weight:700}
.pxlv-col-cta-copy p{margin:0;font-size:1.111111vw;line-height:1.45;color:#262626}
.pxlv-col-cta-actions{display:flex;align-items:center;gap:1.388889vw;flex-wrap:wrap}
.pxlv-col-cta-note{font-size:.902778vw;color:#767676}
.pxlv-button--dark{background:#1a1a1a;color:#fff}
.pxlv-button--dark:hover{background:#2b2b2b}
/* щиты цвета ссылок (ez-режим) для страницы подборки */
.ez-wrapper .ez a.pxlv-col-hero-pill{color:#262626}
.ez-wrapper .ez a.pxlv-colmat-row,.ez-wrapper .ez a.pxlv-colmat-row h3{color:#262626}
.ez-wrapper .ez .pxlv-col-cta a.pxlv-button--dark{color:#fff}
@media(max-width:1199px){
  .pxlv-col-hero{grid-template-columns:1fr;padding-left:0;border-radius:20px}
  .pxlv-col-hero-copy{order:2;padding:24px;gap:14px}
  .pxlv-col-hero-pill{padding:7px 14px;font-size:14px}
  .pxlv-col-hero h1{font-size:28px}
  .pxlv-col-hero-copy>p{font-size:16px;max-width:none}
  .pxlv-col-hero-meta span,.pxlv-col-hero-badges span{font-size:13px}
  .pxlv-col-hero-meta svg,.pxlv-col-hero-badges svg{width:16px;height:16px}
  .pxlv-col-hero-art{order:1;min-height:0;aspect-ratio:16/10}
  .pxlv-col-inside{grid-template-columns:1fr;gap:12px}
  .pxlv-col-inside-card{padding:20px;border-radius:15px;gap:14px}
  .pxlv-col-inside-ic{width:48px;height:48px}
  .pxlv-col-inside-ic svg{width:24px;height:24px}
  .pxlv-col-inside-card p{font-size:15px}
  .pxlv-colmat{padding:0 16px;border-radius:20px}
  .pxlv-colmat-row{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"thumb body" "meta meta";gap:14px;padding:16px 0}
  .pxlv-colmat-thumb{grid-area:thumb;width:88px;height:64px;border-radius:10px}
  .pxlv-colmat-body{grid-area:body}
  .pxlv-colmat-body h3{font-size:16px}
  .pxlv-colmat-body p{font-size:14px}
  .pxlv-colmat-meta{grid-area:meta;font-size:13px}
  .pxlv-colsteps{flex-direction:column;gap:12px}
  .pxlv-colstep{padding:20px;border-radius:15px}
  .pxlv-colstep-num{width:40px;height:40px;font-size:16px}
  .pxlv-colstep-head strong{font-size:16px}
  .pxlv-colstep p{font-size:14px}
  .pxlv-colsteps-arrow{transform:rotate(90deg)}
  .pxlv-colsteps-arrow svg{width:24px;height:24px}
  .pxlv-coltasks{grid-template-columns:1fr 1fr;gap:16px}
  .pxlv-coltask-ic{width:44px;height:44px}
  .pxlv-coltask-ic svg{width:22px;height:22px}
  .pxlv-coltask p{font-size:14px}
  .pxlv-col-cta{grid-template-columns:1fr;gap:16px;border-radius:20px;padding:16px}
  .pxlv-col-cta-art{order:1;min-height:0;aspect-ratio:16/9}
  .pxlv-col-cta-ic{width:56px;height:56px}
  .pxlv-col-cta-ic svg{width:28px;height:28px}
  .pxlv-col-cta-copy{order:2;padding:8px}
  .pxlv-col-cta-copy h2{font-size:20px}
  .pxlv-col-cta-copy p{font-size:15px}
  .pxlv-col-cta-actions{gap:16px}
}

/* ===== ГЛАВНАЯ БЛОГА — новый макет (Figma 100:2227 / 113:9089, 2026-07-17) =====
   Классы .pxlh-* (старые .pxlv-home-* удалены вместе с прежним макетом). */
.pxlh-sechead{display:flex;align-items:center;justify-content:space-between;gap:1.111111vw;margin-bottom:1.666667vw}
.pxlh-sechead .pxlv-rsec-title{margin:0}
.pxlh-seclink{display:inline-flex;align-items:center;gap:.416667vw;font-size:var(--pxl-fs-label);font-weight:500;color:var(--pxl-text);text-decoration:none;white-space:nowrap}
.pxlh-seclink .pxl-ico{width:1.111111vw;height:1.111111vw;transition:transform .15s ease}
.pxlh-seclink:hover .pxl-ico{transform:translateX(.208333vw)}
.pxlh-meta{display:inline-flex;align-items:center;gap:.416667vw;font-size:var(--pxl-fs-body);color:#2b2b2b;white-space:nowrap}
.pxlh-meta .pxl-ico{width:1.111111vw;height:1.111111vw;color:#767676}
.pxlh-meta--sm{font-size:var(--pxl-fs-small)}
/* мета в карточках ленты мельче основного текста (иерархия — заказчик 2026-07-17) */
.pxlh-feat .pxlh-meta,.pxlh-mbig .pxlh-meta,.pxlh-mrow .pxlh-meta,.pxlh-scard .pxlh-meta,.pxlh-pcard .pxlh-meta,.pxlf-card .pxlh-meta{font-size:var(--pxl-fs-small)}
.pxlh-feat .pxlh-meta .pxl-ico,.pxlh-mbig .pxlh-meta .pxl-ico,.pxlh-mrow .pxlh-meta .pxl-ico,.pxlh-scard .pxlh-meta .pxl-ico,.pxlh-pcard .pxlh-meta .pxl-ico,.pxlf-card .pxlh-meta .pxl-ico{width:.972222vw;height:.972222vw}
.pxlh-row{display:flex;align-items:center;gap:1.111111vw;flex-wrap:wrap}
/* hero: белая полоса во всю ширину, волна справа, слева заголовок+поиск, справа тёмная плашка-бейджи */
/* overflow:hidden НЕЛЬЗЯ вешать на сам hero — он обрезает выпадашку поиска, которая выходит
   за нижнюю границу блока (журнал косяков №29з, повтор 2026-08-04). Клип живёт на арте. */
.pxlh-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:0;background:#fff;padding:3.472222vw 0 2.777778vw;font-family:Onest,Arial,sans-serif;color:#262626}
.pxlh-hero-art{position:absolute;top:0;right:0;width:68%;height:100%;z-index:0;overflow:hidden}
.pxlh-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.pxlh-hero-inner{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:4.583333vw}
.pxlh-hero-left{display:flex;flex-direction:column;gap:3.472222vw;width:30.763889vw}
.pxlh-hero-title{display:flex;flex-direction:column;gap:1.041667vw}
.pxlh-hero-title h1{margin:0;font-size:var(--pxl-fs-hero);line-height:var(--pxl-lh-hero);font-weight:900}
.pxlh-xl{color:#2bd07a}
.pxlh-sep{width:100%;height:.416667vw;border-radius:1vw;background:var(--pxl-grad)}
.pxlh-hero-title p{margin:0;font-size:var(--pxl-fs-body);line-height:1.5;color:#2b2b2b}
.pxlh-search{display:flex;align-items:center;gap:.694444vw;padding:.694444vw 1.111111vw;border-radius:var(--pxl-r-btn);background:var(--pxl-light)}
/* нативный крестик поля type=search выглядит системным (в Chrome — синий) и не вписан в дизайн:
   прячем его и рисуем свой в стиле сайта (заказчик 2026-08-04) */
.pxlh-search input[type=search]::-webkit-search-cancel-button,
.pxlh-search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.pxlh-search-x{display:none;place-items:center;flex:0 0 auto;width:1.666667vw;height:1.666667vw;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pxl-muted);cursor:pointer;transition:color .15s ease,background .15s ease}
.pxlh-search-x.is-on{display:grid}
.pxlh-search-x:hover{color:var(--pxl-text);background:rgba(0,0,0,.06)}
.pxlh-search-x .pxl-ico{width:1.111111vw;height:1.111111vw}
.pxlh-search-ic{display:grid;place-items:center;flex:0 0 auto}
.pxlh-search-ic .pxl-ico{width:1.666667vw;height:1.666667vw;color:var(--pxl-muted)}
.pxlh-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--pxl-fs-body);color:var(--pxl-text);outline:none}
.pxlh-hero-badges{display:flex;align-items:center;gap:1.388889vw;padding:1.041667vw;border-radius:var(--pxl-r-btn);background:var(--pxl-dark)}
.pxlh-hero-badges span{display:inline-flex;align-items:center;gap:.555556vw;font-size:var(--pxl-fs-body);color:#fff;white-space:nowrap}
.pxlh-hero-badges .pxl-ico{width:1.25vw;height:1.25vw;color:var(--pxl-accent)}
/* главная статья: белая r25, арт слева, копия справа */
.pxlh-feat{display:grid;grid-template-columns:40.972222vw minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:1.736111vw;background:#fff;text-decoration:none;color:var(--pxl-text)}
.pxlh-feat-media{background:#161616}
.pxlh-feat-media img{display:block;width:100%;height:100%;object-fit:cover}
.pxlh-feat-copy{display:flex;flex-direction:column;justify-content:space-between;gap:2.083333vw;padding:2.083333vw}
.pxlh-feat-body{display:flex;flex-direction:column;gap:1.388889vw}
.pxlh-feat-h{font-size:var(--pxl-fs-h1);line-height:1.15;font-weight:700}
.pxlh-feat-lead{font-size:var(--pxl-fs-body);line-height:1.5;color:#2b2b2b;max-width:28.402778vw}
.pxlh-feat-foot{display:flex;align-items:center;justify-content:space-between;gap:1.388889vw}
/* Q1 (заказчик 2026-07-20): базовое состояние стрелки — ЛАЙМ на обоих вьюпортах
   (на таче ховера нет, серый круг выглядел «неактивным») */
.pxlh-round{display:grid;place-items:center;width:3.888889vw;height:2.777778vw;border-radius:3.472222vw;background:var(--pxl-accent);color:var(--pxl-text);transition:box-shadow .15s ease,background .15s ease}
.pxlh-round .pxl-ico{width:1.388889vw;height:1.388889vw;transition:transform .15s ease}
/* ховер стрелки: канон акцентной кнопки (--pxl-glow-hover) + стрелка едет вправо.
   Срабатывает ТОЛЬКО на самой стрелке, не на всей карточке (заказчик 2026-08-04). */
.pxlh-round:hover{box-shadow:var(--pxl-glow-hover)}
.pxlh-round:hover .pxl-ico{transform:translateX(.208333vw)}
/* мозаика: крупная слева + 2 строки справа */
/* высота ряда зафиксирована под макет (297px@1440), иначе img{height:100%} берёт
   натуральную высоту арта и карточки раздувает вдвое (журнал косяков) */
.pxlh-mosaic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:20.625vw;gap:1.388889vw;align-items:stretch;margin-bottom:1.388889vw}
/* строки одинаковой высоты: grid 1fr/1fr (flex давал разную высоту при разной длине текста) */
.pxlh-mosaic-col{display:grid;grid-template-rows:1fr 1fr;gap:1.388889vw;min-height:0}
.pxlh-mbig{display:grid;grid-template-columns:minmax(0,296fr) minmax(0,316fr);gap:0;border-radius:1.041667vw;background:#fff;border:1px solid var(--pxl-border);overflow:hidden;text-decoration:none;color:var(--pxl-text);transition:transform .2s ease,box-shadow .2s ease;min-height:0}
.pxlh-mbig,.pxlh-mrow,.pxlh-scard,.pxlh-pcard,.pxlh-rub,.pxlh-rub-main{position:relative;z-index:0}
.pxlh-mbig:hover,.pxlh-mrow:hover{transform:translateY(-.277778vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08);z-index:2}
/* карточка слайдера: тень компактнее (0 4px 12px), но контрастнее — она обязана целиком
   помещаться в карман трека, а карман равен промежутку между карточками (12@1440),
   иначе в него въезжает следующая карточка и упирается в стрелку. */
.pxlh-scard:hover{transform:translateY(-.277778vw);box-shadow:0 .208333vw .694444vw rgba(0,0,0,.16);z-index:2}
/* Подвал крупной карточки: дата и время чтения в один ряд, вровень.
   Чип с метой в одну строку не помещались — колонка 224px против нужных 286
   при длинной рубрике (замер 07.08.2026, решение заказчика). */
.pxlh-mbig-foot{display:flex;align-items:center;flex-wrap:wrap;gap:.555556vw .833333vw;margin-top:auto}
.pxlh-mbig-foot .pxlh-meta{margin:0}
.pxlh-mbig-copy{display:flex;flex-direction:column;gap:.694444vw;padding:1.111111vw 1.388889vw;background:#fff;border-radius:1.041667vw;overflow:hidden}
.pxlh-mbig-h{margin-top:.277778vw;font-size:calc(var(--pxl-fs-h3) * var(--pxl-fit,1));line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* лид показываем целиком: карточка растёт под текст (заказчик 2026-08-04) */
/* БЕЗ line-clamp: он рисовал multitochie посреди видимого текста (журнал 45-47). Лишнее режет overflow карточки. */
.pxlh-mbig-lead{flex:1;font-size:var(--pxl-fs-small);line-height:1.5;color:#2b2b2b;overflow:hidden}
/* арт со своим скруглением (как в макете) — без чёрных клиньев под радиусом карточки */
.pxlh-mbig-media{background:#161616;border-radius:1.041667vw;overflow:hidden}
.pxlh-mbig-media img{display:block;width:100%;height:100%;object-fit:cover}
.pxlh-mrow{display:grid;grid-template-columns:15.625vw minmax(0,1fr);align-items:stretch;border-radius:1.25vw;background:#fff;border:1px solid var(--pxl-border);overflow:hidden;text-decoration:none;color:var(--pxl-text);transition:transform .2s ease,box-shadow .2s ease;min-height:0}
.pxlh-mrow-media{background:#161616;border-radius:1.041667vw;overflow:hidden}
.pxlh-mrow-media img{display:block;width:100%;height:100%;object-fit:cover}
/* меты прижаты к краям карточки: строка «рубрика + дата» сверху, время чтения снизу, отступ = padding.
   Было justify-content:center — при заголовке в 1 строку отступы разъезжались (38 против 26 у соседа). */
.pxlh-mrow-copy{display:flex;flex-direction:column;justify-content:space-between;gap:.555556vw;padding:1.111111vw 1.388889vw;overflow:hidden}
.pxlh-mrow-h{font-size:calc(var(--pxl-fs-h3) * var(--pxl-fit,1));line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* слайдер компакт-карточек */
/* воздух вокруг трека, чтобы контейнер НЕ резал тень ховера карточек (журнал №12) */
/* РАСКЛАДКА СЛАЙДЕРА @1440 (пересчитана 2026-08-04, замечание заказчика «тень режется, зазоры разные»):
   контейнер 1200 (120..1320) = стрелка 30 + зазор 30 + трек + зазор 30 + стрелка 30.
   Видимая область 1080 = 3×352 + 2×12 — три карточки влезают БЕЗ ОСТАТКА
   (раньше 3×367+2×12=1125 при 1120 → правая карточка резалась, зазоры разъезжались).
   Карман трека = 10 (промежуток 12 минус запас 2): ровно 12 мало — в стык попадал БОРДЮР
   4-й карточки и был виден тонкой полоской. Тень слайдер-карточек компактная (0 3px 10px)
   — целиком помещается в карман. Больший карман брать НЕЛЬЗЯ: в него въезжает следующая
   карточка и упирается в стрелку (это и была жалоба «расстояние до кнопок разное»). */
.pxlh-slider{display:flex;align-items:center;gap:2.083333vw;margin-top:1.388889vw}
.pxlh-sarrow{display:grid;place-items:center;flex:0 0 auto;width:2.083333vw;height:2.083333vw;border-radius:50%;border:1px solid var(--pxl-border);background:#fff;color:var(--pxl-text);cursor:pointer;transition:border-color .15s ease}
.pxlh-sarrow:hover{border-color:var(--pxl-dark)}
.pxlh-sarrow .pxl-ico{width:1.111111vw;height:1.111111vw}
.pxlh-sarrow[disabled]{opacity:.35;cursor:default}
/* воздух вокруг трека под тень ховера (offset-y 12 + blur 30 ≈ 27px снизу) */
/* padding/margin — «карман» под тень ховера (0 12px 30px + подъём 6px): сверху 24, снизу 36 @1440.
   scroll-padding-inline обязателен: без него scroll-snap выравнивает карточку по краю трека,
   съедая боковой отступ — из-за этого 1-я карточка липла к левой стрелке (зазор 2px против 10px справа). */
.pxlh-strack{display:flex;gap:.833333vw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;flex:1;padding:1.666667vw .694444vw 2.916667vw;margin:-1.666667vw -.694444vw -2.916667vw;scroll-padding-inline:.694444vw}
.pxlh-strack::-webkit-scrollbar{display:none}
/* высота карточки зафиксирована под макет (139px@1440) — иначе арт раздувает */
.pxlh-scard{flex:0 0 24.444444vw;height:9.652778vw;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,203fr) minmax(0,164fr);border-radius:1.041667vw;background:#fff;border:1px solid var(--pxl-border);overflow:hidden;text-decoration:none;color:var(--pxl-text);transition:transform .2s ease,box-shadow .2s ease}
.pxlh-scard-copy{display:flex;flex-direction:column;justify-content:space-between;gap:.347222vw;padding:.972222vw 1.111111vw}
/* --pxl-fit: множитель кегля (1 по умолчанию); JS опускает ТОЛЬКО там, где
   заголовок не влезает (заказчик 2026-07-17). Базы во vw → флюидность цела. */
/* заголовок целиком: было -webkit-line-clamp:3 → длинный заголовок обрывался многоточием
   даже после ужатия кегля до пола 0.8 (заказчик 2026-08-04) */
.pxlh-scard-h{font-size:calc(var(--pxl-fs-body) * var(--pxl-fit,1));line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pxlh-scard-media{background:#161616;border-radius:1.041667vw;overflow:hidden}
.pxlh-scard-media img{display:block;width:100%;height:100%;object-fit:cover}
/* рубрики: тёмная главная + 3 белые */
.pxlh-rubs{display:grid;grid-template-columns:minmax(0,589fr) repeat(3,minmax(0,184fr));gap:1.388889vw}
.pxlh-rub-main{display:grid;grid-template-columns:1fr 1fr;border-radius:1.041667vw;background:var(--pxl-dark);overflow:hidden;text-decoration:none;color:#fff;transition:transform .2s ease,box-shadow .2s ease}
/* тёмная карточка рубрики (rub-main) БЕЗ подъёма — решение заказчика 2026-08-04 */
.pxlh-rub:hover{transform:translateY(-.277778vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08)}
.pxlh-rub-main-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.111111vw;padding:2.083333vw 0 1.388889vw 1.388889vw}
.pxlh-rub-main-text{flex:1;font-size:var(--pxl-fs-small);line-height:1.5;color:rgba(255,255,255,.75)}
.pxlh-rub-main-art{position:relative;overflow:hidden;background:#1a1a1a}
/* 2026-08-03: было width161.2%/height116.5% (масштаб по осям РАЗНЫЙ — унаследовано из макета,
   где картинка растянута) → на 375 давало искажение +38%. Теперь равномерный масштаб: cover. */
.pxlh-rub-main-art img{position:absolute;display:block;width:161.2%;height:auto;left:-61.2%;top:50%;transform:translateY(-50%)}
.pxlh-rub{display:flex;flex-direction:column;gap:.694444vw;text-decoration:none;color:var(--pxl-text)}
.pxlh-rub-copy{display:flex;flex-direction:column;gap:.416667vw;padding:1.388889vw}
.pxlh-rub-copy small{font-size:var(--pxl-fs-small);color:#b5b5b5}
/* Арты рубрик = оригиналы из Figma. Кроп воспроизведён по imageTransform ноды:
   x = sx*u + tx  →  ширина img = 100/sx %, сдвиг = -tx/sx %. В макете стоит
   saturation:-1 → делаем CSS-фильтром, чтобы ХОВЕР возвращал цвет (заказчик 2026-07-17). */
.pxlh-rub-art{position:relative;overflow:hidden;margin-top:auto;height:8.194444vw;background:#fff}
.pxlh-rub-art img{position:absolute;display:block;filter:saturate(0);transition:filter .25s ease}
.pxlh-rub:hover .pxlh-rub-art img{filter:saturate(1)}
/* growth: scaleMode=FILL, без transform → cover/center */
/* Арты рубрик: выравниваем ПО НИЗУ (иначе объекты «висят» на разной высоте) и приводим
   к ОДНОМУ видимому масштабу. Замер подставок в исходниках (scraper/_artbase.js):
   growth 44% ширины кадра, marketing 46%, edtech 33% — «шапка» была заметно мельче.
   Замер ВИДИМОЙ высоты объекта на живой странице (scraper/rub_mass.js): growth 77px,
   marketing 75px, edtech 106px при боксе 118 — «шапка» была заметно крупнее.
   Выровнено по высоте ~80px: scale .92 / 1.02 / 1.0.
   transform-origin:bottom — низ подставок остаётся на общей линии. (заказчик 2026-08-04) */
.pxlh-rub-art img{transform-origin:center bottom}
/* growth: объект в САМОМ ИСХОДНИКЕ смещён вправо на 7.7% кадра — при cover это давало сдвиг
   вправо на 15px в карточке. Перевели на contain (единый режим со всеми) + компенсация сдвига. */
.pxlh-rub--growth .pxlh-rub-art img{position:static;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:translateX(-7.7%) scale(1.05)}
/* marketing / edtech: в макете sx≠sy (1.106/1.2603 и 0.9551/1.0883) — картинка растянута.
   2026-08-03: масштаб выровнен, иконка показывается целиком и без деформации (contain). */
.pxlh-rub--marketing .pxlh-rub-art img,
.pxlh-rub--edtech .pxlh-rub-art img{position:static;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.pxlh-rub--marketing .pxlh-rub-art img{transform:scale(1.02)}
.pxlh-rub--edtech .pxlh-rub-art img{transform:scale(1)}
/* популярное */
.pxlh-pop{display:grid;grid-template-columns:repeat(4,1fr);gap:1.388889vw}
.pxlh-pcard{text-decoration:none;color:var(--pxl-text)}
.pxlh-pcard-media{display:block;aspect-ratio:285/161;background:#161616;overflow:hidden}
.pxlh-pcard-media img{display:block;width:100%;height:100%;object-fit:cover}
/* ПРАВИЛО: обложки карточек ленты всегда кропаются по центру (герой в центре).
   Требует обложку-миниатюру landscape ~16:9 с объектом по центру — портретный
   hero статьи в горизонтальном боксе уезжает вниз (журнал косяков §36). */
.pxlh-mbig-media img,.pxlh-mrow-media img,.pxlh-scard-media img,.pxlh-pcard-media img,.pxlh-feat-media img,.pxlh-upd-media img{object-position:center}
/* copy тянется на всю высоту, строка меты прижата к низу — иначе она «плавает»
   в зависимости от числа строк заголовка (замечание заказчика 2026-08-04) */
.pxlh-pcard{height:100%}
.pxlh-pcard-copy{display:flex;flex-direction:column;gap:.763889vw;padding:.763889vw;flex:1}
.pxlh-pcard-copy .pxlh-row{margin-top:auto}
.pxlh-pcard-h{min-height:2.5vw}
/* подписка + соцсети */
.pxlh-two{display:grid;grid-template-columns:1fr 1fr;gap:1.388889vw}
.pxlh-sub,.pxlh-soc{display:flex;flex-direction:column;gap:1.111111vw;padding:2.083333vw;border-radius:1.041667vw;background:#fff}
/* 3D-арты из макета (Figma 64:363 / 64:378) вместо плоской иконки */
.pxlh-sub{position:relative;overflow:hidden}
.pxlh-sub-head{display:flex;align-items:center;gap:1.388889vw}
.pxlh-sub-art{flex:0 0 auto;width:6.25vw;height:6.25vw;border-radius:1.041667vw;overflow:hidden}
.pxlh-sub-art img{display:block;width:100%;height:100%;object-fit:cover}
/* padding-right = ширина арта (11.11) + его отступ справа (1.11) + воздух (1.67),
   иначе текст подлезает под картинку (заказчик 2026-08-04) */
.pxlh-soc{position:relative;overflow:hidden;padding-right:13.888889vw}
/* арт вылезал за правый край карточки на 10px (right было -.694vw) — вернули внутрь */
.pxlh-soc-art{position:absolute;right:1.111111vw;top:50%;transform:translateY(-50%);width:11.111111vw;height:11.111111vw;pointer-events:none}
.pxlh-soc-art img{display:block;width:100%;height:100%;object-fit:contain}
.pxlh-sub-copy h2,.pxlh-soc-copy h2{margin:0 0 .555556vw}
.pxlh-sub-copy p,.pxlh-soc-copy p{margin:0;font-size:var(--pxl-fs-body);line-height:1.5;color:var(--pxl-muted)}
.pxlh-sub-form{display:flex;gap:1.388889vw;margin-top:auto;align-items:flex-start}
.pxlh-field{flex:1;min-width:0;display:block;position:relative}
.pxlh-sub-form input{width:100%;box-sizing:border-box;min-width:0;border:1px solid transparent;background:var(--pxl-light);border-radius:var(--pxl-r-btn);padding:1.041667vw 1.111111vw;font:inherit;font-size:var(--pxl-fs-body);outline:none;transition:border-color .15s ease,background .15s ease}
/* СОСТОЯНИЯ ПОЛЯ (нативный пузырь браузера отключён через novalidate) */
.pxlh-sub-form input:hover{background:#f0f0f0}
.pxlh-sub-form input:focus{border-color:var(--pxl-dark);background:#fff}
.pxlh-sub-form.is-error input{border-color:#e5484d;background:#fff6f6}
.pxlh-sub-form.is-ok input{border-color:#22d48d;background:#f4fffa}
.pxlh-field-msg{display:none;margin-top:.416667vw;padding-left:.277778vw;font-size:var(--pxl-fs-small);line-height:1.3}
.pxlh-sub-form.is-error .pxlh-field-msg{display:block;color:#e5484d}
.pxlh-sub-form.is-ok .pxlh-field-msg{display:block;color:#12a06a}
.pxlh-soc-btns{display:flex;gap:.694444vw;margin-top:auto}
.pxlh-soc-btn{display:inline-flex;align-items:center;gap:.555556vw;padding:.972222vw 1.666667vw;border-radius:var(--pxl-r-btn);color:#fff;font-size:var(--pxl-fs-body);font-weight:500;text-decoration:none;transition:filter .15s ease,transform .15s ease}
.pxlh-soc-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pxlh-soc-btn .pxl-ico{width:1.388889vw;height:1.388889vw}
.pxlh-soc-btn--vk{background:#2586fd}
.pxlh-soc-btn--max{background:#8542fb}
/* подборки: белый контейнер, сетка 3×N */
.pxlh-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.388889vw;padding:1.388889vw 1.111111vw;border-radius:1.388889vw;background:#fff}
.pxlh-pick{display:flex;align-items:center;gap:.694444vw;padding:.694444vw;border-radius:1.041667vw;background:var(--pxl-light);text-decoration:none;color:var(--pxl-text);transition:background .15s ease}
.pxlh-pick:hover{background:#eef0ee}
.pxlh-pick-ic{display:grid;place-items:center;flex:0 0 auto;width:2.5vw;height:2.5vw;border-radius:.694444vw;background:#fff}
.pxlh-pick-ic .pxl-ico{width:1.388889vw;height:1.388889vw;color:var(--pxl-text)}
.pxlh-pick-txt{display:flex;flex-direction:column;gap:.138889vw;min-width:0}
.pxlh-pick-txt strong{font-size:var(--pxl-fs-body);font-weight:600}
.pxlh-pick-txt small{font-size:var(--pxl-fs-small);color:var(--pxl-muted)}
/* обновления */
.pxlh-upds{display:grid;grid-template-columns:repeat(5,1fr);gap:.833333vw}
.pxlh-upd{display:flex;flex-direction:column;gap:.694444vw;padding:.347222vw;border-radius:1.041667vw;background:#fff;position:relative;z-index:0;transition:transform .2s ease,box-shadow .2s ease}
.pxlh-upd:hover{transform:translateY(-.277778vw);box-shadow:0 .833333vw 2.083333vw rgba(0,0,0,.08);z-index:2}
.pxlh-upd-media{position:relative;display:block;aspect-ratio:220/108;border-radius:.833333vw;overflow:hidden;background:#161616}
.pxlh-upd-media img{display:block;width:100%;height:100%;object-fit:cover}
.pxlh-upd-badge{position:absolute;left:.555556vw;bottom:.555556vw}
.pxlh-upd-copy{display:flex;flex-direction:column;gap:.694444vw;padding:.694444vw .694444vw 1.041667vw;flex:1}
.pxlh-upd-copy .pxlh-meta{margin-top:auto}
/* щиты цвета ссылок (ez-режим) */
.ez-wrapper .ez a.pxlh-feat,.ez-wrapper .ez a.pxlh-mbig,.ez-wrapper .ez a.pxlh-mrow,.ez-wrapper .ez a.pxlh-scard,.ez-wrapper .ez a.pxlh-pcard,.ez-wrapper .ez a.pxlh-pick,.ez-wrapper .ez a.pxlh-pick strong,.ez-wrapper .ez a.pxlh-rub,.ez-wrapper .ez a.pxlh-seclink{color:#262626}
.ez-wrapper .ez a.pxlh-rub-main{color:#fff}
.ez-wrapper .ez a.pxlh-soc-btn{color:#fff}
@media(max-width:1199px){
  .pxlh-sechead{margin-bottom:16px}
  /* .pxlh-seclink: кегль — из роли --pxl-fs-label (14px на мобиле) */
  .pxlh-seclink .pxl-ico{width:16px;height:16px}
  .pxlh-meta .pxl-ico{width:16px;height:16px}
  .pxlh-row{gap:10px}
  /* ── HERO МОБИЛЬНЫЙ = макет Figma 113:9089 «Blog / main Page 375» ──
     В макете hero — БЕЛАЯ КАРТОЧКА 343×425 (r25, pad 20/16) на сером фоне, внутри:
     волна 311×100 со скруглением r15 → заголовок 36/900/38 → лид 18/400/25 → поиск 311×44 r15.
     Зелёного разделителя и блока «Актуальные материалы / Кейсы / Разборы» в макете НЕТ.
     Всё внутри @media — десктоп не затрагивается (заморожен на v81). */
  /* карточкой делаем САМ hero: арт — его прямой ребёнок, поэтому фон/радиус на .pxlh-hero-inner
     оставляли бы волну снаружи. Раскладка по макету: колонка с gap 30 — арт 100 r15, H1, лид, поиск 44. */
  .pxlh-hero{width:auto;margin:16px 16px 0;padding:20px 16px;display:flex;flex-direction:column;gap:30px;
    background:#fff;border-radius:25px}
  .pxlh-hero-inner{display:contents}
  .pxlh-hero-art{position:relative;order:0;width:100%;height:100px;aspect-ratio:auto;
    border-radius:15px;overflow:hidden;flex:0 0 auto}
  .pxlh-hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}
  .pxlh-hero-left{display:contents}
  .pxlh-hero-title{display:contents}
  .pxlh-hero-title h1{font-size:36px;line-height:38px;font-weight:900}
  .pxlh-hero-title p{font-size:18px;line-height:25px;color:#1a1a1a}
  .pxlh-sep{display:none}                 /* в мобильном макете разделителя нет */
  .pxlh-hero-badges{display:none}         /* и блока с галочками тоже нет */
  .pxlh-search{padding:10px 16px;border-radius:15px;min-height:44px;background:var(--pxl-light)}
  .pxlh-search-ic .pxl-ico{width:22px;height:22px}
  .pxlh-search-x{width:28px;height:28px}
  .pxlh-search-x .pxl-ico{width:18px;height:18px}
  .pxlh-feat{grid-template-columns:1fr;border-radius:20px}
  /* карточка статьи — по макету 113:9089: картинка 343x211, контент pad 20/16 gap 30,
     заголовок 26/29, лид 18/25 */
  .pxlh-feat-media{aspect-ratio:343/211}
  .pxlh-feat-copy{padding:20px 16px;gap:30px}
  .pxlh-feat-h{font-size:26px;line-height:29px}
  .pxlh-feat-lead{max-width:none;font-size:18px;line-height:25px}
  .pxlh-round{width:48px;height:40px}
  .pxlh-round .pxl-ico{width:18px;height:18px}
  .pxlh-mosaic{grid-template-columns:1fr;grid-template-rows:auto;gap:16px}
  .pxlh-mosaic-col{gap:16px}
  .pxlh-mbig{grid-template-columns:1fr;border-radius:16px}
  .pxlh-mbig-copy{order:2;padding:20px;border-radius:16px}
  .pxlh-mbig-media{order:1;aspect-ratio:16/10}
  .pxlh-mrow{grid-template-columns:110px minmax(0,1fr);height:100px;min-height:0;border-radius:16px}
  .pxlh-mrow-copy{padding:10px 12px;gap:4px}
  .pxlh-slider{gap:8px}
  .pxlh-sarrow{display:none}
  /* затухание у правого края — как у «Популярное»/«Обновления» (заказчик 2026-08-04) */
  .pxlh-strack{gap:12px;margin:0 -16px;padding:0 16px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%)}
  .pxlh-scard{flex:0 0 82vw;max-width:340px;min-height:128px;height:auto;border-radius:16px}
  .pxlh-scard-copy{padding:12px;gap:8px}
  .pxlh-rubs{grid-template-columns:1fr;gap:16px}
  .pxlh-rub-main{grid-template-columns:1fr;border-radius:16px}
  .pxlh-rub-main-copy{order:2;padding:20px;gap:14px}
  .pxlh-rub-main-art{order:1;aspect-ratio:16/9}
  .pxlh-rub-main-copy .pxl-btn{align-self:stretch;justify-content:center}
  .pxlh-rub{flex-direction:row;align-items:center;border-radius:16px}
  .pxlh-rub-copy{padding:16px;flex:1}
  .pxlh-rub-art{height:auto;align-self:stretch;width:110px;margin-top:0}
  .pxlv-feed-chipsrow{gap:10px}
  .pxlh-pop{grid-template-columns:1fr;gap:16px}
  .pxlh-pcard-copy{padding:14px;gap:10px}
  /* 2. заголовок карточки: 20px в узкой карточке 230px давал 4-5 строк -> 17/22 */
  .pxlh-pcard-h{min-height:0;font-size:17px;line-height:22px}
  .pxlh-two{grid-template-columns:1fr;gap:16px}
  /* ── ПОДПИСКА и СОЦСЕТИ по макету 113:9089 ──
     Было: иконка стояла в строку СО ВСЕМ текстом (заголовок+описание) — текст обтекал её неровно.
     В макете иконка 73x73 в строку ТОЛЬКО с заголовком, описание — под ними во всю ширину.
     Разметку не трогаем (десктоп заморожен): перестраиваем сеткой, обёртку схлопываем display:contents.
     Размеры: карточка pad 20/16 r20 gap 30 · заголовок 20-21/24 · описание 14/22 · поле 45 r15 · кнопки 50 r15. */
  .pxlh-sub,.pxlh-soc{padding:20px 16px;border-radius:20px;gap:30px}
  .pxlh-sub-head,.pxlh-soc{display:grid;grid-template-columns:73px minmax(0,1fr);gap:10px 10px;align-items:center}
  .pxlh-sub-art,.pxlh-soc-art{position:static;transform:none;width:73px;height:73px;border-radius:12px;align-self:center}
  .pxlh-sub-copy,.pxlh-soc-copy{display:contents}
  .pxlh-sub-copy h2,.pxlh-soc-copy h2{grid-column:2;margin:0;font-size:20px;line-height:24px;font-weight:600}
  .pxlh-soc-copy h2{font-size:21px;font-weight:700}
  .pxlh-sub-copy p,.pxlh-soc-copy p{grid-column:1/-1;margin:0;font-size:14px;line-height:22px;color:var(--pxl-muted)}
  .pxlh-soc{padding-right:16px}
  .pxlh-soc-btns{grid-column:1/-1}
  .pxlh-soc br{display:none}   /* перенос в заголовке нужен только десктопу */
  .pxlh-mosaic{margin-bottom:16px}
  .pxlh-mosaic-col{grid-template-rows:auto auto}
  .pxlh-slider{margin-top:16px}
  .pxlh-strack{padding:10px 4px;margin:-10px -4px}
  /* в колонке align-items:flex-start (нужен на десктопе под подпись-ошибку) сжимал кнопку
     по тексту — на мобиле возвращаем растягивание на всю ширину */
  .pxlh-sub-form{flex-direction:column;gap:10px;align-items:stretch}
  .pxlh-sub-form input{padding:11px 16px;min-height:45px;border-radius:15px;font-size:14px}
  .pxlh-sub-form .pxl-btn{min-height:42px;border-radius:15px;font-size:14px}
  .pxlh-field{width:100%}
  .pxlh-field-msg{margin-top:6px;font-size:13px}
  .pxlh-sub-form .pxl-btn{justify-content:center}
  .pxlh-soc-btns{gap:10px}
  .pxlh-soc-btn{flex:1;justify-content:center;padding:16px 28px;min-height:50px;border-radius:15px;font-size:14px}
  .pxlh-soc-btn .pxl-ico{width:20px;height:20px}
  .pxlh-picks{grid-template-columns:1fr;gap:10px;padding:12px;border-radius:16px}
  /* зазор иконка-текст: .694444vw схлопывается в 2.6px на 375 (класс косяка №43) — фиксируем в px */
  /* рубрика v2 · hero: карточка в колонку, подтемы столбиком с горизонтальными
     разделителями (как в мобильном макете). Все отступы в px — vw схлопывается (§54). */
  .pxlr-hero{padding:10px 0 0}
  .pxlr-hero-card{grid-template-columns:1fr;width:auto;margin:0 16px;gap:14px;
    padding:16px 0 22px;border-radius:24px}
  /* Карточки рубрики без пилюли: возвращаем простую колонку. Сетка «мета в два уровня»
     (.pxlh-mrow-copy ниже) придумывалась под тесноту с пилюлей рубрики — без неё места
     хватает, а пустая первая ячейка сетки утащила бы разделитель «•» в середину строки. */
  /* align-items:flex-start обязателен: у сетки-предшественника стоит center, и в колонке
     он центрировал бы дату и время по горизонтали (проверено на рендере, а не на глаз). */
  .pxlr-card .pxlh-mrow-copy{display:flex;flex-direction:column;align-items:flex-start;
    justify-content:flex-start;gap:8px}
  .pxlr-card .pxlh-mrow-copy>.pxlh-row{display:flex;align-items:center;gap:10px}
  .pxlr-card .pxlh-mrow-copy>.pxlh-row>.pxlh-meta{display:inline-flex;align-items:center;gap:6px}
  .pxlr-card .pxlh-mrow .pxlh-meta:last-child{margin-top:auto}
  .pxlr-hero-copy{gap:12px}
  .pxlr-hero-lead{max-width:none}
  .pxlr-topics{flex-direction:column;gap:0;margin:4px 0 0}
  .pxlr-topic{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:2px;padding:12px 0}
  .pxlr-topic-txt small{grid-column:2}
  .pxlr-topic+.pxlr-topic{border-left:0;border-top:1px solid #e6e6e6}
  .pxlr-topic-ic{width:28px;height:28px}
  .pxlr-topic-ic svg{width:22px;height:22px}
  .pxlr-topic-txt{gap:3px}
  .pxlr-hero-art{order:-1;border-radius:15px;aspect-ratio:16/9}
  /* рубрика v2 · блок 07 FAQ — планшет и телефон: одна колонка, всё в px (§54) */
  .pxlr-faq{grid-template-columns:minmax(0,1fr);gap:10px}
  .pxlr-faq-item{border-radius:16px;padding:16px 18px}
  /* тач-цель не меньше 44px: без min-height строка вопроса давала 32-42px и в неё
     трудно попасть пальцем (замер приёмки, 768 и 375) */
  .pxlr-faq-item summary{gap:12px;min-height:44px}
  .pxlr-faq-q{font-size:15px;line-height:21px}
  .pxlr-faq-ic{width:32px;height:32px;border-radius:9px}
  .pxlr-faq-ic .pxl-ico{width:16px;height:16px}
  .pxlr-faq-a{padding-top:10px}
  .pxlr-faq-a p{font-size:14px;line-height:21px}
  /* рубрика v2 · карточка «Скоро» и заглушка обложки — в px (§54) */

  .pxlr-media--empty::after{width:22px;height:22px}
  /* рубрика v2 · блок 06 CTA — планшет по макету (704x128): арт слева, текст, кнопка справа;
     всё в px (§54). На телефоне раскладку доламываем ниже, в секции 520. */
  .pxlr-cta{gap:18px;border-radius:20px;padding:14px 18px 14px 0;min-height:128px}
  .pxlr-cta-art{width:170px;margin:0}
  .pxlr-cta-h{font-size:18px;line-height:24px}
  .pxlr-cta-text{font-size:12px;line-height:17px}
  .pxlr-cta-btn{height:46px;padding:0 18px;border-radius:13px;font-size:13px;gap:8px}
  .pxlr-cta-btn .pxl-ico{width:18px;height:18px}
  /* рубрика v2 · блок 05: карточки подборок — планшет, всё в px (§54).
     Колонка ОДНА: при двух карточка 360px, медиа сжималось до квадрата и резало
     кадр вдвое (замер: потеря 43-51%). В одну колонку доля 30% даёт ~1.7 — потеря 5%. */
  .pxlr-colls{gap:16px;grid-template-columns:minmax(0,1fr)}
  .pxlr-coll{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
  .pxlr-coll{border-radius:16px}
  .pxlr-coll:hover{transform:none;box-shadow:none}
  .pxlr-coll-copy{gap:6px;padding:12px 14px}
  .pxlr-coll-h{font-size:16px;line-height:21px}
  .pxlr-coll-text{font-size:13px;line-height:19px}
  .pxlr-coll-foot{gap:10px;padding-top:10px}
  .pxlr-coll-cnt{font-size:12px}
  .pxlr-coll-btn{padding:7px 12px;border-radius:10px;font-size:13px}
  .pxlr-coll-btn .pxl-ico{width:14px;height:14px}
  .pxlr-coll-ic .pxl-ico{width:32px;height:32px}
  /* рубрика v2 · блок 05: подзаголовок секции в px (§54) */
  .pxlr-sec-lead{margin:-8px 0 16px;font-size:14px;line-height:20px}
  /* рубрика v2 · блок 04: планшет — кладка сжимается до двух колонок, всё в px (§54) */
  .pxlf-rows{gap:16px}
  .pxlf-grid{gap:16px}
  .pxlf-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pxlf-card{border-radius:16px}
  .pxlf-card:hover{transform:none;box-shadow:none}
  .pxlf-copy{gap:8px;padding:14px 16px 16px}
  .pxlf-h{font-size:17px;line-height:22px;font-weight:600}
  .pxlf-lead{font-size:13px;line-height:19px}
  .pxlf-card .pxlh-meta:last-child{padding-top:8px}
  .pxlf-card--row{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
  .pxlf-card--row .pxlf-copy{padding:12px 14px}
  .pxlf-more{margin-top:16px;gap:12px}
  .pxlf-more-btn{font-size:14px;padding:12px 20px;border-radius:12px}
  .pxlf-more-cnt{font-size:12px}
  /* рубрика v2 · крошки: фиксируем в px — vw схлопывается (журнал §54) */
  .pxlr-crumbs-list{width:auto;padding:14px 16px;gap:7px;font-size:11px}
  .pxlr-crumbs-item{gap:7px}
  .pxlr-crumbs-sep svg{width:12px;height:12px}
  .pxlh-pick{padding:10px;border-radius:14px;gap:12px}
  .pxlh-pick-txt{gap:2px}
  .pxlh-pick-txt strong{line-height:1.35}
  .pxlh-pick-txt small{line-height:1.35}
  .pxlh-pick-ic{width:40px;height:40px;border-radius:10px}
  .pxlh-pick-ic .pxl-ico{width:22px;height:22px}
  .pxlh-upds{grid-template-columns:1fr;gap:12px}
  .pxlv-feed-grid--slider-m .pxlh-pcard,.pxlv-feed-grid--slider-m .pxlh-upd{flex:0 0 230.4px;scroll-snap-align:start}
  .pxlh-upd{padding:6px;border-radius:16px}
  .pxlh-upd-badge{left:8px;bottom:8px}
  .pxlh-upd-copy{padding:10px 10px 14px}
}

/* ===== Страница автора (Figma 1306:46963 / 1306:47011) ===== */
.pxlv-author-h1{margin:.694444vw 0 1.944444vw;font-size:var(--pxl-fs-h1);line-height:var(--pxl-lh-h1);font-weight:700}
.pxlv-authorgrid{display:grid;grid-template-columns:minmax(0,1fr) 17.291667vw 17.291667vw;gap:1.666667vw;align-items:stretch}
.pxlv-authorbox{display:grid;grid-template-columns:9.375vw minmax(0,1fr);gap:1.666667vw;padding:1.944444vw;border-radius:1.111111vw;background:#fff;border:1px solid #e6e6e6}
/* r50%: текущий аватар-ассет — тёмный квадрат с запечённым кругом, в квадратном
   контейнере оставались тёмные углы (M4). Круглый кроп до замены ассета на
   полноформатный квадратный арт (как в макете 1306:46963). */
.pxlv-authorbox-photo{width:9.375vw;height:9.375vw;overflow:hidden;border-radius:50%;background:#f6f6f6}
.pxlv-authorbox-photo img{width:100%;height:100%;object-fit:cover}
.pxlv-authorbox-info{display:flex;flex-direction:column;gap:.555556vw;min-width:0}
.pxlv-author-badge{align-self:flex-start}
.pxlv-authorbox-info h2{margin:0;font-size:2.222222vw;line-height:1.1;font-weight:700}
.pxlv-authorbox-role{margin:0}
.pxlv-authorbox-bio{margin:0}
.pxlv-author-socials{display:flex;gap:.694444vw;margin-top:.416667vw}
.pxlv-author-soc{display:grid;place-items:center;width:2.777778vw;height:2.777778vw;border:1px solid #e6e6e6;border-radius:50%;color:#262626;background:#fff;transition:border-color .15s ease}
.pxlv-author-soc:hover{border-color:#262626}
.pxlv-author-soc svg{width:1.25vw;height:1.25vw}
/* обёртка счётчиков: на десктопе «растворяется» (статкарты — прямые ячейки
   authorgrid), на мобиле становится сеткой 2×1 (макет 1306:47011). Держать в CSS,
   НЕ инлайном — инлайн display:contents перебивал мобильную сетку (дефект S5). */
.pxlv-statgrid-m{display:contents}
.pxlv-statcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.694444vw;padding:1.944444vw;border-radius:1.111111vw;background:#fff;border:1px solid #e6e6e6;text-align:center}
.pxlv-statcard-icon{display:grid;place-items:center;width:3.194444vw;height:3.194444vw;border-radius:.833333vw;background:#d8f953}
.pxlv-statcard-icon svg{width:1.527778vw;height:1.527778vw;color:#262626}
.pxlv-statcard-num{font-size:2.5vw;line-height:1;font-weight:700}
.pxlv-statcard-label{color:#767676;font-size:1.111111vw}
.pxlv-feed-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1.388889vw;padding:1.666667vw 0 .694444vw;flex-wrap:wrap}
.pxlv-feed-sort{display:inline-flex;align-items:center;gap:.555556vw;border:0;background:none;font-family:inherit;font-size:.972222vw;font-weight:500;color:#262626;cursor:pointer;padding:0}
.pxlv-feed-sort svg{width:1.111111vw;height:1.111111vw;transition:transform .2s ease}
.pxlv-feed-sort[data-order="asc"] svg{transform:rotate(180deg)}
.pxlv-feed-grid--4{grid-template-columns:repeat(4,1fr)}
.pxlv-feed-more{display:flex;justify-content:center;padding:1.666667vw 0}
@media(max-width:1199px){
  .pxlv-author-h1{margin:8px 0 20px}
  .pxlv-authorgrid{grid-template-columns:1fr;gap:16px}
  .pxlv-authorbox{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px;border-radius:15px;gap:16px}
  .pxlv-authorbox-photo{width:200px;height:200px;border-radius:50%}
  .pxlv-authorbox-info{align-items:center;gap:8px}
  .pxlv-authorbox-info h2{font-size:26px}
  .pxlv-authorbox-bio{text-align:left}
  .pxlv-author-socials{gap:10px;margin-top:6px}
  .pxlv-author-soc{width:44px;height:44px}
  .pxlv-author-soc svg{width:20px;height:20px}
  .pxlv-statgrid-m{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pxlv-statcard{padding:20px;border-radius:15px;gap:10px}
  .pxlv-statcard-icon{width:44px;height:44px;border-radius:12px}
  .pxlv-statcard-icon svg{width:22px;height:22px}
  .pxlv-statcard-num{font-size:32px}
  .pxlv-statcard-label{font-size:14px}
  .pxlv-feed-toolbar{padding:16px 0 8px}
  .pxlv-feed-sort{font-size:14px}
  .pxlv-feed-sort svg{width:16px;height:16px}
  /* карточки автора на мобиле — горизонтальный слайдер с peek (как related статьи) */
  /* скроллбар скрыт — как у остальных слайдеров (.pxlh-strack, .pxlv-feed-chipsrow, .pxlv-related-track):
     иначе под рядом «Популярное»/«Обновления» видна серая полоска (заказчик 2026-08-04) */
  .pxlv-feed-grid--slider-m{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pxlv-feed-grid--slider-m::-webkit-scrollbar{display:none}
  .pxlv-feed-grid--slider-m .pxlv-feed-card{flex:0 0 230.4px;scroll-snap-align:start}
  .pxlv-feed-more{padding:16px 0}
}
@media(max-width:1199px){
  /* ez-элемент бывает shrink-to-fit (узкие блоки, напр. крошки) — размер и центр
     считаем от ВЬЮПОРТА, не от родителя (родитель всегда центрирован) */
  .pxlv-feedwrap{width:calc(100vw - 32px);max-width:960px;margin-left:calc(50% - min(50vw - 16px,480px));margin-right:0}
  .pxlv-feed-crumbs{padding:24px 0 12px;font-size:12px}
  .pxlv-feed-hero h1{font-size:28px}
  .pxlv-feed-hero p{font-size:16px;max-width:none}
  .pxlv-proto-badge{padding:4px 12px;border-radius:20px;font-size:11px}
  .pxlv-feed-chips{gap:8px;padding:16px 0}
  .pxlv-chip{min-height:34px;padding:6px 20px;border-radius:20px;font-size:12px}
  .pxlv-feed-title{font-size:24px}
  .pxlv-feed-grid{grid-template-columns:1fr;gap:20px}
  .pxlv-feed-copy{padding:16px;gap:12px}
  .pxlv-feed-tag{padding:4px 12px;border-radius:20px;font-size:11px}
  .pxlv-feed-pager a,.pxlv-feed-pager span{min-width:34px;min-height:34px;border-radius:12px}
  .pxlv-feed-seo{font-size:14px;max-width:none}
}

/* ===== Артикль-элементы пакета unit-ekonomika (2026-07-17): новые классы,
   article-2 не затрагивают ===== */
.pxlv-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.694444vw}
.pxlv-list li{position:relative;padding-left:1.527778vw;font-size:.972222vw;line-height:1.55;color:#2b2b2b}
/* Матрица, Text lists: буллет — КРУГ 8×8 ГРАФИТОВЫЙ. Лайм на светлом фоне запрещён
   правилом контраста (в макете по нему исправлен 21 маркер). Было: лаймовый квадрат
   со скруглением 2px и внутренним контуром — читалось как чекбокс (заказчик 07.08.2026). */
.pxlv-list li::before{content:"";position:absolute;left:.208333vw;top:.555556vw;width:.555556vw;height:.555556vw;border-radius:999px;background:#1f1f1f}
/* Нумерованный список автора: номер вместо буллета, тот же кегль и цвет текста.
   Это НЕ карточки шагов (ID-4) — специализированный компонент ставится только пометкой. */
.pxlv-list--num{counter-reset:pxlv-num}
.pxlv-block .pxlv-list--num li{counter-increment:pxlv-num;padding-left:1.805556vw}
.pxlv-block .pxlv-list--num li::before{content:counter(pxlv-num) ".";left:0;top:0;width:auto;height:auto;border-radius:0;background:none;font-size:.972222vw;line-height:1.55;font-weight:600;color:#1f1f1f}
.pxlv-note{display:flex;flex-direction:column;gap:.416667vw;padding:1.111111vw 1.388889vw;border-radius:1.041667vw;background:#f6f6f6;border-left:.277778vw solid #d8f953}
.pxlv-note strong{font-size:.972222vw;font-weight:700;color:#262626}
.pxlv-note p{margin:0;font-size:.972222vw;line-height:1.5;color:#2b2b2b}
/* иконка календаря в нормальном размере + воздух от кнопки (заказчик 2026-07-17) */
.pxlv-cta-note{display:inline-flex;align-items:center;gap:.555556vw;align-self:center;margin-left:.694444vw;font-size:.833333vw;color:rgba(255,255,255,.6)}
.pxlv-cta-note .pxlv-ic,.pxlv-cta-note svg{width:1.25vw;height:1.25vw;flex:0 0 auto;color:rgba(255,255,255,.75)}
@media(max-width:1199px){
  .pxlv-list{gap:10px}
  .pxlv-list li{padding-left:22px;font-size:15px}
  .pxlv-list li::before{left:2px;top:8px;width:8px;height:8px;border-radius:999px;background:#1f1f1f}
  /* мобильные отступы — в px: vw здесь схлопывается (журнал §54) */
  .pxlv-block .pxlv-list--num li{padding-left:26px}
  .pxlv-block .pxlv-list--num li::before{left:0;top:0;width:auto;height:auto;font-size:15px;line-height:1.55}
  .pxlv-note{padding:16px 18px;border-radius:14px;border-left-width:4px}
  .pxlv-note strong,.pxlv-note p{font-size:15px}
  .pxlv-cta-note{font-size:13px;align-self:flex-start}
}

/* ============================================================================
   ФИНАЛЬНЫЙ МОБИЛЬНЫЙ БЛОК (обязан быть ПОСЛЕДНИМ в файле).
   Здесь живут мобильные оверрайды компонентов, чьи десктопные правила объявлены
   выше по файлу ПОЗЖЕ раннего DS-блока: одинаковая специфичность решается
   порядком, поэтому мобильные правила обязаны идти последними (корень немого
   CTA K2 / кв-иконок S2 / чипов S7 — мобильный дефект-раунд 2026-07-20).
   Новые мобильные правила для pxl-democta, pxl-modal, pxl-search, pxlh-…,
   pxlv-feed-… добавлять СЮДА. (В CSS-комментариях НЕЛЬЗЯ писать «звёздочка+слэш»
   даже в имени класса — закрывает комментарий и парсер съедает весь блок.)
   ============================================================================ */
@media(max-width:1199px){
  /* --- воздух чипов и тулбара (S7) --- */
  [data-pxl-feed] .pxlv-feed-chipsrow,[data-pxl-colfilter].pxlv-feed-chipsrow,.pxlv-feed-toolbar{margin-bottom:16px}
  .pxlv-feed-toolbar{gap:12px;padding:16px 0 8px}
  /* чипы-фильтры = одна строка с горизонтальной прокруткой (макет 375: 113:9089 /
     1306:47011), full-bleed до края экрана */
  /* Панель чипов в потоке = ТОТ ЖЕ вид, что у липкой (заказчик 2026-08-04).
     Отрицательные поля -16 делали ленту шире контейнера, поэтому шеврон вставал на 16px левее
     края экрана и из-под него торчал следующий чип. У клона они уже убраны — убираем и здесь. */
  .pxlv-feed-chipsrow{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-left:0;margin-right:0;padding:2px 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding:0 16px;max-width:none}
  .pxlv-feed-chipsrow::-webkit-scrollbar{display:none}
  /* ── ЛИПКИЕ ТАБЫ (мобилка) ──
     Оригинальный ряд ВСЕГДА в потоке; под шапкой показывается его клон (в body, fixed).
     Так высота документа не меняется — иначе скролл залипал (заказчик 2026-08-04).
     Клон мягко появляется/исчезает: opacity + сдвиг вверх. */
  .pxlv-chips-clone{display:block;position:fixed;left:0;right:0;z-index:900;padding:8px 0 6px;
    background:var(--pxlv-bg,#f6f6f6);box-shadow:0 6px 14px -10px rgba(0,0,0,.35);
    /* появление — почти мгновенное и без сдвига: должно читаться как закрепление панели,
       а не как выпрыгивающий блок (заказчик 2026-08-04). Исчезновение остаётся мягким. */
    opacity:0;pointer-events:none;transition:opacity .12s ease}
  .pxlv-chips-clone.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
  .pxlv-chips-clone-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pxlv-chips-clone-row::-webkit-scrollbar{display:none}
  .pxlv-chips-clone-row .pxl-chip{flex:0 0 auto;padding:11px 18px;border-radius:14px}
  /* клон живёт в <body>, а Onest задан на контейнерах блоков → шрифт наследовался системный.
     И отрицательные поля ряда (-16, компенсация паддинга родителя) в клоне лишние — чипы липли к краю. */
  .pxlv-chips-clone{font-family:Onest,Arial,sans-serif}
  .pxlv-chips-clone .pxlv-chips-clone-row{margin-left:0;margin-right:0}
  /* шеврон-подсказка: есть ещё табы (и у оригинала, и у клона) */
  .pxlv-chips-wrap,.pxlv-chips-clone{position:relative}
  /* Обёртка ленты в потоке растянута на всю ширину экрана — как липкая панель.
     Фиксированные -16 не годятся: блок конструктора (.ez-html) даёт свои поля (32px), из-за чего лента
     обрывалась на 359 из 375 и шеврон вставал у края контейнера, а не экрана. 100vw не зависит от вложенности. */
  .pxlv-chips-wrap{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .pxlv-chips-clone{position:fixed}
  /* ⚠ было content:; — невалидно, псевдоэлемент не создавался: ни затухания, ни шеврона (2026-08-04) */
  .pxlv-chips-wrap::after,.pxlv-chips-clone::after{content:"";position:absolute;right:0;top:0;bottom:0;
    width:72px;pointer-events:none;transition:opacity .15s ease;
    /* иконка ПЕРВЫМ слоем: в background первый слой рисуется сверху, иначе шеврон прятался под градиентом */
    /* ближняя к краю часть — СПЛОШНОЙ фон, а не градиент: иначе из-под стрелки выглядывал
       край следующего таба (заказчик 2026-08-04). Затухание осталось на дальней половине. */
    background:no-repeat right 14px center/15px 15px
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23262626%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m9 18 6-6-6-6%27/%3E%3C/svg%3E"),
    linear-gradient(to left,var(--pxlv-bg,#f6f6f6) 0,var(--pxlv-bg,#f6f6f6) 58%,rgba(246,246,246,0) 100%)}
  .pxlv-chips-wrap.is-end::after,.pxlv-chips-clone.is-end::after{opacity:0}
  .pxlv-feed-chipsrow .pxl-chip{flex:0 0 auto}
  /* в тулбаре (автор/рубрика) ряд чипов занимает всю строку, «Сначала новые» — ниже */
  .pxlv-feed-toolbar .pxlv-feed-chipsrow{flex:1 1 100%;margin-bottom:4px}
  /* --- иконки в метах карточек листингов (S2: были 3.9px-квадратики) --- */
  .pxlv-feed-meta .pxl-ico,.pxlv-rfeat-meta .pxl-ico{width:14px;height:14px}
  /* --- поиск --- */
  .pxl-search-drop{border-radius:14px}
  .pxl-search-item{padding:12px 14px}
  /* --- demo-CTA (K2: на мобиле арт сверху, текст+кнопка снизу — макет 113:9089) --- */
  .pxl-democta{grid-template-columns:1fr;border-radius:20px}
  .pxl-democta-copy{order:2;padding:24px;gap:16px}
  /* на мобиле арт сверху: маска ВЕРТИКАЛЬНАЯ — картинка растворяется вниз в фон карточки,
     иначе виден резкий стык светлого арта с тёмным блоком (заказчик 2026-08-04).
     Десктопная маска (слева-направо) тут не подходит — потому и была отключена. */
  /* было aspect-ratio 16/10 при картинке 1400x788 (1.78) -> contain оставлял тёмные поля
     сверху и снизу. Ставим пропорции самой картинки — поля уходят. */
  .pxl-democta-art{order:1;aspect-ratio:1400/788;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%)}
  /* зазор иконка→текст был .555556vw = 2px на 375 (vw схлопывается) — иконки липли к тексту */
  .pxl-democta-list li{gap:10px}
  .pxl-democta-list{flex-direction:column;gap:10px}
  .pxl-democta-list .pxl-ico{width:20px;height:20px}
  .pxl-democta-copy .pxl-btn{align-self:stretch;justify-content:center}
  /* --- модалка записи на демо --- */
  .pxl-modal-card{width:min(94vw,480px);border-radius:18px;padding:20px;gap:12px}
  .pxl-modal-x{top:12px;right:12px;width:36px;height:36px}
  .pxl-modal-x .pxl-ico{width:16px;height:16px}
  .pxl-demo-contacts{grid-template-columns:1fr}
  .pxl-demo-contacts input{padding:14px 16px;border-radius:12px}
  /* --- хаб подборок: сетка в столбик --- */
  .pxlv-chub-grid{grid-template-columns:1fr;gap:16px}
  /* --- карточки ленты главной: иерархия меты (S1) + иконки (S2) --- */
  .pxlh-feat .pxlh-meta,.pxlh-mbig .pxlh-meta,.pxlh-mrow .pxlh-meta,.pxlh-scard .pxlh-meta,.pxlh-pcard .pxlh-meta,.pxlf-card .pxlh-meta{font-size:var(--pxl-fs-caption)}
  .pxlh-feat .pxlh-meta .pxl-ico,.pxlh-mbig .pxlh-meta .pxl-ico,.pxlh-mrow .pxlh-meta .pxl-ico,.pxlh-scard .pxlh-meta .pxl-ico,.pxlh-pcard .pxlh-meta .pxl-ico,.pxlf-card .pxlh-meta .pxl-ico{width:14px;height:14px}
  /* --- строка-карточка мозаики (K1: заголовок пропадал в фикс-высоте 100px).
     Мобильный вид = компакт-карточка макета 113:9089: текст слева, арт СПРАВА 41%,
     высота от контента, заголовок 16/700 до 3 строк --- */
  /* картинка была 41% (140px) — тексту оставалось ~200px, из-за чего заголовок ужимался
     автоподгонкой до 12.8px. Сузили до 32% (110px): текст ~210px, заголовок влезает в 17px. */
  .pxlh-mrow{grid-template-columns:minmax(0,1fr) 32%;height:auto;min-height:132px}
  .pxlh-mrow-media{order:2;border-radius:12px}
  .pxlh-mrow-copy{order:1;justify-content:flex-start;padding:12px;gap:8px}
  /* шкала заголовков карточек на мобиле: крупная 20 · строка и «популярное» 17 · слайдер 15 */
  .pxlh-mrow-h{font-size:calc(17px * var(--pxl-fit,1));line-height:22px;font-weight:700;-webkit-line-clamp:4}
  .pxlh-mrow .pxlh-meta:last-child{margin-top:auto}
  /* мета в два уровня (решение заказчика 2026-08-04): СВЕРХУ «рубрика • Статья», СНИЗУ время и дата.
     Текстовый блок узкий (~210px), и строка «пилюля + дата • Статья» переносилась в две строки,
     съедая место у заголовка. Разметку не трогаем (десктоп заморожен) — раскладываем сеткой:
     обёртки .pxlh-row и верхняя .pxlh-meta растворяются (display:contents), их содержимое
     становится ячейками сетки самой карточки и разводится по строкам 1 и 3. */
  /* justify-content:start — чтобы десктопный space-between не разносил колонки сетки */
  .pxlh-mrow-copy{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-content:start;column-gap:6px;row-gap:8px}
  .pxlh-mrow-copy>.pxlh-row{display:contents}
  .pxlh-mrow-copy>.pxlh-row>.pxlh-meta{display:contents}
  .pxlh-mrow-copy>.pxlh-row>.pxl-tag{grid-area:1/1;padding:5px 10px;font-size:12px}
  .pxlh-mrow-copy>.pxlh-row>.pxlh-meta>span[aria-hidden="true"]{grid-area:1/2;justify-self:end}
  .pxlh-mrow-copy>.pxlh-row>.pxlh-meta>span:not([aria-hidden="true"]){grid-area:1/3;justify-self:start}
  .pxlh-mrow-copy>.pxlh-row>.pxlh-meta>.pxl-ico{grid-area:3/2;justify-self:end}
  .pxlh-mrow-copy>.pxlh-row>.pxlh-meta>time{grid-area:3/3;justify-self:start}
  .pxlh-mrow-copy>.pxlh-mrow-h{grid-area:2/1/3/4;align-self:start}
  .pxlh-mrow-copy>.pxlh-meta{grid-area:3/1}
  .pxlh-mrow .pxlh-meta{font-size:11px}
  /* крупная карточка: внутренний ритм (был .694444vw → 2.6px на 375 — строки слипались) */
  .pxlh-mbig-copy{gap:10px}
  /* лид показываем ЦЕЛИКОМ: карточка тянется вниз на нужную высоту (заказчик 2026-08-04).
     Ограничение по числу строк не годится — длинный лид всё равно упрётся в потолок. */
  .pxlh-mbig-lead{display:block;-webkit-line-clamp:unset;overflow:visible}
  .pxlh-mbig-h{display:block;-webkit-line-clamp:unset;overflow:visible}
  /* --- слайдеры: выравнивание прокрутки по краю (S6 «тонкая полоска») --- */
  .pxlh-strack{scroll-padding:0 4px}
  .pxlv-feed-grid--slider-m{scroll-padding:0 4px}
  .pxlv-related-track{scroll-padding-left:16px}
  /* --- слайдер карточек автора (K5): широкая карточка с peek по макету
     1306:47011 (~316px @375), одиночный результат — на всю ширину (M5) --- */
  .pxlv-feed-grid--slider-m .pxlv-feed-card{flex:0 0 min(316px,84vw)}
  .pxlv-feed-grid--slider-m .pxlv-feed-card:only-child{flex:1 1 100%}
  /* --- «Популярное»: мета прижата к низу карточки (M2) --- */
  .pxlh-pcard-copy{flex:1}
  .pxlh-pcard-copy .pxlh-row{margin-top:auto}
  /* --- hero статьи --- */
  /* обложка на всю ширину карточки (S3: desktop aspect-ratio 1/.92 сжимал её до ~65%) */
  .pxlv-hero-media{aspect-ratio:auto;width:100%}
  /* H1 статьи БЕЗ обрезания многоточием (K3) — полный заголовок, кламп только desktop
     (кегль не трогаем: 34px планшет / 26px ≤520 задают ранние блоки) */
  .pxlv-hero h1{display:block;-webkit-line-clamp:unset;overflow:visible}
  /* верхняя строка: «Статья» и дата читаемого размера, перенос разрешён (M3: элементы
     рендерились 3px-обрывками из-за vw-кегля) */
  .pxlv-hero-top{flex-wrap:wrap;gap:8px 10px}
  .pxlv-hero-kind{font-size:12px}
  .pxlv-hero-kind::before{margin-right:6px}
  .pxlv-meta.pxlv-hero-meta{font-size:12px;gap:14px}
  .pxlv-hero-meta .pxlv-meta-item{gap:6px}
  /* Подвал hero на телефоне: перенос РАЗРЕШЁН. Запрет переноса и nowrap у имени
     (нужные на десктопе, чтобы «Редакция Prodamus XL» не ломалась на две строки)
     распирали hero-copy шире экрана — H1 и лид обрезались справа (07.08.2026). */
  /* Порядок на телефоне (заказчик 07.08.2026): дата и время СВЕРХУ, под ними
     разделитель, ниже автор. Отступы прежние — 12px между строками, линия занимает
     место зазора и не добавляет высоты. */
  .pxlv-hero-foot{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .pxlv-meta.pxlv-hero-meta{order:1;margin-left:0;flex:1 1 100%}
  .pxlv-hero-foot .pxlv-author-row{order:2;flex:1 1 100%;min-width:0;
    padding-top:12px;border-top:1px solid var(--pxlv-line,#e6e6e6)}
  .pxlv-hero-foot .pxlv-author-row strong{white-space:normal}
  /* --- таблицы статьи (K4): индикатор горизонтальной прокрутки. JS оборачивает
     .pxlv-table в .pxlv-tblwrap и ставит is-scrollable/is-end --- */
  .pxlv-tblwrap{position:relative}
  .pxlv-tblwrap::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;width:32px;border-radius:0 15px 15px 0;background:linear-gradient(270deg,rgba(26,26,26,.16),rgba(26,26,26,0));opacity:0;transition:opacity .25s ease;pointer-events:none}
  .pxlv-tblwrap.is-scrollable:not(.is-end)::after{opacity:1}

  /* ======== РАУНД 2 (2026-07-20) ======== */
  /* --- R1: внутренние отступы ВСЕХ пилюль/чипов (vw-паддинги схлопывались до 1-4px).
     Тег карточек = DS Tag/Small pad 6/10 (макет 113:9089 «Tag/Small»);
     чипы-фильтры = макет Tabs 375: pad 18/28, r15, текст 14/500;
     чипы модалки демо — компактные (модалка не из макета, дизайн принят ранее) --- */
  .pxl-tag{padding:6px 10px}
  .pxl-chip{padding:8px 14px} /* кегль — из роли --pxl-fs-label (14px на мобиле) */
  /* чипы компактнее: было 18/28 (высота 52) -> 11/18 (высота ~40) — заказчик 2026-08-04 */
  .pxlv-feed-chipsrow .pxl-chip{padding:11px 18px;border-radius:14px}
  .pxlv-colmat-soonbadge{padding:3px 9px;font-size:12px}
  /* --- R1/R2/R4: карточки «Обновления» по мобильному макету 113:9089 «Mini cards»:
     карточка r15 pad5, арт 220x109 r15 (высота ФИКС — без искажений и «квадратов»),
     заголовок 17/600 lh20, копия pad 15/10 gap15 --- */
  .pxlh-upd{border-radius:15px;padding:5px}
  .pxlh-upd-media{height:109px;aspect-ratio:auto;border-radius:15px}
  .pxlh-upd-media img{width:100%;height:100%;object-fit:cover;object-position:center}
  .pxlh-upd-h{font-size:17px;font-weight:600;line-height:1.18}
  .pxlh-upd-copy{padding:15px 10px;gap:15px}
  /* --- R3: тени/подъём карточек на мобиле убраны единообразно (на таче ховер
     «залипал» после касания — у части карточек была тень, у части нет) --- */
  .pxl-card:hover,.pxlh-mbig:hover,.pxlh-mrow:hover,.pxlh-scard:hover,.pxlh-rub:hover,.pxlh-rub-main:hover,.pxlv-related-card:hover{transform:none;box-shadow:none}
  /* --- R5 (вариант А): компакт-карточка слайдера — высота от контента,
     заголовок до 4 строк целиком (без «трёх точек») --- */
  .pxlh-scard{height:auto;min-height:128px}
  .pxlh-scard-h{font-size:calc(15px * var(--pxl-fit,1));line-height:20px;display:block;-webkit-line-clamp:unset;overflow:visible}
  /* --- R6: vw-тексты без мобильного оверрайда (микрошрифт 3px):
     ответы FAQ вне статьи (рубрика/подборка), список статей в карточках
     «Подборки по задачам» рубрики, «Смотреть все подборки» хаба --- */
  .pxlv-faq-answer p{font-size:14px}
  .pxlv-rcol-list li a{font-size:14px;line-height:1.35}
  .pxlv-chub-pop-all{font-size:14px}
  .pxlv-chub-pop-all svg{width:18px;height:18px}
  /* --- FAQ: шеврон = размер ноды 678:17423 (бокс 12x12; был 8px — мельче макета) --- */
  .pxlv-faq-chevron{width:12px;height:12px}

  /* --- 404: арты карточек = КВАДРАТНЫЕ иконки (ассеты 2026-07-30). Ранний блок задавал 16/9+cover —
     квадрат обрезался сверху/снизу. Здесь: пропорция мягче + contain (иконка целиком), фон = #fefefe. --- */
  .pxlv-info-card-media{order:1;aspect-ratio:3/2;background:#fefefe}
  .pxlv-info-card-media img{object-fit:contain}

  /* --- МЕТА КАРТОЧЕК на мобиле (замечания заказчика 2026-08-04) ---
     1) gap внутри меты был .416667vw = 1.5px на 375 (vw схлопывается) → иконка липла к дате;
     2) при переносе меты в две строки не было вертикального отступа;
     3) строка меты прижимается к низу — чтобы не «плавала» от числа строк заголовка. --- */
  .pxlh-meta{gap:6px}
  .pxlh-row{column-gap:12px;row-gap:8px}
  .pxlh-meta .pxl-ico{flex:0 0 auto}
  .pxlh-pcard{height:100%}
  .pxlh-pcard-copy{flex:1}
  .pxlh-pcard-copy .pxlh-row{margin-top:auto}
  .pxlh-upd-copy{flex:1}
  .pxlh-upd-copy .pxlh-meta{margin-top:auto}
  /* карман под тень ховера в мобильном слайдере «Популярное/Обновления»;
     scroll-padding обязателен — иначе снап съедает боковой отступ (как было на десктопе) */
  /* 1. карточки в ряду одной высоты (align-items:stretch) — иначе низ гуляет от числа строк заголовка;
     3. лёгкое затухание у правого края = подсказка, что ряд прокручивается (заказчик 2026-08-04) */
  .pxlv-feed-grid--slider-m{padding:6px 16px 20px;margin:-6px -16px -20px;scroll-padding-inline:16px;
    align-items:stretch;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)}
  .pxlv-feed-grid--slider-m>*{height:auto;align-self:stretch}
}

/* ===== ПОПАП «НАПИСАТЬ СТАТЬЮ» (Figma 1366:46080 D / 1366:46108 M) =====
   Карточка 640×auto, pad 30, r25, gap 10. Поля 45px, r15, фон #f6f6f6, pad 0 16 0 20,
   плейсхолдер 14/400 #767676. Кнопка лайм #deff3f, текст 18/500. Состав полей — по
   МОБИЛЬНОМУ макету: там два чекбокса, в десктопном второй забыт (заказчик 2026-08-04). */
.pxl-artmodal .pxl-modal-card{width:min(92vw,44.444444vw);padding:2.083333vw;border-radius:1.736111vw;gap:.694444vw}
.pxl-artmodal-h{margin:0;font-size:1.666667vw;line-height:1.3;font-weight:700;color:var(--pxl-text);padding-right:2.5vw}
.pxl-artmodal-sub{margin:0;font-size:var(--pxl-fs-body);line-height:1.45;color:var(--pxl-muted)}
.pxl-artform{display:flex;flex-direction:column;gap:.694444vw;margin-top:.416667vw}
.pxl-artform-row{display:flex;gap:.694444vw}
.pxl-artform-row>.pxl-artfield{flex:1;min-width:0}
.pxl-artfield{display:block;position:relative}
.pxl-artfield input,.pxl-artfield select,.pxl-artfield textarea{
  width:100%;box-sizing:border-box;height:3.125vw;padding:0 1.111111vw 0 1.388889vw;
  border:1px solid transparent;border-radius:1.041667vw;background:var(--pxl-light);
  font:inherit;font-size:var(--pxl-fs-body);color:var(--pxl-text);outline:none;
  transition:border-color .15s ease,background .15s ease}
.pxl-artfield textarea{height:6.944444vw;padding:1.041667vw 1.111111vw 1.041667vw 1.388889vw;resize:vertical;line-height:1.45}
.pxl-artfield select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.111111vw center;background-size:1.111111vw;padding-right:2.777778vw}
.pxl-artfield input::placeholder,.pxl-artfield textarea::placeholder{color:var(--pxl-muted)}
.pxl-artfield select:invalid{color:var(--pxl-muted)}
/* состояния — те же, что у формы подписки */
.pxl-artfield input:hover,.pxl-artfield textarea:hover,.pxl-artfield select:hover{background:#f0f0f0}
.pxl-artfield input:focus,.pxl-artfield textarea:focus,.pxl-artfield select:focus{border-color:var(--pxl-dark);background:#fff}
.pxl-artfield.is-error input,.pxl-artfield.is-error select,.pxl-artfield.is-error textarea{border-color:#e5484d;background:#fff6f6}
.pxl-artfield-msg{display:none;margin-top:.277778vw;padding-left:.277778vw;font-size:var(--pxl-fs-small);line-height:1.3;color:#e5484d}
.pxl-artfield-msg.is-on{display:block}
.pxl-artcheck{display:flex;align-items:flex-start;gap:.694444vw;font-size:var(--pxl-fs-caption);line-height:1.35;color:var(--pxl-muted);cursor:pointer}
.pxl-artcheck input{flex:0 0 auto;width:1.25vw;height:1.25vw;margin:0;accent-color:var(--pxl-dark);cursor:pointer}
.pxl-artcheck.is-error span{color:#e5484d}
.pxl-artcheck.is-error input{outline:2px solid #e5484d;outline-offset:1px;border-radius:.347222vw}
.pxl-artsubmit{height:3.125vw;border-radius:1.041667vw;font-size:1.25vw;font-weight:500;margin-top:.416667vw}
.pxl-artpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.pxl-artdone{margin:0;padding:1.388889vw;border-radius:1.041667vw;background:#f4fffa;border:1px solid #22d48d;
  font-size:var(--pxl-fs-body);line-height:1.45;color:#12a06a;text-align:center}

@media(max-width:1199px){
  .pxl-artmodal .pxl-modal-card{width:min(94vw,420px);padding:20px;border-radius:25px;gap:10px}
  .pxl-artmodal-h{font-size:24px;padding-right:36px}
  .pxl-artmodal-sub{font-size:14px}
  .pxl-artform,.pxl-artform-row{gap:10px}
  .pxl-artform-row{flex-direction:column} /* в мобильном макете поля в одну колонку */
  .pxl-artfield input,.pxl-artfield select,.pxl-artfield textarea{height:45px;padding:0 16px 0 20px;border-radius:15px;font-size:14px}
  .pxl-artfield textarea{height:100px;padding:15px 16px 15px 20px}
  .pxl-artfield select{background-position:right 16px center;background-size:16px;padding-right:40px}
  .pxl-artfield-msg{margin-top:4px;font-size:12px}
  .pxl-artcheck{gap:10px;font-size:12px}
  .pxl-artcheck input{width:18px;height:18px}
  .pxl-artsubmit{height:45px;border-radius:15px;font-size:16px}
  .pxl-artdone{padding:16px;border-radius:15px;font-size:14px}
}

/* ─── рубрика v2 · блок 04 на ТЕЛЕФОНЕ ─────────────────────────────────────────
   Секция стоит В КОНЦЕ ФАЙЛА намеренно: правила для 1199px идут выше, и при равной
   специфичности выигрывает последнее. Когда этот блок лежал раньше, планшетные
   колонки 34/66 перебивали мобильную одну колонку, а растянутая по высоте картинка
   с aspect-ratio 16/9 вылезала за экран на 55px (замер: media 430px при вьюпорте 375). */
@media(max-width:520px){
  /* блок 06 CTA — телефон по макету (343x180): сверху арт и текст рядом,
     кнопка отдельной строкой во всю ширину. */
  /* Арт во ВСЮ ШИРИНУ сверху, а не сбоку как в макете: макетный визуал 96x72 почти
     квадратный, а наш кадр широкий (2.84) — в 110px он превращался в нечитаемую полоску.
     Полная ширина сохраняет и кадр, и смысл картинки. */
  .pxlr-cta{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;border-radius:18px;min-height:0}
  .pxlr-cta-art{width:100%;margin:0;border-radius:12px;overflow:hidden}
  .pxlr-cta-btn{width:100%;height:48px;margin-left:0}
  .pxlr-cta-h{font-size:17px;line-height:22px}
  /* блок 05: на телефоне подборки в одну колонку и картинка сверху — при двух колонках
     карточка ужималась до 155px, а боковая картинка на узком экране схлопывается в марку. */
  .pxlr-colls{grid-template-columns:minmax(0,1fr)}
  .pxlr-coll{grid-template-columns:minmax(0,1fr)}
  .pxlr-coll-media{height:auto}
  .pxlr-coll-copy{padding:14px 16px 16px}
  .pxlf-grid--2,.pxlf-grid--3{grid-template-columns:minmax(0,1fr)}
  .pxlf-card--row{grid-template-columns:minmax(0,1fr)}
  .pxlf-card--row .pxlf-media{height:auto}
  .pxlf-card--row .pxlf-copy{padding:14px 16px 16px}
}

/* ─── чип «Скоро» на планшете и телефоне ───────────────────────────────────────
   Секция стоит В КОНЦЕ намеренно: `.pxlf-card .pxlh-meta:last-child{padding-top:8px}`
   объявлено выше и при равной специфичности перебивало бы чип — он тоже .pxlh-meta
   и тоже последний у родителя. Из-за этого на 375 оставалась асимметрия 8/6. */
@media(max-width:1199px){
  .pxlh-meta--soon,
  .pxlf-card .pxlh-row .pxlh-meta--soon,
  .pxlh-mbig .pxlh-row .pxlh-meta--soon,
  .pxlh-mrow .pxlh-row .pxlh-meta--soon{padding:0 10px;height:25px;margin:0;font-size:12px;line-height:1}
  /* кегль 12, как у соседней пилюли (правило R6 поднимает ей текст на мобиле):
     при 11px чип выходил на 2px ниже и вставал не в одну линию */
}



/* ─── ТАБЛИЦА В РЕЖИМЕ «КАРТОЧКИ» на телефоне ─────────────────────────────────
   Матрица блоков: Flexible data table, Behavior=Stack. Строка превращается
   в самостоятельную запись, подпись поля берётся из data-label.
   Этим закрывается давний дефект «таблица шире экрана на 375» (ворота ловили его
   на статье «Юнит-экономика» каждый прогон). */
@media(max-width:520px){
  .pxlv-table--stack table,.pxlv-table--stack tbody,.pxlv-table--stack tr,.pxlv-table--stack td{display:block;width:auto}
  /* шапку прячем display:none, а не clip: при clip ячейки сохраняли исходную ширину
     и вылезали за экран (замер: th до 530px при вьюпорте 375). Подписи полей
     не теряются — они продублированы в data-label каждой ячейки. */
  .pxlv-table--stack thead{display:none}
  .pxlv-table--stack tr{padding:14px 16px;border-bottom:1px solid var(--pxl-border,#e6e6e6)}
  .pxlv-table--stack tr:last-child{border-bottom:0}
  .pxlv-table--stack td{padding:0;border:0}
  .pxlv-table--stack td + td{margin-top:10px}
  .pxlv-table--stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
    font-size:12px;line-height:16px;color:#767676}
  /* Ширина колонки из табличного режима (38-42%) в карточном не нужна: заголовок
     записи занимает всю строку. Без сброса «Перехватить готовый спрос» ломался
     на две строки при пустой правой половине (замер 07.08.2026). */
  .pxlv-table--stack .pxlv-tbl-key{width:auto;font-weight:600}
  /* Первая ячейка в карточном режиме — заголовок записи, подпись колонки над ней
     не нужна: на числовой таблице получалось «Показатель / Расход» в каждой из
     шести карточек (замер 2026-08-07). */
  .pxlv-table--stack .pxlv-tbl-key[data-label]::before{display:none}
}

/* КОМПОНЕНТЫ ТЕЛА СТАТЬИ по матрице Figma 391:6773 (десктоп).
   Разбор: Project XL/article_body_matrix_spec.md. Колонка 848px на 1440.
   Класс .pxlv-callout ЗАНЯТ жёлтой плашкой прежней вёрстки — семантическая врезка
   матрицы называется .pxlv-scallout. */
.pxlv-block .pxlv-sub h3{margin:0 0 .833333vw;font-size:1.388889vw;line-height:1.4;font-weight:600;color:#1f1f1f}

/* Рамка по типу: Important — ЛАЙМОВАЯ 2px, Example и Note — серая 1px (макет 397:6963) */
.pxlv-scallout{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-scallout--important{border:2px solid #d8f953}
.pxlv-scallout-head{display:flex;align-items:center;gap:.833333vw;margin-bottom:1.111111vw}
/* Иконка врезки — SVG из набора DS в лаймовом круге 36×36, знак внутри БЕЛЫЙ 20×20.
   Символы «!», «E», «i» через ::after убраны (заказчик 07.08.2026). */
.pxlv-scallout-ic{display:grid;place-items:center;width:2.5vw;height:2.5vw;flex:0 0 auto;
  border-radius:999px;background:#d8f953}
.pxlv-scallout-svg{width:1.388889vw;height:1.388889vw;color:#262626;stroke:currentColor}
.pxlv-block .pxlv-scallout-head strong{font-size:1.388889vw;line-height:1.4;font-weight:600;color:#1f1f1f}
.pxlv-block .pxlv-scallout p.pxlv-x,.pxlv-block .pxlv-scallout > p{margin:0;font-size:.972222vw;line-height:1.42;color:#1f1f1f}

/* Checklist — макет 397:7042. Карточка БЕЛАЯ (была #f7f7f7 — догадка), счётчик в
   чипе на подложке #f7f7f7, маркер 24×24 лайм, галочка ВНУТРИ БЕЛАЯ 16×16,
   зазор между пунктами 8, между маркером и текстом 12. */
.pxlv-check{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-check-head{display:flex;align-items:center;justify-content:space-between;gap:.833333vw;margin-bottom:1.111111vw}
.pxlv-check-head strong{font-size:1.388889vw;line-height:1.33;font-weight:600;color:#1f1f1f}
.pxlv-check-chip{flex:0 0 auto;padding:.277778vw .555556vw;border-radius:999px;background:#f7f7f7;
  font-size:.833333vw;line-height:1.33;font-weight:500;color:#767676;white-space:nowrap}
.pxlv-check-list{display:flex;flex-direction:column;gap:.555556vw;margin:0;padding:0;list-style:none}
/* align MIN/CENTER в макете: маркер и текст выровнены ПО ЦЕНТРУ, не по верху */
.pxlv-check-list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:.833333vw;font-size:.972222vw;line-height:1.42;color:#1f1f1f}
/* Круг с галочкой ОДИН на весь сайт: размеры и толщина знака совпадают с маркером
   «Если коротко» (`.pxlv-summary li::before`) — эталон по решению оператора 10.08.2026.
   Было 24px круг + 10px галочка, у эталона 20px + 12px: знак выглядел мельче и толще. */
.pxlv-check-mark{display:grid;place-items:center;width:1.388889vw;height:1.388889vw;flex:0 0 auto;
  border-radius:999px;background:#d8f953}
/* Галочка ЧЁРНАЯ #262626 (в макете это stroke у VECTOR; белый — заливка контейнера,
   которую я сперва принял за цвет знака, журнал §82) */
/* 9.5px, а не 12: у эталона «Если коротко» знак на экране 7.6×5.5px, а наша иконка рисует
   галочку крупнее внутри своего viewBox. 12px давали 9.6×6.6 — знак выглядел больше. */
.pxlv-check-svg{width:.659722vw;height:.659722vw;color:#262626;stroke:currentColor}

/* Довод типографики тела статьи до матрицы (Figma 391:6773).
   Секция в конце файла намеренно: базовые правила объявлены выше и при равной
   специфичности перебивали бы эти (тот же класс ошибок, что §71). */
.pxlv-block .pxlv-summary h2{line-height:1.33}                 /* «Если коротко» → 24/600/32 */
.pxlv-block .pxlv-ncard h3{font-size:1.111111vw;font-weight:600;line-height:1.25}  /* заголовок шага 16/600/20 — вес поднят по решению заказчика 14.08.2026; правило перебивало .pxlv-ncard-head h3 (два класса + ниже в файле) */
.pxlv-block .pxlv-table td{font-size:.972222vw;line-height:1.42}
.pxlv-block .pxlv-ncard p{line-height:1.42}                                     /* текст шага → 14/400/20 */                   /* ячейка → 14/400/20 */

/* Formula / calculation — компонент 21 матрицы, снят с макета 400:7219 (07.08.2026).
   ⚠ Раньше блок был светло-серой карточкой с чёрным текстом — это была ДОГАДКА:
   в конспекте матрицы у меня стояли только кегли, без фона и состава. По макету:
   белая карточка pad 20 → внутри ТЁМНАЯ #262626 r16 pad 24 → лаймовый чип-метка,
   формула 24/600/32 белым, пояснение 14/400/20 белым. Строка «Допущение» —
   СНАРУЖИ тёмной карточки, 14/400/20 #767676. Моноширинных цифр в макете нет. */
/* Белая подложка убрана (заказчик 07.08.2026): блок = сама тёмная карточка,
   её отступы и радиус сохранены. В макете подложка есть, это осознанное отступление. */
.pxlv-formula{display:flex;flex-direction:column;gap:.833333vw}
.pxlv-formula-calc{display:flex;flex-direction:column;gap:.833333vw;align-items:flex-start;
  padding:1.666667vw;border-radius:1.111111vw;background:#262626}
.pxlv-formula-chip{display:inline-block;padding:.277778vw .555556vw;border-radius:999px;
  background:#d8f953;font-size:.972222vw;line-height:1.28;font-weight:500;color:#1f1f1f}
.pxlv-block .pxlv-formula p.pxlv-formula-line{margin:0;font-size:1.666667vw;line-height:1.33;font-weight:600;color:#fff}
.pxlv-block .pxlv-formula p.pxlv-formula-line + .pxlv-formula-line{margin-top:.277778vw;
  font-size:1.111111vw;line-height:1.25;font-weight:500;color:rgba(255,255,255,.78)}
/* В дампе у пояснения fill #ffffff, но у ноды opacity 0.78 — на рендере это
   приглушённый белый. Прежний дамп прозрачность не печатал (07.08.2026). */
.pxlv-block .pxlv-formula p.pxlv-formula-note{margin:0;font-size:.972222vw;line-height:1.42;color:rgba(255,255,255,.78)}
.pxlv-block .pxlv-formula p.pxlv-formula-given{margin:0;font-size:.972222vw;line-height:1.42;color:#767676}

/* Контекстная ссылка «Подробнее в материале …» — по наброску заказчика рядом с матрицей
   (07.08.2026). Готового компонента в матрице нет: «Inline related article» — карточка
   848×180, а карта контента v6 §04 требует «одна фраза, конкретный анкор, без карточки
   на полэкрана». Отсюда узкая плашка: лаймовая полоса слева + светлая лаймовая подложка,
   анкор жирный подчёркнутый. Лайм здесь — крупная заливка, правило контраста не нарушено. */
.pxlv-block p.pxlv-lb{margin:0;padding:.833333vw 1.111111vw;border-left:.277778vw solid #d8f953;
  border-radius:0 .555556vw .555556vw 0;background:#f2fbd2;
  font-size:.972222vw;line-height:1.42;color:#1f1f1f}
.pxlv-lb-link{font-weight:600;color:#1f1f1f;text-decoration:underline;text-underline-offset:.138889vw}
/* Ссылка прямо в тексте абзаца — когда плашка избыточна (заказчик 07.08.2026) */
.pxlv-block .pxlv-section p a.pxlv-link{color:#1f1f1f;font-weight:500;text-decoration:underline;
  text-underline-offset:.138889vw;text-decoration-thickness:1px}
.pxlv-block .pxlv-section p a.pxlv-link:hover{text-decoration-color:#d8f953;text-decoration-thickness:2px}
.pxlv-lb-link:hover{color:#000}

/* Числовая таблица — edge case матрицы: значения вправо, цифры моноширинные.
   Первая колонка остаётся заголовком строки и выравнивания не меняет. */
.pxlv-table--numeric th:not(:first-child),
.pxlv-table--numeric td:not(.pxlv-tbl-key){text-align:right;font-variant-numeric:tabular-nums}

/* Шаг с результатом и критерием готовности (требование карты контента v6:
   «каждый шаг — действие, результат и критерий готовности»). */
/* Критерий готовности: одна приглушённая метка перед текстом, без отдельной колонки.
   Прежний вариант в две колонки съедал 40% ширины на мобиле (замер 07.08.2026). */
.pxlv-block .pxlv-ncard p + p{margin-top:.555556vw}
.pxlv-block p.pxlv-ncard-crit{margin-top:.555556vw;font-size:.972222vw;line-height:1.42;color:#767676}
/* Метка «Готово, если» оформлена ЧИПОМ — как счётчик «3 пункта» в чек-листе
   (решение оператора 10.08.2026). Значения один в один с `.pxlv-check-chip`. */
.pxlv-block p.pxlv-ncard-crit span{display:inline-block;margin-right:.416667vw;
  padding:.277778vw .555556vw;border-radius:999px;background:#f7f7f7;
  font-size:.833333vw;line-height:1.33;font-weight:500;color:#767676;white-space:nowrap}

/* КОМПОНЕНТЫ МАТРИЦЫ, ДОБАВЛЕННЫЕ 07.08.2026.
   Значения сняты дампами нод (scraper/_dumps/components.txt), не по конспекту.
   Селекторы с префиксом .pxlv-block и тегом там, где конкурируют с базовым
   правилом абзаца (журнал §75). */

/* Final takeaways 403:7312 — рамка ЛАЙМОВАЯ 2px */
.pxlv-take{padding:1.388889vw;border:2px solid #d8f953;border-radius:1.111111vw;background:#fff}
.pxlv-take > strong{display:block;margin-bottom:1.111111vw;font-size:1.666667vw;line-height:1.33;font-weight:600;color:#1f1f1f}

/* Pros / limitations 399:7089 — две колонки #f6f6f6 r12, плитка-иконка 28 */
.pxlv-pros{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-pros-title{display:block;margin-bottom:1.111111vw;font-size:1.666667vw;line-height:1.33;font-weight:600;color:#1f1f1f}
.pxlv-pros-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.833333vw}
.pxlv-pros-col{padding:1.111111vw;border-radius:.833333vw;background:#f6f6f6}
/* Вторая колонка тёмная — нода 399:7089: fill #262626, текст и точки белые.
   Правила для пунктов идут НИЖЕ базовых `.pxlv-block .pxlv-pros-col li`: специфичность
   одинаковая, поэтому выигрывает последнее объявление (§100). */
.pxlv-pros-col--dark{background:#262626}
.pxlv-pros-col--dark .pxlv-pros-head strong{color:#fff}
.pxlv-pros-head{display:flex;align-items:center;gap:.555556vw;margin-bottom:.833333vw}
.pxlv-pros-ic{display:grid;place-items:center;width:1.944444vw;height:1.944444vw;flex:0 0 auto;border-radius:999px;background:#d8f953}
.pxlv-pros-svg{color:#262626;stroke:currentColor}
.pxlv-pros-svg--plus{width:.892361vw;height:.892361vw}   /* 12.86px → знак 10px */
.pxlv-pros-svg--close{width:.740972vw;height:.740972vw}  /* 10.67px → знак 8px */
.pxlv-pros-head strong{font-size:1.111111vw;line-height:1.25;font-weight:500;color:#1f1f1f}
.pxlv-block .pxlv-pros-col ul{display:flex;flex-direction:column;gap:.833333vw;margin:0;padding:0;list-style:none}
.pxlv-block .pxlv-pros-col li{position:relative;padding-left:1.527778vw;font-size:.972222vw;line-height:1.42;color:#1f1f1f}
.pxlv-block .pxlv-pros-col li::before{content:"";position:absolute;left:.277778vw;top:.555556vw;width:.555556vw;height:.555556vw;border-radius:999px;background:#1f1f1f}
/* Текст пунктов в тёмной колонке — белый с прозрачностью 0.90 (в ноде у TEXT стоит opacity),
   а точки и заголовок колонки — чистый белый. Читать цвет вместе с прозрачностью (§98). */
.pxlv-block .pxlv-pros-col--dark li{color:rgba(255,255,255,.9)}
.pxlv-block .pxlv-pros-col--dark li::before{background:#fff}

/* KPI / key fact 399:6950 — метрика 32/700/40 на плитке #f7f7f7 */
.pxlv-kpi{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-kpi-head{display:flex;align-items:center;gap:.833333vw;margin-bottom:1.111111vw}
.pxlv-kpi-ic{display:grid;place-items:center;width:2.5vw;height:2.5vw;flex:0 0 auto;border-radius:999px;background:#d8f953}
.pxlv-kpi-svg{width:1.388889vw;height:1.388889vw;color:#262626;stroke:currentColor}
.pxlv-kpi-head strong{font-size:1.388889vw;line-height:1.4;font-weight:600;color:#1f1f1f}
.pxlv-kpi-grid{display:grid;gap:.555556vw}
.pxlv-kpi-grid--multi{grid-template-columns:repeat(3,minmax(0,1fr))}
.pxlv-kpi-m{display:flex;flex-direction:column;gap:.416667vw;padding:1.111111vw;border-radius:.833333vw;background:#f7f7f7}
.pxlv-kpi-v{font-size:2.222222vw;line-height:1.25;font-weight:700;color:#1f1f1f}
.pxlv-kpi-l{font-size:.972222vw;line-height:1.42;color:#1f1f1f}

/* Timeline 400:7016 — этапы в ряд на оси #e6e6e6 */
.pxlv-tl{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-tl-head{display:flex;align-items:center;gap:.555556vw;margin-bottom:1.388889vw}
.pxlv-tl-rule{width:2.222222vw;height:.208333vw;flex:0 0 auto;border-radius:2px;background:#1f1f1f}
.pxlv-tl-head strong{font-size:1.666667vw;line-height:1.33;font-weight:600;color:#1f1f1f}
.pxlv-tl-list{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
/* Ось идёт от ЦЕНТРА первого номера до ЦЕНТРА последнего (макет 400:6949: 606px
   при ширине 808). Номера стоят в НАЧАЛЕ своих колонок, а не по центру, поэтому
   слева отступ = половина кружка, справа = ширина колонки минус половина кружка. */
.pxlv-tl-list{--pxlv-tl-col:calc(100% / var(--pxlv-tl-n,4));--pxlv-tl-r:.972222vw}
.pxlv-tl-list::before{content:"";position:absolute;left:var(--pxlv-tl-r);
  right:calc(var(--pxlv-tl-col) - var(--pxlv-tl-r));top:.902778vw;height:2px;background:#e6e6e6}
.pxlv-tl-step{position:relative;display:flex;flex-direction:column;gap:.833333vw;padding-right:.833333vw}
.pxlv-tl-num{position:relative;display:grid;place-items:center;width:1.944444vw;height:1.944444vw;border-radius:999px;background:#d8f953;font-size:.972222vw;font-weight:500;color:#1f1f1f}
.pxlv-tl-body{display:flex;flex-direction:column;gap:.555556vw}
.pxlv-tl-body strong{font-size:1.111111vw;line-height:1.25;font-weight:500;color:#1f1f1f}
.pxlv-tl-body span{font-size:.972222vw;line-height:1.42;color:#1f1f1f}

/* Before / after 400:7143 — две колонки и лаймовый маркер перехода */
.pxlv-ba{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-ba-title{display:block;margin-bottom:1.111111vw;font-size:1.666667vw;line-height:1.33;font-weight:600;color:#1f1f1f}
/* stretch, а не center: карточки обязаны быть равной высоты при разной длине текста
   (в ноде обе 378×100). Маркер перехода центрируем отдельно. */
.pxlv-ba-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:.555556vw}
.pxlv-ba-col{padding:1.111111vw;border-radius:.833333vw;background:#f6f6f6}
/* «После» тёмная — нода 400:7143: fill #262626, текст белый, черта лаймовая */
.pxlv-ba-col--dark{background:#262626}
.pxlv-ba-col--dark .pxlv-ba-head strong,.pxlv-ba-col--dark .pxlv-ba-val{color:#fff}
.pxlv-ba-col--dark .pxlv-ba-rule{background:#d8f953}
.pxlv-ba-head{display:flex;align-items:center;gap:.555556vw;margin-bottom:.555556vw}
.pxlv-ba-rule{width:1.388889vw;height:.138889vw;flex:0 0 auto;border-radius:1px;background:#1f1f1f}
.pxlv-ba-head strong{font-size:1.111111vw;line-height:1.25;font-weight:500;color:#1f1f1f}
.pxlv-ba-val{display:block;font-size:.972222vw;line-height:1.42;color:#1f1f1f}
/* Колонка списком: кегль и цвет как у одиночной строки, маркер — лаймовая точка */
.pxlv-block .pxlv-ba-list{margin:0;padding:0;list-style:none;display:grid;gap:.416667vw}
.pxlv-block .pxlv-ba-list li{position:relative;padding-left:.972222vw;font-size:.972222vw;line-height:1.42;color:#1f1f1f}
.pxlv-block .pxlv-ba-list li::before{content:"";position:absolute;left:0;top:.555556vw;width:.277778vw;height:.277778vw;border-radius:999px;background:#1f1f1f}
.pxlv-ba-col--dark .pxlv-ba-list li{color:rgba(255,255,255,.9)}
.pxlv-ba-col--dark .pxlv-ba-list li::before{background:#d8f953}
.pxlv-ba--metrics .pxlv-ba-val{font-size:2.222222vw;line-height:1.25;font-weight:700}
.pxlv-ba-arrow{display:grid;place-items:center;align-self:center;width:2.5vw;height:2.5vw;border-radius:999px;background:#d8f953}
.pxlv-ba-arrow-svg{width:1.388889vw;height:1.388889vw;color:#262626;stroke:currentColor}

/* Pull quote 397:6869 — тёмная карточка, метка с лаймовой полоской */
.pxlv-q{margin:0;padding:1.666667vw;border-radius:1.111111vw;background:#262626}
.pxlv-q-head{display:flex;align-items:center;gap:.555556vw;margin-bottom:1.111111vw}
.pxlv-q-rule{width:2.222222vw;height:.208333vw;flex:0 0 auto;border-radius:2px;background:#d8f953}
.pxlv-q-label{font-size:.833333vw;line-height:1.33;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pxlv-block .pxlv-q blockquote{margin:0;font-size:1.666667vw;line-height:1.33;font-weight:600;color:#fff}
.pxlv-q-attr{margin-top:1.111111vw;display:flex;flex-direction:column;gap:.138889vw}
.pxlv-q-attr strong{font-size:.972222vw;line-height:1.29;font-weight:500;color:#fff}
.pxlv-q-attr span{font-size:.972222vw;line-height:1.42;color:#a3a3a3}

/* Sources / footnotes 402:7061 — Style=Inline */
.pxlv-src{display:flex;flex-direction:column;gap:.833333vw;margin:0;padding:0;list-style:none}
.pxlv-src li{display:flex;align-items:center;gap:.833333vw;padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-src-ic{display:grid;place-items:center;width:2.5vw;height:2.5vw;flex:0 0 auto;border-radius:999px;background:#d8f953}
.pxlv-src-svg{width:1.388889vw;height:1.388889vw;color:#1f1f1f;stroke:currentColor}
.pxlv-src-body{display:flex;flex-direction:column;gap:.277778vw;min-width:0}
.pxlv-src-body strong{font-size:.833333vw;line-height:1.33;font-weight:500;color:#1f1f1f}
.pxlv-src-body span{font-size:.833333vw;line-height:1.33;color:#767676}

/* Numbered feature cards 394:6858 — текст под шапкой с отступом 20 */
.pxlv-fcards{display:flex;flex-direction:column;gap:.833333vw;margin:0;padding:0;list-style:none}
.pxlv-fcard{padding:1.388889vw;border:1px solid #e6e6e6;border-radius:1.111111vw;background:#fff}
.pxlv-fcard-head{display:flex;align-items:center;gap:.555556vw}
.pxlv-fcard-num{display:grid;place-items:center;width:1.944444vw;height:1.944444vw;flex:0 0 auto;border-radius:999px;background:#d8f953;font-size:.972222vw;font-weight:500;color:#1f1f1f}
.pxlv-block .pxlv-fcard-head h3{margin:0;font-size:1.111111vw;line-height:1.25;font-weight:500;color:#1f1f1f}
.pxlv-block .pxlv-fcard p{margin:1.388889vw 0 0;font-size:.972222vw;line-height:1.42;color:#1f1f1f}

/* Image + caption 396:6973 — слот 16:9, заглушка с лаймовой плиткой */
.pxlv-fig{margin:0}
.pxlv-fig-slot{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border-radius:1.111111vw;background:#262626}
.pxlv-fig-slot img{width:100%;height:100%;object-fit:cover}
.pxlv-media-ph{display:grid;place-items:center;width:3.333333vw;height:3.333333vw;border-radius:999px;background:#d8f953}
.pxlv-media-svg{width:1.666667vw;height:1.666667vw;color:#262626;stroke:currentColor}
.pxlv-block .pxlv-fig figcaption{margin-top:.555556vw;font-size:.833333vw;line-height:1.33;color:#767676}
.pxlv-block .pxlv-fig figcaption span{display:block}

/* ─── КОМПОНЕНТЫ ТЕЛА СТАТЬИ: планшет и телефон ────────────────────────────────
   ⚠ Секция стоит ПОСЛЕ десктопной намеренно: иначе десктопные vw-правила
   перебивают её на телефоне (журнал §74). Значения сняты с Mobile-вариантов
   макета, а не подобраны на глаз. */
@media(max-width:1199px){
  .pxlv-block .pxlv-sub h3{margin:0 0 10px;font-size:18px;line-height:24px;font-weight:600}

  /* Semantic callout, Mobile: заголовок 18/600/24, текст 16/400/24, плитка 36 */
  .pxlv-scallout{padding:20px;border-radius:16px}
  .pxlv-scallout-head{gap:12px;margin-bottom:16px}
  .pxlv-scallout-ic{width:36px;height:36px}
  .pxlv-scallout-svg{width:20px;height:20px}
  .pxlv-block .pxlv-scallout-head strong{font-size:18px;line-height:24px}
  .pxlv-block .pxlv-scallout p.pxlv-x,.pxlv-block .pxlv-scallout > p{font-size:16px;line-height:24px}

  /* Checklist, Mobile: заголовок 20/600/28, пункт 16/400/24, зазор пунктов 12 */
  .pxlv-check{padding:20px;border-radius:16px}
  .pxlv-check-head{margin-bottom:16px;gap:12px}
  .pxlv-check-head strong{font-size:18px;line-height:24px}
  .pxlv-check-chip{padding:4px 8px;font-size:12px;line-height:16px}
  .pxlv-check-list{gap:12px}
  .pxlv-check-list li{gap:12px;font-size:16px;line-height:24px}
  /* мобильные значения тоже от эталона «Если коротко»: круг 22, знак 12 */
  .pxlv-check-mark{width:22px;height:22px}
  .pxlv-check-svg{width:9.5px;height:9.5px}

  /* Formula, Mobile: тёмная карточка pad 20, формула 18/600/24, пояснение 14/400/20 */
  .pxlv-formula{gap:12px}
  .pxlv-formula-calc{gap:12px;padding:20px;border-radius:16px}
  .pxlv-formula-chip{padding:4px 8px;font-size:14px;line-height:18px}
  .pxlv-block .pxlv-formula p.pxlv-formula-line{font-size:18px;line-height:24px}
  .pxlv-block .pxlv-formula p.pxlv-formula-line + .pxlv-formula-line{margin-top:4px;
    font-size:16px;line-height:20px}
  .pxlv-block .pxlv-formula p.pxlv-formula-note{font-size:14px;line-height:20px}
  .pxlv-block .pxlv-formula p.pxlv-formula-given{font-size:14px;line-height:20px}

  .pxlv-block p.pxlv-lb{padding:12px 16px;border-left-width:4px;border-radius:0 8px 8px 0;
    font-size:16px;line-height:24px}
  .pxlv-lb-link{text-underline-offset:2px}
  .pxlv-block .pxlv-ncard p + p{margin-top:8px}
  .pxlv-block p.pxlv-ncard-crit{margin-top:8px;font-size:16px;line-height:24px}
  .pxlv-block p.pxlv-ncard-crit span{margin-right:6px;padding:4px 8px;font-size:12px;line-height:16px}

  /* довод типографики тела до матрицы: текст 16/400/24, заголовки 20/600/28 */
  .pxlv-block .pxlv-table td{font-size:14px;line-height:20px}
  .pxlv-block .pxlv-ncard h3{font-size:16px;line-height:20px;font-weight:600}
  .pxlv-block .pxlv-ncard p{font-size:16px;line-height:24px}
  .pxlv-block .pxlv-summary h2{line-height:1.33}
  .pxlv-block .pxlv-section h2,.pxlv-block .pxlv-faq h2{font-size:20px;line-height:28px}
  .pxlv-block .pxlv-section p,.pxlv-block .pxlv-section li,.pxlv-block .pxlv-summary p,.pxlv-block .pxlv-summary li{font-size:16px;line-height:24px}
  .pxlv-block .pxlv-faq-answer p{font-size:16px;line-height:24px}
  /* компоненты от 07.08.2026: планшет и телефон */
  .pxlv-take{padding:20px;border-radius:16px}
  .pxlv-take > strong{margin-bottom:16px;font-size:20px;line-height:28px}
  .pxlv-pros{padding:20px;border-radius:16px}
  .pxlv-pros-title{margin-bottom:16px;font-size:20px;line-height:28px}
  .pxlv-pros-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .pxlv-pros-col{padding:16px;border-radius:12px}
  .pxlv-pros-head{gap:8px;margin-bottom:12px}
  .pxlv-pros-ic{width:28px;height:28px}
  .pxlv-pros-svg--plus{width:12.86px;height:12.86px}
  .pxlv-pros-svg--close{width:10.67px;height:10.67px}
  .pxlv-pros-head strong{font-size:16px;line-height:20px}
  .pxlv-block .pxlv-pros-col ul{gap:12px}
  .pxlv-block .pxlv-pros-col li{padding-left:22px;font-size:16px;line-height:24px}
  .pxlv-block .pxlv-pros-col li::before{left:4px;top:8px;width:8px;height:8px}
  .pxlv-kpi{padding:20px;border-radius:16px}
  .pxlv-kpi-head{gap:12px;margin-bottom:16px}
  .pxlv-kpi-ic{width:36px;height:36px}
  .pxlv-kpi-svg{width:20px;height:20px}
  .pxlv-kpi-head strong{font-size:18px;line-height:24px}
  .pxlv-kpi-grid,.pxlv-kpi-grid--multi{grid-template-columns:minmax(0,1fr);gap:8px}
  .pxlv-kpi-m{padding:16px;border-radius:12px;gap:6px}
  .pxlv-kpi-v{font-size:28px;line-height:36px}
  .pxlv-kpi-l{font-size:14px;line-height:20px}
  .pxlv-tl{padding:20px;border-radius:16px}
  .pxlv-tl-head{gap:8px;margin-bottom:20px}
  .pxlv-tl-rule{width:32px;height:3px}
  .pxlv-tl-head strong{font-size:20px;line-height:28px}
  /* этапы колонкой: ось вертикальная слева */
  .pxlv-tl-list{grid-auto-flow:row;gap:20px}
  /* Ось рисуется ОТРЕЗКАМИ между шагами, а не одной линией на весь список:
     у последнего шага под номером стоит текст, и сплошная линия с `bottom:14px`
     доезжала до низа контейнера и торчала хвостом ниже последнего номера.
     Отрезок идёт от центра номера текущего шага до центра номера следующего:
     высота = высота шага + gap (20px), старт — 14px (половина номера 28). */
  .pxlv-tl-list::before{display:none}
  .pxlv-tl-step:not(:last-child)::before{content:"";position:absolute;left:13px;top:14px;
    width:2px;height:calc(100% + 20px);background:#e6e6e6}
  .pxlv-tl-step{flex-direction:row;gap:12px;padding-right:0}
  .pxlv-tl-num{width:28px;height:28px;font-size:14px;flex:0 0 auto;z-index:1}
  .pxlv-tl-body{gap:8px}
  .pxlv-tl-body strong{font-size:16px;line-height:20px}
  .pxlv-tl-body span{font-size:16px;line-height:24px}
  .pxlv-ba{padding:20px;border-radius:16px}
  .pxlv-ba-title{margin-bottom:16px;font-size:20px;line-height:28px}
  .pxlv-ba-grid{grid-template-columns:minmax(0,1fr);gap:12px;justify-items:stretch}
  .pxlv-ba-col{padding:16px;border-radius:12px}
  .pxlv-ba-head{gap:8px;margin-bottom:8px}
  .pxlv-ba-rule{width:20px;height:2px}
  .pxlv-ba-head strong{font-size:16px;line-height:20px}
  .pxlv-ba-val{font-size:16px;line-height:24px}
  /* все отступы мобильного блока — в px: vw здесь схлопывается (журнал §54) */
  .pxlv-block .pxlv-ba-list{gap:8px}
  .pxlv-block .pxlv-ba-list li{padding-left:16px;font-size:16px;line-height:24px}
  .pxlv-block .pxlv-ba-list li::before{top:9px;width:5px;height:5px}
  .pxlv-ba--metrics .pxlv-ba-val{font-size:28px;line-height:36px}
  .pxlv-ba-arrow{width:36px;height:36px;justify-self:center;transform:rotate(90deg)}
  .pxlv-ba-arrow-svg{width:20px;height:20px}
  .pxlv-q{padding:20px;border-radius:16px}
  .pxlv-q-head{gap:8px;margin-bottom:16px}
  .pxlv-q-rule{width:32px;height:3px}
  .pxlv-q-label{font-size:12px;line-height:16px}
  .pxlv-block .pxlv-q blockquote{font-size:18px;line-height:24px}
  .pxlv-q-attr{margin-top:16px}
  .pxlv-q-attr strong,.pxlv-q-attr span{font-size:14px;line-height:20px}
  .pxlv-src{gap:12px}
  .pxlv-src li{padding:20px;border-radius:16px;gap:12px}
  .pxlv-src-ic{width:36px;height:36px}
  .pxlv-src-svg{width:20px;height:20px}
  .pxlv-src-body strong,.pxlv-src-body span{font-size:12px;line-height:16px}
  .pxlv-fcards{gap:12px}
  .pxlv-fcard{padding:20px;border-radius:16px}
  .pxlv-fcard-head{gap:8px}
  .pxlv-fcard-num{width:28px;height:28px;font-size:14px}
  .pxlv-block .pxlv-fcard-head h3{font-size:16px;line-height:20px}
  .pxlv-block .pxlv-fcard p{margin-top:20px;font-size:16px;line-height:24px}
  .pxlv-fig-slot{border-radius:16px}
  .pxlv-media-ph{width:48px;height:48px}
  .pxlv-media-svg{width:24px;height:24px}
  .pxlv-block .pxlv-fig figcaption{margin-top:8px;font-size:12px;line-height:16px}

}

/* В карточном режиме числовая таблица выравнивание не меняет: значение идёт
   под своей подписью, прижимать его вправо не к чему. */
@media(max-width:520px){
  .pxlv-table--stack.pxlv-table--numeric td{text-align:left}
}


/* ============================================================================
   XL.RU COMPAT (перенос блога на xl.ru, 2026-10-08).
   У основного сайта в «Интеграции и код» лежит глобальный CSS, который с !important
   меняет платформенные контейнеры (.ez-section-container: max-width 1240/1040,
   боковые поля 40/20px на мобильных) и ставит overflow-x:hidden на html+body
   (из-за этого body становится скролл-контейнером и ломается position:sticky —
   липкое «Содержание» в статьях). Вёрстка блога рассчитана на платформенные
   значения, поэтому на страницах блога возвращаем их. Специфичность выше, чем у
   сайтового кода, порядок подключения роли не играет.
   ============================================================================ */
html body.ez-wrapper{overflow-x:visible!important}
html body.ez-wrapper .ez-section-container{max-width:1200px!important;padding-left:0!important;padding-right:0!important}
@media screen and (max-width:1200px){html body.ez-wrapper .ez-section-container{max-width:960px!important}}
@media screen and (max-width:992px){html body.ez-wrapper .ez-section-container{max-width:100%!important}}
html body.ez-wrapper .ez-section-container.full{max-width:100%!important}