/* Article layout uses the homepage's Wariai theme; no separate dark palette. */
.percentage-points-page article { color: var(--text); }
.percentage-points-page .blog-header {
    max-width: 1100px;
    margin: 32px auto 0;
    padding: 40px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.percentage-points-page .blog-header h1 {
    font-family: var(--font);
    color: var(--text);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.5;
}
.percentage-points-page .blog-header .lead,
.percentage-points-page .blog-header small { color: #475569; }
.percentage-points-page .blog-header .badge {
    color: var(--text) !important;
    background: var(--bg-muted) !important;
    padding: 8px 12px;
    white-space: normal;
    line-height: 1.5;
}
.percentage-points-page .author-avatar { border-radius: 50%; object-fit: cover; }
.percentage-points-page .blog-content {
    max-width: 960px;
    margin: 32px auto;
    padding: 32px;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 1rem;
    line-height: 1.9;
}
.percentage-points-page .blog-content h2,
.percentage-points-page .blog-content h3 { color: var(--text); line-height: 1.6; margin: 2rem 0 1rem; scroll-margin-top: 100px; }
.percentage-points-page .blog-content h2 { font-size: 1.6rem; }
.percentage-points-page .blog-content h3 { font-size: 1.2rem; }
.percentage-points-page .blog-content p,
.percentage-points-page .blog-content li { color: var(--text); }
.percentage-points-page .blog-content li { margin-bottom: 8px; }
.percentage-points-page .blog-content a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.percentage-points-page .blog-content a:hover { color: #3730a3; }
.percentage-points-page a:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 3px; }
.percentage-points-page .featured-image { margin: 0 0 24px; }
.percentage-points-page .featured-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.percentage-points-page figcaption { color: #475569; font-size: .875rem; margin-top: 12px; }
.percentage-points-page .author-box,
.percentage-points-page .table-of-contents,
.percentage-points-page .key-takeaway,
.percentage-points-page .chart-container {
    padding: 24px;
    margin: 24px 0;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
}
.percentage-points-page .table-of-contents h2,
.percentage-points-page .key-takeaway h3,
.percentage-points-page .chart-container h3 { margin-top: 0; }
.percentage-points-page .section-divider { border-color: var(--border); opacity: 1; margin: 32px 0; }
.percentage-points-page .table-responsive { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.percentage-points-page .table { --bs-table-bg: var(--bg-card); --bs-table-color: var(--text); --bs-table-striped-bg: var(--bg-muted); --bs-table-striped-color: var(--text); --bs-table-hover-bg: #eef2ff; --bs-table-hover-color: var(--text); margin: 0; min-width: 640px; }
.percentage-points-page .table th,
.percentage-points-page .table td { padding: 14px 16px; min-width: 120px; word-break: normal; overflow-wrap: break-word; }
.percentage-points-page .table thead { --bs-table-bg: var(--bg-muted); --bs-table-color: var(--text); }
@media (max-width: 767px) {
    .percentage-points-page .blog-header { margin: 16px 12px 0; padding: 24px 4px; }
    .percentage-points-page .blog-content { margin: 16px 12px; padding: 20px 16px; }
    .percentage-points-page .blog-header .lead { font-size: 1rem; }
    .percentage-points-page .blog-content h2 { font-size: 1.35rem; }
    .percentage-points-page .author-box,
    .percentage-points-page .table-of-contents,
    .percentage-points-page .key-takeaway,
    .percentage-points-page .chart-container { padding: 16px; }
}