/* ══════════════════════════════════════════════════════════════════════════
   Blog post styles — shared by every article under /blog/.
   Loads after /styles.css; anything unique to one post stays inline on it.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --container-max: 680px;
  /* Posts are long-form, so body copy runs a little darker than the marketing
     pages' muted grey. */
  --text-muted: #475a73;
}

/* Long-form reading size, larger and looser than the rest of the site. */
body { font-size: 18px; line-height: 1.75; }

/* The header bar keeps the site's 900px width even though the article column
   below it is narrower. */
header.site .nav-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }

article { padding: 56px 0 64px; }
.crumb { font-size: 14px; margin-bottom: 18px; }
.crumb a { color: var(--blue); text-decoration: none; }
.meta { font-size: 14px; color: var(--text-light); margin-bottom: 14px; }
h1 {
  font-size: clamp(30px, 5vw, 42px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.15; color: var(--navy); margin-bottom: 24px;
}
article p { margin-bottom: 20px; color: var(--text-muted); }
article h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); margin: 40px 0 14px; }
article h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); margin: 30px 0 10px; }
article ul { margin: 0 0 20px 22px; color: var(--text-muted); }
article li { margin-bottom: 10px; }
article strong { color: var(--navy); }
article p a, article li a { color: var(--blue); text-decoration: underline; }
.lead { font-size: 20px; color: var(--text); }

.cta-box { background: var(--navy); border-radius: 16px; padding: 34px; margin: 48px 0 0; text-align: center; }
/* letter-spacing is declared rather than left to inherit: `article h3` below
   sets -0.01em, and the CTA box sits inside <article>, so leaving it off made
   the heading depend on which rule happened to win. */
.cta-box h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--white); margin: 0 0 8px; }
.cta-box p { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 20px; }
.cta-box p a { color: rgba(255,255,255,0.85); }
/* Slightly tighter than the site default so the button doesn't dominate the box.
   Padding is 2px short on each side because .btn carries a 2px border. */
.cta-box .btn { justify-content: center; padding: 12px 26px; font-size: 15px; }

/* Pointer to the other post, below the CTA box: the conversion ask gets first
   refusal, and this catches the reader who isn't ready for it yet. */
.next-read {
  margin-top: 28px;
  font-size: 16px;
  color: var(--text-muted);
}
.next-read a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.site-footer { margin-top: 56px; }