/* Content pages: prose, headings, tables and the read-next links on top of design.css; no demo styles. */
.article { padding-block: 56px 72px; }
.article > :is(h1, h2, p, ul, ol) { max-width: 72ch; }
.article h1 { font-size: 56px; letter-spacing: -.04em; line-height: 1.05; }
.article h2 { margin-top: 48px; font-size: 29px; font-weight: 500; letter-spacing: -1px; line-height: 1.2; }
.article p, .article li { font-size: 18px; line-height: 1.6; color: #3d4139; }
.article h1 + p { max-width: 62ch; margin-top: 24px; font-size: 21px; line-height: 1.5; color: var(--ink); }
.article h2 + * { margin-top: 14px; }
.article :is(ul, ol) { margin-bottom: 0; padding-left: 1.2em; }
.article li + li { margin-top: 6px; }
.article :is(ul, ol, table, p) + p { margin-top: 14px; }
.article :is(table.matrix, table.compare) { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.article :is(th, td) { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article tbody th { font-weight: 550; }
/* Eyebrow labels in a darker grey than --muted, for 4.5:1 contrast on the paper background. */
.article thead th, .article td[data-label]::before, .read-next .eyebrow { font: 11px/1.5 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #5d6157; }
.marks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.read-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; max-width: 72ch; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); }
.read-next a { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.read-next a:hover { color: #608722; }
.read-next svg { width: 18px; height: 18px; }
.article .button { margin-top: 36px; }
@media(max-width:600px) {
 .article { padding-block: 36px 48px; }
 .article h1 { font-size: 40px; }
 .article h2 { margin-top: 36px; font-size: 24px; }
 .article p, .article li { font-size: 16px; }
 .article h1 + p { font-size: 18px; }
 .article :is(table.matrix, table.compare), .article tbody, .article tr { display: block; }
 .article thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .article tr { padding-block: 10px; border-bottom: 1px solid var(--line); }
 .article tbody th { display: block; padding: 0 0 4px; border: 0; }
 .article td { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 12px; padding: 6px 0; border: 0; }
 .article td[data-label]::before { content: attr(data-label); }
}