/* Guide articles (search landing pages). Loads after landing.css and reuses its tokens,
   buttons, topbar, FAQ, download band and footer; this file only sets the reading column. */

.article { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px); }
.article__col { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }

.article h1 {
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem);
  letter-spacing: -0.035em;
  margin: 18px 0 24px;
}
.article__lede { font-size: var(--t-lg); color: var(--ink-1); line-height: 1.5; }
.article__lede + .actions { margin-top: 28px; }

.article h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  margin: clamp(48px, 6vw, 72px) 0 18px;
}
.article h3 { margin: 32px 0 12px; }
.article p, .article ul, .article ol, .article table { color: var(--ink-2); }
.article p + p, .article p + ul, .article ul + p, .article p + ol, .article ol + p { margin-top: 16px; }
.article strong { color: var(--ink-1); }
.article ul, .article ol { display: grid; gap: 10px; padding-left: 1.4em; }
.article ul { list-style: square; }
.article ol { list-style: decimal; }
.article li::marker { color: var(--accent-heat); }

.answer {
  margin-top: 40px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--accent-heat);
  border-radius: var(--r-1);
  background: var(--surface-canvas);
}
.answer .kicker { margin-bottom: 10px; }
.answer p { color: var(--ink-1); }

.compare { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: var(--t-sm); }
.compare-wrap { overflow-x: auto; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.compare thead th { color: var(--ink-1); font-weight: 600; border-bottom-color: var(--accent-heat); }
.compare tbody th { color: var(--ink-1); font-weight: 500; }

.cta-band { background: var(--surface-viewer); border-block: 1px solid var(--line); margin-block: clamp(48px, 6vw, 72px); }
.cta-band .nudge__inner { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }

.article .faq { display: block; padding-block: 0; }
.article .faq h2 { margin-bottom: 8px; }

.guides { display: grid; gap: 10px; padding-left: 0 !important; list-style: none !important; }
.guides--hub { gap: 28px; margin-top: 48px; }
.guides--hub a { font-size: var(--t-lg); font-weight: 600; }
.guides--hub p { margin-top: 6px; }

.alts { display: grid; gap: 16px; margin-top: 20px; }
.alt { padding: clamp(16px, 3vw, 24px); border: 1px solid var(--line); border-radius: var(--r-1); }
.alt h3 { margin: 0 0 10px; }
.alt dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin-top: 14px; font-size: var(--t-sm); }
.alt dt { color: var(--ink-1); font-weight: 600; }
.alt dd { color: var(--ink-2); }

.article__shot { margin-top: 32px; }
.article__shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-1); }
.article__shot figcaption { margin-top: 10px; font-size: var(--t-sm); color: var(--ink-fine); }
.article code { overflow-wrap: anywhere; }