/* Homepage-only extras: the key-takeaway callout and the problem/solution comparison table.
   Pulled out of css/blog-tools.css and css/blog-enhance.css (built for article pages) so the
   homepage doesn't load their full ~30KB for a handful of rules. Keep in sync by hand if those
   two components' styling changes. */
.bt-out { padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); }
.bt-out.hl { border-color: rgba(203,31,44,0.5); background: rgba(203,31,44,0.1); }
.bt-out b.big { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; color: #fff; line-height: 1.15; }
.bt-out p { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.6; color: #d2d2d2; }

.bx-table { overflow-x: auto; margin: 28px 0; border-radius: 14px; border: 1px solid var(--glass-border); background: #121212; -webkit-overflow-scrolling: touch; }
.bx-table table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; font-size: 0.92rem; }
.bx-table th { background: linear-gradient(180deg, rgba(203,31,44,0.35), rgba(203,31,44,0.18)); color: #fff; text-align: left; padding: 13px 16px; font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.bx-table td { padding: 13px 16px; border-top: 1px solid rgba(255,255,255,0.08); color: #dcdcdc; vertical-align: top; }
.bx-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.bx-table tbody tr { transition: background .2s; }
.bx-table tbody tr:hover td { background: rgba(203,31,44,0.1); }