/* Comparison reading page — companion to whitepaper.css. */

.cmp-cover {
    min-height: 346px;
    border: 1px solid var(--border-hi);
    border-radius: 24px;
    background: linear-gradient(155deg, var(--surface), var(--bg-2));
    box-shadow: var(--shadow);
    padding: 28px;
    position: relative;
    overflow: hidden;
}
.cmp-cover::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 9px;
    background: var(--grad-bright);
}
.cmp-cover .cmp-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.cmp-cover .cmp-chip {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.cmp-cover .cmp-chip b { font-size: 0.95rem; letter-spacing: -0.01em; }
.cmp-cover .cmp-chip span { color: var(--text-faint); font-size: 0.78rem; }
.cmp-cover .cmp-chip.nf { border-color: var(--violet); }

.cmp-identities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
}
.cmp-identities > article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    min-width: 0;
}
.cmp-identities .nf { border-color: var(--violet); box-shadow: inset 0 0 0 1px rgba(189, 162, 255, 0.28); }
.cmp-identities .kicker { margin-bottom: 8px; }
.cmp-identities h3 { margin: 0 0 12px; font-size: 1.18rem; }
.cmp-identities p { margin: 0; font-size: 0.98rem; line-height: 1.7; }

.cmp-diagrams {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
}
.cmp-diagrams figure {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px 16px 14px;
}
.cmp-diagrams h3 { margin: 0 0 12px; font-size: 1rem; }
.cmp-diagrams svg { display: block; width: 100%; height: auto; }
.cmp-diagrams figcaption {
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-faint);
}

.cmp-table th:nth-child(2),
.cmp-table td:nth-child(2) {
    background: rgba(189, 162, 255, 0.10);
    color: var(--text);
}
.cmp-table th:nth-child(2) { color: var(--violet-hi); }
.cmp-table .cmp-axis {
    color: var(--text);
    font-weight: 650;
    white-space: nowrap;
}

.cmp-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
}
.cmp-picks article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
}
.cmp-picks .nf { border-color: var(--violet); }
.cmp-picks h3 { margin: 0 0 12px; }
.cmp-picks ul { margin: 0; padding-left: 18px; color: var(--text-dim); }
.cmp-picks li { margin: 8px 0; font-size: 0.95rem; line-height: 1.6; }

@media (max-width: 900px) {
    .cmp-identities, .cmp-diagrams, .cmp-picks { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .cmp-cover { display: none; }
}