/* /compare — the comparison page. Rides on recipes.css (nav, hero, buttons,
   footer, tokens) and only adds what a long-form article page needs: prose
   measure, the comparison table, per-app blocks and the FAQ. */

.cmp { padding-bottom: 40px; display: flex; flex-direction: column; gap: 56px; min-width: 0; }
/* min-width:0 on both levels: a flex item defaults to min-width:auto, so the
   min-width:780px table below would push the whole page sideways instead of
   scrolling inside its own container. */
.cmp section { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.cmp h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.5px;
  margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  text-wrap: balance;
}
.cmp h3 {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 700; letter-spacing: -0.2px;
  margin: 0; text-wrap: balance;
}
.cmp p { font-size: 16px; line-height: 1.65; color: #cfcfcf; max-width: 68ch; margin: 0; text-wrap: pretty; }
.cmp strong { color: #fff; font-weight: 600; }

.cmp-answer { padding: 22px 24px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius-md); }
.cmp-answer h2 { border-bottom: none; padding-bottom: 0; font-size: 13px; font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }

/* --- table --- */
.table-scroll { overflow-x: auto; min-width: 0; max-width: 100%; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.cmp-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table thead th {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--muted); white-space: nowrap; background: rgba(255,255,255,0.03);
}
.cmp-table tbody th { font-weight: 700; font-size: 15px; white-space: nowrap; }
.cmp-table td { color: #c4c4c4; }
.cmp-table td.y { color: #9fd5a8; }
.cmp-table td.n { color: #8e8e8e; }
.cmp-table td.p { color: #d8c48c; }
.cmp-table tr.is-us { background: var(--accent-wash); }
.cmp-table tr.is-us th { color: var(--accent); }

.cmp-note { font-size: 13px !important; color: var(--muted) !important; line-height: 1.55; }

/* --- per-app blocks --- */
.cmp-apps { gap: 0; }
.cmp-app { display: flex; flex-direction: column; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.cmp-app:last-child { border-bottom: none; }
.cmp-app.is-us { border-left: 3px solid var(--accent); padding-left: 22px; margin: 8px 0; background: linear-gradient(90deg, var(--accent-wash), transparent 60%); }
.ours {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 8px; margin-left: 8px; vertical-align: middle;
}
.cmp-cta { margin-top: 6px !important; }

/* --- faq --- */
.cmp-faq { gap: 0; }
.cmp-faq h2 { margin-bottom: 18px; }
.cmp-faq h3 { margin-top: 26px; }
.cmp-faq h3 + p { margin-top: 10px; }

@media (max-width: 760px) {
  .cmp { gap: 44px; }
  .cmp-app.is-us { padding-left: 16px; }
}

/* Notes pages reuse this stylesheet; only the bullet list is extra. */
.note-list { max-width: 68ch; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.note-list li { font-size: 16px; line-height: 1.6; color: #cfcfcf; }
.note-list li::marker { color: var(--accent); }
.cmp em { color: #dcdcdc; font-style: italic; }