/* SellerVine vs typical agency vs in-house: animated comparison table (homepage and service pages) */
.cmp-sec{--ink:#0b1220;--muted:#64748b;--line:#e2e8f0;--pos:#16a34a;--blue:#2563eb;--grad:linear-gradient(135deg,#3b82f6 0%,#22d3ee 50%,#7c3aed 100%);--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  padding:64px 0;background:linear-gradient(180deg,#f7f8fa,#fff);font-family:Inter,system-ui,sans-serif;color:#334155}
@media (max-width:640px){.cmp-sec{padding:44px 0}}
.cmp-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.cmp-wrap{padding:0 16px}}
.cmp-head{text-align:center;max-width:780px;margin:0 auto 32px}
.cmp-eyebrow{display:inline-block;font:600 12px var(--font-mono,monospace);letter-spacing:.15em;text-transform:uppercase;color:#3b82f6;margin-bottom:12px}
.cmp-head h2{font-family:var(--font-heading,inherit);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-wrap:balance}
.cmp-head p{font-size:1.05rem;color:var(--muted);line-height:1.7;margin:0}
.cmp{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 2px 6px rgba(15,23,42,.04),0 28px 56px -20px rgba(30,41,90,.22);overflow:hidden}
.cmp-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14.5px}
.cmp-t col.c-l{width:22%}.cmp-t col.c-sv{width:30%}
.cmp-t th,.cmp-t td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.cmp-t thead th{vertical-align:bottom;padding-top:44px;border-bottom:1px solid var(--line);background:#fbfcfe}
.cmp-t thead th b{display:block;font:700 1.05rem var(--font-heading,inherit);color:var(--ink)}
.cmp-t thead th small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.cmp-t thead th.sv{background:linear-gradient(180deg,#eff6ff,#fbfcfe);position:relative}
.cmp-badge{position:absolute;top:14px;left:18px;font:700 12px var(--font-mono,monospace);letter-spacing:.04em;color:#fff;background:var(--grad);border-radius:999px;padding:3px 10px;box-shadow:0 6px 14px -6px rgba(37,99,235,.6)}
.cmp-t tbody th{font-weight:700;color:var(--ink);font-size:14.5px}
.cmp-t td{color:#475569}
.cmp-t td.sv{color:var(--ink);font-weight:600;background:rgba(59,130,246,.045);position:relative}
.cmp-t tbody tr:last-child th,.cmp-t tbody tr:last-child td{border-bottom:1px solid var(--line)}
.cmp-cell{display:flex;gap:10px;align-items:flex-start}
.ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:-1px}
.ic svg{width:13px;height:13px}
.ic.y{background:var(--pos);color:#fff}.ic.p{background:#fef3c7;color:#b45309}.ic.n{background:#fee2e2;color:#dc2626}
.cmp-t tfoot th,.cmp-t tfoot td{border-bottom:0;padding:18px;background:#fbfcfe;vertical-align:middle}
.cmp-t tfoot th{font-weight:700;color:var(--ink)}
.cmp-score{font:700 1.4rem var(--font-mono,monospace);color:var(--ink)}
.cmp-score small{font-size:.85rem;color:var(--muted);font-weight:600}
.cmp-meter{display:block;height:8px;border-radius:8px;background:#eef2f7;margin-top:8px;overflow:hidden}
.cmp-meter i{display:block;height:100%;width:100%;border-radius:8px;background:#cbd5e1;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.cmp-t tfoot td.sv .cmp-meter i{background:var(--grad)}
.cmp.on .cmp-meter i{transform:scaleX(var(--v))}
.cmp-t tfoot td.sv{background:linear-gradient(180deg,rgba(59,130,246,.06),rgba(124,58,237,.06))}
/* motion */
.cmp-t tbody tr{transition:background-color 250ms}
.cmp-t tbody tr:hover{background:#f8fafc}
.cmp-t tbody tr:hover td.sv{background:rgba(59,130,246,.09)}
.js-cmp .cmp-t tbody tr{opacity:0;transform:translateX(-18px);transition:opacity 500ms var(--ease),transform 650ms var(--spring),background-color 250ms;transition-delay:calc(var(--r)*110ms)}
.js-cmp .cmp.on .cmp-t tbody tr{opacity:1;transform:none}
.js-cmp .ic{transform:scale(0);transition:transform 450ms var(--spring);transition-delay:calc(var(--r)*110ms + 300ms)}
.js-cmp .cmp.on .ic{transform:scale(1)}
.cmp-glow{position:absolute;top:0;bottom:0;pointer-events:none;border-radius:0;box-shadow:inset 0 0 0 2px rgba(59,130,246,.55);background:linear-gradient(180deg,rgba(59,130,246,.06),rgba(124,58,237,.04));opacity:0;transition:opacity 600ms var(--ease) .3s}
.cmp.on .cmp-glow{opacity:1}
.cmp-scan{position:absolute;left:0;right:0;height:2px;top:0;background:linear-gradient(90deg,transparent,#22d3ee,#7c3aed,transparent);opacity:0;pointer-events:none}
.cmp.on .cmp-scan{animation:cmp-scan 2.2s var(--ease) .2s 1 forwards}
@keyframes cmp-scan{0%{opacity:0;top:0}10%{opacity:1}90%{opacity:1}100%{opacity:0;top:100%}}
.cmp-note{font-size:13px;color:var(--muted);text-align:center;margin:16px 0 0}
.cmp-ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.cmp-ctas a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 15px Inter,sans-serif;text-decoration:none;transition:transform 150ms,box-shadow 220ms,border-color 220ms}
.cmp-ctas a:active{transform:scale(.98)}
.cmp-ctas .pri{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(37,99,235,.6)}
.cmp-ctas .sec{background:#fff;color:var(--ink);border:1px solid var(--line)}.cmp-ctas .sec:hover{border-color:#3b82f6}
.cmp-ctas a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* phones: each row becomes a card */
@media (max-width:760px){
  .cmp{border-radius:18px}
  .cmp-t,.cmp-t tbody,.cmp-t tr,.cmp-t th,.cmp-t td,.cmp-t tfoot{display:block;width:auto}
  .cmp-t colgroup,.cmp-t thead{display:none}
  .cmp-t tbody tr{border-bottom:1px solid var(--line);padding:12px 14px}
  .cmp-t tbody th{border:0;padding:0 0 8px;font-size:15px}
  .cmp-t td{border:0;padding:8px 10px;border-radius:10px;margin-top:4px}
  .cmp-t td::before{content:attr(data-col);display:block;font:600 12px var(--font-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .cmp-t td.sv{background:rgba(59,130,246,.07);box-shadow:inset 0 0 0 1.5px rgba(59,130,246,.35)}
  .cmp-t td.sv::before{color:var(--blue)}
  .cmp-t tfoot tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:14px}
  .cmp-t tfoot th{grid-column:1 / -1;padding:0;background:none}
  .cmp-t tfoot td{padding:10px;border-radius:12px;background:#f8fafc}
  .cmp-score{font-size:1.1rem}
  .cmp-glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js-cmp .cmp-t tbody tr,.js-cmp .ic{opacity:1;transform:none;transition:none}
  .cmp-meter i{transform:scaleX(var(--v));transition:none}
  .cmp-scan{display:none}
}

@media (min-width:1536px){.cmp-wrap{max-width:var(--container-7xl,90rem)}}
@media (min-width:1920px){.cmp-t{font-size:15.5px}}