/* Article system R4 — answer box, takeaways, TOC, FAQ, author box, read-next, blog index clusters. */
.blog-article strong { color: var(--text, #0f172a); }
.blog-article h3 { color: var(--text, #0f172a); margin: 26px 0 10px; font-size: 19px; line-height: 1.3; }
.blog-article ul { margin: 0 0 22px 22px; }
.blog-article ul li, .blog-article ol li { color: var(--text-dim, #334155); line-height: 1.65; }
.blog-article h2[id], .blog-article section[id] { scroll-margin-top: 84px; }
.byline-r4 { margin-top: 14px !important; font-size: 14px !important; color: #526174 !important; }
.byline-r4 a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.answer-r4 { margin: 0 0 22px; padding: 20px 22px; border-left: 4px solid #2563eb; border-radius: 10px; background: #eff6ff; }
.answer-r4 h2 { margin: 0 0 8px !important; font-size: 15px !important; letter-spacing: .08em; text-transform: uppercase; color: #1d4ed8 !important; }
.answer-r4 p { margin: 0 !important; color: #0f172a !important; font-size: 17px; line-height: 1.65; }
.takeaways-r4 { margin: 0 0 22px; padding: 18px 22px; border: 1px solid #dbe3ee; border-radius: 10px; background: #f8fafc; }
.takeaways-title-r4 { margin: 0 0 8px !important; font-size: 16px !important; }
.takeaways-r4 ul { margin: 0 0 0 20px; }
.toc-r4 { margin: 0 0 30px; padding: 16px 22px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.toc-title-r4 { margin: 0 0 6px !important; font-weight: 800; color: #0f172a !important; }
.toc-r4 ol { margin: 0 0 0 20px !important; columns: 2 260px; column-gap: 28px; }
.toc-r4 li { margin: 4px 0 !important; break-inside: avoid; }
.blog-article .note-r4 { margin: 22px 0; padding: 16px 20px; border-radius: 10px; background: #fefce8; border: 1px solid #fde68a; }
.blog-article .note-r4 p:last-child { margin-bottom: 0; }
.blog-article figure.inline-r4 { margin: 24px 0; text-align: center; }
.blog-article figure.inline-r4 img { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.blog-article figure.inline-r4 figcaption { margin-top: 8px; font-size: 14px; color: #64748b; }
.faq-wrap-r4 { margin-top: 36px; }
.faq-r4 { padding: 16px 0; border-bottom: 1px solid #e2e8f0; }
.faq-r4:last-child { border-bottom: 0; }
.faq-r4 h3 { margin: 0 0 6px !important; font-size: 17px !important; }
.faq-r4 p { margin: 0 !important; }
.readnext-wrap-r4 { margin-top: 36px; }
.readnext-grid-r4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.blog-article a.readnext-r4 { display: block; padding: 16px 18px; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s; }
.blog-article a.readnext-r4:hover { border-color: #93b4ff; transform: translateY(-2px); text-decoration: none; }
.readnext-r4 strong { display: block; margin-bottom: 6px; font-size: 15px; line-height: 1.35; color: #0f172a; }
.readnext-r4 span { display: block; font-size: 13.5px; line-height: 1.5; color: #526174; font-weight: 400; }
.author-box-r4 { display: flex; gap: 16px; align-items: flex-start; margin: 36px 0 10px; padding: 20px; border: 1px solid #dbe3ee; border-radius: 12px; background: #f8fafc; }
.author-box-r4 img { flex: 0 0 56px; border-radius: 50%; background: #fff; border: 1px solid #e2e8f0; }
.author-box-r4 p { margin: 0 0 6px !important; font-size: 15px; }
.author-name-r4 { font-weight: 800; color: #0f172a !important; }
.cluster-r4 { max-width: 1160px; margin: 36px auto; }
.cluster-r4 > h2 { margin: 0 0 16px; font-size: 24px; color: var(--text, #0f172a); scroll-margin-top: 84px; }
.blog-index-card h3 { margin: 8px 0 8px; font-size: 18px; line-height: 1.3; color: var(--text, #0f172a); }
.blog-index .preset-jump { max-width: 1160px; margin: 10px auto 24px; display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-index .preset-jump a { padding: .5rem .8rem; border: 1px solid #cbd5e1; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: #1e293b; background: #fff; }
.start-here-r4 { max-width: 1160px; margin: 0 auto 10px; padding: 22px 26px; }
.start-here-r4 h2 { margin: 0 0 10px; font-size: 20px; }
.start-here-r4 ol { margin: 0 0 0 22px; }
.start-here-r4 li { margin: 6px 0; color: #334155; }
.start-here-r4 a { color: #1d4ed8; font-weight: 700; }
/* Tool page long-form content */
.tool-guide-r4 { max-width: 920px; margin: 40px auto; padding: 34px; }
.tool-guide-r4 h2 { margin: 30px 0 12px; font-size: 24px; color: var(--text, #0f172a); }
.tool-guide-r4 h2:first-child { margin-top: 0; }
.tool-guide-r4 h3 { margin: 22px 0 8px; font-size: 18px; color: var(--text, #0f172a); }
.tool-guide-r4 p, .tool-guide-r4 li { color: var(--text-dim, #334155); line-height: 1.7; }
.tool-guide-r4 ul, .tool-guide-r4 ol { margin: 0 0 18px 22px; }
.tool-guide-r4 table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 15px; }
.tool-guide-r4 th, .tool-guide-r4 td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.tool-guide-r4 th { background: #f1f5f9; color: #0f172a; }
.tool-guide-r4 a { color: #1d4ed8; font-weight: 700; }
.tool-guide-r4 .table-scroll { overflow-x: auto; }
@media (max-width: 620px) {
  .tool-guide-r4 { margin: 24px 14px; padding: 22px 18px; }
  .author-box-r4 { flex-direction: column; }
  .toc-r4 ol { columns: 1; }
}
.blog-article pre { margin: 0 0 20px; padding: 14px 16px; overflow-x: auto; border-radius: 10px; background: #0f172a; }
.blog-article pre code { background: none !important; color: #e2e8f0 !important; font-size: 13.5px; line-height: 1.6; white-space: pre; }
.blog-article table td, .blog-article table th { vertical-align: top; }