/* ============================================================
   sugar4.me · Pink Press — "versus" comparison component
   The signature element of the competitor-alternative SEO pages.
   Reuses home.css/content.css vars (--pink, --ink, --line, --paper-2,
   --muted, --font-head, --ease). Prefixed `cmp-`; opt-in via table.cmp.
   ============================================================ */

/* Proof pills (under the article hero sub) -------------------- */
.cmp-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.cmp-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.42rem 0.9rem;
}
.cmp-pill .ck { color: var(--pink); font-weight: 800; }

/* The comparison table — overrides the default prose-table look --- */
.cmp-wrap { margin: 1.4rem 0 1.8rem; }

.article .prose table.cmp {
  border-collapse: separate; border-spacing: 0; border: 0; width: 100%;
  margin: 0; font-size: 0.95rem; border-radius: 18px; overflow: hidden;
  box-shadow: 0 34px 64px -46px rgba(26,20,23,0.55);
}
.article .prose table.cmp th,
.article .prose table.cmp td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0.95rem 1.05rem; vertical-align: middle; white-space: normal;
}
.article .prose table.cmp tbody tr:nth-child(odd) { background: transparent; } /* kill zebra */
.article .prose table.cmp tbody tr:last-child td { border-bottom: 0; }

/* header row — dark bar, our column reversed to brand rose */
.article .prose table.cmp thead th {
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  text-transform: none; letter-spacing: 0; background: var(--ink); color: #fff;
  padding-top: 1.05rem; padding-bottom: 1.05rem;
}
.article .prose table.cmp thead th:first-child {
  color: rgba(255,255,255,0.5); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.article .prose table.cmp thead th.cmp-us {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff;
}
.article .prose table.cmp thead th.cmp-us .cmp-badge {
  display: block; font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.92; margin-top: 3px; font-weight: 600;
}

/* row label (first cell) */
.article .prose table.cmp td.cmp-feat {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
}

/* OUR column — softly tinted + a green-free ✓ accent in brand rose */
.article .prose table.cmp td.cmp-us {
  background: linear-gradient(180deg, rgba(210,68,123,0.10), rgba(210,68,123,0.045));
  color: var(--ink); font-weight: 600;
}
.article .prose table.cmp td.cmp-us::before {
  content: "\2713"; color: var(--pink-deep); font-weight: 800; margin-right: 0.5rem;
}

/* competitor column — quiet, with a neutral dash marker */
.article .prose table.cmp td.cmp-them { color: var(--muted); }
.article .prose table.cmp td.cmp-them::before {
  content: "\2013"; color: #c9c4c7; font-weight: 700; margin-right: 0.5rem;
}

/* Mobile — keep our card as a real table (no nowrap scroll), just tighten */
@media (max-width: 600px) {
  .article .prose table.cmp { display: table; white-space: normal; font-size: 0.84rem; }
  .article .prose table.cmp th,
  .article .prose table.cmp td { padding: 0.65rem 0.6rem; }
  .article .prose table.cmp td.cmp-us::before,
  .article .prose table.cmp td.cmp-them::before { margin-right: 0.3rem; }
}