/* ============================================================
   AmigoPDF — how-to / guide article styles
   Used by the how-to-*.html topic-cluster pages.
   ============================================================ */

.article-wrap { max-width: 820px; margin: 0 auto; padding: clamp(20px,4vw,44px) clamp(16px,4vw,40px) 44px; }
.article-wrap .eyebrow { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.article-wrap h1 { font-family: var(--font-display); font-size: clamp(1.8rem,3.8vw,2.5rem); letter-spacing: -.02em; line-height: 1.14; margin: 8px 0 12px; }
.article-wrap .standfirst { color: var(--ink-2); font-size: 1.08rem; max-width: 62ch; margin-bottom: 6px; }
.article-wrap h2 { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.015em; margin: 36px 0 8px; }
.article-wrap h3 { font-size: 1.05rem; margin: 18px 0 4px; }
.article-wrap p { max-width: 68ch; margin: 12px 0; }
.article-wrap a { color: var(--sig); }
.article-wrap ul, .article-wrap ol { max-width: 68ch; margin: 12px 0 12px 20px; }
.article-wrap li { margin: 6px 0; }

/* numbered steps with a connecting line */
.steps-list { list-style: none; counter-reset: step; padding: 0; margin: 22px 0; }
.steps-list > li { position: relative; padding: 2px 0 22px 58px; }
.steps-list > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--sig); color: var(--sig-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.steps-list > li::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 2px; width: 2px; background: var(--line); }
.steps-list > li:last-child::after { display: none; }
.steps-list h3 { font-size: 1.06rem; margin: 8px 0 2px; }
.steps-list p { margin: 4px 0; color: var(--ink-2); max-width: 60ch; }

.callout { background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--sig); border-radius: 8px; padding: 14px 18px; margin: 18px 0; max-width: 68ch; }
.callout.good { border-left-color: #2fa34f; }
.callout.warn { border-left-color: var(--flag); }
.callout strong { display: block; margin-bottom: 2px; }
.callout p { margin: 2px 0; }

.cta-band { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 30px 0; text-align: center; }
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0 auto 14px; color: var(--ink-2); max-width: 52ch; }

.faq-block details { border-bottom: 1px solid var(--line); padding: 14px 2px; max-width: 68ch; }
.faq-block summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::after { content: "+"; color: var(--ink-2); }
.faq-block details[open] summary::after { content: "–"; }
.faq-block details p { color: var(--ink-2); margin-top: 8px; }

.disclaimer { color: var(--ink-2); font-size: .85rem; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 14px; max-width: 68ch; }