/* ── Comparison page — extends the design tokens defined in main.css ── */
.cmp-hero { padding: clamp(118px,12vw,150px) 0 clamp(48px,6vw,72px); }
.cmp-hero .display { max-width: 20ch; }
.cmp-hero .lede { margin-top: 20px; }
.cmp-hero .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 16px; background: #fff; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
table.cmp th, table.cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.cmp thead th { font-weight: 500; color: var(--ink); background: var(--linen); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.us { background: rgba(10,61,38,.035); font-weight: 500; }
table.cmp .cell-note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ash); font-weight: 400; }

.cmp-source { font-size: 13px; color: var(--ash); margin-top: 14px; }
.cmp-source a { color: var(--forest); text-decoration: underline; }

.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 720px) { .cmp-grid { grid-template-columns: minmax(0,1fr); } }
.cmp-col { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 26px; }
.cmp-col h3 { margin-bottom: 16px; }
.cmp-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cmp-col li { font-size: 14.5px; line-height: 1.5; color: var(--smoke); padding-left: 22px; position: relative; }
.cmp-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--stone); }
.cmp-col.us li::before { background: var(--forest); }
.cmp-col.us { border-color: rgba(10,61,38,.25); }

.cmp-faq details { border-bottom: 1px solid var(--hair); padding: 18px 0; }
.cmp-faq details:first-child { border-top: 1px solid var(--hair); }
.cmp-faq summary {
  cursor: pointer; font-size: 17px; font-weight: 500; color: var(--ink); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cmp-faq summary::-webkit-details-marker { display: none; }
.cmp-faq summary::after { content: "+"; font-size: 20px; color: var(--smoke); transition: transform .2s; flex: none; }
.cmp-faq details[open] summary::after { transform: rotate(45deg); }
.cmp-faq p { margin: 10px 0 0; color: var(--smoke); font-size: 15px; line-height: 1.6; max-width: 68ch; }