/* Blog: list of articles (blog.html) and the article page (blog-<slug>.html). Text styles from doc.css. */
.bl { max-width: 1180px; margin: 0 auto; padding: 72px 24px 112px; }
.bl-head { max-width: 680px; margin-bottom: 48px; }
.bl-head h1 { margin: 0; font: 800 52px/1.04 var(--font-sans); letter-spacing: -2px; }
.bl-head .doc-lead { margin: 18px 0 0; font: 400 19px/1.55 var(--font-sans); color: var(--slate); }
@media (max-width: 767px) { .bl-head h1 { font-size: 36px; letter-spacing: -1.3px; } }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bl-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 360px; padding: 28px; border-radius: 28px; background: var(--bg);
  transition: transform 200ms var(--ease-out-soft), box-shadow 200ms; }
.bl-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(15,27,61,.12); }
.bl-card .bl-big { position: absolute; right: -34px; bottom: -34px; width: 200px; height: 200px; fill: none; stroke: var(--fg); stroke-width: 1; opacity: .18; transition: transform 600ms var(--ease-out-soft); }
.bl-card:hover .bl-big { transform: rotate(-8deg) scale(1.05); }
.bl-tag { position: relative; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--fg); font: 600 12px/1 var(--font-sans); }
.bl-card h2 { position: relative; margin: auto 0 0; max-width: 92%; font: 800 25px/1.15 var(--font-sans); letter-spacing: -.6px; color: var(--ink); }
.bl-card p { position: relative; margin: 10px 0 0; max-width: 92%; font: 400 15px/1.5 var(--font-sans); color: #2F3D63; }
.bl-meta { position: relative; margin-top: 18px; font: 600 13px/1 var(--font-sans); color: var(--fg); }

/* Article */
.post { max-width: 720px; }
.post .doc-date { margin-top: 16px; }
/* Hero: the post's colour block (16:9, like the blog cards) — a styled panel, not an image file */
.post-hero { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin-top: 32px; border-radius: 28px; background: var(--bg); display: flex; align-items: flex-end; padding: 28px; }
.post-hero svg { position: absolute; right: -40px; bottom: -50px; width: 62%; height: auto; fill: none; stroke: var(--fg); stroke-width: .8; opacity: .22; }
.post-hero span { position: relative; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--fg); font: 600 13px/1 var(--font-sans); }
.toc { margin-top: 28px; padding: 20px 24px; border-radius: 20px; background: var(--mist); }
.toc b { display: block; margin-bottom: 8px; font: 700 15px/1 var(--font-sans); color: var(--ink); }
.toc ol { margin: 0; padding-left: 20px; } .toc li { margin: 4px 0; font-size: 15px !important; }
.toc a { color: var(--ink) !important; font-weight: 500 !important; } .toc a:hover { color: var(--blue) !important; }
.post-body { margin-top: 36px; }
.post-body h2 { scroll-margin-top: 96px; }
.post-faq-h { margin-top: 56px !important; }
.post-lede { font: 400 21px/1.6 var(--font-sans) !important; color: var(--ink) !important; }
.post-body ol { margin: 0 0 12px; padding-left: 22px; } .post-body ol li { margin-bottom: 8px; }
.post-formula { padding: 16px 20px; border-radius: 16px; background: var(--mist); font: 600 16px/1.5 var(--font-sans) !important; color: var(--ink) !important; }
.post-msg { position: relative; max-width: 520px; padding: 14px 18px; border-radius: 18px 18px 18px 6px; background: #E9F9EF; font: 400 16px/1.5 var(--font-sans) !important; color: var(--ink) !important; }
.post-cta { margin-top: 56px; padding: 32px; border-radius: 28px; background: var(--ink); color: #fff; }
.post-cta h2 { margin: 0 0 8px !important; color: #fff; font: 800 28px/1.15 var(--font-sans); letter-spacing: -.8px; }
.post-cta p { margin: 0 0 22px; color: rgba(234,240,255,.8) !important; }

@media (max-width: 991px) { .bl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .bl { padding: 48px 20px 88px; } .bl-grid { grid-template-columns: 1fr; } .bl-card { min-height: 280px; }
  .post-lede { font-size: 19px !important; } .post-cta { padding: 26px 22px; }
}