/* ==========================================================================
   /compare — the broad comparison page.

   Reference: autosend.com/vs/loops, for SHAPE only — split section headers with the heading left and the
   sentence that qualifies it right, caps eyebrows, one wide table whose first column is the row label and
   whose product columns carry the answers, a long-form objection block, an honest-limits block, then the
   CTA. None of their tokens, type or colour: everything here is the site's own scale, ink and 1360/40 frame,
   and the sections reuse the page template's rhythm (py-70, a 1px rule between them).

   Their pages compare against one named product, so they can win a "you save" column. This one is broad —
   four columns, several of which the competitor wins — so the emphasis is structural instead: the Callix
   column gets the subtle ground and the ink weight, and nothing else is coloured.
   ========================================================================== */

/* ---- hero (dark, so nav.js inverts the lockup over it — it is a [data-cx="phero"] host) -------------- */
.cx-cmp__hero { background: var(--cx-dark); color: var(--cx-inverse); }
.cx-cmp__hero-inner { display: flex; flex-direction: column; align-items: flex-start; padding: 120px 40px 96px; box-sizing: border-box; }
.cx-cmp__eyebrow { margin: 0 0 24px; color: var(--cx-inverse); opacity: 0.6; }
.cx-cmp__h1 { margin: 0; color: var(--cx-inverse); max-width: 960px; }
.cx-cmp__hero-lead { margin: 24px 0 0; color: var(--cx-inverse); opacity: 0.7; max-width: 640px; }

/* the three one-line reads — autosend's "why teams switch" 3-up, in our ink */
.cx-cmp__reads { display: flex; gap: 32px; width: 100%; margin: 64px 0 0; padding-top: 32px; border-top: 1px solid var(--cx-line-dark-2); }
.cx-cmp__read { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* the vendors' own logos are all dark (Gong #1D0254, Hyros #5150F6, Triple Whale #033855), so on the dark
   hero they take the same knock-out the inverse logo strip uses on /track */
.cx-cmp__read-logo { display: flex; align-items: center; height: 20px; }
.cx-cmp__read-logo .cx-cmp__logo { filter: brightness(0) invert(1); opacity: 0.75; }
/* each read wraps at least once, so the three columns read as a set rather than two-plus-a-straggler.
   Measured: Triple Whale's line is the shortest and stops wrapping above 370, the longest still fits two
   lines down to 260, so 340 sits mid-band and a copy edit cannot un-wrap it. `balance` then evens the two. */
.cx-cmp__read-copy { margin: 0; max-width: 340px; text-wrap: balance; color: var(--cx-inverse); opacity: 0.8; }
.cx-cmp__read-copy > strong { font-weight: 500; opacity: 1; }
.cx-cmp__loop { margin: 40px 0 0; color: var(--cx-inverse); max-width: 720px; }

/* ---- a section ------------------------------------------------------------------------------------- */
.cx-cmp { background: var(--cx-page); border-bottom: 1px solid var(--cx-line); }
.cx-cmp__inner { display: flex; flex-direction: column; gap: 56px; padding: 70px 40px; }

/* the split header: heading left, the sentence that qualifies it right */
.cx-cmp__split { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; width: 100%; }
.cx-cmp__split.narrow .cx-cmp__title { width: 573px; }
.cx-cmp__title { margin: 0; flex: 0 1 auto; max-width: 841px; }
.cx-cmp__lead { margin: 0; flex: 0 0 447px; width: 447px; color: var(--cx-ink-2); }

/* ---- the table ------------------------------------------------------------------------------------- */
.cx-cmp__scroll { width: 100%; }
/* separate, not collapse. With a collapsed table the sticky row-label column loses: cell backgrounds paint
   in a layer below ALL cell content, so a later column's text draws straight over the label once the table
   is scrolled sideways on a phone. No z-index, pseudo-background or positioned wrapper fixes that — measured,
   all three still bled. Separate cell layers do, and with border-spacing 0 the rules look identical. */
.cx-cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--cx-surface); border: 1px solid var(--cx-line); }
.cx-cmp__table thead th { border-bottom: 1px solid var(--cx-line-strong); }
.cx-cmp__table tbody tr + tr th, .cx-cmp__table tbody tr + tr td { border-top: 1px solid var(--cx-line); }

/* the header cells carry the wordmark instead of the name: the logo IS the name, and its alt says so */
.cx-cmp__logo { display: block; width: auto; height: 20px; max-width: none; }
.cx-cmp__th.logo { padding-top: 20px; padding-bottom: 20px; }
/* sizes come from the type roles in tokens.css (.cx-body on the labels and values); what is left here is
   the cell box and its ink */
.cx-cmp__th { box-sizing: border-box; padding: 16px 24px; text-align: left; vertical-align: middle; color: var(--cx-ink); }
.cx-cmp__th.row, .cx-cmp__table thead .cx-cmp__th.row { width: 300px; }   /* the column you scan down */
/* the cell states the type its content is set in rather than inheriting a strut: the value inside is an
   inline .cx-body (14/24), and a cell whose own line box is any other size adds a pixel per wrapped line
   (2px a row on the three that wrap, measured). Same reason .cx-footer__links li is a flex container. */
.cx-cmp__td { box-sizing: border-box; padding: 16px 24px; vertical-align: top; font-size: 14px; line-height: 24px; }
.cx-cmp__v { color: var(--cx-ink); }
/* a yes and a no are the mark alone; the img's alt is what carries the answer to a screen reader */
.cx-cmp__mark { display: block; width: 16px; height: 16px; }
.cx-cmp__vwrap { display: flex; align-items: center; gap: 10px; }      /* a qualified yes: mark + its words */
.cx-cmp__v.part { color: var(--cx-ink-2); }
/* the one column that is ours */
.cx-cmp__th.is-callix, .cx-cmp__td.is-callix { background: var(--cx-subtle); }

/* ---- the head-to-heads are the FAQ component (sections.css), reused whole. The only thing this page
        adds is the lead-in weight inside an answer — one step on the same scale, no new size. ---------- */
.cx-cmp__heads .cx-faq__a p + p { padding-top: 20px; }
.cx-cmp__heads .cx-faq__a strong { font-weight: 500; }

/* ---- the objection block: the page's argument, so it gets the widest measure ------------------------ */
.cx-cmp--objection { background: var(--cx-surface-2); }
.cx-cmp--objection .cx-cmp__split { align-items: flex-start; }
.cx-cmp__prose { flex: 0 0 640px; width: 640px; display: flex; flex-direction: column; gap: 20px; }

/* ---- the limits: the page template's three cells --------------------------------------------------- */
.cx-cmp__grid { display: flex; width: 100%; background: var(--cx-surface); }
.cx-cmp__cell {
  box-sizing: border-box; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 31px 32px; border: 0 solid var(--cx-line); border-width: 1px 1px 1px 0;
}
.cx-cmp__cell:first-child { border-left-width: 1px; }
.cx-cmp__cell-title, .cx-cmp__cell-desc { margin: 0; color: var(--cx-ink); }

/* the footnote is doing legal work: it stays visible, it is not a tooltip, and it carries the date.
   .cx-body, not a 13px one-off — the page holds to the roles in tokens.css. */
.cx-cmp__note { margin: 0; max-width: 841px; color: var(--cx-ink-3); }

/* ---- narrow --------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cx-cmp__hero-inner { padding: 96px 20px 72px; }
  .cx-cmp__inner { padding: 64px 20px; gap: 32px; }
  .cx-cmp__split, .cx-cmp--objection .cx-cmp__split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cx-cmp__split.narrow .cx-cmp__title, .cx-cmp__title { width: auto; max-width: none; }
  .cx-cmp__lead, .cx-cmp__prose { flex: none; width: auto; }
  .cx-cmp__reads { flex-direction: column; gap: 28px; margin-top: 48px; }
  .cx-cmp__grid { flex-direction: column; }
  /* 24, like .cx-psec__cell on the product pages: the desktop 31/32 inside a card that already starts
     20 from the edge left the text 52px in on a 390 screen */
  .cx-cmp__cell { padding: 24px; border-width: 1px 1px 0 1px; }
  .cx-cmp__cell:last-child { border-bottom-width: 1px; }

  /* four product columns do not fit a phone. The table scrolls sideways and the row label stays put, so
     the thing you are reading a row about never leaves the screen. */
  .cx-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cx-cmp__table { width: auto; min-width: 100%; }
  .cx-cmp__th.row, .cx-cmp__table thead .cx-cmp__th.row {
    position: sticky; left: 0; z-index: 1; width: 200px; min-width: 200px;
    background: var(--cx-surface); box-shadow: 1px 0 0 0 var(--cx-line);
  }
  .cx-cmp__th, .cx-cmp__td { padding: 14px 16px; min-width: 160px; }
}
/* no phone type block here on purpose: .cx-h2-display already steps to 44 in mobile.css, site-wide, and
   .cx-lead is the same 20/32 everywhere. A second scale for this one page is how a type system rots. */