/* Article reading surface. Inherits Commerce Spine's existing palette and type. */
body { overflow-x: visible; }
.article-layout { max-width: 1040px; padding-top: 112px; padding-bottom: 100px; }
.article-heading { max-width: 820px; padding-bottom: 40px; }
.article-heading h1 { font-size: clamp(2.25rem, 4vw, 3.6rem); line-height: 1.14; margin: 24px 0; }
.article-heading p { color: var(--ink-2); font-size: 1.2rem; max-width: 65ch; }
.article-toc { border-block: 1px solid var(--line); padding: 28px 0; margin-bottom: 48px; }
.article-toc h2 { font-size: 1rem; margin-bottom: 12px; }
.article-toc ol { display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: none; }
.article-toc a, .article-body a:not(.btn) { color: var(--sky-2); text-underline-offset: 4px; }
.article-toc a { display: inline-block; padding: 8px 0; }
.article-body { max-width: 72ch; font-size: 1.05rem; line-height: 1.85; }
.article-body section { padding: 0; }
.article-body h2 { font-size: 1.65rem; line-height: 1.3; margin: 48px 0 18px; scroll-margin-top: 110px; }
.article-body p { color: var(--ink-2); margin-bottom: 22px; overflow-wrap: anywhere; }
.article-body ol, .article-body ul { padding-left: 24px; }
.article-body li { margin-bottom: 10px; }
.article-cta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; margin: 48px 0 28px; }
.article-cta h2 { margin: 0 0 24px; }
.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.article-share a { padding-block: 10px; }
.article-related { margin-top: 40px; }
@media (max-width: 600px) {
  .article-layout { padding: 112px 22px 64px; }
  .article-heading { padding-bottom: 28px; }
  .article-heading p { font-size: 1.05rem; }
  .article-toc ol { display: block; }
  .article-body { font-size: 1rem; }
  .article-cta { padding: 24px; }
  .article-share span { flex-basis: 100%; }
}
/* Shared SEO machine article standard (23 Sep): TL;DR, visual, FAQ, author, preferred source */
.article-tldr { max-width: 72ch; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--sky); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 20px 24px; margin: 0 0 36px; }
.article-tldr p { margin: 0; color: var(--ink); line-height: 1.75; }
.article-visual { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin: 36px 0; color: var(--ink); --seo-accent: var(--sky); }
.article-visual svg { display: block; }
.article-visual figcaption { color: var(--ink-3); font-size: .85rem; margin-top: 12px; line-height: 1.5; }
.article-visual.article-featured { padding: 0; overflow: hidden; margin-top: 8px; }
.article-featured svg { width: 100%; height: auto; }
.article-faq h3 { font-size: 1.1rem; margin: 28px 0 10px; }
.article-author { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; color: var(--ink-2); font-size: .95rem; }
.article-source { color: var(--ink-3); font-size: .95rem; }
@media (max-width: 600px) { .article-visual { padding: 16px; } }
/* Comparison table: own column first, scrolls sideways inside its box on small screens */
.article-table { overflow-x: auto; margin: 8px 0 32px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.article-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.55; }
.article-table th, .article-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); min-width: 9rem; }
.article-table thead th { color: var(--ink); background: var(--panel); font-weight: 700; }
.article-table tbody th { color: var(--ink); font-weight: 600; }
.article-table tr:last-child > * { border-bottom: 0; }
@media (max-width: 600px) {
  .article-table table { font-size: .85rem; line-height: 1.45; }
  .article-table th, .article-table td { padding: 10px 8px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .article-table tbody th { width: 29%; overflow-wrap: normal; hyphens: manual; }
}