/*
    Blog posts written as our own HTML (Admin > Blog > My own HTML), e.g. the marketing kit's
    articles. blog.aspx wraps them in .blog-article on the site's dark theme. The admin editor
    loads this same file into its preview, with .blog-article-frame standing in for the page.
    Referenced as BlogHtml.ArticleCss: bump its ?v there when this file changes.
*/
.blog-article-frame { margin: 0; padding: 32px 28px; background: #03030f; color: #fff; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.6; }

.blog-article { max-width: 900px; margin: 10px auto 30px; color: #fff; font-size: 16px; line-height: 1.7; }
.blog-article p { margin: 0 0 18px; color: #fff; }
.blog-article h2 { margin: 40px 0 16px; font-size: 26px; line-height: 1.3; font-weight: 700; color: #bc9c51; text-transform: none; letter-spacing: 0; }
.blog-article h3 { margin: 26px 0 10px; font-size: 19px; line-height: 1.4; font-weight: 700; color: #fff; text-transform: none; letter-spacing: 0; }
.blog-article ul, .blog-article ol { margin: 0 0 20px; padding-left: 24px; }
.blog-article li { margin: 0 0 8px; color: #fff; }
.blog-article strong { color: #fff; }
.blog-article a { color: #bc9c51; text-decoration: underline; }
.blog-article a:hover { color: #e0c27a; }

/* Answer-first summary and key takeaways */
.blog-article .blog-summary { margin: 0 0 36px; padding: 26px 30px; background: #161616; border-left: 4px solid #bc9c51; border-radius: 4px; }
.blog-article .blog-summary h2 { margin-top: 22px; font-size: 20px; }
.blog-article .blog-summary > :last-child { margin-bottom: 0; }

/* FAQ */
.blog-article .blog-faq { margin: 44px 0 0; padding-top: 6px; border-top: 1px solid #3a3222; }
.blog-article .blog-faq h3 { color: #bc9c51; }

/* Closing call to action */
.blog-article .blog-cta { display: block; margin: 44px 0 30px; padding: 30px 32px; background: #2b2b2b; border-top: 3px solid #d00e05; border-radius: 4px; }
.blog-article .blog-cta h2 { margin-top: 0; color: #fff; }
.blog-article .blog-cta .blog-cta-button { margin: 22px 0 0; }
.blog-article .blog-cta .blog-cta-button a { color: #fff; text-decoration: none; font-weight: 700; padding: 10px 22px; }

/* Disclaimer and sources */
.blog-article .blog-disclaimer, .blog-article .blog-disclaimer em { color: #b5b5b5; font-size: 14px; }
.blog-article .blog-sources { margin-top: 26px; padding-top: 6px; border-top: 1px solid #333; }
.blog-article .blog-sources h2 { font-size: 18px; color: #b5b5b5; }
.blog-article .blog-sources li { color: #b5b5b5; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

@media (max-width: 767px) {
    .blog-article { font-size: 15px; }
    .blog-article h2 { font-size: 22px; }
    .blog-article .blog-summary, .blog-article .blog-cta { padding: 20px 18px; }
}