/* /compare/ (11.11.2026). Классы cp-*; герой и светлая панель - assets/social.css (sn-*), группа со строками - assets/drawn.css.
   Движение - провод между шагами героя, только под html.sn-anim и .sn-in. */

/* ---------- герой: три вопроса столбиком ---------- */
.cp-hero{display:flex;align-items:center;justify-content:center;padding:64px 28px 60px}
.cp-path{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:440px}
.cp-step{position:relative;display:flex;align-items:center;gap:18px;padding:18px 54px 18px 20px;border-radius:18px}
.cp-step .dr-ico{width:54px;height:45px}
.cp-step>span{display:grid;gap:4px;min-width:0}
.cp-step b{font-size:16.5px;line-height:1.25;font-weight:700;letter-spacing:-.012em;color:#0b0b0d}
.cp-step small{font-size:13.5px;line-height:1.45;color:var(--text-2)}
.cp-step em{position:absolute;top:50%;right:18px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:#f1f1ee;font-style:normal;font-size:13px;font-weight:700;color:#55555d}
.cp-wire{--hh:24px;position:relative;display:block;width:2px;height:var(--hh);margin:0 auto;border-radius:2px;background:linear-gradient(180deg,#8fa695 55%,transparent 55%) 0 0/2px 7px repeat-y}
.cp-wire b{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.2);opacity:0}
@keyframes cp-wire{0%{transform:none;opacity:0}8%{opacity:1}30%{transform:translateY(var(--hh));opacity:1}36%,100%{transform:translateY(var(--hh));opacity:0}}
.sn-anim .sn-in .cp-wire b{animation:cp-wire 5s calc(var(--k)*1.6s + .6s) infinite both}

/* ---------- плитки сервисов ---------- */
.cp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;max-width:1250px;margin:0 auto}
.cp-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:26px 24px 22px;border:1px solid var(--border);border-radius:20px;background:#fff;text-decoration:none;color:inherit;transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.cp-card:hover{border-color:#cfcfc9;box-shadow:0 14px 30px -18px rgba(23,23,29,.28);transform:translateY(-2px)}
.cp-card small{margin-bottom:6px;font-size:13.5px;line-height:1.2;color:var(--text-3)}
.cp-card b{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--text);overflow-wrap:anywhere}
.cp-more{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:13.5px;color:var(--text-3);transition:color .2s}
.cp-more svg{width:14px;height:14px;transition:transform .2s}
.cp-card:hover .cp-more{color:#15803d}
.cp-card:hover .cp-more svg{transform:translateX(3px)}
.cp-marks{margin-top:clamp(24px,3vw,36px);font-size:13px;line-height:1.5;color:var(--text-3);text-align:center}
@media (max-width:1180px){.cp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.cp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cp-card{padding:20px 18px 16px}.cp-card b{font-size:18px}.cp-more{margin-top:16px}}
@media (max-width:560px){.cp-hero{padding:52px 14px 20px}.cp-step{gap:14px;padding:16px 46px 16px 16px}.cp-step .dr-ico{width:46px;height:38px}}