/* ============================================================
   GEIZER · Отдельная страница статьи
   Своя вёрстка под длинный текст: узкая колонка, крупный шрифт,
   липкое оглавление. Подключается после стилей страницы.
   ============================================================ */
:root{--bg:#070f22;--bg2:#0a1b39;--card:#0d254c;--line:#244d7c;--blue:#0886ff;--cyan:#41c2ff;
  --yellow:#ffe900;--green:#31da89;--white:#f5f8ff;--muted:#9aacc8;--max:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font:16px/1.7 Arial,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 82% 8%,rgba(0,135,255,.12),transparent 30%),
             radial-gradient(circle at 6% 62%,rgba(255,233,0,.05),transparent 26%)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* --- шапка: та же, что на остальных страницах --- */
.header{height:82px;padding:0 max(28px,calc((100vw - var(--max))/2 + 28px));display:flex;align-items:center;gap:24px;
  position:sticky;top:0;z-index:40}
.brand img{width:115px;height:52px;object-fit:contain}
.context-chip{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#0b2247;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#cfe2f7;white-space:nowrap}
.phone{margin-left:auto;font-weight:900}
.menu{display:none;background:none;border:0}
.menu span{display:block;width:24px;height:2px;background:#fff;margin:5px}

/* --- полоса прогресса чтения --- */
.ap-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.ap-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 12px rgba(65,194,255,.7);transition:width .1s linear}

/* --- хлебные крошки --- */
.ap-crumbs{max-width:var(--max);margin:0 auto;padding:26px 28px 0;color:#7f95b4;font-size:12px}
.ap-crumbs a:hover{color:var(--cyan)}
.ap-crumbs span{margin:0 7px;opacity:.5}

/* --- шапка статьи ---
   ap4: заголовок жил в своей колонке 820 px по центру окна, текст статьи — в
   общей 1240 и прижат влево, обложка — в третьей, 1040. На экране 1600 px это
   давало три разных левых края: крошки и текст на 201, обложка на 301,
   заголовок на 411. Страница читалась как куски разных документов, а строки
   гуляли по ширине. Ставим всё на одну линию: внешняя рамка — общая (1240),
   внутри неё колонка чтения 760 px, ровно как у .ap-text. */
.ap-head{max-width:var(--max);margin:0 auto;padding:22px 28px 0}
.ap-head>*{max-width:760px}
.ap-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--cyan);
  font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.ap-kicker i{width:26px;height:1px;background:var(--cyan)}
/* text-wrap:balance выравнивает строки заголовка по длине — иначе последняя
   строка часто оставалась одним словом («самообслуживания»), и заголовок
   выглядел обрубленным. pretty делает то же для абзаца, но мягче. */
.ap-head h1{font-size:clamp(32px,4.6vw,54px);line-height:1.08;letter-spacing:-.03em;margin:18px 0 16px;
  text-wrap:balance}
.ap-lead{font-size:19px;line-height:1.6;color:#c6d6ea;margin:0;text-wrap:pretty}
.ap-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;padding-bottom:26px;
  border-bottom:1px solid rgba(120,180,255,.18);color:#7f95b4;font-size:12px}
.ap-meta b{color:#cfe0f5}

/* --- обложка ---
   ap4: фото во всю ширину окна. Раньше это была карточка 1040 px со скруглением,
   рамкой и тенью — третий по счёту левый край на странице и лишняя «оправа»
   вокруг снимка. Теперь снимок работает как полоса под шапкой: без рамки, без
   скруглений, низ растворяется в фоне страницы, поэтому заголовок под ним
   начинается не от края картинки, а как будто из неё. */
/* Фото — полосой во всю ширину окна, без рамки, тени и скруглений: снимок
   держит первый экран сам, обвязка ему не нужна.
   ВАЖНО ПРО ИСХОДНИКИ: пропорция полосы 3:1, поэтому обложки готовим кадром
   2400×800. Снимок другой пропорции не сломается — он обрежется по центру, но
   из кадра 3:2 в полосу попадёт только средняя половина, а всё, что у верхнего
   и нижнего края, уйдёт. На телефоне полоса 16:9 (там 3:1 — это 130 px, полоска
   ни о чём), так что важное держим ближе к центру кадра. */
.ap-cover{max-width:none;margin:18px 0 26px;padding:0}
.ap-cover img{width:100%;aspect-ratio:3/1;object-fit:cover;object-position:50% 50%;
  border-radius:0;border:0;box-shadow:none;
  /* Низ снимка растворяем не плашкой поверх него, а маской самого снимка:
     плашка гасила бы в один фиксированный цвет, а фон страницы поверх --bg
     ещё подкрашен радиальными бликами — на стыке была бы видна полоса.
     Маска отдаёт фон как есть, поэтому шва нет на любом фоне. */
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
@media(max-width:760px){.ap-cover img{aspect-ratio:16/9}}

/* --- тело: текст + липкое оглавление --- */
.ap-body{max-width:var(--max);margin:0 auto;padding:0 28px 90px;
  display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.ap-text{min-width:0;max-width:760px}
.ap-text h2{font-size:clamp(25px,2.9vw,34px);line-height:1.2;letter-spacing:-.02em;margin:46px 0 16px;scroll-margin-top:104px;
  text-wrap:balance}
.ap-text h2:first-child{margin-top:0}
.ap-text h3{font-size:20px;margin:32px 0 12px;color:#e4eefc}
.ap-text p{margin:0 0 18px;color:#c2d2e6}
.ap-text strong{color:#fff}
.ap-text a:not(.ap-cta){color:var(--cyan);border-bottom:1px solid rgba(65,194,255,.35)}
.ap-text a:not(.ap-cta):hover{color:#fff;border-color:#fff}
.ap-text ul,.ap-text ol{margin:0 0 20px;padding-left:22px;color:#c2d2e6}
.ap-text li{margin-bottom:9px}
.ap-text li::marker{color:var(--cyan)}

/* врезка с ключевой мыслью */
.ap-note{margin:28px 0;padding:20px 22px;border-left:3px solid var(--cyan);border-radius:0 16px 16px 0;
  background:linear-gradient(90deg,rgba(10,32,68,.85),rgba(10,32,68,.35))}
.ap-note b{display:block;margin-bottom:6px;color:#fff}
.ap-note p{margin:0;font-size:14px;color:#b6c8de}

/* таблица цифр */
.ap-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0}
.ap-facts div{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(10,32,68,.5)}
.ap-facts b{display:block;font-size:24px;letter-spacing:-.03em;color:var(--cyan)}
.ap-facts span{font-size:12px;color:var(--muted)}

/* призыв внутри текста */
.ap-cta{display:inline-flex;align-items:center;gap:10px;margin:14px 0 8px;padding:15px 24px;border-radius:999px;
  background:linear-gradient(110deg,#087fff,#36afff);color:#fff;font-size:14px;font-weight:900;
  box-shadow:0 12px 34px rgba(8,127,255,.24);transition:.25s}
.ap-cta:hover{transform:translateY(-2px)}

/* --- оглавление --- */
.ap-toc{position:sticky;top:104px;padding:20px;border:1px solid var(--line);border-radius:18px;
  background:rgba(10,32,68,.5)}
.ap-toc b{display:block;margin-bottom:12px;color:var(--cyan);font-size:10px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase}
.ap-toc ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.ap-toc li{margin-bottom:9px}
.ap-toc li::marker{color:#5b7fae;font-size:11px}
.ap-toc a{color:#a8bdd7;transition:.2s}
.ap-toc a:hover,.ap-toc a.is-on{color:#fff}

/* --- блок «читайте также» --- */
.ap-more{max-width:var(--max);margin:0 auto;padding:0 28px 90px}
.ap-more h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;margin:0 0 22px}
.ap-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ap-more-grid a{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);
  border-radius:18px;background:var(--card);transition:.26s}
.ap-more-grid a:hover{transform:translateY(-3px);border-color:rgba(67,187,255,.6);background:#103464}
.ap-more-grid small{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.ap-more-grid b{font-size:16px;line-height:1.3}
.ap-more-grid span{color:var(--muted);font-size:13px}

/* --- финальный призыв --- */
.ap-final{max-width:var(--max);margin:0 auto 80px;padding:44px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ap-final-inner{max-width:var(--max);margin:0 auto;padding:44px;border:1px solid #2d5b8e;border-radius:25px;
  background:linear-gradient(110deg,#0f315f,#0a2143);display:flex;align-items:center;
  justify-content:space-between;gap:30px;flex-wrap:wrap}
.ap-final-inner h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;margin:8px 0 10px}
.ap-final-inner p{margin:0;color:var(--muted);max-width:520px}
.ap-final-actions{display:flex;gap:10px;flex-wrap:wrap}
.ap-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;
  font-size:14px;font-weight:900;transition:.25s;border:1px solid transparent}
.ap-btn.primary{background:linear-gradient(110deg,#087fff,#36afff);box-shadow:0 12px 34px rgba(8,127,255,.22)}
.ap-btn.ghost{background:#0b2247;border-color:var(--line)}
.ap-btn:hover{transform:translateY(-2px)}

footer{max-width:var(--max);margin:auto;padding:42px 28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:160px 1fr auto;gap:25px;align-items:center;color:var(--muted);font-size:12px}
footer img{width:110px}
footer>div{display:flex;flex-direction:column;color:#fff;font-weight:800}
footer small{grid-column:1/-1}

@media(max-width:980px){
  .ap-body{grid-template-columns:1fr;gap:0}
  .ap-toc{position:static;margin-bottom:32px;order:-1}
  .ap-final{padding:24px 20px}
  .ap-final-inner{padding:26px}
  footer{grid-template-columns:1fr}
}
/* --- дискретный счётчик просмотров («глазок + число») --- */
.ap-views{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:#7f95b4;opacity:.8}
.ap-views svg{width:22px;height:22px;flex:none;opacity:.95}
.ap-views b{color:#cfe0f5;font-weight:700;font-size:11px}
.ap-views[hidden]{display:none}
@media(max-width:640px){.ap-views{margin-left:0}}

@media(prefers-reduced-motion:reduce){
  .ap-progress i{transition:none}
  .ap-more-grid a:hover,.ap-btn:hover,.ap-cta:hover{transform:none}
}

/* fay63: крошки заезжали под шапку. Отступ сверху был 26 px и рассчитывался на
   непрозрачную шапку, которая занимала своё место в потоке. Слой когезии сделал
   её прозрачной и «плавающей» — страница поехала от самого верха окна, и строка
   «Главная / Блог / Экономика» легла прямо на логотип и пункты меню. Отводим её
   ниже шапки. Тот же приём, что на франшизе и на странице оборудования. */
.ap-crumbs{padding-top:calc(82px + 22px)}
@media(max-width:640px){
  .ap-crumbs{padding-top:calc(70px + 16px)}
}
/* ---------- Таблица сравнения в статье ----------
   Таблица — самый извлекаемый формат и для человека, и для ИИ-ответа, но в
   оформлении статей её не было вовсе. Широкая таблица прокручивается внутри
   своей обёртки: страница вбок не едет никогда.
   На узком экране шапка отключается и каждая строка становится карточкой —
   иначе три колонки на 390 пикселях превращаются в кашу. */
.ap-table-wrap{margin:28px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid rgba(120,170,235,.24);border-radius:14px}
.ap-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.ap-table th,.ap-table td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(120,170,235,.16)}
.ap-table thead th{position:sticky;top:0;background:rgba(12,42,87,.96);color:#eaf2ff;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:800}
.ap-table tbody tr:last-child td{border-bottom:0}
.ap-table tbody td:first-child{color:#cfe0f7;font-weight:700;white-space:nowrap}
.ap-table tbody tr:nth-child(even){background:rgba(10,32,68,.35)}

@media (max-width:640px){
  .ap-table-wrap{border:0;overflow:visible}
  .ap-table{min-width:0;font-size:14px}
  .ap-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ap-table tbody tr{display:block;margin-bottom:12px;padding:12px 14px;
    border:1px solid rgba(120,170,235,.24);border-radius:12px;background:rgba(10,32,68,.45)}
  .ap-table tbody tr:nth-child(even){background:rgba(10,32,68,.45)}
  .ap-table tbody td{display:block;padding:4px 0;border:0;white-space:normal}
  .ap-table tbody td:first-child{margin-bottom:4px;color:#8fb4e4;font-size:11.5px;
    letter-spacing:.04em;text-transform:uppercase}
  .ap-table tbody td:nth-child(2):before{content:"Оборудование: ";color:#8ea5c4}
  .ap-table tbody td:nth-child(3):before{content:"Франшиза: ";color:#8ea5c4}
}
/* ---------- Прямой ответ в начале статьи ----------
   Статьи открывались возражением («одна цифра почти всегда обманчива»), а
   экстрактор быстрого ответа берёт первое утвердительное предложение. Блок
   даёт ответ сразу, до всех оговорок — оговорки идут следом и никуда не
   деваются. Заметный, но не крикливый: это часть текста, а не врезка. */
.ap-short{
  margin:0 0 26px;padding:16px 20px;
  border:1px solid rgba(120,170,235,.30);border-radius:14px;
  background:rgba(12,42,87,.42);
  font-size:16px;line-height:1.6;color:#dfeaf9;
}
.ap-short b{color:#8fd0ff;font-weight:800}
@media (max-width:640px){.ap-short{padding:14px 16px;font-size:15px;margin-bottom:20px}}