/* ============================================================
   compare — "Galvor is a good fit if you need…"
   prefix: cm-   (owner: agent E)
   One table, five columns at once (Galvor + 4 alternatives).
   Green check / red cross / grey dash, nothing else decorative.
   ============================================================ */

.cm{
  position:relative;
  z-index:2;
  background:#f7f6fa;
  padding-block:clamp(52px,6.4vw,84px);
  color:#24202d;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  --cm-ease:cubic-bezier(.16,1,.3,1);
}
/* the root also carries the legacy .compare class so the coordinator can drop this
   fragment straight in; these two rules neutralise decode.css's old .compare styles
   (#fafafa ground + radial glow) if that stylesheet is still loaded. */
.cm.compare{background:#f7f6fa;padding-block:clamp(52px,6.4vw,84px)}
.cm.compare::before{content:none}

.cm-inner{
  width:min(1060px,100% - 2*clamp(20px,5vw,56px));
  margin-inline:auto;
}

.cm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- head ---------- */
.cm-head{max-width:680px;margin:0 0 clamp(22px,2.6vw,32px)}
.cm-eyebrow{
  margin:0 0 12px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:#a296b0;
}
.cm-h{
  margin:0;
  font-size:clamp(26px,2.9vw,38px);
  font-weight:650;letter-spacing:-.04em;line-height:1.05;
  color:#24202d;text-wrap:balance;
}
.cm-sub{
  margin:12px 0 0;
  font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;
  color:#91889d;
}

/* ---------- the table: one card, five value columns at once ---------- */
.cm-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 22px 60px -25px #24113840;
}
.cm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px}

.cm-table{
  --cm-cap-w:210px;
  --cm-us-w:84px;
  --cm-alt-w:150px;
  width:100%;
  min-width:calc(var(--cm-cap-w) + var(--cm-us-w) + 4*var(--cm-alt-w));
  border-collapse:collapse;
  table-layout:fixed;
}
.cm-col-cap{width:var(--cm-cap-w)}
.cm-col-us{width:var(--cm-us-w)}
.cm-col-alt{width:var(--cm-alt-w)}

/* ---------- header row ---------- */
.cm-th{
  padding:14px 10px 12px;
  text-align:center;
  font-size:12.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25;
  color:#6d6479;
  border-bottom:1px solid #efeaf5;
}
.cm-th-cap{text-align:left}
.cm-th-us{
  display:flex;align-items:center;justify-content:center;gap:7px;
  color:#24202d;
  background:#f6f2fb;
}
.cm-mark{
  width:18px;height:18px;flex:none;border-radius:5px;
  background:#efe8ff;overflow:hidden;display:grid;place-items:center;
}
.cm-mark img{width:18px;height:18px;display:block;object-fit:cover}

/* ---------- group dividers: span the full table ---------- */
.cm-grp{
  text-align:left;
  padding:16px 16px 8px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7c3aed;
  background:#fff;
  position:sticky;left:0;
}
.cm-grp span{font-weight:400;color:#a296b0;text-transform:none;letter-spacing:0}
.cm-grp span::before{content:"·";margin:0 7px;color:#c9c0d6;font-family:inherit}
.cm-grp-1{padding-top:14px}

/* ---------- capability column + value cells ---------- */
.cm-cap{
  text-align:left;
  padding:9px 14px;
  font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.3;
  color:#3f3752;
  background:#fff;
  border-top:1px solid #efeaf5;
}
.cm-cell{
  padding:9px 8px;
  text-align:center;
  font-size:12.5px;font-weight:500;letter-spacing:-.005em;line-height:1.25;
  color:#5a5169;
  border-top:1px solid #efeaf5;
}
.cm-grp-row + tr .cm-cap,.cm-grp-row + tr .cm-cell{border-top:0}

/* sticky first two columns: capability name, then Galvor */
.cm-cap,.cm-th-cap{position:sticky;left:0;z-index:2}
.cm-us{position:sticky;left:var(--cm-cap-w);z-index:2;background:#f6f2fb}
.cm-th-us{position:sticky;left:var(--cm-cap-w);z-index:3}

/* one visual device: check, cross, or a quiet dash */
.cm-ic{display:inline-block;width:13px;margin-right:5px;text-align:center;font-size:12.5px;line-height:1;vertical-align:-1px}
.cm-yes .cm-ic::before{content:"\2713";color:#1e9678;font-weight:700}
.cm-no .cm-ic::before{content:"\2715";color:#d9435e;font-weight:700}
.cm-cell:not(.cm-yes):not(.cm-no) .cm-ic::before{content:"\2013";color:#a296b0;font-weight:600}
.cm-cell:not(.cm-yes):not(.cm-no) .cm-txt{color:#7b7289}
.cm-cell.cm-us .cm-ic{margin-right:0}

/* ---------- close ---------- */
.cm-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  margin-top:clamp(24px,2.8vw,34px);
}
.cm-note{
  margin:0;max-width:560px;
  font-size:13.5px;line-height:1.55;color:#91889d;
}
.cm-note b{font-weight:600;color:#4f4760}
.cm-cta{
  flex:none;
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 7px 7px 18px;border-radius:999px;
  background:#7c3aed;color:#fff;
  font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 14px 34px -14px #7c3aed80;
  transition:transform .3s var(--cm-ease),box-shadow .3s var(--cm-ease);
}
.cm-cta:focus-visible{outline:2px solid #7c3aed;outline-offset:3px}
.cm-cta-ic{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#ffffff22;box-shadow:inset 0 1px 0 #ffffff33;
  transition:transform .35s var(--cm-ease),background .3s;
}
.cm-cta:hover{transform:translateY(-1px);box-shadow:0 20px 40px -16px #7c3aed99}
.cm-cta:hover .cm-cta-ic{transform:translate(3px,-1px);background:#ffffff33}
.cm-cta:active{transform:scale(.98)}

/* ---------- reveal ---------- */
.cm-head,.cm-card,.cm-foot{
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .7s var(--cm-ease);
}
.cm.cm-in .cm-head,.cm.cm-in .cm-card,.cm.cm-in .cm-foot{
  opacity:1;transform:none;
}
.cm.cm-in .cm-card{transition-delay:.05s}
.cm.cm-in .cm-foot{transition-delay:.1s}

/* ---------- laptop ---------- */
@media(max-width:900px){
  .cm-table{--cm-cap-w:180px;--cm-us-w:74px;--cm-alt-w:128px}
}

/* ---------- phone: horizontal scroll, capability + Galvor pinned ---------- */
@media(max-width:640px){
  .cm-table{--cm-cap-w:132px;--cm-us-w:54px;--cm-alt-w:112px}
  .cm-th{padding:11px 10px 10px;font-size:11.5px}
  .cm-grp{padding:13px 12px 7px;font-size:9.5px}
  .cm-grp-1{padding-top:11px}
  .cm-cap{padding:8px 12px;font-size:12px}
  .cm-cell{padding:8px 6px;font-size:11.5px}
}

@media(prefers-reduced-motion:reduce){
  .cm-head,.cm-card,.cm-foot{opacity:1;transform:none;transition:none}
  .cm-cta,.cm-cta-ic{transition:none}
}