/* ============================================================================
   DropsA DS — Blog article refinements (post-global layer).
   Scoped to body.blog-article; loaded after global.css via BlogLayout.
   ========================================================================== */

body.blog-article, body#blog-article {
  background: var(--ds-paper);
}

/* Hide mobile “you are here” bar — article has its own breadcrumb */
body.blog-article .ch-here, body#blog-article .ch-here{
  display: none !important;
}

/* Flush header → content (no white gap under nav) */
body.blog-article .ch, body#blog-article .ch{
  box-shadow: none;
}

/* --- Breadcrumb (match product hub .phero .crumb) --- */
body.blog-article main.post-container nav.breadcrumb, body#blog-article main.post-container nav.breadcrumb,
body.blog-article main.post-container .blog-post .breadcrumb, body#blog-article main.post-container .blog-post .breadcrumb,
body.blog-article .breadcrumb-nav, body#blog-article .breadcrumb-nav{
  display: block !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  max-width: var(--ds-wrap, 1180px);
  width: 100%;
  margin: 0 auto;
  padding: 34px var(--ds-space-4) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-family: var(--ds-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #857f6f;
  line-height: 1.5;
  gap: 0 !important;
}

body.blog-article .breadcrumb-list, body#blog-article .breadcrumb-list{
  gap: 0.35rem 0.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.blog-article main.post-container nav.breadcrumb a, body#blog-article main.post-container nav.breadcrumb a,
body.blog-article main.post-container .blog-post .breadcrumb a, body#blog-article main.post-container .blog-post .breadcrumb a,
body.blog-article .breadcrumb-nav a, body#blog-article .breadcrumb-nav a,
body.blog-article .breadcrumb-list a, body#blog-article .breadcrumb-list a{
  color: #857f6f !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.blog-article main.post-container nav.breadcrumb a:hover, body#blog-article main.post-container nav.breadcrumb a:hover,
body.blog-article main.post-container .blog-post .breadcrumb a:hover, body#blog-article main.post-container .blog-post .breadcrumb a:hover,
body.blog-article .breadcrumb-nav a:hover, body#blog-article .breadcrumb-nav a:hover,
body.blog-article .breadcrumb-list a:hover, body#blog-article .breadcrumb-list a:hover{
  color: var(--ds-ink) !important;
  text-decoration: none !important;
}

body.blog-article .breadcrumb-nav span[aria-current], body#blog-article .breadcrumb-nav span[aria-current],
body.blog-article .breadcrumb-list span[aria-current], body#blog-article .breadcrumb-list span[aria-current],
body.blog-article .breadcrumb-list [aria-current="page"], body#blog-article .breadcrumb-list [aria-current="page"],
body.blog-article main.post-container .blog-post .breadcrumb > span:last-child, body#blog-article main.post-container .blog-post .breadcrumb > span:last-child{
  color: var(--ds-ink) !important;
  font-weight: 600 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body.blog-article main.post-container .blog-post .breadcrumb > span:not(:last-child), body#blog-article main.post-container .blog-post .breadcrumb > span:not(:last-child),
body.blog-article .breadcrumb-list span[aria-hidden], body#blog-article .breadcrumb-list span[aria-hidden]{
  color: #857f6f !important;
  font-weight: 600 !important;
}

/* --- Article shell (open layout, no heavy card frame) --- */
body.blog-article .post-container, body#blog-article .post-container{
  max-width: var(--ds-wrap-narrow);
  margin: 0 auto var(--ds-space-5);
  padding: 0 var(--ds-space-4) var(--ds-space-5);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.blog-article .blog-post, body#blog-article .blog-post{
  max-width: 100%;
}

body.blog-article .post-hero, body#blog-article .post-hero{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-card);
  margin-top: var(--ds-space-2);
  margin-bottom: var(--ds-space-3);
}

body.blog-article .post-container .post-title, body#blog-article .post-container .post-title{
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  letter-spacing: -0.8px;
  max-width: 24ch;
}

body.blog-article .blog-post .post-meta, body#blog-article .blog-post .post-meta{
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: var(--ds-space-3);
  padding-bottom: 0;
  border-bottom: 0;
}

body.blog-article .blog-post .post-meta time, body#blog-article .blog-post .post-meta time{
  color: var(--ds-faint);
}

/* --- Prose measure --- */
body.blog-article .blog-post > p, body#blog-article .blog-post > p,
body.blog-article .blog-post > ul, body#blog-article .blog-post > ul,
body.blog-article .blog-post > ol, body#blog-article .blog-post > ol,
body.blog-article .blog-post > blockquote, body#blog-article .blog-post > blockquote,
body.blog-article .blog-post > p.cluster-inline-links, body#blog-article .blog-post > p.cluster-inline-links{
  max-width: 68ch;
}

body.blog-article .blog-post > h2, body#blog-article .blog-post > h2,
body.blog-article .blog-post > h3, body#blog-article .blog-post > h3{
  max-width: 68ch;
}

body.blog-article .blog-post p, body#blog-article .blog-post p{
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 1.15rem;
}

body.blog-article .blog-post h2, body#blog-article .blog-post h2{
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
  scroll-margin-top: 96px;
}

body.blog-article .blog-post h3, body#blog-article .blog-post h3{
  font-size: 1.2rem;
  font-weight: 800;
  margin-top: 1.85rem;
  scroll-margin-top: 96px;
}

/* --- Lists (diamond bullets) --- */
body.blog-article .blog-post ul, body#blog-article .blog-post ul{
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 1.25rem;
}

body.blog-article .blog-post ul li, body#blog-article .blog-post ul li{
  position: relative;
  padding: 6px 0 6px 24px;
  line-height: 1.65;
  color: var(--ds-ink-2);
}

body.blog-article .blog-post ul li::before, body#blog-article .blog-post ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--ds-brand);
  transform: rotate(45deg);
}

body.blog-article .blog-post ol, body#blog-article .blog-post ol{
  padding-left: 1.35rem;
  margin: 1rem 0 1.25rem;
  color: var(--ds-ink-2);
  line-height: 1.65;
}

body.blog-article .blog-post ol li, body#blog-article .blog-post ol li{
  margin: 0.35rem 0;
  padding-left: 0.25rem;
}

body.blog-article .blog-post a, body#blog-article .blog-post a{
  color: var(--ds-brand-d);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.blog-article .blog-post a:hover, body#blog-article .blog-post a:hover{
  color: var(--ds-brand);
}

body.blog-article .blog-post strong, body#blog-article .blog-post strong,
body.blog-article .blog-post b, body#blog-article .blog-post b{
  color: var(--ds-ink);
  font-weight: 700;
}

/* --- Blockquote --- */
body.blog-article .blog-post blockquote, body#blog-article .blog-post blockquote{
  margin: 1.5rem 0;
  padding: 1.15rem 1.35rem;
  background: var(--ds-cream);
  border-left: 4px solid var(--ds-brand);
  border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0;
  color: var(--ds-ink-2);
  font-size: 1.025rem;
  line-height: 1.75;
}

body.blog-article .blog-post blockquote p, body#blog-article .blog-post blockquote p{
  margin: 0;
}

/* --- Code --- */
body.blog-article .blog-post code, body#blog-article .blog-post code{
  font-family: var(--ds-mono);
  font-size: 0.875em;
  background: var(--ds-cream);
  border: 1px solid var(--ds-line-soft);
  border-radius: 5px;
  padding: 0.12em 0.4em;
  color: var(--ds-ink);
}

body.blog-article .blog-post pre, body#blog-article .blog-post pre{
  font-family: var(--ds-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--ds-cream);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0;
  max-width: 100%;
}

body.blog-article .blog-post pre code, body#blog-article .blog-post pre code{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* --- Horizontal rule --- */
body.blog-article .blog-post hr, body#blog-article .blog-post hr{
  border: 0;
  border-top: 1px solid var(--ds-line);
  margin: 2rem 0;
}

/* --- Images & figures --- */
body.blog-article .blog-post img.post-hero, body#blog-article .blog-post img.post-hero{
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

body.blog-article .blog-post img:not(.post-hero), body#blog-article .blog-post img:not(.post-hero){
  max-width: 100%;
  height: auto;
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-card);
  margin: 1.25rem 0;
  display: block;
}

body.blog-article .blog-post figure, body#blog-article .blog-post figure{
  margin: 1.5rem 0;
  max-width: 100%;
}

body.blog-article .blog-post figure img, body#blog-article .blog-post figure img{
  margin: 0 auto;
}

body.blog-article .blog-post figcaption, body#blog-article .blog-post figcaption{
  margin-top: 0.65rem;
  font-size: 0.875rem;
  color: var(--ds-muted);
  text-align: center;
  line-height: 1.5;
}

/* --- Tables --- */
body.blog-article .blog-post table, body#blog-article .blog-post table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  overflow: hidden;
}

body.blog-article .blog-post table th, body#blog-article .blog-post table th{
  background: var(--ds-dark);
  color: #f4ede2;
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--ds-dark-2);
}

body.blog-article .blog-post table td, body#blog-article .blog-post table td{
  padding: 11px 14px;
  border: 1px solid var(--ds-line);
  color: var(--ds-ink-2);
  vertical-align: top;
}

body.blog-article .blog-post table tr:nth-child(even) td, body#blog-article .blog-post table tr:nth-child(even) td{
  background: var(--ds-cream);
}

body.blog-article .blog-post .table-wrap, body#blog-article .blog-post .table-wrap,
body.blog-article .blog-post div[style*='overflow-x'], body#blog-article .blog-post div[style*='overflow-x']{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0;
  max-width: 100%;
}

/* --- Related articles (site navcard grid, no double frame) --- */
body.blog-article .blog-post > .related-articles, body#blog-article .blog-post > .related-articles,
body.blog-article .post-container > .related-articles, body#blog-article .post-container > .related-articles,
body.blog-article .blog-post > section.related-articles, body#blog-article .blog-post > section.related-articles{
  max-width: none;
  margin-top: var(--ds-space-3) !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.blog-article .related-articles h2, body#blog-article .related-articles h2{
  margin: 0 0 var(--ds-space-2) !important;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem) !important;
  font-weight: 900 !important;
  color: var(--ds-ink) !important;
}

body.blog-article .related-articles ul, body#blog-article .related-articles ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
}

body.blog-article .related-articles ul li, body#blog-article .related-articles ul li{
  padding: 0;
  margin: 0;
}

body.blog-article .related-articles ul li::before, body#blog-article .related-articles ul li::before{
  display: none;
}

body.blog-article .related-articles ul li a, body#blog-article .related-articles ul li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-brand);
  border-radius: 11px;
  color: var(--ds-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.blog-article .related-articles ul li a:hover, body#blog-article .related-articles ul li a:hover{
  border-color: #f0c3b4;
  box-shadow: 0 14px 32px -24px rgba(23, 21, 15, 0.45);
  transform: none;
  color: var(--ds-ink);
  text-decoration: none !important;
}

body.blog-article .related-articles ul li a:focus-visible, body#blog-article .related-articles ul li a:focus-visible{
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

body.blog-article .related-articles ul li a::after, body#blog-article .related-articles ul li a::after{
  content: '↗';
  flex: none;
  color: var(--ds-brand-d);
  font-weight: 400;
}

/* --- Inline cluster hint (paragraph at top of article) --- */
body.blog-article p.cluster-inline-links, body#blog-article p.cluster-inline-links{
  margin-top: var(--ds-space-2) !important;
  margin-bottom: var(--ds-space-2) !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--ds-ink-2);
}

body.blog-article p.cluster-inline-links a, body#blog-article p.cluster-inline-links a{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Solution pages band (brown card — matches landing .ctaban) --- */
body.blog-article .post-container > section.cluster-inline-links, body#blog-article .post-container > section.cluster-inline-links{
  position: relative;
  overflow: hidden;
  margin-top: var(--ds-space-4) !important;
  margin-bottom: 0 !important;
  padding: 40px 44px;
  border: 0;
  border-radius: 20px;
  background: radial-gradient(120% 140% at 80% 10%, #2a221b 0%, var(--ds-dark) 62%);
  color: #ece9e2;
  max-width: none;
  box-shadow: none;
}

body.blog-article .post-container > section.cluster-inline-links::before, body#blog-article .post-container > section.cluster-inline-links::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

body.blog-article .post-container > section.cluster-inline-links h2, body#blog-article .post-container > section.cluster-inline-links h2{
  position: relative;
  margin: 0 0 12px !important;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem) !important;
  font-weight: 900 !important;
  color: #f4ede2 !important;
  line-height: 1.2;
}

body.blog-article .post-container > section.cluster-inline-links p, body#blog-article .post-container > section.cluster-inline-links p{
  position: relative;
  margin: 0 !important;
  max-width: none !important;
  font-size: 16px;
  line-height: 1.65;
  color: #b7ab9c !important;
}

body.blog-article .post-container > section.cluster-inline-links a, body#blog-article .post-container > section.cluster-inline-links a{
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

body.blog-article .post-container > section.cluster-inline-links a:hover, body#blog-article .post-container > section.cluster-inline-links a:hover{
  color: var(--ds-brand-l) !important;
  text-decoration: underline !important;
}

/* --- End sections: flatten extra frames --- */
body.blog-article .authority-next-steps, body#blog-article .authority-next-steps,
body.blog-article .blog-post-endcap__card, body#blog-article .blog-post-endcap__card{
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  box-shadow: none;
}

body.blog-article .blog-post-endcap__eyebrow, body#blog-article .blog-post-endcap__eyebrow{
  color: var(--ds-brand-d);
}

body.blog-article .blog-post-endcap__chip, body#blog-article .blog-post-endcap__chip{
  border-color: var(--ds-line);
  box-shadow: none;
}

/* --- FAQ in article (native details) --- */
body.blog-article .blog-post .authority-faq details, body#blog-article .blog-post .authority-faq details,
body.blog-article .blog-post details, body#blog-article .blog-post details{
  margin-bottom: 10px;
}

/* --- Back link (dark brown CTA for contrast) --- */
body.blog-article main.post-container a.back-link, body#blog-article main.post-container a.back-link,
body.blog-article .blog-post .back-link, body#blog-article .blog-post .back-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--ds-space-3);
  min-height: 46px;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none !important;
  color: #ece9e2 !important;
  background: radial-gradient(120% 140% at 18% 12%, #2a221b 0%, var(--ds-dark) 62%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transition: filter 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

body.blog-article main.post-container a.back-link:hover, body#blog-article main.post-container a.back-link:hover,
body.blog-article .blog-post .back-link:hover, body#blog-article .blog-post .back-link:hover{
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.24);
}

body.blog-article .back-link:focus-visible, body#blog-article .back-link:focus-visible{
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* --- Prev / Next navigation (BlogArticleNav) --- */
body.blog-article .blog-article-nav, body#blog-article .blog-article-nav{
  max-width: var(--ds-wrap-narrow);
  margin: 0 auto var(--ds-space-6);
  padding: 0 var(--ds-space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body.blog-article .blog-article-nav__link, body#blog-article .blog-article-nav__link{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 18px 20px;
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  text-decoration: none;
  transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

body.blog-article .blog-article-nav__link:hover, body#blog-article .blog-article-nav__link:hover{
  border-color: #f0c3b4;
  box-shadow: var(--ds-shadow-card);
  transform: translateY(-1px);
}

body.blog-article .blog-article-nav__link:focus-visible, body#blog-article .blog-article-nav__link:focus-visible{
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

body.blog-article .blog-article-nav__link--prev, body#blog-article .blog-article-nav__link--prev{
  border-left: 4px solid var(--ds-brand);
}

body.blog-article .blog-article-nav__link--next, body#blog-article .blog-article-nav__link--next{
  border-right: 4px solid var(--ds-brand);
  text-align: right;
}

body.blog-article .blog-article-nav__dir, body#blog-article .blog-article-nav__dir{
  font-family: var(--ds-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-brand-d);
}

body.blog-article .blog-article-nav__title, body#blog-article .blog-article-nav__title{
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.blog-article .blog-article-nav__spacer, body#blog-article .blog-article-nav__spacer{
  display: block;
}

/* --- Mobile --- */
@media (max-width: 899px) {
  body.blog-article main.post-container nav.breadcrumb,
  body.blog-article main.post-container .blog-post .breadcrumb,
  body.blog-article .breadcrumb-nav {
    padding-left: var(--ds-space-3) !important;
    padding-right: var(--ds-space-3) !important;
    padding-top: 28px !important;
  }

  body.blog-article .post-container > section.cluster-inline-links {
    padding: 32px 24px;
    border-radius: 16px;
  }

  body.blog-article .post-container {
    margin: 0 auto var(--ds-space-4);
    padding: 0 var(--ds-space-3) var(--ds-space-4);
  }

  body.blog-article .blog-post p {
    font-size: 1rem;
  }

  body.blog-article .related-articles ul {
    grid-template-columns: 1fr;
  }

  body.blog-article .blog-article-nav {
    padding: 0 var(--ds-space-3);
    grid-template-columns: 1fr;
  }

  body.blog-article .blog-article-nav__link--next {
    text-align: left;
    border-right: 0;
    border-left: 4px solid var(--ds-brand);
  }

  body.blog-article .post-hero {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--ds-r-md);
  }
}

@media (max-width: 520px) {
  body.blog-article .post-container .post-title,
  body#blog-article .post-container .post-title {
    max-width: 16ch;
  }
}

/* --- DS template: .crumb breadcrumb (LandingShell BlogArticle) --- */
body.blog-article .blog-post nav.crumb, body#blog-article .blog-post nav.crumb,
body#blog-article .blog-post nav.crumb {
  display: block !important;
  max-width: var(--ds-wrap-narrow);
  width: 100%;
  margin: 0 auto;
  padding: 34px var(--ds-space-4) 0 !important;
  background: transparent !important;
  font-family: var(--ds-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #857f6f;
  line-height: 1.5;
}

body.blog-article .blog-post nav.crumb a, body#blog-article .blog-post nav.crumb a,
body#blog-article .blog-post nav.crumb a {
  color: #857f6f !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.blog-article .blog-post nav.crumb a:hover, body#blog-article .blog-post nav.crumb a:hover,
body#blog-article .blog-post nav.crumb a:hover {
  color: var(--ds-ink) !important;
}

body.blog-article .blog-post nav.crumb .cur, body#blog-article .blog-post nav.crumb .cur,
body#blog-article .blog-post nav.crumb .cur {
  color: var(--ds-ink) !important;
  font-weight: 600 !important;
}

/* --- Prose block inside article --- */
body.blog-article .blog-post .ds-prose, body#blog-article .blog-post .ds-prose,
body#blog-article .blog-post .ds-prose {
  max-width: 100%;
  padding: 0;
  margin-top: 0;
}

body.blog-article .blog-post .ds-prose h2, body#blog-article .blog-post .ds-prose h2,
body#blog-article .blog-post .ds-prose h2 {
  margin: var(--ds-space-4) 0 0;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.8px;
  color: var(--ds-ink);
}

body.blog-article .blog-post .ds-prose h3, body#blog-article .blog-post .ds-prose h3,
body#blog-article .blog-post .ds-prose h3 {
  margin: var(--ds-space-3) 0 0;
  font-weight: 800;
  font-size: 21px;
  color: var(--ds-ink);
}

body.blog-article .blog-post .ds-prose p, body#blog-article .blog-post .ds-prose p,
body#blog-article .blog-post .ds-prose p {
  margin: 14px 0 0;
  line-height: 1.8;
  font-size: 16px;
  color: var(--ds-ink-2);
}

body.blog-article .blog-post .ds-prose p.cluster-inline-links, body#blog-article .blog-post .ds-prose p.cluster-inline-links,
body#blog-article .blog-post .ds-prose p.cluster-inline-links {
  margin-top: var(--ds-space-3);
  padding: 20px 24px;
  background: var(--ds-paper-2);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  font-size: 15px;
  line-height: 1.65;
}

/* --- FAQ DS component in article --- */
body.blog-article .blog-post__faq, body#blog-article .blog-post__faq,
body#blog-article .blog-post__faq {
  margin-top: var(--ds-space-4);
}

body.blog-article .blog-post__faq .ds-faq, body#blog-article .blog-post__faq .ds-faq,
body#blog-article .blog-post__faq .ds-faq {
  max-width: 100%;
  padding: 0;
}

/* --- RelatedLinks inside article --- */
body.blog-article .blog-post .ds .sec, body#blog-article .blog-post .ds .sec,
body#blog-article .blog-post .ds .sec {
  padding-top: var(--ds-space-4);
  margin-top: var(--ds-space-4);
}

body.blog-article .blog-post .ds .sec--band, body#blog-article .blog-post .ds .sec--band,
body#blog-article .blog-post .ds .sec--band {
  margin-left: calc(-1 * var(--ds-space-4));
  margin-right: calc(-1 * var(--ds-space-4));
  padding-left: var(--ds-space-4);
  padding-right: var(--ds-space-4);
}

@media (max-width: 899px) {
  body.blog-article .blog-post nav.crumb,
  body#blog-article .blog-post nav.crumb {
    padding-left: var(--ds-space-3) !important;
    padding-right: var(--ds-space-3) !important;
    padding-top: 28px !important;
  }

  body.blog-article .blog-post .ds .sec--band,
  body#blog-article .blog-post .ds .sec--band {
    margin-left: calc(-1 * var(--ds-space-3));
    margin-right: calc(-1 * var(--ds-space-3));
    padding-left: var(--ds-space-3);
    padding-right: var(--ds-space-3);
  }
}