/* ── Comparison pages (compare.html, rithere-vs-*.html) ─────────────────────
   Loaded only by those pages, after style.css, so the other pages don't pay
   for it. Same vocabulary as the rest of the site: flat surfaces stacked in
   translucent white over the page background, 1px hairlines, no shadows (they
   are killed globally anyway — see the end of style.css), monochrome except
   for the semantic green/red on the yes/no marks.

   Every block is plain markup that reads correctly with JS and CSS animation
   off. The only script is compare.js, which tallies the checklist. */

.cmp-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-gray);
}

.cmp-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cmp-meta svg {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.cmp-article {
  padding: 2rem 0 1rem;
}

.cmp-article .container {
  max-width: 920px;
}

.cmp-article section + section {
  margin-top: 4rem;
}

/* ── Prose ─────────────────────────────────────────────────────────────────*/
.cmp-article h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--text-white);
}

.cmp-article h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--text-white);
}

.cmp-lead,
.cmp-article p {
  color: var(--text-gray);
  font-size: 1rem;
  line-height: 1.75;
}

.cmp-article p + p {
  margin-top: 1rem;
}

.cmp-article p b,
.cmp-article li b {
  color: var(--text-white);
  font-weight: 600;
}

.cmp-article p a,
.cmp-article li a,
.cmp-article td a {
  color: var(--text-white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.cmp-article p a:hover,
.cmp-article li a:hover,
.cmp-article td a:hover {
  text-decoration-color: currentColor;
}

.cmp-prose-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.cmp-prose-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-gray);
  line-height: 1.7;
}

.cmp-prose-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.cmp-kbd {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-white);
  white-space: nowrap;
}

/* ── Callout (disclosure, "how we checked") ────────────────────────────────*/
.cmp-note {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.cmp-note > svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  color: var(--text-gray);
}

.cmp-note p {
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ── At a glance: "Choose X if…" cards ─────────────────────────────────────*/
.cmp-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.cmp-glance-card {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--bg-card);
}

.cmp-glance-card.is-rithere {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    var(--bg-card);
}

.cmp-glance-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.cmp-glance-head img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.cmp-glance-head h3 {
  margin: 0;
  font-size: 1rem;
}

.cmp-glance-head .cmp-chip {
  margin-left: auto;
}

/* The monogram that stands in for a competitor's logo. Their marks are their
   trademarks; a neutral initial says which column is which without borrowing
   anyone's branding. */
.cmp-mono {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-white);
}

.cmp-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a8a90;
}

.cmp-chip-solid {
  border-color: transparent;
  background: #e9e9ea;
  color: #1b1b1d;
}

/* ── Marks: yes / no / partly ──────────────────────────────────────────────
   The word stays in the markup (and on screen) so the table reads to a screen
   reader and survives a copy-paste; the glyph is a mask, so it takes the
   colour of the mark and costs no request. */
.m-yes,
.m-no,
.m-part {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
}

.m-yes::before,
.m-no::before,
.m-part::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--m-glyph) center / contain no-repeat;
  mask: var(--m-glyph) center / contain no-repeat;
}

.m-yes {
  color: #22c55e;
  --m-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.m-no {
  color: #f26b6b;
  --m-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.m-part {
  color: #b4b4ba;
  --m-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* ── Comparison table ──────────────────────────────────────────────────────
   Scrolls sideways inside its own frame on narrow screens; the page never
   does. The first column stays pinned so a row is never read without its
   label. */
.cmp-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--bg-tertiary);
  -webkit-overflow-scrolling: touch;
}

.cmp-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cmp-table.is-three {
  min-width: 720px;
}

.cmp-table th,
.cmp-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: 0;
}

.cmp-table thead th {
  position: sticky;
  top: 0;
  background: #1f1f21;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-white);
}

.cmp-table thead th.is-rithere {
  color: #fff;
}

.cmp-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 28%;
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-white);
}

.cmp-table td {
  color: var(--text-gray);
}

.cmp-table td .m-yes,
.cmp-table td .m-no,
.cmp-table td .m-part {
  display: flex;
  margin-bottom: 0.2rem;
}

.cmp-table td small {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #8c8c92;
}

.cmp-table td.is-rithere {
  background: rgba(255, 255, 255, 0.025);
}

.cmp-table-foot {
  margin-top: 0.75rem;
  font-size: 0.82rem !important;
  color: #8c8c92 !important;
}

/* ── Workflow graphic: one row of steps per tool ───────────────────────────*/
.cmp-flow {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #0f0f11;
}

.cmp-flow-row + .cmp-flow-row {
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.cmp-flow-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.cmp-flow-head img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.cmp-flow-head .cmp-mono {
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  border-radius: 6px;
}

.cmp-flow-head strong {
  font-size: 0.92rem;
  color: var(--text-white);
}

.cmp-flow-head .cmp-chip {
  margin-left: auto;
}

.cmp-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.8rem;
  font-weight: 500;
  color: #a3a3aa;
}

/* Arrow between steps. A pseudo-element on the step after it, so a row that
   wraps never ends a line on a dangling arrow. */
.cmp-step + .cmp-step::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: -0.15rem;
  margin-right: 0.15rem;
  background: rgba(255, 255, 255, 0.35);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cmp-flow-row.is-rithere .cmp-step {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  font-weight: 600;
  color: var(--text-white);
}

.cmp-flow-row.is-rithere .cmp-step:last-child {
  background: rgba(255, 255, 255, 0.11);
}

.cmp-flow-note {
  margin-top: 0.6rem !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: #85858c !important;
}

/* ── Pros and cons ─────────────────────────────────────────────────────────*/
.cmp-pc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.cmp-pc-card {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--bg-card);
}

.cmp-pc-card.is-rithere {
  border-color: rgba(255, 255, 255, 0.18);
}

.cmp-pc-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
}

.cmp-pc-card h3 img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.cmp-pc-label {
  margin: 0 0 0.55rem !important;
  font-size: 0.7rem !important;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #8a8a90 !important;
}

.cmp-pc-list {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.cmp-pc-list:last-child {
  margin-bottom: 0;
}

.cmp-pc-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-gray);
}

.cmp-pc-list li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  background: currentColor;
  -webkit-mask: var(--m-glyph) center / contain no-repeat;
  mask: var(--m-glyph) center / contain no-repeat;
}

.cmp-pc-list.is-pros li::before {
  color: #22c55e;
  background: #22c55e;
  --m-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.cmp-pc-list.is-cons li::before {
  background: #f26b6b;
  --m-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ── Checklist: tick what you need ─────────────────────────────────────────
   Real checkboxes, so it works with a keyboard and without JS. compare.js
   adds the running tally underneath; without it the tags beside each line
   still say which tool covers it. */
.cmp-check {
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--bg-tertiary);
}

.cmp-check-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-check-list label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cmp-check-list label:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cmp-check-list input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cmp-check-list input::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #1b1b1d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.cmp-check-list input:checked {
  border-color: #e9e9ea;
  background: #e9e9ea;
}

.cmp-check-list input:checked::after {
  transform: scale(1);
}

.cmp-check-list label:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.cmp-check-text {
  flex: 1;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-white);
}

.cmp-check-list .cmp-chip {
  flex-shrink: 0;
}

.cmp-tally {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-gray);
}

.cmp-tally.is-live {
  display: block;
}

.cmp-tally b {
  color: var(--text-white);
}

@media (max-width: 560px) {
  .cmp-check-list label {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  .cmp-check-list .cmp-chip {
    margin-left: calc(20px + 0.8rem);
  }

  .cmp-check-text {
    flex-basis: calc(100% - 20px - 0.8rem);
  }
}

/* ── Pricing snapshot ──────────────────────────────────────────────────────*/
.cmp-price {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.cmp-price-card {
  padding: 1.35rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--bg-card);
}

.cmp-price-card.is-rithere {
  border-color: rgba(255, 255, 255, 0.18);
}

.cmp-price-card h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 1rem;
}

.cmp-price-card h3 img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.cmp-price-card dl {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.cmp-price-card dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cmp-price-card dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cmp-price-card dt {
  font-size: 0.88rem;
  color: var(--text-gray);
}

.cmp-price-card dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
  color: var(--text-white);
}

.cmp-price-card dd small {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #8c8c92;
}

/* ── Same task, side by side (the three-way page) ──────────────────────────*/
.cmp-tasks {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.cmp-task {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.cmp-task-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.cmp-task-head svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-gray);
}

.cmp-task-head h3 {
  margin: 0;
  font-size: 1rem;
}

.cmp-task-head p {
  margin: 0 0 0 auto !important;
  font-size: 0.82rem !important;
  color: #8c8c92 !important;
  text-align: right;
}

.cmp-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cmp-task-cell {
  padding: 1.1rem 1.25rem 1.25rem;
}

.cmp-task-cell + .cmp-task-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.cmp-task-cell.is-rithere {
  background: rgba(255, 255, 255, 0.025);
}

.cmp-task-tool {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-white);
}

.cmp-task-tool img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.cmp-task-tool .cmp-mono {
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  border-radius: 5px;
}

.cmp-task-cell ol {
  margin: 0 0 0.7rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-gray);
}

.cmp-task-cell ol li::marker {
  color: #6e6e74;
  font-size: 0.78rem;
  font-weight: 700;
}

.cmp-task-cell p {
  margin: 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: #8c8c92 !important;
}

@media (max-width: 760px) {
  .cmp-task-head {
    flex-wrap: wrap;
  }

  .cmp-task-head p {
    margin: 0 !important;
    flex-basis: 100%;
    text-align: left;
  }

  .cmp-task-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-task-cell + .cmp-task-cell {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* ── Two targets: Word vs a plain text field ───────────────────────────────
   Two different apps on purpose — this is about where the text lands, not a
   before-and-after of one window. */
.cmp-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.cmp-target {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  background: #0f0f11;
}

.cmp-target-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  font-weight: 600;
  color: #9a9aa0;
}

.cmp-target-bar svg {
  width: 15px;
  height: 15px;
}

.cmp-target-body {
  padding: 1rem 1.1rem 1.15rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #c9c9ce;
}

.cmp-target-body.is-mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.cmp-target-body b {
  color: #fff;
}

.cmp-target-body ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.cmp-target-foot {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8rem;
  line-height: 1.55;
  color: #8c8c92;
}

/* ── Sources ───────────────────────────────────────────────────────────────*/
.cmp-sources ol {
  margin: 1rem 0 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #8c8c92;
}

.cmp-sources a {
  color: var(--text-gray);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
  word-break: break-word;
}

.cmp-sources a:hover {
  color: var(--text-white);
}

/* ── FAQ: reuses .faq-item from style.css, just narrower here ─────────────*/
.cmp-article .faq-container {
  max-width: none;
  margin-top: 1.5rem;
}

.cmp-article .faq-question {
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
}

.cmp-article .faq-answer p {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.95rem;
}

/* ── Related comparisons / hub cards ───────────────────────────────────────*/
.cmp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.cmp-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--bg-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cmp-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #262628;
}

.cmp-card-vs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
}

.cmp-card-vs img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.cmp-card-vs .cmp-mono {
  width: 28px;
  height: 28px;
}

.cmp-card-vs i {
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #6e6e74;
}

.cmp-card h3 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  color: var(--text-white);
}

.cmp-card p {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--text-gray);
}

.cmp-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-white);
}

.cmp-card-more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.cmp-card:hover .cmp-card-more svg {
  transform: translateX(3px);
}

.cmp-hub {
  padding: 2rem 0 1rem;
}

.cmp-hub .container {
  max-width: 1040px;
}

.cmp-hub h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  letter-spacing: -0.4px;
}

.cmp-hub section > p {
  max-width: 680px;
  color: var(--text-gray);
  line-height: 1.7;
}

.cmp-hub li b {
  color: var(--text-white);
  font-weight: 600;
}

.cmp-hub li a {
  color: var(--text-white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}

.cmp-hub section + section {
  margin-top: 3.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .cmp-check-list input,
  .cmp-check-list input::after,
  .cmp-card,
  .cmp-card-more svg {
    transition: none;
  }
}

/* The outcome at the end of a row: what you get, not something you do, so it
   reads apart from the steps and isn't mistaken for one more of them. */
.cmp-flow-row .cmp-step.is-result {
  border-style: dashed;
  background: transparent;
  font-style: italic;
  font-weight: 500;
}

.cmp-flow-row.is-rithere .cmp-step.is-result {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

/* Phones only: the table is wider than the screen and scrolls inside its own
   frame, which isn't obvious when the first columns happen to fit. */
.cmp-swipe {
  display: none;
}

@media (max-width: 700px) {
  .cmp-article .cmp-swipe {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 -0.75rem;
    font-size: 0.8rem;
    color: #8c8c92;
  }

  .cmp-swipe::after {
    content: "\2192";
  }
}

/* Three "pick this if" cards fit side by side at the article width. */
.cmp-glance:has(> :nth-child(3)) {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* ── Source superscripts ───────────────────────────────────────────────────
   Every fact carries a small number that opens its official source in a new
   tab; the same number leads the Sources list at the bottom. Kept dim so a
   sentence still reads as a sentence, bright on hover so it's obviously a
   link. */
.cmp-ref {
  margin-left: 0.1em;
  font-size: 0.68em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}

.cmp-ref span {
  color: #6e6e74;
}

.cmp-article .cmp-ref a,
.cmp-ref a {
  padding: 0 0.1em;
  border-radius: 3px;
  color: #9a9aa0;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.cmp-article .cmp-ref a:hover,
.cmp-ref a:hover,
.cmp-ref a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.cmp-sources li:target {
  color: var(--text-white);
}

/* ── Brand and app logos ───────────────────────────────────────────────────
   Real marks, so a reader knows which column is which at a glance. Sized by
   their context (the head of a card, a table header, a task cell); this is
   only the fallback and the shared behaviour. */
.cmp-logo {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: -0.3em;
}

.cmp-glance-head .cmp-logo,
.cmp-pc-card h3 .cmp-logo {
  width: 26px;
  height: 26px;
}

.cmp-flow-head .cmp-logo,
.cmp-price-card h3 .cmp-logo {
  width: 22px;
  height: 22px;
}

.cmp-task-tool .cmp-logo {
  width: 18px;
  height: 18px;
}

.cmp-card-vs .cmp-logo {
  width: 30px;
  height: 30px;
}

.cmp-table thead .cmp-logo {
  width: 18px;
  height: 18px;
  margin-right: 0.45rem;
}

.cmp-table tbody th .cmp-logo {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
}

/* The apps a task happens in, shown in its header. */
.cmp-where {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cmp-where .cmp-logo {
  width: 16px;
  height: 16px;
}

/* ── "For the technically curious" ─────────────────────────────────────────
   The detail a reviewer wants and most readers don't, folded away so the
   page stays short. */
.cmp-tech {
  margin-top: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.cmp-tech summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-white);
}

.cmp-tech summary::-webkit-details-marker {
  display: none;
}

.cmp-tech summary::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: #9a9aa0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.cmp-tech[open] summary::after {
  transform: rotate(180deg);
}

.cmp-tech summary svg {
  width: 16px;
  height: 16px;
  color: #9a9aa0;
}

.cmp-tech > div {
  padding: 0 1.1rem 1.1rem;
}

.cmp-tech .cmp-prose-list {
  margin-top: 0;
}

.cmp-tech .cmp-prose-list li {
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .cmp-tech summary::after {
    transition: none;
  }
}

/* A superscript inside a pros/cons line has to stay glued to the words, so
   these lines are plain text flow with the glyph hung in the left gutter,
   rather than a flex row (which made the number a separate, gapped item). */
.cmp-pc-list li {
  display: block;
  position: relative;
  padding-left: 1.55rem;
}

.cmp-pc-list li::before {
  position: absolute;
  left: 0;
  top: 0.18rem;
  margin-top: 0;
}