/* The comparison: one table under the hero — Fetchi, Instinct, Muse on five questions.
   Monochrome, flat, 1px rules and no fills: the row labels and column heads are Geist Mono
   uppercase like every other label on the page, the cells are Geist, Fetchi's column in
   white ink and the other two in the page's secondary grey. Under 760px the grid stacks:
   each question becomes a block of three ruled lines, the column name set in the margin. */
.compare{padding:72px 0}
.compare-head{max-width:720px;margin-bottom:32px}
.compare-head .h2{font-size:clamp(2rem,3.2vw,2.8rem);font-weight:450;letter-spacing:-.035em;line-height:1.15}
.compare-table{width:100%;border-collapse:collapse;border-top:1px solid var(--border-light);table-layout:fixed}
.compare-table .compare-q{width:200px}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:18px 28px 18px 0;border-bottom:1px solid var(--border)}
.compare-table thead th{padding:14px 28px 14px 0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--border-light)}
.compare-table tbody th{padding-top:21px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;color:var(--text-muted)}
.compare-table td{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--text-secondary);text-wrap:pretty}
.compare-table td:first-of-type{color:#fff}
.compare-table tr>:nth-child(2){background:#101010;padding-left:22px;padding-right:22px}
.compare-table thead th:nth-child(2){border-top:2px solid #ddd;font-size:13px;text-transform:none;letter-spacing:0}
.compare-table tr>:nth-child(3),.compare-table tr>:nth-child(4){padding-left:24px}
.compare-src{margin-top:18px}
@media(max-width:760px){
 .compare{padding:48px 0 56px}
 .compare-head{margin-bottom:24px}
 .compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;padding-right:0}
 .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .compare-table tr{padding-bottom:6px;border-bottom:1px solid var(--border-light)}
 .compare-table tbody th{padding:20px 0 6px;border-bottom:0}
 .compare-table td{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:10px 0}
 .compare-table td::before{content:attr(data-col);padding-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
 .compare-table td:last-child{border-bottom:0}
 .compare-table tr>:nth-child(2),.compare-table tr>:nth-child(3),.compare-table tr>:nth-child(4){padding:12px}
 .compare-table tr>:nth-child(2)::before{color:#fff}
}
