/* Comparison follows Notasy's type scale and slate/indigo surfaces. */
.comparison { width: var(--container-width); max-width: calc(100% - 80px); margin: 0 auto; padding: 32px 0 160px; }
.comparison__intro { text-align: center; margin: 0 auto 64px; }
.comparison__eyebrow { margin: 0 0 24px; color: #969df4; font: 12px/1.5 ui-monospace, monospace; letter-spacing: 2px; }
.comparison h2 { margin: 0; font-size: 48px; font-weight: 400; line-height: 1.12; letter-spacing: -1.8px; }
.comparison h2 span { color: #c0cbd8; }
.comparison__intro > p:last-child { margin: 22px 0 0; font-size: 15px; line-height: 1.7; color: #94a3b8; }
.comparison__surface { position: relative; border: 1px solid #252c3c; border-radius: 16px; overflow: hidden; }
.comparison__table { width: 100%; border-spacing: 0; border-collapse: separate; table-layout: fixed; text-align: left; font-size: 14px; line-height: 1.55; }
.comparison__topic { width: 23%; }
.comparison__manual { width: 37%; }
.comparison__automatic { width: 40%; }
.comparison__table th,
.comparison__table td { padding: 25px 26px; font-weight: 400; vertical-align: middle; }
.comparison__table thead th { height: 110px; border-bottom: 1px solid #252c3c; }
.comparison__table thead th:first-child { color: #8794a9; font-size: 13px; }
.comparison__column-title,
.comparison__brand { display: flex; align-items: center; min-height: 28px; gap: 10px; font-size: 17px; font-weight: 500; color: #f1f5f9; letter-spacing: -.3px; }
.comparison__table thead small { display: block; margin-top: 6px; font-size: 12px; color: #8290a8; }
.comparison__table thead th:last-child small { color: #a0a9c7; }
.comparison__table tbody th { color: #d4dce7; font-weight: 500; }
.comparison__table td { color: #8c99ae; }
.comparison__table td:last-child { color: #dce1f0; }
.comparison__table tr > :last-child { border-left: 1px solid #818cf81c; }
.comparison__table tbody tr:not(:last-child) > * { border-bottom: 1px solid #ffffff07; }
.comparison__table td > div { display: flex; align-items: flex-start; gap: 11px; }
.comparison__icon { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.comparison__icon--manual { color: #e5a0a6; stroke: currentColor; }
.comparison__icon--manual circle { fill: none; stroke: currentColor; }
.comparison__icon--auto { color: #a3cfb8; stroke: currentColor; }
.comparison__icon--auto circle { fill: none; stroke: currentColor; }