.article-header { display: grid; gap: var(--space-5); align-items: center; }
.article-header-copy { min-width: 0; }
.article-illustration { width: 100%; max-height: 22rem; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.article-meta { color: var(--color-text-secondary); font-size: var(--text-sm); }
.article-layout { display: grid; gap: var(--space-5); align-items: start; }
.article-body { min-width: 0; }
.article-body.standalone { max-width: var(--reading-width); }
.article-body > section, .article-body.standalone { margin-bottom: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.article-body h2 { margin-top: 0; margin-bottom: var(--space-3); font-size: var(--text-2xl); line-height: 1.25; }
.article-body h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.article-body p, .article-body li, .article-body dd { max-width: 72ch; }
.article-body a { font-weight: 650; }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li + li { margin-top: var(--space-2); }
.article-rail { display: grid; gap: var(--space-4); }
.rail-card, .commercial-panel { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rail-card h2, .commercial-panel h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.rail-card ul { padding-left: 1.2rem; }
.verdict-summary { border-left: 4px solid var(--color-brand-teal) !important; background: var(--color-surface-subtle) !important; }
.verdict-summary h2 { font-size: var(--text-xl); }
.verdict-summary dl { margin-bottom: 0; display: grid; gap: var(--space-3); }
.verdict-summary dl > div { display: grid; gap: var(--space-1); }
.verdict-summary dt { font-weight: 800; }
.verdict-summary dd { margin: 0; color: var(--color-text-secondary); }
.pros-cons { display: grid; gap: var(--space-3); }
.pros-cons > div { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.table-scroll:focus-visible { outline-offset: 2px; }
.table-scroll table { width: 100%; min-width: 36rem; background: var(--color-surface); }
.table-scroll th, .table-scroll td { padding: 0.75rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.table-scroll thead th { background: var(--color-surface-subtle); color: var(--color-brand-navy); }
.comparison-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 8.5rem; background: var(--color-surface-subtle); }
.scroll-hint { color: var(--color-text-secondary); font-size: var(--text-sm); }
.task-meta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.task-meta span { padding: 0.4rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-sm); }
.steps-list { counter-reset: step; list-style: none; padding-left: 0 !important; }
.steps-list > li { position: relative; min-height: 3rem; padding-left: 3.25rem; }
.steps-list > li + li { margin-top: var(--space-5); }
.steps-list > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-brand-navy); color: var(--color-on-dark); font-weight: 800; }
.safety-note { border-color: #d8b077 !important; background: #fff8ed !important; }