/* SmartFence - long-form article layout (blog guides) */
.article-crumbs { font-size: .875rem; margin-bottom: .75rem; color: #fff; }
.article-crumbs a { color: #fff; text-decoration: underline; }
.article-body { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem 4rem; color: var(--text-body); }
.article-body h2 { font-size: 1.625rem; font-weight: 800; color: var(--text-dark); margin: 2.75rem 0 .875rem; line-height: 1.3; scroll-margin-top: 90px; }
.article-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin: 1.75rem 0 .5rem; line-height: 1.35; scroll-margin-top: 90px; }
.article-body h4 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .5rem; }
.article-body p, .article-body li { font-size: 1rem; line-height: 1.75; }
.article-body p { margin-bottom: 1rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 0 0 1.25rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .5rem; }
.article-body a:not(.btn) { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article-lead { font-size: 1.125rem !important; line-height: 1.75; color: var(--text-dark); }
.article-note { background: var(--off-white); border: 2px solid #D1D5DB; border-radius: 14px; padding: 1rem 1.25rem; font-size: .9375rem; line-height: 1.7; margin: 1.5rem 0; }
.article-toc { border: 2px solid #D1D5DB; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.07); padding: 1.25rem 1.5rem .5rem; margin: 1.5rem 0 1rem; background: white; }
.article-toc p { margin-bottom: .5rem; color: var(--text-dark); }
.article-table-wrap { overflow-x: auto; border: 2px solid #D1D5DB; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.07); margin: 1rem 0 1.5rem; background: white; }
.article-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .875rem; }
.article-table th, .article-table td { text-align: left; padding: .75rem .875rem; border-bottom: 1px solid #D1D5DB; vertical-align: top; line-height: 1.5; }
.article-table thead th { background: var(--text-dark); color: white; font-weight: 700; }
.article-table tbody th { font-weight: 700; color: var(--text-dark); white-space: nowrap; }
.article-table tbody tr:last-child th, .article-table tbody tr:last-child td { border-bottom: none; }
.tool-section { border: 2px solid #D1D5DB; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.07); padding: 1.5rem 1.5rem .5rem; margin: 1.5rem 0; background: white; scroll-margin-top: 90px; }
.tool-section h3 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tool-num { color: var(--teal); }
.tool-tag { font-size: .75rem; font-weight: 600; color: var(--teal); background: var(--teal-light); border-radius: 999px; padding: .2rem .7rem; }
.tool-best { color: var(--text-dark); }
.tool-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .5rem 0 1rem; }
.tool-proscons > div { background: var(--off-white); border-radius: 10px; padding: 1rem 1rem .25rem; }
.tool-proscons li { font-size: .9375rem; }
.article-faq h3 { font-size: 1.0625rem; color: var(--teal); }
.article-cta { text-align: center; border: 2px solid var(--teal); border-radius: 14px; padding: 2rem 1.5rem; margin: 2.5rem 0; background: white; }
.article-cta h2 { margin-top: 0; }
.article-cta .btn { margin: .375rem; }
.article-small { font-size: .875rem; }
.article-sources li { font-size: .875rem; margin-bottom: .25rem; }
@media(max-width:700px) { .tool-proscons { grid-template-columns: 1fr; } .article-body h2 { font-size: 1.375rem; } }
.article-img { width: 100%; height: 340px; object-fit: cover; border-radius: 14px; display: block; margin: 1.5rem 0; }