/* ===========================================================================
   Blog — scoped styles. Uses the site's tokens (Inter, Signal Blue #057AFF,
   card grey #f5f5f5, hairlines, 16px radius). Reuses the shared nav (styles.css)
   and footer (footer.css). No client-side JS; the fixed nav is frosted here by
   default because there is no hero behind it.
   =========================================================================== */

body.blog { background: #fff; }
body.blog .nav {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Signature sky-blue gradient band at the top of every blog page (matches the
   home hero and the pricing header), fading to white. The fixed nav floats over
   it; content sits on top. */
.blog-main {
  padding: 150px 0 96px;
  background-color: #fff;
  background-image: linear-gradient(180deg,
    rgb(199, 231, 255) 0%,
    rgb(165, 211, 255) 40%,
    rgba(150, 203, 255, 0.32) 74%,
    #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 100% 640px;
}
.blog-main a { color: #057AFF; text-decoration: none; }
.blog-main a:hover { text-decoration: underline; }
.blog-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: #057AFF; margin: 0 0 10px; }

/* ---------- Index + archives ---------- */
.blog-index-head { max-width: 720px; margin: 0 auto; text-align: center; }
.blog-index-head h1 { font-size: 46px; line-height: 1.08; letter-spacing: -1px; font-weight: 600; color: #000; margin: 0; }
.blog-index-intro { font-size: 18px; line-height: 1.55; color: rgba(0, 0, 0, 0.65); margin: 14px auto 0; max-width: 600px; }

.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; }
.blog-filters a { font-size: 14px; font-weight: 500; color: #222; background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 80px; padding: 7px 14px; }
.blog-filters a:hover { background: #eef0f3; text-decoration: none; }
.blog-filters a[aria-current="page"] { background: #000; color: #fff; border-color: #000; }

.blog-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { height: 100%; }
.blog-card-link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px -14px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.blog-card-link:hover { text-decoration: none; box-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.28); transform: translateY(-2px); }
.blog-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.blog-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }
.blog-card-cat { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #057AFF; text-transform: uppercase; }
.blog-card-title { font-size: 20px; line-height: 1.25; letter-spacing: -0.4px; font-weight: 600; color: #000; margin: 10px 0 0; }
.blog-card-desc { font-size: 14.5px; line-height: 1.5; color: rgba(0, 0, 0, 0.6); margin: 10px 0 0; flex: 1 1 auto; }
.blog-card-meta { font-size: 13px; color: #6b7280; margin: 16px 0 0; }

.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 40px 0 0; }
.blog-pagination a, .blog-pagination span { font-size: 14px; font-weight: 500; border-radius: 10px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.08); color: #222; }
.blog-pagination a:hover { background: #f6f7f9; text-decoration: none; }
.blog-pagination .is-current { background: #000; color: #fff; border-color: #000; }
.blog-pagination .is-disabled { opacity: 0.4; }

/* ---------- Post ---------- */
.blog-breadcrumbs { font-size: 13px; color: #6b7280; margin: 0 0 18px; }
.blog-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.blog-breadcrumbs li::after { content: '/'; margin-left: 8px; color: #cbd2dc; }
.blog-breadcrumbs li:last-child::after { content: ''; }
.blog-breadcrumbs a { color: #6b7280; }

.blog-article { max-width: 760px; margin: 0 auto; }
.blog-title { font-size: 40px; line-height: 1.12; letter-spacing: -1px; font-weight: 600; color: #000; margin: 0; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: #6b7280; margin: 18px 0 0; }
.blog-meta .blog-meta-author a { color: #222; font-weight: 600; }
.blog-meta .sep { color: #cbd2dc; }

.blog-tldr { margin: 26px 0 0; background: #f6f7f9; border: 1px solid rgba(0, 0, 0, 0.07); border-left: 3px solid #057AFF; border-radius: 14px; padding: 18px 20px; }
.blog-tldr h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #057AFF; margin: 0 0 8px; font-weight: 700; }
.blog-tldr p { font-size: 16.5px; line-height: 1.55; color: #222; margin: 0; }

.blog-hero { margin: 26px 0 0; }
.blog-hero img { width: 100%; height: auto; border-radius: 16px; display: block; border: 1px solid rgba(0, 0, 0, 0.06); }

.blog-toc { margin: 30px 0 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; padding: 16px 20px; }
.blog-toc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin: 0 0 8px; font-weight: 700; }
.blog-toc ol { margin: 0; padding-left: 18px; }
.blog-toc li { margin: 5px 0; font-size: 14.5px; }
.blog-toc .toc-h3 { margin-left: 14px; list-style: circle; }

.blog-body { margin: 34px 0 0; font-size: 17px; line-height: 1.7; color: #2a2f3a; }
.blog-body h2 { font-size: 25px; line-height: 1.25; letter-spacing: -0.4px; font-weight: 600; color: #000; margin: 42px 0 0; scroll-margin-top: 100px; }
.blog-body h3 { font-size: 19px; line-height: 1.3; font-weight: 600; color: #111; margin: 28px 0 0; scroll-margin-top: 100px; }
.blog-body p { margin: 14px 0 0; }
.blog-body ul, .blog-body ol { margin: 14px 0 0; padding-left: 22px; }
.blog-body li { margin: 6px 0; }
.blog-body strong { color: #111; }
.blog-body blockquote { margin: 20px 0 0; background: #f6f7f9; border-left: 3px solid #057AFF; border-radius: 0 12px 12px 0; padding: 14px 18px; color: #222; }
.blog-body blockquote p { margin: 6px 0 0; }
.blog-body blockquote p:first-child { margin: 0; }
.blog-body table { width: 100%; border-collapse: collapse; margin: 22px 0 0; font-size: 15px; }
.blog-body th, .blog-body td { text-align: left; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.1); vertical-align: top; }
.blog-body th { background: #f5f5f5; font-weight: 600; color: #111; }
.blog-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: #f5f5f5; border-radius: 5px; padding: 1px 6px; }
.blog-body pre { margin: 18px 0 0; background: #0b1220; color: #e6edf3; border-radius: 12px; padding: 16px; overflow: auto; }
.blog-body pre code { background: none; padding: 0; color: inherit; }
.blog-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 16px 44px -20px rgba(4, 32, 45, 0.4); margin-top: 12px; }

.blog-faq { margin: 46px 0 0; }
.blog-faq > h2 { font-size: 25px; letter-spacing: -0.4px; font-weight: 600; color: #000; margin: 0 0 6px; }
.blog-faq-item { padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.blog-faq-item h3 { font-size: 17.5px; font-weight: 600; color: #111; margin: 0; }
.blog-faq-item p { font-size: 16px; line-height: 1.6; color: #2a2f3a; margin: 8px 0 0; }

.blog-sources { margin: 46px 0 0; }
.blog-sources h2 { font-size: 22px; letter-spacing: -0.3px; font-weight: 600; color: #000; margin: 0 0 10px; }
.blog-sources ol { margin: 0; padding-left: 20px; }
.blog-sources li { margin: 8px 0; font-size: 15.5px; line-height: 1.5; }

.blog-updated { font-size: 13.5px; color: #6b7280; margin: 30px 0 0; }

.blog-author { display: flex; gap: 16px; align-items: flex-start; margin: 44px 0 0; background: #f6f7f9; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; padding: 22px; }
.blog-author img { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; }
.blog-author-name { font-size: 17px; font-weight: 700; color: #111; margin: 0; }
.blog-author-role { font-size: 14px; color: #6b7280; margin: 2px 0 0; }
.blog-author-bio { font-size: 15px; line-height: 1.55; color: #2a2f3a; margin: 10px 0 0; }
.blog-author-social { display: flex; gap: 14px; margin: 12px 0 0; font-size: 14px; font-weight: 600; }

.blog-related { margin: 54px 0 0; }
.blog-related h2 { font-size: 24px; letter-spacing: -0.4px; font-weight: 600; color: #000; margin: 0 0 18px; }
.blog-related .blog-list { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) { .blog-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .blog-main { padding: 104px 0 72px; }
  .blog-list { grid-template-columns: 1fr; }
  .blog-index-head h1 { font-size: 34px; }
  .blog-title { font-size: 30px; }
  .blog-body { font-size: 16.5px; }
  .blog-body h2 { font-size: 22px; }
  .blog-author { flex-direction: column; }
}