/* support#F10499.W4 — посадочные под коммерческий спрос (чат-бот, сервисный центр, бесплатный
   helpdesk, шаблоны, сравнения). Надстройка над vs-common.css: те же токены --vs-*, свои только
   блоки, которых у страниц сравнения нет (карточки, шаги, «кому подходит», вопросы, статьи,
   файлы). Цвета — только токенами. */
:root{--vs-warn:#f59e0b;--vs-accent-soft:rgba(58,159,216,.12);--vs-focus:#7cc4ee}
.hero .lede{max-width:680px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:24px}
.cta-row .cta-sub{font-size:14px;color:var(--vs-muted)}
.cta-btn:focus-visible,.lang-sw button:focus-visible,.lp-link:focus-visible,.dl-card a:focus-visible{outline:2px solid var(--vs-focus);outline-offset:2px}
.capsule{background:var(--vs-card);border:1px solid var(--vs-border);border-left:3px solid var(--vs-accent);border-radius:var(--vs-radius);padding:20px 24px;margin:8px 0 32px}
.capsule .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vs-muted);margin-bottom:8px}
.capsule p{font-size:16px;line-height:1.6}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 32px}
.stat{background:var(--vs-card);border:1px solid var(--vs-border);border-radius:var(--vs-radius);padding:18px;text-align:center}
.stat .num{font-size:26px;font-weight:700}
.stat .cap{font-size:13px;color:var(--vs-muted);margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 32px}
.card{background:var(--vs-card);border:1px solid var(--vs-border);border-radius:var(--vs-radius);padding:20px}
.card h3{font-size:16px;margin-bottom:6px}
.card p{font-size:14px;line-height:1.6;color:var(--vs-muted)}
.card .tag{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--vs-accent);background:var(--vs-accent-soft);border-radius:20px;padding:2px 10px}
.steps{counter-reset:step;display:grid;gap:12px;margin:0 0 32px;list-style:none}
.steps li{counter-increment:step;position:relative;background:var(--vs-card);border:1px solid var(--vs-border);border-radius:var(--vs-radius);padding:16px 18px 16px 60px;font-size:15px}
.steps li::before{content:counter(step);position:absolute;left:18px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--vs-accent);color:var(--vs-bg);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.steps li strong{display:block;margin-bottom:2px}
.steps li span{color:var(--vs-muted);font-size:14px}
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:0 0 32px}
.fit .col{background:var(--vs-card);border:1px solid var(--vs-border);border-radius:var(--vs-radius);padding:20px}
.fit .col.yes{border-top:3px solid var(--vs-green)}
.fit .col.no{border-top:3px solid var(--vs-warn)}
.fit .col.alt{border-top:3px solid var(--vs-accent)}
.fit h3{font-size:16px;margin-bottom:10px}
.fit ul{list-style:none;display:grid;gap:8px}
.fit li{font-size:14px;line-height:1.55;padding-left:18px;position:relative;color:var(--vs-text)}
.fit li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--vs-muted)}
.fit .yes li::before{background:var(--vs-green)}
.fit .no li::before{background:var(--vs-warn)}
.fit .alt li::before{background:var(--vs-accent)}
.facts td:not(:first-child),.facts th:not(:first-child){text-align:left;width:auto}
.facts td{vertical-align:top;line-height:1.5}
.facts .src{font-size:12px;color:var(--vs-muted)}
.faq{display:grid;gap:8px;margin:0 0 32px}
.faq details{background:var(--vs-card);border:1px solid var(--vs-border);border-radius:10px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style-position:outside}
.faq details p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--vs-muted)}
.lp-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;margin:0 0 12px;list-style:none}
.lp-link{display:block;background:var(--vs-card);border:1px solid var(--vs-border);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--vs-text)}
.lp-link:hover{border-color:var(--vs-accent);text-decoration:none}
.lp-note{font-size:13px;color:var(--vs-muted);text-align:center;margin:0 0 32px}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 32px}
.dl-card{background:var(--vs-card);border:1px solid var(--vs-border);border-radius:var(--vs-radius);padding:20px;display:flex;flex-direction:column;gap:8px}
.dl-card h3{font-size:16px}
.dl-card p{font-size:14px;line-height:1.55;color:var(--vs-muted);flex:1}
.dl-card .fmt{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--vs-muted)}
.dl-card a{align-self:flex-start;background:var(--vs-accent);color:var(--vs-bg);font-weight:600;font-size:14px;padding:10px 18px;border-radius:8px}
.dl-card a:hover{text-decoration:none;opacity:.9}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 40px}
.chips a{background:var(--vs-card);border:1px solid var(--vs-border);padding:8px 16px;border-radius:8px;font-size:13px;color:var(--vs-text)}
.chips a:hover{border-color:var(--vs-accent);text-decoration:none}
.upd{font-size:12px;color:var(--vs-muted);text-align:center;margin:-40px 0 40px}
@media(max-width:600px){.steps li{padding-left:52px}.steps li::before{left:14px}.capsule{padding:16px}.card,.fit .col,.dl-card{padding:16px}}
/* support#F10499.W4 (разбор): на телефоне таблица фактов — карточками, без горизонтальной прокрутки.
   Подпись колонки — data-label ячейки (названия продуктов, от языка не зависят). */
@media(max-width:600px){
.table-wrap:has(> .facts[data-cards]){overflow:visible}
.facts[data-cards] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facts[data-cards],.facts[data-cards] tbody,.facts[data-cards] tr,.facts[data-cards] td{display:block}
.facts[data-cards] td:not(:first-child){width:auto}
.facts[data-cards] tr{border-bottom:1px solid var(--vs-border);padding:4px 0 8px}
.facts[data-cards] tr:last-child{border-bottom:none}
.facts[data-cards] td{border-bottom:none;padding:6px 14px}
.facts[data-cards] td:first-child{font-weight:600;padding-top:12px}
.facts[data-cards] td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--vs-muted);margin-bottom:2px}
}