/* blz_compare_table — the 4-way comparison table (.cmp, from the L1
   Comparison Chart 2017.05.08), ported verbatim from build-practice.py
   PRACTICE_CSS with design tokens swapped to --blz-*. The design's #compare
   band rules are adapted to the module class .blz-compare on the section. */

/* wide band: 1560px wrap + centered section head (was #compare .wrap/#compare .sec-head) */
.blz-wrap--wide { max-width: 1560px; }
.blz-compare .blz-sec-head { display: block; text-align: center; }
.blz-compare .blz-sec-head .blz-eyebrow { justify-content: center; }
.blz-compare .blz-sec-head .blz-sec-title { margin-left: auto; margin-right: auto; }
.blz-compare .blz-sec-head .blz-sec-side { margin: 18px auto 0; }

.cmp-scroll { margin-top: 56px; background: var(--blz-card-bg); border: 1px solid var(--blz-line); border-radius: var(--blz-radius); box-shadow: var(--blz-shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* border-collapse:separate on purpose — sticky cells inside border-collapse
   tables don't paint their backgrounds (Chrome bug) */
.cmp { width: 100%; min-width: 920px; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--blz-ink-soft); line-height: 1.5; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--blz-line-2); }
.cmp thead th { background: var(--blz-card-bg); border-bottom: 1px solid var(--blz-line); font-family: var(--blz-sans); font-size: 15.5px; font-weight: 700; color: var(--blz-ink); vertical-align: bottom; padding-top: 24px; }
.cmp thead th .ck-chip { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blz-accent-2); margin-bottom: 7px; }
.cmp thead th a { display: block; width: max-content; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--blz-accent-2); text-decoration: none; }
.cmp thead th a:hover { color: var(--blz-accent); }
.cmp thead th.hl { box-shadow: inset 0 3px 0 var(--blz-accent-2); }
.cmp tbody th { font-weight: 700; color: var(--blz-ink); font-size: 13.5px; min-width: 170px; max-width: 210px; }
.cmp thead th:first-child, .cmp tbody th { position: sticky; left: 0; background: var(--blz-card-bg); z-index: 2; border-right: 1px solid var(--blz-line-2); }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th { background: #FAF7F2; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: none; }
.cmp .ck { color: var(--blz-accent-2); font-weight: 700; }
@media (max-width: 640px) { .cmp th, .cmp td { padding: 13px 14px; } .cmp tbody th { min-width: 112px; max-width: 130px; font-size: 12.5px; } .cmp { min-width: 820px; } }

/* footnote fine print (design .note-fine; centered like the compare band's) */
.note-fine { font-size: 13px; color: var(--blz-mute); margin-top: 22px; max-width: 70ch; }
.blz-compare .note-fine { text-align: center; margin: 36px auto 0; }
.blz-band--dark .note-fine { color: var(--blz-on-dark-soft); }