/* CatchaCRM — comparison pages (/compare/*).
   Same tokens as style.css. Loaded only by the 9 compare pages via the
   `stylesheets:` front-matter hook, so nothing else pays for it. */

/* ---------- hero ---------- */
.cmp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cmp-cta-mid{justify-content:center;margin-top:26px}
.cmp-note{font-size:13.5px;color:var(--muted);margin-top:6px}
/* Only shown where the matrix has become a horizontal scroller (<=900px). */
.cmp-scroll-hint{display:none;font-size:12.5px;color:var(--muted);margin-top:10px}

/* ---------- quick answer strip ---------- */
.cmp-quick{padding:56px 0 8px}
.cmp-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.cmp-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
  box-shadow:var(--shadow-sm);
}
.cmp-card.is-us{border-color:rgba(59,130,246,.45);background:linear-gradient(180deg,#fff,#f5f9ff)}
.cmp-card h3{font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.cmp-card .cmp-who{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ghost);margin-bottom:10px}
.cmp-card.is-us .cmp-who{color:var(--blue-ink)}
.cmp-facts{margin-top:16px}
.cmp-facts>div{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.cmp-facts dt{flex:none;width:112px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cmp-facts dd{font-size:14px;color:var(--ink-soft);font-weight:500;line-height:1.5}

/* ---------- capability table ---------- */
.cmp-matrix{padding:64px 0 8px}
.cmp-table-wrap{margin-top:28px;border:1px solid var(--line);border-radius:14px;background:#fff}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.cmp-table th,.cmp-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{
  position:sticky;top:68px;z-index:2;background:var(--bg);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.cmp-table thead th:first-child{border-top-left-radius:14px}
.cmp-table thead th:last-child{border-top-right-radius:14px}
.cmp-table thead th.is-us{color:var(--blue-ink)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody th{font-weight:600;color:var(--ink);width:26%}
.cmp-table td{width:37%}
.cmp-table td.is-us{background:rgba(59,130,246,.04)}
.v{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--ink)}
.v::before{content:"";width:8px;height:8px;border-radius:100px;flex:none;background:var(--ghost)}
.v.yes::before{background:#22c55e}
.v.partial::before{background:#f59e0b}
.v.no::before{background:#ef4444}
.v.unknown{color:var(--muted)}
.v.unknown::before{background:var(--line);box-shadow:inset 0 0 0 1px var(--ghost)}
.cmp-table .cell-note{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5;font-weight:400}

/* ---------- fair-play columns ---------- */
.cmp-fair{padding:64px 0 8px}
.cmp-fair-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.cmp-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.cmp-panel.is-us{border-color:rgba(59,130,246,.45);background:linear-gradient(180deg,#fff,#f5f9ff)}
.cmp-panel h2{font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:16px}
.cmp-panel ul{list-style:none;display:grid;gap:11px}
.cmp-panel li{font-size:14.5px;color:var(--ink-soft);line-height:1.6;padding-left:24px;position:relative;font-weight:500}
.cmp-panel li::before{
  content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:100px;background:var(--ghost);
}
.cmp-panel.is-us li::before{background:var(--blue)}

/* ---------- light CTA band ---------- */
.cta-light{
  margin-top:60px;padding:74px 0;text-align:center;
  background:linear-gradient(180deg,#fff,#eef4ff);
  border-top:1px solid var(--line);
}
.cta-light h2{font-size:clamp(26px,3.4vw,38px);max-width:24ch;margin:0 auto}
.cta-light p{color:var(--ink-soft);font-size:16px;margin:16px auto 0;max-width:56ch}

/* ---------- sources ---------- */
.cmp-sources{padding:52px 0 8px;font-size:13px;color:var(--muted)}
.cmp-sources h2{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cmp-sources ul{list-style:none;display:grid;gap:6px;margin-top:8px}
.cmp-sources li{line-height:1.6;word-break:break-word}
.cmp-sources a{color:var(--blue-ink);font-weight:600}
.cmp-sources a:hover{text-decoration:underline}

/* ---------- index page ---------- */
.cmp-index{padding-bottom:8px}
.cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.cmp-tile{
  display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.cmp-tile:hover{border-color:var(--blue);transform:translate3d(0,-3px,0);box-shadow:var(--shadow-sm)}
.cmp-tile b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.cmp-tile span{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .cmp-quick-grid,.cmp-fair-grid{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  /* Below this width the matrix scrolls inside its own container rather than
     pushing the page wide. That makes the wrapper a scroll container, so the
     sticky header is inert here — it only does work on the wide layout. */
  .cmp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-table{min-width:660px}
  .cmp-table thead th{position:static}
  .cmp-scroll-hint{display:block}
}
@media(max-width:720px){
  .cmp-quick,.cmp-matrix,.cmp-fair{padding:48px 0 8px}
  .cmp-grid{grid-template-columns:1fr}
  .cmp-facts dt{width:96px}
  .cmp-cta .btn{flex:1 1 100%;text-align:center}
  .cta-light{padding:56px 0}
}

/* Table caption is for screen readers only; the <h2> above it carries the
   visible heading. */
.cmp-table caption.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}