/* =========================================================================
   Diagnoza.bg — стилове
   Мобилно-първо, адаптивно към десктоп. Естетика: средата на 2026.
   ====================================================================== */

/* СПЕЦИФИЧНОСТ, НЕ КАПРИЗ: селекторът е html:root, а не само :root.
   Разширения и вградени модули на браузъри (проявено в Avast) си слагат
   собствени дизайн-променливи на :root с ГЕНЕРИЧНИ имена — --accent,
   --font, --primary. Инжектираният стил идва СЛЕД нашия, при равна
   специфичност печели той и пребоядисва сайта: бутоните ставаха сини,
   шрифтът се сменяше. html:root е с по-висока специфичност (0,1,1 срещу
   0,1,0), значи нашите стойности печелят независимо от реда. */
html:root{
  --primary:#059669;            /* икони/декорация */
  --primary-text:#047857;       /* текст/бутони (WCAG >= 4.5:1) */
  --green-dark:#064E3B;
  --green-deep:#053E2F;
  --mint:#ECFDF5;
  --mint-2:#D1FAE5;
  --accent:#34D399;
  --text:#1F2937;
  --muted:#6B7280;
  --border:#E5E7EB;
  --border-soft:#EEF2F0;
  --amber:#F59E0B;
  --amber-bg:#FFFBEB;
  --red:#DC2626;
  --red-bg:#FEF2F2;
  --bg:#FFFFFF;
  --bg-soft:#F9FBFA;

  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(6,78,59,.05);
  --shadow:0 6px 20px rgba(6,78,59,.07);
  --shadow-lg:0 18px 44px rgba(6,78,59,.12);
  --header-h:64px;

  --font:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--text);
  line-height:1.65;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
/* Вградени line икони (виж inc/functions.php icon()) – наследяват цвят и размер. */
.ico{display:inline-block;vertical-align:-0.15em;flex:0 0 auto}
[hidden]{display:none!important}
a{color:var(--primary-text);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
main.wrap{display:block;scroll-margin-top:calc(var(--header-h) + 8px)}   /* цел на skip-link → да не се крие под sticky хедъра */

.skip-link{
  position:absolute;left:-999px;top:0;background:#fff;color:var(--green-dark);
  padding:10px 16px;border-radius:0 0 10px 0;z-index:200;font-weight:700;
}
.skip-link:focus{left:0}
/* само за екранни четци (визуално скрито, но се чете от AT) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Хедър ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--green-dark);color:#fff;
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled{box-shadow:0 6px 22px rgba(0,0,0,.18);background:linear-gradient(180deg,var(--green-dark) 0%,var(--green-deep) 100%)}
.header-inner{
  min-height:var(--header-h);   /* min- вместо фиксирано → не прелива при много едър шрифт */
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:22px;letter-spacing:-.5px}
.brand:hover{text-decoration:none}
.brand-mark{flex-shrink:0}
.brand-tld{color:var(--accent)}

.nav-desktop{display:none;align-items:center;gap:4px}
.nav-desktop a{
  color:#E6FBF3;padding:8px 11px;border-radius:8px;font-weight:600;font-size:14.5px;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.nav-desktop a:hover{background:rgba(255,255,255,.10);text-decoration:none;color:#fff}
.nav-desktop a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.nav-desktop .nav-cta{
  background:var(--accent);color:var(--green-dark);margin-left:6px;padding:9px 16px;font-weight:700;
}
.nav-desktop .nav-cta:hover{background:#6EE7B7;color:var(--green-dark)}

/* Хамбургер */
.hamburger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;background:transparent;border:0;cursor:pointer;border-radius:10px;
}
.hamburger:hover{background:rgba(255,255,255,.10)}
.hamburger span{display:block;height:2.5px;width:100%;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Drawer ---------------------------------------------------- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(4,29,22,.5);z-index:150;
  opacity:0;transition:opacity .22s ease;
}
.drawer-overlay.open{opacity:1}
.drawer{
  position:fixed;top:0;right:0;height:auto;max-height:100dvh;width:min(88vw,360px);
  background:#fff;z-index:160;box-shadow:var(--shadow-lg);border-bottom-left-radius:var(--radius);
  transform:translateX(100%);
  /* visibility:hidden маха затвореното чекмедже от Tab-реда и от екранните четци;
     0s забавяне при затваряне → крие се чак СЛЕД плъзгащата анимация. */
  visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s .24s;
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.open{transform:translateX(0);visibility:visible;transition:transform .24s cubic-bezier(.4,0,.2,1)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--green-dark);
  position:sticky;top:0;background:var(--green-dark);z-index:2;
}
.drawer-title{font-weight:800;color:#fff;font-size:18px}
.drawer-close{background:none;border:0;font-size:30px;line-height:1;color:rgba(255,255,255,.85);cursor:pointer;width:40px;height:40px;border-radius:10px}
.drawer-close:hover{background:rgba(255,255,255,.14);color:#fff}
.drawer-nav{padding:12px 12px 18px}
.drawer-group summary{
  list-style:none;cursor:pointer;font-weight:700;color:var(--green-dark);
  padding:12px 12px;border-radius:10px;font-size:16px;display:flex;align-items:center;justify-content:space-between;
}
.drawer-group summary::-webkit-details-marker{display:none}
.drawer-group summary::after{content:"⌄";font-size:20px;color:var(--muted);transition:transform .2s}
.drawer-group[open] summary::after{transform:rotate(180deg)}
.drawer-group summary:hover{background:var(--mint)}
.drawer-sub{list-style:none;padding:2px 0 8px}
.drawer-sub li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:9px;color:var(--text);font-size:14.5px;
}
.drawer-sub li a:hover{background:var(--mint);text-decoration:none;color:var(--green-dark)}
.drawer-ico{width:22px;text-align:center}
.drawer-count{margin-left:auto;background:var(--mint);color:var(--green-dark);font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px}
.drawer-link{
  display:block;padding:13px 12px;border-radius:10px;color:var(--text);font-weight:600;font-size:16px;
}
.drawer-link:hover{background:var(--mint);text-decoration:none;color:var(--green-dark)}
.drawer-ios-hint{margin:12px 2px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.drawer-ios-hint strong{color:var(--green-dark)}

/* ---------- Типография / общи -------------------------------------------- */
h1{font-size:clamp(28px,5vw,38px);color:var(--green-dark);line-height:1.2;letter-spacing:-.6px;margin-bottom:6px}
h2{font-size:clamp(20px,3vw,24px);color:var(--green-dark);margin:34px 0 12px;letter-spacing:-.3px}
h3{font-size:18px;color:var(--green-dark)}
p{margin-bottom:12px}
.subtitle{color:var(--muted);font-size:16px;margin-bottom:8px}
.page-kontakti .subtitle,.page-oplakvane .subtitle{font-size:18px}   /* тези две страници: интро текст 18px */
.breadcrumb{font-size:14px;color:var(--muted);margin:22px 0 10px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary-text)}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted)}

/* ---------- Бутони ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary-text);color:#fff;font-weight:700;
  padding:12px 22px;border-radius:12px;border:0;cursor:pointer;font-size:15px;font-family:inherit;line-height:1.2;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 16px rgba(4,120,87,.25);
}
.btn:hover{background:#065F46;text-decoration:none;transform:translateY(-1px);color:#fff}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;background:var(--primary-text)}
.btn-lg{padding:16px 30px;font-size:17px;border-radius:14px}
.btn-block{width:100%}
.btn-ghost{background:#fff;color:var(--green-dark);border:1.5px solid var(--border);box-shadow:none}
.btn-ghost:hover{background:var(--mint);color:var(--green-dark)}

/* ---------- Герой (начало) -------------------------------------------- */
.hero{
  text-align:center;padding:40px 22px 34px;margin-top:16px;
  background:linear-gradient(180deg,var(--mint),#fff);
  border:1px solid var(--mint-2);border-radius:var(--radius-lg);
}
.hero-icon{
  width:86px;height:86px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 12px 24px rgba(6,78,59,.22));
}
.hero-icon svg{width:86px;height:86px;display:block}
.hero h1{margin:0 auto 12px;max-width:16ch}
.hero .subtitle{max-width:54ch;margin:0 auto 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* „Пълния доклад включва" блок в хиро + линк към примерен доклад (ВНИМАНИЕ [ДИЗАЙН]) */
.hero-report{width:fit-content;max-width:100%;margin:26px auto 0;padding:18px 4px 4px;border-top:1px solid var(--mint-2)}
.hero-report-head{display:flex;align-items:center;justify-content:flex-start;gap:9px;margin:0 0 14px}
.hero-report-head h2{margin:0;font-size:18px;color:var(--green-dark);font-weight:800}
.hero-report-ico{display:inline-flex;color:var(--primary)}
.hero-report-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.hero-report-list li{position:relative;padding-left:28px;color:var(--text);font-weight:600;font-size:15.5px;line-height:1.35;white-space:nowrap}
.hero-report-list li::before{content:"✓";position:absolute;left:2px;top:-1px;color:var(--primary);font-weight:800}
.hero-sample{text-align:center;margin:12px 0 0}
@media (max-width:720px){
  .hero-report-list li{white-space:normal}   /* пренасяне и в диапазона 481–719px */
}
@media (max-width:480px){
  .hero-report{width:auto;max-width:360px}
}

/* ---------- Търсачка --------------------------------------------------- */
.search{position:relative;max-width:620px;margin:26px auto 0}
.search-input{
  width:100%;padding:16px 18px 16px 50px;font-size:16px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:14px;background:#fff;color:var(--text);
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;
}
.search-input:focus{outline:none;border-color:var(--primary-text);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
/* Нативният бутон „×" (изчистване) на type=search — браузърите го рисуват различно
   (напр. синьо). Стилизираме го като сив „×" в тон с лупата. Остава функционален. */
.search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-left:6px;cursor:pointer;background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.search-input::-webkit-search-cancel-button:hover{background-color:var(--green-dark)}
.search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px;pointer-events:none}
.search-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  overflow:hidden;z-index:40;max-height:60vh;overflow-y:auto;
}
.search-results[hidden]{display:none}
.search-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text);border-bottom:1px solid var(--border-soft)}
.search-item:last-child{border-bottom:0}
.search-item:hover,.search-item.active{background:var(--mint);text-decoration:none}
/* Фокусът в резултатите е ВЪТРЕШЕН (не външен outline, който .search-results{overflow}
   реже отляво/отдясно при Tab-навигация). */
.search-item:focus-visible{outline:none;background:var(--mint);box-shadow:inset 0 0 0 2px var(--green-dark)}
.search-item .si-abbr{font-weight:700;color:var(--green-dark);min-width:64px;flex:0 0 auto;overflow-wrap:anywhere}
/* Статия — вместо съкращение стои иконата на „База знания" (книга). */
.search-item .si-ico{min-width:26px;display:inline-flex;align-items:center;color:var(--primary)}
.search-item .si-empty{min-width:0}
/* min-width:0 е задължително — иначе дълго име не се пренася, а прелива извън
   клетката и ляга върху съседната (виждаше се на телефони под ~400px). */
.search-item .si-name{color:var(--text);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.search-item .si-group{margin-left:auto;font-size:12px;color:var(--muted);flex:0 1 auto;min-width:0;text-align:right}
/* Тесни екрани: групата слиза на втори ред под името, вместо да се бори за същия. */
@media(max-width:479px){
  .search-item{flex-wrap:wrap;gap:4px 10px;align-items:baseline}
  /* flex-basis:0 → името остава до съкращението/иконата и се пренася ВЪТРЕ в себе си,
     вместо цялото да слиза на нов ред. */
  .search-item .si-name{flex:1 1 0}
  .search-item .si-group{flex:1 0 100%;margin-left:0;text-align:left;padding-left:calc(64px + 10px)}
  .search-item .si-ico + .si-name + .si-group,
  .search-item .si-empty + .si-name + .si-group{padding-left:0}
}
.search-empty{padding:16px;color:var(--muted);font-size:14px;text-align:center}

/* ---------- Карти / секции -------------------------------------------- */
.section{margin:40px 0}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-title h2{margin:0}
.section-title a{font-size:14px;font-weight:600}

.card{
  background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--border)}

/* Промо карта „Оплакване" */
.promo{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:linear-gradient(135deg,var(--mint),#fff);
  border:1px solid var(--mint-2);border-radius:var(--radius-lg);padding:24px;
}
.promo-head{display:flex;align-items:center;gap:14px}
.promo-ico{flex-shrink:0;color:var(--primary);line-height:1;display:flex}
.promo-head h2,.promo-head h3{font-size:19px;margin:0;color:var(--green-dark);letter-spacing:normal}
.promo>p{margin:0;color:var(--muted);font-size:18px}   /* промо текст (начална + EHA карта): единен 18px, не наследява браузърния размер */
.promo:hover{text-decoration:none}
.promo:hover h3,.promo:hover p{text-decoration:none}
.promo .btn{align-self:center}
.promo-note{font-size:12.5px;color:var(--muted);margin-top:-2px}

/* Чипове с раздели */
.chips{display:flex;flex-wrap:wrap;gap:10px}
/* груповите чипове (раздели) може да имат дълги имена → да се пренасят по думи
   (без overflow-wrap:anywhere, за да не се цепи броячът „12" на цифри) */
.chips .chip{white-space:normal;text-align:left}
.chip{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--mint);color:var(--green-dark);padding:8px 15px;border-radius:999px;
  font-size:14px;font-weight:600;border:1px solid transparent;transition:background .14s,border-color .14s;
}
.chip .ico{color:var(--primary)}
a.chip:hover{background:#fff;border-color:var(--accent);text-decoration:none}
.chip .chip-count{color:var(--primary-text);font-weight:700;margin-left:2px}

/* Мрежа с популярни показатели */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
.tile{
  display:flex;flex-direction:column;gap:4px;
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:16px 18px;
  box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s,border-color .14s;
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent);text-decoration:none}
.tile-abbr{font-weight:800;color:var(--green-dark);font-size:16px}
.tile-name{color:var(--text);font-size:14px}
.tile-group{color:var(--muted);font-size:12px;margin-top:2px}

/* ---------- Страница показател ---------------------------------------- */
.article{max-width:760px;margin:0 auto}
.article p:not([class]){font-size:18px}   /* основен текст на страниците — единен размер */
/* Уводният абзац на единичните страници (оплакванията) — 18px, като останалия
   основен текст. ЗАЩО СЕ НАЛАГА ОТДЕЛНО ПРАВИЛО: редът отгоре хваща само
   абзаци БЕЗ клас, а уводът е <p class="lead"> и `:not([class])` го изключва.
   Правило за .lead в контекста на .article нямаше никъде, затова той падаше на
   базовите 16px — по-дребен и от подзаглавието над него, и от текста под него.
   Проверени са всичките осем места с class="lead": седем са в .simple/.tool/
   .notfound и си имат свой размер; това е единственото без. Цветът НЕ се пипа
   (в .simple .lead е сив, тук остава основният) — сменя се само размерът. */
.article .lead{font-size:18px}
.article table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.article th{background:var(--mint);color:var(--green-dark);text-align:left;padding:11px 14px;font-weight:700}
.article th:first-child{border-radius:10px 0 0 0}
.article th:last-child{border-radius:0 10px 0 0}
.article td{padding:11px 14px;border-bottom:1px solid var(--border)}
.article tr:last-child td{border-bottom:0}
.range-note{font-size:13px;color:var(--muted);margin-top:2px}
.range-cell-note{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

.block{border-radius:14px;padding:18px 20px;margin:16px 0}
.block h3{margin-bottom:8px;font-size:17px}
.block p{margin:0}
.block.high{background:var(--amber-bg);border-left:4px solid var(--amber)}
.block.high h3{color:#92400E}
.block.low{background:var(--red-bg);border-left:4px solid var(--red)}
.block.low h3{color:#991B1B}

.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
/* Свързаните оплаквания имат дълги имена – да се пренасят на нов ред и да не
   надвишават ширината (иначе .chip е с white-space:nowrap и чупи екрана). */
.related .chip{white-space:normal;overflow-wrap:anywhere;max-width:100%;text-align:left}

.meta-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.badge{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);
  border:1px solid var(--border-soft);color:var(--muted);border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:600;
}
.badge strong{color:var(--green-dark)}

/* ---------- Косъм (HTMA) / генетика / EHA ----------------------------- */
/* Баджове за тип изследване */
.badge.htma{background:var(--mint);border-color:var(--mint-2);color:var(--green-dark)}
.badge.toxic{background:var(--red-bg);border-color:#F6C9C9;color:#991B1B}

/* Карта „В косъма (HTMA)" – ползва стила на .card с лек teal/mint акцент. */
.hair-card{
  margin:26px 0;
  background:linear-gradient(180deg,var(--mint),#fff);
  border-left:4px solid var(--accent);
}
/* Картата е чисто съдържание – без hover „повдигане", но пазим акцента отляво. */
.hair-card:hover{transform:none;box-shadow:var(--shadow-sm);border-left-color:var(--accent)}
.hair-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hair-card-head h2{margin:0}
.hair-card h3{margin:18px 0 6px}
.badge.htma-card{background:#fff;border-color:var(--mint-2);color:var(--green-dark);font-size:12px;padding:3px 10px}

/* Неутрален блок за генетичното „носителство" – мека мента, различен от .high/.low. */
.block.info{background:var(--mint);border-left:4px solid var(--accent)}
.block.info h3{color:var(--green-dark)}

/* Вторичен EHA CTA – контурен бутон, ясно различен от основния зелен. */
.eha-cta{text-align:center;margin:18px 0 8px}
.eha-cta p{color:var(--text);margin:0 0 10px;font-size:16.5px;line-height:1.55}
.eha-cta-strong{font-weight:600;color:var(--green-dark);margin-bottom:14px}
.btn-eha{background:var(--primary-text);color:#fff;border:1.5px solid var(--primary-text)}
.btn-eha:hover{background:#047857;color:#fff}

/* ---------- CTA ------------------------------------------------------- */
.cta{
  background:var(--green-dark);color:#fff;border-radius:var(--radius-lg);
  padding:34px 28px;margin:46px 0;text-align:center;box-shadow:var(--shadow);
}
.cta h2{color:#fff;margin:0 0 10px}
.cta p{color:var(--mint-2);max-width:60ch;margin:0 auto 6px}
/* Бутонът в CTA – гарантирано центриран (и на мобилни). */
/* Бутонът седи върху тъмнозеления .cta фон → accent + тъмен текст (както хедъра),
   иначе зеленото се слива с фона (особено при hover). */
.cta .btn{display:flex;width:fit-content;margin:20px auto 0;background:var(--accent);color:var(--green-dark);box-shadow:none}
.cta .btn:hover{background:#6EE7B7;color:var(--green-dark)}

/* ---------- Disclaimer ------------------------------------------------ */
.disclaimer{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;font-size:13.5px;color:var(--muted);margin:30px 0;
}
.disclaimer strong{color:var(--text)}

/* Източници (E-E-A-T) – дребен, блед, но четим. Виж pokazatel.php / metodologiya.php */
.sources{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--border-soft);font-size:13px;color:var(--muted);line-height:1.6}
.sources h2{font-size:12.5px;font-weight:700;color:var(--muted);margin:0 0 8px;letter-spacing:.04em;text-transform:uppercase}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{margin:3px 0;padding-left:14px;position:relative}
.sources li::before{content:"·";position:absolute;left:4px;top:6px;color:var(--muted)}
.sources a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:5px 0}
.sources a:hover{color:var(--primary-text)}
.sources-note{margin:10px 0 0;font-style:italic}
.sources-method{margin:9px 0 0}
.sources-method a{color:var(--primary-text);text-decoration:none;font-weight:600}
.sources-method a:hover{text-decoration:underline}

/* ---------- Речник ---------------------------------------------------- */
.glossary-group{margin:28px 0;scroll-margin-top:calc(var(--header-h) + 14px)}
.glossary-group h2{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.glossary-group .g-count{font-size:14px;font-weight:600;color:var(--muted)}
.glossary-list{
  display:grid;grid-template-columns:1fr;gap:10px;list-style:none;
}
.glossary-list a{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;border:1px solid var(--border-soft);
  border-radius:12px;padding:12px 16px;color:var(--text);box-shadow:var(--shadow-sm);
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.glossary-list a:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none}
.glossary-list .gl-abbr{font-weight:800;color:var(--green-dark);font-size:14px;line-height:1.2}
.glossary-list .gl-name{color:var(--text);font-size:14.5px;line-height:1.35}
.placeholder-note{
  background:var(--mint);border:1px dashed var(--accent);border-radius:12px;
  padding:14px 16px;color:var(--green-dark);font-size:14px;
}

/* ---------- Прости placeholder страници ------------------------------ */
.simple{max-width:720px;margin:10px 0 20px}
.simple .lead{font-size:18px;color:var(--muted)}
.tool .lead{font-size:18px}   /* „Разкодирай": единен с другите страници */

/* ---------- Футър ----------------------------------------------------- */
.site-footer{background:var(--mint);color:var(--muted);margin-top:56px;border-top:1px solid var(--mint-2)}
.footer-grid{padding:40px 20px 44px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
/* По-висока специфичност от .wrap (която на ≥1024px слага padding:0 32px и
   изяждаше вертикалния отстъп на футъра на широки/4K екрани). */
.site-footer .footer-grid{padding-top:40px;padding-bottom:44px}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.footer-brand-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--green-dark);font-size:18px}
.footer-tagline{font-size:13px;color:var(--muted);margin:0;font-weight:600}
/* Мобилно: всяка връзка на нов ред със семпъл булет */
.footer-links{display:flex;flex-direction:column;gap:9px;width:100%}
.footer-links a{color:var(--muted);font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px;padding:6px 0}
.footer-links a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.footer-links a:hover{color:var(--primary-text)}
/* МОБИЛНО: по-стегнати редове в долната навигация.
   Беше: 9px gap + по 6px padding горе/долу → 45px стъпка между редовете, тоест
   21px чист въздух между два надписа. При девет връзки навигацията ставаше
   395px, а целият футър 754px на телефон 360px.
   Сега: gap 0 (чистият въздух е излишен — редовете и без това имат padding),
   padding 5px и по-стегнат интерлиниаж → 30px стъпка, навигация 273px,
   футър 631px. Пипната е САМО стъпката; шрифт, цвят и булети са същите.
   ЗАЩО padding остава 5px, а не 0: това е зоната за докосване на връзката.
   При 30px височина вече сме под препоръчителните 44px, затова не я свивам
   повече — по-стегнато би направило връзките трудни за уцелване с пръст.
   Десктопът не е пипан (там gap-ът е в блока за ≥900px). */
@media (max-width:899.98px){
  .footer-links{gap:0}
  .footer-links a{padding:5px 0;line-height:1.4}
}
.footer-legal{font-size:13px;color:var(--muted);margin:0}

/* Лента с данните за търговеца — най-долу, под трите колони. Дребен шрифт,
   разделител „·“ между полетата; на тесни екрани се пренася естествено. */
.footer-company{border-top:1px solid var(--mint-2)}
.footer-company p{
  margin:0;padding:14px 0 18px;
  font-size:12.5px;line-height:1.7;color:var(--muted);
}
.footer-company strong{color:var(--green-dark);font-weight:700}
.footer-company a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.footer-company a:hover{color:var(--primary-text)}
.footer-company .sep{margin:0 7px;opacity:.5}
@media (min-width:900px){
  .footer-company p{text-align:center}
}

/* =========================================================================
   Десктоп
   ====================================================================== */
@media (min-width:720px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .glossary-list{grid-template-columns:repeat(2,1fr)}
  .hero{padding:56px 40px 40px}
  .promo{align-items:center;text-align:center}   /* на десктоп цялата карта е центрирана */
  .promo .btn{align-self:center}
}
@media (min-width:900px){
  .hamburger{display:none}
  .nav-desktop{display:flex}
  .grid{grid-template-columns:repeat(3,1fr)}
  .glossary-list{grid-template-columns:repeat(3,1fr)}
  .footer-grid{flex-direction:row;align-items:center;justify-content:space-between}
  .footer-links{order:2;display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:8px 28px;width:auto}
  /* Десктоп: по-разгърнат герой и по-ясен ритъм */
  .hero{padding:70px 48px 52px;margin-top:24px}
  .hero-icon{width:96px;height:96px}
  .hero-icon svg{width:96px;height:96px}
  .hero h1{font-size:44px}
  .hero .subtitle{font-size:19px}
  .section{margin:56px 0}
  /* Четивните страници – центрирана колона с комфортна ширина */
  .article,.simple{max-width:800px;margin-left:auto;margin-right:auto}
  .cta{padding:44px 40px}
}
@media (min-width:1024px){
  .glossary-list{grid-template-columns:repeat(4,1fr)}
  .wrap{padding:0 32px}
}

/* ---------- Инструмент „Разкодирай изследване" ------------------------ */
.tool{max-width:760px}
.tool-form{margin:22px 0 8px}
/* Бутонът „Разкодирай" – центриран (формата иначе е ляво-подравнена). */
#submitBtn{display:flex;width:fit-content;margin:4px auto 0}

.dropzone{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;min-height:184px;padding:28px 20px;cursor:pointer;
  background:linear-gradient(180deg,var(--mint),#fff);
  border:2px dashed var(--mint-2);border-radius:var(--radius-lg);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.dropzone:hover{border-color:var(--accent)}
.dropzone.dragover{border-color:var(--primary);background:var(--mint-2);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.dropzone.has-file{background:#fff;border-style:solid;border-color:var(--border);cursor:default}
.dropzone-ico{font-size:38px;line-height:1;color:var(--primary)}
.dropzone-title{font-weight:700;color:var(--green-dark);margin:0}
.dropzone-link{color:var(--primary-text);text-decoration:underline}
.dropzone-hint{font-size:13px;color:var(--muted);margin:0}
.dropzone-file{display:flex;flex-direction:column;align-items:center;gap:10px;justify-content:center;width:100%;max-width:100%;text-align:center}
.dropzone-file .ico{color:var(--primary)}
.dropzone-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0}
/* При НЯКОЛКО качени файла имената се изписват едно под друго — всяко в
   свой .dz-row. Базовият клас е nowrap + многоточие, за да не се разлива
   едно дълго име; тук това отпада, иначе редовете се сливат. Колоната с
   междина е важна на тесен екран: дългите имена се пренасят вътре в своя
   ред и без разстоянието двата файла изглеждат като един текст. */
.dropzone-name.multi{
  white-space:normal;text-overflow:clip;overflow-wrap:anywhere;
  display:flex;flex-direction:column;gap:5px;line-height:1.4;
}
.dropzone-name .dz-row{display:block}
/* Размерът не бива да се откъсва от името при пренасяне. */
.dropzone-name .dz-sz{white-space:nowrap;color:var(--muted);font-weight:600}
.dropzone-remove{
  background:var(--red-bg);color:var(--red);border:1px solid #F6C9C9;border-radius:999px;
  padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
}
.dropzone-remove:hover{background:#FCE4E4}

.tool-consent{
  display:flex;gap:12px;align-items:flex-start;margin:18px 0;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  font-size:13.5px;color:var(--text);line-height:1.55;
}
.tool-consent input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--primary)}
.tool-consent strong{color:var(--green-dark)}

.tool-note{font-size:13px;color:var(--muted);margin-top:10px}

.tool-status{
  display:flex;align-items:center;gap:12px;margin:22px 0;
  background:var(--mint);border:1px solid var(--mint-2);border-radius:12px;padding:16px 18px;
  color:var(--green-dark);font-weight:600;
}
.tool-status[hidden]{display:none}
.spinner{
  width:20px;height:20px;flex-shrink:0;border-radius:50%;
  border:3px solid var(--mint-2);border-top-color:var(--primary);
  animation:dg-spin .8s linear infinite;
}
@keyframes dg-spin{to{transform:rotate(360deg)}}

.tool-result{
  margin:24px 0;background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);
  scroll-margin-top:calc(var(--header-h) + 12px);   /* да не го покрива sticky хедърът при авто-скрол */
}
.tool-result[hidden]{display:none}
.tool-result h2{margin:0 0 12px}
.tool-result-body p{margin:0 0 12px;color:var(--text)}
/* Основният текст на доклада — 18px, като останалите четивни страници.
   ЗАЩО: правилото отгоре никога не е задавало размер (сверено в снимките от
   8, 11, 13 и 14 август), затова текстът падаше на базовите 16px, докато
   показател/оплакване/увод са 18px. Разликата се набива при преминаване между
   страниците. Докладът е платеният продукт и дълъг текст за четене — няма
   причина да е най-дребният на сайта.
   ЦЕНА, измерена върху истинския примерен доклад: +23% височина на телефон
   390px (15 851 → 19 531px) и +17% на десктоп. Прието съзнателно.
   ОБХВАТ: класът се ползва на три места — платеният доклад (report.php),
   примерният (primeren-doklad.php) и безплатното превю (razkodirai.php).
   Подсказката .rep-click-hint остава 14px — тя има свое правило с по-висока
   специфичност. ⚠️ ВНИМАНИЕ [МОНЕТИЗАЦИЯ]: това променя ВИДА на вашия доклад,
   но самите report.php / inc/report.php НЕ са пипани. */
.tool-result-body p,.tool-result-body li{font-size:18px}
.tool-result-body p:last-child{margin-bottom:0}
/* 2026-08-13: подсказка „Кликни върху показател…" в „Пълен преглед“ (inc/report.php) */
.tool-result-body p.rep-click-hint{font-size:14px;color:var(--muted,#6B7280);margin:-4px 0 12px}
.tool-error{color:var(--red);font-weight:600}
/* Форматиране на AI обяснението (Markdown → тагове) в стила на сайта */
.tool-result-body h3,.tool-result-body h4{color:var(--green-dark);font-weight:800;margin:30px 0 12px;padding:5px 0 5px 13px;border-left:4px solid var(--accent,#34D399);line-height:1.25}
.tool-result-body h3{font-size:22px}
.tool-result-body h4{font-size:21px}
.tool-result-body h3:first-child,.tool-result-body h4:first-child{margin-top:4px}
.tool-result-body strong{color:var(--green-dark);font-weight:700}
.tool-result-body strong a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px}
.tool-result-body strong a:hover{color:var(--primary-text)}
.tool-result-body ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.tool-result-body li{position:relative;padding-left:20px;color:var(--text);line-height:1.6}
.tool-result-body li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tool-result-body em{color:var(--muted);font-style:italic}
.tool-result-body hr{border:0;border-top:1px solid var(--border-soft);margin:18px 0}
.result-link{color:var(--primary-text);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.result-link:hover{color:#047857}
.tool-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tool-result-head h2{margin:0}
.btn-sm{padding:8px 14px;font-size:13px;box-shadow:none;border-radius:10px}
.hero-install-row .btn{font-size:17px}   /* hero install: шрифт като горните btn-lg, но остава нисък (btn-sm padding) */
.restored-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--green-dark);background:var(--mint);border:1px solid var(--mint-2);border-radius:10px;padding:9px 12px;margin:0 0 14px}
.tool-result-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Мобилно: бутоните в един ред НАД „Обяснение". */
@media (max-width:560px){
  .tool-result-head{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .tool-result-actions{width:100%;flex-wrap:nowrap}
  .tool-result-actions .btn{flex:1 1 0;justify-content:center}
}
.print-only{display:none}
.only-desktop{display:none}
@media (min-width:900px){ .only-mobile{display:none!important} .only-desktop{display:inline} }
.q-teaser{display:flex;align-items:center;gap:11px;background:var(--mint);border:1px dashed var(--accent);border-radius:12px;padding:14px 16px;margin:16px 0 4px;color:var(--green-dark);font-size:14px;line-height:1.5}
.q-teaser .ico{color:var(--primary);flex:0 0 auto}
/* Позитивна бележка, когато всички показатели са в норма */
.result-allclear{display:flex;align-items:flex-start;gap:11px;background:var(--mint);border:1px solid var(--mint-2);border-radius:12px;padding:14px 16px;margin:18px 0 4px;color:var(--green-dark);font-size:14.5px;line-height:1.55}
.result-allclear .ico{color:var(--primary);flex:0 0 auto;margin-top:1px}
.pdf-cta{display:flex;flex-direction:column;align-items:center;gap:7px;margin:24px 0 4px;text-align:center}
.pdf-cta-hint{font-size:14.5px;color:var(--muted)}
/* Преместеното „само информативно…" изречение – под бутона, по-дребно. */
.pdf-cta .result-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin:8px 0 0;max-width:54ch}
/* Летящ бутон „Към резултатите" (когато има зареден анализ) */
.back-to-result{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:200;display:inline-flex;align-items:center;gap:8px;background:var(--primary-text);color:#fff;font-weight:700;font-size:14px;line-height:1;padding:11px 15px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.22);text-decoration:none;animation:btr-in .25s ease-out}
.back-to-result:hover{background:#065F46;color:#fff;text-decoration:none;transform:translateY(-1px)}
.drawer.open ~ .back-to-result{display:none}   /* крие се докато чекмеджето е отворено */
.back-to-result svg{flex:0 0 auto}
@keyframes btr-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media print{
  .site-header,.site-footer,.drawer,.drawer-overlay,.hamburger,.breadcrumb,.tool-form,.tool-status,.tool-result-actions,.restored-note,.q-teaser,.disclaimer,.skip-link,.back-to-result{display:none!important}
  .print-only{display:block!important}
  .screen-only{display:none!important}
  body,main.wrap{margin:0;padding:0;max-width:100%}
  .tool-result{border:0;box-shadow:none;padding:0;margin:0}
  .print-header{display:flex!important;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid #064E3B;padding-bottom:10px;margin-bottom:14px}
  .print-head-left{display:flex;flex-direction:column;gap:3px}
  .print-brand{font-weight:800;font-size:20px;color:#064E3B;line-height:1.1}
  .print-sub{font-size:12px;color:#6B7280}
  .print-head-qr{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto}
  .print-head-qr img{width:60px;height:60px;display:block}
  .print-qr-cap{font-size:12px;color:#6B7280;text-align:center;line-height:1.25}
  .print-disclaimer{font-size:12px;color:#6B7280;border-top:1px solid #E5E7EB;margin-top:16px;padding-top:8px}
  .tool-result-body h3{color:#064E3B}
  a{color:#064E3B!important;text-decoration:none}
}

/* Бутони за избор в dropzone (снимка / PDF) */
.dz-picks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:2px 0 4px}
.dz-pick{padding:10px 18px;font-size:14px}
.dropzone[aria-label]{cursor:default}

/* ---------- Достъпност / фокус ---------------------------------------- */
:focus-visible{outline:3px solid var(--green-dark);outline-offset:2px;border-radius:6px}
/* върху тъмните зони пръстенът е светъл (accent върху green-dark = 5.06:1) */
.site-header :focus-visible,.cta :focus-visible,.cta-box :focus-visible{outline-color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  /* Появата на летящия бутон „Към резултатите" също спира (slide+fade). */
  .back-to-result{animation:none!important}
  /* Спинърът е индикатор за зареждане – да продължи да се върти (по-бавно),
     иначе изглежда „заседнал". Затова НЕ го спираме напълно. */
  .spinner{animation:dg-spin 1.4s linear infinite!important}
}

/* Скриваме reCAPTCHA баджа долу вдясно. Позволено е при видима текстова
   атрибуция във формата (има я в contact.php с линкове към Google). */
.grecaptcha-badge{visibility:hidden!important;}

/* ---------- Оплаквания → изследвания ---------------------------------- */
.redflag{
  background:var(--red-bg);border:1px solid #FCA5A5;border-radius:12px;
  padding:14px 16px;margin:14px 0 18px;color:#7F1D1D;font-size:14.5px;line-height:1.55;
}
.redflag strong{color:var(--red)}
.test-list{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
.test-item{
  position:relative;
  display:flex;flex-direction:column;gap:3px;background:#fff;
  border:1px solid var(--border-soft);border-radius:12px;padding:12px 16px;
  box-shadow:var(--shadow-sm);transition:border-color .14s,box-shadow .14s,transform .14s;
}
.test-item:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.test-item .ti-name{font-weight:700;color:var(--green-dark)}
a.ti-name:hover{color:var(--primary-text);text-decoration:none}
a.ti-name::after{content:"";position:absolute;inset:0;border-radius:12px}  /* цялата карта е кликаема */
.test-item .ti-why{font-size:13.5px;color:var(--muted)}
.opl-tile .rf-dot{color:var(--red);font-weight:800;font-size:18px;line-height:0}
@media (min-width:720px){ .test-list{grid-template-columns:repeat(2,1fr)} }

/* ---------- Форма за контакти ----------------------------------------- */
.contact-form{margin:22px 0 8px}
.form-field{margin:0 0 16px}
.form-field label{
  display:block;font-weight:600;color:var(--green-dark);
  margin-bottom:6px;font-size:14.5px;
}
.form-field .req{color:var(--primary-text)}
.form-input,.form-textarea{
  width:100%;padding:12px 14px;font-size:16px;font-family:inherit;   /* 16px → без авто-зум на iOS при фокус */
  border:1.5px solid var(--border);border-radius:12px;background:#fff;color:var(--text);
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;
}
.form-input:focus,.form-textarea:focus{
  outline:none;border-color:var(--primary-text);box-shadow:0 0 0 4px rgba(52,211,153,.18);
}
.form-textarea{min-height:160px;resize:vertical;line-height:1.6}
.form-field.has-error .form-input,
.form-field.has-error .form-textarea{border-color:var(--red);background:var(--red-bg)}
.field-error{
  color:var(--red);font-size:13.5px;font-weight:700;margin-top:6px;
  background:var(--red-bg);border:1px solid #FCA5A5;border-radius:8px;
  padding:6px 10px;display:inline-block;
}

/* Скрито honeypot поле (анти-спам) – извън екрана, недостъпно за хора. */
.form-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-consent{
  display:flex;gap:12px;align-items:flex-start;margin:6px 0 18px;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  font-size:13.5px;color:var(--text);line-height:1.55;
}
.form-consent input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--primary)}
.form-consent.has-error{border-color:var(--red);background:var(--red-bg)}

.form-note{font-size:13px;color:var(--muted);margin-top:10px}

.form-alert{
  border-radius:12px;padding:16px 18px;margin:6px 0 22px;font-size:14.5px;line-height:1.6;
  display:flex;gap:12px;align-items:flex-start;
}
.form-alert .ico{margin-top:2px}
.form-alert.success{background:var(--mint);border:1px solid var(--mint-2);color:var(--green-dark)}
.form-alert.success strong{color:var(--green-dark)}
.form-alert.info{background:var(--amber-bg);border:1px solid #FCD34D;color:#92400E}
.form-alert.info strong{color:#92400E}
.form-alert.error{background:var(--red-bg);border:1px solid #FCA5A5;color:#B91C1C;font-weight:700}
.form-alert.error strong{color:#B91C1C}

/* =========================================================================
   404 страница (обща + липсващ показател) — секция .notfound
   Ползва се от 404.php и pokazatel.php чрез inc/notfound.php.
   ====================================================================== */
.notfound{max-width:640px;margin:0 auto;padding:44px 0 24px;text-align:center}
.nf-code{font-size:clamp(72px,18vw,104px);font-weight:800;line-height:1;letter-spacing:2px;color:var(--green-dark)}
.nf-pulse{display:block;width:min(320px,86%);height:auto;margin:2px auto 20px;color:var(--primary)}
/* Линията се „изчертава" веднъж при зареждане; точката светва накрая. */
.nf-pulse path{stroke-dasharray:480;stroke-dashoffset:480;animation:nf-draw 1.4s .15s ease-out forwards}
.nf-pulse .nf-dot{fill:var(--accent);opacity:0;animation:nf-dot .3s 1.35s ease-out forwards}
@keyframes nf-draw{to{stroke-dashoffset:0}}
@keyframes nf-dot{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .nf-pulse path{animation:none;stroke-dashoffset:0}
  .nf-pulse .nf-dot{animation:none;opacity:1}
}
.notfound h1{margin:0 0 10px}
.notfound .lead{font-size:17px;line-height:1.55;color:var(--muted);max-width:48ch;margin:0 auto}
.notfound .search{margin:24px auto 0}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}

/* ---------- Начална страница: нови секции ---------------------------- */
/* „Как работи" — 3 стъпки (1 колона → 3 на десктоп) */
.steps{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;counter-reset:none}
/* Цифрата и заглавието са на ЕДИН ред (по-ниски карти); текстът минава под тях. */
.step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;align-content:start;background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.step-n{grid-column:1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--green-dark);font-weight:800;font-size:15px}
.step h3{grid-column:2;grid-row:1;margin:0;font-size:17px;color:var(--green-dark);line-height:1.3}
.step p{grid-column:1/-1;grid-row:2;margin:10px 0 0;color:var(--muted);font-size:15px}
.steps-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
/* „Защо да се довериш" — E-E-A-T лента */
.trust{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.trust{grid-template-columns:repeat(3,1fr)}}
/* Иконата и заглавието са на ЕДИН ред (по-ниски карти); текстът и линкът минават
   под тях. align-content:start е нужен, защото картите се разтягат до еднаква
   височина в решетката — иначе редовете също се разтягат и отстъпите се разминават. */
.trust-item{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;align-content:start;
  background:linear-gradient(135deg,var(--mint),#fff);border:1px solid var(--mint-2);border-radius:var(--radius);padding:18px 20px}
.trust-ico{grid-column:1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--mint-2);color:var(--primary)}
.trust-item h3{grid-column:2;grid-row:1;margin:0;font-size:16.5px;color:var(--green-dark);line-height:1.3}
.trust-item p{grid-column:1/-1;grid-row:2;margin:10px 0 0;color:var(--muted);font-size:15px}
.trust-item a{grid-column:1/-1;grid-row:3;margin-top:10px;font-size:14px;font-weight:700}
/* Често задавани въпроси (същият текст е и в JSON-LD FAQPage) */
.faq{display:grid;grid-template-columns:1fr;gap:2px}
@media(min-width:900px){.faq{grid-template-columns:repeat(2,1fr);gap:6px 26px}}
.faq-item{padding:14px 0;border-bottom:1px solid var(--border-soft)}
.faq-item h3{margin:0 0 6px;font-size:16.5px;color:var(--green-dark);line-height:1.35}
.faq-item p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}

/* ---------- Малък CTA в статия (База знания) ------------------------- */
/* Тънка тъмнозелена лента над тялото на статията — подсказва, без да прекъсва
   четенето. Големият CTA (inc/cta.php) остава в края на страницата. */
/* Мобилно: съдържанието е центрирано. Десктоп: текст вляво, бутон вдясно.
   Ширината съвпада с .bz-body (760px), за да е в колоната на текста. */
.cta-mini{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;text-align:center;
  background:var(--green-dark);color:#fff;border-radius:var(--radius-sm);padding:12px 16px;margin:22px 0 26px;max-width:760px}
@media(min-width:640px){.cta-mini{justify-content:space-between;text-align:left}}
.cta-mini-t{font-weight:700;font-size:15.5px;line-height:1.35}
.cta-mini .btn{background:var(--accent);color:var(--green-deep);box-shadow:none;padding:9px 18px;font-size:14.5px}
.cta-mini .btn:hover{background:#6EE7B7;color:var(--green-deep)}

/* ---------- Баджове за доверие (hero на началната + „Разкодирай") ------ */
/* Вариант А (по подразбиране) — ментова карта; вариант Б (.claims-b) — бяла,
   за ментови фонове като hero-то, където ментово върху ментово се губи. */
.claims{display:grid;grid-template-columns:1fr;gap:12px;margin:22px auto 0;max-width:760px;text-align:left}
@media(min-width:720px){.claims{grid-template-columns:1fr 1fr}}
.claim{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:linear-gradient(135deg,var(--mint),#fff);border:1px solid var(--mint-2);border-radius:14px;padding:14px 16px}
.claim-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--mint-2);color:var(--primary);flex:0 0 auto}
.claim-t{font-weight:800;color:var(--green-dark);font-size:15.5px;line-height:1.25}
.claim-s{color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:3px}
.claims-b .claim{background:#fff;border-color:var(--border-soft);box-shadow:var(--shadow-sm)}
.claims-b .claim-ico{background:var(--mint);border-color:transparent}

/* ---------- База знания (образователен раздел) ----------------------- */
/* Хиро с икона ОТЛЯВО на заглавието → секцията е чувствително по-ниска. */
.hero-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px}
.hero-head h1{margin:0;max-width:none}
.hero-head .hero-icon{width:52px;height:52px;margin:0;flex:0 0 auto;color:var(--primary);filter:drop-shadow(0 6px 14px rgba(6,78,59,.18))}
.hero-head .hero-icon svg{width:52px;height:52px}
@media(min-width:720px){
  .hero-head{gap:18px}
  .hero-head .hero-icon,.hero-head .hero-icon svg{width:62px;height:62px}
}
/* Преизползва: .grid, .section-title, .badge, .hero, .hero-icon, .chip(s), .search, .breadcrumb, .cta, .btn, .subtitle, .section */
.section-lead{color:var(--muted);font-size:15px;margin:0 0 18px}
.axis-note{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px dashed var(--mint-2);border-radius:var(--radius-sm);padding:14px 16px;margin:22px 0 0;color:var(--muted);font-size:14px}
.axis-note strong{color:var(--green-dark)}
.axis-note>svg{color:var(--primary);margin-top:2px;flex:0 0 auto}
/* Карти рубрики (3×3 през .grid) */
.rubric{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s,border-color .14s}
.rubric:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--accent);text-decoration:none}
.rubric-head{display:flex;align-items:center;gap:12px}
.rubric-ico{width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rubric-head h3{margin:0;color:var(--green-dark);font-size:17px;line-height:1.25}
.rubric-desc{color:var(--muted);font-size:14px;margin:0}
.rubric-ex{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.rubric-ex li{position:relative;padding-left:16px;font-size:13.5px;color:var(--text)}
.rubric-ex li::before{content:"\203A";position:absolute;left:2px;top:-1px;color:var(--accent);font-weight:800}
.rubric-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between}
.rubric-count{font-size:12.5px;color:var(--muted);font-weight:600}
.rubric-more{font-size:13px;font-weight:700;color:var(--primary-text)}
/* Списък статии */
.arts{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.arts{grid-template-columns:repeat(2,1fr)}}
.art{position:relative;background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s,border-color .14s}
.art:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.art-cat{font-size:12px;font-weight:700;color:var(--primary-text);text-transform:uppercase;letter-spacing:.4px}
.art h3{margin:6px 0 8px;font-size:17px;line-height:1.3}
.art h3 a{color:var(--green-dark)}
.art h3 a:hover{text-decoration:none}   /* без подчертаване — вдигането и рамката са достатъчна обратна връзка */
/* ЦЯЛАТА карта е кликаема: линкът на заглавието се „опъва" върху картата.
   Ако някога в картата влезе ВТОРИ линк — дай му position:relative;z-index:1, за да е достъпен. */
.art h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.art:focus-within{outline:3px solid var(--green-dark);outline-offset:3px}
.art-meta-compact{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.art-meta-compact .rev{display:inline-flex;align-items:center;gap:5px;color:var(--green-dark)}
.art-meta-compact .rev svg{color:var(--primary);flex:0 0 auto}
.art-meta-compact .dot{color:var(--border)}
/* E-E-A-T знак „Проверено" — компактен (списъци) и пълен (статия) */
.badge.rev{background:var(--mint);border-color:var(--mint-2);color:var(--green-dark)}
.badge.rev svg{color:var(--primary);flex:0 0 auto}
.eeat{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.eeat-full{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--border-soft);margin-top:14px}
.eeat-hint{font-size:12.5px;color:var(--muted);margin-top:10px}
/* Свързани показатели / източници на статия — преизползват .chips/.sources от сайта */
.bz-body{max-width:760px}
.bz-body h2{font-size:clamp(20px,3vw,24px);color:var(--green-dark);margin:34px 0 12px}
.bz-body h3{font-size:18px;color:var(--green-dark);margin:22px 0 8px}
.bz-body p{font-size:18px}
.bz-article-head{border-left:4px solid var(--accent);padding-left:18px;margin:6px 0 18px}
.bz-disclaimer{display:flex;gap:10px;align-items:flex-start;background:var(--amber-bg);border:1px solid #F5E1B8;color:#92400E;border-radius:var(--radius-sm);padding:12px 14px;margin:18px 0;font-size:14px}
.bz-disclaimer>svg{color:#B45309;margin-top:2px;flex:0 0 auto}

/* „Още по темата" — вътрешно свързване между статиите.
   Системните булети на ul стърчат вляво от текстовата колона и чупят
   лявата линия на страницата. Затова маркерът е свой: тънка точка в
   същия цвят като линка (currentColor), поставена ВЪТРЕ в колоната,
   както е и при .sources. Така списъкът започва точно под заглавието. */
.bz-related{list-style:none;margin:0;padding:0;max-width:none}
/* цветът се задава на li, за да може currentColor в маркера да хване
   същото зелено като линка до него, а не наследеното сиво на секцията */
.bz-related li{position:relative;padding-left:17px;margin:0 0 9px;color:var(--green-dark)}
.bz-related li:last-child{margin-bottom:0}
.bz-related li::before{
  content:"";position:absolute;left:1px;top:.62em;
  width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.4;
}
.bz-related a{
  color:inherit;text-decoration:none;
  font-size:17px;line-height:1.55;
  text-underline-offset:3px;
}
.bz-related a:hover{text-decoration:underline}
@media (max-width:640px){
  .bz-related a{font-size:16px}
}

/* =========================================================================
   „Изслушай" — четене на глас (Web Speech API).
   Маркъп: inc/tts.php · логика: assets/tts.js
   Плеърът живее в реда с баджовете (.eeat-full при статиите, .meta-badges
   при показателите), затова размерите му са като на .badge — 13px, пилюла.
   ====================================================================== */
.tts{position:relative;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.tts[hidden]{display:none}

.tts-play,.tts-stop,.tts-gear{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--mint);border:1px solid var(--mint-2);color:var(--green-dark);
  border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;
  line-height:1.2;cursor:pointer;min-height:34px;padding:5px 14px;
  transition:background .15s ease,border-color .15s ease;
}
.tts-play:hover,.tts-stop:hover,.tts-gear:hover{background:var(--mint-2)}
.tts-stop,.tts-gear{padding:5px 8px;min-width:34px}
.tts-play svg,.tts-stop svg,.tts-gear svg{width:16px;height:16px;flex:0 0 auto;color:var(--primary-text)}
.tts-ico{display:inline-flex;align-items:center}
.tts-ico-pause{display:none}
.tts.is-playing .tts-ico-play{display:none}
.tts.is-playing .tts-ico-pause{display:inline-flex}
.tts.is-playing .tts-play{background:var(--mint-2);border-color:var(--accent)}

/* Лента на напредъка — тънка, без числа: колко от текста е прочетено. */
.tts-bar{display:block;width:58px;height:4px;border-radius:999px;background:var(--mint-2);overflow:hidden}
.tts-bar[hidden]{display:none}
.tts-bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:inherit;transition:width .3s linear}

/* Панел с настройки (скорост, глас, подсказка). */
.tts-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:120;
  width:300px;max-width:86vw;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:12px 14px;text-align:left;
}
.tts-panel[hidden]{display:none}
.tts-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tts-row:last-child{margin-bottom:0}
.tts-row[hidden]{display:none}
.tts-row-t{font-size:13px;font-weight:700;color:var(--green-dark)}
.tts-rates{display:inline-flex;gap:4px}
.tts-rates button{
  font-family:inherit;font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;
  background:#fff;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:6px 8px;min-height:28px;
}
.tts-rates button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint-2);color:var(--green-dark)}
.tts-panel select{
  font-family:inherit;font-size:13px;color:var(--text);background:#fff;
  border:1px solid var(--border);border-radius:8px;padding:6px 8px;max-width:165px;
}
.tts-hint{
  font-size:12.5px;line-height:1.55;color:var(--muted);
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);
}
.tts-hint[hidden]{display:none}
.tts-hint b{display:block;color:var(--green-dark);margin-bottom:3px}
.tts-hint button{
  background:none;border:0;padding:0;margin-top:6px;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--primary-text);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}

/* Плаващ мини-контрол: показва се само докато тече четене И основният
   плеър е излязъл от екрана, за да не се търси бутонът „пауза" нагоре. */
.tts-mini{
  position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:120;display:none;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--mint-2);border-radius:999px;
  box-shadow:var(--shadow-lg);padding:6px;
}
.tts-mini.show{display:inline-flex}
.tts-mini-b{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:var(--primary-text);border:0;color:#fff;
}
.tts-mini-b:hover{background:#065F46}
.tts-mini-b svg{width:18px;height:18px}
.tts-mini-x{background:#fff;border:1px solid var(--border);color:var(--green-dark)}
.tts-mini-x:hover{background:var(--bg-soft)}
.tts-mini .mi-play{display:none}
.tts-mini.is-paused .mi-pause{display:none}
.tts-mini.is-paused .mi-play{display:inline-block}

@media (max-width:480px){
  .tts-bar{width:44px}
  .tts-panel{width:270px}
}
@media (prefers-reduced-motion:reduce){
  .tts-bar i{transition:none}
}
@media print{
  .tts,.tts-mini{display:none !important}
}

/* =========================================================================
   „Сподели" — светъл бутон в чекмеджето + прозорец с QR код.
   Маркъп: inc/header.php · логика: assets/app.js
   Бутонът е само в чекмеджето, а то се показва под 900px, значи функцията
   е автоматично само за мобилни — без отделна медия заявка.
   ====================================================================== */
/* Рамката е ВЪТРЕШНА СЯНКА, а не border. Истинската рамка се добавя към
   височината на кутията и бутонът ставаше 44px срещу 42px на горните два;
   inset сянката изглежда еднакво, но не заема място. */
/* Светлият бутон „Сподели" — един и същ вид в чекмеджето (мобилни) и във
   футера (десктоп). Рамката е ВЪТРЕШНА СЯНКА, а не border: истинската рамка
   се добавя към височината и бутонът в чекмеджето ставаше 44px срещу 42px
   на съседните. */
.btn-share{
  background:#fff;color:var(--green-dark);
  border:0;box-shadow:inset 0 0 0 1.5px var(--mint-2);
}
.btn-share:hover{background:var(--mint);color:var(--green-dark);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn-share svg{color:var(--primary-text)}

/* Средната колона на футера: копирайтът и бутонът един под друг. */
.footer-mid{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@media (min-width:900px){
  .footer-mid{align-items:center}
}

.share-overlay{
  position:fixed;inset:0;background:rgba(4,29,22,.55);z-index:220;
  opacity:0;transition:opacity .18s ease;
}
.share-overlay[hidden]{display:none}
.share-overlay.open{opacity:1}

.share-sheet{
  position:fixed;inset:0;z-index:230;
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;transition:opacity .18s ease;
}
.share-sheet[hidden]{display:none}
.share-sheet.open{opacity:1}

.share-card{
  width:100%;max-width:340px;max-height:calc(100vh - 36px);overflow-y:auto;
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:22px 20px 18px;text-align:center;
  transform:translateY(10px) scale(.98);transition:transform .2s ease;
}
.share-sheet.open .share-card{transform:none}

.share-title{font-size:19px;color:var(--green-dark);margin:0 0 4px;letter-spacing:-.2px}
.share-sub{font-size:13.5px;color:var(--muted);margin:0 0 16px;line-height:1.5}

/* Бялата рамка около кода е ЗАДЪЛЖИТЕЛНА, не украса: QR стандартът иска
   „тиха зона" от 4 модула около кода, а самият файл носи само 1. Padding-ът
   допълва останалото, иначе част от четците се затрудняват. */
.share-qr{
  display:inline-block;background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:22px;margin-bottom:14px;
}
.share-qr img{display:block;width:200px;height:200px}

.share-brand{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--green-dark);font-weight:800;font-size:20px;letter-spacing:-.5px;
  margin-bottom:18px;
}
.share-brand svg{flex:0 0 auto}
/* Ментовото зелено на „.bg" е за тъмния хедър; върху бяло не се чете. */
.share-brand .brand-tld{color:var(--primary-text)}

.share-actions{display:flex;flex-direction:column;gap:10px}
.share-actions .btn{width:100%}

.share-close{
  display:block;width:100%;margin-top:14px;padding:8px;
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:700;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.share-close:hover{color:var(--green-dark)}

@media (max-width:360px){
  .share-qr{padding:16px}
  .share-qr img{width:170px;height:170px}
}
@media (prefers-reduced-motion:reduce){
  .share-overlay,.share-sheet,.share-card{transition:none}
}
@media print{
  .share-overlay,.share-sheet{display:none !important}
}

/* ---------- Хиро на „Оплаквания" -------------------------------------- */
/* Преизползва .hero / .hero-head / .hero-icon от База знания. Тук са САМО
   разликите; никое съществуващо правило не е променено.

     • Заглавието е на ДВА реда, двата еднакво големи и дебели.
     • Иконата стои вляво САМО на първия ред („Имаш оплакване?"), затова е
       ВЪТРЕ в него, а не в .hero-head. Ако беше отстрани на цялото заглавие
       (както е в База знания), тя отнема ширина и от ДВАТА реда — на 420px
       вторият ред се накъсваше. Сега вторият ред ползва цялата ширина.
     • Числата са ПОД търсачката.

   Размерът на иконата НЕ се пипа — идва от наследеното
   .hero-head .hero-icon (52px, 62px над 720px), точно като в База знания. */
.page-oplakvane .hero-head{display:block}
/* „> span", а не „span": вътрешният .hero-icon също е span и НЕ бива да
   става блок — иначе излиза на собствен ред над текста. */
.hero-title-2l > span{display:block}
.hero-title-2l > .hero-l1{display:flex;align-items:center;justify-content:center;gap:14px}
/* САМО НА МАЛЪК ТЕЛЕФОН иконата минава НАД заглавието.
   ПРОБЛЕМЪТ: първият ред е центриран заедно с иконата — „[икона][14px][текст]" —
   значи самият ТЕКСТ е изместен надясно с половината от иконата и разстоянието
   (33px на телефон, 38px на десктоп), докато вторият ред е центриран на нула.
   Под 400px „Имаш оплакване?" вече не се събира до иконата и се пренася на два
   реда — тогава изместването се вижда като раздърпано заглавие вдясно.
   ПРАГЪТ 400px е ИЗМЕРЕН: при 393px редът се пренася, при 400px още се събира.
   Ако на нечий телефон пак се пренася (по-голям системен шрифт), вдигни само
   това число. Над 400px нищо не се променя — там редът е цял и отместването
   не се забелязва (решение на Николай). */
@media (max-width:399.98px){
  .page-oplakvane .hero-title-2l > .hero-l1{display:block}
  .page-oplakvane .hero-l1 .hero-icon{margin:0 auto 8px}
}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:22px 0 0}

/* ---------- Увод на „Разкодирай изследване": булети вместо плътен абзац ---- */
/* Одобрено 2026-08-08. Двете групи са двете колони на десктоп и падат една под
   друга на тесен екран. Един размер шрифт навсякъде — 18px, същият като .lead,
   който заместват. Редът БЕЗ булет е в основния цвят за текст; булетите са
   тъмнозелени, а самата чекмарка остава в зеленото на дизайн-системата (както
   в „Пълния доклад включва" на началната страница).

   ЗАЩО колоните са РАВНИ (1fr 1fr), а не по ширина на съдържанието:
   пробвах max-content max-content — изглеждаше по-добре (нищо не се пренася,
   блокът е 174px вместо 199px), НО е счупено. Контейнерът .simple е 760px, а
   двете колони по съдържание искат 435+408+30 = 873px. Разликата излиза ИЗВЪН
   контейнера и между 900 и 999px ширина на екрана се появява хоризонтален
   плъзгач (измерено: scrollWidth 942 при екран 900). При равни колони по 365px
   двата най-дълги реда се пренасят на втори — това е цената, но нищо не излиза
   от рамката. НЕ връщай max-content без да оправиш ширината на контейнера.

   ЗАЩО прагът е 900px: под него контейнерът става още по-тесен и две колони по
   365px започват да чупят почти всеки ред. Затова под 900px са една под друга. */
.lead-lab{font-size:18px;line-height:1.5;color:var(--text);margin:0 0 6px}
.lead-bul2{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lead-bul2 li{position:relative;padding-left:26px;font-size:18px;line-height:1.35;
  font-weight:600;color:var(--green-dark)}
.lead-bul2 li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--primary);font-weight:800}
.lead-cols{display:grid;gap:14px;align-items:start}
@media (min-width:900px){
  .lead-cols{grid-template-columns:1fr 1fr;gap:0 30px}
}

/* Сгъваемият списък „Пълният доклад ти дава" (само на мобилни) --------------
   Затворен на тесен екран, за да не бута зоната за качване под екрана; на
   десктоп е винаги отворен и summary-то не се държи като бутон. */
.lead-more > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.lead-more > summary::-webkit-details-marker{display:none}
.lead-more > .lead-bul2{margin-top:8px}

/* Под 900px спусъкът изглежда като СВЕТЪЛ БУТОН — по образеца на .claim
   („От проверени източници"): същият ментов градиент, същата рамка и същото
   заоблено квадратче за иконата. На десктоп не е бутон, защото там няма какво
   да се сгъва — би подсказвал действие, което го няма. */
@media (max-width:899.98px){
  /* БЕЗ ЗАПЪЛВАНЕ (2026-08-08): само рамка. Пълният ментов градиент крадеше
     внимание от зоната за качване, а акордеонът е второстепенен. Иконата също
     остава без своето квадратче — върху вече незапълнен бутон две вложени
     рамки изглеждат натруфено. */
  .lead-more > summary{
    background:none;
    border:1px solid var(--mint-2);border-radius:14px;
    padding:11px 14px;margin:2px 0 0;
    -webkit-tap-highlight-color:transparent;
  }
  /* Натискането пак дава обратна връзка — само докато пръстът е върху бутона. */
  .lead-more > summary:active{background:var(--mint)}
  .lead-more-ico{display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;color:var(--primary);flex:0 0 auto}
  /* 17px по искане на Николай — надписът е и заглавие на списъка, а не само
     етикет на бутон, затова е малко по-голям от .claim картите (15.5px). */
  .lead-more-t{font-weight:700;color:var(--green-dark);font-size:17px;line-height:1.25}
  .lead-arr{margin-left:auto}
}
.lead-more > summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:14px}
.lead-arr{width:0;height:0;flex:0 0 auto;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--primary);transition:transform .18s}
.lead-more[open] > summary .lead-arr{transform:rotate(180deg)}

@media (min-width:900px){
  /* На десктоп: обикновен надпис, както другата колона. Иконата и стрелката
     падат, summary-то не реагира на клик. */
  .lead-arr,.lead-more-ico{display:none}
  .lead-more > summary{cursor:default;pointer-events:none;padding:0;border:0;background:none}
  .lead-more > .lead-bul2{margin-top:0}
}

/* ---- Прогрес при качване и при изготвяне на доклад ([ДИЗАЙН], 15.08) -------
   По бележката на [ИНФРАСТРУКТУРА] (Vertex EU удвоява чакането): тънка лента
   в .tool-status. JS я пълни по време, забавящо, до ~92% — 100% идва САМО с
   готовия отговор, иначе „пълна и стои" изглежда като забиване. */
.tool-status{flex-wrap:wrap}
.tool-bar{flex-basis:100%;height:6px;border-radius:999px;background:#fff;overflow:hidden}
.tool-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--primary);transition:width .9s ease}
.tool-eta{flex-basis:100%;font-weight:400;font-size:13.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .tool-bar i{transition:none} }

/* ---- Начало, мобилно пренареждане на героя ([ДИЗАЙН], 15.08) --------------
   ≤640px: двата хиро бутона с ЕДНАКЪВ размер; „Разгледай речника" слиза точно
   над търсачката, „Виж примерен доклад" се качва под „Без AI догадки".
   С двойници (.hero-rechnik-m / .hero-sample-m), скрити на десктоп — героят
   НЕ се преподрежда с flex/order, за да не мърдат отстоянията другаде. */
.hero-rechnik-m,.hero-sample-m,.hero-install-m{display:none}
@media (max-width:640px){
  .page-home .hero-install-d{display:none}
  .page-home .hero-install-m{display:block}
  /* без марджин на реда: докато PWA бутонът е hidden, редът е празен и
     съседните отстояния се сливат; отстъпът пътува със самия бутон */
  .page-home .hero-install-m .js-install{margin-top:14px}
  .page-home .hero-actions .btn-ghost{display:none}
  .page-home .hero-actions .btn-lg,
  .page-home .hero-rechnik-m{width:min(80%,340px);min-width:min(260px,100%);white-space:nowrap}
  /* 80% от колоната (искане 16.08); подът 260px пази „Разгледай речника" на
     един ред и на тесни телефони — под ~325px минава на цялата ширина */
  .page-home .hero-sample-d{display:none}
  .page-home .hero-sample-m{display:block;margin:16px 0 0}
  /* рамката на btn-ghost (1.5px) добавя височина и се закръгля различно по
     екрани — тук е вътрешна сянка (не влиза в потока) => височината е
     пиксел-еднаква със зеления бутон на всякакъв DPR */
  .page-home .hero-rechnik-m{display:flex;margin:20px auto 0;border:0;box-shadow:inset 0 0 0 1.5px var(--border)}
}