/* /compare/* pages. Own stylesheet on purpose: the company-page styles it
   sits beside live only in home.min.css, whose source is lost, so nothing
   new goes in there. Linked unminified, like redesign.css. */

.tp-cmp { padding: 32px 0 56px; color: #1f2937; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.tp-cmp h1, .tp-cmp h2, .tp-cmp h3 { font-family: 'Sora', 'Inter', system-ui, sans-serif; color: #111827; text-wrap: balance; }

.tp-cmp-crumbs { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
.tp-cmp-crumbs a { color: #6b7280; text-decoration: none; }
.tp-cmp-crumbs a:hover { color: #ff6a00; }
.tp-cmp-crumbs span[aria-hidden] { margin: 0 6px; }

.tp-cmp-head { max-width: 760px; margin-bottom: 32px; }
.tp-cmp-kicker { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ff6a00; }
.tp-cmp-title { font-size: 40px; line-height: 1.12; font-weight: 800; margin: 0 0 14px; }
.tp-cmp-lede { font-size: 17px; line-height: 1.6; color: #374151; margin: 0 0 10px; }
.tp-cmp-updated { font-size: 13px; color: #6b7280; margin: 0; }

.tp-cmp-h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; }

/* verdict: two equal cards, ours lifted by a filled top edge rather than a
   different shape, so they still read as one pair */
.tp-cmp-verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tp-cmp-verdict-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 22px; }
.tp-cmp-verdict-card--us { border-top: 4px solid #ff6a00; }
.tp-cmp-verdict-card h2 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.tp-cmp-verdict-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #374151; }

/* table: the only element allowed to be wider than a phone, in its own scroller */
.tp-cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.tp-cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.tp-cmp-table th, .tp-cmp-table td { padding: 14px 16px; vertical-align: top; text-align: left; border-bottom: 1px solid #eef0f3; }
.tp-cmp-table thead th { font-family: 'Sora', 'Inter', sans-serif; font-size: 15px; font-weight: 700; background: #f9fafb; position: sticky; top: 0; }
.tp-cmp-table tbody th { font-weight: 600; color: #111827; width: 22%; background: #fcfcfd; }
.tp-cmp-table tbody tr:last-child th, .tp-cmp-table tbody tr:last-child td { border-bottom: 0; }
.tp-cmp-table .tp-cmp-table-us { background: #fff7ed; }
.tp-cmp-table thead .tp-cmp-table-us { color: #c2410c; }

.tp-cmp-qa { max-width: 760px; padding: 18px 0; border-bottom: 1px solid #eef0f3; }
.tp-cmp-qa:last-child { border-bottom: 0; }
.tp-cmp-qa h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.tp-cmp-qa p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #374151; }

.tp-cmp-sources-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.tp-cmp-sources h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.tp-cmp-sources ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.tp-cmp-sources a { color: #c2410c; }
.tp-cmp-disclaimer { margin: 20px 0 0; font-size: 12.5px; color: #6b7280; max-width: 760px; }

.tp-cmp-more { margin: 36px 0 0; font-size: 15px; }
.tp-cmp-more a { color: #c2410c; font-weight: 600; }

@media (max-width: 575px) {
    .tp-cmp { padding-top: 20px; }
    .tp-cmp-title { font-size: 30px; }
    .tp-cmp-lede { font-size: 16px; }
    .tp-cmp-h2 { font-size: 21px; margin-top: 32px; }
    .tp-cmp-table { font-size: 14px; }
    .tp-cmp-table th, .tp-cmp-table td { padding: 12px; }
}