:root {
    --bs-primary: #0d6efd;
    --cc-border: #cbd5e1;
    --cc-border-strong: #94a3b8;
    --cc-header-bg: #eef2f7;
    --cc-stripe-bg: #f8fafc;
    --cc-hover-bg: #e9f2ff;
    --cc-text: #1f2937;
    --cc-muted: #6c757d;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1f2937;
    font-size: 1rem;
}

/* ─── Content typography ──────────────────────────────────────────────── */
.content,
.compare-body,
.compare-verdict,
.lead-content,
.listicle-body {
    font-size: 1.0625rem;
    line-height: 1.75;
}
.content { max-width: 78ch; }
.lead-content { font-size: 1.125rem; color: #374151; }
.compare-verdict {
    background: #f8f9fa;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #198754;
    margin-bottom: 1rem;
}

.content > * + * { margin-top: 1rem; }
.content h2,
.compare-body h2,
.listicle-body h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.3;
    color: #111827;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e9ecef;
}
.content h3,
.compare-body h3,
.listicle-body h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1.25rem;
    color: #1f2937;
}
.content p,
.compare-body p,
.compare-verdict p,
.lead-content p,
.listicle-body p { line-height: 1.75; }

.content ul, .content ol,
.compare-body ul, .compare-body ol,
.listicle-body ul, .listicle-body ol {
    line-height: 1.75;
    padding-left: 1.5rem;
}
.content li + li,
.compare-body li + li,
.listicle-body li + li { margin-top: 0.25rem; }

.content strong,
.compare-body strong,
.compare-verdict strong,
.lead-content strong,
.listicle-body strong { color: #111827; font-weight: 600; }

.content a,
.compare-body a,
.compare-verdict a,
.lead-content a,
.listicle-body a {
    color: #0d6efd;
    text-decoration: none;
    border-bottom: 1px solid rgba(13, 110, 253, 0.25);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.content a:hover,
.compare-body a:hover,
.compare-verdict a:hover,
.lead-content a:hover,
.listicle-body a:hover {
    color: #0a58ca;
    border-bottom-color: #0a58ca;
}

.content blockquote,
.compare-body blockquote,
.listicle-body blockquote {
    border-left: 4px solid #0d6efd;
    background: #f8f9fa;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    color: #495057;
    font-style: italic;
    border-radius: 0 0.375rem 0.375rem 0;
}

.content code,
.compare-body code,
.listicle-body code {
    background: #f1f4f8;
    color: #d63384;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.content hr,
.compare-body hr,
.listicle-body hr {
    margin: 2.5rem 0;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #dee2e6, transparent);
}

/* ─── Tables — applies to all markdown-rendered content containers ────── */
.content table,
.compare-body table,
.compare-verdict table,
.lead-content table,
.listicle-body table {
    width: 100%;
    margin: 1.75rem 0;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
    background: #ffffff !important;
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: table;
}

.content table thead,
.compare-body table thead,
.compare-verdict table thead,
.lead-content table thead,
.listicle-body table thead {
    background: #eef2f7 !important;
}

.content table thead th,
.compare-body table thead th,
.compare-verdict table thead th,
.lead-content table thead th,
.listicle-body table thead th {
    font-weight: 700;
    color: #0f172a;
    text-align: left;
    padding: 0.85rem 1rem !important;
    border-bottom: 2px solid #94a3b8 !important;
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-size: 0.9375rem;
}

.content table tbody tr,
.compare-body table tbody tr,
.compare-verdict table tbody tr,
.lead-content table tbody tr,
.listicle-body table tbody tr {
    transition: background-color 0.15s ease;
}

.content table tbody tr:nth-child(odd),
.compare-body table tbody tr:nth-child(odd),
.compare-verdict table tbody tr:nth-child(odd),
.lead-content table tbody tr:nth-child(odd),
.listicle-body table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}

.content table tbody tr:nth-child(even),
.compare-body table tbody tr:nth-child(even),
.compare-verdict table tbody tr:nth-child(even),
.lead-content table tbody tr:nth-child(even),
.listicle-body table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

.content table tbody tr:hover,
.compare-body table tbody tr:hover,
.compare-verdict table tbody tr:hover,
.lead-content table tbody tr:hover,
.listicle-body table tbody tr:hover {
    background: #e9f2ff !important;
}

.content table tbody td,
.compare-body table tbody td,
.compare-verdict table tbody td,
.lead-content table tbody td,
.listicle-body table tbody td {
    padding: 0.7rem 1rem !important;
    vertical-align: top;
    color: #1f2937;
    border-bottom: 1px solid #cbd5e1 !important;
}

.content table tbody tr:last-child td,
.compare-body table tbody tr:last-child td,
.compare-verdict table tbody tr:last-child td,
.lead-content table tbody tr:last-child td,
.listicle-body table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.content table tbody td + td,
.compare-body table tbody td + td,
.compare-verdict table tbody td + td,
.lead-content table tbody td + td,
.listicle-body table tbody td + td,
.content table thead th + th,
.compare-body table thead th + th,
.compare-verdict table thead th + th,
.lead-content table thead th + th,
.listicle-body table thead th + th {
    border-left: 1px solid #cbd5e1 !important;
}

.content table tbody td strong,
.compare-body table tbody td strong,
.compare-verdict table tbody td strong,
.lead-content table tbody td strong,
.listicle-body table tbody td strong {
    color: #111827;
}

/* Right-align numeric columns (Markdown ---: syntax becomes <th align="right">/<td align="right">) */
.content table th[align="right"],
.compare-body table th[align="right"],
.compare-verdict table th[align="right"],
.lead-content table th[align="right"],
.listicle-body table th[align="right"],
.content table td[align="right"],
.compare-body table td[align="right"],
.compare-verdict table td[align="right"],
.lead-content table td[align="right"],
.listicle-body table td[align="right"] {
    text-align: right;
}
.content table th[align="center"],
.compare-body table th[align="center"],
.compare-verdict table th[align="center"],
.lead-content table th[align="center"],
.listicle-body table th[align="center"],
.content table td[align="center"],
.compare-body table td[align="center"],
.compare-verdict table td[align="center"],
.lead-content table td[align="center"],
.listicle-body table td[align="center"] {
    text-align: center;
}

/* Horizontal scroll on narrow viewports */
@media (max-width: 768px) {
    .content table,
.compare-body table,
.compare-verdict table,
.lead-content table,
.listicle-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }
    .content table thead th,
.compare-body table thead th,
.compare-verdict table thead th,
.lead-content table thead th,
.listicle-body table thead th,
    .content table tbody td,
.compare-body table tbody td,
.compare-verdict table tbody td,
.lead-content table tbody td,
.listicle-body table tbody td {
        white-space: normal;
        min-width: 120px;
        padding: 0.5rem 0.75rem !important;
    }
}

/* ─── Navbar polish ───────────────────────────────────────────────────── */
.navbar-brand .text-primary { color: #0d6efd !important; }
.navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.nav-link {
    font-weight: 500;
    color: #374151 !important;
    transition: color 0.15s ease;
}
.nav-link:hover { color: #0d6efd !important; }

/* ─── Footer polish ───────────────────────────────────────────────────── */
footer h5 { font-weight: 700; letter-spacing: -0.01em; }
footer .text-white-75 { color: rgba(255, 255, 255, 0.75); }
footer a:hover { color: #ffffff !important; }