/* ============================================================================
   Ink: comparison pages (/ink/compare/ and /ink/compare/<slug>/)
   ========================================================================== */

.ink-cmp__title { max-width: 21em; text-wrap: balance; }

/* Prose column can run a little wider so the at-a-glance tables breathe */
.ink-cmp .ink-prose { max-width: 820px; }

/* Comparison tables: full width of the prose column, first column as row labels,
   Eposyne (last) column marked in red */
.ink-cmp .ink-prose table { display: table; table-layout: fixed; }
.ink-cmp .ink-prose th:first-child,
.ink-cmp .ink-prose td:first-child { width: 28%; }
.ink-cmp .ink-prose td:first-child {
    font-weight: 600;
    color: var(--ink);
}
.ink-cmp .ink-prose th:last-child { color: var(--red-text); }
.ink-cmp .ink-prose td { overflow-wrap: break-word; }

/* Lead summary reads at lede size */
.ink-cmp__lead .ink-prose {
    font-size: 20px;
    line-height: 31px;
    color: var(--ink);
}

/* FAQ question headings keep the summary type */
.ink-faq summary h3 { font: inherit; }

/* Index: comparison cards */
.ink-cmp-card {
    padding: 30px var(--pad) 32px;
    min-height: 100%;
}
.ink-cmp-card .ink-card__head { gap: 20px; }
.ink-cmp-card .ink-h3 { text-wrap: balance; }
.ink-cmp-card p { margin-top: 14px; }
.ink-cmp-card .ink-link { margin-top: 24px; align-self: flex-start; }
.ink-cmp-card__body { flex: 1; }

.ink-cmp-index .ink-definition .ink-cell:last-child > * + * { margin-top: 16px; }

/* Filler cell so the auto-ruled grid never shows an ink hole */
.ink-cmp-fill--1 { grid-column: span 1; }
.ink-cmp-fill--2 { grid-column: span 2; }

/* Links inside running copy outside .ink-prose */
.ink a.ink-cmp-inline {
    color: var(--red-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--red);
}
.ink a.ink-cmp-inline:hover { color: var(--ink); text-decoration-color: var(--ink); }

.ink-cmp-index .ink-definition p.ink-cmp-disclaimer {
    font-size: 15px;
    line-height: 23px;
    color: var(--grey-700);
}

@media (max-width: 860px) {
    .ink-cmp-fill { display: none; }
    .ink-cmp__lead .ink-prose { font-size: 18px; line-height: 29px; }
    .ink-cmp .ink-prose table { font-size: 14px; line-height: 21px; }
    .ink-cmp .ink-prose th,
    .ink-cmp .ink-prose td { padding-right: 10px; }
    .ink-cmp .ink-prose th:first-child,
    .ink-cmp .ink-prose td:first-child { width: 30%; }
    .ink-cmp .ink-prose th { font-size: 11px; letter-spacing: 0.08em; }
}