/* Comparison pages (/compare/) and the AI tools roundup post.
   Linked only from those pages; everything else comes from main.css. */

.article .cmp-note{margin-top:28px;padding:16px 20px;border-radius:12px;background:var(--card);border:1px solid #E6E6E6;font-size:16px;line-height:1.55}

/* quick verdict: two cards side by side */
.cmp-verdict{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:20px}
.cmp-card{background:var(--card);border-radius:16px;padding:20px 22px}
.cmp-card.is-caspa{background:rgba(115,255,104,.14);border:1.5px solid var(--green-dark)}
.article .cmp-card h3{margin:0;font-size:20px;line-height:1.3}
.article .cmp-card p{font-size:16px;line-height:1.55;margin-top:8px}

/* tables scroll inside their own box on small screens */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:24px;border:1px solid #E6E6E6;border-radius:12px}
.article .cmp-scroll table{display:table;margin:0;width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.article .cmp-scroll th,.article .cmp-scroll td{padding:12px 14px;border-bottom:1px solid #EDEDED;vertical-align:top;text-align:left}
.article .cmp-scroll thead th{background:var(--card-alt);font-weight:600;white-space:nowrap}
.article .cmp-scroll tbody th{font-weight:600}
.article .cmp-scroll tbody tr:last-child th,.article .cmp-scroll tbody tr:last-child td{border-bottom:0}
.article .cmp-scroll tr.cmp-group th{background:var(--card);font-size:13px;letter-spacing:.02em;color:var(--muted);font-weight:600}
.article p.cmp-src{font-size:14px;line-height:1.55;color:var(--muted);margin-top:12px}
.article p+ul{margin-top:12px}

/* before/after figures reused from the site's own galleries */
.cmp-figure{margin:32px 0 0}
.article .cmp-figure img{margin:0 auto;border-radius:12px}
.cmp-figure figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:10px}
.cmp-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.article .cmp-pair img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0}
.article .cmp-pair img:first-child{border:1px solid #ECECEC;background:#fff}

/* closing call to action */
.cmp-cta{margin-top:64px;padding:36px 28px;border-radius:20px;background:var(--ink);color:#fff;text-align:center}
.article .cmp-cta h2{color:#fff;margin:0;font-size:30px}
.article .cmp-cta p{color:#D9D9D9;max-width:560px;margin:12px auto 0}
.cmp-cta .btn-row{margin-top:24px}
.article .cmp-cta .hero-note{color:#BDBDBD;font-size:14px;margin-top:16px}
.cmp-cta .hero-note strong{color:#fff}

/* FAQ accordion sits inside the 800px article column */
.article .faq-wrap{margin-top:24px;max-width:none}
.article .faq-q{font-size:18px;padding:14px 24px}
.article .faq-a-inner{padding:0 24px 22px}
.article .faq-a-inner p{font-size:16px;margin-top:0}

@media (max-width:809px){
  .cmp-verdict,.cmp-pair{grid-template-columns:1fr}
  .article .cmp-scroll table{font-size:13px}
  .article .cmp-scroll th,.article .cmp-scroll td{min-width:150px;padding:10px}
  /* pricing tables: short price columns and a wide "what you get" column keep rows short */
  .article .cmp-price th,.article .cmp-price td{min-width:96px}
  .article .cmp-price tbody th{min-width:118px}
  .article .cmp-price td:last-child,.article .cmp-price thead th:last-child{min-width:250px}
  .article .cmp-cta h2{font-size:24px}
  .article .faq-q{font-size:16px;padding:12px 18px}
  .article .faq-a-inner{padding:0 18px 18px}
}