/* Blog/guide post styles. References the tokens in base.css, never
   redefines them. Article body reuses .tool-explainer (tools.css); this
   file only adds what's genuinely blog-specific. Loaded by blog posts
   only (not the /blog/ hub or tool pages).

   Layout: a single centered reading column (44rem, about 70 characters),
   the classic editorial measure. Tool pages keep their left-aligned
   layout because the calculator spans the full width there; a post has
   no second column, so a left-aligned column left the right half of a
   desktop screen empty. The related-posts card grid keeps the full
   container width. */

.breadcrumb,
.tool-header,
.trust-strip,
.tool-explainer > *,
.faq-block > *,
.faq-block__item,
.next-steps h2,
.next-steps__list,
.blog-cta {
  margin-left: auto;
  margin-right: auto;
  max-width: 44rem;
}

.tool-header h1 {
  font-size: clamp(2.125rem, 4.6vw, 2.875rem);
}

.tool-explainer h2 {
  margin-top: var(--space-2);
}

.tool-explainer h3 {
  margin-top: var(--space-4);
}

.tool-explainer ul,
.tool-explainer ol {
  margin-top: 0;
  margin-bottom: var(--space-2);
  padding-left: var(--space-4);
}

.tool-explainer li {
  margin-bottom: var(--space-1);
  line-height: 1.65;
}

.tool-explainer li::marker {
  color: var(--color-accent);
}

/* "Try the calculator" callout: a tinted panel with the tool name in the
   serif display face, so it reads as the post's one call to action rather
   than another paragraph. */
.blog-cta {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--color-bg-page-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-3) var(--space-4);
}

.blog-cta__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  margin: 0 0 6px;
}

.blog-cta__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-primary);
  text-decoration: none;
}

.blog-cta__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.blog-cta__blurb {
  color: var(--color-neutral-400);
  margin: var(--space-1) 0 0;
}

.blog-index-intro {
  max-width: 70ch;
}