/* ================================================================
   napolshu Landings — общий стиль всех посадочных страниц услуг.
   Подключается плагином только на страницах, где есть класс
   npl-landing--<id>. Один файл на все языки: селекторы одинаковые.
   ================================================================ */

:root{
  --npl-navy:#12325a;  --npl-navy2:#0c2340; --npl-blue:#2e75b6;
  --npl-amber:#f5a623; --npl-amber-d:#d98c0c;
  --npl-ink:#101828;   --npl-muted:#667085; --npl-line:#d6dde8;
  --npl-ok:#12805c;    --npl-err:#c0392b;
  --npl-font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --npl-shadow:0 18px 44px rgba(8,25,52,.22);
}
#npl-hero *,#npl-hero *::before,#npl-hero *::after,
#npl-sticky *,#npl-quiz *,#npl-quiz *::before,#npl-quiz *::after,
#npl-art *,#npl-art *::before,#npl-art *::after{box-sizing:border-box}

/* ---------- СЕКЦИЯ ---------- */
#npl-hero{
  position:relative;display:block;width:100%;
  font-family:var(--npl-font);line-height:1.5;color:#fff;
  background:
    radial-gradient(1100px 520px at 12% -10%,rgba(46,117,182,.55),transparent 60%),
    linear-gradient(160deg,var(--npl-navy) 0%,var(--npl-navy2) 100%);
  padding:40px 20px 48px;overflow:hidden;
}
#npl-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(closest-side at 78% 30%,#000,transparent);
  mask-image:radial-gradient(closest-side at 78% 30%,#000,transparent);
}
#npl-hero .npl-grid{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:28px;
}

/* ---------- ЛЕВАЯ КОЛОНКА ---------- */
#npl-hero .npl-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:0;
  font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#a8c9ea;
}
#npl-hero .npl-eyebrow::before{content:"";width:26px;height:2px;background:var(--npl-amber);border-radius:2px}
/* !important нужен: многие темы задают цвет заголовков через .entry-content h1{...!important} */
#npl-hero .npl-h1,#npl-hero h1.npl-h1{
  margin:0 0 14px;padding:0;font-family:var(--npl-font);
  color:#fff!important;
  font-size:clamp(26px,4.4vw,42px);line-height:1.16;font-weight:700;letter-spacing:-.01em;
}
#npl-hero .npl-h1 *{color:inherit}
#npl-hero .npl-h1 .npl-accent{color:var(--npl-amber)!important}
#npl-hero .npl-lede{margin:0 0 22px;padding:0;max-width:56ch;font-size:clamp(15px,1.7vw,18px);color:#d2e0f0!important}
#npl-hero .npl-eyebrow{color:#a8c9ea!important}
#npl-hero .npl-usp li{color:#eaf2fb!important}
#npl-hero .npl-trust li{color:#cfe0f2!important}
#npl-hero .npl-usp{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
#npl-hero .npl-usp li{position:relative;margin:0;padding:0 0 0 30px;font-size:15px;color:#eaf2fb}
#npl-hero .npl-usp li::before{
  content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(245,166,35,.18);box-shadow:inset 0 0 0 1.5px var(--npl-amber);
}
#npl-hero .npl-usp li::after{
  content:"";position:absolute;left:6px;top:8px;width:7px;height:4px;
  border-left:2px solid var(--npl-amber);border-bottom:2px solid var(--npl-amber);transform:rotate(-45deg);
}
#npl-hero .npl-trust{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
#npl-hero .npl-trust li{
  margin:0;font-size:13px;font-weight:600;color:#cfe0f2;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:7px 14px;
}

/* ---------- КАРТОЧКА ---------- */
#npl-hero .npl-card{
  background:#fff;color:var(--npl-ink);border-radius:12px;
  box-shadow:var(--npl-shadow);padding:0;overflow:hidden;
}
#npl-hero .npl-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#eef2f7;border-bottom:1px solid var(--npl-line)}
#npl-hero .npl-tab{
  margin:0;border:0;background:transparent;cursor:pointer;font-family:var(--npl-font);
  padding:12px 6px 11px;font-size:12.5px;font-weight:600;line-height:1.25;
  color:#5b6b80;border-bottom:3px solid transparent;transition:color .15s,background .15s;
}
#npl-hero .npl-tab:hover{color:var(--npl-navy);background:transparent}
#npl-hero .npl-tab.is-on{background:#fff;color:var(--npl-navy);border-bottom-color:var(--npl-amber)}

#npl-hero .npl-pane{display:none;padding:20px 20px 0}
#npl-hero .npl-pane.is-on{display:block}
#npl-hero .npl-title{margin:0 0 5px;padding:0;font-size:21px;font-weight:700;line-height:1.25;color:var(--npl-ink);font-family:var(--npl-font)}
#npl-hero .npl-sub{margin:0 0 13px;padding:0;font-size:13px;color:var(--npl-muted);line-height:1.45}
#npl-hero .npl-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}
#npl-hero .npl-meta li{
  margin:0;font-size:12px;font-weight:600;color:#344054;background:#f2f5f9;
  border:1px solid #e2e8f0;border-radius:99px;padding:5px 11px;
}

#npl-hero .npl-price{border:1px solid #e7ecf3;border-radius:10px;background:#f8fafc;padding:16px 16px 14px;margin:0 0 12px}
#npl-hero .npl-price-label{display:block;font-size:12.5px;color:var(--npl-muted);margin-bottom:3px}
#npl-hero .npl-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#npl-hero .npl-price-val{font-size:42px;font-weight:700;line-height:1;color:var(--npl-navy);letter-spacing:-.02em}
#npl-hero .npl-price-vat{font-size:12.5px;color:var(--npl-muted)}
#npl-hero .npl-price-old{font-size:15px;color:#98a2b3;text-decoration:line-through}
#npl-hero .npl-notes{list-style:none;margin:12px 0 0;padding:11px 0 0;border-top:1px dashed #dbe3ec;display:grid;gap:5px}
#npl-hero .npl-notes li{position:relative;margin:0;padding:0 0 0 16px;font-size:11.5px;color:#7a8699;line-height:1.4}
#npl-hero .npl-notes li::before{content:"—";position:absolute;left:0;top:0;color:#b6c0cf}

#npl-hero .npl-incl{border:1px solid #e7ecf3;border-radius:10px;margin:0 0 16px;background:#fff}
#npl-hero .npl-incl>summary{
  list-style:none;cursor:pointer;padding:11px 14px;margin:0;
  font-size:13.5px;font-weight:600;color:var(--npl-navy);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
#npl-hero .npl-incl>summary::-webkit-details-marker{display:none}
#npl-hero .npl-incl>summary::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--npl-blue);border-bottom:2px solid var(--npl-blue);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s;
}
#npl-hero .npl-incl[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
#npl-hero .npl-incl ul{list-style:none;margin:0;padding:0 14px 13px;display:grid;gap:7px}
#npl-hero .npl-incl li{position:relative;margin:0;padding:0 0 0 23px;font-size:13px;color:#344054}
#npl-hero .npl-incl li::before{
  content:"";position:absolute;left:3px;top:5px;width:8px;height:4px;
  border-left:2px solid var(--npl-ok);border-bottom:2px solid var(--npl-ok);transform:rotate(-45deg);
}

/* ---------- КНОПКИ ---------- */
#npl-hero .npl-actions{padding:0 20px 20px}
#npl-hero .npl-btn,#npl-sticky .npl-btn,#npl-quiz .npl-btn,#npl-art .npl-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:54px;padding:0 18px;margin:0;
  font-family:var(--npl-font);font-size:16.5px;font-weight:700;text-decoration:none;
  border:0;border-radius:10px;cursor:pointer;transition:background .15s;
}
#npl-hero .npl-btn--primary,#npl-sticky .npl-btn--primary,#npl-quiz .npl-btn--primary,#npl-art .npl-btn--primary{
  background:var(--npl-amber);color:#3a2600;box-shadow:0 6px 16px rgba(245,166,35,.34);
}
#npl-hero .npl-btn--primary:hover,#npl-sticky .npl-btn--primary:hover,#npl-quiz .npl-btn--primary:hover,#npl-art .npl-btn--primary:hover{background:var(--npl-amber-d);color:#3a2600}
#npl-hero .npl-reassure,#npl-quiz .npl-reassure{margin:10px 0 0;font-size:12.5px;color:var(--npl-muted);text-align:center;line-height:1.45}
#npl-hero .npl-divider{
  display:flex;align-items:center;gap:10px;margin:16px 0 12px;
  font-size:12px;color:#98a2b3;text-transform:uppercase;letter-spacing:.05em;
}
#npl-hero .npl-divider::before,#npl-hero .npl-divider::after{content:"";height:1px;background:var(--npl-line);flex:1}
#npl-hero .npl-msgr,#npl-quiz .npl-msgr,#npl-art .npl-msgr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#npl-hero .npl-msgr a,#npl-quiz .npl-msgr a,#npl-art .npl-msgr a{
  display:flex;align-items:center;justify-content:center;gap:7px;height:48px;
  border-radius:10px;text-decoration:none;font-size:15px;font-weight:600;color:#fff;
}
#npl-hero .npl-msgr .npl-tg,#npl-quiz .npl-msgr .npl-tg,#npl-art .npl-msgr .npl-tg{background:#2aabee}
#npl-hero .npl-msgr .npl-wa,#npl-quiz .npl-msgr .npl-wa,#npl-art .npl-msgr .npl-wa{background:#25a366}
/* Размер иконок мессенджеров.
   Раньше правило было только для #npl-hero: в квизе и в CTA стояли текстовые
   ссылки без svg. Теперь иконки рисует общий движок во всех трёх местах,
   поэтому селектор обязан покрывать и квиз, и контентную часть. Без этого
   svg с viewBox и без размеров разворачивается до 300x150 и рвёт модалку. */
#npl-hero .npl-msgr svg,#npl-quiz .npl-msgr svg,#npl-art .npl-msgr svg{
  width:18px;height:18px;fill:currentColor;flex:0 0 auto;
}

/* ---------- ЛИПКАЯ ПАНЕЛЬ ---------- */
#npl-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:2147482000;display:none;gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  font-family:var(--npl-font);background:rgba(255,255,255,.97);
  border-top:1px solid var(--npl-line);box-shadow:0 -6px 22px rgba(16,24,40,.14);
  transform:translateY(110%);transition:transform .25s ease;
}
#npl-sticky.is-on{transform:translateY(0)}
#npl-sticky .npl-btn{min-height:48px;font-size:15px;flex:1 1 auto}
#npl-sticky .npl-tg-round{
  flex:0 0 48px;width:48px;height:48px;border-radius:10px;background:#2aabee;
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
}
#npl-sticky .npl-tg-round svg{width:21px;height:21px;fill:currentColor}
body.npl-sticky-on{padding-bottom:72px}

/* ---------- КВИЗ ---------- */
#npl-quiz{
  position:fixed;inset:0;z-index:2147483000;display:none;
  font-family:var(--npl-font);line-height:1.5;color:var(--npl-ink);
  background:rgba(9,20,38,.62);padding:16px;overflow-y:auto;
}
body.npl-modal-open header,
body.npl-modal-open .elementor-location-header,
body.npl-modal-open .elementor-sticky--effects,
body.npl-modal-open .site-header,
body.npl-modal-open #masthead,
body.npl-modal-open .sticky-header,
body.npl-modal-open .fixed-header,
body.npl-modal-open .main-header{z-index:1!important}
#npl-quiz.is-on{display:flex;align-items:flex-start;justify-content:center}
#npl-quiz .npl-box{
  width:100%;max-width:560px;margin:auto;background:#fff;border-radius:14px;
  box-shadow:var(--npl-shadow);padding:22px 20px 20px;position:relative;
}
#npl-quiz .npl-close{
  position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;background:#f2f4f7;
  border-radius:9px;cursor:pointer;font-size:19px;line-height:1;color:#667085;padding:0;
}
#npl-quiz .npl-bar{height:5px;background:#eef1f6;border-radius:99px;overflow:hidden;margin:2px 0 16px}
#npl-quiz .npl-bar span{display:block;height:100%;width:20%;background:var(--npl-amber);transition:width .25s}
#npl-quiz .npl-step{display:none}
#npl-quiz .npl-step.is-on{display:block}
#npl-quiz .npl-num{font-size:12.5px;font-weight:700;color:var(--npl-blue);letter-spacing:.04em;text-transform:uppercase}
#npl-quiz .npl-q{margin:6px 0 16px;padding:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--npl-ink)}
#npl-quiz .npl-opts{display:grid;gap:9px;margin-bottom:16px}
#npl-quiz .npl-opt{
  display:flex;align-items:center;gap:11px;padding:13px 14px;margin:0;
  border:1.5px solid var(--npl-line);border-radius:10px;cursor:pointer;
  font-family:var(--npl-font);font-size:15px;background:#fff;text-align:left;width:100%;
  transition:border-color .12s,background .12s;color:var(--npl-ink);
}
#npl-quiz .npl-opt:hover{border-color:var(--npl-blue);background:#f7fbff}
#npl-quiz .npl-opt.is-on{border-color:var(--npl-blue);background:#eef6fd}
#npl-quiz .npl-dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid var(--npl-line);position:relative}
#npl-quiz .npl-opt.is-on .npl-dot{border-color:var(--npl-blue)}
#npl-quiz .npl-opt.is-on .npl-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--npl-blue)}
#npl-quiz .npl-back{background:none;border:0;color:var(--npl-muted);font-size:14px;cursor:pointer;padding:6px 0;font-family:var(--npl-font)}
#npl-quiz .npl-badge{
  display:inline-block;font-size:12.5px;font-weight:700;color:var(--npl-ok);
  background:#e7f6f0;border-radius:99px;padding:5px 12px;margin-bottom:10px;
}
#npl-quiz .npl-bank{margin:0 0 6px;padding:0;font-size:23px;font-weight:700;color:var(--npl-navy)}
#npl-quiz .npl-note{margin:0 0 14px;padding:0;font-size:14.5px;color:#475467}
#npl-quiz .npl-facts{
  list-style:none;margin:0 0 18px;padding:14px;border-radius:10px;background:#f7f9fc;
  border:1px solid #e7ecf3;display:grid;gap:8px;font-size:14px;
}
#npl-quiz .npl-facts li{margin:0;padding:0}
#npl-quiz .npl-facts b{color:var(--npl-navy)}
#npl-quiz .npl-field{margin-bottom:14px}
#npl-quiz .npl-field>label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#344054}
#npl-quiz .npl-req{color:var(--npl-err)}
#npl-quiz .npl-input{
  width:100%;height:50px;padding:0 14px;margin:0;font-family:var(--npl-font);
  font-size:16px;color:var(--npl-ink);background:#fff;
  border:1.5px solid var(--npl-line);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
#npl-quiz .npl-input::placeholder{color:#98a2b3}
#npl-quiz .npl-input:focus{outline:none;border-color:var(--npl-blue);box-shadow:0 0 0 3px rgba(46,117,182,.16)}
#npl-quiz .npl-err{display:none;margin-top:5px;font-size:12.5px;color:var(--npl-err);font-weight:600}
#npl-quiz .npl-field.is-bad .npl-input{border-color:var(--npl-err);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
#npl-quiz .npl-field.is-bad .npl-err{display:block}
#npl-quiz .npl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#npl-quiz .npl-consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px}
#npl-quiz .npl-consent input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--npl-blue)}
#npl-quiz .npl-consent label{font-size:12.5px;color:var(--npl-muted);line-height:1.45}
#npl-quiz .npl-consent a{color:var(--npl-blue)}
#npl-quiz .npl-consent.is-bad label{color:var(--npl-err)}
#npl-quiz .npl-done{text-align:center;padding:16px 0 6px}
#npl-quiz .npl-done h3{margin:0 0 8px;padding:0;font-size:21px;color:var(--npl-ink)}
#npl-quiz .npl-done p{margin:0 0 18px;padding:0;color:#475467;font-size:15px}
#npl-quiz .npl-ico{
  width:58px;height:58px;border-radius:50%;background:#e7f6f0;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:27px;color:var(--npl-ok);
}

/* ---------- КОНТЕНТНАЯ ЧАСТЬ ---------- */
#npl-art{
  font-family:var(--npl-font);color:var(--npl-ink);line-height:1.62;
  max-width:820px;margin:0 auto;padding:40px 20px 8px;font-size:16.5px;
}
#npl-art p{margin:0 0 16px}
#npl-art h2{
  margin:38px 0 14px;padding:0;font-family:var(--npl-font);
  font-size:clamp(21px,2.6vw,27px);line-height:1.25;font-weight:700;color:var(--npl-navy);
  scroll-margin-top:90px;
}
#npl-art h3{margin:26px 0 10px;padding:0;font-size:clamp(17px,2vw,20px);line-height:1.3;font-weight:700;color:var(--npl-ink);scroll-margin-top:90px}
#npl-art a{color:var(--npl-blue);text-decoration:underline;text-underline-offset:2px}
#npl-art a:hover{color:var(--npl-navy)}
#npl-art strong{font-weight:700;color:var(--npl-ink)}
#npl-art .npl-lead{
  font-size:18px;line-height:1.55;color:var(--npl-ink);
  background:#f5f9ff;border-left:4px solid var(--npl-blue);
  border-radius:0 10px 10px 0;padding:18px 20px;margin:0 0 22px;
}
#npl-art .npl-lead strong{color:var(--npl-navy)}
#npl-art .npl-short{
  background:#fffaf0;border:1px solid #f3ddb4;border-radius:12px;padding:20px 22px 6px;margin:26px 0;
}
#npl-art .npl-short h2{margin:0 0 12px;font-size:19px;color:var(--npl-navy)}
#npl-art .npl-short ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
#npl-art .npl-short li{position:relative;margin:0 0 8px;padding:0 0 0 27px;font-size:15.5px;line-height:1.5}
#npl-art .npl-short li::before{
  content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--npl-amber);
}
#npl-art .npl-toc{border:1px solid var(--npl-line);border-radius:12px;padding:18px 22px 8px;margin:26px 0;background:#fafbfd}
#npl-art .npl-toc strong{display:block;margin-bottom:10px;font-size:15px;color:var(--npl-navy)}
#npl-art .npl-toc ol{margin:0 0 10px;padding:0 0 0 20px;columns:1}
#npl-art .npl-toc li{margin:0 0 6px;font-size:15px}
#npl-art .npl-tw{overflow-x:auto;margin:0 0 8px;-webkit-overflow-scrolling:touch}
#npl-art figure{margin:24px 0 22px;padding:0}
#npl-art figure img{display:block;width:100%;height:auto;border:1px solid #e3e9f1;border-radius:12px}
#npl-art figcaption{margin-top:9px;font-size:13px;line-height:1.45;color:#667085}
#npl-art table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;background:#fff}
#npl-art th,#npl-art td{border:1px solid #e3e9f1;padding:10px 12px;text-align:left;vertical-align:top}
#npl-art th{background:#eef2f7;color:var(--npl-navy);font-weight:700;font-size:14px;line-height:1.35}
#npl-art tbody tr:nth-child(even) td{background:#fafbfd}
#npl-art .npl-cap{font-size:13px;color:var(--npl-muted);margin:0 0 22px}
#npl-art ul.npl-list,#npl-art ol.npl-list{margin:0 0 18px;padding:0 0 0 22px}
#npl-art ul.npl-list li,#npl-art ol.npl-list li{margin:0 0 9px}
#npl-art .npl-callout{
  border:1px solid #cfe0f2;background:#f2f8ff;border-radius:12px;padding:16px 20px;margin:22px 0;
}
#npl-art .npl-callout p:last-child{margin-bottom:0}
#npl-art .npl-warn{border-color:#f3c9c3;background:#fdf4f3}
#npl-art .npl-quote{
  border-left:4px solid var(--npl-amber);background:#fffaf0;border-radius:0 10px 10px 0;
  padding:16px 20px;margin:24px 0;font-size:16px;
}
#npl-art .npl-quote p{margin:0}
#npl-art .npl-quote cite{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--npl-muted)}
#npl-art .npl-cta{
  background:linear-gradient(160deg,var(--npl-navy) 0%,var(--npl-navy2) 100%);
  border-radius:14px;padding:26px 24px;margin:32px 0;color:#fff;
}
#npl-art .npl-cta h3{margin:0 0 8px;color:#fff!important;font-size:21px}
#npl-art .npl-cta p{color:#d2e0f0;margin:0 0 16px;font-size:15.5px}
#npl-art .npl-cta .npl-btn{max-width:420px}
#npl-art .npl-cta .npl-msgr{max-width:420px;margin-top:10px}
#npl-art .npl-faq{border:1px solid var(--npl-line);border-radius:12px;margin:0 0 10px;background:#fff}
#npl-art .npl-faq>summary{
  list-style:none;cursor:pointer;padding:14px 18px;margin:0;
  font-size:16px;font-weight:700;color:var(--npl-navy);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
#npl-art .npl-faq>summary::-webkit-details-marker{display:none}
#npl-art .npl-faq>summary::after{
  content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--npl-blue);border-bottom:2px solid var(--npl-blue);
  transform:rotate(45deg) translateY(-3px);transition:transform .18s;
}
#npl-art .npl-faq[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
#npl-art .npl-faq div{padding:0 18px 16px;font-size:15.5px;color:#344054}
#npl-art .npl-faq div p:last-child{margin-bottom:0}
#npl-art .npl-next{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
#npl-art .npl-next li{
  margin:0;padding:12px 16px;border:1px solid var(--npl-line);border-radius:10px;
  font-size:15.5px;background:#fafbfd;
}
#npl-art .npl-disc{
  border-top:1px solid var(--npl-line);margin-top:34px;padding-top:16px;
  font-size:13.5px;color:var(--npl-muted);
}
#npl-art .npl-disc p{margin:0 0 6px}

/* ---------- БРЕЙКПОИНТЫ ---------- */
@media (min-width:768px){
  #npl-hero{padding:56px 28px 64px}
  #npl-hero .npl-pane{padding:22px 24px 0}
  #npl-hero .npl-actions{padding:0 24px 24px}
  #npl-hero .npl-tab{font-size:13px;padding:13px 8px 12px}
  #npl-art{padding:52px 28px 8px}
  #npl-art .npl-toc ol{columns:2;column-gap:28px}
}
/* Две колонки включаем с 940px, а не с 992px: окно ноутбука часто
   бывает 960-990px (не развёрнуто на весь экран), и на старом пороге
   карточка растягивалась во всю ширину - вкладки по 300px, кнопки
   мессенджеров по 430px. Со стороны это читается как «поплыла вёрстка». */
@media (min-width:940px){
  #npl-hero{padding:70px 32px 78px}
  #npl-hero .npl-grid{grid-template-columns:minmax(0,1.05fr) minmax(380px,440px);gap:44px;align-items:center}
  #npl-hero .npl-usp li{font-size:15.5px}
  #npl-hero .npl-title{font-size:22px}
  #npl-hero .npl-price-val{font-size:46px}
}
@media (min-width:1120px){
  #npl-hero .npl-grid{grid-template-columns:minmax(0,1.08fr) minmax(410px,450px);gap:52px}
}
/* Одноколоночный режим: карточка не должна растягиваться на всю ширину -
   иначе цена, вкладки и кнопки выглядят непропорционально крупными. */
@media (max-width:939px){
  #npl-hero .npl-card{max-width:560px;margin-left:auto;margin-right:auto;width:100%}
  #npl-hero .npl-grid{justify-items:stretch}
}
@media (max-width:767px){
  #npl-sticky{display:flex}
  #npl-hero .npl-grid{gap:22px}
  #npl-hero .npl-tab{font-size:11.5px;padding:11px 4px 10px}
  #npl-quiz{padding:0}
  #npl-quiz .npl-box{border-radius:0;min-height:100%;padding:20px 16px 24px}
  #npl-art{font-size:16px;padding:32px 16px 8px}
}
@media (prefers-reduced-motion:reduce){
  #npl-hero *,#npl-sticky,#npl-quiz *{transition:none!important;animation:none!important}
}
#npl-hero :focus-visible,#npl-sticky :focus-visible,#npl-quiz :focus-visible,#npl-art :focus-visible{outline:3px solid var(--npl-amber);outline-offset:2px}

/* ---------- ФИКС ШИРИНЫ И ОТСТУПОВ ----------
   1. Герой на всю ширину окна, независимо от контейнера темы.
   2. Гасим верхний отступ у всех родителей героя — это убирает
      зазор между шапкой сайта и началом страницы.
   3. Убираем пустые <p>, которые редактор вставляет перед блоком:
      именно они чаще всего и дают этот зазор.
---------------------------------------------- */
#npl-hero{
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  width:auto!important;max-width:none!important;
  margin-top:0!important;
}
body{overflow-x:hidden}

/* пустые абзацы и обёртки перед героем */
p:empty,
p:has(> br:only-child){display:none!important}

/* родители героя на трёх уровнях вложенности */
:is(div,main,article,section,aside):has(> #npl-hero),
:is(div,main,article,section,aside):has(> :is(div,main,article,section) > #npl-hero),
:is(div,main,article,section,aside):has(> :is(div,main,article,section) > :is(div,main,article,section) > #npl-hero){
  padding-top:0!important;margin-top:0!important;
}

/* частые контейнеры Elementor и классических тем */
.elementor-widget-theme-post-content > .elementor-widget-container,
.elementor-widget-text-editor > .elementor-widget-container,
.entry-content,.page-content,.site-content,.content-area{padding-top:0!important}


/* ================================================================
   БРОНЯ РАСКЛАДКИ
   Пока CSS лежал внутри содержимого страницы, он был в body и всегда
   выигрывал у темы по порядку. Из файла в head он может проиграть теме
   или Elementor при равной специфичности — тогда сетки разваливаются
   и элементы ложатся друг под друга.
   Здесь продублированы только те объявления, без которых вёрстка
   рассыпается: раскладка колонок и показ-скрытие экранов квиза.
   ================================================================ */

/* сетка героя */
#npl-hero .npl-grid{display:grid!important}
@media (min-width:940px){
  #npl-hero .npl-grid{grid-template-columns:minmax(0,1.05fr) minmax(380px,440px)!important}
}
@media (min-width:1120px){
  #npl-hero .npl-grid{grid-template-columns:minmax(0,1.08fr) minmax(410px,450px)!important}
}
@media (max-width:939px){
  #npl-hero .npl-card{max-width:560px!important;margin-left:auto!important;margin-right:auto!important}
}

/* вкладки в карточке — три равные колонки */
#npl-hero .npl-tabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important}

/* кнопки мессенджеров — две колонки, где бы блок ни находился */
#npl-hero .npl-msgr,#npl-quiz .npl-msgr,#npl-art .npl-msgr{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
}
#npl-hero .npl-msgr a,#npl-quiz .npl-msgr a,#npl-art .npl-msgr a{
  display:flex!important;align-items:center;justify-content:center;
}

/* панели вкладок и экраны квиза */
#npl-hero .npl-pane{display:none!important}
#npl-hero .npl-pane.is-on{display:block!important}
#npl-quiz{display:none!important}
#npl-quiz.is-on{display:flex!important}
#npl-quiz .npl-step{display:none!important}
#npl-quiz .npl-step.is-on{display:block!important}

/* липкая панель */
@media (max-width:767px){#npl-sticky{display:flex!important}}
@media (min-width:768px){#npl-sticky{display:none!important}}

/* строки вариантов ответа и чекбокс согласия */
#npl-quiz .npl-opts{display:grid!important;gap:9px}
#npl-quiz .npl-opt{display:flex!important;align-items:center}
#npl-quiz .npl-consent{display:flex!important;align-items:flex-start}
#npl-quiz .npl-facts{display:grid!important}


/* ---------- кнопка открытия квиза в тексте ---------- */
#npl-art .npl-open,#npl-hero .npl-open{cursor:pointer}

/* ================================================================
   МУСОР РЕДАКТОРА ВНУТРИ СЕТОК
   Кнопки вкладок и ссылки мессенджеров - строчные элементы. Если
   содержимое страницы прошло через wpautop (Классический блок,
   виджет «Текстовый редактор» Elementor), переводы строк между ними
   превращаются в <br>, а пустые строки - в <p>. Внутри grid-контейнера
   каждый такой <br> занимает полноценную ячейку:
     [вкладка][br][вкладка] / [br][вкладка][ ]
   то есть три вкладки разъезжаются на две строки, а третья встаёт
   посередине. Мессенджеры при двух колонках встают друг под другом.
   Лечим с двух сторон: всё, что не кнопка и не ссылка, из сетки убираем,
   а абзац, в который редактор их завернул, растворяем.
   Настоящее лекарство - держать разметку в блоке «HTML» (Custom HTML)
   или в шаблоне, где wpautop не применяется.
   ================================================================ */
#npl-hero .npl-tabs > *:not(button){display:none!important}
#npl-hero .npl-tabs > p:has(button){display:contents!important}

#npl-hero .npl-msgr > *:not(a),
#npl-quiz .npl-msgr > *:not(a),
#npl-art  .npl-msgr > *:not(a){display:none!important}
#npl-hero .npl-msgr > p:has(a),
#npl-quiz .npl-msgr > p:has(a),
#npl-art  .npl-msgr > p:has(a){display:contents!important}

/* переносы строк, попавшие в остальные раскладки */
#npl-hero .npl-grid > br,
#npl-hero .npl-card > br,
#npl-hero .npl-actions > br,
#npl-hero .npl-price-row > br,
#npl-hero .npl-meta > br,
#npl-hero .npl-usp > br,
#npl-hero .npl-trust > br,
#npl-hero .npl-notes > br,
#npl-art .npl-cta > br{display:none!important}
#npl-hero .npl-grid > p:empty,
#npl-hero .npl-card > p:empty{display:none!important}