.article-heading { padding-block:32px; border-bottom:1px solid var(--line); }
.article-heading h1 { max-width:1000px; font-size:44px; line-height:1.15; margin-bottom:22px; }
.article-heading .article-lead { max-width:860px; font-size:18px; }
.article-heading .article-date { font-size:12px; margin-top:20px; color:var(--muted); }
.article-layout { display:grid; grid-template-columns:minmax(180px,260px) minmax(0,760px); gap:64px; align-items:start; padding-block:40px 64px; }
.article-contents { position:sticky; top:110px; max-height:calc(100vh - 140px); overflow:auto; padding-right:12px; }
.article-contents h2 { font-size:15px; margin-bottom:16px; }
.article-contents a { display:block; font-size:13px; line-height:1.5; padding:9px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.article-contents a:hover { color:var(--red); text-decoration:underline; }
.article-body { min-width:0; }
.article-answer { border-left:3px solid var(--red); padding-left:24px; margin-bottom:32px; }
.article-answer h2 { font-size:26px; line-height:1.3; margin-bottom:16px; }
.article-answer p:not(.eyebrow) { font-size:16px; line-height:1.75; }
.article-copy { font-size:16px; line-height:1.8; }
.article-copy p { font-size:16px; line-height:1.8; margin:0 0 20px; }
.article-copy h2 { font-size:29px; line-height:1.3; margin:40px 0 20px; scroll-margin-top:112px; }
.article-copy h3 { font-size:21px; line-height:1.4; margin:26px 0 14px; }
.article-copy ul,.article-copy ol { padding-left:24px; margin:18px 0 28px; }
.article-copy li { margin:10px 0; }
.article-copy a,.article-related a { text-decoration:underline; text-underline-offset:4px; }
.article-copy a:hover,.article-related a:hover { color:var(--red); }
.article-copy figure { margin:0 0 30px; }
.article-copy figure img { width:100%; height:auto; display:block; }
.article-copy figcaption { font-size:13px; color:var(--muted); line-height:1.6; padding-top:12px; }
.article-note { border-block:1px solid var(--line); padding-block:20px; margin-block:28px; }
.article-note>span { font-size:12px; font-weight:700; color:var(--red); }
.article-note h3 { margin-top:12px; }
.article-related { border-top:1px solid var(--line); padding-top:20px; margin-top:32px; }
.article-related h2 { font-size:25px; margin:0 0 18px; }
.article-related ul { padding-left:20px; }
.article-related li { padding-block:6px; font-size:15px; }
.article-copy details { border-bottom:1px solid var(--line); }
.article-copy summary { font-size:16px; line-height:1.5; }
.article-copy .faq-answer { display:block; }
.article-copy .faq-answer p { margin-bottom:0; }
.article-models { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.article-model-image { display:block; aspect-ratio:1; }
.article-model-image img { width:100%; height:100%; object-fit:contain; }
.article-checklist>li { padding-left:8px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.article-final-cta h2 { max-width:680px; }
.article-final-cta .button { flex-shrink:0; }
@media(max-width:1000px) {
 .article-layout { grid-template-columns:1fr; gap:32px; max-width:820px; }
 .article-contents { position:static; max-height:none; padding-right:0; }
 .article-contents nav { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
 .article-contents h2 { grid-column:1/-1; }
 .article-heading h1 { font-size:38px; }
}
@media(max-width:560px) {
 .article-heading { padding-block:26px; }
 .article-heading h1 { font-size:32px; }
 .article-heading .article-lead { font-size:16px; }
 .article-layout { padding-block:26px 44px; }
 .article-contents nav { grid-template-columns:1fr; }
 .article-answer { padding-left:18px; }
 .article-answer h2 { font-size:24px; }
 .article-copy h2 { font-size:26px; }
 .article-copy h3 { font-size:20px; }
 .article-models { gap:18px; }
}
