/* ---------- Blog article page ---------- */
.article { max-width: 780px; margin: 0 auto; }
.article .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.article .crumbs a { color: var(--muted); }
.article .meta { font-size: 12px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.article h1 { font-size: 32px; line-height: 1.25; margin: 12px 0 20px; }
.article h2 { font-size: 22px; margin: 36px 0 12px; }
.article h3 { font-size: 17px; margin: 24px 0 8px; }
.article p, .article li { font-size: 15.5px; line-height: 1.75; color: #c9cdd4; }
.article ul, .article ol { padding-left: 22px; margin: 12px 0; }
.article li { margin: 6px 0; }
.article a { color: var(--accent); }
.article table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.article th, .article td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.article th { background: rgba(255,255,255,0.04); color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.article .callout {
  border-left: 3px solid var(--accent); background: rgba(255,122,0,0.07);
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 22px 0; font-size: 14.5px;
}
.article .faq { border: 1px solid var(--line); border-radius: 12px; padding: 6px 22px; margin: 22px 0; }
.article .faq details { border-bottom: 1px dashed var(--line); padding: 12px 0; }
.article .faq details:last-child { border-bottom: none; }
.article .faq summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.article .faq p { margin: 10px 0 4px; }
.article-cta {
  margin-top: 40px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,122,0,0.10), rgba(0,229,255,0.05));
  padding: 26px 28px;
}
.article-cta h2 { margin: 0 0 8px; font-size: 20px; }
.article-cta p { margin: 0 0 16px; }
.more-articles { margin-top: 46px; }
.more-articles h2 { font-size: 20px; margin-bottom: 16px; }