/* Guide article layout: a reading column for the Guides section (no hero buttons, no demo mockups, one note about us at the end).
   Same font, palette and nav as the rest of the site. Lists and tables use thin rules (DESIGN.md). */
.article-page { background: #fff; }
.article { padding-top: var(--nav-offset); background: #fff; }
.article-head { max-width: calc(680px + 3rem); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 1.75rem; }
.article-kicker { margin: 0 0 .9rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--action-orange-deep); }
.article-head h1 { margin: 0 0 1.1rem; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--text-headline); text-wrap: balance; }
.article-dek { margin: 0 0 1.25rem; font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.55; color: #4a463f; text-wrap: pretty; }
.article-byline { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.article-byline span { white-space: nowrap; }
@media (max-width: 640px) { .article-byline .ab-author { display: block; } .article-byline .ab-sep, .article-byline .ab-pub { display: none; } }
.article-cover { max-width: calc(680px + 3rem); margin: 0 auto; padding: 0 1.5rem; }
.article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 8px; }

.article-body { max-width: calc(680px + 3rem); margin: 0 auto; padding: 2.5rem 1.5rem 1rem; }
.article-body h2 { margin: 3rem 0 .9rem; font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--text-headline); text-wrap: balance; }
.article-body h3 { margin: 1.75rem 0 .45rem; font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: var(--text-headline); }
.article-body p, .article-body li { font-size: 1.075rem; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }
.article-body p { margin: 0 0 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.article-body li { margin: 0 0 .5rem; padding-left: .2rem; }
.article-body li::marker { color: var(--action-orange-deep); font-weight: 700; }
.article-body a, .article-about a, .article-related a { color: var(--action-orange-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body strong { color: var(--text-headline); }
.article-note { font-size: .92rem !important; line-height: 1.6 !important; color: var(--muted) !important; }

/* "In this guide": a plain numbered list between two rules */
.article-toc { margin: 0 0 1rem; padding: 1.1rem 0 .6rem; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.article-toc p { margin: 0 0 .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.article-toc ol { margin: 0; padding-left: 1.3rem; }
.article-toc li { margin: 0 0 .45rem; font-size: 1rem; line-height: 1.5; }
@media (min-width: 641px) { .article-toc ol { columns: 2; column-gap: 2.5rem; } .article-toc li { break-inside: avoid; } }

/* Tables: wider than the text column on desktop, thin rules, stacked rows on phones */
.article-wide { margin: 1.5rem 0 1rem; }
.article-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.55; color: var(--text-body); }
.article-table caption { text-align: left; }
.article-table thead th { padding: 0 1rem .7rem 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 2px solid var(--text-headline); }
.article-table tbody th, .article-table td { padding: .85rem 1rem .85rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-border); }
.article-table tbody th { width: 17%; font-weight: 700; color: var(--text-headline); }
.article-table td a { color: var(--action-orange-deep); text-underline-offset: 3px; }
.article-wide .article-note { margin-top: .8rem; }
@media (max-width: 700px) {
  .article-wide { width: auto; margin-left: 0; transform: none; }
  .article-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .article-table, .article-table tbody, .article-table tr, .article-table th, .article-table td { display: block; width: auto; }
  .article-table tr { padding: .9rem 0 .4rem; border-top: 1px solid var(--card-border); }
  .article-table tbody th { width: auto; padding: 0 0 .5rem; border: 0; font-size: 1.02rem; }
  .article-table td { padding: 0 0 .6rem; border: 0; }
  .article-table td::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
}

/* The one note about us, then the question box and related guides */
.article-about { max-width: calc(680px + 3rem); margin: 2.5rem auto 0; padding: 1.4rem 1.5rem 0; }
.article-about > div { padding-top: 1.2rem; border-top: 2px solid var(--text-headline); }
.article-about h2 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; color: var(--text-headline); }
.article-about p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text-body); }

.article-ask { max-width: calc(680px + 3rem); margin: 0 auto; padding: 3rem 1.5rem 1rem; }
.article-ask h2, .article-related h2 { margin: 0 0 .5rem; font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; color: var(--text-headline); }
.article-ask > p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--text-body); }
.article-ask .audit-form { max-width: none; margin: 0; }
.article-ask .btn-full { width: 100%; max-width: none; }
.article-ask .guide-ask-row { display: grid; gap: 0 1rem; }
@media (min-width: 641px) { .article-ask .guide-ask-row { grid-template-columns: 1fr 1fr; } }
.article-ask .form-microcopy a { color: var(--action-orange-deep); }

.article-related { max-width: calc(680px + 3rem); margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.article-related ul { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--card-border); }
.article-related li { padding: 1rem 0; border-bottom: 1px solid var(--card-border); }
.article-related h3 { margin: 0 0 .3rem; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.article-related p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--text-body); }
.article-worksheet td { line-height: 1.7; }
.ws-blank { display: inline-block; min-width: 7.5em; padding: 0 .2em 0 0; border-bottom: 1.5px solid var(--text-headline); font-weight: 700; color: var(--text-headline); }