/* ═══════════════════════════════════════════════════════════════════════════
   COMPARISONS — "what it costs to leave, and when not to".
   Loaded after landing-desk.css, scoped to body.cmp-desk.

   Every comparison page on the internet has the same shape: a tick table
   where the competitor mysteriously fails at everything. Nobody believes it,
   including the person who lands on it having already decided.

   So these are built the other way round. The first thing is the money,
   because that is what the reader came for. The second is the case for NOT
   switching, stated plainly — a page that admits when the other tool is the
   right answer is the only kind worth reading. The tick table survives, but
   as evidence at the bottom rather than as the argument.
   ═══════════════════════════════════════════════════════════════════════════ */

body.cmp-desk { --cm: #6366f1; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
body.cmp-desk .cm-hero { padding: 52px 0 0; text-align: center; }
body.cmp-desk h1.cm-h1 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--dk-ink);
  margin: 24px 0 0;
}
body.cmp-desk .cm-sub {
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--dk-mute);
  max-width: 640px;
}

/* the honest one-line answer, before anything else */
body.cmp-desk .cm-verdict {
  margin: 34px auto 0;
  max-width: 760px;
  text-align: left;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--dk-line);
  border-left: 3px solid var(--cm);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.cmp-desk .cm-verdict b {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm);
  margin-bottom: 9px;
  font-weight: 400;
}
body.cmp-desk .cm-verdict p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--dk-mute); }

/* ── the ledger: the signature ────────────────────────────────────────────── */
body.cmp-desk .cm-ledger {
  margin-top: 44px;
  border-radius: 20px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: left;
}
body.cmp-desk .cm-lhead {
  padding: 18px 26px;
  border-bottom: 1px solid var(--dk-line);
  background: rgba(6, 9, 15, 0.4);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dk-dim);
}
body.cmp-desk .cm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
body.cmp-desk .cm-col { padding: 26px 28px 28px; }
body.cmp-desk .cm-col + .cm-col { border-left: 1px solid var(--dk-line); }
body.cmp-desk .cm-col h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 4px;
}
body.cmp-desk .cm-col .who {
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-dim);
  display: block;
  margin-bottom: 16px;
}
body.cmp-desk .cm-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
  color: var(--dk-mute);
}
body.cmp-desk .cm-line b {
  font-family: var(--font-family-mono);
  font-weight: 400;
  color: var(--dk-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.cmp-desk .cm-line.zero b { color: #4ade80; }
body.cmp-desk .cm-tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.cmp-desk .cm-tot span { font-size: 13.5px; color: var(--dk-ink); font-weight: 600; }
body.cmp-desk .cm-tot b {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--dk-ink);
  font-variant-numeric: tabular-nums;
}
body.cmp-desk .cm-col.ours .cm-tot b { color: #4ade80; }

/* the difference, stated once, in words */
body.cmp-desk .cm-diff {
  padding: 20px 26px;
  border-top: 1px solid var(--dk-line);
  background: rgba(6, 9, 15, 0.38);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
body.cmp-desk .cm-diff .k {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-mute);
}
body.cmp-desk .cm-diff .v {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
body.cmp-desk .cm-note {
  padding: 15px 26px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dk-dim);
}

/* ── when to stay put ─────────────────────────────────────────────────────── */
body.cmp-desk .cm-stay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 38px;
}
body.cmp-desk .cm-stay > div {
  padding: 22px 24px;
  border-radius: 15px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.035);
}
body.cmp-desk .cm-stay h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--dk-ink);
  margin: 0 0 8px;
}
body.cmp-desk .cm-stay p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--dk-mute); }

/* ── what leaves the stack ────────────────────────────────────────────────── */
body.cmp-desk .cm-drops { margin-top: 38px; display: grid; gap: 14px; }
body.cmp-desk .cm-drop {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  border-radius: 15px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}
body.cmp-desk .cm-drop .ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(248, 113, 113, 0.14);
}
body.cmp-desk .cm-drop .ic svg { width: 16px; height: 16px; stroke: #f87171; fill: none; stroke-width: 2; }
body.cmp-desk .cm-drop h3 { font-size: 16px; font-weight: 600; color: var(--dk-ink); margin: 2px 0 7px; }
body.cmp-desk .cm-drop p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--dk-mute); }
body.cmp-desk .cm-drop .fix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #4ade80 26%, transparent);
  background: rgba(74, 222, 128, 0.08);
  color: #86efac;
  font-size: 13px;
}
body.cmp-desk .cm-drop .fix svg { width: 14px; height: 14px; stroke: #4ade80; fill: none; stroke-width: 2.6; flex: none; }

/* ── the evidence table ───────────────────────────────────────────────────── */
body.cmp-desk .cm-tablewrap {
  margin-top: 36px;
  border-radius: 16px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-x: auto;
}
body.cmp-desk table.cm-table { width: 100%; border-collapse: collapse; min-width: 620px; }
body.cmp-desk .cm-table th,
body.cmp-desk .cm-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  color: var(--dk-mute);
  vertical-align: top;
}
body.cmp-desk .cm-table thead th {
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-dim);
  font-weight: 400;
  background: rgba(255, 255, 255, 0.03);
}
body.cmp-desk .cm-table td:first-child { color: var(--dk-ink); }
body.cmp-desk .cm-table .sub { display: block; font-size: 12.5px; color: var(--dk-dim); margin-top: 3px; }
body.cmp-desk .cm-table tbody tr:last-child td { border-bottom: 0; }
body.cmp-desk .cm-table tbody tr:hover td { background: rgba(255, 255, 255, 0.028); }
body.cmp-desk .cm-table td.ours {
  background: color-mix(in srgb, var(--cm) 11%, transparent);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--cm) 36%, transparent),
              inset -1px 0 0 color-mix(in srgb, var(--cm) 36%, transparent);
}
body.cmp-desk .cm-y { color: #4ade80; }
body.cmp-desk .cm-n { color: #f87171; }
body.cmp-desk .cm-p { color: #fbbf24; }

@media (max-width: 780px) {
  body.cmp-desk .cm-cols { grid-template-columns: 1fr; }
  body.cmp-desk .cm-col + .cm-col { border-left: 0; border-top: 1px solid var(--dk-line); }
  body.cmp-desk .cm-drop { grid-template-columns: 1fr; }
}

/* domain separator inside the evidence table */
body.cmp-desk .cm-table tr.dom td {
  background: rgba(6, 9, 15, 0.55);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm);
  padding-top: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.cmp-desk .cm-verdict strong,
body.cmp-desk .dk-lede strong { color: var(--dk-ink); font-weight: 600; }
body.cmp-desk .cm-note strong { color: var(--dk-mute); font-weight: 600; }

/* ── the things a ledger cannot do ────────────────────────────────────────────
   Not "we have more features" — a different category of thing. Each of these
   is structurally out of reach for a product whose scope is the books, which
   is why it gets its own section rather than another row in the table. */
body.cmp-desk .cm-beyond {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 38px;
}
body.cmp-desk .cm-beyond > div {
  position: relative;
  padding: 24px 26px 26px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--cm) 30%, transparent);
  background: linear-gradient(158deg, color-mix(in srgb, var(--cm) 13%, transparent), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  overflow: hidden;
}
body.cmp-desk .cm-beyond .n {
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cm);
  display: block;
  margin-bottom: 12px;
}
body.cmp-desk .cm-beyond h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 9px;
}
body.cmp-desk .cm-beyond p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--dk-mute); }
/* the measured fact that makes the claim checkable */
body.cmp-desk .cm-beyond .fact {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dk-ink);
}
body.cmp-desk .cm-beyond .fact em { color: var(--dk-dim); font-style: normal; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE HUB — scoped to body.cmphub-desk.
   Thirty-four alternatives in one list is not a page, it is a directory. The
   hub's job is to make the shape of the argument visible: these thirty-four
   products are eight categories, and eight categories is what one login
   replaces. So the count leads, the three deep dives are given their own
   weight, and the rest are a directory underneath.
   ═══════════════════════════════════════════════════════════════════════════ */

body.cmphub-desk .ch-hero { padding: 54px 0 0; text-align: center; }

/* the count: the whole argument in three numbers */
body.cmphub-desk .ch-count {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 40px 0 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--dk-line);
  background: var(--dk-line);
  text-align: left;
}
body.cmphub-desk .ch-count > div {
  background: rgba(10, 14, 22, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 24px 24px 26px;
}
body.cmphub-desk .ch-count b {
  display: block;
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--dk-ink);
}
body.cmphub-desk .ch-count span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--dk-dim); }
body.cmphub-desk .ch-count > div:last-child b { color: #4ade80; }

/* the three that got a full audit */
body.cmphub-desk .ch-deep {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
body.cmphub-desk .ch-deep a {
  display: block;
  padding: 26px 28px 28px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--cm) 30%, transparent);
  background: linear-gradient(158deg, color-mix(in srgb, var(--cm) 13%, transparent), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
body.cmphub-desk .ch-deep a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cm) 55%, transparent); }
body.cmphub-desk .ch-deep .n {
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm);
}
body.cmphub-desk .ch-deep h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 10px 0 8px;
}
body.cmphub-desk .ch-deep p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dk-mute); }
body.cmphub-desk .ch-deep .go {
  display: block;
  margin-top: 16px;
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--cm);
}

/* the directory */
body.cmphub-desk .ch-cat { margin-top: 42px; }
body.cmphub-desk .ch-cat h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dk-dim);
  font-weight: 400;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dk-line);
}
body.cmphub-desk .ch-cat h3 em {
  font-style: normal;
  color: var(--cm);
  margin-left: auto;
  font-size: 10px;
}
body.cmphub-desk .ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
body.cmphub-desk .ch-grid a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
body.cmphub-desk .ch-grid a:hover { background: rgba(255, 255, 255, 0.075); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
body.cmphub-desk .ch-grid .nm { font-size: 14px; font-weight: 500; color: var(--dk-ink); }
body.cmphub-desk .ch-grid .tg {
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dk-dim);
  text-align: right;
}

/* how these pages are written — the bit that earns the rest */
body.cmphub-desk .ch-method {
  margin-top: 48px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.035);
}
body.cmphub-desk .ch-method h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 14px;
}
body.cmphub-desk .ch-method ul { margin: 0; padding-left: 20px; }
body.cmphub-desk .ch-method li { font-size: 14px; line-height: 1.7; color: var(--dk-mute); margin-bottom: 8px; }
body.cmphub-desk .ch-method b { color: var(--dk-ink); font-weight: 600; }

/* ── the recommendation table ─────────────────────────────────────────────────
   Same table furniture as the feature comparison, but it answers a different
   question: given your situation, which product should you buy. Its first
   column is a sentence rather than a capability, so it gets the room, and the
   verdict column is set in mono because it is a name, not a value. Rows that
   answer with a competitor are deliberately not tinted as ours. */
body.cmp-desk .cm-pick th:first-child,
body.cmp-desk .cm-pick td:first-child { width: 34%; }
body.cmp-desk .cm-pick td:nth-child(2) { color: var(--dk-mute); }
body.cmp-desk .cm-pick td:last-child {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--dk-ink);
}
body.cmp-desk .cm-pick td.ours:last-child { color: #7DD3A8; }

/* ── the scope table ──────────────────────────────────────────────────────────
   Answers the app-count objection by showing what one of our modules actually
   holds. The first column carries a paragraph rather than a label, so it takes
   the room; the verdict column is a count, so it is set in mono. */
body.cmp-desk .cm-scope td:first-child { width: 46%; }
body.cmp-desk .cm-scope td:first-child b {
  display: block;
  font-size: 15px;
  color: var(--dk-ink);
  margin-bottom: 5px;
}
body.cmp-desk .cm-scope td:nth-child(2) { color: var(--dk-mute); font-size: 13.5px; }
body.cmp-desk .cm-scope td:last-child { white-space: nowrap; text-align: right; }