/* ═══════════════════════════════════════════════════════════════════════
   Оболонка внутрішніх сторінок сайту.

   ★ Чому окремий файл, а index.html лишається з інлайновим CSS.

   Головна сторінка одна, і кожен зайвий запит у ній коштує найдорожче:
   її відкривають з реклами, з телефона, з поганої мережі, і саме на ній
   вимірюється LCP. Тому в ній стилі лишаються всередині файлу.

   Внутрішніх сторінок кілька, вони читаються поспіль (з однієї в іншу
   ведуть посилання), і другу з них браузер уже малює з кеша. Тут вигідно
   навпаки: один файл на всіх.

   Дублювання між цим файлом і <style> в index.html свідоме. Це не одна
   система, розрізана надвоє, а дві сторінки з однією мовою: головна
   малює демо, тарифи й плани, внутрішні малюють текст і таблиці.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F5F2; --card:#fff; --ink:#15181A; --ink-2:#5A605C; --ink-3:#6A6F6A;
  --rule:#E4E4DD; --rule-2:#D3D4CA;
  --moss:#24473A; --moss-2:#2F6350; --moss-bg:#E9F0EC;
  --amber:#8A5A12; --amber-bg:#F7EFE0;
  --r:4px;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
a,button,label,summary{touch-action:manipulation}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:84px;
}
@media(max-width:940px){html{scroll-padding-top:126px}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.w{max-width:1200px;margin:0 auto;padding:0 28px}
.wn{max-width:760px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--moss);outline-offset:2px;border-radius:2px}

/* шапка й підвал повторюють головну до пікселя: перехід між сторінками
   не має читатись як перехід на інший сайт */
header{position:sticky;top:0;z-index:50;background:rgba(245,245,242,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;font-size:16px;white-space:nowrap}
.logo i{width:16px;height:16px;border:1.6px solid var(--ink);border-radius:2px;position:relative;display:block}
.logo i::after{content:"";position:absolute;left:2.4px;top:4.6px;width:8px;height:1.6px;background:var(--ink);box-shadow:0 3.4px 0 var(--ink)}
/* ★ Селектор мусить бути «nav у шапці», а не просто «nav».

   Хлібні крихти нижче теж <nav>: інакше читач екрана не назве їх
   навігацією. Поки правила були написані на голий елемент, крихти
   отримували від шапки display:flex із gap:26px, а на телефоні ще й
   overflow-x із маскою - тобто рядок «Головна / AI-база знань» розганявся
   пробілами й гаснув на правому краї. Виглядало це як зламана верстка, а
   не як меню, що гортається. */
header nav,.ft nav{display:flex;gap:26px;font-size:14.5px;color:var(--ink-2);font-weight:500}
header nav a:hover,.ft nav a:hover{color:var(--ink)}
.hd-r{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:var(--r);background:var(--ink);color:#fff;font-family:var(--sans);font-weight:600;font-size:14.5px;border:none;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn-g{background:transparent;color:var(--ink);border:1px solid var(--rule-2);font-weight:500}
.btn-g:hover{background:var(--card);border-color:var(--ink-3)}
.btn-lg{height:48px;padding:0 26px;font-size:15.5px}
.lnk{font-size:14.5px;font-weight:500}
@media(hover:none){.btn:hover{transform:none}}

/* ★ Хлібні крихти тут не декор: вони дають пошуковику й мовній моделі
   зрозуміти, що сторінка не самотня, а частина сайту з головною. */
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);padding:26px 0 0}
.crumb a{border-bottom:1px solid var(--rule-2)}
.crumb a:hover{color:var(--ink);border-color:var(--ink-3)}
.crumb span{margin:0 7px}

/* заголовок сторінки */
.ph{padding:22px 0 40px;border-bottom:1px solid var(--rule);margin-bottom:44px}
.ph .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.ph h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:12px 0 16px}
.ph .lede{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);line-height:1.55;max-width:34em}
.ph .upd{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:18px}

/* ═══ Текст ════════════════════════════════════════════════════════════
   ★ Абзац сторінки-відповіді читає не лише людина.

   Пошуковик і мовна модель витягують звідси готовий шматок. Тому перший
   абзац під кожним h2 написаний як самодостатня відповідь: він читається
   без попереднього тексту й без наступного.
   ═══════════════════════════════════════════════════════════════════════ */
.prose h2{font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:54px 0 16px;scroll-margin-top:92px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:32px 0 10px;scroll-margin-top:92px}
.prose p{font-size:16.5px;color:var(--ink-2);line-height:1.72;margin-bottom:16px}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:22px}
.prose li{font-size:16.5px;color:var(--ink-2);line-height:1.7;margin-bottom:9px}
.prose a{color:var(--moss-2);font-weight:500;border-bottom:1px solid var(--rule-2)}
.prose a:hover{border-color:var(--moss-2)}
.prose .lead{font-size:17.5px;color:var(--ink);line-height:1.65}

/* Визначення: короткий самодостатній абзац, на який посилаються всі інші.
   Саме його цитує модель, коли її питають «що це таке». */
.def{background:var(--moss-bg);border-left:2px solid var(--moss);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:0 0 26px}
.def p{color:var(--ink);font-size:17px;line-height:1.65;margin:0}
.def p+p{margin-top:12px}

.note{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 22px;margin:26px 0}
.note p{font-size:15px;margin:0}
.note p+p{margin-top:10px}

/* ═══ Таблиця порівняння ═══════════════════════════════════════════════
   ★ Таблицю цитують охочіше за абзац: у ній кожен рядок уже є відповіддю
   на питання «а чим воно відрізняється від X».
   ═══════════════════════════════════════════════════════════════════════ */
.tw{overflow-x:auto;margin:26px 0 30px;border:1px solid var(--rule);border-radius:8px;background:var(--card)}
/* ★ Таблиця ширша за колонку тексту, і це навмисно.

   Колонка набору тут 704 px, бо на такій ширині зручно читати абзац. Пʼять
   стовпчиків у ті самі 704 px дають по 140 px на стовпчик: кожна клітинка
   ламається на чотири рядки, і рядок таблиці виростає до 136 px заввишки.
   Порівняння, заради якого сторінка й написана, у такому вигляді не
   читається взагалі.

   Тому на широкому екрані таблиця виходить за колонку симетрично в обидва
   боки. Нижче 1120 px місця для цього немає, і вона гортається вбік. */
@media(min-width:1120px){
  .tw{width:1040px;margin-left:calc((100% - 1040px) / 2)}
}
/* Підказка про прокрутку. Градієнт на краю тут не годиться: .tw сам є
   контейнером прокрутки, і абсолютний ::after поїхав би разом із вмістом,
   а маска гасила б текст останнього стовпчика назавжди. Рядок тексту
   чесніший і нічого не ховає. */
.tw-hint{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:-20px 0 30px}
@media(min-width:1120px){.tw-hint{display:none}}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
caption{text-align:left;font-size:13px;color:var(--ink-3);padding:14px 18px 0;caption-side:bottom;line-height:1.5}
th,td{text-align:left;padding:13px 18px;border-top:1px solid var(--rule);vertical-align:top;line-height:1.5}
thead th{border-top:none;background:var(--paper);font-size:12.5px;font-weight:700;letter-spacing:-.01em;position:sticky;top:0}
tbody th{font-weight:600;color:var(--ink);width:26%}
td{color:var(--ink-2)}
td.yes{color:var(--moss);font-weight:600}
td.no{color:var(--ink-3)}

/* картки */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:26px 0 30px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:22px 24px}
.card u{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--moss);text-decoration:none}
.card h3{font-size:16.5px;font-weight:700;margin:9px 0 6px;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0}

/* FAQ: розмітка та сама, що на головній, і та сама, що в JSON-LD */
.faq{margin:30px 0 0}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-size:16px;font-weight:600;letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-family:var(--mono);font-size:19px;font-weight:400;color:var(--ink-3)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--moss)}
.faq p{font-size:15px;color:var(--ink-2);line-height:1.7;padding:0 34px 20px 0;margin:0}
.faq p+p{padding-top:0;margin-top:-8px}

/* ★ Перелінковка внизу кожної сторінки. Без неї внутрішні сторінки
   лишаються глухими кутами: людина дочитала й повертається браузером
   назад, а пошуковик не бачить, що сторінки повʼязані між собою. */
.also{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--rule)}
.also h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin:0 0 16px}
.also ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.also li{margin:0}
.also a{display:block;border:1px solid var(--rule);border-radius:var(--r);padding:14px 18px;background:var(--card);font-size:15px;font-weight:600;transition:.15s}
.also a:hover{border-color:var(--ink-3)}
.also a span{display:block;font-weight:400;font-size:13.5px;color:var(--ink-2);margin-top:3px}

.cta{background:var(--ink);color:#fff;border-radius:10px;padding:52px 40px;text-align:center;margin:56px 0 0}
.cta h2{font-size:clamp(25px,3vw,36px);line-height:1.12;letter-spacing:-.03em;font-weight:800;margin-bottom:13px}
.cta p{color:#A8ADA8;font-size:16.5px;margin:0 auto 26px;max-width:30em;line-height:1.6}
.cta-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .btn{background:#fff;color:var(--ink)}
.cta .btn:hover{background:#EDEDE8}
.cta .btn-g{background:transparent;color:#fff;border-color:#3C423E}
.cta .btn-g:hover{background:#22262A;border-color:#5A605C}

footer{border-top:1px solid var(--rule);padding:36px 0 56px;margin-top:80px}
.ft{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.ft nav{gap:22px;font-size:14px;flex-wrap:wrap}
.mt{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

#todo-bar{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#7C1D1D;color:#fff;font-family:var(--mono);font-size:12.5px;line-height:1.5;padding:10px 16px calc(10px + var(--safe-b));text-align:center}

@media(max-width:940px){
  .hd{flex-wrap:wrap;height:auto;padding:11px 0 9px}
  header nav{order:3;width:100%;gap:20px;font-size:13.5px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header nav::-webkit-scrollbar{display:none}
  header nav a{white-space:nowrap}
  header nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .cards{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ph{padding:18px 0 30px;margin-bottom:34px}
  .prose h2{margin-top:42px}
  .cta{padding:40px 22px;margin-top:44px}
  footer{margin-top:56px;padding:28px 0 44px}
}
@media(max-width:520px){
  .w,.wn{padding:0 18px}
  .logo{font-size:15px}
  .hd-r{gap:10px}
  .btn{padding:0 14px;font-size:13.5px}
  .btn-lg{padding:0 20px;font-size:15px}
}
@media(pointer:coarse){
  .btn{height:44px}
  .btn-lg{height:50px}
  .logo,.lnk,header nav a,.ft nav a,.crumb a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{padding-top:20px;padding-bottom:20px}
  .faq summary::after{top:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}