/* Article layout — loaded IN ADDITION to styles.css, never instead of it.
   All tokens come from styles.css; nothing is redefined here. */

.article { max-width: var(--readw); margin: 0 auto; padding: var(--s12) var(--s6) var(--s16); }

.article-head { display: flex; flex-direction: column; gap: var(--s3);
                margin-bottom: var(--s8); }
.article-head h1 { font-size: var(--text-3xl); }
.byline { font-size: var(--text-sm); color: var(--ink-faint); }

.article-hero { margin-bottom: var(--s10); }
.article-hero img { border-radius: var(--radius); }

.article-body h2 { margin: var(--s12) 0 var(--s4); }
.article-body h3 { margin: var(--s8) 0 var(--s3); }
.article-body p { margin-bottom: var(--s4); color: var(--ink-muted); }
.article-body ul { margin: 0 0 var(--s4); padding-left: var(--s5); color: var(--ink-muted); }
.article-body li { margin-bottom: var(--s2); }
.article-body strong { color: var(--ink); }

.article-body figure { margin: var(--s10) 0; }
.article-body figure img { border-radius: var(--radius); }
.article-body figcaption { font-size: var(--text-xs); color: var(--ink-faint);
                           margin-top: var(--s3); }

/* Cost tables. Wide content scrolls in its own container so the page body
   never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: var(--s6) 0 var(--s4); }
.cost-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
              font-size: var(--text-sm); min-width: 32rem; }
.cost-table th, .cost-table td { text-align: left; padding: var(--s3) var(--s4);
                                 border-bottom: 1px solid var(--line); }
.cost-table th { font-size: var(--text-xs); text-transform: uppercase;
                 letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.cost-table td:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.table-note { font-size: var(--text-xs); color: var(--ink-faint); }

/* In-article CTA */
.deal-cta { background: var(--brand-dark); color: #fff; border-radius: var(--radius);
            padding: var(--s8); margin: var(--s12) 0; display: flex;
            flex-direction: column; gap: var(--s4); align-items: flex-start; }
.deal-cta h3 { color: #fff; margin: 0; }
.deal-cta p { color: #C6D2CB; margin: 0; }

.back-link { display: inline-block; margin-top: var(--s8); font-weight: 600;
             font-size: var(--text-sm); }

/* Sources block — every figure on this site is traceable. */
.sources { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--line);
           font-size: var(--text-xs); color: var(--ink-faint); }
.sources h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em;
              color: var(--ink-faint); margin: 0 0 var(--s3); }
.sources ul { margin: 0; padding-left: var(--s5); }
.sources li { margin-bottom: var(--s2); }