/* ============================================================
   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:transparent;  /* the site ground is the fixed .gv-aurora field */
  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:transparent;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{
  color:#24202d;
  background:#f6f2fb;
}
/* the flex goes on the inner span — see the note in compare.html: a
   display:flex <th> is not a table cell to Safari, and the header vanished */
.cm-th-us-in{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.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;
}
/* RD (phone): the group labels were smearing across the table as it scrolled
   sideways — "ads", "keeps", "es" showing at the left edge. The cell was
   position:sticky, but a cell that spans all six columns IS the full row
   width: it has no room to shift inside its containing block, so sticky did
   nothing and the label scrolled off with the table. The sticky goes on the
   text instead: an inline-block inside the wide cell has the whole cell to
   move in, so it holds at the scroll container's left edge. */
/* left = the capability column's own padding at each width, so a stuck label
   lines up with the row names under it */
.cm-grp-in{position:sticky;left:14px;display:inline-block;padding-right:12px;background:#fff}
.cm-grp-in > span{font-weight:400;color:#a296b0;text-transform:none;letter-spacing:0}
/* the inner span only: the sticky wrapper is a span too, and matched */
.cm-grp-in > 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 */
/* RD (phone): "still overflowing" — the scrolling column headers ("ools",
   "Reporting") were showing THROUGH the pinned corner. .cm-cap paints white,
   but the header cell above it (.cm-th-cap, visually empty) never had a
   background, so it stuck in place as a transparent window onto whatever
   header was scrolling under it. It is opaque now, and one z-index above the
   pinned Galvor column so its right edge covers rather than is covered. */
.cm-cap,.cm-th-cap{position:sticky;left:0;z-index:2}
.cm-th-cap{background:#fff;z-index:4}
.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-in{left:12px}
  /* NO scroll-snap here. It was added so a swipe would land columns cleanly
     against the pinned pair; on a real iPhone, mandatory snap plus sticky
     columns left Safari with no valid snap position and the table could not
     be scrolled at all. A column resting half under the Galvor cell is a far
     smaller problem than a table that does not move. */
  .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}
}

/* ===========================================================================
   Sized like a section of this site, not a widget dropped into it.

   .cm-inner was capped at 1060px while every other section runs to 1500px, and
   the type scale was a step below theirs (.cm-h maxed at 38px against the 54px
   used by results and compare's neighbours). On a wide screen that combination
   is what made the table read as something embedded rather than part of the
   page.

   Scoped to >=901px so the existing narrow overrides below still own the
   column widths on tablet and phone, where a wider table would only force a
   horizontal scroll.
   =========================================================================== */

@media (min-width:901px){

  .cm .cm-inner{width:min(1500px,100% - 2*clamp(20px,5vw,96px))}

  /* head: same scale as the other section headings, still hard left */
  .cm .cm-head{max-width:860px}
  .cm .cm-eyebrow{font-size:11px}
  .cm .cm-h{font-size:clamp(30px,3.5vw,54px)}
  .cm .cm-sub{font-size:clamp(15px,1.15vw,18px)}

  /* the table fills the width, and the rows breathe with it */
  .cm .cm-table{
    --cm-cap-w:clamp(240px,21vw,360px);
    --cm-us-w:clamp(112px,9vw,152px);
    --cm-alt-w:clamp(150px,12.5vw,208px);
  }

  .cm .cm-card,.cm .cm-scroll{border-radius:24px}

  .cm .cm-th{padding:20px 14px 18px;font-size:clamp(13px,1.02vw,15px)}
  .cm .cm-mark{width:22px;height:22px}
  .cm .cm-mark img{width:22px;height:22px}

  .cm .cm-grp{padding:24px 22px 10px;font-size:11px}

  .cm .cm-cap{padding:15px 22px;font-size:clamp(14px,1.08vw,16.5px)}
  .cm .cm-cell{padding:15px 12px;font-size:clamp(13px,1.02vw,15px)}
  .cm .cm-ic{width:15px;margin-right:7px;font-size:14px}

  .cm .cm-note{max-width:640px;font-size:clamp(13.5px,1vw,15px)}
  .cm .cm-cta{font-size:15px}
}

/* ===========================================================================
   RD round 7, notes 16 + "same this is also not visible in a single screen".

   Two things: the head is centred like every other section head and set at the
   shared --gv-h2, and the whole section is sized to land inside one viewport.

   The table was the reason it did not. At the previous row padding the nine
   rows, three group rules and the header came to roughly 600px, which with the
   head and the foot put the CTA a scroll below the fold — so the one screen
   that is supposed to answer "is this us?" never held the answer. The rows now
   carry about 10px of vertical padding instead of 15 and the type steps down
   about a point; nothing is cut, it is the same table, tighter.

   Scoped to >=901px: on tablet and phone the table already scrolls sideways
   inside its card and the vertical budget is not the constraint.
   =========================================================================== */
.cm-head{max-width:820px;margin-inline:auto;text-align:center}
.cm-eyebrow{font-size:var(--gv-eyebrow);letter-spacing:.16em;font-weight:600;color:#8b7f9b}
.cm-h{font-size:var(--gv-h2);font-weight:700}
.cm-sub{margin-inline:auto;max-width:52ch}

@media (min-width:901px){
  .cm{padding-block:clamp(44px,5vw,68px)}
  .cm.compare{padding-block:clamp(44px,5vw,68px)}

  .cm .cm-head{max-width:860px;margin-inline:auto;text-align:center;margin-bottom:clamp(20px,2.2vw,28px)}
  .cm .cm-eyebrow{font-size:var(--gv-eyebrow)}
  .cm .cm-h{font-size:var(--gv-h2)}
  .cm .cm-sub{font-size:clamp(15px,1.15vw,18px);margin-inline:auto}

  /* the table, tightened to fit the fold */
  .cm .cm-th{padding:13px 14px 12px;font-size:clamp(12.5px,.98vw,14.5px)}
  .cm .cm-grp{padding:15px 22px 6px;font-size:11px}
  .cm .cm-grp-in{left:22px}
  .cm .cm-cap{padding:10px 22px;font-size:clamp(13.5px,1.02vw,15.5px)}
  .cm .cm-cell{padding:10px 12px;font-size:clamp(12.5px,.96vw,14.5px)}
}